#player-wrapper {
	visibility: hidden; /* display: none breaks player location ball, using this instead */
	height:20px;
	width:490px;
	
	position:relative;
	left:83px;
	top:-5px;
}

.sm2player {
	height:20px;
	font:normal xx-small/19px verdana,tahoma,arial;
	*line-height:18px;
	letter-spacing:-1px;
	color:#4f4f4f;
	zoom:1;
}

.sm2player.altFont {
	letter-spacing:0px; /* font tweaks for mac which has tighter spacing */
}

.sm2player .ui {
	_filter:none; /* IE <7 sucks */
}

.sm2player.noOpacity .ui {
	opacity:1; /* Safari (1.3.2 at least?) has render bugs with UI display + animated PNG progress bar when applying opacity */
}

.sm2player .ui:hover {
	opacity:1;
	filter:alpha(opacity=100);
}

.sm2player a:focus {
	outline:none;
}

.sm2player .left,
.sm2player .mid,
.sm2player .right {
	position:relative;
	float:left;
	display:inline;
	height:20px;
	color:#4f4f4f;
}

.sm2player .left {
	width:15px;
	background:transparent url(../image/skin-3-ui.png) 0px 0px no-repeat;
	_background-image:url(../image/skin-3-ui.gif); /* IE <7 */
}

.sm2player .left .trigger,
.sm2player .left .trigger span {
	display:block;
	width:15px;
	height:20px;
}

.sm2player .left .trigger.pauseplay span {
	background:transparent url(../image/sec-left-arr1.png) 5px 6px no-repeat;
	_background-image:url(../image/sec-left-arr1.gif);
	_background-position:0px 0px;
}

.sm2player .left .trigger.pauseplay span.playing {
	/* class applied while playing */
	background-image:url(../image/sec-left-pause-1.gif);
	background-position:6px 7px;
}

.sm2player .left .trigger.pauseplay:hover span {
	background:transparent url(../image/sec-left-arr0.png) 5px 6px no-repeat;
	_background-image:url(../image/sec-left-arr2.gif);
}

.sm2player .left .trigger.pauseplay:hover span.playing {
	background-image:url(../image/sec-left-pause.gif);
	background-position:6px 7px;
}

.sm2player .left .trigger:hover {
	background:transparent url(../image/ui-highlight-1.png) 2px 0px no-repeat;
	_background-image:url(../image/ui-highlight-1.gif);
}

.sm2player .mid {
	position:relative;
	width:223px;
	_width:224px;
	background:transparent url(../image/skin-3-ui.png) -14px 0px no-repeat;
	_background-image:url(../image/skin-3-ui.gif);
}

.sm2player .mid .info {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:20px;
	overflow:hidden;
	text-indent:2px;
	z-index:2;
	cursor:default;
}

.sm2player .mid .progress {
	position:relative;
	display:block;
	width:1px;
	height:12px;
	margin:4px 0px 0px 0px;
	background:transparent url(../image/sec-mid-loaded-light.png) 0px 0px repeat-x;
	_background-image:url(../image/sec-mid-loaded-light.gif);
	background-color:#eee;
}

.sm2player .mid .progress.loading {
	position:relative;
	display:block;
	width:1px;
	border-right:1px solid #eee;
}

.sm2player .mid .slider {
	position:absolute;
	display:block;
	width:12px;
	height:12px;
	left:0px;
	top:0px;
	margin-top:4px;
	background:transparent url(../image/slider-light.png) 0px 0px no-repeat;
	_background-image:url(../image/slider-light.gif);
	z-index:1; /* swap between 1 and 2 to position on top */
	z-index:2;
	opacity:0.90;
	/* filter:alpha(opacity=90); IE7 can't apply opacity to PNGs without messing up alpha transparency. Boo urns. */
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop src='image/slider-1.png');
}

.sm2player .mid:hover .slider {
	opacity:0.95;
	filter:alpha(opacity=95);
}

.sm2player .mid>.slider.active {
	-moz-opacity:0.85;
	filter:alpha(opacity=85);
}

.sm2player .mid .text,
.sm2player .mid .default,
.sm2player .mid .seek,
.sm2player .mid .divider {
	display:none;
}

.sm2player .mid .caption {
	*position:absolute; /* required for scroll positioning to work under IE */
	display:inline;
	white-space:nowrap;
	/*visibility:hidden;*/ /* hidden by default */ /* commented out because it needed JS that showed it and it was showing even when player was hidden */
}

