SI14/archive/hotspots/3/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:#EAFFEE;
  font:normal normal 22px/1.4 Helvetica,sans-serif;
  color:#A790BC;

}
a {
  color:#FF5D01; /*/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;
  width:80%;
  text-align:left;
  margin:0 0 20px;
  padding:4px;
  font:inherit;
  line-height:1;
  background-color:#C3FF6D;
    border-radius: 10px;
    border-color:#C3FF6D;
}

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

}
::placeholder{
color:#11e100;
 font-size: 15px;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}
button {
  width:auto;
  padding:5px 8px;
  background-color:#E9F1DD;
  border-color:#C3FF6D;
  color:#A790BC;
  font-weight:bold;
    font-size:30px;
  cursor:pointer;
  float:right;
font-family: Papyrus,fantasy; 
font-size:22px;
}
input:focus,
textarea:focus {color:#333}
button:focus,
button:hover {
  background-color:#C3FF6D;
    color:#FFF;
}

.guestbook {
  width:100%;
  padding-left:10%;
padding-right:10%;
  padding-top:10%;
  float: right;
  z-index: 2;   
}
.guestbook form label {
  display:block;
  float:left;
  width:150px;
  text-align:right;
  padding-top:3px;
   padding-right:10px;
    color:#E9F1DD; /*/color of "name" and "message"/*/
font-family: Arial, Helvetica, sans-serif;
font-size:35px;
text-shadow: -1px -1px 0 #A790BC, 1px -1px 0 #A790BC, -1px 1px 0 #A790BC, 1px 1px 0 #A790BC;
}
.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;
    color:#E9F1DD;
}
.guest-message {
  display:block;
  clear:both;
  margin-top:4px;
  padding:4px 6px;
  background-color: none;
   border-bottom:10px dotted #C3FF6D;
    font-size:40px;
    font-family: Papyrus,fantasy; 
}
.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;
}

#sectop{
width:100%;
height:20%;
text-align:justify;
float: right;
    background-color:#E9F1DD;
    color:#A790BC;
    padding-top:5%;
    padding-left:10%;
    padding-right:10%;
position: relative;
  z-index: 2;
font-family:Arial, Helvetica, sans-serif;
font-size: 2vw;
}
#toppy{
width:100%;
height:7%;
text-align:center;
    background-color:#FFF;
    color:#C3FF6D;
    padding-top:10px;
    padding-bottom:15px;
position: relative;
  z-index: 2;
font-family:Arial, Helvetica, sans-serif;
font-size: 6vw;
text-shadow: -1px -1px 0 #A790BC, 1px -1px 0 #A790BC, -1px 1px 0 #A790BC, 1px 1px 0 #A790BC;
}

@keyframes img1 {
  0%   { left:100px; top:0px;}
  100% { left:100px; top:1300px;}
}

.img1{
    position: absolute;
    z-index: -1;
    font-size:40px;
  animation-name: img1;
  animation-duration: 18s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}


@keyframes img2 {
  0%   { left:110px; top:0px;}
  100% { left:110px; top:1300px;}
}

.img2{
    position: absolute;
    z-index: -1;
    font-size:40px;
  animation-name: img2;
  animation-duration: 21s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}


@keyframes img3 {
  0%   { left:430px; top:0px;}
  100% { left:430px; top:1200px;}
}

.img3{
    position: absolute;
    z-index: -1;
    font-size:40px;
  animation-name: img3;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes img4 {
  0%   { left:750px; top:0px;}
  100% { left:750px; top:1120px;}
}

.img4{
    position: absolute;
    z-index: -1;
    font-size:40px;
  animation-name: img4;
  animation-duration: 35s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes img5 {
  0%   { left:330px; top:0px;}
  100% { left:330px; top:690px;}
}

.img5{
    position: absolute;
    z-index: -1;
       font-size:40px;
  animation-name: img5;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}
@keyframes img6 {
  0%   { left:1000px; top:0px;}
  100% { left:1000px; top:1222px;}
}

.img6{
    position: absolute;
    z-index: -1;
    font-size:40px;
  animation-name: img6;
  animation-duration: 50s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}
@keyframes img7 { /*/freakyfigure/*/
  0%   { left:960px; top:0px;}
  100% { left:960px; top:1140px;}
}

.img7{
    position: absolute;
    z-index: -1;
    font-size:40px;
  animation-name: img7;
  animation-duration: 24s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}
@keyframes img8 { /*/freakyfigure/*/
  0%   { left:800px; top:0px;}
  100% { left:800px; top:500px;}
}

.img8{
    position: absolute;
    z-index: -1;
    font-size:40px;
  animation-name: img8;
  animation-duration: 41s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}
@keyframes img9 { /*/freakyfigure/*/
  0%   { left:50px; top:0px;}
  100% { left:50px; top:900px;}
}

.img9{
    position: absolute;
    z-index: -1;
    font-size:40px;
  animation-name: img9;
  animation-duration: 44s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}
@keyframes img10 { /*/freakyfigure/*/
  0%   { left:400px; top:0px;}
  100% { left:400px; top:1000px;}
}

.img10{
    position: absolute;
    z-index: -1;
    font-size:40px;
  animation-name: img10;
  animation-duration: 23s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}
@keyframes img11 { /*/freakyfigure/*/
  0%   { left:300px; top:0px;}
  100% { left:300px; top:500px;}
}

.img11{
    position: absolute;
    z-index: -1;
    font-size:40px;
  animation-name: img11;
  animation-duration: 40s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}