:root{
	font-family:sans,helvetica,arial;
	--button-fg:black;
	--button-bg:linear-gradient(#eee,#aaa);
	--button-fghl:black;
	--button-bghl:linear-gradient(#fff,#ccc);
	--button-edge:#ccc;
	--button-edgehl:#444;
	--input-fg:black;
	--input-bg:linear-gradient(#ccc,#eee);
	--input-fghl:black;
	--input-bghl:linear-gradient(#ddd,#fff);
	--pixel:0.0625rem;--xxxsmall:0.125rem;--xxsmall:0.25rem;--xsmall:0.5rem;--small:0.75rem;
	--medium:1rem;--large:1.25rem;--xlarge:1.5rem;--xxlarge:2rem;--xxxlarge:3rem;
	--body-bg:#000;
	--body-fg:#fff;
	--section-bg:#222;
	--section-fg:#eee;
	--section-bghl:#444;
	--section-fghl:#fff;
	--article-bg:#888;
	--article-fg:#fff;
	--article-bghl:#ccc;
	--article-fghl:#fff;
	--blink:#00f;
	--slink:#00f;
	--alink:#00f;
}
.fixed{position:fixed;}
.centre{text-align:center;}
.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}
.fleft{float:left;}
.fright{float:right;}
::selection{color:#ff8;background:#44a;}

h1,h2,h3,h4,h5,h6{padding:var(--xxsmall);margin:0;text-align:center;}
h2,h4,h6{text-align:left;}
h1,h2{font-size:var(--xxlarge);padding:var(--small);}
h3,h4{font-size:var(--xlarge);padding:var(--xsmall);}
h5,h6{font-size:var(--large);padding:var(--xxsmall);}
p{padding:0 var(--xsmall); margin:var(--xsmall) 0;text-align:left;font-size:var(--large);}
ul,ol{margin:0;text-align:left;}
ul{list-style-type:none;padding:0;}
li{margin:var(--medium);}
a,a:visited{color:var(--blink);}

code,same{font-family:mono;}
code{color:#ccc;background:#000;font-size:0.8rem;border:0.0625rem inset #eee;padding:var(--xxxsmall);}
iframe{border:none;margin:0;padding:0;}
var{font-style:italic;font-weight:bold;}
em{font-weight:bold;}
strong{text-decoration:underline; text-transform:uppercase; }
abbr{text-transform:uppercase;}
cite:before,blockquote:before,q:before{content:'“';}
cite:after,blockquote:after,q:after{content:'”';}
aside,address{border:var(--pixel) solid #000;margin:var(--xxsmall);padding:var(--xxsmall);}
q{
	font-size:var(--xxlarge);
	color:var(--article-fghl);
	background:var(--article-bghl);
	border-left:10px solid #ccc;margin:var(--xlarge) 10px;
	padding:var(--medium) 10px;
	quotes:"\201C""\201D";
	display:block;
}
q:before{
	float:left;
	color:var(--article-fghl);
	content:open-quote;font-size:var(--xxxlarge);
}
q:after{
	float:right;
	color:var(--article-fghl);
	content:close-quote;font-size:var(--xxxlarge);
}

table{border-spacing:0;}
img{vertical-align:bottom;}
svg{vertical-align:bottom;}
progress{border:var(--pixel) inset black;vertical-align:middle;}
canvas{border:var(--pixel) inset black;vertical-align:top;height:var(--large);width:6rem;}
meter{border:var(--pixel) outset black;vertical-align:baseline;}
figure{border:var(--pixel) solid black;border-radius:var(--xsmall);display:inline-block;margin:0;padding:0;text-align:left;}
figcaption{margin:0;padding:0;text-align:justify;}
fieldset{border:var(--xxxsmall) ridge var(--section-fg);margin:var(--xxsmall);padding:var(--xxsmall);border-radius:var(--medium);}
legend{background:var(--article-bg);color:var(--article-fg);font-weight:bold;border:var(--xxxsmall) ridge var(--section-fg);font-size:1.25rem;border-radius:var(--medium-round);padding:0rem var(--xxsmall) var(--xxxsmall) var(--xxsmall);}
form{margin:0;padding:0;display:inline-block;}
form input{display:block;}


body{margin:0;background:var(--body-bg);color:var(--body-fg);}
section{background:var(--section-bg);color:var(--section-fg);text-align:center;}
article{background:var(--article-bg);color:var(--article-fg);display:inline-block;padding:var(--xsmall);margin:var(--xsmall);border-radius:var(--xsmall);border:var(--pixel) solid var(--article-fg);width:calc(100% - var(--large) * 2 );}
section a,section a:visited{color:var(--slink);}
article a,article a:visited{color:var(--alink);}
form p.error{text-align:center;display:block;width:14rem;}

/*all input elements*/
progress,textarea,input,output,input[type=text],input[type=password],input[type=search],
input[type=tel],input[type=email],input[type=url],input[type=number],
input[type=time],input[type=week],input[type=month],input[type=date],input[type=datetime-local],
input[type=file],
input[type=radio],input[type=checkbox],input[type=range],
input[type=button],input[type=submit],input[type=image],input[type=reset],
input[type=color],select,button{
width:14rem;height:var(--xlarge);
font-size:var(--medium);
margin:var(--xxsmall);
padding:0 var(--xxsmall);
vertical-align:baseline;
color:var(--input-fg);background:var(--input-bg);border:var(--xxxsmall) inset var(--button-edge);border-radius:var(--xsmall);}
/*button input elements*/
input[type=color],input[type=button],input[type=submit],input[type=reset],button{
width:14.75rem;height:var(--xlarge);
font-size:0.9rem;
margin:var(--xxxsmall);
padding:var(--xxxsmall)  var(--xsmall) var(--xlarge) var(--xsmall);
vertical-align:top;
color:var(--button-fg);background:var(--button-bg);border:var(--xxxsmall) outset var(--button-edge);cursor:pointer;}
/*input element fix ups*/
input[type=image]{vertical-align:bottom;border:var(--xxxsmall) outset var(--button-edge);color:var(--button-fg);background:var(--button-bg);}
input[type=color]{padding:var(--xxsmall);}
input[type=file]{vertical-align:top;font-size:var(--xsmall);}
input[type=search]{height:var(--xlarge);}
select{font-size:0.9rem;vertical-align:top;height:var(--xlarge);}
input[type=radio],input[type=checkbox],input[type=range]{vertical-align:middle;display:inline-block;}
input[type=color]{vertical-align:bottom;}
progress{padding:0;margin:0;height:var(--xxlarge);}
/*input non-button element focus and hover*/
textarea:hover,input:hover,output:hover,input[type=text]:hover,input[type=password]:hover,input[type=search]:hover,
input[type=tel]:hover,input[type=email]:hover,input[type=url]:hover,input[type=number]:hover,
input[type=time]:hover,input[type=week]:hover,input[type=month]:hover,input[type=date]:hover,input[type=datetime-local]:hover,
select:hover,input[type=file]:hover,
textarea:focus,input:focus,output:focus,input[type=text]:focus,input[type=password]:focus,input[type=search]:focus,
input[type=tel]:focus,input[type=email]:focus,input[type=url]:focus,input[type=number]:focus,
input[type=time]:focus,input[type=week]:focus,input[type=month]:focus,input[type=date]:focus,input[type=datetime-local]:focus,
select:focus,input[type=file]:focus{
color:var(--input-fghl);background:var(--input-bghl);border-color:var(--button-edgehl);}
/*input button element focus and hover*/
input[type=radio]:hover,input[type=checkbox]:hover,input[type=range]:hover,
input[type=button]:hover,input[type=submit]:hover,input[type=image]:hover,input[type=reset]:hover,
input[type=color]:hover,button:hover,
input[type=radio]:focus,input[type=checkbox]:focus,input[type=range]:focus,
input[type=button]:focus,input[type=submit]:focus,input[type=image]:focus,input[type=reset]:focus,
input[type=color]:focus,button:focus{
color:var(--button-fghl);background:var(--button-bghl);border-color:var(--button-edgehl);}
/*input non-button element active*/
textarea:active,input:active,output:active,input[type=text]:active,input[type=password]:active,
input[type=search]:active,input[type=tel]:active,input[type=email]:active,input[type=url]:active,
input[type=number]:active,input[type=time]:active,input[type=week]:active,input[type=month]:active,
input[type=date]:active,input[type=datetime-local]:active,select:active,input[type=file]:active{
color:var(--button-fg);background:var(--button-bg);border-color:var(--button-edge);}
/*input button element active */
input[type=radio]:active,input[type=checkbox]:active,input[type=range]:active,
input[type=button]:active,input[type=submit]:active,input[type=image]:active,input[type=reset]:active,
input[type=color]:active,button:active{
color:var(--button-fghl);background:var(--input-bg);border:var(--xxxsmall) inset var(--button-edge);}
/*input non-button element disabled*/
textarea:disabled,input:disabled,output:disabled,input[type=text]:disabled,input[type=password]:disabled,
input[type=search]:disabled,input[type=tel]:disabled,input[type=email]:disabled,input[type=url]:disabled,
input[type=number]:disabled,input[type=time]:disabled,input[type=week]:disabled,input[type=month]:disabled,
input[type=date]:disabled,input[type=datetime-local]:disabled,select:disabled,input[type=file]:disabled{
color:var(--button-fg);background:var(--button-bg);border-color:var(--button-edge);}
/*input button element active */
input[type=radio]:disabled,input[type=checkbox]:disabled,input[type=range]:disabled,
input[type=button]:disabled,input[type=submit]:disabled,input[type=image]:disabled,input[type=reset]:disabled,
input[type=color]:disabled,button:disabled{
color:var(--button-fghl);background:var(--input-bghl);border-color:blue;}

input[type=submit].gold,input[type=button].gold,button.gold{font-weight:bold;color:blue;background:linear-gradient(gold,#fa0);border-color:gold;}
input[type=submit].gold:hover,input[type=button].gold:hover,button.gold:hover{color:black;background:linear-gradient(yellow,gold);border-color:yellow;}
input[type=submit].gold:active,input[type=button].gold:active,button.gold:active{color:yellow;background:blue;border-color:black;}


