/* When changing background, change menu and footer colors. */	

* {
	margin: 0;
	padding: 0;
}
	
body { 
	margin: 0;
	padding: 0;
	font: 11px/20px Arial, Helvetica, sans-serif; /* "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", */
	color: #889;
	text-align: center;
	background:  #9f9281 url(../../images/common/bg-body.gif) repeat;
	}

.container { 
	width: 840px;
	padding: 0;
	margin: 0 auto;
	text-align: left;
	position: relative;
	}
	
.content {
	padding-left: 50px;
	}
			

/*  COMMON/GENERAL STYLES 
---------------------------------------------------------------------*/	

ul {
	list-style-type: none;
	margin: 0 0 10px 0;
	padding: 0;
	}
	
ul li { 
	margin: 0;
	padding: 0;
	}
	
a { 
	color: #667;
	text-decoration: none;
	outline: none;
	}
	
a:hover { 
	color: #334; 
	text-decoration: underline;
	}
	
p { 
	margin: 0 0 10px 0; 
	}
	
strong { 
	font-weight: bold;
	}

h1 { 
	display: block;
	width: 400px;
	height: 30px;
	font-size: 22px;
	font-weight: normal;
	color: #525;
	margin: 0 0 12px 0;
	padding: 0;
	background: #FFF url(../../images/common/h1.gif);
	text-indent: -5000px;
	}

h1.long { 
	height: 60px;
	background-image: url(../../images/common/h1Long.gif);
	margin-bottom: 20px;
	} 

h2 { 
	display: block;
	width: 225px;
	height: 30px;
	font-size: 22px;
	font-weight: normal;
	color: #525;
	margin: 5px 0 0 0;
	padding: 0;
	background: #FFF url(../../images/common/h2.gif);
	text-indent: -5000px;
	}

h3 { 
	display: block;
	width: 400px;
	height: 30px;
	font-size: 22px;
	font-weight: normal;
	color: #525;
	margin: 20px 0 5px 0;
	padding: 0;
	background: #FFF url(../../images/common/h3.gif);
	text-indent: -5000px;
	}		

h4 { 
	display: block;
	width: 225px;
	height: 25px;
	font-size: 22px;
	font-weight: normal;
	color: #525;
	margin: 30px 0 10px 0;
	padding: 0;
	background: #FFF url(../../images/common/h4.gif);
	text-indent: -5000px;
	}		
	
table { 
	margin: 0;
	padding: 0;
	font: 11px/16px Arial, Helvetica, Verdana, sans-serif;
	color: #FFF;
	}
	
	th { 
		background: #898989; 
		color: #FFF;
		font-weight: normal;
		padding: 3px 10px;
		}
			
	td { 
		padding: 3px 2px;
		/*border-bottom: 1px solid #CCC;*/
		}

		
/*  TOP-SECTION STYLES 
---------------------------------------------------------------------*/
	
#topSection { 
	margin: 0; 
	padding: 60px 0 20px 0;
	position: relative;
	background: #FFF url(../../images/common/bg-topSection.gif) repeat-x; 
	}
		
#logo { 
	height: 55px;
	width: 260px;
	display: block;
	float: left;
	margin: -10px 0 0 0;
	position: relative;
	z-index: 999;
	}
	
	#logo a {
		height: 75px;
		width: 260px;
		display: block;
		text-decoration: none;
		outline: none;
		text-indent: -5000px;
		margin: 0;
		background: url(../../images/common/logo2.gif) no-repeat;
		border: 0;
		}
		
#menu { 
	margin: 0; 
	padding: 0;
	float: right;
/*	width: 426px;
*/	width: 333px;
	}	
	
	#menu ul { 
		list-style-type: none;
		margin: 0;
		padding: 0;
