/* Soundtrack Player - uses SoundManager2 and 360player */

#sm2-container
{
	position:absolute;
	top:-1px;
	height:1px;
	width:1px;
	overflow:hidden;
}

.music-player .song-list ul
{
	position:relative;
	list-style-type:none;
}

.music-player .song-list ul,
.music-player .song-list li
{
	margin:0;
	padding:0;
}




.sm2-360ui .sm2-canvas
{
	display:none;
}

.sm2-360ui.sm2_buffering .sm2-canvas,
.sm2-360ui.sm2_playing .sm2-canvas,
.sm2-360ui.sm2_paused .sm2-canvas
{
	display:block;
}


.ui360, /* entire UI */
.sm2-360ui { /* canvas container */
 position:relative;
}

.ui360 {
 min-width:30px;
 min-height:30px;
}

.sm2-360ui {
	min-width:30px;
	min-height:30px;
	width:30px;
	height:30px;
}

.ui360,
.ui360 * {
 vertical-align:middle;
}

.sm2-360ui {
 position:relative;
 display:inline-block; /* firefox 3 et al */
 float:left; /* IE 6+7, firefox 2 needs this, inline-block would work with fx3 and others */
 *display:inline;
}

.sm2-360ui.sm2_playing,
.sm2-360ui.sm2_paused {
 /* bump on top when active */
 z-index:12;
}

.ui360 a { /* .sm2_link class added to playable links by SM2 */
 position:absolute;
 display:block;
 color:white;
 text-decoration:none;
 width:100%;
 height:100%;
 top:0;
 left:0;
}

.ui360 a.sm2_link { /* SM2 has now started */
 text-indent:0px; /* UI now in place. */
}

.ui360 a,
.ui360 a:hover,
.ui360 a:focus {
 /*
 padding-top:6px;
 */
 padding-top:2px;
}

.ui360.current a,
.ui360 a:hover,
.ui360 a:focus {
 background:rgba(19,43,134,0.1);
 background:rgba(255,255,255,0.04);
 outline:none;
}



.ui360 .sm2-canvas {
 position:absolute;
 left:0px;
 top:0px;
}

.ui360 .sm2-timing {
 display:none;
}

.ui360 .sm2-timing.alignTweak {
 text-indent:1px; /* devious center-alignment tweak for Safari (might break things for others.) */
}

/* covers pause btn & loader while playing */
.ui360 .sm2-cover {
 position:absolute;
 left:0px;
 top:0px;
 width:100%;
 height:100%;
 z-index:11;
 display:none !important;
 background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); /* old-skool bug: IE 9 won't catch mouse events otherwise. /smash */
}

.ui360 .sm2-360btn {
 position:absolute;
 display:block;
 top:50%;
 left:50%;
 /* load/play circle around play button */
 width:30px;
 height:30px;
 margin-left:-15px;
 margin-top:-15px;
 border-radius: 15px;
 cursor:pointer;
 z-index:3;
}

.ui360 .sm2-360data {
 display:inline-block;
 font-family:helvetica;
}

.sm2-inline-block .ui360 .sm2-360btn,
.ui360 .sm2-360ui.sm2_playing .sm2-360btn,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn {
 /* smaller clickable button, in center */
 width:28px;
 height:28px;
 margin-left:-14px;
 margin-top:-14px;
}


.ui360 .sm2-360ui.sm2_playing .sm2-cover,
.ui360 .sm2-360ui.sm2_paused .sm2-cover {
 display:block;
}

/* this could be optimized a fair bit. */

.ui360,
.ui360 .sm2-360btn-default,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn {
 background:transparent url(../media/images/products/soundmgr_ui/360-button-play.png) no-repeat;
}

.ui360 {
 /*
  "fake" button shown before SM2 has started, non-JS/non-SM2 case etc.
  background image will be removed via JS, in threeSixyPlayer.init()
 */
 background-position: 1px 1px;
 _background:transparent url(../media/images/products/soundmgr_ui/360-button-play.gif) no-repeat 14px 50%; /* IE 6-only: special crap GIF */
 /*
 margin-bottom:3px;
 */
}

