/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent;-webkit-text-decoration-skip:objects}
a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}
img{border-style:none}svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-input-placeholder{color:inherit;opacity:0.54}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */

html, body {font-family:"Times New Roman",Times,serif;  height:100%;}

header, section, footer, aside, nav, article, figure {display: block;}

p {word-spacing: normal; line-height: 21px; font-weight: normal;}

h2 {margin: 20px 0 0 0; font-weight: bold; font-size: 24px;}

body {width: 100%; background-image: url('himages/wavyj.jpg'); background-repeat: repeat; background-size: auto; background-position: top left;}

header {background-image: url('himages/wavyj.jpg'); background-size: auto; 
        background-position: top left; height: 105px;border-bottom: 1px solid red;}
#byline {color: white; float: left; margin: 6% 0 0 -15%;}

aside {}

#searchtx {float: right; margin : 0 5% 0 0; font-size: 65%;}
#searchtx [type='search'] {float: left; width: 98px; padding: 1px 0 2px 3px; margin: 6px 0 0 0; border: none;}
#searchareap {color: white; margin: -5% 0 0 0;}
#searchicon {color: white; margin: 0 0 0 -12px;}
#searchbtn {float: left; width: 17px; height: 15px; margin: 3px 0 0 0;background-color: red; border: none;}
#searchid {margin: 4px 0 0 0;}

label[for=bk] {display:inline-block; overflow: hidden; text-overflow: clip;
    white-space: nowrap; vertical-align: middle; width: 45px;text-align: center;}
#goupicon {color: red; font-size: 15px;}
#goup {float: right; width: 25px; height: 25px; text-align: center; padding: 2px 0 0 0; background-color: white; border:1px solid red;}
.goup {position:fixed;right:10px;bottom:5px;}

.headerref {position: fixed; top: 0; right: 0; left: 0; z-index: 999;}
#header {position: fixed; top: 0; right: 0; left: 0; z-index: 999; margin: 0;}

#main {width: 100%; margin: 110px 0 0 0;}
#mainref {width: 100%; margin: 110px 0 10px 0;}

#contdiv {width:320px;height:auto;position:fixed;top:25%;left:calc((100vw - 320px)/2);z-index:999;}
#wlcmdiv {padding:10px;background:#C39A86;box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.45);border-radius:10px;color:white;}
#brdrdiv {text-align:center;border:1px solid red;border-radius:10px;padding:1%;}
#closeP {background:white;color:red;float:right;margin:-25px 0 0 0;width:20px;height:auto;padding-left:8px;cursor:pointer;border:1px solid red;}
#dateP {font-size:70%;margin-top:-2%;text-align:left;}
#goodP {font-size:120%;margin-top:-2%;}
#wlcmP {margin-top:-4%;}
.wlcmP {display: inline-block; margin-top: 3px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.45); border-radius: 5px; color: red; background: white; padding: 4px; font-size: 120%;}

#archive {float:left; width: 40%; margin: 0 0 2% 5%;position: fixed; z-index: 1;}
#archiveref {height: auto; width: 40%; margin: 0 0 2% 5%; margin-top: 40px; position: fixed; z-index: 1;}

#previous {margin: 0 0 0 0; color: black;}

#video {float: right; width: 50%; margin: 0 5% 2% 0; margin-top: -20px;}
#articleside {float: right; width: 50%; margin: 0 5% 2% 0; margin-top: 40px;}
#versestyl {color: blue;}

#article {background-color:white; text-align: justify; text-justify: auto; font-size: 100%; padding: 1%; border: 1px solid red;}
#articledevo {width: 90%; background-color:white; text-align: justify; text-justify: auto; font-size: 100%; padding: 0 5%; border: 1px solid red;}
#title, #scripture {text-align: center;}
#videotg {width: 100%;}
#articletitle {background-color:white; padding:0.2% 1% 0.2% 1%; margin: 0 0 0 0; border: 1px solid red;}
/*#mediabible {margin: 5% 0 5% 0;}*/

.loading {font-size: 80%; color: grey;}
.labelloading {color: white;}
.apire1 {float: left; display: inline-block; overflow: hidden; text-overflow: clip; white-space: nowrap; vertical-align: middle; width: 70%;}
.apire2 {float: right;}


