[buttons] Add an opacity while a disabled and fix transition

.tetra-button (@button) {
  @bgColor: ~"";
  @hoverColor: ~"";
  @borderColor: ~"";
  @textColor: ~"";
  @disabledTextColor: ~"";
  .set-color (@button) when (@button = default) {
    @bgColor : @buttonDefaultBgColor;
    @hoverColor: @buttonDefaultHoverColor;
    @borderColor: @buttonDefaultBorderColor;
    @textColor:   @buttonDefaultTextColor;
    @disabledTextColor: @buttonDefaultDisabledTextColor;
  }
  .set-color (@button) when (@button = primary) {
    @bgColor : @buttonPrimaryBgColor;
    @hoverColor: @buttonPrimaryHoverColor;
    @borderColor: @buttonPrimaryBorderColor;
    @textColor:   @buttonPrimaryTextColor;
    @disabledTextColor: @buttonPrimaryDisabledTextColor;
  }
  .set-color (@button) when (@button = secondary) {
    @bgColor : @buttonSecondaryBgColor;
    @hoverColor: @buttonSecondaryHoverColor;
    @borderColor: @buttonSecondaryBorderColor;
    @textColor:   @buttonSecondaryTextColor;
    @disabledTextColor: @buttonSecondaryDisabledTextColor;
  }
  .set-color (@button) when (@button = tertiary) {
    @bgColor : @buttonTerBgColor;
    @hoverColor: @buttonTerHoverColor;
    @borderColor: @buttonTerBorderColor;
    @textColor:   @buttonTerTextColor;
    @disabledTextColor: @buttonTerDisabledTextColor;
  }
  .set-color(@button);
  color: @textColor;
  > span, > input, > button { color: @textColor; }
  border: 1px solid @borderColor;
  background: @bgColor;
  .vicon {
    color: @textColor;
  }
  &:hover,
  &:focus {
    background: @hoverColor;
    color: @textColor;
    border-color: @hoverColor;
    .vicon, span {
      color: @textColor;
    }
  }
  &:active {
    background: @bgColor;
  }
  &.btn-loading {
    background: @bgColor;
    border-color: @bgColor;
    color: @disabledTextColor;
    > span, .vicon {
      color: @disabledTextColor;
    }
  }

  &.btn-disabled,
  &.btn-disabled:hover,
  &.btn-disabled:focus {
    background: @bgColor;
    border-color: @bgColor;
    color: @disabledTextColor;
    opacity: 0.5;
    color: white;
    > span, .vicon {
      color: @disabledTextColor;
    }
  }

  &.btn-inactive,
  &.btn-inactive:hover,
  &.btn-loading:focus {
    border-color: @borderColor;
    background-color: @bgColor;
  }
}

.alt-tetra-button (@button) {
  @bgColor: ~"";
  @hoverColor: ~"";
  @hoverTextColor: ~"";
  @borderColor: ~"";
  @textColor: ~"";
  @disabledTextColor: ~"";
  .set-color (@button) when (@button = default) {
    @bgColor : @altButtonDefaultBgColor;
    @hoverColor: @altButtonDefaultHoverColor;
    @hoverTextColor : @altButtonDefaultHoverTextColor;
    @borderColor: @altButtonDefaultBorder;
    @textColor:   @altButtonDefaultTextColor;
    @disabledTextColor: @altButtonDefaultDisabledTextColor;
  }
  .set-color (@button) when (@button = primary) {
    @bgColor : @altButtonPrimaryBgColor;
    @hoverColor: @altButtonPrimaryHoverColor;
    @hoverTextColor : @altButtonPrimaryHoverTextColor;
    @borderColor: @altButtonPrimaryBorder;
    @textColor:   @altButtonPrimaryTextColor;
    @disabledTextColor: @altButtonPrimaryDisabledTextColor;
  }
  .set-color (@button) when (@button = secondary) {
    @bgColor : @altButtonSecondaryBgColor;
    @hoverColor: @altButtonSecondaryHoverColor;
    @hoverTextColor : @altButtonSecondaryHoverTextColor;
    @borderColor: @altButtonSecondaryBorder;
    @textColor:   @altButtonSecondaryTextColor;
    @disabledTextColor: @altButtonSecondaryDisabledTextColor;
  }
  .set-color (@button) when (@button = tertiary) {
    @bgColor : @altButtonTerBgColor;
    @hoverColor: @altButtonTerHoverColor;
    @hoverTextColor : @altButtonTerHoverTextColor;
    @borderColor: @altButtonTerBorder;
    @textColor:   @altButtonTerTextColor;
    @disabledTextColor: @altButtonTerDisabledTextColor;
  }
  .set-color (@button) when (@button = wht) {
    @bgColor : @altButtonWhiteBgColor;
    @hoverColor: @altButtonWhiteHoverColor;
    @hoverTextColor : @altButtonWhiteHoverTextColor;
    @borderColor: @altButtonWhiteBorder;
    @textColor:   @altButtonWhiteTextColor;
    @disabledTextColor: @altButtonWhiteDisabledTextColor;
  }
  .set-color(@button);
  color: @textColor;
  > span, > input, > button { color: @textColor; }
  border: 1px solid @borderColor;
  background: @bgColor;
  .vicon {
    color: @textColor;
  }
  &:hover,
  &:focus {
    background: @hoverColor;
    color: @hoverTextColor;
    border-color : @borderColor;
    .vicon, span {
      color: @hoverTextColor;
    }
  }
  &.btn-alt:active {
    background: darken(@hoverColor, 10%);
    border-color: darken(@hoverColor, 10%);
    color:@hoverTextColor;
    > span, .vicon{
      color:@hoverTextColor;
    }
  }
  &.btn-loading {
    background: @bgColor;
    border-color: @borderColor;
    color: @disabledTextColor;
    > span, .vicon {
      color: @disabledTextColor;
    }
  }

  &.btn-disabled {
    background: lighten(@bgColor, 5%);
    border-color: lighten(@disabledTextColor, 5%);
    color: @disabledTextColor;
    > span, .vicon {
      color: @disabledTextColor;
    }
  }

  &.btn-inactive,
  &.btn-inactive:hover,
  &.btn-loading:focus,
  &.btn-loading:hover {
    border-color: @borderColor;
    background-color: @bgColor;
  }
}

.btn, .core-form .btn {
  transition-property: border, background, color;
  transition-duration: .3s;

  // General Properties
  @_padding:           4px 15px;
  @_borderRadius:        @borderRadiusM;

  // Rules
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  padding: @_padding;
  .border-radius(@buttonDefaultBorderRadius);
  position: relative;
  text-decoration: none;
  text-shadow: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  box-shadow: none;
  .user-select(none);

  &:hover, &:focus {
    text-decoration: none;
  }
  &:active, &.active {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
  }

  // Support for old layout
  span {
    input, button {
      display:inline;
      border:none;
      padding:0;
      line-height: @baseLineHeight;
      background:none;
      text-align:center;
      margin:0;
      cursor:pointer;
      font-family:inherit;
      font-size:inherit !important;
    }
    img {
      vertical-align: text-top;
    }
  }

  // Icon font

  .vicon.btn-icon-before,
  .vicon.btn-icon-after {
    margin-top:-1px;
    font-size: 7px;
  }
  .vicon.btn-icon-before {
    .margin-left(@rtl, -9px);
    .margin-right(@rtl, 0);
  }
  .vicon.btn-icon-after {
    .margin-left(@rtl, 0);
    .margin-right(@rtl, -9px);
  }
}

.btn-default,
.secEventsAction,
.core-form .btn-default {
  .tetra-button(default);
}

.btn-primary,
.socialAction,
.eventsAction,
.core-form .btn-primary {
  .tetra-button(primary);
}

.btn-secondary,
.core-form .btn-secondary {
  .tetra-button(secondary);
}

.btn-tertiary {
  .tetra-button(tertiary);
}

.btn-default-alt {
  .alt-tetra-button(default);
}
.btn-primary-alt {
  .alt-tetra-button(primary);
}
.btn-secondary-alt {
  .alt-tetra-button(secondary);
}
.btn-tertiary-alt {
  .alt-tetra-button(tertiary);
}
.btn-white{
  .alt-tetra-button(wht);
}