/*		width: 426px;
*/		width: 333px;
		float: right;
		}
		
		#menu ul li { 
			margin: 0;
			padding: 0;
			display: block;
			float: left; 
			}
	
		#menu ul li a {
			height: 45px;
			display: block;
			line-height: 45px;
			text-decoration: none;
			background: #135 url(../../images/common/menu.gif) no-repeat;
			margin: 0;
			outline: none;
			font-size: 12px;
  			color: #DDD;
 			text-indent: -5000px;
			}
						
		#menu ul li.home a { width: 71px; background-position: 0 0; }
		#menu ul li.about a { width: 78px; background-position: -71px 0;}
		#menu ul li.portfolio a { width: 96px; background-position: -149px 0;}
		#menu ul li.contact a { width: 88px; background-position: -245px 0; }
		#menu ul li.services a { width: 93px; background-position: -333px 0; }

		#menu ul li.home a:hover { width: 71px; background-position: 0 -45px; }
		#menu ul li.about a:hover { width: 78px; background-position: -71px -45px;}
		#menu ul li.portfolio a:hover { width: 96px; background-position: -149px -45px;}
		#menu ul li.contact a:hover { width: 88px; background-position: -245px -45px; }
		#menu ul li.services a:hover { width: 93px; background-position: -333px -45px; }

		#menu ul li.home a.active { width: 71px; background-position: 0 -90px; }
		#menu ul li.about a.active { width: 78px; background-position: -71px -90px; }
		#menu ul li.portfolio a.active { width: 96px; background-position: -149px -90px; }
		#menu ul li.contact a.active { width: 88px; background-position: -245px -90px; }
		#menu ul li.services a.active { width: 93px; background-position: -333px -90px; }
									

/*  MID-SECTION STYLES 
---------------------------------------------------------------------*/

#midSection { 
	clear: both;
	position: relative;
	display: block;
	margin: 0;
	padding: 15px 5px 35px 5px;
	background: #FFF;
	}
	
	#midSection .container { background: #FFF url(../../images/common/shadow1.gif) no-repeat 335px 40px; }
	
	#midSection #leftColumn { 
		width: 350px;
		line-height: 16px;
		float: left;
		}
		
		#midSection #leftColumn .content { 
			width: 260px;
			padding: 10px 0 5px 0;
			}
			
		#midSection #leftColumn .last { 
			background: #FFF url(../../images/common/bg-sidemenu.gif) no-repeat left bottom;
			padding: 10px 0 10px 0;
			}

	#midSection #rightColumn { 
		width: 400px;
		float: left;
		}		
		
	#midSection #leftColumn p, #midSection #leftColumn ul {
		width: 240px;
		}
		

	/* Home Styles */

	.home #midSection .container { background: #FFF url(../../images/common/shadow1.gif) no-repeat 495px 40px; }
	
	.home #midSection #leftColumn { width: 490px; }
		
	.home #midSection #leftColumn p { width: 400px; }
			
		.home #midSection #rightColumn .last { 
			background: #FFF url(../../images/common/bg-sidemenu.gif) no-repeat left bottom;
			padding: 10px 0 10px 0;
			}

	.home #midSection #rightColumn { width: 260px; padding-top: 100px; }
	.home #midSection #rightColumn p, #midSection #rightColumn ul {
		width: 240px;
		}


	/* Featured Styles */
	
	#featureSection { 	
		background: #fff;
		padding: 20px 0 0 0;
		}
	
		#feature { 
			clear: both;
			display: block; 
			height: 215px;
			position: relative;
			}
			
		.featureSlide { 
			clear: both;
			display: block;
			height: 215px;
			width: 780px;
			margin: 10px 0;
			border: 1px solid #CCC;
			padding: 4px;
			}
			
			.featureSlide img { width: 780px; height: 215px; } 
			
		.featureSlide .description {
			position: absolute;
			bottom: -85px;
			left: 490px;
			width: 260px;
			}


	/* News Styles */
	
		#news { margin-bottom: 20px; }
		
		#news li { 
			width: 235px;
			font-size: 10px;
			margin: 0 0 10px 0;
			}	

	/* Contact Styles */
	
		.contactLeft { 
			display: block;
			float: left;
			width: 80px;
			}

		.contactRight { 
			display: block;
			float: left;
			width: 320px;
			}
		
		input.inputText, textarea { 
			width: 300px;
			padding: 4px 5px;
			border: 1px solid #CCD;
			background: #f9f9f9;
			font: 11px/16px "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			color: #667;
			}	

		.astrick { color: #525; margin-left: 3px; }		


	/* Accordion Styles */
	
		.affiliate { width: 50px; }
		
		
										
/*  BOTTOM-SECTION STYLES 
---------------------------------------------------------------------*/	
	
#botSection {
	margin: 0; 
	padding: 15px 0;
	clear: both;
	display: block;
	font-size: 10px;
	line-height: 20px;
	border-top: 2px solid #876;
	background: transparent url(../../images/common/bg-botSection.gif) repeat-x;
	}	
	
	#botSection .column1 { 
		width: 100px;
		float: left;
		display: block;
		margin: 5px 0;
		}	
		
	#botSection .column2 {
		width: 640px;
		float: left;
		display: block;
		border: 1px solid #aa9;
		padding: 10px 0 10px 30px;
		}
		
	#botSection .column1 a { color: #ddc; }
	#botSection .column1 a:hover { color: #FFF; text-decoration: none; }

	#botSection .column2 a { color: #ccb; }
	#botSection .column2 a:hover { color: #ddc; text-decoration: none; }
	
	#botSection .column2 ul { 
		float: left;
		font-size: 9px;
		line-height: 17px;
		width: 210px;
		padding: 0;
		margin: 0;
		}
		
	#botSection .portfolio { background: transparent url(../../images/common/portfolio.gif) no-repeat 65px 9px; }


	#botSection .column3 { 
		width: 380px;
		float: left;
		display: block;
		margin: 5px 0;
		color: #ccb;
		}	
		
	#botSection .column4 {
		width: 400px;
		float: right;
		display: block;
		margin: 5px 0;
		color: #ccb;
		text-align: right;
		padding-right: 5px;
		line-height: 14px;
		}
		
	#botSection .column3 a { color: #ddc; margin: 0 5px; }
	#botSection .column3 a:hover { color: #FFF; text-decoration: none; }
	

