/* Main Navigation */
div#menu {
    margin: 0px;
    padding: 0px;
    background: #648caa;
    width: 100%;
    display: flex;
    flex-direction: row;
}

div#menu li ul {
    display: none; /* stops all sub menu from being displayed */
}

/*
 * top level menu
 */
ul#nav {
    font-size: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul#nav li {
    display: block;
    float: left;
    line-height: 40px;
    position: relative;
}

/*
bug fix for FF 4 -
This statement and the above padding-bottom: 10px from above
ul#nav li
*/
ul#nav li ul li {
    padding-bottom: 0;
}

/*
 top level
 */
ul#nav li a {
    display: block;
    text-decoration: none;
    color: white;
    
    /* highlight border */
    border-left-style: solid;
    border-color: #648caa; /* light blue */
    border-width: 5px;     
}

ul#nav li a {
    padding: 1.6px 16px 0 16px;
}

ul#nav li:hover a {
    background: #3c586d;
   /* make 1st level menu selected as we mouse over the 2nd level menu */
   
    border-color: #3c586d;
}

ul#nav li a:hover {
    background: #3c586d; /* dark blue */
    color: white;
    
    border-color: #d3691b; /* orange */
}

ul#nav li.highlight a {
    color: white;
    background: #3c586d;
    padding: 1.6px 16px 0 16px;
    
    border-color: #d3691b; /* orange */     
}

/*
when 1st level menu highlighted and mouse over change the color
to hover over color
*/
ul#nav li.highlight a:hover {
    color: white;
    background: #3c586d;
}

/*
used to display 2nd level menu when mouse hover overs
1st level menu
*/
ul#nav li:hover ul {
    display: block;
    position: absolute;
    z-index: 9999;
   
}

/*
bug fix need this to keep menu display
with a slow moving mose
from top level menu to sub menu - ken
*/
ul#nav li ul:hover {
    display: block;
}

ul#nav li ul li.sub a {
    width: 160px; /* width of 2nd level menu when you hover 1st level menu */
    height: 43px;
    background: #648caa;
    padding: 5px 0px 0px 15px;
    color: white;
    margin: 0px 0px 0px -40px;

    border-color: #648caa;
}

ul#nav li ul li.sub a:hover {
    background: #3c586d;
    color: white;

    border-color: #d3691b;
}

/*
 * 2nd level menu with 3rd level menu options
 */
ul#nav li ul li.sub2 a {
    width: 160px; /* width of 2nd level menu */
    height: 43px;
    background: #648caa;
    padding: 5px 0px 0px 15px;
    color: white;
    margin: 0px 0px 0px -40px;
    
    border-color: #648caa; /* light blue */
}

/* this must be before ul#nav li ul li.sub2 a:hover
to undo the orange
 highlight 2nd once we are on the 3rd level menu  
*/
ul#nav li ul li.sub2:hover a {
    background: #3c586d;
    border-color: #3c586d;
}

ul#nav li ul li.sub2 a:hover {
    background: #3c586d;
    border-color: #d3691b;
}


/*
 * 3rd level menu
 */
ul#nav li ul li.sub2 ul li.sub3,
ul#nav li ul li.sub2 ul li.sub3 a {
    width: 160px; /* 3rd level menu width */	
}
 
ul#nav li ul li.sub2 ul li.sub3 {
    /* TODO FF4 bug fix? */
    margin-top: -10px;
    padding-bottom: 10px;
    top: 10px;
    padding-left: 40px;
    margin-left: -29px;
}

ul#nav li ul li.sub2 ul li.sub3 a {
    height: 43px;
    background: #648caa;
    border-color: #648caa;
}

ul#nav li:hover ul li ul {
    visibility: hidden;
    z-index: -1; /* bug fix for rightmenu sub2 <ul> should be behind <a> */

    /* TODO FF4 bug fix? */
    right: 0px;
}

ul#nav li:hover ul li:hover ul,ul#nav li a:hover ul li a:hover ul {
    display: block;
    visibility: visible;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    top: 0;
    left: 168px; /* location of 3rd menu pop with respect to 2nd level menu */
}

