/*
  Deere , Skin for Mixxx 1.12.x
  www.mixxx.org
  Copyright (C) 2010-2015 RJ Ryan <rryan@mixxx.org>, S.Brandt <s.brandt@mixxx.org>
  This file is part of the "Deere" Skin for Mixxx
  "Deere" is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported license.
  http://creativecommons.org/licenses/by-sa/3.0/

  Mixxx skin documentation:
  http://mixxx.org/wiki/doku.php/creating_skins

  List of controls:
  http://mixxx.org/wiki/doku.php/mixxxcontrols

  Qt Style Sheets documentation:
  http://doc.qt.io/qt-4.8/stylesheet-examples.html

*/

/*******************************************************************************
 ** BORDER *********************************************************************
 *******************************************************************************/
/* These definitions put a faint border around all the widgets. We have to be
   tricky with top/bottom-ness to get things right. */
#DeckControls {
  padding: 5px 7.5px 2px 7.5px;  /*
  background-color: #456789;  */
}

#CrossfaderContainer {
}

#DeckTextRow {
  border-top: 0px solid #222;
  border-bottom: 0px solid #222;
  padding-left: 3px;
}
#DeckTextRowSmall {
  border: 1px solid #222;
  border-width: 0px 1px 0px 1px;
  padding: 0px;
}

#ArtistKeyBpmGutter {
  qproperty-layoutAlignment: 'AlignVCenter';
  border-top: 1px solid #222;
}

#UpperTextRow {
  /* top 0px seems required for bottom 1px to work O_o */
  border-top: 0px solid #222;
  border-bottom: 0px solid #222;
}

#DeckSmall {
  background-color: #333;
}

#DeckSmall #TitleGutter {
  padding-left: 2px;
}

#OverviewGutterSmall {
  padding: 1px 0px;
}

#DeckRows {
  border: 0px solid #222;
  border-top: none;
}

#TempoControlButtons {
  qproperty-layoutSpacing: 2;
}

#DeckRateSliderColumn {
  border: 0px solid #222;
  border-left: 2px solid #222;
}

#VisualRow {
  border-top: 1px solid #222;
  background-color: transparent;
  margin: 0px;
}

#OverviewRow {
  border-top: 1px solid #222;
  background-color: transparent;
  margin: 0;
  padding: 0 2px 0 3px;
}

#ControlsRow {
  border-top: 1px solid #222;
  padding: 3px;
  qproperty-layoutAlignment: 'AlignBottom';
}
#PlayGutterSmall {
  padding: 3px;
  background-color: none;
  qproperty-layoutAlignment: 'AlignBottom'; /*
  border-left: 1px solid #222;
  background-color: #664988;  */
}

#MixerBorder {
  background-color: #222;
}

#Deck1, #Deck3 {
  border-width: 0px 2.5px 5px 0px;
  border-style: solid;
  border-color: #222;
}

#Deck2, #Deck4 {
  border-width: 0px 0px 5px 2.5px;
  border-style: solid;
  border-color: #222;
}

#Deck3, #Deck4 {
  border-top-width: 0;
}

#Sampler {
  border-style: solid;
  border-color: #222;
  border-width: 0px 2px 0px 0px;
}

#SamplerMiddleSpacer {
  /* FIXME */
  border-style: solid;
  border-color: #222;
  border-width: 0px 2px;
}

#Spacer22 {
  background-color: #222222;
}

#Spacer33 {
  background-color: #333;
}

#TEST1 {
  background-color: #452219;
}
#TEST2 {
  background-color: #451911;
}
#TEST3 {
  background-color: #114522;
}
#TEST4 {
  background-color: #225487;
}

#AlignLeft {
  qproperty-layoutAlignment: 'AlignLeft';
}

#AlignRight {
  qproperty-layoutAlignment: 'AlignRight';
}

#AlignCenter {
  qproperty-layoutAlignment: 'AlignTop | AlignHCenter';
}

#AlignTop {
  qproperty-layoutAlignment: 'AlignTop | AlignHCenter';
}

#SampleDecksContainer {
  border: 0px;
}

#SamplerRows {
}

#SamplerRow1,
#SamplerRow2,
#SamplerRow3,
#SamplerRow4,
#SamplerRow6,
#SamplerRow7,
#SamplerRow8 {
  border-color: #222;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
}

#SamplerRow5 {
  border-color: #222;
  border-style: solid;
  border-width: 1px 0px 1px 0px;
}

/*******************************************************************************
 ** END BORDER *****************************************************************
 *******************************************************************************/


/*******************************************************************************
 ** LIBRARY *********************************************************************
 *******************************************************************************/

/* sidebar, as well as root items for playlists, crates, and history */
#LibraryContainer QTextBrowser,
#LibraryContainer QTableView,
#LibraryContainer QTreeView {
  color: #d2d2d2;
  background-color: #1F1F1F;
  selection-background-color: #006596;
  selection-color: #D6D6D6;
  border: 1px solid #1A1A1A;
  gridline-color: red;
  /* Suppresses that selected sidebar item's branch indicator shows wrong color
     when out of focus, see lp:880588 */
  show-decoration-selected: 1;
}
#LibraryContainer QTableView {
  alternate-background-color: #1A1A1A;
}

#LibraryContainer QTableView:focus,
#LibraryContainer QTreeView:focus,
#LibraryContainer QTextBrowser:focus {
  border: 1px solid #FF6600;
}

/* Colors aren't applied to selected items, define them manually */
#LibraryContainer QTableView::item:selected,
#LibraryContainer QTreeView::item:selected,
#LibraryBPMButton::item:selected,
#LibraryContainer QTreeView::branch:selected,
/* This won't style the Preview button */
#LibraryPreviewButton::item:selected {
  color: #D6D6D6;
  background-color: #006596;
}

/* Table cell in edit mode */
WLibrary QLineEdit,
WBeatSpinBox,
#LibraryBPMSpinBox {
  selection-color: #000;
  selection-background-color: #ccc;
}
WLibrary QLineEdit,
#LibraryBPMSpinBox {
  color: #ddd;
  background-color: #0f0f0f;
  border: 1px solid #006596;
}


/* checkbox in library "Played" column */
#LibraryContainer QTableView::indicator {
  width: 10px;
  height: 10px;
  margin: 0px;
  padding: 0px;
  border: 1px solid transparent;
}

#LibraryContainer QTableView::indicator:checked,
#LibraryContainer QTableView::indicator:checked:selected {
  image: url(skin:/icon/ic_library_checkmark.svg);
  border: 1px solid #ff6600;
}

#LibraryContainer QTableView::indicator:unchecked {
  background: none;
  border: 1px solid rgba(151,151,151,128);
}

/* focused BPM cell in the library "BPM" column */
#LibraryBPMButton:focus {
  outline: none;
}
/* BPM lock icon */
#LibraryBPMButton::indicator:checked {
  image: url(skin:/icon/ic_library_bpm_locked.svg);
}

#LibraryBPMButton::indicator:unchecked {
  image: url(skin:/icon/ic_library_bpm_unlocked.svg);
}

#LibraryBPMSpinBox {
  padding: 0px;
  margin: 0px;
  border-left: 0px;
  }
  #LibraryBPMSpinBox::up-button,
  #LibraryBPMSpinBox::down-button {
    background-color: #006596;
    }
    #LibraryBPMSpinBox::up-button {
      image: url(skin:/icon/ic_lib_spinbox_up_white.svg) no-repeat;
      }
    #LibraryBPMSpinBox::down-button {
      image: url(skin:/icon/ic_lib_spinbox_down_white.svg) no-repeat;
      }

/* button in library "Preview" column */
QPushButton#LibraryPreviewButton {
  background: transparent;
  margin: 0px;
  padding: 0px;
  border: 1px solid transparent;
  border-radius: 2px;
}

QPushButton#LibraryPreviewButton:!checked {
  image: url(skin:/icon/ic_library_preview_play.svg);
}

QPushButton#LibraryPreviewButton:!checked:hover {
  background-color: #1A1A1A;
  border: 1px solid #00ABFD;
}

