@charset "UTF-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #009966;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}


#container {
	width: 966px;  /* design for 1024x768 monitor - set this to 966 to avoid scroll - usually design to 965 but math works for 5 equal buttons with 1px borders*/
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	background-image: url(images/left_col_bg_wlborder_small.jpg);
	background-repeat:repeat-y;/*the "corrugated background on the left is actually behind the "sidebar" and is a background image for the container.  It goes behind the horiz nav and the header too.  Because it was easiest to have the horiz nav buttons all have a left margin, the header image and this container background image have a 1 px border built in.  The right 1 px margin is part of the "main content"*/
} 


body#id_200 #container{  /*takes off corrugated section for contact us page*/
	background-image: none;
	}

/******************HEADER INFO.*****************/

#header { 
	padding: 0 0 0 0;
	margin: 0;  
} 


#header img {
	padding:0;
	margin:0;
	float: left; /* In IE there is a 3-pixel gap bug - space between floated and non-floated columns - one way to fix this is to float everything in the <div>  - see CSS MM p. 304 */
	} 
	
	
/*******************HORIZONTAL NAVIGATION BAR INFO. */

ul#horiznav{
	border-left: 1px solid #660000;
	padding:0; /*Some browsers preset padding and margins so set both = 0 */
	margin:0;
	list-style:none;
	float:left; /*This seems to keep the sidebar from floating up, when the last button rides down a row*/
	}


#horiznav li{ /*this is what makes the buttons float up next to each other even though they are "display: block"*/
	float:left;
	width: 193px;
	}	


#horiznav a {
	font-family: Arial, Helvetica, sans-serif;
	text-decoration:none;
	color: #660000;
	font-size: 18px;
	font-weight:bold;
	border: 1px solid #660000;
	border-left:none;/*borders end up on 3 sides of the buttons - left border for the far left button is declared for the <ul> - keeps the borders between buttons to 1px total*/
	display: block;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #ffcc66;
	text-align: center;
	}


#horiznav a:hover { 
	color: #ffffff;
	background-color: #cc9933;
		}
	
	
body#id_10 a#about_fera, body#id_20 a#about_fera, body#id_30 a#about_fera, body#id_35 a#about_fera,
body#id_40 a#evaluation, body#id_50 a#evaluation,
body#id_60 a#our_clients, body#id_70 a#our_clients,
body#id_80 a#staff, body#id_85 a#staff, body#id_90 a#staff, body#id_100 a#staff, body#id_155 a#staff, body#id_120 a#staff, body#id_130 a#staff, body#id_140 a#staff, body#id_150 a#staff, body#id_160 a#staff, body#id_170 a#staff, body#id_180 a#staff, body#id_190 a#staff,
body#id_200 a#contact_us{
	color: #FFFFFF;
	background-color: #660000;
	} /*This may be a bit cumbersome, but I already set up the body_id set up to control the checkmarks in the left menu so I used it here to set the "selected" horiz nav button color*/


/***************************SIDEBAR INFO.**************/

#sidebar {
	float: left; /* since this element is floated, a width must be given */
	width: 230px; 
	margin: 40px 30px 0 30px;
}


* html #sidebar {
	zoom: 1;
	display: inline;  /* IE hack - moves the sidebar box over and centers it in the background instead of being all the way to the right in the background */
	}


#sidebar ul{/*creates white box with pencils*/
	font-size: 16px;
	font-weight:bold;
	font-family: Arial, Helvetica, sans-serif;
	margin:0;
	padding: 25px 5px 0 15px; /*TRBL - space around group of menu choices as a whole*/
	background-color: #FFFFFF;
	background-image: url(images/pencils_194px.jpg);
	background-position: left bottom;
	background-repeat: no-repeat;
	padding-bottom: 80px;/*This makes room for the pencil graphic */
	}
	
	
#sidebar li{
	list-style: none;
	padding-bottom: 20px; /*space between menu items*/
	}


#sidebar h2{/*sidebar title with background box*/
	font-size: 24px;
	font-family: Arial, Helvetica, sans-serif;
	margin:0;
	text-align:center;
	background: #660000; 
	color: #FFFFFF;
	padding: 10px;
	}
	
	
