"no-border" class to remove border

"no-border" class to remove border

/* === Toolbars === */
@navbarBg : #f7f7f8;
@navbarBorderColor: #c4c4c4;
@toolbarBg: @navbarBg;
@toolbarBorderColor: @navbarBorderColor;
@navbarLinksColor: @blue;
@tabbarLinksColor: #929292;
@tabbarActiveLinksColor: @blue;

.navbar-inner, .toolbar-inner {
    .full-size();
    padding: 0 8px;
    .border-box();
    .flexbox();
    .justify-content(space-between);
    .align-items(center);
}
.navbar-inner.cached {
    display: none;
}
.navbar, .toolbar {
    height: 44px;
    width: 100%;
    .border-box();
    font-size: 17px;
    position: relative;
    margin: 0;
    z-index: 500;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    b {
        font-weight: 500;
    }
    a.link {
        line-height: 44px;
        height: 44px;
        text-decoration: none;
        position: relative;
        .flexbox();
        .justify-content(flex-start);
        .align-items(center);
        .transition(300ms);
        html:not(.watch-active-state) &:active, &.active-state {
            opacity: 0.3;
            .transition(0ms);
        }
        i+span, i+i, span+i, span+span {
            margin-left: 7px;
        }
    }
    a.icon-only {
        min-width: 44px;
        .flexbox();
        .justify-content(center);
        .align-items(center);
        margin: 0;
    }
    i.icon {
        display: block;
    }
}
.navbar {
    left: 0;
    top: 0;
    background: @navbarBg;
    .hairline(bottom, @navbarBorderColor);
    &.no-border {
        .hairline-remove(bottom);
    }
    .center {
        font-size: 17px;
        font-weight: 500;
        text-align: center;
        margin: 0;
        position: relative;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        line-height: 44px;
        .flex-shrink(10);
        .flexbox();
        .align-items(center);
    }
    .left, .right {
        .flex-shrink(0);
        .flexbox();
        .justify-content(flex-start);
        .align-items(center);
        .translate3d(0,0,0);
        a+a {
            margin-left: 15px;
        }
    }
    .left {
        margin-right: 10px;
    }
    .right {
        margin-left: 10px;
    }
    .right:first-child {
        position: absolute;
        right: 8px;
        height: 100%;
    }
}
.subnavbar {
    height: 44px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: -1px;
    background: @navbarBg;
    z-index: 20;
    .border-box();
    padding: 0 8px;
    .flexbox();
    .justify-content(space-between);
    .align-items(center);
    .hairline(bottom, @navbarBorderColor);
    &.no-border {
        .hairline-remove(bottom);
    }
    .navbar-on-left &, .navbar-on-right &{
        pointer-events: none;
    }
    .navbar &, .page & {
        position: absolute;
    }
    .page & {
        top: 0;
        margin-top: 0;
    }
    > .buttons-row {
        width: 100%;
    }
    .searchbar, &.searchbar {
        position: absolute;
    }
    &.searchbar, .searchbar {
        position: absolute;
    }
    .searchbar {
        left: 0;
        top: 0;
    }
}
.toolbar {
    left: 0;
    bottom: 0;
    background: @toolbarBg;
    .hairline(top, @toolbarBorderColor);
    &.no-border {
        .hairline-remove(top);
    }
    a {
        .flex-shrink(1);
        position: relative;
        white-space: nowrap;
        text-overflow:ellipsis;
        overflow: hidden;
    }
}