QPushButton#LibraryPreviewButton:checked {
  image: url(skin:/icon/ic_library_preview_pause.svg);
  background-color: #0f0f0f;
  border: 1px solid #006596;
}

QPushButton#LibraryPreviewButton:checked:hover {
  border: 1px solid #00ABFD;
}

/* library header row */
#LibraryContainer QHeaderView {
  color: #d2d2d2;
  background: #1A1A1A;
  border-bottom: 1px solid #141414;
}

#LibraryContainer QHeaderView::section {
  font-size: 12px/14px;
  font-weight: bold;
  padding: 2px;
  background: #1A1A1A;
  border-top: none;
  border-left: none;
  border-bottom: 1px solid #141414;
  border-right: 1px solid #141414;
}

#LibraryContainer QHeaderView::up-arrow,
#LibraryContainer QHeaderView::down-arrow {
  background-color: rgba(26,26,26,220);
  margin: 0px -1px 0px 0xp;
  padding: 0px;
}
#LibraryContainer QHeaderView::up-arrow {
  image: url(skin:/image/style_sort_up.svg);
}

#LibraryContainer QHeaderView::down-arrow {
  image: url(skin:/image/style_sort_down.svg);
}

/* library search bar */
WSearchLineEdit {
  margin: 0px 2px 0px 0px;
  padding: 2px;
  border: 1px solid #4B4B4B;
  background-color: #1e1e1e;
  color: #d2d2d2;
  }
  WSearchLineEdit:focus {
    border: 1px solid #FF6600;
    color: #D6D6D6;
    selection-color: #222222;
    selection-background-color: #d2d2d2;
  }
  /* Clear button: see /skins/default.qss */

/* library preview deck */
#PreviewDeck {
  background-color: #333333;
  margin: 0px 0px 4px 0px;
}

#PreviewDeckTextRow WLabel {
  padding: 2px;
  color: #d2d2d2;
  font-size: 12px/14px;
  text-transform: none;
}

#PreviewDeckVisualRow {
  qproperty-layoutSpacing: 2;
  border-top: 1px solid #1A1A1A;
}

#PreviewDeckEjectButton[value="0"]:!hover {
  background: none;
  border: none;
}

#PreviewDeckVUContainer {
  border: 1px solid #333;
  border-left: 0px;
  padding: 0px;
  margin: 0px;
  qproperty-layoutSpacing: 0;
}

/* Spacing between treeview and preview deck/search bar */
#LibraryContainer QTreeView {
  margin: 0px;
}

#LibraryCoverArtSplitter {
  margin-top: 4px;
}

/* triangle for closed/opened branches in treeview */
#LibraryContainer QTreeView::branch:has-children:!has-siblings:closed,
#LibraryContainer QTreeView::branch:closed:has-children:has-siblings {
  border-image: none; image: url(skin:/image/style_branch_closed.png);
}

#LibraryContainer QTreeView::branch:open:has-children:!has-siblings,
#LibraryContainer QTreeView::branch:open:has-children:has-siblings {
  border-image: none; image: url(skin:/image/style_branch_open.png);
}

/* space left of selected child item */
#LibraryContainer QTreeView::branch:!has-children:!has-siblings:closed:selected,
#LibraryContainer QTreeView::branch:closed:!has-children:has-siblings:selected,
#LibraryContainer QTreeView::branch:open:!has-children:!has-siblings:selected,
#LibraryContainer QTreeView::branch:open:!has-children:has-siblings:selected {
  border-image: none;
  background-color: #1F1F1F;
}

/* QSplitter between LibrarySidebar and Library */
#LibrarySplitter::handle {
  image: url(skin:/image/style_handle_horizontal_unchecked.svg);
  background: none;
}

#LibrarySplitter::handle:pressed {
  image: url(skin:/image/style_handle_horizontal_checked.svg);
  background: none;
}

#LibrarySplitter::handle:horizontal {
  width: 6px;
}

#LibrarySplitter::handle:vertical {
  height: 6px;
}

/* vertical splitters */
#LibraryCoverArtSplitter::handle,
#LibraryVerticalSplitter::handle,
#WaveformSplitter::handle {
  image: url(skin:/image/style_handle_vertical_unchecked.svg);
  background: #222;
}

#LibraryCoverArtSplitter::handle:pressed,
#LibraryVerticalSplitter::handle:pressed,
#WaveformSplitter::handle:pressed {
  image: url(skin:/image/style_handle_vertical_checked.svg);
  background: #222;
}

#LibraryCoverArtSplitter::handle:horizontal,
#LibraryVerticalSplitter::handle:horizontal,
#WaveformSplitter::handle:horizontal {
  width: 6px;
}

#LibraryCoverArtSplitter::handle:vertical,
#LibraryVerticalSplitter::handle:vertical,
#WaveformSplitter::handle::vertical {
  height: 6px;
}

/* library cover art widget */
#LibraryCoverArt {
  padding: 8px 4px 4px 4px;
  background-color: #1F1F1F;
  border: 1px solid #1A1A1A;
}
/* transition time in Auto DJ tab is styled pretty much the same as WBeatSpinBox above */
#DlgAutoDJ QSpinBox {}

/* Extra declaration for QRadionButton otherwise it shows up with wrong colors in Linux with Gnome */
WLibrary QLabel, WLibrary QRadioButton {
  /* same as QTreeview */
  color: #d2d2d2;
  margin: 9px 5px 6px 0px;
  font-size: 12px;
}

WLibrary QRadioButton::indicator {
  margin: 0px 0px 0px 2px;
  width: 18px;
  height: 18px;
}

WLibrary QRadioButton::indicator:checked {
  image: url(skin:/icon/ic_radio_button_on_18px.svg);
}

WLibrary QRadioButton::indicator:unchecked {
  image: url(skin:/icon/ic_radio_button_off_18px.svg);
}
/* buttons in library (in hierarchical order of appearance)
   Style them just as the other regular buttons */
#DlgMissing > QPushButton,
#DlgHidden > QPushButton,
#DlgAutoDJ > QPushButton,
#DlgRecording > QPushButton,
#DlgAnalysis > QPushButton {
  margin: 9px 3px 6px 3px;
  color: #D2D2D2;
  background-color: #4B4B4B;
  border: 1px solid #4B4B4B;
  border-radius: 2px;
  outline: none;
  }
  #DlgMissing > QPushButton,
  #DlgHidden > QPushButton,
  #DlgRecording > QPushButton,
  #DlgAnalysis > QPushButton {
    padding: 3px 4px;
  }
  #DlgAutoDJ > QPushButton {
    padding: 0px 1px;
  }
  #DlgAutoDJ > QPushButton {
    width: 34px;
    height: 20px;
  }
  QPushButton#pushButtonAutoDJ {
    width: 42px;
  }


#DlgMissing > QPushButton:!enabled,
#DlgHidden > QPushButton:!enabled,
#DlgAutoDJ > QPushButton:!enabled,
#DlgAnalysis > QPushButton:!enabled {
  /* buttons in "disabled" (not click-able) state. They are nearly invisible
     by default QT palette, so style accordingly */
  color: #808080; /* Default #A3A3A3 -90L HSL*/
  background-color: rgba(95, 95, 95, 127);
                    /* 50% #5F5F5F = RGBA#5F5F5F7F */
  border: 1px solid rgba(95, 95, 95, 127);
  border-radius: 2px;
  outline: none;
}

#DlgMissing > QPushButton:hover,
#DlgHidden > QPushButton:hover,
#DlgAutoDJ > QPushButton:hover,
#DlgRecording > QPushButton:hover,
#DlgAnalysis > QPushButton:hover {
  color: #D2D2D2;
  background-color: #5F5F5F;
  border: 1px solid #5F5F5F;
  outline: none;
}

#DlgMissing > QPushButton:focus,
#DlgHidden > QPushButton:focus,
#DlgAutoDJ > QPushButton:focus,
#DlgRecording > QPushButton:focus,
#DlgAnalysis > QPushButton:focus,
#fadeModeCombobox:focus,
#DlgAutoDJ QSpinBox:focus {
  outline: none;
}

