/************************************************************************************* Created by Marianne Kolodiy, 5 December 2007 Updated by Marianne Kolodiy to reflect new branding, 5 October, 2009 Comments: DO NOT APPLY LEFT margins or padding to
  • : LEFT PADDING OR MARGIN of the
  • item makes the next nested list indented in IE. Apply these to only **************************************************************************************/ /* COLOR CODING - PREVIOUSLY SAVINGS CSS ******************************************************************************/ #newleftnav {font-family:Verdana, Arial, Helvetica, sans-serif; line-height: 120%; padding: 6px 6px 9px 6px; width: 173px; margin-left: 4px;} /* LEFT NAVIGATION */ #newleftnav ul li{background-image:url("../images/savings/leftNavigationTop.gif"); padding-bottom: 0px !important} #newleftnav ul ul li{background-image:url("../images/savings/leftNavigationMiddle.gif");} #newleftnav ul ul.bottom li{background-image:url("../images/savings/leftNavigationBottom.gif");} #newleftnav ul ul.bottom li.end_of_nav{background-image:url("../images/savings/leftNavigationEnd.gif");} #newleftnav ul li a:hover{background-color: #d1e9d4;} #newleftnav ul li div.active{color: #1B883C; background-color: #d1e9d4} #newleftnav ul li div.active a:link, #newleftnav ul li div.active a:visited {color: #1B883C; background-color: #d1e9d4; padding: 0px; margin: 0px; text-decoration: none} #newleftnav ul li div.active a:active, #newleftnav ul li div.active a:hover {color: #1B883C; background-color: #d1e9d4; padding: 0px; margin: 0px; text-decoration: underline} #newleftnav ul.savingsAccounts li a {color: #1B883C; font-weight: bold; text-decoration: none; background-color: #d1e9d4; padding: 3px 4px; margin-left: 20px; margin-right: 1px;} #newleftnav ul.savingsAccounts li a:hover {text-decoration: underline} #newleftnav ul.savingsAccounts ul li a:hover {text-decoration: none} #newleftnav ul.savingsAccounts ul li a {color: #003399; font-weight: normal; text-decoration: underline; background-color: transparent; padding: 3px 4px; margin-left: 34px;} #newleftnav ul.savingsAccounts ul.bottom li a {padding: 3px 4px; margin-left: 26px;} #newleftnav ul.savingsAccounts ul ul.bottom li a {padding: 3px 4px; margin-left: 38px;} .featured {background-color: #FEEE85; border-top: 1px solid white; border-bottom: 1px solid white} /************************************************************************************************************************************/ /**** TOP LEVEL e.g. Interest rates, Saving guides etc - inherited by next levels unless specified otherwise ************************/ /************************************************************************************************************************************/ #newleftnav ul.top {padding-bottom: 14px} #newleftnav ul.top li {background: none; padding-top: 1px; } #newleftnav ul.top li.end_of_nav {display:none} #newleftnav ul.top li a {display:block; margin-left: 15px; padding: 3px 14px; margin-left: 1px; margin-right: 1px;} #newleftnav ul.top li div.active {padding-left: 14px; padding-top: 4px; padding-bottom: 4px; font-weight: bold; margin-right: 1px; margin-left: 1px;} /************************************************************************************************************************************/ /**** 1 LEVEL e.g. Notice Saver etc - inherited by next levels unless specified otherwise ************************/ /************************************************************************************************************************************/ #newleftnav ul {padding:0; margin:0; list-style: none; background-image: url("../images/bg3.gif"); background-position: bottom; background-repeat: no-repeat; width: 173px; padding-bottom: 1px} #newleftnav ul li {background-position: 6px 0px; background-repeat:no-repeat; padding-top: 2px; padding-bottom: 1px; list-style-type:none; list-style-image: none;} #newleftnav ul li a {display:block; padding: 3px 14px; margin-left: 10px; margin-right: 1px;} #newleftnav ul li div.active {margin-left: 21px; margin-right: 1px; padding: 4px 0px 4px 4px; font-weight: bold;} #newleftnav ul li a:link, #newleftnav ul li a:visited {} #newleftnav ul li a:hover {text-decoration: none; margin-left: 20px; padding-left: 4px;} #newleftnav ul ul ul.bottom {display: block;} #newleftnav ul.bottom li.end_of_nav {background-position: 11px -1px; background-repeat: no-repeat;} /**** 2 LEVEL ****************************************************************************/ #newleftnav ul ul {padding-bottom: 0px; background-image: none; background-color: none;} #newleftnav ul ul li a {margin-left: 24px;} #newleftnav ul ul li div.active {margin-left: 34px;} #newleftnav ul ul li a:hover {text-decoration: none; margin-left: 34px; padding-left: 4px} #newleftnav ul ul.bottom li {background-position: 12px -11px;} #newleftnav ul ul.bottom li a {margin-left: 16px;} #newleftnav ul ul.bottom li div.active {margin-left: 26px;} #newleftnav ul ul.bottom li a:hover {margin-left: 26px; padding-left: 4px} #newleftnav ul ul ul.bottom li.end_of_nav {background-position:24px -1px; background-repeat: no-repeat;} /**** 3 Level *****************************************************************************/ #newleftnav ul ul ul li a {margin-left: 36px;} #newleftnav ul ul ul li div.active {margin-left: 46px;} #newleftnav ul ul ul li a:hover {margin-left: 46px;} #newleftnav ul ul ul.bottom li {background-position: 25px -11px;} #newleftnav ul ul ul.bottom li a {margin-left: 28px;} #newleftnav ul ul ul.bottom li div.active {margin-left: 38px;} #newleftnav ul ul ul.bottom li a:hover {margin-left: 38px; } #newleftnav ul ul ul ul.bottom li.end_of_nav {background-position:37px -1px;} /**** 4 Level ******************************************************************************/ #newleftnav ul ul ul li {background-position: 19px 0px;} #newleftnav ul ul ul ul li a {margin-left: 50px;} /*14*/ #newleftnav ul ul ul ul li div.active {margin-left: 60px;} /*14*/ #newleftnav ul ul ul ul li a:hover {margin-left: 60px;} /*14*/ #newleftnav ul ul ul ul.bottom li {background-position: 38px -11px;} /* 13 */ #newleftnav ul ul ul ul.bottom li a {margin-left: 41px;} /* +13 */ #newleftnav ul ul ul ul.bottom li div.active {margin-left: 51px;}/* +13 */ #newleftnav ul ul ul ul.bottom li a:hover {margin-left: 51px;}/* +13 */ #newleftnav ul ul ul ul ul.bottom li.end_of_nav {background-position:50px -1px;} /* 13 */ /**** 5 Level ******************************************************************************/ #newleftnav ul ul ul ul li {background-position: 32px 0px;} /* 13 */ #newleftnav ul ul ul ul ul li a {margin-left: 64px;} /*14*/ #newleftnav ul ul ul ul ul li div.active {margin-left: 74px;} /*14*/ #newleftnav ul ul ul ul ul li a:hover {margin-left: 74px;} /*14*/ #newleftnav ul ul ul ul ul.bottom li {background-position: 51px -11px;} /* 13 */ #newleftnav ul ul ul ul ul.bottom li a {margin-left: 54px;} /* +13 */ #newleftnav ul ul ul ul ul.bottom li div.active {margin-left: 64px;}/* +13 */ #newleftnav ul ul ul ul ul.bottom li a:hover {margin-left: 64px;}/* +13 */ #newleftnav ul ul ul ul ul ul.bottom li.end_of_nav {background-position:63px -1px;} /* 13 */ /**** 6 Level ******************************************************************************/ #newleftnav ul ul ul ul ul li {background-position: 45px 0px;} /* 13 */ #newleftnav ul ul ul ul ul ul li a {margin-left: 78px;} /*14*/ #newleftnav ul ul ul ul ul ul li div.active {margin-left: 88px;} /*14*/ #newleftnav ul ul ul ul ul ul li a:hover {margin-left: 88px;} /*14*/ #newleftnav ul ul ul ul ul ul.bottom li {background-position: 64px -11px;} /* 13 */ #newleftnav ul ul ul ul ul ul.bottom li a {margin-left: 68px;} /* +14 */ #newleftnav ul ul ul ul ul ul.bottom li div.active {margin-left: 78px;}/* +14 */ #newleftnav ul ul ul ul ul ul.bottom li a:hover {margin-left: 78px;}/* +14 */ #newleftnav ul ul ul ul ul ul ul.bottom li.end_of_nav {background-position:76px -1px;} /* 13 */ /**** 7 Level ******************************************************************************/ #newleftnav ul ul ul ul ul ul li {background-position: 58px 0px;} /* 13 */ #newleftnav ul ul ul ul ul ul ul li a {margin-left: 88px;} /*14*/ #newleftnav ul ul ul ul ul ul ul li div.active {margin-left: 98px;} /*14*/ #newleftnav ul ul ul ul ul ul ul li a:hover {margin-left: 98px;} /*14*/ #newleftnav ul ul ul ul ul ul ul.bottom li {background-position: 77px -11px;} /* 13 */ #newleftnav ul ul ul ul ul ul ul.bottom li a {margin-left: 82px;} /* +14 */ #newleftnav ul ul ul ul ul ul ul.bottom li div.active {margin-left: 92px;}/* +14 */ #newleftnav ul ul ul ul ul ul ul.bottom li a:hover {margin-left: 92px;}/* +14 */ #newleftnav ul ul ul ul ul ul ul ul.bottom li.end_of_nav {background-position: 89px -1px;} /* 13 */ /**** 8 Level ******************************************************************************/ #newleftnav ul ul ul ul ul ul ul li {background-position: 71px 0px;} /* 13 */ #newleftnav ul ul ul ul ul ul ul ul li a {margin-left: 100px;} /*14*/ #newleftnav ul ul ul ul ul ul ul ul li div.active {margin-left: 116px;} /*14*/ #newleftnav ul ul ul ul ul ul ul ul li a:hover {margin-left: 116px} /*14*/ #newleftnav ul ul ul ul ul ul ul ul.bottom li {background-position: 90px -11px;} /* 13 */ #newleftnav ul ul ul ul ul ul ul ul.bottom li a {margin-left: 96px;} /* +14 */ #newleftnav ul ul ul ul ul ul ul ul.bottom li div.active {margin-left: 106px;}/* +14 */ #newleftnav ul ul ul ul ul ul ul ul.bottom li a:hover {margin-left: 106px;}/* +14 */ #newleftnav ul ul ul ul ul ul ul ul ul.bottom li.end_of_nav {background-position: 102px -1px;} /* 13 */ /**** NEXT Level ******************************************************************************/ /* #newleftnav ul ul ul ul ul li {background-position: ((prev_value + 13))px 0px;} #newleftnav ul ul ul ul ul li a, #newleftnav ul ul ul ul ul li div.active {margin-left: ((prev_value + 13))px;} #newleftnav ul ul ul ul ul.bottom li {background-position: ((prev_value + 13))px -12px;} #newleftnav ul ul ul ul ul.bottom li a, #newleftnav ul ul ul ul ul.bottom li div.active {margin-left: ((prev_value + 13))px} #newleftnav ul ul ul ul ul.bottom li.end_of_nav {background-position:((prev_value + 13))px -1px;} */ /* IE 6 and IE 7 bug fix - closing gaps between list items */ #newleftnav li a {display:inline-block;} #newleftnav li a {display:block;}