/*
LESS CMS39 compiler
lessc -x style.less > style.css
*/
@placeholder-color: #282829;
@placeholder-color-selection: #b3d4fc;
@border-color: #282829;
@text-color: #1D1D1B;
@background-color: #fff;
@link-color: #282829;
@link-color-hover: #E84239;
@form-text-color: #222;
@font-family: 'Roboto', sans-serif;
@font-size: 15px;

@custom-wrapper-spacing: 12px;

//@import url('css/normalize.css');
@import url('css/wp.css');
@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
//@import url('https://bootswatch.com/flatly/bootstrap.min.css');
//@import url('https://aperture.section.io/1465964622/styles/app.css');
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
@import url(//fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic&subset=latin,greek);
//@import url(//fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic,700italic&subset=latin,greek);

/*---------------------------------------------------
    LESS Elements 0.9
  ---------------------------------------------------
    A set of useful LESS mixins
    More info at: http://lesselements.com
  ---------------------------------------------------*/

.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
  background: @color;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, @start), color-stop(1, @stop));
  background: -ms-linear-gradient(bottom,
  @start,
  @stop);
  background: -moz-linear-gradient(center bottom,
  @start 0%,
  @stop 100%);
  background: -o-linear-gradient(@stop,
  @start);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
}

.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
  background: @color;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(@start,@start,@start)), color-stop(1, rgb(@stop,@stop,@stop)));
  background: -ms-linear-gradient(bottom, rgb(@start,@start,@start) 0%, rgb(@stop,@stop,@stop) 100%);
  background: -moz-linear-gradient(center bottom, rgb(@start,@start,@start) 0%, rgb(@stop,@stop,@stop) 100%);
  background: -o-linear-gradient(rgb(@stop,@stop,@stop), rgb(@start,@start,@start));
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", rgb(@stop,@stop,@stop), rgb(@start,@start,@start)));
}

.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
  border-top: solid 1px @top-color;
  border-left: solid 1px @left-color;
  border-right: solid 1px @right-color;
  border-bottom: solid 1px @bottom-color;
}

.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
  -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
}

.rounded(@radius: 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
  -webkit-border-top-right-radius: @topright;
  -webkit-border-bottom-right-radius: @bottomright;
  -webkit-border-bottom-left-radius: @bottomleft;
  -webkit-border-top-left-radius: @topleft;
  -moz-border-radius-topright: @topright;
  -moz-border-radius-bottomright: @bottomright;
  -moz-border-radius-bottomleft: @bottomleft;
  -moz-border-radius-topleft: @topleft;
  border-top-right-radius: @topright;
  border-bottom-right-radius: @bottomright;
  border-bottom-left-radius: @bottomleft;
  border-top-left-radius: @topleft;
  .background-clip(padding-box);
}

.opacity(@opacity: 0.5) {
  -moz-opacity: @opacity;
  -khtml-opacity: @opacity;
  -webkit-opacity: @opacity;
  opacity: @opacity;
  @opperc: @opacity * 100;
  -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
  filter: ~"alpha(opacity=@{opperc})";
}

.transition-duration(@duration: 0.2s) {
  -moz-transition-duration: @duration;
  -webkit-transition-duration: @duration;
  -o-transition-duration: @duration;
  transition-duration: @duration;
}

.transform(...) {
  -webkit-transform: @arguments;
  -moz-transform: @arguments;
  -o-transform: @arguments;
  -ms-transform: @arguments;
  transform: @arguments;
}

.rotation(@deg:5deg) {
  .transform(rotate(@deg));
}

.scale(@ratio:1.5) {
  .transform(scale(@ratio));
}

.transition(@duration:0.2s, @ease:ease-out) {
  -webkit-transition: all @duration @ease;
  -moz-transition: all @duration @ease;
  -o-transition: all @duration @ease;
  transition: all @duration @ease;
}

.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
  -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
}

.box-shadow(@arguments) {
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  box-shadow: @arguments;
}

.box-sizing(@sizing: border-box) {
  -ms-box-sizing: @sizing;
  -moz-box-sizing: @sizing;
  -webkit-box-sizing: @sizing;
  box-sizing: @sizing;
}

.user-select(@argument: none) {
  -webkit-user-select: @argument;
  -moz-user-select: @argument;
  -ms-user-select: @argument;
  user-select: @argument;
}

.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
  -moz-column-width: @colwidth;
  -moz-column-count: @colcount;
  -moz-column-gap: @colgap;
  -moz-column-rule-color: @columnRuleColor;
  -moz-column-rule-style: @columnRuleStyle;
  -moz-column-rule-width: @columnRuleWidth;
  -webkit-column-width: @colwidth;
  -webkit-column-count: @colcount;
  -webkit-column-gap: @colgap;
  -webkit-column-rule-color: @columnRuleColor;
  -webkit-column-rule-style: @columnRuleStyle;
  -webkit-column-rule-width: @columnRuleWidth;
  column-width: @colwidth;
  column-count: @colcount;
  column-gap: @colgap;
  column-rule-color: @columnRuleColor;
  column-rule-style: @columnRuleStyle;
  column-rule-width: @columnRuleWidth;
}

.translate(@x:0, @y:0) {
  .transform(translate(@x, @y));
}

.background-clip(@argument: padding-box) {
  -moz-background-clip: @argument;
  -webkit-background-clip: @argument;
  background-clip: @argument;
}

.text-shadow (@x: 0; @y: 0; @blur: 2px; @color: #000) {
  -moz-test-shadow: @arguments;
  -webkit-text-shadow: @arguments;
  text-shadow: @arguments;
}

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

.animate (@time: 200ms; @type: all; @tran: linear) {
  -webkit-transition: @type @time @tran;
  -moz-transition: @type @time @tran;
  -o-transition: @type @time @tran;
  -ms-transition: @type @time @tran;
  transition: @type @time @tran;
}

