/*------------------------------------------------------------------
Screen Stylesheet for chrispeterson.com

Chris Peterson
19 February 2007
------------------------------------------------------------------*/


/*BASIC LAYOUT
--------------------------------------------------------------------*/
body { 
	margin: 10px 30px;
	background-color: #fff;
	}
	
* {
	margin: 0;
	padding: 0;
	}

#header { 
	height: 40px;
	}
	img.logo {
		margin: 0 0 10px 24%;
		width: 160px;
		}	
h1 {
	margin: 20px 0 10px 24%;
	padding-bottom: 10px; /*prevents descender cutoff*/
	height: 106px;	
	}
	/*Variants*/
	body.portfolio h1, body.thumbnailpage h1 {
		float: left;
		margin-left: 0;
		height: 95px;	
		}
#content {
	clear: left;
	float: right;
	width: 76%; 
	}
	/*Variants*/
	body.main #content {
	width: 100%; 
	}
	#primary {
		float: left; 
		width: 27%; /*of content width*/
		}
		/*Variants*/
		body.thumbnailpage #primary { 
			width: 100%;
			}
		body.main #primary {
			position: relative; /*for all inside*/
			width: 100%; 
			height: 360px;
			}

	#secondary {
		float: right; 
		/*display: inline; */
		width: 68%; /*of content width*/
		}

#sidebar {
	float: left;
	width: 24%; 
	}

#footer {
	clear: both;
	padding: 72px 0 36px 24%;
	}

.clear { /*needed on portfolio pages for IE6*/
	clear: both;
	}


/*NAV LISTS AND THEIR TYPE
--------------------------------------------------------------------*/
/*All navs*/
.nav { 
	margin: 0;
	font-size: 1em;
	line-height: 1.6em;	
	}
	.nav li {
		margin: 0;
		padding: 0;
		}
		.nav li a:link, .nav li a:visited {
			color: #333;
			}
			.nav li a:hover, .nav li a:active {
				color: #adafb2;
				text-decoration: none;
				}

/*Level 1*/
#level1 {
	float: left; /*cedarholm float-to-fix gives ul height*/
	width: 100%;
	margin-bottom: 0;
	padding: 2px 0 3px 0;
	border-top: 1px solid #adafb2;
	border-bottom: 1px solid #adafb2;
	font-size: 0.916em;
	}
	#level1 li {
		float: left;
		width: 12%;
		}
		#level1 li#l1_home {
			padding-left: 24%;
			}

/*Level 2*/
#level2 { /*used on the portfolio pages, floats opposite h1*/
	margin-top: 20px;
	float: left;
	width: 24%;
	}

/*Level 4*/
	#level4 li {
		display: inline;
		padding-right: 0.5em;
		}


/*TYPE
--------------------------------------------------------------------*/
body { 
	font-family: "Helvetica Neue", helvetica, arial, calibri, sans-serif;
	font-size: 62.5%;
	color: #333;
	}

#wrapper {
	font-size: 1.2em; 
	line-height: 1.6em; 
	/*Sets base for everything inside at 12px 
	thanks to 62.5 rule in body.
	Results in: 0.833em=10px, 0.916em=11p,
	1em=12px, 3em=36px, 4em=48pt. 
	Note that leading is relative to this size!*/
	}

#content {
	line-height: 1.6em; 
	}
	
h1 {
	font-size: 4em; 
	line-height: 1em; 
	letter-spacing: -0.05em;
	}
	/*Variants*/
	body.portfolio h1, body.thumbnailpage h1 {
 		font-size: 3em;
		}
h2 {
	font-size: 1em; 
	}

p {
	margin-bottom: 1em;
	}
	p#desc {
		color: #fff;
		}
		
#footer {
	font-size: 0.833em;
	color: #adafb2;
	}
	#footer a:link { 
		color: #adafb2;
		text-decoration: none;
		}
	#footer a:visited { 
		color: #adafb2;
		text-decoration: none;
		}
	#footer a:hover, #footer a:active { 
		color: #24d;
		text-decoration: underline;
		}
		
		
