/*

 SoundManager 2: "page as playlist" example
 ------------------------------------------
 http://schillmania.com/projects/soundmanager2/

*/

.spectrum-container {
	display:none;
}

ul.use-spectrum li.sm2_playing .spectrum-container {
	position:absolute;
	left:0;
	top:0;
	margin-left:-266px;
	margin-top:-1px;
	display:block;
	background-color:#5588BB;
	-webkit-border-top-left-radius:4px;
	border-top-left-radius:4px;
	-o-border-top-left-radius:4px;
	-ms-border-top-left-radius:4px;
	-moz-border-radius-topleft:4px;
	-webkit-border-top-right-radius:4px;
	border-top-right-radius:4px;
	-o-border-top-right-radius:4px;
	-ms-border-top-right-radius:4px;
	-moz-border-radius-topright:4px;
	-webkit-border-bottom-right-radius:4px;
	border-bottom-right-radius:4px;
	-o-border-bottom-right-radius:4px;
	-ms-border-bottom-right-radius:4px;
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-left-radius:4px;
	border-bottom-left-radius:4px;
	-o-border-bottom-left-radius:4px;
	-ms-border-bottom-left-radius:4px;
	-moz-border-radius-bottomleft:4px;
	border:1px solid #99CCFF;
}

ul.use-spectrum .spectrum-box {
	position:relative;
	width:255px;
	font-size:1em;
	height:1.2em;
	overflow:hidden;
	padding:2px 0px 2px 0px;
}

ul.use-spectrum .spectrum-box .spectrum {
	position:absolute;
	left:0;
	top:-2px;
	margin-top:20px;
	display:block;
	font-size:1px;
	width:1px;
	height:1px;
	background-color:#FFFFFF;
}

ul.playlist {
	list-style-type:none;
	width: 220px;
	margin:0;
	padding:0;
}

ul.playlist li {
	display:block;
	width:auto;
	font-size:1em;
	color:#666666;
	border-width:initial;
	border-top-color:#000000;
	border-right-color:#000000;
	border-bottom-color:#000000;
	border-left-color:#000000;
	-webkit-transition-property:background-color;
	transition-property:background-color;
	-o-transition-property:background-color;
	-ms-transition-property:background-color;
	-moz-transition-property:background-color;
	-webkit-transition-duration:0.15s;
	transition-duration:0.15s;
	-o-transition-duration:0.15s;
	-ms-transition-duration:0.15s;
	-moz-transition-duration:0.15s;
	-webkit-transition-timing-function:ease-in-out;
	transition-timing-function:ease-in-out;
	-o-transition-timing-function:ease-in-out;
	-ms-transition-timing-function:ease-in-out;
	-moz-transition-timing-function:ease-in-out;
	-webkit-transition-delay:initial;
	transition-delay:initial;
	-o-transition-delay:initial;
	-ms-transition-delay:initial;
	-moz-transition-delay:initial;
	line-height:1.5em;
	padding-top:0;
	padding-bottom:0;
	margin-top:0;
	margin-bottom:0;
	border-style:none;
}

ul.playlist li a {
	display:block;
	text-decoration:none;
	font-weight:normal;
	color:#000000;
	font-size:120%;
	outline-style:none;
	outline-width:initial;
	outline-color:#000000;
	position:relative;
	z-index:2;
}

ul.playlist li.sm2_playing, ul.playlist li.sm2_paused, ul.playlist li.sm2_playing a {
	display:block;
	color:#FFFFFF;
	-webkit-border-top-left-radius:3px;
	border-top-left-radius:3px;
	-o-border-top-left-radius:3px;
	-ms-border-top-left-radius:3px;
	-moz-border-radius-topleft:3px;
	-webkit-border-top-right-radius:3px;
	border-top-right-radius:3px;
	-o-border-top-right-radius:3px;
	-ms-border-top-right-radius:3px;
	-moz-border-radius-topright:3px;
	-webkit-border-bottom-right-radius:3px;
	border-bottom-right-radius:3px;
	-o-border-bottom-right-radius:3px;
	-ms-border-bottom-right-radius:3px;
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-left-radius:3px;
	border-bottom-left-radius:3px;
	-o-border-bottom-left-radius:3px;
	-ms-border-bottom-left-radius:3px;
	-moz-border-radius-bottomleft:3px;
}

ul.playlist li:hover {
	background-color:rgba(251,197,146,0.50);
}

ul.playlist li:hover a {
	color:#333333;
}

ul.playlist li.sm2_playing, ul.playlist li.sm2_playing:hover {
	background-color:#D10000;
}

