/*make the font the same as home page font, otherwise menu item characters kerning is different*/
html,
body {
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
}

/*.navbar-default {*/
    /*border-color: rgba(34,34,34,.05);*/
    /*background-color: #ffbf60;*/
    /*-webkit-transition: all .35s;*/
    /*-moz-transition: all .35s;*/
    /*transition: all .35s;*/
/*}*/

/* Andy added - bring logo in from left to avoid being crushed by beta banner. Be specific in css or else it won't work https://stackoverflow.com/questions/34640725/bootstrap-navbar-brand-left-margin-not-overriding */
.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
    /*margin-left: 3em;*/
}

/*.navbar-default .navbar-header .navbar-brand {*/
    /*color: yellowgreen;*/
/*}*/

/*.navbar-default .navbar-header .navbar-brand:hover,*/
/*.navbar-default .navbar-header .navbar-brand:focus {*/
    /*color: #eb3812;*/
/*}*/

/*.navbar-default .nav > li>a,*/
/*.navbar-default .nav>li>a:focus {*/
    /*color: #222;*/
/*}*/

/*.navbar-default .nav > li>a:hover,*/
/*.navbar-default .nav>li>a:focus:hover {*/
    /*color: yellowgreen;*/
/*}*/

.navbar-default .nav > li.active>a,
.navbar-default .nav>li.active>a:focus {
    color: yellowgreen!important;
    background-color: transparent;
}

/*.navbar-default .nav > li.active>a:hover,*/
/*.navbar-default .nav>li.active>a:focus:hover {*/
    /*background-color: transparent;*/
/*}*/

/*
ANDY: If width of browser window is >= 768 (magic bootstrap collapse point) then apply these
'transparent' then 'white background' when scrolled, styles.  Because if in menu collapsed state,
don't want any of these styles nor fancy style switching on scroll.
*/
@media(min-width:768px) {
    /*.navbar-default {*/
        /*border-color: rgba(255,255,255,.3);*/
        /*background-color: transparent;*/
    /*}*/

    /*.navbar-default .navbar-header .navbar-brand {*/
        /*color: rgba(255,255,255,.7);*/
        /*!*letter-spacing: 0.5em;*!*/
    /*}*/

    /*.navbar-default .navbar-header .navbar-brand:hover,*/
    /*.navbar-default .navbar-header .navbar-brand:focus {*/
        /*color: #fff;*/
    /*}*/

    /*!* White navbar text when scrolled to the top  *!*/
    /*.navbar-default .nav > li>a,*/
    /*.navbar-default .nav>li>a:focus {*/
        /*!*color: rgba(255,255,255,.7);*!*/
    /*}*/

    /*.navbar-default .nav > li>a:hover,*/
    /*.navbar-default .nav>li>a:focus:hover {*/
        /*color: #fff;*/
    /*}*/

    /*!**/
    /*Once have scrolled down a little, our custom javascript adds the .affix suffix to <nav> element*/
    /*causing these non transparent styles to kick in.*/

    /*Viz. page is scrolled down and background turns white via:*/
    /**!*/

    /*!* White background *!*/
    /*.navbar-default.affix {*/
        /*border-color: #fff;*/
        /*background-color: #fff;*/
        /*box-shadow: 0px 7px 20px 0px rgba(0,0,0,0.1);*/
    /*}*/

    /*!* logo text has fancy reduced spacing and turns green, when page scrolled down and background turns white *!*/
    /*.navbar-default.affix .navbar-header .navbar-brand {*/
        /*!*letter-spacing: 0;*!*/
        /*color: yellowgreen;*/
    /*}*/

    /*!* Hover over logo text and it turns red *!*/
    /*.navbar-default.affix .navbar-header .navbar-brand:hover,*/
    /*.navbar-default.affix .navbar-header .navbar-brand:focus {*/
        /*color: #eb3812;*/
    /*}*/

    /*!* Black text *!*/
    /*.navbar-default.affix .nav > li>a,*/
    /*.navbar-default.affix .nav>li>a:focus {*/
        /*color: #222;*/
    /*}*/

    /*!* Hover over menu items and they turn green, when page scrolled down and background turns white *!*/
    /*.navbar-default.affix .nav > li>a:hover,*/
    /*.navbar-default.affix .nav>li>a:focus:hover {*/
        /*color: yellowgreen;*/
    /*}*/


    /* Navbar background */
    .navbar-default {
        border-color: #467362;
        background-color: #67949e;
        box-shadow: 0px 7px 20px 0px rgba(0,0,0,0.1);
    }

    /* logo text has fancy reduced spacing and turns green, when page scrolled down and background turns white */
    .navbar-default .navbar-header .navbar-brand {
        /*letter-spacing: 0;*/
        color: rgba(255,255,255,.7);
    }

    /* Hover over logo text and it changes colour */
    .navbar-default .navbar-header .navbar-brand:hover,
    .navbar-default .navbar-header .navbar-brand:focus {
        color: #fff;
    }

    /* Black text */
    .navbar-default .nav > li>a,
    .navbar-default .nav>li>a:focus {
        color: #222;
    }

    /* Hover over menu items */
    .navbar-default .nav > li>a:hover,
    .navbar-default .nav>li>a:focus:hover {
        color: #fff;
    }


}

/* ANDY: align glyph icon a little lower */
.navbar-brand .glyphicon {
  top: 4px;
}

/*When hover over active menu item*/
.navbar-default .navbar-nav>.active>a:hover {
    color: #555;
    background-color: #3f7a85;
}

/*When drop down menu, we want background to be subtle and text white TODO make similar change to home page */
.navbar-default .navbar-nav>.open>a:focus {
    color: #fffbdc;
    background-color: #3f7a85;
}