Adding people couting view

Adding people couting view

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/bartleyni/eventcontrol.git/'


Fix broadcast padding issue

Fix broadcast padding issue

/**
* Global Sidebar
* ============================================================================
*/

.navbar {
  background-color: @header-bg-color;
  color: #fff;
  font-size: 15px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: @sidebar-width;
  z-index: 100;
  padding: 0 14px;
  .clearfix();
  display: flex;
  flex-direction: column;

  .anchor-top {
    flex: 1;
    align-self: flex-start;
  }

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

  .admin-action-message {
    line-height: 42px;
    display: block;
    float: right;
    font-size: 13px;
    font-weight: bold;
    padding-right: 10px;
    .animated;
    .animated.infinite;
    .animated.hinge;
    .flash-50;
  }

  .logo {
    display: block;
    float: left;
    text-align: center;
    font-size: 22px;
    color: lighten(#b9b2d0, 5) !important;
    margin: 0;

    &:hover {
      color: #fff !important;
    }
  }

  .global-nav {
    .list-unstyled();
    margin: 0;

    li {
      float: left;
      margin-right: 16px;
      margin-left: 15px;

      a {
        height: 40px;
        line-height: 42px;
      }
    }
  }

  .org-selector {
    padding: 15px 0;
    position: relative;

    .hover-bar-container {
      position: absolute;
      width: 32px;
      height: 3px;
      bottom: -2px;
      border-radius: 2px;
      overflow: hidden;

      .hover-bar {
        width: 0;
        height: 3px;
        background: rgba(255,255,255, .35);
        -webkit-transition: width 500ms ease;
      }
    }

    &:hover {
      .hover-bar-container {
        background: #625c69;
      }
      .hover-bar {
        width: 100%;
      }
    }

    &.active{
      &:before {
        position: absolute;
        display: block;
        content: "";
        right: -14px;
        top: 50%;
        margin-top: -6px;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-right: 7px solid #F7F8F9;
      }
      &:hover {
        .hover-bar-container {
          display: none;
        }
      }
    }

    .org-list {
      > li {
        padding: 15px 20px 10px 68px;
        border-bottom: 1px solid @trim;
        position: relative;
        background: #fff;

        a {
          color: @50;

          &:hover {
            color: @70;
          }
        }

        h5, p {
          margin: 0;
        }

        h5 {
          font-size: 16px;
          margin-bottom: 2px;

          a {
            color: @80;

            &:hover {
              color: @90;
            }
          }
        }

        p {
          font-size: 13px;
          a {
            margin-right: 10px;
          }
        }

        &.active {
          background: #F5FAFE;
          border-top: 1px solid #B5D6ED;
          border-bottom: 1px solid #B5D6ED;
          margin-top: -1px;

          a {
            color: desaturate(darken(@blue-dark, 25), 10);
            opacity: .8;
            .transition(.2s opacity);

            &:hover {
              opacity: 1;
            }
          }

          p {
            a {
              color: desaturate(darken(@blue-dark, 25), 10);
              opacity: .6;

              &:hover {
                opacity: .8;
              }
            }
          }
        }

        &.org-create {
          padding: 15px 20px;
          background: none;

          a {
            color: @70;

            &:hover {
              color: @90;
            }
          }
        }
      }

      .org-avatar {
        position: absolute;
        display: block;
        left: 20px;
        .square(36px);
        background-color: @50;
        border-radius: 3px;
        text-align: center;
        line-height: 36px;
        color: #fff;

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

    .active-org {
      display: block;
      .square(32px);
      &:before {
        display: block;
        position: absolute;
        content: "";
        top: 0;
        left: -15px;
        right: -15px;
        bottom: -5px;
      }

      img {
        border-radius: 3px;
        box-shadow: 0 1px 1px rgba(0,0,0, .3);
      }
    }
  }

  .navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: center;

    .list-unstyled;
    padding: 14px 0 6px;
    margin: 0;

    > li {
      position: relative;
      text-align: center;
      margin: 0 0 5px;

      > a {
        color: #b9b2d0;
        display: block;
        width: 32px;
        line-height: 32px;

        .icon {
          display: block;
          line-height: 30px;
        }

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

      &.active {
        > a {
          color: #fff;
        }

        &:before {
          position: absolute;
          display: block;
          content: "";
          right: -14px;
          top: 50%;
          margin-top: -7px;
          border-top: 7px solid transparent;
          border-bottom: 7px solid transparent;
          border-right: 7px solid #F7F8F9;
        }
      }
    }

    > li.onboarding {
      max-height: 9999em;
      margin: 12px 0;
    }

    .icon-home, .icon-user, .icon-star-solid {
      font-size: 18px;
    }

    .icon-av_timer {
      font-size: 25px;
    }

    .icon-globe, .icon-alert {
      font-size: 20px;
    }

    .activity-indicator {
      position: absolute;
      top: 2px;
      right: 3px;
      .square(8px);
      background: @red;
      border-radius: 50%;
      box-shadow: 0 0 0 3px @header-bg-color;
    }
  }

  .divider-top {
    border-top: 1px solid lighten(#342c3e, 10);
  }

  .divider-bottom {
    border-bottom: 1px solid lighten(#342c3e, 10);
  }

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

  .user-settings {
    .avatar {
      .square(32px);
      box-shadow: 0 1px 1px rggba(0,0,0, .3);
    }

    .dropdown-toggle {
      display: block;
      margin-top: 5px;
    }

    .dropdown-menu {
      left: 34px;
      top: auto;
      bottom: -4px;
      background: @90;
      border-color: transparent;
      box-shadow: 0 1px 3px rgba(0,0,0, .25);
      color: #fff;
      border-radius: 4px;

      a {
        color: @20;

        &:hover {
          color: @purple-light;
          background: transparent;
        }
      }

      &:before {
        display: none;
      }

      &:after {
        top: auto;
        left: -18px;
        bottom: 12px;
        border: 9px solid transparent;
        border-right: 9px solid @90;
      }
    }
  }

  .onboarding-progress-bar {
    margin: 0 8px;
  }

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

    .avatar {
      border-radius: 2px;
      position: relative;
    }
  }

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

// Status update

.navbar .icon-alert {
  color: @yellow-orange;
}

.sidebar-panel {
  position: fixed;
  width: @sidebar-panel-width;
  top: 0;
  left: @sidebar-width;
  bottom: 0;
  background: @white-darker;
  z-index: 100;
  color: @gray-darker;
  border-right: 1px solid @trim;
  box-shadow: 1px 0 2px rgba(0,0,0, .06);
  text-align: left;
  line-height: 24px;

  .sidebar-panel-header {
    border-bottom: 1px solid @trim;
    padding: 23px 20px 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0, .06);
    height: @sidebar-panel-header-height;

    .close {
      font-size: 22px;
      position: relative;
      top: -3px;
      right: -3px;
      color: @30;

      &:hover {
        color: @50;
      }
    }

    h2 {
      font-size: 18px;
      margin: 0;
      font-weight: normal;
    }
  }

  .sidebar-panel-body {
    position: absolute;
    top: @sidebar-panel-header-height;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;

    .box {
      border: 0;
      background: transparent;
      box-shadow: none;

      .loading-indicator {
        border-top: 6px solid @gray-lightest;
        border-right: 6px solid @gray-lightest;
        border-bottom: 6px solid @gray-lightest;
        border-left: 6px solid @gray;
      }
    }

    .issue-list {
      border: none;
      box-shadow: none;

      .issue {
        border-bottom: 1px solid #e2dee6;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06)
      }
    }
  }

  .sidebar-panel-item {
    padding: 15px 20px;
    line-height: 1.2;
    border-bottom: 1px solid @trim;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0, .06);
    font-size: 14px;

    h3 {
      font-size: 15px;
      margin-bottom: 5px;
      .culprit {
        font-weight: normal;
      }
    }

    p {
      margin-bottom: 5px;

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

    a {
      color: @50;

      &:hover {
        color: @70;
      }
    }

    .message {
      color: @gray-dark;
    }

    &.active {
      background: @10;
      border-color: @30;
      border-top: 1px solid @30;
      margin-top: -1px;
    }
  }

  .sidebar-panel-empty {
    color: @50;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 50%;
    padding: 0 60px;
    margin-top: (-62px + -16px) / 2; // offset for sidebar-panel-header + font-size
  }
}

.incident-list {
  padding: 20px 20px 0;
  font-size: 13px;

  h4, p, h6  {
     margin-bottom: 15px;
  }

  h4 {
    font-size: 18px;
    line-height: 1.2;
  }

  h6 {
    color: @60;
  }

  p {
    line-height: 1.5;
  }

  small {
    color: @60;
  }

  .incident-item {
    border-bottom: 1px solid @trim;
    margin-bottom: 20px;
    padding-bottom: 5px;
  }
}

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

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

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

@media print {
  .navbar {
      display: none;
  }
}

/**
* Responsive small screens
* ============================================================================
*/

@media(max-width:767px) {
  @sidebar-panel-offset: 54px;

  body {
    padding-left: 0;
  }

  .navbar {
    flex-direction: row;
    position: static;
    width: 100%;
    max-height: @sidebar-panel-offset;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 30px;

    .navbar-nav {
      flex-direction: row;
      padding: 0 6px 0 10px;

      > li {
        margin: 0 5px 0 0;

        &.active:before {
          top: auto;
          right: auto;
          bottom: -11px;
          left: 50%;
          margin-left: -6px;
          border-bottom: 7px solid #F7F8F9;
          border-right: 7px solid transparent;
          border-left: 7px solid transparent;
          border-top: 7px solid transparent;
        }

        &.onboarding {
          display: none;
        }
      }
    }

    .divider-bottom {
      border: 0;
      border-right: 1px solid @gray;
    }

    .anchor-top {
      display: flex;

      > div {
        display: flex;
      }

      .org-selector {
        padding: 0;
        padding-right: 14px;
      }
    }

    .anchor-bottom {
      display: flex;

      .navbar-nav {
        padding-right: 0;

        > li:last-child {
          margin: 0;
        }
      }
    }

    .user-settings {
      display: block;
      margin-left: 5px;

      .dropdown-toggle {
        margin-top: 0;
      }

      .dropdown-menu {
        left: auto;
        top: 42px;
        right: -3px;
        bottom: auto;

        &:after {
          top: -16px;
          right: 10px;
          left: auto;
          bottom: auto;
          border: 9px solid transparent;
          border-bottom: 9px solid @90;
        }
      }
    }
  }

  .sidebar-panel {
    width: auto;
    top: @sidebar-panel-offset;
    left: 0;
    right: 0;
  }
}

/**
* Global Sidebar
* ============================================================================
*/

.navbar {
  background-color: @header-bg-color;
  color: #fff;
  font-size: 15px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: @sidebar-width;
  z-index: 100;
  padding: 0 14px;
  .clearfix();
  display: flex;
  flex-direction: column;

  .anchor-top {
    flex: 1;
    align-self: flex-start;
  }

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

  .admin-action-message {
    line-height: 42px;
    display: block;
    float: right;
    font-size: 13px;
    font-weight: bold;
    padding-right: 10px;
    .animated;
    .animated.infinite;
    .animated.hinge;
    .flash-50;
  }

  .logo {
    display: block;
    float: left;
    text-align: center;
    font-size: 22px;
    color: lighten(#b9b2d0, 5) !important;
    margin: 0;

    &:hover {
      color: #fff !important;
    }
  }

  .global-nav {
    .list-unstyled();
    margin: 0;

    li {
      float: left;
      margin-right: 16px;
      margin-left: 15px;

      a {
        height: 40px;
        line-height: 42px;
      }
    }
  }

  .org-selector {
    padding: 15px 0;
    position: relative;

    .hover-bar-container {
      position: absolute;
      width: 32px;
      height: 3px;
      bottom: -2px;
      border-radius: 2px;
      overflow: hidden;

      .hover-bar {
        width: 0;
        height: 3px;
        background: rgba(255,255,255, .35);
        -webkit-transition: width 500ms ease;
      }
    }

    &:hover {
      .hover-bar-container {
        background: #625c69;
      }
      .hover-bar {
        width: 100%;
      }
    }

    &.active{
      &:before {
        position: absolute;
        display: block;
        content: "";
        right: -14px;
        top: 50%;
        margin-top: -6px;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-right: 7px solid #F7F8F9;
      }
      &:hover {
        .hover-bar-container {
          display: none;
        }
      }
    }

    .org-list {
      > li {
        padding: 15px 20px 10px 68px;
        border-bottom: 1px solid @trim;
        position: relative;
        background: #fff;

        a {
          color: @50;

          &:hover {
            color: @70;
          }
        }

        h5, p {
          margin: 0;
        }

        h5 {
          font-size: 16px;
          margin-bottom: 2px;

          a {
            color: @80;

            &:hover {
              color: @90;
            }
          }
        }

        p {
          font-size: 13px;
          a {
            margin-right: 10px;
          }
        }

        &.active {
          background: #F5FAFE;
          border-top: 1px solid #B5D6ED;
          border-bottom: 1px solid #B5D6ED;
          margin-top: -1px;

          a {
            color: desaturate(darken(@blue-dark, 25), 10);
            opacity: .8;
            .transition(.2s opacity);

            &:hover {
              opacity: 1;
            }
          }

          p {
            a {
              color: desaturate(darken(@blue-dark, 25), 10);
              opacity: .6;

              &:hover {
                opacity: .8;
              }
            }
          }
        }

        &.org-create {
          padding: 15px 20px;
          background: none;

          a {
            color: @70;

            &:hover {
              color: @90;
            }
          }
        }
      }

      .org-avatar {
        position: absolute;
        display: block;
        left: 20px;
        .square(36px);
        background-color: @50;
        border-radius: 3px;
        text-align: center;
        line-height: 36px;
        color: #fff;

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

    .active-org {
      display: block;
      .square(32px);
      &:before {
        display: block;
        position: absolute;
        content: "";
        top: 0;
        left: -15px;
        right: -15px;
        bottom: -5px;
      }

      img {
        border-radius: 3px;
        box-shadow: 0 1px 1px rgba(0,0,0, .3);
      }
    }
  }

  .navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: center;

    .list-unstyled;
    padding: 14px 0 6px;
    margin: 0;

    > li {
      position: relative;
      text-align: center;
      margin: 0 0 5px;

      > a {
        color: #b9b2d0;
        display: block;
        width: 32px;
        line-height: 32px;

        .icon {
          display: block;
          line-height: 30px;
        }

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

      &.active {
        > a {
          color: #fff;
        }

        &:before {
          position: absolute;
          display: block;
          content: "";
          right: -14px;
          top: 50%;
          margin-top: -7px;
          border-top: 7px solid transparent;
          border-bottom: 7px solid transparent;
          border-right: 7px solid #F7F8F9;
        }
      }
    }

    > li.onboarding {
      max-height: 9999em;
      margin: 12px 0;
    }

    .icon-home, .icon-user, .icon-star-solid {
      font-size: 18px;
    }

    .icon-av_timer {
      font-size: 25px;
    }

    .icon-globe, .icon-alert {
      font-size: 20px;
    }

    .activity-indicator {
      position: absolute;
      top: 2px;
      right: 3px;
      .square(8px);
      background: @red;
      border-radius: 50%;
      box-shadow: 0 0 0 3px @header-bg-color;
    }
  }

  .divider-top {
    border-top: 1px solid lighten(#342c3e, 10);
  }

  .divider-bottom {
    border-bottom: 1px solid lighten(#342c3e, 10);
  }

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

  .user-settings {
    .avatar {
      .square(32px);
      box-shadow: 0 1px 1px rggba(0,0,0, .3);
    }

    .dropdown-toggle {
      display: block;
      margin-top: 5px;
    }

    .dropdown-menu {
      left: 34px;
      top: auto;
      bottom: -4px;
      background: @90;
      border-color: transparent;
      box-shadow: 0 1px 3px rgba(0,0,0, .25);
      color: #fff;
      border-radius: 4px;

      a {
        color: @20;

        &:hover {
          color: @purple-light;
          background: transparent;
        }
      }

      &:before {
        display: none;
      }

      &:after {
        top: auto;
        left: -18px;
        bottom: 12px;
        border: 9px solid transparent;
        border-right: 9px solid @90;
      }
    }
  }

  .onboarding-progress-bar {
    margin: 0 8px;
  }

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

    .avatar {
      border-radius: 2px;
      position: relative;
    }
  }

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

// Status update

.navbar .icon-alert {
  color: @yellow-orange;
}

.sidebar-panel {
  position: fixed;
  width: @sidebar-panel-width;
  top: 0;
  left: @sidebar-width;
  bottom: 0;
  background: @white-darker;
  z-index: 100;
  color: @gray-darker;
  border-right: 1px solid @trim;
  box-shadow: 1px 0 2px rgba(0,0,0, .06);
  text-align: left;
  line-height: 24px;

  .sidebar-panel-header {
    border-bottom: 1px solid @trim;
    padding: 23px 20px 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0, .06);
    height: @sidebar-panel-header-height;

    .close {
      font-size: 22px;
      position: relative;
      top: -3px;
      right: -3px;
      color: @30;

      &:hover {
        color: @50;
      }
    }

    h2 {
      font-size: 18px;
      margin: 0;
      font-weight: normal;
    }
  }

  .sidebar-panel-body {
    position: absolute;
    top: @sidebar-panel-header-height;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;

    .box {
      border: 0;
      background: transparent;
      box-shadow: none;

      .loading-indicator {
        border-top: 6px solid @gray-lightest;
        border-right: 6px solid @gray-lightest;
        border-bottom: 6px solid @gray-lightest;
        border-left: 6px solid @gray;
      }
    }

    .issue-list {
      border: none;
      box-shadow: none;

      .issue {
        border-bottom: 1px solid #e2dee6;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06)
      }
    }
  }

  .sidebar-panel-item {
    padding: 15px 20px;
    line-height: 1.2;
    border-bottom: 1px solid @trim;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0, .06);
    font-size: 14px;

    h3 {
      font-size: 15px;
      margin-bottom: 5px;
      .culprit {
        font-weight: normal;
      }
    }

    p {
      margin-bottom: 5px;
    }

    a {
      color: @50;

      &:hover {
        color: @70;
      }
    }

    .message {
      color: @gray-dark;
    }

    &.active {
      background: @10;
      border-color: @30;
      border-top: 1px solid @30;
      margin-top: -1px;
    }
  }

  .sidebar-panel-empty {
    color: @50;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 50%;
    padding: 0 60px;
    margin-top: (-62px + -16px) / 2; // offset for sidebar-panel-header + font-size
  }
}

.incident-list {
  padding: 20px 20px 0;
  font-size: 13px;

  h4, p, h6  {
     margin-bottom: 15px;
  }

  h4 {
    font-size: 18px;
    line-height: 1.2;
  }

  h6 {
    color: @60;
  }

  p {
    line-height: 1.5;
  }

  small {
    color: @60;
  }

  .incident-item {
    border-bottom: 1px solid @trim;
    margin-bottom: 20px;
    padding-bottom: 5px;
  }
}

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

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

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

@media print {
  .navbar {
      display: none;
  }
}

/**
* Responsive small screens
* ============================================================================
*/

@media(max-width:767px) {
  @sidebar-panel-offset: 54px;

  body {
    padding-left: 0;
  }

  .navbar {
    flex-direction: row;
    position: static;
    width: 100%;
    max-height: @sidebar-panel-offset;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 30px;

    .navbar-nav {
      flex-direction: row;
      padding: 0 6px 0 10px;

      > li {
        margin: 0 5px 0 0;

        &.active:before {
          top: auto;
          right: auto;
          bottom: -11px;
          left: 50%;
          margin-left: -6px;
          border-bottom: 7px solid #F7F8F9;
          border-right: 7px solid transparent;
          border-left: 7px solid transparent;
          border-top: 7px solid transparent;
        }

        &.onboarding {
          display: none;
        }
      }
    }

    .divider-bottom {
      border: 0;
      border-right: 1px solid @gray;
    }

    .anchor-top {
      display: flex;

      > div {
        display: flex;
      }

      .org-selector {
        padding: 0;
        padding-right: 14px;
      }
    }

    .anchor-bottom {
      display: flex;

      .navbar-nav {
        padding-right: 0;

        > li:last-child {
          margin: 0;
        }
      }
    }

    .user-settings {
      display: block;
      margin-left: 5px;

      .dropdown-toggle {
        margin-top: 0;
      }

      .dropdown-menu {
        left: auto;
        top: 42px;
        right: -3px;
        bottom: auto;

        &:after {
          top: -16px;
          right: 10px;
          left: auto;
          bottom: auto;
          border: 9px solid transparent;
          border-bottom: 9px solid @90;
        }
      }
    }
  }

  .sidebar-panel {
    width: auto;
    top: @sidebar-panel-offset;
    left: 0;
    right: 0;
  }
}


change height to see 8 items

change height to see 8 items

// Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the "Software"),
// to deal in the Software without restriction, including without limitation
// the rights to use, copy, modify, merge, publish, distribute, sublicense,
// and/or sell copies of the Software, and to permit persons to whom the
// Software is furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
// DEALINGS IN THE SOFTWARE.

/* Brackets patterns (and overrides and re-definitions of Bootstrap patterns)
 *
 * This file should contain all _reusable_ UI elements / LESS definitions
 * That is, things that will either a.) be used for more than one element or
 * b.) exist in multiple versions of brackets (e.g. App, In-Browser, etc.)
 *
 * Note that if you want a UI element to be themeable, you should put the
 * themeable part in "brackets_theme_default" as variables/mixins.
 *
 */

.project-panel-background {
    background: rgb(73,77,77); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(73,77,77) 0%, rgb(59,63,65) 51%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(73,77,77)), color-stop(51%,rgb(59,63,65))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* IE10+ */
    background: linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* W3C */
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#494d4d', endColorstr='#3b3f41',GradientType=0 )";  /* IE6-9 */
}

.panel {
    .vbox;
    .box-flex(1);

    padding: 0;
    margin: 0;

    .project-panel-background;
    color: #bbb;
    letter-spacing: .01em;
    text-shadow: 0px 1px 2px rgba(0,0,0,.5);
}

/* Toolbar-related styles */

/* Simple toolbar layout (project panel, find in files, etc.)
   We don't set this directly on .toolbar because it'd be a pain to override all the pieces
   if other code (e.g. #main-toolbar) wants to do a different layout */
.simple-toolbar-layout.toolbar {
    .hbox;
    .box-align(center);
    .title-wrapper {
        /* This is necessary because text-overflow: ellipsis doesn't work when it's set
           directly on a flexing box in Chrome currently. */
        .box-flex(1);
    }
    .buttons {
        .hbox;
        margin-left: 4px;
    }
}

/* Editor toolbar layout

   CSS hack based on this code: http://jsfiddle.net/cD657/3/ (via StackOverflow)
   This center-aligns the title across the full width of the toolbar (ignoring the width of the nav floated
   left and buttons floated right), yet still have the browser automatically wrap the floats onto a 2nd row
   if they collide with the title. But the centered content must be a block element with fixed width. Since
   the editor title (filename) varies in width, we rely on JS code to update the width whenever the string
   changes.

   Another wrinkle: wrapping to/from the two-line toolbar layout requires notifying the CodeMirror editor that
   its height changed. Currently, we assume this can ONLY happen in two cases:
    - the window resizes (handled by general listener in EditorManager)
    - title content changes (the same JS code that sets .title-wrapper's fixed width is expected to handle this)
*/
#main-toolbar.toolbar {
    text-align: center;
    .nav {
        float: left;
        text-align: left;
    }
    .title {
        float: none;
        display: inline;  // must be an inline for JS to measure text size
    }
    .title-wrapper {
        margin: 0 auto;
        display: block;  // must be a block for the fixed width applied by JS to be respected
        // width set in px is appled/updated by JavaScript in DocumentCommandHandlers
    }
    .buttons {
        float: right;
        text-align: left;
    }
}

/* Toolbar appearance - shared by all toolbars, independent of layout */

@toolbar-top-gap-px: 5px;

.toolbar {
    font-size: @label-font-size;
    padding: 4px 8px;
    background-color: @bc-white;
    color: @bc-black;

    position: relative; // starts a new stacking group so that the drop shadow shows up on top of the code editor
    .box-shadow(0 1px 1px 0 fadeout(@bc-black, 90%));

    .title-wrapper {
        // Title is taller than menu text, so reduce top padding to keep its baseline aligned
        padding: (@toolbar-top-gap-px - 3px) 0 3px 0;
    }
    .title {
        font-size: @title-font-size;
        line-height: normal;
        font-weight: @font-weight-light;

        // On Win, the size+weight combo used above does not look good for the bullet character
        .dirty-dot {
            font-weight: normal;
        }

        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .buttons {
        margin: @toolbar-top-gap-px 0 0 4px;

        .experimental-label {
            color: #a0a0a0;
            font-size: 15px;
            line-height: 20px;  // prevent jumping when 20px-tall JSLint star is added/removed
            font-weight: normal;
            font-style: italic;
            padding-right: 22px;
        }
    }
}

/* Menu-related styles */

@menubar-top-padding: 8px;
@menubar-bottom-padding: 6px;
@menubar-h-padding: 9px;
@item-highlight-color: #e0f0fa;

.toolbar .nav, .context-menu, .codehint-menu {

    // The 1px adjustments here are to account for the border around the top-level menu items.
    margin: (@toolbar-top-gap-px - @menubar-top-padding - 1) 0 (-@menubar-bottom-padding + 1) (-@menubar-h-padding + 4);

    // General item appearance
    a {
        color: @bc-black;
        text-shadow: none;
    }

    // Menubar item appearance
    .dropdown-toggle {
        padding: @menubar-top-padding @menubar-h-padding @menubar-bottom-padding;
        border: 1px solid rgba(0, 0, 0, 0); // transparent border just to hold the layout so it doesn't shift on hover
        color: fadeout(@bc-black, 25%);
        font-weight: @font-weight-light;
    }
    .dropdown-toggle:hover, .dropdown.open .dropdown-toggle {
        /* Note: we need several selectors for this in order to match the specificity of all the various Bootstrap
           color rules we need to override (and Bootstrap has several selectors because the colors really differ
           in their defaults). */
        color: @bc-black;
        background: @item-highlight-color;
        border-color: #dbeaf4;
    }

    // no triangle icon after menu items
    .dropdown-toggle:after {
        border: 0;
        margin: 0;
    }

    // Menu dropdown appearance
    .dropdown-menu {
        top: 34px; // Offset from top of menubar item

        background-color: @bc-white;
        border: 1px solid #c8c8c8;
        .border-radius(0 0 3px 3px);
        .box-shadow(0 6px 18px 0 rgba(0, 0, 0, .2));

        // Menu items
        li {
            a {
                font-size: @menu-item-font-size;
                line-height: 18px;

                // Slightly less padding on left to account for checkmark.
                // More padding on top than bottom to center font within its bg highlight better.
                padding: 2px 10px 0px 6px;

                color: @bc-black;
                text-shadow: none;
                white-space: nowrap;
                .box-shadow(none);

                &:hover, &.highlight {
                    color: @bc-black;
                    background: @item-highlight-color;
                }

                &.disabled {
                    color: @bc-gray;

                    &:hover {
                        background: @bc-white;
                    }
                }

                /* hidden checkmark for all list item content ensures consistent left spacing */
                &::before {
                    content: "✓\00a0"; /* non-breaking space */
                    visibility: hidden;
                }
                /* toggle checkmark visibility */
                &.checked::before {
                    visibility: visible;
                }
            }
        }

        .divider {
            background-color: #eaeaea;
            border: 0;
        }
    }

    // Ensure a minimum amount of space to the left of the shortcut
    .menu-shortcut {
        margin-left: 15px;
    }
}

/* Context menu styles */

.context-menu, .codehint-menu {
    position: absolute;
    z-index: @z-index-brackets-context-menu-base;
    list-style-type: none;

    .dropdown-menu {
        .border-radius(3px);
    }

    .menu-shortcut {
        float: right;
    }
}

.codehint-menu {
    .dropdown-menu {
        .box-shadow(none);
        max-height: 160px;
        overflow-y: auto;

        padding: 0;

        li {
            a {
                // Less padding than on menus. More padding on top than bottom
                // to center font within its bg highlight better.
                padding: 2px 0px 0px 0px;

                // Don't show highlighting on hover for code hints...
                &:hover {
                    color: @bc-black;
                    background-color: @bc-white;
                }

				// ...except for selected item
                &.highlight:hover {
                    color: @bc-black;
                    background-color: @item-highlight-color;
                }
            }
        }
    }
}

#context-menu-bar {
    margin: 0;
}

/* Dialog-related styles */

.modal-footer .btn.left {
    float: left;
}

.modal-body ul {
    /* Bootstrap's type.less defines a heavy margin-bottom on ul/ol that we don't want in dialogs
       since they have heavy padding instead. */
    margin-bottom: 0;
}

.dialog-title {
    margin-bottom: 0;
    font-size: 26px;
    line-height: 40px;
    font-weight: @font-weight-light;
}

.dialog-message {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
    font-weight: @font-weight-light;
}

/* bootstrap's base color for generic li is gray */
.dialog-message li {
    line-height: 26px;
    color: @grayDark;
}

.dialog-filename {
    font-weight: @font-weight-semibold;
}

.btn {
    font-size: 16px;
    font-weight: @font-weight-semibold;
    color: #454545;

    // On hover, gradient slides away to reveal a solid-color bg. Want same bg color in non-hover
    // too so we don't see the color cross-fading during the gradient slide animation
    background-color: #fff;
    &:hover {
        background-position: 0 15px;
    }

    &.primary {
        background-color: @blue;
    }
}

/* About dialog */
.about-dialog .modal-body {
    // Simple two-column layout: image on left, text taking up remaining space on right
    position: relative;
    .about-icon {
        position: absolute;
        left: 10px;  // relative to border of modal-body (bounds outside padding)
        top:  11px;
    }
    .about-text {
        // Icon is 120px, so we need at least that much left padding/margin to avoid overlap
        margin: 0 10px 0 123px;

        #about-build-number {
            color: #b0b0b0;
        }
    }

    h2 {
        font-weight: normal;
        font-size: 25px;
        margin-bottom: -8px;
        margin-top: 3px;
    }
    .dialog-message {
        font-size: 14px;
        line-height: 17px;

        // Enable text selection, since URLs aren't clickable
        cursor: auto;
        -webkit-user-select: text;
        -khtml-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        -o-user-select: text;
        user-select: text;
    }
}

// Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the "Software"),
// to deal in the Software without restriction, including without limitation
// the rights to use, copy, modify, merge, publish, distribute, sublicense,
// and/or sell copies of the Software, and to permit persons to whom the
// Software is furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
// DEALINGS IN THE SOFTWARE.

/* Brackets patterns (and overrides and re-definitions of Bootstrap patterns)
 *
 * This file should contain all _reusable_ UI elements / LESS definitions
 * That is, things that will either a.) be used for more than one element or
 * b.) exist in multiple versions of brackets (e.g. App, In-Browser, etc.)
 *
 * Note that if you want a UI element to be themeable, you should put the
 * themeable part in "brackets_theme_default" as variables/mixins.
 *
 */

.project-panel-background {
    background: rgb(73,77,77); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(73,77,77) 0%, rgb(59,63,65) 51%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(73,77,77)), color-stop(51%,rgb(59,63,65))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* IE10+ */
    background: linear-gradient(top,  rgb(73,77,77) 0%,rgb(59,63,65) 51%); /* W3C */
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#494d4d', endColorstr='#3b3f41',GradientType=0 )";  /* IE6-9 */
}

.panel {
    .vbox;
    .box-flex(1);

    padding: 0;
    margin: 0;

    .project-panel-background;
    color: #bbb;
    letter-spacing: .01em;
    text-shadow: 0px 1px 2px rgba(0,0,0,.5);
}

/* Toolbar-related styles */

/* Simple toolbar layout (project panel, find in files, etc.)
   We don't set this directly on .toolbar because it'd be a pain to override all the pieces
   if other code (e.g. #main-toolbar) wants to do a different layout */
.simple-toolbar-layout.toolbar {
    .hbox;
    .box-align(center);
    .title-wrapper {
        /* This is necessary because text-overflow: ellipsis doesn't work when it's set
           directly on a flexing box in Chrome currently. */
        .box-flex(1);
    }
    .buttons {
        .hbox;
        margin-left: 4px;
    }
}

/* Editor toolbar layout

   CSS hack based on this code: http://jsfiddle.net/cD657/3/ (via StackOverflow)
   This center-aligns the title across the full width of the toolbar (ignoring the width of the nav floated
   left and buttons floated right), yet still have the browser automatically wrap the floats onto a 2nd row
   if they collide with the title. But the centered content must be a block element with fixed width. Since
   the editor title (filename) varies in width, we rely on JS code to update the width whenever the string
   changes.

   Another wrinkle: wrapping to/from the two-line toolbar layout requires notifying the CodeMirror editor that
   its height changed. Currently, we assume this can ONLY happen in two cases:
    - the window resizes (handled by general listener in EditorManager)
    - title content changes (the same JS code that sets .title-wrapper's fixed width is expected to handle this)
*/
#main-toolbar.toolbar {
    text-align: center;
    .nav {
        float: left;
        text-align: left;
    }
    .title {
        float: none;
        display: inline;  // must be an inline for JS to measure text size
    }
    .title-wrapper {
        margin: 0 auto;
        display: block;  // must be a block for the fixed width applied by JS to be respected
        // width set in px is appled/updated by JavaScript in DocumentCommandHandlers
    }
    .buttons {
        float: right;
        text-align: left;
    }
}

/* Toolbar appearance - shared by all toolbars, independent of layout */

@toolbar-top-gap-px: 5px;

.toolbar {
    font-size: @label-font-size;
    padding: 4px 8px;
    background-color: @bc-white;
    color: @bc-black;

    position: relative; // starts a new stacking group so that the drop shadow shows up on top of the code editor
    .box-shadow(0 1px 1px 0 fadeout(@bc-black, 90%));

    .title-wrapper {
        // Title is taller than menu text, so reduce top padding to keep its baseline aligned
        padding: (@toolbar-top-gap-px - 3px) 0 3px 0;
    }
    .title {
        font-size: @title-font-size;
        line-height: normal;
        font-weight: @font-weight-light;

        // On Win, the size+weight combo used above does not look good for the bullet character
        .dirty-dot {
            font-weight: normal;
        }

        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .buttons {
        margin: @toolbar-top-gap-px 0 0 4px;

        .experimental-label {
            color: #a0a0a0;
            font-size: 15px;
            line-height: 20px;  // prevent jumping when 20px-tall JSLint star is added/removed
            font-weight: normal;
            font-style: italic;
            padding-right: 22px;
        }
    }
}

/* Menu-related styles */

@menubar-top-padding: 8px;
@menubar-bottom-padding: 6px;
@menubar-h-padding: 9px;
@item-highlight-color: #e0f0fa;

.toolbar .nav, .context-menu, .codehint-menu {

    // The 1px adjustments here are to account for the border around the top-level menu items.
    margin: (@toolbar-top-gap-px - @menubar-top-padding - 1) 0 (-@menubar-bottom-padding + 1) (-@menubar-h-padding + 4);

    // General item appearance
    a {
        color: @bc-black;
        text-shadow: none;
    }

    // Menubar item appearance
    .dropdown-toggle {
        padding: @menubar-top-padding @menubar-h-padding @menubar-bottom-padding;
        border: 1px solid rgba(0, 0, 0, 0); // transparent border just to hold the layout so it doesn't shift on hover
        color: fadeout(@bc-black, 25%);
        font-weight: @font-weight-light;
    }
    .dropdown-toggle:hover, .dropdown.open .dropdown-toggle {
        /* Note: we need several selectors for this in order to match the specificity of all the various Bootstrap
           color rules we need to override (and Bootstrap has several selectors because the colors really differ
           in their defaults). */
        color: @bc-black;
        background: @item-highlight-color;
        border-color: #dbeaf4;
    }

    // no triangle icon after menu items
    .dropdown-toggle:after {
        border: 0;
        margin: 0;
    }

    // Menu dropdown appearance
    .dropdown-menu {
        top: 34px; // Offset from top of menubar item

        background-color: @bc-white;
        border: 1px solid #c8c8c8;
        .border-radius(0 0 3px 3px);
        .box-shadow(0 6px 18px 0 rgba(0, 0, 0, .2));

        // Menu items
        li {
            a {
                font-size: @menu-item-font-size;
                line-height: 18px;

                // Slightly less padding on left to account for checkmark.
                // More padding on top than bottom to center font within its bg highlight better.
                padding: 2px 10px 0px 6px;

                color: @bc-black;
                text-shadow: none;
                white-space: nowrap;
                .box-shadow(none);

                &:hover, &.highlight {
                    color: @bc-black;
                    background: @item-highlight-color;
                }

                &.disabled {
                    color: @bc-gray;

                    &:hover {
                        background: @bc-white;
                    }
                }

                /* hidden checkmark for all list item content ensures consistent left spacing */
                &::before {
                    content: "✓\00a0"; /* non-breaking space */
                    visibility: hidden;
                }
                /* toggle checkmark visibility */
                &.checked::before {
                    visibility: visible;
                }
            }
        }

        .divider {
            background-color: #eaeaea;
            border: 0;
        }
    }

    // Ensure a minimum amount of space to the left of the shortcut
    .menu-shortcut {
        margin-left: 15px;
    }
}

/* Context menu styles */

.context-menu, .codehint-menu {
    position: absolute;
    z-index: @z-index-brackets-context-menu-base;
    list-style-type: none;

    .dropdown-menu {
        .border-radius(3px);
    }

    .menu-shortcut {
        float: right;
    }
}

.codehint-menu {
    .dropdown-menu {
        .box-shadow(none);
        max-height: 300px;
        overflow-y: auto;

        padding: 0;

        li {
            a {
                // Less padding than on menus. More padding on top than bottom
                // to center font within its bg highlight better.
                padding: 2px 0px 0px 0px;

                // Don't show highlighting on hover for code hints...
                &:hover {
                    color: @bc-black;
                    background-color: @bc-white;
                }

				// ...except for selected item
                &.highlight:hover {
                    color: @bc-black;
                    background-color: @item-highlight-color;
                }
            }
        }
    }
}

#context-menu-bar {
    margin: 0;
}

/* Dialog-related styles */

.modal-footer .btn.left {
    float: left;
}

.modal-body ul {
    /* Bootstrap's type.less defines a heavy margin-bottom on ul/ol that we don't want in dialogs
       since they have heavy padding instead. */
    margin-bottom: 0;
}

.dialog-title {
    margin-bottom: 0;
    font-size: 26px;
    line-height: 40px;
    font-weight: @font-weight-light;
}

.dialog-message {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
    font-weight: @font-weight-light;
}

/* bootstrap's base color for generic li is gray */
.dialog-message li {
    line-height: 26px;
    color: @grayDark;
}

.dialog-filename {
    font-weight: @font-weight-semibold;
}

.btn {
    font-size: 16px;
    font-weight: @font-weight-semibold;
    color: #454545;

    // On hover, gradient slides away to reveal a solid-color bg. Want same bg color in non-hover
    // too so we don't see the color cross-fading during the gradient slide animation
    background-color: #fff;
    &:hover {
        background-position: 0 15px;
    }

    &.primary {
        background-color: @blue;
    }
}

/* About dialog */
.about-dialog .modal-body {
    // Simple two-column layout: image on left, text taking up remaining space on right
    position: relative;
    .about-icon {
        position: absolute;
        left: 10px;  // relative to border of modal-body (bounds outside padding)
        top:  11px;
    }
    .about-text {
        // Icon is 120px, so we need at least that much left padding/margin to avoid overlap
        margin: 0 10px 0 123px;

        #about-build-number {
            color: #b0b0b0;
        }
    }

    h2 {
        font-weight: normal;
        font-size: 25px;
        margin-bottom: -8px;
        margin-top: 3px;
    }
    .dialog-message {
        font-size: 14px;
        line-height: 17px;

        // Enable text selection, since URLs aren't clickable
        cursor: auto;
        -webkit-user-select: text;
        -khtml-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        -o-user-select: text;
        user-select: text;
    }
}


Update and rename theme_material_design/static/src/less/options to theme_material_design/static/src/less/options/bg_dark.less

@body-bg:           @gray-ultra-darker;
@text-color:        @gray-lighter;
@headings-color:    white;

/*
@navbar-default-bg:                     @gray-ultra-dark;
@navbar-default-link-color:             @gray-lighter;
@navbar-default-link-hover-color:       white;
*/

#wrapwrap {
    background-color: @gray-ultra-dark;
    }

