@import "alertify.core.css";
@import "alertify.default.css";

/*@font-face {
	font-family: StrokeOrders;
	src: url('../KanjiStrokeOrders_v3.000.ttf')
}*/

.stroke-font {
	font-family: serif;
}

body {
	background: url("../img/background2.jpg") repeat;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Ｐゴシック","MS PGothic" serif;
}

.gothic {
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Ｐゴシック","MS PGothic" serif;
}

.mincho {
	font-family:"ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
}

div#info {
	margin: 0 auto;
	width: 600px;
	font-size: 13pt;
	padding-left: 30px;
	padding-right: 30px;
}

div#spacer {
	height: 30px;
}

div#social_buttons {
	margin: 0 auto;
	width: 600px;
	max-width: 600px;
	font-size: 13pt;
	padding-top: 20px;
	padding-right: 30px;
}

div#pr {
	border: 1px solid black;
	vertical-align: middle;
	margin: 0 auto;
	margin-top: 20px;
	width: 600px;
	max-width: 600px;
	font-weight: normal;
	font-size: 13pt;
	padding: 10px;
	background: #FFF0D1;
}

div.pr-line {
	margin-top: 5px;
	margin-bottom: 5px;
}

span.pr-head {
	font-size: 11pt;
	font-weight: bold;
}

div#logo {
	float: left;
	margin-right: 35px;
	margin-left: 35px;
	margin-top: -5px;
}

div#search_box {
	float: left;
	width: 450px;
	margin: 0;
	padding: 0;
	margin-top: 0px;
}

input#search_input, input#bushu_search_input {
	font-size: 16pt;
	padding: 0;
	padding-left: 10px;
	float: left;
	border: 1px #ccc solid;
	height: 40px;
	width: 290px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

input[type=button], button {
	background: #444444;
	color: #eee;
	font-size: 16pt;
	border: none;
	cursor: pointer;
}

input#search_button, input#bushu_search_button {
	float: left;
	height: 40px;
	width: 100px;
	padding: 0;
	margin: 0;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

input#bushu_select_button {
	margin-right: 10px;
	width: 160px;
	background-color: #444477;
	border-radius: 10px;
}

input#detail_search_button {
	margin-right: 10px;
	width: 160px;
	background-color: #744578;
	border-radius: 10px;
}

input#detail_search_button {
	width: 160px;
	background-color: #555555;
}

input#search_button {
	background-color: #664444;
}

input#bushu_search_button {
	background-color: #446644;
}

div#header_outer {
	overflow: auto;
}

div#header {
	padding: 10px;
	padding-bottom: 5px;
	width: 875px;
	height: 160px;
	margin: 0 auto;
	/*margin-left: 1px;*/
	background: url("../img/header_back2.png") no-repeat;
}

div.tab2, div.tab3 {
	display: none;
}

div#outer {
	z-index: 5;
	overflow: hidden;
}

div#centering {
	width: 895px;
	margin: 0 auto;
}

div#content {
	background: url("../img/content_back2.png") repeat-y;
	width: 835px;
	padding-left: 30px;
	padding-right: 30px;
	margin: 0 auto;
}

div#letter_container_outer {
	overflow: auto;
}

div.result_row {
	height: 180px;
}

div#letter_container {
	/*width: 770px;*/
	width: 100%;
	overflow: auto;
	/*margin-left: 40px;*/
	margin-bottom: 20px;
	z-index: 100;
}

div#letter_inner {
	/*margin-top: 80px;*/
	margin: 0 auto;
	font-size: 300px;
	line-height: 300px;
}

div#letter {
	float: left;
	display: table-cell;
	text-align: center;
	padding-top: 0px;
	/*padding-left: 20px;*/
	/*padding-right: 40px;*/
	/*background: #ffeeee;*/
	margin-bottom: 40px !important;
}

div#letter_description {
	float: left;
	/*width: 360px;*/
	margin-top: 0px;
	font-size: 30pt;
	/*background: #eeeeff;*/
}

div#letter_description ul {
	padding: 0;
	margin: 0;
	margin-top: 5px;
	margin-bottom: 5px;
}

div#letter_description ul li {
	list-style-type: none;
}

.small {
	font-size: 20pt;
}

.moresmall {
	font-size: 16pt;
}

.verysmall {
	font-size: 14pt;
	line-height: 140%;
}

div.tab-button {
	border-radius: 5px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	position: absolute;
	border: 2px #fff solid;
	border-bottom: none;
	background: #fff;
	color: #000000;
	padding: 4px;
	padding-left: 10px;
	padding-right: 10px;
	z-index:10;
	float: left;
	font-size: 10pt;
	cursor: pointer;
}

div.tab-button.active {
	border: 4px solid white;
	border-color: #000000
	z-index:13;
}

div.btn1 {
	left: 20px;
}

