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