/*
 * jPlayer Skin
 * Responsive and retina ready skin
 */

.jp-audio {
	font-size:1em;
	font-family:Verdana, Arial, sans-serif;
	line-height:1.6;
	color: #ccc;
	background: #000;
	position:relative;
}
.jp-audio {
	width: 100%;
}
.jp-interface {
	position: relative;
	background:transparent;
	width:100%;
}

.jp-audio .jp-type-single .jp-interface {
	height:40px;
}


/* @group CONTROLS */

.jp-controls-holder {
	clear: both;
	width: 100%;
	margin:0 auto;
	position: relative;
	overflow:hidden;
	top:-8px;
}

.jp-controls {
	list-style-type:none;
	margin:0;
	padding: 0;
	overflow:hidden;
}

.jp-controls {
	width: 100%;
	padding-left: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.jp-controls li {
	display:inline;
	float: left;
}

.jp-controls a {
	display:block;
	width: 20px;
	height: 40px;
	overflow:hidden;
	font-size: 0;
	text-align: center;
}

.jp-controls a:before {
	color: #999;
	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.jp-play:before {
	font-size: 14px;
	line-height: 40px;
	content: '\f04b';
}

.jp-pause:before {
	font-size: 14px;
	line-height: 40px;
	content: '\f04c';
}


.jp-stop:before {
	font-size: 10px;
	line-height: 40px;
	content: '\f04d';
}

/* @group volume controls */

.jp-controls .jp-mute,
.jp-controls .jp-unmute {
	width: 20px;
	height: 40px;
	padding-left: 10px;
	text-align: left;
}

.jp-controls .jp-mute:before {
	font-size: 14px;
	line-height: 40px;
	content: '\f028';
	color: rgba(255,255,255, .3);
}

.jp-controls .jp-unmute:before {
	font-size: 14px;
	line-height: 40px;
	content: '\f026';
	color: rgba(255,255,255, .3);
}

.jp-controls .jp-mute:hover,
.jp-controls .jp-unmute:hover {
	background: transparent !important;
}

.jp-controls a:hover:before {
	color: #fff;
}

.jp-volume-bar {
	position: absolute;
	overflow:hidden;
	background: rgba(255,255,255, .3);
	width: 30px;
	height: 8px;
	cursor: pointer;
}
.jp-audio .jp-volume-bar {
	top: 16px;
	left: 75px;
}
.jp-volume-bar-value {
	background: #6fa8cd;
	width:0px;
	height: 8px;
}

/* @group progress bar */

.jp-progress {
	overflow:hidden;
	background: rgba(255,255,255, .3);
}
.jp-audio .jp-progress {
	position: absolute;
	top: 16px;
	height: 8px;
}
.jp-audio .jp-type-single .jp-progress,
.jp-audio .jp-type-single .jp-time-holder {
	right: 15px;
	width: 38%;
}
.jp-seek-bar {
	background:transparent;
	width: 0;
	height: 8px;
	cursor: pointer;
}
.jp-play-bar {
	background: #ff6633;
	width:0px;
	height:100%;
}

/* The seeking class is added/removed inside jPlayer */
.jp-seeking-bg {
	background-image: 
	   -webkit-gradient(linear, 0 0, 100% 100%, 
	      color-stop(.25, rgba(255, 255, 255, .2)), 
	      color-stop(.25, transparent), color-stop(.5, transparent), 
	      color-stop(.5, rgba(255, 255, 255, .2)), 
	      color-stop(.75, rgba(255, 255, 255, .2)), 
	      color-stop(.75, transparent), to(transparent)
	   );
	background-image: 
		-webkit-linear-gradient(
		  -45deg, 
	      rgba(255, 255, 255, .2) 25%, 
	      transparent 25%, 
	      transparent 50%, 
	      rgba(255, 255, 255, .2) 50%, 
	      rgba(255, 255, 255, .2) 75%, 
	      transparent 75%, 
	      transparent
	   );
	background-image: 
		-moz-linear-gradient(
		  -45deg, 
	      rgba(255, 255, 255, .2) 25%, 
	      transparent 25%, 
	      transparent 50%, 
	      rgba(255, 255, 255, .2) 50%, 
	      rgba(255, 255, 255, .2) 75%, 
	      transparent 75%, 
	      transparent
	   );
	background-image: 
		-ms-linear-gradient(
		  -45deg, 
	      rgba(255, 255, 255, .2) 25%, 
	      transparent 25%, 
	      transparent 50%, 
	      rgba(255, 255, 255, .2) 50%, 
	      rgba(255, 255, 255, .2) 75%, 
	      transparent 75%, 
	      transparent
	   );
	background-image: 
		-o-linear-gradient(
		  -45deg, 
	      rgba(255, 255, 255, .2) 25%, 
	      transparent 25%, 
	      transparent 50%, 
	      rgba(255, 255, 255, .2) 50%, 
	      rgba(255, 255, 255, .2) 75%, 
	      transparent 75%, 
	      transparent
	   );
	z-index: 1;
	-webkit-background-size: 50px 50px;
	-moz-background-size:    50px 50px;
	background-size:         50px 50px;
	-webkit-animation: move 2s linear infinite;
	overflow: hidden;
}

@-webkit-keyframes move {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 50px 50px;
    }
}

/* @group current time and duration */

.jp-audio .jp-time-holder {
	position:absolute;
	top:23px;
}

.jp-current-time,
.jp-duration {
	width: 50%;
	font-size: 10px;
}
.jp-current-time {
	float: left;
	display:inline;
}
.jp-duration {
	float: right;
	display:inline;
	text-align: right;
}

/* @end */

/* @group playlist */

.jp-title {
	font-weight: 600;
	text-align:center;
}

.jp-jplayer audio,
.jp-jplayer {
	width:0px;
	height:0px;
}

.jp-jplayer {
	background-color: #000000;
}


/* @group NO SOLUTION error feedback */

.jp-no-solution {
	line-height:16px;
	position:absolute;
	width:300px;
	left:20px;
	top: 20px;
	padding:10px 15px;
	font-size:12px;
	background-color:#fff;
	border:1px solid #eee;
	color:#333;
	display:none;
	z-index:999;
}

.jp-no-solution a {
	color:#000;
	cursor:pointer;
}