/************************************************************************** Helm Bank USA / HTML ------------------------------------------------------------ Description: CSS for Helm Bank USA Filename: styles.css *************************************************************************/ /************************************************************************** Index of styles used in specific elements and components for the project within this CSS. 1. ELEMENTS 2. CONTAINERS 3. COMMON 4. HOME 5. INTERNALS 6. LIGHTBOX Used in: index.html *************************************************************************/ /*************************************************************************** 1. ELEMENTS: These selectors are only applied to the elements mentioned below. ***************************************************************************/ body {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#454748; background:url(../images/bg_body.gif) repeat-x} a {color:#FF6600; text-decoration:none} a:hover {text-decoration:underline} p {line-height:16px; padding:0 0 13px 0} h1 {font-size:20px; line-height:26px;color:#3b3b3b; padding-bottom:13px;} h2 {font-size:14px; line-height:18px; /*font-style:italic;*/ color:#3b3b3b;padding-bottom:5px;} h3 {font-size:12px; line-height:18px; font-style:italic; color:#898989;} /********************************************************** 2. CONTAINERS: These selectors are only applied to the elements mentioned below. **********************************************************/ #main { width:998px; margin:auto; overflow:hidden;/*background:#00CC33*/} #col_left { width:228px; float:left; height:1%;} #col_right { width:770px; float:left;/*height:1%; overflow:hidden*/} /*************************************************************************** 3. COMMON: These selectors are only applied to the elements mentioned below. ***************************************************************************/ .breakeronly {clear:both;height:0;font-size:0;margin:0;padding:0;} /*************************************************************************** Left Nav ***************************************************************************/ #cntr_logo { width:228px; height:171px; overflow:hidden; background:url(../images/logoHelm.gif) no-repeat; margin:12px 0 0 0} /*************************************************************************** Menu ***************************************************************************/ #cntr_menu #cntr_language {border:0;padding:0 0 3px;} #cntr_menu #cntr_language li {float:left;} #cntr_menu #cntr_language li.breakeronly {clear:both;height:0;font-size:0;margin:0;padding:0;float:none;} #cntr_menu #cntr_language a span {display:none;} #cntr_menu #cntr_language a {background:none no-repeat left bottom;border:0;margin:0;padding:0;display:block;height:48px;width:114px;} #cntr_menu #cntr_language a.active {background-position:left top;} #cntr_menu #cntr_language #lnk_english {background-image:url(../images/bg_btn_english.gif);} #cntr_menu #cntr_language #lnk_espanol {background-image:url(../images/bg_btn_espanol.gif);} #cntr_menu #cntr_spotlight {border:0;padding:5px 0 0 0;} #cntr_menu #cntr_spotlight li {padding:0 0 3px;} #cntr_menu #cntr_spotlight a {background:none no-repeat left bottom;border:0;margin:0;padding:0;display:block;height:35px;width:227px;} #cntr_menu #cntr_spotlight a span {display:none;} #cntr_menu #cntr_spotlight #lnk_helm_on_line {background-image:url(../images/bg_btn_helm_on_line.gif);} #cntr_menu #cntr_spotlight #lnk_demo {background-image:url(../images/bg_btn_demo.gif);} #cntr_menu #cntr_spotlight #lnk_transfer {background-image:url(../images/bg_btn_helm_transfer.gif);} #cntr_menu #cntr_spotlight #lnk_support {background-image:url(../images/bg_btn_helm_support.gif);} #cntr_menu #cntr_spotlight #lnk_helm_on_line_es {background-image:url(../images/bg_btn_helm_on_line_es.gif);} #cntr_menu #cntr_spotlight #lnk_demo_es {background-image:url(../images/bg_btn_demo_es.gif);} #cntr_menu #cntr_spotlight #lnk_transfer_es {background-image:url(../images/bg_btn_helm_transfer_es.gif);} #cntr_menu #cntr_spotlight #lnk_support_es {background-image:url(../images/bg_btn_helm_support_es.gif);} #bg_equal_housing_lender {margin:0 0 5px 0;} #equalHousing {background:url(../images/bg_equal_housing_lender.gif) no-repeat right top; width:200px; height:51px;} .small {padding:25px 0 0 27px; color:#aaaaab;} #cntr_menu { width:228px; margin:12px 0 0 0} #cntr_menu .submenu {background:url(../images/bg_submenu_arrow.gif) no-repeat right center;} #cntr_menu ul { list-style:none; } #cntr_menu ul li { text-align:right;color:#FF6600;*width:228px;*float:left;position:relative;} #cntr_menu ul li .small {font-size:10px;} #cntr_menu ul li .normal {color:#58595b;} #cntr_menu ul li a {display:block; padding:8px 25px 8px 0; border-top: 1px solid #d9d9d9; border-left: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9;} #cntr_menu ul li a:hover {color:#4f4e4e;border-top: 1px solid #afaeae; border-left: 1px solid #d9d9d9; border-right:1px solid #fff; background-color:#f7f7f7; text-decoration:none} #cntr_menu ul li a.active {color:#4f4e4e;border-top: 1px solid #afaeae; border-left: 1px solid #d9d9d9; border-right:1px solid #fff; background-color:#f7f7f7; text-decoration:none} #cntr_menu ul li a.last {border-bottom: 1px solid #d9d9d9;} #cntr_menu ul li ul {background:#f7f7f7;display:none;position:absolute;left:228px;top:0;padding:20px;width:140px;border-top: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9;} #cntr_menu ul li ul li {text-align:left;margin:0 0 6px 0;border:0; line-height:16px} #cntr_menu ul li ul li a {padding:0;margin:0;border:0;} #cntr_menu ul li ul li a:hover {border:0;} /*************************************************************************** News ***************************************************************************/ #cntr_news { width:228px;height:1%; overflow:hidden; margin:16px 0 0 0} #box_news_top { width:228px;height:13px; overflow:hidden; background:url(../images/img_news01.gif) no-repeat} #box_news_middle { width:196px; min-height:80px; padding:0 16px 0 16px; background:url(../images/img_news02.gif) repeat-y} #box_news_middle h1 {color:#898989; font-size:18px} #box_news_bottom { width:228px; height:40px; background: url(../images/img_news03.gif) no-repeat} #box_news_bottom_es { width:228px; height:40px; background: url(../images/img_news03_es.gif) no-repeat} /*************************************************************************** Footer ***************************************************************************/ #cntr_footer { width:100%px; height:83px; overflow:hidden; background-color:#eaeaea; margin:40px 0 0 0} #box_footer { width:955px; margin:auto; padding:34px 0 0 0; color:#4f4e4e; font-size:10px; text-align:center;} #box_footer a {color:#4f4e4e} #box_footer a:hover {color:#ff6600; text-decoration:none} /*************************************************************************** Stage ***************************************************************************/ #cntr_stage { width:755px; height:226px; overflow:hidden; background: url(../images/bg_stage.gif) no-repeat; padding:12px 0 0 15px;} /*************************************************************************** 4. HOME: These selectors are only applied to the elements mentioned below. ***************************************************************************/ #cntr_content_home {width:755px; margin:25px 0 0 15px; height:1%; overflow:hidden} #cntr_content_home a {display:block;float:left;height:163px;width:185px;} #cntr_content_home span {display:none} #icon_conocenos {background:url(../images/icon_conocenos.gif) no-repeat left top; margin:0 4px 4px 0} #icon_helm_transfer {background: url(../images/img_helm_transfer.gif) no-repeat left top; margin:0 4px 4px 0} #icon_helm_support {background: url(../images/icon_helm_support.gif) no-repeat left top; margin:0 4px 4px 0} #icon_beneficios {background: url(../images/icon_beneficios.gif) no-repeat left top; margin:0 0 4px 0} #icon_inversiones {background: url(../images/icon_inversiones.gif) no-repeat left top; margin:0 4px 4px 0} #icon_prestamos {background: url(../images/icon_prestamos.gif) no-repeat left top; margin:0 4px 4px 0} #icon_visausa {background: url(../images/icon_visausa.gif) no-repeat left top; margin:0 4px 4px 0} #icon_visausa_en {background: url(../images/icon_visausa_en.gif) no-repeat left top; margin:0 4px 4px 0} #icon_fdic {background: url(../images/icon_fdic.gif) no-repeat left top; margin:0 0 4px 0} #icon_conocenos_en {background:url(../images/icon_conocenos_en.gif) no-repeat left top; margin:0 4px 4px 0} #icon_beneficios_en {background: url(../images/icon_beneficios_en.gif) no-repeat left top; margin:0 0 4px 0} #icon_inversiones_en {background: url(../images/icon_inversiones_en.gif) no-repeat left top; margin:0 4px 4px 0} #icon_prestamos_en {background: url(../images/icon_prestamos_en.gif) no-repeat left top; margin:0 4px 4px 0} /*************************************************************************** 5. INTERNALS: These selectors are only applied to the elements mentioned below. ***************************************************************************/ #cntr_breadcrumb {width:755px; margin:25px 0 0 15px; font-size:12px; line-height:16px} #cntr_content_internals {width:755px; margin:10px 0 0 15px; height:1%; overflow:hidden} #cntr_content_internals ul {list-style:none; margin:5px 0 5px 15px} #cntr_content_internals ul li { background:url(../images/bullet_grey.gif) no-repeat left top; line-height:14px; padding:0 0 6px 10px; margin:0 0 5px 0 } #col_left_internals { width:550px; float:left; margin:0 15px 0 0} #col_right_internals { width:176px; float:left;} .box_icon_internal {width:176px; height:175px;} .box_icon_internal_top_red {width:176px; height:121px; overflow:hidden; background:url(../images/bg_right_icon_top_red.gif) no-repeat; text-align:center} .box_icon_internal_top_orange {width:176px; height:121px; overflow:hidden; background:url(../images/bg_right_icon_top_orange.gif) no-repeat} .box_icon_internal_bottom {width:156px; height:50px; overflow:hidden; background: url(../images/bg_right_icon_bottom.gif) no-repeat; font-size:18px; line-height:20px; color:#ff6600; padding:5px 5px 0 15px} #col_contact_left { width:250px; margin:0 14px 0 0; float:left} #col_contact_right { width:250px; float:left} /*************************************************************************** 6. LIGHTBOX: These selectors are only applied to the elements mentioned below. ***************************************************************************/ #cntr_lightbox_alert {display:none;} #cntr_lightbox_alert_wrapper {background:#fff url(../images/bg_alert.jpg) no-repeat left top;color:#4f4e4e;font:11px "Lucida Sans",Verdana,Arial,Helvetica,sans-serif;height:216px;padding:111px 32px 0 198px;width:330px;} #cntr_lightbox_alert_wrapper.en {background:#fff url(../images/bg_alert_en.jpg) no-repeat left top;} #cntr_lightbox_alert_wrapper ul {list-style-type:disc;padding:0 0 0 10px;} #cntr_lightbox_alert_wrapper p {padding:0 0 0 4px;} #cntr_lightbox_alert_wrapper a {color:#f60;text-decoration:none;} #cntr_lightbox_alert_wrapper a:hover {text-decoration:underline;} #cntr_lightbox_alert_wrapper input.btn {font:11px "Lucida Sans",Verdana,Arial,Helvetica,sans-serif;margin:10px 0 0 4px;} div#fancy_inner {background:none;border:0;} div#fancy_div {background:#fff;color:#000;} div#fancy_close {height:42px;right:-21px;width:42px;top:-22px;} div#fancy_content {background:#fff;}