@charset "UTF-8";
/* CSS Document containing GLOBAL rules for all browsers
	Layout markup by J Hogue. Original concept design by DBVW Architects and J Hogue at Highchair designhaus 
	
XX  XX  XX  XXXXX  XX  XX  XXXXX  XX  XX  XXXXX  XX  XXXXX     XXXX   XXXXX   XXXX  XX  XXXXX  XX  X  XX  XX  XXXXX  XX   X   XXXX
XX  XX  XX  XX     XX  XX  XX     XX  XX  XX  X  XX  XX  X     XX  X  XX     XX     XX  XX     XX  X  XX  XX  XX  X  XX   X  XX   
XXXXXX  XX  XX XX  XXXXXX  XX     XXXXXX  XX  X  XX  XX  X     XX  X  XXXXX   XXX   XX  XX XX  X X X  XXXXXX  XX  X  XX   X   XXX 
XX  XX  XX  XX  X  XX  XX  XX     XX  XX  XXXXX  XX  XXXX      XX  X  XX        XX  XX  XX  X  X  XX  XX  XX  XXXXX  XX   X     XX
XX  XX  XX  XXXXX  XX  XX  XXXXX  XX  XX  XX  X  XX  XX  X     XXXX   XXXXX  XXXX   XX  XXXXX  X  XX  XX  XX  XX  X   XXX    XXXX 

*/

html, body, table, address, form, fieldset, input { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, pre, td, hr, blockquote, ul, ol, li, dl, dt, dd, address { margin: 0; padding: 0; }
input, select, textarea { font-size: 100%; }

body, td, input, select, textarea { font-family: HelveticaNeueNormal, "Helvetica Neue Normal", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; }
body {
	color: #000;
	text-align: left; 
	font-size: 12px; 
	line-height: 18px;
	background-color: #232323; 
}
img, img a, a img { border: none; }
img { display: block; }
a { text-decoration: none; color: #000; }
a:hover { color: #fff; }

.clearit { clear: both; }

a[href$=".pdf"] { background: top left no-repeat url("../cssimages/pdf-icon.png") transparent; padding-left: 16px; }

/* ! Color Scheme:
	orange = #fb4
	light blue = #7bd
*/

#everyoneneedsawrapper {
	width: 900px; 
	margin: 10px auto; 
}

/* ! - - - - - Header and some Navigation elements - - - - - */
#header { padding: 0 0 4px 0; }
	table#tableHeader { border: 0; width: 100%; }
		table#tableHeader td.top { height: 40px;  } /* This height adjusts the main nav distance from the top */
		table#tableHeader td.bottom { height: 80px;  }
	#globalnav {
		padding: 15px 0 0 0; 
		text-align: right; 
		text-transform: uppercase; 
		letter-spacing: 1px; 
		font: normal 12px ArialNarrow, "Arial Narrow", HelveticaNeueNormal, "Helvetica Neue Normal", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
		#globalnav a {
			padding: 0 0 0 10px; 
			color: #fff; 
		}
		#globalnav a:hover { color: #fb4; }
#bigbuttons {
	padding: 0 0 5px 0; 
	height: 30px;  
}
#firmnav { float: right; }
	#firmnav a#firmbutton {
		display: block; 
		width: 110px; 
		height: 29px; 
		/* convention of coordinates: from left then from top */
		background: 0 0 no-repeat url("../cssimages/firm-work-buttons.png") transparent; 
	}
	#firmnav a#firmbutton:hover { background-position: 0 -31px; }
	#firmnav a#firmbutton.select { background-position: 0 -31px; }
	#firmnav a#firmbutton.select:hover { background-position: 0 0; }
#worknav { float: right; }
	#worknav a#workbutton {
		display: block; 
		width: 120px; 
		height: 29px; 
		background: -150px 0 no-repeat url("../cssimages/firm-work-buttons.png") transparent; 
	}
	#worknav a#workbutton:hover { background-position: -150px -31px; }
	#worknav a#workbutton.select { background-position: -150px -31px; }
	#worknav a#workbutton.select:hover { background-position: -150px 0; }