#audnotice {color: white; text-align: center;}
#audIns {font-size: 80%; display: none; color: white;}
.audsize {color: red; float: right; margin: 2px 2px 0 0; padding: 2px;
 background-color: white; cursor: pointer;}

#vidform {display: none;}

#closesearch{float: right; margin: 1% 1% 0 0; width: 20px; 
    height: 15px; font-size: 12px; padding: 0 0 0 0;}
#schtxalight{color: blue;}

.wrapper, #optBtn {display: inline-flex; height: 20px;}
.wrapper i {width:20px; height:19px; margin: 1px; border-radius: 10px; font-size: 25px;opacity:0.9;background:#fff;-webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; line-height: 20px;}

.wrapper a:nth-child(1) {color: #4267AA;}
.wrapper a:nth-child(2) {color: #1DA1F2;}
.wrapper a:nth-child(3) {color: #0e76a8;}
.wrapper a:nth-child(4) {color: #25D366;}
.wrapper a:nth-child(5) {color: #DD2A7B;}
#optBtn {color: blue;border: none;}
.wrapper i:hover {margin-top: -3px;opacity:1; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1);}

select, option {-ms-appearance: none; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 1% 2% 1% 2%; outline: none;}

select::-ms-expand {display: none;}

select.language {-ms-border-radius: 10px; -o-border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width: 70%; /*display: block;*/}

select.book {-ms-border-radius: 10px; -o-border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width: 70%; /*display: block;*/}

select.chapter {-ms-border-radius: 10px; -o-border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width: 34.5%;}

select.verse {-ms-border-radius: 10px; -o-border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width: 34.5%;}

.articleref {margin: 1% 0 0 0; position: relative;}
div.articleref {display: none;}
#verseres, #searchres {display: none;}

.articleform, .articleformcon {float: left; width: 80%; margin: 0 0 2% 10%;
     margin-top: 40px;}
/*.articleform {width: 50%; float: right; margin: 40px 40px 0 0; position: relative;}
.articleformcon {width: 50%; float: right; margin: 40px 40px 0 0; position: relative;}*/
.con {padding: 0 5%;}
.articlecon {text-align: center;}
.contitle {color: blue; font-size: 100%;}
.formlabel {float: left; margin: 15px 0 0 0; width:100px;}
input[type=text] {margin: 15px 0 0 0; width:300px;/* float:right;*/}
input[type=email] {margin: 15px 0 0 0; width:300px;/* float:right;*/}
input[type=submit] {margin: 1% 1% 0 0; float:right;}
input[type=radio] {width: 10px; height: 10px;}
textarea {margin: 5% 0 0 0; width:100%; height: 100px;}
textarea::placeholder {text-align: left; transform: translate(-45px, -15px);}

#subheader {position: relative; padding: 0 0 5px 0;}
#subheaderalt {display: none;}

figure.image1 {float: left; border: none; margin: 2% 0 0 5%;/* width: 20%;*/}
/*figcaption.image1 {color: white;}*/
/*#xmasimg {top: 15%; left: 0; position: fixed; z-index: 999;}*/

nav {float: left; margin: 5% 0 0 0;}

a:link, a:visited, a:hover, a:active {text-decoration: none;}

#newsbanner {position: relative; text-align: center; width: 1000px; height: 350px; overflow: hidden; border-radius: 10px; display: inline-block; margin: 0 0 0 10%;}
#newssnippet {margin: 5% 0 0 10%; width: 1000px;}
div.newscard {position: relative; overflow: hidden; text-align: center; width: 31%; height: 350px; background-color: white; border-radius: 10px; display: inline-block; margin: 1%; /*padding: 1%;*/}
h3.newscard {margin: 1% 0 0 1%; color: blue;}

nav.navigation {float: right; font-size: 110%; margin: 0 20% 0 0; margin-top: 80px;}

.woutsearch {margin: 0 40% 0 0; margin-top: 80px;}

a.current:link, a.current:visited, a.current:hover, a.current:active {color: white;padding: 20px 20px 0 20px;} 
a.navigation:link, a.navigation:visited, a.navigation:hover, a.navigation:active {color: red;padding: 20px 20px 20px 20px;}

.dropdown {display: none;}
#dropdownsearch {display: none;}
#sidesearch {display: none;}
#closebtn, #biblemenu {display: none;}

a.currentaltsub:link, a.currentaltsub:visited, 
a.currentaltsub:hover, a.currentaltsub:active {
color: red; background: white; display: none; 
padding: 1px 14px 1px 14px; float: left; font-size: 12px;} 

a.navigationaltsub:link, a.navigationaltsub:visited {color: white; text-decoration: none; display: none; padding: 1px 14px 1px 14px; float: left; font-size: 12px;}
a.navigationaltsub:hover, a.navigationaltsub:active{color: white; display: none;}
a.archivelist:link {color: black;text-decoration: none;}
a.archivelist:visited {color: black;text-decoration: none}
a.archivelist:hover {color: green;text-decoration: none;}
a.archivelist:active {color: green;}
a.archive:link, a.archive:visited {color: black;text-decoration: none;}
a.archive:hover {color: green;text-decoration: none;}
a.archive:active {color: green;}
h3.archivename {color: black; text-align: left; /*padding: 0;*/ margin: 0; font-weight: bold; 
/*font-size: 24px;*/}



.subarchivename {color: white;}
.psubarchivename {margin: 0 0 -5px 0;}
#recentopen, #previousclose {display: none;}
#recentclose, #previousopen {display: block;}

ul.archive {text-align: left; color: green; padding: 0; margin: 0; font-size: 14px; list-style-type: none;}
li.archive {margin: 2% 0 0 5%;}
li.terms {margin: 10px 40px 40px 20px; text-align: justify; padding: 0 0 0 0; font-size: 18px;}

.week {color: black; margin: 1% 0 0 5%;}
.month {color: black; margin: 1% 0 0 3%;}
.year {color: black; margin: 1% 0 0 0;}

h3.archivenameref {color: black; text-align: left; margin: 10% 0 0 0; font-weight: bold; width: 67%; background-color:white; padding:0.2% 1% 0.2% 1%; border: 1px solid red; 
/*font-size: 24px;*/}
div.archiveref {margin: 20px 0 0 0;}
div.archivegen {text-align: center; margin: -15px 0 0 0; position: fixed;       z-index: 1; width: 100%; background-image: url('himages/wavyj.jpg'); background-position: top left; background-size: auto;}
div.othergen {margin: -10px 0 0 0;}
p.archiveref {font-size: 90%; margin: 10px 0; text-align: left;}
p.archivegen {font-size: 70%; margin: 1% 0;}
.vl {border-left:5px solid red; height:5px; position:absolute; left:50%; margin-left:-3px; top:0;}

a.archivereflist:link, a.archivereflist:visited {color: white;text-decoration: none;}
a.archivereflist:hover, a.archivereflist:active {color: green;text-decoration: none}

#stat {float: right; margin: 82px -120px 0 0; font-size: 70%;}

#indexonline {margin: 0 4px 0 2px; padding: 3px; 
    text-align: center; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 
    0 6px 20px 0 rgba(0, 0, 0, 0.45); border-radius: 4px; width: 30px;
    display: inline-block; background-color: blue; 
    color: white;}

#indextotal {margin: 0 4px 0 2px; padding: 3px;
    text-align: center; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 
    0 6px 20px 0 rgba(0, 0, 0, 0.45); border-radius: 4px; width: 30px;
    display: inline-block; background-color: red; 
    color: white;}
    
#mediabible {position: fixed; top: 35%; left: 5%; z-index: 999;/* background-color: #C39A86;*/}
audio {width:320px; height:20px;margin:-1% 0 0 0;background:white;border:0;}
.video-js {width: 320px; height: 180px;}
#pc {background:grey;color:white;text-align:center;font-size:60%;margin:52% 0 0 0;display:block;}
#pcd {background:grey;color:white;text-align:center;font-size:60%;margin:0 0 0 0;}
#pf {color:white;line-height:0.8;text-align:center;font-size:calc(0.15*320px);margin-top:calc(0.05*180px);}
#prevCh,#prev,#stop,#next,#nextCh {font-size:70%;margin-top:-50px;}
#prevCh {margin-left: 20%;}
#stop {width: 50px;}

@media only screen and (max-width: 1075px) {
#mediabible {top: 42%;}
}

@media only screen and (max-width: 900px) {
body {width: 100%; background-image: url('himages/wavyj-min.jpg'); background-size: auto; background-position: top left;}
#mediabible {top: 42%;}
}


@media only screen and (max-width: 820px) {
/*figure.image1 {width: 30%;}*/
}

@media only screen and (max-width: 672px) {
header {height: 80px;}
#stat {margin: 60px -120px 0 0; font-size: 60%;}
#indexonline, 
#indextotal {padding: 2px;}
#main {margin-top: 80px;}
#mainref {margin-top: 80px;}
/*figure.image1 {margin: 2% 0 0 5%;}
figcaption.image1 {font-size: 70%;}
#xmasimg {top:11%;left:0;}*/

.searchtxmenu {display: none;}
#searchtx {display: none; margin: 0 0 0 -30px; 
    float: left; text-align: left;/*font-size:60%;*/}
#searchtx [type='search'] {margin: 0 0 0 0;font-size:80%;}
#searchbtn {margin: 0 0 0 -8px;}
#searchidm {margin: -3px 0 0 0;}
#searchareap {font-size:80%;}
div.archivegen {margin-top: -5px;}

div.othergen {margin-top: -5px;}

div.index {margin-top: -20px;}

div.others {margin-top: 0;}

#archive {width: 30%; margin: 0 0 1% 3%; margin-top: 20px;
    font-size: 90%;}

#archiveref {width: 30%; margin: 0 0 1% 3%; margin-top: 40px;}

ul.archive {font-size: 75%;}
#video {width: 60%; margin: 0 3% 1% 0; font-size: 90%;
    margin-top: 5px; text-align: center;}
#articleside {width: 60%; margin: 0 3% 1% 0; margin-top: 40px;}
#articletitle {font-size: 90%;}
select.language, select.book {width: 90%; font-size: 80%; padding-left: 5%;}

select.chapter, select.verse {width: 43.5%; font-size: 80%; padding-left: 5%;}

.menu {color: red;} 
#dropdownsearch {display: inline-block; float: right; 
      margin-right: 10px;  margin-top: 5px; position: relative;
      width: 120px;}
