/* CSS Document */

@import url(reset.css);

/* Basic Structure
---------------------------- */
body {
	color: #1d1d1d;
	background: #939580 url(../_images/bkgrd_body.gif) top left repeat-x;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 95%;
	line-height: 150%;
	}
div#wrap {
	margin: 0 auto;
	width: 960px;
	}
div#banner {
	margin: 5px 0 15px 0;
	height: 259px;
	width: 960px;
	border-bottom: 1px solid #48493e;
	}
div#footer {
	position: relative;
	clear: both;
	padding: 1em 0 2em 0;
	color: #54554a;
	font-size: 80%;
	text-align: center;
	border-top: 1px solid #6e6f62;
	}

/* Navigation
---------------------------- */
ul#nav {
	height: 59px;
	width: 960px;
	background: transparent url(../_images/bkgrd_nav.gif) top left no-repeat;
	}
ul#nav li {
	position: relative;
	float: left;
	height: 59px;
	}
ul#nav li a {
	display: block;
	height: 59px;
	text-indent: -9999px;
	}
	ul#nav li#home {width: 63px; background: transparent url(../_images/nav_home.gif) center no-repeat}
		ul#nav li#home a:hover, ul#nav li#home.selected {background: transparent url(../_images/nav_home_hover.gif) center no-repeat}
	ul#nav li#history {width: 156px; background: transparent url(../_images/nav_history.gif) center no-repeat}
		ul#nav li#history a:hover, ul#nav li#history.selected {background: transparent url(../_images/nav_history_hover.gif) center no-repeat}
	ul#nav li#events {width: 139px; background: transparent url(../_images/nav_events.gif) center no-repeat}
		ul#nav li#events a:hover, ul#nav li#events.selected {background: transparent url(../_images/nav_events_hover.gif) center no-repeat}
	ul#nav li#tour {width: 168px; background: transparent url(../_images/nav_tour.gif) center no-repeat}
		ul#nav li#tour a:hover, ul#nav li#tour.selected {background: transparent url(../_images/nav_tour_hover.gif) center no-repeat}
	ul#nav li#member {width: 187px; background: transparent url(../_images/nav_member.gif) center no-repeat}
		ul#nav li#member a:hover, ul#nav li#member.selected {background: transparent url(../_images/nav_member_hover.gif) center no-repeat}
	ul#nav li#map {width: 140px; background: transparent url(../_images/nav_map.gif) center no-repeat}
		ul#nav li#map a:hover, ul#nav li#map.selected {background: transparent url(../_images/nav_map_hover.gif) center no-repeat}
	ul#nav li#contact {width: 107px; background: transparent url(../_images/nav_contact.gif) center no-repeat}
		ul#nav li#contact a:hover, ul#nav li#contact.selected {background: transparent url(../_images/nav_contact_hover.gif) center no-repeat}

