#article {
    /* padding-bottom: 1rem; */
}

#article-body p.article-paragraph,
p.article-abstract,
ol,
li,
ul {
    font-size: 1.3rem;
    font-weight: 300;
    font-family: "Cardo", Serif;
    line-height: 1.3;
}

/** Added Aug 3 2023 for Q&A questions **/
#article-body p.article-paragraph-qanda
   {
    font-size: 1.5rem;
    font-family: "Oswald", Sans-serif;
    color: #33606F;
    line-height: 1.3;
    padding-top: 1.8rem;
}

/** for lists in-text **/
#article .indent {
    margin-left: 4rem;
    list-style-position: outside;
}

#article .by-letter {
    list-style-type: lower-alpha;
}

#article-body p.article-quote {
    font-size: 0.9em;
    font-weight: 300;
    font-family: "Cardo", Serif;
    font-style: italic;
    font-weight: 300;
    line-height: 1.2;
    color: #161616;
    padding: 0.2rem 2rem;
}

#article-body p.article-paragraph,
p.article-abstract {
    text-align: justify;
}

/** Added 20220911 **/
p.article-abstract {
    font-style: italic;
    font-size: 0.9em;
    color: #00303F;
}

#article table {
    margin: auto;
    width: 90%;
    font-size: 0.8em;
    font-family: "Oswald", Sans-serif;
    margin-bottom: 3rem;
}

#article th {
    height: 3rem;
    font-style: bold;
}

#article th, td {
    padding: 4px 6px 4px 6px;
    border-bottom: 1px solid #878787;
}

#article tr:nth-child(even) {
    background-color: #f2f2f2;
}

#article td.col1 {
    width: 30%;
}

img.article-inline, img.article-inline-fullpage, img.article-inline-small, img.article-inline-frm {
    display: block;
    max-width: 720px;
    border: 1px solid #ABABAB;
    padding: .5rem;
    margin: 4rem auto 1rem auto;
}

img.article-inline-small-nob {
    max-width: 300px;
    padding: .5rem;
    margin-top: 0.8rem;
    margin-left: 2rem;
}

img.article-inline-frm {
    display: block;
    max-width: 720px;
    padding: .4rem;
    border: 0;
    margin: auto;
    margin-top: 0.4rem;
}

#article ol,
li,
ul {
    font-size: 1.3rem;
}

#article ul {
    list-style-type: square;
    text-align: justify;
}

/** Feb 27 2023 **/
#article ol.letters {
    counter-reset: item;
}

#article ol.letters li {
        display: block;
        color: #990000;
}
#article ol.letters li:before {
        content: counters(item, ".") " ";
        counter-increment: item;
}
/** Feb 27 2023 **/

#article ol.article-reference, #article ol.article-reference-numbered {
}

#article .article-reference {
    list-style-type: none;
    hyphens: auto;
}

#article .article-reference-numbered {
    list-style-type: decimal;
    list-style-position: outside;
}

#article .article-figure-caption, #article .article-table-caption {
    font-weight: 300;
    font-size: 0.9rem;
}

#article .article-figure-caption {
    text-align: center;
    margin: 1rem 2rem 4rem 2rem;
}

#article .article-table-caption {
    text-align: center;
    margin: 4rem 2rem 1rem 2rem;
}

/** hr for blocks (author footnotes) **/
#article hr.article-hline {
    color: #676767;
}

/** Was only used in 0201-02-johnsen **/
/** ol.article-list-by-letter {
    list-style-type: lower-alpha;
    margin-left: 4rem;
    list-style-position: outside;
} **/

ol.article-list-by-number {
    list-style-type: decimal;
}

.article-reference li {
    font-size: 1.2rem;
    line-height: 1.2;
    margin-bottom: 0.6rem;
}

/** A 20210410 
    Author bio style
    Fix mobile issue
**/
#article-author p.article-author-bio {
    font-size: 1.1rem;
    margin-top: 0.4em;
    text-align: left;
    }

