/* used for enterSearchParameters */
table.tbl0 {
	border: none;
	/* background-color: var(--backColor); */
	background-color: transparent;
	}

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

/* use for alternating background colors in a table */
tr.rowA {
	background-color: var(--backColor);
	}
tr.rowB {
	background-color: var(--mdBackColor);
	}

/* This font is used for the header on every page.*/
@font-face {
    font-family: "PoorRich";
	src: url(/gmol-7/pdfFonts/POORICH.ttf);
}

/* define other fonts */
@font-face {
    font-family: "brushScript";
	src: url(/gmol-7/pdfFonts/BRUSHSCI.ttf);
}

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

@font-face {
    font-family: "ErasL";
	src: url(/gmol-7/pdfFonts/ERASLGHT.ttf);
}
@font-face {
    font-family: "OpenSans";
	src: url(/gmol-7/pdfFonts/OpenSans-Regular.ttf);
}
@font-face {
    font-family: "Noto_Sans";
	src: url(/gmol-7/pdfFonts/Noto_Sans/NotoSans-Regular.ttf);
}

/* span.gmol is used for "GRanDMA OnLine" text */
span.gmol	{
	font-family: poorRich;
	display: inline;
	color: inherit;
	font-size: inherit;
	font-size: 115%;
	}	
/* used for "Brother's Keeper" */	
span.bk {
	font-size: 105%;
	color:inherit;
	}
/* used for the GRanDMA database */	
span.gmdb {
	font-size: 105%;
	font-style: italic;
	color:inherit;
	}

/* used on login page. */
.goldLink {
	border: none;
	outline:none;
	background:none;
	padding: 7px;
	cursor:pointer;
	//text-decoration:none;
	font-family: var(--fontName) ;
	font-size: var(--text18);
	color: var(--backFontColor);
	}
.goldLink:hover {
	border: 2px solid  var(--backFontColor);
	padding: 5px;
	}	

@media screen {
td.headerbox {
	/* width: 360px; */
	border: 3px solid var(--backFontColor); 
	border-radius: 8px;
	background-color: var(--mdBackColor);
	vertical-align: middle;
	padding: 4px;
	}
/* for the words GRanDMA Online */	
p.headerboxB {
	font-size: 29px;	//was 30 px  10/25/23
	letter-spacing: 2px;
	text-align: center;
	//background-color: transparent;
	color: var(--backFontColor); 
	font-family: PoorRich; 
	text-shadow: 4px 2px 5px var(--backFontColorS);
	display: inline;
	}
/* for the words "Prussian/Russian Mennonite Genealogy" */	
p.headerBoxC {
	font-size: var(--text10);
	//background-color: transparent;
	font-family: Montserrat; //var(--fontName);
	color: var(--backFontColor);
	text-shadow: 4px 2px 5px var(--backFontColorS);
	text-align: center;
	display: inline;
	}	
}

@media print {
td.headerbox {
	/* width: 360px; */
	border: 3px solid black; 
	border-radius: 5px;
	border-collapse: collapse;
	background-color: none;
	vertical-align: middle;
	padding: 4px;
	}
/* headerboxb is for the "GRanDMA OnLine 7" as a logo. */	
p.headerboxB {
	font-size: 24px;
	letter-spacing: 2px;
	text-align: center;
	background-color: transparent;
	color: black; 
	font-family: PoorRich; 
	display: inline;
	}
p.headerBoxC {
	font-size: 9px;
	background-color: transparent;
	font-family: var(--fontName);
	color: black;
	text-align: center;
	background-color: none;
	display: inline;
	}	

body.bcolor	{ 
	background-color: transparent; 
	font-family: var(--fontName);	
	}

}

@media screen {
body.bColor	{ 
	background-color: var(--backColor); 
	font-family: var(--fontName);
	}
}

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

/* next section applies mostly to FAQs for collapsible text.
	also, span.gm is for the grandma online text. */

p.h2 {
	font-family: var(--fontName);
	font-size:  var(--text16);
	}

/* used only in vsSelect.asp */
p.hText {
	color: black;
	display: inline;
	font-size: 14px;
	}	

