/* General warning: Beta-ish. Code could be a bit cleaner. */
.ui360,
.ui360 * {
	vertical-align:middle;
}
.ui360,
.sm2-360ui {
 min-width:50px; /* should always be at least this. */
 min-height:50px;
}
.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:10;
}

.ui360 a { /* .sm2_link class added to playable links by SM2 */
	display: none;
}

.ui360 .sm2-timing {
	display: none;
}
.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;
	width:100%;
	height:100%;
	z-index:2;
	display:none;
	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%;
	width: 46px;
	height:46px;
	margin-left:-23px;
	margin-top:-23px;
	border-radius: 50%;
	cursor:pointer;
	z-index:3;
}
.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;
}
.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: 14px 50%; */
}
.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-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,
.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-360btn-default {
 /* real button, post-loaded state */
}

.ui360 .sm2-360ui.sm2_dragging .sm2-360btn {
	visibility: hidden;
}

/* 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;
}

div.ui360 div.metadata {
	display:none;
}
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn,
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn:hover {
	background:transparent url(/nav/player/loading_30a.gif) no-repeat 3px 3px;
	opacity: 0.4;
}
.ui360 .sm2-360btn,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn,
.ui360 .sm2-360ui.sm2_playing .sm2-360btn
 {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin-left: -7px;
	margin-top: -7px;
	border-radius: 50%;
	border-width: 0;
	cursor:pointer;
	z-index:3;
}
sm2-360btn sm2-360btn-default

.ui360:hover .sm2-360btn,
.ui360 .sm2-360btn-default:hover,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn:hover {
	background:transparent url(/nav/player/player_aan_36.png) no-repeat 0 0;
	margin-left: -7px;
	margin-top: -7px;
	cursor:pointer;
}
.ui360,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn,
.ui360 .sm2-360btn-default {
	background:transparent url(/nav/player/player_uit_grijs.png) no-repeat 0 0;
	margin-left: -7px;
	margin-top: -7px;
	cursor:pointer;
}


.ui360,
.sm2-360ui {
/* size of the container for the circle, etc. */

	margin: 0;	/* alleen bij grote speler */
	line-height: 1;
}
.ui360 {
 /* non-JS / before-loaded state */
	display: inline-block;
	background-color: transparent;
	border: 1px solid rgba(255,255,255,0.5);
	box-shadow: inset 0px 0px 32px rgba(255,255,255,0.5);
  	width: 72px;
	height: 72px;
	border-radius: 50%;
	position: relative;
}
.ui360 .sm2-360ui {

}
.ui360 .sm2-canvas {
	position:absolute;
  	width: 76px;
	height: 76px;
	left: -4px;
	top: -4px;
	border-radius: 50%;
	border: solid 2px transparent;
}
.ui360 canvas {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-moz-transition-property: background-color, border, box-shadow;
	-webkit-transition-property: background-color, border, box-shadow;
	transition-property: background-color, border, box-shadow;

}
.ui360 .sm2_playing canvas,
.ui360 .sm2_paused canvas {
	/* hide song title while playing */
	*background-color: transparent; /* not you, crap IE. */
	background-color: transparent\9; /* nor IE 8. */
	background:transparent url(/nav/player/player_pauze_uit_grijs.png) no-repeat 50% 50%;
}
.ui360:hover .sm2_playing canvas,
.ui360:hover .sm2_paused canvas {
	background:transparent url(/nav/player/player_pauze_aan_36.png) no-repeat 50% 50%;
	cursor:pointer;
}