/*!	custom.css */

/* --------------------------------------------------------------
	* All styles custom just to this site.
-------------------------------------------------------------- */

/* starting over. move standard styles to common.css

*	move:
*	1. Redefining universal tag elements
*		anchors/links, headings, block level elements, standard tags (inline)
		forms(/login/comments), lists(/DL/jumplinks/Q&A/footnotes), tables/rows/cells
*	2. Page layout and positioning
*	3. Major page DIVs
*		masthead/logo/global, banner/photo/breadcrumb, main navigation,
*		sidebars, section navigation, right #sidebar, quick-links navigation
*		bottom navigation, sign-off, footer(copyright)
*	4. Global utility CLASSes for local re-use
		colors, utility styles, return to top, hedge, 

*	keep:
*	5. Content-specific styles
		home page + login and promos, 
		overviews, rollover ov, enrollment tutorial, search results
		news, calculators/comments/popups, charts, 
		sitemap, site tour, glossary, 

** 1==
** Redefining tags */

:root {/* https://www.w3schools.com/cssref/css_colors.asp */
	--color-main: #063;/* SeaGreen  	#2E8B57, DarkGreen  	#006400 */
	--color-accent-dark: #C60;/* Darkorange  	#FF8C00 */
	--color-accent-light: #ec8;
	--color-inverse: #600;
}

html, body {
	height: 100%;/* needed so children can determine height! */
	overflow: hidden;
}
html { font: 14px/1.2 "Noto Sans", "Lucida Grande", Lucida, "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", Helvetica, Verdana, Arial, ArialMT, sans-serif; }
body, div, td, p, ul, ol, button, input, select, textarea {
	font-family: "Noto Sans", "Lucida Grande", Lucida, "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", Helvetica, Verdana, Arial, ArialMT, sans-serif;
}





/* STANDARD TAG REDEFINITION STYLES - custom to this site */

/* HEADING STYLES custom to this site */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: "Noto Sans", "League Gothic", "Helvetica Neue", Verdana, Helvetica, Arial, sans-serif;
	color: #063 !important;/* for print too */
}
h1, .h1, h2 {
	color: var(--color-accent-dark) !important;
}
h1.home {/* unique homepage heading */
	margin: 0;
	font: 2em/normal Minion, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", Georgia, Palatino, serif;/* to do: web font */
	letter-spacing: -.35px;
}
h3 {
	margin-top: 0;
	margin-bottom: .5em;
}
h6 { color: #000 !important; margin-bottom: .35em; }
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { color: var(--color-accent-dark); font-weight: bolder; }

p, dl, ol, ul, li, dt, dd, form, table {/* well, I know... */
	color: #063;
}
p::selection {
	background: #C93;
}
p::-moz-selection {
	background: #C93;
}
blockquote {
	position: relative;
	background: #FFF url("../img/bg-quote.png") no-repeat 75% 50%;
	padding: .35em 2.35em;
	font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
}
blockquote:before,
blockquote:after {
	position: absolute;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 4em;
}
blockquote:before {
	top: 50%;
	left: .1em;
	content: "\201c";
}
blockquote:after {
	right: .1em;
	bottom: 0;
	content: "\201d";
}










/* FORMS AND BUTTONS STYLES custom to this site */

/* optional form layout with .row class */
form .row { margin-bottom: .5em; }
form .row label {
	float: left;
	width: 33%;
}
form .row:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
/*	Forms - login, comments, guestbook */
#captchaimg {
	border: 1px solid #063;
	vertical-align: top;
}
#gbookform fieldset {
	margin-top: -1em; /* MOZ legend positioning, see also IE6 */
}
.form {
	margin: 1em 0 1em 0;
}
.form label {
	display: block;/* block float the labels to left column, set a width */
	float: left;
	clear: left;
	width: 12em;
	text-align: right;
}
.form input,
.form textarea,
.form img {
	float: left;
	width: auto;/* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin-left: 2em;
	margin-top: -.3em;
}
.form textarea {
	margin-left: 1.8em;
}
.form label input {
	float: none;
	margin: 4% auto;/* the save checkbox */
}
.form .help {
	float: right;
	width: 30%;
	font-size: .8em;
	background: #EEE;
	border: 2px solid var(--color-accent-dark);
	margin: -.5em .5em .15em .1em;
}
.form .help h6, .form-layout .help p {
	margin: 0;
}
#comments div.form-bottom {
	position: absolute;
	left: 12em;/* 10em + 2em */
	bottom: .1em;
	clear: both;
	width: 65%;/* just to space Close button better toward right */
}
#comments div.form-bottom input { margin-right: 1.5em; }
#loginform, #registerform {
	border: 1px solid #063;
	background: #f3e7c3;
	margin: 1.5em 0 .5em 0;
}
div.form-layout {
	position: relative;
	padding: .35em;
}

