/*
  DMXzone HTML5 MP3 Player
  CSS Template
*/

/* Outer container (player) */
.dmxHTML5MP3Player {
	width: 200px;
}

/* Container for the playlist */
.dmxHTML5MP3PlayerPlaylist {}

/* Playlist (Ordered list) */
.dmxHTML5MP3PlayerPlaylist ol {}

/* Playlist item */
.dmxHTML5MP3PlayerPlaylist li {}

/* Playlist item link */
.dmxHTML5MP3PlayerPlaylist a {}

/* Playlist current item */
.dmxHTML5MP3PlayerPlaylist a.dmxHTML5MP3PlayerCurrent {}

/* Container for the display */
.dmxHTML5MP3PlayerDisplay {}

/* Container for the controls */
.dmxHTML5MP3PlayerControlbar {}

/*
 Placeholder for information
 text inside element is used as template
 replaces strings like #filename#, #title#, #time#, #duration#
*/
.dmxHTML5MP3PlayerInfo {}

/* Container for the play and pause button (will hide one of them) */
.dmxHTML5MP3PlayerPlayPause {}

/* Play button */
.dmxHTML5MP3PlayerBtnPlay {}
.dmxHTML5MP3PlayerBtnPlay:active {} /* Down state */
.dmxHTML5MP3PlayerBtnPlay:hover {} /* Hover state */
.dmxHTML5MP3PlayerBtnPlay.dmxHTML5MP3PlayerActive {} /* Active */

/* Pause button */
.dmxHTML5MP3PlayerBtnPause {}
.dmxHTML5MP3PlayerBtnPause:active {} /* Down state */
.dmxHTML5MP3PlayerBtnPause:hover {} /* Hover state */

/* Stop button */
.dmxHTML5MP3PlayerBtnStop {}
.dmxHTML5MP3PlayerBtnStop:active {} /* Down state */
.dmxHTML5MP3PlayerBtnStop:hover {} /* Hover state */

/* Prev button */
.dmxHTML5MP3PlayerBtnPrev {}
.dmxHTML5MP3PlayerBtnPrev:active {} /* Down state */
.dmxHTML5MP3PlayerBtnPrev:hover {} /* Hover state */

/* Next button */
.dmxHTML5MP3PlayerBtnNext {}
.dmxHTML5MP3PlayerBtnNext:active {} /* Down state */
.dmxHTML5MP3PlayerBtnNext:hover {} /* Hover state */

/* Mute button */
.dmxHTML5MP3PlayerBtnMute {}
.dmxHTML5MP3PlayerBtnMute:active {} /* Down state */
.dmxHTML5MP3PlayerBtnMute:hover {} /* Hover state */
.dmxHTML5MP3PlayerBtnMute.dmxHTML5MP3PlayerActive {} /* Active */

/* Shuffle button */
.dmxHTML5MP3PlayerBtnShuffle {}
.dmxHTML5MP3PlayerBtnShuffle:active {} /* Down state */
.dmxHTML5MP3PlayerBtnShuffle:hover {} /* Hover state */
.dmxHTML5MP3PlayerBtnShuffle.dmxHTML5MP3PlayerActive {} /* Active */

/* Repeat button */
.dmxHTML5MP3PlayerBtnRepeat {}
.dmxHTML5MP3PlayerBtnRepeat:active {} /* Down state */
.dmxHTML5MP3PlayerBtnRepeat:hover {} /* Hover state */
.dmxHTML5MP3PlayerBtnRepeat.dmxHTML5MP3PlayerActive {} /* Active */

/* Position/loader slider */
.dmxHTML5MP3PlayerPositionSlider {
	position: relative;
	height: 1em;
	background: #ccc;
}
.dmxHTML5MP3PlayerPositionHandle {
	position: absolute;
	width: 2px;
	height: 100%;
	background: #000;
}
.dmxHTML5MP3PlayerPositionBar {
	position: absolute;
	height: 100%;
	background: #666;
}
.dmxHTML5MP3PlayerLoadBar {
	position: absolute;
	height: 100%;
	background: #aaa;
}

/* Volume slider */
.dmxHTML5MP3PlayerVolumeSlider {
	position: relative;
	height: 1em;
	background: #ccc;
}
.dmxHTML5MP3PlayerVolumeSliderV {
	position: relative;
	width: 1em;
	height: 5em;
	background: #ccc;
} /* Vertical version */
.dmxHTML5MP3PlayerVolumeHandle {
	position: absolute;
	width: 1em;
	height: 1em;
	background: #000;
}
.dmxHTML5MP3PlayerVolumeBar {
	position: absolute;
	background: #666;
}
.dmxHTML5MP3PlayerVolumeSlider .dmxHTML5MP3PlayerVolumeBar {
	height: 100%;
}
.dmxHTML5MP3PlayerVolumeSliderV .dmxHTML5MP3PlayerVolumeBar {
	width: 100%;
	bottom: 0;
}

/* Pan slider */
.dmxHTML5MP3PlayerPanSlider {
	position: relative;
	height: 1em;
	background: #ccc;
}
.dmxHTML5MP3PlayerPanHandle {
	position: absolute;
	width: 2px;
	height: 100%;
	background: #000;
}

