html
{
  background-color: rgb(14, 59, 104);
  color:            #000;
  margin:           0;
  padding:          0;
}

body
{
  font-family:      Helvetica, Arial, sans-serif;
  font-size:        0.9em;
  margin:           0 auto;
  padding:          0;
}



/********
 * Text *
 ********/

/*** Paragraphs ***/
p
{
  margin:           0;
}

* + p
{
  margin-top:       1em;
}

/* no space between headers and paragraphs */
h1 + p,
h2 + p,
h3 + p,
h4 + p
{
  margin-top:       0;
}



/*** Headers ***/
h1
{
  background-color: transparent;
  color:            rgb(14, 59, 104);
  font-family:      Helvetica, Arial, sans-serif;
  font-size:        2em;
  font-weight:      normal;
  margin:           0 0 0.25em 0;
  padding:          0;
}

h2
{
  background-color: transparent;
  color:            rgb(14, 59, 104);
  font-family:      Helvetica, Arial, sans-serif;
  font-size:        1.5em;
  font-weight:      normal;
  margin:           0 0 0.25em 0;
  padding:          0;
}

h3
{
  background-color: transparent;
  color:            rgb(14, 59, 104); /* #0e3b68 */
  font-family:      Helvetica, Arial, sans-serif;
  font-size:        1.2em;
  font-weight:      bold;
  margin:           0 0 0.25em 0;
  padding:          0;
}

h4
{
  background-color: transparent;
  color:            rgb(14, 59, 104);
  font-family:      Helvetica, Arial, sans-serif;
  font-size:        1em;
  font-weight:      bold;
  margin:           0 0 0.25em 0;
  padding:          0;
}

div + h1,
div + h2,
div + h3,
div + h4
{
  margin-top:       0;
}

* + h1, div.slide + h1, div.slide-img + h1,
* + h3, div.slide + h3, div.slide-img + h3,
* + h4, div.slide + h4, div.slide-img + h4
{
  margin-top:       1em;
}

* + h2, div.slide + h2, div.slide-img + h2
{
  margin-top:       2em;
}


small
{ 
  font-size:        0.75em;
}

.warning
{
  color:            #c00;
}

.success
{
  color:            #0c0;
}

.disabled
{
  color:            #999;
}

.smallcaps
{
  font-size:        0.8em;
  text-transform:   uppercase;
}



/*** hidden text or element ***/
.hidden
{
  display:          none;
}



/*********
 * Lists *
 *********/
ul, ol
{
  margin:           0 0 0 2em;
  padding:          0;
}

* + ol,
* + ul
{
  margin-top:       1em;
}

ul li
{
  list-style:       disc outside;
}

ol li
{
  list-style:       decimal outside;
}

ul.spacious li,
ol.spacious li
{
  margin-top:       1em;
}

ul.spacious li:first-child,
ol.spacious li:first-child
{
  margin-top:       0;
}

li .link
{
  font-weight:      bold;
}

li .slide
{
  margin-left:      20px;
}



/*********
 * Links *
 *********/
a,
.link
{
  color:            #f60;
  cursor:           pointer;
}

a:link,
a:visited,
.link
{
  text-decoration:  none;
}

a:hover,
a:active,
.link:hover,
.link:active
{
  text-decoration:  underline;
}



/**********
 * Images *
 **********/

img
{
  border:           none;
}

/* div for preloading images 
   put <img>s in this div to preload them */
div.preload
{
  display:          none;
}

img.smallicon
{
  height:           16px;
  width:            16px;
}

/* small preview image of a larger image */
img.preview
{
  border:           1px solid #ccc;
  max-width:        150px;
  padding:          1px;
}

* + img.preview
{
  margin-top:       1em;
}



/**********
 * Tables *
 **********/

table
{
  border-collapse:  collapse;
  margin:           1em 0;
  padding:          0;
}

table th,
table td
{
  border:           1px solid #ccc;
  padding:          0.5em 1em;
  text-align:       left;
}

table th
{
  font-weight:      bold;
}



/**********
 * Header *
 **********/
 
/* entire header area */
div#header
{
  background-color: #ccc;
  background-image: url('../images/gray-grad.jpg');
  background-repeat: repeat-x;
  background-position: 0 25px;
  margin:           0 0 0 0;
  padding:          0;
  position:         relative;
  width:            100%;
  z-index:          300;
}

