/*! Blue Monday Skin for jPlayer 2.9.2 ~ (c) 2009-2014 Happyworm Ltd ~ MIT License */

/*
 * Skin for jPlayer Plugin (jQuery JavaScript Library)
 * http://www.jplayer.org
 *
 * Skin Name: Blue Monday
 *
 * Copyright (c) 2010 - 2014 Happyworm Ltd
 * Licensed under the MIT license.
 *  - http://www.opensource.org/licenses/mit-license.php
 *
 * Author: Silvia Benvenuti
 * Skin Version: 5.1 (jPlayer 2.8.0)
 * Date: 13th November 2014
 */
.jp-audio *:focus {
	/* Disable the browser focus highlighting. */
	outline: none;
}

.jp-audio button::-moz-focus-inner {
	/* Disable the browser CSS3 focus highlighting. */
	border: 0;
}

.jp-audio {
	font-size: 1.4rem;
	line-height: 1.6;
	color: #fff;
	background-color: #ccc;
}

.jp-audio {
	width: 485px;
}

.jp-audio-stream {
	width: 182px;
}

.jp-interface {
	position: relative;
	width: 100%;
	min-height: 66px;
	background-color: #000;
}

/* @group CONTROLS */
.jp-controls-holder {
	position: relative;
	top: -8px;
	overflow: hidden;
	/*  clear: both;*/
	width: 485px;
	margin: 0 auto;
	/* This negative value depends on the size of the text in jp-currentTime and jp-duration */
}

