/*
Test case for template-HTML5.html and malugani1.html, 22 Oct 2025

Organization:
 - Body
 - Container
   - Banner
   - Menu
   - Content
	 - Headings
	 - Text
	 - Images
	 - Comments
	 - Source Table
	 - News Article
   - Footer
Common Screen Width Breakpoints:
    Desktop/laptop: 992px (1920)
	Tablet: 768px (portrait)
	Mobile: 320px (360-414) -- altered to 32%
Palatte:
	#404040 Grey, dark (background, body text)
	#666666 Grey, med
	#808080 Grey, med
	#663300 Dark Brown (box borders)
	#EAE8D0 Beige, light
	#E4DCB2 Beige, med
	X #9C9473 Beige, dark (leftnav)
	#C9CFA0 Green, muddy, light (comment headers)
Colors from genstyle.css:
	#c9c9aa Light Brown (Menu tab background)
	#a4710c Burnt Red (Parchment border)
	#a40037 Wine Red (Comment bar)
    #86895a + brown (muddy brown)
    #8A0808 Burgundy
Fonts:
	Serif: Verdana, Arial, Helvetica, sans-serif;
	Sans-Serif: "Times New Roman", Garamond, Georgia, serif;
	Fixed width: "Courier New", serif;
	Font size rem is relative to root (html) font size; em is relative to parent element font size; therefore, use em throughout.
Updates:
	Replace all "id" elements with "class" elements, to allow multiple uses on same page.
*/

html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box; }
* {
	box-sizing: border-box; }

body {
	color: #404040;
	background: #404040;
	width: 100%; }

/* RESPONSIVE MEDIA QUERIES: Tablet and smaller devices */
@media screen and (max-width: 768px) {
	.container {
		width: 100%;
		padding: 3px;
	}
	.content {
		width: 100%;
		max-width: 100%;
		padding: 0 10px;
		margin-left: 0;
		margin-right: 0;
	}
	.banner {
		background-size: cover;
		background-position: center;
	}
}

/* Mobile devices */
@media screen and (max-width: 480px) {
	.container {
		padding: 2px;
	}
	.content {
		padding: 0 8px;
	}
	body {
		font-size: 10pt;
	}
}

/* CONTAINER: Overall page size and format */
.container {
	width: 100%; /* Responsive width */
	max-width: 950px; /* Maximum width for large screens */
	margin: 0 auto;
	padding: 5px;
	background: url('images/bgd.jpg') repeat;
}
/* CONTENT */
.content {
	width: 100%; /* Responsive width */
	max-width: 910px; /* Maximum width for large screens */
	margin-top:0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0 15px; /* Converted margin to padding for better mobile display */
	font-size: 1em;
	font-family: Verdana, Arial, Helvetica, sans-serif; /* Standard across all, but not inherited globally */
	color: #404040;
	line-height: 1.6em; /* Extra line space to accomodate superscripts */
}
/* BANNER */
.banner {
	margin: auto;
	padding: 0;
	color:#EAE8D0;
	background: #404040 url('images/head2.jpg') no-repeat;
	border-bottom: 0px solid #fff;
	height:210px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}
.banner p.bannerTitle {
	padding: 85px 0 0 10px; /* Rough midpoint of 210px */
	margin: 0;
	font-variant: small-caps;
	font-size: 1.3em;
	letter-spacing: 3px;
	text-align: left;
	color:#EAE8D0;
	background:transparent;
}
/*
.banner a:link, .banner a:visited {
	color: #EAE8D0;
	background:transparent;
	text-decoration: none; 
}
.banner a:hover {
	color: #fff;
	background: #9C9473;
	background:transparent;
	text-decoration: underline; 
} */

/* HORIZONTAL BANNER MENU */
.menubar-container {
	position: relative;
	margin-top: 0;
	width:100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-variant: small-caps;
	font-weight: bold;
	font-size: 0.8em;
	letter-spacing: 2px;
} 
.menubar {
	float: none;
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	padding: 0.2em 0;
	background-color: #404040; /* formerly #6E6A5A */
}
	
