body{
  color: black;
  font-size: 13pt;
  font-family: spec, Georgia, Cambria, Garamond, Didot, serif;
  line-height: 1.4;}
a{
  text-decoration: none;}

@font-face {
  font-family: abstrip;
  src: url(fonts/abstrip.woff);}  /* This is Arial Black with the useless glyphs deleted. */
@font-face {
  font-family: spec;
  src: url(fonts/spec.woff);}  /* This is Spectral with the useless glyphs deleted. */
@font-face {
  font-family: spec;
  src: url(fonts/spec-b.woff);
  font-weight: bold;
  font-style: normal;}
@font-face {
  font-family: spec;
  src: url(fonts/spec-i.woff);
  font-weight: normal;
  font-style: italic;}
@font-face {
  font-family: spec;
  src: url(fonts/spec-bi.woff);
  font-weight: bold;
  font-style: italic;}

@media only screen and (max-width: 1049px) {
 .sbsview {display:none;}}
@media only screen and (min-width: 1050px) {
 .atatimeview {display:none;}}
@media print {
 .atatimeview {display:none;}}

/* UNIQUE TO STYLEBOTH */
s1ah{
  color: black;
  font-size: 9pt;
  font-family: 'Arial Black', Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', abstrip, sans-serif;
  font-style: bold;
  position: relative;
  top: 0.4em;}
s1{
  color: black;
  font-size: 2em;
  font-family: 'Arial Black', Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', abstrip, sans-serif;}
/* UNIQUE TO STYLEBOTH. list_ahnentafel.php has custom breakpoints, different from what's below. */
  @media only screen and (max-width: 450px) {
    s1 {
    font-size: 1.6em;}}
  @media only screen and (max-width: 400px) {
    s1 {
    font-size: 1.4em;}}
  @media only screen and (max-width: 350px) {
    s1 {
    font-size: 1.2em;}}
  @media only screen and (max-width: 300px) {
    s1 {
    font-size: 1em;}}
  @media only screen and (max-width: 275px) {
    s1 {
    font-size: 0.8em;}}
.s1s{
  padding-top:3vh;
  padding-right:3vw;
  padding-bottom:3vh;}
  @media only screen and (max-width: 399px) {
    .s1s{
      padding-right:20vw;}}
.s1sp{
  padding-top:1vh;
  padding-bottom:3vh;}
  @media only screen and (max-width: 599px) {
   .s1s {
    position: relative;
    left: 5px;}}
  @media only screen and (max-width: 549px) {
   .s1s {
    position: relative;
    left: 10px;}}
  @media only screen and (max-width: 499px) {
   .s1s {
    position: relative;
    left: 15px;}}
  @media only screen and (max-width: 449px) {
   .s1s {
    position: relative;
    left: 20px;}}
  @media only screen and (max-width: 399px) {
   .s1s {
    position: relative;
    left: 50px;}} /* I've added an extra 25 px from this breakpoint on, because positioning is also affected by changing the Container width to 95% at 399px. */
  @media only screen and (max-width: 349px) {
   .s1s {
    position: relative;
    left: 55px;}}
  @media only screen and (max-width: 299px) {
   .s1s {
    position: relative;
    left: 60px;}}
.dnaico{
  display: inline-block;
  margin-left: 1.5vw;
  vertical-align: -14px;}

/* TREE LINK */
div.treebox{
  position: absolute;
  top: 0;
  right: 0;
  padding-left: 10px;
  opacity: 1;
  z-index: 999;}
img.tree{
  max-width: 90px;}
@media only screen and (max-width: 800px) {
  img.tree{
    max-width: 75px;}}
@media only screen and (max-width: 600px) {
  img.tree{
    max-width: 50px;}}

/* UNIQUE TO STYLEBOTH */
ah{
  font-family: Courier New, Nimbus Mono L, Consolas, monospace;
  font-size: 7pt;
  position: relative;
  color: black;
  top: 0.3em;}
ahi{
  font-family: Courier New, Nimbus Mono L, Consolas, monospace;
  font-size: 7pt;
  position: relative;
  color: blue;
  top: 0.3em;}
a.ah{
  font-family: Courier New, Nimbus Mono L, Consolas, monospace;
  font-size: 7pt;
  position: relative;
  color: blue;
  top: 0.3em;
  /*   font-family: Arial, sans-serif;
  font-size: 9pt;
  position: relative;
  color: blue;
  top: 0.3em; */}
cit{
  font-family: Courier New, Nimbus Mono L, Consolas, monospace;
  color: black;
  font-size: 8pt;
  position: relative;
  bottom: 0.6em;}

date{
  color: black;
  font-size: 13pt;
  font-family: spec, Georgia, Cambria, Garamond, Didot, serif;}
up{
  font-family: spec, Georgia, Cambria, Garamond, Didot, serif;
  font-size: 0.7em;
  position: relative;
  bottom: 0.5em;}
credit{
  font-size: 0.8em;}
cap{
  font-style: italic;}
mark{
  background-color: #ffffe0;}

#Container{
  width: 80%;
  margin:0 auto;
  overflow:visible;}
#percentageSize{
  width: 100%;
  background: grey;}
