/*
 * Skin for jPlayer Plugin (http://jplayer.org/)
 * jPlayer Version: 2.1.0
 *
 * Skin Name: Premium Pixels
 * Author: @thelukemcdonald (lukemcdonald.com)
 * Description: A responsive CSS3 jPlayer skin with playlist funcitonality. Design by @ormanclark (premiumpixels.com).
 * Version: 2.0
 * Tags: audio, playlist, dark, play, pause, volume-bar, progress-bar
 */

/* GENERAL
----------------------------------------------- */
.jp-jplayer { width: 100%; height: 30px; background-color: #000000; }
.jp-audio { margin: 0 auto; width: 100%; max-width: 100%; font-size: 1em; font-family: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", sans-serif; color: #fff; line-height: 1.6; margin-bottom: 20px; }
.jp-audio a { text-decoration: none; color: #d2d6db; }
.jp-audio a:hover { color: #ffffff }
.jp-interface { position: relative; height: 30px; width: 100%; background-color: #222222; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#3a3b3c), to(#222222)); background-image: -moz-linear-gradient(#3a3b3c, #222222); background-image: -ms-linear-gradient(#3a3b3c, #222222); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3a3b3c), color-stop(100%, #222222)); background-image: -webkit-linear-gradient(#3a3b3c, #222222); background-image: -o-linear-gradient(#3a3b3c, #222222); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a3b3c', endColorstr='#222222', GradientType=0); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a3b3c', endColorstr='#222222', GradientType=0)"; background-image: linear-gradient(#3a3b3c, #222222); }
.jp-no-solution { color: #777; margin-bottom: 20px; text-align: center; }
.jp-no-solution a { color: #DD4B39 }
.jp-no-solution a:hover { color: #DD4B39 }
/* CONTROLS
----------------------------------------------- */
.jp-controls { float: left; width: 30px; height: 30px; list-style-type: none; padding: 0; margin: 0; z-index: 100; }
.jp-controls:after { content: " "; position: absolute; top: 0; left: 30px; width: 0; height: 30px; border-left: 1px solid #242526; border-right: 1px solid #323334; }
.jp-controls li { float: left }
.jp-controls a { position: absolute; overflow: hidden; text-indent: -9999px; }
.jp-play, .jp-pause, .jp-mute, .jp-unmute { z-index: 1; outline: none; width: 30px; height: 30px; background-position: 10px center; background-repeat: no-repeat; -webkit-transition: opacity 0.1s ease-in-out; -moz-transition: opacity 0.1s ease-in-out; -o-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; }
.jp-play:hover, .jp-pause:hover, .jp-mute:hover, .jp-unmute:hover { background-position: -23px center }
.jp-play { background-image: url('../images/audioplayer/play.png') }
.jp-pause { display: none; background-image: url('../images/audioplayer/pause.png'); }
.jp-mute, .jp-unmute { display: block; position: absolute; top: 0; right: 55px; }
.jp-mute { background-image: url('../images/audioplayer/mute-off.png') }
.jp-unmute { background-image: url('../images/audioplayer/mute-on.png') }
/*
@media all and (-webkit-min-device-pixel-ratio: 1.5) { 
	.jp-play { background-image: url('../images/audioplayer/play@2x.png'); background-size: auto auto; }
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) { 
	.jp-pause { background-image: url('../images/audioplayer/pause@2x.png'); background-size: auto auto; }
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) { 
	.jp-mute { background-image: url('../images/audioplayer/mute-off@2x.png'); background-size: auto auto; }
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) { 
	.jp-unmute { background-image: url('../images/audioplayer/mute-on@2x.png'); background-size: auto auto; }
}
*/
/* PROGRESS BAR
----------------------------------------------- */
.jp-progress { position: absolute; padding: 0 95px 0 40px; margin-top: 12px; margin-bottom: 12px; margin-left: 0; margin-right: 0; width: 100%; height: 7px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.jp-seek-bar, .jp-play-bar { width: 0px; height: 5px; -webkit-border-radius: 1px; -khtml-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; }
.jp-seek-bar { cursor: pointer; position: relative; z-index: 101; background: #464849; }
.jp-seek-bar:before { content: " "; display: block; background: transparent; border: 1px solid; border-color: #212424 #262929 #262929; height: 5px; width: 100%; position: relative; top: -1px; left: -1px; -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1); -khtml-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1); -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1); -o-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1); box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1); -webkit-border-radius: 1px; -khtml-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; }
.jp-play-bar { position: absolute; top: 0; left: 0; -webkit-animation: progress 0.75s linear infinite; -moz-animation: progress 0.75s linear infinite; -o-animation: progress 0.75s linear infinite; -ms-animation: progress 0.75s linear infinite; animation: progress 0.75s linear infinite; }
/* VOLUME BAR
----------------------------------------------- */
.jp-volume-bar { float: right; z-index: 99; position: relative; margin: 12px 10px 12px; width: 40px; height: 7px; cursor: pointer; background: #262929; -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1); -khtml-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1); -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1); -o-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1); box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1); -webkit-border-radius: 1px; -khtml-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; }
.jp-volume-bar:before { content: " "; position: absolute; top: -12px; left: -35px; width: 0; height: 30px; border-left: 1px solid #323334; border-right: 1px solid #242526; }
.jp-volume-bar-value { width: 0px; height: 5px; margin: 1px; -webkit-border-radius: 1px; -khtml-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; }
/* Diagonal Background Bars */
.jp-play-bar, .jp-volume-bar-value { -webkit-box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3); -khtml-box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3); -moz-box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3); -o-box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3); -webkit-background-size: 7px 7px; -moz-background-size: 7px 7px; -o-background-size: 7px 7px; background-size: 7px 7px; background-color: #fcc500; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#fff200), to(#fcc500)); background-image: -moz-linear-gradient(#fff200, #fcc500); background-image: -ms-linear-gradient(#fff200, #fcc500); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff200), color-stop(100%, #fcc500)); background-image: -webkit-linear-gradient(#fff200, #fcc500); background-image: -o-linear-gradient(#fff200, #fcc500); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff200', endColorstr='#fcc500', GradientType=0); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff200', endColorstr='#fcc500', GradientType=0)"; background-image: linear-gradient(#fff200, #fcc500); background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.3)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.3)), color-stop(0.75, rgba(255, 255, 255, 0.3)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent); }
/* TIME HOLDER
----------------------------------------------- */
.jp-time-holder { display: none; visibility: hidden; }
/* TIME HOLDER
----------------------------------------------- */
.jp-toggles { display: none; visibility: hidden; }
/* CSS3 ANIMATINS
----------------------------------------------- */
/* Progress Bar Animation */
@-webkit-keyframes progress { 
	0% { background-position: 0 }
	100% { background-position: -7px }
}
@-moz-keyframes progress { 
	0% { background-position: 0 }
	100% { background-position: -7px }
}
@-ms-keyframes progress { 
	0% { background-position: 0 }
	100% { background-position: -7px }
}
@-o-keyframes progress { 
	0% { background-position: 0 }
	100% { background-position: -7px }
}