/* style the outer div */
div.menu {
float:left;
font-size:11px;
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
background-color:#0074bb; 
padding:5px 10px 5px 0;
margin:0;
height:140px;
position:relative;  /*relative positioning allows flyouts to be positioned relative to the top of the menu, not the top of the menu items */
left:0;
top:0;
}
/* remove all the bullets, borders and padding from the default list styling */
div.menu ul {
padding:0px;
margin:0px;
list-style-type:none;
width:165px;
border-bottom:1px dotted #ffffff;
}
/* don't use relative positon so that we can control the dropdown menu positon based on the ul element, not the li*/
div.menu li {
font-size:11px;
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
width:165px;
display:inline;
}

/* style the links for the top level */
div.menu a, div.menu a:visited {
display:block;
font-size:11px;
text-decoration:none; 
color:#ffffff; 
width:154px; 
background-color:#0074bb; 
border-top:1px dotted #ffffff;
border-bottom:0px;
padding:2px 0px 2px 10px;
}

/* style the top level hover */
div.menu a:hover, div.menu ul ul a:hover {
color:#ffffff; 
background-color:#009edb;
}
div.menu :hover > a, div.menu ul ul :hover > a {
color:#ffffff;
background-color:#009edb;
}

/* style the second level links */
div.menu ul ul a, div.menu ul ul a:visited {
background-color:#0068a6; 
color:#ffffff; 
font-size:10px;
padding:2px 0px 2px 10px;
width:179px;
border:0px;
}
/* style the second level background */
div.menu ul ul a.drop, div.menu ul ul a.drop:visited {
background-color:#0068a6;
}
/* style the second level hover */
div.menu ul ul a.drop:hover, div.menu ul ul a:hover, 
div.menu ul ul :hover > a.drop, div.menu ul ul :hover > a {
background-color:#009edb;
font-size:11px;
font-weight:bold;
}

/* style the third level background */
div.menu ul ul ul a, div.menu ul ul ul a:visited {
background-color:#0068a6;
}

/* style the third level hover */
div.menu ul ul ul a:hover, div.menu ul ul ul :hover > a {
background-color:#009edb;
font-size:11px;
font-weight:bold;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
div.menu ul ul {
visibility:hidden;
position:absolute;
height:0px;
top:0px;
left:164px;
width:189px;
background-color:#0068a6;
height:140px;
border-bottom:0px;
border-left:10px solid #0074bb;
margin:5px 0px 5px 0px;
padding:0px;
}

/* position the third level flyout menu */
div.menu ul ul ul {
position:absolute;
left:189px; 
top:-5px;
width:189px;
border-bottom:0px;
border-left:10px solid #0074bb;
background-color:#0068a6;
height:140px;
margin:5px 0px 5px 0px;
padding:0px;
}
/* position the third level flyout menu for a left flyout */
div.menu ul ul ul.left {
left:-200px;
}

/* style the table so that it takes no part in the layout - required for IE to work */
div.menu table {
position:absolute;
top:0px;
left:0px;
margin:0px;
padding:0px;
}

/* make the second level visible when hover on first level list OR link */
div.menu ul li:hover ul, div.menu ul a:hover ul {
visibility:visible; 
}
/* keep the third level hidden when you hover on first level list OR link */
div.menu ul :hover ul ul {
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
div.menu ul :hover ul :hover ul ul {
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
div.menu ul :hover ul :hover ul { 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}

/* Middle column styling */
div.navMiddleContainer
{
    background-color:#FFFFFF;
    width:1000px;
    height:173px;
    padding:0;
    margin:0;
}
div.navMiddle
{
    float:left;
    width:927px;
    background-color:#0074bb;
    margin:14px 21px 0 18px;
    height:150px;
}
img.menuEdge
{
    float:left;
    border:solid 1px red;
}
a.menuNavImage
{
    float:left;
}

/* Float images to the right */
img.floatRight
{
    float:right;
}