.mainmenu { background: transparent; padding: 0px; height: 100px; z-index: 68; position: absolute; top: 133px; margin-left:20px; text-align:left; font-size:13px; width: 780px; }

/* The menu styling */
/* Remove the padding, margins and bullets from the lists */
.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;}

/* Set up the top level list items and float left to place inline */
.menu li.top {display:block; float:left; position:relative;}

/* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default top link link styling */
.menu li.top a.top_link {display:block; float:left; height:40px; color:#003D68; text-decoration:none;}
.menu li.top a div { width:95px; height:35px; z-index:0; font-weight:bold; font-size:12px; color:#ffffff; padding:3px 0px 0px 0px; text-align: center; cursor:hand; }
.menu li.top a div:hover { z-index:0; font-weight:bold; font-size:12px; color:#003D68; padding:5px; text-align: center; cursor:hand; height:200px; }

/* pre-load the hover images into the lists */
.menu li.mainlevel {width:105px; padding-top:3px; }
.menu li.mainlevel:hover {width:105px; border-top: solid 3px transparent; background: url(../images/white-tab_trans.png) no-repeat; }

/* set up the normal unhovered images in the links */
.menu li a#link {width:105px; color:#ffffff; border:1px; font-weight:bold; font-size:13px; text-align:center; }

.menu li a#link_sel {width:105px; background: url(../images/white-tab_99.gif) no-repeat; color:#003D68; border:1px;  font-weight:bold; font-size:13px; text-align:center; }

/* Style the list OR link hover. Depends on which browser is used */
.menu a:hover {visibility:visible;} /* for IE6 */
.menu li:hover { position:relative; z-index:200;} /* for IE7 */

/* make the links transparent on hover so that the hover images in the lists show through (no flicker) */
.menu li a#mainlevel:hover, .menu li:hover a#mainlevel {background:transparent;}

/* keep the 'next' level invisible by placing it off screen. */
.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

/* set up the first drop down sub level */
.menu :hover ul.sub {left:4px; top:34px; background: #fff; padding:3px 0; border:1px solid #003D68; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:auto; position:relative; float:left; width:200px; padding-left:2px; }
.menu :hover ul.sub li a {display:block; font-size:11px; height:auto; width:185px; line-height:20px; padding-left:5px; color:#003D68; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(../images/arrow_on.gif) 180px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#003D68; color:#fff; }
.menu :hover ul.sub li a.fly:hover {background:#003D68 url(../images/arrow_on.gif) 180px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#003D68 url(../images/arrow_on.gif) 180px 7px no-repeat; color:#fff;} 

/* set up the flyout levels when hovering */
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul {left:200px; top:-4px; background: #fff; padding:3px 0; border:1px solid #003D68; white-space:normal; width:200px; z-index:200; height:auto; z-index:300;}