/*your custom style goes in this file*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');


header {
  background: #4A7978;
  margin: 0;
}

.brand, .brand a, .brand a:hover  {font: 38px 'Playfair Display', serif; color: #F8F5E9; font-weight: 700; text-decoration: none; margin: 0;}
.slogan {font-size: 18px; font-family: 'Source Sans 3', Verdana, Helvetica, sans-serif; color: #F8F5E9; padding: 10px; 	font-style:italic; 	margin: 0;}	
.img-left {margin: 5px 10px 0 0; float: left; width: 90px; height: auto;}

.nav-menu {
  width: 100%;
  display: block;
  float: left !important;
  margin: 20px 0 0 0;
  padding: 0;
  list-style: none;
  text-transform: uppercase;
  color: #ffffff;
  background: #B25D28;  /* Changed to solid color */
  box-sizing: border-box;
  border-top: 1px solid #ffffff;
  height: 42px;
  border-bottom: 1px solid #ffffff;
}

.topsearchnav li {display: inline-block;}
.slidedown { background-color:#fff; color: #000;}
ul.tngdd .sub {background: #dcdca6 url(../img/arrow.png) 146px 7px no-repeat; color: #000;}
ul.tngdd .topline {border-top:1px solid #777;}
ul.tngdd ul.last {left: -40px;}

/* link styling for Find Media Info*/
div.icons {padding: 0; height:36px; margin-top: 0; margin-right: 20px;}
div.icons a {color: #F8F5E9;}
div.icons a:hover {color: #fff; background-color:#6D9695; border-radius: 5px 5px 0 0;}

#print-smicon {display:none; background-position: 0px -120px;}

/*styles Find, Media, Info*/
ul.tngdd {background-color:transparent; margin: 0 0 20px 0;}
ul.tngdd a {display:block; text-decoration:none; border-radius: 5px 5px 0 0; color:#fff;}
ul.tngdd .menulink {padding:3px 0 5px 24px; font-weight: normal; color: #fff;background: url(../img/ArrowDown.png) 2px 10px no-repeat;width:80px;line-height:1.5;border-bottom: none;border-right: none;}
ul.tngdd .menulink:hover,
ul.tngdd .menuhover {background:#6D9695 url(../img/arrowdown2.png) 2px 10px no-repeat;border: none;color:#fff;text-decoration:none;}

/* Dropdown menu styles*/
ul.tngdd ul li a {display:block;padding:6px 4px 6px 10px;background-color:#eeeeee;color: #000;border-top:1px solid #ffffff;border-radius: 0px;text-transform:none;}
ul.tngdd ul li a:hover {background-color:#6D9695; color: #fff; text-decoration:none;}

/*Language Menu*/
ul.tngdd .langmenu {border: none; padding: 0;}
#newlanguage1 {font-size: 10.5pt!important; color: #fff; background-color: transparent; border:  1px solid transparent; text-transform: uppercase; margin-top: 6px;  box-shadow:none;}
#newlanguage1:hover {font-size: 10.5pt!important; color: #fff; background-color: #6D9695; border: 1px solid transparent; text-transform: uppercase; margin-top: 6px; }

/* ======== HEADINGS ======== */
h1 {font: 34px 'Playfair Display', serif; color: #4A7978; font-weight:700; margin: .3em 0 .3em 0; 	letter-spacing: -1px;}
h2 {font: 32px 'Playfair Display', serif; color: #4A7978; font-weight:400; text-align:center; margin: .3em 0; letter-spacing: 1px;}
h3 {font: 28px 'Source Sans 3', Verdana, Helvetica, sans-serif; color: #4A7978; padding: 0; font-weight: 600; letter-spacing: -1px; margin: 10px 0; padding: 5px 0;}
h4 {font: normal 24px 'Playfair Display', serif; text-align: center; color: #F8F5E9; font-weight:700; font-variant:none; background: none; background: none; padding: 5px; margin: 0 0 20px 0; border-radius: 5px;}
h5 {font: normal 24px 'Source Sans 3', Verdana, Helvetica, sans-serif; color: #777; margin: .3em 0;}
h6 {font: normal 24px 'Playfair Display', serif; color: #4A7978; font-weight: 600; margin: .3em 0;}

/* SNIP2 PHOTO - TEXT EDITING - Used in Parallax  */
.snip2 {font-family: sans-serif; position: relative; overflow: hidden; max-height: 350px; max-width: 250px; margin: 0 auto; margin-bottom: 20px; width: 90%; color: #F8F5E9; text-align: left;
	background-color: #000; border: 1px solid #404040; border-radius: 10px;}
.snip2 * {-webkit-box-sizing: border-box;  box-sizing: border-box;  -webkit-transition: all 0.45s ease;  transition: all 0.45s ease;}
.snip2 img {vertical-align: top; max-width: 140%; backface-visibility: hidden;}
.snip2 figcaption {position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; padding: 30px; background-color: #000; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);}
.snip2 p {margin-top: 12px;	color: #F8F5E9!important; font-family: "Source Sans 3", serif!important; font-size: 14px!important;}
.snip2 h2 {margin: 0; font-family: "Playfair Display", serif; color: #F8F5E9; font-size: 24px; font-weight:500;}
.snip2 h3 {color: #6D9695; border-bottom: 1px #6D9695 solid; font-family: "Source Sans 3", sans-serif!important; font-size: 18px; font-weight: normal; letter-spacing: 1px; text-align:center; margin: 0;}
.snip2 a {position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1;}
.snip2:hover > img,
.snip2.hover > img {-webkit-transform: translateX(-100%); transform: translateX(-100%);}
.snip2:hover figcaption, .snip2.hover figcaption {-webkit-transform: translateX(0%); transform: translateX(0%);}


/* COLOR BOX IN SIDEBAR */
.callbox1 {
  color: #F8F5E9;
  padding: 1px 15px;
  margin: 18px 0;
  border-radius: 10px;
  background-color: #4A7978;   /* Dark blue-green */
  box-shadow: none;            /* Remove shadows */
  border: none;                /* Just in case */
    min-height: 200px;  /* 👈 Ensures minimum height */
    height: auto;       /* 👈 Allows it to grow with content */
    overflow: visible;
}
.callbox1 h4 {text-align: center; color: #F8F5E9; font-weight: 600; font-variant:none; background: none; padding: 5px; margin: 16px; border-radius: 0px;}


.normal, .indleftcol {
	font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
	font-size: 14px;
}

/* link: normal links, active: links in use */
a:link, a:active, div.icons a {color: inherit;}

/* visited: previously visited links */
a:visited {color: inherit;}
a {color: inherit; font-weight: normal; text-decoration: none; outline: none;}
a:hover {color: inherit; text-decoration: underline; font-weight: normal; outline: none;}

ul.list1 li:before {position: absolute; font-family: 'FontAwesome'; font-size: 14px; top: 1px; left: 0; content: "\f0a9"; color: #F8F5E9;}

/* body: describes page background color and all non-table text not governed by any other style */
body {
	background-color : #F8F5E9;
	color : #222222;
	font-family : 'Source Sans 3', Arial, Helvetica, sans-serif;
	font-size: 16px;
	print-color-adjust:exact;
}

/* Toggle Head on General Settings Page */
.subhead {color:#4A7978;}
.subheader {color:#4A7978;}

/* Alphabet Tabs & Numerical Listing */
.snlink {background-color:#4A7978; border-bottom:1px solid #aaa; border-right:1px solid #aaa; color:#F8F5E9 !important; font-weight: bold;}
p a.snlink {background-color:#4A7978; color:#F8F5E9; font-weight: bold;}
a.snlink:hover {background-color:#C8734A!important; color:#F8F5E9; font-weight: bold;}
p a.snlink:hover {background-color:#C8734A!important; color:#F8F5E9; font-weight: bold;}
.snlinkact {background-color:#6D9695; color:#F8F5E9; font-weight: bold;}


input[type=button], input[type=submit], input[type=reset], button {font-family: 'Playfair Display'; background-color:#B25D28; color:#F8F5E9; font-weight:600;}
::placeholder {font-size: 11pt; color: #fff; opacity: 1; /* Firefox */}
::-ms-input-placeholder {font-size: 11pt; color: #fff;  /* Edge 12 -18 */;}
.btn:hover, .btn:focus, .btn.focus {color: #fff; background-color: #6D9695; text-decoration: none;}
#previewbtn {background: #14153a;}

input[type="button"], input[type="submit"], input[type="reset"], input[type="password"], input[type="number"], button, input[type="text"], textarea, select {
   border: 0px;
	border-radius: 7px;
	padding: 3px 6px;
	box-shadow: none;
}

.home-menus {display:none;}

/* ===== BUTTONS ===== */
.btn-detail {position: relative; font: normal 16px 'Playfair Display', serif; text-align: center; color: #F8F5E9!important; font-weight: 600; font-variant:none; background: #B25D28; padding: 5px; margin: 0; border-radius: 5px;text-decoration: none; border-color: none; padding: 5px 35px 5px 5px; border-radius: 5px;}
.btn-detail:after {position: absolute; font-family: 'FontAwesome'; content: "\f0a9"; top: 7px; right: 10px;}
.btn-detail:hover {background-color: #6D9695; background: #6D9695; border-color: none; color: #F8F5E9; font-weight: 600; text-decoration: none;}
.btn-detail a {color: #F8F5E9;	text-decoration: none !important; font-weight: 600; outline: none;}


.fancybox {
  position: relative;   /* needed for overlay positioning */
  text-align: center;
  height: auto;
  min-height: 600px;
  background-image: url('../img/trees.jpg');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 40px 1% 40px 1%;
  box-sizing: border-box;
  border: 1px solid #1f2159;
  color: white; /* optional, to ensure text is visible */
}

.fancybox::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);  /* black with 50% opacity */
  pointer-events: none;  /* allows clicks to pass through */
  z-index: 1;
}

/* Make sure text/content inside sits above the overlay */
.fancybox > * {
  position: relative;
  z-index: 2;
}

.fancybox h1 {
  font-family: 38px 'Playfair Display', serif;
  color: #F8F5E9;
  font-weight: 700;
  text-align: center;
  margin: .3em 0;
  margin-bottom: -10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Still gives a "lift" */
}

.fancybox h5 {
  visibility: hidden;
  height: 0.5em;  /* or use padding or margin */
}


.fancybox h6 {
  font-family: "Source Sans 3", sans-serif;
  color: #F8F5E9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);  /* Subtle lift */
}

.container {width: 95%; text-align:left; margin: 0 auto; clear:both;}
.contentBox3a {float: left; width: 28%; padding: 0; margin: 0 5px 5px 5px;}
.contentBox3c {float: left; width: 28%; padding: 0; margin: 0 5px 5px 5px;}
.testimonial::before {
	position: absolute;
	color: #4A7978;
	font-family: 'FontAwesome';
	font-size: 24px; 
	content: "\f1ea"; top: 18px; left: -15px; text-shadow: 1px 2px 3px rgba(0,0,0,0.3);}
	
/* ======== Row 2 is the light colored area used on the 3 boxes at the bottom of each page ======== */
.row2 {background: #B25D28; color: #F8F5E9; border-bottom: 1px solid #d8dede; width: 100%; margin-top: 10px; padding: 16px 0 20px 0;}

.img-round-left {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  float: right;
  border: 1px #444 solid;
  box-shadow: 0 10px 10px -9px rgba(0, 0, 0, 0.5);
  margin-right: 10px;
  object-fit: cover; /* ensures the image covers the box without distortion */
}

/* ===== HEADER CLASS ON INSIDE PAGES ===== */
/* Image & page title (h1) located at the top of the content area (sources, search, surname list, etc) */
.header { margin: 10px 5px 0 0; font-size: 24px; font-weight: 700; color: #4A7978; line-height: 30px;}
.plainheader {font: 24px 'Source Sans 3', Verdana, Helvetica, sans-serif; color: #4A7978;} /* Header breadcrumb on the admin pages */
.defphoto {margin-top: 14px;} 
.vcard .defphoto {margin-top: 5px;}
.headericon {margin-top: 4px;}

.featured-content {clear:both; overflow:hidden;}
.featured-content .entry-title a {border:none;}
.site-header .widget-area {float:right; text-align:right; width:728px;}
.titlebox, td.highlightedchild {background-color:#fbfbf9; box-shadow:4px 4px 6px 0 #777;}

/* ===== FAMILY TREES - ANCESTORS/DESCENDANTS PAGES ===== */
/*Tabs Coding used on getperson pages: Individual, Ancestors, Descendants, etc. */
ul#tngnav {margin:0 0px 0px 10px; font-weight: bold;}
#tngnav li {margin: 0 0 0 1px;}
#tngnav li a {font-size:11pt; font-weight: bold;}
#tngnav a {background:#6D9695; color:#4A7978; border-right:1px solid #222222; padding: 0.45em 1em 0.35em 8px;border-radius: 4px 4px 0px 0px; font-weight: bold;}
#tngnav a:hover {background:#B25D28; color:#F8F5E9;}
#tngnav a.here {background:#4A7978; color:#F8F5E9; border-right:1px solid #777; margin: 0;}

/* Fields */
/* fieldnameback: background color for column and row title sections, the graphic bar showing surname count, and background color for template settings page */
.fieldnameback, .bar, .page, .LB_closeAjaxWindow, .tablesaw-cell-label {background-color:#4A7978; color: #F8F5E9; font-size: 11pt;}


/*Family Tree Chart Box Coding - Ancestors & Descendants Boxes*/
.pedbox {background-color: #f0f1fa!important;}
.pboxname {font-size: 10pt!important;}
.hiddenbox {background-color:#f0f1fa!important;}
.floverlr {background-color:transparent!important;}

/*Family Tree Chart Box Coding - Family Tab*/
.fambackground {background-color: #e5e7fd;}
.fambox, .mfambox {background-color: #f0f1fa!important;}

/* Calendar */
table.calendar {background-color:#f0f1fa!important; border: 1px solid #14153a!important;}
td.calDay {border-top: 1px solid #14153a!important; border-left: 1px solid #14153a!important; border-bottom: 2px solid #14153a!important; border-right: 2px solid #14153a!important;}
#calLegend {background-color: #f0f1fa!important; border: 1px solid #14153a!important; font-size: 9pt; font-weight: bold; margin-top: 8px; padding: 4px; text-align: center;}
a.hidden {background-color: #f0f1fa!important;}
td.calToday {background-color: #f0f1fa!important; border-top: 1px solid #14153a!important; border-left: 1px solid #14153a!important; border-bottom: 2px solid #14153a!important; border-right: 2px solid #14153a!important;}

/* ======== BACK TO TOP FORMATTING ======== */
.scroll-to-top {display: none; position: fixed; bottom: 20px; right: 10px; z-index: 5; width: 30px; height: 30px; padding: 8px; text-align:center; color: #F8F5E9; text-decoration: none; 
	background-color: #4A7978; box-shadow: none; border-radius: 5px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); border-radius: 50%;}
.scroll-to-top:hover {text-decoration: none; background-color: #6D9695; box-shadow: none; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);}
.scroll-to-top a, .scroll-to-top a:hover {text-decoration: none;}

/* ===== FOOTER CODING ===== */
footer {clear: both; background: #4A7978; width: 100%; color: #F8F5E9; padding: 6px 0; line-height: 13px; text-align:center; font-size: 90%;}
footer a {color: #F8F5E9; font-weight: normal; text-decoration: none; outline: none;}
footer a:hover {color: #F8F5E9;}

/* Mobile Footer*/
.mobilefooter {background: #14153a !important; margin-top: -12px; padding: 0 0 6px 0; color: #fff; line-height: 13px; text-align:center; font-size: 90%;}
.mobilefooter a {color: #d6e4f2!important; font-weight: normal; text-decoration: none; outline: none;}
.mobilefooter a:hover {color: #fff!important; text-decoration: none; font-weight: normal; outline: none;}


/*if you're overriding style blocks from genstyle.css, you only need to include the attributes you're overriding, not the whole block*/