.ui360,
.sm2-360ui {
	position:relative;
}

.ui360 { }

.ui360,
.sm2-360ui {
	min-width:100px;
	min-height:100px;
}

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

.sm2-360ui {
	background-color: rgba(0,0,0,0.25);
	border-radius: 100%;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
	-moz-transition-property: background, border, box-shadow;
	-webkit-transition-property: background, border, box-shadow;
	transition-property: background, border, box-shadow;
}

.sm2-360ui:hover { }

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

.sm2-360ui {
	position:relative;
	display:inline-block;
	float:left;
	*display:inline;
	clear:left;
}

.sm2-360ui.sm2_playing,
.sm2-360ui.sm2_paused {
	z-index:10;
}

.ui360 a {
	color:#000;
	text-decoration:none;
	text-indent:50px;
	display:inline;
	float:left;
	position:relative;
	left:3px;
	top:18px;
}

.ui360 a.sm2_link {
	text-indent:0px;
}

.ui360 a,
.ui360 a:hover,
.ui360 a:focus {
	padding:2px;
	margin-left:-2px;
	margin-top:-2px;
}

.ui360 a:hover,
.ui360 a:focus {
	background: #eee;
	border-radius:3px;
	outline:none;
}

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

.ui360 .sm2-canvas.hi-dpi {
	top: -50%;
	left: -50%;
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
}

.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:#666;
	text-align:center;
	line-height:100px;
}

.ui360 .sm2-timing.alignTweak { }

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

.ui360 .sm2-360btn {
	position:absolute;
	display:block;
	top:50%;
	left:50%;
	width:100px;
	height:100px;
	margin-left:-50px;
	margin-top:-50px;
	border-radius: 50px;
	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 {
	width:50px;
	height:50px;
	margin-left:-25px;
	margin-top:-25px;
}

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

.ui360,
.ui360 .sm2-360btn-default,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn {
 background:transparent url(img/play.png) no-repeat;
 background-size: 50px 50px;
}

.ui360 { }

.ui360 .sm2-360btn-default,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn {
 background-position:50% 50%;
}

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

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

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

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

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

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

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

.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 url(img/pause.png) no-repeat 50% 50%;
 background-size: 50px 50px;
 cursor:auto;
}

.ui360 .sm2-360ui.sm2_buffering .sm2-360btn,
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn:hover {
  background: white url(img/loader.gif) no-repeat 50% 50%;
  background-size: 20px 20px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  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-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;
}