@font-face {font-family: 'round'; src: url(../assets/fonts/round.woff);}
@font-face {font-family: 'square'; src: url(../assets/fonts/square.woff);}
:root{
	font-family:square;
	--headroom:calc(4.25rem + 0.125rem + 0.0625rem);
	--sideroom:20rem;
	--header-fg:#eee;
	--header-bg:#004;
	--footer-bg:#000;
	--footer-bghl:#444;
	--footer-fg:#ddd;
	--footer-fghl:#fff;
	--menu-fg:#fff;
	--menu-bg:#000;
	--droid-fg:white;
	--droid-bg:blue;
	--droid-fghl:#ff0;
	--droid-bghl:black;
}
article h1,h2,h3,h4,h5,h6{color:var(--article-fghl);}
p{text-align:justify;}
ul{list-style-type:disc;margin-left:1rem;}
div.anchor{height:var(--headroom);}

header{position:fixed;width:100%;left:0;top:0;height:var(--headroom);z-Index:200;}
header.static{background:none;position:relative;height:var(--headroom);z-Index:0;}
header table{width:100%;margin:0;padding:0;border-collapse:collapse;}
header td{margin:0;padding:0;height:2.5rem;background:var(--header-bg);}
header td.centre{width:calc(2.5rem * 900 / 180);background:none;}
header img.banner{height:2.5rem;padding:0;margin:0;}
header a img{height:calc(var(--headroom) - var(--xsmall));padding:0;margin:0;}
header div.icons{position:fixed;top:0;right:0;z-Index:101;padding:0;margin:0;}
header a.icon{float:right;z-Index:101;border-radius:0;padding:var(--xxsmall) var(--xsmall);text-decoration:none;margin:0;}
header a.icon:hover{background:var(--menu-bg);}
footer{z-Index:200;background:var(--footer-bg);color:var(--footer-fg);text-align:center;width:100%;bottom:0;display:block;}
footer p{text-align:center;padding:var(--xxxsmall);margin:0;}
footer a,footer a:visited{
	font-weight:bold;
	color:var(--footer-fg);
	display:inline-block;
	text-decoration:none;
	padding:var(--xsmall);
	margin:0;
	border-radius:var(--large);
}
footer a:hover{
	color:var(--footer-fghl);
	background:var(--footer-bghl);
}
footer img{width:var(--xlarge);height:auto;}
footer ul{display:inline-block;text-align:center;}
article{opacity:0.85;border-radius:var(--small);border:var(--xxxsmall) solid var(--article-fghl);}
article.section{background:var(--section-bg);color:var(--section-fg);}

div.tabstrip{text-align:left;	background:var(--header-bg);}
div.tabstrip a.tab{
	text-decoration:none;cursor:pointer;
	font-weight:bold;
	display:inline-block;
	border-radius:var(--xsmall) var(--xsmall);
	margin:var(--xxxsmall) 0 var(--xxxsmall) var(--xxxsmall);
	padding:var(--xxxsmall) var(--xxxsmall);
	width:auto;height:auto;
	color:var(--article-fg);
	background:var(--article-bg);
	border:var(--xxxsmall) solid var(--button-edge);
}
div.tabstrip a.tab:hover{color:var(--button-fghl);background:var(--button-bghl);border-style:outset;}
div.tabstrip a.selected{color:var(--header-fg);background:var(--header-bg);border:var(--xxxsmall) solid var(--header-bg);}
div.tabstrip a.selected:hover{color:var(--button-fghl);background:var(--button-bghl);border-style:outset;}

div.sidebar{width:0rem;height:100%;transition:width 0.25s;color:var(--menu-fg);background:var(--menu-bg);text-align:center;position:fixed;right:0;top:0;margin:0;padding:0;margin-top:var(--headroom);overflow-y:scroll;z-Index:200;}
div.sidebar article{display:block;}
div.sidebar a,div.sidebar a:visited{font-size:var(--xxlarge);display:block;background:var(--menu-bg);color:var(--menu-fg);text-align:center;text-decoration:none;padding:var(--xsmall);margin:var(--small);border-radius:var(--xsmall);}
div.sidebar a:hover{background:var(--button-bg);color:var(--button-fg);}
div.sidebar p{text-align:center;}
div.sidebar article.login{background:#008;color:#cc0;}

img.icon{border-radius:var(--xxsmall);height:4rem;padding:0;margin:0;}
input.red{font-weight:bold;color:#fff;background:linear-gradient(#f00,#800);border-color:#f00;}
input.red:hover{color:#000;background:linear-gradient(#800,#f00);border-color:#000;}
input.round{vertical-align:middle;width:auto;border-radius:1rem;}

details{}
summary{color:var(--button-fg);background:var(--button-bg);border:var(--xxxsmall) inset var(--button-edge);border-radius:var(--xsmall);margin:var(--xxxsmall);padding:var(--xxxsmall) var(--xsmall);vertical-align:baseline;display:inline-block;font-weight:bold;font-family:mono;text-align:center;cursor:pointer;}
summary:hover,summary:focus{color:var(--button-fghl);background:var(--button-bghl);border-color:var(--button-edgehl);}
summary::after{content:' «';}
summary::before{content:'» ';}
div.details{border-radius:var(--medium);border:var(--pixel) inset var(--section-fg);background:var(--section-bg);	color:var(--section-fg);padding:var(--xxxsmall);margin:var(--small);}

span.droid{display:inline-block;padding:0 var(--xxsmall);margin:0 var(--xxsmall);}
a.droid{color:var(--droid-fg);text-shadow:0px 0px 0.5rem var(--droid-bg);border:var(--xxsmall) solid #0ff;border-radius:1rem;height:calc(12vw - var(--xxsmall) * 2);width:calc(12vw - var(--xxsmall) * 2);max-width:calc(12vw - var(--xxsmall) * 2);display:table-cell;vertical-align:middle;font-weight:bold;text-align:center;overflow:hidden;}
a.droid:visited{color: var(--droid-fg);}
a.droid:hover{color:var(--droid-fghl);textshadow:0px 0px 0.5rem var(--droid-bghl);border-color:var(--droid-fghl);}
@media screen and (max-aspect-ratio:1/1){a.droid{max-width:33vw;width:33vw;height:33vw;}}

button.gold{
	background:linear-gradient(#ff8,#cc0);
}