/* ---------------------
	Title: TAG screen stylesheet
	Filename: screen.css
	Author:TAG
	
	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;
		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: 1em;
	text-align: left;
	background-color: #FFFFFF;
}

/* =Branding
----------------------
	Branding styles: Usually the logo and tagline
	Notes:
		Image replacement: Usually Phark Method (http://www.mezzoblue.com/tests/revised-image-replacement/)
---------------------- */
#branding {
	background-color: #FFFFFF;
}
	#branding-logo {
	}
		#branding-logo a {
	display: block;
	width: 100px;
	cursor: pointer;
	background-color: #FFFFFF;
		}
		#branding-logo h1 {
	text-indent: -5000px;
	overflow: hidden;
	background: url("../images/branding/tagim_logo.gif") top left no-repeat;
	height: 70px;
	width: 100px;
	background-color: #FFFFFF;
		}
	
	/* 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: #003300;
		}
		#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: #006600;
		}
		#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: #003300;
	text-decoration: none;
}
#content a:hover {
	text-decoration: underline;
	color: #003300;
}
#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/buy-me.jpg');
			}
			#content-main #laboratorygroup .content-home-image {
				background-image: url('../images/headers/pencils.jpg');
			}
			#content-main #consumergroup .content-home-image {
				background-image: url('../images/headers/podium.jpg');
			}
			#content-main #medicalgroup .content-home-text {
				background-image: url('../images/headers/marketing_text.gif');
			}
			#content-main #laboratorygroup .content-home-text {
				background-image: url('../images/headers/design_text.gif');
			}
			#content-main #consumergroup .content-home-text {
				background-image: url('../images/headers/events_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; 
			padding: 0 0 0 1em;
			margin: 0.5em 0; 
			height: auto !important; 
			height: 1.4em;
			line-height: 1.5; 
		}
		/* 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; 
			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: 490px; 
		}
		#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; 
			padding: 0.3em 0;
			height: auto;
			display: block;
		}
		#content-main .catgroup .grouptext ul li a {
			background-position: 0em 0.6em; 
			float: none;
			height: auto;
		}
		#content-main .catgroup .grouptext ul li a:hover {
	border-left-color: #FFFFFF;
/*			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; 
			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: #FCFCFC;
			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: #003300;
				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;
}