Always show vertical scrollbar

Always show vertical scrollbar

Show the vertical scrollbar as inactive when content of the site
don't require any scrolling, instead of not showing anything.
This avoids the annoying "jumps" when you switch between
pages that require scrolling vs don't require scrolling.

body {
  background: @fl-body-bg;
  color: @fl-body-color;
  overflow-y: scroll;
}
.container-narrow {
  max-width: 500px;
  margin: 0 auto;
}
.global-page {
  overflow-x: hidden;
  min-height: 100vh;
}
#assets-loading {
  color: @fl-body-muted-color;
  font-size: 16px;
  padding: 20px;
}

// ------------------------------------
// Page Toolbar

.toolbar() {
  background: fade(@fl-hdr-bg, 98%);
  transform: translateZ(0); // Fix for Chrome bug where a transparent white background is actually gray
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: @zindex-navbar-fixed;
  border-bottom: 1px solid @fl-body-control-bg;
  .transition(~"box-shadow 0.2s, left 0.2s");

  @media @phone {
    height: @mobile-header-height;
  }
  @media @tablet, @desktop, @desktop-hd {
    height: @header-height;
  }
}

// Fix a solid white box to the top of the viewport. This toolbar's contents
// will differ depending on the device: on phones it will be content
// controls, whereas on desktops it will be the header. We will overlay
// these things on top of it later.
.global-page:before {
  content: " ";
  .toolbar();
  border-bottom: 0;

  .scrolled & {
    .box-shadow(0 2px 6px @fl-shadow-color);
  }

  // PHONES: Push the toolbar to the right when the drawer is open.
  @media @phone {
    .drawer-open & {
      left: @drawer-width;
    }
  }
}

// PHONES: Somewhere on the page there will be a .back-button, a .primary-
// control, and a .title-control. We will position these on the left, right,
// and center of the header respectively.
@media @phone {
  .primary-control, .title-control, .back-control {
    position: fixed;
    z-index: @zindex-navbar-fixed + 1;
    top: 5px;
    margin: 0;

    & .btn {
      float: none;
      background: transparent !important;
      .box-shadow(~"none !important");

      &:active {
        opacity: 0.5;
      }
    }
  }
  .primary-control {
    width: auto;
    right: 5px;
    .transition(right 0.2s);

    .drawer-open .global-page & {
      right: -@drawer-width;
    }

    & .dropdown-split {
      & .btn, & .icon-caret {
        display: none;
      }
      & .dropdown-toggle {
        display: block;
      }
    }
  }
  .primary-control, .back-control {
    & .btn {
      color: @fl-hdr-control-color !important;
      padding-left: 5px;
      padding-right: 5px;

      & .icon-glyph {
        display: block;
        font-size: 18px;
      }
      & .label {
        display: none;
      }
    }
  }
  .title-control {
    width: 200px;
    left: 50%;
    margin-left: -100px;
    text-align: center;
    .transition(margin-left 0.2s);

    .drawer-open .global-page & {
      margin-left: -100px + @drawer-width;
    }

    &, & .btn {
      color: @fl-hdr-color;
      font-size: 16px;
    }
  }
  .back-control {
    left: 5px;
    .transition(left 0.2s);

    .drawer-open .global-page & {
      left: @drawer-width + 10px;
    }

    & .pin {
      display: none;
    }
  }
}

// ------------------------------------
// Drawer

// This is a mixin which styles components (buttons, inputs, etc.) for use in
// the drawer. We define it as a mixin because it is also pulled in when
// styling a "colored header".
.drawer-components() {
  .header-title {
    &, & a {
      color: @fl-drawer-color;
    }
  }
  &, & a, & .btn-link {
    color: @fl-drawer-control-color;
  }
  & .form-control {
    background: @fl-drawer-control-bg;
    border: 0;
    color: @fl-drawer-control-color;
    .placeholder(@fl-drawer-control-color);

    &:focus {
      background: fadein(@fl-drawer-control-bg, 5%);
    }
  }
  & .search-input:before {
    color: @fl-drawer-control-color;
  }
  & .btn-default, & .btn-default:hover {
    background: @fl-drawer-control-bg;
    color: @fl-drawer-control-color;
  }
  & .btn-default.active, .open > .dropdown-toggle.btn-default {
    background: fadein(@fl-drawer-control-bg, 5%);
    color: @fl-drawer-control-color;
  }
  & .btn-naked {
    background: transparent;
  }
}

// On phones, the drawer is displayed in its semantic sense: as a drawer on
// the left side of the screen. On other devices, the drawer has no specific
// appearance.
@media @phone {
  .drawer-open {
    overflow: hidden;
  }
  .global-drawer {
    background: @fl-drawer-bg;
    color: @fl-drawer-color;
    width: @drawer-width;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
    .transition(visibility 0s 0.2s);

    .drawer-components();

    .drawer-open & {
      visibility: visible;
      transition-delay: 0s;
    }

    & .dropdown-menu {
      width: @drawer-width !important;
    }
  }
}

// ------------------------------------
// Header

.header-controls {
  margin: 0;
  padding: 0;
  list-style: none;
}

// On phones, the header is displayed inside of the drawer. We lay its
// contents out vertically.
@media @phone {
  .global-header {
    & .container {
      padding: 0;
    }
    & .back-button {
      display: none;
    }
  }
  .header-title {
    border-bottom: 1px solid @fl-drawer-control-bg;
    font-size: 16px;
    font-weight: normal;
    margin: 0;
    line-height: @mobile-header-height;
    white-space: nowrap;
    text-align: center;
  }
  .header-controls {
    & > li {
      padding: 10px 10px 0;
    }
    & .form-control, & .btn-group, & .btn {
      width: 100%;
      text-align: left;
    }
    & .dropdown-menu {
      & .btn-group, & .btn {
        width: auto;
      }
    }
  }
}

