/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.hulu {
	position:relative;
	height:19px;
	
	/* black background with a gradient */
	background:#000 url(/gfx/controls/bg.png) repeat-x;
	width:480px;
}

/* play/pause button */
div.hulu a.play, div.hulu a.pause { 
	position:absolute;
	width: 15px;
	height: 17px;
	margin-top:1px;
	margin-left:1px;
	display:block;
	text-indent:-9999em;
	background:url(/gfx/controls/play.png) no-repeat;
	cursor:pointer; 
}

div.hulu a.play:hover {
	background:url(/gfx/controls/play_hover.png) no-repeat;	
}

/* pause state */
div.hulu a.pause { 
	background:url(/gfx/controls/pause.png) no-repeat;
}

div.hulu a.pause:hover {
	background:url(/gfx/controls/pause_hover.png) no-repeat;	
}

/* the timeline (or "scrubber")  */
div.hulu div.track {  
	margin-left:105px;
	margin-top:1px;
	position:absolute;
	background:url(/gfx/controls/bg_track.png) repeat-x;
	cursor:pointer;
	width:355px;
	height:18px;	
}

/* the draggable playhead */
div.hulu div.playhead {
	position:absolute;
	margin-top:5px;
	cursor:pointer; 
	background-color:#cccccc;	
	width:2px;
	height:7px;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.hulu div.progress, div.hulu div.buffer {	
	position:absolute;
	background-color:#cccccc;
	width:0px;
	height:5px;
	margin-top:6px;
}

div.hulu div.buffer {
	background-color:#545454;
}

/* time display */
div.hulu div.time {
	position:absolute;		
	width:87px;
	height:16px;
	margin-left:17px;
	margin-top:1px;
	padding-top:2px; 
	text-align:center;
	/*border-width:0 1px;*/
	background:url(/gfx/controls/bg_track.png) repeat-x;
	
	font-family:verdana,arial,futura;	
	font-size:10px;
	color:#ffffff; 
}

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

/* mute / unmute buttons */
div.hulu a.mute, div.hulu a.unmute {
	position:absolute;
	margin-left:461px;
	margin-top:1px;
	width:18px;
	height:17px;
	text-align:center;
	cursor:pointer;
	text-indent:-9999em;
	background:url(/gfx/controls/sound_on.png) no-repeat;
}

div.hulu a.mute:hover {
	background:url(/gfx/controls/sound_on_hover.png) no-repeat;
}

/* unmute state */
div.hulu a.unmute {
	background:url(/gfx/controls/sound_off.png) no-repeat;	
}

div.hulu a.unmute:hover {
	background:url(/gfx/controls/sound_off_hover.png) no-repeat;	
}