Update styling of .hero-map child elements

//
// SubsidyStories.eu
// Version: 1.0
// Author: Goce Mitevski
//
// =============================================================================
// Main
// =============================================================================

.reset-link-color{
  a{
    color: inherit;
  }
}

.active-country{

  &:focus{
    path{
      fill: darken(@colour-map-hover, 10%);
    }
  }

  path{
    fill: @colour-map-hover;
    cursor: pointer;
  }

}

.main-content{
  margin-top: @grid-gutter-width;
  margin-bottom: @grid-gutter-width;
}

.hero-map{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  min-height: 49.5vw;

  svg {
    background-color: white;
    overflow: visible;
  }

  a{
    &:not(.inactive-country){
      &:hover{
        .active-country;
      }
    }
  }

  .inactive-country{
    opacity: 0.3;
  }

}

.hero-sidebar{
  @media (min-width: @screen-lg-min){
    position: absolute;
    top: @grid-gutter-width*2;
  }
}

.hero-title{
  margin: @grid-gutter-width*2 0 @grid-gutter-width @grid-gutter-width/2;
  line-height: 0.9;
  font-size: @font-size-h2 * 1.5;

  @media (min-width: @screen-lg-min){
    position: relative;
    right: @grid-gutter-width/2;
  }

  a{
    /*color: inherit;*/
    transition: 100ms color ease-in-out;

    &:hover{

      text-decoration: none;

      &,
      .text-polo-blue{
        color: @colour-picton-blue;
      }
    }

    &:focus{
      transition: none;
      color: darken(@colour-picton-blue, 10%);

      .text-picton-blue,
      .text-polo-blue{
        color: inherit;
      }
    }

    &:focus,
      &:active{
      outline: none;
      text-decoration: none;
    }

  }

  @media (max-width: @screen-md-max){
    padding: @grid-gutter-width;
  }

  .text-polo-blue{
    &:first-child{
      font-size: @font-size-h1 * 2;
      @media (min-width: @screen-lg-min){
        position: relative;
        top: @grid-gutter-width/6;
        //left: (@grid-gutter-width/3) + 4;
      }
    }
    &:nth-child(2){
      margin-left: @grid-gutter-width/2 - 2;
    }
  }
}

.hero-select{

  position: relative;
  margin-top: @grid-gutter-width;
  margin-bottom: @grid-gutter-width*2;

  &:after{
    top: 20%;
    right: @grid-gutter-width/3;
    transform: scaleY(0.6);
    position: absolute;
    display: inline-block;
    content: 'V';
  }

  .form-control{
    appearance: none;
  }
}

.hero-nav{
  font-size: @hero-nav-font-size;
}

.list-hero-nav{
  .reset-link-color;

  padding-left: 0;

  @media (max-width: @screen-md-max){
    text-align: center;
    padding: @grid-gutter-width/2;
    margin-bottom: 0;
    background: lighten(@colour-gray-light, 20%);

    li{
      display: inline-block;
    }
  }

  li{
    display: inline-block;

    &:not(:last-child){
      padding-right: @grid-gutter-width;
    }

    a{
      font-size: 2rem;
      font-weight: 700;
    }
  }
}

.country-data{
  min-height: 100vh;

  @media (min-width: @screen-md-min){
    padding-right: @grid-gutter-width;
    border-right: @list-border;
  }
}

.list-country{
  .list-unstyled;
  .reset-link-color;

  margin: @grid-gutter-width 0;
  padding-left: @grid-gutter-width;
  font-size: @font-size-h3;
  font-style: italic;

  .selected{
    a{
      .text-picton-blue;
    }
  }
}

.list-lg{
  font-size: 2rem;
}

.list-md{
  font-size: 1.5rem;
}

.list-footer{
  .list-unstyled;
  .reset-link-color;

  li{
    line-height: 1.1;
    margin: @grid-gutter-width/3 0;
  }
}

.text-polo-blue{
  color: @colour-polo-blue;
}

.text-picton-blue{
  color: @colour-picton-blue;
}

.text-gray-light{
  color: @gray-light;
}

.text-block{
  display: block;
}

blockquote{
  &:before,
    &:after{
    display: inline-block;
  }
  &:before{
    content: "“";
    margin-right: @grid-gutter-width/6;

  }
  &:after{
    margin-left: @grid-gutter-width/6;
    content: "”";
  }
}

cite{
  &:before{
    content: '-';
    display: inline-block;
    margin-right: @grid-gutter-width/6;
  }
}

.content-years{
  font-size: @font-size-h3;
  color: @gray-light;
  margin-top: @grid-gutter-width/2;
  margin-bottom: @grid-gutter-width/2;

  @media (min-width: @screen-md-min){
    margin-left: @grid-gutter-width;
  }
}

.content-intro{
  margin-bottom: @grid-gutter-width*3;
}

.content-block{
  .reset-link-color;
}

.content-block-title-thin{
  font-weight: 500;
}

.content-header{
  .reset-link-color;
  margin-bottom: @grid-gutter-width;
}

.content-header-title{
  margin-top: 0;
  font-size: 6rem;
}
.content-header-buttons{
  @media (min-width: @screen-sm-min){
    text-align: right;
  }
}

.content-grid {
  .content-grid-item {
    padding: @grid-gutter-width/3;
  }
}

.content-grid-item-lg{

  h2{
    font-size: 3.5rem;
  }

  p{
    font-size: 1.5rem;
  }

}

.content-grid-item-xl{

  h2{
    font-size: 6rem;
  }

  p{
    font-size: 2rem;
  }

}

.img-center{
  margin: 0 auto;
}

.main-footer{
  padding: @grid-gutter-width*2 0 @grid-gutter-width;

  @media (max-width: @screen-sm-max){
    padding-bottom: 0;
    text-align: center;

    .content-block{
      margin: @grid-gutter-width 0;
    }
  }

  .content-block-title{
    margin-top: 0;
    margin-bottom: @grid-gutter-width - 10;
  }
}

#top-beneficiaries {
  margin-bottom: @grid-gutter-width;

  .beneficiary{
    @media (max-width: @screen-sm-max){
      margin-top: @grid-gutter-width/2;
      padding-bottom: @grid-gutter-width/2;
      margin-bottom: @grid-gutter-width/2;
      border-bottom: 1px solid lighten(@colour-gray-light, 20%);
    }
  }

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

//
// SubsidyStories.eu
// Version: 1.0
// Author: Goce Mitevski
//
// =============================================================================
// Main
// =============================================================================

.reset-link-color{
  a{
    color: inherit;
  }
}

.active-country{

  &:focus{
    path{
      fill: darken(@colour-map-hover, 10%);
    }
  }

  path{
    fill: @colour-map-hover;
    cursor: pointer;
  }

}

.main-content{
  margin-top: @grid-gutter-width;
  margin-bottom: @grid-gutter-width;
}

.hero-map{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  min-height: 49.5vw;

  svg {
    background-color: white;
    overflow: visible;
  }

  a{
    &:not(.inactive-country){
      &:hover{
        .active-country;
      }
    }
  }

  .inactive-country{
    opacity: 0.3;
  }

}

.hero-sidebar{
  @media (min-width: @screen-lg-min){
    position: absolute;
    top: 20%;
    left: @hero-nav-left;
  }
}

.hero-title{
  margin: 0;
  text-align: center;
  line-height: 0.9;
  font-size: @font-size-h2 * 1.5;

  @media (min-width: @screen-lg-min){
    position: relative;
    right: @grid-gutter-width/2;
  }

  a{
    /*color: inherit;*/
    transition: 100ms color ease-in-out;

    &:hover{

      text-decoration: none;

      &,
      .text-polo-blue{
        color: @colour-picton-blue;
      }
    }

    &:focus{
      transition: none;
      color: darken(@colour-picton-blue, 10%);

      .text-picton-blue,
      .text-polo-blue{
        color: inherit;
      }
    }

    &:focus,
      &:active{
      outline: none;
      text-decoration: none;
    }

  }

  @media (max-width: @screen-md-max){
    padding: @grid-gutter-width;
  }

  .text-polo-blue{
    &:first-child{
      font-size: @font-size-h1 * 2;
      @media (min-width: @screen-lg-min){
        position: relative;
        top: @grid-gutter-width/6;
        left: (@grid-gutter-width/3) + 4;
      }
    }
  }
}

.hero-select{

  position: relative;

  &:after{
    top: 20%;
    right: @grid-gutter-width/3;
    transform: scaleY(0.6);
    position: absolute;
    display: inline-block;
    content: 'V';
  }

  .form-control{
    appearance: none;
  }

  @media (max-width: @screen-md-max){
    margin: 0 @grid-gutter-width @grid-gutter-width;
  }

  @media (min-width: @screen-lg-min){
    margin-top: @grid-gutter-width;
    margin-bottom: @grid-gutter-width*2;
    width: @grid-gutter-width*9;
  }
}

.hero-nav{
  font-size: @hero-nav-font-size;
}

.list-hero-nav{
  .reset-link-color;

  padding-left: 0;

  @media (max-width: @screen-md-max){
    text-align: center;
    padding: @grid-gutter-width/2;
    margin-bottom: 0;
    background: lighten(@colour-gray-light, 20%);

    li{
      display: inline-block;
    }
  }

  li{
    display: block;
    padding-right: 3rem;

    a{
      font-size: 3rem;
      font-weight: 700;
    }
  }
}

.country-data{
  min-height: 100vh;

  @media (min-width: @screen-md-min){
    padding-right: @grid-gutter-width;
    border-right: @list-border;
  }
}

.list-country{
  .list-unstyled;
  .reset-link-color;

  margin: @grid-gutter-width 0;
  padding-left: @grid-gutter-width;
  font-size: @font-size-h3;
  font-style: italic;

  .selected{
    a{
      .text-picton-blue;
    }
  }
}

.list-lg{
  font-size: 2rem;
}

.list-md{
  font-size: 1.5rem;
}

.list-footer{
  .list-unstyled;
  .reset-link-color;

  li{
    line-height: 1.1;
    margin: @grid-gutter-width/3 0;
  }
}

