/* ---------------------
	Title: Farm Design screen stylesheet
	Filename: screen.css
	Author: One Pica Inc, Boston MA
	
	Table of Contents:
		Section Title (Searchstring)			Description
		
		General Styles(=General):				Set font sizes, Page backgrounds, etc
		Master #container Styles(=Master):		Placing, sizing, styling the main container
		Branding Styles(=Branding):				Logos, taglines, branding info
		Navigation Styles(=Nav):				The navigation bar; internal and external
		Content Styles(=Content):				The main content of the page
		Multi-Column Styles(=Multicol):			The cases where the content needs to be in multiple columns
		Credit/Footer Styles(=Footer):			The footer
		Universal Styles(=Uni):					Classes and elements that apply throughout ('clear', 'blue', etc)
	
	Common Color Table:
		White:									#FFFFFF;
		Farm Orange (link color):				#FF8B33;
		Main text color:						#6E6E6E;
		Grey for dark horizontal lines:			#E3E3E3;
		Grey for light horizontal lines:		#F2F2F2;
		Navigation link grey:					#909090;
		
	Project Image Sizes (These are exact & correct; the versions in the Photoshop docs may not be correct):
		Main project image:						450px wide
		Project page thumbnails:				43px square
		Our Work landing page thumbs:			52px square
	
	Thanks To:
		CSS structure/commenting: 				http://www.huddletogether.com/2006/02/16/practical-web-development-tips/
		Markup Structure:						http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html
---------------------- */

/* =General
---------------------- 
	General Styles applied to 'normalize' things
	Notes:
		EM styling generally following (http://www.clagnut.com/blog/348/) from this point 10px=1em, 11px=1.1em, etc
---------------------- */
html {
	padding: 0;
	margin: 0;
	font-size: 100%; /* ensures font consistency across browsers */
}
body {
	padding: 0;
	margin: 0;
	font-size: 62.5%; /* correct value for IE6 */
	line-height: 1.5;
	background-color: #fff;
	text-align: center;/* fix IE5 bug that doesn't honor margin auto */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #6E6E6E;
}
html > body {
	font-size: 10px; /* correct value for non-IE6 browsers */
}
p {
	padding: 0;
	margin: 0 0 1em 0;
}

INPUT, SELECT, TH, TD {font-size: 1em}
H1 {font-size: 2em}  /* displayed at 24px */
H2 {font-size: 1.5em}  /* displayed at 18px */
H3 {font-size: 1.25em}  /* displayed at 15px */
H4 {font-size: 1em; line-height: 1em; margin: 0; padding: 0;}  /* displayed at 12px */

img, a img {
	border: none;
}

/* =Master
---------------------- 
	Master Container
	Notes:
		margin: 0px auto; centers the container horizontally except in IE5, which is fixed in the body tag
---------------------- */
#container {
	position: relative;
	margin: 16px auto 0 auto;
	padding: 0;
	width: 770px;
	font-size: 1.0em; /* displayed at 12px */
	text-align: left; /* unfix all other browsers from the IE fix in the body tag above */
}

/* =Branding
----------------------
	Branding styles: Usually the logo and tagline
	Notes:
		Image replacement: Usually Phark Method (http://www.mezzoblue.com/tests/revised-image-replacement/)
---------------------- */
#branding {
}
	#branding-logo {
	}
		#branding-logo a {
			display: block;
			width: 53px;
			cursor: pointer;
		}
		#branding-logo h1 {
			text-indent: -5000px;
			overflow: hidden;
			background: url("../images/branding/farm_logo.gif") top left no-repeat;
			height: 70px;
			width: 53px;
		}
	
	/* Skip link(s), finalization pending */
		#skiplink a {
			position : absolute;
			top : -1000px;
			left : -2000px;
		}
		
		#skiplink a:focus, #skiplink a:active {
			position : absolute;
			margin : 0;
			top : 0;
			left: 0;
			display : block;
			padding : 0;
			background: #000;
			color : #fff;
			font-weight: bold;
		}
		
		#skiplink a:hover { 
		}
		
	#branding-tagline {
		display: none;
	}
		#branding-tagline h2 {
			/* uncomment this for Image Replacement
			text-indent: -5000px;
			overflow: hidden;
			background: ;
			height: ;
			*/
		}
	#branding-info {
	}