#sidebar a {
	color:#660000;
	text-decoration: none;
	background-image: url(images/uncheckedbox_jk.gif); /*By putting this background image here, the checkmark is also "clickable"*/
	background-repeat: no-repeat;
	padding-top: 5px;/* this padding allows you to see the entire check box */
	padding-bottom: 5px;
	padding-left:35px;/*moves text out of the way to make room for checkmark*/
	background-position: left center; 
	}

#sidebar a:hover{
	text-decoration:underline;
	}	

	
body#id_10 a#who_are_we, 
body#id_20 a#what_do_we_do,
body#id_30 a#why_choose_fera,
body#id_35 a#fera_publications,
body#id_40 a#when_to_evaluate,
body#id_50 a#evalution_types,
body#id_60 a#who_we_serve,
body#id_70 a#sample_projects,
body#id_80 a#our_team,
body#id_85 a#amy_mcnulty,
body#id_90 a#ashley_lanting,
body#id_100 a#john_fosselman,
body#id_120 a#john_seeley,
body#id_130 a#judith_skiff,
body#id_140 a#karen_rignall,
body#id_150 a#karin_tice,
body#id_155 a#kathryn_huss,
body#id_160 a#lisa_dugdale,
body#id_170 a#peter_gluck,
body#id_180 a#priscilla_spencer,
body#id_190 a#expert_consultants{
	background-image: url(images/checkedbox_jk.gif);
	} /*This allows the XHTML code for the sidebar to be the same for all pages within a major horiznav bar topic ie. "About FERA" yet the correct box is "checked" based on the body_id*/


#sidebar h3{/*quotes*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	background-color: transparent;
	color:#660000;
	margin-top: 60px;
	padding-right: 10px;
	padding-left: 20px;
		}
	
	
#sidebar h4{/*quote refs*/
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	background-color: transparent;
	color: #660000;
	padding-right: 10px;
	padding-left: 20px;
	}


/****************Main Content - General Defs*******/

#mainContent { 
	float: right; /* since this element is floated, a width must be given */
	margin: 0 0 0 -290px;/* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar space when the content in #sidebar ends. */
	width: 676px; 
	background-color: #FFFFFF;
	border-right:1px solid #660000;	
}


#mainContent h1{
	font-family: "Times New Roman", Times, serif;
	color:#660000;
	margin: 47px 30px 0px 50px;
	font-size:180%;  
	}
	
	
#mainContent img{
	margin-left: 50px;
	}
	
	
#mainContent p{
	margin:  10px 50px 30px 50px; /*this adds quite a lot of spacing between para - may not like this on places like example projects - see below*/
	color:#000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 150%; /*standard is 120%*/
	}
	
		
#mainContent p.beforelist{
	margin-bottom:  0; /*brings the list closer to the text that introduces it*/
	}
	
	
#mainContent p.lastpara{ /*adds white space between last para of main text and end of main content section*/
	padding-bottom:100px;
	}


#mainContent p.staff_bio{
	font-size:90%;
}


/**********************  GENERAL STYLE DEFS *******************************/

.def_titles{ /*used with "what do we do?"*/
	font-weight:bold;
	color: #660000;
	font-size:120%;/*This interacts with % for <li> so really is about 100%*/
	}
	
	
a.anchor {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 80%;
	color: #660000;
	text-decoration: underline;
	}
	
	
a.anchor:hover {
	color:#886600;
}
	
	
div.center{
	text-align: center; /*used to place the achor link (on list of clients, example projects, and publications) in the middle without making the whole width of the mainContent in line with it also clickable*/
	margin-bottom: 20px;
}
	
	
.staff_names{
	font-weight:bold;
	color: #660000;
	font-size:125%;/*interacts with p.staff_bio */
	}


.staff_titles{
	font-weight: bold;
	color:#000000;
	font-size: 105%;/*interacts with p.staff_bio */
	}


.expert_consult_names{
	font-weight:bold;
	color: #660000;
	font-size:125%;/*interacts with p.staff_bio */
	}


.eval_titles{
	font-weight:bold;
	color: #660000;
	}


