SI14/archive/hotspots/1/guestbook/style.css

* {
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
    
}
html,
body {
  height:100%;
  min-height:100%;

}

body {
    background-color:#11e100;
  font:normal normal 22px/1.4 Helvetica,sans-serif;
  color:#740cff;

}
a {
  color:#740cff; /*/color of name at a posted message/*/
  text-decoration:none;
}
a:focus,
a:hover {text-decoration:underline}
button,
input,
textarea {
    -webkit-appearance: none;
  display:inline-block;
  *display:inline;
  width:80%;
  text-align:left;
  margin:0 0 20px;
  padding:4px;
  font:inherit;
  line-height:1;
  background-color:#21ff2e;
    border-radius: 10px;
    border-color:#21ff2e;
}

textarea:message{
    height:500px;
}
input {display:block}
textarea {
  display:block;
  resize:vertical;
  line-height:inherit;
  height:80px;

}
::placeholder{
color:#11e100;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}
button {
  width:auto;
  padding:5px 8px;
  background-color:#740cff;
  border-color:#BCAF6F;
  color:#21ff2e;
  font-weight:bold;
    font-size:30px;
  cursor:pointer;
  float:right;
  font:normal normal 22px/1.4 Helvetica,sans-serif;
}
input:focus,
textarea:focus {color:#333}
button:focus,
button:hover {
  background-color:#DBFF1C;
    color:#40375b;
}

.guestbook {
  width:80%;
  padding-right:100px;
  padding-top:120px;
  float: right;
  z-index: 2;   
}
.guestbook form label {
  display:block;
  float:left;
  width:150px;
  text-align:right;
  padding-top:3px;
   padding-right:10px;
    color:#740cff; /*/color of "name" and "message"/*/
font-family:'Monotype Corsiva','Apple Chancery','ITC Zapf Chancery','URW Chancery L',cursive;
font-size:35px;

}
.guestbook form div {margin-left:58px}
.guestbook hr {
  height:0;
  border:none;  
    border-top:0px solid #FFF;
  margin:10px 0 10px;
}
.guest-messages {
  border:0px solid #FFF;
  padding-bottom:30px;
  /*
  height:300px;
  overflow:auto;
  */
}
.guest-item {
  border-top:0px solid #fff;
  padding:4px;
  position:relative;
    background-color:none;
}
.guest-item:first-child {border-top:1px}
.guest-name {
  font-weight:bold;
  margin-left:2px;
    color:none;
  font-size: 15px;
    float:right;
}
.guest-timestamp {
  float:right;
  margin-right:2px;
    font-size:15px;
}
.guest-message {
  display:block;
  clear:both;
  margin-top:4px;
  padding:4px 6px;
  background-color: none;
   border-bottom:10px dotted #21ff2e;
    font-size:40px;
}
.guestbook-nav {
  margin:5px 0;
  text-align:center;
}
label{ /*/dont know what this does/*/
color:#fff;
    width:200px; 
}
.message-error,
.message-warning {
  padding:5px 10px;
  background-color:#FFDBD8;
  border-top:1px solid #FFF;
}
.message-warning {background-color:#DBFFD8}
.message-error:first-child,
.message-warning:first-child {border-top:none}
.clear {
  display:block;
  clear:both;
}

#lefty{
writing-mode: vertical-rl;
text-orientation: mixed;
width:10%;
height:100%;
text-align:justify;
float: right;
    background-color:#21ff2e;
    padding-top:-50px;
    padding-bottom:50px;
    padding-right:10px;
position: relative;
  z-index: 2;
font-family:'Monotype Corsiva','Apple Chancery','ITC Zapf Chancery','URW Chancery L',cursive;
font-size: 4vh;
}
#toppy{
width:100%;
height:7%;
text-align:center;
    background-color:#21ff2e;
    padding-top:10px;
    padding-bottom:50px;
position: relative;
  z-index: 2;
font-family:'Monotype Corsiva','Apple Chancery','ITC Zapf Chancery','URW Chancery L',cursive;
font-size: 6vw;
}

@keyframes img1 {
  0%   { left:100px; top:300px;}
  25%  { left:120px; top:200px;}
  50%  { left:110px; top:100px;}
  75%  { left:140px; top:200px;}
  100% { left:100px; top:300px;}
}

.img1{
    position: absolute;
    z-index: -1;
    width:300px;
  animation-name: img1;
  animation-duration: 80s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}


@keyframes img2 {
  0%   { left:350px; top:1000px;}
  25%  { left:400px; top:1200px;}
  50%  { left:400px; top:1300px;}
  75%  { left:30px; top:1200px;}
  100% { left:350px; top:1000px;}
}

.img2{
    position: absolute;
    z-index: -1;
    width:270px;
  animation-name: img2;
  animation-duration: 100s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}


@keyframes img3 {
  0%   { left:0px; top:750px;}
  25%  { left:50px; top:850px;}
  50%  { left:5px; top:770px;}
  75%  { left:15px; top:860px;}
  100% { left:0px; top:750px;}
}

.img3{
    position: absolute;
    z-index: -1;
    width:300px;
  animation-name: img3;
  animation-duration: 90s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes img4 {
  0%   { left:0px; top:0px;}
  25%  { left:400px; top:50px;}
  50%  { left:400px; top:200px;}
  75%  { left:30px; top:200px;}
  100% { left:0px; top:0px;}
}

.img4{
    position: absolute;
    z-index: -1;
    width:300px;
  animation-name: img4;
  animation-duration: 70s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes img5 {
  0%   { left:600px; top:800px;}
  25%  { left:400px; top:700px;}
  50%  { left:350px; top:750px;}
  75%  { left:500px; top:850px;}
  100% { left:600px; top:800px;}
}

.img5{
    position: absolute;
    z-index: -1;
    width:200px;
  animation-name: img5;
  animation-duration: 80s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}
@keyframes img6 {
  0%   { left:0px; top:900px;}
  25%  { left:400px; top:950px;}
  50%  { left:400px; top:920px;}
  75%  { left:30px; top:800px;}
  100% { left:0px; top:900px;}
}

.img6{
    position: absolute;
    z-index: -1;
    width:400px;
  animation-name: img6;
  animation-duration: 50s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}
@keyframes img7 { /*/freakyfigure/*/
  0%   { left:400px; top:500px;}
  25%  { left:350px; top:500px;}
  50%  { left:300px; top:450px;}
  75%  { left:350px; top:400px;}
  100% { left:400px; top:500px;}
}

.img7{
    position: absolute;
    z-index: -1;
    width:400px;
  animation-name: img7;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}