/* Global
----------------------------------------------- */

body { background: #6D6E70 url(/images/background.jpg) repeat-x fixed; font-family: Georgia, Times, Serif;  }


/* Structure
----------------------------------------------- */

#boxy { width:960px; margin:40px auto 60px auto; background:#fff;}

#topper { border-top:5px solid #8CC63E; border-bottom:1px solid #DFDFDF; height:29px; background:#fff; background-image:url(/images/topperBG.gif); background-repeat:repeat-x; text-align:right; width:960px;}

#header { height:106px; background-image:url(/images/headerBG.gif); width:960px; }

#navBar { background:#E6E6E6; background-image:url(/images/custom.gif); background-repeat:no-repeat; background-position:left center;  text-align:right; width:960px; }

#navDecBot { padding:0; margin:0; height:4px; background-color:#fff; background-image:url(/images/botRule.gif); background-repeat:repeat-x; line-height:1px; width:960px; }

#footDecTop { padding:0 0 20px 0; margin:0 0 3px 0; height:4px; background-color:#fff; border-bottom:1px solid #DFDFDF; line-height:1px; width:960px; }

#frontTop { margin:0; border-bottom:1px solid #DFDFDF; margin-bottom:0px; padding:32px 0; width:960px; background:#fff;}

#frontTopWhy { margin:16px 0 32px 0; border-bottom:1px solid #DFDFDF;  padding:32px 0; width:960px; background:#E6F4DD;}

#frontBot { padding:32px 0; background:#fff; background-image:url(/images/frontBG.jpg); margin-bottom:3px; margin-top:3px;  width:960px; }

#footer { border-bottom: 5px solid #7DCE31; padding: 35px 0; }

#whitey { background:#fff; }

#middleBox { margin:32px 0; }

#borderBox { border:1px solid #DFDFDF; padding:3px; margin-bottom:32px; }

#middleContent { background:#E6E6E6; padding:12px; }

#greenback { background-color:#E6F4DD}

/* Type
----------------------------------------------- */

a { color:#6D6E72; }

p, li { font-size:12px; line-height:20px; color:#77787A;}

p, ul { margin-bottom:14px; }

#navBar ul, #topper ul { margin-bottom:0px; }

#navBar a { color:#6D6E72; text-decoration:none; text-transform:uppercase; font-family:helvetica, arial, sans-serif; font-size:11px; line-height:11px;  }

#navBar a:hover, #footer a:hover { color:#8CC63E; }

#footer p { float: left; line-height: 1.6; font-size: 10px; margin: 9px 0 0 24px}

#footer a { color:#7DCE31; text-decoration: underline; font-weight: bold;  }

#frontTop p, #frontTopWhy p { font-size:12px; line-height:16px; color:#77787A; margin:0 0 10px 0; }

#frontTop a { text-decoration:underline; }

h2, h3 { color:#6D6E72; margin-bottom:14px; }

h2 { font-size:18px; }

h3 { font-size:15px; }

h4 { font-size:14px; margin-bottom:14px; }

#middleContent { color:#6D6E72; }

.greenLink {color: #8CC63E;
text-decoration:none;}

/* Lists
----------------------------------------------- */

#navBar ul { padding:10px 90px 10px 0;  }

#footer ul { padding:10px 0; }

#footer ul { padding-left:90px; }

#navBar ul li, #footer ul li { display:inline; }

.bodyList { list-style-type:circle; margin-left:24px;}

ul ul { padding:0px; margin:0 0 0 6px;}

#navList li { margin-bottom:10px; line-height:14px; display: block; position: relative;}

#navList li ul { margin-top: 10px; }

#navList a
{
  font-size: 13px;
  font-weight: bold;
  padding: 4px 0;
  text-decoration: none;
}

#navList a:hover
{
  color: #8CC63E;
}

#navList ul
{
  margin: 0 0 0 15px;
  padding: 0;
}


/* Forms
----------------------------------------------- */

/* Images
----------------------------------------------- */

#hihrLogo { padding:22px 0 0 78px; float:left;}

#hihrSimple { padding:22px 90px 0 0; float:right;}

.frontImg { margin:0 0 15px 0;}

/* Misc
----------------------------------------------- */

.navRule { padding:0 10px; font-size:11px; color:#6D6E72; }


/* Tables
----------------------------------------------- */

#bigTable { border-collapse:collapse; border:1px solid #686A69; margin-bottom:12px; }

#topWhy {  background:#fff; font-size:11px; }

#topWhy td { padding:10px; background:#fff; vertical-align:top;  }

#topWhy td.even { background:#F1F1F3; }

#topWhy h4 { padding:0; margin:0; color:#8CC63E; margin-bottom:2px;}

#topWhy p { padding:0; margin:0; font-size:11px;}



#midWhy {  background:#99CC53; color:#fff; font-size:11px; }

#midWhy td { border-top:5px solid #686A69; border-bottom:5px solid #686A69; padding:10px; color:#99CC53; background:#99CC53; vertical-align:top; }

#midWhy td.even { background:#8CC63E; }

#midWhy td.flag { background:#fff; }

#midWhy h4 { padding:0; margin:0; color:#fff; margin-bottom:2px;}

#midWhy ul { margin:0; padding:0; }

#midWhy li { padding:0; margin:0 0 0 20px; color:#fff; font-size:11px; line-height:14px; list-style-type:disc; }



#botWhy { background:#D6D7D9; font-size:11px;}

#botWhy td { padding:10px; background:#D6D7D9; vertical-align:top; }

#botWhy td.even { background:#C7C7C9; }

#botWhy td.flag { background:#F7F7F7; }

#botWhy h4 { padding:0; margin:0; color:#686A69; margin-bottom:2px;}

#botWhy ul { margin:0; padding:0; }

#botWhy li { padding:0; margin:0 0 0 20px; font-size:11px; line-height:14px; list-style-type:disc; }

#contactForm { width:400px;}

#contactForm td { padding-right:10px; }

#contactForm input { width:185px; }

#contactForm textarea { width:390px; height:80px; }

.companies_bar
{
  background-color: #737476;
  border-top: 1px solid #666;
  height: 30px;
  width: 100%;
}

.companies
{
  margin: 0 auto;
  padding: 4px 0 0 0;
  width: 940px;
}

.companies li
{
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
}

.companies li a
{
  background-image: url(../images/companies.gif);
  background-repeat: no-repeat;
  color: #aaa;
  float: left;
  font-size: 11px;
  font-weight: bold;
  margin: 0 18px 0 0;
  padding: 0 0 0 25px;
  height: 21px;
  text-decoration: none;
}

.companies li a:hover
{
  color: #7dce31;
}

.companies li.thehawaiigroup a       { background-position: 0 0; }
.companies li.thehawaiigroup a:hover { background-position: 0 -105px; }
.companies li.hihr a                 { background-position: 0 -21px; }
.companies li.hihr a:hover           { background-position: 0 -126px; }
.companies li.hiemployment a         { background-position: 0 -42px; }
.companies li.hiemployment a:hover   { background-position: 0 -147px; }
.companies li.hiaccounting a         { background-position: 0 -63px; }
.companies li.hiaccounting a:hover   { background-position: 0 -168px; }
.companies li.himrk a                { background-position: 0 -84px; }
.companies li.himrk a:hover          { background-position: 0 -189px; }

hr
{
  background: #ddd;
  border: 0;
  margin: 1em 0;
  padding: 0;
  height: 2px;
  width: 100%;
}

.ataglance
{
  margin-bottom: 0;
  padding-bottom: 0;
}

.ataglance h4
{
  color: #555;
  font-size: 16px;
  margin-bottom: .25em;
  text-transform: uppercase;
}

.ataglance ul
{
  list-style: none;
  margin: 0;
  padding: 0;
}

.ataglance li
{
  border-top: 1px solid #e6e6e6;
  margin: .5em 0;
  padding: 0;
}

.ataglance li.first
{
  border-top: 0;
}

.ataglance li a
{
  color: #999;
  display: block;
  padding: .25em 0 0;
  text-decoration: none;
}

.ataglance li a:hover
{
  color: #777;
}

.ataglance li span
{
  float: left;
  font-weight: bold;
  width: 180px;
}

.story
{
  border-top: 1px solid #e6e6e6;
  margin: 1em 0;
  padding: 1em 0;
}

.story.first
{
  border-top: 0;
}

.story .grid_3
{
  width: 160px;
}

.story .grid_7
{
  width: 600px;
}

.story h4
{
  line-height: 1.5;
}

/* New homepage */

.testimonial
{
  margin-bottom: 25px;
  padding-right: 10px;
}

.testimonial p
{
  font-size: 16px;
  font-style: italic;
}

.testimonial strong
{
  display: block;
  font-size: 13px;
  font-style: italic;
  margin-left: 15px;
}

.homepage_popup
{
  position: absolute;
  right: 60px;
  top: 0;
  width: 353px;
  height: 336px;
}

#popup1 { background: url(../images/homepage_popup.png) left top no-repeat; }
#popup2 { background: url(../images/homepage_popup2.png) left top no-repeat; }

.homepage_popup_content
{
  padding: 22px 22px 22px 55px;
}

.homepage_popup_content h3,
.homepage_popup_content strong
{
  line-height: 1.5 !important;
  font-style: italic;
}

.homepage_popup_content strong
{
  font-size: 14px !important;
}

#frontTop.homepage
{
padding-top: 0px;
}

/* ----- tabs ----- */

.ui-tabs .ui-tabs-hide {
   display: none;
}

#tabs .slide
{
  width: 960px;
  height: 376px
}

.ui-tabs-nav li
{
  float: left;
  margin: 1em;
}

.slide *
{
  color: #fff !important;
}

.slide h2
{
font-size: 28px;
font-style: italic;
font-weight: normal;
line-height: 1.2;
}

.slide p
{
font-size: 13px !important;
line-height: 1.6 !important;
}

#slide1 { background: url(../images/homepage_slide_1.jpg) left top no-repeat; }
#slide2 { background: url(../images/homepage_slide_2.jpg) left top no-repeat; }
#slide3 { background: url(../images/homepage_slide_3.jpg) left top no-repeat; }
#slide4 { background: url(../images/homepage_slide_4.jpg) left top no-repeat; }
#slide5 { background: url(../images/homepage_slide_5.jpg) left top no-repeat; }
#slide6 { background: url(../images/homepage_slide_6.jpg) left top no-repeat; }

#slide1 .slide_content
{
  padding: 75px 0 0 485px;
}

#slide1 h2
{
  margin-bottom: 60px;
}

#slide1 li
{
  font-size: 18px;
  font-style: italic;
  line-height: 1.3;
}

#slide1 a
{
  display: block;
  font-size: 18px;
  font-style: italic;
  margin-top: 25px;
}

#slide2 .slide_content
{
  padding: 40px 0 0 315px;
}

#slide2 *
{
  font-style: italic;
}

#slide2 .quarter
{
  float: left;
  width: 160px;
}

#slide2 h3,
#slide2 ul
{
  margin-bottom: 6px;
}

#slide2 li
{
  font-size: 10px;
  list-style: disc;
  line-height: 1.6;
  margin-left: 12px;
}

#slide2 .quarter p
{
  margin-top: 6px !important;
}

#slide2 .quarter a
{
  font-size: 11px;
}

#slide2 a.regular
{
  display: block;
  margin-top: 40px;
}

#slide3 p,
#slide4 p,
#slide5 p
{
  font-size: 12px !important;
  line-height: 1.4 !important;
}

#slide3 .slide_content
{
  padding: 50px 20px 0 380px;
}

#slide3 a
{
  display: block;
  font-style: italic;
  text-align: right;
  margin: 1em 0;
}

#slide4 .slide_content
{
  padding: 125px 20px 0 490px;
}

#slide4 a,
#slide6 a
{
  float: left;
  font-style: italic;
  margin: .5em 1.5em 0 0;
}

#slide5 .slide_content
{
  padding: 120px 20px 0 490px;
}

#slide5 p
{
  margin-top: 85px;
  margin-bottom: 5px;
}

#slide5 a
{
  font-style: italic;
}

#slide6 .slide_content
{
  padding: 160px 20px 0 330px;
}

#slide6 a.goto1
{
  clear: left;
  font-size: 10px;
  margin: 20px 0 0 0;
}

.press_section_heading
{
  border-top: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  height: 38px;
  margin-bottom: -16px;
  float: left;
}

.press_section_heading span
{
  background: #f6f6f6;
  color: #000;
  float: left;
  padding: 12px;
  width: 200px;
  text-align: center;
  height: 14px;
}

.press_section_heading a
{
  background: #fff;
  color: #8CC63E;
  float: left;
  font-size: 13px;
  font-weight: bold;
  font-style: italic;
  border-left: 1px solid #e6e6e6;
  width: 200px;
  height: 14px;
  display: block;
  text-align: center;
  padding: 12px;
}

.brochures_heading
{
  margin: 2em auto 1em auto;
  font-size: 15px;
  text-align: center;
}

.brochures.on_homepage
{
  background: url(../images/pdf_thumbnails.jpg) center top no-repeat;
  margin: 0 auto;
  width: 808px;
  height: 198px;
}

.brochures.on_homepage a
{
  color: #7DCE31;
  display: block;
  font-weight: bold;
  font-style: italic;
  height: 28px;
  padding-top: 165px;
  width: 200px;
  float: left;
  text-align: center;
  text-decoration: none;
}

.brochures.on_homepage a:hover
{
  color: #6D6E72;
}

.brochures.in_sidebar
{
  background: url(../images/sidebar_pdf_thumbnail.jpg) 100px bottom no-repeat;
  margin-top: 2em;
}

.brochures.in_sidebar h3
{
  margin-bottom: 0;
}

.brochures.in_sidebar p
{
  margin: .5em 0 .25em 0;
}

.brochures.in_sidebar a
{
  display: block;
  font-weight: bold;
  padding: .15em 0;
}

/* Jobs */

.open_positions
{
  border: 1px solid #e6e6e6;
  float: right;
  margin: -.5em 0 1.5em 2em;
  width: 400px;
}

.open_positions .wrapper
{
  background: #f7f7f7;
  border: 3px solid #fff;
  padding: 1em;
  font-size: 13px;
}

.open_positions ul
{
  margin-bottom: 0;
}

.open_positions ul li
{
  color: #8cc63e;
  list-style: square;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  margin-left: 15px;
  padding: 4px 0 4px 0;
}

.open_positions ul li:hover
{
  color: #333;
}

.job_application
{
  margin: 1.5em auto;
  width: 675px;
}

.job_application a
{
  display: block;
  text-decoration: none;
}

.job_application a:hover,
.job_application a:hover strong
{
  color: #8cc63e;
}

.job_application a:hover span,
.job_application a:hover span strong
{
  color: #6D6E72 !important;
}

.job_application p
{
  font-size: 15px !important;
  font-style: italic;
  line-height: 1.7;
  padding-top: 25px;
}

.job_application p strong
{
  color: #444;
  text-decoration: underline;
}

.job_application img
{
  float: left;
  margin-top: -25px;
}

.job_description li
{
  list-style: square;
  margin: 1em 0 1em 1.5em;
}

h5
{
  color: #aaa;
  font-size: 12px;
  margin: 1.5em 0 .5em;
  text-transform: uppercase;
}

/* Footer Images */

#footer img
{
  display: block;
  margin-bottom: 1em;
}

.organizations
{
  background-color: #fff;
  border: 1px solid #ddd;
  clear: both;
  width: 505px;
}

.organizations table
{
  border-collapse: collapse;
  width: 100%;
}

.organizations table td
{
  padding: 15px 10px;
  height: 100px;
  width: 33%;
  text-align: center;
  vertical-align: middle;
}

.awards
{
  background-color: #fff;
  border: 1px solid #ddd;
  clear: both;
  padding: 25px;
  width: 455px;
}

.awards table
{
  border-collapse: collapse;
  width: 100%;
}

.awards table td
{
  font-size: 15px;
  line-height: 1.6;
  padding: 0 25px 25px 0;
  vertical-align: middle;
}

.awards table td.image
{
  vertical-align: middle;
  text-align: center;
}

.sponsorships
{
  background-color: #fff;
  border: 1px solid #ddd;
  clear: both;
  padding: 15px;
  width: 475px;
}

.partners
{
  background-color: #fff;
  border: 1px solid #ddd;
  clear: both;
  margin-bottom: 20px;
  padding: 15px;
  width: 475px;
}

.partners a
{
  float: left;
  line-height: 50px;
  padding: 10px 0;
  text-align: center;
  width: 158px
}

.partners a img
{
  vertical-align: middle;
  max-width: 158px;
}

.staff_thumbnails
{
  width: 560px
}

.staff_thumbnails a
{
  border: 0;
  float: left;
  padding: .6em;
  text-decoration: none;
  position: relative;
}

.staff_thumbnails img
{
  border: 6px solid #fff;
  height: 90px;
  width: 72px;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.staff_thumbnails a span
{
  opacity: 0;
  font-size: 12px;
  position: absolute;
  white-space: nowrap;
  top: 0;
  left: 9px;
  color: #000;
  background: #fff;
  padding: 3px 6px;
  z-index: 10;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.staff_thumbnails a:nth-child(5n) span
{
  left: auto;
  right: 9px;
}

.staff_thumbnails a:hover span
{
  opacity: 1;
  top: -6px;
}

.staff_thumbnails:hover a img
{
  opacity: .5;
}

.staff_thumbnails a:hover img
{
  opacity: 1;
}

.bio
{
  clear: both;
  margin: 1.5em 0 2.75em 0;
  overflow: hidden; 
}

.bio img
{
  float: left;
  margin-right: 12px;
  width: 160px;
  height: 200px;
}

.bio p
{
  float: left;
  margin-bottom: 0;
  width: 336px;
}

.bio a
{
  font-weight: bold;
}

/* Error */

.error
{
  background: #fff;
  border-top: 5px solid #8CC63E;
  border-bottom: 5px solid #8CC63E;
  margin: 4em auto;
  padding: 3em;
  text-align: center;
  width: 500px;
}

.error h1
{
  font-size: 24px;
  margin: 0 0 1em;
}

.error p
{
  font-size: 16px;
}

.error a
{
  color: #8CC63E;
  font-weight: bold;
  cursor: pointer !important;
}

/* W2 */

#w2
{
  float: right;
  font-size: 13px;
  font-style: italic;
  padding: 9px 10px;
  text-decoration: none;
}

#w2:hover
{
  color: #8CC63E;
}

/* MyHiHR */

#myhihr
{
  background: url(../images/myhihr_button.png) left top no-repeat;
  cursor: pointer !important;
  position: relative;
  width: 215px;
  height: 30px;
  float: right; 
}

#myhihr ul
{
  background: #f3f3f3;
  display: none;
  position: absolute;
  right: 90px;
  top: 30px;
  padding: 6px 0px 6px 12px;
  width: 113px;
}

#myhihr ul li.first,
#myhihr ul li a
{
  font-style: italic;
  padding-right: 22px;
}

#myhihr ul li a
{
  background: url(../images/myhihr_link_arrow.png) right no-repeat; 
  color: #8CC63E;
  display: block;
  text-decoration: none;
}

#myhihr ul li a:hover
{
  color: #777;
}

#myhihr:hover
{
  background-position: left -30px;
}

#myhihr:hover ul
{
  display: block !important;
}