www/css/style-dark.windows.css

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