/* ==========================================================================
   CMS39 Base styles: opinionated defaults
   ========================================================================== */

/* all */
::-webkit-input-placeholder {
  color: @placeholder-color;
  font-size: 1em
}

::-moz-placeholder {
  color: @placeholder-color;
  font-size: 1em
}

/* firefox 19+ */
:-ms-input-placeholder {
  color: @placeholder-color;
  font-size: 1em
}

/* ie */
input:-moz-placeholder {
  color: @placeholder-color;
  font-size: 1em
}

::-moz-selection {
  background: @placeholder-color-selection;
  text-shadow: none;
}

::selection {
  background: @placeholder-color-selection;
  text-shadow: none;
}

/* #Custom
================================================== */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  background-color: @color1;
  font-size: @font-size;
  font-family: @font-family;
  color: @text-color;
  -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
  -webkit-text-size-adjust: 100%;
  margin: 0px;
  padding: 0px;
}

/*
body.css_home {
  background: @color4 url(img/blackboard-backgrounds-wallpapers.jpg) top center;
  color: @color1;
  .navtopbar {
    a {
      color: @color1;
    }
  }
  footer {
    color: @color1;
  }
}
*/

a {
  //.transition-duration(0.5s);
  color: @link-color;
  text-decoration: none;
  &:hover {
    color: @link-color-hover;
    text-decoration: none;
  }
  &:focus {
    text-decoration: none;
    color: @link-color-hover;
    outline: none !important;
    outline-offset: 0px;
  }
  &:active {
    text-decoration: none;
    color: @link-color-hover;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: @font-family;
}

/* ==========================================================================
   Yardsale custom styles
   ========================================================================== */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

.sep {
  border-top: 1px solid #efefef;
  margin: 10px 0px;
}

.normal {
  line-height: 1em;
  font-weight: normal;
}

.large {
  line-height: 1em;
  font-size: 20px;
}

.x-large {
  line-height: 1em;
  font-size: 34px;
}

.small {
  line-height: 1em;
  font-size: 12px;
}

.lite {
  line-height: 1em;
  color: #4a4a4a;
}

.shadow {
  /*
  -moz-box-shadow: 0px 0px 3px #9e9e9e;
  -webkit-box-shadow: 0px 0px 3px #9e9e9e;
  box-shadow: 0px 0px 3px #9e9e9e;
  */
}

.fade-bg {
  background-color: @color1;
}

.noScroll {
  overflow: hidden;
}

.noResults {
  font-size: 18px;
  font-weight: normal;
  margin: 54px auto;
  text-align: center;
  width: 50%;
}

@color1: #ffffff;
@color2: #dd3333;
@color3: #f5f5f5;
@color4: #434141;
@color5: #b9b3b3;
@color6: #3288e6;
@color7: #e8e8e8;

.btn-white{
  background-color: white;
}

.yardsaleGrid.yardsaleGridModal {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  .ybox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

.feed-info {
  padding: 0 15px 25px 15px;
}

.dd {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  background: #303030;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#3f3f3f), to(#303030));
  background: -webkit-linear-gradient(#3f3f3f, #303030);
  background: -moz-linear-gradient(#3f3f3f, #303030);
  background: -ms-linear-gradient(#3f3f3f, #303030);
  background: -o-linear-gradient(#3f3f3f, #303030);
  background: linear-gradient(#3f3f3f, #303030);
  border: 1px solid #393939;
  list-style: none;
  margin: 0;
  padding: 14px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 20px;
  min-width: 140px;
  margin-left: -70px;
  margin-top: 14px;
  border-top: 2px solid #3f3f3f;
  text-align: left;
  z-index: 10;
  font-size: 13px;
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.75);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.75);

  &.dd-center {
    text-align: center;
  }

  .dropdown-item{
    font-size: 0.9em;
    font-weight: 400;
  }

  .dropdown-item-inline {
    display: inline-block;
    & > a {
      padding: 0px 4px !important;
    }
  }

  .dropdown-item > a {
    padding: 0px 5px 0;
    display: block;
    color: #c0c0c0;

  }

  .dropdown-item > label {
    padding: 0px 5px 0;
    display: block;
    color: #c0c0c0;
    .labeltxt {
      display: inline-block;
      margin-left: 5px;
    }
  }

  .dropdown-item.devider {
    margin: 6px 0 5px;
    border-top: 1px solid #181818;
    border-bottom: 1px solid #393939;
  }

  &.dd-open {
    display: block;
  }

  &:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 6px 5px;
    border-color: transparent transparent #3f3f3f transparent;
    position: absolute;
    top: -8px;
    left: 50%;
    margin-left: -5px;
  }
}

.widget {
  color: @color1;
  a, h3 {
    color: @color1;
  }
  h3 {
    font-size: 1em;
  }
  .article_list li {
    border-bottom: 1px solid rgba(156, 156, 156, 0.8);
  }
  ul.article_list .article-category i {
    border-color: #dd3333 transparent #dd3333 #dd3333;
  }
  .attachment-thumbnail-widget {
    width: 100%;
    height: auto;
  }
}

.ta {
  position: relative;
  .ta-inner {
    background: @color5;
    padding: 15px 0 0 0;
    margin: 55px 0 30px 0;
    position: relative;
    border-bottom: 1px solid @color5;
    overflow: hidden;
    &.ta-open {

    }
    &.ta-closed {
      height: 0px;
    }
  }
  .ta-close {
    .rounded(12px);
    position: absolute;
    width: 22px;
    color: @color1;
    background: @color2;
    bottom: -10px;
    text-align: center;
    left: 50%;
    margin-left: -11px;
    z-index: 2;
  }
}

.sidebar-left {
  width: 300px;
  height: auto;
  float: left;
  z-index: 2;
  margin: 61px 0 -2000px 5px;
  padding: 0px 0 2000px 0;
  background: @color1;
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.ajaxContent {
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  z-index: 1;

  .container:after,
  .row:after {
    clear: inherit;
  }
}

.footer_tools {
  text-align: center;
  margin: 20px 0px;
  #moreitems {
    .rounded-corners(5px);
    display: inline-block;
    padding: 20px;
    background: @color2;
    margin: 0 auto;
    position: relative;
    color: @color1;
    font-weight: 600;
  }

}

.slider-btn {
  display: inline-block;
  padding: 2px;
  color: @color2;
}

.rating-star {
  color: @color1;
  margin: 10px 0px;
  display: block;
  i {
    color: @color2;
  }
  .lite {
    margin-left: 10px;
    color: @color1
  }
}

.user_data_wrapper {
  dl {
    clear: both;
    .small;
    dt {
      clear: both;
      float: left;
      margin-right: 10px;
      color: @color2;
      dd {
        float: left;
      }
    }
  }
}

@sidebarWidth: 280px;

.show-menu .navbar.menu-wrap {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  background: #3a3a3c;
}

.navbar.menu-wrap {
  overflow-y: auto;
  position: fixed;
  width: @sidebarWidth;
  top: 0;
  right: 0;
  min-height: 100%;
  border-radius: 0;
  margin: 0;
  z-index: 100;
  height: 100%;
  -webkit-transform: translate3d(@sidebarWidth, 0, 0);
  transform: translate3d(@sidebarWidth, 0, 0);
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  background: #3a3a3c;
}

#sidebarmenu {
  .menu-content {
    padding: 60px 10px 10px 10px;
    color: @color1;
    a {
      color: @color1;
    }

    .userArea {
      h2 {
        margin: 10px 0 10px 0;
      }
      .member_wrapper {
        .small;
      }
      .user-btn {
        width: 100%;
        margin-bottom: 10px;
      }
      .thumbnail-img {
        float: inherit;
        .rounded-corners(25px);

      }
      .description_wrapper {
        margin-bottom: 30px;
      }

      .btn-warning,
      .btn-default {
        background-color: @color4;
      }
    }

  }

  .menu-close {
    color: @color1;
    position: absolute;
    padding: 5px 10px;
    left: 10px;
    top: 10px;
    background: @color2;
    z-index: 2;
    .rounded-corners(15px);
  }
}

.vex.vex-theme-flat-attack .vex-close {
  right: -1px;
}

.vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-primary {
  background: @color2;
}

.vex.vex-theme-flat-attack .vex-close:before {
  background: @color2;
}

.modal_form {
  margin: 20px 0px;
  padding: 20px 0px;
  border-top: 1px solid @color3;
  border-bottom: 1px solid @color3;
  .modal_links {
    margin-top: 10px;
    a {
      display: inline-block;
      .small;
      padding: 5px;
      margin: 0 10px 0 0;
      text-decoration: none;
      color: @color1;
      font-weight: 600;
      line-height: 1em;
      .rounded-corners(0px);
      background: @color6;
    }
  }
}

.bread {
  background: @color1;
  margin-bottom: 0px;
  padding: 0px;
  .breadcrumb {
    background: transparent;
    margin: 0 0 0px 0;
    text-align: right;
    font-size: 0.7em;
    li a {
      color: @color5;
    }
    & > li + li:before {
      color: @color5;
    }
  }
}

.ajaxContent {
  padding: 0px 0px;
}

.cms39_content {
  .page-title {
    margin: 0px;
    background: @color3;
    color: @color4;
    font-size: 2em;
    padding: 50px 0px;
    h1 {
      margin: 0px;
      padding: 0px;
      .large;
    }
  }

  .page-data {
    padding: 60px 0px;
    background: @color1;
    font-size: 0.9em;
  }

}

.page-footer {
  padding: 60px 0px 40px 0;
  background: @color3;
  .footer-logo {
    width: 130px;
  }
  .page-footer-left-about {
    padding: 20px 0px;
    .large;
  }

  .page-footer-left-copyright {
    .small;
  }
  .page-footer-left-language {
    padding-top: 20px;
  }

  .page-footer-right-nav {
    ul {
      list-style: none;
      list-style-position: inside;
      padding: 0px;
      margin: 0px;
      li {
        display: block;
        margin: 1px 0px;
        a {
          display: inline-block;
          padding: 3px 0px;
          &.active {
            color: @color2;
          }
        }
      }
    }
    .list-title {
      font-weight: bold;
    }
  }
}

/*modal*/

.mfp-wrap ~ * {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
}

.mfp-bg {
  background: @color5;
  opacity: .5;
}

img.mfp-img {
  padding: 50px 10px 50px;
}

.mfp-figure:after {
  box-shadow: none;
  background: @color1;
}

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
  color: @color1;
  right: -22px;
  top: 19px;
  text-align: center;
  padding-right: 6px;
  width: auto;
  background: @color2;
  border-radius: 32px;
  padding: 0px 14px;
  display: inline-block;
  opacity: 1;
}

/*end modal*/

.avatar_img {
  .rounded-corners(15px);
}

.zoom {
  display: block;
}

.blockMsg {
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: visible;
  outline: none;
  display: none;
  color: white;
  font-size: 0.8em;

}

.blockOverlay {
  z-index: 1000;
  border: none;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  opacity: 1;
  cursor: wait;
  position: fixed;
  display: block;
  background-color: rgba(239, 239, 239, 0.960784);
}

.lens-modal-wrapper {
  z-index: 99;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background-color: rgba(189, 181, 179, 0.960784);
  .lens-modal {
    position: absolute;
    top: 7%;
    left: 50%;
    width: 962px;
    margin-left: -481px;
    overflow: visible;
    outline: none;
    border-radius: 3px;
    display: none;
    z-index: 100;
  }

  .lens-modal-close {
    position: absolute;
    z-index: 1;
    padding: 3px 9px;
    background-color: @color2;
    right: 10px;
    top: 10px;
    border: 0;
    border-radius: 15px;
    font-size: 16px;
    color: @color1;
    cursor: pointer;
    font-weight: bold;
    cursor: zoom-out;
  }

  #itemlayer {
    border: none;
    border-radius: 4px;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    padding: 20px 10px 10px 10px;
    margin-bottom: 60px;
    min-height: 500px;
    position: relative;
  }

  .yardsaleGrid .ybox .inner {
    box-shadow: none;
    margin: 2px;
    .photo a {
    }
  }

  h3 {
    font-size: 16px;
  }

}

.productArea {

  .prdActions {
    text-align: center;
    .btn {
      margin-bottom: 10px;
    }

    .btn-contact-with-seller {
      i {
        margin-right: 5px;
        vertical-align: middle;
      }
    }

    .prdListInline {
      display: inline-block;
    }

    .prdActionsTextlink {
      color: @color2;
      display: block;
      margin: 0 3px;
      padding: 2px;
    }
  }

  .module_item-link {
    .module_item-link-btn {
      color: @color2;
      i {
        margin-right: 5px;
        vertical-align: middle;
      }
    }
  }
  .price-bin {
    margin: 20px 0px;
    display: inline-block;
  }

  h2 {
    margin: 0 0 0px 0;
  }

  .module_details {
    font-size: 0.8em;
    .dl-horizontal {
      margin: 0px;
      dt {
        text-align: left;
        font-weight: 300;
      }
      dd {
        font-weight: 600;
      }
    }
  }

  .module details {
    padding: 20px 10px;
    margin: 20px 0px;
    dl {
      margin-bottom: 0px;
    }
  }
  #shopAreaTabs {
    background: @color1;
    border: 1px solid @color3;
    border-top: 0px;
    padding: 20px 15px;
  }
  .prdActions {
    ul {
      list-style: none;
      margin: 0px;
      padding: 0px;
    }
  }
  .cms39_gallery_wrapper {
    position: relative;
    margin: 0px;
    background: @color1;
    padding: 5px;
    #galleryThumbsArea {
      width: 100%;
      position: relative;
      left: 0px;
      top: 0px;
      padding: 0px;
      margin: 10px 0 0 0;
      .galleryThumbList {
        margin: 0px;
        padding: 0px;
        list-style: none;
        li {
          display: inline-block;
          margin: 0px;
          padding: 5px;
          width: 12.5%;
          a {
            display: block;
            border: 1px solid @color3;
            &.hover {
              border-color: @color2;
            }
            img {
              width: 100%;
              height: auto;
            }
          }
        }
      }

      .bx-prev,
      .bx-next {
        color: @color1;
        background: @color2;
        padding: 0px 5px;
        border-radius: 15px;
      }

      #slider-prev {
        position: absolute;
        top: -32px;
        left: 15px;
      }
      #slider-next {
        position: absolute;
        bottom: -32px;
        left: 15px;
      }
    }
    #gallery {
      .gallery_loop {
        text-align: center;
        margin-left: 0px;
        .fg-image {
          max-width: 100%;
          height: auto;
        }

        .fg-caption {
          margin-top: 0px;
          display: none;
        }
      }
    }
  }
}

