/*

Theme:  FHB
Author: MVNP

#FHB CSS Style Guide

This interactive guide is connected directly to the live CSS files and will give you a visual representation of each element in the CSS. As the CSS file changes this application will also change. As long as the CSS file is commented correctly this application will  be udpated automatically.

##Global Elements
The following items are the default styles used if no other style is being applied.


**Heading Styles**
```
<div>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
</div>
```
**Paragraph of Text**
```
  <p class="fixie"></p>
```
**Hyperlink Default**
```
  <a href="#">Deafult Hyperlink with hover.</a>
```
**Unordered List Default**
```
<div>
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
  </ul>
</div>
```
*/
@import url("accessibility.css");

/* ---------------------------------------------------------
  General reset
---------------------------------------------------------*/

html, body {
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
  font: 14px/26px "Open Sans", Arial, Helvetica, sans-serif;
  height: 100% !important;
  width: 100%;
  min-width: 1024px;
  min-height: 752px;
  padding-bottom: -5px;
  color: #382e2a;
  background-position: top center;
  background-attachment: fixed;
}

a {
  text-decoration: underline;
  color: #B31F29;
}

a:hover {
  text-decoration: none;
  color: #B31F29;
}

div.category-list h2 a {
  color: #B31F29!important;
}

p.intro {
  color: #666;
  line-height: 1.4em;
  margin-bottom: 1.25em;
}

img {
  border: 0;
  margin: 0;
  padding: 0;
}

.shadow {
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

sidebar.shadow div.tapa {
  max-width: 288px;
}

.clear {
  width: 100%;
  height: 1px;
  clear: both;
}

#container {
  width: 100%;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  background: url(../../images/bg-tapa-personal.jpg) 50px 150px no-repeat;
}

#homepage #container {
  background: url(../../images/bg-tapa-home.jpg) 50px 515px no-repeat;
}

#personal #container {
  background: url(../../images/bg-tapa-personal.jpg) 50px 590px no-repeat;
}

#personal.product-overview #container {
  background: url(../../images/bg-tapa-personal.jpg) 50px 150px no-repeat;
}

#business #container {
  background: url(../../images/bg-tapa-business.jpg) 50px 590px no-repeat;
}

#business.product-overview #container {
  background: url(../../images/bg-tapa-business.jpg) 50px 150px no-repeat;
}

#wealthmanagement #container {
  background: url(../../images/bg-tapa-wealth.jpg) 50px 590px no-repeat;
}

#wealthmanagement.product-overview #container {
  background: url(../../images/bg-tapa-wealth.jpg) 50px 150px no-repeat;
}

#onlineservices.product-overview #container {
  background: url(../../images/bg-tapa-personal.jpg) 50px 150px no-repeat;
}

#onlineservices.category-overview #container {
  background: url(../../images/bg-tapa-personal.jpg) 50px 590px no-repeat;
}

#customerservice.customer-service #container {
  background: url(../../images/bg-tapa-personal.jpg) 50px 150px no-repeat;
}

#careers #container {
  background: url(../../images/bg-tapa-personal.jpg) 50px 150px no-repeat;
}

input, textarea, select {
  vertical-align: middle;
  font: 12px/15px "Open Sans", Arial, Helvetica, sans-serif;
  color: #555;
  height: 30px;
}

textarea, select {
  border: solid #999 1px;
}

textarea {
  overflow: auto;
  resize: vertical;
  vertical-align: top;
}

form, fieldset {
  margin: 0;
  padding: 0;
  border-style: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {

  -webkit-appearance: button;
  cursor: pointer;
  font: 700 12px/15px "Open Sans", Arial, Helvetica, sans-serif;
  height: 30px;
  border: none;
  background-color: #FCB126;
  color: #444;
  text-transform: uppercase;
  margin: 0 6px;
  *overflow: visible;
}

input[type="search"] {
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-decoration {
  display: none;
}

q {
  quotes: none;
}

q:before, q:after {
  content: '';
  content: none;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

p {
  margin: 0 0 1.2em;
}

.accessibility {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 99999;
}

.accessibility:focus {
  position: static;
  width: auto;
  height: auto;
}


/*
##Header Container##
The header sits above the navigation. This is also where an alert notification can be displayed when actived.
```
<header>
    <content>
        <h1><a href="#">First Hawaiian Bank</a></h1>
        <nav>
        <ul class="navUtility">
            <li><a href="#">Customer Service</a></li>
            <li><a href="#">Find Branch/ATM</a></li>
            <li><a href="#">Inside FHB</a></li>
            <li><a href="#">Careers</a></li>
w            <li><a href="#" id="jp">???</a></li>
            <li class="last" id="li_setStartPage"><a href="#">Set Start Page</a></li>
        </ul>
        </nav>
    </content>
</header>
```
*/

header {
  width: 100%;
  height: 80px;
  display: block;
  background-color: #f1f1f1;
  text-align: center;
  margin: -21px 0 0 0 !important;
  padding: 0;
  position: relative;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

header content {
  width: 974px;
  height: 50px;
  display: block;
  margin: 0 auto;
  padding: 0;
}

header h1 a {
  display: block;
  width: 369px;
  height: 78px;
  text-indent: -9999px;
  background: url(../../images/logo.png) no-repeat;
  float: left;
  margin: 2px 2px 0px 0px;
}

header .navUtility {
  font-size: 85%;
  float: right;
  margin-top: 17px;
  text-align: right;
}

header .navUtility li.last a {
  background: url("../../images/cross.png") 0px 2px no-repeat;
  padding-left: 20px;
}

header .navUtility li a:hover {
  text-decoration: underline;
  color: #b31f29;
}

header .navUtility li #japanese {
  font-family: "Arial Unicode MS", Arial, sans-serif\0/;
  /* IE8 Japanese Character Fix */
  color: #FFF\0/;
}

header form {
  float: right;
}

header h2 {
  width: 36px;
  height: 29px;
  float: right;
  text-indent: -9999px;
  margin: 0;
  padding: 0;
  display: block;
}

header h2 a {
  display: block;
}

#inner-container {
  width: 974px;
  padding: 0;
  margin: 0 auto;
 /* padding-bottom: 390px;
   height of footer + 25px */
}

.home #inner-container {
  /*padding-bottom: 500px;*/
}

.product-overview #inner-container {
  padding-bottom: 395px;
}

.product-overview .sysLoanSelector #inner-container {
  padding-bottom: 450px;
}


/*

##Main Navigation
*/

#main-nav {
  width: 974px;
  height: 67px;
  margin: 0 auto;
  background: #f50584;
  font-weight: normal;
  margin-bottom: 25px;
}

#main-nav nav {
  margin-left: 16px;
}

#navPrimary li a.drop:hover {
  /*background-color: #A0BF3B !important;*/
}


/* ##Sidebar
Styles applied to the left column or sidebar.

The styles applied are as follows:
width: 304px;
background: url(../../images/bg-sidebar.png) repeat;
border: 1px solid #d4d196;
-moz-border-radius: 5px;
border-radius: 5px;
display: block;

Code for the html is:
```
<sidebar class="shadow">
    <div class="tapa">
        <h3>Online Banking</h3>
    </div>
</sidebar>
```
*/

sidebar {
  background: url(../../images/bg-sidebar.png) repeat;
  display: block;
  float: right;
  padding: 19px 16px 11px 19px;
  margin: 0px;
}

.home sidebar {
  float: left;
  margin-bottom: 10px;
}

.customer-service sidebar {}

