/* yellow highlight */
.yh
{	BACKGROUND-COLOR: rgb(255,255,180);
}





th
{	FONT-SIZE:140%; font-family: arial, helvetica, verdana, sans-serif;
}






p
{	TEXT-ALIGN: justify; FONT-SIZE:110%; font-family: arial, helvetica, verdana, sans-serif;
}






cite
{	FONT-SIZE:90%; FONT-FAMILY: "times new roman", serif;
}






/* scripture heading in Word*/  /* remove font-family */
.ref
{	
    text-align: center;
    text-decoration: underline;
    font-weight: bold;
    /* FONT-FAMILY: "courier new", courier, monospace; */
    font-size: clamp(0.95rem, 2.75vw, 1.3rem);
}


/* scripture in Word*/
.word
{	COLOR: #993300; FONT-SIZE:160%; FONT-WEIGHT: bold; FONT-FAMILY: "courier new", courier, monospace;
    line-height: 120%;
}


/* parentheses within .word */
.wParen
{	COLOR: #000000; FONT-SIZE:75%; FONT-FAMILY: "courier new", courier, monospace;
}






/* scripture in short takes*/
.shTkScript
{	COLOR: #993300; FONT-WEIGHT: bold; FONT-FAMILY: "courier new", courier, monospace;
}


/* monospace sized 80% */
.mspc80
{	FONT-SIZE:80%; FONT-FAMILY: "courier new", courier, monospace;
}


.smCap
{	FONT-VARIANT: small-caps;
}


/* source of quote - a header */
.src
{	FONT-SIZE:150%; FONT-FAMILY: "times new roman", serif;
}


/* quotation - used in defs */
.quote
{	FONT-WEIGHT: 500; FONT-SIZE: 120%; FONT-FAMILY: "times new roman", serif;
}


/* <em> within class="quote" */
.quote em
{	FONT-WEIGHT: 600; 
}


/* used within class="quote". Changes font to sans-serif */
.sans80
{
    font-size: 80%;
    font-family: sans-serif;
}


/* keeps a visited link blue when used inside the <a> */
.blueVLink
{	COLOR: #6699ff;  FONT-WEIGHT: bold; TEXT-DECORATION: none;
}


A:link
{	COLOR: #6699ff; FONT-WEIGHT: bold; TEXT-DECORATION: none;
}


/* <b> within a link (for commas). Changes color to black. */
A:link b
{	COLOR: #000000;  
}


A:visited
{	FONT-WEIGHT: bold;  TEXT-DECORATION: none;
}


/* <b> within a link (for commas). Keeps color black. */
A:visited b
{	COLOR: #000000;
}



A:hover
{       TEXT-DECORATION: underline;
}



A:active
{	FONT-WEIGHT: bold;  TEXT-DECORATION: none;
}


/* breadcrumb */
.bc
{	
    color: #666666;
    font-weight: bold;
    font-family: serif;  
}


/* link within class "bc" */
.bc A:link
{
    color: #00376b; 
    font-weight: normal;
    font-family: "times new roman", serif; 
    text-decoration: underline; 
}


.bc A:hover
{
    color: #004d96; 
    font-weight: normal;
    font-family: "times new roman", serif; 
    text-decoration: underline; 
}


/* visited link within class "bc" */
.bc A:visited
{	COLOR: #333333;  TEXT-DECORATION: underline;  FONT-WEIGHT: normal;  FONT-FAMILY: "times new roman", serif;  
}


/* white font */
.whfont
{	FONT-SIZE:10%; COLOR: #fffffe; 
}


/* Short take in index */
.shTkMenu
{	FONT-SIZE: 10.5pt;  FONT-WEIGHT: bold; FONT-FAMILY: "times new roman", serif;  TEXT-ALIGN: LEFT;  
}


/* Header in index */
.idxHdr
{	FONT-SIZE: 18pt;  TEXT-ALIGN: CENTER;  FONT-FAMILY: arial, helvetica, verdana, sans-serif;  
}


/* 36pt link in index */
.menu36
{	FONT-SIZE: 36pt; FONT-FAMILY: "times new roman", serif;  
}


/* 26pt link in index */
.menu26
{	FONT-SIZE: 26pt; FONT-FAMILY: "times new roman", serif;  
}


/* 22pt link in index */
.menu22
{	FONT-SIZE: 22pt; FONT-FAMILY: "times new roman", serif;  
}



/* fader text area in index */
.idxFaderText
{	FONT-SIZE: 8pt;  TEXT-ALIGN: CENTER;  FONT-FAMILY: verdana, helvetica, aria, sans-serif;  
}


/* increase font size to 120% */
.size120
{	FONT-SIZE: 120%;
}


.fnote
{   FONT-SIZE: 80%; FONT-FAMILY: verdana, helvetica, arial, sans-serif;
}


/********************************** NEW ***********************************/


