body{margin:0px;}
.transparent{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -moz-opacity: 0.75; -khtml-opacity: 0.75; opacity: 0.75; }
/* Background color and resizes */
.webPlayer .controls {display: block; position: relative; height: 202px; color: #555555; padding: 5px 15px; z-index: 996;border-radius: 5px}
#MiniPlayer{ display:block; width:320px; height:212px; padding:1px; background: url() #transparent; border-radius: 5px}

.gray_gradient_bg_x{
  background: #111111; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(-100deg, #3E4136, #303229,#111111); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(-100deg, #3E4136, #303229,#111111); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(-100deg, #3E4136, #303229,#111111); /* For Firefox 3.6 to 15 */
  background: linear-gradient(-100deg, #3E4136, #303229,#111111); /* Standard syntax */
}
.gray_gradient_bg{
  background: #111111; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(50% 100px,#3E4136, #303229, #20211B,#111111); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(50% 100px,#3E4136, #303229, #20211B,#111111); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(50% 100px,#3E4136, #303229, #20211B,#111111); /* For Firefox 3.6 to 15 */
  background: radial-gradient(at 50% 100px,#3E4136, #303229, #20211B,#111111); /* Standard syntax */
}

/* Background color and resizes */ 

.webPlayer {display: inline-block; position: relative; font-family: 'Segoe UI', Verdana, sans-serif; clear: both; margin-bottom: 10px; line-height: 1.4; font-size: 13px; box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 0px rgba(0, 0, 0, 0.5); text-align: center; /* Chrome FIX for full screen */ }
.webPlayer a.smooth { transition: all 0.1s linear; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; }
.webPlayer.jp-video-full > .controls { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0.8; z-index: 1000; }
.webPlayer.jp-video-full, .webPlayer.jp-video-full object, .webPlayer.jp-video-full video { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 999; }
.webPlayer.jp-video-full > .playerScreen, .webPlayer.jp-video-full > .playerScreen > .video-play { z-index: 1000; }
.webPlayer .playerScreen { cursor: pointer; } 
.webPlayer .playerScreen .video-play { display: block; position: absolute; z-index: 990; width: 100%; top: 0; left: 0; right: 0; bottom: 50px; background: url("../img/preimg.light.png") no-repeat center center; opacity: 0.4; background-color: rgba(0, 0, 0, 0.4); }

.webPlayer .controls .leftblock { position: absolute; left: 10px; width: 50px; bottom:-15px;}
.webPlayer .controls .leftblock .play { display: block; width: 40px; height: 40px; background: url("../img/play.png") no-repeat}
.webPlayer .controls .leftblock .play:hover { opacity: 1; }
.webPlayer .controls .leftblock .pause { display: block; width: 40px; height: 40px; background: url("../img/pause.png") no-repeat; }
.webPlayer .controls .leftblock .pause:hover { opacity: 1; }

.webPlayer .controls  .album_cover{ display:block; position: absolute; left: 10px; width: 72px; height:72px; top:65px; background-color:#808080} 
.webPlayer .controls .song_title{display:block;width:200px;position: absolute; left: 97px;top:70px;color:#fff;font-weight:bold;font-size:10px;font-style:italic; text-align:left}
.webPlayer .controls .ticker{border:0px solid #ff0000;position: absolute; left: 10px;top:140px;color:#c0c0c0;}
.webPlayer .controls .song_artist{border:0px solid #ff0000;color:#c0c0c0;font-size:20px;font-family: 'BPdotsUnicaseSquare'}

.webPlayer .controls .live{text-align:right;display:block;width:50px;position: absolute; right: 12px;top:28px;color:#FFFFFF;font-weight:bold;font-size:11px;}

.webPlayer .controls .stationname{position:absolute;right:10px;top:4px;color:#fff;font-size:10px;}
.webPlayer .controls .brandname{position:absolute;right:10px;bottom:11px;color:#fff;font-size:10px;} 

#spectrum{
	position: absolute; left: 82px; top:89px;
}

.webPlayer .controls .progress { position: relative; display: block; margin: 0 130px 0 50px; text-align: left; }
.webPlayer .controls .progress span { font-size: 12px; margin-left: 1px; color: #ffffff; }
.webPlayer .controls .progress .progressbar { display: block; height: 6px; background-color: #0a0000; background: rgba(255, 255, 255, 0.05); margin: 2.5px 0; }
.webPlayer .controls .progress .progressbar .seekBar { position: relative; display: block; cursor: pointer; padding: 1px; background: rgba(255, 255, 255, 0.1); }
.webPlayer .controls .progress .progressbar .seekBar .playBar { display: block; height: 2px; padding: 0; background: #f76c04; }
.webPlayer .controls .progress .progressbar .seekBar a { display: block; position: absolute; top: -2px; width: 8px; height: 10px; border-radius: 5px; background: #ffffff; margin-left: -3px; }
.webPlayer .controls .progress .progressbar .seekBar a div { width: 10px; height: 10px; }


.webPlayer .controls .rightblock {position:absolute; right:100px; width: 300px; bottom:30px}
.webPlayer .controls .rightblock .volicon {position:absolute; left:-50px; top:5px; display: block; width: 15px; height: 15px; background-size:contain; background-image: url("../img/speaker.svg") }

.webPlayer .controls .rightblock .volumeBar { display: block; position: absolute; height: 4px; background-color: #c0c0c0; background: rgba(200, 200, 200, 0.75); width: 70px; top: 10px; left: -20px; cursor: pointer; }
.webPlayer .controls .rightblock .volumeBar .currentVolume { position: relative; height: 3px; padding: 1px; }
.webPlayer .controls .rightblock .volumeBar .currentVolume .curvol { display: block; height: 3px; padding: 0; background: #ffffff; }
.webPlayer .controls .rightblock .volumeBar .currentVolume a { display: block; position: absolute; top: -2px; margin-left: -3px; width: 9px; height: 9px; border-radius: 5px; background: #ffffff; }
.webPlayer .controls .rightblock .volumeBar .currentVolume a div { display: block; width: 10px; height: 10px; }


.webPlayer .controls .social {display: block;position:absolute;right:0px; top:66px; width:30px;height:69px;background: rgba(255, 255, 255, 0.15); border-radius: 2px 0px 0px 2px }
.webPlayer .controls .social .fb{display: block;position:absolute;left:4px;top:4px; width:20px;height:20px; background: url("../img/icon-fb.png") no-repeat }
.webPlayer .controls .social .tw{display: block;position:absolute;left:4px;top:24px; width:20px;height:20px; background: url("../img/icon-twitter.png") no-repeat }
.webPlayer .controls .social .yt{display: block;position:absolute;left:4px;top:44px; width:20px;height:20px; background: url("../img/icon-instagram.png") no-repeat }


.webPlayer .controls .stationlist{position:absolute; right:10px; bottom:25px;}
.webPlayer .controls .stationlist select{width:100px;background-color:#646464;border:1px solid #c0c0c0;color:#fff}

.webPlayer .controls .horizontal_line{position:absolute;left:0px;top:100px;display:block;height:1px;width:300px;background-color:#53636f}

.webPlayer .controls .top_bar{position:absolute;left:0px;top:0px;display:block;height:70px;width:320px;background-color:#808080;background: url("../img/skin_top.png") no-repeat; border-radius: 5px 5px 0px 0px}
.webPlayer .controls .bottom_bar{position:absolute;left:0px;bottom:0px;display:block;height:35px;width:320px;background-color:#808080;background: url("../img/skin_bottom.png") no-repeat;border-radius: 0px 0px 5px 5px;border-top:1px solid #999999}
.webPlayer .controls .brand{position:absolute;left:51px;top:16px;display:block;height:35px;color:#fff;font-size:16px;font-weight:bold;font-style:italic}


.webPlayer.audioPlayer .progress { margin-right: 100px; }
.webPlayer.audioPlayer .rightblock { width: 85px; }
.webPlayer.audioPlayer .rightblock .volumeText { bottom: -42px; }
.webPlayer.audioPlayer .fullScreen { display: none; }
.webPlayer.audioPlayer .fullScreenOFF { display: none; }


@font-face {
    font-family: 'BPdotsUnicaseSquare';
    src: url('../BPdotsUnicaseSquare.ttf');
}




@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	  
	  
}
