/*
 * flat.audio Skin for jPlayer
 * http://www.jplayer.org
 *
 * Copyright (c) 2013 - 2014 Happyworm Ltd
 *
 * Authors: Mark Boas, Mark J Panaghiston
 * Version: 3.0.0
 * Date: 14th November 2014
 */

@charset "UTF-8";


/* Setting the size.
 * - With the responsive design, the skin will adapt to match the container width
 */

.jp-flat-audio {
	position: relative;
	text-align: left;

	min-width:320px;
	max-width:1280px;
	width: 100%;
	height:36px;

	/* Hide iOS touch highlight */
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	/* Disable selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* define your text color here */
	color: #ffffff;
}

.jp-flat-audio,
.jp-flat-audio * {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 0;
	line-height: 0;
}

.jp-flat-audio *:focus {
	/* Disable the browser focus highlighting. */
	outline:none;
}
.jp-flat-audio button::-moz-focus-inner {
	/* Disable the browser CSS3 focus highlighting. */
	border: 0;
}

.jp-flat-audio .jp-control {
	background-color:transparent;
	position: absolute;
	top: 0;
	width: 36px;
	height: 100%;
}

.jp-flat-audio .jp-play-control {
	left: 0;
}

.jp-flat-audio .jp-button {
	display:block;
	text-decoration: none;
	background-color: #eb0090;
	width: 36px;
	height: 100%;
	font-size: 32px;
	line-height: 36px;
	text-align: center;
	cursor: pointer;

	/* define your pause/play button icon color here */
	color: #ffffff;
}
.jp-flat-audio .jp-button:focus {
}

.jp-flat-audio .jp-button:before {
	display: block;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	font-variant: normal;
	text-transform: none;
	speak: none;
	width: 36px;
	line-height: 36px;
	text-align: center;
	opacity: 1.0;
}

.jp-flat-audio.jp-state-playing .jp-play:before {
	content:" ";
	display:inline-block;
	width:11px;
	height:11px;
	margin-top:-8px;
	margin-left:-1px;
	background:url(../img/icn_pause.png);
	background-size:cover;
	vertical-align:middle;
}
.jp-flat-audio .jp-play:before {
	content:" ";
	display:inline-block;
	width:10px;
	height:11px;
	margin-top:-8px;
	margin-left:-1px;
	background:url(../img/icn_playbtn.png);
	background-size:cover;
	vertical-align:middle;
}

.jp-flat-audio .jp-bar {
	position: absolute;
	top: 0;
	left: 36px;
	right: 0;
	height: 100%;

	/* define your unseekable progress bar background color here - only noticeable with the flash solution as it downloads */
	background-color: #000000;
}
.jp-flat-audio .jp-seek-bar.jp-seek-bar-display {
	min-width: 0;

	/* define your unplayed progress bar background color here */
	background-color: #232323;
}
.jp-flat-audio .jp-seek-bar {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
	height: 100%;
	cursor: pointer;
}

.jp-flat-audio .jp-play-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: rgb(199,10,240);
	background: -moz-linear-gradient(left,  rgba(199,10,240,1) 0%, rgba(97,54,255,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(199,10,240,1) 0%,rgba(97,54,255,1) 100%);
	background: linear-gradient(to right,  rgba(199,10,240,1) 0%,rgba(97,54,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c70af0', endColorstr='#6136ff',GradientType=1 );
}

.jp-flat-audio .jp-details,
.jp-flat-audio .jp-timing {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	padding: 0 12px;

	font-size: 16px;
	line-height:36px;
}
.jp-flat-audio .jp-timing {
	text-align: right;
}
.jp-flat-audio .jp-title,
.jp-flat-audio .jp-duration {
	font-size: 13px;
	line-height:36px;
}

.jp-flat-audio .jp-no-solution {
	position: absolute;
	top: 0;
	left:36px;
	right: 0;
	height: 48px; /*36px - 8px - 8px = 48px */
	padding: 8px 0;

	line-height: 24px;
	font-size: 16px;
	text-align: center;
	display: none;

	/* define your error message text color here */
	color: #000000;

	/* define your error message background color here */
	background-color: #b28282;
}