error: pathspec 'theme_material_design/static/src/less/options/bg_dark.less' did not match any file(s) known to git


Add avatar component

Add avatar component

.avatar {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

error: pathspec 'client/styles/components/avatar.less' did not match any file(s) known to git


add the theme file derp

add the theme file derp

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/AlexKenbo/advercabinet.git/'


added griid.less

added griid.less

// Just for visibility
.cell, [class^='cell-'], [class*='cell-'] {
  background: blue;
  color: #fff;
  outline: 1px solid #fff;
}

// Requires
@fz: 20; // the pixel value of the wrapper's (in this example, 's) text
.fz(@font-size: @fz) {font-size: @font-size * 1em / @fz}
html, body {font-size: 1px * @fz; line-height: 2;}
@mobile-break-width: 765px; // window width at which columns collapse

/* LESS styles for a grid system
   called Griid
   with support for centered unfilled rows

   by Henry Bley-Vroman,
   2016,
   MIT License.

   Stands alone, or use with the rows-of-columns.html Twig snippet

   Uses inline-block, so does not work below IE9

*/

// Configuration
@griid-cell_spacing: 0; // 0 is recommended; percentage values will not be respected by type A columns (see below)
@griid-row_spacing: 0; // 0 is recommended; percentage values will not be respected by type A columns (see below)
@griid-min_fractional_width: 6; // read the value x as 1/x
@griid-max_equal_columns: 6;

/*
 * README
 *
 * Usage:
 *
 * 1. Three types of rows are supported
 *
 *     A. Automatic equal-width cells,
 *        filling one entire row.
 *
 *

 *
1-

 *
2-

 *
3-

 *

 *
 *        |     1-     |     2-     |     3-     |
 *
 *
 *     B. Automatic equal-width cells,
 *        with a specified number of columns per row.
 *
 *

 *
...

 *
...

 *             ...
 *

 *
 *        where COUNT is an integer between 2 and @griid-max_equal_columns (inclusive).
 *        All cell will be the same width, 1/COUNT the width of the row.
 *
 *        For example:
 *
 *

 *
1

 *
2

 *
3

 *

 *
 *        |        1        |        2        |
 *                 |        3        |
 *
 *
  *     C. Cell fractional width specified on a per-column basis,
 *        with under-full rows aligned centered.
 *
 *

 *
...

 *             ...
 *

 *
 *        where X is an integer less than N,
 *        and N is an integer between 2 and @griid-min_fractional_width (inclusive).
 *        Cell will be X/N the width of the row. Cells' widths are
 *        independent of each other.
 *
 *        !Important: Because the styles don't know what cell widths you've used,
 *        you must add `.row-end` to the last cell of each row
 *
 *

 *
1

 *
2

 *
3

 *
2

 *

 *        |    1    |        2        |    3    |
 *                    |      4      |
 *
 *        Full-width cells are cell-N-N or `cell-full`, and do not require `row-end`
 *
 *
 * 2. For A and B, columns are separated by
 *
 *
 * 3. In all cases,
 *     - Cells are separated by the griid-cell_spacing value,
 *     - Cells are vertically centered.
 *         - Add `.top` or `.bottom` to a column to customize its vertical alignment
 *         - Add `.top` or `.bottom` to a row or row group to customize the default for its child columns
 *         - Override upstream up customizations by adding `.top`, `.middle`, or `.bottom` to a row or column
 *
 *
 * Acknowledgements:
 * This started as a modification of Joel Sutherland's "grid-items" grid system
 *
 */

@columnsfz: 1rem * @fz;
@mobile: ~'all and (max-width: @{mobile-break-width})';
.griid, [class^='griid-'], [class*='griid-'] {     // GRID

    @IE_friendly_hundred_percent: 99.99999%; // there's always one IE problem

    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    position: relative;
    font-size: 0;

    &.griid {
        border-spacing: @griid-cell_spacing;
    }
    .cell, [class^='cell-'], [class*='cell-']  { // CELLS
        .fz(@columnsfz);
        position: relative;
        margin-bottom: @griid-row_spacing;

        display: table-cell;                            // will be overridden for non-auto cells
        width: 1%;

        &, &.middle, .middle& {                        // cell vertical alignment
            vertical-align: middle
        }
        .group-of-rows.top &, &.top, .top& {
            vertical-align: top
        }
        .group-of-rows.bottom &, &.bottom, .bottom& {
            vertical-align: bottom
        }

        img {                                         // not strictly part of the columns system, but vital
            max-width: 100%;
            height: auto
        }

        @media @mobile {
            display: block;
            width: 100% !important;
            padding-right: 0;
        }
    }
    &[class^='griid-'] .cell, &[class*='griid-'] .cell,
    [class^='cell-'], [class*='cell-'] {
        margin-right: @griid-cell_spacing;
        display: inline-block;
        &:last-child {
            margin-right: 0;
        }
        @media @mobile {
            margin-right: 0
        }
    }
                                                                                // CELL WIDTH MIXINS

    .cell-width(@x) {
        @gutters: (@x - 1) * @griid-cell_spacing;
        width: calc(~'(@{IE_friendly_hundred_percent} - @{gutters}) / @{x}');
    }

    .cell-x(@x) {                                                                // for fractional-width cells
        .cell-width(@x);
        &.row-end {
            margin-right: 0
        }
    }
    .cell-x(@x) when (@griid-cell_spacing = 0) {
        width: calc(~'@{IE_friendly_hundred_percent} / @{x}')
    }
    .cell-x-widths(@n, @i: 1) when (@i =< @n) {
        .cell-1-@{i} {.cell-x(@i)}
        .cell-2-@{i} {.cell-x(@i/2)}
        .cell-3-@{i} {.cell-x(@i/3)}
        .cell-4-@{i} {.cell-x(@i/4)}
        .cell-5-@{i} {.cell-x(@i/5)}
        .cell-x-widths(@n, (@i + 1))
    }

    .griid-x(@x) {                                                              // for cells in evenly divided rows
        .cell-width(@x);
        @lastInRow: ~'@{x}n';
        &:nth-of-type(@{lastInRow}) {
            margin-right: 0;
        }
    }
    .griid-x(@x) when (@griid-cell_spacing = 0) {
        width: calc(~'@{IE_friendly_hundred_percent} / @{x}')
    }
    .grid-x-cell-widths(@n, @i: 2) when (@i =< @n) {
        .griid-@{i}& {.griid-x(@i)}
        .grid-x-cell-widths(@n, (@i + 1))
    }

                                                                                // CELL WIDTHS!
    .cell-full { width: @IE_friendly_hundred_percent; margin-right: auto; }
    .cell-x-widths(@griid-min_fractional_width);             /* Cells with fractional widths declared on the cell;
                                                                the largest division supported is automatically 1/2;
                                                                this variable is set in the initial configuration
                                                              */

    .cell {.grid-x-cell-widths(@griid-max_equal_columns);}          /* Cells in a grid where cell count is declared on the grid;
                                                                       a minimum of two cells is automatically supported;
                                                                       this variable is set in the initial configuration
                                                                       */

}

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


Added new input control, a search box

Added new input control, a search box

        <input type="text" placeholder="Search" />

fatal: unable to access 'https://github.com/Livefyre/livefyre-bootstrap.git/': The requested URL returned error: 403


Extracting eventwidget less to own file

Extracting eventwidget less to own file

section#events {

    .event-row {
        margin-bottom:20px;
    }

    .event-title {
        font-size:17px;
        margin-bottom:5px;
    }

    .event-ingress {
        font-size:12px;
        color:#777;
        font-weight:300;
    }

    .event-calendar-box {
        padding:3px 3px 4px 3px;
        text-align:center;
        font-weight:400;
        font-size:19px;
    }

    .event-arrkom {
        .event-calendar-box();
        background:@arrkom-color;
        color:@arrkom-color;
    }

    .event-fagkom {
        .event-calendar-box();
        background:@fagkom-color;
        color:@fagkom-color;
    }

    .event-bedkom {
        .event-calendar-box();
        background:@bedkom-color;
        color:@bedkom-color;
    }

    /* Gets overridden below if needed */
    [class*='event-type-'] {
        .event-arrkom;
    }

    .event-type-1 {
        .event-arrkom;
    }

    .event-type-2 {
        .event-bedkom;
    }

    .event-type-3 {
        .event-fagkom;
    }

    .event-calendar-date {
        display:block;
        background:#FFF;
        padding:3px;
    }

    .event-calendar-month {
        color:#FFF;
        font-size:13px;
        font-weight:400;
        text-transform:uppercase;
    }
}

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


