body,html		{ background:#000; color:#fff }
a			{ color:#aaf; text-decoration:none }
a:link, a:visited       { color:#4ff; text-decoration:none }
a:hover			{ color:#ff0; text-decoration:underline }
a:active		{ color:#f80 }

table			{ border-collapse:collapse }
tr:hover		{ background-color:#044 }
td			{ vertical-align:top; border:1px dashed blue; padding:1px 3px; }

.stick			{ position:sticky; top:0 }
td:hover		{ border:1px solid red }
td.noborder		{ border:0 }
td.noborder:hover	{ border:0 }

#err			{ position:fixed; right:0; top:0; background-color:#f00; color:#fff; opacity:0.5 }
#err:hover		{ opacity:1; transform-origin:top right; transform:scale(5); z-index:999 }

.resizer		{ display:flex; margin:0; padding:0; border:0; resize:both; overflow:hidden }
.resizer > *		{ width:100%; height:100%; margin:0; padding:0; border:0 }

.fr			{ float:right }
.fl			{ float:left }
.w288			{ width:288px }
.w100			{ width:100% }

.hide			{ display:none }
.tiny			{ font-size:x-small }
.pre			{ white-space:pre }

.bgred			{ background-color:red }

.hidecursor		{ cursor:none }

/* https://pixelbar.be/blog/css-profi-tip-tooltip-attributen/ */
a.hint, a.hint:hover, a.hint:focus, a.hint:active, a.hint:visited		{ color:white }
a.hint,
a.ext			{ position:relative }

a.ext:after		{ content:"External link" }
a.hint:after		{ content:attr("data-hint") }

a.hint:after, a.ext:after	{
			position:absolute;
			display:none;

			white-space:nowrap;
			text-align:center;
			font-size:x-small;
			padding:5px 15px;

			left:calc(50% - 20px);
			bottom:calc(100% + 20px);
			background:#800;
			border:3px solid #fb4;
			border-radius:10px;
			}
a.hint:before, a.ext:before	{
			position:absolute;
			display:none;

			content:"";
			width:0;
			height:0;

			left:50%;
			bottom:100%;
			border-style:solid;
			border-width:20px 5px 0 5px;
			border-color:#fb4 transparent transparent transparent;
			}
a.hint:hover:before, a.hint:hover:after,
a.hint:focus:before, a.hint:focus:after,
a.ext:hover:before, a.ext:hover:after,
a.ext:focus:before, a.ext:focus:after { display:inherit; color:#fff }

.w98vw			{ width:98vw }
.red			{ color:red }
input			{ background:#004; color:white; border:1px solid #880 }
input:hover		{ background:#008 }
textarea		{ background:#004; color:white; border:1px solid #880 }
textarea:hover		{ background:#008 }
button			{ background:#040; color:white; border:2px solid #880 }
.button			{ background:#040; color:white; border:2px solid #880 }
button:hover		{ background:#080 }
.button:hover		{ background:#080 }

.inline-block		{ display:inline-block }
.inline-block DIV	{ display:inline-block }

/* That's the only way I can see it clearly	*/
.lab				{ }
.lab label			{ display:inline-block; background-color:#000; padding:1px 3px; border:2px solid #f0f; border-radius:2px; user-select:none }
.lab label:hover		{ background-color:#500 }
.lab input			{ display:none; position:absolute; left:0; top:0; width:0; height:0 }
.lab input:focus + label	{ border-style:dashed }
.lab input:checked + label	{ background-color:#080; border-color:#ff0 }
.lab input[type="checkbox"]         + label::after	{ content:" \2717 "; color:red; font-family:monospace; line-height:1 }
.lab input[type="checkbox"]:checked + label::after	{ content:" \2713 "; color:#88f; }


/*
 * Flexwrap.  Like <div style="float:left">, but with no need to <br clear>
 */
.flexwrap			{ display:flex; flex-wrap:wrap }

/*
// Minimal responsive easy to use TAB CSS
// Based on https://codepen.io/mikestreety/pen/yVNNNm
*/

.tabs				{
				display:flex;
				flex-wrap:wrap;
				}

.border				{ border:1px solid #0ff }
.imgunselected			{ border:1px solid #000 }
.imgselected			{
				border:1px solid #f00;
				box-shadow: 0 0 0 4px red;
				z-index:10;
				}

/* hide the radio buttons	*/
.tabs>input			{ display:none }
/* instead use the labels	*/
.tabs>label			{
				order:1;
				display:block;
				margin:0 0 -1px;
				padding:0.5ex 0.5em;
				border:1px solid #fff;
				vertical-align:bottom;
/*				transition: background ease 0.2s;	*/
/*				text-align: center;	*/
				}
/* highlight label you are hovering	*/
.tabs>label:hover		{
				color:#ff0;
				cursor:pointer;
				}
/* selected label	*/
.tabs>input:checked+label	{
				background-color:#008;
				color:#ff0;
				z-index:1;
				}

.tabs>div			{
				display:none;
				order:99;
				flex-grow:1;
				width:100%;
				}
.tabs>input:checked+label+div	{ display:block }

@media (max-width: 45em) {
  .tabs>div,
  .tabs>label {
    order: initial;
  }
  .tabs>label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}

/* flex-layout
 *
 * Sorry, 100vh needs margin:0 as else we do not know the margin
 */

.flexfullbody0	{ min-height:100vh; margin:0 }
.flexcol	{ display:flex; flex-direction:column; flex-grow:1 }