/* root element should be positioned relatively so that child elements can be positioned absolutely */
div.controls {
	background-color: #000000;
	height: 20px;
	position: relative;
	width: 100%;
}
/* play/pause button */
div.controls a.play, div.controls a.pause {
	background: url(buttons.min.png) no-repeat 2px -46px;
	cursor: pointer;
	display: block;
	height: 20px;
	position: absolute;
	text-indent: -9999em;
	width: 25px;
}
div.controls a.play:hover {
	background-position: 2px -76px;
}
/* pause state */
div.controls a.pause {
	background-position: 2px -106px;
}
div.controls a.pause:hover {
	background-position: 2px -136px;
}
/* the timeline (or "scrubber") */
div.controls div.track {
	cursor: pointer;
	height: 6px;
	top: 7px;
	left: 25px;
	position: absolute;
	right: 90px;
}
/* the draggable playhead */
div.controls div.playhead {
	background-color: #f8cf49;
	border: 1px solid #ffffff;
	margin-top: -1px;
	cursor: pointer;
	height: 6px;
	position: absolute;
	width: 3px;
}
/* buffer and progress bars. upon runtime the width of these elements grows */
div.controls div.progress, div.controls div.buffer {
	background-color: #f8cf49;
	height: 6px;
	position: absolute;
	width: 0;
	opacity: 0.3;
	filter: alpha(opacity=30);
}
div.controls div.buffer {
	background-color: #ffffff;
}
/* time display */
div.controls div.time {
	color: #ffffff;
	font: normal 10px futura, "Lucida Grande", "bitstream vera sans", "Trebuchet MS", Verdana, Arial;
	padding: 2px 0;
	position: absolute;
	right: 20px;
	text-align: center;
	width: 70px;
}
/* total duration in time display */
div.controls div.time strong {
	color: #666666;
	font-weight: normal;
}
/* mute/unmute buttons */
div.controls a.mute, div.controls a.unmute {
	background: url(buttons.min.png) no-repeat 0 -226px;
	cursor: pointer;
	height: 20px;
	position: absolute;
	padding-right: 5px;
	right: 0;
	text-indent: -9999em;
	width: 20px;
}
div.controls a.mute:hover {
	background-position: 0 -256px;
}
/* unmute state */
div.controls a.unmute {
	background-position: 0 -165px;
}
div.controls a.unmute:hover {
	background-position: 0 -195px;
}
