/*



 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.flat {

 list-style-type:none;

 padding-left:0px;

}



ul.flat li,

ul.graphic li {

 padding-bottom:1px;
 

}



ul.flat li a {

 display:inline-block;

 padding:2px 4px 2px 4px;

}



ul.graphic {

 list-style-type:none;

 padding-left:0px;

 margin-left:0px;

}



/* background-image-based CSS3 example */



ul.graphic {

 list-style-type:none;

 margin:0px;

 padding:0px;

}



ul.graphic li {

 margin-bottom:2px;

}



ul.graphic li a,

ul.graphic li a.sm2_link {

 /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */

 display:inline-block;

 padding-left:22px;

 min-height:16px;

 border:0px solid #56120f;
 
 background-color:#666;

 -moz-border-radius:3px;

 -webkit-border-radius:3px;

 border-radius:3px;

 padding:2px 3px 2px 20px;

 min-width:16em;

 _width:16em;
 
 text-decoration:none;

 font-weight:100;
 
 font-family:Arial, Helvetica, sans-serif;
 
 font-size:10pt;

 color:#fff;
 
 text-align:left;

}



ul.graphic li a.sm2_link {

 /* safari 3.1+ fun (or, proprietary crap. TBD.) */

 -h: hover;

 -webkit-transition: all 0.15s ease-in-out; 
 	

}



ul.graphic li a.sm2_link {

 background:#336699 url(../image/icon_play.png) no-repeat 0px 50%;

 _background-image:url(../image/icon_play.gif); /* IE 6 */

 border-color:000000;
  
}

ul.graphic li a.sm2_paused:hover {

 background:#999 url(../image/icon_pause.png) no-repeat 0px 50%;

 _background-image:url(../image/icon_pause.gif); /* IE 6 */

 border-color:#999;
  
}

ul.graphic li a.sm2_link:hover {

 background:#ffffff url(../image/icon_play.png) no-repeat 0px 50%;

 _background-image:url(../image/icon_play.gif); /* IE 6 */

 border-color:#336699;
 
 color:#000000;
  
}



ul.graphic li a.sm2_paused {

 background-color:#999;

 border-color:#999;

}



ul.graphic li a.sm2_paused:hover {

 background:#999 url(../image/icon_play.png) no-repeat 0px 50%;

 _background-image:url(../image/icon_play.gif);

 border-color:#999;

}



ul.graphic li a.sm2_playing {

 background:999 url(../image/icon_pause.png) no-repeat 0px 50%;

 _background-image:url(../image/icon_pause.gif);

 border-color:#999;

 text-decoration:none;

}

ul.graphic li a.sm2_playing:hover {

 background:#003366 url(../image/icon_pause.png) no-repeat 0px 50%;

 _background-image:url(../image/icon_pause.gif);

 border-color:#336699;

 text-decoration:none;
 
 color:#FFFFFF;

}




/* hide button while playing?

ul.graphic li a.sm2_playing {

 background-image:none;

}

*/

<!-- border-color:#336699;-->

/* flat CSS example */



ul.flat a.sm2_link {

 /* default state: "a playable link" */

 border-left:6px solid #999;

 padding-left:4px;

 padding-right:4px;

}



ul.flat a.sm2_link:hover {

 /* default (inactive) hover state */

 border-left-color:#333;

}





ul.flat a.sm2_playing {

 /* "now playing" */

 border-left-color:#6666ff;

 background-color:#000;

 color:#fff;

 text-decoration:none;

}



ul.flat a.sm2_playing:hover {

 /* "clicking will now pause" */

 border-left-color:#cc3333;

}



ul.flat a.sm2_paused {

 /* "paused state" */

 background-color:#666;

 color:#fff;

 text-decoration:none;

}



ul.flat a.sm2_paused:hover {

 /* "clicking will resume" */

 border-left-color:#33cc33;

}