/* Last Updated: 2-10-22 */

	/* Make it friendly to mobile phone browsing */
	/* Also ask Tim if there is a better way of doing the meeting minutes 
	page - some easier way (a table maybe?)  than continually just
	adding lists in html */

/*========== style for: all/common pages ==========*/	
body {
	background-color: #B22222; /*this is firebrick*/
	font-family: Georgia,serif;
	/* basically, I want the content in the window to 
	resize automtically but if the browser window gets small enough i
	wanted a horizantal scroll bar to appear - will that help with 
	mobile browsing?...But this command doesn't seem to do anything 
	even though a horizantal scroll bar does appear, it doesn't do
	anything because the text and everything else continues to 
	resize anyway...STUPID COMUPUTERS...*/
	}

h1 {
	text-align: center;
	color: #006400; /*this is darkgreen*/
	}

h2 {
	text-align: center;
	color: #006400; /*this is darkgreen*/
	}

p {
	margin-left: 20px;
	font-size: 1.5em;
	text-indent: 30px;
	}

p.indent {
	margin-left: 250px;
	font-size: 1.5em;
	text-indent: -30px;
	}

p.indent2x {
	margin-left: 250px;
	font-size: 1.5em;
	text-indent: 0px;
	}
	
p.indent3x {
	margin-left: 250px;
	font-size: 1.5em;
	text-indent: 30px;
	}	

a:link {
	color: #0000FF; /* this is blue */
	text-decoration: underline;
	}

a:visited {
	color: #0000FF; /* this is blue */
	text-decoration: underline;
	}

a:hover {
	color: #228B22; /*this is forestgreen*/
	text-decoration: underline;
	}

a:active {
	color: #000000; /* this is black */
	text-decoration: underline;
	}

a.note {
	font-size: 1em;
	margin-left: 2px;
	}
	
a.note:link {
	color: #0000FF; /* this is blue */
	text-decoration: none;
	}

a.note:visited {
	color: #B22222; /* this is firebrick */
	text-decoration: none;
	}

a.note:hover {
	color: #006400; /* this is darkgreen */
	text-decoration: none;
	position:relative;
	}

a.note span { 
	position:absolute;
	display:none;
	z-index:99;
	top:23px;
	left:-120px;
	}	
	
a.note:hover span {
	display:block;
	}	
	
a.note:active {
	color: #000000; /* this is black */
	text-decoration: none;
	}	

abbr[title] {
  border-bottom: none;
  text-decoration: none;
}
	
div#header {
	width: 100%;
	min-width: 695px;
	height: 150px;
	top: 0px;
	left: 0px;
	position: fixed;
	background-color: #B22222; /*this is firebrick*/
	font-size: 1.75em;
	text-align: center;
	z-index: 2;
	}	

div#home {
	top: 2px;
	left: 2px;
	position: absolute;
	z-index: 3;
	}

div#home img {
	width: 135px;
	height: 135px;
	color: #000000; /*this is black*/
	font-size: .7em;
	}

div#logo {
	top: 6px;
	left: 0%; /* so...why can't I situate the logo in the center of 
	the header, the seal is centered in the center of the body... 
	STUPID computers!!! Ahhh.... this was fixed by inserting the 
	command "text-align: center" in the parent 'header' div and by
	assigning the 'position' of this element as 'relative' */
	position: relative;
	z-index: -1;
	}

div#logo img {
	height: 131px;
	color: #000000; /*this is black*/
	font-size: .7em;
	}

div#operation {
	top: -12px;
	right: 5px;
	font-size: .35em;
	text-shadow: none;
	text-align: right;
	position: absolute;
	}
	
div#operation a:link {
	color: #FFFFFF; /*this is white*/
	text-decoration: underline;
	text-shadow: 1.5px 1.5px #006400; /*this is darkgreen*/
	}

div#operation a:visited {
	color: #FFFFFF; /*this is white*/
	text-decoration: underline;
	text-shadow: 1.5px 1.5px #006400; /*this is darkgreen*/
	}

div#operation a:hover {
	color: #000000; /* this is black */
	text-decoration: underline;
	text-shadow: .5px .5px #006400; /*this is darkgreen*/
	}

div#donatenow {
	top: 39px;
	right: 1px;
	text-align: right;
	position: absolute;
	z-index: 1;
	}	
	
div#toggle {
	top: 88px;
	right: 10px;
	text-align: right;
	position: absolute;
	z-index: 1;
	}

	/* THANK YOU Ralph Phillips for your excellent YouTube tutorial on navigation menus! */