/* unused? */
table.mdTable {
	backgroundColor: var(--mdBackColor);
	}

td.mdTable {
	backgroundColor: var(--mdBackColor);
	}

table.stdTable {
	border: none;
	background-color: var(--foreColor);
	padding: 0;
	}

p.helpText {
   font-size: var(--text14);
   font-family: var(--fontName);
   font-style: normal;
   color: var(--foreFontColor);
   display: inline;
   line-height: 1.4;
}

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

/* used for the top of the individual profile */
td.tIdent {
	background: #dddddd;
	text-align: right;
	max-width: 110px;
	vertical-align: top;
	max-height: 999999px;
}

td.tPlace {
	background: var(--foreColor);
	text-align: left;
	vertical-align: top;
	max-height: 999999px;
}
@media screen {
	p.pName {
		font-size: var(--text16);
		font-family: var(--fontName);
		font-style: normal;
		color: #0000A0;
		display: inline;
	}
	p.pName:hover {
		background-color: var(--hoverBackColor);
	}


a.aMod:link, a.aMod:visited {
			text-decoration: none;
			border-bottom: 1px dotted var(--backFontColor);
			color: var(--backfontcolor);
			display: inline;
		}
a.aMod:hover {
		text-decoration: none;
		background-color: Yellow;
		color: darkRed;
		border:none;
		}

}	
@media print {
	p.pName {
		font-size: var(--text16);
		font-family: var(--fontName);
		font-style: normal;
		color: black;
		display: inline;
	}
}	

a.aMod:link, a.aMod:visited {
			text-decoration: none;
			border-bottom: 1px dotted black;
			color: var(--backfontcolor);
			display: inline;
		}
a.aMod:hover {
		text-decoration: none;
		background-color: Yellow;
		color: darkRed;
		border:none;
		}

/* just used in login page. (confirmed 2/24/23) */
p.yName {
   font-size: var(--text16);
   font-family: var(--fontName);
   font-style: normal;
   color: var(--accentColor);
   display: inline;
	}
p.yName: hover {
	background-color: var(--accentColor);
	}

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

p.pPlace {
   font-size: var(--text14);
   font-family: var(--fontName);
   font-style: normal;
   color: var(--foreFontColor);
   display: inline;
   text-decoration: none;
}
p.pPlaceItalic {
   font-size: var(--text14);
   font-family: var(--fontName);
   font-style: italic;
   color: var(--foreFontColor);
   display: inline;
}

p.pIdent {
   font-size: var(--text16);
   font-family: var(--fontName);
   font-style: normal;
   color: black; //var(--foreFontColor);
   display: inline;
}

p.pNote {
   font-size: var(--text10);
   font-family: var(--fontName);
   font-style: normal;
   color: black; //var(--foreFontColor);
   display: inline;
	}

p.gButton  {
   font-size: var(--text14);
   font-family: var(--fontName);
   font-style: normal;
   color: var(--backFontColor);
   display: inline;
	padding: 5px;
	}
p.gButton:hover {
	background-color: yellow;		/*I think in all cases, another hover is taking place.*/
	color: black;
	border-radius: 4px;
	}
	/* Button for Settings, help, etc which appears on the background (and whose color must change with the theme.  */
p.gButtonT  {
   font-size: var(--text14);
   font-family: var(--fontName);
   font-style: normal;
   color: var(--backFontColor);
   display: inline;
   padding-left:5px;
	padding-right:5px;
	padding-top:2px;
	padding-bottom:2px;
   margin-left: 5px;
   margin-right: 5px;
   margin-bottom: 5px;
   border-left: 1px solid var(--backFontColor);
   border-right: 1px solid var(--backFontColor);
   border-bottom: none;	
   border-radius: 5px;
	}
p.gButtonT:hover {
	background-color: yellow;
	color: black;
	display: inline;
	}
p.gButtonT:focus {
	background-color: yellow;
	color: black;
	display: inline;
	}
/* wNote, wNoteD not found */	
p.wNote {
	font-size: var(--text10);
	font-family: var(--fontName);
	color: var(--backFontColor);
	display: inline;
	}
