www/css/style-rts.windows.css

   1
   2 /*************/
   3 /* VARIABLES */
   4 /*************/
   5
   6 :root {
   7         --GW-comment-background-color-odd: transparent;
   8         --GW-comment-background-color-even: transparent;
   9         --GW-comment-background-color-target: transparent;
  10
  11         --inverted-display: none;
  12 }
  13
  14 /***************/
  15 /* BASE LAYOUT */
  16 /***************/
  17
  18 html {
  19         box-sizing: border-box;
  20         font-size: 16px;
  21 }
  22 *, *::before, *::after {
  23         box-sizing: inherit;
  24 }
  25 script {
  26         display: none !important;
  27 }
  28
  29 /*=------=*/
  30 /*= Body =*/
  31 /*=------=*/
  32
  33 body {
  34         padding: 0;
  35         margin: 0;
  36 }
  37 body::before {
  38         background-color: inherit;
  39         position: fixed;
  40         width: 100%;
  41         height: 100%;
  42 }
  43
  44 body.no-scroll {
  45         overflow-y: scroll;
  46         position: fixed;
  47         width: 100%;
  48 }
  49
  50 /*=----------------------------=*/
  51 /*= Immediate children of body =*/
  52 /*=----------------------------=*/
  53
  54 body > * {
  55         max-width: 900px;
  56 }
  57
  58 /*      Special styles for special browsers.
  59         (This one is a fix for Firefox’s built-in screenshot feature.)
  60         */
  61 body > iframe[id^='firefox-screenshots'] {
  62         max-width: unset;
  63 }
  64
  65 #content {
  66         margin: 0 auto;
  67         padding: 0 30px;
  68         position: relative;
  69         overflow: visible;
  70         display: grid;
  71         grid-template-columns: 2fr 1fr 2fr;
  72 }
  73 #content::before {
  74         content: "";
  75         display: block;
  76         position: absolute;
  77         top: 0;
  78         left: 0;
  79         width: 100%;
  80         height: 100%;
  81         z-index: -1;
  82         pointer-events: none;
  83 }
  84
  85 /*=---------=*/
  86 /*= Content =*/
  87 /*=---------=*/
  88
  89 #content > * {
  90         grid-column: 1 / span 3;
  91 }
  92
  93 /*=----------------------=*/
  94 /*= Floating UI elements =*/
  95 /*=----------------------=*/
  96
  97 #ui-elements-container {
  98         position: fixed;
  99         height: 100vh;
 100         top: 0;
 101         left: 0;
 102         right: 0;
 103         margin: auto;
 104         z-index: 10000;
 105         pointer-events: none;
 106 }
 107 #ui-elements-container > * {
 108         pointer-events: auto;
 109 }
 110
 111 /*=----------------=*/
 112 /*= Images overlay =*/
 113 /*=----------------=*/
 114 /* (To exclude images in posts from theme tweaks) */
 115
 116 #images-overlay {
 117         position: absolute;
 118         z-index: 1;
 119         left: 0;
 120         right: 0;
 121         margin: auto;
 122 }
 123
 124 /***********/
 125 /* NAV BAR */
 126 /***********/
 127
 128 .nav-bar {
 129         margin: 0 -30px;
 130         display: flex;
 131         order: -11;
 132         z-index: 1;
 133 }
 134
 135 /*=---------------=*/
 136 /*= Nav bar items =*/
 137 /*=---------------=*/
 138
 139 .nav-item {
 140         flex: 1 1 auto;
 141 }
 142 .nav-item * {
 143         text-overflow: ellipsis;
 144         white-space: nowrap;
 145         overflow: hidden;
 146 }
 147 .nav-inner {
 148         padding: 12px 30px;
 149         text-align: center;
 150         display: block;
 151         position: relative;
 152         line-height: inherit;
 153         width: 100%;
 154         background: unset;
 155 }
 156 .nav-bar-top:not(#primary-bar) .nav-inner {
 157         padding: 4px 0;
 158 }
 159
 160 #nav-item-sequences .nav-inner::before {
 161         font-family: "Font Awesome", "Font Awesome 5 Free";
 162         content: "\F5DB";
 163 }
 164 @media only screen and (min-width: 901px) {
 165         #nav-item-about .nav-inner {
 166                 margin-right: 0.5em;
 167         }
 168         #nav-item-sequences .nav-inner::before {
 169                 font-size: 1rem;
 170                 display: block;
 171         }
 172         #secondary-bar #nav-item-sequences .nav-inner {
 173                 font-size: 0;
 174                 line-height: 1.4;
 175         }
 176 }
 177
 178 /*=------------=*/
 179 /*= Bottom bar =*/
 180 /*=------------=*/
 181
 182 #bottom-bar {
 183         order: 11;
 184 }
 185 h1.listing ~ #bottom-bar {
 186         margin-top: 1.25em;
 187 }
 188 #bottom-bar .nav-item {
 189         flex: 1 1 0;
 190 }
 191
 192 /*=-----------------=*/
 193 /*= Accesskey hints =*/
 194 /*=-----------------=*/
 195
 196 .nav-inner::after {
 197         content: attr(accesskey);
 198         display: none;
 199 }
 200
 201 /*=---------------=*/
 202 /*= Pagination UI =*/
 203 /*=---------------=*/
 204
 205 #bottom-bar .nav-item a::before,
 206 #top-nav-bar a::before {
 207         font-family: "Font Awesome", "Font Awesome 5 Free";
 208         font-weight: 900;
 209         font-size: 0.8em;
 210         position: relative;
 211         bottom: 1px;
 212         margin-right: 0.5em;
 213 }
 214 #bottom-bar #nav-item-first a::before,
 215 #top-nav-bar a.nav-item-first::before {
 216         content: "\F33e";
 217 }
 218 #bottom-bar #nav-item-top a::before {
 219         content: "\F062";
 220 }
 221 #bottom-bar #nav-item-prev a::before,
 222 #top-nav-bar a.nav-item-prev::before {
 223         content: "\F060";
 224 }
 225 #bottom-bar #nav-item-next a::before,
 226 #top-nav-bar a.nav-item-next::before {
 227         content: "\F061";
 228 }
 229 #bottom-bar #nav-item-last a::before,
 230 #top-nav-bar a.nav-item-last::before {
 231         content: "\F340";
 232 }
 233 #bottom-bar #nav-item-next a::before {
 234         margin-left: -2em;
 235         margin-right: 0;
 236         left: 3.8em;
 237 }
 238 #bottom-bar #nav-item-last a::before {
 239         margin-left: -1.8em;
 240         margin-right: 0;
 241         left: 3.4em;
 242 }
 243
 244 /*= Hover tooltips =*/
 245
 246 #top-nav-bar a {
 247         position: relative;
 248 }
 249 #top-nav-bar a::after {
 250         bottom: calc(100% - 3px);
 251         content: attr(data-target-page);
 252 }
 253 #top-nav-bar a::after {
 254         display: block;
 255         position: absolute;
 256         font-size: 0.75rem;
 257         width: 100%;
 258         line-height: 1;
 259         visibility: hidden;
 260 }
 261 #top-nav-bar a:hover::after,
 262 #bottom-bar a:hover::after {
 263         visibility: visible;
 264 }
 265
 266 /*=-----------------------=*/
 267 /*= Decorative bottom bar =*/
 268 /*=-----------------------=*/
 269 /* (On short pages with no pagination) */
 270
 271 #bottom-bar.decorative {
 272         position: relative;
 273 }
 274 #bottom-bar.decorative .nav-item {
 275         display: none;
 276 }
 277
 278 /*=------------=*/
 279 /*= Search tab =*/
 280 /*=------------=*/
 281
 282 #nav-item-search {
 283         flex: 4 1 auto;
 284 }
 285 #nav-item-search form::before {
 286         content: "\F002";
 287         font-family: "Font Awesome", "Font Awesome 5 Free";
 288         font-weight: 900;
 289         display: inline-block;
 290         vertical-align: top;
 291         height: 23px;
 292         width: 23px;
 293 }
 294 #nav-item-search input {
 295         height: 23px;
 296         width: calc(95% - 80px);
 297         padding: 1px 4px;
 298 }
 299 #nav-item-search button {
 300         height: 21px;
 301 }
 302
 303 /*=-----------=*/
 304 /*= Login tab =*/
 305 /*=-----------=*/
 306
 307 #nav-item-login {
 308         position: relative;
 309         padding-right: 0.5em;
 310 }
 311
 312 /*******************/
 313 /* INBOX INDICATOR */
 314 /*******************/
 315
 316 #inbox-indicator {
 317         position: absolute;
 318         top: 1px;
 319         right: 0;
 320         height: 100%;
 321         visibility: hidden;
 322 }
 323 #inbox-indicator::before {
 324         content: "\F0E0";
 325         font-family: "Font Awesome", "Font Awesome 5 Free";
 326         color: #bbb;
 327         font-size: 1.1875rem;
 328         position: absolute;
 329         height: 100%;
 330         right: 0;
 331         top: 0;
 332         padding: 0 0.45em;
 333         visibility: visible;
 334         font-weight: 900;
 335 }
 336 #inbox-indicator.new-messages::before {
 337         color: #f00;
 338         text-shadow:
 339                 0 0 1px #777,
 340                 0.5px 0.5px 1px #777;
 341 }
 342 a#inbox-indicator:hover::before {
 343         color: #fff;
 344         text-shadow:
 345                 0 0 1px #000,
 346                 0 0 2px #000,
 347                 0 0 4px #000,
 348                 0 0 1px #777,
 349                 0.5px 0.5px 1px #777;
 350 }
 351 a#inbox-indicator.new-messages:hover::before {
 352         text-shadow:
 353                 0 0 1px #f00,
 354                 0 0 2px #f00,
 355                 0 0 4px #f00,
 356                 0 0 1px #777,
 357                 0.5px 0.5px 1px #777;
 358 }
 359
 360 /****************/
 361 /* PAGE TOOLBAR */
 362 /****************/
 363
 364 .page-toolbar {
 365         font-size: 0.9em;
 366         line-height: 1.8;
 367         text-align: right;
 368         margin-right: -20px;
 369 }
 370 #content > .page-toolbar {
 371         grid-column: 3;
 372         grid-row: span 3;
 373 }
 374 #content.user-page > .page-toolbar {
 375         grid-column: 2 / span 2;
 376         order: -4;
 377 }
 378
 379 /*=--------------------------=*/
 380 /*= Page toolbar items (all) =*/
 381 /*=--------------------------=*/
 382
 383 .page-toolbar > * {
 384         display: inline-block;
 385         margin-left: 1.5em;
 386 }
 387 .page-toolbar > form button {
 388         padding: 0;
 389         text-align: right;
 390         white-space: unset;
 391 }
 392 .page-toolbar > form button::before {
 393         text-align: center;
 394 }
 395 .page-toolbar .button::before {
 396         font-family: "Font Awesome", "Font Awesome 5 Free";
 397         font-size: 0.9em;
 398         padding-right: 0.3em;
 399 }
 400
 401 /*=-------------------------------=*/
 402 /*= Page toolbar items (specific) =*/
 403 /*=-------------------------------=*/
 404
 405 .new-post::before {
 406         content: '\F067';
 407         font-weight: 900;
 408 }
 409 .new-private-message::before {
 410         content: '\F075';
 411         font-weight: 400;
 412 }
 413 .logout-button::before {
 414         content: '\F2F5';
 415         font-weight: 900;
 416 }
 417 #enable-push-notifications::before {
 418         content: '\F0F3';
 419         font-weight: 400;
 420 }
 421 .ignore-button::before {
 422         content: "\F070";
 423         font-weight: 400;
 424 }
 425 .unignore-button::before {
 426         content: "\F06E";
 427         font-weight: 400;
 428 }
 429 .rss::before {
 430         content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPiANCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJSU1NpY29uIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+DQo8ZGVmcz4NCjxsaW5lYXJHcmFkaWVudCB4MT0iMC4wODUiIHkxPSIwLjA4NSIgeDI9IjAuOTE1IiB5Mj0iMC45MTUiIGlkPSJSU1NnIj4NCjxzdG9wICBvZmZzZXQ9IjAuMCIgc3RvcC1jb2xvcj0iI0UzNzAyRCIvPjxzdG9wICBvZmZzZXQ9IjAuMTA3MSIgc3RvcC1jb2xvcj0iI0VBN0QzMSIvPg0KPHN0b3AgIG9mZnNldD0iMC4zNTAzIiBzdG9wLWNvbG9yPSIjRjY5NTM3Ii8+PHN0b3AgIG9mZnNldD0iMC41IiBzdG9wLWNvbG9yPSIjRkI5RTNBIi8+DQo8c3RvcCAgb2Zmc2V0PSIwLjcwMTYiIHN0b3AtY29sb3I9IiNFQTdDMzEiLz48c3RvcCAgb2Zmc2V0PSIwLjg4NjYiIHN0b3AtY29sb3I9IiNERTY0MkIiLz4NCjxzdG9wICBvZmZzZXQ9IjEuMCIgc3RvcC1jb2xvcj0iI0Q5NUIyOSIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiByeD0iNTUiIHJ5PSI1NSIgeD0iMCIgIHk9IjAiICBmaWxsPSIjQ0M1RDE1Ii8+DQo8cmVjdCB3aWR0aD0iMjQ2IiBoZWlnaHQ9IjI0NiIgcng9IjUwIiByeT0iNTAiIHg9IjUiICB5PSI1IiAgZmlsbD0iI0Y0OUM1MiIvPg0KPHJlY3Qgd2lkdGg9IjIzNiIgaGVpZ2h0PSIyMzYiIHJ4PSI0NyIgcnk9IjQ3IiB4PSIxMCIgeT0iMTAiIGZpbGw9InVybCgjUlNTZykiLz4NCjxjaXJjbGUgY3g9IjY4IiBjeT0iMTg5IiByPSIyNCIgZmlsbD0iI0ZGRiIvPg0KPHBhdGggZD0iTTE2MCAyMTNoLTM0YTgyIDgyIDAgMCAwIC04MiAtODJ2LTM0YTExNiAxMTYgMCAwIDEgMTE2IDExNnoiIGZpbGw9IiNGRkYiLz4NCjxwYXRoIGQ9Ik0xODQgMjEzQTE0MCAxNDAgMCAwIDAgNDQgNzMgViAzOGExNzUgMTc1IDAgMCAxIDE3NSAxNzV6IiBmaWxsPSIjRkZGIi8+DQo8L3N2Zz4NCg==');
 431         display: inline-block;
 432         width: 1em;
 433         padding-right: 0.2em;
 434         position: relative;
 435         top: 1px;
 436 }
 437
 438 /*********************/
 439 /* TOP PAGINATION UI */
 440 /*********************/
 441
 442 #top-nav-bar {
 443         grid-column: 2;
 444         margin: 0.25em 0 0 0;
 445         padding: 0.75em 0 0 0;
 446         text-align: center;
 447         font-size: 1.25em;
 448         display: flex;
 449         justify-content: center;
 450 }
 451 #top-nav-bar a {
 452         line-height: 1;
 453 }
 454 #top-nav-bar a.disabled {
 455         pointer-events: none;
 456         visibility: hidden;
 457 }
 458 #top-nav-bar .page-number {
 459         position: relative;
 460         display: inline-block;
 461         width: 1.5em;
 462 }
 463 #top-nav-bar .page-number-label {
 464         position: absolute;
 465         font-size: 0.5em;
 466         text-transform: uppercase;
 467         width: 100%;
 468         bottom: 90%;
 469         left: 0;
 470 }
 471 #top-nav-bar a::before {
 472         margin: 0.5em;
 473         display: inline-block;
 474 }
 475
 476 /****************/
 477 /* SUBLEVEL NAV */
 478 /****************/
 479
 480 .sublevel-nav {
 481         text-align: center;
 482         display: flex;
 483         justify-content: center;
 484         margin: 1em 0 0 0;
 485 }
 486 #content > .sublevel-nav:not(.sort) {
 487         grid-column: 2;
 488         align-self: start;
 489 }
 490 .sublevel-nav .sublevel-item {
 491         flex: 0 0 6em;
 492         padding: 0.125em 0.5em;
 493         font-size: 1.125rem;
 494 }
 495 .sublevel-nav .sublevel-item:active {
 496         transform: none;
 497 }
 498 .sublevel-nav .sublevel-item.selected {
 499         cursor: default;
 500 }
 501
 502 /***********************/
 503 /* SORT ORDER SELECTOR */
 504 /***********************/
 505
 506 .sublevel-nav.sort {
 507         position: relative;
 508         margin-top: 8px;
 509         font-size: 0.75em;
 510 }
 511 #content > .sublevel-nav.sort {
 512         grid-column: 3;
 513         grid-row: span 2;
 514         justify-self: end;
 515         align-self: start;
 516         flex-flow: column;
 517 }
 518 #content.index-page > .sublevel-nav.sort {
 519         grid-column: 1;
 520         justify-self: start;
 521         flex-flow: row;
 522 }
 523
 524 .sublevel-nav.sort::before {
 525         content: "Sort";
 526         font-size: 0.75rem;
 527         position: absolute;
 528         top: 0;
 529         left: 0;
 530         width: 100%;
 531 }
 532 .sublevel-nav.sort .sublevel-item {
 533         line-height: 1;
 534         font-size: 0.875rem;
 535         flex-basis: unset;
 536 }
 537
 538 /*******************************/
 539 /* COMMENTS SORT MODE SELECTOR */
 540 /*******************************/
 541
 542 .comments > .sublevel-nav.sort {
 543         margin: 1em auto 0 auto;
 544 }
 545 @supports (width: -moz-fit-content) {
 546         .comments > .sublevel-nav.sort {
 547                 width: -moz-fit-content;
 548         }
 549 }
 550 @supports (width: fit-content) {
 551         .comments > .sublevel-nav.sort {
 552                 width: fit-content;
 553         }
 554 }
 555
 556
 557 /**********************/
 558 /* DARK MODE SELECTOR */
 559 /**********************/
 560
 561 #dark-mode-selector {
 562         position: absolute;
 563         top: 4px;
 564         right: -78px;
 565         display: flex;
 566         opacity: 0.4;
 567 }
 568 #dark-mode-selector:hover {
 569         opacity: 1.0;
 570 }
 571
 572 /*=---------=*/
 573 /*= Buttons =*/
 574 /*=---------=*/
 575
 576 #dark-mode-selector button {
 577         font-weight: 900;
 578         font-family: "Font Awesome", "Font Awesome 5 Free";
 579         font-size: 1.125rem;
 580         width: 24px;
 581         height: 24px;
 582         padding: 0;
 583         line-height: 1;
 584 }
 585 #dark-mode-selector button.select-mode-auto {
 586 }
 587 #dark-mode-selector button.select-mode-light {
 588         padding: 0 0 0 1px;
 589 }
 590 #dark-mode-selector button.select-mode-dark {
 591         font-size: 1.25rem;
 592         padding: 1px 0 0 4px;
 593 }
 594 #dark-mode-selector button:disabled:hover {
 595         cursor: default;
 596 }
 597
 598 /*=----------------=*/
 599 /*= Hover tooltips =*/
 600 /*=----------------=*/
 601
 602 #dark-mode-selector button::after {
 603         content: attr(data-name);
 604         font-family: 'Concourse', 'a_Avante', 'GW-Symbols';
 605         font-weight: normal;
 606         position: absolute;
 607         display: block;
 608         left: 0;
 609         width: 100%;
 610         text-align: center;
 611         top: 92px;
 612         font-size: 1rem;
 613         visibility: hidden;
 614 }
 615 #dark-mode-selector button.selected::after {
 616         content: attr(data-name) " (selected)";
 617 }
 618 #dark-mode-selector button:hover:not(:active)::after {
 619         visibility: visible;
 620 }
 621
 622
 623 /******************/
 624 /* WIDTH SELECTOR */
 625 /******************/
 626
 627 #width-selector {
 628         position: absolute;
 629         top: 40px;
 630         right: -78px;
 631 }
 632 #width-selector button {
 633         width: 22px;
 634         height: 22px;
 635         padding: 6px;
 636         margin: 1px;
 637         overflow: hidden;
 638         background-repeat: no-repeat;
 639         background-size: 100%;
 640         background-origin: content-box;
 641 }
 642 #width-selector button,
 643 #width-selector button:active,
 644 #width-selector button:focus {
 645         text-shadow: none;
 646         color: transparent;
 647 }
 648 #width-selector button:disabled {
 649         cursor: auto;
 650 }
 651 #width-selector button.select-width-normal {
 652         background-image: url('data:image/gif;base64,R0lGODdhFAAUAJEAAAAAAKqqqv///wAAACH5BAkAAAMALAAAAAAUABQAAAIqnI+py+0PU5hB0Sqp1Xlu32HI9YkHGZZqyo6cC8Kmgcqr3Z5vxPf+nygAADs=');
 653 }
 654 #width-selector button.select-width-wide {
 655         background-image: url('data:image/gif;base64,R0lGODdhFAAUAJEAAAAAAKqqqv///wAAACH5BAkAAAMALAAAAAAUABQAAAIrnI+py+0PT5jB0TqupUY37zEg95HhMk6bmpGi6aIw+7KnkmK1HvX+DzwUAAA7');
 656 }
 657 #width-selector button.select-width-fluid {
 658         background-image: url('data:image/gif;base64,R0lGODdhFAAUAJEAAAAAAKqqqv///wAAACH5BAkAAAMALAAAAAAUABQAAAIwnI+py+0/ApIwUGOfvTGzzYELGIoTiZpdylJte7xoQp7beMc5XnL4CYlMgsSisVEAADs=');
 659 }
 660
 661 /*=----------------=*/
 662 /*= Hover tooltips =*/
 663 /*=----------------=*/
 664
 665 #width-selector button::after {
 666         content: attr(data-name);
 667         position: absolute;
 668         display: block;
 669         left: 0;
 670         width: 100%;
 671         text-align: center;
 672         top: 56px;
 673         visibility: hidden;
 674 }
 675 #width-selector button.selected::after {
 676         content: attr(data-name) " (selected)";
 677 }
 678 #width-selector button:hover:not(:active)::after {
 679         visibility: visible;
 680 }
 681
 682 head.content-width-normal + body > * {
 683         max-width: 900px;
 684 }
 685 head.content-width-wide + body > * {
 686         max-width: 1150px;
 687 }
 688 head.content-width-fluid + body > * {
 689         max-width: calc(100% - 300px);
 690 }
 691
 692 /******************/
 693 /* THEME SELECTOR */
 694 /******************/
 695
 696 #theme-selector {
 697         position: absolute;
 698         top: 3px;
 699         left: -41px;
 700         opacity: 0.4;
 701         display: table;
 702         max-width: 40px;
 703 }
 704 #theme-selector:hover {
 705         opacity: 1.0;
 706 }
 707
 708 /*=----------------------=*/
 709 /*= Theme select buttons =*/
 710 /*=----------------------=*/
 711
 712 .theme-selector button {
 713         display: table-cell;
 714         width: 26px;
 715         height: 26px;
 716         padding: 5px;
 717         margin: 1px 7px 0 7px;
 718         color: transparent;
 719         background-size: 16px 16px;
 720         background-origin: content-box;
 721 }
 722 .theme-selector button,
 723 .theme-selector button:hover,
 724 .theme-selector button:active,
 725 .theme-selector button:focus {
 726         text-shadow: none;
 727         color: transparent;
 728 }
 729 .theme-selector button:disabled {
 730         cursor: auto;
 731 }
 732
 733 /*=----------------------------=*/
 734 /*= Pre-rendered button images =*/
 735 /*=----------------------------=*/
 736 /*      (Each is just a capital letter A through whatever) */
 737
 738 .theme-selector button:nth-of-type(1) {
 739         background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMQAAAA0NDRYWFhwcHCIiIioqKjU1NTs7O0BAQEtLS09PT1ZWVlxcXGNjY2VlZWZmZmpqamxsbG1tbXd3d4WFhYeHh46OjpaWlpubm6Ojo6ampqysrK+vr7GxsbKysra2tr29vcDAwMnJyc3NzdLS0tra2tvb293d3d/f3+Tk5Ofn5+rq6uvr6+3t7e7u7vHx8fb29vf39/r6+vv7+/39/f7+/v///38AAA8AAAAAAAAAwKwtDQEAAAAAAAAAAAAAACwAAAAAIAAgAAAGmUCbcEgsGo/IpHLJbDqf0Kh0Sq0eQwHCyVqsKQAACpdYAgMGrrGwYgZs1C9C+zAbc9rgEZeGwAMiXCRmHRdgAipWE4YtJmYYVSwCYBI2NQxgBDBUGWYSHh+SYCBTMgZ+bQs0UiKneCVRNRBmCw61DwlmYlApZnREMQVgaFCFYBpGFmZvTjRfAAIrRihmDTVq19jZ2tvc3d5CQQA7');
 740 }
 741 .theme-selector button:nth-of-type(2) {
 742         background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMQAAAA0NDRwcHCYmJioqKk1NTVVVVV1dXWJiYmNjY3d3d35+foiIiIuLi5aWlq2trbOzs7S0tLm5ucXFxcrKysvLy83NzdLS0tXV1dbW1tra2tvb2+Xl5ebm5ujo6Onp6e3t7e7u7vT09Pb29vf39/j4+Pv7+/39/f7+/v///wAAwKwtDQEAAAAQrAUAAGAAABUAAAAAAAAAEKwFAABgAABQ4VxT/38AAA8AAAAAAAAAwKwtDQEAAAAAAAAAAAAAACwAAAAAIAAgAAAGj0CAcEgsGo/IpHLJbDqf0Kh0Sq0KAx0TaUsqcRzWQChFLpM/BGoAZG5P1OyUiXI5lUeD6ZosEgAWd2lSeykieQllhnpxJAoMH2UZcG1lIYKDcZQhBpOUZCcFi2QjaQgeZRaiKXhCDWUaqn1CD6+qKRIQGGYbtpQoC3pjnikRapBtIhUHVszNzs/Q0dLT1ENBADs=');
 743 }
 744 .theme-selector button:nth-of-type(3) {
 745         background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMe7m4+7n5O7o5e7q6e7t7e7u7u/f2O/f2e/g2u/i3PDa0fDb0/Dc1PDd1fDd1vLAq/LKufLKuvLMvfLQwvO4oPO6o/O7pPO8pfO9pvPAq/PBrfPFsvSylvS4n/Wqi/Wxlfakg/aoiPaqi/eadPeeefiMYPiRZ/iTafiTaviUa/iWbfiXb/iYcfqBUPqCUft0Pft3Qft7RvxvNvxxOPx0PPx1Pf1mKP1nKf1nKv1pLP1pLf1qLv1rL/1sMP1tMgAAACwAAAAAIAAgAAAGnsCCcEgsGo/IpHLJbDqf0Kh0Cl1AIBEHtciR2b5f3wpBNbzA6C+OIVXo0mlcI0qAoWmhi8f1jRGiHWgkRQctInQ1YCZbRQlvNnKMRI5fMwOSQxlgJZhDG2B+nQUJOV88AaIAO2AsogUnaCBFBCojUpRgNR8QGiulPQJSgXBpFVMPpcQ2Nw9UAik3aTcoZIwEEhQWGBN/rt7f4OHi451BADs=');
 746 }
 747 .theme-selector button:nth-of-type(4) {
 748         background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMYiHh4iIiImGhYqGhYuHhYyGg46Gg5CFgJKEfpKFf5WDfJeEfJiCeZmDeZqCeZuCd56BdZ+AdKZ/cKd/bq19abJ8ZbZ6Ybd5YMR1VctzUMxzT8x0UNJxStNxSdNyStRxSddwRthvRNlvRNtvQ99uQOFuPuRsO+ZtO+dsOuhsOOtrNuxrNvBpMfBpMvNoL/ZnLPZoLvhnLPlmKvpmKvtnKvxmKPxmKf1mKA8AAAAAAAAAwKwtDQEAAAAAAAAAAAAAACwAAAAAIAAgAAAGn8CAcEgsGo/IpHLJbDqf0Kh0Sq0KBauX9iVrZRBWBe1GLpM11cSsZplMKqIaOTWYqmsM4uFEBtnXD0UAKDc1EVJ3gUUNNjcjiIBHITcsAlGJRxw3MASXkUYVm3VQmEYbNy6jT6VFHZudpJ9EBjI3JZA1ikQeZBe4ugEAH2QqALgUDQ4QGDFkMgt/ZmYmBVRq0i8kElbc3d7f4OHi4+REQQA7');
 749 }
 750 .theme-selector button:nth-of-type(5) {
 751         background-image: url('data:image/gif;base64,R0lGODlhIAAgAPQAMQAw5wMy5gc15hI95RQ/5BhC4xtE5CZN4idN4Upo3Zai05um0p2o0qCq0aKr0aqy0Kyz0K200K+10LK4z7q+zru/zry/zr3Azr7Bzr/CzsDDzsHDzcTGzcnJzMrKzMzMzCwAAAAAIAAgAAAFbeAnjmRpnmiqrmzrvnAsz3Q9esmB7Hxh1ZsBYEgEBCo1DkHgmEiez05ymbGZlIKflYRFbkfY6lekBOh4hoitXBwq1kuG5EF/aOAC8Rir3S/7X3xjZEsQGBSIFBdwbUQNU41DC4OUlZaXmJmaViEAOw==');
 752 }
 753 .theme-selector button:nth-of-type(6) {
 754         background-image: url('data:image/gif;base64,R0lGODlhIAAgAPQAMQAAAA0NDS4uLjU1NTg4OElJSVZWVmNjY21tbaOjo62trbOzs8XFxcvLy8zMzNDQ0Nvb2+Dg4OHh4ePj4+Xl5e7u7vLy8v39/f///4n/fwAAwKwtDQEAAAAeBwAAAAAAACwAAAAAIAAgAAAFWiAmjmRpnmiqrmzrvnAsz3RNJkKh70NlH4CgEBDw1RCABSXCZF5syIfthGxMTdVrKasdIQGGHWEy/Q4BjDJAIYG4IRa1tCvi0u1dvFZ/5asddIGCg4SFhoeDIQA7');
 755 }
 756 .theme-selector button:nth-of-type(7) {
 757         background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMWcEFG4QH3QZKHcfLXslM4AtOYIxPYQ1QYY4Q4tAS5VPWZpYYbKAhrSCh7iJjruPk72RlcWfosikp8qnqsyrrNK1tdO2tta7u9e+vtzExOTS0ebV0+bW1OfX1ejY1ujZ1+na1+nb2Ozf3Ozg3e3h3u7i3+/k4fDm4/Ho5PLq5vPr5/Ts6PXu6vfx7fjz7/j07/n18Pr28fr38vv48/v59Pz69f379v389/79+P//+gAAwKwtDQEAAAAAAAAAAAAAACwAAAAAIAAgAAAGssCccEgsGo/IpHLJbDqf0Kh0CmWhVi5q0TYhAL6AwySmFRXAaEAANOWAIScbjRT5fqQzBEAQMrYoOFIWamxaRTV6DIZGL2cbi0UgAAMtRDAyM5kzMlGSAixDjWkJN1Adk6BComgLgU8nAgEllpg2GgAKrk4yZw9IkrlRD3uzRsC6TioCAAQmRh4ArVIXYBKpMBhepFMZaAYHaBVaLA5pAA0pkDQjISEmM5Dx8vP09fb3UUEAOw==');
 758 }
 759 .theme-selector button:nth-of-type(8) {
 760         background-image: url('data:image/gif;base64,R0lGODlhIAAgAPQAMVONTVSNTlaPUFeQUViQUlmRU2yeZ3Cga3KhbYKsfqbEo6jGpazIqbLMr7PNsMHWvsHWv8LXwMPXwejw5+nw6Orx6e/07vH28PX49Pf69vn7+fv9+/z9/P7//v///wAAACwAAAAAIAAgAAAFe6AnjmRpnmiqrmzrvnAsz3Rts52zbKamNBxZxwB4mC6CAEWIKJowhECF6SxBpVSjNTqNdZqSJ5fKyFzO58kA620C3nA4G/YFEAr4fAEwf9UhYn0udVokV110TYUjh1mBiH6Kj0IHVYZRS14JABFiAhY3oaKjpKWmp6g2IQA7');
 761 }
 762 .theme-selector button:nth-of-type(9) {
 763         background-image: url('data:image/gif;base64,R0lGODlhIAAgAPQAMZLDlpPDl5XEmJfFmpfGm5rHnZ3JoKjPq6nPrLXWuL/cwe317e317vb69vz9/P3+/f7//v///wAAQBsmAIBgAAAQhqFS/38AAO86GpX/fwAAwAzpDQEAAAAeBwAAAAAAACwAAAAAIAAgAAAFT2AkjmRpnmiqrmzrvnAsz3RtQsig2OYSAAdeifELCkcNAfA4ghiWzIgTypwaq8/r0RqVZrvcaBhLPT4KZSExzVtrhQ4CINGt2+/4vH4/CwEAOw==');
 764 }
 765
 766 /*=------------------------------=*/
 767 /*= Theme select button tooltips =*/
 768 /*=------------------------------=*/
 769 /*      (with the name & description of the theme that each button selects) */
 770
 771 #theme-selector button {
 772         position: relative;
 773         z-index: 1;
 774 }
 775 #theme-selector button::before {
 776         content: attr(data-theme-name);
 777         position: absolute;
 778         top: 0;
 779         right: 100%;
 780         padding: 5px 6px 6px 6px;
 781         line-height: 1;
 782         width: 6em;
 783         text-align: right;
 784         z-index: 1;
 785         visibility: hidden;
 786 }
 787 #theme-selector:hover button::before {
 788         visibility: visible;
 789 }
 790 #theme-selector:hover ~ #theme-tweaker-toggle,
 791 #theme-selector:active ~ #theme-tweaker-toggle {
 792         z-index: -1;
 793 }
 794
 795 /************************/
 796 /* THEME TWEAKER TOGGLE */
 797 /************************/
 798
 799 #theme-tweaker-toggle {
 800         position: absolute;
 801         top: 7px;
 802         left: -75px;
 803 }
 804 #theme-tweaker-toggle button {
 805         font-family: "Font Awesome", "Font Awesome 5 Free";
 806         font-weight: 900;
 807         font-size: 1.25rem;
 808         opacity: 0.4;
 809         z-index: 1;
 810 }
 811 #theme-tweaker-toggle button:hover {
 812         opacity: 1.0;
 813 }
 814
 815 /*******************/
 816 /* QUICKNAV WIDGET */
 817 /*******************/
 818
 819 #quick-nav-ui {
 820         position: absolute;
 821         right: -67px;
 822         bottom: 20px;
 823 }
 824 #quick-nav-ui a {
 825         font-family: "Font Awesome", "Font Awesome 5 Free";
 826         font-weight: 900;
 827         font-size: 1.5rem;
 828         line-height: 1.7;
 829         text-align: center;
 830         display: block;
 831         width: 40px;
 832         height: 40px;
 833         margin: 10px 0 0 0;
 834 }
 835 #quick-nav-ui a[href='#comments'].no-comments {
 836         pointer-events: none;
 837 }
 838 #quick-nav-ui a {
 839         visibility: hidden;
 840 }
 841 #content.post-page ~ #ui-elements-container #quick-nav-ui a[href='#comments'] {
 842         visibility: visible;
 843 }
 844
 845 /************************/
 846 /* NEW COMMENT QUICKNAV */
 847 /************************/
 848
 849 #new-comment-nav-ui {
 850         position: absolute;
 851         right: -112px;
 852         bottom: 42px;
 853 }
 854 #new-comment-nav-ui > * {
 855         display: block;
 856         position: relative;
 857 }
 858 #new-comment-nav-ui.no-comments {
 859         display: none;
 860 }
 861
 862 /*=--------------------=*/
 863 /*= New comments count =*/
 864 /*=--------------------=*/
 865
 866 #new-comment-nav-ui .new-comments-count {
 867         width: 2em;
 868         font-size: 1.25rem;
 869         line-height: 1.1;
 870         text-align: center;
 871         left: 1px;
 872         cursor: pointer;
 873 }
 874 #new-comment-nav-ui .new-comments-count::selection {
 875         background-color: transparent;
 876 }
 877 #new-comment-nav-ui .new-comments-count::after {
 878         content: "NEW";
 879         display: block;
 880         font-size: 0.625rem;
 881 }
 882
 883 /*=-----------------------------------=*/
 884 /*= Next/previous new comment buttons =*/
 885 /*=-----------------------------------=*/
 886
 887 #new-comment-nav-ui .new-comment-sequential-nav-button {
 888         font-size: 1.75rem;
 889         font-family: "Font Awesome", "Font Awesome 5 Free";
 890         font-weight: 900;
 891         width: 1.5em;
 892         z-index: 5001;
 893 }
 894 #new-comment-nav-ui .new-comment-previous {
 895         top: 8px;
 896 }
 897 #new-comment-nav-ui .new-comment-next {
 898         bottom: 6px;
 899 }
 900 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
 901         cursor: auto;
 902         pointer-events: none;
 903 }
 904
 905 /*******************/
 906 /* HNS DATE PICKER */
 907 /*******************/
 908
 909 #hns-date-picker {
 910         position: absolute;
 911         bottom: 72px;
 912         right: -253px;
 913         opacity: 0.6;
 914 }
 915 #hns-date-picker:hover,
 916 #hns-date-picker:focus-within {
 917         opacity: 1.0;
 918 }
 919 #hns-date-picker.no-comments {
 920         display: none;
 921 }
 922
 923 /*=---------------=*/
 924 /*= "Since" label =*/
 925 /*=---------------=*/
 926
 927 #hns-date-picker span {
 928         display: block;
 929         font-size: 0.75rem;
 930         text-transform: uppercase;
 931 }
 932
 933 /*=--------------------=*/
 934 /*= "Since" text field =*/
 935 /*=--------------------=*/
 936
 937 #hns-date-picker input {
 938         margin-top: 1px;
 939         padding: 1px 3px;
 940         width: 140px;
 941         text-align: center;
 942         box-shadow: 0 0 0 1px transparent;
 943 }
 944
 945 /************************/
 946 /* ANTI-KIBITZER TOGGLE */
 947 /************************/
 948
 949 #anti-kibitzer-toggle {
 950         position: absolute;
 951         right: -67px;
 952         bottom: 225px;
 953 }
 954 #anti-kibitzer-toggle button {
 955         display: block;
 956         width: 40px;
 957         height: 54px;
 958         padding: 0;
 959 }
 960 #anti-kibitzer-toggle button::before,
 961 #anti-kibitzer-toggle button::after {
 962         font-family: "Font Awesome", "Font Awesome 5 Free";
 963 }
 964 #anti-kibitzer-toggle button::before {
 965         content: "\F06E";
 966         display: block;
 967         font-size: 1.75em;
 968         font-weight: 400;
 969 }
 970 #anti-kibitzer-toggle button::after {
 971         content: "\F007\2004\F164";
 972         font-size: 0.875em;
 973         font-weight: 900;
 974 }
 975 #anti-kibitzer-toggle.engaged button::before {
 976         content: "\F070";
 977 }
 978
 979 /************************/
 980 /* TEXT SIZE ADJUSTMENT */
 981 /************************/
 982
 983 #text-size-adjustment-ui {
 984         position: absolute;
 985         top: 64px;
 986         right: -78px;
 987         opacity: 0.4;
 988 }
 989 #text-size-adjustment-ui:hover {
 990         opacity: 1.0;
 991 }
 992
 993 /* This doesn't work in Mozilla browsers, so hide it */
 994 @-moz-document url-prefix() {
 995         #text-size-adjustment-ui {
 996                 display: none;
 997         }
 998 }
 999
