/* =============================================================
Creed and Confession texts — /assets/css/creed.css
Shared styling for the full-text pages under /creeds/ and
/catechisms/. Link after main.css:
Matched to main.css:
accent #990909
headings #373737
body text #474747
muted #878787 / #a0a0a0
rules #d9d9d9 / #eee
panel fill #f6f6f6
display face 'Crimson Text', serif
UI face 'Open Sans', sans-serif
mobile break 736px
All classes are prefixed .creed- and everything is scoped under
.creed, so nothing here can affect another page.
============================================================= */
/* ---------- Wrapper ---------- */
.creed .creed-lede {
font-size: 1.1em;
color: #6f6f6f;
max-width: 40em;
margin-bottom: 1.5em;
}
.creed .creed-note {
font-family: 'Open Sans', sans-serif;
font-size: 0.85em;
line-height: 1.7em;
color: #878787;
background-color: #f6f6f6;
border-left: solid 3px #d9d9d9;
padding: 1em 1.25em;
margin-bottom: 2em;
}
.creed .creed-note p {
margin-bottom: 0.6em;
}
.creed .creed-note p:last-child {
margin-bottom: 0;
}
/* ---------- Contents ---------- */
.creed .creed-toc {
width: auto;
margin-bottom: 2.5em;
}
.creed .creed-toc-part {
font-family: 'Open Sans', sans-serif;
font-size: 0.75em;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #990909;
padding-bottom: 0.4em;
margin: 1.5em 0 0.75em 0;
border-bottom: solid 1px #eee;
}
.creed .creed-toc-part:first-of-type {
margin-top: 0.5em;
}
.creed ul.creed-list,
.creed ol.creed-list {
/* undoes #content ul { margin-left: 2em; list-style-type: circle } */
margin-left: 0;
margin-bottom: 0;
padding-left: 0;
list-style: none;
list-style-type: none;
-webkit-columns: 2 14em;
-moz-columns: 2 14em;
columns: 2 14em;
-webkit-column-gap: 2.5em;
-moz-column-gap: 2.5em;
column-gap: 2.5em;
}
.creed ul.creed-list li,
.creed ol.creed-list li {
padding: 0.15em 0;
font-size: 0.95em;
line-height: 1.5em;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.creed ul.creed-list li .creed-num {
display: inline-block;
min-width: 3.2em;
color: #a0a0a0;
font-family: 'Open Sans', sans-serif;
font-size: 0.85em;
}
.creed ul.creed-list.creed-list-single,
.creed ol.creed-list.creed-list-single {
-webkit-columns: 1;
-moz-columns: 1;
columns: 1;
}
/* ---------- Numbered lists ----------
Use an and let the browser render the numerals. Never hand-type
Roman numerals into the markup. Where numbering is not sequential
(e.g. a combined "III/IV" head), use the li value attribute:
- The Perseverance of the Saints
-------------------------------------------------------------- */
.creed ol.creed-roman,
.creed ol.creed-arabic {
margin-bottom: 0;
padding-left: 0;
}
.creed ol.creed-roman {
list-style-type: upper-roman;
list-style-position: outside;
margin-left: 3.2em;
}
.creed ol.creed-arabic {
list-style-type: decimal;
list-style-position: outside;
margin-left: 2.2em;
}
.creed ol.creed-roman > li,
.creed ol.creed-arabic > li {
padding: 0.15em 0;
line-height: 1.5em;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.creed ol.creed-roman::marker,
.creed ol.creed-roman > li::marker {
color: #a0a0a0;
font-family: 'Open Sans', sans-serif;
font-size: 0.85em;
}
/* ---------- Section and article headings ---------- */
.creed .creed-part {
font-size: 1.5em;
font-weight: bold;
color: #373737;
text-align: center;
padding-top: 1.25em;
margin: 1.5em 0 1.25em 0;
border-top: solid 2px #990909;
}
.creed .creed-article {
font-size: 1.15em;
font-weight: bold;
color: #990909;
margin: 2em 0 0.6em 0;
padding-bottom: 0.3em;
border-bottom: solid 1px #eee;
}
.creed .creed-article .creed-article-num {
font-family: 'Open Sans', sans-serif;
font-size: 0.75em;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #a0a0a0;
display: block;
margin-bottom: 0.2em;
}
/* ---------- Body text ---------- */
.creed .creed-text {
max-width: 40em;
margin-bottom: 1.1em;
text-align: left;
}
/* ---------- Signatures ---------- */
.creed .creed-signatures {
max-width: 40em;
margin: 2em 0;
padding-top: 1.25em;
border-top: solid 1px #d9d9d9;
}
.creed .creed-signatures p {
text-align: right;
margin-bottom: 0.35em;
font-style: italic;
}
.creed .creed-signatures .creed-signatures-head {
font-family: 'Open Sans', sans-serif;
font-size: 0.75em;
font-style: normal;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #a0a0a0;
text-align: left;
margin-bottom: 1em;
}
/* ---------- Back to contents ---------- */
.creed .creed-top {
max-width: 40em;
margin: 0.5em 0 0 0;
text-align: right;
}
.creed .creed-top a {
font-family: 'Open Sans', sans-serif;
font-size: 0.75em;
letter-spacing: 0.05em;
color: #a0a0a0;
}
.creed .creed-top a:hover {
color: #990909;
}
/* ---------- Mobile ---------- */
@media screen and (max-width: 736px) {
.creed ul.creed-list,
.creed ol.creed-list {
-webkit-columns: 1;
-moz-columns: 1;
columns: 1;
}
.creed .creed-part {
font-size: 1.3em;
}
.creed .creed-signatures p {
text-align: left;
}
}
/* ---------- Print ---------- */
@media print {
.creed .creed-top {
display: none;
}
.creed .creed-article,
.creed .creed-part {
page-break-after: avoid;
}
}
/* ---------- Rubrics and paragraph numbers ---------- */
/* Added for the Formula of Concord, which uses internal rubrics
(Status Controversiae / Affirmative / Negative Theses) and the
standard paragraph numbering by which it is cited. */
.creed .creed-rubric {
font-family: 'Open Sans', sans-serif;
font-size: 0.75em;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #a0a0a0;
max-width: 40em;
margin: 1.75em 0 0.75em 0;
}
.creed .creed-rubric em {
font-style: normal;
color: #990909;
}
.creed .creed-para-num {
float: left;
width: 2.5em;
margin-left: -2.75em;
font-family: 'Open Sans', sans-serif;
font-size: 0.7em;
line-height: 2.2em;
text-align: right;
color: #c4c4c4;
}
.creed .creed-numbered {
margin-left: 2.75em;
max-width: 38em;
}
@media screen and (max-width: 736px) {
.creed .creed-numbered {
margin-left: 0;
}
.creed .creed-para-num {
float: none;
display: inline;
width: auto;
margin: 0 0.5em 0 0;
line-height: inherit;
text-align: left;
}
}