reducing toc header font-weight

reducing toc header font-weight

fatal: unable to access 'https://github.com/pradeepmurugesan/incubator-freemarker-docgen.git/': The requested URL returned error: 403


Make space for the description scrollbar

/**
 *    Copyright 2015-2016 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 *
 */

.beatmapset-info {
  display: flex;
  height: 175px;

  &__details {
    display: flex;

    height: 100%;

    align-self: flex-start;
    padding: 30px;

    flex-grow: 1;
  }

  &__text {
    font-size: 12px;

    &--header {
      font-weight: 700;
      padding-bottom: @spacing * 0.2;
    }

    &--source {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &--tag {
      padding-right: 3px;
      display: inline-block;
    }
  }

  &__description {
    margin-right: @spacing * 2;
    flex-grow: 1;

    overflow-y: auto;

    // in order to make space for the scrollbar
    padding-right: @spacing * 2;

    text-align: justify;
  }

  &__tags-source-box {
    width: 250px;
    min-width: 250px;

    overflow-y: hidden;
  }

  &__text-box {
    padding-bottom: @spacing * 0.5;

    &--source {
      height: 35px;
    }

    &--tags {
      flex-grow: 1;
      overflow-y: hidden;
    }
  }

  &__success-rate {
    align-self: flex-end;

    height: 160px;
    width: 275px;
    min-width: 275px;

    background-color: @grey-e;

    margin-left: auto;
    margin-right: 40px;
  }
}

/**
 *    Copyright 2015-2016 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 *
 */

.beatmapset-info {
  display: flex;
  height: 175px;

  &__details {
    display: flex;

    height: 100%;

    align-self: flex-start;
    padding: 30px;

    flex-grow: 1;
  }

  &__text {
    font-size: 12px;

    &--header {
      font-weight: 700;
      padding-bottom: @spacing * 0.2;
    }

    &--source {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &--tag {
      padding-right: 3px;
      display: inline-block;
    }
  }

  &__description {
    margin-right: @spacing * 2;
    flex-grow: 1;

    overflow-y: auto;

    text-align: justify;
  }

  &__tags-source-box {
    width: 250px;
    min-width: 250px;

    overflow-y: hidden;
  }

  &__text-box {
    padding-bottom: @spacing * 0.5;

    &--source {
      height: 35px;
    }

    &--tags {
      flex-grow: 1;
      overflow-y: hidden;
    }
  }

  &__success-rate {
    align-self: flex-end;

    height: 160px;
    width: 275px;
    min-width: 275px;

    background-color: @grey-e;

    margin-left: auto;
    margin-right: 40px;
  }
}


[fix bug 1405545] Fix background-size for mobile logos sprite 2x.

@import '../fonts.less';
@import '../variables.less';
@import '../includes/mixins.less';
@import 'mixins.less';

.fonts('../../fonts');

html, body {
  font-size: 15px;
  height: 100%;
}

a {
  color: @mobileHyperlink;
  text-decoration: none;
}

a:hover {
  text-decoration: hover;
}

sup sup,
sub sub,
small small {
  bottom: 0;
  font-size: 100%;
  position: relative;
  top: 0;
  vertical-align: baseline;
}

body {
  font-family: @Moz;
  overflow-x: hidden;
  width: 100%;

  > * {
    transform: translateZ(0px);
  }

  > nav {
    background: @mobileNavBackground url('../../img/grain.png') 0 0 repeat;
    color: #fff;
    display: none;
    height: 100%;
    left: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 270px;
    z-index: 0;

    > a,
    > header {
      border-bottom: 1px solid #929e9e;
    }

    > a,
    > a:visited,
    > a:hover {
      color: #fff;
      display: block;
      font-size: 17px;
      padding: 16px 16px 10px 16px;
      text-decoration: none;
    }

    > header {
      background: #1a2122;
      background: url('../../img/grain.png'), linear-gradient(to bottom, #1a2122, #1b2324);
      font-size: 14px;
      font-weight: bold;
      height: 29px;
      line-height: 29px;
      padding: 0 16px;
    }

    #search-bar {
      background: #253132;
      background: url('../../img/grain.png'), linear-gradient(to bottom, #2c393b, #253132);
      box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.75);
      padding: 10px 16px;

      form {
        display: block;
        position: relative;

        button[type='submit'] {
          background-color: transparent;
          background-position: -54px -177px;
          border: 0;
          height: 18px;
          margin: 0;
          outline: 0;
          padding: 0;
          position: absolute;
          right: 6px;
          text-indent: -9999px;
          top: 6px;
          width: 18px;
        }

        input[type='search'] {
          background: #283235;
          border: 1px solid rgba(0, 0, 0, 0.25);
          border-radius: 3px;
          box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.25) inset;
          box-sizing: border-box;
          color: #849b9f;
          font-family: @Moz;
          font-size: 14px;
          outline: none;
          padding: 5px 30px 4px 4px;
          width: 100%;
        }
      }
    }
  }

  &.exposed {
    > nav {
      display: block;
    }

    .slide-on-exposed {
      left: 270px;
    }
  }

  .slide-on-exposed {
    left: 0;
    transition-property: left, right;
    transition-duration: 0.5s;
  }

  > header {
    background: #cd6723;
    background: linear-gradient(to bottom, #cd6723, #bb482d);
    border-bottom: 1px solid @mobileHeaderBorder;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.75);
    color: #fff;
    height: 50px;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;

    h1 {
      font-size: 24px;
      font-weight: normal;
      height: 50px;
      line-height: 50px;
      margin: 0 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #instant-search-form {
      display: none;
      position: relative;

      &:after {
        color: @textGrey;
        content: '\f002'; // Search icon
        font-family: 'FontAwesome';
        left: 24px;
        line-height: 24px;
        position: absolute;
        top: 13px;
        z-index: 1;
      }

      input[type=search] {
        border: 0;
        box-sizing: border-box;
        box-shadow: none;
        color: #000;
        height: 24px;
        font-size: 14px;
        outline: none;
        margin: 13px;
        padding: 4px 10px 4px 34px;
        width: calc(~'100% - 140px');
      }
    }

    &.searching {
      #instant-search-form {
        display: block;
      }

      #header-components {
        display: none;
      }
    }
  }

  > .wrapper {
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8);
    min-height: calc(~"100% - 51px");
    position: absolute;
    top: 51px;
    width: 100%;
    z-index: 1;
  }

  &.minimal {
    > .wrapper {
      box-shadow: none;
      top: 0;
    }
  }

  &[data-orientation='right'] {
    > nav,
    .slide-on-exposed {
      left: auto;
      right: 0;
    }

    #menu-button {
      border-right: 0;
      box-shadow: 0 0 0 1px @mobileHeaderBorder;
      float: right;
    }

    #search-button {
      float: right;
      margin-left: 10px;
      margin-right: 0;
    }

    &.exposed {
      .slide-on-exposed {
        right: 270px;
      }
    }
  }
}

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

