html > * {
	font: 16px/1.4 "arial", sans-serif;
}

body {
	color: #4d5051; /*mid grey*/
	background-color: #d6d6d6;
	background-image: url(top-rept.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	margin: 0px;
}




.page-in {
	background-image: url(bottom-rept.jpg);
	background-repeat: repeat-x;
	background-position: left bottom;
	width: 100%;
	float: left;
}
.page {
	width: calc(100% - 60px); /*1000px;*/
	margin: 0px auto;
}
.main, .header, .header-top, .header-bottom {
	width: calc(100%); /*1000px;*/
	float: left;
}
.content {
	width: calc(100% - 50px); /*940px;*/
	background-color: #FFFFFF; /*white*/
	background-image: url(body-top.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 30px;
	float: left;
	padding: 30px 25px 4px 25px;
}
.row1 {
	width: calc(100%); /*952px;*/
	float: left;
}
.row2 { /* about */
	width: calc(100% - 30px); /*920px;*/
	float: left;
	padding: 15px 15px 15px 15px;
	background: #f5f7ec; /*pale green*/
	border-radius: 15px;
}



.header-top {
	background-image: url(header-top.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 81px;
	height: 80px;
}
.header-top h1 {
	font:50px "Times New Roman", Times, serif;
	color: #FFFFFF; /*white*/
	margin-left: 12%;  /*115px;*/
	margin-top:10px;
}
.header-top h1 span {
	color: #000000; /*black*/
}

.header-top h1 a {
	color: #FFFFFF; /*white*/
	text-decoration:none;
}
.header-top h1 span a {
	color: #000000; /*black*/
	text-decoration:none;
}
.header-bottom {
	background-image: url(header.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 257px;
	height: 257px;
}
.header-bottom h2 {
	font:24px/1.5 Arial, Helvetica, sans-serif;
	color: #FFbb33; /*gold*/
	margin-top: 92px;
	margin-left: 27px;
}
.header-bottom h3 {
	font:19px/1.5 Arial, Helvetica, sans-serif;
	color: #FFbb33; /*gold*/
	margin-top: 0px;
	margin-left: 29px;
}
.header-bottom h5 {
	font:4px/0.1 Arial, Helvetica, sans-serif;
	color: #bb7700; /*dark gold*/
	margin-top: 30px;
	margin-right: 29px;
	text-align: right;
}






.footer {
	width: calc(100% - 48px); /*952px;*/
	line-height: 69px;
	background-image: url(footer.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 92px;
	height: 69px;
	float: left;
	padding: 23px 24px 0px 24px;
}
.footer p {
	font-size: 11px;
	color: #FFFFFF; /*white*/
	float: left;
}
.footer a {
	font-size: 11px;
	color: #FFFFFF; /*white*/
	text-decoration: none;
}
.footer a:hover {
	text-decoration: none;
}



.fambase {
	width: calc(100%x - 80px); /*920px;*/
	padding: 16px; 
	margin: 20px 0px 20px 0px;
}




/*
@media screen and (max-width: 768px) {
  .navbar a {
	font-size: 300%;
  }
}
*/
/*h6 span {
	border-radius: 4px; 
	border:#BBBFB4 solid 1px; 
	padding: 0px; 
	margin-bottom: 1px;
	border:#BBBFB4 solid 1px;
	margin-bottom: 1px;
}
h6 span a {
	font-size: 1rem;
	font-weight: normal;
	float: left;
	color:#406000;
	background-color: #e6e6e6;
	text-align: center;
	text-decoration: none;
	border:#91969a dotted 1px;
	padding: 2px 8px 3px 8px;
}*/
/*h6 span :last-child {
	border-right:none;
}*/






@font-face {
    font-family: 'Astronom';
    src: url('Astronom.ttf');
}

@font-face {
    font-family: 'LiberationMono';
    src: url('LiberationMono.ttf');
}

@font-face {
    font-family: 'GoudyMedieval';
    src: url('GoudyMedieval.ttf');
}

.astro span {
    font-family: 'Astronom', sans-serif;
    }

pre {
    font-family: 'LiberationMono';
	}
	
.goudy span {
    font-family: 'GoudyMedieval';
    letter-spacing: .2rem;
	}


table td {
    padding: 0px 10px 0px 10px;
    }

.align td {
    text-align: center;
    border-bottom: 1px solid #d0d0d0;
    }
.malign td {
    text-align: left;
    border-bottom: 1px solid #d0d0d0;
    padding: 4px 4px 4px 4px;
    }
.terms td {
    text-align: center;
    border-bottom: 1px solid #d0d0d0;
    padding: 4px 2px 4px 2px;
    }


    
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
	padding: 0px;
	margin: 0px;
}

h2, h3, h4, h5, h6 {
	font-weight: bold;
}

h1 {
	font-size: 300%;
}

h2 {
	font-size: 220%;
}

h3 {
	font-size: 170%;
}

h4 {
	font-size: 150%;
}

h5 {
	font-size: 125%;
	margin-top: 15px;
	margin-bottom: 12px;
}

h6 {
	font-size: 115%;
	margin-top: 15px;
	margin-bottom: 12px;
	color: #709030; /*light green*/
}

h4 span, h6 span {
	font-size: 85%;
	color: #80a040; /*very light green*/
}

b {
	opacity: 0.85;
	font-weight: 600;
}

b span {
	font-size: 115%;
	color: #608010; /*green*/
	opacity: 1.0;
}

.title {
	font: 26px Arial, Helvetica, sans-serif;
	color: #608010; /*green  #698919*/
	margin-bottom: 16px;
	font-weight: 500;
}

.title2 {
	font: 20px Arial, Helvetica, sans-serif;
	color: #608010; /*green*/
	margin-bottom: -4px;
}

.title3 {
	font: 60px Arial, Helvetica, sans-serif;
	color: #608010; /*green*/
	margin-bottom: -4px;
}





h3 b, h4 b, h5 b, h6 b {
	color: #80a040; /*very light green*/
	opacity: 1.0;
}

a, h2, h3 p, h4 p {
	color: #496900; /*light green*/
}

a {
	text-decoration: none;
}

a:hover, a:active, a:focus {
	color: #0055B8; /*dark blue*/
}


img.f-flag {
	margin: 15px 0px 15px 15px;
	float: left !important;
	width: 100px; /*10%;*/
}
img.f-left {
	margin: 5px 15px 0px 0px;
}
img.f-right {
	margin: 5px 0px 0px 15px;
}

.f-left {
	float: left !important;
}
.f-right {
	float: right !important;
}

.t-left {
	text-align: left !important;
}

.t-center {
	text-align: center !important;
}
.t-right {
	text-align: right !important;
}
.t-justify {
	text-align:justify !important;
}




ul.list1 {
	margin-top: 2px;
	margin-left: 25px;
	list-style-image: url(bullet.jpg);
}
ul.list1 li {
	padding-top: 2px;
	padding-bottom: 2px;
}


.subtitle {
	font:18px/1.5 Arial, Helvetica, sans-serif;
	color: #171817; /*very dark grey*/
	margin-bottom: 10px;
}
.subtitle span {
	color: #607e00; /*green*/
}


.twocolumns {
	padding:10px;
	column-count: 2;
	column-gap: 16px;
}

.threecolumns {
	padding:10px;
	column-count: 3;
	column-gap: 16px;
}


table {
  border-spacing: 0px;
}



/* pseudo-buttons for navigation */
.more {
	text-align:right;
	margin: 0px 4px 0px 4px !important;
	float:right;
}

.more p {
	margin: 14px 4px 10px 4px !important;
}

.more a {
	border-radius:5px;
	padding: 6px 12px;
	text-decoration:none;
	font-weight:bold;
	border:1px solid #DDD;
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
	color:#406000; /*very dark green*/
	background: linear-gradient(to bottom,  #f8f8f8,  #eee);
}

.more a:hover {
	background: linear-gradient(to bottom,  #fff,  #eee);
	color:#004B96; /*dark blue*/
}

img {
	page-break-inside: avoid  !important;
}

.shadowed {
	box-shadow: 7px 7px 7px -5px  rgba(50, 50, 50, 0.5);
	}
	
.double {
	border: #d0d0d0 double 3px;
	margin-right: 10px;
}

td {
	vertical-align: top;
	text-align: left;
}


hr {
    border:0; 
    border-bottom: #d0d0d0 solid 1px;
    margin-top: 8px;
    margin-bottom: 18px;
    height: 1px;
    width: 100%;
}
.shaded {
	border:none;
	border-bottom: 1px solid #999;
	box-shadow: 0 20px 20px -20px #888;
	margin: -20px auto 20px; 
	height: 50px;
    width: 100%;
}
.leaf  {
    background: url(hr1.png) no-repeat center;
    height: 50px;
    border: none;
    width: 100%;
}
.blank  {
    background: url(blank.gif) no-repeat center;
    height: 6px;
    border: none;
    margin: 0px;
    width: 100%;
}
.h10  {
    height: 10px;
}
.h20  {
    height: 20px;
}
.h30  {
    height: 30px;
}
.h40  {
    height: 40px;
}


/* green header text for boxes */
.rbox h6 {
	color: #709030; /*mid green*/
	padding-bottom:3px;
	margin:0;
	text-align:center;
	font-weight:normal;
}

/* container boxes with outlines, placed center, left or right */
.cbox, .lbox, .rbox, .lboxc, .rboxc, .row, .quote, .infobox {
	background-color: #f8f8f8;
	border: #d0d0d0 solid 1px;
	padding: 4px 4px 4px 4px;
	border-radius: 5px;
}
.cbox p, .lbox p, .rbox p, lboxc p, rboxc p {
	padding: 0px 3px 3px 3px;
}
.cbox img, .lbox img, .rbox img, lboxc img, rboxc img {
	width: 100%;
}
.cbox {
	margin: 20px auto 30px auto;
	overflow: hidden;
	text-align: center;
}
.lbox {
	float: left;
	text-align: left;
}
.rbox {
	float: right;
	text-align: left;
}
.lboxc {
	float: left;
	text-align: center;
}
.rboxc {
	float: right;
	text-align: center;
}



.quote { /* larger green and framed */
	font: 1.1em/1.6 "arial", sans-serif;
	color:#709030;  /*light green*/
	letter-spacing:1px;
	padding:15px 25px 15px 15px;
	}
.quote span { /* very large e.g. for first letter */
	font-size: 2em;
	opacity: 0.8;
	line-height: 1em;
	margin-right: -2px;
	}
.quote p {
	font-size: 0.8em;
	letter-spacing: normal;
	margin-top: 10px;
	color: #4d5051; /*mid grey*/
	}
.quotebox {
	padding: 10px 20px 10px 20px;
	}

.quo { /* for quoting book texts */
	margin: 6px 60px 8px 20px; 
	color: #587810; /*green*/
	}
.quo hr { /* for quoting book texts, low linebreak */
	height: 0px;
	margin-top: 0.5em;
    margin-bottom: 0px;
    border: 0;
    width: auto;
	}

/* image on left side of container, for text on right */
.limg {
	float: left;
	text-align: left;
	vertical-align: top;
	margin-right: 12px;
}

/* image on right side of container, for text on left */
.rimg {
	float: right;
	text-align: left;
	vertical-align: top;
	margin-left: 12px;
}

/* row of images */
.row {
	padding: 4px 0px 4px 1px;
}

/* clear floats after row */
.row::after {
	content: "";
	clear: both;
	display: table;
}


/* containers for rows and columns, with 3px on each side of an item */

.row > * {
	float: left;
	padding-left: 3px;
	padding-right: 0px;
	text-align: center;
}
.col14 {
	width: calc((100% - 26px)/7);
}
.col16 {
	width: calc((100% - 23px)/6);
}
.col20 {
	width: calc((100% - 20px)/5);
}
.col25 {
	width: calc((100% - 17px)/4);
}
.col33 {
	width: calc((100% - 14px)/3);
}
.col50 {
	width: calc((100% - 11px)/2);
}
.col60 {
	width: 60%;
}
.col50text {
	width: calc((100% - 30px)/2);
	text-align: left;
	padding: 0px 8px 0px 0px;
}
.framed {
	border: #d0d0d0 solid 1px;
	border-radius: 5px;
	padding: 2px 2px 6px 2px;
}
.unframed {
	border: none;
}

.framed p {
	padding: 0px 6px 3px 6px;
}




/* navbar container */
.navbar {
	overflow: hidden;
	background-color: #e6e6e6;
	border:#BBBFB4 solid 1px;
	border-radius: 6px;
	padding:0px;
	margin-bottom: 1px;
	/*font-size: 2vw;*/
}

/* last item without vertical bar
.navbar :last-child {
	border-right:none;
} */

/* links inside the navbar */
.navbar a {
	float: left;
	color:#406000; /*very dark green*/
	text-align: center;
	text-decoration: none;
	border-right:#91969a dotted 2px;
	border-bottom:#91969a solid 1px;
}

.navbar hr {
    height:1px;
    width: 100%;
    border:0; 
    border-bottom: #c0c0c0 solid 1px;
    margin-top: 3px;
    margin-bottom: 4px;
}

/* drop container */
.drop {
	float: left;
	overflow: hidden;
	border-right:#91969a dotted 2px;
	border-bottom:#91969a solid 1px;
}

/* font size and padding for all elements but see drop button */
.navbar a, .drop .drop-btn {
	font:inherit;
	/*font-size: max(1em, 12px);*/
	/*font-size: clamp(1.5vw, 1em, 1em);*/
	padding: 4px 10px;
	/*font-size:16px !important;*/
	/*font-size: 4vw;*/
}

/* drop button */
.drop .drop-btn {
	border: none;
	outline: none;
	color:#406000; /*very dark green*/
	background-color: inherit;
	margin:0px; /* Important for vertical align on mobile phones */
	font: inherit; /* Important for vertical align on mobile phones */
}

/* background color for navbar links on hover */
.navbar a:hover, .drop:hover .drop-btn {
	background-color: #709030;
	color: white;
}

/* drop content (hidden by default) */
.drop-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9; /*grey*/
	min-width: 120px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	padding-top: 2px;
	padding-bottom: 6px;
}

/* links inside the drop */
.drop-content a {
	float: none;
	display: block;
	text-align: left;
	border: none;
}

/* no focus ouline for links */
.drop-content a:focus {
	outline: none;
	box-shadow: none;
}

/* drop down the menu on hover */
.drop:hover .drop-content {
	display: block;
}

/* keep menu open when an item is right-clicked */
.drop-content:focus-within {
    display: block;
}

/* highlight a right-clicked menu item */
.drop-content a:focus-within {
    background: #709030;
    color: white; 
}




.b1 {
	float: right;
	margin: 3px 3px 6px 20px;
	padding: 3px 12px;
}
.b0 {
	float: left;
	margin: 6px 20px 0px 0px;
	padding: 3px 12px 6px 12px;
}
.b0:active {
	box-shadow: 7px 7px 7px -5px   #333;
}
.b0, .b1 {
	outline: none;
	background-color:#EEE;
	color:#406000; /*very dark green*/
	box-shadow: 7px 7px 7px -5px  rgba(50, 50, 50, 0.5);
	font: inherit;
	border:1px solid #DDD;
	border-radius:5px;
	background: linear-gradient(to bottom,  #f8f8f8,  #eee);
}

.display-table {
    display: table; 
}
.display-table > div { 
    display: table-row; 
}
.display-table > div > div { 
    display: table-cell;
	border-top: 1px solid #d0d0d0;
}
.table2 > div > div { 
	padding: 3px 4px;
}
.table3 > div > div { 
	border-top: none;
	padding: 3px 7px 3px 0px;
	text-align: center;
}



.noline > div > div {
	border:none;
	padding: 4px;
	vertical-align: top;
}

.forpic > div > div {
	padding: 10px 0px 8px 0px;
	vertical-align: top;
}

.forpic > div > div > img {
    float: left; 
    height: auto; 
    width: 5em; 
    margin: 3px 15px 6px 0px;
}

.forpic2 > div > div {
	padding: 10px 10px 8px 0px;
	vertical-align: top;
}

.forpic2 > div > div > img {
    float: left; 
    height: auto; 
    margin-top: 3px;
}

.fam > div > div {
	padding: 4px 0px 4px 0px;
	border-top: 1px solid #d0d0d0;
}
.fam > div > div:first-child, 
.fam > div > div:last-child {
    padding-left: 15px;
    padding-right: 15px;
    }
.fam > div > div:nth-child(3) {
    padding-left: 3px;
    }

.low  {
    height: 6px;
    margin: 0px 0px 5px 0px;
}

.modal {
	z-index: 99;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.1);
	display: none; /* hide initially*/
	}
.modal-img {
	max-width: 100%;
	cursor: pointer;
	}
.modal-content {
	max-width:100%;
	margin: auto;
	animation: fade 0.3s ease;
	background-color: #f0f0f0;
	border: solid #f0f0f0;
	border-width: 4px 4px 0px 4px;
	border-radius: 5px;
	box-shadow: 15px 15px 15px -5px  rgba(50, 50, 50, 0.5);
	}
@keyframes fade {
	from { opacity: 0; }
	to { opacity: 1; }
	}

@media print {
	body, .page, .main, .page-in, .content, .header.bottom, .header-top, .row, .row1, .row2, .lbox, .rbox, .cbox, #ancestors, .tree {
		background-image: none;
		background: none;
		background-color: white;
		margin: 0px;
	}
	.header,.header-bottom, .header-top, .navbar, .footer, .b1, .b0, .more, .noprint, .row2 {
		display: none;
	}
	.shadowed {
		box-shadow: none;
	}
}

sup {
    line-height: 0;
	}


#form {
   margin-bottom: 20px;
}

#chart {
   width: 100%;
   height: 400px;
}


.ltgreen {
	color: #709030; /*light green*/
}
.green {
	color: #608010; /*green*/
}
.mdgreen {
	color: #597909; /*mid green*/
}
.dkgreen {
	color: #496900; /*dark green #507000*/
}
.vdgreen {
	color: #406000; /*very dark green*/
}
.grey {
	color: #4d5051; /*mid grey*/
}
.dkgrey {
	color: #303030; /*dark grey*/
}
.black {
	color: #000000; /*black*/
}


@media only screen and (max-width: 1000px) {
  navbar {
    font-size: 4vw;
  }
}