You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
323 lines
6.0 KiB
CSS
323 lines
6.0 KiB
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;
|
|
} |