/* These selectors moves things around to make space for the warning on the
   top of each page. Get rid of it when the warning goes away. */
.page-wrapper > .nav-chapters {
    /* add height for warning content & margin */
    top: 120px;
}

.sidebar-visible .content {
    top: 120px;
}

.nav-chapters {
    top: 120px;
}

p.warning {
    background-color: rgb(242, 222, 222);
    border-bottom-color: rgb(238, 211, 215);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-style: solid;
    border-bottom-width: 0.666667px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-left-color: rgb(238, 211, 215);
    border-left-style: solid;
    border-left-width: 0.666667px;
    border-right-color: rgb(238, 211, 215);
    border-right-style: solid;
    border-right-width: 0.666667px;
    border-top-color: rgb(238, 211, 215);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top-style: solid;
    border-top-width: 0.666667px;
    color: rgb(185, 74, 72);
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 30px;
    padding-bottom: 8px;
    padding-left: 14px;
    padding-right: 35px;
    padding-top: 8px;
}
p.warning strong {
    color: rgb(185, 74, 72)
}
p.warning a {
    color: rgb(0, 136, 204)
}

/* color hyperlinked inline code items identically to normal links */
.light a > .hljs {
    color: #4183c4;
}

.rust a > .hljs,
.coal a > .hljs,
.navy a > .hljs {
    color: #2b79a2;
}

.ayu a > .hljs {
    color: #0096cf;
}

/*
.parenthetical class used to keep e.g. "less-than symbol (<)" from wrapping
the end parenthesis onto its own line. Use in a span between the last word and
the parenthetical. So for this example, you'd use
```less-than <span class="parenthetical">symbol (`<`)</span>```
*/
.parenthetical {
    white-space: nowrap;
}