html	{width: 100%;margin: 0;padding: 0;}
body	{font-family: times; width: 100%;margin: 0;padding: 0; background-color:#FEFFF4; color:#204000;font-size: 18px;line-height: 22px;box-sizing: border-box;}

a 	{color: #0028ff;text-decoration: none;}
a:hover	{text-decoration:underline;color: #5f04e3;}

.adSmallHeaderDiv {float:left;margin:12px 0 0 6px;max-width:100%;}
.adSmallHeader {display:inline-block;width:468px;height:60px;}
.adSmallDiv {margin:12px 0 0 6px;max-width:100%;}
.adSmall {display:inline-block;width:468px;height:60px;}

.morePages	{font-size:1em;}

.para	{margin: 16px 0 0 0;}

#header	{background-color:rgb(135, 39, 34); height: 200px;overflow: hidden;position: relative;border-top: 4px solid black;border-bottom: 1px solid black;}

#footer	{background-color:rgb(135, 39, 34); position: relative;    bottom: 0;    width: 100%;}

#footerLeft	{float:left;width:50%;height:100px;}
#footerRight	{float:left;width:50%;text-align:right;height:100px;padding: 20px 20px 0 0;box-sizing: border-box;}

#footerRight a	{color:#F1D366;padding: 0 0 0 12px;}

#wethepeople	{opacity:.9;}
#whenwhere	{color:#F1D366;position: absolute;top: 130px;left: 450px;}
#zquote		{position: absolute; color: blanchedalmond;
    top: 105px;
    left: 400px;
    display: inline-block;}

.zquote		{margin:30px 0 0 0;}

#topText	{margin:12px 16px;font-size:1.2em;font-weight:bold;}
#introText	{margin:12px 16px 20px 16px;}

.displayAdv	{display: inline-block;min-width:100px;min-height: 300px;float: right;margin: 0px 10px 0 0;}

.sidebarAd {float:right;width:260px;text-align: center;margin-right: 12px;}

#logo1	{position: absolute;    top: 20px;    left: 390px;    font-size: 4em;color: rgb(252, 230, 112);}

#logo2	{position: absolute;    top: 68px;    left: 420px;    font-size: 2.2em;color: rgb(252, 230, 112);}

#intro		{margin:0 0 0 10px;}
#pickem		{margin:8px 0 12px 10px;}
#pickState	{margin:0 10px 0 10px;}
.stateMap	{max-width:100%;}

.map	{width: 800px;  height: 400px;  margin: 16px 0 0 0;}

#listingBody	{margin:10px 0 0 20px;}
#listingBodyListing	{margin:10px 0 0 20px;max-width:800px;}

.listingLink	{border: 1px solid gray;display: inline-block !important;padding: 5px;border-radius: 10px;margin: 6px 0 0 30px;background-color: lightgray;}

#map-container	{max-width:1000px;margin: 0 12px;}

#selectState	{margin:0 0 0 10px;}	
#usaStates	{margin:0 10px 0 10px;}
#usaMap		{max-width:100%;margin: 0 0 10px 0;}	

.nationalArchivesLink	{}
.nationalArchivesLink a	{color:black;text-decoration:none;}
.nationalArchivesLink img {width:16px;}


.anattrib	{margin:0 0 6px 0;}

.attrib	{width: unset;
    text-align: left;
    display: block;margin: 0 0 0 10px;font-weight:bold;}

.attribT	{
    text-align: left;
    display: block;margin: 0 0 0 30px;}

.floatingSocial {display:float;}
.socialIcons	{width:64px;}

.listing	{box-sizing: border-box;width:calc(100% - 300px); margin:10px 10px 20px 10px;background-color: #e3e9eab3;border:1px solid #a27777; overflow:hidden;box-shadow: 0px 1px 6px 0px #1c1a1a;}
.listing	{display:flex;flex-wrap: wrap;}

.listheader	{box-sizing: border-box;padding:10px;background-color: #cab795e6;width:50%;float:left;}
.listattrib	{box-sizing: border-box;padding:10px 0 10px 0;width:50%;float:left;line-height:20px;font-size: 16px;}
.listattribListing	{box-sizing: border-box;padding:10px 0 10px 0;max-width:800px;line-height:24px;font-size: 20px;}
.listAdditional	{padding:10px;}
.listAdditionalListing	{padding:10px;font-size:20px;line-height:24px;}

.photoBox	{float:right;width: 100%;max-width: 600px;background-color: white;padding: 4px;box-sizing: border-box;margin-top: 10px;}
.photoBoxImage	{object-fit: cover;width: 100%;max-height: 600px;}
.photoCredit	{font-size: .72em;line-height: 1em;padding: 2px 0 0 0;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;opacity:.6;}
.photoCredit a	{color:unset;}
.photoCredit:hover {overflow: visible; white-space: normal; height:auto; }
.comingSoon	{max-width:400px;}
.noPhoto	{opacity:.3;}

.photoBoxListing	{width: 100%;max-width: 800px;background-color: white;padding: 4px;box-sizing: border-box;margin-top: 10px;}
.photoBoxImageListing	{object-fit: cover;width: 100%;max-height: 600px;}

#selectCounty	{padding:10px;}
#selectState	{padding:10px;}

.county		{display:inline-block;margin:0 16px 0 0 ;font-size:.96em;}
.state		{display:inline-block;margin:0 16px 0 0 ;font-size:.96em;}

.return2top	{padding:10px;}

.return2home	{padding:10px;}

.bar		{margin:0 10px 0 10px;max-width:90%;}

#topmenuleft	{margin:0 0 0 8px;}

.topmenu	{box-shadow:2px 2px 4px #000000a1;margin: 0 2px 0px 2px; display: inline-block;line-height: 28px;color:#ffe037; background-color: #3c270082; padding: 0px 8px;border-radius: 0 0 10px 10px;border: 0px solid black;  border-top-width: 2px;border-top-width: 0; font-size:22px;}

.menuoff	{background-color: #beb899;color: #7b6445;}

.menuon:hover	{background-color: #8a853582;color: #fbff73;}

.floating-message-box-top {  position: fixed;  right: 20px;  top: 100px;  transform: translateY(-50%);  z-index: 9999;    width: 280px;  display: flex;  justify-content: space-between;  align-items: flex-start;  gap: 12px; background-color: #ffffff;  color: #333333;  padding: 16px;  border-radius: 8px;  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;  border-right: 5px solid #28a745; }
.floating-message-box-bottom { z-index: 9999;   display: none;  justify-content: space-between;  align-items: flex-start;  gap: 12px; background-color: #ffffff;  color: #333333;  padding: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;  border-right: 5px solid #28a745; }


.message-content strong {  display: block;  margin-bottom: 4px;  color: #111111;  font-size: 15px;}
.message-content p {  margin: 0;  font-size: 13px;  line-height: 1.4;  color: #555555;}
.close-message-btn {  background: none;  border: none;  font-size: 20px;  line-height: 1;  color: #aaaaaa;  cursor: pointer;  padding: 0;  transition: color 0.2s ease;}
.close-message-btn:hover {  color: #333333;}

.historic-sidebar {  width: 100%;  border: 1px solid #dcdcdc; font-family: sans-serif;  background-color: #f9f9f9;}
.sidebar-header {  background-color: #2c3e50;  color: #fff;  padding: 12px;  text-align: center;  border-top-left-radius: 5px;  border-top-right-radius: 5px;}
.sidebar-header h3 {  margin: 0;  font-size: 1.1rem;}
.historic-data-table {  width: 100%;  border-collapse: collapse;  font-size: 0.9rem;}
.historic-data-table th, .historic-data-table td { padding: 10px 12px;  text-align: left;  border-bottom: 1px solid #eef0f2;}
.historic-data-table th {  background-color: #f1f3f5;  color: #495057;  font-weight: 600;  width: 40%;}
.historic-data-table td {  color: #212529;}
.badge {  background-color: #e3fafc;  color: #0b7285;  padding: 2px 6px;  border-radius: 4px;  font-weight: bold;}

.h1span {white-space: nowrap;}


@media (max-width: 320px) {


.listing	{width:unset;}

#footerLeft	{float:unset;width:unset;}
#footerRight	{float:unset;width:unset;}

}

@media (max-width: 824px) {
.anattrib	{margin:0 0 6px 0;}
.attrib	{width: unset;
    text-align: left;
    display: block;margin: 0 0 0 10px;font-weight:bold;}
.attribT	{
    text-align: left;
    display: block;margin: 0 0 0 30px;}
.listheader	{width:100%;}
.listing	{displayX:block;}
}

@media (max-width: 1024px) {
#wethepeople {    opacity: .9;    position: relative;    left: -120px;}
#logo1 {    top: 30px;    left: 350px;    font-size: 3em;}
#logo2 {    top: 88px;    left: 400px;    font-size: 2em;}
#zquote {    top: 120px;    left: 350px;}
#whenwhere	{top: 130px;left: 450px;}


}

@media (max-width: 824px) {

#wethepeople {    opacity: .9;    position: relative;    left: -160px;}
#logo1 {    top: 20px;    left: 240px;    font-size: 2.5em;}
#logo2 {    top: 70px;    left: 300px;    font-size: 1.8em;}
#zquote {    top: 100px;    left: 250px;    line-height: 18px}
#whenwhere	{top: 130px;left: 300px;}
.topmenu	{font-size:18px;}
}

@media (max-width: 640px) {

.floating-message-box-center {  position: relative;  right: unset;  top: unset;  transform: unset;}

body	{font-size: 22px;line-height: 36px;box-sizing: border-box;}
.county		{margin:0 26px 0 0 ;font-size:1em;}
.state		{margin:0 26px 0 0 ;font-size:1em;}
#logo1 {    top: 30px;    left: 20px;    font-size: 2em;}
#logo2 {    top: 60px;    left: 60px;    font-size: 1.6em;}
#logo1 {    top: 20px;    left: 10px;    font-size: 2.5em;}
#logo2 {    top: 70px;    left: 30px;    font-size: 1.8em;}
#zquote {position: absolute;    color: blanchedalmond;    top: 110px;    left: 30px;    display: inline-block;}
#whenwhere	{color:#F1D366;position: absolute;top: 120px;left: 40px;}
.topmenu	{font-size:16px;line-height: 48px;}
#topText	{margin:12px 16px;font-size:.96em;font-weight:bold;}
#topTextListing	{font-size:.96em;font-weight:bold;}
#wethepeople	{display:none;}
.photoBoxImage	{max-height: 400px;}
.listattrib	{float:none;width:100%;}

#listingBodyListing {  margin: 4px 2px 0 2px;  max-width: 100%;}

.h1span {white-space: unset;}

.floating-message-box-top {display:none;}
.floating-message-box-bottom {display:flex;}

.map	{max-width: 100%;  height: 400px;  margin: 16px 0 0 0;}

h1	{font-size: 1.4em;  line-height: 1.3em;}
h2	{font-size: 1.3em;  line-height: 1.2em;}

}

@media (max-width: 520px) {
#logo1 {    top: 30px;    left: 20px;    font-size: 2em;}
#logo2 {    top: 60px;    left: 60px;    font-size: 1.6em;}
#logo1 {    top: 20px;    left: 10px;    font-size: 2em;}
#logo2 {    top: 70px;    left: 30px;    font-size: 1.6em;}
#zquote {position: absolute;    color: blanchedalmond;    top: 110px;    left: 0px;    display: inline-block;}
#whenwhere	{color:#F1D366;position: absolute;top: 120px;left: 40px;}
.photoBoxImage	{max-height: 300px;}
.listattrib	{float:none;width:100%;}

.adSmallHeaderDiv {margin:0 0 0 0;max-width:100%;}
.adSmallHeader {display:inline-block;width:420px;height:60px;}
.adSmallDiv {margin:0 0 0 0;max-width:100%;}
.adSmall {display:inline-block;width:420px;height:60px;}

}

@media (max-width: 520px) {
.topmenu	{font-size:22px;width:100%;margin:0;border-radius:0;box-sizing: border-box;box-shadow: unset;}
#topmenuleft	{margin:0;}

}


@media (max-width: 640px) {
.listing	{width:unset;}
}

@media (max-width: 824px) {
.anattrib	{margin:0 0 6px 0;}
.attrib	{width: unset;    text-align: left;    display: block;margin: 0 0 0 10px;font-weight:bold;}
.attribT	{    text-align: left;    display: block;margin: 0 0 0 30px;}
.listingheader	{width:100%;}
}

@media (max-width: 1024px) {
.listing	{width:unset;}
#footerLeft	{float:unset;width:unset;}
#footerRight	{float:unset;width:unset;height:unset;}
#footerRight	{padding:0 0 0 0;box-sizing: border-box;}
}