/* PORTFOLIO SECTION STYLES 
---------------------------------------------------------------------*/	

.portfolioSection #midSection .container { background-image: none; }

.projects ul { 
	float: left; 
	width: 260px;
	margin: 0 0 10px 0;
	}

.projects ul li { 
	margin: 0 0 10px 0;
	}

.projects ul li a { 
	height: 132px;
	width: 240px;
	border: 1px solid #eee;
	padding: 4px;
	margin: 0 0 10px 0;
	text-indent: -5000px;
	display: block;
	background-position: 4px 4px;
	background-repeat: no-repeat;
	background-color: #fff;
	}

.projects ul li a:hover { 
	border: 1px solid #99a;
	background-position: 4px 4px;
	background-repeat: no-repeat;
	background-color: #99a;
	}
	
	.projects ul li.black-tees a { background-image: url(../../images/portfolio/thumbs/black-tees.jpg); }
	.projects ul li.dbs a { background-image: url(../../images/portfolio/thumbs/dbs.jpg); }
	.projects ul li.fac a { background-image: url(../../images/portfolio/thumbs/fac.jpg); }
	.projects ul li.kkenvironmental a { background-image: url(../../images/portfolio/thumbs/kkenvironmental.jpg); }
	.projects ul li.kalos a { background-image: url(../../images/portfolio/thumbs/kalos.jpg); }
	.projects ul li.archives a { background-image: url(../../images/portfolio/thumbs/archives.jpg); }
	.projects ul li.norwood a { background-image: url(../../images/portfolio/thumbs/norwood.jpg); }
	.projects ul li.openthesis a { background-image: url(../../images/portfolio/thumbs/openthesis.jpg); }
	.projects ul li.rq a { background-image: url(../../images/portfolio/thumbs/rq.jpg); }
	.projects ul li.tamilee a { background-image: url(../../images/portfolio/thumbs/tamilee.jpg); }
	.projects ul li.wem a { background-image: url(../../images/portfolio/thumbs/wem.jpg); }
	.projects ul li.zippoholic a { background-image: url(../../images/portfolio/thumbs/zippoholic.jpg); }
	
