/*----------------  horizontal-navbar.css     -----------------*/
/*  create horizontal menu navigation bar.                     */
/*  NOT FULL HEIGHT FIXED VERTICAL NAVBAR.                     */
/*  with borders at the bottom of links.                       */
/*  using bright blades colors.                                */
/*  REQUIRES: class="active" AND href removed from             */
/*  active link on each relevant <li> to avoid                 */
/*  being able to link to itself and to color the active link. */
/*-------------------------------------------------------------*/
/* Hex Colours                                                 */
/* #ced9ee : pale blue                                         */
/* #5b583b : charcoal                                          */
/* #92a3d2 : sky blue                                          */
/* #0072ce : bright blades blue                                */
/* #fedd00 : bright blades yellow                              */
/* #9bcbeb : bright blades pale blue                           */
/* #f0ebe1 : bright blades beige                               */
/*-------------------------------------------------------------*/
/* html link =  <link href="_css/horizontal-navbar.css" rel="stylesheet" type="text/css">  */

nav ul {
    list-style-type: none;
    margin: 0 0 .9em 0;
    padding: 0;
    overflow: hidden;
    background-color: #ced9ee;
}

nav li{
    float: left;
    font-size: 1em;
    border-right: 1px solid;
    border-right-color: #0072ce;
}

nav li a {
    display: block;
    color: #0072ce;
    text-align: center;
    padding: 5px 5px;
    text-decoration: none;
}

nav li a.active {
    background-color: #0072ce;
    color: #fedd00;
}

nav li a:hover:not(.active) {
    background-color: #92a3d2;
    color: white;
    font-weight: 400;
   /* border-left: 1px solid red;   put a red left border on the hover menu item */
}