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