@font-face {
    font-family: font1;
    src: url('../fonts/CharisSILCompact-R.ttf');
    font-weight: normal; font-style: normal; 
}
@font-face {
    font-family: font1;
    src: url('../fonts/CharisSILCompact-B.ttf');
    font-weight: bold; font-style: normal; 
}

body {
    font-family: font1;
    direction: ltr;
    font-size: 17px;
    font-weight: normal;
    font-style: normal;
    color: #000000;
    margin-top: 16px;
    margin-bottom: 10px;
}

body.single {
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 60px;
}

body.multiple {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 60px;
}

body.about {
    margin-left: 4%;
    margin-right: 4%;
    color: #000000;
    background-color: #F0F0F0;
}

body.scrpopup {
    margin-left: 4%;
    margin-right: 4%;
    color: #000000;
    background-color: #E0E0E0;
    margin-top: 8px;
}

body.story {
    margin-left: 5%;
    margin-right: 5%;
    color: #000000;
    background-color: #F0F0F0;
    margin-top: 2px;
    margin-bottom: 60px;
}

body.glossary {
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 4px;
    background-color: #E0E0E0;
}

a:link {
    color: #6C0000;
    font-style: inherit;
    text-decoration: underline;
}

a.verse-link {
    text-decoration: none;
}

a.audio-link {
    text-decoration: underline;
}

a.web-link {
    text-decoration: underline;
}

highlighting {
    background-color: #FFFF99;
}

div.c {
    text-align: left;
}

span.c {
    color: #6C0000;
    font-size: 140%;
    font-weight: bold;
}

div.cl {
    text-align: left;
}

span.cl {
    color: #6C0000;
    font-size: 110%;
    font-weight: bold;
}

span.v {
    color: #D32F2F;
    font-size: 80%;
}

span.vsp {
    font-size: 50%;
}

span.va {
    color: #D32F2F;
    font-size: 80%;
    font-style: italic;
}

div.s {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 2px;
    color: #6C0000;
    font-weight: bold;
    font-size: 110%;
}

div.s2 {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 2px;
    color: #6C0000;
    font-weight: bold;
    font-size: 100%;
}

div.ms {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 8px;
    color: #6C0000;
    font-weight: bold;
    font-size: 120%;
}

div.ms2 {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 8px;
    color: #6C0000;
    font-weight: bold;
    font-size: 110%;
}

div.r {
    text-align: center;
    padding-bottom: 2px;
    font-style: italic;
    font-size: 90%;
}

div.r a {
    color: #000000;
}

div.sr {
    text-align: center;
    padding-bottom: 2px;
    font-style: italic;
    font-size: 90%;
}

div.mr {
    text-align: center;
    font-style: italic;
}

div.d {
    text-align: center;
    font-style: italic;
}

div.sp {
    padding-top: 6px;
    font-style: italic;
}

div.mt {
    text-align: center;
    color: #6C0000;
    font-weight: bold;
    font-size: 150%;
}

div.mt2 {
    text-align: center;
    color: #6C0000;
    font-weight: bold;
    font-size: 110%;
}

div.mt3 {
    text-align: center;
    color: #6C0000;
    font-weight: bold;
    font-size: 100%;
}

div.mt4 {
    text-align: center;
    color: #6C0000;
    font-weight: bold;
    font-size: 90%;
}

div.mte {
    text-align: center;
    color: #6C0000;
    font-weight: bold;
    font-size: 150%;
}

div.mte2 {
    text-align: center;
    color: #6C0000;
    font-weight: bold;
    font-size: 110%;
}

div.mte3 {
    text-align: center;
    color: #6C0000;
    font-weight: bold;
    font-size: 100%;
}

div.p {
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 12px;
    text-indent: 3%;
}

div.m {
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 12px;
    text-indent: 0;
}

div.pc {
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 12px;
    text-indent: 0;
    text-align: center;
}

div.pmo {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 12px;
    text-indent: 0;
}

div.pm {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 12px;
    text-indent: 0;
}

div.pmc {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 12px;
    text-indent: 0;
}

div.pmr {
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 6px;
    text-indent: 0;
    text-align: right;
}

div.pr {
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 12px;
    text-indent: 0;
    text-align: right;
}

div.pi {
    padding-left: 8%;
    padding-right: 0%;
    padding-top: 12px;
    text-indent: 3%;
}

div.mi {
    padding-left: 8%;
    padding-right: 0%;
    padding-top: 12px;
    text-indent: 0;
}

div.lit {
    text-align: right;
}

