@import url("/fonts/VGA/stylesheet.css");
@import url("/styles/colorscheme-vga16.css");
* { box-sizing: border-box; font-weight: normal; }
:root {
	--font-8x14: "Mx437 IBM VGA 8x14";
	--font-8x16: "Mx437 IBM VGA 8x16";
	--font-9x8: "Mx437 IBM VGA 9x8";
	--font-9x14: "Mx437 IBM VGA 9x14";
	--font-9x16: "Mx437 IBM VGA 9x16";
	--font-8x14-2x: "Mx437 IBM VGA 8x14-2x";
	--font-8x16-2x: "Mx437 IBM VGA 8x16-2x";
	--font-9x8-2x: "Mx437 IBM VGA 9x8-2x";
	--font-9x14-2x: "Mx437 IBM VGA 9x14-2";
	--font-9x16-2x: "Mx437 IBM VGA 9x16-2x";
	--font: var(--font-8x16), monospace;
	--font2x: var(--font-8x16-2x), monospace;
	--gap: 1rem;
}
.cont {
	padding: var(--gap) 0 0 var(--gap);
}
.ent  {
	margin:  0 var(--gap) var(--gap) 0;
}
.flex { flex: 1; }
.flexbox-x, .flexbox-y { display: flex; }
.flexbox-x { flex-direction: row; }
.flexbox-y { flex-direction: column; }
.flexbox-x.flexbox-reverse { flex-direction: row-reverse; }
.flexbox-y.flexbox-reverse { flex-direction: column-reverse; }
.jc-centered, .centered { justify-content: center; }
.ai-centered, .centered { align-items: center; }
.ta-centered, .centered { text-align: center; }
html, body {
	min-width: 100vw;
	max-width: 100vw;
	min-height: 100vh;
	max-height: 100vh;
}
html {
	cursor:  url('/images/wincur/Cursor79.cur'), auto;
	text-rendering: geometricPrecision;
	line-height: 1;
	background: var(--bg);
	color: var(--brightwhite);
	font-family: var(--font);
	font-size: 16px;
}
body {
	margin: 0;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	/*padding: 1em 2ch;*/
}
header {
	order: 1;
	color: var(--header-txt);
	background-color: var(--header-bg);
	display: flex;
	flex-direction: column;
}
#header {
	min-height: 1em;
	font-size: 2rem;
	text-align: center;
	font-family: var(--font2x);
}
nav {
	padding: 0 1ch;
	display: flex;
	flex-direction: row;
	background-color: var(--nav-bg);
	outline: 1px solid var(--header-outline);
}
nav a.navlink, nav .dropdown>a {
	text-decoration: none;
	padding: 0 1ch;
	color: var(--nav-navlink-txt);
}
nav a.navlink:hover, nav .dropdown:hover>a {
	background: var(--nav-navlink-hover-bg);
	color: var(--nav-navlink-hover-txt);
}
nav .dropdown {
	display: flex;
	flex-direction: column;
	position: relative;
}
nav .dropdown .dropdown-menu, nav .nested-dropdown-menu {
	white-space: nowrap;
	outline: 1px solid var(--header-outline);
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: var(--nav-bg);
	padding: 1ch;
	list-style: none;
	flex-direction: column;
	min-width: 8ch;
  width: auto;
	box-shadow: 1ch 1ch 0 var(--nav-dropdown-shadow);
}
nav .dropdown > .dropdown-menu > * {
	text-decoration: none;
	color: var(--nav-navlink-txt) !important;
}
nav .dropdown > .dropdown-menu > *:hover {
	background-color: var(--nav-navlink-hover-bg) !important;
	color: var(--nav-navlink-hover-txt) !important;
}
nav .dropdown:hover > .dropdown-menu { display: flex; }
nav .nested-dropdown {
	position: relative;
}
nav .nested-dropdown > .nested-dropdown-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: var(--nav-bg);
  outline: 1px solid var(--header-outline);
  padding: 1ch;
  list-style: none;
  box-shadow: 1ch 1ch 0 var(--nav-dropdown-shadow);
}
nav .nested-dropdown:hover .nested-dropdown-menu { display: flex; }
nav .nested-dropdown-menu * { text-decoration: none; }
nav .nested-dropdown-menu *:hover {
  background-color: var(--nav-navlink-hover-bg);
  color: var(--nav-navlink-hover-txt);
}
main {
	order: 2;
	flex: 1;
	display: flex;
	flex-direction: row;
}
.pagetitle {
	font-size: 2rem;
	font-family: var(--font-8x16-2x);
	color: var(--accent);
	text-align: center;
}
hr {
	border: 0;
	margin: 1ch 0;
	padding: 0;
	height: 0;
	width: 100%;
	outline: 1px solid var(--separator);
}
aside {
	display: flex;
	flex-direction: column;
	min-width: 256px;
	max-width: 256px;
}
aside#aside-left { order: 1; }
#main { order: 2; flex: 1; }
aside#aside-right { order: 3; }
.window {
	background-color: var(--window-bg);
	outline: 1px solid var(--window-outline);
	box-shadow: 1ch 1ch var(--window-shadow);
}
.window > .title {
	border-bottom: 1px solid var(--window-outline);
	background-color: var(--window-title-bg);
	color: var(--window-title-txt);
	text-align: center;
	padding: 0 1ch;
}
.window:hover > .title {
	background-color: var(--window-active-title-bg);
	color: var(--window-active-title-txt);
}
.window > .user-content {
	padding: 1ch 1ch;
	color: var(--window-content-txt);
}
footer {
	order: 3;
	background-color: var(--footer-bg);
	padding: 0 1ch;
	color: var(--footer-txt);
	outline: 1px solid var(--footer-outline);
}
.footer2 {
	padding: 0 1ch;
	font-family: var(--font-8x16);
}

table {
	outline: 1px solid var(--table-outline);
	border-collapse: collapse;
}
table thead {
	background-color: var(--table-thead-bg);
	color: var(--table-thead-txt);
}
table td, table th { padding: 1ch; }
table thead tr th:not(:last-child) { border-right: 1px solid var(--table-thead-outline); }
table thead:not(:only-child) tr th { border-bottom: 1px solid var(--table-thead-outline); }
table tbody {
	background-color: var(--table-tbody-bg);
	color: var(--table-tbody-txt);
}
table tbody tr td:not(:last-child) { border-right: 1px solid var(--table-tbody-outline); }
table tbody tr:not(:last-child):not(:only-child) td { border-bottom: 1px solid var(--table-tbody-outline); }
table tbody tr:hover { background-color: var(--table-tbody-active-bg); color: var(--table-tbody-active-txt); }
table tbody tr:hover td { border-color: var(--table-tbody-active-outline); }
button, input, textarea {
	line-height: 1;
	font-family: inherit;
	font-size: inherit;
	border: none;
	outline: 1px solid var(--window-outline);
	background: inherit;
	color: inherit;
}
textarea {
	min-width: 8ch;
	min-height: 1em;
	max-width: 100%;
	max-height: 100%;
}
button:hover {
	background-color: var(--anchor-active-bg);
	color: var(--anchor-active-txt);
}
h2 {
	font-size: 2rem;
	margin: 0;
}
a {
	cursor:  url('/images/wincur/Cursor107.cur'), auto;
}
a, a:visited {
	color: var(--anchor-txt);
}
a:hover {
	background-color: var(--anchor-active-bg); color: var(--anchor-active-txt);
}
.codeblock {
	background-color: var(--black);
	color: var(--white);
	outline: 1px solid var(--window-outline)
}
pre {
	line-height: 1;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	padding: 1ch;
}
ul li::marker {
	content: '==> '
}

.bl { color: var(--black); }
.r { color: var(--red); }
.g { color: var(--green); }
.b { color: var(--blue); }
.y { color: var(--yellow); }
.m { color: var(--magenta); }
.c { color: var(--cyan); }
.w { color: var(--white); }
.bbl { color: var(--brightblack); }
.br { color: var(--brightred); }
.bg { color: var(--brightgreen); }
.bb { color: var(--brightblue); }
.by { color: var(--brightyellow); }
.bm { color: var(--brightmagenta); }
.bc { color: var(--brightcyan); }
.bw { color: var(--brightwhite); }
.x88x31 {display:flex;}