/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.controlbar {
	position:relative;
	height:55px;
	width:555px;
	top:2px;
}

/* play/pause button */
div.controlbar a.play { 
	position:absolute;
	width: 50px;
	height: 47px;
	display:block;
	text-indent:-9999em;
	background:url(/images/player/play.jpg) no-repeat top center;
	cursor:pointer;
}
div.controlbar a.pause { 
	position:absolute;
	width: 50px;
	height: 47px;
	display:block;
	text-indent:-9999em;
	background:url(/images/player/pause.jpg) no-repeat top center;
	cursor:pointer;
}
/*div.controlbar a.play:hover {
	background-position:10px -105px;	
}

div.controlbar a.pause { 
	background-position:11px -148px;
}

div.controlbar a.pause:hover {
	background-position:11px -192px;	
}*/

/* the timeline (or "scrubber")  */
div.controlbar div.track {  
	left:55px;
	top:16px;
	position:absolute;
	cursor:pointer;
	width:275px;
	height:10px;
	_height:15px;
	border:1px solid #d3cbbe;
	background-color:#d6d8d7;	
}

/* the draggable playhead */
div.controlbar div.playhead {
	position:absolute;
	cursor:pointer; 
	/*filter: alpha(opacity=30);	*/
	width:10px;
	height:20px;
	background:url(/images/player/playhead.jpg) no-repeat bottom left;
	_top:5px;
}

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

div.controlbar div.buffer {
	background-color:grey;
}

/* time display */
div.controlbar div.time {
	position:absolute;
	width:80px;
	left:340px;
	top:2px;
	padding:12px 0;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;	
	font-size:12px;
	font-weight:bold;
	color:#303c4c; 
}

/* total duration in time display */
div.controlbar div.time strong {
	font-weight:bold;
	color:#061019;
}

/* mute / unmute buttons */
div.controlbar a.mute {
	display:block;
	position:absolute;
	left:430px;
	width:50px;
	height:47px;
	text-align:center;
	cursor:pointer;
	text-indent:-9999em;
	background:url(/images/player/mute.jpg) no-repeat top center;
}

div.controlbar a.unmute {
	display:block;
	position:absolute;
	left:430px;
	width:50px;
	height:47px;
	text-align:center;
	cursor:pointer;
	text-indent:-9999em;
	background:url(/images/player/unmute.jpg) no-repeat top center;
}

/*div.controlbar a.mute:hover {
	background-position:5px -367px;	
}

div.controlbar a.unmute {
	background-position:5px -235px;	
}

div.controlbar a.unmute:hover {
	background-position:5px -279px;	
}*/