@charset "utf-8";
/* CSS Document */
.blurrimg{
	transform: translate3d(0,0,0) translateZ(0);
    perspective: 1000px;
    backface-visibility: hidden;
    -moz-transform: translate3d(0,0,0) translateZ(0);
    -moz-perspective: 1000px;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0) translateZ(0);
    -webkit-perspective: 10px;
    -webkit-backface-visibility: hidden;
    filter: url(#blur);
    filter: blur(50px);
    -webkit-filter: blur(30px);
    /*z-index: -1;*/
    position: absolute;
    top: 0;
    left: 0;
	width:100%;
}

.blurrimg img{ width:100%; height:240px;}

#player{ width:100%; position:absolute; left:0px; bottom:50px;}

.playlist-h{ display:none;}
.example {
    margin: 50px auto 0;
    width: 400px;
}
.player {
    /*background: transparent url("../images/spr.png") no-repeat scroll center top;*/
    /*height: 442px;*/
    position: relative;
    width: 100%;
	height:240px;
    z-index: 2;
	/*border:2px solid #222;*/
	background-size:0px;
}

.duration{
	/*float:right;*/
	position:absolute;
	right:0px;
	bottom:70px;
}

.artist a, .album a{ color:#ccc;}
.artist a:hover, .album a:hover{ text-decoration:underline;}
.album a{ /*font-size:14px; font-weight:bold; color:#999;*/}

.cover {
    /*background: transparent url(../data/cover1.jpg) no-repeat;
	background-size:100%;
    border-radius: 0px;
    height: 400px;
    left: 0px;*/
    position: relative;
    /*top: 0px;
    width: 100%;
	border:1px solid #777;*/
}

.info{
	position:absolute;
	z-index:10;
	background-color:rgba(0,0,0,0.7);
	bottom:10px;
	width:100%;	
	padding:10px 0px;
}
.controls {
    cursor: pointer;
    height: 32px;
    left: 0px;
    position: absolute;
    bottom: -40px;
    width: 218px;
}

.controls .play, .controls .pause, .controls .rew, .controls .fwd, .controls .fav, .controls .shuffle{
    float: left;
    height: 100%;
    width: 19%;
	text-shadow: 1px 1px 4px #333;
	font-size:24px;
	margin:0px 6px;
	margin-top:5px;
}
.controls .fav {
   /*font-size:11px; padding-top:4px;*/ padding-left:5px; color:#fff;
}
.controls .fav.in-fav{ color:#f00;}
.controls .play {
   font-size:34px; margin-top:0px;
}
.controls .pause {    
    display: none; font-size:34px; margin-top:0px;
}
.controls .rew {
   
}
.controls .fwd {
   
}
.controls .shuffle {
    
}
.controls .shuffle-off{ opacity:0.6;}
.controls .shuffle-on{ opacity:1.0;}

.hidden {
    display: none;
}
.controls .visible {
    display: block;
}

.playbig{
	display:none;
	position:absolute; top:50%; left:50%; margin-left:-50px; margin-top:-50px; z-index:100;
	background:url(../images/player/playbigm.png) no-repeat; width:100px; height:100px;
	opacity:0.4;
}

.playbig:hover{
	opacity:0.8;
}

.playbig-alt{ background:url(../images/player/pausebigm.png);}

.screen-controls{
	cursor: pointer;
    height: auto;
    right: 0px;
    position: absolute;
    top: 0px;
    width: 32px;
	z-index:20;
}

.screen-controls .fullscreen{
	background:rgba(0,0,0,0.5);	
	float: left;
    padding:6px;
	border:1px solid #4d4d4d;
	margin-bottom:5px;
}

.screen-controls .cart{
	background:rgba(0,0,0,0.7);	
	float: left;
    border:1px solid #4d4d4d;
	padding:6px;
}

.screen-controls .fullscreen:hover{
	
}

.screen-controls .cart:hover{
	
}

.screen-controls .price{
	font-stretch:extra-condensed;
	text-align:right;
	background:rgba(255,255,255,0.7);
	padding-right:2px;	
}
.volume-icon{
    height: 20px;
    right: -6px;
    position: absolute;
    bottom: -29px;
    width: 112px;
	border-radius:4px;
}
.volume {
    height: 2px;
    right: 0px;
    position: absolute;
    bottom: -23px;
    width: 92px;
	background: #444;
	border-radius:4px;
}
.volume i{ position:absolute; left:-12px; top:-6px;}
.tracker {
    height: 3px;
    left: 0px;
    position: absolute;
    bottom: 0px;
    width: 100%;
	background:#c1c1c1;
}
.ui-slider-range {
    /*background: transparent url("../images/spr.png") no-repeat scroll 5px -222px;*/
	background:#900;
    height: 100%;
    position: absolute;
    top: 0; left:0px;
}
.volume .ui-slider-range{ }
.ui-slider-handle {
    cursor: pointer;
    height: 10px;
    margin-left: -5px;
    position: absolute;
    top: 2px;
    width: 10px;
    z-index: 2;
}
.volume .ui-slider-handle {
    /*background: url("../images/spr.png") no-repeat scroll -201px -188px rgba(0, 0, 0, 0);*/
	background:#fff;
    height: 10px;
    width: 10px;
	border:1px solid #444;
	border-radius:4px;
	margin-top:-6px;
	margin-left:-10px;
}
.playlist-m {
    background:none;
    border-radius: 0px;
    /*list-style-type: none;
    margin: 10px 0 0 0px;
    position: relative;
    width: auto;
    z-index: 1;
	padding:0px;*/
	width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0;
}
.playlist-m li {
	text-align:center;
    color: #333;
    cursor: pointer;
	background:none;
	border-bottom:1px solid #cccccc;
	border-top:none;
    /*margin: 5px 5px 0px 0px;
	width: 80px;
 height: 80px;*/
 /*background-image: url('http://strawberry-fest.org/wp-content/uploads/2012/01/Coca-Cola-logo.jpg');*/
 /*background-size: cover;*/
 display: block;	
 /*border-radius: 40px;
 -webkit-border-radius: 40px;
 -moz-border-radius: 40px;*/
 position:relative;
 /*opacity:0.7;*/
 margin-bottom:5px;
 box-shadow:0 0 20px #ccc;
}

.playlist-m li:first-of-type{ border-top:1px solid #cccccc;}

.playlist-m li:hover { 
	color: #D9534F;
    font-size: 1em;
	background:rgba(217, 83, 79, 0.12156862745098039);
}

.playlist-m li img{
	width: 50px;
 height: 50px !important;
/* border-radius: 20px;
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;*/
 display: inline-block;	
 /*margin-top:-70px;*/
 opacity:1; margin-right:5px;
 border-radius:8px;
}

.playlist-m li.playing{ /*color:#D9534F; font-size:1.2em;*/
	/*border: 1px solid #d9534f;*/ color: #D9534F; box-shadow:0 0 20px #D9534F;
    font-size: 1em; background: rgba(217, 83, 79, 0.12156862745098039);
}

.playlist-m li.playing:hover{
	color: #D9534F;
    font-size: 1em;
	background:rgba(255, 255, 255, 0.12156862745098039);
}

.playlist-m li.playing img{
    /*font-weight: bold;*/
	opacity:1.0; /*border:2px solid #333;*/
}
.playlist-m li p{ display:inline-block;}

.playlist-m li span{ position:absolute; top:90px; left:10px;}
/*.playlist li.prev{ background:url(../images/player/prev.png) left no-repeat; width:24px;}
.playlist li.next{ background:url(../images/player/next.png) right no-repeat; width:24px;}*/

.playlist-cont{ display:block; margin-top:10px;    border: 1px solid #ccc;
    padding: 5px;}
.playlist-cont h4{     border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}
/*.prev{ background:url(../images/player/prev.png) left no-repeat; width:24px; height:80px; display:inline-block;}
.next{ background:url(../images/player/next.png) right no-repeat; width:24px; height:80px; display:inline-block;}
*/

.playlist-nav{ 
	background: rgba(255,255,255,0.9);
    box-shadow: 0 0 10px 2px #eee;
    width: 50%;
    margin: 10px auto;
    padding: 4px 0;
	cursor:pointer;
}

.playlist-nav:hover{
	box-shadow: 0 0 5px 2px #eee;
}

@media (max-width: 1199px) {
	.playbig{
		display:block;
	}
}

@media(max-width:767px) {
	body, html{ overflow-x:hidden;}
	.player {
    	height: 336px;
		/*background-size:cover;*/
		background-position:center;
		background-repeat:no-repeat;
		background-size:auto;
	}
	.cover {
    	height: 290px;
	}
	.volume {
		width:70px; display:none;
	}
	.volume-icon{
		right: -28px; display:none;
	}
	.controls {
		left: 0px;
	}
	.title, .artist { left: 130px;}
	.pl { right: 10px;}	
	.playlist-m li {
		width: 100%;
	 	height: auto;
	}
}

@media(max-width:459px) {
	.playlist-m li img{
		/*display:none !important;*/
	}
	.player h1{ font-size:24px; margin-top:0px;}
	.player h3{ font-size:18px;}
	.controls{ width:100%;}
	.controls span.fa{ font-size:1.5em; margin:0px 0px;}
}