/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.controlbar {
	position:relative;
	height:31px;
	 margin-top:9px;
	/* black background with a gradient */
    background-image:url('../Images/Layout/VideoPlayer_Background.png');
    background-position:right center;
    background-repeat:no-repeat;
	width:360px;
}

/* play/pause button */
div.controlbar a.play, div.controlbar a.pause { 
	position:absolute;
	width: 30px;
	height: 40px;
	display:block;
	
	text-indent:-9999em;
	background-image:url(../Images/Layout/VideoPlayer_Play.png);
	background-repeat:no-repeat;
	cursor:pointer; 
}
 
/* pause state */
div.controlbar a.play:hover { }

div.controlbar a.pause { 
    background-image:url(../Images/Layout/VideoPlayer_Pause.png);
}        
div.hulu a.pause:hover { }

/* the timeline (or "scrubber")  */
div.controlbar div.track {  
	left:57px;
	position:absolute;
	cursor:pointer;
	width:125px;
	height:3px;
	margin-top:12px;
	border:1px solid #000000;
	padding:1px;z-index:1337;
}

/* the draggable playhead */
div.controlbar div.playhead {
	position:absolute;
	cursor:pointer; 
	background-color:#008200;
	width:3px;
	height:3px;
	z-index:1337;
	margin-right:1px;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.controlbar div.progress, div.controlbar div.buffer {	
	position:absolute;
	background-color:#008200;
	width:0px;
	height:3px;
}

div.controlbar div.buffer {
	background-color:#6EB06E;
}

/* time display */
div.controlbar div.time {
	position:absolute;		
	width:129px;
	left:165px;
	padding:12px 0;
	padding-top:7px;
	text-align:center; 
	font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;	
	font-size:11px;
}

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

/* mute / unmute buttons */
div.controlbar a.mute, div.controlbar a.unmute {
    visibility: hidden;
    position:absolute;
    top: 1px;
    margin-left:265px;
    width:24px;
    height:24px;
    cursor:pointer;
   background-image:url(../Images/Layout/VideoPlayer_Sound.png);
   background-repeat:no-repeat;
    text-indent: -999px;
}

div.controlbar a.mute:hover {
}

/* unmute state */
div.controlbar a.unmute {
    background-image:url(../Images/Layout/VideoPlayer_Mute.png);
    background-repeat:no-repeat;
}

div.controlbar a.unmute:hover {
}