/*
 * flat.video Skin for jPlayer
 * http://www.jplayer.org
 *
 * Copyright (c) 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
 * 2) For fixed width, the 360p and 270p classes given below
 * 3) The class name, width and height must match the jPlayer size option setting
 * 4) HDTV aspect ratio is 16:9
 * 5) More info at http://jplayer.org/latest/developer-guide/#jPlayer-option-size
 */

.jp-flat-video-responsive {
	min-width: 300px; /* 180p */
	max-width: 1280px; /* 720p */
	width: 100%;
	height: auto;
}

.jp-flat-video-360p {
	width: 640px;
	height: 360px;
}

.jp-flat-video-270p {
	width: 480px;
	height: 270px;
}

.jp-flat-video {
	position: relative;
	text-align: left;
	min-height: 64px;

	/* 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-video,
.jp-flat-video * {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 0;
	line-height: 0;
}

.jp-flat-video-full {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
}

.jp-flat-video .jp-jplayer video {
	background-color:#000;
}

.jp-flat-video .jp-gui {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 48px;
}

.jp-flat-video .jp-control {
	position: absolute;
	top: 0;
	width: 48px;
	height: 100%;

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

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

.jp-flat-video .jp-screen-control {
	right: 0;
}

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

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

.jp-flat-video .jp-pause,
.jp-flat-video .jp-restore-screen {
	display: none;
}

.jp-flat-video .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-video .jp-bar {
	position: absolute;
	top: 0;
	left: 48px;
	right: 48px;
	height: 100%;

	/* define your unplayed progress bar background color here */
	background-color: #232323;
}

.jp-flat-video .jp-seek-bar {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
	height: 100%;

	cursor: pointer;
}

.jp-flat-video .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-video .jp-title,
.jp-flat-video .jp-duration {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	padding: 0 12px;

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

.jp-flat-video .jp-no-solution {
	position: absolute;
	bottom: 0;
	left: 48px;
	right: 48px;
	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;
}