.body {margin:0}


body {margin:0}



/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */



div.hulu {
	position:relative;
	height:20px;
	
	/* black background with a gradient */
	background:#111 url(hulu.png) repeat-x;
	width:580px;
}




/* play/pause button */



div.hulu a.play, div.hulu a.pause { 
	position:absolute;
	width: 30px;
	height: 20px;
	display:block;
	text-indent:-9999em;
	background:url(hulu.png) no-repeat 0px -51px;
	
cursor:pointer;
	border-right:0px solid #ff0000; 
}



div.hulu a.play:hover {
	background-position:5px -51px;	
}



/* pause state */


div.hulu a.pause { 
	background-position:10px -70px;
}



div.hulu a.pause:hover {
	background-position:5px -51px;	
}



/* the timeline (or "scrubber")  */






div.hulu div.track {  
	left:30px;
	position:absolute;
 cursor:pointer;

	width:460px;
	border-left:0px solid #999;
	height:19px;	}



/* the draggable playhead */


div.hulu div.playhead {
	position:absolute;
	cursor:pointer; 
	background-color:#fff;
	opacity:0.3;
	filter: alpha(opacity=30);	
	width:2px;
	height:10px;
	border-right:1px solid #444;  margin-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:#fff;
	filter: alpha(opacity=10);
	opacity:0.1;
	width:0px;
	height:10px; margin-top:5px
}




div.hulu div.buffer {
	background-color:#222;
	opacity:0.1;
	filter: alpha(opacity=10);
}









/* time display */


div.hulu div.time {
	position:absolute;		
	width:65px;
	left:485px;
	padding:3px 0;
	text-align:center;
	border:0px solid #999;
	border-width:0 0px;
	
	font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;	
	font-size:10px;
	color:#fff; 
}



/* total duration in time display */


div.hulu div.time strong {
	font-weight:normal;
	color:#FF0000;
}




/* mute / unmute buttons */


div.hulu a.mute, div.hulu a.unmute 


{
	position:absolute;
	left:540px;
	width:46px;
	height:20px;
	text-align:center;
	padding:3px 0;
	cursor:pointer;
 font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;font-size:10px;
	color:#fff; 
}



div.hulu a.mute:hover {
	background-position:540px
 20px; font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;font-size:10px;
	color:#ff0000; }



/* unmute state */


div.hulu a.unmute {
	background-position:540px
 10px; font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;font-size:10px;
	color:#ff0000; }
div.hulu a.unmute:hover {
	background-position:540px
 10px
; font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;font-size:10px;
	color:#ff0000; }