/*

Main Stylesheet

Created by Ken Cox
www.kencox.net

COLOR PALETTE

Charcoal Black ------------- #111
Dark Green ----------------- #083b3b
Yellow --------------------- #f90
Orange --------------------- #ff6d00
Orange (text on white) ----- #cc5611
Orange (text on black) ----- #813F0F

Nice brown ----------------- #A1521A
Dark Mint ---- #3F8B8B
Light Mint ---- #7FB2B2
*/


/* ---------------- RESETS---------------- */

/* zeros out all common page elements so they can be reliably styled later */
* { margin: 0; padding: 0; }
table {  border-collapse: collapse;  border-spacing: 0; } 
td, th { vertical-align: top; }
fieldset,img { border: 0; } 
address,caption,cite,code,dfn,th,var { font-style: normal; font-weight: normal; } 
ol,ul { list-style: none; } 
caption,th { text-align: left; } 
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; } 
q:before, q:after { content:''; } 
abbr,acronym { border: 0; } 
a img { border: 0; }
sup {line-height: 100%;}

/* ---------------- GLOBAL ---------------------- */

html body {
	background-color: #111;
	
	/* global typography */
	font-family: arial, verdana, helvetica, sans-serif;

	/* makes 1.1em approx 11pt text */
	font-size: .7em;	
}

#container {
	width: 780px; /* PAGE WIDTH */
	margin: 15px auto;
	background-color: #083b3b; 
	color: #000;
	position: relative;
}

/* --------- PAGE BACKGROUNDS --------- */

.background1 {
	background: #083b3b url('../images/background1.gif') top left repeat-y; /* page background with image */
}

.background2 {
	background: #fff url('../images/background2.gif') top left repeat-y; /* page background with image */
}

.background3 {
	background: #E0E0E0 url('../images/background3.gif') top left repeat-y; /* page background with image */
}

/* ---------------- LINK ---------------------- */

a, a:visited {
	color: #f90;
	text-decoration: none;
}
	
a:hover {
	color: #ff6d00;
	text-decoration: underline;
}
	
	
/* ---------------- STRUCTURE ---------------------- */

#above_header {
	color: #ccc;
	font-size: 1em;
	padding: 2px;
	text-align: right;
}

	#above_header a, #above_header a:visited {
		color: #ccc;
	}

#header {
	height: 173px;
}

	#header img{display: none;}/*image for print stylesheet*/

	.header_home {
		background: transparent url('../images/header_home.jpg') top center no-repeat;
	}
	
	.header_about_us {
		background: transparent url('../images/header_about_us.jpg') top center no-repeat;
	}
	
	.header_specialties {
		background: transparent url('../images/header_specialties.jpg') top center no-repeat;
	}
	
	.header_projects {
		background: transparent url('../images/header_projects.jpg') top center no-repeat;
	}
	
		.above_header_projects {
			background-color: #2c2c2c;
		}
	
	.header_contact {
		background: transparent url('../images/header_contact.jpg') top center no-repeat;
	}
	
	#header h1, #header h2 {
		text-indent: -9999em;
	}

#nav {
	background-color: #111;
}

	#nav ul {
		float: right;
		margin-right: 16px;
	}
	
	#nav ul li {
		float: left;
		font-size: 1.3em;
		font-weight: bold;
	}
	
	#nav ul li a, #nav ul li a:visited {
		display: block;
		padding: 3px 8px;
		color: #f90;
	}

	#nav ul li a:hover {
		background-color: #ff9900;
		color: #fff;
		text-decoration: none;
	}

	#nav #highlight {
		text-align: center;
		font-size: 1.3em;
		color: white;
		background-color: #f90;
		padding: 3px;
		width: 224px;
	}

	#nav ul li a.lit, #nav ul li a:visited.lit {
		color: #fff;
	}

#content {
	padding: 21px 18px 21px 24px;
	float: left; /* IE needs this */
	width: 738px; /* needed now that it's floating */
}

	#content p {
		margin-bottom: .5em;
	}
	
	#content .floatimage {
		float: right;
		margin: 0 0 21px 0;
	}
	
	#content .textbox {
		float: left;
		width: 484px;
		background-color: #fff;
		padding: 10px;
		font-size: 1.3em;
		color: #cc5611;
	}
	
	#content .textbox2 {
		width: 290px;
		margin-left: 205px;
		background-color: #114400;
		padding: 10px;
		font-size: 1.2em;
		color: #fff;
		margin-bottom: 10px;
	}
	
	#content .textbox3 {
		float: left;
		width: 280px;
		background-color: #ff9900;
		padding: 10px;
		font-size: 1.2em;
		color: #fff;
		margin-top: 15px;
	}
	
	#content .textbox4 {
		float: left;
		width: 200px;
		
		padding: 10px;
		font-size: 1.3em;
		color: #fff;
	}
	
	#content .textbox5 {
		background-color: #ff9900;
		color: #fff;
		font-size: 1.1em;
		padding: 8px 16px;
		text-align: center;
	}
	
		#content .textbox5 h3{
			font-weight: bold;
			font-size: 1.2em;
			margin-bottom: .5em;
		}
		
		#content .textbox5 p{
			margin-bottom: 1.5em;
		}
		
		#content .textbox5 li{
			margin-bottom: .5em;
		}
	