.form-layout dl {
	margin: -.3em 0 0 0;
}
.form-layout dt {
	background-color: var(--color-accent-light);
	margin: 0 11.75em .75em 0;
	padding: .4em;
}
.form-layout dd {
	margin: -2.4em 0 .25em 6em;
}
#registerform .form-layout dt {
	margin-right: .25em;
}
#registerform .form-layout dd {
	margin-left: 15.5em;
}




/* 2==
** LAYOUT ### */
body {
	padding-bottom: 50px;/* odd - compensate for #content margin-top: 50px, or else lose bottom of scrollbars */
}
#content {
	position: relative;
	background: #EEE url("../img/bgRuled.gif") repeat;
/*	background: #EEE url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAYAAABS3WWCAAAAE0lEQVQImWN4//79f4b///9DCABXRQvFYqkKhAAAAABJRU5ErkJggg==');*/
	height: 100%;
	margin-top: 50px;/* skip over header */
	padding: 1em;
	padding-right: clamp(11.4rem, 28vw, 29rem);/* room for #supporting width below, plus gutter */
	overflow-x: auto;/* scrolling. should be hidden? */
	overflow-y: scroll;
	z-index: 0;
	text-align: justify;
	font-size: 2.5vw;
}
#supporting {
	position: absolute;
	right: 1rem;
	top: 1.1rem;
	width: clamp(10.4rem, 25vw, 26rem);
	font-size: 2vw;/* scalable! */
}
#global-top {
	padding: 6px 0 0 314px;/* Space above/before text/links, to clear menu tab/icon + smaller home btn */
	font-size: 1.5vw;/* text/link size */
}
#global-top li {
	background: #CCC;/* readable over leaves */
}



/* 3== Major page DIVs
--- Head --- */
#global {
	position: absolute;
	top: 2px;
	right: 8px;
	color: var(--color-accent-dark);
	text-align: right;
	font-size: .87em;
	z-index: 2;
}
#global a {
	text-decoration: none;
	background-color: #f3e7c3;
}
#global a:hover { background: #FFF9DF; text-decoration: underline; }
#global p {
	margin: 0;
}

/* --- Primary, top, main navigation (topnav) --- */

/* --- Left section navigation and right sidebar common styles --- */

/* --- Right-hand content sidebar --- */



