html, body { margin: 0; padding: 0; height: 100%; }
img { vertical-align: middle; }
a img { border: none; }

/* Page layout */
body { background: rgb(188, 230, 239) url(/img/water.gif) repeat-y; }
#photo { position: absolute; z-index: 1; top: 0; right: 0; width: 220px; height: 770px; background: url(/img/photo.gif) top right no-repeat; }
#wrap { position: relative; z-index: 2; min-height: 100%; background: url(/img/stripe.gif) top right; padding: 24px; }

h1 { height: 82px; background: url(/img/jp/title.gif) top right no-repeat; }
#categories { float: right; width: 220px; height: 640px; }
#errors, #content { margin-right: 240px; }
address { float: right; width: 389px; height: 40px; background: url(/img/jp/mail.gif) top right no-repeat; }
h1 span, address span { display: none; }
h1 a { display: block; height: 82px; }
#account { clear: right; padding-bottom: 1em; }

.entry, .comments { padding-top: 20px; }
#errors { padding-bottom: 20px; }
.comment { border-bottom: groove rgb(243, 243, 243) 2px; }
.comment-last { border-bottom: none; }

/* Text style */
body, input, textarea, button, select, option { font-family: "Calibri", "Tahoma", "Meiryo", "VL Gothic", "Hiragino Kaku Gothic Pro", "MS Gothic", "ＭＳ ゴシック", "Arial", sans-serif; }
body { color: rgb(64, 64, 64); font-size: 0.9em; line-height: 1.4; }
h1, h2, h3, h4, h5, h6, p { margin: 0; padding-bottom: 1em; }
h2, h3 { font-weight: bold; font-style: normal; font-size: 1em; }
th, h2, a:link { color: rgb(37, 154, 45); }
a:visited { color: rgb(64, 64, 64); }
a img { border: none; }
.note { font-size: 0.8em; }
h3 .note { display: block; }

/* Forms */
form { margin: 0; }
table { table-layout: fixed; width: 100%; }
table, input, textarea, button, select, option { font-size: 100%; }
td { vertical-align: top; }
.label { width: 8em; }
.label label { display: block; padding-top: 4px; }
.default { font-weight: bold; }
.input input, .input select, .input textarea { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box; }
.essential { display: none; }

/* Content border */
.n, .s { height: 20px; font-size: 1px; }
.nw, .w, .sw { background-repeat: repeat-y; padding-left: 20px; }
.ne, .e, .se { background-repeat: repeat-y; background-position: top right; padding-right: 20px; }

.nw { background-image: url(/img/border/nw.gif); }
.n { background-image: url(/img/border/n.gif); }
.ne { background-image: url(/img/border/ne.gif); }
.w { background-image: url(/img/border/w.gif); }
.c { background-image: url(/img/surface.gif); }
.e { background-image: url(/img/border/e.gif); }
.sw { background-image: url(/img/border/sw.gif); }
.s { background-image: url(/img/border/s.gif); }
.se { background-image: url(/img/border/se.gif); }

#errors .nw { background-image: url(/img/border-error/nw.gif); }
#errors .n { background-image: url(/img/border-error/n.gif); }
#errors .ne { background-image: url(/img/border-error/ne.gif); }
#errors .w { background-image: url(/img/border-error/w.gif); }
#errors .c { background-image: url(/img/surface.gif); }
#errors .e { background-image: url(/img/border-error/e.gif); }
#errors .sw { background-image: url(/img/border-error/sw.gif); }
#errors .s { background-image: url(/img/border-error/s.gif); }
#errors .se { background-image: url(/img/border-error/se.gif); }

/* Tabs */
.pager-top .w { background-image: url(/img/border-tabs/nw.gif); }
.pager-top .e { background-image: url(/img/border-tabs/ne.gif); }
.pager-top .c { background-image: url(/img/border-tabs/n.gif); }
.pager-bottom .w, .adder .w { background-image: url(/img/border-tabs/sw.gif); }
.pager-bottom .e, .adder .e { background-image: url(/img/border-tabs/se.gif); }
.pager-bottom .c, .adder .c { background-image: url(/img/border-tabs/s.gif); }

.pager-top, .pager-bottom, .adder { margin: 0 auto; width: 16em; text-align: center; position: relative; z-index: 1; }
.pager-top .c, .pager-bottom .c, .adder .c { height: 24px; }
.pager-top a, .pager-bottom a, .adder a { position: relative; text-decoration: none; padding: 0 4px; }
.pager-top a.selected, .pager-bottom a.selected { background: rgb(188, 230, 239); }
.pager-top { top: 28px; }
.pager-top a {  top: 4px; }
.pager-bottom, .adder { top: -8px; }
.pager-bottom a, .adder a { top: -4px; }

/* Textmarkup */
.textmarkup blockquote { margin: 0; border-left: solid rgb(0, 0, 160) 4px; padding: 0 24px; }
.textmarkup .cite { font-size: 88%; color: white; font-style: italic; text-align: right; background: rgb(0, 0, 160); margin-left: -24px; }
.textmarkup blockquote p { margin: 0.5em; }
.textmarkup .spoiler { margin: 0; border-left: solid rgb(224, 0, 0) 4px; padding: 0 24px; color: rgb(243, 243, 243); }
.textmarkup .spoiler:hover { color: rgb(64, 64, 64); }
.textmarkup pre { border-left: solid rgb(128, 128, 128) 4px; padding-left: 24px; padding-right: 24px; }
.textmarkup img, .bbcode img { max-width: 100%; }

.markuppanel { position: relative; z-index: 2; }
.markuprow { background: url(/img/markupbar/back.gif); width: 454px; height: 22px; }
.markuprow-resize { position: absolute; top: 0; right: 1px; }
.emoterow { position: absolute; z-index: 5; top: 22px; left: 139px; width: 192px; background: rgb(243, 243, 243) url(/img/markupbar/emote-n.gif) no-repeat; }
.emoterow .wrap { background: url(/img/markupbar/emote-s.gif) bottom left no-repeat; padding: 6px; text-align: center; }
.markupbutton, .markupsep { float: left; height: 22px; margin-left: 6px; }
.markupsep { width: 3px; background-image: url(/img/markupbar/sep.gif); }
.markupbutton { background-position: 0 -22px; }
.markuprow .sprite-hovered { background-position: 0 -44px; }
.markuprow .sprite-pressed, .markuprow .sprite-selected { background-position: 0 -66px; }
.markuprow .sprite-disabled { background-position: 0 0; }
.markuppreview { border: inset rgb(243, 243, 243) 1px; padding: 2px; }

.markup-info { background-image: url(/img/markupbar/info.gif); width: 14px; }
.markup-italic { background-image: url(/img/markupbar/italic.gif); width: 13px; }
.markup-bold { background-image: url(/img/markupbar/bold.gif); width: 16px; }
.markup-link { background-image: url(/img/markupbar/link.gif); width: 72px; }
.markup-img { background-image: url(/img/markupbar/img.gif); width: 68px; }
.markup-emote { background-image: url(/img/markupbar/emote.gif); width: 13px; }
.markup-quote { background-image: url(/img/markupbar/quote.gif); width: 41px; }
.markup-spoiler { background-image: url(/img/markupbar/spoiler.gif); width: 42px; }
.markup-code { background-image: url(/img/markupbar/code.gif); width: 32px; }
.markup-list { background-image: url(/img/markupbar/list.gif); width: 23px; }
.markup-head { background-image: url(/img/markupbar/head.gif); width: 22px; }
.markup-preview { background-image: url(/img/markupbar/preview.gif); width: 40px; }