// Tabbar
.tabbar {
    color: @tabbarLinksColor;
    z-index: 5001;
    a {
        color: @tabbarLinksColor;
    }
    a.active {
        color: @tabbarActiveLinksColor;
    }
    a.link {
        line-height: 1.4;
    }
    a.tab-link, a.link {
        height: 100%;
        width: 100%;
        .border-box();
        .flexbox();
        .justify-content(center);
        .align-items(center);
        overflow: visible;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    i.icon {
        height: 30px;
    }
}
.tabbar-labels {
    height: 50px;
    a.tab-link, a.link {
        padding-top: 4px;
        padding-bottom: 4px;
        height: 100%;
        .justify-content(space-between);
        i + span {
            margin: 0;
        }
    }
    span.tabbar-label {
        line-height: 1;
        display: block;
        margin: 0;
        letter-spacing: 0.01em;
        font-size: 10px;
        position: relative;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
@media all and (min-width:768px) {
    .tabbar {
        .toolbar-inner {
            .justify-content(center);
        }
        a.tab-link, a.link {
            width: auto;
            min-width: 105px;
        }
    }
    .tabbar-labels {
        height: 56px;
        span.tabbar-label {
            font-size: 14px;
        }
    }
}

// Bars animations
@toolbarDuration: 400ms;

.navbar-from-right-to-center {
    .left, .right, .center, .subnavbar, .fading {
        .animation(navbarElementFadeIn @toolbarDuration forwards);
    }
    .sliding {
        opacity: 1;
    }

}
.navbar-from-center-to-right {
    .left, .right, .center, .subnavbar, .fading {
        .animation(navbarElementFadeOut @toolbarDuration forwards);
    }
    .sliding {
        opacity: 0;
    }
    .subnavbar.sliding {
        opacity: 1;
    }
}
@-webkit-keyframes navbarElementFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes navbarElementFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.navbar-from-center-to-left {
    .left, .right, .center, .subnavbar, .fading {
        .animation(navbarElementFadeOut @toolbarDuration forwards);
    }
    .sliding {
        opacity: 0;
    }
    .subnavbar.sliding {
        opacity: 1;
    }
}
.navbar-from-left-to-center {
    .left, .right, .center, .subnavbar, .fading {
        .animation(navbarElementFadeIn @toolbarDuration forwards);
    }
    .sliding {
        opacity: 1;
    }
}
.navbar-on-left {
    .left, .right, .center, .subnavbar, .fading {
        opacity: 0;
    }
    .sliding {
        opacity: 0;
    }
    .subnavbar.sliding {
        .translate3d(-100%,0,0);
    }
}
.navbar-on-right {
    .left, .right, .center, .subnavbar, .fading {
        opacity: 0;
    }
    .sliding {
        opacity: 0;
    }
    .subnavbar.sliding {
        .translate3d(100%,0,0);
    }
}
@-webkit-keyframes navbarElementFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes navbarElementFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.navbar-from-right-to-center, .navbar-from-center-to-right, .navbar-from-center-to-left, .navbar-from-left-to-center {
    .left.sliding .back.link .icon {
        .transition(@toolbarDuration);
    }
    .sliding {
        .transition(@toolbarDuration);
        .animation(none);
    }
}

/* === Toolbars === */
@navbarBg : #f7f7f8;
@navbarBorderColor: #c4c4c4;
@toolbarBg: @navbarBg;
@toolbarBorderColor: @navbarBorderColor;
@navbarLinksColor: @blue;
@tabbarLinksColor: #929292;
@tabbarActiveLinksColor: @blue;

.navbar-inner, .toolbar-inner {
    .full-size();
    padding: 0 8px;
    .border-box();
    .flexbox();
    .justify-content(space-between);
    .align-items(center);
}
.navbar-inner.cached {
    display: none;
}
.navbar, .toolbar {
    height: 44px;
    width: 100%;
    .border-box();
    font-size: 17px;
    position: relative;
    margin: 0;
    z-index: 500;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    b {
        font-weight: 500;
    }
    a.link {
        line-height: 44px;
        height: 44px;
        text-decoration: none;
        position: relative;
        .flexbox();
        .justify-content(flex-start);
        .align-items(center);
        .transition(300ms);
        html:not(.watch-active-state) &:active, &.active-state {
            opacity: 0.3;
            .transition(0ms);
        }
        i+span, i+i, span+i, span+span {
            margin-left: 7px;
        }
    }
    a.icon-only {
        min-width: 44px;
        .flexbox();
        .justify-content(center);
        .align-items(center);
        margin: 0;
    }
    i.icon {
        display: block;
    }
}
.navbar {
    left: 0;
    top: 0;
    background: @navbarBg;
    .hairline(bottom, @navbarBorderColor);
    .center {
        font-size: 17px;
        font-weight: 500;
        text-align: center;
        margin: 0;
        position: relative;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        line-height: 44px;
        .flex-shrink(10);
        .flexbox();
        .align-items(center);
    }
    .left, .right {
        .flex-shrink(0);
        .flexbox();
        .justify-content(flex-start);
        .align-items(center);
        .translate3d(0,0,0);
        a+a {
            margin-left: 15px;
        }
    }
    .left {
        margin-right: 10px;
    }
    .right {
        margin-left: 10px;
    }
    .right:first-child {
        position: absolute;
        right: 8px;
        height: 100%;
    }
}
.subnavbar {
    height: 44px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: -1px;
    background: @navbarBg;
    z-index: 20;
    .border-box();
    padding: 0 8px;
    .flexbox();
    .justify-content(space-between);
    .align-items(center);
    .hairline(bottom, @navbarBorderColor);
    .navbar-on-left &, .navbar-on-right &{
        pointer-events: none;
    }
    .navbar &, .page & {
        position: absolute;
    }
    .page & {
        top: 0;
        margin-top: 0;
    }
    > .buttons-row {
        width: 100%;
    }
    .searchbar, &.searchbar {
        position: absolute;
    }
    &.searchbar, .searchbar {
        position: absolute;
    }
    .searchbar {
        left: 0;
        top: 0;
    }
}
.toolbar {
    left: 0;
    bottom: 0;
    background: @toolbarBg;
    .hairline(top, @toolbarBorderColor);
    a {
        .flex-shrink(1);
        position: relative;
        white-space: nowrap;
        text-overflow:ellipsis;
        overflow: hidden;
    }
}

// Tabbar
.tabbar {
    color: @tabbarLinksColor;
    z-index: 5001;
    a {
        color: @tabbarLinksColor;
    }
    a.active {
        color: @tabbarActiveLinksColor;
    }
    a.link {
        line-height: 1.4;
    }
    a.tab-link, a.link {
        height: 100%;
        width: 100%;
        .border-box();
        .flexbox();
        .justify-content(center);
        .align-items(center);
        overflow: visible;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    i.icon {
        height: 30px;
    }
}
.tabbar-labels {
    height: 50px;
    a.tab-link, a.link {
        padding-top: 4px;
        padding-bottom: 4px;
        height: 100%;
        .justify-content(space-between);
        i + span {
            margin: 0;
        }
    }
    span.tabbar-label {
        line-height: 1;
        display: block;
        margin: 0;
        letter-spacing: 0.01em;
        font-size: 10px;
        position: relative;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
@media all and (min-width:768px) {
    .tabbar {
        .toolbar-inner {
            .justify-content(center);
        }
        a.tab-link, a.link {
            width: auto;
            min-width: 105px;
        }
    }
    .tabbar-labels {
        height: 56px;
        span.tabbar-label {
            font-size: 14px;
        }
    }
}

// Bars animations
@toolbarDuration: 400ms;

.navbar-from-right-to-center {
    .left, .right, .center, .subnavbar, .fading {
        .animation(navbarElementFadeIn @toolbarDuration forwards);
    }
    .sliding {
        opacity: 1;
    }

}
.navbar-from-center-to-right {
    .left, .right, .center, .subnavbar, .fading {
        .animation(navbarElementFadeOut @toolbarDuration forwards);
    }
    .sliding {
        opacity: 0;
    }
    .subnavbar.sliding {
        opacity: 1;
    }
}
@-webkit-keyframes navbarElementFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes navbarElementFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.navbar-from-center-to-left {
    .left, .right, .center, .subnavbar, .fading {
        .animation(navbarElementFadeOut @toolbarDuration forwards);
    }
    .sliding {
        opacity: 0;
    }
    .subnavbar.sliding {
        opacity: 1;
    }
}
.navbar-from-left-to-center {
    .left, .right, .center, .subnavbar, .fading {
        .animation(navbarElementFadeIn @toolbarDuration forwards);
    }
    .sliding {
        opacity: 1;
    }
}
.navbar-on-left {
    .left, .right, .center, .subnavbar, .fading {
        opacity: 0;
    }
    .sliding {
        opacity: 0;
    }
    .subnavbar.sliding {
        .translate3d(-100%,0,0);
    }
}
.navbar-on-right {
    .left, .right, .center, .subnavbar, .fading {
        opacity: 0;
    }
    .sliding {
        opacity: 0;
    }
    .subnavbar.sliding {
        .translate3d(100%,0,0);
    }
}
@-webkit-keyframes navbarElementFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes navbarElementFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.navbar-from-right-to-center, .navbar-from-center-to-right, .navbar-from-center-to-left, .navbar-from-left-to-center {
    .left.sliding .back.link .icon {
        .transition(@toolbarDuration);
    }
    .sliding {
        .transition(@toolbarDuration);
        .animation(none);
    }
}


Add panel cell repeated condensed style

Add panel cell repeated condensed style

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/sonatra/sonatra-theme-gluon.git/'


added base styles and mixins

added base styles and mixins

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


Update and rename theme_material_design/static/src/less to theme_material_design/static/src/less/padding.less

/* ----- GENERIC LAYOUTING HELPERS ---- */
/* Vertical Spacing */
.mt128 {
  margin-top: 128px !important;
}

.mt92 {
  margin-top: 92px !important;
}

.mt64 {
  margin-top: 64px !important;
}

.mt48 {
  margin-top: 48px !important;
}

.mt32 {
  margin-top: 32px !important;
}

.mt24 {
  margin-top: 24px !important;
}

.mt16 {
  margin-top: 16px !important;
}

.mt8 {
  margin-top: 8px !important;
}

.mt4 {
  margin-top: 4px !important;
}

.mt0 {
  margin-top: 0px !important;
}

.mb128 {
  margin-bottom: 128px !important;
}

.mb92 {
  margin-bottom: 92px !important;
}

.mb64 {
  margin-bottom: 64px !important;
}

.mb48 {
  margin-bottom: 48px !important;
}

.mb32 {
  margin-bottom: 32px !important;
}

.mb24 {
  margin-bottom: 24px !important;
}

.mb16 {
  margin-bottom: 16px !important;
}

.mb8 {
  margin-bottom: 8px !important;
}

.mb4 {
  margin-bottom: 4px !important;
}

.mb0 {
  margin-bottom: 0px !important;
}

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


Create inappstore.less

Create inappstore.less

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


User menu mobile dropdown (#1015)

User menu mobile dropdown (#1015)

right-aligned user menu on mobile

also adjust button height so that dropdown is placed correctly vertically

@import (inline) "../node_modules/openlayers/css/ol.css";
@import "../node_modules/bootstrap/less/bootstrap.less";
@icon-font-path: "bootstrap_fonts/";
@import "simplesearch.less";
@import "diff.less";
@import "sidemenu.less";
@import "feed.less";
@import "scrollbar.less";
@import "floatbuttons.less";
@import "stickyfilters.less";
@import "filters.less";
@import "other-icons.less";
@import "social-icons.less";
@import "waypoint-types.less";
@import "activities.less";
@import "viewdetails.less";
@import "profile.less";
@import "documentedit.less";
@import "creativecommons.less";
@import "helpers.less";
@import "images.less";
@import "map.less";
@import "404.less";
@import "homepage.less";
@import "variables.less";

html, body{
  padding: 0;
  margin: 0;
  width: 100%;
  overflow-x: hidden;
  background-color: @body-color;
}

.modal-dialog {
  margin-top: 30vh;

  h3 {
    margin-bottom: 0;
  }
}

.documents-nav-buttons {
  display: inline-block;
  width: 100%;
  padding: 10px 2% 0 2%;

  button[protected-url-btn] {
    padding: 0 5px;
    font-size: 20px;
    float: left;
    height: 34px;
    span {
      top: 3px;
      font-size: 20px;
      width: 100%;
    }
  }
}
.add-waypoint, .add-route {
  margin: 1% 0 1% 0;
}

.page-main-title {
  color: white;
  height: @page-main-title-height;
  position: absolute;
  .calc(width, "100% - @{menu-width}");
  z-index: 31;
  text-align: center;
  padding-top: 2px;
  background-color: rgb(152, 181, 205);

  @media @tablet {
    .calc(width, "100% - @{menu-width-tablet}");
  }
  @media @phone {
    padding: 0;
    width: 100%;
    height: 35px;
    button {
      display: none;
    }
    h3 {
      margin: 0;
      padding: 1%;
    }
  }
  /*the filters button shown on mobile*/
  button {
    display: none;
    height: 24px;
    padding: 0 10px;
  }

  .badge {
    background-color: @C2C-orange;
  }
}

h1 {
  font-size: 3em;
}

#missing-langs, #other-langs {
  a {
    text-decoration: none;
  }
  .modal-header {
    margin-bottom: 1%;
  }
  .glyphicon {
    color: @C2C-orange;
    float: right;
    transition: 0.1s;
  }

  ul {
    flex-flow: wrap row;
    flex-direction: column;
    align-items: stretch;
    .flex();
    list-style: none;
    font-size: 1.2em;
    width: 16%;
    margin: auto;
    text-align: center;
    @media @phone {
      width: 38%;
    }
    @media @tablet {
      width: 25%;
    }
    li {
      color: #337ab7;
      cursor: pointer;
      height: 30px;
      transition: 0.1s;

      &:hover {
        font-size: 1.02em;

        .glyphicon {
          transition: 0.1s;
        }
      }

    }
  }
}

main {
  #missing-langs, #other-langs {
    display: none;
  }
}

.nav-tabs {
  display: none;
  text-align: center;
  @media @phone {
    display: block;
  }
  >li {
    display: inline-table;
    float: none;
  }

}
.thumbnail {
  padding: 0;
  margin-bottom: 10px;
}

.scroll-top-btn {
  border-radius: 50%;
  height: 40px;
  width: 40px;

  @media @phone {
    display: none;
  }
  .glyphicon {
    margin-left: -3px;
    margin-top: 3px;
  }
}

.glyphicon {
  color: @C2C-orange;
}

.translate-lang, .view-other-lang {
  .caret {
    color : #F6911A;
  }
}

.translate-lang {
  display: inline-block;
  margin-bottom: 10px;

  .dropdown-menu {
    padding: 0;

    li {
      cursor: pointer;
    }
  }
}
/*articles and areas have no .toggle-map*/
app-pagination.areas, app-pagination.articles app-pagination.books {
  @media @phone {
    #pagination {
      width: 100%;
    }
  }
}
#pagination {
  color: lightslategrey;
  float: right;

  @media @phone {
    position: fixed;
    align-items: baseline;
    .flex();
    justify-content: space-around;
    bottom: 0;
    z-index: 5;
    width: calc(~"100% - 50px"); /* 50px = .toggle-map btn width*/
    height: 45px;
    padding: 5px;
    left: 0;
    background-color: @lightgrey;

    ul {
      .flex();
      justify-content: space-between;
      width: 100%;
      height: 100%;
    }
    .page-numbers  {
      width: 110px;
      display: block !important;
    }
  }

  .page-numbers {
    @media (max-width: @screen-sm-min){
      display: none;
    }
  }

  ul {
    display:inline-block;
    margin-bottom: 0;
    padding-left: 5px;
    width: 152px;

    li {
      display:inline-block;
      a {
        border-radius: 50%;
        width: 33px;
        height: 33px;
        background-color: @bright-green;
      }
      .glyphicon {
        top: 0;
        margin-left: -5px;
      }
      a,  .glyphicon {
        color:white;
      }
    }
  }
}

.toggle-map {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  background-color: @lightgrey;
  height: 45px;
  padding-top: 3px;
  button {
    float: right;
    margin-right: 10px;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.3em;
    padding-left: 9px;
    padding-top: 8px;
  }
  @media @phone {
    display: block;
  }
}

.help-block {
  position: absolute;
  margin-top: -5px;
  margin-bottom: 0;

  p {
    display: none;
    font-size: 1em;
    color: white !important;
  }
}

.list {
  width:100%;
  padding: 1% 2% 2% 2%;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;

  @media @tablet {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
  @media (max-width: @screen-sm-min) {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    padding-bottom: 50px;
  }
  .list-item {
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    -o-column-break-inside:avoid;
    -ms-column-break-inside:avoid;
    column-break-inside:avoid;
  }
  & + .no-results {
    display: none;
  }
}

.list-item {
  position: relative;
  cursor: pointer;
  background-color: white;
  margin-top: 10px;
  outline: none;
  border-radius: 7px;
  min-height: 80px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  transition: .2s ease-in-out;
  border: 2px solid rgba(88, 150, 165, 0.2);

  &:active {
    -webkit-box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    -moz-box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    -webkit-transition: .2s ease-in-out;
    transition: 0.2s ease-in-out;
    outline: none;
  }
  &:hover, &.highlight {
    background-color: #EFEFEF;
    transition: 0.1s ease-in-out;
  }
  @media @tablet {
    border-width: 1px;
  }
  @media @phone {
    border-width: 1px;
    font-size: 1.2em;
  }

  .list-item-title {
    font-weight: bold;
    color: graytext;
    line-height: 5px;

    @media @tablet {
      font-size: 1em;
    }
  }

  .list-item-info {
    margin: auto;
    width: 100%;
    text-decoration: none;
    color: #919191;
    font-weight: normal;

    .quality, .orientations {
      white-space: nowrap;
      .glyphicon {
        margin-right: 3px;
      }
    }
    .elevation-max, .height-diff, .height-diff-difficulties, .orientations {
      margin-right: 8px;
    }
    .icon-rating {
      font-size: 1.4em;
      margin-left: -2px;
    }
    .rating {
      margin-right: 8px;
    }
    .orientations, .height-diff, .height-diff-difficulties, .elevation-max {
      white-space: nowrap;
      @media (max-width: @phone-max) {
        display: none;
      }
    }
    .global-rating {
      margin-bottom: 5px;
      @media (min-width: @phone-max) {
        display: none;
      }
    }
    .full-rating {
      margin-bottom: 5px;
      margin-top: 5px;
      flex-wrap: wrap;
      .glyphicon {
        font-size: 1.3em;
        margin-left: -3px;
        margin-right: 3px !important;
      }
      .value {
        transition: .2s;
        &:hover {
          color: gold;
        }
      }
      @media (max-width: @phone-max) {
        display: none;
      }
    }
    .glyphicon, [class*="icon-"]:not(.route-activity):not(.waypoint-type) {
      color: @bright-green;
    }
  }/*list-item-info*/

  .waypoint-type {
    font-size: 1.5em;
    color: @C2C-orange;
    margin-right: 5px;
    margin-top: 5px;
  }
  .route-activity {
    font-size: 3em;
    color: @C2C-orange;
    margin-bottom: 10px;
    @media @phone {
      font-size: 2.5em;
    }
  }
  /*list-item.*/
  &.main-waypoint {
    border: 2px solid @bright-green;
  }
  &.images {
    img {
      width: 100%;
    }
  }
  &.outings {
    min-height: 80px;
    .quality {
      display: block;
    }
    .elevation-max {
      display: block !important;
    }
    a {
      .flex() !important;
      height: 100%;
    }
    .outing-author, .outing-date {
      font-size: 0.9em;
    }
    .list-item-info {
      margin-left: 10px;
    }
    .outing-author {
      width: 33%;
      color: gray;
      margin-top: auto;
      margin-bottom: auto;

      .icon-user {
        font-size: 3em;
      }
    }
    .glyphicon-trash {
      top: 65% !important;
    }
  }
  .set-main-waypoint {
    margin: -10px 0 10px 10px;
  }
  a {
    display: block;
    transition: 0.2s;
    font-weight: normal;
    word-wrap: break-word;
    color: #767676;
    padding: 10px;

    .list-item-lang {
      opacity: 0.9;
      color: graytext;
      font-weight: normal;
    }

    &:hover {
      text-decoration: none;
    }

    &:hover .list-item-title {
      color: teal;
      transition: 0.1s ease-in-out;
    }
    &:focus {
      text-decoration: none;
      outline: none;
    }
    @media @phone {
      font-size: .8em;
    }
  } /*list-item a*/
  &.highlight a .list-item-title {
    color: teal;
    transition: 0.1s ease-in-out;
  }
} /* list-item*/

.line-separator{
  height:1px;
  background:#717171;
  border-bottom:1px solid @lightgrey;
  opacity: 0.9;
  margin: 3% 0 3% 0;
}

.map-right {
  float: left;
  position: relative;
  width: 40%;

  @media @phone {
    margin-left: 0;
    bottom: 40px;
    position: fixed;
    opacity: 0;
    pointer-events: none;
    width: 100%;
  }
  .map {
    @media @phone {
      -webkit-box-shadow: 0 0 36px -10px rgba(0,0,0,0.56);
      -moz-box-shadow: 0 0 36px -10px rgba(0,0,0,0.56);
      box-shadow: 0 0 36px -10px rgba(0,0,0,0.56);
      height: 250px;
      margin-top: 0;
      height: 80vh !important;
    }
    @media screen and (max-height: 330px) {
      height: 73vh !important;
    }
  }
}

.documents-list-section-container {
  position: relative;
  &.no-map .documents-list-section, &.no-map .page-main-title {
    width: 100%;
  }
}
.documents-list-section, .not-found-section, .map-right .map {
  margin-top: @page-main-title-height;
  .calc(height, "100vh - @{page-header-height} - @{page-main-title-height}");
}

.documents-list-section, .not-found-section {
  float: left;
  background-color: @lightgrey;
  position: relative;
  width: @list-width;
  overflow: auto;

  @media @phone {
    width: 100%;
    float:none;
    padding-top: 35px;
    .calc(height, "100vh - 92px");
  }
  .show-documents-filters-phone {
    display: none;
    height: 33px;
    margin-right: 5px;
    float: right;

    @media @phone {
      display: block;
    }
  }
}

.search-icon {
  font-size: 1.8em;
  margin-right: 8px;
  margin-top: 5px;

  @media @phone {
    cursor: pointer;
    /*hover triggers the search input to appear in simplesearch.js*/
  }
}

.login-text {

  margin-bottom: 0;
  @media @phone {
    display: none;
  }
}

app-user{
  text-align: center;

  .dropdown-toggle {
    min-height: 35px;
    align-items: center;

    @media @phone {
      padding: 1px 7px 0 7px;
    }
  }

  .icon-user, .glyphicon {
    color: white;
  }
  .icon-user {
    font-size: 2em;
  }
  .login-out-button {
    span {
      @media @phone {
        display: none;
      }
    }
  }
  .caret {
    @media @phone {
      display: none;
    }
  }
}
.user-info {
  @media @phone {
    display: none;
  }
}

.search {
  background-color: #FBFBFB !important;
  width : 380px;
  height: 35px;
  border-radius: 0 5px 5px 0;
  border: none;
  -webkit-transition: width .5s ease;
  -moz-transition: width .5s ease;
  transition: width .5s ease;

  @media @tablet {
    width: 150px;
  }
  @media @phone {
    border: 1px solid bisque;
  }
}

.lang-selector {
  .flex();
  width:100%;
  align-items: center;
  color: graytext;

  @media @phone {
    width: 46px;
  }
  > label {
    @media (max-width: 800px){
      display: none;
    }
  }
}

app-lang{
  margin-left: 10px;
  font-size: 1.2em;

  @media @phone {
    width: 105px;
    margin-left: 0;
  }
  .selected-lang {
    text-transform: uppercase;
    color: #676767;
  }
  .dropdown-toggle {
    padding: 6px 8px;
    @media @phone {
      padding: 6px 6px;
    }
  }
  .dropdown-menu {
    min-width: 91px;
    cursor: pointer;
  }
}

app-simple-search {
  .flex();
  border-radius: 6px;
  padding-left: 10px;
  margin-right: 10px;
  background: @C2C-orange;

  .glyphicon {
    color: #F9F9F9;
  }

  @media @phone {
    width: 40px;
    padding-left: 6px;
  }
}

.page-header {
  .flex();
  background-color: @body-color;
  position: absolute;
  width: 100%;
  border-bottom: 2px solid @C2C-orange !important;
  justify-content: flex-end;
  margin-top: 0;
  top: 0;
  margin-bottom: 0;
  border: 0;
  padding-bottom: 6px;
  padding-top: 5px;
  z-index: 33;

  @media @phone {
    position: fixed;
  }

  label {
    margin-bottom: 0;
  }

  #add-my-outing {
    margin-left: 10px;
    @media (max-width: 650px) {
      display: none;
    }
  }

  .show-search {
    position: absolute !important;
    left: 5px !important;
    z-index: 2;
    width: 100% !important;
    padding: 0 !important;
    transition: 0.3s ease-in-out;
  }

  .quick-search {
    rigth: 0;
    position: relative;
    transition: 0.3s ease-in-out;

    input {
      @media @phone {
        visibility: hidden;
        width: 0;
      }
    }
  }

  .search {
    -webkit-transition: width .5s ease;
    -moz-transition: width .5s ease;
    transition: width .5s ease;
    padding: 5px;
    &:focus, &:hover {
      width: 420px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      outline: none;
      border: 1px solid bisque;
      @media @tablet {
        width: 150px;
      }
      @media @phone {
        .calc(width, "100vw - 45px");
      }
    }
    @media @phone {
      width: 0;
      margin-left: -3px;
    }
  }
  .lang-user {
    .flex();
    font-weight: bold;
    margin-left: 10px;
    margin-right: 10px;
  }

  #user-menu {
    .icon-user {
      display: none;

      @media @phone {
        display: block;
      }
    }
    .caret {
      @media @phone {
        display:none;
      }
    }
    .user-info {
      @media @phone {
        display: none;
      }
    }
    a.logout {
      cursor: pointer;
    }
    @media @phone {
      .dropdown-menu { /* right-aligned user menu on mobile */
        left: auto;
        right: 0;
      }
    }
  }
}/* page-header */

.logo.header {
  position: relative;
  display: none;
  margin-left: 60px;
  margin-bottom: 6px;
  z-index: 34;
  width: 80px;

  @media (max-width: 1099px){
    display: block;
    top: 4px;
  }
  @media (max-width: @phone-max) {
    position: fixed;
  }
  img {
    height: 39px;
  }
}

.page-content {
  margin-top: @page-header-height;
  margin-left: @menu-width;

  @media @tablet {
    margin-left: @menu-width-tablet;
    margin-top:  9px;
  }
  @media @phone {
    margin-left: 0;
    margin-top: @page-header-height;
  }

  .archive-data {
    margin: 5px;
    padding: 5px;
    border: 1px solid red;
    background-color: rgba(255, 0, 0, 0.2);
  }

  .versions-list {
    border: 1px solid black;
    margin-bottom: 10px;
    border-collapse: collapse;

    th {
      padding: 5px;
      border: 1px solid black;
    }

    td {
      padding: 5px;
      border: 1px solid black;

      .hide-radio {
        visibility: hidden;
      }
    }
  }
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

app-alerts {
  position: fixed;
  top: 30vh;
  left: 45vw;
  z-index: 9999;
  @media @phone {
    left: 5vw;
    width: 90%;
  }

  ul {
    list-style: none;
  }
  app-alert {
    text-align: left;
    -webkit-animation: fadein .3s;
    -moz-animation: fadein .3s;
    -ms-animation: fadein .3s;
    -o-animation: fadein .3s;
    animation: fadein .3s;
  }
  .alert {
    display: block !important;
    font-size: 1.2em;
    border: 1px solid #ccc !important;
  }
  .alert-text {
    display: inline;
  }
}

.auth-form, .preferences, .mailinglists {
  padding: 0 10% 0 10%;
  margin-top: 100px;
  margin-bottom: 20px;

  section {
    background-color: white;
    padding: 1% 5% 6% 5%;
    border: 1px solid #eee;
    border-radius: 5px;
  }

  @media @phone {
    margin-top: 70px;
    padding: 0 3% 0 3%;
  }
}

.archive-data {
  div {
    display: table;
    margin: auto;
  }
  h2, .glyphicon {
    color: @brand-danger;
    @media @phone {
      font-size: 1.4em;
    }
  }
  p {
    font-size: 1.3em;
    color: white;
    @media @phone {
      font-size: 1.1em;
    }
  }

  h2 {
    text-align: center;
    padding: 1%;
  }
  button a {
    text-decoration: none;
  }
}

.hidden-options {
  margin-bottom: 2%;
  padding: 0;
}

.document-history, .document-differences {
  padding: 5%;
  @media @tablet {
    padding-top: 7%;
  }
}

.versions-list {
  background-color: #EBEBEB;

  tr:first-of-type {
    background-color: #337AB7 !important;
    color: white;
  }
  td {
    .hide-radio {
      display: none;
    }
  }
}

button:focus {
  outline: none !important;
}

.form-control {
  border-radius: 2px;
}

.orange-btn, .gray-btn, .green-btn, .blue-btn {
  color: white;
  font-weight: bold;
  font-variant: small-caps;
  &:hover {
    color: white;
  }
  &:focus {
    color: white;
  }
  .glyphicon {
    color: white;
    margin-right: 5px;
  }
  a {
    color: white;
    &:hover {
      text-decoration: none;
    }
  }
  transition: 0.1s;
}
.orange-btn {
  background-color: @C2C-orange;
  &:hover {
    background-color: #FF9416;
    transition: 0.1s;
  }
}

.gray-btn {
  background-color: graytext;
  &:hover {
    background-color: #B89191;
    transition: 0.1s;
  }
}

.blue-btn {
  background-color: @brand-primary;
  &:hover {
    background-color: #286090;
    transition: 0.1s;
  }
}

.green-btn {
  background-color: @bright-green;
  &:hover {
    background-color: #4C9B5D;
    transition: 0.1s;
  }
}

.dropdown-toggle {
  font-variant: small-caps;
}

ul {
  padding-left: 15px;
}

.value, .value-title {
  font-weight: bold;
}
.value-title {
  color: darkslategray;
}
.value {
  color: darkgray;
  &.space {
    margin-left: 4px;
  }
}

.select-document {
  width: 170px;
  margin-right: 10px;
  float: left;
}

.section.associations, .view-details-section {
  .list-item {
    margin-right: .5%;
    margin-left: .5%;
    width: 49%;

    @media @big {
      width: 32%;
    }
    @media @phone {
      width: 100%;
    }
  }
  app-add-association, .associated-section {
    width: 100%;
    margin-top: 10px;
  }
  .associated-documents {
    max-height: 600px;
    overflow-y: auto;
    width: 100%;
    .flex();
    flex-wrap: wrap;

    app-delete-association {
      font-size: 15px;

      @media @phone {
        font-size: 14px;
      }
      .glyphicon {
        color: red;
      }
      button {
        padding: 5px;
      }
    }
  }
}

.glyphicon-trash:not(app-delete-association) {
  position: absolute;
  color: red;
  font-size: 1.3em;
  right: 10px;
  top: calc(~"100% - 30px");
}

#route-activities, #outing-activities, #image-activities {
  .route-activities {
    .flex();
    flex-flow: wrap;
    justify-content: center;
  }
}

.create-edit-document, .preferences {
  .section {
    .route-activities {
      @media @phone {
        justify-content: space-between;
      }
      .activity {
        width: 20%;
        text-align: center;
        cursor: pointer;
        @media (max-width: @screen-md-min) {
          width: 33%;
        }
      }
      [class^="icon-"] {
        font-size: 8em;
        @media @big {
          font-size: 9em;
        }
        @media (max-width: @screen-sm-min) {
          font-size: 6em;
        }
        @media (max-width: @screen-sm-max) {
          font-size: 7em;
        }
        @media @phone {
          font-size: 5em;
        }
      }
    }
  }
}

.preferences, .mailinglists {
  h3 {
    margin: 15px 0;
  }
}

.preferences {
  .followed-only {
    margin-top: 15px;
    span {
      font-size: 1em;
      font-weight: normal;
    }
  }
  .preferences-activities .route-activity {
    font-size: 5em;
    margin-bottom: 10px;
    @media @big {
      font-size: 7em;
    }
  }
  .preferences-activities, .preferences-areas {
    border-top: 1px solid rgba(221, 221, 221, 0.5);
    margin-top: 30px;
  }
  .areas .list-item {
    flex-basis: 33%;
    margin-right: 10px;
  }
  app-simple-search {
    width: 50%;
    margin-bottom: 10px;

    .search {
      width: 100% !important;
    }
  }
  @media @phone {
    app-simple-search {
      width: 100%;
    }
    .list-item {
      flex-basis: 100% !important;
    }
    .route-activity {
      font-size: 4em;
    }
  }
}

@import (inline) "../node_modules/openlayers/css/ol.css";
@import "../node_modules/bootstrap/less/bootstrap.less";
@icon-font-path: "bootstrap_fonts/";
@import "simplesearch.less";
@import "diff.less";
@import "sidemenu.less";
@import "feed.less";
@import "scrollbar.less";
@import "floatbuttons.less";
@import "stickyfilters.less";
@import "filters.less";
@import "other-icons.less";
@import "social-icons.less";
@import "waypoint-types.less";
@import "activities.less";
@import "viewdetails.less";
@import "profile.less";
@import "documentedit.less";
@import "creativecommons.less";
@import "helpers.less";
@import "images.less";
@import "map.less";
@import "404.less";
@import "homepage.less";
@import "variables.less";

html, body{
  padding: 0;
  margin: 0;
  width: 100%;
  overflow-x: hidden;
  background-color: @body-color;
}

.modal-dialog {
  margin-top: 30vh;

  h3 {
    margin-bottom: 0;
  }
}

.documents-nav-buttons {
  display: inline-block;
  width: 100%;
  padding: 10px 2% 0 2%;

  button[protected-url-btn] {
    padding: 0 5px;
    font-size: 20px;
    float: left;
    height: 34px;
    span {
      top: 3px;
      font-size: 20px;
      width: 100%;
    }
  }
}
.add-waypoint, .add-route {
  margin: 1% 0 1% 0;
}

.page-main-title {
  color: white;
  height: @page-main-title-height;
  position: absolute;
  .calc(width, "100% - @{menu-width}");
  z-index: 31;
  text-align: center;
  padding-top: 2px;
  background-color: rgb(152, 181, 205);

  @media @tablet {
    .calc(width, "100% - @{menu-width-tablet}");
  }
  @media @phone {
    padding: 0;
    width: 100%;
    height: 35px;
    button {
      display: none;
    }
    h3 {
      margin: 0;
      padding: 1%;
    }
  }
  /*the filters button shown on mobile*/
  button {
    display: none;
    height: 24px;
    padding: 0 10px;
  }

  .badge {
    background-color: @C2C-orange;
  }
}

h1 {
  font-size: 3em;
}

#missing-langs, #other-langs {
  a {
    text-decoration: none;
  }
  .modal-header {
    margin-bottom: 1%;
  }
  .glyphicon {
    color: @C2C-orange;
    float: right;
    transition: 0.1s;
  }

  ul {
    flex-flow: wrap row;
    flex-direction: column;
    align-items: stretch;
    .flex();
    list-style: none;
    font-size: 1.2em;
    width: 16%;
    margin: auto;
    text-align: center;
    @media @phone {
      width: 38%;
    }
    @media @tablet {
      width: 25%;
    }
    li {
      color: #337ab7;
      cursor: pointer;
      height: 30px;
      transition: 0.1s;

      &:hover {
        font-size: 1.02em;

        .glyphicon {
          transition: 0.1s;
        }
      }

    }
  }
}

main {
  #missing-langs, #other-langs {
    display: none;
  }
}

.nav-tabs {
  display: none;
  text-align: center;
  @media @phone {
    display: block;
  }
  >li {
    display: inline-table;
    float: none;
  }

}
.thumbnail {
  padding: 0;
  margin-bottom: 10px;
}

.scroll-top-btn {
  border-radius: 50%;
  height: 40px;
  width: 40px;

  @media @phone {
    display: none;
  }
  .glyphicon {
    margin-left: -3px;
    margin-top: 3px;
  }
}

.glyphicon {
  color: @C2C-orange;
}

.translate-lang, .view-other-lang {
  .caret {
    color : #F6911A;
  }
}

.translate-lang {
  display: inline-block;
  margin-bottom: 10px;

  .dropdown-menu {
    padding: 0;

    li {
      cursor: pointer;
    }
  }
}
/*articles and areas have no .toggle-map*/
app-pagination.areas, app-pagination.articles app-pagination.books {
  @media @phone {
    #pagination {
      width: 100%;
    }
  }
}
#pagination {
  color: lightslategrey;
  float: right;

  @media @phone {
    position: fixed;
    align-items: baseline;
    .flex();
    justify-content: space-around;
    bottom: 0;
    z-index: 5;
    width: calc(~"100% - 50px"); /* 50px = .toggle-map btn width*/
    height: 45px;
    padding: 5px;
    left: 0;
    background-color: @lightgrey;

    ul {
      .flex();
      justify-content: space-between;
      width: 100%;
      height: 100%;
    }
    .page-numbers  {
      width: 110px;
      display: block !important;
    }
  }

  .page-numbers {
    @media (max-width: @screen-sm-min){
      display: none;
    }
  }

  ul {
    display:inline-block;
    margin-bottom: 0;
    padding-left: 5px;
    width: 152px;

    li {
      display:inline-block;
      a {
        border-radius: 50%;
        width: 33px;
        height: 33px;
        background-color: @bright-green;
      }
      .glyphicon {
        top: 0;
        margin-left: -5px;
      }
      a,  .glyphicon {
        color:white;
      }
    }
  }
}

