@charset "utf-8";
/* CSS Document */

@import url("reset.css");

/***   structure   ***/

html {}

body {background: #000; text-align: center; color: #cccccc;
		 }
	body.home {}



#container {
	width: 800px;
	margin: 20px auto;
	text-align: left;
	background: #b4b793;
	font: 1.2em/1.4em normal Arial, Helvetica, sans-serif;
	background: #b4b793 url(gfx/pepper-large-green.jpg) 180px 150% no-repeat;
	position: relative;
		}
	.landing #container {background: none; }
	
	.landing h1 {color:#333; padding: 40px 0 10px 0;}
	
	#mainFlash {display: block; width: 800px; height: 600px; background: #000;  }
	#mainFlash p {margin: 3em 10em; color: #CCCCCC; font-size: 14px; text-align: left; }

	#header {position: relative;  background: #000;  height: 111px; margin: 0 0 20px 0;
		border-bottom: 20px solid #5c6226;  }
	#logo { display: block; height: 63px;  width: 166px; display: block; position: absolute; top:0; left:0;
			background: #000 url(gfx/topin-logo.png) top left no-repeat; text-indent: -9999px; }
		#header h1 { padding: 40px 0 10px 0; height: 23px; text-indent: 176px; 
				font-size: 1.9em; color: #a00; text-align: right; }

#header h5 { padding: 40px 0 10px 0; height: 23px; text-indent: 176px; 
				font-size: 1.9em; color: #a00; text-align: right; }			
	
	#mainContent {position: relative; clear: left;  width: 540px; padding: 0 30px 30px 30px; color: #000; 
			/*border-top: 20px solid #5c6226;*/ float: left;  z-index: 20;} 
		.gallery #mainContent {width: 740px; height: 400px; }
	
	#sidebar1 { float: left; width: 180px; padding: 15px 15px 0 5px; color: #333; background: #b4b793; filter:alpha(opacity=80);	-moz-opacity: 0.80;	opacity: 0.80;
			/*border-top: 20px solid #5c6226;*/}

	#footer {position: relative; padding: 0 10px 0 20px; background: #333; 
			 filter:alpha(opacity=80);	-moz-opacity: 0.80;	opacity: 0.80;  } 
		#footer p {	margin: 0; padding: 10px 0; }

.clearfloat { clear:both;  height:0; font-size: 1px; line-height: 0px; width: 100%;  }

#headline {float:left; position:absolute; top: 580px;}
#headline h1 {font: 1.0em/1.4em normal Arial, Helvetica, sans-serif; height: 23px; text-indent: 0px; color: #666; text-align: left; }
#headline p {font: 1.0em/1.4em normal Arial, Helvetica, sans-serif; height: 23px; text-indent: 0px; color: #666; text-align: left; }
		

/***    nav    ***/
#nav {float: left; border: 1px solid #fff;	border-left: none; 	}
	#nav li{float:left;	width: 159px; text-align: center;		}
		#nav a{
	width: 100%;
	height: 100%;
	display: block;
	padding: 10px 0 10px 0;
	font-size: 1.3em;
	color: #CC0000;
	background: #e0e0e0;
	border-left: 1px solid #fff;
	font-weight: bold;
}
		#nav a:hover{ color: #FFFFFF; background:#79282c;}
		/*.people #nav a.who {background:#79282c;}
		.what #nav a.what {background:#79282c;}
		.clients #nav a.clients {background:#79282c;}
		.gallery #nav a.work {background:#79282c;}
		.impact #nav a.impact {background:#79282c;}*/
		
		
	#subnav {position: absolute; top:112px; left:0; width: 800px; list-style: none; margin: 0; padding:0; z-index: 50; }
		#subnav li {float: left; width: 160px; text-align: center;	list-style: none; }
		.what #subnav li {width: 250px; }
		#subnav a {display: block; width: 100%; padding: 3px 0;
				color: #fff; font: bold 1.1em/1.0em Verdana, Arial, Helvetica, sans-serif; }
		#subnav a:hover, #subnav a.current {background: #a7aa85; }



