/* LateNight 2.1 */

#debugbg {
    background-color: #fff;
}

#Mixxx, WWidget,
WLabel, QLabel,
WPushButton, QPushButton,
WEffect, WEffectSelector,
WBeatSpinBox {/**/
  font-family: Ubuntu;
  text-transform: uppercase;
  font-weight: bold;
}

QToolTip {/*
  font-family: Ubuntu;*/
}

#KeyText,
#PlayPositionText,
#DurationText,
#BpmText,
#RateText,
WBeatSpinBox,
WOverview {
  font-family: "Open Sans";
}

WPushButton, QPushButton {
  font-size: 11px/12px;
}

#Deck3 WLabel, #Deck4 WLabel {
  color: #09B2AE;
}

#TristateButton,
#PreviewLabel,
#MicTitle,
#MicSubTitle,
#SamplerTitle,
#Deck1 WLabel, #Deck2 WLabel,
#Deck3 #KeyText, #Deck4 #KeyText,
WSearchLineEdit:focus,
#LatencyLabel,
WTime {
  color: #eece33;
  font-weight: bold;
}

#Stars {
  qproperty-layoutAlignment: 'AlignCenter';
  border-radius: 2px;
  }
  #Stars:hover {
    background-color: #0f0f0f;
  }
  WStarRating {
    color: #f0bb2b;
    font-weight: bold;
    font-size: 20pt;
    }

#ToolBar {
  qproperty-layoutAlignment: 'AlignLeft | AlignVCenter';
  background-color: #1e1e1e;
  padding-top: 1px;
}

#UIButtonMargin {
  background-color: #1e1e1e;
}

#Deck1, #Deck2, #Deck3, #Deck4 {
  qproperty-layoutAlignment: 'AlignHCenter | AlignTop';
}

#Deck1, #Deck2,
#NoMixer12 {
  margin-bottom: 5px;
}

#Deck3, #Deck4,
#NoMixer34 {
  margin-top: 2px;
  margin-bottom: 3px;
}

#DecksSizer {
  background-color: #0f0f0f;
  qproperty-layoutAlignment: 'AlignHCenter | AlignTop';
}

#UILowerHalf {
  background-color: #0f0f0f;
  qproperty-layoutAlignment: 'AlignHCenter | AlignTop';
}

#HorizBorder {
  border-bottom: 1px solid #585858;
  background-color: #1e1e1e;
}

#DecksLeftContainer,
#DecksRightContainer,
#SkinContainer {
  background-color: #0f0f0f;
  qproperty-layoutAlignment: 'AlignHCenter | AlignTop';
}

#LibrarySingleton {
  /* This doesn't work as expected:
  it appears LibrarySingleton is displayed twice, so
  padding/margin would double.
  Placed a plain spacer in library.xml which works reliably
  padding-top: 5px;*/
}

#Library {
  border-left: 0px solid #585858;
  background-color: #0e0e0e;
  padding-bottom: 2px;
  /*border-top: 1px solid #585858;*/
}

#DeckRow_1_KeyVinylFx {
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
  border-bottom: 1px solid #585858;
  background-color: #1e1e1e;
  padding: 1px;
}

#DeckRow_2_3_ArtistTitleTime {
  border-bottom: 1px solid #585858;
  background-color: #1e1e1e;
}

#DeckRow_4_OverviewSpinny {
  border-bottom: 1px solid #585858;
  background-color: #1e1e1e;
  padding: 0px;
}

#DeckRow_5_LoopCuesTransport {
  qproperty-layoutAlignment: 'AlignBottom';
  padding: 3px 1px 1px 3px;
}

#DecksAndMixer {
  background-color: #1e1e1e;
}

#VisualizationContainer {
  border: 1px solid #585858;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
}

#Deck1,
#Deck3 {
  qproperty-layoutAlignment: 'AlignLeft | AlignBottom';
  border: 1px solid #585858;
  border-right: 0px;

}

#Deck2,
#Deck4 {
  qproperty-layoutAlignment: 'AlignLeft | AlignBottom';
  border: 1px solid #585858;
  border-left: 0px;
}

#DeckContainer {
  background-color: #0f0f0f;
}

#DeckLeftMargin {
  qproperty-layoutAlignment: 'AlignLeft | AlignBottom';
  border: 1px solid #585858;
  border-left: 0px;
  border-bottom: 0px;
  border-top: 0px;
  background-color: #0f0f0f;
}

#DeckRightMargin {
  border: 0px solid #585858;
  border-top:0px;
  border-right: 0px;
  border-bottom: 0px;
  background-color: #0f0f0f;
}

#ClockWidget {
  qproperty-layoutAlignment: 'AlignVCenter | AlignHCenter';
  margin-bottom: 2px;
}

WTime {
  font-size: 13px/13px;
}

#LatencyLabel {
  padding-bottom: 2px;
  font-size: 10px/10px;
}

#Mixer {/*
  background-color: #1e1e1e;
  qproperty-layoutAlignment: 'AlignCenter';
  border: 1px solid #585858;*/
}

#NoMixer12,
#NoMixer34 {
  border: 1px solid #585858;
  border-width: 0px 1px 0px 1px;
  background-color: #0f0f0f;
}

