/*

 SoundManager 2: In-page MP3 player 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 link, 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 -->
 <a href="some.mp3" class="sm2_link">some.mp3</a>

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


 Note you don't require ul.graphic / ul.flat etc. 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.

 a.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":

 a.sm2_link {}
 a.sm2_link:hover {}

 Playing + hover state, "click to pause":

 a.sm2_playing {}
 a.sm2_playing:hover {}

 Paused + hover state, "click to resume":

 a.sm2_paused {}
 a.sm2_paused:hover {}


*/


/* two different list types */

ul.playlist {
	margin: 10px 0 0;
}

ul.playlist li {
 	
}

ul.playlist li a {
 display:block;
 float: left;
 height: 70px;
 width: 50px;
 color: #999;
}
ul.playlist li a div{
	padding: 50px 0 0 10px;
	font-size: 80%;
}


/* flat CSS example */

ul.playlist a.sm2_link {
 /* default state: "a playable link" */
  background: url(../img/buttons/bigPlay_bt.gif) no-repeat;

}

ul.playlist a.sm2_link:hover {
 /* default (inactive) hover state */
 	color: #2b99dc;
	background: url(../img/buttons/bigPlayBlue_bt.gif) no-repeat;	
}


ul.playlist li.sm2_playing a {
 /* "now playing" */
 	background: url(../img/buttons/bigPause_bt.gif) no-repeat;
}

ul.playlist li.sm2_playing:hover a{
 /* "clicking will now pause" */
 	background: url(../img/buttons/bigPauseBlue_bt.gif) no-repeat;

}

ul.playlist li.sm2_paused a{
 /* "paused state" */
	background: url(../img/buttons/bigPlay_bt.gif) no-repeat;
}

ul.playlist li.sm2_paused:hover a{
 /* "clicking will resume" */
	background: url(../img/buttons/bigPlayBlue_bt.gif) no-repeat;
}


 /* ---------------------------------- controls ---------------------------------*/
ul.playlist li .controls {
 position:relative;
 display:block;
}



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:#ccc;
}

ul.playlist li .controls {
 position:relative;
 margin:0.25em 0 .25em 55px;
 background-color:#99ccff;
}

ul.playlist li .controls .statusbar {
 position:relative;
 height:45px;
 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:45px;
}

ul.playlist li .controls .statusbar .position {
 background:#336699  url('../img/buttons/seekBlue.gif') repeat-x center;
 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:#666  url('../img/buttons/seekGrey.gif') repeat-x center;
 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.song.sm2_link,
ul.playlist li.sm2_paused a.song.sm2_link {
 margin-right:4.5em;/* room for timing stuff */
}

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

#control-template {
	display: block;
}