#DlgAutoDJ > QPushButton:checked,
#DlgRecording > QPushButton:checked,
#DlgAnalysis > QPushButton:checked {
  /* checkbuttons in active state */
  color: #FDFDFD;
  background-color: #006596;
  border: 1px solid #006596;
  outline: none;
}

#DlgAutoDJ > QPushButton:checked:hover,
#DlgRecording > QPushButton:checked:hover,
#DlgAnalysis > QPushButton:checked:hover {
  /* checkbuttons hovered over in "active" state */
  margin: 9px 3px 6px 3px;
  color: #FDFDFD;
  background-color: #0080BE;
  border: 1px solid #0080BE;
  outline: none;
}

#DlgMissing > QPushButton:pressed,
#DlgHidden > QPushButton:pressed,
#DlgAutoDJ > QPushButton:pressed,
#DlgAnalysis > QPushButton:pressed {
  /* pushbuttons in "down" state */
  margin: 9px 3px 6px 3px;
  color: #FDFDFD;
  background-color: #006596;
  border: 1px solid #006596;
  outline: none;
}


/* AutoDJ button icons */
QPushButton#pushButtonAutoDJ {
  image: url(skin:/icon/ic_autodj_enable.svg) no-repeat center center;
}
QPushButton#pushButtonFadeNow:!enabled {
  image: url(skin:/icon/ic_autodj_fade_disabled.svg) no-repeat center center;
  }
  QPushButton#pushButtonFadeNow:enabled {
    image: url(skin:/icon/ic_autodj_fade.svg) no-repeat center center;
  }
QPushButton#pushButtonSkipNext:!enabled {
  image: url(skin:/icon/ic_autodj_skip_disabled.svg) no-repeat center center;
  }
  QPushButton#pushButtonSkipNext:enabled {
    image: url(skin:/icon/ic_autodj_skip.svg) no-repeat center center;
  }
QPushButton#pushButtonShuffle {
  image: url(skin:/icon/ic_autodj_shuffle.svg) no-repeat center center;
}
QPushButton#pushButtonAddRandom {
  image: url(skin:/icon/ic_autodj_addrandom.svg) no-repeat center center;
}
QPushButton#pushButtonRepeatPlaylist {
  image: url(skin:/icon/ic_autodj_repeat_playlist.svg) no-repeat center center;
}
/* AutoDJ button icons */

/* Recording info */
#labelRecPrefix,
#labelRecFilename,
#labelRecStatistics {
  text-transform: none;
  padding: 3px 0px 0px 0px;
  margin: 0px;
}
#labelRecPrefix {
  margin-left: 3px;
}
#labelRecFilename {
  font-weight: bold;
}
#labelRecPrefix,
#labelRecStatistics {
  font-weight: normal;
}

/* Scroll bars */
#LibraryContainer QScrollBar:horizontal,
WEffectSelector QAbstractScrollArea QScrollBar:horizontal,
#fadeModeCombobox QAbstractScrollArea QScrollBar:horizontal {
  border-top: 1px solid #141414;
  min-width: 12px;
  height: 15px;
  background: #222222;
  padding: 3px;
}
#LibraryContainer QScrollBar:vertical,
WEffectSelector QAbstractScrollArea QScrollBar:vertical,
#fadeModeCombobox QAbstractScrollArea QScrollBar:vertical {
  border-left: 1px solid #141414;
  min-height: 12px;
  width: 15px;
  background: #222222;
  padding: 3px;
}
/* "add-page" and "sub-page" are the gutter of the scrollbar */
#LibraryContainer QScrollBar::add-page,
#LibraryContainer QScrollBar::sub-page,
WEffectSelector QAbstractScrollArea QScrollBar::add-page,
WEffectSelector QAbstractScrollArea QScrollBar::sub-page,
#fadeModeCombobox QAbstractScrollArea QScrollBar::add-page,
#fadeModeCombobox QAbstractScrollArea QScrollBar::sub-page {
  background: none;
}
#LibraryContainer QScrollBar::handle:horizontal,
WEffectSelector QAbstractScrollArea QScrollBar::handle:horizontal,
#fadeModeCombobox QAbstractScrollArea QScrollBar::handle:horizontal {
  min-width: 25px;
  background: #5F5F5F;
  border-radius: 3px;
  border: none;
}
#LibraryContainer QScrollBar::handle:vertical,
WEffectSelector QAbstractScrollArea QScrollBar::handle:vertical,
#fadeModeCombobox QAbstractScrollArea QScrollBar::handle:vertical {
  min-height: 25px;
  background: #5F5F5F;
  border-radius: 3px;
  border: none;
}
#LibraryContainer QScrollBar::handle:horizontal:hover,
#LibraryContainer QScrollBar::handle:vertical:hover,
WEffectSelector QAbstractScrollArea QScrollBar::handle:horizontal:hover,
WEffectSelector QAbstractScrollArea QScrollBar::handle:vertical:hover,
#fadeModeCombobox QAbstractScrollArea QScrollBar::handle:horizontal:hover,
#fadeModeCombobox QAbstractScrollArea QScrollBar::handle:vertical:hover {
  background: #B3B3B3;
}

/* Turn off buttons */
#LibraryContainer QScrollBar::add-line:horizontal,
#LibraryContainer QScrollBar::add-line:vertical,
#LibraryContainer QScrollBar::sub-line:horizontal,
#LibraryContainer QScrollBar::sub-line:vertical,
WEffectSelector QAbstractScrollArea QScrollBar::add-line:horizontal,
WEffectSelector QAbstractScrollArea QScrollBar::add-line:vertical,
WEffectSelector QAbstractScrollArea QScrollBar::sub-line:horizontal,
WEffectSelector QAbstractScrollArea QScrollBar::sub-line:vertical ,
#fadeModeCombobox QAbstractScrollArea QScrollBar::add-line:horizontal,
#fadeModeCombobox QAbstractScrollArea QScrollBar::add-line:vertical,
#fadeModeCombobox QAbstractScrollArea QScrollBar::sub-line:horizontal,
#fadeModeCombobox QAbstractScrollArea QScrollBar::sub-line:vertical {
  width: 0px;
  height: 0px;
  border: none;
}
/* Corner in between two scrollbars */
#LibraryContainer QAbstractScrollArea::corner,
WEffectSelector QAbstractScrollArea::corner,
#fadeModeCombobox QAbstractScrollArea::corner {
  border-top: 1px solid #141414;
  border-left: 1px solid #141414;
}

/*******************************************************************************
 ** END LIBRARY *****************************************************************
 *******************************************************************************/

/*******************************************************************************
 ** SKIN SETTINGS **************************************************************
 *******************************************************************************/

#SkinSettings {
  background-color: rgba(17.3%, 17.3%, 17.3%, 100%);
  margin-left: 4px;
}

#SkinSettingsTop {
  margin: 7px 4px 6px 6px;
  border-bottom: 1px solid #A9A9A9;
}

#SkinSettingsTop > #h1 {
  font: 16px/18px;
  text-align: left;
  text-transform: uppercase;
  background: none;
}

#SkinSettings > #h2,
#SkinSettingsCategoryButton {
  font: bold 14px/16px;
  text-align: left;
  color: #d2d2d2;
  background-color: none;
  margin: 0 0.2em .1em 0;
  border: 1px solid #A9A9A9;
  /* revert global WPushButton border style */
  border-width: 0px 0px 1px 0px;
  border-radius: 0px;
}

#SkinSettings > #h3 {
  font: 12px/14px;
  background-color: none;
  text-align: left;
  margin: .1em 0.5em .5em 0.5em;
}

#SkinSettings > #h3 WPushButton,
#SkinSettingsButton:hover {
  font: 12px/14px;
  background-color: none;
  text-transform: none;
  border: none;
}

#SkinSettings > #h3 WPushButton:hover,
#SkinSettingsButton:hover,
#SkinSettingsCategoryButton:hover {
  background: #222222;
}

