/*
 * Skin Styling for jPlayer Plugin (jQuery JavaScript Library)
 */


div.jp-video {
	color: #666;
	background-color:#eee;
	position:relative;
}

div.jp-video {
	width:260px;
}
div.jp-interface {
	position: relative;
	background-color:#fff;
	width:100%;
}


/* Controls Styling */

div.jp-controls-holder {
	clear: both;
	width:100%;
	margin:0 auto;
	position: relative;
	overflow:hidden;
}

div.jp-interface ul.jp-controls {
	list-style-type:none;
	margin:0;
	padding: 0;
	overflow:hidden;
}


div.jp-video div.jp-type-single ul.jp-controls {
	margin:5px;
	width:250px;	
}
div.jp-video div.jp-type-playlist ul.jp-controls {
	width: 134px;
	margin-left: 172px;
}
div.jp-video ul.jp-controls,
div.jp-interface ul.jp-controls li {
	display:inline;
	float: left;
}

div.jp-interface ul.jp-controls a {
	display:block;
	overflow:hidden;
	text-indent:-9999px;
}
a.jp-play,
a.jp-pause {
	width:15px;
	height:15px;
}

a.jp-play {
	background: url("../images/controls.png") 0 0 no-repeat;
}
a.jp-play:hover {
	background: url("../images/controls.png") 0 -17px no-repeat;
}
a.jp-pause {
	background: url("../images/controls.png") -47px 0 no-repeat;
	display: none;
}
a.jp-pause:hover {
	background: url("../images/controls.png") -47px -17px no-repeat;
}

/* Progressbar Styling*/

div.jp-progress {
	overflow:hidden;
	background-color: #ddd;
}
div.jp-video div.jp-progress {
	top:0px;
	left:0px;
	width:100%;
	height:3px;
}
div.jp-seek-bar {
	background:#e2e2e2;
	width:0px;
	height:100%;
	cursor: pointer;
}
div.jp-play-bar {
	background: #808080 ;
	width:0px;
	height:100%;
}

/* Volume buttons Styling*/


a.jp-mute,
a.jp-unmute,
a.jp-volume-max {
	width:10px;
	height:12px;
	margin-top:12px;
}

div.jp-video a.jp-mute,
div.jp-video a.jp-unmute,
div.jp-video a.jp-volume-max {
	position: absolute;
	top:5px;
	margin-top:0;
}

div.jp-video a.jp-mute,
div.jp-video a.jp-unmute {
	left: 188px;
}

div.jp-video a.jp-volume-max {
	left: 243px;
}

a.jp-mute {
	background: url("../images/controls.png") -21px 0 no-repeat;
}
a.jp-mute:hover {
	background: url("../images/controls.png") -21px -17px no-repeat;
}
a.jp-unmute {
	width:8px;
	background: url("../images/controls.png") -34px 0 no-repeat;
	display: none;
}
a.jp-unmute:hover {
	background: url("../images/controls.png") -34px -17px no-repeat;
}

a.jp-volume-max {
	background: url("../images/controls.png") -34px 0 no-repeat;
}
a.jp-volume-max:hover {
	background: url("../images/controls.png") -34px -17px no-repeat;
}

div.jp-volume-bar {
	position: absolute;
	overflow:hidden;
	background: url("../images/controls.png") 0 -35px no-repeat;
	width:40px;
	height:15px;
	cursor: pointer;
}

div.jp-video div.jp-volume-bar {
	top:5px;
	left:200px;
}
div.jp-volume-bar-value {
	background: #808080;
    height: 1px;
    margin-top: 7px;
}

div.jp-video-play {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	cursor:pointer;
	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. */
}
div.jp-video div.jp-video-play {
	height:147px;
}

a.jp-video-play-icon {
	position:relative;
	display:block;
	width: 48px;
	height: 48px;
	margin-left:-23px;
	margin-top:-20px;
	left:50%;
	top:50%;
	outline:none;
	background: url("../images/controls.png") -7px -50px no-repeat;
	text-indent:-9999px;
}
div.jp-video-play:hover a.jp-video-play-icon {
	background: url("../images/controls.png") -7px -100px no-repeat;
}