/* ---------------------------------------------------------------------------------------------
Client Name: Fifth Letter
Author: Rockbeatspaper, John and David Peele
Created: 4.27.07
--------------------------------------------------------------------------------------------- */

@import "reset.css";

/* ---------------------------------------------------------------------------------------------

  general setup

--------------------------------------------------------------------------------------------- */
body {
  font: 12px/18px "Helvetica Neue Regular", Helvetica, Arial, sans-serif;
  background: #FFF;
  text-align: center;
}

/* General Hiding */
.hide { display: none; }

/* General Floating */
.float-r { margin: 0 0 18px 18px; float: right; }
.float-l { margin: 0 25px 18px 0; float: left; }

/* Image Replacement */
.ir { text-indent: -9999px; }

/* Self Clearing Floats */
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

/* PNG Transparency Fix for IE 5.5+ */
img, #s-home #banner, #s-home #content p#intro { behavior: url(/js/iepngfix.htc); }

/* ---------------------------------------------------------------------------------------------

	general typography

--------------------------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  
}

h1 { margin-bottom: 18px; font-size: 24px; line-height: 36px; }
h2 { margin-bottom: 18px; font-size: 18px; line-height: 18px; }
h3 { margin-bottom: 18px; font-size: 14px; line-height: 18px; }
h4 { margin-bottom: 18px; font-size: 12px; line-height: 18px; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  
}

p,
ul,
ol { margin-top: 12px; margin-bottom: 24px; }

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

strong { font-weight: bold; }

em { font-style: italic; }

.light { color: #5e5e5e; }
.dark { color: #002e52; }

/* ---------------------------------------------------------------------------------------------

	container

--------------------------------------------------------------------------------------------- */
#container {
  margin: 23px auto 0;
  width: 800px;
  text-align: left;
}

#s-home #container { margin-top: 127px; }

/* ---------------------------------------------------------------------------------------------

	30-30-30 banner

--------------------------------------------------------------------------------------------- */
#s-home #banner { 
  width: 831px;
  height: 146px;
  position: absolute;
  top: 23px;
}

#s-home #banner h2 a { 
  width: 831px;
  height: 146px;
  display: block;
  text-indent: -9999px;
}

/* ---------------------------------------------------------------------------------------------

	header

--------------------------------------------------------------------------------------------- */
#header {
  width: 800px;
  height: 81px;
  background: #e0d9c4 url(/images/bg_header.png) bottom left repeat-x;
  border-top: 1px solid #517585;
}

#header p#flash {
  margin: 0;
  width: 800px;
  height: 51px;
  background: url(/images/bg_flash.jpg) no-repeat;
}

#header h1  {
  margin: 0;
  width: 170px;
  height: 30px;
  float: left;
}

#header h1 a {
  width: 170px;
  height: 30px;
  display: block;
  background: url(/images/bg_logo.png) no-repeat;
}

/* NAVIGATION */
#header ul {
  margin: 0 0 0 212px;
  width: 523px;
  height: 30px;
  background: #CCC;
}

#header ul li {
  display: inline;
}

#header ul li a {
  height: 30px;
  display: block;
  float: left;
}

#header ul li a:hover,
#s-story li#story a,
#s-services li#services a,
#s-clients li#clients a,
#s-work li#work a { background-position: 0 -30px; }

#story a { width: 106px; background: url(/images/btn_story.png) no-repeat; }
#services a { width: 155px; background: url(/images/btn_services.png) no-repeat; }
#clients a { width: 145px; background: url(/images/btn_clients.png) no-repeat; }
#work a { width: 117px; background: url(/images/btn_work.png) no-repeat; }

/* ---------------------------------------------------------------------------------------------

	content

--------------------------------------------------------------------------------------------- */
#content {
  padding-bottom: 12px;
  width: 800px;
  background: url(/images/bg_content.png) repeat-y;
}

/* HOME */
#s-home #content {
  padding-top: 42px;
  width: 800px;
  background: url(/images/bg_content-home.jpg) no-repeat;
}

#s-home #content p#intro {
  margin: 0 0 0 32px; /* needed to counteract default margins on all <p> elements, from general typography styles */
  width: 736px;
  height: 342px;
  position: relative;
  background: url(/images/bg_home-intro.png) no-repeat;
}

#s-home #content p#intro a.learn{
  width: 134px;
  height: 25px;
  position: absolute;
  top: 318px;
  left: 480px;
  display: block;
}

#s-home #content h1 {
  margin: 39px 0 0 32px;
  width: 305px;
  height: 64px;
  background: url(/images/bg_logo-home.png) no-repeat;
}

#s-home #content dl {
  margin: 0 0 0 165px;
  width: 603px;
  height: 97px;
  background: url(/images/bg_home-contact.png) no-repeat;
}

#s-home #content dd a.mail {
  width: 137px;
  height: 20px;
  position: absolute;
  top: 662px;
  left: 860px;
  display: block;
}
/* ---------------------------------------------------------------------------------------------

	content-sidebar

--------------------------------------------------------------------------------------------- */
#content-sidebar {
  width: 170px;
  float: left;
}

#content-sidebar ul.subnav {
  margin: 0 10px;
  padding: 30px 0;
  border-bottom: 1px solid #beaf88;
  font:  13px "Times New Roman", Times, Georgia, serif;
  font-style: italic;
  font-weight: bold;
  text-align: right;
}

#s-services #content-sidebar ul.subnav {
  padding: 30px 0 18px 0;
}

#content-sidebar ul.subnav li { margin-bottom: 18px; }
#content-sidebar ul.subnav li.last { margin-bottom: 0; }

#content-sidebar ul.subnav li a {
  text-decoration: none;
  color: #517585;
}

