/*



 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.1em;

 overflow:hidden;

}



ul.use-spectrum .spectrum-box .spectrum {

 position:absolute;

 left:0px;

 top:-2px;

 margin-top:10px;

 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:1em;

 color:#666;

 padding:0.25em 0.5em 0.25em 0.3em;

 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:100%;

 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:74% 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;

}