/* written by Jim Mangiafico, version 1.4, updated February 2020 */

body {
    --header-background-color: rgb(37, 91, 109);
    --header-background-color08: rgba(37, 91, 109, 0.8);
    --section-tab-text-color: rgb(95, 200, 217);
    --section-tab-background-color: rgb(238, 254, 255);
    --part-number-color: rgb(95, 200, 217);
    --part-title-color: rgb(37, 91, 109);
    --annotations-background-color: rgb(228, 233, 241);
    --annotations-headings-color: rgb(37, 91, 109);
    --narrative-text-color: rgb(37, 91, 109);
    --narrative-background-color: rgb(228, 233, 241);

    --green-banner-color: rgb(102, 222, 169);
    --red-banner-color: rgb(212, 72, 62);

    --change-color: #005482;
}

#content h1:first-of-type { text-transform: none }
#content h1:first-of-type { font-weight: bold }
#content h1.header { background: #fff; color: var(--header-background-color) }
#content h1.header a { color: inherit }
#content, .CurrentProjects, .LatestPublications, .YourViews { overflow: visible }

.new-blue-header {
    display: flex;
    justify-content: space-between;
    margin: 0 -20px;
    padding: 2cm 4cm 2cm 2cm;
    background-color: var(--header-background-color);
    color: white
}
.new-blue-header-left {
    padding-right: 1cm
}
.new-blue-header-title {
    font-size: larger;
    font-weight: bold
}
.new-blue-header img {
    width: 72pt
}

/* change banners */

.banner-up-to-date {
    margin: 0 -20px 1em;
    padding: 1em 2em;
    background-color: var(--green-banner-color);
}
.banner-not-up-to-date {
    margin: 0 -20px 1em;
    padding: 1em 2em;
    background-color: var(--red-banner-color);
}
.banner-not-up-to-date a {
    font-weight: normal !important;
    color: inherit !important;
    text-decoration: underline !important;
}

/* left section tabs */

.sect-tab { position: sticky; top :0; margin-left: calc(-2in - 20px); width: 2in; text-align: right }
.sect-tab > img { height: 36px; background-color: var(--section-tab-text-color) }
.sect-tab > span {
    display: inline-block;
    background-color: var(--section-tab-background-color);
    padding: 6pt 12pt;
    font-weight :bold;
    color:var(--section-tab-text-color)
}
.sect-tab + section { top: -2em; margin-top: 0 !important }

/* section headings */

section.part > .title > p {
    margin: 0 -20px;
    padding: 0 2em;
    background-color: whitesmoke;
    font-size: large;
    font-weight: bold;
}
section.part > .title > p:first-child {
    margin-top: 1em;
    padding-top: 1em;
    color: var(--part-number-color)
}
section.part > .title > p:nth-child(2) {
    color: var(--part-title-color)
}
section.part > .title > p:last-child {
    padding-bottom: 1em;
    margin-bottom: 1em;
}
section.part > .title > p > .commentary-reference {
    font-weight: bold
}

section.chapter > .title > p {
    margin: 0 calc(2em - 20px);
    padding: 0 0;
    font-size: larger;
    font-weight: bold;
}
section.chapter > .title > p:first-child {
    margin-top: 1em;
    padding-top: 1em;
    color: var(--part-number-color)
}
section.chapter > .title > p:nth-child(2) {
    color: var(--part-title-color)
}
section.chapter > .title > p:last-child {
    padding-bottom: 1em;
    border-bottom: thin solid var(--part-title-color);
    margin-bottom: 1em;
}
section.chapter > .title > p > .commentary-reference {
    font-weight: bold
}

section.schedule > .title > p {
    margin: 0 -20px;
    padding: 0 2em;
    background-color: whitesmoke;
    font-size: large;
    font-weight: bold;
}
section.schedule > .title > p:first-child {
    margin-top: 1em;
    padding-top: 1em;
    color: var(--part-number-color)
}
section.schedule > .title > p:nth-child(2) {
    color: var(--part-title-color)
}
section.schedule > .title > p:last-child {
    padding-bottom: 1em;
    margin-bottom: 1em;
}
section.schedule > .title > p > .commentary-reference {
    font-weight: bold
}

/* changes and annotations */

.change { color: var(--change-color) }

.annotations { background-color: var(--annotations-background-color) }
.annotations > p {
    padding-bottom: 0.5em;
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: var(---annotations-headings-color);
    font-size: larger;
    color: var(--annotations-headings-color)
}
.annotations > div > p {
    color: var(--annotations-headings-color)
}
.annotations > div > div > .shouldernote1 {
    color: var(--annotations-headings-color)
}

.narrative {
    padding: 1em;
    background-color: var(--narrative-background-color);
    color: var(--narrative-text-color)
}
.narrative + .narrative {
    margin-top: -2em    /* to compensate for padding */
}