/* Globae Einstellungen */
* {
 margin:0;
 padding:0;
 list-style:none;
 border:none;
 outline:none;
}

body {
	margin: 0;
 	height:1400px;
 	width:100%; 
	text-align: center;
/*	background-color:#aad;	*/
	background-image:url('../images/seitenhintergrund.jpg');
	background-attachment: fixed
	 }
	
#seite {
	text-align:center;
/*	margin:0 auto; */
	width: 1200px;
	height: auto;
	margin-top: 20px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	border: 5px solid #D7C7A2; 
	 }
	 
#kopfzeile {
	margin-top:0px; 
	height:150px;
	background-color:#ffffcc;
/*	border-bottom: 5px solid red; */
/*	opacity: 0.55;	*/
	 }
	 
#laufschrift {
	background-color:#ffffcc;
		font-size:24px;
		line-height:26px;
	}

/* Galerie Container */
#gal {
 margin:0px auto;
 position:relative; 
 width:1200px;  /* Gesamtbreite = dt(img(400px) + dd(200px )  */
 height:350px;
 border-top:5px solid #D7C7A2;
 border-bottom:5px solid #D7C7A2; 
 background:#333 url('fotos/css_slid_b1.jpg') no-repeat 0 0;
 overflow:hidden;
 box-shadow:0px 0px 1px #000
}

#gal dl {
 width:8400px; /* Gesamtbreite = 7 x 1000px (siehe #gal width) */
 position:relative;
 -webkit-animation: slider 25s infinite ;
 -o-animation: slider 25s infinite;
 -moz-animation: slider 25s infinite;
 -ms-animation: slider 25s infinite;
 animation: slider 25s infinite;
}

#gal br {
 display:none;
}

#gal dt  {
 position:relative;
 display:block;
 float:left;
}

#gal dd {
 padding:10px;
 float:left;
 width:180px;
 height:330px;
 background:#ffffcc;
 color:maroon;
}


/* Bildbreite 400px */
#gal img {
 width: 1000px;
 float:left;
}

/* Animation für Slider, wobei 5% für die Übergänge und ca 15% für Wartezeit */

@-webkit-keyframes slider {
 0% { left:0;opacity:0 }  /* Erstes Bild einblenden */
 5%, 15%, 100%	{ left: 0px;opacity:1; }
 20%, 30% { left: -1200px;opacity:1; }
 35%, 45% { left: -2400px;opacity:1; }
 50%, 60% { left: -3600px;opacity:1; }
 65%, 70% { left: -4800px;opacity:1 }
 75%, 85% { left: -6000px;opacity:1 }
 90%, 97% { left: -7200px;opacity:1 }
 98%, 100% { left: -7200px ;opacity:0; } /* letztes Bild ausblenden */
}

@-o-keyframes slider {
 0% { left:0;opacity:0 }  /* Erstes Bild einblenden */
 5%, 15%, 100%	{ left: 0px;opacity:1; }
 20%, 30% { left: -1200px;opacity:1; }
 35%, 45% { left: -2400px;opacity:1; }
 50%, 60% { left: -3600px;opacity:1; }
 65%, 70% { left: -4800px;opacity:1 }
 75%, 85% { left: -6000px;opacity:1 }
 90%, 97% { left: -7200px;opacity:1 }
 98%, 100% { left: -7200px ;opacity:0; } /* letztes Bild ausblenden */
}

@-moz-keyframes slider {
 0% { left:0;opacity:0 }  /* Erstes Bild einblenden */
 5%, 15%, 100%	{ left: 0px;opacity:1; }
 20%, 30% { left: -1200px;opacity:1; }
 35%, 45% { left: -2400px;opacity:1; }
 50%, 60% { left: -3600px;opacity:1; }
 65%, 70% { left: -4800px;opacity:1 }
 75%, 85% { left: -6000px;opacity:1 }
 90%, 97% { left: -7200px;opacity:1 }
 98%, 100% { left: -7200px ;opacity:0; } /* letztes Bild ausblenden */
}

@-ms-keyframes slider {
 5%, 15%, 100%	{ left: 0px;opacity:1; }
 20%, 30% { left: -1200px;opacity:1; }
 35%, 45% { left: -2400px;opacity:1; }
 50%, 60% { left: -3600px;opacity:1; }
 65%, 70% { left: -4800px;opacity:1 }
 75%, 85% { left: -6000px;opacity:1 }
 90%, 97% { left: -7200px;opacity:1 }
 98%, 100% { left: -7200px ;opacity:0; } /* letztes Bild ausblenden */
}

@keyframes slider {
 5%, 15%, 100%	{ left: 0px;opacity:1; }
 20%, 30% { left: -1200px;opacity:1; }
 35%, 45% { left: -2400px;opacity:1; }
 50%, 60% { left: -3600px;opacity:1; }
 65%, 70% { left: -4800px;opacity:1 }
 75%, 85% { left: -6000px;opacity:1 }
 90%, 97% { left: -7200px;opacity:1 }
 98%, 100% { left: -7200px ;opacity:0; } /* letztes Bild ausblenden */
}

#gal #navis {
 position:absolute;
 top:10px;
 left:10px;
 width:20px;
 height:20px;
 z-index:99;
}

#gal #navis li {
 position:relative;
}
#gal #navis a {
 padding:10px;
 position:absolute;
 display:none;
 color:#000;
 text-decoration: none;
 font-weight: bold;
}

#gal #navis #s:before {
 content:"";
 border-left:20px none #fff; border-right:20px none transparent; border-top:20px right transparent; border-bottom:20px right transparent; position:absolute;
 width:0;
 height:0;
 opacity:.4
}

#gal #navis #p:before {
 content:"";
 position:absolute;
 width:10px;
 height:40px;
 border-left:10px solid #fff;
 border-right:10px solid #fff;
 opacity:.4;
}

#gal #start:target ~ dl {
 -o-animation-play-state: running; 
 -webkit-animation-play-state: running; 
 -moz-animation-play-state: running; 
 -ms-animation-play-state: running; 
 animation-play-state: running; 
}

#gal #pause:target ~ dl {
 -o-animation-play-state: paused;
 -webkit-animation-play-state: paused;
 -moz-animation-play-state: paused;
 -ms-animation-play-state: paused;
 animation-play-state: paused;
}
#gal #pause:target ~ #navis #p { display:none;  }
#gal #pause:target ~ #navis #s { display:block; }

#gal #start:target ~ #navis #s { display:none;  }

#gal:hover #navis #p  { display:block;}



	 
#navigation {
	float:left;
	width:200px;
	height: 650px;
	background-color:#ffffcc;
	border-right: 5px solid #D7C7A2; 
/*	opacity: 0.55; */
	 }
	 
#inhalt {
	margin-left:200px;
	margin-top:0px; 
	width:1000px;
	height: 650px;
	background-color:gray;
/*	opacity: 0.55; */
	 }