/* @override 
	http://localhost/_tests/soundmanager/css/page-player.css
	http://otp.dev//skin/frontend/default/otp/soundmanager/css/page-player.product.css
*/
/*

 SoundManager 2: "page as playlist" example
 ------------------------------------------
 http://schillmania.com/projects/soundmanager2/

*/

.spectrum-container {
 display:none;
}

ul.use-spectrum li.sm2_playing .spectrum-container {
 position:absolute;
 left:0px;
 top:0px;
 margin-left:-266px;
 margin-top:-1px;
 display:block;
 background-color:#5588bb;
 border:1px solid #99ccff;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border-radius:4px;
}

ul.use-spectrum .spectrum-box {
 position:relative;
 width:255px;
 font-size:1em;
 padding:2px 0px;
 height:1.2em;
 overflow:hidden;
}

ul.use-spectrum .spectrum-box .spectrum {
 position:absolute;
 left:0px;
 top:-2px;
 margin-top:20px;
 display:block;
 font-size:1px;
 width:1px;
 height:1px; /* set to 50px for a thick line, 1px for a thin line, etc. */
 overflow:hidden;
 background-color:#fff;
}

ul.playlist {
 list-style-type:none;
 margin:0px;
 padding:0px;

}

ul.playlist li {
 /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
 position:relative;
 display:block;
 width:auto;
 font-size:2em;
 color:#666;
 padding:0.25em 0.5em 0.25em 0.5em;
 border:none;
 letter-spacing:-1px; /* ZOMG WEB X.0. ;) */
 background-color:#f9f9f9;
 -webkit-transition-property: hover;
 -webkit-transition: background-color 0.15s ease-in-out;
}