#MixerChannelControls {
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
  padding-bottom: 2px;
  border: 1px solid #585858;
  border-right: 0px;
  background-color: #1e1e1e;
  }

  #MixerContainer {
    qproperty-layoutAlignment: 'AlignLeft | AlignBottom';
    background-color: #1e1e1e;
    padding-top: 3px;
  }

#MasterHeadphoneMixer {
}

#MasterHeadphoneDivider {
  background-color: #585858;
  margin: 5px 0px 5px 0px;
}

#MasterControls,
#HeadphoneControls {
  qproperty-layoutAlignment: 'AlignHCenter | AlignTop';
  padding: 2px;
}

#MixerChannel_2Decks {
  qproperty-layoutAlignment: 'AlignLeft | AlignBottom';
}

#MixerChannel_4Decks {
  qproperty-layoutAlignment: 'AlignLeft | AlignBottom';
}

#MixerChannel_2Decks_Left {
  qproperty-layoutAlignment: 'AlignRight | AlignBottom';
  padding: 0px 2px;
}

#MixerChannel_2Decks_Right {
  qproperty-layoutAlignment: 'AlignLeft | AlignBottom';
  padding: 0px 2px;
}

#MasterVuMeter_2Decks {
  qproperty-layoutAlignment: 'AlignRight | AlignVCenter';
}

#MasterVuMeter_4Decks {
  qproperty-layoutAlignment: 'AlignHCenter | AlignVCenter';
  margin-top: 5px;
}

#NoMixerLogo {
  qproperty-layoutAlignment: 'AlignRight | AlignBottom';
  border: 1px solid #585858;
  border-top: 0px;
  background-color: #1e1e1e;
}

#MasterKnobCol {
  padding-left:1px;
  padding-right:1px;
}

#VuAndSlider {
  qproperty-layoutAlignment: 'AlignHCenter | AlignTop';
  padding: 1px 4px 0px 0px;
}

#VuAndSlider4decks {
  qproperty-layoutAlignment: 'AlignHCenter | AlignTop';
  padding: 1px 0px 0px 0px;
}

#VuMeter4Decks {
  qproperty-layoutAlignment: 'AlignRight | AlignVCenter';
  padding: 0px 4px 2px 0px;
}

#VolumeGain2Decks {
  qproperty-layoutAlignment: 'AlignHCenter | AlignTop';
  padding: 0px 0px 0px 0px;
}

#MasterSync {
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
  padding: 1px;
  padding-left: 2px;
}

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

#KillButtonLeft {
  qproperty-layoutAlignment: 'AlignRight | AlignVCenter';
  padding-left: 2px;
  margin-top: 2px;
}

#KillButtonRight {
  qproperty-layoutAlignment: 'AlignLeft | AlignVCenter';
  padding-right: 2px;
  margin-top: 2px;
}

#TitleGutter {
  qproperty-layoutAlignment: 'AlignLeft | AlignBottom';
  padding: 2px 3px 2px 2px;
  border: 1px solid #585858;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
}

#ArtistGutter{
  qproperty-layoutAlignment: 'AlignLeft | AlignBottom';
  padding: 2px;
  border: 0px solid #585858;
}


#TimeGutter, #DurationGutter {
  qproperty-layoutAlignment: 'AlignRight | AlignBottom';
  padding: 2px;
}

#PlayCueRevHotCues {
  qproperty-layoutAlignment: 'AlignRight | AlignBottom';
}

#RateButtons {
  qproperty-layoutAlignment: 'AlignHCenter | AlignBottom';
}

#DeckControls {
  qproperty-layoutAlignment: 'AlignCenter';
  border: 1px solid #585858;
  border-top: 0px;
  border-right: 0px;
  border-bottom: 0px;
  padding: 0px 2px;
}

#KeyText {
  qproperty-alignment: 'AlignCenter';
  font-size: 13px/13px;
  background-color: #0f0f0f;
  border: 1px solid #585858;
  border-radius: 3px;
  margin: 0px 1px;
}

#ArtistText,
#TitleText,
#PlayPositionText {
  font-size: 18px/20px;
}

#ArtistText,
#TitleText,
#PlayPositionText,
#KeyText,
#PreviewTitle {
  text-transform: none;
}

#DurationText {
  font-size: 13px/15px;
}

#VinylControls {
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
}

#KnobLabel,
#FxKnobLabel,
#FxButtonLabel {
  font: bold 10px/10px;
  color: #585858;
  text-align: center;
  qproperty-alignment: 'AlignCenter | AlignBottom';
  padding-top: -1px;
  text-transform: uppercase;
}

#MasterHeadphoneMixer WLabel,
/*WEffectParameter,
WEffectButtonParameter*/
#FxKnobLabel,
#FxButtonLabel {
  background-color: #101010;
  }
  #MasterHeadphoneMixer WLabel {
    padding: 0px;
  }
  #FxKnobLabel {
    padding: 0px;
  }
  #FxButtonLabel {
    padding: 0px;
    margin: 0px 0px 0px 0px;
  }

#FxKnobContainer {
  qproperty-layoutAlignment: 'AlignHCenter | AlignTop';/*
  background-color: #113397;*/
}

#FxUnit1_PflButton, #FxUnit2_PflButton {
  margin: 0px 0px 1px 2px;
}

#SyncControls {
  qproperty-layoutAlignment: 'AlignHCenter | AlignBottom';
  padding-right: 0px;
  border-bottom: 1px solid #585858;
}