ul#navmenu, ul.sub1, ul.sub2 {
	list-style-type: none;
	padding: 0px;
	}

div#menu {
	position: absolute;
	top: 110px;	
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	}

ul#navmenu li {
	text-align: center;
	position: relative;
	float: left; /* this is what tells the list to go horizontal*/
	margin-right: 0px;
	font-size: .85em;
	}

ul#navmenu li.main {
	width: 20%;
	}

ul#navmenu li.s1 {
	width: 100%;
	margin-right: 0px;
	position: relative;
	font-size: .85em;
	}

ul#navmenu li.s2 {
	width: 100%;
	margin-right: 0px;
	position: relative;
	font-size: 1em;
	}

ul#navmenu a {
	text-decoration: none;
	text-shadow: none;
	color: #FFFFFF; /* this is white */
	background-color: #B22222; /*this is firebrick*/
	display: block;
	height: 50px;
	border-color: #000000; /*this is black*/
	border-width: 1px;
	border-style: solid;
	box-shadow: 0px 5px 10px #000000; /*this is black*/
	}

ul#navmenu li:hover > a {
	color: #F5DEB3; /*this is wheat*/
	background-color: #006400; /*this is darkgreen*/
	}

ul#navmenu li:hover a:hover {
	background-color: #228B22; /*this is forestgreen*/
	}

ul#navmenu ul.sub1 {
	width: 100%;
	float: none;
	display: none; /* "display:block" will let you see the sub menu position*/
	left: 0px;
	}

ul#navmenu ul.sub2 {
	width: 100%;
	float: none;
	display: none; /* "display:none" will hide the sub menu until you put in the next step*/
	left: 0px;
	}

ul#navmenu li:hover .sub1 {
	display: block;
	}

ul#navmenu .sub1 li:hover .sub2 {
	display: block;
	}

.d_arrow {
	font-size: .4em;
	left: 7px;
	text-shadow: none;
	}

div#detectivemode {
	display: none;
	margin-top: 105px;
	position: fixed;
	z-index: 0;
	left: 0px;
	right: 0px;
	height: 50%;
	margin-bottom: 15px;
	background-color: #00;
	padding-bottom: 0px;
	padding-top: 50px;
	padding-right: 10px;
	text-align: center;
	}
	
div#wrapper {
	min-width: 695px;
	background-image: url("1.png");
   	background-size: 33%;
	background-attachment: absolute; /* or "fixed" */
	background-repeat: repeat-y; /* or "no-repeat" */
	background-position: 50% 90%;
	background-color: #F5DEB3; /*this is wheat*/
	border-width: 1px;
	border-style: solid;
	z-index: 1;
	}
	
div#content {
	margin-top: 150px;
	z-index: -1;
	left: 0px;
	right: 0px;
	height: 100%;
	margin-bottom: 85px;
	background-color: #00;
	padding-bottom: 0px;
	padding-top: 50px;
	padding-right: 10px;
	}	
	
div#footnote {
	position:relative;
	font-family:Comic Sans MS,sans-serif;
	font-size:.85em;
	line-height:1.1;
	}
	
#footnote p {
	margin-bottom:-10px;
	}
	
div#webeditor {
	font-size: .7em;
	}		
	
div#footer {
	width: 100%;
	min-width: 695px;
	background-color: #B22222; /*this is firebrick*/
	position: relative;
	left: 0px;
	bottom: 0px;
	text-align: center;
	color: #F5DEB3; /*this is wheat*/
	font-style: oblique;
	text-shadow: 1.5px 1.5px #000000; /*this is black*/
	}

div#footertext {
	padding: 5px;
	}

div#footer a:link {
	color: #FFFFFF; /*this is white*/
	text-decoration: underline;
	text-shadow: 1.5px 1.5px #006400; /*this is darkgreen*/
	}

div#footer a:visited {
	color: #FFFFFF; /*this is white*/
	text-decoration: underline;
	text-shadow: 1.5px 1.5px #006400; /*this is darkgreen*/
	}

div#footer a:hover {
	color: #000000; /* this is black */
	text-decoration: underline;
	text-shadow: .5px .5px #006400; /*this is darkgreen*/
	}	

	/*========== style for reference part of pages ==========*/	
h4 {
	text-align: center;
	font-size: 1.5em;
	color: #ffffff; /*this is white*/
	text-shadow: 
		-2px -2px #000000, /*this is black*/
		-2px 2px #000000, /*this is black*/
		2px -2px #000000, /*this is black*/
		2px 2px #000000; /*this is black*/
	}
	
