www/theme-classic.css.php

   1 <?php
   2         $UI_font = "'Arial', 'GW-Symbols', sans-serif";
   3         $text_font = "'Arial', sans-serif";
   4         $hyperlink_color = "#6a8a6b";
   5 ?>
   6
   7 /*****************/
   8 /* CLASSIC THEME */
   9 /*****************/
  10
  11 /*===========*/
  12 /* VARIABLES */
  13 /*===========*/
  14
  15 /*      Color scheme.
  16         */
  17 :root {
  18         --GW-comment-background-color-odd: #f7f7f8;
  19         --GW-comment-background-color-even: #fff;
  20         --GW-comment-background-color-target: #ffd;
  21 }
  22
  23 /*======*/
  24 /* BASE */
  25 /*======*/
  26
  27 body {
  28         color: #000;
  29         background-color: #d8d8d8;
  30         font-family: <?php echo $UI_font; ?>;
  31 }
  32 #content {
  33         line-height: 1.5;
  34 }
  35 #content::before {
  36         background-color: #fff;
  37         box-shadow: 0px 0px 10px #555;
  38 }
  39
  40 /*=========*/
  41 /* NAV BAR */
  42 /*=========*/
  43
  44 .nav-inner {
  45         font-size: 1.125em;
  46         font-weight: bold;
  47 }
  48 .nav-inner,
  49 #primary-bar.inactive-bar .nav-inner {
  50         padding: 13px 30px 11px 30px;
  51 }
  52 .nav-bar-top:not(#primary-bar) .nav-inner {
  53         font-size: 0.875em;
  54 }
  55 .nav-bar-top:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
  56         padding: 6px 0 4px 0;
  57 }
  58 @media only screen and (min-width: 901px) {
  59         #secondary-bar #nav-item-sequences .nav-inner {
  60                 line-height: 1.1;
  61         }
  62 }
  63
  64 #bottom-bar.decorative {
  65         background-color: #fff;
  66 }
  67 #bottom-bar.decorative::before,
  68 #bottom-bar.decorative::after {
  69         content: "GW";
  70         font-weight: 200;
  71         display: block;
  72         text-align: center;
  73         padding: 0.5em 0 0.75em 0;
  74 }
  75 #bottom-bar.decorative::before {
  76         width: 100%;
  77         color: transparent;
  78         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/one_pixel_DDD.gif")) ?>');
  79         background-repeat: repeat-x;
  80         background-position: center 44%;
  81         margin: 0 30px;
  82         filter: opacity(0.7);
  83 }
  84 #bottom-bar.decorative::after {
  85         color: #eee;
  86         position: absolute;
  87         left: 0;
  88         right: 0;
  89         margin: auto;
  90         background-color: #fff;
  91         padding-right: 4px;
  92         padding-left: 4px;
  93 }
  94 <?php fit_content("#bottom-bar.decorative::after"); ?>
  95
  96 /* Accesskey hints */
  97
  98 .nav-inner::after {
  99         display: block;
 100         position: absolute;
 101         left: 5px;
 102         top: 0;
 103         font-weight: normal;
 104         font-size: 0.7em;
 105         color: #ddd;
 106 }
 107 .nav-inner:hover::after {
 108         color: #bbb;
 109 }
 110
 111 /* This makes the navbar items look like tabs: */
 112
 113 .nav-bar + .nav-bar {
 114         position: relative;
 115 }
 116 .nav-bar {
 117         background-color: #f5f5f5;
 118 }
 119 .nav-bar {
 120         border-bottom: 1px solid #d6d5d6;
 121 }
 122 .nav-bar a,
 123 .nav-bar a:visited {
 124         color: #999;
 125 }
 126 .nav-bar a:hover {
 127         color: #777;
 128         text-decoration: none;
 129 }
 130 .nav-bar .nav-current {
 131         color: #666;
 132 }
 133 .nav-item:nth-of-type(n+2) {
 134         box-shadow: -9px 0 0 -8px #d6d5d6;
 135 }
 136
 137 /* Search tab */
 138
 139 #nav-item-search form::before {
 140         position: relative;
 141         top: 2px;
 142         opacity: 0.3;
 143 }
 144 #nav-item-search button {
 145         border: none;
 146         font-weight: inherit;
 147 }
 148 #nav-item-search input::placeholder {
 149         color: #d00;
 150         font-weight: normal;
 151 }
 152
 153 /*= User/login tab =*/
 154
 155 #inbox-indicator::before {
 156         top: 1px;
 157         color: #ccc;
 158 }
 159
 160 /*= Pagination UI =*/
 161
 162 #bottom-bar #nav-item-next a::before {
 163         margin-left: -2.2em;
 164         left: 4.0em;
 165 }
 166 #bottom-bar #nav-item-last a::before {
 167         margin-left: -2.3em;
 168         left: 3.9em;
 169 }
 170
 171 /*= Top pagination UI hover tooltips =*/
 172
 173 #top-nav-bar a::after,
 174 #bottom-bar a::after {
 175         color: #000;
 176 }
 177
 178 /*==============*/
 179 /* PAGE TOOLBAR */
 180 /*==============*/
 181
 182 .new-post,
 183 .new-post:visited,
 184 .new-private-message,
 185 .new-private-message:visited {
 186         color: #090;
 187 }
 188 .logout-button {
 189         color: #d33;
 190 }
 191
 192 /*==============*/
 193 /* SUBLEVEL NAV */
 194 /*==============*/
 195
 196 .sublevel-nav .sublevel-item {
 197         color: #777;
 198         background-color: #fff;
 199 }
 200 .sublevel-nav .sublevel-item:not(.selected):hover {
 201         background-color: #ddd;
 202         color: #000;
 203         text-decoration: none;
 204         text-shadow: none;
 205 }
 206 .sublevel-nav .sublevel-item:not(.selected):active,
 207 .sublevel-nav .sublevel-item.selected {
 208         background-color: #ddd;
 209         color: #000;
 210         text-shadow:
 211                 0 -1px 0 #fff,
 212                 0 0.5px 0.5px #000;
 213 }
 214
 215 .sublevel-nav:not(.sort) .sublevel-item {
 216         border-style: solid;
 217         border-color: #ddd;
 218         border-width: 1px 0 1px 1px;
 219 }
 220 .sublevel-nav:not(.sort) .sublevel-item:first-child {
 221         border-radius: 8px 0 0 8px;
 222 }
 223 .sublevel-nav:not(.sort) .sublevel-item:last-child {
 224         border-width: 1px;
 225         border-radius: 0 8px 8px 0;
 226 }
 227
 228 /*=====================*/
 229 /* SORT ORDER SELECTOR */
 230 /*=====================*/
 231
 232 .sublevel-nav.sort .sublevel-item {
 233         letter-spacing: 0.5px;
 234         padding: 7px 7px 6px 8px;
 235         text-transform: uppercase;
 236         pointer-events: auto;
 237         box-shadow: 1px 1px 0 0 #aaa inset;
 238 }
 239 .sublevel-nav.sort {
 240         border: 2px solid transparent;
 241         padding: 18px 0 0 0;
 242         border-radius: 8px;
 243         pointer-events: none;
 244         background-color: #bbb;
 245 }
 246 .sublevel-nav.sort::before {
 247         text-transform: uppercase;
 248         font-weight: 600;
 249         color: #444;
 250         text-shadow: 0.5px 0.5px 0 #fff;
 251         z-index: 1;
 252 }
 253 .sublevel-nav.sort::after {
 254         content: "";
 255         position: absolute;
 256         display: block;
 257         top: 0;
 258         left: 0;
 259         width: 100%;
 260         height: 100%;
 261         border-radius: 6px;
 262         box-shadow:
 263                 0 18px 0 0 #bbb inset,
 264                 0 0 0 1px #aaa inset,
 265                 0 18px 0 1px #aaa inset,
 266                 0 0 0 2px #bbb;
 267 }
 268
 269 /*================*/
 270 /* WIDTH SELECTOR */
 271 /*================*/
 272 /* THEME SELECTOR */
 273 /*================*/
 274
 275 #width-selector button,
 276 #theme-selector button {
 277         box-shadow:
 278                 0 0 0 4px #d8d8d8 inset,
 279                 0 0 0 5px #bbb inset;
 280 }
 281 #width-selector button:hover,
 282 #width-selector button.selected,
 283 #theme-selector button:hover,
 284 #theme-selector button.selected {
 285         box-shadow:
 286                 0 0 0 5px #bbb inset;
 287 }
 288
 289 #theme-selector button::before {
 290         font-size: 0.9375em;
 291         padding: 5px 6px 7px 6px;
 292         color: #999;
 293         background-color: #d8d8d8;
 294 }
 295 #theme-selector button:hover::before,
 296 #theme-selector button.selected::before {
 297         color: #222;
 298 }
 299 #width-selector button::after {
 300         color: #999;
 301         font-size: 0.9em;
 302 }
 303
 304 /*======================*/
 305 /* THEME TWEAKER TOGGLE */
 306 /*======================*/
 307
 308 #theme-tweaker-toggle button {
 309         color: #777;
 310 }
 311
 312 /*=================*/
 313 /* QUICKNAV WIDGET */
 314 /*=================*/
 315
 316 #quick-nav-ui a {
 317         color: #999;
 318         background-color: #e4e4e4;
 319         border-radius: 4px;
 320 }
 321 #quick-nav-ui a[href='#bottom-bar'] {
 322         line-height: 1.8;
 323 }
 324 #quick-nav-ui a:active {
 325         transform: scale(0.9);
 326 }
 327 #quick-nav-ui a[href='#comments'].no-comments {
 328         opacity: 0.4;
 329         color: #bbb;
 330 }
 331 @media only screen and (hover: hover) {
 332         #quick-nav-ui a:hover {
 333                 color: #000;
 334                 background-color: #eee;
 335         }
 336         #quick-nav-ui a:focus:not(:hover) {
 337                 transform: none;
 338                 text-shadow: none;
 339         }
 340 }
 341
 342 /*======================*/
 343 /* NEW COMMENT QUICKNAV */
 344 /*======================*/
 345
 346 #new-comment-nav-ui .new-comments-count {
 347         font-weight: 600;
 348         color: #666;
 349         text-shadow: 0.5px 0.5px 0 #fff;
 350 }
 351 #new-comment-nav-ui .new-comments-count::after {
 352         font-weight: 600;
 353         color: #777;
 354 }
 355 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
 356         color: #bbb;
 357         text-shadow: none;
 358 }
 359 @media only screen and (hover: hover) {
 360         #new-comment-nav-ui .new-comments-count:hover {
 361                 text-shadow:
 362                         0 0 1px #fff,
 363                         0 0 3px #fff,
 364                         0 0 5px #fff,
 365                         0 0 8px #fff,
 366                         0.5px 0.5px 0 #fff;
 367         }
 368         #new-comment-nav-ui .new-comment-sequential-nav-button:focus {
 369                 color: #d00;
 370         }
 371 }
 372
 373 /*=================*/
 374 /* HNS DATE PICKER */
 375 /*=================*/
 376
 377 #hns-date-picker span {
 378         color: #777;
 379         text-shadow: 0.5px 0.5px 0 #fff;
 380         font-weight: 600;
 381 }
 382 #hns-date-picker input {
 383         border: 1px solid #777;
 384         background-color: transparent;
 385         color: #666;
 386 }
 387 #hns-date-picker input:focus {
 388         color: #000;
 389 }
 390
 391 /*======================*/
 392 /* ANTI-KIBITZER TOGGLE */
 393 /*======================*/
 394
 395 #anti-kibitzer-toggle button::before,
 396 #anti-kibitzer-toggle button::after {
 397         background-color: #888;
 398         -webkit-background-clip: text;
 399         color: transparent;
 400         text-shadow: rgba(255,255,255,0.5) 0px 1px 1px;
 401 }
 402 #anti-kibitzer-toggle button:hover::before,
 403 #anti-kibitzer-toggle button:hover::after {
 404         background-color: #444;
 405 }
 406
 407 /*======================*/
 408 /* TEXT SIZE ADJUSTMENT */
 409 /*======================*/
 410
 411 #text-size-adjustment-ui button {
 412         color: #777;
 413 }
 414 #text-size-adjustment-ui button:hover {
 415         color: #222;
 416 }
 417 #text-size-adjustment-ui button.default {
 418         font-weight: 600;
 419 }
 420 #text-size-adjustment-ui button:disabled:hover {
 421         text-shadow: none;
 422 }
 423 #text-size-adjustment-ui::after {
 424         color: #999;
 425 }
 426
 427 /*=============================*/
 428 /* COMMENTS VIEW MODE SELECTOR */
 429 /*=============================*/
 430
 431 #comments-view-mode-selector a {
 432         color: #777;
 433 }
 434
 435 /*===============*/
 436 /* KEYBOARD HELP */
 437 /*===============*/
 438
 439 #keyboard-help-overlay .keyboard-help-container .keys {
 440         margin: 0;
 441 }
 442
 443 /*==========*/
 444 /* ARCHIVES */
 445 /*==========*/
 446
 447 .archive-nav {
 448         border: 1px solid #aaa;
 449 }
 450 .archive-nav *[class^='archive-nav-item'] {
 451         border-style: solid;
 452         border-color: #ddd;
 453         border-width: 1px 0 1px 1px;
 454         background-color: #eee;
 455 }
 456 .archive-nav div[class^='archive-nav-']:nth-of-type(2) *[class^='archive-nav-item'] {
 457         border-top-width: 0;
 458         border-bottom-width: 0;
 459 }
 460 .archive-nav div[class^='archive-nav-']:last-of-type *[class^='archive-nav-item'] {
 461         border-bottom-width: 1px;
 462 }
 463 .archive-nav *[class^='archive-nav-item']:last-child {
 464         border-right-width: 1px;
 465 }
 466 .archive-nav span[class^='archive-nav-item'] {
 467         font-weight: bold;
 468         background-color: #ddd;
 469 }
 470
 471 .archive-nav a:link,
 472 .archive-nav a:visited {
 473         color: rgba(0, 0, 238, 0.7);
 474 }
 475 .archive-nav a:hover {
 476         text-decoration: none;
 477         color: #c00;
 478         background-color: #e0e0e0;
 479 }
 480 .archive-nav a:active {
 481         transform: scale(0.9);
 482 }
 483 .archive-nav a:focus:not(:hover) {
 484         transform: none;
 485 }
 486 .archive-nav a.archive-nav-item-day:hover {
 487         background-color: #ddd;
 488 }
 489
 490 /*==========*/
 491 /* LISTINGS */
 492 /*==========*/
 493
 494 h1.listing {
 495         margin: 1.125em 20px 0.25em 20px;
 496         max-width: calc(100% - 40px);
 497         font-family: <?php echo $UI_font; ?>, 'Font Awesome';
 498         font-size: 1.125rem;
 499         padding-left: 30px;
 500         max-height: unset;
 501 }
 502
 503 h1.listing .post-title-link {
 504         color: #538d4d;
 505         white-space: unset;
 506         display: inline;
 507 }
 508 h1.listing .post-title:visited {
 509         color: #5a5a5b;
 510 }
 511 h1.listing .link-post-link {
 512         top: 2px;
 513 }
 514
 515 @media only screen and (hover: hover) {
 516         h1.listing a:hover,
 517         h1.listing a:focus {
 518                 color: #3d3d3e;
 519                 text-decoration: none;
 520         }
 521         h1.listing a:focus {
 522                 border-bottom: 1px dotted #999;
 523         }
 524         h1.listing:focus-within::before {
 525                 display: none;
 526         }
 527         h1.listing:focus-within + .post-meta .karma-value {
 528                 box-shadow:
 529                         0 0 0 3px #fff,
 530                         0 0 0 6px #3d3d3e;
 531         }
 532         h1.listing .link-post-link:hover,
 533         h1.listing .link-post-link:focus {
 534                 color: #4879ec;
 535                 text-shadow:
 536                          0.5px 0.5px 0 #fff,
 537                          -0.5px -0.5px 0 #fff,
 538                          0 0 2px #fff,
 539                          0 0 3px #00c;
 540                 border: none;
 541         }
 542 }
 543
 544 h1.listing .edit-post-link {
 545         padding: 5px 3px 12px 0.5em;
 546         top: 0;
 547         right: 0;
 548 }
 549 h1.listing .edit-post-link:hover {
 550         text-decoration: none;
 551 }
 552 #content.user-page h1.listing .edit-post-link {
 553         background-color: #f7f7f8;
 554 }
 555
 556 /*======*/
 557 /* SPAM */
 558 /*======*/
 559
 560 h1.listing.spam {
 561         opacity: 0.15;
 562 }
 563 h1.listing.spam + .post-meta {
 564         opacity: 0.2;
 565 }
 566 h1.listing.spam:hover,
 567 h1.listing.spam + .post-meta:hover,
 568 h1.listing.spam:hover + .post-meta {
 569         opacity: 1.0;
 570 }
 571
 572 /*===================*/
 573 /* LISTING POST-META */
 574 /*===================*/
 575
 576 h1.listing + .post-meta {
 577         font-size: 0.8125rem;
 578         padding-left: 30px;
 579         display: flex;
 580         justify-content: flex-end;
 581 }
 582
 583 h1.listing + .post-meta .author {
 584         font-weight: bold;
 585         color: #6a8a6b;
 586         text-decoration: none;
 587         margin: 0 0 0 1.5em;
 588         order: 0;
 589 }
 590 h1.listing + .post-meta .author:hover {
 591         color: #3d3d3e;
 592 }
 593 h1.listing + .post-meta .date,
 594 h1.listing + .post-meta .read-time {
 595         color: #999;
 596         font-style: italic;
 597 }
 598 h1.listing + .post-meta a {
 599         color: #8a8a8b;
 600         text-decoration: underline;
 601 }
 602 h1.listing + .post-meta a:hover {
 603         color: #3d3d3e;
 604 }
 605
 606 h1.listing + .post-meta .karma-value {
 607         background-color: #538d4d;
 608         color: #fff;
 609         font-weight: bold;
 610         font-size: 0.8125rem;
 611         border-radius: 1.0625em;
 612         padding: 2px 6px 1px 6px;
 613         text-align: center;
 614         display: block;
 615         min-width: 2.125em;
 616         position: absolute;
 617         right: calc(100% - 1.75em);
 618         top: -2.1em;
 619 }
 620 h1.listing + .post-meta .karma-value span,
 621 h1.listing + .post-meta .lw2-link span,
 622 h1.listing + .post-meta .comment-count span {
 623         display: none;
 624 }
 625
 626 h1.listing + .post-meta > * {
 627         text-align: right;
 628         margin: 0 0 0 0.5em;
 629 }
 630 h1.listing + .post-meta .read-time {
 631         width: 6.5em;
 632         order: 2;
 633 }
 634 h1.listing + .post-meta .comment-count {
 635         order: -1;
 636 }
 637 h1.listing + .post-meta .comment-count::before {
 638         content: "Comments ("
 639 }
 640 h1.listing + .post-meta .comment-count::after {
 641         content: ")"
 642 }
 643 h1.listing + .post-meta .date {
 644         width: 11em;
 645         order: 1;
 646 }
 647 h1.listing + .post-meta .lw2-link {
 648         margin: 0 0 0 1em;
 649         order: 3;
 650 }
 651 h1.listing + .post-meta .post-section {
 652         margin: 0;
 653         text-decoration: none;
 654 }
 655 h1.listing + .post-meta .post-section::before {
 656         left: unset;
 657         right: calc(100% + 1.15em);
 658         top: -1.95em;
 659 }
 660 h1.listing + .post-meta .link-post-domain {
 661         order: -2;
 662         margin: 0 1em 0 0;
 663 }
 664
 665 /*============*/
 666 /* USER PAGES */
 667 /*============*/
 668
 669 #content.user-page h1.page-main-heading {
 670         border-bottom: 1px solid #ccc;
 671 }
 672
 673 #content.user-page h1.listing,
 674 #content.user-page h1.listing + .post-meta {
 675         background-color: #f7f7f8;
 676         border-style: solid;
 677         border-color: #bbbcbf;
 678 }
 679
 680 #content.user-page h1.listing {
 681         padding: 0.5em 6px 0 48px;
 682         border-width: 1px 1px 0 1px;
 683         margin: 1rem 0 0 0;
 684         max-width: 100%;
 685 }
 686 #content.own-user-page h1.listing,
 687 h1.listing.own-post-listing {
 688         padding-right: 36px;
 689 }
 690 #content.user-page h1.listing a:hover {
 691         background-color: #f7f7f8;
 692 }
 693
 694 #content.user-page h1.listing + .post-meta {
 695         padding: 0.25em 10px 0.5em 32px;
 696         border-width: 0 1px 1px 1px;
 697         margin: 0 0 1rem 0;
 698 }
 699 #content.user-page h1.listing + .post-meta .karma-value {
 700         right: calc(100% - 3.25em);
 701         top: -1.8em;
 702 }
 703 #content.user-page h1.listing + .post-meta .post-section::before {
 704         right: calc(100% - 5.1em);
 705         top: 4px;
 706 }
 707
 708 #content.conversations-user-page h1.listing {
 709         padding: 8px 6px 8px 10px;
 710         font-size: 1.25rem;
 711 }
 712 #content.conversations-user-page h1.listing + .post-meta {
 713         padding: 0 10px 6px 4px;
 714         margin: 0;
 715 }
 716
 717 .user-stats .karma-total {
 718         font-weight: bold;
 719 }
 720
 721 /*================*/
 722 /* SEARCH RESULTS */
 723 /*================*/
 724
 725 #content.search-results-page h1.listing {
 726         font-size: 1.125rem;
 727 }
 728
 729 /*===============*/
 730 /* CONVERSATIONS */
 731 /*===============*/
 732
 733 #content.conversation-page h1.page-main-heading {
 734         font-size: 1.375em;
 735         text-align: left;
 736 }
 737
 738 /*============*/
 739 /* LOGIN PAGE */
 740 /*============*/
 741
 742 .login-container form input[type='submit'] {
 743         font-weight: bold;
 744         background-color: #eee;
 745         border: 1px solid #ccc;
 746 }
 747 .login-container form input[type='submit']:hover,
 748 .login-container form input[type='submit']:focus {
 749         background-color: #ddd;
 750         border: 1px solid #aaa;
 751 }
 752
 753 /* “Create account” form */
 754
 755 #signup-form {
 756         background-color: #f3f3f3;
 757         border: 1px solid #ddd;
 758 }
 759 #signup-form input[type='submit'] {
 760         background-color: #e4e4e4;
 761         border: 1px solid #ccc;
 762 }
 763 #signup-form input[type='submit']:hover {
 764         background-color: #d8d8d8;
 765         border: 1px solid #aaa;
 766 }
 767
 768 /* Log in tip */
 769
 770 .login-container .login-tip {
 771         border: 1px solid #eee;
 772 }
 773
 774 /* Message box */
 775
 776 .error-box {
 777         border: 1px solid red;
 778         background-color: #faa;
 779 }
 780 .success-box {
 781         border: 1px solid green;
 782         background-color: #afa;
 783 }
 784
 785 /*=====================*/
 786 /* PASSWORD RESET PAGE */
 787 /*=====================*/
 788
 789 .reset-password-container input[type='submit'] {
 790         background-color: #e4e4e4;
 791         border: 1px solid #ccc;
 792         font-weight: bold;
 793 }
 794
 795 /*===================*/
 796 /* TABLE OF CONTENTS */
 797 /*===================*/
 798
 799 .contents {
 800         font-family: <?php echo $UI_font; ?>;
 801         border: 1px solid #ddd;
 802         background-color: #eee;
 803         padding: 0.75em 0.5em 0.5em 0.5em;
 804 }
 805 .contents-head {
 806         font-weight: bold;
 807         font-size: 1.25em;
 808 }
 809 .post-body .contents ul {
 810         font-size: 1em;
 811 }
 812 .post-body .contents li::before {
 813         color: #999;
 814         font-feature-settings: "tnum";
 815 }
 816
 817 /*==================*/
 818 /* POSTS & COMMENTS */
 819 /*==================*/
 820
 821 .body-text {
 822         font-family: <?php echo $text_font; ?>;
 823         font-size: 1rem;
 824 }
 825 .body-text a {
 826         text-decoration: underline;
 827 }
 828 .post-meta > *,
 829 .comment-meta > * {
 830         white-space: unset;
 831 }
 832
 833 /*=================*/
 834 /* POST NAVIGATION */
 835 /*=================*/
 836
 837 .post-nav-item {
 838         font-size: 0.875em;
 839         font-weight: bold;
 840         background-color: #f5f5f5;
 841 }
 842 .post-nav-label {
 843         opacity: 0.75;
 844 }
 845
 846 .post-nav.next,
 847 .sequence-title {
 848         box-shadow: -9px 0 0 -8px #d6d5d6;
 849 }
 850
 851 @media only screen and (max-width: 900px) {
 852         .post-nav.prev {
 853                 padding: 0.5em 0.75em 0.5em 0.5em;
 854         }
 855         .sequence-title {
 856                 box-shadow: 0 -9px 0 -8px #d6d5d6;
 857         }
 858         .post-nav.next {
 859                 padding: 0.5em 0.5em 0.5em 0.75em;
 860         }
 861 }
 862
 863 /*===========*/
 864 /* POST-META */
 865 /*===========*/
 866
 867 .post-meta {
 868         line-height: 1.9;
 869 }
 870 .post-meta .post-section::before,
 871 .comment-meta .alignment-forum {
 872         color: #fff;
 873         text-shadow:
 874                 1px 1px 0 #090,
 875                 0 1px 0 #090,
 876                 0 0 5px #090;
 877 }
 878 a.post-section:hover::before {
 879     color: #97ff7c;
 880 }
 881 .post-meta .post-section.alignment-forum::before {
 882         text-shadow:
 883                 1px 1px 0   #626dd7,
 884                 0   1px 0   #626dd7,
 885                 0   0   5px #626dd7;
 886 }
 887 a.post-section.alignment-forum:hover::before {
 888     color: #e6e5ff;
 889 }
 890
 891 .bottom-post-meta {
 892         border-color: #ddd;
 893 }
 894
 895 .post .post-meta {
 896         position: relative;
 897         font-size: 0.875rem;
 898         justify-content: flex-start;
 899         padding-left: 30px;
 900 }
 901 .post .post-meta .author {
 902         font-weight: bold;
 903         color: #6a8a6b;
 904         text-decoration: none;
 905 }
 906 .post .post-meta .author:hover {
 907         color: #3d3d3e;
 908 }
 909 .post .post-meta .date{
 910         color: #999;
 911         font-style: italic;
 912 }
 913 .post .post-meta a {
 914         color: #8a8a8b;
 915         text-decoration: underline;
 916 }
 917 .post .post-meta a:hover {
 918         color: #3d3d3e;
 919 }
 920
 921 .post .post-meta .voting-controls {
 922         order: -1;
 923 }
 924 .post .post-meta .karma-value {
 925         background-color: #538d4d;
 926         color: #fff;
 927         font-weight: bold;
 928         font-size: 0.8125rem;
 929         border-radius: 1.125em;
 930         padding: 2px 6px 1px 6px;
 931         text-align: center;
 932         min-width: 2.125em;
 933         display: block;
 934         float: left;
 935         margin: 0 0.5em 0 0;
 936 }
 937 .post .post-meta .karma-value span,
 938 .post .post-meta .lw2-link span,
 939 .post .post-meta .comment-count span {
 940         display: none;
 941 }
 942
 943 .post .post-meta .comment-count::before {
 944         content: "Comments ("
 945 }
 946 .post .post-meta .comment-count::after {
 947         content: ")"
 948 }
 949
 950 .post .post-meta .post-section::before {
 951         position: absolute;
 952         top: 1px;
 953         left: 0;
 954 }
 955 .post .bottom-post-meta .post-section::before {
 956         top: 21px;
 957 }
 958
 959 /*============*/
 960 /* LINK POSTS */
 961 /*============*/
 962
 963 .post.link-post > .post-body > p:first-child {
 964         margin: 0;
 965 }
 966 .post.link-post a.link-post-link {
 967         text-decoration: none;
 968         font-family: <?php echo $UI_font; ?>;
 969         font-weight: 600;
 970 }
 971 .post.link-post a.link-post-link:hover {
 972         color: #c00;
 973 }
 974 .post.link-post a.link-post-link:hover::before {
 975         color: #4879ec;
 976         text-shadow:
 977                 0.5px 0.5px 0 #fff,
 978                 -0.5px -0.5px 0 #fff,
 979                 0 0 2px #fff,
 980                 0 0 3px #00c;
 981 }
 982 .post.link-post a.link-post-link:focus {
 983         color: #aaa;
 984         border-bottom: 2px dotted #aaa;
 985 }
 986
 987 /*=======*/
 988 /* POSTS */
 989 /*=======*/
 990
 991 h1.post-title {
 992         font-size: 1.375rem;
 993         text-align: left;
 994         margin: 2em 0 0.5em 0;
 995         line-height: 1.2;
 996 }
 997
 998 /*==========*/
 999 /* COMMENTS */
