/* Reset
------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, 
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, button {
  font-size: 100%;
	vertical-align: baseline;
	text-decoration: none;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

ul {list-style: none;}

a img { border: none; }

button {
  display: block;
  cursor: pointer;
}

a span, h1 span, h2 span, h4 span, h5 span, button span {
  display: none;
}

/* Columns
------------------------------------------------------------------------------*/

/* Grid floating and margins */
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5,
div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12 {
  float: right;
  margin-right: 20px;
  display: inline;
}

/* Use these classes to set the width of a column */

.span-5 {width: 410px; text-align:center; margin:65px 0 0 0; }
.span-6 {width: 463px; text-align:center; margin:26px 45px 0 0px; float:right; }
.span-7 {width: 463px; text-align:center; margin:65px 30px 0 0px; float:right; }
.span-9 {width: 410px; text-align:center; margin:100px 0 0 0; }

/* Add these to prepend a column */

.prepend-1 {padding-left: 26px;}
.prepend-2 {padding-left: 52px;}

/* Add these to append a column */

.append-1 {padding-right: 26px;}
.append-2 {padding-right: 52px;}

/* Apply to columns and elements to eliminate right margins */

div.last, .last {
  margin-right: 0;
  }



/* Homepage Layout
------------------------------------------------------------------------------*/

#content-home {
  border-bottom: 1px solid #807a67;
  height: 1%;
  padding-top: 312px;
}

#content-home .content-inner {
  background: url(../img/backgrounds/content-home.gif) 0 0 repeat-y;
  height: 1%;
  padding-bottom: 34px;
}

#content-home .column-right {
  float: left;
  width: 284px;
  padding-left: 26px;
}

/* Hero */

#hero-container {
  width: 992px;
  position: absolute;
  z-index: 1;
  height: 300px;
  overflow: hidden;
}

.hero-wrapper {
  height: 294px;
  width: 992px;
}

ul#hero-frames {
  z-index: 100;
  position: absolute;
  right: 0;
  bottom: 20px;
  width: 75px;
}

ul#hero-frames li {
  float: left;
  margin-left: 5px;
}

ul#hero-frames li a {
  display: block;
  width: 20px;
  height: 20px;
}

a.frame-1 {background: url(../img/buttons/frame-1.gif) 0 0 no-repeat;}
a.frame-2 {background: url(../img/buttons/frame-2.gif) 0 0 no-repeat;}
a.frame-3 {background: url(../img/buttons/frame-3.gif) 0 0 no-repeat;}

a.frame-1:hover, a.frame-2:hover, a.frame-3:hover {background-position: 0 -20px;}

a.frame-1-active {background: url(../img/buttons/frame-1.gif) 0 -40px no-repeat;}
a.frame-2-active {background: url(../img/buttons/frame-2.gif) 0 -40px no-repeat;}
a.frame-3-active {background: url(../img/buttons/frame-3.gif) 0 -40px no-repeat;}

#hero_container h1 {
  height: 100px;
  margin-bottom: 4px;
}

#hero_container p {
  width: 394px;
}

.hero_image {
  z-index: 10;
  position: absolute;
  display: block;
}

/* Infographics */

#infographics div {
  height: 162px;
  margin-top: 38px;
}