/* CSS (c) 2018 by Brian Downey for antietam.aotw.org,
all rights reserved. 
Contact: http://antietam.aotw.org/email_webmaster.php */

/* --- some design assumptions:
	- attemting responsive design to make the site mdore useful on smaller screens (mobile, tablets)
	- not attempting to fix appearance of the site - using relative vs fixed widths, for example
	- home page: do a better job of showing what's available on the site
	- but ... expect most users arrive from google search on an interior page. So, need to make nav universal and home easy to find
	  and each page branded
	- home page: don't need to be frugal with real estate. Let em scroll; 
	- assume viewport of 1000px for image design, screen layout. Desing for large screen, flow for smaller.
	- make interior pages more like style of homepage
	- mobile users need larger text, well spaced links
	
	*/
   
/* ------  Standard tag behaviors for the whole site --------------------------*/
html {
    height: 100%;
}

body {
	font-family: 'Merriweather Sans', sans-serif; 
	font-size: 12px; 
	line-height:normal;
	background-color: white;
	margin: 0px;
	padding-bottom: 0px;
	height: 100%;
	color: #606060;
}

div 	{
	margin: 0 0 0 0;
}

h1, h2 {
	
}

table {
	border: 0;
	width: 80%;
}

ul {
	max-width: 80%;
	margin: 0;
	padding-left: 20px;
}

abbr, acronym { 
	border-bottom: dotted 1px silver;
}

a:link {
	text-decoration: none;
	font-weight: bold;
	color: black;
	border-bottom: 1px dotted gray;
}


a:visited {
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px dotted #CCCCCC;
	color: gray;
}

a:hover { 
	text-decoration: none;
	font-weight: bold;
	color: firebrick;
	border-bottom: 1px dotted firebrick;
}
		
	
/* ------  behaviors for the home page (index.php) --------------------------*/
  
/*  home top menu  */

.top-menu-break {
	margin-top: 65px;
	height: 10px;
	width: 100%;
}

.namebox {
	position: relative;
	top: 0px;
	left: 50px;
	width: 95%;
	z-index: 30;
	height: auto;
	
}

.name-headline {
	position: relative;
	max-width: 30%;
	height: 200px;
	padding-left: 0px;
	padding-top: 20px;
	display: inline-block;
	min-height: 350px;
}

.name-headline h1 {
	padding-top: 10px;
	font-size: 28px;
	font-family: 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	color: firebrick;
}

.name-headline p {
	padding-top: 2px;
	font-size: 20px;
	font-family: 'Merriweather', serif;
}

.name-tagline {
	position: relative;
	float: right;
	height: auto;
	display: inline-block;
	max-width: 65%;
	bottom-margin: 5px;
}

.name-tagline p {
	padding-right: 35%;
	padding-top: 10px;
	font-size: 14px;
}

#first-tagline {
	padding-top: 113px;
}

.selector-band {
	position: relative;
	max-width: 100%;
	height: auto;
	background-color: black;
	padding-left: 50px;
	padding-top: 1px;
}

 .selector-box {
 	height: auto;
	display: inline-block;
	width: auto;
 	background-color: black;
 	margin-left: -3px;
	padding-bottom: 5px;
 }
 
 #first-box {
 	position: relative;
 	left: 0;
 	margin-left: 0;
 }
 
 .selector-box img {
 	border: none;
 }
 
 .selector-box a {
 	border: none;
 }
 
 .selector-box h2 {
 	border: none;
 	font-family: 'Merriweather', serif;
 	font-weight: lighter;
 	font-size: 18px;
 	color: silver;
 	padding-left: 6px;
 }
 
 .selector-box p {
 	padding-top: 2px;
	font-size: 12px;
	font-weight: normal;
	color: white;
	max-width: 180px;
	padding-left: 6px;
 }
 
 /* --- home page  css  ---------------- */
 
 #page_main { }
 
 .page-topbox {
	position: relative;
	display: inline-block;
	top: 0px;
	left: 50px;
	width: 95%;
	z-index: 30;
	height: auto;
}

.page-headline {
	position: relative;
	max-width: 30%;
	height: auto;
	padding-left: 0px;
	padding-top: 20px;
	display: inline-block;
	
}

.page-headline h1 {
	padding-top: 10px;
	font-size: 28px;
	font-family: 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	color: firebrick;
}