div.q {
    padding-left: 20%;
    padding-right: 2%;
    text-indent: -15%;
}

div.q-v {
    padding-left: 20%;
    padding-right: 2%;
    text-indent: -18%;
}

div.q-vv {
    padding-left: 20%;
    padding-right: 2%;
    text-indent: -19%;
}

div.q2 {
    padding-left: 20%;
    padding-right: 2%;
    text-indent: -8%;
}

div.q2-v {
    padding-left: 20%;
    padding-right: 2%;
    text-indent: -11%;
}

div.q2-vv {
    padding-left: 20%;
    padding-right: 2%;
    text-indent: -13%;
}

div.q3 {
    padding-left: 20%;
    padding-right: 2%;
    text-indent: -5%;
}

div.q3-v {
    padding-left: 20%;
    padding-right: 2%;
    text-indent: -8%;
}

div.q3-vv {
    padding-left: 20%;
    padding-right: 2%;
    text-indent: -10%;
}

div.q4 {
    padding-left: 20%;
    padding-right: 2%;
    text-indent: -2%;
}

div.q4-v {
    padding-left: 20%;
    padding-right: 2%;
    text-indent: -5%;
}

div.q4-vv {
    padding-left: 20%;
    padding-right: 2%;
    text-indent: -7%;
}

div.qc {
    text-align: center;
}

div.qr {
    text-align: right;
}

div.qm {
    padding-left: 20%;
    padding-right: 2%;
    text-indent: -8%;
}

div.qm2 {
    padding-left: 20%;
    padding-right: 2%;
    text-indent: -5%;
}

div.qa {
    text-align: center;
    font-style: italic;
}

span.qs {
    font-style: italic;
}

div.b {
    padding-top: 0px;
    line-height: 60%;
}

div.top-spacing {
    padding-top: 12px;
}

div.li {
    padding-left: 20%;
    text-indent: -15%;
}

div.li-v {
    padding-left: 20%;
    text-indent: -18%;
}

div.li-vv {
    padding-left: 20%;
    text-indent: -19%;
}

div.li2 {
    padding-left: 20%;
    text-indent: -8%;
}

div.li2-v {
    padding-left: 20%;
    text-indent: -11%;
}

div.li2-vv {
    padding-left: 20%;
    text-indent: -13%;
}

div.li3 {
    padding-left: 12%;
}

span.add {
    font-style: italic;
}

span.bk {
    font-style: italic;
}

span.lit {
    font-weight: bold;
}

span.nd {
    font-variant: small-caps;
}

span.pn {
    font-style: italic;
}

span.qt {
    font-style: italic;
}

span.sig {
    font-style: italic;
}

span.tl {
    font-style: italic;
}

span.k {
    font-weight: bold;
}

span.wj {
    color: red;
}

span.vp {
    color: #D32F2F;
    font-size: 80%;
}

span.em {
    font-style: italic;
}

span.bd {
    font-weight: bold;
}

span.it {
    font-style: italic;
}

span.bdit {
    font-weight: bold;
    font-style: italic;
}

span.ul {
    text-decoration: underline;
}

span.sc {
    font-variant: small-caps;
}

span.no {
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
}

span.fr {
    font-weight: bold;
}

span.fk {
    font-weight: bold;
}

span.fq {
    font-style: italic;
}

span.fqa {
    font-style: italic;
}

span.fl {
    font-style: italic;
}

span.fv {
    color: #D32F2F;
    font-size: 80%;
    font-style: normal;
}

body.footnote {
    margin-left: 4%;
    margin-right: 4%;
    background-color: #E0E0E0;
}

span.glossary {
}

span.footnote {
    color: navy;
}

span.xo {
    font-weight: bold;
}

span.xk {
    font-weight: bold;
}

body.crossref {
    margin-left: 4%;
    margin-right: 4%;
    background-color: #E0E0E0;
}

span.image {
}

div.image-block {
    text-align: center;
    padding-top: 10px;
}

div.caption {
    text-align: center;
    padding-top: 6px;
}

span.caption {
    font-style: italic;
    font-size: 90%;
}

div.is {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 2px;
    color: #6C0000;
    font-weight: bold;
    font-size: 110%;
}

div.is2 {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 2px;
    color: #6C0000;
    font-weight: bold;
    font-size: 110%;
}

div.imt {
    text-align: center;
    color: #6C0000;
    font-weight: bold;
    font-size: 130%;
}

div.imt2 {
    text-align: center;
    color: #6C0000;
    font-weight: bold;
    font-size: 130%;
}