ul.playlist li.sm2_paused {
	background-color:#999999;
}

ul.playlist li.sm2_playing:hover a, ul.playlist li.sm2_paused a {
	color:#FFFFFF;
}

ul.playlist li .controls {
	display:none;
}

ul.playlist li .peak, ul.playlist.use-peak li .peak {
	display:none;
	position:absolute;
	top:0.55em;
	right:0.5em;
}

ul.playlist li.sm2_playing .controls, ul.playlist li.sm2_paused .controls {
	position:relative;
	display:block;
}

ul.playlist.use-peak li.sm2_playing .peak, ul.playlist.use-peak li.sm2_paused .peak {
	display:inline-block;
}

ul.playlist.use-peak li .peak {
	display:none;
}

ul.playlist li.sm2_paused .controls {
	background-color:#666666;
}

ul.playlist li:hover .controls .statusbar {
	position:relative;
	cursor:ew-resize;
}

ul.playlist li.sm2_paused .controls .statusbar {
	background-color:#CCCCCC;
}

ul.playlist li .controls {
	position:relative;
	margin-top:0.25em;
	margin-bottom:0.25em;
	background-color:#99CCFF;
}

ul.playlist li .controls .statusbar {
	position:relative;
	height:0.5em;
	background-color:#CCDDFF;
	-webkit-border-top-left-radius:2px;
	border-top-left-radius:2px;
	-o-border-top-left-radius:2px;
	-ms-border-top-left-radius:2px;
	-moz-border-radius-topleft:2px;
	-webkit-border-top-right-radius:2px;
	border-top-right-radius:2px;
	-o-border-top-right-radius:2px;
	-ms-border-top-right-radius:2px;
	-moz-border-radius-topright:2px;
	-webkit-border-bottom-right-radius:2px;
	border-bottom-right-radius:2px;
	-o-border-bottom-right-radius:2px;
	-ms-border-bottom-right-radius:2px;
	-moz-border-radius-bottomright:2px;
	-webkit-border-bottom-left-radius:2px;
	border-bottom-left-radius:2px;
	-o-border-bottom-left-radius:2px;
	-ms-border-bottom-left-radius:2px;
	-moz-border-radius-bottomleft:2px;
	overflow:hidden;
	border:2px solid #FFFFFF;
}

ul.playlist li .controls.dragging .statusbar {
}

ul.playlist li .controls .statusbar .position, ul.playlist li .controls .statusbar .loading, ul.playlist li .controls .statusbar .annotation {
	position:absolute;
	left:0;
	top:0;
	height:0.5em;
}

ul.playlist li .controls .statusbar .position {
	-webkit-border-top-left-radius:3px;
	border-top-left-radius:3px;
	-o-border-top-left-radius:3px;
	-ms-border-top-left-radius:3px;
	-moz-border-radius-topleft:3px;
	-webkit-border-top-right-radius:3px;
	border-top-right-radius:3px;
	-o-border-top-right-radius:3px;
	-ms-border-top-right-radius:3px;
	-moz-border-radius-topright:3px;
	-webkit-border-bottom-right-radius:3px;
	border-bottom-right-radius:3px;
	-o-border-bottom-right-radius:3px;
	-ms-border-bottom-right-radius:3px;
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-left-radius:3px;
	border-bottom-left-radius:3px;
	-o-border-bottom-left-radius:3px;
	-ms-border-bottom-left-radius:3px;
	-moz-border-radius-bottomleft:3px;
	background-color:#000000;
	border-right:3px solid #336699;
}

ul.playlist li.sm2_paused .controls .statusbar .position {
	background-color:#666666;
	border-top-color:#666666;
	border-right-color:#666666;
	border-bottom-color:#666666;
	border-left-color:#666666;
}

ul.playlist li .controls .statusbar .loading {
	background-color:#EEEEEE;
}

ul.playlist li .controls .statusbar .note {
	background-color:#EEEEEE;
}
ul.playlist li .controls .statusbar .position, ul.playlist li .controls .statusbar .loading {
	width:0;
}

ul.playlist li.sm2_playing a.sm2_link, ul.playlist li.sm2_paused a.sm2_link {
	margin-right:4.5em;
}