.page-headline p {
	padding-top: 2px;
	font-size: 20px;
	font-family: 'Merriweather', serif;
}

.page-top-text {
	position: relative;	
	float: right;
	height: auto;
	padding-bottom: 40px;
	display: inline-block;
	max-width: 65%;
	margin: 15px 0px;
}

.page-top-text p {
	padding-right: 35%;
}

#first-top-text {
	padding-top: 100px;
}

.selector-band-page {
	position: relative;
	max-width: 100%;
	height: auto;
	background-color: gray;
	padding-left: 50px;
	padding-top: 1px;
	margin-top: 20px;
}

 .selector-box-page {
 	height: auto;
	display: inline-block;
	width: auto;
 	background-color: gray;
 	margin-left: -3px;
	padding-bottom: 5px;
 }
 
 #first-box-page {
 	position: relative;
 	left: 0;
 	margin-left: 0;
 }
 
 .selector-box-page img {
 	border: none;
 }
 
 .selector-box-page a {
 	border: none;
 }
 
 .selector-box-page h2 {
 	border: none;
 	font-family: 'Merriweather', serif;
 	font-weight: lighter;
 	font-size: 18px;
 	color: black;
 	padding-left: 6px;
 }
 
 .selector-box-page p {
 	padding-top: 2px;
	font-size: 12px;
	font-weight: normal;
	color: white;
	max-width: 180px;
	padding-left: 6px;
 }
 
 /*   content section for People search forms  */
 
 .selector-box-search {
 	position: relative;
 	height: 500px;
	display: inline-block;
	width: 40%;
 	background-color: gray;
 	margin-left: 0;
	padding-bottom: 5px;
 }
 
 #first-box-search {
 	position: relative;
 	left: 0;
 	margin-left: 0;
 }
 
 .selector-box-search a {
 }
 
 .selector-box-search h2 {
 	border: none;
 	font-family: 'Merriweather', serif;
 	font-weight: lighter;
 	font-size: 18px;
 	color: black;
 	padding-left: 6px;
 	padding-top: 20px;
 }
 
 .selector-box-search p {
 	padding-top: 2px;
	font-size: 12px;
	color: white;
	padding-left: 6px;
 }

.selector-box-search a:visited {
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px dotted #CCCCCC;
	color: black;
}

.selector-box-search a:hover {
	text-decoration: none;
	font-weight: bold;
	color: firebrick;
	border-bottom: 1px dotted firebrick;
}
 
 /*   footer css  ----------------------- */

.login {
	position: absolute;
	display: block;
	top: 40%;
	left: 40%;
}

.footer {
	position: relative;
	display: inline-block;
    left: 0;
    bottom: 0;
    width: 100%;
	margin-left: 0px;
	margin-right: auto; 
    height: auto;
}

.footer-band {
    position: relative;
    width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: auto; 
	background-color: black;
    left: 0;
    bottom: 11px;
}

.footer-band p {
 	position: relative;
 	padding-left: 50px;
 	padding-top: 20px;
 	padding-bottom: 15px;
	font-size: 11px;
	color: gray;
 }
 
.footer-band a {
	border: none;
	color: silver;
}

.footer-band a:visited {
	border: none;
	color: gray;
}

.footer-band a:hover {
	border: none;
	color: firebrick;
}

.footer-break {
	width: 100%;
	height: 40px;
	margin-top: 0;
}

/*  layout for officer display single page, Medal of Honor single citation page, individual weapon page (main row)  -------------------------------------*/

.officer-top {
	position: relative;
	display: inline-block;
	top: 30px;
	left: 50px;
	width: 95%;
	height: auto;
	min-height: 500px;
	margin-bottom: 100px;
	padding-top: 50px;
}

.officer-image {
	float: left;
	position: relative;
	right: -20%;
	width: auto;
	height: auto;
	padding-right: 5px;
	padding-top: 0px;
	display: inline-block;
	text-align: right;	
}

.officer-image img {
	position: relative;
	top: 0px;
	padding: 0;
	border: none;	
}

.officer-image p {
	margin: 0;
	padding-top: -20px;
	font-size: 10px;
	font-family: 'Merriweather Sans', sans-serif;
	color: gray;
}

.officer-top-data {	
	float: left;
	position: relative;
	left: 20%;
	height: auto;
	width: auto;
	padding-left: 5px;
	display: inline-block;
}

