www/css/style-dark.mac.css

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