@font-face {
	font-family: 'font';
	src: url('CQ Mono.otf');
}

html,body{
	padding:0;
	margin:0;
	background: #000;
	color:#FFF;
}
*{
	font-family:'font';
}
::-moz-selection { background: rgba(70,240,120,0.5); color: inherit; text-shadow: none; }
::selection { background: rgba(70,240,120,0.5); color: inherit; text-shadow: none; }
:focus {
	outline: 0;
}

button{
	cursor:pointer;
}

h1,h2,h3,h4,h5{
	padding:0;
	margin:0;
	margin-bottom: 0.3rem;
}

canvas, img {
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor;
}
canvas{
	display:none;
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin:auto;
	background: #000;

	opacity:0;

	transition: opacity 1s ease-out;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
}

#canvas-overlay{
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin:auto;

	background: transparent url("img/overlayHardware.png");
	background-size: cover;

	pointer-events:none;

	overflow:hidden;
}

#canvas-overlay pre{
	padding-left:10%;
}

#main{
	display:block;
	position:absolute;
	background:transparent;

	width:43.75%; /* 1-split */

	top:0;
	left:0;
	right:56.25%; /* split */
	bottom:0;
}

#display{
	box-sizing:border-box;
	padding:3em;
	display:block;
	position:absolute;

	width:56.25%; /* 1-split */

	top:0;
	left:43.75%;
	right:0; /* split */
	bottom:0;
}

#messages{
	max-height:200px;
	overflow-y:scroll;
}


#plaque,#monitor,#inputs{
	margin:0.5rem;
	box-sizing:border-box;
}

#plaque{
	position:relative;
	text-align: center;
	padding:0.5rem;
	border-radius:0.1rem;
	background:rgb(230,200,100);

	border: outset 0.15rem rgb(200,150,50);

	color: rgba(100,80,20, 0.8);
	text-shadow:
		0.05rem 0.1rem 0 rgb(230,200,100),
		0 0 0 #000;
}

#plaque:before {
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	top:0;
	left:0;
	position: absolute;
	border-radius:0.1rem;

	background-image:
	-webkit-repeating-linear-gradient(left bottom, rgba(250,230,130,.042) 0%, transparent 20%),
	-webkit-repeating-linear-gradient(left top, transparent 0%, rgba(250,230,130,.075) 20%),
	-webkit-repeating-linear-gradient(left bottom, transparent 0%, rgba(250,230,130,.08) 40%);
	background-image:
	-moz-repeating-linear-gradient(left bottom, rgba(250,230,130,.042) 0%, transparent 20%),
	-moz-repeating-linear-gradient(left top, transparent 0%, rgba(250,230,130,.075) 20%),
	-moz-repeating-linear-gradient(left bottom, transparent 0%, rgba(250,230,130,.08) 40%);
	background-image:
	repeating-linear-gradient(left bottom, rgba(250,230,130,.042) 0%, transparent 20%),
	repeating-linear-gradient(left top, transparent 0%, rgba(250,230,130,.075) 20%),
	repeating-linear-gradient(to left bottom, transparent 0%, rgba(250,230,130,.08) 40%);

	pointer-events:none;
}

#plaque h1{
	font-size:3em;
}
#plaque h2{
	font-size:0.75em;
}
#plaque h2 span{
	display:inline-block;
}
#plaque .corner{
	display:block;
	position: absolute;
	width:0.3rem;
	height:0.3rem;

	border-radius: 50%;/*
	background:rgb(230,200,100);
	border: outset 0.1rem rgb(200,150,50);*/


	background: -moz-radial-gradient(25% 25%, ellipse cover,  rgb(250,220,120) 0%, rgb(100,80,20) 100%);
	background: -webkit-radial-gradient(25% 25%, ellipse cover,  rgb(250,220,120) 0%,rgb(100,80,20) 100%);
	background: radial-gradient(ellipse at 25% 25%,  rgb(250,220,120) 0%,rgb(100,80,20) 100%);

}
.ul{
	top: 0.5rem;
	left: 0.5rem;
}
.ur{
	top: 0.5rem;
	right: 0.5rem;
}
.bl{
	bottom: 0.5rem;
	left: 0.5rem;
}
.br{
	bottom: 0.5rem;
	right: 0.5rem;
}




#monitor input{
	background: transparent;
	border:dashed 1px rgb(70,240,120);
	color:rgb(70,240,120);
	text-align:center;
}
#messages{
	border:dashed 1px rgb(70,240,120);
	color:rgb(70,240,120);
	padding:1em;
	overflow-y:auto;
	overflow-x:hidden;
	height:50%;
}

#messages::-webkit-scrollbar              {
	width:1rem;
	background: transparent;
}
#messages::-webkit-scrollbar-button       {

}
#messages::-webkit-scrollbar-track        {
	background: transparent;

}
#messages::-webkit-scrollbar-track-piece  {
	background: transparent;

}
#messages::-webkit-scrollbar-thumb        {
	background: rgb(70,240,120);
}
#messages::-webkit-scrollbar-corner       {

}
#messages::-webkit-resizer                {

}

