/* style.css
 * Cyberhole.online
 * Copyright © 2020,2025 by Mark Damon Hughes. All Rights Reserved.
 */

/** Theme Colors. CGA palette, the only allowed hardcoded colors must be scaled from those. */

.black		{	color: black;		}	/* CGA 00, hex #000000 */
.navy		{	color: navy;		}	/* CGA 01, hex #000080 */
.green		{	color: green;		}	/* CGA 02, hex #008000 */
.teal		{	color: teal;		}	/* CGA 03, hex #008080 */
.maroon		{	color: maroon;		}	/* CGA 04, hex #800000 */
.purple		{	color: purple;		}	/* CGA 05, hex #800080 */
.olive		{	color: olive;		}	/* CGA 06, hex #808000 */
.silver		{	color: silver;		}	/* CGA 07, hex #C0C0C0 */
.gray		{	color: gray;		}	/* CGA 08, hex #808080 */
.blue		{	color: blue;		}	/* CGA 09, hex #0000FF */
.lime		{	color: lime;		}	/* CGA 10, hex #00FF00 */
.aqua		{	color: aqua;		}	/* CGA 11, hex #00FFFF */
.red		{	color: red;		}	/* CGA 12, hex #FF0000 */
.magenta	{	color: magenta;		}	/* CGA 13, hex #FF00FF */
.yellow		{	color: yellow;		}	/* CGA 14, hex #FFFF00 */
.white		{	color: white;		}	/* CGA 15, hex #FFFFFF */
.graydark	{	color: #404040;		}
.orange		{	color: #FF8000;		}
.brown		{	color: #804000;		}
.black25	{	color: rgba(0, 0, 0, 0.25);	}
.black50	{	color: rgba(0, 0, 0, 0.50);	}
.black75	{	color: rgba(0, 0, 0, 0.75);	}

.border-black	{	border: 1px solid black;	margin: -1px;	}	/* 00 */
.border-navy	{	border: 1px solid navy;		margin: -1px;	}	/* 01 */
.border-green	{	border: 1px solid green;	margin: -1px;	}	/* 02 */
.border-teal	{	border: 1px solid teal;		margin: -1px;	}	/* 03 */
.border-maroon	{	border: 1px solid maroon;	margin: -1px;	}	/* 04 */
.border-purple	{	border: 1px solid purple;	margin: -1px;	}	/* 05 */
.border-olive	{	border: 1px solid olive;	margin: -1px;	}	/* 06 */
.border-silver	{	border: 1px solid silver;	margin: -1px;	}	/* 07 */
.border-gray	{	border: 1px solid gray;		margin: -1px;	}	/* 08 */
.border-blue	{	border: 1px solid blue;		margin: -1px;	}	/* 09 */
.border-lime	{	border: 1px solid lime;		margin: -1px;	}	/* 10 */
.border-aqua	{	border: 1px solid aqua;		margin: -1px;	}	/* 11 */
.border-red	{	border: 1px solid red;		margin: -1px;	}	/* 12 */
.border-magenta {	border: 1px solid magenta;	margin: -1px;	}	/* 13 */
.border-yellow	{	border: 1px solid yellow;	margin: -1px;	}	/* 14 */
.border-white	{	border: 1px solid white;	margin: -1px;	}	/* 15 */
.border-graydark {	border: 1px solid #404040;	margin: -1px;	}
.border-orange	{	border: 1px solid #FF8000;	margin: -1px;	}
.border-brown	{	border: 1px solid #804000;	margin: -1px;	}

.box-black	{	border-top: 2px solid #404040; border-left: 2px solid #404040; border-bottom: 2px solid black; border-right: 2px solid black; margin: -2px;	}	/* 00 */
.box-navy	{	border-top: 2px solid blue; border-left: 2px solid blue; border-bottom: 2px solid navy; border-right: 2px solid navy; margin: -2px;	}	/* 01 */
.box-green	{	border-top: 2px solid lime; border-left: 2px solid lime; border-bottom: 2px solid green; border-right: 2px solid green; margin: -2px;	}	/* 02 */
.box-teal	{	border-top: 2px solid aqua; border-left: 2px solid aqua; border-bottom: 2px solid teal; border-right: 2px solid teal; margin: -2px;	}	/* 03 */
.box-maroon	{	border-top: 2px solid red; border-left: 2px solid red; border-bottom: 2px solid maroon; border-right: 2px solid maroon; margin: -2px;	}	/* 04 */
.box-purple	{	border-top: 2px solid magenta; border-left: 2px solid magenta; border-bottom: 2px solid purple; border-right: 2px solid purple; margin: -2px;	}	/* 05 */
.box-olive	{	border-top: 2px solid yellow; border-left: 2px solid yellow; border-bottom: 2px solid olive; border-right: 2px solid olive; margin: -2px;	}	/* 06 */
.box-silver	{	border-top: 2px solid white; border-left: 2px solid white; border-bottom: 2px solid silver; border-right: 2px solid silver; margin: -2px;	}	/* 07 */
.box-gray	{	border-top: 2px solid silver; border-left: 2px solid silver; border-bottom: 2px solid gray; border-right: 2px solid gray; margin: -2px;	}	/* 08 */
.box-blue	{	border-top: 2px solid blue; border-left: 2px solid blue; border-bottom: 2px solid navy; border-right: 2px solid navy; margin: -2px;	}	/* 09 */
.box-lime	{	border-top: 2px solid lime; border-left: 2px solid lime; border-bottom: 2px solid green; border-right: 2px solid green; margin: -2px;	}	/* 10 */
.box-aqua	{	border-top: 2px solid aqua; border-left: 2px solid aqua; border-bottom: 2px solid teal; border-right: 2px solid teal; margin: -2px;	}	/* 11 */
.box-red	{	border-top: 2px solid red; border-left: 2px solid red; border-bottom: 2px solid maroon; border-right: 2px solid maroon; margin: -2px;	}	/* 12 */
.box-magenta	{	border-top: 2px solid magenta; border-left: 2px solid magenta; border-bottom: 2px solid teal; border-right: 2px solid teal; margin: -2px;	}	/* 13 */
.box-yellow	{	border-top: 2px solid yellow; border-left: 2px solid yellow; border-bottom: 2px solid olive; border-right: 2px solid olive; margin: -2px;	}	/* 14 */
.box-white	{	border-top: 2px solid white; border-left: 2px solid white; border-bottom: 2px solid silver; border-right: 2px solid silver; margin: -2px;	}	/* 15 */
.box-graydark	{	border-top: 2px solid gray; border-left: 2px solid gray; border-bottom: 2px solid #404040; border-right: 2px solid #404040; margin: -2px;	}
.box-orange	{	border-top: 2px solid #FF8000; border-left: 2px solid #FF8000; border-bottom: 2px solid #804000; border-right: 2px solid #804000; margin: -2px;	} /* orange/brown */
.box-brown	{	border-top: 2px solid #FF8000; border-left: 2px solid #FF8000; border-bottom: 2px solid #804000; border-right: 2px solid #804000; margin: -2px;	} /* orange/brown */

body {
	background-color: black;
	color: silver;
	font: 12pt sans-serif;
	margin-left: 16px;
	margin-right: 16px;
}

main {
	margin-left: 16px;
	margin-right: 16px;
}

a { font-weight: bold; text-decoration: none; }
a:link, a:visited { color: lime; }
a:active { color: #66ff66; }
a:hover, a:visited:hover { color: #00cccc; }

.link-magenta:link, .link-magenta:visited {
	color: magenta !important;
}
.link-magenta:hover, .link-magenta:active {
	color: #ff66ff !important;
}

b, strong {
	color: aqua;
}

button {
	min-width: 40px;
	min-height: 32px;
	border-top: 2px solid #66cc66;
	border-left: 2px solid #66cc66;
	border-right: 2px solid #336633;
	border-bottom: 2px solid #336633;
	background-color: black;
	color: white;
	font: 700 14px sans-serif;
}

button:hover {
	background-color: #113311;
}

button:active {
	background-color: #669966;
	color: white;
}

.center {
	text-align: center;
}

code {
	font: 14pt monospace;
	white-space: nowrap;
}

dl, ol, ul {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
}
dt {
	page-break-after: avoid;
	font-weight: bold;
	color: aqua;
}
dd {
	page-break-inside: avoid;
}
li {
	margin-left: -1.5em;
	page-break-inside: avoid;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	color: magenta;
	font-family: sans-serif;
	font-weight: bold;
	margin-top: 0.25em;
	margin-bottom: 0;
	page-break-before: auto;
	page-break-after: avoid;
	orphans: 1;
}
h1, .h1 {
	font-size: 1.5em;
	text-align: center;
}
h2, .h2 {
	font-size: 1.35em;
	text-align: center;
}
h3, .h3 {
	font-size: 1.17em;
}
h4, .h4 {
	font-size: 1.12em;
}
h5, .h5 {
	font-size: 0.83em;
}
h6, .h6 {
	font-size: 0.75em;
}

hr {
	page-break-after: always;
	clear: both;
}

/* Radio buttons with no button.
 * Use <label><input type='radio' name='station' value='1' checked><span>1</span></label>
 */
input[type=radio] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

input[type=radio] + img {
	cursor: pointer;
}

input[type=radio]:checked + img {
	outline: 2px solid lime;
}

input[type=text] {
	border-top: 2px solid #336633; /* aqua, recessed */
	border-left: 2px solid #336666;
	border-right: 2px solid #66cccc;
	border-bottom: 2px solid #66cccc;
	background-color: black;
	color: white;
	font: 14pt monospace;
}

p {
	margin-top: 0.25em;
	margin-bottom: 0;
	page-break-inside: avoid;
}

pre {
	font: 14pt monospace;
	line-height: 14pt;
	white-space: pre;
}

pre code {
	white-space: pre;
}

select {
	border-top: 2px solid #336633; /* aqua, recessed */
	border-left: 2px solid #336666;
	border-right: 2px solid #66cccc;
	border-bottom: 2px solid #66cccc;
	background-color: black;
	color: white;
	font: 14pt monospace;
}

strike, s {
	color: gray !important;
}

summary {
	color: lime;
	font-family: sans-serif;
	font-weight: bold;
}

thead > tr {
	color: black;
	background-color: silver;
}
tr {
	vertical-align: top;
}
th {
	text-align: left;
}

/** Scrollbar */

body {
	/* standard CSS for Firefox */
	scrollbar-color: aqua #333333;
	scrollbar-width: thin;
}
/* weird CSS for Safari, Chrome */
::-webkit-scrollbar {
	background: #333333;
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
	background: #333333;
}
/* ::-webkit-scrollbar-track-piece */
::-webkit-scrollbar-button, ::-webkit-resizer {
	background: aqua;
}
::-webkit-scrollbar-thumb {
	background-color: aqua; /* rgba(60, 132, 198, 0.8); */
	background-image: -webkit-gradient(linear, 0% 0%, 90% 90%, from(aqua), to(teal) );
	/* from(rgba(108, 191, 255, .9)), to(rgba(28, 91, 155, 0.8)) ); */
	border: 1px solid blue;
	border-radius: 4px;
	border-top-color: aqua; /* #8ba2c1; */
	border-left-color: aqua; /* #768fa5; */
	border-right-color: teal; /* #5890bf; */
	border-bottom-color: teal; /* #4f93ca; */
	/* padding: 1px; */
}
::-webkit-scrollbar-thumb:hover {
}

/*
::-webkit-scrollbar addresses the background of the bar itself. It is usually covered by the other elements
::-webkit-scrollbar-button addresses the directional buttons on the scrollbar
::-webkit-scrollbar-track addresses the empty space “below” the progress bar
::-webkit-scrollbar-track-piece is the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb)
::-webkit-scrollbar-thumb addresses the draggable scrolling element that resizes depending on the size of the scrollable element
::-webkit-scrollbar-corner addresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet
::-webkit-resizer addresses the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements
*/

/** Page layout */

#main {
	margin-left: 4px;
	margin-right: 4px;
	width: calc(100vw - 8px);
}

header {
	background: black;
	min-width: 768px;
	border-top: 2px solid lime; border-left: 2px solid lime; border-bottom: 2px solid green; border-right: 2px solid green; margin: -2px;
}

footer {
	background: black;
	position: fixed;
	left: 4px;
	bottom: 4px;
	min-width: 768px;
	max-height: 320px;
	overflow: scroll;
	border-top: 2px solid lime; border-left: 2px solid lime; border-bottom: 2px solid green; border-right: 2px solid green; margin: -2px;
}

/** Page styles */

.avatar {
	width: 32px;
	height: 32px;
	vertical-align: middle;
}

.blink {
	animation: blinkingText 2s infinite;
}
@keyframes blinkingText {
	0% { opacity: 0.1 }
	17% { opacity: 0.1; }
	33% { opacity: 0.66; }
	67% { opacity: 1; }
	83% { opacity: 0.83; }
	100% { opacity: 0.1; }
}

.canvas {
	border: 1px solid green;
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor;
}

#cart-table {
	border-collapse: separate;
	border-spacing: 8px 0px;
	padding: 0;
}

#cart-table tr {
	border: 3px solid magenta;
	height: 180px;
}

.cartridge {
	border-top: 2px solid gray;
	border-left: 2px solid gray;
	border-right: 2px solid #404040;
	border-bottom: 2px solid #404040;
	width: 128px;
}

.cartridge h3 {
	margin-top: 0;
}

.cartridge label {
	display: block;
	margin: 0;
	background-color: #404040;
	cursor: pointer;
}

.cartridge input[type="radio"] {
	display: none;
}

.cartridge input[type="radio"] label {
}

.cartridge input[type="radio"]:checked+label {
	background-color: green;
}

.center {
	text-align: center;
}

#chatpanel {
	border-top: 2px solid aqua; border-left: 2px solid aqua; border-bottom: 2px solid teal; border-right: 2px solid teal; margin: -2px; /* box-aqua */
	padding: 4px;
	font: 12pt sans-serif !important;
}

.chat-info {
	color: purple;
}

.chat-myname {
	color: aqua;
}

.chat-name {
	color: silver;
}

.chat-say {
	color: white;
}

#help, .help {
	border-top: 2px solid lime; border-left: 2px solid lime; border-bottom: 2px solid green; border-right: 2px solid green; margin: -2px; /* box-green */
	font: 14pt monospace;
	line-height: 14pt;
	padding: 0.5em;
}

.iconbox {
	width: 260px;
	text-align: center;
	border-top: 2px solid silver; border-left: 2px solid silver; border-bottom: 2px solid gray; border-right: 2px solid gray; margin: -2px; /* box-gray */
}

#inputrow {
	bottom: 0;
	left: 0;
	width: 100%;
}

.message-history {
	width: 690px;
	height: 256px;
	border: 1px solid green;
	background-color: black;
	overflow: scroll;
}

.output, #output {
	border-top: 2px solid lime; border-left: 2px solid lime; border-bottom: 2px solid green; border-right: 2px solid green; margin: -2px; /* box-green */
	font: 14pt monospace;
	line-height: 14pt;
	padding: 0.5em;
	overflow: scroll;
}

.page {
	width: 50%;
	margin-top: 2em;
	margin-bottom: 2em;
	margin-left: auto;
	margin-right: auto;
	padding: 2em;
	border: 1px solid green;
}

.scorelist {
	font: 14pt monospace;
}

#screen, .screen {
	width: 80em;
	height: 25em;
	overflow-x: auto;
	overflow-y: auto;
	padding: 0.5em;
	border: 2px solid green;
	color: green;
	font: 14pt monospace;
	line-height: 14pt;
}

#spacer, .spacer {
	height: 48px;
}

#status, .status {
	border-top: 2px solid lime; border-left: 2px solid lime; border-bottom: 2px solid green; border-right: 2px solid green;	margin: -2px; /* box-green */
	color: white;
	font: 14pt monospace;
}

.uppercase {
	text-transform: uppercase;
}

#virtualkey {
	border: 2px solid green;
}