.dropdown {margin-right: 30px; margin-top: 10px; display: inline-block;
      position: relative; width: 70px; float: right;}  

.dropdown-content {width: 100%; margin: 0 0 0 -60%; 
      text-align: left; border: none; display: none;
      position: absolute; height: 180%; overflow: auto;}
#dropdownsearch:hover #searchtx {display: block;}
.dropdown:hover .dropdown-content {display: inline-block;}
.dropdown-content a.navigationalt {display: block; color: red;
     text-decoration: none;}
.dropdown-content a.navigationalt:hover {color: white;}
.menubutton {float: right; border: 1px solid red; 
     background-color: white;}
.articleform, .articleformcon {float: left; width: 80%; margin: 0 0 2% 10%;
     margin-top: 40px;}
.formlabel {font-size: 80%; margin-top: 5%; width:30%;}

input[type=text] {margin: 5% 5% 0 0; width: 50%;}

input[type=email] {margin: 5% 5% 0 0; width: 50%;}

input[type=submit] {font-size: 80%;}

textarea::placeholder {font-size: 80%; transform: translate(-40px, -15px);}

#mediabible {top: 33%; left: 3%;}
}

@media only screen and (max-width: 450px) {
/*#xmasimg {top:5%;left:0;}*/
div.archivegen {margin-top: -5px;}
div.othergen {margin-top: -5px;}

#mainref {margin-top: 60px;}

#archive {width: 100%; background-image: url('himages/wavyj.jpg');       background-size: auto; background-position: top left; margin: 15px 0 0 0; padding-bottom: 5px;}

#archiveref {width: 100%; background-image: url('himages/wavyj.jpg'); 
        background-position: top left; background-size: auto; margin: 0 0 1% 0;
        padding: 10px 5px 25px 5px; text-align: center; font-size: 80%;}
