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


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

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

	min-width:300px;
	max-width:1280px;
	width: 100%;
	height: 48px;

	/* 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 .jp-control {
	position: absolute;
	top: 0;
	width: 48px;
	height: 100%;

	/* define your pause/play button background color here */
	background-color: #00aef6;
}

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

.jp-flat-audio .jp-button {
	text-decoration: none;
	font-size: 18px;
	line-height: 48px;
	text-align: center;
	cursor: pointer;

	/* define your pause/play button icon color here */
	color: #ffffff;
}

.jp-flat-audio .jp-pause {
	display: none;
}

.jp-flat-audio .jp-button:before {
	display: inline-block;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	font-variant: normal;
	text-transform: none;
	speak: none;

	width: 48px;
	line-height: 48px;

	text-align: center;
	opacity: 1.0;
}

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

	/* 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%;

	/* define your played progress bar background color here */
	background-color: #0082b2;
}

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

	font-size: 14px;
	line-height: 48px;
}
.jp-flat-audio .jp-duration {
	text-align: right;
}

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

	line-height: 32px;
	font-size: 14px;
	text-align: center;
	display: none;

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

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