www/css/style-ultramodern.windows.css

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