@font-face{
    font-family: GenYoExt;
	src: url(/pics/wf/GenYoExt2-R.woff2) format("woff2"), url(/pics/wf/GenYoExt2-R.woff) format("woff"), url(/pics/wf/GenYoExt2-R.otf) format("opentype");
}

@font-face{
    font-family: GenYoExtX;
	unicode-range: U+1????, U+2????;
	src: url(/pics/wf/GenYoExt2-R.woff2) format("woff2"), url(/pics/wf/GenYoExt2-R.woff) format("woff"), url(/pics/wf/GenYoExt2-R.otf) format("opentype");
}

/*@font-face{
    font-family: KleeHi; font-weight: 600;
	src: url(/pics/wf/KleeHi-Regular.woff2) format("woff2"), url(/pics/wf/KleeHi-Regular.woff) format("woff"), url(/pics/wf/KleeHi-Regular.otf) format("opentype");
}*/

/*@font-face{
    font-family: UDMarugoHi; font-weight: 600;
	src: url(/pics/wf/UDMarugoHi-Regular.woff2) format("woff2"), url(/pics/wf/UDMarugoHi-Regular.woff) format("woff"), url(/pics/wf/UDMarugoHi-Regular.otf) format("opentype");
}*/

@font-face{
    font-family: NunitoPOJ; font-weight: 600;
	src: url(/pics/wf/NunitoPOJ-Regular.ttf) format("truetype");
}

@font-face{
    font-family: MyLexend;
	src: url(/pics/wf/MyLexendDeca-Light.woff2) format('woff2');
}

@font-face{
    font-family: Bandica; font-weight: normal;
	src: url(/pics/wf/Bandica-Regular.woff2) format("woff2"), url(/pics/wf/Bandica-Regular.woff) format("woff"), url(/pics/wf/Bandica-Regular.ttf) format("truetype");
}
@font-face{
    font-family: Bandica; font-weight: bold;
	src: url(/pics/wf/Bandica-Bold.woff2) format("woff2"), url(/pics/wf/Bandica-Bold.woff) format("woff"), url(/pics/wf/Bandica-Bold.ttf) format("truetype");
}