.sm2player .mid .seek {
	position:absolute;
	left:0px;
	top:0px;
	text-indent:2px;
}

.sm2player .right {
	background:transparent url(../image/skin-3-ui.png) 100% 0px no-repeat;
	_background-image:url(../image/skin-3-ui.gif);
	margin-left:1px;
	_margin-left:0px; /* IE <7 sucks. */
}

.sm2player .right .divider {
	/* one-pixel visual divider between bar / cap (yep, this is a UI nit-pick.) */
	float:left;
	display:inline;
	width:1px;
	height:20px;
	overflow:hidden;
	background:transparent url(../image/skin-3-ui.png) -1006px 0px no-repeat;
	_background-image:url(../image/skin-3-ui.gif);
	margin-left:-1px;
	_display:none; /* IE <7 sucks. */
}

.sm2player .right .time {
	float:left;
	display:inline;
	width:3em;
	text-align:center;
	margin:0px 1px 0px 3px;
}

.sm2player .right .trigger {
	float:left;
	display:inline;
	width:14px;
	height:20px;
}

.sm2player .right .trigger span {
	display:block;
	height:20px;
	background:transparent url(../image/sec-right-arr1.png) 3px 7px no-repeat; 
}

.sm2player .right .trigger.prev {
	margin-left:1px;
}

.sm2player .right .trigger.s0 {
	width:16px;
}

.sm2player .right .trigger.s1 {
	width:18px;
}

.sm2player .right .trigger.s2 {
	width:20px;
}

.sm2player .right .trigger.s3 {
	width:12px;
}

.sm2player .right .trigger.s4 {
	width:13px;
}

.sm2player .right .trigger {
	background:transparent;
}

.sm2player .right .trigger.dropdown {
	width:14px;
	margin-right:2px;
}

.sm2player .right .trigger.dropdown span {
	xwidth:14px;
}

.sm2player .right .trigger span {
	background:transparent url(../image/sec-right-arr0.png) 3px 7px no-repeat; 
	_background-image:url(../image/sec-right-arr0.gif);
	_background-position:0px 0px;
	_background-image:none;
}

.sm2player .right .trigger.dropdown span {
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop src='image/sec-right-arr0.png');
	_margin:7px 0px 0px 3px;
	_height:13px;
}

.sm2player .right .trigger.prev span {
	background:transparent url(../image/btn-prev-1.png) 4px 6px no-repeat;
	_background-image:url(../image/btn-prev.gif);
}

.sm2player .right .trigger.next span {
	background:transparent url(../image/btn-next-1.png) 3px 6px no-repeat;
	_background-image:url(../image/btn-next.gif);
}

.sm2player .right .trigger.loop span {
	background:transparent url(../image/loop-light.png) 3px 5px no-repeat;
	opacity:0.5;
	filter:alpha(opacity=50);
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop src='image/loop.png');
	_margin:5px 0px 0px 3px;
	_height:15px;
}

.sm2player .right .trigger.loop:hover>span {
	opacity:0.75;
	filter:alpha(opacity=75);
}

.sm2player .right .trigger.loop.active>span {
	/*background-image:url(../image/loop-light.png);*/
	opacity:1;
	filter:none;
}

.sm2player .right .trigger.shuffle span {
	background:transparent url(../image/shuffle-1-light.png) 2px 5px no-repeat; 
	opacity:0.5;
	filter:alpha(opacity=50);
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop src='image/shuffle-1-light.png');
	_margin:5px 0px 0px 2px;
	_height:15px;
}

.sm2player .right .trigger.shuffle:hover>span {
	opacity:0.75;
	filter:alpha(opacity=75);
}

.sm2player .right .trigger.shuffle.active>span {
	opacity:1;
	filter:none;
}

.sm2player .right .trigger.mute span {
	background:transparent url(../image/speaker-light.png) 3px 5px no-repeat; 
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop src='image/speaker.png');
	_margin:5px 0px 0px 3px;
	_height:15px;
}

.sm2player .right .trigger.mute:hover span {
	background-image:url(../image/speaker.png);
}

.sm2player .right .trigger.mute:hover>span {
	opacity:0.75;
	filter:alpha(opacity=75);
}

.sm2player .right .trigger.mute.active>span {
	opacity:0.5;
	filter:alpha(opacity=50);
}

.sm2player .right .trigger.volume span {
	background:transparent url(../image/volume-light.png) 0px 4px no-repeat; 
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop src='image/volume.png');
	_margin:4px 0px 0px 0px;
	_height:16px;
}

