
/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.hulu {
	position:absolute;
	bottom:32px;
	left:257px;
	height:40px;
	
	/* black background with a gradient */
	background:url(/images/structure/bg-flowplayer-control.png);
	width:525px;
	z-index:1000;
}

.daytime-microsite div.hulu{ bottom: 27px; }
.daytime-microsite .alternating{ bottom: 35px; }
.daytime-microsite.internal div.anythingSlider .thumbNav{ bottom: 22px; }

/* play/pause button */
div.hulu a.play, div.hulu a.pause { 
	position:absolute;
	width: 46px;
	height: 40px;
	display:block;
	text-indent:-9999em;
	background:url(/images/icons-flowplayer.png) no-repeat 10px -61px;
	cursor:pointer;
	left:0;
}

div.hulu a.play:hover {
	background-position:10px -105px;	
}

/* pause state */
div.hulu a.pause { 
	background-position:11px -148px;
}

div.hulu a.pause:hover {
	background-position:11px -192px;	
}

/* the timeline (or "scrubber")  */
div.hulu div.track {  
	left:47px;
	position:absolute;
	cursor:pointer;
	width:167px;
	height:4px;	
	top:18px;
	background:url(/images/structure/bg-track.gif) no-repeat;
}

/* the draggable playhead */
div.hulu div.playhead {
	position:absolute;
	cursor:pointer; 
	background:url(/images/icon-trackhead.gif);
	width:14px;
	height:15px;
	top:-5px;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.hulu div.progress, div.hulu div.buffer {	
	position:absolute;
	background-color:#137ae3;
	width:0px;
	height:4px;
}

div.hulu div.buffer {
	background-color:#fff;
	opacity:0.1;
	filter: alpha(opacity=10);
}

/* time display */
div.hulu div.time {
	position:absolute;		
	width:129px;
	left:200px;
	padding:10px 0;
	text-align:center;
	border-width:0 1px;
	font-size:12px;
	color:#f99823; 
}

/* total duration in time display */
div.hulu div.time strong {
	font-weight:normal;
	color:#373737;
	padding-left:5px;
}

/* mute / unmute buttons */
div.hulu a.mute, div.hulu a.unmute {
	position:absolute;
	left:305px;
	width:40px;
	height:40px;
	text-align:center;
	padding:8px 0;
	cursor:pointer;
	text-indent:-9999em;
	background:url(/images/icons-flowplayer.png) no-repeat 5px -323px;
}

div.hulu a.mute:hover {
	background-position:5px -367px;	
}

/* unmute state */
div.hulu a.unmute {
	background-position:5px -235px;	
}

div.hulu a.unmute:hover {
	background-position:5px -279px;	
}

.big-play{ width:80px; height:80px; background:url(/images/buttons/play.png) no-repeat; display:block; position:absolute; left:460px; top:180px; }