.toggle-map {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  background-color: @lightgrey;
  height: 45px;
  padding-top: 3px;
  button {
    float: right;
    margin-right: 10px;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.3em;
    padding-left: 9px;
    padding-top: 8px;
  }
  @media @phone {
    display: block;
  }
}

.help-block {
  position: absolute;
  margin-top: -5px;
  margin-bottom: 0;

  p {
    display: none;
    font-size: 1em;
    color: white !important;
  }
}

.list {
  width:100%;
  padding: 1% 2% 2% 2%;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;

  @media @tablet {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
  @media (max-width: @screen-sm-min) {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    padding-bottom: 50px;
  }
  .list-item {
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    -o-column-break-inside:avoid;
    -ms-column-break-inside:avoid;
    column-break-inside:avoid;
  }
  & + .no-results {
    display: none;
  }
}

.list-item {
  position: relative;
  cursor: pointer;
  background-color: white;
  margin-top: 10px;
  outline: none;
  border-radius: 7px;
  min-height: 80px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  transition: .2s ease-in-out;
  border: 2px solid rgba(88, 150, 165, 0.2);

  &:active {
    -webkit-box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    -moz-box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    -webkit-transition: .2s ease-in-out;
    transition: 0.2s ease-in-out;
    outline: none;
  }
  &:hover, &.highlight {
    background-color: #EFEFEF;
    transition: 0.1s ease-in-out;
  }
  @media @tablet {
    border-width: 1px;
  }
  @media @phone {
    border-width: 1px;
    font-size: 1.2em;
  }

  .list-item-title {
    font-weight: bold;
    color: graytext;
    line-height: 5px;

    @media @tablet {
      font-size: 1em;
    }
  }

  .list-item-info {
    margin: auto;
    width: 100%;
    text-decoration: none;
    color: #919191;
    font-weight: normal;

    .quality, .orientations {
      white-space: nowrap;
      .glyphicon {
        margin-right: 3px;
      }
    }
    .elevation-max, .height-diff, .height-diff-difficulties, .orientations {
      margin-right: 8px;
    }
    .icon-rating {
      font-size: 1.4em;
      margin-left: -2px;
    }
    .rating {
      margin-right: 8px;
    }
    .orientations, .height-diff, .height-diff-difficulties, .elevation-max {
      white-space: nowrap;
      @media (max-width: @phone-max) {
        display: none;
      }
    }
    .global-rating {
      margin-bottom: 5px;
      @media (min-width: @phone-max) {
        display: none;
      }
    }
    .full-rating {
      margin-bottom: 5px;
      margin-top: 5px;
      flex-wrap: wrap;
      .glyphicon {
        font-size: 1.3em;
        margin-left: -3px;
        margin-right: 3px !important;
      }
      .value {
        transition: .2s;
        &:hover {
          color: gold;
        }
      }
      @media (max-width: @phone-max) {
        display: none;
      }
    }
    .glyphicon, [class*="icon-"]:not(.route-activity):not(.waypoint-type) {
      color: @bright-green;
    }
  }/*list-item-info*/

  .waypoint-type {
    font-size: 1.5em;
    color: @C2C-orange;
    margin-right: 5px;
    margin-top: 5px;
  }
  .route-activity {
    font-size: 3em;
    color: @C2C-orange;
    margin-bottom: 10px;
    @media @phone {
      font-size: 2.5em;
    }
  }
  /*list-item.*/
  &.main-waypoint {
    border: 2px solid @bright-green;
  }
  &.images {
    img {
      width: 100%;
    }
  }
  &.outings {
    min-height: 80px;
    .quality {
      display: block;
    }
    .elevation-max {
      display: block !important;
    }
    a {
      .flex() !important;
      height: 100%;
    }
    .outing-author, .outing-date {
      font-size: 0.9em;
    }
    .list-item-info {
      margin-left: 10px;
    }
    .outing-author {
      width: 33%;
      color: gray;
      margin-top: auto;
      margin-bottom: auto;

      .icon-user {
        font-size: 3em;
      }
    }
    .glyphicon-trash {
      top: 65% !important;
    }
  }
  .set-main-waypoint {
    margin: -10px 0 10px 10px;
  }
  a {
    display: block;
    transition: 0.2s;
    font-weight: normal;
    word-wrap: break-word;
    color: #767676;
    padding: 10px;

    .list-item-lang {
      opacity: 0.9;
      color: graytext;
      font-weight: normal;
    }

    &:hover {
      text-decoration: none;
    }

    &:hover .list-item-title {
      color: teal;
      transition: 0.1s ease-in-out;
    }
    &:focus {
      text-decoration: none;
      outline: none;
    }
    @media @phone {
      font-size: .8em;
    }
  } /*list-item a*/
  &.highlight a .list-item-title {
    color: teal;
    transition: 0.1s ease-in-out;
  }
} /* list-item*/

.line-separator{
  height:1px;
  background:#717171;
  border-bottom:1px solid @lightgrey;
  opacity: 0.9;
  margin: 3% 0 3% 0;
}

.map-right {
  float: left;
  position: relative;
  width: 40%;

  @media @phone {
    margin-left: 0;
    bottom: 40px;
    position: fixed;
    opacity: 0;
    pointer-events: none;
    width: 100%;
  }
  .map {
    @media @phone {
      -webkit-box-shadow: 0 0 36px -10px rgba(0,0,0,0.56);
      -moz-box-shadow: 0 0 36px -10px rgba(0,0,0,0.56);
      box-shadow: 0 0 36px -10px rgba(0,0,0,0.56);
      height: 250px;
      margin-top: 0;
      height: 80vh !important;
    }
    @media screen and (max-height: 330px) {
      height: 73vh !important;
    }
  }
}

.documents-list-section-container {
  position: relative;
  &.no-map .documents-list-section, &.no-map .page-main-title {
    width: 100%;
  }
}
.documents-list-section, .not-found-section, .map-right .map {
  margin-top: @page-main-title-height;
  .calc(height, "100vh - @{page-header-height} - @{page-main-title-height}");
}

.documents-list-section, .not-found-section {
  float: left;
  background-color: @lightgrey;
  position: relative;
  width: @list-width;
  overflow: auto;

  @media @phone {
    width: 100%;
    float:none;
    padding-top: 35px;
    .calc(height, "100vh - 92px");
  }
  .show-documents-filters-phone {
    display: none;
    height: 33px;
    margin-right: 5px;
    float: right;

    @media @phone {
      display: block;
    }
  }
}

.search-icon {
  font-size: 1.8em;
  margin-right: 8px;
  margin-top: 5px;

  @media @phone {
    cursor: pointer;
    /*hover triggers the search input to appear in simplesearch.js*/
  }
}

.login-text {

  margin-bottom: 0;
  @media @phone {
    display: none;
  }
}

app-user{
  text-align: center;

  .dropdown-toggle {
    min-height: 35px;
    align-items: center;

    @media @phone {
      padding: 1px 7px 0 7px;
    }
  }

  .icon-user, .glyphicon {
    color: white;
  }
  .icon-user {
    font-size: 2em;
  }
  .login-out-button {
    span {
      @media @phone {
        display: none;
      }
    }
  }
  .caret {
    @media @phone {
      display: none;
    }
  }
}
.user-info {
  @media @phone {
    display: none;
  }
}

.search {
  background-color: #FBFBFB !important;
  width : 380px;
  height: 35px;
  border-radius: 0 5px 5px 0;
  border: none;
  -webkit-transition: width .5s ease;
  -moz-transition: width .5s ease;
  transition: width .5s ease;

  @media @tablet {
    width: 150px;
  }
  @media @phone {
    border: 1px solid bisque;
  }
}

.lang-selector {
  .flex();
  width:100%;
  align-items: center;
  color: graytext;

  @media @phone {
    width: 46px;
  }
  > label {
    @media (max-width: 800px){
      display: none;
    }
  }
}

app-lang{
  margin-left: 10px;
  font-size: 1.2em;

  @media @phone {
    width: 105px;
    margin-left: 0;
  }
  .selected-lang {
    text-transform: uppercase;
    color: #676767;
  }
  .dropdown-toggle {
    padding: 6px 8px;
    @media @phone {
      padding: 6px 6px;
    }
  }
  .dropdown-menu {
    min-width: 91px;
    cursor: pointer;
  }
}

app-simple-search {
  .flex();
  border-radius: 6px;
  padding-left: 10px;
  margin-right: 10px;
  background: @C2C-orange;

  .glyphicon {
    color: #F9F9F9;
  }

  @media @phone {
    width: 40px;
    padding-left: 6px;
  }
}

.page-header {
  .flex();
  background-color: @body-color;
  position: absolute;
  width: 100%;
  border-bottom: 2px solid @C2C-orange !important;
  justify-content: flex-end;
  margin-top: 0;
  top: 0;
  margin-bottom: 0;
  border: 0;
  padding-bottom: 6px;
  padding-top: 5px;
  z-index: 33;

  @media @phone {
    position: fixed;
  }

  label {
    margin-bottom: 0;
  }

  #add-my-outing {
    margin-left: 10px;
    @media (max-width: 650px) {
      display: none;
    }
  }

  .show-search {
    position: absolute !important;
    left: 5px !important;
    z-index: 2;
    width: 100% !important;
    padding: 0 !important;
    transition: 0.3s ease-in-out;
  }

  .quick-search {
    rigth: 0;
    position: relative;
    transition: 0.3s ease-in-out;

    input {
      @media @phone {
        visibility: hidden;
        width: 0;
      }
    }
  }

  .search {
    -webkit-transition: width .5s ease;
    -moz-transition: width .5s ease;
    transition: width .5s ease;
    padding: 5px;
    &:focus, &:hover {
      width: 420px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      outline: none;
      border: 1px solid bisque;
      @media @tablet {
        width: 150px;
      }
      @media @phone {
        .calc(width, "100vw - 45px");
      }
    }
    @media @phone {
      width: 0;
      margin-left: -3px;
    }
  }
  .lang-user {
    .flex();
    font-weight: bold;
    margin-left: 10px;
    margin-right: 10px;
  }

  #user-menu {
    height: 33px;

    .icon-user {
      display: none;

      @media @phone {
        display: block;
      }
    }
    .caret {
      @media @phone {
        display:none;
      }
    }
    .user-info {
      @media @phone {
        display: none;
      }
    }
    a.logout {
      cursor: pointer;
    }
  }
}/* page-header */

