Mercurial > public > sg101

comparison static/js/jplayer/skins/blue.monday/jplayer.blue.monday.css @ 488:a747215e9a5a

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