.officer-top-data p {
	padding-right: 0px;
	padding-top: 0px;
	margin: 0;
}

.label {  /* also used on single unit display page  */
	color: black;
}

.officer-top-data h1 {
	padding-top: 0px;
	font-size: 18px;
	font-family: 'Merriweather', 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	color: firebrick;
	margin: 0;
}

.officer-top-data h2 {
	color: black;
	font-style: italic;
	font-size: 14px;
	font-family: 'Merriweather', 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	margin: 0;
}

.officer-top-data a {
	padding: top: 10px;
}

.officer-top-data h3 {
	color: firebrick;
	font-size: 14px;
	font-family: 'Merriweather', 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	margin: 0;
}

.officer-main-row {
	position: relative;
	display: inline-block;
	top: 50px;
	left: 0px;
	width: 95%;
	height: auto;
	margin-bottom: 0px;
	padding: 0px;
}

.officer-main-label {
	float: left;
	position: relative;
	right: 0%;
	width: 200px;
	height: auto;
	padding-right: 5px;
	padding-top: 0px;
	display: inline-block;
	text-align: right;
	color: black;	
}

.officer-main-text {	
	float: left;
	position: relative;
	left: 0;
	height: auto;
	width: 50%;
	padding-left: 5px;
	display: inline-block;
}

.officer-main-text sup { 
	vertical-align: top; 
	font-size: 0.6em; 
	}
	
.officer-search a {
	color: white;
}

.officer-search a:hover {
	color: firebrick;
}

/* --- (css shared for the citation_display.inc file, wherever footnotes insert) ---*/

.citation-display {
	display: inline-block;
	width: 100%;
	height: auto;
	margin-top: 50px;
	margin-bottom: -1px;
	padding-left: 0px;
	padding-top: 10px;
	background-color: gray;
}

.citation-display p {
	width: 70%;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 10px;
	color: white;
	padding-left: 150px;
}

.citation-display h3 {
	color: black;
	font-size: 14px;
	font-family: 'Merriweather', 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	margin: 0;
	padding-bottom: 20px;
	padding-left: 150px;
	max-width: 400px;
}

.citation-display a {
	color: white;
}

.citation-display a:hover {
	color: firebrick;
}

/*  --------------------- unit single display css ----------------------------------*/

.unit-top {
	position: relative;
	display: inline-block;
	top: 30px;
	left: 50px;
	width: 95%;
	height: auto;
	margin-bottom: 100px;
	padding-top: 50px;
	padding-bottom: 10px;
}

.unit-top-image {
	float: left;
	position: relative;
	right: -20%;
	width: auto;
	height: auto;
	padding-right: 5px;
	padding-top: 0px;
	display: inline-block;
	text-align: right;	
}

.unit-top-image p {
	margin: 0;
	padding-top: -20px;
	font-size: 10px;
	font-family: 'Merriweather Sans', sans-serif;
	color: gray;
}

.unit-top-data {	
	float: left;
	position: relative;
	left: 20%;
	height: auto;
	width: auto;
	padding-left: 5px;
	display: inline-block;
}

.unit-top-data p {
	padding-right: 0px;
	padding-top: 0px;
	margin: 0;
}

.unit-top-data h1 {
	padding-top: 0px;
	font-size: 18px;
	font-family: 'Merriweather', 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	color: firebrick;
	margin: 0;
}

.unit-top-data h2 {
	color: black;
	font-style: italic;
	font-size: 14px;
	font-family: 'Merriweather', 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	margin: 0;
}

.unit-top-data a {
	padding: top: 10px;
}

.unit-top-data h3 {
	color: firebrick;
	font-size: 14px;
	font-family: 'Merriweather', 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	margin: 0;
}

.unit-main-row {
	position: relative;
	display: inline-block;
	top: 30px;
	right: 0px;
	width: 95%;
	height: auto;
	margin-bottom: 0px;
	padding: 0px;
}

.unit-main-label {
	float: left;
	position: relative;
	right: -8%;
	width: 200px;
	height: auto;
	padding-right: 5px;
	padding-top: 0px;
	display: inline-block;
	text-align: right;
	color: black;
}

.unit-main-text {	
	float: left;
	position: relative;
	left: 8%;
	height: auto;
	width: 50%;
	padding-left: 5px;
	display: inline-block;
}

.unit-main-text sup { 
	vertical-align: top; 
	font-size: 0.6em; 
}
	
