#jp-audio *:focus, .jp-audio-stream *:focus, .jp-video *:focus { outline: none; }
button::-moz-focus-inner, .jp-audio-stream button::-moz-focus-inner, .jp-video button::-moz-focus-inner { border: 0 !important; }

#jp_audio { display: none; }
#jp_audio td { white-space: nowrap; overflow: hidden; }
#jp_audio .jp-gui { color: #fff; font-family: Arial, sans-serif; background: url(../img/jpaudio.png) 0 -200px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
#jp_audio .jp-gui table { margin: 0; }
#jp_audio .jp-gui table td { padding: 2px 4px; }
#jp_audio .jp-gui button { display: inline-block; overflow: hidden; text-indent: -9999px; height: 19px; line-height: 19px; border: none; cursor: pointer; }
#jp_audio .jp-bar-holder { height: 5px; cursor: pointer; background: url(../img/jpaudio.png) 0 -163px repeat-x; }
#jp_audio .jp-bar-value { height: 5px; cursor: pointer; background: url(../img/jpaudio.png) 0 -133px repeat-x; }
#jp_audio .jp-border { border-left: 1px solid #555; }
#jp_audio button.jp-play, #jp_audio button.jp-pause, #jp_audio button.jp-mute, #jp_audio button.jp-unmute, #jp_audio button.jp-prev, #jp_audio button.jp-next, #jp_audio button.jp-close {
	z-index: 1; outline: none;
}
#jp_audio button.jp-play, #jp_audio button.jp-pause {width: 30px;}
#jp_audio button.jp-mute, #jp_audio button.jp-unmute, #jp_audio button.jp-prev, #jp_audio button.jp-next, #jp_audio button.jp-close {width: 20px;}
#jp_audio button.jp-play {background: url(../img/jpaudio.png) -2px -5px no-repeat;}
#jp_audio button.jp-play:hover {background: url(../img/jpaudio.png) -35px -5px no-repeat;}
#jp_audio button.jp-pause {background: url(../img/jpaudio.png) -2px -35px no-repeat; display: none;}
#jp_audio button.jp-pause:hover {background: url(../img/jpaudio.png) -35px -35px no-repeat;}
#jp_audio button.jp-mute {background: url(../img/jpaudio.png) -8px -65px no-repeat;}
#jp_audio button.jp-mute:hover {background: url(../img/jpaudio.png) -41px -65px no-repeat;}
#jp_audio button.jp-unmute {background: url(../img/jpaudio.png) -8px -95px no-repeat; display: none;}
#jp_audio button.jp-unmute:hover {background: url(../img/jpaudio.png) -41px -95px no-repeat;}
#jp_audio button.jp-prev {background: url(../img/jpaudio.png) -5px -259px no-repeat;}
#jp_audio button.jp-prev:hover {background: url(../img/jpaudio.png) -35px -259px no-repeat;}
#jp_audio button.jp-next {background: url(../img/jpaudio.png) -8px -229px no-repeat;}
#jp_audio button.jp-next:hover {background: url(../img/jpaudio.png) -38px -229px no-repeat;}
#jp_audio button.jp-close {background: url(../img/jpaudio.png) -8px -290px no-repeat;}
#jp_audio button.jp-close:hover {background: url(../img/jpaudio.png) -38px -290px no-repeat;}
#jp_audio .jp-duration, #jp_audio .jp-volume-bar {padding-right: 8px !important;}