/***    styles    ***/
a, a:visited {color:#cc0000; }
a:hover, a:active {color: #FF3333; }
	a span {margin-left: -9999px; }


h2 {color: #333333; font-size: 1.8em; font-weight: bold; font-family: Arial, Helvetica, sans-serif; margin: 1em 0 .5em 0; line-height: 1.2 em; }
	.gallery h2 {font-size: 1.2em; }
h3 {color: #333333; font-size: 1.4em; font-weight: bold; font-family: Arial, Helvetica, sans-serif; margin: 0 0 .5em 0; }
h4 {color: #333333; font-size: 1.2em;  font-weight: bold; font-family: Arial, Helvetica, sans-serif; margin: 1em 0 0 0; }

p {color: #000; margin: .5em 2em 1em 0; line-height: 1.6em; }
.landing p {color: #333; font-size: 10px; }
.intro p {font-size: 1.3em; }

 
.bio_index img{ padding: 0 1em 1em 0; vertical-align: middle; width:50px; height: 60px; }



img.bio {float: right; margin: 0 0 1em 1em; clear: none;  }

#mainContent ul { margin: 0 0 0 2em;}
	#mainContent ul li {margin: 0 0 .5em 0; list-style: disc; }

#mainContent ul.grid {width: 500px; list-style: none; }
	#mainContent ul.grid li {width: 250px; float: left; margin: 10px 0; list-style: none; }

	#mainContent ul.clients li {height: 100px; display: block; }

#mainContent ul.pepper {list-style: none; } 
	#mainContent ul.pepper li {list-style: none; background: url(../graphics/pep_bullet.gif) 0 3px no-repeat; padding: 0 0 0 15px; }

#mainContent dl { }
	#mainContent dt {color: #990000; font-weight: bold;  }
	#mainContent dd {margin-bottom: 1em;  }
	
#sidebar1 dl {font-size: 0.9em; margin-left: 1em; }
	#sidebar1 dt {color: #990000; font-weight: bold; margin-left: 1em; }
	#sidebar1 dd {margin-bottom: 1em; margin-left: 1em; }


/*** gallery ***/

		.gallery #mainPic { width: 344px; height: 220px;    }
			.gallery #mainPic img {}
			.gallery p {font-size: 0.9em; }
		
		.gallery .mainCopy { width: 500px; margin: 0; padding-top: 50px;}
			#mainContent ul.thumbs {position: absolute; top: 230px;  list-style: none; margin: 0; width: 350px; }
				#mainContent ul.thumbs li {float: left; list-style: none; width: 30px; height: 30px;  margin:0 10px 5px 0; padding: 0; }
				ul.thumbs a img  {border: 1px solid #000; }
					ul.thumbs a:hover img  {border: 1px solid #fff; }	
		
		.workThumbs {width: 278px; position: absolute; top:0; right:0; overflow: auto; 	}
			#mainContent ul.works {list-style: none; overflow: auto;  }
				#mainContent ul.works li {list-style: none; float: left; margin: 0 10px 0 0; font-size: 9px; width: 115px;  }
				ul.works a, ul.works a:visited {color:#FFFFFF; }
				ul.works a img {border: 1px solid black; }	
				ul.works a:hover img {border: 1px solid white; }
					/* ul.works li.gal-tinda, ul.works li.gal-ferra {display: none; }  */
				
				
/* _____________________________________________________________________Barclay's rough_ */			
		/*.gallerymenu li { margin: 10px 10px;}
	
		
		.gallerymenu .current img{border: 3px solid red; }*/
		
/* _____________________________________________________________________Barclay's rough_ */	



/*** footers ***/
#footer p {color: #ccc; }
	#footer ul {position: absolute; right:0; top:10px;  margin:0; padding:0; }
		#footer li {float: left; margin:0 10px; padding:0; }				
		#footer a, #footer a:visited {color: #999999; }
		#footer a:hover {color: #fff; }
	#footer p.contact {position: absolute; right:0; top:40px; font-size: .9em; color: #555; }