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