/* General warning: Beta-ish. Code could be a bit cleaner. */

.ui360,
.ui360 * {
 position:relative;
}

.ui360,
.sm2-360ui {
 /* size of the container for the circle, etc. */
 width:50px;
 height:50px;
}

.ui360 {
 position:relative;

}

.ui360 a {
 line-height:50px;
}

.sm2-360ui {
 margin-left:-50px;
}

.ui360 {
 width:auto;
 padding:0;
 border-bottom: 1px solid rgb(221,221,221);
 
}

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

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

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

.ui360 a.sm2_link { /* this class added to playable links by SM2 */
 position:relative;
}

.ui360 a {
	font-size: 1.3em;
	color:rgb(54,54,54);
	font-weight: bold;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	webkit-border-radius: 5px;
	border-radius: 5px;
	background:rgba(250,150,30,0);
	-webkit-transition: background .3s ease-out;
 	text-decoration:none;
 	display: inline-block;
 	line-height:30px;
 	margin-top: 10px;
 	padding: 0 10px;
 	
}

.ui360 a,
.ui360 a:hover,
.ui360 a:focus {
 /* padding:10px; */
}

.ui360 a:hover,
.ui360 a:focus {
 background:rgb(250,150,30);
 background:rgba(250,150,30,1);
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 -khtml-border-radius:5px;
 border-radius:5px;
 outline:none;
 color:rgb(255,255,255);
}

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

.ui360 .sm2-timing {
 position:absolute;
 display:block;
 left:0px;
 top:0px;
 width:100%;
 height:100%;
 margin:0px;
 font:11px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;
 color:rgb(54,54,54);
 text-align:center;
 line-height:50px;
}

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

.ui360 .sm2-cover {
 position:absolute;
 left:0px;
 top:0px;
 z-index:2;
 display:none;
}

.ui360 .sm2-360btn {
 position:absolute;
 top:50%;
 left:50%;
 width:22px;
 height:22px;
 margin-left:-11px;
 margin-top:-11px;
 cursor:pointer;
 z-index:3;
}

.ui360 .sm2-360btn-default {
}

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

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

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

.ui360 .sm2-360btn-default {
 background:transparent url(../img/360-button-play.png) no-repeat 50% 50%;
 _background:transparent url(../img/360-button-play.gif) no-repeat 50% 50%; /* IE 6-only: special crap GIF */
 cursor:pointer;
}

.ui360 .sm2-360ui.sm2_paused .sm2-360btn {
 background:transparent url(../img/360-button-play.png) no-repeat 50% 50%;
 _background:transparent url(../img/360-button-play.gif) no-repeat 50% 50%;
 cursor:pointer;
}

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

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


.ui360 .sm2-360ui.sm2_playing .sm2-timing {
 visibility:visible;
}

.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,
x.ui360 .sm2-360btn-playing,
.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(../img/icon_loading_spinner.gif) no-repeat 50% 50%;
  opacity:0.5;
  visibility:visible;
}

/* 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 {
 margin-bottom:0px;
}

.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;
}