/* 4== --- Global utility CLASSes --- */
.bg0, table.bg3 td { background-color: #FFF; }	/* Background/page color */
.bg1 { background-color: #063; }	/* Primary site color */
.bg2 { background-color: #F3E7C3; }	/* Secondary site color */
.bg3, table.bg3 td { background-color: #EBEBD6; }	/* Tertiary site color */
.debug {
	position: absolute;
	top: 1%;
	left: 25%;
	width: 50%;
	background: #ffc url(../img/error-exclaim.gif) no-repeat 5px 6px;
	border: 2px solid #930;
	padding: 0 .25em 0 3.2em;
}
.title {
	border-bottom: 1px dashed #000;
	cursor: help;
}
.back,
.next {	/* for split back and next btns, calcs, pop-ups, etc. */
	float: left;
	width: 49.5%;
}
.next { text-align: right; }
.return-to-top {	/* Links for "Return to Top" */
	text-align: right !important;
	margin: 1.25em;
	padding-top: 1.25em;
}
.site-hedge {	/* BLUE Legal/source hedge declarations */
	clear: both;
	font-size: 1em;	/* this hedge is no longer allowed to be smaller */
	color: #369;
	margin-top: .5em;
	padding: .5em 0;
}
.fpo {
	background-image: url(../img/fpo.gif);
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.site-hedge strong { color: #036; }

table span.footer {/* photo index pages */
	font-size: .75em;
}

/* pullquote boxes */
div.pullQuoteLeft, div.pullQuoteRight {
	float: left;
	margin: .25em .5em 0 0;
	font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
	font-size: 1.2em;
	line-height: 1.5em;
	color: #063;
	width: 200px;
	border: solid 2px #cc9;
	padding: .5em;
}
div.pullQuoteRight {
	float: right;
	margin: .25em 0 0 .5em;
}

/* dropshadows */
div.dropshadow { /* container */
	float: left;
	background: url(../img/shadowAlpha.png) no-repeat bottom right !important;
	background: url(../img/shadow.gif) no-repeat bottom right; /* if ie lt 7 */
	margin: 1em .5em .25em 1em; /* see ie-6.css */
}
.dropshadow div {
	background: none !important;
	background: url(../img/shadow2.gif) no-repeat left top; /* if ie lt 7 */
	padding: 0; /* see ie-6.css */
}
.dropshadow img,
.dropshadow p {
	background-color: #fff2e0;
	border: 1px solid #888;
	color: #777;
	display: block;
	font: italic 1em Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
	margin: -6px 6px 6px -6px !important;
	margin: 0; /* if ie lt 7 */
	padding: 4px;
	position: relative;
}
h2.has-shadow { /* banner */
	position: absolute;
	top: 38px;
	left: 188px;
	z-index: 13;
	font-weight: bolder;
}
h2.dropshadow {
	position: absolute;
	top: 39px;
	left: 190px;
	color: #3c3 !important;
	z-index: 12;
	font-weight: bolder;
}










/*
** 5==
** content-specific styles */



/*
** 6==
** following content styles are still in-progress		*/

#particles-js {
	position: relative;
	height: 12vw;
	background: #448B65;
	color: #FFF;
}
#particles-js canvas {
	position: absolute;
	top: 0;
}


.tab {
	background: url(../img/tabBG2.png) no-repeat 100% 0;
	color: #FFF;
	display: inline;
	font-size: 1.0em;
	font-weight: bold;
	padding: 2px 15px 0 6px;
	white-space: nowrap;
}
.supporttab {
	display: inline-block;
	background-color: var(--color-accent-dark) !important;/* for print */
	border-bottom: 1px solid var(--color-accent-dark);
	border-radius: 0 1em 0 0;
	margin: 0 1em 0 0;
	padding: .15em .75em .05em .35em;
	color: #FFF !important;
}
.box {
	background-color: #F3E7C3 !important;/* for print too */
	border: 2px solid var(--color-accent-dark);
	line-height: 1.4em;
	margin: 0 2px .5em 0;
	padding: 1px 3px;
}
a.box {
	background-color: #f3e7c3 !important;
	border-width: 1px;
	display: inline;
	text-decoration: none;
}
a.box:hover { background-color: var(--color-accent-dark) !important; color: #FFF; }
.box:active, .promo a.box:active { background-color:#91bd91; } /* interesting - big div.box too like lead-in (FF not IE) */
.box.plain { padding: 0; }
.box.plain a { display: block; margin: 0; padding: .75em 0 .5em 0; } /* banner imgs */
.contentbox {
	background: #FFF url(../img/bgRuled.gif) repeat;
}
.contentbox li {
	margin-bottom: 1px;
}


/* for file upload page */
#fileform input {
	display: inline;/* overriding Bootstrap for input[type="file"]. class didn't take precedence */
}



/* For photo section info popup */
#imageinfo {
	/* visibility:hidden; */
	display: none;
	position: absolute;
	right: 1em;
	top: 5em;
	width: 35em;
	border: 1px solid var(--color-accent-dark);
	background-color: var(--color-accent-light);
	font-size: .8em
}
#imageinfo table { margin-bottom: 0; }
#photoidx100 td,
#photoidx75 td {
	width: 100px;
	text-align: center;
}
#photoidx75 td {
	width: 75px;
}
body#photoslide {
    background: #f3e7c3;
}
#imagenum {
	display: inline-block;
	margin: .5em 0 .5em .5em;
	vertical-align: top; border:
	6px solid #c90; border-left: none;
	border-right: none; color: #063;
}
#photo-big img {
	max-width: 100%;
	height: auto;
}
img.trans, img.image, #content .image { /* checkered background for transparent GIFs and PNGs, and while loading large (JPG too) photos */
	background: url("../img/transbak16.png") repeat;
}
.photofoot {
	float: left;
	width: 102px;
	margin-right: 4px;
	cursor: pointer;
	text-align: center;
	margin-bottom: 4px;
}

/* deemphasis (often used with the "small" tag) */
.deemphasis { font-weight: lighter; }

