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