.btn-small, .core-form .btn-small {
  padding: 2px @spacingS;
  .border-radius(@buttonSmallBorderRadius);
  font-size: 11px;

  .global-icon {
    margin: -1px 0;
  }

}

.btn-large, .core-form .btn-large {
  padding: 7px @spacingM;
  .border-radius(@buttonLargeBorderRadius);
  font-size: 13px;
}

.btn-lead, .core-form .btn-lead {
  position: relative;
  z-index: 2;
  padding: @spacingM @spacingL;
  font-size: 16px;
  .border-radius(@buttonLeadBorderRadius);
}
.btn-fat, .core-form .btn-fat{
  position: relative;
  z-index: 2;
  padding: @spacingL @spacingXl;
  font-size: 18px;
  .border-radius(@buttonFatBorderRadius);
}

.btn-desc {
  display: inline-block;

  dt {
    text-align: center;
    font-size: (@baseFontSize * .9);
    color: @gray;
  }
}

.btn-inactive,
.btn-inactive:hover,
.btn-loading:focus,
.btn-disabled,
.btn-disabled:hover,
.btn-disabled:focus,
.btn-disabled:active,
.btn-loading,
.btn-loading:hover,
.btn-loading:focus,
.btn-loading:active {
  cursor: default;
}

.btn-loading,
.btn-loading:hover,
.btn-loading:focus,
.btn-loading:active {
  span {
   display: inline-block;
   overflow: hidden;
   height: 0;
   padding: 1em 0 0 0;
   background: transparent url("@{img-buttons-dir}/loaders/default.gif") no-repeat 50% 0.3em;
  }
}

.btn-append {
  .border-radius-left(@rtl, 0);
  .border-radius-right(@rtl, @buttonDefaultBorderRadius);
  .padding-right(@rtl, 4px);
  .padding-left(@rtl, 0);
  .margin-left(@rtl, -@buttonDefaultBorderRadius*1.2);
  &.btn-small {
    .border-radius-right(@rtl, @buttonSmallBorderRadius);
    .margin-left(@rtl, -@buttonSmallBorderRadius*1.2);
  }
  &.btn-large {
    .border-radius-right(@rtl, @buttonLargeBorderRadius);
    .margin-left(@rtl, -@buttonLargeBorderRadius*1.2);
  }
  &.btn-lead {
    .border-radius-right(@rtl, @buttonLeadBorderRadius);
    .margin-left(@rtl, -@buttonLeadBorderRadius*1.2);
  }
  &.btn-fat {
    .border-radius-right(@rtl, @buttonFatBorderRadius);
    .margin-left(@rtl, -@buttonFatBorderRadius*1.2);
  }
}

.btn-icon {
  padding: 10px 4px 6px;
  .vicon {
    font-size: 12px;
    margin: 0;
  }
}

.btn-link {
  background: none;
  color: @linkColor;
  text-decoration: none;
  cursor: pointer;
  &:hover,
  &:focus {
    text-decoration: underline;
    color: @linkColorHover;
  }
}

.btn-pagination {
  .padding (@rtl, (@spacingXs + 1), 13px, (@spacingXs + 1), 13px);
  font-size: (@baseFontSize + 3);
  color: @grayDark;
  background: transparent;

  .vicon {
    color: @grayDark;

    &.btn-icon-after,
    &.btn-icon-before {
      position: relative;
      top: -1px;
    }

    &.btn-icon-after {
      .margin (@rtl, 0, -@spacingS, 0, @spacingXs);
    }
    &.btn-icon-before {
      .margin (@rtl, 0, @spacingXs, 0, -@spacingS);
    }
  }

  &:hover,
  &:focus {
    background: tint(@linkColor, 20%);
    color: @white;
    box-shadow: none;

    .vicon {
      color: @white;
    }
  }

  &:active {
    background: @linkColor;
  }
}

.tetra-button (@button) {
  @bgColor: ~"";
  @hoverColor: ~"";
  @borderColor: ~"";
  @textColor: ~"";
  @disabledTextColor: ~"";
  .set-color (@button) when (@button = default) {
    @bgColor : @buttonDefaultBgColor;
    @hoverColor: @buttonDefaultHoverColor;
    @borderColor: @buttonDefaultBorderColor;
    @textColor:   @buttonDefaultTextColor;
    @disabledTextColor: @buttonDefaultDisabledTextColor;
  }
  .set-color (@button) when (@button = primary) {
    @bgColor : @buttonPrimaryBgColor;
    @hoverColor: @buttonPrimaryHoverColor;
    @borderColor: @buttonPrimaryBorderColor;
    @textColor:   @buttonPrimaryTextColor;
    @disabledTextColor: @buttonPrimaryDisabledTextColor;
  }
  .set-color (@button) when (@button = secondary) {
    @bgColor : @buttonSecondaryBgColor;
    @hoverColor: @buttonSecondaryHoverColor;
    @borderColor: @buttonSecondaryBorderColor;
    @textColor:   @buttonSecondaryTextColor;
    @disabledTextColor: @buttonSecondaryDisabledTextColor;
  }
  .set-color (@button) when (@button = tertiary) {
    @bgColor : @buttonTerBgColor;
    @hoverColor: @buttonTerHoverColor;
    @borderColor: @buttonTerBorderColor;
    @textColor:   @buttonTerTextColor;
    @disabledTextColor: @buttonTerDisabledTextColor;
  }
  .set-color(@button);
  color: @textColor;
  > span, > input, > button { color: @textColor; }
  border: 1px solid @borderColor;
  background: @bgColor;
  .vicon {
    color: @textColor;
  }
  &:hover,
  &:focus {
    background: @hoverColor;
    color: @textColor;
    border-color: @hoverColor;
    .vicon, span {
      color: @textColor;
    }
  }
  &:active {
    background: @bgColor;
  }
  &.btn-loading {
    background: @bgColor;
    border-color: @bgColor;
    color: @disabledTextColor;
    > span, .vicon {
      color: @disabledTextColor;
    }
  }

  &.btn-disabled {
    background: lighten(@bgColor, 15%);
    border-color: lighten(@bgColor, 15%);
    color: @disabledTextColor;
    > span, .vicon {
      color: @disabledTextColor;
    }
  }

  &.btn-inactive,
  &.btn-inactive:hover,
  &.btn-loading:focus {
    border-color: @borderColor;
    background-color: @bgColor;
  }
}

