$yellow: #E5B217;
$red: #80181A;

* {
	box-sizing: border-box;
}

html {
	height: 100%;
	body {
		margin: 0;
		padding: 0;
		
		background-color: $red;
		color: $yellow;
		font-family: sans-serif;
		font-weight: bolder;
		h1 {
			text-align: center;
		}
		a {
			text-decoration: none;
			color: $yellow;
			/* no :hover or :focus because touch screens */
			&:active {
				text-decoration: underline;
				background-color: $yellow;
				color: $red;
			}
		}
		input[type=text], input[type=password], input[type=email], select {
			padding: 0 0.25em;
			border: none;
			background: bottom left   linear-gradient(#a9a9a9, #a9a9a9) no-repeat,
			            bottom center linear-gradient(#a9a9a9, #a9a9a9) repeat-x,
			            bottom right  linear-gradient(#a9a9a9, #a9a9a9) no-repeat;
			background-size: 1px 6px, 1px 1px, 1px 6px;
			color: $yellow;
			&:hover, &:active, &:focus {
				background: bottom left   linear-gradient($yellow, $yellow) no-repeat,
				            bottom center linear-gradient($yellow, $yellow) repeat-x,
				            bottom right  linear-gradient($yellow, $yellow) no-repeat;
				background-size: 1px 6px, 1px 1px, 1px 6px;
				color: $yellow;
			}
		}
		option[disabled] { display: none; }
	}
}
body#index {
	height: 100%;
	table {
		height: 100%;
		padding: 0;
		margin: 0;

		width: 100%;
		border-collapse: collapse;
		td, th {
			border: solid 1px $yellow;
		}
		td {
			text-align: center;
			vertical-align: middle;
		}

		thead {
			height: 10%;
			background-color: $yellow;
			color: $red;
		}
		tbody {
			td {
				width: 33%;
				max-width: 33%;
				height: 30%;
				div {
					/* A wrapper round cell contents allowing us to use fancy
					   table-positioning inside of the cell */
					display: table;
					width: 100%;
					height: 100%;
					a {
						display: table-cell;
						height: 100%;
						width: 100%;
						vertical-align: middle;
					}
					&.logo {
						background-image: url("../img/logo.png");
						background-size: auto 100%;
						background-position: center center;
						background-repeat: no-repeat;
					}
				}
			}
		}
	}
}

body#report {
	margin: 0.5em;
	form {
		width: 100%;
		label {
			display: table;
			//border: solid 1px #0000FF;
			width: 100%;
			margin-bottom: 0.25em;
			span {
				display: table-cell;
				width: 8em;
			}
			input, select {
				display: table-cell;
				width: 100%;
			}
			textarea {
				display: inline-block;
				width: 100%;
				height: 3em;
				border: 0;
			}
		}
		input[type=submit] {
			width: 100%;
			height: 3em;
		}
	}
	#camera-ui {
		border: solid 1px $yellow;
		text-align: center;
		padding: 0.5em;
		min-height: 5em;
		a {
			border: solid 1px $yellow;
			border-radius: 3px;
			padding: 0.5em;
			display: inline-block;
		}
		img {
			display: block;
			margin-left: auto;
			margin-right: auto;
			max-width: 50%;
			height: auto;
		}
	}
	& > video {
		/* Camera feed for browser */
		position: absolute;
		left: 0;
		width: 100%;

		top: 0;
		height: auto;
		max-height: 100%;
		display: block;
	}
	& > button {
		/* Camera capture button for browser */
		position: absolute;
		left: 0;
		width: 100%;

		bottom: 0;
		height: 3em;
	}
}

body#msds, body#alert {
	a {
		display: inline-block;
		width: 100%;
		padding-left: 1em;
		line-height: 3em;
		border: solid 1px #a9a9a9;
		margin-top: -1px;
	}
}

body#ppe {
	margin: 1em;
}

body#emergency {
	img {
		width: 100%;
		height: auto;
	}
}