//*sidebar .tapa {
background:url("../../images/bg-tapa.png") repeat-x;
background-position:bottom left;
width:268px;
padding:15px 18px;

}
* //
.home sidebar .tapa {
  /* height: 522px; */

  height: 537px;
}
sidebar form {
  margin: 0 !important;
  padding: 0 !important;
}
form#find-a-branch-form-email input.input-box {
  width: 194px;
}
sidebar .component {
  padding-bottom: 6px;
  margin-bottom: 12px;
}
sidebar .component a {
  text-decoration: none;
  font: 600 13px/17px "Open Sans", Arial, Helvetica, sans-serif;
  color: #333;
}
sidebar .component a:hover {
  text-decoration: underline;
  color: #B31F29;
}
sidebar #online-banking a, sidebar .online-banking a, #open-an-account a {
  text-decoration: none;
  font: 400 13px/17px "Open Sans", Arial, Helvetica, sans-serif;
  color: #B31F29;
}
sidebar #online-banking a:hover, #open-an-account a:hover, sidebar .online-banking a:hover {
  text-decoration: underline;
}
sidebar .faq {
  width: 269px;
}
sidebar .faq a {
  text-decoration: none;
  font: 600 13px/17px "Open Sans", Arial, Helvetica, sans-serif;
  color: #333;
}
sidebar .faq a:hover {
  text-decoration: underline;
  color: #B31F29;
}
.sidebar form {
  margin: 0px;
  padding: 0px;
  border-style: none;
}
sidebar form .input-box {
  width: 163px;
  padding: 0px 9px;
  background: none repeat scroll 0% 0% #FFF;
  border-width: 1px 0px 1px 1px;
  border-color: #FFF;
  border-style: solid;
  /*text-transform: capitalize;*/

  float: left;
  height: 30px;
  box-sizing: border-box;
}
sidebar .applyonlineform {
  width: 162px;
  float: left;
  overflow: hidden;
}
sidebar form .dropdown {
  height: 30px;
  border: none;
  float: left;
  background: #FFF;
}
sidebar form select {
  padding-left: 5px;
}
sidebar form .submit-btn {}
sidebar h3 {
  font: 700 17px/20px "Open Sans", Arial, Helvetica, sans-serif;
  color: #333;
  text-transform: uppercase;
  margin: 0px 0px 8px;
  display: block;
}
sidebar .right {
  float: right;
}
sidebar .left {
  float: left;
}
sidebar current-rates {
  display: block;
  margin: 0;
  padding: 0;
}
sidebar current-rates .rate-btn {
  height: 34px;
  text-indent: -9999px;
  display: block;
  float: left;
  margin-right: 3px;
}
sidebar current-rates .rate-btn:hover, sidebar current-rates a.active {
  background-position: 0px -34px !important;
}
sidebar current-rates #btn-mortgages {
  background: url(../../images/btn-mortgages.png) top left no-repeat;
  width: 109px;
}
sidebar current-rates #btn-loans {
  background: url(../../images/btn-loans.png) top left no-repeat;
  width: 72px;
}
sidebar current-rates #btn-savings {
  background: url(../../images/btn-savings.png) top left no-repeat;
  width: 81px;
  margin-right: 0px;
}
sidebar current-rates #rate1 {
  width: 133px;
  border-right: 1px solid #dbcb89;
}
sidebar current-rates #rate2 {
  width: 134px;
}
sidebar current-rates .rates {
  float: left;
  height: 43px;
  /* line-height: 1.5em; */

  padding-top: 0;
}
sidebar current-rates .year {
  font-size: 15px;
  padding-right: 5px;
}
sidebar current-rates .rates .rate-num {
  /* font-family: Times, "Times New Roman", Georgia, Serif;*/

  float: left;
  text-align: left;
  background: none;
  padding-left: 0px;
  background: none;
  color: #fff;
  font-weight: normal;
  font-size: 16px;
}
.rate-num {
  text-align: left;
  background: #fff;
  color: #333;
  padding
}
a.rate-lnk {
  top: 10px;
  position: relative;
}
sidebar current-rates p {
  margin: 0;
  padding: 0;
}
#curratesholder {
  height: 132px;
  width: 269px;
}
#curratesholder #ratesdetails, #curratesholder .ratesdetails {
  position: relative;
  top: 10px;
  text-align: left;
  padding: 0px 0px 0px 10px;
  margin-bottom: 12px;
}
#ul_top_comps a.rate-lnk img {
  width: 268px;
  height: 26px;
}
#ratesdetails #mortgagerates-line1, .ratesdetails #mortgagerates-line1 {
  font: 300 16px/20px "Open Sans", Arial, Helvetica, sans-serif;
}
#ratesdetails #mortgagerates-line2, .ratesdetails #mortgagerates-line2 {
  font: 600 28px/28px "Open Sans", Arial, Helvetica, sans-serif;
}
#ratesdetails #loanrates-line1, .ratesdetails #loanrates-line1 {
  font: 300 16px/20px "Open Sans", Arial, Helvetica, sans-serif;
}
#ratesdetails #loanrates-line2, .ratesdetails #loanrates-line2 {
  font: 600 18px/28px "Open Sans", Arial, Helvetica, sans-serif;
}
#ratesdetails #savingsrates-line1, .ratesdetails #savingsrates-line1 {
  font: 300 16px/20px "Open Sans", Arial, Helvetica, sans-serif;
}
#ratesdetails #savingsrates-line2, .ratesdetails #savingsrates-line2 {
  font: 600 28px/28px "Open Sans", Arial, Helvetica, sans-serif;
}
sidebar current-rates #btn-seeallrates {
  background: url(../../images/btn-seeallrates.png) top left no-repeat;
  width: 138px;
  height: 38px;
  margin: 0 auto;
  text-indent: -9999px;
  display: block;
}
sidebar ul {
  font-size: 16px;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
sidebar ul li {
  display: block;
  padding: 3px 0px 3px 13px;
  background: url('../../images/plus-sidebar-ul.png') no-repeat scroll 0px 6px transparent;
  text-decoration: none;
  font: 600 13px/17px "Open Sans", Arial, Helvetica, sans-serif;
  color: #333;
  margin-bottom: 6px;
}
sidebar ol {
  margin: 0px;
  font-size: 16px;
  padding: 0px;
  list-style-type: none;
}
sidebar ol li {
  display: block;
  padding: 3px 0px 3px 13px;
  background: url('../../images/plus-sidebar-ul.png') no-repeat scroll 0px 6px transparent;
  text-decoration: none;
  font: 600 13px/17px "Open Sans", Arial, Helvetica, sans-serif;
  color: #333;
  margin-bottom: 6px;
}
sidebar dt.title a {
  display: block;
  padding: 3px 0px 3px 13px;
  background: url("../../images/plus-sidebar-ul.png") 0px 6px no-repeat;
  text-decoration: none;
  font: 600 13px/17px "Open Sans", Arial, Helvetica, sans-serif;
  color: #333;
}
sidebar dt.title a:hover {
  text-decoration: underline;
  color: #B31F29;
}
sidebar #sysTopFaqs {
  padding-bottom: 22px;
  margin-bottom: 12px;
  width: 269px;
}
sidebar #sysTopFaqs dl.clearfix {
  border: none;
  margin-bottom: 7px;
}

/* end Layout - SIDEBAR
 */

/* group Layout - CONTENT
 */
#content {
  width: 634px;
  float: left;
  margin 0;
  padding: 0;
}
.home #content {
  float: right;
}
#content p {
  line-height: 1.4em;
}
#content ul {
  line-height: 2em;
}
.home #content {
  margin: 0;
}
#content .pageTitle {
  font-size: 28px;
  margin: 11px 0 6px 0 !important;
  padding: 0;
}
.customer-service #content .pageTitle {
  font: 45px/50px "Open Sans", Arial, Helvetica, sans-serif;
}
#content .floating-btn {
  float: right;
  margin-left: 25px;
  top: -30px;
  right: 10px;
  position: relative;
}
#content #floating-div {
  width: 196px;
  border-bottom: 8px solid #FFB718;
  float: right;
  text-align: center;
  color: #333;
  background-color: #fff;
  font: 16px/20px "Open Sans", Arial, Helvetica, sans-serif;
  margin: 10px 0px 20px 20px;
}
#content #floating-div .tapa {
  background-position: bottom left;
  width: 180px;
  padding: 12px;
}
#content #floating-div h3 {
  margin: 0 0 10px 0;
  padding: 0;
  font: 700 20px/20px "Open Sans", Arial, Helvetica, sans-serif;
}
#content #floating-div ul {
  list-style-type: none;
  margin: 0 0 0 -13px;
  padding: 0;
}
#content #floating-div ul li {
  text-align: center;
}
#content #floating-div a {
  text-decoration: underline;
  padding-left: 13px;
  background: url("../../images/arrow-cta.gif") 0px 5px no-repeat;
}
#content #floating-div a:hover {
  text-decoration: none;
}
#rotating-banners {
  margin: -23px -24px 5px 0px !important;
  padding: 0;
  padding-left:90px;
}
#rotating-banners p {
  float: left;
  width: 219px;
  /* width of banner + 24 margin */

  height: 107px;
  margin: 0;
  padding: 0;
  display: block;
}
#rotating-banners img {
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
#rotating-banners img:hover {
  opacity: .9;
  filter: brightness(110%);
  -webkit-filter: brightness(1.2);
  -moz-filter: brightness(1.2);
  -o-filter: brightness(110%);
  -ms-filter: brightness(110%);
}
#rotating-banners p.last {
  width: 195px !important;
  /*for IE */
}
.home #rotating-banners-two {
  height: 145px;
  clear: both;
}
.home #rotating-banners-two div {
  float: left;
  width: 469px;
}
.home #rotating-banners-two div.bnr-left {
  margin-right: 35px;
}
.category-overview #main-content {
  /*padding: 0 0 32px 0;
  /*margin: 0px -24px 42px 0px; /* -24 to offset right margin of category lists */

  padding: 0 0 10px 0;
  margin: 0px -24px 10px 0px;
  /* -24 to offset right margin of category lists */
}
.customer-service #main-content {}
.customer-service #main-content h3 {
  color: #83b01f;
  font-size: 20px;
  font-weight normal;
}
.customer-service #below-content {
  border-top: 1px solid #999;
  padding-top: 30px;
  margin-top: 30px;
}
#category-nav {
  font-size: 14px;
  list-style-type: none;
  margin: 0 0 34px 0;
  padding: 0 0 6px 0;
  height: 20px;
}
#category-nav h3 {
  display: none;
}
#category-nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  letter-spacing: -.01em;
}
#category-nav li {
  float: left;
  margin: 0 26px 0 0;
  padding: 0 0 0 13px;
  background: url("../../images/arrow-category-nav.png") 0px 5px no-repeat;
}
#category-nav li a {
  color: #8c8c8d;
}
#category-nav li.current, #category-nav li:hover {
  background: url("../../images/arrow-category-nav-current.png") 0px 5px no-repeat;
}
#category-nav li.current a, #category-nav li a:hover {
  color: #FFF;
}
.category-list {
  float: left;
  width: 219px;
  margin: 0;
  padding: 0;
  color: #555;
}
.category-list h2 {
  font: 700 17px/21px "Open Sans", Arial, Helvetica, sans-serif;
  color: #333;
  margin: 0 0 12px 0;
}
.category-list h2 a {
  font: 700 17px/21px "Open Sans", Arial, Helvetica, sans-serif;
  color: #444;
  margin: 0px 0px 8px;
  text-transform: uppercase;
  text-decoration: underline
}
.category-list h2 a:hover {
  color: #B31F29;
  text-decoration: none;
}
.category-list ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 195px;
}
.category-list ul li {
  margin: 0;
  padding: 0px 0px 8px 17px;
  background: url('../../images/plus-sidebar-ul.png') no-repeat scroll 0px 6px transparent;
}
.category-list ul li a {
  text-decoration: none;
  font: 600 15px/17px "Open Sans", Arial, Helvetica, sans-serif;
  color: #333;
}
.category-list ul li a:hover {
  color: #B31F29;
  text-decoration: underline;
}
.customer-service .col1, .customer-service .col2 {
  width: 191px !important;
  padding-right: 28px;
}
.customer-service .col3 {
  width: 191px !important;
}
.customer-service .alert-table {
  border: none;
  padding: "4px";
  border-spacing: 3px;
  border-collapse: separate;
}

/*
##Footer
All styles related to the footer are listed with examples below. *Inline styles added to preview code only for documentation purposes.

Social icons are using a sprite located at the following location: /en/includes/themes/FHB/images/social-icons.gif

* Facebook: background-position: 0px 0px;
* Facebook Hover: background-position: 0px -22px;
* Twitter: background-position: -33px 0px;
* Twitter Hover: background-position: -33px -22px;

```
<footer style="height:70px;">
  <content style="width:90%">
    <div id="footerline1">
      <ul id="social-icons">
        <li><strong>CONNECT WITH US:</strong></li>
        <li><a href="#" target="_blank" id="fb" class="external">Facebook</a></li>
        <li><a href="#" target="_blank" id="twit" class="external">Twitter</a></li>
      </ul>
      <div class="right">
        <ul>
          <li><a href="#">Apply Online</a></li>
          <li><a href="#">Forms</a></li>
          <li class="last"><a href="#">Calculators</a></li>
          <!-- <li class="last"><a href="#">eBrochures</a></li> -->
        </ul>
      </div>
    </div>
  </content>
</footer>
```
*/
footer {
  width: 100%;
  /*height: 390px;*/
  clear: both;
  background: url(../../images/bg-footer.png);
  position: absolute;
  bottom: 0;
  margin-top: -5px;
}
.home footer {
  width: 100%;
 /* height: 396px;*/
  clear: both;
  position: absolute;
  bottom: 0;
  margin-top: -5px;
}
footer a {
  color: #777;
  text-decoration: underline;
}
footer a:hover {
  color: #b31f29;
  text-decoration: underline;
}
footer content {
  width: 974px;
  height: 45px;
  margin: 0 auto;
  display: block;
}
#footerline1 {
  height: 36px;
  padding-top: 15px;
}
#footerline1 #social-icons {
  float: left;
  color: #777;
  font: 12px'Open Sans', Arial, Helvetica, sans-serif;
  letter-spacing: 0.2em;
  width: 400px;
  height: 36px;
  margin: 0;
  padding: 0;
}
#footerline1 #social-icons li {
  display: inline-block;
  list-style-type: none;
  margin-right: 8px;
  padding-top: 5px;
}
#footerline1 #social-icons li a {
  display: block;
  width: 26px;
  height: 22px;
  background: url(../../images/social-icons.png) 0px 0px no-repeat;
  text-indent: -9999px;
  position: relative;
  top: -5px;
}
#footerline1 #social-icons li #fb:hover {
  background-position: 0px -22px;
}
#footerline1 #social-icons li #twit {
  background-position: -33px 0px;
}
#footerline1 #social-icons li #twit:hover {
  background-position: -33px -22px;
}

#footerline1 #social-icons li #instagram {
  background-position: -153px 0px;
}
#footerline1 #social-icons li #instagram:hover {
  background-position: -153px -24px;
}

#footerline1 #social-icons li #linkedin {
  background-position: -118px 0px;
}
#footerline1 #social-icons li #linkedin:hover {
  background-position: -118px -24px;
}

