.sc-player { width: 100%; height:100%; margin: 0; }
.sc-player *{ list-style-type: none; }
.sc-player ol, .sc-player li{
	margin: 0;
	padding: 0;
	list-style-position: inside;
}


/* Artworks */

.sc-player .sc-artwork-list{ 
	position: absolute; left:8px; bottom:8px; margin:0px; 
	border-radius: 4px; -moz-border-radius:4px; -webkit-border-radius:4px;
	overflow: hidden;}
.sc-player .sc-artwork-list li{ display: none; border-radius: inherit;}
.sc-player .sc-artwork-list li.active{ display: block; }

.sc-player .sc-artwork-list li img, .sc-player .sc-artwork-list li div{
	width: 200px; height: 200px; border-radius: inherit;}
.sc-no-artwork {  display: none; 
}


/* controls */
.sc-player .sc-controls{
	position: absolute;
	z-index: 8000;
	width: 50px;
	height: 50px;
	margin-left: -25px;
	margin-bottom: -25px;
	bottom:106px;
	left: 106px;
}
.sc-player .sc-controls a {
	color: transparent; display: block;
	width: 50px; height: 50px;
	background-image: url('img/play-blue.png');
	position:absolute; top:0; left:0;
	-moz-transition: all 1s ease; -webkit-transition:all 1s ease; transition: all 1s ease;
}
.sc-player .sc-controls a:hover {
	background-image: url('img/play-blue-hover.png');
}
.sc-player.playing .sc-controls a.sc-play{
	display: block;
}
.sc-player .sc-controls a.sc-pause { display: block !important;
	background-image: url('img/play-blue.png'); 
}
.sc-player .sc-controls a.sc-pause:hover{
	background-image: url('img/play-blue-hover.png');
}
.sc-player.playing .sc-controls a.sc-pause{ display: block !important;
	background-image: url('img/pause-blue.png'); visibility: visible;
}
.sc-player.playing .sc-controls a.sc-pause:hover{
	background-image: url('img/pause-blue-hover.png');
} 


/* scrubber */

.sc-scrubber { 
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.30); -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.30); 
  display: block; z-index: 600; }

