/* die Zeitsteuerung muß an drei Stellen gleichzeitig angepaßt werden. 
Suche mit "animation:" */

/* Achtung! 'body' muß irgendwo definiert gesetzt sein, Inhalt egal. */


figure { 
	display: inline-block; 
}


#diashow {
	position: relative;
	float: left; 			/* läßt weitere Elemente rechts fließen */
	
	/* Breite und Höhe der Dias - muß an drei Stellen angepaßt werden! */
	width: 646px;			
 	height: 310px;
	border: 1px solid #ddd;  /* schwarzer Rand unter Bild */
	margin: 130px 30px 40px 30px;


/* Rand wie Laborabzug */  
/* Mozilla und IE stellen den dunklen Rand dar, wenn iCab es nicht tut */
	background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	

/* diese Optionen lassen die Diaschau schweben */
	-webkit-border-radius: 2px 2px 2px 2px;
	-moz-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;
	
	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}


#diashow .container {
	position:relative;
	width: 646px;
	height: 310px;
	overflow: hidden;  /* verbirgt Dias, die gerade nicht gezeigt werden */
}

/* Sliderfläche */
#diashow .container:after {
	position:absolute;
	bottom: 0; left:0;
	content: " ";
	background: #999;
	width: 100%;
	height: 1px;
}


/* Slider-Bewegung */
@-webkit-keyframes slider {
	0%, 20%, 100%	{ left: 0 }
	25%, 45%		{ left: -100% }
	50%, 70%		{ left: -200% }
	75%, 95%		{ left: -300% }
}
@-moz-keyframes slider {
	0%, 20%, 100%	{ left: 0 }
	25%, 45%		{ left: -100% }
	50%, 70%		{ left: -200% }
	75%, 95%		{ left: -300% }
}
@keyframes slider {
	0%, 20%, 100%	{ left: 0 }
	25%, 45%		{ left: -100% }
	50%, 70%		{ left: -200% }
	75%, 95%		{ left: -300% }
}


#diashow .slider {
	position: absolute;
	left:0; top:0;
	
	/* Breite des Sliders - je Bild 100% mehr*/
	width: 600%; 					/* Original 400% für vier Bilder */
	height: 310px; 					/* Original: 310px */
	
	/* Wechselzeit, Summe aller Standzeiten */
	/* Original: 32s */
	-webkit-animation: slider 40s infinite;
	-moz-animation: slider 40s infinite;
	animation: slider 40s infinite;
}



/* == Einblendleiste mit Beschriftung ====================== */

#diashow figure {
	position:relative;
	padding:0; margin:0;
}



/* Auf und Ab der Beschriftungsleiste */
#diashow figure:after {
	position: absolute;
	display:block;
	content: " ";
	top:0; left:0;
	width: 100%; height: 100%;
	
	-webkit-animation: figurer 40s infinite;
	-moz-animation: figurer 40s infinite;
	animation: figurer 40s infinite;
}

/* bewegt die Beschriftungsleiste auf und ab */
@-webkit-keyframes figcaptionner {
	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
}
@-moz-keyframes figcaptionner {
	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
}
@keyframes figcaptionner {
	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
}


/* Beschriftungsleiste (Position, Text, Gesamtdauer) */

#diashow figcaption { 
	position:absolute;
	padding: 16px 16px; margin:0;  /* Abmessungen der Beschriftungsleiste */
	left:0; right:0; bottom: 5px;
	text-align: left; /* Original: center */
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Verdana, Arial, sans-serif;
	background: #000;
	background: rgba(255,255,255,0.7);
	border-top: 1px solid rgb(225,225,225);
	color: #555;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
	
	-webkit-animation: figcaptionner 40s infinite;
	-moz-animation: figcaptionner 40s infinite;
	animation: figcaptionner 40s infinite;
}