.text-polo-blue{
  color: @colour-polo-blue;
}

.text-picton-blue{
  color: @colour-picton-blue;
}

.text-gray-light{
  color: @gray-light;
}

.text-block{
  display: block;
}

blockquote{
  &:before,
    &:after{
    display: inline-block;
  }
  &:before{
    content: "“";
    margin-right: @grid-gutter-width/6;

  }
  &:after{
    margin-left: @grid-gutter-width/6;
    content: "”";
  }
}

cite{
  &:before{
    content: '-';
    display: inline-block;
    margin-right: @grid-gutter-width/6;
  }
}

.content-years{
  font-size: @font-size-h3;
  color: @gray-light;
  margin-top: @grid-gutter-width/2;
  margin-bottom: @grid-gutter-width/2;

  @media (min-width: @screen-md-min){
    margin-left: @grid-gutter-width;
  }
}

.content-intro{
  margin-bottom: @grid-gutter-width*3;
}

.content-block{
  .reset-link-color;
}

.content-block-title-thin{
  font-weight: 500;
}

.content-header{
  .reset-link-color;
  margin-bottom: @grid-gutter-width;
}

.content-header-title{
  margin-top: 0;
}

.content-grid {
  .content-grid-item {
    padding: @grid-gutter-width/3;
  }
}

.content-grid-item-xl{

  h2{
    font-size: 6rem;
  }

  p{
    font-size: 2rem;
  }

}

.img-center{
  margin: 0 auto;
}

.main-footer{
  padding: @grid-gutter-width*2 0 @grid-gutter-width;

  @media (max-width: @screen-sm-max){
    padding-bottom: 0;
    text-align: center;

    .content-block{
      margin: @grid-gutter-width 0;
    }
  }

  .content-block-title{
    margin-top: 0;
    margin-bottom: @grid-gutter-width - 10;
  }
}

#top-beneficiaries {
  margin-bottom: @grid-gutter-width;

  .beneficiary{
    @media (max-width: @screen-sm-max){
      margin-top: @grid-gutter-width/2;
      padding-bottom: @grid-gutter-width/2;
      margin-bottom: @grid-gutter-width/2;
      border-bottom: 1px solid lighten(@colour-gray-light, 20%);
    }
  }

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


Define .list-md

Define .list-md

//
// SubsidyStories.eu
// Version: 1.0
// Author: Goce Mitevski
//
// =============================================================================
// Main
// =============================================================================

.reset-link-color{
  a{
    color: inherit;
  }
}

.active-country{

  path{
    fill: @colour-map-hover;
    cursor: pointer;
  }

}

.main-content{
  margin-top: @grid-gutter-width;
  margin-bottom: @grid-gutter-width;
}

.hero-map{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  min-height: 49.5vw;

  svg {
    background-color: white;
    overflow: visible;
  }

  a{
    &:not(.inactive-country){
      &:hover{
        .active-country;
      }
    }
  }

  .inactive-country{
    opacity: 0.3;
  }

}

.hero-title{
  margin: 0;
  text-align: center;
  line-height: 0.9;
  font-size: @font-size-h2 * 1.5;

  a{
    color: inherit;
    transition: 100ms color ease-in-out;

    &:hover{
      text-decoration: none;
      color: @colour-polo-blue;
    }

  }

  @media (max-width: @screen-md-max){
    padding: @grid-gutter-width;
  }

  @media (min-width: @screen-lg-min){
    position: absolute;
    top: 20%;
    left: @hero-nav-left - 1;
  }

  .text-polo-blue{
    font-size: @font-size-h1 * 2;
    @media (min-width: @screen-lg-min){
      position: relative;
      top: @grid-gutter-width/6;
      left: (@grid-gutter-width/3) + 3;
    }
  }
}

.hero-select{

  position: relative;

  &:after{
    top: 20%;
    right: @grid-gutter-width/3;
    transform: scaleY(0.6);
    position: absolute;
    display: inline-block;
    content: 'V';
  }

  .form-control{
    appearance: none;
  }

  @media (max-width: @screen-md-max){
    margin: 0 @grid-gutter-width @grid-gutter-width;
  }

  @media (min-width: @screen-lg-min){
    position: absolute;
    top: 40%;
    left: @hero-nav-left;
    width: @grid-gutter-width*9;
  }
}

.hero-nav{

  font-size: @hero-nav-font-size;

  @media (min-width: @screen-lg-min){
    position: absolute;
    bottom: 15%;
    left: @hero-nav-left;
  }

}

.list-hero-nav{
  .reset-link-color;

  padding-left: 0;

  @media (max-width: @screen-md-max){
    text-align: center;
    padding: @grid-gutter-width/2;
    margin-bottom: 0;
    background: lighten(@colour-gray-light, 20%);

    li{
      display: inline-block;
    }
  }

  li{
    display: block;
    padding-right: 3rem;

    a{
      font-size: 3rem;
      font-weight: 700;
    }
  }
}

.country-data{
  min-height: 100vh;
  padding-right: @grid-gutter-width;
  border-right: @list-border;
}

.list-country{
  .list-unstyled;
  .reset-link-color;

  margin: @grid-gutter-width 0;
  padding-left: (@grid-gutter-width*2)-10;
  font-size: @font-size-h3;
  font-style: italic;
}

.list-lg{
  font-size: 2rem;
}

.list-md{
  font-size: 1.5rem;
}

.list-footer{
  .list-unstyled;
  .reset-link-color;

  li{
    line-height: 1.1;
    margin: @grid-gutter-width/3 0;
  }
}

.text-polo-blue{
  color: @colour-polo-blue;
}

.text-picton-blue{
  color: @colour-picton-blue;
}

.text-gray-light{
  color: @gray-light;
}

.text-block{
  display: block;
}

blockquote{
  &:before,
    &:after{
    display: inline-block;
  }
  &:before{
    content: "“";
    margin-right: @grid-gutter-width/6;

  }
  &:after{
    margin-left: @grid-gutter-width/6;
    content: "”";
  }
}

cite{
  &:before{
    content: '-';
    display: inline-block;
    margin-right: @grid-gutter-width/6;
  }
}

.content-years{
  font-size: @font-size-h3;
  color: @gray-light;
  margin: @grid-gutter-width/2 0 @grid-gutter-width/2 (@grid-gutter-width*2)-10;
}

.content-intro{
  margin-bottom: @grid-gutter-width*3;
}

.content-block{
  .reset-link-color;
}

.content-block-title-thin{
  font-weight: 500;
}

.content-header{
  .reset-link-color;
  margin-bottom: @grid-gutter-width;
}

.content-header-title{
  margin-top: 0;
}

.content-grid {
  .content-grid-item {
    padding: @grid-gutter-width/3;
  }
}

.content-grid-item-xl{

  h2{
    font-size: 6rem;
  }

  p{
    font-size: 2rem;
  }

}

.img-center{
  margin: 0 auto;
}

.main-footer{
  padding: @grid-gutter-width*2 0 @grid-gutter-width;

  @media (max-width: @screen-sm-max){
    padding-bottom: 0;
    text-align: center;

    .content-block{
      margin: @grid-gutter-width 0;
    }
  }

  .content-block-title{
    margin-top: 0;
    margin-bottom: @grid-gutter-width - 10;
  }
}

#top-beneficiaries {
  margin-bottom: @grid-gutter-width;
}

//
// SubsidyStories.eu
// Version: 1.0
// Author: Goce Mitevski
//
// =============================================================================
// Main
// =============================================================================

.reset-link-color{
  a{
    color: inherit;
  }
}

.active-country{

  path{
    fill: @colour-map-hover;
    cursor: pointer;
  }

}

.main-content{
  margin-top: @grid-gutter-width;
  margin-bottom: @grid-gutter-width;
}

.hero-map{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  min-height: 49.5vw;

  svg {
    background-color: white;
    overflow: visible;
  }

  a{
    &:not(.inactive-country){
      &:hover{
        .active-country;
      }
    }
  }

  .inactive-country{
    opacity: 0.3;
  }

}

.hero-title{
  margin: 0;
  text-align: center;
  line-height: 0.9;
  font-size: @font-size-h2 * 1.5;

  a{
    color: inherit;
    transition: 100ms color ease-in-out;

    &:hover{
      text-decoration: none;
      color: @colour-polo-blue;
    }

  }

  @media (max-width: @screen-md-max){
    padding: @grid-gutter-width;
  }

  @media (min-width: @screen-lg-min){
    position: absolute;
    top: 20%;
    left: @hero-nav-left - 1;
  }

  .text-polo-blue{
    font-size: @font-size-h1 * 2;
    @media (min-width: @screen-lg-min){
      position: relative;
      top: @grid-gutter-width/6;
      left: (@grid-gutter-width/3) + 3;
    }
  }
}

.hero-select{

  position: relative;

  &:after{
    top: 20%;
    right: @grid-gutter-width/3;
    transform: scaleY(0.6);
    position: absolute;
    display: inline-block;
    content: 'V';
  }

  .form-control{
    appearance: none;
  }

  @media (max-width: @screen-md-max){
    margin: 0 @grid-gutter-width @grid-gutter-width;
  }

  @media (min-width: @screen-lg-min){
    position: absolute;
    top: 40%;
    left: @hero-nav-left;
    width: @grid-gutter-width*9;
  }
}

.hero-nav{

  font-size: @hero-nav-font-size;

  @media (min-width: @screen-lg-min){
    position: absolute;
    bottom: 15%;
    left: @hero-nav-left;
  }

}

.list-hero-nav{
  .reset-link-color;

  padding-left: 0;

  @media (max-width: @screen-md-max){
    text-align: center;
    padding: @grid-gutter-width/2;
    margin-bottom: 0;
    background: lighten(@colour-gray-light, 20%);

    li{
      display: inline-block;
    }
  }

  li{
    display: block;
    padding-right: 3rem;

    a{
      font-size: 3rem;
      font-weight: 700;
    }
  }
}

.country-data{
  min-height: 100vh;
  padding-right: @grid-gutter-width;
  border-right: @list-border;
}