.floating {

  &.floating_about {
    right: 220px;
    background: transparent;
    color: @color2;
    padding: 20px 10px;
  }

  position: fixed;
  bottom: 20px;
  right: 20px;
  .rounded(10px);
  background: @color2;
  color: @color1;
  padding: 20px 40px;
  font-size: 1.2em;
  z-index: 50;
  font-weight: 800;
  i {
    font-size: 1.8em;
    vertical-align: middle;
  }
  &:hover {
    color: @color1;
  }
  .text {
    margin-left: 10px;
  }
}

.message-group-actions {
  margin-bottom: 10px;
}

.mail-message {
  .headers {
    margin: 20px 0px;
    font-size: 0.9em;
    span {
      display: block;
    }
  }
  .body {
    background: white;
    padding: 20px;
  }
}

label.error {
  font-style: initial;
  font-size: 0.8em;
  background: red;
  color: white;
  padding: 2px 5px;
  margin: 0px;
}

.well {
  h2 {
    margin: 0 0 0 0;
    font-size: 1.4em;
  }
  h3 {
    font-size: 1.8em;
    font-weight: bolder;
  }

  h4 {
    font-size: 1.0em;
    font-weight: 600;
  }

  form {
    margin-top: 20px;
  }
}

.expandlist {
  list-style: none;
  margin: 30px 0 0 0;
  padding: 0px;

  li {
    line-height: normal;
    position: relative;
    .hdn {
      display: none;
    }
    .sdn {
      display: inline-block;
    }
    .collapse {
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid @color2;
      top: 5px;
      left: -4px;
      content: "\00a0";
      font-size: 0;
      height: 0;
      line-height: 0;
      width: 0;
      position: relative;
    }
    .expand {
      border-bottom: 6px solid transparent;
      border-left: 6px solid @color2;
      border-top: 6px solid transparent;
      content: "\00a0";
      font-size: 0;
      height: 0;
      line-height: 0;
      width: 0;
    }
    .mfleft {
      margin-left: 12px;
      top: -10px;
      position: relative;
    }
    .answer {
      padding-top: 10px;
      font-size: 0.9em;
    }
  }

}