/*BASIC GLOBAL SETTINGS
--------------------------------------------------------------------*/
ul {
	margin: 0 0 1em 0;
	padding: 0;
	list-style: none;
	}
	li {
		margin-bottom: 0.5em;
		}
	ul.list0 li {
		padding-left: 14px;
		background: url(../images/bullet_list0.gif) 1px 0.5em no-repeat;
		margin-bottom: 0;
		}
	ul.list1 li {
		padding-left: 14px;
		background: url(../images/bullet_list2.gif) 1px 0.5em no-repeat;
		}
	ul.list2 li {
		padding-left: 14px;
		background: url(../images/bullet_list2.gif) 1px 0.5em no-repeat;
		margin-bottom: 0;
		}
			
dl { 
	float: left; 
	width: 31.7%;
	}
	dt {
		margin-bottom: 20px;
		}
		dt img {
			border: 1px solid #dddfe2;
			}
	dd {
		height: 6em;
		}
		dd strong {
			display: block;
			}

img {
	display: block;
	border: 0;
	}
	img.exhibit {
		margin: 3px 0 10px 0;
		border: 1px solid #dddfe2;
		}
	img.exhibit_norule {
		margin: 3px 0 10px 0;
		border: none;
		}

table {
	width: 100%;
	text-align: left;
	vertical-align: top;
	border-collapse: collapse;
	}
	tr {
		}
	th {
		text-align: left;
		vertical-align: top;
		}
	td {
		vertical-align: top;
		padding: 2px 0;
		}
	table.thumbnails td { /*for thumbnail display full-width tables*/
		text-align: left; 
		vertical-align: top;
		width: 25%;
		padding-bottom: 10px;
		} 

form {
	margin-bottom: 20px;
	}
	fieldset {
		border: none;
		}
	legend {
		display: none;
		}
	label {
		display: block
		}
	input {
		display: block;
		margin-bottom: 10px;
		}

/*basic text links if used*/
a:link { 
	color: #249;
	text-decoration: none;
	}
a:visited { 
	color: #249;
	text-decoration: none;
	}
a:hover, a:active { 
	color: #24d;
	text-decoration: underline;
	}


/*hCARD
--------------------------------------------------------------------*/
.hide {
	display: none;
	}
.org {
	font-weight: bold;
	}
.adr {
	margin-bottom: 1em;
	}
.email {
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	}
.vcard-download {
	font-weight: normal !important;
	padding-left: 22px;
	background: url(../images/icon_vcard.gif) 0 -2px no-repeat;
	height: 1.6em;
	}
		
		
/*MAIN PAGES LAYOUT
--------------------------------------------------------------------*/
body.main #primary_copy {
	position: absolute;
	top: 16px;
	left: 20px;
	width: 20%;
	}
body.main #primary_art {
	position: absolute;
	top: 16px;
	left: 24%;
	width: 75%;
	height: 344px;
	}
body.main #detail {
	float: left;
	width: 44%;
	margin: 20px 0 0 24%;
	}
body.main #sidebar {
	float: right;
	width: 28%;
	margin-top: 20px;
	}

/*link color changes to white in the color space*/
body.main #primary {
	color: #222;
	font-weight: normal;
	}
body.main #primary strong {
	color: #111;
	font-weight: normal;
	}
body.main #primary h2 {
	color: #111;
	font-weight: bold;
	}
body.main #primary a:link, body.main #primary a:visited {
	color: #fff;
	font-weight: bold;
	}
	body.main #primary a:hover, body.main #primary a:active {
		color: #ddd;
		text-decoration: none;
		font-weight: bold;
		}

/*Different section color, art and placement settings*/
/*Home*/
body#home #primary {
	background-color: #ffa630;
	}
body#home #primary_art {
	background: #ffa630 url(../images/main_barchart.gif) 0 0 no-repeat;
	}

/*Services*/
body#services #primary {
	background-color: #729acd;
	margin-bottom: 16px;
	}
body#services #primary_copy {
	width: 18%;
	}