#ToolbarDivider {
  background: transparent;
  image: url(skin:/style/toolbar_divider.png) no-repeat center center;
  margin: 0px 5px;
}

#RecBox {
  qproperty-layoutAlignment: 'AlignCenter';
  border: 1px solid #585858;
  border-radius: 2px;
  background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
    stop:0 #282828,
    stop:1 #0e0e0e);
}

#RecFeedback[displayValue="0"] {
  background-color: (x1:0, y1:0, x2:0, y2:1,
    stop:0 #282828,
    stop:1 #0e0e0e);
}

#RecFeedback[displayValue="1"],
#RecFeedback[displayValue="2"] {
  background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
    stop:0 #840600,
    stop:1 #AD0800);
}

#RecDot {
  background: transparent;
  image: url(skin:/buttons/rec_dot.svg) no-repeat center center;
}

#RecDuration {
  font-size: 10px/12px;
  color: #ddd;
}

#VinylStatus {
  border-radius: 5px;
}

#VinylButton,
#FxAssignButton,
#GuiToggleButton {
  border: 1px solid #585858;
  border-radius: 2px;
  }

  #GuiToggleButton {
    margin: 2px;
  }

  #VinylButton,
  #FxAssignButton {
    margin: 1px;
  }

#VinylButton[displayValue="0"],
#GuiToggleButton[displayValue="0"],
#FxAssignButton[displayValue="0"] {
  color: #ddd;
  background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
    stop:0 #282828,
    stop:1 #0e0e0e);
}

#VinylButton[displayValue="1"],
#VinylButton[displayValue="2"],
#GuiToggleButton[displayValue="1"],
#GuiToggleButton[displayValue="2"],
#FxAssignButton[displayValue="1"] {
  border: 1px solid #585858;
  border-radius: 2px;
  color: #0e0e0e;
  background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
    stop:0 #B69700,
    stop:1 #eece33);
}

#TristateButton {
  border: 1px solid #585858;
  border-radius: 2px;
  margin: 1px;
  background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1,
    stop:0 #282828,
    stop:1 #0e0e0e);
}

#PitchTweakButton {
    border: 1px solid #585858;
    border-radius: 2px;
    margin: 1px;
  }

  #PitchTweakButton[displayValue="0"] {
    color: #ddd;
    background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1,
      stop:0 #282828,
      stop:1 #0e0e0e);
  }

  #PitchTweakButton[displayValue="1"] {
    color: #ddd;
    background-color: #c00a09;
  }

#PitchLabel {
  font-size: 12px/14px;
  color: #585858;
  text-align: center;
  qproperty-alignment: 'AlignHCenter | AlignBottom';
  padding: 2px;
  margin: 2px;
}

#LoopToggleButton[displayValue="0"] {
    border: 1px solid #585858;
    border-radius: 2px;
    color: #ddd;
    background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1,
      stop:0 #282828,
      stop:1 #0e0e0e);
    margin-right: 2px;
}

#LoopToggleButton[displayValue="1"] {
    border: 1px solid #585858;
    border-radius: 2px;
    color: #c0c0c0;
    background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1,
      stop:0 #d80000,
      stop:1 #910000);
    margin-right: 2px;
}

/*################################################################
#######  Loop Controls  ########################################
##############################################################*/

#LoopBeatJumpButton,
#LoopSizeButton {
  font-weight: bold;
  color: #888;
  background-color: #333;
  }
  #LoopSizeButton {
    font-size: 14px/12px;
  }
  #LoopBeatJumpButton:hover,
  #LoopSizeButton:hover {
    border: 1px solid #888;
  }
  #LoopSizeButton[displayValue="1"] {
    border: 1px solid #ff8f00;
    color: #d2d2d2;
  }
  #LoopSizeButton[displayValue="1"]:hover {
    border: 1px solid #eeeeee;
  }

#ReloopButton[displayValue="0"] {
  background-color: #333;
  }
  #ReloopButton[displayValue="0"]:hover {
    border: 1px solid #888;
  }
  #ReloopButton[displayValue="1"] {
  /* See also #LoopIndicator near DeckButtons */
    background-color: #ff8f00;
    }
    #ReloopButton[displayValue="1"]:hover {
      border: 1px solid #eeeeee;
    }

WBeatSpinBox {
  /* make it 2px smaller in each dimension,
    border is added for final size */
  width: 55px;
  height: 22px;
  border: 1px solid #666;
  /* size of spinbox: 54x22px
  incl. up/down button: 70x22px */
  border-radius: 2px;
  color: #cfb32c;
  background-color: #0f0f0f;
  selection-color: #0f0f0f;
  selection-background-color: #d2d2d2;
  font-size: 13px/13px;
  padding: 0px;
  padding: 1px 2px 1px 1px;
  margin: 0px -1px 2px 0px;
}
  WBeatSpinBox:hover {
    border-color: #888;
  }
  WBeatSpinBox:focus {
    border-color: #d2d2d2;
    color: #cfb32c;
  }

  WBeatSpinBox::up-button, WBeatSpinBox::down-button {
    subcontrol-origin: padding;
    position: relative;
    /* as with spinbox: border is added to size.
      define it with same width as hover border, otherwise size jumps */
    width: 18px;
    height: 12px;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    border: 0px;
    }

  WBeatSpinBox::up-button {
    subcontrol-position: top right;
    margin-top: -1px;
    image: url(skin:/buttons/btn_beatbox_double.svg) no-repeat;
    }
    WBeatSpinBox::up-button:pressed {
      image: url(skin:/buttons/btn_beatbox_double_pressed.svg) no-repeat;
    }
  WBeatSpinBox::down-button {
    subcontrol-position: bottom right;
    margin-bottom: -1px;
    image: url(skin:/buttons/btn_beatbox_halve.svg) no-repeat;
    }
    WBeatSpinBox::down-button:pressed {
      image: url(skin:/buttons/btn_beatbox_halve_pressed.svg) no-repeat;
    }