/* Headings
---------------------------- */
h1 {text-indent:-9999px;height:0}
h2 {margin-bottom: .3em; padding-bottom: .2em; color: #872f1b; font-size: 130%; border-bottom: 1px solid #872f1b}
h3 {margin-bottom: .5em; color: #f2efe9; font-size: 110%}
h4 {margin-bottom: .5em; color: #e0e1d5; font-size: 90%; font-style: italic}
h5 {margin-bottom: .5em; color: #e0e1d5; font-size: 90%; text-transform: lowercase; font-variant: small-caps}

/* Links
---------------------------- */
a:link {color: #004b76}
a:hover, a:active {color: #f2efe9}
a:visited {color: #872f1b}

/* Text
---------------------------- */
p {margin-bottom: .75em}
p.dateloc {font-style: italic}
p.top {
	position: relative;
	clear: both;
	margin: .75em 0 1.5em 1.5em;
	}
span.ampm {font-variant: small-caps}

img.dec-img {
	float: right;
	margin: 1em 0 1em 2em;
	}

/* Home
---------------------------- */
div#welcome {
	margin: 0 22px 0 10px;
	position: relative;
	float: left;
	width: 688px;
	}
	div#welcome p {font-size: 105%}
	div#welcome p#first {margin-top: .5em}
	div#welcome p span {color: #f2efe9}
	ul#news li {
	position: relative;
	float: left;
	margin-bottom: 6px;
	padding: 10px 15px;
	background: #8a8d78;
	font-size: 80%;
	line-height: 160%;
	}
	ul#news li.newer {
	position: relative;
	float: left;
	width: 45%;
	}
	ul#news li.older {
	position: relative;
	float: right;
	width: 45%;
	}
	ul#news li img {
	position: relative;
	float: left;
	margin: .2em .65em 0 0;
	padding: 3px;
	border: 1px solid #6e6f62;
	}
div#upcomingevents {
	position: relative;
	float: right;
	width: 240px;
	font-size: 76%;
	}
	ul.event {margin-bottom: 1em}
	ul.event li.date {font-size: 110%; font-variant: small-caps; border-bottom: 1px solid #6e6f62}
	ul.event li.title {margin: .6em 0 .3em 0; color: #f2efe9; line-height: 160%}
	ul.event li.desc {margin-bottom: .8em; line-height: 150%}
	div#upcomingevents p {margin-bottom: 1.5em;}

/* History of the Fort
---------------------------- */
div#history {
	margin: 0 22px 10px 10px;
	position: relative;
	float: left;
	width: 560px;
	}
ul.anchor-list {
	margin-bottom: 1.5em;
	font-size: 85%;
	list-style-type: square;
	}
div#personalities {
	position: relative;
	float: right;
	width: 358px;
	}
	div#personalities h4 {border-bottom: 1px solid #adaea2}
	div#personalities p {font-size: 76%}
	img.fortpersonality {
	position: relative;
	float: left;
	margin: .3em 12px 0 0;
	}
	a img.fortpersonality {border: 2px solid #6e6f62}
	a:hover img.fortpersonality {border-color: #f2efe9}

/* Upcoming Events
---------------------------- */
h2.up-events, h2#pastevents2009 {clear: both}
	h2#pastevents2009 {padding-top: 30px}
div.events_left {
	position: relative;
	float: left;
	margin-right: 10px;
	width: 350px;
	}
div.events_right {
	position: relative;
	float: right;
	width: 560px;
	}
ul.upcomingevent {
	float: left;
	margin: 1em 5% 1.5em 0;
	width: 30%;
	/* min-height: 18em; */
	}
	ul.upcomingevent.last {margin-right: 0}
	/* ul.upcomingevent.short {min-height: 11em} */
ul.upcomingevent li.images {
	position: relative;
	float: left;
	margin-top: .5em;
	margin-right: 15px;
	}
	ul.upcomingevent li.images img {border: 2px solid #6e6f62}
/* For additional CSS related to ul.past-event-photos, see Tour below */
ul.upcomingevent li.date {
	margin-bottom: .5em;
	font-variant: small-caps;
	border-bottom: 1px solid #6e6f62;
	}
ul.upcomingevent li.title {color: #f2efe9}
ul.upcomingevent li.desc {line-height: 130%}
ul.christmas {width: 100%; margin-right: 0}

h2#upcomingevents, h2#pastevents2008, h2#pastevents2008 {
	position: relative;
	clear: both;
	} 
h3.past-event-header {
	clear: both;
	}
div.past-event {
	position: relative;
	float: left;
	margin-right: 10px;
	width: 350px;
	}
ul.past-event-photos {
	position: relative;
	float: right;
	margin-top: .5em;
	margin-bottom: 2em;
	width: 580px;
	}
a#flyer {float: right; margin: 1em 0 1em 2em}
ul.point-of-contact {
	float: left;
	margin-bottom: 1em;
	width: 50%;
	}

/* Tour Fort Steilacoom
---------------------------- */
h3.tour-heading {
	clear: left;
	padding-top: .8em;
	border-bottom: 1px solid #adaea2;
	}
	h3.tour-heading.at-top {padding-top:0}
ul.tour-photos li, ul.past-event-photos li {
	position: relative;
	float: left;
	margin: 0 6px 12px 6px;
	width: 180px;
	height: 135px;
	background-color: #666666;
	} ul.past-event-photos li.vertical {width: 101px; height: 135px}
	ul.tour-photos li.person {
	margin: 0 10px 20px 6px;
	width: 80px;
	height: 80px;
	}
ul.tour-photos li a, ul.past-event-photos li a {
	display: block;
	width: 100%;
	height: 100%;
	border: 2px solid #6e6f62;
	}
ul.tour-photos li a:hover, ul.past-event-photos li a:hover {
	border-color: #f2efe9;
	}

/* Membership
---------------------------- */
img.member {
	position: relative;
	float: right;
	margin: 0 10px 1.5em 0;
	border: 2px solid #6e6f62;
	}

/* Contact Us
---------------------------- */
div#contactinfo {
	position: relative;
	float: left;
	width: 35%;
	}
ul.contact-list {
	margin-bottom: 1.6em;
	}
div#links {
	position: relative;
	float: right;
	width: 65%;
	}
ul.links-list {
	margin-bottom: 1.5em;
	font-size: 85%;
	list-style-type: square;
	}
	ul.links-list li {margin-bottom: .8em}