/*

  DMXzone HTML5 MP3 Player

  CSS Template

*/



/* Outer container (player) */

.dmxHTML5MP3Player {}



/* 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 */

}