@import 'reset.css';

/*--------------------------------------------------\
| BASIC TYPOGRAPHY									|
\--------------------------------------------------*/

@font-face {
	font-family: 'Gotham-Ultra';
	src: url('gothamultra.otf');
	font-weight: normal;
	font-style: normal;
}

:root {
	/* color scheme */
	--pale-teal:		#e8ecee;
	--dusty-teal:		#405868;	/* .subnavframe */
	--dark-teal:		#30424f;	/* top-nav, .impact gradient; footer gradient */
	--off-black:		#151d24;	/* a deep teal used in home and impact gradient */

	/* shades of grey */
	--paler-grey:		#f0f0f0;	/* __cart_table; upgrade; tables; .impact labels */
	--paler-grey:		#f2f2f2;	/* table background; code, .impact labels */
	--pale-grey:		#e8e8e8;	/* home */
	--light-grey:		#d4d4d4;
	--medium-grey:		#a0a0a0;
	--deep-grey:		#5e5e5e;
	--dark-grey:		#3c3c3c;	/* input:focus */

	--page-bg:			var(--pale-teal);
	--panel-bg:			var(--pale-grey);
	--panel-bdr:		var(--deep-grey);
	--topnav-bg:		var(--dark-teal);
	--footer-bg:		var(--dusty-teal);

	--link-color:		#067def;
	--link-hover:		#18a3fa;
	--accent-txt:		#206090;	/* dusty blue for Shop's "big bucks" text, user comment subject */
	--alert:			#c00000;	/* red */
	--alert-bg:			#f0d8d8;	/* light red */
	--success:			#4aba72;	/* green */
	--success-bg:		#d8f0d8;	/* light green */


	/* alternate (gold) color */
	--alt-text:			#846c42;	/* alternate text color, used for secondary headings and input prompts */
	--altlink-color:	#e4e1d6;	/* alternate link color used in world map (world.svg) */
	--altlink-hover:	#ddd1b8;
	--btn-active-bg:	#309ada;
	--btn-active-bdr:	#1010b0;
	--btn-active-txt:	white;
	--btn-active-hov:	var(--link-hover);
	--btn-inactive-bg:	#dee2e6;
	--btn-inactive-bdr:	var(--deep-grey);
	--btn-inactive-txt:	black;
	--btn-inactive-hov:	var(--pale-grey);
	--btn-disabled-bg:	var(--pale-grey);
	--btn-disabled-bdr:	var(--medium-grey);
	--btn-disabled-txt:	var(--medium-grey);

	--ui-element-txt:	#406868;		/* <b> tag, used for documenting U/I elements */

	/* .alert-msg */
	--msg-panel-txt:	black;
	--msg-panel-bg:		#ebe4d2;
	--msg-panel-bdr:	#beaa8c;

	/* table item background indicating status */
	--inactive-bg:		#dfdfdf;			/* light grey */
	--voided-bg:		var(--alert-bg);	/* light red */
	--open-bg:			var(--success-bg);	/* light green */
	--proforma-bg:		#d8e8f0;			/* light blue */

	--panel-width:		532px;
}
* {
	box-sizing: border-box;
}
html, body {
	font-family: -apple-system, BlinkMacSystemFont,
		"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
		"Fira Sans", "Droid Sans", "Helvetica Neue",
		sans-serif;
	height: 100%;
	margin: 0;
	padding: 0;
	width: 100%;
	line-height: 1.6em;
}
body {
	background-color: var(--page-bg);
}
p {
	font-size: 1em;
	margin-top: .5em;
	margin-bottom: 1em;
}
h1 {
	font-size: 1.8em;
	margin-bottom: .6em;
}
h2 {
	font-weight: 600;
	font-size: 1.4em;
	color: var(--alt-text);
	margin-top: 1em;
	margin-bottom: .2em;
}
h3 {
	font-weight: 600;
	font-size: 1.15em;
	margin-top: 1em;
	margin-bottom: .2em;
}
h4 {
	font-weight: 600;
}
strong {
	font-weight: 600;
}
b {
	font-weight: bold;
	color: var(--ui-element-txt);
}
em {
	font-style: italic;
}
code {
	font-family: "Consolas", monospace;
	color: var(--alt-text);
	background-color: var(--paler-grey);
	font-size: 1em;
}
blockquote {
	margin: 4px 40px 16px 40px;
}
ol, ul {
	margin-left: 1.7em;
}
li {
	margin-bottom: 0.4em;
}
.anchor::before {						/* this is so that in-page anchors don't hide behind top nav	*/
	display: block;						/* in some cases, such as H2 in panel inside panel-container,	*/ 
	content: " ";							/* this will cause above <a> within 90px to misbehave						*/ 
	margin-top: -90px; 
	height: 90px; 
	visibility: hidden; 
	pointer-events: none;
}
input[type=text],
input[type=search],
input[type=email],
input[type=url],
input[type=password],
input[type=date],
select,
textarea {
	padding: 3px 6px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
	border-radius: 5px;
}
input[type=text]:focus,
input[type=search]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=date]:focus,
select:focus,
textarea:focus {
	outline: 0;
	border-color: var(--btn-active-bdr);
}
hr {
	background: var(--page-bg) url(hr.png) repeat-x top;
	height: 8px;
	border-style: none;
	margin-top: 1.8em;
	margin-bottom: 1.8em;
}
hr.thin {
	height: 3px;
	margin-top: 0.8em;
	margin-bottom: 0.8em;
}
.fineprint {
	font-size: 0.8em;
	line-height: 1.3em;
}
.alert {
	color: var(--alert);
	font-style: normal;
}
.alert b {
	color: var(--alert);
}
.noscroll {
	overflow: hidden;
}
.user-comment-subject {
	font-size: 1.2em;
	color: var(--accent-txt);
}
.user-comment-body {
	font-family: "Baskerville", "Georgia", "Times New Roman";
	font-size: 1.1em;
}
ul.menu-list { /* Menus using <li> tags instead of <div> */
	list-style: none;
	list-style-position: outside;
	margin-left: 0;
}
div#debug {
	width: 80vw;
	border: 3px solid;
	padding: 10px;
	display: flex;
	flex-direction: column;
	margin: 20px auto;
	background-color: lightgray;
}

