@font-face {
    font-family: 'TriangleWF';
    src: url('fonts/notosanssymbols2-regular-webfont_triangle.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
	} /* contains only one character: ⏵ */
/*@font-face {
    font-family: 'ralewaywf';
    src: url('fonts/raleway-regular-webfont.woff2');
    font-weight: normal;
    font-style: normal;
	}
@font-face {
    font-family: 'ralewaywf';
    src: url('fonts/raleway-italic-webfont.woff2');
    font-weight: normal;
    font-style: italic;
	}
@font-face {
    font-family: 'ralewaywf';
    src: url('fonts/raleway-bold-webfont.woff2');
    font-weight: bold;
    font-style: normal;
	}
*/




/*body { font: 19.5px/1.45 "Source Sans Pro","Helvetica Neue",Arial,sans-serif; -moz-osx-font-smoothing: grayscale;  margin: 0; background-color: #dedcd6;  } */
/*body { font: 16.5px/1.45 "Source Sans Pro","Helvetica Neue",Arial, TriangleWF, sans-serif; -moz-osx-font-smoothing: grayscale;  margin: 0; background-color: #dedcd6;  } */
body { font: 15px/1.45 "Helvetica Neue", Helvetica, Arial, TriangleWF, sans-serif; -moz-osx-font-smoothing: grayscale;  margin: 0; background-color: #dedcd6;  } 

#summaryIn { display: none; }
#main { background-color: #f8f7f3; }
#topMenu { 
    font-size: 80%; color: #666; background-color: #dedcd6; text-transform: uppercase; line-height: 2; padding-left: 1em; text-align: start; position: fixed; bottom: 0; width: 100%;
    text-align: center;
    }
#topMenu span, #topMenu a { 
    margin: 0 1em; color: #666; cursor: pointer;
    color: chocolate;
    font-family: raleway, arial, sans-serif;
    color: brown;
    }
#banner { height: 10em; width: 100%; background-color: #706B63; display: flex; align-items: center; /*border-top-left-radius: .5em;*/ border-top-right-radius: .5em; }
#top { font-size: 80%; line-height: 2; }
#pagetitle { 
    font-size: 280%; margin: auto; color: rgb(248, 247, 243); line-height: .8; max-width: 80%;
    margin-inline-start: 10rem;
    }
#bannerdates { font-size: 53%; text-align: center; }
#subbanner { background-color: #D1CAB0; min-height: 2.5em; text-align: center; text-transform: uppercase; color: rgb(83, 77, 70); font-size: 90%; display: flex; align-items: center; }
#subbanner div { margin: auto; max-width: 80%; }
#subsubbanner, #subsubsubbanner { background-color: #dedcd6; border-bottom: 1px solid #ddd; text-align: center; text-transform: uppercase; color: rgb(83, 77, 70); font-size: 90%; display: flex; align-items: center; padding: 0.5em; }
#subsubsubbanner { background-color: #f8f7f3; }
#subsubsubbanner span { white-space: nowrap; }
#subsubbanner div, #subsubsubbanner div { margin: auto; max-width: 80%; }
#in { display: none; }
#summary { font-size: 120%; }
.dateAndRecord { display: flex; flex-flow: row nowrap; }

