#sidebar-nav {
    position: absolute;
    width: 180px;
    float: left;
    margin: 0em;
    padding-top: 1em;

    [class^="icon-"],
    [class*=" icon-"] {
        font-size: 2em;
    }
    
    word-wrap: nowrap;
    white-space: nowrap;

    #dashboard-menu {
        list-style: none;
        padding-right: 25px;
        padding-left: 10px;
        margin-bottom: 0;

        .pointer {
            // TODO: Replace this with my arrow mixin.  It's more elegant.
            position: absolute;
            right: -1px;
            top: 37%;
            .arrow,
            .arrow_border {
                border-color: transparent #fff transparent transparent;
                border-width: 11px;
                border-style: solid;
                font-size: 0;
                left: 50%;
                line-height: 0;
                margin: 0 auto;
                position: absolute;
                top: 0;
                width: 0;
                z-index: 1002;
                left: 0;
                margin-left: 45%;
            }
            .arrow_border {
                border-color: transparent rgb(192, 210, 221) transparent transparent;
                border-width: 11px;
                margin-left: -1px;
                border-style: solid;
                z-index: 1001;
                top: 0px;
            }
        }
        a {
            display: block;
            margin-left: -18px;
            padding: 15px 14px 14px (14px+24px+17px);
            border-bottom: 1px solid #dae1e8;
            box-shadow: 0 2px 1px -1px #FFFFFF;
            color: #7f8c9a;
            line-height: 26px;

            transition: color .1s linear;
            -moz-transition: color .1s linear; /* Firefox 4 */
            -webkit-transition: color .1s linear; /* Safari and Chrome */
            -o-transition: color .1s linear;  /* Opera */

            i {
                position: absolute;
                left: 0;
            }
        }

        li:last-child a {
            border-bottom-width: 0;
        }

        > li{
            position: relative;
            &.active > a,

            > a:hover {
                color: rgba(51, 69, 90, 1);
                text-decoration: none;	
            }

            &.active {
                a {
                    font-weight: 600;
                    text-shadow: 1px 1px 1px #fff;
                }
            }
        }
    }
}