/*******************************************************************************
 ** END SKIN SETTINGS **********************************************************
 *******************************************************************************/

#Mixxx {
  background-color: black;
  font-family: "Open Sans";
}

#WaveformSplitter {
  background-color: #222;
}

WWidget,
WLibrary QLabel,
WLibrary QPushButton {
  font-family: "Open Sans";
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

/* cue points labels in the overview */
WOverview {
  text-transform: none;
}

/* Passthrough label on overview waveform */
WOverview #PassthroughLabel {
  font-size: 16px;
  font-weight: bold;
  color: #73b3f7;
}

/* Start spacing for Deck overview row (small waveform, option grid) */
#OptionGrid, #ButtonGrid {
  background-color: #333333;
  /*padding: 1px;*/
  qproperty-layoutSpacing: 2;
}

#OptionGridRow1, #OptionGridRow2 {
  qproperty-layoutSpacing: 2;
}

#OverviewRow {
  qproperty-layoutSpacing: 2;
}
/* End spacing for Deck overview row */

#Waveforms {
  background-color: #333;
}

#WaveformZoomContainer {
  background-color: #333333;
  padding: 1px;
  qproperty-layoutSpacing: 2;
}

/* Start spacing for Deck inner column (tempo slider, rate change) */
#DeckRateSliderColumn {
  background-color: #333333;
  padding: 4px;
  qproperty-layoutSpacing: 2;
}

#RateTempButtons {
  qproperty-layoutSpacing: 2;
}
/* End spacing for Deck inner column (tempo slider, rate change) */


/* Start spacing for Deck controls row (transport, beatgrid, looping, hotcue, vinylcontrol) */

#PlayCueContainer,
#HotcueGrid,
#VinylControlsGrid {
  padding: 1px;
  qproperty-layoutSpacing: 2;
}

#HotcueGrid WWidgetGroup,
#VinylControlsGrid WWidgetGroup,
#DeckControlsGrid WWidgetGroup {
  qproperty-layoutSpacing: 2;
}

#DeckControlsGrid {
  qproperty-layoutSpacing: 2;
  padding: 0px;
}

WBeatSpinBox,
#DlgAutoDJ QSpinBox {
  color: #c1cabe;
  background-color: #1f1e1e;
  border: 1px solid #444342;
  border-radius: 3px;
  font: 15px;
  }
  WBeatSpinBox {
    padding: 2px;
  }
  #DlgAutoDJ QSpinBox {
    padding: 1px 2px 2px 2px;
    margin: 3px 0px 0px 2px;
  }
  WBeatSpinBox:hover,
  #DlgAutoDJ QSpinBox:hover,
  WBeatSpinBox:focus,
  #DlgAutoDJ QSpinBox:focus {
    border: 1px ridge #015d8d;
  }
  WBeatSpinBox::down-button,
  #DlgAutoDJ QSpinBox::down-button {
    subcontrol-origin: border;
    subcontrol-position: bottom right; /* position at the top right corner */
    padding-right: 4px;
    padding-top: -3px;
    border: 0;
  }
  WBeatSpinBox::down-arrow,
  #DlgAutoDJ QSpinBox::down-arrow {
    width: 9px;
    height: 7px;
    image: url(skin:/icon/ic_chevron_down_selector.svg);
  }
  WBeatSpinBox::down-arrow:hover,
  #DlgAutoDJ QSpinBox::down-arrow:hover {
    image: url(skin:/icon/ic_chevron_down_selector_hover.svg);
  }
  WBeatSpinBox::up-button,
  #DlgAutoDJ QSpinBox::up-button {
    subcontrol-origin: border;
    subcontrol-position: top right; /* position at the top right corner */
    padding-right: 4px;
    padding-bottom: -3px;
    border: 0;
  }
  WBeatSpinBox::up-arrow,
  #DlgAutoDJ QSpinBox::up-arrow {
    width: 9px;
    height: 7px;
    image: url(skin:/icon/ic_chevron_up_selector.svg);
  }
  WBeatSpinBox::up-arrow:hover,
  #DlgAutoDJ QSpinBox::up-arrow:hover {
    image: url(skin:/icon/ic_chevron_up_selector_hover.svg);
  }

/* End spacing for Deck controls row */

/* Start spacing for toolbar */
#ToolBar {
  padding: 0px 4px 0px 4px;
  qproperty-layoutSpacing: 5;
  background-color: #111111;
  border-width: 0px 0px 3px 0px;
  border-style: solid;
  border-color: #222;
}

#ToolBarLeft {
  qproperty-layoutSpacing: 0;
}

#ToolBarRight {
  qproperty-layoutSpacing: 6;
}

#NotificationsContainer {
  qproperty-layoutSpacing: 4;
}

#MasterControls, #HeadphoneControls {
    qproperty-layoutSpacing: 10;
    margin-bottom: 1px;
    margin-top: 1px;
}

/* End spacing for toolbar */

#Time {
  font: bold 13px;
}

#KnobLabelH, #HeadSplit {
  font: bold 11px;
}

/* All widget groups that are children of #DeckRows should AlignTop. */
#DeckRows > WWidgetGroup {
  qproperty-layoutAlignment: 'AlignTop | AlignHCenter';
}

#ArtistGutter, #TitleGutter {
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
  }
  #TitleGutter {
    padding: 2px 2px 1px 2px;
  }
  #ArtistGutter {
    padding: 1px 2px 2px 2px;
  }
#TitleGutterSmall {
  padding: 0px;
}

#TrackColorWrapper {
  margin-right: 2px;
}

#ArtistKeyBpmGutterSmall {
  border-top: 1px solid #222;
}

#BPMGutter, #PositionGutter {
  qproperty-layoutAlignment: 'AlignRight | AlignTop';
  qproperty-layoutSpacing: 4;
  padding: 2px;
}
#PositionGutter {
  margin-right: 4px;
}
#PositionGutterSmall {
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
  padding: 0px 6px 2px 3px;
}

/* Start editable widgets in decks */
#BpmKeyEditRowCollapsed:hover,
#BpmKeyEditRowExpanded:hover,
#PositionGutter:hover,
#PlayPositionTextSmall:hover,
#StarratingGutter:hover {
  /* emphasize editable widgets on hover */
  border: 1px solid #FF6600;
  background-color: rgba(255, 102, 0, 128);
}
#BpmKeyEditRowCollapsed {
  qproperty-layoutAlignment: 'AlignCenter';
  /* emphasize active widget */
  border: 1px solid #666666;
}

#BpmKeyEditRowExpanded {
  /* emphasize active widget */
  border: 1px solid #FF6600;
  background: rgba(255, 102, 0, 64);
  color: #D6D6D6;
}

#BpmKeyEditTrigger {
  /* make trigger button transparent */
  background-color: none;
  border: none;
}

#BpmKeyEditRowControls {
  /* Make room between buttons */
  background-color: #333333;
  padding-left: 1px;
  padding-right: 1px;
  margin-right: 2px;
  qproperty-layoutSpacing: 2;
}

#HotcueShiftButtons {
  qproperty-layoutSpacing: 2;
}

#BpmKeyEditTriggerLabel {
  padding-right: 1px;
}

#BpmKeyInfoShow {
  image: url(skin:/icon/ic_chevron_left_24x48px.svg) center center;
}

#BpmKeyInfoHide {
  image: url(skin:/icon/ic_chevron_right_24x48px.svg) center center;
}
/* End editable widgets in decks */

#DeckTextRow #ArtistGutter WLabel,
#DeckTextRow #BPMGutter WLabel,
#DeckTextRow #PositionGutter WLabel,
#PlayPositionTextSmall,
#ArtistTextSmall,
#BpmKeyTextSmall {
  font-weight: bold;
  font-size: 15px;
  text-transform: none;
}

#BpmKeyTextSmall,
#PlayPositionTextSmall {
  qproperty-alignment: 'AlignRight | AlignVCenter';
}

#PlayPositionTextSmall {
  padding: 0px 1px;
  border: 1px solid transparent;
}