#worksubnav, #firmsubnav {
	background-color: #555;
	padding-right: 7px; 
}

#content { clear: both; padding: 5px 0 0 0; }
	#content.home {
		margin: 10px 0 0 0; 
		border-top: 1px solid #555;
		padding: 15px 0 0 0; 
	}
	/* ! - - - Home page - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	#firmimg.home-half { float: left; text-align: left;  }
	#workimg.home-half { float: right; text-align: right;  }
	.home-half {
		width: 436px; 
		padding: 0 2px; 
	}
	#home_noflashbox { }
		#home_noflashbox a { 
			display: block; 
			width: 425px;
			height: 324px;
			background: top left no-repeat url() #222;
		}
		#home_noflashbox a:hover { background-position: top right; }
		#home_noflashbox.firm a { background-image: url("../cssimages/home_firm.jpg"); }
		#home_noflashbox.work a { background-image: url("../cssimages/home_work.jpg"); }
	
	/* ! - - - Shared styles for text on Firm and Work pages - - - - - - - - - - - - - - - - - - - - - - - - - - */
	#text { 
		width: 325px; 
		height: 470px; 
		padding: 15px;
		/* border: 1px solid #b11; */ 
	}
	#photo {
		width: 500px;
		padding: 15px 15px 0 15px; 		
	}
		#content-firm #photo, #content-global #photo { float: right; text-align: right; }
	#content-firm h1, #content-work h1, #content-global h1 {
		font: bold 14px/20px HelveticaNeueNormal, "Helvetica Neue Normal", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; 
		color: #222; 
		text-transform: uppercase; 
		letter-spacing: 2px; 
		padding: 0 0 8px 0; 
	}
	#content-firm h2, #content-work h2, #content-global h2 {
		font: bold 12px/18px HelveticaNeueNormal, "Helvetica Neue Normal", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; 
		color: #222; 
		letter-spacing: 1px; 
		padding: 8px 0 2px 0; 
	}
	#content-firm h3, #content-work h3, #content-global h3 {
		font: normal 14px/18px HelveticaNeueNormal, "Helvetica Neue Normal", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; 
		color: #111; 
		letter-spacing: 1px; 
	}
	#content-firm h4, #content-work h4, #content-global h4 {
		font: bold 12px/18px HelveticaNeueNormal, "Helvetica Neue Normal", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; 
		color: #222; 
		letter-spacing: 1px; 
		padding: 0 0 10px 0; 
	}
	#content-firm hr, #content-work hr, #content-global hr {
		margin: 3px 5px 12px 0; 
		border-top: 1px solid #444; 
		height: 1px; 
	}
		#content-firm hr { background-color: #7bd; color: #7bd; }
		#content-work hr { background-color: #fb4; color: #fb4; }
		#content-global hr { background-color: #666; color: #666; }
	#content-firm p, #content-work p, #content-global p, 
	#content-firm td, #content-work td, #content-global td, 
	#content-firm li, #content-work li, #content-global li,
	#content-firm dt, #content-work dt, #content-global dt,
	#content-firm dd, #content-work dd, #content-global dd, {
		color: #000;
		font-size: 12px; 
		line-height: 18px; 
	}
	#content-firm p, #content-work p, #content-global p {
		padding: 0 0 12px 0; 
	}
		#content-work p.back {
			padding: 8px 0 0 0; font-weight: bold; 
		}
	#content-firm dt, #content-work dt, #content-global dt { font-weight: bold; }
	#content-firm dd, #content-work dd, #content-global dd { padding: 0 0 8px 0; }
	
	
	/* ! - - - Firm pages - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	#content-firm { background: top center repeat-y url("../cssimages/back-firm.png") #7bd; }
	#content-firm #photo { }
		#content-firm #heads a.person {
			display: block; 
			float: left; 
			width: 66px; 
			height: 69px; 
			background-color: #666; 
			color: #fff; 
			margin: 0 5px 5px 0; 
			overflow: hidden; 
		}
		#text img.left {
			float: left; 
			margin: 0 10px 0px 0; 
		}
	#content-firm #text, #content-global #text { float: left; width: 335px; padding: 15px 0 15px 15px; }
		#content-work #text a#back { 
			background: top left no-repeat url("../cssimages/back-arrow.png") transparent; 
			padding: 0 0 0 16px; 
			font-weight: bold; 
		}
	#content-firm #text #scrollbars a { color: #369; }
	#content-firm #text #scrollbars a:hover { color: #eee; }
	#content-firm #text #scrollbars h2 a, #content-firm #text #scrollbars h3 a { color: #222; }
	#content-firm #text #scrollbars h2 a:hover, #content-firm #text #scrollbars h3 a:hover { color: #eee; }
		#scrollbars, #portscroll {
			overflow-y: auto; 
			overflow-x: hidden; /* I dont like it, but browsers miscalculate the width of the text due to the use of italics, so we have to make sure that the browser doesn't make a useless scroll bar */
			height: 435px; 
		}
			#scrollbars p { padding-right: 5px; }
		#scrollbars.bio { height: 470px; }
			#scrollbars.bio a.email { float: right; padding-right: 5px; }
		#portscroll { height: 400px; margin-bottom: 10px; /* border: 1px solid #000; */ }
	
	
	/* ! - - - Work pages - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	#content-work { background: top center repeat-y url("../cssimages/back-work.png") #fb4; }
	#content-work #text { float: right; }
		#content-work #text.projdescript h1 { height: 40px; /* border: 1px solid #b11; */ }
	#content-work #photo { float: left; text-align: left; }
		#photo #thumbs { padding: 0 0 6px 0;  }
			#photo #thumbs img { display: inline-block; }
			#photo #thumbs a { margin: 0 4px 0 0; }
		#content-work #photo img#swap { margin: 0 0 8px 0; }
		#text p.details {  }
		#text p.awards { font-style: italic; }
		#text p.awards label { font-style: normal; font-weight: bold; }
	#scrollbars.sectionlist a { display: block; }
		#scrollbars.sectionlist ul { list-style-type: none; }
		#scrollbars.sectionlist ul.sub_menu { padding: 0 0 0 10px; }
		
	/* ! - - - Global pages - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	#content-global { background: top center repeat-y url("../cssimages/back-global.png") #ccc; }
	form { }
	form#contactForm label {
		font-weight: bold; 
		display: block; 
		float: left; 
		width: 45px; 
	}
		form#contactForm label.error { width: 305px; font-style: italic; color: #c00; }
	form#contactForm input { width: 256px; }
	form#contactForm textarea { width: 305px; }
	form#contactForm input[type="submit"] { 
		width: 60px; 
		padding: 2px 0 1px 0; 
		border: 2px solid #666; 
		background-color: #ddd; 
		color: #222; 
	}
		form#contactForm input[type="submit"]:hover { background-color: #666; color: #fff; }
	
#footer {
	clear: both; 
	padding: 20px 0 10px 0; 
	font-size: 9px; 
	text-transform: uppercase; 
	letter-spacing: 1px; 
	color: #555; 
	text-align: center; 
}
#footer a { color: #555; }
#footer a:hover { color: #fb4; }

img.floatLeftFooter{ 
    float: left; 
	margin: 0 0 0 6px; }
	
ul li {
   list-style-type: none;
   }

/* ! Change these later, when the photos have been cropped to the proper size */
#photo-small img { max-width: 310px; max-height: 470px; }
#photo img { max-width: 500px; max-height: 470px; }
#photo #thumbs img { width: 40px; max-height: 40px; }
#photo img#swap { width: 500px; max-height: 400px; }
/* -------------------------------------------------------------------------*/

:focus { -moz-outline-style: none; }