* { list-style-type: none; margin: 0px; padding: 0px; font-family: Calibri,Arial, sans-serif; }
:link,:visited,:hover,:active { color: black; text-decoration: none; }
p { padding: 10px; }
html,body { min-width: 787px; }
html{
	background-color: #ff3366;
	background-image: url('skins/white-heart.png');
	background-repeat: repeat;
}
h2 { padding: 5px 0px; }
/* start styles for menus */
/* start styles for user menu */
ul#usermenu,div#login {
	z-index: 5;
	border: 2px solid pink;
	color: black;
	background-color: white;
	position: fixed;
	right: 0;
	top: 0;
}
ul#usermenu>li {
	margin: 5px 10px; 
	float: left;
}
div#login {
	padding: 5px;
	padding-top: 0px;
}
div#login a:link {
	position: absolute;
	top: 0;
	right: 0;
	margin-right: 10px;
	text-align: center;
	padding-top: 6px;
	float: right;
	font-weight: bold;
}
div#login form {
	postion: absolute;
	margin-right: 80px;
}
div#login form input:last-child {
	font-size: 16px;
	padding: 2px;
}
/* end styles for user menu */
/* start styles for nav menu */
ul#nav {
	border: 1px solid black;
	border-radius: 0 0 10px 0;
	width: 160px;
	background-color: #ffbed1;
	color: black;
	position: absolute;
	top: 0;
	left: 0;
}
ul#nav>li {
	text-align: center;
	font-weight: bold;
	border-bottom: 1px solid black;
}
ul#nav>li:hover {
	background-color: #ffddff;
}
ul#nav>li:last-child {
	border: none;
	border-radius: 0 0 10px 0;
}
ul#nav>li>ul {
	display: none;
	position: absolute;
	left: 90px;
	width: 900px;
	background-color: white;
	z-index: 13;
	border: 2px solid pink;
	font-size: 18px;
	line-height: 18px;
}
li#quizlinks:hover ul {
	display: block;
}
ul#nav>li>ul>li {
	display: inline-block;
	float: left;
	position: relative;
	width: 300px;	
	height: 40px;
	text-align: center;
	font-weight: normal;
	margin: 0;
	padding: 0;
}
ul#nav>li>ul>li>a:link {
	display: block;
	height: 100%;
	width: 100%;
}

ul#nav>li>ul>li.odd {
	background-color: #ffdede;
}
ul#nav>li>ul>li:hover {
	background-color: #ffccee;
}
/* end styles for nav menu */
/* end styles for menus */
/* start styles for stuff in div#content */
/* start styles for register form */
div#content.register form {
	width: 400px;
	margin-left: auto;
	margin-right: auto;
}
div#content.register form label {
	display: inline-block;
	width: 230px;
}
div#content.register form input {
	width: 161px;
	display: inline-block;
}
/* end styles of register form */
div#content {
	background-color: white;
	color: black;
	margin-left: 180px;
	margin-top: 40px; 
	margin-right: 18px;
	height: auto;
	margin-bottom: 18px;
	padding-left: 10px;
	border: 2px solid pink;
	padding-top: 10px;
	box-shadow: 10px 10px 10px #222;
}

div#ingameinfo {
	position: absolute;
	left: 0;
	top: 100px;
	width: 160px;
	border-radius: 0 10px 10px 0;
	background-color: white;
	border: 1px solid black;

}
/* start styles for stat tables in games.php */
div.img {
	background-size: contain;
}
table.level {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	vertical-align: top;
	display: inline-block;
	border-collapse: collapse;
}
table.level td,table.level th {
	padding: 4px;
	border: 1px solid black;
}
/* end styles for stat tables in games.php */
/* start "study settings confirmation" form styles in div#content in games.php */
div#content div#games form,div.profile#content form {
	width: 500px;
	position: relative;
	font-size: 20px;
	padding: 5px;
	padding-bottom: 5px;
	border: 3px outset pink;
}
div#content div#games form fieldset {
	display: inline-block;
	width: 30%;
	padding: 2px;
	vertical-align: top;
}
div#content div#games form fieldset label {
	padding: 0px 5px;
}
div#content div#games p {
	padding: 5px;
	margin: 0;
}
div#content div#games form input,div.profile#content form input {
	font-size: 20px;
	text-align: center;
	/*
	display: inline-block;
	float: right;
	height: 20px;
	width: 30px;
	*/
}
div#content div#games form input[type='checkbox'] {
	transform: scale(1.5);
}
div#content div#games form label,div.profile#content form label {
	display: inline-block;
	width: 101px;
	height: 20px;
}
/*
 * These selectors are too loose with multiple fieldsets in a form
div#content.games div#games form input:last-child,div.profile#content form input:last-child {
	width: 100%;
	height: 40px;
	vertical-align: top;
	background-color: #ffccee;
	text-align: center;
}
*/
div#games input[type='submit'] {
	width: 100% 	!important;
	height: 40px 	!important;
	vertical-align: top 	!important;
	background-color: #ffccee 	!important;
	text-align: center 	!important;
}

