/*

HOW TO CREATE AN AUDIO PLAYER [TUTORIAL]

"How to create an Audio Player [Tutorial]" was specially made for DesignModo by our friend Valeriu Timbuc.

Links:
https://vtimbuc.net/
https://twitter.com/vtimbuc
https://designmodo.com
https://vladimirkudinov.com

*/
.audio-player,
.audio-player div,
.audio-player h1,
.audio-player a,
.audio-player img,
.audio-player span,
.audio-player button {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

div.audio-player {
background: url(blakgroud.png) no-repeat;
	position: absolute;
	width: 270px;
	height: 130px;
	margin:19px;

}

/* Title */
.audio-player h1 {
	position: absolute;
	top: 10px;
	left: 40px;
	font-size: 15px;
	color: #ececec;

}
.logo {
	background: url(logo_mini.png) no-repeat;
	position: absolute;
	top: -17px; 
	left: -7px;
	width: 130px;
	height: 40px;
	z-index:1;
}
.html {
	background: url(html.png) no-repeat;
	position: absolute;
	top: 2px; 
	left: 147px;
	width: 90px;
	height: 23px;
	z-index:1;
}
.blik {
	background: url(blik.png) no-repeat;
	position: absolute;  
	width: 130px;
	height: 70px;    
	top: 24px; 
	left:2px;
}
.now {
	font-family: Tahoma, Arial;
	position: absolute;
	top: 35px;
	left: 55px;
	font-size: 11px;
	color: #58a3e8;
	text-shadow: 1px 1px 1px rgba(0,0,0, .5);
}
.song {
	font-family: Tahoma, Arial;
	position: absolute;
	top: 43px;
	left: 52px;
	font-size: 14px;
	color: #58a3e8;
	padding:5px;
	

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

}
/* Cover */
.audio-player .cover {
	position: absolute;
	top: 0;
	left: 0;
}


.player-container {
   	margin-left:10px;
	top:12px;
}
#jp_container_2 {
	display: inline-block;
	position:absolute;
	margin-top:20px;
	margin-left:7px;
}

.player-container > div {
    float: left;
    margin-right: 30px;
}
.jp-play {
background-image: url('play_stop.png');
position:absolute;
	width: 35px;
	height: 45px;
top:30px;
left:5px;
float:left;
cursor:pointer;
}

.jp-pause {

	background: transparent url(play_stop.png) 0 0;
	background-position:0 -55px;
position:absolute;
	width: 35px;
	height: 45px;
	top: 30px;
	left: 5px;
float:left;
cursor:pointer;
}


#player .streams {
	position:absolute;
	margin-top:50px;
	margin-left:45px;
	padding:5px 0 0;
	font:10px/15px 'PFDinDisplayPro-Reg', sans-serif;
	color:#1E90FF;
	overflow:hidden;
}

#player .streams span {
	float:left;
	margin:0 8px 0 0;
}

#player .streams a {
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	float:left;
	color:#1E90FF;
	text-decoration:none;
	height:15px;
	padding:0 5px;
	margin:0 4px 0 0;
	position:relative;
}
#player .streams a:hover {color:#fff;} 

#player .streams a.active {
	background:#58a3e8;
	color:#fff;
}

.jp-volume-slider {
position:absolute;
top:98px;
left:10px;
width:200px;
height:12px;	
}
.ui-slider .ui-slider-handle { 
position: absolute; 
z-index: 2; 
width:0px; 
height: 0px; 
margin-top: 1px; 
cursor: default; 
background-image: url(https://gtiradio.ru/player/handle.png);
cursor:pointer;
height:12px; 
width:12px;
}
.ui-slider .ui-slider-range { 
position: absolute; z-index: 1; 
font-size: .7em; 
display: block; 
border: 0; 
background-position: 0 0; 
}
.ui-slider-horizontal { 
height: 7px; 
}
.ui-slider-horizontal .ui-slider-handle { 
top: -4px; 
margin-left:-6px; 
outline: none;
}
.ui-slider-horizontal .ui-slider-range-min { 
left: 0; 
}
.ui-slider-horizontal .ui-slider-range-max { 
right: 0; 
}
.ui-widget .ui-widget { 
font-size: 1em; 
}
.ui-widget-content {  
width: 180px;
	height: 8px;
	background: #212227;

	-webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
	-moz-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
	box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;

}
.ui-widget-header { 
	position: absolute;
	width: 0;
	height: 6px;
	top: 1px;
	left: 2px;
	background: #58a3e8;
	-webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
	-moz-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
	box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {  
}