#TitleTextSmall,
#ArtistTextSmall {
  padding: 0px 1px 0px 1px;
}

#DeckTextRow #TitleGutter WLabel,
#TitleTextSmall,
#EffectRackExpanded #EffectUnitNameContainer WLabel {
  font-weight: bold;
  font-size: 17px;
  text-transform: none;
  text-align: left;
}

#BpmKeyTextSmall {
  border: 1px solid #222;
  border-width: 0px 0px 0px 1px;
  padding: 0px 2px 0px 2px;
}

#SamplerTopRowInner WLabel {
  font-weight: bold;
  font-size: 15px;
  text-transform: none;
  text-align: left;
}

#EffectUnitLabel, #EffectRackCollapsed #EffectUnitNameContainer WLabel {
  font-weight: bold;
  font-size: 15px;
  text-transform: none;
  text-align: center;
}

#EffectUnitNameRow {
  border-bottom: 1px solid #222;
  background-color: transparent;
  margin: 0px;
}

#EffectUnit1, #EffectUnit2, #EffectUnit3, #EffectUnit4 {
  qproperty-layoutAlignment: 'AlignTop';
}

#EffectUnitToggle {
  padding: 0px 0px 0px 27px;
  font: bold 14px/20px;
  border: 0px;
}

#EffectUnitToggle[value="0"] {
  image: url(skin:icon/ic_unfold_more_48px.svg) no-repeat top right;
}

#EffectUnitToggle[value="1"] {
  image: url(skin:icon/ic_unfold_less_48px.svg) no-repeat top right;
}

#EffectUnitFiller {
  border: 1px solid #222;
  border-width: 1px 0px 0px 0px;
}

#EffectButtonControls {
  qproperty-layoutSpacing: 5;
}

#EffectHighlightable[highlight="0"] {
  border: 0px;
  padding: 3px 4px 3px 4px;
}

#EffectHighlightable[highlight="1"] {
  border: 2px solid #0081bd;
  padding: 1px 2px 1px 2px;
}

#EffectChainGroupControlButton {
  font: 10px;
}

#EffectUnitNameContainer {
  padding: 2px;
  qproperty-layoutAlignment: 'AlignLeft | AlignVCenter';
}

#EffectMetaKnobControls > WPushButton {
  qproperty-alignment: 'AlignHCenter';
}

#EffectUnitControls {
  border: 1px solid #222222;
  border-width: 0px 0px 0px 1px;
  qproperty-layoutSpacing: 2;
  padding: 0px 0px 3px 0px;
  qproperty-layoutAlignment: 'AlignHCenter | AlignTop';
  background-color: #333; /*
  background-color: #664971;  */
}

#EffectUnitHead {
  padding: 0px 0px 3px 0px;
}

#EffectButtonContainer {
  qproperty-layoutSpacing: 2;
}

#EffectMetaKnob, WEffect {
  font-size: 12px;
  background-color: none;
  border: none;
}

#EffectEnableButton {
  image: url(skin:/icon/ic_power_48px.svg) no-repeat center center;
}

#EffectKnob {
}

#EffectButtonParameter {
  margin-top: 3px;
}

#KnobLabel {
  background-color: none;
  border: none;
  qproperty-alignment: 'AlignHCenter';
  font: 10px;
}

#EffectUnitNameRow {
}

#EffectUnitMainKnobsContainer {
    qproperty-layoutSpacing: 7;
}

#EffectKnobLabel {
  background-color: none;
  border: none;
  qproperty-alignment: 'AlignHCenter | AlignTop';
  font: 10px;
  margin-top: -2px;
}

#EffectButton {
  font: 10px;
}

#EffectButtonLabel {
  background-color: none;
  border: none;
  qproperty-alignment: 'AlignHCenter';
  font: 10px;
  margin-top: 1px;
}

#Crossfader {
  margin-top: 3px;
}

#Crossfader[highlight="0"] {
  border-image: none;
}

#Crossfader[highlight="1"] {
  border-image: url(skin:slider-crossfader-AutoDJ.svg) 0 0 0 0 stretch stretch;
}

#MasterControls {
  qproperty-layoutSpacing: 2;
}

#DeckControls {
  qproperty-layoutSpacing: 0;
}

#MainDecks, #MainDeckContainer {
  background-color: #333333;
}

#LeftGutter, #RightGutter {
  background-color: #222222;
}

#Deck1, #Deck2, #Deck3, #Deck4 {
  background-color: #333333;
}

WWidget, WLabel {
  /* All labels should default to a grey that is readable on black. */
  color: #D2D2D2;
  font-size: 12px;
}

/* Track text, etc. should be in the deck color. */
#Deck1 WLabel, #Deck2 WLabel, #Deck3 WLabel, #Deck4 WLabel {
  color: #D2D2D2;
}

WNumberRate {
  font-size: 13px;
}
#RateDisplay1, #RateDisplay2, #RateDisplay3, #RateDisplay4 {
  qproperty-layoutAlignment: 'AlignHCenter';
}

#Mixer {
  qproperty-layoutAlignment: 'AlignTop';
  background-color: #333;
  margin: 0px 2.5px 5px 2.5px;
  padding: 0px 0px 3px 0px;
}

#DeckMixer {
  background-color: #333333;
}

#CircleButton, #QuickEffectKillButton {
  border: 3px solid #333333;
  border-radius: 2px;
}

#EQKillButton,
#QuickEffectKillButton {
  border-radius: 2px;
  border: 0px;
  margin: 1px;
}

#EQKillButton[value="1"] {
  background-color: #bb0000;
  }
  #EQKillButton[value="1"]:hover {
    background-color: #e30000;
  }

#SmallCircleButton {
  border: 2px solid #333333;
  border-radius: 1px;
}

#MixerStrip_4Decks {
  padding: 0px 5px;
  qproperty-layoutAlignment: 'AlignHCenter';  /*
  background-color: #911661; */
}

#ButtonContainer {
  qproperty-layoutAlignment: 'AlignCenter';
  padding: 3px 0px 3px 0px;
}

#MixerButtonContainerRight {
  qproperty-layoutAlignment: 'AlignLeft';
  padding: 0px 0px 0px 9px; /*
  background-color: #456313;  */
}

#MixerButtonContainerLeft {
  qproperty-layoutAlignment: 'AlignRight';
  padding: 0px 9px 0px 0px;
}

#4DecksMixerMonoMeterLeft {
  padding: 0px 3px 0px 4px;
}
#4DecksMixerMonoMeterRight {
  padding: 0px 4px 0px 3px;
}

#channel_VuMeter_Group {
  qproperty-layoutSpacing: 2;
  qproperty-layoutAlignment: 'AlignHCenter';
  /* background-color: #828315; */
}

#master_VuMeter_Group {
  qproperty-layoutSpacing: 2;
  qproperty-layoutAlignment: 'AlignHCenter';
  padding-left: 5px;
  padding-right: 5px;
  /* background-color: #828315; */
}

#MasterVu {
  qproperty-layoutAlignment: 'AlignCenter';
  /* background-color: #582831; */
}

#vumeter_v, #vumeter_h {
  qproperty-layoutSpacing: 2;
}

WVuMeter, #PeakIndicator {
  background-color: #222222;
}

/* Starrating for tracks loaded in decks */
WStarRating {
  margin            : 5px 5px 0px 0px;
  border            : 0px solid #ffffff;
  padding           : 2px;
  color             : #d2d2d2;
  background-color  : none;
}

#SampleDecksContainer {
  background-color: #333333;
}

#MicrophonesContainer {
}

#MicAuxRack {
  background-color: #222;
  margin-bottom: 4px;
  qproperty-layoutSpacing: 3;
}

#MicAuxLabelContainer,
#DuckingLabelContainer {
  qproperty-layoutAlignment: 'AlignHCenter';
}

#MicAuxContainer, #MicDuckingContainer {
  margin: 0px;
  background-color: #333;
}

#MicAuxContainer {
  padding: 4px 3px;
}
#MicDuckingContainer {
  padding: 4px;
}

