/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
#controls {
	position:relative;
	height:38px;
	float: left;
	padding: 1px 0; 
	
	/* black background with a gradient */
	background: transparent;
	width:569px;
}

/* play/pause button */
#controls .play, 
#controls .pause, 
#controls .prev, 
#controls .next,
#controls .mute, 
#controls .unmute,
#controls .tray,
#controls .npd-button { 
	position: absolute;
	width: 45px;
	height: 38px;
	display: -moz-inline-box;
	display: inline-block;
	text-indent:-9999em;
	cursor: pointer; 
	background-image: url(/images/player-sprites.png);
	background-repeat: no-repeat; }

/* play state */
#controls .play			{ background-position: 0 -38px; left: 0; }
#controls .play:hover	{ background-position: 0 -76px; }

/* pause state */	
#controls .pause		{ background-position: 0 -114px; left: 0; }
#controls .pause:hover	{ background-position: 0 -152px; }

/* previous state */	
#controls .prev			{ background-position: 0 -190px; left: 46px; }
#controls .prev:hover	{ background-position: 0 -228px; }

/* next state */	
#controls .next			{ background-position: 0 -266px; left: 92px; }
#controls .next:hover	{ background-position: 0 -304px; }

/* unmute state */
#controls .mute			{ background-position: 0 -342px; right: 79px; }
#controls .mute:hover	{ background-position: 0 -380px; }

/* mute state */
#controls .mute.un			{ background-position: 0 -418px; right: 79px; }
#controls .mute.un:hover	{ background-position: 0 -456px; }

/* slide tray down state */
#controls .tray.down			{ background-position: 0 -494px; right: 34px; }
#controls .tray.down:hover		{ background-position: 0 -532px; }

/* slide tray up state */
#controls .tray.up			{ background-position: 0 -570px; right: 34px; }
#controls .tray.up:hover	{ background-position: 0 -608px; }

/* slide tray null state */
#controls .tray.disabled		{ background-position: 0 -646px; right: 34px; }


#controls .npd-button	{ right: 0px; width: 34px;  }

/* disabled np details */
#controls .npd-button.disabled	{ background-position: 0 -722px; }

/* collapse player */
#controls .npd-button.collapse			{ background-position: 0 -684px; }
#controls .npd-button.collapse:hover	{ background-position: 0 -722px; }

/* expand player */
#controls .npd-button.expand		{ background-position: 0 -760px; right: 0px; width: 34px; }
#controls .npd-button.expand:hover	{ background-position: 0 -798px; }


/* the timeline (or "scrubber")  */
#controls .track {  
	left:150px;
	position:absolute;
	cursor:pointer;
	width:208px;
	height:38px;
	background-image: url(/images/sprites.png);
	background-repeat: no-repeat;
	background-position: 0 -762px; }

/* the draggable playhead */
#controls .playhead {
	position:absolute;
	cursor:pointer;
	width: 13px;
	height: 13px;
	background-image: url(/images/player-sprites.png);
	background-position: 0 -19px;
	background-repeat: no-repeat;
	top: 14px; }

/* buffer- and progress bars. upon runtime the width of these elements grows */
#controls .progress, #controls .buffer {	
	position:absolute;
	height:3px;
	left: 6px;
	top: 18px;
	background-image: url(/images/player-sprites.png);
	background-repeat: repeat-x; }

#controls .progress	{ background-position: 0 0; }
#controls .buffer	{ background-position: 0 -5px; }

/* time display */
#controls .time {
	position:absolute;		
	left:372px;
	padding:1px 0 0;
	text-align:center;
	border-width:0 1px;
	line-height: 38px;
	vertical-align: middle;
	font-family: "Helvetica Nue", Helvetica, Arial, Verdana, sans-serif;	
	font-size:1.1em;
	font-weight: bold; }

/* total duration in time display */
#controls .time .played		{ color:#b5d6e9; }
#controls .time .duration	{ color:#063B5D; }