.list-country{
  .list-unstyled;
  .reset-link-color;

  margin: @grid-gutter-width 0;
  padding-left: (@grid-gutter-width*2)-10;
  font-size: @font-size-h3;
  font-style: italic;
}

.list-lg{
  font-size: 2rem;
}

.list-footer{
  .list-unstyled;
  .reset-link-color;

  li{
    line-height: 1.1;
    margin: @grid-gutter-width/3 0;
  }
}

.text-polo-blue{
  color: @colour-polo-blue;
}

.text-picton-blue{
  color: @colour-picton-blue;
}

.text-gray-light{
  color: @gray-light;
}

.text-block{
  display: block;
}

blockquote{
  &:before,
    &:after{
    display: inline-block;
  }
  &:before{
    content: "“";
    margin-right: @grid-gutter-width/6;

  }
  &:after{
    margin-left: @grid-gutter-width/6;
    content: "”";
  }
}

cite{
  &:before{
    content: '-';
    display: inline-block;
    margin-right: @grid-gutter-width/6;
  }
}

.content-years{
  font-size: @font-size-h3;
  color: @gray-light;
  margin: @grid-gutter-width/2 0 @grid-gutter-width/2 (@grid-gutter-width*2)-10;
}

.content-intro{
  margin-bottom: @grid-gutter-width*3;
}

.content-block{
  .reset-link-color;
}

.content-block-title-thin{
  font-weight: 500;
}

.content-header{
  .reset-link-color;
  margin-bottom: @grid-gutter-width;
}

.content-header-title{
  margin-top: 0;
}

.content-grid {
  .content-grid-item {
    padding: @grid-gutter-width/3;
  }
}

.content-grid-item-xl{

  h2{
    font-size: 6rem;
  }

  p{
    font-size: 2rem;
  }

}

.img-center{
  margin: 0 auto;
}

.main-footer{
  padding: @grid-gutter-width*2 0 @grid-gutter-width;

  @media (max-width: @screen-sm-max){
    padding-bottom: 0;
    text-align: center;

    .content-block{
      margin: @grid-gutter-width 0;
    }
  }

  .content-block-title{
    margin-top: 0;
    margin-bottom: @grid-gutter-width - 10;
  }
}

/*#top-beneficiaries {
  max-height: 22rem;
  overflow: auto;

  li {
    white-space: nowrap;
  }
}*/


CSS Cleanup

CSS Cleanup

/* ==========================================================================
   General Styles
   ==========================================================================

  ==|== Available Fonts ==|==

  Trade Gothic:
  font-family: 'TradeGothicLTStdBdCnNo.20';
  font-family: 'TradeGothicLTStdLight';

  Big Noodle:
  font-family: 'BigNoodleTitlingRegular';
  font-family: 'BigNoodleTitlingOblique';

  Swiss:
  font-family: 'Swiss721Light';
  font-family: 'Swiss721Medium';
  font-family: 'Swiss721Bold';

/* ==|== Global Variables, Styles, & Utilities
=============================================================================================================== */

/* Fonts */
@import url(http://fonts.googleapis.com/css?family=Nixie+One);

@nixieOne: 'Nixie One', cursive;
@tradeGotchic: 'TradeGothicLTStdBdCnNo.20';
@tradeGotchicLight: 'TradeGothicLTStdLight';
@swissLight: 'Swiss721Light';
@bigNoodle: 'BigNoodleTitlingRegular';

/* General */
* {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  box-sizing:border-box;
}
html, body {
  position: relative;
  width:100%;
  height:100%;
  overflow: hidden;
}

/* Fullscreen Background */
.fullscreen {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1600px; /* width of the image */

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
.img-overlay {
  background-color: rgba(0, 0, 0, .65);
  z-index: 0;
}

/* ==|== Utility Classes
=============================================================================================================== */

.hardware-accel {
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}
.visible {
  opacity:1 !important;
}

/* ==|== General Styles
=============================================================================================================== */

.stage-wrapper {
  display: block;
  position: relative;
  width:100%;
  height:100%;
}
.stage {
  position: absolute;
  width:100%;
  height:100%;
  z-index: 1;
}
.info {
  top: 40%;
  position: relative;
  text-align: center;
  color:#fff;
  text-shadow:0px 0px 5px rgba(0, 0, 0, .5);

  h1 {
    font-family:@tradeGotchic;
    font-size:100px;
    line-height:120%;
  }
  h2 {
    font-family: @nixieOne;
    font-size: 35px;
    line-height: 1;
  }
  .more-info {
    color:#fff;
    &:hover {
      color:#ddd;
    }
  }
}
.profile-img {
  display: block;
  position: absolute;
  max-width:200px;
  left:50%;
  top:20%;
  margin:-100px 0 0 -100px;
  padding:5px;
  background-color:rgba(255, 255, 255, .9);
  border:1px solid #ccc;
}
.bio {
  display: block;
  position: absolute;
  top:20px;
  right:10%;
  bottom:135px;
  left:10%;
  padding:25px 35px;
  border:3px solid #555;
  background-color: rgba(0, 0, 0, .5);
  color: #fff;
  opacity: 0;
  overflow: auto;
  z-index: 9999;

  .close {
    display: block;
    position: absolute;
    top:10px;
    right:10px;
    padding:5px;
    background:rgba(255, 255, 255, .75);
  }
}
.overlay {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color:transparent;
  background-color:rgba(0, 0, 0, .10);
  z-index: 9998;
}
#social {
  display:block;
  position: absolute;
  bottom:0;
  width: 100%;
  background-color:rgba(0, 0, 0, .8);
  border-top:5px solid rgba(25, 150, 255, .8);
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .8);
  z-index: 9999;
}
.social-wrapper {
  display:block;
  position:relative;
  width:257px;
  margin:0 auto;
  padding:0;
  background-color:transparent;

  .social-icon {
    display: inline-block;
    padding:10px;
    opacity:0;
    color:#fff;
    text-shadow:0px 0px 5px #000;
    transition:all 250ms ease-in-out;

    a {
      display: block;
      color: inherit;
    }

    a i {
      opacity:.6;
      transition:all 250ms ease-in-out;
    }

    &:hover a i,
    &:active a i {
      opacity:.8;
    }
  }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) {
  .profile-img {
    display: block;
    position: absolute;
    max-width:150px;
    left:50%;
    top:20%;
    margin:-75px 0 0 -75px;
    padding:5px;
    background-color:rgba(255, 255, 255, .9);
    border:1px solid #ccc;
  }

  .info {
    top: 32%;
    position: relative;
    text-align: center;
    color:#fff;

    h1 {
      font-family:@tradeGotchic;
      font-size:75px;
      line-height:120%;
    }
    h2 {
      font-family: @nixieOne;
      font-size: 25px;
      line-height: 1;
    }
  }
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
  .profile-img {
    display: block;
    position: absolute;
    max-width:100px;
    left:50%;
    top:20%;
    margin:-75px 0 0 -75px;
    padding:5px;
    background-color:rgba(255, 255, 255, .9);
    border:1px solid #ccc;
  }

  .info {
    top: 32%;
    position: relative;
    text-align: center;
    color:#fff;

    h1 {
      font-size:75px;
      line-height:120%;
    }
    h2 {
      font-size: 25px;
      line-height: 1;
    }
  }
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

/* ==========================================================================
   General Styles
   ==========================================================================

  ==|== Available Fonts ==|==

  Trade Gothic:
  font-family: 'TradeGothicLTStdBdCnNo.20';
  font-family: 'TradeGothicLTStdLight';

  Big Noodle:
  font-family: 'BigNoodleTitlingRegular';
  font-family: 'BigNoodleTitlingOblique';

  Swiss:
  font-family: 'Swiss721Light';
  font-family: 'Swiss721Medium';
  font-family: 'Swiss721Bold';

/* ==|== Global Variables, Styles, & Utilities
=============================================================================================================== */

/* Fonts */
@import url(http://fonts.googleapis.com/css?family=Nixie+One);

@nixieOne: 'Nixie One', cursive;
@tradeGotchic: 'TradeGothicLTStdBdCnNo.20';
@tradeGotchicLight: 'TradeGothicLTStdLight';
@swissLight: 'Swiss721Light';
@bigNoodle: 'BigNoodleTitlingRegular';

/* General */
* {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  box-sizing:border-box;
}
html, body {
  position: relative;
  width:100%;
  height:100%;
  overflow: hidden;
}

/* Fullscreen Background */
.fullscreen {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1600px; /* width of the image */

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}
.img-overlay {
  background-color: rgba(0, 0, 0, .65);
  z-index: 0;
}

/* ==|== Utility Classes
=============================================================================================================== */

.hardware-accel {
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}
.visible {
  opacity:1 !important;
}

/* ==|== General Styles
=============================================================================================================== */

.stage-wrapper {
  display: block;
  position: relative;
  width:100%;
  height:100%;
}
.stage {
  position: absolute;
  width:100%;
  height:100%;
  z-index: 1;
}
.info {
  top: 40%;
  position: relative;
  text-align: center;
  color:#fff;
  text-shadow:0px 0px 5px rgba(0, 0, 0, .5);

  h1 {
    font-family:@tradeGotchic;
    font-size:100px;
    line-height:120%;
  }
  h2 {
    font-family: @nixieOne;
    font-size: 35px;
    line-height: 1;
  }
  .more-info {
    color:#fff;
    &:hover {
      color:#ddd;
    }
  }
}
.profile-img {
  display: block;
  position: absolute;
  max-width:200px;
  left:50%;
  top:20%;
  margin:-100px 0 0 -100px;
  padding:5px;
  background-color:rgba(255, 255, 255, .9);
  border:1px solid #ccc;
}
.bio {
  display: block;
  position: absolute;
  top:20px;
  right:10%;
  bottom:135px;
  left:10%;
  padding:25px 35px;
  border:3px solid #555;
  background-color: rgba(0, 0, 0, .5);
  color: #fff;
  opacity: 0;
  overflow: auto;
  z-index: 9999;

  .close {
    display: block;
    position: absolute;
    top:10px;
    right:10px;
    padding:5px;
    background:rgba(255, 255, 255, .75);
  }
}
.overlay {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color:transparent;
  background-color:rgba(0, 0, 0, .10);
  z-index: 9998;
}
#social {
  display:block;
  position: absolute;
  bottom:0;
  width: 100%;
  background-color:rgba(0, 0, 0, .8);
  border-top:5px solid rgba(25, 150, 255, .8);
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .8);
  z-index: 9999;
}
.social-wrapper {
  display:block;
  position:relative;
  width:257px;
  margin:0 auto;
  padding:0;
  background-color:transparent;

  .social-icon {
    display: inline-block;
    padding:10px;
    opacity:0;
    color:#fff;
    text-shadow:0px 0px 5px #000;
    transition:all 250ms ease-in-out;

    a {
      display: block;
      color: inherit;
    }

    a i {
      opacity:.6;
      transition:all 250ms ease-in-out;
    }

    &:hover a i,
    &:active a i {
      opacity:.8;
    }
  }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) {
  .profile-img {
    display: block;
    position: absolute;
    max-width:150px;
    left:50%;
    top:20%;
    margin:-75px 0 0 -75px;
    padding:5px;
    background-color:rgba(255, 255, 255, .9);
    border:1px solid #ccc;
  }

  .info {
    top: 32%;
    position: relative;
    text-align: center;
    color:#fff;

    h1 {
      font-family:@tradeGotchic;
      font-size:75px;
      line-height:120%;
    }
    h2 {
      font-family: @nixieOne;
      font-size: 25px;
      line-height: 1;
    }
  }
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
  .profile-img {
    display: block;
    position: absolute;
    max-width:100px;
    left:50%;
    top:20%;
    margin:-75px 0 0 -75px;
    padding:5px;
    background-color:rgba(255, 255, 255, .9);
    border:1px solid #ccc;
  }

  .info {
    top: 32%;
    position: relative;
    text-align: center;
    color:#fff;

    h1 {
      font-size:75px;
      line-height:120%;
    }
    h2 {
      font-size: 25px;
      line-height: 1;
    }
  }
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}