#footerline1 #social-icons li #youtube {
  background-position: -75px 0px;
  width:35px;
}
#footerline1 #social-icons li #youtube:hover {
  background-position: -75px -24px;
  width:35px;
}
#footerline1 .right ul {
  height: 18px;
  text-align: right;
  margin: 0;
  padding: 0;
  font: 600 18px/22px"Open Sans", Arial, Helvetica, sans-serif;
}
#footerline1 .right ul li {
  display: inline;
  height: 18px;
  padding: 0px 15px;
}
#footerline1 .right li.last {
  border: none;
  padding-right: 0px;
}
#footerline2 {
  height: 33px;
  padding-top: 17px;
}
#footerline2 .navUtility {
  float: left;
}
#footerline2 .navUtility li {
  padding: 0 5px;
}
#footerline2 .navUtility li a {
  font: 600 14px/30px "Open Sans", Arial, Helvetica, sans-serif;
  color: #777;
  text-decoration: none;
}
#footerline2 .navUtility li a:hover {
  font: 600 14px/30px "Open Sans", Arial, Helvetica, sans-serif;
  color: #b31f29;
  text-decoration: underline;
}
#footerline2 .navUtility li.first {
  padding-left: 0px;
}
#footerline2 .right {
  width: 434px;
  text-align: right;
  float: right;
  color: #777;
  font: 600 14px/17px "Open Sans", Arial, Helvetica, sans-serif;
}
#footerline2 .right #ehl {
  background: url(../../images/logo-ehl.gif) no-repeat;
  padding-left: 21px;
  margin: 0 22px 0 31px;
  background-position: 0 3px;
  font: 600 14px/17px "Open Sans", Arial, Helvetica, sans-serif;
  color: #777;
}
#editable-footer {
  color: #FFF;
  font-size: 11px;
  height: 70px;
}
#editable-footer h4 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 11px;
}
#editable-footer p {
  margin: 0;
  padding-top 10px;
}
#disclosures {
  color: #666666;
  font-size: 10px;
  padding-top: 10px;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: bold !important;
}
#disclosures .boxed {
  padding: 10px 14px;
  border: 1px solid #FFF;
}
#disclosures .member-fdic p {
  padding-bottom: 5px;
}
#disclosures .insurance-disclosure {
  margin-bottom: 15px;
}
.noFDIC #disclosures .member-fdic {
  display: none;
}

/* **HTML 5 Elements**
We have a reset here that just removes some styles that can get applied by a browswer by default.
```
article, aside, canvas, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; margin: 0; padding: 0; }
```
 */
article, aside, canvas, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
  margin: 0;
  padding: 0;
}
#searchForm {
  background: none repeat scroll 0% 0% #febf34;
  width: 250px;
  height: 60px;
  overflow: hidden;
  padding: 3px 25px 4px;
  float: right;
}
#searchForm fieldset {
  padding: 0;
  border: 0;
}
#searchForm input.text {
  background: none repeat scroll 0% 0% #febf34;
  font: 600 19px/22px "Open Sans", Arial, Helvetica, sans-serif;
  color: #fff;
  border: 0px none;
  border-radius: 0px;
  margin: 0px;
  padding: 18px 5px 20px;
  text-align: right;
  width: 205px;
  float: left;
  text-transform: capitalize;
  letter-spacing: 1px;
}
#searchForm .submit {
  background: url('../../images/sprite.png') no-repeat scroll -1px 0px transparent;
  width: 19px;
  height: 20px;
  float: right;
  margin: 22px 4px -2px 0px;
  padding: 0px;
  border: 0px none;
  border-radius: 0px;
  cursor: pointer;
  overflow: hidden;
  text-indent: -9999px;
}
#crumbList {
  margin: 0;
  padding: 0;
  color: #848062;
  font-size: 12px;
}
#crumbList li {
  display: inline;
}
#crumbList li a {
  color: #5D5D5D;
  padding-right: 21px;
  font: 700 12px/20px "Open Sans", Arial, Helvetica, sans-serif;
  text-decoration: none;
  background: url('../../images/crumb-arrow.gif') no-repeat scroll 100% 6px transparent;
  text-transform: uppercase;
}
#crumbList li a:hover, #crumbList li.last a {
  color: #FFB718;
}
#crumbList li.last a {
  background: none;
}
.navUtility {
  overflow: hidden;
  margin: 0;
  padding: 0;
  font: 16px/26px "Open Sans", Arial, Helvetica, sans-serif;
}
.navUtility li a {
  text-decoration: none;
  color: #6a6a6a;
}
.navUtility li {
  display: inline;
  margin: 0;
  padding: 0 16px 0 0;
  list-style: none;
  font-size: 1em !important;
}
#navPrimary {
  /*overflow: hidden;  */

  padding: 0;
  list-style: none;
  font-weight: bold;
  color: #fff;
  clear: both;
  float: left;
  display: inline;
  font-size: 14px;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  margin: 18px 0 0 0;
}
#navPrimary li {
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  margin: 0px 0px 2px;
  margin-right: 10px;
  font: 700 12px/13px "Open Sans", Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: #FCB126;
}
#navPrimary li.last {
  margin: 0px;
}
#navPrimary li a.drop {
  display: block;
  padding: 4px 8px;
  color: #fff;
  text-decoration: none;
  font: 600 19px/22px "Open Sans", Arial, Helvetica, sans-serif;
  border-bottom: 4px solid #B31F29;
  height: 37px;
}
#navPrimary li a.drop:hover, #navPrimary li.current a.drop {
  color: #fff;
  border-bottom: 4px solid #fec23c;
}
.moreResults {
  border-top: 2px solid #e6e6e6;
  padding-top: 1.5em;
}
.moreResults ul {
  /*float: right;*/

  overflow: hidden;
  margin: 0;
  padding: 0;
}
.moreResults li {
  display: inline;
  padding: 0 .25em;
  list-style: none;
  border-right: 1px solid #b6b6b6;
}
.moreResults li.resultsFound {
  padding-right: .5em;
}
.moreResults li.navNext {
  border-right: 0;
}
.moreResults li.navPrev {
  border-right: 0;
}
.moreResults li a {
  padding: 0;
}
a#svAsset {
  font-size: 1.4em;
}

/*
##Gallery Styles
Add the the total number of pixels added by borders and padding here to includes/display_objects/gallery/htmlhead/gallery.cfm

border: 0px solid #ccc;
```
<div id="svGallery" class="fixie">
  <ul>
    <li><a href="#"><img></a>
  </ul>
</div>
```

*/
#svGallery {
  border-top: 2px solid #e6e6e6;
  padding-top: 1.8em;
}
#svGallery li a {
  border: 0px solid #ccc;
  /* Add the the total number of pixels added by borders and padding here to includes/display_objects/gallery/htmlhead/gallery.cfm */
}
.svCalendar table {
  margin-top: 0;
}
.svCalendar th {
  background: #0c2846;
  vertical-align: middle;
  color: #fff;
}
.svCalendar th a, .svCalendar th a:hover {
  background: #0c2846;
  color: #fff;
}
.svCalendar th a:hover {
  color: #2e7aa7;
}
.svCalendar tr.dayofweek td {
  background: #2e7aa7;
  color: #fff;
  font-weight: normal;
}
.svCalendar th, .svCalendar td {
  border: 1px solid #fff;
}
.svCalendar td {
  background: #e9f3f7;
}
#svCalendarNav td {
  vertical-align: middle;
}
#svCalendarNav td a {
  display: block;
  margin-bottom: 1px;
  padding: 3px 4px;
  background: #ff3405;
  color: #fff;
}
#svCalendarNav td a:hover {
  background: #0c2846;
  text-decoration: none;
}
#svRSSFeeds form {
  background: transparent;
}
li.boxItemHeader {
  /* Link of items inside dragable boxes */

  color: #2e7aa7;
  padding-left: 10px;
  background: url(../../images/pointer_red_sm.gif) no-repeat left .25em;
}
a.boxItemHeader {
  /* Link of items inside dragable boxes */

  color: #2e7aa7;
}
#svAddNewFeed {
  padding: 0 !important;
  background: transparent !important;
}
#svAddNewFeed button {
  /* !important used to override dragable_feeds.css */

  background: #2e7aa7 !important;
  font-size: 11px !important;
}
#features {
  overflow: hidden;
}
#features dl {
  float: left;
  clear: none;
  width: 213px;
  margin: 0 16px 0 0;
}
#features dt {
  font-size: 2em;
  font-weight: bold;
  letter-spacing: -0.025em;
}
#features dt a {
  color: #232323;
}
#features dt a:hover {
  text-decoration: none;
}
#features dd {
  font-size: 1.1em;
}
#features dd p {
  margin: -3px 0 8px;
  line-height: 15px;
}
#features dd a {
  font-weight: bold;
}
#features dd.image {
  float: none;
  margin: 0 0 1.7em;
  position: relative;
}

