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