/* release 2 */ #affordability, #existingcustomers, #existingcustomers-products, #repayment, #performance, #profile {float:left; width:400px;} /* form ui */ form.tool-suite {width:345px; font-size:116%; margin:0 10px 0 0;} form input.error {border:3px solid #c48786;} form.tool-suite label {color:#000; display:block; margin:0 0 5px 0; z-index:1;} form.tool-suite fieldset div {margin:0 0 15px 0; position:relative;} form.tool-suite input {border-left:2px solid #929292; border-top:2px solid #929292; border-right:1px solid #d9d6d2; border-bottom:1px solid #d9d6d2; width:108px; padding:5px 7px; background:#f3f3f3;} form.tool-suite select {border-left:2px solid #929292; border-top:2px solid #929292; border-right:1px solid #d9d6d2; border-bottom:1px solid #d9d6d2; font-size:100%; width:150px; padding:5px 7px; margin:0;} form.tool-suite input.submit {float:right; padding:0; background:none; margin:0; border:0; width:84px; height:28px;} form.tool-suite fieldset {width:345px;padding:12px 18px; margin:0 0 11px 0; border:3px solid #f5f5f5;} form.tool-suite fieldset.head {padding:12px 18px 5px 18px; border-bottom:0; margin:0;} form.tool-suite fieldset.new {border:3px solid #d9d7d4;} form.tool-suite fieldset.radio {border:0; padding:0; margin:0;} form.tool-suite fieldset.radio label {margin:0 20px 0 0;} form.tool-suite fieldset.radio input {background:none; border:none; float:left; margin:2px 5px 0 0; width:auto; height:auto;} form.tool-suite input.error, form.tool-suite select.error, form.tool-suite fieldset.error {border:3px solid #c48786;} form.tool-suite span.error {color:#c41613; display:block; padding:2px 0; margin:0 0 5px 0;} /* Help Tooltips */ .js form.tool-suite fieldset div.form-tooltip {display:none; width:195px; padding:0; margin:0; background:none; z-index:5; position:absolute; bottom:70px; right:-20px;} .js form.tool-suite fieldset div.form-tooltip h3 {padding:7px 11px 0 11px; margin:0; background:url(/export/system/modules/com.candg.mortgages.toolsuite/resources/images/bg_tooltip_title.png) no-repeat top left; width:195px; height:23px; font-size:80%; color:#fff;} .js form.tool-suite fieldset div.form-tooltip p {padding:5px 11px; margin:0; background:url(/export/system/modules/com.candg.mortgages.toolsuite/resources/images/bg_tooltip_text.png) repeat-y top left; font-size:80%; color:#fff;} .js form.tool-suite fieldset div.form-tooltip img {position:absolute; left:0px; bottom:-23px;} form.tool-suite fieldset div.form-tooltip {color:#000; padding:5px; margin:5px 0; background:#f5f5f5;} form.tool-suite fieldset div.form-tooltip h3 {padding:0; margin:0; font-size:90%;} form.tool-suite fieldset div.form-tooltip p {padding:0; margin:0; font-size:90%;} /* end form ui */ #existingcustomers-panel {float:left; width:250px;} #breadcrumb {color:#626465; padding:0; margin:0 0 10px 0;} #breadcrumb a, #breadcrumb span {float:left; display:block; padding:4px 0 6px 0px;} #breadcrumb #br-home-on {float:left; background:url(../images/breadcrumb_home.gif) no-repeat center left; width:42px; margin:0; display:block; padding:4px 7px 6px 37px;} #breadcrumb #br-home-off {float:left; background:url(../images/breadcrumb_home_off.gif) no-repeat center left; width:42px; margin:0; display:block; padding:4px 7px 6px 37px;} .mortgagetype {background:url(../images/bg_box_mortgagetype.gif) repeat-y top right #fff;} .mortgagetype h1 {width:432px;} .box dl#mortgage-type {background:#f5f5f5; width:239px; height:auto; float:right; padding:3px 0 12px 0; border:0; margin:0;} .box dl#mortgage-type dt, .box dl#mortgage-type dd {display:block; position:relative; padding:7px 12px 7px 12px; font-size:123.1%; border-bottom:1px solid #fff;} .box dl#mortgage-type dt {font-size:151%; padding-bottom:12px; margin:0;} .box dl#mortgage-type dd.on {background:url(/export/system/modules/com.candg.mortgages.toolsuite/resources/images/nav_mortgagetype_bg.gif) repeat-x top left #62aff2; color:#fff;} .box dl#mortgage-type dd img.head {position:absolute; left:-14px; top:0px;} .box dl#mortgage-type dd img.tail {position:absolute; right:-4px; top:0px;} .box #profile-message-new, .box #profile-message-returning {width:234px; float:left; position:relative; padding:20px 15px; margin-bottom:10px;} .box #profile-message-error {background:#f5f5f5; width:264px; float:left; position:relative; border:3px solid #c48786; padding:0 0 20px 0; margin-bottom:10px;} .box #profile-message-error h2 {background:#c41613; width:auto; color:#fff; font-size:210%;padding:4px 15px 5px 15px;} .box #profile-message-error h3 {background:#c41613; width:auto; color:#fff; font-size:123.1%; border-bottom:3px solid #c48786;padding:2px 15px; font-weight:normal;} .box #profile-message-error form {margin:12px 0 0 16px;} .box #profile-message-error p {color:#000; font-size:123.1%; margin:0; line-height:22px; padding:5px 17px;} .box #profile-message-new, .box #profile-message-returning {background:#f5f5f5; border:3px solid #d9d7d4;} .box #profile-message-new h2 {width:206px; color:#000; font-size:123.1%; font-weight:normal;} .box #profile-message-new h3 {font-weight:normal;} .box #profile-message-new img.icon {position:absolute; top:-14px; right:-13px;} .box #profile-message-returning h2 {font-size:123.1%; font-weight:bold;} .box #profile-message-returning img {float:left; margin:0 10px 0 0;} .box #profile-message-returning img.icon {float:none; margin:0; position:absolute; top:-14px; right:-13px;} .box #profile-message-returning img.back {float:none; margin:0 0 15px 0;} .box #profile-message-returning h3.matches {float:left; color:#000; font-size:161.1%; width:180px; height:auto; margin:0 0 15px 0;} .box #profile-message-returning p {color:#000; font-size:123.1%; margin:0; line-height:22px; padding:5px 0;} .box #profile-message-returning p.message {font-size:100%;} .box #profile-message-returning img.view, .box #profile-message-returning input.view {float:none; margin:7px 0 0 0; border:0;} .box #profile-message-no-results {background:#f5f5f5; width:234px; float:left; position:relative; padding:20px 15px; border:3px solid #d9d7d4;} .box #profile-message-no-results p {color:#000; padding:5px 0; font-size:123.1%; margin:0; line-height:22px;} .new-payment {font-size:123.1%;} h2.calculators {color:#006cb7; margin:0 12px; padding:10px 0 15px 0;} #calculator-panel-priority div {position:relative; width:240px; float:left; background:none; margin:0 5px 0 0;} .last {margin-right:0px !important;} #calculator-panel-priority div h2 {background:#72777a; width:187px; min-height:50px; color:#fff; padding:8px 30px 8px 15px; margin:0 3px; border:1px solid #5e6267; position:relative; padding-right:30px;} #calculator-panel-priority div h2 img {position:absolute; bottom:-1px; right:-1px;} #calculator-panel-priority div h3 {background:#b2d4f2; width:200px; min-height:20px; padding:10px 20px 8px 20px; color:#fff; border-bottom:1px solid #5b5f64; position:relative;} #calculator-panel-priority div h3.on {background:#62aff2;} #calculator-panel-priority div p {width:193px; height:57px; padding:10px 20px; margin:0 3px; border:1px solid #d9d7d4;} #calculator-panel-priority div p a {position:absolute; left:14px; bottom:15px;} #calculator-panel div {position:relative; width:240px; float:left; background:none; margin:0 5px 0 0;} #calculator-panel div h2 {background:#fff; line-height:22px; width:187px; min-height:45px; color:#72777a; padding:8px 30px 8px 15px; margin:0 3px; border:1px solid #d9d7d4; position:relative;} #calculator-panel div p {background:#f9f9f9; width:192px; height:28px; padding:10px 20px; margin:0 3px; border:1px solid #d9d7d4; border-top:0px;} #calculator-panel div p a.button {position:absolute; left:14px; bottom:6px;} #calculator-panel div p img.icon {position:absolute; right:11px; bottom:12px;} form#submit-profile, form#submit-profile-error {margin:20px 0 0 0;} form#submit-profile label, form#submit-profile-error label {display:block; text-align:right; width:145px; margin:6px 0 0 0; color:#72777a; font-size:93%;} form#submit-profile input.text, form#submit-profile-error input.text {width:126px; min-height:20px; padding:6px 8px; margin:0 3px 0 0; font-size:123.1%; color:#000;} form#submit-profile-error input.error {border:3px solid #c48786;} form#submit-profile, form#submit-profile-error input.submit {border:none;} form .radio label, form .radio input {float:left; margin-right:5px;} .h3-tl {position:absolute; left:0px; top:-1px; width:4px; height:4px;} .h3-tr {position:absolute; right:0px; top:-1px; width:4px; height:4px;} .h3-bl {position:absolute; left:0px; bottom:-1px; width:4px; height:4px;} .h3-br {position:absolute; right:0px; bottom:-1px; width:4px; height:4px;} .profile-tl {position:absolute; left:-3px; top:-3px; width:4px; height:4px;} .profile-tr {position:absolute; right:-3px; top:-3px; width:4px; height:4px;} .profile-bl {position:absolute; left:-3px; bottom:-3px; width:4px; height:4px;} .profile-br {position:absolute; right:-3px; bottom:-3px; width:4px; height:4px;} a.tooltip {display:inline; cursor:help; position:relative; border-bottom:dotted 1px #1b557d;} a.tooltip:hover {text-decoration:none;} .tool-tip { margin-top:-190px; margin-left:-70px; text-align:left; color:#626465; width: 185px; height:157px; z-index: 2; } .tool-tip p {font-weight:bold; margin:7px 0 0 0;} .tool-tip strong {font-weight:bold;} .tool-title { width:169px; height:18px; font-weight: bold; margin: 0; color: #fff; padding: 8px 8px 4px 8px; background: url(../images/home_flyout_title.png) no-repeat top left; } .tool-text { width:169px; height:112px; padding:8px 6px 8px 10px; background: url(../images/home_flyout_text.png) no-repeat top left; } #calculator-hub .product-intro {width:400px; float:left;} .mortgagetype .product-intro {width:450px; float:left;} #calculator-hub .product-intro p {line-height:20px; font-size:123.1%; color:#000; margin:0;} #calculator-hub h1 {max-width:435px;} /* Product Next Steps */ #product-next-steps, #product-next-steps div {width:465px;} #product-next-steps div h4 {font-size:100%; font-weight:normal; margin:2px 0;} #product-next-steps div h4.sub {margin:7px 0 0 0;} #product-next-steps div p {width:419px; display:block; float:right; height:100%; margin:0 5px 0 0; color:#626465;} #product-next-steps div p.icon {float:left; width:36px; height:100%; margin:0 5px 0 0;} h4.apply-now {width:135px; position:relative; float:right;} h4.apply-now a {width:135px; height:34px; display:inline; position:absolute; top:0px; right:10px;} /* Right Column (col3) Next Steps Boxes */ #col3 #next-steps {} #col3 #next-steps h3 {font-size:161.1%; font-weight:normal; margin:10px 0 0 0;} #col3 #next-steps h4 {color:#000; font-size:123.1%; font-weight:normal; margin:-2px 0 0 0;} #col3 #next-steps img.icon {float:left; margin:0 7px 0 0;} #col3 #next-steps dl {float:left; width:160px; margin:0 0 15px 0;} #col3 #next-steps dl dd, #col3 #next-steps a {display:block;} #col3 #next-steps a.tooltip {display:inline;} #col3 #next-steps a img {margin:0 0 5px 0;} #col3 #next-steps form {margin:10px 0;} #col3 #next-steps form fieldset {margin:0 0 15px 0;} #col3 #next-steps form input.text {width:105px; padding:4px 5px; margin:0 8px 0 0;} #col3 #next-steps form input.submit {border:none;} #col3 #next-steps form h4 {margin:0 0 5px 0;} .box .statement {margin:15px 0;} /* End right col (col3) */ /* Top & Uility Navigation - static states */ #header ul#utility {float:right; width:auto; margin:5px 12px 0 0;} #header ul#utility li {display:inline; margin:0 0 0 8px; font-size:80%; border-left:1px solid #cfcfcf;} #header ul#utility li.first {border-left:0;} #header ul#utility li a {position:static;} #header #top-nav {position:absolute; left:0px; bottom:-65px; background:#f9f9f9; border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; height:37px; width:706px;} #header #top-nav li ul {display:none;} #header #top-nav form {position:absolute; right:-266px; top:-1px; background:url(../images/nav/bg_search_form.gif) no-repeat top left; width:266px; height:39px;} #header #top-nav form label {display:none;} #header #top-nav form input.text {color:#626465; font-size:80%; width:187px; height:17px; padding:4px 6px 2px 6px; margin:7px 0 0 8px; border:1px solid #e3e3e3;} #header #top-nav form input.submit {border:0; width:31px; height:24px; margin:8px 0 0 12px;} #header ul li a {position:absolute; left:0px; top:0px;} #header ul li#mortgages {position:absolute; left:0px; top:-1px; background:url(../images/nav/topnav_mortgages_off.gif) no-repeat top left; width:102px; height:39px;} #header ul li#mortgages a, #header ul li#mortgages-on a {width:102px; height:39px;} #header ul li#savings {position:absolute; left:102px; top:-1px; background:url(../images/nav/topnav_savings_off.gif) no-repeat top left; width:102px; height:39px;} #header ul li#savings a, #header ul li#savings-on a {width:102px; height:39px;} #header ul li#calculators {position:absolute; left:204px; top:-1px; background:url(../images/nav/topnav_calculators_off.gif) no-repeat top left; width:102px; height:39px;} #header ul li#calculators a, #header ul li#calculators-on a {width:102px; height:39px;} #header ul li#guides, #header ul li#guides-on {position:absolute; left:437px; top:6px; background:url(../images/nav/topnav_helpful_guides_off.gif) no-repeat top left; width:106px; height:25px;} #header ul li#guides a {width:106px; height:25px;} #header ul li#why-choose-candg, #header ul li#why-choose-candg-on {position:absolute; left:553px; top:6px; background:url(../images/nav/topnav_why_choose_candg_off.gif) no-repeat top left; width:133px; height:25px;} #header ul li#why-choose-candg a {width:133px; height:25px;} /* top nav hover states */ #header ul li#mortgages:hover {background:url(../images/nav/topnav_mortgages_hover.gif) no-repeat top left; width:102px; height:38px;} #header ul li#savings:hover {background:url(../images/nav/topnav_savings_hover.gif) no-repeat top left; width:103px; height:38px; left:101px;} #header ul li#calculators:hover {background:url(../images/nav/topnav_calculators_hover.gif) no-repeat top left; width:103px; height:38px; left:203px;} /* top nav on states */ #header ul li#mortgages-on {position:absolute; background:url(../images/nav/topnav_mortgages_on.gif) no-repeat top left; width:102px; height:38px; top:-1px; left:0px;} #header ul li#savings-on {position:absolute; background:url(../images/nav/topnav_savings_on.gif) no-repeat top left; width:103px; height:39px; top:-1px; left:101px;} #header ul li#calculators-on {position:absolute; background:url(../images/nav/topnav_calculators_on.gif) no-repeat top left; width:103px; height:38px; top:-1px; left:203px;} /* top nav navigation hover & on - sub nav bg */ #header ul li#mortgages:hover ul {z-index:10; position:absolute; left:0px; top:38px; display:block; background:url(../images/nav/bg_subnav_hover.gif) no-repeat top left; width:708px; height:34px;} #header ul li#mortgages-on ul, #header ul li#mortgages-on:hover ul {z-index:1; position:absolute; left:0px; top:38px; display:block; background:url(../images/nav/bg_subnav.gif) no-repeat top left; width:708px; height:34px;} #header ul li#savings:hover ul {z-index:10; position:absolute; left:-101px; top:38px; display:block; background:url(../images/nav/bg_subnav_hover.gif) no-repeat top left; width:708px; height:34px;} #header ul li#savings-on ul, #header ul li#savings-on:hover ul {z-index:1; position:absolute; left:-101px; top:38px; display:block; background:url(../images/nav/bg_subnav.gif) no-repeat top left; width:708px; height:34px;} #header ul li#calculators:hover ul {z-index:10; position:absolute; left:-203px; top:38px; display:block; background:url(../images/nav/bg_subnav_hover.gif) no-repeat top left; width:708px; height:34px;} #header ul li#calculators-on ul, #header ul li#calculators-on:hover ul {z-index:1; position:absolute; left:-203px; top:38px; display:block; background:url(../images/nav/bg_subnav.gif) no-repeat top left; width:708px; height:34px;} /* calculator: sub nav off states */ #header ul li ul li#mortgage-payment-calculator {position:absolute; left:0px; top:0px; background:url(../images/nav/subnav_repayments_calculator_off.gif) no-repeat top left; width:176px; height:34px;} #header ul li ul li#mortgage-payment-calculator a, #header ul li ul li#mortgage-payment-calculator-on a {width:176px; height:34px;} #header ul li ul li#affordability-calculator {position:absolute; left:176px; top:0px; background:url(../images/nav/subnav_borrowing_calculator_off.gif) no-repeat top left; width:165px; height:34px;} #header ul li ul li#affordability-calculator a, #header ul li ul li#affordability-calculator-on a {width:165px; height:34px;} #header ul li ul li#switching-calculator {position:absolute; left:341px; top:0px; background:url(../images/nav/subnav_switching_calculator_off.gif) no-repeat top left; width:159px; height:34px;} #header ul li ul li#switching-calculator a, #header ul li ul li#switching-calculator-on a {width:159px; height:34px;} #header ul li ul li#savings-calculator {position:absolute; left:500px; top:0px; background:url(../images/nav/subnav_savings_calculator_off.gif) no-repeat top left; width:144px; height:34px;} #header ul li ul li#savings-calculator a, #header ul li ul li#savings-calculator-on a {width:144px; height:34px;} /* calculator: sub nav hover states */ #header ul li ul li#mortgage-payment-calculator:hover {position:absolute; left:0px; top:0px; background:url(../images/nav/subnav_repayments_calculator_hover.gif) no-repeat top left; width:176px; height:34px;} #header ul li ul li#affordability-calculator:hover {position:absolute; left:175px; top:0px; background:url(../images/nav/subnav_borrowing_calculator_hover.gif) no-repeat top left; width:166px; height:34px;} #header ul li ul li#switching-calculator:hover {position:absolute; left:340px; top:0px; background:url(../images/nav/subnav_switching_calculator_hover.gif) no-repeat top left; width:160px; height:34px;} #header ul li ul li#savings-calculator:hover {position:absolute; left:499px; top:0px; background:url(../images/nav/subnav_savings_calculator_hover.gif) no-repeat top left; width:145px; height:34px;} /* calculator: parent on sub nav off states */ #header ul li#calculators-on ul li#mortgage-payment-calculator {position:absolute; left:0px; top:0px; background:url(../images/nav/subnav_repayments_calculator_on.gif) no-repeat top left; width:176px; height:34px;} #header ul li#calculators-on ul li#affordability-calculator {position:absolute; left:176px; top:0px; background:url(../images/nav/subnav_borrowing_calculator_on.gif) no-repeat top left; width:165px; height:34px;} #header ul li#calculators-on ul li#switching-calculator {position:absolute; left:341px; top:0px; background:url(../images/nav/subnav_switching_calculator_on.gif) no-repeat top left; width:160px; height:34px;} #header ul li#calculators-on ul li#savings-calculator {position:absolute; left:500px; top:0px; background:url(../images/nav/subnav_savings_calculator_on.gif) no-repeat top left; width:144px; height:34px;} /* calculator: parent on sub nav on states */ #header ul li#calculators-on ul li#mortgage-payment-calculator:hover, #header ul li#calculators-on ul li#mortgage-payment-calculator-on {position:absolute; left:0px; top:0px; background:url(../images/nav/subnav_repayments_calculator_on_hover.gif) no-repeat top left; width:176px; height:34px;} #header ul li#calculators-on ul li#affordability-calculator:hover, #header ul li#calculators-on ul li#affordability-calculator-on {position:absolute; left:175px; top:0px; background:url(../images/nav/subnav_borrowing_calculator_on_hover.gif) no-repeat top left; width:166px; height:34px;} #header ul li#calculators-on ul li#switching-calculator:hover, #header ul li#calculators-on ul li#switching-calculator-on {position:absolute; left:340px; top:0px; background:url(../images/nav/subnav_switching_calculator_on_hover.gif) no-repeat top left; width:161px; height:34px;} #header ul li#calculators-on ul li#savings-calculator:hover, #header ul li#calculators-on ul li#savings-calculator-on {position:absolute; left:499px; top:0px; background:url(../images/nav/subnav_savings_calculator_on_hover.gif) no-repeat top left; width:145px; height:34px;} /* mortgages: sub nav off states */ #header ul li ul li#am-i-eligible {position:absolute; left:112px; top:0px; background:url(../images/nav/subnav_am_i_eligible_off.gif) no-repeat top left; width:114px; height:34px;} #header ul li ul li#am-i-eligible a, #header ul li ul li#am-i-eligible-on a {width:114px; height:34px;} #header ul li#mortgages ul li#existing-customers {position:absolute; left:225px; top:0px; background:url(../images/nav/subnav_existing_customers_off.gif) no-repeat top left; width:152px; height:34px;} #header ul li#mortgages ul li#existing-customers a, #header ul li#mortgages ul li#existing-customers-on a, #header ul li#mortgages-on ul li#existing-customers a, #header ul li#mortgages-on ul li#existing-customers-on a, #header ul li#savings ul li#existing-customers a, #header ul li#savings ul li#existing-customers-on a, #header ul li#savings-on ul li#existing-customers a, #header ul li#savings-on ul li#existing-customers-on a {width:152px; height:34px;} /* mortgages: sub nav hover states */ #header ul li ul li#am-i-eligible:hover {position:absolute; left:111px; top:0px; background:url(../images/nav/subnav_am_i_eligible_hover.gif) no-repeat top left; width:114px; height:34px;} #header ul li#mortgages ul li#existing-customers:hover {position:absolute; left:224px; top:0px; background:url(../images/nav/subnav_existing_customers_hover.gif) no-repeat top left; width:152px; height:34px;} /* mortgages: sub nav parent on states */ #header ul li#mortgages-on ul li#how-to-apply {position:absolute; left:0px; top:0px; background:url(../images/nav/subnav_how_to_apply_on.gif) no-repeat top left; width:112px; height:34px;} #header ul li#mortgages-on ul li#am-i-eligible {position:absolute; left:112px; top:0px; background:url(../images/nav/subnav_am_i_eligible_on.gif) no-repeat top left; width:113px; height:34px;} #header ul li#mortgages-on ul li#existing-customers {position:absolute; left:225px; top:0px; background:url(../images/nav/subnav_existing_customers_on.gif) no-repeat top left; width:152px; height:34px;} /* mortgages: sub nav on & hover states */ #header ul li#mortgages-on ul li#how-to-apply-on, #header ul li#mortgages-on ul li#how-to-apply:hover {position:absolute; left:0px; top:0px; background:url(../images/nav/subnav_how_to_apply_on_hover.gif) no-repeat top left; width:112px; height:34px;} #header ul li#mortgages-on ul li#am-i-eligible-on, #header ul li#mortgages-on ul li#am-i-eligible:hover {position:absolute; left:111px; top:0px; background:url(../images/nav/subnav_am_i_eligible_on_hover.gif) no-repeat top left; width:114px; height:34px;} #header ul li#mortgages-on ul li#existing-customers-on, #header ul li#mortgages-on ul li#existing-customers:hover {position:absolute; left:224px; top:0px; background:url(../images/nav/subnav_existing_customers_on_hover.gif) no-repeat top left; width:153px; height:34px;} /* savings: sub nav off states */ #header ul li#savings-on ul li#existing-customers {position:absolute; left:112px; top:0px; background:url(../images/nav/subnav_existing_customers_on.gif) no-repeat top left; width:152px; height:34px;} #header ul li#savings-on ul li#how-to-apply {position:absolute; left:0px; top:0px; background:url(../images/nav/subnav_how_to_apply_on.gif) no-repeat top left; width:112px; height:34px;} #header ul li ul li#how-to-apply {position:absolute; left:0px; top:0px; background:url(../images/nav/subnav_how_to_apply_off.gif) no-repeat top left; width:112px; height:34px;} #header ul li ul li#how-to-apply a, #header ul li ul li#how-to-apply-on a {width:112px; height:34px;} #header ul li#savings ul li#existing-customers {position:absolute; left:112px; top:0px; background:url(../images/nav/subnav_existing_customers_off.gif) no-repeat top left; width:152px; height:34px;} #header ul li#savings ul li#existing-customers a, #header ul li#savings ul li#existing-customers-on a, #header ul li#savings-on ul li#existing-customers a, #header ul li#savings-on ul li#existing-customers-on a {width:152px; height:34px;} #header ul li ul li#know-your-interest-rate {position:absolute; left:264px; top:0px; background:url(../images/nav/subnav_interest_rates_off.gif) no-repeat top left; width:116px; height:34px;} #header ul li ul li#know-your-interest-rate a, #header ul li ul li#know-your-interest-rate-on a {width:116px; height:34px;} #header ul li#savings-on ul li#know-your-interest-rate {position:absolute; left:258px; top:0px; background:url(../images/nav/subnav_interest_rates_on.gif) no-repeat top left; width:116px; height:34px;} /* savings: sub nav hover states */ #header ul li ul li#how-to-apply:hover {position:absolute; left:0px; top:0px; background:url(../images/nav/subnav_how_to_apply_hover.gif) no-repeat top left; width:112px; height:34px;} #header ul li#savings ul li#existing-customers:hover {position:absolute; left:111px; top:0px; background:url(../images/nav/subnav_existing_customers_hover.gif) no-repeat top left; width:153px; height:34px;} #header ul li ul li#know-your-interest-rate:hover {position:absolute; left:263px; top:0px; background:url(../images/nav/subnav_interest_rates_hover.gif) no-repeat top left; width:117px; height:34px;} /* savings: on sub nav on & hover */ #header ul li#savings-on ul li#how-to-apply-on, #header ul li#savings-on ul li#how-to-apply:hover {position:absolute; left:0px; top:0px; background:url(../images/nav/subnav_how_to_apply_on_hover.gif) no-repeat top left; width:112px; height:34px;} #header ul li#savings-on ul li#existing-customers-on, #header ul li#savings-on ul li#existing-customers:hover {position:absolute; left:111px; top:0px; background:url(../images/nav/subnav_existing_customers_on_hover.gif) no-repeat top left; width:153px; height:34px;} #header ul li#savings-on ul li#know-your-interest-rate-on, #header ul li#savings-on ul li#know-your-interest-rate:hover {position:absolute; left:257px; top:0px; background:url(../images/nav/subnav_interest_rates_on_hover.gif) no-repeat top left; width:117px; height:34px;}