/*
## Features Images
Recommened size to use for these are 213px x 120px.
```
<div id="features" class="fixie">
  <dd class="images"><img width="213" height="120"></dd>
</div>
```
*/
#features dd.image img {
  /* recommended size: */
  /*width: 213px;*/
  /*height: 120px;*/
}
.home aside .svIndex {
  margin: 0;
}
.home aside .svIndex li {
  padding: 0 1em;
}
.home aside .svIndex h3 {
  display: block;
  padding: 0 1em;
  margin-bottom: 1em;
  line-height: 40px;
  font-size: 1.2em;
  text-transform: uppercase;
  color: #fff;
  background: #ff3405;
}
.home aside .svIndex li h3 {
  background: none;
  line-height: 1.1;
  padding: 0;
  margin-bottom: .75em;
}
.home aside .svIndex dl {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #d6d6d6;
}
.home aside .svIndex dl.last, .home aside .svIndex dl:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.home aside .svIndex dt {
  margin: 0 0 .25em;
  padding: 0;
  font-size: 1.2em;
  font-weight: normal;
  line-height: 1;
}
.home aside .svIndex .releaseDate {
  margin: 0 0 .5em;
  font-size: 1em;
  text-transform: uppercase;
  color: #979797;
}
.home aside .svIndex dd, .home aside .svIndex p {
  margin: 0 1em .25em 0;
  padding: 0;
  font-size: 1.1em;
  color: #434343;
}
.home aside .svIndex dd.summary {
  margin: 0 0 .5em;
}
.home aside .credits, .home aside .tags, .home aside .ratings, .home aside .credits {
  font-size: 10px;
  color: #999 !important;
}
.home aside .svIndex dl.hasImage .image {
  margin: 0 .5em 0em 0;
}
.home aside .svIndex dl.hasImage .image img {
  width: 50px;
}
.home aside .svIndex dd p {
  margin: 0;
  padding: 0;
  line-height: inherit;
}
.home aside .svIndex span.readMore a {
  display: none;
}
#svSearchResults ul {
  font-size: 13px;
}
#svSearchResults a {
  color: #555;
}
#svSearchResults dl {
  padding: 10px;
}
#svSearchResults dl:hover {
  background-color: #f6f5e4;
}
#svSearchResults dl.first {
  border-top: 1px dotted #ccc;
  margin-top: 20px;
}
#svSearchResults dt {
  margin: 0;
  padding: 0;
}
#svSearchResults dt a {
  font-weight: bold;
}
#svSearchResults dd {
  margin: 0 0 0 20px;
  padding: 10px 0 0 0;
}
#svSearchResults dd p {
  margin: 0;
  padding: 0;
}
#svSearchResults dd.readMore {
  text-align: right;
}
#svSearchResults dd.readMore a {
  background: url("../../images/arrow-floating-div-ul.png") 0px 4px no-repeat;
  padding-left: 12px;
  font-size: 14px;
}
.svIndex dl, .svIndex>ul li {
  margin: 0;
  padding: 0;
  border-bottom: 1px dotted #ccc;
}
sidebar #sysRelatedFaqs {
  width: 269px;
}
#sysRelatedFaqs dl {
  border: none;
}

/* hides dotted line on related faqs */
#sysRelatedFaqs dl {
  border: none;
}

/* removed dotted unlderine from faqs */
aside .svIndex dl, .svIndex>ul li {
  margin: .5em 0;
  padding: .5em 0 .5em;
}
.svIndex dl.hasImage .image, .svIndex>ul li.hasImage .image {
  float: none;
}
.content .svIndex {
  margin-top: 2em;
}
.content .svIndex dt, .content .svIndex>ul li h3 {
  font-size: 1.6em;
  margin-bottom: .5em;
}
.svIndex .releaseDate {
  text-transform: uppercase;
  color: #777;
  font-size: 1em !important;
  margin-top: 12px;
}
.svIndex dd, .svIndex .summary {
  line-height: 1.2;
}
.content .svIndex .credits, .content .svIndex .comments, .content .svIndex .tags, .content .svIndex .rating {
  line-height: 20px;
  /* acommodate height of stars */
}
.svSlides {
  overflow: hidden;
  width: 650px;
  height: 380px !important;
}
.svSlides h3 {}
.svSlides dl, .svSlides ul>li {}
.svSlides ul {}
dl.clearfix {
  background: none !important;
}
.home .svSlideshow {
  position: relative;
  width: 627px;
  overflow: hidden;
  padding: 30px 30px 10px;
  margin: 0 0 2.2em;
  color: #b4dffa;
  background: #102e50 url(../../images/bg-hero.jpg) no-repeat !important;
  border: 0;
}
.home .svSlides {
  position: relative;
  border: 0;
  z-index: 1;
  padding: 0;
  margin: 0 !important;
}
.home .svSlides dl, .home .svSlides>ul li {
  width: auto !important;
  padding-bottom: 0;
  margin-right: 0;
  border: 0;
  font-size: 1em;
  background: transparent !important;
  /*for IE 6/7*/
}
.home .svSlides dt, .home .svSlides>ul li h3 {
  margin-bottom: .35em !important;
  font-size: 2.6em !important;
  font-weight: bold;
  letter-spacing: -0.025em;
  line-height: 1;
  color: #fff;
}
.home .svSlides .releaseDate {
  color: #abdffa;
  font-size: 11px !important;
  font-weight: normal;
  margin-bottom: .5em !important;
}
.home .svSlides dt a, .home .svSlides>ul li h3 a {
  color: #fff;
}
.home .svSlides dd, .home .svSlides>ul li {
  margin-bottom: 1.1em;
  letter-spacing: -0.025em;
  font-size: 12px !important;
  line-height: 1.2em;
  padding: 0;
}
.home .svSlides .image {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  float: none;
  padding: 0;
  border: 3px solid #1c5981;
}
.home .svSlides .image img {
  display: block;
}
.home .svSlides dd.credits {
  font-size: 11px !important;
  color: #fff;
}
.home .svSlides dd.tags {
  margin-left: 1em;
  font-size: 11px !important;
}
.home .svSlides .readMore a {
  font-size: 11px !important;
  font-weight: bold;
  color: #fff;
  height: 2.1em;
  line-height: 2.1em;
  border: none;
  padding: 0 1em;
  display: block;
  width: 60px;
  text-align: left;
  padding-right: 22px;
  margin-top: .75em;
  background: #2e7aa7 url(../../images/arrows_white.gif) no-repeat 6.8em 50%;
  -webkit-border-radius: 11px;
  -moz-border-radius: 11px;
  border-radius: 11px;
}

/* ##Pager Styles
Width is set dynamically in /display_ojects/feedslideshow/htmlhead/slideshow.jquery.cfm based on the current width of the page.
```
<div class="home">
  <ol class="svPager">
    <li><a href="#">Pager Item One</a></li>
    <li><a href="#">Pager Item Two</a></li>
  </ol>
</div>
```
*/
.home .svPager {
  text-align: center;
  line-height: 2;
  z-index: 200;
}
.home ol.svPager {
  position: relative;
  text-align: center;
  margin: 10px 0;
  padding: 0;
  list-style: none;
}
ol.svPager a {
  color: #fff;
  background: #0c243a;
  -webkit-border-radius: 4px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
ol.svPager li.activeLI a, ol.svPager a:hover {
  background: #ff3405;
  text-decoration: none;
}
#svSessionTools p#welcome {
  font-weight: bold;
  color: #ff3405;
}
#svCategories li {
  margin: 0;
  padding: 0;
}
#svCategories li a {
  margin: 0;
  padding: 0;
}
#favoriteList li {
  margin: 0;
  padding: 0;
  font-size: 1.1em;
}
#favoriteList li a {
  margin: 0;
  padding: 0;
}
#header .logo {
  margin: 13px 24px 0 3px;
}
#header-promo, .header-promo {
  display: block;
  margin: 0;
  padding: 0;
}
#header-promo p, .header-promo p {
  margin: 0;
  padding 0;
  font: 58px/61px "Open Sans", Arial, Helvetica, sans-serif;
  line-height: 1.1em;
  letter-spacing: -0.002em;
  color: #FFF;
}
#header-promo sup, .header-promo sup {
  font-size: 25px;
  position: relative;
  top: -10px;
}
.home #header-promo, .home .header-promo {
  /* height: 325px; */
  /** adjusted to bottom align with home sidebar **/

  height: 300px;
}
.category-overview #header-promo, .category-overview .header-promo {
  height: 255px;
}
.product {
  display: block;
  padding: 17px 15px 30px;
  background: none repeat scroll 0% 0% #FFF;
  margin: 0px 0px 30px;
  overflow: hidden;
}