#messages-actual:after{
	content:'_';
	
	-webkit-animation: blink 0.5s step-end infinite;
	animation: blink 0.5s step-end infinite;
}


#monitor{
	box-sizing:border-box;
	color:rgb(70,240,120);
	text-shadow: 0 0 0.05rem rgb(70,240,120);
	background:rgb(20,50,35);

	position:relative;

	height:50%;
	border:inset 0.2rem #DDD;
	border-radius:1rem;
	padding:3rem;

	overflow:hidden;
}

#monitor:before{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	content:'';

	background: -moz-repeating-linear-gradient(top,  rgba(10,20,0,0.75) 0%, rgba(0,0,0,0) 0.2%, rgba(0,0,0,0) 0.8%, rgba(10,20,0,0.75) 1%);
	background: -webkit-repeating-linear-gradient(top,  rgba(10,20,0,0.75) 0%,rgba(0,0,0,0) 0.2%,rgba(0,0,0,0) 0.8%,rgba(10,20,0,0.75) 1%);
	background: repeating-linear-gradient(to bottom,  rgba(10,20,0,0.75) 0%,rgba(0,0,0,0) 0.2%,rgba(0,0,0,0) 0.8%,rgba(10,20,0,0.75) 1%);




	display:block;
	width:100%;
	height:100%;

	border-radius:1rem;
	
	-webkit-animation: flicker 0.01s infinite;
	animation: flicker 0.01s infinite;

	pointer-events:none;
}

#monitor:after{
	position:absolute;
	top:0rem;
	bottom:0rem;
	left:0rem;
	right:0rem;
	content:'';



	background: -moz-radial-gradient(50% 25%, ellipse cover,  rgba(96,178,127,0.2) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-radial-gradient(50% 25%, ellipse cover,  rgba(96,178,127,0.2) 0%,rgba(0,0,0,0) 100%);
	background: radial-gradient(ellipse at 50% 25%,  rgba(96,178,127,0.2) 0%,rgba(0,0,0,0) 100%);

	
	-webkit-animation: flicker 0.013s infinite;
	animation: flicker 0.013s infinite;



	display:block;

	box-shadow:
		inset 0 0 2rem black,
		inset 0 0 4rem black,
		0 0 0.2rem black;

	border-radius:1rem;

	pointer-events:none;
}

#inputs{
	text-align: center;
	padding:0.5rem;
	
	border: solid 0.15rem rgb(50,40,40);
	border-radius:1rem;
	padding:0.2rem;

	min-width: 30rem;
	

	position:relative;
	background-image: -moz-radial-gradient(rgb(140,100,70),rgb(90,60,40));
	background-image: -webkit-radial-gradient(rgb(140,100,70),rgb(90,60,40));
	background-image: radial-gradient(rgb(140,100,70),rgb(90,60,40));
}

#inputs table{
	display:inline-table;
}

#inputs:before {
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	top:0;
	left:0;
	position: absolute;

	background-image:
	-webkit-repeating-linear-gradient(top, rgba(50,40,40,.042) 0%, transparent 10%),
	-webkit-repeating-linear-gradient(top, rgba(50,40,40,.032) 0%, transparent 10%),
	-webkit-repeating-linear-gradient(top, transparent 0%, rgba(50,40,40,.075) 10%),
	-webkit-repeating-linear-gradient(top, transparent 0%, rgba(50,40,40,.08) 10%);
	background-image:
	-moz-repeating-linear-gradient(top, rgba(50,40,40,.042) 0%, transparent 10%),
	-moz-repeating-linear-gradient(top, rgba(50,40,40,.032) 0%, transparent 10%),
	-moz-repeating-linear-gradient(top, transparent 0%, rgba(50,40,40,.075) 10%),
	-moz-repeating-linear-gradient(top, transparent 0%, rgba(50,40,40,.08) 10%);
	background-image:
	repeating-linear-gradient(top, rgba(50,40,40,.042) 0%, transparent 10%),
	repeating-linear-gradient(top, rgba(50,40,40,.032) 0%, transparent 10%),
	repeating-linear-gradient(top, transparent 0%, rgba(50,40,40,.075) 10%),
	repeating-linear-gradient(to top, transparent 0%, rgba(50,40,40,.08) 10%);


	pointer-events:none;
}

#inputs button{
	display:inline-block;
	vertical-align: middle;
	border:0;
	border-radius:0.2rem;

	margin-top:0;
	margin-left:0.1rem;
	margin-right:0.1rem;

	width:8rem;
	height:0;
	padding:0;
	padding-top:0.2rem;
	padding-bottom:1.8rem;

	margin-bottom:0.2rem;

	color:#444;

	background: rgb(224,208,181);
	background: -moz-linear-gradient(top,  rgba(224,208,181,1) 0%, rgba(247,229,200,1) 75%, rgba(178,171,151,1) 75%, rgba(109,105,93,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(224,208,181,1) 0%,rgba(247,229,200,1) 75%,rgba(178,171,151,1) 75%,rgba(109,105,93,1) 100%);
	background: linear-gradient(to bottom,  rgba(224,208,181,1) 0%,rgba(247,229,200,1) 75%,rgba(178,171,151,1) 75%,rgba(109,105,93,1) 100%);

	box-shadow:
	0px 0.1rem 0px 0px rgb(34,34,34),
	0px 0.5rem 0.7rem 0px rgb(17,17,17),
	inset 0px 0.01rem 0.01rem 0px rgba(250, 250, 250, .2),
	inset 0px -0.3rem 0.5rem 0px rgba(0, 0, 0, .5);
}

