:root {
	--page-bg:          linear-gradient(135deg, #eef4f9 0%, #ffffff 100%);
	--header-gradient:  linear-gradient(135deg, #eef4f9 0%, #f7e3c4 62%, #f09c1c 120%);

	--nav-fg:           #55606e;
	--nav-fg-hover:     #1d2430;

	--surface:          #fff;              /* fixed mobile header bar */
	--surface-shadow:   rgba(0,0,0,0.12);

	--accent:           #dd7a01;
	--accent-hover:     #ffb03a;
	--accent-pressed:   #dd6600;

	--hero-fg:          #3a4450;
	--hero-heading:     #1d2430;
	--card-heading:     #dd7a01;
}

html {
	overflow-x: hidden;
}
body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: var(--page-bg);
	background-attachment: fixed;
	font-family: Segoe UI, Helvetica, sans-serif;
	font-size: 10pt;
}

h1,h2,h3 {
	xtext-transform: lowercase;
	font-weight: lighter;
}
h2,h3 {
	margin-bottom: -0.5em;
}
h2.question {
	text-transform: none;
}
ul {
	
}
ul li {
	margin: 0.5em 0em;
}

a, a:link, a:visited {
	color: #e63;
	text-decoration: none;
}
a:hover {
	color: #aaa;
	text-decoration: underline;
}
a:focus {
	outline: 1px black dotted;
}
a:active {
	background-color: #fff;
}
defn {
	border-bottom: 1px dotted;
	cursor: help;
}
b, strong {
	font-weight: bold;
}

div.colorswatch {
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 1px black solid;
	vertical-align: bottom;
}

/* Tables */
table
{
	width: auto;
	border-collapse: collapse;
}
table tr
{
	
}
table tr:hover td {
	background-color: #eee;
}
table tr td, table tr th
{
	border-bottom: 1px #ccc solid;
	padding: 0.25em 1em;
}
table tr th
{
	text-align: left;
	border: none;
	border-bottom: 1px #ccc solid;
	text-transform: uppercase;
	font-weight: 600;
}
table td.deemphasis {
	color: #999;
}
table td.deemphasis div.colorswatch {
	opacity: 0.5;
}
table tr.disabled {
	opacity: 0.5;
}
table tr.disabled td.deemphasis {
	opacity: 1;
	color: black;
}

table.bare
{
	background-color: transparent;
	border: none;
	background-image: none;
	background-repeat: no-repeat;
	width: auto;
	padding: 0;
	margin: 0;
}
table.bare tr th
{
	text-align: left;
}
table.bare tr td
{
	border: none;
	padding-left: 0;
	padding-right: 0;
	margin: 0;
}



#main-container {
	max-width: 932px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;

	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
.tile-container-small { grid-area: 1 / 1; }
#header-bar           { grid-area: 2 / 1; }
#main                 { grid-area: 3 / 1; }
#footer               { grid-area: 4 / 1; }
#main-container::before {
	content: "";
	grid-area: 1 / 1 / 3 / 2;
	margin: 0 calc(50% - 50vw);
	background: var(--header-gradient);
	border-bottom: 1px #999 solid;
}

#header {
	padding: 0;
	line-height: 0;
	xbackground-color: #EEF4F9;
	xbackground-color: #262C37;
}
#header p {
	display: none;
}
#header img {
	margin-left: 40px;
	margin-top: 30px;
}
#home-splash {
	background-image: url('home-splash.png');
	font-size: 14pt;
	height: 375px;
}
#home-splash p {
	width: 560px;
}
#footer {
	text-align: center;
}
#xfooter a {
	color: #ccc;
}
#top_hdr {
	border: 0;
	padding-top: 15px;
	margin-bottom: 51px;
}
.page-main {
	margin: 0px 5px 5px 5px;
	font-size: 12pt;
}
.page-main > div {
	padding: 10px 50px;
}
.page-main > div > div {
	
}

.gallery-img > img {
	max-width: 100%;
}

.tile-container, .tile-container-small {
}
.tile-container-small {
	margin: 0 55px;
}
.tile-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.tile {
	display: block;
	height: auto;
	margin: 0px;
	
	background-color: transparent;
	
	font-size: 12pt;
	font-weight: lighter;
	text-decoration: none;
	text-align: center;
	
	transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
}
a.tile, a.tile:link, a.tile:visited {
	color: var(--nav-fg);
}
a.tile:hover, a.tile:active {
	background-color: transparent;
	color: var(--nav-fg-hover);
	text-decoration: none;
}
.tile div {
	margin: 10px;
}

