/* * 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:2.1 * Date:13th May 2010 */



.jp-controls li,.jp-playlist li{margin-bottom:0 !important; overflow:visible !important; padding:0 !important;}
div.jp-single-player, div.jp-playlist-player{width:355px; font-size:1em; color:#000; border: 1px solid #D5D5D5}
div.jp-interface {position:relative;background-color:#CCC;width:355px;height:105px;}

div.jp-interface .cd {display: block; position: absolute; top:8px; left:8px; z-index:3; width:90px; height:80px; overflow: hidden;}
div.jp-interface .name {position: absolute; top:40px; left:109px; z-index:3;  overflow: hidden; width:185px; font-size:1.1em; color:#3A3A3A; line-height: 1.3em;}
div.jp-interface .name span {font-weight: normal; font-size: 10px;}

div.jp-interface {}
div.jp-interface ul.jp-controls{list-style-type:none;padding:0;margin:0;}
div.jp-interface ul.jp-controls li{position:absolute;}
div.jp-interface ul.jp-controls a{position:absolute;overflow:hidden;text-indent:-9999px;}


a.jp-play, a.jp-pause, a.jp-previous, a.jp-next, div.jp-progress, div.jp-load-bar, div.jp-play-bar, .jp-playlist span.play, .jp-playlist span.pause   {background: url(/img/mainPlayBtn.png) no-repeat 0 0;}


a.jp-play{top:17px; left:133px; width:33px;height:33px; background-position: 0 0;}
a.jp-play:hover{background-position: -33px 0;}
a.jp-pause{top:17px; left:133px; width:33px;height:33px; background-position: 0 -33px; display:none;}
a.jp-pause:hover{ background-position: -33px -33px;}
a.jp-stop{}
a.jp-stop:hover{}



a.jp-previous{left:107px;top:24px;width:21px;height:21px; background-position: -66px 0;}
a.jp-previous:hover{background-position: -87px 0;}
a.jp-next{left:171px;top:24px;width:21px;height:21px; background-position: -66px -21px;}
a.jp-next:hover{background-position: -87px -21px;}
div.jp-progress-block {position:absolute;overflow:hidden;bottom:0; left:0; width:355px;height:8px;}
div.jp-progress{ width:353px; height:6px; border-width: 0 1px 0 1px; border-color:#000; border-style:solid; background-position: 0 -81px; background-repeat: repeat-x; }
div.jp-load-bar{ width:0px; height:6px;  cursor:pointer; background-position: 0 -75px; background-repeat: repeat-x; }
div.jp-play-bar{width:0px;height:6px; background-position: 0 -69px; background-repeat: repeat-x; }



a.jp-volume-min{top:32px;background:url("jplayer.blue.monday.jpg") 0 -170px no-repeat;width:18px;height:15px;}

div.jp-playlist-player a.jp-volume-min{left:231px;}
a.jp-volume-min:hover{background:url("jplayer.blue.monday.jpg") -19px -170px no-repeat;}
a.jp-volume-max{top:32px;background:url("jplayer.blue.monday.jpg") 0 -186px no-repeat;width:18px;height:15px;}

div.jp-playlist-player a.jp-volume-max{left:144px;}
a.jp-volume-max:hover{background:url("jplayer.blue.monday.jpg") -19px -186px no-repeat;}



div.jp-volume-bar{position:absolute;overflow:hidden;top:37px;background:url("jplayer.blue.monday.jpg") 0 -250px repeat-x;width:57px;height:5px;cursor:pointer;}

div.jp-playlist-player div.jp-volume-bar{left:168px;}
div.jp-volume-bar-value{background:url("jplayer.blue.monday.jpg") 0 -256px repeat-x;width:0px;height:5px;}


.jplayer_time {position:absolute; top:75px; right:10px; width:100px; font-size:10px; color:#000; line-height: 1em; text-align:right;}

div.jp-play-time, div.jp-total-time{}
div.jp-total-time{}



div.jp-playlist{height:264px; width:355px;}
div.jp-playlist ul{list-style-type:none;margin:0;padding:0;background-color:#fff;width:355px;}

div.jp-playlist-player div.jp-playlist li{overflow:hidden; padding:11px 0 5px 12px !important;border-bottom:1px solid #999; color:#666; float:left; width:100%; }
div.jp-playlist-player div.jp-playlist li .soc {overflow:hidden; margin: 5px 0 0 24px;}
div.jp-playlist-player div.jp-playlist li .soc a {float:left; margin-right:5px; display: inline;}
div.jp-playlist-player div.jp-playlist li small {color:#666}
.jp-playlist li.over {background-color: #ccc !important;}




div.jp-playlist-player div.jp-playlist li.jplayer_playlist_item_last{padding:11px 0 11px 12px !important;border-bottom:none;}

.jp-playlist li.jplayer_playlist_current {background-color: #ccc !important; }

.jp-playlist a {float:left; display:inline; color:#3A3A3A ;text-decoration:none; font-size: 12px; font-weight: bold;}
.jp-playlist a:hover {text-decoration: underline;}

.jp-playlist li span.play,  .jp-playlist li span.pause {float:left; display:inline; width:12px; height:12px; margin: 4px 12px 0 0; overflow:hidden; cursor:pointer;}

.jp-playlist li span.play {background-position: -66px -42px; }
.jp-playlist li.jplayer_playlist_current span.play {background-position: -78px -42px !important; }

.jp-playlist li.jplayer_playlist_current span.pause {background-position: -78px -54px;}

div.jp-playlist-player div.jp-playlist a.jplayer_playlist_current{}






/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */



.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 12px;
	height: 100%;

}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: red;
}

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}



.jspTrack
{
  background: url(/img/jScrollPaneDragBgr.png) repeat-y 0 0;
	position: relative;

}

.jspDrag
{
  background: url(/img/jScrollPaneDrag.png) no-repeat 0 0;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
  height:147px;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{

	text-indent: -20000px;
	display: block;
	cursor: pointer;
}



.jspArrowUp {


	overflow: hidden;
  background: url(/img/jScrollArrowUp.png) no-repeat 0 0;
	height: 11px;
  width:12px;
}


.jspArrowDown {


	overflow: hidden;
	background: url(/img/jScrollArrowDown.png) no-repeat 0 0;
	height: 11px;
  width:12px;
}

.jspArrow.jspDisabled
{
	cursor: default;

}

.jspVerticalBar .jspArrow
{
	height: 11px;
}

.jspHorizontalBar .jspArrow
{
	width: 12px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}


/* =Modules
	----------------*/
.moduleHead {
 color: #000000;
 font-family: arial;
 border-bottom: 3px solid #ccc;
}

 /* Style Round */
.moduleHead { padding-left: 10px; }
.moduleBody{ padding: 10px; }

/* Make Things Round */
.moduleHead { -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; }
.module { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }

/* Apply Colors to modules, not layout */
 .module { background-color: #fff; }


/* Module Shadow */
	 .module { border: 1px solid #e8e8e8;
		   -moz-box-shadow: 2px 2px 3px #aaa; -webkit-box-shadow: 2px 2px 3px #aaa; box-shadow: 2px 2px 3px #aaa;
		   -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;  }
	.moduleHead { background: #f6f6f6; padding: 6px 10px; border: none;   -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; }

h3.moduleHead {margin: 0; font-size:14px;}