/*========== style for: Home page ==========*/
	/* THANK YOU Joshua Johnson for your designshack.net article showing how to make an infinite auto-scrolling photo banner */
div#banner {
	width: 95%;
	overflow: hidden;
	margin: 15px auto;
	margin-top: -10px;
	background: #00; /* #00 is hexidecimal for 'transparent */
	}

.photobanner {
	height: 233px;
	width: 3250px; /* 236 x number of pics*/
	margin-bottom: 0px;
	}
	
.first {
	-webkit-animation: bannermove 80s linear infinite;
	   -moz-animation: bannermove 80s linear infinite;
	    -ms-animation: bannermove 80s linear infinite;
	     -o-animation: bannermove 80s linear infinite;
	        animation: bannermove 80s linear infinite;
	}
 
@keyframes "bannermove" {
		0% {
			margin-left: 0px;
		}
		100% {
			margin-left: -3800px; /* 290 x number of pics */
		}
 	}
 
@-moz-keyframes bannermove {
		0% {
			margin-left: 0px;
		}
		100% {
		margin-left: -3800px;
		}
	}
 
@-webkit-keyframes "bannermove" {
		0% {
		margin-left: 0px;
		}
		100% {
		margin-left: -3800px;
		}
	}
 
@-ms-keyframes "bannermove" {
		0% {
		margin-left: 0px;
		}
		100% {
		margin-left: -3800px;
		}
	}
 
@-o-keyframes "bannermove" {
		0% {
		margin-left: 0px;
		}
		100% {
		margin-left: -3800px;
		}
	}	

/*========== style for: Newsletters page ==========*/	
div#newsletter {
	position: fixed;
	top: 173px;	
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	z-index: 1;
	font-size: 1.1em;
	}

ul#news, ul {
	list-style-type: none;
	padding: 0px;
	}

ul#news li {
	text-align: center;
	position: relative;
	float: left; /* this is what tells the list to go horizontal*/
	margin-right: 0px;
	font-size: .90em;
	}

ul#news li.heading {
	width: 50%;
	margin-right: 0px;
	position: relative;
	}

ul#news a {
	text-decoration: none;
	text-shadow: none;
	color: #FFFFFF; /* this is white */
	background-color: #000000; /*this is black*/
	display: block;
	height: 30px;
	line-height: 35px;
	border-color: #FFFFFF; /*this is white*/
	border-width: 1px;
	border-style: solid;
	box-shadow: 0px 5px 10px #000000; /*this is black*/
	}

ul#news li:hover > a {
	color: #F5DEB3; /*this is wheat*/
	background-color: #006400; /*this is darkgreen*/
	}

ul#news li:hover a:hover {
	background-color: #228B22; /*this is forestgreen*/
	}

ul#news ul.{
	width: 100%;
	float: none;
	display: none; /* "display:block" will let you see the sub menu position*/
	left: 0px;
	}	
	
/*========== style for: Tours page ==========*/
div#selfguided {
	position: fixed;
	top: 173px;	
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	z-index: 1;
	font-size: 1.1em;
	}

ul#tours, ul {
	list-style-type: none;
	padding: 0px;
	}

ul#tours li {
	text-align: center;
	position: relative;
	float: left; /* this is what tells the list to go horizontal*/
	margin-right: 0px;
	font-size: .90em;
	}

ul#tours li.heading {
	width: 25%;
	margin-right: 0px;
	position: relative;
	}

ul#tours a {
	text-decoration: none;
	text-shadow: none;
	color: #FFFFFF; /* this is white */
	background-color: #000000; /*this is black*/
	display: block;
	height: 30px;
	line-height: 35px;
	border-color: #FFFFFF; /*this is white*/
	border-width: 1px;
	border-style: solid;
	box-shadow: 0px 5px 10px #000000; /*this is black*/
	}

ul#tours li:hover > a {
	color: #F5DEB3; /*this is wheat*/
	background-color: #006400; /*this is darkgreen*/
	}

ul#tours li:hover a:hover {
	background-color: #228B22; /*this is forestgreen*/
	}

ul#tours ul.{
	width: 100%;
	float: none;
	display: none; /* "display:block" will let you see the sub menu position*/
	left: 0px;
	}

/*========== style for: Bicentennial Quilt page ==========*/
div#quilters {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	z-index: 1;
	font-size: 1.5em;
	}

ul#links, ul {
	list-style-type: none;
	padding: 0px;
	}

ul#links li {
	text-align: center;
	position: relative;
	float: left; /* this is what tells the list to go horizontal*/
	margin-right: 0px;
	font-size: 1.5em;
	}