.jp-video { display: none; -webkit-box-shadow: 0 0 20px rgba(0,0,0,.5); box-shadow: 0 0 20px rgba(0,0,0,.5); position: relative; }
.jp-video { font-size: 16px; font-family: Arial, Verdana, sans-serif; color: #666; border: 1px solid rgba(0,0,0,.4); background-color: #eee; }
.jp-video-270p { width: 480px; }
.jp-video-360p { width: 640px; }
.jp-video-full {
	/* Rules for IE6 (full-screen) */
	width: 480px; height: 270px;
	/* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */
	position: static !important; position: relative;
}
/* The z-index rule is defined in this manner to enable Popcorn plugins that add overlays to video area. EG. Subtitles. */
.jp-video-full div div { z-index: 1000; }
.jp-video-full .jp-jplayer {
	top: 0; left: 0; position: fixed !important; position: relative;
	/* Rules for IE6 (full-screen) */
	overflow: hidden;
}
.jp-video-full .jp-gui {
  position: fixed !important; position: static;
  /* Rules for IE6 (full-screen) */
  top: 0; left: 0; width: 100%; height: 100%; z-index: 1001;
  /* 1 layer above the others. */
}
.jp-video-full .jp-interface {
  position: absolute !important; position: relative;
  /* Rules for IE6 (full-screen) */
  bottom: 0; left: 0;
}
.jp-video .jp-interface { position: relative; background-color: #eee; width: 100%; border-top: 1px solid rgba(0,0,0,.4); }
/* @group CONTROLS */
.jp-video .jp-controls-holder {
	clear: both; margin: 0 auto; overflow: hidden; position: relative; text-align: center; padding-top: 2px;
	background: -webkit-linear-gradient(#555, #000); background: linear-gradient(to bottom, #555, #000);
}
.jp-video .jp-interface .jp-controls { margin: 0; padding: 0; overflow: hidden; display: inline-block; }
.jp-video .jp-type-playlist .jp-controls { width: 134px; margin-left: 172px; }
.jp-video .jp-controls button { display: inline-block; overflow: hidden; text-indent: -9999px; border: none; cursor: pointer; }
.jp-video .jp-play { width: 40px; height: 40px; background: url(../img/jpvideo.png) 0 0 no-repeat; }
.jp-video.jp-state-playing .jp-play { background: url(../img/jpvideo.png) -41px 0 no-repeat; }
.jp-video .jp-stop, .jp-video .jp-previous, .jp-video .jp-next { width: 28px; height: 28px; }
.jp-video .jp-stop { background: url(../img/jpvideo.png) 0 -83px no-repeat; margin-left: 10px; }
.jp-video .jp-stop:focus { background: url(../img/jpvideo.png) -29px -83px no-repeat; }
.jp-video .jp-previous { background: url(../img/jpvideo.png) 0 -112px no-repeat; }
.jp-video .jp-previous:focus { background: url(../img/jpvideo.png) -29px -112px no-repeat; }
.jp-video .jp-next { background: url(../img/jpvideo.png) 0 -141px no-repeat; }
.jp-video .jp-next:focus { background: url(../img/jpvideo.png) -29px -141px no-repeat; }
/* @end */
/* @group progress bar */
.jp-video .jp-progress { overflow: hidden; background-color: #ddd; width: 100%; height: 10px; background: -webkit-linear-gradient(#555, #777); background: linear-gradient(to bottom, #555, #777) }
.jp-video .jp-seek-bar { width: 0px; height: 100%; cursor: pointer; }
.jp-video .jp-play-bar { width: 0px; height: 100%; background: -webkit-linear-gradient(#999, #eee); background: linear-gradient(to bottom, #999, #eee) }
/* @end */
/* @group volume controls */
.jp-video.jp-state-no-volume .jp-volume-controls { display: none; }
.jp-video .jp-volume-controls { display: inline-block; margin-left: 8px; margin-top: 12px; vertical-align: top; height: 16px; }
.jp-video .jp-volume-controls button { overflow: hidden; text-indent: -9999px; border: none; cursor: pointer; }
.jp-video .jp-mute, .jp-video .jp-volume-max { width: 18px; height: 16px; }
.jp-video .jp-volume-max { left: 74px; }
.jp-video .jp-mute { background: url(../img/jpvideo.png) 0 -170px no-repeat; }
.jp-video.jp-state-muted .jp-mute { background: url(../img/jpvideo.png) -19px -170px no-repeat; }
.jp-video .jp-volume-max { background: url(../img/jpvideo.png) 0 -186px no-repeat; }
.jp-video .jp-volume-max:focus { background: url(../img/jpvideo.png) -19px -186px no-repeat; }
.jp-video .jp-volume-bar { -webkit-linear-gradient(#555, #777); background: linear-gradient(to bottom, #555, #777); width: 46px; height: 6px; cursor: pointer; overflow: hidden; display: inline-block; vertical-align: top; margin-top: 6%; margin-left: -3px; }
.jp-video .jp-volume-bar-value { -webkit-linear-gradient(#999, #eee); background: linear-gradient(to bottom, #999, #eee); width: 0px; height: 6px; }
/* @end */
/* @group current time and duration */
.jp-video .jp-current-time, .jp-video .jp-duration { font-size: .64em; font-style: oblique; color: #fff; }
.jp-video .jp-current-time { position: absolute; top: 2px; left: 5px; cursor: default; }
.jp-video .jp-duration { position: absolute; top: 2px; right: 5px; text-align: right; cursor: pointer; }
/* @end */
/* @group playlist */
.jp-video .jp-details { font-weight: bold; text-align: center; cursor: default; color: #fff; }
.jp-video .jp-details, .jp-video .jp-playlist { width: 100%; border-top: 1px solid rgba(0,0,0,.4); }
.jp-video .jp-type-single .jp-details, .jp-video .jp-type-playlist .jp-details { border-top: none; }
.jp-video .jp-details .jp-title { margin: 0; padding: 5px 20px; font-size: .72em; font-weight: bold; }
.jp-video .jp-playlist ul { list-style-type: none; margin: 0; padding: 0 20px; font-size: .72em; }
.jp-video .jp-playlist li { padding: 5px 0 4px 20px; border-bottom: 1px solid #eee; }
.jp-video .jp-playlist li div { display: inline; }
/* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */
.jp-video div.jp-type-playlist div.jp-playlist li:last-child { padding: 5px 0 5px 20px; border-bottom: none; }
.jp-video div.jp-type-playlist div.jp-playlist li.jp-playlist-current { list-style-type: square; list-style-position: inside; padding-left: 7px; }
.jp-video div.jp-type-playlist div.jp-playlist a { color: #333; text-decoration: none; }
.jp-video div.jp-type-playlist div.jp-playlist a:hover { color: #0d88c1; }
.jp-video div.jp-type-playlist div.jp-playlist a.jp-playlist-current { color: #0d88c1; }
.jp-video div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove { float: right; display: inline; text-align: right; margin-right: 10px; font-weight: bold; color: #666; }
.jp-video div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover { color: #0d88c1; }
.jp-video div.jp-type-playlist div.jp-playlist span.jp-free-media { float: right; display: inline; text-align: right; margin-right: 10px; }
.jp-video div.jp-type-playlist div.jp-playlist span.jp-free-media a { color: #666; }
.jp-video div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover { color: #0d88c1; }
.jp-video span.jp-artist { font-size: .8em; color: #666; }
/* @end */
.jp-video-play {
	width: 100%; overflow: hidden; /* 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-270p .jp-video-play { margin-top: -270px; height: 270px; }
.jp-video-360p .jp-video-play { margin-top: -360px; height: 360px; }
.jp-video-full .jp-video-play { height: 100%; }
.jp-video-play-icon {
	position: relative; display: block; width: 112px; height: 100px; margin-left: -56px; margin-top: -50px; left: 50%; top: 50%; text-indent: -9999px; border: none; cursor: pointer;
	background: url(../img/jplay.png) 0 0 no-repeat;
}
.jp-video-play-icon:focus { background: url(../img/jplay.png) 0 -100px no-repeat; }
.jp-video .jp-jplayer { width: 0px; height: 0px; background-color: #000000; }
/* @group TOGGLES */
.jp-video .jp-toggles { padding: 0; margin: 0 auto; overflow: hidden; display: inline-block; margin: 0; margin-top: 11px; vertical-align: top; width: 100px; }
.jp-video .jp-toggles button { display: block; float: left; width: 25px; height: 18px; text-indent: -9999px; line-height: 100%; /* need this for IE6 */ border: none; cursor: pointer; }
.jp-video .jp-full-screen { background: url(../img/jpvideo.png) 0 -310px no-repeat; margin-left: 10px; }
.jp-video.jp-state-full-screen .jp-full-screen { background: url(../img/jpvideo.png) -30px -310px no-repeat; }
.jp-video .jp-repeat { background: url(../img/jpvideo.png) 0 -290px no-repeat; margin-left: 10px; }
.jp-video.jp-state-looped .jp-repeat { background: url(../img/jpvideo.png) -30px -290px no-repeat; }
.jp-video .jp-shuffle { background: url(../img/jpvideo.png) 0 -270px no-repeat; margin-left: 5px; }
.jp-video .jp-shuffle:focus { background: url(../img/jpvideo.png) -30px -270px no-repeat; }
.jp-video.jp-state-shuffled .jp-shuffle { background: url(../img/jpvideo.png) -60px -270px no-repeat; }
.jp-video.jp-state-shuffled .jp-shuffle:focus { background: url(../img/jpvideo.png) -90px -270px no-repeat; }
.jp-video .jp-close { background: url(../img/jpvideo.png) -120px -310px no-repeat; float: right; text-indent: -9999px; width: 20px; margin-top: 2px; border: none; cursor: pointer; }
/* @end */
/* @group NO SOLUTION error feedback */
.jp-video .jp-no-solution { padding: 5px; font-size: .8em; background-color: #eee; border: 2px solid rgba(0,0,0,.4); color: #000; display: none; position: absolute; top: 40%; left: 20px; width: 580px; text-align: center; }
.jp-video .jp-no-solution a { color: blue; text-decoration: underline; }