/* thumbnail border style */
img.thumb,
.thumb img { border: 1px solid #fc840c; }



	
	
/* cleanup styles leaving at end of file for now */
h3 a, h4 a, h5 a { display: block; }

/* Jokes on Firefox users */
html > img { width: 400px !important; height: 400px !important; background: url(../img/photo0.jpg) no-repeat !important; cursor: pointer !important; } /* auto-scroll */
  /* use findbar with Highlight-all */
#__firefox-findbar-search-id { font-size: larger !important; border: thick dotted lime !important; }
#__firefox-findbar-search-id:before { content: '>>' !important; }
#__firefox-findbar-search-id:after { content: '<<' !important; }









/*	Search Results	*/
div.search-head {
	border: 1px solid #063;
	background: #ded;
	font-size: .87em;
	padding: .25em;
	margin: .25em;
}
div.search-head label {
	border: 1px dashed #8b6;
	background: #ddd;
	padding: .35em;
}
div.search-head label:hover {
	background-color: var(--color-accent-light);
}
/*div.search-head input[type="text"] {
	width: 11.5em;  just room for 800x600 
}*/
div.search-head label input {
	margin-bottom: -4px; /* alignment fix */
	margin-right: 6px;
}
div.search-head input[type="submit"] {
	margin: -1px 0 -1px 0; /* alignment fix */
}
div.search-head strong {
	font-weight: bold;
	color: var(--color-accent-dark);
}
.search {
	font-size: .87em;
	margin: .05em;
}
.search em {
	color: #444;
}
.search ol {
	padding-left: .5em;
	margin: 0 0 0 2em;

}
.search li + li {
	border-top: 1px #000 dashed;
	margin-bottom: .25em;
}
.search li.odd {
	background: #ebebd6;
}






/* LISTS STYLES - custom to this site */
#content ul li {
	margin-bottom: .3em;
}
h4.jumplinks {
	background: #E3E3E3;
	padding: .25em;
}
ul.jumplinks, ol.jumplinks {
	background: #D4D4D4 url(../img/on-this-page.gif) no-repeat 90% 50%;
	border-top: 2px solid #063;
	color: #063;
	margin-left: 0;
	margin-bottom: 3em;
	padding: .4em;
}
ul.jumplinks li {
	margin: 0;
	padding-left: 1.25em;
	text-indent: -1.25em;/* for multi-line LIs indent; goes along with padding */
	list-style-type: none;
	color:#000;
}
ul.jumplinks li a {
	background: url(../img/nav-arrow-down.gif) no-repeat 0 .15em;
	padding-left: .75em;
}
ul.jumplinks li a:hover { background: #F3E7C3 url(../img/nav-arrow-down.gif) no-repeat 0 .15em; }
ol.jumplinks li { margin-left: 2em; }

ul.list-plain li {
	line-height: 1.1em;
	margin-bottom: 1em;
}
ul.list-plain li ul {
	list-style-type: disc;
	margin: 1em 1em 1em 2em;
}
ul.list-plain li li { margin: 0; }

/* Q&A lists */
dl.qa dt {
	clear: left;
	display: inline;
	float: left;
	margin-bottom: 1.75em;
	width: 35px;;
}
dl.qa dd {
	display: inline;
	float: left;
	margin-bottom: 1.75em;
	width: 90%;
}
dl.qa .q {
	color: #063;
	font-weight: bold;
	margin-bottom: .4em;
}
/* now in use, move to common: */
dl.aligned:after { /* not working */
	clear: left;
}
dl.aligned dt {
	clear: left;
	float: left;
	margin: 0 1% 0 0;
	text-align: right;
	width: 33%;
	background: #EB5;
	overflow: hidden;
}
dl.aligned dd {
	float: left;
	width: 66%;
	margin: 0;
	background-color: var(--color-accent-light);
	overflow: hidden;
	color: #600;
}

/* footnote lists */
.footnote { font-size: .87em; }	/* Legal/source footer declarations */
.footnote hr {
	border: 1px solid var(--color-accent-dark);
	height: 0px;
	margin: 1.50em 1.5em -1.25em 0;
}
div.footnote {
	border-top: 1px solid var(--color-accent-dark);
	font-size: .67em;
	padding-top: 1em;
}
div.chart div.footnote {
	border: none;
	font-size: .87em;
	padding-top: 0;
}
dl.footnote dt, dl.footnote-full dt {
	clear: left;
	display: inline;
	float: left;
	margin-right: .35em;
	text-align: right;
	width: 2em;
}
dl.footnote dd, dl.footnote-full dd {
	float: left;
	margin-bottom: .5em;
	width: 92%;
}






#content h5 { /* Topic headers in Section overviews -- also homepage billboards	*/
	margin-bottom: 4px;
	font-weight: bold;
	color: #063;
	line-height: 1.05em;
	border-bottom: 1px solid #063;
	margin-top: .5em;
}
#content h5 a {
	color: #063;
	text-decoration: none;
	display: block;
}
div#overview-section h5 {
	position: relative;
	height: 2em;
	margin: 4px 0;
}
h5 a:link, h5 a:visited {
	font-size: 1em;
	font-weight: bold;
	color: #063;
	text-decoration: none;
}
#content h5 a:hover, h5 a:active { color: var(--color-accent-dark); }