.alt-tetra-button (@button) {
  @bgColor: ~"";
  @hoverColor: ~"";
  @hoverTextColor: ~"";
  @borderColor: ~"";
  @textColor: ~"";
  @disabledTextColor: ~"";
  .set-color (@button) when (@button = default) {
    @bgColor : @altButtonDefaultBgColor;
    @hoverColor: @altButtonDefaultHoverColor;
    @hoverTextColor : @altButtonDefaultHoverTextColor;
    @borderColor: @altButtonDefaultBorder;
    @textColor:   @altButtonDefaultTextColor;
    @disabledTextColor: @altButtonDefaultDisabledTextColor;
  }
  .set-color (@button) when (@button = primary) {
    @bgColor : @altButtonPrimaryBgColor;
    @hoverColor: @altButtonPrimaryHoverColor;
    @hoverTextColor : @altButtonPrimaryHoverTextColor;
    @borderColor: @altButtonPrimaryBorder;
    @textColor:   @altButtonPrimaryTextColor;
    @disabledTextColor: @altButtonPrimaryDisabledTextColor;
  }
  .set-color (@button) when (@button = secondary) {
    @bgColor : @altButtonSecondaryBgColor;
    @hoverColor: @altButtonSecondaryHoverColor;
    @hoverTextColor : @altButtonSecondaryHoverTextColor;
    @borderColor: @altButtonSecondaryBorder;
    @textColor:   @altButtonSecondaryTextColor;
    @disabledTextColor: @altButtonSecondaryDisabledTextColor;
  }
  .set-color (@button) when (@button = tertiary) {
    @bgColor : @altButtonTerBgColor;
    @hoverColor: @altButtonTerHoverColor;
    @hoverTextColor : @altButtonTerHoverTextColor;
    @borderColor: @altButtonTerBorder;
    @textColor:   @altButtonTerTextColor;
    @disabledTextColor: @altButtonTerDisabledTextColor;
  }
  .set-color (@button) when (@button = wht) {
    @bgColor : @altButtonWhiteBgColor;
    @hoverColor: @altButtonWhiteHoverColor;
    @hoverTextColor : @altButtonWhiteHoverTextColor;
    @borderColor: @altButtonWhiteBorder;
    @textColor:   @altButtonWhiteTextColor;
    @disabledTextColor: @altButtonWhiteDisabledTextColor;
  }
  .set-color(@button);
  color: @textColor;
  > span, > input, > button { color: @textColor; }
  border: 1px solid @borderColor;
  background: @bgColor;
  .vicon {
    color: @textColor;
  }
  &:hover,
  &:focus {
    background: @hoverColor;
    color: @hoverTextColor;
    border-color : @borderColor;
    .vicon, span {
      color: @hoverTextColor;
    }
  }
  &.btn-alt:active {
    background: darken(@hoverColor, 10%);
    border-color: darken(@hoverColor, 10%);
    color:@hoverTextColor;
    > span, .vicon{
      color:@hoverTextColor;
    }
  }
  &.btn-loading {
    background: @bgColor;
    border-color: @borderColor;
    color: @disabledTextColor;
    > span, .vicon {
      color: @disabledTextColor;
    }
  }

  &.btn-disabled {
    background: lighten(@bgColor, 5%);
    border-color: lighten(@disabledTextColor, 5%);
    color: @disabledTextColor;
    > span, .vicon {
      color: @disabledTextColor;
    }
  }

  &.btn-inactive,
  &.btn-inactive:hover,
  &.btn-loading:focus,
  &.btn-loading:hover {
    border-color: @borderColor;
    background-color: @bgColor;
  }
}

.btn, .core-form .btn {
    .transition(background 0.3s);
    .transition(color 0.3s);
  // General Properties
  @_padding:           4px 15px;
  @_borderRadius:        @borderRadiusM;

  // Rules
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  padding: @_padding;
  .border-radius(@buttonDefaultBorderRadius);
  position: relative;
  text-decoration: none;
  text-shadow: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  box-shadow: none;
  .user-select(none);

  &:hover, &:focus {
    text-decoration: none;
  }
  &:active, &.active {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
  }

  // Support for old layout
  span {
    input, button {
      display:inline;
      border:none;
      padding:0;
      line-height: @baseLineHeight;
      background:none;
      text-align:center;
      margin:0;
      cursor:pointer;
      font-family:inherit;
      font-size:inherit !important;
    }
    img {
      vertical-align: text-top;
    }
  }

  // Icon font

  .vicon.btn-icon-before,
  .vicon.btn-icon-after {
    margin-top:-1px;
    font-size: 7px;
  }
  .vicon.btn-icon-before {
    .margin-left(@rtl, -9px);
    .margin-right(@rtl, 0);
  }
  .vicon.btn-icon-after {
    .margin-left(@rtl, 0);
    .margin-right(@rtl, -9px);
  }
}

.btn-default,
.secEventsAction,
.core-form .btn-default {
  .tetra-button(default);
}

.btn-primary,
.socialAction,
.eventsAction,
.core-form .btn-primary {
  .tetra-button(primary);
}

.btn-secondary,
.core-form .btn-secondary {
  .tetra-button(secondary);
}

.btn-tertiary {
  .tetra-button(tertiary);
}

.btn-default-alt {
  .alt-tetra-button(default);
}
.btn-primary-alt {
  .alt-tetra-button(primary);
}
.btn-secondary-alt {
  .alt-tetra-button(secondary);
}
.btn-tertiary-alt {
  .alt-tetra-button(tertiary);
}
.btn-white{
  .alt-tetra-button(wht);
}

.btn-small, .core-form .btn-small {
  padding: 2px @spacingS;
  .border-radius(@buttonSmallBorderRadius);
  font-size: 11px;

  .global-icon {
    margin: -1px 0;
  }

}

.btn-large, .core-form .btn-large {
  padding: 7px @spacingM;
  .border-radius(@buttonLargeBorderRadius);
  font-size: 13px;
}

.btn-lead, .core-form .btn-lead {
  position: relative;
  z-index: 2;
  padding: @spacingM @spacingL;
  font-size: 16px;
  .border-radius(@buttonLeadBorderRadius);
}
.btn-fat, .core-form .btn-fat{
  position: relative;
  z-index: 2;
  padding: @spacingL @spacingXl;
  font-size: 18px;
  .border-radius(@buttonFatBorderRadius);
}

.btn-desc {
  display: inline-block;

  dt {
    text-align: center;
    font-size: (@baseFontSize * .9);
    color: @gray;
  }
}

.btn-inactive,
.btn-inactive:hover,
.btn-loading:focus,
.btn-disabled,
.btn-disabled:hover,
.btn-disabled:focus,
.btn-disabled:active,
.btn-loading,
.btn-loading:hover,
.btn-loading:focus,
.btn-loading:active {
  cursor: default;
}

.btn-loading,
.btn-loading:hover,
.btn-loading:focus,
.btn-loading:active {
  span {
   display: inline-block;
   overflow: hidden;
   height: 0;
   padding: 1em 0 0 0;
   background: transparent url("@{img-buttons-dir}/loaders/default.gif") no-repeat 50% 0.3em;
  }
}

.btn-append {
  .border-radius-left(@rtl, 0);
  .border-radius-right(@rtl, @buttonDefaultBorderRadius);
  .padding-right(@rtl, 4px);
  .padding-left(@rtl, 0);
  .margin-left(@rtl, -@buttonDefaultBorderRadius*1.2);
  &.btn-small {
    .border-radius-right(@rtl, @buttonSmallBorderRadius);
    .margin-left(@rtl, -@buttonSmallBorderRadius*1.2);
  }
  &.btn-large {
    .border-radius-right(@rtl, @buttonLargeBorderRadius);
    .margin-left(@rtl, -@buttonLargeBorderRadius*1.2);
  }
  &.btn-lead {
    .border-radius-right(@rtl, @buttonLeadBorderRadius);
    .margin-left(@rtl, -@buttonLeadBorderRadius*1.2);
  }
  &.btn-fat {
    .border-radius-right(@rtl, @buttonFatBorderRadius);
    .margin-left(@rtl, -@buttonFatBorderRadius*1.2);
  }
}

.btn-icon {
  padding: 10px 4px 6px;
  .vicon {
    font-size: 12px;
    margin: 0;
  }
}

.btn-link {
  background: none;
  color: @linkColor;
  text-decoration: none;
  cursor: pointer;
  &:hover,
  &:focus {
    text-decoration: underline;
    color: @linkColorHover;
  }
}

.btn-pagination {
  .padding (@rtl, (@spacingXs + 1), 13px, (@spacingXs + 1), 13px);
  font-size: (@baseFontSize + 3);
  color: @grayDark;
  background: transparent;

  .vicon {
    color: @grayDark;

    &.btn-icon-after,
    &.btn-icon-before {
      position: relative;
      top: -1px;
    }

    &.btn-icon-after {
      .margin (@rtl, 0, -@spacingS, 0, @spacingXs);
    }
    &.btn-icon-before {
      .margin (@rtl, 0, @spacingXs, 0, -@spacingS);
    }
  }

  &:hover,
  &:focus {
    background: tint(@linkColor, 20%);
    color: @white;
    box-shadow: none;

    .vicon {
      color: @white;
    }
  }

  &:active {
    background: @linkColor;
  }
}


[FIX] Trade advanced on mobile (RT-3525)

Stack trade widgets one on top of another on small displays