// On other devices, we stick the header up the top of the page, overlaying
// the page toolbar that we styled earlier. We lay its contents out
// horizontally.
@media @tablet, @desktop, @desktop-hd {
  .back-button.back-control {
    display: none;
  }
  .global-header {
    padding: 10px;
    height: @header-height;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: @zindex-navbar-fixed;
    .clearfix();

    & when (@fl-colored-hdr = true) {
      .drawer-components();
    }

    & .back-button {
      float: left;
      margin-right: 25px;
    }
  }
  .header-controls {
    &, & > li {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .header-primary {
    float: left;
  }
  .header-title {
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    line-height: 36px;

    &, & a {
      color: @fl-hdr-color;
    }
  }
  .header-secondary {
    float: right;

    & .search-input {
      margin-right: 10px;

      &:focus {
        width: 400px;
      }
    }
  }
}

// ------------------------------------
// Content Area

.global-content {
  border-top: 1px solid @fl-body-control-bg;
}

// On phones, the content area overlays the drawer, so we must give it a
// background and min-height so it cannot be seen through. When the drawer is
// meant to be open, we slide the content to the right to reveal the drawer.
@media @phone {
  .global-content {
    background: @fl-body-bg;
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 15px;
    margin-top: @mobile-header-height;
    .box-shadow(0 0 6px @fl-shadow-color);
    .transition(margin-left 0.2s);

    .drawer-open & {
      margin-left: @drawer-width;
    }
  }
}

@media @tablet, @desktop, @desktop-hd {
  .global-content {
    margin-top: @header-height;
  }
}

// ------------------------------------
// Footer

.footer-primary, .footer-secondary {
  margin: 0;
  padding: 0;
  list-style: none;

  & > li {
    display: inline-block;
    vertical-align: middle;
  }
}

// On phones, the footer is displayed at the bottom of the drawer. The
// footer's primary controls  don't display, but the secondary ones do.
// @todo Maybe we should reverse the naming of primary/secondary then?
@media @phone {
  .global-footer {
    position: fixed;
    left: 15px;
    bottom: 15px;
    width: @drawer-width;
    margin: 0;
    z-index: 1;

    & .container {
      padding: 0;
    }
  }
  .footer-primary {
    display: none;
  }
  .footer-secondary {
    float: none;

    & > li {
      margin-right: 15px;
    }
  }
}

// On other devices, we put the footer at the bottom of the page by absolutely
// positioning it, relative to the page which we pad out at the bottom. We
// show the primary controls on the left, and the secondary controls on the
// right.
@media @tablet, @desktop, @desktop-hd {
  .global-page {
    padding-bottom: 100px;
    position: relative;
  }
  .global-footer {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;

    &, & a {
      color: @fl-body-muted-more-color;
    }
    & a {
      &:hover,
      &:focus {
        text-decoration: none;
        color: @link-hover-color;
      }
    }
  }
  .footer-primary {
    display: inline-block;

    & > li {
      margin-right: 15px;
    }
  }
  .footer-secondary {
    float: right;

    & > li {
      margin-left: 15px;
    }
  }
}

// ------------------------------------
// Miscellaneous

// On phones, we disregard "affixed" elements and make them static.
@media @phone {
  .affix {
    position: static;
  }
}

body {
  background: @fl-body-bg;
  color: @fl-body-color;
}
.container-narrow {
  max-width: 500px;
  margin: 0 auto;
}
.global-page {
  overflow-x: hidden;
  min-height: 100vh;
}
#assets-loading {
  color: @fl-body-muted-color;
  font-size: 16px;
  padding: 20px;
}

// ------------------------------------
// Page Toolbar

.toolbar() {
  background: fade(@fl-hdr-bg, 98%);
  transform: translateZ(0); // Fix for Chrome bug where a transparent white background is actually gray
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: @zindex-navbar-fixed;
  border-bottom: 1px solid @fl-body-control-bg;
  .transition(~"box-shadow 0.2s, left 0.2s");

  @media @phone {
    height: @mobile-header-height;
  }
  @media @tablet, @desktop, @desktop-hd {
    height: @header-height;
  }
}

// Fix a solid white box to the top of the viewport. This toolbar's contents
// will differ depending on the device: on phones it will be content
// controls, whereas on desktops it will be the header. We will overlay
// these things on top of it later.
.global-page:before {
  content: " ";
  .toolbar();
  border-bottom: 0;

  .scrolled & {
    .box-shadow(0 2px 6px @fl-shadow-color);
  }

  // PHONES: Push the toolbar to the right when the drawer is open.
  @media @phone {
    .drawer-open & {
      left: @drawer-width;
    }
  }
}

// PHONES: Somewhere on the page there will be a .back-button, a .primary-
// control, and a .title-control. We will position these on the left, right,
// and center of the header respectively.
@media @phone {
  .primary-control, .title-control, .back-control {
    position: fixed;
    z-index: @zindex-navbar-fixed + 1;
    top: 5px;
    margin: 0;

    & .btn {
      float: none;
      background: transparent !important;
      .box-shadow(~"none !important");

      &:active {
        opacity: 0.5;
      }
    }
  }
  .primary-control {
    width: auto;
    right: 5px;
    .transition(right 0.2s);

    .drawer-open .global-page & {
      right: -@drawer-width;
    }

    & .dropdown-split {
      & .btn, & .icon-caret {
        display: none;
      }
      & .dropdown-toggle {
        display: block;
      }
    }
  }
  .primary-control, .back-control {
    & .btn {
      color: @fl-hdr-control-color !important;
      padding-left: 5px;
      padding-right: 5px;

      & .icon-glyph {
        display: block;
        font-size: 18px;
      }
      & .label {
        display: none;
      }
    }
  }
  .title-control {
    width: 200px;
    left: 50%;
    margin-left: -100px;
    text-align: center;
    .transition(margin-left 0.2s);

    .drawer-open .global-page & {
      margin-left: -100px + @drawer-width;
    }

    &, & .btn {
      color: @fl-hdr-color;
      font-size: 16px;
    }
  }
  .back-control {
    left: 5px;
    .transition(left 0.2s);

    .drawer-open .global-page & {
      left: @drawer-width + 10px;
    }

    & .pin {
      display: none;
    }
  }
}

// ------------------------------------
// Drawer

// This is a mixin which styles components (buttons, inputs, etc.) for use in
// the drawer. We define it as a mixin because it is also pulled in when
// styling a "colored header".
.drawer-components() {
  .header-title {
    &, & a {
      color: @fl-drawer-color;
    }
  }
  &, & a, & .btn-link {
    color: @fl-drawer-control-color;
  }
  & .form-control {
    background: @fl-drawer-control-bg;
    border: 0;
    color: @fl-drawer-control-color;
    .placeholder(@fl-drawer-control-color);

    &:focus {
      background: fadein(@fl-drawer-control-bg, 5%);
    }
  }
  & .search-input:before {
    color: @fl-drawer-control-color;
  }
  & .btn-default, & .btn-default:hover {
    background: @fl-drawer-control-bg;
    color: @fl-drawer-control-color;
  }
  & .btn-default.active, .open > .dropdown-toggle.btn-default {
    background: fadein(@fl-drawer-control-bg, 5%);
    color: @fl-drawer-control-color;
  }
  & .btn-naked {
    background: transparent;
  }
}

// On phones, the drawer is displayed in its semantic sense: as a drawer on
// the left side of the screen. On other devices, the drawer has no specific
// appearance.
@media @phone {
  .drawer-open {
    overflow: hidden;
  }
  .global-drawer {
    background: @fl-drawer-bg;
    color: @fl-drawer-color;
    width: @drawer-width;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
    .transition(visibility 0s 0.2s);

    .drawer-components();

    .drawer-open & {
      visibility: visible;
      transition-delay: 0s;
    }

    & .dropdown-menu {
      width: @drawer-width !important;
    }
  }
}

// ------------------------------------
// Header

.header-controls {
  margin: 0;
  padding: 0;
  list-style: none;
}

// On phones, the header is displayed inside of the drawer. We lay its
// contents out vertically.
@media @phone {
  .global-header {
    & .container {
      padding: 0;
    }
    & .back-button {
      display: none;
    }
  }
  .header-title {
    border-bottom: 1px solid @fl-drawer-control-bg;
    font-size: 16px;
    font-weight: normal;
    margin: 0;
    line-height: @mobile-header-height;
    white-space: nowrap;
    text-align: center;
  }
  .header-controls {
    & > li {
      padding: 10px 10px 0;
    }
    & .form-control, & .btn-group, & .btn {
      width: 100%;
      text-align: left;
    }
    & .dropdown-menu {
      & .btn-group, & .btn {
        width: auto;
      }
    }
  }
}

// On other devices, we stick the header up the top of the page, overlaying
// the page toolbar that we styled earlier. We lay its contents out
// horizontally.
@media @tablet, @desktop, @desktop-hd {
  .back-button.back-control {
    display: none;
  }
  .global-header {
    padding: 10px;
    height: @header-height;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: @zindex-navbar-fixed;
    .clearfix();

    & when (@fl-colored-hdr = true) {
      .drawer-components();
    }

    & .back-button {
      float: left;
      margin-right: 25px;
    }
  }
  .header-controls {
    &, & > li {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .header-primary {
    float: left;
  }
  .header-title {
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    line-height: 36px;

    &, & a {
      color: @fl-hdr-color;
    }
  }
  .header-secondary {
    float: right;

    & .search-input {
      margin-right: 10px;

      &:focus {
        width: 400px;
      }
    }
  }
}

// ------------------------------------
// Content Area

.global-content {
  border-top: 1px solid @fl-body-control-bg;
}

// On phones, the content area overlays the drawer, so we must give it a
// background and min-height so it cannot be seen through. When the drawer is
// meant to be open, we slide the content to the right to reveal the drawer.
@media @phone {
  .global-content {
    background: @fl-body-bg;
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 15px;
    margin-top: @mobile-header-height;
    .box-shadow(0 0 6px @fl-shadow-color);
    .transition(margin-left 0.2s);

    .drawer-open & {
      margin-left: @drawer-width;
    }
  }
}

@media @tablet, @desktop, @desktop-hd {
  .global-content {
    margin-top: @header-height;
  }
}

// ------------------------------------
// Footer

.footer-primary, .footer-secondary {
  margin: 0;
  padding: 0;
  list-style: none;

  & > li {
    display: inline-block;
    vertical-align: middle;
  }
}

// On phones, the footer is displayed at the bottom of the drawer. The
// footer's primary controls  don't display, but the secondary ones do.
// @todo Maybe we should reverse the naming of primary/secondary then?
@media @phone {
  .global-footer {
    position: fixed;
    left: 15px;
    bottom: 15px;
    width: @drawer-width;
    margin: 0;
    z-index: 1;

    & .container {
      padding: 0;
    }
  }
  .footer-primary {
    display: none;
  }
  .footer-secondary {
    float: none;

    & > li {
      margin-right: 15px;
    }
  }
}

// On other devices, we put the footer at the bottom of the page by absolutely
// positioning it, relative to the page which we pad out at the bottom. We
// show the primary controls on the left, and the secondary controls on the
// right.
@media @tablet, @desktop, @desktop-hd {
  .global-page {
    padding-bottom: 100px;
    position: relative;
  }
  .global-footer {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;

    &, & a {
      color: @fl-body-muted-more-color;
    }
    & a {
      &:hover,
      &:focus {
        text-decoration: none;
        color: @link-hover-color;
      }
    }
  }
  .footer-primary {
    display: inline-block;

    & > li {
      margin-right: 15px;
    }
  }
  .footer-secondary {
    float: right;

    & > li {
      margin-left: 15px;
    }
  }
}

// ------------------------------------
// Miscellaneous

// On phones, we disregard "affixed" elements and make them static.
@media @phone {
  .affix {
    position: static;
  }
}


fixed box shadow on yield, added box shadow to header

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/amazingBastard/damir.io.git/'


Create datepicker3.less

Create datepicker3.less

/*!
 * Datepicker for Bootstrap
 *
 * Copyright 2012 Stefan Petre
 * Improvements by Andrew Rowls
 * Ported to 3.0 by Alexey Shirshov
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */

/*
Alexey Shirshov: you may want to use it separately, so uncomment below
@import "variables.less";
@import "mixins.less";
*/

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

.datepicker {
    padding: 4px;
    .border-radius(4px);

    &-inline {
        width: 220px;
    }

    direction: ltr;

    & &-rtl {
        direction: rtl;

        table tr td span {
            float: right;
        }
    }

    &-dropdown {
        top: 0;
        left: 0;

        &:before {
            content: '';
            display: inline-block;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 7px solid #ccc;
            border-top: 0;
            border-bottom-color: rgba(0,0,0,.2);
            position: absolute;
        }

        &:after {
            content: '';
            display: inline-block;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid white;
            border-top: 0;
            position: absolute;
        }

        &.datepicker-orient-left:before {
            left: 6px;
        }

        &.datepicker-orient-left:after {
            left: 7px;
        }

        &.datepicker-orient-right:before {
            right: 6px;
        }

        &.datepicker-orient-right:after {
            right: 7px;
        }

        &.datepicker-orient-top:before {
            top: -7px;
        }

        &.datepicker-orient-top:after {
            top: -6px;
        }

        &.datepicker-orient-bottom:before {
            bottom: -7px;
            border-bottom: 0;
            border-top: 7px solid #999;
        }

        &.datepicker-orient-bottom:after {
            bottom: -6px;
            border-bottom: 0;
            border-top: 6px solid white;
        }
    }

    >div {
        display: none;
    }

    &.days div.datepicker-days {
        display: block;
    }

    &.months div.datepicker-months {
        display: block;
    }

    &.years div.datepicker-years {
        display: block;
    }

    table {
        margin: 0;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    td,
    th {
        text-align: center;
        width: 20px;
        height: 20px;
        .border-radius(4px);
        border: none;
    }
    // Inline display inside a table presents some problems with
    // border and background colors.
    .table-striped & table tr {
        td, th {
            background-color: transparent;
        }
    }

    table tr td {
        &.day:hover {
            background: @gray-lighter;
            cursor: pointer;
        }

        &.old,
        &.new {
            color: @gray-light;
        }

        &.disabled,
        &.disabled:hover {
            background: none;
            color: @gray-light;
            cursor: default;
        }

        &.today,
        &.today:hover,
        &.today.disabled,
        &.today.disabled:hover {
            @todayBackground: lighten(orange, 30%);
            .button-variant(@btn-default-color, @btn-default-bg, @btn-default-border);
            color: #000;
        }

            &.today:hover:hover { // Thank bootstrap 2.0 for this selector...
                // TODO: Bump min BS to 2.1, use @textColor in buttonBackground above
                color: #000;
            }

            &.today.active:hover {
                color: #fff;
            }

        &.range,
        &.range:hover,
        &.range.disabled,
        &.range.disabled:hover {
            background: @gray-lighter;
            .border-radius(0);
        }

            &.range.today,
            &.range.today:hover,
            &.range.today.disabled,
            &.range.today.disabled:hover {
                @todayBackground: mix(@orange, @gray-lighter, 50%);
                .button-variant(@btn-default-color, @btn-default-bg, @btn-default-border);
                .border-radius(0);
            }

        &.selected,
        &.selected:hover,
        &.selected.disabled,
        &.selected.disabled:hover {
            .button-variant(@btn-default-color, @btn-default-bg, @btn-default-border);
            color: #fff;
            -webkit-text-shadow: 0 -1px 0 rgba(0,0,0,.25);
            text-shadow: 0 -1px 0 rgba(0,0,0,.25);
        }

        &.active,
        &.active:hover,
        &.active.disabled,
        &.active.disabled:hover {
            .button-variant(@btn-default-color, @btn-default-bg, @btn-default-border);
            color: #fff;
            -webkit-text-shadow: 0 -1px 0 rgba(0,0,0,.25);
            text-shadow: 0 -1px 0 rgba(0,0,0,.25);
        }

        span {
            display: block;
            width: 23%;
            height: 54px;
            line-height: 54px;
            float: left;
            margin: 1%;
            cursor: pointer;
            .border-radius(4px);

            &:hover {
                background: @gray-lighter;
            }

            &.disabled,
            &.disabled:hover {
                background: none;
                color: @gray-light;
                cursor: default;
            }

            &.active,
            &.active:hover,
            &.active.disabled,
            &.active.disabled:hover {
                .button-variant(@btn-default-color, @btn-default-bg, @btn-default-border);
                color: #fff;
                -webkit-text-shadow: 0 -1px 0 rgba(0,0,0,.25);
                text-shadow: 0 -1px 0 rgba(0,0,0,.25);
            }

            &.old,
            &.new {
                color: @gray-light;
            }
        }
    }

    th.datepicker-switch {
        width: 145px;
    }

    thead tr:first-child th,
    tfoot tr th {
        cursor: pointer;

        &:hover {
            background: @gray-lighter;
        }
    }
    /*.dow {
		border-top: 1px solid #ddd !important;
	}*/
    // Basic styling for calendar-week cells
    .cw {
        font-size: 10px;
        width: 12px;
        padding: 0 2px 0 5px;
        vertical-align: middle;
    }

    thead tr:first-child th.cw {
        cursor: default;
        background-color: transparent;
    }
}
.input-append,
.input-prepend {
	&.date {
		.add-on i {
			display: block;
			cursor: pointer;
			width: 16px;
			height: 16px;
		}
	}
}
.input-daterange {
    input {
        text-align: center;
    }

        input:first-child {
            .border-radius(3px 0 0 3px);
        }

        input:last-child {
            .border-radius(0 3px 3px 0);
        }

    .add-on {
        display: inline-block;
        width: auto;
        min-width: 16px;
        height: @line-height-base;
        padding: 4px 5px;
        font-weight: normal;
        line-height: @line-height-base;
        text-align: center;
        -webkit-text-shadow: 0 1px 0 white;
        text-shadow: 0 1px 0 #white;
        vertical-align: middle;
        background-color: @gray-lighter;
        border: 1px solid #ccc;
        margin-left: -5px;
        margin-right: -5px;
    }
}

error: pathspec 'less/datepicker3.less' did not match any file(s) known to git


Update breakpoints and default font weights

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/inflex-io/inflex.git/'


form.less

form.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Kuangji/nox-bootstrap.git/'


added wahlversprechen2013.de less file

added wahlversprechen2013.de less file

@import "bootstrap/bootstrap.less";

@header-color: #515295;

@font-weight-h1-h2: 900;
@font-weight-h3-h4: 700;

body {
	padding-top: 70px;
}

h1, h2 {
	font-weight: @font-weight-h1-h2;
	color: @header-color;

	a {
		color: inherit;
	}
}

h3, h4 {
	font-weight: @font-weight-h3-h4;
}

small, .label {
	a {
		color: inherit;

		&:hover {
			color: inherit;
			text-decoration: underline;
		}
	}
}

@navbar-form-height:	(@line-height-computed + @padding-base-vertical + 2);

.navbar {
	.form-control {
	  height: @navbar-form-height; // make nav-bar forms vertically compact
	  width: 100%;
	  padding: 0 @padding-base-horizontal/2;
	}

	.btn {
		height: @navbar-form-height; // make nav-bar forms vertically compact
		padding: 0 @padding-base-horizontal/2;
	}

	span.input-group-btn {
		line-height: 0px;
	}

	.navbar-form {
		padding-left: 30px;
	}

	@media (min-width: @screen-sm) {
		.navbar-form {
			margin-top: (@navbar-height - @navbar-form-height)/2;
			margin-bottom: (@navbar-height - @navbar-form-height)/2;
			padding: 0px;
		}
	}

	.input-group {
		.twitter-typeahead + .input-group-btn {
			vertical-align: top; // typeahead somehow top-aligns the text-box
		}
	}
}

.navbar-collapse.in {
	overflow-y: visible; // necessary for search suggestions dropdown
}

// title page

.title {
	white-space: nowrap;

	@scaled-height:	@font-size-base * 2.3;
	@full-height: @font-size-base * 3.5;

	h1 {
		display: inline-block;
		font-size: @scaled-height;

		@media (min-width: @screen-sm-min) {
			font-size: @full-height;
		}

		small {
			font-size: @font-size-base;
			display: block
		}
	}

	img {
		vertical-align:bottom;
		margin-bottom: (@line-height-computed / 2); // h1 margin-bottom
		height: @scaled-height;

		@media (min-width: @screen-sm-min) {
			height: @full-height;
		}
	}
}

.social-media {
	display:block;
	line-height: 15px;
	margin-top: -15px;
	white-space: nowrap;
	vertical-align: bottom;

	iframe {
		vertical-align: bottom;
		margin-left: 3px;
		margin-right: 3px;
	}

	div {
		margin-left: 3px;
		margin-right: 3px;
	}
}

footer .social-media {
	margin-top: 0px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

// Twitter Typeahead

.input-group input.form-control.typeahead.tt-input {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.twitter-typeahead {
	width: 100%;

	.tt-dropdown-menu {
	    width: 300px;
	    margin-top: 12px;
	    padding: 8px 0;
	    background-color: #fff;
	    border: 1px solid #ccc;
	    border: 1px solid rgba(0, 0, 0, 0.2);
	    -webkit-border-radius: 8px;
	       -moz-border-radius: 8px;
	            border-radius: 8px;
	    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
	       -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
	            box-shadow: 0 5px 10px rgba(0,0,0,.2);

       	.tt-header {
			margin: 5px;
			font-size: 18px;
			color: #888;
		}

		.tt-suggestion {
			padding: 3px 20px;

			.tt-cursor {
				color: #fff;
				background-color: #0097cf;
			}

			p {
				margin: 0;
			}
		}
	}
}

.titleprogress-carousel {
	margin-top: @line-height-computed + 10;

	.titleprogress-header {
		font-weight: bold;

		a {
			color: inherit;
			&:hover {
				color: inherit
			}
		}
	}

	.titleprogress {
		height: 25px;
		margin-bottom: 3px;
		overflow: hidden;
		background-color: #f5f5f5;
		border-radius: 4px;
		-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
		box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
		display: inline-block;
		vertical-align: middle;

		.titleprogress-label {
			font-size: @font-size-base;
			font-weight: bold;
			vertical-align: middle;

			a {
				color: inherit;
				&:hover {
					color: inherit
				}
			}
		}

		.progress-bar {
			width: 100%;

			.titleprogress-label {
				color: white;
			}
		}
	}
}

.relatedurl {
    margin-top: 10px;
    padding-left: 0px;

	li {
	    list-style-type: none;
	    line-height: 22px;
	}

	.favicon {
	    margin-bottom: 0.5em;
	}
}

.stmt-list {
	 position: relative;

	 .glyph-column {
		 position: absolute;
		 height: 100%;
		 width: 25px;
		 font-size: 20px;
	}

	.content {
		padding-left: 28px;

		p {
			margin-top: 10px;
		}

		h4 {
			margin-bottom: 5px;
		}

		small {
			color: grey;
		}

		blockquote {
			padding: 0px 10px;
			margin: 0px 0px 10px;

			font-size: @font-size-base;
			font-family: @font-family-serif;
			font-style: italic;
			font-weight: 400
		}
	}

	.body {
		max-height: 80px;
		overflow: hidden;
		position: relative;

		.read-more {
			display: none;
			position: absolute;
			bottom: 0; right: 0;
			width: 100%;
			text-align: right;
			margin: 0;
			padding-top: 30px;

			/* "transparent" only works here because == rgba(0,0,0,0) */
			background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0)),color-stop(1, white));
			background-image: -webkit-linear-gradient(top, rgba(255,255,255,0), white);

		    background-image: -moz-linear-gradient(top, rgba(255,255,255,0), white);

		    background-image: -ms-linear-gradient(top, rgba(255,255,255,0), white);
		    background-image: -o-linear-gradient(top, rgba(255,255,255,0), white);

		    background-image: linear-gradient(rgba(255,255,255,0), white);
		}
	}
}

.norating .content {
	padding-left: 0px;
}

// /item page
@scale-factor-xs: 0.75;

h1.entry-title {
	margin-top: 0px;

	small {
		 font-size: 0.5em;
	}

	@media (max-width: @screen-xs-max) {
		font-size: @font-size-h1 * @scale-factor-xs;
	}
}

div.entry-rating {
	vertical-align: middle;
	font-size: @font-size-h2;
	font-weight: @font-weight-h1-h2;

	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
	border-bottom: @gray-lighter 1px solid;

	@media (max-width: @screen-xs-max) {
		font-size: @font-size-h2 * @scale-factor-xs;
	}
}

.label-lg {
	font-size: @font-size-large;
	line-height: 1.6em;
	vertical-align: middle;

	@media (max-width: @screen-xs-max) {
		font-size: @font-size-large * @scale-factor-xs;
	}
}

.nav-list {
	li {
		margin-top: 0px;
		margin-bottom: 10px;
		a {
			position: inherit;
			display: inline;
			padding: inherit;
		}

		.social-media-button {
			vertical-align: bottom;

			iframe {
				vertical-align: bottom;
			}
		}

		@media (max-width: @screen-md-max) {
			display: inline-block;
			vertical-align: top;
			padding-left: 5px;
			padding-right: 5px;

			a {
				padding-left: 3px;
				padding-right: 3px;
			}
		}
	}

	@media (max-width: @screen-md-max) {
		.tags {
			display: block;
		}
	}
}

.sidebar {
	font-size: 14px;

	h1 {
		font-size: 1.5em;

		@media (min-width: @screen-md) {
			margin-top: 50px;
		}
	}

	h2 {
		font-size: 1.2em;
	}

	h3, h4, h5 {
		font-size: 1em;
	}

	h1 {
		color: grey;
	}

	ul#relatedurl {
		padding-left: 25px;

		li {
			small {
				color: grey;
			}
		}
	}
}

.entry-quote {
	font-family: @font-family-serif;
	font-style: italic;
	font-weight: 400
}

.entry-buttons {
	color: grey;
	font-size: 16px;
	float: right;
}

.feedicon {
	font-size: @font-size-h2;
	color: grey;
}

.entry-meta {
	small {
		color: grey;
	}
}

.entry-content {
	@media (min-width: @screen-sm) {
		font-size: 16px;
	}

	@media (min-width: @screen-md) {
		font-size: 18px;
	}

	:first-child
	{
		margin-top: 0px;
	}

	h1 {
		font-size: 1.5em;
	}

	h2 {
		font-size: 1.2em;
	}

	h3, h4, h5 {
		font-size: 1em;
	}

	p, ul, ol, li {
		font-size: 1em;
	}

	img {
		max-width: 100%;
	}

	margin-bottom: 2em;
}

textarea.expand {
	height: 40px;
}

.showonclick {
	display: none;
}

error: pathspec 'less/main.less' did not match any file(s) known to git


fix use of a box-sizing mixin without any parameters (appear since the use of lesshat)

*,
*:after,
*::before {
    .box-sizing(box-sizing);
}

body {
    padding-top: 40px;
    padding-bottom: @vic-mode-toggler_height;
}

.victoire {
    font-size: @victoire-fontSize;
    font-weight: @victoire-fontWeight;

    &,
    * {
        font-family: @victoire-fontFamily !important;
        color: @victoire-color;
    }
}

*,
*:after,
*::before {
    .box-sizing;
}

body {
    padding-top: 40px;
    padding-bottom: @vic-mode-toggler_height;
}

.victoire {
    font-size: @victoire-fontSize;
    font-weight: @victoire-fontWeight;

    &,
    * {
        font-family: @victoire-fontFamily !important;
        color: @victoire-color;
    }
}


add bootstrap less

add bootstrap less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/lihuajing/cppang.git/'


Update bracket-matcher selector

Update bracket-matcher selector

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/nviel/nico-syntax.git/'


Fix header styles

Fix header styles

fatal: unable to access 'https://github.com/josh/transit.git/': The requested URL returned error: 403


add missing less files

add missing less files

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

error: pathspec 'app/templates/css/less/style.less' did not match any file(s) known to git


Temporarily port over some magazine vars to get the landingpage base file to compile

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/hevnly/asset-bazaar.git/'


refactored nestable css

refactored nestable css

// Name:            Nestable
// Description:     Defines styles for nestable lists
//
// Component:       `uk-nestable`
//
// Sub-objects:     `uk-nestable-list`
//                  `uk-nestable-handle`
//                  `uk-nestable-moving`
//                  `[data-nestable-action='toggle']`
//                  `uk-nestable-panel`
//
// Modifier:        `uk-nestable-dragged`
//                  `uk-nestable-placeholder`
//
// States:          `uk-parent`
//                  `uk-collapsed`
//
// Markup:
//
//
//

//

//

//

//
// ========================================================================

// Variables
// ========================================================================

@nestable-padding-left:                         40px;
@nestable-dragged-z-index:                      1050;

@nestable-placeholder-opacity:                  0;

@nestable-empty-height:                         40px;

@nestable-toggle-color:                         #999;
@nestable-toggle-hover-color:                   #444;
@nestable-toggle-icon:                          "\f147";
@nestable-toggle-collapsed-icon:                "\f196";

@nestable-panel-margin-bottom:                  10px;
@nestable-panel-padding:                        5px;
@nestable-panel-background:                     #f5f5f5;

/* ========================================================================
   Component: Nestable
 ========================================================================== */

.uk-nestable {
    padding: 0;
    list-style: none;
    .hook-nestable;
}

/* Sub-object `uk-nestable-list`
 ========================================================================== */

.uk-nestable-list {
    margin: 0;
    padding-left: @nestable-padding-left;
    list-style: none;
}

/* Sub-modifier `uk-nestable-dragged`
 ========================================================================== */

.uk-nestable-dragged {
    position: absolute;
    z-index: @nestable-dragged-z-index;
    pointer-events: none;
    .hook-nestable-dragged;
}

/* Sub-modifier `uk-nestable-placeholder`
 ========================================================================== */

.uk-nestable-placeholder {
    opacity: @nestable-placeholder-opacity;
    .hook-nestable-placeholder;
}

/* Empty List
 ========================================================================== */

.uk-nestable:empty {
    min-height: @nestable-empty-height;
    .hook-nestable-empty;
}

/* Sub-object `uk-nestable-handle`
 ========================================================================== */

/*
 * Deactivate browser touch actions in IE11
 */

.uk-nestable-handle { touch-action: none; }

/* Hover */
.uk-nestable-handle:hover { cursor: move; }

/* Sub-object `uk-nestable-moving`
 ========================================================================== */

.uk-nestable-moving,
/* Needed if moving over links or buttons */
.uk-nestable-moving * { cursor: move; }

/* Sub-object `[data-action='toggle']`
 ========================================================================== */

/* Hidden by default */
.uk-nestable-handle {
    display: inline-block;
    color: @nestable-toggle-color;
    visibility: hidden;
    .hook-nestable-toggle;
}

/* Hover */
.uk-nestable-handle:hover {
    color: @nestable-toggle-hover-color;
    cursor: pointer;
}

/* Icon */
.uk-nestable-handle:after {
    content: @nestable-toggle-icon;
    font-family: FontAwesome;
}

/*
 * Show if nested
 */

.uk-parent > .uk-nestable-item .uk-nestable-handle { visibility: visible; }

/*
 * Collapsed
 */

.uk-collapsed > .uk-nestable-item .uk-nestable-handle:after { content: @nestable-toggle-collapsed-icon; }

.uk-collapsed .uk-nestable-list { display: none; }

/* Sub-object `uk-nestable-panel`
 ========================================================================== */

.uk-nestable-panel {
    margin-bottom: @nestable-panel-margin-bottom;
    padding: @nestable-panel-padding;
    background: @nestable-panel-background;
    .hook-nestable-panel;
}

// Hooks
// ========================================================================

.hook-nestable-misc;

.hook-nestable() {}
.hook-nestable-dragged() {}
.hook-nestable-placeholder() {}
.hook-nestable-empty() {}
.hook-nestable-toggle() {}
.hook-nestable-panel() {}
.hook-nestable-misc() {}

// Name:            Nestable
// Description:     Defines styles for nestable lists
//
// Component:       `uk-nestable`
//
// Sub-objects:     `uk-nestable-list`
//                  `uk-nestable-item`
//                  `uk-nestable-placeholder`
//                  `uk-nestable-empty`
//                  `uk-nestable-handle`
//                  `uk-nestable-moving`
//                  `[data-nestable-action='toggle']`
//
// Modifier:        `uk-nestable-list-dragged`
//
// States:          `uk-parent`
//                  `uk-collapsed`
//
// Markup:
//
//
//

//

//

//

//

//
//

//

//

//
// ========================================================================

// Variables
// ========================================================================

@nestable-padding-left:                         40px;
@nestable-dragged-z-index:                      1050;

@nestable-item-margin-bottom:                   10px;
@nestable-item-padding:                         5px;
@nestable-item-background:                      #f5f5f5;

@nestable-placeholder-border:                   #ddd;

@nestable-empty-height:                         40px;

@nestable-handle-font-size:                     18px;
@nestable-handle-color:                         #ddd;
@nestable-handle-icon:                          "\f0c9";

@nestable-toggle-color:                         #999;
@nestable-toggle-hover-color:                   #444;
@nestable-toggle-icon:                          "\f147";
@nestable-toggle-collapsed-icon:                "\f196";

/* ========================================================================
   Component: Nestable
 ========================================================================== */

.uk-nestable {
    padding: 0;
    list-style: none;
    .hook-nestable;
}

/* Sub-object `uk-nestable-list`
 ========================================================================== */

.uk-nestable-list {
    margin: 0;
    padding-left: @nestable-padding-left;
    list-style: none;
}

/* Sub-modifier `uk-nestable-list-dragged`
 ========================================================================== */

.uk-nestable-list-dragged {
    position: absolute;
    z-index: @nestable-dragged-z-index;
    padding-left: 0;
    pointer-events: none;
    .hook-nestable-list-dragged;
}

/* Sub-object `uk-nestable-item`
 ========================================================================== */

.uk-nestable-item {
    margin-bottom: @nestable-item-margin-bottom;
    padding: @nestable-item-padding;
    background: @nestable-item-background;
    .hook-nestable-item;
}

/* Sub-object `uk-nestable-placeholder`
 * The placeholder which marks the drop area
 ========================================================================== */

.uk-nestable-placeholder {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: @nestable-item-margin-bottom;
    border: 1px dashed @nestable-placeholder-border;
    .hook-nestable-placeholder;
}

/* Sub-object `uk-nestable-empty`
 * The style of an empty list
 ========================================================================== */

.uk-nestable-empty {
    min-height: @nestable-empty-height;
    .hook-nestable-empty;
}

/* Sub-object `uk-nestable-handle`
 ========================================================================== */

/*
 * 1. Deactivate browser touch actions in IE11
 */

.uk-nestable-handle {
    display: inline-block;
    font-size: @nestable-handle-font-size;
    color: @nestable-handle-color;
    /* 1 */
    touch-action: none;
    .hook-nestable-handle;
}

/* Hover */
.uk-nestable-handle:hover { cursor: move; }

/* Icon */
.uk-nestable-handle:after {
    content: @nestable-handle-icon;
    font-family: FontAwesome;
}

/* Sub-object `uk-nestable-moving`
 ========================================================================== */

.uk-nestable-moving,
/* Needed if moving over links or buttons */
.uk-nestable-moving * { cursor: move; }

/* Sub-object `[data-action='toggle']`
 ========================================================================== */

/* Hidden by default */
[data-nestable-action='toggle'] {
    display: inline-block;
    color: @nestable-toggle-color;
    visibility: hidden;
    .hook-nestable-toggle;
}

/* Hover */
[data-nestable-action='toggle']:hover {
    color: @nestable-toggle-hover-color;
    cursor: pointer;
}

/* Icon */
[data-nestable-action='toggle']:after {
    content: @nestable-toggle-icon;
    font-family: FontAwesome;
}

/*
 * Show if nested
 */

.uk-parent > .uk-nestable-item [data-nestable-action='toggle'] { visibility: visible; }

/*
 * Collapsed
 */

.uk-collapsed > .uk-nestable-item [data-nestable-action='toggle']:after { content: @nestable-toggle-collapsed-icon; }

.uk-collapsed .uk-nestable-list { display: none; }

// Hooks
// ========================================================================

.hook-nestable-misc;

.hook-nestable() {}
.hook-nestable-list-dragged() {}
.hook-nestable-item() {}
.hook-nestable-placeholder() {}
.hook-nestable-empty() {}
.hook-nestable-handle() {}
.hook-nestable-toggle() {}
.hook-nestable-misc() {}


Show the octicon.

Show the octicon.

@import "octicon-mixins";

.git-status-bar {
  display: inline-block;
  text-decoration: none;
  padding-left: 4px;

  &:hover {
    text-decoration: underline;
  }

  &:before {
   .octicon-font();
    display: inline-block;
    position: relative;
    top: -.05em;

    height: 0px;
    width: 1em;
    content: " ";
    padding-right: 0.4em;
    font-size: .95em;
  }
}

error: pathspec 'styles/status-bar.less' did not match any file(s) known to git


welcome banner is back (bug 682331)

welcome banner is back (bug 682331)

@import 'lib';

.amo-header {
    font-family: @head-sans;
    margin-bottom: 35px;
}

#masthead {
    padding-top: 35px;
    max-width: 600px;
}

#aux-nav {
    float: right;
}
.html-rtl #aux-nav {
    float: left;
}

