audio {
	clear:both;
	display:block;
	padding-top: 15px;
	padding-bottom: 15px;
	}

input:focus, input:hover, input:active { 
		border-color: #ffff00 !important; /* yellow */
	}


#controls { 
		position: relative;
		border: 2px solid #4c4c4c; 
		background-color: #666666; 
		width: 320px; /*464px; */
		height: 25px;
		line-height: 25px;
		margin-top: 10px;
}

input { 
		border: 2px solid #666666; /* masked against background until input has focus*/
		position: absolute;
		background-position: center center;
		background-repeat: no-repeat;
}

input#playpause {
		top: 0px;
		left: 0px;
		width: 25px;
		height: 25px;
		background-color: transparent;
		background-image: url('bilder/audio/play.png');
		color: transparent;
		border-right-color: #848484; 
}

#seekBar { 
		top: 0px;
		left: 40px;
		width: 120px;
		height: 22px;
}

input#seekBack {
		top: 0px;
		left: 30px;
		width: 25px;
		height: 25px;
		background-color: transparent;
		background-image: url('bilder/audio/rewind.png');
		color: transparent;
}

input#seekForward {
		top: 0px;
		left: 60px;
		width: 25px;
		height: 25px;
		background-color: transparent;
		background-image: url('bilder/audio/foreward.png');
		color: transparent;
}

span#timer { /* contains both span#currentTime and span#duration */
		position: absolute;
		left: 170px;
		width: 100px;
		color: #ffffff;
}

input#muteButton { 
		left: 240px; 
		top: 0px;
		width: 25px;
		height: 25px;
		background-color: transparent;
		background-image: url('bilder/audio/volume.png');
		color: transparent;
		border-left-color: #848484; 
}

input#volumeControl {
		/* not used, but here for future reference */
		display: none;
		left: 380px;
		top: -105px;
		height: 100px;
		width: 30px;
		background-color: #666666;
		border: 2px solid #4c4c4c;
		color: #ffffff;
}

input#volumeUp { 
		top: 0px;
		left: 270px;
		width: 25px;
		height: 25px;
		background-color: transparent;
		background-image: url('bilder/audio/volume_up.png');
		color: transparent;
}

input#volumeDown { 
		top: 0px;
		left: 295px;
		width: 25px;
		height: 25px;
		background-color: transparent;
		background-image: url('bilder/audio/volume_down.png');
		color: transparent;
}

.offscreen { 
		position:absolute;
		left:-10000px;
		top:auto;
		width:1px;
		height:1px;
		overflow:hidden;
}


@media screen and ( max-width: 480px) {
		#controls {
				width: 250px;
		}
		#seekBar {
			width: 110px;
			height: 20px;
			background-color: transparent;
		}
		span#timer { /* contains both span#currentTime and span#duration */
			left: 160px;
			width: 88px;
		}
		input#muteButton {
				display: none;
		}
		input#volumeUp { 
				display: none;
		}
		input#volumeDown { 
				display: none;
		}

@media speech {
		span#currentTime {
			volume: silent;
		}
}

@media aural {
		span#currentTime {
			volume:silent;
		}
}

}