#t-trade {

  .orderbook-wrapper {
    position: relative;
    #orderbook_loader {
      color: @midgray;
      text-align: center;
      position: absolute;
      top: 200px;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
 }

  .orderbook-hide {
    font-size: 85%;
  }

  @bg: @white;

  .btn-group {
    margin-bottom: -1px;

    .btn {
      width: 120px;
    }
    .btn:first-child {
      .border-radius(0, 0, 0, 4px);
    }
    .btn:last-child {
      .border-radius(4px, 0, 0, 0);
    }
  }

  #add_button, #cancel_button {
    float: right;
  }

  ul.inline {
    margin: 0;
    padding: 0;

    .label {
      color: @darkgray;
      text-align: left;
    }
    .value {
      font-weight: bold;
    }

    li {
      display: inline-block;
      font-size: 12px;

      .icon {
        margin: 0 0 0 3px;
      }
      .up {
        color: @darkgreen;
      }
      .down {
        color: @midred;
      }
      @media (max-width: @screen-xs-max) {
        padding-left: 0;
      }
       @media (max-width: @screen-sm-max) {
        padding-left: 0;
      }
    }

    &.issuers {
      .label {
        width: 120px;
      }
      .value {
        margin-right: 15px;
        @media (max-width: @screen-xs-max) {
          margin-right: 0;
          padding-right: 15px;
        }
      }
    }
  }

  .issuerSelector, .message-select-issuer {
    padding: 15px;
    border: 1px solid darken(@bg, 10%);
    border-top: none;
    border-bottom: none;
    background: @bg;
  }

  .settings {
    padding: 15px;
    border: 1px solid darken(@bg, 10%);
    border-bottom: none;
    background-color: darken(@bg, 2%);
    .issuers-wrapper {
      display: inline-block;
    }
    button {
      &.btn-block {
        outline: none;
      }
    }
  }

  .message-select-issuer {
    line-height: 25px;
    font-size: 16px;
    font-family: 'OpenSansRegular';
    text-align: center;

    border-bottom: 1px solid darken(@bg, 10%);
  }

  .ticker {
    margin: 0 0 30px;
    padding: 5px 15px;
    border: 1px solid darken(@bg, 10%);
    border-top: none;
    background-color: darken(@bg, 5%);
    list-style-type: none;
    @media (max-width: @screen-xs-max) {
      font-size: 11px;
    }
    .value {
      font-weight: bold;
    }
  }

  .send-widgets {
    form {
      .input-group {
        border-spacing: 0;
      }
    }
  }

  .slash {
    padding-top: 25px;
    font-size: 24px;
  }

  .order-type {
    p.literal {
      margin: 0;
      line-height: 48px;
    }
  }

  .trade-widget {
    // min-height: 430px;
    padding: 15px;
    border: 1px solid darken(@bg, 10%);
    background: darken(@bg, 2%);
    word-break: break-word;

    @media (max-width: @screen-sm-max) {
      margin-bottom: 18px;
    }

    .head {
      margin: -15px -15px 15px -15px;
      padding: 10px 15px;
      background-color: darken(@bg, 5%);
      font: 18px 'OpenSansRegular';

      .available {
        font-size: 11px;
        color: @darkgray;
        padding-left: 10px;
        .amount {
          font-weight: bold;
          &:after {
            content: " ";
          }
        }
      }
    }

    .input-group {
      margin: 0 0 20px;
    }
    .errorGroup {
      position: relative;
    }
    .order-values {
      .value-field {
        .input-group {
          width: 100%;
          .input-group-addon {
            width: 33.3333333%;
            @media (max-width: @screen-xs-max) {
              width: 25%;
            }
          }
        }
      }
    }
  }

  .mode-form {
    .order-values {
      .sign {
        text-align: center;
        margin: 40px 0 0 0;
      }
      .error {
        margin-bottom: 0;
        height: 0;
        overflow: visible;
      }

      .input-group-addon {
        color: @white;
        background-color: @midgray;
        padding: 0 10px;
        min-width: 70px;

        .issuer {
          font-size: 10px;
        }
      }
    }
    .message {
      color: @midgreen;
      height: 40px;
      line-height: 20px;
    }
    .btns-row {
      .btns-wrapper {
        float: none;
        margin: 7px auto;
      }
    }
  }

  .mode-confirm {
    text-align: left;
    font-family: OpenSansLight;
    .alert {
      margin-bottom: 0;
    }
    .title {
      margin: 30px 0;
    }
    label {
      font-size: 18px;
      margin-bottom: 0
    }
    sub {
      bottom: 0;
      font-size: 14px;
      font-family: OpenSansRegular;
    }
    .amount_feedback {
      font-size: 18px;
      margin: 10px 0 0 0;
      .ammount-currency {
        font-size: 22px;
      }
    }

    .dest_feedback {
      font-size: 30px;
      margin: 0 0 10px 0;
      .each-price {
        font-size: 22px;
      }
    }

    .rate_feedback {
      margin: 0 0 20px 0;
      font-size: 18px;

      .pair {
        margin-left: 5px;
        font-size: 14px;
      }
      .max-value {
        .rate {
          font-size: 22px;
        }
      }
    }
    .confirm-text {
      font-size: 14px;
      margin-bottom: 5px;
    }
  }

  .widget-myorders-table();

  .toggle {
    margin-left: 10px;
    color: @midblue;
    cursor: pointer;
  }

  .toggle:hover {
    text-decoration: underline;
  }
  .orderlists {
    .transition-duration(0.5s);
  }
  .listings {
    padding: 0 15px;
    border: 1px solid darken(@bg, 10%);
    background: @bg;

    transition: 0.2s;
    max-height: 0;

    .my {
      .head {
        font-weight: bold;
      }
      .row:first-child {
        border-top: none;
      }
      .row {
        border-top: 1px solid @lightgray;

        &:nth-child(even) {
          background-color: darken(@bg, 2%);
        }

        & > div {
          padding: 8px;
          border-right: 1px solid @lightgray;
        }

        & > div:last-child {
          border-right: none;
        }

        .issuer {
          color: lighten(@black,70%);
          font-size: 11px;
        }

        @media (max-width: @screen-xs-max) {
          border: none;
          padding: 4px;

          & > div {
            padding: 4px;
            border: none;
          }

          div:before {
            display: inline-block;
            width: 100px;
            font-weight: bold;
            text-transform: uppercase;
            content: " "attr(data-label);
          }
        }

        .align-right {
          text-align: right;
        }

        .btn-link {
          padding-left: 0px;
          padding-right: 0px;
        }

        .btn-link[disabled] {
          text-decoration: none;
          color: #999999;
        }

        .form-control {
          font-size: 14px;
          height: 36px;
          padding: 5px 10px;
        }

        .form-control.changed {
          background-color: #fcf8e3;
        }

        .input-group {
          margin-bottom: 10px;
        }

        .input-group .input-group-addon.inline-inputs-group {
          text-align: center;
          font-size: 10px;
          line-height: 1;
          padding: 10px;
          @media(max-width: @screen-xs-max) {
            &:before {
              display: block;
            }
          }
        }

        .action {
          padding-left: 0;
          padding-right: 0;
        }
      }
    }

    .emptyMessage {
      margin: 10px 0;
    }

    .alert {
      line-height: 1.428571429;
      padding: 8px;
      float: left;
    }
  }

  .alert {
    line-height: 1;
  }

  .alert-danger .dismiss {
    margin:0 5px;
    color:darken(@midred, 10%);
  }

  .alert-danger .dismiss:hover {
    color:darken(@midred, 30%);
  }

  .listings.offers {
    max-height: 1000px;
    overflow: auto;
  }
  .orderlists {
    opacity: 1;
    &.loading {
      opacity: 0;
    }
  }
  .listings.orders {
    max-height: 9999px;
    overflow: auto;
    min-height: 720px;
  }

  .orderbookupdate {
    padding-top: 15px;
    line-height: 68px;
    .orderbook-title {
      font-family: OpenSansSemibold, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      font-weight: normal;
      text-transform: uppercase;
      small {
        text-transform: none;
      }
    }
    .last-update {
      text-align: right;
    }
    @media (max-width: @screen-xs-max) {
      line-height: 34px;
      padding-bottom: 0;
      .last-update {
        text-align: left;
      }
      h3 {
        margin-bottom: 0;
        margin-top: 5px;
      }
    }
  }

  .orderbook {
    @media (max-width: @screen-xs-max) {
      font-size: 10px;
    }
    .title {
      margin: 0 -15px 15px -15px;
      font: bold 15px 'OpenSansRegular';
      text-transform: uppercase;
      background: darken(@bg, 5%);
      padding: 10px;
      text-align: center;
    }
    .head {
      font: 15px 'OpenSansRegular';
      margin-bottom: 10px;

      .currency {
        color: @darkgray;
      }
    }

    .my {
      font-weight: bold;
      color: @darkgreen;

      .insig {
        color: @darkgreen;
        font-weight: normal;
      }

      .delete {
        margin: 0 10px 0 0;

        text-decoration: none;
      }
    }

    .new {
      font-weight: normal;
      color: @black;
      .animation-mixin(newfadeout 5s ease-out 0s);
    }

    .changed {
      font-weight: normal;
      color: @black;
      .animation-mixin(changefadeout 5s ease-out 0s);
    }

    .keyframes-mixin(newfadeout, {
        color: @midgreen;
        font-weight: bold;
      }, {
        color: @black;
        font-weight: normal;
    });
    .keyframes-mixin(changefadeout, {
        color: @midred;
        font-weight: bold;
      }, {
        color: @black;
        font-weight: normal;
    });

    @media (min-width: @screen-md-max) {
      .bids {
        border-right: 1px solid darken(@bg, 20%);
      }
      .asks {
        border-left: 1px solid darken(@bg, 20%);
      }
    }

    @media (max-width: @screen-md-max) {
      .asks {
        border-top: 6px solid @midgray;
        padding-top: 10px;
      }
    }

    .bids, .asks {
      .row {
        padding: 4px 0;
        text-align: right;

        .rpamount {
          font-size: 14px;
          padding-left: 5px;
          padding-right: 5px;
        }

        .sum, .size, .price {
          padding-left: 5px;
          padding-right: 5px;
        }

        &:nth-child(odd) {
          background-color: darken(@bg, 5%);
        }
      }

      background-color: darken(@bg, 2%);
    }

    a {
      color: inherit;
    }

    .message {
      text-align: center;
      padding-bottom: 20px;
    }

    .issuer {
      font-size: 10px;
      color: @darkgray;
    }
  }

  .cancelling {
    color: lighten(@black,70%);

    a {
      color: lighten(@black,70%);
    }

    .cancelling.changed {
      background-color: #fcf8e3;
    }

    .action a {
      display: none;
    }
  }

  .btn-cancel-order {
    color: @midred;
  }

}

