/**
 * Version 1.3
 * green: #a7ec02;#7dd40a;#6ebd09
 * orange: #ff4d00;
 */

@CHARSET "ISO-8859-1";
*{
font-family: HelveticaNeue-Light, HelveticaLight, Helvetica, DroidSans, Arial, sans-serif;
font-weight:lighter;
}

html, body {
height: 100%;
margin: 0;
}

#appbody{
	background:#282828;
}

#app-container{
	position:relative;
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	background:white;
}

#app-container:after{
	clear:both;
	display:table;
	content:" ";
}

a{
text-decoration:none;
}

header{
display:none;
position:absolute;
z-index:2;
top:0; left:0;
width:100%;
height:48px;
background:#000;
border-bottom:2px solid #000;
padding:0;
font-size:16px;
/*text-shadow:0 1px 1px #888888;*/
}

header.radios{
border-bottom:2px solid #ff4d00;
}

header.mix{
border-bottom:2px solid #6ebd09;
}

header.mzm-home-part{
height:90px;
border-bottom:0;
}

header.mzm-home-part #logo-home{
position:fixed;
top:16px;
left:50%;
margin-left:-80px;
}

footer {
position:absolute;
z-index:2;
/*bottom:0; left:0;*/
top:400px; left:0;
width:100%;
height:68px;
background:#000;
padding:0;
display:none;
}

.mzm-content{
display:none;
position:absolute;
top:50px;
/*bottom:50px;*/
left:0;
width:100%;
overflow-x:hidden;
overflow-y:auto;
padding-bottom:32px;
}

.mzm-home-content{
position:absolute;
top:90px;
/*bottom:49px;*/
left:0;
width:100%;
overflow:hidden;
background:#000;
}

.player-content{
overflow-y:hidden;
}

.search-content{
/*top:116px;*/
}

#error-content{
background:#000;
width:100%;
height:100%;
}

#error-content > div{
width:400px;
position:absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-125px;
color:#fff;
font-size:16px;
text-align:center;
}

#error-content > div img{
display:block;
margin-left:120px;
margin-bottom:24px;
}

#error-content > div a{
color:#fff;
font-size:14px;
}

#home-nav{
position:absolute;
top:0;left;0;
z-index:1;
}

.mzm-home-nav{
display:block;
background:#000;
width:124px;
height:54px;
padding-top:16px;
padding-left:24px;
color:#eeeeee;
white-space:nowrap;
position:absolute;
top:0;left;0;
font-size:18px;
border:4px solid #000;
}
.mzm-home-nav .ico{
font-size:32px;
}
.mzm-home-nav .l2{
display:block;
font-size:14px;
}

.mzm-home-nav-s{
padding-top:8px;
padding-left:8px;
width:62px;
}

.mzm-home-nav-s .l60p{
display:block;
font-size:0.75em;
}

.mzm-home-nav-s .l50p{
display:block;
font-size:0.66em;
}

#home-nav-radios,
#home-nav-mix{
display:none;
}

#home-nav-radios{
background:#ff4d00;
}
#home-nav-radios:hover{
background:#ff5e1a;
}

#home-nav-mix{
background:#6ebd09;
}
#home-nav-mix:hover{
background:#7ed60a;
}

#home-radios{
position:absolute;
top:0;left;0;
z-index:0;
}

.home-cover{
position:absolute;
overflow:hidden;
width:70px;
height:70px;
top:0;left;0;
border:4px solid #000;
}

.home-cover img{
margin:-2px;
}

.home-cover a{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}

.home-cover a:hover{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}

.mzm-scroller{
padding:8px;
padding-bottom:100px;
/*
background: no-repeat -moz-linear-gradient(top, #bdbbb3, #bdbbb3);
-moz-background-size:100% 44px;
background: no-repeat -webkit-gradient(linear, left top, left bottom, from(#bdbbb3), to(#bdbbb3));
-webkit-background-size:100% 44px;
*/
}

.search-content .mzm-scroller{
background:none;
}

header ul{
/*
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient: horizontal;
*/
list-style:none;
padding: 0;
margin: 0;
position: relative;
border: 0;
overflow:hidden;
}
header li{
text-align: center;
margin: 0;
border-right-width: 0;
max-width: 100%;
width:40%;
float:left;
}
header li.hometab{
width:20%;
padding-top:4px;
}

header li a{
display:block;
line-height:48px;
text-transform:uppercase;
border:0;
color:#fff;
}
header li:hover a{
background:#333;
}

#nav-home{
line-height:26px;
}

header li a#nav-mix.active{
-moz-box-shadow:inset 0 -4px #6ebd09;
-webkit-box-shadow:inset 0 -4px #6ebd09;
box-shadow:inset 0 -4px #6ebd09;
}

