/* This is the built-in CSS used by xml2rfc without Google Fonts. */ /* NOTE: Changes at the bottom of this file overrides some earlier settings. Once the style has stabilized and has been adopted as an official RFC style, this can be consolidated so that style settings occur only in one place, but for now the contents of this file consists first of the initial CSS work as provided to the RFC Formatter (xml2rfc) work, followed by itemized and commented changes found necssary during the development of the v3 formatters. */ /* fonts */ /* @import url('https://fonts.googleapis.com/css?family=Noto+Sans'); /\* Sans-serif *\/ */ /* @import url('https://fonts.googleapis.com/css?family=Noto+Serif'); /\* Serif (print) *\/ */ /* @import url('https://fonts.googleapis.com/css?family=Roboto+Mono'); /\* Monospace *\/ */ @viewport { zoom: 1.0; width: extend-to-zoom; } @-ms-viewport { width: extend-to-zoom; zoom: 1.0; } /* general and mobile first */ html { } body { max-width: 90%; margin: 1.5em auto; color: #222; background-color: #fff; font-size: 14px; font-family: 'Noto Sans', Arial, Helvetica, sans-serif; line-height: 1.6; scroll-behavior: smooth; } .ears { display: none; } /* headings */ #title, h1, h2, h3, h4, h5, h6 { margin: 1em 0 0.5em; font-weight: bold; line-height: 1.3; } #title { clear: both; border-bottom: 1px solid #ddd; margin: 0 0 0.5em 0; padding: 1em 0 0.5em; } .author { padding-bottom: 4px; } h1 { font-size: 26px; margin: 1em 0; } h2 { font-size: 22px; margin-top: -20px; /* provide offset for in-page anchors */ padding-top: 33px; } h3 { font-size: 18px; margin-top: -36px; /* provide offset for in-page anchors */ padding-top: 42px; } h4 { font-size: 16px; margin-top: -36px; /* provide offset for in-page anchors */ padding-top: 42px; } h5, h6 { font-size: 14px; } #n-copyright-notice { border-bottom: 1px solid #ddd; padding-bottom: 1em; margin-bottom: 1em; } /* general structure */ p { padding: 0; margin: 0 0 1em 0; text-align: left; } div, span { position: relative; } div { margin: 0; } .alignRight.art-text { background-color: #f9f9f9; border: 1px solid #eee; border-radius: 3px; padding: 1em 1em 0; margin-bottom: 1.5em; } .alignRight.art-text pre { padding: 0; } .alignRight { margin: 1em 0; } .alignRight > *:first-child { border: none; margin: 0; float: right; clear: both; } .alignRight > *:nth-child(2) { clear: both; display: block; border: none; } svg { display: block; } .alignCenter.art-text { background-color: #f9f9f9; border: 1px solid #eee; border-radius: 3px; padding: 1em 1em 0; margin-bottom: 1.5em; } .alignCenter.art-text pre { padding: 0; } .alignCenter { margin: 1em 0; } .alignCenter > *:first-child { border: none; /* this isn't optimal, but it's an existence proof. PrinceXML doesn't support flexbox yet. */ display: table; margin: 0 auto; } /* lists */ ol, ul { padding: 0; margin: 0 0 1em 2em; } ol ol, ul ul, ol ul, ul ol { margin-left: 1em; } li { margin: 0 0 0.25em 0; } .ulCompact li { margin: 0; } ul.empty, .ulEmpty { list-style-type: none; } ul.empty li, .ulEmpty li { margin-top: 0.5em; } ul.ulBare, li.ulBare { margin-left: 0em !important; } ul.compact, .ulCompact, ol.compact, .olCompact { line-height: 100%; margin: 0 0 0 2em; } /* definition lists */ dl { } dl > dt { float: left; margin-right: 1em; } /* dl.nohang > dt { float: none; } */ dl > dd { margin-bottom: .8em; min-height: 1.3em; } dl.compact > dd, .dlCompact > dd { margin-bottom: 0em; } dl > dd > dl { margin-top: 0.5em; margin-bottom: 0em; } /* links */ a { text-decoration: none; } a[href] { color: #22e; /* Arlen: WCAG 2019 */ } a[href]:hover { background-color: #f2f2f2; } figcaption a[href], a[href].selfRef { color: #222; } /* XXX probably not this: a.selfRef:hover { background-color: transparent; cursor: default; } */ /* Figures */ tt, code, pre, code { background-color: #f9f9f9; font-family: 'Roboto Mono', monospace; } pre { border: 1px solid #eee; margin: 0; padding: 1em; } img { max-width: 100%; } figure { margin: 0; } figure blockquote { margin: 0.8em 0.4em 0.4em; } figcaption { font-style: italic; margin: 0 0 1em 0; } @media screen { pre { overflow-x: auto; max-width: 100%; max-width: calc(100% - 22px); } } /* aside, blockquote */ aside, blockquote { margin-left: 0; padding: 1.2em 2em; } blockquote { background-color: #f9f9f9; color: #111; /* Arlen: WCAG 2019 */ border: 1px solid #ddd; border-radius: 3px; margin: 1em 0; } cite { display: block; text-align: right; font-style: italic; } /* tables */ table { width: 100%; margin: 0 0 1em; border-collapse: collapse; border: 1px solid #eee; } th, td { text-align: left; vertical-align: top; padding: 0.5em 0.75em; } th { text-align: left; background-color: #e9e9e9; } tr:nth-child(2n+1) > td { background-color: #f5f5f5; } table caption { font-style: italic; margin: 0; padding: 0; text-align: left; } table p { /* XXX to avoid bottom margin on table row signifiers. If paragraphs should be allowed within tables more generally, it would be far better to select on a class. */ margin: 0; } /* pilcrow */ a.pilcrow { color: #666; /* Arlen: AHDJ 2019 */ text-decoration: none; visibility: hidden; user-select: none; -ms-user-select: none; -o-user-select:none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } @media screen { aside:hover > a.pilcrow, p:hover > a.pilcrow, blockquote:hover > a.pilcrow, div:hover > a.pilcrow, li:hover > a.pilcrow, pre:hover > a.pilcrow { visibility: visible; } a.pilcrow:hover { background-color: transparent; } } /* misc */ hr { border: 0; border-top: 1px solid #eee; } .bcp14 { font-variant: small-caps; } .role { font-variant: all-small-caps; } /* info block */ #identifiers { margin: 0; font-size: 0.9em; } #identifiers dt { width: 3em; clear: left; } #identifiers dd { float: left; margin-bottom: 0; } /* Fix PDF info block run off issue */ @media print { #identifiers dd { float: none; } } #identifiers .authors .author { display: inline-block; margin-right: 1.5em; } #identifiers .authors .org { font-style: italic; } /* The prepared/rendered info at the very bottom of the page */ .docInfo { color: #666; /* Arlen: WCAG 2019 */ font-size: 0.9em; font-style: italic; margin-top: 2em; } .docInfo .prepared { float: left; } .docInfo .prepared { float: right; } /* table of contents */ #toc { padding: 0.75em 0 2em 0; margin-bottom: 1em; } nav.toc ul { margin: 0 0.5em 0 0; padding: 0; list-style: none; } nav.toc li { line-height: 1.3em; margin: 0.75em 0; padding-left: 1.2em; text-indent: -1.2em; } /* references */ .references dt { text-align: right; font-weight: bold; min-width: 7em; } .references dd { margin-left: 8em; overflow: auto; } .refInstance { margin-bottom: 1.25em; } .references .ascii { margin-bottom: 0.25em; } /* index */ .index ul { margin: 0 0 0 1em; padding: 0; list-style: none; } .index ul ul { margin: 0; } .index li { margin: 0; text-indent: -2em; padding-left: 2em; padding-bottom: 5px; } .indexIndex { margin: 0.5em 0 1em; } .index a { font-weight: 700; } /* make the index two-column on all but the smallest screens */ @media (min-width: 600px) { .index ul { -moz-column-count: 2; -moz-column-gap: 20px; } .index ul ul { -moz-column-count: 1; -moz-column-gap: 0; } } /* authors */ address.vcard { font-style: normal; margin: 1em 0; } address.vcard .nameRole { font-weight: 700; margin-left: 0; } address.vcard .label { font-family: "Noto Sans",Arial,Helvetica,sans-serif; margin: 0.5em 0; } address.vcard .type { display: none; } .alternative-contact { margin: 1.5em 0 1em; } hr.addr { border-top: 1px dashed; margin: 0; color: #ddd; max-width: calc(100% - 16px); } /* temporary notes */ .rfcEditorRemove::before { position: absolute; top: 0.2em; right: 0.2em; padding: 0.2em; content: "The RFC Editor will remove this note"; color: #9e2a00; /* Arlen: WCAG 2019 */ background-color: #ffd; /* Arlen: WCAG 2019 */ } .rfcEditorRemove { position: relative; padding-top: 1.8em; background-color: #ffd; /* Arlen: WCAG 2019 */ border-radius: 3px; } .cref { background-color: #ffd; /* Arlen: WCAG 2019 */ padding: 2px 4px; } .crefSource { font-style: italic; } /* alternative layout for smaller screens */ @media screen and (max-width: 1023px) { body { padding-top: 2em; } #title { padding: 1em 0; } h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: -18px; /* provide offset for in-page anchors */ padding-top: 38px; } #identifiers dd { max-width: 60%; } #toc { position: fixed; z-index: 2; top: 0; right: 0; padding: 0; margin: 0; background-color: inherit; border-bottom: 1px solid #ccc; } #toc h2 { margin: -1px 0 0 0; padding: 4px 0 4px 6px; padding-right: 1em; min-width: 190px; font-size: 1.1em; text-align: right; background-color: #444; color: white; cursor: pointer; } #toc h2::before { /* css hamburger */ float: right; position: relative; width: 1em; height: 1px; left: -164px; margin: 6px 0 0 0; background: white none repeat scroll 0 0; box-shadow: 0 4px 0 0 white, 0 8px 0 0 white; content: ""; } #toc nav { display: none; padding: 0.5em 1em 1em; overflow: auto; height: calc(100vh - 48px); border-left: 1px solid #ddd; } } /* alternative layout for wide screens */ @media screen and (min-width: 1024px) { body { max-width: 724px; margin: 42px auto; padding-left: 1.5em; padding-right: 29em; } #toc { position: fixed; top: 42px; right: 42px; width: 25%; margin: 0; padding: 0 1em; z-index: 1; } #toc h2 { border-top: none; border-bottom: 1px solid #ddd; font-size: 1em; font-weight: normal; margin: 0; padding: 0.25em 1em 1em 0; } #toc nav { display: block; height: calc(90vh - 84px); bottom: 0; padding: 0.5em 0 0; overflow: auto; } img { /* future proofing */ max-width: 100%; height: auto; } } /* pagination */ @media print { body { width: 100%; } p { orphans: 3; widows: 3; } #n-copyright-notice { border-bottom: none; } #toc, #n-introduction { page-break-before: always; } #toc { border-top: none; padding-top: 0; } figure, pre { page-break-inside: avoid; } figure { overflow: scroll; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } h2+*, h3+*, h4+*, h5+*, h6+* { page-break-before: avoid; } pre { white-space: pre-wrap; word-wrap: break-word; font-size: 10pt; } table { border: 1px solid #ddd; } td { border-top: 1px solid #ddd; } } /* This is commented out here, as the string-set: doesn't pass W3C validation currently */ /* .ears thead .left { string-set: ears-top-left content(); } .ears thead .center { string-set: ears-top-center content(); } .ears thead .right { string-set: ears-top-right content(); } .ears tfoot .left { string-set: ears-bottom-left content(); } .ears tfoot .center { string-set: ears-bottom-center content(); } .ears tfoot .right { string-set: ears-bottom-right content(); } */ @page :first { padding-top: 0; @top-left { content: normal; border: none; } @top-center { content: normal; border: none; } @top-right { content: normal; border: none; } } @page { size: A4; margin-bottom: 45mm; padding-top: 20px; /* The follwing is commented out here, but set appropriately by in code, as the content depends on the document */ /* @top-left { content: 'Internet-Draft'; vertical-align: bottom; border-bottom: solid 1px #ccc; } @top-left { content: string(ears-top-left); vertical-align: bottom; border-bottom: solid 1px #ccc; } @top-center { content: string(ears-top-center); vertical-align: bottom; border-bottom: solid 1px #ccc; } @top-right { content: string(ears-top-right); vertical-align: bottom; border-bottom: solid 1px #ccc; } @bottom-left { content: string(ears-bottom-left); vertical-align: top; border-top: solid 1px #ccc; } @bottom-center { content: string(ears-bottom-center); vertical-align: top; border-top: solid 1px #ccc; } @bottom-right { content: '[Page ' counter(page) ']'; vertical-align: top; border-top: solid 1px #ccc; } */ } /* Changes introduced to fix issues found during implementation */ /* Make sure links are clickable even if overlapped by following H* */ a { z-index: 2; } /* Separate body from document info even without intervening H1 */ section { clear: both; } /* Top align author divs, to avoid names without organization dropping level with org names */ .author { vertical-align: top; } /* Leave room in document info to show Internet-Draft on one line */ #identifiers dt { width: 8em; } /* Don't waste quite as much whitespace between label and value in doc info */ #identifiers dd { margin-left: 1em; } /* Give floating toc a background color (needed when it's a div inside section */ #toc { background-color: white; } /* Make the collapsed ToC header render white on gray also when it's a link */ @media screen and (max-width: 1023px) { #toc h2 a, #toc h2 a:link, #toc h2 a:focus, #toc h2 a:hover, #toc a.toplink, #toc a.toplink:hover { color: white; background-color: #444; text-decoration: none; } } /* Give the bottom of the ToC some whitespace */ @media screen and (min-width: 1024px) { #toc { padding: 0 0 1em 1em; } } /* Style section numbers with more space between number and title */ .section-number { padding-right: 0.5em; } /* prevent monospace from becoming overly large */ tt, code, pre, code { font-size: 95%; } /* Fix the height/width aspect for ascii art*/ pre.sourcecode, .art-text pre { line-height: 1.12; } /* Add styling for a link in the ToC that points to the top of the document */ a.toplink { float: right; margin-right: 0.5em; } /* Fix the dl styling to match the RFC 7992 attributes */ dl > dt, dl.dlParallel > dt { float: left; margin-right: 1em; } dl.dlNewline > dt { float: none; } /* Provide styling for table cell text alignment */ table td.text-left, table th.text-left { text-align: left; } table td.text-center, table th.text-center { text-align: center; } table td.text-right, table th.text-right { text-align: right; } /* Make the alternative author contact informatio look less like just another author, and group it closer with the primary author contact information */ .alternative-contact { margin: 0.5em 0 0.25em 0; } address .non-ascii { margin: 0 0 0 2em; } /* With it being possible to set tables with alignment left, center, and right, { width: 100%; } does not make sense */ table { width: auto; } /* Avoid reference text that sits in a block with very wide left margin, because of a long floating dt label.*/ .references dd { overflow: visible; } /* Control caption placement */ caption { caption-side: bottom; } /* Limit the width of the author address vcard, so names in right-to-left script don't end up on the other side of the page. */ address.vcard { max-width: 30em; margin-right: auto; } /* For address alignment dependent on LTR or RTL scripts */ address div.left { text-align: left; } address div.right { text-align: right; } /* Provide table alignment support. We can't use the alignX classes above since they do unwanted things with caption and other styling. */ table.right { margin-left: auto; margin-right: 0; } table.center { margin-left: auto; margin-right: auto; } table.left { margin-left: 0; margin-right: auto; } /* Give the table caption label the same styling as the figcaption */ caption a[href] { color: #222; } @media print { .toplink { display: none; } /* avoid overwriting the top border line with the ToC header */ #toc { padding-top: 1px; } /* Avoid page breaks inside dl and author address entries */ .vcard { page-break-inside: avoid; } } /* Tweak the bcp14 keyword presentation */ .bcp14 { font-variant: small-caps; font-weight: bold; font-size: 0.9em; } /* Tweak the invisible space above H* in order not to overlay links in text above */ h2 { margin-top: -18px; /* provide offset for in-page anchors */ padding-top: 31px; } h3 { margin-top: -18px; /* provide offset for in-page anchors */ padding-top: 24px; } h4 { margin-top: -18px; /* provide offset for in-page anchors */ padding-top: 24px; } /* Float artwork pilcrow to the right */ @media screen { .artwork a.pilcrow { display: block; line-height: 0.7; margin-top: 0.15em; } } /* Make pilcrows on dd visible */ @media screen { dd:hover > a.pilcrow { visibility: visible; } } /* Make the placement of figcaption match that of a table's caption by removing the figure's added bottom margin */ .alignLeft.art-text, .alignCenter.art-text, .alignRight.art-text { margin-bottom: 0; } .alignLeft, .alignCenter, .alignRight { margin: 1em 0 0 0; } /* In print, the pilcrow won't show on hover, so prevent it from taking up space, possibly even requiring a new line */ @media print { a.pilcrow { display: none; } } /* Styling for the external metadata */ div#external-metadata { background-color: #eee; padding: 0.5em; margin-bottom: 0.5em; display: none; } div#internal-metadata { padding: 0.5em; /* to match the external-metadata padding */ } /* Styling for title RFC Number */ h1#rfcnum { clear: both; margin: 0 0 -1em; padding: 1em 0 0 0; } /* Make .olPercent look the same as
  1. */ dl.olPercent > dd { margin-bottom: 0.25em; min-height: initial; } /* Give aside some styling to set it apart */ aside { border-left: 1px solid #ddd; margin: 1em 0 1em 2em; padding: 0.2em 2em; } aside > dl, aside > ol, aside > ul, aside > table, aside > p { margin-bottom: 0.5em; } /* Additional page break settings */ @media print { figcaption, table caption { page-break-before: avoid; } } /* Font size adjustments for print */ @media print { body { font-size: 10pt; line-height: normal; max-width: 96%; } h1 { font-size: 1.72em; padding-top: 1.5em; } /* 1*1.2*1.2*1.2 */ h2 { font-size: 1.44em; padding-top: 1.5em; } /* 1*1.2*1.2 */ h3 { font-size: 1.2em; padding-top: 1.5em; } /* 1*1.2 */ h4 { font-size: 1em; padding-top: 1.5em; } h5, h6 { font-size: 1em; margin: initial; padding: 0.5em 0 0.3em; } } /* Sourcecode margin in print, when there's no pilcrow */ @media print { .artwork, .sourcecode { margin-bottom: 1em; } } /* Avoid narrow tables forcing too narrow table captions, which may render badly */ table { min-width: 20em; } /* ol type a */ ol.type-a { list-style-type: lower-alpha; } ol.type-A { list-style-type: upper-alpha; } ol.type-i { list-style-type: lower-roman; } ol.type-I { list-style-type: lower-roman; } /* Apply the print table and row borders in general, on request from the RPC, and increase the contrast between border and odd row background sligthtly */ table { border: 1px solid #ddd; } td { border-top: 1px solid #ddd; } tr:nth-child(2n+1) > td { background-color: #f8f8f8; } /* Use style rules to govern display of the TOC. */ @media screen and (max-width: 1023px) { #toc nav { display: none; } #toc.active nav { display: block; } } /* Add support for keepWithNext */ .keepWithNext { break-after: avoid-page; break-after: avoid-page; } /* Add support for keepWithPrevious */ .keepWithPrevious { break-before: avoid-page; } /* Change the approach to avoiding breaks inside artwork etc. */ figure, pre, table, .artwork, .sourcecode { break-before: auto; break-after: auto; } /* Avoid breaks between
    and
    */ dl { break-before: auto; break-inside: auto; } dt { break-before: auto; break-after: avoid-page; } dd { break-before: avoid-page; break-after: auto; orphans: 3; widows: 3 } span.break, dd.break { margin-bottom: 0; min-height: 0; break-before: auto; break-inside: auto; break-after: auto; } /* Undo break-before ToC */ @media print { #toc { break-before: auto; } } /* Text in compact lists should not get extra bottim margin space, since that would makes the list not compact */ ul.compact p, .ulCompact p, ol.compact p, .olCompact p { margin: 0; } /* But the list as a whole needs the extra space at the end */ section ul.compact, section .ulCompact, section ol.compact, section .olCompact { margin-bottom: 1em; /* same as p not within ul.compact etc. */ } /* The tt and code background above interferes with for instance table cell backgrounds. Changed to something a bit more selective. */ tt, code { background-color: transparent; } p tt, p code, li tt, li code { background-color: #f8f8f8; } /* Tweak the pre margin -- 0px doesn't come out well */ pre { margin-top: 0.5px; } /* Tweak the comact list text */ ul.compact, .ulCompact, ol.compact, .olCompact, dl.compact, .dlCompact { line-height: normal; } /* Don't add top margin for nested lists */ li > ul, li > ol, li > dl, dd > ul, dd > ol, dd > dl, dl > dd > dl { margin-top: initial; } /* Elements that should not be rendered on the same line as a
    */ /* This should match the element list in writer.text.TextWriter.render_dl() */ dd > div.artwork:first-child, dd > aside:first-child, dd > figure:first-child, dd > ol:first-child, dd > div:first-child > pre.sourcecode, dd > table:first-child, dd > ul:first-child { clear: left; } /* fix for weird browser behaviour when
    is empty */ dt+dd:empty::before{ content: "\00a0"; } /* Make paragraph spacing inside
  2. smaller than in body text, to fit better within the list */ li > p { margin-bottom: 0.5em } /* Don't let p margin spill out from inside list items */ li > p:last-of-type { margin-bottom: 0; }