.t-trade header nav ul > .active#nav-advanced > a:after {
  border-bottom-color: @lightgray;
}

.table {
  display: table;
  @media (max-width: @screen-sm-max) {
    display: block;
  }

  margin: 0;
  border-collapse: separate;
  border-spacing: 15px 0px;
  table-layout: fixed;
  .grid {
    @media (min-width: @screen-sm-max) {
      margin-left: -30px;
      margin-right: -30px;
    }
  }
  .table-row {
    display: table-row;
    @media (max-width: @screen-sm-max) {
      display: block;
    }
    .col-cell {
      display: table-cell;
      @media (max-width: @screen-sm-max) {
        display: block;
      }
      vertical-align: top;
      float: none;
    }
  }
}

.animation-mixin(@arguments) {
  -moz-animation: @arguments;
  -webkit-animation: @arguments;
  -o-animation: @arguments;
  animation: @arguments;
}

.keyframes-mixin(@name, @fromRules, @toRules) {
    @-moz-keyframes ~'@{name}' { 0% { @fromRules(); } 100% { @toRules(); } }
    @-o-keyframes ~'@{name}' { 0% { @fromRules(); } 100% { @toRules(); } }
    @-webkit-keyframes ~'@{name}' { 0% { @fromRules(); } 100% { @toRules(); } }
            @keyframes ~'@{name}' { 0% { @fromRules(); } 100% { @toRules(); } }
}

