style.css

@charset "utf-8";
/* Tatujin-Publishing   */
/* Style sheet for epub */
/* Ver.0.8b1            */

/*
Scale & Rhythm
line-height 1.6
16px = 1em
x:p:h1:h2:h3 = 12px:14px:16px:24px:30px
*/
* {
}
body {
    margin: 0;
    padding: 0;
    font-size: 1em;
    line-height:1.6;
    font-family: serif;
    /*
    word-break: normal;
    -webkit-line-break: after-white-space;
    */
    -webkit-writing-mode: vertical-rl;
    -epub-writing-mode:   vertical-rl;
    writing-mode: tb-rl;
}
p, ul, ol, dl, pre, table {
    font-family: serif;
    font-size: 0.875em;
}
/* Heading */
h1 {
    margin: 0 0 3em;
    padding: 0.5em 0 0;
    border-top: 14px #326450 solid;
    text-align: left;
    font-size: 1.875em;
    font-weight: bold;
}
h2 {
    margin: 3em 0 0.5em;
    padding: 0.5em 0 0;
    border-top: 2px #326450 solid;
    text-align: left;
    font-size: 1.5em;
    font-weight: bold;
}
h3 {
    margin: 3em 0 0.5em;
    padding: 0;
    text-align: left;
    font-size: 1em;
    font-weight: bold;
}
h4, h5, h6 {
    margin:0.7em 0;
    padding: 0;
    text-align: left;
    line-height: 1.6;
    font-weight: bold;
}
/* Paragraph */
p {
    margin:0.7em 0;
    padding: 0;
    text-align: left;
    text-indent: 1em;
    line-height: 1.6;
}
div.lead p {
    color: #666;
    line-height: 1.6;
    font-size: 0.75em;
}
/* List */
ul, ol {
    margin: 2em 0 2em 2em;
    padding: 0;
    list-style-position: outside;
}
ul > li,
ol > li {
    margin: 0 0 0.7em 0;
    padding: 0;
    line-height: 1.6;
}
dl {
    margin: 2em 0;
    padding: 0;
}
dt {
    margin: 0;
    padding: 0;
    font-weight: bold;
}
dd {
    margin: 0 0 1em 2em;
    padding: 0;
    line-height: 1.6;
}
/* Table
p.tablecaptionではなく
table caption {}を使う方が良いかも？
*/
table {
    margin: 0 auto 2em auto;
    border-collapse: collapse;
}
table tr th {
    background-color: #eee;
    border:1px #aaa solid;
    font-size: 0.75em;
    font-weight: normal;
}
table tr td {
    padding: 0.3em;
    border:1px #aaa solid;
    font-size: 0.75em;
}
p.tablecaption, table caption {
    margin: 0;
    color: #666;
    font-size: 0.75em;
    font-weight: bold;
    text-indent: 0;
}
/* Quote */
blockquote {
    margin: 2em 0 2em 2em;
    padding: 0.3em 1em;
    border: 1px #aaa solid;
}
/* Column Block */
div.column {
    margin: 2em 0 2em 2em;
    padding: 0.3em 1em;
    background-color: #eee;
    -webkit-border-radius: 0.7em;    
}
div.column *{
    margin:0.7em 0;    
}
div.column ul,
div.column ol {
    list-style-position: inside;
}
/* Code Block */
/*
※シンプルにできるかも
div.code {}
div.code pre.list,
div.code pre.cmd {}
div.code p.caption {}
*/
div.code, div.caption-code, div.source-code, div.emlist-code, div.emlistnum-code {
    margin: 1em 0 2em 2em;
    padding: 0;
}
pre.emlist, pre.source, pre.list {
    margin: 0;
    padding: 5px;
    border: 1px #aaa solid;
}
div p.caption {
    margin: 0;
    color: #666;
    font-size: 0.75em;
    font-weight: bold;
}
div.cmd-code pre.cmd {
    margin: 0;
    padding: 5px;
    color: #ccc;
    font-weight: bold;
    background-color: #444;
    -webkit-border-radius: 0.5em;
}
pre.cmd, pre.emlist, pre.list, pre.source {
    white-space: pre-wrap;
}

/* Image Block */  
/* div.image p.caption {}
※captionをそろえた方が良いかも？*/
div.image {
    margin: 2em auto;
    padding: 0;
}
div.image img {
    margin: 0 auto;
    padding: 0;
    display: block;
}
div.image p.caption {
    margin: 0 auto;
    text-align: center;
    color: #666;
    font-size: 0.75em;
    font-weight: bold;
    text-indent: 0;
}
/* Footnote Block */
/* p.footnoteはいらないかも？ */
div.footnote {
}
div.footnote p.footnote {
	color: #666;
    line-height: 1.6;
    font-size: 0.75em;
    text-indent: 0;
}
/* Colophon */
div.colophon {
    margin: 3em auto;
}
div.colophon p {
    text-indent: 0;
}
div.colophon p.title {
    font-size: 1.5em;
}
div.colophon table {
    margin: 1em 0 2em;
    border: none;
}
div.colophon table tr th {
    background-color: #fff;
    font-size: 1.2em;
    font-weight: normal;
    border: none;
}
div.colophon table tr td {
    font-size: 1.2em;
    font-weight: normal;
    border: none;
}