a.button {
	display: inline-block;
	padding: 10px 30px;
	
	background-color: #F0F0ED;
	color: black;
	
	text-decoration: none;
	text-align: center;
	
	border: 1px #999 solid;
	border-radius: 8px;
}
a.button img {
	vertical-align: middle;
	margin-left: -10px;
}
.button:hover {
	background-color: #ff9600;
	color: white;
}
.button:active, .title:focus {
	background-color: #dd6600;
	color: white;
	outline: 1px black dotted;
}

/* Platform-specific content */
html:not(.platform-is-windows)	.platform-windows,
html:not(.platform-is-android)	.platform-android,
html:not(.platform-is-ipados)	.platform-ipados,
html:not(.platform-is-ios)		.platform-ios,
html:not(.platform-is-chromeos)	.platform-chromeos,
html:not(.platform-is-macos)	.platform-macos,
html:not(.platform-is-linux)	.platform-linux,
html.platform-known				.platform-fallback {
	display: none;
}

/* Themes */
/*.bg-gray, .fg-gray, .tile-gray			{ border-bottom-color: #888; }
.bg-red, .fg-red, .tile-red 			{ border-bottom-color: #FF0011; }
.bg-orange, .fg-orange, .tile-orange 	{ border-bottom-color: #ff6600; }
.bg-yellow, .fg-yellow, .tile-yellow 	{ border-bottom-color: #E8C100; }
.bg-green, .fg-green, .tile-green 		{ border-bottom-color: #42b223; }
.bg-cyan, .fg-cyan, .tile-cyan 			{ border-bottom-color: #34c4c9; }
.bg-blue, .fg-blue, .tile-blue 			{ border-bottom-color: #2772d4; }
.bg-indigo, .fg-indigo, .tile-indigo 	{ border-bottom-color: #691cf8; }
.bg-magenta, .fg-magenta, .tile-magenta { border-bottom-color: #c31ce8; }

body h1			{ color: #656565; }
body h2			{ color: #666666; }
body.red h1		{ color: #FF0011; }
body.red h2		{ color: #a8222d; }
body.orange h1	{ color: #ff6600; }
body.orange h2	{ color: #bd7209; }
body.yellow h1	{ color: #E8C100; }
body.yellow h2	{ color: #a9a540; }
body.green h1	{ color: #42b223; }
body.green h2	{ color: #276c14; }
body.cyan h1	{ color: #34c4c9; }
body.cyan h2	{ color: #187275; }
body.blue h1	{ color: #2772d4; }
body.blue h2	{ color: #104487; }
body.indigo h1	{ color: #691cf8; }
body.indigo h2	{ color: #260367; }
body.magenta h1 { color: #c31ce8; }
body.magenta h2 { color: #8b1ea4; }
*/

/*
body h1			{ color: #656565; }
body h2			{ color: #666666; }
body.red h1		{ color: #a8222d; }
body.red h2		{ color: #7d4f4f; }
body.orange h1	{ color: #bd7209; }
body.orange h2	{ color: #945c28; }
body.yellow h1	{ color: #a9a540; }
body.yellow h2	{ color: #98810c; }
body.green h1	{ color: #276c14; }
body.green h2	{ color: #54785a; }
body.cyan h1	{ color: #187275; }
body.cyan h2	{ color: #547873; }
body.blue h1	{ color: #104487; }
body.blue h2	{ color: #546478; }
body.indigo h1	{ color: #260367; }
body.indigo h2	{ color: #635775; }
body.magenta h1 { color: #8b1ea4; }
body.magenta h2 { color: #78546a; }
*/

.xtile:hover { opacity: 0.6; }
.xtile:active { opacity: 1; }

div.imageleft
{
	float: left;
	margin-right: 10px;
}
div.imageright
{
	float: right;
	margin-left: 10px;
}
div.imageleft, div.imageright, div.image
{
	padding: 5px;
	border: 1px #cccccc solid;
	xbackground-color: white;
}
div.imageleft img, div.imageright img, div.image img
{
	display: block;
	border: 0;
}

/* Boxes */
.box, .notice, .warning, .tip, .info {
	border: 1px solid;
	padding: 0.5em !important;
	margin: 0;
	background-repeat: no-repeat;
}
.box {
	border-color: #666;
}
.notice {
	border-color: #ed2;
	background-color: #fff599;
}
.warning {
	border-color: #d55;
	background-color: #ff9393;
}
.info {
	border-color: #6a6;
	background-color: #88db7f;
}
.tip {
	border-color: #58d;
	background-color: #94bdff;
}
.warning strong, .notice strong, .tip strong {
	font-size: 11pt;
}