h3 {
  font-size: 20px;
  font-weight: normal;
}

h4 {
  font-size: 17px;
  font-weight: normal;
}

input[type='text'],
input[type='password'],
input[type='email'],
input[type='url'],
select,
textarea {
  background: #fff;
  border: 1px solid @mobileInputBorder;
  border-radius: 3px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  box-sizing: border-box;
  display: inline-block;
  font-family: @Moz;
  font-size: 14px;
  margin: 0 0 12px 0;
  outline: none;
  padding: 10px 12px;
  width: 100%;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  height: 41px;
}

.add-button {
  background-position: -36px -1153px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px @mobileHeaderBorder;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.btn,
.btn:visited,
input[type="submit"],
input[type="submit"]:visited {
  background: #e3e3e3;
  background: linear-gradient(to bottom, #fafafa, #cdcdcd);
  border: 1px solid #ababab;
  border-radius: 2px;
  box-sizing: border-box;
  color: @textDarkGrey;
  cursor: pointer;
  display: block;
  font-family: @Moz;
  font-size: 16px;
  font-weight: bold;
  outline: none;
  margin: 0 0 6px 0;
  padding: 4px 0;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  width: 100%;

  &.btn-submit {
    background: #00caf2;
    background: linear-gradient(to bottom, #00caf2, #00aacd);
    border: 0;
    font-size: 17px;
    padding: 8px 0;
  }
}

.btn:hover {
  text-decoration: none;
}

.centered {
  color: #2BBAE7;
  font-family: "Komikax";
  font-size: 24px;
  text-align: center;
  text-transform: uppercase;
}

.collapsable {
  article {
    display: none;
  }

  .toggle {
    color: @mobileHyperlink;
    cursor: pointer;

    > span {
      &.alt {
        display: none;
      }
    }
  }

  &.expanded {
    article {
      display: block;
    }

    .toggle {
      > span {
        display: none;

        &.alt {
          display: inline;
        }
      }
    }
  }
}

.edit-button {
  background-position: -36px -657px;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -10px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.errorlist {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;

  li {
    color: @textDarkOrange;
    margin-bottom: 6px;

    a,
    a:visited,
    a:hover {
      color: @textDarkOrange;
      text-decoration: none;
    }
  }
}

.icon-sprite {
  .icons-sprite();
}

.logo-sprite {
  background: url('../../img/mobile/logos-sprite.png?v=4') -50px -50px no-repeat;
  height: 48px;
  width: 48px;

  /* Vertical position = 50px + i * 148 */

  &.logo-firefox {
    background-position: -50px -50px;
  }

  &.logo-thunderbird {
    background-position: -50px -198px;
  }

  &.logo-mobile {
    background-position: -50px -346px;
  }

  &.logo-firefox-os {
    background-position: -50px -494px;
  }

  &.logo-webmaker {
    background-position: -50px -642px;
  }

  &.logo-other {
    background-position: -50px -790px;
  }

  &.logo-ios {
    background-position: -50px -938px;
  }

  &.logo-focus {
    background-position: -50px -1234px;
  }

  &.logo-focus {
      background-position: -50px -1234px;
  }

  &.logo-firefox-rocket {
      background-position: -50px -1382px;
  }

}

.header-overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  border-bottom: 1px solid #000;
  height: 50px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;

  h2 {
    color: #fff;
    font-size: 24px;
    font-weight: normal;
    line-height: 50px;
    margin: 0 16px;
  }

  .done-button {
    color: #fff;
    cursor: pointer;
    float: right;
    height: 50px;
    line-height: 50px;
    padding: 0 12px;
  }
}

.footer-overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  bottom: 0;
  height: 50px;
  position: fixed;
  width: 100%;
  z-index: 100;
}

.overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;

  > header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    height: 50px;
    left: 0;
    line-height: 50px;
    padding: 0 30px;
    position: absolute;
    right: 0;
    top: 0;
  }

  .select-list {
    font-size: 24px;
    list-style: none;
    margin: 0 24px;
    padding: 0;

    > li {
      > a,
      > a:visited,
      > a:hover {
        border-bottom: 1px solid #000;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
        color: #fff;
        display: block;
        padding: 16px 28px 16px 6px;
        position: relative;
        text-decoration: none;
      }

      &.selected {
        > a,
        > a:visited,
        > a:hover {
          color: #00a5c5;

          &:before {
            content: '\2713';
            position: absolute;
            right: 0;
          }
        }
      }

      &:first-of-type {
        > a {
          border-top: 0;
        }
      }

      &:last-of-type {
        > a {
          border-bottom: 0;
        }
      }
    }
  }

  .wrapper {
    bottom: 0;
    color: #fff;
    font-size: 24px;
    left: 0;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 51px;

    &.padded {
      padding: 0 24px;
    }

    input {
      color: #000;
    }
  }
}