#content-sidebar ul.subnav li a:hover,
#content-sidebar ul.subnav li a.selected { color: #c70c27; }

#content-sidebar form {
  margin: 30px 10px;
  text-align: right;
}

#content-sidebar form #q { 
  width: 148px;
  margin: 0 0 12px 0;
  padding: 0;
}

#content-sidebar form input.search {
  margin: 0 -2px 0 0;
  padding: 0;
}

/* ---------------------------------------------------------------------------------------------

	newsletter form

--------------------------------------------------------------------------------------------- */
#content-sidebar #newsletter {
  margin: 0 10px;
  padding: 30px 0;
  border-bottom: 1px solid #beaf88;
  font:  13px "Times New Roman", Times, Georgia, serif;
  text-align: right;
}

#content-sidebar #newsletter h3 {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  font-weight: bold;
  text-transform: none;
  color: #517585;
}

#content-sidebar #newsletter form {
  margin: 10px 0 0 0;
  padding: 0;
}

#content-sidebar #newsletter form input {
  width: 148px;
  margin: 0 0 5px 0;
  padding: 0;
}

#content-sidebar #newsletter form input#mb-name, #content-sidebar #newsletter form input#mb-siyy-siyy {
  text-align: right;
}

#content-sidebar #newsletter form input.button {
  width: 70px;
  margin: 0 -2px 0 0;
  padding: 0;
}
/* ---------------------------------------------------------------------------------------------

	content-main

--------------------------------------------------------------------------------------------- */
#content-main {
  margin: 25px 42px 0 0;
  width: 546px;
  float: right;
}

#content-main h2 {
  margin: 6px 0 30px;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  color: #c70c27;
}

#content-main h2.title {
  margin: 6px 0 10px;
  font-size: 17px;
  font-weight: bold;
  text-transform: none;
  color: #c70c27;
}

#content-main h3 {
  margin: 6px 0 10px;
  font-size: 15px;
  font-weight: bold;
  text-transform: none;
  color: #c70c27;
}

#content-main p,
#content-main ul {
  font: 13px;
}

#content-main p em {
  font: 14px  "Times New Roman", Times, Georgia, serif;
  font-style: italic;
  color: #c70c27;
}

#content-main p em a {
  color: #c70c27;
}

#content-main em.black {
  font: 14px  "Times New Roman", Times, Georgia, serif;
  font-style: italic;
  color: #000;
}

#content-main p.hero {
  margin-top: 0;
  font: 24px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 32px;
  font: 21px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 26px;
  font-weight: normal;
  color: #517585;
}

#content-main p.hero a {
  color: #c70c27;
  text-decoration: none;
}

#content-main ul {
  list-style-type: disc;
}

#content-main ul li {
  margin-left: 15px;
  line-height: 18px;
}

#content-main hr {
  height: 1px;
  margin-top: 20px;
  background: #517585;
  border: none;
  color: #517585;
}

#content-main dt span {
  margin-top: 5px;
  margin-right: 25px;
  font-size: 30px;
  color: #c70c27;
  float: left;
}

#content-main dd {
  margin: 0 0 20px 42px;
}

/* CASE STUDIES - replaced by tabber.css */
#content-main #case {
  padding-top: 36px;
  border-top: 1px solid #517585;
}

#content-main #case ul#work-list {
  margin-top: 0;
  list-style-type: none;
}

#content-main #case ul#work-list li {
  margin-bottom: 12px;
}

#content-main #case ul#work-list a {
  font-style: italic;
  text-decoration: none;
}

#content-main #case ul#work-list a:hover { color: #c70c27; }

#content-main #case h3 {
  font-size: 15px;
  clear: both;
}

/* THUMBS */
#content-main #thumbs {
  margin-bottom: 36px;
  width: 530px;
  height: 351px;
  background: url(/images/bg_thumbnail-grid.png) no-repeat;
  line-height: 0;
}

#content-main #thumbs img.thumb {
  margin: 5px 6px 6px 5px;
  padding: 0;
  float: left;
}

/* THUMBS PAGINATION*/
#content-main p.thumb-page-title {
  margin: 0;
  padding: 0;
  font: 14px  "Times New Roman", Times, Georgia, serif;
  float: left;
}

#content-main ul.thumb-page li {
  margin-left: 5px;
  font: 14px  "Times New Roman", Times, Georgia, serif;
  display: inline;
}

#content-main ul.thumb-page li a {
  padding: 5px;
  text-decoration: none;
}

#content-main ul.thumb-page li a:hover {
  color: #FFFFFF;
  background: #BEAF88;
}

#content-main ul.thumb-page li.selected {
  padding: 5px;
  color: #FFFFFF;
  background: #BEAF88;
}

/* CONTACT FORM */
#content-main label, #content-main input, #content-main textarea, #content-main select {
  width: 425px;
}

#content-main input.zemSubmit {
  width: 100px;
}

#content-main div.zemThanks {
  color: #c70c27;
  font-weight: bold;
}

/* SEARCH RESULTS */
#s-search #content-main h3 a {
  margin: 6px 0 10px;
  font-size: 15px;
  font-weight: bold;
  text-transform: none;
  color: #c70c27;
}

/* ---------------------------------------------------------------------------------------------

	footer

--------------------------------------------------------------------------------------------- */
#footer {
  padding-top: 18px;
  border-top: 1px solid #7d98a4;
  text-align: center;
}

#s-home #footer { position: relative; }

#footer li {
  padding: 3px 7px 3px 4px;
  display: inline;
  border-right: 1px solid #7d98a4;
}

#footer li.last { border: none; }

#footer li a { text-decoration: none; color: #7d98a4; }
#footer li a:hover { text-decoration: underline; }