@charset "utf-8"; /* * Skin for jPlayer Plugin (jQuery JavaScript Library) * http: //www.happyworm.com/jquery/jplayer * * Skin Name:Blue Monday * * Copyright (c) 2010 Happyworm Ltd * Dual licensed under the MIT and GPL licenses. * - http://www.opensource.org/licenses/mit-license.php * - http://www.gnu.org/copyleft/gpl.html * * Author:Silvia Benvenuti * Skin Version:3.0 (jPlayer 2.0.0) * Date:20th December 2010 */.jp-container { background: #282828; height: 100%; margin: 0; padding: 0; width: 400px; position: relative; } .jp-container h1 { color: #CCC; font-size: 20px; font-weight: normal; margin: 0; padding: 8px 0; position: absolute; right: 16px; text-align: center; text-shadow: 0 -1px 1px #000; top: 12px; } .jp-logo { width: 400px; height: 67px; background: #282828 no-repeat 120px 14px; background: no-repeat 120px 14px, -moz-radial-gradient(200px 0px, circle cover, rgba(70, 70, 70, 1) 0%, rgba(40, 40, 40, 1) 90%); background: no-repeat 120px 14px, -webkit-radial-gradient(170px 20px, rgba(70, 70, 70, 1) 0%, rgba(40, 40, 40, 1) 70%); display: block; } .jp-logo img { display: block; display: block; padding: 14px 0 0 16px; } .jp-stream { height: 27px; display: block; border-top: 1px solid #050505; color: #ff5d1a; font-size: 12px; padding: 6px 4px 4px 16px; background: #313131; background: -moz-linear-gradient(top, #292929 0, #3a3a3a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #292929), color-stop(100%, #3a3a3a)); box-shadow: rgba(248, 248, 248, .3) 0px 1px 0px, rgba(0, 0, 0, 0.2) 0 2px 2px inset; -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 0 5px inset; -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 0 5px inset; line-height: 23px; } .jp-stream-text, .jp-stream form { float: left; } .jp-stream form { margin-left: 10px; width: 283px; } .jp-stream label { color: #ababab; padding: 0 10px 0 0; font-size: 12px; } .jp-stream label input[type="radio"] { } .jp-stream form input[type="text"], .jp-stream form select { background-color: #212121; border: 1px solid #1a1a1a; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5); color: #767676; font-family: Arial, Helvetica, sans-serif; font-size: 12px; height: 25px; margin: 0; padding: 2px 2px 2px 0; vertical-align: top; width: 100%} div.jp-audio, div.jp-video { /* Edit the font-size to counteract inherited font sizing. * Eg. 1.25em = 1 / 0.8em */font-size: 1em; /* No parent CSS that can effect the size in these demos */font-family: Verdana, Arial, sans-serif; line-height: 1.6; color: #666; } div.jp-audio { /*width: 180px; */} div.jp-video-270p { width: 480px; } div.jp-video-360p { width: 640px; } div.jp-interface { position: relative; background-color: #3D3D3D; background: -moz-linear-gradient(top, #4e4e4e 0, #3a3a3a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4e4e4e), color-stop(100%, #3a3a3a)); width: 100%; border-top: 1px solid #5a5a5a; border-bottom: 1px solid #1a1a1a; } div.jp-audio div.jp-type-single div.jp-interface { height: 50px; } div.jp-audio div.jp-type-playlist div.jp-interface { height: 80px; } div.jp-video div.jp-type-single div.jp-interface { height: 60px; border-bottom: none; } div.jp-video div.jp-type-playlist div.jp-interface { height: 60px; } div.jp-interface ul.jp-controls { list-style-type: none; padding: 0; margin: 0; } div.jp-interface ul.jp-controls li { /* position: absolute; */display: inline; } div.jp-interface ul.jp-controls a { position: absolute; overflow: hidden; text-indent: -9999px; } a.jp-play, a.jp-pause { width: 75px; height: 40px; z-index: 1; } div.jp-audio div.jp-type-single a.jp-play, div.jp-audio div.jp-type-single a.jp-pause { top: 15px; left: 15px; } div.jp-audio div.jp-type-playlist a.jp-play, div.jp-audio div.jp-type-playlist a.jp-pause { top: 20px; left: 48px; } div.jp-video a.jp-play, div.jp-video a.jp-pause { top: 15px; } div.jp-video-270p div.jp-type-single a.jp-play, div.jp-video-270p div.jp-type-single a.jp-pause { left: 195px; } div.jp-video-270p div.jp-type-playlist a.jp-play, div.jp-video-270p div.jp-type-playlist a.jp-pause { left: 220px; } div.jp-video-360p div.jp-type-single a.jp-play, div.jp-video-360p div.jp-type-single a.jp-pause { left: 275px; } div.jp-video-360p div.jp-type-playlist a.jp-play, div.jp-video-360p div.jp-type-playlist a.jp-pause { left: 300px; } a.jp-play { background: url(jplayer.png) 0 0 no-repeat; } a.jp-play:hover { background: url(jplayer.png) -75px 0 no-repeat; } a.jp-pause { background: url(jplayer.png) 0 -40px no-repeat; display: none; } a.jp-pause:hover { background: url(jplayer.png) -75px -40px no-repeat; } div.jp-audio div.jp-type-single a.jp-stop { top: 26px; left: 90px; } div.jp-audio div.jp-type-playlist a.jp-stop { top: 26px; left: 126px; } div.jp-video a.jp-stop { top: 21px; } div.jp-video-270p div.jp-type-single a.jp-stop { left: 245px; } div.jp-video-270p div.jp-type-playlist a.jp-stop { left: 298px; } div.jp-video-360p div.jp-type-single a.jp-stop { left: 325px; } div.jp-video-360p div.jp-type-playlist a.jp-stop { left: 378px; } a.jp-stop { background: url(jplayer.png) 0 -83px no-repeat; width: 28px; height: 28px; z-index: 1; } a.jp-stop:hover { background: url(jplayer.png) -29px -83px no-repeat; } div.jp-audio div.jp-type-playlist a.jp-previous { left: 20px; top: 26px; } div.jp-video div.jp-type-playlist a.jp-previous { top: 21px; } div.jp-video-270p div.jp-type-playlist a.jp-previous { left: 192px; } div.jp-video-360p div.jp-type-playlist a.jp-previous { left: 272px; } a.jp-previous { background: url(jplayer.png) 0 -112px no-repeat; width: 28px; height: 28px; } a.jp-previous:hover { background: url(jplayer.png) -29px -112px no-repeat; } div.jp-audio div.jp-type-playlist a.jp-next { left: 88px; top: 26px; } div.jp-video div.jp-type-playlist a.jp-next { top: 21px; } div.jp-video-270p div.jp-type-playlist a.jp-next { left: 260px; } div.jp-video-360p div.jp-type-playlist a.jp-next { left: 340px; } a.jp-next { background: url(jplayer.png) 0 -141px no-repeat; width: 28px; height: 28px; } a.jp-next:hover { background: url(jplayer.png) -29px -141px no-repeat; } div.jp-progress { position: absolute; overflow: hidden; background-color: #ddd; } div.jp-audio div.jp-type-single div.jp-progress { top: 32px; left: 130px; width: 122px; height: 15px; } div.jp-audio div.jp-type-playlist div.jp-progress { top: 32px; left: 164px; width: 122px; height: 15px; } div.jp-video div.jp-progress { top: 0px; left: 0px; width: 100%; height: 10px; } div.jp-seek-bar { background: url(jplayer.png) 0 -202px repeat-x; width: 0px; /* height: 15px; */height: 100%; cursor: pointer; } div.jp-play-bar { background: url(jplayer.png) 0 -218px repeat-x; width: 0px; /* height: 15px; */ height: 100% } /* The seeking class is added/removed inside jPlayer */ div.jp-seeking-bg { background: url(pbar-ani.gif); } a.jp-mute, a.jp-unmute, a.jp-volume-max { width: 25px; height: 20px; } div.jp-audio div.jp-type-single a.jp-mute{ top: 15px; left: 106px; } div.jp-audio div.jp-type-single a.jp-unmute { top: 15px; left: 95px; } div.jp-audio div.jp-type-playlist a.jp-mute, div.jp-audio div.jp-type-playlist a.jp-unmute { top: 32px; left: 297px; } div.jp-video a.jp-mute, div.jp-video a.jp-unmute { top: 27px; } div.jp-video-270p div.jp-type-single a.jp-mute, div.jp-video-270p div.jp-type-single a.jp-unmute { left: 304px; } div.jp-video-270p div.jp-type-playlist a.jp-unmute, div.jp-video-270p div.jp-type-playlist a.jp-mute { left: 363px; } div.jp-video-360p div.jp-type-single a.jp-mute, div.jp-video-360p div.jp-type-single a.jp-unmute { left: 384px; } div.jp-video-360p div.jp-type-playlist a.jp-mute, div.jp-video-360p div.jp-type-playlist a.jp-unmute { left: 443px; } a.jp-mute { background: url(jplayer-mute-unmute.png) 0 0 no-repeat; } a.jp-mute:hover { background: url(jplayer-mute-unmute.png) -42px 0 no-repeat; } a.jp-unmute { background: url(jplayer-mute-unmute.png) -84px 0 no-repeat; display: none; } a.jp-unmute:hover { background: url(jplayer-mute-unmute.png) -124px 0 no-repeat; } div.jp-interface ul.jp-controls a.jp-volume-max { background: url(jplayer.png) no-repeat scroll 0 -110px transparent; } div.jp-interface ul.jp-controls a.jp-volume-max:hover { background: url(jplayer.png) no-repeat scroll -30px -110px transparent; } div.jp-audio ul.jp-controls a.jp-volume-max { left: 371px; top: 28px; } div.jp-volume-bar { position: absolute; overflow: hidden; background: #393939; -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 1px inset; -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 1px inset; border-bottom: 1px solid #5e5e5e; border-top: 1px solid #262526; border-left: 1px solid #262526; border-right: 1px solid #262526; width: 160px; height: 7px; cursor: pointer; } div.jp-audio div.jp-type-single div.jp-volume-bar { top: 24px; left: 125px; } div.jp-audio div.jp-type-playlist div.jp-volume-bar { top: 37px; left: 324px; } div.jp-video div.jp-volume-bar { top: 32px; } div.jp-video-270p div.jp-type-single div.jp-volume-bar { left: 332px; } div.jp-video-270p div.jp-type-playlist div.jp-volume-bar { left: 391px; } div.jp-video-360p div.jp-type-single div.jp-volume-bar { left: 412px; } div.jp-video-360p div.jp-type-playlist div.jp-volume-bar { left: 471px; } div.jp-volume-bar-value { background-color: #fb7018; background: -moz-linear-gradient(top, #fc9318 0, #e56815 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fc9318), color-stop(100%, #e56815)); width: 0px; height: 6px; } div.jp-current-time, div.jp-duration { position: absolute; font-size: .64em; font-style: oblique; } div.jp-duration { text-align: right; } div.jp-audio div.jp-type-single div.jp-current-time, div.jp-audio div.jp-type-single div.jp-duration { top: 49px; left: 130px; width: 122px; } div.jp-audio div.jp-type-playlist div.jp-current-time, div.jp-audio div.jp-type-playlist div.jp-duration { top: 49px; left: 164px; width: 122px; } div.jp-video div.jp-current-time, div.jp-video div.jp-duration { top: 10px; left: 0px; width: 98%; padding: 0 1%} div.jp-playlist { /* width: 418px; */ width: 100%; background-color: #ccc; /*border: 1px solid #009be3; */ border-top: none; } div.jp-playlist ul { list-style-type: none; margin: 0; padding: 0 20px; /* background-color: #ccc; *//* border: 1px solid #009be3; *//* borderg-top: none; *//* width: 378px; */font-size: .72em; } div.jp-type-single div.jp-playlist li { padding: 5px 0 5px 20px; font-weight: bold; } div.jp-type-playlist div.jp-playlist li { padding: 5px 0 4px 20px; border-bottom: 1px solid #eee; } div.jp-type-playlist div.jp-playlist li.jp-playlist-last { padding: 5px 0 5px 20px; border-bottom: none; } div.jp-type-playlist div.jp-playlist li.jp-playlist-current { list-style-type: square; list-style-position: inside; padding-left: 8px; } div.jp-type-playlist div.jp-playlist a { color: #666; text-decoration: none; } div.jp-type-playlist div.jp-playlist a:hover { color: #0d88c1; } div.jp-type-playlist div.jp-playlist a.jp-playlist-current { color: #0d88c1; } div.jp-type-playlist div.jp-playlist div.jp-free-media { display: inline; margin-left: 20px; } div.jp-video div.jp-video-play { background: transparent url(jplayer.blue.monday.video.play.png) no-repeat center; /* position: relative; */position: absolute; cursor: pointer; z-index: 2; } div.jp-video div.jp-video-play:hover { background: transparent url(jplayer.blue.monday.video.play.hover.png) no-repeat center; } div.jp-video-270p div.jp-video-play { top: -270px; width: 480px; height: 270px; } div.jp-video-360p div.jp-video-play { top: -360px; width: 640px; height: 360px; } div.jp-jplayer { width: 0px; height: 0px; } div.jp-video div.jp-jplayer { border: 1px solid #009be3; border-bottom: none; z-index: 1; } div.jp-video-270p div.jp-jplayer { width: 480px; height: 270px; } div.jp-video-360p div.jp-jplayer { width: 640px; height: 360px; } div.jp-jplayer { background-color: #000; } div.jp-now-playing { height: 19px; padding: 3px 0 0 15px; color: #a7a7a7; font-size: 12px; border-top: 1px solid #515151; border-bottom: 1px solid #2c2c2c; background-color: #353535; background: -moz-linear-gradient(top, #3e3e3e 0, #353535 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3e3e3e), color-stop(100%, #353535)); } div.jp-now-playing span { color: #898989; }