.client_categories{  
	font-size: 100%;
	color:#660000;
	font-weight: bold;
}
	

.pub_titles{
	text-decoration:underline;
	}	
	
	
.internal_links_2{ /*there is no internal_links_1 anymore*/
	text-decoration:none;
	font-weight:bold;
	color: #660000;
	}


.internal_links_2:hover{
	text-decoration:underline;
	}


img.staff_photos{ /*also use for first expert consult photo - needs to be pushed down more than others*/
float: left;
margin: 15px 25px 5px 0;/*TRBL*/
}

img.consult_photos{
float: left;
margin: 5px 25px 5px 0;/*TRBL*/
}


.collaboration_titles{ /*used in the bulleted list of collaborative efforts on the "Who We Serve" page */
font-size:125%;
color:#000000;
margin-top: 10px;
}


.collaboration_cities{
color:#886600;
}


.underline{
text-decoration: underline;
}

.bold{
	font-weight:bold;
}

.italics{
	font-style: italic;
}

/***********Bulleted List Defs************************/
	
#mainContent ul{
	margin:  0px;
	padding: 20px 50px 20px 70px; /* TRBL - space around ul as a whole */
	color:#000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 85%;
	line-height: 140%;
	}
	
	
#mainContent ul li{
	list-style: none;
	padding-bottom: 10px; /*space between menu items*/
	background-image:url(images/bullet.gif);
	background-repeat: no-repeat;
	background-position: 0px 4px; /*moves the bullets down 2 px*/
	padding-left: 20px; /*moves the text out of the way for the bullet*/
	}
	
	
#mainContent ul.largertxt{
	color:#000000;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
	line-height:140%;
	}	
	
	
#mainContent .largertxt li{
	background-position: 0px 5px; /*moves the bullets down 5 px with the larger text list*/
	}


#mainContent ul.collaborations{
	font-size: 70%;
	margin-left: 0px;
	padding-right: 70px;
	padding-left: 65px;
	color:#000000;
	margin-top:0;
}


#mainContent .collaborations li{
	background-image: none;
	padding-left:0px;
	padding-bottom: 20px;
	}


/**************placing PDF icons*******************/	

a.inline_pdflink{ /*used to create link with small pdf icon - both are clickable*/
	text-decoration:none;
	background-image:url(images/pdficon_small.gif);
	background-repeat: no-repeat;
	padding-left: 25px; /*moves text out of the way for icon*/
	font-size: 90%;
	padding-bottom: 5px; /*so you can see the whole pdf icon*/
	color:#886600;
	}
	
	
a.inline_pdflink:hover{ /*used to create link with small pdf icon - both are clickable*/
	text-decoration:underline;
	}
	
	
a.inline_pdflink_larger{ /*used to create link with large pdf icon - both are clickable*/
	display: block; /* <a> is an inline property, but if you want the padding to include the entire text, it needs to be displayed as "block"*/
	text-decoration:none;
	background-image:url(images/pdficon_large.gif);
	background-repeat: no-repeat;
	padding-left: 50px; /*moves text out of the way for icon*/
	font-size: 100%;
	padding-bottom: 5px; /*so you can see the whole pdf icon*/
	color:#000000;
	}
	
	
a.inline_pdflink_larger:hover{ /*used to create link with large pdf icon - both are clickable*/
	text-decoration:underline;
	color:#886600;
	}
	
#mainContent ul.pdflist li{ /*takes the bullets off for the list of pdf files*/
	background-image:none;
	padding-bottom: 20px;
	}
	
	
#mainContent ul.pdflist { 
	margin:  0px;
	padding: 20px 50px 20px 50px; /* TRBL - space around ul with pdf links as a whole */
	}
	
	
.get_adobe_pdf img{ /*applied the div.center to this - see note about what this does above*/
	border:none;
	padding: 1px;/*doing this this way keeps the footer from moving down to accomodate for a border appearing and disappering.  This way there is always a 1px "border" - It is transparent unless the mouse is hovering over the icon.*/
}


.get_adobe_pdf img:hover {
	background-color:#886600;
}


/*****************Table Defs****************/
	
