html, body, .screen, .layout {
	touch-callout: none;
	user-select: none;
	overscroll-behavior: none;
	width: 100%;
	height: 100%;
	background-color: white;
	color: black;
	font-family: Calibri, Helvetica;
	padding: 0;
	margin: 0;
	text-align: center;
	font-size: 3vmin;
	border: 0px;
	border-collapse: collapse;
}

fieldset { padding: 1em; display: inline-block;  }
legend { padding: 0 1em; font-weight: bold; text-align: left; font-size: 1.4em; }
ul { margin-top: 0; }
li { margin: 2em; }
h1 { font-size: 3em; }
h2 { font-size: 2.6em; }

.sublayout { margin: auto; }
.textblock { display: inline-block; text-align: left; margin: auto; }

input[type=button] {
	display: inline-block;
	text-align: center;
	margin: 0.8em auto 10px;
	color: #fff;
	text-shadow: 1px 1px #aaa;
	border-radius: 0.5em;
	border: 0.1em outset gray;
	background: -moz-linear-gradient(top, #34a6eb, #1485db);
	background: -webkit-gradient(linear, center top, center bottom,from(#34a6eb), to(#1485db));
	background-color: #34a6eb;
	font-size: 1.2em;
	padding: 0.3em;
}
input:disabled { background-color: #eee; border: 3px outset #ddd; }
input:focus { outline: none; }

input[type=radio] { display: none; }
input[type=radio]+label {
	display: inline-block;
	border: 0.1em outset gray;
	background-color: #ddd;
	padding: 0.4em 0.8em;
	font-size: 1em;
	border-radius: 0.5em;
	margin: 0.1em;
}

input[type=checkbox], input[type=radio] { display: none; }
input[type=checkbox]+label, input[type=radio]+label {
	display: inline-block;
	border: 0.1em outset gray;
	background-color: #ddd;
	padding: 0.4em 0.8em;
	font-size: 1em;
	border-radius: 0.5em;
	margin: 0.1em;
}
input[type=checkbox]:checked+label, input[type=radio]:checked+label {
	background: -webkit-gradient(linear, center top, center bottom,from(#afa), to(#5f5));
	background: -moz-linear-gradient(top, #afa, #5f5);
	opacity: 1;
	background-color: #afa;
}

.cacheText, .versionText { font-size: small; margin: 0.4em; }

#stopButton {
	position: absolute;
	top: 0.5em;
	left: 0.5em;
	margin: 0;
	font-size: 1em;
    width: 2em;
    height: 2em;
    background: #eee;
    border: 0;
}

.topright {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	margin: 0;
	font-size: 1em;
}

.textblock {
	display: inline-block;
	margin: auto;
	text-align: left;
}


.sublayout th { text-align: right; }
.sublayout th+td { text-align: left; }
.sublayout input[type=number], .sublayout input[type=text] { padding: 0.4em 0.8em; margin: 0.5em 0.5em; }

#predef h2 { font-size: 1.2em; margin: 0.5em 0 0.2em; }
#predef input { margin-top: 0 }
#predef input:disabled {
	background-color: green;
	background: -webkit-gradient(linear, center top, center bottom,from(#afa), to(#5f5));
	background: -moz-linear-gradient(top, #afa, #5f5);
	color: black;
	border-color: black;
}
#params input { font-size: 0.8em; width: 8em; }
#params input.big { font-size: 1.4em; }

#game td { text-align: center; }
#feedbackValue { font-size: 4em; font-weight: bold; }
#feedbackLose, #feedbackWin { font-size: 1.5em; font-weight: bold; color: red; }
#pressButton { width: 20%; padding: 1.5em; }
#pressButton.active { 
	background: -moz-linear-gradient(top, #34a6eb, #1485db);
	background: -webkit-gradient(linear, center top, center bottom,from(#34eba6), to(#14db85));
	background-color: #34a6eb;
}

#resultsText table { margin: auto; border-collapse: collapse; }
#resultsText td { border: 1px solid black; padding: 1em; }
#resultsButton { position: absolute; top: 0.5em; left: 0.5em; margin: 0; font-size: 1em;}

#graph div { width: 8px; background-color:#22f; display: inline-block; margin: 1px; }