ul.playlist li a {
 display:block;
 text-decoration:none;
 font-weight:normal;
 color:#000;
 font-size:120%;
 outline:none;
 position:relative;
 z-index:2;
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_paused,
ul.playlist li.sm2_playing a {
 color:#fff;
 border-radius:3px;
 -webkit-border-radius:3px;
 -moz-border-radius:3px;
}

ul.playlist li:hover {
 background-color:#eee;
}

ul.playlist li:hover a {
 color:#333;
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_playing:hover {
 background-color:#6699cc;
}

ul.playlist li.sm2_paused {
 background-color:#999;
}

ul.playlist li.sm2_playing:hover a,
ul.playlist li.sm2_paused a {
 color:#fff;
}

ul.playlist li .controls {
 display:none;
}

ul.playlist li .peak,
ul.playlist.use-peak li .peak {
 display:none;
 position:absolute;
 top:0.55em;
 right:0.5em;
}

ul.playlist li.sm2_playing .controls,
ul.playlist li.sm2_paused .controls {
 position:relative;
 display:block;
}

ul.playlist.use-peak li.sm2_playing .peak,
ul.playlist.use-peak li.sm2_paused .peak {
 display:inline;
 display:inline-block;
}

ul.playlist.use-peak li .peak {
 display:none; /* IE 7 */
}

ul.playlist li.sm2_paused .controls {
 background-color:#666;
}

ul.playlist li:hover .controls .statusbar {
 position:relative;
 cursor:ew-resize;
 cursor:-moz-grab;
 cursor:grab;
}

ul.playlist li.sm2_paused .controls .statusbar {
 background-color:#ccc;
}

ul.playlist li .controls {
 position:relative;
 margin-top:0.25em;
 margin-bottom:0.25em;
 background-color:#99ccff;
}

ul.playlist li .controls .statusbar {
 position:relative;
 height:0.5em;
 background-color:#ccddff;
 border:2px solid #fff;
 border-radius:2px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 overflow:hidden;
 cursor:-moz-grab;
 cursor:grab;
}

ul.playlist li .controls.dragging .statusbar {
 cursor:-moz-grabbing;
 cursor:grabbing;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading,
ul.playlist li .controls .statusbar .annotation {
 position:absolute;
 left:0px;
 top:0px;
 height:0.5em;
}

ul.playlist li .controls .statusbar .position {
 background-color:#336699;
 border-right:3px solid #336699;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
}

ul.playlist li.sm2_paused .controls .statusbar .position {
 background-color:#666;
 border-color:#666;
}

ul.playlist li .controls .statusbar .loading {
 background-color:#eee;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading {
 width:0px;
}

ul.playlist li.sm2_playing a.sm2_link,
ul.playlist li.sm2_paused a.sm2_link {
 margin-right:4.5em; /* room for timing stuff */
}

ul.playlist li .timing {
 position:absolute;
 display:none;
 text-align:right;
 right:1em;
 top:1em;
 width:auto;
 height:1em;
 padding:3px 5px;
 background-color:#5588bb;
 border:1px solid #99ccff;
 -moz-border-radius:4px;
 -khtml-border-radius:4px;
 border-radius:4px;
 letter-spacing:0px;
 font:44% monaco,"VT-100",terminal,"lucida console",courier,system;
 line-height:1em;
 vertical-align:middle;
}

ul.playlist.use-peak li .timing {
 right:4.25em;
}

ul.playlist li:hover .timing {
 z-index:2;
}

ul.playlist li .timing div.sm2_timing {
 margin:0px;
 padding:0px;
 margin-top:-1em;
}

ul.playlist li.sm2_playing .timing,
ul.playlist li.sm2_paused .timing {
 display:block;
}

ul.playlist li.sm2_paused .timing .sm2_position {
 text-decoration:blink; /* hee hee. first actual appropriate use? :D */
}

ul.playlist li.sm2_paused .timing,
ul.playlist.use-peak li.sm2_paused .peak {
 background-color:#888;
 border-color:#ccc;
}

/* peak data */

/* ul.playlist ... */

ul.playlist.use-peak li .peak {
 display:none;
 zoom:1;
 border:1px solid #99ccff;
 padding:2px;
 height:0.55em;
 -moz-border-radius:4px;
 -khtml-border-radius:4px;
 border-radius:4px;
 background-color:#5588bb;
 width:0.8em;
 height:0.55em;
 margin-top:-3px;
}

ul.playlist.use-peak li .peak-box {
 position:relative;
 width:100%;
 height:0.55em;
 overflow:hidden;
}

ul.playlist li .peak .l,
ul.playlist li .peak .r {
 position:absolute;
 left:0px;
 top:0px;
 width:7px;
 height:50px;
 background:#fff;
 border:1px solid #fff;
 -moz-border-radius:1px;
 -khtml-border-radius:1px;
 margin-top:1em;
}

ul.playlist li .peak .l {
 margin-right:1px;
}

ul.playlist li .peak .r {
 left:10px;
}

#control-template {
 display:none;
}



/* ########### CLS EDITS #### */

.soundbyte-player { width:320px; margin:35px 0 15px 40px;}
.cms-home .soundbyte-player { margin:-4px 0 0 0;}
.soundbyte-player .splayer-corners-top { background:url('../../images/music_sampler_top.png') no-repeat; height:4px; width:327px; }
.soundbyte-player .splayer-top { 
 background:url('../../images/music_sampler_top_content.png') repeat-y; 
 display:block; 
 height:32px;
 padding:5px 0 0 10px;
 /*
 border-top-left-radius:6px; 
 -moz-border-radius-topleft:6px; 
 -webkit-border-top-left-radius:6px; 
 border-top-right-radius:6px;
 -moz-border-radius-topright:6px; 
 -webkit-border-top-right-radius:6px;
 */
}
.cms-home .soundbyte-player .splayer-top p { color:#7c5c2e; float:right; font-size:11px; line-height:14px; margin:-2px 20px 0 0; text-align:right; width:130px;}
.soundbyte-player .splayer-bottom { 
 background:url('../../images/music_sampler_bottom_content.png') repeat-y; 
 padding:5px;
 /*
 border-bottom-left-radius:6px;
 -moz-border-radius-bottomleft:6px; 
 -webkit-border-bottom-left-radius:6px; 
 border-bottom-right-radius:6px;
 -moz-border-radius-bottomright:6px; 
 -webkit-border-bottom-right-radius:6px;
 */
 }
.soundbyte-player .splayer-corners-bottom { background:url('../../images/music_sampler_bottom.png') no-repeat; height:7px; width:327px;}
 
.soundbyte-player ul.playlist { margin:2px 3px 0 4px; width:300px;}



/* -- get rid of time -- */
.soundbyte-player ul.playlist li.sm2_playing .timing,
.soundbyte-player ul.playlist li.sm2_paused .timing { display:;}
.soundbyte-player ul.playlist li:hover .timing { display:;}
ul.playlist li .timing {
 top:2px;
 background:none;
 border:0;
 color:#301f0e;
 font-family:Arial, Helvetica, sans-serif;
 -moz-border-radius:0px;
 -khtml-border-radius:0px;
 border-radius:0px;
}
ul.playlist li.sm2_paused .timing,
ul.playlist.use-peak li.sm2_paused .peak {
 background:none;
 border:0;
}
ul.playlist li.sm2_paused .timing .sm2_position {
 text-decoration:none; 
}

/* -- fix colors -- */
.soundbyte-player ul.playlist li {
 background:none;
 border-radius:6px; 
 -webkit-border-radius:6px; 
 -moz-border-radius:6px;
 height:30px;
 letter-spacing:0px; 
 margin:0 0 5px 1px;
 padding:0 10px 0 10px;
}

.soundbyte-player ul.playlist li:hover {
 background-color:#8c6b3b;
 border-left:1px solid #6c5432;
 border-top:1px solid #6c5432;
 border-right:1px solid #8c6b3b;
 border-bottom:1px solid #8c6b3b;
 margin:-1px 0 4px 0;
}

.soundbyte-player ul.playlist li a { 
 background:url('../../images/btn_play_pause.png') no-repeat 0 10px; 
 color:#301f0e;
 display:block; 
 font-size:13px; 
 height:30px; 
 padding:1px 0 0 18px;
}
.soundbyte-player ul.playlist li a:hover { background-position:0 -13px;}

.soundbyte-player ul.playlist li.sm2_playing,
.soundbyte-player ul.playlist li.sm2_playing:hover {
 background-color:#8c6b3b;
 border-left:1px solid #6c5432;
 border-top:1px solid #6c5432;
 border-right:1px solid #8c6b3b;
 border-bottom:1px solid #8c6b3b;
 border-radius:6px; 
 -webkit-border-radius:6px; 
 -moz-border-radius:6px;
 height:30px;
 margin:-1px 0 4px 0;
}
.soundbyte-player ul.playlist li.sm2_playing a,
.soundbyte-player ul.playlist li.sm2_playing:hover a {
 background-position:0 -36px;
 border-radius:0; 
 -webkit-border-radius:0; 
 -moz-border-radius:0;
 color:#301f0e;
}

.soundbyte-player ul.playlist li.sm2_paused a:hover, 
.soundbyte-player ul.playlist li.sm2_playing a:hover { color:#614722;}

.soundbyte-player ul.playlist li.sm2_paused {
 background-color:#8c6b3b;
 border:1px solid #8c6b3b;
 border-radius:6px; 
 -webkit-border-radius:6px; 
 -moz-border-radius:6px;
 height:30px;
 margin:-1px 0 4px 0;
}
.soundbyte-player ul.playlist li.sm2_paused:hover {
 margin:-1px 0 4px 0;
}

.soundbyte-player ul.playlist li.sm2_paused a {
 background-position:0 -13px;
}

.soundbyte-player #fake_bar { height:4px; background-color:#937954; margin:-11px 0 -4px 18px;}

.soundbyte-player ul.playlist li .controls {
 margin:0 0 0 18px;
 background-color:#7c5c2e;
}

.soundbyte-player ul.playlist li.sm2_paused .controls {
 background-color:#a07e55;
}
.soundbyte-player ul.playlist li .controls .statusbar {
 height:4px;
 background-color:none;
 /*border:10px solid #301f0e;*/
 border:none;
 border-radius:0;
 -moz-border-radius:0;
 -webkit-border-radius:0
}

.soundbyte-player ul.playlist li .controls .statusbar .position {
 background-color:#d48319;
 border-right:3px solid #d48319;
 border-radius:0;
 -moz-border-radius:0;
 -webkit-border-radius:0;
}

.soundbyte-player ul.playlist li.sm2_paused .controls .statusbar .position {
 background-color:#4f3318;
 border-color:#4f3318;
}

.soundbyte-player ul.playlist li .controls .statusbar .loading {
 background-color:#7c5c2e;
}