/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.playerControls {
	position:relative;
	height:21px;
	margin:5px 0;
	width:426px;
}

/* play/pause button */
div.playerControls a.play, div.playerControls a.pause { 
	position:absolute;
	width: 46px;
	height: 21px;
	display:block;
	text-indent:-9999em;
	background:url(/img/player/play-btn.gif) no-repeat top left;
	cursor:pointer;
}

div.playerControls a.play:hover {
	background-position:left -25px;	
}

/* pause state */
div.playerControls a.pause { 
	background-position:left -50px ;
}

div.playerControls a.pause:hover {
	background-position:left -75px ;	
}

/* the timeline (or "scrubber")  */
div.playerControls div.track {  
	left:40px;
	position:absolute;
	cursor:pointer;
	width:295px;
	height:21px;	
  background:url(/img/player/track.gif) repeat-x top left;
}

/* the draggable playhead */
div.playerControls div.playhead {
	position:absolute;
	cursor:pointer; 
	background-color:black;
	opacity:0.3; 
	filter: alpha(opacity=30);	
	width:5px;
	height:21px;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.playerControls div.progress, div.playerControls div.buffer {	
	position:absolute;
	background-color:black;
	filter: alpha(opacity=10);
	opacity:0.1; 
	width:0px;
	height:21px;
}

div.playerControls div.buffer {
	background-color:green;
	opacity:0.1;
	filter: alpha(opacity=10); 
}

/* time display */
div.playerControls div.time {
	position:absolute;		
	width:100px;
	left:320px;
	padding:4px 0;
	text-align:right;
	font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;	
	font-size:12px;
	color:#666;
}

div.playerControls div.time {
	
}

/* total duration in time display */
div.playerControls div.time strong {
	font-weight:normal;
	color:#9BB4CD;
}

/* mute / unmute buttons */
div.playerControls a.mute, div.playerControls a.unmute {
	display:none;
	position:absolute;
	left:460px;
	width:40px;
	height:40px;
	text-align:center;
	padding:8px 0;
	cursor:pointer;
	text-indent:-9999em;
/*	background:url(/img/player/hulu.png) no-repeat 5px -323px; */
}

div.playerControls a.mute:hover {
	background-position:5px -367px;	
}

/* unmute state */
div.playerControls a.unmute {
	background-position:5px -235px;	
}

div.playerControls a.unmute:hover {
	background-position:5px -279px;	
}