/* Issue Tracker and more */
a.issue-link {
	text-decoration: none;
	xcolor: black;
}
.disabled, .disabled a.xissue-link  {
	color: gray;
}

/* Scrollbar IE */
/*html {
	scrollbar-face-color: #999;
	scrollbar-base-color: #999;
	scrollbar-arrow-color: #444;
	scrollbar-track-color: #444;
	scrollbar-shadow-color: #999;
	scrollbar-highlight-color: #999;
	scrollbar-3dlight-color: #999;
	scrollbar-darkshadow-Color: #999;
	scrollbar-width: 12px;
}*/

/* Scrollbar WebKit */
/*::-webkit-scrollbar {
	width: 12px;
}
::-webkit-scrollbar-track {
    background-color: #ccc;
}
::-webkit-scrollbar-thumb {
    background-color: #999; 
}
::-webkit-scrollbar-thumb:window-inactive {
	background-color: #aaa; 
}*/

/* Information Bar */
div.infobar {
	background-color: #FFFFE0;
	background-color: rgba(255,255,224,0.9);
	position: fixed;
	top: 0px; 
	left: 0px; 
	width: 100%; 
	height: auto; 
	line-height: 2.5;
	border-bottom: 1px #CECEB5 solid;
	box-shadow: 0 2px 10px 0 rgba(0,0,0,0.12);
}
div.infobar div.infobaricon {
    float: left;
    margin-left: 1em;
}
div.infobar div.infobartext {
	float: left;
	margin-left: 10px;
}
div.infobar div.infobarclose {
	float: right;
	margin-right: 10px;
}
div.infobar a, div.infobar a:link, div.infobar a:visited {
	background-color: transparent;
	color: blue;
	text-decoration: underline;
}
div.infobar a:hover, div.infobar a:active, div.infobar a:focus {
	background-color: transparent;
	color: red;
	text-decoration: underline;
}
div.footerwarning {
	display: inline-block;
	background-color: #FFFFE0;
	border-radius: 0.25em;
	padding: 0.25em 0.5em;
	font-size: 10pt;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

/* Mobile friendly */
#hamburger {
	display: none;
	position: relative;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}
#hamburger:active {
	background-color: transparent;
	outline: none;
}
#hamburger span {
	display: block;
	position: absolute;
	height: 12.5%;
	width: 80%;
	background: #555;
	opacity: 1;
	left: 0;
	transform: rotate(0deg);
	transition: .25s ease-in-out;
}
#hamburger span:nth-child(1) {
	top: 12.5%;
}
#hamburger span:nth-child(2), #hamburger span:nth-child(3) {
	top: 37.5%;
}
#hamburger span:nth-child(4) {
	top: 62.5%;
}
#hamburger.open span {
	width: 100%;
}
#hamburger.open span:nth-child(1) {
	top: 33%;
	width: 0%;
	left: 50%;
}
#hamburger.open span:nth-child(2) {
	transform: rotate(45deg);
}
#hamburger.open span:nth-child(3) {
	transform: rotate(-45deg);
}
#hamburger.open span:nth-child(4) {
	top: 33%;
	width: 0%;
	left: 50%;
}

#nav-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 100;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

#nav-sidebar {
	display: none;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: -280px;
	width: 280px;
	height: 100%;
	background: #fff;
	box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2) inset 0 10px 0 white;
	z-index: 1000;
	overflow-y: auto;
	transition: left 0.3s ease;
}
#nav-sidebar.open {
	left: 0;
}

.sidebar-tile {
	display: block;
	padding: 15px 20px;
	color: black;
	text-decoration: none;
	font-size: 13pt;
	font-weight: lighter;
	border-left: 5px solid transparent;
	transition: background-color 0.1s ease;
}
.sidebar-tile:hover {
	background-color: #f0f0f0;
	color: black;
	text-decoration: none;
}
.sidebar-tile:active {
	background-color: #ddd;
}
#nav-sidebar a, #nav-sidebar a:link, #nav-sidebar a:visited { color: black; }
#nav-sidebar .tile-gray   { border-left-color: #888; }
#nav-sidebar .tile-red    { border-left-color: #FF0011; }
#nav-sidebar .tile-orange { border-left-color: #ff6600; }
#nav-sidebar .tile-yellow { border-left-color: #E8C100; }
#nav-sidebar .tile-green  { border-left-color: #42b223; }
#nav-sidebar .tile-cyan   { border-left-color: #34c4c9; }
#nav-sidebar .tile-blue   { border-left-color: #2772d4; }
#nav-sidebar .tile-indigo { border-left-color: #691cf8; }
#nav-sidebar .tile-magenta{ border-left-color: #c31ce8; }

@media (max-width: 960px) {
	#main-container {
		width: 100%;
		padding-top: 75px;
		box-sizing: border-box;
	}
	#header-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		margin: 0;
		z-index: 500;
		background-color: var(--surface);
		box-shadow: 0 2px 10px 0 var(--surface-shadow);
	}
	#header {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 15px;
		box-sizing: border-box;
		line-height: normal;
		height: 75px;
	}
	#header img {
		margin: 0 !important;
		max-height: 55px;
		width: auto;
	}
	#hamburger {
		display: block;
	}
	.tile-container-small {
		display: none;
	}
	#nav-overlay {
		display: block;
	}
	#nav-overlay.open {
		opacity: 1;
		pointer-events: auto;
	}
	#nav-sidebar {
		display: flex;
		top: 75px;
		height: calc(100% - 75px);
	}
	.page-main > div {
		padding: 10px 20px;
	}
	
	.page-main img {
		max-width: 100%;
		height: auto;
	}
	
	#top_hdr {
		padding-top: 0;
	}
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	:root {
		--page-bg:          linear-gradient(135deg, #14161b 0%, #2b3240 100%);
		--header-gradient:  linear-gradient(135deg, #14161b 0%, #2b3240 55%, #c07d10 145%);

		--nav-fg:           #98a3b2;
		--nav-fg-hover:     #fff;

		--surface:          #242b38;
		--surface-shadow:   rgba(0,0,0,0.4);

		--hero-fg:          #c9d1de;
		--hero-heading:     #fff;
		--card-heading:     #f0a93a;
	}

	body {
		color: #d0d8e4;
	}

	/*
	body h1       { color: #8a9ab0; }
	body h2       { color: #7a8a96; }
	body.red h1   { color: #FF0011; }
	body.red h2   { color: #ee6877; }
	body.orange h1 { color: #ff6600; }
	body.orange h2 { color: #c07020; }
	body.yellow h1 { color: #E8C100; }
	body.yellow h2 { color: #cfbf70; }
	body.green h1  { color: #42b223; }
	body.green h2  { color: #30882a; }
	body.cyan h1   { color: #34c4c9; }
	body.cyan h2   { color: #1e9090; }
	body.blue h1   { color: #7dace9; }
	body.blue h2   { color: #418fee; }
	body.indigo h1 { color: #8844ff; }
	body.indigo h2 { color: #b092eb; }
	body.magenta h1 { color: #d030f0; }
	body.magenta h2 { color: #cf80e2; }*/

	/*a, a:link, a:visited { color: #e8714d; }
	a:hover              { color: #99aabb; }
	a:focus              { outline: 1px #888 dotted; }
	a:active             { background-color: #333; }*/
	div.colorswatch { border-color: #777; }

	table tr:hover td                  { background-color: #252e40; }
	table tr td, table tr th           { border-bottom-color: #3a4050; }
	table tr.disabled td.deemphasis    { color: #d0d8e4; }
	table td.deemphasis                { color: #6a7888; }

	div.imageleft, div.imageright, div.image { border-color: #3a4458; }

	.box     { border-color: #778; }
	.notice  { border-color: #c8a800; background-color: #3d3900; color: #f0e060; }
	.warning { border-color: #c03030; background-color: #4d1414; color: #f8a0a0; }
	.info    { border-color: #30a030; background-color: #143014; color: #90d090; }
	.tip     { border-color: #3070c0; background-color: #102848; color: #90b8e8; }

	.disabled { color: #58687a; }

	div.infobar {
		background-color: rgba(50, 44, 0, 0.95);
		border-bottom-color: #5a5000;
	}
	div.infobar a, div.infobar a:link, div.infobar a:visited { color: #7ab0ff; }
	div.infobar a:hover, div.infobar a:active                { color: #ff8888; }
	div.footerwarning { background-color: #3d3900; color: #f0e060; }

	a.button             { background-color: #3a4a60; color: white; }
	a.button:hover       { background-color: #c07810; color: white; }
	a.button:active      { background-color: #905a00; color: white; }

	#hamburger span { background: #a0aab8; }

	#nav-sidebar            { background: #242b38; box-shadow: 2px 0 12px rgba(0,0,0,0.5) inset 0 10px 0 black; }
	.sidebar-tile           { color: #d0d8e4; }
	#nav-sidebar a, #nav-sidebar a:link, #nav-sidebar a:visited { color: #d0d8e4; }
	.sidebar-tile:hover     { background-color: #2e3848; color: #fff; }
	.sidebar-tile:active    { background-color: #3a4458; }
}