.paginator {
  list-style: none;
  margin: 0;
  padding: 10px 16px;

  li {
    box-sizing: border-box;
    float: left;
    width: 27.5%;

    &.disabled {
      opacity: 0.5;
    }

    &.page {
      padding: 0 16px;
      width: 45%;

      .select-box {
        float: none;
        margin: 0;
      }
    }

    .btn {
      margin-top: 4px;
    }
  }
}

.progress-bar {
  background: rgba(0, 0, 0, 0.1) url('../../img/grain.png');
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  height: 24px;
  line-height: 24px;
  position: relative;
  text-align: right;
  z-index: 1;

  &:after {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 13px;
    bottom: -2px;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }

  &:before {
    border: 2px solid rgba(0, 0, 0, 0.01);
    border-radius: 12px;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }

  > div {
    background: #ff9500;
    background: linear-gradient(to bottom, #ff9500, #ed7000);
    border-radius: 12px;
    height: 24px;
    position: relative;
    z-index: 5;

    > span {
      margin-right: 10px;
    }
  }
}

.pulldown-menu {
  background: @mobileNavBackground url('../../img/grain.png');
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  left: 0;
  margin-top: 51px;
  position: absolute;
  width: 100%;
  z-index: 8;

  .pulldown-panel {
    max-height: 0;
    overflow: hidden;
    transition-property: max-height;
    transition-duration: 0.5s;

    > section {
      border-bottom: 1px solid #2f393b;
      border-top: 1px solid #484d54;
      padding: 6px 16px;

      &:first-of-type {
        border-top: 0;
      }

      &:last-of-type {
        border-bottom: 0;
      }
    }
  }

  &.open {
    .pulldown-panel {
      max-height: 800px;
      transition-duration: 1.55s;
    }
  }

  .pulldown-handle {
    background: url('../../img/mobile/handle.png') 0 0 no-repeat;
    bottom: -19px;
    cursor: pointer;
    height: 19px;
    left: 50%;
    margin-left: -42px;
    position: absolute;
    width: 85px;
  }
}

.return-button {
  background-position: -48px -286px;
  border-right: 1px solid @mobileHeaderBorder;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
  float: left;
  height: 24px;
  margin: 0 8px 0 0;
  padding: 13px 4px 13px 2px;
  text-indent: -9999px;
  width: 24px;
}

.scrollable {
  -webkit-overflow-scrolling: touch;
}

.select-box {
  background: #e7e7e7;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  color: #333;
  cursor: pointer;
  float: left;
  height: 38px;
  line-height: 38px;
  overflow: hidden;
  padding: 0 14px;
  position: relative;
  text-decoration: none;

  &:after {
    border-color: transparent #333 transparent transparent;
    border-style: solid;
    border-width: 10px 10px 0 0;
    bottom: 3px;
    content: '';
    position: absolute;
    right: 3px;
  }
}

.smart-width {
  max-width: 100%;
}

.swipeable {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.topic-sprite {
  background: url('../../img/mobile/topics-sprite.png?v=1') -50px -494px no-repeat;
  height: 48px;
  width: 48px;

  &.topic-get-started,
  &.topic-learn-basics-firefox-os {
    background-position: -50px -50px;
  }

  &.topic-download-and-install {
    background-position: -50px -198px;
  }

  &.topic-privacy-and-security {
    background-position: -50px -346px;
  }

  &.topic-customize,
  &.topic-customize-settings {
    background-position: -50px -494px;
  }

  &.topic-fix-problems {
    background-position:  -50px -642px;
  }

  &.topic-get-community-support {
    background-position: -50px -790px;
  }

  &.topic-phone-calls-contacts {
    background-position: -50px -938px;
  }

  &.topic-connect-internet {
    background-position: -50px -1086px;
  }

  &.topic-email-messages {
    background-position: -50px -1234px;
  }

  &.topic-marketplace {
    background-position: -50px -1382px;
  }

  &.topic-multimedia-apps {
    background-position: -50px -1530px;
  }
}

.trash-button {
  background-position: -36px -1400px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px @mobileHeaderBorder;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#cancel-button {
  background-position: -53px -781px;
  border-right: 1px solid @mobileHeaderBorder;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  float: left;
  height: 24px;
  margin: 0 8px 0 0;
  padding: 13px 4px 13px 2px;
  text-indent: -9999px;
  width: 12px;
}

#menu-button {
  background-position: -37px -37px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid @mobileHeaderBorder;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  float: left;
  height: 24px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#search-button {
  cursor: pointer;
  float: left;
  height: 50px;
  line-height: 50px;
  margin-right: 10px;
  position: relative;
  text-align: center;
  width: 50px;
  z-index: 5;

  &:before {
    content: '\f002'; // Search icon
    font-family: FontAwesome;
    font-size: 24px;
  }
}

.searching {
  #search-button {
    &:before {
      content: '\f00d' // Multiplication sign
    }
  }
}

