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.

366 lines
6.6 KiB
CSS

2 years ago
* {
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: #BDBECC;
font:normal normal 22px/1.4 Helvetica,sans-serif;
color:#A790BC;
}
a {
color:#FF5D01; /*/color of name at a posted message/*/
text-decoration:none;
font-family: "Times New Roman", Times, serif;
}
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:#FFD7B1 ;
border-radius: 10px;
border-color:#FFD7B1 ;
}
textarea:message{
height:500px;
}
input {display:block}
textarea {
height:5em;
display:block;
resize:vertical;
line-height:inherit;
}
::placeholder{
color:#11e100;
font-size: 16px;
font-size: 4vw;
font-family: "Times New Roman", Times, serif;
}
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: "Times New Roman", Times, serif;
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: "Times New Roman", Times, 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;
color:#CF00FF;
margin-top:4px;
padding:4px 6px;
background-color: none;
border-bottom:10px dotted #C3FF6D;
font-size:40px;
font-family: "Times New Roman", Times, serif;
}
.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;
display:inline-block;
margin:auto;
color:#FF7400;
padding-top:5%;
padding-left:10%;
padding-right:10%;
position: relative;
z-index: 2;
font-family: "Times New Roman", Times, serif;
font-size: 4vw;
}
#toppy{
width:100%;
height:10%;
display:block;
margin:auto;
text-align:center;
color:#FFD7B1;
/*/ padding-top:10px;
padding-bottom:15px;/*/
position: relative;
z-index: 2;
font-family: "Times New Roman", Times, serif;
font-size: 7vw;
text-shadow: -1px -1px 0 #A790BC, 1px -1px 0 #A790BC, -1px 1px 0 #A790BC, 1px 1px 0 #A790BC;
}
.img{
font-size: 30px;
}
@keyframes img1 {
0% { left:100px; top:0px;}
100% { left:100px; top:1300px;}
}
.img1{
position: absolute;
z-index: -1;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
animation-name: img11;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}