.logo.header {
  position: relative;
  display: none;
  margin-left: 60px;
  margin-bottom: 6px;
  z-index: 34;
  width: 80px;

  @media (max-width: 1099px){
    display: block;
    top: 4px;
  }
  @media (max-width: @phone-max) {
    position: fixed;
  }
  img {
    height: 39px;
  }
}

.page-content {
  margin-top: @page-header-height;
  margin-left: @menu-width;

  @media @tablet {
    margin-left: @menu-width-tablet;
    margin-top:  9px;
  }
  @media @phone {
    margin-left: 0;
    margin-top: @page-header-height;
  }

  .archive-data {
    margin: 5px;
    padding: 5px;
    border: 1px solid red;
    background-color: rgba(255, 0, 0, 0.2);
  }

  .versions-list {
    border: 1px solid black;
    margin-bottom: 10px;
    border-collapse: collapse;

    th {
      padding: 5px;
      border: 1px solid black;
    }

    td {
      padding: 5px;
      border: 1px solid black;

      .hide-radio {
        visibility: hidden;
      }
    }
  }
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

app-alerts {
  position: fixed;
  top: 30vh;
  left: 45vw;
  z-index: 9999;
  @media @phone {
    left: 5vw;
    width: 90%;
  }

  ul {
    list-style: none;
  }
  app-alert {
    text-align: left;
    -webkit-animation: fadein .3s;
    -moz-animation: fadein .3s;
    -ms-animation: fadein .3s;
    -o-animation: fadein .3s;
    animation: fadein .3s;
  }
  .alert {
    display: block !important;
    font-size: 1.2em;
    border: 1px solid #ccc !important;
  }
  .alert-text {
    display: inline;
  }
}

.auth-form, .preferences, .mailinglists {
  padding: 0 10% 0 10%;
  margin-top: 100px;
  margin-bottom: 20px;

  section {
    background-color: white;
    padding: 1% 5% 6% 5%;
    border: 1px solid #eee;
    border-radius: 5px;
  }

  @media @phone {
    margin-top: 70px;
    padding: 0 3% 0 3%;
  }
}

.archive-data {
  div {
    display: table;
    margin: auto;
  }
  h2, .glyphicon {
    color: @brand-danger;
    @media @phone {
      font-size: 1.4em;
    }
  }
  p {
    font-size: 1.3em;
    color: white;
    @media @phone {
      font-size: 1.1em;
    }
  }

  h2 {
    text-align: center;
    padding: 1%;
  }
  button a {
    text-decoration: none;
  }
}

.hidden-options {
  margin-bottom: 2%;
  padding: 0;
}

.document-history, .document-differences {
  padding: 5%;
  @media @tablet {
    padding-top: 7%;
  }
}

.versions-list {
  background-color: #EBEBEB;

  tr:first-of-type {
    background-color: #337AB7 !important;
    color: white;
  }
  td {
    .hide-radio {
      display: none;
    }
  }
}

button:focus {
  outline: none !important;
}

.form-control {
  border-radius: 2px;
}

.orange-btn, .gray-btn, .green-btn, .blue-btn {
  color: white;
  font-weight: bold;
  font-variant: small-caps;
  &:hover {
    color: white;
  }
  &:focus {
    color: white;
  }
  .glyphicon {
    color: white;
    margin-right: 5px;
  }
  a {
    color: white;
    &:hover {
      text-decoration: none;
    }
  }
  transition: 0.1s;
}
.orange-btn {
  background-color: @C2C-orange;
  &:hover {
    background-color: #FF9416;
    transition: 0.1s;
  }
}

.gray-btn {
  background-color: graytext;
  &:hover {
    background-color: #B89191;
    transition: 0.1s;
  }
}

.blue-btn {
  background-color: @brand-primary;
  &:hover {
    background-color: #286090;
    transition: 0.1s;
  }
}

.green-btn {
  background-color: @bright-green;
  &:hover {
    background-color: #4C9B5D;
    transition: 0.1s;
  }
}

.dropdown-toggle {
  font-variant: small-caps;
}

ul {
  padding-left: 15px;
}

.value, .value-title {
  font-weight: bold;
}
.value-title {
  color: darkslategray;
}
.value {
  color: darkgray;
  &.space {
    margin-left: 4px;
  }
}

.select-document {
  width: 170px;
  margin-right: 10px;
  float: left;
}

.section.associations, .view-details-section {
  .list-item {
    margin-right: .5%;
    margin-left: .5%;
    width: 49%;

    @media @big {
      width: 32%;
    }
    @media @phone {
      width: 100%;
    }
  }
  app-add-association, .associated-section {
    width: 100%;
    margin-top: 10px;
  }
  .associated-documents {
    max-height: 600px;
    overflow-y: auto;
    width: 100%;
    .flex();
    flex-wrap: wrap;

    app-delete-association {
      font-size: 15px;

      @media @phone {
        font-size: 14px;
      }
      .glyphicon {
        color: red;
      }
      button {
        padding: 5px;
      }
    }
  }
}

.glyphicon-trash:not(app-delete-association) {
  position: absolute;
  color: red;
  font-size: 1.3em;
  right: 10px;
  top: calc(~"100% - 30px");
}

#route-activities, #outing-activities, #image-activities {
  .route-activities {
    .flex();
    flex-flow: wrap;
    justify-content: center;
  }
}