.input-focus {
}

#sidebarnav.affix {
  position: fixed;
  top: 0;
  width: 165px;
}

.bootstrap-tagsinput {
  display: block;
  height: 100px;
}

.yard-form {
}

.modal-form-area {
  display: block;
  margin-top: 10px;
  .modal-form-msg {
  }
}

.modal-form-ico {
  &:empty {
    display: none;
  }
  font-weight: bold;
  color: @color1;
  background: @color2;
  .rounded(50px);
  padding: 3px 5px;
  display: inline-block;
  margin-right: 10px;
}

/***** Modal *****/

.modal-content {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: 0;
  text-align: left;
}

.modal-header {
  padding: 25px 25px 15px 25px;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #ddd;
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}

.modal-header .close {
  font-size: 36px;
  color: #888;
  font-weight: 300;
  text-shadow: none;
  opacity: 1;
}

.modal-title {
  margin-bottom: 10px;
  line-height: 30px;
}

.modal-body {
  padding: 25px 25px 30px 25px;
  background: #eee;
  text-align: left;
  -moz-border-radius: 0 0 4px 4px;
  -webkit-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
}

.modal-body img {
  margin-bottom: 15px;
}

.modal-body form textarea {
  height: 100px;
}

.modal-body form .input-error {
  border-color: #fd625e;
}

