Merge branch 'pretty' of github.com:fnp/wolnelektury into pretty
[wolnelektury.git] / wolnelektury / static / jplayer / jplayer.blue.monday.css
1 /*\r
2  * Skin for jPlayer Plugin (jQuery JavaScript Library)\r
3  * http://www.happyworm.com/jquery/jplayer\r
4  *\r
5  * Skin Name: Blue Monday\r
6  *\r
7  * Copyright (c) 2010-2011 Happyworm Ltd\r
8  * Dual licensed under the MIT and GPL licenses.\r
9  *  - http://www.opensource.org/licenses/mit-license.php\r
10  *  - http://www.gnu.org/copyleft/gpl.html\r
11  *\r
12  * Author: Silvia Benvenuti\r
13  * Skin Version: 4.0 (jPlayer 2.1.0)\r
14  * Date: 1st September 2011\r
15  */\r
16 \r
17 div.jp-audio,\r
18 div.jp-video {\r
19 \r
20         /* Edit the font-size to counteract inherited font sizing.\r
21          * Eg. 1.25em = 1 / 0.8em\r
22          */\r
23 \r
24         font-size:1.25em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */\r
25 \r
26         font-family:Verdana, Arial, sans-serif;\r
27         line-height:1.6;\r
28         color: #666;\r
29         border:1px solid #009be3;\r
30         background-color:#eee;\r
31         position:relative;\r
32 }\r
33 div.jp-audio {\r
34         width:420px;\r
35 }\r
36 div.jp-video-270p {\r
37         width:480px;\r
38 }\r
39 div.jp-video-360p {\r
40         width:640px;\r
41 }\r
42 div.jp-video-full {\r
43         /* Rules for IE6 (full-screen) */\r
44         width:480px;\r
45         height:270px;\r
46         /* 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
47         position:static !important; position:relative\r
48 }\r
49 \r
50 div.jp-video-full div.jp-jplayer {\r
51         top: 0;\r
52         left: 0;\r
53         position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */\r
54         overflow: hidden;\r
55         z-index:1000;\r
56 }\r
57 \r
58 div.jp-video-full div.jp-gui {\r
59         position: fixed !important; position: static; /* Rules for IE6 (full-screen) */\r
60         top: 0;\r
61         left: 0;\r
62         width:100%;\r
63         height:100%;\r
64         z-index:1000;\r
65 }\r
66 \r
67 div.jp-video-full div.jp-interface {\r
68         position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */\r
69         bottom: 0;\r
70         left: 0;\r
71         z-index:1000;\r
72 }\r
73 \r
74 div.jp-interface {\r
75         position: relative;\r
76         background-color:#eee;\r
77         width:100%;\r
78 }\r
79 \r
80 div.jp-audio div.jp-type-single div.jp-interface {\r
81         height:80px;\r
82 }\r
83 div.jp-audio div.jp-type-playlist div.jp-interface {\r
84         height:80px;\r
85 }\r
86 \r
87 div.jp-video div.jp-interface {\r
88         border-top:1px solid #009be3;\r
89 }\r
90 \r
91 /* @group CONTROLS */\r
92 \r
93 div.jp-controls-holder {\r
94         clear: both;\r
95         width:440px;\r
96         margin:0 auto;\r
97         position: relative;\r
98         overflow:hidden;\r
99         top:-8px; /* This negative value depends on the size of the text in jp-currentTime and jp-duration */\r
100 }\r
101 \r
102 div.jp-interface ul.jp-controls {\r
103         list-style-type:none;\r
104         margin:0;\r
105         padding: 0;
106         overflow:hidden;
107 }
108
109 div.jp-audio ul.jp-controls {
110         width: 380px;\r
111         padding:20px 20px 0 20px;\r
112 }
113
114 div.jp-video div.jp-type-single ul.jp-controls {
115         width: 78px;\r
116         margin-left: 200px;\r
117 }
118
119 div.jp-video div.jp-type-playlist ul.jp-controls {
120         width: 134px;\r
121         margin-left: 172px;\r
122 }
123 div.jp-video ul.jp-controls,\r
124 div.jp-interface ul.jp-controls li {\r
125         display:inline;
126         float: left;
127 }\r
128 \r
129 div.jp-interface ul.jp-controls a {\r
130         display:block;\r
131         overflow:hidden;\r
132         text-indent:-9999px;\r
133 }\r
134 a.jp-play,\r
135 a.jp-pause {\r
136         width:40px;\r
137         height:40px;\r
138 }\r
139 \r
140 a.jp-play {\r
141         background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 0 no-repeat;\r
142 }\r
143 a.jp-play:hover {\r
144         background: url("/static/jplayer/jplayer.blue.monday.jpg") -41px 0 no-repeat;\r
145 }\r
146 a.jp-pause {\r
147         background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -42px no-repeat;\r
148         display: none;\r
149 }\r
150 a.jp-pause:hover {\r
151         background: url("/static/jplayer/jplayer.blue.monday.jpg") -41px -42px no-repeat;\r
152 }\r
153
154 a.jp-stop, a.jp-previous, a.jp-next {\r
155         width:28px;\r
156         height:28px;
157         margin-top:6px;\r
158 }\r
159
160 a.jp-stop {\r
161         background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -83px no-repeat;\r
162         margin-left:10px;
163 }
164 \r
165 a.jp-stop:hover {\r
166         background: url("/static/jplayer/jplayer.blue.monday.jpg") -29px -83px no-repeat;\r
167 }
168 \r
169 a.jp-previous {\r
170         background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -112px no-repeat;\r
171 }\r
172 a.jp-previous:hover {\r
173         background: url("/static/jplayer/jplayer.blue.monday.jpg") -29px -112px no-repeat;\r
174 }
175
176 a.jp-next {\r
177         background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -141px no-repeat;\r
178 }\r
179 a.jp-next:hover {\r
180         background: url("/static/jplayer/jplayer.blue.monday.jpg") -29px -141px no-repeat;\r
181 }\r
182 \r
183 /* @end */\r
184 \r
185 /* @group progress bar */\r
186 \r
187 div.jp-progress {\r
188         overflow:hidden;\r
189         background-color: #ddd;\r
190 }\r
191 div.jp-audio div.jp-progress {\r
192         position: absolute;\r
193         top:32px;\r
194         height:15px;\r
195 }\r
196 div.jp-audio div.jp-type-single div.jp-progress {\r
197         left:110px;\r
198         width:186px;\r
199 }\r
200 div.jp-audio div.jp-type-playlist div.jp-progress {\r
201         left:166px;\r
202         width:130px;\r
203 }\r
204 div.jp-video div.jp-progress {\r
205         top:0px;\r
206         left:0px;\r
207         width:100%;\r
208         height:10px;\r
209 }\r
210 div.jp-seek-bar {\r
211         background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -202px repeat-x;\r
212         width:0px;\r
213         height:100%;\r
214         cursor: pointer;\r
215 }\r
216 div.jp-play-bar {\r
217         background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -218px repeat-x ;\r
218         width:0px;\r
219         height:100%;\r
220 }\r
221 \r
222 /* The seeking class is added/removed inside jPlayer */\r
223 div.jp-seeking-bg {\r
224         background: url("/static/jplayer/jplayer.blue.monday.seeking.gif");\r
225 }\r
226 \r
227 /* @end */\r
228 \r
229 /* @group volume controls */\r
230 \r
231 \r
232 a.jp-mute,\r
233 a.jp-unmute,\r
234 a.jp-volume-max {\r
235         width:18px;\r
236         height:15px;
237         margin-top:12px;
238 }
239
240 div.jp-audio div.jp-type-single a.jp-mute,\r
241 div.jp-audio div.jp-type-single a.jp-unmute {
242         margin-left: 210px;     
243 }
244
245 div.jp-audio div.jp-type-playlist a.jp-mute,\r
246 div.jp-audio div.jp-type-playlist a.jp-unmute {
247         margin-left: 154px;\r
248 }
249 \r
250 div.jp-audio a.jp-volume-max {\r
251         margin-left: 56px;      \r
252 }\r
253 \r
254 div.jp-video a.jp-mute,\r
255 div.jp-video a.jp-unmute,\r
256 div.jp-video a.jp-volume-max {\r
257         position: absolute;\r
258         top:12px;\r
259         margin-top:0;\r
260 }\r
261 \r
262 div.jp-video a.jp-mute,\r
263 div.jp-video a.jp-unmute {
264         left: 50px;\r
265 }
266 \r\r
267 div.jp-video a.jp-volume-max {\r
268         left: 134px;\r
269 }\r
270 \r
271 a.jp-mute {\r
272         background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -170px no-repeat;\r
273 }\r
274 a.jp-mute:hover {\r
275         background: url("/static/jplayer/jplayer.blue.monday.jpg") -19px -170px no-repeat;\r
276 }\r
277 a.jp-unmute {\r
278         background: url("/static/jplayer/jplayer.blue.monday.jpg") -60px -170px no-repeat;\r
279         display: none;\r
280 }\r
281 a.jp-unmute:hover {\r
282         background: url("/static/jplayer/jplayer.blue.monday.jpg") -79px -170px no-repeat;\r
283 }
284 \ra.jp-volume-max {\r
285         background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -186px no-repeat;\r
286 }\r
287 a.jp-volume-max:hover {\r
288         background: url("/static/jplayer/jplayer.blue.monday.jpg") -19px -186px no-repeat;\r
289 }\r
290
291 div.jp-volume-bar {\r
292         position: absolute;\r
293         overflow:hidden;\r
294         background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -250px repeat-x;\r
295         width:46px;\r
296         height:5px;\r
297         cursor: pointer;\r
298 }\r
299 div.jp-audio div.jp-volume-bar {\r
300         top:37px;\r
301         left:330px;\r
302 }\r
303 div.jp-video div.jp-volume-bar {\r
304         top:17px;\r
305         left:72px;\r
306 }\r
307 div.jp-volume-bar-value {\r
308         background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -256px repeat-x;\r
309         width:0px;\r
310         height:5px;\r
311 }\r
312 \r
313 /* @end */\r
314 \r
315 /* @group current time and duration */\r
316 \r
317 div.jp-audio div.jp-time-holder {\r
318         position:absolute;\r
319         top:50px;\r
320 }\r
321 div.jp-audio div.jp-type-single div.jp-time-holder {\r
322         left:110px;\r
323         width:186px;\r
324 }\r
325 div.jp-audio div.jp-type-playlist div.jp-time-holder {\r
326         left:166px;\r
327         width:130px;\r
328 }\r
329 \r
330 div.jp-current-time,\r
331 div.jp-duration {\r
332         width:60px;\r
333         font-size:.64em;\r
334         font-style:oblique;
335 }\r
336 div.jp-current-time {\r
337         float: left;\r
338         display:inline;\r
339 }\r
340 div.jp-duration {\r
341         float: right;\r
342         display:inline;\r
343         text-align: right;\r
344 }\r
345 \r
346 div.jp-video div.jp-current-time {\r
347         margin-left:20px;\r
348 }\r
349 div.jp-video div.jp-duration {\r
350         margin-right:20px;\r
351 }\r
352 \r
353 /* @end */\r
354 \r
355 /* @group playlist */\r
356 \r
357 div.jp-title {\r
358         font-weight:bold;\r
359         text-align:center;\r
360 }\r
361 \r
362 div.jp-title,\r
363 div.jp-playlist {\r
364         width:100%;\r
365         background-color:#ccc;\r
366         border-top:1px solid #009be3;\r
367 }\r
368 div.jp-type-single div.jp-title,\r
369 div.jp-type-playlist div.jp-title,\r
370 div.jp-type-single div.jp-playlist {\r
371         border-top:none;\r
372 }\r
373 div.jp-title ul,\r
374 div.jp-playlist ul {\r
375         list-style-type:none;\r
376         margin:0;\r
377         padding:0 20px;\r
378         font-size:.72em;\r
379 }\r
380 \r
381 div.jp-title li {\r
382         padding:5px 0;\r
383         font-weight:bold;\r
384 }\r
385 div.jp-playlist li {\r
386         padding:5px 0 4px 20px;\r
387         border-bottom:1px solid #eee;\r
388 }\r
389 \r
390 div.jp-playlist li div {\r
391         display:inline;\r
392 }\r
393 \r
394 /* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */\r
395 \r
396 div.jp-type-playlist div.jp-playlist li:last-child {\r
397         padding:5px 0 5px 20px;\r
398         border-bottom:none;\r
399 }\r
400 div.jp-type-playlist div.jp-playlist li.jp-playlist-current {\r
401         list-style-type:square;\r
402         list-style-position:inside;\r
403         padding-left:7px;\r
404 }\r
405 div.jp-type-playlist div.jp-playlist a {\r
406         color: #333;\r
407         text-decoration: none;\r
408 }\r
409 div.jp-type-playlist div.jp-playlist a:hover {\r
410         color:#0d88c1;\r
411 }\r
412 div.jp-type-playlist div.jp-playlist a.jp-playlist-current {\r
413         color:#0d88c1;\r
414 }\r
415 \r
416 div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove {\r
417         float:right;\r
418         display:inline;\r
419         text-align:right;\r
420         margin-right:10px;\r
421         font-weight:bold;\r
422         color:#666;\r
423 }\r
424 div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {\r
425         color:#0d88c1;\r
426 }\r
427 div.jp-type-playlist div.jp-playlist span.jp-free-media {\r
428         float:right;\r
429         display:inline;\r
430         text-align:right;\r
431         margin-right:10px;\r
432 }\r
433 div.jp-type-playlist div.jp-playlist span.jp-free-media a{\r
434         color:#666;\r
435 }\r
436 div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover{\r
437         color:#0d88c1;\r
438 }\r
439 span.jp-artist {\r
440         font-size:.8em;\r
441         color:#666;\r
442 }\r
443 \r
444 /* @end */\r
445 \r
446 div.jp-video-play {\r
447         position:absolute;\r
448         top:0;\r
449         left:0;\r
450         width:100%;\r
451         cursor:pointer;\r
452         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
453 }\r
454 div.jp-video-270p div.jp-video-play {\r
455         height:270px;\r
456 }\r
457 div.jp-video-360p div.jp-video-play {\r
458         height:360px;\r
459 }\r
460 div.jp-video-full div.jp-video-play {\r
461         height:100%;\r
462         z-index:1000;\r
463 }\r
464 a.jp-video-play-icon {\r
465         position:relative;\r
466         display:block;\r
467         width: 112px;\r
468         height: 100px;\r
469 \r
470         margin-left:-56px;\r
471         margin-top:-50px;\r
472         left:50%;\r
473         top:50%;\r
474 \r
475         background: url("/static/jplayer/jplayer.blue.monday.video.play.png") 0 0 no-repeat;\r
476         text-indent:-9999px;\r
477 }\r
478 div.jp-video-play:hover a.jp-video-play-icon {\r
479         background: url("/static/jplayer/jplayer.blue.monday.video.play.png") 0 -100px no-repeat;\r
480 }\r
481 \r
482 \r
483 \r
484 \r
485 \r
486 div.jp-jplayer audio,\r
487 div.jp-jplayer {\r
488         width:0px;\r
489         height:0px;\r
490 }\r
491 \r
492 div.jp-jplayer {\r
493         background-color: #000000;\r
494 }
495
496
497
498
499
500 /* @group TOGGLES */
501 \r
502 /* The audio toggles are nested inside jp-time-holder */\r
503
504 ul.jp-toggles {
505         list-style-type:none;
506         padding:0;
507         margin:0 auto;\r
508         overflow:hidden;
509 }
510
511 div.jp-audio .jp-type-single ul.jp-toggles {
512         width:25px;
513 }
514 div.jp-audio .jp-type-playlist ul.jp-toggles {\r
515         width:55px;\r
516         margin: 0;\r
517         position: absolute;\r
518         left: 325px;\r
519         top: 50px;\r
520 }\r
521
522 div.jp-video ul.jp-toggles {
523         margin-top:10px;\r
524         width:100px;\r
525 }
526
527 ul.jp-toggles li {
528         display:block;
529         float:right;
530 }
531
532 ul.jp-toggles li a {
533         display:block;
534         width:25px;
535         height:18px;
536         text-indent:-9999px;\r
537         line-height:100%; /* need this for IE6 */
538 }
539
540 a.jp-full-screen {
541         background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -310px no-repeat;
542         margin-left: 20px;
543 }
544
545 a.jp-full-screen:hover {
546         background: url("/static/jplayer/jplayer.blue.monday.jpg") -30px -310px no-repeat;
547 }
548
549 a.jp-restore-screen {
550         background: url("/static/jplayer/jplayer.blue.monday.jpg") -60px -310px no-repeat;
551         margin-left: 20px;\r
552 }
553
554 a.jp-restore-screen:hover {
555         background: url("/static/jplayer/jplayer.blue.monday.jpg") -90px -310px no-repeat;
556 }
557
558 a.jp-repeat {
559         background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -290px no-repeat;
560 }
561
562 a.jp-repeat:hover {
563         background: url("/static/jplayer/jplayer.blue.monday.jpg") -30px -290px no-repeat;
564 }
565
566 a.jp-repeat-off {
567         background: url("/static/jplayer/jplayer.blue.monday.jpg") -60px -290px no-repeat;
568 }
569
570 a.jp-repeat-off:hover {
571         background: url("/static/jplayer/jplayer.blue.monday.jpg") -90px -290px no-repeat;
572 }
573
574 a.jp-shuffle {
575         background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -270px no-repeat;
576         margin-left: 5px;
577 }
578
579 a.jp-shuffle:hover {
580         background: url("/static/jplayer/jplayer.blue.monday.jpg") -30px -270px no-repeat;
581 }
582
583 a.jp-shuffle-off {
584         background: url("/static/jplayer/jplayer.blue.monday.jpg") -60px -270px no-repeat;
585         margin-left: 5px;\r
586 }
587
588 a.jp-shuffle-off:hover {
589         background: url("/static/jplayer/jplayer.blue.monday.jpg") -90px -270px no-repeat;
590 }
591
592
593 /* @end */\r
594 \r
595 /* @group NO SOLUTION error feedback */\r
596 \r
597 .jp-no-solution {\r
598         position:absolute;\r
599         width:390px;\r
600         margin-left:-202px;\r
601         left:50%;\r
602         top: 10px;\r
603 \r
604         padding:5px;\r
605         font-size:.8em;\r
606         background-color:#eee;\r
607         border:2px solid #009be3;\r
608         color:#000;\r
609         display:none;\r
610 }\r
611 \r
612 .jp-no-solution a {\r
613         color:#000;\r
614 }\r
615 \r
616 .jp-no-solution span {\r
617         font-size:1em;\r
618         display:block;\r
619         text-align:center;\r
620         font-weight:bold;\r
621 }\r
622 \r
623 /* @end */\r