.create-edit-document, .preferences {
  .section {
    .route-activities {
      @media @phone {
        justify-content: space-between;
      }
      .activity {
        width: 20%;
        text-align: center;
        cursor: pointer;
        @media (max-width: @screen-md-min) {
          width: 33%;
        }
      }
      [class^="icon-"] {
        font-size: 8em;
        @media @big {
          font-size: 9em;
        }
        @media (max-width: @screen-sm-min) {
          font-size: 6em;
        }
        @media (max-width: @screen-sm-max) {
          font-size: 7em;
        }
        @media @phone {
          font-size: 5em;
        }
      }
    }
  }
}

.preferences, .mailinglists {
  h3 {
    margin: 15px 0;
  }
}

.preferences {
  .followed-only {
    margin-top: 15px;
    span {
      font-size: 1em;
      font-weight: normal;
    }
  }
  .preferences-activities .route-activity {
    font-size: 5em;
    margin-bottom: 10px;
    @media @big {
      font-size: 7em;
    }
  }
  .preferences-activities, .preferences-areas {
    border-top: 1px solid rgba(221, 221, 221, 0.5);
    margin-top: 30px;
  }
  .areas .list-item {
    flex-basis: 33%;
    margin-right: 10px;
  }
  app-simple-search {
    width: 50%;
    margin-bottom: 10px;

    .search {
      width: 100% !important;
    }
  }
  @media @phone {
    app-simple-search {
      width: 100%;
    }
    .list-item {
      flex-basis: 100% !important;
    }
    .route-activity {
      font-size: 4em;
    }
  }
}


