/* 
    Created on : Jan 1, 2019, 3:18:36 PM
    Author     : james
*/

body
{
  background-image: url('../imgs/textures_03_lighter.jpg');
  /* past css themes used in chronological order
  background-image: url('../imgs/logos/bgblufadelts3.png');
  background-color: white;
  */

  color: #224498;
  background-position: top center;
  /* repeat-x, repeat-y, repeat, no-repeat */
  background-repeat: repeat;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 100%;
  font-weight: lighter;
  text-align: left;
  margin: 7px;
}

* { margin:0; padding:0; }

/* @import url(css/list.css);  */

/* negative alignments */
.negleft8pct { margin-left: -8%; list-style-type: none; }
.negleft6pct { margin-left: -6%; list-style-type: none; }
.negleft4pct { margin-left: -4%; list-style-type: none; }
.disc {list-style-type: disc;}

/* do not change the order of these pseudo-classes; you will confuse MSIE */
a:link { text-decoration: none; color: #224498; }
a:visited { text-decoration: none; color: #224498; }
a:hover { text-decoration: none; color: #cc0000; } /* font-weight: bold; } */
a:active { text-decoration: none; border: 0; border-style: none; color: #224498; }


a.bigred
{
  font-size: x-large;
  color: red;
  text-decoration: none;
  line-height: 1.6em;
}
a.large
{
  font-size: large;
  color: blue;
  text-decoration: none;
}

.linebrk { display: block !important; }
span.linebrk a { display: block; margin: 2px 0 2px 0; }
.padmargrt
{
  border-style: none double none none;
  border-width: 4px;
  margin: 0 4px 0 4px;
  padding: 0 4px 0 4px;
}
img
{
  max-width: 100%;
  border: 0;
  margin: 0;
  border-style: none;
}
img.hebrewletter
{
  /* */
  margin: .6em 0 0 0 !important;
}
span.txthebrewletter
{
  border: 0;
  border-style: none;
  font-size: 1em;
}

.imgstk
{
  margin: 2px 0 0 0;
  padding: 0 0 0 0;
  display: block;
}

imgFloatRight
{
  float: right;
  padding-right: 4px;
}

.blk
{
  display: block;
}

/*
layout cut from here
*/
.hard-left {text-align: left !important;}

div#white
{
  background-color: white;
  color: #000000;
  border-style: double;
  border-width: .24em;
  border-color: #DCE4EE;
}

p
{
  text-align: left;
  text-indent: .8em;
  font-size: 1.08em;
  margin: .4em .42em .4em .42em;
  color: navy;
}

.hfl p:first-letter
{
  font-size: 150%;
  line-height: .08em;
  vertical-align: -200%;
  /* color: #000000; */
}
.hfl-override p:first-letter
{
  font-size: 100% !important;
  color: red;
  /* font-size: 40%;
 vertical-align: -1%;
 line-height: .05em;
  */
  vertical-align: -7%;
}
p.hfl-override > span:first-letter
{
  color: yellow;
  font-size: 70% !important;
}

.hfl-override { color: red; }
span.hfl-override span:first-letter { font-size: small; }

span.hfw p:first-child
{
  font-size: 150%;
  line-height: .08em;
  vertical-align: -200%;
}

.tright
{
  text-align: right;
}
.tleft
{
  text-align: left;
}

.tite
{
  margin: 0;
  padding: 0;
  text-align: inherit;
}
.padall10px
{
  padding: 10px;
}
.padall12px
{
  padding: 12px;
}
.padtop
{
    padding: 10px 0 0 0; 
}
/* some repeated items here because css does not inherit into a table */
.b { font-weight: bold; }
.l { font-weight: lighter; }
.i { font-style: italic; }
.obl {font-style: oblique; }
.n { font-style: normal; }
.u { text-decoration: underline; }
.c { text-align: center; }
.tm { margin: 14px 0 0 0; }
.tm1px { margin: 1px 0 0 0; }
.bm1px { margin: 0 0 1px 0; }
/* best to state the lm and rm as margin-left and margin-right respectively */
.rm { margin: 0 14px 0 0; }
.lmrm { margin: 0 14px 0 14px; }
.lm { margin: 0 0 0 14px; }
.bm { margin: 0 0 10px 0; }
.medbm { margin: 0 0 14px 0; }
.bigbm { margin: 0 0 20px 0; }
.bigtm { margin: 20px 0 0 0; }
.bigtmbm { margin: 3% 0 3% 0; }
.smallbm { margin: 0 0 3px 0; }
.smalllm { margin: 0 0 0 3px; }
.smalltm { margin: 3px 0 0 0; }
.smalltmbm { margin: 3px 0 3px 0; }
.medlm { margin: 0 0 0 28px; }
.biglm { margin: 0 0 0 32px; }
.tmbm { margin: 14px 0 14px 0; }
.brt { border-right: 2px ridge; }
.blft { border-left: 2px ridge; }
.btop { border-top: 2px ridge; }
.bbot { border-bottom: 2px ridge; }

/* move all img styling together when done */
img.smalltm { border-style: none; }

.smallFont { font-size: .5em; }

/*
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
*/
p.ridge {border-style: ridge;} 
div.ridge {border-style: ridge;} 
/* 
the ridge border does not work for me on <ul> at this time 06/27/2025
border-width: 2em 2em 2em 2em;   tried red for testing... no red
ul.listridge { border-style: ridge; border-radius: 20px 20px 20px 20px; border-color: red; } 
*/

/* adjacent sibling defs */
/* grandchild plus defs */
/* */
td.td25pct a { display: block; line-height: 1.8em; }
td.btnLine a { display: inline-table; text-align: center;}

.sitefont
{
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 1.0em;
  font-weight: lighter;
}
.smaller { font-size: smaller; }
.larger { font-size: larger; }
.xxsmall { font-size: xx-small; }
.xsmall { font-size: x-small; }
.small { font-size: small; }
.smallPt89em { font-size: .89em; }
.norm { font-size: small; }
.med { font-size: medium; }
.medbigger { font-size: 1.09em; }
.med-one-pt-10em { font-size: 1.10em; }
.medsmaller { font-size: .97em; }
.medsmall { font-size: .95em; }
.medsmallest { font-size: .9em; }
.meddot88em { font-size: .88em; }           
.medlarge { font-size: 1.2em; }
.lg2em { font-size: 2em; }
.lg1pt25em { font-size: 1.25em; }
.lg1pt5em { font-size: 1.5em; }
.lrg { font-size: large; }
.xlrg { font-size: x-large; }
.xxlrg { font-size: xx-large; }

.lighter { font-weight: lighter; }
.darker { font-weight: 700; }
.dark { font-weight: 900; }

.roman
{
  font-family: Times, TimesNR, 'New Century Schoolbook', Garamond, 'New York', serif;
  margin-top: .5em;
  padding-top: .5em;
}

.nav
{
  font-family: Times, TimesNR, 'New Century Schoolbook', Garamond, 'New York', serif;
  margin-top: .5em;
  margin-left: .1em;
  margin-right: .1em;
  padding-top: .5em;
  font-size: 1.3em;
  font-weight: bold;
}

span.inline > a {
  margin-left: 1.5em;
  margin-right: 1.5em;
}

.scripture
{
  font-family: "Times New Roman", Times, TimesNR, 'New Century Schoolbook', Garamond, 'New York', serif;
  margin-top: .2em;
  padding-top: .2em;
  margin-bottom: .2em;
  padding-bottom: .2em;
  font-size: 1.2em;
  font-weight: bold;
  background-color: white;
  color: black;
}

/* text-shadow: -8px -8px 4px #AAA; (text-shadow: rightoffset downoffset width color; )*/
.shadowdropright { text-shadow: 3px 4px 3px #555;}
.raisedright { text-shadow: -8px -8px 4px #AAA;}
.dropleft { text-shadow: -8px -8px 4px #AAA;}
.raisedright { text-shadow: -8px -8px 4px #AAA;}

div > p 
{
  color: black;
  /* background-color: yellow; for testing */
}  

.borderoutset
{
  border-width: 7px;
  border-style: outset;
}
.borderinset
{
  border-width: 7px;
  border-style: inset;
}
.borderinsetMedium
{
  /*border-width: 7px;
  border-top-width: 7px;
  border-top-color: gray;
  border-right-width: 7px;
  border-bottom-color: gray;
  border-bottom-width: 7px;
  border-left-width: 7px;*/
  border-width: .2em;

  border-color: gray;
  border-style: inset;
}

.red { color: red; }
.black { color: #000000; }
.bgltgreen { background-color: #85e5a9; }

.bgwhite { background-color: white; } /* leave the redundancy for backward compatability */
.whitebg { background-color: white; }

/* padding settings which follow not to be confused with margin settings outside the element */
.pl1pct { padding-left: 1%; }
.pl2pct { padding-left: 2%; }
.pl3pct { padding-left: 3%; }

.mp2pct { margin: 2%; padding: 2%; }
.scootright {padding: 0 30px 0 0; }
.padl10px { padding: 0 10px 0 0; }

/* margin settings which follow not to be confused with padding inside the element */
.ml1pct { margin-left: 1%; }
.ml2pct { margin-left: 2%; }
.ml3pct { margin-left: 3%; }
.ml10pct { margin-left: 10%; }
.ml12pct { margin-left: 12%; }
.ml15pct { margin-left: 15%; }
.ml20pct { margin-left: 20%; }
.ml30pct { margin-left: 30%; }
.mlr1pct { margin-left: 1%; margin-right: 1%; }
.mlr2pct { margin-left: 2%; margin-right: 2%; }
.mlr3pct { margin-left: 3%; margin-right: 3%; }
.mtop1pct { margin-top: 1%; }
.vm2mm
{
  margin-top: 2mm;
  margin-bottom: 2mm;
}
.vmdot3em
{
  margin-top: .3em;
  margin-bottom: .3em;
}

.s, .sac  /*spread and centered (pseudo-headings mostly)*/
{
  display: block;
  letter-spacing: .5em;
  text-align: center;
  margin: .76em;
  background-color: #ebebeb;
}
.sacless
{
  display: block;
  /* font-size: .8em; */
  letter-spacing: .2em;
  text-align: center;
  margin: .76em;
  /* background-color: #ebebeb; */
}

div.blkblh { display: block; line-height: 1.4em; padding: 1px 3px 1px 3px; text-align: center; }

.srtable
{
  display: table;
  width: 100%;
  height: 100%;
  margin: 0%;
  padding: 0%;
  /* background-color: #000000; */
  table-layout: fixed;
}

/* experimental fun */
.expt
{
  display: table;
  width: 100%;
  height: 100%;
  margin: 0%;
  padding: 0%;
  background-color: red;
  table-layout: fixed;
}
.redbg { background-color: red; }
.bluebg { background-color: blue; }
.greenbg { background-color: green; }
.yellowbg { background-color: yellow; }
.blackbg { background-color: black; }
.whitebg { background-color: white; }

.row
{
  display: table-row;
  margin: 0%;
  padding: 0%;
  /* background-color: red; */
}
.fullrow
{
  display: table-row;
  margin: 0%;
  padding: 0%;
  width: 100%;
  /* background-color: red; */
}

.dc, .dcm2, .dcm3, .dcr
{
  display: table-cell;
  vertical-align: top;
  text-align: center;
  margin: 0%;
  padding: 0%;
  height: 100%;
}
div.dc { float: left; width: 21%; padding-top: .08em; background-color: yellow; }     /* background-color: yellow; */
div.dcm3 { float: none; width: 54%; }  /* background-color: red; */
div.dcm2 { width: 76%; }  /* background-color: #000000;  */
div.dcm2cell { width: 47%; }  /* background-color: #000000;  */
div.dcr  { float: right; width: 21%; padding-top: .08em; background-color: purple; }   /* background-color: purple; */
.inline { display: inline; }
.td05pct { width: 5%; }
.td10pct { width: 10%; }
.td20pct { width: 20%; }
.td23pct { width: 23%; }
.td24pct { width: 24%; }
.td25pct { width: 25%; }
.td30pct { width: 29%; }
.td33pct { width: 33%; }
.td40pct { width: 40%; }
.td45pct { width: 44%; }
.td50pct { width: 49%; }
.td60pct { width: 59%; }
.td70pct { width: 70%; }
.td80pct { width: 80%; }
.td90pct { width: 90%; }
.td100pct { width: 99%; }
.tbl100pct { width: 100%; }

td.td20pct td.td50pct { border-right: 2px ridge; border-left: 2px ridge; vertical-align: top; }

p.maroon
{
  color: maroon;
  font-size: small;
  line-height: 1em;
}

p.onePt5em {
  font-size: 1.5em;
}
p.onePt0em {
  font-size: 1.0em;
}
p.onePt25em {
  font-size: 1.25em;
}
p.onePt75em {
  font-size: 1.75em;
}
p.twoPt0em {
  font-size: 2.0em;
}
div.twoPt0em {
  font-size: 2.0em;
}

p.scripture em { font-style: italic; font-weight: normal; } /* toggles on at top level, for all paragraph content */
p.largertext { font-size: 2em; margin-top: 1em; }
span.raised { font-size: .4em; vertical-align: 50%; }
p.custom sub { vertical-align: 65%; font-size: 65%; }
p.custom sup { vertical-align: 65%; font-size: 65%; }

.dollars { vertical-align: 4%; font-size: 1.4em;} /* middle super*/
.pennies { vertical-align: super; font-size: .6em;} /* super 30%*/
.price {  vertical-align: -2em; float: right; padding-right: 4%; }
/* .price {  display: inline; padding-left: 46%; padding-right: 4%; }*/
.up  { vertical-align: -200%; }

.vam { vertical-align: middle; }
.vat { vertical-align: top; }
.vab { vertical-align: bottom; }
h3.img.vabtest { vertical-align: 50%;  }
.va50pct { vertical-align: 50%; }
.va10pct { vertical-align: 10%; }
.va03pct { vertical-align: -3%; }

.centeredVerticallyDisplacedRight {
  position: absolute;
  top: 50%;
  left: 125%;

/*  transform: translate(-50%, -50%); */
}
/* */
.hal { text-align: left; }
.hac { text-align: center; }

.vab { vertical-align: bottom; }
.superscript{font-size:xx-small; vertical-align: super;}
.subscript{font-size:xx-small; vertical-align: sub;}
.subscriptsmall{font-size: small; vertical-align:baseline;}

/*
<span class="subscript">....</span>
*/
/* <span class="blk lm small b"> */
span.inote { display: block; margin-left: 14px; font-size: small; font-weight: bold; }
p.customsmall { font-size: .8em; }

div.bordr
{
  border-style: solid;
  border-color: #9db6c7;
  border-width: .08em;
}

.borderoutset  { border-style: outset;  border-width: thin; }
.borderinset  { border-style: inset;  border-width: thin; }

em
{
  font-style: italic;
  font-size: inherit;
  font-weight: bold;
}
.shy
{
  font-style: normal;
}

.pgcontent { border-style: double; border-color: #DCE4EE; padding: .08em; }

.anchorHdr { margin-bottom: 0; padding-bottom: 0; }
.danglingHdr { margin-top: 0; padding-top: 0; }

h1
{
  font-size: 2em;
  background-color: #ebebeb;
  /* color: inherit;*/
  color: black;
  margin: .76em;
  font-weight: bold;
  text-align: center;
}

h2
{
  font-size: 1.3em;
  background-color: #ebebeb;
  margin: .76em;
  text-align: center;
}

h3
{
  font-size: 1em;
  background-color: #ebebeb;
  margin: .76em;
  text-align: center;
}
h3.bm1px
{
  /*font-size: 1em;
  background-color: #ebebeb;*/
  margin: .76em .01em .01em .01em;
  /* text-align: center;*/

}
h3.tm1px
{
  /*font-size: 1em;
  background-color: #ebebeb;*/
  margin: .01em .01em .76em .01em;
  /* text-align: center;*/

}
div#rcol > h3 
{
  font-size: 1em;
  background-color: #ebebeb;
  margin: .2em 0 0 .3em;
  padding-left: .6em;
  text-align: center;
}

h4
{
  font-size: .7em;
  background-color: #ebebeb;
  margin: .76em;
  text-align: center;
}
div#h4indentedJustified
{
  font-size: .9em;
  background-color: #ebebeb;
  padding-top: .4em;
  padding-bottom: .5em;
  padding-left: 1.2em;
  padding-right: 1.2em;
  text-align: justify;
}

h5
{
  font: 300% Helvetica,sans-serif;
  font-variant: small-caps;
  letter-spacing: 0.75em;
  text-align: right;
  padding-right: 1em;
  line-height: 1em;
}

h5:first-letter
{
  font-size: 200%;
  line-height: .08em;
  vertical-align: -200%;
}
h6
{
  font-size: .5em;
  background-color: #ebebeb;
  padding: .05em .1em .05em .1em;
  margin: .76em;
  text-align: center;
}
/* these 2 are for stacking a major hdr over a subhdr with little vertical space *between* them */
.hdr1
{
  display: block;
  /*
  background-color: #9db6c7;
  color: white;
  text-indent: .76em;
  */
  font-size: .90em;
  margin: 1.60% 0% 0% 0%;
  padding: 0%;
}
.hdr2
{
  display: block;
  /* background-color: #DCE4EE; */
  font-size: .70em;
  font-weight: bold;
  text-indent: .76em;
  margin: .4em 0 .08em 0;
  padding: 0%;
}
/* adjacent sibling approach to short stack of headers h1 and h2 */
h1 + h2 { margin: 0 0 .08em 0; }
h2 + h3 { margin: 0 0 .08em 0; }
/* end special header defs */

.pbb
{
  margin: 0 .06em .08em .4em;
  line-height: 1em;
}
.pbi
{
  margin: 0 .58em .58em .76em;
  line-height: 1em;
}

img.stk
{
  margin: 0 0 .32em 0;
  padding: 0 0 0 0;
}

img.topMarginPt32em
{
  margin-top: .32em;
}
img.bottom {
  vertical-align: text-bottom;
}
span.botMarginPt32em
{
  alignment-baseline: baseline;
  margin: 0 0 10px 0;
  padding: 0 0 10px 0;
  /* margin-bottom: .32em;
  padding-bottom: .32em; */
}

img.corners-r10px { border-radius: 10px 20px 20px 10px; }

div#lcol img.corners-r10px { padding-right: 4px;}

/* text-shadow: rightoffset downoffset width color;  */
div#lcol p.sac { text-shadow: 2px 2px 2px #777; font-size: 1.25em; }
img[src="../../imgs/monarchOfBooks.jpg"] { border-radius: 10px 20px 20px 10px; }
h1[id="leftMenuHdr"] { text-shadow: 3px 4px 3px #555; color: red; font-size: 2em; text-align: justify; } /* .shadowdropright { text-shadow: 3px 4px 3px #555;} */
h1[id="rightMenuHdr"] { text-shadow: 3px 4px 3px #555; color: red; font-size: 2em; text-align: justify; } /* .shadowdropright { text-shadow: 3px 4px 3px #555;} */

/* 
select all img elements matching the example wild cards; can be used on named elements and/or attributes of the element
img[src="alert.gif"] { "alert.gif" is the complete value of the src attribute of img element
img[src^="alert"] { "alert string at the beginning of the src attribute of img element
img[src$="gif"] { "gif" string at the end of the src attribute of the img element
img[src*="ert"] { "ert" string anywhere in the src attribute of img element
}
The ^ character dictates that this selector affects <img> elements only if they 
contain the string alert at the start of the src attribute value.
*/
h1[title^="The Book of Deuteronomy"] { font-size: 1.7em; }
h1[title^="The Song of Solomon"] { font-size: 1.7em; }
 
.left { text-align: left !important; }
div#rcol h3#rightInstructionsMenuNav { 
  border-style: groove;
  border-width: 6px;
  padding: 2px 3px 2px 0px;
  margin: 3px 3px 2px 7px;  /* left margin of 7 px slides the menu over away from left edge of rcol */
  border-color: #cee7f7;
  background-color: #85e5a9; 
}
div#lcol h3#leftInstructionsMenuNav { 
  border-style: groove;
  border-width: 6px;
  padding: 2px 3px 2px 0px;
  margin: 3px 3px 2px 0px;
  border-color: #cee7f7;
  background-color: #85e5a9; 
}

div#rcol p.sac { text-shadow: 2px 2px 2px #777; font-size: 1.25em; }

div#rcol img.corners-r10px {padding-left: 3px;}
/*  */

.ltgraybg { background-color: #ebebeb; }
.medgray { background-color: #e9e9e9; }
.dkgraybg { background-color: #9db6c7; }
.ltnavy { color: #033660; }
h2.bgltteal { background-color: #85e5a9; }
.mnavy { color: #003366; }
.dnavy { color: navy; }
.darkblue { color: #224498; }
.steelblue { color: #4682b4; }
.blue { color: #6e90e4; }
.dkmaroon { color: #972248; }
.pgdiv1
{
  color: #003366;
  line-height: 2em;
  border-style: none none solid none;
  border-width: 0 0 .08em 0;
  border-color: #DCE4EE;
  font-weight: bold;
}
.pgdiv2
{
  border-style: none none solid none;
  border-color: #9db6c7;
  border-width: .08em;
  line-height: 2em;
  font-weight: bold;
  margin: .08em;
}

/* border styles */
.thindouble
{
  border-style: double;
  border-color: #DCE4EE;
  border-width: .5em;
}
.dotted {border-style: dotted; }
.dashed {border-style: dashed; }
.solid {border-style: solid; }
.double {border-style: double; }
.thinline 
{
  border-style: inset inset inset inset;
  border-top-width: thin;
  border-left-width: thin;
  border-bottom-width: thin;
  border-right-width: thin;
}

.groovy
{
  border-style: groove;
  border-width: 8px;
  padding: 2px 3px 2px 0px;
  margin: 3px 3px 2px 0px;
  border-color: #cee7f7;
}
.groovysmall
{
  border-style: groove;
  border-width: 6px;
  padding: 2px 3px 2px 0px;
  margin: 3px 3px 2px 0px;
  border-color: #cee7f7;
}
.width80pct { width: 80%; }
.width70pct { width: 70%; }
.width60pct { width: 60%; }
.width20pct { width: 20%; }

.ridge {border-style: ridge; }
.inset {border-style: inset; }
.outset {border-style: outset; }

.tjust { text-align: justify; }
.pullq
{
  font: 125% Helvetica,Arial,sans-serif;
  text-align: center;
  border-top: medium #000000 solid;
  border-bottom: thin #000000 solid;
  margin: 1em;
  padding: 0.5em;
  background-color: #CCCCCC;
  width: 30%;
  float: right;
}
.authorcredits, .footnotes
{
  /*font: italic x-small Times,serif;*/
  font-family: Times, TimesNR, 'New Century Schoolbook', Garamond, 'New York', serif;
  font-size: .76em;
  border-top: .06em #000000 solid;
  padding-top: 0.25em;
  margin: 0.5em .5em 0 .5em;
  line-height: .98em;
}

.copyright
{
  font-family: Times, TimesNR, 'New Century Schoolbook', Garamond, 'New York', serif;
  font-size: .76em;
  color: navy;
  font-style: normal;
  margin: 4px 7px 0 7px;
  padding-top: 4px;
  line-height: .98em;
  border-top: 1px navy solid;
  /*
  border-bottom: .1em navy solid;
  */
  
  .sticky {
    position: sticky;
    top: 1%;
  }

  .fixed {
    position: fixed;
    top: 1%;
  }
  
}
/* text decorations 
NOTE THIS: On demo of these attributes on w3schools.com they use 
text-decoration-line. text-decoration is short hand for the property 
text-decoration-line but in Apache netbeans ide using the full name shows
as an error.  Either should work but using shorthand for now to avoid the
colorful, confusing "not known" warnings in the ide.
*/
span.oline { text-decoration: overline; }
.ovrln { text-decoration: overline; }
span.oline { text-decoration: overline; }
.oline {
  text-decoration: overline;
}

.uline {
  text-decoration: underline;
}

.thruline {
  text-decoration: line-through;
}

.olineuline {
  text-decoration: overline underline;
}
/*  */
.psuedotable
{
  text-align: left; /* psuedotable styling is not finished; do not use */
}