/*

 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.

*/

.sm2player2 {
 padding:0px;
 height:18px;
 font-size: 12px ;
 *line-height:18px;
 color:#4f4f4f;
 zoom:1;
}

.sm2player {
 padding:0px;
 height:18px;
 font-size: 12px ;
 *line-height:18px;
 color:#4f4f4f;
 zoom:1;
}

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

.sm2player,
.sm2player .sm2playlist-box {
 width:400px;
}

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

.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);
}

.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:hover {
 background:transparent url(../image/ui-highlight-1.png) 2px 0px no-repeat;
 _background-image:url(../image/ui-highlight-1.gif);
 _background-position:2px 0px;
}

.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 .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.95;
 /* filter:alpha(opacity=95); IE7 still messes up alpha transparency with PNGs when applying filters. Boo urns. */
}

.sm2player .mid.hover .slider,
.sm2player .mid:hover .slider {
/*
 z-index:2;
 opacity:0.95;
 filter: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 {
/*
 width:18px;
 width:45px;
*/
 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;
 line-height:19px;
 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 span {
 background:transparent url(../image/sec-right-arr1.png) 3px 7px no-repeat; 

}

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

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

.sm2player .right .trigger.loop span {
 background:transparent url(../image/loop-light.png) 3px 5px no-repeat;
 opacity:0.5;
 filter:alpha(opacity=50);
}

.sm2player .right .trigger.loop.active span {
 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;
}

.sm2player .right .trigger.shuffle:hover span {
 background-image:url(../image/shuffle.png);
}

.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; 
}

.sm2player .right .trigger.mute:hover span {
 background-image:url(../image/speaker.png);
 opacity:0.75;
}

.sm2player .right .trigger.mute.active span {
 opacity:0.5;
}

.sm2player .right .trigger.volume span {
 background:transparent url(../image/volume-light.png) 0px 4px no-repeat; 
}

.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);
}

.sm2player .right .dropdown:hover {
 background-position:right 0px;
}

.sm2playlist-box {
 overflow:auto;
 margin-top:2px;
 font-size:11px;
}

.sm2playlist {
 margin-top:-999em; /* hidden by default */
}

.sm2playlist .hd,
.sm2playlist .c {
 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:3px;
}

.sm2playlist .hd .c {
 position:relative;
 right:0px;
 top:0px;
 background:transparent url(../image/skin-3-ui.png) no-repeat 100% 0px;
 _background-image:url(../image/skin-3-ui.gif);
 margin-right:-3px;
 width:3px;
}

.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;
}

.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;
}

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

.sm2playlist ul li.highlight a {
 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:3px;
 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);
 xmargin-left:3px; /* leave room for left cap */
 xmargin-right:-3px;
 width:3px;
 height:2px;
 /* not needed */
 xdisplay: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;
}