#inputs button:active{
	margin-top:0.2rem;
	margin-bottom:0;
	margin-left:0.3rem;
	margin-right:0.3rem;

	padding-top:0.3rem;
	padding-bottom:1.7rem;

	width:7.6rem;

	background: rgb(224,208,181);
	background: -moz-linear-gradient(top,  rgba(224,208,181,1) 0%, rgba(247,229,200,1) 85%, rgba(178,171,151,1) 85%, rgba(109,105,93,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(224,208,181,1) 0%,rgba(247,229,200,1) 85%,rgba(178,171,151,1) 85%,rgba(109,105,93,1) 100%);
	background: linear-gradient(to bottom,  rgba(224,208,181,1) 0%,rgba(247,229,200,1) 85%,rgba(178,171,151,1) 85%,rgba(109,105,93,1) 100%);

	box-shadow:
	0px 0.1rem 0px 0px rgb(34,34,34),
	0px 0.3rem 0.5rem 0px rgb(17,17,17),
	inset 0px 0.01rem 0.01rem 0px rgba(250, 250, 250, .2),
	inset 0px -0.3rem 0.5rem 0px rgba(0, 0, 0, .5);
}

#inputs .corner{
	display:block;
	position: absolute;
	width:0.7rem;
	height:0.7rem;

	border-radius: 50%;/*
	background:rgb(230,200,100);
	border: outset 0.1rem rgb(200,150,50);*/


	background: -moz-radial-gradient(25% 25%, ellipse cover,  rgb(224,208,181) 0%, rgb(50,40,40) 100%);
	background: -webkit-radial-gradient(25% 25%, ellipse cover,  rgb(224,208,181) 0%,rgb(50,40,40) 100%);
	background: radial-gradient(ellipse at 25% 25%,  rgb(224,208,181) 0%,rgb(50,40,40) 100%);

}


#inputs h3{
	color:rgb(224,208,181);
}


.phrase{
	display:inline-block;
}
.phrase-display{
	position: relative;
	text-align: center;
	display: inline-block;
	background: #000;
	border:inset 0.2rem #DDD;

	background: -moz-radial-gradient(50% 40%, ellipse cover,  rgba(20,50,35,1) 10%, rgba(0,0,0,1) 100%);
	background: -webkit-radial-gradient(50% 40%, ellipse cover,  rgba(20,50,35,1) 10%,rgba(0,0,0,1) 100%);
	background: radial-gradient(ellipse at 50% 40%,  rgba(20,50,35,1) 10%,rgba(0,0,0,1) 100%);

	font-size:0.75rem;

	width:8rem;
	height:0;

	padding:0;
	margin:0;

	padding-top:1rem;
	padding-bottom:2rem;

	color:rgb(70,240,120);
	border-radius:0.5rem;

	text-shadow: 0 0 0.05rem rgb(70,240,120);
}

.phrase-display:after{
	position:absolute;
	top:0;
	left:0;
	content:'';

	background: -moz-repeating-linear-gradient(top,  rgba(10,20,0,0.75) 0%, rgba(0,0,0,0) 1.5%, rgba(0,0,0,0) 5%, rgba(10,20,0,0.75) 6%);
	background: -webkit-repeating-linear-gradient(top,  rgba(10,20,0,0.75) 0%,rgba(0,0,0,0) 1.5%,rgba(0,0,0,0) 5%,rgba(10,20,0,0.75) 6%);
	background: repeating-linear-gradient(to bottom,  rgba(10,20,0,0.75) 0%,rgba(0,0,0,0) 1.5%,rgba(0,0,0,0) 5%,rgba(10,20,0,0.75) 6%);




	display:block;
	width:100%;
	height:100%;

	border-radius:0.5rem;
	
	-webkit-animation: flicker 0.015s infinite;
	animation: flicker 0.015s infinite;

	pointer-events:none;
}


@-webkit-keyframes flicker {
	0% {opacity: 0.9;}
	50% {opacity: 1;}
}
@-moz-keyframes flicker {
	0% {opacity: 0.9;}
	50% {opacity: 1;}
}
@keyframes flicker {
	0% {opacity: 0.9;}
	50% {opacity: 1;}
}


@-webkit-keyframes blink {
	0% {opacity: 0;}
	50% {opacity: 1;}
}
@-moz-keyframes blink {
	0% {opacity: 0;}
	50% {opacity: 1;}
}
@keyframes blink {
	0% {opacity: 0;}
	50% {opacity: 1;}
}