#Crossfader {
  qproperty-layoutAlignment: 'AlignCenter';
  /*background-color:#1e1e1e;*/
  padding: 3px 1px 1px 5px;
}

#CrossfaderAndSwitches2Decks {
  qpoperty-layoutAlignment: 'AlignHCenter';
  padding: 0px;
}

#CrossfaderSwitch4Decks {
  qproperty-layoutAlignment: 'AlignRight';
  margin: 1px 6px 0px 0px;
}

#PreviewDeck {
  qproperty-layoutAlignment: 'AlignTop';
  border: 1px solid #585858;
  padding: 0px;
  margin: 0px;
  margin-bottom: 5px;
}

#PreviewDeckTextRow {
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
  font-size: 10px/11px;
  padding: 0px;
  color: #cfb32c;
  text-align: left;
}

#PreviewLabel {
  qproperty-alignment: 'AlignVCenter | AlignHCenter';
  background-color: #1e1e1e;
  text-transform: uppercase;
  border-right: 1px solid #585858;
  text-align: center;
  padding-top: 2px;
  padding-bottom: 2px;
}

#PreviewTitle {
  font: bold 14px/14px;
  text-align: left;
  color: #cfb32c;
  margin: 2px;
}

#PreviewPlayOverview {
  border: 1px solid #585858;
  border-top: 0px;
  border-left: 0px;
  border-bottom: 0px;
}

#PreviewPlay {
  padding: 3px 1px 1px 3px;
  border-right: 1px solid #585858;
}

#NoBorder {
border: 0px;
}

#PreviewColumnOne {
  padding: 0px;
  margin: 0px;
}

#PreviewTitleEject {
  border: 1px solid #585858;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
}

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

#AlignLeftTop {
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
}

#AlignLeftBottom {
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
}

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

#AlignRightTop {
  qproperty-layoutAlignment: 'AlignRight | AlignTop';
}

#AlignRightBottom {
  qproperty-layoutAlignment: 'AlignRight | AlignBottom';
}

#AlignRightCenter {
  qproperty-layoutAlignment: 'AlignRight | AlignVCenter';
}

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

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

#AlignBottom {
  qproperty-layoutAlignment: 'AlignHCenter | AlignBottom';
}
/**/
#TEST {
  background-color: #456113;
}

#Spacer1e {
  background-color: #1e1e1e;
}

#Spacer58 {
  background-color: #585858;
}

#Border58 {
  border: 1px solid #585858;
}

#PFLVUMeterBox {
  qproperty-layoutAlignment: 'AlignHCenter | AlignTop';
  padding: 4px 0px 5px 0px;
}

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

#Toolbar {
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
  border: 1px solid #585858;
  padding: 0px;
  background-color: #0f0f0f;
}

#ToolbarLogo {
  background: transparent;
  image: url(skin:style/mixxx_logo_toolbar.png) no-repeat center center;
}

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

#Waveform {
}

#BeatgridButtonsToggle {
  image: url(skin:/buttons/btn_beatgrid_buttons_toggle.svg) no-repeat center center;
  border: 1px solid #585858;
  border-radius: 2px;
  margin: 1px;
  background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
          stop:0 #282828,
          stop:0.13 #1a1a1a,
          stop:0.87 #1a1a1a,
          stop:1 #0e0e0e);
}

#BeatCurpos {
  border: 1px solid #585858;
  border-radius: 2px;
  margin: 1px;
  background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
          stop:0 #282828,
          stop:0.25 #1a1a1a,
          stop:0.75 #1a1a1a,
          stop:1 #0e0e0e);
}

#RateContainer {
  qproperty-layoutAlignment: 'AlignHCenter | AlignTop';
  border: 1px solid #585858;
  border-width: 0px 1px 0px 0px;
  padding: 4px 1px 2px 2px;
}

#BpmContainer {
  qproperty-layoutAlignment: 'AlignCenter';
}

#BpmText {
  qproperty-alignment: 'AlignCenter';
  font-size: 18px/18px;
  font-weight: bold;
  background-color: transparent;
  text-align: center;
  padding: 0px;
  margin: 0px;
}

#RateText {
  qproperty-alignment: 'AlignCenter';
  font-size: 12px/13px;
  background-color: transparent;
  text-align: center;
  padding: 0px;
  margin: 0px;
}

#RateControls {
  qproperty-layoutAlignment: 'AlignHCenter | AlignVCenter';
}

#RateSlider {
  /* no respected since RateSlider has a connection attached
  margin: 0px 10px 0px 0px; */
}

#RateButtons {
  qproperty-layoutAlignment: 'AlignHCenter | AlignVCenter';
  padding: 2px 0px 0px 2px;
}