div.wNoteD {
	font-size: var(--text16);
	font-family: var(--fontName);
	color: var(--backFontColor);
	display: inline;
	}
	
/*These classes are for text on background: name of category, content, and linked content. */
@media screen {
	p.gBar  {
		font-size: var(--text14);
		font-family: var(--fontName);
		font-style: normal;
		color: var(--backFontColor);
		display: inline;
		}
	p.formHeading  {
		font-size: var(--text16);
		font-family: var(--fontName);
		font-style: normal;
		font-weight: 700;
		color: var(--backFontColor);
		display: inline;
		}
	p.formPlace  {
		font-size: var(--text14);
		font-family: var(--fontName);
		font-style: normal;
		color: var(--backFontColor);
		display: inline;
		}

	p.rptHdr {
		/* Used for headings on the report charts. */	
		font-size: var(--text10);
		font-family: var(--fontName);
		font-style: normal;
		color: var(--foreFontColor);
		display: inline;
	}
}	
@media print {
	p.formHeading  {
		font-size: var(--text16);
		font-family: var(--fontName);
		font-style: normal;
		font-weight: bold;
		color: black;
		display: inline;
		}
	p.formPlace  {
		font-size: var(--text14);
		font-family: var(--fontName);
		font-style: normal;
		color: black;
		display: inline;
		}
	p.gBar  {
		font-size: var(--text14);
		font-family: var(--fontName);
		font-style: normal;
		color: black;
		display: inline;
		}
}	

	

/* formLink not found */
p.formLink  {
   font-size: var(--text12);
   font-family: var(--fontName);
   font-style: normal;
   color: var(--backFontColor);
   display: inline;
	}
p.formLink:hover{
	color: black;
	background-color: yellow;
	}	

@media screen {
	/*h1 and yellowHeading are identical. As of 10/2024, I am changing
	yellowHeading markups to h1 because Google says h1 is used in indexing. */
	p.yellowHeading  {
	   font-size: var(--text22);
	   font-family: var(--fontName);
	   font-weight: bold;
	   color: var(--accentColor);
	   display: inline;
	}
	h1  {
	   font-size: var(--text22);
	   font-family: var(--fontName);
	   font-weight: bold;
	   color: var(--accentColor);
	   display: inline;
	}
}

@media print {
	p.yellowHeading  {
	   font-size: var(--text20);
	   font-family: var(--fontName);
	   font-weight: bold;
	   color: black;
	   display: inline;
	}
	h1  {
	   font-size: var(--text20);
	   font-family: var(--fontName);
	   font-weight: bold;
	   color: black;
	   display: inline;
	}
}

td.yellowHeadingBox {
	background-color: var(--backColor);
	}

p.xButton  {
   font-size: var(--text14);
   font-family: var(--fontName);
   font-style: normal;
   color: var(--foreFontColor);
   display: inline;
	}
p.xButton: hover {
	background-color: var(--accentColor);
	}

p.xBar  {
   font-size: var(--text13);
   font-family: var(--fontName);
   font-style: normal;
   color: var(--foreFontColor);
   display: inline;
   vertical-align: bottom;
	}

p.bName {
		display: inline;
		text-align: left;
		font-size: var(--text12);
		font-family: var(--fontName);
		font-style: normal;
		font-weight: normal;
		color: #0000A0;		/* make this link blue */
		}
p.bName:hover {
	color: var(--foreFontColor);
	background-color: var(--hoverBackColor);
	
		}
p.BookMarkHeader {
	font-size: var(--text14);
	font-family: var(--fontName);
	font-weight: bold;
	color: var(--foreFontColor);
	display: inline;
	}

p.blueName {
	display: inline;
	text-align: left;
	font-size: var(--text14);
	font-family: var(--fontName);
	font-style: normal;
	font-weight: normal;
	color: #000080;
	}
p.bluename:hover {
	background-color: var(--hoverBackColor);
		}

p.bmDate {
	display: inline;
	/* text-align: left; */
	font-size: var(--text10);
	font-family: var(--fontName);
	font-style: normal;
	color: var(--foreFontColor);
	}