/* alternating background colors */
.odd-product {}
.last-product {}
.product h3 {
  margin: 0;
  padding: 0;
  font: 700 22px/28px "Open Sans", Arial, Helvetica, sans-serif;
  color: #382E2A;
  margin: 0px 0px 15px;
}
.product h3 sup {
  /* font-size: 8px; */

  font-size: .6em;
  * position: relative;
  * top: -.5em;
}
.product a {
  color: #83b01f;
  text-decoration: underline;
}
.product a:hover {
  text-decoration: none !important;
}
.product a.cta {
  background: url("../../images/arrow-cta.gif") no-repeat;
  background-position: 100% 3px;
  padding-right: 12px;
  margin-right: 6px;
  text-transform: uppercase;
  word-spacing: 2px;
}
.product .thumb {
  float: left;
  width: 142px;
  margin-right: 12px;
  padding-top: 2px;
}
.product .product-desc {
  /* width: 458px; */

  display: block;
  float: left;
  font: 16px/26px "Open Sans", Arial, Helvetica, sans-serif;
  color: #382E2A;
}
.product .product-desc {
  width: 100%
}
.product .product-desc p {
  line-height: 26px !important;
}
.product .thumb~.product-desc {
  width: 450px;
}

/* ##eBrochure
**eBrochure Category**
Styles that apply to the eBrochure Category pages.

*/
.ebrochure-category {
  display: block;
  margin: 0;
  padding: 0;
  border-top: 1px solid #cdcbb2;
  padding: 20px 11px 0px 11px;
  background: url("../../images/tapa-ebrochure-category.gif") bottom left repeat-x;
}
.ebrochure-category h3 {
  margin: 0;
  padding: 0;
  font-size: 18px;
  color: #444;
  margin-bottom: 15px;
}
.ebrochure-category h3 sup {
  font-size: .6em;
  * position: relative;
  * top: -.5em;
}
.ebrochure-category a {
  color: #83b01f;
  text-decoration: underline;
}
.ebrochure-category a:hover {
  text-decoration: none;
}
.ebrochure-category a.cta {
  background: url("../../images/arrow-cta.gif") no-repeat;
  background-position: 100% 3px;
  padding-right: 12px;
  font-weight: bold;
  margin-right: 6px;
}
.ebrochure-category .thumb {
  float: left;
  width: 142px;
  margin-right: 12px;
  padding-top: 2px;
}
.ebrochure-category .desc {
  /* width: 458px; */

  display: block;
  float: left;
  font-size: 14px;
  line-height: 1.4em;
}
.ebrochure-category .desc {
  width: 100%
}
.ebrochure-category .thumb~.desc {
  width: 458px;
}

/*
**eBrochure Product**
Styles that apply to the eBrochure Product pages.

*/
h5 {
  display: block;
  text-align: center;
  font-size: 13px;
  text-transform: uppercase;
  margin: 0;
  padding: 25px 0 16px 0;
}
.ebrochure-product {
  display: block;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
  padding: 20px 11px 0px 11px;
  background: #fff;
}
.ebrochure-product h3 {
  margin: 0;
  padding: 0;
  font-size: 18px;
  color: #444;
  margin-bottom: 15px;
}
.ebrochure-product h3 sup {
  font-size: .6em;
  * position: relative;
  * top: -.5em;
}
.ebrochure-product a {
  color: #008500;
  text-decoration: underline;
}
.ebrochure-product a:hover {
  text-decoration: none;
}
.ebrochure-product a.cta {
  background: url("../../images/arrow-cta.gif") no-repeat;
  background-position: 100% 3px;
  padding-right: 12px;
  font-weight: bold;
  margin-right: 6px;
}
.ebrochure-product .thumb {
  float: left;
  width: 43px;
  margin-right: 12px;
  padding-top: 2px;
}
.ebrochure-product .categorythumb {
  float: left;
  width: 136px;
  margin-right: 12px;
  padding-top: 2px;
}
.ebrochure-product .categorydesc {
  width: 450px;
  margin-bottom: 10px;
}
.ebrochure-product .categorydesc {
  display: block;
  float: left;
  font-size: 14px;
  line-height: 1.4em;
}
.ebrochure-product .desc {
  display: block;
  float: left;
  font-size: 14px;
  line-height: 1.4em;
}
.ebrochure-product .desc {
  width: 100% margin-bottom: 10px;
}
.ebrochure-product .thumb~.desc {
  width: 458px;
  margin-bottom: 10px;
}
.ebrochure-product ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.ebrochure-product ul li {
  float: left;
}
.ebrochure-product ul li.pdf {
  background: #fff url("../../images/icon-pdf.png") 0px 2px no-repeat;
  padding-left: 20px;
}
.ebrochure-product ul li.email {
  background: #fff url("../../images/icon-email.png") 0px 2px no-repeat;
  padding-left: 24px;
}
#ebrochure #content .cta {
  background: url("../../images/arrow-cta.gif") no-repeat;
  background-position: 100% 5px;
  color: #B31F29 !important;
}

/*
**eBrochure Product**
Styles that apply to the eBrochure Shadowbox styles.
*/
.ebrochure-shadowbox {
  padding: 0px 0px 0px 10px;
}
.ebrochure-shadowbox span {
  float: left;
  margin-right: 10px;
  display: block;
  width: 160px;
}
.ebrochure-shadowbox input {
  width: 234px;
}
.startover {
  background: url(/en/assets/Image/startover.png) no-repeat;
  width: 105px;
  height: 37px;
}
.hide {
  visibility: hidden;
}
.rates {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  color: #555;
  overflow: hidden;
}
.rates h4 {
  margin-bottom: 5px;
  padding-bottom: 0px;
  font: 600 24px/26px "Open Sans", Arial, Helvetica, sans-serif;
}
.rates table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}
.rates table td, .rates table th {
  padding: 3px 6px 0 0;
}
.rates table thead th {
  font-size: 14px;
  font-weight: bold;
}
.rates table thead th:first-child {
  border: none;
}
.rates table tbody td {
  color: #555555;
  font-size: 12px;
  font-weight: normal;
  padding: 7px 5px 7px 0;
  /*  border-bottom: 0px solid #cccccc;*/

  border: 0px;
}
.rates table tbody td:first-child {
  border-bottom: 0px solid #cccccc;
}
.rates #last-updated,
.rates .last-updated {
  font-size: 12px;
  height: 15px !important;
  font-style: italic;
  width: 100% !important;
  margin: 0 0 20px !important;
}
.rate-disclaimer {
  margin: 0;
  padding 0;
  line-height: 1.1em;
}
.rate-disclaimer p {
  font-size: 11px;
  padding: 0 0 10px !important;
  width: 100% !important;
  height: 100% !important;
}
sidebar .component .rates {
  background-color: #fff;
  padding: 10px;
  border-bottom: 8px solid #FFB718;
  width: 250px;
}
sidebar .component .rates .rate-num span {
  font: 700 29px/30px "Open Sans", Arial, Helvetica, sans-serif;
  color: #333;
}

/* ##Promo Slideshow Styles
These styles are used on all slideshow elements.
 */