#notifications {
  bottom: 0;
  color: #fff;
  font-family: @Moz;
  font-size: 18px;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: fixed;
  right: 0;

  > li {
    background: #323C3E url("../../img/grain.png");
    padding: 16px;

    &.announcement {
      background: #ffc;
      color: #f90;
      font-size: 14px;
      padding: 12px 16px;
    }
  }
}

#reply-button {
  background-position: -36px -905px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px @mobileHeaderBorder;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#send-button {
  background-position: -35px -1029px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px @mobileHeaderBorder;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.page-not-found {
  background: url(../../img/background-404.jpg) no-repeat;
  background-position: 50% 0;
  border-radius: 5px;
  font-size: 18px;
  line-height: 25px;
  margin: 10px auto;
  max-width: 530px;
  min-height: 500px;
  padding: 10px 0;
  text-align: center;

  h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 100;
    line-height: 55px;
    margin-bottom: 80px;
    text-shadow: #222 1px 1px 2px;
  }

  p, div.search-empty {
    background-color: rgba(256, 256, 256, 0.75);
    padding: 5px;
  }

  form {
    margin: 20px 0px;

    .search-query {
      padding: 5px;
    }
  }
}

.footnote {
  display: block;
  font-size: 12px;
  margin: 10px auto;
  max-width: 530px;
}