body#services #primary_copy2 {
	position: absolute;
	top: 16px;
	left: 24%;
	z-index: 1;
	width: 20%;
	}
body#services #primary_art {
	position: absolute;
	top: 16px;
	left: 24%; 
	margin-left: -23px; /*aligns copy with truck, not hitch*/
	width: 74%;
	height: 324px;
	background: #729acd url(../images/main_truck.gif) left bottom no-repeat;
	}
/*body#services #detail {
	width: 48%;
	margin-left: 24%;
	}

/*Portfolio*/
body#portfolio #primary {
	background-color: #95b825;
	}
body#portfolio #primary_copy {
	position: absolute;
	top: 16px;
	left: 24%;
	width: 20%;
	height: 284px;
	background: #95b825 url(../images/main_marker_cap.gif) left bottom no-repeat;
	}
body#portfolio #primary_art {
	position: absolute;
	top: 16px;
	left: 0;
	width: 22%;
	height: 284px;
	background: #95b825 url(../images/main_marker.gif) right bottom no-repeat;
	}

/*Background*/
body#background #primary {
	background-color: #f05490;
	margin-bottom: 16px;
	}
body#background #primary_copy {
	position: absolute;
	top: 16px;
	left: 24%;
	width: 46%;
	height: 304px;
	}
body#background #primary_art {
	position: absolute;
	top: 16px;
	left: 0;
	width: 22%;
	height: 344px;
	background: #f05490 url(../images/main_protractor.gif) right bottom no-repeat;
	}

.profile {
	margin-left: -128px;
	margin-bottom: 5px;
	border-bottom: 1px solid #adafb2;
	}
	.profile img {
		float: left;
		width: 108px;
		padding-top: 6px;
		}
	.bio {
		margin-left: 128px;
		margin-bottom: 20px;
		}

/*Contact*/
body#contact #primary {
	background-color: #ff7d26;
	}
body#contact #primary_copy {
	position: absolute;
	top: 16px;
	left: 24%;
	width: 24%;
	}
	body#contact #primary_copy p {
		margin-top: 3.2em;
		}
	body#contact #primary_copy p a {
		font-weight: normal;
		}
body#contact #primary_art {
	position: absolute;
	top: 16px;
	left: 0;
	width: 23%;
	height: 344px;
	background: #ff7d26 url(../images/main_tree.gif) right bottom no-repeat;
	}

/*Extranet*/
body#extranet #primary {
	background-color: #a88fcc;
	}
body#extranet #primary_copy {
	position: absolute;
	top: 16px;
	left: 24%;
	width: 20%;
	}
body#extranet #primary_art {
	position: absolute;
	top: 16px;
	left: 0;
	width: 20%;
	height: 344px;
	background: #a88fcc url(../images/main_streetsign.gif) right bottom no-repeat;
	}

/*Error*/
body#error #primary {
	background-color: #ff3e33;
	}
body#error #primary_copy {
	position: absolute;
	top: 16px;
	left: 24%;
	z-index: 1;
	width: 44%;
	}
body#error #primary_art {
	position: absolute;
	top: 16px;
	left: 0;
	width: 29%;
	height: 344px;
	background: #ff3e33 url(../images/main_forklift.gif) right bottom no-repeat;
	}
body#error #primary a:link, body#error #primary a:visited {
	font-weight: normal;
	}


/*NAV LIST ON STATE CONTROLS
--------------------------------------------------------------------*/
/*Body ID controls which nav items are on.*/

