/*
:root {
		--backColor: #eeeeee;
		--backFontColor: green;
		--foreColor:  white;
		--foreFontColor:  red;
		--hoverBackColor: yellow;
		--titleColor: magenta;
		--treeLines: cyan;
	}
*/

:root {
		--backColor: #401218;
		--backFontColor: white;
		--foreColor:  white;
		--foreFontColor:  black;
		--hoverBackColor: yellow;
		--titleColor: #d4af37;
	}

td.bBox {
		text-align: center;
		vertical-align: top;
	}

/* This is used for the header on every page.*/

@font-face {
    font-family: "PoorRich";
    /* src: url("brushsci.TTF") format("truetype"); 
	src: url(/gmol-6/pdfFonts/BreitkopfFractur.ttf); 
	brushsci.ttf, PARCHM.ttf work
	fractur and breitkopfFractur do not.*/
	src: url(/gmol-6/pdfFonts/POORICH.ttf);
}

@font-face {
    font-family: "brushScript";
	src: url(/gmol-6/pdfFonts/BRUSHSCI.ttf);
}

@font-face {
    font-family: "parchment";
	src: url(/gmol-6/pdfFonts/PARCHM.ttf);
}

@media print {
td.headerbox {
	height: 40px;
	width: 340px;
	font-size: 24px;
	letter-spacing: 2px;
	border: 3px solid var(--foreFontColor);
	text-align: center;
	vertical-align: middle;
	background-color: none;
	border-collapse: collapse;
	color: var(--foreFontColor);
	/* font-family: Garamond, Times; */
	font-family: PoorRich, Times;
	font-weight: normal;
	}
}	
@media screen {
td.headerbox {
	height: 60px;
	width: 360px;
	font-size: 29px;
	letter-spacing: 2px;
	border: 3px solid var(--backFontColor);
	text-align: center;
	vertical-align: middle;
	background-color: var(--backColor);
	border-collapse: collapse;
	color: var(--backFontColor);
	/* font-family: Garamond, Times; */
	font-family: PoorRich, Times;
	font-weight: normal;
	text-decoration: none;
	}
p.headerboxB {
	font-size: 29px;
	letter-spacing: 2px;
	border: 3px solid var(--backFontColor);
	border-radius: 5px;
	text-align: center;
	vertical-align: middle;
	background-color: var(--backColor);
	border-collapse: collapse;
	color: var(--backFontColor);
	/* font-family: Garamond, Times; */
	font-family: PoorRich, Times;
	font-weight: normal;
	text-decoration: none;
	padding: 4px 4px;
	}
}

/* =========================================================================== */


body.bColor	{
	background-color: var(--backColor);
	}
	
p.bmDate {
		display: inline;
		text-align: left;
		font-size: 11px;
		font-family: Arial;
		font-style: normal;
		color: var(--foreFontColor);
		}
p.bmDate:hover {
		//cursor: pointer;
		//background-color: #8d7424;
		}

p.helpText {
   font-size: 16px;
   font-family: Arial;
   font-style: normal;
   color: var(--foreFontColor);
   display: inline;
}

p.settingsText {
   font-size: 14px;
   font-family: Arial;
   font-style: normal;
   color: var(--foreFontColor);
   display: inline;
}

td.tIdent {
	background: #dddddd;
	text-align: right;
	width: 110px;
	vertical-align: top;
	max-height: 999999px;
}

td.tPlace {
	background: #f4f4f4;
	text-align: left;
	vertical-align: top;
	max-height: 999999px;
}
@media screen {
	p.pName {
		font-size: 17px;
		font-family: Arial;
		font-style: normal;
		color: #0000A0;
		display: inline;
	}
	p.pName:hover {
		background-color: var(--hoverBackColor);
	}
}	
@media print {
	p.pName {
		font-size: 17px;
		font-family: Arial;
		font-style: normal;
		color: var(--foreFontColor);
		display: inline;
	}
}	
p.pNameP {
   font-size: 15px;
   font-family: Arial;
   font-style: normal;
   color: var(--foreFontColor);
   display: inline;
	}