Modified colors of default and disabled buttons

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/rodrigoargumedo/Bootsharp.git/'


Bugfix: Moved padding under tabs into top of search.

This way BIBL view can have the blue seach top margin even though it does not have tabs.

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/Det-Kongelige-Bibliotek/rex.git/'


Create variables.less

Create variables.less

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


Add ui-sizes less file

Add ui-sizes less file

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


subtitle layout

subtitle layout

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/kobake/ClockUpEvents.git/'


add table

add table

/*表格样式*/
.table th, .table td {
  padding: 15px;
  line-height: 20px;
  vertical-align: top;
  text-align: center;
  font-size: 10px;
  border-top: 1px solid #dddddd;
}

/*单行失效*/
.tr-ovdate{
	color:#A3A0A0;
}

/* 灰色表头 */
#td-grey{
   padding: 8px;
   background: #F0F0F0;
}

/*单格激活*/
.td-org{
   color:#ff8400;
}

error: pathspec 'src/css/dp-table.less' did not match any file(s) known to git


example less to generate a table of contents via ruleset from the structure of the tree itself

fatal: unable to access 'https://github.com/Connexions/cnx-rulesets.git/': The requested URL returned error: 403


router.less update (mess deleted)

router.less update (mess deleted)

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


add several mixins

add several mixins

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/oropesa/alisios.git/'


