/* 
	copyright Michelle Rajunov, Tamara Levy 2008
	www.MappingDuBois.org css
	globals css
	created: November 15, 2008
	modified: March 3, 2009
	
	colors: 
	#929FAB - blue
	#99BB55 - green
	#D6504C - red
	#f2f077 - gold
	#BBA982 - light brown
	#FBE8BE - cream brown
	#5A4B29 - dark brown
		#574928 - slightly darker brown 1
	#3D331D - darker brown
	
	#993333 - dark red
	#667733 - dark green
	#555566	- dark blue
	#DFB308 - dark gold
*/

/************************* Globals *************************/
body{ 	margin: 0; font-size: 10pt;	color: #FBE8BE;		font-family: Verdana, Helvetica, Arial, sans-serif;	 }
	
#doc{	min-width: 850px; 	margin: 0; 	width: auto;}
#main{	margin: 0 70px;	    min-height: 350px; 		}
#bd{	background: #FBE8BE;}

p{				margin: 0;}
ul{ 			list-style: none;			margin: 0; 		padding: 0;}
a, a:visited{	text-decoration: none; 		color: #99BB55;}
a:hover{		border-bottom: 1px dashed #99BB55; }
a img{	border: 0;		}
#nav a:hover, #sidebar a:hover{	border: 0;}

a.maps{			background: url('../img/maps-button2.gif');	width: 150px; height: 35px;	display: block;	
	margin: 5px auto;}
a.maps:hover{	background: url('../img/maps-button2_over.gif'); 	border: 0;}

/************************* Content ******************************/
#content{		padding: 0px 30px 10px 10px; 		margin-top: -50px;	
				min-width: 565px;					min-height: 200px;		
				font-family: Lucida Grande, Helvetica, Arial, sans-serif;	font-size: 9pt;		}
#content h1.welcome{	margin: 10px auto; 			text-align: center; }
#content div.section{	margin: 0px -10px 20px 10px;	}	
#content p{		text-align: justify; 	margin: 5px 0 15px;}
#content h2{ 	margin-left: 65%; 		padding: 10px;		text-align: right;		position: relative;		z-index: 5;
				font-size: 16pt; 		color: #5A4B29;		background: #929FAB;	border: 2px solid #555566;  }
#content h3{	font-size: 16pt;		padding: 5px 0 0;	margin: 0;		border-bottom: 2px solid #929FAB;}
#content h4{	font-size: 14pt; 		padding: 5px 0 0;	margin: 0;}			
#content ul{	margin: 5px 0 15px 20px;	}				


/* for rotating image ul */
#home{	padding-top: 60px;			min-width: 690px;}
div.welcome{	width: 40%;			min-width: 270px;	padding-right: 5px;}

/************************* Two columns *****************************/
.col1, .col2{	border-color: #BBA982; 	border-style: solid; 	border-width: 10px 10px 20px;  	
				background: #5A4B29; 	padding: 10px;}	
.col1{		float: none;  	position: static;	margin-left: 210px; 				min-width: 720px;	
			background:  url('../img/stripe_brown1.png') repeat;}
.col2{		float: left;  	position: relative;	border-right: 20px solid #BBA982; 	width: 165px;  	}
.row{		clear: both;	position: relative;	padding: 25px; }

/************************* Header  ******************************/
#hd{ background: #FBE8BE url(../img/map.png) repeat-x 50% 0;			margin-bottom: -60px; }
#hd img#logo{	position: relative; 	top: -35px; 	left: 50px; 	z-index: 100;}

/************************* Footer ******************************/
#ft{	background: url('../img/footer_gr.png') repeat-x top center;		text-align: center;			font-size: 7pt;		height: 90px;	margin: 0;	}
#ft p{		padding: 2px 0 0;}
#ft img{	float: right;	margin: 15px;	border:	1px solid #FBE8BE; 	padding: 4px; }
#ft div.ft_caption{	margin: 15px 0;		position: relative;		text-align: right;	
					font-style:italic;	float: right;			width: 160px;}
#ft div.ft_center{	margin-left: 240px;	}
#ft ul{				margin:  10px 0;	}
#ft li{				display: inline; 	margin: 10px;}

#ft img.footer{	margin: -365px 25px -365px;	float: left; border:0; 	position: relative;}

/************************* Top Nav ******************************/
ul#nav{		position: relative; 	top: 116px;				padding: 4px 0px 10px 320px;	
			background: url('../img/menu_gr.png') repeat-x; height: 30px; 	min-width: 725px;}
#nav li{	display: inline; 		margin: 0;				padding: 0;		border: 2px solid #5A4B29;	}
#nav li a{  text-decoration: none; 	color: #FBE8BE;			padding: 0 10px;	}
#nav li.on{	background: #D6504C;	padding: 5px 0 50px 0;	border-color: #993333; }
#nav li.on a{	padding: 5px 10px 50px;}	/* redundant for Safari */

/************************* Sidebar ******************************/
#sidebar { }
ul#sidebar{	  		text-align: right;}
#sidebar li {		position: relative; left: 35px; 	margin: 0 40px 0 -40px;		padding: 1px 0px;
					border: 2px solid #5A4B29;			border-right: 0;		}
#sidebar li a{		color: #FBE8BE;	}
#sidebar li.on  a{ 	color: #142505;}

/* #sidebar li:hover animated with jquery */
#sidebar li.on{	background: #99BB55;		border-color: #667733;
				padding-right: 40px;		margin: 0;		color: #142505;	}

/************************* Forms ******************************/
form{				width: 99%; 	margin: 0 auto;}
fieldset{			border: 0;		padding: 0; 		margin:0;}
label{				padding: 2px 0;	margin: 5px 5px; 	}	
input, textarea{	padding: 2px; 	margin: 5px 0;		border: 2px solid #3D331D; 			 }
input:focus, textarea:focus{		border-color: #241D10;	}
button{				margin: 5px;	clear: both;}

#contact_form{			width: 70%;}
#contact_form input, 
#contact_form textarea{	float: left; 	width: 70%; 	clear: right;		padding: 5px;}
#contact_form label{	float: left; 	width: 100px;	text-align: right;  padding: 5px;}
#contact_form button{	float: right;	width: 80px;	margin-right:85px;}

div#contact_success{ 	position:relative;	top:-45px;	left:220px;	width:250px;	padding:10px;	 
						background: #D6504C; 	border: 1px solid #993333;			display: none;}
#content p.contact{		padding: 7px 0px 10px 30px;		border:	1px solid #3D331D;	background: #ddd;	color: #3D331D;	}

#google{		width: 250px;	float:right;	margin-top:-24px;}
#google input{	width: 120px; 	float: left;	clear: none;}
#google button{ 				float: left;	clear: none;}

/* hidden input field for spammers */
#blanky{				display:none; visibility:hidden;}

/************************* Staff ******************************/
/*!** staff */
#staff{			position: relative;}
#staff p{		margin-top: 10px; }
#staff_list{	float: right; 	width: 25%;			margin-right: 2px;		text-align: right;}
#staff_list p{	text-align: right;	margin: 10px 0 0;}
#staff_info{ 	float: left; 	width: 420px;		height: 500px;
				margin: -20px 0 -20px;				text-align: center; 	overflow: hidden; 	}
				/** set overflow: visible to see the structure of ul **/
#staff_info ul{	clear: both;		width: 	10000px;}
#staff_info li{	height: 500px;		width: 400px;	margin: 0 10px 30px;	float: left; 	}
#staff_info img{margin: 10px 0;		height: 200px;	border:	1px solid #FBE8BE; padding: 4px; }

/************************* Special Divs ******************************/
/*!** special */
div.underconstruction{		
	padding: 10px;  	width: 70%;		margin: 15px auto;
	border: 2px solid #993333; 			background: url('../img/stripe_red1.png') repeat;	}
div.launch	{	
	padding: 15px;		width: 40%;		margin: 5px auto;	color: #3D331D;		text-align: center;
	border: 2px solid #667733; 			background: url('../img/stripe_green1.png') repeat;	}	
div.launch:hover{		border-color: #DFB308; 	background: url('../img/stripe_gold1.png') repeat;}
div.launch  a{ 			color: #993333;	 }
div.launch  a:hover{ 	border-color: #993333;}	

div.image{		position: relative;		text-align: left;	margin: 15px 10px 5px;		}
div .caption{	position: relative;		font-size: 8pt;		margin: 5px auto;	
				text-align: left;	font-style:italic;}
div.image img{	border:	1px solid #FBE8BE; 	padding: 4px; 	}

/* border background image */
div.image span{			background:transparent url('../img/paper-clip.png') no-repeat scroll 0 0;
	display:block;		height:60px;	width:30px;		position:absolute;	left: -2px;		top:-5px;	z-index: 5;	}
/* text for border img */
div.image em{
	background:#FEEEFE none repeat scroll 0 0;		border:1px solid #3D331D;	font-family:"Times New Roman", serif;
	position:absolute;	top: 7px;	left: -15px;	color:#3D331D;		display:block;			padding: 3px 8px;	}

/************************* Logout ******************************/
#logout{	position: fixed; top: 0; right: 0;}
#logout li{	margin: 5px;	padding: 5px;	border: 2px solid #993333; 		background: #D6504C;}
#logout li:hover{	background: #993333;	}
#logout li a{		color: #FBE8BE;}
#logout li a:hover{	border: 0; }

/************************* Classes ******************************/
/*!** classes */
.clear { 	padding: 1px; 	clear: both;}
.center{	display: block;	margin: 0 auto;		clear: both;	text-align: center;}
.left,   div.left,   p.left{		float: left;}
.right,  div.right,  p.right{		float: right;}
.center, div.center, p.center{		margin: 0 auto;	text-align: center;	float: none;}
.twenty, div.twenty, p.twenty{		width: 20%; }
.thirty, div.thirty, p.thirty{		width: 30%; }
.thirty-five, div.thirty-five{		width: 35%  }
.forty,  div.forty,  p.forty{		width: 40%; }
.forty-five, div.forty-five{		width: 45%; }
.fifty,  div.fifty,  p.fifty{		width: 50%; }
.sixty,  div.sixty,  p.sixty{		width: 60%; }
.sixty-five, div.sixty-five{		width: 65%  }

.ninety-nine{	width: 99%; }
div.inline{		display:inline;}