ul.archive {margin-bottom: 5px;}
#video {width: 90%; margin: 0 0 1% 5%; margin-top: 20px; float: left;}
#articleside {width: 90%; margin: 0 0 1% 5%; margin-top: 95px; float: left;}
select.language {width: 30%; height: 15px; float: left; margin-left: 5%;
     padding: 0 0 0 5px;/* display: inline;*/}

select.book {width: 30%; height: 15px; margin-left: 37%;
     margin-top: -15px; float: left; padding: 0 0 0 5px;/* display: inline;*/}

select.chapter {width: 10%; height: 15px; margin-left: 69%;
     margin-top: -15px; float: left; padding: 0 0 0 5px;}

select.verse {width: 10%; height: 15px; margin-left: 81%;
     margin-top: -15px; float: left; padding: 0 0 0 5px;}

#vidlang {margin-top: -13px;}
#mediabible {top: 16%; left: 5%;}
#contdiv {width:80vw;left:10vw;}
#pf {font-size:calc(0.135*100vw);margin-top:calc(0.025*100vw);}
audio {width:calc(0.9*100vw);}
#prevCh {margin-left: 5%;}

#exit {margin-left: 4%;}
div.archiveref {float: left; margin: 3px 0 0 0; width: 100%;}
p.archiveref {display: inline; padding-right: 25px;}
.dropdownsearch {width: 25%;}
.articleformcon {margin-bottom:60px;}
.con {margin-bottom:60px;}
}