#MicContainer, #AuxContainer {
  qproperty-layoutAlignment: 'AlignHCenter | AlignTop';
  border: 1px solid #585858;
  background-color: #1e1e1e;
}

#MicContainer {
  margin: 5px 5px 0px 0px;
  padding: 1px 6px 3px 6px;
}

#AuxContainer {
  margin: 5px 0px 0px 5px;
  padding: 1px 0px 3px 6px;
}

#MicTitle {
  qproperty-alignment: 'AlignLeft | AlignTop';
  text-transform: uppercase;
  font-size: 15px/17px;
}

#MicBorder {
  qproperty-layoutAlignment: 'AlignHCenter | AlignTop';
  border: 1px solid #585858;
  margin: 1px 6px 1px 0px;
}

#MicInterior {
  padding: 0px 3px 2px 3px;
}

#MicSubTitle {
  qproperty-alignment: 'AlignCenter | AlignTop';
  font-size: 12px/13px;
  text-align: center;
}

#MicDuckingTitle {
  qproperty-alignment: 'AlignCenter | AlignTop';
  font-size: 12px/13px;
  font-weight: bold;
  color: #585858;
  text-align: center;
}

#MicDuckingContainer {
  margin: 0px 0px 3px 0px;
}

#MicDuckingButton[displayValue="0"] {
  color: #ddd;
  }

  #MicDuckingButton[displayValue="1"],
  #MicDuckingButton[displayValue="2"] {
    color: #0e0e0e;
  }

#MicGainPFlContainer {
  qproperty-layoutAlignment: 'AlignCenter';
  padding: 0px;
  margin: 0px;
}

#MicGainKnob {
  qproperty-layoutAlignment: 'AlignCenter';
  margin: 0px 8px 0px 3px;
}

#MicVUMeter {
  qproperty-layoutAlignment: 'AlignHCenter | AlignVCenter';
  padding: 3px 0px 1px 4px;
}

#MicFxButtons {
  qproperty-layoutAlignment: 'AlignRight | AlignVCenter';
}

#MicTalkButton,
#AuxMuteButton {
  border-radius: 2px;
  margin: 1px 0px 1px 2px;
}

#SamplerDecksContainer {
  background-color: #0e0e0e;
  border-top: 1px solid #585858;
  /*border-bottom: 1px solid #585858;*/
  padding-bottom: 0px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
}

#SamplerDeck {
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  border: 1px solid #585858;
  background-color: #1e1e1e;
}

#SamplerMainControls {
}

#SamplerText {
  qproperty-layoutAlignment: 'AlignLeft | AlignTop';
  padding: 3px 3px 3px 5px;
  border: 1px solid #585858;
  border-top: 0px;
  border-left: 0px;
}

#SamplerTitle {
  font-size: 16px/19px;
  text-align: left;
  text-transform: none;
}

#SamplerRowTwo {
  border: 1px solid #585858;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
}

#SamplerButtons {
  qproperty-layoutAlignment: 'AlignVCenter';
}

#SamplerPlay {
  padding: 3px 1px 1px 3px;
  border: 1px solid #585858;
  border-top: 0px;
  border-left: 0px;
  border-bottom: 0px;
}

#SamplerButtonGrid {
  border: 1px solid #585858;
  border-top: 0px;
  border-bottom: 0px;
}

#SamplerHotcues {
  qproperty-layoutAlignment: 'AlignRight | AlignVCenter';
  margin: 2px 0px 0px 2px;
}

#SamplerPfl {
  margin: 2px 1px 0px 0px;
}

#SamplerGain {
  padding: 0px 0px 0px 2px;
}

#SamplerVU {
  padding: 0px 3px;
  qproperty-layoutAlignment: 'AlignCenter';
  border: 1px solid #585858;
  border-top: 0px;
  border-left: 0px;
  border-bottom: 0px;
}

#SamplerPitch {
  padding: 1px 2px 0px 2px;
  qproperty-layoutAlignment: 'AlignRight | AlignBottom';
}

#SamplerSyncButton {
  qproperty-layoutAlignment: 'AlignHCenter | AlignVCenter';
}

#TitleGutter WLabel {
  font-size: 16px/19px;
  text-transform: none;
  text-align: left;
}

#EffectRack {
  qproperty-layoutAlignment: 'AlignCenter | AlignTop';
  background-color: #0e0e0e;
}

#EffectUnit1, #EffectUnit2, #EffectUnit3, #EffectUnit4 {
  qproperty-layoutAlignment: 'AlignRight | AlignTop';
  border: 1px solid #585858;
}

#EffectUnit1, #EffectUnit3 {
  margin: 5px 5px 2px 2px;
}

#EffectUnit2, #EffectUnit4 {
  margin: 5px 2px 2px 5px;
}

#EffectRows {
  qproperty-layoutAlignment: 'AlignRight | AlignTop';
}

#EffectUnitControls {
  qproperty-layoutAlignment: 'AlignHCenter | AlignVCenter';
  background-color: #1e1e1e;
  border-left: 1px solid #585858;
  padding: 0px 2px;
}

#FxUnit1_ExpandCollapseButton,
#FxUnit2_ExpandCollapseButton,
#FxUnit3_ExpandCollapseButton,
#FxUnit4_ExpandCollapseButton {
  qproperty-layoutAlignment: 'AlignHCenter | AlignTop';
  margin: 1px 0px 1px 0px;
}