/* this appears redundant ?? So I disabled it*/
.tooltip {
    position: relative;
    display: inline-block;
    //border-bottom: 1px dotted black;
	}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 240px;
    background-color: var(--foreFontColor);
    font-family: var(--fontName);
    color: var(--foreColor);
	font-size: var(--text12);
    text-align: left;
    border-radius: 6px;
	border: 2px solid var(--foreColor);
    padding: 12px 12px;

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

.tooltip:hover .tooltiptext {
    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: var(--text16);
	   font-family: var(--fontName);
	   font-style: normal;
		;
}	

.btn-link {
	border:none;
	outline:none;
	background:none;
	cursor:pointer;
	padding:0;
	text-decoration:none;
	font-family: var(--fontName);
	font-size:inherit;
	color: inherit;
	display:inline;
	}
.btn-link:hover {
	background-color: yellow;
	color: black;
	display: inline;
	}	

textarea {
		font-size: var(--text16);
		font-face: courier;
		font-weight: bold;
		margin: 2px 2px;
		cursor: pointer;
		border-width: 2px;
		border-radius: 4px;
		color: var(--foreFontColor);
		background-color:var(--inputColor);
	}
	
textarea:hover{
		border-color: red;
		background-color:var(--inputHover);
	}
	
input[type=number]:hover {
		border-color: red;
		background-color: var(--inputHover);
	}
input[type=number]:focus {
		border-color: red;
	}
	
input[type=number] {
		background-color: var(--inputColor);
		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: var(--text16);
		margin: 2px 2px;
		cursor: pointer;
		//width: 100px;
	}

input[type=text]:hover {
		border-color: red;
		background-color: var(--inputHover);
	}

input[type=text]:focus {
		border: 2px solid red;
		border-color: red;
	}
	
input[type=text] {
		background-color: var(--inputColor);
		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: var(--text16);
		margin: 2px 2px;
		cursor: pointer;
		//width: 100px;
	}

input[type=email]:hover {
		border-color: red;
		background-color: var(--inputHover);
	}
	
input[type=email] {
		background-color: var(--inputColor);
		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: var(--text16);
		margin: 2px 2px;
		cursor: pointer;
		//width: 100px;
	}
	
input[type=password] {
		background-color: var(--inputColor);
		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: var(--text16);
		margin: 2px 2px;
		cursor: pointer;
		//width: 100px;
	}
	
input[type=password]:hover {
		border-color: red;
		background-color:var(--inputHover);
	}
	
input[type=checkbox] {
		padding: 20 20 0 0;
		display: inline;
		height: 16px;
		width: 16px;
		//margin: 2px 2px;
		cursor: pointer;
		color: green;
	}
input[type=checkbox]:hover {
	border: 2px solid red;	
	color: red;
	}
input[type=checkbox]:focus {
	border: 2px solid red;	
	color: var(--backFontColor);
	}

input[type=radio] {
	//color: green;
	padding: 20 20 0 0;
	display: inline;
	height: 15px;
	width: 15px;
	cursor: pointer;
	}
	
input[type=radio]:hover {
	border-color: red;
	color: var(--backFontColor);
	}

.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: var(--text14);
		margin: 2px 2px;
		cursor: pointer;
		//width: 100px;
	}

/*  buttonR is used for pdf settings */
	.buttonR {
		background-color: var(--backColor);
		border: 2px solid var(--accentColor);
		border-radius: 5px;
		background-color: #f8f8f8;
		margin: 4px 4px 4px 4px;
		color: black;
		padding: 6px 10px 6px 10px;
		text-align: center;
		//display: inline-block;
		font-family: var(--fontName);
		font-weight: bold;
		font-size: var(--text14);
		cursor: pointer;
		width: 180px;
		height: 50px;
	}
	.buttonR:hover{
		//border: 4px solid var(--accentColor);
		background-color: lightyellow;
		//margin: 2px 2px 2px 2px;
	}
	
