@font-face { font-family: 'Open Sans'; src: url("fonts/OpenSans-Regular.ttf"); }
@font-face { font-family: 'Open Sans'; font-weight: 700; src: url("fonts/OpenSans-Bold.ttf"); }
@font-face { font-family: 'Oswald'; src: url("fonts/Oswald-Regular.ttf"); }
@font-face { font-family: 'Oswald'; font-weight: 700; src: url("fonts/Oswald-Bold.ttf"); }
@font-face { font-family: 'PT Sans'; src: url("fonts/PTSans-Regular.ttf"); }
@font-face { font-family: 'PT Sans'; font-weight: 700; src: url("fonts/PTSans-Bold.ttf"); }
@font-face { font-family: 'PT Sans Narrow'; src: url("fonts/PTSansNarrow-Regular.ttf"); }
@font-face { font-family: 'PT Sans Narrow'; font-weight: 700; src: url("fonts/PTSansNarrow-Bold.ttf"); }


body {
    max-width: 1500px;
    padding-left: 3em;
    padding-right: 3em;
    margin-left: auto;
    margin-right: auto;
    background-color: #F8F8F8;
    font: 11pt 'PT Sans', sans-serif;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

h1 { font-size: 14pt; padding-top: 1em; }
h2 { font-size: 13pt; }
h3 { font-size: 12pt; }
h4 { font-size: 11pt; }
ul { padding-left: 2em; }
ul.empty { list-style-type: none; }
ol { padding-left: 2em; }
a { color: #360; }
a:hover { color: #aa0; }

strong { font-weight: bold; }
em { font-style: italic; }
dt { font-weight: bold; font-style: italic; }
sup { vertical-align: super; font-size: 9pt; font-weight: 100; text-decoration: none; }
a > sup { font-weight: bold; }
a.anchor { display: block; position: relative; top: -50px; visibility: hidden; }
a.xref { font-weight: 700; text-decoration: underline dotted; }

span.term { font-style: italic; }
span.update { background: rgba(0,0,0, 0.1); color: red; }
span.tbd { background: rgba(0,0,0, 0.1); color: blue; font-weight: 700; }
span.question { background: blue; color: white; }
span.proposal { background: purple; color: white; }
span.issue { background: red; color: white; }
span.note { background: green; color: white; }
span.xref { background: rgba(0,0,0, 0.1); color: red; font-weight: 700; }

span.debug { background: red; color: white; font-size: 0.9em; font-weight: bold; }
span.todo { background: green; color: white; font-size: 0.9em; padding: 0.2em; }
span.red { color: #C00; }
span.blue { color: #00C; }

img.flow { float: left; padding-right: 1em; }
img.center { display: block; margin-left: auto; margin-right: auto; }
img.unit { width: 6em; height: 6em; }
img.float-left { float: left; margin-right: 1em; margin-bottom: 1em; }
img.float-right { float: right; margin-left: 1em; margin-bottom: 1em; }

p.center { text-align: center; }
p.image-caption { text-align: center; font-size: 10pt; }

div > ul { padding-left: 1em; }
div > ol { padding-left: 1em; }

div.dt-lists { background: #edd; padding: 1em; margin-top: 0.5em; margin-bottom: 0.5em; border: 1px dotted red; }

div.annotation-key { padding-bottom: 1em; border-bottom: 1px solid black; }
div.table-of-contents { padding-bottom: 1em; border-bottom: 1px solid black; }
div.table-of-contents ul { list-style-type: none; }

div.chapter { margin-top: 3em; border-bottom: 1px solid #240; font-size: 10pt; }
div.chapter-title { font-size: 24pt; font-weight: 700; color: #240; margin-bottom: 0.5em; }
div.chapter > div.columns { column-count: 2; column-gap: 3em; column-rule: 1px solid #240; padding-bottom: 1em; border-bottom: 1px solid black; }

div.commentary-title { margin-bottom: 0.25em; }
div.section-title { font-size: 14pt; color: #240; margin-bottom: 0.25em; }
div.section-commentary-title { margin-top: 0.5em; }
div.subsection-title { color: #240; margin-bottom: 0.25em; }
div.topic-title { font-size: 1.4em; color: #770; margin-bottom: 0.25em; }
div.bibliography { margin-top: 0.5em; margin-bottom: 0.5em }

div.introduction { margin-bottom: 0px; padding-bottom: 0px; border-bottom: 1px solid black; }
div.introduction > * { padding-left: 1em; }
div.introduction > ul { padding-left: 2em; }

div.primary-rules > div.section { column-count: 2; column-gap: 3em; column-rule: 1px solid gray; padding-bottom: 1em; border-bottom: 1px solid black; }

div.section { margin-bottom: 0px; padding-bottom: 0px; } /*break-inside: avoid; -webkit-column-break-inside: avoid; }*/
div.section > * { padding-left: 1em; }
div.section ul { padding-left: 2em; }
div.section ol { padding-left: 2em; }
div.section ul.no-bullet { list-style-type: none; }
div.section ol.lower-roman { list-style-type: lower-roman; }
div.section > h2 { padding-top: 1em; }
div.section > h3 { padding-top: 1em; }
div.section > h4 { padding-top: 1em; }
div.section > h5 { padding-top: 1em; }
div.section > h6 { padding-top: 1em; }

div.unit-type-3 {
    width: 100%;
    display: grid;
    grid: auto / 4em 1fr 4em;
    column-gap: 8px;
    align-items: stretch;
}
div.unit-type-3 > div.center { align-self: center; text-align: center; font-style: italic; }
div.unit-type-3 > div > img { width: 4em; height: 4em; }

div.unit-type-4 {
    width: 100%;
    display: grid;
    grid: auto / 4em 1fr 1fr 4em;
    column-gap: 8px;
    align-items: stretch;
}
div.unit-type-4 > div.left { align-self: start; text-align: left; font-style: italic; }
div.unit-type-4 > div.right { align-self: end; text-align: right; font-style: italic; }
div.unit-type-4 > div > img { width: 4em; height: 4em; }