div.imte {
    text-align: center;
    color: #6C0000;
    font-weight: bold;
    font-size: 130%;
}

div.imte2 {
    text-align: center;
    color: #6C0000;
    font-weight: bold;
    font-size: 130%;
}

div.iot {
    text-align: left;
    color: #6C0000;
    font-weight: bold;
}

span.ior {
    font-style: italic;
}

div.io {
    padding-left: 4%;
}

div.io2 {
    padding-left: 6%;
}

div.io3 {
    padding-left: 8%;
}

div.ip {
    padding-top: 12px;
    text-indent: 3%;
}

div.ipr {
    padding-top: 12px;
    text-align: right;
}

div.im {
    padding-top: 12px;
    text-indent: 0;
}

div.ili {
    padding-top: 8px;
    padding-left: 5%;
}

div.iq {
    padding-left: 5%;
    padding-top: 12px;
    padding-right: 2%;
}

table {
    font-size: 90%;
}

td.th1 {
    text-align: left;
    font-style: italic;
}

td.th2 {
    text-align: left;
    font-style: italic;
}

td.th3 {
    text-align: left;
    font-style: italic;
}

td.th4 {
    text-align: left;
    font-style: italic;
}

td.th5 {
    text-align: left;
    font-style: italic;
}

td.th6 {
    text-align: left;
    font-style: italic;
}

td.thr1 {
    text-align: right;
    font-style: italic;
}

td.thr2 {
    text-align: right;
    font-style: italic;
}

td.thr3 {
    text-align: right;
    font-style: italic;
}

td.thr4 {
    text-align: right;
    font-style: italic;
}

td.thr5 {
    text-align: right;
    font-style: italic;
}

td.thr6 {
    text-align: right;
    font-style: italic;
}

td.tc1 {
    text-align: left;
}

td.tc2 {
    text-align: left;
}

td.tc3 {
    text-align: left;
}

td.tc4 {
    text-align: left;
}

td.tc5 {
    text-align: left;
}

td.tc6 {
    text-align: left;
}

td.tcr1 {
    text-align: right;
}

td.tcr2 {
    text-align: right;
}

td.tcr3 {
    text-align: right;
}

td.tcr4 {
    text-align: right;
}

td.tcr5 {
    text-align: right;
}

td.tcr6 {
    text-align: right;
}

div.footer {
    margin-top: 1.5em;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
    padding-right: 12px;
    background-color: #E0E0E0;
}

span.footer {
    font-size: 80%;
}

span.ref {
    color: #6C0000;
    font-weight: bold;
    font-size: 90%;
}

span.reflink {
    white-space: nowrap;
}

body.contents {
    margin-left: 1%;
    margin-right: 3%;
    background-color: #F4F4F4;
}

div.contents-item-block {
    clear: both;
    overflow: hidden;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 6px;
    padding-right: 6px;
    box-shadow: 1px 1px 1px #E0E0E0;
}

a.contents-link {
    text-decoration: none;
    display: block;
}

a.contents-link-ref {
    background-color: #FFFFFF;
}

a.contents-link-screen {
    background-color: #FDFDFD;
}

a.contents-link :hover {
    text-decoration: none;
    background-color: #EEEEEE;
}

div.contents-image-block {
    box-sizing: border-box;
    margin-right: 12px;
    width: 50%;
    height: auto;
    float: left;
    overflow: hidden;
}

img.contents-image {
    width: 100%;
    height: auto;
}

div.contents-title {
    color: #6C0000;
    font-weight: bold;
}

div.contents-subtitle {
    color: #000000;
    font-size: 90%;
    font-weight: normal;
}

div.contents-ref {
    color: #000000;
    font-size: 80%;
    font-style: normal;
}

div.block1 {
    background-color: #FBFDF1;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 4%;
    padding-right: 4%;
}

div.block2 {
    background-color: #F8FCE8;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 4%;
    padding-right: 4%;
}

div.lang2 {
    direction: ltr;
    padding-top: 12px;
}

div.lang2 + div.lang2 {
    padding-top: 0;
}

span.lang2 {
    font-family: font2;
    font-size: 14px;
    line-height: 1em;
}

img { max-width: 100%; }
.aud { display: inline; }