p.yName {
   font-size: 17px;
   font-family: Arial;
   font-style: normal;
   color: var(--titleColor);
   display: inline;
	}
p.yName: hover {
	background-color: var(--titleColor);
	}

p.pName0 {
   font-size: 18px;
   font-family: Arial;
   font-style: normal;
   font-weight: 600;
   color: var(--foreFontColor);
   display: inline;
}

p.pPlace {
   font-size: 14px;
   font-family: Arial;
   font-style: normal;
   color: var(--foreFontColor);
   display: inline;
}
p.pPlaceItalic {
   font-size: 14px;
   font-family: Arial;
   font-style: italic;
   color: var(--foreFontColor);
   display: inline;
}

p.pIdent {
   font-size: 16px;
   font-family: Arial;
   font-style: normal;
   color: var(--foreFontColor);
   display: inline;
}

p.pNote {
   font-size: 10px;
   font-family: Arial;
   font-style: normal;
   color: var(--foreFontColor);
   display: inline;
	}

p.gButton  {
   font-size: 15px;
   font-family: Arial;
   font-style: normal;
   font-decoration: none;
   text-decoration: none;
   color: var(--backFontColor);
   display: inline;
	}
p.gbutton:hover {
	background-color: var(--hoverBackColor);
	color: var(--foreFontColor);
	}
p.gBar  {
   font-size: 15px;
   font-family: Arial;
   font-style: normal;
   font-decoration: none;
   text-decoration: none;
   color: var(--backFontColor);
   display: inline;
	}

p.formHeading  {
   font-size: 17px;
   font-family: Arial;
   font-style: normal;
   font-weight: bold;
   font-decoration: none;
   text-decoration: none;
   color: var(--backFontColor);
   display: inline;
	}

p.yellowHeading  {
   font-size: 22px;
   font-family: Arial;
   font-style: normal;
   font-weight: bold;
   font-decoration: none;
   text-decoration: none;
   //color: #ffffc0;
   color: var(--titleColor);
   display: inline;
	}

p.xButton  {
   font-size: 15px;
   font-family: Arial;
   font-style: normal;
   font-decoration: none;
   text-decoration: none;
   color: var(--foreFontColor);
   display: inline;
	}
p.xButton: hover {
	background-color: var(--titleColor);
	}

p.xBar  {
   font-size: 15px;
   font-family: Arial;
   font-style: normal;
   font-decoration: none;
   text-decoration: none;
   color: var(--foreFontColor);
   display: inline;
	}

p.bName {
		display: inline;
		text-align: left;
		font-size: 13px;
		font-family: Arial;
		font-style: normal;
		font-weight: normal;
		color: #0000A0;
		}
p.bName:hover {
	color: var(--foreFontColor);
	background-color: var(--hoverBackColor);
	
		}

p.blueName {
		display: inline;
		text-align: left;
		font-size: 14px;
		font-family: Arial;
		font-style: normal;
		font-weight: normal;
		color: #0000A0;
		}
p.bluename:hover {
	background-color: #8d7424;
		}

p.bDate {
		display: inline;
		text-align: left;
		font-size: 10px;
		font-family: Arial;
		font-style: normal;
		color: #000000;
		}


.tooltip {
    position: relative;
    display: inline-block;
    //border-bottom: 1px dotted black;
	}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 240px;
    background-color: var(--foreFontColor);
    font-family: Arial;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 12px 12px;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    //right: 105%;
	}

.tooltip:hover .tooltiptext {
    visibility: visible;
	}

.tooltipLeft {
    position: relative;
    display: inline-block;
    //border-bottom: 1px dotted black;
	}

.tooltipLeft .tooltiptextLeft {
    visibility: hidden;
    width: 240px;
    background-color: var(--foreFontColor);
    font-family: Arial;
    color: #fff;
    text-align: right;
    border-radius: 6px;
    padding: 12px 12px;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
	}

.tooltipLeft:hover .tooltiptextLeft {
    visibility: visible;
	}

/* Makes a dotted line; used in the Low-German-Mennonite alert */
p.LGM {
		display: inline;
		border-bottom: 1px dotted;	
		cursor:pointer;
		font-size: 17px;
	   font-family: Arial;
	   font-style: normal;

}	

