/*

 GENERAL RANT AWARENESS NOTICE
 -----------------------------
 You may see some complaining about Internet Explorer, PNG and opacity-related hacks.
 Even the new (at time of writing, 12/2006) IE 7 has issues and other quirks. Too bad.

*/

.sm2player {
 position:absolute;
 left:1.75em;
 top:5.5em;
 z-index:3;
 padding:1px;
 height:20px;
 font:normal xx-small/19px verdana,tahoma,arial;
 *line-height:18px;
 letter-spacing:-1px;
 color:#000;
 zoom:1;
}

.sm2player.altFont {
 /* font tweaks for mac which has tighter spacing */
 letter-spacing:0px;
}

.sm2player,
.sm2player .sm2playlist-box {
/*
 width:302px;
 width:360px;
*/
}

.sm2player .ui,
.sm2player .sm2playlist {
xfilter:alpha(opacity=90); /* Even IE 7 (still) sucks! */
 opacity:0.9;
}

.sm2player .ui {
 _filter:none; /* IE <7 sucks */
}

.sm2player.noOpacity .ui {
 /* Safari (1.3.2 at least?) has render bugs with UI display + animated PNG progress bar when applying opacity */
 opacity:1;
}

.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:#fff;
}

.sm2player .left {
 width:15px;
 background:transparent url(../image/skin-0-ui.png) 0px 0px no-repeat;
 _background-image:url(../image/skin-0-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-arr0.png) 5px 6px no-repeat;
 _background-image:url(../image/sec-left-arr0.gif);
 _background-position:0px 0px;
}

.sm2player .left .trigger.pauseplay span.playing {
 /* class applied while playing */
 background-image:url(../image/sec-left-pause.gif);
 background-position:6px 7px;
}

.sm2player .left .trigger:hover {
 background:transparent url(../image/ui-highlight-2.png) 2px 0px no-repeat;
 _background-image:url(../image/ui-highlight-2.gif);
 /*_background-position:2px 2px;*/
}

.sm2player .mid {
 position:relative;
 width:223px;
 _width:224px;
 background:transparent url(../image/skin-0-ui.png) -14px 0px no-repeat;
 _background-image:url(../image/skin-0-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.png) 0px 0px repeat-x;
 _background-image:url(../image/sec-mid-loaded.gif);
 background-color:#333;
}

.sm2player .mid .progress.loading {
 position:relative;
 display:block;
 width:1px;
 border-right:1px solid #333;
}

.sm2player .mid .slider {
 position:absolute;
 display:block;
 width:12px;
 height:12px;
 left:0px;
 top:0px;
 margin-top:4px;
 background:transparent url(../image/slider-1.png) 0px 0px no-repeat;
 _background-image:url(../image/slider.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 */
}

.sm2player .mid .seek {
 position:absolute;
 left:0px;
 top:0px;
 text-indent:2px;
}

.sm2player .right {
 background:transparent url(../image/skin-0-ui.png) 100% 0px no-repeat;
 _background-image:url(../image/skin-0-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-0-ui.png) -1006px 0px no-repeat;
 _background-image:url(../image/skin-0-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;
}

.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.prev {
}

.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.png) 4px 6px no-repeat;
 _background-image:url(../image/btn-prev.gif);
}

.sm2player .right .trigger.next span {
 background:transparent url(../image/btn-next.png) 3px 6px no-repeat;
 _background-image:url(../image/btn-next.gif);
}

.sm2player .right .trigger.loop span {
 background:transparent url(../image/loop.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.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.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.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 {
 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.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-2.png) -2px 0px no-repeat;
 _background-image:url(../image/ui-highlight-2.gif);
 /*_background-position:2px 2px;*/
}

.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-0-ui.png) no-repeat 0px 0px;
 _background-image:url(../image/skin-0.ui.gif);
 margin-right:2px;
}

.sm2playlist .hd .c {
 /* not used? */
}

.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:#999;
 text-indent:0.25em;
 text-decoration:none;
 width:100%; /* stupid IE 7. */
}

.sm2playlist ul li a span {
 display:block;
 background:#222;
 padding:0.1em 0.5em;
 border-top:1px solid #333;
 border-bottom:1px solid #000;
 /* 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:#444;
 color:#fff;
}

.sm2playlist ul li a:hover span {
 border-color:transparent;
 _border-color:#333;
}

.sm2playlist ul li.highlight a {
 background-color:#660000;
 color:#ff9999;
}

.sm2playlist ul li.highlight a:hover {
 background-color:#880000;
 color:#fff;
}

.sm2playlist ul li a:focus {
 outline:none;
}

.sm2playlist .ft {
 background:transparent url(../image/skin-0-ui.png) no-repeat 0px 100%;
 _background-image:url(../image/skin-0-ui.gif);
 margin-right:2px;
 height:2px;
}

.sm2playlist .ft .c {
 position:absolute;
 right:0px;
 bottom:0px;
 background:transparent url(../image/skin-0-ui.png) no-repeat 100% 100%;
 _background-image:url(../image/skin-0-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:none;
 font-size:xx-small;
 height:20em;
 overflow:auto;
 background:transparent url(../image/whiteout.png);
 padding:1em;
 color:#000;
}