/*

 SoundManager 2: Basic MP3 player CSS
 ------------------------------------

 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_button" base.

 Default:

 sm2_button

 Additional states:

 sm2_playing
 sm2_paused

 eg.

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

 <!-- playing -->
 <a href="some.mp3" class="sm2_button 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_button{}
 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_button {}
 a.sm2_button: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 {}

*/

a.sm2_button {
 position:relative;
 display:inline-block; /* If you worry about old browser bugs, Firefox 2 might not like this and may need -moz-inline-box instead. :D */
 width:20px;
 height:20px;
 text-indent:-9999px; /* don't show link text */
 overflow:hidden; /* don't draw inner link text */
 vertical-align:middle;
 /* and, a bit of round-ness for the cool browsers. */
 border-radius:3px;
 /* vertical align tweak margin-top:-1px; */
 /* safari 3.1+ fun (/W3 working draft extension, TBD.) */
 -webkit-transition-property: hover;
 -webkit-transition: all 0.2s ease-in-out;
 -moz-transition: all 0.2s ease-in-out 0s; /* firefox 4 (couldn't sort out -moz-transform vs. MozTransform, so, "all" for now) */
 -o-transition-property: background-color; /* opera 10.5 */
 -o-transition-duration: 0.15s;
 /* weird IE 6/7 display fixes, and/or I'm doing it wrong */
 *text-indent:0px;
 *line-height:99em;
 *vertical-align: top;
}

a.sm2_button:focus {
 outline:none; /* maybe evil, but don't show the slight border outline on focus. */
}

a.sm2_button,
a.sm2_button.sm2_paused:hover {
 background-color:rgb(68, 66, 66);
 background-image:url(../images/media_play.png);
 *background-image:url(../images/media_play.png); /* IE 6+7 don't do DATA: URIs */
 background-repeat:no-repeat;
background-position: 2px 49.5%;
 *background-position:2px 49.5%; /* IE 6 again */
}

a.sm2_button:hover,
a.sm2_button.sm2_playing,
a.sm2_button.sm2_playing:hover {
 background-color:rgb(61, 158, 65);
}

a.sm2_button.sm2_playing{
 /*-moz-transform:rotate(90deg);
 -webkit-transform:rotate(90deg);
 -ms-transform:rotate(90deg);*/
  background-image:url(../images/media_pause.png);
  *background-image:url(../images/media_pause.png);
  background-position: 2px 50%;
  *background-position: 2px 50%; /* IE 6 again */
}

a.sm2_button.sm2_paused {
 background-color:rgb(68, 66, 66);
}

a.sm2_button.sm2_paused:hover {
 background-color:rgb(61, 158, 65);
}