/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.mycontrolbar {
	position:relative;
	height:20px;
	background:#666666 url(/images/player/skin/hulu-new.png) repeat-x 0 -4px;
	width:505px;
	filter:alpha(opacity=50);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	top:-20px;
}

/* play/pause button */
div.mycontrolbar a.play, div.mycontrolbar a.pause { 
	position:absolute;
	width: 50px; 
	height: 20px; 
	display:block;
	text-indent:-9999em;
	background:url(/images/player/skin/hulu-new.png) no-repeat 10px -69px;
	cursor:pointer;
}

div.mycontrolbar a.play:hover {
	background-position:10px -113px;	
}

/* pause state */
div.mycontrolbar a.pause  {
	background-position:11px -156px;
}

div.mycontrolbar a.pause:hover {
	background-position:11px -200px;	
}

/* the timeline (or "scrubber")  */
div.mycontrolbar div.track {  
	left:47px;
	position:absolute;
	cursor:pointer;
	width:450px;
	height:20px;	
	background:url(/images/player/line-grey.png);
}

/* the draggable playhead */
div.mycontrolbar div.playhead 
{
	position:absolute;
	cursor:pointer; 
	background-color:#666666; /*#4ff;*/
	opacity:1.0;
	filter: alpha(opacity=100);	
	width:20px;
	height:20px;
	background:url(/images/player/mdc-grey.png) no-repeat;
}

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

div.mycontrolbar div.buffer {
	background-color:#666666; /*#000000;*/
	opacity:0.1;
	filter: alpha(opacity=10);
}

/* time display */
div.mycontrolbar div.time {
	position:absolute;		
	width:129px;
	left:330px;
	top:0px;
	padding:1px 0;
	text-align:center;
	/*border:1px solid #999;
	border-width:0 1px;*/
	
	font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;	
	font-size:12px;
	color: #fff;
	z-index:-1;
	display:none;
}

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

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

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

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

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