#navWrapper{height:23px; position:relative; z-index:100;}

/* THE NAV STYLING */
/* REMOVE THE PADDING, MARGINS AND BULLETS FROM THE LISTS */
.nav, .nav 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 */
.nav li.top {display:block; float:left; position:relative;}

/* STYLE AND POSITION THE TABLE SO IT TAKES NO PART IN THE NAV FUNCTION. THE FONT SIZE IS NECESSARY FOR IE5.5 */
.nav table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* DEFAULT TOP LINK LINK STYLING */
.nav li.top a.topLink{display:block; float:left; height:25px;}
.nav li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;} /* move the link text off screen */

/* PRE-LOAD THE HOVER IMAGES INTO THE LISTS */
.nav li.menuItem1 {width:106px; background:url("images/personalMenuButtonOver.gif") no-repeat;}
.nav li.menuItem2 {width:106px; background:url("images/businessMenuButtonOver.gif") no-repeat;}
.nav li.menuItem3 {width:106px; background:url("images/aboutUsMenuButtonOver.gif") no-repeat;}
.nav li.menuItem4 {width:106px; background:url("images/locationsMenuButtonOver.gif") no-repeat;}
.nav li.menuItem5 {width:106px; background:url("images/securityMenuButtonOver.gif") no-repeat;}
.nav li.menuItem6 {width:159px; background:url("images/investmentMenuButtonOver.gif") no-repeat;}

/* SET UP THE NORMAL UNHOVERED IMAGES IN THE LINKS */

.nav li a#personal   {width:106px; background:url("images/personalMenuButton.gif") no-repeat;}
.nav li a#business   {width:106px; background:url("images/businessMenuButton.gif") no-repeat;}
.nav li a#aboutUs    {width:106px; background:url("images/aboutUsMenuButton.gif") no-repeat;}
.nav li a#locations  {width:106px; background:url("images/locationsMenuButton.gif") no-repeat;}
.nav li a#security   {width:106px; background:url("images/securityMenuButton.gif") no-repeat;}
.nav li a#investment {width:159px; background:url("images/investmentMenuButton.gif") no-repeat;}

/* STYLE THE LIST OR LINK HOVER. DEPENDS ON WHICH BROWSER IS USED */
.nav a:hover  {visibility:visible;} /* for IE6 */
.nav 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) */
.nav li a#personal:hover, .nav li:hover a#personal,
.nav li a#business:hover, .nav li:hover a#business,
.nav li a#aboutUs:hover, .nav li:hover a#aboutUs,
.nav li a#locations:hover, .nav li:hover a#locations,
.nav li a#security:hover, .nav li:hover a#security,
.nav li a#investment:hover, .nav li:hover a#investment {background:transparent;}

/* KEEP THE 'NEXT' LEVEL INVISIBLE BY PLACING IT OFF SCREEN. */
.nav ul,
.nav :hover ul ul,
.nav :hover ul :hover ul ul,
.nav :hover ul :hover ul :hover ul ul,
.nav :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 SUBMENU LEVEL */
.nav :hover ul.subMenu {left:0; top:25px; background: white; padding:3px 0; border:1px solid #888888; white-space:nowrap; width:193px; height:auto;}
.nav :hover ul.subMenu li {display:block; height:20px; position:relative; float:left; width:190px;}
.nav :hover ul.subMenu li a {display:block; font-size:11px; height:20px; width:187px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid white; border-width:0 0 0 3px;}
.nav :hover ul.subMenu li a.fly {background:white url("images/arrow.gif") 180px 7px no-repeat;}
.nav :hover ul.subMenu li a:hover {background:#897B60; color:white;}
.nav :hover ul.subMenu li a.fly:hover {background:#897B60 url("images/arrowOver.gif") 180px 7px no-repeat; color:white;}
.nav :hover ul li:hover > a.fly {background:#897B60 url("images/arrowOver.gif") 180px 7px no-repeat; color:white;}

/* SET UP THE FLYOUT LEVELS WHEN HOVERING */
.nav :hover ul :hover ul,
.nav :hover ul :hover ul :hover ul,
.nav :hover ul :hover ul :hover ul :hover ul,
.nav :hover ul :hover ul :hover ul :hover ul :hover ul
{left:190px; top:-4px; background: white; padding:3px 0; border:1px solid #888888; white-space:nowrap; width:193px; z-index:200; height:auto; z-index:300;}



/*=========================================================*/
/*                                                         */
/* INVESTMENT  MENU  (extra wide)                          */
/*                                                         */
/* be sure to change all widths correctly below            */
/*                                                         */
/*=========================================================*/

/* SET UP THE FIRST DROP DOWN SUB LEVEL */
.nav :hover ul.subMenuInvestment {left:0; top:25px; background: white; padding:3px 0; border:1px solid #888888; white-space:nowrap; width:153px; height:auto;}
.nav :hover ul.subMenuInvestment li {display:block; height:20px; position:relative; float:left; width:150px;}
.nav :hover ul.subMenuInvestment li a {display:block; font-size:11px; height:20px; width:147px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid white; border-width:0 0 0 3px;}
.nav :hover ul.subMenuInvestment li a.fly {background:white url("images/arrow.gif") 150px 7px no-repeat;}
.nav :hover ul.subMenuInvestment li a:hover {background:#897B60; color:white;}
.nav :hover ul.subMenuInvestment li a.fly:hover {background:#897B60 url("images/arrowOver.gif") 150px 7px no-repeat; color:white;}
.nav :hover ul.subMenuInvestment li:hover > a.fly {background:#897B60 url("images/arrowOver.gif") 150px 7px no-repeat; color:white;}

/* SET UP THE FLYOUT LEVELS WHEN HOVERING */
.nav :hover ul.subMenuInvestment :hover ul,
.nav :hover ul.subMenuInvestment :hover ul :hover ul,
.nav :hover ul.subMenuInvestment :hover ul :hover ul :hover ul,
.nav :hover ul.subMenuInvestment :hover ul :hover ul :hover ul :hover ul
{left:190px; top:-4px; background: white; padding:3px 0; border:1px solid #888888; white-space:nowrap; width:153px; z-index:200; height:auto; z-index:300;}


/*=========================================================*/
/*                                                         */
/* STICKY NAV                                              */
/*                                                         */
/*=========================================================*/

body.personalBankingPages .nav li a#personal, body.personalLoansPages .nav li a#personal    {width:106px; background:url("images/personalMenuButtonOver.gif") no-repeat;}
body.businessBankingPages .nav li a#business, body.businessLendingPages .nav li a#business    {width:106px; background:url("images/businessMenuButtonOver.gif") no-repeat;}
body.aboutUsPages .nav li a#aboutUs    {width:106px; background:url("images/aboutUsMenuButtonOver.gif") no-repeat;}
body.locationsPages .nav li a#locations    {width:106px; background:url("images/locationsMenuButtonOver.gif") no-repeat;}
body.securityPages .nav li a#security    {width:106px; background:url("images/securityMenuButtonOver_a.gif") no-repeat;}
body.investmentPages .nav li a#investment    {width:116px; background:url("images/investmentMenuButtonOver.gif") no-repeat;}