1000 /*==========*/
1001
1002 #comments::before {
1003         border-top: 1px solid #000;
1004         box-shadow: 0 3px 4px -4px #000 inset;
1005 }
1006 @-moz-document url-prefix() {
1007         #comments::before {
1008                 box-shadow: 0 3px 3px -4px #000 inset;
1009         }
1010 }
1011 #content > .comment-thread .comment-meta a.date:focus,
1012 #content > .comment-thread .comment-meta a.permalink:focus {
1013         color: #444;
1014         outline: 2px dotted #444;
1015         position: relative;
1016         background-color: #fff;
1017         padding: 0 5px;
1018         left: -5px;
1019 }
1020 #content > .comment-thread .comment-meta a.date:focus + *,
1021 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
1022         margin-left: -10px;
1023 }
1024 .comment-item {
1025         border: 1px solid #bbbcbf;
1026         background-color: var(--GW-comment-background-color);
1027 }
1028 .comment-item .comment-item {
1029         margin: 1em -1px 8px 16px;
1030 }
1031 .comment-item .comment-item + .comment-item {
1032         margin: 2em -1px 8px 16px;
1033 }
1034 .comment-parent-link::after {
1035         box-shadow:
1036                 0 28px 16px -16px var(--GW-comment-parent-background-color) inset,
1037                 4px 16px 0 12px var(--GW-comment-background-color-target) inset,
1038                 4px     4px 0 12px var(--GW-comment-background-color-target) inset;
1039 }
1040
1041 /*================================*/
1042 /* DEEP COMMENT THREAD COLLAPSING */
1043 /*================================*/
1044
1045 .comment-item input[id^="expand"] + label::after {
1046         color: <?php echo $hyperlink_color; ?>;
1047         font-weight: 600;
1048 }
1049 .comment-item input[id^="expand"] + label:hover::after {
1050         color: #c00;
1051 }
1052 .comment-item input[id^="expand"] + label:active::after,
1053 .comment-item input[id^="expand"] + label:focus::after{
1054         color: #c00;
1055 }
1056 .comment-item input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
1057         border-width: 1px 0 0 0;
1058 }
1059
1060 /*==============*/
1061 /* COMMENT-META */
1062 /*==============*/
1063
1064 .comment-meta > * {
1065         font-size: 0.9375rem;
1066         padding-top: 2px;
1067 }
1068 .comment-meta .author {
1069         font-weight: bold;
1070         color: #538d4d;
1071 }
1072 .comment-meta .date {
1073         color: #999;
1074         font-style: italic;
1075 }
1076 .comment-meta .date:hover {
1077         color: #777;
1078 }
1079 .comment-meta .karma-value,
1080 .comment-controls .voting-controls .karma-value {
1081         color: #666;
1082         float: left;
1083         margin-right: 0.5em;
1084 }
1085 .comment-meta .karma-value:only-child {
1086         float: none;
1087 }
1088 .comment-item .author:not(.redacted).original-poster::after {
1089         opacity: 0.8;
1090 }
1091
1092 .comment-item .voting-controls.active-controls::after,
1093 .comment-item .voting-controls .karma-value::after,
1094 .post .voting-controls.active-controls::after,
1095 .post .voting-controls .karma-value::after,
1096 .author::before {
1097         background-color: #fff;
1098         color: #888;
1099         box-shadow: 0 0 0 1px #ccc inset;
1100         border-radius: 4px;
1101 }
1102 .comment-item .voting-controls.active-controls::after,
1103 .post .voting-controls.active-controls::after {
1104         padding: 6px;
1105         max-width: unset;
1106         bottom: -46px;
1107         width: 110px;
1108 }
1109 .comment-item .voting-controls .karma-value::after,
1110 .post .voting-controls .karma-value::after {
1111         padding: 2px 8px;
1112         top: -36px;
1113         min-width: 64px;
1114         font-weight: normal;
1115 }
1116
1117 /*====================*/
1118 /* COMMENT PERMALINKS */
1119 /*====================*/
1120
1121 .comment-meta .permalink,
1122 .comment-meta .lw2-link,
1123 .individual-thread-page .comment-parent-link:empty {
1124         top: 1px;
1125         filter: grayscale(50%);
1126 }
1127 .comment-meta .permalink,
1128 .comment-meta .lw2-link,
1129 .individual-thread-page .comment-parent-link:empty {
1130         filter: unset;
1131 }
1132
1133 /*====================*/
1134 /* ANTI-KIBITZER MODE */
1135 /*====================*/
1136
1137 .author.redacted,
1138 .inline-author.redacted {
1139         opacity: 0.8;
1140         font-weight: 400;
1141 }
1142
1143 .karma-value.redacted {
1144         opacity: 0.5;
1145 }
1146
1147 .link-post-domain.redacted {
1148         opacity: 0.5;
1149 }
1150
1151 /*===========================*/
1152 /* COMMENT THREAD NAVIGATION */
1153 /*===========================*/
1154
1155 div.comment-parent-link {
1156         font-weight: bold;
1157 }
1158 a.comment-parent-link {
1159         font-weight: normal;
1160 }
1161 a.comment-parent-link::before {
1162         color: #bbb;
1163 }
1164 a.comment-parent-link:hover::before {
1165         background-color: #ffd;
1166         color: #999;
1167 }
1168
1169 div.comment-child-links {
1170         font-weight: bold;
1171 }
1172 div.comment-child-links a {
1173         font-weight: normal;
1174 }
1175 .comment-child-link::before {
1176         color: #bbb;
1177 }
1178
1179 .comment-item-highlight {
1180         box-shadow:
1181                 0 0     2px #e7b200,
1182                 0 0     3px #e7b200,
1183                 0 0     5px #e7b200,
1184                 0 0     7px #e7b200,
1185                 0 0 10px #e7b200;
1186         border: 1px solid #e7b200;
1187 }
1188 .comment-item-highlight-faint {
1189         box-shadow:
1190                 0 0     2px #f8e7b5,
1191                 0 0     3px #f8e7b5,
1192                 0 0     5px #f8e7b5,
1193                 0 0     7px #f8e7b5,
1194                 0 0 10px #f8e7b5;
1195         border: 1px solid #f8e7b5;
1196 }
1197
1198 .comment-popup {
1199         background-color: #fff;
1200 }
1201
1202 /*=======================*/
1203 /* COMMENTS COMPACT VIEW */
1204 /*=======================*/
1205
1206 #comments-list-mode-selector button {
1207         box-shadow:
1208                 0 0 0 4px #fff inset,
1209                 0 0 0 5px #bbb inset;
1210 }
1211 #comments-list-mode-selector button:hover,
1212 #comments-list-mode-selector button.selected {
1213         box-shadow:
1214                 0 0 0 5px #bbb inset;
1215 }
1216 #content.compact > .comment-thread .comment-item {
1217     max-height: 57px;
1218 }
1219 #content.compact > .comment-thread .comment-item::after {
1220         color: <?php echo $hyperlink_color; ?>;
1221         background: linear-gradient(to right, transparent 0%, #fff 50%, #fff 100%);
1222 }
1223
1224 @media only screen and (hover: hover) {
1225         #content.compact > .comment-thread .comment-item:hover .comment,
1226         #content.compact > .comment-thread .comment-item.expanded .comment {
1227                 background-color: #fff;
1228                 outline: 3px solid <?php echo $hyperlink_color; ?>;
1229         }
1230         #content.compact > .comment-thread .comment-item:hover .comment::before,
1231         #content.compact > .comment-thread .comment-item.expanded .comment::before {
1232                 background-color: #fff;
1233                 box-shadow:
1234                         0 0  3px #fff,
1235                         0 0  5px #fff,
1236                         0 0  7px #fff,
1237                         0 0 10px #fff,
1238                         0 0 20px #fff,
1239                         0 0 30px #fff,
1240                         0 0 40px #fff;
1241         }
1242 }
1243 @media only screen and (hover: none) {
1244         #content.compact > .comment-thread.expanded .comment-item .comment {
1245                 background-color: #fff;
1246                 outline: 3px solid <?php echo $hyperlink_color; ?>;
1247         }
1248         #content.compact > .comment-thread.expanded .comment-item .comment::before {
1249                 background-color: #fff;
1250                 box-shadow:
1251                         0 0  3px #fff,
1252                         0 0  5px #fff,
1253                         0 0  7px #fff,
1254                         0 0 10px #fff,
1255                         0 0 20px #fff,
1256                         0 0 30px #fff,
1257                         0 0 40px #fff;
1258         }
1259 }
1260
1261 #content.user-page.compact > h1.listing {
1262         margin-top: 0.5rem;
1263 }
1264 #content.user-page.compact > h1.listing + .post-meta {
1265         margin-bottom: 0.5rem;
1266 }
1267
1268 /*===========================*/
1269 /* HIGHLIGHTING NEW COMMENTS */
1270 /*===========================*/
1271
1272 .new-comment::before {
1273         outline: 2px solid #5a5;
1274         box-shadow:
1275                 0 0 6px -2px #5a5 inset,
1276                 0 0 4px #5a5,
1277                 0 0 6px #5a5;
1278 }
1279
1280 /*=================================*/
1281 /* COMMENT THREAD MINIMIZE BUTTONS */
1282 /*=================================*/
1283
1284 .comment-meta .comment-minimize-button {
1285         font-size: 1.25rem;
1286         top: -1px;
1287 }
1288 .comment-meta .comment-minimize-button::after {
1289         top: 23px;
1290 }
1291 .comment-minimize-button {
1292         color: #ccc;
1293 }
1294 .comment-minimize-button:hover {
1295         color: #aaa;
1296 }
1297 .comment-minimize-button::after {
1298         font-family: <?php echo $UI_font; ?>;
1299         color: #777;
1300 }
1301 .comment-minimize-button.maximized::after {
1302         color: #ccc;
1303 }
1304
1305 /*==============*/
1306 /* VOTE BUTTONS */
1307 /*==============*/
1308
1309 .vote {
1310         padding: 0 5px;
1311         position: relative;
1312 }
1313 .vote::before {
1314         position: relative;
1315         z-index: 1;
1316 }
1317 .vote::after {
1318         position: absolute;
1319 }
1320
1321 .karma .upvote::before {
1322         content: '\F164';
1323 }
1324 .karma .downvote::before {
1325         content: '\F165';
1326         top: 2px;
1327 }
1328 .karma .upvote::after {
1329         content: "\F164";
1330         left: -1px;
1331         top: -3px;
1332 }
1333 .karma .downvote::after {
1334         content: "\F165";
1335         left: -1px;
1336         top: 5px;
1337 }
1338
1339 .agreement .upvote::before {
1340         content: '\F0A6';
1341 }
1342 .agreement .downvote::before {
1343         content: '\F0A7';
1344         top: 2px;
1345 }
1346 .agreement .upvote::after {
1347         content: "\F0A6";
1348         left: -1px;
1349         top: -3px;
1350 }
1351 .agreement .downvote::after {
1352         content: "\F0A7";
1353         left: -1px;
1354         top: 5px;
1355 }
1356
1357 /**********/
1358 /*      States.
1359  */
1360
1361 /*      _ 1
1362  */
1363 .vote {
1364         color: #c8c8c8;
1365         text-shadow:
1366                  1px  1px 0 #aaa,
1367                 -1px  1px 0 #aaa,
1368                  1px -1px 0 #aaa,
1369                 -1px -1px 0 #aaa;
1370 }
1371 @media only screen and (min-resolution: 192dpi) {
1372         .vote {
1373                 text-shadow:
1374                          0.5px  0.5px 0 #aaa,
1375                         -0.5px  0.5px 0 #aaa,
1376                          0.5px -0.5px 0 #aaa,
1377                         -0.5px -0.5px 0 #aaa;
1378         }
1379 }
1380
1381 /*      _ 2
1382  */
1383 .upvote:hover,
1384 .upvote:not(.none) {
1385         color: var(--GW-upvote-button-color);
1386         text-shadow:
1387                  1px  1px 0 #080,
1388                 -1px  1px 0 #080,
1389                  1px -1px 0 #080,
1390                 -1px -1px 0 #080;
1391 }
1392 .downvote:hover,
1393 .downvote:not(.none) {
1394         color: var(--GW-downvote-button-color);
1395         text-shadow:
1396                  1px  1px 0 #b00,
1397                 -1px  1px 0 #a00,
1398                  1px -1px 0 #b00,
1399                 -1px -1px 0 #b00;
1400 }
1401 @media only screen and (min-resolution: 192dpi) {
1402         .upvote:hover,
1403         .upvote:not(.none) {
1404                 text-shadow:
1405                          0.5px  0.5px 0 #060,
1406                         -0.5px  0.5px 0 #060,
1407                          0.5px -0.5px 0 #060,
1408                         -0.5px -0.5px 0 #060;
1409         }
1410         .downvote:hover,
1411         .downvote:not(.none) {
1412                 text-shadow:
1413                          0.5px  0.5px 0 #900,
1414                         -0.5px  0.5px 0 #900,
1415                          0.5px -0.5px 0 #900,
1416                         -0.5px -0.5px 0 #900;
1417         }
1418 }
1419
1420 /*      0 _
1421  */
1422 .vote::after {
1423         visibility: hidden;
1424 }
1425
1426 /*      1,2 _
1427  */
1428 .vote.two-temp::after,
1429 .vote.two::after {
1430         visibility: visible;
1431 }
1432
1433 /*      1 _
1434  */
1435 .vote.two-temp::after {
1436         color: #c8c8c8;
1437 }
1438
1439 /*      2 _
1440  */
1441 .vote.two::after {
1442         color: inherit;
1443 }
1444
1445 /*      Disabled.
1446  */
1447 .vote:disabled,
1448 .vote:disabled:hover {
1449         visibility: unset;
1450         color: #eee;
1451         text-shadow:
1452                  1px  1px 0 #d8d8d8,
1453                 -1px  1px 0 #d8d8d8,
1454                  1px -1px 0 #d8d8d8,
1455                 -1px -1px 0 #d8d8d8;
1456 }
1457 @media only screen and (min-resolution: 192dpi) {
1458         .vote:disabled,
1459         .vote:disabled:hover {
1460                 text-shadow:
1461                          0.5px  0.5px 0 #d8d8d8,
1462                         -0.5px  0.5px 0 #d8d8d8,
1463                          0.5px -0.5px 0 #d8d8d8,
1464                         -0.5px -0.5px 0 #d8d8d8;
1465         }
1466 }
1467
1468 .comment-controls .voting-controls:first-of-type {
1469         margin-left: -6px;
1470 }
1471 .comment-controls .voting-controls {
1472         margin-right: 1em;
1473 }
1474
1475 /*===========================*/
1476 /* COMMENTING AND POSTING UI */
1477 /*===========================*/
1478
1479 .posting-controls input[type='submit'] {
1480         background-color: #fff;
1481         border: 1px solid #aaa;
1482         font-weight: bold;
1483 }
1484 .posting-controls input[type='submit']:hover,
1485 .posting-controls input[type='submit']:focus {
1486         background-color: #ddd;
1487         border: 1px solid #999;
1488 }
1489
1490 .comment-controls .cancel-comment-button {
1491         font-weight: 600;
1492         color: #c00;
1493         text-shadow:
1494                 0 0 1px #fff,
1495                 0 0 2px #fff;
1496         max-width: 1.2em;
1497         overflow: hidden;
1498         margin-right: 0.375em;
1499 }
1500 .comment-controls .cancel-comment-button::before {
1501         font-size: 1.25em;
1502 }
1503 .comment-controls .cancel-comment-button:hover {
1504         color: #f00;
1505 }
1506
1507 .new-comment-button {
1508         font-weight: 600;
1509 }
1510
1511 .comment-controls .action-button::before {
1512         font-size: 1em;
1513 }
1514 .comment-controls .action-button::after {
1515         content: attr(data-label);
1516         display: block;
1517         position: absolute;
1518         font-size: 0.5em;
1519         text-transform: uppercase;
1520         visibility: hidden;
1521         text-shadow: none;
1522 }
1523 .comment-controls .action-button:hover::after {
1524         visibility: visible;
1525 }
1526 .comment-controls .delete-button::before,
1527 .comment-controls .retract-button::before {
1528         color: #ca3232;
1529 }
1530 .comment-controls .delete-button::after {
1531         transform: translateX(-8px);
1532 }
1533 .comment-controls .retract-button::after {
1534         transform: translateX(-8px);
1535 }
1536 .comment-controls .unretract-button::after {
1537         transform: translateX(-18px);
1538 }
1539 .comment-controls .reply-button::before {
1540         content: "\F086";
1541         font-weight: 400;
1542         font-size: 1.125rem;
1543         color: #6a8a6b;
1544 }
1545 .comment-controls .reply-button::after {
1546         transform: translateX(-4px);
1547 }
1548 .comment-controls .edit-button::before {
1549         font-size: 0.9375em;
1550         color: #0b0;
1551 }
1552 .comment-controls .unretract-button::before {
1553         font-size: 1.125rem;
1554         color: #0b0;
1555 }
1556 .comment-controls .edit-button::after {
1557         transform: translateX(-1px);
1558 }
1559 .comment-item .comment-controls .action-button:hover::before {
1560         color: #f00;
1561         text-shadow:
1562                 0.5px 0.5px 0.5px #f77;
1563 }
1564
1565 h1.listing .edit-post-link,
1566 h1.listing .edit-post-link:visited,
1567 .post-controls .edit-post-link,
1568 .post-controls .edit-post-link:visited {
1569         color: #090;
1570 }
1571 h1.listing .edit-post-link:hover,
1572 .post-controls .edit-post-link:hover {
1573         color: #d00;
1574 }
1575
1576 .posting-controls textarea {
1577         font-family: <?php echo $text_font; ?>;
1578         font-size: 1rem;
1579         color: #000;
1580         background-color: #fff;
1581         border-color: #aaa;
1582         box-shadow:
1583                 0 0 0 1px #eee inset;
1584 }
1585 .posting-controls textarea:focus {
1586         background-color: #ffd;
1587         border-color: <?php echo $hyperlink_color; ?>;
1588         box-shadow:
1589                 0 0 0 1px #ddf inset,
1590                 0 0 0 1px #fff,
1591                 0 0 0 2px <?php echo $hyperlink_color; ?>;
1592 }
1593 .posting-controls.edit-existing-post textarea:focus,
1594 .posting-controls form.edit-existing-comment textarea:focus {
1595         border-color: #090;
1596     box-shadow:
1597         0 0 0 1px #81ff7f inset,
1598         0 0 0 1px #fff,
1599         0 0 0 2px #090;
1600 }
1601
1602 /* GUIEdit buttons */
1603
1604 .guiedit-buttons-container {
1605         background-image: linear-gradient(to bottom, #fff 0%, #ddf 50%, #ccf 75%, #aaf 100%);
1606 }
1607
1608 .posting-controls.edit-existing-post .guiedit-buttons-container button,
1609 .posting-controls form.edit-existing-comment .guiedit-buttons-container button {
1610     color: #050;
1611 }
1612 .guiedit-buttons-container button {
1613         font-family: Font Awesome, <?php echo $text_font; ?>;
1614 }
1615
1616 .guiedit::after {
1617         font-family: <?php echo $UI_font; ?>;
1618         color: #777;
1619         text-shadow: none;
1620         top: 4px;
1621 }
1622
1623 /* Markdown hints */
1624
1625 #markdown-hints-checkbox + label {
1626         color: <?php echo $hyperlink_color; ?>;
1627 }
1628 #markdown-hints-checkbox + label:hover {
1629         color: #e00;
1630 }
1631 #markdown-hints {
1632         border: 1px solid #c00;
1633         background-color: #ffa;
1634 }
1635
1636 /*================*/
1637 /* EDIT POST FORM */
1638 /*================*/
1639
1640 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1641         border-radius: 3px;
1642         border: 1px solid #ddd;
1643         color: #777;
1644         top: 2px;
1645 }
1646 @media only screen and (hover:hover) {
1647         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1648         #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1649                 text-shadow:
1650                         0 0 1px #fff,
1651                         0 0 2px #fff,
1652                         0 0 2.5px #aaa;
1653         }
1654         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1655         #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1656                 border-color: #aaa;
1657         }
1658 }
1659 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1660         content: "\F00C";
1661 }
1662 #edit-post-form input[type='radio'] + label {
1663         color: #777;
1664         border-color: #ddd;
1665 }
1666 #edit-post-form input[type='radio'][value='all'] + label {
1667         border-radius: 8px 0 0 8px;
1668         border-width: 1px;
1669 }
1670 #edit-post-form input[type='radio'][value='drafts'] + label {
1671         border-radius: 0 8px 8px 0;
1672 }
1673 #edit-post-form input[type='radio'] + label:hover,
1674 #edit-post-form input[type='radio']:focus + label {
1675         background-color: #ddd;
1676         color: #000;
1677 }
1678 #edit-post-form input[type='radio']:focus + label {
1679         color: #000;
1680         box-shadow:
1681                 0 0 0 1px #aaa;
1682 }
1683 #edit-post-form input[type='radio']:checked + label {
1684         background-color: #ddd;
1685         border-color: #ddd;
1686         color: #000;
1687         text-shadow:
1688                 0 -1px 0 #fff,
1689                 0 0.5px 0.5px #000;
1690 }
1691 #edit-post-form #markdown-hints-checkbox + label {
1692         padding: 3px 0 0 14px;
1693 }
1694
1695 /*=======*/
1696 /* LINKS */
1697 /*=======*/
1698
1699 a {
1700         text-decoration: none;
1701         color: <?php echo $hyperlink_color; ?>;
1702 }
1703 a:visited {
1704         color: #8a8a8b;
1705 }
1706 a:hover {
1707         color: #3d3d3e;
1708 }
1709
1710 /*=========*/
1711 /* BUTTONS */
1712 /*=========*/
1713
1714 button,
1715 input[type='submit'] {
1716         color: <?php echo $hyperlink_color; ?>;
1717 }
1718
1719 button:hover,
1720 input[type='submit']:hover,
1721 button:focus,
1722 input[type='submit']:focus {
1723         color: #d00;
1724 }
1725 button:active,
1726 input[type='submit']:active {
1727         color: #f00;
1728         transform: scale(0.9);
1729 }
1730 .button:visited {
1731         color: <?php echo $hyperlink_color; ?>;
1732 }
1733 .button:hover {
1734         color: #f00;
1735         text-decoration: none;
1736 }
1737 .button:active {
1738         transform: scale(0.9);
1739 }
1740 .button:focus:not(:hover) {
1741         transform: none;
1742 }
1743 @-moz-document url-prefix() {
1744         .button:active {
1745                 transform: none;
1746         }
1747 }
1748
1749 /*==========*/
1750 /* HEADINGS */
1751 /*==========*/
1752
1753 .body-text h1,
1754 .body-text h2,
1755 .body-text h4 {
1756         font-family: <?php echo $UI_font; ?>;
1757 }
1758 .body-text h3,
1759 .body-text h5,
1760 .body-text h6 {
1761         font-weight: 600;
1762 }
1763 .body-text h6 {
1764         color: #555;
1765 }
1766 .body-text h1 {
1767         border-bottom: 1px solid #aaa;
1768 }
1769
1770 /*========*/
1771 /* QUOTES */
1772 /*========*/
1773
1774 blockquote {
1775         border-left: 5px solid #ccc;
1776 }
1777
1778 /*========*/
1779 /* IMAGES */
1780 /*========*/
1781
1782 #content img,
1783 #content figure.image img {
1784         border: 1px solid #ccc;
1785 }
1786 #content figure img {
1787         border: 1px solid #000;
1788 }
1789 #content img[src$='.svg'],
1790 #content figure img[src$='.svg'] {
1791         border: none;
1792 }
1793 #content img[style^='float'] {
1794         border: 1px solid transparent;
1795 }
1796
1797 /*========*/
1798 /* TABLES */
1799 /*========*/
1800
1801 #content:not(.tag-index-page) .body-text table,
1802 #content:not(.tag-index-page) .body-text table th,
1803 #content:not(.tag-index-page) .body-text table td {
1804         border: 1px solid #bbb;
1805 }
1806
1807 /*======*/
1808 /* MISC */
1809 /*======*/
1810
1811 hr {
1812         border-bottom: 1px solid #999;
1813 }
1814
1815 code {
1816         background-color: #f6f6ff;
1817         border: 1px solid #ddf;
1818         border-radius: 4px;
1819 }
1820
1821 input[type='text'],
1822 input[type='search'],
1823 input[type='password'] {
1824         background-color: #fff;
1825         border: 1px solid #ddd;
1826         color: #000;
1827 }
1828 input[type='text']:focus,
1829 input[type='search']:focus,
1830 input[type='password']:focus {
1831         background-color: #ffd;
1832         border: 1px solid #bbb;
1833         box-shadow: 0 0 1px #bbb;
1834 }
1835
1836 select {
1837         color: #000;
1838 }
1839
1840 /*============*/
1841 /* ABOUT PAGE */
1842 /*============*/
1843
1844 .about-page mark {
1845         background-color: #e6e6e6;
1846         text-decoration: none;
1847         box-shadow:
1848                 0 -1px 0 0 #000 inset,
1849                 0 -3px 1px -2px #000 inset;
1850         padding: 0 1px;
1851 }
1852
1853 #content.about-page .accesskey-table {
1854         font-family: <?php echo $UI_font; ?>;
1855         border-color: #ddd;
1856 }
1857
1858 #content.about-page img {
1859         border: 1px solid #000;
1860 }
1861
1862 /*========================*/
1863 /* QUALIFIED HYPERLINKING */
1864 /*========================*/
1865
1866 #aux-about-link a {
1867         color: #777;
1868 }
1869 #aux-about-link a:hover {
1870         opacity: 1.0;
1871 }
1872
1873 .qualified-linking label {
1874         color: <?php echo $hyperlink_color; ?>;
1875 }
1876 .qualified-linking label:hover {
1877         text-shadow:
1878                 0 0 1px #fff,
1879                 0 0 3px #fff,
1880                 0 0 5px #00e;
1881 }
1882
1883 .qualified-linking-toolbar {
1884         border: 1px solid #000;
1885         background-color: #fff;
1886 }
1887 .qualified-linking-toolbar a {
1888         background-color: #eee;
1889         border: 1px solid #ccc;
1890         border-radius: 4px;
1891         padding: 2px 12px;
1892         white-space: nowrap;
1893 }
1894 .qualified-linking-toolbar a:visited {
1895         color: <?php echo $hyperlink_color; ?>;
1896 }
1897 .qualified-linking-toolbar a:hover {
1898         text-decoration: none;
1899         background-color: #ddd;
1900 }
1901 .qualified-linking label::after {
1902         background-color: #d8d8d8;
1903         opacity: 0.8;
1904 }
1905
1906 /*======*/
1907 /* MATH */
1908 /*======*/
1909
1910 .mathjax-block-container::-webkit-scrollbar {
1911         height: 12px;
1912         background-color: #f6f6ff;
1913         border-radius: 6px;
1914         border: 1px solid #ddf;
1915 }
1916 .mathjax-block-container::-webkit-scrollbar-thumb {
1917         background-color: #dde;
1918         border-radius: 6px;
1919         border: 1px solid #cce;
1920 }
1921 .mathjax-inline-container::-webkit-scrollbar {
1922         height: 8px;
1923         background-color: #f6f6ff;
1924         border-radius: 4px;
1925         border: 1px solid #ddf;
1926 }
1927 .mathjax-inline-container::-webkit-scrollbar-thumb {
1928         background-color: #dde;
1929         border-radius: 4px;
1930         border: 1px solid #cce;
1931 }
1932
1933 /*=================*/
1934 /* ALIGNMENT FORUM */
1935 /*=================*/
1936
1937 #content.alignment-forum-index-page::before {
1938         background-color: #f4f5ff;
1939 }
1940 #content.alignment-forum-index-page::after {
1941         font-family: "Concourse SmallCaps";
1942         font-weight: 600;
1943         background-color: #7f85b2;
1944         color: transparent;
1945         -webkit-background-clip: text;
1946         text-shadow:
1947                 rgba(255,255,255,0.5) 0px 3px 3px;
1948 }
1949 @media only screen and (hover: hover) {
1950         #content.alignment-forum-index-page h1.listing a:hover,
1951         #content.alignment-forum-index-page h1.listing a:focus {
1952                 background-color: rgba(244,245,255,0.85);
1953         }
1954 }
1955
1956 /*====================*/
1957 /* FOR NARROW SCREENS */
1958 /*====================*/
1959
1960 @media only screen and (max-width: 1440px) {
1961         #hns-date-picker {
1962                 background-color: #d8d8d8;
1963                 opacity: 1.0;
1964         }
1965         #hns-date-picker::before {
1966                 border: 1px solid #999;
1967                 border-width: 1px 0 1px 1px;
1968         }
1969 }
1970 @media only screen and (max-width: 1160px) {
1971         #theme-selector {
1972                 background-color: #d8d8d8;
1973                 box-shadow:
1974                         0 0 0 1px #999,
1975                         0 0 0 2px transparent;
1976         }
1977         #theme-selector:hover::after {
1978                 width: calc(6em - 9px);
1979                 height: calc(100% - 5px);
1980                 top: 3px;
1981                 left: 100%;
1982         }
1983         #text-size-adjustment-ui button {
1984                 background-color: #ddd;
1985         }
1986         #text-size-adjustment-ui button:hover {
1987                 background-color: #eee;
1988         }
1989         #theme-tweaker-toggle button {
1990                 background-color: #ddd;
1991         }
1992 }
1993 @media only screen and (max-width: 1080px) {
1994         #text-size-adjustment-ui button {
1995                 border: 1px solid #999;
1996                 padding: 0 0 0 1px;
1997                 border-radius: 50%;
1998                 box-shadow:
1999                         0 0 6px #999 inset,
2000                         0 0 0 1px transparent;
2001         }
2002         #theme-tweaker-toggle button {
2003                 border: 1px solid #999;
2004                 box-shadow:
2005                         0 0 10px #999 inset,
2006                         0 0 0 1px transparent;
2007                 border-radius: 50%;
2008                 transform: scale(0.8);
2009         }
2010 }
2011 @media only screen and (max-width: 1020px) {
2012         #quick-nav-ui a {
2013                 box-shadow:
2014                         0 0 0 1px #999,
2015                         0 0 0 2px transparent;
2016         }
2017         #new-comment-nav-ui .new-comments-count::before {
2018                 background-color: #d8d8d8;
2019                 box-shadow:
2020                         0 0 0 1px #999,
2021                         0 0 0 2px transparent;
2022                 border-radius: 8px;
2023         }
2024         #anti-kibitzer-toggle {
2025                 background-color: #d8d8d8;
2026                 box-shadow:
2027                         0 0 0 1px #999,
2028                         0 0 0 2px transparent;
2029                 border-radius: 6px;
2030                 overflow: hidden;
2031         }
2032 }
2033
2034 /*========*/
2035 /* MOBILE */
2036 /*========*/
2037
2038 /*******************************************************/
2039 @media not screen and (hover:hover) and (pointer:fine) {
2040 /*******************************************************/
2041         #ui-elements-container > div[id$='-ui-toggle'] button  {
2042                 color: #aaa;
2043                 text-shadow:
2044                         0 0 1px #fff,
2045                         0 0 3px #fff,
2046                         0 0 5px #fff,
2047                         0 0 10px #fff,
2048                         0 0 20px #fff,
2049                         0 0 30px #fff;
2050         }
2051
2052         #theme-selector {
2053                 background-color: #d8d8d8;
2054                 box-shadow:
2055                         0 0 0 1px #999,
2056                         0 0 1px 3px #fff,
2057                         0 0 3px 3px #fff,
2058                         0 0 5px 3px #fff,
2059                         0 0 10px 3px #fff,
2060                         0 0 20px 3px #fff;
2061                 border-radius: 12px;
2062         }
2063         #theme-selector::before,
2064         #theme-selector .theme-selector-close-button {
2065                 color: #000;
2066                 font-weight: normal;
2067         }
2068         #theme-selector button {
2069                 background-color: #e6e6e6;
2070                 border-radius: 10px;
2071         }
2072         #theme-selector button::after {
2073                 color: #444;
2074                 max-width: calc(100% - 3.5em);
2075                 overflow: hidden;
2076                 text-overflow: ellipsis;
2077                 padding-bottom: 1px;
2078         }
2079         #theme-selector button.selected::after {
2080                 color: #000;
2081                 text-shadow:
2082                         0 -1px 0 #fff,
2083                         0 0.5px 0.5px #000;
2084         }
2085
2086         #quick-nav-ui {
2087                 background-color: #fff;
2088         }
2089         #quick-nav-ui,
2090         #new-comment-nav-ui,
2091         #hns-date-picker {
2092                 box-shadow:
2093                         0 0 1px 3px #fff,
2094                         0 0 3px 3px #fff,
2095                         0 0 5px 3px #fff,
2096                         0 0 10px 3px #fff,
2097                         0 0 20px 3px #fff;
2098         }
2099         #quick-nav-ui a::after,
2100         #new-comment-nav-ui::before {
2101                 font-family: <?php echo $UI_font; ?>;
2102                 font-weight: bold;
2103                 box-shadow:
2104                         0 0 1px 0 #fff,
2105                         0 0 3px 0 #fff,
2106                         0 0 5px 0 #fff;
2107                 background-color: #fff;
2108                 border-radius: 4px;
2109         }
2110         #quick-nav-ui,
2111         #new-comment-nav-ui {
2112                 border-radius: 8px;
2113         }
2114         #new-comment-nav-ui {
2115                 background-color: #e4e4e4;
2116                 border: 1px solid #999;
2117         }
2118         #new-comment-nav-ui::before {
2119                 color: #777;
2120                 font-weight: bold;
2121         }
2122         #new-comment-nav-ui .new-comment-sequential-nav-button {
2123                 box-shadow: 0 0 0 1px #999;
2124                 color: #538d4d;
2125         }
2126         #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
2127                 color: #bbb;
2128         }
2129         #new-comment-nav-ui .new-comments-count {
2130                 background-color: inherit;
2131                 box-shadow: 0 -1px 0 0 #999;
2132         }
2133         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
2134                 border-radius: 7px 0 0 7px;
2135         }
2136         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
2137                 border-radius: 0 7px 7px 0;
2138         }
2139         #new-comment-nav-ui button::after {
2140                 font-family: <?php echo $UI_font; ?>;
2141         }
2142         #hns-date-picker {
2143                 background-color: #e4e4e4;
2144                 border: 1px solid #999;
2145         }
2146
2147         /*****************************************/
2148         @media only screen and (max-width: 900px) {
2149         /*****************************************/
2150                 h1.listing + .post-meta .post-section {
2151                         overflow: visible;
2152                         order: -2;
2153                         width: unset;
2154                 }
2155                 h1.listing + .post-meta .post-section::before {
2156                         position: unset;
2157                 }
2158
2159                 #primary-bar .nav-inner {
2160                         font-size: 1.25em;
2161                 }
2162                 .nav-bar-top:not(#primary-bar) .nav-inner {
2163                         font-size: 1.125em;
2164                 }
2165                 .nav-bar-top:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
2166                         padding: 6px 10px;
2167                 }
2168
2169                 .archive-nav *[class^='archive-nav-item-'] {
2170                         border-width: 1px !important;
2171                 }
2172                 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
2173                         background-color: #aaa;
2174                 }
2175
2176                 .comment-item .comment-item {
2177                         margin: 0.75em 0 3px 6px;
2178                 }
2179                 .comment-item .comment-item + .comment-item {
2180                         margin: 1.5em 0 3px 6px;
2181                 }
2182
2183                 .sublevel-nav:not(.sort) .sublevel-item,
2184                 .sublevel-nav:not(.sort) .sublevel-item:first-child,
2185                 .sublevel-nav:not(.sort) .sublevel-item:last-child {
2186                         border-radius: 8px;
2187                         border-width: 1px;
2188                         margin: 2px;
2189                 }
2190         /*******************************************/
2191         } @media only screen and (max-width: 720px) {
2192         /*******************************************/
2193                 .post-meta .comment-count::before {
2194                         font-family: inherit;
2195                         font-size: inherit;
2196                         margin: 0;
2197                 }
2198         /*******************************************/
2199         } @media only screen and (max-width: 520px) {
2200         /*******************************************/
2201                 #primary-bar.inactive-bar .nav-inner {
2202                         padding: 6px 10px;
2203                         font-size: 1.375em;
2204                 }
2205
2206                 h1.listing {
2207                         margin: 18px 6px 4px 6px;
2208                         max-width: calc(100% - 12px);
2209                         padding: 0;
2210                 }
2211                 h1.listing .link-post-link {
2212                         top: 2px;
2213                 }
2214                 h1.listing + .post-meta {
2215                         margin: 4px 6px;
2216                 }
2217                 h1.listing + .post-meta > *:not(.karma) {
2218                         line-height: 1.5;
2219                         width: unset;
2220                 }
2221                 h1.listing + .post-meta .karma-value {
2222                         top: 0;
2223                         right: calc(100% - 2.25em);
2224                 }
2225
2226                 #content.compact > .comment-thread .comment-item {
2227                         max-height: 104px;
2228                 }
2229
2230                 .textarea-container:focus-within textarea {
2231                         background-color: #fff;
2232                 }
2233                 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
2234                         padding: 6px;
2235                         font-weight: bold;
2236                 }
2237                 .textarea-container:focus-within .guiedit-mobile-help-button.active {
2238                         box-shadow:
2239                                 0 0 0 2px #c00;
2240                         color: #c00;
2241                 }
2242                 .textarea-container:focus-within .guiedit-buttons-container {
2243                         background-color: #fff;
2244                         border-top: 1px solid #ddf;
2245                 }
2246                 .posting-controls .textarea-container:focus-within .guiedit-buttons-container {
2247                         box-shadow: none;
2248                 }
2249                 #content.conversation-page .textarea-container:focus-within::after {
2250                         background-color: #fff;
2251                 }
2252                 .textarea-container:focus-within button.guiedit {
2253                         border: 1px solid #6a8a6b;
2254                         border-radius: 6px;
2255                 }
2256
2257                 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2258                         top: 1px;
2259                 }
2260                 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
2261                         top: 1px;
2262                 }
2263
2264                 #edit-post-form textarea {
2265                         min-height: calc(100vh - 345px);
2266                 }
2267         }
2268 }