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