#FxUnit1_ExpandCollapseButton WPushButton,
#FxUnit2_ExpandCollapseButton WPushButton,
#FxUnit3_ExpandCollapseButton WPushButton,
#FxUnit4_ExpandCollapseButton WPushButton {
  font-size: 13px/13px;
  font-weight: bold;
  padding-top: 10px;
  color: #bfbfbf;
}

#EffectSlot1,
#EffectSlot2,
#EffectSlot3 {
  qproperty-layoutAlignment: 'AlignRight | AlignVCenter';
  padding: 2px 2px 2px 5px;
}

#EffectSlot_focused {
  background-color:qlineargradient(
      x1:0, y1:0, x2:0, y2:1,
        stop:0 #000,
        stop:0.1 #090909,
        stop:1 #090909);
}

#EffectFocusButton {
  qproperty-layoutAlignment: 'AlignHCenter | AlignVCenter';
  margin: 0px 0px 0px 0px;
}

#MetaKnob {
  qproperty-layoutAlignment: 'AlignHCenter | AlignVCenter';
  padding: 0px 2px 0px 5px;
}

#EffectKnob {
  qproperty-layoutAlignment: 'AlignHCenter | AlignVCenter';
  margin-left: 1px;
}

#EffectButton {
  qproperty-layoutAlignment: 'AlignHCenter | AlignTop';
  padding-top: 4px;
}

#EffectUnitKnob {
  qproperty-layoutAlignment: 'AlignRight';
  padding: 3px;
}

WEffectSelector {
  font-weight: bold;
  font-size: 12px/13px;
  text-transform: uppercase;
  color: #cfb32c;
  background-color: #0f0f0f;
  /* Fixes the white bars on the top/bottom of the popup on Mac OS X */
  min-height: 13px;
  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: 4px 0px 4px 5px;
  /* The 3D frame on the combo box becomes flat when you give it a border */
  border: 1px solid #666;
  border-radius: 3px;
  }
  WEffectSelector::drop-down {
    border: 0;
  }
  WEffectSelector::down-arrow {
    image: url(skin:/buttons/btn_fxSelector.svg);
    border: 0;
    padding: 0;
    margin: 0;
    }
    WEffectSelector::down-arrow:hover {
      image: url(skin:/buttons/btn_fxSelector_pressed.svg);
      border: 0;
      padding: 0;
      margin: 0;
    }

  WEffectSelector QAbstractItemView {
    width: 142px;
    background-color: #0f0f0f;
    /* padding-left: 6px; */
    font-size: 12px/13px;
    /* On Linux, this is not applied but font color from WEffectSelector
    is inherited.
    On Windows, it must be defined here */
    color: #cfb32c;
    border: 1px solid #666;
    border-radius: 2px;
    padding: 0px;
  }
  /* selected item */
  WEffectSelector::checked {
    /* not applied
    padding-left: 5px;
    font-weight: bold;	*/
    padding: 0px;
    margin: 0px;
    color: #eee;
    background-color: #1e1e1e;
  }
  /* hovered items */
  WEffectSelector::item:selected {
    background-color: #333;
  /* Already of those two destroys font config and puts tick mark behind text:
    margin: 0px;
    padding: 0px; */
  /* This moves the tick mark behind item text,
    text sits at left border now
    border: 0; */
  }
  WEffectSelector::indicator {
  /* This is sufficient to completely hide the tick mark, but
    this alone would show an empty, shadowed box instead of tick mark
    background-color: transparent;*/
  /* This should decrease the tick mark's left & right margin but is not respected */
    margin: 0px;
    padding: 0px;
  }

#FxSuperLinkButton,
#FxSuperLinkInvertButton {
  border-radius: 1px;
  }
  #FxSuperLinkButton {
    margin: 0px 5px 0px 5px;
  }
  #FxSuperLinkInvertButton {
    margin: 0px 5px 2px 5px;
  }

#FxSuperLinkButton[value="0"],
#FxSuperLinkInvertButton[displayValue="0"] {
  background-color: #4b4b4b;
}
#FxSuperLinkButton[value="0"]:hover,
#FxSuperLinkInvertButton[displayValue="0"]:hover {
  background-color: #888;
}
#FxSuperLinkInvertButton[displayValue="1"] {
  background-color: #9C0900;
  }
  #FxSuperLinkInvertButton[displayValue="1"]:hover {
    background-color: #B50A00;
  }

#FxSuperLinkButton[value="1"] {
  background-color: #A5A5A5;
  }
  #FxSuperLinkButton[value="1"]:hover {
    background-color: #CDCDCD;
  }
#FxSuperLinkButton[value="2"] {	/*
  a simple way to achive a partitioning in thirds	*/
  background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
    stop: 0 #A5A5A5,
    stop: 0.33 #A5A5A5,
    stop: 0.34 #4b4b4b,
    stop: 1 #4b4b4b);
  }
  #FxSuperLinkButton[value="2"]:hover {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
      stop: 0 #CDCDCD,
      stop: 0.33 #CDCDCD,
      stop: 0.34 #4b4b4b,
      stop: 1 #4b4b4b);
    }