.buttonB {
		background-color: var(--mdBackColor); 
		margin: 3px 3px 3px 3px;
		border-width: 2px 2px 2px 2px;
		border-color: var(--accentColor);
		border-radius: 5px;
		color: var(--backFontColor);
		/* padding: 5px 9px 5px 9px; */
		text-align: center;
		display: inline;
		font-family: var(--fontName);
		font-weight: bold;
		font-size: var(--text14);
		cursor: pointer;
		display:inline;
	}

	.buttonB:hover{
		margin: 2px 2px 2px 2px; 
		border-width: 3px 3px 3px 3px;
		background-color: yellow;  
		color: black; 
	}
	
	
	.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: var(--demiFontName);
		font-weight: bold;
		font-size: 24px;
		margin: 3px 3px;
		cursor: pointer;
		width: 180px;
	}

.styled-select {
	position: relative;
	background-color: #f0f0f0;
	}

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

.s-select {
	border-width: 2px;	
	border-radius: 4px;
	font-size: var(--text12);
	font-family: courier;
	font-weight: normal;
	padding: 2px;
	background-color:#f8f8f8;
	display:inline;
	position: relative;
	}
	
.s-select: hover {
		border-color: red;
		background-color:white;
	}
	

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

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

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

@media screen {

p.tFoot {
   font-size: var(--text10);
   font-family: var(--fontName);
   font-style: normal;
   color: var(--backFontColor);
   display: inline;
	}

p.tFootL {
   font-size: var(--text10);
   font-family: var(--fontName);
   font-style: normal;
   color: var(--backFontColor);
   display: inline;
}

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

@media print {

p.tFoot {
   font-size: var(--text10);
   font-family: var(--fontName);
   font-style: normal;
   //font-decoration: none;
   text-decoration: none;
   color: var(--foreFontColor);
   display: inline;
	}

p.tFootL {
   font-size: var(--text10);
   font-family: var(--fontName);
   font-style: normal;
   //font-decoration: none;
   text-decoration: none;
   color: black;
   display: inline;
	}
}

/* dpFootL applies to individualProfile.asp and individualNotes.asp */
@media screen {
p.dpFootL {
   font-size: var(--text14);
   font-family: var(--fontName);
	// border-bottom: 1px dotted;	
   font-style: normal;
   color: var(--foreFontColor);
   display: inline;
   max-height: 999999px;
		}
p.dpFootL:hover {
	background-color: var(--hoverBackColor);
	}
}
@media print {
p.dpFootL {
   font-size: var(--text14);
   font-family: var(--fontName);
	//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: var(--foreColor);
	border: 1px solid black;
	padding: 1px 0px 1px 4px;
	border-radius: 5px;
	line-height: .9;
	}
td.tMemberA {	
	background-color: #e8ffe8;
	border: 1px solid black;
	padding: 1px 0px 1px 4px;
	border-radius: 5px;
	line-height: .9;
	vertical-align: top;
	}
td.tMemberB {	
	background-color: #e0f0ff;
	border: 1px solid black;
	padding: 1px 0px 1px 4px;
	border-radius: 5px;
	line-height: .9;
	vertical-align: top;
	}
td.tMemberC {	
	background-color: #ffffd8;
	border: 1px solid black;
	padding: 1px 0px 1px 4px;
	border-radius: 5px;
	line-height: .9;
	vertical-align: top;
	}
td.tMemberD {	
	background-color: #ffe8d8;
	border: 1px solid black;
	padding: 1px 0px 1px 4px;
	border-radius: 5px;
	line-height: .9;
	vertical-align: top;
	}
	
td.tBlank {
	//color: yellow;
	//border: 1px dotted red;
	}
	
@media screen {
td.tUp {
	border-left: 3px solid var(--treeLines);
	color: yellow;
	}
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;
	}
td.tTop {
	border-top: 3px solid var(--treeLines);
	color: yellow;
	}
}
@media print {
td.tUp {
	border-left: 3px solid black;
	color: yellow;
	}
td.tUpRight {
	border-left: 3px solid black;
	border-top: 3px solid black;
	border-top-left-radius: 10px;
	}
td.tDownRight {
	border-bottom: 3px solid black;
	border-left: 3px solid black;
	border-bottom-left-radius: 10px;
	background-color: none;
	}
td.tTop {
	border-top: 3px solid black;
	color: yellow;
	}
}
/* Used only in interactivetree.asp */	
td.tS {
	border: none;
	}
	
	/*  Used in the interactive tree */
	p.itName {
		display: inline;
		text-align: left;
		font-size: var(--text13);
		font-family: var(--fontName);
		font-style: normal;
		font-weight: normal;
		color: #0000C0;
		}
	p.itName:hover {
		background-color: yellow; 
		padding: 4px;
		}
	p.itNameA {
		display: inline;
		text-align: left;
		font-size: var(--text12);
		font-family: var(--fontName);
		font-style: normal;
		font-weight: normal;
		color: #0000A0;
		}
	p.itNameA:hover {
		background-color: yellow; //<%=oldGold%>;
		padding: 4px;
		}

p.p0 {
   font-size: var(--text12);
   font-family: var(--fontName);
   font-style:  var(--foreFontColor);
   color: black;
   display: inline;
	}

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;
	}
}	