Update common.less

Update common.less

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


add stylus file

add stylus file

.app {
  background-color: green;
  height: 50px;
  border: 1px solid blue;
}

.bap {
  background-color: red;
  height: 25px;
}

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


Update dropdown width so that Configure Facebook Login fits nicely in one line

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


derp.

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/UnlitStudio/PlazaPlus.git/'


Zoom for archive inside the story

Zoom for archive inside the story

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/GregDesplaces/classe-1914.git/'


Added current line background.

Added current line background.

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/topics-im/topics.git/'


Added overflow-y to offcanvas.

Added overflow-y to offcanvas.


Prevent overflow of planet-content

Prevent overflow of planet-content

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/svijee/theme-default.git/'


Simplify styling

Simplify styling

/**
 *    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/>.
 *
 */
.landing-footer-bottom {
  text-align: center;
  padding: (@spacing * 2) 0;

  color: @grey-f;
  font-size: 12px;
  font-weight: 600;
  font-style: italic;

  &__link {
    color: @grey-f;
    padding: 0 (@spacing / 2);

    &:hover,
    &:focus {
      text-decoration: none;
      color: @pink;
    }
  }
}

/**
 *    Copyright 2015 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/>.
 *
 */

 .landing-footer-bottom {
    text-align: center;
    padding-top: 20px;

    &__link {
        color: @grey-f;
        font-size: 12px;
        padding-right: 12px;
        font-weight: 600;
        font-style: italic;

        &--no-pad {
            padding: 0;
        }

        &:hover,
        &:focus {
            text-decoration: none;
            color: @pink;
        }
    }

    &__copyright {
        text-align: center;
        color: @grey-f;
        font-size: 12px;
        font-weight: 600;
        font-style: italic;
        padding-bottom: 1em;
    }
}


