From 1b92f82c1ff2eeea9d08555b24b2c9f6f04f468f Mon Sep 17 00:00:00 2001
From: denise <denise@denise-DX4860.(none)>
Date: Thu, 19 Apr 2012 10:00:30 -0400
Subject: [PATCH] CC-3668: Live stream player - volume control needs improved
 usability

-un-minified jplayer.blue.monday.css
---
 .../js/jplayer/skin/jplayer.blue.monday.css   | 503 +++++++++++++++++-
 1 file changed, 502 insertions(+), 1 deletion(-)

diff --git a/airtime_mvc/public/js/jplayer/skin/jplayer.blue.monday.css b/airtime_mvc/public/js/jplayer/skin/jplayer.blue.monday.css
index d1b726386..e8e710488 100644
--- a/airtime_mvc/public/js/jplayer/skin/jplayer.blue.monday.css
+++ b/airtime_mvc/public/js/jplayer/skin/jplayer.blue.monday.css
@@ -1,2 +1,503 @@
-@charset "utf-8";/* * Skin for jPlayer Plugin (jQuery JavaScript Library) * http://www.happyworm.com/jquery/jplayer * * Skin Name:Blue Monday * * Copyright (c) 2010 Happyworm Ltd * Dual licensed under the MIT and GPL licenses. *  - http://www.opensource.org/licenses/mit-license.php *  - http://www.gnu.org/copyleft/gpl.html * * Author:Silvia Benvenuti * Skin Version:3.0 (jPlayer 2.0.0) * Date:20th December 2010 */.jp-container{background:#282828; height:100%; margin:0; padding:0;width:400px;position:relative}.jp-container h1{ color:#CCC; font-size:20px; font-weight:normal; margin:0; padding:8px 0; position:absolute; right:16px; text-align:center; text-shadow:0 -1px 1px #000; top:12px}.jp-logo{width:400px;height:67px; background:#282828 no-repeat 120px 14px;background:no-repeat 120px 14px,-moz-radial-gradient(200px 0px,circle cover,rgba(70,70,70,1) 0%,rgba(40,40,40,1) 90%);background:no-repeat 120px 14px,-webkit-radial-gradient(170px 20px,rgba(70,70,70,1) 0%,rgba(40,40,40,1) 70%);display:block}.jp-logo img{ display:block; display:block; padding:14px 0 0 16px}.jp-stream{height:27px;display:block;border-top:1px solid #050505;color:#ff5d1a;font-size:12px;padding:6px 4px 4px 16px;background:#313131;background:-moz-linear-gradient(top,#292929 0,#3a3a3a 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#292929),color-stop(100%,#3a3a3a));box-shadow:rgba(248,248,248,.3) 0px 1px 0px,rgba(0,0,0,0.2) 0 2px 2px inset;-moz-box-shadow:rgba(0,0,0,0.7) 0 0 5px inset;-webkit-box-shadow:rgba(0,0,0,0.7) 0 0 5px inset;line-height:23px}.jp-stream-text,.jp-stream form{float:left}.jp-stream form{margin-left:10px;width:283px}.jp-stream label{color:#ababab;padding:0 10px 0 0;font-size:12px}.jp-stream label input[type="radio"]{}.jp-stream form input[type="text"],.jp-stream form select{ background-color:#212121; border:1px solid #1a1a1a; box-shadow:inset 0 2px 2px rgba(0,0,0,0.5);-moz-box-shadow:inset 0 2px 2px rgba(0,0,0,0.5);-webkit-box-shadow:inset 0 2px 2px rgba(0,0,0,0.5); color:#767676; font-family:Arial,Helvetica,sans-serif; font-size:12px; height:25px; margin:0; padding:2px 2px 2px 0; vertical-align:top;width:100%}div.jp-audio,div.jp-video{/* Edit the font-size to counteract inherited font sizing. * Eg. 1.25em = 1 / 0.8em */font-size:1em;/* No parent CSS that can effect the size in these demos */font-family:Verdana,Arial,sans-serif;line-height:1.6;color:#666}div.jp-audio{/*width:180px;*/}div.jp-video-270p{width:480px}div.jp-video-360p{width:640px}div.jp-interface{position:relative;background-color:#3D3D3D;background:-moz-linear-gradient(top,#4e4e4e 0,#3a3a3a 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4e4e4e),color-stop(100%,#3a3a3a));width:100%;border-top:1px solid #5a5a5a;border-bottom:1px solid #1a1a1a}div.jp-audio div.jp-type-single div.jp-interface{height:70px}div.jp-audio div.jp-type-playlist div.jp-interface{height:80px}div.jp-video div.jp-type-single div.jp-interface{height:60px;border-bottom:none}div.jp-video div.jp-type-playlist div.jp-interface{height:60px}div.jp-interface ul.jp-controls{list-style-type:none;padding:0;margin:0}div.jp-interface ul.jp-controls li{/* position:absolute;*/display:inline}div.jp-interface ul.jp-controls a{position:absolute;overflow:hidden;text-indent:-9999px}a.jp-play,a.jp-pause{width:75px;height:40px;z-index:1}div.jp-audio div.jp-type-single a.jp-play,div.jp-audio div.jp-type-single a.jp-pause{top:15px;left:15px}div.jp-audio div.jp-type-playlist a.jp-play,div.jp-audio div.jp-type-playlist a.jp-pause{top:20px;left:48px}div.jp-video a.jp-play,div.jp-video a.jp-pause{top:15px}div.jp-video-270p div.jp-type-single a.jp-play,div.jp-video-270p div.jp-type-single a.jp-pause{left:195px}div.jp-video-270p div.jp-type-playlist a.jp-play,div.jp-video-270p div.jp-type-playlist a.jp-pause{left:220px}div.jp-video-360p div.jp-type-single a.jp-play,div.jp-video-360p div.jp-type-single a.jp-pause{left:275px}div.jp-video-360p div.jp-type-playlist a.jp-play,div.jp-video-360p div.jp-type-playlist a.jp-pause{left:300px}a.jp-play{background:url(jplayer.png) 0 0 no-repeat}a.jp-play:hover{background:url(jplayer.png) -75px 0 no-repeat}a.jp-pause{background:url(jplayer.png) 0 -40px no-repeat;display:none}a.jp-pause:hover{background:url(jplayer.png) -75px -40px no-repeat}div.jp-audio div.jp-type-single a.jp-stop{top:26px;left:90px}div.jp-audio div.jp-type-playlist a.jp-stop{top:26px;left:126px}div.jp-video a.jp-stop{top:21px}div.jp-video-270p div.jp-type-single a.jp-stop{left:245px}div.jp-video-270p div.jp-type-playlist a.jp-stop{left:298px}div.jp-video-360p div.jp-type-single a.jp-stop{left:325px}div.jp-video-360p div.jp-type-playlist a.jp-stop{left:378px}a.jp-stop{background:url(jplayer.png) 0 -83px no-repeat;width:28px;height:28px;z-index:1}a.jp-stop:hover{background:url(jplayer.png) -29px -83px no-repeat}div.jp-audio div.jp-type-playlist a.jp-previous{left:20px;top:26px}div.jp-video div.jp-type-playlist a.jp-previous{top:21px}div.jp-video-270p div.jp-type-playlist a.jp-previous{left:192px}div.jp-video-360p div.jp-type-playlist a.jp-previous{left:272px}a.jp-previous{background:url(jplayer.png) 0 -112px no-repeat;width:28px;height:28px}a.jp-previous:hover{background:url(jplayer.png) -29px -112px no-repeat}div.jp-audio div.jp-type-playlist a.jp-next{left:88px;top:26px}div.jp-video div.jp-type-playlist a.jp-next{top:21px}div.jp-video-270p div.jp-type-playlist a.jp-next{left:260px}div.jp-video-360p div.jp-type-playlist a.jp-next{left:340px}a.jp-next{background:url(jplayer.png) 0 -141px no-repeat;width:28px;height:28px}a.jp-next:hover{background:url(jplayer.png) -29px -141px no-repeat}div.jp-progress{position:absolute;overflow:hidden;background-color:#ddd}div.jp-audio div.jp-type-single div.jp-progress{top:32px;left:130px;width:122px;height:15px}div.jp-audio div.jp-type-playlist div.jp-progress{top:32px;left:164px;width:122px;height:15px}div.jp-video div.jp-progress{top:0px;left:0px;width:100%;height:10px}div.jp-seek-bar{background:url(jplayer.png) 0 -202px repeat-x;width:0px;/* height:15px;*/height:100%;cursor:pointer}div.jp-play-bar{background:url(jplayer.png) 0 -218px repeat-x;width:0px;/* height:15px;*/height:100%}/* The seeking class is added/removed inside jPlayer */div.jp-seeking-bg{background:url(pbar-ani.gif)}a.jp-mute,a.jp-unmute,a.jp-volume-max{width:20px;height:20px}div.jp-audio div.jp-type-single a.jp-mute,div.jp-audio div.jp-type-single a.jp-unmute{top:45clearpx;left:210px}div.jp-audio div.jp-type-playlist a.jp-mute,div.jp-audio div.jp-type-playlist a.jp-unmute{top:32px;left:296px}div.jp-video a.jp-mute,div.jp-video a.jp-unmute{top:27px}div.jp-video-270p div.jp-type-single a.jp-mute,div.jp-video-270p div.jp-type-single a.jp-unmute{left:304px}div.jp-video-270p div.jp-type-playlist a.jp-unmute,div.jp-video-270p div.jp-type-playlist a.jp-mute{left:363px}div.jp-video-360p div.jp-type-single a.jp-mute,div.jp-video-360p div.jp-type-single a.jp-unmute{left:384px}div.jp-video-360p div.jp-type-playlist a.jp-mute,div.jp-video-360p div.jp-type-playlist a.jp-unmute{left:443px}a.jp-mute{background:url(jplayer.png) 0 -90px no-repeat}a.jp-mute:hover{background:url(jplayer.png) -30px -90px no-repeat}a.jp-unmute{background:url(jplayer.png) -61px -90px no-repeat;display:none}a.jp-unmute:hover{background:url(jplayer.png) -91px -90px no-repeat}div.jp-interface ul.jp-controls a.jp-volume-max{ background:url(jplayer.png) no-repeat scroll 0 -110px transparent}div.jp-interface ul.jp-controls a.jp-volume-max:hover{ background:url(jplayer.png) no-repeat scroll -30px -110px transparent}div.jp-audio ul.jp-controls a.jp-volume-max{ left:371px; top:28px}div.jp-volume-bar{position:absolute;overflow:hidden;background:#393939;-moz-box-shadow:rgba(0,0,0,0.5) 0 0 1px inset;-webkit-box-shadow:rgba(0,0,0,0.5) 0 0 1px inset;border-bottom:1px solid #5e5e5e;border-top:1px solid #262526;border-left:1px solid #262526;border-right:1px solid #262526;width:160px;height:4px;cursor:pointer}div.jp-audio div.jp-type-single div.jp-volume-bar{top:48px;left:225px}div.jp-audio div.jp-type-playlist div.jp-volume-bar{top:37px;left:324px}div.jp-video div.jp-volume-bar{top:32px}div.jp-video-270p div.jp-type-single div.jp-volume-bar{left:332px}div.jp-video-270p div.jp-type-playlist div.jp-volume-bar{left:391px}div.jp-video-360p div.jp-type-single div.jp-volume-bar{left:412px}div.jp-video-360p div.jp-type-playlist div.jp-volume-bar{left:471px}div.jp-volume-bar-value{background-color:#fb7018; background:-moz-linear-gradient(top,#fc9318 0,#e56815 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fc9318),color-stop(100%,#e56815));width:0px;height:3px}div.jp-current-time,div.jp-duration{position:absolute;font-size:.64em;font-style:oblique}div.jp-duration{text-align:right}div.jp-audio div.jp-type-single div.jp-current-time,div.jp-audio div.jp-type-single div.jp-duration{top:49px;left:130px;width:122px}div.jp-audio div.jp-type-playlist div.jp-current-time,div.jp-audio div.jp-type-playlist div.jp-duration{top:49px;left:164px;width:122px}div.jp-video div.jp-current-time,div.jp-video div.jp-duration{top:10px;left:0px;width:98%;padding:0 1%}div.jp-playlist{/* width:418px;*/width:100%;background-color:#ccc;/*border:1px solid #009be3;*/border-top:none}div.jp-playlist ul{list-style-type:none;margin:0;padding:0 20px;/* background-color:#ccc;*//* border:1px solid #009be3;*//* border-top:none;*//* width:378px;*/font-size:.72em}div.jp-type-single div.jp-playlist li{padding:5px 0 5px 20px;font-weight:bold}div.jp-type-playlist div.jp-playlist li{padding:5px 0 4px 20px;border-bottom:1px solid #eee}div.jp-type-playlist div.jp-playlist li.jp-playlist-last{padding:5px 0 5px 20px;border-bottom:none}div.jp-type-playlist div.jp-playlist li.jp-playlist-current{list-style-type:square;list-style-position:inside;padding-left:8px}div.jp-type-playlist div.jp-playlist a{color:#666;text-decoration:none}div.jp-type-playlist div.jp-playlist a:hover{color:#0d88c1}div.jp-type-playlist div.jp-playlist a.jp-playlist-current{color:#0d88c1}div.jp-type-playlist div.jp-playlist div.jp-free-media{display:inline;margin-left:20px}div.jp-video div.jp-video-play{background:transparent url(jplayer.blue.monday.video.play.png) no-repeat center;/* position:relative;*/position:absolute;cursor:pointer;z-index:2}div.jp-video div.jp-video-play:hover{background:transparent url(jplayer.blue.monday.video.play.hover.png) no-repeat center}div.jp-video-270p div.jp-video-play{top:-270px;width:480px;height:270px}div.jp-video-360p div.jp-video-play{top:-360px;width:640px;height:360px}div.jp-jplayer{width:0px;height:0px}div.jp-video div.jp-jplayer{border:1px solid #009be3;border-bottom:none;z-index:1}div.jp-video-270p div.jp-jplayer{width:480px;height:270px}div.jp-video-360p div.jp-jplayer{width:640px;height:360px}div.jp-jplayer{background-color:#000}div.jp-now-playing{height:19px;padding:3px 0 0 15px;color:#a7a7a7;font-size:12px;border-top:1px solid #515151;border-bottom:1px solid #2c2c2c;background-color:#353535;background:-moz-linear-gradient(top,#3e3e3e 0,#353535 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3e3e3e),color-stop(100%,#353535))}div.jp-now-playing span{color:#898989}
+@charset "utf-8";
+    /* * Skin for jPlayer Plugin (jQuery JavaScript Library) * http: //www.happyworm.com/jquery/jplayer * * Skin Name:Blue Monday * * Copyright (c) 2010 Happyworm Ltd * Dual licensed under the MIT and GPL licenses. *  - http://www.opensource.org/licenses/mit-license.php *  - http://www.gnu.org/copyleft/gpl.html * * Author:Silvia Benvenuti * Skin Version:3.0 (jPlayer 2.0.0) * Date:20th December 2010 */.jp-container {
+    background: #282828;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    width: 400px;
+    position: relative;
+}
+.jp-container h1 {
+    color: #CCC;
+    font-size: 20px;
+    font-weight: normal;
+    margin: 0;
+    padding: 8px 0;
+    position: absolute;
+    right: 16px;
+    text-align: center;
+    text-shadow: 0 -1px 1px #000;
+    top: 12px;
+}
+.jp-logo {
+    width: 400px;
+    height: 67px;
+    background: #282828 no-repeat 120px 14px;
+    background: no-repeat 120px 14px, -moz-radial-gradient(200px 0px, circle cover, rgba(70, 70, 70, 1) 0%, rgba(40, 40, 40, 1) 90%);
+    background: no-repeat 120px 14px, -webkit-radial-gradient(170px 20px, rgba(70, 70, 70, 1) 0%, rgba(40, 40, 40, 1) 70%);
+    display: block;
+}
+.jp-logo img {
+    display: block;
+    display: block;
+    padding: 14px 0 0 16px;
+}
+.jp-stream {
+    height: 27px;
+    display: block;
+    border-top: 1px solid #050505;
+    color: #ff5d1a;
+    font-size: 12px;
+    padding: 6px 4px 4px 16px;
+    background: #313131;
+    background: -moz-linear-gradient(top, #292929 0, #3a3a3a 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #292929), color-stop(100%, #3a3a3a));
+    box-shadow: rgba(248, 248, 248, .3) 0px 1px 0px, rgba(0, 0, 0, 0.2) 0 2px 2px inset;
+    -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 0 5px inset;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 0 5px inset;
+    line-height: 23px;
+}
+.jp-stream-text, .jp-stream form {
+    float: left;
+}
+.jp-stream form {
+    margin-left: 10px;
+    width: 283px;
+}
+.jp-stream label {
+    color: #ababab;
+    padding: 0 10px 0 0;
+    font-size: 12px;
+}
+.jp-stream label input[type="radio"] {
+}
+.jp-stream form input[type="text"], .jp-stream form select {
+    background-color: #212121;
+    border: 1px solid #1a1a1a;
+    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
+    -moz-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
+    -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
+    color: #767676;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 12px;
+    height: 25px;
+    margin: 0;
+    padding: 2px 2px 2px 0;
+    vertical-align: top;
+    width: 100%}
+div.jp-audio, div.jp-video {
+    /* Edit the font-size to counteract inherited font sizing. * Eg. 1.25em = 1 / 0.8em */font-size: 1em;
+    /* No parent CSS that can effect the size in these demos */font-family: Verdana, Arial, sans-serif;
+    line-height: 1.6;
+    color: #666;
+}
+div.jp-audio {
+    /*width: 180px;
+    */}
+div.jp-video-270p {
+    width: 480px;
+}
+div.jp-video-360p {
+    width: 640px;
+}
+div.jp-interface {
+    position: relative;
+    background-color: #3D3D3D;
+    background: -moz-linear-gradient(top, #4e4e4e 0, #3a3a3a 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4e4e4e), color-stop(100%, #3a3a3a));
+    width: 100%;
+    border-top: 1px solid #5a5a5a;
+    border-bottom: 1px solid #1a1a1a;
+}
+div.jp-audio div.jp-type-single div.jp-interface {
+    height: 70px;
+}
+div.jp-audio div.jp-type-playlist div.jp-interface {
+    height: 80px;
+}
+div.jp-video div.jp-type-single div.jp-interface {
+    height: 60px;
+    border-bottom: none;
+}
+div.jp-video div.jp-type-playlist div.jp-interface {
+    height: 60px;
+}
+div.jp-interface ul.jp-controls {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+div.jp-interface ul.jp-controls li {
+    /* position: absolute;
+    */display: inline;
+}
+div.jp-interface ul.jp-controls a {
+    position: absolute;
+    overflow: hidden;
+    text-indent: -9999px;
+}
+a.jp-play, a.jp-pause {
+    width: 75px;
+    height: 40px;
+    z-index: 1;
+}
+div.jp-audio div.jp-type-single a.jp-play, div.jp-audio div.jp-type-single a.jp-pause {
+    top: 15px;
+    left: 15px;
+}
+div.jp-audio div.jp-type-playlist a.jp-play, div.jp-audio div.jp-type-playlist a.jp-pause {
+    top: 20px;
+    left: 48px;
+}
+div.jp-video a.jp-play, div.jp-video a.jp-pause {
+    top: 15px;
+}
+div.jp-video-270p div.jp-type-single a.jp-play, div.jp-video-270p div.jp-type-single a.jp-pause {
+    left: 195px;
+}
+div.jp-video-270p div.jp-type-playlist a.jp-play, div.jp-video-270p div.jp-type-playlist a.jp-pause {
+    left: 220px;
+}
+div.jp-video-360p div.jp-type-single a.jp-play, div.jp-video-360p div.jp-type-single a.jp-pause {
+    left: 275px;
+}
+div.jp-video-360p div.jp-type-playlist a.jp-play, div.jp-video-360p div.jp-type-playlist a.jp-pause {
+    left: 300px;
+}
+a.jp-play {
+    background: url(jplayer.png) 0 0 no-repeat;
+}
+a.jp-play:hover {
+    background: url(jplayer.png) -75px 0 no-repeat;
+}
+a.jp-pause {
+    background: url(jplayer.png) 0 -40px no-repeat;
+    display: none;
+}
+a.jp-pause:hover {
+    background: url(jplayer.png) -75px -40px no-repeat;
+}
+div.jp-audio div.jp-type-single a.jp-stop {
+    top: 26px;
+    left: 90px;
+}
+div.jp-audio div.jp-type-playlist a.jp-stop {
+    top: 26px;
+    left: 126px;
+}
+div.jp-video a.jp-stop {
+    top: 21px;
+}
+div.jp-video-270p div.jp-type-single a.jp-stop {
+    left: 245px;
+}
+div.jp-video-270p div.jp-type-playlist a.jp-stop {
+    left: 298px;
+}
+div.jp-video-360p div.jp-type-single a.jp-stop {
+    left: 325px;
+}
+div.jp-video-360p div.jp-type-playlist a.jp-stop {
+    left: 378px;
+}
+a.jp-stop {
+    background: url(jplayer.png) 0 -83px no-repeat;
+    width: 28px;
+    height: 28px;
+    z-index: 1;
+}
+a.jp-stop:hover {
+    background: url(jplayer.png) -29px -83px no-repeat;
+}
+div.jp-audio div.jp-type-playlist a.jp-previous {
+    left: 20px;
+    top: 26px;
+}
+div.jp-video div.jp-type-playlist a.jp-previous {
+    top: 21px;
+}
+div.jp-video-270p div.jp-type-playlist a.jp-previous {
+    left: 192px;
+}
+div.jp-video-360p div.jp-type-playlist a.jp-previous {
+    left: 272px;
+}
+a.jp-previous {
+    background: url(jplayer.png) 0 -112px no-repeat;
+    width: 28px;
+    height: 28px;
+}
+a.jp-previous:hover {
+    background: url(jplayer.png) -29px -112px no-repeat;
+}
+div.jp-audio div.jp-type-playlist a.jp-next {
+    left: 88px;
+    top: 26px;
+}
+div.jp-video div.jp-type-playlist a.jp-next {
+    top: 21px;
+}
+div.jp-video-270p div.jp-type-playlist a.jp-next {
+    left: 260px;
+}
+div.jp-video-360p div.jp-type-playlist a.jp-next {
+    left: 340px;
+}
+a.jp-next {
+    background: url(jplayer.png) 0 -141px no-repeat;
+    width: 28px;
+    height: 28px;
+}
+a.jp-next:hover {
+    background: url(jplayer.png) -29px -141px no-repeat;
+}
+div.jp-progress {
+    position: absolute;
+    overflow: hidden;
+    background-color: #ddd;
+}
+div.jp-audio div.jp-type-single div.jp-progress {
+    top: 32px;
+    left: 130px;
+    width: 122px;
+    height: 15px;
+}
+div.jp-audio div.jp-type-playlist div.jp-progress {
+    top: 32px;
+    left: 164px;
+    width: 122px;
+    height: 15px;
+}
+div.jp-video div.jp-progress {
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 10px;
+}
+div.jp-seek-bar {
+    background: url(jplayer.png) 0 -202px repeat-x;
+    width: 0px;
+    /* height: 15px;
+    */height: 100%;
+    cursor: pointer;
+}
+div.jp-play-bar {
+    background: url(jplayer.png) 0 -218px repeat-x;
+    width: 0px;
+    /* height: 15px; */
+    height: 100%
+}
+/* The seeking class is added/removed inside jPlayer */
+div.jp-seeking-bg {
+    background: url(pbar-ani.gif);
+}
+a.jp-mute, a.jp-unmute, a.jp-volume-max {
+    width: 20px;
+    height: 20px;
+}
+div.jp-audio div.jp-type-single a.jp-mute, div.jp-audio div.jp-type-single a.jp-unmute {
+    top: 45clearpx;
+    left: 210px;
+}
+div.jp-audio div.jp-type-playlist a.jp-mute, div.jp-audio div.jp-type-playlist a.jp-unmute {
+    top: 32px;
+    left: 296px;
+}
+div.jp-video a.jp-mute, div.jp-video a.jp-unmute {
+    top: 27px;
+}
+div.jp-video-270p div.jp-type-single a.jp-mute, div.jp-video-270p div.jp-type-single a.jp-unmute {
+    left: 304px;
+}
+div.jp-video-270p div.jp-type-playlist a.jp-unmute, div.jp-video-270p div.jp-type-playlist a.jp-mute {
+    left: 363px;
+}
+div.jp-video-360p div.jp-type-single a.jp-mute, div.jp-video-360p div.jp-type-single a.jp-unmute {
+    left: 384px;
+}
+div.jp-video-360p div.jp-type-playlist a.jp-mute, div.jp-video-360p div.jp-type-playlist a.jp-unmute {
+    left: 443px;
+}
+a.jp-mute {
+    background: url(jplayer.png) 0 -90px no-repeat;
+}
+a.jp-mute:hover {
+    background: url(jplayer.png) -30px -90px no-repeat;
+}
+a.jp-unmute {
+    background: url(jplayer.png) -61px -90px no-repeat;
+    display: none;
+}
+a.jp-unmute:hover {
+    background: url(jplayer.png) -91px -90px no-repeat;
+}
+div.jp-interface ul.jp-controls a.jp-volume-max {
+     background: url(jplayer.png) no-repeat scroll 0 -110px transparent;
+}
+div.jp-interface ul.jp-controls a.jp-volume-max:hover {
+     background: url(jplayer.png) no-repeat scroll -30px -110px transparent;
+}
+div.jp-audio ul.jp-controls a.jp-volume-max {
+     left: 371px;
+     top: 28px;
+}
+div.jp-volume-bar {
+    position: absolute;
+    overflow: hidden;
+    background: #393939;
+    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 1px inset;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 1px inset;
+    border-bottom: 1px solid #5e5e5e;
+    border-top: 1px solid #262526;
+    border-left: 1px solid #262526;
+    border-right: 1px solid #262526;
+    width: 160px;
+    height: 4px;
+    cursor: pointer;
+}
+div.jp-audio div.jp-type-single div.jp-volume-bar {
+    top: 48px;
+    left: 225px;
+}
+div.jp-audio div.jp-type-playlist div.jp-volume-bar {
+    top: 37px;
+    left: 324px;
+}
+div.jp-video div.jp-volume-bar {
+    top: 32px;
+}
+div.jp-video-270p div.jp-type-single div.jp-volume-bar {
+    left: 332px;
+}
+div.jp-video-270p div.jp-type-playlist div.jp-volume-bar {
+    left: 391px;
+}
+div.jp-video-360p div.jp-type-single div.jp-volume-bar {
+    left: 412px;
+}
+div.jp-video-360p div.jp-type-playlist div.jp-volume-bar {
+    left: 471px;
+}
+div.jp-volume-bar-value {
+    background-color: #fb7018;
+    background: -moz-linear-gradient(top, #fc9318 0, #e56815 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fc9318), color-stop(100%, #e56815));
+    width: 0px;
+    height: 3px;
+}
+div.jp-current-time, div.jp-duration {
+    position: absolute;
+    font-size: .64em;
+    font-style: oblique;
+}
+div.jp-duration {
+    text-align: right;
+}
+div.jp-audio div.jp-type-single div.jp-current-time, div.jp-audio div.jp-type-single div.jp-duration {
+    top: 49px;
+    left: 130px;
+    width: 122px;
+}
+div.jp-audio div.jp-type-playlist div.jp-current-time, div.jp-audio div.jp-type-playlist div.jp-duration {
+    top: 49px;
+    left: 164px;
+    width: 122px;
+}
+div.jp-video div.jp-current-time, div.jp-video div.jp-duration {
+    top: 10px;
+    left: 0px;
+    width: 98%;
+    padding: 0 1%}
+div.jp-playlist {
+    /* width: 418px; */
+    width: 100%;
+    background-color: #ccc;
+    /*border: 1px solid #009be3; */
+    border-top: none;
+}
+div.jp-playlist ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0 20px;
+    /* background-color: #ccc;
+    *//* border: 1px solid #009be3;
+    *//* borderg-top: none;
+    *//* width: 378px;
+    */font-size: .72em;
+}
+div.jp-type-single div.jp-playlist li {
+    padding: 5px 0 5px 20px;
+    font-weight: bold;
+}
+div.jp-type-playlist div.jp-playlist li {
+    padding: 5px 0 4px 20px;
+    border-bottom: 1px solid #eee;
+}
+div.jp-type-playlist div.jp-playlist li.jp-playlist-last {
+    padding: 5px 0 5px 20px;
+    border-bottom: none;
+}
+div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
+    list-style-type: square;
+    list-style-position: inside;
+    padding-left: 8px;
+}
+div.jp-type-playlist div.jp-playlist a {
+    color: #666;
+    text-decoration: none;
+}
+div.jp-type-playlist div.jp-playlist a:hover {
+    color: #0d88c1;
+}
+div.jp-type-playlist div.jp-playlist a.jp-playlist-current {
+    color: #0d88c1;
+}
+div.jp-type-playlist div.jp-playlist div.jp-free-media {
+    display: inline;
+    margin-left: 20px;
+}
+div.jp-video div.jp-video-play {
+    background: transparent url(jplayer.blue.monday.video.play.png) no-repeat center;
+    /* position: relative;
+    */position: absolute;
+    cursor: pointer;
+    z-index: 2;
+}
+div.jp-video div.jp-video-play:hover {
+    background: transparent url(jplayer.blue.monday.video.play.hover.png) no-repeat center;
+}
+div.jp-video-270p div.jp-video-play {
+    top: -270px;
+    width: 480px;
+    height: 270px;
+}
+div.jp-video-360p div.jp-video-play {
+    top: -360px;
+    width: 640px;
+    height: 360px;
+}
+div.jp-jplayer {
+    width: 0px;
+    height: 0px;
+}
+div.jp-video div.jp-jplayer {
+    border: 1px solid #009be3;
+    border-bottom: none;
+    z-index: 1;
+}
+div.jp-video-270p div.jp-jplayer {
+    width: 480px;
+    height: 270px;
+}
+div.jp-video-360p div.jp-jplayer {
+    width: 640px;
+    height: 360px;
+}
+div.jp-jplayer {
+    background-color: #000;
+}
+div.jp-now-playing {
+    height: 19px;
+    padding: 3px 0 0 15px;
+    color: #a7a7a7;
+    font-size: 12px;
+    border-top: 1px solid #515151;
+    border-bottom: 1px solid #2c2c2c;
+    background-color: #353535;
+    background: -moz-linear-gradient(top, #3e3e3e 0, #353535 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3e3e3e), color-stop(100%, #353535));
+}
+div.jp-now-playing span {
+    color: #898989;
+}