table.rptTable {
	padding:4px;
	border: none;
	}
p.rptHeader {
	font-size: var(--text16);
	font-weight: 600; 
	font-style: italic;
	font-family: var(--fontName);
	color: var(--foreFontColor);	
	display: inline;
}

p.rptHelp  {
/*   font-size: var(--text14);
   font-family: var(--fontName);
   font-style: normal;
   color: var(--foreFontColor);
   display: inline;
 */
	font-size: var(--text14);
   font-family: var(--fontName);
   font-style: normal;
   color: var(--foreFontColor);
   display: inline;
   padding-left:4px;
   padding-right:4px;
   padding-top:2px;
   padding-bottom:2px;
   margin-left: 2px;
   margin-right: 2px;
   margin-bottom: 5px;
   margin-top: 2px;
   border-left: 1px solid var(--foreFontColor);
   border-right: 1px solid var(--foreFontColor);
   border-radius: 4px;
}
p.rptHelp:hover {
	background-color: yellow;
	color: black;
}
/* Temporary copy of gbutton
*/
p.rptBar  {
   font-size: var(--text14);
   font-family: var(--fontName);
   font-style: normal;
   color: var(--foreFontColor);
   display: inline;
}

p.rptTitle  {
   font-size: var(--text16);
   font-family: var(--fontName);
   font-style: normal;
   font-weight: bold;
   color: var(--foreFontColor);
   display: inline;
}
p.rptTitle:hover {
	background-color: var(--hoverBackColor);
}

p.rptText  {
   font-size: var(--text14);
   font-family: Times;
   font-style: normal;
   color: var(--foreFontColor);
   display: inline;
}

hr.rptRule { 
  display: block;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  margin-left: auto;
  margin-right: auto;
  border-style: block;
  border-width: 4px;
  border-color: var(--foreFontColor);
  background-color: var(--foreFontColor);
} 

td.rptGroup {
	background: var(--foreColor);
	text-align: left;
	vertical-align: top;
	border-style: solid;
	border-width: 4px;
	border-radius: 10px;
}
td.rptGroup:hover {
	border-color: var(--accentColor);
}
@media screen and (orientation: portrait){

hr.mtchRule {
		border-top: 1px solid var(--backFontColor);
	}

p.mtchCousin {
   font-size: var(--text10);
   font-family: var(--fontName);
   font-style: normal;
   color: var(--backFontColor);
   display: inline;
	}

p.mtchGPa {
   font-size: var(--text10);
   font-family: var(--fontName);
   font-style: normal;
   color: black;
   display: inline;
	}

td.mtchBox {
	border: none;
	border-radius: 10px;
	background-color: white; //var(--foreColor);
	}
	
}

@media screen and (orientation: landscape){

hr.mtchRule {
		border-top: 1px solid var(--backFontColor);
	}

p.mtchCousin {
   font-size: var(--text14);
   font-family: var(--fontName);
   font-style: normal;
   color: var(--backFontColor);
   display: inline;
	}

p.mtchGPa {
   font-size: var(--text14);
   font-family: var(--fontName);
   font-style: normal;
   color: black;
   display: inline;
	}

td.mtchBox {
	border: none;
	border-radius: 10px;
	background-color: white; //var(--foreColor);
	}
}