/** A 20210410 
    Cite as
    Fix mobile issue
**/
#article-colophon p.article-colophon, #article-colophon a.article-colophon {
    font-size: 1.3rem;
    text-align: left;
    }

@media screen {
    #article-footnotes {
       margin: 2em 0 2em 0;
       padding: 1em 0 1em 0;
    }
}


a.article-reference,
a.article-footnote {
    font-family: "Cardo", Serif;
    font-size: 0.8em;
    text-decoration: none;
    font-weight: 300;
    color: #000000;
    background-color: transparent;
}

a.article-footnote {
    background-color: #DDDDDD;
}

a.article-reference:hover,
a.article-footnote:hover {
    color: #FFFFFF;
    background-color: #931216;
}

/**	Author bio or info **/
p.article-author {
    font-size: 1.4em;
    font-variant: small-caps;
    margin-top: 2em;
    margin-bottom: 0;
}

.article-affiliation {
    font-size: 0.8em;
    padding-top: 0.4em;
    line-height: 1.6em;
    color: #676767;
}

/** Paragraph: normal text **/
p.article-paragraph {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/** Paragraph: image captions **/
p.article-image-caption {
}

/** Used for the footnotes **/
/** A 20210411 Added the id to actually have it work **/
#article-footnotes p.article-footnote {
    font-family: "Cardo", Serif;
    font-size: 1.1rem;
    text-align: left !important;
}

p.article-colophon, a.article-colophon {
}

.issn {
    color: #878787;
    background-color: transparent;
}

#article h2,
#article h3,
#article h4,
#article h5,
#article h6 {
    font-family: "Oswald", Sans-serif;
    color: #00303F;
    background-color: transparent;
}


h2.article-title {
    font-size: 2.2em;
    font-weight: normal;
    margin-top: 0.2em;
}

/** Used for article title when subtitle present **/
.hassubtitle {
    margin-bottom: 0.6rem;
}

h3.article-subtitle,
h2.article-author,
h3.article-author {
    font-size: 1.6em;
    line-height: 1.2;
    font-weight: 300;
    color: #30303F;
}

h2.article-author,
h3.article-author {
    margin-top: 1.2em;
    margin-bottom: 0;
    /**    margin-bottom: 0.1rem; **/
}

h3.article-subtitle {
    margin-top: 0.2em;
    margin-bottom: 0.6em;
}

h3.article-title-abstract,
h3.article-title-paragraph {
    font-size: 1.4em;
    margin-top: 1.2em;
    margin-bottom: 0.2em;
    font-weight: normal;
    line-height: 1.2;
}

h4.article-title-paragraph {
    font-size: 1.2em;
    margin-top: 1.2em;
    margin-bottom: 0.2em;
    font-weight: normal;
    line-height: 1.2;

}

#article-meta,
#article-author,
#article-body {
    clear: both;
}

#article-author {
    display: grid;
}


#article-colophon {
}

/**	For the TOC on article pages **/
#toc {
    background-color: #DDDDDD;
}

/* Avoids links in reference to overflow the container and break smaller layouts */
/* 2023 need fixing the printout which breaks wherever */
@media screen {

   ol.article-reference li {

    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-before: 3;
    hyphenate-after: 4; 
   }

}
/** MEDIA QUERIES **/

/** 320 px **/
@media screen and (min-width: 20rem) {

    /* debugging */
    /*
    body {
        border-top: 10px solid purple;
    } */

/* A  20210411 */

#info {
    margin-bottom: 2rem;
    margin-top: -3rem;
    }

    #article h2,
    #article h3,
    #article h4,
    #article h5,
    #article h6 {
        line-height: 1.2;
    }

/* Mar 2023 to fix printout */
    #article ol {
        margin: 0;
	padding-left: 2rem;
	margin-right: 1rem;
        list-style-position: outside;
    }

    #article ul {
        margin: 0;
        margin-left: 2rem;
        list-style: square;
    }

    #article ul li,
    #article ol li {
        margin-bottom: .6rem;
    }