.site-title img {
    float: left;
    margin-right: 10px;
}
.html-rtl .site-title img {
    float: right;
    margin: 0 0 0 12px;
}

.site-title {
    margin-bottom: 7px;
    a {
        color: #333;
        text-decoration: none;
        small {
            color: #333;
            display: block;
            font-size: 0.6em;
            line-height: 0.5em;
        }
    }
    a:hover, a:focus {
        color: #043b84;
        text-shadow: 0 0 40px #fff,
                     0 0 20px #fff,
                     0 0 10px #fff;
    }
    &.prominent a, strong {
        color: #D64203;
        &:hover {
            text-shadow: 0 0 #fff; // Color = stupid minifier hack
        }
    }
}

/** site navigation */

.menu-nav {
    font-size: 12px;
    margin-left: 64px;
    z-index: 50;

    &.no-img {
        margin-left: 0;
    }

    > ul {
        > li {
            float: left;
            position: relative;
            > a {
                position: relative;
                font-weight: bold;
                z-index: 60;
                border-style: solid;
                .border-radius(3px 3px 0 0);
                border-color: transparent;
                border-width: 1px 1px 0;
            }
            &:hover {
                > a {
                    background: #fff;
                    border-color: #98B2C9 #98B2C9 #fff;
                    .box-shadow(0 0 4px rgba(0, 0, 0, 0.4));
                }
                > ul {
                    display: block;
                }
                &:after {
                    content: "";
                    width: 200px;
                    z-index: 62;
                    height: 5px;
                    background: #fff;
                    position: absolute;
                    top: 18px;
                    left: 1px;
                }
            }
            > ul {
                width: 190px;
                position: absolute;
                top: 17px;
                z-index: 59;
                padding: 8px;
                display: none;
                background: #fff;
                border: 1px solid #98B2C9;
                .border-radius(0 3px 3px);
                .box-shadow(0 0 4px rgba(0, 0, 0, 0.4));
                a {
                    text-decoration: none;
                    display: block;
                    padding: 6px 8px;
                    word-wrap: break-word;
                    &:hover {
                        background: #ebf4fe;
                    }
                }
                &.two-col {
                    .columns(2, 8px);
                    width: 340px;
                }
            }
        }
        em a:hover {
            background: #e1edfb;
        }
    }
    hr {
        border: 0;
        margin: 6px 8px;
        border-top: 1px dotted #ccc;
    }
    em {
        background: #F4F8FC;
        display: block;
        font-weight: bold;
    }
}

