nav-list.less

.nav-list {
    padding: 0px 15px 0px 15px;
    width: 180px;
    margin-bottom: 0;

    &.nav {
        > li > a {
            display: inline;
            &:hover {
                background: transparent;
                text-decoration: underline;
            }
        }
        &.dependencies > li > a {
            display: block;
            padding: 0;
            margin: 0;
            width: 100%;
        }

        &.slidepanel > li > a {
            padding-right: 0;
        }


    }

    .nav-header {
        margin-right: auto;
    }

    select, input[type=text] {
        width: 165px;
        line-height: auto;
    }

    form {
        margin: 0;
    }

    ul& {
        padding-left: 2px;

        &.box-right {
            padding-left: 10px;
        }
    }

    > li > a,
    .nav-header {
        margin-left: -15px;
        margin-right: -15px;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    }

    > li > a {
        padding: 3px 15px;
        line-height: 20px;

        &.perlybook {
            margin: 0;
            padding-left: 0;
            padding-right: 0;
        }
    }

    > .active {
      > a,
      > a:hover,
      > a:focus {
        color: white;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
        background-color: #08c;
      }
    }

    .fa, .glyphicon {
        margin-right: 2px;
    }

    .divider {
        width: 100%;
        height: 1px;
        margin: 9px 0 9px;
        overflow: hidden;
        background-color: #e5e5e5;
    }

    &.slidepanel {
        float: left;

        &.sticky-panel-top {
            top: 0px;
        }
        &.sticky-panel-bottom {
            position: absolute;
            bottom: 0px;
        }
        &.sticky-panel-sticky {
            position: fixed;
        }
    }
}


.nav {
    > li {
        line-height: 20px;
    }

    //Space them out when they follow another list item (link)
    li + .nav-header {
        margin-top: 5px;
        line-height: 25px;
    }
}

.nav-header {
    display: block;
    padding: 3px 15px;
    font-size: 0.9em;
    font-weight: bold;
    line-height: 1.428571429;
    color: #999;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    text-transform: uppercase;
}

.irc-chat {
  @width: 160px;
  @height: 36px;
  @left: 10px;
  @border-margin: 5px;
  @background: #b80000;

  position: relative;
  top: 0px;
  height: @height;
  width: @width;
  left: 0 - @left;

  display: inline-block;
  margin-bottom: 10px;
  border-radius: 4px 0px 0px;
  box-shadow: 0px 2px 2px -2px #000;

  a {
    color: #fff;
  }

  /* dotted border */
  div {
    display: inline-block;
    margin: @border-margin 0;
    padding-left: @left;
    border-style: dotted;
    border-color: darken(@background, 12.7%);
    border-width: 1px 0;
    width: @width - ( @border-margin / 2 );
    line-height: @height - ( @border-margin * 2 ) - 1;
  }

  /* right triangle on ribbon */
  &:after {
    @sides: @height / sqrt(2);

    content: '';
    position: absolute;
    top: (@height - @sides) / 2;
    left: @width - (@sides / 2);
    width: @sides;
    height: @sides;
    .rotate(45deg);
    z-index: -1;
  }

  /* lower ribbon */
  &:before {
    content: '';
    position: absolute;
    top: @height;
    left: 1px;
    border-top: 9px solid darken(@background, 8%);
    border-left: 9px solid transparent;
    .scale(1.2, 1);
    z-index: -1;
  }

  &, &:after {
    background-color: @background;
    background-image: data-uri('../images/noise.png');
  }
}