/* =Nav
----------------------
	Navigation styles
	Notes:
		Navigation belongs in an UL tag with <ul><li><a></a></li></ul> as the markup scheme.
		Keep each of the below #elements as divs, and put the UL inside them
		If there's a Left-Hand navigation, use #nav-section, give it a width & float it left
		For all navigation: the "Current" state has the thick underline effect.
			For the "Hover" state, the text turns orange.
---------------------- */
#nav {
	margin: 0;
	padding: 0;
}
	#nav-main {
		height: 2.1em;
		margin: -27px 0 0 0 !important;
		margin: -27px 0 0 0;
		background: url("../images/bg/greyline_tile.gif") 0 2.0em repeat-x;
	}
		#nav-main ul {
			list-style: none;
			display: block;
			float: right;
			clear: both;
			margin: 0;
			padding: 0;
		}
		#nav-main ul li {
			list-style-type: none;
			display: inline; /* fix IE margin baloney, FF ignores this */
			float: left;
			clear: none;
			height: 2.1em;
			width: auto;
			padding: 0.1em 0 0 0;
			margin: 0;
			font-size: 1.2em;
			line-height: 1.2em;
		}
		.homeContainer #nav-main ul li {
			height: 1.6em;
		}
		#nav-main ul li a {
			padding: 0 19px 5px 19px !important;
			padding: 0 19px 8px 19px;
			text-decoration: none;
			color: #909090;
			text-transform: uppercase;
		}
		#nav-main ul li.lastli a {
			padding-right: 0 !important;
		}
		#nav-main ul li a:hover {
			/* border-bottom: 0.4em solid #FF8B33; */
			color: #FF8B33;
		}
		#nav-main ul li a.current {
			/* in IE, border is added to overall height & drawn inside, in FF its drawn outside the element */
			height: 12px !important;
			height: 17px;
			border-bottom: 4px solid #E3E3E3;
			color: #909090;
		}
	#nav-section {
		display: block;
		height: 1.8em;
		margin: 0.9em 0 1em 0 !important;
		margin: 0.5em 0 0 0;
		background: url("../images/bg/lightgreyline_tile.gif") 0 1.7em repeat-x;
		font-family: Verdana, Arial, Helvetica, sans-serif;
	}
		#nav-section ul {
			list-style: none;
			display: block;
			float: right;
			clear: both;
			margin: 0;
			padding: 0;
		}
		#nav-section ul li {
			list-style-type: none;
			display: block;
			float: left;
			clear: none;
			height: 1.5em;
			width: auto;
			padding: 0;
			margin: 0;
			font-size: 1em;
			line-height: 1em;
		}
		#nav-section ul li a {
			height: 1.3em;
			padding: 0.2em 10px 0.4em 10px;
			text-decoration: none;
			color: #D4D4D4;
		}
		#nav-section ul li.lastli a {
			padding-right: 0;
		}
		#nav-section ul li a:hover {
			color: #FF8B33;
		}
		#nav-section ul li a.current {
			/* in IE, border is added to overall height & drawn inside, in FF its drawn outside the element */
			color: #909090;
		}
	#nav-external {
	}

