/* Colour scheme: #9be1fb #c5effd #bd2031 #231f20 #ffffff #006295 */

html, #pageheader, #pagefooter { background:#006295;x:#2d4d76; }
body { margin: 0; padding: 0; font-family: helvetica; font-size:14px; }
h1 { font-size:20px; margin:5px 0px 5px 0; }
h2 { font-size:18px; margin:5px 0px 5px 0; }
h3 { font-size:16px; margin:5px 0px 5px 0; }
h4 { font-size:14px; margin:5px 0px 5px 0; }
a { text-decoration:none; }
img { border:none; }
button { padding:0 8px;-webkit-appearance:button;font-family:arial,sans-serif;font-size:15px;height:1.85em;margin:0.2em;background:-webkit-gradient(linear, left top, left bottom, from(#ddd), to(#eee));border:1px solid #999;-webkit-border-radius:2px;}
#pageheader { padding:8px; height:50px; border-bottom:2px solid #202020; color:#cfcfff; }
#pageheader .logo { position:absolute; top:-10px; left:0; border:none; width:80px; height:80px; }
#pageheader .title { display:block; margin-left:90px;font-size:30px; }
#pageheader .subtitle { display:block; margin-left:94px; font-size:14px; }

#twitterlink { position:absolute; top:3px; right:10px; z-index:100; }

#navbar { position:absolute; top:18px; right:110px; }
#navbar a { color:#fff; font-weight:bold; text-decoration:none; }
#navbar a:hover { color:#ccc; font-weight:bold; text-decoration:none; }

#pagebody {background:#fff; padding-bottom:10px; border-top:2px solid #d0d0d0; border-bottom:2px solid #d0d0d0; }
#pagebody_inner { padding-top:20px; }

#pagefooter { padding:8px; border-top:2px solid #202020; font-size:12px; color:#fff; }
#pageheader_inner, #pagebody_inner, #pagefooter_inner { width:800px; margin: 0 auto; position:relative; }

#creator { float:right; }
#creator a { text-decoration:none; color:#fff; }
#creator a:hover { text-decoration:underline; }

form table th { text-align:left; }
form table ul.errorlist { position:absolute; left:320px; z-index:1001; color:#f66; background:#ffe8e0; border:1px solid #f0a0a0; padding:3px 8px; margin:0; }
form table ul.errorlist li { list-style-image:none; list-style:none; padding-left:0px; line-height:16px; }

.kanjikey { padding:5px; }
.kanjikey td { width:16px;border:1px solid #666; }
.kanjikey .label { padding-left:4px; width:50px; border:none; }
.kanjigrid { font-size:12px; width:800px; }
.kanjigrid .failed, .kanjikey .failed { background:#993737; }
.kanjigrid .bad, .kanjikey .bad { background:#DF4C68; }
.kanjigrid .ok, .kanjikey .ok { background:#EF7B1D; }
.kanjigrid .good, .kanjikey .good { background:#CDCF00; }
.kanjigrid .great, .kanjikey .great { background:#A4EF2C; }
.kanjigrid .perfect, .kanjikey .perfect { background:#3F7F1F; }
.kanjigrid td { text-align:center; padding:2px; line-height:20px; }

table.datatable { border-collapse:collapse; border:1px solid #888; }
table.datatable td, table.datatable th { padding:4px; font-size:15px; }
table.datatable tr th { background:#3bbfff; text-align:left; }
table.datatable tr.rowa td { background:#b8e8ff; }
table.datatable tr.rowb td { background:#a0c0ff; }


#kanji_box { border:1px solid #888; width:320px; height:300px; position:relative; overflow:hidden; overflow-y:auto; }
#click_to_expose { text-align:center;padding:80px 10px 10px 0;color:#aaa;font-weight:bold; }
#kanji_flash_msg { 
	position:absolute;
	width:280px;
	padding:10px 20px;
	text-align:center;
	border-top:none;
	-moz-border-radius-bottom-left:10px;
	-moz-border-radius-bottom-right:10px;
	-webkit-border-bottom-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
}
#kanji_flash_msg.decrease {
	background:#fee;
	color:#800;
	border:1px solid #800;
	border-top:none;
}
#kanji_flash_msg.increase {
	background:#efe;
	color:#080;
	border:1px solid #080;
	border-top:none;
}


.article-view { width:450px; }
.article-view .source { font-size:12px;color:#888; }
.article-view .player { padding-top:10px;text-align:right; }
.article-view .body { padding-top:10px; }

.article-view span { cursor:pointer; }
/*.article-view .skip { color:#6a6; }*/
.article-view .unknown { color:#f00; }
/*.article-view .failed { color:#222; }
.article-view .bad { color:#444; }
.article-view .ok { color:#666; }
.article-view .good { color:#888; }
.article-view .perfect { color:#aaa; }*/

.difficult-kanji .moji { font-size:36px; font-weight:bold; width:40px; }
.difficult-kanji .reading { font-size:12px; width:200px; }
.difficult-kanji .defn { width:300px; }