#MicAuxContainer {
  qproperty-layoutSpacing: 3;
}

#MicDuckingControls {
  qproperty-layoutSpacing: 1;
}

#MicAuxLabel, #DuckingLabel {
  font-weight: bold;
}

#MicAuxButtons {
  qproperty-layoutSpacing: 3;
}

#OrientationButtonAux {
}

#LibraryContainer {
  qproperty-layoutAlignment: 'AlignLeft | AlignVCenter';
  background-color: #222222;
  padding-top: 2px;
}

#LibrarySplitter {
  background-color: #222222;
}

#EffectRackContainer {
  background-color: #333333;
}

#EffectUnitsRow {
  border: 1px solid #222222;
  border-width: 0px 0px 5px 0px;
}

#EffectUnitNoParameters { /*
  padding-left: 5px;  */
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
}

#EffectUnitEffectsNoParameters {
  qproperty-layoutSpacing: 20;
  padding: 0px 4px;
}

#EffectUnitEffects {
  padding: 2px;
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
  qproperty-layoutSpacing: 2;
}

#EffectUnitParameters {
  padding: 0 2px;
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
  qproperty-layoutSpacing: 2;
}

#EffectUnit {
  font-size: 15px;
}

#SampleDecksContainer {
}

#SamplerTopRowOuter {
  padding: 2px;
}

#SamplerTopRowInner {
  qproperty-layoutSpacing: 2;
}

#SamplerExpansion {
  padding: 2px;
  qproperty-layoutSpacing: 2;
}

#SampleDecksExpanded, #SampleDecksCollapsed {
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
}

#OverviewRow, #VisualRow, #ButtonRow {
  /*qproperty-layoutContentsMargins: rect(0 1 0 1);*/
}

WWidgetGroup {
  /*border: 1px solid rgb(128, 128, 128);*/
  /*margin: 0px;
  padding: 0px;
  qproperty-layoutSpacing: 0;
  qproperty-layoutContentsMargins: rect(0 0 0 0);*/
  /*qproperty-layoutAlignment: 'AlignCenter';*/
}

/*******************************************************************************
 ** Buttons  *******************************************************************
 *******************************************************************************/

WPushButton {
    color: #D2D2D2;
    background-color: #4B4B4B;
    border: 1px solid #4B4B4B;
    border-radius: 2px;
    outline: none;
    font-size: 12px;
    font-weight: bold;
}

WPushButton:hover,
#PlayToggle:hover {
    color: #D2D2D2;
    background-color: #5F5F5F;
    border: 1px solid #5F5F5F;
}

/*"Pressed" state*/
WPushButton[value="1"],
WPushButton[value="2"],
#PlayToggle[value="1"] {
    color: #FDFDFD;
    background-color: #006596;
    border: 1px solid #006596;
}

WPushButton[value="1"]:hover,
WPushButton[value="2"]:hover,
#PlayToggle[value="1"]:hover {
    color: #FDFDFD;
    background-color: #0080BE;
    border: 1px solid #0080BE;
}

#HotcueButton {
  border: none;
}

#HotcueButton[light="true"] {
    color: #1f1e1e;
}

#PlayToggle {
  background-color: none;
  border: 1px solid transparent;
}

#PlayToggle[value="0"] {
  image: url(skin:/icon/ic_play_48px.svg) no-repeat center center;
}

#PlayToggle[value="1"] {
  image: url(skin:/icon/ic_pause_48px.svg) no-repeat center center;
}

#ToolbarButton[value="1"] {
    color: #D2D2D2;
    background-color: #5a5a5a;
    border: 3px solid #006596;
    border-radius: 3px;
}

#SkinSectionToggleButton[value="1"]:hover {
    color: #D2D2D2;
    background-color: #5F5F5F;
    border: 3px solid #0080BE;
    border-radius: 3px;
}

WRecordingDuration {
  font-weight: bold;
}

/* The effect unit mix mode button toggles between
two different modes that are not "on" or "off", so
do not highlight either state. */
#EffectUnitMixModeButton {
  margin: 1px 4px;
  border-radius: 2px;
  border: 0px;
}

#EffectUnitMixModeButton[value="0"]:hover,
#EffectUnitMixModeButton[value="1"]:hover {
    background-color: #5F5F5F;
}

#EffectUnitMixModeButton[value="1"] {
    background-color: #4B4B4B;
}


/* Special case "orientation" controls
  0 -- left
  1 -- center / off
  2 -- right
*/
/* Default xfader positions:
  left decks = left xfader
  right decks = right xfader
  auxiliary = center */
#OrientationButtonDeck1[value="0"],
#OrientationButtonDeck3[value="0"],
#OrientationButtonDeck2[value="2"],
#OrientationButtonDeck4[value="2"],
#OrientationButtonAux[value="1"],
#OrientationButtonSampler[value="1"] {
    color: #D2D2D2;
    background-color: #4B4B4B;
    border: 1px solid #4B4B4B;
    border-radius: 2px;
    outline: none;
}

#OrientationButtonDeck1[value="0"]:hover,
#OrientationButtonDeck3[value="0"]:hover,
#OrientationButtonDeck2[value="2"]:hover,
#OrientationButtonDeck4[value="2"]:hover,
#OrientationButtonAux[value="1"]:hover,
#OrientationButtonSampler[value="1"]:hover {
    color: #D2D2D2;
    background-color: #5F5F5F;
    border: 0px solid #5F5F5F;
}

/* Highlight xfader special positions != default */
#OrientationButtonDeck1[value="1"],
#OrientationButtonDeck1[value="2"],
#OrientationButtonDeck3[value="1"],
#OrientationButtonDeck3[value="2"],
#OrientationButtonDeck2[value="0"],
#OrientationButtonDeck2[value="1"],
#OrientationButtonDeck4[value="0"],
#OrientationButtonDeck4[value="1"],
#OrientationButtonAux[value="0"],
#OrientationButtonAux[value="2"],
#OrientationButtonSampler[value="0"],
#OrientationButtonSampler[value="2"] {
    color: #FDFDFD;
    background-color: #006596;
    border: 0px solid #006596;
    border-radius: 2px;
    outline: none;
}

#OrientationButtonDeck1[value="1"]:hover,
#OrientationButtonDeck1[value="2"]:hover,
#OrientationButtonDeck3[value="1"]:hover,
#OrientationButtonDeck3[value="2"]:hover,
#OrientationButtonDeck2[value="0"]:hover,
#OrientationButtonDeck2[value="1"]:hover,
#OrientationButtonDeck4[value="0"]:hover,
#OrientationButtonDeck4[value="1"]:hover,
#OrientationButtonAux[value="0"]:hover,
#OrientationButtonAux[value="2"]:hover,
#OrientationButtonSampler[value="0"]:hover,
#OrientationButtonSampler[value="2"]:hover {
    color: #FDFDFD;
    background-color: #0080BE;
    border: 0px solid #0080BE;
}

/* Special case SamplerPlayButtonRepeating controls
  When sampler is playing, displays same play icon as normal, but
  background is red instead of blue.
*/

#SamplerPlayButtonRepeating[value="1"] {
    color: #711ada;
    background-color: #711ada;
    border: 0px solid #711ada;
}

#SamplerPlayButtonRepeating[value="1"]:hover {
    color: #8b32ff;
    background-color: #8b32ff;
    border: 0px solid #8b32ff;
}

/* Special case link_type button for effect parameters
  0 -- not linked / default (off)
  1 -- linked (on)
  2 -- split linked left (on)
  3 -- split linked right (on)
  4 -- split linked left/right (on)

  We define only those values (2-4) that are not covered by the existing
  standard button definitions.
  Note: EQ Gain effects cannot be used in split mode (= can be 0 or 1 only)
*/
#EffectSlotParameterLinkButtonsContainer {
    margin: 1px 4px;
    qproperty-layoutSpacing: 1;
    border-radius: 2px;
    background-color: #282828;
}

#EffectSlotParameterLinkTypeButton[value="2"] {
    color: none;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
                                      stop: 0 #006596,
                                      stop: 0.33 #006596,
                                      stop: 0.34 #4B4B4B,
                                      stop: 0.66 #4B4B4B,
                                      stop: 0.67 #4B4B4B,
                                      stop: 1 #4B4B4B);

    border: 0px solid #006596;
}

#EffectSlotParameterLinkTypeButton[value="2"]:hover {
    color: none;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
                                      stop: 0 #0080BE,
                                      stop: 0.33 #0080BE,
                                      stop: 0.34 #5F5F5F,
                                      stop: 0.66 #5F5F5F,
                                      stop: 0.67 #5F5F5F,
                                      stop: 1 #5F5F5F);
    border: 0px solid #0080BE;
}

#EffectSlotParameterLinkTypeButton[value="3"] {
    color: none;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
                                      stop: 0 #4B4B4B,
                                      stop: 0.33 #4B4B4B,
                                      stop: 0.34 #4B4B4B,
                                      stop: 0.66 #4B4B4B,
                                      stop: 0.67 #006596,
                                      stop: 1 #006596);
    border: 0px solid #006596;
}


#EffectSlotParameterLinkTypeButton[value="3"]:hover {
    color: none;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
                                      stop: 0 #5F5F5F,
                                      stop: 0.33 #5F5F5F,
                                      stop: 0.34 #5F5F5F,
                                      stop: 0.66 #5F5F5F,
                                      stop: 0.67 #0080BE,
                                      stop: 1 #0080BE);
    border: 0px solid #0080BE;
}

#EffectSlotParameterLinkTypeButton[value="4"] {
    color: none;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
                                      stop: 0 #006596,
                                      stop: 0.330000 #006596,
                                      stop: 0.340000 #4B4B4B,
                                      stop: 0.660000 #4B4B4B,
                                      stop: 0.670000 #006596,
                                      stop: 1 #006596);
    border: 0px solid #006596;
}


#EffectSlotParameterLinkTypeButton[value="4"]:hover {
    color: none;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
                                      stop: 0 #0080BE,
                                      stop: 0.330000 #0080BE,
                                      stop: 0.340000 #5F5F5F,
                                      stop: 0.660000 #5F5F5F,
                                      stop: 0.670000 #0080BE,
                                      stop: 1 #0080BE);
    border: 0px solid #0080BE;
}

#EffectSlotParameterLinkInversionButton[value="1"] {
    background-color: #b90505;
}

#EffectSlotParameterLinkInversionButton[value="1"]:hover {
    background-color: #e80808;
}

/* Special case "hide/show" button
   The button unfolds/folds widgets. We display different icons per state, but
   do not want an active or active:hover color like with the other buttons.
*/
#ShowHideToggle {
  qproperty-layoutAlignment: 'AlignTop';
  padding-top: 3px;
}

#SampleDeckToggle[value="1"], #LibraryToggle[value="1"], #EffectRackToggle[value="1"] {
    color: #D2D2D2;
    background-color: #4B4B4B;
    border: 1px solid #4B4B4B;
    border-radius: 2px;
    outline: none;
}

#SampleDeckToggle[value="1"]:hover, #LibraryToggle[value="1"]:hover, #EffectRackToggle[value="1"]:hover {
    color: #D2D2D2;
    background-color: #5F5F5F;
    border: 0px solid #5F5F5F;
}

#WaveformZoomDownButton[value="0"]:!hover,
#WaveformZoomSetDefaultButton[value="0"]:!hover,
#WaveformZoomUpButton[value="0"]:!hover {
  background: none;
  border: none;
}

#BeatJumpValue, #LoopMoveValue, #HotcueButton, #DeckCue, #DeckSync, #BeatsyncButton {
  font: bold 12px;
}

/*******************************************************************************
 ** End Buttons  ***************************************************************
 *******************************************************************************/


/* common styles for WEffectSelector, QMenu, QToolTip */
WEffectSelector QAbstractScrollArea,
#fadeModeCombobox QAbstractScrollArea,
QToolTip,
#LibraryContainer QMenu,
WBeatSpinBox QMenu,
WCueMenuPopup,
WCueMenuPopup QMenu,
WCoverArtMenu,
WTrackMenu QMenu {
  padding: 2px;
}
WEffectSelector QAbstractScrollArea,
#fadeModeCombobox QAbstractScrollArea {
  padding: 2px;
  font: 13px;
}
WEffectSelector QAbstractScrollArea,
#fadeModeCombobox QAbstractScrollArea {
  min-width: 180px;
}
WEffectSelector QAbstractScrollArea,
#fadeModeCombobox QAbstractScrollArea,
QToolTip,
#LibraryContainer QMenu,
#LibraryContainer QMenu::item,
#LibraryContainer QMenu QCheckBox,
WBeatSpinBox QMenu,
WBeatSpinBox QMenu::item,
WCueMenuPopup,
WCueMenuPopup QMenu,
WCueMenuPopup QLabel,
WCueMenuPopup QMenu::item,
WCoverArtMenu,
WCoverArtMenu::item,
WTrackMenu,
WTrackMenu::item,
WTrackMenu QCheckBox,
WTrackMenu QMenu,
WTrackMenu QMenu::item,
WTrackMenu QMenu QCheckBox {
  color: #c1cabe;
  background-color: #201f1f;
}
WEffectSelector QAbstractScrollArea,
#fadeModeCombobox QAbstractScrollArea,
QToolTip,
#LibraryContainer QMenu,
WBeatSpinBox QMenu,
WCueMenuPopup,
WCueMenuPopup QMenu,
WCoverArtMenu,
WTrackMenu,
WTrackMenu QMenu {
  border-width: 1px;
  border-style: solid;
  border-color: #aaa;
  border-radius: 1px;
}
  /* hovered items */
  WEffectSelector::item:selected,
  #fadeModeCombobox::item:selected,
  WBeatSpinBox QMenu::item:selected,
  WCueMenuPopup QMenu::item:selected,
  WCoverArtMenu::item:selected,
  WTrackMenu::item:selected,
  WTrackMenu QCheckBox:selected,
  WTrackMenu QCheckBox:focus,
  WTrackMenu QCheckBox:hover,
  WTrackMenu QMenu::item:selected,
  WTrackMenu QMenu QCheckBox:selected,
  WTrackMenu QMenu QCheckBox:focus,
  WTrackMenu QMenu QCheckBox:hover,
  #LibraryContainer QMenu::item:selected,
  #LibraryContainer QMenu QCheckBox:selected,
  #LibraryContainer QMenu QCheckBox:focus,  /* selected by keyboard */
  #LibraryContainer QMenu QCheckBox:hover /* mouse hover */ {
      background-color: #565353;
      color: #fff;
      /* remove OS focus indicator */
      outline: none;
    }