Initial is not supported by ie

Initial is not supported by ie

.mymaps {
  .mymapsFileUpload {
      position: relative;
      overflow: hidden;
      color: #333333;
      &:hover, &:focus {
        text-decoration: none;
        color: #262626;
        background-color: #f5f5f5;
      }
      & a {
         display: block;
         padding: 3px 20px;
         clear: both;
         font-weight: normal;
         color: #333333;
         white-space: nowrap;
      }
  }

  .mymapsFileUpload input.mymapsUpload {
      position: absolute;
      top: 0;
      right: 0;
      margin: 0;
      padding: 0;
      font-size: 20px;
      cursor: pointer;
      opacity: 0;
      filter: alpha(opacity=0);
  }

  app-mymaps {
    display: block;
    height: 100%;
    overflow: auto;
  }

  app-mymaps > div {
    padding: 10px;
  }

  hr {
    margin: 0;
  }

  .mymap-header .title {
    width: auto;
    max-width: ~"calc(100% - 15px)";
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    white-space: nowrap;
  }

  .map-owner {
    font-style: italic;
    font-size: 0.9em;
  }

  .title,
  .description,
  .no-description {
    cursor: pointer;
  }

  .features {
    > li {
      padding-left: 10px;
    }
    .feature {
      cursor: pointer;

      .icon {
        font-family: "geoportail-icons" !important;

        &.point:before {
          content: '\e901';
        }
        &.line:before {
          content: '\e900';
        }
        &.point:before {
          content: '\e901';
        }
        &.line:before {
          content: '\e900';
        }
        &.polygon:before {
          content: '\e902';
        }
      }
    }
  }

  .navbar {
    min-height: 0;
    margin-bottom: 0;
  }

  .navbar-nav > li > a {
    padding: 3px;
    background-color: transparent;
  }
  .navbar-nav > li > button {
    margin: 0px 0px 5px 0px;
  }
}
table.mymaps-list > tbody > tr {
  cursor: pointer;
}

.mymaps-list-scroll.modal-body{
    max-height: 250px;
    overflow-y: auto;
}

@media (min-height: 500px) {
    .mymaps-list-scroll.modal-body {
        max-height: 400px;
    }
}

@media (min-height: 800px) {
    .mymaps-list-scroll.modal-body {
        max-height: 600px;
    }
}

.modal-open .modal {
    color: #333333;
}

.mymaps {
  .mymapsFileUpload {
      position: relative;
      overflow: hidden;
      color: #333333;
      &:hover, &:focus {
        text-decoration: none;
        color: #262626;
        background-color: #f5f5f5;
      }
      & a {
         display: block;
         padding: 3px 20px;
         clear: both;
         font-weight: normal;
         color: #333333;
         white-space: nowrap;
      }
  }

  .mymapsFileUpload input.mymapsUpload {
      position: absolute;
      top: 0;
      right: 0;
      margin: 0;
      padding: 0;
      font-size: 20px;
      cursor: pointer;
      opacity: 0;
      filter: alpha(opacity=0);
  }

  app-mymaps {
    display: block;
    height: 100%;
    overflow: auto;
  }

  app-mymaps > div {
    padding: 10px;
  }

  hr {
    margin: 0;
  }

  .mymap-header .title {
    width: auto;
    max-width: ~"calc(100% - 15px)";
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    white-space: nowrap;
  }

  .map-owner {
    font-style: italic;
    font-size: 0.9em;
  }

  .title,
  .description,
  .no-description {
    cursor: pointer;
  }

  .features {
    > li {
      padding-left: 10px;
    }
    .feature {
      cursor: pointer;

      .icon {
        font-family: "geoportail-icons" !important;

        &.point:before {
          content: '\e901';
        }
        &.line:before {
          content: '\e900';
        }
        &.point:before {
          content: '\e901';
        }
        &.line:before {
          content: '\e900';
        }
        &.polygon:before {
          content: '\e902';
        }
      }
    }
  }

  .navbar {
    min-height: 0;
    margin-bottom: 0;
  }

  .navbar-nav > li > a {
    padding: 3px;
    background-color: transparent;
  }
  .navbar-nav > li > button {
    margin: 0px 0px 5px 0px;
  }
}
table.mymaps-list > tbody > tr {
  cursor: pointer;
}

.mymaps-list-scroll.modal-body{
    max-height: 250px;
    overflow-y: auto;
}

@media (min-height: 500px) {
    .mymaps-list-scroll.modal-body {
		max-height: 400px;
	}
}

@media (min-height: 800px) {
    .mymaps-list-scroll.modal-body {
		max-height: 600px;
	}
}

.modal-open .modal {
    color: initial;
}


Style changes to the search input. Attempting to tone it down, first iteration.

@import "bootstrap/mixins";
@import "mixins";

@headingsFontFamily: "Neo Sans", "Helvetica Neue", sans-serif;
@hdoPrimaryColor: #019ea2;

body > header {
  background: @hdoPrimaryColor 50% 0 no-repeat;
  font-family: @headingsFontFamily;
  color: #fff;
  padding-top: 60px;
  margin-bottom: -80px;
  &.jumbotron {
    margin-bottom: 0;
  }
  .logo {
    float: left;
    width: 120px;
    margin-right: 40px;
  }
  nav {
    padding-top: 13px;
    > a {
      display: inline-block;
      margin-right: 20px;
      border-bottom: 2px solid transparent;
      &, &:hover, &:active, &.active {
        color: inherit;
        text-decoration: none;
      }
      &:hover {
        border-color: #fff;
        border-color: rgba(255,255,255, 0.5);
      }
      &.active, &:active {
        border-color: #fff;
      }
    }
    > div.dropdown {
      display: inline-block;
      margin-right: 20px;
      border-bottom: 2px solid rgba(255,255,255, 0);
      > a {
        color: #fff;
        text-decoration: none;
      }
      &:hover {
        border-color: rgba(255,255,255, 0.75);
      }
      &.active, &:active {
        border-color: #fff;
      }
      .caret {
        border-top-color: #fff;
      }
    }
  }
  form.form-search .input-append {
    #appendedInputButton {
      background-color: desaturate(lighten(@hdoPrimaryColor, 35), 50);
      background-color: rgba(0,0,0, 0.2);
      border-color: rgba(0,0,0,0.25);
      box-shadow: 0 1px rgba(255,255,255,0.1),
                  0 0 0 1px rgba(255,255,255,0.1),
                  0 1px 3px rgba(0,0,0,0.1) inset;
      border-radius: 5px 0 0 5px;
      color: #fff;
      &:active, &:focus {
        background-color: rgba(0,0,0, 0.3);
        box-shadow: 0 1px rgba(255,255,255,0.1);
        border-color: rgba(0,0,0,0.3);
      }
    }
    button.btn {
      background: rgba(255,255,255, 0.6);
      border-color: rgba(0,0,0,0.5);
      border-radius: 0 5px 5px 0;
      box-shadow: 0 1px rgba(255,255,255,0.1),
                  0 0 0 1px rgba(255,255,255,0.1),
                  0 1px rgba(255,255,255,0.2) inset,
                  0 -1px rgba(0,0,0,0.05) inset;
      &:active, &:focus {
      background: rgba(255,255,255, 0.7);
      border-color: rgba(0,0,0,0.6);
      box-shadow: 0 1px rgba(255,255,255,0.1),
                  0 0 0 1px rgba(255,255,255,0.1),
                  0 1px rgba(0,0,0,0.2) inset,
                  0 0 0 3px rgba(0,0,0,0.05) inset;
      }
    }
  }
  .header-decoration {
    background-color: #fff;
    position: relative;
    height: 250px;
    margin: 100px -40px -150px -40px;
    box-shadow: 0 -1px rgba(0,0,0,0.1), 0 -2px rgba(0,0,0,0.025);
    &:before, &:after {
      position: absolute;
      content: "";
      display: block;
      height: 250px;
      width: 2px;
      top: -1px;
      background: url(/assets/bg_sheet.png) 0 0 no-repeat;
    }
    &:before {
      left: -2px;
    }
    &:after {
      right: -2px;
      background-position: 100% 0;
    }
  }
  .jumbotron {
    padding: 45px 0;
    text-align: center;
    font-size: 1.2em;
    line-height: 1.5em;
    max-width: 600px;
    margin: 0 auto;
    img {
      margin: 40px 0;
      max-width: 80%;
    }
    p {
      margin-top: 2em;
      color: #fff;
      color: rgba(255,255,255,0.75);
      a {
        color: #fff;
      }
    }
  }
}

