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