/* =Content
----------------------
	Main Content styles
	Notes:
		font-size: 1em makes the text 10px but expandable in IE
		Remember: The font is inherited, so some math will be necessary to size children up or down correctly
---------------------- */
#content {
	font-size: 1em;
	margin: 0em 0 0 0;
	display: block;
}
#content a {
	color: #FF8B33;
	text-decoration: none;
}
#content a:hover {
	text-decoration: underline;
}
#content h4 {
	font-size: 1.1em;
	height: 1.5em;
}
#content h4.h3point5 {
	/* font-size: 1.2em;
	font-weight: bold;
	padding: 0;
	margin: 0 0 1.6em 0;
	color: #555;
	height: auto; */
	font-size: 1.2em;
	line-height: 1.5;
	font-weight: bold;
	color: #aaa;
	margin-bottom: 0.9em;
}
	#content-main {
		position: relative;
	}
		#content-main #content-home-helper {
			display: block;
			height: 326px;
			width: 770px;
		}
		#content-main .content-home-group {
			position: absolute;
			top: 0;
			left: 0;
			margin: 0;
			padding: 0;
		}
			#content-main .content-home-group .content-home-image {
				margin: 0;
				padding: 0;
				height: 249px;
				width: 770px;
				background-position: top left;
				background-repeat: no-repeat;
			}
			#content-main .content-home-group .content-home-text {
				margin: 0;
				padding: 0;
				height: 77px;
				width: 770px;
				background-position: top right;
				background-repeat: no-repeat;
			}
			#content-main .content-home-group .content-home-text div, #content-main .content-home-group .content-home-text h3 {
				width: 100%;
				text-align: right;
				display: none;
			}
			#content-main #medicalgroup .content-home-image {
				background-image: url('../images/headers/medical.jpg');
			}
			#content-main #laboratorygroup .content-home-image {
				background-image: url('../images/headers/laboratory.jpg');
			}
			#content-main #consumergroup .content-home-image {
				background-image: url('../images/headers/consumer.jpg');
			}
			#content-main #medicalgroup .content-home-text {
				background-image: url('../images/headers/medical_text.gif');
			}
			#content-main #laboratorygroup .content-home-text {
				background-image: url('../images/headers/laboratory_text.gif');
			}
			#content-main #consumergroup .content-home-text {
				background-image: url('../images/headers/consumer_text.gif');
			}
		#content-main h3 {
			height: 2.2em;
			font-size: 2em;
			line-height: 2em;
			margin: 0;
			padding: 0;
			color: #888888;
		}
	#content-main ul {
		list-style: none outside;
		margin: 0;
		padding: 0 0 0 0.2em;
	}
	#content-main ol {
		margin: 0 0 1.1em 2em;
		padding: 0;
	}
		#content-main ol li {
			margin: 0 0 0.2em 0;
		}
	
	#content-main h5 {
		font-size: 1em;
		font-weight: bold;
		color: #999;
		padding: 0;
		margin: 0;
	}
	#content-main .lgtext {
	}
	
	
	
	#content-main .xspa {
		margin-bottom: 1.0em;
	}
	#content-main .x0spa {
		margin-bottom: 0.7em;
	}
	#content-main .x2spa {
		margin-bottom: 1.5em;
	}
	#content-main .x3spa {
		margin-bottom: 2.0em;
	}
	#content-main .x4spa {
		margin-bottom: 2.5em;
	}
	
		/* Non-links */
		#content-main ul li {
			background: transparent url("../images/bg/li_text_bg.gif") 0 0.6em no-repeat; /* HEY JOE - I changed the position from 0em 0.3em to jive with the line-height addition below */
			padding: 0 0 0 1em;
			margin: 0.5em 0; /* HEY JOE - I changed this from 0.8em 0 to compensate for the added line-height */
			height: auto !important; /* HEY JOE - I added this line, to let Firefox adjust the height for multi-line list items like it's supposed to */
			height: 1.4em;
			line-height: 1.5; /* HEY JOE - I added this line, this is what primarily fixes the cut-off-text bug in IE */
		}
		/* Links inside LIs get pushed left to cover the grey bullets */
		#content-main ul li a {
			margin-left: -1em;
			padding-left: 1em;
			display: block;
			height: 1em;
			background: #FFFFFF url("../images/bg/li_anchor_bg.gif") 0 0.6em no-repeat; /* HEY JOE - I changed the position from 0em 0.3em */
			color: #6E6E6E;
		}
		
		#content-main h4.addinfo {
			margin-top: 2em;
		}
		#content-main ul.download {
		
		}
		#content-main .imagebar {
			display: block;
			margin: 0 0 2.1em 0;
		}
		
		/* Styles for the Our Work list of projects */
		#content-main .helper {
			display: block;
			height: 590px; /* HEY JOE - I changed this from 480px to compensate for the extra line-height and the new white background color on the hovering text, so that the hover stuff doesn't block out the footer */
		}
		#content-main .catgroup {
			display: block;
			position: absolute;
			width: 185px;
			height: 430px;
			top: 4.2em;
/*			border-left: 1px solid #CCC;
			border-right: 1px solid #CCC; */
		}
		#content-main #medicalgroup.catgroup {
			/*left: 200px;*/
		}
		#content-main #laboratorygroup.catgroup {
			/*left: 393px;*/
		}
		#content-main #consumergroup.catgroup {
			/*left: 586px;*/
		}
		#content-main .catgroup h4 a {
			color: #6E6E6E;
		}
		#content-main .catgroup .groupimage {
			margin: 0 0 23px 0;
		}
		#content-main .catgroup .grouptext {
			margin: 0 20px;
		}
		#content-main .catgroup .grouptext ul {
			padding-top: 5px;
		}
		#content-main .catgroup .grouptext ul li {
			background-position: 0em 0.6em; /* HEY JOE - I changed this from 0em 0.3em */
			padding: 0.3em 0;
			height: auto;
			display: block;
		}
		#content-main .catgroup .grouptext ul li a {
			background-position: 0em 0.6em; /* HEY JOE - I changed this from 0em 0.3em */
			float: none;
			height: auto;
		}
		#content-main .catgroup .grouptext ul li a:hover {