div#debug pre {
	background-color: white;
	border: 1px solid;
	padding: 0 10px 5px;
	font-family: monospace;
	line-height: 18px;
	overflow: auto;
}


/*--------------------------------------------------\
| COMMON ELEMENTS									|
\--------------------------------------------------*/

/*-- Various small icons inline with text ---------*/
.intext-icon {			/* higher-resolution icons needing scaling */
	height: 1.2em;
	vertical-align: middle;
}
.inline-icon {			/* version, platform & edition icons */
	vertical-align: middle;
	vertical-align: -2px;
	height: 1.2em;
	height: 20px;
}
.dl-icon {				/* download icon */
	margin-right: 4px;
	vertical-align: middle;
	vertical-align: -2px;
}
.icon-info {			/* info icon */
	vertical-align: -5px;
	height: 20px;
}
.external {				/* adds external link symbol to <a> tag */
	background: url("icon_external.png") no-repeat; 
	padding-right: 21px;
	background-size: 20px 20px;
	background-position: right 1px;
}
h2 .external {			/* adds external link symbol to <h2><a> tag */
	padding-right: 24px;
	background-size: 24px 24px;
}

/*-- Tables ----------------------------*/
table {
	border: 1px solid;
	background-color: var(--paler-grey);
}
thead, tfoot {
	background-color: var(--light-grey);
	font-size: 0.9em;
	padding: 0;
	line-height: 1.2em;
}
tr {
	line-height: 1.4em;
}
th, td {
	border: 1px solid;
	border-collapse: collapse;
	padding: 2px 7px;
}
th {
	padding: 0 5px;
}
table.row-highlight tr:hover {
	background-color: var(--pale-grey);
}
table tbody tr.inactive {		/* for rows containing "inactive" items */
	background-color: var(--inactive-bg);
}
.table-scroller {		/* applied to div that contains table; override height as needed */
	overflow: scroll;
	border: 1px solid;
	height: calc(100vh - 350px);
	min-height: 220px;
}
.table-scroller table, .table-scroller th {
	border-top: none;
}
.table-scroller table, .table-scroller td, .table-scroller th {
	border-left: none;
}
.table-scroller th {
	background-color: var(--light-grey);
	position: sticky;
	top: 0;
}

