/* SCAN.JS - 2013 */
/* rhq.be - haqqazi.com - github @rhq */



/* Global */
html, body {
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	font-family: arial, sans-serif;
	font-size: 7px;
	line-height: 1.6;
	background-color: #ecf0e9;
}
.none { display: none !important; }
.button {
	display: inline-block;
	margin: 5px; padding: 10px 15px;
	color: #fff;
	font-size: 2.5rem;
	line-height: 1.6;
	text-decoration: none;
	text-transform: capitalize;
	opacity: .8;
	outline: none;
	border: none;
	border-radius: 2px;
	-webkit-transition: opacity 100ms ease-in-out 0s;
	   -moz-transition: opacity 100ms ease-in-out 0s;
		-ms-transition: opacity 100ms ease-in-out 0s;
		 -o-transition: opacity 100ms ease-in-out 0s;
		 	transition: opacity 100ms ease-in-out 0s;
}
.button:hover {
	opacity: .6;
	cursor: pointer;
}
.button.disabled {
	opacity: .3;
	pointer-events: none;
    cursor: default;
}



/* Color(s) */
.button { background-color: blue; }



/* Layout */
#main {
	width: 100%; height: 100%;
	display: table;
}
#main #content {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
#main #content #block {
	max-width: 90%;
	display: inline-block;
	vertical-align: middle;
	margin: auto;
	text-align: center;
}



/* Scan.js */
#scanner { display: block; }
.none { display: none !important; }
#scanner #screen,
#scanner #message {
	width: 100%;
	max-width: 600px;
	display: inline-block;
	vertical-align: middle;
}
#scanner #screen video,
#scanner #screen canvas {
	width: 100%;
	margin: auto;
	border-radius: 2px;
	box-sizing: border-box;
	background-color: rgba(1,1,1,.6);
}
#scanner #message #result {
	margin: 10px 0;
	padding: 15px;
	color: #fff;
	font-size: 2.8rem;
	text-align: center;
	background: rgba(1,1,1,.8);
}
#scanner #inputs {
	display: flex;
	flex-direction: column;
}
#scanner #inputs,
#scanner #control {
	margin: 0; padding: 10px;
	text-align: center;
}