@media only screen and (max-width: 399px) {
 #Container{
  width: 95%;}}

/* SHADOW AROUND IMAGES */

.niws {
  max-width: 100%;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.3)}
.niwsA {
  max-width: 100%;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.3);
  clip-path: inset(0px -10px 0px -10px);}
.niw {
  max-width: 100%;}
.nis {
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.3)}

/* KEY FACTS TABLE */
table.kf {
  font-family: spec, Georgia, Cambria, Garamond, Didot, serif;
  border-width: 1px;
  border-color: #ff0000;
  border-collapse: collapse;}
table.kf td {
  border-width: 1px;
  font-size: 0.9em;
  padding: 8px;
  border-style: solid;
  border-color: #ffffff;
  background-color: #ffffff;
  vertical-align: top;}
.buried {
  border-bottom: 2pt solid #dfdfdf;}

/* INDENT TABLE */
table.indent{
  font-family: spec, Georgia, Cambria, Garamond, Didot, serif;
  font-size: 13pt;
  border-width: 1px;
  border-color: #ff0000;
  border-collapse: collapse;}
table.indent td{
  border-width: 1px;
  padding: 4px;
  border-style: solid;
  border-color: #ffffff;
  background-color: #ffffff;
  vertical-align: top;}

/* CENSUSSUMMARY TABLE. Despite the name, this is used for many types of tables, not just censuses. */
table.censussummary{
  border-color: #8f8f8f;
  border-style: solid;
  border-width: 0 0 1px 1px;
  border-spacing: 0;
  border-collapse: collapse;}
table.censussummary th{
  border-color: #8f8f8f;
  border-style: solid;
  margin: 0;
  padding: 8px;
  border-width: 1px 1px 0 0;
  font-style: bold;}
table.censussummary td{
  border-color: #8f8f8f;
  border-style: solid;
  margin: 0;
  padding: 4px;
  border-width: 1px 1px 0 0;
  text-align: center;}
table.censussummary td.alignleft{
  border-color: #8f8f8f;
  border-style: solid;
  margin: 0;
  text-align: left;
  padding: 8px;
  border-width: 1px 1px 0 0;
  font-style: bold;}

/* RECORDS TABLE */
table.records{
  border-color: #8f8f8f; border-style: solid; border-width: 0 0 1px 1px; border-spacing: 0; border-collapse: collapse;}
table.records th{
  border-color: #8f8f8f; border-style: solid; border-width: 1px 1px 0 0; margin: 0;
  padding-left: 0.5vw; padding-right: 0.5vw;
  text-align: center;
  font-style: bold;}
table.records td{
  border-color: #8f8f8f; border-style: solid; border-width: 1px 1px 0 0; margin: 0;
  padding-left: 0.7vw; padding-right: 0.7vw;
  text-align: left;
  vertical-align: top;}
table.records td.date{
  border-color: #8f8f8f; border-style: solid; border-width: 1px 1px 0 0; margin: 0;
  padding-left: 0.5vw; padding-right: 0.5vw;
  text-align: left;
  vertical-align: top;}
table.records td.link{
  border-color: #8f8f8f; border-style: solid; border-width: 1px 1px 0 0; margin: 0;
  padding-left: 0.5vw; padding-right: 0.5vw;
  text-align: center;
  vertical-align: top;}

/* TRANSCRIPTION TABLE */
table.transcription{
  font-family: spec, Georgia, Cambria, Garamond, Didot, serif;
  font-size: 12pt;
  border-width: 0px;
  border-style: solid;
  border-color: #ff9966;
  margin-left: 2%;
  margin-right: 2%;}
table.transcription td{
  vertical-align: top;}
table.transcriptionsbs td{
  vertical-align: top;}

blockquote{
  margin-left: 5%;
  margin-right: 5%;}

/* SIDE-BY-SIDE. Use SBSLCAP and SBSRCAP only for div's of an image followed by a short caption. Use plain SBSL/SBSR for everything else, particularly longer transcriptions of documents. */
.sbsparent{
  display: flex;
  width: 90vw;
  margin-left: auto;
  margin-right: auto;}
.sbsl{
  max-width: 39vw;}
.sbslcap{
  font-family: spec, Georgia, Cambria, Garamond, Didot, serif;
  padding-right: 1vw;
  font-size: 13pt;
  border-width: 0px;
  border-style: dashed;
  border-color: #ff9966;
  vertical-align: top;}
.sbsr{
  font-family: spec, Georgia, Cambria, Garamond, Didot, serif;
  margin-left: 2vw;
  font-size: 1.2vw;
  border-width: 0px;
  border-style: dashed;
  border-color: #ff9966;
  vertical-align: top;}
.sbsrcap{
  font-family: spec, Georgia, Cambria, Garamond, Didot, serif;
  margin-left: 2vw;
  font-size: 13pt;
  border-width: 0px;
  border-style: dashed;
  border-color: #ff9966;
  vertical-align: top;}
@media only screen and (min-width: 1500px) {
 .sbsr {
  font-size: 1em;}}

/* ANCESTOR PHOTOS */
.foto-wide {
  float: right;
  padding-top: 2vh;
  padding-bottom: 3vh;
  padding-left: 5vw;
  font-style: italic;}
.foto-narrow{
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  font-style: italic;}
.foto-print {
  display: none;}
@media only screen and (max-width: 899px) {
 .foto-wide {
  display: none;}}
@media only screen and (min-width: 900px) {
 .foto-narrow {
  display: none;}}

/* PROBLEM TABLES */
table.probres{
  margin-left: auto;
  margin-right: auto;
  font-family: spec, Georgia, Cambria, Garamond, Didot, serif;
  font-size: 13pt;
  border-width: 1px;
  border-style: dashed;
  border-color: #669933;
  background-color: #DDFFCC; /* If you change this color code, also search all the PHP files for the current code. On a few pages, the background colors of other, internal tables (within the problem section) are manually overridden via the page head style. */
  box-shadow: 0 3px 10px rgb(29 86 0 / 0.4);}
table.probunres{
  margin-left: auto;
  margin-right: auto;
  font-family: spec, Georgia, Cambria, Garamond, Didot, serif;
  font-size: 13pt;
  border-width: 1px;
  border-style: dashed;
  border-color: #FF6666;
  background-color: #FFCCCC; /* If you change this color code, also search all the PHP files for the current code. On a few pages, the background colors of other, internal tables (within the problem section) are manually overridden via the page header. */
  box-shadow: 0 3px 10px rgb(86 0 0 / 0.4);}
problem{
  font-family: 'Arial Black', Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', abstrip, sans-serif;} 
res{
  font-family: 'Arial Black', Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', abstrip, sans-serif;
  color: #339933;}
unres{
  font-family: 'Arial Black', Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', abstrip, sans-serif;
  color: #CC0000;}
@media only screen and (max-width: 550px) {
  table.probres td{
    max-width: 78vw;}
  table.probunres td{
    max-width: 78vw;}}

/* SECTION HEADERS */
kf{
  text-decoration: underline;
  font-size: 0.9em;}
sourcescited{
  color: black;
  font-size: 1em;
  font-family: 'Arial Black', Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', abstrip, sans-serif;
  text-decoration: underline;}

/* CITATION POSITIONING */
.ci0{margin-left:31px;text-indent:-30px;}
.ci1{margin-left:29px;text-indent:-28px;}
.ci2{margin-left:28px;text-indent:-27px;}
.ci0n{width:10px;display:inline-block;}
.ci1n{width:4px;display:inline-block;}
.ci2n{width:2px;display:inline-block;}
.ci-redact-tbl{width:24px; vertical-align:top;}

/* SIDEBAR MENU */

/* reset */
* {
  margin: 0;
  padding: 0;
}

#wrapper {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  overflow: hidden;}

label {
  cursor: pointer;}
label:focus {
  outline: none;}

.menu {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background: #fff;
  width: 240px;
  height: 100%;
  transform: translate3d(-240px, 0, 0);
  transition: transform 0.35s;
}
.menu label.menu-toggle {
  position: fixed;
  z-index: 100;
  right: -60px;
  width: 60px;
  height: 60px;
  line-height: 0px;
  display: block;
  border-radius: 0% 30% 30% 0%;
  padding: 0;
  text-indent: -9999px;
  background: rgba(255, 255, 255, 0.6) url(ico/sidebar.png) 50% 50%/25px 25px no-repeat;}
.menu label.menu-toggle:hover {
  background-color: lightsteelblue;} /* Add a dark-grey background on hover */}
.menu ul li > label {
  background: url(ico/sidearrow.png) 95% 50%/16px 16px no-repeat;
}
/*
 original icon sources:
    https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) 50% 50%/25px 25px no-repeat;
    https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png) 95% 50%/16px 16px no-repeat;
*/
.menu ul li a, .menu ul li label {
  display: block;
  text-align: left;
  padding: 0 20px;
  line-height: 60px;
  text-decoration: none;
  color: #000;}
  @media only screen and (max-height: 550px) {
    .menu ul li a, .menu ul li label {
    line-height: 9vh;}}
.menu ul li a:hover, .menu ul li label:hover {
  color: #666;}

/* hide inputs */
.menu-checkbox {
  display: none;}

/* hide navigation icon for sublabels */
.menu .menu label.menu-toggle {
  background: none;
}

/* fade in checked menu */
.menu-checkbox:checked + .menu {
  transform: translate3d(0, 0, 0);
}

/* for show */
html, body {
  height: 100%;
}

body {
  background: #fff 50% 50%/cover;
}

p {margin-bottom: 15px;}

/* STYLING FOR "both | neither | citations only" */

.button {
  background-color: white;
  border: 0px;
  color: black;
  padding: 0px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 8pt;
  margin: 0px 0px;
  cursor: pointer;}

/* HOME-LINK BUTTON */

.homelink{
  padding-top: 3.5vh;}
.homelink:hover {
  content: url('ico/homelink-hover.png');} /* Add a dark-grey background on hover */
@media print {
  .homelink{
    opacity: 0.01;}} 
@media only screen and (min-height: 1900px) {
  .homelink{height: 7vh;}}
@media only screen and (max-height: 1900px) {
  .homelink{height: 7vh;}}
@media only screen and (max-height: 1800px) {
  .homelink{height: 7.4vh;}}
@media only screen and (max-height: 1700px) {
  .homelink{height: 7.8vh;}}
@media only screen and (max-height: 1600px) {
  .homelink{height: 8.2vh;}}
@media only screen and (max-height: 1500px) {
  .homelink{height: 8.6vh;}}
@media only screen and (max-height: 1400px) {
  .homelink{height: 9vh;}}
@media only screen and (max-height: 1300px) {
  .homelink{height: 9.4vh;}}
@media only screen and (max-height: 1200px) {
  .homelink{height: 9.8vh;}}
@media only screen and (max-height: 1100px) {
  .homelink{height: 10.2vh;}}
@media only screen and (max-height: 1000px) {
  .homelink{height: 10.6vh;}}
@media only screen and (max-height: 900px) {
  .homelink{height: 11vh;}}
@media only screen and (max-height: 800px) {
  .homelink{height: 11vh;}}
@media only screen and (max-height: 700px) {
  .homelink{height: 12vh;}}
@media only screen and (max-height: 600px) {
  .homelink{height: 14vh;}}
@media only screen and (max-height: 500px) {
  .homelink{height: 14vh;}}
@media only screen and (max-height: 400px) {
  .homelink{height: 15vh;}}
@media only screen and (max-height: 300px) {
  .homelink{
    display: none;} /* hides the "home" icon when the screen is too short */
  .homelink{
    padding-top: 0px;}}
@media only screen and (min-height: 301px) {
  .homelinkalt{
    padding-top: 3px;
    display: none;}} /* hides the alternative link when the screen is taller */

/* RETURN TO TOP */

#myBtn {
  position: fixed; /* Fixed/sticky position */
  bottom: 10px; /* Place the button at the bottom of the page */
  right: 10px; /* Place the button 30px from the right */
  padding-top: 2px; /* Some padding */
  padding-left: 4px;
  padding-right: 4px;
  padding-bottom: 2px;
  height: 80px;
  width: 80px;
  border-radius: 60px; /* Rounded corners */
  display: none; /* Hidden by default */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  cursor: pointer; /* Add a mouse pointer on hover */
  background: rgba(255, 255, 255, 0.6);
  color: white; /* Text color */
  line-height: 2px;
  font-size: 30pt; /* Increase font size */
  font-family: 'Arial Black', Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', abstrip, sans-serif;}
span.myBtn{
  position: relative;
  bottom: .15em;}
.myBtnImg {
  position: fixed;
  bottom: 7px;
  right: 6px;
  height: 80px;
  width: 80px;
  padding-top: 2px;
  padding-left: 4px;
  padding-right: 4px;
  padding-bottom: 2px;}

#myBtn:hover {
  background-color: lightsteelblue;} /* Add a dark-grey background on hover */

@media only screen and (max-height: 852px) {
 #myBtn {
  height: 50px;
  width: 50px;}
 .myBtnImg {
  height: 50px;
  width: 50px;}}
@media only screen and (max-width: 402px) {
 #myBtn {
  height: 50px;
  width: 50px;}
 .myBtnImg {
  height: 50px;
  width: 50px;}}

/* NO NUMBER BUTTON */

.nonumberbtn{
  background-color: white;
  border: 0px;
  color: black;
  position: absolute;
  top: 0.5vh;
  right: 0.5vw;
  font-size: 18pt;
  cursor: pointer;}
.nonumberimg{
  max-width: 5vw;
  max-height: 5vh;}

  @media only screen and (max-width: 649px) {
    .nonumberimg{
     max-width: 8vw;
     max-height: 8vh;
     min-width: 40px;
     min-height: 40px;}}
  @media only screen and (max-height: 599px) {
    .nonumberimg{
     max-width: 8vw;
     max-height: 8vh;
     min-width: 40px;
     min-height: 40px;}}
  @media only screen and (max-width: 399px) {
    .nonumberbtn{
     width: 1px;
     height: 1px;
     opacity: 0.01;}
    .nonumberimg{
     width: 1px;
     height: 1px;
     opacity: 0.01;}}


/* LIST_LOCATION ACCORDION */

.accordion {
  font-size: 1rem;
  width: 80vw;
  margin: 0 auto;
  border-radius: 5px;
}

.accordion-header,
.accordion-body {
  background: white;
}

.accordion-header {
  padding: 1.5em 1.5em;
  background: #3F51B5;
  color: white;
  cursor: pointer;
  font-size: 1em;
  letter-spacing: .1em;
  transition: all .3s;
}

.accordion__item {
    border-bottom: 1px solid #3a4ba4;
}

.accordion__item .accordion__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.accordion-header:hover {
  background: #2D3D99;
  position: relative;
  z-index: 5;
}

.accordion-body {
  background: #fcfcfc;
  color: #353535;
  display: none;
}

.accordion-body__contents {
  padding: 1.5em 1.5em;
  font-size: 1em;
}

.accordion__item.active:last-child .accordion-header {
  border-radius: none;
}

.accordion:first-child > .accordion__item > .accordion-header {
  border-bottom: 1px solid transparent;
}

.accordion__item > .accordion-header:after {
  content: "\f3d0";
  font-family: IonIcons;
  font-size: 1.2em;
  float: right;
  position: relative;
  top: -2px;
  transition: .3s all;
  transform: rotate(0deg);
}

.accordion__item.active > .accordion-header:after {
  transform: rotate(-180deg);
}

.accordion__item.active .accordion-header {
  background: #2D3D99;
}

.accordion__item .accordion__item .accordion-header {
  background: #f1f1f1;
  color: #353535;
}
  
  .accordion {
    width: 100%;
  }

/* LIST_INTERESTING HEADERS */

inh{
  font-weight: bold;
  text-decoration: underline;}


/* TOOLTIP FOR REDACTED NAMES */

.inline {
  display:inline-block;
  position: relative;
  background-color: black;
  color: #aca09f;
}
.inline .content {
  display: none;
  position: fixed;
  top: 40vh;
  left: 28vw;
  z-index: 99999;
  border: dotted 2px firebrick;
  color: dimgrey;
  font-family: sans-serif;
  font-size: 9pt;
  width: 42vw;
  padding-top: 2vh;
  padding-left: 2vw;
  padding-right: 2vw;
  background-color: white;
}
.inline:hover .content {
  display: block;
}\


/* DEPRECATED but retained here in case I missed an instance: Sizes and Styling of the INCLUDES (KEY FACTS, SNAPSHOT, and SOURCES CITED) */
.keyfacts{
  height: 25px;
  width: 100px;}
.snapshot{
  height: 18px;
  width: 70px;}
.sourcescited{
  height: 16px;
  width: 200px;}