.html-rtl {
    .menu-nav {
        margin-left: 0;
        margin-right: 64px;
    }
    .menu-nav > ul > li {
        border-left: 0;
        border-right: 1px solid #9FA7AF;
        float: right;
        left: auto;
        right: -9px;

        &:hover:after {
            left: auto;
            right: 1px;
        }
    }
}

#site-nav {
    > ul {
        > li {
            border-left: 1px solid #9FA7AF;
            left: -9px;
            &:first-child {
                border: 0;
            }
            > a {
                padding: 4px 8px;
                line-height: 12px;
                text-transform: uppercase;
            }
        }
    }
}

#aux-nav {
    > ul {
        > li:not(:first-child):before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: -1px;
            width: 1px;
            height: 32px;
            background: -moz-linear-gradient(#9FA7AF, fadeout(#9FA7AF, 100%)) no-repeat left top;
            background-size: 1px 100%;
        }
        > li {
            margin-left: 1px;
            > a {
                display: block;
                line-height: 32px;
                height: 32px;
                padding: 0 1em;
                .border-radius(0);
                &:after {
                    display: inline-block;
                    vertical-align: middle;
                    top: 12px;
                    left: 4px;
                    margin: 0 0 0 4px;
                    content: "\00a0";
                    width: 0;
                    height: 0;
                    border: 4px solid transparent;
                    border-style: solid;
                    border-top-color: #666;
                }
            }
            &:hover {
                z-index: 63;
            }
            &:after {
                top: 32px;
            }
            > ul {
                top: 31px;
            }
            &.nomenu {
                a {
                    display: inline-block;
                    &:after {
                        display: none;
                    }
                }
                &:hover {
                    a {
                        background: transparent;
                        .box-shadow(0 0 inset);
                        border-color: transparent;
                    }
                    &:after {
                        content: none;
                    }
                }
            }
            &.logout {
                &.anonymous {
                    a:first-child {
                        padding-right: 4px;
                    }
                }
                &:before {
                    background: 0;
                }
                a {
                    padding-left: 4px;
                    font-weight: normal;
                }
            }
        }
    }
    .other-apps {
        a {
            padding-left: 24px;
            background-repeat: no-repeat;
            background-position: left 4px;
            background-image: url(../../img/app-icons/16/sprite.png)
        }
    }
    .thunderbird a {
        background-position: left -28px;
    }
    .sunbird a {
        background-position: left -92px;
    }
    .seamonkey a {
        background-position: left -60px;
    }
}
.html-rtl {
    #aux-nav > ul > li > a:after {
        margin: 0 4px 0 0;
        right: 4px;
        left: auto;
    }
}
/** search box */