.jp-interface .jp-controls {
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.jp-audio .jp-type-playlist .jp-controls {
	width: 134px;
	margin-left: 172px;
}

.jp-audio .jp-controls {
	float: left;
}

.jp-controls button {
	display: block;
	float: left;
	overflow: hidden;
	cursor: pointer;
	text-indent: -9999px;
	border: none;
}

.jp-play {
	width: 34px;
	height: 34px;
	margin-left: 5px;
	background: url('../images/common/player/icon-play.png') no-repeat;
}

.jp-play:hover {
	background: url('../images/common/player/icon-play-on.png') no-repeat;
}

.jp-state-playing .jp-play {
	background: url('../images/common/player/icon-pause.png') no-repeat;
}

.jp-state-playing .jp-play:hover {
	background: url('../images/common/player/icon-pause-on.png') no-repeat;
}

.jp-stop, .jp-previous, .jp-next {
	width: 24px;
	height: 24px;
	margin-top: 6px;
	margin-left: 5px;
}

.jp-stop {
	margin-left: 10px;
	background: url('../images/common/player/icon-stop.png') no-repeat;
}

.jp-previous {
	background: url('../images/common/player/icon-rewind.png') no-repeat;
}

.jp-previous:hover {
	background: url('../images/common/player/icon-rewind-on.png') no-repeat;
}

.jp-next {
	background: url('../images/common/player/icon-foward.png') no-repeat;
}

.jp-next:hover {
	background: url('../images/common/player/icon-forward-on.png') no-repeat;
}

/* @end */
/* @group progress bar */
.jp-progress {
	overflow: hidden;
	background-color: #ccc;
}

.jp-audio .jp-progress {
	top: 0px;
	left: 0px;
	width: 100%;
	height: 10px;
}

.jp-seek-bar {
	width: 0px;
	height: 100%;
	cursor: pointer;
	background: #000;
}

.jp-play-bar {
	width: 0px;
	height: 100%;
	background: #fff;
}


/* @end */
/* @group volume controls */
.jp-state-no-volume .jp-volume-controls {
	display: none;
}

.jp-volume-controls {
	position: absolute;
	top: 32px;
	left: 308px;
	width: 200px;
}

.jp-audio .jp-volume-controls {
	top: 12px;
	left: 50px;
}

.jp-volume-controls button {
	position: absolute;
	display: block;
	overflow: hidden;
	cursor: pointer;
	text-indent: -9999px;
	border: none;
}

.jp-mute, .jp-volume-max {
	width: 18px;
	height: 15px;
}

.jp-volume-max {
	left: 74px;
}

.jp-mute {
	background: url('../images/common/player/icon-mute.png') no-repeat;
}

.jp-mute:hover {
	background: url('../images/common/player/icon-mute-on.png') no-repeat;
}

.jp-state-muted .jp-mute {
	background: url('../images/common/player/icon-mute-on.png') no-repeat;
}

.jp-volume-max {
	background: url('../images/common/player/icon-max.png') no-repeat;
}

.jp-volume-max:hover {
	background: url('../images/common/player/icon-max-on.png') no-repeat;
}

.jp-volume-bar {
	position: absolute;
	top: 5px;
	left: 22px;
	overflow: hidden;
	width: 46px;
	height: 5px;
	cursor: pointer;
	background: #ccc;
}

.jp-volume-bar-value {
	width: 0px;
	height: 5px;
	background: #fff;
}

/* @end */
/* @group current time and duration */

.jp-current-time, .jp-duration {
	font-size: .64em;
	font-style: oblique;
	width: 60px;
}

.jp-current-time {
	display: inline;
	float: left;
	cursor: default;
}

.jp-duration {
	display: inline;
	float: right;
	cursor: pointer;
	text-align: right;
}

.jp-audio .jp-current-time {
	margin-left: 20px;
}

.jp-audio .jp-duration {
	margin-right: 20px;
}

/* @end */
/* @group playlist */
.jp-details {
	font-weight: bold;
	cursor: default;
	text-align: center;
}

.jp-details,
.jp-playlist {
	width: 100%;
	background-color: #ccc;
}

.jp-type-single .jp-details, .jp-type-playlist .jp-details {
	border-top: none;
}

.jp-details .jp-title {
	font-size: 1.4rem;
	font-weight: bold;
	margin: 0;
	padding: 5px 20px;
}

.jp-playlist {
	height: 320px;
	overflow-x: hidden;
	overflow-y: scroll;
}

.jp-playlist ul {
	font-size: 1.4rem;
	line-height: 1.2;
	margin: 0;
	padding: 0 10px;
	list-style-type: none;
}

.jp-playlist li {
	position: relative;
	padding: 13px 15px;
	border-bottom: 1px solid #eee;
}

.jp-playlist li div {
	display: inline;
}

/* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */
div.jp-type-playlist div.jp-playlist li:last-child {
	border-bottom: none;
}

div.jp-type-playlist div.jp-playlist a {
	text-decoration: none;
	color: #28282b;
}

div.jp-type-playlist div.jp-playlist a:hover {
	color: #000;
}


div.jp-type-playlist div.jp-playlist li.jp-playlist-current::before {
	position: absolute;
	top: 15.5px;
	left: 0;
	display: block;
	width: 10px;
	height: 10px;
	content: "■";
	font-size: 1rem;
	text-align: center;
	color: #000;
}

div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove {
	font-weight: bold;
	display: inline;
	float: right;
	margin-right: 10px;
	text-align: right;
	color: #666;
}

div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {
	color: #0d88c1;
}

div.jp-type-playlist div.jp-playlist span.jp-free-media {
	display: inline;
	float: right;
	margin-right: 10px;
	text-align: right;
}

div.jp-type-playlist div.jp-playlist span.jp-free-media a {
	color: #666;
}

div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover {
	color: #0d88c1;
}

span.jp-artist {
	font-size: .8em;
	color: #666;
}

/* @end */
.jp-video-play {
	overflow: hidden;
	width: 100%;
	/* Important for nested negative margins to work in modern browsers */
	cursor: pointer;
	background-color: transparent;
	/* Makes IE9 work with the active area over the whole video area. IE6/7/8 only have the button as active area. */
}

.jp-video-play {
	height: 270px;
	margin-top: -270px;
}

.jp-video-360p .jp-video-play {
	height: 360px;
	margin-top: -360px;
}

.jp-video-full .jp-video-play {
	height: 100%;
}

.jp-video-play-icon {
	position: relative;
	top: 50%;
	left: 50%;
	display: block;
	width: 112px;
	height: 100px;
	margin-top: -50px;
	margin-left: -56px;
	cursor: pointer;
	text-indent: -9999px;
	border: none;
	background: url('../images/common/player/jplayer.blue.monday.video.play.png') 0 0 no-repeat;
}

.jp-video-play-icon:hover {
	background: url('../images/common/player/jplayer.blue.monday.video.play.png') 0 -100px no-repeat;
}

.jp-jplayer audio, .jp-jplayer {
	width: 0px;
	height: 0px;
}

.jp-jplayer {
	background-color: #000000;
}

/* @group TOGGLES */
/* The audio toggles are nested inside jp-time-holder */
.jp-toggles {
	overflow: hidden;
	padding: 0;
	position: absolute;
	right: 16px;
	width: 100px;
	margin: 0;
	margin-top: 10px;
}

.jp-toggles button {
	line-height: 100%;
	display: block;
	float: left;
	width: 25px;
	height: 18px;
	cursor: pointer;
	text-indent: -9999px;
	/* need this for IE6 */
	border: none;
}

.jp-full-screen {
	margin-left: 20px;
	background: url('../images/common/player/icon-fullscreen.png') no-repeat;
}

.jp-full-screen:hover {
	background: url('../images/common/player/icon-fullscreen.png') no-repeat;
}

.jp-state-full-screen .jp-full-screen {
	background: url('../images/common/player/icon-fullscreen.png') no-repeat;
}

.jp-repeat {
	background: url('../images/common/player/icon-repeat.png') no-repeat;
}

.jp-repeat:hover {
	background: url('../images/common/player/icon-repeat-on.png') no-repeat;
}

.jp-state-looped .jp-repeat {
	background: url('../images/common/player/icon-repeat-on.png') no-repeat;
}

.jp-state-looped .jp-repeat:hover {
	background: url('../images/common/player/icon-repeat-on.png') no-repeat;
}

.jp-shuffle {
	margin-left: 5px;
	background: url('../images/common/player/icon-shuffle.png') no-repeat;
}

.jp-shuffle:hover {
	background: url('../images/common/player/icon-shuffle-on.png') no-repeat;
}

.jp-state-shuffled .jp-shuffle {
	background: url('../images/common/player/icon-shuffle-on.png') no-repeat;
}


/* @end */
/* @group NO SOLUTION error feedback */
.jp-no-solution {
	font-size: .8em;
	display: none;
	padding: 5px;
	color: #000;
	border: 2px solid #009be3;
	background-color: #eee;
}

.jp-no-solution a {
	color: #000;
}

.jp-no-solution span {
	font-size: 1em;
	font-weight: bold;
	display: block;
	text-align: center;
}

/* @end */

@media screen and (max-width: 768px) {
.jp-audio {
	font-size: 1.2rem;
	line-height: 1.5;
}

.jp-audio {
	width: 100%;
}

.jp-audio-stream {
	width: 182px;
}

.jp-interface {
	width: 100%;
	min-height: 80px;
}

.jp-controls-holder {
	top: 10px;
	width: 100%;
}

.jp-audio .jp-type-playlist .jp-controls {
	width: 134px;
	margin-left: 50px;
}

.jp-audio .jp-controls {
	float: unset;
}

.jp-toggles {
	bottom: 10px;
	right: 0;
	width: 100px;
	margin: 10px 0 0;
}

}