#t-trade {

  .orderbook-wrapper {
    position: relative;
    #orderbook_loader {
      color: @midgray;
      text-align: center;
      position: absolute;
      top: 200px;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
 }

  .orderbook-hide {
    font-size: 85%;
  }

  @bg: @white;

  .btn-group {
    margin-bottom: -1px;

    .btn {
      width: 120px;
    }
    .btn:first-child {
      .border-radius(0, 0, 0, 4px);
    }
    .btn:last-child {
      .border-radius(4px, 0, 0, 0);
    }
  }

  #add_button, #cancel_button {
    float: right;
  }

  ul.inline {
    margin: 0;
    padding: 0;

    .label {
      color: @darkgray;
      text-align: left;
    }
    .value {
      font-weight: bold;
    }

    li {
      display: inline-block;
      font-size: 12px;

      .icon {
        margin: 0 0 0 3px;
      }
      .up {
        color: @darkgreen;
      }
      .down {
        color: @midred;
      }
      @media (max-width: @screen-xs-max) {
        padding-left: 0;
      }
       @media (max-width: @screen-sm-max) {
        padding-left: 0;
      }
    }

    &.issuers {
      .label {
        width: 120px;
      }
      .value {
        margin-right: 15px;
        @media (max-width: @screen-xs-max) {
          margin-right: 0;
          padding-right: 15px;
        }
      }
    }
  }

  .issuerSelector, .message-select-issuer {
    padding: 15px;
    border: 1px solid darken(@bg, 10%);
    border-top: none;
    border-bottom: none;
    background: @bg;
  }

  .settings {
    padding: 15px;
    border: 1px solid darken(@bg, 10%);
    border-bottom: none;
    background-color: darken(@bg, 2%);
    .issuers-wrapper {
      display: inline-block;
    }
    button {
      &.btn-block {
        outline: none;
      }
    }
  }

  .message-select-issuer {
    line-height: 25px;
    font-size: 16px;
    font-family: 'OpenSansRegular';
    text-align: center;

    border-bottom: 1px solid darken(@bg, 10%);
  }

  .ticker {
    margin: 0 0 30px;
    padding: 5px 15px;
    border: 1px solid darken(@bg, 10%);
    border-top: none;
    background-color: darken(@bg, 5%);
    list-style-type: none;
    @media (max-width: @screen-xs-max) {
      font-size: 11px;
    }
    .value {
      font-weight: bold;
    }
  }

  .send-widgets {
    form {
      .input-group {
        border-spacing: 0;
      }
    }
  }

  .slash {
    padding-top: 25px;
    font-size: 24px;
  }

  .order-type {
    p.literal {
      margin: 0;
      line-height: 48px;
    }
  }

  .trade-widget {
    // min-height: 430px;
    padding: 15px;
    border: 1px solid darken(@bg, 10%);
    background: darken(@bg, 2%);
    word-break: break-word;

    .head {
      margin: -15px -15px 15px -15px;
      padding: 10px 15px;
      background-color: darken(@bg, 5%);
      font: 18px 'OpenSansRegular';

      .available {
        font-size: 11px;
        color: @darkgray;
        padding-left: 10px;
        .amount {
          font-weight: bold;
          &:after {
            content: " ";
          }
        }
      }
    }

    .input-group {
      margin: 0 0 20px;
    }
    .errorGroup {
      position: relative;
    }
    .order-values {
      .value-field {
        .input-group {
          width: 100%;
          .input-group-addon {
            width: 33.3333333%;
            @media (max-width: @screen-xs-max) {
              width: 25%;
            }
          }
        }
      }
    }
  }

  .mode-form {
    .order-values {
      .sign {
        text-align: center;
        margin: 40px 0 0 0;
      }
      .error {
        margin-bottom: 0;
        height: 0;
        overflow: visible;
      }

      .input-group-addon {
        color: @white;
        background-color: @midgray;
        padding: 0 10px;
        min-width: 70px;

        .issuer {
          font-size: 10px;
        }
      }
    }
    .message {
      color: @midgreen;
      height: 40px;
      line-height: 20px;
    }
    .btns-row {
      .btns-wrapper {
        float: none;
        margin: 7px auto;
      }
    }
  }

  .mode-confirm {
    text-align: left;
    font-family: OpenSansLight;
    .alert {
      margin-bottom: 0;
    }
    .title {
      margin: 30px 0;
    }
    label {
      font-size: 18px;
      margin-bottom: 0
    }
    sub {
      bottom: 0;
      font-size: 14px;
      font-family: OpenSansRegular;
    }
    .amount_feedback {
      font-size: 18px;
      margin: 10px 0 0 0;
      .ammount-currency {
        font-size: 22px;
      }
    }

    .dest_feedback {
      font-size: 30px;
      margin: 0 0 10px 0;
      .each-price {
        font-size: 22px;
      }
    }

    .rate_feedback {
      margin: 0 0 20px 0;
      font-size: 18px;

      .pair {
        margin-left: 5px;
        font-size: 14px;
      }
      .max-value {
        .rate {
          font-size: 22px;
        }
      }
    }
    .confirm-text {
      font-size: 14px;
      margin-bottom: 5px;
    }
  }

  .widget-myorders-table();

  .toggle {
    margin-left: 10px;
    color: @midblue;
    cursor: pointer;
  }

  .toggle:hover {
    text-decoration: underline;
  }
  .orderlists {
    .transition-duration(0.5s);
  }
  .listings {
    padding: 0 15px;
    border: 1px solid darken(@bg, 10%);
    background: @bg;

    transition: 0.2s;
    max-height: 0;

    .my {
      .head {
        font-weight: bold;
      }
      .row:first-child {
        border-top: none;
      }
      .row {
        border-top: 1px solid @lightgray;

        &:nth-child(even) {
          background-color: darken(@bg, 2%);
        }

        & > div {
          padding: 8px;
          border-right: 1px solid @lightgray;
        }

        & > div:last-child {
          border-right: none;
        }

        .issuer {
          color: lighten(@black,70%);
          font-size: 11px;
        }

        @media (max-width: @screen-xs-max) {
          border: none;
          padding: 4px;

          & > div {
            padding: 4px;
            border: none;
          }

          div:before {
            display: inline-block;
            width: 100px;
            font-weight: bold;
            text-transform: uppercase;
            content: " "attr(data-label);
          }
        }

        .align-right {
          text-align: right;
        }

        .btn-link {
          padding-left: 0px;
          padding-right: 0px;
        }

        .btn-link[disabled] {
          text-decoration: none;
          color: #999999;
        }

        .form-control {
          font-size: 14px;
          height: 36px;
          padding: 5px 10px;
        }

        .form-control.changed {
          background-color: #fcf8e3;
        }

        .input-group {
          margin-bottom: 10px;
        }

        .input-group .input-group-addon.inline-inputs-group {
          text-align: center;
          font-size: 10px;
          line-height: 1;
          padding: 10px;
          @media(max-width: @screen-xs-max) {
            &:before {
              display: block;
            }
          }
        }

        .action {
          padding-left: 0;
          padding-right: 0;
        }
      }
    }

    .emptyMessage {
      margin: 10px 0;
    }

    .alert {
      line-height: 1.428571429;
      padding: 8px;
      float: left;
    }
  }

  .alert {
    line-height: 1;
  }

  .alert-danger .dismiss {
    margin:0 5px;
    color:darken(@midred, 10%);
  }

  .alert-danger .dismiss:hover {
    color:darken(@midred, 30%);
  }

  .listings.offers {
    max-height: 1000px;
    overflow: auto;
  }
  .orderlists {
    opacity: 1;
    &.loading {
      opacity: 0;
    }
  }
  .listings.orders {
    max-height: 9999px;
    overflow: auto;
    min-height: 720px;
  }

  .orderbookupdate {
    padding-top: 15px;
    line-height: 68px;
    .orderbook-title {
      font-family: OpenSansSemibold, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      font-weight: normal;
      text-transform: uppercase;
      small {
        text-transform: none;
      }
    }
    .last-update {
      text-align: right;
    }
    @media (max-width: @screen-xs-max) {
      line-height: 34px;
      padding-bottom: 0;
      .last-update {
        text-align: left;
      }
      h3 {
        margin-bottom: 0;
        margin-top: 5px;
      }
    }
  }

  .orderbook {
    @media (max-width: @screen-xs-max) {
      font-size: 10px;
    }
    .title {
      margin: 0 -15px 15px -15px;
      font: bold 15px 'OpenSansRegular';
      text-transform: uppercase;
      background: darken(@bg, 5%);
      padding: 10px;
      text-align: center;
    }
    .head {
      font: 15px 'OpenSansRegular';
      margin-bottom: 10px;

      .currency {
        color: @darkgray;
      }
    }

    .my {
      font-weight: bold;
      color: @darkgreen;

      .insig {
        color: @darkgreen;
        font-weight: normal;
      }

      .delete {
        margin: 0 10px 0 0;

        text-decoration: none;
      }
    }

    .new {
      font-weight: normal;
      color: @black;
      .animation-mixin(newfadeout 5s ease-out 0s);
    }

    .changed {
      font-weight: normal;
      color: @black;
      .animation-mixin(changefadeout 5s ease-out 0s);
    }

    .keyframes-mixin(newfadeout, {
        color: @midgreen;
        font-weight: bold;
      }, {
        color: @black;
        font-weight: normal;
    });
    .keyframes-mixin(changefadeout, {
        color: @midred;
        font-weight: bold;
      }, {
        color: @black;
        font-weight: normal;
    });

    @media (min-width: @screen-md-max) {
      .bids {
        border-right: 1px solid darken(@bg, 20%);
      }
      .asks {
        border-left: 1px solid darken(@bg, 20%);
      }
    }

    @media (max-width: @screen-md-max) {
      .asks {
        border-top: 6px solid @midgray;
        padding-top: 10px;
      }
    }

    .bids, .asks {
      .row {
        padding: 4px 0;
        text-align: right;

        .rpamount {
          font-size: 14px;
          padding-left: 5px;
          padding-right: 5px;
        }

        .sum, .size, .price {
          padding-left: 5px;
          padding-right: 5px;
        }

        &:nth-child(odd) {
          background-color: darken(@bg, 5%);
        }
      }

      background-color: darken(@bg, 2%);
    }

    a {
      color: inherit;
    }

    .message {
      text-align: center;
      padding-bottom: 20px;
    }

    .issuer {
      font-size: 10px;
      color: @darkgray;
    }
  }

  .cancelling {
    color: lighten(@black,70%);

    a {
      color: lighten(@black,70%);
    }

    .cancelling.changed {
      background-color: #fcf8e3;
    }

    .action a {
      display: none;
    }
  }

  .btn-cancel-order {
    color: @midred;
  }

}

.t-trade header nav ul > .active#nav-advanced > a:after {
  border-bottom-color: @lightgray;
}

.table {
  display: table;
  margin: 0;
  border-collapse: separate;
  border-spacing: 15px 0px;
  table-layout: fixed;
  .grid {
    margin-left: -30px;
    margin-right: -30px;
  }
  .table-row {
    display: table-row;
    .col-cell {
      display: table-cell;
      vertical-align: top;
      float: none;
    }
  }
}

.animation-mixin(@arguments) {
  -moz-animation: @arguments;
  -webkit-animation: @arguments;
  -o-animation: @arguments;
  animation: @arguments;
}

.keyframes-mixin(@name, @fromRules, @toRules) {
    @-moz-keyframes ~'@{name}' { 0% { @fromRules(); } 100% { @toRules(); } }
    @-o-keyframes ~'@{name}' { 0% { @fromRules(); } 100% { @toRules(); } }
    @-webkit-keyframes ~'@{name}' { 0% { @fromRules(); } 100% { @toRules(); } }
            @keyframes ~'@{name}' { 0% { @fromRules(); } 100% { @toRules(); } }
}


add pictures control style

add pictures control style

Signed-off-by: Henrique Vicente <d390f26e2f50ad5716a9c69c58de1f5df9730e3b@gmail.com>

@redT: #A70D1C;
@greenT: #0da664;
@wine: rgb(178, 18, 64);

@formRequired: #282828;
@formOptional: #5d5d5d;
@formError: #CC3333;

@footerText: #888888;
@footerLinks: @redT;

@import "../vendor/elements/elements.less";

form {
    .required {
        color: @formRequired;
    }

    .optional {
        color: @formOptional;
    }
    .errors {
        font-weight: bold;
        color: @formError;/* Persian red */
    }
}

/* = Upload form */
form input[type="file"]
{
    display: block;
}

html
{
}

