/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
#featuredControls { 
	position:relative;
	height:8px;
	margin:12px auto 0 auto;
	padding:15px 0 0;
	
}

/* when play button toggles between play/pause class 
	we move it's background image */
#featuredControls div.play, #featuredControls div.pause { 
	position:relative;
	width: 18px;
	height:10px;
	text-indent:-999em;
	cursor:pointer;
	overflow:hidden;
	background:url(img/play_pause.png) center top no-repeat;
	margin-top: -10px;
}

#featuredControls div.pause { 
	background-position:center -10px;
}

/* the track or "scrubber"  */
#featuredControls div.track { 
	position:absolute;
	top: 5px;	
	height:18px;
	left:20px;
	background:url(img/track.png) no-repeat;
	text-align:left;
	cursor:pointer;
	width:720px;	
}

/* the draggable playhead */
#featuredControls div.playhead { 
	position:absolute;	
	height:12px;
	background:url(img/playhead.png) no-repeat;
	cursor:pointer;
	top:0px; 
	width:12px;
}

/* buffer and featuredControls are automatically resized, their initial width should be 0 */
#featuredControls div.progress, #featuredControls div.buffer {	
	background-color:#fff;
	height:6px;
	margin:3px 4px;
	width:0px;
	position:absolute;
	top:0;
	font-size:0px;	
	max-width:712px;
}

#featuredControls div.buffer {
	background-color:#999;
}

/* som proprietary styling for progress bar under mozilla */
#featuredControls div.progress, #featuredControls div.buffer {
	-moz-border-radius-bottomleft:2px;
	-moz-border-radius-topleft:2px;	
}

#featured {
	margin: 0 0 0 25px !important;
}

#featuredWrap h2 {
	color:#FFFFFF;
	padding-bottom:3px;
	margin-left:25px;
}

#featuredPlaylist {
	display:none;
}
	
#featuredControls {
	margin: 0 0 0 25px !important;
}