/*
 * We are using CSS to show the HTML5 Audioplayer to browser that can 
 * handle the HTML5 audio. 
 *
 * By default, the flash player is visible and the HTML5 is not.
 */ 
.webkit #jukebox, .gecko #jukebox {
	display: block;
}

.webkit #flash_container, .gecko #flash_container {
	display: none;
}

#jukebox {
	backround-color: black;	
	border: 4px solid #262626;
}

#jukebox .controls {
	background-image: url("images/content_bg.gif");	
	border: 1px solid #262626;
	border-bottom: none;	

  	-moz-border-radius-topleft: 6px;
  	-moz-border-radius-topright: 6px;
  	-webkit-border-top-left-radius: 6px;
  	-webkit-border-top-right-radius: 6px;

	/* adds gradient */
	/*
	background: -webkit-gradient(linear, left top, left center, from(#333), to(#000));
	background:-moz-linear-gradient(center top , #666666, #000000) repeat scroll 0 0;
	*/ 
}

#jukebox .controls a:hover {
	background-color: #666; 			
}

#jukebox .loader {
	border: 1px solid #262626;
}

#jukebox .load-progress {
	background-color: #262626;
}

#jukebox .play-progress {
	background-color: #9999cc;
}

#jukebox .current_song {
	background-image: url("images/content_bg.gif");			
	border: 1px solid #262626;	
}

#jukebox .songlist {
	background-image: url("images/content_bg.gif");
	border: 1px solid #262626;		
}


#jukebox {			

	display: none;

	-moz-border-radius:10px;
	-webkit-border-radius:10px;

	background-color:black;
	color: lightgrey;	
	float: right;
	padding:5px;
	font-family: lucida sans, helvetica, arial, verdana;
	font-weight:bold;
	margin: 25px 25px 0 0;

	/* width:300px;
	height: 205px; */
}

#jukebox .loader {
	height:3px;
	margin:5px 0px
}

#jukebox .load-progress {
	width:0px;
	height:3px;
}

#jukebox .play-progress {
	width:0px;
	height:3px;
}

#jukebox .controls {
	padding-top: 1px;
	padding-left: 5px;
}

#jukebox .controls a {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;		

	display:inline-block;
	
	width:20px;
	height:20px;
	margin:0px;
	margin-top: 5px;
	margin-right: 1px;
	background-repeat:no-repeat;
}

#jukebox .controls a:hover {
}

#jukebox .controls a span {
	display:none;
}

a:active, a:focus {
	outline: 0;
}

#jukebox .controls a.prev {
	background-image: url("images/prev.png");
}
#jukebox .controls a.next {
	background-image: url("images/next.png");
}
#jukebox .controls a.play {
	background-image: url("images/play.png");
}
#jukebox .controls a.pause {
	background-image: url("images/stop.png");
}

#jukebox .current_song {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;		
	color: darkgrey;						
	font-weight:normal;
	font-size: 11px; 
	margin-top: 0px;
	padding: 3px 0 2px 5px;		
}

#jukebox .songlist {
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;	
				
	background-color: black;
	font-weight:normal;
	height: 136px;
	/* padding: 8px; 0 8px 10px; */
	padding: 4px 0px;
}

#jukebox .songlist .song {
	font-size: 11px;
	margin: 3px 4px;
	padding: 2px 4px;			
}
#jukebox .songlist .song a {
	color: darkgrey;
	text-decoration: none;
}

#jukebox .songlist .song:hover {
	background-color: #333;
	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;		
}

#jukebox .songlist .song:hover a {
	color: #CCC;
}