/* * 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:26px; height:26px; background:url("/assets/images/addon/bgr.jpg") 0 0 no-repeat; padding:0px; -webkit-tap-highlight-color:rgba(0,0,0,0); } .cp-tbl { padding: 2px !important; padding-left: 10px !important; padding-right: 10px !important; } .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:26px; height:26px; clip:rect(0px,13px,26px,0px); -moz-border-radius:13px; -webkit-border-radius:13px; border-radius:13px; } .cp-buffer-1, .cp-buffer-2 { background:url("/assets/images/addon/buffer.png") 0 0 no-repeat; } /* FALLBACK for .progress * (24 steps starting from 1hr filled progress, Decrease second value by 30px for next step) * (It needs the container selector to work. Or use div) */ .cp-container .cp-fallback { background:url("/assets/images/addon/progress_sprite.jpg") no-repeat; background-position:0 26px; } .cp-progress-1, .cp-progress-2 { background:url("/assets/images/addon/progress.png") 0 0 no-repeat; } .cp-buffer-holder, .cp-progress-holder, .cp-circle-control { position:absolute; width:26px; height:26px; } .cp-circle-control { cursor:pointer; } .cp-buffer-holder, .cp-progress-holder { clip:rect(0px,26px,26px,13px); 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-left:7px; padding-top:3px; } .cp-controls li{ list-style-type:none; display:block; /*IE Fix*/ position:absolute; } .cp-controls li a{ position:relative; display:block; width:12px; height:12px; text-indent:-9999px; z-index:1; cursor:pointer; } .cp-controls .cp-play { background:url("/assets/images/addon/controls.jpg?a") 0 0 no-repeat; } .cp-controls .cp-play:hover { background:url("/assets/images/addon/controls.jpg?b") -12px 0 no-repeat; } .cp-controls .cp-pause { background:url("/assets/images/addon/controls.jpg?c") 0 -12px no-repeat; } .cp-controls .cp-pause:hover { background:url("/assets/images/addon/controls.jpg?d") -12px -12px no-repeat; } .cp-jplayer { width:0; height:0; }