header li:hover a#nav-mix{
-moz-box-shadow:inset 0 -4px #7ed60a;
-webkit-box-shadow:inset 0 -4px #7ed60a;
box-shadow:inset 0 -4px #7ed60a;
}

header li a#nav-radios.active{
-moz-box-shadow:inset 0 -4px #ff4d00;
-webkit-box-shadow:inset 0 -4px #ff4d00;
box-shadow:inset 0 -4px #ff4d00;
}

header li:hover a#nav-radios{
-moz-box-shadow:inset 0 -4px #ff5e1a;
-webkit-box-shadow:inset 0 -4px #ff5e1a;
box-shadow:inset 0 -4px #ff5e1a;
}

header li a#nav-home.active,
header li:hover a#nav-home{
-moz-box-shadow:inset 0 -4px white;
-webkit-box-shadow:inset 0 -4px white;
box-shadow:inset 0 -4px white;
}

.mzm-content-head{
height:60px;
}

.mzm-head-btn{
background:#000;
margin:0;
height:40px;
text-decoration:none;
display:block;
/*
-moz-box-shadow: 0px 5px 5px #ddd;
-webkit-box-shadow: 0px 5px 5px #ddd;
box-shadow: 0px 5px 5px #ddd;
*/
}

.mzm-head-btn:hover{
background:#333;
}

.mzm-head-btn-label{
float:left;
width:100%;
background:url(/style/images/nav-forward.png) top right no-repeat;
}
.mzm-head-btn-label div{
height:28px;
color:#eeeeee;
text-shadow:none;
font-size:16px;
padding-top:12px;
padding-left:12px;
padding-right:8px;
white-space:nowrap;
overflow:hidden;
}

.mzm-head-btn-back .mzm-head-btn-label{
/*float:right;*/
background:url(/style/images/nav-back.png) top left no-repeat;
}

.mzm-head-btn-back .mzm-head-btn-label div{
padding-left:48px;
}

.mzm-list{
margin:0;
padding:0;
list-style-type:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}

.mzm-list-next{
margin-top:32px;
white-space:nowrap;
}

.mzm-list li{
/*
clear:both;
border-top:1px solid #c1bfb7;
*/
white-space:nowrap;
overflow:hidden;
width:50%;
display:inline-block;
box-sizing:border-box;
padding:8px;
}

.mzm-list-current li{
width:100% !important;
}

.mzm-list-next li{
width:33.33%;
}

.mzm-list li span{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-ms-text-overflow:ellipsis;
width:60%;
}
.mzm-list li a{
display:block;
color:white;
background:black;
text-decoration:none;
padding:8px;
padding-bottom:0;
}
.mzm-list li:hover a{
background:#333;
}

.mzm-list li a:active{
/*background:#eeeeee;*/
}

.mzm-list li.mzm-list-head{
height:28px;
background:none;
display:block;
width:100%;
text-transform:uppercase;
font-family: HelveticaNeue, DroidSans-Bold, Helvetica, Arial, sans-serif;
font-size:16px;
border-top:0;
}

#mix-list-results{
display:none;
}

.player-active{
background:red;
}

.mzm-list li img{
/*
float:left;
margin-right:12px;
*/
display:block;
width:100%;
height:auto;
}
.mzm-list li span{
/*float:left;
padding-top:22px;*/
display:block;
width:100%;
box-sizing:border-box;
line-height:40px;
}

.mzm-list li div.artist,
.mzm-list li a.artist,
.mzm-list li a.artist:visited{
}
.mzm-list li div.artist img,
.mzm-list li a.artist img{
}
.mzm-list li div.artist span,
.mzm-list li a.artist span{
}

.artist img{
	border-radius:50%;
}

.opaquebg50{
background: rgba(0, 0, 0, 0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000, endColorstr=#4c000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000, endColorstr=#4c000000)";
}

.opacity50{
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5;
filter:alpha(opacity=50);
}

.opacity70{
opacity:0.7;
-moz-opacity:0.7;
-khtml-opacity:0.7;
filter:alpha(opacity=70);
}

.opacity80{
opacity:0.8;
-moz-opacity:0.8;
-khtml-opacity:0.8;
filter:alpha(opacity=80);
}

#searchbox{
display:none;
position:absolute;
top:50px;
left:0;
width:100%;
background:#000;
}

.searchbox-field{
margin:8px;
padding-right:14px;
}

.searchbox-field input{
-webkit-appearance:none;
-webkit-box-shadow: 0 0 1px 0 rgba(255,255,255,0.9),inset 0 2px 3px #bebdbe;
box-shadow: 0 0 1px 0 rgba(255,255,255,0.9),inset 0 2px 3px #bedbbe;
border-radius:0;
width:100%;
padding:6px;
height:28px;
font-size:18px;
color:#888888;
border:0;
}