.btn-link {
	border:none;
	outline:none;
	background:none;
	cursor:pointer;
	padding:0;
	text-decoration:none;
	font-family: inherit;
	font-size:inherit;
	}

textarea {
		font-size: 17px;
		font-face: courier;
		font-weight: bold;
		margin: 2px 2px;
		cursor: pointer;
		border-width: 2px;
		border-radius: 4px;
		color: var(--foreFontColor);
		background-color:#eeeeee;
	}
	
textarea:hover{
		border-color: red;
		background-color:#ffffff;
	}
	
input[type=number]:hover {
		border-color: red;
		background-color:#ffffff;
	}
	
input[type=number] {
		background-color: #eeeeee;
		border-width: 2px;
		border-radius: 4px;
		color: var(--foreFontColor);
		padding: 0 0 0 0;
		text-align: left;
		display: inline;
		font-family: courier;
		font-weight: 600;
		font-size: 17px;
		margin: 2px 2px;
		cursor: pointer;
		//width: 100px;
	}

input[type=text]:hover {
		border-color: red;
		background-color:#ffffff;
	}
	
input[type=text] {
		background-color: #eeeeee;
		border-width: 2px;
		border-radius: 4px;
		color: var(--foreFontColor);
		padding: 0 0 0 0;
		text-align: left;
		display: inline;
		font-family: courier;
		font-weight: 600;
		font-size: 17px;
		margin: 2px 2px;
		cursor: pointer;
		//width: 100px;
	}
	
input[type=password] {
		background-color: #eeeeee;
		border-width: 2px;
		border-radius: 4px;
		color: var(--foreFontColor);
		padding: 0 0 0 0;
		text-align: left;
		display: inline;
		font-family: courier;
		font-weight: 600;
		font-size: 17px;
		margin: 2px 2px;
		cursor: pointer;
		//width: 100px;
	}
	
input[type=password]:hover {
		border-color: red;
		background-color:#ffffff;
	}
	
input[type=checkbox] {
		padding: 20 20 0 0;
		display: inline;
		height: 16px;
		width: 16px;
		//margin: 2px 2px;
		cursor: pointer;
	}

input[type=radio] {
	//color: green;
	padding: 20 20 0 0;
	display: inline;
	height: 20px;
	width: 20px;
	cursor: pointer;
	}
	
input[type=radio]:hover {
	border-color: red;
	background-color:#ffffff;
	}

.boxBs	{
	/* used exclusively in showIndividualList form-radio
	showing search parameters. */
		border-width: 2px;
		border-radius: 4px;
		background-color: #f0f0f0;
		color: #000020;
		padding: 0 0 0 0;
		text-align: left;
		display: inline;
		font-family: courier;
		font-weight: 600;
		font-size: 14px;
		margin: 2px 2px;
		cursor: pointer;
		//width: 100px;
	}

.buttonB {
		border-color: var(--titleColor);
		background-color: var(--backColor);
		margin: 4px 4px 4px 4px;
		border-width: 2px 2px 2px 2px;
		//border-style: ridge;
		color: var(--titleColor);
		padding: 5px 9px 5px 9px;
		text-align: center;
		display: inline;
		font-family: Arial;
		font-weight: bold;
		font-size: 16px;
		cursor: pointer;
	}

	.buttonB:hover{
		border-color: var(--titleColor);
		margin: 2px 2px 2px 2px;
		border-width: 4px 4px 4px 4px;
		color: var(--backFontColor);
	}
	
	
	.buttonMobile {
		background-color: var--backColor;
		border-width: 2px;
		border-radius: 4px;
		color: var(--backFontColor);
		padding: 5px 8px 5px 8px;
		display: inline-block;
		text-align: center;
		font-family: Arial;
		font-weight: bold;
		font-size: 24px;
		margin: 3px 3px;
		cursor: pointer;
		width: 180px;
	}

.styled-select {
	position: relative;

	}

.styled-select select {
	font-size: 14px;
	font-family: courier;
	font-weight: 600;
	padding: 4px;
	width: 130px;
	background-color:#e8e8e8;
	}
	
	
