/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.viralVideoControls {
	position:relative;
	height:40px;
	
	/* black background with a gradient */
	background:#097593 url(http://media.shophomesdirect.com.s3.amazonaws.com/images/viralVideoControls.png) repeat-x 0 -4px;
	width:291px;
}

/* play/pause button */
div.viralVideoControls a.play, div.viralVideoControls a.pause {
	position:absolute;
	width: 46px;
	height: 40px;
	display:block;
	text-indent:-9999em;
	background:url(http://media.shophomesdirect.com.s3.amazonaws.com/images/viralVideoControls.png) no-repeat 10px -61px;
	cursor:pointer;
	border-right:1px solid #ccc;
}

div.viralVideoControls a.play:hover {
	background-position:10px -105px;	
}

/* pause state */
div.viralVideoControls a.pause {
	background-position:11px -148px;
}

div.viralVideoControls a.pause:hover {
	background-position:11px -192px;	
}

/* the timeline (or "scrubber")  */
div.viralVideoControls div.track {
	left:47px;
	position:absolute;
	cursor:pointer;
	width:125px;
	border-left:1px solid #fff;
	height:40px;	
}

/* the draggable playhead */
div.viralVideoControls div.playhead {
	position:absolute;
	cursor:pointer; 
	background-color:#fff;
	opacity:0.5;
	filter: alpha(opacity=50);
	width:3px;
	height:40px;
	border-right:1px solid #fff;
}

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

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

/* time display */
div.viralVideoControls div.time {
	position:absolute;		
	width:80px;
	left:172px;
	padding:12px 0;
	text-align:center;
	border:1px solid #fff;
	border-width:0 1px;
	
	font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;	
	font-size:12px;
	color:#fff; 
}

/* total duration in time display */
div.viralVideoControls div.time strong {
	font-weight:bold;
	color:#fff;
}

/* mute / unmute buttons */
div.viralVideoControls a.mute, div.viralVideoControls a.unmute {
	position:absolute;
	left:253px;
	width:40px;
	height:40px;
	text-align:center;
	padding:8px 0;
	cursor:pointer;
	text-indent:-9999em;
	background:url(http://media.shophomesdirect.com.s3.amazonaws.com/images/viralVideoControls.png) no-repeat 5px -323px;
}

div.viralVideoControls a.mute:hover {
	background-position:5px -367px;	
}

/* unmute state */
div.viralVideoControls a.unmute {
	background-position:5px -235px;	
}

div.viralVideoControls a.unmute:hover {
	background-position:5px -279px;	
}


/* large controls */


/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.viralVideoControlsLarge{
	position:relative;
	height:40px;
	
	/* black background with a gradient */
	background:#097593 url(http://media.shophomesdirect.com.s3.amazonaws.com/images/viralVideoControls.png) repeat-x 0 -4px;
	width:790px;
}

/* play/pause button */
div.viralVideoControlsLarge a.play, div.viralVideoControlsLarge a.pause {
	position:absolute;
	width: 46px;
	height: 40px;
	display:block;
	text-indent:-9999em;
	background:url(http://media.shophomesdirect.com.s3.amazonaws.com/images/viralVideoControls.png) no-repeat 10px -61px;
	cursor:pointer;
	border-right:1px solid #ccc;
}

div.viralVideoControlsLarge a.play:hover {
	background-position:10px -105px;	
}

/* pause state */
div.viralVideoControlsLarge a.pause {
	background-position:11px -148px;
}

div.viralVideoControlsLarge a.pause:hover {
	background-position:11px -192px;	
}

/* the timeline (or "scrubber")  */
div.viralVideoControlsLarge div.track {
	left:47px;
	position:absolute;
	cursor:pointer;
	width:624px;
	border-left:1px solid #fff;
	height:40px;	
}

/* the draggable playhead */
div.viralVideoControlsLarge div.playhead {
	position:absolute;
	cursor:pointer; 
	background-color:#fff;
	opacity:0.5;
	filter: alpha(opacity=50);
	width:3px;
	height:40px;
	border-right:1px solid #fff;
}

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

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

/* time display */
div.viralVideoControlsLarge div.time {
	position:absolute;		
	width:80px;
	left:670px;
	padding:12px 0;
	text-align:center;
	border:1px solid #fff;
	border-width:0 1px;
	
	font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;	
	font-size:12px;
	color:#fff; 
}

/* total duration in time display */
div.viralVideoControlsLarge div.time strong {
	font-weight:bold;
	color:#fff;
}

/* mute / unmute buttons */
div.viralVideoControlsLarge a.mute, div.viralVideoControlsLarge a.unmute {
	position:absolute;
	left:750px;
	width:40px;
	height:40px;
	text-align:center;
	padding:8px 0;
	cursor:pointer;
	text-indent:-9999em;
	background:url(http://media.shophomesdirect.com.s3.amazonaws.com/images/viralVideoControls.png) no-repeat 5px -323px;
}

div.viralVideoControlsLarge a.mute:hover {
	background-position:5px -367px;	
}

/* unmute state */
div.viralVideoControlsLarge a.unmute {
	background-position:5px -235px;	
}

div.viralVideoControlsLarge a.unmute:hover {
	background-position:5px -279px;	
}