/* Volume icon */
.dmxHTML5MP3PlayerVolume {}
.dmxHTML5MP3PlayerVolume.dmxHTML5MP3PlayerVolumeMute {} /* volume 0 */
.dmxHTML5MP3PlayerVolume.dmxHTML5MP3PlayerVolumeLow {} /* volume >0 - 40 */
.dmxHTML5MP3PlayerVolume.dmxHTML5MP3PlayerVolumeMed {} /* volume >40 - 80 */
.dmxHTML5MP3PlayerVolume.dmxHTML5MP3PlayerVolumeHigh {} /* volume >80 */

/* Peak data */
.dmxHTML5MP3PlayerPeakLeft,
.dmxHTML5MP3PlayerPeakRight {
	position: relative;
	height: 1em;
	height: 1em;
}
.dmxHTML5MP3PlayerPeakLeftV,
.dmxHTML5MP3PlayerPeakRightV {
	position: relative;
	width: 1em;
	height: 1em;
}
.dmxHTML5MP3PlayerPeakLeftBar,
.dmxHTML5MP3PlayerPeakRightBar {
	position: absolute;
	background: #ccc;
}
.dmxHTML5MP3PlayerPeakLeft .dmxHTML5MP3PlayerPeakLeftBar,
.dmxHTML5MP3PlayerPeakRight .dmxHTML5MP3PlayerPeakRightBar {
	height: 100%;
}
.dmxHTML5MP3PlayerPeakLeftV .dmxHTML5MP3PlayerPeakLeftBar,
.dmxHTML5MP3PlayerPeakRightV .dmxHTML5MP3PlayerPeakRightBar {
	width: 100%;
	bottom: 0;
}

/*
 SoundManager 2 + useFlashBlock
 Flash positioning and flashblock / clicktoflash handling
*/

#sm2-container {
 /*
  where the SM2 flash movie goes. by default, relative container.
  set relative or absolute here, and don't touch it later or bad things will happen (see below comments.)
 */
 position:relative;
 width:1px;
 height:1px;
 _overflow:hidden; /* screw IE 6, just make it display nice */
}

#sm2-container object,
#sm2-container embed {
 /*
  the actual movie bit.
  SWF needs to be able to be moved off-screen without display: or position: changes. important.
  changing display: or position: or overflow: here or on parent can cause SFW reload or other weird issues after unblock,
  eg. SM2 starts but strange errors, no whileplaying() etc.
 */
 position:absolute;
}

#sm2-container object,
#sm2-container embed,
#sm2-container.swf_timedout,
#sm2-container.swf_timedout object,
#sm2-container.swf_timedout embed {
 /* 
  when SM2 didn't start normally, time-out case. flash blocked, missing SWF, no flash?
  48px square flash placeholder is typically used by blockers.
 */
 left:auto;
 top:auto;
 width:48px;
 height:48px;
}

#sm2-container.swf_unblocked {
 /* SWF unblocked, or was never blocked to begin with; try to collapse container as much as possible. */
 width:1px;
 height:1px;
}

#sm2-container.swf_loaded object,
#sm2-container.swf_loaded embed,
#sm2-container.swf_unblocked object,
#sm2-container.swf_unblocked embed {
 /* hide flash off-screen (relative to container) when it has loaded OK */
 left:-9999em;
 top:-9999em;
}

#sm2-container.swf_error {
 /* when there is a fatal error (flash loaded, but SM2 failed) */
 display:none;
}

#sm2-container.high_performance {
 /* "high performance" case: keep on-screen at all times */
 position:absolute;
 position:fixed;
 overflow:hidden;
 _top:-9999px; /* IE 6 hax, no position:fixed */
 _left:-9999px;
 bottom:0px;
 left:0px;
 /*
  special case: show at first with w/h, hide when unblocked.
  might be bad/annoying.
 */
 width:48px;
 height:48px;
 z-index:99; /* try to stay on top */
}

#sm2-container.high_performance.swf_loaded,
#sm2-container.high_performance.swf_unblocked {
 z-index:auto;
}


#sm2-container.high_performance.swf_loaded,
#sm2-container.high_performance.swf_unblocked,
#sm2-container.high_performance.swf_unblocked object,
#sm2-container.high_performance.swf_unblocked embed {
 /* 8x8px is required minimum to load in fx/win32 in some cases(?), 6x6+ good for fast performance, even better when on-screen via position:fixed */
 width:8px;
 height:8px;
}

#sm2-container.high_performance.swf_loaded {
 /* stay bottom/left */
 top:auto;
 bottom:0px;
 left:0px;
}

#sm2-container.high_performance.swf_loaded object,
#sm2-container.high_performance.swf_loaded embed,
#sm2-container.high_performance.swf_unblocked object,
#sm2-container.high_performance.swf_unblocked embed {
 /* high-performance case must stay on-screen */
 left:auto;
 top:auto;
}

#sm2-container.high_performance.swf_timedout {
 z-index:99; /* try to stay on top */
}