/* .menubar a {
	text-align: left;
	display:block;
	height:18px;
	border: 0px solid #eee;
	white-space:nowrap;
	color: #EAE8D0;
	background-color: #6E6A5A; -- used in the News pulldown menu --
	text-decoration:none;
	margin:0;
	padding: 0.3em 0.2em 0.3em 0.4em;
} */
.menubar a {
	color: #EAE8D0;
	text-decoration: none;
	display: inline-block;
	height: auto;
	padding: 0.4em 0.8em;
}
.menubar a:hover {
	text-decoration: underline;
	color: #EAE8D0;
	background: #6E6A5A;
}
.menubar a:visited	/* redundant to keep visited links from changing */ {
	color: #EAE8D0;
	background-color: #6E6A5A;
	text-decoration: none;
}
.menubar ul {
	float: none;
	width: auto;
	display: inline-flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.menubar li {
	position: relative; /* anchor for absolute-positioned submenus */
}
.menubar ul ul /* 2nd-level sub-menu */ {
	position: absolute;
	z-index: 500;
	top: 100%;
	left: 0;
	display: none; /* hidden by default; revealed on hover/focus */
	min-width: 12em;
	background: #404040;
	border: 1px solid #333;
	padding: 0.5em;
	margin: 0;
}
/* Reveal submenu on hover or keyboard focus (accessibility) */
.menubar li:hover > ul,
.menubar li:focus-within > ul {
	display: block;
}
div.menubar li:hover {
	cursor:pointer;
	z-index:100;
}
div.menubar li:hover ul, div.menubar li li:hover ul {
	display:block;
}
div.menubar li:hover ul ul, div.menubar li li:hover ul ul {
	display:none; /* Hides menu item caption */
}

/* CONTENT Elements */
.content p { /* Default paragraph text */
	font-size: 1em;
	font-family: Verdana, Arial, Helvetica, sans-serif; /* Standard across all, but not necessarily inherited globally */
	font-weight: normal;
	font-variant: normal;
	letter-spacing: normal;
	text-align: left;
	color: #404040;
	line-height: 1.5em; 
	margin: 0 0 1em 0;
	padding: 0;
}

/* TOOLTIP: Accessible custom hover/focus popup for inline notes */
.tooltipWrap {
	position: relative;
	display: inline-block;
	cursor: help;
}
.tooltipWrap:focus {
	outline: 1px dotted #663300;
	outline-offset: 2px;
}
.tooltipText {
	display: none;
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	margin-bottom: 0.35em;
	padding: 0.2em 0.5em;
	min-width: max-content;
	max-width: 24em;
	border: 1px solid #663300;
	background: #EAE8D0;
	color: #404040;
	font-size: 0.9em;
	line-height: 1.3;
	white-space: normal;
	z-index: 20;
}
.tooltipWrap:hover .tooltipText,
.tooltipWrap:focus .tooltipText,
.tooltipWrap:focus-within .tooltipText {
	display: block;
}
h1 { /* Page Book Title (one per page) */
	font-family: "Times New Roman", Garamond, Georgia, serif;
	font-variant: small-caps;
	font-size: 1.5em;
	font-weight: bold;
	letter-spacing: 3px;
	line-height: 2.0em;
	color: #404040;
	text-align: center;
}
h2 { /* Family Section Heading with Borders */
	border-top: 1px solid #663300;
	border-bottom: 1px solid #663300;
	font-family: "Times New Roman", Garamond, Georgia, serif;
	padding: 10px 0 10px 0;
	text-align: left;
	font-size: 1.3em;
	font-weight: bold;
	font-variant: small-caps;
	letter-spacing: 4px;
	color:#404040;
}
.content h3 h4 h5 { /* Sub-Headings */
	font-family: inherit;
	font-size: 1em;
	font-weight: bold;
	color: #404040;
	margin: 0;
	padding: 10px 0 5px 0;
}
.update {
	text-align: right;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: normal;
	letter-spacing: normal;
	padding: 0 0 5px 0;
	font-variant: normal;
}
.sup {
	vertical-align: super;
	font-size: 0.6em;
}
.parent { /* Family Group "Parent" Label Box */
	border: 1px solid #663300;
	margin: 0 5px 0 0;
	padding: 0 2px 0 3px;
	float: left;
	background-color: #E4DCB2;
}
.familyName { 
	font-variant: small-caps;
}
/* Links (subtle) */
.content a, .content a:active, .content a:link, .content a:visited { /* Link appear the same as text with exception of hover */
	color: #404040;
	text-decoration: none;
}
/* Links (revealed) */
.content a:hover {
	color: #EAE8D0;
	background: #9C9473;
	padding: 5px 0;
	text-decoration: underline;
}
/* Redundant???
Links within Content paragraphs (subtle)
p a, a:active, a:link, a:visited {
	text-decoration: none;
}
Links within Content paragraphs (revealed)
p a:hover {
	text-decoration: underline;
} 
*/
img {
	border: none;
}
.imgthumb {
	height: 80px; /* 8 x 10 ratio */
	float: right;
	margin-left: 5px;
	border: 1px solid #663300; }
	
.imgmugshot {
	width: 64px;
	height: 80px;
	float:left;
	border: 1px solid #663300; }	
	
.imglinkthumb {
	height: 36px;
	width: 36px;
	float: none;
	margin: 0 5px 0 0;
	vertical-align:middle;
	background-color:#FFFFFF;
	border: 1px solid #663300; }	
/*
.imglinkfamilysearch {
	height: 36px;
	width: 36px;
	float: right;
	margin: 0 0 0 0;
	vertical-align:top;
	background-color:#FFFFFF;
	border: 1px solid #656C4A; }	*/
	
.imgright {
	float: right;
	border: 1px solid #663300;
	margin: 5px 15px 10px 10px;
	padding: 10px;
}
.imgleft {
	float: left;
	border: 1px solid #663300;
	margin: 5px 15px 10px 0px;
	padding: 10px;
}
/*
#gallery {
	height:100px;
}
#gallery img {
	float: left;
	padding: 20px;
} */
/* .clear {
	clear: left;
} */
/* Comment Boxes (<aside>) */
.commentCenter {
	position: relative;
	width: 90%; /* 820: 910 x 90%, but revised to a percentage */
	margin: auto;
	padding: 5px;
	background-color: #E4DCB2;
	border: 1px solid #663300;
	border-collapse:collapse;
}
.commentLeft {
	position: relative;
	float: left;
	width: 32%; /* revised from 320px */
	margin: 0 10px 0 0;
	padding: 5px;
	background-color: #E4DCB2;
	border: 1px solid #663300;
	border-collapse: collapse; 
}
.commentRight {
	position: relative;
	float: right;
	width: 32%; /* revised 320px */
	margin: 0 0 0 10px;
	padding: 5px;
	background-color: #E4DCB2;
	border: 1px solid #663300;
	border-collapse: collapse; 
}
.commentHeader {
	background-color: #EAE8D0;
	padding: 0.3em 0.3em;
	margin: 0.2em 0;
	border: 1px solid #663300; 
	text-align: center;
	font-family: "Times New Roman", Garamond, Georgia, serif;
	font-variant: small-caps;
	font-weight: bold;
}
.commentCenter p, .commentLeft p, .commentRight p, .commentCenter li, .commentLeft li, .commentRight li {
	margin: 0 0 0 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8rem; /* use root-based size to avoid nested list shrink */
	line-height: 1.5em; 
}
.commentHeader h3 { /* for use within comment block headers */
	margin: 0;
	font-size: 1em;
	font-family: "Times New Roman", Garamond, Georgia, serif;
	font-variant: small-caps;
	font-weight: bold;
}
.commentHeader a, .articleHeader a { color: inherit; text-decoration: none; }
.commentHeader a:hover, .articleHeader a:hover { text-decoration: underline; }

.commentCaption, .commentCaption p { /* Caption for figure captions */
	margin: 0 0 0 0;
	padding: 0;
	text-align: center; /* override inline for right justification */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1.5em; 
}
/* News Articles */	
.articleCenter {
	position: relative;
	width: 90%; /* 910 x 90% */
	margin: auto;
	padding: 5px;
	background-image: url('images/bckgndnews.jpg');
	text-align: left; 
	border: 1px solid #663300;
	border-collapse: collapse;
}
.articleLeft {
	position: relative;
	float: left;
	width: 32%; /* revised 320px */
	margin: 0 5px 0 0;
	padding: 5px;
	background-image: url('images/bckgndnews.jpg');
	text-align: left; 
	border: 1px solid #663300;
	border-collapse: collapse; 
}
.articleRight {
	position: relative;
	float: right;
	width: 32%; /* revised 320px */
	margin: 0 0 0 5px;
	padding: 5px;
	background-image: url('images/bckgndnews.jpg');
	text-align: left; 
	border: 1px solid #663300;
	border-collapse: collapse; 
}
.articleCenter p, .articleLeft p, .articleRight p {
	margin-bottom: 1em;
	padding: 0;
	font-family: "Courier New", Courier, serif;
	font-size: 0.8em;
	line-height: 1.5em; 
}
.articleCenter .familyName, .articleLeft .familyName, .articleRight .familyName {
	font-variant: small-caps;
	letter-spacing: 1px;
}
/* table.article {
	margin: 5px;
	color: #663300;
	font-weight: normal;
	font-size: 1em;
	background-color: #f3eee0;
	border-collapse: collapse; } */

.articleHeader {
	margin: 0;
	background-color: #f3eee0;
	padding: 0.3em 0.3em;
	text-align: center;
	font-size: 1em;
	font-weight: bold; 
	border: 1px solid #663300; }

.articleHeader h3 { /* for use within article block headers */
	margin: 0;
	font-size: 1em;
	font-family: "Courier New", Courier, serif;
	font-variant: small-caps;
	font-weight: bold;
	letter-spacing: 1.5px;
}	

/* .articleBody {
	font-family: "Courier New", Courier, serif;
	background-image: url('images/bckgndnews.jpg');
	text-align: left; 
	border: 1px solid #663300; 
} */

/* Source Table */	
.sourceTable {
	width: 100%;
	margin: 5px auto;
	font-size: 0.8em;
	font-weight: normal;
	color: inherit;
	background-color: inherit;
	border: 1.5px solid #663300;
}
/* Shared Source title styles (avoid duplication) */
.sourceHeader {
  font-family: "Times New Roman", Garamond, Georgia, serif;
  font-variant: small-caps;
  font-size: 1.3em;
  text-align: center;
  font-weight: bold;
}
/* Caption-specific tweaks **
.sourceTable .caption {
  letter-spacing: 4px;
  margin-bottom: 5px;
  display: table-caption;
}
** Header-specific tweaks **
.sourceHeader {
  background-color: inherit;
  margin: 3px;
} */

/* Family Table (100% width)*/
.familyTable {
	width: 100%; /* 800 - 35x2 = 730 */
	border-collapse: collapse;
	text-align: left; 
	font-weight: normal;
	font-size: 0.9em;
	line-height: 1.5em;
	color: #404040;
	background-color: #E4DCB2;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #663300;
}
.familyTable caption {
  font-weight: normal;
  text-align: left;
  margin-bottom: 0.5em;
}
.familyTable th, .familyTable td {
  padding: 0.3em;
}
.familyTable th {
  text-align: center;
}
.textRight {
  text-align: right;
}
.textCenter {
  text-align: center;
}
/* Table Column Widths */
.col-num { width: 10%; }
/* .col-name { width: 34%; } */
.col-birth { width: 16%; }
.col-death { width: 16%; }
.col-age { width: 10%; }

.text-end {
  text-align: right;
}
.pageJump {
	width: 32%;
	margin: 5px auto;
	padding: 3px;
	border-top: 0;
	border-left: 0;
	border-right: 3px solid #663300;
	border-bottom: 3px solid #663300;
	vertical-align: middle;
	text-align: center;
	background-color: #9C9473;
}
/* Bullet icon used in paged jumps and similar links */
.pageJump img.bullet {
	margin-left: 5px;
	margin-right: 6px;
	border: none;
	vertical-align: middle;
	display: inline-block;
	height: 15px;
	width: auto;
}
.pageJump h3 {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* Collapsible Historical Details */
details.timeline-events {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

details.timeline-events summary {
  cursor: pointer;
  font-weight: bold; 
  padding: 0.3em 0.3em;
  background-color: #EAE8D0;
  border: 1px solid #663300;
  text-align: center;
  font-family: 'Times New Roman', Garamond, Georgia, serif;
  font-variant: small-caps;
  margin-bottom: 0.5em;
  /* display: block; */
  white-space: nowrap;
}
details.timeline-events h3 {
  margin: 0;
  font-size: 1em;
  font-family: inherit;
  font-weight: inherit;
  font-variant: inherit;
}

details.timeline-events ul {
  margin-top: 0;
  padding-left: 1.5em;
}

/* FOOTER -- New Footer in progrees */
.footer {
	width: 100%; /* Responsive width */
	max-width: 950px; /* Maximum width for large screens */
	/* clear: both; */
	margin: auto;
	padding: 0 15px; /* Added horizontal padding for mobile */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #EAE8D0;
	background: #404040;
	border-top: 0px solid #663300;
}
.footer-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* Makes it responsive */
  gap: 5px; 
}
.footer-item {
  padding: 5px;
}
.footer-text {
  flex: 1; /* Allows text to take remaining space */
  font-size: 0.9em;
  text-align: center;
}
.footer a:link, .footer a:visited {
	font-size: 0.8em;
	color: #EAE8D0;
	text-decoration: none;
	font-variant: small-caps;
	font-weight: bold;
}
.footer a:hover {
	font-size: 0.8em;
	text-decoration: underline;
	color: #EAE8D0;
	background: #6E6A5A;
}
/* FROM genstyle.css */

blockquote { 
	font-family: "Courier New", Courier, serif;
	font-size: 1em;
	line-height: 1.4em; }
hr {
	/* IE uses "color", Mozilla uses "background-color" */
	color: #663300;
	background-color: #663300;
	height: 4px
}

/* Title Banner */
/*
.banner {
	margin: 0px;
		margin-left: auto; margin-right: auto; 
	color: #663300;
	border-collapse: separate; }

.bannerHead {
	background-color: #c9cfa0;
	border: 1px solid #a4710c;
	text-align: center; }

.bannerBody {text-align: center; }

.bannerMenu {
	padding-bottom: 15px;
	border: 1px solid #a4710c; 
	background-color: #c9cfa0; } */

/* Construction Notice */
/* table.construction {
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 5px;
	color: #663300;
	font-weight: normal;
	font-size: 1em;
	background-color: #f3eee0;
	border-collapse: separate; }

.constructionHead {
	background-color: #c9cfa0;
	text-align: center;
	font-weight: bold; 
	border: 1px solid #a4710c; }

.constructionBody {
	text-align: left; 
	border: 1px solid #a4710c; }
	*/

/* Link Effects */
a:active {
	color: #FF0000;
}

a.hidden {
  color: #000000;
}

a.hidden:visited {
  color: #000000;
}

a.hidden:hover {
	color: #0000CC;
}

a.hidden:active {
  color: #000000;
}

a.nav:visited {
	color: #cccccc;
	padding: 2px;
}

a.nav:hover {
	color: #FFFFFF;
	background-color: #666666;
	padding: 2px;
}

a.menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-decoration: underline;
}

a.menu:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-decoration: underline;
	letter-spacing: 1px;
	}

a.box {
	padding: 3px;
	background-color: #FFFFFF;
	text-decoration: none;
	border: medium solid #CCCCCC;
	color: #000000;
}
a.box:hover {
  color: #000000;
	padding: 3px;
	text-decoration: none;
	background-color: #666666;
	border: medium solid #3366FF;
	color: #FFFFFF;
}
/* Popup container (from W3Schools, but not yet implemented, 21 Feb 2026) */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Accessibility: visually hidden but accessible to screen readers */
.sr-only, .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}