Fixed box shadow css property.

Fixed box shadow css property.

@import 'constants.less';

@column-border-radius: 5px;
@activity-width: 500px;

.room-container {
  margin-left: 0;
  margin-right: 0;
}

.room-activity {
  & > h1 {
    border-bottom: solid 1px lighten(@color-grey-border, 10%);
    margin-top: 0;
    text-align: center;
    padding-bottom: 10px;
    font-size: 22px;
  }
}

.room-alert {
  padding: 5px;
  text-align: center;
  border-radius: 0;
  border-width: 0 0 1px 0;
  -moz-box-shadow: @site-box-shadow;
  -webkit-box-shadow: @site-box-shadow;
  box-shadow: @site-box-shadow;
  margin-left: -1000px;
  margin-right: -1000px;
  margin-top: -20px;

  &:empty {
    display: none;
  }
}

.fixed-column {
  padding: 0;
  height: 850px;

  #previews, #dj-list {
    overflow: auto;
    max-height: 550px;
  }

  @height_iterations: 1000px;
  @height_difference: 180px;
  @min_height: @height_difference + 100px;
  .loopingClass (@index) when (@index > @min_height) {
    @media only screen and (min-width: 768px) and (max-height: @index) {
      height: @index - @height_difference;
      #previews, #dj-list {
        max-height: @index - @height_difference - 300px;
      }
    }
    .loopingClass(@index - 50px);
  }
  .loopingClass (0) {}
  .loopingClass (@height_iterations);

  @media only screen and (max-width: 768px) {
    min-height: 400px;
    #preview {
      max-height: 200px;
    }
  }

  .column-table {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
    background-color: @color-grey-background;
    border: solid 1px @color-grey-border;
    border-radius: @site-border-radius;
    -webkit-box-shadow: @site-box-shadow;
    box-shadow: @site-box-shadow;

    .column-table-row {
      @section-padding: 5px;
      display: table-row;

      .column-section {
        @section-header-bg: darken(@color-grey-background, 5%);
        position: relative;
        padding: @section-padding;
        height: 100%;
        color: darken(@color-grey-background, 60%);
        border-top: solid 1px lighten(@color-grey-border, 3%);

        &, &:before, &:after {
          @box-sizing: content-box;
          -webkit-box-sizing: @box-sizing;
          -moz-box-sizing: @box-sizing;
          box-sizing: @box-sizing;
        }

        &:empty {
          display: none;
        }

        &.section-header {
          background-color: @section-header-bg;
        }

        & > h1 {
          color: black;
          margin: -@section-padding;
          font-size: 17px;
          text-align: center;
          background-color: @section-header-bg;
          padding: 8px;
          position: relative;
          min-height: 34px;

          .button {
            position: absolute;
            right: 6px;
            top: 6px;
            padding: 2px 8px;
            color: darken(@color-grey-background, 50%);

            &:hover:not(.disabled) {
              color: darken(@color-grey-background, 70%);
            }

            &.disabled {
              color: darken(@color-grey-background, 30%);
            }
          }

          .error {
            color: darken(red, 10%);
            font-size: 12px;
            font-weight: bold;
            margin-top: 3px;
            display: none;
          }

          .faded-edge {
            @box-shadow: inset 8px 0 8px 0px @section-header-bg;
            -webkit-box-shadow: @box-shadow;
            -moz-box-shadow: @box-shadow;
            box-shadow: @box-shadow;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
          }

          input[type=text] {
            border: none;
            background: none;
            padding: 0;
            padding-right: 10px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            outline: none;
            font-family: inherit;
            font-weight: inherit;
            text-indent: 10px;
          }
        }

        & > ul  {
          list-style: none;
          margin: -@section-padding;
          padding: 0;

          li {
            @padding: 5px;
            background-color: @color-grey-background;
            border-bottom: solid 1px lighten(@color-grey-border, 8%);
            padding: @padding;
            position: relative;
            word-break: break-word;
            margin: 0;

            &:last-child {
              border-bottom-width: 0;
            }

            .background {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: darken(@color-grey-background, 60%);
              opacity: 0.1;
              z-index: 0;
            }

            .foreground {
              position: relative;
              background: none;
              z-index: 1;
            }

            .error-message {
              margin: auto -@padding;
              padding: @padding;
              color: red;

              &:empty {
                display: none;
              }
            }
          }
        }
      }

      .section-empty {
        font-style: italic;
        color: darken(@color-grey-background, 40%);
        margin-top: @section-padding * 2;

        &.center {
          @height: 160px;

          text-align: center;
          position: absolute;
          top: 50%;
          width: 100%;
          padding: 10px;
          margin: -@section-padding;
          height: @height;
          margin-top: -@height/2;
          font-size: 19px;
          font-style: normal;
          font-weight: 200;
        }
      }

      &.stretch {
        height: 100%;

        .column-section {
          overflow-x: hidden;
          overflow-y: auto;

          & > ul {
            li:last-child {
              border-bottom-width: 1px;
            }
          }
        }
      }

      &:first-child {
        .column-section, h1 {
          border-top: none;
          border-top-left-radius: @site-border-radius - 1px;
          border-top-right-radius: @site-border-radius - 1px;
        }
      }

      &:last-child {
        .column-section, h1 {
          border-bottom-left-radius: @site-border-radius - 1px;
          border-bottom-right-radius: @site-border-radius - 1px;
        }
      }

      #queue-section {
        li {
          @height: 40px;
          @inner-height: @height - 10px;

          position: relative;
          height: @height;

          &:hover {
            .fg .controls {
              opacity: 1;
            }
          }

          .artwork {
            width: @inner-height;
            height: @inner-height;
            background-color: darken(@color-grey-background, 10%);
            background-image: url('/images/unknown_song.png');
            background-size: contain;
            display: inline-block;
            border-radius: 3px;
          }

          .fg {
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: inline-block;
            margin-left: @height;
            line-height: 18px;
            font-size: 13px;

            .controls {
              @transition: opacity .06s ease-in-out;
              transition: @transition;
              -moz-transition: @transition;
              -webkit-transition: @transition;
              opacity: 0;
              position: absolute;
              top: 0;
              right: 0;
              padding-top: 1px;
              padding-right: 3px;

              a {
                text-decoration: none;
                color: darken(@color-grey-background, 50%);

                &:hover:not(.disabled) {
                  color: darken(@color-grey-background, 70%);
                }

                &.disabled {
                  color: darken(@color-grey-background, 30%);
                }
              }
            }

            .title {
              display: block;
              font-weight: 300;
              color: darken(@color-grey-background, 60%);
            }

            .artist, .album {
              font-weight: 200;
              color: darken(@color-grey-background, 30%);
            }
          }

          &.playing {
            background-color: @color-purple;
            @box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.2);
            -webkit-box-shadow: @box-shadow;
            box-shadow: @box-shadow;

            .fg {
              .title, .artist, .album {
                color: white;
              }
            }
          }
        }
      }
    }
  }

  .drag-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.9);
    @shadow: inset 0 0 40px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: @shadow;
    box-shadow: @shadow;
    pointer-events: none;
    z-index: 20;

    opacity: 0;
    @fadetime: .1s;
    transition: opacity @fadetime ease-in-out;
    -moz-transition: opacity @fadetime ease-in-out;
    -webkit-transition: opacity @fadetime ease-in-out;

    & > div {
      @height: 100px;
      @width: 200px;

      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: @width;
      height: @height;
      margin-top: -(@height/2);
      margin-left: -(@width/2);
      text-align: center;
      vertical-align: center;
      line-height: @height;
      font-size: 20px;
      font-weight: 200;
      color: darken(@color-grey-background, 80%);
      opacity: 0.8;
    }
  }

  &.dragging .drag-overlay {
    opacity: 1;
  }

  @media only screen and (max-width: 767px) {
    height: 400px;
    margin: 10px;
  }
}

.navbar .playback-placeholder {
  line-height: @navbar-height;
  cursor: default;
  color: #777;
}

.navbar .playback {
  @playback-height: @navbar-height;
  @timeline-height: 18px;
  @timeline-padding: 3px;
  @info-height: @playback-height - @timeline-height;
  @info-padding: @timeline-padding;

  .info {
    @inner-height: @info-height - @info-padding;
    @font-color: darken(@color-grey-background, 60%);

    height: @info-height;
    padding: @info-padding;
    font-size: 12px;
    line-height: @inner-height / 2;
    text-align: left;
    overflow: hidden;
    cursor: default;
    position: relative;

    .artwork {
      @size: @inner-height;
      width: @size;
      height: @size;
      float: left;
      background-size: contain;
      margin-right: @info-padding;
      border-radius: 3px;

      &.no-artwork {
        background-image: url('/images/unknown_song.png');
      }
    }

    .title {
      color: @font-color;
      font-weight: bold;
    }

    .artist, .album {
      display: inline-block;
      color: lighten(@font-color, 20%);
    }

    .controls {
      text-align: right;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      padding-right: 5px;
      padding-top: 5px;

      &:empty {
        display: none;
      }

      a {
        text-decoration: none;
        font-size: 22px;
        color: darken(@color-grey-background, 50%);

        &:hover:not(.disabled) {
          color: darken(@color-grey-background, 70%);
        }

        &.disabled {
          color: darken(@color-grey-background, 30%);
        }
      }

      .btn-skip {
        font-size: 17px;
        position: relative;
        bottom: 3px;
      }
    }
  }

  .timeline {
    @inner-height: @timeline-height - (@timeline-padding * 2);
    height: @inner-height;
    margin: @timeline-padding;
    background-color: darken(@color-grey-background, 12%);
    position: relative;
    border-radius: @site-border-radius;
    cursor: default;

    .left, .right {
      position: absolute;
      font-size: 10px;
      line-height: @inner-height;
      color: darken(@color-grey-background, 60%);
      padding-bottom: 1px;
    }

    .left {
      left: 5px;
    }

    .right {
      right: 4px;
    }

    .played-container {
      background-color: darken(@color-grey-background, 5%);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 30px;
      @box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.05);
      -webkit-box-shadow: @box-shadow;
      box-shadow: @box-shadow;

      .played {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 0%;
        background-color: @color-purple;
        @box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.4);
        -webkit-box-shadow: @box-shadow;
        box-shadow: @box-shadow;
      }
    }
  }
}

#btn-upload {
  padding: 4px;
  width: 100%;
}

#btn-begin-dj, #btn-end-dj {
  display: none;
}

@import 'constants.less';

@column-border-radius: 5px;
@activity-width: 500px;

.room-container {
  margin-left: 0;
  margin-right: 0;
}

.room-activity {
  & > h1 {
    border-bottom: solid 1px lighten(@color-grey-border, 10%);
    margin-top: 0;
    text-align: center;
    padding-bottom: 10px;
    font-size: 22px;
  }
}

.room-alert {
  padding: 5px;
  text-align: center;
  border-radius: 0;
  border-width: 0 0 1px 0;
  -moz-box-shadow: @site-box-shadow;
  -webkit-box-shadow: @site-box-shadow;
  box-shadow: @site-box-shadow;
  margin-left: -1000px;
  margin-right: -1000px;
  margin-top: -20px;

  &:empty {
    display: none;
  }
}

