/* --------- UPDATE INFO --------------------------------
	
Created: August 8, 2009
Updated by: Peter Gurry, www.gurrydesign.com

--------- CONTENTS --------------------------------------

	============================
	=1: Primary Styles
	============================
	=2: Header
	----------------------------
		=2a: Header Structure
		=2b: Headings
	============================
	=3: Bio
	----------------------------
		=3a: Bio Structure
		=3b: Type
		=3c: Images
		=3d: Links
	============================
	=3: Body
	----------------------------
		=3a: Body Structure
		=3b: Type
		=3c: Buttons
	============================
	=5: Contact and Footer
	----------------------------
		=5a: Contact
		=5b: Footer
	============================
	=6: Misc
	============================
		
--------------------------------------------------------- */

/*  COLORS ----------------

	Text Gray: #2e2e2e;
	Dark Green: #2c381e;
	Dark Red: #921717;
	
=========================== */


/*	=1: Primary Styles
=============================================== */

* { 
	margin:0;
	padding:0;
}
body {
	background: #faf8f4 url('bg_main_and_contact.jpg') repeat-x center 131px;
	font:12px/1.5em tahoma, Verdana, Arial, Helvetica, sans-serif;
	color:#2e2e2e ;
}
h2 {
	font-size:200%;
	line-height:1em;
	margin:0 0 .5em;
	color:#2c381e;
}
h3 {
	font: bold 120%/1.5em Georgia, "Times New Roman", Times, serif;
	margin:1em 0 .5em;
	letter-spacing:.1em;
	font-variant:small-caps;
	color:#921717;
	text-transform:lowercase;
	text-shadow: 1px 1px 0 #FAF7F4;
}
h4 {
	font:bold 90%/1.5em Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing:.1em;
	margin:0 0 1em;
	color:#959281;
}
p, li {
	line-height: 1.7em;
	margin: .5em 0 1.5em;
	text-align:justify;
}
li {
	margin:0 0 .5em;
}
a {
	text-decoration:underline;
	color:#921717;
}
a:hover {
	text-decoration:none;
}
a:visited {

}
em {
	font-style: italic;
}
strong {
	font-weight:bold;	
}
acronym {
	text-transform:uppercase;
	font-size:90%;
	letter-spacing:.1em;
}
#bio acronym {
	font-size:80%;
}
.container {
	width:1000px;
	margin:0 auto;
}


/*	=2: Header
=============================================== */


/*	=2a: Header Structure
---------------------------------------------- */

#header {
	background: url('bg_header.jpg') repeat-x center top;
}
#header .container {
	background:url('bg_bio_top.jpg') no-repeat center bottom;
	height:208px;
}


/*	=2b: Headings
---------------------------------------------- */

h1 {
	font: 300%/55px Georgia, "Times New Roman", Times, serif;
	background:url('logo_and_tagline.jpg') no-repeat 70px 54px;
	padding:54px 0 0 70px;
	width:500px;
	letter-spacing:-.02em;
	text-indent:-50005px;
	height:55px;
}
#header p {
	padding-left:80px;
	background:url('logo_and_tagline.jpg') no-repeat 70px bottom;
	text-indent:-50005px;
	font-size:150%;
	margin:0;
	width:500px;
	height:31px;
}
#header img {
	position:relative;
	top:-112px;
	left:550px;
}


/*	=3: Bio
=============================================== */


/*	=3a: Bio Structure
---------------------------------------------- */

#bio {
	width:880px;
	margin:0 auto;
	background:url(bg_bio.png) repeat-y center top;
	padding:0 60px 0;
	overflow:hidden;
}
div.collapsed {
	height:225px;
}
#bio-bottom {
	background:url(bg_bio_bottom.png) no-repeat center bottom;
	height:55px;
	width:920px;
	margin:0 auto 20px;
	padding:0 40px;
}
#bio-bottom a#expand, #bio-bottom a#collapse {
	width:150px;
	height:55px;
	display:block;
	float:right;
	margin:-10px 13px 0 0;
	text-indent:-50000px;
}


