/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.controls { 
	position:relative;
	height:28px;
}

div.controls:hover {
	opacity: 1.0;
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
}

/* when play button toggles between play/pause class 
	we move it's background image */
div.controls a.play, div.controls a.pause { 
	position:absolute;
	width: 28px;
	height:28px;
	text-indent:-999em;
	cursor:pointer;
	overflow:hidden;
	background:url(/images/controls/play_pause.gif) center top no-repeat;
	/* margin-top: -28px; */
	/* left:122px; */
	
	opacity: 0.5;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
}
div.controls a.play:hover, div.controls a.pause:hover { 
	opacity: 1;
	filter:alpha(opacity=100);
	-moz-opacity:1;
}

div.controls a.pause { 
	background-position:center -28px;
}

/* the track or "scrubber"  */
div.controls div.track { 
	display:none;
	/*
	position:absolute;
	top:9px;	
	left:9px;
	height:6px;
	padding:2px;
	background:url(/images/controls/track.gif) no-repeat;
	text-align:left;
	cursor:pointer;
	width:95px;
	
	opacity: 0.5;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	*/
}
/*
div.controls div.track:hover { 
	opacity: 1;
	filter:alpha(opacity=100);
	-moz-opacity:1;
}
*/

/* the draggable playhead */
/*
div.controls div.playhead { 
	position:absolute;
	height:8px;
	cursor:pointer;
	width:8px;
	top:1px;
}
*/

/* buffer and controls are automatically resized, their initial width should be 0 */
/*
div.controls div.progress, div.controls div.buffer {	
	background-color:#fff;
	height:6px;
	margin:0;
	width:0px;
	position:absolute;
	top:2px;
	font-size:0px;	
	max-width:95px;
}

div.controls div.buffer {
	background-color:#999;
}
*/

/* hide time and controls */
div.controls div.time, div.controls a.mute, div.controls a.unmute {
	display:none;		
}