/*-- Miscellaneous adjustments ---------*/
.rtjust {
	text-align: right;
	padding-right: 6px;
}
.ltjust {
	text-align: left;
}
.centered {
	text-align: center;
}
.hidden {
	display: none;
}
.clear {
	clear: both;
}
.pad-right {
	padding-right: 20px;
}
.nowrap {
	flex-wrap: nowrap;
}

/*-- Links -----------------------------*/
a:visited, a:link {
	color: var(--link-color);
	text-decoration: none;
}
a:hover, a:focus, a:active {
	color: var(--link-hover);
	text-decoration: underline;
}

/*-- Success/fail message block --------*/
/* TODO *3: Standardize background colors */
.alert-msg {
	border-radius: 8px;
	border: 2px solid;
	margin: 10px 0 20px;
/*	display: flex;*/
}
.alert-msg-box {
	border-radius: 8px;
	border: 2px solid;
	margin: 10px 0 20px;
	max-width: var(--panel-width);
}
.alert-msg-box.danger {
	border-color: var(--alert);
}
.alert-msg-title {
	padding: 5px;
}
.danger .alert-msg-title {
	background-color: var(--alert);
	color: white;
}
.alert-msg-body {
	padding: 5px;
}
.alert-msg.success {
	color: black;
	background-color: rgb(177, 242, 201);
	border-color: rgb(27, 169, 80);
}
.alert-msg.warn {
	color: var(--msg-panel-txt);
	background-color: var(--msg-panel-bg);
	border-color: var(--msg-panel-bdr);
}
.alert-msg.warn2 {
	color: black;
	background-color: rgb(255, 228, 192);
	border-color: rgb(255, 185, 45);
	border-radius: 3px;
}
.alert-msg.danger {
	background-color: rgb(255, 200, 200);
	border-color: rgb(255, 75, 75);
	padding: 5px 5px 5px 20px;
	background-position: 5px 10px;
}
.alert-msg.danger > .alert-icon {	/* TODO *3: Use local image */
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="red" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');;
	background-repeat: no-repeat;height: 50px;
	width: 40px;
	background-position: center 20%;
}

/*-- Buttons ---------------------------*/
a.button, button {
	padding: 6px 18px;
	font-size: 0.9em;
	text-decoration: none;
	white-space: nowrap;
	margin: 10px 0;
	color: white;
	background: var(--btn-active-bg);
	border: 1px solid var(--btn-active-bdr);
	border-radius: 18px;
	cursor: pointer;
}
a.xxbutton {
	height: 33px;
	display: inline;
}
button {
	padding: 2px 18px;
	height: 33px;
}
button.copy-code-btn {
	background: url(icon_copy.png) center no-repeat;
	background-size: auto;
	margin-left: 5px;
	background-size: 15px;
	border: none;
	padding: 5px 10px;
}
a.button:hover, button:hover {
	color: white;
	background-color: var(--btn-active-hov);
}
a.button.greybtn,
button.greybtn {
	background-color: var(--btn-inactive-bg);
	color: var(--btn-inactive-txt);
	border-color: var(--btn-inactive-bdr);
}
a.button.greybtn:hover,
button.greybtn:hover {
	background-color: var(--btn-inactive-hov);
}
a.button.danger,
button.danger {
	background-color: #F85050;
	border-color: maroon;
}
a.button.danger:hover,
button.danger:hover {
	background-color: #FF2020;
}
a.button:disabled,
a.button:disabled:hover,
button:disabled,
button:disabled:hover {
	background-color: var(--btn-disabled-bg);
	color: var(--btn-disabled-txt);
	border-color: var(--btn-disabled-bdr);
	cursor: default;
}
a.button img {
	vertical-align: middle;
}
a.button.smaller,
button.smaller {
	font-size: 0.8em;
	padding: 4px 8px;
	margin: 4px 0 0;
}
button.smaller {
	padding: 0px 8px;
	height: 27px;
}
a.button.larger,
button.larger {
	height: 48px;
	font-size: 1.5em;
	padding: 8px 20px 10px;
	margin: 12px 0;
	border-radius: 30px;
}
/*-- "Accordion" expandable text -------*/
.accordion {
	cursor: pointer;
	color: var(--link-color);
	text-decoration: none;
	margin-bottom: 0;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
.accordion::before {
	content: "\25B6";
	color: var(--link-color);
	display: inline-block;
	margin-right: 6px;
}
.accordion-open::before {
	content: "\25BC";
}
.accordion:hover, .accordion:focus, .accordion:active {
	color: var(--link-hover);
	text-decoration: underline;
}
.accordion-panel {
	display: none; 
	border-radius: 8px;
	margin: 10px 10px 10px 20px;
}

/*-- Styled radio group ----------------*/
.choices {
}
.choiceprompt {
	font-size: .9em;
	color: var(--alt-text);
}
.choice-container {
	font-size: 1em;
	padding: 9px 0 12px;
	display: flex;
}
.choices.smaller .choice-container {
	font-size: 0.8em;
	padding: 3px 0 6px;
}
.smaller .choiceprompt {
	font-size: 0.8em;
}
.choice-container label {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
.choice-container label input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
.choice {
	padding: 6px 18px;					/* see @media override */
	color: var(--btn-inactive-txt);
	background: var(--btn-inactive-bg);
	border: 1px solid var(--btn-inactive-bdr);
	border-right: none;
}
.choices.smaller .choice {
	padding: 4px 9px;
}
.choice-container label input:checked ~ .choice {
	color: var(--btn-active-txt);
	background-color: var(--btn-active-bg);
	border: 1px solid var(--btn-active-bdr);
	border-right: none;
}
.choice-container label:hover input ~ .choice {
	color: var(--btn-active-txt);
	background-color: var(--btn-active-hov);
	border: 1px solid var(--btn-active-bdr);
	border-right: none;
}
.choice-container label:first-child .choice {
	border-radius: 18px 0 0 18px;
}
.choice-container label:last-child .choice {
	border: 1px solid var(--btn-inactive-bdr);
	border-radius: 0 18px 18px 0;
}
.choice-container label:last-child input:checked ~ .choice {
	border: 1px solid var(--btn-active-bdr);
}
.choice-container label:last-child:hover input ~ .choice {
	border: 1px solid var(--btn-active-bdr);
}

/*-- iPhone-style toggle switch---------*/
div.toggle-container {
	margin-top: 8px;
	margin-bottom: 8px;
	display: flex;
}
.toggle-switch {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 20px;
	margin-top: 4px;
	margin-right: 12px;
}
.toggle-switch input {		/* Hide default HTML checkbox */
	opacity: 0;
	width: 0;
	height: 0;
}
/* The slider */
.toggle {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	border-radius: 34px;
	-webkit-transition: .4s;
	transition: .4s;
}
.toggle:before {
	position: absolute;
	content: "";
	height: 14px;
	width: 14px;
	left: 4px;
	bottom: 3px;
	background-color: white;
	border-radius: 50px;
	-webkit-transition: .4s;
	transition: .4s;
}
input:checked + .toggle {
	background-color: var(--btn-active-bg);
}
input:focus + .toggle {
	box-shadow: 0 0 2px var(--dark-grey);
}
input:checked + .toggle:before {
	-webkit-transform: translateX(14px);
	-ms-transform: translateX(14px);
	transform: translateX(14px);
}


/*-- Common styled flex panels ---------*/
.panel-container {						/* see @media override */
	display: flex;
	flex-wrap: wrap;
}
.centered-panels {
	flex-direction: column;
	align-content: center;
}
.panel {
	width: var(--panel-width);						/* see @media override */
	margin: 8px 16px 16px 0;
	padding: 8px 16px;
	background: var(--panel-bg) url(top-highlight.png) repeat-x border-box;
	border: 1px solid var(--panel-bdr);
	border-radius: 8px;
}
.panel-container .panel {
	margin-bottom: 8px;
}
.panel.halves, .halves {
	width: calc(50% - 8px);
}
.panel.halves:last-child {
	margin-right: 0;
}
.panel.thirds, .thirds {
	width:  calc(33.33% - 11px);
}
.panel.thirds:last-child {
	margin-right: 0;
}
.two-thirds {
	width: calc(66.66% - 11px);
}
.panel.wide {
	width: 100%;
	max-width: 880px;
	margin-right: 0;
}
.panel.full {
	width: 100%;
	margin-right: 0;
}
.panel h2, .panel h3 {
	margin-top: 0;
}
.panel.success {
	border: 2px solid;
	background: var(--success-bg);
	border-color: var(--success);
}
.panel.warn {
	border: 2px solid;
	background: var(--msg-panel-bg);
	border-color: var(--msg-panel-bdr);
}
.panel.danger {
	border: 2px solid;
	background: var(--alert-bg);
	border-color: var(--alert);
}
.panel.impact {   
	color: white;
	background: linear-gradient(160deg, #408090 10%, #4465b9 70%, var(--off-black) 120%);
	border: none;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.impact .panel {		/* restore normal text color for normal panel inside impact panel */
	color: black;
}
.impact h2:not(.impact .panel h2) {
	color: white;
}
.impact a, .impact a {
	color: var(--pale-grey);
	text-decoration: underline;
}
.impact a:hover, .impact a:hover {
	color: white;
}
.impact a.button {
	text-decoration: none;
	color: white;
}
.impact .choiceprompt {
	color: var(--altlink-hover);
}
.impact .panel .choiceprompt {	/* restore normal choiceprompt color for normal panel inside impact panel */
	color: var(--alt-text);
}
.impact .alert {
	color: #ff9090;
}
.impact b {
	color: white;
}
.impact hr {
	background: var(--page-bg) url(hr-impact.png) repeat-x top;
}
.impact button:not(.impact .panel button),
.impact a.button {
	border: 1px solid var(--light-grey);
}
.impact .accordion {
	color: white;
}
.impact .accordion::before {
	color: white;
}
.impact .input-block > div > label {
	color: var(--altlink-hover);
}
.panel-header {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.panel-header h3 {
	flex: 40%;
	margin-right: 8px;
}
.panel-header .choiceprompt {
	flex: 30%;
	margin-right: 8px;
	white-space: nowrap;
}

/*-- Tabbed panel ----------------------*/
.tab-container {
}
.tab-container.medium {
	max-width: 550px;
	min-width: 320px;
}
.tab-header {
	width: 100%;
	display: flex;
	font-size: 1.1em;
}
.tabs {
	display: flex;
	list-style: none;
	margin-left:0;
}
.tab {
	position: relative;
	top: 1px;
	cursor:pointer;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	padding: 2px 20px;
	margin: 0 2px 0 0;
	background-color: var(--light-grey);
	border: 1px solid var(--panel-bdr);
	border-radius: 8px 8px 0 0;
}
.tab.active {
	background: var(--panel-bg) url(top-highlight.png) repeat-x border-box;
	border-bottom: none;
}
.tab:hover {
	color: var(--link-color);
}
.tab-box {
	width: 100%;
	padding: 8px 16px 16px 16px;
	background-color: var(--panel-bg);
	border: 1px solid var(--panel-bdr);
	border-radius: 0  8px 8px 8px;
}

/*== Form input block with aligned labels/fields =====*/
/* Based on https://codepen.io/chriscoyier/pen/DmnlJ  */
/* Note that nesting of divs control the layout ======*/
.input-block {
}
.input-block > div {
	clear: both;
	overflow: hidden;
	padding: 4px;
	margin: 0 0 10px 0;
	display: flex;
}
.input-block .fieldset > div {
	margin: 0 0 5px 0;
}
.input-block > div > label {
	padding-right: 10px;
	font-size: .9em;
	color: var(--alt-text);
}
.input-block .required {
	background: url("icon_required.png") no-repeat;
	background-position: left top;
	background-size: 12px 18px;
	padding-left: 12px;
}
.input-block.prompt-right > div > label {
	text-align: right;
}
.input-block.prompt-right .required {
	background-position: right top;
	padding-left: 0;
	padding-right: 15px;
}
/* set prompt/input proportions */
.input-block > div > label {
	width: 20%;
}
.wide-prompt > div > label {
	width: 30%;
}
.input-block > div > div {
	width: 50%;
}
.panel .input-block > div > div {	/* when inside panel */
	width: 79%;
}
.panel .input-block.wide-prompt > div > div {	/* when inside panel */
	width: 69%;
}
.input-block input[type=text],
.input-block input[type=search],
.input-block input[type=email],
.input-block input[type=url],
.input-block input[type=password],
.input-block select,
.input-block textarea {
	max-width: 500px;
	width: 100%;
}
.input-block input[type=password] {
	max-width: 180px;
}
.input-block .shortfield {
	max-width: 120px;
}
.input-block .mediumfield {
	max-width: 200px;
}

/*-- Background image @ top of page ----*/
#bg-pix {
	top: 60px;
	left: 0;
	position: absolute;
	z-index: -1;						/* avoid obscuring links once invisible */
	width: 100vw;
	opacity: 1;
	transition: opacity 1s;
}
.bg-img {
	width:100%;
	height:calc((100vh - 60px) * 0.25 - 30px);	/* see @media override */
	max-height: 140px;
	object-fit:cover;
	background-color: var(--page-bg);
	border-bottom: 2px solid var(--link-color);
}
.bg-spacer {
	height:calc((100vh - 60px) * 0.25 - 30px);	/* match bg-img height */
	max-height: 140px;
}

/*-- Full-width responsive image -------*/
.shrinking-pix {
	width:100%;
	height:calc((100vh - 60px) * 0.25 - 30px);
	min-height: 200px;
	object-fit:cover
} 

/*-- Modal window ----------------------*/
.modal-bg {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(120, 140, 145, 0.6);
	background: rgba(100, 120, 125, 0.6);
	justify-content: center;
}
.modal-frame {
	position: relative;
	width: 100%;
	max-width: 1080px;
	display: flex;
	justify-content: center;
}
.modal-box {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	background-color: var(--panel-bg);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	overflow-y: auto;
}
.modal-box.screen-centered {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.modal-box.upper-right {
	top: 20px;
	right: 0;
	transform: none;
}
.modal-close {
	position: absolute;
	top: 0;
	right: 8px;
	font-size: 30px;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
.modal-prev,
.modal-next {
	position: absolute;
	top: 50%;
	left: 16px;
	margin-top: -50px;
	font-size: 30px;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
.modal-next {
	left: inherit;
	right: 16px;
}

/*-- Modal slideshow -------------------*/
.modal-box.screenshot {
	top: 20px;
	padding: 0;
	margin: auto;
	width: 100%;
	max-width: 1028px;
	min-width: 600px;
	background-color: var(--page-bg);
	border: 1px solid var(--panel-bdr);
	border-radius: 8px;
}
.modal-box.screenshot p {
	margin: 20px 0 0 0;
	min-height: 54px;	/* consistent room for 2 lines of text */
}
.slides {
	display: none;
	max-width: 920px;
	margin: 12px auto;
}
#theslide {
	width: 100%;
	border: 1px solid var(--medium-grey);
}
.numbertext {
	position: fixed;
	top: 10px;
	left: 18px;
	color: rgb(200, 200, 200);
	font-size: 1.5em;
}

/*-- Thumbnail images ------------------*/
.thumb-container {
	display: flex;
	flex-wrap: wrap;
}
.thumbnail {
	width: 250px;
	margin: 8px 16px 16px 0;
	padding: 0;
	font-size: 0.9em;
}
.thumbnail-img {
	width: 100%;
	transition: 0.3s;
	cursor: pointer;
}
.thumbnail-img:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*-- International Partners ------------*/
.partner-container {
	display: flex;
	flex-wrap: wrap;
}
.partner-map {
	width: 510px;
	height: 256px;
}
.partner-list {
	margin: 8px 16px 16px 0;
	margin-bottom: 8px;
	padding: 8px 16px;
	background: var(--panel-bg) url(top-highlight.png) repeat-x border-box;
	border: 1px solid var(--panel-bdr);
	border-radius: 8px;
	width: 310px;
}
.partner-list h2, .partner-list h3 {
	margin-top: 0;
}


/*--------------------------------------------------\
| TOP NAV MENU										|
\--------------------------------------------------*/

div.navframe {
	overflow: hidden;
	background-color: var(--topnav-bg);
	top: 0;
	left: 0;
	position: fixed;
	width: 100vw;
	z-index: 1000;
	display: flex;
	justify-content: center;
	border-bottom: 2px solid var(--link-color);
}
div.navframe.message-follows {
	border-bottom: 2px solid var(--light-grey);
}
nav {
	background-color: var(--topnav-bg);
	width: 100%;
	max-width: 1080px;
	margin: 0 20px 0 20px;
}
nav #navbar-logo {
	padding: 11px 12px 10px 0;
}
nav #navbar-logo img {
	height: 40px;
	width: 40px;
}
nav a, nav span {
	float: left;
	display: block;
	text-align: center;
	padding: 18px 12px 10px 12px;
	font-size: 1.0em;
	text-decoration: none;
	height: 60px;
}
nav .right {
	float: right;
}
nav a:link, nav a:visited {
	color: var(--light-grey);
}
nav a.selected {
	color: white;
}
nav a:hover, nav a.active {
	color: var(--link-hover);
	text-decoration: none;
}
.searchicon {
	background: url("search_icons.png") no-repeat;
}
.carticon {
	background: url("cart_icons.png") no-repeat;
}
.accounticon {
	background: url("account_icons.png") no-repeat;
}
.navicon {
	padding-left: 42px;
	padding-right: 12px;
	background-position: 12px 20px;		/* Note:  12px matches left padding on other menu items */
	background-size: 24px 120px;
}
.navicon.selected {
	background-position: 12px -76px;
}
.navicon:hover {
	background-position: 12px -28px;
}
.navusername {
	font-size: 0.8em;
}
nav .menuicon {
	display: none;
}
div.subnavframe {
	background-color: var(--dusty-teal);
	top: 60px;
	left: 0;
	position: fixed;
	width: 100vw;
	z-index: 100;
	display: flex;
	justify-content: center;
	height: 40px;
	align-items: center;
}
.subnavframe.message {
	background-color: var(--alert);
	color: white;
	text-align: center;
	border-bottom: 2px solid var(--light-grey);
}
.subnavframe.message a:link, div.message a:visited {
	color: var(--paler-grey);
	text-decoration: underline;
}
.subnavframe.message a:hover {
	color: white;
}
.subnav {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1080px;
	margin: 0 20px;
}
.subnav a {
	font-size: 0.9em;
	text-decoration: none;
	white-space: nowrap;
	margin-right: 20px;
	color: var(--pale-grey);
}
.subnav a.selected {
	color: white;
	font-weight: 600;
}
.subnav a:hover, .subnav a.active {
	color: var(--link-hover);
}

/*--------------------------------------------------\
| SECONDARY NAV										|
|---------------------------------------------------|
| Used by insertSecondaryNav() function in fuse.	|
| See similar approach in Tabbed Panel above.		|
|---------------------------------------------------|
| The css here is fussy, pareticularly the			|
| positioning of the bottom line.  Be sure to test	|
| with display at 150% scaling.						|
\--------------------------------------------------*/

div.secondarynavframe {
	width: 100%;
	display: flex;
	font-size: 1.1em;
}
div.secondarynavbottom {
	height: 12px;
	border: 1px solid var(--btn-inactive-bdr);
	border-bottom: none;
	border-radius: 12px 12px 0 0;
}
.secondarynav {
	display: flex;
	flex-wrap: wrap;
}
.secondarynav a {
	position: relative;
	height: 30px;						/* this eliminates fractional height, which causes display rounding issues */
	top: 1px;
	color: black;
	background-color: var(--light-grey);
	border: 1px solid var(--panel-bdr);
	border-radius: 10px 10px 0 0;
	text-decoration: none;
	white-space: nowrap;
	padding: 2px 20px;
	margin: 2px 2px 0 0;
}
.secondarynav a:first-child {
	margin: 2px 2px 0 20px;
}
.secondarynav a.active {
	background: var(--panel-bg) url(top-highlight.png) repeat-x border-box;
	border-bottom: none;
}
.secondarynav a:hover {
	color: var(--link-color);
}


/*--------------------------------------------------\
| CONTENT											|
\--------------------------------------------------*/

div.contentframe {
	display: flex;
	justify-content: center;
	min-height: calc(100vh - 120px);	/* view height minus footer */
}
#content {
	width: 100%;
	max-width: 1080px;
	padding-top: 80px;					/* default, override for subnav */
	margin: 0 20px 15px 20px;			/* see @media override */
}


/*--------------------------------------------------\
| ACCOUNT PAGE										|
\--------------------------------------------------*/

/*--------------------------------------------------\
| TODO *3: Obsolete?  Remove?						|
.account .content {
	display: flex;
	justify-content: space-between;
}
.account table {
	color: black;
	margin: 0 20px 20px 5px;
}
\--------------------------------------------------*/

.form-hint {
	font-size: 0.8em;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.3em;
}
.form-hint > div {
	display: flex;
	width: 70%;
}
.form-hint-icon {
	margin-right: 5px;
	height: 15px;
	width: 18px;
	display: inline-block;
	background-size: 14px;
	background-repeat: no-repeat;
}
.form-hint-list-item {
	padding-left: 20px;
}
.form-hint-icon.invalid {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="red" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');
}

.form-hint-icon.valid {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
}

.grid-box.grid-3-col {
	column-count: 3;
}
.grid-box.grid-4-col {
	column-count: 4;
}
.grid-box > * {
	display: inline-block;
	width: 100%;
}


/*--------------------------------------------------\
| FOOTER											|
\--------------------------------------------------*/

.footerframe {
	background-color: var(--footer-bg);
	background: linear-gradient(0deg,var(--footer-bg) 85%,var(--dark-teal) 110%);
	padding: 10px 0 5px;
	height: 120px;
	overflow: hidden;
	position: relative;
	z-index: 500;
	display: flex;
	justify-content: center;
}
#footer {								/* see @media override */
	width: 100%;
	max-width: 1080px;
	margin: 0 12px;
}
#footer > div {							/* see @media override */
	display: flex;
}
#footer-links {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex: 43%;
}
#footer-links a {
	color: var(--pale-grey);
	font-size: 1.0em;
	padding: 5px 15px 0 0;
	text-decoration: none;
}
#footer-links a:hover {
	color: var(--link-hover);
}
#footer-stickie {						/* see @media override */
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 14%
}
#footer-social-media {
	align-items: center;
	justify-content: flex-end;
	display: grid;
	flex: 43%;
	grid-template-columns: auto auto auto;
	grid-gap: 10px;
}
.copyright {
	color: var(--light-grey);
	font-size: 0.8em;
	text-align: center;
	line-height: 1;
}


