/***** Browser Reset *****/

html, body, div, span, ul, li,
fieldset, form, label, legend, img {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/***** *****/

a {
text-decoration:none;
}

img {
border: none;
}

noscript {
text-align:center;
font-weight: bold;
margin: 10px;
padding: 10px;
}

html {
height: 100%;
}

body {
position: relative;
text-align: center;
font-family: Verdana, Tahoma, sans-serif;
height: 100%;
}

.hidden {
display: none !important;
}

/***** *****/

#zeitraffer {
display: inline-block;
margin: 10px auto 0 auto;
padding: 0;
position:relative;
vertical-align:top;
}

/***** *****/

#zeitraffer .bild, #zeitraffer #steuerung {
width:1024px;
}

#zeitraffer .bild, #auswahl_bild {
height: 768px;
}

#zeitraffer .bild {
top:0px;
left:0px;
}

#zeitraffer #bild1 {
position: relative;
}

#zeitraffer #bild2 {
position: absolute;
box-shadow: 0px 0px 4px #999;
}

#zeitraffer #bild_container {
position: relative;
display: inline-block;
}

#zeitraffer #auswahl_container {
display: inline-block;
}


/***** *****/
#zeitraffer #steuerung {
height: 30px;
font-size: 0.8em;
vertical-align: middle;
text-align: left;
padding: 4px 0 0 10px;
}

#zeitraffer #button {
display: inline-block;
}

#zeitraffer #button a {
display: inline-block;
width: 30px;
height: 22px;
margin: 0 2px 0 2px;
background: transparent url('pics/blank.png') no-repeat;
}

#zeitraffer #button a:hover {
box-shadow: 0px 0px 4px #999;
}

#zeitraffer a#modus_wahl {
width: auto;
text-decoration: underline;
color: blue;
}

#zeitraffer #button #play {
background-image: url('pics/abspielen.png');
}

#zeitraffer #button #play.pausiert {
background-image: url('pics/stop.png');
}

#zeitraffer #button #zurueck {
background-image: url('pics/zurueck.png');
}

#zeitraffer #button #weiter {
background-image: url('pics/weiter.png');
}

#zeitraffer #button #anfang {
background-image: url('pics/anfang.png');
}

#zeitraffer #button #ende {
background-image: url('pics/ende.png');
}

#zeitraffer #button #langsamer {
background-image: url('pics/langsamer.png');
}

#zeitraffer #button #schneller {
background-image: url('pics/schneller.png');
}

#zeitraffer #button #ueberblenden {
background-image: url('pics/ueberblenden_aus.png');
display: none;
}

#zeitraffer #button #ueberblenden.ueberblenden_aktiv {
background-image: url('pics/ueberblenden.png');
}

#zeitraffer #modus_normal, #zeitraffer  #modus_erweitert {
display: none;
}

#zeitraffer #modus_normal.aktiv,
#zeitraffer #modus_erweitert.aktiv {
display: inline-block;
}

#zeitraffer #steuerung #auswahl_zeit {
float: right;
margin: 4px 10px 0 0;
font-size: 0.8em;
}

#zeitraffer #steuerung #auswahl_zeit select {
font-size: 1em;
}


#zeitraffer #auswahl_bild {
position: relative;
top: -3px;
left: -1px;
width:80px;
font-size: 0.6em;
text-align: center;
}

#zeitraffer #info_text {
display: inline-block;
color: red;
text-align:right;
width: 80px;
position: absolute;
right: 15px;
margin: 7px 0px 0px 0px;
font-size: 0.8em;
}



/***** *****/


#zeitraffer #tipp {
position: absolute;
bottom: -20px;
font-size: 10px;
font-weight: bold;
color: #444;
font-style: italic;
text-align:center;
}


/***** *****/

#links, #rechts {
padding: 10px 5px;
display: inline-block;
min-height: 600px;
}

#rechts {
clear: both;
}



/***** Smartphones *****/
@media (max-width: 980px) {

	#zeitraffer {
		display: block;
		background: transparent;
		text-align: center;
	}

	.nomobile {
		display: none;
	}

	#links, #rechts {
		padding: 10px 5px;
		display: block;
		min-height: 0px;
	}

	#zeitraffer #bild_container {
		display: inline-block;
	}


	#zeitraffer .bild {
		width: 320px;
		height: auto;
	}

	#zeitraffer #auswahl_container {
		display: block;
	}
	
	#zeitraffer #auswahl_bild {
		height: auto;
		display: inline-block;
		top:0;
		left: 0;
		font-size: 1em;
		margin: 5px 0 5px 0;
	}
	
	#zeitraffer #steuerung {
		position: relative;
		display: inline-block;
		height: auto;
		width: auto;
		text-align:center;
		line-height: 3em;
	}

	#zeitraffer #info_text {
		display: block;
		top: -45px;
	}
	
	#zeitraffer #steuerung #button {
		display: block;
		margin: 5px 0 5px 0;
	}
	
	#zeitraffer #steuerung #auswahl_zeit {
		display: block;
		float: none;
		margin: 5px 0 10px 0;
	}
	
	#zeitraffer #tipp {
		position: relative;
		bottom: 0px;
	}

}