.bar { margin: 0 5px; color: #CCD; }
	
#images {
	height: 440px;
	width: 790px;
	display: block;
	margin: 10px 0;
	border: 1px solid #CCC;
	padding: 4px;
	position: relative;
	}
	
	#images p { 
		position: absolute;
		top: -65px;
		left: 345px;
		background: #FFF; 
		display: block;
		width: 400px;
		height: 50px;
		}

#images img { 
	height: 440px;
	width: 790px;
	display: block;
	margin: 4px !important;
	padding: 0px !important;
	border: none;
	}
	
.portfolioNav { padding-top: 65px; }

.images { 
	display: block;
	float: left;
	width: 55px;
	}
	
#nav { 
	float: left;
	width: 225px;
	}
	
	#nav a { 
		padding: 3px 5px;
		margin: 0 3px;
		color: #889;
		}

	#nav a:hover { 
		text-decoration: none;
		color: #FFF;
		background: #AAB;
		}
				
	#nav .activeSlide { 
		color: #223;
		border-bottom: 1px solid #DDD;
		}
	
										
/* SITE MAP SECTION STYLES 
---------------------------------------------------------------------*/	

	#midSection.sitemap .container { background-image: none; }
	#midSection.sitemap .container ul { float: left; width: 200px; margin-top: 40px; }
	#midSection.sitemap .container ul.first { width: 130px; margin-top: 0; }
	#midSection.sitemap .container ul.second { width: 230px; }

	#midSection.sitemap .container ul .portfolio { background: transparent url(../../images/common/portfolio2.gif) no-repeat 52px 8px; }



/*  PAGE SPECIFIC STYLES 
---------------------------------------------------------------------*/	

h1.home { background-position: 0 0; margin-top: 35px; }
h1.contact { background-position: 0 -120px; }
h1.sitemap { background-position: 0 -390px; }

h1.black-tees { background-position: 0 0; }
h1.dbs { background-position: 0 -30px; }
h1.fac { background-position: 0 -60px; }
h1.kalos { background-position: 0 -90px; }
h1.kkenvironmental { background-position: 0 -120px; }
h1.norwood { background-position: 0 -150px; }
h1.openthesis { background-position: 0 -180px; }
h1.logos { background-position: 0 -210px; }
h1.rq { background-position: 0 -240px; }
h1.tamilee { background-position: 0 -270px; }
h1.wem { background-position: 0 -300px; }
h1.zippoholic { background-position: 0 -330px; }
h1.portfolio { background-position: 0 -360px; }


h2.features { background-position: 0 0; }
h2.news { background-position: 0 -30px; }
h2.profile { background-position: 0 -60px; }
h2.partners { background-position: 0 -90px; }
h2.testimonials { background-position: 0 -120px; }
h2.affiliations { background-position: 0 -150px; }
h2.awards { background-position: 0 -180px; }
h2.design { background-position: 0 -210px; }
h2.website { background-position: 0 -240px; }
h2.cms { background-position: 0 -270px; }
h2.contactinfo { background-position: 0 -300px; margin-bottom: 15px; }

h4.about { background-position: 0 0; }
h4.services { background-position: 0 -25px; }


.h4 { font-weight: bold; color: #667; margin: 0 5px 0 0; }

.capability { line-height: 16px; }

.column { float: left; width: 125px; font-size: 10px; }
.column2 { float: left; width: 200px; }

small { font-size: 9px; color: #bbc; margin-left: 10px; text-transform: uppercase; }

.portfolioLink { margin: 20px 0 0 0; }


/*  CLEAR 
---------------------------------------------------------------------*/	

.clear { clear: both; display: block; }