WEffectSelector,
#fadeModeCombobox {
  color: #c1cabe;
  /* The 3D frame on the combo box becomes flat when you give it a border */
  border: 1px solid #444342;
  border-radius: 3px;
  font: 15px;
}
WEffectSelector {
  /* Fixes the white bars on the top/bottom of the popup on Mac OS X */
  margin: 0px;
  /* If you use margin top/bottom 0, the combo box shrinks in width (go figure) and
   * names start getting cut off. Adding explicit padding improves this. */
  padding: 0px 6px;
  background-color: #404040;
}
#fadeModeCombobox {
  /* 1px is added in each dimension. 20+1+1 = 22 = button height */
  height: 20px;
  padding: 0px 6px;
  margin: 9px 3px 6px 3px;
}

  WEffectSelector:hover,
  #fadeModeCombobox:hover {
    border: 1px ridge #015d8d;
  }
  WEffectSelector::drop-down,
  #fadeModeCombobox::drop-down {
    /* This causes the Qt theme's widget style to magically not apply. Go figure. */
    border: 0;
  }
  WEffectSelector::down-arrow,
  #fadeModeCombobox::down-arrow {
    width: 20px;
    height: 20px;
    image: url(skin:/icon/ic_chevron_down_48px.svg);
  }
  WEffectSelector::item:!selected,
  #fadeModeCombobox::item:!selected {
    background-color: #201f1f;
  }
  /* currently loaded effect */
  WEffectSelector::checked,
  #fadeModeCombobox::checked {
    color: #4495F4;
    font-weight: bold;
  }
  WEffectSelector::indicator:checked,
  #fadeModeCombobox::indicator:checked {
    /* checkbox container is 28 x 22px;
      use margin + border to create a square checkbox sized like kill buttons */
    margin: 2px;
    image: url(skin:/icon/ic_library_checkmark_blue.svg);
  }

  WEffectSelector::checked, /* selected item */
  WEffectSelector::indicator, /* checkbox, tick mark */
  WEffectSelector::drop-down,
  WEffectSelector::indicator:!checked,
  #fadeModeCombobox::checked, /* selected mode */
  #fadeModeCombobox::indicator, /* checkbox, tick mark */
  #fadeModeCombobox::drop-down,
  #fadeModeCombobox::indicator:!checked,
  #LibraryContainer QMenu::item,
  WBeatSpinBox QMenu::item,
  WCueMenuPopup QMenu::item,
  WCoverArtMenu::item,
  WTrackMenu::item,
  WTrackMenu QCheckBox,
  WTrackMenu QMenu::item,
  WTrackMenu QMenu QCheckBox {
    padding: 0px;
    margin: 0px;
    image: none;
    outline: none;
    border: 0px solid transparent;
    }
  #LibraryContainer QMenu::separator,
  WBeatSpinBox QMenu::separator,
  WCueMenuPopup QMenu::separator,
  WCoverArtMenu::separator,
  WTrackMenu::separator,
  WTrackMenu QMenu::separator {
    height: 0px;
    border-top: 1px solid #0a0a0a;
    margin: 4px;
    }
  #LibraryContainer QMenu::item,
  WBeatSpinBox QMenu::item,
  WCueMenuPopup QMenu::item,
  WCoverArtMenu::item,
  WTrackMenu::item,
  WTrackMenu QMenu::item {
    /* right padding creates a margin to the menu expand arrow,
    left padding should be bigger than menu icon width + menu icon
    margin */
    padding: 5px 13px 5px 26px;
    }
  /* icons in editline menu (searchbox, editable track properties) */
  #LibraryContainer QMenu::icon,
  #LibraryContainer QMenu QCheckBox::indicator,
  #LibraryContainer QMenu::indicator,
  WBeatSpinBox QMenu::icon,
  WCueMenuPopup QMenu::icon,
  WCoverArtMenu::icon,
  WTrackMenu::icon,
  WTrackMenu QCheckBox::indicator,
  WTrackMenu::indicator,
  WTrackMenu QMenu::icon,
  WTrackMenu QMenu QCheckBox::indicator,
  WTrackMenu QMenu::indicator,
  WCoverArtMenu::indicator {
    margin: 0px 4px 0px 2px;
    padding: 1px;
    }
  #LibraryContainer QMenu QCheckBox,
  WTrackMenu QCheckBox,
  WTrackMenu QMenu QCheckBox {
    padding: 2px 10px 2px 3px;
    }
  #LibraryContainer QMenu QCheckBox::indicator,
  #LibraryContainer QMenu::indicator,
  WTrackMenu QCheckBox::indicator,
  WTrackMenu::indicator,
  WTrackMenu QMenu QCheckBox::indicator,
  WTrackMenu QMenu::indicator {
    width: 13px;
    height: 13px;
    border: 1px solid #555;
    border-radius: 1px;
    background-color: #0f0f0f;
    /* remove OS focus indicator */
    outline: none;
    }
  #LibraryContainer QMenu QCheckBox::indicator:selected,
  #LibraryContainer QMenu::indicator:selected,
  WTrackMenu QCheckBox::indicator:selected,
  WTrackMenu::indicator:selected,
  WTrackMenu QMenu QCheckBox::indicator:selected,
  WTrackMenu QMenu::indicator:selected {
    border: 1px solid #999;
    }
  #LibraryContainer QMenu QCheckBox::indicator:checked,
  #LibraryContainer QMenu::indicator:checked,
  WTrackMenu QCheckBox::indicator:checked,
  WTrackMenu::indicator:checked,
  WTrackMenu QMenu QCheckBox::indicator:checked,
  WTrackMenu QMenu::indicator:checked {
    image: url(skin:/icon/ic_library_checkmark.svg);
    }
  /* disabled menu item and checkbox */
  #LibraryContainer QMenu::item:!enabled,
  WBeatSpinBox QMenu::item:!enabled,
  WCueMenuPopup QMenu::item:!enabled,
  WCoverArtMenu::item:!enabled,
  WTrackMenu::item:!enabled,
  WTrackMenu QCheckBox:!enabled,
  WTrackMenu QMenu::item:!enabled,
  WTrackMenu QMenu QCheckBox:!enabled,
  #LibraryContainer QMenu QCheckBox:!enabled {
    color: #555;
  }
  #LibraryContainer QMenu QCheckBox::indicator:!enabled,
  WTrackMenu QCheckBox::indicator:!enabled,
  WTrackMenu QMenu QCheckBox::indicator:!enabled {
    border: 1px solid #222;
    background-color: #333;
  }
  #LibraryContainer QMenu QCheckBox::indicator:!enabled:checked,
  #LibraryContainer QMenu QCheckBox::indicator:indeterminate,
  #LibraryContainer QCheckBox::indicator:indeterminate:!enabled,
  WTrackMenu QCheckBox::indicator:!enabled:checked,
  WTrackMenu QCheckBox::indicator:indeterminate,
  WTrackMenu QCheckBox::indicator:indeterminate:!enabled,
  WTrackMenu QMenu QCheckBox::indicator:!enabled:checked,
  WTrackMenu QMenu QCheckBox::indicator:indeterminate,
  WTrackMenu QMenu QCheckBox::indicator:indeterminate:!enabled {
    image: url(skin:/icon/ic_library_checkmark_grey.svg);
  }

  #LibraryContainer QMenu::right-arrow,
  WTrackMenu::right-arrow,
  WTrackMenu QMenu::right-arrow {
    width: 16px;
    height: 16px;
    image: url(skin:/icon/ic_chevron_right_48px.svg);
  }

  #LibraryContainer QHeaderView QMenu::indicator:checked,
  #LibraryContainer QHeaderView QMenu::indicator:checked:hover,
  #LibraryContainer QHeaderView QMenu::indicator:!checked,
  #LibraryContainer QHeaderView QMenu::indicator:!checked:hover,
  WTrackMenu::indicator:checked,
  WTrackMenu::indicator:checked:hover,
  WTrackMenu::indicator:!checked,
  WTrackMenu::indicator:!checked:hover,
  WTrackMenu QMenu::indicator:checked,
  WTrackMenu QMenu::indicator:checked:hover,
  WTrackMenu QMenu::indicator:!checked,
  WTrackMenu QMenu::indicator:!checked:hover {
    width: 12px;
    height: 10px;
    margin-left: 2px;
    border: none;
    background: none;
    }
    #LibraryContainer QHeaderView QMenu::indicator:checked {
      image: url(skin:/icon/ic_library_checkmark_blue.svg);
    }
/* common styles for WEffectSelector, QMenu, QToolTip */

/* widgets in cue popup menu */
#CueLabelEdit {
  padding: 2px;
  border: 1px solid #4B4B4B;
  background-color: #0f0f0f;
  color: #d2d2d2;
  selection-color: #222222;
  selection-background-color: #d2d2d2;
}

#CueDeleteButton {
/* tall button, about the same height as cue number + label edit box */
  width: 28px;
  height: 46px;
  /* make the icon slightly larger than default 16px */
  qproperty-iconSize: 20px;
  qproperty-icon: url(skin:/icon/ic_delete.svg);
  background-color: #3B3B3B;
  border-radius: 2px;
  outline: none;
}

#CueDeleteButton:hover {
  background-color: #4B4B4B;
}