/*Home*/
body#home #l1_home a { color: #adafb2; }
/*Services*/
body#services #l1_services a { color: #adafb2; }
/*Portfolio*/
body.portfolio #l1_portfolio a { color: #adafb2; }
	body#portfolio_web_alt #l2_web a { color: #adafb2; }/*section*/
	body#portfolio_web_alt #l3_alt a { color: #88b300; }/*page*/
	body#portfolio_web_che #l2_web a { color: #adafb2; }/*section*/
	body#portfolio_web_che #l3_che a { color: #88b300; }/*page*/
	body#portfolio_web_han #l2_web a { color: #adafb2; }/*section*/
	body#portfolio_web_han #l3_han a { color: #88b300; }/*page*/
	body#portfolio_web_inn #l2_web a { color: #adafb2; }/*section*/
	body#portfolio_web_inn #l3_inn a { color: #88b300; }/*page*/
	body#portfolio_web_mar #l2_web a { color: #adafb2; }/*section*/
	body#portfolio_web_mar #l3_mar a { color: #88b300; }/*page*/
	body#portfolio_web_more #l2_web a { color: #adafb2; }/*section*/
	body#portfolio_web_more #l3_more a { color: #88b300; }/*page*/
	body#portfolio_web_scp #l2_web a { color: #adafb2; }/*section*/
	body#portfolio_web_scp #l3_scp a { color: #88b300; }/*page*/
	body#portfolio_web_sof #l2_web a { color: #adafb2; }/*section*/
	body#portfolio_web_sof #l3_sof a { color: #88b300; }/*page*/
	body#portfolio_app_kno #l2_app a { color: #adafb2; }/*section*/
	body#portfolio_app_kno #l3_kno a { color: #88b300; }/*page*/
	body#portfolio_app_knob #l2_app a { color: #adafb2; }/*section*/
	body#portfolio_app_knob #l3_knob a { color: #88b300; }/*page*/
	body#portfolio_app_jrvc #l2_app a { color: #adafb2; }/*section*/
	body#portfolio_app_jrvc #l3_jrvc a { color: #88b300; }/*page*/
	body#portfolio_app_wel #l2_app a { color: #adafb2; }/*section*/
	body#portfolio_app_wel #l3_wel a { color: #88b300; }/*page*/
	body#portfolio_brand_ces #l2_brand a { color: #adafb2; }/*section*/
	body#portfolio_brand_ces #l3_ces a { color: #88b300; }/*page*/
	body#portfolio_brand_dis #l2_brand a { color: #adafb2; }/*section*/
	body#portfolio_brand_dis #l3_dis a { color: #88b300; }/*page*/
	body#portfolio_brand_id #l2_brand a { color: #adafb2; }/*section*/
	body#portfolio_brand_id #l3_id a { color: #88b300; }/*page*/
	body#portfolio_brand_inn #l2_brand a { color: #adafb2; }/*section*/
	body#portfolio_brand_inn #l3_inn a { color: #88b300; }/*page*/
	body#portfolio_brand_wes #l2_brand a { color: #adafb2; }/*section*/
	body#portfolio_brand_wes #l3_wes a { color: #88b300; }/*page*/
/*Background*/
body#background #l1_background a { color: #adafb2; }
/*Contact*/
body#contact #l1_contact a { color: #adafb2; }


/*EXTRANET
--------------------------------------------------------------------*/	
/*Layout*/
body.extranet #header {
	height: 20px;
	border-bottom: 1px solid #adafb2;
	padding-bottom: 4px;
	margin-bottom: 10px;
	}

	body.extranet #primary {
		float: left; 
		width: 47%; /*of content width*/
		}
	body.extranet #secondary {
		float: right; 
		width: 50%; /*of content width*/
		}
	body.full #primary { /*new testing...............*/
		float: left; 
		width: 100%; /*of content width*/
		}
	body.full #secondary {
		display: none;
		float: right; 
		width: 0%; /*of content width*/
		}

/*Type*/
body.extranet #content, body.extranet #sidebar {
	font-size: 0.916em;
	line-height: 1.6em;
	}
body.extranet h1 {
	font-size: 3em;
	height: 60px;
	margin-top: 0;
	}

