/*
	Player Skin created by CENTROARTS.com
	© 2013 Centroarts.com
*/
.ca-jplayer { padding: 10px; width: 80px; height: 100px; }
.cp-container { position:relative; width:72px; height:95px; background: url(player.png) no-repeat; padding: 5px 4px 0 4px; -webkit-tap-highlight-color:rgba(0,0,0,0); }

.cp-container :focus {
	border:none;
	outline:0;
}

.cp-buffer-1,
.cp-buffer-2,
.cp-progress-1,
.cp-progress-2 { position:absolute; top:0; left:0; width:72px; height:72px; clip:rect(0px,36px,72px,0px);
	-moz-border-radius:36px; -webkit-border-radius:36px; border-radius:36px;
}

.cp-buffer-1, .cp-buffer-2 { background:url(buffer.png) 0 0 no-repeat; }
.cp-container .cp-fallback { background: url(progress_sprite.png) no-repeat 0 72px; }
.cp-progress-1, .cp-progress-2 { background:url(progress.png) 0 0 no-repeat; }

.cp-buffer-holder,
.cp-progress-holder,
.cp-circle-control { position:absolute; width:72px; height:72px; } 

.cp-circle-control { cursor:pointer; }

.cp-buffer-holder,
.cp-progress-holder {
	clip:rect(0px,72px,72px,36px);
	display:none;
}

/* This is needed when progress is greater than 50% or for fallback */

.cp-buffer-holder.cp-gt50,
.cp-progress-holder.cp-gt50,
.cp-progress-1.cp-fallback{
	clip:rect(auto, auto, auto, auto);
}

.cp-controls { width: 34px; height: 34px; margin: 0 0 3px 0; padding: 19px; }

.cp-controls li { list-style-type:none; display:block; /*IE Fix*/ position:absolute; }
.cp-controls li a { display: block; width: 34px; height: 34px; position: relative; cursor: pointer; background-image: url(controls.png); }

.cp-play { background-position: 0 -34px; text-indent: -9999px; z-index: 1; cursor: pointer; }
.cp-play:hover { background-position: -34px -34px; }

.cp-pause { background-position: -34px 0; }
.cp-pause .jp-current-time { cursor: pointer; display: block; text-align: center; color: #fff; padding-top: 9px; }
.cp-pause:hover { background-position: 0 0; }
.cp-pause:hover .jp-current-time { visibility: hidden; }

.cp-jplayer { width: 0; height: 0; }

/* Volume */
.cp-volume { position: relative; display: block; }
	.cp-vol-btn { display: block; width: 16px; height: 16px; margin: 0 auto; text-indent: -9999px; z-index: 1; cursor: pointer; overflow: hidden; cursor: pointer; background-image: url(volume.png); }
	.cp-volume-line { position: absolute; top: 10px; left: 0; opacity: 0; margin-left: -4px; visibility: hidden; width: 48px; height: 6px; padding: 5px 16px; background: #fff;
		-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;
		box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
		background: url(volume.png) no-repeat 0 -16px;
		transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease;
	}
	.cp-volume:hover .cp-volume-line { top: 0; opacity: 1; visibility: visible; }
	.jp-volume-bar { width: 48px; background: #dedede; }
	.jp-volume-bar-value { float: left; background: #bfd677; }
	.jp-volume-bar, .jp-volume-bar-value { cursor: pointer; height: 6px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }