/*--------------------------------------------------------------------/*
/*		NSR6 website: Styling
/*--------------------------------------------------------------------*/

/* site-css.php Args: array (
  'layout' => 'layoutPaged',
) */

/*--------------------------------------------------------------------/*
/*		CSS reset/normalize from Josh Comeau
/*--------------------------------------------------------------------*/

*, *::before, *::after {box-sizing: border-box}
* {margin:0; padding:0}
/* ul {margin:0; padding: 0 !important} */ /* padding 0 needed by menu uls and lis q1*/
body {line-height: 1.5}
img, picture, video, canvas, svg {display: block; max-width: 100%}
input, button, textarea, select {font: inherit}
p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word; font-weight:normal}

/*--------------------------------------------------------------------/*
/*		Normalize further
/*--------------------------------------------------------------------*/
html {font-size: 12pt;}
*::placeholder {color:#6c6;}
/* body {needs testing, clamp(100%, 1rem + 2vw, 24px)} */
div {
	display: inline-block;
	} /* display:block is always 100% width */
/*
ul,li,p {margin-block-start:0; margin-block-end:0; margin-inline-start:0; margin-inline-end:0;
	padding-block-start:0; padding-block-end:0; padding-inline-start:0; padding-inline-end:0}
*/
p {padding-bottom:1rem}
h1 {font-size:28pt; margin: 1rem 2rem; line-height:32pt}
h2 {font-size:20pt; margin: 1rem 2rem; line-height:24pt}
h3 {font-size:16pt; margin: 1rem 2rem; line-height:20pt}
a {color:#00f}
a:visited {color:#0a0}/* 888: gray */
.nmb {margin-bottom:0px}
sup {font-size: 5pt; position: rel; bottom: 1rem}

/*--------------------------------------------------------------------/*
/*		Misc. Styling
/*--------------------------------------------------------------------*/
body {
	font-family:Helvetica,Arial,sans-serif;
	color:white; background-color:#162;
	}
.log {position:absolute; top:100rem}
div.center { display:flex; flex-wrap:wrap; margin: .5rem 0; justify-content:center;}
.invisible {display: none;} 

/* Inserted parent div to center its children horizontally */
/* div.center {width:100%; text-align:center} */

/* manage page */
div.output {color: black; background-color: white; width: 75vw; height:80pt }

/*--------------------------------------------------------------------/*
/*		Paging Layout Styling
/*--------------------------------------------------------------------*/
/* q3 */

/* Portion below menu */
div.main {width: 100%; height: 100%; overflow:hidden/* q3 */}
div.spacer {display: block; width: 100px; height: 40px}
div.vertItems { display:flex; flex-wrap:wrap; margin: .5rem 0; flex-direction:column}
div.vertItemsCentered { display:flex; flex-wrap:wrap; margin: .5rem 0; flex-direction:column; align-items:center; /* justify-content:even */}
@media (min-width: 734px)
	{
	div.indexEntries { display:flex; flex-wrap:wrap; margin: .5rem 0; flex-direction:column; width:66vw; height:66vh; margin-left:30vh}
	} /* wide menu */

/* Breadcrumbs and buttons Styling */
.bread {margin: 1rem 0 0 20px;}
.bread a, .indexEntries a, .btns a {color:#fff}
.bread a:visited, .indexEntries a:visited, .btns a:visited {color:#fff}

/* Portion below breadcrumb */

@media (max-width:734px)
	{
	div.wide {display: none}
	div.narrow {color: black; background-color: #efe; padding: 1rem 4rem 2rem 4rem}
/*qq*/
	div.pages {margin: 1rem 3rem}
	div.row {}
	div.block {margin-bottom: 1rem}
/*
	div.row { display:flex; flex-wrap:wrap; margin: .5rem 0; justify-content:space-evenly;}
	div.block {max-width:20rem; padding:.5rem}
	.noneIfNarrowText {display:none}
*/
	h1 {margin: 1rem 0;}
	h2 {margin: 1rem 0;}
	h3 {margin: 1rem 0;}
/*
	h1 {margin: 1rem;}
	h2 {margin: 1rem;}
	h3 {text-align: center; margin: 1rem;}
*/
	} /* narrow text */
@media (min-width: 734px)
	{
	div.narrow {display: none}}
	div.pages { ; display:flex; flex-wrap:wrap; margin: .5rem 0; justify-content:center; width:100%;
		color:black; background-color: #efe;
		font-family:Helvetica,Arial,sans-serif; font-size:12pt;}
	div.row { ; display:flex; flex-wrap:wrap; margin: .5rem 0; /* vertical-align: middle; */
		flex-direction:column; /* justify-content:center; */
		width:230pt; height:230pt;
		border-bottom:2px solid black !important;}
	div.block { ; padding:1.5rem; /* width: 230pt; */
		height:fit-content}
	h1 {text-align: center; margin: 1rem 2rem;}
	.block h1 {margin: 0 0 .5rem 0;}
	.block h2 {margin: 0 0 .5rem 0;}
	.block h3 {margin: 0 0 .5rem 0;}
	} /* wide menu */
/*q3
.tInner a {color:#aaf}
.tInner a:visited {color:#aef}
*/
/*--------------------------------------------------------------------/*
/*		Tooltip Styling
/*		Usage:
/*			<div class=tipSite>TRIGGER TEXT</div>
/*			<div class=tipText>TIP TEXT</div>
/*		no spaces between the two elements!
/*		The first div can be any other text element!
/*--------------------------------------------------------------------*/
a.tipSite {}
.tipText {
	position:absolute;
	/* min-width:7rem; */
	min-width:10rem;
	max-width:14rem;
	max-height:20rem;
	/* min-height:20rem; */
	padding:.75rem;
	text-align:center;
	color:black;
	background-color:#dfd;
	border:2px solid black;
	border-radius:.25rem;
	user-select: none;
	/* Transitions */
	visibility:hidden;
	opacity:0;
	transition:opacity .2s;
	}
.tipShow {
	/* Transition from hover in js */
	visibility:visible;
	opacity:1;
	}
/*--------------------------------------------------------------------/*
/*		Modal Styling
/*--------------------------------------------------------------------*/
div.modal {
	position: absolute;
	top: 15vh; right: 10vw;
	min-width:10rem;
	max-width:14rem;
	max-height:20rem;
	padding:.75rem;
	text-align:center;
	color:black;
	background-color:#efe;
	border:2px solid black;
	border-radius:.25rem;
	user-select: none;
	}

/*--------------------------------------------------------------------/*
/*		Flex Container
/*--------------------------------------------------------------------*/
div.flex { display:flex; flex-wrap:wrap; margin: .5rem 0; justify-content:space-evenly; column-gap: 2em; row-gap:2rem; }

/*--------------------------------------------------------------------/*
/*		Forms Styling (q3: remove flex from form)
/*--------------------------------------------------------------------*/
form { display:flex; flex-wrap:wrap; margin: .5rem 0; justify-content:center; flex-direction:column; 
	row-gap:1rem; column-gap:2rem;
	/* justify-content:flex-start; */
	align-items:center; font-size:12pt;} /*  Must avoid '{ $' */
div.formGroup { display:flex; flex-wrap:wrap; margin: .5rem 0; justify-content:center; flex-direction:column; ;
	/* justify-content:flex-start; align-items:flex-start; */
	font-size:12pt; width:300pt} /*  Must avoid '{ $' */
div.btnGroup { display:flex; flex-wrap:wrap; margin: .5rem 0; justify-content:center; margin: 0 1rem; column-gap: 1rem}
.text {font-family:"Courier New",sans-serif; font-weight:bold;}
div.control { display:flex; flex-wrap:wrap; margin: .5rem 0; align-items:center;
	background-color:#8e8; border:2px solid #162;
	border-radius:4pt;}
div.control label {display:inline-block; color:#000; background-color:transparent;
   /* text-align:center; */ margin:6pt;
	width:120pt; user-select: none;}
div.control textarea,div.control textarea:focus
	{display:inline-block; background-color:white;
	/* width:180pt; */ height:25pt; line-height:14pt;
	margin:5pt 0 5pt 0; padding:3pt 6pt 0pt 6pt;
	border:2px solid #040; border-radius:3pt;
	overflow-y:hidden}
/* @media (min-width:0px) and (max-width:400px){ body {transform:scale(calc(100vw / 1920px))}} qa4 */
div.control textarea:focus {border:2px solid #0a0; }
.formBtn {
	height:30pt; min-width: 75pt; margin-top:1rem; padding: 0 1rem;
	color:#eee; background-color:blue; text-decoration:none; font-size:12pt;
	font-weight:bold; /* align-self:center; */
	border:2px solid #eee; border-radius:.3rem}

/*--------------------------------------------------------------------/*
/*		Card Styling
/*--------------------------------------------------------------------*/
div.card { display:flex; flex-wrap:wrap; margin: .5rem 0; justify-content:space-evenly; align-items:center; width:220pt; background-color:#052;
	border: 2px solid #8e8; border-radius:.6rem;
	padding:10pt;
	}
div.cardImage {
	width:140pt;
	overflow:hidden;
	max-height:90pt;
	}
img.cardImage {object-fit:cover;}
.cardHead {text-align:center; padding:8pt 8pt; line-height:1.15}
div.cardText {font-size:.95rem; line-height:1.25; padding:0pt 8pt; text-align:center}
div.btns { display:flex; flex-wrap:wrap; margin: .5rem 0; justify-content:space-evenly; font-size:12pt; column-gap:10pt;
	margin-top:10pt} /*  PHP uses '{ $' */
.button {width:80pt; height:30pt;
	color:#eee; background-color:blue; text-decoration:none; font-size:12pt;
	display:flex; flex-wrap:wrap; margin: .5rem 0; justify-content:space-evenly; align-items:center; font-weight:bold;
	border:2px solid #eee; border-radius:.3rem}

div.testmOuter { display:flex; flex-wrap:wrap; margin: .5rem 0; justify-content:center}
div.testm { flex-direction:row; width:200pt; background-color:#052;
	margin: 1rem;
	border: 2px solid #8e8; border-radius:.6rem; padding:1rem; margin-bottom:2rem;} 
.testmHead {text-align:center; line-height:1.15}
div.testmText {font-size:.95rem; line-height:1.25; padding:0pt 8pt; text-align:center}
.testm p:before { content: open-quote; }
.testm p:after  { content: close-quote; }
h3.testmHead {margin: 1rem}

/*--------------------------------------------------------------------/*
/*		Menu Styling: All Widths
/*--------------------------------------------------------------------*/
nav {
	position:fixed;
	width: 100%; height: 40px;
	/* padding:7px 0 0 2rem; */
	background-color:#040;
	font-size:12pt;
	/* font-weight: bold; */
	z-index:5;
	/* overflow: clip; ! clips dropdown menu */
	}
.brand {margin: 8px 0 0 20px; user-select: none;}
.brand .tm {font-size:3pt; position:relative; bottom:10pt; left:1pt}
.menuItems a,div.dropItem {
	display: inline-block;
	/* text-align:center; */
	/* width:100px; */
	color:white !important;
	user-select:none;
	text-decoration:none;
	font-weight:bold;
	}
.menuItems a:hover,.dropItem:hover,.dropMenu:hover {
	color:#162 !important;
	background-color:#8e8;
	}

/*--------------------------------------------------------------------/*
/*		Narrow Menu
/*--------------------------------------------------------------------*/
@media (max-width:734px) {
	/* Menu Hamburger Icon */
	input.checkbox {display:none; position:absolute; top:1rem; right:2rem; }
	label.hamburger {position:absolute; top:6px; right:14px; width:36px; height:30px;
		display:inline-block; 
		margin:0; padding-top:4px; color:white; user-select:none;
		font-size:25px; pointer-events:unset; border:1px solid transparent;
		transition:.4s}
	/* Shift hamburger up slightly */
	.hamburger span {position:relative; left:5px; bottom:9px;}
	input.checkbox:checked ~ label.hamburger {border: 2px solid white;}
	/* Main narrow menu */
	.menuItems {
		position:absolute;
		top: 40px; right: 1px;
		display:flex; flex-wrap:wrap; margin: .5rem 0; flex-direction:column;
		width:12rem; max-width:12rem;
		border-left:1px solid #8e8;
		border-right:1px solid #8e8;
		font-size: 12pt;
		border-top:1px solid #8e8;
		background-color:#040;
		/* Vertical Scrollbar */
		overflow-x:hidden; overflow-y:auto; height:auto;
		/* Transitions */
		visibility:hidden;
		opacity:0;
		transition:.3s;
		}
	/* Menu transitions on hamburger checkbox state change */
	input.checkbox:checked ~ .menuItems {
		visibility:visible; /* Allow item mouse events */
		opacity:1;
		}
	/* .menuItemsVertScroll {height:320px} */
	.menuItems a, .dropItem {
		text-align:left;
		padding:7px 0 8px 2rem; /* Kludge to fit */
		border-bottom:1px solid #8e8;
		width:12rem; /* calc(100vw - 33px); */
		}
	div.dropMenu a.menuItem {padding-left:4rem}
	.dropItem:hover {color:white !important; background-color:inherit !important}
	.dropMenu:hover {background-color:inherit}
} /* Narrow menu */

/*--------------------------------------------------------------------/*
/*		Wide Menu Styling
/*--------------------------------------------------------------------*/
@media (min-width: 734px) {
	/* Menu and Dropdown Item */
	a.menuItem, .dropItem {
		width: 100px;
		text-align:center;
		}

	/* Dropdown menu */
	.dropMenu {
		position:absolute;
		top:32px; left:595px;
		padding-top: 8px; /* Margin causes loss of hover */
		width:100px;
		text-align:center;
		z-index: 4;
		/* Transitions */
		opacity:0;
		visibility:hidden;
		transition: all 0.4s ease .1s;
		}
	.dropMenu:hover,
	.dropItem:hover ~ .dropMenu,
	.dropMenu .menuItem:hover ~ .dropMenu
		{
		/* Transitions */
		opacity:1;
		visibility:visible;
		background-color:#040;
		}
	.dropMenu .menuItem {
		/* position:relative; */
		border-top:3px solid #162;
		padding: 3px 0;
		}
	.checkbox,.hamburger {display:none}
	#marker {
 		position:absolute;
		left: 36px;
		bottom: 2px;
		height:5px;
		/* top:calc(40px - 5px - 4px); */
		width:100px;
		background-color:#8e8;
		z-index:8;

/* See https://matthewlein.com/tools/ceaser
Standard ease: 0.25, 0.1, 0.25, 1.0
More so: 0.695, 0.090, 0.300, 0.895
Snapping: 0.180, 0.520, 0.900, 0.405
Big snap at end: 0.810, 0.575, 0.955, 0.475
*/
		transition: all .25s cubic-bezier(0.810, 0.575, 0.955, 0.475);
		}

.menuItems a:nth-child(1):hover ~ #marker {transform: translate(140.5px, 0);}
div.dropItem:nth-child(1):hover ~ #marker {transform: translate(140.5px, 0);}


.menuItems a:nth-child(2):hover ~ #marker {transform: translate(245px, 0);}
div.dropItem:nth-child(2):hover ~ #marker {transform: translate(245px, 0);}


.menuItems a:nth-child(3):hover ~ #marker {transform: translate(349.5px, 0);}
div.dropItem:nth-child(3):hover ~ #marker {transform: translate(349.5px, 0);}


.menuItems a:nth-child(4):hover ~ #marker {transform: translate(454px, 0);}
div.dropItem:nth-child(4):hover ~ #marker {transform: translate(454px, 0);}


.menuItems a:nth-child(5):hover ~ #marker {transform: translate(558.5px, 0);}
div.dropItem:nth-child(5):hover ~ #marker {transform: translate(558.5px, 0);}


} /* Wide menu */
/* End of CSS */