@media (max-width: 959px) {
  body > header nav {
    .header-decoration {
      margin: 100px -15px -150px -15px;
      &:before, &:after {
        display: none;
      }
    }
  }
}

@media (max-width: 767px) {
  body > header {
    padding-top: 40px;
    .logo {
      margin-right: 0;
    }
    nav {
      display: block;
      clear: both;
      > a,
      > div.dropdown {
        margin-right: 4px;
      }
    }
    .header-decoration {
      height: 100px;
      margin: 50px -15px -20px -15px;
      border: none;
      background: #fff;
      box-shadow: 0 -1px rgba(0,0,0, 0.1), 0 -2px rgba(0,0,0,0.025);
    }
    .form-search .btn {
      line-height: 20px;
    }
    .form-search .search-query {
      width: 90px;
    }
  }
}

@import "bootstrap/mixins";
@import "mixins";

@headingsFontFamily: "Neo Sans", "Helvetica Neue", sans-serif;
@hdoPrimaryColor: #019ea2;

body > header {
  background: @hdoPrimaryColor 50% 0 no-repeat;
  font-family: @headingsFontFamily;
  color: #fff;
  padding-top: 60px;
  margin-bottom: -80px;
  &.jumbotron {
    margin-bottom: 0;
  }
  .logo {
    float: left;
    width: 120px;
    margin-right: 40px;
  }
  nav {
    padding-top: 13px;
    > a {
      display: inline-block;
      margin-right: 20px;
      border-bottom: 2px solid transparent;
      &, &:hover, &:active, &.active {
        color: inherit;
        text-decoration: none;
      }
      &:hover {
        border-color: #fff;
        border-color: rgba(255,255,255, 0.5);
      }
      &.active, &:active {
        border-color: #fff;
      }
    }
    > div.dropdown {
      display: inline-block;
      margin-right: 20px;
      border-bottom: 2px solid rgba(255,255,255, 0);
      > a {
        color: #fff;
        text-decoration: none;
      }
      &:hover {
        border-color: rgba(255,255,255, 0.75);
      }
      &.active, &:active {
        border-color: #fff;
      }
      .caret {
        border-top-color: #fff;
      }
    }
  }
  .header-decoration {
    background-color: #fff;
    position: relative;
    height: 250px;
    margin: 100px -40px -150px -40px;
    box-shadow: 0 -1px rgba(0,0,0,0.1), 0 -2px rgba(0,0,0,0.025);
    &:before, &:after {
      position: absolute;
      content: "";
      display: block;
      height: 250px;
      width: 2px;
      top: -1px;
      background: url(/assets/bg_sheet.png) 0 0 no-repeat;
    }
    &:before {
      left: -2px;
    }
    &:after {
      right: -2px;
      background-position: 100% 0;
    }
  }
  .jumbotron {
    padding: 45px 0;
    text-align: center;
    font-size: 1.2em;
    line-height: 1.5em;
    max-width: 600px;
    margin: 0 auto;
    img {
      margin: 40px 0;
      max-width: 80%;
    }
    p {
      margin-top: 2em;
      color: #fff;
      color: rgba(255,255,255,0.75);
      a {
        color: #fff;
      }
    }
  }
}

@media (max-width: 959px) {
  body > header nav {
    .header-decoration {
      margin: 100px -15px -150px -15px;
      &:before, &:after {
        display: none;
      }
    }
  }
}

@media (max-width: 767px) {
  body > header {
    padding-top: 40px;
    .logo {
      margin-right: 0;
    }
    nav {
      display: block;
      clear: both;
      > a,
      > div.dropdown {
        margin-right: 4px;
      }
    }
    .header-decoration {
      height: 100px;
      margin: 50px -15px -20px -15px;
      border: none;
      background: #fff;
      box-shadow: 0 -1px rgba(0,0,0, 0.1), 0 -2px rgba(0,0,0,0.025);
    }
    .form-search .btn {
      line-height: 20px;
    }
    .form-search .search-query {
      width: 90px;
    }
  }
}


Full width

Full width

body {
  margin: 0;
  font-family: @font-family-base;
  font-size: 16px;
  line-height: 24px;
  color: @gray;
  -webkit-font-smoothing: antialiased;
  .transition(.1s padding ease-in-out);
  overflow-x: hidden;
  background: @bgColor;
  // padding-left: @sidebar-width;
}

/**
* body.narrow
* ============================================================================
*/

body.narrow {
  background: #fff;

  .container {
    max-width: 660px !important;
  }

  footer {
    display: none;
  }
}

/**
* body.auth
* ============================================================================
*/

body.auth {
  .container {
    max-width: 400px !important;
  }
}

/**
* Container / Content
* ============================================================================
*/

.container {
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
  width: auto !important;
}

/**
* Header
* ============================================================================
*/

header {
  background: @grayDark;
  color: #fff;
  .clearfix();
  font-size: 15px;
  margin-bottom: 30px;

  .container {
    padding-right: 0;
  }

  a {
    color: #CBD4E1;

    &:hover, &:focus, &:active {
      color: #fff;
    }
  }

  .logo {
    display: block;
    float: left;
    text-align: center;
    font-size: 18px;
    color: #fff;
    margin: 2px 0 0 1px;
  }

  .icon-sentry-logo {
    line-height: 40px;
  }

  .org-selector {
    .dropdown-menu {
      top: 38px;
    }
  }

  .dropdown {
    display: block;

    .dropdown-menu {
      top: 38px;
    }
  }

  .dropdown-toggle {
    display: block;
    float: left;
    height: 40px;
    line-height: 42px;
    padding: 0 15px;

    .icon-arrow-down {
      color: #676976;
      font-size: 12px !important;
      top: 1px;
      margin-left: 4px;
    }

    .avatar {
      border-radius: 2px;
      margin-right: 6px;
      position: relative;
      top: -1px;
    }
  }

  .dropdown.open {
    .dropdown-toggle {
      color: #fff;
      background: rgba(0,0,0, .3);
    }
  }
}