#FxSuperLinkButton[value="3"] {
  background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
    stop: 0 #4b4b4b,
    stop: 0.66 #4b4b4b,
    stop: 0.67 #A5A5A5,
    stop: 1 #A5A5A5);
  }
  #FxSuperLinkButton[value="3"]:hover {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
      stop: 0 #4b4b4b,
      stop: 0.66 #4b4b4b,
      stop: 0.67 #CDCDCD,
      stop: 1 #CDCDCD);
    }
#FxSuperLinkButton[value="4"] {
  background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
    stop: 0 #A5A5A5,
    stop: 0.330000 #A5A5A5,
    stop: 0.340000 #4b4b4b,
    stop: 0.660000 #4b4b4b,
    stop: 0.670000 #A5A5A5,
    stop: 1 #A5A5A5);
  }
  #FxSuperLinkButton[value="4"]:hover {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
      stop: 0 #CDCDCD,
      stop: 0.330000 #CDCDCD,
      stop: 0.340000 #4b4b4b,
      stop: 0.660000 #4b4b4b,
      stop: 0.670000 #CDCDCD,
      stop: 1 #CDCDCD);
  }

#EffectToggleButton[displayValue="0"] {
    border: 1px solid #585858;
    font-size: 10px/12px;
    color: #585858;
    background-color: #0e0e0e;
    margin-right: 1px;
}

#EffectToggleButton[displayValue="1"] {
    border: 1px solid #585858;
    font-size: 10px/12px;
    color: #0e0e0e;
    background-color: #eece33;
    margin-right: 1px;
}

/* Library styling is hard */

QTableView, QTextBrowser, QTreeView {
  border: 1px solid #585858;
  /*font-size: 15px/18px;*/
  color: #cfb32c;
  background-color: #0f0f0f;
  alternate-background-color: #1a1a1a;

  selection-color: #cfb32c;
  selection-background-color: #725309;
}

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

/* checkbox in library "Played" column */
QTableView::indicator { width: 12px; height: 12px;}
QTableView::indicator:checked { background: url(skin:/style/style_checkbox_checked.png);}
QTableView::indicator:unchecked { background: url(skin:/style/style_checkbox_unchecked.png);}
QTableView::item:selected {
  color: #cfb32c;
  background-color: #725309;
}

/* BPM lock icon in the library "BPM" column. */
#LibraryBPMButton::indicator:checked {
  image: url(:/images/library/ic_library_checked.png);
}
#LibraryBPMButton::indicator:unchecked {
  image: url(:/images/library/ic_library_unchecked.png);
}
#LibraryBPMButton::item:selected {
  color: #cfb32c;
  background-color: #725309;
}

/* Button in library "Preview" column */
QPushButton#LibraryPreviewButton {
  width: 23px;
  height: 12px;
  background: transparent;
  border: 0px;
}
/*QPushButton#LibraryPreviewButton:focus {
  background-color: #725309;
}*/

QPushButton#LibraryPreviewButton:!checked{
  image: url(skin:/style/style_library_preview_play.png);
}
QPushButton#LibraryPreviewButton:checked{
  image: url(skin:/style/style_library_preview_pause.png);
}

QHeaderView {
  font-size: 13px/15px;
  color: #cfb32c;
  font-weight: bold;
  background-color: #0f0f0f;
}
QHeaderView::section {
  height: 18px;
  border: 1px solid #585858;
  border-left: 0px;
  padding-left: 1px;
  background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1,
    stop:0 #585858,
    stop:1 #0f0f0f);
}

/* QScrollbar styling is even harder */
QScrollBar:horizontal {
  border: 1px solid #585858;
  min-width: 12px;
  height: 15px;
  background: #1a1a1a;
  border-radius: 3px;
  padding: 1px;
}
QScrollBar:vertical {
  border: 1px solid #585858;
  min-height: 12px;
  width: 15px;
  background: #1a1a1a;
  border-radius: 3px;
  padding: 1px;
}
/* "add-page" and "sub-page" are the gutter of the scrollbar */
QScrollBar::add-page, QScrollBar::sub-page {
  min-width: 15px;
  min-height: 15px;
  border: 2px;
  background-color: #1a1a1a;
  border-radius: 3px;
}
QScrollBar::handle:horizontal {
  min-width: 25px;
  border-radius: 3px;
  border: 1px solid #725309;
  background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
    stop:0 #725309,
    stop:1 #412f05);
}
QScrollBar::handle:vertical {
  min-height: 25px;
  border-radius: 3px;
  border: 1px solid #725309;
  background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
    stop:0 #725309,
    stop:1 #412f05);
}
/* Turn off buttons */
QScrollBar::add-line:horizontal, QScrollBar::add-line:vertical {
  width: 0px;
  height: 0px;
  border: 0px solid white;
}
QScrollBar::sub-line:horizontal, QScrollBar::sub-line:vertical {
  width: 0px;
  height: 0px;
  border: 0px solid white;
}

/* transition time in Auto DJ tab */
QSpinBox:editable {
  background: transparent;
  color: #cfb32c;
}
QSpinBox {
  min-height: 20px;
  max-height: 20px;
  min-width: 40px;
  max-width: 40px;
}

/* library search bar */
WSearchLineEdit {
  padding: 2px;
  border: 1px solid #656565;
  background: #181818;
  color: #cfb32c;
}
WSearchLineEdit:focus {
  padding: 2px;
  border: 2px solid #FF6600;
  background: #0f0f0f;
}