.post {
  font-size: 1.3em;
  color: @color4;
}

.categories {
  a {
    color: @color4
  }
  a:hover {
    color: @color2
  }
  .selected {
    color: @color2;
  }
}

.innerEffect {
  .inner-shadow(0px, 0px, 10px, 0.2);
  .rounded-corners(5px);
}

textarea {
  -webkit-transition: height 0.2s;
  -moz-transition: height 0.2s;
  transition: height 0.2s;
  min-height: 150px;
}

div {
  display: block;
}

header {
  display: block;
  padding: 0 0 10px 0px;
  margin: 0px 0 0px 0;
  h1 {
    margin: 0px 0px;
    text-align: center
  }

  h1 > img {
    height: auto;
    max-width: 100%;
    line-height: 1;
  }

  h2 {
    font-weight: lighter;
    color: @color1
  }

}

.cms39-nav-user {
  margin-top: 30px;
}

.css_home footer {
  background: none
}

footer {
  padding: 10px 0px;
  margin: 20px 0 0 0;
  color: @color4;
  width: 100%;
  display: block;
  font-size: 0.9em;
}

.carousel {
  margin: 0 10px 30px 10px;
}

.carousel-inner > .item > img {
  margin: 0 auto;
}

.carousel .carousel-indicators {
  bottom: -20px;
}

.cms39-nav-brand {
  padding-top: 55px;
  h1 {
    a {
      display: inline-block;
      margin: 20px 0 10px 0;
      img {
        width: 300px;
        height: auto;
      }
    }
  }
}

.navtopbar {
  background-color: @color5;
  //-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
  //box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
  height: inherit;
  position: fixed;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  width: 100%;
  z-index: 20;
  padding: 0px 0px;

  .search-logo {
    width: 79px;
    height: auto;
  }

  #searchFormInput {
    padding-left: 0px;
  }

  .nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
    background-color: transparent;
    border-color: transparent;
  }

  .navbar-nav > li > a {
    padding-top: 23px;
    padding-bottom: 23px;
    &:hover {
      background: none;
    }
  }

  a {
    color: @color4
  }
  i {
    font-size: 1.0em;
  }

  .inner_left {
    padding-top: 10px;
  }
  .inner_right {
    padding-top: 0px;
  }
}

/*clean */
body.header-clean {
  background: #EFEFEF;
  .navtopbar {
    background: @color1;
    border-bottom: #E4E4E4;
  }
  .navtopbar a {
    color: #CBCBCB
  }

  .cms39_content {
    color: @color4
  }

  header {
    margin: 30px 0 40px 0
  }
}

.prdList {
  .item img {
    width: 100%;
    border-radius: 3px 3px 0 0;
    height: auto
  }
  .item {
    border-radius: 3px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
    background: @color1;
    padding: 0px;
  }
}

.yAreaBox {
  margin: 0 0 20px 0px;
  padding: 15px;
  h4 {
    color: @color2;
    margin: 0px 0 10px 0;
    padding: 0px;
    font-weight: 800;
    i {
      margin-right: 10px;
    }

  }
  article {
    blockquote {
      font-size: 1.0em;
      font-style: italic;
      border: 0px;
      margin: 0px;
      padding: 0px;
    }
  }
}

.yjumbotron {
  padding: 10px;
}

.yardsaleSpiner {
  position: fixed;
  bottom: 5%;
  left: 50%;
}

.yardsaleGrid {
  width: 100%;
  display: block;
  .ybox {
    float: left;
    .inner {
      .rounded(2px);
      //box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
      background: @color1;
      padding: 0 0 0px 0;
      position: relative;
      margin: 5px;
      border: 1px solid @color7;
      .animate();

      &:hover {
        //box-shadow: 5px 5px 0px 0 rgba(0, 0, 0, 0.05);
        //box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.1);
        z-index: 2;
        h3 a {
          color: @color2;
        }
      }

      .price {
        margin: 10px 0px;
      }

      .photo {
        a {
          display: block;
          img {
            padding: 5px;
          }
        }

      }

      .content {
        padding: 5px;
        background: @color1;

        h3 {
          margin: 0px;
          padding: 0px;
          font-size: 1em;
          font-weight: bold;
        }

        p {
          margin: 0px;
          padding: 0px;
          color: #717171;
          font-size: 0.8em;
        }
      }
    }

    .notice {
      display: none;
      position: absolute;
      background: rgba(255, 255, 255, 0.8);
      width: 100%;
      border-radius: 3px 3px 0 0;
      padding: 4px 5px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.4);
      font-size: 0.85em;
      .comments {
        text-align: right;
        float: right;
        color: #717171;

      }
      .status.available {
        color: green;
        font-weight: bold;
      }
    }

    .photo img {
      width: 100%;
      border-radius: 3px 3px 0 0;
      height: auto;
    }

    .credits {
      position: relative;
      padding: 5px 5px 7px 5px;
      font-size: 0.8em;
      .userlink {
        line-height: 15px;
        background: @color1;
        display: block;
        text-decoration: none;
        color: @color5;
        .border-radius(0, 0px, 0px, 0);
      }

      .ddsharePRD {
        display: inline-block;
        padding: 5px;
        position: absolute;
        right: 10px;
        top: 10px;
        line-height: 1em;
      }

      .creditImg {
        float: left;
        height: 30px;
        margin-right: 5px;
        width: 30px;
      }

      .creditName {
        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
        color: #717171;
        display: block;
      }

      .creditItem .creditTitle {
        overflow: hidden;
        display: block;
      }
    }

  }
}

