
/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
	.hiddenPic {display:none;}
div.gcds_skin {
	position:relative;
	height:55px;
	width:100%;
	background-image:url('titlebar_tile.png');
	background-repeat:repeat-x;
	top:-8px;
}

/* play/pause button */
div.gcds_skin a.play, div.gcds_skin a.pause { 
	position:absolute;
	width: 58px;
	height: 55px;
	display:block;
	text-indent:-9999em;
	background-image:url('play_overlay_dim.png');
	background-repeat:no-repeat;
	cursor:pointer;
	top:0px;
}

div.gcds_skin a.play:hover {
	background-image:url('play_overlay.png');
}

/* pause state */
div.gcds_skin a.pause { 
	background-image:url('pause_overlay_dim.png');
}

div.gcds_skin a.pause:hover {
	background-image:url('pause_overlay.png');	
}

/* the timeline (or "scrubber")  */
div.gcds_skin div.track {  
	left:65px;
	position:absolute;
	background-image:url('gague_unbuffered.png');
	cursor:pointer;
	width:143px;
	height:16px;
	top:17px;
	max-height:16px;

}


/* the draggable playhead */
div.gcds_skin div.playhead {
	cursor:pointer; 
	position:absolute;
	height:16px;
	width:15px;
	background-image:url('ball.png');
		max-height:16px;
		overflow:hidden;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.gcds_skin div.progress, div.gcds_skin div.buffer {	
	position:absolute;
	background-image:url('gague_filled.png');
	height:16px;
	max-height:16px;
	overflow:hidden;
}

div.gcds_skin div.buffer {
background-image:url('gague_buffered.png');
	height:16px;
		max-height:16px;
	overflow:hidden;
}

/* time display */
div.gcds_skin div.time {
	position:absolute;		
	width:76px;
	left:214px;
	top:19px;
	text-align:center;
	font-weight:bold;
	font-family:Arial;	
	font-size:10px;
	color:#fff; 
}

/* total duration in time display */
div.gcds_skin div.time strong {
font-weight:normal;
}

/* mute / unmute buttons */
div.gcds_skin a.mute, div.gcds_skin a.unmute {
	position:absolute;
	left:294px;
	width:14px;
	height:55px;
	text-align:center;
	cursor:pointer;
	text-indent:-9999em;
	background-image:url('unmuted.png');
}

div.gcds_skin a.mute:hover {
	background-image:url('unmuted.png');
}

/* unmute state */
div.gcds_skin a.unmute {
	background-image:url('muted.png');
}

div.gcds_skin a.unmute:hover {
	background-image:url('muted.png');
}