.header-search {
    position: absolute;
    top: 63px;
    right: 0;
    background: #1B5898;
    .gradient-two-color(#2E89CA, #1B5898);
    .border-radius(5px);
    .box-shadow(0 -2px 0 rgba(0, 0, 0, 0.5) inset, 0 2px 0 rgba(0, 0, 0, 0.1));
    padding: 5px 7px 7px;
    width: 280px;
}
.html-rtl .header-search {
    left: 0;
    right: auto;
}

button.search-button {
    background: #84C63C url("../../img/icons/go-arrow.png") center no-repeat;
    background-image: url("../../img/icons/go-arrow.png"),
                      -moz-linear-gradient(#84C63C, #489615);
    background-image: url("../../img/icons/go-arrow.png"),
                      -webkit-linear-gradient(#84C63C, #489615);
    border: 0;
    float: right;
    vertical-align: bottom;
    cursor: pointer;
    height: 30px;
    width: 36px;

    .border-radius(6px);
    .box-shadow(0 1px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset);
}
.html-rtl button.search-button {
    float: left;
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}

.header-search input {
    background: url(../../img/icons/search.png) no-repeat scroll 8px center #fff;
    float: left;
    border: 0 none;
    .border-radius(4px);
    .box-shadow(0 0 2px rgba(0, 0, 0, 0.4) inset);
    font-family: "Trebuchet MS";
    font-size: 14px;
    height: 30px;
    padding: 0 0 0 32px;
    width: 206px;
}
.html-rtl .header-search input {
    float: right;
    padding: 0 32px 0 0;
    background-position: 212px center;
}

.site-tip, .site-balloon {
    border: 2px solid #e3873b;
    .border-radius(10px);
    display: none;
    font-family: Arial, sans-serif;
    font-size: 14px;
    position: relative;
    margin-top: 22px;
    h3, p {
        display: inline;
    }
    p a {
        font-weight: bold;
    }
}

.site-tip {
    background-color: fadeOut(#fff, 50%);
    border-color: #c9ddf2;
    color: #666;
    padding: 10px 45px 10px 15px;
}

.site-balloon {
    background-color: #fcefb7;
    color: #333;
    padding: 15px 45px 15px 15px;
    h3, strong {
        font-weight: bold;
    }
    &:before, &:after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        border-left: 18px solid #E3873B;
        border-top: 18px solid transparent;
    }
    &:before {
        left: 34px;
        top: -18px;
    }
    &:after {
        left: 36px;
        top: -13px;
        border-left-color: #FCEFB7;
    }
    p a {
        color: #c40000;
    }
}

#site-notice {
    display: block;
}

.site-tip, .site-hint, #lightbox, .modal {
    .close {
        position: absolute;
        overflow: hidden;
        right: 1em;
        top: 1em;
        width: 25px;
        height: 25px;
        margin: 0;
        .border-radius(4px);
        background: url(../../img/impala/banner-close.png) no-repeat 0 0;
        text-indent: -1000em;
        &:hover {
            background-color: #c40000;
            background-position: -25px 0;
        }
    }
}
.site-balloon .close,
.site-tip .close {
    margin: auto;
    top: 0;
    bottom: 0;
}

.html-rtl {
    .site-balloon, #lightbox, .modal {
        padding: 15px 15px 15px 45px;
        &:before, &:after {
            border-color: transparent;
            border-right: 18px solid #E3873B;
            border-top: 18px solid transparent;
            left: auto;
        }
        &:before {
            right: 34px;
            top: -18px;
        }
        &:after {
            right: 36px;
            top: -13px;
            border-right-color: #FCEFB7;
        }
        .close {
            right: auto;
            left: 15px;
        }
    }
}

