+/*\r
+ * Skin for jPlayer Plugin (jQuery JavaScript Library)\r
+ * http://www.happyworm.com/jquery/jplayer\r
+ *\r
+ * Skin Name: Blue Monday\r
+ *\r
+ * Copyright (c) 2010-2011 Happyworm Ltd\r
+ * Dual licensed under the MIT and GPL licenses.\r
+ * - http://www.opensource.org/licenses/mit-license.php\r
+ * - http://www.gnu.org/copyleft/gpl.html\r
+ *\r
+ * Author: Silvia Benvenuti\r
+ * Skin Version: 4.0 (jPlayer 2.1.0)\r
+ * Date: 1st September 2011\r
+ */\r
+\r
+div.jp-audio,\r
+div.jp-video {\r
+\r
+ /* Edit the font-size to counteract inherited font sizing.\r
+ * Eg. 1.25em = 1 / 0.8em\r
+ */\r
+\r
+ font-size:1.25em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */\r
+\r
+ font-family:Verdana, Arial, sans-serif;\r
+ line-height:1.6;\r
+ color: #666;\r
+ border:1px solid #009be3;\r
+ background-color:#eee;\r
+ position:relative;\r
+}\r
+div.jp-audio {\r
+ width:420px;\r
+}\r
+div.jp-video-270p {\r
+ width:480px;\r
+}\r
+div.jp-video-360p {\r
+ width:640px;\r
+}\r
+div.jp-video-full {\r
+ /* Rules for IE6 (full-screen) */\r
+ width:480px;\r
+ height:270px;\r
+ /* 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. */\r
+ position:static !important; position:relative\r
+}\r
+\r
+div.jp-video-full div.jp-jplayer {\r
+ top: 0;\r
+ left: 0;\r
+ position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */\r
+ overflow: hidden;\r
+ z-index:1000;\r
+}\r
+\r
+div.jp-video-full div.jp-gui {\r
+ position: fixed !important; position: static; /* Rules for IE6 (full-screen) */\r
+ top: 0;\r
+ left: 0;\r
+ width:100%;\r
+ height:100%;\r
+ z-index:1000;\r
+}\r
+\r
+div.jp-video-full div.jp-interface {\r
+ position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */\r
+ bottom: 0;\r
+ left: 0;\r
+ z-index:1000;\r
+}\r
+\r
+div.jp-interface {\r
+ position: relative;\r
+ background-color:#eee;\r
+ width:100%;\r
+}\r
+\r
+div.jp-audio div.jp-type-single div.jp-interface {\r
+ height:80px;\r
+}\r
+div.jp-audio div.jp-type-playlist div.jp-interface {\r
+ height:80px;\r
+}\r
+\r
+div.jp-video div.jp-interface {\r
+ border-top:1px solid #009be3;\r
+}\r
+\r
+/* @group CONTROLS */\r
+\r
+div.jp-controls-holder {\r
+ clear: both;\r
+ width:440px;\r
+ margin:0 auto;\r
+ position: relative;\r
+ overflow:hidden;\r
+ top:-8px; /* This negative value depends on the size of the text in jp-currentTime and jp-duration */\r
+}\r
+\r
+div.jp-interface ul.jp-controls {\r
+ list-style-type:none;\r
+ margin:0;\r
+ padding: 0;
+ overflow:hidden;
+}
+
+div.jp-audio ul.jp-controls {
+ width: 380px;\r
+ padding:20px 20px 0 20px;\r
+}
+
+div.jp-video div.jp-type-single ul.jp-controls {
+ width: 78px;\r
+ margin-left: 200px;\r
+}
+
+div.jp-video div.jp-type-playlist ul.jp-controls {
+ width: 134px;\r
+ margin-left: 172px;\r
+}
+div.jp-video ul.jp-controls,\r
+div.jp-interface ul.jp-controls li {\r
+ display:inline;
+ float: left;
+}\r
+\r
+div.jp-interface ul.jp-controls a {\r
+ display:block;\r
+ overflow:hidden;\r
+ text-indent:-9999px;\r
+}\r
+a.jp-play,\r
+a.jp-pause {\r
+ width:40px;\r
+ height:40px;\r
+}\r
+\r
+a.jp-play {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 0 no-repeat;\r
+}\r
+a.jp-play:hover {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -41px 0 no-repeat;\r
+}\r
+a.jp-pause {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -42px no-repeat;\r
+ display: none;\r
+}\r
+a.jp-pause:hover {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -41px -42px no-repeat;\r
+}\r
+
+a.jp-stop, a.jp-previous, a.jp-next {\r
+ width:28px;\r
+ height:28px;
+ margin-top:6px;\r
+}\r
+
+a.jp-stop {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -83px no-repeat;\r
+ margin-left:10px;
+}
+\r
+a.jp-stop:hover {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -29px -83px no-repeat;\r
+}
+\r
+a.jp-previous {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -112px no-repeat;\r
+}\r
+a.jp-previous:hover {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -29px -112px no-repeat;\r
+}
+
+a.jp-next {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -141px no-repeat;\r
+}\r
+a.jp-next:hover {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -29px -141px no-repeat;\r
+}\r
+\r
+/* @end */\r
+\r
+/* @group progress bar */\r
+\r
+div.jp-progress {\r
+ overflow:hidden;\r
+ background-color: #ddd;\r
+}\r
+div.jp-audio div.jp-progress {\r
+ position: absolute;\r
+ top:32px;\r
+ height:15px;\r
+}\r
+div.jp-audio div.jp-type-single div.jp-progress {\r
+ left:110px;\r
+ width:186px;\r
+}\r
+div.jp-audio div.jp-type-playlist div.jp-progress {\r
+ left:166px;\r
+ width:130px;\r
+}\r
+div.jp-video div.jp-progress {\r
+ top:0px;\r
+ left:0px;\r
+ width:100%;\r
+ height:10px;\r
+}\r
+div.jp-seek-bar {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -202px repeat-x;\r
+ width:0px;\r
+ height:100%;\r
+ cursor: pointer;\r
+}\r
+div.jp-play-bar {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -218px repeat-x ;\r
+ width:0px;\r
+ height:100%;\r
+}\r
+\r
+/* The seeking class is added/removed inside jPlayer */\r
+div.jp-seeking-bg {\r
+ background: url("/static/jplayer/jplayer.blue.monday.seeking.gif");\r
+}\r
+\r
+/* @end */\r
+\r
+/* @group volume controls */\r
+\r
+\r
+a.jp-mute,\r
+a.jp-unmute,\r
+a.jp-volume-max {\r
+ width:18px;\r
+ height:15px;
+ margin-top:12px;
+}
+
+div.jp-audio div.jp-type-single a.jp-mute,\r
+div.jp-audio div.jp-type-single a.jp-unmute {
+ margin-left: 210px;
+}
+
+div.jp-audio div.jp-type-playlist a.jp-mute,\r
+div.jp-audio div.jp-type-playlist a.jp-unmute {
+ margin-left: 154px;\r
+}
+\r
+div.jp-audio a.jp-volume-max {\r
+ margin-left: 56px; \r
+}\r
+\r
+div.jp-video a.jp-mute,\r
+div.jp-video a.jp-unmute,\r
+div.jp-video a.jp-volume-max {\r
+ position: absolute;\r
+ top:12px;\r
+ margin-top:0;\r
+}\r
+\r
+div.jp-video a.jp-mute,\r
+div.jp-video a.jp-unmute {
+ left: 50px;\r
+}
+\r\r
+div.jp-video a.jp-volume-max {\r
+ left: 134px;\r
+}\r
+\r
+a.jp-mute {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -170px no-repeat;\r
+}\r
+a.jp-mute:hover {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -19px -170px no-repeat;\r
+}\r
+a.jp-unmute {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -60px -170px no-repeat;\r
+ display: none;\r
+}\r
+a.jp-unmute:hover {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -79px -170px no-repeat;\r
+}
+\ra.jp-volume-max {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -186px no-repeat;\r
+}\r
+a.jp-volume-max:hover {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -19px -186px no-repeat;\r
+}\r
+
+div.jp-volume-bar {\r
+ position: absolute;\r
+ overflow:hidden;\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -250px repeat-x;\r
+ width:46px;\r
+ height:5px;\r
+ cursor: pointer;\r
+}\r
+div.jp-audio div.jp-volume-bar {\r
+ top:37px;\r
+ left:330px;\r
+}\r
+div.jp-video div.jp-volume-bar {\r
+ top:17px;\r
+ left:72px;\r
+}\r
+div.jp-volume-bar-value {\r
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -256px repeat-x;\r
+ width:0px;\r
+ height:5px;\r
+}\r
+\r
+/* @end */\r
+\r
+/* @group current time and duration */\r
+\r
+div.jp-audio div.jp-time-holder {\r
+ position:absolute;\r
+ top:50px;\r
+}\r
+div.jp-audio div.jp-type-single div.jp-time-holder {\r
+ left:110px;\r
+ width:186px;\r
+}\r
+div.jp-audio div.jp-type-playlist div.jp-time-holder {\r
+ left:166px;\r
+ width:130px;\r
+}\r
+\r
+div.jp-current-time,\r
+div.jp-duration {\r
+ width:60px;\r
+ font-size:.64em;\r
+ font-style:oblique;
+}\r
+div.jp-current-time {\r
+ float: left;\r
+ display:inline;\r
+}\r
+div.jp-duration {\r
+ float: right;\r
+ display:inline;\r
+ text-align: right;\r
+}\r
+\r
+div.jp-video div.jp-current-time {\r
+ margin-left:20px;\r
+}\r
+div.jp-video div.jp-duration {\r
+ margin-right:20px;\r
+}\r
+\r
+/* @end */\r
+\r
+/* @group playlist */\r
+\r
+div.jp-title {\r
+ font-weight:bold;\r
+ text-align:center;\r
+}\r
+\r
+div.jp-title,\r
+div.jp-playlist {\r
+ width:100%;\r
+ background-color:#ccc;\r
+ border-top:1px solid #009be3;\r
+}\r
+div.jp-type-single div.jp-title,\r
+div.jp-type-playlist div.jp-title,\r
+div.jp-type-single div.jp-playlist {\r
+ border-top:none;\r
+}\r
+div.jp-title ul,\r
+div.jp-playlist ul {\r
+ list-style-type:none;\r
+ margin:0;\r
+ padding:0 20px;\r
+ font-size:.72em;\r
+}\r
+\r
+div.jp-title li {\r
+ padding:5px 0;\r
+ font-weight:bold;\r
+}\r
+div.jp-playlist li {\r
+ padding:5px 0 4px 20px;\r
+ border-bottom:1px solid #eee;\r
+}\r
+\r
+div.jp-playlist li div {\r
+ display:inline;\r
+}\r
+\r
+/* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */\r
+\r
+div.jp-type-playlist div.jp-playlist li:last-child {\r
+ padding:5px 0 5px 20px;\r
+ border-bottom:none;\r
+}\r
+div.jp-type-playlist div.jp-playlist li.jp-playlist-current {\r
+ list-style-type:square;\r
+ list-style-position:inside;\r
+ padding-left:7px;\r
+}\r
+div.jp-type-playlist div.jp-playlist a {\r
+ color: #333;\r
+ text-decoration: none;\r
+}\r
+div.jp-type-playlist div.jp-playlist a:hover {\r
+ color:#0d88c1;\r
+}\r
+div.jp-type-playlist div.jp-playlist a.jp-playlist-current {\r
+ color:#0d88c1;\r
+}\r
+\r
+div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove {\r
+ float:right;\r
+ display:inline;\r
+ text-align:right;\r
+ margin-right:10px;\r
+ font-weight:bold;\r
+ color:#666;\r
+}\r
+div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {\r
+ color:#0d88c1;\r
+}\r
+div.jp-type-playlist div.jp-playlist span.jp-free-media {\r
+ float:right;\r
+ display:inline;\r
+ text-align:right;\r
+ margin-right:10px;\r
+}\r
+div.jp-type-playlist div.jp-playlist span.jp-free-media a{\r
+ color:#666;\r
+}\r
+div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover{\r
+ color:#0d88c1;\r
+}\r
+span.jp-artist {\r
+ font-size:.8em;\r
+ color:#666;\r
+}\r
+\r
+/* @end */\r
+\r
+div.jp-video-play {\r
+ position:absolute;\r
+ top:0;\r
+ left:0;\r
+ width:100%;\r
+ cursor:pointer;\r
+ background-color:rgba(0,0,0,0); /* Makes IE9 work with the active area over the whole video area. IE6/7/8 only have the button as active area. */\r
+}\r
+div.jp-video-270p div.jp-video-play {\r
+ height:270px;\r
+}\r
+div.jp-video-360p div.jp-video-play {\r
+ height:360px;\r
+}\r
+div.jp-video-full div.jp-video-play {\r
+ height:100%;\r
+ z-index:1000;\r
+}\r
+a.jp-video-play-icon {\r
+ position:relative;\r
+ display:block;\r
+ width: 112px;\r
+ height: 100px;\r
+\r
+ margin-left:-56px;\r
+ margin-top:-50px;\r
+ left:50%;\r
+ top:50%;\r
+\r
+ background: url("/static/jplayer/jplayer.blue.monday.video.play.png") 0 0 no-repeat;\r
+ text-indent:-9999px;\r
+}\r
+div.jp-video-play:hover a.jp-video-play-icon {\r
+ background: url("/static/jplayer/jplayer.blue.monday.video.play.png") 0 -100px no-repeat;\r
+}\r
+\r
+\r
+\r
+\r
+\r
+div.jp-jplayer audio,\r
+div.jp-jplayer {\r
+ width:0px;\r
+ height:0px;\r
+}\r
+\r
+div.jp-jplayer {\r
+ background-color: #000000;\r
+}
+
+
+
+
+
+/* @group TOGGLES */
+\r
+/* The audio toggles are nested inside jp-time-holder */\r
+
+ul.jp-toggles {
+ list-style-type:none;
+ padding:0;
+ margin:0 auto;\r
+ overflow:hidden;
+}
+
+div.jp-audio .jp-type-single ul.jp-toggles {
+ width:25px;
+}
+div.jp-audio .jp-type-playlist ul.jp-toggles {\r
+ width:55px;\r
+ margin: 0;\r
+ position: absolute;\r
+ left: 325px;\r
+ top: 50px;\r
+}\r
+
+div.jp-video ul.jp-toggles {
+ margin-top:10px;\r
+ width:100px;\r
+}
+
+ul.jp-toggles li {
+ display:block;
+ float:right;
+}
+
+ul.jp-toggles li a {
+ display:block;
+ width:25px;
+ height:18px;
+ text-indent:-9999px;\r
+ line-height:100%; /* need this for IE6 */
+}
+
+a.jp-full-screen {
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -310px no-repeat;
+ margin-left: 20px;
+}
+
+a.jp-full-screen:hover {
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -30px -310px no-repeat;
+}
+
+a.jp-restore-screen {
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -60px -310px no-repeat;
+ margin-left: 20px;\r
+}
+
+a.jp-restore-screen:hover {
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -90px -310px no-repeat;
+}
+
+a.jp-repeat {
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -290px no-repeat;
+}
+
+a.jp-repeat:hover {
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -30px -290px no-repeat;
+}
+
+a.jp-repeat-off {
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -60px -290px no-repeat;
+}
+
+a.jp-repeat-off:hover {
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -90px -290px no-repeat;
+}
+
+a.jp-shuffle {
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -270px no-repeat;
+ margin-left: 5px;
+}
+
+a.jp-shuffle:hover {
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -30px -270px no-repeat;
+}
+
+a.jp-shuffle-off {
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -60px -270px no-repeat;
+ margin-left: 5px;\r
+}
+
+a.jp-shuffle-off:hover {
+ background: url("/static/jplayer/jplayer.blue.monday.jpg") -90px -270px no-repeat;
+}
+
+
+/* @end */\r
+\r
+/* @group NO SOLUTION error feedback */\r
+\r
+.jp-no-solution {\r
+ position:absolute;\r
+ width:390px;\r
+ margin-left:-202px;\r
+ left:50%;\r
+ top: 10px;\r
+\r
+ padding:5px;\r
+ font-size:.8em;\r
+ background-color:#eee;\r
+ border:2px solid #009be3;\r
+ color:#000;\r
+ display:none;\r
+}\r
+\r
+.jp-no-solution a {\r
+ color:#000;\r
+}\r
+\r
+.jp-no-solution span {\r
+ font-size:1em;\r
+ display:block;\r
+ text-align:center;\r
+ font-weight:bold;\r
+}\r
+\r
+/* @end */\r