ul#links li.heading {
	width: 50%;
	margin-right: 0px;
	position: relative;
	}

ul#links a {
	text-decoration: none;
	text-shadow: none;
	color: #FFFFFF; /* this is white */
	background-color: #000000; /*this is black*/
	display: block;
	height: 30px;
	line-height: 35px;
	border-color: #FFFFFF; /*this is white*/
	border-width: 1px;
	border-style: solid;
	box-shadow: 0px 5px 10px #000000; /*this is black*/
	}

ul#links li:hover > a {
	color: #F5DEB3; /*this is wheat*/
	background-color: #006400; /*this is darkgreen*/
	}

ul#links li:hover a:hover {
	background-color: #228B22; /*this is forestgreen*/
	}

ul#links ul.{
	width: 100%;
	float: none;
	display: none; /* "display:block" will let you see the sub menu position*/
	left: 0px;
	}	
	
/*========== style for: Waldo's World ==========*/	
p.pin {
	position: absolute;
	text-align: center;
	font-size: 1.7em;
	color: #ffffff; /*this is white*/
	text-shadow: 
		-2px -2px #000000, /*this is black*/
		-2px 2px #000000, /*this is black*/
		2px -2px #000000, /*this is black*/
		2px 2px #000000; /*this is black*/
	}

a.point {
	font-size: .5em;
	margin-left: 3px;
	}
	
a.point:link {
	color: #FFFF00; /* this is yellow */
	text-decoration: none;
	}

a.point:visited {
	color: #FFFF00; /* this is yellow */
	text-decoration: none;
	}

a.point:hover {
	color: #0000FF; /* this is blue */
	text-decoration: none;
	position:relative;
	}

a.point span { 
	position:absolute;
	display:none;
	z-index:99;
	top:9px;
	left:-120px;
	}	
	
a.point:hover span {
	display:block;
	}	
	
a.point:active {
	color: #000000; /* this is black */
	text-decoration: none;
	}	
	
div#header2 {
	width: 100%;
	min-width: 5px;
	height: 75px;
	top: -35px;
	right: 0px;
	position: fixed;
	background-color: #228B22; /*this is forestgreen*/
	font-size: 1.75em;
	text-align: center;
	z-index: 1;
	}	

div#wrapper2 {
	min-width: 695px;
	background-color: #F5DEB3; /*this is wheat*/
	z-index: 1;
	}

div#content2 {
	margin-top: 0px;
	z-index: -1;
	left: 0px;
	right: 0px;
	height: 100%;
	margin-bottom: 0px;
	background-color: #00;
	padding-bottom: 0px;
	padding-top: 0px;
	padding-right: 0px;
	}
	
/*========== style for: On This Day ==========*/		
div#thisday {
	position: fixed;
	top: 173px;	
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	z-index: 1;
	font-size: 1.1em;
	}

ul#calender, ul {
	list-style-type: none;
	padding: 0px;
	}

ul#calender li {
	text-align: center;
	position: relative;
	float: left; /* this is what tells the list to go horizontal*/
	margin-right: 0px;
	font-size: .90em;
	}

ul#calender li.month {
	width: 8.3%;
	margin-right: 0px;
	position: relative;
	}

ul#calender a {
	text-decoration: none;
	text-shadow: none;
	color: #FFFFFF; /* this is white */
	background-color: #000000; /*this is black*/
	display: block;
	height: 30px;
	line-height: 35px;
	border-color: #FFFFFF; /*this is white*/
	border-width: 1px;
	border-style: solid;
	box-shadow: 0px 5px 10px #000000; /*this is black*/
	}

ul#calender li:hover > a {
	color: #F5DEB3; /*this is wheat*/
	background-color: #006400; /*this is darkgreen*/
	}

ul#calender li:hover a:hover {
	background-color: #228B22; /*this is forestgreen*/
	}

ul#calender ul.{
	width: 100%;
	float: none;
	display: none; /* "display:block" will let you see the sub menu position*/
	left: 0px;
	}	

/*========== style for: Local History page ==========*/
div#local {
	position: fixed;
	top: 173px;	
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	z-index: 1;
	font-size: 1.1em;
	}

ul#links, ul {
	list-style-type: none;
	padding: 0px;
	}

ul#links li {
	text-align: center;
	position: relative;
	float: left; /* this is what tells the list to go horizontal*/
	margin-right: 0px;
	font-size: .90em;
	}

ul#links li.heading {
	width: 33.3%;
	margin-right: 0px;
	position: relative;
	}