/*			color: #FF8B33;
			background-image: url("../images/bg/li_anchor_grey_bg.gif");
			background-position: 0 0.4em;
*/		}
		#content-main .projectgroup {
			/* This is the individual project group section */
			display: block;
			position: absolute;
			top: 121px;
			width: 208px;
			height: auto !important;
			height: 56px;
			min-height: 56px;
			background-color: #FFFFFF;
			background-position: right 30px !important; /* HEY JOE - I changed these 2 lines from 27px and 28px respectively, to move the hover image back into alignment with the bullet. After some trial and error, it turned out they are now magically the same value for both Fx and IE */
			background-position: right 30px;
			background-repeat: no-repeat;
		}
		#content-main .projectgroup div.loading {
			width: 100%;
			height: 56px;
			background: url("../images/lightbox/images/loading.gif") 140px 12px no-repeat;
		}
		#content-main .projectgroup a.project {
			display: block;
			height: 56px;
			margin: 0 27px 8px 0;
			text-decoration: none;
			color: #909090;
			background-color: #FFFFFF;
		}
		#content-main .projectgroup a img {
			float: right;
			margin-left: 7px;
			border: 1px solid #E0E0E0;
			background-color: #FFFFFF;
		}
		#content-main .projectgroup a div.blank {
			width: 54px;
			height: 54px;
			float: right;
			border: 1px solid #E0E0E0;
			margin-left: 7px;
			background-color: #FFFFFF;
		}
		#content-main .projectgroup a:hover {
			color: #FF8B33;
			background-color: #FFFFFF;
		}
		#content-main .projectgroup a:hover img {
			border: 1px solid #FF8B33;
		}
		/* STUPID TABLES!! */
		#content-main .projectgroup a table {
			float: left;
			text-align: right;
			width: 110px;
			margin: auto 0;
			border-collapse: collapse;
			background-color: #FFFFFF;
		}
		#content-main .projectgroup a table tr {
			height: 54px;
		}
		#content-main .projectgroup a table tr td {
			text-align: right;
			background-color: #FFFFFF;
			color: #909090;
		}
		
		/* Styles for the project view page */
		#content-main #project-text {
			width: 250px;
			float: left;
			clear: left;
			height: auto !important;
			min-height: 360px;
			height: 360px;
			position: relative;
			top: 0;
			left: 0;
		}
		#project-text #project-text-nav {
			display: block;
			margin: 2em 0 1em 0;
			height: 1.8em;
			font-size: 1.1em;
			background: url("../images/bg/lightgreyline_tile.gif") 0 1.7em repeat-x;
		}
			#project-text-nav ul {
				list-style: none;
				display: block;
				float: left;
				clear: both;
				margin: 0;
				padding: 0;
				height: 1.5em;
			}
			#project-text-nav ul li {
				list-style-type: none;
				display: block;
				float: left;
				clear: none;
				height: 1.5em;
				width: auto;
				padding: 0;
				margin: 0;
				line-height: 1em;
				background: none;
			}
			#project-text-nav ul li a {
				height: 1.4em;
				padding: 0.2em 3px 0.2em 3px;
				text-decoration: none;
				color: #D4D4D4;
				background: none;
				margin: 0;
				width: auto !important;
				width: 1em;
			}
			#project-text-nav ul li.lastli a {
				padding-right: 0;
			}
			#project-text-nav ul li a:hover {
				text-decoration: none;
				color: #FF8B33;
				border-bottom: 0.3em solid #FF8B33;
			}
			#project-text-nav ul li a.current {
				color: #909090;
				border-bottom: 0.3em solid #E3E3E3;
			}
			#project-text .project-text-pane {
				overflow: auto;
/*				position: absolute;
				top: 8em;
				left: 0; */
				margin: 2em 0 0 0;
				float: left;
			}
		#content-main #project-images {
			width: 490px;
/*			height: 360px; */
			float: left;
			margin-left: 25px;
			clear: none;
			position: relative;
		}
			#project-images #nextprev {
				/*float: right;*/
				clear: both;
				height: 33px;
				padding-top: 7px;
				color: #E4E4E4;
				text-align: right;
			}
			#project-images #largeimage {
				float: left;