.searchbox-btn{
position:absolute;
top:12px;
right:12px;
width:44px;
height:24px;
padding-top:8px;
background:#fff;
color:#000;
text-align:center;
cursor:pointer;
}

#ctrls{
display:none;
position:absolute;
height:68px;
width:100%;
top:0;
left:0;
}

#progress{
height:4px;
background:#dddddd;
}

#cursor{
height:4px;
width:0;
background:#a7ec02;
}

#ctrl-msg{
position:absolute;
bottom:66px;
left:0;
width:100%;
display:none;
}

#ctrl-msg div{
cursor:pointer;
margin:8px;
line-height:20px;
padding:8px;
text-align:center;
color:#fff;
background:#ff4d00 url(/style/images/close.png) top right no-repeat;
}

.ctrl{
width:36px;
height:36px;
opacity:0.85;
-moz-opacity:0.85;
-khtml-opacity:0.85;
filter:alpha(opacity=85);
float:left;
}

.ctrl:hover{
opacity:1;
-moz-opacity:1;
-khtml-opacity:1;
filter:alpha(opacity=100);
}

#ctrl-play,
#ctrl-pause,
#ctrl-next{
position:absolute;
bottom:13px;
left:50%;
margin-left:-18px;
}

#ctrl-pause{
display:none;
}

#ctrl-next{
margin-left:38px;
}

#ctrl-info{
position:absolute;
background:url(/style/images/info-player-list.png) top right no-repeat;
width:19px;
height:0;
right:64px;
bottom:17px;
display:none;
cursor:pointer;
}

#ctrl-cover{
position:absolute;
width:64px;
height:64px;
left:0;
bottom:0;
background:#282828;
background-size:64px;
display:none;
cursor:pointer;
}

#ctrl-meta{
position:absolute;
height:40px;
width:calc(100% - 160px);
left:140px;
bottom:7px;
display:none;
}

#ctrl-meta span{
display:inline-block;
float:left;
color:#ffffff;
font-size:12px;
max-width:100%;
white-space:nowrap;
overflow-x:hidden;
text-overflow:ellipsis;
}

.ctrl-init{
cursor:pointer;
position:fixed;
left:50%;
top:50%;
padding-top:16px;
margin-top:-16px;
margin-left:-100px;
width:200px;
height:162px;
text-align:center;
display:none;
z-index:200;
}

.ctrl-init-overlay{
position:absolute;
background:#fff;
border-radius: 9px;
-moz-border-radius:9px;
margin-top:-40px;
top:50%;
}

.ctrl-init div{
font-size:16px;
line-height:32px;
}

.ctrl-overlay{
position:fixed;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
background:#ffffff;
}

.player-collapsed #ctrl-play,
.player-collapsed #ctrl-pause,
.player-collapsed #ctrl-next{
left:100px;
}

.player-collapsed #ctrl-next{
left:148px;
}

.player-collapsed #ctrl-cover,
.player-collapsed #ctrl-info,
.player-collapsed #ctrl-meta{
display:block;
}

.playtime{
display:block;
float:left;
width:25%;
text-align:center;
line-height:40px;
}


.mzm-list li .track-playing span.playing{
width:13px;
height:32px;
padding:0;
padding-right:4px;
display:inline-block;
line-height:auto;
}

.mzm-list li .track-playing span.meta{
padding-top:6px;
display:inline-block;
line-height:auto;
}

.mzm-list li .track-playing span.meta span,
.mzm-list li .track-playing span.meta span{
float:none;
width:200px;
height:20px;
padding:0;
overflow:hidden;
white-space:nowrap;
line-height:initial;
}

.mzm-list li .track-playing span.artists{
font-size:12px;
padding-top:0;
}

.mzm-list li span.timer{
background:#a7ec02;
width:56px;
height:28px;
font-size:18px;
line-height:28px;
float:right;
padding:0;
padding-right:8px;
margin-top:8px;
text-align:right;
}

.ctrl-enabled{
cursor: pointer;
}

.ctrl-disabled,
.ctrl-disabled:hover{
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5;
filter:alpha(opacity=50);
}

#loader{
display:none;
z-index:500;
position:fixed;
left:50%;
top:50%;
margin-left:-24px;
margin-top:-24px;
}

div.spinner{
width: 48px;
height: 48px;
}

div.spinner div {
width: 12%;
height: 26%;
background: #000;
position: absolute;
left: 44.5%;
top: 37%;
opacity: 0;
-webkit-animation: fade 1s linear infinite;
-webkit-border-radius: 50px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

div.wspinner div {
background: #fff;
}

div.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;}    
div.spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;}
div.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;}
div.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;}
div.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;}
div.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;}
div.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;}
div.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
div.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;}
div.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;}
div.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;}
div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;}

@-webkit-keyframes fade {
from {opacity: 1;}
to {opacity: 0.25;}
}

