www/css/style-dark.mac.css

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