/*	=3b: Bio Type
---------------------------------------------- */

div.expanded p {
	display:block;
}
#bio p {
	font:120%/1.8em Georgia, "Times New Roman", Times, serif;
	color:#383a35;
	text-align:justify;
}
p.first {
	margin-top:0;
}
p.first:first-line {
	text-transform:uppercase;
	letter-spacing:.08em;
	color:#000;
}
#experience {
	background:url(bg_experience.jpg) no-repeat top right;
	width:350px;
	height:120px;
	float:right;
	margin:0 -30px 0 20px;
}
#experience h3 {
	text-align:center;
	margin:24px 25px 0 0;
}
#experience ul {
}
#experience ul li {
	float:left;
	background:url(logos.png) no-repeat left center;
	height:65px;
	text-indent:-50000px;
	margin-top:2px;
}
#experience ul li#logo-01 {
	width:100px;
}
#experience ul li#logo-02 {
	width:125px;
	background-position:center center;
}
#experience ul li#logo-03 {
	width:93px;
	background-position:right center;
}


/*	=3c: Bio Images
---------------------------------------------- */

#bio img {
	float:left;
	margin:5px 20px 0 0;
	border:1px solid #000;
}

/*	=3d: Bio Links
---------------------------------------------- */

#bio-bottom a#expand {
	background:url(btn_read.png) no-repeat center top;	
}
#bio-bottom a:hover#expand {
	background:url(btn_read.png) no-repeat center -56px;	
}
#bio-bottom a#collapse {
	background:url(btn_read.png) no-repeat center -110px;
	display:none;
}
#bio-bottom a:hover#collapse {
	background:url(btn_read.png) no-repeat center -165px;	
}

	
	
	
/*	=3: Body
=============================================== */

#body {
	width:1000px;
	margin:0 auto;
}



/*	=3a: Body Structure
---------------------------------------------- */

#left {
	width:328px;
	float:left;
	margin:0 20px 0 60px; /* the right margin isn't really necessary since the #right <div> is floated right, but I've kept it for posterity */
}
#article {
	background:url(bg_sprites.png) no-repeat -7px -5px;
	padding:30px 30px 0;
}
#callout {
	background:url(bg_sprites.png) no-repeat -7px -5px;
	padding:30px 30px 4px;
}
#left .bottom {
	background:url(bg_sprites.png) no-repeat -7px -402px;
	height:23px;
	margin-bottom:30px;
}
#right {
	width:515px;
	float:right;
	margin-right:58px;
}
#case-study {
	background:url(bg_sprites.png) no-repeat -7px -426px;
	padding:30px 0 0;
	overflow:hidden;
	height:673px;
	width:515px;
}
#case-study-container {
	width:9999px;
	background:url(bg_case_study_content.jpg) no-repeat left 97px;	/* the 97px gives some space for the navigation to show through */
	height:673px; 
}
#case-study-container > ul {
	position:relative;
	top:-50px;
}
#case-study-container > ul > li {
	float:left;
	padding:45px 30px 20px;
	width:455px;
	position:relative;
	font-size:110%; /* This was added for the extra article. Increasing the font size helps the right column end at the same spot as the left. */
}
#right .bottom {
	background:url(bg_sprites.png) no-repeat -7px -554px;
	height:14px;
	margin-bottom:30px;
}


/*	=3b: Type
---------------------------------------------- */

