www/theme-ultramodern.css.php

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