.ui360 .sm2-360btn-default,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn {
 background-position:50% 50%;
 _background:transparent url(../media/images/products/soundmgr_ui/360-button-play.gif) no-repeat 50% 50%; /* IE 6-only: special crap GIF */
}

.ui360 .sm2-360btn-default,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn {
 cursor:pointer;
}

.ui360 .sm2-360btn-default:hover,
.ui360 .sm2-360ui.sm2-btn-hilite .sm2-360btn,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn:hover {
 background:transparent url(../media/images/products/soundmgr_ui/360-button-play-light.png) no-repeat 50% 50%;
 _background:transparent url(../media/images/products/soundmgr_ui/360-button-play.gif) no-repeat 50% 50%;
 cursor:pointer;
}

.ui360 .sm2-360ui.sm2_playing .sm2-360btn:hover,
.ui360 .sm2-360ui.sm2_playing.sm2-btn-hilite .sm2-360btn,
.ui360 .sm2-360btn-playing:hover {
 background:transparent url(../media/images/products/soundmgr_ui/360-button-pause-light.png) no-repeat 50% 50%;
 _background:transparent url(../media/images/products/soundmgr_ui/360-button-pause-light.gif) no-repeat 50% 50%;
 cursor:pointer;
}

.ui360 .sm2-360ui.sm2_playing,
.ui360 .sm2-360ui.sm2_playing .sm2-timing {
 background:transparent url(../media/images/products/soundmgr_ui/360-button-pause.png) no-repeat 1px 1px;
}

.ui360 .sm2-360ui.sm2_buffering .sm2-timing {
 visibility:hidden;
}

.ui360 .sm2-360ui .sm2-timing,
.ui360 .sm2-360ui .sm2-360btn:hover + .sm2-timing,
.ui360 .sm2-360ui.sm2_paused .sm2-timing {
 visibility:hidden;
}

.ui360 .sm2-360ui.sm2_dragging .sm2-timing,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover + .sm2-timing {
 /* paused + dragging 
 visibility:visible;
 */
}

.ui360 .sm2-360ui.sm2_playing .sm2-360btn,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn-playing:hover {
 /* don't let pause button show on hover when dragging (or paused and dragging) */
 background:transparent;
 cursor:auto;
}

.ui360 .sm2-360ui.sm2_buffering .sm2-360btn,
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn:hover {
  background:transparent url(../media/images/products/soundmgr_ui/icon_loading_spinner.gif) no-repeat 50% 50%;
  visibility:visible;
  /*
  opacity:0.5;
  */
}

/* inline list style */

.sm2-inline-list .ui360,
.sm2-inline-block .ui360 {
 position:relative;
 display:inline-block;
 float:left;
 _display:inline;
 margin-bottom:-15px;
}

.sm2-inline-list .ui360 {
 /* inline player: minor tweak, tighten spacing */
 margin-right:-2px;
}

.sm2-inline-block .ui360 {
 margin-right:8px;
}

.sm2-inline-list .ui360 a {
 display:none;
}

/* annotations */

ul.ui360playlist {
 list-style-type:none;
}

ul.ui360playlist,
ul.ui360playlist li {
 margin:0px;
 padding:0px;
}

div.ui360 div.metadata {
 display:none;
}

div.ui360 a span.metadata,
div.ui360 a span.metadata * {
 /* name of track, note etc. */
 vertical-align:baseline;
}



html.lt-ie9 .ui360.current a,
html.lt-ie9 .ui360 a:hover,
html.lt-ie9 .ui360 a:focus
{
	background:transparent url(../media/images/global/rgba_255-255-255-05.png) repeat;
}

html.lt-ie8 h3
{
	font-size:120%;
}
html.lt-ie8 .ui360 a
{
	z-index:11;
}
html.lt-ie8 .sm2-360ui
{
	z-index:14;
}