/* * 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; } .jp-container h1 { background: #282828; font-size:18px; text-align:center; color:#CCC; margin: 0; padding: 8px 0; font-weight:normal; border-bottom:1px solid #000; background-color:#3D3D3D; background: linear-gradient(top, #3c3c3c 0, #1a1a1a 100%); background: -moz-linear-gradient(top, #3c3c3c 0, #1a1a1a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3c3c3c), color-stop(100%, #1a1a1a)); text-shadow: 0px -1px 1px #000; } .jp-logo { width:400px; height: 67px; background:#282828 url(../../../css/images/airtime_logo_jp.png) no-repeat 120px 14px; background: url(../../../css/images/airtime_logo_jp.png) no-repeat 120px 14px, -moz-radial-gradient(200px 0px, circle cover, rgba(70,70,70,1) 0%, rgba(40,40,40,1) 90%); background: url(../../../css/images/airtime_logo_jp.png) no-repeat 120px 14px, -webkit-radial-gradient(170px 20px, rgba(70,70,70,1) 0%,rgba(40,40,40,1) 70%); display:block; } .jp-stream { height: 27px; display:block; border-top:1px solid #050505; color:#ff5d1a; font-size:12px; padding:6px 4px 4px 10px; 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; } .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: 0 2px 2px rgba(0, 0, 0, 0.5) inset; -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5) inset; color: #767676; font-family: Arial,Helvetica,sans-serif; font-size: 12px; height: 25px; margin: 0; padding: 2px 2px 2px 0; vertical-align: top; width:200px; } 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:418px; */ width:100%; border-top:1px solid #7c7c7c; border-bottom:1px solid #1a1a1a; } div.jp-audio div.jp-type-single div.jp-interface { height:70px; /*border-bottom:none;*/ } 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:40px; } 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:20px; height:20px; } div.jp-audio div.jp-type-single a.jp-mute, div.jp-audio div.jp-type-single a.jp-unmute { top:30px; left:227px; } div.jp-audio div.jp-type-playlist a.jp-mute, div.jp-audio div.jp-type-playlist a.jp-unmute { top:32px; left:296px; } 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.png") 0 -90px no-repeat; } a.jp-mute:hover { background: url("jplayer.png") -30px -90px no-repeat; } a.jp-unmute { background: url("jplayer.png") -61px -90px no-repeat; display: none; } a.jp-unmute:hover { background: url("jplayer.png") -91px -90px 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: 340px; 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:130px; height:4px; cursor: pointer; } div.jp-audio div.jp-type-single div.jp-volume-bar { top:48px; left:225px; } 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:3px; } 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; */ /* border-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-video div.jp-playlist li { padding:5px 0 5px 20px; font-weight:bold; } */ 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: #000000; }