/*

 SoundManager 2: "page as playlist" example
 ------------------------------------------

 Clicks on links to MP3s are intercepted via JS, calls are
 made to SoundManager to load/play sounds. CSS classes are
 appended to the LI parent, which are used to highlight the
 current play state and so on.

 Class names are applied in addition to "sm2_link" base.

 Default:

 sm2_link

 Additional states:

 sm2_playing
 sm2_paused

 eg.

 <!-- default -->
 <li class="sm2_link"><a href="some.mp3">some.mp3</a></li>

 <!-- playing -->
 <li class="sm2_link sm2_playing"><a href="some.mp3">some.mp3</a></li>

 The script also injects an HTML template containing control bar
 and timing elements, which can also be targeted with CSS.


 Note you don't necessarily require ul.playlist for your use
 if only using one style on a page. You can just use .sm2_link
 and so on, but isolate the CSS you want.

 Side note: Would do multiple class definitions eg.

 li.sm2_default.sm2_playing{}

 .. except IE 6 has a parsing bug which may break behaviour,
 applying sm2_playing {} even when the class is set to sm2_default.


 If you want to make your own UI from scratch, here is the base:

 Default + hover state, "click to play":

 li.sm2_link {}
 li.sm2_link:hover {}

 Playing + hover state, "click to pause":

 li.sm2_playing {}
 li.sm2_playing:hover {}

 Paused + hover state, "click to resume":

 li.sm2_paused {}
 li.sm2_paused:hover {}

*/


/* background-image-based CSS3 example */

.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;
 margin-top:0.3em;
}

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. ;) */
}

ul.playlist li a {
 display:block;
 text-decoration:none;
 font-weight:normal;
 color:#000;
 font-size:120%;
 outline:none;
 position:relative;
 z-index:2;
 text-shadow: 0 0 0 #fff; /* stupid Safari "fat" font rendering tweak */
}

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 {
}

ul.playlist li:hover a {
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_playing:hover {
}

ul.playlist li.sm2_paused {
}

ul.playlist li.sm2_playing:hover a,
ul.playlist li.sm2_paused a {
}

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;
	margin: 96px 155px 0 0;
	z-index: 100;

}

/*boaz*/

.demo-block img{
	z-index: 0;
}

.sm1_playing .statusbar{
	margin: -115px 0 0 0;
	z-index: 100;
}

.sm2_playing .statusbar{
	margin: -120px 0 0 0;
	z-index: 100;
}

.controls{
	width: 70px;
	z-index: 100;
	margin: 0 0 0 120px;
}

.timing, .timing-data{
	z-index: 110;
	margin: -80px 0 0 0;
	font-size: 30px;
}


.peak{
	margin: 40px 0 0 0;
	z-index: 100;
}

.demo-block img {
	cursor: pointer;
}

#sm2-container{position: absolute; top: 57px; left: 56px; z-index: 1;height:1px;width:6px;}
#sm2-container embed{z-index:1;position: relative}

demo-block img{
	z-index: 0;
}

.tele .statusbar, .tele .controls, .tele .timing, .tele .timing-data, .tele .peak{
	display: none;
}

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;
}

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

.video_preview ul.playlist li .controls {
 position:relative;
 margin-top:85px;
 margin-left:125px;
 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:#333;
 border-right:3px solid #333;
 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 .timing {
}

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;
 text-shadow: 0 0 0 #fff; /* stupid Safari "fat" font rendering tweak */
}

ul.playlist li.sm2_playing .timing,
ul.playlist li.sm2_paused .timing {
 display:block;
 visibility: hidden; /*I did this, -boaz*/
}

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 {
 z-index: 100;
}

/* peak data */

/* ul.playlist ... */

ul.playlist.use-peak li .peak {
 display:none;
 zoom:1;
 padding:2px;
 height:0.55em;
 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;
}