:root {
	--main_background: #FFFFFF;
	--quad_background: #EEEEEE;
	--quadheader_background: #CCCCCC;
}

.item0 { grid-area: banner; }
.item1 { grid-area: header; }
.item2 { grid-area: nwquad; }
.item3 { grid-area: nequad; }
.item4 { grid-area: swquad; }
.item5 { grid-area: sequad; }

.header0 { grid-area: logo; }
.header1 { grid-area: name; }
.header2 { grid-area: disclaimer; }

.search0 { grid-area: presults; }
.search1 { grid-area: tresults; }

/* Fonts */

@font-face {
	font-family: "Atkinson-Hyperlegible-Regular";
	src: url("/fonts/Atkinson-Hyperlegible-Regular-102.eot");
	src: url("/fonts/Atkinson-Hyperlegible-Regular-102.woff") format("woff"),
		url("/fonts/Atkinson-Hyperlegible-Regular-102.otf") format("opentype");
}

.grid-container-header {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-areas:
		'logo name disclaimer';
	grid-gap: 24px; /* width of internal gaps between grid tiles */
	background-color: #ffffff; /* color of gaps between tiles and border */
	padding: 0px; /* width of border */
	align-items: center;
}

.grid-container-header > div {
	font-size: 14pt;
    font-family: Atkinson-Hyperlegible-Regular, Verdana, Arial, 'MS Sans Serif';
}

.grid-container-header > div.header0  img {
}
.grid-container-header > div.header1  h2 {
}
.grid-container-header > div.header2  p {
}

.grid-container-search {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas:
	'presults tresults';
  grid-gap: 8px; /* width of internal gaps between grid tiles */
  background-color: #ffffff; /* color of gaps between tiles and border */
  padding: 0px; /* width of border */
}

.grid-container-search > div.search0 {
	padding: 0px 0px 0px 0px;
	background:		var(--quad_background);
}

.grid-container-search > div.search1 {
	padding: 0px 0px 0px 0px;
	background:		var(--quad_background);
}


.grid-container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas:
	'banner banner'
    'header header'
    'nwquadheader nequadheader'
    'nwquad nequad'
    'swquad sequad';
  grid-gap: 8px; /* width of internal gaps between grid tiles */
  background-color: #ffffff; /* color of gaps between tiles and border */
  padding: 0px; /* width of border */
}

.grid-container > div {
  background-color: rgba(0, 255, 255, 0.8);
  text-align: left;
  padding: 0px 0px;
	font-size: 14pt;
	line-height: 1.25;
    font-family: Atkinson-Hyperlegible-Regular, Verdana, Arial, 'MS Sans Serif';
}

/* Disclaimer */
.grid-container > div.item0 {
	padding: 0px 0px 0px 0px;
	background:		var(--banner_background);
}

/* Element Info */
.grid-container > div.item1 {
	padding: 0px 0px 0px 0px;
	background:		var(--banner_background);
}

/* NW Quad */
.grid-container > div.item2 {
	background:		var(--quad_background);

}

/* NE Quad */
.grid-container > div.item3 {
	background:		var(--quad_background);
}

/* SW Quad */
.grid-container > div.item4 {
	background:		var(--quad_background);

}

/* SE Quad */
.grid-container > div.item5 {
	background:		var(--quad_background);

}

div.quadheader {
	background:		var(--quadheader_background);
	font-weight: bold;
	padding: 8px 8px;

}

body {
	margin:			10px 10px 10px 10px;
	padding:		0px;
	font-family:	Atkinson-Hyperlegible-Regular, Verdana, Arial, sans-serif;
	background:		var(--main_background);;
}
hr {
    border: 1px solid #6A6D63;
}