@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: ⏵ */


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

/* structural stuff */
#parents, #children, #gparents { display: flex; flex-flow: row nowrap; width: 100%; }
.gparent, .parent, .child, .spouse { display: flex; }
#parents>div, #children>div, #gparents>div { flex: 1; }
#person { text-align: center; margin: 3em; font-size: 130%; }
.children { display: flex; flex-flow: row wrap; clear: both; justify-content: center; }
.child { flex: 1; margin: 0.2em;  }

/* presentation */
.gparent, .parent, .child { text-align: left; border: 1px solid #ccc; margin: .5em; padding: 0.2em; background-color: #D1CAB0; background-color: #F0eee9;border-radius: 4px; font-size: 16px; }


#topMenu {
    font-size: 70%; color: #666; background-color: #eee; text-transform: uppercase; line-height: 2; padding-right: 2em; text-align: center; position: fixed; bottom: 0; width: 100%; background: #dedcd6;
    }
#topMenu span, #topMenu a { margin: 0 1em; color: #666; cursor: pointer; font-weight: normal; color: chocolate; }

#main { padding: 0 2em; }

.name { font-size: 120%; }
.gparent .name { font-size: 110%; }

#children>div { border: 1px solid #ccc; margin: .5em; padding: 0.5em; background-color: #F0eee9;border-radius: 6px; font-size: 16px;}

.child { background-color: #D1CAB0; background-color: white;  flex: 0 12em;  }
.child .name { font-size: 110%; }

.dates, .occ, .showme, .sp, .stop, .adopted { font-size: 80%; }
.stop { background-color: #ddd; padding: 0 1em; border-radius: 5px; text-align: center; margin-top: 5px; }
.detaileddates {
    font-size: 80%;
    color: #666;
	font-style: italic;
    line-height: 1.2;
}

a { color: rgba(183,117,0,1.00); color: #648200; text-decoration: none; font-weight: normal; }
.showme a { font-weight: normal; }

.spouse { text-align: start; margin-left: 1em; padding-bottom: 2em; }
.spouse .data { padding-left: 1em; }

#person img { height: 150px; border-radius: 5px; }
#parents img, #gparents img, .spouse img { height: 80px; margin-right: 0.3em; border-radius: 5px; }
.child img { height: 50px; margin-right: 0.5em; border-radius: 5px; }


#siblings { margin-top: 3em; text-align: center; cursor: pointer; }
.noissue { color:#aaa; margin-top: 2em; }

/*
#banner {
    height: 5em;
    width: 100%;
    background-color: #706B63;
    display: flex;
    align-items: center;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    }
#bannerdates {
  font-size: 70%;
  text-align: center;
    }
#xbanner::before {
  content: '⏳';
  font-size: 4rem;
  padding: 1rem;
}
*/
#banner { height: 10em; width: 100%; background-color: #706B63; display: flex; align-items: center; border-top-left-radius: .5em; border-top-right-radius: .5em; }
#bannerdates { font-size: 53%; text-align: center; }
#pagetitle {
    font-size: 280%;
    margin: auto;
    color: rgb(248, 247, 243);
    line-height: .8;
    max-width: 80%;
    }


#pageicon {
  position: absolute;
  font-size: 4rem;
  padding: 1rem 2rem;
}

#floatingLinksX {
    position: fixed; 
    right: 0; 
    bottom: 0; 
    display:flex;
    flex-direction: row-reverse;
    width: 4rem; 
    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;
    }
#floatingLinks {
    position: fixed; 
    right: 0; 
    top: 0; 
    display:flex;
    flex-direction: column;
    width: 1.6rem; 
    justify-content: space-around;
    background: transparent;
    border-bottom-left-radius: 1rem;
    text-align: center;
    font-size: 1.6rem;
    padding-block: .2rem;
    padding-inline: .4rem;
    height: 6rem;
    line-height: 1.4;
    align-content: center;
    }
#floatingLinks a {
    color: gray;
    margin:0;
    padding: 0;
    }

#setRoot {
    cursor: pointer;
    }





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



/* push the cstatus to bottom of the box */
.data {
    display: flex;
    flex-direction: column;
    }
.data .stop {
    margin-block-start: auto;
    min-height: 3em;
    align-content: center;
    }