/* Calculators, Comments, pop-ups */
#content-inner {
	height: 100%;
	min-width: 410px; /* Goes with flow-x. May want to get rid of this for phones & such I spose(?) */
	padding: .75em .5em 0 1.25em !important;
	text-align: justify;
}
body#comments-thanks #content-inner { min-width: 0; }
div#popup-header {
	background-color: #063;
	padding: .5em;
	position: relative; /* peekaboo */
}
div#popup-header h3 {
	font-size: 1.2em;
	color: #FFF;
}
.base-layout div.center, .base-layout table.center { /* revisit? */
	width: 520px;
	padding-left: 50%;
	margin-left: -260px;
}




/* Sitemap */
#sitemap div.column {
	float: left;
	width: 30%;
	margin-right: 1em;
}
#sitemap a {
	display: block;
	line-height: 1.1em;
	margin-bottom: .35em;
}
#sitemap h5 { margin-top: 1.75em; }
#sitemap h5 a {
	background-color: #f3f3f3;
	padding: 3px;
	margin: 0;
}
#sitemap strong a {
	margin: 0 0 .5em .3em;
	font-size: .87em;
	color: #000;
	text-decoration: underline;
}
#sitemap ul {
	list-style-type: none;
	margin: 0 0 .75em 1.2em;
	font-size: .87em;
}
#sitemap ul ul { font-size: 1em; }
#sitemap a:hover { color: var(--color-accent-dark); }







/*	Glossary	*/
p.glossary {
	font: normal 4.2em Minion, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", Georgia, Palatino, serif;
	color: var(--color-accent-dark);
	margin: 0;
	padding: 0;
	line-height: 1em;
}
p.glossary a {
	color: var(--color-accent-dark);
	text-decoration: none;
}
a span.glossary {
	font-weight: bold;
	color: #063;
}
a span.glossary:hover { color: var(--color-accent-dark); }







/* Callout box */
.callout {
	float: right;
	width: 38%;
	padding: .75em;
	margin: 1em 0 1em 1em;
	color: #000;
	background-color: #D8EDF2;
}
.callout h2 {
	font: bold 1.33em Arial, Helvetica, sans-serif;
}
.callout img {
	float: right;
	margin: 0 0 .5em .5em;
}
.callout > *:first-child {
	margin-top: 0;
}
.callout *:last-child {
	margin-bottom: 0;
}








/* megamenu styles */

[class*="entypo-"]:before {
	font-family: 'entypo', sans-serif;
	font-size: 1.75em;
	/*vertical-align: top;
	line-height: .2em;*/
}

header#topnav {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;/* content (46px logo img) + border */
	z-index: 1;
}
header#topnav h2 {
	font-size: 1.3em;
}
header#topnav button,
header#topnav .btn {
	height: 38px;
	margin-top: 6px;
}
#homelink {
	position: absolute;
	z-index: 2;
	transition: .6s;
}
#homelink a.logo {
	display: block;
	padding: 0 .25em;
}
.btn span {
	line-height: normal;/* globalNav home & search buttons */
}
button.btn {
	padding: 0 0 3px;/* globalNav search */
}