@media only screen and (max-width: 380px) {
/*figcaption.image1 {font-size: 60%;}*/
p.archivegen {font-size: 60%;}
#archiveref {margin-top: 20px !important;}
#archive {font-size: 75%;}
}


@media only screen and (max-width: 355px) {
    /*#mediabible {top: 25%;}*/
}


@media only screen and (max-width: 325px) {
/*figure.image1 {width: 40%;}*/
#xmasimg {width:18vw;}
#archiveref {margin-top: 6px;}
.dropdown {margin-right: 10px;}
#dropdownsearch {margin-top: 5px;}
.dropdown-content {font-size: 75%; margin: 0 0 0 -20%;}
#searchtx {margin: 3px 0 0 0; padding: 5px; background-color: #C39A86; width: 100%;}

.menubutton {font-size: 80%; padding: 2px 3px 0 3px;}
p.cpheader {float: left; display: inline-block; margin-top: 60px; margin-left: -80px}
/*.cpheaderi, .cpheadero {font-size: 60%; float: right; margin: 60px 0 0 0;
   margin-right: -70px;}*/
.con {font-size: 80%;}
.con ul {margin-left: -25px;}
legend {font-size: 75%;}
.formlabel {font-size: 75%;}

input[type=text] {width: 40%; height: 10px;}

input[type=email] {width: 40%; height: 10px;}

input[type=submit] {font-size: 75%;}

textarea::placeholder {font-size: 60%; transform: translate(-30px, -10px);}

/*#mediabible {top: 26%; left: 5%;}
#vidplayer{width:240px; height: 135px;};*/
}


@media only screen and (max-width: 287px) {
    /*#mediabible {top: 32%;}*/
}



@media only screen and (max-width: 250px) {
#contdiv {font-size:70%;}
p.archivegen {font-size: 50%;}
}

@media only screen and (max-width: 242px) {
/*figcaption.image1 {font-size: 50%;}*/
/*#stat {font-size: 50%;}*/
#stat {margin: 65px -125px 0 0; font-size: 50%;}
#indexonline, #indextotal {padding: 1px;}
input[type=text] {margin-left: 10%;}
input[type=email] {margin-left: 10%;}

}


@media only screen and (max-width: 238px) {
#dropdownsearch {margin: 10px 10px 0 0;}
#articletitle {font-size: 80%;}
/*p.cpheader {margin-left: -35%;}*/
}



@media only screen and (max-width: 236px) {
header {height: 70px;}
#dropdownsearch {margin: 5px 10px 0 0;}
#stat {margin: 25px 8px 0 0;}
p.cpheader {margin-top: 15px; margin-left: 5%;}
p.cpheadero {margin-top: 60px; margin-left: -42%;}
}


@media only screen and (max-width: 216px) {
#dropdownsearch {margin: -30px 5px 0 0;}
#stat {margin: 20px 1px 0 0;}
p.cpheader {margin-top: 15px; margin-left: 1%;}
}