.sm2player .right .trigger:hover {
	background:transparent url(../image/ui-highlight-1.png) -2px 0px no-repeat;
	_background-image:url(../image/ui-highlight-1.gif);
	/*_background-position:2px 2px;*/
}

.sm2player .right .trigger.dropdown:hover>span {
	background-image:url(../image/sec-right-arr0.png);
}

.sm2player .right .trigger.prev:hover>span {
	background-image:url(../image/btn-prev.png);
}

.sm2player .right .trigger.next:hover>span {
	background-image:url(../image/btn-next.png); 
}

.sm2player .right .trigger.loop:hover>span {
	background-image:url(../image/loop.png);
}

.sm2player .right .trigger.shuffle:hover>span {
	background-image:url(../image/shuffle-1.png);
}

.sm2player .right .trigger.mute:hover>span {
	background-image:url(../image/speaker.png);
}

.sm2player .right .trigger.volume:hover>span {
	background-image:url(../image/volume.png);
}



.sm2playlist-box {
	position:absolute;
	/*width:256px;*/
	/*overflow:hidden;*/
	/*max-height:33.1em;*/
	left:1px;
	top:22px;
	overflow:auto;
	margin-top:-4px;
}

.sm2playlist {
	position:relative;
	/* zoom:1; stupid IE. */
	margin-top:-999em; /* hidden by default */
}

.sm2playlist .hd,
.sm2playlist .c {
	position:relative;
	height:3px;
}

.sm2playlist .hd {
	background:transparent url(../image/skin-3-ui.png) no-repeat 0px 0px;
	_background-image:url(../image/skin-3.ui.gif);
	margin-right:2px;
}

.sm2playlist .hd .c {
	background:transparent url(../image/skin-3-ui.png) no-repeat 100% 0px;
	_background-image:url(../image/skin-3-ui.gif);
}

.sm2playlist .bd {
	background:transparent url(../image/shade-left.png) repeat-y 0px 0px;
	_background-image:none;
	margin-right:2px;
}

.sm2playlist ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
	padding-right:4px; /* space for background */
	margin-right:-2px;
	background:transparent url(../image/shade-right.png) repeat-y 100% 0px;
	_background-image:none;
	zoom:1; /* Even IE 7 needs this (!?) */
}

.sm2playlist ul li {
	line-height:1.5em;
}

.sm2playlist ul li a {
	display:block;
	background:transparent;
	margin-left:2px;
	margin-right:-2px;
	color:#666;
	text-indent:0.25em;
	text-decoration:none;
	width:100%; /* stupid IE 7. */
}

.sm2playlist ul li a span {
	display:block;
	background:#eee;
	padding:0.1em 0.5em;
	border-top:1px solid #fff;
	border-bottom:1px solid #ccc;
	/* genie animation test */
/*
	white-space:nowrap;
	overflow:hidden;
*/
}

.sm2playlist ul li:first-child a span {
	border-top:none;
}

.sm2playlist ul li:last-child a span {
	/*border-bottom:none;*/
}

.sm2playlist ul li a:hover span {
	background-color:#ddd;
	color:#333;
	border-color:transparent;
	_border-color:#ccc;
}

.sm2playlist ul li.highlight a {
	background-color:#660000;
	color:#222;
}

.sm2playlist ul li.highlight a span {
	background-color:#ddd;
}

.sm2playlist ul li.highlight a:hover {
	background-color:#ffeedd;
	color:#9999ff;
}

.sm2playlist ul li a:focus {
	outline:none;
}

.sm2playlist .ft {
	background:transparent url(../image/skin-3-ui.png) no-repeat 0px 100%;
	_background-image:url(../image/skin-3-ui.gif);
	margin-right:2px;
	height:2px;
}

.sm2playlist .ft .c {
	position:absolute;
	right:0px;
	bottom:0px;
	background:transparent url(../image/skin-3-ui.png) no-repeat 100% 100%;
	_background-image:url(../image/skin-3-ui.gif);
	margin-left:3px; /* leave room for left cap */
	margin-right:-1px;

	/* not needed */
	display:none;

}

#soundmanager-debug {
	position:absolute;
	right:1.5em;
	bottom:1.5em;
	display:block;
	font-size:xx-small;
	height:20em;
	overflow:auto;
	background:transparent url(../image/whiteout.png);
	padding:1em;
	color:#000;
}

