/* Larger screens come progressively nearer the end
	 Prefixed items are handled by prefix.js which adds prefixes as necessary .
*/
   
/*************************************************/
/*  Basic components, may be used anywhere       */

/*
* { position:relative; display:flex; flex-flow:column; flex-shrink:0; overflow:hidden; box-sizing:border-box; }
*/

html { font-size:calc(1em + 1vw); }
body { color:#000000; background:#a0c0c8; width:100%; margin:0; padding:0; }

/* 'skip to main content' */
[href="#main"] { position:absolute; top:0; right:100%; }
[href="#main"]:focus { right:auto; }


/* base layout */
body { display:flex; flex-direction:column; flex-wrap:wrap; }
aside { display: flex; flex-direction:column; flex-wrap:nowrap; }
aside > header, aside > nav { order:0; }
main { display:flex; flex-direction:column; flex-wrap:wrap; }
main > section { order:0; flex:1 0 auto; min-height:auto; min-width:auto; align-self:baseline; }

img,embed,objet,video { max-width:100%; } /* per rwd, 1st ed. p.46. */

.error { color:red; !important; }
.hilite { color:white; background-color:green }

/* default rounded corners for various elements */
h1,h2,h3,h4,h5,h6, fieldset, img, header, legend { border-radius:0.3em; }

/* headers */
h1,h2,h3,h4,h5,h6 { font: 0.5em sans-serif; text-align: center; margin: 2px; }
h1 { font-size: 1.5em; }	/* 24/16 */
h2 { font-size: 1.0em; }	/* 16/16 */
h3 { font-size: 0.87em; color: white;}	/* 14/16 */
h4 { font-size: 0.75em; margin: 2px; }	/* 12/16 */
h5 { font-size: 0.63em; color: black; }	/* 10/16 */
h6 { font-size: 0.5em; }	/* 8/16 */

/* ---------------------------- */
.rounded { border-radius:0.5em; }	
		
.touch #mobilOnly { display:block; }
.no-touch #mobilOnly { display:none; }

/* ---------------------------- */
/* lozenge shape buttons - from "CSS3 for Web Designers", Jeffrey Zeldman " */
input[type=button], input[type=submit], button:not(#menuBtn), .button {
	padding: 2px 4px;
	line-height: 1; border: none;
	font-family: Helvitca, Arial, sans-serif;
	color: #222; /*background-color: rgb(240,240,240); font-weight: bold;*/
	text-shadow:0 1px 1px rgba(255, 255, 255, 0.85);
	/*
	background-image: -webkit-linear-gradient(top, #fff, #bbb);
	background-image: linear-gradient(to top, #fff, #bbb);
	*/
	background: linear-gradient(rgb(51,204,102) 0%, rgb(153,204,102) 100%);
	border-radius: 23px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	}
input:disabled, button:disabled, .button:disabled { background:#dddddd; color:#888888; cursor:not-allowed; }
input:disabled { }
.touch input[type=button], input[type=submit], button { font-size:20px; }
.no-touch input[type=button], input[type=submit], button { font-size:12px; }

/* form input fields */
.placeholder { color: #aaa; }	
input, select, textarea { margin: 2px; }
input:not([type=button]):not([type=select]):not([attr=readonly]):focus,
select:focus, 
textarea:focus { box-shadow: 0 0 12px rgba(51,204,255, 0.5); }
input.text { padding: 0 0 0 0.3em; width: auto; }
input[readonly] { border: 0; background-color: #ffffdd; }
input[required]::after { content:"*"; color: red; }
input[type=checkbox] { padding-left: 5px; }
input[type=number], input.number, input.money,
input[type=range], input.range { text-align: right; }
input.num1d {width: 1rem; text-align: right;}
input.num2d {width: 2rem; text-align: right;}
input.num3d {width: 3rem; text-align: right;}
input.num4d {width: 4rem; text-align: right;}
input.num5d {width: 5rem; text-align: right;}

/* ---------------------------- */
aside, main, article, nav, section {
	margin:0; padding:0; 
	}

/* ------- */
#hdrDiv {display:flex; display:flex; flex-direction:row; justify-content:space-between; }
#menuBtn { display:inline; }
header {
	/*position:relative; top:0; left:0;*/
	/*width:auto; height:auto;*/
	background:#ffcc66; 
	border-radius:0.5em;
	}
header h1, h2, h3 { margin:0; padding:0; text-align:left; font-size:90%; display:inline; }

/* ------- */
nav { min-width:100%; margin:0.2em 0 0.2em; }
nav .notPDA { display:none; }
hr.navSpacer { margin:0.5em; margin-left:2em; color:gray; width:75%; padding-left:2em; }

#accordion { margin-left:auto; margin-right:auto; }
.navHeading {	
	position:relative;
	padding-left:1em; margin:0.2em 0.1em 0 0.1em;
	width: 90%; 
	/*color:white; background:black; text-decoration:none;*/
	/*font: normal 120% Veranda; text-align:left; text-decoration:none;*/
	font: normal Veranda; text-align:left; text-decoration:none;
	}
.navHeading, .navHeading a, .navHeading a:hover, .navHeading a:active {
	color:white; background:black; text-decoration:none;
	cursor:pointer;
	}
.touch .navHeading { font-size:1.5em; height:1.5em; }
.navUnselected:before {
	content:"\00A0";
	display:block; position:absolute; top:0.4em; left:4px;
	width:0; height:0;
	border-width:3px 0px 3px 7px;
	border-style:solid;
	border-color:transparent transparent transparent #ffcc66;
	}
.navSelected:before {
	content:"\00A0";
	display:block; position:absolute; top:0.4em; left:5px;
	width:0; height:0;
	border-width:7px 3px 0px 3px;
	border-style:solid;
	border-color:#ffcc66 transparent transparent transparent;
	}
.navContent { 
	margin:0 0.2em 0.1em 1em; padding-left:0.2em; 
	/*font:normal 120% Veranda; text-decoration:none;*/
	font:normal Veranda; text-decoration:none;
	width:88%; color:black; background:white; border:1px solid gray;
	display:none;
	}
.touch .navContent { font-size:1.5em; }
.navContent a, .navContent a:hover, .navContent a:active {
	color:black; background:white; text-decoration:none;
	cursor:pointer;
	}
.navSpacer { padding-left:20px; }
.notOffline { display:none; }
	
/* ---------------------------- */
main {
	color:black; background:#a0c0c8;
 }

/*   improved link displays, "Improved design Patterns" Heydon Pickering, 2016, p.57, 62 */
main a {
	text-decoration: none;
	text-shadow: 0.05em 0 0 #fff, -0.05em 0 0 #fff,
				 0 0.05em 0 #fff, 0 -0.05em 0 #fff,
				 0 0.1em 0 #fff, 0 -0.1em 0 #fff;
	background-image: linear-gradient (to right, currentColor 0%, CurrentColor 100% );
	background-repeat: repeat-x;
	background-position: bottom 0.05em center;
	background-size 100% 0.05em;
	}
main .ie-lte-9 a { text-decoration:underline; }
main a:focus {
	outline:none; background-color: #cef;
	text-shadow: 0.05em 0 0 #cef, -0.05em 0 0 #cef,
				 0 0.05em 0 #cef, 0 -0.05em 0 #cef,
				 0.1em 0 0 #cef, -0.1em 0 0 #cef,
				 0 0.1em 0 #cef, 0 -0.1em 0 #cef;
	}

main h1, main h4, main h5 { color:black; margin:0; padding:0; }
main h1 { padding-top:0.3em; padding-bottom:0.3em; }
main h4 { padding-top:0.2em; padding-bottom:0.2em; }
	
main table {
	font-size:0.9em;
	width:100%;
	border:2px solid gray;
	background-color:white;
	}
	
main td,th {
	padding:0.1em;
	border:2px solid gray;
	background-color:white;
	}

main th { text-align:left; }
main th.lbl { text-align:center; }
main th.secLbl { text-align:center; color:blue; }
main td { text-align:right; }
main td.empty { background:#EBDAC6; }
main td#info { background:#EEEEEE; text-align:center; }
	
/** ============================================================================
 * Media queries for responsive design.
 * These follow after primary styles so they will successfully override.
 */
 
/** - - - - - - - - - - - - - - - - **/
@media screen and (min-width:600px) {
	/* base layout */
	body { display:flex; flex-direction:column nowrap; }
	aside { display: flex; flex-direction:column; }
	main { display:flex; flex-direction:column; min-width:auto; }

	aside, main { border-radius:0.5em; box-shadow:0.2em 0.4em 0.6em -0.2em #000; }
	aside { margin:0.2em 2em 0 2em; width:50%; border:1px solid black; }
	header h1, h2, h3 { font-size:100%; }
	nav { margin-top:0.2em; /*width:100%;*/	}
	.navHeading, .navContent { /*font-size:110%;*/ border-radius:0.2em; }
	.navContent { padding:0.11em; margin:0 0.2em 0 1.0em; }
	
	main { margin:0.5em 2em 0 2em; /*font-size:110%;*/ }

	.shadowed { box-shadow:0.2em 0.4em 0.6em -0.2em #000; }

}

/** - - - - - - - - - - - - - - - - **/
@media screen and (min-width:1024px) {
	/* base layout */
	body { display:flex; flex-direction:row }
	aside { display: flex; flex-direction:column; }
	main { display:flex; flex-direction:row; }
	main > section { flex:5 auto; min-width:auto; }

	body { margin:0; }

	aside {
		/*width:auto; max-width:100%;*/
		display:block; height:auto;
		color:black; background:#a0c0c8; border:0.15em solid black;
	}
	aside { margin:0; width:17%; }

	header { position:static; /*font-size:90%*/; width:100%; }
	header h1, h2, h3 { display:block; }
	header #at{ padding-left:0.5em; }	
	.navHeading, .navContent { /*font-size:100%;*/ }
  	main { margin:0; margin-left:1em; /*font-size:100%;*/ width:auto; border:1px solid gray; }

	.rwd-break { display: none; } /* line break for small screens */
}
  
/* =============================================================================
   Print styles.
   Inlined to avoid required HTTP connection:www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
  
@media print {
  /* { background:transparent !important; color:black !important; box-shadow:none !important; text-shadow:none !important; filter:none !important; -ms-filter:none !important; } /* Black prints faster:h5bp.com/s */
  a, a:visited { text-decoration:underline; }
  a[href]:after { content:" (" attr(href) ")"; }
  abbr[title]:after { content:" (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content:""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border:1px solid #999; page-break-inside:avoid; }
  thead { display:table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside:avoid; }
  img { max-width:100% !important; }
  /*@page { margin:0.5cm; }*/
  p, h2, h3 { orphans:3; widows:3; }
  h2, h3 { page-break-after:avoid; }
}