#SidebarContainer{
    margin-top: -5px;
}

/* cover art */
WCoverArt {
  background: transparent;
  color: #ACACAC;
}

/* splitter between treeview and library */
#LibrarySplitter::handle {
  image: url(skin:/style/style_handle_unchecked.png);
  background-color: #1e1e1e;
}
#LibrarySplitter::handle:pressed,
#LibrarySplitter::handle:hover {
  image: url(skin:/style/style_handle_checked.png);
  background-color: #1e1e1e;
}
#LibrarySplitter::handle:horizontal {
  width: 5px;
  background-color: #0e0e0e;
}
#LibrarySplitter::handle:vertical {
  height: 5px;
  background-color: #0e0e0e;
}

/* splitter between treeview and coverart */
#CoverArtSplitter::handle {
  image: url(skin:/style/style_handle_horizontal_unchecked.png);
  background-color: #1e1e1e;
  }
  #CoverArtSplitter::handle:pressed,
  #CoverArtSplitter::handle:hover {
    image: url(skin:/style/style_handle_horizontal_checked.png);
    background-color: #1e1e1e;
  }
#CoverArtSplitter::handle:horizontal {
  width: 10px;
  background-color: #0e0e0e;
}
#CoverArtSplitter::handle:vertical {
  height: 10px;
  background-color: #0e0e0e;
}

/* Extra declaration for QRadioButton otherwise it shows up with wrong colors in Linux with Gnome */
QLabel, QRadioButton {
  background: transparent;
  color: #cfb32c;
}

/* Additional space for QRadionButtons and QLabels */
WLibrary QRadioButton, WLibrary QLabel {
  margin: 9px 3px 6px 3px;
}

/* Additional space for the first QRadionButton in the row */
WLibrary QRadioButton#radioButtonRecentlyAdded {
  margin: 9px 3px 6px 12px;
}

WLibrary QRadioButton::indicator:checked {
  background: url(skin:/buttons/btn_lib_radio_button_on.svg);
}

WLibrary QRadioButton::indicator:unchecked {
  background: url(skin:/buttons/btn_lib_radio_button_off.svg);
}

/* Additional space for the QPushButtons */
#DlgMissing > QPushButton,
#DlgHidden > QPushButton,
#DlgAutoDJ > QPushButton,
#DlgRecording > QPushButton,
#DlgAnalysis > QPushButton {
  margin: 5px 3px 5px 3px;
  padding: 3px 8px;
  min-width: 65px;
  border: 1px solid #585858;
  border-radius: 2px;
  color: #eeeeee;
}

/* Additional space for the first QPushButton in the row */
#DlgMissing > QPushButton#btnPurge,
#DlgHidden > QPushButton#btnUnhide,
#DlgAutoDJ > QPushButton#pushButtonAutoDJ,
#DlgRecording > QPushButton#pushButtonRecording,
#DlgAnalysis > QPushButton#pushButtonAnalyze {
  margin: 5px 12px 5px 3px;
}

/* Additional space for the last QPushButton in the row */
#DlgAutoDJ > QPushButton#pushButtonShuffle {
  margin: 5px 3px 5px 12px;
}

#DlgAutoDJ > QPushButton:checked {
  background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1,
    stop:0 #AD5700,
    stop:1 #DE7000);
}

#DlgRecording > QPushButton:checked {
  background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1,
    stop:0 #840600,
    stop:1 #AD0800);
}

#DlgMissing > QPushButton:!checked,
#DlgHidden > QPushButton:!checked,
#DlgAutoDJ > QPushButton:!checked,
#DlgRecording > QPushButton:!checked,
#DlgAnalysis > QPushButton:!checked {
  background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1,
    stop:0 #6F7176,
    stop:1 #626468);
}

/* Spacing between treeview and searchbar */
QTreeView {
  margin: 10px 0px 0px 0px;
}

/* triangle for closed/opened branches in treeview */
QTreeView {
  show-decoration-selected: 0;
  background-color: #151515;
}
/*  Suppresses that selected sidebar items branch indicator shows wrong color when out of focus ; lp:880588 */
QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
  border-image: none;
  image: url(skin:/style/style_branch_closed.png);
  background-color:#0f0f0f;
}
QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings {
  border-image: none;
  image: url(skin:/style/style_branch_open.png);
  background-color:#0f0f0f;
}
QTreeView::branch:has-children:!has-siblings:closed:selected,
QTreeView::branch:closed:has-children:has-siblings:selected {
  border-image: none;
  image: url(skin:/style/style_branch_closed.png);
  background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1,
    stop:0 #585858,
    stop:1 #0f0f0f);
}
QTreeView::branch:open:has-children:!has-siblings:selected,
QTreeView::branch:open:has-children:has-siblings:selected {
  border-image: none;
  image: url(skin:/style/style_branch_open.png);
  background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1,
    stop:0 #585858,
    stop:1 #0f0f0f);
}
QTreeView::item:selected {
  color: #cfb32c;
  background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1,
    stop:0 #585858,
    stop:1 #0f0f0f);
}

QToolTip {
  background-color: #0f0f0f;
  color: #cfb32c;
  padding: 3px;
  border: 1px solid #333;
  border-radius: 2px;
}
