@font-face {
    font-family: font1;
    src: url('../fonts/tifinaghe-Ircam-unicode.ttf')  format('truetype');
    font-weight: normal; font-style: normal; 
}
@font-face {
    font-family: font2;
    src: url('../fonts/CharisSILCompact-B.ttf')  format('truetype');
    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;
    line-height: 112%;
}

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: #003300;
    font-style: inherit;
    text-decoration: none;
    font-size: 75%;
}

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: #003300;
    font-size: 140%;
    font-weight: bold;
}

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

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

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

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

span.va {
    color: green;
    font-style: italic;
    font-size: 70%;
    position: relative;
    top: -0.4em;
}

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

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

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

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

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

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

span.rq {
    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: #003300;
    font-weight: bold;
    font-size: 150%;
    page-break-after: avoid;
}

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

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

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

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

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

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

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

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

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 {
    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: normal;
    color: #757575;
}

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: normal;
    color: #757575;
    line-height: 100%;
}

span.k {
    font-weight: bold;
}

span.vp {
    color: green;
    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;
    font-size: 80%;
}

span.fk {
    font-weight: bold;
}

span.fq {
    font-style: italic;
}

span.fqa {
    font-style: italic;
}

span.fl {
    font-style: italic;
}

span.fv {
    color: green;
    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;
    font-size: 90%;
    text-align: justify;
}

span.glossary {
}

span.footnote {
    color: navy;
    font-size: 70%;
}

span.xo {
    font-weight: bold;
    font-size: 75%;
}

span.xk {
    font-weight: bold;
    font-size: 55%;
}

span.xta {
    font-style: normal;
    font-size: 55%;
}

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

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: #003300;
    font-weight: bold;
    font-size: 110%;
    page-break-after: avoid;
}

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

div.imt {
    text-align: center;
    color: #003300;
    font-weight: bold;
    font-size: 130%;
    page-break-after: avoid;
}

div.imt2 {
    text-align: center;
    color: #003300;
    font-weight: bold;
    font-size: 130%;
    page-break-after: avoid;
}

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

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

div.iot {
    text-align: left;
    color: #003300;
    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: 5%;
}

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

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

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;
    direction: LTR;
    right: RTL;
    left: LTR;
}

div.footer-line {
}

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

span.ref {
    color: #003300;
    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;
}

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

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

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: #000080;
    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.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;
}

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

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: #003300;
}

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

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: #003300;
    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: #003300;
    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: white;
    font-size: 16px;
}

div.message-title {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 8px;
    color: rgba(0,0,0,0.9);
    font-weight: bold;
    font-size: 125%;
}

div.message-text {
    padding-left: 20px;
    padding-right: 20px;
    color: rgba(0,0,0,0.75);
    font-size: 100%;
}

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

div.message-checkbox-caption {
    color: rgba(0,0,0,0.75);
    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: #003300;
    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;
}

img { max-width: 100%; }
.txs { 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;
}
.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: 12px;
    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: 12px;
    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; }

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