/*--------------------------------------------------\
| RESPONSIVE DESIGN OVERRIDES						|
\--------------------------------------------------*/
/* Mobile Devices w/ small screens / portrait layout */
@media only screen and (max-width:763px) {
	/* START COMMON */
	.choice {
		padding: 4px 9px;
	}
	.panel-container {
		flex-direction: column;
		align-content: center;
	}
	.panel {
		width: 100%;
		max-width: var(--panel-width);
		margin-right: 0;
	}
	.panel.full {
		max-width: 100%;
	}
	.panel.halves {
		width: 100%;
		margin-right: 0;
	}
	.panel.thirds {
		width: 100%;
		max-width: 360px;
	}
	.input-block > div {
		flex-direction: column;
	}
	.input-block > div > label {
		width: 100%;
	}
	.input-block.prompt-right > div > label {
		text-align: left;
	}
	.input-block.prompt-right .required {
		background-position: left top;
		padding-left: 10px;
	}
	.input-block > div > div {
		width: 99%;
	}
	.panel .input-block > div > div {	/* when inside panel */
		width: 99%;
	}
	input[type=text],
	input[type=search],
	input[type=email],
	input[type=url],
	input[type=password],
	select,
	textarea {
		width: 100%; 
	}
	.bg-img {
	}
	.bg-spacer {
	}
	.shrinking-pix {
		min-height: 150px;
	} 
	.partner-map {
		width: 100%;
		max-width: 510px;
	}
	/* END COMMON */


	/* START MENU */
	nav a:not(:first-child) {
		display: none;
	}
	#nav-home {
		display: none;
	}
	nav a.menuicon {
		float: right;
		display: block;
	}
	nav .selected {
		background-color: black;
		color: white;
	}
	nav a:hover, nav a:active {
		background-color: var(--footer-bg);
	}
	nav.responsive {
		position: fixed;
	}
	nav.responsive .menuicon {
		position: absolute;
		right: 0;
		top: 0;
	}
	nav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	nav.responsive {position: fixed;}
	nav.responsive {
		display: block;
		width: 100%;
		text-align: left;
	}
	/* END MENU */

	/* START CONTENT */
	#content {
		margin: 0 14px 10px 14px;
	}
	/* END CONTENT */

	/*START FOOTER*/
	#footer > div {
		flex-direction: column;
	}
	#footer-links {
		justify-content: center;
	}
	#footer-social-media {
		justify-content: center;
	}
	#footer-stickie {
		display: none;
	}
	/*END FOOTER*/
}
/* Mobile Devices w/ short landscape layout */
@media only screen and (max-height:400px) {
	.bg-img {
		height:0;
	}
	.bg-spacer {
		height:0;
	}
}