/* Inline */
a[href],
a:link,
a:visited {
    border-bottom: 1px dotted #531084;
    text-decoration: none;
}
b {
    font-weight: bold;
}
strong{
    font-weight: bold;
}
em {
    font-style: italic;
}
span.balloon {
    font-size: 0.9em;
}
span.balloon:before {
    content: "←";
}

/**
 * from Rouge
 */
.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight .cm {
  color: #999988;
  font-style: italic;
}
.highlight .cp {
  color: #999999;
  font-weight: bold;
}
.highlight .c1 {
  color: #999988;
  font-style: italic;
}
.highlight .cs {
  color: #999999;
  font-weight: bold;
  font-style: italic;
}
.highlight .c, .highlight .cd {
  color: #999988;
  font-style: italic;
}
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
}
.highlight .gd {
  color: #000000;
  background-color: #ffdddd;
}
.highlight .ge {
  color: #000000;
  font-style: italic;
}
.highlight .gr {
  color: #aa0000;
}
.highlight .gh {
  color: #999999;
}
.highlight .gi {
  color: #000000;
  background-color: #ddffdd;
}
.highlight .go {
  color: #888888;
}
.highlight .gp {
  color: #555555;
}
.highlight .gs {
  font-weight: bold;
}
.highlight .gu {
  color: #aaaaaa;
}
.highlight .gt {
  color: #aa0000;
}
.highlight .kc {
  color: #000000;
  font-weight: bold;
}
.highlight .kd {
  color: #000000;
  font-weight: bold;
}
.highlight .kn {
  color: #000000;
  font-weight: bold;
}
.highlight .kp {
  color: #000000;
  font-weight: bold;
}
.highlight .kr {
  color: #000000;
  font-weight: bold;
}
.highlight .kt {
  color: #445588;
  font-weight: bold;
}
.highlight .k, .highlight .kv {
  color: #000000;
  font-weight: bold;
}
.highlight .mf {
  color: #009999;
}
.highlight .mh {
  color: #009999;
}
.highlight .il {
  color: #009999;
}
.highlight .mi {
  color: #009999;
}
.highlight .mo {
  color: #009999;
}
.highlight .m, .highlight .mb, .highlight .mx {
  color: #009999;
}
.highlight .sb {
  color: #d14;
}
.highlight .sc {
  color: #d14;
}
.highlight .sd {
  color: #d14;
}
.highlight .s2 {
  color: #d14;
}
.highlight .se {
  color: #d14;
}
.highlight .sh {
  color: #d14;
}
.highlight .si {
  color: #d14;
}
.highlight .sx {
  color: #d14;
}
.highlight .sr {
  color: #009926;
}
.highlight .s1 {
  color: #d14;
}
.highlight .ss {
  color: #990073;
}
.highlight .s {
  color: #d14;
}
.highlight .na {
  color: #008080;
}
.highlight .bp {
  color: #999999;
}
.highlight .nb {
  color: #0086B3;
}
.highlight .nc {
  color: #445588;
  font-weight: bold;
}
.highlight .no {
  color: #008080;
}
.highlight .nd {
  color: #3c5d5d;
  font-weight: bold;
}
.highlight .ni {
  color: #800080;
}
.highlight .ne {
  color: #990000;
  font-weight: bold;
}
.highlight .nf {
  color: #990000;
  font-weight: bold;
}
.highlight .nl {
  color: #990000;
  font-weight: bold;
}
.highlight .nn {
  color: #555555;
}
.highlight .nt {
  color: #000080;
}
.highlight .vc {
  color: #008080;
}
.highlight .vg {
  color: #008080;
}
.highlight .vi {
  color: #008080;
}
.highlight .nv {
  color: #008080;
}
.highlight .ow {
  color: #000000;
  font-weight: bold;
}
.highlight .o {
  color: #000000;
  font-weight: bold;
}
.highlight .w {
  color: #bbbbbb;
}
.highlight {
  background-color: #f8f8f8;
}
.rouge-table { border-spacing: 0 }
.rouge-gutter { text-align: right }

/**
 * from EBPAJ EPUB 3 File Creation Guide sample style
 *
 * cf. http://ebpaj.jp/counsel/guide
 */

/* image width definition(pacentage)  */
.width-010per { width:  10%; }
.width-020per { width:  20%; }
.width-025per { width:  25%; }
.width-030per { width:  30%; }
.width-033per { width:  33%; }
.width-040per { width:  40%; }
.width-050per { width:  50%; }
.width-060per { width:  60%; }
.width-067per { width:  67%; }
.width-070per { width:  70%; }
.width-075per { width:  75%; }
.width-080per { width:  80%; }
.width-090per { width:  90%; }
.width-100per { width: 100%; }

span.tcy {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

div.yoko {
  -webkit-writing-mode: horizontal-tb;
  -epub-writing-mode:   horizontal-tb;
  writing-mode: lr-tb;
  width: 30em;
  margin: 0;
  padding: 5px;
  border: 1px #aaa solid;
}

div.yoko p.center {
  text-align: center;
}

div.yoko p.migi {
  text-align: right;
}