jplayer
[wolnelektury.git] / wolnelektury / static / jplayer / jplayer.blue.monday.css
diff --git a/wolnelektury/static/jplayer/jplayer.blue.monday.css b/wolnelektury/static/jplayer/jplayer.blue.monday.css
new file mode 100644 (file)
index 0000000..0d90a22
--- /dev/null
@@ -0,0 +1,623 @@
+/*\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