/* CSS Document */

/* Galerie Container */
#gal {
 margin:5px auto;
 position:relative; 
 width:180px;  /* Gesamtbreite = dt(img(400px) + dd(200px )  */
 height:150px;
// border:10px solid #fff;
 background: url('') no-repeat 0 0 #fff;
// box-shadow:0px 0px 1px #000;
}

#gal dl {
 width:150px; /* Gesamtbreite = 5 x 600px (siehe #gal width) */
 height:150px;
 

}

#gal br {
 display:none;
}

#gal dt  {
 position:absolute;
 top:0;
 left:0;
 display:block;
 opacity:0;
 -webkit-animation: fade 25s infinite;
 -moz-animation: fade 25s infinite;
 -ms-animation: fade 25s infinite;
 -o-animation: fade 25s infinite;
 animation: fade 25s infinite;
}

#gal dd {
	position:absolute;
	top:131px;
	right:0;
	padding:10px;
	width:254px;
	height:20px;
	background:#333;
	color:#FF0000;
	opacity:0;
 -webkit-animation: fade 25s infinite;
 -moz-animation: fade 25s infinite;
 -ms-animation: fade 25s infinite;
 -o-animation: fade 25s infinite;
	animation: fade 25s infinite;
	left: 3px;
	background-color: #fff;
}


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

}


@keyframes fade {
  0% , 30% , 100% { opacity:0; }
 10% , 20%        { opacity:1; } 
}


#gal #dt_2, #gal #dd_2 { animation-delay:5s;}
#gal #dt_3, #gal #dd_3 { animation-delay:10s;}
#gal #dt_4, #gal #dd_4 { animation-delay:15s;}
#gal #dt_5, #gal #dd_5 { animation-delay:20s;}
//#gal #dt_6, #gal #dd_6 { animation-delay:25s;}

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

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

#gal #navi #s:before {
 content:"";
 position:absolute;
 width:0;
 height:0;
 border:20px solid transparent;
 border-style:right:none;
 border-left-color: #fff;
 opacity:.6;
}

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

#gal #start:target ~ dl dt , #gal #start:target ~ dl dd {
 -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 dt , #gal #pause:target ~ dl dd  {
 -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 ~ #navi #p { display:none;  }
#gal #pause:target ~ #navi #s { display:block; }
#gal #start:target ~ #navi #s { display:none;  }
#gal:hover #navi #p  { display:block;}