@charset "utf-8";
/* CSS Document */
 
body {
	background-color: #022560;
	background: url("snow-bg-new.png");
	margin: 0;
	padding: 0;
	font: 14px 'Fira Sans Condensed', sans-serif;
	color: #333;
}
@media only screen and (min-device-width : 736px) {  body {width: 100%;  }  }

#page {width: 1176px;    margin: 0 auto; background: url("playerBG.png"); background-repeat: no-repeat;  background-position: left top;}
#iframe{width: 1176px;    float: left;margin: 0 auto; background: url("main-graphic.png?2") no-repeat;}

#context {float: right;  width: 682px;  margin-right: 47px;}

a {outline: none;}
p {  margin:0;  }

#main {  width: 100%;float:left;  }
#left,
#right {  height: 602px;  float: left;  position: relative;  box-sizing: border-box;  }
#logo {    float: right;  margin-right: 51px;  margin-top: 20px;}
#player {height: 130px; margin-bottom:30px; margin-left:40px; margin-top:10px}

/* player */
#player { width:310px; border-radius: 3px;}
#player p {color: #FFF;margin-left: 5px;}
#player a {color: #FFF; text-decoration: none;}
#player a:hover {text-decoration: underline;}

@media screen and (max-width: 800px) {
	#page {position: absolute; width:100%; height:auto;}
	#iframe {  width:100%;height: auto;}
	#player {  height: 130px;  width:100%;  margin-top: 60%;  margin-left: 0;  }
	#context {    margin-top: 404px;}
}

@media only screen and (max-device-width : 736px) {
	#page {position: absolute; width:100%; height:auto;}
	#iframe { width:100%;height: auto;}
	#player { height: 130px; width:100%; margin-top: 60%; margin-left: 0;	}
}

div.jp-error{ font-size: 0.8em; padding: 2px 0; }
div.jp-audio-stream {  width: auto;  padding: 10px 0 0 10px;  text-shadow: none;  }
div.jp-audio-stream .jp-interface {  height: 86px;  }
div.jp-interface ul.jp-controls {
    list-style-type: none;
    padding: 0px;
    overflow: hidden;
    width: 82px;
	height: 82px;
}
div.jp-type-single .jp-controls li a {  width: 82px;  border-left: none;  }
div.jp-interface ul.jp-controls a {
    height: 82px;
    margin: 0;
    padding: 0;
}
div.jp-type-single .jp-play {
    background: url(radio-play.png) no-repeat;
}
div.jp-type-single  .jp-play:hover {
	background: url(radio-play.png) no-repeat;
}
div.jp-type-single .jp-pause {
    background: url(radio-pause.png) no-repeat;
}
div.jp-type-single  .jp-pause:hover {
	background: url(radio-pause.png)  no-repeat;
}
div.jp-interface ul.jp-volume-controls {
    padding: 0;
    width: 210px;
    height: 22px;
    top: 30px;
    left: 97px;
}
div.jp-interface ul.jp-controls a.jp-mute, 
div.jp-interface ul.jp-controls a.jp-unmute, 
div.jp-interface ul.jp-controls a.jp-volume-max {
    width: 30px;
    height: 22px;
	background: url(radio-volume-down.png) no-repeat;
}
div.jp-interface ul.jp-controls a.jp-mute:hover {
	background: url(radio-volume-down.png) no-repeat;
}

div.jp-interface ul.jp-controls a.jp-unmute {
	background: url(radio-volume-down.png) no-repeat;
}

div.jp-interface ul.jp-controls a.jp-unmute:hover {
	background: url(radio-volume-down.png) no-repeat;
}

div.jp-interface ul.jp-controls a.jp-volume-max {
	background: url(radio-volume-up.png) no-repeat;
}

div.jp-interface ul.jp-controls a.jp-volume-max:hover {
	background: url(radio-volume-up.png) no-repeat;
}
div.jp-audio ul.jp-controls a.jp-volume-max,
div.jp-audio-stream ul.jp-controls a.jp-volume-max {
	top:0px;
	left: 143px;
}
div.jp-audio .jp-interface .jp-volume-bar,
div.jp-audio-stream .jp-interface .jp-volume-bar {
	top: 37px;
	left: 136px;
}

div.jp-audio,
div.jp-audio-stream,
div.jp-video {
 background-color:transparent;
}
div.jp-interface {
	background-color:transparent; 
}

.jp-volume-bar {
	background: url("volume-bar.png") 0px 0px repeat-x;
	height: 12px;
	padding: 0;
}
.jp-volume-bar-value {
	background: url("volume-bar.png") 0px -20px repeat-x;
	height: 12px;
}


/*@media screen and (min-width:768px) and (max-width:1269px){
	.glyphicon-play-circle {
		top: 40%;
		left: 35%;
		font-size: 3rem;
	}
}*/

/* Text style */
#context {
	color: #000;
	margin: 20px;
	margin-bottom: 30px;
	margin-top: 60px;
	padding: 0px 30px 0px 0;
	border-radius: 5px;
	font-size: 18px;
}
#context a {
	color:#FFF
}
#context p{
	margin-bottom:12px;
}