1/*
2 * Project: CirclePlayer
3 * http://www.jplayer.org
4 *
5 * Copyright (c) 2012 Happyworm Ltd
6 *
7 * Author: Silvia Benvenuti
8 * Edited by: Mark J Panaghiston
9 * Date: 2nd October 2012
10 * Artwork inspired by: http://forrst.com/posts/Untitled-CJz
11 */
12
13.cp-container {
14	position:relative;
15	width:104px; /* 200 - (2 * 48) */
16	height:104px;
17	background:url("bgr.jpg") 0 0 no-repeat;
18	padding:48px;
19	-webkit-tap-highlight-color:rgba(0,0,0,0);
20}
21
22.cp-container :focus {
23	border:none;
24	outline:0;
25}
26
27.cp-buffer-1,
28.cp-buffer-2,
29.cp-progress-1,
30.cp-progress-2 {
31	position:absolute;
32	top:0;
33	left:0;
34	width:104px;
35	height:104px;
36	clip:rect(0px,52px,104px,0px);
37
38	-moz-border-radius:52px;
39	-webkit-border-radius:52px;
40	border-radius:52px;
41}
42
43.cp-buffer-1,
44.cp-buffer-2 {
45	background:url("buffer.png") 0 0 no-repeat;
46}
47
48
49/* FALLBACK for .progress
50 * (24 steps starting from 1hr filled progress, Decrease second value by 104px for next step)
51 * (It needs the container selector to work. Or use div)
52 */
53
54.cp-container .cp-fallback {
55	background:url("progress_sprite.jpg") no-repeat;
56	background-position:0 104px;
57}
58
59.cp-progress-1,
60.cp-progress-2 {
61	background:url("progress.png") 0 0 no-repeat;
62}
63
64.cp-buffer-holder,
65.cp-progress-holder,
66.cp-circle-control {
67	position:absolute;
68	width:104px;
69	height:104px;
70}
71
72.cp-circle-control {
73	cursor:pointer;
74}
75
76.cp-buffer-holder,
77.cp-progress-holder {
78	clip:rect(0px,104px,104px,52px);
79	display:none;
80}
81
82
83/* This is needed when progress is greater than 50% or for fallback */
84
85.cp-buffer-holder.cp-gt50,
86.cp-progress-holder.cp-gt50,
87.cp-progress-1.cp-fallback{
88	clip:rect(auto, auto, auto, auto);
89}
90
91.cp-controls {
92	margin:0;
93	padding:26px;
94}
95
96.cp-controls li{
97	list-style-type:none;
98	display:block;
99
100	/*IE Fix*/
101	position:absolute;
102}
103
104.cp-controls li a{
105	position:relative;
106	display:block;
107	width:50px;
108	height:50px;
109	text-indent:-9999px;
110	z-index:1;
111	cursor:pointer;
112}
113
114.cp-controls .cp-play {
115	background:url("controls.jpg") 0 0 no-repeat;
116}
117
118.cp-controls .cp-play:hover {
119	background:url("controls.jpg") -50px 0 no-repeat;
120}
121
122.cp-controls .cp-pause {
123	background:url("controls.jpg") 0 -50px no-repeat;
124}
125
126.cp-controls .cp-pause:hover {
127	background:url("controls.jpg") -50px -50px no-repeat;
128}
129
130.cp-jplayer {
131	width:0;
132	height:0;
133}
134