#article h2 {
	background:url(bg_headings.png) no-repeat left top;
	text-indent:-50000px;	
	width:165px;
	height:78px;
}
#article h3 {
	width:275px;
	margin:20px 0 0;
	height:59px;
	text-indent:-5000000px;
	background:url(bg_headings.png) no-repeat left -78px;
}
#article p {
	font-size:90%;
	background:url(bg_sprites.png) no-repeat left -705px;
	margin:15px 0 0;
	padding-top:15px;
}
#article a#btn-article {
	display:block;
	float:right;
	position:relative;
	top:-54px;
	left:50px;
	background:url(btn_article.png) no-repeat left top;
	width:149px;
	height:134px;
	text-indent:-50000px;
}
#article a:hover#btn-article {
	background-position:right top;
}
#callout h2 {
	background:url(bg_headings.png) no-repeat left -211px;
	text-indent:-50000px;	
	width:283px;
	height:16px;
	margin:6px 0 15px -7px;
}
#callout p {
	line-height:200%; /* helps the Callout box to finish at the same place as the case study box */
	margin-bottom:0;
}
#case-study h4 {
	background:url(bg_headings.png) no-repeat left -137px;
	text-indent:-50000px;
	width:110px;
	height:10px;
	line-height:10px;
	margin-top:10px;
}
#case-study h4.first {
	background-position:left -137px;
}
#case-study h4.second {
	background-position:-114px -137px;
}
#case-study h3:first-child {
	margin-top:0;
}
#case-study h2 {
	background:url(bg_headings.png) no-repeat left -158px;
	text-indent:-50000px;
	margin:0;
	height:50px;
}
#case-study h2.first {
	background-position:left -158px;
}
#case-study h2.second {
	background-position:left -227px;
}
#case-study p.navigation {
	background:url(bg_sprites.png) no-repeat -7px -570px;
	height:42px;
	line-height:42px;
	text-align:center;
	margin:0 -26px;
	position:relative;
	z-index:5; /* this keeps the navigation on top of the case study content */
}
#case-study ul ul {
	list-style-type:disc;
}
#case-study ul ul li {
	margin-left:1.3em;
}
p + ul {
	margin-top:-1em;
}


/*	=3c: Buttons
---------------------------------------------- */
#case-study p.navigation a#btn-previous, #case-study p.navigation a#btn-next {
	display:block;
	float:left;
	height:42px;
	width:101px;
	line-height:42px;
	text-indent:-5000000px;
	background:url(bg_sprites.png) no-repeat -109px -618px;
	margin-left:390px;
}
#case-study p.navigation a#btn-previous {
}
/* Hover states for buttons */
#case-study p.navigation a:hover#btn-previous, #case-study p.navigation a:hover#btn-next {
	background-position: -109px -660px;
}
#case-study p.navigation a#btn-next {
	background-position: -7px -618px;
}
#case-study p.navigation a:hover#btn-next {
	background-position: -7px -660px;
}

/*	=5: Contact and Footer
=============================================== */

/*	=5a: Contact
---------------------------------------------- */

#contact {
	background:url(bg_main_and_contact.jpg) repeat-x center top;
	height:77px;
	border-top:1px solid #bcb9aa;
	border-bottom:1px solid #fff;
}
#contact ul {
	float:left;
	margin:16px 0 0 63px;
}
#contact ul li {
	line-height:1.5em;
	color:#585b4f;
	text-shadow:1px 1px 0 #faf9f5;
	padding-left:25px;
	letter-spacing:1px;
}
#contact ul li.address {
	background: url(icons_contact.png) no-repeat left 3px;
}
#contact ul li.email {
	background: url(icons_contact.png) no-repeat left -19px;
}
#contact ul li.phone {
	background: url(icons_contact.png) no-repeat left -41px;
}
#contact a, #contact a:visited {
	color:#585b4f;
}
#contact a:hover {
	color:#232420;
}

/*	=5b: Footer
---------------------------------------------- */

#footer {
	background:url(bg_footer.jpg) repeat-x center top;
	height:39px;
	border-top:1px solid #778664;
}
#footer p {
	font-size:90%;
	text-align:right;
	margin:11px 65px 0 0;
	color:#868e7d;
	text-shadow:1px 1px 0 #ebeee4;
}
#footer p a {
	color:#797e72;
}

/*	=6: Misc
=============================================== */
.visible {
	visibility:visible !important;
}
.block {
	display:block !important;
}
.hidden {
	display:none !important;
}
.inline {
	display:inline !important;
}
ul.last {
	margin-left:84px !important;
}
.kern-tight {
	letter-spacing:-1px;
}
.kern-loose {
	letter-spacing:1px;
}