#mainContent table{
	border:0;
	margin: 20px 0 20px 70px;
	width: 600px;
	color:#000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 85%;
	vertical-align: top;
	}
	
	
#mainContent td{
	background-image:url(images/bullet.gif);
	background-repeat: no-repeat;
	background-position: 0px 2px;
	padding-left: 25px; /*moves the text out of the way for the bullet*/
	padding-bottom: 10px; /*match space between items of li*/
	padding-right: 0px;
	vertical-align:top;
	}


#mainContent table.clients{
	margin: 7px 0 20px 50px;
	font-size:70%;
	color:#886600;
	}
	
	
.client_titles{/*(Need to leave this in this location - interacts with def above for the table.)*/
	font-size: 120%; /*interacts with font-size above (about .7*1.2=85%)*/
	color:#000000
	}
	
	
#mainContent table.clients td{
	padding-left: 10px;
	padding-right: 25px;
	background-image:none;
	}
	
	
td.col_1{
	width:220px;
	}
	
	
td.col_1_clients{
	width: 270px;
	}

	
/***********Specific Defs for individual pages main content***************/

body#id_1 #mainContent p{
	padding-bottom: 15px;/*This will control the padding between paragraphs on the homepage*/
	}
	
	
body#id_10 #mainContent{
	background-image: url(images/globe_forcorner_bw_40.jpg);
	background-position: right bottom;
	background-repeat: no-repeat;	
	padding-bottom: 160px;  /*This moves globe part-way down below lowest text in main content area*/
	}


body#id_40 #mainContent {
	min-height:500px; /*use this for sections where the main content area is shorter than the left sidebar box so the main content background and border continue to the point that you want beyond the sidebar box*/
}	

* html body#id_40 #mainContent {
	height:500px; /*IE hack - IE6 doesn't like "min-height"*/
}	


body#id_80 #mainContent,
body#id_85 #mainContent,
body#id_90 #mainContent,
body#id_100 #mainContent,
body#id_155 #mainContent,
body#id_120 #mainContent,
body#id_130 #mainContent,
body#id_140 #mainContent,
body#id_150 #mainContent,
body#id_160 #mainContent,
body#id_170 #mainContent,
body#id_180 #mainContent,
body#id_190 #mainContent {
	min-height:770px; /*All Staff Pages - sidebar is longer than main content area - see more complete explanation above*/
}	


* html body#id_80 #mainContent,
body#id_85 #mainContent,
body#id_90 #mainContent,
body#id_100 #mainContent,
body#id_155 #mainContent,
body#id_120 #mainContent,
body#id_130 #mainContent,
body#id_140 #mainContent,
body#id_150 #mainContent,
body#id_160 #mainContent,
body#id_170 #mainContent,
body#id_180 #mainContent,
body#id_190 #mainContent {
	height:770px; /*IE hack - IE6 doesn't like "min-height"*/
}	

body#id_70 p{
	margin:  0px 50px 20px 50px; /*This changes the margins on the paragraph for sample projects*/
	font-size: 80%;
}


body#id_70 p.proj_title{      /*Moves the proj titles closer to the top para */
	margin:  15px 50px 5px 50px;
	font-size: 100%;
	color:#660000;
	font-weight: bold;
}


body#id_200 #mainContent{ /*Makes main content fill entire width for the contact us page and adds graphic*/
	margin: 0;
	width: 964px;
	border-left: 1px solid #660000;
	background-image: url(images/globe_forcontactpg_bw.jpg);
	background-position: bottom right;
	background-repeat: no-repeat;
	height: 500px;
	}
	
	
/**************Footer*************/
 
#footer { 
	padding: 7px 0px 7px 0px;
	background:#660000;
	color:#FFFFFF; 
} 


#footer h6{
	display: inline;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 75%;
	padding-left:90px;
	}
	
	
#footer h6#address{
	padding-left: 30px;/*match padding of content in divs above*/
	}


/***************Footnote below the "Container"*/
.web_info{
	font-family: Arial, Helvetica, sans-serif;
	color:#000000;
	font-size:70%;
	padding-top: 10px;
	padding-bottom: 10px;
	}
	
	
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float (from DW template)*/
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}