body { margin: 0; background: #fff url(/pics/bg.png) no-repeat fixed left bottom /*#f8f6f3*/; background-size: 592px 664px; font-family: Helvetica, Arial, GenYoExt, sans-serif; }
a:link { color: #0c7a68; text-decoration: none; }
a:visited { color: #0c7a68; text-decoration: none; }
a:hover { color: #a70852; text-decoration: none; }
a img { border: 0; }
h1 { margin: 0.2em 0 0.3em 0; font: normal 2.6em/1.5 'Microsoft Jhenghei', GenYoExt, san-serif; color: #150b00 }
.kw { font-family: 'Iansui', cursive; font-weight: 400; text-shadow: 1px 1px 6px #bbb }
@media screen and (max-width: 640px) { h1.kw { font-size: 2.2em; text-align: center; background: rgba(0, 0, 0, 0.15); border-radius: 30px; margin: 0.2em -8px 0.3em -8px; clear: both;} } 
h2 { margin: 20px 0 10px 0; font: 600 1.8em/1.6 SegoeUI, Arial, san-serif; color: #150b00 }
h3 { margin: 16px 0 8px 0; font-weight: bold; font: 600 1.5em/1.4 SegoeUI, Arial, san-serif }
h4 { margin: 13px 0 4px 0; font-weight: bold; font: 600 1.2em/1.4 SegoeUI, Arial, san-serif }
.sec { font-family: Huninn, GenYoExt, san-serif; font-weight: 400; }

.left { text-align: left !important }
.center { text-align: center !important }
.right { text-align: right !important }
.clear { clear: both }


/* head */
#head { position: fixed; width: 100%; top: 0; height: 50px; background: #2c2c2c; z-index: 100; }
#head #homelink { display: block; position: absolute; background: url(/pics/title0.png) no-repeat; background-size: 160px 60px; width: 160px; height: 60px }
#head #user { position: absolute; top: 25px; right: 10px; color: #fff }
div#main { font-size: 12pt; margin: 55px 1em 5px 1em; padding: 0.5em 0; color: #0c0301; position: relative; }
div#foot { clear: both; font-size: 11pt; text-align: center; color: #ddd; padding: 1em 0; border-top: 1px dotted #888; }
span#saseme { display: block; position: absolute; top: 5px; right: 5px; width: 80px; height: 40px; z-index: 101 }

#head #search { display: block; position: absolute; right: 460px; top: 15px; }
#head #search input { width: 100px; height: 18px; padding: 1px; border: 0; }
#head #search button { margin-left: 2px; width: 20px; height: 20px; background: #111 url(/pics/search.png) no-repeat; background-size: 20px 20px; vertical-align: bottom; border: 0 }

@media screen and (min-width: 1250px) {
	#header { width: 1240px; margin: 0 auto; position: relative; }
	div#main { width: 1210px; margin: 55px auto 5px auto } 
} 

/* tabs */
span#menubutt { display: none; }
div#tab { position: absolute; right: 0; top: 8px; margin: 5px 25px 0 25px; font-size: 13pt; border: 0; padding: 0; height: 30px; text-align: center; }
div#tab ul { margin: 0; padding: 0; }
div#tab ul li.tab { display: inline; font-weight: bold; line-height: 24px; margin: 0 0.5em 0 0 }
div#tab ul li.tab a { vertical-align: middle; padding: 3px 8px; border-radius: 12px 12px }
div#tab ul li.tab a:link, div#tab ul li.tab a:visited { color: #fff; text-decoration: none; }
div#tab ul li.tab a:hover { background-color: #fff; color: #2c2c2c; text-decoration: none; }

@media screen and (max-width: 800px) {
	span#menubutt { display: block; position: fixed; top: 0; right: 0; width: 60px; height: 50px; background: url(/pics/menu_open.png) no-repeat; background-size: 50px 50px; }
	span#menubutt.on { background: url(/pics/menu_close.png) no-repeat; background-size: 50px 50px }
	#head #search { right: 70px; }
	#head #search input { width: 80px; }
	div#tab { display: none; position: fixed; right: 0; top: 50px; margin: 0; min-width: 72px; background: #2c2c2c; height: auto; text-align: right; }
	div#tab ul li.tab { display: block; margin: 15px 0.5em } 
} 

@media screen and (max-width: 360px) {
	#head #search input { width: 60px; }
}

div#wtab { text-align: right; margin: 10px 0 20px 0; filter: grayscale(.8) }
div#wtab ul { margin: 0; padding: 0; }
div#wtab ul li.tab { display: inline; font-size: 1.2em; line-height: 20px; margin: 0 0.5em 0 0 }

@media screen and (min-width: 640px) {
	div#wtab { position: absolute; top: 15px; right: 0; }
}

th, td { vertical-align: top; }
div { margin: 0; }
dt { font-weight: bold; }


div.about { font-size: 95%; color: #565362; line-height: 150%; padding: 0.5em 0.3em 1em 0.3em; }
div#errmsg { padding: 1em; background-color: #eef; border: 1px solid #a05B5C; text-align: center; }
span#errmsg { font-size: 1.8em; font-weight: bold; margin: 1.5em 0; color: #f44; }
div#adsense1 { position: absolute; margin-top: 5px; right: 65px; }
div#adsense2 { margin: 2em 1em 1em 1em; }
div.redirect { font-size: 85%; margin: 1em 0; color: #0b887e }
div.info { margin-top: 3em; font-size: 0.8em; padding: 1em 0; border-top: 1px dotted #888; color: #888 }
div.info ul { margin: 0; padding: 0 2em; list-style: circle outside; }
div.info li { line-height: 1.4em; }

/* index page */
div.sidebar { float: right; max-width: 220px; min-width: 120px; background: #e4eefc; border: 10px solid #fff; padding: 10px 10px 30px 10px; margin-top: 50px }
@media screen and (max-width: 640px) {div.sidebar {  margin-top: 0 }}
div.sidebar > h3 { margin-top: 20px }
div.sidebar > ul { padding: 0; list-style: none }

/* wiki */
a.Y { border-bottom: 1px solid #aaaaaa; color: #1768b9 !important; text-decoration: none !important; }
a.N { border-bottom: 1px solid #aaaaaa; color: #a70d5a !important; text-decoration: none !important; }
span.N { /*border-bottom: 1px solid #aaaaaa;*/ color: #753a58; text-decoration: none !important; }

div.template { border: 1px solid #fff; background-color: #ff6666; padding: 0.5em; margin: 0.8em; font-size: 0.95em; font-weight: bold; color: #fff; text-align: center; margin-right: 180px; }
div.template a { color: #ff8 !important; }

/*.home div.ptext { float: left; min-width: 300px;}*/
.home #main { padding-top: 1em; }

div.ptext { line-height: 1.6; padding-left: 2px }
.ptext h2 { margin-left: -2px; }
.ptext h3 { margin-left: -1px; }
.ptext p { margin: 0 0 0.5em 0 }
.ptext em { font-style: normal; font-weight: bold;}
/*.ptext h4 { font-weight: bold; border-bottom: 1px solid #ED8878; border-left: 8px solid #ED8878; margin: 0.5em 0; padding: 5px 0.6em; line-height: 1.4em; font-size: 1.4em; }
.ptext h5 { font-weight: bold; border-left: 4px solid #ED8878; margin: 0.4em 0; padding: 0.3em 0.5em; line-height: 1em; font-size: 1em; }*/
a.outlink { background: transparent url(/pics/link.png) no-repeat right; background-size: 16px 16px; padding-right: 20px }
/*.ptext a.outlink { display: inline-block; max-width: 300px; overflow:hidden; text-overflow: ellipsis; }
#.ptext a.outlink:after { content: ' '; display: inline; background: transparent url(/pics/link.png) no-repeat right; background-size: 16px 16px; padding-right: 20px; }*/

.ptext ul { padding: 0; list-style: none }
/*@media screen and (max-width: 1024px) {  .ptext .cols { columns: 3 } }*/
/*@media screen and (max-width: 640px) {  .ptext .cols { d: 2 } }*/
.ptext ol { padding: 0 0 0 32px; margin: 0; list-style: decimal outside; }
.ptext li { margin: 0.2em 0 }
.ptext ul > li, .ptext ul > ul, .ptext ul > ol { padding-left: 32px }
.ptext ul > ul, .ptext ol > ol  { margin: 0.2em 0; }
.ptext ul > ol, .ptext ul > ol { margin: 0.2em 0 0.2em 32px; }
/*.ptext li { margin: 0.2em 0 }*/
.ptext ul > li { background: url(/pics/list5.png) no-repeat 8px 7px; background-size: 12px 12px }

.ptext > ul > li { background-image: url(/pics/list1.png); }
.ptext > ul > ul > li, .ptext > ol > ul > li { background-image: url(/pics/list2.png); }
.ptext > ul > ul > ul > li, .ptext > ul > ol > ul > li, .ptext > ol > ul > ul > li, .ptext > ol > ol > ul > li { background-image: url(/pics/list3.png); }
.ptext > ul > ul > ul > ul > li, .ptext > ul > ul > ol > ul > li, .ptext > ul > ol > ul > ul > li, .ptext > ul > ol > ol > ul > li, 
.ptext > ol > ul > ul > ul > li, .ptext > ol > ul > ol > ul > li, .ptext > ol > ol > ul > ul > li, .ptext > ol > ol > ol > ul > li { background-image: url(/pics/list4.png); }

/*
.ptext ul, .ptext ol { padding: 0 0 0 32px; }
.ptext ul { list-style: none }
.ptext li { margin: 0.2em 0; padding: 0 }
.ptext ul > li { background: url(/pics/list5.png) no-repeat -10px 5px; background-size: 12px 12px; overflow: visible }
.ptext > ul > li { background-image: url(/pics/list1.png); }
.ptext > ul > ul > li, .ptext > ol > ul > li { background-image: url(/pics/list2.png); }
.ptext ol { list-style: decimal outside; }
.ptext ol > li { padding: 0; margin: 0.2em 0; }
.ptext ul > ul, .ptext ul > ol { margin: 0.4em 0 0.4em 0; }
*/
.ptext img { border: 0; }
.ptext img.middlepic { display: block; margin: 0 auto; max-width: 100% }
.ptext code { padding: 0 0.3em; }
/*.ptext div.aa { border: 1px solid #aaa; margin: 0.5em; padding: 0.5em; font-size: 85%; line-height: 1.2em; font-family: 'MS PGothic'; }*/
.ptext pre { background-color: rgba(232, 232, 232, 0.3); margin: 0.5em; padding: 0.5em; font-size: 0.95em }
.ptext blockquote { border: 1px solid #aaa; margin: 0.5em; padding: 0.5em }
@media screen and (min-width: 640px) { .ptext .cols { display: grid  } }
blockquote.ptext h2:first-child, blockquote.ptext h3:first-child { margin-top: 0 }
/*@media screen and (max-width: 640px) { .ptext .cols { columns: 1 } } */
/*.ptext .cols > blockquote { width: 100%; border: 0; padding: 0; margin: 0 0 10px 0; break-inside: avoid }
.ptext .cols > blockquote blockquote { margin-top: 0 }*/
.ptext table { border-collapse: collapse; margin: 0.5em 2px }
.ptext th, .ptext td { margin: 0; padding: 3px 0.3em; border: .5pt solid #777;}
.ptext .tight th, .ptext .tight td { padding: 3px 2px }
.ptext th { text-align: center; background: rgba(232, 232, 232, 0.6) }
.ptext hr.ps { height: 1px; color: #999; /* for ie */ background-color: #999; /* for others */ margin: 1em 70% 0.6em 0px; padding: 0; border: 0; clear: both; /*width: auto;*/ }
.ptext a.notelink { vertical-align: super; font-size: 0.8em }
.ptext .genyo {  font-family: GenYoExt, Helvetica, Arial, sans-serif; }

.ptext ol.notes { border-top: 3px double #777; color: #555; font-size: 0.9em; margin-top: 3em; padding-top: 1em; width: 75% }

.ptext div.grid { width: 46%; float: right; border: 1px solid #669; padding: 1%; margin: 0.5% }

/* web font tester */
div.webfont { font-size: 48px; background: #eee; padding: 6px 12px; color: #000 }
@media screen and (max-width: 640px) { div.webfont { font-size: 30px; } } 
div.wftip { font-size: 80%; color: #8F9AAF; }

/* edit */
table#formtable { border-collapse: collapse; width: 100%; }
table#formtable th.label { padding: 5px; margin: 0; width: 80px; color: #072052; font-weight: bold; text-align: right; border-top: 1px solid #A1BBC2; white-space: nowrap; }
table#formtable td.input { padding: 5px; margin: 0; border-top: 1px solid #A1BBC2; }
table#formtable td.input span.tip { font-size: 80%; padding-left: 2em; color: #888; }
div#notice { padding: 1em 3em; font-size: 0.8em; line-height: 1; }
div#notice ul { margin: 0; padding: 0 1.8em; }
div#notice li { list-style: disc outside; color: #E11868; margin: 0.4em 0; }
div#notice li.imp { font-size: 1.2em; font-weight: bold; }
div#preview { border-style: dashed; border-color: #999; border-width: 3px 0; padding: 0.5em 0; margin: 2em 0 }

div.zihifuncdummy { width: 70%; background-color: #aaa; text-align: center; padding: 15px 0; margin: 5px 0 }

input.imgfn { border: 0; outline: 0; width: 200px; cursor: pointer; }
li.wpic { cursor: pointer }
img#img_panel { display: block; position: absolute; z-index: 10; max-width: 400px; max-height: 400px; border: 1px solid #999; box-shadow: 2px 2px 2px 1px #ccc; border-radius: 5px }

/* edit toolbar */
/*div#editbar { width: 902px; background-color: #ddd1cd; padding: 5px 2px; font-size: 2px; display: none }*/
span.btngroup { padding: 0 6px; }
img.editbtn { cursor: pointer; }
textarea#textInput { width: 100%; padding: 2px; font-size: 13pt; font-family: GenYoExt, monospace; }

/* history */
/*ul.history { list-style: disc outside; }*/
ul.history li { color: #999; padding: 0.2em; /* border-bottom: 1px dotted #ccc; */ }
ul.history a.diffbtn { font-size: 0.7em; border: 1px solid #F18239; color: #F18239 !important; background-color: #F9D6BE; padding: 2px; margin-right: 0.8em; }
ul.history span.xbtn { font-size: 0.7em; color: #aaa !important; background-color: #ddd; border: 1px solid #aaa; padding: 2px; margin-right: 0.8em; }
span.plus { color: #00f; }
span.minus { color: #f00; }

/* diff */
div#diff { font-size: 0.95em; clear: both; padding: 0.5em; border: 1px solid #aaa; margin: 1em 1em 60px 1em; width: auto; overflow: scroll; background-color: #fff; }
div#diff span.add { color: blue !important; font-weight: bold; text-decoration: underline; }
div#diff span.del { color: red !important; text-decoration: line-through; }
div#diff span.space1 { color: #aaa; }
div#diff span.space2 { font-size: 0.8em; color: #aaa; }
div#diff span.modified { background-color: #dd0 }
/*div#diff span.linehead { text-decoration: line-through underline; background-color: #fff; color: #fff; }*/



/* uni  */
.uni .sq { float: left; width: 100px; height: 100px; padding: 6px; background: #fff; margin: 10px 20px 0 0; border: 1px solid #aaa; }
.uni #char { font: normal 100px/1 'Microsoft Jhenghei', GenYoExt, san-serif; text-align: center; position: relative }
.uni #char.emoji { font-size: 80px }
.uni #sample { background: #fff no-repeat center; background-size: 100px 100px; position: relative}
.uni #char .legend, .uni #sample .legend { display: block; position: absolute; bottom: -18px; width: 112px; left: 0; text-align: center; font: 12px/1 'Microsoft Jhenghei', san-serif }

/*#.uni #sample span { background: #fff no-repeat center; background-size: 100px 100px; width: 100px; height: 100px; cursor: pointer }*/
.uni h2 { font-family: 'Proza Libre', sans-serif; font-weight: 400; margin: -10px 0 10px 0; letter-spacing: -1px;}
@media screen and (max-width: 640px) {
	.uni .sq { float: right; width: 64px; height: 64px; margin: 10px 10px 0 0; }
	.uni #char {  font-size: 64px }
	.uni #char.emoji { font-size: 56px }
	.uni #sample { background-size: 64px 64px }
	.uni #char .legend, .uni #sample .legend { top: -18px; width: 76px }
	.uni h2 { clear: both; line-height: 1.2; padding-top: 10px } 
}

.uni .wrapper { border: 1px solid #eee }
.uni .scaler { transform-origin: left top }

.uni .cid { display: inline-block; position: relative; width: 61px; height: 84px; text-align: center; margin-right: 10px; border: 1px solid #eee; font-size: 13pt; }
.uni .cid span { display: block; position: absolute; top: 20px; left: 0; width: 61px; height: 61px;  }
.uni h1 .cid { vertical-align: top; }

@media screen and (max-width: 640px) { 
	.uni .cid { width: 50px; height: 64px; text-align: center; }
	.uni .cid span { transform-origin: left top; transform: scale(.67); left: 5px; margin: 0 -20px -20px 0 } 
}
/*.uni img { max-width: 100% }*/

.query { margin: 0.5em 0 /*text-align: center*/ }
.query input { font-size: 1.5em; border-radius: 0.8em 0 0 0.8em; width: 60%; padding: 4px 12px; border: 1px solid #444; vertical-align: bottom; font-family: GenYoExt; }
.query button { font-size: 1.4em; margin: 0 3px; border-radius: 0 0.8em 0.8em 0; padding: 3px 12px 3px 8px; border: 1px solid #444; vertical-align: bottom;}
@media screen and (max-width: 640px) {
	.query input { width: 65%; font-size: 1em } 
	.query button { font-size: 0.9em }
}

table a.char { padding-right: 8px }
a.char .c { margin-left: 6px; padding: 1px; color: #000; background-color: #eee; font-family: GenYoExt, sans-serif; }
a.char .poj { font-family: Bandica, GenYoExt, sans-serif; }

.uni .seq a.char { display: inline-table; padding-right: 12px }
.uni .seq a.char .c { display: table-row; font-size: 1.6em; text-align: center; line-height: 1.5 }
.uni .seq a.char .h { display: table-row; font: 0.85em/1.2 Consolas, courier }

table.info { width: 100% }
table.info th, table.info td { padding: 4px; font-size: 13pt; font-family: "San Francisco", "Segoe UI", sans-serif }
table.info th { background: #eee; text-align: left; width: 300px; font-weight: normal }
@media screen and (max-width: 640px) {
	 table.info th { width: 160px } 
	 table.info th .o { display: none; } 
}
table.info td .seg { margin-right: 20px; white-space: nowrap; }

table.info td { border-bottom: 1px solid #eee }
table.info a.outlink { position: relative; top: -0.2em; font-size: 85%; padding-left: 10px; color: #750530 !important }
table.info td code { color: #0020aa; display: block }
table.info td .hint { color: #999; font-size: 85% }

#official td { font-family: GenYoExt, "San Francisco", "Segoe UI", sans-serif }

.uni table.emojis { width: 100% }
table.emojis th, table.emojis td { padding: 4px; font-size: 13pt; font-family: "San Francisco", "Segoe UI", sans-serif }
table.emojis th { background: #eee; text-align: left; font-weight: normal }
table.emojis th.emoji { text-align: center; width: 2em }
table.emojis th.emoji span { display: inline-block; width: 20px; height: 20px; background: #eee no-repeat center; background-size: 20px 20px; vertical-align: bottom;}

#derives, #compatibles { border: 1px solid #eee }

#variants { border: 1px solid #eee }
#variants .v { display: inline-block; position: relative; width: 62px; height: 74px; text-align: center; margin: 3px }
#variants a { font-size: 44px; line-height: 1 }
#variants .same a { opacity: 0.4; }
#variants .tag { text-align: center; width: 62px; position: absolute; top: 46px; left: 0; font-size: 13px; line-height: 1; }
#variants .src { text-align: center; width: 62px; position: absolute; top: 60px; left: 0; font-size: 11px; line-height: 1 }

#fonts { border: 1px solid #eee }
#fonts .glyph { display: inline-block; position: relative; height: 100px; text-align: center; margin: 3px 0 }
.char #fonts .glyph { padding: 0 1px; height: 125px; }
#fonts .glyph img { height: 100px }
#fonts .finfo { text-align: center; width: 100%; position: absolute; bottom: 5px; left: 0; font-size: 11px; line-height: 1; overflow: hidden }
@media screen and (max-width: 640px) {
	#fonts .glyph { height: 60px; }
	.char #fonts .glyph { padding: 0 1px; height: 90px; }
	#fonts .glyph img { height: 60px }
}

.uni #enclist { text-align: center; margin: 8px 0 }
.uni table.codemap { width: 100%; border-collapse:collapse; border: 1px solid #999 }
.uni table.codemap th, .uni .codemap td { border: 1px solid #999; vertical-align: middle; }
.uni table.codemap th { background-color: #ddd; padding: 4px 0 }
.uni table.codemap th.block { background-color: #999; color: #fff; padding: 7px 0 }
.uni table.codemap td { font-size: 28px; text-align: center; padding: 2px }
.uni table.codemap td.common { background: #6ff5c2 }
.uni table.codemap td.multi { background: #f87e8f }
.uni table.codemap td.na { background: #eee }
.uni table.codemap td.mltna { background: #d37d89 }
.uni table.codemap td a { color: #021d12 !important; padding: 0 2px; line-height: 1.4; }
@media screen and (max-width: 640px) { .uni table.codemap td { font-size: 16px } }

.uni .navi { text-align: right; padding: 5px }
.uni .navi a { padding-left: 25px }
.uni .navi a.codemap { font-size: 150%; line-height: 1; vertical-align: -4px; }

.ja { font-family: "Yu Gothic", "YuGothic", "Toppan Bunkyu Gothic", "BIZ UDGothic", "Hiragino Sans", sans-serif }
.zh-tw { font-family:  "Microsoft Jhenghei", sans-serif }

.poj { font-family: Bandica, sans-serif }