body
{
    overflow: -moz-scrollbars-vertical;
    overflow-x: auto;
    overflow-y: scroll;
}

@media (min-width : 767px) {
    .navbar {
        .navbar-inner a {
            &,&:link, &:visited, &:active, &:hover {
                color: #ffffff;
            }
        }
        .dropdown-menu a {
            &,&:link, &:visited {
                color: #4995cd;
            }
            &:active, &:hover {
                color: #ffffff;
            }
        }
    }
    .navbar-search label {
        cursor: pointer;
    }
    .navbar-login-well {
        padding: 15px;
        margin-bottom: 0;
    }
    .navbar-login-submit {
        text-align: right;
    }
    .navbar-logout-link {
        background: #fff !important;
        &:active, &:hover {
            background: @redT !important;
        }
    }
}

.navbar-fixed-top-override {
    position: static;
}

.site-logotype {
    padding-top: 14px;
    padding-bottom: 20px;
    text-align: center;
    border-top: 16px solid @redT;
}

@media (max-width : 767px) {
    .site-logotype {
        display: none;
        visibility: invisible;
    }
}

.post-seller-address {
    ul {
        margin-left: 0;
        list-style-type: none;
    }
}

.map-link {
	&, &:link, &visited, &:active, &:hover {
	    color: @greenT;
	    text-decoration: none;
    }
}