.svSlides .summary {
  margin: 0;
  padding: 0;
}
.svSlides .summary #header-promo, .svSlides .summary .header-promo {
  margin: 0 !important;
  padding: 0 !important;
  width: 632px !important;
  position: relative;
}
.svSlideshow {
  margin-bottom: 34px;
}
.svSlideshow .svSlides .title {
  display: none;
}
.svSlideshow .svPager {
  font-size: 12px;
  list-style-type: none;
  padding: 0px;
  margin: 30px 0;
  width: 634px;
}
.svSlideshow .svPager li {
  display: inline;
  list-style: none;
  padding: 0 30px 0 0;
  color: #999;
  margin: 0;
}
.svSlideshow .svPager li a {
  padding-left: 13px;
  background: url("../../images/arrow-category-nav.png") 0px 3px no-repeat;
  font: 600 12px/15px "Open Sans", Arial, Helvetica, sans-serif;
  color: #FFF;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0px 0px 4px #000;
}
.svSlideshow .svPager li a:hover {
  color: #FCB126;
  text-decoration: underline;
  background: url("../../images/arrow-category-nav.png") 0px 3px no-repeat;
}
.svSlideshow .svPager li.activeLI a {
  color: #fff;
  background: url("../../images/arrow-category-nav.png") 0px 3px no-repeat;
  text-decoration: underline;
}
.sysCalculators .product a {
  text-decoration: underline;
  line-height: 24px;
}

/* ##Default CTA link with no parent section
```
<a class="cta" href="#">Call to action link</a>
```

*/
a.cta {
  color: #A0BF3B;
  background: url("../../images/arrow-green.gif") no-repeat;
  background-position: 100% 2px;
  padding-right: 12px;
  font-weight: bold;
  margin-right: 6px;
}

/* ##PAGE TITLE & H2 & LINKS
**Personal Pages**
These styles overwrite the default ones for all personal pages.
```
<div id="personal">
  <div id="content">
    <div class="pageTitle">
      <div class="category-list">
        <h2>H2 Title Inside a Category Listing</h2>
      </div>
    </div>
  </div>
</div>
```
```
<div id="personal">
  <div class="product">
    <a href="#">Product Link on the Personal Pages</a>
  </div>
</div>
```
```
<ul id="personal">
  <li id="navPersonal">
    <div class="subheader">
    <a href="#">Product Link on the Personal Pages</a>
  </li>
</ul>
```
```
<div id="personal">
  <a class="cta" href="#">Call to action link</a>
</div>
```
*/
#content .pageTitle, #content .pageTitle, .product a, li .subheader a, a.cta {
  font: 700 14px/18px "Open Sans", Arial, Helvetica, sans-serif;
  color: #B31F29;
  text-decoration: none;
  position: relative;
}
#content .pageTitle {
  font: 50px/53px "Open Sans", Arial, Helvetica, sans-serif;
  position: relative;
  color: #333;
  left: -4px;
  width: 676px;
  padding-bottom: 20px;
}
#content .pageTitle sup {
  top: -1.5em;
  font-size: 20px;
}
.fhb-investment {
  padding-top: 21px !important;
}

/* ##CTA Links (Arrows)
Arrows added to call to action links. These are change color based on the main section they are in.
```
<div id="personal">
  <a class="cta" href="#"><span class="cta">Learn More</span></a>
</div>
<div id="business">
  <a class="cta" href="#"><span class="cta">Learn More</span></a>
</div>
<div id="wealthmanagement">
  <a class="cta" href="#"><span class="cta">Learn More</span></a>
</div>
<div id="onlineservices">
  <a class="cta" href="#"><span class="cta">Learn More</span></a>
</div>
```
*/
a.cta {
  background: url("../../images/arrow-cta.gif") no-repeat;
  background-position: 100% 2px;
}
a.cta:hover {
  text-decoration: underline;
}

/* ##Section Background Images
Example sections and what the background image would look like.

*/
#personal {
  background: url("../../images/P.jpg") center 50px no-repeat;
}
#business {
  background: url("../../images/B.png") center 50px no-repeat;
}
#wealthmanagement {
  background: url("../../images/WM.jpg") center 50px no-repeat;
}
#onlineservices {
  background: url("../../images/ST.jpg") center 50px no-repeat;
}
.product-overview {
  background: none !important;
}

/* ##Leaving Site Notification Panel Styles */
.ui-dialog {
  background-color: #fff;
  padding: 5px;
  box-shadow: 0pt 0pt 5px #000;
  line-height: 1.4em;
  font-size: 12px;
}
.ui-icon.ui-icon-closethick {
  color: #fff;
}
.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix {
  background: #85141B;
  ;
  padding: 5px;
}
.ui-dialog-content {
  padding: 8px;
}
.ui-dialog-title {
  color: #fff;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  text-shadow: 1px 1px 2px #888888;
}
.ui-icon-closethick {
  color: #fff;
  font-size: 12px;
  float: right;
  padding-top: 2px;
}

/* ##FAQ Styles

```
<div class="faqDisplay">
    <dl class="multiquestion active">
        <dt class="question">
          <span class="QIcon">Q: </span>What types of insurance services does First Hawaiian Bank provide?
        </dt>
        <dd class="answer" style="display: block;">
            <span class="AIcon">A: </span><p>First Hawaiian Bank's many insurance programs are&nbsp;designed to provide you with a solid financial future and peace of mind by giving you the protection you need in the event of death, disability, or a condition that requires long-term care. For the individual, insurance augments a comprehensive financial plan. For businesses, insurance enhances employee compensation programs and protects the business in the event of a principal?s untimely passing.</p>
            <div class="permalink"><a href="#">Link To FAQ</a></div>
    </dd>
    </dl>
    <dl class="multiquestion active">
         <dt class="question">
           <span class="QIcon">Q: </span>Why should I choose First Hawaiian Bank for my insurance needs?
         </dt>
        <dd class="answer" style="display: block;">
          <span class="AIcon">A: </span><p>Our experienced professionals offer personal assistance to help you select the types of insurance that are best suited for your personal, business and estate planning needs at the most competitive price.</p>
        <div class="permalink"><a href="#">Link To FAQ</a></div>
        </dd>
    </dl>
</div>
```
*/
dl.multiquestion dt {
  text-decoration: underline;
}
dl.multiquestion dt:hover {
  text-decoration: none;
  color: #B31F29;
}
dl.multiquestion .permalink {
  visibility: hidden;
  display: none;
}
dl.multiquestion dd {
  margin: 0px 0px 20px 0px;
}
dl.multiquestion .AIcon {
  float: left;
  display: none;
}
dl.multiquestion .QIcon {
  font-weight: bold;
}
#openAccountMenu {
  z-index: 100000000;
  width: 162px;
}

}
.dropdown width-fix:hover {
  width: 10px;
}
iframe#shadowbox_content {
  overflow: hidden;
}

/* Overwrite for the black bar underneath the tabs on the Mortgage Selector */
.sysMortgageSelector #content2 div {
  border-bottom: none !important;
}