.titleEtc { width: 25%; padding-right: 1em; display:flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: flex-start; }
.figure .titleEtc, .background .titleEtc { display: none; }
.record .recordTitle { color: #706b63; color: #648200; font-size: 110%; font-weight: 400; margin-bottom: 0; line-height: 1.3; flex: 1; }
.record .recordTitleAge { font-size: 4em; line-height: .6;color: blanchedalmond; color: #FFDEAF; text-align:right; vertical-align:top; padding-bottom: 10px; flex: 1; }
.event .recordTitleAge, .familydeath .recordTitleAge { color: #FFDEAF; }

.record { flex: 6; background-color: #fff; /*border: 1px solid #ccc;*/ border-radius: 5px; margin: .2em .7em; padding: .8em; display: flex; }
.record p { margin: 0 0.5em 0.5em 0; }
.titleEtc p { padding: 0; margin:0; }
.record p:last-of-type { margin: 0; padding: 0; }
.recordDate { height: 50px; width: 60px; border-radius: 50%; background-color: #A398BC; background-color: #60527E; background-color: #C7C4BA; text-align:center; color: white; font-size: 1em; margin: 1em; font-weight:normal; }
.recordDate { display: flex; align-items: center; align-content: center; font-size: 115%; }
.recordDate span { width: 100%; }
/*.recordDate { display: flex; flex-flow: column nowrap; align-items: center; line-height: .9; }
.recordDate span:first-of-type { font-size: 140%; margin-top:5px; }*/
.recordDateAge { display: none; }


.other { background-color: #F0eee9; background-color: #f8f7f3; }
summary { font-size: 90%; text-align: start; cursor: pointer; }
details pre { font-size: 80%; white-space: pre-wrap; }
textarea { width: 90%; height: 100px; }
.marriage { border-color: red; border-width: 2px; border-left: 3px solid red; }
.death { border-color: black; border-width: 2px; border-left: 3px solid black; }
.familydeath { border-color: black; border-width: 1px; background-color: #F0eee9; border-left: 3px solid black; }
.footnotes { font-size: 80%; margin-top: 1em; }
.footnotes p { margin-top: 1em; }
.footnotes ol { margin-top: 0; margin-bottom: 0; }
.commentaryIcon { margin-top: 0; float: right; cursor: pointer; margin-inline-start: 1rem; margin-inline-end: .5rem; }
a { color: rgba(183,117,0,1.00); color: #648200; text-decoration: none; }
.descriptionText a {
      color: chocolate;
    }
#places { background-color: #dedcd6; color: rgb(83, 77, 70); font-size: 80%; padding: 0.5em 3em;  margin-top: 3em; margin-bottom: 2em; }
#places p { margin: .3em 0; }
.portrait { max-height: 200px; float: left; margin: 0 1em 1em 0; border-radius: 5px; height: 180px; }
q { font-style: italic; }
.record p.floatedIcons { margin: .5em 0 0 0; }

pre img { vertical-align: bottom; margin: 5px 5px 5px 0; }
.recordTitle::first-letter { text-transform: capitalize; }
.event { background-color:rgba(251,242,224,1.00); }
/* .floatedIcons img { vertical-align: middle; height: 0.7em; white-space:nowrap; } */
.floatedIcons img { vertical-align: middle; height: 1em; }
.recordTitle span { white-space:nowrap; }


.figure { background-color: #f8f7f3; border: 0; }
.figure details { display: none; }
figure { text-align: center; margin:0; margin-inline-start: -32%; }
.descriptionText figure { margin: 0; }
figure img { max-height: 400px; max-width: 100%; border: 3px solid gray; }
figcaption { font-style: italic; text-align: center; }
.treeLink { border-bottom: 2px dotted #ccc; }

.keypoints {
    font-size: .8rem;
    width: 12%;
    margin: 1em 0 0 0;
    clear: both;
	text-align: start;
    }
/*.keypoints .occ { text-transform:capitalize; }*/
.keypoints .occ:first-letter {
    text-transform: uppercase;
	}
.keypoints .occ {
    margin-block-end: .5em;
    font-size: 1.2em;
    }
.keypoints .place {
    color: brown;
    margin-block-end: .5em;
    }
.keypoints .place img {
    height: 1em;
    vertical-align: text-top;
    }
.floatedIcons {
    font-size: 1rem;
    }
.floatedIconText {
    font-size: .7rem;
    margin-block: .25rem;
    margin-inline-start: 1.4rem;
    text-indent: -1.4rem;
    line-height: 1.4;
    clear: both;
    }

#links { display: none; }
.detaillink { font-size:70%; margin-left: 1em; }
code, samp { font-size: 80%; }


.descriptionText { width: 70%; }
.figure .descriptionText, .background .descriptionText { width: 100%; }
details { padding-left: 0.5em; }
details[open] { width: 100%; word-break: break-all; }
summary { margin-right: 0; text-align: left;}


section .recordTitle { color: #648200; font-size: 110%; font-weight: 400; margin-bottom: 0; line-height: 1.3; flex: 1; }
section { background-color: #fff; border: 1px solid #ccc; border-radius: 5px; margin: 1em .7em; padding: .8em; }
/*section { background-color: #fff; border-top: 1px solid #ccc; margin: 1em .7em; padding: .8em; }*/
section:last-of-type { margin-top: 0; }
section p { margin: 0 0.5em 0.5em 0; padding: 0; }
section p:last-of-type { margin: 0; padding: 0; }

article {
    background-color: #f8f7f3;
    margin: 0;
    padding: 1em 2em;
}

#updates { float: right; color: brown; font-size: 70%; }
#places .updateTitle { margin-top: 1em; }
.floatedIcons {
    margin: 0;
}


.noteTextBox {
    width: 40rem;
    height: 8rem;
    }
.tallPasteBox {
    height: 12rem;
    width: 30rem;
    }
.mediumPasteBox {
    height: 5rem;
    width: 30rem;
    }
.wideInputBox {
    width: 30rem;
    }
.halfInputBox {
    width: 14.5rem;
    }
.sourceBox {
    width: 14.5rem;
    }
.imageBox {
    width: 24rem;
    }
.extBox {
    width: 5rem;
    }
.textBox {
    width: 30rem;
    }
.wideTextArea {
    width: 30rem;
    height: 6rem;
    }

#floatingLinksX {
    position: fixed; 
    right: -1rem; 
    bottom: 3rem; 
    display:flex;
    flex-direction: row-reverse;
    width: 14rem; 
    justify-content: space-around;
    background: silver;
    border-radius: 1rem;
    text-align: center;
    font-size: 2rem;
    padding: .2rem;
    height: 2.8rem;
    line-height: 1.4;
    align-content: center;
    }
#floatingLinksY {
    position: fixed; 
    right: 0; 
    bottom: 0; 
    display:flex;
    flex-direction: row;
    width: 14rem; 
    justify-content: space-around;
    background: #dedcd6;
    border-top-left-radius: 1rem;
    text-align: center;
    font-size: 1.6rem;
    padding: .2rem;
    padding-inline-start: 1rem;
    height: 2rem;
    line-height: 1.4;
    align-content: center;
    }
#out {
    margin-inline-end: 3rem;
    }
#floatingLinks {
    position: fixed; 
    right: 0; 
    top: 0;
    height: 10rem;
    width: 3rem;
    margin-block-start: 3rem;
    display:flex;
    flex-direction: column;
    /*justify-content: space-around;*/
    text-align: center;
    font-size: 1.8rem;
    align-items: center;
    line-height: 4rem;
    z-index: 1000;
    }
#floatingLinks a {
    color: forestgreen;
    margin:0;
    padding: 0;
    background: #dedcd6;
    border-radius: 1rem;
    display: inline-block;
    height: 4rem;
    }
/*#floatingLinks a:hover {
    font-size: 5rem;
    display: flex;
    align-items: flex-end;
    width: 6rem;
    text-align: center;
    }
*/

.personRow {
    line-height: 1.6;
    /*clear: both;*/
    }
.personRow:hover {
    background-color: #eee;
    }

#networkList {
    margin-block: 1rem;
    }
.ageTag {
    color: grey;
    font-size: 70%;
    margin-inline-start: .2rem;
    }

.noteIntro {
    font-family: serif;
    font-style: italic;
    line-height: 1.2;
    font-size: .9rem;
    }
.obitIntro {
    font-family: serif;
    font-style: italic;
    line-height: 1.2;
    }


#summaryWin {
    display: none;
    font-size: .9rem;
    position: fixed;
    
    
    background-color: white;
    margin: auto;
    padding: 2em;
    border: 1px solid rgb(204, 204, 204);
    /* border-radius: 1em;*/
    max-width: 70%;
    max-height: 80vh;
    /* bottom: 2em; 
    left: .5rem; */
    box-shadow: gray 10px 5px 5px;
    overflow-y: auto;
    scrollbar-color: tan transparent;
    scrollbar-width: thin;
    z-index: 1000;

    border-top-right-radius: .25em;
    border-top-left-radius: .25em;
    /*left: 30%;
    right: 18%;
    bottom: 2.5rem;*/
    }

#summaryWin::-webkit-scrollbar-thumb {
    background: #000;
    }
/*.summaryClose {
    background-color:#eee; color:darkgray; font-size: 1.4em; padding: .5em; border:0; border-radius: 1em; float: right;
    }*/
.summaryClose {
    color:#ccc; background-color: transparent; font-size: 2em; border:0; /*float: right;*/ cursor: pointer; text-align: end;
    }
#summaryBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  z-index: 999;
}

#summaryWin {
  position: fixed;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 6px;
  max-width: 80%;
  max-height: 80vh;
  overflow-y: auto;
  display: none;
  z-index: 1000;
  width: 60%;
}


/* PLACES --------------- */
#places {}
#places details {
    /*font-size:1.2em;
    color: #648200;*/
    text-transform:none;
    margin-block:2rem;
    }
#places summary {
    color:chocolate;
    font-size:1rem;
    text-transform: uppercase;
    }
