493 lines
9.7 KiB
CSS
493 lines
9.7 KiB
CSS
/* Empty. Add your own CSS if you like
|
|
.scroll-content{
|
|
background: url("../img/background.svg") no-repeat center center fixed;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
background-size: cover;
|
|
|
|
}
|
|
*/
|
|
|
|
.scroll-content {
|
|
background: url("../img/Background/background.svg");
|
|
background-size: cover;
|
|
color: #333;
|
|
font: 100% Arial, Sans Serif;
|
|
height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/*
|
|
.scroll-content {
|
|
background: url("../img/background.svg");
|
|
-webkit-animation: backgroundScroll 50s linear infinite;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
background-size: cover;
|
|
animation: backgroundScroll 50s linear infinite;
|
|
}
|
|
|
|
@-webkit-keyframes backgroundScroll {
|
|
from {background-position: 0 0;}
|
|
to {background-position: -2000px 0;}
|
|
}
|
|
*/
|
|
.baumhaus {
|
|
background: url("../img/Background/treehouse.svg");
|
|
background-size: cover;
|
|
position:fixed;
|
|
bottom:0;
|
|
left:-25px;
|
|
width: 256px;
|
|
height: 256px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.farmhaus {
|
|
background: url("../img/Background/Farmhaus.svg");
|
|
background-size: cover;
|
|
position:fixed;
|
|
bottom:60px;
|
|
Right:10px;
|
|
width: 30px;
|
|
height: 40px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.windrad {
|
|
background: url("../img/Background/Windrad.svg");
|
|
background-size: cover;
|
|
position:fixed;
|
|
bottom:65px;
|
|
Right:60px;
|
|
width: 60px;
|
|
height: 80px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.kornspeicher {
|
|
background: url("../img/Background/Kornspeicher.svg");
|
|
background-size: cover;
|
|
position:fixed;
|
|
bottom:40px;
|
|
Left:275px;
|
|
width: 60px;
|
|
height: 80px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.suchspielbutton {
|
|
position: absolute;
|
|
bottom:15px;
|
|
left:370px;
|
|
width: 128px;
|
|
height: 128px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Tierbilder groessen */
|
|
.imagesizebig{
|
|
width:128px;
|
|
height:128px;
|
|
}
|
|
|
|
.imagesizemedium{
|
|
width:96px;
|
|
height:96px;
|
|
}
|
|
|
|
|
|
|
|
.gras {
|
|
background: url("../img/Background/Grasbuechel.svg");
|
|
background-size: cover;
|
|
position:absolute;
|
|
width: 16;
|
|
height: 16px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.statusbar{
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 64px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
|
|
.myborder{
|
|
display: inline-block;
|
|
border-radius: 6px;
|
|
color: black;
|
|
border-style: solid;
|
|
border-color: black;
|
|
border-width: 2px;
|
|
}
|
|
|
|
.neon {
|
|
font-family: sans-serif;
|
|
text-transform: uppercase;
|
|
font-size: 60px;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
letter-spacing: .1em;
|
|
color: white;
|
|
text-shadow: 0 0 5px white,
|
|
0 0 10px white,
|
|
0 0 20px yellow,
|
|
0 0 40px yellow,
|
|
0 0 60px yellow,
|
|
0 0 90px yellow,
|
|
0 0 120px yellow,
|
|
0 0 160px yellow;
|
|
}
|
|
|
|
|
|
.spieltimer {
|
|
font-family: sans-serif;
|
|
text-transform: uppercase;
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
letter-spacing: .1em;
|
|
color: white;
|
|
text-shadow: 0 0 5px white,
|
|
0 0 10px white,
|
|
0 0 20px yellow,
|
|
0 0 40px yellow,
|
|
0 0 60px yellow,
|
|
0 0 90px yellow,
|
|
0 0 120px yellow,
|
|
0 0 160px yellow;
|
|
}
|
|
|
|
|
|
.spieltimerdiv {
|
|
position: absolute;
|
|
bottom:0px;
|
|
left:0px;
|
|
width: 100%;
|
|
height: 50px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.punktestand {
|
|
position: absolute;
|
|
bottom:-15px;
|
|
right:0px;
|
|
width: 100%;
|
|
height: 50px;
|
|
font-family: sans-serif;
|
|
text-transform: uppercase;
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
letter-spacing: .1em;
|
|
color:white;
|
|
text-align: right;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.redborder{
|
|
display: inline-block;
|
|
border-radius: 6px;
|
|
color: black;
|
|
border-style: solid;
|
|
border-color: red;
|
|
border-width: 2px;
|
|
}
|
|
|
|
|
|
.mentorhilfe {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 64px;
|
|
height: 64px;
|
|
overflow: hidden;
|
|
background: url('../img/Mentor/mentorhelp_64px.png');
|
|
}
|
|
|
|
.mentorborder {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 64px;
|
|
height: 64px;
|
|
overflow: hidden;
|
|
background: url('../img/Mentor/mentorhelp_64px.png');
|
|
}
|
|
|
|
.mentor {
|
|
width: 64px;
|
|
height: 640px;
|
|
background: url('../img/Mentor/mentor_64px.png') left center;
|
|
-webkit-animation: mentorsprite 4s steps(10) infinite;
|
|
}
|
|
|
|
@-webkit-keyframes mentorsprite {
|
|
100% { background-position: 0 -640px; }
|
|
}
|
|
|
|
|
|
.baumhausaction {
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 110px;
|
|
width: 60px;
|
|
height: 60px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mentorborderbaumhaus {
|
|
position: absolute;
|
|
top: 122px;
|
|
left: 120px;
|
|
width: 32px;
|
|
height: 32px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mentorbaumhaus {
|
|
width: 32px;
|
|
height: 320px;
|
|
background: url('../img/Mentor/mentor_32px.png') left center;
|
|
-webkit-animation: mentorspritebaumhaus 3.8s steps(10) infinite;
|
|
}
|
|
|
|
@-webkit-keyframes mentorspritebaumhaus {
|
|
100% { background-position: 0 -320px; }
|
|
}
|
|
|
|
|
|
.mentorborderbravo {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 256px;
|
|
height: 256px;
|
|
margin-left: -128px;
|
|
margin-top: -128px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mentorbravo {
|
|
width: 256px;
|
|
height: 1024px;
|
|
background: url('../img/Mentor/mentor_bravo.png') left center;
|
|
-webkit-animation: mentorspritebravo 2.8s steps(4) infinite;
|
|
}
|
|
|
|
@-webkit-keyframes mentorspritebravo {
|
|
100% { background-position: 0 -1024px; }
|
|
}
|
|
|
|
|
|
.teddy {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 256px;
|
|
height: 256px;
|
|
margin-left: -128px;
|
|
margin-top: -128px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.teddybackground {
|
|
background: url('../img/Teddybear/Teddy_klein/Teddybackgound.png');
|
|
}
|
|
|
|
|
|
.teddyani1 {
|
|
width: 256px;
|
|
height: 1024px;
|
|
background: url('../img/Teddybear/Teddy_klein/Teddybear_ani1.png') left center;
|
|
-webkit-animation: teddyspriteani 1.4s steps(4) infinite;
|
|
}
|
|
|
|
.teddyani2 {
|
|
width: 256px;
|
|
height: 1024px;
|
|
background: url('../img/Teddybear/Teddy_klein/Teddybear_ani2.png') left center;
|
|
-webkit-animation: teddyspriteani 1.4s steps(4) infinite;
|
|
}
|
|
|
|
.teddyani3 {
|
|
width: 256px;
|
|
height: 1024px;
|
|
background: url('../img/Teddybear/Teddy_klein/Teddybear_ani3.png') left center;
|
|
-webkit-animation: teddyspriteani 1.4s steps(4) infinite;
|
|
}
|
|
|
|
.teddyani4 {
|
|
width: 256px;
|
|
height: 1024px;
|
|
background: url('../img/Teddybear/Teddy_klein/Teddybear_ani4.png') left center;
|
|
-webkit-animation: teddyspriteani 1.4s steps(4) infinite;
|
|
}
|
|
|
|
@-webkit-keyframes teddyspriteani {
|
|
100% { background-position: 0 -1024px; }
|
|
}
|
|
|
|
|
|
#background-wrap {
|
|
bottom: 0;
|
|
left: 0;
|
|
padding-top: 50px;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* KEYFRAMES */
|
|
/* Wolken */
|
|
@-webkit-keyframes animateCloud {
|
|
0% {
|
|
margin-left: -500px;
|
|
}
|
|
100% {
|
|
margin-left: 100%;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes animateCloud {
|
|
0% {
|
|
margin-left: -500px;
|
|
}
|
|
100% {
|
|
margin-left: 100%;
|
|
}
|
|
}
|
|
|
|
@keyframes animateCloud {
|
|
0% {
|
|
margin-left: -500px;
|
|
}
|
|
100% {
|
|
margin-left: 100%;
|
|
}
|
|
}
|
|
|
|
/* ANIMATIONS */
|
|
|
|
.x1 {
|
|
-webkit-animation: animateCloud 35s linear infinite;
|
|
-moz-animation: animateCloud 35s linear infinite;
|
|
animation: animateCloud 35s linear infinite;
|
|
|
|
-webkit-transform: scale(0.65);
|
|
-moz-transform: scale(0.65);
|
|
transform: scale(0.65);
|
|
}
|
|
|
|
.x2 {
|
|
-webkit-animation: animateCloud 20s linear infinite;
|
|
-moz-animation: animateCloud 20s linear infinite;
|
|
animation: animateCloud 20s linear infinite;
|
|
|
|
-webkit-transform: scale(0.3);
|
|
-moz-transform: scale(0.3);
|
|
transform: scale(0.3);
|
|
}
|
|
.x3 {
|
|
-webkit-animation: animateCloud 30s linear infinite;
|
|
-moz-animation: animateCloud 30s linear infinite;
|
|
animation: animateCloud 30s linear infinite;
|
|
|
|
-webkit-transform: scale(0.5);
|
|
-moz-transform: scale(0.5);
|
|
transform: scale(0.5);
|
|
}
|
|
|
|
/*
|
|
.x4 {
|
|
-webkit-animation: animateCloud 18s linear infinite;
|
|
-moz-animation: animateCloud 18s linear infinite;
|
|
animation: animateCloud 18s linear infinite;
|
|
|
|
-webkit-transform: scale(0.4);
|
|
-moz-transform: scale(0.4);
|
|
transform: scale(0.4);
|
|
}
|
|
|
|
.x5 {
|
|
-webkit-animation: animateCloud 25s linear infinite;
|
|
-moz-animation: animateCloud 25s linear infinite;
|
|
animation: animateCloud 25s linear infinite;
|
|
|
|
-webkit-transform: scale(0.55);
|
|
-moz-transform: scale(0.55);
|
|
transform: scale(0.55);
|
|
}
|
|
*/
|
|
/* OBJECTS */
|
|
|
|
.ufo {
|
|
background: url('../img/ufo.png');
|
|
position: relative;
|
|
height: 64px;
|
|
position: relative;
|
|
width: 64px;
|
|
}
|
|
|
|
|
|
.cloud {
|
|
background: #fff;
|
|
background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#fff), color-stop(100%,#f1f1f1));
|
|
background: -webkit-linear-gradient(top, #fff 5%,#f1f1f1 100%);
|
|
background: -o-linear-gradient(top, #fff 5%,#f1f1f1 100%);
|
|
background: -ms-linear-gradient(top, #fff 5%,#f1f1f1 100%);
|
|
background: linear-gradient(top, #fff 5%,#f1f1f1 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );
|
|
|
|
-webkit-border-radius: 100px;
|
|
-moz-border-radius: 100px;
|
|
border-radius: 100px;
|
|
|
|
-webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
|
|
-moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
|
|
|
|
height: 120px;
|
|
position: relative;
|
|
width: 350px;
|
|
}
|
|
|
|
.cloud:after, .cloud:before {
|
|
background: #fff;
|
|
content: '';
|
|
position: absolute;
|
|
z-indeX: -1;
|
|
}
|
|
|
|
.cloud:after {
|
|
-webkit-border-radius: 100px;
|
|
-moz-border-radius: 100px;
|
|
border-radius: 100px;
|
|
|
|
height: 100px;
|
|
left: 50px;
|
|
top: -50px;
|
|
width: 100px;
|
|
}
|
|
|
|
.cloud:before {
|
|
-webkit-border-radius: 200px;
|
|
-moz-border-radius: 200px;
|
|
border-radius: 200px;
|
|
|
|
width: 180px;
|
|
height: 180px;
|
|
right: 50px;
|
|
top: -90px;
|
|
} |