.unit-roster {
	position: relative;
	display: inline-block;
	left: 22%;
	width: 50%;
	height: auto;
	margin-top: 50px;
	margin-left: 
	margin-bottom: 0px;
	padding-top: 0px;
}
	
.unit-search a {
	color: white;
}

.unit-search a:hover {
	color: firebrick;
}

.unit-roster {
	
}

 /*-------------------------- search results css  ------------------------------- */
 
 .results-intro {
	position: relative;
	display: inline-block;
	top: 50px;
	left: 50px;
	width: 60%;
	height: auto;
	margin-bottom: 70px;
	padding-top: 0px;
}

.results-intro h1 {
	padding-top: 0px;
	font-size: 18px;
	font-family: 'Merriweather', 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	color: firebrick;
	margin: 0;
}

.results-intro p {
	padding-top: 10px;
}

.results-body {
	position: relative;
	display: inline-block;
	top: 0px;
	left: 50px;
	width: 90%;
	height: auto;
	margin-bottom: 0px;
	padding-top: 0px;
}

.results-body h3{
	margin: 0;
	font-size: 14px;
}

th {
    color: black;
}

.results-nav {
	width: 100%;
	margin-top: 50px;
	margin-bottom: -1px;
	padding-left: 0px;
	padding-top: 10px;
	background-color: gray;
}

.results-nav p {
	width: 70%;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 10px;
	color: white;
	padding-left: 50px;
	padding-bottom: 20px;
}

 .results-nav a {
	color: white;
	border-bottom: 1px dotted white;
	font-weight: lighter;
}

.results-nav a:hover {
	color: firebrick;
}
/* --------------------  styles for main battle map & campaign map, tablet locating map, gazetteer, and all 3 types of individual map pages; also exhibits, admin pages,
						timeline, search, etc  -----------------------*/

.map-main {
	position: relative;
	left: 15%;
	display: block;
	top: 0px;
	width: 75%;
	height: auto;
	min-height: 550px;
	margin-top: 50px;
	margin-bottom: 150px;
	padding: 0px;
}

.map-main img {
	margin: 20px 0px;
}

.map-main h1 {
	padding-top: 0px;
	font-size: 28px;
	font-family: 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	color: firebrick;
	margin: 0;
	}
	
.map-main h2 {
	color: black;
	font-size: 16px;
	font-family: 'Merriweather', 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	padding: 0;
	margin: 0;
	}
	
.map-main h3 {
	color: black;
	font-size: 14px;
	font-family: 'Merriweather', 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	padding-top: 20px;
	margin: 0;
}
	
.map-main h4 {
	font-size: 14px;
	font-family: 'Merriweather', 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	padding: 0;
	margin: 0;
	max-width: 70%;
}

.map-main p {
	padding-right: 50px;
	max-width: 80%;
}

.map-main li {
	padding-top: 5px;
}
	
.map-main table {
	left-margin: 0;
}	

/* ---------- general tablet page layout css  ------------------ */

.tablet-main {
	position: relative;
	left: 15%;
	display: block;
	top: 0px;
	width: 75%;
	height: auto;
	margin-top: 50px;
	margin-bottom: 100px;
	padding: 0px;
}

.tablet-main h1 {
	padding-top: 0px;
	font-size: 28px;
	font-family: 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	color: firebrick;
	margin: 0;
	}
	
.tablet-main h2 {
	color: black;
	font-size: 16px;
	font-family: 'Merriweather', 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	padding: 0;
	margin: 0;
	}
	
.tablet-main h3 {
	color: black;
	font-size: 14px;
	font-family: 'Merriweather', 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	padding: 0;
	margin: 0;
}
	
.tablet-main p {
	padding: 0;
	max-width: 80%;
}

.tablet-main a {
	line-height: 1.8em;
}

/* Components of Historical Tablet display, 
tablet.php (single tablet display) */

/* frame shadow */ 
#tablet_frame  {

	position: relative;
	background-color: #F5F5F5;
	font-family: sans-serif;
	font-size: 14px;
	font-weight: bold;
	font-variant: small-caps;
	border: 1px solid silver;
	width:550px;
	padding: 3px 0 3px 2px;
	margin: 20px 0 0 0;
	text-align:left;
	vertical-align: middle;
	
}