ul.playlist li .timing {
	left: 0em;
	position: relative;
	display:none;
	text-align:right;
	width: 100px;
	height: 1em;
	background-color: #d10000;
	-webkit-border-top-left-radius:4px;
	border-top-left-radius:4px;
	-o-border-top-left-radius:4px;
	-ms-border-top-left-radius:4px;
	-moz-border-radius-topleft:4px;
	-webkit-border-top-right-radius:4px;
	border-top-right-radius:4px;
	-o-border-top-right-radius:4px;
	-ms-border-top-right-radius:4px;
	-moz-border-radius-topright:4px;
	-webkit-border-bottom-right-radius:4px;
	border-bottom-right-radius:4px;
	-o-border-bottom-right-radius:4px;
	-ms-border-bottom-right-radius:4px;
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-left-radius:4px;
	border-bottom-left-radius:4px;
	-o-border-bottom-left-radius:4px;
	-ms-border-bottom-left-radius:4px;
	-moz-border-radius-bottomleft:4px;
	letter-spacing:0;
	font:normal normal normal 80%/normal monaco, VT-100, 'lucida console', courier, system;
	line-height:1em;
	vertical-align:middle;
	border:1px solid #f7f4af;
	padding:3px 5px 3px 5px;
}

ul.playlist.use-peak li .timing {
	right:4.25em;
}

ul.playlist li:hover .timing {
	z-index:2;
}

ul.playlist li .timing div.sm2_timing {
	margin:-1em 0px 0px 0px;
	padding:0;
}

ul.playlist li.sm2_playing .timing, ul.playlist li.sm2_paused .timing {
	display:block;
}

ul.playlist li.sm2_paused .timing .sm2_position {
}

ul.playlist li.sm2_paused .timing, ul.playlist.use-peak li.sm2_paused .peak {
	background-color:#888888;
	border-top-color:#CCCCCC;
	border-right-color:#CCCCCC;
	border-bottom-color:#CCCCCC;
	border-left-color:#CCCCCC;
}

/* peak data */

/* ul.playlist ... */

ul.playlist.use-peak li .peak {
	position: relative;
	display:none;
	zoom:1;
	-webkit-border-top-left-radius:4px;
	border-top-left-radius:4px;
	-o-border-top-left-radius:4px;
	-ms-border-top-left-radius:4px;
	-moz-border-radius-topleft:4px;
	-webkit-border-top-right-radius:4px;
	border-top-right-radius:4px;
	-o-border-top-right-radius:4px;
	-ms-border-top-right-radius:4px;
	-moz-border-radius-topright:4px;
	-webkit-border-bottom-right-radius:4px;
	border-bottom-right-radius:4px;
	-o-border-bottom-right-radius:4px;
	-ms-border-bottom-right-radius:4px;
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-left-radius:4px;
	border-bottom-left-radius:4px;
	-o-border-bottom-left-radius:4px;
	-ms-border-bottom-left-radius:4px;
	-moz-border-radius-bottomleft:4px;
	background-color:#5588BB;
	width:0.8em;
	height:0.55em;
	margin-top:-3px;
	border:1px solid #99CCFF;
	padding:2px;
}

ul.playlist.use-peak li .peak-box {
	position:relative;
	width:100%;
	height:0.55em;
	overflow:hidden;
}

ul.playlist li .peak .l, ul.playlist li .peak .r {
	position:absolute;
	left:0;
	top:0;
	width:7px;
	height:50px;
	background-image:initial;
	background-repeat-x:no-repeat;
	background-repeat-y:no-repeat;
	background-repeat:no-repeat;
	background-attachment:initial;
	background-position:initial initial;
	background-position-x:initial;
	background-position-y:initial;
	background-origin:initial;
	background-clip:initial;
	background-color:#FFFFFF;
	-webkit-border-top-left-radius:1px;
	border-top-left-radius:1px;
	-o-border-top-left-radius:1px;
	-ms-border-top-left-radius:1px;
	-moz-border-radius-topleft:1px;
	-webkit-border-top-right-radius:1px;
	border-top-right-radius:1px;
	-o-border-top-right-radius:1px;
	-ms-border-top-right-radius:1px;
	-moz-border-radius-topright:1px;
	-webkit-border-bottom-right-radius:1px;
	border-bottom-right-radius:1px;
	-o-border-bottom-right-radius:1px;
	-ms-border-bottom-right-radius:1px;
	-moz-border-radius-bottomright:1px;
	-webkit-border-bottom-left-radius:1px;
	border-bottom-left-radius:1px;
	-o-border-bottom-left-radius:1px;
	-ms-border-bottom-left-radius:1px;
	-moz-border-radius-bottomleft:1px;
	margin-top:1em;
	border:1px solid #FFFFFF;
}

ul.playlist li .peak .l {
	margin-right:1px;
}

ul.playlist li .peak .r {
	left:10px;
}

#control-template {
	display:none;
}