body, html
{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


#breadcrumb,
#breadcrumb .sep
{	
    color: #666666;
    font-weight: bold;
    font-family: "Baskerville", "Times New Roman", serif;
    font-size: clamp(0.85rem, 3vw, 1.15rem);
    white-space: nowrap;
}


#breadcrumb .sep
{
    margin: 0 0.3em 0 0.7em;
}


#breadcrumb A:link
{
    color: #00376b; 
    font-weight: normal;
    font-family: "Baskerville", "Times New Roman", serif;
    text-decoration: underline; 
}


#breadcrumb A:hover
{
    color: #004d96; 
    font-weight: normal;
    font-family: "Baskerville", "Times New Roman", serif; 
    text-decoration: underline; 
}


#breadcrumb A:visited
{	
    color: #00376b; 
    font-weight: normal;
    font-family: "Baskerville", "Times New Roman", serif;
    text-decoration: underline;
}


.footnote
{
    font-size: 80%;
    font-family: verdana, helvetica, arial, sans-serif;
}


@media (min-width: 768px) {
    article section h2 {
        text-decoration: underline;
    }
}


@media (max-width: 767.98px) {
    article h2 {
        font-size: 1.4rem;
    }
}


ol li {
    padding-left: 0.5em;
    padding-bottom: 1em;
}


.sans-80
{
    font-size: 80%;
    font-family: Helvetica, Georgia, Arial, sans-serif;
}


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


.size-90
{
    font-size: 90%;
}


.size-95
{
    font-size: 95%;
}


/********************************* index **********************************/

.brown-vertical-left
{
    box-shadow: inset 5px 0 0 0 #CBB1AB;
}


.brown-vertical-right
{
    box-shadow: inset -5px 0 0 0 #CBB1AB;
}


.footer
{
    font-size: 9pt;
    font-family: arial, helvetica, verdana, sans-serif;
}


img.side
{
    margin-top: 0;
    padding-top: 0;
    width: 2.75vw;
    height: 525px;
}


img.top
{
    margin-top: 0;
    padding-top: 0;
    max-width: 96%;
    width: 900px;
    height: 2.75vw;
}


.index-header
{
    font-size: 18pt;
    font-family: arial, helvetica, verdana, sans-serif;
}


.menu-26
{
    font-size: 26pt;
    font-family: serif;
}


.menu-30
{
    font-size: 30pt;
    font-family: serif;
}


.menu-42
{
    font-size: 42pt;
    font-family: serif;
}


.short-take-menu
{
    font-size: 12pt; 
    font-family: arial, helvetica, verdana, sans-serif;
    letter-spacing: 0.05em;
}


/****************************** index mobile ******************************/

.brown-horizontal
{
    height: 5px;
    width: 96%;
    background-color: #CBB1AB;
    box-shadow: inset 0 -2px 0 0 #CBB1AB;
}


.img-1-mobile
{
    transform: translate(-68%, -50%) rotate(-90deg);
}


.img-2-mobile
{
    width: 95vw;
    height: auto;
    display: block;
    margin: 0 2.5vw;
}


.img-2-mobile-row
{
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
}


.img-3-mobile
{
    transform: translate(-32%, -50%) rotate(90deg);
}


.img-rotate-row
{
    position: relative;
    width: 100vw;
    height: 10vw;
    overflow: hidden;
}


.img-rotate-row img
{
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    width: var(--static-height);
    transform-origin: center center;
}


.img-rotate-row img,
.img-2-mobile
{
    filter: brightness(80%) contrast(150%);
}


.index-mobile
{
    --main-width: 95vw;
    --static-height: calc(var(--main-width) * 55 / 900);
}


.line-80
{
    line-height: 0.8;
}


.menu-20
{
    font-size: 20pt;
    font-family: serif;
}


/****************************** short take & ref ******************************/

/* CHANGE ALL ref2 TO ref AFTER CUTOVER */
.short-take,
.ref2
{
    margin-left: 120px;
    max-width: 570px;
    text-align: left;
}


.short-take p,
.ref2 p
{
    font-family: Helvetica, Georgia, Arial, sans-serif;
}


.ref2 .footnote
{
    font-size: 85%;
}


.ref2 cite
{
    font-size: 100%;
}


.ref2 .quote
{
    line-height: 95%;
}


@media (max-width: 767.98px)
{
    .short-take,
    .ref2 {
        margin-left: 2%;
        margin-right: 2%;
        max-width: 96%;
    }
}

/************** JiajWord, StP_Word ***************/

.indent-2
{
    padding-left: 2rem;
}


.ref-address
{	
    text-align: center;
    text-decoration: underline;
    font-weight: bold;
    font-size: clamp(0.9rem, 2.75vw, 1.3rem);
}


.ref-header
{
    text-align: center;
    font-weight: bold;
    font-size: clamp(0.9rem, 2.75vw, 1.2rem);
}