span.twitter-typeahead .tt-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}

span.twitter-typeahead .tt-suggestion > p {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}

span.twitter-typeahead .tt-suggestion > p:hover,
span.twitter-typeahead .tt-suggestion > p:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #428bca;
}

span.twitter-typeahead .tt-suggestion.tt-cursor {
  color: #ffffff;
  background-color: #428bca;
}

span.twitter-typeahead {
  width: 100%;
}

.input-group span.twitter-typeahead {
  display: block !important;
}

.input-group span.twitter-typeahead .tt-dropdown-menu {
  top: 32px !important;
}

.input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu {
  top: 44px !important;
}

.input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu {
  top: 28px !important;
}

/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */

/* Large desktop */
@media (min-width: 1200px)  and (max-width: 979px) {

}

@media (min-width: 992px)  and (max-width: 1199px) {
  .box {
    width: 227px
  }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 991px) {
  .box {
    width: 172px
  }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

  .box {
    width: 23%
  }
}

/* Landscape phones and down */
@media (max-width: 480px) {

  .box {
    width: 100%
  }
}

header {
}

.contentMaster {
  .contentArticle {
  }
}

footer {
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
.list-inline {
  padding-left: 0;
  list-style: none;
  margin-left: -5px;
  li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    text-align: -webkit-match-parent;
  }
}

.mtable {
  width: 100%;
  display: table;
  .mcell {
    display: table-cell;
    vertical-align: middle;
  }
}

.text-hide {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.text-right {
  text-align: right
}

.text-left {
  text-align: left
}

.text-center {
  text-align: center
}

.text-justify {
  text-align: justify
}

.relative {
  position: relative;
}

img {
  vertical-align: middle;
}

.img-full {
  width: 100%;
  height: auto
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  /* IE 6/7 fallback */
  *text-indent: -9999px;
}

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
}