div.btn2 {
	left: 152px;
}

div.btn3 {
	left: 275px;
}

div.tab-buttons {
	position: relative;
	height: 32px;
	margin-bottom: -3px;
}

div.tab.active {
	z-index:12;
}

div.tab {
	z-index:8;
	border-radius: 15px;
	clear:both;
	padding: 20px;
	border: 3px #fff solid;
	width: auto;
	height: 40px;
	background: #fff;
}

div#toggle_font_container {
	/*margin-left: 20px;*/
	margin-top: 20px;
	/*margin-bottom: -50px;*/
}

button#toggle_font {
	border-radius: 15px;
	background: #067F1C;
	margin: 0 auto;
	/*width: 300px;*/
	padding: 10px;
}

div.line {
	height: 1px;
	width: 100%;
	background: #bbb;
}


span.code_type {
	font-weight: bold;
	/* margin-right: 0.5em; */
}

span.letter-code {
	text-decoration: underline;
}

#result_outer {
	padding-left: 30px;
	padding-right: 30px;
	height: auto;
	padding-bottom: 40px;
}

#result {
	height: auto;
}

.bushu {
	/*float: left;*/
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	background: white;
	border: 1px solid #aaa;
	padding: 10px;
	width: 104px;
	height: 150px;
	font-size: 90px;
	margin-bottom: 30px;
	cursor: pointer;
}

.letter_with_bushu {
	/*float: left;*/
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	background: white;
	border: 1px solid #aaa;
	padding: 10px;
	width: 104px;
	height: 150px;
	font-size: 90px;
	margin-bottom: 30px;
	cursor: pointer;
}

.letter_with_bushu:hover {
	background: #faa;
}

.bushu:hover {
	background: #faa;
}

.veryverysmall {
	font-size: 11pt;
}

#no_result {
	text-align: center;
	color: #d66;
	font-size: 18pt;
}

h2#search_result {
	border-bottom: 1px solid #777777;
	margin-top: 0;
}

h3.reading_number_head, h3.stroke_number_head {
	padding-top: 10px;
	padding-bottom: 10px;
	background: #aaddaa;
	border-bottom: 1px solid #446644;
	color: black;
}

/*table {
	border-collapse: collapse;
}

th {
	font-weight: normal;
	border: 1px solid black;
	background: #995555
	color: white;
	padding: 0.5em;
}

td {
	border: 1px solid black;
	background: #fff;
	color: black;
	padding: 0.5em;
}*/

/*************** GENERATED BY CSSTableGenerator ****************/
.stylish-table {
	margin:0px;padding:0px;
	width:100%;
	border:1px solid #000000;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.stylish-table table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.stylish-table tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.stylish-table table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.stylish-table table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.stylish-table tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}.stylish-table tr:hover td{
	background-color:#ffaaaa;
		

}
.stylish-table td{
	vertical-align:middle;
	
	background-color:#ffffff;

	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:11px;
	font-size:15px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}.stylish-table tr:last-child td{
	border-width:0px 1px 0px 0px;
}.stylish-table tr td:last-child{
	border-width:0px 0px 1px 0px;
}.stylish-table tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.stylish-table tr:first-child td{
		background:-o-linear-gradient(bottom, #ff5656 5%, #7f0000 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #7f0000) );
	background:-moz-linear-gradient( center top, #ff5656 5%, #7f0000 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#7f0000");	background: -o-linear-gradient(top,#ff5656,7f0000);

	background-color:#ff5656;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:15px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.stylish-table tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #ff5656 5%, #7f0000 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #7f0000) );
	background:-moz-linear-gradient( center top, #ff5656 5%, #7f0000 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#7f0000");	background: -o-linear-gradient(top,#ff5656,7f0000);

	background-color:#ff5656;
}
.stylish-table tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.stylish-table tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}
/*************** End of GENERATED BY CSSTableGenerator ****************/

.stylish-table tr {
	cursor: pointer;
}

td.bushu-list-letter {
	font-weight: bold;
	font-size: 13pt;
}

a {
	color:#aa4444;
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	border-bottom: 2px dotted #aa4444;
}

a.link-reading {
	color: #000000;
	font-weight: bold;
}

a.link-reading:hover {
	border-bottom: 2px dotted #333333
}

div#content_end_image_container {
	background: url('../img/content_end_back2.png') no-repeat;
	margin: 0 auto;
	text-align: center;
	width: 895px;
	height: 143px;
}

/*img#content_end_image {
	margin: 0 auto;
	margin-top: 0;
	width: 895;
	height: 143;
}*/

div#footer {
	font-size: 11pt;
	padding: 20px;
	text-align: center;
	color: #ccc;

	height: 90px;
	border-top: 2px solid #ccc;
	background: #622330;
}

