body 				{ font-family: arial; font-size: 10pt; margin: 0; text-align: justify;}
div#anim2			{ position: absolute; top:70px; width:100%; height:125px; background: url(gfx/tlo1.png) repeat-x;  }
div#main				{ position: relative; width:750px; height: 180px; margin: 10px auto 0 auto; }

a 					{ color: #666666; text-decoration: underline; }
a:hover 				{ color: #666666; text-decoration: none; }
.bottom a			{ color: #cdcdcd; text-decoration: none; }
.bottom a:hover 		{ color: #cdcdcd; text-decoration: underline; }
div.bottom 			{ font-family: verdana, arial; font-size: 10pt; color: #cdcdcd; }
li.up 				{ font-family: verdana, arial; font-size: 10pt; color: #000000;	padding-bottom: 3px; }
h4					{ font-size: 12pt; margin: 0 0 30px 0; text-align: left; text-decoration: underline; }
h5					{ font-size: 12pt; font-weight: bold;}
h6					{ font-size: 15pt; margin: 0 0 30px 0; text-align: left;

 text-decoration: underline;   color: blue;  letter-spacing:2px;	text-shadow: gray 4px 2px 2px; }
h7					{ font-size: 15pt; margin: 0 0 30px 0; text-align: left;

    color: red;  letter-spacing:1px;	text-shadow: black 2px 1px 1px; }

#ver img				{ cursor:pointer; }
.sred				{ font-size: 8pt; }
.forg td 				{ vertical-align: top; height: 20px; }
.x					{ display: none; }
#topmenu td 			{ font-size: 14pt; font-weight: bold; color: blue; text-align: center; border-right: 1px solid gray; position: relative; padding: 0 10px;}
#topmenu td.last		{ border-right: none; }
#topmenu td a			{ font: inherit; text-decoration: none; color: inherit; }
#topmenu td a:hover 	{ position: relative; top: -4px;  }

table#materials		{ border-collapse: collapse; border: 2px solid #000000; }
table#materials td	{ border: 1px solid #000000; padding: 2px 10px; }
table#materials td a    { color: #000000; font-style: arial; font-size: 12pt; font-weight: bold; text-align: left; text-decoration: none;}

#box       { position: relative; width:700px; height: 270px; border: 0px solid blue; padding: 0px 0px; z-index: 2}

#bild_b1   { position: relative; width:345px; height: 240px; border: 5px solid blue; padding: 0px 0px; z-index: 2}
#bild_b2   { position: absolute; top:0px; left:345px; width:340px; height: 240px; border: 5px solid blue; padding: 0px 0px; z-index: 2}



#bild_c1   { position: relative; width:345px; height: 240px; border: 5px solid blue; padding: 0px 0px; z-index: 2}
#bild_c2   { position: absolute; top:0px; left:345px; width:340px; height: 240px; border: 5px solid blue; padding: 0px 0px; z-index: 2}



#box1       { position: relative; width:700px; height: 430px; border: 0px solid blue; padding: 0px 0px; z-index: 2}

#bild_a1   { position: relative; width:345px; height: 200px; border: 5px solid blue; padding: 0px 0px; z-index: 2}
#bild_a2   { position: absolute; top:0px; left:345px; width:340px; height: 200px; border: 5px solid blue; padding: 0px 0px; z-index: 2}
#bild_a3   { position: absolute; top:200px; left:0px; width:345px; height: 200px; border: 5px solid blue; padding: 0px 0px; z-index: 2}
#bild_a4   { position: absolute; top:200px; left:345px; width:340px; height: 200px; border: 5px solid blue; padding: 0px 0px; z-index: 2}

#bild_1   { position: relative;  width:345px; height: 200px; border: 5px solid blue; padding: 0px 0px; z-index: 2}
#bild_2   { position: absolute; top:0px; left:345px; width:340px; height: 200px; border: 5px solid blue; padding: 0px 0px; z-index: 2}
#bild_3   { position: absolute; top:200px; left:0px; width:345px; height: 200px; border: 5px solid blue; padding: 0px 0px; z-index: 2}
#bild_4   { position: absolute; top:200px; left:345px; width:340px; height: 200px; border: 5px solid blue; padding: 0px 0px; z-index: 2}

#stage{
	position:absolute;
  top: 80px; left: 60px;  width: 610px; height:50px;
   border:0px solid red;
	overflow:hidden
}



/* position  */

#stage .position{
	position:absolute;
	top: 0; left: 0;
}



/* background images */


#stage .cast{
	width: 600px; height:40px;
	background-image: url('gfx/appar.gif');
	-webkit-transform: translate(5px, 5px);
	-moz-transform: translate(5px, 5px);
	-o-transform: translate(5px, 5px);
	transform: translate(5px, 5px);
}




/* animations */


#stage .clouds-ani{
	-webkit-animation: infinite-image 15s ease-out;
	-moz-animation: infinite-image 15s ease-out;
	-o-animation: infinite-image 15s ease-out;
	animation: infinite-image 15s ease-out;
}


#stage .meadow-ani{
	-webkit-animation: infinite-image1 15s ease-in alternate;
	-moz-animation: infinite-image1 15s ease-in alternate;
	-o-animation: infinite-image1 15s ease-in alternate;
	        animation: infinite-image1 15s ease-in alternate;
}


#stage .cast-ani {
	-webkit-animation: flyCast 8s ease-out;	
-moz-animation: flyCast 8s ease-out;	
-o-animation: flyCast 8s ease-out;	
	animation: flyCast 8s ease-out;
}



/* state helper */


.paused {
	-webkit-animation-play-state:paused;
	-o-animation-play-state:paused;
   	-moz-animation-play-state:paused;
  	animation-play-state: paused;
}


@-webkit-keyframes infinite-image {
	0% { left:100%;}
	70% { left:3%;}  100% { left: 3%;}
}

@-webkit-keyframes infinite-image1 {
	0% { left:100%;}
	70% { left:4%;}  100% { left: 4%;}
}
@-webkit-keyframes flyCast {
	0% {-webkit-transform: translate(600px, 5px)  scale(0.1) }	100% {-webkit-transform: translate(5px, 5px)  scale(1.0)}
}
@-moz-keyframes infinite-image {
	0% { left:100%;}
	70% { left:3%;}  100% { left: 3%;}
}
@-moz-keyframes infinite-image1 {
	0% { left:100%;}
	70% { left:4%;}  100% { left: 4%;}
}


@-moz-keyframes flyCast {
	0% {-moz-transform: translate(600px, 5px)  scale(0.1) }
	        100% {-moz-transform: translate(5px, 5px)  scale(1.0)}
}
@-o-keyframes infinite-image {
	0% { left:100%;}
	70% { left:3%;}  100% { left: 3%;}
}
@-o-keyframes infinite-image1 {
	0% { left:100%;}
	70% { left:4%;}  100% { left: 4%;}
}
@-o-keyframes flyCast {
	0% {-o-transform: translate(600px, 5px)  scale(0.1) }	                100% {-o-transform: translate(5px, 5px)  scale(1.0)}
}
@keyframes infinite-image {
	0% { left:100%;}
	70% { left:3%;}  100% { left: 3%;}
}

@keyframes infinite-image1 {
	0% { left:100%;}
	70% { left:4%;}  100% { left: 4%;}
}
@keyframes flyCast {
	0% {transform: translate(600px, 5px)  scale(0.1) }
                      100% {transform: translate(5px, 5px)  scale(1.0)}
}


