/*float the main list items*/ #nav li { float: left; margin-right: 2px; display: block; } #nav li ul { display: none; } /*put the subnav below*/ #nav li.on ul { position: absolute; top: 32px; left: 0; background: transparent url(https://www.citylightfinancial.com/ee/themes/citylight/img/subnav-bg.gif) 0 0 repeat-x; height: 36px; width: 950px; } #nav li.off ul { position: absolute; top: 32px; left: 0; background: transparent url(https://www.citylightfinancial.com/ee/themes/citylight/img/subnav-bg.gif) 0 0 repeat-x; height: 36px; width: 950px; } #nav li.on ul { background: transparent url(https://www.citylightfinancial.com/ee/themes/citylight/img/subnav-bg.gif) 0 0 repeat-x; } #nav li.over ul { background: transparent url(https://www.citylightfinancial.com/ee/themes/citylight/img/subnav-bg.gif) 0 0 repeat-x; /*for ie*/ } #nav li.on:hover ul { background: transparent url(https://www.citylightfinancial.com/ee/themes/citylight/img/subnav-bg.gif) 0 0 repeat-x; /*for ie*/ } #nav li a { display: block; padding: 0; } #nav li.on a { color: #f90; } #nav li.off ul a { border: 0; float: left; /*ie doesn't inherit the float*/ color: #f90; width: auto; margin-right: 15px; } #nav li.on ul a { border: 0; float: left; /*ie doesn't inherit the float*/ color: #f90; width: auto; margin-right: 15px; } #nav li.sfhover ul li a { background: transparent url(https://www.citylightfinancial.com/ee/themes/citylight/img/subnav-bg.gif) 0 0 repeat-x; /*for ie - the specificity is necessary*/ } #nav li.on:hover ul a { background: transparent url(https://www.citylightfinancial.com/ee/themes/citylight/img/subnav-bg.gif) 0 0 repeat-x; /*for ie - the specificity is necessary*/ } #nav li.on ul { display: block; } #nav li.sfhover ul { display: block; z-index: 6000; } #nav li.off:hover ul { display: block; z-index: 6000; } #nav li.on a:hover { color: #7d7d7d; } #nav li.off a:hover { color: #7d7d7d; } /*do the image replacement*/ #nav li span { position: absolute; left: -9999px; } #faq a { position: relative; display: block; height: 32px; background: url(https://www.citylightfinancial.com/ee/themes/citylight/img/main-nav3.gif) no-repeat; /*contains all hover states*/} #loan-tools a { position: relative; display: block; height: 32px; background: url(https://www.citylightfinancial.com/ee/themes/citylight/img/main-nav3.gif) no-repeat; /*contains all hover states*/} #loan-products a { position: relative; display: block; height: 32px; background: url(https://www.citylightfinancial.com/ee/themes/citylight/img/main-nav3.gif) no-repeat; /*contains all hover states*/} #free-quote a { position: relative; display: block; height: 32px; background: url(https://www.citylightfinancial.com/ee/themes/citylight/img/main-nav3.gif) no-repeat; /*contains all hover states*/} #home a { position: relative; display: block; height: 32px; background: url(https://www.citylightfinancial.com/ee/themes/citylight/img/main-nav3.gif) no-repeat; /*contains all hover states*/} /*first, put the initial states in place*/ #home a { width: 84px; background-position: 0px 0px; } #free-quote a { width: 107px; background-position: -86px 0px; } #loan-products a { width: 129px; background-position: -195px 0px; } #loan-tools a { width: 108px; background-position: -326px 0px; } #faq a { width: 70px; background-position: -436px 0px; } /*hover states*/ #home.sfhover a { background-position: 0px -32px; } #home:hover a { background-position: 0px -32px; } #home a:hover { background-position: 0px -32px; } #free-quote.sfhover a { background-position: -86px -32px; } #free-quote:hover a { background-position: -86px -32px; } #free-quote a:hover { background-position: -86px -32px; } #loan-products.over a { background-position: -195px -32px; } #loan-products:hover a { background-position: -195px -32px; } #loan-products a:hover { background-position: -195px -32px; } #loan-tools.sfhover a { background-position: -326px -32px; } #loan-tools:hover a { background-position: -326px -32px; } #loan-tools a:hover { background-position: -326px -32px; } #faq.sfhover a { background-position: -436px -32px; } #faq:hover a { background-position: -436px -32px; } #faq a:hover { background-position: -436px -32px; } /*subnav formatting*/ #nav li.on ul a { display: block; background: transparent url(https://www.citylightfinancial.com/ee/themes/citylight/img/subnav-bg.gif) 0 0 repeat-x; font: bold 11px Arial, sans-serif; color: #404040; border-left: 1px #dedede solid; margin: 0px 0px 0px 0px; padding: 0px 10px 0px 10px; } #nav li.off ul a { display: block; background: transparent url(https://www.citylightfinancial.com/ee/themes/citylight/img/subnav-bg.gif) 0 0 repeat-x; font: bold 11px Arial, sans-serif; color: #404040; border-left: 1px #dedede solid; margin: 0px 0px 0px 0px; padding: 0px 10px 0px 10px; } #nav li.on ul a em { font-style: normal; padding-top: 10px; display: block; } #nav li.off ul a em { font-style: normal; padding-top: 10px; display: block; } #nav li.on ul a { background: transparent url(https://www.citylightfinancial.com/ee/themes/citylight/img/subnav-bg.gif) 0 0 repeat-x; } /* ----------------------------------------------------------------------------- IE Bug Fixes ----------------------------------------------------------------------------- */ .loan-programs li { _padding: 1px; } .home-equity li { _padding: 1px; } .mortgage-refinance li { _padding: 1px; } #knowledge-base li { _padding: 1px; } .loan-programs li a { _padding: 0px; _padding-top: 3px; _padding-left: 15px; } .home-equity li a { _padding: 0px; _padding-top: 3px; _padding-left: 15px; } .mortgage-refinance li a { _padding: 0px; _padding-top: 3px; _padding-left: 15px; } #knowledge-base li a { _padding: 0px; _padding-top: 3px; _padding-left: 15px; } .loan-programs li a:hover { _padding: 0px; _padding-top: 3px; _padding-left: 15px; } .home-equity li a:hover { _padding: 0px; _padding-top: 3px; _padding-left: 15px; } .mortgage-refinance li a:hover { _padding: 0px; _padding-top: 3px; _padding-left: 15px; } #knowledge-base li a:hover { _padding: 0px; _padding-top: 3px; _padding-left: 15px; } #magic-quote-form .frm_container { background-color: #FFFFFF; width: 480px; border: 0px solid #000000; } #magic-quote-form .frm_container td { font: normal normal 12px Verdana, Arial, Helvetica, sans-serif; color: #333333; } #magic-quote-form .frm_container i{ font:normal bold 10px Verdana, Arial, Helvetica, sans-serif; color:#666; } select{ font:normal 11px Arial, Helvetica, sans-serif; } #magic-quote-form .frm_container input{ font:normal 11px Arial, Helvetica, sans-serif; } #magic-quote-form .frm_container input{ width: 134px; } .inputRadio{ width: 14px; } #magic-quote-form .frm_container #inputRadio{ width: 14px; } #magic-quote-form .frm_container select{ width: 141px; } #magic-quote-form .frm_container select.selectDate{ width:69px; } #magic-quote-form .frm_container table.Separator td { padding:6px 0 15px 3px; margin:0 0 10px 0; border-bottom:1px dotted #000; font: normal normal 12px Verdana, Arial, Helvetica, sans-serif; } #magic-quote-form .frm_container table.Separator2 td { padding:6px 0 6px 3px; margin:0 0 10px 0; background-color: #1F64A9; color: #FFFFFF; font: normal normal 12px Verdana, Arial, Helvetica, sans-serif; } #magic-quote-form .frm_container span.dnimb{ font:normal 11px Verdana, Arial, Helvetica, sans-serif; color:#788940; letter-spacing:-1px; } #magic-quote-form .frm_container h3{ margin:0; padding:0 0 6px 0; font: normal normal 16px Verdana, Arial, Helvetica, sans-serif; color: #000000; float:left; } #nav li span { position: absolute !important; left: -9999px !important; }