@font-face {
    font-family: 'VCR OSD Mono';
    src: url('../fonts/vcr_osd_mono.eot');
    src: url('../fonts/vcr_osd_mono.eot?#iefix') format('embedded-opentype'),
         url('../fonts/vcr_osd_mono.woff2') format('woff2'),
         url('../fonts/vcr_osd_mono.woff') format('woff'),
         url('../fonts/vcr_osd_mono.svg#vcr_osd_monoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
	text-align: center;
	background: #111;
	color: #fff;
	font-family: 'VCR OSD Mono';
	-webkit-font-smoothing: antialiased;
	max-width: 800px;
	margin: 0 auto 50px;
}
a.button,
button {
	font-size: 20px;
	padding:30px 80px;
	cursor: pointer;
	font-family: 'VCR OSD Mono';
	border: 3px solid #ff6eee;
	color: #ff6eee;
	background: #0e0e0e;
	display: inline-block;
	text-decoration: none;
	margin: 20px 0;
}
a.button:hover,
button:hover {
	background: #222;
}
h3 {
	padding-top: 40px;
	font-size: 32px;
}
p {
	font-size: 24px;
}
#number {
	padding: 0;
	font-size: 70px;
	display: block;
	width: 100%;
	height: 90px;
	display: block;
	margin: 11px;
	line-height: 96px;
	position: relative;
	color: #fff;
	font-weight: bold;
}
#number em {
	font-style: normal;
	font-size: 14px;
	display: block;
	line-height: 1;
}
.success { color: 18px; }
.success p { color: #090 !important; }
.success img {
	margin: 12px 0;
}
textarea {
    padding: 4px;
    font-size: 11px;
    width: 370px;
    height: 48px;
    opacity: .3;
    text-align: center;
}
.footer {
	font-size: 14px;
	position: fixed;
	bottom: 3px;
	left: 0;
	right: 0;
	color: #aaa;
}
.footer a {
	text-decoration: none;
	color: #fff;
	border-bottom: 1px solid #fcc404;
}
.footer a:hover {
	color: #fcc404;
}



body.yellow {
	color: #3C5710;
	background: #D8E000;
}
.yellow .counter #counts,
.yellow .counter span,
.yellow .hint span:after {
	color: #3C5710;
}
.yellow .counter > strong > span {
	opacity: .7;
}
.yellow #game input,
.yellow button {
	background: rgba(60, 87, 16, 0.4);
	border-color: #3C5710;
	color: #3C5710;
}
.yellow #output li.focused,
.yellow #output li {
	background: rgba(60, 87, 16, 0.4);
	color: #D8E000;
}
.yellow #output li.error {
	color: #3C5710;
}
.yellow button:hover {
	background: rgba(60, 87, 16, 0.7);
}
.yellow .hint span {
	color: #D8E000;
}
.yellow .hint span:after {
	color: #3C5710;
}
.yellow .hint:hover span {
	color: #3C5710;
}


body.blue {
	color: #00D0FF;
	background: #0000B4;
}
.blue .counter #counts,
.blue .counter span,
.blue .hint span:after {
	color: #00D0FF;
}
.blue .counter > strong > span {
	opacity: .7;
}
.blue #game input,
.blue button {
	background: rgba(0, 208, 255, 0.4);
	border-color: #00D0FF;
	color: #00D0FF;
}
.blue #output li.focused,
.blue #output li {
	background: rgba(0, 208, 255, 0.4);
	color: #0000B4;
}
.blue #output li.error {
	color: #00D0FF;
}
.blue button:hover {
	background: rgba(0, 208, 255, 0.7);
}
.blue .hint span {
	color: #0000B4;
}
.blue .hint span:after {
	color: #00D0FF;
}
.blue .hint:hover span {
	color: #00D0FF;
}



body.green {
	color: #000000;
	background: #88DD00;
}
.green .counter #counts,
.green .counter span,
.green .hint span:after {
	color: #000000;
}
.green .counter > strong > span {
	opacity: .7;
}
.green #game input,
.green button {
	background: rgba(0, 0, 0, 0.4);
	border-color: #000000;
	color: #000000;
}
.green #output li.focused,
.green #output li {
	background: rgba(0, 0, 0, 0.4);
	color: #88DD00;
}
.green #output li.error {
	color: #000000;
}
.green button:hover {
	background: rgba(0, 0, 0, 0.7);
}
.green .hint span {
	color: #88DD00;
}
.green .hint span:after {
	color: #000000;
}
.green .hint:hover span {
	color: #000000;
}


.history  {
	margin: 0 auto;
}
.history td,
.history th {
	padding: 10px;
	border: 1px solid;
	margin: 0;
}
td.number { text-align: right }


body.amber {
	color: #FF6E28;
	background: #680E0D;
}
.amber .counter #counts,
.amber .counter span,
.amber .hint span:after {
	color: #FF6E28;
}
.amber .counter > strong > span {
	opacity: .7;
}
.amber #game input,
.amber button {
	background: rgba(255, 110, 40, 0.4);
	border-color: #FF6E28;
	color: #FF6E28;
}
.amber #output li.focused,
.amber #output li {
	background: rgba(255, 110, 40, 0.4);
	color: #680E0D;
}
.amber #output li.error {
	color: #FF6E28;
}
.amber button:hover {
	background: rgba(255, 110, 40, 0.7);
}
.amber .hint span {
	color: #680E0D;
}
.amber .hint span:after {
	color: #FF6E28;
}
.amber .hint:hover span {
	color: #FF6E28;
}
#number small {
    font-size: 15px;
    position: absolute;
    padding: 9px 0 0 8px;
    opacity: .5;
}