@media only screen and (max-width: 319px) {
  body {
    > nav {
      width: calc(~"100% - 50px");
    }

    &.exposed {
      .slide-on-exposed {
        left: calc(~"100% - 50px");
      }
    }

    &[data-orientation='right'] {
      &.exposed {
        .slide-on-exposed {
          left: auto;
          right: calc(~"100% - 50px");
        }
      }
    }
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .icon-sprite {
    .icons-sprite-2x();
  }

  .logo-sprite {
    background-image: url('../../img/mobile/logos-sprite-2x.png?v=4');
    background-size: 148px 1480px;
  }

  .topic-sprite {
    background-image: url('../../img/mobile/topics-sprite-2x.png?v=1');
    background-size: 148px 1628px;
  }

  .pulldown-menu {
    .pulldown-handle {
      background-image: url('../../img/mobile/handle-2x.png');
      background-size: 85px 19px;
    }
  }
}

@import '../fonts.less';
@import '../variables.less';
@import '../includes/mixins.less';
@import 'mixins.less';

.fonts('../../fonts');

html, body {
  font-size: 15px;
  height: 100%;
}

a {
  color: @mobileHyperlink;
  text-decoration: none;
}

a:hover {
  text-decoration: hover;
}

sup sup,
sub sub,
small small {
  bottom: 0;
  font-size: 100%;
  position: relative;
  top: 0;
  vertical-align: baseline;
}

body {
  font-family: @Moz;
  overflow-x: hidden;
  width: 100%;

  > * {
    transform: translateZ(0px);
  }

  > nav {
    background: @mobileNavBackground url('../../img/grain.png') 0 0 repeat;
    color: #fff;
    display: none;
    height: 100%;
    left: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 270px;
    z-index: 0;

    > a,
    > header {
      border-bottom: 1px solid #929e9e;
    }

    > a,
    > a:visited,
    > a:hover {
      color: #fff;
      display: block;
      font-size: 17px;
      padding: 16px 16px 10px 16px;
      text-decoration: none;
    }

    > header {
      background: #1a2122;
      background: url('../../img/grain.png'), linear-gradient(to bottom, #1a2122, #1b2324);
      font-size: 14px;
      font-weight: bold;
      height: 29px;
      line-height: 29px;
      padding: 0 16px;
    }

    #search-bar {
      background: #253132;
      background: url('../../img/grain.png'), linear-gradient(to bottom, #2c393b, #253132);
      box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.75);
      padding: 10px 16px;

      form {
        display: block;
        position: relative;

        button[type='submit'] {
          background-color: transparent;
          background-position: -54px -177px;
          border: 0;
          height: 18px;
          margin: 0;
          outline: 0;
          padding: 0;
          position: absolute;
          right: 6px;
          text-indent: -9999px;
          top: 6px;
          width: 18px;
        }

        input[type='search'] {
          background: #283235;
          border: 1px solid rgba(0, 0, 0, 0.25);
          border-radius: 3px;
          box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.25) inset;
          box-sizing: border-box;
          color: #849b9f;
          font-family: @Moz;
          font-size: 14px;
          outline: none;
          padding: 5px 30px 4px 4px;
          width: 100%;
        }
      }
    }
  }

  &.exposed {
    > nav {
      display: block;
    }

    .slide-on-exposed {
      left: 270px;
    }
  }

  .slide-on-exposed {
    left: 0;
    transition-property: left, right;
    transition-duration: 0.5s;
  }

  > header {
    background: #cd6723;
    background: linear-gradient(to bottom, #cd6723, #bb482d);
    border-bottom: 1px solid @mobileHeaderBorder;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.75);
    color: #fff;
    height: 50px;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;

    h1 {
      font-size: 24px;
      font-weight: normal;
      height: 50px;
      line-height: 50px;
      margin: 0 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #instant-search-form {
      display: none;
      position: relative;

      &:after {
        color: @textGrey;
        content: '\f002'; // Search icon
        font-family: 'FontAwesome';
        left: 24px;
        line-height: 24px;
        position: absolute;
        top: 13px;
        z-index: 1;
      }

      input[type=search] {
        border: 0;
        box-sizing: border-box;
        box-shadow: none;
        color: #000;
        height: 24px;
        font-size: 14px;
        outline: none;
        margin: 13px;
        padding: 4px 10px 4px 34px;
        width: calc(~'100% - 140px');
      }
    }

    &.searching {
      #instant-search-form {
        display: block;
      }

      #header-components {
        display: none;
      }
    }
  }

  > .wrapper {
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8);
    min-height: calc(~"100% - 51px");
    position: absolute;
    top: 51px;
    width: 100%;
    z-index: 1;
  }

  &.minimal {
    > .wrapper {
      box-shadow: none;
      top: 0;
    }
  }

  &[data-orientation='right'] {
    > nav,
    .slide-on-exposed {
      left: auto;
      right: 0;
    }

    #menu-button {
      border-right: 0;
      box-shadow: 0 0 0 1px @mobileHeaderBorder;
      float: right;
    }

    #search-button {
      float: right;
      margin-left: 10px;
      margin-right: 0;
    }

    &.exposed {
      .slide-on-exposed {
        right: 270px;
      }
    }
  }
}

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

h3 {
  font-size: 20px;
  font-weight: normal;
}

h4 {
  font-size: 17px;
  font-weight: normal;
}

input[type='text'],
input[type='password'],
input[type='email'],
input[type='url'],
select,
textarea {
  background: #fff;
  border: 1px solid @mobileInputBorder;
  border-radius: 3px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  box-sizing: border-box;
  display: inline-block;
  font-family: @Moz;
  font-size: 14px;
  margin: 0 0 12px 0;
  outline: none;
  padding: 10px 12px;
  width: 100%;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  height: 41px;
}

