lsd0004

LSD0004: R5N Distributed Hash Table
Log | Files | Refs

style.css (22482B)


      1 /* This is the built-in CSS used by xml2rfc without Google Fonts. */
      2 
      3 /*
      4 
      5   NOTE: Changes at the bottom of this file overrides some earlier settings.
      6 
      7   Once the style has stabilized and has been adopted as an official RFC style,
      8   this can be consolidated so that style settings occur only in one place, but
      9   for now the contents of this file consists first of the initial CSS work as
     10   provided to the RFC Formatter (xml2rfc) work, followed by itemized and
     11   commented changes found necssary during the development of the v3
     12   formatters.
     13 
     14 */
     15 
     16 /* fonts */
     17 /* @import url('https://fonts.googleapis.com/css?family=Noto+Sans'); /\* Sans-serif *\/ */
     18 /* @import url('https://fonts.googleapis.com/css?family=Noto+Serif'); /\* Serif (print) *\/ */
     19 /* @import url('https://fonts.googleapis.com/css?family=Roboto+Mono'); /\* Monospace *\/ */
     20 
     21 @viewport {
     22   zoom: 1.0;
     23   width: extend-to-zoom;
     24 }
     25 @-ms-viewport {
     26   width: extend-to-zoom;
     27   zoom: 1.0;
     28 }
     29 /* general and mobile first */
     30 html {
     31 }
     32 body {
     33   max-width: 90%;
     34   margin: 1.5em auto;
     35   color: #222;
     36   background-color: #fff;
     37   font-size: 14px;
     38   font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
     39   line-height: 1.6;
     40   scroll-behavior: smooth;
     41 }
     42 .ears {
     43   display: none;
     44 }
     45 
     46 /* headings */
     47 #title, h1, h2, h3, h4, h5, h6 {
     48   margin: 1em 0 0.5em;
     49   font-weight: bold;
     50   line-height: 1.3;
     51 }
     52 #title {
     53   clear: both;
     54   border-bottom: 1px solid #ddd;
     55   margin: 0 0 0.5em 0;
     56   padding: 1em 0 0.5em;
     57 }
     58 .author {
     59   padding-bottom: 4px;
     60 }
     61 h1 {
     62   font-size: 26px;
     63   margin: 1em 0;
     64 }
     65 h2 {
     66   font-size: 22px;
     67   margin-top: -20px;  /* provide offset for in-page anchors */
     68   padding-top: 33px;
     69 }
     70 h3 {
     71   font-size: 18px;
     72   margin-top: -36px;  /* provide offset for in-page anchors */
     73   padding-top: 42px;
     74 }
     75 h4 {
     76   font-size: 16px;
     77   margin-top: -36px;  /* provide offset for in-page anchors */
     78   padding-top: 42px;
     79 }
     80 h5, h6 {
     81   font-size: 14px;
     82 }
     83 #n-copyright-notice {
     84   border-bottom: 1px solid #ddd;
     85   padding-bottom: 1em;
     86   margin-bottom: 1em;
     87 }
     88 /* general structure */
     89 p {
     90   padding: 0;
     91   margin: 0 0 1em 0;
     92   text-align: left;
     93 }
     94 div, span {
     95   position: relative;
     96 }
     97 div {
     98   margin: 0;
     99 }
    100 .alignRight.art-text {
    101   background-color: #f9f9f9;
    102   border: 1px solid #eee;
    103   border-radius: 3px;
    104   padding: 1em 1em 0;
    105   margin-bottom: 1.5em;
    106 }
    107 .alignRight.art-text pre {
    108   padding: 0;
    109 }
    110 .alignRight {
    111   margin: 1em 0;
    112 }
    113 .alignRight > *:first-child {
    114   border: none;
    115   margin: 0;
    116   float: right;
    117   clear: both;
    118 }
    119 .alignRight > *:nth-child(2) {
    120   clear: both;
    121   display: block;
    122   border: none;
    123 }
    124 svg {
    125   display: block;
    126 }
    127 .alignCenter.art-text {
    128   background-color: #f9f9f9;
    129   border: 1px solid #eee;
    130   border-radius: 3px;
    131   padding: 1em 1em 0;
    132   margin-bottom: 1.5em;
    133 }
    134 .alignCenter.art-text pre {
    135   padding: 0;
    136 }
    137 .alignCenter {
    138   margin: 1em 0;
    139 }
    140 .alignCenter > *:first-child {
    141   border: none;
    142   /* this isn't optimal, but it's an existence proof.  PrinceXML doesn't
    143      support flexbox yet.
    144   */
    145   display: table;
    146   margin: 0 auto;
    147 }
    148 
    149 /* lists */
    150 ol, ul {
    151   padding: 0;
    152   margin: 0 0 1em 2em;
    153 }
    154 ol ol, ul ul, ol ul, ul ol {
    155   margin-left: 1em;
    156 }
    157 li {
    158   margin: 0 0 0.25em 0;
    159 }
    160 .ulCompact li {
    161   margin: 0;
    162 }
    163 ul.empty, .ulEmpty {
    164   list-style-type: none;
    165 }
    166 ul.empty li, .ulEmpty li {
    167   margin-top: 0.5em;
    168 }
    169 ul.ulBare, li.ulBare {
    170   margin-left: 0em !important;
    171 }
    172 ul.compact, .ulCompact,
    173 ol.compact, .olCompact {
    174   line-height: 100%;
    175   margin: 0 0 0 2em;
    176 }
    177 
    178 /* definition lists */
    179 dl {
    180 }
    181 dl > dt {
    182   float: left;
    183   margin-right: 1em;
    184 }
    185 /* 
    186 dl.nohang > dt {
    187   float: none;
    188 }
    189 */
    190 dl > dd {
    191   margin-bottom: .8em;
    192   min-height: 1.3em;
    193 }
    194 dl.compact > dd, .dlCompact > dd {
    195   margin-bottom: 0em;
    196 }
    197 dl > dd > dl {
    198   margin-top: 0.5em;
    199   margin-bottom: 0em;
    200 }
    201 
    202 /* links */
    203 a {
    204   text-decoration: none;
    205 }
    206 a[href] {
    207   color: #22e; /* Arlen: WCAG 2019 */
    208 }
    209 a[href]:hover {
    210   background-color: #f2f2f2;
    211 }
    212 figcaption a[href],
    213 a[href].selfRef {
    214   color: #222;
    215 }
    216 /* XXX probably not this:
    217 a.selfRef:hover {
    218   background-color: transparent;
    219   cursor: default;
    220 } */
    221 
    222 /* Figures */
    223 tt, code, pre, code {
    224   background-color: #f9f9f9;
    225   font-family: 'Roboto Mono', monospace;
    226 }
    227 pre {
    228   border: 1px solid #eee;
    229   margin: 0;
    230   padding: 1em;
    231 }
    232 img {
    233   max-width: 100%;
    234 }
    235 figure {
    236   margin: 0;
    237 }
    238 figure blockquote {
    239   margin: 0.8em 0.4em 0.4em;
    240 }
    241 figcaption {
    242   font-style: italic;
    243   margin: 0 0 1em 0;
    244 }
    245 @media screen {
    246   pre {
    247     overflow-x: auto;
    248     max-width: 100%;
    249     max-width: calc(100% - 22px);
    250   }
    251 }
    252 
    253 /* aside, blockquote */
    254 aside, blockquote {
    255   margin-left: 0;
    256   padding: 1.2em 2em;
    257 }
    258 blockquote {
    259   background-color: #f9f9f9;
    260   color: #111; /* Arlen: WCAG 2019 */
    261   border: 1px solid #ddd;
    262   border-radius: 3px;
    263   margin: 1em 0;
    264 }
    265 cite {
    266   display: block;
    267   text-align: right;
    268   font-style: italic;
    269 }
    270 
    271 /* tables */
    272 table {
    273   width: 100%;
    274   margin: 0 0 1em;
    275   border-collapse: collapse;
    276   border: 1px solid #eee;
    277 }
    278 th, td {
    279   text-align: left;
    280   vertical-align: top;
    281   padding: 0.5em 0.75em;
    282 }
    283 th {
    284   text-align: left;
    285   background-color: #e9e9e9;
    286 }
    287 tr:nth-child(2n+1) > td {
    288   background-color: #f5f5f5;
    289 }
    290 table caption {
    291   font-style: italic;
    292   margin: 0;
    293   padding: 0;
    294   text-align: left;
    295 }
    296 table p {
    297   /* XXX to avoid bottom margin on table row signifiers. If paragraphs should
    298      be allowed within tables more generally, it would be far better to select on a class. */
    299   margin: 0;
    300 }
    301 
    302 /* pilcrow */
    303 a.pilcrow {
    304   color: #666; /* Arlen: AHDJ 2019 */
    305   text-decoration: none;
    306   visibility: hidden;
    307   user-select: none;
    308   -ms-user-select: none;
    309   -o-user-select:none;
    310   -moz-user-select: none;
    311   -khtml-user-select: none;
    312   -webkit-user-select: none;
    313   -webkit-touch-callout: none;
    314 }
    315 @media screen {
    316   aside:hover > a.pilcrow,
    317   p:hover > a.pilcrow,
    318   blockquote:hover > a.pilcrow,
    319   div:hover > a.pilcrow,
    320   li:hover > a.pilcrow,
    321   pre:hover > a.pilcrow {
    322     visibility: visible;
    323   }
    324   a.pilcrow:hover {
    325     background-color: transparent;
    326   }
    327 }
    328 
    329 /* misc */
    330 hr {
    331   border: 0;
    332   border-top: 1px solid #eee;
    333 }
    334 .bcp14 {
    335   font-variant: small-caps;
    336 }
    337 
    338 .role {
    339   font-variant: all-small-caps;
    340 }
    341 
    342 /* info block */
    343 #identifiers {
    344   margin: 0;
    345   font-size: 0.9em;
    346 }
    347 #identifiers dt {
    348   width: 3em;
    349   clear: left;
    350 }
    351 #identifiers dd {
    352   float: left;
    353   margin-bottom: 0;
    354 }
    355 /* Fix PDF info block run off issue */
    356 @media print {
    357   #identifiers dd {
    358     float: none;
    359   }
    360 }
    361 #identifiers .authors .author {
    362   display: inline-block;
    363   margin-right: 1.5em;
    364 }
    365 #identifiers .authors .org {
    366   font-style: italic;
    367 }
    368 
    369 /* The prepared/rendered info at the very bottom of the page */
    370 .docInfo {
    371   color: #666; /* Arlen: WCAG 2019 */
    372   font-size: 0.9em;
    373   font-style: italic;
    374   margin-top: 2em;
    375 }
    376 .docInfo .prepared {
    377   float: left;
    378 }
    379 .docInfo .prepared {
    380   float: right;
    381 }
    382 
    383 /* table of contents */
    384 #toc  {
    385   padding: 0.75em 0 2em 0;
    386   margin-bottom: 1em;
    387 }
    388 nav.toc ul {
    389   margin: 0 0.5em 0 0;
    390   padding: 0;
    391   list-style: none;
    392 }
    393 nav.toc li {
    394   line-height: 1.3em;
    395   margin: 0.75em 0;
    396   padding-left: 1.2em;
    397   text-indent: -1.2em;
    398 }
    399 /* references */
    400 .references dt {
    401   text-align: right;
    402   font-weight: bold;
    403   min-width: 7em;
    404 }
    405 .references dd {
    406   margin-left: 8em;
    407   overflow: auto;
    408 }
    409 
    410 .refInstance {
    411   margin-bottom: 1.25em;
    412 }
    413 
    414 .references .ascii {
    415   margin-bottom: 0.25em;
    416 }
    417 
    418 /* index */
    419 .index ul {
    420   margin: 0 0 0 1em;
    421   padding: 0;
    422   list-style: none;
    423 }
    424 .index ul ul {
    425   margin: 0;
    426 }
    427 .index li {
    428   margin: 0;
    429   text-indent: -2em;
    430   padding-left: 2em;
    431   padding-bottom: 5px;
    432 }
    433 .indexIndex {
    434   margin: 0.5em 0 1em;
    435 }
    436 .index a {
    437   font-weight: 700;
    438 }
    439 /* make the index two-column on all but the smallest screens */
    440 @media (min-width: 600px) {
    441   .index ul {
    442     -moz-column-count: 2;
    443     -moz-column-gap: 20px;
    444   }
    445   .index ul ul {
    446     -moz-column-count: 1;
    447     -moz-column-gap: 0;
    448   }
    449 }
    450 
    451 /* authors */
    452 address.vcard {
    453   font-style: normal;
    454   margin: 1em 0;
    455 }
    456 
    457 address.vcard .nameRole {
    458   font-weight: 700;
    459   margin-left: 0;
    460 }
    461 address.vcard .label {
    462   font-family: "Noto Sans",Arial,Helvetica,sans-serif;
    463   margin: 0.5em 0;
    464 }
    465 address.vcard .type {
    466   display: none;
    467 }
    468 .alternative-contact {
    469   margin: 1.5em 0 1em;
    470 }
    471 hr.addr {
    472   border-top: 1px dashed;
    473   margin: 0;
    474   color: #ddd;
    475   max-width: calc(100% - 16px);
    476 }
    477 
    478 /* temporary notes */
    479 .rfcEditorRemove::before {
    480   position: absolute;
    481   top: 0.2em;
    482   right: 0.2em;
    483   padding: 0.2em;
    484   content: "The RFC Editor will remove this note";
    485   color: #9e2a00; /* Arlen: WCAG 2019 */
    486   background-color: #ffd; /* Arlen: WCAG 2019 */
    487 }
    488 .rfcEditorRemove {
    489   position: relative;
    490   padding-top: 1.8em;
    491   background-color: #ffd; /* Arlen: WCAG 2019 */
    492   border-radius: 3px;
    493 }
    494 .cref {
    495   background-color: #ffd; /* Arlen: WCAG 2019 */
    496   padding: 2px 4px;
    497 }
    498 .crefSource {
    499   font-style: italic;
    500 }
    501 /* alternative layout for smaller screens */
    502 @media screen and (max-width: 1023px) {
    503   body {
    504     padding-top: 2em;
    505   }
    506   #title {
    507     padding: 1em 0;
    508   }
    509   h1 {
    510     font-size: 24px;
    511   }
    512   h2 {
    513     font-size: 20px;
    514     margin-top: -18px;  /* provide offset for in-page anchors */
    515     padding-top: 38px;
    516   }
    517   #identifiers dd {
    518     max-width: 60%;
    519   }
    520   #toc {
    521     position: fixed;
    522     z-index: 2;
    523     top: 0;
    524     right: 0;
    525     padding: 0;
    526     margin: 0;
    527     background-color: inherit;
    528     border-bottom: 1px solid #ccc;
    529   }
    530   #toc h2 {
    531     margin: -1px 0 0 0;
    532     padding: 4px 0 4px 6px;
    533     padding-right: 1em;
    534     min-width: 190px;
    535     font-size: 1.1em;
    536     text-align: right;
    537     background-color: #444;
    538     color: white;
    539     cursor: pointer;
    540   }
    541   #toc h2::before { /* css hamburger */
    542     float: right;
    543     position: relative;
    544     width: 1em;
    545     height: 1px;
    546     left: -164px;
    547     margin: 6px 0 0 0;
    548     background: white none repeat scroll 0 0;
    549     box-shadow: 0 4px 0 0 white, 0 8px 0 0 white;
    550     content: "";
    551   }
    552   #toc nav {
    553     display: none;
    554     padding: 0.5em 1em 1em;
    555     overflow: auto;
    556     height: calc(100vh - 48px);
    557     border-left: 1px solid #ddd;
    558   }
    559 }
    560 
    561 /* alternative layout for wide screens */
    562 @media screen and (min-width: 1024px) {
    563   body {
    564     max-width: 724px;
    565     margin: 42px auto;
    566     padding-left: 1.5em;
    567     padding-right: 29em;
    568   }
    569   #toc {
    570     position: fixed;
    571     top: 42px;
    572     right: 42px;
    573     width: 25%;
    574     margin: 0;
    575     padding: 0 1em;
    576     z-index: 1;
    577   }
    578   #toc h2 {
    579     border-top: none;
    580     border-bottom: 1px solid #ddd;
    581     font-size: 1em;
    582     font-weight: normal;
    583     margin: 0;
    584     padding: 0.25em 1em 1em 0;
    585   }
    586   #toc nav {
    587     display: block;
    588     height: calc(90vh - 84px);
    589     bottom: 0;
    590     padding: 0.5em 0 0;
    591     overflow: auto;
    592   }
    593   img { /* future proofing */
    594     max-width: 100%;
    595     height: auto;
    596   }
    597 }
    598 
    599 /* pagination */
    600 @media print {
    601   body {
    602 
    603     width: 100%;
    604   }
    605   p {
    606     orphans: 3;
    607     widows: 3;
    608   }
    609   #n-copyright-notice {
    610     border-bottom: none;
    611   }
    612   #toc, #n-introduction {
    613     page-break-before: always;
    614   }
    615   #toc {
    616     border-top: none;
    617     padding-top: 0;
    618   }
    619   figure, pre {
    620     page-break-inside: avoid;
    621   }
    622   figure {
    623     overflow: scroll;
    624   }
    625   h1, h2, h3, h4, h5, h6 {
    626     page-break-after: avoid;
    627   }
    628   h2+*, h3+*, h4+*, h5+*, h6+* {
    629     page-break-before: avoid;
    630   }
    631   pre {
    632     white-space: pre-wrap;
    633     word-wrap: break-word;
    634     font-size: 10pt;
    635   }
    636   table {
    637     border: 1px solid #ddd;
    638   }
    639   td {
    640     border-top: 1px solid #ddd;
    641   }
    642 }
    643 
    644 /* This is commented out here, as the string-set: doesn't
    645    pass W3C validation currently */
    646 /*
    647 .ears thead .left {
    648   string-set: ears-top-left content();
    649 }
    650 
    651 .ears thead .center {
    652   string-set: ears-top-center content();
    653 }
    654 
    655 .ears thead .right {
    656   string-set: ears-top-right content();
    657 }
    658 
    659 .ears tfoot .left {
    660   string-set: ears-bottom-left content();
    661 }
    662 
    663 .ears tfoot .center {
    664   string-set: ears-bottom-center content();
    665 }
    666 
    667 .ears tfoot .right {
    668   string-set: ears-bottom-right content();
    669 }
    670 */
    671 
    672 @page :first {
    673   padding-top: 0;
    674   @top-left {
    675     content: normal;
    676     border: none;
    677   }
    678   @top-center {
    679     content: normal;
    680     border: none;
    681   }
    682   @top-right {
    683     content: normal;
    684     border: none;
    685   }
    686 }
    687 
    688 @page {
    689   size: A4;
    690   margin-bottom: 45mm;
    691   padding-top: 20px;
    692   /* The follwing is commented out here, but set appropriately by in code, as
    693      the content depends on the document */
    694   /*
    695   @top-left {
    696     content: 'Internet-Draft';
    697     vertical-align: bottom;
    698     border-bottom: solid 1px #ccc;
    699   }
    700   @top-left {
    701     content: string(ears-top-left);
    702     vertical-align: bottom;
    703     border-bottom: solid 1px #ccc;
    704   }
    705   @top-center {
    706     content: string(ears-top-center);
    707     vertical-align: bottom;
    708     border-bottom: solid 1px #ccc;
    709   }
    710   @top-right {
    711     content: string(ears-top-right);
    712     vertical-align: bottom;
    713     border-bottom: solid 1px #ccc;
    714   }
    715   @bottom-left {
    716     content: string(ears-bottom-left);
    717     vertical-align: top;
    718     border-top: solid 1px #ccc;
    719   }
    720   @bottom-center {
    721     content: string(ears-bottom-center);
    722     vertical-align: top;
    723     border-top: solid 1px #ccc;
    724   }
    725   @bottom-right {
    726       content: '[Page ' counter(page) ']';
    727       vertical-align: top;
    728       border-top: solid 1px #ccc;
    729   }
    730   */
    731 
    732 }
    733 
    734 /* Changes introduced to fix issues found during implementation */
    735 /* Make sure links are clickable even if overlapped by following H* */
    736 a {
    737   z-index: 2;
    738 }
    739 /* Separate body from document info even without intervening H1 */
    740 section {
    741   clear: both;
    742 }
    743 
    744 
    745 /* Top align author divs, to avoid names without organization dropping level with org names */
    746 .author {
    747   vertical-align: top;
    748 }
    749 
    750 /* Leave room in document info to show Internet-Draft on one line */
    751 #identifiers dt {
    752   width: 8em;
    753 }
    754 
    755 /* Don't waste quite as much whitespace between label and value in doc info */
    756 #identifiers dd {
    757   margin-left: 1em;
    758 }
    759 
    760 /* Give floating toc a background color (needed when it's a div inside section */
    761 #toc {
    762   background-color: white;
    763 }
    764 
    765 /* Make the collapsed ToC header render white on gray also when it's a link */
    766 @media screen and (max-width: 1023px) {
    767   #toc h2 a,
    768   #toc h2 a:link,
    769   #toc h2 a:focus,
    770   #toc h2 a:hover,
    771   #toc a.toplink,
    772   #toc a.toplink:hover {
    773     color: white;
    774     background-color: #444;
    775     text-decoration: none;
    776   }
    777 }
    778 
    779 /* Give the bottom of the ToC some whitespace */
    780 @media screen and (min-width: 1024px) {
    781   #toc {
    782     padding: 0 0 1em 1em;
    783   }
    784 }
    785 
    786 /* Style section numbers with more space between number and title */
    787 .section-number {
    788   padding-right: 0.5em;
    789 }
    790 
    791 /* prevent monospace from becoming overly large */
    792 tt, code, pre, code {
    793   font-size: 95%;
    794 }
    795 
    796 /* Fix the height/width aspect for ascii art*/
    797 pre.sourcecode,
    798 .art-text pre {
    799   line-height: 1.12;
    800 }
    801 
    802 
    803 /* Add styling for a link in the ToC that points to the top of the document */
    804 a.toplink {
    805   float: right;
    806   margin-right: 0.5em;
    807 }
    808 
    809 /* Fix the dl styling to match the RFC 7992 attributes */
    810 dl > dt,
    811 dl.dlParallel > dt {
    812   float: left;
    813   margin-right: 1em;
    814 }
    815 dl.dlNewline > dt {
    816   float: none;
    817 }
    818 
    819 /* Provide styling for table cell text alignment */
    820 table td.text-left,
    821 table th.text-left {
    822   text-align: left;
    823 }
    824 table td.text-center,
    825 table th.text-center {
    826   text-align: center;
    827 }
    828 table td.text-right,
    829 table th.text-right {
    830   text-align: right;
    831 }
    832 
    833 /* Make the alternative author contact informatio look less like just another
    834    author, and group it closer with the primary author contact information */
    835 .alternative-contact {
    836   margin: 0.5em 0 0.25em 0;
    837 }
    838 address .non-ascii {
    839   margin: 0 0 0 2em;
    840 }
    841 
    842 /* With it being possible to set tables with alignment
    843   left, center, and right, { width: 100%; } does not make sense */
    844 table {
    845   width: auto;
    846 }
    847 
    848 /* Avoid reference text that sits in a block with very wide left margin,
    849    because of a long floating dt label.*/
    850 .references dd {
    851   overflow: visible;
    852 }
    853 
    854 /* Control caption placement */
    855 caption {
    856   caption-side: bottom;
    857 }
    858 
    859 /* Limit the width of the author address vcard, so names in right-to-left
    860    script don't end up on the other side of the page. */
    861 
    862 address.vcard {
    863   max-width: 30em;
    864   margin-right: auto;
    865 }
    866 
    867 /* For address alignment dependent on LTR or RTL scripts */
    868 address div.left {
    869   text-align: left;
    870 }
    871 address div.right {
    872   text-align: right;
    873 }
    874 
    875 /* Provide table alignment support.  We can't use the alignX classes above
    876    since they do unwanted things with caption and other styling. */
    877 table.right {
    878  margin-left: auto;
    879  margin-right: 0;
    880 }
    881 table.center {
    882  margin-left: auto;
    883  margin-right: auto;
    884 }
    885 table.left {
    886  margin-left: 0;
    887  margin-right: auto;
    888 }
    889 
    890 /* Give the table caption label the same styling as the figcaption */
    891 caption a[href] {
    892   color: #222;
    893 }
    894 
    895 @media print {
    896   .toplink {
    897     display: none;
    898   }
    899 
    900   /* avoid overwriting the top border line with the ToC header */
    901   #toc {
    902     padding-top: 1px;
    903   }
    904 
    905   /* Avoid page breaks inside dl and author address entries */
    906   .vcard {
    907     page-break-inside: avoid;
    908   }
    909 
    910 }
    911 /* Tweak the bcp14 keyword presentation */
    912 .bcp14 {
    913   font-variant: small-caps;
    914   font-weight: bold;
    915   font-size: 0.9em;
    916 }
    917 /* Tweak the invisible space above H* in order not to overlay links in text above */
    918  h2 {
    919   margin-top: -18px;  /* provide offset for in-page anchors */
    920   padding-top: 31px;
    921  }
    922  h3 {
    923   margin-top: -18px;  /* provide offset for in-page anchors */
    924   padding-top: 24px;
    925  }
    926  h4 {
    927   margin-top: -18px;  /* provide offset for in-page anchors */
    928   padding-top: 24px;
    929  }
    930 /* Float artwork pilcrow to the right */
    931 @media screen {
    932   .artwork a.pilcrow {
    933     display: block;
    934     line-height: 0.7;
    935     margin-top: 0.15em;
    936   }
    937 }
    938 /* Make pilcrows on dd visible */
    939 @media screen {
    940   dd:hover > a.pilcrow {
    941     visibility: visible;
    942   }
    943 }
    944 /* Make the placement of figcaption match that of a table's caption
    945    by removing the figure's added bottom margin */
    946 .alignLeft.art-text,
    947 .alignCenter.art-text,
    948 .alignRight.art-text {
    949    margin-bottom: 0;
    950 }
    951 .alignLeft,
    952 .alignCenter,
    953 .alignRight {
    954   margin: 1em 0 0 0;
    955 }
    956 /* In print, the pilcrow won't show on hover, so prevent it from taking up space,
    957    possibly even requiring a new line */
    958 @media print {
    959   a.pilcrow {
    960     display: none;
    961   }
    962 }
    963 /* Styling for the external metadata */
    964 div#external-metadata {
    965   background-color: #eee;
    966   padding: 0.5em;
    967   margin-bottom: 0.5em;
    968   display: none;
    969 }
    970 div#internal-metadata {
    971   padding: 0.5em;                       /* to match the external-metadata padding */
    972 }
    973 /* Styling for title RFC Number */
    974 h1#rfcnum {
    975   clear: both;
    976   margin: 0 0 -1em;
    977   padding: 1em 0 0 0;
    978 }
    979 /* Make .olPercent look the same as <ol><li> */
    980 dl.olPercent > dd {
    981   margin-bottom: 0.25em;
    982   min-height: initial;
    983 }
    984 /* Give aside some styling to set it apart */
    985 aside {
    986   border-left: 1px solid #ddd;
    987   margin: 1em 0 1em 2em;
    988   padding: 0.2em 2em;
    989 }
    990 aside > dl,
    991 aside > ol,
    992 aside > ul,
    993 aside > table,
    994 aside > p {
    995   margin-bottom: 0.5em;
    996 }
    997 /* Additional page break settings */
    998 @media print {
    999   figcaption, table caption {
   1000     page-break-before: avoid;
   1001   }
   1002 }
   1003 /* Font size adjustments for print */
   1004 @media print {
   1005   body  { font-size: 10pt;      line-height: normal; max-width: 96%; }
   1006   h1    { font-size: 1.72em;    padding-top: 1.5em; } /* 1*1.2*1.2*1.2 */
   1007   h2    { font-size: 1.44em;    padding-top: 1.5em; } /* 1*1.2*1.2 */
   1008   h3    { font-size: 1.2em;     padding-top: 1.5em; } /* 1*1.2 */
   1009   h4    { font-size: 1em;       padding-top: 1.5em; }
   1010   h5, h6 { font-size: 1em;      margin: initial; padding: 0.5em 0 0.3em; }
   1011 }
   1012 /* Sourcecode margin in print, when there's no pilcrow */
   1013 @media print {
   1014   .artwork,
   1015   .sourcecode {
   1016     margin-bottom: 1em;
   1017   }
   1018 }
   1019 /* Avoid narrow tables forcing too narrow table captions, which may render badly */
   1020 table {
   1021   min-width: 20em;
   1022 }
   1023 /* ol type a */
   1024 ol.type-a { list-style-type: lower-alpha; }
   1025 ol.type-A { list-style-type: upper-alpha; }
   1026 ol.type-i { list-style-type: lower-roman; }
   1027 ol.type-I { list-style-type: lower-roman; }
   1028 /* Apply the print table and row borders in general, on request from the RPC,
   1029 and increase the contrast between border and odd row background sligthtly */
   1030 table {
   1031   border: 1px solid #ddd;
   1032 }
   1033 td {
   1034   border-top: 1px solid #ddd;
   1035 }
   1036 tr:nth-child(2n+1) > td {
   1037   background-color: #f8f8f8;
   1038 }
   1039 /* Use style rules to govern display of the TOC. */
   1040 @media screen and (max-width: 1023px) {
   1041   #toc nav { display: none; }
   1042   #toc.active nav { display: block; }
   1043 }
   1044 /* Add support for keepWithNext */
   1045 .keepWithNext {
   1046   break-after: avoid-page;
   1047   break-after: avoid-page;
   1048 }
   1049 /* Add support for keepWithPrevious */
   1050 .keepWithPrevious {
   1051   break-before: avoid-page;
   1052 }
   1053 /* Change the approach to avoiding breaks inside artwork etc. */
   1054 figure, pre, table, .artwork, .sourcecode  {
   1055   break-before: auto;
   1056   break-after: auto;
   1057 }
   1058 /* Avoid breaks between <dt> and <dd> */
   1059 dl {
   1060   break-before: auto;
   1061   break-inside: auto;
   1062 }
   1063 dt {
   1064   break-before: auto;
   1065   break-after: avoid-page;
   1066 }
   1067 dd {
   1068   break-before: avoid-page;
   1069   break-after: auto;
   1070   orphans: 3;
   1071   widows: 3
   1072 }
   1073 span.break, dd.break {
   1074   margin-bottom: 0;
   1075   min-height: 0;
   1076   break-before: auto;
   1077   break-inside: auto;
   1078   break-after: auto;
   1079 }
   1080 /* Undo break-before ToC */
   1081 @media print {
   1082   #toc {
   1083     break-before: auto;
   1084   }
   1085 }
   1086 /* Text in compact lists should not get extra bottim margin space,
   1087    since that would makes the list not compact */
   1088 ul.compact p, .ulCompact p,
   1089 ol.compact p, .olCompact p {
   1090  margin: 0;
   1091 }
   1092 /* But the list as a whole needs the extra space at the end */
   1093 section ul.compact,
   1094 section .ulCompact,
   1095 section ol.compact,
   1096 section .olCompact {
   1097   margin-bottom: 1em;                    /* same as p not within ul.compact etc. */
   1098 }
   1099 /* The tt and code background above interferes with for instance table cell
   1100    backgrounds.  Changed to something a bit more selective. */
   1101 tt, code {
   1102   background-color: transparent;
   1103 }
   1104 p tt, p code, li tt, li code {
   1105   background-color: #f8f8f8;
   1106 }
   1107 /* Tweak the pre margin -- 0px doesn't come out well */
   1108 pre {
   1109    margin-top: 0.5px;
   1110 }
   1111 /* Tweak the comact list text */
   1112 ul.compact, .ulCompact,
   1113 ol.compact, .olCompact,
   1114 dl.compact, .dlCompact {
   1115   line-height: normal;
   1116 }
   1117 /* Don't add top margin for nested lists */
   1118 li > ul, li > ol, li > dl,
   1119 dd > ul, dd > ol, dd > dl,
   1120 dl > dd > dl {
   1121   margin-top: initial;
   1122 }
   1123 /* Elements that should not be rendered on the same line as a <dt> */
   1124 /* This should match the element list in writer.text.TextWriter.render_dl() */
   1125 dd > div.artwork:first-child,
   1126 dd > aside:first-child,
   1127 dd > figure:first-child,
   1128 dd > ol:first-child,
   1129 dd > div:first-child > pre.sourcecode,
   1130 dd > table:first-child,
   1131 dd > ul:first-child {
   1132   clear: left;
   1133 }
   1134 /* fix for weird browser behaviour when <dd/> is empty */
   1135 dt+dd:empty::before{
   1136   content: "\00a0";
   1137 }
   1138 /* Make paragraph spacing inside <li> smaller than in body text, to fit better within the list */
   1139 li > p {
   1140   margin-bottom: 0.5em
   1141 }
   1142 /* Don't let p margin spill out from inside list items */
   1143 li > p:last-of-type {
   1144   margin-bottom: 0;
   1145 }
   1146 
   1147 .label-expires,.expires {
   1148   display: none;
   1149 }