/*
 SoundManager 2:"page as playlist"example
 ------------------------------------------
 http://schillmania.com/projects/soundmanager2/
*/
.spectrum-container {display:none}
#sm2-container {height:0px;overflow:hidden;}
ul.use-spectrum li.sm2_playing .spectrum-container{ position:absolute;left:0px;top:0px;margin-left:-266px;margin-top:0px;display:block;background-color:#58b;}
ul.use-spectrum .spectrum-box{ position:relative;width:255px;font-size:12px;padding:0px;height:36px;overflow:hidden}
ul.use-spectrum .spectrum-box .spectrum{ position:absolute;left:0px;top:0px;margin-top:20px;display:block;font-size:10px;width:10px;height:10px; /* set to 50px for a thick line,1px for a thin line,etc. */ overflow:hidden;background-color:#fff}
ul.playlist{ list-style-type:none;padding:0;margin:0 0 22px;border:none;width:auto;}
ul.playlist li{position:relative;display:block;margin:0;padding:0;width:auto;color:#666;height:36px;border:1px dotted #000;border-width:1px 0; /* ZOMG WEB X.0.; ) */ background-color:#DDD;-webkit-transition-property:hover;-webkit-transition:background-color 0.15s ease-in-out; /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */ }
ul.playlist li a {display:block;margin:0;padding:0;height:36px;width:100%;overflow:hidden;text-decoration:none;font-weight:100;color:#000;font-size:22px;line-height:36px;outline:none;position:absolute;left:0px;z-index:2}
ul.playlist li a:before {content:"+ ";}
ul.playlist li.sm2_playing, 
ul.playlist li.sm2_paused, 
ul.playlist li.sm2_playing a{ color:#000;}
ul.playlist li:hover,
ul.playlist li:hover a,
ul.playlist li.sm2_playing a:hover {color:#333}
ul.playlist li.sm2_playing {padding:0;margin:0;}
ul.playlist li.sm2_playing:hover{background-color:#000}
ul.playlist li.sm2_paused{}
ul.playlist li.sm2_playing:hover a, 
ul.playlist li.sm2_paused a{color:#333}
ul.playlist li .controls{display:none}
ul.playlist li .peak, 
ul.playlist.use-peak li .peak{ display:none;position:absolute;top:0px;right:0px;}
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:0;margin-bottom:0; }
ul.playlist li .controls .statusbar { position:relative;height:36px;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:36px;}
ul.playlist li .controls .statusbar .position{ background-color:#AAA;border-right:3px solid #AAA;}
ul.playlist li.sm2_paused .controls .statusbar .position{ background-color:#AAA;border-color:#AAA}
ul.playlist li .controls .statusbar .loading{background-color:#DDD}
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:10px;top:0px;width:auto;line-height:36px;font:10px monaco,"VT-100",terminal,"lucida console",courier,system;line-height:36px;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:-20px}
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{}

/* peak data */
/* ul.playlist ... */
ul.playlist.use-peak li .peak{ display:none;zoom:1;border:1px solid #9cf;padding:2px;height:0.55em;-moz-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;background-color:#58b;width:0.8em;height:0.55em;margin-top:-3px}
ul.playlist.use-peak li .peak-box{ position:relative;width:600px;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}