ul#links a {
	text-decoration: none;
	text-shadow: none;
	color: #FFFFFF; /* this is white */
	background-color: #000000; /*this is black*/
	display: block;
	height: 30px;
	line-height: 35px;
	border-color: #FFFFFF; /*this is white*/
	border-width: 1px;
	border-style: solid;
	box-shadow: 0px 5px 10px #000000; /*this is black*/
	}

ul#links li:hover > a {
	color: #F5DEB3; /*this is wheat*/
	background-color: #006400; /*this is darkgreen*/
	}

ul#links li:hover a:hover {
	background-color: #228B22; /*this is forestgreen*/
	}

ul#links ul.{
	width: 100%;
	float: none;
	display: none; /* "display:block" will let you see the sub menu position*/
	left: 0px;
	}

/*========== style for: Archives page ==========*/	
div#archive {
	position: fixed;
	top: 173px;	
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	z-index: 1;
	font-size: 1.1em;
	}

ul#view_type, ul {
	list-style-type: none;
	padding: 0px;
	}

ul#view_type li {
	text-align: center;
	position: relative;
	float: left; /* this is what tells the list to go horizontal*/
	margin-right: 0px;
	font-size: .9em;
	}

ul#view_type li._note {
	width: 50%;
	margin-right: 0px;
	position: relative;
	}

ul#view_type a {
	text-shadow: none;
	color: #FFFFFF; /* this is white */
	background-color: #000000; /*this is black*/
	display: block;
	height: 30px;
	line-height: 35px;
	border-color: #FFFFFF; /*this is white*/
	border-width: 1px;
	border-style: solid;
	box-shadow: 0px 5px 10px #000000; /*this is black*/
	}

ul#view_type li:hover > a {
	color: #F5DEB3; /*this is wheat*/
	background-color: #006400; /*this is darkgreen*/
	}

ul#view_type li:hover a:hover {
	background-color: #228B22; /*this is forestgreen*/
	}

ul#view_type ul.{
	width: 100%;
	float: none;
	display: none; /* "display:block" will let you see the sub menu position*/
	left: 0px;
	}		
	
	/* THANK YOU kthornbloom for your http://jsfiddle.net/kthornbloom/zJ6kp/ post on making a scrolling timeline */
.timeline {
    white-space:nowrap;
    overflow-x: scroll;
    padding:30px 0 140px 0;
    position:relative;
}

.entry {
    display:inline-block;
    vertical-align:top;
    background:#228B22;
    color:#FFFFFF;
    padding:8px;
    font-size:12px;
    text-align:center;
    position:relative;
    border-top:5px solid #000000;
    border-radius:10px;
	min-width:75px;
    max-width:500px;
}

.entry img {
    display:block;
    max-width:100%;
    height:auto;
    margin-bottom:10px;
}

.entry:after {
    content:'';
    display:block;
    background:#eee;
    width:7px;
    height:7px;
    border-radius:6px;
    border:3px solid #06182E;
    position:absolute;
    left:50%;
    top:-30px;
    margin-left:-6px;
}

.entry:before {
    content:'';
    display:block;
    background:#06182E;
    width:5px;
    height:20px;
    position:absolute;
    left:50%;
    top:-20px;
    margin-left:-2px;
}

.entry h1 {
	text-shadow: 1px -1px #000000, -1px 1px #000000, 1px 1px #000000, -1px -1px #000000;
    color:#FFFFFF;
    font-size:15px;
    font-family:Georgia, serif;
    font-weight:bold;
	margin-top:-7px;
    margin-bottom:-1px;
}

.entry h2 {
	text-shadow: 1px -1px #000000, -1px 1px #000000, 1px 1px #000000, -1px -1px #000000;
    color:#FFFFFF;
	margin-top:-1px;
    margin-bottom:0px;
    font-size:13px;
}

.entry h3 {
	text-shadow: 1px -1px #000000, -1px 1px #000000, 1px 1px #000000, -1px -1px #000000;
    letter-spacing:.1em;
	margin-top:7px;
    margin-bottom:0px;
    font-size:11px;
}

.bar {
    height:4px;
    background:#eee;
    width:100%;
    position:relative;
    top:13px;
    left:0;
}		
	
/*========== style for other pages (but I don't remeber where I may have used it - or if it is still used [and I've not time now to go through each page looking for it) ==========*/	
h5 {
	text-align: center;
	font-size: 1.3em;
	color: #ffffff; /*this is white*/
	text-shadow: 
		-2px -2px #000000, /*this is black*/
		/*-2px 2px #000000, /*this is black*/
		/*2px -2px #000000, /*this is black*/
		/*2px 2px #000000; /*this is black*/
	}