.sub-header {
  background: #4b5267;
  color: #fff;
  // border-bottom: 1px solid @trim;
  position: relative;
  height: 66px;
  padding: 25px 0 0;
  margin: -30px 0 30px;
  line-height: 1;
  font-size: 16px;
  .clearfix;

  .logo-logged-in {
    position: relative;
    padding-left: 38px;
    .icon-sentry-logo {
      position: absolute;
      left: 0;
    }
  }

  .breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 0;
    white-space: nowrap;
    float: left;
    position: relative;

    > li {
      position: relative;
      font-weight: 500;

      &+li {
        padding-left: 23px;

        &:before {
          position: absolute;
          left: 9px;
          padding: 0;
        }
      }

      &.truncate {
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &:first-child {

        a {
          font-size: 0;
          padding-left: 20px;

          &:before {
            display: block;
            font-family: "sentry-simple";
            content: "\e620";
            font-size: 17px;
            position: absolute;
            left: -17px;
            top: -2px;
            height: 20px;
            width: 57px;
            line-height: 20px;
            text-align: center;
            border-right: 1px solid rgba(255, 255, 255, 0.2);
          }

          &:hover:before {
            color: #fff;
          }
        }
      }

      &:last-child {
        a {
          font-weight: 400;
          color: rgba(255,255,255, .9);

          &:hover {
            color: rgba(255,255,255, 1);
          }
        }
      }

      &:nth-child(2) {
        padding-left: 38px;
        &:before {
          display: none;
        }
      }

      &:first-child:last-child {

        &:after {
          font-weight: 400;
          content: "Home";
          padding-left: 38px;
          opacity: .6;
        }
      }
    }

    .icon-settings {
      font-size: 15px;
      color: rgba(79, 87, 96, 0.30);
      margin-left: 2px;
      position: relative;
      top: 1px;
    }

    em {
      color: #B5B9BD;
      font-style: normal;
    }
  }

  a {
    color: rgba(255,255,255, .9);
    &:hover, &:active, &:focus {
      color: rgba(255,255,255, 1);
      text-decoration: none;
    }
  }

  h1 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
  }

  .icon-sentry-logo-full, .icon-sentry-logo {
    font-size: 24px;
    position: relative;
    top: 0;
  }

  .icon-sentry-logo-full {
    top: -4px;
  }

  .nav-tabs {
    margin-top: -3px;

    li {
      margin: 0 0 0 20px;

      a {
        color: rgba(255, 255, 255, .8);
        padding-bottom: 19px;
        &:hover, &:active, &:focus {
          color: rgba(255, 255, 255, 1) !important;
        }
      }

      &.active a, &.active a:active, &.active a:hover {
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}

.range-picker {
  .dropdown-toggle {
    font-size: 18px;
    font-weight: 500;

    .icon-arrow-down {
      top: 2px;
      margin-left: 4px;
    }
  }
}

.messages-container {
  position: fixed;
  bottom: 0;
  left: 20 + @sidebar-width;
  right: 20px;
  z-index: 1000;
  margin: 0;
}

/**
* Content sidebar
* ============================================================================
*/

.content .sidebar {
  float: right;
}

/**
* Footer
* ============================================================================
*/

footer {
  line-height: 30px;
  text-align: center;
  color: lighten(@gray, 25);
  font-weight: 500;
  border-top: 1px solid lighten(@trim, 3);
  margin-top: 20px;
  padding: 28px 0;

  .pull-right {
    a {
      margin-left: 20px;
    }
  }

  a {
    color: lighten(@gray, 25);
    &:hover {
      color: @gray;
    }
  }

  .icon-sentry-logo {
    color: lighten(@gray, 25);
    font-size: 28px;
    width: 32px;
    margin: 0 auto;
    display: block;
  }
}

/**
* Windowed
* ============================================================================
*/

.windowed-small {
  background: #fbfbfc;
  padding-top: 100px;

  .container {
    max-width: 600px !important;
    width: auto !important;
    margin: 0 auto;
  }

  header {
    margin-top: -100px;
    background: none;
    margin-bottom: 30px;
  }

  footer {
    display: none;
  }
}

/**
* Print
* ============================================================================
*/

@media print {
    body {
        color: @black;
    }
    header {
        display: none;
    }
    .sidebar, .toolbar {
      display: none;
    }
    .content {
      padding: 0 !important;
    }
    #CModal, footer { display: none; }
}

/**
* Responsive small screens
* ============================================================================
*/
@media(max-width:767px) {
  body {
    overflow-x: hidden;
    zoom: .85;
  }

  header {
    padding: 15px 0 13px;

    .icon-sentry-logo {
      font-size: 16px;
      padding-top: 3px;
    }

    .dropdown, .project-dropdown {
      position: static;
      padding-top: 3px;

      .team-name {
        font-size: 14px;
      }

      .dropdown-menu {
        width: auto;
        left: 0;
        right: 0;
        top: 40px;
        border-radius: 0;
        max-height: 9999px;
        overflow-x: hidden;

        ul li {
          width: 100%;
          font-size: 16px;
          margin: 0;

          a {
            padding: 10px 20px;
            left: 0;
            margin-left: -20px;
            margin-right: -20px;
          }
        }
      }
    }
  }
}

/**
* Responsive large screens
* ============================================================================
*/

@media(min-width: 1720px) {
  body {
    zoom: 150%;
  }
}

body {
  margin: 0;
  font-family: @font-family-base;
  font-size: 16px;
  line-height: 24px;
  color: @gray;
  -webkit-font-smoothing: antialiased;
  .transition(.1s padding ease-in-out);
  overflow-x: hidden;
  background: @bgColor;
  // padding-left: @sidebar-width;
}

/**
* body.narrow
* ============================================================================
*/

body.narrow {
  background: #fff;

  .container {
    max-width: 660px !important;
  }

  footer {
    display: none;
  }
}

/**
* body.auth
* ============================================================================
*/

body.auth {
  .container {
    max-width: 400px !important;
  }
}

/**
* Container / Content
* ============================================================================
*/

.container {
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}

/**
* Header
* ============================================================================
*/

header {
  background: @grayDark;
  color: #fff;
  .clearfix();
  font-size: 15px;
  margin-bottom: 30px;

  .container {
    padding-right: 0;
  }

  a {
    color: #CBD4E1;

    &:hover, &:focus, &:active {
      color: #fff;
    }
  }

  .logo {
    display: block;
    float: left;
    text-align: center;
    font-size: 18px;
    color: #fff;
    margin: 2px 0 0 1px;
  }

  .icon-sentry-logo {
    line-height: 40px;
  }

  .org-selector {
    .dropdown-menu {
      top: 38px;
    }
  }

  .dropdown {
    display: block;

    .dropdown-menu {
      top: 38px;
    }
  }

  .dropdown-toggle {
    display: block;
    float: left;
    height: 40px;
    line-height: 42px;
    padding: 0 15px;

    .icon-arrow-down {
      color: #676976;
      font-size: 12px !important;
      top: 1px;
      margin-left: 4px;
    }

    .avatar {
      border-radius: 2px;
      margin-right: 6px;
      position: relative;
      top: -1px;
    }
  }

  .dropdown.open {
    .dropdown-toggle {
      color: #fff;
      background: rgba(0,0,0, .3);
    }
  }
}

.sub-header {
  background: #4b5267;
  color: #fff;
  // border-bottom: 1px solid @trim;
  position: relative;
  height: 66px;
  padding: 25px 0 0;
  margin: -30px 0 30px;
  line-height: 1;
  font-size: 16px;
  .clearfix;

  .logo-logged-in {
    position: relative;
    padding-left: 38px;
    .icon-sentry-logo {
      position: absolute;
      left: 0;
    }
  }

  .breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 0;
    white-space: nowrap;
    float: left;
    position: relative;

    > li {
      position: relative;
      font-weight: 500;

      &+li {
        padding-left: 23px;

        &:before {
          position: absolute;
          left: 9px;
          padding: 0;
        }
      }

      &.truncate {
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &:first-child {

        a {
          font-size: 0;
          padding-left: 20px;

          &:before {
            display: block;
            font-family: "sentry-simple";
            content: "\e620";
            font-size: 17px;
            position: absolute;
            left: -17px;
            top: -2px;
            height: 20px;
            width: 57px;
            line-height: 20px;
            text-align: center;
            border-right: 1px solid rgba(255, 255, 255, 0.2);
          }

          &:hover:before {
            color: #fff;
          }
        }
      }

      &:last-child {
        a {
          font-weight: 400;
          color: rgba(255,255,255, .9);

          &:hover {
            color: rgba(255,255,255, 1);
          }
        }
      }

      &:nth-child(2) {
        padding-left: 38px;
        &:before {
          display: none;
        }
      }

      &:first-child:last-child {

        &:after {
          font-weight: 400;
          content: "Home";
          padding-left: 38px;
          opacity: .6;
        }
      }
    }

    .icon-settings {
      font-size: 15px;
      color: rgba(79, 87, 96, 0.30);
      margin-left: 2px;
      position: relative;
      top: 1px;
    }

    em {
      color: #B5B9BD;
      font-style: normal;
    }
  }

  a {
    color: rgba(255,255,255, .9);
    &:hover, &:active, &:focus {
      color: rgba(255,255,255, 1);
      text-decoration: none;
    }
  }

  h1 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
  }

  .icon-sentry-logo-full, .icon-sentry-logo {
    font-size: 24px;
    position: relative;
    top: 0;
  }

  .icon-sentry-logo-full {
    top: -4px;
  }

  .nav-tabs {
    margin-top: -3px;

    li {
      margin: 0 0 0 20px;

      a {
        color: rgba(255, 255, 255, .8);
        padding-bottom: 19px;
        &:hover, &:active, &:focus {
          color: rgba(255, 255, 255, 1) !important;
        }
      }

      &.active a, &.active a:active, &.active a:hover {
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}

.range-picker {
  .dropdown-toggle {
    font-size: 18px;
    font-weight: 500;

    .icon-arrow-down {
      top: 2px;
      margin-left: 4px;
    }
  }
}

.messages-container {
  position: fixed;
  bottom: 0;
  left: 20 + @sidebar-width;
  right: 20px;
  z-index: 1000;
  margin: 0;
}

/**
* Content sidebar
* ============================================================================
*/

.content .sidebar {
  float: right;
}

/**
* Footer
* ============================================================================
*/

footer {
  line-height: 30px;
  text-align: center;
  color: lighten(@gray, 25);
  font-weight: 500;
  border-top: 1px solid lighten(@trim, 3);
  margin-top: 20px;
  padding: 28px 0;

  .pull-right {
    a {
      margin-left: 20px;
    }
  }

  a {
    color: lighten(@gray, 25);
    &:hover {
      color: @gray;
    }
  }

  .icon-sentry-logo {
    color: lighten(@gray, 25);
    font-size: 28px;
    width: 32px;
    margin: 0 auto;
    display: block;
  }
}

/**
* Windowed
* ============================================================================
*/

.windowed-small {
  background: #fbfbfc;
  padding-top: 100px;

  .container {
    max-width: 600px !important;
    width: auto !important;
    margin: 0 auto;
  }

  header {
    margin-top: -100px;
    background: none;
    margin-bottom: 30px;
  }

  footer {
    display: none;
  }
}

/**
* Print
* ============================================================================
*/

@media print {
    body {
        color: @black;
    }
    header {
        display: none;
    }
    .sidebar, .toolbar {
      display: none;
    }
    .content {
      padding: 0 !important;
    }
    #CModal, footer { display: none; }
}

/**
* Responsive small screens
* ============================================================================
*/
@media(max-width:767px) {
  body {
    overflow-x: hidden;
    zoom: .85;
  }

  header {
    padding: 15px 0 13px;

    .icon-sentry-logo {
      font-size: 16px;
      padding-top: 3px;
    }

    .dropdown, .project-dropdown {
      position: static;
      padding-top: 3px;

      .team-name {
        font-size: 14px;
      }

      .dropdown-menu {
        width: auto;
        left: 0;
        right: 0;
        top: 40px;
        border-radius: 0;
        max-height: 9999px;
        overflow-x: hidden;

        ul li {
          width: 100%;
          font-size: 16px;
          margin: 0;

          a {
            padding: 10px 20px;
            left: 0;
            margin-left: -20px;
            margin-right: -20px;
          }
        }
      }
    }
  }
}

/**
* Responsive large screens
* ============================================================================
*/

@media(min-width: 1720px) {
  body {
    zoom: 150%;
  }
}


new border-box default in reset

new border-box default in reset

makes a „content-box“ -override inheritable to it’s children where
necessary

/* ==========================================================================
   Helper classes
   ========================================================================== */

/* set everything to "box-sizing:border-box" –
 * the Grid won't work otherwise

 * new notation - if anything is set to "content-box", it will be able to inherit
 * this to it's child elements
 */

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/*
 * Hide visually and from screen readers:
 */

.hidden {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

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

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

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

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

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

.clearfix:after {
  clear: both;
}

/* Clearfix as a mixin: */

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

  &:after {
    clear: both;
  }
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

// responsive video
// =================================

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16/9 ratio */
  padding-top: 30px;
  /* IE6 workaround*/
  height: 0;
  overflow: hidden;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/* set everything to "box-sizing:border-box" –
 * the Grid won't work otherwise
 */

* {
  box-sizing: border-box;
}

/*
 * Hide visually and from screen readers:
 */

.hidden {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

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

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

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

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

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

.clearfix:after {
  clear: both;
}

/* Clearfix as a mixin: */

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

  &:after {
    clear: both;
  }
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

// responsive video
// =================================

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16/9 ratio */
  padding-top: 30px;
  /* IE6 workaround*/
  height: 0;
  overflow: hidden;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


Fixed upload button

Fixed upload button

/* ### fieldsets ### */
fieldset {
	padding-top: @wcfGapMedium;

	> legend {
		border-bottom: 1px solid @wcfContainerBorderColor;
		color: @wcfDimmedColor;
		font-family: @wcfHeadlineFontFamily;
		font-size: @wcfSubHeadlineFontSize;
		font-weight: bold;
		width: 100%;
		padding-bottom: @wcfGapTiny;

		.textShadow(@wcfContainerBackgroundColor);

		+ small {
			top: -7px;
			position: relative;
		}
	}

	> dl:not(:first-of-type) {
		margin-top: @wcfGapSmall;
	}

	&:not(:first-of-type) {
		margin-top: @wcfGapMedium;
	}
}

/* definition list */
dl:not(.plain) {
	position: relative;

	.clearfix();

	> dd:not(:first-of-type), > dt:not(:first-of-type) {
		margin-top: @wcfGapSmall;
	}

	> dt {
		color: @wcfLabelColor;
		float: left;
		text-align: right;
		width: 230px;

		> label {
			display: block;
		}

		/* Reversed (flips the label aside the checkbox or radio button) -
			use only when automatically generating checkboxes or radio-buttons! */
		&.reversed {
			left: 270px;
			margin-top: 2px;
			position: absolute;
			text-align: left;
			width: auto;

			~ dd > input[type='checkbox'], ~ dd > input[type='radio'] {
				margin-left: 0;
			}
		}
	}

	> dd {
		margin-left: 250px;

		> small:not(.innerError) {
			color: @wcfDimmedColor;
			display: block;
			margin-top: 2px;
		}

		> label {
			color: @wcfLabelColor;
			display: block;

			> input[type='checkbox'], > input[type='radio'] {
				margin: 2px 2px 2px 0;
			}
		}

		> input[type='checkbox'], > input[type='radio'] {
			~ small {
				margin-left: 21px;
			}
		}

		&:not(.floated) {
			> label ~ small {
				margin-left: 21px;
			}
		}

		&.floated {
			> label {
				display: inline-block;
				margin-right: @wcfGapSmall;
			}
		}

		> input, textarea, select {
			+ label {
				margin-top: 2px;
			}
		}
	}

	/* wide */
	&.wide {
		> dt {
			display: none;
		}

		> dd {
			margin-left: 0;
		}
	}

	/* disabled state */
	&.disabled {
		> dt, > dd > label {
			color: @wcfDimmedColor;
		}
	}
}

/* sidebar */
.sidebar {
	dl:not(.plain) {
		> dt {
			text-align: left;
			float: none;
			width: auto;
		}

		> dd {
			margin-top: 2px;
			margin-left: 0;
			margin-bottom: @wcfGapMedium;
		}
	}
}

/* submit buttons */
.formSubmit {
	margin-top: @wcfGapMedium;
	text-align: center;
}

/* ### inputs ### */
/* globals */
button,
input[type='reset'],
input[type='submit'],
input[type='button'],
input[type='checkbox'],
input[type='radio'],
select:not([multiple]) {
	cursor: pointer;
}

input[type='text'],
input[type='search'], /* Does not work in WebKit browsers */
input[type='date'],
input[type='email'],
input[type='number'],
input[type='url'],
input[type='password'],
textarea,
select[multiple] {
	box-sizing: border-box;
	padding: 5px 3px;
	margin: 0;
}

select {
	padding: 1px 1px 1px 3px;
	margin: 0;
}

/* normal state */
input[type='text'],
input[type='search'],
input[type='date'],
input[type='datetime'],
input[type='email'],
input[type='number'],
input[type='url'],
input[type='password'],
textarea,
select[multiple] {
	background-color: @wcfInputBackgroundColor;
	border-color: @wcfInputBorderColor;
	border-style: solid;
	border-width: 1px;
	color: @wcfInputColor;
}

/* hover */
input[type='text']:hover,
input[type='search']:hover,
input[type='date']:hover,
input[type='datetime']:hover,
input[type='email']:hover,
input[type='number']:hover,
input[type='url']:hover,
input[type='password']:hover,
textarea:hover,
select[multiple]:hover {
	background-color: @wcfInputHoverBackgroundColor;
	border-color: @wcfInputHoverBorderColor;
}

/* active / focus */
input[type='text']:active,
input[type='search']:active,
input[type='date']:active,
input[type='datetime']:active,
input[type='email']:active,
input[type='number']:active,
input[type='url']:active,
input[type='password']:active,
textarea:active,
select[multiple]:active,

input[type='text']:focus,
input[type='search']:focus,
input[type='date']:focus,
input[type='datetime']:focus,
input[type='email']:focus,
input[type='number']:focus
input[type='url']:focus,
input[type='password']:focus,
textarea:focus,
select[multiple]:focus {
	background-color: @wcfInputHoverBackgroundColor;
	border-color: @wcfInputHoverBorderColor;
	outline: 0;
}

/* read only state */
input[type='text'][readonly],
input[type='search'][readonly],
input[type='email'][readonly],
input[type='number'][readonly],
input[type='date'][readonly],
input[type='datetime'][readonly],
input[type='url'][readonly],
input[type='password'][readonly],
textarea[readonly],
select[multiple][readonly] {
	background-color: darken(@wcfInputBackgroundColor, 5%);
	border-color: @wcfInputBorderColor;
}

/* disabled state */
input[type='text'][disabled],
input[type='search'][disabled],
input[type='date'][disabled],
input[type='datetime'][disabled],
input[type='email'][disabled],
input[type='number'][disabled],
input[type='url'][disabled],
input[type='password'][disabled],
textarea[disabled],
select[multiple][disabled] {
	background-color: darken(@wcfInputBackgroundColor, 5%);
	border-color: @wcfInputBorderColor;
	color: @wcfDimmedColor;
	cursor: not-allowed;
}

/* success state */
.formSuccess {
	input[type='text'],
	input[type='search'],
	input[type='email'],
	input[type='number'],
	input[type='url'],
	input[type='password'],
	textarea {
		background-color: @wcfSuccessBackgroundColor;
		border-color: @wcfSuccessBorderColor;
	}
}

/* error state */
.formError {
	input[type='text'],
	input[type='search'],
	input[type='email'],
	input[type='number'],
	input[type='url'],
	input[type='password'],
	textarea {
		background-color: @wcfErrorBackgroundColor;
		border-color: @wcfErrorBorderColor
	}
}

/* width */
textarea {
	width: 99%;
}

.tiny {
	width: 50px;
}

.short {
	min-width: 50px;
	width: 10%;
}

.medium {
	min-width: 100px;
	width: 30%;
}

.long {
	min-width: 150px;
	width: 100%;
}

/* upload button */
.uploadButton {
	margin-top: @wcfGapSmall;
	overflow: hidden;
	position: relative;

	input {
		left: 0;
		opacity: 0;
		position: absolute;
		top: 0;
	}
}

/* todo: ckeditor fixes */
.cke_skin_kama {
	border-width: 0 !important;
	padding: 0 !important;
}

/* todo: element list with checkboxes */
.structuredList {
	background-color: @wcfContainerBackgroundColor;

	li {
		padding: @wcfGapTiny @wcfGapSmall;
		text-align: right;

		&:hover {
			background-color: @wcfButtonHoverBackgroundColor;
		}

		&:first-child {
			border-radius: @wcfContainerBorderRadius @wcfContainerBorderRadius 0 0;
		}

		&:last-child {
			border-radius: 0 0 @wcfContainerBorderRadius @wcfContainerBorderRadius;
		}

		&.category {
			/* TODO: This color was @wcfNavigationBackgroundColor which does not exist anymore */
			background-color: @wcfNavigationHeaderBackgroundColor;

			&:hover {
				background-color: @wcfButtonHoverBackgroundColor;
			}
		}

		span {
			float: left;
		}

		label {
			cursor: pointer;
			margin: 0 @wcfGapSmall;
			padding: 0 @wcfGapLarge;
		}
	}
}

/* todo: missing doc */
.editableItemList ul li {
	cursor: pointer;
	margin-left: @wcfGapTiny;

	&:first-child {
		margin-left: 0;
	}
}

/* todo */
select > option {
	/* Fixes weird firefox bug */
	display: block !important;
}

/* ### fieldsets ### */
fieldset {
	padding-top: @wcfGapMedium;

	> legend {
		border-bottom: 1px solid @wcfContainerBorderColor;
		color: @wcfDimmedColor;
		font-family: @wcfHeadlineFontFamily;
		font-size: @wcfSubHeadlineFontSize;
		font-weight: bold;
		width: 100%;
		padding-bottom: @wcfGapTiny;

		.textShadow(@wcfContainerBackgroundColor);

		+ small {
			top: -7px;
			position: relative;
		}
	}

	> dl:not(:first-of-type) {
		margin-top: @wcfGapSmall;
	}

	&:not(:first-of-type) {
		margin-top: @wcfGapMedium;
	}
}

/* definition list */
dl:not(.plain) {
	position: relative;

	.clearfix();

	> dd:not(:first-of-type), > dt:not(:first-of-type) {
		margin-top: @wcfGapSmall;
	}

	> dt {
		color: @wcfLabelColor;
		float: left;
		text-align: right;
		width: 230px;

		> label {
			display: block;
		}

		/* Reversed (flips the label aside the checkbox or radio button) -
			use only when automatically generating checkboxes or radio-buttons! */
		&.reversed {
			left: 270px;
			margin-top: 2px;
			position: absolute;
			text-align: left;
			width: auto;

			~ dd > input[type='checkbox'], ~ dd > input[type='radio'] {
				margin-left: 0;
			}
		}
	}

	> dd {
		margin-left: 250px;

		> small:not(.innerError) {
			color: @wcfDimmedColor;
			display: block;
			margin-top: 2px;
		}

		> label {
			color: @wcfLabelColor;
			display: block;

			> input[type='checkbox'], > input[type='radio'] {
				margin: 2px 2px 2px 0;
			}
		}

		> input[type='checkbox'], > input[type='radio'] {
			~ small {
				margin-left: 21px;
			}
		}

		&:not(.floated) {
			> label ~ small {
				margin-left: 21px;
			}
		}

		&.floated {
			> label {
				display: inline-block;
				margin-right: @wcfGapSmall;
			}
		}

		> input, textarea, select {
			+ label {
				margin-top: 2px;
			}
		}
	}

	/* wide */
	&.wide {
		> dt {
			display: none;
		}

		> dd {
			margin-left: 0;
		}
	}

	/* disabled state */
	&.disabled {
		> dt, > dd > label {
			color: @wcfDimmedColor;
		}
	}
}

/* sidebar */
.sidebar {
	dl:not(.plain) {
		> dt {
			text-align: left;
			float: none;
			width: auto;
		}

		> dd {
			margin-top: 2px;
			margin-left: 0;
			margin-bottom: @wcfGapMedium;
		}
	}
}

/* submit buttons */
.formSubmit {
	margin-top: @wcfGapMedium;
	text-align: center;
}

/* ### inputs ### */
/* globals */
button,
input[type='reset'],
input[type='submit'],
input[type='button'],
input[type='checkbox'],
input[type='radio'],
select:not([multiple]) {
	cursor: pointer;
}

input[type='text'],
input[type='search'], /* Does not work in WebKit browsers */
input[type='date'],
input[type='email'],
input[type='number'],
input[type='url'],
input[type='password'],
textarea,
select[multiple] {
	box-sizing: border-box;
	padding: 5px 3px;
	margin: 0;
}

select {
	padding: 1px 1px 1px 3px;
	margin: 0;
}

/* normal state */
input[type='text'],
input[type='search'],
input[type='date'],
input[type='datetime'],
input[type='email'],
input[type='number'],
input[type='url'],
input[type='password'],
textarea,
select[multiple] {
	background-color: @wcfInputBackgroundColor;
	border-color: @wcfInputBorderColor;
	border-style: solid;
	border-width: 1px;
	color: @wcfInputColor;
}

/* hover */
input[type='text']:hover,
input[type='search']:hover,
input[type='date']:hover,
input[type='datetime']:hover,
input[type='email']:hover,
input[type='number']:hover,
input[type='url']:hover,
input[type='password']:hover,
textarea:hover,
select[multiple]:hover {
	background-color: @wcfInputHoverBackgroundColor;
	border-color: @wcfInputHoverBorderColor;
}

/* active / focus */
input[type='text']:active,
input[type='search']:active,
input[type='date']:active,
input[type='datetime']:active,
input[type='email']:active,
input[type='number']:active,
input[type='url']:active,
input[type='password']:active,
textarea:active,
select[multiple]:active,

input[type='text']:focus,
input[type='search']:focus,
input[type='date']:focus,
input[type='datetime']:focus,
input[type='email']:focus,
input[type='number']:focus
input[type='url']:focus,
input[type='password']:focus,
textarea:focus,
select[multiple]:focus {
	background-color: @wcfInputHoverBackgroundColor;
	border-color: @wcfInputHoverBorderColor;
	outline: 0;
}

/* read only state */
input[type='text'][readonly],
input[type='search'][readonly],
input[type='email'][readonly],
input[type='number'][readonly],
input[type='date'][readonly],
input[type='datetime'][readonly],
input[type='url'][readonly],
input[type='password'][readonly],
textarea[readonly],
select[multiple][readonly] {
	background-color: darken(@wcfInputBackgroundColor, 5%);
	border-color: @wcfInputBorderColor;
}

/* disabled state */
input[type='text'][disabled],
input[type='search'][disabled],
input[type='date'][disabled],
input[type='datetime'][disabled],
input[type='email'][disabled],
input[type='number'][disabled],
input[type='url'][disabled],
input[type='password'][disabled],
textarea[disabled],
select[multiple][disabled] {
	background-color: darken(@wcfInputBackgroundColor, 5%);
	border-color: @wcfInputBorderColor;
	color: @wcfDimmedColor;
	cursor: not-allowed;
}

/* success state */
.formSuccess {
	input[type='text'],
	input[type='search'],
	input[type='email'],
	input[type='number'],
	input[type='url'],
	input[type='password'],
	textarea {
		background-color: @wcfSuccessBackgroundColor;
		border-color: @wcfSuccessBorderColor;
	}
}

/* error state */
.formError {
	input[type='text'],
	input[type='search'],
	input[type='email'],
	input[type='number'],
	input[type='url'],
	input[type='password'],
	textarea {
		background-color: @wcfErrorBackgroundColor;
		border-color: @wcfErrorBorderColor
	}
}

/* width */
textarea {
	width: 99%;
}

.tiny {
	width: 50px;
}

.short {
	min-width: 50px;
	width: 10%;
}

.medium {
	min-width: 100px;
	width: 30%;
}

.long {
	min-width: 150px;
	width: 100%;
}

/* upload button */
.uploadButton {
	overflow: hidden;
	position: relative;

	input {
		left: 0;
		opacity: 0;
		position: absolute;
		top: 0;
	}
}

/* todo: ckeditor fixes */
.cke_skin_kama {
	border-width: 0 !important;
	padding: 0 !important;
}

/* todo: element list with checkboxes */
.structuredList {
	background-color: @wcfContainerBackgroundColor;

	li {
		padding: @wcfGapTiny @wcfGapSmall;
		text-align: right;

		&:hover {
			background-color: @wcfButtonHoverBackgroundColor;
		}

		&:first-child {
			border-radius: @wcfContainerBorderRadius @wcfContainerBorderRadius 0 0;
		}

		&:last-child {
			border-radius: 0 0 @wcfContainerBorderRadius @wcfContainerBorderRadius;
		}

		&.category {
			/* TODO: This color was @wcfNavigationBackgroundColor which does not exist anymore */
			background-color: @wcfNavigationHeaderBackgroundColor;

			&:hover {
				background-color: @wcfButtonHoverBackgroundColor;
			}
		}

		span {
			float: left;
		}

		label {
			cursor: pointer;
			margin: 0 @wcfGapSmall;
			padding: 0 @wcfGapLarge;
		}
	}
}

/* todo: missing doc */
.editableItemList ul li {
	cursor: pointer;
	margin-left: @wcfGapTiny;

	&:first-child {
		margin-left: 0;
	}
}

/* todo */
select > option {
	/* Fixes weird firefox bug */
	display: block !important;
}


Fixed poll-related overflow issues

Fixed poll-related overflow issues

#pollOptionContainer .sortableList {
	padding: @wcfGapSmall 0;

	.sortableNode {
		margin-top: @wcfGapSmall;

		.sortableButtonContainer > img {
			cursor: pointer;
			margin-right: @wcfGapMedium;
		}
	}
}

.pollContainer {
	float: left;
	margin: 0 @wcfGapMedium @wcfGapSmall 0;
	max-width: 50%;
	min-width: 300px;

	> .formSubmit {
		background-color: @wcfContainerAccentBackgroundColor;
		border-top: 1px solid @wcfContainerBorderColor;
		margin: @wcfGapMedium -@wcfGapLarge -@wcfGapMedium -@wcfGapLarge;
		padding: 10px 0;
	}
}

.pollInnerContainer {
	> p:first-of-type {
		margin-top: @wcfGapSmall;
	}
}

.pollResultList {
	li {
		margin-bottom: 8px;
		padding: 1px 0;
		position: relative;
		z-index: 0;

		.transition(background-color, .1s);

		&:last-child {
			margin-bottom: 0px;
		}

		&:hover {
			background-color: @wcfContainerAccentBackgroundColor;
			border-radius: 0 5px 5px 0;
		}

		.pollMeter {
			background-color: @wcfContainerHoverBackgroundColor;
			border-radius: 0 5px 5px 0;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			z-index: -1;
		}

		.caption {
			color: @wcfLinkColor;
			padding: 2px 0;

			.optionName {
				display: block;
				padding: 0 3.5em 0 @wcfGapSmall;
			}

			.relativeVotes {
				position: absolute;
				right: 7px;
				top: 3px;
			}
		}
	}
}

@media only screen and (max-width: 800px) {
	.pollContainer > .formSubmit {
		margin: @wcfGapMedium -@wcfGapMedium -@wcfGapSmall -@wcfGapMedium;
	}
}

#pollOptionContainer .sortableList {
	padding: @wcfGapSmall 0;

	.sortableNode {
		margin-top: @wcfGapSmall;

		.sortableButtonContainer > img {
			cursor: pointer;
			margin-right: @wcfGapMedium;
		}
	}
}

.pollContainer {
	float: left;
	margin: 0 @wcfGapMedium @wcfGapSmall 0;
	max-width: 50%;
	min-width: 300px;

	> .formSubmit {
		background-color: @wcfContainerAccentBackgroundColor;
		border-top: 1px solid @wcfContainerBorderColor;
		margin: @wcfGapMedium -@wcfGapLarge -@wcfGapMedium -@wcfGapLarge;
		padding: 10px 0;
	}
}

.pollInnerContainer {
	> p:first-of-type {
		margin-top: @wcfGapSmall;
	}
}

.pollResultList {
	li {
		margin-bottom: 8px;
		padding: 1px 0;
		position: relative;
		z-index: 0;

		.transition(background-color, .1s);

		&:last-child {
			margin-bottom: 0px;
		}

		&:hover {
			background-color: @wcfContainerAccentBackgroundColor;
			border-radius: 0 5px 5px 0;
		}

		.pollMeter {
			background-color: @wcfContainerHoverBackgroundColor;
			border-radius: 0 5px 5px 0;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			z-index: -1;
		}

		.caption {
			color: @wcfLinkColor;
			padding: 2px 0;

			.optionName {
				display: inline-block;
				padding: 0 2.5em 0 @wcfGapSmall;
			}

			.relativeVotes {
				position: absolute;
				right: 7px;
				top: 3px;
			}
		}
	}
}

@media only screen and (max-width: 800px) {
	.pollContainer > .formSubmit {
		margin: @wcfGapMedium -@wcfGapMedium -@wcfGapSmall -@wcfGapMedium;
	}
}