/*Table*/
body.extranet table {
	width: 100%;
	}
	body.extranet tr {
		}
		body.extranet tr.new {
			background-color: #edeff2;
			}
		body.extranet tr:hover {
			background-color: #edeff2;
			}
	body.extranet th {
		border-bottom: 1px solid #cdcfd2;
		padding: 2px 2px 3px 0;
		margin-bottom: 6px;
		}
		body.extranet th:hover {
			background-color: #fff;
			}
	body.extranet td {
		border-bottom: 1px solid #dddfe2;
		padding: 2px 2px 3px 4px;
		}
		body.extranet td.book {
			padding-left: 28px;
			background: url(../images/icon_book.gif) 0 50% no-repeat;
			}
		body.extranet td.book-new {
			font-weight: bold;
			padding-left: 28px;
			background: url(../images/icon_book_new.gif) 0 50% no-repeat;
			}
		body.extranet td.doc {
			padding-left: 28px;
			background: url(../images/icon_doc.gif) 0 50% no-repeat;
			}
		body.extranet td.doc-new {
			font-weight: bold;
			padding-left: 28px;
			background: url(../images/icon_doc_new.gif) 0 50% no-repeat;
			}
		body.extranet td.pdf {
			padding-left: 28px;
			background: url(../images/icon_pdf.gif) 0 50% no-repeat;
			}
		body.extranet td.pdf-new {
			font-weight: bold;
			padding-left: 28px;
			background: url(../images/icon_pdf_new.gif) 0 50% no-repeat;
			}
		body.extranet td.web {
			padding-left: 28px;
			background: url(../images/icon_web.gif) 0 50% no-repeat;
			}
		body.extranet td.web-new {
			font-weight: bold;
			padding-left: 28px;
			background: url(../images/icon_web_new.gif) 0 50% no-repeat;
			}
		body.extranet td.webcomp {
			padding-left: 28px;
			background: url(../images/icon_webcomp.gif) 0 50% no-repeat;
			}
		body.extranet td.webcomp-new {
			font-weight: bold;
			padding-left: 28px;
			background: url(../images/icon_webcomp_new.gif) 0 50% no-repeat;
			}
		body.extranet td.zip {
			padding-left: 28px;
			background: url(../images/icon_zip.gif) 0 50% no-repeat;
			}
		body.extranet td.zip-new {
			font-weight: bold;
			padding-left: 28px;
			background: url(../images/icon_zip_new.gif) 0 50% no-repeat;
			}
body.extranet table.deliverables td {
	background-color: #f6f6f6;
	}
	
body.extranet .focus th {
	color: #000;
	}
body.extranet .focus td {
	color: #000;
	background-color: #efd;
	}

/*thumpop display - used only for google design reviews - need to better id these styles*/	
body.extranet table.thumbpop tr:hover {
	background-color: #fff;
	}
body.extranet table.thumbpop td {
	width: 25%;
	padding-bottom: 2em;
	padding-left: 0;
	border-bottom: 0 solid #fff;
	}
	body.extranet table.thumbpop td img {
		margin: 0.5em 0 1em 0;
		width: 144px;
		border: 1px solid #dddfe2;
		}
	body.extranet table.thumbpop td img.thumbpopsm {
		margin: 0.5em 0 1em 0;
		width: 72px;
		border: 1px solid #dddfe2;
		}
	table.thumbpop td strong {
		/*display: block;
		font-weight: normal;*/
		}


/*approvals variant*/
body.extranet table.approval tr {
	border-bottom: 1px solid #dddfe2;
	}
body.extranet table.approval tr:hover {
	background: none; !important
	}
body.extranet table.approval td {
	padding: 5px 30px 20px 0;
	width: auto;
	}
	table.approval ul {
		list-style: disc;
		margin-left: 10px;
		}
	table.approval ul li {
		}


/*Full-screen mockup exhibits in extranet - using 1/2 left margin*/
body#mocks img.logo {
	margin-left: 12%;
	}
	body#mocks #content {
		width: 88%;
		}
		body#mocks h1 {
			float: left;
			margin: 0 0 10px 0;
			height: 95px;	
			}
		body#mocks #level2 {
			margin-top: 0;
			width: 12%;
			}
		body#mocks #primary {
			width: 100%;
			}
		body#mocks #primary img {
			margin-bottom: 2em;
			}
	body#mocks #sidebar {
		width: 10%;
		}
		body#mocks #level4 li {
			display: block;
			}
	body#mocks #footer {
		padding-left: 12%;
		}