﻿/*  coreStylesV2 */


	/* COLOURS */

	:root {  /*  *** IMPORTTANT! ***   :root must be the first rule defined in this sheet */
		--lightest:#fdfdfd;   /* nearly white */
		--lighter:#F1F1FB; /* light mauve */
		--light:#B3B4BD ; /* mid grey */
		--accent1:#0A21C0; /* bright blue */
		--accent2:#D143D4; /* Pink */
		--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;
	}



/* 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{
		font: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 */


	
		
	.right-aligned-link {
		float:right;
		text-decoration:none;
		color:navy;
	}
	
	.right-aligned-link:hover {
		color:blue;
		cursor: pointer; 
	}
/* end of Main Navigation */
		
	
	

/* JAL look and feel for buttons and headings */
	body {
		font-family: 'Jost', serif;
		background-color:var(--light);
	}
			
	
	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;
	}



	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:2rem;
	}
	
	
	button:hover, button:focus {
		background-color:var(--darker); 
		color:var(--accent2);
		border-color:var(--accent2);
	}


	.selected {
		color:var(--accent1);
		background-color:var(--lighter);
	}

	.menuButton {
		min-width:2rem;
	}
	
	
	.indent0 {
		text-align:left;
		padding-left:1rem;
		color:fuchsia;
	}

	
	.indent1 {
		text-align:left;
		padding-left:2rem;
	}


	
	
	/*** 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);
	}
	


/***  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 {
			max-width:30rem;
		}
		
		textarea {
			background-color:#CCFFFF;
			max-width:30rem;
			height:3.6rem;

		}
		
		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;	}


	/*	
				Styling of main divisions
				
				Site,
					Header
					Main
					Footer
			*/
						
			.site {
				display:grid;
				grid-template-rows:auto 1fr auto;
				grid-template-columns:minmax(0,1fr);
				min-height:100dvh;   /* fills the available vertical space and adjusts if the browser window changes */
			}	
			
			header {
				background-color: var(--lightest);
				padding: 0.5rem 0.2rem;
				
			}
			
			
			main {
				border-top:medium var(--darker) solid;
				background-color:var(--lighter);
				padding:0 5px;	
				z-index:100;
				background-color:var(--lighter);
			}
			
						
			
			footer {
				background-color: var(--light);
				border-top:medium var(--darker) solid;
			}
			
			.flex-layout {
				display:flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
		
			
			
			.wrapper {
				margin: 0 auto;
				max-width:1000px;
				width:100%;
			}
			

			.popupDiv {
				position:fixed;
				top:10rem;
				right:2rem;
				height:200px;
				width:10rem;
				background-color:aqua;
			}
			
			.popupDiv .menuButton {
				width:100%;
				margin:0;
				border:0;
				border-radius:0;
	
			}

			.headShot {
				margin:0;
				padding:0;
				height:4rem;
			}
			
			.inlineBlock49 {
				display:inline-block;
				width:49%;
				min-width:20rem;
			}
				
				