#globalnav {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: #CCC url("../img/fall-leaves.png") 316px center no-repeat;/* E18728 */
	border-bottom: 4px solid var(--color-accent-dark);
	text-align: right;
}
#searchForm {
	width: 13.75em;
	float: right;
}
#searchForm #query1 {
	height: 32px;
	margin: -6px -6px 0 0;
}
header#topnav input#nav {
	display: none;
}
header#topnav input#nav + label {
	display: block;
	position: absolute;
	height: 45px;/* includes 4px bottom overlap for attached tab effect */
	z-index: 3;/* hotspot in front of logo */
	margin: 5px 5px 0 5px;
	padding-right: .55em;
	background: #FD9;
	border: 4px solid var(--color-accent-dark);
	border-radius: .75em .75em 0 0;
	border-bottom-width: 0;
	font-size: 1.5em;
	line-height: 40px;
	text-align: right;
	vertical-align: middle;
	white-space: nowrap;
	color: #600;
	cursor: pointer;
	user-select: none;
	transition: .6s;
}
header#topnav input#nav + label:hover {
	color: var(--color-accent-dark);
	/*background-color: var(--color-accent-light);*/
}

header#topnav input#nav:checked + label {
	color: #C90;
}
header#topnav input#nav + label:before{content:"\f07b"; font-family: 'Font Awesome 5 Free';}/* fa-folder */
header#topnav input#nav + label:hover:before{content:"\f07c"}/* fa-folder-open */
header#topnav input#nav:checked + label:before{content:"\f023\00a0"}/* fa-lock, nbsp */
header#topnav nav {
	position: absolute;
	top: 46px;/* header, minus 4px border */
	left: 0;
	width: 100%;
	max-width: 868px;
	height: auto;
	background: var(--color-accent-dark);
	border-bottom: 4px solid var(--color-accent-dark);
	padding-bottom: 1.5em;/* leave room for #headfoot */
	z-index: 0;
	font-size: .9em;
	transition: .5s;
	transform: translateY(-125%);/* transform: translate3d(0,-125%,0) didn't work in my IE9 */
}
header#topnav input#nav + label:hover ~ nav,
header#topnav nav:hover,
header#topnav input#nav:checked ~ nav {/* open menu for: label hover, nav hover, and check/lock */
	transform: translateY(0);
}
nav section {
	float: left;
	width: auto;
	height: 14.75em;/* longest - Photos, 7 items */
	background: #FD9;
	margin: .25% 0 .25% .25%;
}
nav h2 {
	margin: 0;
}
nav h2 a span {/* font-awesome menu fa-leaf */
	display: inline-block;/* clears the link underline :) */
	line-height: 0;
}
nav ul {
	margin-left: 0;
}
nav ul li {
/*	padding: .25em 2em .25em 3em;*/
	margin: 0;
	list-style-type: none;
}
header#topnav nav a {/* nav dropdown links and header links too */
	display: block;
	padding: .23em;
}
header#topnav nav h2 a {
	padding-top: .75em;
}
header#topnav nav li a {/* if using bullets */
	/*margin-left: -1.55em;
	padding-left: 1.25em;*/
}
header#topnav nav a:hover {
	background: #FED !important;
}
#headfoot {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #FFF;
	background: #600;
	width: 99.5%;/* + l/r borders = 100% */
	margin: 0 .25%;
	padding: .35em .5em;
	font-size: .8em;
}






/* UNIQUE PAGE STYLES */

.g-person {/* Google+ */
	style: max-width: 150px;
}


a.soundcloud-dropbox {
	position: relative;
	background: #464646 url(../img/soundcloud.png) 96% center no-repeat;
	padding: 5px 70px 25px 15px;
	border: 2px solid #999;
	border-radius: 20px 0;
	font-size: .85em;
	text-decoration: none; 
	color: #D9D9D9;
}
a.soundcloud-dropbox span {
	position: absolute;
	bottom: 0;
	left: 15px;
	font-size: .6em;
}


#aericlock {
	float: right;
	width: auto;
	margin-left: .5em;
}
#aericlock table,
.clockbox table {
	background: #AAD;
	border: 2px solid #900;
}
#aericlock table img,
.clockbox table img {
	width: 14px;
	height: 23px;
}






/* begin responsive media queries. overriding defaults above: */

@media only screen and (max-width: 480px) {/* smallest landscape phones, or old iPad portrait */
}
@media only screen and (max-width: 360px) {/* smallest portrait phones */
}
@media only screen and (max-width: 563px) {/* old/small phones, and very small screens. Nexus 5, iPhone 5 portrait */
	#searchForm {
		display: none;/* to do: build - tap to slide reveal search */
	}
	#global-top {
		padding: 6px 4px 0 112px;/* to clear menu tab/icon + smaller home btn, no search */
		font-size: 3.4vw;/* text/link size */
	}
}
@media only screen and (min-width: 564px) and (max-width: 667px) {/* landscape phones only */
	#global-top {
		padding: 4px 0 0 112px;/* to clear menu tab/icon + smaller home btn, search */
		font-size: 2.5vw;/* text/link size */
	}
}
@media only screen and (max-width: 667px) {/* phones p/l PLUS very small tablets. no min-width */
	header#topnav input#nav + label {
		width: 2.5em;
	}
	header#topnav label span {
		display: none;/* hide "menu" label */
	}
	#homelink {
		margin-left: 4.35em;/* for smaller menu label tab */
	}
	#homelink .logo img {
		display: none;
	}
	#globalnav {
		background-position-x: 114px;
	}
	nav section {
		width: 32.9%;/* 3 columns */
	}
	#content {
		padding-right: 1em;/* undo space for #supporting */
		font-size: 3.5vw;
	}
	#supporting {
		position: relative;/* send to bottom */
		width: auto;
		font-size: 3.5vw;
	}
	#mine-personal .wrapper-grid-2-1 {/* personal links page - extra room for .clockbox */
		grid-template-columns: 57% 33%;
	}
}
@media only screen and (min-width: 668px) {/* decent sized-screens  below 768px portrait tablet/iPad, risking to see how it goes */
	header#topnav input#nav + label {
		width: 5.5em;
	}
	#homelink {
		margin-left: 8.6em;
	}
	#homelink a.btn {
		display: none;
	}
	#global-top {
		padding-left: 314px;/* Space before text/links, to clear menu tab/icon/text + home logo */
	}
	nav section {
		width: 16.333%;/* 6 columns */
	}
	#content {
		font-size: 2.5vw;
	}
	#mine-personal .wrapper-grid-2-1 {/* personal links page - extra room for .clockbox, up to 1024 */
		grid-template-columns: 59% 33%;
	}
}





@media only screen and (min-width: 992px) and (max-width: 1199px) {
}
@media only screen and (min-width: 1025px) {/*			lock #supporting as visible						Desktops */
	#content {
		font-size: 2vw;
	}
	#supporting {
		font-size: 1.75vw;
	}
	#mine-personal .wrapper-grid-2-1 {/* personal links page - extra room for .clockbox, 1025+, default */
		grid-template-columns: 66% 33%;
	}
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width: 1224px) {/* lock #supporting as visible	*/
}
@media only screen and (min-width: 1366px) {/*			fonts can get too huge							Desktops - extra wide */
	#supporting {
		font-size: 1.5vw;
	}
}
@media only screen and (min-width: 1440px) {/*			fonts can get too huge							Desktops - very wide */
}
@media only screen and (min-width: 1600px) {/*			fonts can get too huge							Desktops - very extra wide */
	#content {
		font-size: 1.5vw;
	}
}
/* Large screens ----------- */
@media only screen  and (min-width: 1824px) {
}
@media only screen and (min-width: 1920px) {/*			fonts can get too huge							Desktops - seriously already */
}





/* iphone 3, 3 & 3G 3.5" 320x480px 163ppi  */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }

/* iphone 4 & 4s ----------- 3.5"(diagonal) widescreen Multi-Touch display 640(/2)px x 960(/2)px at 326ppi  */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }
	/* iPhone 4s/iOS7 doesn't seem to understand transform, so menu always showing. Adding display none/block. */
	.touch #supporting {
/*		display: none;*/
	}
	.touch input#menulock:checked ~ #supporting {
/*		display: block;*/
	}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}

/* iphone 5, 5C & 5S ----------- 640x1136px */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }

/* iphone 6, 6s ----------- 4.7" 750x1334px 326ppi*/
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }
}

/* iphone 7, 8 */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }

/* Nexus 5X ----------- 5.0" 1080p 462ppi? */
@media only screen and (min-device-width: 412px) and (max-device-height: 732px) {
	#mine-personal .wrapper-grid-2-1 {/* personal links page - extra room for .clockbox */
		width: 100%;
		grid-template-columns: 53% 33%;
	}
}
@media only screen and (min-device-width: 412px) and (max-device-height: 732px) and (orientation: portrait){
}

/* iphone 6+, 6s+, 7+, 8+  ----------- 5.5" 1242×2208px at 401ppi, hardware downsampled to 1080×1920 screen */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
}
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
}

/* iphone X */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
}