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

body {
    font-family: font1;
    direction: LTR;
    font-size: 20px;
    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.verse-by-verse {
    margin-left: 5%;
    margin-right: 5%;
    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: #3E2723;
    font-style: inherit;
    text-decoration: underline;
}

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

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

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

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

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

highlighting {
    background-color: #FFFF99;
}

div.c {
    text-align: left;
    color: #3E2723;
    font-size: 140%;
    font-weight: bold;
}

div.c-drop {
    float: left;
    position: relative;
    padding-right: 0.3em;
    text-indent: 0;
    color: #3E2723;
    font-size: 150%;
    font-weight: bold;
    font-style: normal;
}

div.cl {
    text-align: center;
    color: #3E2723;
    font-size: 130%;
    font-weight: bold;
    margin-top: 0.5em;
}

span.v {
    color: #5D4037;
    font-size: 70%;
    position: relative;
    bottom: 0.3em;
    line-height: normal;
}

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

span.va {
    color: #5D4037;
    font-style: italic;
    font-size: 70%;
    position: relative;
    bottom: 0.3em;
    line-height: normal;
}

span.ayah {
    font-size: 100%;
    bottom: 0em;
}

div.s {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 2px;
    color: #3E2723;
    font-weight: bold;
    font-size: 110%;
    page-break-after: avoid;
}

div.s2 {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 2px;
    color: #3E2723;
    font-weight: bold;
    font-size: 100%;
    page-break-after: avoid;
}

div.ms {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 8px;
    color: #3E2723;
    font-weight: bold;
    font-size: 120%;
    page-break-after: avoid;
}

div.ms2 {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 8px;
    color: #3E2723;
    font-weight: bold;
    font-size: 110%;
    page-break-after: avoid;
}

div.r {
    text-align: center;
    padding-top: 14px;
    padding-bottom: 2px;
    font-style: italic;
    font-size: 90%;
    page-break-after: avoid;
}

div.r a {
    color: #000000;
}

div.s + div.r {
    padding-top: 0px;
}

div.s2 + div.r {
    padding-top: 0px;
}

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

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

span.rq {
    font-style: italic;
}

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

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

div.mt {
    text-align: center;
    color: #3E2723;
    font-weight: bold;
    font-size: 150%;
    page-break-after: avoid;
}

div.mt2 {
    text-align: center;
    color: #3E2723;
    font-weight: bold;
    font-size: 110%;
    page-break-after: avoid;
}

div.mt3 {
    text-align: center;
    color: #3E2723;
    font-weight: bold;
    font-size: 100%;
    page-break-after: avoid;
}

div.mt4 {
    text-align: center;
    color: #3E2723;
    font-weight: bold;
    font-size: 90%;
    page-break-after: avoid;
}

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

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

div.mte3 {
    text-align: center;
    color: #3E2723;
    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.po {
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 12px;
    text-indent: 0;
}

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

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.pi2 {
    padding-left: 10%;
    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 {
    padding-top: 16px;
    padding-bottom: 3px;
    text-align: center;
    font-style: italic;
}

div.qd {
    font-style: italic;
}

span.qs {
    font-style: italic;
}

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

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

div.sd {
    padding-top: 1em;
}

div.sd2 {
    padding-top: 2em;
}

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

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

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%;
}

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

span.add {
    font-style: italic;
}

span.bk {
    font-style: italic;
}

span.dc {
    font-style: italic;
}

span.lit {
    font-weight: bold;
}

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

span.ord {
    font-size: 70%;
    position: relative;
    top: -0.4em;
}

span.pn {
    font-style: italic;
}

span.png {
    text-decoration: underline;
}

span.qt {
    font-style: italic;
}

span.sig {
    font-style: italic;
}

span.sls {
    font-style: italic;
}

span.tl {
    font-style: italic;
}

span.k {
    font-weight: bold;
}

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

span.wj {
    color: red;
}

span.wg {
}

span.wh {
}

span.wa {
}

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: #5D4037;
    font-size: 70%;
    font-style: normal;
    position: relative;
    top: -0.4em;
}

span.fw {
    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;
}

span.xta {
    font-style: normal;
}

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

span.image {
}

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

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

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

div.video-block {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 20px;
    background-color: #E0E0E0;
}

span.video-title {
    font-size: 90%;
}

div.video-title {
    text-align: center;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
}

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

img.about-image {
    width: 50%;
}

div.is {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 2px;
    color: #3E2723;
    font-weight: bold;
    font-size: 110%;
    page-break-after: avoid;
}

div.is2 {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 2px;
    color: #3E2723;
    font-weight: bold;
    font-size: 110%;
    page-break-after: avoid;
}

div.imt {
    text-align: center;
    padding-top: 30px;
    color: #3E2723;
    font-weight: bold;
    font-size: 120%;
    page-break-after: avoid;
}

div.imt2 {
    text-align: center;
    padding-top: 20px;
    color: #3E2723;
    font-weight: bold;
    font-size: 110%;
    page-break-after: avoid;
}

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

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

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

span.ior {
    font-style: italic;
}

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

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

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

div.iex {
    padding-top: 12px;
    font-style: italic;
}

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

div.ipi {
    padding-left: 8%;
    padding-right: 0%;
    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: 20%;
    text-indent: -15%;
}

div.ili2 {
    padding-top: 8px;
    padding-left: 20%;
    text-indent: -8%;
}

div.ili3 {
    padding-top: 8px;
    padding-left: 12%;
}

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

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

.study-bible-block {
    margin-top: 1em;
    margin-bottom: 1em;
}

.study-bible-heading {
    color: white;
    background-color: #4E342E;
    font-family: inherit;
    font-size: 90%;
}

.study-bible-heading:hover {
    color: white;
    background-color: #5D4037;
}

.study-bible-content {
    padding: 1em 1em 1em 1em;
    background-color: #E3DBD8;
    font-size: 90%;
}

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.hlp1 {
    background-color: #FFFFCC;
    color: #000000;
}

div.hlp2 {
    background-color: #D6FFEA;
    color: #000000;
}

div.hlp3 {
    background-color: #B8FBF9;
    color: #000000;
}

div.hlp4 {
    background-color: #FFE6BC;
    color: #000000;
}

div.hlp5 {
    background-color: #FFD6FF;
    color: #000000;
}

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

div.footer-line {
}

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

div.footer-pane2 {
    background-color: #D0D0D0;
}

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

span.reflink {
    white-space: nowrap;
}

body.contents {
    font-size: 20px;
    margin-left: 1%;
    margin-right: 3%;
    background-color: #F4F4F4;
    font-family: font1;
}

div.contents-item-block {
    position: relative;
    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;
}

div.contents-heading-block {
    position: relative;
    clear: both;
    overflow: hidden;
    margin-top: 6px;
    margin-bottom: 3px;
    padding-top: 6px;
    padding-bottom: 3px;
    padding-left: 6px;
    padding-right: 6px;
}

div.contents-text-block {
    overflow: hidden;
}

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

div.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: #3E2723;
    font-size: 100%;
    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.contents-heading-title {
    color: #000000;
    font-size: 100%;
    font-weight: bold;
}

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

body.layout {
    font-size: 18px;
    margin-left: 1%;
    margin-right: 3%;
    background-color: #F4F4F4;
}

div.layout-title {
    color: #3E2723;
    font-size: 90%;
    font-weight: bold;
    padding-bottom: 16px;
}

div.layout-subtitle {
    color: #000000;
    font-size: 90%;
    font-weight: bold;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    margin-top: 20px;
    margin-bottom: 6px;
    background-color: #E5E5E5;
    border-radius: 50px;
}

div.layout-subtitle-first {
    margin-top: 0px;
}

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

div.layout-item-selected {
    background-color: #D7CCC8;
}

div.layout-text-block {
    overflow: hidden;
}

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

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

div.layout-item-name {
    color: #000000;
    font-size: 100%;
    font-weight: bold;
}

div.layout-item-description {
    color: #000000;
    font-size: 90%;
    font-weight: normal;
}

div.layout-dropdown-right {
    float: right;
    overflow: hidden;
    width: 28px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 0px;
}

div.layout-dropdown-left {
    float: left;
    overflow: hidden;
    width: 28px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 0px;
}

div.verse-block {
    padding-top: 0.5em;
}

div.verse-by-verse-block {
    padding-left: 5%;
    padding-bottom: 1em;
}

div.verse-by-verse-verse {
    padding-top: 0.5em;
}

div.verse-by-verse-1 {
    color: #000080;
}

div.verse-by-verse-2 {
    color: #8B008B;
}

body.annotations {
    margin-top: 6px;
    margin-bottom: 6px;
    background-color: #F0F0F0;
}

body.annotation-note {
    margin-top: 6px;
    margin-bottom: 6px;
    background-color: #E0E0E0;
}

div.annotation-item-block {
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border-radius: 2px;
    border-bottom: 1px hidden #fff;
    margin: 0 0 10px 0;
    padding-top: 8px;
    padding-bottom: 8px;
}

div.annotation-item-color {
    height: 1.0em;
    width: 20px;
    margin-left: 8px;
    margin-right: 8px;
    border: 1px solid #C0C0C0;
    border-radius: 2px;
}

div.annotation-item-icon {
    width: 28px;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 2px;
}

div.annotation-item-menu {
    height: 40px;
    width: 20px;
    margin-left: 8px;
    margin-right: 8px;
}

div.annotation-item-reference {
    font-family: font1;
    font-weight: bold;
    text-align: left;
}

div.annotation-item-text {
    font-family: font1;
    font-weight: normal;
    text-align: left;
}

div.annotation-item-title {
    font-family: font1;
    font-weight: normal;
    text-align: left;
}

div.annotation-item-date {
    font-weight: normal;
    font-size: 70%;
    color: silver;
    margin-top: 0.5em;
    margin-left: 8px;
    margin-right: 8px;
}

div.annotation-edit-button {
    height: 40px;
    width: 28px;
    margin-left: 4px;
    margin-right: 4px;
}

img.annotation-note {
    height: 1.0em;
    width: 1.0em;
    vertical-align: middle;
}

img.annotation-bookmark {
    height: 1.0em;
    width: 1.0em;
    vertical-align: middle;
}

div.annotation-message-none {
    font-weight: bold;
    text-align: center;
    padding-top: 4em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

div.annotation-message-none-info {
    font-weight: normal;
    text-align: center;
    padding-top: 1em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

body.history {
    margin-top: 6px;
    margin-bottom: 6px;
    background-color: #F0F0F0;
}

div.history-item-block {
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border-radius: 2px;
    border-bottom: 1px hidden #fff;
    margin: 0 0 10px 0;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 12px;
}

div.history-item-book-collection {
    font-weight: normal;
    font-size: 80%;
}

div.history-item-reference {
    font-family: font1;
    font-weight: bold;
    text-align: left;
}

div.history-item-date {
    font-weight: normal;
    font-size: 70%;
    color: silver;
    margin-top: 0.5em;
}

div.history-message-none {
    font-weight: bold;
    text-align: center;
    padding-top: 4em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

div.history-message-none-info {
    font-weight: normal;
    text-align: center;
    padding-top: 1em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

body.downloads {
    margin-left: 3%;
    margin-right: 3%;
    background-color: #F0F0F0;
}

div.download-item {
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border-radius: 2px;
    border-bottom: 1px hidden #fff;
    margin: 0 0 10px 0;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 12px;
}

div.download-title-book {
    font-weight: bold;
    padding-top: 1em;
    padding-bottom: 1em;
}

div.download-select-all-item {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 10px;
}

div.download-checkbox-left {
    float: left;
    width: 28px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 0px;
}

div.download-checkbox-right {
    float: right;
    width: 28px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 0px;
}

body.plan-chooser {
    margin-left: 3%;
    margin-right: 3%;
    background-color: #F0F0F0;
}

body.plan-details {
    margin-left: 5%;
    margin-right: 5%;
    background-color: #F0F0F0;
}

body.plan-day {
    margin-left: 3%;
    margin-right: 3%;
    background-color: #F0F0F0;
}

div.plan-chooser-plan {
    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;
}

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

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

div.plan-chooser-title {
    color: #3E2723;
    font-size: 100%;
    font-weight: bold;
}

div.plan-chooser-days {
    color: #000000;
    font-size: 100%;
    font-weight: normal;
}

div.plan-title {
    color: #3E2723;
    font-size: 100%;
    font-weight: bold;
    margin-top: 20px;
}

div.plan-description {
    color: #000000;
    font-size: 90%;
    padding-top: 16px;
    padding-bottom: 12px;
}

div.plan-state-and-date {
    color: #3E2723;
    font-size: 75%;
    padding-top: 16px;
    padding-bottom: 8px;
}

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

a.plan-chooser-link :hover {
    text-decoration: none;
    background-color: #E5E5E5;
}

div.plan-items {
    margin-top: 20px;
    margin-left: 0.2em;
    margin-right: 0.2em;
}

table.plan-items-table {
    border-collapse: separate;
    border-spacing: 6px 6px;
}

table.plan-items-table-rtl {
    margin-left: auto;
}

div.plan-item-completed {
    text-decoration: line-through;
}

div.plan-items-empty {
    margin-top: 50px;
    text-align: center;
}

span.plan-item-reference {
    color: #000000;
    text-decoration: none;
}

span.plan-item-notes {
    color: #000000;
    text-decoration: none;
}

div.plan-item-heading {
    margin-top: 10px;
    margin-bottom: 5px;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
}

td.plan-item-title-rtl {
    text-align: right;
}

td.plan-item-checkbox {
    vertical-align: middle;
}

div.plan-day-box-selected {
    background-color: #F0F0F0;
    border-top-color: #000000;
    border-left-color: #000000;
    border-right-color: #000000;
}

div.plan-day-box-unselected {
    background-color: #E0E0E0;
    border-color: #000000;
}

div.plan-day-box-empty {
    background-color: #C0C0C0;
    border-color: #000000;
}

div.plan-day-box-weekday {
    font-size: 12px;
}

div.plan-day-box-number {
    font-weight: bold;
    font-size: 20px;
}

div.plan-day-box-month {
    font-size: 12px;
}

div.plan-button {
    font-family: Roboto, Arial, Helvetica;
    font-weight: 500;
    letter-spacing: 1.1;
    color: #000000;
    background-color: #D7CCC8;
    font-size: 80%;
    margin-top: 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 12px;
    padding-right: 12px;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
    text-transform: uppercase;
}

body.plan-config {
    margin-left: 5%;
    margin-right: 5%;
    background-color: #F0F0F0;
}

div.plan-config-info {
    margin-top: 30px;
}

div.plan-config-button {
    margin-top: 12px;
}

div.plan-progress-block {
    margin-top: 16px;
    margin-bottom: 6px;
    padding: 12px;
    background-color: #E0E0E0;
    position: relative;
    user-select: none;
}

div.plan-progress-title {
    text-align: center;
    font-weight: bold;
    font-size: 110%;
    padding-bottom: 10px;
}

div.plan-progress-info {
    text-align: center;
}

div.plan-progress-reference {
    text-align: center;
}

div.plan-progress-button {
    font-family: Roboto, Arial, Helvetica;
    font-weight: 600;
    letter-spacing: 1.1;
    color: #000000;
    background-color: #D7CCC8;
    font-size: 80%;
    margin-top: 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 12px;
    padding-right: 12px;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
    text-transform: uppercase;
}

body.plan-setup {
    margin-left: 5%;
    margin-right: 5%;
    background-color: #F0F0F0;
}

div.plan-setup-question {
    font-weight: bold;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 12px;
}

div.plan-setup-answer {
    margin-top: 16px;
}

div.plan-setup-answers {
    margin-bottom: 36px;
}

div.plan-setup-answer-radio-left {
    float: left;
    width: 28px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 0px;
}

div.plan-setup-answer-radio-right {
    float: right;
    width: 28px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 0px;
}

div.plan-setup-answer-name {
    overflow: hidden;
}

div.plan-setup-answer-center {
    text-align: center;
}

div.plan-setup-answer-date {
    font-size: 105%;
    background-color: #E0E0E0;
    margin-top: 16px;
    margin-bottom: 20px;
    display: inline-block;
    text-align: center;
    border-radius: 12px;
    border: 1px;
    border-style: solid;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
}

div.plan-setup-answer-time {
    font-size: 140%;
    background-color: #E0E0E0;
    margin-top: 16px;
    margin-bottom: 20px;
    display: inline-block;
    text-align: center;
    border-radius: 12px;
    border: 1px;
    border-style: solid;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
}

div.plan-setup-title {
    font-weight: bold;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 12px;
}

div.plan-setup-message {
    text-align: center;
    margin-top: 16px;
    margin-bottom: 50px;
}

body.search-results {
    margin-top: 6px;
    margin-bottom: 6px;
    background-color: #F0F0F0;
}

div.search-result-block {
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border-radius: 2px;
    border-bottom: 1px hidden #fff;
    margin: 0 0 10px 0;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
}

div.search-result-reference {
    font-family: font1;
    font-weight: bold;
    text-align: left;
    color: #3E2723;
}

div.search-result-context {
    font-family: font1;
    font-weight: normal;
    text-align: left;
}

body.quiz {
    margin-top: 6px;
    margin-bottom: 6px;
    margin-left: 2%;
    margin-right: 2%;
    background-color: #F0F0F0;
}

div.quiz-question-number {
    text-align: center;
    margin-top: 0.5em;
    font-size: 150%;
    font-weight: bold;
}

div.quiz-question {
    text-align: center;
    font-weight: bold;
    padding-top: 12px;
    padding-bottom: 12px;
}

img.quiz-question-image {
    display: block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

div.quiz-answer {
    text-align: center;
    margin-top: 6px;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 100%;
    border: 0px;
    border-style: solid;
    border-radius: 50px;
    color: #000000;
    background-color: #D7CCC8;
}

div.quiz-answer-explanation {
    text-align: center;
    margin-top: 12px;
    font-size: 80%;
    font-weight: normal;
}

div.quiz-score-block {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 60px;
}

span.quiz-score {
    text-align: center;
    font-size: 400%;
    font-weight: bold;
    padding: 12px;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border: 0px;
    border-style: solid;
    border-radius: 50px;
    color: #000000;
    background-color: #D7CCC8;
}

div.quiz-score-before {
    text-align: center;
    font-weight: bold;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: 20px;
}

div.quiz-score-after {
    text-align: center;
    font-weight: bold;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: 10px;
}

div.quiz-score-commentary {
    text-align: center;
    font-weight: bold;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: 10px;
}

div.quiz-keypad-title {
    text-align: center;
    font-size: 120%;
    font-weight: bold;
    padding-top: 30px;
    padding-bottom: 20px;
}

div.quiz-keypad-message {
    text-align: center;
    font-size: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 5px;
    padding-right: 5px;
}

div.quiz-locked-title {
    text-align: center;
    font-size: 120%;
    font-weight: bold;
    padding-top: 30px;
    padding-bottom: 20px;
}

div.quiz-locked-message {
    text-align: center;
    font-size: 100%;
    padding-top: 20px;
    padding-bottom: 24px;
    padding-left: 5px;
    padding-right: 5px;
}

div.quiz-locked-name {
    text-align: center;
    font-size: 100%;
    font-weight: bold;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 5px;
    padding-right: 5px;
}

body.assistant-tasks {
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 20px;
    margin-bottom: 80px;
    background-color: #F0F0F0;
}

body.assistant-response {
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 20px;
    margin-bottom: 80px;
    background-color: #F0F0F0;
}

div.assistant-reference {
    font-size: 100%;
    font-weight: bold;
    margin-top: 16px;
    margin-bottom: 12px;
    text-align: center;
}

div.assistant-heading {
    font-size: 110%;
    font-weight: bold;
    margin-top: 16px;
    margin-bottom: 12px;
    text-align: center;
}

div.assistant-message {
    font-size: 100%;
    margin-top: 60px;
    margin-bottom: 20px;
    text-align: center;
}

div.assistant-task {
    margin-top: 24px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 12px;
    padding-right: 12px;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
}

div.assistant-task-color-1 {
    color: #000000;
    background-color: #D7E8FA;
}

div.assistant-task-color-2 {
    color: #000000;
    background-color: #E3F4E1;
}

div.assistant-task-color-3 {
    color: #000000;
    background-color: #FADDE1;
}

div.assistant-task-color-4 {
    color: #000000;
    background-color: #FFF9C4;
}

div.assistant-response {
    margin-top: 24px;
    margin-bottom: 24px;
    display: inline-block;
}

div.assistant-response-p {
    padding-top: 10px;
}

div.assistant-response-h1 {
    font-size: 110%;
    font-weight: bold;
    padding-top: 10px;
}

div.assistant-response-h2 {
    font-size: 105%;
    font-weight: bold;
    padding-top: 10px;
}

div.assistant-response-h3 {
    font-size: 100%;
    font-weight: bold;
    padding-top: 10px;
}

div.assistant-response-h4 {
    font-size: 100%;
    font-weight: bold;
    padding-top: 10px;
}

div.assistant-response-bq {
    font-size: 100%;
    font-weight: normal;
    padding-left: 1em;
}

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

div.assistant-button {
    font-family: Roboto, Arial, Helvetica;
    font-weight: 500;
    letter-spacing: 1.1;
    color: #000000;
    background-color: #DDDDDD;
    font-size: 80%;
    margin-top: 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 12px;
    padding-right: 12px;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
    text-transform: uppercase;
}

body.settings {
    margin-top: 6px;
    margin-bottom: 6px;
    margin-left: 0;
    margin-right: 0;
    background-color: #F0F0F0;
    font-size: 16px;
}

body.settings-list {
    margin-top: 6px;
    margin-bottom: 6px;
    margin-left: 3px;
    margin-right: 3px;
    background-color: #F0F0F0;
    font-size: 16px;
}

div.settings-category {
    color: #3E2723;
    font-weight: bold;
    margin-top: 12px;
    margin-left: 6px;
    margin-right: 6px;
}

div.settings-item {
    padding: 16px;
}

div.settings-separator {
    border-top: 1px solid #E0E0E0;
}

div.settings-title {
    color: #000000;
}

div.settings-summary {
    color: #606060;
    font-size: 90%;
    margin-top: 2px;
}

div.settings-checkbox-right {
    float: right;
    overflow: hidden;
    width: 28px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 0px;
}

div.settings-checkbox-left {
    float: left;
    overflow: hidden;
    width: 28px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 0px;
}

div.settings-list-title {
    color: #3E2723;
    font-size: 20px;
    font-weight: bold;
    margin-top: 12px;
    margin-bottom: 16px;
}

div.settings-list-entry {
    margin-top: 16px;
    margin-bottom: 16px;
}

div.settings-list-entry-name {
    color: #000000;
    overflow: hidden;
    font-size: 18px;
    margin-top: 6px;
}

div.settings-radio-left {
    float: left;
    width: 28px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 0px;
}

div.settings-radio-right {
    float: right;
    width: 28px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 0px;
}

body.message {
    margin: 0;
    background-color: #F0F0F0;
    font-size: 16px;
}

div.message-title {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 8px;
    color: #3E2723;
    font-weight: bold;
    font-size: 125%;
}

div.message-text {
    padding-left: 20px;
    padding-right: 20px;
    color: #000000;
    font-size: 100%;
}

div.message-checkbox {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 24px;
    padding-bottom: 12px;
}

div.message-checkbox-caption {
    color: #000000;
    font-size: 100%;
    overflow: hidden;
}

div.message-checkbox-left {
    float: left;
    overflow: hidden;
    width: 28px;
    margin-left: 1px;
    margin-right: 3px;
    margin-top: 0px;
}

div.message-checkbox-right {
    float: right;
    overflow: hidden;
    width: 28px;
    margin-left: 3px;
    margin-right: 1px;
    margin-top: 0px;
}

div.message-footer {
    position: absolute;
    bottom: 0;
    margin: 0;
    min-height: 52px;
    width: 100%;
}

button.message-button {
    color: #3E2723;
    background-color: transparent;
    font-weight: bold;
    letter-spacing: .08929em;
    text-transform: uppercase;
    height: 36px;
    min-width: 64px;
    vertical-align: middle;
    border: none;
    outline: none;
    padding: 0 16px;
}

ui.user-account.background {
    background-color: #F0F0F0;
}

ui.user-account.title {
    color: #3E2723;
}

ui.user-account.text {
    color: #000000;
}

ui.user-account.hint {
    color: #101010;
}

ui.user-account.button.major {
    color: #FFFFFF;
    background-color: PrimaryColor;
    text-transform: uppercase;
}

ui.user-account.button.minor {
    color: #000000;
}

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

@media(max-width: 368px) {
    .navigation-top span {
        font-size: 14px;
    }
}
body {
    background-color: #F0F0F0;
}

body {
    margin-left: 0;
    margin-right: 0;
}
#toolbar-top {
    background: #4E342E;
    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: #FFFFFF;
    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: 0px;
    margin-left: 0px;
    margin-right: 0px;
    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;
}
.txs.selected:hover {
    background-color: #FFFF20;
    cursor: pointer;
}
.txs.selected {
    background-color: #FFFF99;
}
.txs: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 {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #CCCCCC;
    background: #F0F0F0;
    padding: 2px;
    margin-left: 4px;
    margin-right: 2px;
    text-decoration: none;
    color: #808080;
    font-weight: bold;
    cursor: pointer;	
}
#book-selector a {
    text-decoration:none;
    color: inherit;
}
#book-selector:hover {
    background-color: #DDDDDD;
    cursor: pointer;
}
#chapter-selector {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #CCCCCC;
    background: #F0F0F0;
    padding: 2px;
    margin-left: 2px;
    margin-right: 4px;
    text-decoration: none;
    color: #808080;
    font-weight: bold;
    cursor: pointer;	
}
#chapter-selector a {
    text-decoration:none;
    color: inherit;
}
#chapter-selector:hover {
    background-color: #DDDDDD;
    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;
    padding-top: 4px;
    padding-bottom: 4px;
}
.book-menu-item a {
    text-decoration:none;
    color: inherit;
    width: 100%;
    display: block;
}
.book-menu-item:hover {
    background-color: #EEEEEE;
    cursor: pointer;
}
.chapter-table {
    table-layout: fixed;
    width: 100%;
    border: none;
}
.chapter-menu-cell {
    padding-left: 2px;
    padding-right: 2px;
}
.chapter-menu-item {
    text-align: center;
    color: black;
    background-color: #EEEEEE;
    width: 100%;
    display: block;
    border: 1px solid #E0E0E0;
    padding: 6px 0px 6px 0px;
}
.chapter-menu-item a {
    text-decoration:none;
    color: inherit;
    width: 100%;
    display: block;
}
.chapter-menu-item:hover {
    background-color: #DDDDDD;
    cursor: pointer;
}
.intro-menu-item {
    color: black;
    background-color: #EEEEEE;
    text-align: center;
    border: 1px solid #E0E0E0;
    padding: 4px 6px 4px 6px;
    margin: 2px 2px 2px 4px;
}
.intro-menu-item a {
    text-decoration:none;
    color: inherit;
    width: 100%;
    display: block;
}
.intro-menu-item:hover {
    background-color: #DDDDDD;
    cursor: pointer;
}
.icon-launch { height: 40px; width: 28px; margin-left: 2px; margin-right: 2px; }
.float-left { float: left; overflow:hidden; }
.float-right { float: right; overflow:hidden; }
.plan-close-icon { height:30px; width:18px; margin-left:2px; margin-right:2px; }
.icon-left { position: absolute; left:6px; }
.icon-right { position: absolute; right:6px; }

.video-container { position:relative; height:0; overflow:hidden; background-size:contain; background-repeat:no-repeat; background-position:center; }
.video-16-9 { padding-bottom:56.25%; }
.video-youtube { padding-top:0px; }
.video-vimeo { padding-top:0px; }
.video-jesus { padding-top:0px; padding-bottom: calc(56.25% + 16px); background-position: 8px 8px; background-size: calc(100% - 16px);}
.video-jesus-no-calc { padding-top:0px; padding-bottom: 59%; background-position: 8px 8px; background-size: 95%;}
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }
.video-container video { position:absolute; top:0; left:0; width:100%; height:100%; }
.video-container img { max-height:100%; max-width:100%; width:18%; height:auto; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; opacity:0.8; }

@media (min-width: 500px) {
    div.video-block {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}
span.footnote > a:link { text-decoration: none; }
.collapsible-button { cursor: pointer; padding: 12px; width: 100%; border: none; text-align: left; outline: none; }
.collapsible-button:after { content: '\002B'; color: white; font-weight: bold; float: right; margin-left: 5px; }
.active:after { content: '\2212'; }
.collapsible-element { padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }