// roll your own nav

nav {
    width: 100%;
    font-size: 15px;
    text-transform: uppercase;
    .museo-sans-light;
    color: @medium-gray-text;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: @white;
    z-index: 9999999999;

    &.docs {
        background: @gray-background;
    }

    .vagrant-logo {
        display: block;
        text-indent: -999999px;
        background: url(/images/logo_vagrant.png) no-repeat 0 0;
        height: 70px;
        width: 275px;
        float: left;
        margin: 10px 20px;
    }

    .vagrant-docs-logo {
        display: block;
        text-indent: -999999px;
        background: url(/images/logo_docs.png) no-repeat 0 0;
        height: 70px;
        width: 350px;
        float: left;
        margin: 10px 20px;
    }

    ul {
        margin: 25px 20px;

        li {
            display: inline;
            margin-left: 15px;
        }

        li.pill {
            background-color: #48b4fb;
            border-radius: 50px;
            color: #FFF;
            padding: 10px 18px;
        }
    }

    .active-nav {
        color: @blue;
    }

    .contact {

        &:hover {
            background-color: @light-gray-background;
            padding: 10px;
            margin-right: -10px;
            margin-left: 5px;
            .rounded;
        }

        &:active {
            background-color: darken(@light-gray-background, 5%);
        }
    }
}
