/* {
	border: 1px dashed black;
}*/

body {
	margin: 0px;
	background-color:#f0f0f0;
	font-family: MuseoSans300,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 17px;
	color: rgb(68, 68, 68);
}

#top_bar {
	font-size: 14px;
	padding-left:5px;
	text-align:left;
	color:white;
	background-color:#77AACC;
	box-shadow: inset 0px -1px 1px #888888;
}
.top_bar_button {
	float:right;
	padding-left:15px;
	padding-right:10px;
}
.top_bar_button:hover {
	color:darkred;
	cursor:pointer;
}
.popup_page {
	position: absolute;
	height: 84%;
	width: 84%;
	top: 4%;
	left: 6%;
	overflow: auto;
	background-color: white;
	padding: 20px;
	border-radius:20px; 
	box-shadow: 0px 0px 50px #000000;
	box-shadow: 0px 0px 100px #000000;
	
	font-size: 24px;
}
.popup_close {
	position: absolute;
	top: 20px;
	right: 40px;
	
	font-size: xx-large;
	color:#999999;
}
.popup_close:hover {
	color:#000000;
	text-shadow: 0px 0px 8px #555555;
	cursor:pointer;
}
#about_page {
	font-size: inherit;
}
#about_contents {
	width: 80%;
}
.selectable:hover {
	color:#000000;
	text-shadow: 0px 0px 8px #555555;
	cursor:pointer;
}
#review_group {
	margin: auto;
	width: 80%;
}
#review_kanji {
	margin: auto;
	width: 95%;
	text-align: center;
}
.review_kanji {
	border-radius:20px;
	display:inline-block;
	font-size:50px;
	padding-right:20px;
	padding-left:20px;
}
#review_completed {
	margin-top: 5px;
	text-align: center;
}
#review_readings {
	margin: auto;
	padding: 5px;
	width: 80%;
	height: 475px;
	overflow: auto;
}
/*
.review_one_kanji {
	padding: 5px;
	width: 80%;
	margin: auto;
	border-radius:20px; 
	
	/* same as onyomi */
/*	background-color:#99CCEE;
	
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #88BBDD), color-stop(1, #99CCEE) );
	background:-moz-linear-gradient( center top, #88BBDD 5%, #99CCEE 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#88BBDD', endColorstr='#99CCEE');
	background-color:#99CCEE;
	border:1px solid #88BBDD;
	
	box-shadow: inset 4px 4px 3px #AADDFF;
}
*/
#review_buttons {
	width: 60%;
	margin: auto;
	margin-top:4px;
}
#start {
	width: 95%;
	margin: auto;
	margin-top: 4px;
	border-radius: 20px 20px 0px 0px;

	text-align: center;
}
#review_practice_again {
	display: inline-block;
	float:left;
}
#review_continue {
	display: inline-block;
	float: right;
}
.review_strip_green_border {
/*	border: 7px solid #8cb82b; */
	border:3px solid orange;
}

#school {
	margin-top: 10px;
	margin-left: 50px;
	display: inline-block;
	vertical-align: top;
}
#jlpt, #jlpt_words, #etc {
	margin-top: 10px;
	margin-left: 30px;
	display: inline-block;
	text-align: center;
	vertical-align: top;
}

.cursor_pointer:hover {
	cursor:pointer;
}

.wrapper {
	background-color:#FFFFFF;
	width:80%; 
	margin:auto;
	margin-bottom: 10px;
	padding:10px;
	border-radius:20px; 
/*	border:3px solid orange; */
	box-shadow: 4px 4px 3px #888888;
}

.main_display {
	width:400px;
	margin:auto;
	margin-top: 15px;
	text-align: center;
	text-shadow: 2px 2px 5px #888888;
	text-shadow: grey 2px 2px 2px #888888;
	padding:10px;
}

#kanji {
	font-size: 160px;
}
#kotoba {
	font-size: 80px;
}
#onyomi:hover, #kunyomi:hover, #eigo:hover {
	cursor:pointer;
}
/*#quiz_type {
	padding:20px; 
	font-size: 36px;
	text-align: center;
}*/
#answer_table {
	margin:auto;
}
.answer_wrap {
	width: 80%;
	margin:auto;
	margin-top: 15px;
	font-size: 24px;
}
.answer_input, #answer, #kunyomi_answer {
	font-size: 24px;
	text-align: center;
	margin: 5px;
	padding:10px;
	border-radius:20px;
	box-shadow: 2px 2px 1px #888888;
}
.answer_input2 {
	font-size: 24px;
	text-align: center;
	margin: 5px;
	padding:10px;
	border-radius:20px;
	box-shadow: 2px 2px 1px #888888;
}

.answer_bubble {
	line-height:80px;
	padding: 5px;
	padding-left: 25px;
}

/* Gradients and inset box shadows */
.blue_bubble_light {
	border-radius:20px;
	
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #88BBDD), color-stop(1, #99CCEE) );
	background:-moz-linear-gradient( center top, #88BBDD 5%, #99CCEE 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#88BBDD', endColorstr='#99CCEE');
	background-color:#99CCEE;
	border:1px solid #88BBDD;
	
	box-shadow: inset 4px 4px 3px #AADDFF;
}
.blue_bubble_medium {
	border-radius:20px;
	
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77AACC), color-stop(1, #88BBDD) );
	background:-moz-linear-gradient( center top, #77AACC 5%, #88BBDD 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77AACC', endColorstr='#88BBDD');
	background-color:#88BBDD;
	border:1px solid #77AACC;
	
	box-shadow: inset 4px 4px 3px #99CCEE;
}
.blue_bubble_dark {
	border-radius:20px;
	
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #6699BB), color-stop(1, #77AACC) );
	background:-moz-linear-gradient( center top, #6699BB 5%, #77AACC 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699BB', endColorstr='#77AACC');
	background-color:#77AACC;
	border:1px solid #6699BB;
	
	box-shadow: inset 4px 4px 3px #88BBDD;
}

.green_button {
	-moz-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
	-webkit-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
	box-shadow:inset 0px 1px 0px 0px #c1ed9c;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9dce2c), color-stop(1, #8cb82b) );
	background:-moz-linear-gradient( center top, #9dce2c 5%, #8cb82b 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dce2c', endColorstr='#8cb82b');
	background-color:#9dce2c;
	border:1px solid #83c41a;
	text-shadow:1px 1px 0px #689324;
}
.green_button:hover, .green_button:focus {
	box-shadow:inset 1px 1px 2px 2px #c1ed9c;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8cb82b), color-stop(1, #9dce2c) );
	background:-moz-linear-gradient( center top, #8cb82b 5%, #9dce2c 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cb82b', endColorstr='#9dce2c');
	background-color:#8cb82b;
	color:white;
}

#debug {
	margin-top: 25px;
}
/* Buttons */
.buttons {
	margin: auto;
	width: 400px;
	text-align: left;
}
.check_answer {
	width: 100%;
	height: 50px;
	font-size: 18px;
	margin-top: 10px;
	border-radius:20px;
	box-shadow: 2px 2px 1px #888888;
}
.more_button {
	width: 53px; /* input box is 210px */
	height: 53px; /* input box is 53px */
	font-size: 30px;
	text-shadow: 2px 2px 5px #888888;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 7px;
	border-radius:20px;
	box-shadow: 2px 2px 1px #888888;
}

/* Review Buttons */
button#review_practice_again, button#review_continue {
	width: 150px;
	height: 50px;
	font-size: 18px;
	border-radius:20px;
	box-shadow: 2px 2px 1px #888888;
}