/*  coreStylesV2 */


	/* COLOURS */

	:root {  /*  *** IMPORTANT! ***   :root must be the first rule defined in this sheet */
		--lightest:#E6FBFA;   /* nearly white */
		--lighter:#bbf4f0; /* light blue */
		--light:#B3B4BD ; /* mid grey */
		--accent1:#E95F34; /* bright orange */
		--accent2:#19A398; /* Teal */
		--dark:#4E5166; /* Grey */
		--darker:#050A44; /* Deep blue */
		--darkest:#141619;  /* very dark grey */
	}

	html {
		box-sizing:border-box;
		overflow-x:hidden;
	}


	*,	*:before,	*:after {
		box-sizing:inherit;
	}
	
	/* Give everything zero margin and zero padding */
	* {
		margin: 0;
		padding: 0;
	}

	body {
		font-family: 'Jost', serif;
		background-color:var(--light);
	}


/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
	
		
	a {
		background-color:transparent;
	}
	
	a:active, a:hover {
	 outline-width:0;
	}
	
	b, strong {	font-weight:bolder; }
	dfn{font-style:italic}
	
	small{font-size:80%}
	sub,sup {
		font-size:75%;
		line-height:0;
		position:relative;
		vertical-align:baseline;
	}
	sub { bottom:-0.25em}
	sup { top:-0.5em; }
	figure { margin:1em 40px }
	img { border-style:none; }

	button, input, select, textarea, optgroup, option {
		font-family: inherit;
		font-size: inherit;
		margin:0
	}
	
	button,input { overflow:visible; } /* overflow will be visible */
	button, select { text-transform:none }
	optgroup{font-weight:bold}
	
	button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
	button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
	button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
	
	textarea { overflow:auto }
	[type=checkbox],[type=radio]{padding:0}
	[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
	[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
	[type=search]::-webkit-search-decoration{-webkit-appearance:none}
		
/* End extract */

	.centredContent {
		margin: 0 auto;
		max-width:1000px;
		width:100dvw;
		background-color:var(--lightest);
	}

	

	.twoFullHeightColumns {
		display:grid;
		grid-template-rows:1fr;
		grid-template-columns:auto 1fr;
		min-height:100dvh;   /* fills the available vertical space and adjusts if the browser window changes */
		background-color:var(--lighter); /* if main is not wide enough, this will show so keep teh same color */
	}	

	main {
		background-color:var(--lighter);
		padding:3px;
		width:100%;
	}
	
	nav {
		background-color:var(--accent2); /* Teal */
		min-width:89px;				
	}

	
		
	.right-aligned-link {
		float:right;
		text-decoration:none;
		color:navy;
	}
	
	.right-aligned-link:hover {
		color:blue;
		cursor: pointer; 
		
	}
	
	.jal-link:hover {
		color:blue;
		cursor: pointer;
	}
	
	.right-aligned-img {
		float:right;
		max-height:4rem;
	}
/* end of Main Navigation */
		
	
	

/* JAL look and feel for buttons and headings */
			
	
	strong {
		font-weight:600;
	}
	
	h1 { font-size:2.3rem; padding-top:1.0rem; font-weight:600; }
	h2 { font-size:2.0rem; padding-top:0.9rem; font-weight:600; }
	h3 { font-size:1.5rem; padding-top:0.8rem; font-weight:600; }
	h4 { font-size:1.3rem; padding-top:0.7rem; }
	h5 { font-size:1.2rem; }

	hr { border:0; border-top:1px solid #eee; margin:20px 0; }
	
	ul, ol {
		list-style-position: inside;
		text-indent: -20px; /* affects the first line only */
		margin-left: 20px; /* key property */
	}
	
	ol.hangingIndent {
		list-style-position: inside;
		text-indent: -20px; /* affects the first line only */
		margin-left: 20px; /* key property */
		color:var(--darker);
	
	}
	
	a {
		color:navy;
	}
	a:hover {
		color:blue;
	}



	/* Fix styling for text in SELECT drop down lists */
	select {
		background-color:white;
	}
	
	optgroup {
		background-color:pink;
	}
	
	/* Force Firefox to inherit the site wide font. */
	select, option { font: -moz-pull-down-menu; }

	
	button {
		font-family: inherit;
	    font-size:inherit;
	    color:var(--darker);
	    background-color:var(--lightest);
	    border:thin var(--accent1) solid;
	    border-radius:4px;
	    padding:0.3rem;
	    min-width:3rem;
	}
	
	
	button:hover, button:focus {
		background-color:var(--accent1); 
		color:white;
		border-color:var(--accent2);
	}


	.OLDselected {
		color:var(--accent1);
		background-color:var(--lighter);
	}
	

	

	.menuButton {
		display:block;
		width:100%;
		color:var(--darker);
		background-color:var(--accent2);
		margin-bottom:0.1rem;
		border:none;
		padding-top:0.3rem;
		padding-bottom:0.3rem;
	}
	
	.menuButton p {
		color:black;
	}
	
	.menuButton .selected {
		color:white;
		font-weight:bolder;
	}
	
	
	
	.indent0, .indent1, .indent2 {
		text-align:left;
		margin-left:0.2rem;
	}
	
	
	.indent0 {
		padding-left:0.1rem;
	}

	
	.indent1 {
		padding-left:0.6rem;
	}
	
	.indent2 {
		padding-left:1.1rem;
	}

		
	
	/*** FLEX DIV  ***/
	

	
	.flexDiv {
		display:flex;
		width:100%;
		flex-wrap: wrap;
		align-items:top;
	}
	
	
	.flexTile {
		width:48%;
		min-width:15rem;
		min-height:4rem;
		
		border-width:thin;
		border-style:solid;
		
		border-radius:5px;
		padding:3px;
		margin-right:1%;
		margin-bottom:1%;
		background-color:var(--lighter);
		
	}
	
	
	.flexTile33 {
		display:inline-block;
		width:31%;
		min-width:15rem;
		min-height:4rem;
		
		border-width:thin;
		border-style:solid;
		border-radius:5px;
		
		padding:3px;
		margin-right:1%;
		margin-bottom:1%;
		background-color:var(--lightest);
		
	}
	
	.flexTile33:hover {
		border-color:var(--accent2);
		background-color:var(--accent1);
	}
	


/***  FORM v2 ***/

    .v2 {
		>div {
 			display: flex;
	        flex-wrap:wrap;
	        width: 100%;
	        align-items:baseline;
	        min-height:2rem;
		}	
		
		>div>:first-child {
	         	width: 8rem;
	            text-align: left;
	            margin-top:0.5rem;
        }
        
        >div>:nth-child(2)  {
            flex: 1;     
 
        }	
        
        input[type="checkbox"] {
				flex:0;
				align-self:baseline;
		}


		input, select, button {
			padding: 0.25rem 0.15rem;
			margin-bottom:0.3rem;
		}


		input {
			max-width:30rem;
			
		}
		
		textarea {
			max-width:30rem;
			height:3.6rem;
			padding-left:2px;
			padding-right:2px;
		}
		
		select {
			max-width:30rem;
		}
		
		button {
			margin-top:0.5rem;
		}
	}

	.v2 .w4 { max-width:4rem; }
	.v2 .w5 { max-width:5rem; }
	.v2 .w6 { max-width:6rem; }
	.v2 .w7 { max-width:7rem; }
	.v2 .w8 { max-width:8rem; }
	.v2 .w10 { max-width:10rem;	}



	.flex-layout {
		display:flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	
	
	.wrapper {
		margin: 0 auto;
		max-width:1000px;
		width:100%;
	}
	

	.headShot {
		margin:0;
		padding:0;
		height:4rem;
	}
	
	.inlineBlock49 {
		display:inline-block;
		width:49%;
		min-width:20rem;
	}
		
	
	header {
		background-color:var(--accent2);
		height:3rem;
		width:100vw;
	}

	
	/* All Screens */
	/* This block must be positioned ahead of the smallers screen block */
	
	@media screen  {
			
		html {
			font-size:16px;
		}
		
		.menuPopupButton, .popupNav {
			display:none; /* for large screen widths, hide the popup-menu button */
		}
		
		header  {
			display:none; /* for large screen widths, hide the popup-menu button */
		}

				
	}	
	
	

	
	/* Smaller screens */
	@media screen and (max-width: 700px) {

		html {
			font-size: 14px;
		}
		
		.menuPopupButton {
			display:inline-block;
			position:absolute;
			top:0.5rem;
			right:0.5rem;
			min-width:2rem;
			border:none;
			border-radius:2px;
			background-color:var(--accent2);
			padding:0.3rem;
		}
		
		header {
			display:block;
		}
		
		h2:first-of-type {
			margin-top:1rem; /* Make space for the popup menu button above the first heading */
		}
		
		nav {
			display:none;
		}
		
		.popupNav {
			position:absolute;
			display:block;
			top:3.5rem;
			right:-12rem;
			transition: right 0.5s;
			color:green;
			min-height:5rem;
			min-width:6rem;
			background-color:var(--accent2);
			border: thin black solid;
		}
		
		
	


	}