/* black box */ 
#tablet_body  {

	background-color: #000000;
	color: #FFFFFF;
	border: 2px inset white;
	margin: 6px 7px 6px 7px;
	padding:10px 10px 10px 15px;
	letter-spacing: 1px;
	min-height: 350px
	
}

#tablet_header  {

	font-weight: normal;
	font-size: 18px;
	text-align:center;
	letter-spacing: 2px;
}

#tablet_date  {

	font-size: 12px;
	text-align:center;
}

#tablet_number_footer  {

	text-align:right;
	font-size: 10px;
}

.tablet_inline_small  {

	font-size: 12px;
	
}

/* ---------------------  class for set of messages within exhibit body -------------------- */ 
.signalMessages {
	font-size: 11px;
	margin:40px 20% 40px 10%;
	
}

/* ---------------- error, login, receipt, and email webmaster page formatting ---------------------------------------------*/

.error-main {
	position: relative;
	left: 25%;
	display: block;
	top: 200px;
	width: 50%;
	height: auto;
	margin-top: 50px;
	margin-bottom: 250px;
	padding-bottom: 25%;
}

.error-main h1 {
	padding-top: 0px;
	font-size: 28px;
	font-family: 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	color: firebrick;
	margin: 0;
	}

.error-main h3 {
	color: black;
	font-size: 14px;
	font-family: 'Merriweather', 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	padding: 0;
	margin: 0;
}
	
.error-main p {
	padding-right: 50px;
	max-width: 70%;
}

.error-footer-band {  /* empty black band to complete error page */
    position: absolute;
    width: 99%;
	margin-left: auto;
	margin-right: auto;
	left: 2px;
	height: 40px; 
	background-color: black;
    bottom: -10px;
}

/*  ------------------------ styles for top part of individual weapon page ----------------------- */

.weapon-top {
	position: relative;
	display: inline-block;
	top: 0px;
	left: 50px;
	width: 95%;
	height: auto;
	min-height: 500px;
	margin-bottom: 100px;
	padding-top: 50px;
}

.weapon-image {
	clear: both;
	position: relative;
	left: 20%;
	height: auto;
	width: auto;
	padding-left: 5px;
	margin-top: 20px;	
}

.weapon-image img {
	position: relative;
	left: 0;
	top: 0px;
	padding: 0;
	border: none;	
}

.weapon-image p {
	margin: 0;
	padding-top: -20px;
	font-size: 10px;
	font-family: 'Merriweather Sans', sans-serif;
	color: gray;
}

.weapon-top-data {	
	clear: both;
	position: relative;
	left: 20%;
	height: auto;
	width: auto;
	padding-left: 5px;
	display: inline-block;
}

.weapon-top-data p {
	padding-right: 0px;
	padding-top: 0px;
	margin: 0;
}

.weapon-top-data h1 {
	padding-top: 0px;
	font-size: 18px;
	font-family: 'Merriweather', 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	color: firebrick;
	margin: 0;
}

.weapon-top-data h2 {
	color: black;
	font-style: italic;
	font-size: 14px;
	font-family: 'Merriweather', 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	margin: 0;
}

.weapon-top-data a {
	padding: top: 10px;
}

.weapon-top-data h3 {
	color: firebrick;
	font-size: 14px;
	font-family: 'Merriweather', 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	margin: 0;
}


/*  ------------------- styles for 2 column ULs on weapons_to_units.php  ----------------------*/

/* left column in the 2 symmetrical column format   */
   
.weps_col_left  {  	
    	position: relative;
    	float: left;
    	padding-bottom: 20px;   
    	margin-bottom: 80px;
    	margin-right: 10px; 	
	text-align: left;
	width: 44%;
	z-index: 3; 
}

/* right column in the 2 symmetrical column format   */
   
.weps_col_right  {  	
    	position: relative;
	display: inline-block;
    	padding: 0;   
    	margin-bottom: 0; 	
    	margin-left: 10px;
	text-align: left;
	width: 44%;
	z-index: 1; 
}

/*  ----------- styles for offier and unit list (link) pages ----------------------*/

.list-main {
	position: relative;
	left: 10%;
	display: block;
	top: 50px;
	width: 85%;
	height: auto;
	margin-top: 50px;
	margin-bottom: 80px;
	padding: 0px;
}

.list-main h1 {
	padding-top: 0px;
	padding-bottom: 5px;
	font-size: 28px;
	font-family: 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	color: firebrick;
	margin: 0;
	}