#leftcolumn {
		float: left;
		width: 205px;
	}
	
	#leftcolumn img {
		float: right;
	}

.specialties_row {
	margin: 0 0 0px 61px;
	clear: both;
	overflow: auto;
	
}

	.specialties_row .specialty {
		width: 140px;
		float: left;
		margin: 50px 10px 0 0;
		font-weight: bold;
		font-size: 1.3em;
	}
	
	.specialties_row img {
		float: left;
		margin-right: 10px;
	}

/* --------------- PROJECTS ------------- */

#projects_left_column {
	width: 190px;
	float: left;
	margin-right: 16px;
}

	#projects_left_column .title {
		text-align: right;
		color: #A1521A;
		margin: 20px 0 20px 0;
	}

#projects_center_column {
	width: 279px;
	padding: 0 20px;
	float: left;
	text-align: center;
	color: #A1521A;
}

#projects_right_column {
	width: 190px;
	float: left;
	margin-left: 20px;
	text-align: center;
}

.caption {
	font-size: 1.1em;
	color: #fff;
}

.caption2 {
	font-size: 1.1em;
	color: #333;
}

#projects_landing {
	width: 720px;
}

#projects_landing th {
	background-color: #111;
	color: #fff;
	font-weight: bold;
	padding: 4px 4px 4px 10px;
	font-size: 1.1em;
}

#projects_landing td {
	background-color: #fff;
	color: #000;
	
	padding: 10px;
	font-size: 1.1em;
	
	
}

#projects_landing tr {
	
}

#projects_landing .col1 {
	width: 186px;
	background-color: #444;
	border-bottom: 2px solid #000;
	font-size: 1.4em;
}

#projects_landing .col2 {
	width: 299px;
	background-color: #ccc;
	border-bottom: 2px solid #000;
}

#projects_landing .col3 {
	background-color: #444;
	border-bottom: 2px solid #000;
}

#projects_nav {
	text-align: center;
	margin-bottom: 20px;
	font-size: 1.2em;
}

.dim {
	color: #999;
}

/* ---------------- FORM ---------------- */

	#formbox {
		background-color: #fff;
		padding-top: 10px;
		width: 37em;
		float: left;
	}

	form {
		margin-left: 15px;
		margin-right: 10px;
		color: #000;
		
	}
	
	form fieldset {
		margin-bottom: 1em;
		
		padding: 10px;
	}
	
	form legend {
		color: #000;
		
		padding: .3em .5em;
		font-weight: bold;
		font-size: 1.2em;
		border: none;
	}

	form label {
		width: 8em;
		float: left;
		text-align: right;
		margin-right: 5px;
		padding-top: .3em;
		clear: both;
		}
		
		form label.fullwidth {
			float: none;
			width: 100%;
			text-align: left;
		}
		
	form input, form textarea {
		background-color: #FFF;
		width: 250px;
		padding: 3px;
		border: 2px solid #f90; 
	}
	
	form input:focus, form textarea:focus {
		background-color: #fc9;
	}
	
	form #submit {
		margin-top: 10px;
		width: 220px;
	}
	
	form .required {
		color: #f00;
	}
	
	
	form div {
		margin: .5em 0;
	}
	
	form .formbutton {
		width: 15em;
	}
	
	.radio {
		width: 1em;
		border: none;
	}
	
	.radiolabel {
		float: none;
	}

	form .indent {
		margin-left: 8em;
	}
	
	form #submit {
		width: 10em;
	}
	
	form #reset {
		width: 6em;
		margin-left: 10px;
	}


.error_box {
	background-color: #fff;
	
	padding: 20px;
	border: 10px solid #f90;
}

.dialog_box {
	background-color: #fff;
	font-size: 1.3em;
	padding: 20px;
}

.dialog_box .alert {
	color: #f00;
	font-weight: bold;
	font-size: 1.3em;
}

.dialog_box h2 {
	font-weight: bold;
}

.output_box {
	background-color: #fff;
	
	padding: 20px;
	border: 10px solid #3F8B8B;
}

/* ---------------- FOOTER ---------------- */

#footer {
	clear: both;
	background-color: #111;
	font-size: 1.2em;
	text-align: center;
	color: #f90;
	padding: 8px 0;
}

	#footer a, #footer a:visited {
		color: #f90;
	}

/* ---------------- BROWSER (IE) HACKS ---------------- */

/* IE5 centering bugfix */
* html body {text-align: center;}
* html body #container {text-align: left;}


/* patch IE 5.x's box model bug */
* html #content  /* this is recognized by IE only */
  {
  width: 775px;  /* total width, only for IE5.x/Win */
  w\idth: 738px; /* content width for other IE */
  }