/* General */
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	overscroll-behavior-y: contain;
}

body {
	background-image: url("../Images/Schoolbord.webp");
	background-repeat: no-repeat;
	-webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
	background-size: 100% 100%;
	
	> div:nth-of-type(-n+5) {
		position: absolute;
		left: 5.5%;
		top: 9%;
		width: 89%;
		height: 82%;
		overflow: auto;
		cursor: url("../Images/Chalk32x32.png"), auto;
		
		color: #CCC;
		font-size: 1.4vw;
		/*font: normal 16px/18px Georgia, "Times New Roman", Times, serif;*/
		font: normal 16px/18px, "Arial", Arial, sans-serif;
	}
	.page-DataList {
		font-size: 2vh;
		> input[type='text'] {
			border: 0px;
			width: 99%;
			height: 5%;
			text-align: center;
			background-color: transparent;
			color: #CCC;
			font-size: 2.5vh;
			/*font: normal 16px/18px Georgia, "Times New Roman", Times, serif;*/
			font: normal 16px/18px, "Arial", Arial, sans-serif;
		}
		> table {
			border: solid 1px;
			border-spacing: 0px;
			border-collapse: separate;
			td, th {
				border: solid 1px;
				text-align: left;
				padding: 0px;
			}
			tr td:nth-child(2) {
				border-color: #CCC;
				font-size: 2vh;
				font-weight: bold;
				text-align: center;
				vertical-align: middle;
			}
		}
		.DemosArea {
			display: inline-block;
		}
		p {
			font-size: 1.9vh;
		}
	}
	.page-SpellSettings {
		> table {
			width: 100%;
			border: solid 1px;
			border-collapse: collapse;
			tr, td {
				border: solid 1px;
				border-collapse: collapse;
			}
			tr:nth-child(1) td:nth-child(1) {
				width: 1px;
				text-align: center;
				vertical-align: middle;
			}
			tr:nth-child(1) td:nth-child(n+2) {
				writing-mode: vertical-lr;
				vertical-align: bottom;
				padding: 5px;
				width: 20px;
			}
			tr:nth-child(n+2) td:nth-child(1) {
				width: 45%;
				padding: 10px;
				text-align: right;
			}
			tr:nth-child(n+2) td:nth-child(n+2) {
				width: 5%;
				text-align: center;
				vertical-align: middle;
				font-size: 3.5vh;
			}
		}
		p {
			font-size: 1.9vh;
		}
	}
	.page-Exercise {
		text-align: center;
		> p {
			font-size: 5vh;
			margin: 0px;
		}
		> div:nth-of-type(1) {
			display: inline-block;
			border: solid 2px #CCC;
			margin: 10px;
			> div:nth-of-type(1), > div:nth-of-type(2) {
				border: solid 2px #CCC;
				margin: 10px;
				padding: 5px;
			}
		}
		> div:nth-of-type(2) {
			font-size: 2vh;
		}
	}
	.page-Results { /*results*/
		p {
			font-size: 1.9vh;
		}
		div {
			display: inline;
			font-size: 2vh;
		}
		> div:nth-of-type(4), > div:nth-of-type(5), > div:nth-of-type(6) {
			font-size: 3vh;
			cursor: pointer;
		}
		> div:nth-of-type(2), input[type='button'] {
			margin-left: 10px;
		}
		> table {
			font-size: 2.5vh;
			width: 100%;
			border: solid 1px;
			border-collapse: collapse;
			/*background-color: #333;*/
			/*color: black;*/
			td, th {
				border: solid 1px;
				text-align: left;
				padding: 0px;
			}
			tr td:nth-child(2) {
				border-color: #CCC;
				font-size: 2vh;
				font-weight: bold;
				text-align: center;
				vertical-align: middle;
			}
		}
	}
	.Menu {
		position: absolute; top: 8%; left: 96.2%; width: 3.2%; height: 74%;
		> div {
			width: 100%;
			height: 9.3%;
			color: #AAA;
			font-size: 5vh;
			text-align: center;
			background-color: #413015;
			margin: 10px 0px 10px 0px;
			border: solid 2px;
			border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			-o-border-radius: 5px;
		}
		:hover {
			background-color: #010515;
			cursor: pointer;
		}
		.active {
			background-color: #410515;
		}
	}
	.copyright {
		position: absolute;
		width: 100%; bottom: 0px; left: 50%;
		-webkit-transform: translate(-50%, 70%);
		-moz-transform: translate(-50%, 70%);
		-ms-transform: translate(-50%, 70%);
		-o-transform: translate(-50%, 70%);
		transform: translate(-50%, 70%);
		text-align: center;
		font-size: 4vh;
		color: #CCC;
	}
	.copyright[class*="smaller"] {
		font-size: 1.5vh;
		bottom: 1.9vh;
	}
	.AlternativesMenu {
		display: block;
		position: absolute;
		background-color: #e7e7e7;
		padding: 10px;
		border: solid 2px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-o-border-radius: 5px;
		.menuArea {
			display: inline-block;
			border: solid 1px;
			.menuItem {
				padding: 10px;
				display: inline-block;
				background-color: #ccc;
			}
			.menuItem:hover {
				background-color: #ddd;
			}
		}
		.contentArea {
			text-align: center
		}
	}
	.blockscreen, .blockportrait {
		position: absolute;
		background-color: transparent;
		width: 100vw;
		height: 100vh;
		div {
			width: 100%;
			padding: 20px;
			background-color: white;
			font-size: 2.5vw;
			font-weight: bold;
			color: red;
		}
	}
}

.goodColor {
	font-weight: bold;
	color: lime;
}
.faultColor {
	font-weight: bold;
	color: #E00;
}
.misSpellColor {
	font-weight: bold;
	color: orange;
}