@media print {
hr.mtchRule {
		border-top: 1px solid black;
	}
p.mtchCousin {
   font-size: var(--text14);
   font-family: var(--fontName);
   font-style: normal;
   color: black;
   display: inline;
	}

p.mtchGPa {
   font-size: var(--text14);
   font-family: var(--fontName);
   font-style: normal;
   color: black;
   display: inline;
	}

td.mtchBox {
	border-radius: 10px;
	border: 1px solid black;
	//background-color: black;
	}
}


/* =================== Start of Dropdown ======================================== */	

/* set up for dropdown menu */
.dropbtn {
  background-color: none;
  color: green;
  padding: 16px;
  font-size: var(--text16);
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  //border-bottom: 1px dotted #ccc;
  color: var--(backFontColor);
}

.dropdown .dropdown-content {
  visibility: hidden;
  position: absolute;
  //width: 240px;
  background-color: var(--backColor);
  color: var(--backFontColor);
  text-align: center;
  padding: 5px 0;  
  border-radius: 10px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 5px 10px 18px var(--backFontColor); 
}

.dropdown:hover .dropdown-content {
	visibility: visible;
	opacity: 1
	}


.dropdown-bottom {
  top: 95%;
  left: 50%;  
  margin-left: -60px;
}

.dropdown-bottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

.dropdown-top {
  bottom: 95%;
  left: 50%;  
  margin-left: -60px;
	}

.dropdown-top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
	}
/* ===================== End of Dropdown ======================================== */	

/* =================== Start of DropdownB ======================================== */	
/* =================== This is for embedding a dropdown within a dropdown ======== */
/* set up for dropdownB menu */
.dropbtnB {
  background-color: none;
  color: green;
  padding: 16px;
  font-size: var(--text16);
  border: none;
}

.dropdownB {
  position: relative;
  display: inline-block;
  //border-bottom: 1px dotted #ccc;
  color: var--(backFontColor);
}

.dropdownB .dropdownB-content {
  visibility: hidden;
  position: absolute;
  //width: 240px;
  background-color: var(--backColor);
  color: var(--backFontColor);
  text-align: center;
  padding: 5px 0;  
  border-radius: 10px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 5px 10px 18px var(--backFontColor); 
}

.dropdownB:hover .dropdownB-content {
	visibility: visible;
	opacity: 1
	}


.dropdownB-bottom {
  top: 95%;
  left: 50%;  
  margin-left: -60px;
}

.dropdownB-bottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

.dropdownB-top {
  bottom: 95%;
  left: 50%;  
  margin-left: -60px;
	}

.dropdownB-top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
	}
/* ===================== End of DropdownB ======================================== */	
	
p.dd0 {
	align: left;
	display: inline;
	font-size: var(--text16);
	margin: 16px;
	font-weight: 600;
	color: var(--backFontColor);
   font-family: var(--fontName);
	}
p.dd {
	align: left;
	display: inline;
	font-size: var(--text16);
	margin: 16px;
	color: var(--backFontColor);
    font-family: var(--fontName);
	}
p.dd:hover {
	background-color: yellow;
	color: black;
	padding: 5px;
	}	

/* Used in login confirmation to put a box around text. */
p.wDevD  {
   font-size: var(--text14);
   font-family: var(--fontName);
   font-style: normal;
   color: var(--backFontColor);	
   display: inline;
}
p.wDevD:hover{
	color: black;
	padding: 4px;
	background-color: yellow;
	border: 1px solid black;
}
/* iconG is used for forming an icon -- test */
p.iconG {
	border: 3px solid var(--backFontColor); 
	border: none;
	border-radius: 10px;
	background-color:  var(--backColor);
	vertical-align: middle;
	font-family: PoorRich;
	color:  var(--backFontColor);
	font-size: 39px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 0pz;
	padding-right: 0px;
	align: center;
	margin: 0px;
	}
img.simpleShadow {
  box-shadow: 2px 6px 10px var(--backFontColor); 
	}	

