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