/* ============================================================================================== 
This copyright notice must be kept untouched in the stylesheet at all times.
The original version of this stylesheet and the associated (x)html 
is available at http://www.script-tutorials.com/html5-audio-player-with-playlist/
Copyright (c) Script Tutorials. All rights reserved.
This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
================================================================================================= */

/* HTML5 Audio player with playlist styles */
.player {
    position: relative;
    width: 100%;
    z-index: 2;
	height:65px;
}

.cover {
	background-color: #333;
    height: 40px;
    position: relative;
    width: 100%;
	overflow:hidden;
	background-image:  linear-gradient(to bottom, #333, #222,black);
}
.cover img {
	position:relative;
	top:0px;
	left:0px;
	display:none;
}
.controls {
    cursor: pointer;
    height: 15px;
    position: relative;
    width: 100%;
	border-top: 1px solid #999;
}

.volume .ui-slider-handle, .controls .play, .controls .pause, .controls .rew, .controls .fwd, .controls .volico {
    background: transparent url("../site_images/player-sprite.png") no-repeat scroll 0 0;
}

.controls .play, .controls .pause, .controls .rew, .controls .fwd, .controls .volico {
    float: left;
    height: 100%;
    width: 17px;
}

.controls .play 	{ background-position: 0px 0px; }
.controls .rew 	{ background-position: -17px 0px;}
.controls .fwd 	{ background-position: -34px 0px;}
.controls .pause { background-position: -51px 0px; display: none; }
.controls .play:hover 	{ background-position:   0px -15px;}
.controls .rew:hover 	{ background-position: -17px -15px;}
.controls .fwd:hover 	{ background-position: -34px -15px;}
.controls .pause:hover 	{ background-position: -51px -15px;}


.controls .volico {
    background-position: -67px 0px;
	float:right;
	width: 20px;
	margin-right:10px;
}
#plist { height:240px;}

.tracker {
    height: 8px;
    position: relative;
    width: 100%;
	float:left;
	border-top: 2px solid black;
	margin-bottom: 15px;
	background-color:black;
}
.tracker:hover {
	cursor:pointer;
}

@media (max-width: 380px), (max-device-width: 380px) { 
	.controls { height:60px; background-image:  linear-gradient(to bottom, rgb(57,58,78), rgb(35,36,56), black);}
	.controls .volico, .volume {display:none;}
	.player { height:110px;}
	.player_space {height:430px;}
	#plist { height:300px;}
	.controls .play, .controls .pause, .controls .rew, .controls .fwd { width:32%; background: transparent url("../site_images/player-buttons-mob.png") no-repeat scroll 0 0;}
	.controls .fwd { width:33%;}
	.controls .play, .controls .pause  { border-left: 1px solid #888; border-right: 2px solid black; }
	.controls .rew   { border-right: 2px solid black; }
	.controls .fwd  { border-left: 1px solid #888;  }
	.playlist li { border-top: 1px solid #555; border-bottom: 1px solid black; }
	
	.controls .play { background-position: 0px  0px;}
	.controls .rew { background-position: -90px 0px;}
	.controls .fwd { background-position: -180px 0px;}
	.controls .pause {background-position: -270px 0px; display: none;}
	
	.controls .play:hover { background-position: 0px  -60px;}
	.controls .rew:hover { background-position: -90px -60px;}
	.controls .fwd:hover{ background-position: -180px -60px;}
	.controls .pause:hover {background-position: -270px -60px;}
	
	.tracker 	{height: 8px;margin-top:8px;}
	.player 		{height:73px;}
}


.hidden {
    display: none;
}
.controls .visible {
    display: block;
}
.volume {
    height: 15px;
	position:relative;
	float:right;
    width: 97px;
}


.ui-slider-range {
	background-color: #0080FF;
    height: 100%;
    position: absolute;
    top: 0;
}
.volume .ui-slider-range {
	top: 5px;
	height:5px
}

.ui-slider-handle {
    cursor: pointer;
    height: 10px;
    margin-left: -10px;
    position: absolute;
    top: 2px;
    width: 10px;
    z-index: 2;
}
.volume .ui-slider-handle {
	background-position: -87px 0px;
    height: 13px;
    width: 13px;
}


.playlist {
	position:relative;
	overflow:hidden;
	margin:0 !important;
	padding: 0 !important;
	padding: 0px 5px 10px 5px;
    position: relative;
    width: 100%;
    z-index: 1;
}
.playlist li {
    color: #EEEEEE;
    cursor: pointer;
	list-style-image: none;
	list-style-type: none;
	text-align: left;
	font-size:12px;
	font-style:italic;
}
.playlist li.active div, .playlist li.active  {
    color:black;
	background-color:#ccc;
}
.playlist li:hover div, .playlist li:hover {
	background-color:#0080ff;
}
.pgenre, .ptitle {
	position:relative;
	float:left;
	font-size:14px;
	font-style:normal;
}
.pgenre, .ptime { font-size: 12px; font-style:italic; }

@media (max-width: 1233px), (max-device-width: 1233px) { 
	.playlist li { font-size:12px; }
	.pgenre, .ptime { font-size: 11px;  }
}
@media (max-width: 1127px), (max-device-width: 1127px) { 
	.ptitle {clear:both;width:100%;margin-top:5px;}	
	.pgenre, .ptime {font-size:11px;font-style:italic; }	
	.playlist li { border-top: 1px solid #555; border-bottom: 1px solid black; padding-bottom:3px;}
}
@media (max-width: 910px), (max-device-width: 910px) { 
	.ptitle {float:left;width:auto;font-size:11px;margin-top:0px;}	
	.pgenre, .ptime {font-size:11px;font-style:normal;}
	.playlist li {padding: 5px 0;}
}
@media (max-width: 822px), (max-device-width: 822px) { 
	.ptitle {float:left;width:auto;font-size:10px;;margin-top:0px;}	
	.pgenre, .ptime {font-size:10px;font-style:normal;}
	.playlist li {padding: 5px 0;}
}
@media (max-width: 797px), (max-device-width: 797px) { 
	.ptitle {clear:both;width:100%;font-size:14px;margin-top:5px;}	
	.pgenre, .ptime {font-size:11px;font-style:italic;}	
}