/* text logo */
div#header div#logo
{
  margin:           0 auto;
  padding:          50px 0 5px 0;
  width:            720px;
}

/* HB image logo */
div#header div#logo-hb
{
  margin:           -34px 0 0 -10px;
  padding:          0;
  position:         absolute;
  z-index:          400;
}

/* header overhang shadow */
div#header div#header-overhang
{
  background:       url('../images/headershadow.png') repeat-x bottom;
  background-color: transparent;
  bottom:           -20px;
  height:           20px;
  left:             0;
  margin:           0;
  position:         absolute;
  width:            100%;
}



/***************
 * Grid System *
 ***************/

/* one span in the grid */
div.span
{
  float:            left;
  margin:           0 10px 10px 10px;
  padding:          0;
}

/* keep content inside the span */
div.span:after
{
  clear:            both;
  content:          "";
  display:          block;
}

/* various widths for the spans */
/* classes are "wN" where N is the number of columns to span */
div.span.w12 { width: 700px; }

div.span.w8  { width: 460px; }

div.span.w6  { width: 340px; }

div.span.w5  { width: 280px; }

div.span.w4  { width: 220px; }

div.span.w3  { width: 160px; }

div.span.w2  { width: 100px; }

div.span.w1  { width: 40px;  }

/* first and last spans in a row */
div.span.first
{
  clear:            left;
}

div.span.last
{
  clear:            right;
}



/*** Generic Box ***/
/* other boxes (text, image, etc.) should use this class */

div.box
{
  overflow:         hidden;
  position:         relative;
}

div.box + div.box
{
  margin-top:       20px;
}



/*** Text Box ***/

div.box.text
{
  font-size:        1em;
  overflow:         auto;
}



/***************
 * Sliding Div *
 ***************/
div.slide
{
  display:          none;
  margin:           0 0 0 20px;
}

div.slide-img
{
  display:          none;
  margin:           0;
  overflow:         hidden;
  text-align:       center;
  width:            100%;
}

div.slide-img img
{
  padding-top:      1em;
  width:            65%;
}

div.slide div.section
{
  margin:           1em 0 0.5em 0;
}



/********
 * Menu *
 ********/
div.nav
{
  background-color: #eee;
  border-bottom:    5px solid #fff;
  border-top:       5px solid #fff;
  color:            #000;
  font-size:        1em;
  padding:          10px 0;
  position:         relative;
}

/* menu for account links */
div.nav + div.nav
{
  border-top:       none;
}


/* main menu list */
div.nav > ul
{
  margin:           0 auto;
  padding:          0 20px 0 0;
  position:         relative;
  text-align:       right;
  width:            720px;
}

/* main menu list item */
div.nav > ul > li
{
  
  display:          inline;
  font-weight:      bold;
  list-style:       none;
  margin:           0 0 0 2em;
  padding:          0;
  position:         relative;
  text-transform:   uppercase;
}

/* fix padding on first list item */
div.nav > ul > li:first-child
{
  margin-left:      0;
}

/* list item links */
div.nav > ul > li > a,
div.nav > ul > li > .link
{
  color:            rgb(81, 156, 39); /* 519c27 */
}

/* special link for current list item */
div.nav > ul > li.current,
div.nav > ul > li.current > a,
div.nav > ul > li.current > .link
{
  color:            rgb(14, 59, 104);
  font-weight:      bold;
}

/* drop-down submenu list */
div.nav > ul > li > ul
{
  background:       url("../images/menubg.png") no-repeat top center;
  background-color: transparent;
  font-size:        0.8em;
  font-weight:      normal;
  left:             0;
  margin:           10px 0 0 -25px;
  padding:          0 15px 0 15px;
  position:         absolute;
  text-align:       left;
  visibility:       hidden;
  width:            200px;
  z-index:          1000;
}

/* drop-down menu item */
div.nav > ul > li > ul > li
{
  background-color: transparent;
  display:          list-item;
  list-style:       none;
  margin:           -5px 0 5px 0;
  padding:          10px 10px 0 10px;
  text-transform:   none;
}

/* special first item */
div.nav > ul > li > ul > li:first-child
{
  margin-top:       -15px;
  padding-top:      20px;
}

/* display the submenu when hovering */
div.nav > ul > li:hover > ul,
div.nav > ul > li > ul:hover
{
  visibility:       visible;
}

