/*
* Project: CirclePlayer
* http://www.jplayer.org
*
* Copyright (c) 2012 Happyworm Ltd
*
* Author: Silvia Benvenuti
* Edited by: Mark J Panaghiston
* Date: 2nd October 2012
* Artwork inspired by: http://forrst.com/posts/Untitled-CJz
*/

.cp-container {
position:relative;
width:32px; /* 200 - (2 * 48) */
height:32px;
background:url("../circle.skin/bgr.jpg") 0 0 no-repeat;
-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:32px;
height:32px;
clip:rect(0px,52px,104px,0px);

-moz-border-radius:52px;
-webkit-border-radius:52px;
border-radius:52px;
}

.cp-buffer-1,
.cp-buffer-2 {
background:url("../circle.skin/buffer.png") 0 0 no-repeat;
}


/* FALLBACK for .progress
* (24 steps starting from 1hr filled progress, Decrease second value by 104px for next step)
* (It needs the container selector to work. Or use div)
*/

.cp-container .cp-fallback {
background:url("../circle.skin/progress_sprite.jpg") no-repeat;
background-position:0 104px;
}

.cp-progress-1,
.cp-progress-2 {
background:url("../circle.skin/progress.png") 0 0 no-repeat;
}

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

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

.cp-buffer-holder,
.cp-progress-holder {
clip:rect(0px,32px,32px,52px);
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_container{
	width:32px;
	height:32px;
	background:url(../images/ico-on.png) no-repeat;
	text-indent:-9999px;
	display:block;
	position:absolute;
	right:24px;
	top:60px;
	}

.cp-controls {
margin:0;

}

.cp-controls li{
list-style-type:none;
display:block;

/*IE Fix*/
position:absolute;
}

.cp-controls li a{
position:relative;
display:block;
width:32px;
height:32px;
text-indent:-9999px;
z-index:1;
cursor:pointer;
}

.cp-controls .cp-play {
background:url("controls.png") 0 0 no-repeat;
}

.cp-controls .cp-play:hover {
background:url("controls.png") 0 0 no-repeat;
}

.cp-controls .cp-pause {
background:url("controls.png") 0 -32px no-repeat;
}

.cp-controls .cp-pause:hover {
background:url("controls.png") 0 -32px no-repeat;
}

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