.list-main p {
	padding: 0;
	margin: 0;
}

/* ------------------ home page top-right menu ---------------------------*/
.social-menu {
  	padding-left: 0;
  	display: flex;
  	align-items: center;
  	background: black;
	float: right;
	height: auto;
	padding-right: 30px;
}

.social-menu span {
	color: gray;
	font-size: 18px;
}


.social-menu a {
	position: relative;
	border: none;
	bottom: 0;
	padding-right:  0;
	margin-right:  40px;
}


/*  ------------ header menu css/html from Mark Caron at Medium.com.   ------------------------------*/

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Button styling */
.menu-toggle {
  display: inline-block;
  padding: .75em 15px;
  line-height: 1em;
  font-size: 1em;
  color: white;
}

.menu-toggle:hover,
.menu-toggle:focus {
  color: #c00;
}

/*
 Default styles + Mobile first
 Offscreen menu style
*/
.main-menu {
  position: absolute;
  left: -200px;
  top: 0;
  height: auto;
	overflow-y: scroll;
	overflow-x: visible;
	transition: left 0.3s ease,
				      box-shadow 0.3s ease;
	z-index: 999;
	border: none;
}


.main-menu ul {
  list-style: none;
  margin: 0;
  padding: 2.5em 0 0;
  /* Hide shadow w/ -8px while 'closed' */
  -webkit-box-shadow: -8px 0 8px rgba(0,0,0,.5);
     -moz-box-shadow: -8px 0 8px rgba(0,0,0,.5);
          box-shadow: -8px 0 8px rgba(0,0,0,.5);
  min-height: 100%;
  width: 200px;
  background: black;
}

.main-menu a {
  display: block;
  padding: .75em 15px;
  line-height: 1em;
  font-size: 1em;
  color: silver;
  text-decoration: none;
  border: none;
}

.main-menu li:first-child a {
  border-top: 1px solid #383838;
}

.main-menu a:hover,
.main-menu a:focus {
  background: #333;
 
}

.main-menu .menu-close {
  position: absolute;
  right: 0;
  top: 0;
}

/*
 On small devices, allow it to toggle...
*/
/*
 :target for non-JavaScript
 aria-expanded="true/false" will be for JavaScript
*/
.main-menu:target,
.main-menu[aria-expanded="true"] {
  left: 0;
  outline: none;
  -moz-box-shadow: 3px 0 12px rgba(0,0,0,.25);
  -webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25);
  box-shadow: 3px 0 12px rgb(0,0,0,.25);
}

.main-menu:target .menu-close,
.main-menu[aria-expanded="true"] .menu-close {
  z-index: 1001;
}

.main-menu:target ul,
.main-menu[aria-expanded="true"] ul {
  position: relative;
  z-index: 1000;
}

/* 
 We could use `.main-menu:target:after`, but
 it wouldn't be clickable.
*/
.main-menu:target + .backdrop,
.main-menu[aria-expanded="true"] + .backdrop {
  position: absolute;
  display: block;  
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  background: #000;
  background: rgba(0,0,0,.85);
  cursor: default;
}

@supports (position: fixed) {
  .main-menu,
  .main-menu:target + .backdrop,
  .main-menu[aria-expanded="true"] + .backdrop {
    position: fixed;
  }
}

/*
 Larger screen styling
 Horizontal menu
*/
@media (min-width: 768px) {
  .menu-toggle,
  .main-menu .menu-close {
    display: none;
  }
  
  /* Undo positioning of off-canvas menu */
  .main-menu {
    position: relative;
		left: auto;
		top: auto;
		height: auto; 
		width: 60%;
    		overflow-y: hidden;
		overflow-x: hidden;
  }
   
  .main-menu ul {
    display: flex;
    
    /* Undo off-canvas styling */
    padding: 0;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
    height: auto;
    width: auto;
  }
  
  .main-menu a {
    color: silver;
    font-weight: lighter;
    border: 0 !important; /* Remove borders from off-canvas styling */
  }
  
  .main-menu a:hover,
  .main-menu a:focus {
    background: none; /* Remove background from off-canvas styling */
    color: firebrick;
    border-bottom: 1px dotted firebrick;
  }
}

header {
  padding: 5px;
  display: flex;
  align-items: center;
  background: black;
  height: auto;
}

header img {
	margin: 5px 20px 5px 30px;
}

