/*
 SoundManager 2:"page as playlist"example
 ------------------------------------------
 http://schillmania.com/projects/soundmanager2/
*/
.spectrum-container{ xdisplay: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:#58b;  border:1px solid #9cf;  -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:22px;  color:#666;  /*padding:0.25em 0.5em 0.25em 0.5em; */ border:none;  letter-spacing:-1px; /* ZOMG WEB X.0.; ) */ -webkit-transition-property:hover;  -webkit-transition:background-color 0.15s ease-in-out;  -moz-transition:background-color 0.15s linear 0s; /* firefox 4 */ -o-transition-property:background-color; /* opera 10.5 */ -o-transition-duration:0.15s}

ul.playlist li a{ display:block;  text-decoration:none;  font-weight:normal;  color:#000;  font-size:120%;  outline:none;  position:relative;  z-index:2}

.audio-player ul.playlist li.sm2_playing, 
.audio-player ul.playlist li.sm2_paused{ width:870px; margin:10px 0 5px 45px; float:left; height:auto; background:transparent; position:relative}
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 div.controls-wrap{height:0}
*/
ul.playlist li.sm2_playing, 
ul.playlist li.sm2_playing:hover{/* background-color:#eee; */}

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;  right:0.5em}

ul.playlist li.sm2_playing .controls, 
ul.playlist li.sm2_paused .controls{ position:relative;  display:block;  width:740px}

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:hover .controls .statusbar{ position:relative;  cursor:ew-resize;  cursor:-moz-grab;  cursor:grab}

ul.playlist li .controls{ position:relative; /* margin-top:0.25em;  margin-bottom:0.25em; */ }

ul.playlist li .controls .statusbar{ position:relative;  height:15px;  background-color:#eee;  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:15px}

ul.playlist li .controls .statusbar .position{ background-color:#ca1f32;  border-right:3px solid #ca1f32;  border-radius:3px;  -moz-border-radius:3px;  -webkit-border-radius:3px}

ul.playlist li.sm2_paused .controls .statusbar .position{ background-color:#ca1f32;  border-color:#ca1f32}

ul.playlist li .controls .statusbar .loading{ background-color:#ccc}

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{  width:108px; height:24px; /* background-image:url(../images/bg_player_controls.png); background-repeat: no-repeat; */ position:absolute; right:12px; top:-34px}

ul.playlist li.sm2_playing a.sm2_link{background-position:0 0}
ul.playlist li.sm2_playing a.sm2_link:hover{background-position:0 -24px}
ul.playlist li.sm2_playing a.sm2_link:active{background-position:0 -48px}
ul.playlist li.sm2_paused a.sm2_link{background-position:0 -72px}
ul.playlist li.sm2_paused a.sm2_link:hover{background-position:0 -96px}
ul.playlist li.sm2_paused a.sm2_link:active{background-position:0 100%}

ul.playlist li .timing{ position:absolute;  display:none;  text-align:right;  right:1em;  top:0;  width:auto;  height:1em;  padding:3px 5px;  background-color:#333;  border:1px solid #333;  -moz-border-radius:4px;  -khtml-border-radius:4px;  border-radius:4px;  letter-spacing:0px;  font:44% monaco,"VT-100","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:#ca1f32;  border-color:#ca1f32; /* background-color:#888;  border-color:#ccc; */}

/* peak data */
/* ul.playlist ... */
ul.playlist.use-peak li .peak{ display:none;  zoom:1;  border:1px solid #333;  padding:2px;  height:0.55em;  -moz-border-radius:4px;  -khtml-border-radius:4px;  border-radius:4px;  background-color:#333;  width:0.8em;  height:0.55em;  margin-top:-1px}

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}