renamed clas

renamed clas

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/Digipalvelutehdas/APIKA.git/'


Add ng-cloak styles to layout.less

Add ng-cloak styles to layout.less

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


added a pixel before the rss icon

added a pixel before the rss icon

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/dedalozzo/pit-bootstrap.git/'


Add basic less styling

Add basic less styling

This visually organizes the information by separating competitions into boxes,
adding some visual hierarchy through font sizes, and organizing rank, corps
name, and score into a grid format.

This also adds basic responsive styling for mobile viewports.

@mobile: ~"only screen and (max-width: 600px)";

header {
   height: 100px;
   margin-bottom: 30px;
}

.competition {
   .competition-title {
      h3 {
         margin-bottom: 0px !important;
         font-size: 26px;
      }

      margin-bottom: 30px;
   }

   .round {
      margin-bottom: 15px;
   }

   width: 500px;
   padding: 10px 20px;
   margin-bottom: 30px;
   box-shadow: 1px 1px 3px black;

   @media @mobile {
      width: auto;
   }
}

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


Prevent pane shadow overlapping header on Safari

.DiscussionPage-nav {
  > ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
}

@media @phone {
  .DiscussionPage-nav {
    margin: 0 -15px;
    border-bottom: 1px solid @control-bg;

    > ul > li {
      margin: 15px;
      display: inline-block;

      &.item-controls, &.item-scrubber {
        margin: 0;
        display: block;
      }
    }
  }
}
@media @tablet-up {
  .DiscussionPage-nav {
    float: right;

    &, > ul {
      width: 150px;
    }
    > ul {
      position: fixed;
      margin-top: 30px;
      z-index: 1;

      > li {
        margin-bottom: 10px;
      }
    }
    .ButtonGroup, .Button {
      width: 100%;
    }
    .ButtonGroup:not(.itemCount1) {
      .Button:first-child {
        width: 77%;
      }
      .Dropdown-toggle {
        width: 22%;
      }
    }
  }
}

@media @tablet-up {
  .DiscussionPage-stream {
    margin-right: 200px;
  }
}

// ------------------------------------
// Discussions Pane

@media @phone {
  .DiscussionPage-list {
    display: none;
  }
}

@media @tablet-up {
  .DiscussionPage-list {
    left: -@pane-width - 6px;
    width: 100%;
    position: absolute;
    z-index: @zindex-pane;
    overflow: auto;
    top: @header-height;
    height: ~"calc(100vh - @{header-height})";
    width: @pane-width;
    background: @body-bg;
    padding-bottom: 40px;
    border-top: 1px solid @control-bg;
    .box-shadow(0 6px 6px @shadow-color);
    .transition(left 0.2s);

    .affix & {
      position: fixed;
      bottom: 0;
      height: auto;
    }
    .paneShowing & {
      left: 0;
    }
    .DiscussionListItem {
      margin: 0;
      padding: 0;
      border-radius: 0;

      &.active {
        background: @control-bg;
      }
    }
    .DiscussionListItem-controls {
      top: 5px;
    }
    .DiscussionListItem-content {
      padding-left: 52px + 15px;
      padding-right: 65px + 15px;
    }
    .DiscussionListItem-title {
      font-size: 14px;
    }
    .DiscussionListItem-info {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .DiscussionListItem-relevantPosts {
      margin-left: -52px;
      margin-right: -65px;
    }
    .DiscussionListItem-count {
      margin-top: 11px;
    }
  }
}

@media @desktop-hd {
  .DiscussionPage-list {
    .panePinned & {
      left: 0;
      z-index: @zindex-composer - 1;
      .transition(none);
    }
  }
  // When the pane is pinned, move the other page content inwards
  .App-content, .App-footer {
    .hasPane.panePinned & {
      margin-left: @pane-width;

      .container {
        max-width: 100%;
        padding-left: 30px;
        padding-right: 30px;
      }
    }
  }
  .App-header .container {
    transition: width 0.2s;

    .hasPane.panePinned & {
      width: 100%;
    }
  }
}

.DiscussionPage-nav {
  > ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
}

@media @phone {
  .DiscussionPage-nav {
    margin: 0 -15px;
    border-bottom: 1px solid @control-bg;

    > ul > li {
      margin: 15px;
      display: inline-block;

      &.item-controls, &.item-scrubber {
        margin: 0;
        display: block;
      }
    }
  }
}
@media @tablet-up {
  .DiscussionPage-nav {
    float: right;

    &, > ul {
      width: 150px;
    }
    > ul {
      position: fixed;
      margin-top: 30px;
      z-index: 1;

      > li {
        margin-bottom: 10px;
      }
    }
    .ButtonGroup, .Button {
      width: 100%;
    }
    .ButtonGroup:not(.itemCount1) {
      .Button:first-child {
        width: 77%;
      }
      .Dropdown-toggle {
        width: 22%;
      }
    }
  }
}

@media @tablet-up {
  .DiscussionPage-stream {
    margin-right: 200px;
  }
}

// ------------------------------------
// Discussions Pane

@media @phone {
  .DiscussionPage-list {
    display: none;
  }
}

@media @tablet-up {
  .DiscussionPage-list {
    left: -@pane-width - 6px;
    width: 100%;
    position: absolute;
    z-index: @zindex-pane;
    overflow: auto;
    top: @header-height;
    height: ~"calc(100vh - @{header-height})";
    width: @pane-width;
    background: @body-bg;
    padding-bottom: 40px;
    border-top: 1px solid @control-bg;
    .box-shadow(2px 2px 6px -2px @shadow-color);
    .transition(left 0.2s);

    .affix & {
      position: fixed;
      bottom: 0;
      height: auto;
    }
    .paneShowing & {
      left: 0;
    }
    .DiscussionListItem {
      margin: 0;
      padding: 0;
      border-radius: 0;

      &.active {
        background: @control-bg;
      }
    }
    .DiscussionListItem-controls {
      top: 5px;
    }
    .DiscussionListItem-content {
      padding-left: 52px + 15px;
      padding-right: 65px + 15px;
    }
    .DiscussionListItem-title {
      font-size: 14px;
    }
    .DiscussionListItem-info {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .DiscussionListItem-relevantPosts {
      margin-left: -52px;
      margin-right: -65px;
    }
    .DiscussionListItem-count {
      margin-top: 11px;
    }
  }
}

@media @desktop-hd {
  .DiscussionPage-list {
    .panePinned & {
      left: 0;
      z-index: @zindex-composer - 1;
      .transition(none);
    }
  }
  // When the pane is pinned, move the other page content inwards
  .App-content, .App-footer {
    .hasPane.panePinned & {
      margin-left: @pane-width;

      .container {
        max-width: 100%;
        padding-left: 30px;
        padding-right: 30px;
      }
    }
  }
  .App-header .container {
    transition: width 0.2s;

    .hasPane.panePinned & {
      width: 100%;
    }
  }
}