www/style.css.php

   1 <?php
   2         header ('Content-type: text/css; charset=utf-8');
   3
   4         $platform = @$argv[1] ?: 'Mac';
   5         $UI_font = (0 && $platform == 'Windows') ? "'Whitney', 'a_Avante'" : "'Concourse', 'a_Avante'";
   6
   7         $content_width_settings = [
   8                 'normal' => '900px',
   9                 'wide' => '1150px',
  10                 'fluid' => 'calc(100% - 300px)'
  11         ];
  12
  13         function fit_content($selector, $property = "width") {
  14                 foreach (["-moz-fit-content", "fit-content"] as $pvalue) echo
  15 "@supports (width: {$pvalue}) {
  16         {$selector} {
  17                 {$property}: {$pvalue};
  18         }
  19 }
  20 ";
  21         }
  22 ?>
  23
  24 /*************/
  25 /* VARIABLES */
  26 /*************/
  27
  28 :root {
  29         --GW-comment-background-color-odd: transparent;
  30         --GW-comment-background-color-even: transparent;
  31         --GW-comment-background-color-target: transparent;
  32
  33         --inverted-display: none;
  34 }
  35
  36 /***************/
  37 /* BASE LAYOUT */
  38 /***************/
  39
  40 html {
  41         box-sizing: border-box;
  42         font-size: 16px;
  43 }
  44 *, *::before, *::after {
  45         box-sizing: inherit;
  46 }
  47 script {
  48         display: none !important;
  49 }
  50
  51 /*=------=*/
  52 /*= Body =*/
  53 /*=------=*/
  54
  55 body {
  56         padding: 0;
  57         margin: 0;
  58 }
  59 body::before {
  60         background-color: inherit;
  61         position: fixed;
  62         width: 100%;
  63         height: 100%;
  64 }
  65
  66 body.no-scroll {
  67         overflow-y: scroll;
  68         position: fixed;
  69         width: 100%;
  70 }
  71
  72 /*=----------------------------=*/
  73 /*= Immediate children of body =*/
  74 /*=----------------------------=*/
  75
  76 body > * {
  77         max-width: 900px;
  78 }
  79
  80 /*      Special styles for special browsers.
  81         (This one is a fix for Firefox’s built-in screenshot feature.)
  82         */
  83 body > iframe[id^='firefox-screenshots'] {
  84         max-width: unset;
  85 }
  86
  87 #content {
  88         margin: 0 auto;
  89         padding: 0 30px;
  90         position: relative;
  91         overflow: visible;
  92         display: grid;
  93         grid-template-columns: 2fr 1fr 2fr;
  94 }
  95 #content::before {
  96         content: "";
  97         display: block;
  98         position: absolute;
  99         top: 0;
 100         left: 0;
 101         width: 100%;
 102         height: 100%;
 103         z-index: -1;
 104         pointer-events: none;
 105 }
 106
 107 /*=---------=*/
 108 /*= Content =*/
 109 /*=---------=*/
 110
 111 #content > * {
 112         grid-column: 1 / span 3;
 113 }
 114
 115 /*=----------------------=*/
 116 /*= Floating UI elements =*/
 117 /*=----------------------=*/
 118
 119 #ui-elements-container {
 120         position: fixed;
 121         height: 100vh;
 122         top: 0;
 123         left: 0;
 124         right: 0;
 125         margin: auto;
 126         z-index: 10000;
 127         pointer-events: none;
 128 }
 129 #ui-elements-container > * {
 130         pointer-events: auto;
 131 }
 132
 133 /*=----------------=*/
 134 /*= Images overlay =*/
 135 /*=----------------=*/
 136 /* (To exclude images in posts from theme tweaks) */
 137
 138 #images-overlay {
 139         position: absolute;
 140         z-index: 1;
 141         left: 0;
 142         right: 0;
 143         margin: auto;
 144 }
 145
 146 /***********/
 147 /* NAV BAR */
 148 /***********/
 149
 150 .nav-bar {
 151         margin: 0 -30px;
 152         display: flex;
 153         order: -11;
 154         z-index: 1;
 155 }
 156
 157 /*=---------------=*/
 158 /*= Nav bar items =*/
 159 /*=---------------=*/
 160
 161 .nav-item {
 162         flex: 1 1 auto;
 163 }
 164 .nav-item * {
 165         text-overflow: ellipsis;
 166         white-space: nowrap;
 167         overflow: hidden;
 168 }
 169 .nav-inner {
 170         padding: 12px 30px;
 171         text-align: center;
 172         display: block;
 173         position: relative;
 174 }
 175 .nav-bar-top:not(#primary-bar) .nav-inner {
 176         padding: 4px 0;
 177 }
 178
 179 #nav-item-sequences .nav-inner::before {
 180         font-family: "Font Awesome", "Font Awesome 5 Free";
 181         content: "\F5DB";
 182 }
 183 @media only screen and (min-width: 901px) {
 184         #nav-item-about .nav-inner {
 185                 margin-right: 0.5em;
 186         }
 187         #nav-item-sequences .nav-inner::before {
 188                 font-size: 1rem;
 189                 display: block;
 190         }
 191         #secondary-bar #nav-item-sequences .nav-inner {
 192                 font-size: 0;
 193                 line-height: 1.4;
 194         }
 195 }
 196
 197 /*=------------=*/
 198 /*= Bottom bar =*/
 199 /*=------------=*/
 200
 201 #bottom-bar {
 202         order: 11;
 203 }
 204 h1.listing ~ #bottom-bar {
 205         margin-top: 1.25em;
 206 }
 207 #bottom-bar .nav-item {
 208         flex: 1 1 0;
 209 }
 210
 211 /*=-----------------=*/
 212 /*= Accesskey hints =*/
 213 /*=-----------------=*/
 214
 215 .nav-inner::after {
 216         content: attr(accesskey);
 217         display: none;
 218 }
 219
 220 /*=---------------=*/
 221 /*= Pagination UI =*/
 222 /*=---------------=*/
 223
 224 #bottom-bar .nav-item a::before,
 225 #top-nav-bar a::before {
 226         font-family: "Font Awesome", "Font Awesome 5 Free";
 227         font-weight: 900;
 228         font-size: 0.8em;
 229         position: relative;
 230         bottom: 1px;
 231         margin-right: 0.5em;
 232 }
 233 #bottom-bar #nav-item-first a::before,
 234 #top-nav-bar a.nav-item-first::before {
 235         content: "\F33e";
 236 }
 237 #bottom-bar #nav-item-top a::before {
 238         content: "\F062";
 239 }
 240 #bottom-bar #nav-item-prev a::before,
 241 #top-nav-bar a.nav-item-prev::before {
 242         content: "\F060";
 243 }
 244 #bottom-bar #nav-item-next a::before,
 245 #top-nav-bar a.nav-item-next::before {
 246         content: "\F061";
 247 }
 248 #bottom-bar #nav-item-last a::before,
 249 #top-nav-bar a.nav-item-last::before {
 250         content: "\F340";
 251 }
 252 #bottom-bar #nav-item-next a::before {
 253         margin-left: -2em;
 254         margin-right: 0;
 255         left: 3.8em;
 256 }
 257 #bottom-bar #nav-item-last a::before {
 258         margin-left: -1.8em;
 259         margin-right: 0;
 260         left: 3.4em;
 261 }
 262
 263 /*= Hover tooltips =*/
 264
 265 #top-nav-bar a {
 266         position: relative;
 267 }
 268 #top-nav-bar a::after {
 269         bottom: calc(100% - 3px);
 270         content: attr(data-target-page);
 271 }
 272 #top-nav-bar a::after {
 273         display: block;
 274         position: absolute;
 275         font-size: 0.75rem;
 276         width: 100%;
 277         line-height: 1;
 278         visibility: hidden;
 279 }
 280 #top-nav-bar a:hover::after,
 281 #bottom-bar a:hover::after {
 282         visibility: visible;
 283 }
 284
 285 /*=-----------------------=*/
 286 /*= Decorative bottom bar =*/
 287 /*=-----------------------=*/
 288 /* (On short pages with no pagination) */
 289
 290 #bottom-bar.decorative {
 291         position: relative;
 292 }
 293 #bottom-bar.decorative .nav-item {
 294         display: none;
 295 }
 296
 297 /*=------------=*/
 298 /*= Search tab =*/
 299 /*=------------=*/
 300
 301 #nav-item-search {
 302         flex: 4 1 auto;
 303 }
 304 #nav-item-search form::before {
 305         content: "\F002";
 306         font-family: "Font Awesome", "Font Awesome 5 Free";
 307         font-weight: 900;
 308         display: inline-block;
 309         vertical-align: top;
 310         height: 23px;
 311         width: 23px;
 312 }
 313 #nav-item-search input {
 314         height: 23px;
 315         width: calc(95% - 80px);
 316         padding: 1px 4px;
 317 }
 318 #nav-item-search button {
 319         height: 21px;
 320 }
 321
 322 /*=-----------=*/
 323 /*= Login tab =*/
 324 /*=-----------=*/
 325
 326 #nav-item-login {
 327         position: relative;
 328         padding-right: 0.5em;
 329 }
 330
 331 /*******************/
 332 /* INBOX INDICATOR */
 333 /*******************/
 334
 335 #inbox-indicator {
 336         position: absolute;
 337         top: 1px;
 338         right: 0;
 339         height: 100%;
 340         visibility: hidden;
 341 }
 342 #inbox-indicator::before {
 343         content: "\F0E0";
 344         font-family: "Font Awesome", "Font Awesome 5 Free";
 345         color: #bbb;
 346         font-size: 1.1875rem;
 347         position: absolute;
 348         height: 100%;
 349         right: 0;
 350         top: 0;
 351         padding: 0 0.45em;
 352         visibility: visible;
 353         font-weight: 900;
 354 }
 355 #inbox-indicator.new-messages::before {
 356         color: #f00;
 357         text-shadow:
 358                 0 0 1px #777,
 359                 0.5px 0.5px 1px #777;
 360 }
 361 a#inbox-indicator:hover::before {
 362         color: #fff;
 363         text-shadow:
 364                 0 0 1px #000,
 365                 0 0 2px #000,
 366                 0 0 4px #000,
 367                 0 0 1px #777,
 368                 0.5px 0.5px 1px #777;
 369 }
 370 a#inbox-indicator.new-messages:hover::before {
 371         text-shadow:
 372                 0 0 1px #f00,
 373                 0 0 2px #f00,
 374                 0 0 4px #f00,
 375                 0 0 1px #777,
 376                 0.5px 0.5px 1px #777;
 377 }
 378
 379 /****************/
 380 /* PAGE TOOLBAR */
 381 /****************/
 382
 383 .page-toolbar {
 384         font-size: 0.9em;
 385         line-height: 1.8;
 386         text-align: right;
 387         margin-right: -20px;
 388 }
 389 #content > .page-toolbar {
 390         grid-column: 3;
 391         grid-row: span 3;
 392 }
 393 #content.user-page > .page-toolbar {
 394         grid-column: 2 / span 2;
 395         order: -4;
 396 }
 397
 398 /*=--------------------------=*/
 399 /*= Page toolbar items (all) =*/
 400 /*=--------------------------=*/
 401
 402 .page-toolbar > * {
 403         display: inline-block;
 404         margin-left: 1.5em;
 405 }
 406 .page-toolbar > form button {
 407         padding: 0;
 408         text-align: right;
 409         white-space: unset;
 410 }
 411 .page-toolbar > form button::before {
 412         text-align: center;
 413 }
 414 .page-toolbar .button::before {
 415         font-family: "Font Awesome", "Font Awesome 5 Free";
 416         font-size: 0.9em;
 417         padding-right: 0.3em;
 418 }
 419
 420 /*=-------------------------------=*/
 421 /*= Page toolbar items (specific) =*/
 422 /*=-------------------------------=*/
 423
 424 .new-post::before {
 425         content: '\F067';
 426         font-weight: 900;
 427 }
 428 .new-private-message::before {
 429         content: '\F075';
 430         font-weight: 400;
 431 }
 432 .logout-button::before {
 433         content: '\F2F5';
 434         font-weight: 900;
 435 }
 436 #enable-push-notifications::before {
 437         content: '\F0F3';
 438         font-weight: 400;
 439 }
 440 .ignore-button::before {
 441         content: "\F070";
 442         font-weight: 400;
 443 }
 444 .unignore-button::before {
 445         content: "\F06E";
 446         font-weight: 400;
 447 }
 448 .rss::before {
 449         content: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/rss.svg")) ?>');
 450         display: inline-block;
 451         width: 1em;
 452         padding-right: 0.2em;
 453         position: relative;
 454         top: 1px;
 455 }
 456
 457 /*********************/
 458 /* TOP PAGINATION UI */
 459 /*********************/
 460
 461 #top-nav-bar {
 462         grid-column: 2;
 463         margin: 0.25em 0 0 0;
 464         padding: 0.75em 0 0 0;
 465         text-align: center;
 466         font-size: 1.25em;
 467         display: flex;
 468         justify-content: center;
 469 }
 470 #top-nav-bar a {
 471         line-height: 1;
 472 }
 473 #top-nav-bar a.disabled {
 474         pointer-events: none;
 475         visibility: hidden;
 476 }
 477 #top-nav-bar .page-number {
 478         position: relative;
 479         display: inline-block;
 480         width: 1.5em;
 481 }
 482 #top-nav-bar .page-number-label {
 483         position: absolute;
 484         font-size: 0.5em;
 485         text-transform: uppercase;
 486         width: 100%;
 487         bottom: 90%;
 488         left: 0;
 489 }
 490 #top-nav-bar a::before {
 491         margin: 0.5em;
 492         display: inline-block;
 493 }
 494
 495 /****************/
 496 /* SUBLEVEL NAV */
 497 /****************/
 498
 499 .sublevel-nav {
 500         text-align: center;
 501         display: flex;
 502         justify-content: center;
 503         margin: 1em 0 0 0;
 504 }
 505 #content > .sublevel-nav:not(.sort) {
 506         grid-column: 2;
 507         align-self: start;
 508 }
 509 .sublevel-nav .sublevel-item {
 510         flex: 0 0 6em;
 511         padding: 0.125em 0.5em;
 512         font-size: 1.125rem;
 513 }
 514 .sublevel-nav .sublevel-item:active {
 515         transform: none;
 516 }
 517 .sublevel-nav .sublevel-item.selected {
 518         cursor: default;
 519 }
 520
 521 /***********************/
 522 /* SORT ORDER SELECTOR */
 523 /***********************/
 524
 525 .sublevel-nav.sort {
 526         position: relative;
 527         margin-top: 8px;
 528         font-size: 0.75em;
 529 }
 530 #content > .sublevel-nav.sort {
 531         grid-column: 3;
 532         grid-row: span 2;
 533         justify-self: end;
 534         align-self: start;
 535         flex-flow: column;
 536 }
 537 #content.index-page > .sublevel-nav.sort {
 538         grid-column: 1;
 539         justify-self: start;
 540         flex-flow: row;
 541 }
 542
 543 .sublevel-nav.sort::before {
 544         content: "Sort";
 545         font-size: 0.75rem;
 546         position: absolute;
 547         top: 0;
 548         left: 0;
 549         width: 100%;
 550 }
 551 .sublevel-nav.sort .sublevel-item {
 552         line-height: 1;
 553         font-size: 0.875rem;
 554         flex-basis: unset;
 555 }
 556
 557 /*******************************/
 558 /* COMMENTS SORT MODE SELECTOR */
 559 /*******************************/
 560
 561 .comments > .sublevel-nav.sort {
 562         margin: 1em auto 0 auto;
 563 }
 564 <?php fit_content(".comments > .sublevel-nav.sort"); ?>
 565
 566 /******************/
 567 /* WIDTH SELECTOR */
 568 /******************/
 569
 570 #width-selector {
 571         position: absolute;
 572         top: 4px;
 573         right: -78px;
 574 }
 575 #width-selector button {
 576         width: 22px;
 577         height: 22px;
 578         padding: 6px;
 579         margin: 1px;
 580         overflow: hidden;
 581         background-repeat: no-repeat;
 582         background-size: 100%;
 583         background-origin: content-box;
 584 }
 585 #width-selector button,
 586 #width-selector button:active,
 587 #width-selector button:focus {
 588         text-shadow: none;
 589         color: transparent;
 590 }
 591 #width-selector button:disabled {
 592         cursor: auto;
 593 }
 594 #width-selector button.select-width-normal {
 595         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/normal.gif")) ?>');
 596 }
 597 #width-selector button.select-width-wide {
 598         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/wide.gif")) ?>');
 599 }
 600 #width-selector button.select-width-fluid {
 601         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/fluid.gif")) ?>');
 602 }
 603
 604 /*=----------------=*/
 605 /*= Hover tooltips =*/
 606 /*=----------------=*/
 607
 608 #width-selector button::after {
 609         content: attr(data-name);
 610         position: absolute;
 611         display: block;
 612         left: 0;
 613         width: 100%;
 614         text-align: center;
 615         top: 56px;
 616         visibility: hidden;
 617 }
 618 #width-selector button.selected::after {
 619         content: attr(data-name) " (selected)";
 620 }
 621 #width-selector button:hover:not(:active)::after {
 622         visibility: visible;
 623 }
 624
 625 <?php
 626 global $content_width_settings;
 627 foreach ($content_width_settings as $name => $setting) {
 628         echo "head.content-width-{$name} + body > * {\n max-width: {$setting};\n}\n";
 629 }
 630 ?>
 631
 632 /******************/
 633 /* THEME SELECTOR */
 634 /******************/
 635
 636 #theme-selector {
 637         position: absolute;
 638         top: 3px;
 639         left: -41px;
 640         opacity: 0.4;
 641         display: table;
 642         max-width: 40px;
 643 }
 644 #theme-selector:hover {
 645         opacity: 1.0;
 646 }
 647
 648 /*=----------------------=*/
 649 /*= Theme select buttons =*/
 650 /*=----------------------=*/
 651
 652 .theme-selector button {
 653         display: table-cell;
 654         width: 26px;
 655         height: 26px;
 656         padding: 5px;
 657         margin: 1px 7px 0 7px;
 658         color: transparent;
 659         background-size: 16px 16px;
 660         background-origin: content-box;
 661 }
 662 .theme-selector button,
 663 .theme-selector button:hover,
 664 .theme-selector button:active,
 665 .theme-selector button:focus {
 666         text-shadow: none;
 667         color: transparent;
 668 }
 669 .theme-selector button:disabled {
 670         cursor: auto;
 671 }
 672
 673 /*=----------------------------=*/
 674 /*= Pre-rendered button images =*/
 675 /*=----------------------------=*/
 676 /*      (Each is just a capital letter A through whatever) */
 677
 678 .theme-selector button:nth-of-type(1) {
 679         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_A.gif")) ?>');
 680 }
 681 .theme-selector button:nth-of-type(2) {
 682         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_B.gif")) ?>');
 683 }
 684 .theme-selector button:nth-of-type(3) {
 685         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_C.gif")) ?>');
 686 }
 687 .theme-selector button:nth-of-type(4) {
 688         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_D.gif")) ?>');
 689 }
 690 .theme-selector button:nth-of-type(5) {
 691         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_E.gif")) ?>');
 692 }
 693 .theme-selector button:nth-of-type(6) {
 694         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_F.gif")) ?>');
 695 }
 696 .theme-selector button:nth-of-type(7) {
 697         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_G.gif")) ?>');
 698 }
 699 .theme-selector button:nth-of-type(8) {
 700         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_H.gif")) ?>');
 701 }
 702 .theme-selector button:nth-of-type(9) {
 703         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_I.gif")) ?>');
 704 }
 705
 706 /*=------------------------------=*/
 707 /*= Theme select button tooltips =*/
 708 /*=------------------------------=*/
 709 /*      (with the name & description of the theme that each button selects) */
 710
 711 #theme-selector button {
 712         position: relative;
 713         z-index: 1;
 714 }
 715 #theme-selector button::before {
 716         content: attr(data-theme-name);
 717         position: absolute;
 718         top: 0;
 719         right: 100%;
 720         padding: 5px 6px 6px 6px;
 721         line-height: 1;
 722         width: 6em;
 723         text-align: right;
 724         z-index: 1;
 725         visibility: hidden;
 726 }
 727 #theme-selector:hover button::before {
 728         visibility: visible;
 729 }
 730 #theme-selector:hover ~ #theme-tweaker-toggle,
 731 #theme-selector:active ~ #theme-tweaker-toggle {
 732         z-index: -1;
 733 }
 734
 735 /************************/
 736 /* THEME TWEAKER TOGGLE */
 737 /************************/
 738
 739 #theme-tweaker-toggle {
 740         position: absolute;
 741         top: 7px;
 742         left: -75px;
 743 }
 744 #theme-tweaker-toggle button {
 745         font-family: "Font Awesome", "Font Awesome 5 Free";
 746         font-weight: 900;
 747         font-size: 1.25rem;
 748         opacity: 0.4;
 749         z-index: 1;
 750 }
 751 #theme-tweaker-toggle button:hover {
 752         opacity: 1.0;
 753 }
 754
 755 /*******************/
 756 /* QUICKNAV WIDGET */
 757 /*******************/
 758
 759 #quick-nav-ui {
 760         position: absolute;
 761         right: -67px;
 762         bottom: 20px;
 763 }
 764 #quick-nav-ui a {
 765         font-family: "Font Awesome", "Font Awesome 5 Free";
 766         font-weight: 900;
 767         font-size: 1.5rem;
 768         line-height: 1.7;
 769         text-align: center;
 770         display: block;
 771         width: 40px;
 772         height: 40px;
 773         margin: 10px 0 0 0;
 774 }
 775 #quick-nav-ui a[href='#comments'].no-comments {
 776         pointer-events: none;
 777 }
 778 #quick-nav-ui a {
 779         visibility: hidden;
 780 }
 781 #content.post-page ~ #ui-elements-container #quick-nav-ui a[href='#comments'] {
 782         visibility: visible;
 783 }
 784
 785 /************************/
 786 /* NEW COMMENT QUICKNAV */
 787 /************************/
 788
 789 #new-comment-nav-ui {
 790         position: absolute;
 791         right: -112px;
 792         bottom: 42px;
 793 }
 794 #new-comment-nav-ui > * {
 795         display: block;
 796         position: relative;
 797 }
 798 #new-comment-nav-ui.no-comments {
 799         display: none;
 800 }
 801
 802 /*=--------------------=*/
 803 /*= New comments count =*/
 804 /*=--------------------=*/
 805
 806 #new-comment-nav-ui .new-comments-count {
 807         width: 2em;
 808         font-size: 1.25rem;
 809         line-height: 1.1;
 810         text-align: center;
 811         left: 1px;
 812         cursor: pointer;
 813 }
 814 #new-comment-nav-ui .new-comments-count::selection {
 815         background-color: transparent;
 816 }
 817 #new-comment-nav-ui .new-comments-count::after {
 818         content: "NEW";
 819         display: block;
 820         font-size: 0.625rem;
 821 }
 822
 823 /*=-----------------------------------=*/
 824 /*= Next/previous new comment buttons =*/
 825 /*=-----------------------------------=*/
 826
 827 #new-comment-nav-ui .new-comment-sequential-nav-button {
 828         font-size: 1.75rem;
 829         font-family: "Font Awesome", "Font Awesome 5 Free";
 830         font-weight: 900;
 831         width: 1.5em;
 832         z-index: 5001;
 833 }
 834 #new-comment-nav-ui .new-comment-previous {
 835         top: 8px;
 836 }
 837 #new-comment-nav-ui .new-comment-next {
 838         bottom: 6px;
 839 }
 840 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
 841         cursor: auto;
 842         pointer-events: none;
 843 }
 844
 845 /*******************/
 846 /* HNS DATE PICKER */
 847 /*******************/
 848
 849 #hns-date-picker {
 850         position: absolute;
 851         bottom: 72px;
 852         right: -253px;
 853         opacity: 0.6;
 854 }
 855 #hns-date-picker:hover,
 856 #hns-date-picker:focus-within {
 857         opacity: 1.0;
 858 }
 859 #hns-date-picker.no-comments {
 860         display: none;
 861 }
 862
 863 /*=---------------=*/
 864 /*= "Since" label =*/
 865 /*=---------------=*/
 866
 867 #hns-date-picker span {
 868         display: block;
 869         font-size: 0.75rem;
 870         text-transform: uppercase;
 871 }
 872
 873 /*=--------------------=*/
 874 /*= "Since" text field =*/
 875 /*=--------------------=*/
 876
 877 #hns-date-picker input {
 878         margin-top: 1px;
 879         padding: 1px 3px;
 880         width: 140px;
 881         text-align: center;
 882         box-shadow: 0 0 0 1px transparent;
 883 }
 884
 885 /************************/
 886 /* ANTI-KIBITZER TOGGLE */
 887 /************************/
 888
 889 #anti-kibitzer-toggle {
 890         position: absolute;
 891         right: -67px;
 892         bottom: 225px;
 893 }
 894 #anti-kibitzer-toggle button {
 895         display: block;
 896         width: 40px;
 897         height: 54px;
 898         padding: 0;
 899 }
 900 #anti-kibitzer-toggle button::before,
 901 #anti-kibitzer-toggle button::after {
 902         font-family: "Font Awesome", "Font Awesome 5 Free";
 903 }
 904 #anti-kibitzer-toggle button::before {
 905         content: "\F06E";
 906         display: block;
 907         font-size: 1.75em;
 908         font-weight: 400;
 909 }
 910 #anti-kibitzer-toggle button::after {
 911         content: "\F007\2004\F164";
 912         font-size: 0.875em;
 913         font-weight: 900;
 914 }
 915 #anti-kibitzer-toggle.engaged button::before {
 916         content: "\F070";
 917 }
 918
 919 /************************/
 920 /* TEXT SIZE ADJUSTMENT */
 921 /************************/
 922
 923 #text-size-adjustment-ui {
 924         position: absolute;
 925         top: 30px;
 926         right: -78px;
 927         opacity: 0.4;
 928 }
 929 #text-size-adjustment-ui:hover {
 930         opacity: 1.0;
 931 }
 932
 933 /* This doesn't work in Mozilla browsers, so hide it */
 934 @-moz-document url-prefix() {
 935         #text-size-adjustment-ui {
 936                 display: none;
 937         }
 938 }
 939
 940 /*=---------=*/
 941 /*= Buttons =*/
 942 /*=---------=*/
 943
 944 #text-size-adjustment-ui button {
 945         font-weight: 900;
 946         font-family: "Font Awesome", "Font Awesome 5 Free";
 947         font-size: 0.75rem;
 948         width: 24px;
 949         height: 24px;
 950         padding: 0;
 951 }
 952 #text-size-adjustment-ui button.default {
 953         font-family: inherit;
 954         font-size: 1.125rem;
 955         position: relative;
 956         top: 1px;
 957 }
 958 #text-size-adjustment-ui button:disabled {
 959         opacity: 0.5;
 960 }
 961 #text-size-adjustment-ui button:disabled:hover {
 962         cursor: default;
 963 }
 964
 965 /*=----------------=*/
 966 /*= Hover tooltips =*/
 967 /*=----------------=*/
 968
 969 #text-size-adjustment-ui::after {
 970         content: "Adjust text size";
 971         position: absolute;
 972         display: block;
 973         left: 0;
 974         width: 100%;
 975         text-align: center;
 976         top: 32px;
 977         visibility: hidden;
 978         font-size: 0.9em;
 979 }
 980 #text-size-adjustment-ui:hover::after {
 981         visibility: visible;
 982 }
 983
 984 /*******************************/
 985 /* COMMENTS VIEW MODE SELECTOR */
 986 /*******************************/
 987
 988 #comments-view-mode-selector {
 989         position: absolute;
 990         bottom: 30px;
 991         left: -40px;
 992         opacity: 0.6;
 993 }
 994 #comments-view-mode-selector:hover {
 995         opacity: 1.0;
 996 }
 997
 998 /*=---------=*/
 999 /*= Buttons =*/