/* All Manner of Banner */
.firstvisit #site-welcome {
    display: block;
}
#mobile-banner {
    font-size: 1.3em;
}
@media (max-width: 500px) {
    #mobile-banner {
        display: inline-block;
    }
}
.badbrowser {
    #site-welcome, #mobile-banner {
        display: none !important;
    }
}
.developer-hub .site-balloon {
    display: none !important;
}

@import 'lib';

.amo-header {
    font-family: @head-sans;
    margin-bottom: 35px;
}

#masthead {
    padding-top: 35px;
    max-width: 600px;
}

#aux-nav {
    float: right;
}
.html-rtl #aux-nav {
    float: left;
}

.site-title img {
    float: left;
    margin-right: 10px;
}
.html-rtl .site-title img {
    float: right;
    margin: 0 0 0 12px;
}

.site-title {
    margin-bottom: 7px;
    a {
        color: #333;
        text-decoration: none;
        small {
            color: #333;
            display: block;
            font-size: 0.6em;
            line-height: 0.5em;
        }
    }
    a:hover, a:focus {
        color: #043b84;
        text-shadow: 0 0 40px #fff,
                     0 0 20px #fff,
                     0 0 10px #fff;
    }
    &.prominent a, strong {
        color: #D64203;
        &:hover {
            text-shadow: 0 0 #fff; // Color = stupid minifier hack
        }
    }
}

