* { 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; }