html {
	font-family: Arial ;
	font-size: 18px ;
	/*font-size: 1.2vw ;*/
	background-color: whitesmoke ;
}
body {
	width: 1240px ;
	max-width: 96% ;
	min-height: 80% ;
	margin-left: auto ;
	margin-right: auto ;
	padding: 0.25em ;
	overflow: auto ;
}
h1 {
	display: inline-block ;
	margin: 0 ;
}
input:focus {
	outline-color: lightblue ;
}
input, select {
	cursor: pointer ;
}
input[type="checkbox"]{
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #fafafa;
	border: 1px solid #cacece;
	padding: 10px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
}
input[type="checkbox"]:checked:after {
	content: '\2714';
	font-size: 14px;
	position: absolute;
	top: 0px;
	left: 3px;
	color: #99a1a7;
}

/* Search style */

#search {
	min-width: 50% ;
	width: 400px ;
	max-width: 100% ;
}
#searchPage > input, #katakanaPage > *, #wordBurnWindow input, .overlayWindow input, .overlayWindow select {
    font-size: 120% ;
	margin: 5px ;
}
#searchResults {
	margin-top: 10px ;
	border: 1px solid black ;
	min-height: 300px ;
}
#searchResults span {
	display: inline-block ;
}
.word-verb {
	border-left: 5px solid lightblue ;
}
.word-adjective {
	border-left: 5px solid lightgreen ;
}
.word-noun {
	border-left: 5px solid lightpink ;
}

/* Everything with a border */

#pageHolder, .hintBox, .hintBoxButton, #pageSelect, #levelBarOuter, select, input, .overlayWindow { 
	background-color: white ;
	border: 1px solid grey ;
}

#ntextControls > *, #keyShowSelect {
	display: inline-block ;
	margin-right: 5px ;
	height: 30px ;
	font-size: 15px ;
	vertical-align: bottom ;
}
.hintBox {
	margin-bottom: 10px ;
	display: none ;
}
.hintBoxButton {
	display: inline-block ;
	padding: 5px ;
	cursor: pointer ;
	border: 3px solid white ;
	border-right: 1px solid grey ;
}
.hintBoxButton:hover {
	border-bottom: 3px solid lightblue ;
}
#pageHolder {
	/*border-radius: 3px ; */
	padding: 0.25em ;
	box-shadow: 0px 0px 10px 6px lightgrey ;
}
.questionRow {
	border-bottom: 1px solid grey ;
}
#questions {
	margin-top: 10px ;
}
#questions input {
	width: 100% ;
	border: none ;
	height: 90% ;
	font-size: inherit ;
}
.questionRowFinished:hover .hintBox {
	display: block ;
}
p.questionText {
	margin: 0 ;
	padding: 5px ;
}
div.questionHint {
	width: 50% ;
	display: inline-block ;
}
div.inputCell {
	width: 50% ;
	display: inline-block ;
	position: absolute ;
	border-left: 1px solid grey ;
	top: 0 ;
	height: 100% ;
}
.questionRowInner {
	position: relative ;
}
#pageSelect {
	list-style: none ;
	display: inline-block ;
	min-width: 70% ;
	margin: 5px ;
	margin-left: 50px ;
	margin-left: 5vw ;
	text-align: center ;
	padding: 0 ;
}
#pageSelect li {
	display: inline-block ;
	/*width: 20% ; */
	min-width: 150px ;
	font-weight: 500 ;
	font-size: 120% ;
	text-align: center ;
	padding: 5px ;
	margin: 0 ;
	border-bottom: 3px solid white ;
	border-top: 3px solid white ;
	cursor: pointer ;
}
#pageSelect li:hover {
	border-bottom: 3px solid lightblue ;
}
#loginWindow * {
	font-size: 120% ;
}
#loginWindow label {
	width: 150px ;
	display: inline-block ;
}
.page {
	display: none ;
	overflow: hidden ;
	padding: 5px ;
}
#levelBarOuter {
	width: 100px ;
	position: relative ;
}
#levelCount {
	position: absolute ;
	top: 5px ;
	margin-left: 5px ;
	font-size: initial ;
}
#levelBar {
	width: 0 ;
	height: 28px ;
	background-color: lightblue ;
	opacity: 0.5 ;
}
#levelDetails {
	background-color:white ;
	position:absolute ;
	display: none ;
	border: 1px solid black ;
	padding: 5px ;
	max-width: 100% ;
	width: 300px ;
	z-index: 10 ;
}
#levelCell:hover #levelDetails {
	display: block ;
}
#levelDetails label {
	width: 150px ;
	display: inline-block ;
}
#overlay {
	display: none ;
	left: 0 ; right: 0 ; top:0 ; bottom: 0;
	position: fixed ;
	z-index: 10 ;
}
#overlayBackground {
	z-index: 10 ;
	left: 0 ; right: 0 ; top:0 ; bottom: 0;
	background-color: black ;
	opacity: 0.5 ;
	width: 100% ; height: 100% ;
	position: fixed ;
}
.overlayWindow {
	display: table ; 
	top: 50px ;
	position: relative ; 
	padding: 3em ;
	margin-left: auto ; margin-right: auto ;
	/*min-height: 300px ;
	width: 800px ;*/
	max-width: 100% ;
	opacity: 1 ;
	z-index: 20 ;
}
.conjugateButton {
	cursor: pointer ;
}
#conjugationWindow label {
	display: inline-block ;
	width: 200px ;
}

@media (max-width:800px){
	html {
		font-size: 10pt ;
	}
	input, #search {
		font-size: 10pt ;
	}

	h1 {
		display: block ;
		text-align: center ;
	}

	#pageSelect {
		width: 100% ;
		margin-left: 0 ;
	}

	#levelDetails {
		width: 200px ;
	}
	#levelDetails label {
		width: 120px ;
	}
	.inputCell, .questionHint {
		width: 100% ;
	}
}