/*
// file:	resource.css
// version:	2.0 (dtb)
*/

/* VARIABLES ================================================================ */
/*
  variables are not supported by some browsers (notably IE); usage should ensure
  the site is at least usable without them enabled.
 */
body {
	--dark-1: var(--dark-0);
	--medium-1: var(--medium-0);
	--light-1: var(--light-0);
	
	--dark-2: var(--dark-0);
	--medium-2: var(--medium-0);
	--light-2: var(--light-0);
	
	--dark-3: var(--dark-0);
	--medium-3: var(--medium-0);
	--light-3: var(--light-0);
	
	--hover: var(--silver);
	--hover-border: var(--invalid);
	--hover-text: var(--invalid);
	
	--active: var(--hover);
	--active-border: var(--hover-border);
	--active-text: var(--hover-text);
	
	--focus: var(--dark-0);
	
	--panel: var(--white);
	--panel-border: var(--silver);
	--panel-text: var(--black);
	
	--widget: var(--dark-0);
	--widget-border: var(--panel-border);
	--widget-text: var(--white);
	
	--error-text: var(--white);
	--warning-text: var(--black);
}

/* RESET ==================================================================== */
html, body, div, span,
h1, /*h2, h3, h4, h5, p,*/
a, img,
dl, dt, dd, /*ol, ul, li,*/
button, form, input,
table, tbody, tfoot, thead, tr, th, td,
article, aside, section,
figure, figcaption,
footer, header, hgroup,
menu, nav, summary {
	box-sizing: content-box;
	margin: 0;
	padding: 0;
	border-width: 0;
	font-size: inherit;
	font-family: inherit;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1.15;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* html5 compatibility patches ============================================== */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

datalist {
	display: none;
}

/* GLOBAL =================================================================== */
* {
	border: 0 solid silver;
	border-color: inherit;
	border-color: var(--border, inherit);
	color: var(--text, inherit);
}
.panel {
	--background: var(--panel);
	--border: var(--panel-border);
	--text: var(--panel-text);
	
	background: white;
	background: var(--background, white);
}
a {
	color: blue;
	color: var(--link, blue);
}

html {
	font-size: 86%;
	height: 100%;
	overflow-y: scroll;
}
body {
	min-width: 25em;
	font-family:
		"Segoe UI",
		Roboto,
		Oxygen-Sans,
		Cantarell,
		"Helvetica Neue",
		sans-serif;
	background: #f4f4f4;
	border-color: silver;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	min-height: 100%;
	height: auto;
}
body > *:empty {
	display: none;
}

a,
a:link,
a:hover,
a:visited {
	text-decoration: none;
}

h1 { font-size: 2.8em; }
h2 { font-size: 1.1em; }
h3, h4 { font-size: 1em; }
h1, h2, h3 { font-weight: 500; }

.hidden {
	position: absolute !important;
	bottom: 0 !important;
	border-color: transparent !important;
	background: transparent;
	z-index: -99;
	left: -9999px;
	overflow: hidden;
}

/* HEADER =================================================================== */
#page-header {
	display: -webkit-flex;
	display: flex;
	padding: 8px;
	
	--hover: var(--white);
	
	-webkit-align-items: center;
	align-items: center;
	
	background: #ddd;
	background: var(--background, #ddd);
}

#logo-host {
	-webkit-flex-grow: 0;
	flex-grow: 0;
}
#company-logo {
	max-width: 160px;
}

#page-title {
	padding: 8px;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	-webkit-align-self: center;
	align-self: center;
	font-style: italic;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#page-header .button {
	/*border: 1px solid transparent;*/
}

#site-nav ul {
	list-style-type: none;
	display: -webkit-flex;
	display: flex;
}
#site-nav li {
	margin: 0 4px;
}

/* MAIN ===================================================================== */
.content {
	max-width: 60em;
	margin: 0 auto;
	padding: 1em;
}

.content ul {
	list-style-type: disc;
}

.content table {
	margin: 0 auto;
}
.content td {
	padding: 8px 1em;
}

.equation {
	font-style: italic;
	display: -webkit-flex;
	display: flex;
	margin: 0 auto;
	-webkit-justify-content: center;
	justify-content: center;
}

.tagline {
	font-size: 1.5em;
}
.data-choice {
	font-size: 1.5em;
}
ul.data-choice {
	list-style: none;
}
.motivation {
	margin-top: 6em;
}
.motivation p {
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
}

/* FOOTER =================================================================== */
#page-footer {
	min-height: 20px;
	margin-top: auto;
	/*background: var(--background);*/
	border-top-width: 1px;
}
#page-footer small {
	display: block;
	width: intrinsic;
	width: -moz-max-content;
	width: max-content;
	margin: 6px auto 0;
	opacity: 0.5;
}
#page-footer .content {
	display: -webkit-flex;
	display: flex;
}
#page-footer .content > div {
	width: 50%;
	min-width: 18em;
}
#page-footer p {
	margin-top: 4px;
}
#page-footer a {
	color: var(--text, inherit);
}