/* rounded bottom of submenu */
div.nav > ul > li > ul > li.menu-bottom
{
  background:       url("../images/menubottom.png") no-repeat bottom left;
  bottom:           -20px;
  display:          block;
  height:           30px;
  left:             0;
  margin:           0;
  padding:          0;
  position:         absolute;
  width:            230px;
}



/****************
 * Main Content *
 ****************/

div#content
{
  background-color: #fff;
  color:            #333;
  display:          block;
  margin:           0 auto;
  padding:          20px 10px 10px 10px;
  position:         relative;
  width:            720px;
}

/* keep content inside the div */
div#content:after
{
  clear:            both;
  content:          "";
  display:          block;
}

/* left shadow */
div#content-left
{
  background:       url("../images/bgleft.png") repeat-y top left;
  top:              0;
  height:           100%;
  left:             -20px;
  margin:           0;
  padding:          0;
  position:         absolute;
  width:            20px;
}

/* right shadow */
div#content-right
{
  background:       url("../images/bgright.png") repeat-y top right;
  top:              0;
  height:           100%;
  right:            -20px;
  margin:           0;
  padding:          0;
  position:         absolute;
  width:            20px;
}

/* bottom left round corner and shadow */
div#content-bottom-left
{
  background:       url("../images/bottomleft.png") no-repeat bottom left;
  bottom:           -30px;
  height:           30px;
  left:             -20px;
  margin:           0;
  padding:          0;
  position:         absolute;
  width:            30px;
}

/* bottom shadow */
div#content-bottom
{
  background:       url("../images/bottomcenter.png") repeat-x bottom center;
  bottom:           -30px;
  height:           30px;
  left:             10px;
  margin:           0;
  padding:          0;
  position:         absolute;
  width:            720px;
}

/* bottom right round corner and shadow */
div#content-bottom-right
{
  background:       url("../images/bottomright.png") no-repeat bottom right;
  bottom:           -30px;
  height:           30px;
  right:            -20px;
  margin:           0;
  padding:          0;
  position:         absolute;
  width:            30px;
}



/* spacing between two sections */
div.section + div.section
{
  margin-top:       20px; 
}



/*** In-Page Menu ***/
div.menu
{
  border:           1px solid #ccc;
  float:            right;
  font-size:        1em;
  margin:           0 0 1em 1em;
  padding:          10px 15px;
  width:            200px;
}

div.menu ul
{
  margin:           0;
  padding:          0 0 0 1em;
}

div.menu ul li
{
  list-style:       disc outside;
}



/*** Social Site List ***/
div.social
{
  margin:           1em 0 0 0;
  padding:          0;
}

div.social ul
{
  margin:           0;
  padding:          0;
  text-align:       center;
}

div.social ul li
{
  display:          inline;
  list-style:       none;
  margin:           0;
  padding:          0 0 0 5px;
}

div.social ul li:first-child
{
  padding-left:     0;
}



/*** Page Date ***/
div.updated
{
  clear:            both;
  color:            #999;
  font-size:        0.85em;
  font-style:       italic;
  margin-top:       20px;
  text-align:       center;
}



/**********
 * Banner *
 **********/

div#banner
{
  font-size:        0;
  margin:           -20px 0 0 0;
  padding:          0;
  position:         relative;
  text-align:       center;
  width:            720px;
}

div#banner div.span
{
  height:           237px;
  overflow:         hidden;
  position:         relative;
  width:            340px;
}

/* banner navigation buttons */
div#banner div.button
{
  background-color: transparent;
  border:           none;
  cursor:           pointer;
  display:          none;
  height:           40px;
  position:         absolute;
  width:            40px;
  z-index:          500;
}

/* only show buttons when hovering over banner or buttons */
div#banner div.span:first-child:hover div.button,
div#banner div.button:hover
{
  display:          block;
}


/*** Previous Button ***/
div#banner div.prev
{
  background:       url('../images/arrowback.png') no-repeat center left;
  left:             0;
  margin-top:       -20px;
  top:              50%;
}

div#banner div.prev:hover
{
  background-image: url('../images/arrowback-hover.png');
}

div#banner div.prev:active
{
  background-image: url('../images/arrowback-down.png');
}


/*** Next Button ***/
div#banner div.next
{
  background:       url('../images/arrownext.png') no-repeat center right;
  right:            0;
  margin-top:       -20px;
  top:              50%;
}