/** site navigation */

.menu-nav {
    font-size: 12px;
    margin-left: 64px;
    z-index: 50;

    &.no-img {
        margin-left: 0;
    }

    > ul {
        > li {
            float: left;
            position: relative;
            > a {
                position: relative;
                font-weight: bold;
                z-index: 60;
                border-style: solid;
                .border-radius(3px 3px 0 0);
                border-color: transparent;
                border-width: 1px 1px 0;
            }
            &:hover {
                > a {
                    background: #fff;
                    border-color: #98B2C9 #98B2C9 #fff;
                    .box-shadow(0 0 4px rgba(0, 0, 0, 0.4));
                }
                > ul {
                    display: block;
                }
                &:after {
                    content: "";
                    width: 200px;
                    z-index: 62;
                    height: 5px;
                    background: #fff;
                    position: absolute;
                    top: 18px;
                    left: 1px;
                }
            }
            > ul {
                width: 190px;
                position: absolute;
                top: 17px;
                z-index: 59;
                padding: 8px;
                display: none;
                background: #fff;
                border: 1px solid #98B2C9;
                .border-radius(0 3px 3px);
                .box-shadow(0 0 4px rgba(0, 0, 0, 0.4));
                a {
                    text-decoration: none;
                    display: block;
                    padding: 6px 8px;
                    word-wrap: break-word;
                    &:hover {
                        background: #ebf4fe;
                    }
                }
                &.two-col {
                    .columns(2, 8px);
                    width: 340px;
                }
            }
        }
        em a:hover {
            background: #e1edfb;
        }
    }
    hr {
        border: 0;
        margin: 6px 8px;
        border-top: 1px dotted #ccc;
    }
    em {
        background: #F4F8FC;
        display: block;
        font-weight: bold;
    }
}