/*
 some 3rd level menus pop-up to go to scroll up and not down - 4 sub menu
*/
ul#nav li:hover ul li:hover ul.popup,ul#nav li a:hover ul li a:hover ul.popup {
    display: block;
    visibility: visible;
    padding: 0 0 0 0;
    margin: -78px 0 0 0;
    top: 0;
    left: 168px; /* location of 3rd menu pop with respect to 2nd level menu */
}


ul#nav li ul li ul li.sub3 a:hover {
    background: #3c586d;
    color: white;
    border-color: #d3691b;
}

/* ---------------------------------------------------------
 *
 *  Using IMG right tab - Help menu
 *
 * ---------------------------------------------------------
 */
/* right menu tab */
ul#nav li.rightmenu {
    float: left;
}

ul#nav li.rightmenu a:hover {
    background: #3c586d;
    color: white;
}

ul#nav li.rightmenu a {
    padding: 1.6px 16px 0 16px;
}

ul#nav li.righthighlight a {
    color: white;
    background: #3c586d;
}

/*
 right menu 2nd level popup
 aaddFF to DCF7FF to 648caa

*/
/*
FF4 fix
*/
ul#nav .rightmenu li.sub,
ul#nav .rightmenu li.sub a  {
    width: 195px;
}

ul#nav .rightmenu li.sub a {
    height: 43px;
    background: #648caa;
    padding: 5px 0px 0px 15px;
    color: white;
    border-top: 0px;
    border-radius : 0px;
}

ul#nav .rightmenu li.sub a:hover {
    background: #3c586d;
    color: white;
}


/*
 * right 2nd level menu with 3rd level menu options
 */

/*
FF4 bug fix
*/
ul#nav li.rightmenu ul li.sub2,
ul#nav li.rightmenu ul li.sub2 a {
    width: 210px;
}

ul#nav li.rightmenu ul li.sub2 a,
ul#nav li.rightmenu ul li.sub2 ul li.sub3 a {
    height: 43px;	
}

ul#nav li.rightmenu ul li.sub2 a {
    background: #648caa;
    padding: 5px 0px 0px 0px;
    color: white;
}

ul#nav li.rightmenu ul li.sub2:hover a {
    background: #3c586d;
    border-color: #3c586d;
}

ul#nav li.rightmenu ul li.sub2 a:hover {
    background: #3c586d;
    color: white;
    border-color: #d3691b;
}

/*
 rightmenu 3rd level menu
*/
ul#nav li.rightmenu ul li.sub2 ul li.sub3,
ul#nav li.rightmenu ul li.sub2 ul li.sub3 a {
	width: 160px;
	background: #648caa;
	border-color: #648caa;
	height: 48px;
}

ul#nav li.rightmenu ul li.sub2 ul li.sub3 {
    right: 185px;
}

ul#nav li.rightmenu ul li.sub2 ul li.sub3 a {
    padding-left: 10px;
}

ul#nav .rightmenu li:hover ul li ul {
    visibility: hidden;
}

ul#nav li.rightmenu:hover ul li:hover ul, ul#nav li.rightmenu a:hover ul li a:hover ul {
    display: block;
    visibility: visible;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    top: 0;
    left: 0; /* location of 3rd menu pop with respect to 2nd level menu  - see above cannot be here for rightmenu*/
}

ul#nav li.rightmenu ul li ul li.sub3 a:hover {
    background: #3c586d;
    color: white;
    border-color: #d3691b;
}


/* ---------------------------------------------------------
 *
 * menu icon styles
 *
 * ---------------------------------------------------------
 */

/*
 arrow points to the right
*/
img.subarrow {
    border: 0pt none;
    /*vertical-align : middle; */
    padding-top: 12px;
    float: right;
    padding-right: 10px;
}

/*
 arrow points to the left
*/
img.subarrow_left {
    border: 0pt none;
    margin-left: 10px;
    margin-right: 5px;
    vertical-align : middle;
}

/*
 no border for icon
*/
.menuimg {
    border: 0pt none;
    vertical-align : middle;
    height: 16px;
    width: 16px;
}



#myAutoComplete {
    width: 400px; /* set width here or else widget will expand to fit its container */
    padding-bottom: 32px;
}

#myAutoComplete a {
    color: black;
}

#myAutoComplete .submit {
    vertical-align: middle;
    margin-left: 125px;
}

#myInput {
    width: 110px;
    height: 20px;
}