div#banner div.next:hover
{
  background-image: url('../images/arrownext-hover.png');
}

div#banner div.next:active
{
  background-image: url('../images/arrownext-down.png');
}


/* banner image */
div#banner img#banner-img
{
  width:            340px;
}


/* duplicate image positioning */
div#banner div.bannerdupe
{
  position:         absolute;
  visibility:       hidden;
  text-align:       center;
  top:              0;
  width:            340px; /* 700px */
  z-index:          200;
}

div#banner div.bannerdupe img
{
  width:            340px;
}



/****************
 * News Section *
 ****************/

div#news
{
  font-size:        0.8em;
  margin:           10px -10px 0 -10px;
  padding:          0;
}

div#news:after
{
  clear:            both;
  content:          "";
  display:          block;
}

/* make all news items the same height */
div#news .span
{
  height:           340px;
}

/* news item image */
div#news img
{
  display:          block;
  margin-bottom:    0.25em;
}

div#news img.full
{
  border:           1px solid #ddd;
}

div#news img.center
{
  border:           none;
  margin:           0 auto;
}

div#news img.left
{
  border:           none;
  margin:           0 auto 0 0;
}

div#news img.right
{
  border:           none;
  margin:           0 0 0 auto;
}

/* new item heading */
div#news h3
{
  font-size:        1.4em;
  margin-bottom:    0.5em;
}

/* special news item links */
div#news a
{
  color:            rgb(14, 59, 104);
}

div#news a:link,
div#news a:visited
{
  text-decoration:  underline;
}

div#news a:hover,
div#news a:active
{
  text-decoration:  none;
}

/* news item box */
div.box.news
{
  background:       url('../images/newsitembgfill.png') repeat-x top left;
  background-color: transparent;
  color:            #000;
  display:          inline-block;
  height:           300px;
  margin:           0 0 -20px 0;
  overflow:         hidden;
  padding:          20px;
  position:         relative;
  vertical-align:   top;
}

/* news item content widths */
div#news div.span.w12 div.box.news { width: 660px; }
div#news div.span.w6 div.box.news  { width: 320px; }
div#news div.span.w4 div.box.news  { width: 200px; }
div#news div.span.w3 div.box.news  { width: 140px; }


/* news item image widths */
div#news div.span.w12 img { max-width: 660px; }
div#news div.span.w6 img  { max-width: 320px; }
div#news div.span.w4 img  { max-width: 200px; }
div#news div.span.w3 img  { max-width: 140px; }

div#news div.span.w12 img.full { width: 658px; }
div#news div.span.w6 img.full  { width: 318px; }
div#news div.span.w4 img.full  { width: 198px; }
div#news div.span.w3 img.full  { width: 138px; }


/* left side of the box and shadow */
div.newsitemleft
{
  background:       url('../images/newsitembgleft.png') no-repeat top left;
  background-color: transparent;
  color:            #000;
  height:           340px;
  margin:           0;
  overflow:         hidden;
  padding:          0;
  position:         absolute;
  left:             0;
  top:              0;
  width:            20px;
}

/* right side of box and shadow */
div.newsitemright
{
  background:       url('../images/newsitembgright.png') no-repeat top right;
  background-color: transparent;
  color:            #000;
  height:           340px;
  margin:           0;
  overflow:         hidden;
  padding:          0;
  position:         absolute;
  right:            0;
  top:              0;
  width:            20px;
}



/**********
 * Ribbon *
 **********/

/* container for ribbon image */
div#ribbon
{
  background-color: transparent;
  color:            #333;
  display:          block;
  height:           0;
  margin:           0 auto;
  padding:          0;
  position:         relative;
  width:            720px;
}

div#ribbon img
{
  float:            right;
  margin:           -20px -210px 0 0;
  padding:          0;
  position:         relative;
  z-index:          400;
}



/*************
 * Copyright *
 *************/

div#copyright
{
  background-color: inherit;
  color:            #999;
  display:          block;
  font-family:      Helvetica, Arial, sans-serif;
  font-size:        0.75em;
  margin:           0;
  padding:          30px 0;
  text-align:       center;
}

/* special copyright links */
div#copyright a
{
  color:            #999;
}

div#copyright a:link,
div#copyright a:visited
{
  text-decoration:  underline;
}

div#copyright a:hover,
div#copyright a:active
{
  text-decoration:  none;
}