.html-rtl {
    .menu-nav {
        margin-left: 0;
        margin-right: 64px;
    }
    .menu-nav > ul > li {
        border-left: 0;
        border-right: 1px solid #9FA7AF;
        float: right;
        left: auto;
        right: -9px;

        &:hover:after {
            left: auto;
            right: 1px;
        }
    }
}

#site-nav {
    > ul {
        > li {
            border-left: 1px solid #9FA7AF;
            left: -9px;
            &:first-child {
                border: 0;
            }
            > a {
                padding: 4px 8px;
                line-height: 12px;
                text-transform: uppercase;
            }
        }
    }
}

#aux-nav {
    > ul {
        > li:not(:first-child):before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: -1px;
            width: 1px;
            height: 32px;
            background: -moz-linear-gradient(#9FA7AF, fadeout(#9FA7AF, 100%)) no-repeat left top;
            background-size: 1px 100%;
        }
        > li {
            margin-left: 1px;
            > a {
                display: block;
                line-height: 32px;
                height: 32px;
                padding: 0 1em;
                .border-radius(0);
                &:after {
                    display: inline-block;
                    vertical-align: middle;
                    top: 12px;
                    left: 4px;
                    margin: 0 0 0 4px;
                    content: "\00a0";
                    width: 0;
                    height: 0;
                    border: 4px solid transparent;
                    border-style: solid;
                    border-top-color: #666;
                }
            }
            &:hover {
                z-index: 63;
            }
            &:after {
                top: 32px;
            }
            > ul {
                top: 31px;
            }
            &.nomenu {
                a {
                    display: inline-block;
                    &:after {
                        display: none;
                    }
                }
                &:hover {
                    a {
                        background: transparent;
                        .box-shadow(0 0 inset);
                        border-color: transparent;
                    }
                    &:after {
                        content: none;
                    }
                }
            }
            &.logout {
                &.anonymous {
                    a:first-child {
                        padding-right: 4px;
                    }
                }
                &:before {
                    background: 0;
                }
                a {
                    padding-left: 4px;
                    font-weight: normal;
                }
            }
        }
    }
    .other-apps {
        a {
            padding-left: 24px;
            background-repeat: no-repeat;
            background-position: left 4px;
            background-image: url(../../img/app-icons/16/sprite.png)
        }
    }
    .thunderbird a {
        background-position: left -28px;
    }
    .sunbird a {
        background-position: left -92px;
    }
    .seamonkey a {
        background-position: left -60px;
    }
}
.html-rtl {
    #aux-nav > ul > li > a:after {
        margin: 0 4px 0 0;
        right: 4px;
        left: auto;
    }
}
/** search box */

.header-search {
    position: absolute;
    top: 63px;
    right: 0;
    background: #1B5898;
    .gradient-two-color(#2E89CA, #1B5898);
    .border-radius(5px);
    .box-shadow(0 -2px 0 rgba(0, 0, 0, 0.5) inset, 0 2px 0 rgba(0, 0, 0, 0.1));
    padding: 5px 7px 7px;
    width: 280px;
}
.html-rtl .header-search {
    left: 0;
    right: auto;
}

button.search-button {
    background: #84C63C url("../../img/icons/go-arrow.png") center no-repeat;
    background-image: url("../../img/icons/go-arrow.png"),
                      -moz-linear-gradient(#84C63C, #489615);
    background-image: url("../../img/icons/go-arrow.png"),
                      -webkit-linear-gradient(#84C63C, #489615);
    border: 0;
    float: right;
    vertical-align: bottom;
    cursor: pointer;
    height: 30px;
    width: 36px;

    .border-radius(6px);
    .box-shadow(0 1px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset);
}
.html-rtl button.search-button {
    float: left;
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}

.header-search input {
    background: url(../../img/icons/search.png) no-repeat scroll 8px center #fff;
    float: left;
    border: 0 none;
    .border-radius(4px);
    .box-shadow(0 0 2px rgba(0, 0, 0, 0.4) inset);
    font-family: "Trebuchet MS";
    font-size: 14px;
    height: 30px;
    padding: 0 0 0 32px;
    width: 206px;
}
.html-rtl .header-search input {
    float: right;
    padding: 0 32px 0 0;
    background-position: 212px center;
}

.site-tip, .site-balloon {
    border: 2px solid #e3873b;
    .border-radius(10px);
    display: none;
    font-family: Arial, sans-serif;
    font-size: 14px;
    position: relative;
    margin-top: 22px;
    h3, p {
        display: inline;
    }
    p a {
        font-weight: bold;
    }
}

.site-tip {
    background-color: fadeOut(#fff, 50%);
    border-color: #c9ddf2;
    color: #666;
    padding: 10px 45px 10px 15px;
}

.site-balloon {
    background-color: #fcefb7;
    color: #333;
    padding: 15px 45px 15px 15px;
    h3, strong {
        font-weight: bold;
    }
    &:before, &:after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        border-left: 18px solid #E3873B;
        border-top: 18px solid transparent;
    }
    &:before {
        left: 34px;
        top: -18px;
    }
    &:after {
        left: 36px;
        top: -13px;
        border-left-color: #FCEFB7;
    }
    p a {
        color: #c40000;
    }
}

#site-notice {
    display: block;
}

.site-tip, .site-hint, #lightbox, .modal {
    .close {
        position: absolute;
        overflow: hidden;
        right: 1em;
        top: 1em;
        width: 25px;
        height: 25px;
        margin: 0;
        .border-radius(4px);
        background: url(../../img/impala/banner-close.png) no-repeat 0 0;
        text-indent: -1000em;
        &:hover {
            background-color: #c40000;
            background-position: -25px 0;
        }
    }
}
.site-balloon .close,
.site-tip .close {
    margin: auto;
    top: 0;
    bottom: 0;
}

.html-rtl {
    .site-balloon, #lightbox, .modal {
        padding: 15px 15px 15px 45px;
        &:before, &:after {
            border-color: transparent;
            border-right: 18px solid #E3873B;
            border-top: 18px solid transparent;
            left: auto;
        }
        &:before {
            right: 34px;
            top: -18px;
        }
        &:after {
            right: 36px;
            top: -13px;
            border-right-color: #FCEFB7;
        }
        .close {
            right: auto;
            left: 15px;
        }
    }
}

/* All Manner of Banner */
.firstvisit #site-welcome {
    display: block;
}
#mobile-banner {
    font-size: 1.3em;
}
@media (max-width: 500px) {
    #mobile-banner {
        display: inline-block;
    }
}
.badbrowser {
    #site-welcome, #mobile-banner {
        display: none !important;
    }
}
.home #site-welcome {
    display: none !important;
}
.developer-hub .site-balloon {
    display: none !important;
}


Initial work on Select styles. Refactoring Input styles into a mixin so it can be used by Select as well. Moving colors to variables.

@import '..\..\less\valenceui.less';

.vui-select {
	.input-box;
	width: 100%;
}

/* Customizing the style of the drow arrow is a hack in all browsers.
 * This hack users a background image and hides the default dropdown arrow when possible.
 * The follwoing rules target specific browers where the customization hack works.
 * In all other browsers, the default unstyle dropdown arrow is displayed
 */

 .vui-select-custom-dropdown() {
 	background-image: url(select-arrow.png);
	background-position: right center;
	background-repeat: no-repeat;
 }

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.vui-select:not([multiple])::-ms-expand {
	    display: none;
	}

	.vui-select:not([multiple]) {
		.vui-select-custom-dropdown;
	    padding-right: 30px;
	}
}

/* Chrome/Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.vui-select:not([multiple]) {
		.vui-select-custom-dropdown;
		-webkit-appearance: none;
		-moz-appearance: none;
	    padding-right: 30px;
	}
}

/* Recent Firefox */
@media screen and (min--moz-device-pixel-ratio:0) {
	.vui-select:not([multiple]) {
	    .vui-select-custom-dropdown;
		text-indent: 0.01px;
	    text-overflow: '';
	    padding-right: 10px;
	}
}