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.
373 lines
6.5 KiB
CSS
373 lines
6.5 KiB
CSS
@font-face {
|
|
font-family: "sans";
|
|
src: url("sans.ttf");
|
|
}
|
|
|
|
* {
|
|
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: white ;
|
|
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: sans;
|
|
}
|
|
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: sans;
|
|
}
|
|
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: sans;
|
|
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: sans;
|
|
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: sans;
|
|
}
|
|
.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: sans;
|
|
font-size: 4vw;
|
|
}
|
|
#toppy{
|
|
width:100%;
|
|
height:10%;
|
|
display:block;
|
|
margin:auto;
|
|
text-align:center;
|
|
background-color:#FFF;
|
|
color:#FFD7B1;
|
|
/*/ padding-top:10px;
|
|
padding-bottom:15px;/*/
|
|
position: relative;
|
|
z-index: 2;
|
|
font-family: sans;
|
|
font-size: 7vw;
|
|
text-shadow: -1px -1px 0 #A790BC, 1px -1px 0 #A790BC, -1px 1px 0 #A790BC, 1px 1px 0 #A790BC;
|
|
}
|
|
|
|
|
|
.img{
|
|
color:yellow;
|
|
font-size: 90px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@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;
|
|
} |