/* ---- Button Styles BEGIN ----*/
.btn-style {
  border: solid 0px #d6d6d6;
  color: #000000;
  height: 30px;
  font-size: 12px;
  font-weight: bold;
  background: #fec854;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fec854), color-stop(100%, #ffb921));
  background: -moz-linear-gradient(top, #fec854 0%, #ffb921 100%);
  background: -webkit-linear-gradient(top, #fec854 0%, #ffb921 100%);
  background: -o-linear-gradient(top, #fec854 0%, #ffb921 100%);
  background: -ms-linear-gradient(top, #fec854 0%, #ffb921 100%);
  background: linear-gradient(top, #fec854 0%, #ffb921 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec854', endColorstr='#ffb921', GradientType=0);
  cursor: pointer;
  text-align: left;
  padding: 0 0 0 0;
}
.login-btn {
  width: 106px;
  margin-left: 0;
}
.go-btn {
  width: 73px;
}
.find-btn {
  width: 106px;
}
.apply-btn {
  width: 106px;
  margin-left: 0;
}
.login-btn .icon {
  background: url(/en/assets/Image/Landing_Page_Images/sprite-btn.png) no-repeat -1px -23px;
  width: 11px;
  height: 12px;
  position: relative;
  right: 14px;
  float: right;
  top: 1px;
}
.find-btn .icon {
  background: url(/en/assets/Image/Landing_Page_Images/sprite-btn.png) no-repeat -3px -84px;
  width: 11px;
  height: 14px;
  position: relative;
  right: 14px;
  float: right;
}
.apply-btn .icon {
  background: url(/en/assets/Image/Landing_Page_Images/sprite-btn.png) no-repeat -1px -67px;
  width: 14px;
  height: 12px;
  position: relative;
  right: 14px;
  float: right;
  top: 2px;
}
.go-btn .icon {
  background: url(/en/assets/Image/Landing_Page_Images/sprite-btn.png) no-repeat -10px -52px;
  width: 6px;
  height: 10px;
  position: relative;
  right: 14px;
  float: right;
  top: 3px;
}

/* ---- Button Styles END ----*/

/* ---- Last Modified 11262014 by RA ----*/

/* ---- ADA Styles START ----*/
.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
}
.element-invisible.element-focusable:active, .element-invisible.element-focusable:focus {
  position: static !important;
  clip: auto;
  overflow: visible;
  height: auto;
}
.content-note {
  font-size: 12px;
  color: #686868;
  line-height: 16px;
  font-family: Arial, Helvetica, sans-serif;
}
.highlight-text {
  font-size: 10pt;
  color: #008500;
  display: none;
}
.nav-links {
  color: #6a6a6a;
}
.flowchart-header {
  background: #6a6a6a;
}
#content2 .tabButtonDiv {
  background: #6a6a6a;
}
.services-block {
  color: black;
}
.table-holder h2 {
  color: black;
}
.section .text-holder h2 {
  color: #b31f29;
}
.text-block .left-area h2 sup {
  font-size: 0.8em;
}
.text-center {
  text-align: center;
}

/* ---- ADA Styles END ----*/

/* ---- Login Component ----*/
#loginholder {
  height: 137px;
  width: 269px;
  overflow: hidden;
}
#ul_login {
  position: static;
}
#ul_login_comps li {
  display: inline-block;
  padding: 0px;
  background: none 0px 0px no-repeat;
  margin-bottom: 0px;
  list-style: none;
  list-style-type: none;
}
a#btn-personal.rate-btn {
  background: url('/en/includes/themes/FHB-New/images/btn-personal.png') top left no-repeat;
  width: 134px;
  margin-right: 3px;
}
a#btn-business.rate-btn {
  background: url('/en/includes/themes/FHB-New/images/btn-business.png') top left no-repeat;
  width: 132px
}
sidebar .rate-btn {
  height: 34px;
  text-indent: -9999px;
  display: block;
  float: left;
  margin-right: 0px;
}
sidebar form .input-box {
  width: 153px;
  padding: 0px;
  background: none repeat scroll 0% 0% #FFF;
  border-width: 1px 0px 1px 1px;
  border-color: #fec854;
  border-style: solid;
  /* text-transform: capitalize; */
  float: left;
  height: 30px;
  box-sizing: border-box;
  margin-left: 4px;
}
sidebar form #selectaction {
  width: 153px;
  padding: 0px 9px;
  background: none repeat scroll 0% 0% #FFF;
  border-width: 1px 0px 1px 1px;
  border-color: #fec854;
  border-style: solid;
  /* text-transform: capitalize; */
  float: left;
  height: 30px;
  box-sizing: border-box;
  margin-left: 4px;
}
div.left.tiny {
  margin: 6px 6px
}
a.right.tiny {
  margin: 6px 6px
}
div#open-an-account.component {
  height: 60px;
}
div#find-a-branch.component {
  height: 65px;
}
a#bizloginbtn {
  float: left;
}
#biz-login-form {
  width: 269px;
}
.nolibg {
  list-style: none;
  background-size: 0px;
  padding: 0px;
}
sidebar .component {
  padding-bottom: 6px;
  margin-bottom: 7px;
}
.fhb-button {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.734375em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  display: block;
  border-radius: 0;
  line-height: 26px;
}
a.fhb-sidebar-button {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 0.734375em !important;
  font-weight: 800 !important;
  color: #464646 !important;
}
.fhb-button.yellow, .fhb-button .yellow {
  padding: 5px 14px 5px 14px;
  background: #fec954;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f50584 0%, #f50584 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec954', endColorstr='#ffba21', GradientType=0);
  /* IE6-9 */
}
.fhb-button.red {
  width: 152px;
  height: 40px;
  background-color: #b31f29 !important;
  color: white;
  text-decoration: none !important;
  font-size: 1rem;
  margin-bottom: 0px;
  padding-top: 10px;
  box-sizing: border-box;
}
.fhb-button.icon {
  width: 106px;
  height: 30px;
  text-align: left;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 7px 14px;
}
.fhb-button.icon:after {
  content: '';
  width: 15px;
  height: 15px;
  display: block;
}
.fhb-button.icon.icon.lock:after {
  content: '';
  background: url("/en/includes/themes/FHB-New/svg/icon-login.svg");
}
.fhb-button.icon.icon.marker:after {
  content: '';
  background: url("/en/includes/themes/FHB-New/svg/icon-find.svg");
}
.fhb-button.icon.icon.check:after {
  content: '';
  background: url("/en/includes/themes/FHB-New/svg/icon-apply.svg");
}
.fhb-button.icon.icon.chevron:after {
  content: '';
  background: url("/en/includes/themes/FHB-New/svg/icon-chevron.svg");
}
.fhb-button.icon.icon.chevron-sm:after {
  content: '';
  background: url("/en/includes/themes/FHB-New/svg/icon-chevron-sm.svg");
}
.fhb-button.full-width {
  width: 100%;
  text-align: right;
  font-size: 0.71875rem;
  font-weight: 800;
  padding: 7px 14px 6px 14px;
}
.fhb-button.rates-btn {
  margin: 0;
  text-align: right;
  width: 240px;
  font-size: 0.8rem;
  font-weight: 800;
}
.fhb-button.box {
  display: inline-block;
  width: 223px;
  margin-right:24px;
}
.fhb-button.box span {
  display: inline-block;
  width: 195px;
}
.fhb-button.box span.heading {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  color: #323232;
  text-align: left;
  background: #e4e4e4;
  padding: 6px 0px 5px 10px;
  
  width: 223px;
  letter-spacing: 0;
  box-sizing: border-box;
}
.fhb-button.box span.yellow {
  text-align: right;
  font-size: 0.71875rem;
  font-weight: 800;
  padding: 7px 14px 8px 14px;
}
a.fhb-button {
  text-decoration: none;
}
a.fhb-button:hover {
  text-decoration: none !important;
}
a.fhb-button.banner-promo {
  box-sizing: border-box;
  height: 25px;
  width: 223px;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0 14px;
}
a.slideshow-learn {
  width: 129px !important;
  height: 37px !important;
  font-size: 10.5px;
  padding-top: 3px;
  margin-top: 15px;
  box-sizing: border-box;
}

/* Call Center Sidebar */
.call-cell {
  padding: 26px 0 21px 0;
  background-color: white;
}
.call-cell.center {
  text-align: center;
}
.call-cell h2 {
  font-size: 1rem;
  line-height: 1.1rem;
  font-weight: bold;
  color: #382e2a;
  padding: 0px;
  margin: 0px;
}
.gold-note {
  font-size: 0.75rem;
  line-height: 0.9rem;
  color: #6a605b;
  font-weight: 600;
}
.personal-image {
  background: transparent url("/en/includes/themes/FHB-New/images/call-person.jpg") no-repeat 50% -20px;
  padding: 130px 0 0 0;
}
.phone-contact {
  margin-bottom: 18px;
}
.phone-contact h3.red {
  color: #b31f29;
}
.phone-contact h3.small {
  font-size: 0.75rem;
  font-weight: bold;
  margin: 0px 0 5px 0;
}
.phone-contact .large-phone {
  font-size: 1.064rem;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.18rem;
  color: #382e2a;
  margin: 0px;
  padding: 0px;
}
.chat-with-us {
  text-align: center;
  width: 120px;
  margin: auto;
}
#curratesholder {
  margin-top: 25px;
}