/* taken from loginconfirmation.asp */
	@media only screen AND (orientation: landscape) {
		td.menuVis {
			border: 6px solid darkGray;
			border-radius: 10px;
			//background-color: white;
			box-shadow: 5px 10px 18px white;
			padding: 4px;
			display:block;
			}
		}

	@media only screen AND (orientation: portrait) {
		td.menuVis {
			display: none;
			}
		}
		
	@media print {
		td.menuVis {
			display: none;
			}
		}


/*Taken from login.asp */
p.hdng20 {
	font-size: var(--text20);
	font-family: var(--fontName) ;
	font-weight: bold;
	font-color: var(--foreFontColor);
	font-style: italic;
	}
		
.genText16 {
	display: inline;
	font-size: var(--text14);
	font-family: var(--fontName);
	}	

.dtd16 {
	display: inline;
	//border-bottom: 1px dotted;	
	font-size: var(--text14);
	font-family: var(--fontName);
	cursor: pointer;
	}
.dtd16:hover {
	background-color: yellow;
	}

/* moved from Individual Profile */
input[type=radio].source-radio
{
     display: inline-block;
     position: relative;
     border-radius: 3px;
     cursor: pointer;     
     outline: none;
	 height:12px;
	 width:12px;
}
input[type=radio].source-radio.xxx:hover
{
     outline: blue solid 1px;
}

td.headerboxStore {
	/* width: 360px; */
	//border: 3px solid darkBlue; 
	//border-radius: 8px;
	//background-color: blue;
	border-top: 3px solid darkBlue;
	border-bottom: 3px solid darkBlue;
	vertical-align: middle;
	padding: 6px;
	}
p.headerboxBStore {
	font-size: 30px;
	letter-spacing: 2px;
	text-align: center;
	background-color: transparent;
	color: darkBlue; 
	font-family: Garamond; 
	display: inline;
	}


@media screen {
td.headerboxR {
	/* width: 360px; */
	border: 3px solid var(--backFontColor); 
	border-radius: 8px;
	background-color: var(--mdBackColor);
	vertical-align: middle;
	padding: 4px;
	}
	}
@media print {
td.headerboxR {
	/* width: 360px; */
	border: none; 
	border-collapse: collapse;
	background-color: none;
	vertical-align: middle;
	padding: 4px;
	}
	}

@media screen and (max-width: 600px) {
  div.flaggif {
    //display: none;
  }
}		

@media screen and (min-width:526px) {		/* Not working how do I negate? */
	
	z	{
	
	}
	z:hover {
		background-color: yellow;
		color: red;
	}

	table.newsVis	{
		border: 3px solid <%=newsHighlightColor%>;
		border-radius: 10px;
		background-color: <%=nBackColor%>;
		padding: 6px 6px 6px 6px;
		max-width:900px;
	}
	table.newsVis:hover {
		border: 6px solid <%=newsHighlightColor%>;
		padding: 3px 3px 3px 3px;
	}
	p.newsHeading  {
		font-size: var(--text18);
		font-family: var(--fontName);
		font-style: normal;
		font-weight: bold;
		color: <%=nFontColor%>; //var(--backFontColor);
		display: inline;
	}
	p.newsView  {
		font-size: var(--text20);
		font-family: var(--fontName);
		font-style: normal;
		font-weight: bold;
		color: <%=nFontColor%>;
		display: inline;
	}
	p.newsEntry {
		font-size: var(--text16);
		font-family: var(--fontName);
		font-style: normal;
		color: <%=nFontColor%>; //var(--foreFontColor);
		display: inline;
		text-decoration: none;
	}
	button.newsLink, a.newsLink {
		border:none;
		outline:none;
		background:none;
		cursor:pointer;
		padding:0;
		text-decoration:none;
		font-weight: bold;
		font-family: var(--fontName);
		font-size:inherit;
		color: <%=newsHighlightColor%>;
		display:inline;
		text-align:left;
		border-bottom: 1px dotted <%=newsHighlightColor%>;
		}
	button.newslink:hover, a.newsLink:hover {
		background-color: yellow;
		color: black;
	}	
	/* Order By radio buttons */
	label.oByH:hover {
		background-color:yellow; 
		color: black;
		border-radius: 5px;
		padding-bottom: 2px;
		padding-right: 3px;
	}