.fixed-column {
  padding: 0;
  height: 850px;

  #previews, #dj-list {
    overflow: auto;
    max-height: 550px;
  }

  @height_iterations: 1000px;
  @height_difference: 180px;
  @min_height: @height_difference + 100px;
  .loopingClass (@index) when (@index > @min_height) {
    @media only screen and (min-width: 768px) and (max-height: @index) {
      height: @index - @height_difference;
      #previews, #dj-list {
        max-height: @index - @height_difference - 300px;
      }
    }
    .loopingClass(@index - 50px);
  }
  .loopingClass (0) {}
  .loopingClass (@height_iterations);

  @media only screen and (max-width: 768px) {
    min-height: 400px;
    #preview {
      max-height: 200px;
    }
  }

  .column-table {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
    background-color: @color-grey-background;
    border: solid 1px @color-grey-border;
    border-radius: @site-border-radius;
    -webkit-box-shadow: @site-box-shadow;
    box-shadow: @site-box-shadow;

    .column-table-row {
      @section-padding: 5px;
      display: table-row;

      .column-section {
        @section-header-bg: darken(@color-grey-background, 5%);
        position: relative;
        padding: @section-padding;
        height: 100%;
        color: darken(@color-grey-background, 60%);
        border-top: solid 1px lighten(@color-grey-border, 3%);

        &, &:before, &:after {
          @box-sizing: content-box;
          -webkit-box-sizing: @box-sizing;
          -moz-box-sizing: @box-sizing;
          box-sizing: @box-sizing;
        }

        &:empty {
          display: none;
        }

        &.section-header {
          background-color: @section-header-bg;
        }

        & > h1 {
          color: black;
          margin: -@section-padding;
          font-size: 17px;
          text-align: center;
          background-color: @section-header-bg;
          padding: 8px;
          position: relative;
          min-height: 34px;

          .button {
            position: absolute;
            right: 6px;
            top: 6px;
            padding: 2px 8px;
            color: darken(@color-grey-background, 50%);

            &:hover:not(.disabled) {
              color: darken(@color-grey-background, 70%);
            }

            &.disabled {
              color: darken(@color-grey-background, 30%);
            }
          }

          .error {
            color: darken(red, 10%);
            font-size: 12px;
            font-weight: bold;
            margin-top: 3px;
            display: none;
          }

          .faded-edge {
            box-shadow: inset 8px 0 8px 0px @section-header-bg;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
          }

          input[type=text] {
            border: none;
            background: none;
            padding: 0;
            padding-right: 10px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            outline: none;
            font-family: inherit;
            font-weight: inherit;
            text-indent: 10px;
          }
        }

        & > ul  {
          list-style: none;
          margin: -@section-padding;
          padding: 0;

          li {
            @padding: 5px;
            background-color: @color-grey-background;
            border-bottom: solid 1px lighten(@color-grey-border, 8%);
            padding: @padding;
            position: relative;
            word-break: break-word;
            margin: 0;

            &:last-child {
              border-bottom-width: 0;
            }

            .background {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: darken(@color-grey-background, 60%);
              opacity: 0.1;
              z-index: 0;
            }

            .foreground {
              position: relative;
              background: none;
              z-index: 1;
            }

            .error-message {
              margin: auto -@padding;
              padding: @padding;
              color: red;

              &:empty {
                display: none;
              }
            }
          }
        }
      }

      .section-empty {
        font-style: italic;
        color: darken(@color-grey-background, 40%);
        margin-top: @section-padding * 2;

        &.center {
          @height: 160px;

          text-align: center;
          position: absolute;
          top: 50%;
          width: 100%;
          padding: 10px;
          margin: -@section-padding;
          height: @height;
          margin-top: -@height/2;
          font-size: 19px;
          font-style: normal;
          font-weight: 200;
        }
      }

      &.stretch {
        height: 100%;

        .column-section {
          overflow-x: hidden;
          overflow-y: auto;

          & > ul {
            li:last-child {
              border-bottom-width: 1px;
            }
          }
        }
      }

      &:first-child {
        .column-section, h1 {
          border-top: none;
          border-top-left-radius: @site-border-radius - 1px;
          border-top-right-radius: @site-border-radius - 1px;
        }
      }

      &:last-child {
        .column-section, h1 {
          border-bottom-left-radius: @site-border-radius - 1px;
          border-bottom-right-radius: @site-border-radius - 1px;
        }
      }

      #queue-section {
        li {
          @height: 40px;
          @inner-height: @height - 10px;

          position: relative;
          height: @height;

          &:hover {
            .fg .controls {
              opacity: 1;
            }
          }

          .artwork {
            width: @inner-height;
            height: @inner-height;
            background-color: darken(@color-grey-background, 10%);
            background-image: url('/images/unknown_song.png');
            background-size: contain;
            display: inline-block;
            border-radius: 3px;
          }

          .fg {
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: inline-block;
            margin-left: @height;
            line-height: 18px;
            font-size: 13px;

            .controls {
              @transition: opacity .06s ease-in-out;
              transition: @transition;
              -moz-transition: @transition;
              -webkit-transition: @transition;
              opacity: 0;
              position: absolute;
              top: 0;
              right: 0;
              padding-top: 1px;
              padding-right: 3px;

              a {
                text-decoration: none;
                color: darken(@color-grey-background, 50%);

                &:hover:not(.disabled) {
                  color: darken(@color-grey-background, 70%);
                }

                &.disabled {
                  color: darken(@color-grey-background, 30%);
                }
              }
            }

            .title {
              display: block;
              font-weight: 300;
              color: darken(@color-grey-background, 60%);
            }

            .artist, .album {
              font-weight: 200;
              color: darken(@color-grey-background, 30%);
            }
          }

          &.playing {
            background-color: @color-purple;
            @box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.2);
            -webkit-box-shadow: @box-shadow;
            box-shadow: @box-shadow;

            .fg {
              .title, .artist, .album {
                color: white;
              }
            }
          }
        }
      }
    }
  }

  .drag-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.9);
    @shadow: inset 0 0 40px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: @shadow;
    box-shadow: @shadow;
    pointer-events: none;
    z-index: 20;

    opacity: 0;
    @fadetime: .1s;
    transition: opacity @fadetime ease-in-out;
    -moz-transition: opacity @fadetime ease-in-out;
    -webkit-transition: opacity @fadetime ease-in-out;

    & > div {
      @height: 100px;
      @width: 200px;

      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: @width;
      height: @height;
      margin-top: -(@height/2);
      margin-left: -(@width/2);
      text-align: center;
      vertical-align: center;
      line-height: @height;
      font-size: 20px;
      font-weight: 200;
      color: darken(@color-grey-background, 80%);
      opacity: 0.8;
    }
  }

  &.dragging .drag-overlay {
    opacity: 1;
  }

  @media only screen and (max-width: 767px) {
    height: 400px;
    margin: 10px;
  }
}

.navbar .playback-placeholder {
  line-height: @navbar-height;
  cursor: default;
  color: #777;
}

.navbar .playback {
  @playback-height: @navbar-height;
  @timeline-height: 18px;
  @timeline-padding: 3px;
  @info-height: @playback-height - @timeline-height;
  @info-padding: @timeline-padding;

  .info {
    @inner-height: @info-height - @info-padding;
    @font-color: darken(@color-grey-background, 60%);

    height: @info-height;
    padding: @info-padding;
    font-size: 12px;
    line-height: @inner-height / 2;
    text-align: left;
    overflow: hidden;
    cursor: default;
    position: relative;

    .artwork {
      @size: @inner-height;
      width: @size;
      height: @size;
      float: left;
      background-size: contain;
      margin-right: @info-padding;
      border-radius: 3px;

      &.no-artwork {
        background-image: url('/images/unknown_song.png');
      }
    }

    .title {
      color: @font-color;
      font-weight: bold;
    }

    .artist, .album {
      display: inline-block;
      color: lighten(@font-color, 20%);
    }

    .controls {
      text-align: right;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      padding-right: 5px;
      padding-top: 5px;

      &:empty {
        display: none;
      }

      a {
        text-decoration: none;
        font-size: 22px;
        color: darken(@color-grey-background, 50%);

        &:hover:not(.disabled) {
          color: darken(@color-grey-background, 70%);
        }

        &.disabled {
          color: darken(@color-grey-background, 30%);
        }
      }

      .btn-skip {
        font-size: 17px;
        position: relative;
        bottom: 3px;
      }
    }
  }

  .timeline {
    @inner-height: @timeline-height - (@timeline-padding * 2);
    height: @inner-height;
    margin: @timeline-padding;
    background-color: darken(@color-grey-background, 12%);
    position: relative;
    border-radius: @site-border-radius;
    cursor: default;

    .left, .right {
      position: absolute;
      font-size: 10px;
      line-height: @inner-height;
      color: darken(@color-grey-background, 60%);
      padding-bottom: 1px;
    }

    .left {
      left: 5px;
    }

    .right {
      right: 4px;
    }

    .played-container {
      background-color: darken(@color-grey-background, 5%);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 30px;
      @box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.05);
      -webkit-box-shadow: @box-shadow;
      box-shadow: @box-shadow;

      .played {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 0%;
        background-color: @color-purple;
        @box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.4);
        -webkit-box-shadow: @box-shadow;
        box-shadow: @box-shadow;
      }
    }
  }
}

#btn-upload {
  padding: 4px;
  width: 100%;
}

#btn-begin-dj, #btn-end-dj {
  display: none;
}


add some text related classes

add some text related classes

// Text

.text-italic {
  font-style: italic !important;
}

.text-normal {
  font-weight: normal !important;
}

.text-strikethrough {
  text-decoration: line-through !important;
}

.text-strong {
  font-weight: 500 !important;
}

.text-stronger {
  font-weight: 700 !important;
}

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


add separate style sheet for galleries (only load when needed)

.t-gallery{
  line-height:0;
}
.t-gallery figure{
  width:49%;
  position: relative;
  height:100%;
  z-index: 2;
  display:inline-block;
}
.t-gallery img {
  width: 100%;
  height: auto;
}
.t-gallery a img {
  display: block;
  float: left;
  margin:0 0 3px 0;
}
.t-gallery figcaption{
  display: none;
}
.t-gallery figure:nth-child(4){
  opacity: .6;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
}
.t-gallery p{
  width:100%;
  height:98%;
  background: rgba(0, 0, 0, 0.60);
  z-index:20000;
  overflow:hidden;
}
.t-gallery p.see-all{
  font-family:'Source Sans Pro', Arial, sans-serif;
  position:absolute;
  //top:50%;
  //margin-top:-10px;
  color:white;
  text-align: center;
  padding-top:25%;
}
.t-gallery.pull-right{
  margin-right:10px;
}

.pull-right.gallery-fullscreen{
  margin-right:10px;
  width:auto;
}

.gallery-fullscreen:hover{
  cursor:pointer;
}

.pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right{
  opacity:1 !important;
}
.pswp__caption a {
  color: #BBB;
}

@media (max-width: 767px){
  .t-gallery.pull-right, .gallery-counter.pull-left{
    width:auto;
  }
  .pull-right.pull-right-wide{
    margin-bottom:0;
  }
}

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


