#navbar {
   margin: 0px 0px 0px 10px; /*give a gap at the beginning of the menu bar*/
   padding: 0px;
   font-size: 8.5pt;
   }
#navbar li {
   list-style: none;
   float: left; 
   border-left: 1px solid;
   border-left-color: #7798B0;
   }
#navbar li a {
   display: block;

   text-decoration: none;
   color: White;
   padding: 10px 10px 10px 10px;
   transition: background-color 0.5s;
   }
#navbar li ul { /* initial sub menus don't show */
    display: none;
    opacity : 0.95;

    width: 15em; /* Width of sub menus */
    background-color : #224A7F; /* MATCHES WITH OTHER (A) BELOW  */
}
#navbar li a:hover
{
    background-color : #4d74a9; /*(HOVER COLOUR)*/
}
#navbar li:hover a { /*This keeps the hover image selected when going down the submenu of the top menu item*/
    /*background-image: url('graphics/Menu/BlueSelected.bmp');*/
}
#navbar li:hover ul a { /*all sub menu items inherit from the one above, so override back to normal*/
    background-color : #224A7F;
    transition: background-color 0.5s;
}
#navbar li ul a:hover { /* sub menu items hover */
    background-color : #4d74a9; /*(HOVER COLOUR)*/
}
#navbar li:hover ul /*make the sub menu appear*/
{
    display: block;
    -webkit-animation: showNav 500ms ease-in-out both;
    -animation: showNav 500ms ease-in-out both;

    position: absolute;
    margin: 0;
    padding: 0; 
}
@-webkit-keyframes showNav {
    from {opacity: 0;}
    to {opacity: 0.95;}
}
#navbar li:hover li /* make the sub items vertical (as appose to float:left which it inherited which would 
    make them horizontal*/
{
   float: none; 
   }
#navbar li:hover li a
{
   /* sub items */
   background-color : #224A7F; /* MATCHES WITH OTHER (A) ABOVE  */
   transition: background-color 0.5s;
   border-bottom: 1px solid #7798B0;
   color: #FFFFFF; 
   border-left: 1px solid;
   border-left-color: #7798B0;
   border-right: 1px solid;
   border-right-color: #7798B0;
   }
#navbar li li a:hover 
{
    /*hovering over a sub item*/
   background-color: #4d74a9; /*(HOVER COLOUR)*/
   }
#navbar li ul li
{
    border-left : none;
}
   
.menuselected
{
    background-color : #698ec1;
}
.lastone
{
    border-right: 1px solid;
    border-right-color: #7798B0;
}