div#footer p a {
	color:#f5c089;
	font-weight: normal;
	text-decoration: none;
}
div#footer p a:hover {
	border-bottom: 2px dotted #d5a069;
}
span.copyright {
	font-weight: bold;
}

div#google_adsense {
	text-align: center;
	margin-top: 0;
	padding-top: 40px;
}

div#top-center {
	text-align: center;
}

img#top_image {
	margin: 20px auto;
}

p#opensource {
	padding: 10px;
}

div#letter_tags {
	font-size: 13pt;
	margin-bottom: 10px;
}

span.letter_tag {
	margin-right: 10px;
	padding: 5px;
	border: 1px solid #aaaaaa;
	/*background: white;*/
}

.jouyou {
	background: #D10300;
	color: white;
}

.kanken {
	color: white;
}

.grade_10 {
	background: #7AD100;
}

.grade_9 {
	background: #2AD100;
}

.grade_8 {
	background: #00D154;
}

.grade_7 {
	background: #00D1A4;
}

.grade_6 {
	background: #00A7D1;
}

.grade_5 {
	background: #0065D1;
}

.grade_4 {
	background: #001CD1;
}

.grade_3 {
	background: #4600D1;
}

.grade_jun2 {
	background: #8F00D1;
}

.grade_2 {
	background: #C000D1;
}

.grade_jun1 {
	background: #D1008F;
}

.grade_1 {
	background: #D10050;
}

.jis_grade_1 {
	color: #ffffff;
	background: #006880;
}

.jis_grade_2 {
	color: #ffffff;
	background: #00800B;
}


#error_outer {
	margin-left: 20px;
	margin-right: 20px;
	border: 10px solid #aa4444;
	background: #ffeeee;
}

#error_code {
	color: #aa4444;
	text-align: center;
	font-family: 'Sigmar One', cursive;
	font-size: 60pt;
}

#detail_search {
	font-size: 13pt;
	padding-top: 40px;
	padding-left: 80px;
	padding-right: 80px;
}

.search_group {
	z-index: 19;
	border: 3px solid white;
	background: #eee;
	padding: 15px;
	padding-left: 30px;
	border-radius: 10px;
	margin-bottom: 40px;
}

#search_group_bushu {
	background: #c5dd91;
}

#search_group_title_bushu {
	background: #c5dd91;
}

#search_group_kanji {
	background: #febdbd;
}

#search_group_title_kanji {
	background: #febdbd;
}

#check_kanken {
	margin-left: 5px;
	margin-right: 5px;
	width: 30px;
}

.search_group_title {
	z-index: 20;
	border: 3px solid white;
	margin-top: -40px;
	margin-left: -10px;
	margin-bottom: 20px;
	vertical-align: middle;
	text-align: center;
	width: 70px;
	height: auto;
	/*height: 15px;*/
	background: #eeeeee;
	border-radius: 10px;
	padding: 3px;
}

.search_group_row {
	margin-bottom: 10px;
}

.search_group_input {
	margin-left: 10px;
	font-size: 13pt;
	height: 20px;
	width: 200px;
	border: 1px solid #aaaaaa;
	border-radius: 10px;
	padding: 5px;
}

#detail_bushu_select {
	background: #5E7925;
	border-radius: 10px;
	width: 80px;
}

#detail_search_button {
	display: none;
	background: #A60303;
	border-radius: 10px;
	margin-top: -20px;
	margin-left: 210px;
	height: 50px;
	width: 150px;
}

.vcenter {
	vertical-align: center;
}

.normal-checkbox {
	width: 15px;
	height: 15px;
}

.regular-radio {
	-webkit-appearance: none;
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 50px;
	display: inline-block;
	position: relative;
}

.regular-radio:checked:after {
	content: ' ';
	width: 12px;
	height: 12px;
	border-radius: 50px;
	position: absolute;
	top: 3px;
	background: #99a1a7;
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
	text-shadow: 0px;
	left: 3px;
	font-size: 32px;
}

.regular-checkbox {
	-webkit-appearance: none;
	margin-right: 10px;
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
}

.regular-checkbox:active, .regular-checkbox:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.regular-checkbox:checked:after {
	content: '\2714';
	font-size: 14px;
	position: absolute;
	top: 0px;
	left: 3px;
	color: #99a1a7;
}

.regular-checkbox:checked {
	background-color: #e9ecee;
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #99a1a7;
}

.regular-radio:checked {
	background-color: #e9ecee;
	color: #99a1a7;
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}

#check_kanken {
	border: 1px solid #aaaaaa;
	padding: 2px;
	border-radius: 5px;
	width: 70px;
	font-size: 12pt;
}

.regular-radio:active, .regular-radio:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.big-radio {
	padding: 16px;
}

.big-radio:checked:after {
	width: 24px;
	height: 24px;
	left: 4px;
	top: 4px;
}