1000 /*=---------=*/
1001 /*= Buttons =*/
1002 /*=---------=*/
1003
1004 #text-size-adjustment-ui button {
1005         font-weight: 900;
1006         font-family: "Font Awesome", "Font Awesome 5 Free";
1007         font-size: 0.75rem;
1008         width: 24px;
1009         height: 24px;
1010         padding: 0;
1011 }
1012 #text-size-adjustment-ui button.default {
1013         font-family: inherit;
1014         font-size: 1.125rem;
1015         position: relative;
1016         top: 1px;
1017 }
1018 #text-size-adjustment-ui button:disabled {
1019         opacity: 0.5;
1020 }
1021 #text-size-adjustment-ui button:disabled:hover {
1022         cursor: default;
1023 }
1024
1025 /*=----------------=*/
1026 /*= Hover tooltips =*/
1027 /*=----------------=*/
1028
1029 #text-size-adjustment-ui::after {
1030         content: "Adjust text size";
1031         position: absolute;
1032         display: block;
1033         left: 0;
1034         width: 100%;
1035         text-align: center;
1036         top: 32px;
1037         visibility: hidden;
1038         font-size: 0.9em;
1039 }
1040 #text-size-adjustment-ui:hover::after {
1041         visibility: visible;
1042 }
1043
1044 /*******************************/
1045 /* COMMENTS VIEW MODE SELECTOR */
1046 /*******************************/
1047
1048 #comments-view-mode-selector {
1049         position: absolute;
1050         bottom: 30px;
1051         left: -40px;
1052         opacity: 0.6;
1053 }
1054 #comments-view-mode-selector:hover {
1055         opacity: 1.0;
1056 }
1057
1058 /*=---------=*/
1059 /*= Buttons =*/
1060 /*=---------=*/
1061
1062 #comments-view-mode-selector a {
1063         display: block;
1064         font-family: "Font Awesome", "Font Awesome 5 Free";
1065         font-size: 1.25rem;
1066         text-align: center;
1067         opacity: 0.4;
1068         padding: 0.25em;
1069         z-index: 1;
1070 }
1071 #comments-view-mode-selector a.threaded {
1072         transform: scaleY(-1);
1073         font-weight: 900;
1074 }
1075 #comments-view-mode-selector a.chrono {
1076         font-weight: normal;
1077 }
1078 #comments-view-mode-selector a.selected,
1079 #comments-view-mode-selector a:hover {
1080         opacity: 1.0;
1081         text-decoration: none;
1082 }
1083 #comments-view-mode-selector a.selected {
1084         cursor: default;
1085 }
1086
1087 /*****************/
1088 /* KEYBOARD HELP */
1089 /*****************/
1090
1091 #keyboard-help-overlay {
1092         width: 100vw;
1093         height: 100vh;
1094         background-color: rgba(0,0,0,0.7);
1095         position: fixed;
1096         left: 0;
1097         top: 0;
1098         z-index: 5001;
1099
1100         display: flex;
1101         justify-content: center;
1102         align-items: center;
1103         padding: 20px 30px 30px 20px;
1104
1105         visibility: hidden;
1106 }
1107
1108 #keyboard-help-overlay .keyboard-help-container {
1109         background-color: #fff;
1110         filter: drop-shadow(4px 4px 2px #000);
1111         flex: 1 1 auto;
1112         max-width: 1500px;
1113         max-height: 100%;
1114         overflow-y: auto;
1115         position: relative;
1116 }
1117 #keyboard-help-overlay .keyboard-help-container h1 {
1118         text-align: center;
1119         border-bottom: 1px solid #ddd;
1120         margin: 0;
1121         padding: 10px 20px;
1122 }
1123 #keyboard-help-overlay .keyboard-help-container .note {
1124         margin: 0.5em auto;
1125         padding: 0 1em;
1126         width: fit-content;
1127 }
1128 #keyboard-help-overlay .keyboard-help-container .keyboard-shortcuts-lists {
1129         column-width: 21em;
1130         column-count: auto;
1131         column-gap: 1.5em;
1132         border-top: 1px solid #ddd;
1133         padding: 15px 20px;
1134 }
1135 #keyboard-help-overlay .keyboard-help-container ul {
1136         list-style-type: none;
1137         margin: 0;
1138         padding: 0;
1139         break-inside: avoid;
1140         white-space: nowrap;
1141 }
1142 #keyboard-help-overlay .keyboard-help-container ul:nth-of-type(n+2) {
1143         margin: 20px 0 0 0;
1144 }
1145 #keyboard-help-overlay .keyboard-help-container ul li.section {
1146         font-weight: bold;
1147         font-size: 1.125rem;
1148         break-after: avoid;
1149 }
1150 #keyboard-help-overlay .keyboard-help-container .keys {
1151         margin: 0 0.5em 0 0;
1152         min-width: 4.5em;
1153         display: inline-block;
1154 }
1155 #keyboard-help-overlay .keyboard-help-container .keys code {
1156         margin: 0 6px 0 0;
1157 }
1158 #keyboard-help-overlay .keyboard-help-container code {
1159         display: inline-block;
1160         background-color: #eee;
1161         border: 1px solid #ccc;
1162         padding: 3px 8px 4px 8px;
1163         margin: 0 1px;
1164 }
1165 #keyboard-help-overlay .keyboard-help-container code.ak {
1166         background-color: #ffeb83;
1167         border-color: #d4a500;
1168 }
1169 #keyboard-help-overlay .keyboard-help-container code.ak::before {
1170         content: "ak+";
1171         opacity: 0.3;
1172 }
1173
1174 #nav-item-about button.open-keyboard-help {
1175         display: none;
1176 }
1177 @media only screen and (hover:hover) and (pointer:fine) {
1178         #nav-item-about {
1179                 position: relative;
1180                 padding-right: 0.25em;
1181         }
1182         #nav-item-about button.open-keyboard-help {
1183                 font-family: "Font Awesome", "Font Awesome 5 Free";
1184                 font-weight: 900;
1185                 position: absolute;
1186                 top: 0;
1187                 right: 0;
1188                 height: 100%;
1189                 padding: 8px;
1190                 display: initial;
1191                 line-height: 1;
1192                 background-color: transparent;
1193         }
1194 }
1195
1196 #keyboard-help-overlay button.close-keyboard-help {
1197         position: absolute;
1198         right: 0;
1199         top: 0;
1200         font-family: "Font Awesome", "Font Awesome 5 Free";
1201         font-size: 1.5rem;
1202         padding: 10px 12px;
1203 }
1204
1205 /************/
1206 /* ARCHIVES */
1207 /************/
1208
1209 .archive-nav {
1210         margin: 1.25em 0.5em 0 0.5em;
1211         padding: 0.25em;
1212 }
1213 .archive-nav > * {
1214         display: flex;
1215 }
1216 .archive-nav *[class^='archive-nav-item'] {
1217         line-height: 1;
1218         flex: 1 1 5%;
1219         text-align: center;
1220         padding: 6px 4px 4px 4px;
1221         max-width: 8%;
1222 }
1223 @-moz-document url-prefix() {
1224         .archive-nav *[class^='archive-nav-item'] {
1225                 padding: 5px 4px;
1226         }
1227 }
1228 .archive-nav-days .archive-nav-item-day {
1229         font-size: 0.8em;
1230         padding: 7px 0 5px 0;
1231         max-width: 4%;
1232 }
1233 .archive-nav-days .archive-nav-item-day:first-child {
1234         flex-basis: 10%;
1235 }
1236
1237 /************/
1238 /* ARCHIVES */
1239 /************/
1240
1241 .archive-nav {
1242         margin: 1.25em 0.5em 0 0.5em;
1243         padding: 0.25em;
1244 }
1245 .archive-nav > * {
1246         display: flex;
1247 }
1248 .archive-nav *[class^='archive-nav-item'] {
1249         line-height: 1;
1250         flex: 1 1 5%;
1251         text-align: center;
1252         padding: 6px 4px 4px 4px;
1253         max-width: 8%;
1254 }
1255 @-moz-document url-prefix() {
1256         .archive-nav *[class^='archive-nav-item'] {
1257                 padding: 5px 4px;
1258         }
1259 }
1260 .archive-nav-days .archive-nav-item-day {
1261         font-size: 0.8em;
1262         padding: 7px 0 5px 0;
1263         max-width: 4%;
1264 }
1265 .archive-nav-days .archive-nav-item-day:first-child {
1266         flex-basis: 10%;
1267 }
1268
1269 /************/
1270 /* LISTINGS */
1271 /************/
1272
1273 h1.listing {
1274         font-size: 1.875rem;
1275         line-height: 1.15;
1276         max-height: 1.15em;
1277         position: relative;
1278 }
1279
1280 h1.listing a {
1281         position: relative;
1282 }
1283
1284 /* Links to link-posts (not the link-post links themselves; that's below) */
1285 h1.listing .link-post-link + a {
1286         margin-left: 0.25em;
1287 }
1288
1289 h1.listing .link-post-link {
1290         font-size: 0.8em;
1291         display: inline;
1292         vertical-align: top;
1293         position: relative;
1294         top: 4px;
1295 }
1296
1297 /*=----------------------=*/
1298 /*= Listing hover reveal =*/
1299 /*=----------------------=*/
1300 /*      (On desktops, hover over a multi-line listing to reveal all of it) */
1301
1302 @media only screen and (min-width: 1160px) {
1303         h1.listing a {
1304                 max-width: 100%;
1305                 display: inline-block;
1306                 white-space: nowrap;
1307                 text-overflow: ellipsis;
1308                 overflow: hidden;
1309                 border-bottom: 1px solid transparent;
1310                 -webkit-hyphens: auto;
1311                 -moz-hyphens: auto;
1312                 -ms-hyphens: auto;
1313                 hyphens: auto;
1314                 z-index: 1;
1315                 padding: 0 0 1px 1px;
1316         }
1317         h1.listing .link-post-link + a {
1318                 max-width: calc(100% - 40px);
1319         }
1320         h1.listing a:hover,
1321         h1.listing a:focus {
1322                 text-decoration: dotted underline;
1323                 white-space: initial;
1324                 overflow: visible;
1325                 z-index: 2;
1326         }
1327         h1.listing:focus-within::before {
1328                 content: "\F105";
1329                 font-family: "Font Awesome", "Font Awesome 5 Free";
1330                 display: block;
1331                 position: absolute;
1332                 left: -0.75em;
1333         }
1334
1335 /* Adds hysteresis to the hover area (i.e., prevents oscillation due to small
1336    mouse movements) */
1337
1338         h1.listing a:not(.edit-post-link):hover::before {
1339                 content: "";
1340                 position: absolute;
1341                 top: -10px;
1342                 right: -10px;
1343                 bottom: -10px;
1344                 left: -10px;
1345                 z-index: -1;
1346         }
1347         h1.listing .link-post-link:hover {
1348                 text-decoration: none;
1349         }
1350 }
1351
1352 /*=-----------------------=*/
1353 /*= In-listing edit links =*/
1354 /*=-----------------------=*/
1355
1356 h1.listing .edit-post-link {
1357         position: absolute;
1358         margin: 0;
1359 }
1360
1361 /*=---------------------------------=*/
1362 /*= Error messages on listing pages =*/
1363 /*=---------------------------------=*/
1364
1365 .listing-message {
1366         width: 100%;
1367         text-align: center;
1368         padding: 1.25em 0 1.25em 0;
1369         font-size: 1.375em;
1370 }
1371
1372 /*********************/
1373 /* LISTING POST-META */
1374 /*********************/
1375
1376 h1.listing + .post-meta {
1377         position: relative;
1378         justify-content: flex-start;
1379         margin: 0 20px 0 21px;
1380 }
1381
1382 h1.listing + .post-meta > * {
1383         margin: 0 1em 0 0;
1384 }
1385
1386 h1.listing + .post-meta .post-section {
1387         width: 0;
1388         margin: 0;
1389         overflow: hidden;
1390 }
1391 h1.listing + .post-meta .post-section::before {
1392         position: absolute;
1393         left: -36px;
1394 }
1395
1396 h1.listing + .post-meta .read-time {
1397         cursor: default;
1398 }
1399
1400 /********************/
1401 /* SEQUENCES & TAGS */
1402 /********************/
1403
1404 .sequence-text, .tag-description {
1405         font-size: 1.2rem;
1406         padding: 0 22px;
1407 }
1408
1409 #content.tag-index-page .tag-description {
1410         margin: 1em 0 0;
1411 }
1412
1413 section {
1414         margin-top: 2em;
1415         margin-bottom: 4em;
1416 }
1417
1418 h1.sequence-chapter {
1419         font-size: 2.3rem;
1420 }
1421
1422 article {
1423         max-width: 100%;
1424 }
1425
1426 .post-meta + .comments {
1427         margin-top: 3em;
1428 }
1429
1430 .tag-list {
1431         column-count: auto;
1432         column-width: 15em;
1433         margin-top: 0;
1434         border-bottom: 1px solid #999;
1435         padding-bottom: 1em;
1436         margin-bottom: 0;
1437 }
1438
1439 /**************/
1440 /* USER PAGES */
1441 /**************/
1442
1443 /*=---------------------=*/
1444 /*= User's display name =*/
1445 /*=---------------------=*/
1446
1447 #content.user-page h1.page-main-heading {
1448         margin: 0.25em 0 0 0;
1449         line-height: 1.1;
1450         grid-column: 1 / span 2;
1451         order: -2;
1452 }
1453
1454 #content.user-page h1.page-main-heading .user-full-name {
1455         font-size: 1rem;
1456         font-weight: normal;
1457         padding-left: 0.5em;
1458 }
1459
1460 /*=--------------------=*/
1461 /*= User's karma total =*/
1462 /*=--------------------=*/
1463
1464 #content.user-page .user-stats {
1465         grid-column: 3;
1466         order: -2;
1467         text-align: right;
1468         align-self: end;
1469 }
1470
1471 #content.user-page .user-stats .karma-type {
1472         white-space: nowrap;
1473 }
1474
1475 /*=----------------------=*/
1476 /*= Expanded vs. compact =*/
1477 /*=----------------------=*/
1478
1479 #content.user-page #comments-list-mode-selector {
1480         grid-row: span 2;
1481 }
1482 #content.user-page #comments-list-mode-selector button {
1483         display: block;
1484 }
1485
1486 /*=----------------------------------------------------=*/
1487 /*= All, Posts, Comments, Drafts, Conversations, Inbox =*/
1488 /*=----------------------------------------------------=*/
1489
1490 #content.user-page .sublevel-nav {
1491         margin-bottom: 0.5em;
1492 }
1493
1494 /*=--------------=*/
1495 /*= User's posts =*/
1496 /*=--------------=*/
1497
1498 #content.user-page h1.listing {
1499         margin: 0.5em 0 0 0;
1500 }
1501
1502 #content.user-page .user-bio :first-child {
1503         margin-top: 0.5em;
1504 }
1505
1506 /*****************/
1507 /* CONVERSATIONS */
1508 /*****************/
1509
1510 /*=----------------------=*/
1511 /*= List of participants =*/
1512 /*=----------------------=*/
1513
1514 #content.conversation-page .conversation-participants {
1515         grid-column: 2 / span 2;
1516         text-align: right;
1517         margin: 0.5em 0 0 0;
1518 }
1519 .post-meta > .conversation-participants {
1520         white-space: normal;
1521 }
1522 .conversation-participants ul,
1523 .conversation-participants li {
1524         list-style-type: none;
1525         display: inline-block;
1526         margin: 0;
1527         padding: 0;
1528 }
1529 .conversation-participants li {
1530         margin-left: 0.375em;
1531 }
1532 .conversation-participants li:not(:last-of-type)::after {
1533         content: ",";
1534 }
1535
1536 /*=-------------------------=*/
1537 /*= Posting controls (form) =*/
1538 /*=-------------------------=*/
1539
1540 #content.conversation-page .posting-controls {
1541         padding: 0 0 1em 0;
1542 }
1543 #content.conversation-page .post-meta-fields {
1544         overflow: auto;
1545         display: flex;
1546         flex-flow: row wrap;
1547 }
1548 .posting-controls.standalone textarea {
1549         margin-top: 0.375em;
1550 }
1551 .posting-controls.standalone form {
1552         padding: 0 1em;
1553 }
1554 #content.conversation-page .posting-controls.standalone form {
1555         padding: 0 1em 3em 1em;
1556 }
1557 .posting-controls.standalone input[type='text'],
1558 .posting-controls.standalone label {
1559         margin: 0.25em 0;
1560 }
1561 .posting-controls.standalone label {
1562         width: 4em;
1563         text-align: right;
1564         padding: 2px 6px;
1565         border: 1px solid transparent;
1566 }
1567 .posting-controls.standalone input[type='text'] {
1568         width: calc(100% - 4em);
1569         padding: 0.25em;
1570 }
1571 .posting-controls.standalone input[type='submit'] {
1572         float: right;
1573 }
1574 .posting-controls.standalone #markdown-hints-checkbox ~ label {
1575         white-space: nowrap;
1576 }
1577 .posting-controls.standalone #markdown-hints {
1578         top: calc(100% + 2em);
1579 }
1580
1581 /*=--------------------=*/
1582 /*= Conversation title =*/
1583 /*=--------------------=*/
1584
1585 #content.conversation-page h1.page-main-heading {
1586         text-align: center;
1587         margin: 0.5em 0;
1588         line-height: 1.15;
1589 }
1590
1591 /*=----------=*/
1592 /*= Messages =*/
1593 /*=----------=*/
1594
1595 #content.conversation-page > ul.comment-thread:last-of-type {
1596         margin-bottom: 2em;
1597 }
1598
1599 /******************/
1600 /* SEARCH RESULTS */
1601 /******************/
1602
1603 #content.search-results-page h1.listing,
1604 #content.sequence-page h1.listing,
1605 #content.post-page h1.listing {
1606         font-size: 1.625em;
1607 }
1608
1609 /**************/
1610 /* LOGIN PAGE */
1611 /**************/
1612
1613 .login-container {
1614         margin: 2em 0;
1615         padding: 1em;
1616         display: flex;
1617         flex-flow: row wrap;
1618 }
1619
1620 .login-container form {
1621         flex-basis: 50%;
1622         display: grid;
1623         grid-row-gap: 0.5em;
1624         align-content: start;
1625 }
1626 .login-container form label {
1627         text-align: right;
1628         padding: 0.25em 0.5em;
1629         white-space: nowrap;
1630         grid-column: 1;
1631 }
1632 .login-container form input {
1633         grid-column: 2;
1634         padding: 0.25em;
1635 }
1636 .login-container form input[type='submit'],
1637 .login-container form a {
1638         grid-column: 2;
1639         justify-self: center;
1640 }
1641 .login-container form input[type='submit'] {
1642         width: 10em;
1643         padding: 0.35em;
1644         line-height: 1;
1645         margin: 0.5em 0 0 0;
1646 }
1647 .login-container form h1 {
1648         text-align: center;
1649         margin: 0;
1650         grid-column: 2;
1651 }
1652
1653 /* “Log in” form */
1654
1655 #login-form {
1656         grid-template-columns: 5.5em 1fr;
1657         padding: 0.5em 2em 0.5em 0;
1658 }
1659
1660 /* “Create account” form */
1661
1662 #signup-form {
1663         font-size: 0.9em;
1664         grid-template-columns: 8.5em 1fr;
1665         padding: 0.5em 1em 1em 1em;
1666 }
1667 #signup-form h1 {
1668         font-size: 1.7em;
1669 }
1670 #signup-form input[type='submit'] {
1671         padding: 0.4em 0.5em 0.5em 0.5em;
1672 }
1673
1674 /* Log in tip */
1675
1676 .login-container .login-tip {
1677         padding: 0.5em 0.5em 0.5em 3em;
1678         margin: 2em 4em 0 4em;
1679         text-indent: -2em;
1680         line-height: 1.4;
1681 }
1682 .login-container .login-tip span {
1683         font-weight: bold;
1684 }
1685
1686 /* Message box */
1687
1688 #content.login-page .error-box {
1689         margin: 1.5em 0.875em -1.5em 0.875em;
1690 }
1691 .error-box, .success-box {
1692         padding: 0.25em;
1693         text-align: center;
1694 }
1695
1696 /***********************/
1697 /* PASSWORD RESET PAGE */
1698 /***********************/
1699
1700 .reset-password-container {
1701         margin-bottom: 2em;
1702 }
1703 .reset-password-container input[type='submit'] {
1704         padding: 0.2em 0.5em;
1705         width: unset;
1706 }
1707 .reset-password-container input {
1708         margin-left: 0.5em;
1709         width: 12em;
1710 }
1711 .reset-password-container label {
1712         display: inline-block;
1713         width: 9em;
1714 }
1715 .reset-password-container form > div {
1716         margin: 0.2em;
1717 }
1718 .reset-password-container .action-container {
1719         padding-left: 11em;
1720         padding-top: 0.2em;
1721 }
1722 .reset-password-container .error-box {
1723         margin: unset;
1724 }
1725
1726 /*********************/
1727 /* TABLE OF CONTENTS */
1728 /*********************/
1729
1730 .contents {
1731         float: right;
1732         min-width: 6em;
1733         max-width: 40%;
1734         margin: 1.25em 0 0.75em 1.25em;
1735         padding: 7px 14px 10px 10px;
1736         position: relative;
1737         z-index: 1;
1738 }
1739
1740 .contents-head {
1741         text-align: center;
1742         margin-bottom: 0.25em;
1743 }
1744
1745 .post-body .contents ul {
1746         list-style-type: none;
1747         margin: 0 0 0 0.5em;
1748         counter-reset: toc-item-1 toc-item-2 toc-item-3;
1749         padding-left: 1em;
1750         font-size: 0.75em;
1751 }
1752 .post-body .contents li {
1753         margin: 0.15em 0 0.3em 1em;
1754         text-align: left;
1755         text-indent: -1em;
1756         line-height: 1.2;
1757         position: relative;
1758 }
1759 .post-body .contents li::before {
1760         position: absolute;
1761         width: 3em;
1762         display: block;
1763         text-align: right;
1764         left: -4.5em;
1765 }
1766 .contents .toc-item-1 {
1767         counter-increment: toc-item-1;
1768         counter-reset: toc-item-2 toc-item-3;
1769 }
1770 .contents .toc-item-1::before {
1771         content: counter(toc-item-1);
1772 }
1773 .contents .toc-item-1 ~ .toc-item-2 {
1774         margin-left: 2.9em;
1775         font-size: 0.95em;
1776 }
1777 .contents .toc-item-2 {
1778         counter-increment: toc-item-2;
1779         counter-reset: toc-item-3;
1780 }
1781 .contents .toc-item-1 ~ .toc-item-2::before {
1782         content: counter(toc-item-1) "." counter(toc-item-2);
1783 }
1784 .contents .toc-item-2::before {
1785         content: counter(toc-item-2);
1786 }
1787 .contents .toc-item-1 + .toc-item-3 {
1788         counter-increment: toc-item-2 toc-item-3;
1789 }
1790 .contents .toc-item-2 ~ .toc-item-3,
1791 .contents .toc-item-1 ~ .toc-item-3 {
1792         margin-left: 2.9em;
1793         font-size: 0.95em;
1794 }
1795 .contents .toc-item-1 ~ .toc-item-2 ~ .toc-item-3 {
1796         margin-left: 5.7em;
1797         font-size: 0.9em;
1798 }
1799 .contents .toc-item-3 {
1800         counter-increment: toc-item-3;
1801 }
1802 .contents .toc-item-1 ~ .toc-item-2 ~ .toc-item-3::before {
1803         content: counter(toc-item-1) "." counter(toc-item-2) "." counter(toc-item-3);
1804 }
1805 .contents .toc-item-1 ~ .toc-item-3::before {
1806         content: counter(toc-item-1) "." counter(toc-item-3);
1807 }
1808 .contents .toc-item-2 ~ .toc-item-3::before {
1809         content: counter(toc-item-2) "." counter(toc-item-3);
1810 }
1811 .contents .toc-item-3::before {
1812         content: counter(toc-item-3);
1813 }
1814 .contents .toc-item-4,
1815 .contents .toc-item-5,
1816 .contents .toc-item-6 {
1817         display: none;
1818 }
1819
1820 /********************/
1821 /* POSTS & COMMENTS */
1822 /********************/
1823
1824 .post-meta > *,
1825 .comment-meta > * {
1826         display: inline-block;
1827         margin-right: 1em;
1828         font-size: 1.0625em;
1829 }
1830 .body-text {
1831         overflow-wrap: break-word;
1832         text-align: justify;
1833 }
1834 .body-text p {
1835         margin: 1em 0;
1836 }
1837 .retracted .body-text {
1838         text-decoration: line-through;
1839 }
1840
1841 .bare-url {
1842         word-break: break-all;
1843         hyphens: auto;
1844 }
1845 .body-text a:not([href]),
1846 .body-text a:not([href]):hover,
1847 .body-text a:not([href])::before,
1848 .body-text a:not([href])::after {
1849         text-decoration: none;
1850         text-shadow: unset;
1851         border: unset;
1852         color: unset;
1853         content: unset;
1854 }
1855 /*************/
1856 /* POST-META */
1857 /*************/
1858
1859 .post-meta {
1860         display: flex;
1861         flex-flow: row wrap;
1862         justify-content: center;
1863 }
1864 .post-meta .lw2-link {
1865         opacity: 0.5;
1866         order: 1;
1867 }
1868 .post-meta > *,
1869 .post-meta .post-section::before {
1870         margin: 0 0.5em;
1871 }
1872 .post-meta .post-section {
1873         order: -1;
1874         margin: 0;
1875         visibility: hidden;
1876 }
1877 .post-meta .post-section::before,
1878 .comment-meta .alignment-forum {
1879         visibility: visible;
1880         font-family: "Font Awesome", "Font Awesome 5 Free";
1881         font-weight: 900;
1882 }
1883 .post-section.frontpage::before {
1884         content: "\F015";
1885 }
1886 .post-section.featured::before {
1887         content: "\F005";
1888 }
1889 .post-section.meta::before {
1890         content: "\F077";
1891 }
1892 .post-section.events::before {
1893         content: "\F5A0";
1894 }
1895 .post-section.personal::before {
1896         content: "\F007";
1897 }
1898 .post-section.draft::before {
1899         content: "\F15B";
1900 }
1901 .post-section.alignment-forum::before,
1902 .comment-meta .alignment-forum {
1903         content: "AF";
1904         font-family: Concourse, 'Changa One';
1905 }
1906
1907 /*= Karma controls hover tooltips =*/
1908
1909 @media only screen and (pointer: fine) {
1910         .post .voting-controls,
1911         .comment-item .voting-controls {
1912                 position: relative;
1913         }
1914         .post .karma.active-controls::after,
1915         .comment-item .karma.active-controls::after {
1916                 content: "Double-click for strong vote";
1917                 position: absolute;
1918                 pointer-events: none;
1919                 display: block;
1920                 left: 6px;
1921                 width: 100%;
1922                 line-height: 1.15;
1923                 white-space: normal;
1924                 text-align: center;
1925                 font-size: 0.875rem;
1926                 opacity: 0;
1927                 transition: opacity 0.2s ease;
1928         }
1929         .post .voting-controls.active-controls:hover::after,
1930         .comment-item .voting-controls.active-controls:hover::after {
1931                 opacity: 1.0;
1932         }
1933
1934         .post .voting-controls .karma-value::after,
1935         .comment-item .voting-controls .karma-value::after {
1936                 content: attr(title);
1937                 position: absolute;
1938                 pointer-events: none;
1939                 display: block;
1940                 left: 50%;
1941                 transform: translateX(-50%);
1942                 white-space: pre-wrap;
1943                 width: max-content;
1944                 text-align: center;
1945                 font-size: 0.875rem;
1946                 color: #bbb;
1947                 opacity: 0;
1948                 transition: opacity 0.2s ease;
1949         }
1950         .post .voting-controls.agreement .karma-value:hover::after,
1951         .comment-item .voting-controls.agreement .karma-value:hover::after {
1952                 top: unset;
1953                 bottom: 100%;
1954         }
1955         .post .voting-controls .karma-value:hover::after,
1956         .comment-item .voting-controls .karma-value:hover::after {
1957                 opacity: 1.0;
1958         }
1959         .post .voting-controls.waiting .karma-value:hover::after,
1960         .comment-item .voting-controls.waiting .karma-value:hover::after {
1961                 display: none;
1962         }
1963         .comment-item .voting-controls .karma-value:hover::after {
1964                 z-index: 5001;
1965         }
1966
1967         .author {
1968                 position: relative;
1969         }
1970         .author:not(.redacted)::before {
1971                 content: attr(data-full-name);
1972                 position: absolute;
1973                 pointer-events: none;
1974                 display: block;
1975                 padding: 0 1em;
1976                 left: 50%;
1977                 bottom: 2em;
1978                 transform: translateX(-50%);
1979                 white-space: nowrap;
1980                 text-align: center;
1981                 font-size: 0.875rem;
1982                 font-weight: normal;
1983                 opacity: 0;
1984                 transition: opacity 0.2s ease;
1985                 z-index: 5001;
1986         }
1987         .author:hover::before {
1988                 opacity: 1.0;
1989         }
1990 }
1991
1992 /*********/
1993 /* POSTS */
1994 /*********/
1995
1996 .post {
1997         max-width: 100%;
1998 }
1999
2000 .post-body {
2001         min-height: 8em;
2002         padding: 0 30px;
2003         line-height: 1.5;
2004         font-size: 1.3rem;
2005         overflow: auto;
2006         margin: 0.5em 0 0 0;
2007 }
2008 h1.post-title {
2009         margin: 1.1em 0 0.35em 0;
2010         padding: 0 30px;
2011         text-align: center;
2012         font-size: 2.5em;
2013         line-height: 1;
2014 }
2015 .post .post-meta {
2016         text-align: center;
2017         position: relative;
2018         z-index: 2;
2019 }
2020 .post .top-post-meta:last-child {
2021         margin-bottom: 40px;
2022 }
2023 .post .bottom-post-meta {
2024         margin: 0;
2025         padding: 20px 0;
2026 }
2027 .bottom-post-meta {
2028         border-style: solid;
2029         border-width: 1px 0;
2030 }
2031
2032 /**********/
2033 /* EVENTS */
2034 /**********/
2035
2036 .event-info .map {
2037         position: relative;
2038         width: 100%;
2039         margin: 2em 0 1em;
2040 }
2041
2042 .event-info .map::before {
2043         content: "";
2044         display: block;
2045         padding-bottom: 50%;
2046 }
2047
2048 .event-info .map iframe {
2049         width: 100%;
2050         height: 100%;
2051         border: 1px solid #000;
2052         position: absolute;
2053         top: 0;
2054         left: 0;
2055 }
2056
2057 .event-info ul {
2058         list-style: none;
2059         padding: 0;
2060         text-align: center;
2061 }
2062
2063 /*******************/
2064 /* POST NAVIGATION */
2065 /*******************/
2066
2067 .post-nav-item {
2068         display: grid;
2069         grid-template: 100% / 32% 36% 32%;
2070         grid-template-areas:
2071                 "prev seq next";
2072 }
2073 .post-nav {
2074         display: flex;
2075         flex-flow: column;
2076         justify-content: flex-end;
2077         padding: 0.5em;
2078 }
2079
2080 .post-nav-title {
2081         font-size: 1.125em;
2082         line-height: 1.15;
2083         display: inline;
2084         border-top: 1px solid transparent;
2085 }
2086 .post-nav.prev .post-nav-title,
2087 .post-nav.next .post-nav-title {
2088         border-bottom: 1px solid transparent;
2089 }
2090
2091 .sequence-title {
2092         align-items: center;
2093         text-align: center;
2094         grid-area: seq;
2095 }
2096 .sequence-title .post-nav-title {
2097         font-size: 1.5em;
2098 }
2099
2100 .post-nav.prev {
2101         grid-area: prev;
2102         align-items: flex-start;
2103 }
2104 .post-nav.prev .post-nav-title::before {
2105         content: "\F0D9\2005";
2106 }
2107 .post-nav.next {
2108         grid-area: next;
2109         text-align: right;
2110         align-items: flex-end;
2111 }
2112 .post-nav.prev .post-nav-label,
2113 .post-nav.next .post-nav-label {
2114         display: none;
2115 }
2116 .post-nav.next .post-nav-title::after {
2117         content: "\2004\F0DA";
2118 }
2119 .post-nav.prev .post-nav-title::before,
2120 .post-nav.next .post-nav-title::after {
2121         font-family: Font Awesome;
2122         font-weight: 900;
2123         vertical-align: text-bottom;
2124         opacity: 0.75;
2125 }
2126 .post-nav-links {
2127         max-width: 100%;
2128 }
2129
2130 @media only screen and (max-width: 900px) {
2131         .post-nav-item {
2132                 font-size: 0.875em;
2133                 grid-template: auto auto / 50% 50%;
2134                 grid-template-areas:
2135                         "prev next"
2136                         "seq seq";
2137         }
2138         .post-nav.prev .post-nav-title,
2139         .post-nav.next .post-nav-title {
2140                 border-bottom: none;
2141         }
2142         .post-nav.prev {
2143                 margin: 0 0 0 -1px;
2144                 position: relative;
2145                 left: 1px;
2146         }
2147         .sequence-title {
2148                 padding: 0.75em 0;
2149         }
2150 }
2151 @media only screen and (max-width: 520px) {
2152         .post-nav-links + .comments {
2153                 padding: 1em 0 0 0;
2154         }
2155 }
2156
2157 .related-posts, .related-post-group {
2158         padding-bottom: 1em;
2159 }
2160 .related-post-type {
2161         font-size: 1.2em;
2162         font-weight: 600;
2163         margin-top: 0.5em;
2164         margin-bottom: -0.5em;
2165         list-style-type: disc;
2166         margin-left: -0.5em;
2167         opacity: 0.7;
2168 }
2169 .related-post-type::before {
2170         content: "\269c";
2171         font-size: 1.375em;
2172         font-weight: normal;
2173         margin-right: 0.15em;
2174         position: relative;
2175         vertical-align: baseline;
2176         top: 0.05em;
2177 }
2178 .related-posts .post-type-prefix {
2179         display: none;
2180 }
2181
2182 /**************/
2183 /* LINK POSTS */
2184 /**************/
2185
2186 .post.link-post > .post-body > p:first-child {
2187         text-align: center;
2188         font-size: 1.125em;
2189         margin: 0.5em 0 0 0;
2190 }
2191 .post.link-post > .post-body > p:only-child {
2192         font-size: 1.5em;
2193         margin: 1em 0;
2194 }
2195 .post.link-post a.link-post-link::before {
2196         content: "\F0C1";
2197         font-family: "Font Awesome", "Font Awesome 5 Free";
2198         font-weight: 900;
2199         font-size: 0.75em;
2200         position: relative;
2201         top: -2px;
2202         margin-right: 0.25em;
2203 }
2204
2205 /************/
2206 /* COMMENTS */
2207 /************/
2208
2209 .comments {
2210         max-width: 100%;
2211         padding: 0 0 1px 0;
2212         position: relative;
2213 }
2214 .comments::before {
2215         content: "";
2216         position: absolute;
2217         display: block;
2218         top: 0;
2219         left: 0;
2220         width: 100%;
2221         height: 100%;
2222         pointer-events: none;
2223 }
2224 ul.comment-thread {
2225         list-style-type: none;
2226         padding: 0;
2227         max-width: 100%;
2228 }
2229 .comments .comment-thread > li {
2230         position: relative;
2231 }
2232 #content > #top-nav-bar + .comment-thread .comment-item {
2233         margin-top: 0;
2234 }
2235
2236 .comment-item {
2237         margin: 2em 0 0 0;
2238 }
2239 .comment-item .comment-item {
2240         margin: 1em 8px 8px 16px;
2241 }
2242 .comment-item .comment-item + .comment-item {
2243         margin: 2em 8px 8px 16px;
2244 }
2245
2246 .comment-body {
2247         line-height: 1.45;
2248         font-size: 1.2rem;
2249         padding: 10px;
2250 }
2251 .comment-body ul {
2252         list-style-type: circle;
2253 }
2254 .comment-body > *:first-child {
2255         margin-top: 0;
2256 }
2257 .comment-body > *:last-child {
2258         margin-bottom: 0;
2259 }
2260
2261 .comments-empty-message {
2262         width: 100%;
2263         text-align: center;
2264         padding: 0.75em 0 0.9em 0;
2265         font-size: 1.375em;
2266 }
2267
2268 /**********************************/
2269 /* DEEP COMMENT THREAD COLLAPSING */
2270 /**********************************/
2271
2272 .comment-item > input[id^="expand"] {
2273         display: none;
2274 }
2275 .comment-item > input[id^="expand"] + label {
2276         display: block;
2277         visibility: hidden;
2278         position: relative;
2279         margin: 8px 9px;
2280 }
2281 .comment-item > input[id^="expand"] + label::after {
2282         content: "(Expand " attr(data-child-count) "    below)";
2283         visibility: visible;
2284         position: absolute;
2285         left: 0;
2286         white-space: nowrap;
2287         cursor: pointer;
2288 }
2289 .comment-item > input[id^="expand"]:checked + label::after {
2290         content: "(Collapse " attr(data-child-count) "  below)";
2291 }
2292 .comment-item > input[id^="expand"] ~ .comment-thread {
2293         max-height: 34px;
2294         overflow: hidden;
2295 }
2296 .comment-item > input[id^="expand"] ~ .comment-thread > li:first-child {
2297         margin-top: 0;
2298 }
2299 .comment-item > input[id^="expand"]:checked ~ .comment-thread {
2300         max-height: 1000000px;
2301 }
2302
2303 .comment-item > input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
2304         margin: 0;
2305 }
2306 .comment-item > input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item a.comment-parent-link:hover::after {
2307         display: none;
2308 }
2309
2310 /*************/
2311 /* BACKLINKS */
2312 /*************/
2313
2314 .backlinks > input {
2315         display: none;
2316 }
2317
2318 .backlinks > label {
2319         margin-left: 10px;
2320         display: block;
2321         color: #00f;
2322         cursor: pointer;
2323 }
2324
2325 .backlinks > label::before {
2326         content: " ";
2327         border-left: 5px solid currentColor;
2328         border-top: 5px solid transparent;
2329         border-bottom: 5px solid transparent;
2330         transition: transform 0.25s ease-out;
2331         transform-origin: 29% 55%;
2332         display: inline-block;
2333         padding-right: 0.5em;
2334 }
2335
2336 .backlinks > input:checked + label::before {
2337         transform: rotate(90deg);
2338 }
2339
2340 .backlinks li {
2341         margin-top: 0;
2342 }
2343
2344 .backlinks > ul {
2345         height: 0;
2346         perspective-origin: top;
2347         transform: perspective(100em) rotateX(-90deg);
2348         transform-origin: center top;
2349         opacity: 0;
2350         margin-top: 0.5em;
2351         margin-bottom: 0.5em;
2352 }
2353
2354 .backlinks > input:checked ~ ul {
2355         height: auto;
2356         transform: perspective(100em) rotateX(0deg);
2357         transition: transform 0.25s ease-in, opacity 0.25s ease-in;
2358         opacity: 1;
2359 }
2360
2361 /****************/
2362 /* COMMENT-META */
2363 /****************/
2364
2365 .comment-meta {
2366         padding: 2px 24px 2px 10px;
2367         margin: 0 -1px;
2368         border: none;
2369         display: flex;
2370         flex-flow: row wrap;
2371         align-items: baseline;
2372 }
2373 .user-page .comment-meta,
2374 .conversation-page .comment-meta {
2375         padding-right: 10px;
2376 }
2377 .comment-meta .comment-post-title {
2378         flex-basis: 100%;
2379         overflow: hidden;
2380         text-overflow: ellipsis;
2381         white-space: nowrap;
2382         line-height: 1.3;
2383 }
2384 .conversation-page .comment-meta .comment-post-title {
2385         margin: 0;
2386         flex-basis: unset;
2387         flex: 1 0 auto;
2388         text-align: right;
2389         display: none;  /* Not sure if we need to display this... */
2390 }
2391 .comment-item .author:not(.redacted).original-poster::after {
2392         content: "\2004(OP)";
2393         font-size: 0.75em;
2394 }
2395
2396 /*****************************/
2397 /* COMMENT THREAD NAVIGATION */
2398 /*****************************/
2399
2400 a.comment-parent-link:not(.inline-author),
2401 a.comment-parent-link.inline-author::before {
2402         opacity: 0.5;
2403 }
2404 a.comment-parent-link:hover {
2405         opacity: 1.0;
2406 }
2407 a.comment-parent-link::before {
2408         content: "\F062";
2409         font-family: "Font Awesome", "Font Awesome 5 Free";
2410         font-weight: 900;
2411         font-size: 0.75rem;
2412         line-height: 1;
2413         position: absolute;
2414         z-index: 1;
2415         display: block;
2416         padding: 3px 3px 0 3px;
2417         width: 16px;
2418         height: calc(100% + 2px);
2419         top: -1px;
2420         left: -17px;
2421 }
2422 a.comment-parent-link::after {
2423         content: "";
2424         position: absolute;
2425         z-index: 0;
2426         display: block;
2427         width: calc(100% + 26px);
2428         height: calc(100% + 38px);
2429         top: -29px;
2430         left: -17px;
2431         pointer-events: none;
2432         overflow: hidden;
2433         visibility: hidden;
2434 }
2435 a.comment-parent-link:hover::after {
2436         visibility: visible;
2437 }
2438
2439 .comment-child-links {
2440         flex-basis: 100%;
2441 }
2442 .comment-child-link {
2443         margin: 0 0.25em;
2444         display: inline-block;
2445 }
2446 .comment-child-link::before {
2447         content: ">";
2448         display: inline-block;
2449         margin: 0 2px 0 0;
2450 }
2451
2452 .comment-popup {
2453         position: fixed;
2454         top: 10%;
2455         right: 10%;
2456         max-width: 700px;
2457         z-index: 10001;
2458         font-size: 1rem;
2459         white-space: unset;
2460         pointer-events: none;
2461 }
2462 .comment-popup .comment-parent-link {
2463         display: none;
2464 }
2465 .comment-popup .comment-body {
2466         font-size: 1.0625rem;
2467 }
2468
2469 .comment-item.depth-odd {
2470         --GW-comment-background-color: var(--GW-comment-background-color-odd);
2471         --GW-comment-parent-background-color: var(--GW-comment-background-color-even);
2472 }
2473 .comment-item.depth-even {
2474         --GW-comment-background-color: var(--GW-comment-background-color-even);
2475         --GW-comment-parent-background-color: var(--GW-comment-background-color-odd);
2476 }
2477
2478 .comment-item:target {
2479         --GW-comment-background-color: var(--GW-comment-background-color-target);
2480 }
2481 .comment-item:target > .comment-thread > .comment-item {
2482         --GW-comment-parent-background-color: var(--GW-comment-background-color-target);
2483 }
2484
2485 /**********************/
2486 /* COMMENT PERMALINKS */
2487 /**********************/
2488 /********************/
2489 /* COMMENT LW LINKS */
2490 /********************/
2491
2492 .comment-meta .permalink::before,
2493 .comment-meta .lw2-link::before,
2494 .individual-thread-page a.comment-parent-link:empty::before {
2495         content: "";
2496         display: inline-block;
2497         width: 1rem;
2498         height: 1rem;
2499         border-radius: 3px;
2500         box-shadow:
2501                 0 0 0 1px #fff,
2502                 0 0 0 2px #00e,
2503                 0 0 0 3px transparent;
2504         padding: 0 0 0 2px;
2505         background-size: 100%;
2506         position: relative;
2507         top: 2px;
2508         opacity: 0.5;
2509 }
2510 .comment-meta .permalink::before {
2511         background-image: url('data:image/gif;base64,R0lGODlhIAAgAPYAMQAw5w066BxG6SZO6ipS6zJY6zhd7Dtf7Elr7k1u7lZ171178GJ/8GOA8GWC8GmF8WyH8XON8nWP8naP8oOa84Wc84ac9Ied9Iyh9I6j9JCl9ZGl9ZSo9ZWp9Zms9Zut9qKz9qi4962897G/+LPB+LTC+LjF+L3J+cLN+cTP+sXQ+srU+svU+s7X+9DZ+9HZ+9La+9Xd+9bd+9ng/Nrh/Nvh/Obq/ent/e7x/vHz/vL0/vP1/vT2/vj5//n6//r7//v7//z8//39//7+/////wAAAAAAAAAAAAAAAAAAAAAAwMyACwEAAAAPAAAAAAAAAOC8CVX/fwAAZYtHif9/AAAAPywAAGAAAHA/LAAAYAAAIJ8FAABgAAAg8A0AgGEAAJDwDQCAYQAAEOQJAABhAADYvAlV/38AAJDtsXL/fwAAkO2xcv9/AABvHvb//57//7C8CVX/fwAAG2Zyjf9/AACQ8A0AAGEAAMDkC7PFfwAAkAAAAAAAAACA7bFy/38AACwAAAAAIAAgAAAH84AAgoOEhYaHiImKi4yNjo+QhgEODQGRiiVDRERDIpeHJ5uiRCWfhAdAo5tCCaaCFZtDHyCxEK4AsERCCxG1twhBqrqttzPCNLeCDTqjOQzJGMKctq4e0kMPkQUbgxSaqtiCAR0DiwbMMoMEACybyJYAATREOQWJBjui6YMr7oPyouodEsBsFAx+/gTFUCWwkIJgo3iUA9CPCLJ4OMBlOyThWwtCFS8KchErgqIAN0SFQGhxkAhRNhhFE3XjAgAVm14AyJBSlIVGJlT5GNVDVSlHHCBKEyVEg7YUP5b2QDHx04QRL2rUaEHCZLKvYMOKHXspEAA7');
2512 }
2513 .comment-meta .lw2-link::before {
2514         background-image: url('data:image/gif;base64,R0lGODlhIAAgAPYAMQAw5w066BZB6RxG6SJL6iZO6ipS6zJY6zhd7D1h7EBk7UJl7Ulr7kts7lFx7mB+8GJ/8GmF8WyH8XON8naP8niR8n+X84GY84+k9JOn9ZSo9ZWp9Zut9qS196W296e396q6962896+++LTC+LzI+b3J+cDM+cXQ+sjS+srU+s7X+9La+9bd+9jf/Nng/Nvh/Nzi/N7k/OXq/efr/ent/eru/e3w/vDz/vHz/vL0/vT2/vb3//f4//r7//z8//39//7+/////wAAt4pHif9/AAAAAAAAAAAAAAAAAAAAAAAAwMyACwEAAAAPAAAAAAAAAOC8CVX/fwAAZYtHif9/AAAAPywAAGAAAHA/LAAAYAAAIJ8FAABgAAAg8A0AgGEAAJDwDQCAYQAAEOQJAABhAADYvAlV/38AAJDtsXL/fwAAkO2xcv9/AABvHvb//57//7C8CVX/fwAAG2Zyjf9/AACQ8A0AAGEAAKDkC7PFfwAAkAAAAAAAAACA7bFy/38AACwAAAAAIAAgAAAH5YAAgoOEhYaHiImKi4yNjo+QkZKTlJWWl5EHBwoBgwuaB56hgpqciAE3QUE6BQAIPao9BgAmqiAADT6qNac2qjuzAC2qQBQBNaovABqqQSi9v60AHM0iCbpBsifEFtBBO9IM2CwYzUAVNL/BhgG+39IAMqo4w80qPKorie3RgyHNAANu2OcO3CAIPwIG/IGAoCodAwbxawZjBsAYiiYC8dDhQwYAJQB6IAGwQ0Z3AIFEmACE2IMLzX44OKkQiAQBOVTdGEAAVhAanRwGVAkghaoUglyoGoGpqdOnUKNKnUq1qlVEgQAAOw==');
2515 }
2516 .individual-thread-page a.comment-parent-link:empty::before {
2517         left: unset;
2518         background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMQAw5wAw9QAw9gBj9gB39gB99i8w5y+R9y+R+T8w51eq+V8w51+R9Jeq85eq9ZfY/s/E89fL+dfl/N/E8N/L9N/L9d/4/+fL9OfY9+f4/u/R9e/4/u////fY9ffe9ffe9vfr+/f//////P////9/AAABAAAAAAAAAAAAAAAAAAAAwMyACwEAAAAwaAUAAGEAABUAAAAAAAAAMGgFAABhAABAuwlV/38AAA8AAAAAAAAAwMyACwEAAAAAAAAAAAAAACwAAAAAIAAgAAAGi0CAcEgsGo/IpHLJbDqf0Kh0Ci1IIFRkgTMaXbLFbbf7BQPEYzIYnVZP2W13lRtvl53wSKgLsqTvSwR0XRMCeyMeAYNeTQ9pFAAEhx+RgyILTAhjGkIDk0IFn00KGxVDnl2UQgcZGAZUqCOqZp2itACxs7S5t7Wpvbi2u4cdwAAMDg0JxszNzs/QZkEAOw==');
2519 }
2520 .comment-meta .permalink:hover::before {
2521         background-image: url('data:image/gif;base64,R0lGODlhIAAgAPYAMQAw5wAw6AAw6QBW5wBd6wBq6gBq6y8w5y+E7UdW508w509D50996k+k718w51+q71+x71+x8F+38G8w549W55dW55d355ed6pfL9Z++75/L86dd56eq6qex66fR86fY9a9q57+R57/L77/e9b/r+seR58fl+c+d58+k58+36s/L7c/y/8/4/9eq59fl9tf4/9+x59/E6t/e8+e36Oe+6ufL6ufe8Ofy9uf4+ef//+/R6u/e7u////fY6vfe7ffr8ffy9vf////e6//l6//l7P/r7f/y8P/47//48P//8P//8v//8///9f//9v//+f//+v///1X/fwAAZYtHif9/AAAAPywAAGAAAHA/LAAAYAAAIJ8FAABgAAAg8A0AgGEAAJDwDQCAYQAAEOQJAABhAACowQlV/38AAJDtsXL/fwAAkO2xcv9/AABvHvb//57//4DBCVX/fwAAG2Zyjf9/AACQ8A0AAGEAAKDkC7PFfwAAkAAAAAAAAACA7bFy/38AACwAAAAAIAAgAAAH84BQgoOEhYaHiImKi4yNjo+Qhk5AQJGLMQcAmh6WhzOaoAAYnYRJE6GaATmkgkSgIzqgLKxQQ6kvRbK0SA6oAAKrrE8lvg20gkYVoQU4x0K+mrOsPdAAL5FMMoNEmb7XUE42QYtKyg+DT1AtmsaDTiEABTyJShSg54PrAO3g8Jryh5YoCwUhHztBT06gMjCv0BEFqAiMU3cQSpMN3hAV6SaBkD5+UFCAWqHICQhQHwzuG1QDFAJGz0AxcAEFhqYIUHZYCEWiEQ1UA0IlQKXhkQ+I1UAFMBGpSYoF1QZkmGjpyQ8VHC5c6CDixrGvYMOKHdspEAA7');
2522 }
2523 .comment-meta .lw2-link:hover::before {
2524         background-image: url('data:image/gif;base64,R0lGODlhIAAgAPYAMQAw5wAw6AAw6gBD6gBW6gBd6wBq6gBq6wB97S8w5y997Ucw50ed70ek708w50+k7U+q8F8w51+x8G+38Xcw53dD53e38Ye37JdW55fL9ZfR9p/Y9p/e9qdW56dd56dq56d356fe9rdq57ed57fl+b9357/Y8L/y/8eR58+R58/R78/y9s/y/8/4/9eq59fR79fe9df4/9+x59///+e36O/L6u////fY6vfe6vfe6/f////l7P/r7f/y7v/47//48P/4+f/4+v//7///8f//9f//9v//+v///wAAAAAAAAAAwMyACwEAAAAPAAAAAAAAALDBCVX/fwAAZYtHif9/AAAAPywAAGAAAHA/LAAAYAAAIJ8FAABgAAAg8A0AgGEAAJDwDQCAYQAAEOQJAABhAACowQlV/38AAJDtsXL/fwAAkO2xcv9/AABvHvb//57//4DBCVX/fwAAG2Zyjf9/AACQ8A0AAGEAAJDkC7PFfwAAkAAAAAAAAACA7bFy/38AACwAAAAAIAAgAAAH2YBHgoOEhYaHiImKi4yNjo+QkZKTlJWWl5FGRkGDRkCaRoOfnZuJRR0AAAU6R0MUqQOsNKkbRz4RqQiIRR6pBKxHKakALEUfqQ1HOcMWu70Av4I3wxpCDrA6MsMnzr7AP7gAEDjDACsi3t3QwEYlqQYj5RcVqRKmz9GCNeX8wyT36QT1WNCvnAAbAFUR4lXuAYhyDBQxTGXihQoYR2YN46AxVQiJz/jF4JFgWIwdwwLMAFmwBREMqQ60egVAwaKJIo+4SDXhiBEUqTJgGkq0qNGjSJMqXcoUUSAAOw==');
2525 }
2526 .individual-thread-page a.comment-parent-link:empty:hover::before {
2527         background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMQAw5wBD5wBD6i8w50cw50+E6k+k70+q8F8w51+x8G8w529d53cw53e38Idq54ex7oe+8Y9d54/E8Ze+8JfL9aeR6qe+7K/L8t+359/e8N/e8vfe7ffr8ff////r7f/r7v/y7//y8P/47///8P///wABAAAAAAAAAAAAAAAAAAAAwMyACwEAAAAwaAUAAGEAABUAAAAAAAAAMGgFAABhAAAQwAlV/38AAA8AAAAAAAAAwMyACwEAAAAAAAAAAAAAACwAAAAAIAAgAAAGjECScEgsGo/IpHLJbDqf0Kh0Cg1VLlQkSAEAQLLFbbf7BZPEYzIYnVZP2ePAuAyFt+d17tiC6BYiaXRLInpdFCN9AAcjDIFNGGkSJCKJBpOFAh1MHgNdDUKUXZZnlU4bCxNDoQCjJB8OD1mrrWaTpbWgt7izuLmivba/vSIEXQnAJBwZGsjNzs/Q0bVBADs=');
2528 }
2529 .comment-meta .permalink:hover::before,
2530 .comment-meta .lw2-link:hover::before,
2531 .individual-thread-page a.comment-parent-link:empty:hover::before {
2532         box-shadow:
2533                 0 0 0 2px #00e,
2534                 0 0 0 3px transparent;
2535         opacity: 1.0;
2536         filter: unset;
2537 }
2538 .comment-meta .permalink:active::before,
2539 .comment-meta .lw2-link:active::before,
2540 .individual-thread-page a.comment-parent-link:empty:active::before {
2541         transform: scale(0.9);
2542 }
2543
2544 .comment-meta .permalink,
2545 .comment-meta .lw2-link,
2546 .individual-thread-page .comment-parent-link:empty {
2547         position: relative;
2548         opacity: 1.0;
2549 }
2550 .comment-meta .permalink::after,
2551 .comment-meta .lw2-link::after,
2552 .individual-thread-page .comment-parent-link:empty::after {
2553         content: "";
2554         width: 30px;
2555         height: 30px;
2556         display: block;
2557         position: absolute;
2558         top: -2px;
2559         left: -7px;
2560         box-shadow: none;
2561         pointer-events: auto;
2562         visibility: visible;
2563 }
2564
2565 /*************************/
2566 /* COMMENTS COMPACT VIEW */
2567 /*************************/
2568
2569 #comments-list-mode-selector,
2570 #content.index-page #comments-list-mode-selector,
2571 #content.user-page #comments-list-mode-selector {
2572         padding-top: 6px;
2573         grid-column: 1;
2574         position: unset;
2575         z-index: 1;
2576         justify-self: start;
2577         align-self: start;
2578 }
2579 #comments-list-mode-selector button {
2580         color: transparent;
2581         width: 32px;
2582         height: 32px;
2583         padding: 6px;
2584         margin: 1px;
2585         overflow: hidden;
2586         background-repeat: no-repeat;
2587         background-size: 100%;
2588         background-origin: content-box;
2589 }
2590 #comments-list-mode-selector button:disabled {
2591         cursor: auto;
2592 }
2593 #comments-list-mode-selector button.expanded {
2594         background-image: url('data:image/gif;base64,R0lGODdhKAAoAJEAAAAAAKqqqv///wAAACH5BAkAAAMALAAAAAAoACgAAAJTnI+py+0Po5wn2Iuz3lrxD25eSIJjiWZnyq4s6r5kLJtJndK4eO9z77NRhsSi8YhMKpfMpvMJjTqDIR3VYr1mqdtg1/fdhXHjWll2fqVb0rY7WQAAOw==');
2595 }
2596 #comments-list-mode-selector button.compact {
2597         background-image: url('data:image/gif;base64,R0lGODdhKAAoAJEAAAAAAKqqqv///wAAACH5BAkAAAMALAAAAAAoACgAAAJXnI+py+0Po5y0uoCz3rxz5YViB46mWJ7qlq5u66rWTNf2fcQxrI98H/oBSYnhSWjU4JbMJi7pK0KD0ikRYfUgp1uo8wsOM7LXHJlVPWO6SbbRPRTL57gCADs=');
2598 }
2599 @media only screen and (max-resolution: 1dppx) {
2600         #comments-list-mode-selector button.expanded {
2601                 background-image: url('data:image/gif;base64,R0lGODdhFAAUAKIAAAAAAKampqqqqv///wAAAAAAAAAAAAAAACH5BAkAAAQALAAAAAAUABQAAAMmSLrc/tCJSasV7Gqat+6eBYbcQopRqq5s257VeMokHdoevrm8mgAAOw==');
2602         }
2603         #comments-list-mode-selector button.compact {
2604                 background-image: url('data:image/gif;base64,R0lGODdhFAAUAKIAAAAAAKqqqtvb2////wAAAAAAAAAAAAAAACH5BAkAAAQALAAAAAAUABQAAAMmSLrc/tCFSasN7Gqat45g433LeHUmF65phbZvurLtFJv3OO98zyQAOw==');
2605         }
2606 }
2607
2608 #content > ul.comment-thread > li.comment-item,
2609 #content.compact > ul.comment-thread > li.comment-item {
2610         margin: 0;
2611 }
2612
2613 #content > .comment-thread {
2614         margin: 1em 0;
2615 }
2616 #content.compact > .comment-thread {
2617         font-size: 0.9375rem;
2618         margin: 0.5em 0;
2619 }
2620 #content.compact > .comment-thread:hover {
2621         z-index: 1;
2622 }
2623 #content.compact > .comment-thread .comment-body {
2624         font-size: 1.0625rem;
2625 }
2626 #content.compact > .comment-thread .comment-item,
2627 #content.index-page .comment-item.ignored,
2628 #content.inbox-user-page .comment-item.ignored {
2629         max-height: 61px;
2630         margin-top: 1em;
2631         overflow: hidden;
2632         position: relative;
2633 }
2634 #content.compact > .comment-thread .comment-item {
2635         pointer-events: none;
2636 }
2637 #content.compact > .comment-thread .comment-item::after {
2638         content: "…";
2639         position: absolute;
2640         right: 0;
2641         bottom: 0;
2642         font-size: 2rem;
2643         line-height: 1;
2644         padding: 0 16px 10px 64px;
2645         pointer-events: auto;
2646 }
2647 @media only screen and (hover: hover) {
2648         #content.compact:not(:focus-within) > .comment-thread .comment-item:hover,
2649         #content.compact > .comment-thread .comment-item.expanded {
2650                 overflow: visible;
2651                 pointer-events: auto;
2652                 z-index: 10;
2653         }
2654 }
2655 @media only screen and (hover: none) {
2656         #content.compact > .comment-thread.expanded .comment-item {
2657                 overflow: visible;
2658                 pointer-events: auto;
2659                 z-index: 10;
2660         }
2661 }
2662 #content.compact > .comment-thread .comment-item .comment-meta {
2663         white-space: nowrap;
2664         overflow: hidden;
2665         text-overflow: ellipsis;
2666         padding: 2px 10px;
2667 }
2668 #content.compact > .comment-thread .comment-item:hover .comment-meta {
2669         white-space: unset;
2670 }
2671 #content.compact > .comment-thread .comment-item .comment-meta a {
2672         pointer-events: auto;
2673 }
2674 #content.compact > .comment-thread .comment-item .comment-meta .comment-post-title {
2675         display: inline;
2676 }
2677 #content.compact > .comment-thread .comment-item .comment-meta .voting-controls + .comment-post-title {
2678         margin-left: 0.75em;
2679 }
2680 @media only screen and (hover: hover) {
2681         #content.compact > .comment-thread:last-of-type .comment-item:hover,
2682         #content.compact > .comment-thread:last-of-type .comment-item.expanded {
2683                 max-height: unset;
2684         }
2685         #content.compact > .comment-thread .comment-item:hover .comment,
2686         #content.compact > .comment-thread .comment-item.expanded .comment {
2687                 position: relative;
2688                 z-index: 1;
2689                 margin-bottom: 2em;
2690                 bottom: 0;
2691         }
2692         #content.compact > .comment-thread .comment-item:hover .comment::before,
2693         #content.compact > .comment-thread .comment-item.expanded .comment::before{
2694                 content: "";
2695                 position: absolute;
2696                 display: block;
2697                 width: calc(100% + 20px);
2698                 height: calc(100% + 20px);
2699                 z-index: -1;
2700                 top: -10px;
2701                 left: -10px;
2702         }
2703         #content.compact > .comment-thread:last-of-type .comment-item:hover .comment,
2704         #content.compact > .comment-thread:last-of-type .comment-item.expanded .comment{
2705                 margin: 0;
2706         }
2707 }
2708 @media only screen and (hover: none) {
2709         #content.compact > .comment-thread.expanded:last-of-type .comment-item {
2710                 max-height: unset;
2711         }
2712         #content.compact > .comment-thread.expanded .comment-item .comment {
2713                 position: relative;
2714                 z-index: 1;
2715                 margin-bottom: 2em;
2716                 bottom: 0;
2717         }
2718         #content.compact > .comment-thread.expanded .comment-item .comment::before {
2719                 content: "";
2720                 position: absolute;
2721                 display: block;
2722                 width: calc(100% + 14px);
2723                 height: calc(100% + 20px);
2724                 z-index: -1;
2725                 top: -10px;
2726                 left: -10px;
2727         }
2728         #content.compact > .comment-thread.expanded:last-of-type .comment-item .comment {
2729                 margin: 0;
2730         }
2731         #content.compact > .comment-thread.expanded .comment-item .comment::after {
2732                 content: "";
2733                 display: block;
2734                 position: fixed;
2735                 top: 0;
2736                 left: 0;
2737                 width: 100%;
2738                 height: 100%;
2739                 z-index: -2;
2740                 background-color: rgba(0,0,0,0.5);
2741         }
2742 }
2743
2744 /*****************************/
2745 /* HIGHLIGHTING NEW COMMENTS */
2746 /*****************************/
2747
2748 .new-comment::before {
2749         content: "";
2750         position: absolute;
2751         width: 100%;
2752         height: 100%;
2753         z-index: 5000;
2754         pointer-events: none;
2755 }
2756
2757 /***********************************/
2758 /* COMMENT THREAD MINIMIZE BUTTONS */
2759 /***********************************/
2760
2761 .comment-minimize-button {
2762         font-family: "Font Awesome", "Font Awesome 5 Free";
2763         font-weight: 900;
2764         font-size: 1.25rem;
2765         line-height: 1;
2766         position: absolute;
2767         right: 1px;
2768         top: 1px;
2769         width: 18px;
2770         margin: 0;
2771         cursor: pointer;
2772 }
2773 .comment-minimize-button:active {
2774         transform: scale(0.9);
2775 }
2776 .comment-minimize-button::after {
2777         content: attr(data-child-count);
2778         font-weight: normal;
2779         font-size: 0.8125rem;
2780         position: absolute;
2781         left: 0;
2782         width: 100%;
2783         text-align: center;
2784         top: 21px;
2785 }
2786 #content.individual-thread-page .comment-minimize-button {
2787         display: none;
2788 }
2789
2790 /*****************/
2791 /* IGNORE SYSTEM */
2792 /*****************/
2793
2794 #content.comment-thread-page .comment-item.ignored {
2795         height: 38px;
2796         overflow: hidden;
2797 }
2798 .comment-item.ignored > .comment > .comment-meta > .author {
2799         text-decoration: line-through;
2800 }
2801
2802 /***********************************/
2803 /* INDIVIDUAL COMMENT THREAD PAGES */
2804 /***********************************/
2805
2806 .individual-thread-page > h1 {
2807         line-height: 1;
2808         margin: 0.75em 0 3px 0;
2809 }
2810 .individual-thread-page .comments {
2811         border: none;
2812 }
2813
2814 /*************/
2815 /* SHORTFORM */
2816 /*************/
2817
2818 .shortform-index-page .comments::before {
2819         border: none;
2820         box-shadow: none;
2821 }
2822
2823 .shortform-index-page .comments > .comment-thread > .comment-item:first-child {
2824         margin-top: 0;
2825 }
2826
2827 /****************/
2828 /* VOTE BUTTONS */
2829 /****************/
2830
2831 .vote {
2832         margin: 0;
2833 }
2834 .vote {
2835         font-family: "Font Awesome", "Font Awesome 5 Free";
2836         font-weight: 900;
2837         border: none;
2838 }
2839
2840 .vote:disabled {
2841         visibility: hidden;
2842         cursor: default;
2843 }
2844
2845 @keyframes waiting {
2846         0% {background-position: 200% 0%}
2847         100% {background-position: 0% 0%}
2848 }
2849
2850 .voting-controls .karma-value {
2851         opacity: 1;
2852         transition: opacity 0.5s linear;
2853 }
2854
2855 .voting-controls.waiting .karma-value {
2856         opacity: 0.5;
2857         background: repeat-x linear-gradient(70deg, #000 50%, #fff 75%, #000);
2858         background-clip: text;
2859         -webkit-background-clip: text;
2860         color: transparent;
2861         background-position: 200% 0%;
2862         background-size: 200% 100%;
2863         animation: waiting 1s linear infinite;
2864 }
2865
2866 /* Replicated karma controls at bottom of comments. */
2867 .comment-controls .voting-controls {
2868         float: left;
2869         font-size: 0.9375em;
2870 }
2871
2872 .comment-controls .voting-controls:first-of-type {
2873         margin-left: -14px;
2874 }
2875
2876 /*****************************/
2877 /* COMMENTING AND POSTING UI */
2878 /*****************************/
2879
2880 .comment-controls {
2881         text-align: right;
2882         margin: 0 8px 8px 16px;
2883         position: relative;
2884         z-index: 9999;
2885 }
2886 .comment-thread .comment-controls + .comment-thread > li:first-child {
2887         margin-top: 8px;
2888 }
2889 .comments > .comment-controls {
2890         margin: 8px 0 0 0;
2891 }
2892 .comments > .comment-controls:last-child {
2893         margin: 8px 0 16px 0;
2894 }
2895
2896 .posting-controls input[type='submit'] {
2897         margin: 6px;
2898         padding: 4px 10px;
2899         font-size: 1.125rem;
2900 }
2901
2902 .comment-controls .cancel-comment-button {
2903         position: absolute;
2904         right: 0;
2905         margin: 0;
2906         height: 27px;
2907         font-size: inherit;
2908         padding: 4px 8px 2px 4px;
2909         z-index: 1;
2910 }
2911 .comment-controls .cancel-comment-button::before {
2912         font-family: "Font Awesome", "Font Awesome 5 Free";
2913         margin-right: 3px;
2914         content: '\F00D';
2915         font-weight: 900;
2916         font-size: 0.9em;
2917         opacity: 0.7;
2918 }
2919
2920 .comment + .comment-controls .action-button {
2921         font-weight: normal;
2922         font-size: 1.0625em;
2923         padding: 1px 6px;
2924 }
2925 .comment-controls .action-button::before {
2926         font-family: "Font Awesome", "Font Awesome 5 Free";
2927         margin-right: 3px;
2928 }
2929 .new-comment-button {
2930         font-size: 1.5rem;
2931         margin: 0 0.25em;
2932 }
2933 .comment-controls .reply-button::before {
2934         content: '\F3E5';
2935         font-weight: 900;
2936         font-size: 0.9em;
2937         opacity: 0.6;
2938 }
2939 .comment-meta .replied::before {
2940         content: '\F3E5';
2941         font-family: "Font Awesome", "Font Awesome 5 Free";
2942         color: #090;
2943         font-weight: 900;
2944         font-size: 0.9em;
2945         opacity: 0.6;
2946 }
2947
2948 .post-controls {
2949         text-align: right;
2950         margin: 0.75em 0 0 0;
2951         align-self: start;
2952         justify-self: end;
2953 }
2954 .edit-post-link {
2955         display: inline-block;
2956         margin-bottom: 0.25em;
2957         font-size: 1.125rem;
2958 }
2959 .edit-post-link::before {
2960         margin-right: 0.3em;
2961 }
2962 .comment-controls .edit-button::before,
2963 .edit-post-link::before {
2964         content: '\F303';
2965         font-family: "Font Awesome", "Font Awesome 5 Free";
2966         font-weight: 900;
2967         font-size: 0.75em;
2968         position: relative;
2969         top: -1px;
2970 }
2971
2972 .comment-controls .delete-button {
2973         margin-right: 0.25em;
2974 }
2975 .comment-controls .edit-button,
2976 .comment-controls .retract-button,
2977 .comment-controls .unretract-button {
2978         margin-right: 1em;
2979 }
2980 .comment-controls .retract-button::before {
2981         content: '\F4B3';
2982         opacity: 0.6;
2983 }
2984 .comment-controls .unretract-button::before {
2985         content: '\F075';
2986         opacity: 0.9;
2987 }
2988 .comment-controls .delete-button::before {
2989         content: '\F05E';
2990         opacity: 0.7;
2991 }
2992 .comment-controls .retract-button::before,
2993 .comment-controls .unretract-button::before,
2994 .comment-controls .delete-button::before {
2995         font-weight: 900;
2996         font-size: 0.9em;
2997 }
2998
2999 .comment-controls form {
3000         position: relative;
3001 }
3002 .textarea-container {
3003         position: relative;
3004 }
3005 .posting-controls textarea {
3006         display: block;
3007         width: 100%;
3008         height: 15em;
3009         min-height: 15em;
3010         max-height: calc(100vh - 6em);
3011         margin: 2px 0 0 0;
3012         padding: 4px 5px;
3013         font-size: 1.2rem;
3014         border-style: solid;
3015         border-width: 29px 1px 1px 1px;
3016         resize: none;
3017 }
3018
3019 /* GUIEdit buttons */
3020
3021 .guiedit-buttons-container {
3022         position: absolute;
3023         left: 1px;
3024         top: 1px;
3025         width: calc(100% - 2px);
3026         height: 28px;
3027         text-align: left;
3028         padding: 1px 4px 0 4px;
3029         overflow: hidden;
3030 }
3031 .comment-thread-page .guiedit-buttons-container {
3032         padding-right: 60px;
3033 }
3034 .guiedit-buttons-container button {
3035         height: 26px;
3036         padding: 0 7px;
3037         font-weight: 900;
3038         font-size: 0.875rem;
3039         line-height: 1;
3040         position: static;
3041 }
3042 .guiedit-buttons-container button:active {
3043         transform: none;
3044 }
3045 .guiedit-buttons-container button:active div {
3046         transform: scale(0.9);
3047 }
3048 .guiedit-buttons-container button sup {
3049         font-weight: bold;
3050 }
3051 .guiedit::after {
3052         content: attr(data-tooltip);
3053         position: absolute;
3054         font-weight: normal;
3055         font-size: 1rem;
3056         top: 2px;
3057         left: 464px;
3058         height: 25px;
3059         padding: 4px 0;
3060         white-space: nowrap;
3061         visibility: hidden;
3062 }
3063 .guiedit:hover::after {
3064         visibility: visible;
3065 }
3066
3067 /* Markdown hints */
3068
3069 .posting-controls .markdown-reference-link {
3070         float: left;
3071         padding: 1px 0 0 6px;
3072 }
3073 .posting-controls .markdown-reference-link a {
3074         padding-right: 1.5em;
3075         margin-right: 0.15em;
3076         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');
3077         background-size: 1.25em;
3078         background-repeat: no-repeat;
3079         background-position: right center;
3080 }
3081
3082 #markdown-hints-checkbox + label {
3083         float: left;
3084         margin: 2px 0 0 1em;
3085         line-height: 1.3;
3086         cursor: pointer;
3087 }
3088 #edit-post-form #markdown-hints-checkbox + label {
3089         padding: 0;
3090 }
3091 #markdown-hints-checkbox {
3092         visibility: hidden;
3093         float: left;
3094 }
3095 #markdown-hints-checkbox + label::after {
3096         content: "(Show Markdown help)";
3097 }
3098 #markdown-hints-checkbox:checked + label::after {
3099         content: "(Hide Markdown help)";
3100 }
3101 #markdown-hints-checkbox + label::before {
3102         content: '\F059';
3103         font-family: "Font Awesome", "Font Awesome 5 Free";
3104         font-weight: 900;
3105         margin-right: 3px;
3106 }
3107 #markdown-hints-checkbox:checked + label::before {
3108         font-weight: normal;
3109 }
3110 #markdown-hints {
3111         margin: 4px 0 0 4px;
3112         padding: 4px 8px;
3113         position: absolute;
3114         text-align: left;
3115         top: calc(100% - 1em);
3116         z-index: 1;
3117         display: none;
3118 }
3119 .comment-controls #markdown-hints {
3120         top: calc(100% + 1.75em);
3121 }
3122 #markdown-hints-checkbox:checked ~ #markdown-hints {
3123         display: table;
3124 }
3125 .markdown-hints-row {
3126         display: table-row;
3127 }
3128 #markdown-hints .markdown-hints-row span,
3129 #markdown-hints .markdown-hints-row code {
3130         float: none;
3131         display: table-cell;
3132         border: none;
3133         background-color: inherit;
3134         padding: 0 12px 0 0;
3135 }
3136
3137 /******************/
3138 /* EDIT POST FORM */
3139 /******************/
3140
3141 #edit-post-form {
3142         padding: 1em 1em 4em 1em;
3143 }
3144 #edit-post-form .post-meta-fields {
3145         display: grid;
3146         grid-template-columns: 5em auto auto auto 1fr auto;
3147         margin-bottom: 0.625em;
3148 }
3149
3150 #edit-post-form label[for='title'],
3151 #edit-post-form label[for='url'],
3152 #edit-post-form label[for='section'] {
3153         grid-column: 1;
3154 }
3155 #edit-post-form input[type='text'] {
3156         padding: 0.25em;
3157         grid-column: 2 / span 4;
3158         margin-bottom: 0.5em;
3159 }
3160
3161 #edit-post-form .link-post-checkbox,
3162 #edit-post-form .link-post-checkbox + label {
3163         grid-row: 1;
3164         grid-column: 6;
3165 }
3166 #edit-post-form .question-checkbox,
3167 #edit-post-form .question-checkbox + label {
3168         grid-row: 3;
3169         grid-column: 5;
3170         justify-self: start;
3171         margin-left: 1.5em;
3172 }
3173
3174 #edit-post-form .post-meta-fields label[for="submit-to-frontpage"] {
3175         grid-row: 4;
3176         grid-column: 2 / span 4;
3177         text-align: left;
3178         margin-top: 8px;
3179 }
3180
3181 #edit-post-form .post-meta-fields input[type='checkbox'] {
3182         height: 0;
3183         opacity: 0;
3184         pointer-events: none;
3185 }
3186 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
3187         white-space: nowrap;
3188         position: relative;
3189         cursor: pointer;
3190         padding: 0.25em 0.5em 0.25em calc(20px + 0.25em + 0.3725em);
3191         align-self: start;
3192 }
3193 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
3194         content: "";
3195         font-family: "Font Awesome", "Font Awesome 5 Free";
3196         font-size: 1.375rem;
3197         line-height: 0.7;
3198         text-indent: 1px;
3199         font-weight: 900;
3200         position: absolute;
3201         width: 20px;
3202         height: 20px;
3203         left: 5px;
3204 }
3205 #edit-post-form label[for='url'],
3206 #edit-post-form input[name='url'] {
3207         display: none;
3208 }
3209 #edit-post-form .link-post-checkbox:checked ~ label[for='url'],
3210 #edit-post-form .link-post-checkbox:checked ~ input[name='url'] {
3211         display: initial;
3212 }
3213 #edit-post-form label {
3214         line-height: normal;
3215         border: 1px solid transparent;
3216         text-align: right;
3217     padding: 0.25em 0.5em;
3218     white-space: nowrap;
3219 }
3220 #edit-post-form input[type='radio'] {
3221         width: 0;
3222         margin: 0;
3223         opacity: 0;
3224         pointer-events: none;
3225 }
3226 #edit-post-form input[type='radio'] + label {
3227         padding: 4px 12px;
3228         text-align: center;
3229         border-style: solid;
3230         border-width: 1px 1px 1px 0;
3231         cursor: pointer;
3232 }
3233 #edit-post-form input[type='radio']:checked + label {
3234         cursor: default;
3235 }
3236
3237 #edit-post-form label[for='section'] {
3238         grid-row: 3;
3239 }
3240 #edit-post-form input[type='radio'] + label {
3241         grid-row: 3;
3242 }
3243 @supports (width: -moz-fit-content) {
3244         #edit-post-form input[type='radio'] + label {
3245                 width: -moz-fit-content;
3246         }
3247 }
3248 @supports (width: fit-content) {
3249         #edit-post-form input[type='radio'] + label {
3250                 width: fit-content;
3251         }
3252 }
3253
3254 #edit-post-form textarea {
3255         min-height: 24em;
3256 }
3257
3258 #edit-post-form input[type='submit'] {
3259         padding: 6px 12px;
3260         float: right;
3261 }
3262 #edit-post-form #markdown-hints {
3263         top: calc(100% + 2em);
3264 }
3265
3266 #edit-post-form button.guiedit div {
3267         overflow: visible;
3268 }
3269 .guiedit-mobile-auxiliary-button {
3270         display: none;
3271 }
3272
3273 /***********/
3274 /* BUTTONS */
3275 /***********/
3276
3277 button,
3278 input[type='submit'] {
3279         font-family: inherit;
3280         font-size: inherit;
3281         background-color: inherit;
3282         cursor: pointer;
3283         border: none;
3284         border-radius: 0;
3285 }
3286
3287 /************/
3288 /* HEADINGS */
3289 /************/
3290
3291 .body-text h1,
3292 .body-text h2,
3293 .body-text h3,
3294 .body-text h4,
3295 .body-text h5,
3296 .body-text h6 {
3297         line-height: 1.1;
3298         margin: 1em 0 0.75em 0;
3299         text-align: left;
3300 }
3301
3302 .post-body h5,
3303 .post-body h6 {
3304         font-size: 1em;
3305 }
3306 .post-body h4 {
3307         font-size: 1.2em;
3308 }
3309 .post-body h3 {
3310         font-size: 1.4em;
3311 }
3312 .post-body h2 {
3313         font-size: 1.75em;
3314 }
3315 .post-body h1 {
3316         font-size: 2.1em;
3317 }
3318
3319 .comment-body h5,
3320 .comment-body h6 {
3321         font-size: 1em;
3322 }
3323 .comment-body h4 {
3324         font-size: 1.15em;
3325 }
3326 .comment-body h3 {
3327         font-size: 1.3em;
3328 }
3329 .comment-body h2 {
3330         font-size: 1.5em;
3331 }
3332 .comment-body h1 {
3333         font-size: 1.75em;
3334 }
3335
3336 /**********/
3337 /* QUOTES */
3338 /**********/
3339
3340 blockquote,
3341 .post-body .comment-box .comment-body {
3342         font-size: 0.9em;
3343         margin: 1em 0;
3344         padding-left: 0.5em;
3345         margin-left: 1px;
3346         padding-bottom: 3px;
3347 }
3348 blockquote *:first-child {
3349         margin-top: 0;
3350 }
3351 blockquote *:last-child {
3352         margin-bottom: 0;
3353 }
3354 blockquote blockquote {
3355         font-size: 0.95em;
3356 }
3357
3358 /* Pseudo-blockquotes that LW sometimes uses for some reason */
3359
3360 .post-body .comment-box .user-name {
3361         font-style: italic;
3362 }
3363 .post-body .comment-box .user-name::after {
3364         content: ":";
3365 }
3366 .post-body .comment-box {
3367         zoom: 1.25;
3368 }
3369
3370 /**********/
3371 /* IMAGES */
3372 /**********/
3373
3374 #content img, #content figure {
3375         max-width: 100%;
3376 }
3377
3378 .prediction-poll > svg {
3379         width: 700px;
3380         max-width: 100%;
3381 }
3382
3383 img.inline-latex {
3384         position: relative;
3385         top: 2.5px;
3386         margin: 0 2px;
3387 }
3388
3389 #content figure {
3390         text-align: center;
3391         margin: 1.5em auto;
3392 }
3393
3394 p.imgonly,
3395 div.imgonly,
3396 figure {
3397         text-align: center;
3398         margin: auto;
3399         clear: both;
3400 }
3401
3402 .imgonly iframe {
3403         display: block;
3404         width: 100%;
3405         height: 250px;
3406         border: 0;
3407 }
3408
3409 // Aspect ratio trick from https://css-tricks.com/aspect-ratio-boxes/
3410
3411 [style*="--aspect-ratio"] > * {
3412         width: 100%;
3413 }
3414 [style*="--aspect-ratio"] > img {
3415         height: auto;
3416 }
3417 @supports (--custom:property) {
3418         [style*="--aspect-ratio"] {
3419                 position: relative;
3420         }
3421         [style*="--aspect-ratio"]::before {
3422                 content: "";
3423                 display: block;
3424                 padding-bottom: calc(100% / (var(--aspect-ratio)));
3425         }
3426         [style*="--aspect-ratio"] > * {
3427                 position: absolute;
3428                 top: 0;
3429                 left: 0;
3430                 height: 100%;
3431         }
3432 }
3433
3434 /**********/
3435 /* TABLES */
3436 /**********/
3437
3438 .body-text table {
3439         border-collapse: collapse;
3440         font-size: 0.875em;
3441 }
3442 .body-text table th,
3443 .body-text table td {
3444         text-align: left;
3445         padding: 4px 6px;
3446         line-height: 1.3;
3447 }
3448 .body-text table .numeric {
3449         text-align: right;
3450         font-family: Inconsolata, Menlo, monospace;
3451 }
3452 .body-text table caption {
3453         margin: 0 0 0.25em 0;
3454         font-weight: bold;
3455         font-size: 1.125em;
3456 }
3457
3458 /********/
3459 /* MISC */
3460 /********/
3461
3462 /*= Superscripts & subscripts =*/
3463
3464 /*      Make sure superscripts and subscripts do not affect line spacing. */
3465 sup, sub {
3466         vertical-align: baseline;
3467         position: relative;
3468         top: -0.5em;
3469         left: 0.05em;
3470         font-size: 0.8em;
3471 }
3472 sub {
3473         top: 0.3em;
3474 }
3475
3476 /*= Code blocks & other "unstyled" text. =*/
3477
3478 pre,
3479 code {
3480         font-family: Inconsolata, Menlo, monospace;
3481 }
3482 pre {
3483         white-space: pre-wrap;
3484 }
3485 .body-text pre {
3486         text-align: left;
3487 }
3488 code {
3489         font-size: 0.95em;
3490         display: inline-block;
3491         padding: 0 4px 1px 5px;
3492 }
3493 pre > code {
3494         display: block;
3495         border-radius: 0;
3496         padding: 3px 4px 5px 8px;
3497         tab-size: 4;
3498 }
3499
3500 /*= Fractions =*/
3501
3502 .frac::after {
3503         content: "\200B";
3504 }
3505
3506 /*= Removing browser default styling of various elements =*/
3507
3508 /*      On various input elements such as text fields and buttons, remove "blue glow" focus outlines on Macs, dotted black outlines in Firefox, etc. */
3509 :focus {
3510         outline: none;
3511 }
3512
3513 /*      Remove "embossed" appearance of horizontal rules. */
3514 hr {
3515         border: none;
3516 }
3517
3518 input,
3519 button,
3520 textarea {
3521         -webkit-appearance: none;
3522         -moz-appearance: none;
3523         appearance: none;
3524 }
3525
3526 input {
3527         font-family: inherit;
3528         font-size: inherit;
3529         font-weight: inherit;
3530 }
3531
3532 /*************/
3533 /* FOOTNOTES */
3534 /*************/
3535
3536 ol {
3537         counter-reset: ordered-list;
3538 }
3539 .footnote-definition {
3540         font-size: 0.9em;
3541         list-style-type: none;
3542         counter-increment: ordered-list;
3543         position: relative;
3544 }
3545 .footnote-definition p {
3546         font-size: inherit !important;
3547 }
3548 .footnote-definition::before {
3549         content: counter(ordered-list) ".";
3550         position: absolute;
3551         left: -2.5em;
3552         font-weight: bold;
3553         text-align: right;
3554         width: 2em;
3555 }
3556
3557 /*= LW Docs footnotes =*/
3558
3559 .footnote-item {
3560         display: flex;
3561 }
3562
3563 .footnote-item > :not(.nothing) {
3564         margin: 0 0.2em;
3565 }
3566
3567 .footnote-item > :first-child {
3568         margin-left: -0.2em;
3569         margin-right: 0;
3570 }
3571
3572 .footnote-back-link a:not(.nothing) {
3573         font-size: 0;
3574         text-decoration: none;
3575         border: none;
3576 }
3577
3578 .footnote-back-link a:not(.nothing):hover {
3579         text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #00e;
3580         border: none;
3581         text-decoration: none;
3582 }
3583
3584 .footnote-back-link a::after {
3585         content: '\F106';
3586         font-family: Font Awesome;
3587         font-size: 1rem;
3588         padding: 0.2em;
3589         text-decoration: none;
3590         font-weight: bold;
3591 }
3592
3593 .footnote-content > :first-child {
3594         margin-top: 0;
3595 }
3596
3597 /*********/
3598 /* LISTS */
3599 /*********/
3600
3601 li {
3602         margin-bottom: 0.5em;
3603 }
3604
3605 .body-text ol p,
3606 .body-text ul p {
3607         margin: 0.5em 0;
3608 }
3609
3610 .body-text ol {
3611         list-style: none;
3612         padding: 0;
3613         counter-reset: ol;
3614 }
3615 .body-text ol > li {
3616         position: relative;
3617         counter-increment: ol;
3618         padding: 0 0 0 2.5em;
3619         margin: 0.25em 0 0 0;
3620 }
3621 .body-text ol > li::before {
3622         content: counter(ol) ".";
3623         position: absolute;
3624         width: 2em;
3625         text-align: right;
3626         left: 0;
3627 }
3628 .body-text ul {
3629         list-style: none;
3630         padding: 0;
3631 }
3632 .body-text ul:not(.contents-list) > li:empty {
3633         padding-bottom: 1.25em;
3634 }
3635 .body-text ul:not(.contents-list) > li {
3636         position: relative;
3637         padding: 0 0 0 1.75em;
3638         margin: 0.25em 0 0 0;
3639 }
3640 .body-text ul:not(.contents-list) > li ul > li {
3641         padding: 0 0 0 2em;
3642 }
3643 .body-text ul:not(.contents-list) > li::before {
3644         content: "•";
3645         position: absolute;
3646         width: 1.25em;
3647         text-align: right;
3648         left: 0;
3649 }
3650 .body-text ul:not(.contents-list) > li ul > li::before {
3651         width: 1.5em;
3652 }
3653 .body-text li > ul:first-child > li {
3654         padding-left: 0;
3655 }
3656 .body-text li > ul:first-child > li::before {
3657         content: none;
3658 }
3659
3660 /**************/
3661 /* ERROR PAGE */
3662 /**************/
3663
3664 .error-retry-form {
3665         margin: 0.5em 0;
3666 }
3667
3668 .error-retry-form input[type="submit"] {
3669         border: 1px solid #aaa;
3670         font-weight: bold;
3671         font-size: 1.125rem;
3672         padding: 0.5em 1.25em;
3673 }
3674
3675 /**************/
3676 /* ABOUT PAGE */
3677 /**************/
3678
3679 #content.about-page .contents {
3680         margin-top: 0.25em;
3681 }
3682 #content.about-page .accesskey-table {
3683         border-collapse: collapse;
3684         margin: auto;
3685 }
3686 #content.about-page .accesskey-table th,
3687 #content.about-page .accesskey-table td {
3688         padding: 2px 6px;
3689 }
3690 #content.about-page .accesskey-table td:first-child {
3691         padding-right: 1.5em;
3692 }
3693 #content.about-page .accesskey-table td:last-child {
3694         text-align: center;
3695         font-family: Inconsolata, Menlo, monospace;
3696 }
3697 #content.about-page h3:nth-of-type(n+2) {
3698         clear: both;
3699 }
3700
3701 /******************/
3702 /* IMAGES OVERLAY */
3703 /******************/
3704
3705 #images-overlay + #content .post-body img {
3706         visibility: hidden;
3707 }
3708
3709 #images-overlay div {
3710         position: absolute;
3711 }
3712 #images-overlay div::after {
3713         content: "Click to enlarge";
3714         display: block;
3715         position: absolute;
3716         margin: auto;
3717         left: 0;
3718         right: 0;
3719         bottom: 10px;
3720         padding: 6px 10px;
3721         font-size: 1.25rem;
3722         background-color: rgba(0,0,0,0.6);
3723         color: #fff;
3724         border-radius: 5px;
3725         opacity: 0.0;
3726         transition: opacity 0.15s ease;
3727         pointer-events: none;
3728 }
3729 @supports (width: -moz-fit-content) {
3730         #images-overlay div::after {
3731                 width: -moz-fit-content;
3732         }
3733 }
3734 @supports (width: fit-content) {
3735         #images-overlay div::after {
3736                 width: fit-content;
3737         }
3738 }
3739 #images-overlay div:hover::after {
3740         opacity: 1.0;
3741 }
3742
3743 #images-overlay img {
3744         width: 100%;
3745 }
3746
3747 /***************/
3748 /* IMAGE FOCUS */
3749 /***************/
3750
3751 /*=--------------=*/
3752 /*= Hover styles =*/
3753 /*=--------------=*/
3754
3755 #content img:hover,
3756 #images-overlay img:hover {
3757         filter: drop-shadow(0 0 3px #777);
3758         cursor: zoom-in;
3759 }
3760 #content img:active,
3761 #images-overlay img:active {
3762         transform: scale(0.975);
3763 }
3764
3765 /*=---------=*/
3766 /*= Overlay =*/
3767 /*=---------=*/
3768
3769 #image-focus-overlay {
3770         position: fixed;
3771         top: 0;
3772         right: 0;
3773         bottom: 0;
3774         left: 0;
3775         z-index: 2;
3776         display: none;
3777         cursor: zoom-out;
3778 }
3779 #image-focus-overlay::before {
3780         content: "";
3781         display: block;
3782         position: absolute;
3783         top: 0;
3784         right: 0;
3785         bottom: 0;
3786         left: 0;
3787         background-color: #000;
3788         opacity: 0.5;
3789         z-index: -1;
3790 }
3791 #image-focus-overlay.engaged {
3792         display: initial;
3793 }
3794
3795 #image-focus-overlay img {
3796         margin: auto;
3797         position: absolute;
3798         left: 50%;
3799         top: 50%;
3800         transform: translateX(-50%) translateY(-50%);
3801 }
3802
3803 /*=-------------------=*/
3804 /*= Single-image mode =*/
3805 /*=-------------------=*/
3806
3807 #image-focus-overlay:not(.slideshow) .image-number,
3808 #image-focus-overlay:not(.slideshow) .slideshow-buttons {
3809         visibility: hidden;
3810 }
3811
3812 /*=---------=*/
3813 /*= Caption =*/
3814 /*=---------=*/
3815
3816 #image-focus-overlay .caption {
3817         position: absolute;
3818         bottom: 0.75em;
3819         background-color: rgba(0,0,0,0.7);
3820         left: 9em;
3821         right: 9em;
3822         margin: auto;
3823         max-width: calc(100% - 18em);
3824         text-align: center;
3825         font-size: 1.375em;
3826         border-radius: 8px;
3827         z-index: 1;
3828         transition:
3829                 bottom 0.2s ease;
3830 }
3831 @supports (width: -moz-fit-content) {
3832         #image-focus-overlay .caption {
3833                 width: -moz-fit-content;
3834         }
3835 }
3836 @supports (width: fit-content) {
3837         #image-focus-overlay .caption {
3838                 width: fit-content;
3839         }
3840 }
3841 #image-focus-overlay .caption.hidden {
3842         bottom: -5em;
3843         transition:
3844                 bottom 0.5s ease;
3845 }
3846
3847 #image-focus-overlay .caption p {
3848         margin: 1em 1.25em;
3849         color: #fff;
3850 }
3851
3852 #image-focus-overlay .caption:not(:empty)::before {
3853         content: "";
3854         display: block;
3855         position: absolute;
3856         width: 100vw;
3857         height: calc(100% + 1.5em);
3858         z-index: -1;
3859         top: -0.75em;
3860         left: calc(-50vw + 50%);
3861
3862 }
3863
3864 /*=--------------=*/
3865 /*= Help overlay =*/
3866 /*=--------------=*/
3867
3868 #image-focus-overlay .help-overlay {
3869         position: absolute;
3870         display: flex;
3871         flex-flow: column;
3872         z-index: 2;
3873         font-size: 1.5rem;
3874         padding: 1em;
3875         border-radius: 10px;
3876         bottom: 1em;
3877         right: 1em;
3878         overflow: hidden;
3879         white-space: nowrap;
3880         color: transparent;
3881         cursor: default;
3882         visibility: hidden;
3883         transition:
3884                 visibility 1s ease,
3885                 color 1s ease,
3886                 background-color 1s ease,
3887                 bottom 0.3s ease;
3888 }
3889 #image-focus-overlay .help-overlay:hover {
3890         max-width: 24em;
3891         max-height: 14em;
3892         background-color: rgba(0,0,0,0.85);
3893         color: #fff;
3894         visibility: visible;
3895         transition:
3896                 visibility 0.2s ease 0.3s,
3897                 color 0.2s ease 0.3s,
3898                 background-color 0.2s ease 0.3s;
3899 }
3900
3901 #image-focus-overlay .help-overlay::after {
3902         content: "\F128";
3903         font-family: "Font Awesome", "Font Awesome 5 Free";
3904         font-weight: 900;
3905         font-size: 2rem;
3906         position: absolute;
3907         right: 0;
3908         bottom: 0;
3909         padding: 10px;
3910         color: #000;
3911         filter: drop-shadow(0 0 6px #fff);
3912         visibility: visible;
3913         opacity: 0.85;
3914         transition:
3915                 visibility 1s ease;
3916 }
3917 #image-focus-overlay .help-overlay:hover::after {
3918         visibility: hidden;
3919         transition:
3920                 visibility 0.2s ease 0.3s;
3921 }
3922
3923 #image-focus-overlay .help-overlay p {
3924         margin: 0;
3925         text-indent: -2em;
3926         padding-left: 2em;
3927         max-width: 100%;
3928         overflow: hidden;
3929 }
3930 #image-focus-overlay .help-overlay p + p {
3931         margin: 0.75em 0 0 0;
3932 }
3933 #image-focus-overlay .help-overlay.hidden {
3934         bottom: -2em;
3935 }
3936
3937 /*=--------------=*/
3938 /*= Slide number =*/
3939 /*=--------------=*/
3940
3941 #image-focus-overlay .image-number {
3942         position: absolute;
3943         z-index: 2;
3944         font-size: 1.75rem;
3945         left: 1em;
3946         bottom: 1em;
3947         font-weight: 600;
3948         text-shadow:
3949                 0 0 3px #fff,
3950                 0 0 5px #fff,
3951                 0 0 8px #fff,
3952                 0 0 13px #fff;
3953         width: 1.5em;
3954         text-align: right;
3955         white-space: nowrap;
3956         transition: bottom 0.3s ease;
3957 }
3958 #image-focus-overlay .image-number::before {
3959         content: "#";
3960         opacity: 0.3;
3961 }
3962 #image-focus-overlay .image-number::after {
3963         content: " of " attr(data-number-of-images);
3964         opacity: 0.3;
3965 }
3966 #image-focus-overlay .image-number:hover::before,
3967 #image-focus-overlay .image-number:hover::after {
3968         opacity: 1.0;
3969 }
3970 #image-focus-overlay .image-number.hidden {
3971         bottom: -1.25em;
3972 }
3973
3974 /*=-------------------=*/
3975 /*= Slideshow buttons =*/
3976 /*=-------------------=*/
3977
3978 #image-focus-overlay .slideshow-buttons {
3979         position: absolute;
3980         top: 0;
3981         left: 0;
3982         width: 100%;
3983         height: 100%;
3984         z-index: 1;
3985         display: flex;
3986         justify-content: space-between;
3987         pointer-events: none;
3988 }
3989 #image-focus-overlay .slideshow-buttons button {
3990         font-family: "Font Awesome", "Font Awesome 5 Free";
3991         font-weight: 900;
3992         font-size: 3rem;
3993         padding: 0.5em;
3994         color: #ddd;
3995         position: relative;
3996         left: 0;
3997         transition:
3998                 left 0.3s ease;
3999         pointer-events: auto;
4000 }
4001 #image-focus-overlay .slideshow-buttons button::selection {
4002         background-color: transparent;
4003 }
4004 @media only screen and (hover: hover) {
4005         #image-focus-overlay .slideshow-buttons button:hover {
4006                 background-color: rgba(0,0,0,0.1);
4007                 color: #777;
4008         }
4009 }
4010 #image-focus-overlay .slideshow-buttons button:active {
4011         transform: none;
4012         color: #888;
4013 }
4014 #image-focus-overlay .slideshow-buttons button:disabled {
4015         text-shadow: none;
4016         background-color: transparent;
4017         color: #ddd;
4018         cursor: default;
4019         opacity: 0.4;
4020 }
4021 #image-focus-overlay .slideshow-button.previous.hidden {
4022         left: -1.75em;
4023 }
4024 #image-focus-overlay .slideshow-button.next.hidden {
4025         left: 1.75em;
4026 }
4027
4028 /*=-----------------=*/
4029 /*= Background blur =*/
4030 /*=-----------------=*/
4031
4032 .blurred {
4033         filter: blur(3px);
4034 }
4035
4036 /**************************/
4037 /* QUALIFIED HYPERLINKING */
4038 /**************************/
4039
4040 #content.no-nav-bars {
4041         margin: 8px auto;
4042 }
4043 #content.no-nav-bars + #ui-elements-container > * {
4044         padding-top: 8px;
4045 }
4046
4047 #aux-about-link {
4048         position: fixed;
4049         top: 40px;
4050         left: calc((100% - 900px) / 2 - 69px);
4051         width: 1.5em;
4052         height: 1.5em;
4053         text-align: center;
4054         display: table;
4055 }
4056 #aux-about-link a {
4057         display: table-cell;
4058         width: 100%;
4059         vertical-align: middle;
4060         font-family: "Font Awesome", "Font Awesome 5 Free";
4061         font-weight: 900;
4062         font-size: 1.25rem;
4063         opacity: 0.4;
4064         z-index: 1;
4065 }
4066
4067 .qualified-linking {
4068         margin: 0;
4069         position: relative;
4070 }
4071 .qualified-linking input[type='checkbox'] {
4072         visibility: hidden;
4073         width: 0;
4074         height: 0;
4075         margin: 0;
4076 }
4077 .qualified-linking label {
4078         font-family: "Font Awesome", "Font Awesome 5 Free";
4079         font-weight: 900;
4080         font-size: 1rem;
4081         padding: 0 0.5em;
4082         display: inline-block;
4083         margin-left: 0.25em;
4084 }
4085 .qualified-linking label:hover {
4086         cursor: pointer;
4087 }
4088 .qualified-linking label:active span {
4089         display: inline-block;
4090         transform: scale(0.9);
4091 }
4092 .qualified-linking label::selection {
4093         background-color: transparent;
4094 }
4095
4096 .qualified-linking label::after {
4097         content: "";
4098         width: 100vw;
4099         height: 0;
4100         left: 0;
4101         top: 0;
4102         position: fixed;
4103         z-index: 1;
4104         cursor: default;
4105 }
4106 .qualified-linking input[type='checkbox']:checked + label::after {
4107         height: 100vh;
4108 }
4109
4110 .qualified-linking-toolbar {
4111         position: absolute;
4112         right: 0.25em;
4113         top: 110%;
4114         z-index: 1;
4115 }
4116 .qualified-linking input[type='checkbox'] ~ .qualified-linking-toolbar {
4117         display: none;
4118 }
4119 .qualified-linking input[type='checkbox']:checked ~ .qualified-linking-toolbar {
4120         display: block;
4121 }
4122 #qualified-linking-toolbar-toggle-checkbox-bottom ~ .qualified-linking-toolbar {
4123         top: unset;
4124         bottom: 125%;
4125 }
4126
4127 .qualified-linking-toolbar a {
4128         display: block;
4129         padding: 0 6px;
4130         margin: 4px;
4131 }
4132 .qualified-linking-toolbar a::selection {
4133         background-color: transparent;
4134 }
4135
4136 /*****************/
4137 /* HOVER PREVIEW */
4138 /*****************/
4139
4140 #preview-popup-toggle {
4141         position: absolute;
4142         right: -67px;
4143         bottom: 285px;
4144         cursor: pointer;
4145         color: var(--GW-toggle-widget-color, #888);
4146 }
4147 #preview-popup-toggle:hover {
4148         color: var(--GW-toggle-widget-hover-color, #444);
4149 }
4150
4151 #content.preview:not(not) {
4152         padding: 0;
4153 }
4154 #content.preview > .comment-thread {
4155         margin: 2px;
4156 }
4157 #content.preview.individual-thread-page > .comment-thread > .comment-item {
4158         border: none;
4159 }
4160 #content.preview.user-page .page-main-heading, #content.preview.user-page .user-stats {
4161         padding: 0 8px;
4162 }
4163 #content.preview.user-page .page-main-heading {
4164         margin-left: 8px;
4165 }
4166 #content.preview.not(not) .body-text {
4167         margin-left: 8px;
4168         margin-right: 8px;
4169 }
4170 #content.preview.user-page .user-stats {
4171         margin-right: 32px;
4172 }
4173 #content.preview.user-page .page-toolbar, #content.preview.user-page nav {
4174         display: none;
4175 }
4176 #content.preview button.vote {
4177         display: none;
4178 }
4179 #content.preview > h1.listing {
4180         max-height: unset;
4181 }
4182 #content.preview.user-page > .comment-thread {
4183         margin: 0.5em 0;
4184 }
4185 #content.preview > .post {
4186         margin: 0 18px;
4187 }
4188 #content.preview .post-title {
4189         margin-top: 0.5em;
4190 }
4191 #content.preview .post-meta {
4192         line-height: 1.0;
4193 }
4194 #content.preview .body-text {
4195         font-size: 1em;
4196 }
4197 #content.preview nav.contents,
4198 #content.preview .lw2-link {
4199         display: none;
4200 }
4201
4202 .preview-popup {
4203         position: fixed;
4204         transform-origin: top;
4205         top: 10%;
4206         right: 10%;
4207         max-width: 700px;
4208         z-index: 10001;
4209         background-color: #eee;
4210         border: 1px solid #ccc;
4211         box-shadow: 2px 6px 20px -4px #000;
4212         transition: height 0.2s ease, top 0.2s ease;
4213 }
4214 .popup-hide-button {
4215         position: fixed;
4216         top: 4px;
4217         right: 4px;
4218         color: #000;
4219         background-color: #fff;
4220         width: 28px;
4221         height: 28px;
4222         display: flex;
4223         font-family: "Font Awesome";
4224         font-size: 14px;
4225         line-height: 1;
4226         border: 1px solid #bbb;
4227         border-radius: 28px;
4228         align-items: center;
4229         justify-content: center;
4230         //padding-bottom: 2px;
4231         padding-left: 1.5px;
4232         font-family: "Font Awesome", "Font Awesome 5 Free";
4233         cursor: pointer;
4234 }
4235 .popup-hide-button:hover::before {
4236         content: "Turn off preview popups";
4237         display: block;
4238         position: absolute;
4239         width: max-content;
4240         right: 32px;
4241         color #000;
4242         background-color: #fff;
4243         border: 1px solid #eee;
4244         border-radius: 2px;
4245         padding: 4px;
4246 }
4247
4248 /********/
4249 /* MATH */
4250 /********/
4251
4252 .mathjax-block-container {
4253         display: block;
4254         overflow-y: hidden;
4255         border-radius: 6px;
4256         margin: 1em 0 1.5em 0;
4257 }
4258 .mathjax-inline-container {
4259         max-width: 100%;
4260         overflow-x: auto;
4261         overflow-y: hidden;
4262         position: relative;
4263         padding: 0 1px;
4264 }
4265 #content .mathjax-inline-container,
4266 #content .mathjax-inline-container .mjpage,
4267 #content .mathjax-inline-container .mjx-chtml,
4268 #content .mathjax-inline-container .mjx-math,
4269 #content .mathjax-inline-container .mjx-mrow {
4270     display: inline;
4271     white-space: normal;
4272 }
4273 .post .mathjax-inline-container {
4274         line-height: 1;
4275 }
4276 .comment .mathjax-inline-container {
4277         line-height: 1;
4278 }
4279 .mathjax-inline-container .mjx-chtml {
4280         padding: 0;
4281 }
4282
4283 /************/
4284 /* SPOILERS */
4285 /************/
4286
4287 .spoiler {
4288     color: #000;
4289     background-color: currentColor;
4290     transition: none;
4291     text-shadow: none;
4292         margin: 1em 0;
4293     box-shadow: 0 0 0 1px currentColor inset;
4294     overflow: auto;
4295 }
4296 .spoiler:not(:last-child) {
4297     margin-bottom: 0;
4298 }
4299 #content .spoiler * {
4300         color: inherit;
4301         border: none;
4302 }
4303 .spoiler:hover {
4304     color: unset;
4305     background-color: unset;
4306     text-shadow: unset;
4307     transition:
4308         color 0.1s ease-out 0.1s,
4309         background-color 0.1s ease-out 0.1s,
4310         text-shadow 0.1s ease-out 0.1s;
4311 }
4312 .spoiler::selection,
4313 .spoiler ::selection {
4314         color: #fff;
4315         background-color: #000;
4316 }
4317 .spoiler:not(:hover)::selection,
4318 .spoiler:not(:hover) ::selection {
4319     background-color: transparent;
4320 }
4321
4322 /*= Fix for LessWrong being weird =*/
4323
4324 .spoiler > p {
4325     padding: 0 7px;
4326 }
4327 .spoiler > p:first-child {
4328         margin-top: 0.25em;
4329 }
4330 .spoiler > p:last-child {
4331         margin-bottom: 0;
4332         padding-bottom: 0.25em;
4333 }
4334 .spoiler > p:hover ~ p {
4335         background-color: currentColor;
4336 }
4337 .spoiler > p + p {
4338         margin-top: -1em;
4339 }
4340 .spoiler > p:not(:first-child) {
4341         padding-top: 0.5em;
4342 }
4343 .spoiler > p:not(:last-child) {
4344         padding-bottom: 0.5em;
4345 }
4346
4347 .spoiler:not(:hover) pre,
4348 .spoiler:not(:hover) code {
4349         background-color: inherit;
4350         box-shadow: none;
4351 }
4352 #content .spoiler pre {
4353         border-color: currentColor;
4354         border-style: solid;
4355         border-width: 0 1px;
4356         border-radius: 0;
4357 }
4358
4359 /*******************/
4360 /* PAGE LIST INDEX */
4361 /*******************/
4362
4363 .page-list-index {
4364         margin: 1em 30px;
4365         line-height: 1.2;
4366 }
4367
4368 .page-list-index > p {
4369         font-weight: bold;
4370         font-size: 1.2em;
4371 }
4372
4373 .page-list-index > ul * {
4374         margin: 0;
4375 }
4376
4377 .page-list-index ul {
4378         padding-left: 1.5em;
4379 }
4380
4381 .page-list-index li {
4382         margin-top: 0.67em;
4383 }
4384
4385 .page-list-index li > a {
4386         display: block;
4387         font-size: 1.1em;
4388         font-weight: bold;
4389         margin: 0.33em 0;
4390 }
4391
4392 .page-list-index li > a:last-child {
4393         margin-bottom: 1em;
4394 }
4395
4396 /*******************/
4397 /* ALIGNMENT FORUM */
4398 /*******************/
4399
4400 #content.alignment-forum-index-page::after {
4401         content: "Alignment Forum";
4402         font-size: 1.5rem;
4403         margin: 0.375em 0 0 -0.375em;
4404         order: -1;
4405 }
4406
4407 /**********************/
4408 /* FOR NARROW SCREENS */
4409 /**********************/
4410
4411 @media only screen and (max-width: 1440px) {
4412         #hns-date-picker {
4413                 right: -81px;
4414                 padding: 8px 10px 10px 10px;
4415                 bottom: 62px;
4416                 display: none;
4417         }
4418         #hns-date-picker::before {
4419                 content: "";
4420                 position: absolute;
4421                 display: block;
4422                 z-index: -1;
4423                 height: calc(100% + 2px);
4424                 top: -1px;
4425                 left: -1px;
4426                 width: 50%;
4427         }
4428 }
4429 @media only screen and (max-width: 1160px) {
4430         #new-comment-nav-ui {
4431                 bottom: 180px;
4432                 right: -68px;
4433         }
4434         #hns-date-picker {
4435                 bottom: 200px;
4436                 right: -36px;
4437         }
4438         #hns-date-picker::before {
4439                 width: calc(100% - 35px);
4440         }
4441         #theme-selector button::before {
4442                 right: unset;
4443                 left: 100%;
4444         }
4445         #theme-selector:hover::after {
4446                 content: "";
4447                 display: block;
4448                 position: absolute;
4449                 width: calc(6em - 7px);
4450                 height: calc(100% + 2px);
4451                 top: 0;
4452                 left: calc(100% + 1px);
4453         }
4454         #anti-kibitzer-toggle {
4455                 bottom: 330px;
4456         }
4457 }
4458 @media only screen and (max-width: 1080px) {
4459         #width-selector {
4460                 right: -30px;
4461         }
4462         #width-selector button {
4463                 display: block;
4464         }
4465         #text-size-adjustment-ui {
4466                 top: 90px;
4467                 right: -30px;
4468         }
4469         #text-size-adjustment-ui button {
4470                 display: block;
4471                 position: relative;
4472         }
4473         #text-size-adjustment-ui button.increase {
4474                 bottom: 48px;
4475         }
4476         #text-size-adjustment-ui button.decrease {
4477                 top: 50px;
4478         }
4479         #theme-selector {
4480                 top: 46px;
4481                 left: -44px;
4482         }
4483         #theme-tweaker-toggle {
4484                 left: -44px;
4485                 top: 2px;
4486         }
4487         #theme-tweaker-toggle button {
4488                 height: 2em;
4489                 width: 2em;
4490                 padding: 7px;
4491         }
4492         #quick-nav-ui {
4493                 right: -54px;
4494         }
4495         #new-comment-nav-ui {
4496                 right: -55px;
4497         }
4498         #hns-date-picker {
4499                 right: -23px;
4500         }
4501         #hns-date-picker::before {
4502                 width: calc(100% - 22px);
4503         }
4504         #anti-kibitzer-toggle {
4505                 right: -54px;
4506         }
4507 }
4508 @media only screen and (max-width: 1040px) {
4509         #quick-nav-ui {
4510                 right: -49px;
4511         }
4512         #new-comment-nav-ui {
4513                 right: -50px;
4514         }
4515         #hns-date-picker {
4516                 right: -18px;
4517         }
4518         #hns-date-picker::before {
4519                 width: calc(100% - 17px);
4520         }
4521         #anti-kibitzer-toggle {
4522                 right: -50px;
4523         }
4524 }
4525 @media only screen and (max-width: 1020px) {
4526         #quick-nav-ui {
4527                 right: -20px;
4528         }
4529         #new-comment-nav-ui {
4530                 right: -21px;
4531         }
4532         #new-comment-nav-ui .new-comments-count::before {
4533                 content: "";
4534                 position: absolute;
4535                 width: 100%;
4536                 height: calc(100% + 45px);
4537                 z-index: -1;
4538                 left: 0;
4539                 top: -22px;
4540         }
4541         #hns-date-picker {
4542                 right: 19px;
4543         }
4544         #hns-date-picker::before {
4545                 width: 100%;
4546         }
4547         #anti-kibitzer-toggle {
4548                 right: -20px;
4549         }
4550 }
4551 @media only screen and (max-width: 1000px) {
4552         #theme-selector {
4553                 left: -17px;
4554                 top: 120px;
4555                 padding: 3px 0;
4556                 max-width: 32px;
4557         }
4558         #theme-selector button {
4559                 margin: 1px 4px;
4560         }
4561         #text-size-adjustment-ui {
4562                 top: 100px;
4563                 right: -12px;
4564         }
4565         @media not screen and (hover: none) {
4566                 #quick-nav-ui,
4567                 #new-comment-nav-ui,
4568                 #new-comment-nav-ui + #hns-date-picker,
4569                 #anti-kibitzer-toggle {
4570                         opacity: 0.4;
4571                 }
4572                 #quick-nav-ui:hover,
4573                 #new-comment-nav-ui:hover,
4574                 #new-comment-nav-ui + #hns-date-picker:hover,
4575                 #new-comment-nav-ui + #hns-date-picker:focus-within,
4576                 #new-comment-nav-ui:hover + #hns-date-picker,
4577                 #anti-kibitzer-toggle:hover {
4578                         opacity: 1.0;
4579                 }
4580         }
4581         #theme-tweaker-toggle {
4582                 top: 70px;
4583                 left: -21px;
4584         }
4585 }
4586
4587 /**************/
4588 /* PRINT VIEW */
4589 /**************/
4590
4591 @media only print {
4592         .nav-bar {
4593                 visibility: hidden;
4594                 max-height: 0;
4595                 overflow: hidden;
4596         }
4597         #ui-elements-container {
4598                 display: none;
4599         }
4600         #images-overlay {
4601                 display: none;
4602         }
4603         #images-overlay + #content .post-body img {
4604                 visibility: visible;
4605         }
4606         .comment-controls {
4607                 display: none;
4608         }
4609         #comments-sort-mode-selector {
4610                 display: none;
4611         }
4612         .comment-minimize-button {
4613                 display: none;
4614         }
4615         .post-meta .qualified-linking,
4616         .post-meta .lw2-link {
4617                 display: none;
4618         }
4619         .comment-meta .permalink,
4620         .comment-meta .lw2-link,
4621         .comment-meta .comment-parent-link {
4622                 display: none;
4623         }
4624         .new-comment::before {
4625                 display: none;
4626         }
4627         #content::before {
4628                 box-shadow: none;
4629         }
4630 }
4631
4632 /*****************/
4633 /* MOBILE LAYOUT */
4634 /*****************/
4635
4636 /* Hide the mobile elements on desktop screens: */
4637
4638 @media only screen and (max-width: 1160px) {
4639         #post-nav-ui-toggle,
4640         #appearance-adjust-ui-toggle {
4641                 display: none;
4642         }
4643 }
4644
4645 @media only screen and (max-width: 1160px) {
4646
4647 /*====================*/
4648 /* MOBILE UI ELEMENTS */
4649 /*====================*/
4650
4651 #ui-elements-container {
4652         height: unset !important;
4653         position: unset;
4654 }
4655 #ui-elements-container > * {
4656         position: fixed;
4657         visibility: hidden;
4658         opacity: 1.0;
4659         z-index: 10000;
4660 }
4661
4662 #ui-elements-container > div[id$='-ui-toggle'] {
4663         visibility: visible;
4664         display: inline-block;
4665         border-radius: 50%;
4666         z-index: 10000;
4667 }
4668 #ui-elements-container > div[id$='-ui-toggle'] button,
4669 #theme-selector .theme-selector-close-button {
4670         font-family: Font Awesome;
4671         font-weight: 900;
4672         font-size: 32px;
4673         padding: 10px;
4674         opacity: 0.8;
4675         -webkit-tap-highlight-color: transparent;
4676         transition: transform 0.2s ease;
4677 }
4678 #ui-elements-container > div[id$='-ui-toggle'] button::selection,
4679 #theme-selector .theme-selector-close-button::selection {
4680         background-color: transparent;
4681 }
4682 #ui-elements-container > div[id$='-ui-toggle'] button::-moz-focus-inner,
4683 #theme-selector .theme-selector-close-button::-moz-focus-inner {
4684         border: none;
4685 }
4686 #ui-elements-container > div[id$='-ui-toggle'] button.engaged {
4687         transform: rotate(-90deg);
4688         opacity: 1.0;
4689 }
4690
4691 #appearance-adjust-ui-toggle {
4692         bottom: 10px;
4693         left: 10px;
4694 }
4695
4696 #post-nav-ui-toggle {
4697         bottom: 10px;
4698         right: 10px;
4699 }
4700
4701 #theme-selector.engaged,
4702 #quick-nav-ui.engaged,
4703 #new-comment-nav-ui.engaged,
4704 #hns-date-picker.engaged {
4705         visibility: visible;
4706 }
4707
4708 #image-focus-overlay.engaged {
4709         visibility: visible;
4710 }
4711 #image-focus-overlay .help-overlay {
4712         display: none;
4713 }
4714
4715 /*=========*/
4716 /* GENERAL */
4717 /*=========*/
4718
4719 @media only screen and (max-width: 900px) {
4720         #content,
4721         #images-overlay,
4722         #ui-elements-container {
4723                 min-width: unset;
4724                 width: unset;
4725         }
4726         #content {
4727                 padding: 0 4px;
4728         }
4729 }
4730
4731 /*================*/
4732 /* THEME SELECTOR */
4733 /*================*/
4734
4735 #theme-selector {
4736         display: flex;
4737         flex-flow: column;
4738         background-color: #fff;
4739         width: calc(100vw - 20px);
4740         max-width: 360px;
4741         padding: 0 0 3px 0;
4742         overflow: hidden;
4743         max-height: 0;
4744         transition:
4745                 top 0.2s ease,
4746                 max-height 0.2s ease,
4747                 visibility 0.2s ease;
4748         top: calc(100% + 10px);
4749         left: 0;
4750         right: 0;
4751         margin: auto;
4752 }
4753 #theme-selector.engaged {
4754         max-height: 1000px;
4755         top: 10px;
4756     z-index: 10001;
4757 }
4758 #theme-selector::before {
4759         content: "Select theme";
4760         white-space: nowrap;
4761         display: block;
4762         font-weight: 600;
4763         font-size: 2rem;
4764         margin: 0.375em 1em 0.5em 1em;
4765         text-align: center;
4766 }
4767 #theme-selector button {
4768         width: calc(100% - 0.5em);
4769         background-repeat: no-repeat;
4770         padding: 1em 0.875em;
4771         margin: 1px 4px;
4772         line-height: 1;
4773         height: unset;
4774         position: relative;
4775 }
4776 #theme-selector button::after {
4777         content: attr(data-theme-description);
4778         color: #000;
4779         white-space: nowrap;
4780         position: absolute;
4781         text-align: left;
4782         left: 2.5em;
4783         top: 1em;
4784 }
4785 @media only screen and (max-height: 675px) {
4786         #theme-selector button {
4787                 padding: 0.875em;
4788         }
4789         #theme-selector button::after {
4790                 top: 0.875em;
4791         }
4792 }
4793 #theme-selector .theme-selector-close-button {
4794         position: absolute;
4795         width: unset;
4796         background-color: transparent;
4797         top: 0;
4798         right: -3px;
4799 }
4800 #theme-selector .theme-selector-close-button,
4801 #theme-selector .theme-selector-close-button:focus,
4802 #theme-selector .theme-selector-close-button:active,
4803 #theme-selector .theme-selector-close-button:hover {
4804         box-shadow: none;
4805 }
4806
4807 /*===============*/
4808 /* THEME TWEAKER */
4809 /*===============*/
4810
4811 #theme-selector {
4812         padding: 0 0 64px 0;
4813 }
4814 #theme-selector ~ #theme-tweaker-toggle {
4815         top: 100%;
4816 }
4817 #theme-selector ~ #theme-tweaker-toggle::after {
4818         content: "Open theme tweaker";
4819         position: absolute;
4820         font-size: 0.625em;
4821         white-space: nowrap;
4822         left: -50%;
4823         top: 100%;
4824 }
4825 #theme-selector.engaged ~ #theme-tweaker-toggle {
4826         visibility: visible;
4827         top: 530px;
4828         left: 0;
4829         right: 0;
4830         margin: auto;
4831         z-index: 11111;
4832         transition:
4833                 top 0.2s ease,
4834                 visibility 0.2s ease;
4835 }
4836 @media only screen and (max-height: 675px) {
4837         #theme-selector.engaged ~ #theme-tweaker-toggle {
4838                 top: 492px;
4839         }
4840 }
4841 @supports (width: -moz-fit-content) {
4842         #theme-selector.engaged ~ #theme-tweaker-toggle {
4843                 width: -moz-fit-content;
4844         }
4845 }
4846 @supports (width: fit-content) {
4847         #theme-selector.engaged ~ #theme-tweaker-toggle {
4848                 width: fit-content;
4849         }
4850 }
4851 #theme-selector.engaged ~ #theme-tweaker-toggle button {
4852         opacity: 1.0;
4853 }
4854
4855 #theme-tweaker-ui {
4856         visibility: visible;
4857 }
4858
4859 /*======================*/
4860 /* ANTI-KIBITZER TOGGLE */
4861 /*======================*/
4862
4863 #theme-selector ~ #anti-kibitzer-toggle {
4864         top: 100%;
4865         bottom: unset;
4866         left: 0;
4867         right: 0;
4868         margin: auto;
4869         box-shadow: none;
4870         width: calc(100vw - 44px);
4871         max-width: 330px;
4872         text-align: right;
4873         pointer-events: none;
4874 }
4875 #theme-selector.engaged ~ #anti-kibitzer-toggle {
4876         visibility: visible;
4877         z-index: 11110;
4878         top: 530px;
4879         transition:
4880                 top 0.2s ease,
4881                 visibility 0.2s ease;
4882 }
4883 @media only screen and (max-height: 675px) {
4884         #theme-selector.engaged ~ #anti-kibitzer-toggle {
4885                 top: 492px;
4886         }
4887 }
4888 #theme-selector.engaged ~ #anti-kibitzer-toggle button {
4889         pointer-events: auto;
4890         display: inline-block;
4891 }
4892
4893 /*=================*/
4894 /* QUICKNAV WIDGET */
4895 /*=================*/
4896
4897 #quick-nav-ui {
4898         max-width: 0px;
4899         transition:
4900                 max-width 0.2s ease,
4901                 visibility 0.2s ease;
4902         display: flex;
4903         right: 72px;
4904         bottom: 14px;
4905 }
4906 #quick-nav-ui.engaged {
4907         max-width: 1000px;
4908 }
4909 #quick-nav-ui a {
4910         position: relative;
4911         margin: 2px;
4912 }
4913 #quick-nav-ui a + a {
4914         margin-left: 5px;
4915 }
4916 #quick-nav-ui a::after {
4917         position: absolute;
4918         top: calc(100% + 2px);
4919         font-size: 0.375rem;
4920         left: 0;
4921         right: 0;
4922         margin: auto;
4923         line-height: 1;
4924         padding: 2px;
4925         text-transform: uppercase;
4926         z-index: -1;
4927 }
4928 @supports (width: -moz-fit-content) {
4929         #quick-nav-ui a::after {
4930                 width: -moz-fit-content;
4931         }
4932 }
4933 @supports (width: fit-content) {
4934         #quick-nav-ui a::after {
4935                 width: fit-content;
4936         }
4937 }
4938 #quick-nav-ui a[href='#top']::after {
4939         content: "Top";
4940         left: -1px;
4941 }
4942 #quick-nav-ui a[href='#comments']::after {
4943         content: "Comments";
4944 }
4945 #content.post-page:not(.individual-thread-page) ~ #ui-elements-container #quick-nav-ui a[href='#comments'] {
4946         visibility: hidden;
4947         transition: visibility 0.2s ease;
4948 }
4949 #content.post-page:not(.individual-thread-page) ~ #ui-elements-container #quick-nav-ui.engaged a[href='#comments'] {
4950         visibility: visible;
4951 }
4952 #quick-nav-ui a[href='#bottom-bar']::after {
4953         content: "Bottom";
4954 }
4955
4956 /*======================*/
4957 /* NEW COMMENT QUICKNAV */
4958 /*======================*/
4959
4960 #new-comment-nav-ui {
4961         max-width: 0px;
4962         max-height: 0px;
4963         transition:
4964                 max-width 0.2s ease,
4965                 max-height 0.2s ease,
4966                 visibility 0.2s ease;
4967         display: flex;
4968         right: 78px;
4969         bottom: 70px;
4970 }
4971 #new-comment-nav-ui::before {
4972         content: "New Comments";
4973         position: absolute;
4974         bottom: 100%;
4975         font-size: 0.5625rem;
4976         left: 0;
4977         right: 0;
4978         margin: auto;
4979         padding: 2px 3px;
4980         text-transform: uppercase;
4981         z-index: -1;
4982 }
4983 @supports (width: -moz-fit-content) {
4984         #new-comment-nav-ui::before {
4985                 width: -moz-fit-content;
4986         }
4987 }
4988 @supports (width: fit-content) {
4989         #new-comment-nav-ui::before {
4990                 width: fit-content;
4991         }
4992 }
4993 #new-comment-nav-ui.engaged {
4994         max-width: 1000px;
4995         max-height: 1000px;
4996 }
4997 #new-comment-nav-ui .new-comment-sequential-nav-button {
4998         top: unset;
4999         bottom: unset;
5000         padding: 2px 7px;
5001 }
5002 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
5003         padding: 2px 7px 3px 7px;
5004 }
5005 #new-comment-nav-ui .new-comments-count {
5006         padding: 4px 0 5px 0;
5007 }
5008 #new-comment-nav-ui .new-comments-count::before {
5009         display: none;
5010 }
5011 #new-comment-nav-ui button::after {
5012         position: absolute;
5013         font-size: 0.375rem;
5014         left: 0;
5015         right: 0;
5016         margin: auto;
5017         line-height: 1;
5018         text-transform: uppercase;
5019         pointer-events: none;
5020 }
5021 #new-comment-nav-ui button.new-comment-previous::after {
5022         content: "Previous";
5023         bottom: 5px;
5024 }
5025 #new-comment-nav-ui button.new-comment-next::after {
5026         content: "Next";
5027         top: 7px;
5028 }
5029
5030 /*=================*/
5031 /* HNS DATE PICKER */
5032 /*=================*/
5033
5034 #hns-date-picker {
5035         max-height: 0px;
5036         bottom: 132px;
5037         right: 62px;
5038         transition:
5039                 max-height 0.2s ease,
5040                 visibility 0.2s ease;
5041 }
5042 #hns-date-picker.engaged {
5043         max-height: 1000px;
5044 }
5045 #hns-date-picker::before {
5046         width: calc(100% + 2px);
5047         border-width: 1px !important;
5048 }
5049
5050 /*=========*/
5051 /* NAV BAR */
5052 /*=========*/
5053
5054 #bottom-bar {
5055         margin-left: auto;
5056         margin-right: auto;
5057         width: calc(100% - 9rem + 8px);
5058         background: rgba(255,255,255,0.85);
5059         backdrop-filter: blur(1px);
5060 }
5061 #content.index-page #bottom-bar {
5062         z-index: 10001;
5063 }
5064 #bottom-bar .nav-item {
5065         box-shadow: none;
5066         position: relative;
5067 }
5068 #bottom-bar .nav-inner {
5069         font-size: 2rem;
5070         padding: 1rem 0 1.25rem 0;
5071         visibility: hidden;
5072         position: static;
5073         width: 0;
5074 }
5075 #content #bottom-bar .nav-item .nav-inner::before {
5076         margin: 0;
5077         visibility: visible;
5078         position: absolute;
5079         width: 100%;
5080         height: 100%;
5081         left: 0;
5082         top: 0;
5083         padding: 1rem 0;
5084 }
5085 #bottom-bar .nav-inner::after {
5086         display: block;
5087         visibility: visible;
5088         text-transform: uppercase;
5089         color: unset;
5090         font-size: 0.75rem;
5091         top: unset;
5092         left: 0;
5093         bottom: 1rem;
5094         width: 100%;
5095 }
5096 #bottom-bar #nav-item-first .nav-inner::after {
5097         content: "First Page";
5098 }
5099 #bottom-bar #nav-item-prev .nav-inner::after {
5100         content: "Prev. Page";
5101 }
5102 #bottom-bar #nav-item-top .nav-inner::after {
5103         content: "Top";
5104 }
5105 #bottom-bar #nav-item-next .nav-inner::after {
5106         content: "Next Page";
5107 }
5108 #bottom-bar #nav-item-last .nav-inner::after {
5109         content: "Last Page";
5110 }
5111
5112 @media only screen and (max-width: 900px) {
5113         .nav-bar-top {
5114                 font-size: 0.75rem;
5115         }
5116         .nav-bar {
5117                 width: calc(100% + 8px);
5118                 margin: 0 -4px;
5119         }
5120         .nav-bar .nav-inner::after {
5121                 display: none;
5122         }
5123
5124         #primary-bar .nav-item {
5125                 flex: 1 1 100%;
5126         }
5127         .nav-bar-top:not(#primary-bar) .nav-item:not(#nav-item-search) {
5128                 flex: 1 1 60px;
5129         }
5130         .nav-bar-top:not(#anything) .nav-inner {
5131                 text-transform: uppercase;
5132                 padding: 6px;
5133         }
5134         .nav-bar-top .nav-inner::before {
5135                 display: block;
5136                 font-family: "Font Awesome";
5137                 font-size: 2em;
5138                 font-weight: 900;
5139         }
5140
5141         #nav-item-home .nav-inner::before {
5142                 content: "\F015";
5143         }
5144         #nav-item-featured .nav-inner::before {
5145                 content: "\F005";
5146         }
5147         #nav-item-all .nav-inner::before {
5148                 content: "\F069";
5149         }
5150         #nav-item-meta .nav-inner::before {
5151                 content: "\F077";
5152         }
5153         #nav-item-tags .nav-inner::before {
5154                 content: "\F02C";
5155         }
5156         #nav-item-recent-comments > * > span {
5157                 display: none;
5158         }
5159         #nav-item-recent-comments .nav-inner::before,
5160         #nav-item-alignment-forum-comments .nav-inner::before {
5161                 content: "\F036";
5162         }
5163         #nav-item-alignment-forum .nav-inner::before {
5164                 content: "AF";
5165                 font-family: Concourse, 'Changa One';
5166         }
5167         #nav-item-questions .nav-inner::before {
5168                 content: "?";
5169                 font-family: Concourse, 'Changa One';
5170         }
5171         #nav-item-events .nav-inner::before {
5172                 content: "\F5A0";
5173         }
5174         #nav-item-shortform .nav-inner::before {
5175                 content: "\F2F2";
5176         }
5177         #nav-item-archive .nav-inner::before {
5178                 content: "\F187";
5179         }
5180         #nav-item-about .nav-inner::before {
5181                 content: "\F129";
5182         }
5183         #nav-item-search {
5184                 font-size: 2em;
5185                 padding: 10px;
5186         }
5187         #nav-item-search .nav-inner::before {
5188                 content: none;
5189         }
5190         #nav-item-search .nav-inner {
5191                 height: 100%;
5192                 display: flex;
5193         }
5194         #nav-item-search input {
5195                 width: 100%;
5196                 height: 100%;
5197         }
5198         #nav-item-search button {
5199                 height: 100%;
5200                 padding: 5px 5px 5px 10px;
5201                 width: 40px;
5202                 overflow: visible;
5203                 visibility: hidden;
5204         }
5205         #nav-item-search button::before {
5206                 content: "\F002";
5207                 font-family: Font Awesome;
5208                 font-weight: 900;
5209                 visibility: visible;
5210         }
5211         #nav-item-login {
5212                 padding: 0;
5213         }
5214         #nav-item-login .nav-inner::before {
5215                 content: "\F007";
5216         }
5217 }
5218 @media only screen and (max-width: 520px) {
5219         .nav-bar-top {
5220                 font-size: 0.5rem;
5221         }
5222
5223         #nav-item-search,
5224         #nav-item-search .nav-inner {
5225                 padding: 0;
5226         }
5227         #nav-item-search button {
5228                 width: 31px;
5229         }
5230
5231         #bottom-bar #nav-item-first .nav-inner::after {
5232                 content: "First";
5233         }
5234         #bottom-bar #nav-item-prev .nav-inner::after {
5235                 content: "Prev";
5236         }
5237         #bottom-bar #nav-item-next .nav-inner::after {
5238                 content: "Next";
5239         }
5240         #bottom-bar #nav-item-last .nav-inner::after {
5241                 content: "Last";
5242         }
5243 }
5244
5245 /*=================*/
5246 /* INBOX INDICATOR */
5247 /*=================*/
5248
5249 @media only screen and (max-width: 900px) {
5250         #inbox-indicator {
5251                 width: 100%;
5252                 top: 0;
5253                 pointer-events: none;
5254         }
5255         #inbox-indicator::before {
5256                 width: 100%;
5257                 font-size: 1rem;
5258                 text-align: right;
5259                 padding: 1px 6px;
5260         }
5261         #inbox-indicator.new-messages {
5262                 pointer-events: auto;
5263         }
5264         #inbox-indicator.new-messages::before {
5265                 box-shadow: 0 0 8px 1px #f00 inset;
5266         }
5267 }
5268 @media only screen and (max-width: 520px) {
5269         #inbox-indicator::before {
5270                 font-size: 0.75rem;
5271                 padding: 2px 5px;
5272         }
5273 }
5274 @media only screen and (max-width: 374px) {
5275         #inbox-indicator::before {
5276                 font-size: 0.625rem;
5277         }
5278 }
5279
5280 /*===================*/
5281 /* TOP PAGINATION UI */
5282 /*===================*/
5283
5284 #top-nav-bar {
5285         font-size: 1.75rem;
5286 }
5287
5288 /*==============*/
5289 /* PAGE TOOLBAR */
5290 /*==============*/
5291
5292 @media only screen and (max-width: 900px) {
5293         #content > .page-toolbar {
5294                 font-size: 1rem;
5295                 margin-right: 0;
5296         }
5297         #content.user-page > .page-toolbar {
5298                 grid-column: 2 / span 2;
5299                 margin: 0 0 6px 0;
5300         }
5301 }
5302 @media only screen and (max-width: 520px) {
5303         #content:not(.user-page) .page-toolbar {
5304                 display: flex;
5305                 flex-direction: column-reverse;
5306                 text-align: right;
5307                 align-self: start;
5308                 padding: 4px 0 0 0;
5309         }
5310         #content.user-page .page-toolbar {
5311                 display: flex;
5312                 flex-flow: row;
5313                 justify-content: flex-end;
5314                 padding: 2px 0 0 0;
5315         }
5316         #content.user-page .page-toolbar > form,
5317         #content.user-page .page-toolbar > .button {
5318                 text-align: center;
5319                 flex-basis: 25%;
5320                 margin-left: 1.5em;
5321         }
5322         #content.user-page .page-toolbar .button {
5323                 text-transform: uppercase;
5324                 font-size: 0.625rem;
5325         }
5326         #content.user-page .page-toolbar .button::before {
5327                 font-size: 1.375rem;
5328                 display: block;
5329                 padding: 0;
5330         }
5331         #content.user-page .page-toolbar .rss {
5332                 white-space: nowrap;
5333                 margin: 0 0 0 1.5em;
5334         }
5335         .page-toolbar > * {
5336                 line-height: 1.15;
5337                 padding: 6px 0;
5338                 margin: 0;
5339         }
5340 }
5341
5342 /*==============*/
5343 /* SUBLEVEL NAV */
5344 /*==============*/
5345
5346 @media only screen and (max-width: 900px) {
5347         .sublevel-nav:not(.sort) {
5348                 flex-wrap: wrap;
5349                 width: calc(100vw - 200px);
5350         }
5351         .sublevel-nav:not(.sort) .sublevel-item {
5352                 margin: 1px;
5353                 flex-basis: 7em;
5354         }
5355 }
5356 @media only screen and (max-width: 520px) {
5357         .sublevel-nav:not(.sort) .sublevel-item {
5358                 font-size: 1rem;
5359         }
5360 }
5361
5362 /*=====================*/
5363 /* SORT ORDER SELECTOR */
5364 /*=====================*/
5365
5366 @media only screen and (max-width: 720px) {
5367         #content.index-page > .sublevel-nav.sort {
5368                 flex-flow: column;
5369                 margin-left: 4px;
5370         }
5371 }
5372
5373 /*==========*/
5374 /* ARCHIVES */
5375 /*==========*/
5376
5377 @media only screen and (max-width: 900px) {
5378         div[class^='archive-nav-'] {
5379                 flex-wrap: wrap;
5380                 justify-content: flex-start;
5381         }
5382         .archive-nav *[class^='archive-nav-item'],
5383         .archive-nav *[class^='archive-nav-item']:first-child {
5384                 padding: 10px;
5385                 margin: 2px;
5386                 max-width: unset;
5387                 flex: 0 1 calc((100% / 8) - 4px);
5388         }
5389         .archive-nav .archive-nav-item-day,
5390         .archive-nav .archive-nav-item-day:first-child {
5391                 flex-basis: calc((100% / 16) - 4px);
5392         }
5393         .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-'] {
5394                 margin-top: 8px;
5395                 position: relative;
5396         }
5397         .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
5398                 content: "";
5399                 display: block;
5400                 position: absolute;
5401                 height: 1px;
5402                 width: calc(100% + 8px);
5403                 left: -4px;
5404                 top: -4px;
5405         }
5406 }
5407 @media only screen and (max-width: 720px) {
5408         .archive-nav .archive-nav-item-day,
5409         .archive-nav .archive-nav-item-day:first-child {
5410                 flex-basis: calc((100% / 12) - 4px);
5411         }
5412 }
5413 @media only screen and (max-width: 520px) {
5414         .archive-nav *[class^='archive-nav-item'],
5415         .archive-nav *[class^='archive-nav-item']:first-child {
5416                 flex-basis: calc((100% / 5) - 4px);
5417         }
5418         .archive-nav .archive-nav-item-day,
5419         .archive-nav .archive-nav-item-day:first-child {
5420                 flex-basis: calc((100% / 8) - 4px);
5421         }
5422 }
5423
5424 /*==========*/
5425 /* LISTINGS */
5426 /*==========*/
5427
5428 h1.listing {
5429         max-height: unset;
5430 }
5431
5432 /*============*/
5433 /* USER PAGES */
5434 /*============*/
5435
5436 #content.user-page h1.page-main-heading {
5437         align-self: end;
5438 }
5439 @media only screen and (max-width: 520px) {
5440         #content.user-page h1.page-main-heading {
5441                 overflow: hidden;
5442                 text-overflow: ellipsis;
5443         }
5444         #content.user-page .user-stats .karma-type {
5445                 display: block;
5446         }
5447 }
5448
5449 /*============*/
5450 /* LOGIN PAGE */
5451 /*============*/
5452
5453 @media only screen and (max-width: 640px) {
5454         .login-container {
5455                 flex-flow: column;
5456                 margin: 0 auto 3em auto;
5457                 max-width: 400px;
5458         }
5459         .login-container #login-form,
5460         .login-container #signup-form {
5461                 padding: 0 1em 1.25em 1em;
5462                 grid-row-gap: 0;
5463         }
5464         .login-container #signup-form {
5465                 padding-top: 1em;
5466         }
5467         .login-container #login-form > *,
5468         .login-container #signup-form > * {
5469                 grid-column: 1 / span 2;
5470         }
5471         .login-container form label {
5472                 text-align: left;
5473                 padding: 0;
5474                 line-height: 1;
5475         }
5476         .login-container form input {
5477                 margin: 0.25em 0 0.75em 0;
5478                 padding: 0.5em;
5479         }
5480         .login-container form h1 {
5481                 grid-column: 1 / span 2;
5482                 margin: 0 0 0.25em 0;
5483         }
5484         .login-container form a {
5485                 margin: 0.75em 0 0 0;
5486         }
5487         .login-container .login-tip {
5488                 margin: 1.5em 1em 0 1em;
5489         }
5490 }
5491
5492 /*==================*/
5493 /* POSTS & COMMENTS */
5494 /*==================*/
5495
5496 @media only screen and (max-width: 720px) {
5497         .body-text ol > li {
5498                 padding: 0 0 0 2.25em;
5499         }
5500         .body-text ol > li::before {
5501                 width: 1.75em;
5502         }
5503         .body-text ul:not(.contents-list) > li,
5504         .body-text ul:not(.contents-list) > li ul > li {
5505                 padding: 0 0 0 0.75em;
5506         }
5507         .body-text ul:not(.contents-list) > li::before,
5508         .body-text ul:not(.contents-list) > li ul > li::before {
5509                 width: 0.125em;
5510                 margin-left: -0.06em;
5511         }
5512 }
5513
5514 /*===========*/
5515 /* POST-META */
5516 /*===========*/
5517
5518 .post-meta {
5519         line-height: 1.9;
5520 }
5521 @media only screen and (max-width: 720px) {
5522         .post-meta .lw2-link span,
5523         .post-meta .karma-value span,
5524         .post-meta .comment-count span {
5525                 display: none;
5526         }
5527         .post-meta .comment-count::before {
5528                 content: "\F086";
5529                 font-family: Font Awesome;
5530                 font-size: 0.875em;
5531                 margin: 0 0.25em 0 0;
5532                 font-weight: 400;
5533         }
5534 }
5535
5536 /*===================*/
5537 /* POSTS & BODY TEXT */
5538 /*===================*/
5539
5540 @media only screen and (max-width: 900px) {
5541         .post-body,
5542         h1.post-title,
5543         .tag-description,
5544         .sequence-text {
5545                 padding: 0 6px;
5546         }
5547 }
5548 @media only screen and (max-width: 520px) {
5549         .post-body {
5550                 font-size: 1.2rem;
5551                 line-height: 1.45;
5552         }
5553         h1.post-title {
5554                 font-size: 2em;
5555         }
5556 }
5557
5558 /*==============*/
5559 /* COMMENT-META */
5560 /*==============*/
5561
5562 a.comment-parent-link::after {
5563         display: none;
5564 }
5565 @media only screen and (max-width: 900px) {
5566         .comment-meta {
5567                 padding: 2px 40px 2px 10px;
5568         }
5569 }
5570 @media only screen and (max-width: 720px) {
5571         .comment .karma-value span {
5572                 display: none;
5573         }
5574         .comment-meta .comment-parent-link {
5575                 opacity: 1.0;
5576         }
5577 }
5578 @media only screen and (max-width: 520px) {
5579         .comment-meta {
5580                 padding: 2px 24px 2px 10px;
5581                 position: relative;
5582         }
5583         .comment-meta > * {
5584                 order: 3;
5585         }
5586         .comment-meta > :not(.author) {
5587                 line-height: 1.8;
5588         }
5589         .comment-meta .author,
5590         .comment-meta .date {
5591                 order: 1;
5592         }
5593         .comment-meta:before {
5594                 content: "";
5595                 order: 2;
5596                 flex-basis: 100%;
5597         }
5598         .comment-post-title2 {
5599                 display: block;
5600                 text-overflow: ellipsis;
5601                 overflow: hidden;
5602         }
5603         .comment-meta .lw2-link {
5604                 display: none;
5605         }
5606 }
5607
5608 /*=======================*/
5609 /* COMMENTS COMPACT VIEW */
5610 /*=======================*/
5611
5612 /*===========================*/
5613 /* COMMENT THREAD NAVIGATION */
5614 /*===========================*/
5615
5616 @media only screen and (max-width: 900px) {
5617         a.comment-parent-link {
5618                 width: 0;
5619                 visibility: hidden;
5620                 position: relative;
5621         }
5622         a.comment-parent-link::before {
5623                 padding: 0;
5624                 font-size: 1em;
5625                 left: 0;
5626                 top: 0;
5627                 line-height: inherit;
5628                 visibility: visible;
5629                 content: "\F3BF";
5630                 transform: scaleX(-1);
5631                 width: 2em;
5632                 text-align: center;
5633         }
5634 }
5635 @media only screen and (max-width: 520px) {
5636         a.comment-parent-link {
5637                 position: static;
5638         }
5639         a.comment-parent-link::before {
5640                 padding: 6px;
5641                 left: unset;
5642                 right: 0;
5643                 top: unset;
5644                 bottom: 0;
5645                 height: 2em;
5646         }
5647 }
5648
5649 /*=================================*/
5650 /* COMMENT THREAD MINIMIZE BUTTONS */
5651 /*=================================*/
5652
5653 @media only screen and (max-width: 520px) {
5654         .comment-minimize-button{
5655                 right: 2px;
5656         }
5657 }
5658
5659 /*===========================*/
5660 /* COMMENTING AND POSTING UI */
5661 /*===========================*/
5662
5663 @media only screen and (max-width: 900px) {
5664         .comment-controls .delete-button, .comment-controls .retract-button, .comment-controls .unretract-button, .comment-controls .edit-button {
5665                 font-size: 0;
5666         }
5667         .comment-controls .delete-button::before, .comment-controls .retract-button::before, .comment-controls .unretract-button::before, .comment-controls .edit-button::before {
5668                 font-size: 0.9rem;
5669         }
5670         .comment-controls .cancel-comment-button {
5671                 max-width: 1.3em;
5672                 overflow: hidden;
5673                 margin-right: 0.125em;
5674         }
5675         .comment-controls .edit-button::before {
5676                 font-size: 0.9375rem;
5677         }
5678         .comments > .comment-controls .cancel-comment-button {
5679                 right: 8px;
5680         }
5681         .comment-controls .cancel-comment-button::before {
5682                 font-size: 1.25rem;
5683         }
5684 }
5685 @media only screen and (max-width: 520px) {
5686         .comment-controls {
5687                 position: static;
5688         }
5689         .comment-controls:focus-within {
5690                 z-index: 10001;
5691         }
5692         .comment-controls .cancel-comment-button {
5693                 right: 10px;
5694         }
5695         .textarea-container:focus-within textarea {
5696                 position: fixed;
5697                 top: 0;
5698                 left: 2px;
5699                 width: calc(100vw - 4px);
5700                 height: calc(100% - 100px);
5701                 min-height: unset;
5702                 max-height: unset;
5703                 border-width: 1px;
5704                 z-index: 11001;
5705         }
5706         #content.conversation-page .textarea-container:focus-within textarea {
5707                 height: calc(100% - 54px);
5708         }
5709         #content.conversation-page .textarea-container:focus-within::after {
5710                 content: "";
5711                 display: block;
5712                 width: 100%;
5713                 height: 50px;
5714                 position: fixed;
5715                 left: 0;
5716                 bottom: 0;
5717                 z-index: 11000;
5718         }
5719         .textarea-container:focus-within .guiedit-buttons-container {
5720                 position: fixed;
5721                 z-index: 11002;
5722                 left: 0;
5723                 width: 100vw;
5724                 height: auto;
5725                 background-image: none;
5726                 padding: 3px 4px 4px 4px;
5727                 margin: 0;
5728                 text-align: center;
5729                 top: auto;
5730                 bottom: 0;
5731         }
5732         .textarea-container:focus-within button.guiedit {
5733                 font-size: 0.9375rem;
5734                 line-height: 1.5;
5735                 height: auto;
5736                 width: calc((100% / 10) - 2px);
5737                 padding: 10px 1px 8px 0;
5738                 position: relative;
5739                 margin: 1px;
5740         }
5741         .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
5742                 z-index: 11011;
5743                 position: fixed;
5744                 bottom: 7px;
5745                 width: calc(((100% - 16px) / 10) * 2.5 - 7px);
5746                 font-size: 1.25rem;
5747                 padding: 5px 5px 6px 5px;
5748                 display: block;
5749         }
5750         .textarea-container:focus-within button.guiedit sup {
5751                 position: absolute;
5752                 left: calc(50% + 0.65em);
5753                 top: calc(50% - 1.3em);
5754         }
5755         .textarea-container:focus-within .guiedit-mobile-help-button {
5756                 left: 8px;
5757         }
5758         .textarea-container:focus-within .guiedit-mobile-exit-button {
5759                 right: 8px;
5760         }
5761         .guiedit::after {
5762                 display: none;
5763         }
5764
5765         #markdown-hints,
5766         #edit-post-form #markdown-hints {
5767                 z-index: 11111;
5768                 position: fixed;
5769                 top: 40px;
5770                 left: 0;
5771                 right: 0;
5772                 margin: auto;
5773                 padding: 4px 0 4px 8px;
5774                 width: 310px;
5775                 border-width: 3px;
5776                 border-style: double;
5777                 pointer-events: none;
5778         }
5779         #markdown-hints::after {
5780                 content: "(Type to hide this help box.)";
5781                 color: #090;
5782                 display: block;
5783                 margin: 12px 18px 13px 10px;
5784                 padding: 5px;
5785                 font-size: 0.9em;
5786                 text-align: center;
5787         }
5788 }
5789
5790 /*================*/
5791 /* EDIT POST FORM */
5792 /*================*/
5793
5794 @media only screen and (max-width: 520px) {
5795         #edit-post-form {
5796                 padding-bottom: 0;
5797         }
5798         #edit-post-form .post-meta-fields {
5799                 grid-template-columns: 4.5em auto auto auto 1fr auto;
5800         }
5801         #edit-post-form label[for='url'],
5802         #edit-post-form label[for='section'],
5803         #edit-post-form label[for='title'] {
5804                 padding-left: 0;
5805         }
5806         #edit-post-form .post-meta-fields input[type='checkbox'] + label.iconify {
5807                 white-space: normal;
5808                 line-height: 0.9;
5809                 top: -1px;
5810                 font-family: Font Awesome;
5811                 font-weight: 900;
5812                 justify-self: start;
5813         }
5814         #edit-post-form .post-meta-fields .question-checkbox,
5815         #edit-post-form .post-meta-fields .question-checkbox + label {
5816                 grid-column: 6;
5817                 margin-left: unset;
5818         }
5819         #edit-post-form .post-meta-fields input[type='radio'] + label {
5820                 align-self: start;
5821         }
5822         #edit-post-form .textarea-container:focus-within textarea {
5823                 height: calc(100% - 101px);
5824                 min-height: unset;
5825         }
5826
5827         #markdown-hints-checkbox,
5828         #markdown-hints-checkbox + label {
5829                 display: none;
5830         }
5831
5832         #edit-post-form div:last-child {
5833                 clear: both;
5834                 overflow: auto;
5835         }
5836         #edit-post-form input[type='submit'] {
5837                 float: none;
5838                 display: block;
5839                 font-size: 1.5rem;
5840                 margin: 1rem auto 1.5rem auto;
5841                 padding: 6px 12px 8px 12px;
5842         }
5843 }
5844
5845 /*===================*/
5846 /* TABLE OF CONTENTS */
5847 /*===================*/
5848
5849 @media only screen and (max-width: 900px) {
5850         .contents {
5851                 float: none;
5852                 display: table;
5853                 max-width: none;
5854                 margin-left: auto;
5855                 margin-right: auto;
5856         }
5857 }
5858 @media only screen and (max-width: 520px) {
5859         .contents {
5860                 max-width: 100%;
5861                 margin: 1em auto 0 auto;
5862                 display: table;
5863         }
5864         .contents-head {
5865                 font-size: 1.2em;
5866         }
5867         div.post-body .contents ul {
5868                 font-size: unset;
5869         }
5870 }
5871
5872 /*========================*/
5873 /* QUALIFIED HYPERLINKING */
5874 /*========================*/
5875
5876 @media only screen and (max-width: 520px) {
5877         .qualified-linking-toolbar {
5878                 right: -5em;
5879         }
5880 }
5881
5882 } /* END MOBILE LAYOUT */
5883
5884
5885 /******************************/
5886 /* READTHESEQUENCES.COM THEME */
5887 /******************************/
5888
5889 /*===========*/
5890 /* VARIABLES */
5891 /*===========*/
5892
5893 /*      Color scheme.
5894         */
5895 :root {
5896         --GW-toggle-widget-color: #bbb;
5897         --GW-toggle-widget-hover-color: #777;
5898 }
5899
5900 /*======*/
5901 /* BASE */
5902 /*======*/
5903
5904 body {
5905         color: #000;
5906         background-color: #fffffa;
5907         font-family: 'Proxima Nova', 'GW-Symbols', sans-serif;
5908 }
5909 #content {
5910         line-height: 1.55;
5911 }
5912
5913 /*=========*/
5914 /* NAV BAR */
5915 /*=========*/
5916
5917 .nav-inner {
5918         font-size: 1.375em;
5919         font-weight: 600;
5920 }
5921 .nav-bar-top:not(#primary-bar) .nav-inner {
5922         font-size: 1em;
5923 }
5924
5925 *.nav-inner,
5926 #nav-item-search button {
5927         font-weight: 300;
5928         color: #888;
5929 }
5930
5931 #bottom-bar.decorative {
5932         border: none;
5933 }
5934 #bottom-bar.decorative::before,
5935 #bottom-bar.decorative::after {
5936         content: "GW";
5937         font-weight: 200;
5938         display: block;
5939         text-align: center;
5940         padding: 0.25em 0 1em 0;
5941 }
5942 #bottom-bar.decorative::before {
5943         width: 100%;
5944         color: transparent;
5945         background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAMdXV1QUAACwAAAAAAQABAAACAkQBADs=');
5946         background-repeat: repeat-x;
5947         background-position: center 35%;
5948         margin: 0 30px;
5949 }
5950 #bottom-bar.decorative::after {
5951         color: #d8d8d8;
5952         position: absolute;
5953         left: 0;
5954         right: 0;
5955         margin: auto;
5956         background-color: #fff;
5957         padding-right: 4px;
5958         padding-left: 4px;
5959 }
5960 @supports (width: -moz-fit-content) {
5961         #bottom-bar.decorative::after {
5962                 width: -moz-fit-content;
5963         }
5964 }
5965 @supports (width: fit-content) {
5966         #bottom-bar.decorative::after {
5967                 width: fit-content;
5968         }
5969 }
5970
5971 /* Accesskey hints */
5972
5973 .nav-inner::after {
5974         display: block;
5975         position: absolute;
5976         left: 5px;
5977         top: -2px;
5978         font-weight: 300;
5979         font-size: 0.7em;
5980         color: #d8d8d8;
5981 }
5982 .inactive-bar .nav-inner::after {
5983         color: #ccc;
5984 }
5985 .nav-inner:hover::after {
5986         color: #bbb;
5987 }
5988
5989 /* This makes the navbar items look like tabs: */
5990
5991 #bottom-bar {
5992         border-top: 1px solid #bbb;
5993         margin-top: 2em;
5994 }
5995 .post-page #bottom-bar {
5996         margin-top: 0.5em;
5997 }
5998 #content.no-nav-bars {
5999         margin: auto;
6000 }
6001 #content.no-comments #bottom-bar {
6002         margin-top: 0.125em;
6003 }
6004 .nav-bar .nav-item:not(:last-child) {
6005         border-right: 1px solid #bbb;
6006 }
6007 .nav-bar .nav-item:not(.nav-current):not(#nav-item-search):hover,
6008 #nav-item-search:focus-within {
6009         background-color: #f0f0eb;
6010 }
6011 .nav-bar a:hover,
6012 .nav-bar a:focus,
6013 .nav-bar button:hover,
6014 .nav-bar button:focus {
6015         color: #333;
6016         text-shadow: 0px 0px 0.5px #333;
6017 }
6018 #bottom-bar .nav-item a::before,
6019 #top-nav-bar a::before {
6020         font-size: 1em;
6021         bottom: -2px;
6022         color: #aaa;
6023 }
6024 #bottom-bar .nav-item a:hover::before,
6025 #top-nav-bar a:hover::before {
6026         color: #333;
6027 }
6028 #bottom-bar #nav-item-first a::before,
6029 #top-nav-bar a.nav-item-first::before {
6030         content: "\F0D9\F0D9";
6031 }
6032 #bottom-bar #nav-item-prev a::before,
6033 #top-nav-bar a.nav-item-prev::before {
6034         content: "\F0D9";
6035 }
6036 #bottom-bar #nav-item-top a::before {
6037         content: "\F0D8";
6038 }
6039 #bottom-bar #nav-item-next a::before,
6040 #top-nav-bar a.nav-item-next::before {
6041         content: "\F0DA";
6042 }
6043 #bottom-bar #nav-item-last a::before,
6044 #top-nav-bar a.nav-item-last::before {
6045         content: "\F0DA\F0DA";
6046 }
6047 #bottom-bar #nav-item-next a::before {
6048         margin-left: -1em;
6049         left: 2.85em;
6050 }
6051 .nav-bar + .nav-bar {
6052         position: relative;
6053         border-style: solid;
6054         border-color: #bbb;
6055 }
6056 .nav-bar {
6057         border-width: 1px 0 0 0;
6058 }
6059 .active-bar {
6060         border-width: 1px 0;
6061 }
6062
6063 /* Search tab */
6064
6065 #nav-item-search form::before {
6066         color: #999;
6067 }
6068 #nav-item-search button:hover {
6069         color: #333;
6070 }
6071 #nav-item-search input::placeholder {
6072         color: #d00;
6073         font-weight: normal;
6074 }
6075
6076 /* User/login tab */
6077
6078 #inbox-indicator::before {
6079         color: #ddd;
6080 }
6081
6082 /*= Top pagination UI hover tooltips =*/
6083
6084 #top-nav-bar a::after,
6085 #bottom-bar a::after {
6086         color: #222;
6087         text-shadow: none;
6088 }
6089
6090 /*==============*/
6091 /* PAGE TOOLBAR */
6092 /*==============*/
6093
6094 .page-toolbar {
6095         z-index: 1;
6096 }
6097 .page-toolbar * {
6098         color: #888;
6099         font-weight: 400;
6100 }
6101 .page-toolbar a:hover,
6102 .page-toolbar button:hover {
6103         text-shadow: 0px 0px 0.5px #333;
6104 }
6105 .logout-button {
6106         color: #d33;
6107 }
6108
6109 /*===================*/
6110 /* TOP PAGINATION UI */
6111 /*===================*/
6112
6113 #top-nav-bar {
6114         margin: 0;
6115         flex-wrap: wrap;
6116         grid-column: 2;
6117         min-width: 240px;
6118 }
6119 #top-nav-bar .page-number {
6120         font-family: 'Garamond Premier Pro', 'Georgia', 'Times New Roman', serif;
6121         padding-top: 7px;
6122 }
6123 #top-nav-bar .page-number-label {
6124         font-family: 'Proxima Nova', 'GW-Symbols', sans-serif;
6125         bottom: 70%;
6126 }
6127 #top-nav-bar::after {
6128         content: "";
6129         background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
6130         background-origin: content-box;
6131         background-repeat: no-repeat;
6132         display: block;
6133         margin: 0.125em auto 0 auto;
6134         padding: 0 12.5%;
6135         height: 1px;
6136         flex: 1 0 100%;
6137 }
6138
6139 /*==============*/
6140 /* SUBLEVEL NAV */
6141 /*==============*/
6142
6143 .sublevel-nav .sublevel-item {
6144         color: #777;
6145         background-color: #fffffa;
6146 }
6147 .sublevel-nav .sublevel-item:not(.selected):hover {
6148         background-color: #ddd;
6149         color: #000;
6150 }
6151 .sublevel-nav .sublevel-item:not(.selected):active,
6152 .sublevel-nav .sublevel-item.selected {
6153         background-color: #ddd;
6154         border-color: #ddd;
6155         color: #000;
6156         text-shadow:
6157                 0 -1px 0 #fff,
6158                 0 0.5px 0.5px #000;
6159 }
6160
6161 .sublevel-nav:not(.sort) .sublevel-item {
6162         border-style: solid;
6163         border-color: #ddd;
6164         border-width: 1px 0 1px 1px;
6165 }
6166 .sublevel-nav:not(.sort) .sublevel-item:first-child {
6167         border-radius: 8px 0 0 8px;
6168 }
6169 .sublevel-nav:not(.sort) .sublevel-item:last-child {
6170         border-width: 1px;
6171         border-radius: 0 8px 8px 0;
6172 }
6173
6174 /*=====================*/
6175 /* SORT ORDER SELECTOR */
6176 /*=====================*/
6177
6178 .sublevel-nav.sort .sublevel-item {
6179         font-feature-settings: 'smcp';
6180         padding: 7px 7px 6px 7px;
6181         text-transform: uppercase;
6182         box-shadow: 1px 1px 0 0 #bbb inset;
6183         pointer-events: auto;
6184 }
6185 .sublevel-nav.sort {
6186         padding: 20px 0 0 0;
6187         border-radius: 8px;
6188         pointer-events: none;
6189         background-color: #bbb;
6190         overflow: hidden;
6191         box-shadow:
6192                 0 0 1px #aaa,
6193                 0 0 3px #aaa,
6194                 0 0 5px #aaa;
6195 }
6196 .sublevel-nav.sort::before {
6197         text-transform: uppercase;
6198         font-weight: 600;
6199         color: #444;
6200         text-shadow: 0.5px 0.5px 0 #fff;
6201         line-height: 2;
6202         z-index: 1;
6203 }
6204 .sublevel-nav.sort::after {
6205         content: "";
6206         position: absolute;
6207         display: block;
6208         top: 0;
6209         left: 0;
6210         width: 100%;
6211         height: 100%;
6212         border-radius: 6px 6px 8px 8px;
6213         box-shadow:
6214                 0 0 0 1px #bbb inset,
6215                 0 20px 0 0 #bbb inset,
6216                 0 20px 0 1px #aaa inset,
6217                 0 0 0 3px #fffffa;
6218 }
6219
6220 /*================*/
6221 /* WIDTH SELECTOR */
6222 /*================*/
6223 /* THEME SELECTOR */
6224 /*================*/
6225
6226 #width-selector button,
6227 #theme-selector button {
6228         box-shadow:
6229                 0 0 0 4px #fffffa inset,
6230                 0 0 0 5px #bbb inset;
6231 }
6232 #width-selector button:hover,
6233 #width-selector button.selected,
6234 #theme-selector button:hover,
6235 #theme-selector button.selected {
6236         box-shadow:
6237                 0 0 0 1px #bbb inset,
6238                 0 0 0 4px #fffffa inset,
6239                 0 0 0 5px #bbb inset;
6240 }
6241
6242 #theme-selector button::before {
6243         font-size: 0.9375em;
6244         padding: 6px;
6245         font-weight: 300;
6246         color: #bbb;
6247         background-color: #fff;
6248 }
6249 #theme-selector button:hover::before,
6250 #theme-selector button.selected::before {
6251         color: #444;
6252 }
6253 #width-selector button::after {
6254         color: #aaa;
6255         font-weight: 300;
6256 }
6257
6258 /*======================*/
6259 /* THEME TWEAKER TOGGLE */
6260 /*======================*/
6261
6262 #theme-tweaker-toggle button {
6263         color: #777;
6264 }
6265
6266 /*=================*/
6267 /* QUICKNAV WIDGET */
6268 /*=================*/
6269
6270 #quick-nav-ui a {
6271         box-shadow: 0 0 0 1px #ccc inset;
6272         color: #bbb;
6273         border-radius: 4px;
6274 }
6275 #quick-nav-ui a[href='#bottom-bar'] {
6276         line-height: 1.8;
6277 }
6278 #quick-nav-ui a:active {
6279         transform: scale(0.9);
6280 }
6281 #quick-nav-ui a[href='#comments'].no-comments {
6282         opacity: 0.4;
6283         color: #bbb;
6284 }
6285 @media only screen and (hover: hover) {
6286         #quick-nav-ui a:hover {
6287                 background-color: #f0f0eb;
6288                 color: #333;
6289                 text-shadow: 0px 0px 0.5px #333;
6290         }
6291         #quick-nav-ui a:focus:not(:hover) {
6292                 transform: none;
6293                 text-shadow: none;
6294         }
6295 }
6296
6297 /*======================*/
6298 /* NEW COMMENT QUICKNAV */
6299 /*======================*/
6300
6301 #new-comment-nav-ui .new-comments-count,
6302 #new-comment-nav-ui .new-comments-count::after {
6303         color: #999;
6304         font-weight: normal;
6305 }
6306 #new-comment-nav-ui .new-comments-count {
6307         text-shadow: 0.5px 0.5px 0 #fff;
6308 }
6309 #new-comment-nav-ui .new-comment-sequential-nav-button {
6310         color: #999;
6311 }
6312 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
6313         color: #e6e6e6;
6314         text-shadow: none;
6315 }
6316 @media only screen and (hover: hover) {
6317         #new-comment-nav-ui .new-comments-count:hover {
6318                 text-shadow:
6319                         0 0 1px #fff,
6320                         0 0 3px #fff,
6321                         0 0 5px #fff,
6322                         0 0 8px #fff,
6323                         0.5px 0.5px 0 #fff;
6324         }
6325         #new-comment-nav-ui .new-comment-sequential-nav-button:focus {
6326                 color: #d00;
6327         }
6328 }
6329
6330 /*=================*/
6331 /* HNS DATE PICKER */
6332 /*=================*/
6333
6334 #hns-date-picker span {
6335         color: #777;
6336         text-shadow: 0.5px 0.5px 0 #fff;
6337         font-weight: 600;
6338 }
6339 #hns-date-picker input[type='text'] {
6340 }
6341 #hns-date-picker input {
6342         border: 1px solid #aaa;
6343         color: #666;
6344         background-color: transparent;
6345 }
6346 #hns-date-picker input:hover,
6347 #hns-date-picker input:focus {
6348         color: #444;
6349 }
6350 #hns-date-picker span {
6351         color: #888;
6352 }
6353
6354 /*======================*/
6355 /* ANTI-KIBITZER TOGGLE */
6356 /*======================*/
6357
6358 #anti-kibitzer-toggle button::before,
6359 #anti-kibitzer-toggle button::after {
6360         background-color: var(--GW-toggle-widget-color);
6361         -webkit-background-clip: text;
6362         color: transparent;
6363         text-shadow: rgba(255,255,255,0.5) 0px 1px 1px;
6364 }
6365 #anti-kibitzer-toggle button:hover::before,
6366 #anti-kibitzer-toggle button:hover::after {
6367         background-color: var(--GW-toggle-widget-hover-color);
6368 }
6369
6370 /*======================*/
6371 /* TEXT SIZE ADJUSTMENT */
6372 /*======================*/
6373
6374 #text-size-adjustment-ui button {
6375         color: #777;
6376 }
6377 #text-size-adjustment-ui button.default {
6378         font-weight: 600;
6379 }
6380 #text-size-adjustment-ui button:disabled:hover {
6381         text-shadow: none;
6382 }
6383 #text-size-adjustment-ui::after {
6384         color: #aaa;
6385         font-weight: 300;
6386 }
6387
6388 /*=============================*/
6389 /* COMMENTS VIEW MODE SELECTOR */
6390 /*=============================*/
6391
6392 #comments-view-mode-selector a {
6393         color: #777;
6394 }
6395
6396 /*==========*/
6397 /* ARCHIVES */
6398 /*==========*/
6399
6400 .archive-nav {
6401         border: 1px solid transparent;
6402 }
6403 .archive-nav *[class^='archive-nav-item'] {
6404         border-style: solid;
6405         border-color: #ddd;
6406         border-width: 1px 0 1px 1px;
6407 }
6408 .archive-nav div[class^='archive-nav-']:nth-of-type(2) *[class^='archive-nav-item'] {
6409         border-top-width: 0;
6410         border-bottom-width: 0;
6411 }
6412 .archive-nav div[class^='archive-nav-']:last-of-type *[class^='archive-nav-item'] {
6413         border-bottom-width: 1px;
6414 }
6415 .archive-nav *[class^='archive-nav-item']:last-child {
6416         border-right-width: 1px;
6417 }
6418 .archive-nav span[class^='archive-nav-item'] {
6419         font-weight: bold;
6420         background-color: #ddd;
6421 }
6422
6423 .archive-nav a:link,
6424 .archive-nav a:visited {
6425         color: #999;
6426         font-weight: 300;
6427 }
6428 .archive-nav a:hover,
6429 .archive-nav span[class^='archive-nav-item'] {
6430         font-weight: 300;
6431         background-color: #f0f0eb;
6432         color: #333;
6433         text-shadow: 0px 0px 0.5px #333;
6434 }
6435 .archive-nav a:active {
6436         transform: scale(0.9);
6437 }
6438 .archive-nav a:focus:not(:hover) {
6439         transform: none;
6440 }
6441 .archive-nav a.archive-nav-item-day:hover {
6442         background-color: #ddd;
6443 }
6444
6445 /*===============*/
6446 /* KEYBOARD HELP */
6447 /*===============*/
6448
6449 #nav-item-about button.open-keyboard-help {
6450         font-weight: 400;
6451 }
6452
6453 /*==========*/
6454 /* LISTINGS */
6455 /*==========*/
6456
6457 h1.listing {
6458         margin: 0.7em 20px 0.1em 20px;
6459         max-width: calc(100% - 40px);
6460         font-family: 'Proxima Nova', 'GW-Symbols', sans-serif, 'Font Awesome';
6461         text-align: center;
6462 }
6463
6464 h1.listing .link-post-link {
6465         font-size: 0.6875em;
6466         top: 6px;
6467         color: #888;
6468 }
6469 h1.listing .post-title-link {
6470         font-family: 'Garamond Premier Pro', 'Georgia', 'Times New Roman', serif;
6471         text-decoration: none;
6472         color: #690010;
6473         font-weight: 500;
6474         text-shadow: 0.5px 0.5px 0.5px #de7069;
6475         padding: 0 2px 1px 1px;
6476 }
6477
6478 @media only screen and (hover: hover) {
6479         h1.listing .post-title-link {
6480                 max-width: calc(100% - 60px);
6481                 padding: 2px 2px 1px 1px;
6482         }
6483         h1.listing a:hover,
6484         h1.listing a:focus {
6485                 text-shadow:
6486                         0px 0px 0.5px #ff987b,
6487                         0px 0px 1.5px #c05651,
6488                         0.5px 0.5px 0.5px #de7069;
6489                 background-color: rgba(255,255,250,0.85);
6490         }
6491         h1.listing:focus-within::before {
6492                 display: inline-block;
6493                 vertical-align: top;
6494                 position: relative;
6495                 left: -0.125em;
6496                 top: 1px;
6497                 color: #690010;
6498         }
6499         h1.listing .link-post-link:hover {
6500                 color: #690010;
6501                 text-shadow:
6502                          0.5px 0.5px 0 #fff,
6503                          -0.5px -0.5px 0 #fff,
6504                          0 0 2px #fff,
6505                          0 0 3px #00c;
6506         }
6507 }
6508
6509 h1.listing .edit-post-link {
6510         padding: 5px 3px 36px 0.5em;
6511         top: 0;
6512         right: 0;
6513 }
6514 h1.listing .edit-post-link:hover {
6515         text-decoration: none;
6516 }
6517 #content.user-page h1.listing .edit-post-link {
6518         background-color: #fff;
6519 }
6520
6521 /*======*/
6522 /* SPAM */
6523 /*======*/
6524
6525 h1.listing.spam {
6526         opacity: 0.1;
6527 }
6528 h1.listing.spam + .post-meta {
6529         opacity: 0.25;
6530 }
6531 h1.listing.spam:hover,
6532 h1.listing.spam + .post-meta:hover,
6533 h1.listing.spam:hover + .post-meta {
6534         opacity: 1.0;
6535 }
6536
6537 /*===================*/
6538 /* LISTING POST-META */
6539 /*===================*/
6540
6541 h1.listing + .post-meta {
6542         justify-content: center;
6543 }
6544 h1.listing + .post-meta > * {
6545         line-height: 1.5;
6546 }
6547 h1.listing + .post-meta .post-section {
6548         order: 1;
6549 }
6550 h1.listing + .post-meta .post-section::before {
6551         left: unset;
6552 }
6553 h1.listing + .post-meta .link-post-domain {
6554         order: 2;
6555         flex-basis: 100%;
6556 }
6557
6558 /*============*/
6559 /* USER PAGES */
6560 /*============*/
6561
6562 #content.user-page h1.page-main-heading {
6563         border-bottom: 1px solid #ccc;
6564 }
6565
6566 #content.user-page #top-nav-bar {
6567         margin: -0.5em 0 0.25em 0;
6568         grid-column: 1 / span 3;
6569 }
6570
6571 #content.user-page h1.listing {
6572         padding: 6px 6px 0 6px;
6573         max-width: 100%;
6574         margin: 1rem 0 0 0;
6575 }
6576 #content.own-user-page h1.listing,
6577 h1.listing.own-post-listing {
6578         padding-right: 36px;
6579 }
6580 @media only screen and (hover: hover) {
6581         #content.user-page h1.listing:focus-within::before {
6582                 top: -2px;
6583         }
6584 }
6585 #content.user-page h1.listing::after {
6586         content: "";
6587         display: block;
6588         position: absolute;
6589         top: 0;
6590         left: 0;
6591         width: 100%;
6592         height: calc(100% + 1.25em);
6593         box-shadow: 0px 0px 10px #555;
6594 }
6595 #content.user-page h1.listing.link-post-listing::after {
6596         height: calc(100% + 2.125em);
6597 }
6598 #content.user-page h1.listing + .post-meta {
6599         margin: 6px 6px 1.5rem 35px;
6600 }
6601 #content.user-page h1.listing + .post-meta::after {
6602         display: none;
6603 }
6604
6605 #content.conversations-user-page h1.listing {
6606         padding: 8px 6px;
6607         font-size: 1.75rem;
6608 }
6609 #content.conversations-user-page h1.listing + .post-meta {
6610         padding: 6px 4px;
6611         margin: 0;
6612 }
6613
6614 .user-stats .karma-total {
6615         font-weight: bold;
6616 }
6617
6618 /*===============*/
6619 /* CONVERSATIONS */
6620 /*===============*/
6621
6622 #content.conversation-page h1.page-main-heading {
6623         font-family: 'Garamond Premier Pro', 'Georgia', 'Times New Roman', serif;
6624 }
6625
6626 /*============*/
6627 /* LOGIN PAGE */
6628 /*============*/
6629
6630 .login-container form input[type='submit'] {
6631         font-weight: bold;
6632         background-color: #eee;
6633         border: 1px solid #ccc;
6634 }
6635 .login-container form input[type='submit']:hover,
6636 .login-container form input[type='submit']:focus {
6637         background-color: #ddd;
6638         border: 1px solid #aaa;
6639 }
6640
6641 /* “Create account” form */
6642
6643 #signup-form {
6644         background-color: #f3f3f3;
6645         border: 1px solid #ddd;
6646 }
6647 #signup-form input[type='submit'] {
6648         background-color: #e4e4e4;
6649         border: 1px solid #ccc;
6650 }
6651 #signup-form input[type='submit']:hover {
6652         background-color: #d8d8d8;
6653         border: 1px solid #aaa;
6654 }
6655
6656 /* Log in tip */
6657
6658 .login-container .login-tip {
6659         border: 1px solid #eee;
6660 }
6661
6662 /* Message box */
6663
6664 .error-box {
6665         border: 1px solid red;
6666         background-color: #faa;
6667 }
6668 .success-box {
6669         border: 1px solid green;
6670         background-color: #afa;
6671 }
6672
6673 /*=====================*/
6674 /* PASSWORD RESET PAGE */
6675 /*=====================*/
6676
6677 .reset-password-container input[type='submit'] {
6678         background-color: #e4e4e4;
6679         border: 1px solid #ccc;
6680         font-weight: bold;
6681 }
6682
6683 /*===================*/
6684 /* TABLE OF CONTENTS */
6685 /*===================*/
6686
6687 .contents {
6688         font-family: 'Proxima Nova', 'GW-Symbols', sans-serif;
6689         margin-left: 1.5em;
6690         font-family: Garamond Premier Pro;
6691         min-width: unset;
6692 }
6693 .contents-head {
6694         font-weight: bold;
6695 }
6696 .contents-head::after {
6697         content: "";
6698         background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
6699         display: block;
6700         margin: 0 auto 0.5em auto;
6701         width: 75%;
6702         height: 1px;
6703 }
6704 .contents a::after {
6705         display: none;
6706 }
6707 .post-body .contents ul {
6708         margin: 0 0.5em;
6709         padding: 0 1em;
6710 }
6711 .post-body .contents a,
6712 .post-body .contents a:visited {
6713         color: #690010;
6714         font-weight: 600;
6715 }
6716 .post-body .contents a:hover {
6717         color: #690010;
6718         text-shadow:
6719                 0px 0px 0.5px #ff987b,
6720                 0px 0px 1px #c05651;
6721         border: none;
6722 }
6723 .post-body .contents li::before {
6724         color: #999;
6725         font-feature-settings: 'onum';
6726 }
6727
6728 /*==================*/
6729 /* POSTS & COMMENTS */
6730 /*==================*/
6731
6732 .body-text {
6733         font-family: 'Garamond Premier Pro', 'Georgia', 'Times New Roman', serif;
6734 }
6735 h1.post-title {
6736         font-family: 'Garamond Premier Pro', 'Georgia', 'Times New Roman', serif;
6737         font-weight: 600;
6738 }
6739 .body-text {
6740         font-family: 'Garamond Premier Pro', 'Georgia', 'Times New Roman', serif;
6741         font-weight: 500;
6742         line-height: 1.45;
6743 }
6744
6745 .body-text a,
6746 .body-text a:visited {
6747         text-decoration: none;
6748         color: inherit;
6749 }
6750 .body-text a:link::after,
6751 .body-text a:visited::after {
6752         position: relative;
6753         content: "°";
6754         margin-left: 2px;
6755         margin-right: 1px;
6756         color: #933;
6757 }
6758 .body-text a:hover {
6759         color: #999;
6760         border-bottom: 1px dotted #999;
6761 }
6762
6763 /*===========*/
6764 /* POST-META */
6765 /*===========*/
6766
6767 .post-meta,
6768 h1.listing + .post-meta {
6769         text-align: center;
6770         font-weight: 400;
6771 }
6772 .post-meta .post-section::before,
6773 .comment-meta .alignment-forum {
6774         color: #fff;
6775         top: -1px;
6776         text-shadow:
6777                 1px 1px 0 #999,
6778                 0 1px 0 #999,
6779                 0 0 5px #999;
6780         margin: 0 0 0 0.5em;
6781 }
6782 .comment-meta .alignment-forum {
6783         margin: 0 1em 0 0;
6784 }
6785 a.post-section:hover {
6786         text-decoration: none;
6787 }
6788 .post-meta .post-section.alignment-forum::before {
6789         text-shadow:
6790                 1px 1px 0   #b9bbff,
6791                 0   1px 0   #b9bbff,
6792                 0   0   5px #b9bbff;
6793 }
6794 a.post-section.alignment-forum:hover::before {
6795         color: #e7e8ff;
6796 }
6797 .post-meta > *,
6798 .comment-meta a {
6799         color: #999;
6800 }
6801 .post-meta a:hover,
6802 .comment-meta a:hover {
6803         color: #333;
6804         text-shadow: 0px 0px 0.5px #333;=
6805 }
6806 .bottom-post-meta {
6807         border-color: #ddd;
6808 }
6809
6810 /*============*/
6811 /* LINK POSTS */
6812 /*============*/
6813
6814 .post.link-post a.link-post-link {
6815         text-decoration: none;
6816         font-family: 'Proxima Nova', 'GW-Symbols', sans-serif;
6817         font-weight: 600;
6818         color: #77121a;
6819 }
6820 .post.link-post a.link-post-link:hover {
6821         color: #942f2f;
6822         text-shadow:
6823                 0px 0px 0.5px #ff987b,
6824                 0px 0px 1.5px #c05651,
6825                 0.5px 0.5px 0.5px #de7069;
6826 }
6827 .post.link-post a.link-post-link:hover::before {
6828         color: #4879ec;
6829         text-shadow:
6830                 0.5px 0.5px 0 #fff,
6831                 -0.5px -0.5px 0 #fff,
6832                 0 0 2px #fff,
6833                 0 0 3px #00c;
6834 }
6835 .post.link-post a.link-post-link:focus {
6836         text-shadow:
6837                 0px 0px 0.5px #ff987b,
6838                 0px 0px 1.5px #c05651,
6839                 0.5px 0.5px 0.5px #de7069;
6840 }
6841
6842 /*=======*/
6843 /* POSTS */
6844 /*=======*/
6845
6846 .post-body {
6847         font-size: 1.375rem;
6848 }
6849 .post-page .post-meta::after {
6850         display: block;
6851         margin: 0.625em 0 0 0;
6852         font-size: 1.5rem;
6853         flex-basis: 100%;
6854         order: 2;
6855 }
6856 .post-page .post-meta:first-of-type::after {
6857         content: "❦";
6858 }
6859 .post-body {
6860         margin: 0;
6861 }
6862
6863 .post .bottom-post-meta {
6864         border-color: #bbb;
6865         padding-bottom: 17px;
6866 }
6867
6868 /*=================*/
6869 /* POST NAVIGATION */
6870 /*=================*/
6871
6872 .post-nav-links a,
6873 .post-nav-links a:visited {
6874         color: #888;
6875         font-weight: 200;
6876 }
6877 .post-nav-links a:hover {
6878         text-decoration: none;
6879         color: #333;
6880         text-shadow:
6881                 0px 0px 0.5px #333;
6882         background-color: #f0f0eb;
6883 }
6884
6885 .post-nav-label {
6886         opacity: 0.75;
6887         font-weight: 300;
6888 }
6889
6890 .post-nav.prev, .sequence-title {
6891         border-right: 1px solid #bbb;
6892 }
6893
6894 @media only screen and (max-width: 900px) {
6895         .post-nav.prev,
6896         .post-nav.next {
6897                 padding: 0.75em 0.5em 0.5em 0.5em;
6898         }
6899         .sequence-title {
6900                 border-top: 1px solid #bbb;
6901                 border-right: none;
6902         }
6903         .post-nav.prev {
6904                 border-right: 1px solid #bbb;
6905         }
6906         .post-nav.next {
6907                 border-left: 1px solid #bbb;
6908         }
6909 }
6910
6911 /*==========*/
6912 /* COMMENTS */
6913 /*==========*/
6914
6915 .comments::before {
6916         border-top: 1px solid #bbb;
6917 }
6918
6919 #content > .comment-thread .comment-meta a.date:focus,
6920 #content > .comment-thread .comment-meta a.permalink:focus {
6921         color: #444;
6922         font-weight: normal;
6923         outline: 2px dotted #444;
6924         position: relative;
6925         background-color: #fff;
6926         padding: 0 5px;
6927         left: -5px;
6928 }
6929 #content > .comment-thread .comment-meta a.date:focus + *,
6930 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
6931         margin-left: -10px;
6932 }
6933 .comment-item {
6934         border: 1px solid transparent;
6935 }
6936
6937 .comment-item {
6938         box-shadow:
6939                 0 0  3px #bbb,
6940                 0 0  5px #bbb,
6941                 0 0  7px #bbb,
6942                 0 0 10px #bbb;
6943 }
6944 .comment-body {
6945         font-size: 1.25rem;
6946 }
6947
6948 /*================================*/
6949 /* DEEP COMMENT THREAD COLLAPSING */
6950 /*================================*/
6951
6952 .comment-item input[id^="expand"] + label::after {
6953         color: #888;
6954         font-weight: 600;
6955 }
6956 .comment-item input[id^="expand"] + label:hover::after {
6957         color: #c00;
6958 }
6959 .comment-item input[id^="expand"] + label:active::after,
6960 .comment-item input[id^="expand"] + label:focus::after{
6961         color: #c00;
6962 }
6963 .comment-item input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
6964         border-width: 1px 0 0 0;
6965 }
6966 .comment-item input[id^="expand"] ~ .comment-thread {
6967         max-height: 39px;
6968         padding-top: 5px;
6969 }
6970
6971 /*==============*/
6972 /* COMMENT-META */
6973 /*==============*/
6974
6975 .comment-meta {
6976         font-weight: 400;
6977         padding-top: 5px;
6978         padding-bottom: 4px;
6979         border-bottom: 1px dotted #bbb;
6980 }
6981
6982 .comment-meta .author {
6983         font-size: 1.125em;
6984         color: #666;
6985         font-weight: 600;
6986 }
6987 .comment-item .author:not(.redacted).original-poster::after {
6988         opacity: 0.8;
6989 }
6990
6991 .comment-item .voting-controls.active-controls::after,
6992 .comment-item .voting-controls .karma-value::after,
6993 .post .voting-controls.active-controls::after,
6994 .post .voting-controls .karma-value::after,
6995 .author::before {
6996         background-color: #fff;
6997         color: #777;
6998         box-shadow: 0 0 0 1px #ccc inset;
6999         text-shadow: none;
7000         border-radius: 4px;
7001 }
7002 .comment-item .voting-controls.active-controls::after,
7003 .post .voting-controls.active-controls::after {
7004         padding: 6px;
7005         bottom: -46px;
7006 }
7007 .comment-item .voting-controls .karma-value::after,
7008 .post .voting-controls .karma-value::after {
7009         padding: 2px 8px;
7010         top: -26px;
7011         min-width: 64px;
7012 }
7013
7014 /*====================*/
7015 /* ANTI-KIBITZER MODE */
7016 /*====================*/
7017
7018 .author.redacted,
7019 .inline-author.redacted {
7020         opacity: 0.8;
7021         font-weight: 300;
7022 }
7023
7024 .karma-value.redacted {
7025         opacity: 0.5;
7026 }
7027
7028 .link-post-domain.redacted {
7029         opacity: 0.5;
7030 }
7031
7032 /*===========================*/
7033 /* COMMENT THREAD NAVIGATION */
7034 /*===========================*/
7035
7036 a.comment-parent-link::after {
7037         display: none;
7038 }
7039 a.comment-parent-link::before {
7040         color: #bbb;
7041 }
7042 a.comment-parent-link:hover::before {
7043         color: #999;
7044         text-shadow: none;
7045         background-image: linear-gradient(to right, transparent 0%, #bbb 100%);
7046         background-repeat: no-repeat;
7047         box-shadow: 1px 0 0 0 #bbb;
7048 }
7049
7050 .comment-child-link::before {
7051         color: #ccc;
7052 }
7053
7054 .comment-item-highlight {
7055         box-shadow:
7056                 0 0     2px #e7b200,
7057                 0 0     3px #e7b200,
7058                 0 0     5px #e7b200,
7059                 0 0     7px #e7b200,
7060                 0 0 10px #e7b200;
7061         border: 1px solid #e7b200;
7062 }
7063 .comment-item-highlight-faint {
7064         box-shadow:
7065                 0 0     2px #f8e7b5,
7066                 0 0     3px #f8e7b5,
7067                 0 0     5px #f8e7b5,
7068                 0 0     7px #f8e7b5,
7069                 0 0 10px #f8e7b5;
7070         border: 1px solid #f8e7b5;
7071 }
7072
7073 .comment-popup {
7074         background-color: #fff;
7075 }
7076
7077 /*====================*/
7078 /* COMMENT PERMALINKS */
7079 /*====================*/
7080
7081 .comment-meta .permalink,
7082 .comment-meta .lw2-link,
7083 .individual-thread-page .comment-parent-link:empty {
7084         filter: grayscale(50%);
7085 }
7086 .comment-meta .permalink:hover,
7087 .comment-meta .lw2-link:hover,
7088 .individual-thread-page .comment-parent-link:empty:hover {
7089         filter: unset;
7090 }
7091
7092 /*=======================*/
7093 /* COMMENTS COMPACT VIEW */
7094 /*=======================*/
7095
7096 #comments-list-mode-selector button {
7097         box-shadow:
7098                 0 0 0 4px #fff inset,
7099                 0 0 0 5px #bbb inset;
7100 }
7101 #comments-list-mode-selector button:hover,
7102 #comments-list-mode-selector button.selected {
7103         box-shadow:
7104                 0 0 0 5px #bbb inset;
7105 }
7106 #content.compact > .comment-thread .comment-item {
7107         max-height: 56px;
7108 }
7109 #content.compact > .comment-thread .comment-item::after {
7110         color: #888;
7111         background: linear-gradient(to right, transparent 0%, #fff 50%, #fff 100%);
7112 }
7113
7114 @media only screen and (hover: hover) {
7115         #content.compact > .comment-thread .comment-item:hover .comment,
7116         #content.compact > .comment-thread .comment-item.expanded .comment {
7117                 background-color: #fff;
7118                 outline: 3px solid #888;
7119         }
7120         #content.compact > .comment-thread .comment-item:hover .comment::before,
7121         #content.compact > .comment-thread .comment-item.expanded .comment::before {
7122                 background-color: #fff;
7123                 box-shadow:
7124                         0 0  3px #fff,
7125                         0 0  5px #fff,
7126                         0 0  7px #fff,
7127                         0 0 10px #fff,
7128                         0 0 20px #fff,
7129                         0 0 30px #fff,
7130                         0 0 40px #fff;
7131         }
7132 }
7133 @media only screen and (hover: none) {
7134         #content.compact > .comment-thread.expanded .comment-item .comment {
7135                 background-color: #fff;
7136                 outline: 3px solid #888;
7137         }
7138         #content.compact > .comment-thread.expanded .comment-item .comment::before {
7139                 background-color: #fff;
7140                 box-shadow:
7141                         0 0  3px #fff,
7142                         0 0  5px #fff,
7143                         0 0  7px #fff,
7144                         0 0 10px #fff,
7145                         0 0 20px #fff,
7146                         0 0 30px #fff,
7147                         0 0 40px #fff;
7148         }
7149 }
7150
7151 #content.user-page.compact > h1.listing {
7152         margin-top: 0.5rem;
7153 }
7154 #content.user-page.compact > h1.listing + .post-meta {
7155         margin-bottom: 1rem;
7156 }
7157
7158 /*===========================*/
7159 /* HIGHLIGHTING NEW COMMENTS */
7160 /*===========================*/
7161
7162 .new-comment::before {
7163         outline: 2px solid #5a5;
7164         box-shadow:
7165                 0 0 6px -2px #5a5 inset,
7166                 0 0 4px #5a5,
7167                 0 0 6px #5a5;
7168 }
7169
7170 /*=================================*/
7171 /* COMMENT THREAD MINIMIZE BUTTONS */
7172 /*=================================*/
7173
7174 .comment-minimize-button {
7175         color: #ccc;
7176 }
7177 .comment-minimize-button:hover {
7178         color: #aaa;
7179 }
7180 .comment-minimize-button::after {
7181         font-family: 'Proxima Nova', 'GW-Symbols', sans-serif;
7182         color: #777;
7183 }
7184 .comment-minimize-button.maximized::after {
7185         color: #ccc;
7186 }
7187
7188 /*=================================*/
7189 /* INDIVIDUAL COMMENT THREAD PAGES */
7190 /*=================================*/
7191
7192 .individual-thread-page > h1 a {
7193         color: #690010;
7194 }
7195 .individual-thread-page > h1 a:hover {
7196         text-shadow:
7197                 0px 0px 0.5px #ff987b,
7198                 0px 0px 1.5px #c05651,
7199                 0.5px 0.5px 0.5px #de7069;
7200 }
7201
7202 .individual-thread-page > h1 {
7203         font-family: 'Garamond Premier Pro', 'Georgia', 'Times New Roman', serif;
7204 }
7205
7206 /*==============*/
7207 /* VOTE BUTTONS */
7208 /*==============*/
7209
7210 .vote {
7211         position: relative;
7212 }
7213 .vote::before {
7214         position: relative;
7215         z-index: 1;
7216 }
7217 .vote::after {
7218         position: absolute;
7219 }
7220
7221 .karma .upvote::before {
7222         content: "\F077";
7223         top: 1px;
7224 }
7225 .karma .downvote::before {
7226         content: "\F078";
7227         left: -2px;
7228 }
7229 .karma .upvote::after {
7230         content: "\F325";
7231         left: 6px;
7232         bottom: 4px;
7233 }
7234 .karma .downvote::after {
7235         content: "\F322";
7236         left: 4px;
7237         top: 4px;
7238 }
7239 @-moz-document url-prefix() {
7240         .karma .upvote::after {
7241                 left: 4px;
7242                 bottom: 4px;
7243         }
7244         .karma .downvote::after {
7245                 left: 2px;
7246                 top: 5px;
7247         }
7248 }
7249
7250 .agreement .upvote::before {
7251         content: "\F00C";
7252         top: 1px;
7253 }
7254 .agreement .downvote::before {
7255         content: "\F00D";
7256         left: -2px;
7257 }
7258 .agreement .upvote::after {
7259         content: "\F560";
7260         left: 6px;
7261         bottom: 2px;
7262 }
7263 .agreement .downvote::after {
7264         content: "\E59B";
7265         left: 2px;
7266         top: 1px;
7267 }
7268 @-moz-document url-prefix() {
7269         .agreement .upvote::after {
7270                 left: 4px;
7271                 bottom: 2px;
7272         }
7273         .agreement .downvote::after {
7274                 left: 0;
7275                 top: 1px;
7276         }
7277 }
7278
7279 /**********/
7280 /*      States.
7281  */
7282
7283 /*      _ 1
7284  */
7285 .vote {
7286         color: #bbb;
7287 }
7288
7289 /*      _ 2
7290  */
7291 .upvote:hover,
7292 .upvote:not(.none) {
7293         color: var(--GW-upvote-button-color);
7294         text-shadow:
7295                 0 0 0.5px #fff,
7296                 0 0 8px #0f0;
7297 }
7298 .downvote:hover,
7299 .downvote:not(.none) {
7300         color: var(--GW-downvote-button-color);
7301         text-shadow:
7302                 0 0 0.5px #fff,
7303                 0 0 8px #f00;
7304 }
7305
7306 /*      0 _
7307  */
7308 .vote::after {
7309         visibility: hidden;
7310 }
7311
7312 /*      1,2 _
7313  */
7314 .vote.two-temp::after,
7315 .vote.two::after {
7316         visibility: visible;
7317 }
7318
7319 /*      1 _
7320  */
7321 .vote.two-temp::after {
7322         color: #bbb;
7323         text-shadow: none;
7324 }
7325
7326 /*      Disabled.
7327  */
7328 .vote:disabled {
7329         visibility: unset;
7330         color: #eee;
7331 }
7332 .vote:disabled:hover {
7333         text-shadow: none;
7334 }
7335
7336 /*===========================*/
7337 /* COMMENTING AND POSTING UI */
7338 /*===========================*/
7339
7340 .posting-controls input[type='submit'] {
7341         background-color: #fff;
7342         border: 1px solid #aaa;
7343         font-weight: bold;
7344 }
7345 .posting-controls input[type='submit']:hover,
7346 .posting-controls input[type='submit']:focus {
7347         background-color: #ddd;
7348         border: 1px solid #999;
7349 }
7350 .comment + .comment-controls .action-button {
7351         font-weight: 400;
7352 }
7353
7354 .comment-controls .cancel-comment-button {
7355         font-weight: 600;
7356         color: #c00;
7357         text-shadow:
7358                 0 0 1px #fff,
7359                 0 0 2px #fff;
7360 }
7361 .comment-controls .cancel-comment-button:hover {
7362         color: #f00;
7363 }
7364
7365 .new-comment-button {
7366         font-weight: 600;
7367 }
7368
7369 .comment-controls .delete-button,
7370 .comment-controls .retract-button {
7371         color: #d00;
7372 }
7373 .comment-controls .delete-button::before {
7374         opacity: 0.6;
7375         font-weight: 400;
7376 }
7377 .comment-controls .retract-button::before {
7378         opacity: 0.5;
7379         font-weight: 400;
7380 }
7381 .comment-controls .edit-button,
7382 .comment-controls .unretract-button {
7383         color: #0a0;
7384 }
7385 .comment-controls .edit-button::before,
7386 .comment-controls .unretract-button::before {
7387         font-weight: 400;
7388 }
7389 .comment-controls .action-button:hover {
7390         color: #f00;
7391         text-shadow:
7392                 0px 0px 0.5px #fff,
7393                 0px 0px 1.5px #800,
7394 }
7395
7396 .post-controls {
7397         margin: 0.5em -0.75em 0 0;
7398 }
7399 .edit-post-link,
7400 .edit-post-link:visited {
7401         color: #090;
7402 }
7403
7404 .posting-controls textarea {
7405         font-family: 'Garamond Premier Pro', 'Georgia', 'Times New Roman', serif;
7406         font-size: 1.25rem;
7407         font-weight: 500;
7408         color: #000;
7409         background-color: #fff;
7410         border-color: #aaa;
7411         box-shadow:
7412                 0 0 0 1px #eee inset;
7413 }
7414 .posting-controls textarea:focus {
7415         background-color: #ffd;
7416         border-color: #888;
7417         box-shadow:
7418                 0 0 0 1px #ddf inset,
7419                 0 0 0 1px #fff,
7420                 0 0 0 2px #888;
7421 }
7422 .posting-controls.edit-existing-post textarea:focus,
7423 .posting-controls form.edit-existing-comment textarea:focus {
7424         border-color: #090;
7425         box-shadow:
7426                 0 0 0 1px #81ff7f inset,
7427                 0 0 0 1px #fff,
7428                 0 0 0 2px #090;
7429 }
7430
7431 /* GUIEdit buttons */
7432
7433 .guiedit-buttons-container {
7434         background-image: linear-gradient(to bottom, #fff 0%, #ddf 50%, #ccf 75%, #aaf 100%);
7435 }
7436
7437 .posting-controls.edit-existing-post .guiedit-buttons-container button,
7438 .posting-controls form.edit-existing-comment .guiedit-buttons-container button {
7439         color: #050;
7440 }
7441 .guiedit-buttons-container button {
7442         font-family: Font Awesome, 'Garamond Premier Pro', 'Georgia', 'Times New Roman', serif;
7443 }
7444
7445 .guiedit::after {
7446         font-family: 'Proxima Nova', 'GW-Symbols', sans-serif;
7447         color: #777;
7448         text-shadow: none;
7449 }
7450
7451 /* Markdown hints */
7452
7453 #markdown-hints-checkbox + label {
7454         color: #888;
7455 }
7456 #markdown-hints-checkbox + label:hover {
7457         color: #e00;
7458 }
7459 #markdown-hints {
7460         border: 1px solid #c00;
7461         background-color: #ffa;
7462 }
7463
7464 /*================*/
7465 /* EDIT POST FORM */
7466 /*================*/
7467
7468 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
7469         border-radius: 3px;
7470         border: 1px solid #ddd;
7471         color: #777;
7472 }
7473 @media only screen and (hover:hover) {
7474         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
7475         #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
7476                 text-shadow:
7477                         0 0 1px #fff,
7478                         0 0 2px #fff,
7479                         0 0 2.5px #aaa;
7480         }
7481         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
7482         #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
7483                 border-color: #aaa;
7484         }
7485 }
7486 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
7487         content: "\F00C";
7488 }
7489 #edit-post-form input[type='radio'] + label {
7490         color: #777;
7491         border-color: #ddd;
7492 }
7493 #edit-post-form input[type='radio'][value='all'] + label {
7494         border-radius: 8px 0 0 8px;
7495         border-width: 1px;
7496 }
7497 #edit-post-form input[type='radio'][value='drafts'] + label {
7498         border-radius: 0 8px 8px 0;
7499 }
7500 #edit-post-form input[type='radio'] + label:hover,
7501 #edit-post-form input[type='radio']:focus + label {
7502         background-color: #ddd;
7503         color: #000;
7504 }
7505 #edit-post-form input[type='radio']:focus + label {
7506         color: #000;
7507         box-shadow:
7508                 0 0 0 1px #aaa;
7509 }
7510 #edit-post-form input[type='radio']:checked + label {
7511         background-color: #ddd;
7512         border-color: #ddd;
7513         color: #000;
7514         text-shadow:
7515                 0 -1px 0 #fff,
7516                 0 0.5px 0.5px #000;
7517 }
7518
7519 /*=======*/
7520 /* LINKS */
7521 /*=======*/
7522
7523 a {
7524         text-decoration: none;
7525         color: #888;
7526 }
7527 a:visited {
7528         color: #888;
7529 }
7530
7531 /*=========*/
7532 /* BUTTONS */
7533 /*=========*/
7534
7535 button,
7536 input[type='submit'] {
7537         color: #888;
7538 }
7539
7540 button:active,
7541 input[type='submit']:active {
7542         color: #f00;
7543         transform: scale(0.9);
7544 }
7545 .button:visited {
7546         color: #888;
7547 }
7548 .button:active {
7549         transform: scale(0.9);
7550 }
7551 @-moz-document url-prefix() {
7552         .button:active {
7553                 transform: none;
7554         }
7555 }
7556 @media only screen and (hover: hover) {
7557         button:hover,
7558         input[type='submit']:hover,
7559         button:focus,
7560         input[type='submit']:focus {
7561                 color: #333;
7562                 text-shadow: 0px 0px 0.5px #333;
7563         }
7564
7565         .button:hover {
7566                 color: #333;
7567                 text-shadow: 0px 0px 0.5px #333;
7568                 text-decoration: none;
7569         }
7570         .button:focus:not(:hover) {
7571                 transform: none;
7572         }
7573 }
7574
7575 /*==========*/
7576 /* HEADINGS */
7577 /*==========*/
7578
7579 .body-text h1,
7580 .body-text h2,
7581 .body-text h3,
7582 .body-text h4,
7583 .body-text h5,
7584 .body-text h6 {
7585         margin: 1.5em 0 0.25em 0;
7586 }
7587 .body-text h4 {
7588         font-size: 1.15em;
7589 }
7590 .body-text h3 {
7591         font-variant: small-caps;
7592         font-size: 1.3em;
7593 }
7594 .body-text h2 {
7595         font-style: italic;
7596         font-size: 1.5em;
7597 }
7598 .body-text h1 {
7599         font-size: 1.9em;
7600         border: none;
7601 }
7602 .post-body h1 {
7603         text-align: center;
7604         margin: 1em 0 0 0;
7605 }
7606 .post-body h2 {
7607         margin: 1em 0 0 0;
7608 }
7609 .post-body h1::before {
7610         content: "❦";
7611         display: block;
7612         margin: 0 auto 1em auto;
7613         font-size: 0.625em;
7614         font-weight: normal;
7615 }
7616 .post-body h2::before {
7617         content: "☙";
7618         text-align: center;
7619         display: block;
7620         margin: 0 auto 0.5em auto;
7621         font-weight: normal;
7622         font-style: normal;
7623 }
7624 .post-body h1:first-child::before,
7625 .post-body .contents + h1::before,
7626 .post-body h2:first-child::before,
7627 .post-body .contents + h2::before {
7628         content: "";
7629 }
7630
7631 /*========*/
7632 /* QUOTES */
7633 /*========*/
7634
7635 blockquote {
7636         border-left: 5px solid #ccc;
7637 }
7638
7639 /*========*/
7640 /* IMAGES */
7641 /*========*/
7642
7643 #content img,
7644 #content figure.image img {
7645         border: 1px solid #ccc;
7646 }
7647 #content figure img {
7648         border: 1px solid #000;
7649 }
7650 #content img[src$='.svg'],
7651 #content figure img[src$='.svg'] {
7652         border: none;
7653 }
7654 #content img[style^='float'] {
7655         border: 1px solid transparent;
7656 }
7657
7658 /*========*/
7659 /* TABLES */
7660 /*========*/
7661
7662 #content:not(.tag-index-page) .body-text table,
7663 #content:not(.tag-index-page) .body-text table th,
7664 #content:not(.tag-index-page) .body-text table td {
7665         border: 1px solid #ddd;
7666 }
7667
7668 /*======*/
7669 /* MISC */
7670 /*======*/
7671
7672 hr {
7673         height: 1px;
7674         background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
7675 }
7676
7677 code,
7678 pre {
7679         font-family: Triplicate Code, Courier, Courier New, monospace;
7680         font-size: 0.8125em;
7681 }
7682
7683 pre {
7684         border: 1px solid #ceccc3;
7685         background-color: #f6f4ea;
7686         border-radius: 4px;
7687         padding: 0 1px;
7688 }
7689
7690 input[type='text'],
7691 input[type='search'],
7692 input[type='password'] {
7693         background-color: transparent;
7694         border: 1px solid #ccc;
7695         color: #000;
7696 }
7697 input[type='text']:focus,
7698 input[type='search']:focus,
7699 input[type='password']:focus {
7700         background-color: #ffd;
7701         border: 1px solid #bbb;
7702         box-shadow: 0 0 1px #bbb;
7703 }
7704
7705 select {
7706         color: #000;
7707 }
7708
7709 /*============*/
7710 /* ABOUT PAGE */
7711 /*============*/
7712
7713 .about-page mark {
7714         background-color: #e6e6e6;
7715         text-decoration: none;
7716         box-shadow:
7717                 0 -1px 0 0 #000 inset,
7718                 0 -3px 1px -2px #000 inset;
7719         padding: 0 1px;
7720 }
7721
7722 #content.about-page .accesskey-table {
7723         font-family: 'Proxima Nova', 'GW-Symbols', sans-serif;
7724         border-color: #ddd;
7725 }
7726
7727 #content.about-page img {
7728         border: 1px solid #000;
7729 }
7730
7731 /*========================*/
7732 /* QUALIFIED HYPERLINKING */
7733 /*========================*/
7734
7735 #aux-about-link a {
7736         color: #777;
7737 }
7738 #aux-about-link a:hover {
7739         opacity: 1.0;
7740 }
7741
7742 .qualified-linking label {
7743         color: #bbb;
7744 }
7745 .qualified-linking label:hover {
7746         color: #333;
7747         text-shadow: 0px 0px 0.5px #333;
7748 }
7749
7750 .qualified-linking-toolbar {
7751         border: 1px solid #000;
7752         background-color: #fff;
7753 }
7754 .qualified-linking-toolbar a {
7755         background-color: #eee;
7756         border: 1px solid #ccc;
7757         border-radius: 4px;
7758 }
7759 .qualified-linking-toolbar a:visited {
7760         color: #888;
7761 }
7762 .qualified-linking-toolbar a:hover {
7763         text-decoration: none;
7764         background-color: #ddd;
7765 }
7766 .qualified-linking label::after {
7767         background-color: #fffffa;
7768         opacity: 0.8;
7769 }
7770
7771 /*======*/
7772 /* MATH */
7773 /*======*/
7774
7775 .mathjax-block-container::-webkit-scrollbar {
7776         height: 12px;
7777         background-color: #f6f6ff;
7778         border-radius: 6px;
7779         border: 1px solid #ddf;
7780 }
7781 .mathjax-block-container::-webkit-scrollbar-thumb {
7782         background-color: #dde;
7783         border-radius: 6px;
7784         border: 1px solid #cce;
7785 }
7786 .mathjax-inline-container::-webkit-scrollbar {
7787         height: 8px;
7788         background-color: #f6f6ff;
7789         border-radius: 4px;
7790         border: 1px solid #ddf;
7791 }
7792 .mathjax-inline-container::-webkit-scrollbar-thumb {
7793         background-color: #dde;
7794         border-radius: 4px;
7795         border: 1px solid #cce;
7796 }
7797
7798 /*=================*/
7799 /* ALIGNMENT FORUM */
7800 /*=================*/
7801
7802 #content.alignment-forum-index-page::before {
7803         background-color: #f4f5ff;
7804         border-color: #bbb;
7805         border-style: solid;
7806         border-width: 0 1px;
7807 }
7808 #content.alignment-forum-index-page::after {
7809         grid-column: 1;
7810         font-family: "Concourse SmallCaps";
7811         font-weight: 600;
7812         background-color: #7f85b2;
7813         color: transparent;
7814         -webkit-background-clip: text;
7815         text-shadow:
7816                 rgba(255,255,255,0.5) 0px 3px 3px;
7817 }
7818 @media only screen and (hover: hover) {
7819         #content.alignment-forum-index-page h1.listing a:hover,
7820         #content.alignment-forum-index-page h1.listing a:focus {
7821                 background-color: rgba(244,245,255,0.85);
7822         }
7823 }
7824
7825 /*====================*/
7826 /* FOR NARROW SCREENS */
7827 /*====================*/
7828
7829 @media only screen and (max-width: 1440px) {
7830         #hns-date-picker {
7831                 background-color: #fffffa;
7832                 opacity: 1.0;
7833         }
7834 }
7835 @media only screen and (max-width: 1160px) {
7836         #theme-selector:hover::after {
7837                 width: calc(6em - 9px);
7838                 height: calc(100% - 5px);
7839                 top: 3px;
7840                 left: 100%;
7841         }
7842         #text-size-adjustment-ui button {
7843                 background-color: #ddd;
7844         }
7845         #text-size-adjustment-ui button:hover {
7846                 background-color: #eee;
7847         }
7848         #theme-tweaker-toggle button {
7849                 background-color: #ddd;
7850         }
7851 }
7852 @media only screen and (max-width: 1080px) {
7853         #text-size-adjustment-ui button {
7854                 border: 1px solid #999;
7855                 padding: 0 0 0 1px;
7856                 border-radius: 50%;
7857                 box-shadow:
7858                         0 0 6px #999 inset,
7859                         0 0 0 1px transparent;
7860         }
7861         #theme-tweaker-toggle button {
7862                 border: 1px solid #999;
7863                 box-shadow:
7864                         0 0 10px #999 inset,
7865                         0 0 0 1px transparent;
7866                 border-radius: 50%;
7867                 transform: scale(0.8);
7868         }
7869 }
7870
7871 /*========*/
7872 /* MOBILE */
7873 /*========*/
7874
7875 /*******************************************************/
7876 @media not screen and (hover:hover) and (pointer:fine) {
7877 /*******************************************************/
7878         #ui-elements-container > div[id$='-ui-toggle'] button  {
7879                 color: #bbb;
7880                 text-shadow:
7881                         0 0 1px #fffffa,
7882                         0 0 3px #fffffa,
7883                         0 0 5px #fffffa,
7884                         0 0 10px #fffffa,
7885                         0 0 20px #fffffa,
7886                         0 0 30px #fffffa;
7887         }
7888
7889         #theme-selector {
7890                 background-color: #fffffa;
7891                 box-shadow:
7892                         0 0 0 1px #ccc,
7893                         0 0 1px 3px #fffffa,
7894                         0 0 3px 3px #fffffa,
7895                         0 0 5px 3px #fffffa,
7896                         0 0 10px 3px #fffffa,
7897                         0 0 20px 3px #fffffa;
7898                 border-radius: 8px;
7899         }
7900         #theme-selector::before {
7901                 color: #999;
7902                 font-weight: 300;
7903                 text-shadow: 0.5px 0.5px 0 #fff;
7904         }
7905         #theme-selector button {
7906                 background-color: #fffffa;
7907                 border-radius: 8px;
7908         }
7909         #theme-selector button::after {
7910                 color: #777;
7911                 max-width: calc(100% - 3.5em);
7912                 overflow: hidden;
7913                 text-overflow: ellipsis;
7914         }
7915         #theme-selector button.selected::after {
7916                 color: #222;
7917                 text-shadow:
7918                         0 -1px 0 #fff,
7919                         0 0.5px 0.5px #000;
7920         }
7921         #theme-selector .theme-selector-close-button {
7922                 color: #fffffa;
7923                 text-shadow:
7924                         1px 1px 0 #ccc,
7925                         0 0 8px #ccc;
7926                 opacity: 1.0;
7927         }
7928
7929         #quick-nav-ui {
7930                 background-color: #fffffa;
7931         }
7932         #quick-nav-ui,
7933         #new-comment-nav-ui,
7934         #hns-date-picker {
7935                 box-shadow:
7936                         0 0 1px 3px #fffffa,
7937                         0 0 3px 3px #fffffa,
7938                         0 0 5px 3px #fffffa,
7939                         0 0 10px 3px #fffffa,
7940                         0 0 20px 3px #fffffa;
7941         }
7942         #quick-nav-ui a::after,
7943         #new-comment-nav-ui::before {
7944                 font-family: 'Proxima Nova', 'GW-Symbols', sans-serif;
7945                 font-weight: bold;
7946                 box-shadow:
7947                         0 0 1px 0 #fffffa,
7948                         0 0 3px 0 #fffffa,
7949                         0 0 5px 0 #fffffa;
7950                 background-color: #fffffa;
7951                 border-radius: 4px;
7952         }
7953         #quick-nav-ui,
7954         #new-comment-nav-ui {
7955                 border-radius: 8px;
7956         }
7957         #new-comment-nav-ui {
7958                 background-color: #fffffa;
7959                 border: 1px solid #ccc;
7960         }
7961         #new-comment-nav-ui::before {
7962                 color: #777;
7963                 font-weight: 600;
7964         }
7965         #new-comment-nav-ui .new-comment-sequential-nav-button {
7966                 box-shadow: 0 0 0 1px #ccc;
7967                 color: #777;
7968         }
7969         #new-comment-nav-ui .new-comments-count {
7970                 background-color: inherit;
7971                 box-shadow: 0 -1px 0 0 #ccc;
7972         }
7973         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
7974                 border-radius: 7px 0 0 7px;
7975         }
7976         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
7977                 border-radius: 0 7px 7px 0;
7978         }
7979         #new-comment-nav-ui button::after {
7980                 font-family: 'Proxima Nova', 'GW-Symbols', sans-serif;
7981         }
7982
7983         /*****************************************/
7984         @media only screen and (max-width: 900px) {
7985         /*****************************************/
7986                 h1.listing {
7987                         line-height: 1;
7988                 }
7989                 h1.listing + .post-meta .post-section::before {
7990                         position: unset;
7991                 }
7992                 h1.listing + .post-meta .post-section {
7993                         overflow: visible;
7994                 }
7995
7996                 .nav-bar-top:not(#primary-bar) .nav-inner {
7997                         font-size: 1.125em;
7998                 }
7999                 .nav-bar-top:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
8000                         padding: 6px 10px;
8001                 }
8002
8003                 #top-nav-bar .page-number {
8004                         padding-top: 11px;
8005                 }
8006                 #top-nav-bar::after {
8007                         margin: 0 auto;
8008                 }
8009
8010                 .archive-nav *[class^='archive-nav-item-'] {
8011                         border-width: 1px !important;
8012                 }
8013                 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
8014                         background-color: #bbb;
8015                 }
8016
8017                 .comment-item .comment-item {
8018                         margin: 0.75em 3px 3px 6px;
8019                 }
8020                 .comment-item .comment-item + .comment-item {
8021                         margin: 1.5em 3px 3px 6px;
8022                 }
8023
8024                 .sublevel-nav:not(.sort) .sublevel-item,
8025                 .sublevel-nav:not(.sort) .sublevel-item:first-child,
8026                 .sublevel-nav:not(.sort) .sublevel-item:last-child {
8027                         border-radius: 8px;
8028                         border-width: 1px;
8029                         margin: 2px;
8030                 }
8031
8032                 .contents {
8033                         margin-left: auto;
8034                 }
8035         /*******************************************/
8036         } @media only screen and (max-width: 720px) {
8037         /*******************************************/
8038         /*******************************************/
8039         } @media only screen and (max-width: 520px) {
8040         /*******************************************/
8041                 h1.listing {
8042                         font-size: 1.5rem;
8043                         margin: 18px 6px 4px 6px;
8044                         max-width: calc(100% - 12px);
8045                 }
8046                 h1.listing + .post-meta {
8047                         margin: 4px 6px;
8048                 }
8049                 h1.listing + .post-meta > * {
8050                         line-height: 1.4;
8051                 }
8052                 h1.listing .link-post-link {
8053                         top: 4px;
8054                 }
8055
8056                 #content.user-page h1.listing::after {
8057                         height: calc(100% + 2.375em);
8058                 }
8059                 #content.user-page h1.listing.link-post-listing::after {
8060                         height: calc(100% + 3.375em);
8061                 }
8062                 #content.user-page h1.listing + .post-meta {
8063                         margin-bottom: 1.5rem;
8064                 }
8065
8066                 #content.compact > .comment-thread .comment-item {
8067                         max-height: 104px;
8068                 }
8069                 #content.compact.user-page h1.listing {
8070                         margin-top: 0.5rem;
8071                 }
8072                 #content.compact.user-page h1.listing + .post-meta {
8073                         margin-bottom: 0.75rem;
8074                 }
8075
8076                 .comment-body {
8077                         font-size: 1.1875rem;
8078                         line-height: 1.35;
8079                 }
8080
8081                 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
8082                         padding: 5px 6px 6px 6px;
8083                         font-weight: 600;
8084                 }
8085                 .textarea-container:focus-within .guiedit-mobile-help-button.active {
8086                         box-shadow:
8087                                 0 0 0 1px #c00,
8088                                 0 0 0 1px #c00 inset;
8089                         color: #c00;
8090                         border-color: transparent;
8091                 }
8092                 .textarea-container:focus-within .guiedit-buttons-container {
8093                         background-color: #fff;
8094                         border-top: 1px solid #ddf;
8095                 }
8096                 #content.conversation-page .textarea-container:focus-within::after {
8097                         background-color: #fff;
8098                 }
8099                 .textarea-container:focus-within .guiedit-mobile-auxiliary-button,
8100                 .textarea-container:focus-within button.guiedit {
8101                         border: 1px solid #bbb;
8102                         border-radius: 6px;
8103                 }
8104                 #markdown-hints::after {
8105                         color: #090;
8106                 }
8107
8108                 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
8109                         top: 2px;
8110                 }
8111                 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
8112                         top: 1px;
8113                 }
8114                 #edit-post-form textarea {
8115                         min-height: calc(100vh - 440px);
8116                 }
8117         }
8118 }
8119
8120 /*************/
8121 /* ACCORDIUS */
8122 /*************/
8123
8124 /*======*/
8125 /* TAGS */
8126 /*======*/
8127
8128 #tags {
8129         order: 12;
8130         display: flex;
8131         flex-basis: 100%;
8132         justify-content: center;
8133         margin: 0;
8134         flex-flow: row wrap;
8135         align-items: flex-start;
8136 }
8137
8138 /*========================*/
8139 /* READTHESEQUENCES THEME */
8140 /*========================*/
8141
8142 /*++++++*/
8143 /* TAGS */
8144 /*++++++*/
8145
8146 #tags {
8147         padding: 0.5em;
8148         align-items: center;
8149 }
8150 #tags::before {
8151         content: "\F02C";
8152         font-family: Font Awesome;
8153         font-weight: 400;
8154         font-size: 0.875em;
8155         margin: 0 0.5em 0 0;
8156         opacity: 0.6;
8157 }
8158 #tags a {
8159         margin: 0 0.375em 0 0;
8160 }
8161 #tags a:not(:last-of-type)::after {
8162         content: ","
8163 }
8164
8165 .post-page .post-meta::after {
8166         order: 20;
8167 }