/*

 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>


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

*/

ul.graphic a[href$=".mp3"]:link, ul.graphic a[href$=".mp3"]:visited {
  padding: 3px 10px 3px 25px;
  width: auto;
  min-height: 16px;
  border-radius: 3px;
  background-color: #2c4d9c;
  vertical-align: middle;
  text-decoration: none;
  font-weight: normal;
  color: #fff;
  -webkit-transition: 0.15s background-color linear;
  -moz-transition: 0.15s background-color linear;
  -o-transition: 0.15s background-color linear;
  -ms-transition: 0.15s background-color linear;
}
ul.graphic a[href$=".mp3"], ul.graphic a.sm2_paused[href$=".mp3"]:hover, ul.graphic a.sm2_paused[href$=".mp3"]:focus {
  background: #EBAD29 url(/soundmanager/icon_play.png) 3px 50% no-repeat;
}
ul.graphic a[href$=".mp3"]:hover, ul.graphic a[href$=".mp3"]:focus {
  background-color: #EBAD29;
  text-decoration: none !important;
  color: #fff;
}
ul.graphic a.sm2_playing[href$=".mp3"] {
  background-color: #EBAD29;
  background-image: url(/soundmanager/icon_pause.png);
  color: #fff;
}
ul.graphic a.sm2_paused[href$=".mp3"] {
  background-color: #999;
}

#sm2-container object, #sm2-container embed {
 /*
  flashblock handling: hide SWF off-screen by default (until blocked timeout case.)
  include body prefix to ensure override of flashblock.css.
 */

  position: absolute;
  left: -9999em;
  top: -9999em;
}