1000 /*=---------=*/
1001
1002 #comments-view-mode-selector a {
1003         display: block;
1004         font-family: "Font Awesome", "Font Awesome 5 Free";
1005         font-size: 1.25rem;
1006         text-align: center;
1007         opacity: 0.4;
1008         padding: 0.25em;
1009         z-index: 1;
1010 }
1011 #comments-view-mode-selector a.threaded {
1012         transform: scaleY(-1);
1013         font-weight: 900;
1014 }
1015 #comments-view-mode-selector a.chrono {
1016         font-weight: normal;
1017 }
1018 #comments-view-mode-selector a.selected,
1019 #comments-view-mode-selector a:hover {
1020         opacity: 1.0;
1021         text-decoration: none;
1022 }
1023 #comments-view-mode-selector a.selected {
1024         cursor: default;
1025 }
1026
1027 /*****************/
1028 /* KEYBOARD HELP */
1029 /*****************/
1030
1031 #keyboard-help-overlay {
1032         width: 100vw;
1033         height: 100vh;
1034         background-color: rgba(0,0,0,0.7);
1035         position: fixed;
1036         left: 0;
1037         top: 0;
1038         z-index: 5001;
1039
1040         display: flex;
1041         justify-content: center;
1042         align-items: center;
1043         padding: 20px 30px 30px 20px;
1044
1045         visibility: hidden;
1046 }
1047
1048 #keyboard-help-overlay .keyboard-help-container {
1049         background-color: #fff;
1050         filter: drop-shadow(4px 4px 2px #000);
1051         flex: 1 1 auto;
1052         max-width: 1500px;
1053         max-height: 100%;
1054         overflow-y: auto;
1055         position: relative;
1056 }
1057 #keyboard-help-overlay .keyboard-help-container h1 {
1058         text-align: center;
1059         border-bottom: 1px solid #ddd;
1060         margin: 0;
1061         padding: 10px 20px;
1062 }
1063 #keyboard-help-overlay .keyboard-help-container .note {
1064         margin: 0.5em auto;
1065         padding: 0 1em;
1066         width: fit-content;
1067 }
1068 #keyboard-help-overlay .keyboard-help-container .keyboard-shortcuts-lists {
1069         column-width: 21em;
1070         column-count: auto;
1071         column-gap: 1.5em;
1072         border-top: 1px solid #ddd;
1073         padding: 15px 20px;
1074 }
1075 #keyboard-help-overlay .keyboard-help-container ul {
1076         list-style-type: none;
1077         margin: 0;
1078         padding: 0;
1079         break-inside: avoid;
1080         white-space: nowrap;
1081 }
1082 #keyboard-help-overlay .keyboard-help-container ul:nth-of-type(n+2) {
1083         margin: 20px 0 0 0;
1084 }
1085 #keyboard-help-overlay .keyboard-help-container ul li.section {
1086         font-weight: bold;
1087         font-size: 1.125rem;
1088         break-after: avoid;
1089 }
1090 #keyboard-help-overlay .keyboard-help-container .keys {
1091         margin: 0 0.5em 0 0;
1092         min-width: 4.5em;
1093         display: inline-block;
1094 }
1095 #keyboard-help-overlay .keyboard-help-container .keys code {
1096         margin: 0 6px 0 0;
1097 }
1098 #keyboard-help-overlay .keyboard-help-container code {
1099         display: inline-block;
1100         background-color: #eee;
1101         border: 1px solid #ccc;
1102         padding: 3px 8px 4px 8px;
1103         margin: 0 1px;
1104 }
1105 #keyboard-help-overlay .keyboard-help-container code.ak {
1106         background-color: #ffeb83;
1107         border-color: #d4a500;
1108 }
1109 #keyboard-help-overlay .keyboard-help-container code.ak::before {
1110         content: "ak+";
1111         opacity: 0.3;
1112 }
1113
1114 #nav-item-about button.open-keyboard-help {
1115         display: none;
1116 }
1117 @media only screen and (hover:hover) and (pointer:fine) {
1118         #nav-item-about {
1119                 position: relative;
1120                 padding-right: 0.25em;
1121         }
1122         #nav-item-about button.open-keyboard-help {
1123                 font-family: "Font Awesome", "Font Awesome 5 Free";
1124                 font-weight: 900;
1125                 position: absolute;
1126                 top: 0;
1127                 right: 0;
1128                 height: 100%;
1129                 padding: 8px;
1130                 display: initial;
1131                 line-height: 1;
1132                 background-color: transparent;
1133         }
1134 }
1135
1136 #keyboard-help-overlay button.close-keyboard-help {
1137         position: absolute;
1138         right: 0;
1139         top: 0;
1140         font-family: "Font Awesome", "Font Awesome 5 Free";
1141         font-size: 1.5rem;
1142         padding: 10px 12px;
1143 }
1144
1145 /************/
1146 /* ARCHIVES */
1147 /************/
1148
1149 .archive-nav {
1150         margin: 1.25em 0.5em 0 0.5em;
1151         padding: 0.25em;
1152 }
1153 .archive-nav > * {
1154         display: flex;
1155 }
1156 .archive-nav *[class^='archive-nav-item'] {
1157         line-height: 1;
1158         flex: 1 1 5%;
1159         text-align: center;
1160         padding: 6px 4px 4px 4px;
1161         max-width: 8%;
1162 }
1163 @-moz-document url-prefix() {
1164         .archive-nav *[class^='archive-nav-item'] {
1165                 padding: 5px 4px;
1166         }
1167 }
1168 .archive-nav-days .archive-nav-item-day {
1169         font-size: 0.8em;
1170         padding: 7px 0 5px 0;
1171         max-width: 4%;
1172 }
1173 .archive-nav-days .archive-nav-item-day:first-child {
1174         flex-basis: 10%;
1175 }
1176
1177 /************/
1178 /* ARCHIVES */
1179 /************/
1180
1181 .archive-nav {
1182         margin: 1.25em 0.5em 0 0.5em;
1183         padding: 0.25em;
1184 }
1185 .archive-nav > * {
1186         display: flex;
1187 }
1188 .archive-nav *[class^='archive-nav-item'] {
1189         line-height: 1;
1190         flex: 1 1 5%;
1191         text-align: center;
1192         padding: 6px 4px 4px 4px;
1193         max-width: 8%;
1194 }
1195 @-moz-document url-prefix() {
1196         .archive-nav *[class^='archive-nav-item'] {
1197                 padding: 5px 4px;
1198         }
1199 }
1200 .archive-nav-days .archive-nav-item-day {
1201         font-size: 0.8em;
1202         padding: 7px 0 5px 0;
1203         max-width: 4%;
1204 }
1205 .archive-nav-days .archive-nav-item-day:first-child {
1206         flex-basis: 10%;
1207 }
1208
1209 /************/
1210 /* LISTINGS */
1211 /************/
1212
1213 h1.listing {
1214         font-size: 1.875rem;
1215         line-height: 1.15;
1216         max-height: 1.15em;
1217         position: relative;
1218 }
1219
1220 h1.listing a {
1221         position: relative;
1222 }
1223
1224 /* Links to link-posts (not the link-post links themselves; that's below) */
1225 h1.listing .link-post-link + a {
1226         margin-left: 0.25em;
1227 }
1228
1229 h1.listing .link-post-link {
1230         font-size: 0.8em;
1231         display: inline;
1232         vertical-align: top;
1233         position: relative;
1234         top: 4px;
1235 }
1236
1237 /*=----------------------=*/
1238 /*= Listing hover reveal =*/
1239 /*=----------------------=*/
1240 /*      (On desktops, hover over a multi-line listing to reveal all of it) */
1241
1242 @media only screen and (min-width: 1160px) {
1243         h1.listing a {
1244                 max-width: 100%;
1245                 display: inline-block;
1246                 white-space: nowrap;
1247                 text-overflow: ellipsis;
1248                 overflow: hidden;
1249                 border-bottom: 1px solid transparent;
1250                 -webkit-hyphens: auto;
1251                 -moz-hyphens: auto;
1252                 -ms-hyphens: auto;
1253                 hyphens: auto;
1254                 z-index: 1;
1255                 padding: 0 0 1px 1px;
1256         }
1257         h1.listing .link-post-link + a {
1258                 max-width: calc(100% - 33px);
1259         }
1260         h1.listing a:hover,
1261         h1.listing a:focus {
1262                 text-decoration: dotted underline;
1263                 white-space: initial;
1264                 overflow: visible;
1265                 z-index: 2;
1266         }
1267         h1.listing:focus-within::before {
1268                 content: "\F105";
1269                 font-family: "Font Awesome", "Font Awesome 5 Free";
1270                 display: block;
1271                 position: absolute;
1272                 left: -0.75em;
1273         }
1274
1275 /* Adds hysteresis to the hover area (i.e., prevents oscillation due to small
1276    mouse movements) */
1277 <?php $margin_of_hover_error = '10px'; ?>
1278
1279         h1.listing a:not(.edit-post-link):hover::before {
1280                 content: "";
1281                 position: absolute;
1282                 top: -<?php echo $margin_of_hover_error; ?>;
1283                 right: -<?php echo $margin_of_hover_error; ?>;
1284                 bottom: -<?php echo $margin_of_hover_error; ?>;
1285                 left: -<?php echo $margin_of_hover_error; ?>;
1286                 z-index: -1;
1287         }
1288         h1.listing .link-post-link:hover {
1289                 text-decoration: none;
1290         }
1291 }
1292
1293 /*=-----------------------=*/
1294 /*= In-listing edit links =*/
1295 /*=-----------------------=*/
1296
1297 h1.listing .edit-post-link {
1298         position: absolute;
1299         margin: 0;
1300 }
1301
1302 /*=---------------------------------=*/
1303 /*= Error messages on listing pages =*/
1304 /*=---------------------------------=*/
1305
1306 .listing-message {
1307         width: 100%;
1308         text-align: center;
1309         padding: 1.25em 0 1.25em 0;
1310         font-size: 1.375em;
1311 }
1312
1313 /*********************/
1314 /* LISTING POST-META */
1315 /*********************/
1316
1317 h1.listing + .post-meta {
1318         position: relative;
1319         justify-content: flex-start;
1320         margin: 0 20px 0 21px;
1321 }
1322
1323 h1.listing + .post-meta > * {
1324         margin: 0 1em 0 0;
1325 }
1326
1327 h1.listing + .post-meta .post-section {
1328         width: 0;
1329         margin: 0;
1330         overflow: hidden;
1331 }
1332 h1.listing + .post-meta .post-section::before {
1333         position: absolute;
1334         left: -36px;
1335 }
1336
1337 h1.listing + .post-meta .read-time {
1338         cursor: default;
1339 }
1340
1341 /********************/
1342 /* SEQUENCES & TAGS */
1343 /********************/
1344
1345 .sequence-text, .tag-description {
1346         font-size: 1.2rem;
1347         padding: 0 22px;
1348 }
1349
1350 #content.tag-index-page .tag-description {
1351         margin: 1em 0 0;
1352 }
1353
1354 section {
1355         margin-top: 2em;
1356         margin-bottom: 4em;
1357 }
1358
1359 h1.sequence-chapter {
1360         font-size: 2.3rem;
1361 }
1362
1363 article {
1364         max-width: 100%;
1365 }
1366
1367 .post-meta + .comments {
1368         margin-top: 3em;
1369 }
1370
1371 .tag-list {
1372         column-count: auto;
1373         column-width: 15em;
1374         margin-top: 0;
1375         border-bottom: 1px solid #999;
1376         padding-bottom: 1em;
1377         margin-bottom: 0;
1378 }
1379
1380 /**************/
1381 /* USER PAGES */
1382 /**************/
1383
1384 /*=---------------------=*/
1385 /*= User's display name =*/
1386 /*=---------------------=*/
1387
1388 #content.user-page h1.page-main-heading {
1389         margin: 0.25em 0 0 0;
1390         line-height: 1.1;
1391         grid-column: 1 / span 2;
1392         order: -2;
1393 }
1394
1395 #content.user-page h1.page-main-heading .user-full-name {
1396         font-size: 1rem;
1397         font-weight: normal;
1398         padding-left: 0.5em;
1399 }
1400
1401 /*=--------------------=*/
1402 /*= User's karma total =*/
1403 /*=--------------------=*/
1404
1405 #content.user-page .user-stats {
1406         grid-column: 3;
1407         order: -2;
1408         text-align: right;
1409         align-self: end;
1410 }
1411
1412 #content.user-page .user-stats .karma-type {
1413         white-space: nowrap;
1414 }
1415
1416 /*=----------------------=*/
1417 /*= Expanded vs. compact =*/
1418 /*=----------------------=*/
1419
1420 #content.user-page #comments-list-mode-selector {
1421         grid-row: span 2;
1422 }
1423 #content.user-page #comments-list-mode-selector button {
1424         display: block;
1425 }
1426
1427 /*=----------------------------------------------------=*/
1428 /*= All, Posts, Comments, Drafts, Conversations, Inbox =*/
1429 /*=----------------------------------------------------=*/
1430
1431 #content.user-page .sublevel-nav {
1432         margin-bottom: 0.5em;
1433 }
1434
1435 /*=--------------=*/
1436 /*= User's posts =*/
1437 /*=--------------=*/
1438
1439 #content.user-page h1.listing {
1440         margin: 0.5em 0 0 0;
1441 }
1442
1443 #content.user-page .user-bio :first-child {
1444         margin-top: 0.5em;
1445 }
1446
1447 /*****************/
1448 /* CONVERSATIONS */
1449 /*****************/
1450
1451 /*=----------------------=*/
1452 /*= List of participants =*/
1453 /*=----------------------=*/
1454
1455 #content.conversation-page .conversation-participants {
1456         grid-column: 2 / span 2;
1457         text-align: right;
1458         margin: 0.5em 0 0 0;
1459 }
1460 .post-meta > .conversation-participants {
1461         white-space: normal;
1462 }
1463 .conversation-participants ul,
1464 .conversation-participants li {
1465         list-style-type: none;
1466         display: inline-block;
1467         margin: 0;
1468         padding: 0;
1469 }
1470 .conversation-participants li {
1471         margin-left: 0.375em;
1472 }
1473 .conversation-participants li:not(:last-of-type)::after {
1474         content: ",";
1475 }
1476
1477 /*=-------------------------=*/
1478 /*= Posting controls (form) =*/
1479 /*=-------------------------=*/
1480
1481 #content.conversation-page .posting-controls {
1482         padding: 0 0 1em 0;
1483 }
1484 #content.conversation-page .post-meta-fields {
1485         overflow: auto;
1486         display: flex;
1487         flex-flow: row wrap;
1488 }
1489 .posting-controls.standalone textarea {
1490         margin-top: 0.375em;
1491 }
1492 .posting-controls.standalone form {
1493         padding: 0 1em;
1494 }
1495 #content.conversation-page .posting-controls.standalone form {
1496         padding: 0 1em 3em 1em;
1497 }
1498 .posting-controls.standalone input[type='text'],
1499 .posting-controls.standalone label {
1500         margin: 0.25em 0;
1501 }
1502 .posting-controls.standalone label {
1503         width: 4em;
1504         text-align: right;
1505         padding: 2px 6px;
1506         border: 1px solid transparent;
1507 }
1508 .posting-controls.standalone input[type='text'] {
1509         width: calc(100% - 4em);
1510         padding: 0.25em;
1511 }
1512 .posting-controls.standalone input[type='submit'] {
1513         float: right;
1514 }
1515 .posting-controls.standalone #markdown-hints-checkbox ~ label {
1516         white-space: nowrap;
1517 }
1518 .posting-controls.standalone #markdown-hints {
1519         top: calc(100% + 2em);
1520 }
1521
1522 /*=--------------------=*/
1523 /*= Conversation title =*/
1524 /*=--------------------=*/
1525
1526 #content.conversation-page h1.page-main-heading {
1527         text-align: center;
1528         margin: 0.5em 0;
1529         line-height: 1.15;
1530 }
1531
1532 /*=----------=*/
1533 /*= Messages =*/
1534 /*=----------=*/
1535
1536 #content.conversation-page > ul.comment-thread:last-of-type {
1537         margin-bottom: 2em;
1538 }
1539
1540 /******************/
1541 /* SEARCH RESULTS */
1542 /******************/
1543
1544 #content.search-results-page h1.listing,
1545 #content.sequence-page h1.listing,
1546 #content.post-page h1.listing {
1547         font-size: 1.625em;
1548 }
1549
1550 /**************/
1551 /* LOGIN PAGE */
1552 /**************/
1553
1554 .login-container {
1555         margin: 2em 0;
1556         padding: 1em;
1557         display: flex;
1558         flex-flow: row wrap;
1559 }
1560
1561 .login-container form {
1562         flex-basis: 50%;
1563         display: grid;
1564         grid-row-gap: 0.5em;
1565         align-content: start;
1566 }
1567 .login-container form label {
1568         text-align: right;
1569         padding: 0.25em 0.5em;
1570         white-space: nowrap;
1571         grid-column: 1;
1572 }
1573 .login-container form input {
1574         grid-column: 2;
1575         padding: 0.25em;
1576 }
1577 .login-container form input[type='submit'],
1578 .login-container form a {
1579         grid-column: 2;
1580         justify-self: center;
1581 }
1582 .login-container form input[type='submit'] {
1583         width: 10em;
1584         padding: 0.35em;
1585         line-height: 1;
1586         margin: 0.5em 0 0 0;
1587 }
1588 .login-container form h1 {
1589         text-align: center;
1590         margin: 0;
1591         grid-column: 2;
1592 }
1593
1594 /* “Log in” form */
1595
1596 #login-form {
1597         grid-template-columns: 5.5em 1fr;
1598         padding: 0.5em 2em 0.5em 0;
1599 }
1600
1601 /* “Create account” form */
1602
1603 #signup-form {
1604         font-size: 0.9em;
1605         grid-template-columns: 8.5em 1fr;
1606         padding: 0.5em 1em 1em 1em;
1607 }
1608 #signup-form h1 {
1609         font-size: 1.7em;
1610 }
1611 #signup-form input[type='submit'] {
1612         padding: 0.4em 0.5em 0.5em 0.5em;
1613 }
1614
1615 /* Log in tip */
1616
1617 .login-container .login-tip {
1618         padding: 0.5em 0.5em 0.5em 3em;
1619         margin: 2em 4em 0 4em;
1620         text-indent: -2em;
1621         line-height: 1.4;
1622 }
1623 .login-container .login-tip span {
1624         font-weight: bold;
1625 }
1626
1627 /* Message box */
1628
1629 #content.login-page .error-box {
1630         margin: 1.5em 0.875em -1.5em 0.875em;
1631 }
1632 .error-box, .success-box {
1633         padding: 0.25em;
1634         text-align: center;
1635 }
1636
1637 /***********************/
1638 /* PASSWORD RESET PAGE */
1639 /***********************/
1640
1641 .reset-password-container {
1642         margin-bottom: 2em;
1643 }
1644 .reset-password-container input[type='submit'] {
1645         padding: 0.2em 0.5em;
1646         width: unset;
1647 }
1648 .reset-password-container input {
1649         margin-left: 0.5em;
1650         width: 12em;
1651 }
1652 .reset-password-container label {
1653         display: inline-block;
1654         width: 9em;
1655 }
1656 .reset-password-container form > div {
1657         margin: 0.2em;
1658 }
1659 .reset-password-container .action-container {
1660         padding-left: 11em;
1661         padding-top: 0.2em;
1662 }
1663 .reset-password-container .error-box {
1664         margin: unset;
1665 }
1666
1667 /*********************/
1668 /* TABLE OF CONTENTS */
1669 /*********************/
1670
1671 .contents {
1672         float: right;
1673         min-width: 6em;
1674         max-width: 40%;
1675         margin: 1.25em 0 0.75em 1.25em;
1676         padding: 7px 14px 10px 10px;
1677         position: relative;
1678         z-index: 1;
1679 }
1680
1681 .contents-head {
1682         text-align: center;
1683         margin-bottom: 0.25em;
1684 }
1685
1686 .post-body .contents ul {
1687         list-style-type: none;
1688         margin: 0 0 0 0.5em;
1689         counter-reset: toc-item-1 toc-item-2 toc-item-3;
1690         padding-left: 1em;
1691         font-size: 0.75em;
1692 }
1693 .post-body .contents li {
1694         margin: 0.15em 0 0.3em 1em;
1695         text-align: left;
1696         text-indent: -1em;
1697         line-height: 1.2;
1698         position: relative;
1699 }
1700 .post-body .contents li::before {
1701         position: absolute;
1702         width: 3em;
1703         display: block;
1704         text-align: right;
1705         left: -4.5em;
1706 }
1707 .contents .toc-item-1 {
1708         counter-increment: toc-item-1;
1709         counter-reset: toc-item-2 toc-item-3;
1710 }
1711 .contents .toc-item-1::before {
1712         content: counter(toc-item-1);
1713 }
1714 .contents .toc-item-1 ~ .toc-item-2 {
1715         margin-left: 2.9em;
1716         font-size: 0.95em;
1717 }
1718 .contents .toc-item-2 {
1719         counter-increment: toc-item-2;
1720         counter-reset: toc-item-3;
1721 }
1722 .contents .toc-item-1 ~ .toc-item-2::before {
1723         content: counter(toc-item-1) "." counter(toc-item-2);
1724 }
1725 .contents .toc-item-2::before {
1726         content: counter(toc-item-2);
1727 }
1728 .contents .toc-item-1 + .toc-item-3 {
1729         counter-increment: toc-item-2 toc-item-3;
1730 }
1731 .contents .toc-item-2 ~ .toc-item-3,
1732 .contents .toc-item-1 ~ .toc-item-3 {
1733         margin-left: 2.9em;
1734         font-size: 0.95em;
1735 }
1736 .contents .toc-item-1 ~ .toc-item-2 ~ .toc-item-3 {
1737         margin-left: 5.7em;
1738         font-size: 0.9em;
1739 }
1740 .contents .toc-item-3 {
1741         counter-increment: toc-item-3;
1742 }
1743 .contents .toc-item-1 ~ .toc-item-2 ~ .toc-item-3::before {
1744         content: counter(toc-item-1) "." counter(toc-item-2) "." counter(toc-item-3);
1745 }
1746 .contents .toc-item-1 ~ .toc-item-3::before {
1747         content: counter(toc-item-1) "." counter(toc-item-3);
1748 }
1749 .contents .toc-item-2 ~ .toc-item-3::before {
1750         content: counter(toc-item-2) "." counter(toc-item-3);
1751 }
1752 .contents .toc-item-3::before {
1753         content: counter(toc-item-3);
1754 }
1755 .contents .toc-item-4,
1756 .contents .toc-item-5,
1757 .contents .toc-item-6 {
1758         display: none;
1759 }
1760
1761 /********************/
1762 /* POSTS & COMMENTS */
1763 /********************/
1764
1765 .post-meta > *,
1766 .comment-meta > * {
1767         display: inline-block;
1768         margin-right: 1em;
1769         font-size: 1.0625em;
1770 }
1771 .body-text {
1772         overflow-wrap: break-word;
1773         text-align: justify;
1774 }
1775 .body-text p {
1776         margin: 1em 0;
1777 }
1778 .retracted .body-text {
1779         text-decoration: line-through;
1780 }
1781
1782 .bare-url {
1783         word-break: break-all;
1784         hyphens: auto;
1785 }
1786 .body-text a:not([href]),
1787 .body-text a:not([href]):hover,
1788 .body-text a:not([href])::before,
1789 .body-text a:not([href])::after {
1790         text-decoration: none;
1791         text-shadow: unset;
1792         border: unset;
1793         color: unset;
1794         content: unset;
1795 }
1796 /*************/
1797 /* POST-META */
1798 /*************/
1799
1800 .post-meta {
1801         display: flex;
1802         flex-flow: row wrap;
1803         justify-content: center;
1804 }
1805 .post-meta .lw2-link {
1806         opacity: 0.5;
1807         order: 1;
1808 }
1809 .post-meta > *,
1810 .post-meta .post-section::before {
1811         margin: 0 0.5em;
1812 }
1813 .post-meta .post-section {
1814         order: -1;
1815         margin: 0;
1816         visibility: hidden;
1817 }
1818 .post-meta .post-section::before,
1819 .comment-meta .alignment-forum {
1820         visibility: visible;
1821         font-family: "Font Awesome", "Font Awesome 5 Free";
1822         font-weight: 900;
1823 }
1824 .post-section.frontpage::before {
1825         content: "\F015";
1826 }
1827 .post-section.featured::before {
1828         content: "\F005";
1829 }
1830 .post-section.meta::before {
1831         content: "\F077";
1832 }
1833 .post-section.events::before {
1834         content: "\F5A0";
1835 }
1836 .post-section.personal::before {
1837         content: "\F007";
1838 }
1839 .post-section.draft::before {
1840         content: "\F15B";
1841 }
1842 .post-section.alignment-forum::before,
1843 .comment-meta .alignment-forum {
1844         content: "AF";
1845         font-family: Concourse, 'Changa One';
1846 }
1847
1848 /*= Karma controls hover tooltips =*/
1849
1850 @media only screen and (pointer: fine) {
1851         .post .karma,
1852         .comment-item .karma {
1853                 position: relative;
1854         }
1855         .post .karma.active-controls::after,
1856         .comment-item .karma.active-controls::after {
1857                 content: "Double-click for strong vote";
1858                 position: absolute;
1859                 pointer-events: none;
1860                 display: block;
1861                 left: 6px;
1862                 max-width: calc(100% - 12px);
1863                 line-height: 1.15;
1864                 white-space: normal;
1865                 text-align: center;
1866                 font-size: 0.875rem;
1867                 opacity: 0;
1868                 transition: opacity 0.2s ease;
1869         }
1870         .post .karma.active-controls:hover::after,
1871         .comment-item .karma.active-controls:hover::after {
1872                 opacity: 1.0;
1873         }
1874
1875         .post .karma .karma-value::after,
1876         .comment-item .karma .karma-value::after {
1877                 content: attr(title);
1878                 position: absolute;
1879                 pointer-events: none;
1880                 display: block;
1881                 left: 50%;
1882                 transform: translateX(-50%);
1883                 white-space: nowrap;
1884                 text-align: center;
1885                 font-size: 0.875rem;
1886                 color: #bbb;
1887                 opacity: 0;
1888                 transition: opacity 0.2s ease;
1889         }
1890         .post .karma .karma-value:hover::after,
1891         .comment-item .karma .karma-value:hover::after {
1892                 opacity: 1.0;
1893         }
1894         .comment-item .karma .karma-value:hover::after {
1895                 z-index: 5001;
1896         }
1897
1898         .author {
1899                 position: relative;
1900         }
1901         .author:not(.redacted)::before {
1902                 content: attr(data-full-name);
1903                 position: absolute;
1904                 pointer-events: none;
1905                 display: block;
1906                 padding: 0 1em;
1907                 left: 50%;
1908                 bottom: 2em;
1909                 transform: translateX(-50%);
1910                 white-space: nowrap;
1911                 text-align: center;
1912                 font-size: 0.875rem;
1913                 font-weight: normal;
1914                 opacity: 0;
1915                 transition: opacity 0.2s ease;
1916                 z-index: 5001;
1917         }
1918         .author:hover::before {
1919                 opacity: 1.0;
1920         }
1921 }
1922
1923 /*********/
1924 /* POSTS */
1925 /*********/
1926
1927 .post {
1928         max-width: 100%;
1929 }
1930
1931 .post-body {
1932         min-height: 8em;
1933         padding: 0 30px;
1934         line-height: 1.5;
1935         font-size: 1.3rem;
1936         overflow: auto;
1937         margin: 0.5em 0 0 0;
1938 }
1939 h1.post-title {
1940         margin: 1.1em 0 0.35em 0;
1941         padding: 0 30px;
1942         text-align: center;
1943         font-size: 2.5em;
1944         line-height: 1;
1945 }
1946 .post .post-meta {
1947         text-align: center;
1948         position: relative;
1949         z-index: 2;
1950 }
1951 .post .top-post-meta:last-child {
1952         margin-bottom: 40px;
1953 }
1954 .post .bottom-post-meta {
1955         margin: 0;
1956         padding: 20px 0;
1957 }
1958 .bottom-post-meta {
1959         border-style: solid;
1960         border-width: 1px 0;
1961 }
1962
1963 /**********/
1964 /* EVENTS */
1965 /**********/
1966
1967 .event-info .map {
1968         position: relative;
1969         width: 100%;
1970         margin: 2em 0 1em;
1971 }
1972
1973 .event-info .map::before {
1974         content: "";
1975         display: block;
1976         padding-bottom: 50%;
1977 }
1978
1979 .event-info .map iframe {
1980         width: 100%;
1981         height: 100%;
1982         border: 1px solid #000;
1983         position: absolute;
1984         top: 0;
1985         left: 0;
1986 }
1987
1988 .event-info ul {
1989         list-style: none;
1990         padding: 0;
1991         text-align: center;
1992 }
1993
1994 /*******************/
1995 /* POST NAVIGATION */
1996 /*******************/
1997
1998 .post-nav-item {
1999         display: grid;
2000         grid-template: 100% / 32% 36% 32%;
2001         grid-template-areas:
2002                 "prev seq next";
2003 }
2004 .post-nav {
2005         display: flex;
2006         flex-flow: column;
2007         justify-content: flex-end;
2008         padding: 0.5em;
2009 }
2010
2011 .post-nav-title {
2012         font-size: 1.125em;
2013         line-height: 1.15;
2014         display: inline;
2015         border-top: 1px solid transparent;
2016 }
2017 .post-nav.prev .post-nav-title,
2018 .post-nav.next .post-nav-title {
2019         border-bottom: 1px solid transparent;
2020 }
2021
2022 .sequence-title {
2023         align-items: center;
2024         text-align: center;
2025         grid-area: seq;
2026 }
2027 .sequence-title .post-nav-title {
2028         font-size: 1.5em;
2029 }
2030
2031 .post-nav.prev {
2032         grid-area: prev;
2033         align-items: flex-start;
2034 }
2035 .post-nav.prev .post-nav-title::before {
2036         content: "\F0D9\2005";
2037 }
2038 .post-nav.next {
2039         grid-area: next;
2040         text-align: right;
2041         align-items: flex-end;
2042 }
2043 .post-nav.prev .post-nav-label,
2044 .post-nav.next .post-nav-label {
2045         display: none;
2046 }
2047 .post-nav.next .post-nav-title::after {
2048         content: "\2004\F0DA";
2049 }
2050 .post-nav.prev .post-nav-title::before,
2051 .post-nav.next .post-nav-title::after {
2052         font-family: Font Awesome;
2053         font-weight: 900;
2054         vertical-align: text-bottom;
2055         opacity: 0.75;
2056 }
2057 .post-nav-links {
2058         max-width: 100%;
2059 }
2060
2061 @media only screen and (max-width: 900px) {
2062         .post-nav-item {
2063                 font-size: 0.875em;
2064                 grid-template: auto auto / 50% 50%;
2065                 grid-template-areas:
2066                         "prev next"
2067                         "seq seq";
2068         }
2069         .post-nav.prev .post-nav-title,
2070         .post-nav.next .post-nav-title {
2071                 border-bottom: none;
2072         }
2073         .post-nav.prev {
2074                 margin: 0 0 0 -1px;
2075                 position: relative;
2076                 left: 1px;
2077         }
2078         .sequence-title {
2079                 padding: 0.75em 0;
2080         }
2081 }
2082 @media only screen and (max-width: 520px) {
2083         .post-nav-links + .comments {
2084                 padding: 1em 0 0 0;
2085         }
2086 }
2087
2088 .related-posts, .related-post-group {
2089         padding-bottom: 1em;
2090 }
2091 .related-post-type {
2092         font-size: 1.2em;
2093         font-weight: 600;
2094         margin-top: 0.5em;
2095         margin-bottom: -0.5em;
2096         list-style-type: disc;
2097         margin-left: -0.5em;
2098         opacity: 0.7;
2099 }
2100 .related-post-type::before {
2101         content: "\269c";
2102         margin-right: 0.15em;
2103 }
2104 .related-posts .post-type-prefix {
2105         display: none;
2106 }
2107
2108 /**************/
2109 /* LINK POSTS */
2110 /**************/
2111
2112 .post.link-post > .post-body > p:first-child {
2113         text-align: center;
2114         font-size: 1.125em;
2115         margin: 0.5em 0 0 0;
2116 }
2117 .post.link-post > .post-body > p:only-child {
2118         font-size: 1.5em;
2119         margin: 1em 0;
2120 }
2121 .post.link-post a.link-post-link::before {
2122         content: "\F0C1";
2123         font-family: "Font Awesome", "Font Awesome 5 Free";
2124         font-weight: 900;
2125         font-size: 0.75em;
2126         position: relative;
2127         top: -2px;
2128         margin-right: 0.25em;
2129 }
2130
2131 /************/
2132 /* COMMENTS */
2133 /************/
2134
2135 .comments {
2136         max-width: 100%;
2137         padding: 0 0 1px 0;
2138         position: relative;
2139 }
2140 .comments::before {
2141         content: "";
2142         position: absolute;
2143         display: block;
2144         top: 0;
2145         left: 0;
2146         width: 100%;
2147         height: 100%;
2148         pointer-events: none;
2149 }
2150 ul.comment-thread {
2151         list-style-type: none;
2152         padding: 0;
2153         max-width: 100%;
2154 }
2155 .comments .comment-thread > li {
2156         position: relative;
2157 }
2158 #content > #top-nav-bar + .comment-thread .comment-item {
2159         margin-top: 0;
2160 }
2161
2162 .comment-item {
2163         margin: 2em 0 0 0;
2164 }
2165 .comment-item .comment-item {
2166         margin: 1em 8px 8px 16px;
2167 }
2168 .comment-item .comment-item + .comment-item {
2169         margin: 2em 8px 8px 16px;
2170 }
2171
2172 .comment-body {
2173         line-height: 1.45;
2174         font-size: 1.2rem;
2175         padding: 10px;
2176 }
2177 .comment-body ul {
2178         list-style-type: circle;
2179 }
2180 .comment-body > *:first-child {
2181         margin-top: 0;
2182 }
2183 .comment-body > *:last-child {
2184         margin-bottom: 0;
2185 }
2186
2187 .comments-empty-message {
2188         width: 100%;
2189         text-align: center;
2190         padding: 0.75em 0 0.9em 0;
2191         font-size: 1.375em;
2192 }
2193
2194 /**********************************/
2195 /* DEEP COMMENT THREAD COLLAPSING */
2196 /**********************************/
2197
2198 .comment-item > input[id^="expand"] {
2199         display: none;
2200 }
2201 .comment-item > input[id^="expand"] + label {
2202         display: block;
2203         visibility: hidden;
2204         position: relative;
2205         margin: 8px 9px;
2206 }
2207 .comment-item > input[id^="expand"] + label::after {
2208         content: "(Expand " attr(data-child-count) "    below)";
2209         visibility: visible;
2210         position: absolute;
2211         left: 0;
2212         white-space: nowrap;
2213         cursor: pointer;
2214 }
2215 .comment-item > input[id^="expand"]:checked + label::after {
2216         content: "(Collapse " attr(data-child-count) "  below)";
2217 }
2218 .comment-item > input[id^="expand"] ~ .comment-thread {
2219         max-height: 34px;
2220         overflow: hidden;
2221 }
2222 .comment-item > input[id^="expand"] ~ .comment-thread > li:first-child {
2223         margin-top: 0;
2224 }
2225 .comment-item > input[id^="expand"]:checked ~ .comment-thread {
2226         max-height: 1000000px;
2227 }
2228
2229 .comment-item > input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
2230         margin: 0;
2231 }
2232 .comment-item > input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item a.comment-parent-link:hover::after {
2233         display: none;
2234 }
2235
2236 /*************/
2237 /* BACKLINKS */
2238 /*************/
2239
2240 .backlinks > input {
2241         display: none;
2242 }
2243
2244 .backlinks > label {
2245         margin-left: 10px;
2246         display: block;
2247         color: #00f;
2248         cursor: pointer;
2249 }
2250
2251 .backlinks > label::before {
2252         content: " ";
2253         border-left: 5px solid currentColor;
2254         border-top: 5px solid transparent;
2255         border-bottom: 5px solid transparent;
2256         transition: transform 0.25s ease-out;
2257         transform-origin: 29% 55%;
2258         display: inline-block;
2259         padding-right: 0.5em;
2260 }
2261
2262 .backlinks > input:checked + label::before {
2263         transform: rotate(90deg);
2264 }
2265
2266 .backlinks li {
2267         margin-top: 0;
2268 }
2269
2270 .backlinks > ul {
2271         height: 0;
2272         perspective-origin: top;
2273         transform: perspective(100em) rotateX(-90deg);
2274         transform-origin: center top;
2275         opacity: 0;
2276         margin-top: 0.5em;
2277         margin-bottom: 0.5em;
2278 }
2279
2280 .backlinks > input:checked ~ ul {
2281         height: auto;
2282         transform: perspective(100em) rotateX(0deg);
2283         transition: transform 0.25s ease-in, opacity 0.25s ease-in;
2284         opacity: 1;
2285 }
2286
2287 /****************/
2288 /* COMMENT-META */
2289 /****************/
2290
2291 .comment-meta {
2292         padding: 2px 24px 2px 10px;
2293         margin: 0 -1px;
2294         border: none;
2295         display: flex;
2296         flex-flow: row wrap;
2297         align-items: baseline;
2298 }
2299 .user-page .comment-meta,
2300 .conversation-page .comment-meta {
2301         padding-right: 10px;
2302 }
2303 .comment-meta .comment-post-title {
2304         flex-basis: 100%;
2305         overflow: hidden;
2306         text-overflow: ellipsis;
2307         line-height: 1.3;
2308 }
2309 .conversation-page .comment-meta .comment-post-title {
2310         margin: 0;
2311         flex-basis: unset;
2312         flex: 1 0 auto;
2313         text-align: right;
2314         display: none;  /* Not sure if we need to display this... */
2315 }
2316 .comment-item .author:not(.redacted).original-poster::after {
2317         content: "\2004(OP)";
2318         font-size: 0.75em;
2319 }
2320
2321 /*****************************/
2322 /* COMMENT THREAD NAVIGATION */
2323 /*****************************/
2324
2325 a.comment-parent-link:not(.inline-author),
2326 a.comment-parent-link.inline-author::before {
2327         opacity: 0.5;
2328 }
2329 a.comment-parent-link:hover {
2330         opacity: 1.0;
2331 }
2332 a.comment-parent-link::before {
2333         content: "\F062";
2334         font-family: "Font Awesome", "Font Awesome 5 Free";
2335         font-weight: 900;
2336         font-size: 0.75rem;
2337         line-height: 1;
2338         position: absolute;
2339         z-index: 1;
2340         display: block;
2341         padding: 3px 3px 0 3px;
2342         width: 16px;
2343         height: calc(100% + 2px);
2344         top: -1px;
2345         left: -17px;
2346 }
2347 a.comment-parent-link::after {
2348         content: "";
2349         position: absolute;
2350         z-index: 0;
2351         display: block;
2352         width: calc(100% + 26px);
2353         height: calc(100% + 38px);
2354         top: -29px;
2355         left: -17px;
2356         pointer-events: none;
2357         overflow: hidden;
2358         visibility: hidden;
2359 }
2360 a.comment-parent-link:hover::after {
2361         visibility: visible;
2362 }
2363
2364 .comment-child-links {
2365         flex-basis: 100%;
2366 }
2367 .comment-child-link {
2368         margin: 0 0.25em;
2369         display: inline-block;
2370 }
2371 .comment-child-link::before {
2372         content: ">";
2373         display: inline-block;
2374         margin: 0 2px 0 0;
2375 }
2376
2377 .comment-popup {
2378         position: fixed;
2379         top: 10%;
2380         right: 10%;
2381         max-width: 700px;
2382         z-index: 10001;
2383         font-size: 1rem;
2384         white-space: unset;
2385         pointer-events: none;
2386 }
2387 .comment-popup .comment-parent-link {
2388         display: none;
2389 }
2390 .comment-popup .comment-body {
2391         font-size: 1.0625rem;
2392 }
2393
2394 .comment-item.depth-odd {
2395         --GW-comment-background-color: var(--GW-comment-background-color-odd);
2396         --GW-comment-parent-background-color: var(--GW-comment-background-color-even);
2397 }
2398 .comment-item.depth-even {
2399         --GW-comment-background-color: var(--GW-comment-background-color-even);
2400         --GW-comment-parent-background-color: var(--GW-comment-background-color-odd);
2401 }
2402
2403 .comment-item:target {
2404         --GW-comment-background-color: var(--GW-comment-background-color-target);
2405 }
2406 .comment-item:target > .comment-thread > .comment-item {
2407         --GW-comment-parent-background-color: var(--GW-comment-background-color-target);
2408 }
2409
2410 /**********************/
2411 /* COMMENT PERMALINKS */
2412 /**********************/
2413 /********************/
2414 /* COMMENT LW LINKS */
2415 /********************/
2416
2417 .comment-meta .permalink::before,
2418 .comment-meta .lw2-link::before,
2419 .individual-thread-page a.comment-parent-link:empty::before {
2420         content: "";
2421         display: inline-block;
2422         width: 1rem;
2423         height: 1rem;
2424         border-radius: 3px;
2425         box-shadow:
2426                 0 0 0 1px #fff,
2427                 0 0 0 2px #00e,
2428                 0 0 0 3px transparent;
2429         padding: 0 0 0 2px;
2430         background-size: 100%;
2431         position: relative;
2432         top: 2px;
2433         opacity: 0.5;
2434 }
2435 .comment-meta .permalink::before {
2436         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/anchor-white-on-blue.gif")) ?>');
2437 }
2438 .comment-meta .lw2-link::before {
2439         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/lw-white-on-blue.gif")) ?>');
2440 }
2441 .individual-thread-page a.comment-parent-link:empty::before {
2442         left: unset;
2443         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/up-arrow-white-on-blue.gif")) ?>');
2444 }
2445 .comment-meta .permalink:hover::before {
2446         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/anchor-blue-on-white.gif")) ?>');
2447 }
2448 .comment-meta .lw2-link:hover::before {
2449         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/lw-blue-on-white.gif")) ?>');
2450 }
2451 .individual-thread-page a.comment-parent-link:empty:hover::before {
2452         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/up-arrow-blue-on-white.gif")) ?>');
2453 }
2454 .comment-meta .permalink:hover::before,
2455 .comment-meta .lw2-link:hover::before,
2456 .individual-thread-page a.comment-parent-link:empty:hover::before {
2457         box-shadow:
2458                 0 0 0 2px #00e,
2459                 0 0 0 3px transparent;
2460         opacity: 1.0;
2461         filter: unset;
2462 }
2463 .comment-meta .permalink:active::before,
2464 .comment-meta .lw2-link:active::before,
2465 .individual-thread-page a.comment-parent-link:empty:active::before {
2466         transform: scale(0.9);
2467 }
2468
2469 .comment-meta .permalink,
2470 .comment-meta .lw2-link,
2471 .individual-thread-page .comment-parent-link:empty {
2472         position: relative;
2473         opacity: 1.0;
2474 }
2475 .comment-meta .permalink::after,
2476 .comment-meta .lw2-link::after,
2477 .individual-thread-page .comment-parent-link:empty::after {
2478         content: "";
2479         width: 30px;
2480         height: 30px;
2481         display: block;
2482         position: absolute;
2483         top: -2px;
2484         left: -7px;
2485         box-shadow: none;
2486         pointer-events: auto;
2487         visibility: visible;
2488 }
2489
2490 /*************************/
2491 /* COMMENTS COMPACT VIEW */
2492 /*************************/
2493
2494 #comments-list-mode-selector,
2495 #content.index-page #comments-list-mode-selector,
2496 #content.user-page #comments-list-mode-selector {
2497         padding-top: 6px;
2498         grid-column: 1;
2499         position: unset;
2500         z-index: 1;
2501         justify-self: start;
2502         align-self: start;
2503 }
2504 #comments-list-mode-selector button {
2505         color: transparent;
2506         width: 32px;
2507         height: 32px;
2508         padding: 6px;
2509         margin: 1px;
2510         overflow: hidden;
2511         background-repeat: no-repeat;
2512         background-size: 100%;
2513         background-origin: content-box;
2514 }
2515 #comments-list-mode-selector button:disabled {
2516         cursor: auto;
2517 }
2518 #comments-list-mode-selector button.expanded {
2519         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/expanded_2x.gif")) ?>');
2520 }
2521 #comments-list-mode-selector button.compact {
2522         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/compact_2x.gif")) ?>');
2523 }
2524 @media only screen and (max-resolution: 1dppx) {
2525         #comments-list-mode-selector button.expanded {
2526                 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/expanded_1x.gif")) ?>');
2527         }
2528         #comments-list-mode-selector button.compact {
2529                 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/compact_1x.gif")) ?>');
2530         }
2531 }
2532
2533 #content > ul.comment-thread > li.comment-item,
2534 #content.compact > ul.comment-thread > li.comment-item {
2535         margin: 0;
2536 }
2537
2538 #content > .comment-thread {
2539         margin: 1em 0;
2540 }
2541 #content.compact > .comment-thread {
2542         font-size: 0.9375rem;
2543         margin: 0.5em 0;
2544 }
2545 #content.compact > .comment-thread:hover {
2546         z-index: 1;
2547 }
2548 #content.compact > .comment-thread .comment-body {
2549         font-size: 1.0625rem;
2550 }
2551 #content.compact > .comment-thread .comment-item,
2552 #content.index-page .comment-item.ignored,
2553 #content.inbox-user-page .comment-item.ignored {
2554         max-height: 61px;
2555         margin-top: 1em;
2556         overflow: hidden;
2557         position: relative;
2558 }
2559 #content.compact > .comment-thread .comment-item {
2560         pointer-events: none;
2561 }
2562 #content.compact > .comment-thread .comment-item::after {
2563         content: "…";
2564         position: absolute;
2565         right: 0;
2566         bottom: 0;
2567         font-size: 2rem;
2568         line-height: 1;
2569         padding: 0 16px 10px 64px;
2570         pointer-events: auto;
2571 }
2572 @media only screen and (hover: hover) {
2573         #content.compact:not(:focus-within) > .comment-thread .comment-item:hover,
2574         #content.compact > .comment-thread .comment-item.expanded {
2575                 overflow: visible;
2576                 pointer-events: auto;
2577                 z-index: 10;
2578         }
2579 }
2580 @media only screen and (hover: none) {
2581         #content.compact > .comment-thread.expanded .comment-item {
2582                 overflow: visible;
2583                 pointer-events: auto;
2584                 z-index: 10;
2585         }
2586 }
2587 #content.compact > .comment-thread .comment-item .comment-meta {
2588         white-space: nowrap;
2589         overflow: hidden;
2590         text-overflow: ellipsis;
2591         padding: 2px 10px;
2592 }
2593 #content.compact > .comment-thread .comment-item:hover .comment-meta {
2594         white-space: unset;
2595 }
2596 #content.compact > .comment-thread .comment-item .comment-meta a {
2597         pointer-events: auto;
2598 }
2599 #content.compact > .comment-thread .comment-item .comment-meta .comment-post-title {
2600         display: inline;
2601 }
2602 #content.compact > .comment-thread .comment-item .comment-meta .karma + .comment-post-title {
2603         margin-left: 0.75em;
2604 }
2605 @media only screen and (hover: hover) {
2606         #content.compact > .comment-thread:last-of-type .comment-item:hover,
2607         #content.compact > .comment-thread:last-of-type .comment-item.expanded {
2608                 max-height: unset;
2609         }
2610         #content.compact > .comment-thread .comment-item:hover .comment,
2611         #content.compact > .comment-thread .comment-item.expanded .comment {
2612                 position: relative;
2613                 z-index: 1;
2614                 margin-bottom: 2em;
2615                 bottom: 0;
2616         }
2617         #content.compact > .comment-thread .comment-item:hover .comment::before,
2618         #content.compact > .comment-thread .comment-item.expanded .comment::before{
2619                 content: "";
2620                 position: absolute;
2621                 display: block;
2622                 width: calc(100% + 20px);
2623                 height: calc(100% + 20px);
2624                 z-index: -1;
2625                 top: -10px;
2626                 left: -10px;
2627         }
2628         #content.compact > .comment-thread:last-of-type .comment-item:hover .comment,
2629         #content.compact > .comment-thread:last-of-type .comment-item.expanded .comment{
2630                 margin: 0;
2631         }
2632 }
2633 @media only screen and (hover: none) {
2634         #content.compact > .comment-thread.expanded:last-of-type .comment-item {
2635                 max-height: unset;
2636         }
2637         #content.compact > .comment-thread.expanded .comment-item .comment {
2638                 position: relative;
2639                 z-index: 1;
2640                 margin-bottom: 2em;
2641                 bottom: 0;
2642         }
2643         #content.compact > .comment-thread.expanded .comment-item .comment::before {
2644                 content: "";
2645                 position: absolute;
2646                 display: block;
2647                 width: calc(100% + 14px);
2648                 height: calc(100% + 20px);
2649                 z-index: -1;
2650                 top: -10px;
2651                 left: -10px;
2652         }
2653         #content.compact > .comment-thread.expanded:last-of-type .comment-item .comment {
2654                 margin: 0;
2655         }
2656         #content.compact > .comment-thread.expanded .comment-item .comment::after {
2657                 content: "";
2658                 display: block;
2659                 position: fixed;
2660                 top: 0;
2661                 left: 0;
2662                 width: 100%;
2663                 height: 100%;
2664                 z-index: -2;
2665                 background-color: rgba(0,0,0,0.5);
2666         }
2667 }
2668
2669 /*****************************/
2670 /* HIGHLIGHTING NEW COMMENTS */
2671 /*****************************/
2672
2673 .new-comment::before {
2674         content: "";
2675         position: absolute;
2676         width: 100%;
2677         height: 100%;
2678         z-index: 5000;
2679         pointer-events: none;
2680 }
2681
2682 /***********************************/
2683 /* COMMENT THREAD MINIMIZE BUTTONS */
2684 /***********************************/
2685
2686 .comment-minimize-button {
2687         font-family: "Font Awesome", "Font Awesome 5 Free";
2688         font-weight: 900;
2689         font-size: 1.25rem;
2690         line-height: 1;
2691         position: absolute;
2692         right: 1px;
2693         top: 1px;
2694         width: 18px;
2695         margin: 0;
2696         cursor: pointer;
2697 }
2698 .comment-minimize-button:active {
2699         transform: scale(0.9);
2700 }
2701 .comment-minimize-button::after {
2702         content: attr(data-child-count);
2703         font-weight: normal;
2704         font-size: 0.8125rem;
2705         position: absolute;
2706         left: 0;
2707         width: 100%;
2708         text-align: center;
2709         top: 21px;
2710 }
2711 #content.individual-thread-page .comment-minimize-button {
2712         display: none;
2713 }
2714
2715 /*****************/
2716 /* IGNORE SYSTEM */
2717 /*****************/
2718
2719 #content.comment-thread-page .comment-item.ignored {
2720         height: 38px;
2721         overflow: hidden;
2722 }
2723 .comment-item.ignored > .comment > .comment-meta > .author {
2724         text-decoration: line-through;
2725 }
2726
2727 /***********************************/
2728 /* INDIVIDUAL COMMENT THREAD PAGES */
2729 /***********************************/
2730
2731 .individual-thread-page > h1 {
2732         line-height: 1;
2733         margin: 0.75em 0 3px 0;
2734 }
2735 .individual-thread-page .comments {
2736         border: none;
2737 }
2738
2739 /*************/
2740 /* SHORTFORM */
2741 /*************/
2742
2743 .shortform-index-page .comments::before {
2744         border: none;
2745         box-shadow: none;
2746 }
2747
2748 .shortform-index-page .comments > .comment-thread > .comment-item:first-child {
2749         margin-top: 0;
2750 }
2751
2752 /****************/
2753 /* VOTE BUTTONS */
2754 /****************/
2755
2756 .vote {
2757         margin: 0;
2758 }
2759 .vote {
2760         font-family: "Font Awesome", "Font Awesome 5 Free";
2761         font-weight: 900;
2762         border: none;
2763 }
2764
2765 .vote:disabled {
2766         visibility: hidden;
2767         cursor: default;
2768 }
2769
2770 .karma.waiting {
2771         opacity: 0.5;
2772 }
2773 .karma.waiting button {
2774         pointer-events: none;
2775 }
2776
2777 /* Replicated karma controls at bottom of comments. */
2778 .comment-controls .karma {
2779         float: left;
2780         margin-left: -14px;
2781         font-size: 0.9375em;
2782 }
2783
2784 /*****************************/
2785 /* COMMENTING AND POSTING UI */
2786 /*****************************/
2787
2788 .comment-controls {
2789         text-align: right;
2790         margin: 0 8px 8px 16px;
2791         position: relative;
2792         z-index: 9999;
2793 }
2794 .comment-thread .comment-controls + .comment-thread > li:first-child {
2795         margin-top: 8px;
2796 }
2797 .comments > .comment-controls {
2798         margin: 8px 0 0 0;
2799 }
2800 .comments > .comment-controls:last-child {
2801         margin: 8px 0 16px 0;
2802 }
2803
2804 .posting-controls input[type='submit'] {
2805         margin: 6px;
2806         padding: 4px 10px;
2807         font-size: 1.125rem;
2808 }
2809
2810 .comment-controls .cancel-comment-button {
2811         position: absolute;
2812         right: 0;
2813         margin: 0;
2814         height: 27px;
2815         font-size: inherit;
2816         padding: 4px 8px 2px 4px;
2817         z-index: 1;
2818 }
2819 .comment-controls .cancel-comment-button::before {
2820         font-family: "Font Awesome", "Font Awesome 5 Free";
2821         margin-right: 3px;
2822         content: '\F00D';
2823         font-weight: 900;
2824         font-size: 0.9em;
2825         opacity: 0.7;
2826 }
2827
2828 .comment + .comment-controls .action-button {
2829         font-weight: normal;
2830         font-size: 1.0625em;
2831         padding: 1px 6px;
2832 }
2833 .comment-controls .action-button::before {
2834         font-family: "Font Awesome", "Font Awesome 5 Free";
2835         margin-right: 3px;
2836 }
2837 .new-comment-button {
2838         font-size: 1.5rem;
2839         margin: 0 0.25em;
2840 }
2841 .comment-controls .reply-button::before {
2842         content: '\F3E5';
2843         font-weight: 900;
2844         font-size: 0.9em;
2845         opacity: 0.6;
2846 }
2847 .comment-meta .replied::before {
2848         content: '\F3E5';
2849         font-family: "Font Awesome", "Font Awesome 5 Free";
2850         color: #090;
2851         font-weight: 900;
2852         font-size: 0.9em;
2853         opacity: 0.6;
2854 }
2855
2856 .post-controls {
2857         text-align: right;
2858         margin: 0.75em 0 0 0;
2859         align-self: start;
2860         justify-self: end;
2861 }
2862 .edit-post-link {
2863         display: inline-block;
2864         margin-bottom: 0.25em;
2865         font-size: 1.125rem;
2866 }
2867 .edit-post-link::before {
2868         margin-right: 0.3em;
2869 }
2870 .comment-controls .edit-button::before,
2871 .edit-post-link::before {
2872         content: '\F303';
2873         font-family: "Font Awesome", "Font Awesome 5 Free";
2874         font-weight: 900;
2875         font-size: 0.75em;
2876         position: relative;
2877         top: -1px;
2878 }
2879
2880 .comment-controls .delete-button {
2881         margin-right: 0.25em;
2882 }
2883 .comment-controls .edit-button,
2884 .comment-controls .retract-button,
2885 .comment-controls .unretract-button {
2886         margin-right: 1em;
2887 }
2888 .comment-controls .retract-button::before {
2889         content: '\F4B3';
2890         opacity: 0.6;
2891 }
2892 .comment-controls .unretract-button::before {
2893         content: '\F075';
2894         opacity: 0.9;
2895 }
2896 .comment-controls .delete-button::before {
2897         content: '\F05E';
2898         opacity: 0.7;
2899 }
2900 .comment-controls .retract-button::before,
2901 .comment-controls .unretract-button::before,
2902 .comment-controls .delete-button::before {
2903         font-weight: 900;
2904         font-size: 0.9em;
2905 }
2906
2907 .comment-controls form {
2908         position: relative;
2909 }
2910 .textarea-container {
2911         position: relative;
2912 }
2913 .posting-controls textarea {
2914         display: block;
2915         width: 100%;
2916         height: 15em;
2917         min-height: 15em;
2918         max-height: calc(100vh - 6em);
2919         margin: 2px 0 0 0;
2920         padding: 4px 5px;
2921         font-size: 1.2rem;
2922         border-style: solid;
2923         border-width: 29px 1px 1px 1px;
2924         resize: none;
2925 }
2926
2927 /* GUIEdit buttons */
2928
2929 .guiedit-buttons-container {
2930         position: absolute;
2931         left: 1px;
2932         top: 1px;
2933         width: calc(100% - 2px);
2934         height: 28px;
2935         text-align: left;
2936         padding: 1px 4px 0 4px;
2937         overflow: hidden;
2938 }
2939 .comment-thread-page .guiedit-buttons-container {
2940         padding-right: 60px;
2941 }
2942 .guiedit-buttons-container button {
2943         height: 26px;
2944         padding: 0 7px;
2945         font-weight: 900;
2946         font-size: 0.875rem;
2947         line-height: 1;
2948         position: static;
2949 }
2950 .guiedit-buttons-container button:active {
2951         transform: none;
2952 }
2953 .guiedit-buttons-container button:active div {
2954         transform: scale(0.9);
2955 }
2956 .guiedit-buttons-container button sup {
2957         font-weight: bold;
2958 }
2959 .guiedit::after {
2960         content: attr(data-tooltip);
2961         position: absolute;
2962         font-weight: normal;
2963         font-size: 1rem;
2964         top: 2px;
2965         left: 464px;
2966         height: 25px;
2967         padding: 4px 0;
2968         white-space: nowrap;
2969         visibility: hidden;
2970 }
2971 .guiedit:hover::after {
2972         visibility: visible;
2973 }
2974
2975 /* Markdown hints */
2976
2977 .posting-controls .markdown-reference-link {
2978         float: left;
2979         padding: 1px 0 0 6px;
2980 }
2981 .posting-controls .markdown-reference-link a {
2982         padding-right: 1.5em;
2983         margin-right: 0.15em;
2984         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAQAAABNTyozAAAEDklEQVR4Ae3cY3QDjRaG0V1e27Zt27Zt27Ztf7Zt27Zt10jOdZtZzbSN2q41533+tsFO4zRi0TKRJVACJdDiJVACJVACJVACZQmUQAmUQAmUQAmUQFkCJVACJVACJVACJVDWuD7P8icnGRcVbdyJ/uRZ+jTZYxwq/lN2qMcozvtMibmySe/TsPeqi0JZ3XsAHm1SZAua9CjgoMQo6UB4uiim5gbXV7Ab1EQxT+P3RRw/dHtV3e39UL3g8XuOEw39QNX3g4LHcYwU/n5uo+q7beGKNqLwJ3U1cteKuepEQ1cid03BJIESKIESKIESKIESaIkl0I3dv7Q7a293c//ShrWym7l/abdbGaCnidJGPFzre6opUdqDtLJXitJ+svpA4Uy30dru6hJRHaCws37L37CDRbWAwvctf38S1QOqe43l7f2iikDheg+x9J5ksqpA4TS3svju5CJRXaCwvX7lG3KAqDZQ+Jby/U4kUM0rNN+7hAQSrvNAC/c4Ewn0/052C8Xd0fkigebbRp/5DdpHJFCxr5nfr4QEUqzmJYC3iQRq1jXuj8cYT6CyTnAv54oEKm9EJFBnJVAC7eoS0XJn2r8qQP/wNFOipUY8wvbVAeIjooXq3ki1gPhHC0A/oWWgQZ/37ZI2FaUdVPpb33LHlQS6scPFstrDQBtAvEpNdLEfsZJA3N3lYsnOcTvaAuKzomttqW+lgXimabFoYx5N20D8SXSlw9yElQfiE0J5dW+lI6BBu4uOO8+dWB0g1hel/YIOgbiVE0VHXefhrB7QTRwtmra3gS4AcW+Xibab8SJWE4h7uaLpn/Ud6AoQTzIu2uzDrDYQzzUjCo17HF0D4g3qoo1+yWoCld8hv5OuAvFl0XLb6V8rQGws5votXQfqs45oqaPdjLUDdNO5f7Xa32APgBhu6b2SC92VtQTEfVwlXOhO9ASI2zhNLKsRj2atAfFCo55Iz4C4nyvFks16OWsRiPvQUyCeblIs0adYq0B6DsTb1EV5fk+1gfiWKG0XAwnUZyPRtOPdggTiRg4UC7rEPUkg4PbOFIXGPIEEmt+DCmeu5rUkUHHPaXj76Qsk0MK9R/ynv5FAzfdDYS9Da+n/xe6ovd2lS/8vVlyfH7o1vQLKJVACJVACJVACJVACIYGW/A6z/A6zG8RcNbdT9d1eTcx1A8eKhn6s6vtxweNYfisaqvupu+jXV8H63cXP1Asev+Wpopi6aVMVbFpdFPMUlP6jdrY/8AgTYkHZhEcAvFNdFMpq3qFh78y/okIT3qk4j8zborn290hN91S/c6zrzapVsFnXO9bvPFXjYtEykSVQAnVUAiVQAiVQAiVQAiVQlkAJlEAJlEAJlEAJlCVQAiVQAiVQAiVQAmX/BMHb3CdNrgcrAAAAAElFTkSuQmCC');
2985         background-size: 1.25em;
2986         background-repeat: no-repeat;
2987         background-position: right center;
2988 }
2989
2990 #markdown-hints-checkbox + label {
2991         float: left;
2992         margin: 2px 0 0 1em;
2993         line-height: 1.3;
2994         cursor: pointer;
2995 }
2996 #edit-post-form #markdown-hints-checkbox + label {
2997         padding: 0;
2998 }
2999 #markdown-hints-checkbox {
3000         visibility: hidden;
3001         float: left;
3002 }
3003 #markdown-hints-checkbox + label::after {
3004         content: "(Show Markdown help)";
3005 }
3006 #markdown-hints-checkbox:checked + label::after {
3007         content: "(Hide Markdown help)";
3008 }
3009 #markdown-hints-checkbox + label::before {
3010         content: '\F059';
3011         font-family: "Font Awesome", "Font Awesome 5 Free";
3012         font-weight: 900;
3013         margin-right: 3px;
3014 }
3015 #markdown-hints-checkbox:checked + label::before {
3016         font-weight: normal;
3017 }
3018 #markdown-hints {
3019         margin: 4px 0 0 4px;
3020         padding: 4px 8px;
3021         position: absolute;
3022         text-align: left;
3023         top: calc(100% - 1em);
3024         z-index: 1;
3025         display: none;
3026 }
3027 .comment-controls #markdown-hints {
3028         top: calc(100% + 1.75em);
3029 }
3030 #markdown-hints-checkbox:checked ~ #markdown-hints {
3031         display: table;
3032 }
3033 .markdown-hints-row {
3034         display: table-row;
3035 }
3036 #markdown-hints .markdown-hints-row span,
3037 #markdown-hints .markdown-hints-row code {
3038         float: none;
3039         display: table-cell;
3040         border: none;
3041         background-color: inherit;
3042         padding: 0 12px 0 0;
3043 }
3044
3045 /******************/
3046 /* EDIT POST FORM */
3047 /******************/
3048
3049 #edit-post-form {
3050         padding: 1em 1em 4em 1em;
3051 }
3052 #edit-post-form .post-meta-fields {
3053         display: grid;
3054         grid-template-columns: 5em auto auto auto 1fr auto;
3055         margin-bottom: 0.625em;
3056 }
3057
3058 #edit-post-form label[for='title'],
3059 #edit-post-form label[for='url'],
3060 #edit-post-form label[for='section'] {
3061         grid-column: 1;
3062 }
3063 #edit-post-form input[type='text'] {
3064         padding: 0.25em;
3065         grid-column: 2 / span 4;
3066         margin-bottom: 0.5em;
3067 }
3068
3069 #edit-post-form .link-post-checkbox,
3070 #edit-post-form .link-post-checkbox + label {
3071         grid-row: 1;
3072         grid-column: 6;
3073 }
3074 #edit-post-form .question-checkbox,
3075 #edit-post-form .question-checkbox + label {
3076         grid-row: 3;
3077         grid-column: 5;
3078         justify-self: start;
3079         margin-left: 1.5em;
3080 }
3081
3082 #edit-post-form .post-meta-fields label[for="submit-to-frontpage"] {
3083         grid-row: 4;
3084         grid-column: 2 / span 4;
3085         text-align: left;
3086         margin-top: 8px;
3087 }
3088
3089 #edit-post-form .post-meta-fields input[type='checkbox'] {
3090         height: 0;
3091         opacity: 0;
3092         pointer-events: none;
3093 }
3094 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
3095         white-space: nowrap;
3096         position: relative;
3097         cursor: pointer;
3098         padding: 0.25em 0.5em 0.25em calc(20px + 0.25em + 0.3725em);
3099         align-self: start;
3100 }
3101 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
3102         content: "";
3103         font-family: "Font Awesome", "Font Awesome 5 Free";
3104         font-size: 1.375rem;
3105         line-height: 0.7;
3106         text-indent: 1px;
3107         font-weight: 900;
3108         position: absolute;
3109         width: 20px;
3110         height: 20px;
3111         left: 5px;
3112 }
3113 #edit-post-form label[for='url'],
3114 #edit-post-form input[name='url'] {
3115         display: none;
3116 }
3117 #edit-post-form .link-post-checkbox:checked ~ label[for='url'],
3118 #edit-post-form .link-post-checkbox:checked ~ input[name='url'] {
3119         display: initial;
3120 }
3121 #edit-post-form label {
3122         line-height: normal;
3123         border: 1px solid transparent;
3124         text-align: right;
3125     padding: 0.25em 0.5em;
3126     white-space: nowrap;
3127 }
3128 #edit-post-form input[type='radio'] {
3129         width: 0;
3130         margin: 0;
3131         opacity: 0;
3132         pointer-events: none;
3133 }
3134 #edit-post-form input[type='radio'] + label {
3135         padding: 4px 12px;
3136         text-align: center;
3137         border-style: solid;
3138         border-width: 1px 1px 1px 0;
3139         cursor: pointer;
3140 }
3141 #edit-post-form input[type='radio']:checked + label {
3142         cursor: default;
3143 }
3144
3145 #edit-post-form label[for='section'] {
3146         grid-row: 3;
3147 }
3148 #edit-post-form input[type='radio'] + label {
3149         grid-row: 3;
3150 }
3151 <?php fit_content("#edit-post-form input[type='radio'] + label"); ?>
3152
3153 #edit-post-form textarea {
3154         min-height: 24em;
3155 }
3156
3157 #edit-post-form input[type='submit'] {
3158         padding: 6px 12px;
3159         float: right;
3160 }
3161 #edit-post-form #markdown-hints {
3162         top: calc(100% + 2em);
3163 }
3164
3165 #edit-post-form button.guiedit div {
3166         overflow: visible;
3167 }
3168 .guiedit-mobile-auxiliary-button {
3169         display: none;
3170 }
3171
3172 /***********/
3173 /* BUTTONS */
3174 /***********/
3175
3176 button,
3177 input[type='submit'] {
3178         font-family: inherit;
3179         font-size: inherit;
3180         background-color: inherit;
3181         cursor: pointer;
3182         border: none;
3183         border-radius: 0;
3184 }
3185
3186 /************/
3187 /* HEADINGS */
3188 /************/
3189
3190 .body-text h1,
3191 .body-text h2,
3192 .body-text h3,
3193 .body-text h4,
3194 .body-text h5,
3195 .body-text h6 {
3196         line-height: 1.1;
3197         margin: 1em 0 0.75em 0;
3198         text-align: left;
3199 }
3200
3201 .post-body h5,
3202 .post-body h6 {
3203         font-size: 1em;
3204 }
3205 .post-body h4 {
3206         font-size: 1.2em;
3207 }
3208 .post-body h3 {
3209         font-size: 1.4em;
3210 }
3211 .post-body h2 {
3212         font-size: 1.75em;
3213 }
3214 .post-body h1 {
3215         font-size: 2.1em;
3216 }
3217
3218 .comment-body h5,
3219 .comment-body h6 {
3220         font-size: 1em;
3221 }
3222 .comment-body h4 {
3223         font-size: 1.15em;
3224 }
3225 .comment-body h3 {
3226         font-size: 1.3em;
3227 }
3228 .comment-body h2 {
3229         font-size: 1.5em;
3230 }
3231 .comment-body h1 {
3232         font-size: 1.75em;
3233 }
3234
3235 /**********/
3236 /* QUOTES */
3237 /**********/
3238
3239 blockquote,
3240 .post-body .comment-box .comment-body {
3241         font-size: 0.9em;
3242         margin: 1em 0;
3243         padding-left: 0.5em;
3244         margin-left: 1px;
3245         padding-bottom: 3px;
3246 }
3247 blockquote *:first-child {
3248         margin-top: 0;
3249 }
3250 blockquote *:last-child {
3251         margin-bottom: 0;
3252 }
3253 blockquote blockquote {
3254         font-size: 0.95em;
3255 }
3256
3257 /* Pseudo-blockquotes that LW sometimes uses for some reason */
3258
3259 .post-body .comment-box .user-name {
3260         font-style: italic;
3261 }
3262 .post-body .comment-box .user-name::after {
3263         content: ":";
3264 }
3265 .post-body .comment-box {
3266         zoom: 1.25;
3267 }
3268
3269 /**********/
3270 /* IMAGES */
3271 /**********/
3272
3273 #content img, #content figure {
3274         max-width: 100%;
3275 }
3276
3277 .prediction-poll > svg {
3278         width: 700px;
3279         max-width: 100%;
3280 }
3281
3282 img.inline-latex {
3283         position: relative;
3284         top: 2.5px;
3285         margin: 0 2px;
3286 }
3287
3288 #content figure {
3289         text-align: center;
3290         margin: 1.5em auto;
3291 }
3292
3293 p.imgonly,
3294 div.imgonly,
3295 figure {
3296         text-align: center;
3297         margin: auto;
3298         clear: both;
3299 }
3300
3301 .imgonly iframe {
3302         display: block;
3303         width: 100%;
3304         height: 250px;
3305         border: 0;
3306 }
3307
3308 // Aspect ratio trick from https://css-tricks.com/aspect-ratio-boxes/
3309
3310 [style*="--aspect-ratio"] > * {
3311         width: 100%;
3312 }
3313 [style*="--aspect-ratio"] > img {
3314         height: auto;
3315 }
3316 @supports (--custom:property) {
3317         [style*="--aspect-ratio"] {
3318                 position: relative;
3319         }
3320         [style*="--aspect-ratio"]::before {
3321                 content: "";
3322                 display: block;
3323                 padding-bottom: calc(100% / (var(--aspect-ratio)));
3324         }
3325         [style*="--aspect-ratio"] > * {
3326                 position: absolute;
3327                 top: 0;
3328                 left: 0;
3329                 height: 100%;
3330         }
3331 }
3332
3333 /**********/
3334 /* TABLES */
3335 /**********/
3336
3337 .body-text table {
3338         border-collapse: collapse;
3339         font-family: Inconsolata, Menlo, monospace;
3340         font-size: 0.875em;
3341 }
3342 .body-text table th,
3343 .body-text table td {
3344         text-align: left;
3345         padding: 4px 6px;
3346         line-height: 1.3;
3347 }
3348 .body-text table caption {
3349         margin: 0 0 0.25em 0;
3350         font-weight: bold;
3351         font-size: 1.125em;
3352 }
3353
3354 /********/
3355 /* MISC */
3356 /********/
3357
3358 /*= Superscripts & subscripts =*/
3359
3360 /*      Make sure superscripts and subscripts do not affect line spacing. */
3361 sup, sub {
3362         vertical-align: baseline;
3363         position: relative;
3364         top: -0.5em;
3365         left: 0.05em;
3366         font-size: 0.8em;
3367 }
3368 sub {
3369         top: 0.3em;
3370 }
3371
3372 /*= Code blocks & other "unstyled" text. =*/
3373
3374 pre,
3375 code {
3376         font-family: Inconsolata, Menlo, monospace;
3377 }
3378 pre {
3379         white-space: pre-wrap;
3380 }
3381 .body-text pre {
3382         text-align: left;
3383 }
3384 code {
3385         font-size: 0.95em;
3386         display: inline-block;
3387         padding: 0 4px 1px 5px;
3388 }
3389 pre > code {
3390         display: block;
3391         border-radius: 0;
3392         padding: 3px 4px 5px 8px;
3393 }
3394
3395 /*= Fractions =*/
3396
3397 .frac::after {
3398         content: "\200B";
3399 }
3400
3401 /*= Removing browser default styling of various elements =*/
3402
3403 /*      On various input elements such as text fields and buttons, remove "blue glow" focus outlines on Macs, dotted black outlines in Firefox, etc. */
3404 :focus {
3405         outline: none;
3406 }
3407
3408 /*      Remove "embossed" appearance of horizontal rules. */
3409 hr {
3410         border: none;
3411 }
3412
3413 input,
3414 button,
3415 textarea {
3416         -webkit-appearance: none;
3417         -moz-appearance: none;
3418         appearance: none;
3419 }
3420
3421 input {
3422         font-family: inherit;
3423         font-size: inherit;
3424         font-weight: inherit;
3425 }
3426
3427 /*************/
3428 /* FOOTNOTES */
3429 /*************/
3430
3431 ol {
3432         counter-reset: ordered-list;
3433 }
3434 .footnote-definition {
3435         font-size: 0.9em;
3436         list-style-type: none;
3437         counter-increment: ordered-list;
3438         position: relative;
3439 }
3440 .footnote-definition p {
3441         font-size: inherit !important;
3442 }
3443 .footnote-definition::before {
3444         content: counter(ordered-list) ".";
3445         position: absolute;
3446         left: -2.5em;
3447         font-weight: bold;
3448         text-align: right;
3449         width: 2em;
3450 }
3451
3452 /*********/
3453 /* LISTS */
3454 /*********/
3455
3456 li {
3457         margin-bottom: 0.5em;
3458 }
3459
3460 .body-text ol p,
3461 .body-text ul p {
3462         margin: 0.5em 0;
3463 }
3464
3465 .body-text ol {
3466         list-style: none;
3467         padding: 0;
3468         counter-reset: ol;
3469 }
3470 .body-text ol > li {
3471         position: relative;
3472         counter-increment: ol;
3473         padding: 0 0 0 2.5em;
3474         margin: 0.25em 0 0 0;
3475 }
3476 .body-text ol > li::before {
3477         content: counter(ol) ".";
3478         position: absolute;
3479         width: 2em;
3480         text-align: right;
3481         left: 0;
3482 }
3483 .body-text ul {
3484         list-style: none;
3485         padding: 0;
3486 }
3487 .body-text ul:not(.contents-list) > li:empty {
3488         padding-bottom: 1.25em;
3489 }
3490 .body-text ul:not(.contents-list) > li {
3491         position: relative;
3492         padding: 0 0 0 1.75em;
3493         margin: 0.25em 0 0 0;
3494 }
3495 .body-text ul:not(.contents-list) > li ul > li {
3496         padding: 0 0 0 2em;
3497 }
3498 .body-text ul:not(.contents-list) > li::before {
3499         content: "•";
3500         position: absolute;
3501         width: 1.25em;
3502         text-align: right;
3503         left: 0;
3504 }
3505 .body-text ul:not(.contents-list) > li ul > li::before {
3506         width: 1.5em;
3507 }
3508 .body-text li > ul:first-child > li {
3509         padding-left: 0;
3510 }
3511 .body-text li > ul:first-child > li::before {
3512         content: none;
3513 }
3514
3515 /**************/
3516 /* ERROR PAGE */
3517 /**************/
3518
3519 .error-retry-form {
3520         margin: 0.5em 0;
3521 }
3522
3523 .error-retry-form input[type="submit"] {
3524         border: 1px solid #aaa;
3525         font-weight: bold;
3526         font-size: 1.125rem;
3527         padding: 0.5em 1.25em;
3528 }
3529
3530 /**************/
3531 /* ABOUT PAGE */
3532 /**************/
3533
3534 #content.about-page .contents {
3535         margin-top: 0.25em;
3536 }
3537 #content.about-page .accesskey-table {
3538         border-collapse: collapse;
3539         margin: auto;
3540 }
3541 #content.about-page .accesskey-table th,
3542 #content.about-page .accesskey-table td {
3543         padding: 2px 6px;
3544 }
3545 #content.about-page .accesskey-table td:first-child {
3546         padding-right: 1.5em;
3547 }
3548 #content.about-page .accesskey-table td:last-child {
3549         text-align: center;
3550         font-family: Inconsolata, Menlo, monospace;
3551 }
3552 #content.about-page h3:nth-of-type(n+2) {
3553         clear: both;
3554 }
3555
3556 /******************/
3557 /* IMAGES OVERLAY */
3558 /******************/
3559
3560 #images-overlay + #content .post-body img {
3561         visibility: hidden;
3562 }
3563
3564 #images-overlay div {
3565         position: absolute;
3566 }
3567 #images-overlay div::after {
3568         content: "Click to enlarge";
3569         display: block;
3570         position: absolute;
3571         margin: auto;
3572         left: 0;
3573         right: 0;
3574         bottom: 10px;
3575         padding: 6px 10px;
3576         font-size: 1.25rem;
3577         background-color: rgba(0,0,0,0.6);
3578         color: #fff;
3579         border-radius: 5px;
3580         opacity: 0.0;
3581         transition: opacity 0.15s ease;
3582         pointer-events: none;
3583 }
3584 <?php fit_content("#images-overlay div::after"); ?>
3585 #images-overlay div:hover::after {
3586         opacity: 1.0;
3587 }
3588
3589 #images-overlay img {
3590         width: 100%;
3591 }
3592
3593 /***************/
3594 /* IMAGE FOCUS */
3595 /***************/
3596
3597 /*=--------------=*/
3598 /*= Hover styles =*/
3599 /*=--------------=*/
3600
3601 #content img:hover,
3602 #images-overlay img:hover {
3603         filter: drop-shadow(0 0 3px #777);
3604         cursor: zoom-in;
3605 }
3606 #content img:active,
3607 #images-overlay img:active {
3608         transform: scale(0.975);
3609 }
3610
3611 /*=---------=*/
3612 /*= Overlay =*/
3613 /*=---------=*/
3614
3615 #image-focus-overlay {
3616         position: fixed;
3617         top: 0;
3618         right: 0;
3619         bottom: 0;
3620         left: 0;
3621         z-index: 2;
3622         display: none;
3623         cursor: zoom-out;
3624 }
3625 #image-focus-overlay::before {
3626         content: "";
3627         display: block;
3628         position: absolute;
3629         top: 0;
3630         right: 0;
3631         bottom: 0;
3632         left: 0;
3633         background-color: #000;
3634         opacity: 0.5;
3635         z-index: -1;
3636 }
3637 #image-focus-overlay.engaged {
3638         display: initial;
3639 }
3640
3641 #image-focus-overlay img {
3642         margin: auto;
3643         position: absolute;
3644         left: 50%;
3645         top: 50%;
3646         transform: translateX(-50%) translateY(-50%);
3647 }
3648
3649 /*=-------------------=*/
3650 /*= Single-image mode =*/
3651 /*=-------------------=*/
3652
3653 #image-focus-overlay:not(.slideshow) .image-number,
3654 #image-focus-overlay:not(.slideshow) .slideshow-buttons {
3655         visibility: hidden;
3656 }
3657
3658 /*=---------=*/
3659 /*= Caption =*/
3660 /*=---------=*/
3661
3662 #image-focus-overlay .caption {
3663         position: absolute;
3664         bottom: 0.75em;
3665         background-color: rgba(0,0,0,0.7);
3666         left: 9em;
3667         right: 9em;
3668         margin: auto;
3669         max-width: calc(100% - 18em);
3670         text-align: center;
3671         font-size: 1.375em;
3672         border-radius: 8px;
3673         z-index: 1;
3674         transition:
3675                 bottom 0.2s ease;
3676 }
3677 <?php fit_content("#image-focus-overlay .caption"); ?>
3678 #image-focus-overlay .caption.hidden {
3679         bottom: -5em;
3680         transition:
3681                 bottom 0.5s ease;
3682 }
3683
3684 #image-focus-overlay .caption p {
3685         margin: 1em 1.25em;
3686         color: #fff;
3687 }
3688
3689 #image-focus-overlay .caption:not(:empty)::before {
3690         content: "";
3691         display: block;
3692         position: absolute;
3693         width: 100vw;
3694         height: calc(100% + 1.5em);
3695         z-index: -1;
3696         top: -0.75em;
3697         left: calc(-50vw + 50%);
3698
3699 }
3700
3701 /*=--------------=*/
3702 /*= Help overlay =*/
3703 /*=--------------=*/
3704
3705 #image-focus-overlay .help-overlay {
3706         position: absolute;
3707         display: flex;
3708         flex-flow: column;
3709         z-index: 2;
3710         font-size: 1.5rem;
3711         padding: 1em;
3712         border-radius: 10px;
3713         bottom: 1em;
3714         right: 1em;
3715         overflow: hidden;
3716         white-space: nowrap;
3717         color: transparent;
3718         cursor: default;
3719         visibility: hidden;
3720         transition:
3721                 visibility 1s ease,
3722                 color 1s ease,
3723                 background-color 1s ease,
3724                 bottom 0.3s ease;
3725 }
3726 #image-focus-overlay .help-overlay:hover {
3727         max-width: 24em;
3728         max-height: 14em;
3729         background-color: rgba(0,0,0,0.85);
3730         color: #fff;
3731         visibility: visible;
3732         transition:
3733                 visibility 0.2s ease 0.3s,
3734                 color 0.2s ease 0.3s,
3735                 background-color 0.2s ease 0.3s;
3736 }
3737
3738 #image-focus-overlay .help-overlay::after {
3739         content: "\F128";
3740         font-family: "Font Awesome", "Font Awesome 5 Free";
3741         font-weight: 900;
3742         font-size: 2rem;
3743         position: absolute;
3744         right: 0;
3745         bottom: 0;
3746         padding: 10px;
3747         color: #000;
3748         filter: drop-shadow(0 0 6px #fff);
3749         visibility: visible;
3750         opacity: 0.85;
3751         transition:
3752                 visibility 1s ease;
3753 }
3754 #image-focus-overlay .help-overlay:hover::after {
3755         visibility: hidden;
3756         transition:
3757                 visibility 0.2s ease 0.3s;
3758 }
3759
3760 #image-focus-overlay .help-overlay p {
3761         margin: 0;
3762         text-indent: -2em;
3763         padding-left: 2em;
3764         max-width: 100%;
3765         overflow: hidden;
3766 }
3767 #image-focus-overlay .help-overlay p + p {
3768         margin: 0.75em 0 0 0;
3769 }
3770 #image-focus-overlay .help-overlay.hidden {
3771         bottom: -2em;
3772 }
3773
3774 /*=--------------=*/
3775 /*= Slide number =*/
3776 /*=--------------=*/
3777
3778 #image-focus-overlay .image-number {
3779         position: absolute;
3780         z-index: 2;
3781         font-size: 1.75rem;
3782         left: 1em;
3783         bottom: 1em;
3784         font-weight: 600;
3785         text-shadow:
3786                 0 0 3px #fff,
3787                 0 0 5px #fff,
3788                 0 0 8px #fff,
3789                 0 0 13px #fff;
3790         width: 1.5em;
3791         text-align: right;
3792         white-space: nowrap;
3793         transition: bottom 0.3s ease;
3794 }
3795 #image-focus-overlay .image-number::before {
3796         content: "#";
3797         opacity: 0.3;
3798 }
3799 #image-focus-overlay .image-number::after {
3800         content: " of " attr(data-number-of-images);
3801         opacity: 0.3;
3802 }
3803 #image-focus-overlay .image-number:hover::before,
3804 #image-focus-overlay .image-number:hover::after {
3805         opacity: 1.0;
3806 }
3807 #image-focus-overlay .image-number.hidden {
3808         bottom: -1.25em;
3809 }
3810
3811 /*=-------------------=*/
3812 /*= Slideshow buttons =*/
3813 /*=-------------------=*/
3814
3815 #image-focus-overlay .slideshow-buttons {
3816         position: absolute;
3817         top: 0;
3818         left: 0;
3819         width: 100%;
3820         height: 100%;
3821         z-index: 1;
3822         display: flex;
3823         justify-content: space-between;
3824         pointer-events: none;
3825 }
3826 #image-focus-overlay .slideshow-buttons button {
3827         font-family: "Font Awesome", "Font Awesome 5 Free";
3828         font-weight: 900;
3829         font-size: 3rem;
3830         padding: 0.5em;
3831         color: #ddd;
3832         position: relative;
3833         left: 0;
3834         transition:
3835                 left 0.3s ease;
3836         pointer-events: auto;
3837 }
3838 #image-focus-overlay .slideshow-buttons button::selection {
3839         background-color: transparent;
3840 }
3841 @media only screen and (hover: hover) {
3842         #image-focus-overlay .slideshow-buttons button:hover {
3843                 background-color: rgba(0,0,0,0.1);
3844                 color: #777;
3845         }
3846 }
3847 #image-focus-overlay .slideshow-buttons button:active {
3848         transform: none;
3849         color: #888;
3850 }
3851 #image-focus-overlay .slideshow-buttons button:disabled {
3852         text-shadow: none;
3853         background-color: transparent;
3854         color: #ddd;
3855         cursor: default;
3856         opacity: 0.4;
3857 }
3858 #image-focus-overlay .slideshow-button.previous.hidden {
3859         left: -1.75em;
3860 }
3861 #image-focus-overlay .slideshow-button.next.hidden {
3862         left: 1.75em;
3863 }
3864
3865 /*=-----------------=*/
3866 /*= Background blur =*/
3867 /*=-----------------=*/
3868
3869 .blurred {
3870         filter: blur(3px);
3871 }
3872
3873 /**************************/
3874 /* QUALIFIED HYPERLINKING */
3875 /**************************/
3876
3877 #content.no-nav-bars {
3878         margin: 8px auto;
3879 }
3880 #content.no-nav-bars + #ui-elements-container > * {
3881         padding-top: 8px;
3882 }
3883
3884 #aux-about-link {
3885         position: fixed;
3886         top: 40px;
3887         left: calc((100% - 900px) / 2 - 69px);
3888         width: 1.5em;
3889         height: 1.5em;
3890         text-align: center;
3891         display: table;
3892 }
3893 #aux-about-link a {
3894         display: table-cell;
3895         width: 100%;
3896         vertical-align: middle;
3897         font-family: "Font Awesome", "Font Awesome 5 Free";
3898         font-weight: 900;
3899         font-size: 1.25rem;
3900         opacity: 0.4;
3901         z-index: 1;
3902 }
3903
3904 .qualified-linking {
3905         margin: 0;
3906         position: relative;
3907 }
3908 .qualified-linking input[type='checkbox'] {
3909         visibility: hidden;
3910         width: 0;
3911         height: 0;
3912         margin: 0;
3913 }
3914 .qualified-linking label {
3915         font-family: "Font Awesome", "Font Awesome 5 Free";
3916         font-weight: 900;
3917         font-size: 1rem;
3918         padding: 0 0.5em;
3919         display: inline-block;
3920         margin-left: 0.25em;
3921 }
3922 .qualified-linking label:hover {
3923         cursor: pointer;
3924 }
3925 .qualified-linking label:active span {
3926         display: inline-block;
3927         transform: scale(0.9);
3928 }
3929 .qualified-linking label::selection {
3930         background-color: transparent;
3931 }
3932
3933 .qualified-linking label::after {
3934         content: "";
3935         width: 100vw;
3936         height: 0;
3937         left: 0;
3938         top: 0;
3939         position: fixed;
3940         z-index: 1;
3941         cursor: default;
3942 }
3943 .qualified-linking input[type='checkbox']:checked + label::after {
3944         height: 100vh;
3945 }
3946
3947 .qualified-linking-toolbar {
3948         position: absolute;
3949         right: 0.25em;
3950         top: 110%;
3951         z-index: 1;
3952 }
3953 .qualified-linking input[type='checkbox'] ~ .qualified-linking-toolbar {
3954         display: none;
3955 }
3956 .qualified-linking input[type='checkbox']:checked ~ .qualified-linking-toolbar {
3957         display: block;
3958 }
3959 #qualified-linking-toolbar-toggle-checkbox-bottom ~ .qualified-linking-toolbar {
3960         top: unset;
3961         bottom: 125%;
3962 }
3963
3964 .qualified-linking-toolbar a {
3965         display: block;
3966         padding: 0 6px;
3967         margin: 4px;
3968 }
3969 .qualified-linking-toolbar a::selection {
3970         background-color: transparent;
3971 }
3972
3973 /*****************/
3974 /* HOVER PREVIEW */
3975 /*****************/
3976
3977 #preview-popup-toggle {
3978         position: absolute;
3979         right: -67px;
3980         bottom: 285px;
3981         cursor: pointer;
3982         color: var(--GW-toggle-widget-color, #888);
3983 }
3984 #preview-popup-toggle:hover {
3985         color: var(--GW-toggle-widget-hover-color, #444);
3986 }
3987
3988 #content.preview:not(not) {
3989         padding: 0;
3990 }
3991 #content.preview > .comment-thread {
3992         margin: 2px;
3993 }
3994 #content.preview.individual-thread-page > .comment-thread > .comment-item {
3995         border: none;
3996 }
3997 #content.preview.user-page .page-main-heading, #content.preview.user-page .user-stats {
3998         padding: 0 8px;
3999 }
4000 #content.preview.user-page .page-main-heading {
4001         margin-left: 8px;
4002 }
4003 #content.preview.not(not) .body-text {
4004         margin-left: 8px;
4005         margin-right: 8px;
4006 }
4007 #content.preview.user-page .user-stats {
4008         margin-right: 32px;
4009 }
4010 #content.preview.user-page .page-toolbar, #content.preview.user-page nav {
4011         display: none;
4012 }
4013 #content.preview button.vote {
4014         display: none;
4015 }
4016 #content.preview > h1.listing {
4017         max-height: unset;
4018 }
4019 #content.preview.user-page > .comment-thread {
4020         margin: 0.5em 0;
4021 }
4022 #content.preview > .post {
4023         margin: 0 18px;
4024 }
4025 #content.preview .post-title {
4026         margin-top: 0.5em;
4027 }
4028 #content.preview .post-meta {
4029         line-height: 1.0;
4030 }
4031 #content.preview .body-text {
4032         font-size: 1em;
4033 }
4034 #content.preview nav.contents,
4035 #content.preview .lw2-link {
4036         display: none;
4037 }
4038
4039 .preview-popup {
4040         position: fixed;
4041         transform-origin: top;
4042         top: 10%;
4043         right: 10%;
4044         max-width: 700px;
4045         z-index: 10001;
4046         background-color: #eee;
4047         border: 1px solid #ccc;
4048         box-shadow: 2px 6px 20px -4px #000;
4049         transition: height 0.2s ease, top 0.2s ease;
4050 }
4051 .popup-hide-button {
4052         position: fixed;
4053         top: 4px;
4054         right: 4px;
4055         color: #000;
4056         background-color: #fff;
4057         width: 28px;
4058         height: 28px;
4059         display: flex;
4060         font-family: "Font Awesome";
4061         font-size: 14px;
4062         line-height: 1;
4063         border: 1px solid #bbb;
4064         border-radius: 28px;
4065         align-items: center;
4066         justify-content: center;
4067         //padding-bottom: 2px;
4068         padding-left: 1.5px;
4069         font-family: "Font Awesome", "Font Awesome 5 Free";
4070         cursor: pointer;
4071 }
4072 .popup-hide-button:hover::before {
4073         content: "Turn off preview popups";
4074         display: block;
4075         position: absolute;
4076         width: max-content;
4077         right: 32px;
4078         color #000;
4079         background-color: #fff;
4080         border: 1px solid #eee;
4081         border-radius: 2px;
4082         padding: 4px;
4083 }
4084
4085 /********/
4086 /* MATH */
4087 /********/
4088
4089 .mathjax-block-container {
4090         display: block;
4091         overflow-y: hidden;
4092         border-radius: 6px;
4093         margin: 1em 0 1.5em 0;
4094 }
4095 .mathjax-inline-container {
4096         max-width: 100%;
4097         display: inline-block;
4098         overflow-x: auto;
4099         overflow-y: hidden;
4100         position: relative;
4101         vertical-align: text-top;
4102         padding: 0 1px;
4103 }
4104 .post .mathjax-inline-container {
4105         line-height: 1.1;
4106         top: 2px;
4107 }
4108 .comment .mathjax-inline-container {
4109         top: 3px;
4110         line-height: 1;
4111 }
4112 .mathjax-inline-container .mjx-chtml {
4113         padding: 0;
4114 }
4115
4116 /************/
4117 /* SPOILERS */
4118 /************/
4119
4120 .spoiler {
4121     color: #000;
4122     background-color: currentColor;
4123     transition: none;
4124     text-shadow: none;
4125         margin: 1em 0;
4126     box-shadow: 0 0 0 1px currentColor inset;
4127     overflow: auto;
4128 }
4129 .spoiler:not(:last-child) {
4130     margin-bottom: 0;
4131 }
4132 #content .spoiler * {
4133         color: inherit;
4134         border: none;
4135 }
4136 .spoiler:hover {
4137     color: unset;
4138     background-color: unset;
4139     text-shadow: unset;
4140     transition:
4141         color 0.1s ease-out 0.1s,
4142         background-color 0.1s ease-out 0.1s,
4143         text-shadow 0.1s ease-out 0.1s;
4144 }
4145 .spoiler::selection,
4146 .spoiler ::selection {
4147         color: #fff;
4148         background-color: #000;
4149 }
4150 .spoiler:not(:hover)::selection,
4151 .spoiler:not(:hover) ::selection {
4152     background-color: transparent;
4153 }
4154
4155 /*= Fix for LessWrong being weird =*/
4156
4157 .spoiler > p {
4158     padding: 0 7px;
4159 }
4160 .spoiler > p:first-child {
4161         margin-top: 0.25em;
4162 }
4163 .spoiler > p:last-child {
4164         margin-bottom: 0;
4165         padding-bottom: 0.25em;
4166 }
4167 .spoiler > p:hover ~ p {
4168         background-color: currentColor;
4169 }
4170 .spoiler > p + p {
4171         margin-top: -1em;
4172 }
4173 .spoiler > p:not(:first-child) {
4174         padding-top: 0.5em;
4175 }
4176 .spoiler > p:not(:last-child) {
4177         padding-bottom: 0.5em;
4178 }
4179
4180 .spoiler:not(:hover) pre,
4181 .spoiler:not(:hover) code {
4182         background-color: inherit;
4183         box-shadow: none;
4184 }
4185 #content .spoiler pre {
4186         border-color: currentColor;
4187         border-style: solid;
4188         border-width: 0 1px;
4189         border-radius: 0;
4190 }
4191
4192 /*******************/
4193 /* PAGE LIST INDEX */
4194 /*******************/
4195
4196 .page-list-index {
4197         margin: 1em 30px;
4198         line-height: 1.2;
4199 }
4200
4201 .page-list-index > p {
4202         font-weight: bold;
4203         font-size: 1.2em;
4204 }
4205
4206 .page-list-index > ul * {
4207         margin: 0;
4208 }
4209
4210 .page-list-index ul {
4211         padding-left: 1.5em;
4212 }
4213
4214 .page-list-index li {
4215         margin-top: 0.67em;
4216 }
4217
4218 .page-list-index li > a {
4219         display: block;
4220         font-size: 1.1em;
4221         font-weight: bold;
4222         margin: 0.33em 0;
4223 }
4224
4225 .page-list-index li > a:last-child {
4226         margin-bottom: 1em;
4227 }
4228
4229 /*******************/
4230 /* ALIGNMENT FORUM */
4231 /*******************/
4232
4233 #content.alignment-forum-index-page::after {
4234         content: "Alignment Forum";
4235         font-size: 1.5rem;
4236         margin: 0.375em 0 0 -0.375em;
4237         order: -1;
4238 }
4239
4240 /**********************/
4241 /* FOR NARROW SCREENS */
4242 /**********************/
4243
4244 @media only screen and (max-width: 1440px) {
4245         #hns-date-picker {
4246                 right: -81px;
4247                 padding: 8px 10px 10px 10px;
4248                 bottom: 62px;
4249                 display: none;
4250         }
4251         #hns-date-picker::before {
4252                 content: "";
4253                 position: absolute;
4254                 display: block;
4255                 z-index: -1;
4256                 height: calc(100% + 2px);
4257                 top: -1px;
4258                 left: -1px;
4259                 width: 50%;
4260         }
4261 }
4262 @media only screen and (max-width: 1160px) {
4263         #new-comment-nav-ui {
4264                 bottom: 180px;
4265                 right: -68px;
4266         }
4267         #hns-date-picker {
4268                 bottom: 200px;
4269                 right: -36px;
4270         }
4271         #hns-date-picker::before {
4272                 width: calc(100% - 35px);
4273         }
4274         #theme-selector button::before {
4275                 right: unset;
4276                 left: 100%;
4277         }
4278         #theme-selector:hover::after {
4279                 content: "";
4280                 display: block;
4281                 position: absolute;
4282                 width: calc(6em - 7px);
4283                 height: calc(100% + 2px);
4284                 top: 0;
4285                 left: calc(100% + 1px);
4286         }
4287         #anti-kibitzer-toggle {
4288                 bottom: 330px;
4289         }
4290 }
4291 @media only screen and (max-width: 1080px) {
4292         #width-selector {
4293                 right: -30px;
4294         }
4295         #width-selector button {
4296                 display: block;
4297         }
4298         #text-size-adjustment-ui {
4299                 top: 90px;
4300                 right: -30px;
4301         }
4302         #text-size-adjustment-ui button {
4303                 display: block;
4304                 position: relative;
4305         }
4306         #text-size-adjustment-ui button.increase {
4307                 bottom: 48px;
4308         }
4309         #text-size-adjustment-ui button.decrease {
4310                 top: 50px;
4311         }
4312         #theme-selector {
4313                 top: 46px;
4314                 left: -44px;
4315         }
4316         #theme-tweaker-toggle {
4317                 left: -44px;
4318                 top: 2px;
4319         }
4320         #theme-tweaker-toggle button {
4321                 height: 2em;
4322                 width: 2em;
4323                 padding: 7px;
4324         }
4325         #quick-nav-ui {
4326                 right: -54px;
4327         }
4328         #new-comment-nav-ui {
4329                 right: -55px;
4330         }
4331         #hns-date-picker {
4332                 right: -23px;
4333         }
4334         #hns-date-picker::before {
4335                 width: calc(100% - 22px);
4336         }
4337         #anti-kibitzer-toggle {
4338                 right: -54px;
4339         }
4340 }
4341 @media only screen and (max-width: 1040px) {
4342         #quick-nav-ui {
4343                 right: -49px;
4344         }
4345         #new-comment-nav-ui {
4346                 right: -50px;
4347         }
4348         #hns-date-picker {
4349                 right: -18px;
4350         }
4351         #hns-date-picker::before {
4352                 width: calc(100% - 17px);
4353         }
4354         #anti-kibitzer-toggle {
4355                 right: -50px;
4356         }
4357 }
4358 @media only screen and (max-width: 1020px) {
4359         #quick-nav-ui {
4360                 right: -20px;
4361         }
4362         #new-comment-nav-ui {
4363                 right: -21px;
4364         }
4365         #new-comment-nav-ui .new-comments-count::before {
4366                 content: "";
4367                 position: absolute;
4368                 width: 100%;
4369                 height: calc(100% + 45px);
4370                 z-index: -1;
4371                 left: 0;
4372                 top: -22px;
4373         }
4374         #hns-date-picker {
4375                 right: 19px;
4376         }
4377         #hns-date-picker::before {
4378                 width: 100%;
4379         }
4380         #anti-kibitzer-toggle {
4381                 right: -20px;
4382         }
4383 }
4384 @media only screen and (max-width: 1000px) {
4385         #theme-selector {
4386                 left: -17px;
4387                 top: 120px;
4388                 padding: 3px 0;
4389                 max-width: 32px;
4390         }
4391         #theme-selector button {
4392                 margin: 1px 4px;
4393         }
4394         #text-size-adjustment-ui {
4395                 top: 100px;
4396                 right: -12px;
4397         }
4398         @media not screen and (hover: none) {
4399                 #quick-nav-ui,
4400                 #new-comment-nav-ui,
4401                 #new-comment-nav-ui + #hns-date-picker,
4402                 #anti-kibitzer-toggle {
4403                         opacity: 0.4;
4404                 }
4405                 #quick-nav-ui:hover,
4406                 #new-comment-nav-ui:hover,
4407                 #new-comment-nav-ui + #hns-date-picker:hover,
4408                 #new-comment-nav-ui + #hns-date-picker:focus-within,
4409                 #new-comment-nav-ui:hover + #hns-date-picker,
4410                 #anti-kibitzer-toggle:hover {
4411                         opacity: 1.0;
4412                 }
4413         }
4414         #theme-tweaker-toggle {
4415                 top: 70px;
4416                 left: -21px;
4417         }
4418 }
4419
4420 /**************/
4421 /* PRINT VIEW */
4422 /**************/
4423
4424 @media only print {
4425         .nav-bar {
4426                 visibility: hidden;
4427                 max-height: 0;
4428                 overflow: hidden;
4429         }
4430         #ui-elements-container {
4431                 display: none;
4432         }
4433         #images-overlay {
4434                 display: none;
4435         }
4436         #images-overlay + #content .post-body img {
4437                 visibility: visible;
4438         }
4439         .comment-controls {
4440                 display: none;
4441         }
4442         #comments-sort-mode-selector {
4443                 display: none;
4444         }
4445         .comment-minimize-button {
4446                 display: none;
4447         }
4448         .post-meta .qualified-linking,
4449         .post-meta .lw2-link {
4450                 display: none;
4451         }
4452         .comment-meta .permalink,
4453         .comment-meta .lw2-link,
4454         .comment-meta .comment-parent-link {
4455                 display: none;
4456         }
4457         .new-comment::before {
4458                 display: none;
4459         }
4460         #content::before {
4461                 box-shadow: none;
4462         }
4463 }
4464
4465 <?php include("style_mobile_additions.css.php"); ?>
4466
4467 <?php if (isset($argv[2]) && preg_match("/\\.css(.php)?$/", $argv[2])) include($argv[2]); ?>
4468
4469 <?php
4470
4471 ## TO BE IMPLEMENTED:
4472 ## This will be specified via command-line argument; but for now, we just
4473 ## include all available additions (currently, only 'accordius').
4474
4475 $additions = [
4476         'accordius'
4477 ];
4478
4479 foreach ($additions as $addition) {
4480         $potential_includes = [
4481                 "style.css.php",
4482                 "style_mobile_additions.css.php"
4483         ];
4484         foreach ($potential_includes as $include) {
4485                 $include_path = "{$addition}/{$include}";
4486                 if (file_exists($include_path))
4487                         include ($include_path);
4488         }
4489 }
4490
4491 ?>