/* Video player controls. */
/*
Absolute positions:
play/pause - 0
track - 50
time - 490
mute - 590

/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.videocontrols {
	position:relative;
	width:638px;
	height:30px;	
	
	/* black background with a gradient */
	background:#000000 url("../images/controls-bg.png") top left repeat-x;
	border:1px solid #474747; 
	color:#ffffff;
}

/* play/pause button */
div.videocontrols a.play, div.videocontrols a.pause { 
	position:absolute;
	width: 50px;
	height: 30px;
	display:block;
	text-indent:-9999em;
	background:url("../images/controls.png") no-repeat 12px -65px;
	cursor:pointer;
}

div.videocontrols a.play:hover {
	background-position:12px -109px;
}

/* pause state */
div.videocontrols a.pause { 
	background-position:12px -152px;
}

div.videocontrols a.pause:hover {
	background-position:12px -196px;
}

/* the timeline (or "scrubber")  */
div.videocontrols div.track {  
	left:50px;
	position:absolute;
	cursor:pointer;
	background:#15171b url("../images/controls-track-bg.png") repeat-x;
	width:428px;
	height:18px;
	margin:5px;
	border:1px solid #000000;
}

/* the draggable playhead */
div.videocontrols div.playhead {
	position:absolute;
	cursor:pointer; 
	background-color:#000000;	
	width:1px;
	height:18px;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.videocontrols div.progress, div.videocontrols div.buffer {	
	position:absolute;
	background-color:#ffffff;
	filter: alpha(opacity=50);
	opacity:0.50;
	width:0px;
	height:18px;
}

div.videocontrols div.buffer {
	background-color:#90969f;
	opacity:0.50;
	filter: alpha(opacity=50);
}

/* time display */
div.videocontrols div.time {
	position:absolute;		
	width:100px;
	left:490px;
	padding:7px 0;
	text-align:center;
	
	font-family:arial,sans-serif;	
	font-size:12px;
	color:#fff; 
}

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

/* mute / unmute buttons */
div.videocontrols a.mute, div.videocontrols a.unmute {
	position:absolute;
	left:590px;
	width:50px;
	height:30px;
	text-align:center;
	padding:8px 0;
	cursor:pointer;
	text-indent:-9999em;
	background:url("../images/controls.png") no-repeat 10px -327px;
}

div.videocontrols a.mute:hover {
	background-position:10px -371px;	
}

/* unmute state */
div.videocontrols a.unmute {
	background-position:10px -239px;	
}

div.videocontrols a.unmute:hover {
	background-position:10px -283px;	
}