www/theme-rts.css.php

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