.sc-scrubber .sc-time-span{
	position: absolute; left: 7px; right:7px; top:5px;
	height: 112px;
	border:#444 2px solid; 
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.sc-scrubber .sc-time-span img {
	opacity:.8; overflow:hidden;
	height: 112px; width: 100%; background-color: #7B9AB5;
	background: -moz-linear-gradient(top, black, #7B9AB5 0px, #A5BBCE 90%);
	background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #7B9AB5), to(#A5BBCE));}
.sc-scrubber .sc-buffer, .sc-scrubber .sc-played{height: 112px; position: absolute; top: 0;
	background-color: #fff; opacity: 0.1; width:100%; }
.sc-scrubber .sc-played {
	background-color: #A5BBCE; opacity:.4;}

.sc-track-duration {text-align: right; float: right; padding: 0 5px; margin-left: 5px; } 
.sc-scrubber .sc-time-indicators{  /* timer */
	font: 18px Arial, sans serif; 
	color:#fff; opacity:.24; text-shadow: 1px 3px 4px #000;
  	position: absolute; right: 0; top: 10px; display:none;
}
 


/* Track listings*/

.sc-player ol.sc-trackslist {position: absolute; 
	height: 200px; bottom:5px; left: 218px; right:8px; 
	overflow: auto; padding: 2px 2px; 
	box-shadow: inset 0 -10px 60px 2px #000; 
	background: rgba(20,20,20, .80); 
 } 
.sc-player ol.sc-trackslist li{cursor: pointer; margin: 1px 5px; 
	padding: 4px; position: relative; 
	border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; 
	-moz-transition:.38s all ease;
	-webkit-transition:.38s all ease;
	transition:.38s all ease;
}
.sc-player ol.sc-trackslist li span {position: absolute; 
	right: 0; top: 3px; }
.sc-player ol.sc-trackslist li.active, .sc-player ol.sc-trackslist li:hover {
	
	padding: 4px; 
	-moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; 
	/*-moz-box-shadow: 1px 1px 4px #ccc; -webkit-box-shadow: 1px 1px 4px #ccc; */}

.sc-player ol.sc-trackslist li.active{
/*	background-color: #fff; background-color: rgba(255,255,255,.4);*/
	-moz-box-shadow: inset 0px 0px 21px 3px rgba(255,255,255, .3); 
	-webkit-box-shadow: inset 0px 0px 21px 3px rgba(255,255,255, .3); 
	box-shadow: inset 0px 0px 21px 3px rgba(255,255,255 .3); 
	background-color: rgba(165, 187, 206, .7);
	color: #222; 
}
.sc-player ol.sc-trackslist li:hover {
	/**/
	letter-spacing: 4px;
	}
.sc-player ol.sc-trackslist li.active a {color: #222; }
.sc-track-duration {text-align: right; float: right; padding: 0 5px; margin-left: 5px; }


/* Track info */
.sc-player .sc-info{position: absolute; top: 10px; left: -5000px; 
	width : 400px; padding: 5px; height: 200px; 
	z-index: 500; margin-left: -200px; display:none;
	background: #fff; opacity: 0.9; }
.sc-player .sc-info.active{left: 50%; top: 12%; }
.sc-player .sc-info-toggle{
	font-size:14px; height:34px; line-height: 32px;
	position: absolute; bottom: 224px; right: 2px; 
  	background: #fff; color: #7B9AB5; padding: 0 4px 0;
  	border: 3px solid #444; display:none;
	border-radius: 6px; opacity:.65;} 
.sc-player .sc-info-toggle.active{}
.sc-player .sc-info-toggle:hover{
	background: #7B9AB5;
	color: #eee; }
.sc-player .sc-info-close{position: absolute; top: 10px; right: 20px;
	background: #7B9AB5; color: #fff; 
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; 
	padding: 2px 4px;}


/* volume control */ 
.sc-volume-slider {top: -27px; width:120px; right:0px; position: absolute; 
	height: 12px; overflow:visible;
	background-color: #fff; opacity:.6;
	box-shadow:0px 0px 3px 1px rgba(255,255,255, .3);
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;border-radius: 2px} 
/*.sc-volume-slider:before, .sc-volume-slider:after{
	font-size:30px;
	content:"—"; height:20px; width:20px; display:block;
  z-index:20; position:absolute; left: -3px; overflow: visible;
  border-radius:50%; text-align:center; top:-30px; line-height:16px;}
.sc-volume-slider:after{content:"+"; right: 0; left:auto;}
*/
#vol{	
	font-size:18px; letter-spacing: 12px;
	width:120px; display:block;
  z-index:20; position:absolute; 
  border-radius:50%; text-align: center; top:-52px; right:0;
}
.sc-volume-slider .sc-volume-status{position: absolute; 
	background-color: #666; border-right: 1px solid #7B9AB5;
	width: 0%; height: 10px; top: 1px; left: 1px; 
	background: -moz-linear-gradient(top, black, #7B9AB5 0px, #A5BBCE 90%);
	background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #7B9AB5), to(#A5BBCE));} 
.sc-volume-slider .sc-volume-status:after{ font-size:9px;
content:""; background:#e1e1e1; height:16px; width:16px; display:block;
  z-index:20; position:absolute; top:-4px; right:-10px; overflow: visible; border:2px solid white;
  border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; 
  text-align:center; line-height:16px; border-width:1px;
  box-shadow: inset 1px 1px 5px 2px rgba(0,0,0, .1); 	
  background: -moz-linear-gradient(top, black, #7B9AB5 0px, #A5BBCE 90%);
	background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #7B9AB5), to(#A5BBCE));
}

/* utilities */ 
.sc-player .hidden { display: hidden; } 
.sc-player-engine-container{width: 1px; height: 1px; position: fixed; top: 2px; left: 2px; }