/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.controls { 
	position:relative;
	height:8px;
	margin:12px 0 0 43px;
	padding:5px 0 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: 18px;
	height:10px;
	text-indent:-999em;
	cursor:pointer;
	overflow:hidden;
	background:url(http://www.thierry-dreyfus.com/thierry-dreyfus/images/playpause.gif) center top no-repeat;
	margin-top: -14px;	
	left:0;
}

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

/* the track or "scrubber"  */
div.controls div.track { 
	position:absolute;
	top:-6px;	
	height:5px;
	left:20px;
	background:url(http://www.thierry-dreyfus.com/thierry-dreyfus/images/track_gris.gif) no-repeat;
	text-align:left;
	cursor:pointer;
	width:370px;	
}

/* the draggable playhead */
div.controls div.playhead { 
	position:absolute;	
	height:7px;
	background:url(http://www.thierry-dreyfus.com/thierry-dreyfus/images/playhead.png) no-repeat;
	cursor:pointer;
	top:-1px; 
	left:2px;
	width:5px;
}

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

div.controls div.buffer {
	background-color:transparent;
}

/* som proprietary styling for progress bar under mozilla */
div.controls div.progress {
	-moz-border-radius-bottomleft:2px;
	-moz-border-radius-topleft:2px;	
}

/* hide time and controls in Apple look */
div.controls div.time {
	display:none;		
}

div.controls a.mute
{
	position:absolute;	
	height:7px;
	background:url(http://www.thierry-dreyfus.com/thierry-dreyfus/images/sound.gif) no-repeat;
	cursor:pointer;
	top:-7px; 
	left:397px;
	width:5px;
	color:#000;
	padding-top:5px;	
}

div.controls a.unmute
{
	position:absolute;	
	height:7px;
	background:url(http://www.thierry-dreyfus.com/thierry-dreyfus/images/sound_off.jpg) no-repeat;
	cursor:pointer;
	top:-7px; 
	left:397px;
	width:5px;
	color:#000;	
	padding-top:5px;
}