.hidden {
  display: none !important;
  visibility: hidden;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.invisible {
  visibility: hidden;
}

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

/* #Media Queries
================================================== */

@screen-xs-min: 480px;
@screen-sm-min: 767px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;
@screen-xlg-min: 1800px;

/* Large devices (large desktops, 1200px and up) */
@media only screen and (min-width: @screen-xlg-min) {
  .ybox {
    //width: 300px;
    width: 12.5%;
  }

  .itemlayer {
    .ybox {
      width: 20%;
    }
  }

  .lens-modal-wrapper .lens-modal {
    width: 962px;
  }

  .lens-modal-wrapper .lens-modal-close {
    /*right: 425px;*/
  }

  .dl-horizontal {
    dt {
      width: 100px;
    }
    dd {
      margin-left: 100px;
    }
  }
}

/* Large devices (large desktops, 1200px and up) */
@media only screen and (min-width: @screen-lg-min) and (max-width: @screen-xlg-min) {
  .ybox {
    width: 16.666%;
  }

  .itemlayer {
    .ybox {
      width: 20%;
    }
  }

  .dl-horizontal {
    dt {
      width: 100px;
    }
    dd {
      margin-left: 100px;
    }
  }

  .lens-modal-wrapper .lens-modal-close {
    /*right: 115px;*/
  }

}

/* Medium devices (desktops, 992px and up) */
@media only screen and (min-width: @screen-md-min) and (max-width: @screen-lg-min) {

  .ybox {
    width: 25%;
  }

  .itemlayer {
    .ybox {
      width: 25%;
    }
  }

  .lens-modal-wrapper .lens-modal {
    width: 800px;
    margin-left: -400px;
  }

  .lens-modal-wrapper .lens-modal-close {
    /*right: 100px;*/
  }

  .dl-horizontal {
    dt {
      width: 100px;
    }
    dd {
      margin-left: 100px;
    }
  }
}

/* Small devices (tablets, 768px and up) */
@media only screen and (min-width: @screen-sm-min) and (max-width: @screen-md-min) {

  .sidebar-left {
    display: none;
  }

  .ajaxContent {
    margin: 0px 0 0px 0px;
  }

  .ybox {
    width: 33.333%;
  }

  .itemlayer {
    .ybox {
      width: 33%;
    }
  }

  .lens-modal-wrapper .lens-modal {
    width: 700px;
    margin-left: -350px;
  }

  .lens-modal-wrapper .lens-modal-close {
    /*right: 20px;*/
  }

}

/* X Small devices (tablets, 480px and up) */
@media only screen and (max-width: @screen-sm-min) {

  .sidebar-left {
    display: none;
  }

  .ajaxContent {
    margin: 0px 0 0px 0px;
  }

  .navtopbar {
    padding-bottom: 10px;
  }

  .ybox {
    width: 50%;
  }

  .itemlayer {
    .ybox {
      width: 50%;
    }
  }

  .lens-modal-wrapper .lens-modal {
    width: 96%;
    left: 2%;
    margin-left: 0px;
  }

  .lens-modal-wrapper .lens-modal-close {
    /*right: 10px;*/
  }

  .itemlayer {
    .container-fluid {
      padding: 0px;
    }
  }

}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: @color4 !important; /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links for images, or javascript/internal links
   */
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group; /* h5bp.com/t */
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

/*
less theme
*/

.reset-filter() {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}

@start-color: @color2;
@end-color: @color2;
@btn-color: @color2;
@well-bg: @color3;

@panel-default-heading-bg: @color2;
@panel-primary-heading-bg: @color2;
@panel-success-heading-bg: @color2;
@panel-info-heading-bg: @color2;
@panel-warning-heading-bg: @color2;
@panel-danger-heading-bg: @color2;
@alert-success-bg: @color2;
@alert-info-bg: @color2;
@alert-warning-bg: @color2;
@alert-danger-bg: @color2;

@input-line-height: 40px;
@input-height: 55px;
@input-group-color: @color5;
@input-group-addon-bg: @color1;
@input-group-addon-border-color: @color1;
@input-color: @color4;
@input-color-placeholder: @color5;
@input-bg: @color1;
@input-bg-disabled: @color3;
@input-border: @color1;
@input-border-focus: @color1;
@input-border-radius: 5px;
@input-border-radius-small: 0px;
@input-border-radius-large: 0px;

@label-link-hover-color: @color2;
@label-color: @color2;
@zindex-popover: 10;
@popover-max-width: 10;
@line-height-base: 1em;
@font-size-base: @font-size;
@font-family-base: @font-family;
@popover-bg: @color2;
@popover-color: @color1;
@popover-border-color: @color2;
@popover-fallback-border-color: @color2;
@popover-title-bg: @color2;
@border-radius-large: 0px;

@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;
@screen-md: 992px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: @screen-sm-min;
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
@container-tablet: (720px + @grid-gutter-width);
@container-sm: @container-tablet;
@container-desktop: (940px + @grid-gutter-width);
@container-md: @container-desktop;
@container-large-desktop: (1140px + @grid-gutter-width);
@container-lg: @container-large-desktop;

@dropdown-link-hover-bg: @color1;
@dropdown-link-active-bg: @color1;
@dropdown-bg: @color4;
@dropdown-color: @color1;
@dropdown-fallback-border: @color2;
@dropdown-border: @color2;

@border-radius-base: 5px;

@badge-color: @color1;
@badge-bg: @color2;

.badge {
  color: @badge-color;
  background-color: @badge-bg;
}

.dropdown-menu {

  background-color: @dropdown-bg;
  border: 0px solid @dropdown-fallback-border; // IE8 fallback
  border: 0px solid @dropdown-border;
  border-radius: @border-radius-base;
  .box-shadow(none);
  background-clip: padding-box;

  & > li > a {
    color: @dropdown-color;
  }

  & > li > a:hover,
  & > li > a:focus {
    //#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
    background-color: darken(@dropdown-link-hover-bg, 5%);
  }

  & > .active > a,
  & > .active > a:hover,
  & > .active > a:focus {
    //#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
    background-color: darken(@dropdown-link-active-bg, 5%);
  }
}

.popover {
  padding: 1px;
  .reset-text();
  font-size: @font-size-base;
  color: @popover-color;
  background-color: @popover-bg;
  background-clip: padding-box;
  border: 0px solid @popover-fallback-border-color;
  border: 0px solid @popover-border-color;
  border-radius: @border-radius-large;
  .box-shadow(none);

  &.right > .arrow:after {
    border-right-color: @popover-bg;
  }
  &.right > .arrow {
    border-right-color: @popover-bg;
  }

}

.popover-title {
  color: @popover-color;
  background-color: @popover-title-bg;
  border-bottom: 0px solid darken(@popover-title-bg, 5%);
  border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0;
}

div.tagsinput {
  border: 0px solid #CCC;
  background: @input-bg;
  padding: 5px;
}

.label {
  color: @label-color;

  // Add hover effects, but only for links
  a& {
    &:hover,
    &:focus {
      color: @label-link-hover-color;
    }
  }

  // Empty labels collapse automatically (not available in IE8)
  &:empty {
    display: none;
  }

  // Quick fix for labels in buttons
  .btn & {
    position: relative;
    top: -1px;
  }
}

//
// Input groups
// --------------------------------------------------

select:not([multiple]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: right 50%;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
  padding: .5em;
  padding-right: 1.5em
}

// Focus for file, radio, and checkbox
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  .tab-focus();
}

.form-control {

  //display: block;
  //width: 100%;
  //height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  //padding: @padding-base-vertical @padding-base-horizontal;
  //font-size: @font-size-base;
  //line-height: @line-height-base;
  height: @input-height;
  padding: 17px 12px;
  .rounded(@input-border-radius);
  color: @input-color;
  background-color: @input-bg;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 0px solid @input-border;
  //border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
  .box-shadow(none);
  //.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");

  // Customize the `:focus` state to imitate native WebKit styles.
  .form-control-focus();

  // Placeholder
  .placeholder();

  // Disabled and read-only inputs
  //
  // HTML5 says that controls under a fieldset > legend:first-child won't be
  // disabled if the fieldset is disabled. Due to implementation difficulty, we
  // don't honor that edge case; we style them as disabled anyway.
  &[disabled],
  &[readonly],
  fieldset[disabled] & {
    background-color: @input-bg-disabled;
    opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
  }

}

// Text input groups
// -------------------------
.input-group-addon {
  //padding: @padding-base-vertical @padding-base-horizontal;
  //font-size: @font-size-base;
  //font-weight: normal;
  //line-height: 1;
  color: @input-group-color;
  //text-align: center;
  background-color: @input-group-addon-bg;
  border: 0px solid @input-group-addon-border-color;
  border-radius: @input-border-radius;

  // Sizing
  &.input-sm {
    //padding: @padding-small-vertical @padding-small-horizontal;
    //font-size: @font-size-small;
    border-radius: @input-border-radius-small;
  }
  &.input-lg {
    //padding: @padding-large-vertical @padding-large-horizontal;
    //font-size: @font-size-large;
    border-radius: @input-border-radius-large;
  }

  // Nuke default margins from checkboxes and radios to vertically center within.
  input[type="radio"],
  input[type="checkbox"] {
    margin-top: 0;
  }
}

