/* I want the headers on the pages to go right up against the bottom of the main menu */
.navbar {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-right: 1px; /* just bring the menu in slightly from the rhs as it's overlapping the page images a little */
}

/* set the default background colours and overall height  */
.navbar-custom {
    background-color: #0C4151;
    border-radius: 0 !important; /* no curve on the menubar */
}

    /* set menu colour and height */
    .navbar-custom .navbar-nav > li > a {
        color: #fff;
        padding-left: 30px; /* horizontal spacing between menu items */
        padding-right: 30px; /* "   "      "    */
    }

    /* set the active colour (when a menu is currently the selected one) */
    .navbar-custom .navbar-nav > .active > a {
        background-color: #ffffff;
        color: #000000;        
    }

        .navbar-custom .navbar-nav > li > a:hover,
        .navbar-custom .navbar-nav > li > a:focus,
        .navbar-custom .navbar-nav > .active > a:hover,
        .navbar-custom .navbar-nav > .active > a:focus,
        .navbar-custom .navbar-nav > .open > a {
            text-decoration: none;
            color: #000000;
        }

    .navbar-custom .navbar-brand {
        color: #eeeeee;
    }

    /* for dropdowns only */
    .navbar-custom .navbar-nav .dropdown-menu {
        background-color: #820053;
    }

        .navbar-custom .navbar-nav .dropdown-menu > li > a {
            color: #fff;
        }

            .navbar-custom .navbar-nav .dropdown-menu > li > a:hover, .navbar-custom .navbar-nav .dropdown-menu > li > a:focus {
                color: #000000;
            }

    .navbar-custom .navbar-toggle {
        background-color: #eeeeee;
    }

    .navbar-custom .icon-bar {
        background-color: #820053;
    }

/* center the menu (unless it's on a mobile device / collapsed) */
@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}