.coveroverlay{
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
/*height:100%;*/
background:#ffffff;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background-image: linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}

/*
 * Images
 */

#logo-home{
width:160px;
height:63px;
border:0;
background-image:url(/style/images/logo-home.png);
}

#logo-mini{
width:40px;
height:37px;
border:0;
background-image:url(/style/images/logo-mini.png);
}

#ic-next{
width:36px;
height:36px;
border:0;
background-image:url(/style/images/next-36.png);
}

#ic-pause{
width:36px;
height:36px;
border:0;
background-image:url(/style/images/pause-36.png);
}

#ic-play{
width:36px;
height:36px;
border:0;
background-image:url(/style/images/play-36.png);
}

#ic-playbig{
width:114px;
height:114px;
border:0;
background-image:url(/style/images/play-114.png);
}

#ic-playinline{
width:9px;
height:16px;
border:0;
background-image:url(/style/images/play-inline.png);
}

#ic-info{
width:27px;
height:27px;
border:0;
background-image:url(/style/images/info.png);
}

header a.hdrlr{
position:absolute;
top:12px;
right:12px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
}

header a.hdrlr:hover{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}

#ftlinks{
font-size:12px;
}

#ftlinks .ftll{
position:absolute;
top:18px;
left:16px;
}

#ftlinks .ftlr{
position:absolute;
top:12px;
right:12px;
}

#ftlinks a{
color:#fff;
}

#ftlinks .ftpromo{
display:block;
width:300px;
height:28px;
line-height:28px;
position:absolute;
left:50%;
top:8px;
margin-left:-150px;
text-align:center;
background-color:#4a86ff;
-webkit-border-radius: 14px 14px 14px 14px;
-moz-border-radius: 14px 14px 14px 14px;
-o-border-radius: 14px 14px 14px 14px;
border-radius: 14px 14px 14px 14px;
}

#ftlinks .ftunsub{
display:block;
position:absolute;
width:200px;
left:50%;
bottom:8px;
margin-left:-100px;
text-align:center;
font-size:10px;
}

#ftlinks p.links{
color:#bbb;
display:block;
width:100%;
margin-top:16px;
text-align: center;
font-size:10px;
text-transform:uppercase;
}

#ftlinks .ftinfo{
color:#bbb;
font-size:10px;
display:block;
position:absolute;
width:100%;
left:50%;
bottom:24px;
margin-left:-50%;
text-align:center;
font-size:10px;
}

@media (min-width: 520px){
	.mzm-list li{
		width:25%;
	}
	.mzm-list-next li{
		width:20%;
	}
	header ul{
		display:flex;
	}
	header li{
		width:auto !important;
	}
	header li:first-child{
		order:2;
	}
	header li:nth-child(2){
		order:1;
	}
	header li:nth-child(3){
		order:3;
	}
	header li a{
		padding:0 32px;
	}
	a#nav-home{
		padding:0 16px;
	}
	#ctrl-play,
	#ctrl-pause,
	#ctrl-next{
		left:50% !important;
	}
	#ctrl-meta{
		width:calc(50% - 100px);
		left:80px;
	}
}
/*
@media (min-width: 1080px){
	.mzm-list li{
		width:16.66%;
	}
	.mzm-list-next li{
		width:12.5%;
	}
}
*/
@media all and (-webkit-min-device-pixel-ratio : 1.5),
all and (-moz-min-device-pixel-ratio : 1.5),
all and (-o-min-device-pixel-ratio : 1.5/1),
all and (-ms-min-device-pixel-ratio : 1.5),
all and (min-device-pixel-ratio : 1.5){
	#logo-home{
	background-image:url('/style/images/logo-home@2x.png');
	background-size:100%;
	}
	#logo-mini{
	background-image:url('/style/images/logo-mini@2x.png');
	background-size:100%;
	}
	#ic-next{
	background-image:url(/style/images/next-36@2x.png);
	background-size:100%;
	}
	#ic-pause{
	background-image:url(/style/images/pause-36@2x.png);
	background-size:100%;
	}
	#ic-play{
	background-image:url(/style/images/play-36@2x.png);
	background-size:100%;
	}
	#ic-playbig{
	background-image:url(/style/images/play-114@2x.png);
	background-size:100%;
	}
	#ic-playinline{
	background-image:url(/style/images/play-inline@2x.png);
	background-size:100%;
	}
	#ic-info{
	background-image:url(/style/images/info@2x.png);
	background-size:100%;
	}
	#ctrl-info{
	background-image:url(/style/images/info-player-list@2x.png);
	background-size:100%;
	}
	.mzm-head-btn-label{
	background-image:url(/style/images/nav-forward@2x.png);
	background-size:34px 40px;
	}
	.mzm-head-btn-back .mzm-head-btn-label{
	background-image:url(/style/images/nav-back@2x.png);
	background-size:34px 40px;
	}
}