Remove blank lines

Remove blank lines

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/kyfr59/atom-cg35.git/'


Revert "remove less.css"

Revert "remove less.css"

This reverts commit 076a0fac5a12d4b674f2343f484a2c983a410219.

/**
 * Primary styles
 *
 * Author: IPython Development Team
 */

/** WARNING IF YOU ARE EDITTING THIS FILE, if this is a .css file, It has a lot
 * of chance of beeing generated from the ../less/[samename].less file, you can
 * try to get back the less file by reverting somme commit in history
 **/

/*
 * We'll try to get something pretty, so we
 * have some strange css to have the scroll bar on
 * the left with fix button on the top right of the tooltip
 */

// double slash comment are remove by less compilation
// **
// * Less mixins
// **/

// Four color of the background
@c4 : rgb(247,247,247);
@bordercolor : #BBB;
@borderwidth : 1px;

.dropshadow(){
 -moz-box-shadow:    0px 6px 10px -1px #adadad;
  -webkit-box-shadow: 0px 6px 10px -1px #adadad;
  box-shadow:         0px 6px 10px -1px #adadad;
}

// smoth height adaptation
.smoothheight(@t:1s) {
    -webkit-transition-property: height;
    -webkit-transition-duration: 1s;
    -moz-transition-property: height;
    -moz-transition-duration: 1s;
    transition-property: height;
    transition-duration: 1s;
}

@-moz-keyframes fadeOut {
    from {opacity:1;}
    to {opacity:0;}
}

@-webkit-keyframes fadeOut {
    from {opacity:1;}
    to {opacity:0;}
}

//@keyframes fadeOut {
//    from {opacity:1;}
//    to {opacity:0;}
//}

@-moz-keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

@-webkit-keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

//@keyframes fadeIn {
//    from {opacity:0;}
//    to {opacity:1;}
//}

.tooltip a {
    float:right;
}

/*properties of tooltip after "expand"*/
.bigtooltip {
    overflow: auto;
    height: 200px;
    .smoothheight();
}

/*properties of tooltip before "expand"*/
.smalltooltip{
    .smoothheight();
    text-overflow: ellipsis;
    overflow: hidden;
    height:80px;
}

.tooltipbuttons
{
    position: absolute;
    padding-right : 15px;
    top : 0px;
    right:0px;
}

.tooltiptext
{
    /*avoid the button to overlap on some docstring*/
    padding-right:30px
}

.tooltip {
    max-width:700px;
    border-radius: 4px;
    .dropshadow;
    /*fade-in animation when inserted*/
    -webkit-animation: fadeOut 800ms;
    -moz-animation: fadeOut 800ms;
    animation: fadeOut 800ms;
    -webkit-animation: fadeIn 800ms;
    -moz-animation: fadeIn 800ms;
    animation: fadeIn 800ms;
    vertical-align: middle;
    background-color: @c4;

    overflow : visible;
    border: @bordercolor @borderwidth solid;
    outline: none;
    padding: 3px;
    margin: 0px;
    padding-left:7px;
    font-family: monospace;
    min-height:50px;
    position: absolute;
}

.pretooltiparrow {
  left: 0px;
  margin: 0px;
  top: -16px;
  width: 40px;
  height: 16px;
  overflow: hidden;
  position: absolute;

}

.pretooltiparrow:before {
  background-color : @c4;
  border : @borderwidth @bordercolor solid;
  z-index:11;
  content: "";
  position: absolute;
  left: 15px;
  top: 10px;
  width: 25px;
  height: 25px;
  @theta : 45deg;
  -webkit-transform: rotate(@theta);
  -moz-transform:    rotate(@theta);
  -ms-transform:     rotate(@theta);
  -o-transform:      rotate(@theta);
}

error: pathspec 'IPython/frontend/html/notebook/static/less/tooltip.less' did not match any file(s) known to git


Fixing CSS issue with button icons

Fixing CSS issue with button icons

@import "color";
@import "utility";
@import "transition";

.button {
    display: inline-flex;
    .u-clickable;
    align-items: center;
    justify-content: center;
}

.button--flat {
    padding: 8px;
    margin: 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: @blue--500;
    text-transform: uppercase;
    border-radius: 2px;
    transition: background-color @transition-color-time @transition-easeOutSine;

    &:hover:not(.is-disabled) {
        background-color: @gray--hoverButton
    }

    &:active:not(.is-disabled) {
        background-color: @gray--activeButton
    }
}

.button--icon {
    //  Ensure that wrapping <svg> doesn't increase height of button
    line-height: 0;

    &.is-enabled {
        fill: @blue--500;

        &:hover {
            fill: @blue--700;
        }
    }

    &.is-disabled {
        opacity: .26;
    }
}

.button--icon--primary {
    opacity: 0.87;

    &:hover:not(.is-disabled) {
        opacity: 1;
    }
}

.button--icon--secondary {
    opacity: .54;

    &:hover:not(.is-disabled),
    &.is-enabled {
        opacity: .87;
    }
}

.button--large {
    width: 48px;
    height: 48px;
}

.button--medium {
    width: 40px;
    height: 40px;
}

@import "color";
@import "utility";
@import "transition";

.button {
    display: inline-flex;
    .u-clickable;
    align-items: center;
    justify-content: center;
}

.button--flat {
    padding: 8px;
    margin: 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: @blue--500;
    text-transform: uppercase;
    border-radius: 2px;
    transition: background-color @transition-color-time @transition-easeOutSine;

    &:hover:not(.is-disabled) {
        background-color: @gray--hoverButton
    }

    &:active:not(.is-disabled) {
        background-color: @gray--activeButton
    }
}

.button--icon {
    //  Ensure that wrapping <svg> doesn't increase height of button
    line-height: 0;

    &.is-enabled {
        fill: @blue--500;

        &:hover {
            fill: @blue--700;
        }
    }

    &.is-disabled {
        opacity: .26;
    }
}

.button--icon--primary {
    opacity: 0.87;

    &:hover {
        opacity: 1;
    }
}

.button--icon--secondary {
    opacity: .54;

    &:hover,
    &.is-enabled {
        opacity: .87;
    }
}

.button--large {
    width: 48px;
    height: 48px;
}

.button--medium {
    width: 40px;
    height: 40px;
}


using less version of Font-Awesome

using less version of Font-Awesome