.aside-similar-offers {
    padding: 0 0 5px 10px;
    .bw-gradient(#ffffff, 250, 255);
	.drop-shadow(0, 1px, 2px, 0.2);
	dd {
        margin-left: 0;
	    ul {
            li {
                color: #969696;
                list-style-type: none;
            }
            margin-left: 0;
        }
    }
}

.hidden
{
    visibility: hidden;
}

/* http://www.webaim.org/techniques/css/invisiblecontent/ */
.hidden-from-gui
{
    position: absolute;
    top: auto;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.hidden-ref {
    display: none !important;
}

footer {
    padding-top: 30px;
	.bw-gradient(#f5f5f5, 235, 255);
	p {
	    color: @footerText;
    }
    a {
        &, &:link, &:visited, &:active, &:hover {
            color: @footerLinks;
        }
    }
	ul {
	  list-style-type: none;
    }
}

@media (min-width : 480px) {
    a[href^=tel] {
        color: inherit;
        text-decoration: none;
        cursor: text;
    }
}

.post-listing-details {
    color: #000;
}

.post-listing-price {
    font-size: 120%;
    font-weight: bold;
    color: @redT;
    vertical-align: bottom;
}

.special-items {
    font-weight: bold;
}

input.no-spin-button::-webkit-outer-spin-button,
input.no-spin-button::-webkit-inner-spin-button {
    display: none;
}

.fix-sized-textarea {
    resize: none;
}

.post-contact {
    padding-left: 10px;
}

.post-thumbnail {
    &:active, &:hover {
        text-decoration: none;
    }
}

.post-pictures-thumbnails-manager li {
    &.post-upload {
        cursor: pointer;
    }
    &.post-picture {
        cursor: move;
        &:hover {
        }
    }
}

.thumbnail-remove-picture {
    position: relative;
    z-index: 0;
    float: right;
    padding: 0 5px;
    padding-top: -8px;
    margin-top: -20px;
    font-weight: bold;
    color: #fff;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.post-picture:hover .thumbnail-remove-picture {
    color: #fff;
    background: #bd362f;
}


settings ui fixes

settings ui fixes

@SUBNAV_HEIGHT: 48px;
@PADDING: 20px;

.blog-settings-view {
    .settings-page {
        top: @SUBNAV_HEIGHT*3;
        > .subnav {
            top: @SUBNAV_HEIGHT*2;
            background-color: #eaeaea;
        }
        .tab-content {
            // padding: 0 20px;
            > .header {
                height: @SUBNAV_HEIGHT;
                border-bottom: 1px solid #e0e0e0;
                padding: @PADDING/2 @PADDING;
                box-sizing: border-box;
            }
            > .content {
                padding: @PADDING;
                .form-group {
                    display: table;
                    content: " ";
                    width: 100%;
                    padding: @PADDING/2 0;
                    .control-label {
                        text-align: left;
                        font-size: 11px;
                        text-transform: uppercase;
                        color: #808080;
                    }
                    .form-input {
                        width: 50%;
                        float: left;
                        select {margin: 0; height: auto;} // overwrite bootstrap
                        input {
                            box-sizing: border-box;
                            border-radius: 2px;
                            padding: 4px 6px;
                            height: auto;
                            font-size: 12px;
                            color: #000;
                            box-shadow: none;
                            &:focus {
                                box-shadow: 0 0 5px 0 #d0d0d0!important;
                                border-color: #b8b8b8!important;
                                outline: 0!important;
                            }
                        }
                    }
                }
            }
        }
    }
}

@SUBNAV_HEIGHT: 48px;
@PADDING: 20px;

.blog-settings-view {
    .settings-page {
        top: @SUBNAV_HEIGHT*3;
        > .subnav {
            top: @SUBNAV_HEIGHT*2;
            background-color: #eaeaea;
        }
        .tab-content {
            // padding: 0 20px;
            > .header {
                height: @SUBNAV_HEIGHT;
                border-bottom: 1px solid #e0e0e0;
                padding: @PADDING/2 @PADDING;
                box-sizing: border-box;
            }
            > .content {
                padding: @PADDING;
                .form-group {
                    display: table;
                    content: " ";
                    width: 100%;
                    padding: @PADDING/2 0;
                    .control-label {
                        text-align: left;
                    }
                    .form-input {
                        width: 50%;
                        float: left;
                        select {margin: 0;} // overwrite bootstrap
                    }
                }
            }
        }
    }
}


Changed bootstrap font to Audiowide/Arvo (Google web fonts)

@import "bootstrap/bootstrap.less";

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

@import "bootstrap/responsive.less";

/* ===== Primary Styles ========================================================
   Author: Joshua Randall
   ========================================================================== */

// Load google web fonts
@import url("http://fonts.googleapis.com/css?family=Audiowide&subset=latin,latin-ext");
@import url("http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic");

// Override font settings in bootstrap/variables.less
@sansFontFamily: 'Audiowide', cursive;
@serifFontFamily: 'Arvo', serif;
@baseFontFamily: @serifFontFamily;
@altFontFamily: @sansFontFamily;
@headingsFontFamily: @sansFontFamily;


Add a new CSS component class for menus.

We've had a few places in the UI that implemented their own idea of a
drop-down menu. Each of these looked and worked differently, which can
be fine depending on the use case, but we had very little
standardization around them. They also weren't very accessible to
non-mouse users.

This change introduces a new `.rb-c-menu` CSS class for defining a menu
and a `.rb-c-menu__item` class for menu items. It provides some standard
behavior for a menu's defaults, its opened state, and how items are
presented.

It also allows for mixing in some upcoming CSS classes centered around
buttons, for creating a button menu (where each item is just a button).

This class is the first to offer notes on how accessibility should work
and which DOM attributes should be set. The idea is that by including
this as part of the component documentation, we have a basic spec that
dictates how any implementations should behave and what attributes they
should include when using defining the elements. This is something I'm
aiming to do going forward, and should take away a lot of the guess-work
when building implementations.

Testing Done:
Made use of this along with some upcoming changes, testing menus and
button menus.

Tested the ARIA tree to ensure that the correct roles and metadata were
set for menus.

Reviewed at https://reviews.reviewboard.org/r/10902/

@import (reference) "rb/css/ui/colors.less";
@import (reference) "rb/css/defs.less";

#rb-ns-ui() {
  .menus() {
    @_color-vars: #rb-ns-ui.colors();

    @bg-color: @_color-vars[@white];
    @hover-bg-color: @_color-vars[@blue-80];

    @border-color: @_color-vars[@grey-60];
    @border: 1px @border-color solid;

    @box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05);

    @transition-time: 0.2s;
    @transition: opacity @transition-time linear;
    @z-index: @z-index-menu;

    @item-padding-vert: 0.8em;
    @item-padding-horiz: 1em;
  }
}

/**
 * A drop-down menu.
 *
 * This is shown as a result of clicking another piece of UI (such as a
 * ``.rb-c-menu-button``).
 *
 * Drop-down menus may contain lists of items that perform actions or
 * manipulate state. This may be represented as a ``
`` tag, with each
 * item as a ``
``. It may also be represented as a ``
`` tag, with
 * each item as a ````, ``<button>``, or ``
``.
 *
 * They may also contain lists of buttons, when a ``.rb-c-button-group`` is
 * mixed in. In this case, ``.rb-c-button` should also be mixed in to each
 * ``.rb-c-menu__item``.
 *
 * Accessibility Notes:
 *     Implementations of this component should implement keyboard navigation
 *     behavior for accessing items in the menu.
 *
 *     The following keys should be supported:
 *
 *     Enter:
 *         Trigger a click event on the selected item.
 *
 *     Escape, Tab:
 *         Close the menu and return focus to the controlling element that
 *         opened it.
 *
 *     Up:
 *         Move focus up one item. If focus was previously on the first item
 *         in the menu, focus should move to the last item.
 *
 *     Down:
 *         Move focus down one item. If focus was previously on the last item
 *         in the menu, focus should move to the first item.
 *
 *     Home, Page Up:
 *         Move focus to the first item.
 *
 *     End, Page Down:
 *         Move focus to the last item.
 *
 *     The menu and items should not be able to be focused via the Tab key.
 *     Instead, focus should be brought to the first menu item when opened
 *     via keyboard navigation.
 *
 *     Mouse movement over a menu item should also switch focus to that item.
 *     There is no ``:hover`` styling for menu items, so that all highlighting
 *     can standardize on ``:focus``.
 *
 * DOM Attributes:
 *     aria-labelledby (required):
 *         A reference to the element (or an element related to the element)
 *         that opened this menu. It must contain a descriptive label.
 *
 *     role (required):
 *         This must be set to "menu".
 *
 *     tabindex (required):
 *         This must be set to -1, allowing the menu to be focused
 *         programmatically but not through tabbing. Consumers must provide
 *         keyboard/mouse navigation.
 *
 * Structure:
 *

 *
...

 *      ...
 *

 *
 *

 *
...

 *      ...
 *

 *
 *

 *      <button class="rb-c-menu__item rb-c-button" role="menuitem"
 *              type="button" tabindex="-1">...

 *      ...
 *

 */
.rb-c-menu {
  @_menu-vars: #rb-ns-ui.menus();

  background: @_menu-vars[@bg-color];
  border: @_menu-vars[@border];
  box-shadow: @_menu-vars[@box-shadow];
  display: block;
  list-style: none;
  opacity: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  transition: @_menu-vars[@transition];
  visibility: hidden;
  z-index: @_menu-vars[@z-index];

  &.-is-open {
    opacity: 1;
    visibility: visible;
  }

  /**
   * A menu item.
   *
   * This may contain any content needed in the menu item, but will usually
   * consist of text.
   *
   * The element type may be anything, and will depend on the parent
   * ``.rb-c-menu``. It will most commonly be a ``
``, ````, ``
``,
   * or ``<button>``.
   *
   * If displaying a button-based menu, this must have ``.rb-c-button`` mixed
   * in.
   *
   * Consumers are responsible for marking a menu item as focused in response
   * to keyboard navigation or mouse movements, in order to convey the active
   * item.
   *
   * DOM Attributes:
   *     role (required):
   *         This must be set to "menuitem".
   *
   *     tabindex (required):
   *         This must be set to -1, allowing the menu to be focused
   *         programmatically but not through tabbing. Consumers should provide
   *         keep
   *
   * Structure:
   *
...

   *
   *     ...
   *
   *     <button class="rb-c-menu__item rb-c-button" role="menuitem"
   *             type="button" tabindex="-1">
   *      ...
   *     </button>
   */
  &__item {
    cursor: pointer;
    display: block;
    list-display: none;
    margin: 0;

    &.rb-c-button:focus {
      background: @_menu-vars[@hover-bg-color];
      outline: 0;
    }

    &:not(.rb-c-button) {
      /*
       * We want to apply padding to standard list items, but button list
       * items should retain button padding.
       */
      padding: @_menu-vars[@item-padding-vert] @_menu-vars[@item-padding-horiz];

      &:focus {
        background: @_menu-vars[@hover-bg-color];
        outline: 0;
      }
    }
  }
}

/**
 * Converts an element into a pop-up menu.
 *
 * Deprecated:
 *     4.0:
 *     Elements should mix in ``.rb-c-menu`` instead.
 */
.popup-menu() {
  .rb-c-menu();
}

/**
 * Indicates that an element will display a menu on hover.
 *
 * Deprecated:
 *     4.0:
 *     Consumers should use a more specific component class instead.
 */
.has-menu {
  .menu {
    .popup-menu();
  }

  &:hover > .menu {
    visibility: visible;
    opacity: 1;
  }
}

@import (reference) "../defs.less";

.popup-menu() {
  display: block;
  list-style: none;
  opacity: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  transition: visibility 0.1s, opacity 0.1s;;
  visibility: hidden;
  z-index: @z-index-menu;
}

.has-menu {
  .menu {
    .popup-menu();
  }

  &:hover > .menu {
    visibility: visible;
    opacity: 1;
  }
}


Fixed more_facts styling

Fixed more_facts styling

@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "channels/create_fact";

div.facts-view {
  .header {
    margin: 0 -15px;
    padding: 0 15px;
    border-bottom: 1px solid @baseBorderColor;

    #create_fact_for_channel {
      #channel > .create_fact_for_channel();
    }

    .more_facts {
      margin: 0 -15px;
      border-top: 1px solid @baseBorderColor;
      padding: 15px;

      a {
        span {
          padding: 0 5px 0 0;
          #font > .iconic();
          font-size: 13px;
        }

        &:hover {
          text-decoration: none;
          border: 1px solid darken(#dee5ef, 10%);
        }

        border: 1px solid #dee5ef;
        background: #f3f6fa;
        .border-radius(5px);
        display: block;
        text-align: center;
        line-height: 40px;
      }
    }
  }

  div.fact-view:last-child {
    margin-bottom: -30px;
    .border-bottom-radius(5px);
    border-bottom: none;
  }
}

@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "channels/create_fact";

div.facts-view {
  .header {
    margin: 0 -15px;
    padding: 0 15px;
    border-bottom: 1px solid @baseBorderColor;

    > div, > form {
      padding: 0;

      &:first-child {
        padding-top: 15px;
      }

      &:last-child {
        border-bottom: 1px solid #e1e1e1;
        padding-bottom: 15px;
      }
    }

    #create_fact_for_channel {
      #channel > .create_fact_for_channel();
    }

    .more_facts {
      margin: 0 0 15px;
      a {
        span {
          padding: 0 5px 0 0;
          #font > .iconic();
          font-size: 13px;
        }

        &:hover {
          text-decoration: none;
          border: 1px solid darken(#dee5ef, 10%);
        }

        border: 1px solid #dee5ef;
        background: #f3f6fa;
        .border-radius(5px);
        display: block;
        text-align: center;
        line-height: 40px;
      }
    }
  }

  div.fact-view:last-child {
    margin-bottom: -30px;
    .border-bottom-radius(5px);
    border-bottom: none;
  }
}


Apply a blue inner glow to focused empty panes

@import "ui-mixins";
@import "ui-variables";
@import "buttons";

.pane-item {
  .panel {
    border-color: fadeout(@inset-panel-border-color, 30%);
  }
}

.panes {
  .pane {
    background-color: @app-background-color;

    &:focus .item-views {
      box-shadow: inset 0 0 7px #6aa5e9;
    }
  }

  .pane-row .pane {
    border-right: 1px solid @pane-item-border-color;
    &:last-child { border-right: none; }
  }
}

@import "ui-mixins";
@import "ui-variables";
@import "buttons";

.pane-item {
  .panel {
    border-color: fadeout(@inset-panel-border-color, 30%);
  }
}

.panes {
  .pane {
    background-color: @app-background-color;
  }

  .pane-row .pane {
    border-right: 1px solid @pane-item-border-color;
    &:last-child { border-right: none; }
  }
}