/*				height: 312px; */
				width: 430px;
				clear: left;
				padding: 0;
				position: relative;
			}
			#project-images #largeimage img {
				z-index:1;
				position: absolute;
				top: 0px;
				left: 0px;
				width: 430px;
				margin: 0;
			}
			#project-images #largeimage img.activeImage {
				z-index:2;
			}
			#project-images #largeimage .border_yes {
				border: 1px solid #E4E4E4;
			}
			#project-images #largeimage .border_no {
				border: 1px solid #FFFFFF;
			}
			#project-images #thumbnails {
				float: right;
				height: 312px;
				width: 46px;
			}
			#project-images #thumbnails a {
				
			}
			#project-images #thumbnails a img {
				border: 1px solid #E4E4E4;
			}
			#project-images #thumbnails a:hover img {
				border: 1px solid #FF8B33;
			}
		/* end styles for the project view page */
	#content-news {
	}
	
/* Styles for Talent page */
	.talentItem {
		float: left;
		display: inline;
		width: 64px;
		height: 64px;
	}
		.talentItem a {
			display: block;
			border: none;
			width: 56px;
			height: 56px;
			padding: 0 6px 6px 0;
			margin: 0;
			background-color: transparent;
		}
			.talentItem a img {
				padding: 1px 0 0 1px;
				margin: 0;
				border: none;
			}
			.talentItem a img.over {
				padding: 0;
				margin: 0;
				border: solid 1px #ff8833;
			}
		.talentItem .talentItemBlank {
			display: block;
			border: none;
			width: 56px;
			height: 56px;
			padding: 0;
			margin: 1px 0 0 1px;
			background-color: #E0E0E0;
		}
		.last {
			width: 58px;
			height: 64px;
		}
			.last a {
				padding: 0 1px 6px 0;
			}
	
	.talentItemInfo, #talentItemInfoBlockerTop, #talentItemInfoBlockerBottom {
		position: absolute;
		top: 0;
		left: 0;
		background-color: #fff;
		width: 100%;
		padding-bottom: 6em;
		margin: 0;
/*		display: none; */
	}
	#talentItemInfoBlockerTop, #talentItemInfoBlockerBottom {
		height: 300px;
		width: 230px;
	}
		.talentItemInfo img {
			padding-top: 1px;
			margin-bottom: 5px;
		}
		.talentItemInfo p {
			margin-bottom: 0.2em;
		}
			


/* =Multicol
----------------------
	Multi-Column Content styles
	Notes:
		This is ONLY for content text. Navigation that goes on the left as a "column" is part of #nav-section
		If you need "pixel-perfect", you'll have to stop using percentages and use actual pixels
---------------------- */
#content div.twoColumnLayout {
	width: 47%;
	float: left;
	clear: none;
}
	#content div.twoColumnLeft {
		margin-right: 5% !important;
		margin-right: 3%;
	}
#content div.threeColumnLayout {
	width: 30%;
	float: left;
	clear: none;
}
	#content div.threeColumnLeft {
		margin-right: 4% !important; /* IE/FF fix, IE views 3% the same way FF does 4% */
		margin-right: 3%;
	}
	#content div.threeColumnMiddle {
		margin-right: 4% !important; /* IE/FF fix, IE views 3% the same way FF does 4% */
		margin-right: 3%;
	}
	#content div.threeColumnRight {
		margin-right: 0;
	}

#content div.talentLeftCol {
	width: 30%;
/*	margin-right: 5% !important;
	margin-right: 3.5%;*/
	margin: 0;
	position: relative;
	top: 0;
	left: 0;
}
#content div.talentRightCol {
	width: 66.5%;
	margin-right: 0;
	position: relative;
	top: 0;
	left: 3.5%;
}

/* =Footer
----------------------
	Credit/footer styles: Usually the copyright/company info
	Notes:
---------------------- */
#siteinfo {
	margin-top: 23px;
	border-top: 1px solid #E3E3E3;
	width: 100%;
	text-align: right;
	padding-top: 3px;
	padding-bottom: 10px;
	color: #B2B2B2;
}
	#siteinfo a {
		text-decoration: none;
		color: #B2B2B2;
	}
	#siteinfo a:hover {
		text-decoration: underline;
	}
	#siteinfo-legal {
	}
	#siteinfo-credits {
	}
	#siteinfo-accessibility {
	}

/* =Uni
----------------------
	Universal styles: Styles that apply to elements found throughout the site
	Notes:
		The best example of this is the "clear" div
---------------------- */
.clear {
	clear: left;
}
code, kbd {
	font-size: 1.1em;
}
acronym, abbr {
	cursor: help;
}

@media (max-width: 767px) {
#content div.talentLeftCol {
width: 100% !important;
display: block !important;
}
#content div.talentRightCol {
width: 100% !important;
top: 180px !important;
}
}