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