/*
this is the CSS for the Special Exhibits template. 
by wrapping this text within the forward slash and asterisks the text is not renderd by the style sheet.

NOTE:
the indentations are to inform you visually of the nesting order of page elements.
the # sign is how we call out id's within the xhtml.
the . sign is how we call out classes within the xhtml.
a div acts like a container for smaller page elements like paragraphs and unordered lists. makes it easier to move them around all together.
please be careful when modifying the properties for each element.
changing the floating properties will dramatically alter the layout as will other margins and paddings properties 
CSS properties are cascading, meaning if you alter an elements property further down the css page, it overrwrites the property applied earlier.
*/


/* the body is where your main font properties should be specified. please do not alter the .8125em value which is = to 13px */
body{
	font: .8125em palatino, helvetica, arial;
	text-align: center;
	margin:0;
	padding:0;
	background:black;
	color:white;
}

/* this #wrapper holds the entire page, we call it the "containing" div or "wrapper" div and it is the outer most portion of the visual framework for the information space */
#wrapper{
	text-align:left;
	margin: 0 auto;
	width:800px;
}
h1{
	width:800px;
	height:53px;
	background: url('../images/homepage_header.jpg') top left no-repeat;
	margin:0;
	padding:0;	
}
		h1 span{display:none;}
		
		
		
div#home_left{
	width:175px;
	height:500px;	
	float:left;
	position:relative;
}
#home_nav{
	float: left;
	width: 175px;
	height:500px;
	list-style:none;
	margin:0;
	padding:0;
	background: url('../images/homepage_nav1.jpg') 0 0 no-repeat;
}
#home_nav li{
	height: 52px;
	margin: 0 0 1px 0;

}
		#home_nav li a{
			display: block;
			height: 52px;
			text-indent: -20000px;
			background: url('../images/homepage_nav1.jpg') -350px 0 no-repeat;
		}
		#home_nav li#village a{
			margin-top:48px;
			background-position: 0 -48px;
		}
		#home_nav li#village a:hover, #home_nav li#village a#active{
			background-position: -175px -48px;
		}
		#home_nav li#adams a{
			margin-top:17px;
			background-position: 0 -117px;
		}
		#home_nav li#adams a:hover, #home_nav li#adams a#active{
			background-position: -175px -117px;
		}
		#home_nav li#genealogy a{
			margin-top:18px;
			background-position: 0 -186px;
		}
		#home_nav li#genealogy a:hover, #home_nav li#genealogy a#active{
			background-position: -175px -186px;
		}
		#home_nav li#museum a{
			margin-top:16px;
			background-position: 0 -256px;
		}
		#home_nav li#museum a:hover, #home_nav li#museum a#active{
			background-position: -175px -256px;
		}
		#home_nav li#education a{
			margin-top:18px;
			background-position: 0 -325px;
		}
		#home_nav li#education a:hover, #home_nav li#education a#active{
			background-position: -175px -325px;
		}
		#home_nav li#events a{
			margin-top:17px;
			background-position: 0 -394px;
		}
		#home_nav li#events a:hover, #home_nav li#events a#active{
			background-position: -175px -394px;
}



ul#home_btm_left{
	position:absolute;
	top:448px;
	left:4px;
	width:255px;
	padding:0;
	list-style:none;
	color:black;
	font-size:1.2em;
}
		
div#home_right{
	float:left;
	width:625px;
	height:500px;
	background: url('../images/homepage_logo_default.jpg') top left no-repeat;	
}

/*footer information*/
#footer{
	clear:both; /* the clear property makes sure this content does not start until both margins are free and "clear" of any floating elements, forcing it to stay below the floating elements */
	width:800px;
	height:200px;
	background: url('../images/homepage_footer2.jpg') top left no-repeat;	
}
	#footer ul{
		padding:100px 0 20px 10px;
		margin:20px 0 0 0;
	}

	#footer ul li{
		display:inline;
		margin:0;
		padding:0 10px 0 13px;
	}
		#footer ul li.twolast{
			padding-left:30px;
		}
		#footer ul li.last{
			padding:0;
		}
	#footer ul li a{
		color:#700404; 
		text-decoration:none;
		font-size:.8.9em;
	}
	#footer ul li a:hover{
		text-decoration:underline;
	}