/* common styles */

body {
    position: relative;
    margin-top: 80px;
    font-family: 'Muli', 'Titillium Web', sans-serif;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: Roboto, sans-serif;
    color: #006622;
}

#banner {
    background-color: #006622;
    color:#fff;
    height:120px;
    top: -80px;
    position: relative;
    z-index: 60;
}

p {
    color: #555;
}


/* top banner */

#banner .nav>li>a {
    color: #aaa;
    font-weight: 800;
    border-radius: 2px;
}

#banner .navbar-right {
    margin-right: 90px;
    margin-top: 14px;
}

#banner .nav>li>a:hover, #banner .nav>li>a:focus {
    background-image: linear-gradient(0deg, #005511, #006622);
    color: #ccc;
}

#banner h1 {
    position: absolute;
    bottom: 4px;
    left: 20%;
    color: #898;
}

article a:visited {
    color: #008822;
    text-decoration: none;
}

article a:hover {
    color: #114C21;
    text-decoration: none;
}

article a {
    color: #25A349;
}




/* vertical single-page scroll navigation bar */

nav a {
    color: #006622;
}

.affix {
    top: 130px;
}

.affixTop {
    width: 100%;
}

.affixTop + .container-fluid {
    padding-top: 70px;
}


.navbar-inverse {
    background: rgba(0, 70, 10, 0.9);
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover,
    .navbar-inverse .navbar-nav>.active>a:focus {
    background: rgba(0, 70, 10, 0);
}

.navbar-brand {
    font-variant: small-caps;
}

.navshown {
    height: 50px;
    top:0px;
    transition: top 1.6s;
}

.navhidden {
    height: 50px;
    top:-50px;
    transition: top 1.6s;
}

.nav-pills {
    width: 220px;
    text-align: right;
}

.nav-stacked>li {
    margin-right: 20px;
}

.nav-pills>li>a {
    border-radius: 2px;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    background-image: linear-gradient(90deg, #fff, #006622);
}

.nav>li>a:hover {
    background-image: linear-gradient(90deg, #fff, #eee);
    color: #006622;
}

.nav>li>a:focus {
    background-color: #fff;
    color: #006622;
}





#pdflink {
    position: absolute;
    top: 40px;
    right: 10px;
    font-size: 1.0em;
    color: #555;
    z-index: 20;
}
#pdflink>a:visited {
    color: #555;
}
#pdflink>a:hover {
    text-decoration: none;
    color: #999;
}


#projects section>div {
    background-image: linear-gradient(0deg, #fff, #f4f4f4);
}
#projects section a {
    text-decoration: none;
}

#projects {
    position: relative;
    margin-bottom: 300px;
    top: -120px;
}

#projects section {
    padding-top: 120px;
    margin-top: -120px;
}

#projects section h1 {
    margin-top: 120px; /* splits h1 from the anchor which is scrolled to */
}

#projects .projectImage {
    float: right;
    margin: 0em 1em 1em 1em;
}
#projects .projectImage img {
    width: 200px;
}


@media (max-width: 768px)
{
    #sidebar .nav {
        display: none;
    }

    #cv, #projects {
        margin-bottom: 30px;
    }

    .navbar-right {
        float: right;
    }

    .navbar-nav>li {
        float: left;
    }

    #banner .navbar-right {
        margin-right: 30px;
        margin-top: 8px;
    }

    #banner h1 {
        left: 6%;
        font-size: 28px;
    }
}

@media print {
    body {
        margin-top: 0px;
    }

    #banner {
        top: 0px;
        height: 40px;
    }
    #banner .nav {
        display: none;
    }
    #banner h1 {
        position: initial;
        left: 0px;
    }

    #sidebar {
        display: none;
    }

    /* override the bootstrap columns - we want the CV text
     * to fill the width, while maintaining the internal grid */
    #cvcontainer {
        width: 100%;
    }

    #cv {
        top: 0px;
    }

    #cv section {
        padding-top: 10px;
        margin-top: 0px;
    }
    #cv section h1 {
        padding-top: 0px;
        margin-top: 30px;
    }

    .printpagebreak {
        page-break-before: always;
    }

    #cv #portrait {
        margin-top: 30px;
    }

    #pdflink {
        display: none;
    }

    @media print and (min-width: 540px) {
        .col-sm-1 {width:8%;  float:left;}
        .col-sm-2 {width:16%; float:left;}
        .col-sm-3 {width:25%; float:left;}
        .col-sm-4 {width:33%; float:left;}
        .col-sm-5 {width:42%; float:left;}
        .col-sm-6 {width:50%; float:left;}
        .col-sm-7 {width:58%; float:left;}
        .col-sm-8 {width:66%; float:left;}
        .col-sm-9 {width:75%; float:left;}
        .col-sm-10{width:83%; float:left;}
        .col-sm-11{width:92%; float:left;}
        .col-sm-12{width:100%; float:left;}
    }
    .row {
        margin-left: 0px;
        margin-right: 0px;
    }
}