/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.controls { 
	position:relative;
	height:9px;
	margin:12px 0 0;
	padding:0;
	width: 394px;
	top: 0px;
	left: 0px;
}

/* when play button toggles between play/pause class 
	we move it's background image */
div.controls div.play, div.controls div.pause { 
/*
	position:relative;
	width: 18px;
	height:8px;
	text-indent:-999em;
	cursor:pointer;
	overflow:hidden;
	background:url(/img/controls/play_pause.gif) center top no-repeat;
	margin-top: -11px;
*/
display: none;
}

div.controls div.pause { 
	background-position:center -10px;
	background: #999999;
}

/* the track or "scrubber"  */
div.controls div.track { 
	position:absolute;
	top:0px;	
	height:9px;
	left:0px;
	text-align:left;
	cursor:pointer;
	width:394px;	
}

/* the draggable playhead */
div.controls div.playhead { 
	position:relative;	
	height:9px;
	background:#999999;
	cursor:pointer;
	top:0px; 
	width:3px;
	left:0px;
}

/* buffer and controls are automatically resized, their initial width should be 0 */
div.controls div.progress, div.controls div.buffer {	
	background-color:#fff;
	height:9px;
/* 	margin:3px 4px; */
	width:0px;
	position:absolute;
	top:0;
	font-size:0px;	
	/* this is the way to fine tune buffer and progress max width */
	max-width:394px;

}

div.controls div.buffer {
	background-color:#eaeaea;
	
}

/* som proprietary styling for progress bar under mozilla */
div.controls div.progress {
	background-color:#ccc;
	margin-left: -2px;
	
}

span.ctrls a {
	height: 9px;
	display:inline-block;
	text-align:center;
	background:#999;
	padding: 0;
	margin: 0;
	float: left;
}

span, a, img {
	border: none;
	padding: 0;
	margin: 0;
}