.styled-select select:hover{
		border-color: var--backColor;
		background-color:#ffffff;
	}

.s-select {
	border-width: 2px;	
	border-radius: 4px;
	font-size: 14px;
	font-family: courier;
	font-weight: 600;
	padding: 2px;
	background-color:#e8e8e8;
	display:inline;
	position: relative;
	}
	
.s-select: hover {
		border-color: var--backColor;
		background-color:#ffffff;
	}
	

ul {
	list-style-type: square;
	padding: 1px;
	margin-left: 15px;
	}

.form-radio	{
     -webkit-appearance: none;
     -moz-appearance: none;
     //appearance: none;
     display: inline-block;
     position: relative;
     background-color: #717171;
     //color: #123;
     top: 8px;
     //height: 10px;
     //width: 10px;
     //border-width: 2px;
     //border-color: blue;
     border-radius: 12px;
     cursor: pointer;     
     //margin-right: 7px;
     outline: none;
	}
.form-radio:hover	{
     //background-color: #f707f7;
     outline: red solid 1px;

	}
.form-radio:checked	{
     background-color: #ffff80;
	}

@media screen {

p.tFoot {
   font-size: 11px;
   font-family: Arial;
   font-style: normal;
   font-decoration: none;
   text-decoration: none;
   color: var(--backFontColor);
   display: inline;
	}

p.tFootL {
   font-size: 11px;
   font-family: Arial;
   font-style: normal;
   font-decoration: none;
   text-decoration: none;
   color: var(--backFontColor);
   display: inline;
}

p.tFootL:hover {
	font-size: 12px;
	color: var(--foreFontColor);
	background-color: var(--hoverBackColor);
	}
}

@media print {

p.tFoot {
   font-size: 11px;
   font-family: Arial;
   font-style: normal;
   font-decoration: none;
   text-decoration: none;
   color: var(--foreFontColor);
   display: inline;
	}

p.tFootL {
   font-size: 11px;
   font-family: Arial;
   font-style: normal;
   font-decoration: none;
   text-decoration: none;
   color: var(--foreFontColor);
   display: inline;
	}
}

/* dpFootL applies to individualProfile.asp and individualNotes.asp */
@media screen {
p.dpFootL {
   font-size: 14px;
   font-family: Arial;
	border-bottom: 1px dotted;	
   font-style: normal;
   text-decoration: none;
   color: var(--foreFontColor);
   display: inline;
   max-height: 999999px;
		}
p.dpFootL:hover {
	background-color: yellow;
	}
}
@media print {
p.dpFootL {
   font-size: 14px;
   font-family: Arial;
	//border-bottom: 1px dotted;	
   font-style: normal;
   font-decoration: none;
   text-decoration: none;
   color: var(--foreFontColor);
   display: inline;
   max-height: 999999px;
	}
}
/* This section for the Interactive Tree */

table {
	max-width: 1050px;
	}
	
td.tMember {	
	background-color: white;
	border: 1px solid black;
	padding: 2px;
	border-radius: 5px;
	}
td.tBlank {
	color: yellow;
	}
td.tUp {
	border-left: 3px solid var(--treeLines);
	color: yellow;
	}
/* Used only in interactivetree.asp */	
td.tUpRight {
	border-left: 3px solid var(--treeLines);
	border-top: 3px solid var(--treeLines);
	border-top-left-radius: 10px;
	}
td.tDownRight {
	border-bottom: 3px solid var(--treeLines);
	border-left: 3px solid var(--treeLines);
	border-bottom-left-radius: 10px;
	background-color: none;
	}
/* Used only in interactivetree.asp */	
td.tTop {
	border-top: 3px solid var(--treeLines);
	color: yellow;
	}
/* Used only in interactivetree.asp */	
td.tS {
	border: none;
	}

td.tdA0 {
		//border: 1px solid red;
	}	
/* Used only in interactivetree.asp */	
td.tdB {
		border: 1px solid red;
	}
	
@media screen and (max-width: 940px) {
	td.tdA0 {
		display: none;
	}		
	td.tdB {
		display: none;
	}