www/css/style-rts.mac.css

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