.add-button {
  background-position: -36px -1153px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px @mobileHeaderBorder;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.btn,
.btn:visited,
input[type="submit"],
input[type="submit"]:visited {
  background: #e3e3e3;
  background: linear-gradient(to bottom, #fafafa, #cdcdcd);
  border: 1px solid #ababab;
  border-radius: 2px;
  box-sizing: border-box;
  color: @textDarkGrey;
  cursor: pointer;
  display: block;
  font-family: @Moz;
  font-size: 16px;
  font-weight: bold;
  outline: none;
  margin: 0 0 6px 0;
  padding: 4px 0;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  width: 100%;

  &.btn-submit {
    background: #00caf2;
    background: linear-gradient(to bottom, #00caf2, #00aacd);
    border: 0;
    font-size: 17px;
    padding: 8px 0;
  }
}

.btn:hover {
  text-decoration: none;
}

.centered {
  color: #2BBAE7;
  font-family: "Komikax";
  font-size: 24px;
  text-align: center;
  text-transform: uppercase;
}

.collapsable {
  article {
    display: none;
  }

  .toggle {
    color: @mobileHyperlink;
    cursor: pointer;

    > span {
      &.alt {
        display: none;
      }
    }
  }

  &.expanded {
    article {
      display: block;
    }

    .toggle {
      > span {
        display: none;

        &.alt {
          display: inline;
        }
      }
    }
  }
}

.edit-button {
  background-position: -36px -657px;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -10px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.errorlist {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;

  li {
    color: @textDarkOrange;
    margin-bottom: 6px;

    a,
    a:visited,
    a:hover {
      color: @textDarkOrange;
      text-decoration: none;
    }
  }
}

.icon-sprite {
  .icons-sprite();
}

.logo-sprite {
  background: url('../../img/mobile/logos-sprite.png?v=4') -50px -50px no-repeat;
  height: 48px;
  width: 48px;

  /* Vertical position = 50px + i * 148 */

  &.logo-firefox {
    background-position: -50px -50px;
  }

  &.logo-thunderbird {
    background-position: -50px -198px;
  }

  &.logo-mobile {
    background-position: -50px -346px;
  }

  &.logo-firefox-os {
    background-position: -50px -494px;
  }

  &.logo-webmaker {
    background-position: -50px -642px;
  }

  &.logo-other {
    background-position: -50px -790px;
  }

  &.logo-ios {
    background-position: -50px -938px;
  }

  &.logo-focus {
    background-position: -50px -1234px;
  }

  &.logo-focus {
      background-position: -50px -1234px;
  }

  &.logo-firefox-rocket {
      background-position: -50px -1382px;
  }

}

.header-overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  border-bottom: 1px solid #000;
  height: 50px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;

  h2 {
    color: #fff;
    font-size: 24px;
    font-weight: normal;
    line-height: 50px;
    margin: 0 16px;
  }

  .done-button {
    color: #fff;
    cursor: pointer;
    float: right;
    height: 50px;
    line-height: 50px;
    padding: 0 12px;
  }
}

.footer-overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  bottom: 0;
  height: 50px;
  position: fixed;
  width: 100%;
  z-index: 100;
}

.overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;

  > header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    height: 50px;
    left: 0;
    line-height: 50px;
    padding: 0 30px;
    position: absolute;
    right: 0;
    top: 0;
  }

  .select-list {
    font-size: 24px;
    list-style: none;
    margin: 0 24px;
    padding: 0;

    > li {
      > a,
      > a:visited,
      > a:hover {
        border-bottom: 1px solid #000;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
        color: #fff;
        display: block;
        padding: 16px 28px 16px 6px;
        position: relative;
        text-decoration: none;
      }

      &.selected {
        > a,
        > a:visited,
        > a:hover {
          color: #00a5c5;

          &:before {
            content: '\2713';
            position: absolute;
            right: 0;
          }
        }
      }

      &:first-of-type {
        > a {
          border-top: 0;
        }
      }

      &:last-of-type {
        > a {
          border-bottom: 0;
        }
      }
    }
  }

  .wrapper {
    bottom: 0;
    color: #fff;
    font-size: 24px;
    left: 0;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 51px;

    &.padded {
      padding: 0 24px;
    }

    input {
      color: #000;
    }
  }
}

.paginator {
  list-style: none;
  margin: 0;
  padding: 10px 16px;

  li {
    box-sizing: border-box;
    float: left;
    width: 27.5%;

    &.disabled {
      opacity: 0.5;
    }

    &.page {
      padding: 0 16px;
      width: 45%;

      .select-box {
        float: none;
        margin: 0;
      }
    }

    .btn {
      margin-top: 4px;
    }
  }
}

.progress-bar {
  background: rgba(0, 0, 0, 0.1) url('../../img/grain.png');
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  height: 24px;
  line-height: 24px;
  position: relative;
  text-align: right;
  z-index: 1;

  &:after {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 13px;
    bottom: -2px;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }

  &:before {
    border: 2px solid rgba(0, 0, 0, 0.01);
    border-radius: 12px;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }

  > div {
    background: #ff9500;
    background: linear-gradient(to bottom, #ff9500, #ed7000);
    border-radius: 12px;
    height: 24px;
    position: relative;
    z-index: 5;

    > span {
      margin-right: 10px;
    }
  }
}

.pulldown-menu {
  background: @mobileNavBackground url('../../img/grain.png');
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  left: 0;
  margin-top: 51px;
  position: absolute;
  width: 100%;
  z-index: 8;

  .pulldown-panel {
    max-height: 0;
    overflow: hidden;
    transition-property: max-height;
    transition-duration: 0.5s;

    > section {
      border-bottom: 1px solid #2f393b;
      border-top: 1px solid #484d54;
      padding: 6px 16px;

      &:first-of-type {
        border-top: 0;
      }

      &:last-of-type {
        border-bottom: 0;
      }
    }
  }

  &.open {
    .pulldown-panel {
      max-height: 800px;
      transition-duration: 1.55s;
    }
  }

  .pulldown-handle {
    background: url('../../img/mobile/handle.png') 0 0 no-repeat;
    bottom: -19px;
    cursor: pointer;
    height: 19px;
    left: 50%;
    margin-left: -42px;
    position: absolute;
    width: 85px;
  }
}

.return-button {
  background-position: -48px -286px;
  border-right: 1px solid @mobileHeaderBorder;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
  float: left;
  height: 24px;
  margin: 0 8px 0 0;
  padding: 13px 4px 13px 2px;
  text-indent: -9999px;
  width: 24px;
}

.scrollable {
  -webkit-overflow-scrolling: touch;
}

.select-box {
  background: #e7e7e7;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  color: #333;
  cursor: pointer;
  float: left;
  height: 38px;
  line-height: 38px;
  overflow: hidden;
  padding: 0 14px;
  position: relative;
  text-decoration: none;

  &:after {
    border-color: transparent #333 transparent transparent;
    border-style: solid;
    border-width: 10px 10px 0 0;
    bottom: 3px;
    content: '';
    position: absolute;
    right: 3px;
  }
}

.smart-width {
  max-width: 100%;
}

.swipeable {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.topic-sprite {
  background: url('../../img/mobile/topics-sprite.png?v=1') -50px -494px no-repeat;
  height: 48px;
  width: 48px;

  &.topic-get-started,
  &.topic-learn-basics-firefox-os {
    background-position: -50px -50px;
  }

  &.topic-download-and-install {
    background-position: -50px -198px;
  }

  &.topic-privacy-and-security {
    background-position: -50px -346px;
  }

  &.topic-customize,
  &.topic-customize-settings {
    background-position: -50px -494px;
  }

  &.topic-fix-problems {
    background-position:  -50px -642px;
  }

  &.topic-get-community-support {
    background-position: -50px -790px;
  }

  &.topic-phone-calls-contacts {
    background-position: -50px -938px;
  }

  &.topic-connect-internet {
    background-position: -50px -1086px;
  }

  &.topic-email-messages {
    background-position: -50px -1234px;
  }

  &.topic-marketplace {
    background-position: -50px -1382px;
  }

  &.topic-multimedia-apps {
    background-position: -50px -1530px;
  }
}

.trash-button {
  background-position: -36px -1400px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px @mobileHeaderBorder;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#cancel-button {
  background-position: -53px -781px;
  border-right: 1px solid @mobileHeaderBorder;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  float: left;
  height: 24px;
  margin: 0 8px 0 0;
  padding: 13px 4px 13px 2px;
  text-indent: -9999px;
  width: 12px;
}

#menu-button {
  background-position: -37px -37px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid @mobileHeaderBorder;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  float: left;
  height: 24px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#search-button {
  cursor: pointer;
  float: left;
  height: 50px;
  line-height: 50px;
  margin-right: 10px;
  position: relative;
  text-align: center;
  width: 50px;
  z-index: 5;

  &:before {
    content: '\f002'; // Search icon
    font-family: FontAwesome;
    font-size: 24px;
  }
}

.searching {
  #search-button {
    &:before {
      content: '\f00d' // Multiplication sign
    }
  }
}

#notifications {
  bottom: 0;
  color: #fff;
  font-family: @Moz;
  font-size: 18px;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: fixed;
  right: 0;

  > li {
    background: #323C3E url("../../img/grain.png");
    padding: 16px;

    &.announcement {
      background: #ffc;
      color: #f90;
      font-size: 14px;
      padding: 12px 16px;
    }
  }
}

#reply-button {
  background-position: -36px -905px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px @mobileHeaderBorder;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#send-button {
  background-position: -35px -1029px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px @mobileHeaderBorder;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.page-not-found {
  background: url(../../img/background-404.jpg) no-repeat;
  background-position: 50% 0;
  border-radius: 5px;
  font-size: 18px;
  line-height: 25px;
  margin: 10px auto;
  max-width: 530px;
  min-height: 500px;
  padding: 10px 0;
  text-align: center;

  h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 100;
    line-height: 55px;
    margin-bottom: 80px;
    text-shadow: #222 1px 1px 2px;
  }

  p, div.search-empty {
    background-color: rgba(256, 256, 256, 0.75);
    padding: 5px;
  }

  form {
    margin: 20px 0px;

    .search-query {
      padding: 5px;
    }
  }
}

.footnote {
  display: block;
  font-size: 12px;
  margin: 10px auto;
  max-width: 530px;
}

@media only screen and (max-width: 319px) {
  body {
    > nav {
      width: calc(~"100% - 50px");
    }

    &.exposed {
      .slide-on-exposed {
        left: calc(~"100% - 50px");
      }
    }

    &[data-orientation='right'] {
      &.exposed {
        .slide-on-exposed {
          left: auto;
          right: calc(~"100% - 50px");
        }
      }
    }
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .icon-sprite {
    .icons-sprite-2x();
  }

  .logo-sprite {
    background-image: url('../../img/mobile/logos-sprite-2x.png?v=4');
    background-size: 148px 1184px;
  }

  .topic-sprite {
    background-image: url('../../img/mobile/topics-sprite-2x.png?v=1');
    background-size: 148px 1628px;
  }

  .pulldown-menu {
    .pulldown-handle {
      background-image: url('../../img/mobile/handle-2x.png');
      background-size: 85px 19px;
    }
  }
}