div.explanation {
	border: 1px solid black;
	background-color: #ffeeee;
	float: left;
	position: absolute;
	left: 730px;
	margin-top: 8px;
	margin-right: 40px;
	font-size: 14px;
	box-shadow: 9px 9px 9px #ddd;
}
div.explanation p {
	font-size: 1.5em;
	margin: 0;
	padding: 0;
}
div.gameinfo>p>a.desclink:link {
	display: inline;
	background-color: none;
	float: left;
	border: none;
	width: 215px;
	line-height: 40px;
	height: 40px;
}
/* end "study settings confirmation" form styles in div#content in games.php */
/* start game list in games.php */

div.gameinfo {
	width: 100%;
}
div.gameinfo div,div.gameinfo p {
	display: inline-block;
	vertical-align: top;
	width: 256px;
	height: 224px;
}
div.gameinfo>div {
	background-repeat: no-repeat;
	background-color: black;
	background-position: center;

}
/* end gamelist in games.php */
/* misc styles in div#content */
div#content.games a,div#content.flash a {
	display: block;
	padding: 5px;
	border: 1px solid black;
	text-align: center;
	margin: 10px;
	background-color: #ffccee;
}
div#content.games a:hover,div#content.flash a:hover {
	background-color: #ff4488;
}
/* end misc styles in div#content in games.php */
/* start styles for div.flashcard used in games.php kanji output */
.flashcard { border: 1px solid black; padding: 5px; margin: 10px; }
.flashcard li { list-style-type: none; }
.flashcard * { vertical-align: top; }
.kanji { display: inline-block; font-size: 88px; } 
div#games h3 { font-size: 18px; font-weight: bold; }
.tonari { display: inline-block; }
.grade,.jlpt  { font-size: 16px; text-align: center; height: 50px; }
.meaning,.on,.kun { display: inline-block; padding-left: 10px; padding-right: 10px; }
.kun { max-width: 200px; }
.kun li { display: inline; padding-left: 5px; }
.meaning { max-width: 200px; }
.meaning li { display: inline; padding-left: 5px; }
.flashcard li:after { content: ','; }
.flashcard li:last-child:after { content: ''; }
/* end styles for div.flashcard games.php kanji output */
/* end styles for div#content in games.php */
/* start styles for div#content in flash.php */
div#content.flash {
}
ul#confirmlist li {
	display: inline;
}
div.card {
	position: relative;
	border: 1px solid black;
	margin: 0 10px 0 0;
	padding-bottom: 10px;
}
div.card div {
	vertical-align: top;
	display: inline-block;
	width: 49%;
	height: 100%;
}
div.card .front h2 {
	font-size: 228px;
	text-align: center;
}
div.card .front dl {
	height: 30px;
	text-align: center;
}
div.card .front dl * {
	display: inline-block;
}
div.card .front dt {
	font-weight: bold;
	margin-right: 2px;
}
div.card .front dt:after {
	content: ":";
}
div.card .front dd {
	margin-right: 10px;
}
div.card .front p {
	text-align: center;
}

div.card .back {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	height: auto;
	color: #ff99bb;
	background-color: #ff99bb;
}
div.card .back>p {
	text-align: center;
	margin-top: 80px;
	color: white;
	font-size: 64px;
}
div.card .back div {
	width: 100%;
	height: 100%;
}
div.card .back:hover>div {
	overflow-y: scroll;
	color: black;
	background-color: white;
}
div.card .back:hover>p {
	display: none;
}

div.card form {
	text-align: center;
	width: 49%;
}
div.card a#skip {
	width: 6%;
	position: absolute;
	bottom: 0;
	margin-left: 43%;
}

div.card input {
	vertical-align: top;
	white-space: normal;
	width: 80px;
	display: inline-block;
	height: 40px;
	padding: 5px;
}
div.card .back dt {
	font-weight: bold;
}
div.card .back dl {
	font-size: 18px;
	vertical-align: top;
	display: inline-block;
	padding: 10px;
}
div.card .back {
	overflow: hidden;
}
dl#compounds dd,dl#compounds dt {
	float: left;
	vertical-align: top;
}
dl#compounds dd.reb:after {
	content: '】'
}
dl#compounds dd.reb:before {
	content: '【'
}
dl#compounds dd.spos {
	font-style: italic;
}
dl#compounds dd {
	margin-top: 3px;
}
dl#compounds dt:after {
	content: ' ・ ';
}
dl#compounds>dt:last-of-type:after {
	content: '';
	margin-right: 5px;
}
dl#compounds dd.sgloss {
	margin-left: 2px;
	margin-right: 3px;
}
dl#compounds dd.sgloss:after {
	content: ', ';
}
dl#compounds dd.spos:after {
	content: ', ';
}
dl#compounds dd.spos:last-of-type:after {
	content: '';
}

/* end flash.php stuff ? */
/* start profile stuff */
div#content.profile ol li {
	list-style-type: decimal;
	padding-left: 10px;
	list-style-position: inside;
}
div#content.profile table {
	text-align: center;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}
div#content.profile table#gameprogress {
	text-align: left;
}
/* end profile.php stuff */
/* end styles for div#content in flash.php */