header span:hover {
  color: firebrick;
}

header a {
  border: none;
}

header span {
  color: silver;
}


/* ------------ tool tip package thanks to Martin at tutorialzine.com -------------------*/

.help-tip {
    position: relative;
    top: 0px;
    right: 0px;
    text-align: center;
    background-color: silver;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    font-size: 10px;
    line-height: 16px;
    cursor: default;
}

.help-tip:before{  /* the ? icon */
    content:'?';
    font-weight: bold;
    color:#fff;
}

.help-tip:hover p{
    display:block;
    transform-origin: 100% 0%;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{    /* The tooltip */
    display: none;
    text-align: left;
    background-color: lightgray;
    padding: 20px;
    width: 300px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    left: -14px;
    color: gray;
    font-size: 13px;
    line-height: 1.4;
}

.help-tip p:before{ /* The pointer of the tooltip */
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:lightgray;;
    left:15px;
    top:-12px;
}

.help-tip p:after{ /* Prevents the tooltip from being hidden */
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}

/* tool tip CSS animation */

@-webkit-keyframes fadeIn {
    0% { 
        opacity:0; 
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}

/* styles menu list (choices) on bibliography.php */
ul.bibliography {
 	margin: 2px 2px 2px 10px;
 	padding: 0 0 0 0;
 }
ul.bibliography li {
 	padding: 0 0 5px 2px;
}


/* ------  Customize Standard tag behaviors  --------*/	

/* large image settings to allow for smaller screens  */
#home-intro-image img {
	width: 100%; 
    height: auto; 
	width: auto\9;  /*ie8 */
	max-width: 100vw;   /* 100% of view window */
    border: 0;
}


/* paint text AotW red */
.red  {
	color: firebrick;
}

/* paint text Confederate red */
.confed_red  {
	color: red;
}

/* paint text Federal blue */
.blue  {
	color: blue;
}

/* hide text/links */
.hidden  {
	display: none;
}

.hidden  a{
	color: white;
	border: 0;
}

/* use for first paragraph (or other block) under a heading  */
.first_para {
	margin-top: 0;
}

/*  use to place single paragraph in
    the middle of an otherwise 
    empty page  */

.center_para  {
	position: absolute;
	top: 30%;
	left: 33%;
	width: 33%;
	text-align: right;
}

/* use to style rule under exhibit type label */
.rule_header_divider  {
	
	width: 50%;
	color: white;
	margin: 3px 0 0 0;
	padding: 0;
      	border-bottom: 1px solid #666633;
	
}

/*  use a rule as a simple divider */
.rule_20  {
	
	width: 20%;
	color: white;
	margin: 3px 0 0 0;
	padding: 0;
    border-bottom: 1px solid #666633;	
}

/* ------  Custom font/color combinations  --------*/	

.citation {
	vertical-align: top;
	font-size: 0.8em;
	font-weight: bolder;
	color: black;
}

/*  use to display warning or error messages, as in missing Form contents */
.alert {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: firebrick;
}

.copyright {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	color: black;
}	
.tinyText {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
}

.tinyTextTop {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	color: black;
	vertical-align: top;
}	
	
.tinyTextBold {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
	color: black;
}
.tinyTextHeadline {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
	color: firebrick;
}
.tinyTextItalic {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 11px;
	font-style: italic;
	font-weight: normal;
	color: black;
}

.tinyTagLine {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	color: #999999;
	font-stretch: expanded
}
.caption {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
	color: firebrick;
}  

.caption p {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: bold;
	color: firebrick;
	font-stretch: expanded
}  

.smallHidden {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 10px;
	font-style: normal;
	color: white;
		
}  

 /* ------   Form Element styles --------*/
 
 .fields   { 
	color: black; 
	font-size: 11px; 
	background-color: #FFFFFF; 
	border: solid 1px white; 
	border-radius: 5px;
	margin-bottom: 14px;
	margin-top: 2px;
}
.fieldLabel {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 12px;
	font-style: normal;
	color: black;
}
.pushButton {
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
	color: white;
	background-color: black;
	cursor: pointer;
	border-radius: 5px;
}

input:focus {
    border: 1px solid firebrick;
}

/* ------ begin major page (overview, maps, exhibit, officers,  --------*/  
       /* sources.php, etc) specific CSS */                          

  
  /* left column in the 1-1/2 column format   */
   
.one_half_col_left  {
	
    position: relative;
    left: 0;
    padding: 0;
    	width: 55%;
	text-align: left;
	float: left;
    	
}

/* right column in the 1-1/2 column format   */
   
.one_half_col_right  {
	
    position: relative;
    	padding: 0 0 0 30px;
    	text-align: left;	
    	width: 30%;
	text-align: left;
	float: right;
	margin: 2px;
    	
}

/* left column in the 2 symmetrical column format   */
   
.two_col_left  {  	
    	position: relative;
    	padding: 5px 3% 0 0;    	
	text-align: left;
	width: 40%;
	float: left;
	z-index: 3; 
    	
}

/* right column in the 2 symmetrical column format   */
   
.two_col_right  {
  	position: relative;
	padding:  0;    	
	text-align: left;
	width: auto;
	margin: 0 0 0 2%;
	z-index: 1;
	    	
}

/* left column in the 2 symmetrical column format, min vert padding   */
   
.two_col_left_short  { 	
    	position: relative;
    	padding:  0;    	
	text-align: left;
	width: 49%;
	float: left;
	z-index: 3;
	margin: 0;
    	
}

/* right column in the 2 symmetrical column format, min vert padding   */
   
.two_col_right_short  {
	
    	position: relative;
	padding: 2px 0 0 ;    	
	text-align: left;
	margin: 0 0 0 2%;
	z-index: 1;
	    	
}

  /* left column in the 1-1/2 column format, min vert padding for Tablet_index   */
   
.one_half_col_left_short  {
	
       	position: relative;
       	padding: 2px 0 0;
    	width: 65%;
	text-align: left;
	float: left;
    	
}

/* right column in the 1-1/2 column format, min vert padding for Tablet_index   */
   
.one_half_col_right_short  {
	
    	padding: 2px 0 0;
    	text-align: left;
    	
}


/* full-width page whitespace divider  */
   
.page_divider  {
	
    	min-height: 10px;    	
	width: 90%;
	clear: both;
    	
}

  /* containers for "faces" gallery   - header and footer files for faces.php in header_faces.inc and footer_faces.inc */
   
.faces-strip {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
	background-color: black;
	z-index: 999; 
}

.faces-social-menu {
  	padding-left: 0;
  	display: flex;
  	align-items: center;
  	background: black;
	float: right;
	height: auto;
	padding-right: 30px;
}

.faces-social-menu span {
	color: gray;
	font-size: 18px;
}

.faces-social-menu a {
	position: relative;
	border: none;
	bottom: 0;
	padding-right:  0;
	margin-right:  40px;
}

.faces-footer {
	position: relative;
	display: inline-block;
	top: 50px;
    left: 0;
    bottom: 0;
    width: auto;
    height: auto;
    min-height: 40px;
}

.faces-footer-band {
    position: relative;
    display: inline-block;
    width: 10800%;
	background-color: black;
    left: 0;
    bottom: -0;
    padding-left: 50px;
}

.faces-footer-band p {
 	position: relative;
 	padding-left: 50px;
 	padding-top: 20px;
 	padding-bottom: 15px;
	font-size: 11px;
	color: gray;
 }
 
.faces-footer-band a {
	border: none;
	color: silver;
}

.faces-footer-band a:visited {
	border: none;
	color: gray;
}

.faces-footer-band a:hover {
	border: none;
	color: firebrick;
}

.gallery  {
	 width: 8900%;
	text-align: left;
	float: left;  	
}

  /*  styles for tree OOB display    ---  thanks to Mike Bostock  https://bl.ocks.org/mbostock/4339083  */
  
.tree-main {
	position: relative;
	left: 150px;
	display: block;
	top: 0px;
	width: 75%;
	height: auto;
	min-height: 0px;
	margin-top: 50px;
	margin-bottom: 0px;
	padding: 0px;
}

.tree-main h1 {
	padding-top: 10px;
	font-size: 28px;
	font-family: 'Times New Roman', 'Georgia', serif;
	font-weight: lighter;
	color: firebrick;
}
.image_a a{
	border: none;
}

.node {
  cursor: pointer;
}

.node circle {
  fill: #fff;
  stroke: firebrick;
  stroke-width: 1.5px;
}

.node text {
  font-size: 11px;
  color: black;
}

.link {
  fill: none;
  stroke: #eaeaea;
  stroke-width: 1.5px;
}