.controls {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30px;
}

/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.hulu {
	position:relative;
	height:30px;
	/* black background with a gradient */
	background:#000 url(images/hulu.png) repeat-x 0 -8px !important;
	background:#000 url(images/ie-hulu.png) repeat-x 0 -8px;
	width: 100%;
}

/* play/pause button */
div.hulu a.play, div.hulu a.pause { 
	position:absolute;
	width: 10%;
	height: 30px;
	display:block;
	text-indent:-9999em;
	background: url(images/hulu.png) no-repeat center -65px !important;
	background: url(images/ie-hulu.png) no-repeat center -65px;
	cursor:pointer;
}

div.hulu a.play:hover {
	background-position: center -109px;	
}

/* pause state */
div.hulu a.pause { 
	background-position: center -152px;
}

div.hulu a.pause:hover {
	background-position: center -196px;	
}

/* the timeline (or "scrubber")  */
div.hulu div.track {  
	left:10%;
	position:absolute;
	cursor:pointer;
	width:80%;
	height:30px;	
}

/* the draggable playhead */
div.hulu div.playhead {
	position:absolute;
	cursor:pointer; 
	background-color:#4ff;
	opacity:0.3;
	filter: alpha(opacity=30);	
	width:4px;
	height:30px;	
}

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

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

/* time display */
div.hulu div.time {
	position:absolute;
	width: 80%;
	left: 10%;
	padding:9px 0 0;
	height: 21px;
	text-align:center;
	font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;	
	font-size:12px;
	color:#fff;
	display: none;
}

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

/* mute / unmute buttons */
div.hulu a.mute, div.hulu a.unmute {
	position:absolute;
	right:0;
	width:10%;
	height:30px;
	text-align:center;
	cursor:pointer;
	text-indent:-9999em;
	background:url(images/hulu.png) no-repeat center -326px !important;
	background:url(images/ie-hulu.png) no-repeat center -326px;
}

div.hulu a.mute:hover {
	background-position: center -370px;	
}

/* unmute state */
div.hulu a.unmute {
	background-position: center -238px;	
}

div.hulu a.unmute:hover {
	background-position: center -282px;	
}