@font-face {
    font-family: 'FontAwesome';
    src: url('../font/fontawesome-webfont.eot');
    src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff') format('woff'),
         url('../font/fontawesome-webfont.ttf') format('truetype'),
         url('../font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'),
         url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

// ICONS
// Glyphs and icons for buttons, nav, and more
// -------------------------------------------
// Font Awesome courtesy of Dave Gandy at fortaweso.me/font-awesome

[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
}

// makes the font 33% larger relative to the icon container
.icon-large:before {
//    display: inline-block;
    font-size: 4/3em;
}

.btn {
    [class^="icon-"],
    [class*=" icon-"] {
    line-height: .9em; // keeps button heights with and without icons the same
    }
}

li {
    [class^="icon-"],
    [class*=" icon-"] {
        display: inline-block;
        width: 1.25em;
        text-align: center;
    }
    .icon-large[class^="icon-"],
    .icon-large[class*=" icon-"]  {
        width: 1.5*1.25em; // 1.5 increased font size for icon-large * 1.25 width
    }
}

li[class^="icon-"],
li[class*=" icon-"] {
    margin-left: 0;
    list-style-type: none;

    &:before {
        text-indent: -2em;
        text-align: center;
    }
    &.icon-large:before {
        text-indent: -4/3em;
    }
}

// Uses Unicode Private Use Area (PUA) to ensure screen readers do not read off
// random characters that represent icons
.icon-glass:before              { content: "\f000"; }
.icon-music:before              { content: "\f001"; }
.icon-search:before             { content: "\f002"; }
.icon-envelope:before           { content: "\f003"; }
.icon-heart:before              { content: "\f004"; }
.icon-star:before               { content: "\f005"; }
.icon-star-empty:before         { content: "\f006"; }
.icon-user:before               { content: "\f007"; }
.icon-film:before               { content: "\f008"; }
.icon-th-large:before           { content: "\f009"; }
.icon-th:before                 { content: "\f00a"; }
.icon-th-list:before            { content: "\f00b"; }
.icon-ok:before                 { content: "\f00c"; }
.icon-remove:before             { content: "\f00d"; }
.icon-zoom-in:before            { content: "\f00e"; }

.icon-zoom-out:before           { content: "\f010"; }
.icon-off:before                { content: "\f011"; }
.icon-signal:before             { content: "\f012"; }
.icon-cog:before                { content: "\f013"; }
.icon-trash:before              { content: "\f014"; }
.icon-home:before               { content: "\f015"; }
.icon-file:before               { content: "\f016"; }
.icon-time:before               { content: "\f017"; }
.icon-road:before               { content: "\f018"; }
.icon-download-alt:before       { content: "\f019"; }
.icon-download:before           { content: "\f01a"; }
.icon-upload:before             { content: "\f01b"; }
.icon-inbox:before              { content: "\f01c"; }
.icon-play-circle:before        { content: "\f01d"; }
.icon-repeat:before             { content: "\f01e"; }

// \f020 is not a valid unicode character. all shifted one down
.icon-refresh:before            { content: "\f021"; }
.icon-list-alt:before           { content: "\f022"; }
.icon-lock:before               { content: "\f023"; }
.icon-flag:before               { content: "\f024"; }
.icon-headphones:before         { content: "\f025"; }
.icon-volume-off:before         { content: "\f026"; }
.icon-volume-down:before        { content: "\f027"; }
.icon-volume-up:before          { content: "\f028"; }
.icon-qrcode:before             { content: "\f029"; }
.icon-barcode:before            { content: "\f02a"; }
.icon-tag:before                { content: "\f02b"; }
.icon-tags:before               { content: "\f02c"; }
.icon-book:before               { content: "\f02d"; }
.icon-bookmark:before           { content: "\f02e"; }
.icon-print:before              { content: "\f02f"; }

.icon-camera:before             { content: "\f030"; }
.icon-font:before               { content: "\f031"; }
.icon-bold:before               { content: "\f032"; }
.icon-italic:before             { content: "\f033"; }
.icon-text-height:before        { content: "\f034"; }
.icon-text-width:before         { content: "\f035"; }
.icon-align-left:before         { content: "\f036"; }
.icon-align-center:before       { content: "\f037"; }
.icon-align-right:before        { content: "\f038"; }
.icon-align-justify:before      { content: "\f039"; }
.icon-list:before               { content: "\f03a"; }
.icon-indent-left:before        { content: "\f03b"; }
.icon-indent-right:before       { content: "\f03c"; }
.icon-facetime-video:before     { content: "\f03d"; }
.icon-picture:before            { content: "\f03e"; }

.icon-pencil:before             { content: "\f040"; }
.icon-map-marker:before         { content: "\f041"; }
.icon-adjust:before             { content: "\f042"; }
.icon-tint:before               { content: "\f043"; }
.icon-edit:before               { content: "\f044"; }
.icon-share:before              { content: "\f045"; }
.icon-check:before              { content: "\f046"; }
.icon-move:before               { content: "\f047"; }
.icon-step-backward:before      { content: "\f048"; }
.icon-fast-backward:before      { content: "\f049"; }
.icon-backward:before           { content: "\f04a"; }
.icon-play:before               { content: "\f04b"; }
.icon-pause:before              { content: "\f04c"; }
.icon-stop:before               { content: "\f04d"; }
.icon-forward:before            { content: "\f04e"; }

.icon-fast-forward:before       { content: "\f050"; }
.icon-step-forward:before       { content: "\f051"; }
.icon-eject:before              { content: "\f052"; }
.icon-chevron-left:before       { content: "\f053"; }
.icon-chevron-right:before      { content: "\f054"; }
.icon-plus-sign:before          { content: "\f055"; }
.icon-minus-sign:before         { content: "\f056"; }
.icon-remove-sign:before        { content: "\f057"; }
.icon-ok-sign:before            { content: "\f058"; }
.icon-question-sign:before      { content: "\f059"; }
.icon-info-sign:before          { content: "\f05a"; }
.icon-screenshot:before         { content: "\f05b"; }
.icon-remove-circle:before      { content: "\f05c"; }
.icon-ok-circle:before          { content: "\f05d"; }
.icon-ban-circle:before         { content: "\f05e"; }

.icon-arrow-left:before         { content: "\f060"; }
.icon-arrow-right:before        { content: "\f061"; }
.icon-arrow-up:before           { content: "\f062"; }
.icon-arrow-down:before         { content: "\f063"; }
.icon-share-alt:before          { content: "\f064"; }
.icon-resize-full:before        { content: "\f065"; }
.icon-resize-small:before       { content: "\f066"; }
.icon-plus:before               { content: "\f067"; }
.icon-minus:before              { content: "\f068"; }
.icon-asterisk:before           { content: "\f069"; }
.icon-exclamation-sign:before   { content: "\f06a"; }
.icon-gift:before               { content: "\f06b"; }
.icon-leaf:before               { content: "\f06c"; }
.icon-fire:before               { content: "\f06d"; }
.icon-eye-open:before           { content: "\f06e"; }

.icon-eye-close:before          { content: "\f070"; }
.icon-warning-sign:before       { content: "\f071"; }
.icon-plane:before              { content: "\f072"; }
.icon-calendar:before           { content: "\f073"; }
.icon-random:before             { content: "\f074"; }
.icon-comment:before            { content: "\f075"; }
.icon-magnet:before             { content: "\f076"; }
.icon-chevron-up:before         { content: "\f077"; }
.icon-chevron-down:before       { content: "\f078"; }
.icon-retweet:before            { content: "\f079"; }
.icon-shopping-cart:before      { content: "\f07a"; }
.icon-folder-close:before       { content: "\f07b"; }
.icon-folder-open:before        { content: "\f07c"; }
.icon-resize-vertical:before    { content: "\f07d"; }
.icon-resize-horizontal:before  { content: "\f07e"; }

.icon-bar-chart:before          { content: "\f080"; }
.icon-twitter-sign:before       { content: "\f081"; }
.icon-facebook-sign:before      { content: "\f082"; }
.icon-camera-retro:before       { content: "\f083"; }
.icon-key:before                { content: "\f084"; }
.icon-cogs:before               { content: "\f085"; }
.icon-comments:before           { content: "\f086"; }
.icon-thumbs-up:before          { content: "\f087"; }
.icon-thumbs-down:before        { content: "\f088"; }
.icon-star-half:before          { content: "\f089"; }
.icon-heart-empty:before        { content: "\f08a"; }
.icon-signout:before            { content: "\f08b"; }
.icon-linkedin-sign:before      { content: "\f08c"; }
.icon-pushpin:before            { content: "\f08d"; }
.icon-external-link:before      { content: "\f08e"; }

.icon-signin:before             { content: "\f090"; }
.icon-trophy:before             { content: "\f091"; }
.icon-github-sign:before        { content: "\f092"; }
.icon-upload-alt:before         { content: "\f093"; }
.icon-lemon:before              { content: "\f094"; }

error: pathspec 'vendor/assets/stylesheets/font-awesome.less' did not match any file(s) known to git


minor stylistic tweaks to input fields in mobile composer

fatal: unable to access 'https://github.com/NodeBB/nodebb-plugin-composer-default.git/': The requested URL returned error: 403


fix(style): `pre` and `code` not aligned properly

// Your custom styles here

// Import syntax highlighting theme
@import "syntax";

// Import style fixes for plug-ins
@import "plugins";

// Import print styles
@import "print";

// Change @link-color can change to whole theme color scheme
// All other vaiables in `app.less` can be overwritten here

// tan #D2B48C rgb(210,180,140)
// @link-color: darken(@background-color, 50%);
// @background-color: tan;
// @text-color: darken(@background-color, 30%);

// mediumvioletred #C71585 rgb(199,21,133)
// @link-color: mediumvioletred;
// @background-color: #fff;
// @text-color: #000;

// orangered #FF4500 rgb(255,69,0)
// @link-color: orangered;
// @background-color: #fff;
// @text-color: #000;

// indigo (invert) #4B0082 rgb(75,0,130)
// @link-color: #fff;
// @background-color: indigo;
// @text-color: lighten(@background-color, 60%);

// indigo #4B0082 rgb(75,0,130)
// @link-color: indigo;
// @background-color: #fff;
// @text-color: #000;

// limegreen #32CD32 rgb(rgb(50,205,50))
// @link-color: limegreen;
// @background-color: #fff;
// @text-color: darken(@link-color, 30%);

// yellow #FFFF00 rgb(255,255,0)
// @link-color: #000;
// @background-color: yellow;
// @text-color: darken(@background-color, 40%);

// paleturquoise #AFEEEE rgb(175,238,238)
// @link-color: darken(@background-color, 60%);
// @background-color: paleturquoise;
// @text-color: darken(@background-color, 50%);

// crimson #DC143C rgb(220,20,60) × gold #FFD700 rgb(255,215,0)
// @link-color: crimson;
// @background-color: gold;
// @text-color: #000;

// Alternative title color switch
// Uncomment the following style will enalbe alternative post title color, this is useful when you're using the custom theme from above.
// .content { .list h2 a, header h1, header h1 a { color: @link-color; } }
// .external span { background: @link-color; }

// Alternative title size
// By default all heading levels have the same font size, but many people may not like this, so here's an alternative font size stack:
// .content {
//   h2 { font-size: 108%; opacity: .6; }
//   h3 { font-size: 96%;  opacity: .5; }
//   h4 { font-size: 84%;  opacity: .4; }
//   h5 { font-size: 72%;  opacity: .3; }
//   h6 { font-size: 60%;  opacity: .2; }
// }

// Custom styles for sparanoid.com
body {
  text-align: center;
}

.logo {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.navigation {
  margin-left: 0;
  margin-right: 0;
}

.content {

  header h1 img,
  header h1 svg {
    margin-left: auto;
    margin-right: auto;
  }

  // Limit post content width
  .page-content,
  .post-content {
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;

    @media (max-width: 640px) {
      max-width: 100%;
    }

    // Center images in posts
    img,
    table {
      margin-left: auto;
      margin-right: auto;
    }

    // Override user agent stylesheet
    input {
      text-align: center;
    }

    // Elements cannot be center aligned
    ul,
    ol,
    pre,
    code {
      text-align: start;
    }

    // Unset `justify` align
    [lang=zh],
    [lang=ja] {
      text-align: inherit;

      header {
        text-align: inherit;
      }
    }

    // Unset border and padding for special blocks
    .note,
    .store,
    .download {
      padding-left: 0;
      border-left: none;
    }

    // Unset border and padding for blockquotes, and make it lighter
    blockquote {

      > p {
        opacity: .5;
        padding-left: 0;
        border-left: none;
      }
    }
  }

  // Apply left align to specific posts or pages
  .nocenter {
    text-align: start;
  }
}

// Your custom styles here

// Import syntax highlighting theme
@import "syntax";

// Import style fixes for plug-ins
@import "plugins";

// Import print styles
@import "print";

// Change @link-color can change to whole theme color scheme
// All other vaiables in `app.less` can be overwritten here

// tan #D2B48C rgb(210,180,140)
// @link-color: darken(@background-color, 50%);
// @background-color: tan;
// @text-color: darken(@background-color, 30%);

// mediumvioletred #C71585 rgb(199,21,133)
// @link-color: mediumvioletred;
// @background-color: #fff;
// @text-color: #000;

// orangered #FF4500 rgb(255,69,0)
// @link-color: orangered;
// @background-color: #fff;
// @text-color: #000;

// indigo (invert) #4B0082 rgb(75,0,130)
// @link-color: #fff;
// @background-color: indigo;
// @text-color: lighten(@background-color, 60%);

// indigo #4B0082 rgb(75,0,130)
// @link-color: indigo;
// @background-color: #fff;
// @text-color: #000;

// limegreen #32CD32 rgb(rgb(50,205,50))
// @link-color: limegreen;
// @background-color: #fff;
// @text-color: darken(@link-color, 30%);

// yellow #FFFF00 rgb(255,255,0)
// @link-color: #000;
// @background-color: yellow;
// @text-color: darken(@background-color, 40%);

// paleturquoise #AFEEEE rgb(175,238,238)
// @link-color: darken(@background-color, 60%);
// @background-color: paleturquoise;
// @text-color: darken(@background-color, 50%);

// crimson #DC143C rgb(220,20,60) × gold #FFD700 rgb(255,215,0)
// @link-color: crimson;
// @background-color: gold;
// @text-color: #000;

// Alternative title color switch
// Uncomment the following style will enalbe alternative post title color, this is useful when you're using the custom theme from above.
// .content { .list h2 a, header h1, header h1 a { color: @link-color; } }
// .external span { background: @link-color; }

// Alternative title size
// By default all heading levels have the same font size, but many people may not like this, so here's an alternative font size stack:
// .content {
//   h2 { font-size: 108%; opacity: .6; }
//   h3 { font-size: 96%;  opacity: .5; }
//   h4 { font-size: 84%;  opacity: .4; }
//   h5 { font-size: 72%;  opacity: .3; }
//   h6 { font-size: 60%;  opacity: .2; }
// }

// Custom styles for sparanoid.com
body {
  text-align: center;
}

.logo {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.navigation {
  margin-left: 0;
  margin-right: 0;
}

.content {

  header h1 img,
  header h1 svg {
    margin-left: auto;
    margin-right: auto;
  }

  // Limit post content width
  .page-content,
  .post-content {
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;

    @media (max-width: 640px) {
      max-width: 100%;
    }

    // Center images in posts
    img,
    table {
      margin-left: auto;
      margin-right: auto;
    }

    // Override user agent stylesheet
    input {
      text-align: center;
    }

    // List cannot be center aligned
    ul,
    ol {
      text-align: start;
    }

    // Unset default `justify` align
    [lang=zh],
    [lang=ja] {
      text-align: inherit;

      header {
        text-align: inherit;
      }
    }

    // Unset border and padding for special blocks
    .note,
    .store,
    .download {
      padding-left: 0;
      border-left: none;
    }

    // Unset border and padding for blockquotes, and make it lighter
    blockquote {

      > p {
        opacity: .5;
        padding-left: 0;
        border-left: none;
      }
    }
  }

  // Apply left align to specific posts or pages
  .nocenter {
    text-align: start;
  }
}


Moved company logo to data-uri

Moved company logo to data-uri

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/cwparsons/cwparsonsca.git/'


Fix styling of tabs on the user entry page.

Some extra margin was added to the header class, which we don't want for
tabs, since they're supposed to be lined up tight against the table below
it.

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


Nicer CSS

Nicer CSS

/*******************************
 * Import Material design lite
 *******************************/
@import (inline) '../../node_modules/angular-material/angular-material.css';

/******************************
 *
 ******************************/

@import (inline) 'boxsprites.css';

.add-button {
  bottom: 40px;
  right: 20px;
  position: absolute;
}

.hide-scroll {
  overflow: hidden;
}

i.material-icons.visibility {
  font-size: 14px;
}

.layout-align-end-stretch i.material-icons.visibility {
  margin-right: -3px;
}

main {
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
}

html, body {
  height: 100%;
}

body {
  // Toasts need their parent to be static
  overflow: hidden;
}

#scroll-container {
  // But we still want to be able to scroll
  overflow: auto;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  min-height: 100vh;
}

footer {
  height: 20px;
  font-size: small;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
}

footer a {
  text-decoration: none;
  color: #000;
}

.footer-left {
  margin-left: 3px;
}

.footer-right {
  text-align: right;
  margin-right: 3px;
}

.pagination-container {
  text-align: center;
}

/*******************************
 * Overrides
 *******************************/

h1, h2 {
  margin: 0;
}

code {
  border: 1px solid #eeeee2;
  background-color: #fcfcfc;
  font-size: 12px;
  border-radius: 2px;
}

blockquote {
  border: 1px solid #ddd;
  border-width: 0 0 0 2px;
  margin-left: 5px;
  padding-left: 10px;
}
a {text-decoration: none}

a, md-card.summary a {
  color: #0099e6;
}

a:visited, md-card.summary a:visited {
  color: #5e35b1;
}

md-card a, md-card a:visited, footer a, footer a:visited {
  color: inherit;
}

md-card md-card-title {
  padding: 10px 16px;
}

md-card md-card-header {
  background-color: rgba(128, 216, 255, .45);
  padding: 5px 10px 0 0;
  white-space: nowrap;
  position: relative;
}

md-card md-card-content {
  padding: 14px;
  font-size: 14px;
  line-height: 1.3em;
}

.summary > md-card-content {
  line-height: 22px;
}

.card-headline {
  max-height: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 32px;
  margin: 0 0 5px 12px;
}

md-card-title-text {
  overflow-x: hidden;
}

md-icon svg {
  fill: inherit;
}

md-divider {
  margin: 6px 0;
}

@media (min-width: 370px) {
  md-dialog {
    min-width: 360px;
  }
  md-dialog.wide-modal {
    min-width: 90%;
  }
}

md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
  min-height: 210px;
}

.md-button.md-icon-button {
  vertical-align: middle;
}

.back-button {
  margin-left: -15px;
}

md-card > md-toolbar {
  border-radius: 2px 2px 0 0;
}

md-toolbar.md-tall {
  height: 158px;
  max-height: 188px;
}

md-dialog-content textarea[md-no-autogrow].md-input {
  height: inherit;
  overflow-y: auto;
}

/*******************************
 * Header
 *******************************/

 .unlisted-lock {
   color: orange;
 }

.md-toolbar-tools img {
  height: 74px;
  margin: 0 7px 0px -5px;
}

.md-toolbar-tools .unlisted-lock {
  position: relative;
  top: 2px;
  left: 3px;
}

/*******************************
 * Box cards
 *******************************/

.box-header {
  background-color: rgba(45, 45, 45, .2);
  padding: 7px 10px;
}

.box-card .unlisted-lock {
  position: absolute;
  top: 8px;
  right: 7px;
}

@media (min-width: 600px) {
  .box-card {
    width: 250px;
    height: 150px;
  }
}

.box-card {
  max-height: 150px;
  overflow: auto;
}

 /*******************************
  * Pokemon cards
  *******************************/

@media (min-width: 600px) {
  .pokemon-card-mini {
    width: 166px;
    height: 214px;
  }

  .summary {
    width: 344px;
  }
}

@media (max-width: 599px) {
  .pokemon-card-mini {
    display: block;
    width: auto;
  }

  .summary {
    display: block;
  }
}

.summary {
  position: relative;
}

h1.summary-toolbar {
  margin-left: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-container {
  position: relative;
}

.icon-container > img, .icon-container > span > img {
  position: absolute;
  width: 40px;
  height: 30px;
}

.icon-container > span > img {
  bottom: 1px;
}
.pokemon-container {
  position: absolute;
  right: 170px;
}

.pokemon-container > img {
  position: absolute;
}

.pokemon-bg {
  width: 120px;
}

.pokemon-egg {
  margin-left: 5px;
}

.card-link {
  text-decoration: none;
  color: black;
  display: block;
}

.pokemon-kb, .pokemon-shiny {
  font-size: 10px;
}

.pokemon-kb {
  width: 9px;
}

.pokemon-shiny {
  width: 10px;
}

.box-marking {
  width: 9px;
}

.marked {
  opacity: 1;
}

// Prevent people from overflowing markdown text boxes, e.g. by embedding large images
[marked] * {
  max-width: 100%;
}

.pokeball, .held-item {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

.pokeball {
  margin-left: -5px;
}

.pokemon-ha {
  font-style: italic;
}

.language-tag {
  color: #fff;
  background-color: #505050;
  border: 3px solid #505050;
  border-radius: 2px;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  margin-right: -2px;
}

progress {
  -webkit-appearance: none;
  appearance: none;
  width: 210px;
}

.bar-container {
  width: 100%;
  height: 13px;
  position: relative;
  background-color: #f1f1f1;
  top: 3px;
}

.progress-bar {
  background-color: #757575;
  height: 100%;
  position: absolute;
  line-height: inherit;
}

.progress-bar-label {
  position: absolute;
  text-align: center;
  font-size: 12px;
  line-height: 14px;
  width: 100%;
}

.box-marking path, .box-marking circle, .box-marking rect, .box-marking polygon {
  fill: #000;
  opacity: .25;
}

.marked path, .marked circle, .marked rect, .marked polygon {
  opacity: 1;
}

span[class^='gender-'] {
  font-size: 12px;
}

.type {
  text-transform: capitalize;
}

.stat-total {
  font-weight: bold;
  margin-top: 3px;
}

.esv {
  position: absolute;
  font-size: 10px;
  right: 10px;
  bottom: 5px;
}

.handler {
  padding-top: 10px;
}

.pokemon-card-content {
  position: relative;
  padding-top: .6em;
}

.pokemon-card-content:after {
  content: '';
  position: absolute;
  background: url('data:image/svg+xml;utf-8,<svg fill="#000000" height="100" viewBox="0 0 24 24" width="100" xmlns="http://www.w3.org/2000/svg"><path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat 50%;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: -10px;
  left: 0;
}

.draggable > md-card.pokemon-card-mini > .pokemon-card-content:after {
  opacity: 0.15;
}

.note img {
  max-width: 600px;
  width: 100%;
}

.clone-list {
  padding: 8px;
}

.clone-list > div > span {
  margin: 0 10px 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;

}

.clone-list .visibility {
  vertical-align: middle;
}

.visibility {
  text-transform: capitalize;
}

.private {
  font-style: italic;
}

/*******************************
 * Colors
 *******************************/

.increased-stat, .gender-female {color: #D0021B}
.decreased-stat, .gender-male {color: #4A90E2}

.pokemon-kb path {fill: #043575}
.pokemon-shiny path {fill: #f9262f}

.cool {background-color: #F08030}
.beauty {background-color: #6890F0}
.cute {background-color: #F85888}
.clever {background-color: #78C850}
.tough {background-color: #F8D030}
.sheen {background-color: #eee}
.exp-gained {background-color: #a7e4ff}

.pokerus {color: #A475C4}

.game-ruby {color: #a00000}
.game-sapphire {color: #0000a0}
.game-emerald {color: #00a000}
.game-firered {color: #ff7327}
.game-leafgreen {color: #00dd00}
.game-diamond {color: #aaaaff}
.game-pearl {color: #ffaaaa}
.game-platinum {color: #999}
.game-heartgold {color: #b69e00}
.game-soulsilver {color: #7d7d92}
.game-black {color: #444}
.game-white {color: #929292}
.game-black-2 {color: #424b50}
.game-white-2 {color: #e3ced0;}
.game-x {color: #025DA6}
.game-y {color: #EA1A3E}
.game-omega-ruby {color: #AB2813}
.game-alpha-sapphire {color: #194166}

.type-normal {color: #a8a878}
.type-fire {color: #f08030}
.type-fighting {color: #c03028}
.type-water {color: #6890f0}
.type-flying {color: #a890f0}
.type-grass {color: #78c850}
.type-poison {color: #a040a0}
.type-electric {color: #f8d030}
.type-ground {color: #e0c068}
.type-psychic {color: #f85888}
.type-rock {color: #b8a038}
.type-ice {color: #98d8d8}
.type-bug {color: #a8b820}
.type-dragon {color: #7038f8}
.type-ghost {color: #705898}
.type-dark {color: #705848}
.type-steel {color: #b8b8d0}
.type-fairy {color: #ee99ac}

 /*******************************
  * Error pages
  *******************************/
.errorimg {
	margin: 0 auto;
	display: block;
	padding-top: 50px;
}

.errorname, .errortext {
	text-align: center;
	font-family: sans-serif;
}

/*******************************
 * Hidden divs
 *******************************/
#csrf-token, #app-version, #user-data {
  display: none;
}

/*******************************
 * Upload button
 *******************************/

.layout-row .md-button {
	color: rgba(255,255,255,0.87);
	background-color: rgb(3,169,244)!important;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	height: 20px;
}

/*******************************
 * Pokemon Upload Dropbox
 *******************************/

.drop-box {
    background: #F8F8F8;
    border: 5px dashed #DDD;
    width: 200px;
    height: 65px;
    text-align: center;
    padding-top: 25px;
    margin: 10px;
}
.dragover {
    border: 5px dashed rgb(2,119,189);
}

/*******************************
 * Import Material design lite
 *******************************/
@import (inline) '../../node_modules/angular-material/angular-material.css';

/******************************
 *
 ******************************/

@import (inline) 'boxsprites.css';

.add-button {
  bottom: 40px;
  right: 20px;
  position: absolute;
}

.hide-scroll {
  overflow: hidden;
}

i.material-icons.visibility {
  font-size: 14px;
}

.layout-align-end-stretch i.material-icons.visibility {
  margin-right: -3px;
}

main {
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
}

html, body {
  height: 100%;
}

body {
  // Toasts need their parent to be static
  overflow: hidden;
}

#scroll-container {
  // But we still want to be able to scroll
  overflow: auto;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  min-height: 100vh;
}

footer {
  height: 20px;
  font-size: small;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
}

footer a {
  text-decoration: none;
  color: #000;
}

.footer-left {
  margin-left: 3px;
}

.footer-right {
  text-align: right;
  margin-right: 3px;
}

.pagination-container {
  text-align: center;
}

/*******************************
 * Overrides
 *******************************/

h1, h2 {
  margin: 0;
}

a {text-decoration: none}

a, md-card.summary a {
  color: #0099e6;
}

a:visited, md-card.summary a:visited {
  color: #5e35b1;
}

md-card a, md-card a:visited, footer a, footer a:visited {
  color: inherit;
}

md-card md-card-title {
  padding: 10px 16px;
}

md-card md-card-header {
  background-color: rgba(128, 216, 255, .45);
  padding: 5px 10px 0 0;
  white-space: nowrap;
  position: relative;
}

md-card md-card-content {
  padding: 14px;
  font-size: 14px;
  line-height: 1.3em;
}

.summary > md-card-content {
  line-height: 22px;
}

.card-headline {
  max-height: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 32px;
  margin: 0 0 5px 12px;
}

md-card-title-text {
  overflow-x: hidden;
}

md-icon svg {
  fill: inherit;
}

md-divider {
  margin: 6px 0;
}

@media (min-width: 370px) {
  md-dialog {
    min-width: 360px;
  }
  md-dialog.wide-modal {
    min-width: 90%;
  }
}

md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
  min-height: 210px;
}

.md-button.md-icon-button {
  vertical-align: middle;
}

.back-button {
  margin-left: -15px;
}

md-card > md-toolbar {
  border-radius: 2px 2px 0 0;
}

md-toolbar.md-tall {
  height: 158px;
  max-height: 188px;
}

md-dialog-content textarea[md-no-autogrow].md-input {
  height: inherit;
  overflow-y: auto;
}

/*******************************
 * Header
 *******************************/

 .unlisted-lock {
   color: orange;
 }

.md-toolbar-tools img {
  height: 74px;
  margin: 0 7px 0px -5px;
}

.md-toolbar-tools .unlisted-lock {
  position: relative;
  top: 2px;
  left: 3px;
}

/*******************************
 * Box cards
 *******************************/

.box-header {
  background-color: rgba(45, 45, 45, .2);
  padding: 7px 10px;
}

.box-card .unlisted-lock {
  position: absolute;
  top: 8px;
  right: 7px;
}

@media (min-width: 600px) {
  .box-card {
    width: 250px;
    height: 150px;
  }
}

.box-card {
  max-height: 150px;
  overflow: auto;
}

 /*******************************
  * Pokemon cards
  *******************************/

@media (min-width: 600px) {
  .pokemon-card-mini {
    width: 166px;
    height: 214px;
  }

  .summary {
    width: 344px;
  }
}

@media (max-width: 599px) {
  .pokemon-card-mini {
    display: block;
    width: auto;
  }

  .summary {
    display: block;
  }
}

.summary {
  position: relative;
}

h1.summary-toolbar {
  margin-left: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-container {
  position: relative;
}

.icon-container > img, .icon-container > span > img {
  position: absolute;
  width: 40px;
  height: 30px;
}

.icon-container > span > img {
  bottom: 1px;
}
.pokemon-container {
  position: absolute;
  right: 170px;
}

.pokemon-container > img {
  position: absolute;
}

.pokemon-bg {
  width: 120px;
}

.pokemon-egg {
  margin-left: 5px;
}

.card-link {
  text-decoration: none;
  color: black;
  display: block;
}

.pokemon-kb, .pokemon-shiny {
  font-size: 10px;
}

.pokemon-kb {
  width: 9px;
}

.pokemon-shiny {
  width: 10px;
}

.box-marking {
  width: 9px;
}

.marked {
  opacity: 1;
}

// Prevent people from overflowing markdown text boxes, e.g. by embedding large images
[marked] * {
  max-width: 100%;
}

.pokeball, .held-item {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

.pokeball {
  margin-left: -5px;
}

.pokemon-ha {
  font-style: italic;
}

.language-tag {
  color: #fff;
  background-color: #505050;
  border: 3px solid #505050;
  border-radius: 2px;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  margin-right: -2px;
}

progress {
  -webkit-appearance: none;
  appearance: none;
  width: 210px;
}

.bar-container {
  width: 100%;
  height: 13px;
  position: relative;
  background-color: #f1f1f1;
  top: 3px;
}

.progress-bar {
  background-color: #757575;
  height: 100%;
  position: absolute;
  line-height: inherit;
}

.progress-bar-label {
  position: absolute;
  text-align: center;
  font-size: 12px;
  line-height: 14px;
  width: 100%;
}

.box-marking path, .box-marking circle, .box-marking rect, .box-marking polygon {
  fill: #000;
  opacity: .25;
}

.marked path, .marked circle, .marked rect, .marked polygon {
  opacity: 1;
}

span[class^='gender-'] {
  font-size: 12px;
}

.type {
  text-transform: capitalize;
}

.stat-total {
  font-weight: bold;
  margin-top: 3px;
}

.esv {
  position: absolute;
  font-size: 10px;
  right: 10px;
  bottom: 5px;
}

.handler {
  padding-top: 10px;
}

.pokemon-card-content {
  position: relative;
  padding-top: .6em;
}

.pokemon-card-content:after {
  content: '';
  position: absolute;
  background: url('data:image/svg+xml;utf-8,<svg fill="#000000" height="100" viewBox="0 0 24 24" width="100" xmlns="http://www.w3.org/2000/svg"><path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat 50%;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: -10px;
  left: 0;
}

.draggable > md-card.pokemon-card-mini > .pokemon-card-content:after {
  opacity: 0.15;
}

.note img {
  max-width: 600px;
  width: 100%;
}

.clone-list {
  padding: 8px;
}

.clone-list > div > span {
  margin: 0 10px 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;

}

.clone-list .visibility {
  vertical-align: middle;
}

.visibility {
  text-transform: capitalize;
}

.private {
  font-style: italic;
}

/*******************************
 * Colors
 *******************************/

.increased-stat, .gender-female {color: #D0021B}
.decreased-stat, .gender-male {color: #4A90E2}

.pokemon-kb path {fill: #043575}
.pokemon-shiny path {fill: #f9262f}

.cool {background-color: #F08030}
.beauty {background-color: #6890F0}
.cute {background-color: #F85888}
.clever {background-color: #78C850}
.tough {background-color: #F8D030}
.sheen {background-color: #eee}
.exp-gained {background-color: #a7e4ff}

.pokerus {color: #A475C4}

.game-ruby {color: #a00000}
.game-sapphire {color: #0000a0}
.game-emerald {color: #00a000}
.game-firered {color: #ff7327}
.game-leafgreen {color: #00dd00}
.game-diamond {color: #aaaaff}
.game-pearl {color: #ffaaaa}
.game-platinum {color: #999}
.game-heartgold {color: #b69e00}
.game-soulsilver {color: #7d7d92}
.game-black {color: #444}
.game-white {color: #929292}
.game-black-2 {color: #424b50}
.game-white-2 {color: #e3ced0;}
.game-x {color: #025DA6}
.game-y {color: #EA1A3E}
.game-omega-ruby {color: #AB2813}
.game-alpha-sapphire {color: #194166}

.type-normal {color: #a8a878}
.type-fire {color: #f08030}
.type-fighting {color: #c03028}
.type-water {color: #6890f0}
.type-flying {color: #a890f0}
.type-grass {color: #78c850}
.type-poison {color: #a040a0}
.type-electric {color: #f8d030}
.type-ground {color: #e0c068}
.type-psychic {color: #f85888}
.type-rock {color: #b8a038}
.type-ice {color: #98d8d8}
.type-bug {color: #a8b820}
.type-dragon {color: #7038f8}
.type-ghost {color: #705898}
.type-dark {color: #705848}
.type-steel {color: #b8b8d0}
.type-fairy {color: #ee99ac}

 /*******************************
  * Error pages
  *******************************/
.errorimg {
	margin: 0 auto;
	display: block;
	padding-top: 50px;
}

.errorname, .errortext {
	text-align: center;
	font-family: sans-serif;
}

/*******************************
 * Hidden divs
 *******************************/
#csrf-token, #app-version, #user-data {
  display: none;
}

/*******************************
 * Upload button
 *******************************/

.layout-row .md-button {
	color: rgba(255,255,255,0.87);
	background-color: rgb(3,169,244)!important;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	height: 20px;
}

/*******************************
 * Pokemon Upload Dropbox
 *******************************/

.drop-box {
    background: #F8F8F8;
    border: 5px dashed #DDD;
    width: 200px;
    height: 65px;
    text-align: center;
    padding-top: 25px;
    margin: 10px;
}
.dragover {
    border: 5px dashed rgb(2,119,189);
}


abnormally long tags for addons are broken using word-wrap (bug 723871)

@import 'lib';

#addon {
    position: relative;
    padding: 20px 20px 20px 104px;
    .icon {
        position: absolute;
        top: 20px;
        left: 20px;
        margin: 0 12px 1em 0;
    }
    #addon-summary {
        font-size: 16px;
        line-height: 20px;
    }
    h1 {
        color: @dark-gray;
        margin: 0 0 2px;
        padding-right: 54px;
    }
    .badge {
        font-size: 14px;
        margin: 0 1em;
    }
    .install-shell {
        font-family: @sans-stack;
    }
}
.html-rtl #addon {
    padding: 20px 104px 20px 20px;
    .icon {
        left: auto;
        right: 20px;
        margin: 0 0 1em 12px;
    }
    h1 {
        padding-right: 0;
        padding-left: 54px;
        text-align: right;
    }
    .notavail {
        padding: 1px 18px 1px 0;
        margin-right: 0;
        margin-left: 14px;
    }
}

#addon .notavail,
#eula .notavail {
    font-family: @sans-stack;
    font-size: 12px;
    line-height: 12px;
    padding: 1px 0 1px 18px;
    margin-right: 14px;  /* Match the padding of .install. */
    background: url(../../img/impala/no.png) 0 30% no-repeat;
    white-space: nowrap;
}

.html-rtl #addon .notavail,
.html-rtl #eula .notavail {
    background-position: 100% 30%;
    padding: 1px 18px 1px 0;
}

#addon .acr-incompat,
#eula .acr-incompat {
    background: none;
    padding: 1px 0 !important;
}

h1.addon,
#addon-summary,
#addon-description {
    overflow: hidden;
}

.version-number {
    color: #999;
    font-size: .8em;
}

.notice {
    .border-radius(5px);
    .box-shadow(0 -1px 0 #D7E1ED inset, 0 1px 0 rgba(0, 0, 0, 0.05));
    border: 1px solid #CCD6E3;
    padding: 14px;
    background: #E3EDFA;
    margin-bottom: 1em;
    h3 {
        font-style: italic;
        font-size: 16px;
    }
    p {
        margin-top: .5em;
        &:first-child {
            margin: 0;
        }
    }
    b {
        color: @dark-gray;
    }
    .prose {
        color: @medium-gray;
        li {
            margin-bottom: .5em;
        }
    }
    &.author {
        min-height: 64px;
        position: relative;
        .aux {
            float: right;
            margin-left: 7px;
            text-align: center;
            p {
                font-size: 11px;
            }
        }
        .continue {
            display: block;
            margin-top: .25em;
        }
        .avatar {
            height: 64px;
            width: 64px;
            position: absolute;
            left: 20px;
            top: 1em;
        }
        #contribute-box {
            display: none;
        }
    }
    &.author,
    &.performance-note {
        padding-left: 104px;
    }
    &.performance-note {
        background: url(../../img/impala/turtle.png) no-repeat 28px 16px #fff8dc;
        border-color: #e2dbbf;
        .box-shadow(0 -1px 0 #F7F0D5 inset, 0 1px 0 rgba(0, 0, 0, 0.05));
    }
    &.upsell,
    &.dependencies {
        > h3 {
            margin: 0 0 .5em;
        }
    }
    &.upsell {
        min-height: 64px;
        position: relative;
        > .premium {
            position: absolute;
            top: 14px;
            right: 7px;
            h3 {
                font: bold 13px/16px @sans-stack;
            }
        }
    }
    &.dependencies {
        background-color: #f8ffdc;
        border-color: #dbe2bf;
    }
}

.html-rtl .notice {
    &.author,
    &.performance-note {
        padding: 14px 104px 14px 14px;
    }
    &.author {
        .aux {
            float: left;
            margin: 0 7px 0 0;
        }
        .avatar {
            left: auto;
            right: 20px;
        }
    }
    &.performance-note {
        background-position: 96% 16px;
    }
    &.upsell {
        .premium {
            right: auto;
            left: 21px;
        }
    }
}

.addon-vitals {
    .stars {
        margin: 0 0 4px;
    }
    font-size: 16px;
    line-height: 1.4em;
    p {
        padding: 0;
    }
    .widgets {
        margin: 23px 0 8px;
        font-size: 14px;
        .widget {
            color: @note-gray;
            display: block;
        }
    }
    .stats {
        padding-right: 20px;
        b {
            color: @dark-gray;
        }
        color: @medium-gray;
        background: url("../../img/impala/stats.png") no-repeat right top;
        &:hover {
            color: @link;
            background-position: right -20px;
        }
    }
}

.gutter aside {
    color: @medium-gray;
    padding-top: 1em;
}

.addon-details .more-island > section {
    float: none;
}

.addon-reviews > div {
    margin-bottom: 1em;
    font-size: 14px;
}

.widget {
    padding-left: 21px;
    background: url(../../img/impala/widgets.png) no-repeat 0 4px;
    white-space: nowrap;
    &:hover {
        color: @link;
    }
    &.favorite {
        &.faved {
            .sprite-pos(2, 20, 4px);
        }
        &:hover {
            .sprite-pos(1, 20, 4px);
        }
    }
    &.collection-add {
        .sprite-pos(3, 20, 4px);
        &:hover {
            .sprite-pos(4, 20, 4px);
        }
    }
    &.share {
        .sprite-pos(5, 20, 4px);
        &:hover {
            .sprite-pos(6, 20, 4px);
        }
    }
    &.ajax-loading {
        background: url(../../img/zamboni/loading-white.gif) no-repeat 0 2px !important;
    }
}
.html-rtl {
    .widget {
        padding-right: 21px;
        padding-left: 0;
        background-position: right 4px;
        &.favorite {
            &.faved {
                .sprite-pos-right(2, 20, 4px);
            }
            &:hover {
                .sprite-pos-right(1, 20, 4px);
            }
        }
        &.collection-add {
            .sprite-pos-right(3, 20, 4px);
            &:hover {
                .sprite-pos-right(4, 20, 4px);
            }
        }
        &.share {
            .sprite-pos-right(5, 20, 4px);
            &:hover {
                .sprite-pos-right(6, 20, 4px);
            }
        }
        &.ajax-loading {
            background-position: right 2px;
        }
    }
}

.previews {
    background: -moz-radial-gradient(top,
                                     ellipse farthest-side,
                                     rgba(16, 83, 130, 0.5),
                                     rgba(16, 83, 130, 0)),
                -moz-radial-gradient(bottom,
                                     ellipse farthest-side,
                                     rgba(16, 83, 130, 0.5),
                                     rgba(16, 83, 130, 0)),
                -moz-linear-gradient(left,
                                     #F4F8FC,
                                     rgba(255,255,255,0),
                                     #F4F8FC),
                -moz-linear-gradient(top,
                                     rgba(255,255,255,0),
                                     #F4F8FC 50px,
                                     #F4F8FC 180px,
                                     rgba(255,255,255,0));
    background-size: 100% 5px, 100% 5px, auto, auto;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: 0 0, 0 bottom, 0 0, 0 0;
    overflow: hidden;
    clear: both;
    position: relative;
    margin: 2em 0;
    padding: 30px 5%;
    li a {
        .transition-duration(0.3s);
        .transition-property(~'top, border-color, -moz-box-shadow');
        .box-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
        border: 1px solid #ccc;
        display: block;
        margin: 0 auto;
        text-align: center;
        height: 150px;
        width: 200px;
        background: #fff;
        padding: 5px;
        position: relative;
        top: 0;
        &:hover {
            border-color: @link;
            .box-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
            top: -4px;
        }
        img {
            display: inline-block;
            vertical-align: middle;
        }
    }
    .panel {
        width: 100% / 3;
        a {
            display: block;
            text-align: center;
        }
    }
    .control {
        &.next {
            background: -moz-linear-gradient(left, fadeOut(#fff, 100%), #fff 50%);
        }
        &.prev {
            background: -moz-linear-gradient(left, #fff 50%, fadeOut(#fff, 100%));
        }
    }
}

.previews, #lightbox {
    .control {
        display: block;
        position: absolute;
        height: 100%;
        width: 5%;
        text-decoration: none;
        font-size: 48px;
        font-family: @serif-stack;
        text-align: center;
        line-height: 200px;
        top: 0;
        z-index: 30;
        .transition(.3s color);
        &.next {
            right: 0;
        }
        &.prev {
            left: 0;
        }
        &.disabled {
            color: #ccc;
        }
    }
}

.metadata {
    li {
        line-height: 1.4em;
        border: none;
        a {
            padding: 0;
            display: inline;
            line-height: 1;
        }
        a:hover {
            background: transparent;
            text-decoration: underline;
        }
    }
    .links {
        font-size: 14px;
        margin-bottom: 1em;
        li {
            margin-bottom: 4px;
        }
        a {
            padding-left: 18px;
        }
        .support, .home {
            background: url(../../img/impala/home.png) no-repeat left -18px;
        }
        .email {
            background: url(../../img/impala/email.png) no-repeat left -18px;
        }
        .support-gs {
            background: url(../../img/impala/getsatisfaction.png) no-repeat left -18px;
        }
    }
}
#tagbox {
    li, a {
        border: none;
        display: inline;
        padding: 0 1px 0 0;
        line-height: 1.2em;
        word-wrap: break-word;
    }
    li:not(:last-child):after {
        content: '\00B7';
    }
}

#privacy-policy {
    overflow: hidden;
    position: relative;
    padding: 1em;
    h1 {
        line-height: 25px;
    }
    .prose {
        height: 400px;
        padding: 1em 0 0;
        overflow: auto;
    }
}
.banner-box {
    position: absolute;
    top: -1px;
    right: -1px;
    height: 100px;
    width: 100px;
    overflow: hidden;
    pointer-events: none;
}
.banner {
    padding: 6px 60px;
    background: #489615;
    text-transform: uppercase;
    font: bold 13px @sans-stack;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    .transform(translate(50%, -50%) rotate(45deg) translateY(55px));
    white-space: nowrap;
}

.html-rtl .banner-box {
    right: auto;
    left: -1px;
    .banner {
        .transform(translate(-50%, -50%) rotate(315deg) translateY(55px));
        right: auto;
        left: 0;
    }
}

.secondary .addon {
    hgroup {
        position: relative;
        padding-left: 40px;
        img {
            position: absolute;
            left: 0;
            top: 0;
            width: 32px;
            height: 32px;
        }
        h1 {
            font: bold 16px/18px @serif-stack;
            text-transform: none;
            margin: 0 0 4px;
            padding: 0;
        }
        h4 {
            font-size: 12px;
            line-height: 14px;
        }
    }
}

.html-rtl .secondary .addon {
    hgroup {
        padding: 0 40px 0 0;
        img {
            left: auto;
            right: 0;
        }
        h1 {
            margin: 0 4px 0 0;
        }
    }
}

span.no-restart,
span.featured {
    background-color: #e8933a;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font: bold 9px/11px Arial;
    margin: 4px 0 0 4px;
    padding: 3px 6px;
    text-transform: uppercase;
    vertical-align: 3px;
}
span.featured {
    background-color: #093;
}

.html-rtl span.no-restart,
.html-rtl span.featured {
    margin: 4px 4px 0 0;
}

/* Inline Warning */
.listing .warning {
    background-color: #FFEDF2;
    border-radius: 5px;
    margin-bottom: 1em;
    padding: 10px 20px;
    h2 {
        color: @error-red;
    }
}

/* Paypal Modal */
.paypal-modal {
    .price-wrapper {
        float: right;
    }
    .price {
        color: #D4904D;
        font-weight: bold;
        float: right;
    }
    .paypal-links {
        font-size: 0.8em;
        margin-bottom: 1em;
        padding-bottom: 2em;
        border-bottom: 1px dotted #ccc;
        span {
            padding: 0 3px;
        }
    }
    section {
        border-top: 1px dotted #ccc;
        margin-top: 1em;
        padding-top: 1em;
        &:first-child {
            border-top: 0 none;
            padding-top: 0;
            margin-top: 0;
        }
    }
    .paypal-parent {
        text-align: center;
        h1, h2 {
            text-align: left;
        }
        h5 {
            font-size: 2em;
            line-height: 2em;
        }
        p {
            font-size: 0.9em;
            color: #999;
        }
    }
    .paypal-user {
        text-align: left;
        margin-bottom: 1em;
        color: #555;
        strong {
            font-weight: bold;
        }
    }
    div.login {
        text-align: center;
    }
}

@import 'lib';

#addon {
    position: relative;
    padding: 20px 20px 20px 104px;
    .icon {
        position: absolute;
        top: 20px;
        left: 20px;
        margin: 0 12px 1em 0;
    }
    #addon-summary {
        font-size: 16px;
        line-height: 20px;
    }
    h1 {
        color: @dark-gray;
        margin: 0 0 2px;
        padding-right: 54px;
    }
    .badge {
        font-size: 14px;
        margin: 0 1em;
    }
    .install-shell {
        font-family: @sans-stack;
    }
}
.html-rtl #addon {
    padding: 20px 104px 20px 20px;
    .icon {
        left: auto;
        right: 20px;
        margin: 0 0 1em 12px;
    }
    h1 {
        padding-right: 0;
        padding-left: 54px;
        text-align: right;
    }
    .notavail {
        padding: 1px 18px 1px 0;
        margin-right: 0;
        margin-left: 14px;
    }
}

#addon .notavail,
#eula .notavail {
    font-family: @sans-stack;
    font-size: 12px;
    line-height: 12px;
    padding: 1px 0 1px 18px;
    margin-right: 14px;  /* Match the padding of .install. */
    background: url(../../img/impala/no.png) 0 30% no-repeat;
    white-space: nowrap;
}

.html-rtl #addon .notavail,
.html-rtl #eula .notavail {
    background-position: 100% 30%;
    padding: 1px 18px 1px 0;
}

#addon .acr-incompat,
#eula .acr-incompat {
    background: none;
    padding: 1px 0 !important;
}

h1.addon,
#addon-summary,
#addon-description {
    overflow: hidden;
}

.version-number {
    color: #999;
    font-size: .8em;
}

.notice {
    .border-radius(5px);
    .box-shadow(0 -1px 0 #D7E1ED inset, 0 1px 0 rgba(0, 0, 0, 0.05));
    border: 1px solid #CCD6E3;
    padding: 14px;
    background: #E3EDFA;
    margin-bottom: 1em;
    h3 {
        font-style: italic;
        font-size: 16px;
    }
    p {
        margin-top: .5em;
        &:first-child {
            margin: 0;
        }
    }
    b {
        color: @dark-gray;
    }
    .prose {
        color: @medium-gray;
        li {
            margin-bottom: .5em;
        }
    }
    &.author {
        min-height: 64px;
        position: relative;
        .aux {
            float: right;
            margin-left: 7px;
            text-align: center;
            p {
                font-size: 11px;
            }
        }
        .continue {
            display: block;
            margin-top: .25em;
        }
        .avatar {
            height: 64px;
            width: 64px;
            position: absolute;
            left: 20px;
            top: 1em;
        }
        #contribute-box {
            display: none;
        }
    }
    &.author,
    &.performance-note {
        padding-left: 104px;
    }
    &.performance-note {
        background: url(../../img/impala/turtle.png) no-repeat 28px 16px #fff8dc;
        border-color: #e2dbbf;
        .box-shadow(0 -1px 0 #F7F0D5 inset, 0 1px 0 rgba(0, 0, 0, 0.05));
    }
    &.upsell,
    &.dependencies {
        > h3 {
            margin: 0 0 .5em;
        }
    }
    &.upsell {
        min-height: 64px;
        position: relative;
        > .premium {
            position: absolute;
            top: 14px;
            right: 7px;
            h3 {
                font: bold 13px/16px @sans-stack;
            }
        }
    }
    &.dependencies {
        background-color: #f8ffdc;
        border-color: #dbe2bf;
    }
}

.html-rtl .notice {
    &.author,
    &.performance-note {
        padding: 14px 104px 14px 14px;
    }
    &.author {
        .aux {
            float: left;
            margin: 0 7px 0 0;
        }
        .avatar {
            left: auto;
            right: 20px;
        }
    }
    &.performance-note {
        background-position: 96% 16px;
    }
    &.upsell {
        .premium {
            right: auto;
            left: 21px;
        }
    }
}

.addon-vitals {
    .stars {
        margin: 0 0 4px;
    }
    font-size: 16px;
    line-height: 1.4em;
    p {
        padding: 0;
    }
    .widgets {
        margin: 23px 0 8px;
        font-size: 14px;
        .widget {
            color: @note-gray;
            display: block;
        }
    }
    .stats {
        padding-right: 20px;
        b {
            color: @dark-gray;
        }
        color: @medium-gray;
        background: url("../../img/impala/stats.png") no-repeat right top;
        &:hover {
            color: @link;
            background-position: right -20px;
        }
    }
}

.gutter aside {
    color: @medium-gray;
    padding-top: 1em;
}

.addon-details .more-island > section {
    float: none;
}

.addon-reviews > div {
    margin-bottom: 1em;
    font-size: 14px;
}

.widget {
    padding-left: 21px;
    background: url(../../img/impala/widgets.png) no-repeat 0 4px;
    white-space: nowrap;
    &:hover {
        color: @link;
    }
    &.favorite {
        &.faved {
            .sprite-pos(2, 20, 4px);
        }
        &:hover {
            .sprite-pos(1, 20, 4px);
        }
    }
    &.collection-add {
        .sprite-pos(3, 20, 4px);
        &:hover {
            .sprite-pos(4, 20, 4px);
        }
    }
    &.share {
        .sprite-pos(5, 20, 4px);
        &:hover {
            .sprite-pos(6, 20, 4px);
        }
    }
    &.ajax-loading {
        background: url(../../img/zamboni/loading-white.gif) no-repeat 0 2px !important;
    }
}
.html-rtl {
    .widget {
        padding-right: 21px;
        padding-left: 0;
        background-position: right 4px;
        &.favorite {
            &.faved {
                .sprite-pos-right(2, 20, 4px);
            }
            &:hover {
                .sprite-pos-right(1, 20, 4px);
            }
        }
        &.collection-add {
            .sprite-pos-right(3, 20, 4px);
            &:hover {
                .sprite-pos-right(4, 20, 4px);
            }
        }
        &.share {
            .sprite-pos-right(5, 20, 4px);
            &:hover {
                .sprite-pos-right(6, 20, 4px);
            }
        }
        &.ajax-loading {
            background-position: right 2px;
        }
    }
}

.previews {
    background: -moz-radial-gradient(top,
                                     ellipse farthest-side,
                                     rgba(16, 83, 130, 0.5),
                                     rgba(16, 83, 130, 0)),
                -moz-radial-gradient(bottom,
                                     ellipse farthest-side,
                                     rgba(16, 83, 130, 0.5),
                                     rgba(16, 83, 130, 0)),
                -moz-linear-gradient(left,
                                     #F4F8FC,
                                     rgba(255,255,255,0),
                                     #F4F8FC),
                -moz-linear-gradient(top,
                                     rgba(255,255,255,0),
                                     #F4F8FC 50px,
                                     #F4F8FC 180px,
                                     rgba(255,255,255,0));
    background-size: 100% 5px, 100% 5px, auto, auto;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: 0 0, 0 bottom, 0 0, 0 0;
    overflow: hidden;
    clear: both;
    position: relative;
    margin: 2em 0;
    padding: 30px 5%;
    li a {
        .transition-duration(0.3s);
        .transition-property(~'top, border-color, -moz-box-shadow');
        .box-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
        border: 1px solid #ccc;
        display: block;
        margin: 0 auto;
        text-align: center;
        height: 150px;
        width: 200px;
        background: #fff;
        padding: 5px;
        position: relative;
        top: 0;
        &:hover {
            border-color: @link;
            .box-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
            top: -4px;
        }
        img {
            display: inline-block;
            vertical-align: middle;
        }
    }
    .panel {
        width: 100% / 3;
        a {
            display: block;
            text-align: center;
        }
    }
    .control {
        &.next {
            background: -moz-linear-gradient(left, fadeOut(#fff, 100%), #fff 50%);
        }
        &.prev {
            background: -moz-linear-gradient(left, #fff 50%, fadeOut(#fff, 100%));
        }
    }
}

.previews, #lightbox {
    .control {
        display: block;
        position: absolute;
        height: 100%;
        width: 5%;
        text-decoration: none;
        font-size: 48px;
        font-family: @serif-stack;
        text-align: center;
        line-height: 200px;
        top: 0;
        z-index: 30;
        .transition(.3s color);
        &.next {
            right: 0;
        }
        &.prev {
            left: 0;
        }
        &.disabled {
            color: #ccc;
        }
    }
}

.metadata {
    li {
        line-height: 1.4em;
        border: none;
        a {
            padding: 0;
            display: inline;
            line-height: 1;
        }
        a:hover {
            background: transparent;
            text-decoration: underline;
        }
    }
    .links {
        font-size: 14px;
        margin-bottom: 1em;
        li {
            margin-bottom: 4px;
        }
        a {
            padding-left: 18px;
        }
        .support, .home {
            background: url(../../img/impala/home.png) no-repeat left -18px;
        }
        .email {
            background: url(../../img/impala/email.png) no-repeat left -18px;
        }
        .support-gs {
            background: url(../../img/impala/getsatisfaction.png) no-repeat left -18px;
        }
    }
}
#tagbox {
    li, a {
        border: none;
        display: inline;
        padding: 0 1px 0 0;
        line-height: 1.2em;
    }
    li:not(:last-child):after {
        content: '\00B7';
    }
}

#privacy-policy {
    overflow: hidden;
    position: relative;
    padding: 1em;
    h1 {
        line-height: 25px;
    }
    .prose {
        height: 400px;
        padding: 1em 0 0;
        overflow: auto;
    }
}
.banner-box {
    position: absolute;
    top: -1px;
    right: -1px;
    height: 100px;
    width: 100px;
    overflow: hidden;
    pointer-events: none;
}
.banner {
    padding: 6px 60px;
    background: #489615;
    text-transform: uppercase;
    font: bold 13px @sans-stack;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    .transform(translate(50%, -50%) rotate(45deg) translateY(55px));
    white-space: nowrap;
}

.html-rtl .banner-box {
    right: auto;
    left: -1px;
    .banner {
        .transform(translate(-50%, -50%) rotate(315deg) translateY(55px));
        right: auto;
        left: 0;
    }
}

.secondary .addon {
    hgroup {
        position: relative;
        padding-left: 40px;
        img {
            position: absolute;
            left: 0;
            top: 0;
            width: 32px;
            height: 32px;
        }
        h1 {
            font: bold 16px/18px @serif-stack;
            text-transform: none;
            margin: 0 0 4px;
            padding: 0;
        }
        h4 {
            font-size: 12px;
            line-height: 14px;
        }
    }
}

.html-rtl .secondary .addon {
    hgroup {
        padding: 0 40px 0 0;
        img {
            left: auto;
            right: 0;
        }
        h1 {
            margin: 0 4px 0 0;
        }
    }
}

span.no-restart,
span.featured {
    background-color: #e8933a;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font: bold 9px/11px Arial;
    margin: 4px 0 0 4px;
    padding: 3px 6px;
    text-transform: uppercase;
    vertical-align: 3px;
}
span.featured {
    background-color: #093;
}

.html-rtl span.no-restart,
.html-rtl span.featured {
    margin: 4px 4px 0 0;
}

/* Inline Warning */
.listing .warning {
    background-color: #FFEDF2;
    border-radius: 5px;
    margin-bottom: 1em;
    padding: 10px 20px;
    h2 {
        color: @error-red;
    }
}

/* Paypal Modal */
.paypal-modal {
    .price-wrapper {
        float: right;
    }
    .price {
        color: #D4904D;
        font-weight: bold;
        float: right;
    }
    .paypal-links {
        font-size: 0.8em;
        margin-bottom: 1em;
        padding-bottom: 2em;
        border-bottom: 1px dotted #ccc;
        span {
            padding: 0 3px;
        }
    }
    section {
        border-top: 1px dotted #ccc;
        margin-top: 1em;
        padding-top: 1em;
        &:first-child {
            border-top: 0 none;
            padding-top: 0;
            margin-top: 0;
        }
    }
    .paypal-parent {
        text-align: center;
        h1, h2 {
            text-align: left;
        }
        h5 {
            font-size: 2em;
            line-height: 2em;
        }
        p {
            font-size: 0.9em;
            color: #999;
        }
    }
    .paypal-user {
        text-align: left;
        margin-bottom: 1em;
        color: #555;
        strong {
            font-weight: bold;
        }
    }
    div.login {
        text-align: center;
    }
}