/** A 20210411 Was 2rem **/
    #article ol {
        margin-left: 0;
        margin-bottom: 0;
   }

    #article ul li:first-child,
    #article ol li:first-child {
        margin-top: 1.2rem;
    }

    #article-author {
        max-width: 320px;
        grid-template-rows: 1fr;
        column-gap: 30px;
        margin-bottom: 24px
    }

/** A - 20210410 **/
    #article-author p.article-author-bio {
       font-size: 1rem;
       text-align: left;
    }

/** A 20210410 
    Cite as
    Fix mobile issue
**/
    #article-colophon p.article-colophon, #article-colophon a.article-colophon {
    font-size: 1.1rem;
    text-align: left;
    }

    #article ul {
        margin: 0;
        margin-left: 2rem;
   }
 
    img.article-inline {
        display: block;
        max-width: 300px;
        border: 1px solid #ABABAB;
        padding: .2rem;
        margin: 1rem auto 1rem auto;
    }

}

/** 450 px **/
@media screen and (min-width: 28.125rem) {

    /* debugging */
    /* body {
        border-top: 10px solid green;
    } */

    #article ul.page {
        margin: 0 1rem;
    }
/** A - 20210410 **/
    #article-author p.article-author-bio {
       font-size: 1rem;
       text-align: left;
    }

/** A 20210410 
    Cite as
    Fix mobile issue

**/
#article-colophon p.article-colophon, #article-colophon a.article-colophon {
    font-size: 1.1rem;
    text-align: left;
    }

    img.article-inline {
        display: block;
        max-width: 430px;
        border: 1px solid #ABABAB;
        padding: .3rem;
        margin: 1rem auto 1rem auto;
    }

}

/** 760 px **/
@media screen and (min-width:47.5rem) {

    /* debugging */
    /* body {
        border-top: 10px solid blue;
    } */

#article-colophon p.article-colophon, #article-colophon a.article-colophon {
    font-size: 1.3rem;
    text-align: left;
    }

    img.article-inline {
        display: block;
        max-width: 680px;
        border: 1px solid #ABABAB;
        padding: .4rem;
        margin: 2rem auto 1rem auto;
    }

}

/** 990 px **/
@media screen and (min-width: 61.875rem) {

    /* debugging */
    /* body {
        border-top: 10px solid yellow;
    } */

#info {
    margin-bottom: 2rem;
    margin-top: -2rem;
}

    #article ul {
        margin: 1em 3em 1em 3em;
    }

    .issue-article-index {
        margin-bottom: 4rem;
    }

    .issue-article-index .issue-article-author {
        margin-bottom: 0;
    }

    .issue-article-index .issue-article-title {
        margin: 1rem 0;
    }

    .issue-article-index .issue-article-subtitle {
        font-size: 1.8rem;
        margin: 1rem 0;
    }

    #article-author {
        max-width: 990px;
        grid-template-columns: 350px 506px;
        grid-template-rows: 1fr;
        column-gap: 30px;
        margin-bottom: 24px
    }

    #article-author .author-pic {
        grid-column-start: 1;
        max-width: 100%;
        align-self: center;
        justify-self: center;
    }

    #article-author .author-bio {
        align-self: center;
        justify-self: center;
    }

    img.article-inline {
        display: block;
        max-width: 880px;
        border: 1px solid #ABABAB;
        padding: .5rem;
        margin: 3rem auto 1rem auto;
    }

#article-colophon p.article-colophon, #article-colophon a.article-colophon {
    font-size: 1.3rem;
    text-align: left;
    }

}

/** 1920 px **/
@media screen and (min-width: 120rem) {

    img.article-inline {
        display: block;
        max-width: 880px;
        border: 1px solid #ABABAB;
        padding: .5rem;
        margin: 4rem auto 1rem auto;
    }

#article-colophon p.article-colophon, #article-colophon a.article-colophon {
    font-size: 1.3rem;
    text-align: left;
    }

}