www/css/style-dark.windows.css

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