/*
 * 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:104px;
	height:104px;
	background:url("bgr.jpg") 0 0 no-repeat;
	padding:48px;
	-webkit-tap-highlight-color:rgba(0,0,0,0); */
}

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

.cp-buffer-1,
.cp-buffer-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 104px;
  height: 104px;
  clip: rect(0px, 52px, 104px, 0px);

  -moz-border-radius: 52px;
  -webkit-border-radius: 52px;
  border-radius: 52px;
}
/* .cp-buffer-1,
.cp-buffer-2,
.cp-progress-1,
.cp-progress-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 104px;
  height: 104px;
  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("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("progress_sprite.jpg") no-repeat;
  background-position: 0 104px;
} */

/* .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: 104px;
  height: 104px;
} */

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

.cp-buffer-holder,
.cp-progress-holder {
  clip: rect(0px, 104px, 104px, 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-controls {
  margin: 0;
  /* padding: 26px; */
  width: 35px;
  height: 35px;
}

.cp-controls li {
  list-style-type: none;
  display: block;
  width: 35px;
  height: 35px;

  /*IE Fix*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto 10px auto auto;
  background: #d6d6d6;
  border-radius: 20px;
  text-align: center;
  padding: 5px 0 0;
}

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

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

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

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

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

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