#toolbar-top {
    background: #FAFAFA;
    border-bottom: 1px solid #DDD;
    -moz-box-shadow: 0 5px 5px -5px #CCC;
    -webkit-box-shadow: 0 5px 5px -5px #CCC;
    box-shadow: 0 5px 5px -5px #CCC;
    top: 0px;
    width: 100%;
    position: fixed;
    z-index: 2000;
    text-align: center;
}
#content {
    max-width: 800px;
    height: auto;
    padding-left: 5%;
    padding-right: 5%;
    margin: 80px auto 150px;
}
#toolbar-bottom {
    background: #FAFAFA;
    border-top: 1px solid #DDD;
    -moz-box-shadow: 0 -5px 5px -5px #CCC;
    -webkit-box-shadow: 0 -5px 5px -5px #CCC;
    box-shadow: 0 -5px 5px -5px #CCC;
    bottom: 0px;
    width: 100%;
    position: fixed;
    text-align: center;
}
.audio-player {
    padding-top: 20px;
    padding-bottom: 12px;
}
.navigation-top {
    text-align: center;
    padding-top: 16px;
    padding-bottom: 10px;
}
.button {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #CCCCCC;
    background: #F0F0F0;
    padding: 2px;
    margin-left: 2px;
    margin-right: 2px;
    text-decoration: none;
    color: #808080;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    cursor: pointer;
}
.button:hover {
    background: #DDDDDD;
}
.button a:link, .button a:visited {
    text-decoration: none;
    color: #808080;
	 font-weight: bold;
}
.selectable {
    cursor: pointer;
}
.aud.selected:hover {
    background-color: #FFFF20;
    cursor: pointer;
}
.aud.selected {
    background-color: #FFFF99;
}
.aud:hover {
    background-color: #EEEEEE;
    cursor: pointer;
}
.tooltipster-theme {
    border-radius: 5px;
    background: #fff;
    box-shadow: 0px 0px 14px rgba(0,0,0,0.3);
    color: #2c2c2c;
}
.tooltipster-theme .tooltipster-content {
    font-family: font1, 'Arial', sans-serif;
    font-size: 15px;
    line-height: 16px;
    padding: 8px 10px;
}
#book-selector {
    text-align: center;
    font-weight: bold;
    margin-left: 10px;
    padding-left: 10px; padding-right: 10px;
}
#book-selector a {
    text-decoration:none;
    color: inherit;
}
#book-selector:hover {
    background-color: #EEEEEE;
    cursor: pointer;
}
#chapter-selector {
    text-align: center;
    font-weight: bold;
    margin-right: 10px;
    padding-left: 10px; padding-right: 10px;
}
#chapter-selector a {
    text-decoration:none;
    color: inherit;
}
#chapter-selector:hover {
    background-color: #EEEEEE;
    cursor: pointer;
}
#book-menu {
    position: absolute;
    visibility: hidden;
    overflow: auto;
    border: 1px solid #D0D0D0;
    background-color: #F9F9F9;
    padding: 5px;
   -webkit-box-shadow: 2px 2px 5px 0px #e0e0e0;
   -moz-box-shadow: 2px 2px 5px 0px #e0e0e0;
   box-shadow: 2px 2px 5px 0px #e0e0e0;
   z-index: 999;
}
#chapter-menu {
    position: absolute;
    visibility: hidden;
    overflow: auto;
    border: 1px solid #D0D0D0;
    background-color: #F9F9F9;
    padding: 5px;
   -webkit-box-shadow: 2px 2px 5px 0px #e0e0e0;
   -moz-box-shadow: 2px 2px 5px 0px #e0e0e0;
   box-shadow: 2px 2px 5px 0px #e0e0e0;
   z-index: 999;
}
.book-menu-item {
    color: black;
    padding-left: 6px;
    padding-right: 6px;
}
.book-menu-item a {
    text-decoration:none;
    color: inherit;
    width: 100%;
    display: block;
}
.book-menu-item:hover {
    background-color: #EEEEEE;
    cursor: pointer;
}
.chapter-menu-item {
    text-align: center;
    display: inline;
    color: black;
    width: 100%;
    display: block;
    margin-left: 0px;
    margin-right: 16px;
}
.chapter-menu-item a {
    text-decoration:none;
    color: inherit;
    width: 100%;
    display: block;
}
.chapter-menu-item:hover {
    background-color: #EEEEEE;
    cursor: pointer;
}
.intro-menu-item {
    color: black;
    text-align: center;
    padding-left: 6px;
    padding-right: 6px;
}
.intro-menu-item a {
    text-decoration:none;
    color: inherit;
    width: 100%;
    display: block;
}
.intro-menu-item:hover {
    background-color: #EEEEEE;
    cursor: pointer;
}
.chapter-table {
    width: 100%;
}