#stick				{ position:sticky; top:0; background:var(--bg) }
#stick DIV			{ display:inline-block; vertical-align:middle }

a:hover                         { text-decoration:underline !important; color:var(--hoverb) !important }
a:focus                         { text-decoration:underline !important }
a:visited, a:link, a:active     { text-decoration:none; color:var(--link) }

.right				{ float:right }
.red				{ background:var(--red) !important }
.blue				{ background:var(--blue) !important }
.yellow				{ background:var(--yellow) !important }
.grey				{ background:var(--grey) !important }

.null				{ color:var(--red) }
.busy				{ background:var(--busy) }

textarea			{ background:var(--bg); color:var(--fg) }
button				{ background:var(--bg); border:2px solid var(--blue); color:var(--fg); border-radius:5px; font:arial,sans-serif; font-size:12pt }
button:hover:enabled		{ background:var(--hoverb) !important; color:var(--hoverc) !important }
button.active			{ background:var(--hoverc); color:var(--hoverb) }
button:disabled			{ background:var(--red) }

fieldset.radios			{ display:inline; position:relative; font:arial,sans-serif; font-size:12pt }
.radios label			{ display:inline-block; background:var(--bg); color:var(--fg); padding:2px 3px 0px 3px; border:2px solid var(--purple); border-radius:5px; user-select:none }
.radios label:hover		{ background:var(--hoverb) !important; color:var(--hoverc) !important }
.radios input			{ display:none; position:absolute; left:0; top:0; width:0; height:0 }

.radios input:focus + label	{ border-style:dashed }
.radios input:checked + label	{ background:var(--fg); color:var(--bg); border-color:var(--green) }
/* why is line-height:1 needed here to not kill the experience?
 * This still is not perfect, as the characters, even that monospace, seem to have different width.
 */
.radios input[type="checkbox"] + label::after		{ content:" ✗ "; color:var(--blue); font-family:monospace; line-height:1 }
.radios input[type="checkbox"]:checked + label::after	{ content:" ✓ "; color:var(--bg) }

.blueblink			{ animation: blueblink 500ms }
@keyframes blueblink {
  0% { background-color:var(--bg) }
  20% { background-color:var(--blue) }
  100% { background-color:var(--bg) }
}

.run-grey	{ display:inline-block; border:2px solid grey }
.run-red	{ display:inline-block; border:2px solid red }
.run-yellow	{ display:inline-block; border:2px solid yellow }
.run-green	{ display:inline-block; border:2px solid green }
.run-blue	{ display:inline-block; border:2px solid blue }

table td	{ border:1px solid blue; border-collapse:collapse }
tr.hover *	{ background:var(--hoverb) }
td.hover	{ background:var(--hoverc) !important }

TR.mark *	{ background:var(--busy) }