.placesRecord {
    margin-inline-end: 2rem; 
    white-space:nowrap;
    }
#places img {
    vertical-align:baseline;
    height:.8em;
    }



#copyNotice, #characterMarkup, #helpMessage {
    position: fixed;
    top: 40%;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 1rem;
    z-index: 10000;
}
#helpMessage {
    top: 20%;
    }



.rootConnected a { color: chocolate; }



#allSiblings a {
    font-size: .8rem;
    text-transform: uppercase;
    }
#allSiblings ul {
    margin: 0;
    padding: 0;
    margin-block-end: .9rem;
    }
#allSiblings li {
    margin: 0;
    margin-inline: 1rem;
    margin-block: .4rem;
    padding: 0;
    line-height: 1.2;
    }




#summaryWin i {
    font-size: 80%;
    font-style: normal;
    color: darkgray;
    }



#allSiblings ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
#allSiblings img {
    margin-inline-start: -1.3em;
    }


/*.record div.censusSummary {
    font-size:78%;
    color:gray;
    
    
    margin-inline-start: -37%;
    margin-block-start: 4rem;
    width: 30%;
    float: inline-start;

    }

.record div.censusSummary p {
    margin-block: 0.5em;
    line-height: 1.4;
    }
*/

.record div.censusSummary {
    color: darkgray;
    font-size: 90%;
    line-height: 1;
    margin-block-end: 1em;
    }
