.navbar-inverse {
  /* background-color: teal;  */
  background-color: #000018;        /* almost black but not as black as the nav link (#) */
  background-image: none;
  background-repeat: no-repeat;
  border-color: #333338;

  /* color: #00FF00; */
 }

                                     /* ***** title ***** */
.navbar-inverse .navbar-brand {
    color: #777;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
    color: #5E5E5E;
}
                                      /*  ***** link  ***** */
.navbar-inverse .navbar-nav > li > a {
    color: #FFCC00;
    background-color: #000008;              /* almost black (%) */
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #222;
    background-color: #FFFFCC;            /* pale yellow (&) */
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    color: #333;
    background-color: #FFFF00;            /* yellow (+) */
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    color: #333;
    background-color: #D5D5D5;
}
          
                                         /*  ***** dropdown menu  ***** */
/*
.navbar-nav > li > .dropdown-menu {
    background-color: #000019;
  }
*/
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a,
.navbar-inverse .navbar-nav .open .dropdown-menu {
    color: #FFCC01;
    background-color: #000007;      /* mimic (%) above */
  }

.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #222221;
    background-color: #FFFFCD;       /* mimic (&) above */
}
                                                                       /* (This doesn't work, using the @media (max-width: 767px) overide below */
.navbar-inverse .navbar-nav > li > .dropdown-menu > .active > a,
.navbar-inverse .navbar-nav > li > .dropdown-menu > .active > a:hover,
.navbar-inverse .navbar-nav > li > .dropdown-menu > .active > a:focus {
    color: #333332;
    background-color: #FFFF01;      /* mimic (+) above */
    background-image: none;
    background-repeat: no-repeat;
}


                                                    /*  ***** caret  ***** */
.navbar-inverse .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-inverse .navbar-nav > .dropdown > a:hover .caret,
.navbar-inverse .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-inverse .navbar-nav > .open > a .caret, 
.navbar-inverse .navbar-nav > .open > a:hover .caret, 
.navbar-inverse .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}


                                 /*  ***** mobile version  ***** */
.navbar-inverse .navbar-toggle {
    border-color: #DDD;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #333332;
        background-color: #FFFF01;
        background-image: none;
      /*  background-image: linear-gradient(to bottom, #FFFF01 0, #FFFF01 100%);  */
    }
}
/*
@media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
    }
} 
*/