/*your custom style goes in this file*/
/*if you're overriding style blocks from genstyle.css, you only need to include the attributes you're overriding, not the whole block*/

#tngheader { display: none !important; }

*, *:before, *:after {
	box-sizing: inherit;
}

@font-face {
	font-family: "Jancient";
	src: url("../font/jancient.ttf");
}

@font-face {
	font-family: "RobotoLight";
	src: url("../font/Roboto-Light.ttf");
}

@font-face {
	font-family: "RobotoRegular";
	src: url("../font/Roboto-Regular.ttf");
}

@font-face {
	font-family: "RobotoCondensedRegular";
	src: url("../font/RobotoCondensed-Regular.ttf");
}

@font-face {
	font-family: "RobotoCondensedBold";
	src: url("../font/RobotoCondensed-Bold.ttf");
}

:root {
	--font-color: #232528;			/* Dark Gunmetal */
	--link-color: #191970;			/* St. Patrick's Blue */
	--body-color: #FFFAFA;			/* Snow */
	--alt-body-color: #9DE7F1;	/* Non-photo Blue */
	--header-color: #0067A3;		/* Medium Persian Blue */
	--h1-color: #fdce07;				/* Swedish Yellow */
	--h2-color: #00588d;				/* Swedish Blue */
	--h3-color: #333465;			/* Deep Koamaru */
	--menu-color: #e4e2f3;			/* Lavender */
	--menu-color-lt: #efeef8;			/* Anti-Flash White */
	--menu-back: #D6CEBD;				/* Pastel Gray */
	--menu-hover: #D8B72B;			/* Gold (Metallic) */
	--back-color: #333465;			/* Deep Koamaru */
  --select-border: #fdce07;
  --select-focus: blue;
  --select-arrow: var(--select-border);
}

img { max-width: 100%; }

.site_h1 {
	font-family: "jancient";
	font-size: 36px;
	color: var(--h1-color);
}

.site_h2 {
	margin: 1rem auto;
	font-family: "RobotoRegular";
	font-size: 18px;
	color: var(--h2-color);
}

.site_h3 {
	margin: 1rem auto 0.25rem;
	font-family: "RobotoCondensedBold";
	font-size: 14px;
	color: var(--h3-color);
}

.site_h4 {
	margin: 1rem auto 0.25rem;
	font-family: "RobotoRegular";
	font-size: 12px;
	color: var(--h4-color);
}

html {
	box-sizing: border-box;
	overflow-y: scroll;
	font-size: 16px;
}

.publicbody {
	margin: 0;
	padding: 0;
	background-color: #FFFAFA;
	font: 0.87rem RobotoRegular, sans-serif;
	overflow-y: scroll;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 1rem;
	z-index: 4;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	justify-items: center;
	background-color: var(--header-color);
	box-shadow: 0px 3px 3px  var(--h3-color);
}

.ltheader {
	display: grid;
	grid-template-columns: 47px 1fr;
	grid-template-areas: "branding masthead";
	gap: 9px;
	height: 47px !important;		
}
	.sitelogo {
		grid-area: branding;
		margin-top: -1px;
		height: 47px !important;		
	}
	.sitelogo img {
		height: 47px !important;
	}
	.siteheader {
		grid-area: masthead;
	}
	.siteheader_h1 {
		margin: 0;
		padding: 0;
		line-height: 1;
		font-family: "jancient";
		font-size: 36px;
		font-variant: small-caps;
		color: var(--h1-color);
	}
	.siteheader_h3 {
		margin-top: -3.5px;
		padding: 0;
		line-height: 1;
		font-family: "RobotoCondensedBold";
		font-size: 1rem;
		font-variant: small-caps;
		color: var(--h3-color);
		text-shadow: 0 0 1px rgba(252,204,48,0.56);
	}

.rtheader {
	margin-top: 0.25rem;
	text-align: center;
}
	.lower div { display: inline-block; }
	.lower div:first-child { margin-right: 12px;}
	.lower div:last-child { margin-left: 12px;}

	.rtheader .signin {
		xmargin-top: 0.2rem;
	}
	.licon {
		display: inline-block;
		margin-bottom: -2px;
	}
	.rtheader .log {
		color: var(--menu-color);
		text-decoration: none;
	}
	.rtheader .log:hover {
		color: var(--menu-back);
	}
	.rtheader .reg {
		color: var(--body-color);
		text-decoration: none;
	}
	.rtheader .reg:hover {
		color: var(--menu-back);
	}
	.rtheader .select:hover {
		color: var(--menu-back);
	}
		
/* Language select menu */

/* Style the arrow inside the select element: */
.select {
  padding: 4.5px 0 0;
  text-align: right;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: var(--menu-color);
  appearance: none;
  background: transparent;
}

.flagsize {
	display: inline-block;
	height: 15px;
	margin-bottom: -1px;
	margin-right: -5px;
	padding-top: 3px;
}

.fm1 { margin-right: 4px; } /* English */
.fm2 { margin-right: 4px; } /* Swedish */
.fm3 { margin-right: 4px; } /* French */
.fm4 { margin-right: 4px; } /* Spanish */
.fm5 { margin-right: 3px; } /* Italian */

.select::-ms-expand {
  display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

.section {
	padding: 1rem;
}

.section-grid {
	max-width: 960px;
	margin: 1rem auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}


.section0 {
	margin-top: 5rem;
	background-image: url("../images/tng_homepage.jpg");
	xbackground-attachment: fixed;
	xbackground-size: vh%;
	background-size: cover;
	background-repeat: no-repeat;
}

.section .searchme {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-items: end;
}

.section label {
	display: block;
	margin-top: 0.5rem;
	margin-bottom: 0.1rem;
	font-size: 12px;
	color: var(--back-color);
}

.section input[type=submit] {
	display: block;
	margin-bottom: 0.5rem;
}

@media only screen and (min-width: 560px) {

	header {
		grid-template-columns: 1fr 1fr;
		justify-items: normal;
	}

	.rtheader {
		text-align: right;
	}

	.lower div { display: block; }
	.lower div:first-child { margin-right: 0;}
	.lower div:last-child { margin-left: 0;}

	.fm1 { margin-right: -4px; } /* English */
	.fm2 { margin-right: 3px; } /* Swedish */
	.fm3 { margin-right: 5px; } /* French */
	.fm4 { margin-right: 1px; } /* Spanish */
	.fm5 { margin-right: -4px; } /* Italian */

	.section-grid, .section .searchme {
		grid-template-columns: 1fr 1fr;
	}


}