//
// Alerts
// --------------------------------------------------

// Common styles
.alert {
  //text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
  //@shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
  //.box-shadow(@shadow);
}

// Mixin for generating new styles
.alert-styles(@color) {
  //#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%));
  background-color: darken(@color, 0%);
  border-color: darken(@color, 0%);
}

// Apply the mixin to the alerts
.alert-success {
  .alert-styles(@alert-success-bg);
}

.alert-info {
  .alert-styles(@alert-info-bg);
}

.alert-warning {
  .alert-styles(@alert-warning-bg);
}

.alert-danger {
  .alert-styles(@alert-danger-bg);
}

//
// Panels
// --------------------------------------------------

// Common styles
.panel {
  .box-shadow(0 1px 2px rgba(0, 0, 0, .05));
}

// Mixin for generating new styles
.panel-heading-styles(@color) {
  //#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%));
  .reset-filter();
  background-color: @color;

}

// Apply the mixin to the panel headings only
.panel-default > .panel-heading {
  .panel-heading-styles(@panel-default-heading-bg);
}

.panel-primary > .panel-heading {
  .panel-heading-styles(@panel-primary-heading-bg);
}

.panel-success > .panel-heading {
  .panel-heading-styles(@panel-success-heading-bg);
}

.panel-info > .panel-heading {
  .panel-heading-styles(@panel-info-heading-bg);
}

.panel-warning > .panel-heading {
  .panel-heading-styles(@panel-warning-heading-bg);
}

.panel-danger > .panel-heading {
  .panel-heading-styles(@panel-danger-heading-bg);
}

// Common styles
.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
  @shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
  .box-shadow(@shadow);

  // Reset the shadow
  &:active,
  &.active {
    .box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    .box-shadow(none);
  }

  .badge {
    text-shadow: none;
  }
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
  outline: thin dotted;
  outline: none;
  outline-offset: 0px;
}

// Mixin for generating new styles
.btn-styles(@btn-color: @color2) {
  .rounded(@input-border-radius);
  text-shadow: none;
  color: @color1;
  //#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
  .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners; see https://github.com/twbs/bootstrap/issues/10620
  background-color: @btn-color;
  background-repeat: repeat-x;
  border-color: darken(@btn-color, 0%);
  padding: 12px 20px;

  &.btn-file {
    height: @input-height;
    padding: 17px 12px;
  }

  &:hover,
  &:focus {
    background-color: darken(@btn-color, 0%);
    background-position: 0 -15px;
    border-color: darken(@btn-color, 0%);
    color: @color1;
  }

  &:active,
  &.active {
    background-color: darken(@btn-color, 12%);
    border-color: darken(@btn-color, 12%);
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
      background-color: darken(@btn-color, 0%);
      border-color: darken(@btn-color, 0%);
      background-image: none;
      color: @color1;
    }
  }
}

// Common styles
.btn {
  // Remove the gradient for the pressed/active state
  &:active,
  &.active {
    background-image: none;
  }
}

// Apply the mixin to the buttons
.btn-default {
  .btn-styles(@color2);
}

.btn-primary {
  .btn-styles(@color2);
}

.btn-success {
  .btn-styles(@color2);
}

.btn-info {
  .btn-styles(@color2);
}

.btn-warning {
  .btn-styles(@color2);
}

.btn-danger {
  .btn-styles(@color2);
}

//
// Wells
// --------------------------------------------------

.well {
  //#gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
  background-color: @well-bg;
  border-color: darken(@well-bg, 0%);
  //@shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
  //.box-shadow(@shadow);
}

#gradient {

  // Horizontal gradient, from left to right
  //
  // Creates two color stops, start and end, by specifying a color and position for each color stop.
  // Color stops are not available in IE9 and below.
  .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
    background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
    background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12
    background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)", argb(@start-color), argb(@end-color))); // IE9 and down
  }

  // Vertical gradient, from top to bottom
  //
  // Creates two color stops, start and end, by specifying a color and position for each color stop.
  // Color stops are not available in IE9 and below.
  .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
    background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
    background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Opera 12
    background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", argb(@start-color), argb(@end-color))); // IE9 and down
  }

  .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
    background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12
    background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  }
  .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
    background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
    background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
    background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
    background-repeat: no-repeat;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)", argb(@start-color), argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
  }
  .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
    background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
    background-image: -o-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
    background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
    background-repeat: no-repeat;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", argb(@start-color), argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
  }
  .radial(@inner-color: #555; @outer-color: #333) {
    background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
    background-image: radial-gradient(circle, @inner-color, @outer-color);
    background-repeat: no-repeat;
  }
  .striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
    background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
    background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
  }
}

.text-emphasis-variant(@color) {
  color: @color;
  a&:hover,
  a&:focus {
    color: darken(@color, 10%);
  }
}

.bg-variant(@color) {
  background-color: @color;
  a&:hover,
  a&:focus {
    background-color: darken(@color, 10%);
  }
}

.tab-focus() {
  // Default
  outline: thin dotted;
  // WebKit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

// Placeholder text
.placeholder(@color: @input-color-placeholder) {
  // Firefox
  &::-moz-placeholder {
    color: @color;
    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  // Internet Explorer 10+
  &::-webkit-input-placeholder {
    color: @color;
  }
  // Safari and Chrome
}

.form-control-focus(@color: @input-border-focus) {
  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  &:focus {
    border-color: @color;
    outline: 0;
    .box-shadow(none);
  }
}

.reset-text() {
  font-family: @font-family-base;
  // We deliberately do NOT reset font-size.
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-break: auto;
  line-height: @line-height-base;
  text-align: left; // Fallback for where `start` is not supported
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
}