/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.ctrl_bar {
	position:relative;
	height:30px;
	background:#000 url(../layout/vid_player.png) repeat-x;
	width:720px;
}

/* play/pause button */
div.ctrl_bar a.play, div.ctrl_bar a.pause { 
	position:absolute;
	width: 40px;
	height: 30px;
	display:block;
	text-indent:-9999em;
	background:url(../layout/vid_buttons.png) no-repeat 0px -65px;
	cursor:pointer;
	border-left:1px solid #414E5C;
	border-right:1px solid #080A0C; 
}
div.ctrl_bar a.play:hover {
	background-position:0px -109px;
}

/* pause state */
div.ctrl_bar a.pause { 
	background-position:0px -152px;
}
div.ctrl_bar a.pause:hover {
	background-position:0px -196px;	
}

/* the timeline (or "scrubber")  */
div.ctrl_bar div.track {
	left:42px;
	position:absolute;
	cursor:pointer;
	width:506px;
	border-left:1px solid #414E5C;
	border-right:1px solid #080A0C; 
	height:30px;	
}

/* the draggable playhead */
div.ctrl_bar div.playhead {
	position:absolute;
	cursor:pointer; 
	background-color: white;
	width:2px;
	height:30px;
	border-right:1px solid #444;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.ctrl_bar div.progress, div.ctrl_bar div.buffer {	
	position:absolute;
	background-color:#4af;
	filter: alpha(opacity=10);
	opacity:0.1;
	width:0px;
	height:30px;
}
div.ctrl_bar div.buffer {
	border-right: solid 1px white;
	background-color:#fff;
	opacity:0.1;
	filter: alpha(opacity=10);
}

/* time display */
div.ctrl_bar div.time {
	position:absolute;		
	width:128px;
	left:550px;
	padding:8px 0;
	text-align:center;
	border-left:1px solid #414E5C;
	border-right:1px solid #080A0C; 
	font-size:12px;
	color:#fff; 
}

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

/* mute / unmute buttons */
div.ctrl_bar a.mute, div.ctrl_bar a.unmute {
	position:absolute;
	left:680px;
	width:38px;
	height:30px;
	text-align:center;
	padding:0;
	cursor:pointer;
	text-indent:-9999em;
	border-left:1px solid #414E5C;
	border-right:1px solid #080A0C; 
	background:url(../layout/vid_buttons.png) no-repeat 0px -327px;
}
div.ctrl_bar a.mute:hover {
	background-position:0px -371px;	
}

/* unmute state */
div.ctrl_bar a.unmute {
	background-position:0px -239px;	
}
div.ctrl_bar a.unmute:hover {
	background-position:0px -283px;	
}