.record div.censusSummary img {
    height: 1.5em;
    vertical-align: middle;
    }


section.life_context {
    margin-inline-start: 0;
    }
.life_context p {
    white-space: normal;
    word-break: normal;
    }
.life_context details summary {
    cursor: pointer;
    }
.life_context .byline {
    font-size: small;
    font-style: italic;
    }


button {
    font-size: 80%;
    border-radius: .25em;
    border: 1px solid #648200;
    background: #648200;
    color: white;
    cursor: pointer;
    }

button {
    cursor: pointer;
    background-color: teal;
    background-color: #648200;
    opacity: 60%;
    color: white;
    border-radius: 5px;
    background-color: saddlebrown;
    color: white;
}


.life_summary {
    min-height: 9rem;
    font-size: 1.1rem;
    }

.propagateButton {
    font-size:1.5rem; display: inline-block; margin-block:1.5rem; background:antiquewhite;
    }


#summaryToggle {
    font-size: 1.1rem;
    color: #648200;
    cursor: pointer;
    }
#summaryToggle input {
    display: none;
    }
#summaryToggle input[type="radio"]:checked + span {
  font-weight: bold;
}


#lifeSummaryTable { }
#lifeSummaryTable td {
    vertical-align: top;
    padding-inline: 1em;
    text-transform: capitalize;
    }



#helpPopup {
    position: absolute;
    display: none;
    max-width: 260px;
    padding: 0.6em 0.8em;
    background: #333;
    color: #fff;
    border-radius: 0.4em;
    font-size: 0.85em;
    z-index: 9999;
    pointer-events: none;
    /*opacity: 0;
    transition: opacity 0.18s ease-out;*/
    }

.listTable tr:hover {
	background-color: #f0f6ff;
    }
.listTable th {
	text-align: start;
    min-width: 3rem;
    }
.list_age {
    color: #FFDEAF;
    font-size: 1.4em;
    background: gray;
    padding-block: 0;
    padding-inline: 0.25em;
    text-align: center;
    border-radius: 0.5em;
    vertical-align: middle;
    margin-inline-end: .5rem;
    display: inline-block;
    min-width: 1.5em;
    }
.life_summary .list_age a {
    color: #FFDEAF;
    }


.listTable td {
    vertical-align: top;
    padding-inline: .5em;
    }

#summaryToggle {
    font-variant: all-petite-caps;
    }

#summaryToggle p {
    margin-block: .25rem;
    font-size: 90%;
    line-height: 1.2;
    }
#summaryToggle input[checked] {
    font-weight: bold;
    font-variant: small-caps;
    }



.life_summary a {
    color: chocolate;
    }
#location_summary {
    font-size: 100%;
    color: #648200;
    cursor: pointer;
    margin-block: 1rem;
    border: 1px solid lightgray;
    padding: .5em;
    border-radius: .5rem;
    width: 7.5rem;
    margin-inline-start: -.3rem;
    margin-block-start: .2rem;
    margin-block-end: 2rem;
    }
#location_summary img {
    height: 1rem;
    vertical-align: baseline;
    margin-inline-start: -1.6rem;
    float: inline-start;
    }


.life_summary strong {
    color: firebrick;
    color: chocolate;
    font-weight: normal;
    }

.namedInProbate {
    font-size: small;
    }