www/css/style-less.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 /*************/
1514 /* POST-META */
1515 /*************/
1516
1517 .post-meta {
1518         display: flex;
1519         flex-flow: row wrap;
1520         justify-content: center;
1521 }
1522 .post-meta .lw2-link {
1523         opacity: 0.5;
1524         order: 1;
1525 }
1526 .post-meta > *,
1527 .post-meta .post-section::before {
1528         margin: 0 0.5em;
1529 }
1530 .post-meta .post-section {
1531         order: -1;
1532         margin: 0;
1533         visibility: hidden;
1534 }
1535 .post-meta .post-section::before {
1536         visibility: visible;
1537         font-family: "Font Awesome";
1538         font-weight: 900;
1539 }
1540 .post-section.frontpage::before {
1541         content: "\F015";
1542 }
1543 .post-section.featured::before {
1544         content: "\F005";
1545 }
1546 .post-section.meta::before {
1547         content: "\F077";
1548 }
1549 .post-section.personal::before {
1550         content: "\F007";
1551 }
1552 .post-section.draft::before {
1553         content: "\F15B";
1554 }
1555 .post-section.alignment-forum::before {
1556         content: "AF";
1557         font-family: Concourse;
1558 }
1559
1560 /*= Karma controls hover tooltips =*/
1561
1562 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
1563         .post .karma,
1564         .comment-item .karma {
1565                 position: relative;
1566         }
1567         .post .karma.active-controls::after,
1568         .comment-item .karma.active-controls::after {
1569                 content: "Double-click for strong vote";
1570                 position: absolute;
1571                 pointer-events: none;
1572                 display: block;
1573                 left: 6px;
1574                 max-width: calc(100% - 12px);
1575                 line-height: 1.15;
1576                 white-space: normal;
1577                 text-align: center;
1578                 font-size: 0.875rem;
1579                 opacity: 0;
1580                 transition: opacity 0.2s ease;
1581         }
1582         .post .karma.active-controls:hover::after,
1583         .comment-item .karma.active-controls:hover::after {
1584                 opacity: 1.0;
1585         }
1586
1587         .post .karma .karma-value::after,
1588         .comment-item .karma .karma-value::after {
1589                 content: attr(title);
1590                 position: absolute;
1591                 pointer-events: none;
1592                 display: block;
1593                 left: 50%;
1594                 transform: translateX(-50%);
1595                 white-space: nowrap;
1596                 text-align: center;
1597                 font-size: 0.875rem;
1598                 color: #bbb;
1599                 opacity: 0;
1600                 transition: opacity 0.2s ease;
1601         }
1602         .post .karma .karma-value:hover::after,
1603         .comment-item .karma .karma-value:hover::after {
1604                 opacity: 1.0;
1605         }
1606         .comment-item .karma .karma-value:hover::after {
1607                 z-index: 5001;
1608         }
1609 }
1610
1611 /*********/
1612 /* POSTS */
1613 /*********/
1614
1615 .post {
1616         max-width: 100%;
1617 }
1618
1619 .post-body {
1620         min-height: 8em;
1621         padding: 0 30px;
1622         line-height: 1.5;
1623         font-size: 1.3rem;
1624         overflow: auto;
1625         margin: 0.5em 0 0 0;
1626 }
1627 h1.post-title {
1628         margin: 1.1em 0 0.35em 0;
1629         padding: 0 30px;
1630         text-align: center;
1631         font-size: 2.5em;
1632         line-height: 1;
1633 }
1634 .post .post-meta {
1635         text-align: center;
1636         position: relative;
1637         z-index: 2;
1638 }
1639 .post .top-post-meta:last-child {
1640         margin-bottom: 40px;
1641 }
1642 .post .bottom-post-meta {
1643         margin: 0;
1644         padding: 20px 0 22px 0;
1645 }
1646
1647 /**************/
1648 /* LINK POSTS */
1649 /**************/
1650
1651 .post.link-post > .post-body > p:first-child {
1652         text-align: center;
1653         font-size: 1.125em;
1654         margin: 0.5em 0 0 0;
1655 }
1656 .post.link-post > .post-body > p:only-child {
1657         font-size: 1.5em;
1658         margin: 1em 0;
1659 }
1660 .post.link-post a.link-post-link::before {
1661         content: "\F0C1";
1662         font-family: Font Awesome;
1663         font-weight: 900;
1664         font-size: 0.75em;
1665         position: relative;
1666         top: -2px;
1667         margin-right: 0.25em;
1668 }
1669
1670 /************/
1671 /* COMMENTS */
1672 /************/
1673
1674 .comments {
1675         max-width: 100%;
1676         padding: 0 0 1px 0;
1677         position: relative;
1678 }
1679 .comments::before {
1680         content: "";
1681         position: absolute;
1682         display: block;
1683         top: 0;
1684         left: 0;
1685         width: 100%;
1686         height: 100%;
1687         pointer-events: none;
1688 }
1689 ul.comment-thread {
1690         list-style-type: none;
1691         padding: 0;
1692         max-width: 100%;
1693 }
1694 .comments .comment-thread > li {
1695         position: relative;
1696 }
1697 #content > #top-nav-bar + .comment-thread .comment-item {
1698         margin-top: 0;
1699 }
1700
1701 .comment-item {
1702         margin: 2em 0 0 0;
1703 }
1704 .comment-item .comment-item {
1705         margin: 1em 8px 8px 16px;
1706 }
1707 .comment-item .comment-item + .comment-item {
1708         margin: 2em 8px 8px 16px;
1709 }
1710
1711 .comment-body {
1712         line-height: 1.45;
1713         font-size: 1.2rem;
1714         padding: 10px;
1715 }
1716 .comment-body ul {
1717         list-style-type: circle;
1718 }
1719 .comment-body > *:first-child {
1720         margin-top: 0;
1721 }
1722 .comment-body > *:last-child {
1723         margin-bottom: 0;
1724 }
1725
1726 .comments-empty-message {
1727         width: 100%;
1728         text-align: center;
1729         padding: 0.75em 0 0.9em 0;
1730         font-size: 1.375em;
1731 }
1732
1733 /**********************************/
1734 /* DEEP COMMENT THREAD COLLAPSING */
1735 /**********************************/
1736
1737 .comment-item input[id^="expand"] {
1738         display: none;
1739 }
1740 .comment-item input[id^="expand"] + label {
1741         display: block;
1742         visibility: hidden;
1743         position: relative;
1744         margin: 8px 9px;
1745 }
1746 .comment-item input[id^="expand"] + label::after {
1747         content: "(Expand " attr(data-child-count) "    below)";
1748         visibility: visible;
1749         position: absolute;
1750         left: 0;
1751         white-space: nowrap;
1752         cursor: pointer;
1753 }
1754 .comment-item input[id^="expand"]:checked + label::after {
1755         content: "(Collapse " attr(data-child-count) "  below)";
1756 }
1757 .comment-item input[id^="expand"] ~ .comment-thread {
1758         max-height: 34px;
1759         overflow: hidden;
1760 }
1761 .comment-item input[id^="expand"] ~ .comment-thread > li:first-child {
1762         margin-top: 0;
1763 }
1764 .comment-item input[id^="expand"]:checked ~ .comment-thread {
1765         max-height: 1000000px;
1766 }
1767
1768 .comment-item input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
1769         margin: 0;
1770 }
1771 .comment-item input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item a.comment-parent-link:hover::after {
1772         display: none;
1773 }
1774
1775 /****************/
1776 /* COMMENT-META */
1777 /****************/
1778
1779 .comment-meta {
1780         padding: 2px 24px 2px 10px;
1781         margin: 0 -1px;
1782         border: none;
1783         display: flex;
1784         flex-flow: row wrap;
1785         align-items: baseline;
1786 }
1787 .user-page .comment-meta,
1788 .conversation-page .comment-meta {
1789         padding-right: 10px;
1790 }
1791 .comment-meta .comment-post-title {
1792         flex-basis: 100%;
1793         overflow: hidden;
1794         text-overflow: ellipsis;
1795         line-height: 1.3;
1796 }
1797 .conversation-page .comment-meta .comment-post-title {
1798         margin: 0;
1799         flex-basis: unset;
1800         flex: 1 0 auto;
1801         text-align: right;
1802         display: none;  /* Not sure if we need to display this... */
1803 }
1804 .comment-item .author:not(.redacted).original-poster::after {
1805         content: "\2004(OP)";
1806         font-size: 0.75em;
1807 }
1808
1809 /*****************************/
1810 /* COMMENT THREAD NAVIGATION */
1811 /*****************************/
1812
1813 a.comment-parent-link:not(.inline-author),
1814 a.comment-parent-link.inline-author::before {
1815         opacity: 0.5;
1816 }
1817 a.comment-parent-link:hover {
1818         opacity: 1.0;
1819 }
1820 a.comment-parent-link::before {
1821         content: "\F062";
1822         font-family: "Font Awesome";
1823         font-weight: 900;
1824         font-size: 0.75rem;
1825         line-height: 1;
1826         position: absolute;
1827         z-index: 1;
1828         display: block;
1829         padding: 3px 3px 0 3px;
1830         width: 16px;
1831         height: calc(100% + 2px);
1832         top: -1px;
1833         left: -17px;
1834 }
1835 a.comment-parent-link::after {
1836         content: "";
1837         position: absolute;
1838         z-index: 0;
1839         display: block;
1840         width: calc(100% + 26px);
1841         height: calc(100% + 38px);
1842         top: -29px;
1843         left: -17px;
1844         pointer-events: none;
1845         overflow: hidden;
1846         visibility: hidden;
1847 }
1848 a.comment-parent-link:hover::after {
1849         visibility: visible;
1850 }
1851
1852 .comment-child-links {
1853         flex-basis: 100%;
1854 }
1855 .comment-child-link {
1856         margin: 0 0.25em;
1857         display: inline-block;
1858 }
1859 .comment-child-link::before {
1860         content: ">";
1861         display: inline-block;
1862         margin: 0 2px 0 0;
1863 }
1864
1865 .comment-popup {
1866         position: fixed;
1867         top: 10%;
1868         right: 10%;
1869         max-width: 700px;
1870         z-index: 10001;
1871         font-size: 1rem;
1872         white-space: unset;
1873         pointer-events: none;
1874 }
1875 .comment-popup .comment-parent-link {
1876         display: none;
1877 }
1878 .comment-popup .comment-body {
1879         font-size: 1.0625rem;
1880 }
1881
1882 /**********************/
1883 /* COMMENT PERMALINKS */
1884 /**********************/
1885 /********************/
1886 /* COMMENT LW LINKS */
1887 /********************/
1888
1889 .comment-meta .permalink::before,
1890 .comment-meta .lw2-link::before,
1891 .individual-thread-page a.comment-parent-link:empty::before {
1892         content: "";
1893         display: inline-block;
1894         width: 1rem;
1895         height: 1rem;
1896         border-radius: 3px;
1897         box-shadow:
1898                 0 0 0 1px #fff,
1899                 0 0 0 2px #00e,
1900                 0 0 0 3px transparent;
1901         padding: 0 0 0 2px;
1902         background-size: 100%;
1903         position: relative;
1904         top: 2px;
1905         opacity: 0.5;
1906 }
1907 .comment-meta .permalink::before {
1908         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');
1909 }
1910 .comment-meta .lw2-link::before {
1911         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==');
1912 }
1913 .individual-thread-page a.comment-parent-link:empty::before {
1914         left: unset;
1915         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==');
1916 }
1917 .comment-meta .permalink:hover::before {
1918         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');
1919 }
1920 .comment-meta .lw2-link:hover::before {
1921         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==');
1922 }
1923 .individual-thread-page a.comment-parent-link:empty:hover::before {
1924         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=');
1925 }
1926 .comment-meta .permalink:hover::before,
1927 .comment-meta .lw2-link:hover::before,
1928 .individual-thread-page a.comment-parent-link:empty:hover::before {
1929         box-shadow:
1930                 0 0 0 2px #00e,
1931                 0 0 0 3px transparent;
1932         opacity: 1.0;
1933         filter: unset;
1934 }
1935 .comment-meta .permalink:active::before,
1936 .comment-meta .lw2-link:active::before,
1937 .individual-thread-page a.comment-parent-link:empty:active::before {
1938         transform: scale(0.9);
1939 }
1940
1941 .comment-meta .permalink,
1942 .comment-meta .lw2-link,
1943 .individual-thread-page .comment-parent-link:empty {
1944         position: relative;
1945         opacity: 1.0;
1946 }
1947 .comment-meta .permalink::after,
1948 .comment-meta .lw2-link::after,
1949 .individual-thread-page .comment-parent-link:empty::after {
1950         content: "";
1951         width: 30px;
1952         height: 30px;
1953         display: block;
1954         position: absolute;
1955         top: -2px;
1956         left: -7px;
1957         box-shadow: none;
1958         pointer-events: auto;
1959         visibility: visible;
1960 }
1961
1962 /*************************/
1963 /* COMMENTS COMPACT VIEW */
1964 /*************************/
1965
1966 #comments-list-mode-selector,
1967 #content.index-page #comments-list-mode-selector,
1968 #content.user-page #comments-list-mode-selector {
1969         padding-top: 6px;
1970         grid-column: 1;
1971         position: unset;
1972         z-index: 1;
1973         justify-self: start;
1974         align-self: start;
1975 }
1976 #comments-list-mode-selector button {
1977         color: transparent;
1978         width: 32px;
1979         height: 32px;
1980         padding: 6px;
1981         margin: 1px;
1982         overflow: hidden;
1983         background-repeat: no-repeat;
1984         background-size: 100%;
1985         background-origin: content-box;
1986 }
1987 #comments-list-mode-selector button:disabled {
1988         cursor: auto;
1989 }
1990 #comments-list-mode-selector button.expanded {
1991         background-image: url('data:image/gif;base64,R0lGODdhKAAoAJEAAAAAAKqqqv///wAAACH5BAkAAAMALAAAAAAoACgAAAJTnI+py+0Po5wn2Iuz3lrxD25eSIJjiWZnyq4s6r5kLJtJndK4eO9z77NRhsSi8YhMKpfMpvMJjTqDIR3VYr1mqdtg1/fdhXHjWll2fqVb0rY7WQAAOw==');
1992 }
1993 #comments-list-mode-selector button.compact {
1994         background-image: url('data:image/gif;base64,R0lGODdhKAAoAJEAAAAAAKqqqv///wAAACH5BAkAAAMALAAAAAAoACgAAAJXnI+py+0Po5y0uoCz3rxz5YViB46mWJ7qlq5u66rWTNf2fcQxrI98H/oBSYnhSWjU4JbMJi7pK0KD0ikRYfUgp1uo8wsOM7LXHJlVPWO6SbbRPRTL57gCADs=');
1995 }
1996 @media only screen and (max-resolution: 1dppx) {
1997         #comments-list-mode-selector button.expanded {
1998                 background-image: url('data:image/gif;base64,R0lGODdhFAAUAKIAAAAAAKampqqqqv///wAAAAAAAAAAAAAAACH5BAkAAAQALAAAAAAUABQAAAMmSLrc/tCJSasV7Gqat+6eBYbcQopRqq5s257VeMokHdoevrm8mgAAOw==');
1999         }
2000         #comments-list-mode-selector button.compact {
2001                 background-image: url('data:image/gif;base64,R0lGODdhFAAUAKIAAAAAAKqqqtvb2////wAAAAAAAAAAAAAAACH5BAkAAAQALAAAAAAUABQAAAMmSLrc/tCFSasN7Gqat45g433LeHUmF65phbZvurLtFJv3OO98zyQAOw==');
2002         }
2003 }
2004
2005 #content > ul.comment-thread > li.comment-item,
2006 #content.compact > ul.comment-thread > li.comment-item {
2007         margin: 0;
2008 }
2009
2010 #content > .comment-thread {
2011         margin: 1em 0;
2012 }
2013 #content.compact > .comment-thread {
2014         font-size: 0.9375rem;
2015         margin: 0.5em 0;
2016 }
2017 #content.compact > .comment-thread:hover {
2018         z-index: 1;
2019 }
2020 #content.compact > .comment-thread .comment-body {
2021         font-size: 1.0625rem;
2022 }
2023 #content.compact > .comment-thread .comment-item {
2024         max-height: 61px;
2025         margin-top: 1em;
2026         overflow: hidden;
2027         position: relative;
2028         pointer-events: none;
2029 }
2030 #content.compact > .comment-thread .comment-item::after {
2031         content: "…";
2032         position: absolute;
2033         right: 0;
2034         bottom: 0;
2035         font-size: 2rem;
2036         line-height: 1;
2037         padding: 0 16px 10px 64px;
2038         pointer-events: auto;
2039 }
2040 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
2041         #content.compact:not(:focus-within) > .comment-thread .comment-item:hover,
2042         #content.compact > .comment-thread .comment-item.expanded {
2043                 overflow: visible;
2044                 pointer-events: auto;
2045                 z-index: 10;
2046         }
2047 }
2048 @media only screen and (hover: none), only screen and (-moz-touch-enabled) {
2049         #content.compact > .comment-thread.expanded .comment-item {
2050                 overflow: visible;
2051                 pointer-events: auto;
2052                 z-index: 10;
2053         }
2054 }
2055 #content.compact > .comment-thread .comment-item .comment-meta {
2056         white-space: nowrap;
2057         overflow: hidden;
2058         text-overflow: ellipsis;
2059         padding: 2px 10px;
2060 }
2061 #content.compact > .comment-thread .comment-item:hover .comment-meta {
2062         white-space: unset;
2063 }
2064 #content.compact > .comment-thread .comment-item .comment-meta a {
2065         pointer-events: auto;
2066 }
2067 #content.compact > .comment-thread .comment-item .comment-meta .comment-post-title {
2068         display: inline;
2069 }
2070 #content.compact > .comment-thread .comment-item .comment-meta .karma + .comment-post-title {
2071         margin-left: 0.75em;
2072 }
2073 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
2074         #content.compact > .comment-thread:last-of-type .comment-item:hover,
2075         #content.compact > .comment-thread:last-of-type .comment-item.expanded {
2076                 max-height: unset;
2077         }
2078         #content.compact > .comment-thread .comment-item:hover .comment,
2079         #content.compact > .comment-thread .comment-item.expanded .comment {
2080                 position: relative;
2081                 z-index: 1;
2082                 margin-bottom: 2em;
2083                 bottom: 0;
2084         }
2085         #content.compact > .comment-thread .comment-item:hover .comment::before,
2086         #content.compact > .comment-thread .comment-item.expanded .comment::before{
2087                 content: "";
2088                 position: absolute;
2089                 display: block;
2090                 width: calc(100% + 20px);
2091                 height: calc(100% + 20px);
2092                 z-index: -1;
2093                 top: -10px;
2094                 left: -10px;
2095         }
2096         #content.compact > .comment-thread:last-of-type .comment-item:hover .comment,
2097         #content.compact > .comment-thread:last-of-type .comment-item.expanded .comment{
2098                 margin: 0;
2099         }
2100 }
2101 @media only screen and (hover: none), only screen and (-moz-touch-enabled) {
2102         #content.compact > .comment-thread.expanded:last-of-type .comment-item {
2103                 max-height: unset;
2104         }
2105         #content.compact > .comment-thread.expanded .comment-item .comment {
2106                 position: relative;
2107                 z-index: 1;
2108                 margin-bottom: 2em;
2109                 bottom: 0;
2110         }
2111         #content.compact > .comment-thread.expanded .comment-item .comment::before {
2112                 content: "";
2113                 position: absolute;
2114                 display: block;
2115                 width: calc(100% + 14px);
2116                 height: calc(100% + 20px);
2117                 z-index: -1;
2118                 top: -10px;
2119                 left: -10px;
2120         }
2121         #content.compact > .comment-thread.expanded:last-of-type .comment-item .comment {
2122                 margin: 0;
2123         }
2124         #content.compact > .comment-thread.expanded .comment-item .comment::after {
2125                 content: "";
2126                 display: block;
2127                 position: fixed;
2128                 top: 0;
2129                 left: 0;
2130                 width: 100%;
2131                 height: 100%;
2132                 z-index: -2;
2133                 background-color: rgba(0,0,0,0.5);
2134         }
2135 }
2136
2137 /*****************************/
2138 /* HIGHLIGHTING NEW COMMENTS */
2139 /*****************************/
2140
2141 .new-comment::before {
2142         content: "";
2143         position: absolute;
2144         width: 100%;
2145         height: 100%;
2146         z-index: 5000;
2147         pointer-events: none;
2148 }
2149
2150 /***********************************/
2151 /* COMMENT THREAD MINIMIZE BUTTONS */
2152 /***********************************/
2153
2154 .comment-minimize-button {
2155         font-family: Font Awesome;
2156         font-weight: 900;
2157         font-size: 1.25rem;
2158         line-height: 1;
2159         position: absolute;
2160         right: 1px;
2161         top: 1px;
2162         width: 18px;
2163         margin: 0;
2164         cursor: pointer;
2165 }
2166 .comment-minimize-button:active {
2167         transform: scale(0.9);
2168 }
2169 .comment-minimize-button::after {
2170         content: attr(data-child-count);
2171         font-weight: normal;
2172         font-size: 0.8125rem;
2173         position: absolute;
2174         left: 0;
2175         width: 100%;
2176         text-align: center;
2177         top: 21px;
2178 }
2179 #content.individual-thread-page .comment-minimize-button {
2180         display: none;
2181 }
2182
2183 /***********************************/
2184 /* INDIVIDUAL COMMENT THREAD PAGES */
2185 /***********************************/
2186
2187 .individual-thread-page > h1 {
2188         line-height: 1;
2189         margin: 0.75em 0 3px 0;
2190 }
2191 .individual-thread-page .comments {
2192         border: none;
2193 }
2194
2195 /****************/
2196 /* VOTE BUTTONS */
2197 /****************/
2198
2199 .vote {
2200         margin: 0;
2201 }
2202 .vote {
2203         font-family: Font Awesome;
2204         font-weight: 900;
2205         border: none;
2206 }
2207 .karma.waiting {
2208         opacity: 0.5;
2209 }
2210 .karma.waiting button {
2211         pointer-events: none;
2212 }
2213
2214 /* Replicated karma controls at bottom of comments. */
2215 .comment-controls .karma {
2216         float: left;
2217         margin-left: -14px;
2218         font-size: 0.9375em;
2219 }
2220
2221 /*****************************/
2222 /* COMMENTING AND POSTING UI */
2223 /*****************************/
2224
2225 .comment-controls {
2226         text-align: right;
2227         margin: 0 8px 8px 16px;
2228         position: relative;
2229         z-index: 9999;
2230 }
2231 .comment-thread .comment-controls + .comment-thread > li:first-child {
2232         margin-top: 8px;
2233 }
2234 .comments > .comment-controls {
2235         margin: 8px 0 0 0;
2236 }
2237 .comments > .comment-controls:last-child {
2238         margin: 8px 0 16px 0;
2239 }
2240
2241 .posting-controls input[type='submit'] {
2242         margin: 6px;
2243         padding: 4px 10px;
2244         font-size: 1.125rem;
2245 }
2246
2247 .comment-controls .cancel-comment-button {
2248         position: absolute;
2249         right: 0;
2250         margin: 0;
2251         height: 27px;
2252         font-size: inherit;
2253         padding: 4px 8px 2px 4px;
2254         z-index: 1;
2255 }
2256 .comment-controls .cancel-comment-button::before {
2257         font-family: Font Awesome;
2258         margin-right: 3px;
2259         content: '\F00D';
2260         font-weight: 900;
2261         font-size: 0.9em;
2262         opacity: 0.7;
2263 }
2264
2265 .comment + .comment-controls .action-button {
2266         font-weight: normal;
2267         font-size: 1.0625em;
2268         padding: 1px 6px;
2269 }
2270 .comment-controls .action-button::before {
2271         font-family: Font Awesome;
2272         margin-right: 3px;
2273 }
2274 .new-comment-button {
2275         font-size: 1.5rem;
2276         margin: 0 0.25em;
2277 }
2278 .comment-controls .reply-button::before {
2279         content: '\F3E5';
2280         font-weight: 900;
2281         font-size: 0.9em;
2282         opacity: 0.6;
2283 }
2284
2285 .post-controls {
2286         text-align: right;
2287         margin: 0.75em 0 0 0;
2288         grid-row: 3;
2289         align-self: start;
2290         justify-self: end;
2291 }
2292 .post {
2293         grid-row: 3;
2294 }
2295 .edit-post-link {
2296         display: inline-block;
2297         margin-bottom: 0.25em;
2298         font-size: 1.125rem;
2299 }
2300 .edit-post-link::before {
2301         margin-right: 0.3em;
2302 }
2303 .comment-controls .edit-button::before,
2304 .edit-post-link::before {
2305         content: '\F303';
2306         font-family: "Font Awesome";
2307         font-weight: 900;
2308         font-size: 0.75em;
2309         position: relative;
2310         top: -1px;
2311 }
2312
2313 .comment-controls .delete-button {
2314         margin-right: 0.25em;
2315 }
2316 .comment-controls .edit-button,
2317 .comment-controls .retract-button,
2318 .comment-controls .unretract-button {
2319         margin-right: 1em;
2320 }
2321 .comment-controls .retract-button::before {
2322         content: '\F4B3';
2323         opacity: 0.6;
2324 }
2325 .comment-controls .unretract-button::before {
2326         content: '\F075';
2327         opacity: 0.9;
2328 }
2329 .comment-controls .delete-button::before {
2330         content: '\F05E';
2331         opacity: 0.7;
2332 }
2333 .comment-controls .retract-button::before,
2334 .comment-controls .unretract-button::before,
2335 .comment-controls .delete-button::before {
2336         font-weight: 900;
2337         font-size: 0.9em;
2338 }
2339
2340 .comment-controls form {
2341         position: relative;
2342 }
2343 .textarea-container {
2344         position: relative;
2345 }
2346 .posting-controls textarea {
2347         display: block;
2348         width: 100%;
2349         height: 15em;
2350         min-height: 15em;
2351         max-height: calc(100vh - 6em);
2352         margin: 2px 0 0 0;
2353         padding: 4px 5px;
2354         font-size: 1.2rem;
2355         border-style: solid;
2356         border-width: 29px 1px 1px 1px;
2357         resize: none;
2358 }
2359
2360 /* GUIEdit buttons */
2361
2362 .guiedit-buttons-container {
2363         position: absolute;
2364         left: 1px;
2365         top: 1px;
2366         width: calc(100% - 2px);
2367         height: 28px;
2368         text-align: left;
2369         padding: 1px 4px 0 4px;
2370         overflow: hidden;
2371 }
2372 .comment-thread-page .guiedit-buttons-container {
2373         padding-right: 60px;
2374 }
2375 .guiedit-buttons-container button {
2376         height: 26px;
2377         padding: 0 7px;
2378         font-weight: 900;
2379         font-size: 0.875rem;
2380         line-height: 1;
2381         position: static;
2382 }
2383 .guiedit-buttons-container button:active {
2384         transform: none;
2385 }
2386 .guiedit-buttons-container button:active div {
2387         transform: scale(0.9);
2388 }
2389 .guiedit-buttons-container button sup {
2390         font-weight: bold;
2391 }
2392 .guiedit::after {
2393         content: attr(data-tooltip);
2394         position: absolute;
2395         font-weight: normal;
2396         font-size: 1rem;
2397         top: 2px;
2398         left: 464px;
2399         height: 25px;
2400         padding: 4px 0;
2401         white-space: nowrap;
2402         visibility: hidden;
2403 }
2404 .guiedit:hover::after {
2405         visibility: visible;
2406 }
2407
2408 /* Markdown hints */
2409
2410 .posting-controls .markdown-reference-link {
2411         float: left;
2412         padding: 1px 0 0 6px;
2413 }
2414 .posting-controls .markdown-reference-link a {
2415         padding-right: 1.5em;
2416         margin-right: 0.15em;
2417         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');
2418         background-size: 1.25em;
2419         background-repeat: no-repeat;
2420         background-position: right center;
2421 }
2422
2423 #markdown-hints-checkbox + label {
2424         float: left;
2425         margin: 2px 0 0 1em;
2426         line-height: 1.3;
2427         cursor: pointer;
2428 }
2429 #edit-post-form #markdown-hints-checkbox + label {
2430         padding: 0;
2431 }
2432 #markdown-hints-checkbox {
2433         visibility: hidden;
2434         float: left;
2435 }
2436 #markdown-hints-checkbox + label::after {
2437         content: "(Show Markdown help)";
2438 }
2439 #markdown-hints-checkbox:checked + label::after {
2440         content: "(Hide Markdown help)";
2441 }
2442 #markdown-hints-checkbox + label::before {
2443         content: '\F059';
2444         font-family: Font Awesome;
2445         font-weight: 900;
2446         margin-right: 3px;
2447 }
2448 #markdown-hints-checkbox:checked + label::before {
2449         font-weight: normal;
2450 }
2451 #markdown-hints {
2452         margin: 4px 0 0 4px;
2453         padding: 4px 8px;
2454         position: absolute;
2455         text-align: left;
2456         top: calc(100% - 1em);
2457         z-index: 1;
2458         display: none;
2459 }
2460 .comment-controls #markdown-hints {
2461         top: calc(100% + 1.75em);
2462 }
2463 #markdown-hints-checkbox:checked ~ #markdown-hints {
2464         display: table;
2465 }
2466 .markdown-hints-row {
2467         display: table-row;
2468 }
2469 #markdown-hints .markdown-hints-row span,
2470 #markdown-hints .markdown-hints-row code {
2471         float: none;
2472         display: table-cell;
2473         border: none;
2474         background-color: inherit;
2475         padding: 0 12px 0 0;
2476 }
2477
2478 /******************/
2479 /* EDIT POST FORM */
2480 /******************/
2481
2482 #edit-post-form {
2483         padding: 1em 1em 4em 1em;
2484 }
2485 #edit-post-form .post-meta-fields {
2486         display: grid;
2487         grid-template-columns: 5em auto auto auto 1fr auto;
2488         margin-bottom: 0.625em;
2489 }
2490
2491 #edit-post-form label[for='title'],
2492 #edit-post-form label[for='url'],
2493 #edit-post-form label[for='section'] {
2494         grid-column: 1;
2495 }
2496 #edit-post-form input[type='text'] {
2497         padding: 0.25em;
2498         grid-column: 2 / span 4;
2499         margin-bottom: 0.5em;
2500 }
2501
2502 #edit-post-form .link-post-checkbox,
2503 #edit-post-form .link-post-checkbox + label {
2504         grid-row: 1;
2505         grid-column: 6;
2506 }
2507 #edit-post-form .question-checkbox,
2508 #edit-post-form .question-checkbox + label {
2509         grid-row: 3;
2510         grid-column: 5;
2511         justify-self: start;
2512         margin-left: 1.5em;
2513 }
2514
2515 #edit-post-form .post-meta-fields input[type='checkbox'] {
2516         height: 0;
2517         opacity: 0;
2518         pointer-events: none;
2519 }
2520 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2521         white-space: nowrap;
2522         position: relative;
2523         cursor: pointer;
2524         padding: 0.25em 0.5em 0.25em calc(20px + 0.25em + 0.3725em);
2525         align-self: start;
2526 }
2527 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
2528         content: "";
2529         font-family: Font Awesome;
2530         font-size: 1.375rem;
2531         line-height: 0.7;
2532         text-indent: 1px;
2533         font-weight: 900;
2534         position: absolute;
2535         width: 20px;
2536         height: 20px;
2537         left: 5px;
2538 }
2539 #edit-post-form label[for='url'],
2540 #edit-post-form input[name='url'] {
2541         display: none;
2542 }
2543 #edit-post-form .link-post-checkbox:checked ~ label[for='url'],
2544 #edit-post-form .link-post-checkbox:checked ~ input[name='url'] {
2545         display: initial;
2546 }
2547 #edit-post-form label {
2548         line-height: normal;
2549         border: 1px solid transparent;
2550         text-align: right;
2551     padding: 0.25em 0.5em;
2552     white-space: nowrap;
2553 }
2554 #edit-post-form input[type='radio'] {
2555         width: 0;
2556         margin: 0;
2557         opacity: 0;
2558         pointer-events: none;
2559 }
2560 #edit-post-form input[type='radio'] + label {
2561         padding: 4px 12px;
2562         text-align: center;
2563         border-style: solid;
2564         border-width: 1px 1px 1px 0;
2565         cursor: pointer;
2566 }
2567 #edit-post-form input[type='radio']:checked + label {
2568         cursor: default;
2569 }
2570
2571 #edit-post-form label[for='section'] {
2572         grid-row: 3;
2573 }
2574 #edit-post-form input[type='radio'] + label {
2575         grid-row: 3;
2576 }
2577 @supports (width: -moz-fit-content) {
2578         #edit-post-form input[type='radio'] + label {
2579                 width: -moz-fit-content;
2580         }
2581 }
2582 @supports (width: fit-content) {
2583         #edit-post-form input[type='radio'] + label {
2584                 width: fit-content;
2585         }
2586 }
2587
2588 #edit-post-form textarea {
2589         min-height: 24em;
2590 }
2591
2592 #edit-post-form input[type='submit'] {
2593         padding: 6px 12px;
2594         float: right;
2595 }
2596 #edit-post-form #markdown-hints {
2597         top: calc(100% + 2em);
2598 }
2599
2600 #edit-post-form button.guiedit div {
2601         overflow: visible;
2602 }
2603 .guiedit-mobile-auxiliary-button {
2604         display: none;
2605 }
2606
2607 /***********/
2608 /* BUTTONS */
2609 /***********/
2610
2611 button,
2612 input[type='submit'] {
2613         font-family: inherit;
2614         font-size: inherit;
2615         background-color: inherit;
2616         cursor: pointer;
2617         border: none;
2618         border-radius: 0;
2619 }
2620
2621 /************/
2622 /* HEADINGS */
2623 /************/
2624
2625 .post-body h1,
2626 .post-body h2,
2627 .post-body h3,
2628 .post-body h4,
2629 .post-body h5,
2630 .post-body h6,
2631 .comment-body h1,
2632 .comment-body h2,
2633 .comment-body h3,
2634 .comment-body h4,
2635 .comment-body h5,
2636 .comment-body h6 {
2637         line-height: 1.1;
2638         margin: 1em 0 0.75em 0;
2639         text-align: left;
2640 }
2641
2642 .post-body h5,
2643 .post-body h6,
2644 .comment-body h5,
2645 .comment-body h6 {
2646         font-size: 1em;
2647 }
2648 .post-body h4,
2649 .comment-body h4 {
2650         font-size: 1.2em;
2651 }
2652 .post-body h3,
2653 .comment-body h3 {
2654         font-size: 1.4em;
2655 }
2656 .post-body h2,
2657 .comment-body h2 {
2658         font-size: 1.75em;
2659 }
2660 .post-body h1,
2661 .comment-body h1 {
2662         font-size: 2.1em;
2663 }
2664
2665 /**********/
2666 /* QUOTES */
2667 /**********/
2668
2669 blockquote,
2670 .post-body .comment-box .comment-body {
2671         font-size: 0.9em;
2672         margin: 1em 0;
2673         padding-left: 0.5em;
2674         margin-left: 1px;
2675         padding-bottom: 3px;
2676 }
2677 blockquote *:first-child {
2678         margin-top: 0;
2679 }
2680 blockquote *:last-child {
2681         margin-bottom: 0;
2682 }
2683 blockquote blockquote {
2684         font-size: 0.95em;
2685 }
2686
2687 /* Pseudo-blockquotes that LW sometimes uses for some reason */
2688
2689 .post-body .comment-box .user-name {
2690         font-style: italic;
2691 }
2692 .post-body .comment-box .user-name::after {
2693         content: ":";
2694 }
2695 .post-body .comment-box {
2696         zoom: 1.25;
2697 }
2698
2699 /**********/
2700 /* IMAGES */
2701 /**********/
2702
2703 #content img {
2704         max-width: 100%;
2705 }
2706
2707 img.inline-latex {
2708         position: relative;
2709         top: 2.5px;
2710         margin: 0 2px;
2711 }
2712
2713 #content figure {
2714         text-align: center;
2715         margin: 1.5em auto;
2716 }
2717
2718 p.imgonly,
2719 div.imgonly {
2720         text-align: center;
2721 }
2722
2723 /**********/
2724 /* TABLES */
2725 /**********/
2726
2727 .post-body table,
2728 .comment-body table {
2729         border-collapse: collapse;
2730         font-family: Inconsolata, Menlo, monospace;
2731         font-size: 0.875em;
2732 }
2733 .post-body table th,
2734 .post-body table td,
2735 .comment-body table th,
2736 .comment-body table td {
2737         text-align: left;
2738         padding: 4px 6px;
2739         line-height: 1.3;
2740 }
2741 .post-body table td:nth-of-type(n+2),
2742 .comment-body table td:nth-of-type(n+2) {
2743         text-align: right;
2744 }
2745 .post-body table caption,
2746 .comment-body table caption {
2747         margin: 0 0 0.25em 0;
2748         font-weight: bold;
2749         font-size: 1.125em;
2750 }
2751
2752 /********/
2753 /* MISC */
2754 /********/
2755
2756 /*= Superscripts & subscripts =*/
2757
2758 /*      Make sure superscripts and subscripts do not affect line spacing. */
2759 sup, sub {
2760         vertical-align: baseline;
2761         position: relative;
2762         top: -0.5em;
2763         left: 0.05em;
2764         font-size: 0.8em;
2765 }
2766 sub {
2767         top: 0.3em;
2768 }
2769
2770 /*= Code blocks & other "unstyled" text. =*/
2771
2772 pre,
2773 code {
2774         font-family: Inconsolata, Menlo, monospace;
2775 }
2776 pre {
2777         white-space: pre-wrap;
2778 }
2779 code {
2780         font-size: 0.95em;
2781         display: inline-block;
2782         padding: 0 4px 1px 5px;
2783 }
2784 pre > code {
2785         display: block;
2786         border-radius: 0;
2787         padding: 3px 4px 5px 8px;
2788 }
2789
2790 /*= Fractions =*/
2791
2792 .frac::after {
2793         content: "\200B";
2794 }
2795
2796 /*= Removing browser default styling of various elements =*/
2797
2798 /*      On various input elements such as text fields and buttons, remove "blue glow" focus outlines on Macs, dotted black outlines in Firefox, etc. */
2799 :focus {
2800         outline: none;
2801 }
2802
2803 /*      Remove "embossed" appearance of horizontal rules. */
2804 hr {
2805         border: none;
2806 }
2807
2808 input,
2809 button,
2810 textarea {
2811         -webkit-appearance: none;
2812         -moz-appearance: none;
2813         appearance: none;
2814 }
2815
2816 input {
2817         font-family: inherit;
2818         font-size: inherit;
2819         font-weight: inherit;
2820 }
2821
2822 /*************/
2823 /* FOOTNOTES */
2824 /*************/
2825
2826 ol {
2827         counter-reset: ordered-list;
2828 }
2829 .footnote-definition {
2830         font-size: 0.9em;
2831         list-style-type: none;
2832         counter-increment: ordered-list;
2833         position: relative;
2834 }
2835 .footnote-definition p {
2836         font-size: inherit !important;
2837 }
2838 .footnote-definition::before {
2839         content: counter(ordered-list) ".";
2840         position: absolute;
2841         left: -2.5em;
2842         font-weight: bold;
2843         text-align: right;
2844         width: 2em;
2845 }
2846
2847 /*********/
2848 /* LISTS */
2849 /*********/
2850
2851 li {
2852         margin-bottom: 0.5em;
2853 }
2854
2855 .post-body ol p,
2856 .post-body ul p,
2857 .comment-body ol p,
2858 .comment-body ul p {
2859         margin: 0.5em 0;
2860 }
2861
2862 .post-body ol {
2863         list-style: none;
2864         padding: 0;
2865         counter-reset: ol;
2866 }
2867 .post-body ol > li {
2868         position: relative;
2869         counter-increment: ol;
2870         padding: 0 0 0 2.5em;
2871         margin: 0.25em 0 0 0;
2872 }
2873 .post-body ol > li::before {
2874         content: counter(ol) ".";
2875         position: absolute;
2876         width: 2em;
2877         text-align: right;
2878         left: 0;
2879 }
2880 .post-body ul {
2881         list-style: none;
2882         padding: 0;
2883 }
2884 .post-body ul:not(.contents-list) li {
2885         position: relative;
2886         padding: 0 0 0 2.5em;
2887         margin: 0.25em 0 0 0;
2888 }
2889 .post-body ul:not(.contents-list) li::before {
2890         content: "•";
2891         position: absolute;
2892         width: 2em;
2893         text-align: right;
2894         left: 0;
2895 }
2896 .post-body li > ul:first-child > li {
2897         padding-left: 0;
2898 }
2899 .post-body li > ul:first-child > li::before {
2900         content: none;
2901 }
2902
2903 /**************/
2904 /* ABOUT PAGE */
2905 /**************/
2906
2907 #content.about-page .contents {
2908         margin-top: 0.25em;
2909 }
2910 #content.about-page .accesskey-table {
2911         border-collapse: collapse;
2912         margin: auto;
2913 }
2914 #content.about-page .accesskey-table th,
2915 #content.about-page .accesskey-table td {
2916         padding: 2px 6px;
2917 }
2918 #content.about-page .accesskey-table td:first-child {
2919         padding-right: 1.5em;
2920 }
2921 #content.about-page .accesskey-table td:last-child {
2922         text-align: center;
2923         font-family: Inconsolata, Menlo, monospace;
2924 }
2925 #content.about-page h3:nth-of-type(n+2) {
2926         clear: both;
2927 }
2928
2929 /******************/
2930 /* IMAGES OVERLAY */
2931 /******************/
2932
2933 #images-overlay + #content .post-body img {
2934         visibility: hidden;
2935 }
2936
2937 #images-overlay div {
2938         position: absolute;
2939 }
2940 #images-overlay div::after {
2941         content: "Click to enlarge";
2942         display: block;
2943         position: absolute;
2944         margin: auto;
2945         left: 0;
2946         right: 0;
2947         bottom: 10px;
2948         padding: 6px 10px;
2949         font-size: 1.25rem;
2950         background-color: rgba(0,0,0,0.6);
2951         color: #fff;
2952         border-radius: 5px;
2953         opacity: 0.0;
2954         transition: opacity 0.15s ease;
2955         pointer-events: none;
2956 }
2957 @supports (width: -moz-fit-content) {
2958         #images-overlay div::after {
2959                 width: -moz-fit-content;
2960         }
2961 }
2962 @supports (width: fit-content) {
2963         #images-overlay div::after {
2964                 width: fit-content;
2965         }
2966 }
2967 #images-overlay div:hover::after {
2968         opacity: 1.0;
2969 }
2970
2971 #images-overlay img {
2972         width: 100%;
2973 }
2974
2975 /***************/
2976 /* IMAGE FOCUS */
2977 /***************/
2978
2979 #content img:hover,
2980 #images-overlay img:hover {
2981         filter: drop-shadow(0 0 3px #777);
2982         cursor: zoom-in;
2983 }
2984 #content img:active,
2985 #images-overlay img:active {
2986         transform: scale(0.975);
2987 }
2988
2989 #image-focus-overlay {
2990         position: fixed;
2991         top: 0;
2992         right: 0;
2993         bottom: 0;
2994         left: 0;
2995         display: none;
2996         cursor: zoom-out;
2997 }
2998 #image-focus-overlay::before {
2999         content: "";
3000         display: block;
3001         position: absolute;
3002         top: 0;
3003         right: 0;
3004         bottom: 0;
3005         left: 0;
3006         background-color: #000;
3007         opacity: 0.5;
3008         z-index: -1;
3009 }
3010 #image-focus-overlay.engaged {
3011         display: initial;
3012 }
3013
3014 #image-focus-overlay img {
3015         margin: auto;
3016         position: absolute;
3017         left: 50%;
3018         top: 50%;
3019         transform: translateX(-50%) translateY(-50%);
3020 }
3021
3022 #image-focus-overlay .help-overlay {
3023         position: absolute;
3024         display: flex;
3025         flex-flow: column;
3026         z-index: 2;
3027         font-size: 1.5rem;
3028         padding: 1em;
3029         border-radius: 10px;
3030         bottom: 1em;
3031         right: 1em;
3032         overflow: hidden;
3033         white-space: nowrap;
3034         color: transparent;
3035         visibility: hidden;
3036         transition:
3037                 visibility 1s ease,
3038                 color 1s ease,
3039                 background-color 1s ease,
3040                 bottom 0.3s ease;
3041 }
3042 #image-focus-overlay .help-overlay:hover {
3043         max-width: 420px;
3044         max-height: 300px;
3045         background-color: rgba(0,0,0,0.85);
3046         color: #fff;
3047         visibility: visible;
3048         transition:
3049                 visibility 0.2s ease 0.3s,
3050                 color 0.2s ease 0.3s,
3051                 background-color 0.2s ease 0.3s;
3052 }
3053
3054 #image-focus-overlay .help-overlay::after {
3055         content: "\F128";
3056         font-family: Font Awesome;
3057         font-weight: 900;
3058         font-size: 2rem;
3059         position: absolute;
3060         right: 0;
3061         bottom: 0;
3062         padding: 10px;
3063         color: #000;
3064         filter: drop-shadow(0 0 6px #fff);
3065         visibility: visible;
3066         opacity: 0.85;
3067         transition:
3068                 visibility 1s ease;
3069 }
3070 #image-focus-overlay .help-overlay:hover::after {
3071         visibility: hidden;
3072         transition:
3073                 visibility 0.2s ease 0.3s;
3074 }
3075
3076 #image-focus-overlay .help-overlay p {
3077         margin: 0;
3078         text-indent: -2em;
3079         padding-left: 2em;
3080         max-width: 100%;
3081         overflow: hidden;
3082 }
3083 #image-focus-overlay .help-overlay p + p {
3084         margin: 0.75em 0 0 0;
3085 }
3086 #image-focus-overlay .help-overlay.hidden {
3087         bottom: -2em;
3088 }
3089
3090 #image-focus-overlay .image-number {
3091         position: absolute;
3092         z-index: 2;
3093         font-size: 1.75rem;
3094         left: 1em;
3095         bottom: 1em;
3096         font-weight: 600;
3097         text-shadow:
3098                 0 0 3px #fff,
3099                 0 0 5px #fff,
3100                 0 0 8px #fff,
3101                 0 0 13px #fff;
3102         width: 1.5em;
3103         text-align: right;
3104         white-space: nowrap;
3105         transition: bottom 0.3s ease;
3106 }
3107 #image-focus-overlay .image-number::before {
3108         content: "#";
3109         opacity: 0.3;
3110 }
3111 #image-focus-overlay .image-number::after {
3112         content: " of " attr(data-number-of-images);
3113         opacity: 0.3;
3114 }
3115 #image-focus-overlay .image-number:hover::before,
3116 #image-focus-overlay .image-number:hover::after {
3117         opacity: 1.0;
3118 }
3119 #image-focus-overlay .image-number.hidden {
3120         bottom: -1.25em;
3121 }
3122
3123 #image-focus-overlay .slideshow-buttons {
3124         position: absolute;
3125         top: 0;
3126         left: 0;
3127         width: 100%;
3128         height: 100%;
3129         z-index: 1;
3130         display: flex;
3131         justify-content: space-between;
3132         pointer-events: none;
3133 }
3134 #image-focus-overlay .slideshow-buttons button {
3135         font-family: Font Awesome;
3136         font-weight: 900;
3137         font-size: 3rem;
3138         padding: 0.5em;
3139         color: #ddd;
3140         position: relative;
3141         left: 0;
3142         transition:
3143                 left 0.3s ease;
3144         pointer-events: auto;
3145 }
3146 #image-focus-overlay .slideshow-buttons button::selection {
3147         background-color: transparent;
3148 }
3149 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
3150         #image-focus-overlay .slideshow-buttons button:hover {
3151                 background-color: rgba(0,0,0,0.1);
3152                 color: #777;
3153         }
3154 }
3155 #image-focus-overlay .slideshow-buttons button:active {
3156         transform: none;
3157         color: #888;
3158 }
3159 #image-focus-overlay .slideshow-buttons button:disabled {
3160         text-shadow: none;
3161         background-color: transparent;
3162         color: #ddd;
3163         cursor: default;
3164         opacity: 0.4;
3165 }
3166 #image-focus-overlay .slideshow-button.previous.hidden {
3167         left: -1.75em;
3168 }
3169 #image-focus-overlay .slideshow-button.next.hidden {
3170         left: 1.75em;
3171 }
3172
3173 .blurred {
3174         filter: blur(3px);
3175 }
3176
3177 /**************************/
3178 /* QUALIFIED HYPERLINKING */
3179 /**************************/
3180
3181 #content.no-comments .comments,
3182 #content.no-comments .post-meta .comment-count,
3183 #content.no-comments .post-meta .karma,
3184 #content.no-comments + #ui-elements-container #new-comment-nav-ui,
3185 #content.no-comments + #ui-elements-container #hns-date-picker,
3186 #content.no-comments + #ui-elements-container #quick-nav-ui {
3187         display: none;
3188 }
3189
3190 #content.no-nav-bars #primary-bar,
3191 #content.no-nav-bars #secondary-bar {
3192         display: none;
3193 }
3194 #content.no-nav-bars {
3195         margin: 8px auto;
3196 }
3197 #content.no-nav-bars + #ui-elements-container > * {
3198         padding-top: 8px;
3199 }
3200
3201 #aux-about-link {
3202         position: fixed;
3203         top: 40px;
3204         left: calc((100% - 900px) / 2 - 69px);
3205         width: 1.5em;
3206         height: 1.5em;
3207         text-align: center;
3208         display: table;
3209 }
3210 #aux-about-link a {
3211         display: table-cell;
3212         width: 100%;
3213         vertical-align: middle;
3214         font-family: Font Awesome;
3215         font-weight: 900;
3216         font-size: 1.25rem;
3217         opacity: 0.4;
3218         z-index: 1;
3219 }
3220
3221 .qualified-linking {
3222         margin: 0;
3223         position: relative;
3224 }
3225 .qualified-linking input[type='checkbox'] {
3226         visibility: hidden;
3227         width: 0;
3228         height: 0;
3229         margin: 0;
3230 }
3231 .qualified-linking label {
3232         font-family: Font Awesome;
3233         font-weight: 900;
3234         font-size: 1rem;
3235         padding: 0 0.5em;
3236         display: inline-block;
3237         margin-left: 0.25em;
3238 }
3239 .qualified-linking label:hover {
3240         cursor: pointer;
3241 }
3242 .qualified-linking label:active span {
3243         display: inline-block;
3244         transform: scale(0.9);
3245 }
3246 .qualified-linking label::selection {
3247         background-color: transparent;
3248 }
3249
3250 .qualified-linking label::after {
3251         content: "";
3252         width: 100vw;
3253         height: 0;
3254         left: 0;
3255         top: 0;
3256         position: fixed;
3257         z-index: 1;
3258         cursor: default;
3259 }
3260 .qualified-linking input[type='checkbox']:checked + label::after {
3261         height: 100vh;
3262 }
3263
3264 .qualified-linking-toolbar {
3265         position: absolute;
3266         right: 0.25em;
3267         top: 110%;
3268         z-index: 1;
3269 }
3270 .qualified-linking input[type='checkbox'] ~ .qualified-linking-toolbar {
3271         display: none;
3272 }
3273 .qualified-linking input[type='checkbox']:checked ~ .qualified-linking-toolbar {
3274         display: block;
3275 }
3276 #qualified-linking-toolbar-toggle-checkbox-bottom ~ .qualified-linking-toolbar {
3277         top: unset;
3278         bottom: 125%;
3279 }
3280
3281 .qualified-linking-toolbar a {
3282         display: block;
3283         padding: 0 6px;
3284         margin: 4px;
3285 }
3286 .qualified-linking-toolbar a::selection {
3287         background-color: transparent;
3288 }
3289
3290 /********/
3291 /* MATH */
3292 /********/
3293
3294 .mathjax-block-container {
3295         overflow-y: hidden;
3296         border-radius: 6px;
3297         margin: 1em 0 1.5em 0;
3298 }
3299 .mathjax-inline-container {
3300         max-width: 100%;
3301         display: inline-block;
3302         overflow-x: auto;
3303         overflow-y: hidden;
3304         position: relative;
3305         vertical-align: text-top;
3306         padding: 0 1px;
3307 }
3308 .post .mathjax-inline-container {
3309         line-height: 1.1;
3310         top: 2px;
3311 }
3312 .comment .mathjax-inline-container {
3313         top: 3px;
3314         line-height: 1;
3315 }
3316 .mathjax-inline-container .mjx-chtml {
3317         padding: 0;
3318 }
3319
3320 /************/
3321 /* SPOILERS */
3322 /************/
3323
3324 .spoiler {
3325     color: #000;
3326     background-color: currentColor;
3327     transition: none;
3328     text-shadow: none;
3329         margin: 1em 0;
3330     box-shadow: 0 0 0 1px currentColor inset;
3331     overflow: auto;
3332 }
3333 .spoiler:not(:last-child) {
3334     margin-bottom: 0;
3335 }
3336 #content .spoiler * {
3337         color: inherit;
3338         border: none;
3339 }
3340 .spoiler:hover {
3341     color: unset;
3342     background-color: unset;
3343     text-shadow: unset;
3344     transition:
3345         color 0.1s ease-out 0.1s,
3346         background-color 0.1s ease-out 0.1s,
3347         text-shadow 0.1s ease-out 0.1s;
3348 }
3349 .spoiler::selection,
3350 .spoiler ::selection {
3351         color: #fff;
3352         background-color: #000;
3353 }
3354 .spoiler:not(:hover)::selection,
3355 .spoiler:not(:hover) ::selection {
3356     background-color: transparent;
3357 }
3358
3359 /*= Fix for LessWrong being weird =*/
3360
3361 .spoiler > p {
3362     padding: 0 7px;
3363 }
3364 .spoiler > p:first-child {
3365         margin-top: 0.25em;
3366 }
3367 .spoiler > p:last-child {
3368         margin-bottom: 0;
3369         padding-bottom: 0.25em;
3370 }
3371 .spoiler > p:hover ~ p {
3372         background-color: currentColor;
3373 }
3374 .spoiler > p + p {
3375         margin-top: -1em;
3376 }
3377 .spoiler > p:not(:first-child) {
3378         padding-top: 0.5em;
3379 }
3380 .spoiler > p:not(:last-child) {
3381         padding-bottom: 0.5em;
3382 }
3383
3384 /*******************/
3385 /* ALIGNMENT FORUM */
3386 /*******************/
3387
3388 #content.alignment-forum-index-page::after {
3389         content: "Alignment Forum";
3390         grid-row: 3;
3391         font-size: 1.5rem;
3392         margin: 0.375em 0 0 -0.375em;
3393 }
3394
3395 /**********************/
3396 /* FOR NARROW SCREENS */
3397 /**********************/
3398
3399 @media only screen and (max-width: 1440px) {
3400         #hns-date-picker {
3401                 right: -81px;
3402                 padding: 8px 10px 10px 10px;
3403                 bottom: 62px;
3404                 display: none;
3405         }
3406         #hns-date-picker::before {
3407                 content: "";
3408                 position: absolute;
3409                 display: block;
3410                 z-index: -1;
3411                 height: calc(100% + 2px);
3412                 top: -1px;
3413                 left: -1px;
3414                 width: 50%;
3415         }
3416 }
3417 @media only screen and (max-width: 1160px) {
3418         #new-comment-nav-ui {
3419                 bottom: 180px;
3420                 right: -68px;
3421         }
3422         #hns-date-picker {
3423                 bottom: 200px;
3424                 right: -36px;
3425         }
3426         #hns-date-picker::before {
3427                 width: calc(100% - 35px);
3428         }
3429         #theme-selector button::before {
3430                 right: unset;
3431                 left: 100%;
3432         }
3433         #theme-selector:hover::after {
3434                 content: "";
3435                 display: block;
3436                 position: absolute;
3437                 width: calc(6em - 7px);
3438                 height: calc(100% + 2px);
3439                 top: 0;
3440                 left: calc(100% + 1px);
3441         }
3442         #anti-kibitzer-toggle {
3443                 bottom: 330px;
3444         }
3445 }
3446 @media only screen and (max-width: 1080px) {
3447         #width-selector {
3448                 right: -30px;
3449         }
3450         #width-selector button {
3451                 display: block;
3452         }
3453         #text-size-adjustment-ui {
3454                 top: 90px;
3455                 right: -30px;
3456         }
3457         #text-size-adjustment-ui button {
3458                 display: block;
3459                 position: relative;
3460         }
3461         #text-size-adjustment-ui button.increase {
3462                 bottom: 48px;
3463         }
3464         #text-size-adjustment-ui button.decrease {
3465                 top: 50px;
3466         }
3467         #theme-selector {
3468                 top: 46px;
3469                 left: -44px;
3470         }
3471         #theme-tweaker-toggle {
3472                 left: -44px;
3473                 top: 2px;
3474         }
3475         #theme-tweaker-toggle button {
3476                 height: 2em;
3477                 width: 2em;
3478                 padding: 7px;
3479         }
3480         #quick-nav-ui {
3481                 right: -54px;
3482         }
3483         #new-comment-nav-ui {
3484                 right: -55px;
3485         }
3486         #hns-date-picker {
3487                 right: -23px;
3488         }
3489         #hns-date-picker::before {
3490                 width: calc(100% - 22px);
3491         }
3492         #anti-kibitzer-toggle {
3493                 right: -54px;
3494         }
3495 }
3496 @media only screen and (max-width: 1040px) {
3497         #quick-nav-ui {
3498                 right: -49px;
3499         }
3500         #new-comment-nav-ui {
3501                 right: -50px;
3502         }
3503         #hns-date-picker {
3504                 right: -18px;
3505         }
3506         #hns-date-picker::before {
3507                 width: calc(100% - 17px);
3508         }
3509         #anti-kibitzer-toggle {
3510                 right: -50px;
3511         }
3512 }
3513 @media only screen and (max-width: 1020px) {
3514         #quick-nav-ui {
3515                 right: -20px;
3516         }
3517         #new-comment-nav-ui {
3518                 right: -21px;
3519         }
3520         #new-comment-nav-ui .new-comments-count::before {
3521                 content: "";
3522                 position: absolute;
3523                 width: 100%;
3524                 height: calc(100% + 45px);
3525                 z-index: -1;
3526                 left: 0;
3527                 top: -22px;
3528         }
3529         #hns-date-picker {
3530                 right: 19px;
3531         }
3532         #hns-date-picker::before {
3533                 width: 100%;
3534         }
3535         #anti-kibitzer-toggle {
3536                 right: -20px;
3537         }
3538 }
3539 @media only screen and (max-width: 1000px) {
3540         #theme-selector {
3541                 left: -17px;
3542                 top: 120px;
3543                 padding: 3px 0;
3544                 max-width: 32px;
3545         }
3546         #theme-selector button {
3547                 margin: 1px 4px;
3548         }
3549         #text-size-adjustment-ui {
3550                 top: 100px;
3551                 right: -12px;
3552         }
3553         @media not screen and (hover: none), not screen and (-moz-touch-enabled) {
3554                 #quick-nav-ui,
3555                 #new-comment-nav-ui,
3556                 #new-comment-nav-ui + #hns-date-picker,
3557                 #anti-kibitzer-toggle {
3558                         opacity: 0.4;
3559                 }
3560                 #quick-nav-ui:hover,
3561                 #new-comment-nav-ui:hover,
3562                 #new-comment-nav-ui + #hns-date-picker:hover,
3563                 #new-comment-nav-ui + #hns-date-picker:focus-within,
3564                 #new-comment-nav-ui:hover + #hns-date-picker,
3565                 #anti-kibitzer-toggle:hover {
3566                         opacity: 1.0;
3567                 }
3568         }
3569         #theme-tweaker-toggle {
3570                 top: 70px;
3571                 left: -21px;
3572         }
3573 }
3574
3575 /**************/
3576 /* PRINT VIEW */
3577 /**************/
3578
3579 @media only print {
3580         .nav-bar {
3581                 visibility: hidden;
3582                 max-height: 0;
3583                 overflow: hidden;
3584         }
3585         #ui-elements-container {
3586                 display: none;
3587         }
3588         #images-overlay {
3589                 display: none;
3590         }
3591         #images-overlay + #content .post-body img {
3592                 visibility: visible;
3593         }
3594         .comment-controls {
3595                 display: none;
3596         }
3597         #comments-sort-mode-selector {
3598                 display: none;
3599         }
3600         .comment-minimize-button {
3601                 display: none;
3602         }
3603         .post-meta .qualified-linking,
3604         .post-meta .lw2-link {
3605                 display: none;
3606         }
3607         .comment-meta .permalink,
3608         .comment-meta .lw2-link,
3609         .comment-meta .comment-parent-link {
3610                 display: none;
3611         }
3612         .new-comment::before {
3613                 display: none;
3614         }
3615         #content::before {
3616                 box-shadow: none;
3617         }
3618 }
3619
3620 /*****************/
3621 /* MOBILE LAYOUT */
3622 /*****************/
3623
3624 /* Hide the mobile elements on desktop screens: */
3625
3626 @media not screen and (hover: none), not screen and (-moz-touch-enabled) {
3627         #post-nav-ui-toggle,
3628         #appearance-adjust-ui-toggle,
3629         #theme-selector .theme-selector-close-button {
3630                 display: none;
3631         }
3632 }
3633
3634 @media only screen and (hover: none), only screen and (-moz-touch-enabled) {
3635
3636 /*====================*/
3637 /* MOBILE UI ELEMENTS */
3638 /*====================*/
3639
3640 #ui-elements-container {
3641         height: unset;
3642         position: unset;
3643 }
3644 #ui-elements-container > * {
3645         position: fixed;
3646         visibility: hidden;
3647         opacity: 1.0;
3648         z-index: 10000;
3649 }
3650
3651 #ui-elements-container > div[id$='-ui-toggle'] {
3652         visibility: visible;
3653         display: inline-block;
3654         border-radius: 50%;
3655         z-index: 10000;
3656 }
3657 #ui-elements-container > div[id$='-ui-toggle'] button,
3658 #theme-selector .theme-selector-close-button {
3659         font-family: Font Awesome;
3660         font-weight: 900;
3661         font-size: 32px;
3662         padding: 10px;
3663         opacity: 0.8;
3664         -webkit-tap-highlight-color: transparent;
3665         transition: transform 0.2s ease;
3666 }
3667 #ui-elements-container > div[id$='-ui-toggle'] button::selection,
3668 #theme-selector .theme-selector-close-button::selection {
3669         background-color: transparent;
3670 }
3671 #ui-elements-container > div[id$='-ui-toggle'] button::-moz-focus-inner,
3672 #theme-selector .theme-selector-close-button::-moz-focus-inner {
3673         border: none;
3674 }
3675 #ui-elements-container > div[id$='-ui-toggle'] button.engaged {
3676         transform: rotate(-90deg);
3677         opacity: 1.0;
3678 }
3679
3680 #appearance-adjust-ui-toggle {
3681         bottom: 10px;
3682         left: 10px;
3683 }
3684
3685 #post-nav-ui-toggle {
3686         bottom: 10px;
3687         right: 10px;
3688 }
3689
3690 #theme-selector.engaged,
3691 #quick-nav-ui.engaged,
3692 #new-comment-nav-ui.engaged,
3693 #hns-date-picker.engaged {
3694         visibility: visible;
3695 }
3696
3697 #image-focus-overlay.engaged {
3698         visibility: visible;
3699 }
3700 #image-focus-overlay .help-overlay {
3701         display: none;
3702 }
3703
3704 /*=========*/
3705 /* GENERAL */
3706 /*=========*/
3707
3708 @media only screen and (max-width: 900px) {
3709         #content,
3710         #images-overlay,
3711         #ui-elements-container {
3712                 min-width: unset;
3713                 width: unset;
3714         }
3715         #content {
3716                 padding: 0 4px;
3717         }
3718 }
3719
3720 /*================*/
3721 /* THEME SELECTOR */
3722 /*================*/
3723
3724 #theme-selector {
3725         display: flex;
3726         flex-flow: column;
3727         width: calc(100vw - 20px);
3728         max-width: 360px;
3729         padding: 0 0 3px 0;
3730         overflow: hidden;
3731         max-height: 0;
3732         transition:
3733                 top 0.2s ease,
3734                 max-height 0.2s ease,
3735                 visibility 0.2s ease;
3736         top: calc(100% + 10px);
3737         left: 0;
3738         right: 0;
3739         margin: auto;
3740 }
3741 #theme-selector.engaged {
3742         max-height: 1000px;
3743         top: 10px;
3744     z-index: 10001;
3745 }
3746 #theme-selector::before {
3747         content: "Select theme";
3748         white-space: nowrap;
3749         display: block;
3750         font-weight: 600;
3751         font-size: 2rem;
3752         margin: 0.375em 1em 0.5em 1em;
3753         text-align: center;
3754 }
3755 #theme-selector button {
3756         width: calc(100% - 0.5em);
3757         background-repeat: no-repeat;
3758         padding: 1em 0.875em;
3759         margin: 1px 4px;
3760         line-height: 1;
3761         height: unset;
3762         position: relative;
3763 }
3764 #theme-selector button::after {
3765         content: attr(data-theme-description);
3766         white-space: nowrap;
3767         position: absolute;
3768         text-align: left;
3769         left: 2.5em;
3770         top: 1em;
3771 }
3772 @media only screen and (max-height: 675px) {
3773         #theme-selector button {
3774                 padding: 0.875em;
3775         }
3776         #theme-selector button::after {
3777                 top: 0.875em;
3778         }
3779 }
3780 #theme-selector .theme-selector-close-button {
3781         position: absolute;
3782         width: unset;
3783         background-color: transparent;
3784         top: 0;
3785         right: -3px;
3786 }
3787 #theme-selector .theme-selector-close-button,
3788 #theme-selector .theme-selector-close-button:focus,
3789 #theme-selector .theme-selector-close-button:active,
3790 #theme-selector .theme-selector-close-button:hover {
3791         box-shadow: none;
3792 }
3793
3794 /*===============*/
3795 /* THEME TWEAKER */
3796 /*===============*/
3797
3798 #theme-selector {
3799         padding: 0 0 64px 0;
3800 }
3801 #theme-selector ~ #theme-tweaker-toggle {
3802         top: 100%;
3803 }
3804 #theme-selector ~ #theme-tweaker-toggle::after {
3805         content: "Open theme tweaker";
3806         position: absolute;
3807         font-size: 0.625em;
3808         white-space: nowrap;
3809         left: -50%;
3810         top: 100%;
3811 }
3812 #theme-selector.engaged ~ #theme-tweaker-toggle {
3813         visibility: visible;
3814         top: 530px;
3815         left: 0;
3816         right: 0;
3817         margin: auto;
3818         z-index: 11111;
3819         transition:
3820                 top 0.2s ease,
3821                 visibility 0.2s ease;
3822 }
3823 @media only screen and (max-height: 675px) {
3824         #theme-selector.engaged ~ #theme-tweaker-toggle {
3825                 top: 492px;
3826         }
3827 }
3828 @supports (width: -moz-fit-content) {
3829         #theme-selector.engaged ~ #theme-tweaker-toggle {
3830                 width: -moz-fit-content;
3831         }
3832 }
3833 @supports (width: fit-content) {
3834         #theme-selector.engaged ~ #theme-tweaker-toggle {
3835                 width: fit-content;
3836         }
3837 }
3838 #theme-selector.engaged ~ #theme-tweaker-toggle button {
3839         opacity: 1.0;
3840 }
3841
3842 #theme-tweaker-ui {
3843         visibility: visible;
3844 }
3845
3846 /*======================*/
3847 /* ANTI-KIBITZER TOGGLE */
3848 /*======================*/
3849
3850 #theme-selector ~ #anti-kibitzer-toggle {
3851         top: 100%;
3852         bottom: unset;
3853         left: 0;
3854         right: 0;
3855         margin: auto;
3856         box-shadow: none;
3857         width: calc(100vw - 44px);
3858         max-width: 330px;
3859         text-align: right;
3860         pointer-events: none;
3861 }
3862 #theme-selector.engaged ~ #anti-kibitzer-toggle {
3863         visibility: visible;
3864         z-index: 11110;
3865         top: 530px;
3866         transition:
3867                 top 0.2s ease,
3868                 visibility 0.2s ease;
3869 }
3870 @media only screen and (max-height: 675px) {
3871         #theme-selector.engaged ~ #anti-kibitzer-toggle {
3872                 top: 492px;
3873         }
3874 }
3875 #theme-selector.engaged ~ #anti-kibitzer-toggle button {
3876         pointer-events: auto;
3877         display: inline-block;
3878 }
3879
3880 /*=================*/
3881 /* QUICKNAV WIDGET */
3882 /*=================*/
3883
3884 #quick-nav-ui {
3885         max-width: 0px;
3886         transition:
3887                 max-width 0.2s ease,
3888                 visibility 0.2s ease;
3889         display: flex;
3890         right: 72px;
3891         bottom: 14px;
3892 }
3893 #quick-nav-ui.engaged {
3894         max-width: 1000px;
3895 }
3896 #quick-nav-ui a {
3897         position: relative;
3898         margin: 2px;
3899 }
3900 #quick-nav-ui a + a {
3901         margin-left: 5px;
3902 }
3903 #quick-nav-ui a::after {
3904         position: absolute;
3905         top: calc(100% + 2px);
3906         font-size: 0.375rem;
3907         left: 0;
3908         right: 0;
3909         margin: auto;
3910         line-height: 1;
3911         padding: 2px;
3912         text-transform: uppercase;
3913         z-index: -1;
3914 }
3915 @supports (width: -moz-fit-content) {
3916         #quick-nav-ui a::after {
3917                 width: -moz-fit-content;
3918         }
3919 }
3920 @supports (width: fit-content) {
3921         #quick-nav-ui a::after {
3922                 width: fit-content;
3923         }
3924 }
3925 #quick-nav-ui a[href='#top']::after {
3926         content: "Top";
3927         left: -1px;
3928 }
3929 #quick-nav-ui a[href='#comments']::after {
3930         content: "Comments";
3931 }
3932 #content.post-page:not(.individual-thread-page) ~ #ui-elements-container #quick-nav-ui a[href='#comments'] {
3933         visibility: hidden;
3934         transition: visibility 0.2s ease;
3935 }
3936 #content.post-page:not(.individual-thread-page) ~ #ui-elements-container #quick-nav-ui.engaged a[href='#comments'] {
3937         visibility: visible;
3938 }
3939 #quick-nav-ui a[href='#bottom-bar']::after {
3940         content: "Bottom";
3941 }
3942
3943 /*======================*/
3944 /* NEW COMMENT QUICKNAV */
3945 /*======================*/
3946
3947 #new-comment-nav-ui {
3948         max-width: 0px;
3949         max-height: 0px;
3950         transition:
3951                 max-width 0.2s ease,
3952                 max-height 0.2s ease,
3953                 visibility 0.2s ease;
3954         display: flex;
3955         right: 78px;
3956         bottom: 70px;
3957 }
3958 #new-comment-nav-ui::before {
3959         content: "New Comments";
3960         position: absolute;
3961         bottom: 100%;
3962         font-size: 0.5625rem;
3963         left: 0;
3964         right: 0;
3965         margin: auto;
3966         padding: 2px 3px;
3967         text-transform: uppercase;
3968         z-index: -1;
3969 }
3970 @supports (width: -moz-fit-content) {
3971         #new-comment-nav-ui::before {
3972                 width: -moz-fit-content;
3973         }
3974 }
3975 @supports (width: fit-content) {
3976         #new-comment-nav-ui::before {
3977                 width: fit-content;
3978         }
3979 }
3980 #new-comment-nav-ui.engaged {
3981         max-width: 1000px;
3982         max-height: 1000px;
3983 }
3984 #new-comment-nav-ui .new-comment-sequential-nav-button {
3985         top: unset;
3986         bottom: unset;
3987         padding: 2px 7px;
3988 }
3989 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
3990         padding: 2px 7px 3px 7px;
3991 }
3992 #new-comment-nav-ui .new-comments-count {
3993         padding: 4px 0 5px 0;
3994 }
3995 #new-comment-nav-ui .new-comments-count::before {
3996         display: none;
3997 }
3998 #new-comment-nav-ui button::after {
3999         position: absolute;
4000         font-size: 0.375rem;
4001         left: 0;
4002         right: 0;
4003         margin: auto;
4004         line-height: 1;
4005         text-transform: uppercase;
4006         pointer-events: none;
4007 }
4008 #new-comment-nav-ui button.new-comment-previous::after {
4009         content: "Previous";
4010         bottom: 5px;
4011 }
4012 #new-comment-nav-ui button.new-comment-next::after {
4013         content: "Next";
4014         top: 7px;
4015 }
4016
4017 /*=================*/
4018 /* HNS DATE PICKER */
4019 /*=================*/
4020
4021 #hns-date-picker {
4022         max-height: 0px;
4023         bottom: 132px;
4024         right: 62px;
4025         transition:
4026                 max-height 0.2s ease,
4027                 visibility 0.2s ease;
4028 }
4029 #hns-date-picker.engaged {
4030         max-height: 1000px;
4031 }
4032 #hns-date-picker::before {
4033         width: calc(100% + 2px);
4034         border-width: 1px !important;
4035 }
4036
4037 /*=========*/
4038 /* NAV BAR */
4039 /*=========*/
4040
4041 #bottom-bar {
4042         padding: 0 4.5rem;
4043 }
4044 #bottom-bar .nav-item {
4045         box-shadow: none;
4046         position: relative;
4047 }
4048 #bottom-bar .nav-inner {
4049         font-size: 2rem;
4050         padding: 1rem 0 1.25rem 0;
4051         visibility: hidden;
4052         position: static;
4053         width: 0;
4054 }
4055 #content #bottom-bar .nav-item .nav-inner::before {
4056         margin: 0;
4057         visibility: visible;
4058         position: absolute;
4059         width: 100%;
4060         height: 100%;
4061         left: 0;
4062         top: 0;
4063         padding: 1rem 0;
4064 }
4065 #bottom-bar .nav-inner::after {
4066         display: block;
4067         visibility: visible;
4068         text-transform: uppercase;
4069         color: unset;
4070         font-size: 0.75rem;
4071         top: unset;
4072         left: 0;
4073         bottom: 1rem;
4074         width: 100%;
4075 }
4076 #bottom-bar #nav-item-first .nav-inner::after {
4077         content: "First Page";
4078 }
4079 #bottom-bar #nav-item-prev .nav-inner::after {
4080         content: "Prev. Page";
4081 }
4082 #bottom-bar #nav-item-top .nav-inner::after {
4083         content: "Top";
4084 }
4085 #bottom-bar #nav-item-next .nav-inner::after {
4086         content: "Next Page";
4087 }
4088 #bottom-bar #nav-item-last .nav-inner::after {
4089         content: "Last Page";
4090 }
4091
4092 @media only screen and (max-width: 900px) {
4093         #primary-bar,
4094         #secondary-bar {
4095                 font-size: 0.75rem;
4096         }
4097         .nav-bar {
4098                 width: calc(100% + 8px);
4099                 margin: 0 -4px;
4100         }
4101         .nav-bar .nav-inner::after {
4102                 display: none;
4103         }
4104
4105         #primary-bar .nav-item {
4106                 flex: 1 1 100%;
4107         }
4108         #secondary-bar .nav-item:not(#nav-item-search) {
4109                 flex: 1 1 60px;
4110         }
4111         #primary-bar .nav-inner,
4112         #secondary-bar .nav-inner {
4113                 text-transform: uppercase;
4114                 padding: 6px;
4115         }
4116         #primary-bar .nav-inner::before,
4117         #secondary-bar .nav-inner::before {
4118                 display: block;
4119                 font-family: "Font Awesome";
4120                 font-size: 2em;
4121                 font-weight: 900;
4122         }
4123
4124         #nav-item-home .nav-inner::before {
4125                 content: "\F015";
4126         }
4127         #nav-item-featured .nav-inner::before {
4128                 content: "\F005";
4129         }
4130         #nav-item-all .nav-inner::before {
4131                 content: "\F069";
4132         }
4133         #nav-item-meta .nav-inner::before {
4134                 content: "\F077";
4135         }
4136         #nav-item-recent-comments > * > span {
4137                 display: none;
4138         }
4139         #nav-item-recent-comments .nav-inner::before {
4140                 content: "\F036";
4141         }
4142         #nav-item-archive .nav-inner::before {
4143                 content: "\F187";
4144         }
4145         #nav-item-about .nav-inner::before {
4146                 content: "\F129";
4147         }
4148         #nav-item-search {
4149                 font-size: 2em;
4150                 padding: 10px;
4151         }
4152         #nav-item-search .nav-inner::before {
4153                 content: none;
4154         }
4155         #nav-item-search .nav-inner {
4156                 height: 100%;
4157                 display: flex;
4158         }
4159         #nav-item-search input {
4160                 width: 100%;
4161                 height: 100%;
4162         }
4163         #nav-item-search button {
4164                 height: 100%;
4165                 padding: 5px 5px 5px 10px;
4166                 width: 40px;
4167                 overflow: visible;
4168                 visibility: hidden;
4169         }
4170         #nav-item-search button::before {
4171                 content: "\F002";
4172                 font-family: Font Awesome;
4173                 font-weight: 900;
4174                 visibility: visible;
4175         }
4176         #nav-item-login {
4177                 padding: 0;
4178         }
4179         #nav-item-login .nav-inner::before {
4180                 content: "\F007";
4181         }
4182 }
4183 @media only screen and (max-width: 520px) {
4184         #primary-bar,
4185         #secondary-bar {
4186                 font-size: 0.5rem;
4187         }
4188
4189         #nav-item-search .nav-inner {
4190                 padding: 0;
4191         }
4192         #nav-item-search button {
4193                 width: 31px;
4194         }
4195
4196         #bottom-bar #nav-item-first .nav-inner::after {
4197                 content: "First";
4198         }
4199         #bottom-bar #nav-item-prev .nav-inner::after {
4200                 content: "Prev";
4201         }
4202         #bottom-bar #nav-item-next .nav-inner::after {
4203                 content: "Next";
4204         }
4205         #bottom-bar #nav-item-last .nav-inner::after {
4206                 content: "Last";
4207         }
4208 }
4209
4210 /*=================*/
4211 /* INBOX INDICATOR */
4212 /*=================*/
4213
4214 @media only screen and (max-width: 900px) {
4215         #inbox-indicator {
4216                 width: 100%;
4217                 top: 0;
4218                 pointer-events: none;
4219         }
4220         #inbox-indicator::before {
4221                 width: 100%;
4222                 font-size: 1rem;
4223                 text-align: right;
4224                 padding: 1px 6px;
4225         }
4226         #inbox-indicator.new-messages {
4227                 pointer-events: auto;
4228         }
4229         #inbox-indicator.new-messages::before {
4230                 box-shadow: 0 0 8px 1px #f00 inset;
4231         }
4232 }
4233 @media only screen and (max-width: 520px) {
4234         #inbox-indicator::before {
4235                 font-size: 0.75rem;
4236                 padding: 2px 5px;
4237         }
4238 }
4239 @media only screen and (max-width: 374px) {
4240         #inbox-indicator::before {
4241                 font-size: 0.625rem;
4242         }
4243 }
4244
4245 /*===================*/
4246 /* TOP PAGINATION UI */
4247 /*===================*/
4248
4249 #top-nav-bar {
4250         font-size: 1.75rem;
4251 }
4252
4253 /*==============*/
4254 /* PAGE TOOLBAR */
4255 /*==============*/
4256
4257 @media only screen and (max-width: 900px) {
4258         #content > .page-toolbar {
4259                 font-size: 1rem;
4260                 margin-right: 0;
4261         }
4262         #content.user-page > .page-toolbar {
4263                 grid-column: 2 / span 2;
4264                 margin: 0 0 6px 0;
4265         }
4266 }
4267 @media only screen and (max-width: 520px) {
4268         #content:not(.user-page) .page-toolbar {
4269                 display: flex;
4270                 flex-direction: column-reverse;
4271                 text-align: right;
4272                 align-self: start;
4273                 padding: 4px 0 0 0;
4274         }
4275         #content.user-page .page-toolbar {
4276                 display: flex;
4277                 flex-flow: row;
4278                 justify-content: flex-end;
4279                 padding: 2px 0 0 0;
4280         }
4281         #content.user-page .page-toolbar > form,
4282         #content.user-page .page-toolbar > .button {
4283                 text-align: center;
4284                 flex-basis: 25%;
4285                 margin-left: 1.5em;
4286         }
4287         #content.user-page .page-toolbar .button {
4288                 text-transform: uppercase;
4289                 font-size: 0.625rem;
4290         }
4291         #content.user-page .page-toolbar .button::before {
4292                 font-size: 1.375rem;
4293                 display: block;
4294                 padding: 0;
4295         }
4296         #content.user-page .page-toolbar .rss {
4297                 white-space: nowrap;
4298                 margin: 0 0 0 1.5em;
4299         }
4300         .page-toolbar > * {
4301                 line-height: 1.15;
4302                 padding: 6px 0;
4303                 margin: 0;
4304         }
4305 }
4306
4307 /*==============*/
4308 /* SUBLEVEL NAV */
4309 /*==============*/
4310
4311 @media only screen and (max-width: 900px) {
4312         .sublevel-nav:not(.sort) {
4313                 flex-wrap: wrap;
4314                 width: calc(100vw - 100px);
4315         }
4316         .sublevel-nav:not(.sort) .sublevel-item {
4317                 margin: 1px;
4318                 flex-basis: 7em;
4319         }
4320 }
4321 @media only screen and (max-width: 720px) {
4322         .sublevel-nav:not(.sort) {
4323                 width: calc(100vw - 200px);
4324         }
4325 }
4326 @media only screen and (max-width: 520px) {
4327         .sublevel-nav:not(.sort) {
4328                 width: calc(100vw - 100px);
4329         }
4330         .sublevel-nav:not(.sort) .sublevel-item {
4331                 font-size: 1rem;
4332         }
4333 }
4334
4335 /*=====================*/
4336 /* SORT ORDER SELECTOR */
4337 /*=====================*/
4338
4339 @media only screen and (max-width: 720px) {
4340         #content.index-page > .sublevel-nav.sort {
4341                 flex-flow: column;
4342                 margin-left: 4px;
4343         }
4344 }
4345
4346 /*==========*/
4347 /* ARCHIVES */
4348 /*==========*/
4349
4350 @media only screen and (max-width: 900px) {
4351         div[class^='archive-nav-'] {
4352                 flex-wrap: wrap;
4353                 justify-content: flex-start;
4354         }
4355         .archive-nav *[class^='archive-nav-item'],
4356         .archive-nav *[class^='archive-nav-item']:first-child {
4357                 padding: 10px;
4358                 margin: 2px;
4359                 max-width: unset;
4360                 flex: 0 1 calc((100% / 8) - 4px);
4361         }
4362         .archive-nav .archive-nav-item-day,
4363         .archive-nav .archive-nav-item-day:first-child {
4364                 flex-basis: calc((100% / 16) - 4px);
4365         }
4366         .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-'] {
4367                 margin-top: 8px;
4368                 position: relative;
4369         }
4370         .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
4371                 content: "";
4372                 display: block;
4373                 position: absolute;
4374                 height: 1px;
4375                 width: calc(100% + 8px);
4376                 left: -4px;
4377                 top: -4px;
4378         }
4379 }
4380 @media only screen and (max-width: 720px) {
4381         .archive-nav .archive-nav-item-day,
4382         .archive-nav .archive-nav-item-day:first-child {
4383                 flex-basis: calc((100% / 12) - 4px);
4384         }
4385 }
4386 @media only screen and (max-width: 520px) {
4387         .archive-nav *[class^='archive-nav-item'],
4388         .archive-nav *[class^='archive-nav-item']:first-child {
4389                 flex-basis: calc((100% / 5) - 4px);
4390         }
4391         .archive-nav .archive-nav-item-day,
4392         .archive-nav .archive-nav-item-day:first-child {
4393                 flex-basis: calc((100% / 8) - 4px);
4394         }
4395 }
4396
4397 /*==========*/
4398 /* LISTINGS */
4399 /*==========*/
4400
4401 h1.listing {
4402         max-height: unset;
4403 }
4404
4405 /*============*/
4406 /* USER PAGES */
4407 /*============*/
4408
4409 @media only screen and (max-width: 720px) {
4410         #content.user-page h1.page-main-heading {
4411                 align-self: center;
4412         }
4413         #content.user-page .user-stats {
4414                 padding: 4px 0;
4415                 line-height: 1.3;
4416         }
4417 }
4418
4419 /*============*/
4420 /* LOGIN PAGE */
4421 /*============*/
4422
4423 @media only screen and (max-width: 640px) {
4424         .login-container {
4425                 flex-flow: column;
4426                 margin: 0 auto 3em auto;
4427                 max-width: 400px;
4428         }
4429         .login-container #login-form,
4430         .login-container #signup-form {
4431                 padding: 0 1em 1.25em 1em;
4432                 grid-row-gap: 0;
4433         }
4434         .login-container #signup-form {
4435                 padding-top: 1em;
4436         }
4437         .login-container #login-form > *,
4438         .login-container #signup-form > * {
4439                 grid-column: 1 / span 2;
4440         }
4441         .login-container form label {
4442                 text-align: left;
4443                 padding: 0;
4444                 line-height: 1;
4445         }
4446         .login-container form input {
4447                 margin: 0.25em 0 0.75em 0;
4448                 padding: 0.5em;
4449         }
4450         .login-container form h1 {
4451                 grid-column: 1 / span 2;
4452                 margin: 0 0 0.25em 0;
4453         }
4454         .login-container form a {
4455                 margin: 0.75em 0 0 0;
4456         }
4457         .login-container .login-tip {
4458                 margin: 1.5em 1em 0 1em;
4459         }
4460 }
4461
4462 /*==================*/
4463 /* POSTS & COMMENTS */
4464 /*==================*/
4465
4466 /*===========*/
4467 /* POST-META */
4468 /*===========*/
4469
4470 .post-meta {
4471         line-height: 1.9;
4472 }
4473 @media only screen and (max-width: 720px) {
4474         .post-meta .lw2-link span,
4475         .post-meta .karma-value span,
4476         .post-meta .comment-count span {
4477                 display: none;
4478         }
4479         .post-meta .comment-count::before {
4480                 content: "\F086";
4481                 font-family: Font Awesome;
4482                 font-size: 0.875em;
4483                 margin: 0 0.25em 0 0;
4484                 font-weight: 400;
4485         }
4486 }
4487
4488 /*=======*/
4489 /* POSTS */
4490 /*=======*/
4491
4492 @media only screen and (max-width: 900px) {
4493         .post-body,
4494         h1.post-title {
4495                 padding: 0 6px;
4496         }
4497 }
4498 @media only screen and (max-width: 520px) {
4499         .post-body {
4500                 font-size: 1.2rem;
4501                 line-height: 1.45;
4502         }
4503         h1.post-title {
4504                 font-size: 2em;
4505         }
4506 }
4507
4508 /*==========*/
4509 /* COMMENTS */
4510 /*==========*/
4511
4512 @media only screen and (max-width: 900px) {
4513         .comment-body ul {
4514                 padding-left: 30px;
4515         }
4516         .comment-body ol {
4517                 padding-left: 30px;
4518         }
4519 }
4520
4521 /*==============*/
4522 /* COMMENT-META */
4523 /*==============*/
4524
4525 a.comment-parent-link::after {
4526         display: none;
4527 }
4528 @media only screen and (max-width: 900px) {
4529         .comment-meta {
4530                 padding: 2px 40px 2px 10px;
4531         }
4532 }
4533 @media only screen and (max-width: 720px) {
4534         .comment-meta .karma-value span {
4535                 display: none;
4536         }
4537         .comment-meta .comment-parent-link {
4538                 opacity: 1.0;
4539         }
4540 }
4541 @media only screen and (max-width: 520px) {
4542         .comment-meta {
4543                 padding: 2px 10px;
4544                 position: relative;
4545         }
4546         .comment-meta .author {
4547                 flex-basis: 100%;
4548         }
4549         .comment-post-title2 {
4550                 display: block;
4551                 text-overflow: ellipsis;
4552                 overflow: hidden;
4553         }
4554         .comment-meta .lw2-link {
4555                 display: none;
4556         }
4557 }
4558
4559 /*=======================*/
4560 /* COMMENTS COMPACT VIEW */
4561 /*=======================*/
4562
4563 /*===========================*/
4564 /* COMMENT THREAD NAVIGATION */
4565 /*===========================*/
4566
4567 @media only screen and (max-width: 900px) {
4568         a.comment-parent-link {
4569                 width: 0;
4570                 visibility: hidden;
4571                 position: relative;
4572         }
4573         a.comment-parent-link::before {
4574                 padding: 0;
4575                 font-size: 1em;
4576                 left: 0;
4577                 top: 0;
4578                 line-height: inherit;
4579                 visibility: visible;
4580                 content: "\F3BF";
4581                 transform: scaleX(-1);
4582                 width: 2em;
4583                 text-align: center;
4584         }
4585 }
4586 @media only screen and (max-width: 520px) {
4587         a.comment-parent-link {
4588                 position: static;
4589         }
4590         a.comment-parent-link::before {
4591                 padding: 6px;
4592                 left: unset;
4593                 right: 0;
4594                 top: unset;
4595                 bottom: 0;
4596                 height: 2em;
4597         }
4598 }
4599
4600 /*=================================*/
4601 /* COMMENT THREAD MINIMIZE BUTTONS */
4602 /*=================================*/
4603
4604 @media only screen and (max-width: 520px) {
4605         .comment-minimize-button{
4606                 right: 2px;
4607         }
4608 }
4609
4610 /*===========================*/
4611 /* COMMENTING AND POSTING UI */
4612 /*===========================*/
4613
4614 @media only screen and (max-width: 900px) {
4615         .comment-controls .cancel-comment-button {
4616                 max-width: 1.3em;
4617                 overflow: hidden;
4618                 margin-right: 0.125em;
4619         }
4620         .comment-controls .edit-button::before {
4621                 font-size: 0.9375em;
4622         }
4623         .comments > .comment-controls .cancel-comment-button {
4624                 right: 8px;
4625         }
4626         .comment-controls .cancel-comment-button::before {
4627                 font-size: 1.25rem;
4628         }
4629 }
4630 @media only screen and (max-width: 520px) {
4631         .comment-controls {
4632                 position: static;
4633         }
4634         .comment-controls:focus-within {
4635                 z-index: 10001;
4636         }
4637         .comment-controls .cancel-comment-button {
4638                 right: 10px;
4639         }
4640         .textarea-container:focus-within textarea {
4641                 position: fixed;
4642                 top: 0;
4643                 left: 2px;
4644                 width: calc(100vw - 4px);
4645                 height: calc(100% - 100px);
4646                 min-height: unset;
4647                 max-height: unset;
4648                 border-width: 1px;
4649                 z-index: 11001;
4650         }
4651         #content.conversation-page .textarea-container:focus-within textarea {
4652                 height: calc(100% - 54px);
4653         }
4654         #content.conversation-page .textarea-container:focus-within::after {
4655                 content: "";
4656                 display: block;
4657                 width: 100%;
4658                 height: 50px;
4659                 position: fixed;
4660                 left: 0;
4661                 bottom: 0;
4662                 z-index: 11000;
4663         }
4664         .textarea-container:focus-within .guiedit-buttons-container {
4665                 position: fixed;
4666                 z-index: 11002;
4667                 left: 0;
4668                 width: 100vw;
4669                 height: auto;
4670                 background-image: none;
4671                 padding: 3px 4px 4px 4px;
4672                 margin: 0;
4673                 text-align: center;
4674                 top: auto;
4675                 bottom: 0;
4676         }
4677         .textarea-container:focus-within button.guiedit {
4678                 font-size: 0.9375rem;
4679                 line-height: 1.5;
4680                 height: auto;
4681                 width: calc((100% / 10) - 2px);
4682                 padding: 10px 1px 8px 0;
4683                 position: relative;
4684                 margin: 1px;
4685         }
4686         .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
4687                 z-index: 11011;
4688                 position: fixed;
4689                 bottom: 7px;
4690                 width: calc(((100% - 16px) / 10) * 2.5 - 7px);
4691                 font-size: 1.25rem;
4692                 padding: 5px 5px 6px 5px;
4693                 display: block;
4694         }
4695         .textarea-container:focus-within button.guiedit sup {
4696                 position: absolute;
4697                 left: calc(50% + 0.65em);
4698                 top: calc(50% - 1.3em);
4699         }
4700         .textarea-container:focus-within .guiedit-mobile-help-button {
4701                 left: 8px;
4702         }
4703         .textarea-container:focus-within .guiedit-mobile-exit-button {
4704                 right: 8px;
4705         }
4706         .guiedit::after {
4707                 display: none;
4708         }
4709
4710         #markdown-hints,
4711         #edit-post-form #markdown-hints {
4712                 z-index: 11111;
4713                 position: fixed;
4714                 top: 40px;
4715                 left: 0;
4716                 right: 0;
4717                 margin: auto;
4718                 padding: 4px 0 4px 8px;
4719                 width: 310px;
4720                 border-width: 3px;
4721                 border-style: double;
4722                 pointer-events: none;
4723         }
4724         #markdown-hints::after {
4725                 content: "(Type to hide this help box.)";
4726                 color: #090;
4727                 display: block;
4728                 margin: 12px 18px 13px 10px;
4729                 padding: 5px;
4730                 font-size: 0.9em;
4731                 text-align: center;
4732         }
4733 }
4734
4735 /*================*/
4736 /* EDIT POST FORM */
4737 /*================*/
4738
4739 @media only screen and (max-width: 520px) {
4740         #edit-post-form {
4741                 padding-bottom: 0;
4742         }
4743         #edit-post-form .post-meta-fields {
4744                 grid-template-columns: 4.5em auto auto auto 1fr auto;
4745         }
4746         #edit-post-form label[for='url'],
4747         #edit-post-form label[for='section'],
4748         #edit-post-form label[for='title'] {
4749                 padding-left: 0;
4750         }
4751         #edit-post-form .post-meta-fields input[type='checkbox'] + label {
4752                 white-space: normal;
4753                 line-height: 0.9;
4754                 top: -1px;
4755                 font-family: Font Awesome;
4756                 font-weight: 900;
4757                 justify-self: start;
4758         }
4759         #edit-post-form .post-meta-fields .question-checkbox,
4760         #edit-post-form .post-meta-fields .question-checkbox + label {
4761                 grid-column: 6;
4762                 margin-left: unset;
4763         }
4764         #edit-post-form .post-meta-fields input[type='radio'] + label {
4765                 align-self: start;
4766         }
4767         #edit-post-form .textarea-container:focus-within textarea {
4768                 height: calc(100% - 101px);
4769                 min-height: unset;
4770         }
4771
4772         #markdown-hints-checkbox,
4773         #markdown-hints-checkbox + label {
4774                 display: none;
4775         }
4776
4777         #edit-post-form div:last-child {
4778                 clear: both;
4779                 overflow: auto;
4780         }
4781         #edit-post-form input[type='submit'] {
4782                 float: none;
4783                 display: block;
4784                 font-size: 1.5rem;
4785                 margin: 1rem auto 1.5rem auto;
4786                 padding: 6px 12px 8px 12px;
4787         }
4788 }
4789
4790 /*===================*/
4791 /* TABLE OF CONTENTS */
4792 /*===================*/
4793
4794 @media only screen and (max-width: 900px) {
4795         .contents {
4796                 float: none;
4797                 display: table;
4798                 max-width: none;
4799                 margin-left: auto;
4800                 margin-right: auto;
4801         }
4802 }
4803 @media only screen and (max-width: 520px) {
4804         .contents {
4805                 max-width: 100%;
4806                 margin: 1em auto 0 auto;
4807                 display: table;
4808         }
4809         .contents-head {
4810                 font-size: 1.2em;
4811         }
4812         div.post-body .contents ul {
4813                 font-size: unset;
4814         }
4815 }
4816
4817 /*========================*/
4818 /* QUALIFIED HYPERLINKING */
4819 /*========================*/
4820
4821 @media only screen and (max-width: 520px) {
4822         .qualified-linking-toolbar {
4823                 right: -5em;
4824         }
4825 }
4826
4827 } /* END MOBILE LAYOUT */
4828
4829
4830 /**************/
4831 /* THEME LESS */
4832 /**************/
4833
4834 body {
4835         color: #000;
4836         font-family: 'Mundo Sans', 'Helvetica', sans-serif;
4837         font-weight: 300;
4838         background-color: #fff;
4839 }
4840 #content {
4841         line-height: 1.55;
4842         padding: 30px 20px 0 90px;
4843 }
4844 #content.comment-thread-page {
4845         padding: 0 0 0 60px;
4846 }
4847 #ui-elements-container {
4848         visibility: hidden;
4849 }
4850
4851 /* Compensating for Linux/Windows being terrible. */
4852
4853 .post-meta > *:not(.post-section),
4854 .comment-meta > *,
4855 #primary-bar a,
4856 #bottom-bar a,
4857 #secondary-bar a,
4858 #secondary-bar button,
4859 #nav-item-search > *,
4860 .page-toolbar > *,
4861 #top-nav-bar > *,
4862 .post-body a,
4863 .comment-body a {
4864         text-shadow: none;
4865 }
4866
4867 /* Compensating for Safari being terrible. */
4868
4869 @media not all and (min-resolution:.001dpcm) { @media {
4870         .post-meta > *:not(.post-section),
4871         .comment-meta > *,
4872         #primary-bar a,
4873         #secondary-bar a,
4874     #secondary-bar button,
4875         #bottom-bar a,
4876         #nav-item-search > *,
4877         .page-toolbar > *,
4878         #top-nav-bar > *,
4879         .post-body a,
4880         .comment-body a {
4881                 text-shadow: 0 0 1px #888;
4882         }
4883 }}
4884
4885 /*=========*/
4886 /* NAV BAR */
4887 /*=========*/
4888
4889 /*= Layout (desktop) =*/
4890
4891 @media not screen and (hover: none), not screen and (-moz-touch-enabled) {
4892         .nav-inner {
4893                 font-size: 1.125em;
4894                 padding: 0.5rem 0.75rem;
4895                 text-align: right;
4896         }
4897         #secondary-bar .nav-inner {
4898                 font-size: 0.875em;
4899                 padding: 0.5rem 0.75rem;
4900         }
4901         #primary-bar,
4902         #secondary-bar {
4903                 margin: 0;
4904                 flex-flow: column;
4905                 line-height: 1;
4906         }
4907         #primary-bar {
4908                 position: fixed;
4909                 width: inherit;
4910                 min-width: inherit;
4911                 max-width: inherit;
4912                 left: 0;
4913                 right: 0;
4914                 margin: auto;
4915                 align-items: flex-start;
4916                 pointer-events: none;
4917         }
4918         #primary-bar > * {
4919                 position: relative;
4920                 right: 47px;
4921                 width: 112px;
4922                 pointer-events: auto;
4923         }
4924         #nav-item-archive,
4925         #nav-item-about {
4926                 position: fixed;
4927                 transform: translateX(-106px);
4928                 width: 80px;
4929         }
4930         #content.comment-thread-page #nav-item-archive,
4931         #content.comment-thread-page #nav-item-about {
4932                 transform: translateX(-76px);
4933         }
4934
4935         #nav-item-home {
4936                 padding-top: 0.5em;
4937         }
4938
4939         #bottom-bar .nav-inner {
4940                 text-align: center;
4941                 padding: 0.75em;
4942         }
4943 }
4944
4945 /*= Styling =*/
4946
4947 #bottom-bar .nav-item a::before {
4948         font-weight: 300;
4949 }
4950
4951 .nav-bar a,
4952 .nav-bar a:visited {
4953         color: #acd2af;
4954 }
4955 .nav-bar a:hover {
4956         color: #79a97e;
4957 }
4958
4959 /* Accesskey hints */
4960
4961 .nav-inner::after {
4962         display: none;
4963 }
4964
4965 /* "Tabs" */
4966
4967 .nav-current {
4968         font-weight: 500;
4969 }
4970
4971 #nav-item-recent-comments .nav-inner span {
4972         display: none;
4973 }
4974 #nav-item-login {
4975         position: absolute;
4976         top: 0;
4977         right: 0;
4978         padding-right: 1.5em;
4979 }
4980
4981 /* Search tab */
4982
4983 #nav-item-search {
4984         position: absolute;
4985         top: 0;
4986         left: 4.75em;
4987         width: 400px;
4988 }
4989 #nav-item-search .nav-inner {
4990         padding: 1px;
4991         display: flex;
4992 }
4993 #nav-item-search form::before {
4994         font-size: 1.125em;
4995         color: #e6e6e6;
4996         font-weight: 400;
4997         padding: 5px;
4998         transition: color 0.15s ease;
4999 }
5000 #nav-item-search form:focus-within::before {
5001         color: #92c396;
5002 }
5003 #nav-item-search button {
5004         border: none;
5005         font-weight: 300;
5006         padding: 6px;
5007         height: 23px;
5008 }
5009 #nav-item-search form:not(:focus-within) button:not(:hover) {
5010         color: #ddd;
5011 }
5012 #nav-item-search input {
5013         width: unset;
5014         flex: 1 0 auto;
5015         font-family: Inconsolata, monospace;
5016         padding: 2px 1px;
5017         margin: 0 0 0 2px;
5018 }
5019 #nav-item-search input::placeholder {
5020         color: #d00;
5021         font-weight: normal;
5022 }
5023
5024 /* Inbox indicator */
5025
5026 #inbox-indicator::before {
5027         color: #eaeaea;
5028         top: 3px;
5029         font-size: 1.125em;
5030 }
5031
5032 /* Decorative bottom bar */
5033
5034 #bottom-bar.decorative {
5035         margin-top: 0.25em;
5036 }
5037 #bottom-bar.decorative::before,
5038 #bottom-bar.decorative::after {
5039         content: "GW";
5040         display: block;
5041         text-align: center;
5042         padding: 0.25em 0 1em 0;
5043 }
5044 #bottom-bar.decorative::before {
5045         width: 100%;
5046         color: transparent;
5047         background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAMdXV1QUAACwAAAAAAQABAAACAkQBADs=');
5048         background-repeat: repeat-x;
5049         background-position: center 35%;
5050         margin: 0 30px;
5051         filter: opacity(0.5);
5052 }
5053 #bottom-bar.decorative::after {
5054         color: #eee;
5055         position: absolute;
5056         left: 0;
5057         right: 0;
5058         margin: auto;
5059         background-color: #fff;
5060         padding-right: 4px;
5061         padding-left: 4px;
5062 }
5063 @supports (width: -moz-fit-content) {
5064         #bottom-bar.decorative::after {
5065                 width: -moz-fit-content;
5066         }
5067 }
5068 @supports (width: fit-content) {
5069         #bottom-bar.decorative::after {
5070                 width: fit-content;
5071         }
5072 }
5073
5074 /*= Top pagination UI hover tooltips =*/
5075
5076 #top-nav-bar a::after,
5077 #bottom-bar a::after {
5078         color: #000;
5079 }
5080
5081 /*==============*/
5082 /* PAGE TOOLBAR */
5083 /*==============*/
5084
5085 .page-toolbar {
5086         padding: 0 0 0 0;
5087         margin: 0;
5088         white-space: nowrap;
5089         position: fixed;
5090         width: 120px;
5091 }
5092 .page-toolbar > * {
5093         display: block;
5094         text-align: right;
5095         line-height: 1;
5096         padding: 0.5rem 0.75rem;
5097         position: relative;
5098         right: 56px;
5099 }
5100 @media not screen and (hover: none), not screen and (-moz-touch-enabled) {
5101         .page-toolbar {
5102                 width: inherit;
5103                 min-width: inherit;
5104                 max-width: inherit;
5105                 left: 0;
5106                 right: 0;
5107                 margin-right: unset;
5108                 margin: auto;
5109                 align-items: flex-start;
5110                 pointer-events: none;
5111         }
5112         .page-toolbar > * {
5113                 right: 47px;
5114                 width: 112px;
5115                 margin-left: unset;
5116                 pointer-events: auto;
5117         }
5118 }
5119
5120 .page-toolbar button {
5121         padding: 0;
5122 }
5123
5124 .page-toolbar .button::before {
5125         font-size: 0.875em;
5126         font-weight: 400;
5127 }
5128
5129 .new-private-message {
5130         white-space: normal;
5131         line-height: 1.15;
5132 }
5133 .new-private-message::before {
5134         opacity: 0.7;
5135 }
5136
5137 .logout-button {
5138         color: #d33;
5139         font-weight: 300;
5140 }
5141
5142 /*===================*/
5143 /* TOP PAGINATION UI */
5144 /*===================*/
5145
5146 #top-nav-bar {
5147         justify-content: flex-start;
5148         padding: 1em 0 0.25em 0;
5149         font-size: 1em;
5150         margin: 0 0 0 -4px;
5151         grid-column: 1;
5152 }
5153 #top-nav-bar .page-number {
5154         line-height: 1.5;
5155 }
5156 #top-nav-bar .page-number span {
5157         display: none;
5158 }
5159 #top-nav-bar a::before {
5160         font-weight: 400;
5161 }
5162 #top-nav-bar a.disabled {
5163         visibility: visible;
5164         opacity: 0.4;
5165 }
5166
5167 #content.user-page > #top-nav-bar {
5168         justify-content: center;
5169         grid-column: 2;
5170         padding: 0;
5171 }
5172 .archive-nav + #top-nav-bar {
5173         margin: 0.5em 0 0 -4px;
5174         padding: 0 0 0.25em 0;
5175 }
5176
5177 /*==============*/
5178 /* SUBLEVEL NAV */
5179 /*==============*/
5180
5181 .sublevel-nav .sublevel-item {
5182         color: #92c396;
5183         padding: 4px 10px 1px 10px;
5184         background-color: #fff;
5185 }
5186 .sublevel-nav .sublevel-item:hover,
5187 .sublevel-nav .sublevel-item.selected {
5188         background-color: #c4dbc4;
5189         color: #fff;
5190 }
5191 .sublevel-nav .sublevel-item:not(.selected):active {
5192         background-color: #92c396;
5193 }
5194
5195 .sublevel-nav:not(.sort) .sublevel-item {
5196         border-style: solid;
5197         border-color: #c4dbc4;
5198         border-width: 1px 0 1px 1px;
5199 }
5200 .sublevel-nav:not(.sort) .sublevel-item:first-child {
5201         border-radius: 8px 0 0 8px;
5202 }
5203 .sublevel-nav:not(.sort) .sublevel-item:last-child {
5204         border-width: 1px;
5205         border-radius: 0 8px 8px 0;
5206 }
5207
5208 /*=====================*/
5209 /* SORT ORDER SELECTOR */
5210 /*=====================*/
5211 #content.index-page .sublevel-nav.sort {
5212         grid-row: 2;
5213         grid-column: 3;
5214         justify-self: right;
5215 }
5216
5217 .sublevel-nav.sort {
5218         padding: 18px 0 0 0;
5219         border-radius: 8px;
5220         pointer-events: none;
5221 }
5222 .sublevel-nav.sort .sublevel-item {
5223         padding: 7px 8px 3px 7px;
5224         text-transform: uppercase;
5225         pointer-events: auto;
5226 }
5227 .sublevel-nav.sort::before {
5228         text-transform: uppercase;
5229         color: #444;
5230         z-index: 1;
5231 }
5232 .sublevel-nav.sort::after {
5233         content: "";
5234         position: absolute;
5235         display: block;
5236         top: 0;
5237         left: 0;
5238         width: 100%;
5239         height: 100%;
5240         border-radius: 6px;
5241         box-shadow:
5242                 0 18px 0 0 #fff inset,
5243                 0 0 0 1px #c4dbc4 inset,
5244                 0 18px 0 1px #c4dbc4 inset,
5245                 0 0 0 4px #fff;
5246 }
5247
5248 /*============*/
5249 /* UI TOGGLES */
5250 /*============*/
5251
5252 @media not screen and (hover: none), not screen and (-moz-touch-enabled) {
5253         #site-nav-ui-toggle,
5254         #post-nav-ui-toggle,
5255         #appearance-adjust-ui-toggle {
5256                 visibility: visible;
5257                 position: absolute;
5258                 display: inline-block;
5259                 border-radius: 50%;
5260                 z-index: 1;
5261         }
5262         #site-nav-ui-toggle button,
5263         #post-nav-ui-toggle button,
5264         #appearance-adjust-ui-toggle button {
5265                 font-family: Font Awesome;
5266                 font-weight: 400;
5267                 font-size: 32px;
5268                 padding: 10px;
5269                 opacity: 0.4;
5270                 -webkit-tap-highlight-color: transparent;
5271                 transition:
5272                         transform 0.2s ease,
5273                         opacity 0.15s ease;
5274         }
5275         #site-nav-ui-toggle button:hover,
5276         #post-nav-ui-toggle button:hover,
5277         #appearance-adjust-ui-toggle button:hover {
5278                 opacity: 1.0;
5279         }
5280         #site-nav-ui-toggle button::selection,
5281         #post-nav-ui-toggle button::selection,
5282         #appearance-adjust-ui-toggle button::selection {
5283                 background-color: transparent;
5284         }
5285         #site-nav-ui-toggle button::-moz-focus-inner,
5286         #post-nav-ui-toggle button::-moz-focus-inner,
5287         #appearance-adjust-ui-toggle button::-moz-focus-inner {
5288                 border: none;
5289         }
5290         #post-nav-ui-toggle.highlighted,
5291         #appearance-adjust-ui-toggle.highlighted {
5292                 transform: scale(1.33);
5293         }
5294         #site-nav-ui-toggle.highlighted button {
5295                 transform: scale(1.33);
5296         }
5297         #site-nav-ui-toggle.highlighted button,
5298         #post-nav-ui-toggle.highlighted button,
5299         #appearance-adjust-ui-toggle.highlighted button {
5300                 opacity: 1.0;
5301                 text-shadow:
5302                         0 0 1px #fff,
5303                         0 0 1px #64ff4c,
5304                         0 0 3px #64ff4c,
5305                         0 0 5px #64ff4c,
5306                         0 0 8px #64ff4c;
5307         }
5308
5309         #site-nav-ui-toggle {
5310                 top: 0;
5311                 left: 12px;
5312                 pointer-events: none;
5313         }
5314         #site-nav-ui-toggle button {
5315                 font-weight: 300;
5316                 position: relative;
5317                 left: 0;
5318                 transition:
5319                         left 0.2s ease,
5320                         opacity 0.2s ease,
5321                         width 0.2s ease;
5322                 pointer-events: auto;
5323         }
5324         #site-nav-ui-toggle button:active {
5325                 transform: none;
5326         }
5327         #site-nav-ui-toggle button.engaged {
5328                 left: -92px;
5329                 width: 2.125rem;
5330                 overflow: hidden;
5331         }
5332         #site-nav-ui-toggle button.engaged::before {
5333                 content: "\F00D";
5334                 padding: 0 0.25em 0 0;
5335         }
5336
5337         #primary-bar,
5338         #secondary-bar #nav-item-archive,
5339         #secondary-bar #nav-item-about,
5340         .page-toolbar {
5341                 visibility: hidden;
5342                 top: 0;
5343                 max-height: 0px;
5344         }
5345         #primary-bar,
5346         #secondary-bar #nav-item-archive,
5347         #secondary-bar #nav-item-about,
5348         .page-toolbar {
5349                 opacity: 0.0;
5350         }
5351         #primary-bar,
5352         #secondary-bar #nav-item-archive,
5353         #secondary-bar #nav-item-about,
5354         .page-toolbar {
5355                 transition:
5356                         top 0.2s ease,
5357                         max-height 0.2s ease,
5358                         visibility 0.2s ease,
5359                         opacity 0.2s ease;
5360         }
5361         #nav-item-search,
5362         #nav-item-login {
5363                 visibility: visible;
5364         }
5365         #primary-bar.engaged,
5366         #secondary-bar.engaged #nav-item-archive,
5367         #secondary-bar.engaged #nav-item-about,
5368         .page-toolbar.engaged {
5369                 visibility: visible;
5370                 max-height: 1000px;
5371         }
5372         #primary-bar.engaged,
5373         #secondary-bar.engaged #nav-item-archive,
5374         #secondary-bar.engaged #nav-item-about,
5375         .page-toolbar.engaged {
5376                 opacity: 1.0;
5377         }
5378         #primary-bar.engaged {
5379                 top: 0;
5380         }
5381         #secondary-bar.engaged #nav-item-archive {
5382                 top: 196px;
5383         }
5384         #secondary-bar.engaged #nav-item-about {
5385                 top: 230px;
5386         }
5387         .page-toolbar.engaged {
5388                 top: 280px;
5389         }
5390
5391         #post-nav-ui-toggle {
5392                 bottom: 10px;
5393                 right: -30px;
5394         }
5395         #content.comment-thread-page ~ #ui-elements-container #post-nav-ui-toggle {
5396                 right: -54px;
5397         }
5398         #post-nav-ui-toggle button.engaged {
5399                 transform: rotate(-90deg);
5400         }
5401
5402         #quick-nav-ui,
5403         #new-comment-nav-ui,
5404         #hns-date-picker {
5405                 bottom: 0;
5406                 max-height: 0px;
5407                 opacity: 0.0;
5408                 transition:
5409                         bottom 0.2s ease,
5410                         max-height 0.2s ease,
5411                         opacity 0.2s ease,
5412                         visibility 0.2s ease;
5413         }
5414         #quick-nav-ui.engaged,
5415         #new-comment-nav-ui.engaged,
5416         #hns-date-picker.engaged {
5417                 visibility: visible;
5418                 max-height: 1000px;
5419                 opacity: 1.0;
5420         }
5421
5422         #quick-nav-ui {
5423                 right: -24px;
5424         }
5425         #content.post-page ~ #ui-elements-container #quick-nav-ui {
5426                 right: -48px;
5427         }
5428         #quick-nav-ui.engaged {
5429                 bottom: 64px;
5430         }
5431         #quick-nav-ui a {
5432                 font-weight: 400;
5433         }
5434
5435         #new-comment-nav-ui {
5436                 right: -49px;
5437         }
5438         #new-comment-nav-ui.engaged {
5439                 bottom: 216px;
5440         }
5441
5442         #hns-date-picker {
5443                 right: -186px;
5444         }
5445         #hns-date-picker.engaged {
5446                 bottom: 247px;
5447         }
5448         @media only screen and (max-width: 1440px) {
5449                 #hns-date-picker {
5450                         background-color: rgba(255,255,255,0.95);
5451                         right: -18px;
5452                 }
5453                 #hns-date-picker::before {
5454                         display: none;
5455                 }
5456                 #hns-date-picker input {
5457                         background-color: #fff;
5458                 }
5459                 #hns-date-picker span {
5460                         text-shadow:
5461                                 0 0 1px #fff,
5462                                 0 0 3px #fff,
5463                                 0 0 5px #fff,
5464                                 0 0 8px #fff,
5465                                 0 0 13px #fff,
5466                                 0 0 21px #fff;
5467                 }
5468                 #hns-date-picker.engaged {
5469                         bottom: 238px;
5470                 }
5471         }
5472
5473         #appearance-adjust-ui-toggle {
5474                 bottom: 10px;
5475                 left: 10px;
5476         }
5477         #appearance-adjust-ui-toggle button.engaged {
5478                 transform: rotate(-90deg);
5479         }
5480
5481         #comments-view-mode-selector,
5482         #theme-selector,
5483         #width-selector,
5484         #text-size-adjustment-ui,
5485         #theme-tweaker-toggle {
5486                 pointer-events: none;
5487                 visibility: visible;
5488                 opacity: 0.0;
5489                 transition:
5490                         opacity 0.35s ease;
5491         }
5492         @supports (width: -moz-fit-content) {
5493         #theme-tweaker-toggle {
5494                 width: -moz-fit-content;
5495         }
5496 }
5497 @supports (width: fit-content) {
5498         #theme-tweaker-toggle {
5499                 width: fit-content;
5500         }
5501 }
5502         #comments-view-mode-selector::after,
5503         #theme-selector::after,
5504         #theme-selector::before,
5505         #width-selector::after,
5506         #text-size-adjustment-ui::after {
5507                 content: "";
5508                 background-color: #fff;
5509                 display: block;
5510                 position: absolute;
5511                 width: 100%;
5512                 height: 100%;
5513                 top: 0;
5514                 left: 0;
5515         }
5516         #comments-view-mode-selector.engaged,
5517         #theme-selector.engaged,
5518         #width-selector.engaged,
5519         #text-size-adjustment-ui.engaged,
5520         #theme-tweaker-toggle.engaged {
5521                 pointer-events: auto;
5522                 opacity: 1.0;
5523         }
5524
5525         #comments-view-mode-selector {
5526                 left: -45px;
5527                 top: calc(100% - 180px);
5528         }
5529         #comments-view-mode-selector::after {
5530                 max-height: 1000px;
5531                 transition:
5532                         max-height 0.2s ease;
5533         }
5534         #comments-view-mode-selector.engaged::after {
5535                 max-height: 0px;
5536         }
5537
5538         #theme-selector {
5539                 display: block;
5540                 left: 16px;
5541                 top: calc(100% - 316px);
5542                 opacity: 1.0;
5543                 visibility: hidden;
5544                 transition:
5545                         visibility 0.2s ease;
5546         }
5547         #theme-selector.engaged {
5548                 visibility: visible;
5549         }
5550         #theme-selector::after,
5551         #theme-selector::before {
5552                 top: -50px;
5553                 height: calc(100% + 60px);
5554                 max-height: 300px;
5555                 transition:
5556                         max-height 0.2s ease;
5557                 z-index: 1;
5558         }
5559         #theme-selector.engaged::after,
5560         #theme-selector.engaged::before {
5561                 max-height: 0px;
5562         }
5563         #theme-selector::before {
5564                 z-index: 0;
5565         }
5566
5567         #width-selector {
5568                 display: table;
5569                 left: -68px;
5570                 top: calc(100% - 48px);
5571         }
5572         #width-selector::after {
5573                 max-width: 100px;
5574                 transition:
5575                         max-width 0.15s ease;
5576         }
5577         #width-selector.engaged::after {
5578                 max-width: 0px;
5579         }
5580
5581         #text-size-adjustment-ui {
5582                 left: -67px;
5583                 top: calc(100% - 80px);
5584         }
5585         #text-size-adjustment-ui::after {
5586                 max-width: 1000px;
5587                 max-height: 1000px;
5588                 transition:
5589                         max-width 0.2s ease,
5590                         max-height 0.2s ease;
5591         }
5592         #text-size-adjustment-ui.engaged::after {
5593                 max-width: 0px;
5594                 max-height: 0px;
5595         }
5596
5597         #theme-tweaker-toggle {
5598                 left: 19px;
5599                 top: calc(100% - 356px);
5600                 visibility: hidden;
5601                 transition:
5602                         visibility 0.5s ease-out;
5603         }
5604         #theme-tweaker-toggle.engaged {
5605                 visibility: visible;
5606         }
5607         @-moz-document url-prefix() {
5608                 #theme-tweaker-toggle {
5609                         left: 18px;
5610                 }
5611         }
5612         #theme-tweaker-toggle button {
5613                 font-weight: 400;
5614         }
5615
5616         #theme-tweaker-ui {
5617                 visibility: visible;
5618         }
5619 }
5620
5621 /*================*/
5622 /* WIDTH SELECTOR */
5623 /*================*/
5624
5625 #width-selector button {
5626         box-shadow:
5627                 0 0 0 4px #fff inset,
5628                 0 0 0 5px #aaa inset;
5629 }
5630 #width-selector button:hover,
5631 #width-selector button.selected {
5632         box-shadow:
5633                 0 0 0 1px #fff inset,
5634                 0 0 0 2px #aaa inset,
5635                 0 0 0 4px #fff inset,
5636                 0 0 0 5px #aaa inset;
5637 }
5638
5639 /*================*/
5640 /* THEME SELECTOR */
5641 /*================*/
5642
5643 #theme-selector button {
5644         box-shadow:
5645                 0 0 0 4px #fff inset,
5646                 0 0 0 5px #999 inset;
5647 }
5648 #theme-selector button:hover,
5649 #theme-selector button.selected {
5650         box-shadow:
5651                 0 0 0 1px #fff inset,
5652                 0 0 0 2px #999 inset,
5653                 0 0 0 4px #fff inset,
5654                 0 0 0 5px #999 inset;
5655 }
5656
5657 #theme-selector button::before {
5658         font-size: 0.9375em;
5659         font-weight: 300;
5660         padding: 6px;
5661         color: #aaa;
5662         background-color: #fff;
5663 }
5664 #theme-selector button:hover::before,
5665 #theme-selector button.selected::before {
5666         color: #000;
5667 }
5668
5669 /*======================*/
5670 /* THEME TWEAKER TOGGLE */
5671 /*======================*/
5672
5673 #theme-tweaker-toggle button {
5674         color: #777;
5675 }
5676
5677 /*=================*/
5678 /* QUICKNAV WIDGET */
5679 /*=================*/
5680
5681 #quick-nav-ui a {
5682         color: #acd2af;
5683         border-radius: 4px;
5684         text-decoration: none;
5685         transition:
5686                 color 0.15s ease,
5687                 box-shadow 0.15s ease-out;
5688 }
5689 #quick-nav-ui a[href='#bottom-bar'] {
5690         line-height: 1.8;
5691 }
5692 #quick-nav-ui a:active {
5693         transform: scale(0.9);
5694 }
5695 #quick-nav-ui a[href='#comments'].no-comments {
5696         opacity: 0.4;
5697         color: #ddd;
5698 }
5699 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
5700         #quick-nav-ui a:hover {
5701                 color: #79a97e;
5702                 box-shadow:
5703                         0 0 0 1px rgba(121, 169, 126, 0.3),
5704                         0 0 0 2px #fff;
5705         }
5706         #quick-nav-ui a:focus:not(:hover) {
5707                 transform: none;
5708                 text-shadow: none;
5709         }
5710 }
5711
5712 /*======================*/
5713 /* NEW COMMENT QUICKNAV */
5714 /*======================*/
5715
5716 #new-comment-nav-ui .new-comments-count {
5717         color: #888;
5718         text-shadow: 0.5px 0.5px 0 #fff;
5719         top: 2px;
5720 }
5721 #new-comment-nav-ui .new-comments-count::after {
5722         color: #777;
5723 }
5724 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
5725         color: #e6e6e6;
5726 }
5727
5728 /*=================*/
5729 /* HNS DATE PICKER */
5730 /*=================*/
5731
5732 #hns-date-picker span {
5733         color: #999;
5734         font-weight: 400;
5735 }
5736 #hns-date-picker input {
5737         border: 1px solid #ddd;
5738         color: #999;
5739         padding: 3px 3px 0 3px;
5740 }
5741 #hns-date-picker input:focus {
5742         color: #000;
5743 }
5744
5745 /*======================*/
5746 /* ANTI-KIBITZER TOGGLE */
5747 /*======================*/
5748
5749 #anti-kibitzer-toggle {
5750         bottom: unset;
5751         top: 30px;
5752         visibility: visible;
5753         right: -48px;
5754 }
5755 #anti-kibitzer-toggle button::before {
5756         font-weight: 300;
5757 }
5758 #anti-kibitzer-toggle button::before,
5759 #anti-kibitzer-toggle button::after {
5760         opacity: 0.2;
5761 }
5762 #anti-kibitzer-toggle button:hover::before,
5763 #anti-kibitzer-toggle button:hover::after {
5764         opacity: 1.0;
5765 }
5766
5767 /*======================*/
5768 /* TEXT SIZE ADJUSTMENT */
5769 /*======================*/
5770
5771 #text-size-adjustment-ui button {
5772         font-weight: 400;
5773 }
5774
5775 /*=============================*/
5776 /* COMMENTS VIEW MODE SELECTOR */
5777 /*=============================*/
5778
5779 #comments-view-mode-selector a {
5780         color: #acd2af;
5781         opacity: 0.5;
5782 }
5783
5784 /*==========*/
5785 /* ARCHIVES */
5786 /*==========*/
5787
5788 .archive-nav {
5789         border: 1px solid transparent;
5790         margin: 1.25em 0 0 0;
5791         padding: 0;
5792 }
5793 .archive-nav *[class^='archive-nav-item'] {
5794         color: #92c396;
5795         border-style: solid;
5796         border-color: #c4dbc4;
5797         border-width: 1px 0 1px 1px;
5798 }
5799 .archive-nav div[class^='archive-nav-']:nth-of-type(2) *[class^='archive-nav-item'] {
5800         border-top-width: 0;
5801         border-bottom-width: 0;
5802 }
5803 .archive-nav div[class^='archive-nav-']:last-of-type *[class^='archive-nav-item'] {
5804         border-bottom-width: 1px;
5805 }
5806 .archive-nav *[class^='archive-nav-item']:last-child {
5807         border-right-width: 1px;
5808 }
5809 .archive-nav a:hover,
5810 .archive-nav span[class^='archive-nav-item'] {
5811         background-color: #c4dbc4;
5812         color: #fff;
5813 }
5814
5815 .archive-nav a:active {
5816         background-color: #92c396;
5817 }
5818
5819 /*==========*/
5820 /* LISTINGS */
5821 /*==========*/
5822
5823 h1.listing,
5824 #content.search-results-page h1.listing {
5825         margin: 0.7em 20px 0.1em 0;
5826         max-width: calc(100% - 20px);
5827         font-family: 'Caecilia', 'Helvetica', sans-serif, 'Font Awesome';
5828         font-size: 1.25rem;
5829         line-height: 1.2;
5830 }
5831
5832 h1.listing a[href^="http"] {
5833         color: #bbb;
5834         font-weight: 400;
5835         font-size: 0.8125em;
5836         top: 3px;
5837 }
5838 h1.listing a[href^="/posts"] {
5839         font-weight: 300;
5840         text-shadow: none;
5841         color: #444;
5842 }
5843 @-moz-document url-prefix() {
5844         h1.listing a[href^="/posts"] {
5845                 text-shadow: none;
5846         }
5847 }
5848 @media not all and (min-resolution:.001dpcm) { @media {
5849         h1.listing a[href^="/posts"] {
5850                 color: #000;
5851         }
5852 }}
5853
5854 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
5855         h1.listing a:hover,
5856         h1.listing a:focus {
5857                 color: #92c396;
5858                 background-color: rgba(255,255,255,0.85);
5859         }
5860         h1.listing:focus-within::before {
5861                 color: #79a97e;
5862                 font-weight: 400;
5863                 left: -0.625em;
5864         }
5865         h1.listing a[href^="http"]:hover {
5866                 color: #79a97e;
5867         }
5868         h1.listing a[href^="http"]:focus {
5869                 color: #a0d3a2;
5870                 text-decoration: none;
5871                 border-bottom: 2px dotted #a0d3a2;
5872         }
5873 }
5874
5875 h1.listing .edit-post-link {
5876         padding: 5px 3px 24px 0.5em;
5877         top: 0;
5878         right: 0;
5879 }
5880 h1.listing .edit-post-link:hover {
5881         text-decoration: none;
5882 }
5883 #content.user-page h1.listing .edit-post-link {
5884         background-color: #fff;
5885 }
5886
5887 /*======*/
5888 /* SPAM */
5889 /*======*/
5890
5891 h1.listing.spam {
5892         opacity: 0.15;
5893 }
5894 h1.listing.spam + .post-meta {
5895         opacity: 0.35;
5896 }
5897 h1.listing.spam:hover,
5898 h1.listing.spam + .post-meta:hover,
5899 h1.listing.spam:hover + .post-meta {
5900         opacity: 1.0;
5901 }
5902
5903 /*===================*/
5904 /* LISTING POST-META */
5905 /*===================*/
5906
5907 h1.listing + .post-meta {
5908         font-size: 0.875rem;
5909         margin: 0 20px 0 1px;
5910 }
5911
5912 h1.listing + .post-meta > * {
5913         color: #bbb;
5914         margin: 0 1.25em 0 0;
5915 }
5916 h1.listing + .post-meta a {
5917         color: #92c396;
5918 }
5919 h1.listing + .post-meta a:hover {
5920         color: #79a97e;
5921 }
5922 h1.listing + .post-meta .karma-value {
5923         cursor: default;
5924 }
5925 h1.listing + .post-meta .lw2-link {
5926         display: none;
5927 }
5928 h1.listing + .post-meta .post-section {
5929         overflow: visible;
5930         order: 1;
5931 }
5932 h1.listing + .post-meta .post-section::before {
5933         position: relative;
5934         left: unset;
5935         top: -1px;
5936 }
5937
5938 /*============*/
5939 /* USER PAGES */
5940 /*============*/
5941
5942 #content.user-page h1.page-main-heading,
5943 #content.user-page .user-stats {
5944         grid-row: 1;
5945 }
5946 #content.user-page #comments-list-mode-selector,
5947 #content.user-page .sublevel-nav.sort {
5948         grid-row: 2 / span 2;
5949 }
5950 #content.user-page .sublevel-nav {
5951         grid-row: 2;
5952         margin-bottom: 1em;
5953 }
5954 #content.user-page #top-nav-bar {
5955         grid-row: 3;
5956 }
5957
5958 #content.user-page h1.page-main-heading,
5959 #content.conversation-page h1.page-main-heading {
5960         font-family: 'Caecilia', 'Helvetica', sans-serif;
5961         font-weight: normal;
5962         margin: 0.5em 0 0 0;
5963 }
5964 #content.user-page h1.page-main-heading {
5965         border-bottom: 1px solid #e6e6e6;
5966         line-height: 1;
5967 }
5968
5969 #content.user-page h1.listing,
5970 #content.user-page h1.listing + .post-meta {
5971         border-color: #ddd;
5972         border-style: solid;
5973 }
5974 #content.user-page h1.listing {
5975         max-width: 100%;
5976         padding: 6px 8px 0 8px;
5977         border-width: 1px 1px 0 1px;
5978         margin: 1rem 0 0 0;
5979 }
5980 #content.own-user-page h1.listing,
5981 h1.listing.own-post-listing {
5982         padding-right: 36px;
5983 }
5984 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
5985         #content.user-page h1.listing:focus-within::before {
5986                 left: -0.625em;
5987         }
5988 }
5989 #content.user-page h1.listing + .post-meta {
5990         margin: 0 0 1rem 0;
5991         padding: 12px 8px 3px 8px;
5992         border-width: 0 1px 1px 1px;
5993         line-height: 1;
5994 }
5995
5996 #content.conversations-user-page h1.listing {
5997         padding: 8px 6px 28px 10px;
5998         font-size: 1.25rem;
5999 }
6000 #content.conversations-user-page h1.listing + .post-meta {
6001         padding: 4px 10px 0.5em 6px;
6002         margin: 0;
6003 }
6004
6005 .user-stats .karma-total {
6006         font-weight: 500;
6007 }
6008
6009 /*===============*/
6010 /* CONVERSATIONS */
6011 /*===============*/
6012
6013 /*============*/
6014 /* LOGIN PAGE */
6015 /*============*/
6016
6017 .login-container form h1 {
6018         font-family: 'Caecilia', 'Helvetica', sans-serif;
6019         font-weight: 300;
6020 }
6021
6022 .login-container form label {
6023         color: #aaa;
6024 }
6025
6026 /* “Create account” form */
6027
6028 #signup-form {
6029         border: 1px solid #e4e4e4;
6030 }
6031 #signup-form input[type='submit'] {
6032         padding: 8px 12px 6px 12px;
6033 }
6034
6035 /* Log in tip */
6036
6037 .login-container .login-tip {
6038         border: 1px solid #eee;
6039 }
6040
6041 /* Message box */
6042
6043 .error-box {
6044         border: 1px solid red;
6045         background-color: #faa;
6046 }
6047 .success-box {
6048         border: 1px solid green;
6049         background-color: #afa;
6050 }
6051
6052 /*=====================*/
6053 /* PASSWORD RESET PAGE */
6054 /*=====================*/
6055
6056 .reset-password-container input[type='submit'] {
6057         background-color: #e4e4e4;
6058         border: 1px solid #ccc;
6059         font-weight: bold;
6060 }
6061
6062 /*===================*/
6063 /* TABLE OF CONTENTS */
6064 /*===================*/
6065
6066 .contents {
6067         font-family: 'Mundo Sans', 'Helvetica', sans-serif;
6068         padding-top: 0;
6069         margin-top: 1em;
6070         background-color: #fff;
6071 }
6072 .post-body .contents ul {
6073         font-size: 0.8125em;
6074 }
6075 .post-body .contents li::before {
6076         color: #bbb;
6077 }
6078
6079 /*==================*/
6080 /* POSTS & COMMENTS */
6081 /*==================*/
6082
6083 .post-body,
6084 .comment-body {
6085         font-family: 'Source Serif Pro', 'Helvetica', sans-serif;
6086         text-shadow: 0 0 0 rgba(0,0,0,0.7);
6087         font-weight: 300;
6088 }
6089
6090 /*=======*/
6091 /* POSTS */
6092 /*=======*/
6093
6094 .post {
6095         overflow: visible;
6096         padding: 2em 0 0 0;
6097 }
6098
6099 .post-body {
6100         font-size: 1.25rem;
6101 }
6102
6103 h1.post-title {
6104         font-size: 2.75rem;
6105         font-family: 'Caecilia', 'Helvetica', sans-serif;
6106         font-weight: 300;
6107         line-height: 1.1;
6108         margin: 1.375em 0 0.5em 0;
6109 }
6110
6111 /*===========*/
6112 /* POST-META */
6113 /*===========*/
6114
6115 .post-meta .post-section::before {
6116         color: #dfdfdf;
6117         font-weight: 400;
6118         padding: 1px;
6119 }
6120 .post-meta .post-section.alignment-forum::before {
6121         color: #d6d7ff;
6122 }
6123 .post .post-meta .post-section::before {
6124         position: relative;
6125         top: -3px;
6126 }
6127
6128 a.post-section::before {
6129         transition: color 0.15s ease;
6130 }
6131 a.post-section:hover::before {
6132         color: #79a97e;
6133 }
6134 a.post-section.alignment-forum:hover::before {
6135         color: #999bc1;
6136 }
6137
6138 .post-meta > * {
6139         color: #bbb;
6140 }
6141 .post-meta a,
6142 .post-meta a:visited {
6143         color: #92c396;
6144 }
6145 .post-meta a:hover {
6146         color: #79a97e;
6147 }
6148 .post-meta .lw2-link:hover {
6149         opacity: 1;
6150 }
6151
6152 .post .top-post-meta {
6153         flex-flow: column;
6154         position: relative;
6155 }
6156 .post .top-post-meta .karma,
6157 .post .top-post-meta .author,
6158 .post .top-post-meta .qualified-linking {
6159         margin: auto;
6160 }
6161 @supports (width: -moz-fit-content) {
6162         .post .top-post-meta .karma, .post .top-post-meta .author, .post .top-post-meta .qualified-linking {
6163                 width: -moz-fit-content;
6164         }
6165 }
6166 @supports (width: fit-content) {
6167         .post .top-post-meta .karma, .post .top-post-meta .author, .post .top-post-meta .qualified-linking {
6168                 width: fit-content;
6169         }
6170 }
6171
6172 .post .top-post-meta .karma {
6173         order: -1;
6174         display: flex;
6175         flex-flow: column;
6176 }
6177 .post .top-post-meta .karma .karma-value {
6178         padding: 5px 0 0 0;
6179         color: #999;
6180         font-size: 1.125em;
6181         position: relative;
6182         background-color: #fff;
6183         width: 2.25em;
6184 }
6185 .post .top-post-meta .karma .karma-value::before {
6186         content: "";
6187         position: absolute;
6188         display: block;
6189         background-color: #ccc;
6190         height: 1px;
6191         width: 244px;
6192         top: 50%;
6193         left: -100px;
6194         z-index: -1;
6195 }
6196 .post .top-post-meta .karma .karma-value span {
6197         display: none;
6198 }
6199
6200 .post .post-meta .karma.active-controls::after {
6201         bottom: -32px;
6202         padding: 0 4px;
6203 }
6204 .post .post-meta .karma.active-controls:hover::after {
6205         opacity: 0.7;
6206 }
6207 .post .top-post-meta .karma.active-controls::after {
6208         bottom: 0;
6209         left: calc(100% + 16px);
6210         max-width: unset;
6211         padding: 0;
6212         white-space: nowrap;
6213 }
6214 .post .post-meta .karma .karma-value::after {
6215         top: -20px;
6216 }
6217 .post .post-meta .karma .karma-value:hover::after {
6218         opacity: 0.7;
6219 }
6220 .post .top-post-meta .karma .karma-value::after {
6221         top: -6px;
6222         left: unset;
6223         width: unset;
6224         right: calc(100% + 8px);
6225 }
6226
6227 .post .top-post-meta .author {
6228         padding: 4px 0 0 0;
6229         margin: 0.25em auto;
6230 }
6231 .post .top-post-meta .qualified-linking {
6232         z-index: 1;
6233 }
6234 .post .top-post-meta .qualified-linking label {
6235         margin: 0;
6236 }
6237
6238 .post .top-post-meta .post-section,
6239 .post .top-post-meta .lw2-link {
6240         display: none;
6241 }
6242
6243 .post .top-post-meta .date,
6244 .post .top-post-meta .comment-count {
6245         position: absolute;
6246         right: 100%;
6247 }
6248 .post .top-post-meta .date {
6249         top: calc(100% + 34px);
6250 }
6251 .post .top-post-meta .comment-count {
6252         top: calc(100% + 60px);
6253 }
6254 .post .top-post-meta .date > span,
6255 .post .top-post-meta .comment-count > span {
6256         position: fixed;
6257         transform: translateX(-100%);
6258 }
6259
6260 .post .bottom-post-meta {
6261         padding: 1.75em 0 0 0;
6262         margin: 0.5em 0 1.5em 0;
6263         position: relative;
6264 }
6265 .post .bottom-post-meta::before {
6266         content: "";
6267         position: absolute;
6268         display: block;
6269         background-color: #ddd;
6270         height: 1px;
6271         width: calc(100% - 60px);
6272         top: 0;
6273 }
6274
6275 /*============*/
6276 /* LINK POSTS */
6277 /*============*/
6278
6279 .post.link-post a.link-post-link {
6280         font-family: 'Mundo Sans', 'Helvetica', sans-serif;
6281 }
6282 .post.link-post a.link-post-link::before {
6283         opacity: 0.6;
6284 }
6285 .post.link-post a.link-post-link:hover::before {
6286         opacity: 1;
6287 }
6288 .post.link-post a.link-post-link:focus {
6289         color: #79a97e;
6290         border-bottom: 2px dotted #79a97e;
6291 }
6292
6293 /*==========*/
6294 /* COMMENTS */
6295 /*==========*/
6296
6297 .comments {
6298         padding: 0 0 0 10px;
6299 }
6300 #content > .comment-thread .comment-meta a.date:focus,
6301 #content > .comment-thread .comment-meta a.permalink:focus {
6302         color: #888;
6303         outline: 1px dotted #999;
6304         position: relative;
6305         background-color: #fff;
6306         padding: 0 5px;
6307         left: -5px;
6308 }
6309 #content > .comment-thread .comment-meta a.date:focus + *,
6310 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
6311         margin-left: -10px;
6312 }
6313 #content > .comment-thread .comment-meta a.permalink:focus {
6314         outline: 2px dotted #999;
6315 }
6316 .comment-item {
6317         border: 1px solid #ddd;
6318 }
6319
6320
6321 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item,
6322 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item,
6323 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item,
6324 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item,
6325 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item,
6326 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item,
6327 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item,
6328 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item,
6329 .comment-item .comment-item .comment-item .comment-item .comment-item,
6330 .comment-item .comment-item .comment-item,
6331 .comment-item {
6332         background-color: #f6f6f6;
6333 }
6334 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6335 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6336 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6337 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6338 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6339 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6340 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6341 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6342 .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6343 .comment-item .comment-item .comment-item a.comment-parent-link::after,
6344 .comment-item a.comment-parent-link::after {
6345         box-shadow:
6346                 0 28px 16px -16px #fff inset,
6347                 4px 16px 0 12px #ffd inset,
6348                 4px     4px 0 12px #ffd inset;
6349 }
6350
6351 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item,
6352 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item,
6353 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item,
6354 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item,
6355 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item,
6356 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item,
6357 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item,
6358 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item,
6359 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item,
6360 .comment-item .comment-item .comment-item .comment-item,
6361 .comment-item .comment-item {
6362         background-color: #fff;
6363 }
6364 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6365 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6366 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6367 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6368 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6369 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6370 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6371 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6372 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6373 .comment-item .comment-item .comment-item .comment-item a.comment-parent-link::after,
6374 .comment-item .comment-item a.comment-parent-link::after {
6375         box-shadow:
6376                 0 28px 16px -16px #f6f6f6 inset,
6377                 4px 16px 0 12px #ffd inset,
6378                 4px     4px 0 12px #ffd inset;
6379 }
6380
6381 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item:target,
6382 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item:target,
6383 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item:target,
6384 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item:target,
6385 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item:target,
6386 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item:target,
6387 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item:target,
6388 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item:target,
6389 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item:target,
6390 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item:target,
6391 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item:target,
6392 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item:target,
6393 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item:target,
6394 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item:target,
6395 .comment-item .comment-item .comment-item .comment-item .comment-item .comment-item:target,
6396 .comment-item .comment-item .comment-item .comment-item .comment-item:target,
6397 .comment-item .comment-item .comment-item .comment-item:target,
6398 .comment-item .comment-item .comment-item:target,
6399 .comment-item .comment-item:target,
6400 .comment-item:target {
6401         background-color: #ffd;
6402 }
6403 .comment-item:target > .comment-thread > .comment-item > .comment > .comment-meta > a.comment-parent-link::after {
6404         box-shadow:
6405                 0 28px 16px -16px #ffd inset,
6406                 4px 16px 0 12px #ffd inset,
6407                 4px     4px 0 12px #ffd inset !important;
6408 }
6409
6410 .comment-body {
6411         font-size: 1.1875rem;
6412 }
6413 #content.user-page .comment-body,
6414 #content.index-page .comment-body {
6415         font-size: 1.125rem;
6416 }
6417
6418 /*================================*/
6419 /* DEEP COMMENT THREAD COLLAPSING */
6420 /*================================*/
6421
6422 .comment-item input[id^="expand"] + label::after {
6423         color: #92c396;
6424         font-weight: 400;
6425 }
6426 .comment-item input[id^="expand"] + label:hover::after {
6427         color: #c00;
6428 }
6429 .comment-item input[id^="expand"] + label:active::after,
6430 .comment-item input[id^="expand"] + label:focus::after{
6431         color: #c00;
6432 }
6433 .comment-item input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
6434         border-width: 1px 0 0 0;
6435 }
6436
6437 /*==============*/
6438 /* COMMENT-META */
6439 /*==============*/
6440
6441 .comment-meta {
6442         padding-top: 4px;
6443 }
6444 .comment-meta > * {
6445         color: #bbb;
6446 }
6447 .comment-meta a,
6448 .comment-meta a:visited {
6449         color: #92c396;
6450 }
6451 .comment-meta a:hover {
6452         color: #79a97e;
6453 }
6454 .comment-meta .author {
6455         font-size: 1.125em;
6456         font-weight: normal;
6457 }
6458
6459 .comment-controls .karma {
6460         color: #bbb;
6461 }
6462
6463 .comment-item .karma.active-controls::after,
6464 .comment-item .karma .karma-value::after {
6465         background-color: #fff;
6466         color: #bbb;
6467         border-radius: 4px;
6468         box-shadow: 0 0 0 1px #eee inset;
6469 }
6470 .comment-item .karma.active-controls::after {
6471         padding: 6px 4px 4px 4px;
6472         bottom: -42px;
6473 }
6474 .comment-item .karma .karma-value::after {
6475         padding: 4px 8px 0 8px;
6476         top: -30px;
6477 }
6478
6479 /*====================*/
6480 /* ANTI-KIBITZER MODE */
6481 /*====================*/
6482
6483 .author.redacted,
6484 .inline-author.redacted {
6485         opacity: 0.9;
6486         font-weight: 300;
6487 }
6488
6489 .karma-value.redacted {
6490         opacity: 0.7;
6491 }
6492
6493 .link-post-domain.redacted {
6494         opacity: 0.6;
6495 }
6496
6497 /*===========================*/
6498 /* COMMENT THREAD NAVIGATION */
6499 /*===========================*/
6500
6501 div.comment-parent-link {
6502         font-weight: 400;
6503 }
6504 a.comment-parent-link {
6505         font-weight: 300;
6506 }
6507 a.comment-parent-link::before {
6508         color: #bbb;
6509         font-weight: 400;
6510 }
6511 a.comment-parent-link:hover::before {
6512         background-color: #ffd;
6513         color: #999;
6514 }
6515
6516 div.comment-child-links {
6517         font-weight: 400;
6518 }
6519 div.comment-child-links a {
6520         font-weight: 300;
6521 }
6522 .comment-child-link::before {
6523         color: #ccc;
6524 }
6525
6526 .comment-item-highlight {
6527         box-shadow:
6528                 0 0     2px #e7b200,
6529                 0 0     3px #e7b200,
6530                 0 0     5px #e7b200,
6531                 0 0     7px #e7b200,
6532                 0 0 10px #e7b200;
6533         border: 1px solid #e7b200;
6534 }
6535 .comment-item-highlight-faint {
6536         box-shadow:
6537                 0 0     2px #f8e7b5,
6538                 0 0     3px #f8e7b5,
6539                 0 0     5px #f8e7b5,
6540                 0 0     7px #f8e7b5,
6541                 0 0 10px #f8e7b5;
6542         border: 1px solid #f8e7b5;
6543 }
6544
6545 .comment-popup {
6546         background-color: #fff;
6547 }
6548
6549 /*====================*/
6550 /* COMMENT PERMALINKS */
6551 /*====================*/
6552
6553 .comment-meta .permalink::before {
6554         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');
6555 }
6556 .comment-meta .lw2-link::before {
6557         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==');
6558 }
6559 .individual-thread-page a.comment-parent-link:empty::before {
6560         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=');
6561 }
6562 .comment-meta .permalink:hover::before {
6563         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');
6564 }
6565 .comment-meta .lw2-link:hover::before {
6566         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==');
6567 }
6568 .individual-thread-page a.comment-parent-link:hover:empty::before {
6569         left: unset;
6570         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==');
6571 }
6572
6573 .comment-meta .permalink,
6574 .comment-meta .lw2-link,
6575 .individual-thread-page .comment-parent-link:empty {
6576         filter: hue-rotate(270deg);
6577         opacity: 0.4;
6578 }
6579 .comment-meta .permalink:hover,
6580 .comment-meta .lw2-link:hover,
6581 .individual-thread-page .comment-parent-link:empty:hover {
6582         opacity: 1.0;
6583 }
6584
6585 /*=======================*/
6586 /* COMMENTS COMPACT VIEW */
6587 /*=======================*/
6588
6589 #comments-list-mode-selector {
6590         opacity: 0.4;
6591         transition: opacity 0.15s ease;
6592 }
6593 #content.index-page #comments-list-mode-selector {
6594         grid-column: 3;
6595         justify-self: end;
6596 }
6597 #comments-list-mode-selector:hover {
6598         opacity: 1.0;
6599 }
6600
6601 #comments-list-mode-selector button {
6602         border: none;
6603         background-color: transparent;
6604         box-shadow:
6605                 0 0 0 4px #fff inset,
6606                 0 0 0 5px #aaa inset;
6607 }
6608 #comments-list-mode-selector button:hover,
6609 #comments-list-mode-selector button.selected {
6610         box-shadow:
6611                 0 0 0 1px #fff inset,
6612                 0 0 0 2px #aaa inset,
6613                 0 0 0 4px #fff inset,
6614                 0 0 0 5px #aaa inset;
6615 }
6616
6617 #content.compact > .comment-thread .comment-item {
6618         max-height: 53px;
6619 }
6620 #content.compact > .comment-thread .comment-item::after {
6621         color: #92c396;
6622         background: linear-gradient(to right, transparent 0%, #fff 50%, #fff 100%);
6623 }
6624
6625 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
6626         #content.compact > .comment-thread .comment-item:hover .comment,
6627         #content.compact > .comment-thread .comment-item.expanded .comment {
6628                 background-color: #fff;
6629                 outline: 1px solid #92c396;
6630         }
6631         #content.compact > .comment-thread .comment-item:hover .comment::before,
6632         #content.compact > .comment-thread .comment-item.expanded .comment::before {
6633                 background-color: #fff;
6634                 box-shadow:
6635                         0 0  3px #fff,
6636                         0 0  5px #fff,
6637                         0 0  7px #fff,
6638                         0 0 10px #fff,
6639                         0 0 20px #fff,
6640                         0 0 30px #fff,
6641                         0 0 40px #fff;
6642         }
6643 }
6644 @media only screen and (hover: none), only screen and (-moz-touch-enabled) {
6645         #content.compact > .comment-thread.expanded .comment-item .comment {
6646                 background-color: #fff;
6647                 outline: 1px solid #92c396;
6648         }
6649         #content.compact > .comment-thread.expanded .comment-item .comment::before {
6650                 background-color: #fff;
6651                 box-shadow:
6652                         0 0  3px #fff,
6653                         0 0  5px #fff,
6654                         0 0  7px #fff,
6655                         0 0 10px #fff,
6656                         0 0 20px #fff,
6657                         0 0 30px #fff,
6658                         0 0 40px #fff;
6659         }
6660 }
6661 #content.compact > .comment-thread .comment-item:hover .comment {
6662         background-color: #fff;
6663         outline: 1px solid #92c396;
6664 }
6665 #content.compact > .comment-thread .comment-item:hover .comment::before {
6666         background-color: #fff;
6667         box-shadow:
6668                 0 0  3px #fff,
6669                 0 0  5px #fff,
6670                 0 0  7px #fff,
6671                 0 0 10px #fff,
6672                 0 0 20px #fff,
6673                 0 0 30px #fff,
6674                 0 0 40px #fff;
6675 }
6676
6677 #content.user-page.compact > h1.listing {
6678         margin-top: 0.5rem;
6679 }
6680 #content.user-page.compact > h1.listing + .post-meta {
6681         margin-bottom: 1rem;
6682 }
6683
6684 /*===========================*/
6685 /* HIGHLIGHTING NEW COMMENTS */
6686 /*===========================*/
6687
6688 .new-comment::before {
6689         outline: 1px solid #5a5;
6690         box-shadow:
6691                 0 0 6px -2px #5a5 inset,
6692                 0 0 4px #5a5;
6693 }
6694
6695 /*=================================*/
6696 /* COMMENT THREAD MINIMIZE BUTTONS */
6697 /*=================================*/
6698
6699 .comment-minimize-button {
6700         color: #ddd;
6701         font-weight: 300;
6702         box-shadow: 0 0 0 1px transparent;
6703 }
6704 .comment-minimize-button:hover {
6705         color: #bbb;
6706         text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff;
6707 }
6708 .comment-minimize-button::after {
6709         font-family: 'Mundo Sans', 'Helvetica', sans-serif;
6710         color: #999;
6711 }
6712 .comment-minimize-button.maximized::after {
6713         color: #ccc;
6714 }
6715
6716 /*=================================*/
6717 /* INDIVIDUAL COMMENT THREAD PAGES */
6718 /*=================================*/
6719
6720 .individual-thread-page > h1 {
6721         margin: 2em 0 0 30px;
6722         font-weight: 300;
6723         font-family: 'Caecilia', 'Helvetica', sans-serif;
6724 }
6725 .individual-thread-page > .comments {
6726         padding: 0 0 0 30px;
6727 }
6728 .individual-thread-page > #bottom-bar.decorative::before {
6729         margin: 0 30px 0 60px;
6730 }
6731
6732 /*==============*/
6733 /* VOTE BUTTONS */
6734 /*==============*/
6735
6736 .upvote,
6737 .downvote {
6738         color: #ddd;
6739         font-weight: 400;
6740         position: relative;
6741 }
6742 .vote::before {
6743         position: relative;
6744         z-index: 1;
6745 }
6746 .upvote::before {
6747         content: "\F077";
6748 }
6749 .downvote::before {
6750         content: "\F078";
6751         position: relative;
6752         top: 1px;
6753 }
6754 .upvote:hover,
6755 .upvote.selected {
6756         text-shadow:
6757                 0 0 0.5px #fff,
6758                 0 0 8px #0f0;
6759 }
6760 .downvote:hover,
6761 .downvote.selected {
6762         text-shadow:
6763                 0 0 0.5px #fff,
6764                 0 0 8px #f00;
6765 }
6766
6767 .vote::after {
6768         position: absolute;
6769         color: transparent;
6770 }
6771 .vote:not(:hover)::after {
6772         text-shadow: none;
6773 }
6774 .karma.waiting .vote.big-vote::after {
6775         color: transparent;
6776 }
6777 .vote.big-vote::after,
6778 .vote:not(.big-vote).clicked-twice::after {
6779         color: inherit;
6780 }
6781 .karma:not(.waiting) .vote.clicked-once::after {
6782         color: #ddd;
6783 }
6784
6785 .upvote::after {
6786         content: "\F325";
6787         bottom: 5px;
6788         left: 7px;
6789 }
6790 .downvote::after {
6791         content: "\F322";
6792         top: 5px;
6793         left: 7px;
6794 }
6795 @-moz-document url-prefix() {
6796         .upvote::after {
6797                 bottom: 3px;
6798                 left: 8px;
6799         }
6800         .downvote::after {
6801                 top: 4px;
6802                 left: 8px;
6803         }
6804 }
6805
6806 .post .top-post-meta .upvote::after,
6807 .post .top-post-meta .downvote::after {
6808         left: 14px;
6809 }
6810
6811 /*===========================*/
6812 /* COMMENTING AND POSTING UI */
6813 /*===========================*/
6814
6815 .posting-controls input[type='submit'] {
6816         padding: 6px 12px 3px 12px;
6817 }
6818
6819 .comment-controls {
6820         margin: 0 4px 4px 16px;
6821 }
6822 .comment + .comment-controls .action-button {
6823         font-weight: 300;
6824 }
6825
6826 .new-comment-button {
6827         margin: 0;
6828         padding: 0.125em;
6829 }
6830
6831 .comment-controls .cancel-comment-button {
6832         color: #c00;
6833         text-shadow:
6834                 0 0 1px #fff,
6835                 0 0 2px #fff;
6836         padding: 6px 8px 1px 4px;
6837 }
6838 .comment-controls .cancel-comment-button:hover {
6839         color: #f00;
6840 }
6841
6842 .comment-controls .delete-button,
6843 .comment-controls .retract-button {
6844         color: #fd7354;
6845 }
6846 .comment-controls .delete-button::before,
6847 .comment-controls .unretract-button::before {
6848         font-weight: 300;
6849 }
6850 .comment-controls .retract-button::before {
6851         font-weight: 400;
6852 }
6853 .comment-controls .edit-button,
6854 .comment-controls .unretract-button {
6855         color: #0b0;
6856 }
6857 .comment-controls .edit-button::before {
6858         font-weight: 300;
6859 }
6860 .comment-controls .action-button:hover {
6861         color: #f00;
6862         text-shadow: 0 0 0.5px #faa;
6863 }
6864
6865 .post-controls {
6866         margin: 3em 2.5em 0 0;
6867         grid-row: 2;
6868 }
6869 .post {
6870         grid-row: 2;
6871 }
6872 .edit-post-link,
6873 .edit-post-link:visited {
6874         color: #090;
6875 }
6876
6877 .posting-controls textarea {
6878         font-family: 'Source Serif Pro', 'Helvetica', sans-serif;
6879         font-weight: 300;
6880         color: #000;
6881         text-shadow: 0 0 0 #000;
6882         border-color: #eee;
6883         transition: border-color 0.15s ease;
6884 }
6885 .posting-controls textarea:focus {
6886         border-width: 29px 1px 1px 1px;
6887         border-color: #92c396;
6888 }
6889 .posting-controls.edit-existing-post textarea:focus,
6890 .posting-controls form.edit-existing-comment textarea:focus {
6891         border-color: #090;
6892 }
6893
6894 /*= Scroll bars =*/
6895
6896 .posting-controls textarea::-webkit-scrollbar {
6897         width: 16px;
6898         background-color: transparent;
6899 }
6900 .posting-controls textarea::-webkit-scrollbar-track {
6901         background-color: #fff;
6902 }
6903 .posting-controls textarea::-webkit-scrollbar-thumb {
6904         background-color: #eee;
6905         box-shadow: 0 0 0 1px #fff inset;
6906 }
6907 .posting-controls textarea:focus::-webkit-scrollbar-thumb {
6908         background-color: #c4dbc4;
6909         box-shadow: 0 0 0 1px #fff inset;
6910 }
6911
6912 /* GUIEdit buttons */
6913
6914 .guiedit-buttons-container {
6915         background-color: #fff;
6916         border-bottom: 1px solid #eee;
6917 }
6918
6919 .posting-controls.edit-existing-post .guiedit-buttons-container button,
6920 .posting-controls form.edit-existing-comment .guiedit-buttons-container button {
6921     color: #050;
6922 }
6923 .guiedit-buttons-container button {
6924         font-family: Font Awesome, 'Source Serif Pro', 'Helvetica', sans-serif;
6925         border: 1px solid transparent;
6926 }
6927
6928 .guiedit::after {
6929         font-family: 'Mundo Sans', 'Helvetica', sans-serif;
6930         color: #999;
6931         font-weight: 300;
6932         text-shadow: 0 0 0 #999;
6933         top: 3px;
6934 }
6935
6936 .posting-controls .markdown-reference-link a {
6937         background-position: right 70%;
6938 }
6939 .markdown-reference-link {
6940         color: #999;
6941 }
6942
6943 /* Markdown hints */
6944
6945 #markdown-hints-checkbox + label {
6946         color: #92c396;
6947 }
6948 #markdown-hints-checkbox + label:hover {
6949         color: #79a97e;
6950 }
6951 #markdown-hints {
6952         border: 1px solid #faa;
6953         background-color: #fff;
6954 }
6955 #markdown-hints .markdown-hints-row span,
6956 #markdown-hints .markdown-hints-row code {
6957         padding: 2px 12px 2px 2px;
6958 }
6959
6960 /*================*/
6961 /* EDIT POST FORM */
6962 /*================*/
6963
6964 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
6965         top: 2px;
6966         color: #acd2af;
6967         transition: color 0.15s ease;
6968 }
6969 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover {
6970         color: #79a97e;
6971 }
6972 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
6973         top: 2px;
6974         border: 1px solid #eee;
6975         color: #bbb;
6976         transition:
6977                 box-shadow 0.3s ease,
6978                 border-color 0.15s ease;
6979 }
6980 @media only screen and (hover:hover), not screen and (-moz-touch-enabled) {
6981         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before {
6982                 border-color: #c4dbc4;
6983         }
6984 }
6985 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
6986         border-color: #c4dbc4;
6987         box-shadow:
6988                 0 0 0 4px #fff inset,
6989                 0 0 0 1em #c4dbc4 inset;
6990 }
6991
6992 #edit-post-form label[for='url'],
6993 #edit-post-form input[name='url'] {
6994         display: block;
6995         transition:
6996                 max-height 0.15s ease,
6997                 overflow 0.15s ease,
6998                 margin-top 0.15s ease,
6999                 margin-bottom 0.15s ease,
7000                 padding 0.15s ease,
7001                 border-color 0.15s ease;
7002
7003 }
7004 #edit-post-form .link-post-checkbox:not(:checked) ~ label[for='url'],
7005 #edit-post-form .link-post-checkbox:not(:checked) ~ input[name='url'] {
7006         max-height: 0;
7007         overflow: hidden;
7008         margin-top: 0;
7009         margin-bottom: 0;
7010         padding: 0;
7011         border-color: transparent;
7012 }
7013
7014 #edit-post-form label[for='title'],
7015 #edit-post-form label[for='url'],
7016 #edit-post-form label[for='section'] {
7017         color: #aaa;
7018         text-shadow: 0 0 0 #aaa;
7019 }
7020
7021 #edit-post-form input[type='radio'] + label {
7022         color: #92c396;
7023         border-color: #c4dbc4;
7024         padding: 6px 12px 3px 12px;
7025         position: relative;
7026         top: -2px;
7027         transition:
7028                 background-color 0.15s ease,
7029                 color 0.15s ease,
7030                 border-color 0.15s ease;
7031 }
7032 #edit-post-form input[type='radio'][value='all'] + label {
7033         border-radius: 8px 0 0 8px;
7034         border-width: 1px;
7035 }
7036 #edit-post-form input[type='radio'][value='drafts'] + label {
7037         border-radius: 0 8px 8px 0;
7038         padding-right: 13px;
7039 }
7040 #edit-post-form input[type='radio'] + label:hover,
7041 #edit-post-form input[type='radio']:focus + label,
7042 #edit-post-form input[type='radio']:checked + label {
7043         background-color: #c4dbc4;
7044         color: #fff;
7045 }
7046 #edit-post-form input[type='radio']:active + label {
7047         border-color: #92c396;
7048         background-color: #92c396;
7049 }
7050
7051 #edit-post-form input[type='submit'] {
7052         padding: 7px 14px 4px 14px;
7053 }
7054
7055 /*=======*/
7056 /* LINKS */
7057 /*=======*/
7058
7059 a {
7060         text-decoration: none;
7061         color: #92c396;
7062         transition: color 0.15s ease;
7063 }
7064 a:visited {
7065         color: #bebb84;
7066 }
7067 a:hover {
7068         color: #bbb;
7069 }
7070
7071 /*=========*/
7072 /* BUTTONS */
7073 /*=========*/
7074
7075 button,
7076 input[type='submit'] {
7077         color: #92c396;
7078 }
7079 input[type='submit'] {
7080         color: #92c396;
7081         background-color: #fff;
7082         border: 1px solid #c4dbc4;
7083         transition:
7084                 color 0.15s ease,
7085                 background-color 0.15s ease,
7086                 border-color 0.15s ease;
7087 }
7088
7089 input[type='submit']:hover,
7090 input[type='submit']:focus {
7091         background-color: #c4dbc4;
7092         color: #fff;
7093 }
7094 input[type='submit']:active {
7095         background-color: #92c396;
7096         border-color: #92c396;
7097 }
7098 .button:visited {
7099         color: #92c396;
7100 }
7101 button:hover,
7102 .button:hover {
7103         color: #79a97e;
7104         text-decoration: none;
7105 }
7106 button:active,
7107 .button:active {
7108         transform: scale(0.9);
7109 }
7110 button:focus:not(:hover),
7111 .button:focus:not(:hover) {
7112         transform: none;
7113 }
7114 @-moz-document url-prefix() {
7115         .button:active {
7116                 transform: none;
7117         }
7118 }
7119
7120 /*==========*/
7121 /* HEADINGS */
7122 /*==========*/
7123
7124 .post-body h1,
7125 .post-body h2,
7126 .post-body h3,
7127 .post-body h4,
7128 .post-body h5,
7129 .post-body h6,
7130 .comment-body h1,
7131 .comment-body h2,
7132 .comment-body h3,
7133 .comment-body h4,
7134 .comment-body h5,
7135 .comment-body h6 {
7136         font-family: 'Caecilia', 'Helvetica', sans-serif;
7137         font-weight: 300;
7138 }
7139 .post-body h1,
7140 .comment-body h1 {
7141         margin-top: 1.25em;
7142         box-shadow:
7143                 0 -7px 0 0 #fff inset,
7144                 0 -8px 0 0 #eee inset;
7145 }
7146 .post-body h6,
7147 .comment-body h6 {
7148         color: #555;
7149 }
7150
7151 /*========*/
7152 /* QUOTES */
7153 /*========*/
7154
7155 blockquote {
7156         border-left: 5px solid #e6e6e6;
7157 }
7158
7159 /*========*/
7160 /* IMAGES */
7161 /*========*/
7162
7163 .post-body img,
7164 .comment-body img {
7165         border: 1px solid #ccc;
7166 }
7167 .post-body img[src$='.svg'],
7168 .comment-body img[src$='.svg'] {
7169         border: none;
7170 }
7171 #content figure img {
7172         border: 1px solid #000;
7173 }
7174 #content figure img[src$='.svg'] {
7175         border: none;
7176 }
7177
7178 /*=============*/
7179 /* IMAGE FOCUS */
7180 /*=============*/
7181
7182 #image-focus-overlay {
7183         visibility: visible;
7184 }
7185
7186 /*======*/
7187 /* MISC */
7188 /*======*/
7189
7190 hr {
7191         margin: 1em 0;
7192 }
7193 hr::before {
7194         content: "• • •";
7195         letter-spacing: 7px;
7196         color: #aaa;
7197         text-align: center;
7198         display: block;
7199         font-size: 0.875em;
7200 }
7201
7202 code,
7203 pre {
7204         font-family: 'Source Code Pro', Inconsolata, monospace;
7205         font-size: 0.9375em;
7206         font-feature-settings: 'ss04';
7207 }
7208 code {
7209         background-color: #eee;
7210         padding: 0 5px 1px 5px;
7211         box-shadow: 0 0 0 1px #fff inset;
7212 }
7213
7214 input[type='text'],
7215 input[type='search'],
7216 input[type='password'] {
7217         border: 1px solid #999;
7218         color: #000;
7219         background-color: transparent;
7220         border-color: transparent;
7221         border-bottom-color: #eee;
7222         transition: border-color 0.15s ease;
7223 }
7224 input[type='text']:focus,
7225 input[type='search']:focus,
7226 input[type='password']:focus {
7227         border-bottom-color: #c4dbc4;
7228 }
7229
7230 select {
7231         color: #000;
7232 }
7233
7234 strong, b {
7235         font-weight: 600;
7236 }
7237
7238 /*============*/
7239 /* ABOUT PAGE */
7240 /*============*/
7241
7242 .about-page mark {
7243         background-color: #e6e6e6;
7244         text-decoration: none;
7245         box-shadow:
7246                 0 -1px 0 0 #000 inset,
7247                 0 -3px 1px -2px #000 inset;
7248         padding: 0 1px;
7249 }
7250
7251 #content.about-page .accesskey-table {
7252         font-family: 'Mundo Sans', 'Helvetica', sans-serif;
7253         border-color: #ddd;
7254 }
7255
7256 #content.about-page img {
7257         border: 1px solid #000;
7258 }
7259
7260 /*========================*/
7261 /* QUALIFIED HYPERLINKING */
7262 /*========================*/
7263
7264 #content.no-nav-bars ~ #ui-elements-container #site-nav-ui-toggle {
7265         display: none;
7266 }
7267 #content.no-comments ~ #ui-elements-container #post-nav-ui-toggle {
7268         display: none;
7269 }
7270
7271 #aux-about-link a {
7272         color: #777;
7273 }
7274 #aux-about-link a:hover {
7275         opacity: 1.0;
7276         text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff;
7277 }
7278
7279 .qualified-linking label {
7280         color: #ccc;
7281         font-weight: 400;
7282 }
7283 .qualified-linking label:hover {
7284         color: #92c396;
7285 }
7286
7287 .qualified-linking-toolbar {
7288         border: 1px solid #ccc;
7289         background-color: #fff;
7290 }
7291 .qualified-linking-toolbar a {
7292         padding: 3px 6px 0 6px;
7293 }
7294 .qualified-linking-toolbar a,
7295 .qualified-linking-toolbar a:visited {
7296         color: #acd2af;
7297 }
7298 .qualified-linking-toolbar a:hover {
7299         color: #92c396;
7300         text-decoration: none;
7301         background-color: #e4f1e5;
7302 }
7303 .qualified-linking label::after {
7304         background-color: #fff;
7305         opacity: 0.8;
7306 }
7307
7308 /*======*/
7309 /* MATH */
7310 /*======*/
7311
7312 .mathjax-block-container::-webkit-scrollbar {
7313         height: 12px;
7314         background-color: #f6f6ff;
7315         border-radius: 6px;
7316         border: 1px solid #ddf;
7317 }
7318 .mathjax-block-container::-webkit-scrollbar-thumb {
7319         background-color: #dde;
7320         border-radius: 6px;
7321         border: 1px solid #cce;
7322 }
7323 .mathjax-inline-container::-webkit-scrollbar {
7324         height: 8px;
7325         background-color: #f6f6ff;
7326         border-radius: 4px;
7327         border: 1px solid #ddf;
7328 }
7329 .mathjax-inline-container::-webkit-scrollbar-thumb {
7330         background-color: #dde;
7331         border-radius: 4px;
7332         border: 1px solid #cce;
7333 }
7334
7335 /*=================*/
7336 /* ALIGNMENT FORUM */
7337 /*=================*/
7338
7339 #content.alignment-forum-index-page::after {
7340         margin: -0.25em 0 0.25em 0;
7341         text-align: center;
7342         grid-column: 2;
7343         font-family: "Concourse SmallCaps";
7344         font-weight: 600;
7345         background-color: #7f85b2;
7346         color: transparent;
7347         -webkit-background-clip: text;
7348         text-shadow:
7349                 rgba(255,255,255,0.5) 0px 3px 3px;
7350 }
7351
7352 /*====================*/
7353 /* FOR NARROW SCREENS */
7354 /*====================*/
7355
7356 @media not screen and (hover: none), not screen and (-moz-touch-enabled) {
7357         @media only screen and (max-width: 1080px) {
7358                 #site-nav-ui-toggle button.engaged {
7359                         left: -72px;
7360                 }
7361                 #text-size-adjustment-ui {
7362                         left: -22px;
7363                         top: calc(100% - 240px);
7364                 }
7365                 #width-selector {
7366                         left: -23px;
7367                         top: calc(100% - 140px);
7368                 }
7369                 #theme-tweaker-toggle button {
7370                         width: unset;
7371                         height: unset;
7372                 }
7373         }
7374         @media only screen and (max-width: 1020px) {
7375         }
7376         @media only screen and (max-width: 1000px) {
7377                 #site-nav-ui-toggle button.engaged {
7378                         left: -56px;
7379                 }
7380                 #theme-selector {
7381                         padding: 0;
7382                 }
7383                 #theme-selector button {
7384                         margin: 1px 7px 0 7px;
7385                 }
7386         }
7387 }
7388
7389 /*========*/
7390 /* MOBILE */
7391 /*========*/
7392
7393 @media only screen and (hover: none), only screen and (-moz-touch-enabled) {
7394         #site-nav-ui-toggle {
7395                 top: 10px;
7396                 left: 10px;
7397         }
7398         #site-nav-ui-toggle button.engaged {
7399                 width: 1.125em;
7400                 overflow: hidden;
7401                 position: relative;
7402                 left: 5px;
7403                 top: -3px;
7404         }
7405         #site-nav-ui-toggle button.engaged::before {
7406                 content: "\F00D";
7407                 font-size: 34px;
7408                 padding: 0 0.25em 0 0;
7409         }
7410         #ui-elements-container > #site-nav-ui-toggle button.engaged {
7411                 transform: rotate(90deg);
7412         }
7413
7414         #ui-elements-container > div[id$='-ui-toggle'] button,
7415         #theme-selector .theme-selector-close-button  {
7416                 color: #bbb;
7417                 text-shadow:
7418                         0 0 1px #fff,
7419                         0 0 3px #fff,
7420                         0 0 5px #fff,
7421                         0 0 10px #fff,
7422                         0 0 20px #fff,
7423                         0 0 30px #fff;
7424         }
7425         #ui-elements-container > div[id$='-ui-toggle'] button {
7426                 font-weight: 400;
7427         }
7428         #theme-selector .theme-selector-close-button {
7429                 font-weight: 300;
7430         }
7431
7432         #theme-selector {
7433                 background-color: #fff;
7434                 box-shadow:
7435                         0 0 0 1px #999,
7436                         0 0 1px 3px #fff,
7437                         0 0 3px 3px #fff,
7438                         0 0 5px 3px #fff,
7439                         0 0 10px 3px #fff,
7440                         0 0 20px 3px #fff;
7441                 border-radius: 12px;
7442         }
7443         #theme-selector::before {
7444                 color: #999;
7445                 font-weight: 300;
7446                 position: relative;
7447                 top: 6px;
7448         }
7449         #theme-selector button,
7450         #theme-selector button.selected {
7451                 background-color: #fff;
7452                 border-radius: 10px;
7453                 box-shadow:
7454                         0 0 0 4px #fff inset,
7455                         0 0 0 5px #999 inset;
7456         }
7457         #theme-selector button.selected {
7458                 background-color: #c4dbc4;
7459         }
7460         #theme-selector button::after {
7461                 color: #819681;
7462                 font-weight: 300;
7463                 max-width: calc(100% - 3.5em);
7464                 overflow: hidden;
7465                 text-overflow: ellipsis;
7466                 padding: 1px 0 0 0;
7467         }
7468         #theme-selector button.selected::after {
7469                 color: #fff;
7470         }
7471
7472         #theme-tweaker-toggle button {
7473                 color: #999;
7474                 font-weight: 400;
7475         }
7476
7477         #quick-nav-ui {
7478                 background-color: #fff;
7479         }
7480         #quick-nav-ui,
7481         #new-comment-nav-ui,
7482         #hns-date-picker {
7483                 box-shadow:
7484                         0 0 1px 3px #fff,
7485                         0 0 3px 3px #fff,
7486                         0 0 5px 3px #fff,
7487                         0 0 10px 3px #fff,
7488                         0 0 20px 3px #fff;
7489         }
7490         #quick-nav-ui a::after,
7491         #new-comment-nav-ui::before {
7492                 font-family: 'Mundo Sans', 'Helvetica', sans-serif;
7493                 font-weight: bold;
7494                 box-shadow:
7495                         0 0 1px 0 #fff,
7496                         0 0 3px 0 #fff,
7497                         0 0 5px 0 #fff;
7498                 background-color: #fff;
7499                 border-radius: 4px;
7500         }
7501         #quick-nav-ui,
7502         #new-comment-nav-ui {
7503                 border-radius: 8px;
7504         }
7505         #new-comment-nav-ui {
7506                 background-color: #fff;
7507                 border: 1px solid #fff;
7508         }
7509         #new-comment-nav-ui::before {
7510                 color: #aaa;
7511                 font-weight: 500;
7512         }
7513         #new-comment-nav-ui .new-comment-sequential-nav-button {
7514                 color: #79a97e;
7515         }
7516         #new-comment-nav-ui .new-comments-count {
7517                 background-color: inherit;
7518                 top: 0;
7519         }
7520         #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
7521                 color: #e6e6e6;
7522         }
7523         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
7524                 border-radius: 7px 0 0 7px;
7525         }
7526         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
7527                 border-radius: 0 7px 7px 0;
7528         }
7529         #new-comment-nav-ui button::after {
7530                 font-family: 'Mundo Sans', 'Helvetica', sans-serif;
7531         }
7532         #hns-date-picker {
7533                 background-color: #fff;
7534                 border: 1px solid #fff;
7535         }
7536
7537         #top-nav-bar {
7538                 padding: 1.25em 0 0.25em 0;
7539                 font-size: 1.625rem;
7540                 margin: 0;
7541                 grid-row: 2;
7542                 grid-column: 2;
7543         }
7544         #top-nav-bar .page-number {
7545                 line-height: 1.7;
7546         }
7547         #top-nav-bar .page-number span {
7548                 display: block;
7549         }
7550         #top-nav-bar a.disabled {
7551                 opacity: 0.2;
7552         }
7553
7554         /*****************************************/
7555         @media only screen and (max-width: 900px) {
7556         /*****************************************/
7557                 #theme-less-mobile-first-row-placeholder {
7558                         grid-row: 1;
7559                         grid-column: 2 / span 2;
7560                         height: 50px;
7561                 }
7562
7563                 #primary-bar,
7564                 #secondary-bar {
7565                         position: static;
7566                         width: 0;
7567                         height: 0;
7568                 }
7569
7570                 #primary-bar {
7571                         position: fixed;
7572                         left: 0;
7573                         margin: 0;
7574                         padding: 5px 0 5px 0;
7575                         height: unset;
7576                         background-color: #fff;
7577                         border-bottom: 1px solid #ddd;
7578                         box-shadow: 0 0 0 1px #fff;
7579                         z-index: 2;
7580                         visibility: hidden;
7581                         transition:
7582                                 visibility 0.2s ease,
7583                                 width 0.2s ease,
7584                                 opacity 0.2s ease,
7585                                 filter 0.2s ease;
7586                 }
7587                 #primary-bar.engaged {
7588                         width: 100%;
7589                         visibility: visible;
7590                         padding: 5px 4px 75px 60px;
7591                 }
7592                 #secondary-bar #nav-item-archive,
7593                 #secondary-bar #nav-item-about {
7594                         opacity: 0.0;
7595                         transition:
7596                                 opacity 0.3s ease,
7597                                 filter 0.2s ease;
7598                 }
7599                 #secondary-bar.engaged #nav-item-archive,
7600                 #secondary-bar.engaged #nav-item-about {
7601                         opacity: 1.0;
7602                         position: fixed;
7603                         top: 80px;
7604                         z-index: 3;
7605                         width: 64px;
7606                 }
7607                 #secondary-bar.engaged #nav-item-archive {
7608                         left: 8px;
7609                 }
7610                 #secondary-bar.engaged #nav-item-about {
7611                         left: 72px;
7612                 }
7613
7614                 #primary-bar.engaged.translucent-on-scroll,
7615                 #secondary-bar.engaged.translucent-on-scroll #nav-item-archive,
7616                 #secondary-bar.engaged.translucent-on-scroll #nav-item-about,
7617                 .page-toolbar.engaged.translucent-on-scroll {
7618                         opacity: 0.6;
7619                         filter: blur(2px);
7620                         pointer-events: none;
7621                 }
7622
7623                 .page-toolbar {
7624                         position: fixed;
7625                         height: unset;
7626                         width: unset;
7627                         z-index: 4;
7628                         right: 100%;
7629                         top: 80px;
7630                         transition:
7631                                 right 0.2s ease,
7632                                 opacity 0.2s ease,
7633                                 filter 0.2s ease;
7634                 }
7635                 .page-toolbar.engaged {
7636                         right: 0;
7637                 }
7638                 .page-toolbar,
7639                 #content:not(.user-page) .page-toolbar {
7640                         display: flex;
7641                         flex-flow: row;
7642                         justify-content: flex-end;
7643                         padding: 0 8px 0 0;
7644                 }
7645                 .page-toolbar > * {
7646                         right: unset;
7647                         line-height: 1.15;
7648                         padding: 6px 0;
7649                         margin: 0;
7650                 }
7651                 .page-toolbar > form,
7652                 .page-toolbar > .button {
7653                         text-align: center;
7654                         flex-basis: 25%;
7655                         margin-left: 1.5em;
7656                 }
7657                 .page-toolbar .button {
7658                         text-transform: uppercase;
7659                         font-size: 0.625rem;
7660                 }
7661                 .page-toolbar .button::before,
7662                 #content.user-page .page-toolbar .button::before,
7663                 .page-toolbar form::before,
7664                 #content.user-page .page-toolbar form::before {
7665                         font-size: 1.375rem;
7666                         display: block;
7667                         padding: 2px;
7668                         font-size: 1.375rem;
7669                         display: block;
7670                 }
7671                 .page-toolbar .rss {
7672                         white-space: nowrap;
7673                         position: fixed;
7674                         top: 143px;
7675                         left: -60px;
7676                         padding: 6px 10px 5px 10px;
7677                         visibility: hidden;
7678                         background-color: #fff;
7679                         border-style: solid;
7680                         border-color: #ddd;
7681                         border-width: 0 1px 1px 0;
7682                         box-shadow:
7683                                 0 1px 0 0 #fff,
7684                                 1px 1px 0 0 #fff;
7685                         transition: left 0.2s ease;
7686                 }
7687                 .page-toolbar .rss,
7688                 #content.user-page .page-toolbar .rss {
7689                         margin: 0;
7690                 }
7691                 .page-toolbar.engaged .rss {
7692                         visibility: visible;
7693                         left: 0;
7694                 }
7695
7696                 #primary-bar .nav-inner {
7697                         font-size: 1.375em;
7698                 }
7699                 #secondary-bar .nav-inner {
7700                         font-size: 1.125em;
7701                 }
7702                 #secondary-bar .nav-item:not(#nav-item-search) .nav-inner {
7703                         padding: 6px 10px;
7704                 }
7705
7706                 #nav-item-search {
7707                         max-width: calc(100% - 180px);
7708                         top: 4px;
7709                         left: 68px;
7710                 }
7711                 #nav-item-search input {
7712                         width: calc(100% - 32px);
7713                 }
7714                 #nav-item-search button {
7715                         position: relative;
7716                         bottom: 5px;
7717                         visibility: visible;
7718                         height: 32px;
7719                         width: 40px;
7720                         padding: 9px 15px 3px 5px;
7721                 }
7722                 #nav-item-search form:not(:focus-within) button:not(:hover) {
7723                         color: transparent;
7724                 }
7725                 #nav-item-search button::before {
7726                         color: #ddd;
7727                 }
7728
7729                 #nav-item-login {
7730                         top: 16px;
7731                         right: 8px;
7732                 }
7733                 #nav-item-login .nav-inner {
7734                         text-transform: none;
7735                         font-size: 1.75em;
7736                 }
7737                 #nav-item-login .nav-inner::before {
7738                         display: none;
7739                 }
7740                 #inbox-indicator::before {
7741                         font-size: 1.75em;
7742                         left: 2px;
7743                 }
7744
7745                 #bottom-bar .nav-inner {
7746                         padding: 1rem 0 1.25rem 0;
7747                 }
7748                 #bottom-bar .nav-inner::after {
7749                         position: absolute;
7750                 }
7751
7752                 #content.search-results-page #comments-list-mode-selector {
7753                         grid-column: 3;
7754                         grid-row: 2;
7755                         justify-self: end;
7756                 }
7757
7758                 #content,
7759                 #content.comment-thread-page {
7760                         padding: 0 4px;
7761                 }
7762
7763                 h1.listing + .post-meta > * {
7764                         line-height: 1.5;
7765                 }
7766                 h1.listing + .post-meta .post-section {
7767                         overflow: visible;
7768                         order: 1;
7769                         width: unset;
7770                 }
7771                 h1.listing + .post-meta .post-section::before {
7772                         position: unset;
7773                 }
7774
7775                 .archive-nav *[class^='archive-nav-item-'] {
7776                         border-width: 1px !important;
7777                 }
7778                 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
7779                         background-color: #aaa;
7780                 }
7781
7782                 .post {
7783                         padding: 0;
7784                 }
7785                 .post .top-post-meta .author {
7786                         margin: 1em auto 0 auto;
7787                 }
7788                 .post .top-post-meta .date,
7789                 .post .top-post-meta .comment-count {
7790                         position: static;
7791                 }
7792                 .post .top-post-meta .date {
7793                         margin: 1.5em auto 0 auto;
7794                 }
7795                 .post .top-post-meta .comment-count span {
7796                         display: initial;
7797                         position: static;
7798                 }
7799                 h1.post-title {
7800                         line-height: 1.3;
7801                 }
7802
7803                 .comments {
7804                         padding: 0;
7805                 }
7806                 .comment-item .comment-item {
7807                         margin: 0.75em 3px 3px 6px;
7808                 }
7809                 .comment-item .comment-item + .comment-item {
7810                         margin: 1.5em 3px 3px 6px;
7811                 }
7812
7813                 .comment-controls {
7814                         position: relative;
7815                 }
7816                 .comment-controls .cancel-comment-button,
7817                 .comments > .comment-controls .cancel-comment-button {
7818                         right: 4px;
7819                 }
7820
7821                 .sublevel-nav:not(.sort) .sublevel-item,
7822                 .sublevel-nav:not(.sort) .sublevel-item:first-child,
7823                 .sublevel-nav:not(.sort) .sublevel-item:last-child {
7824                         border-radius: 8px;
7825                         border-width: 1px;
7826                         margin: 2px;
7827                 }
7828
7829                 #content.user-page #theme-less-mobile-first-row-placeholder {
7830                         height: 60px;
7831                 }
7832                 #content.user-page h1.page-main-heading,
7833                 #content.user-page .user-stats {
7834                         grid-row: 2;
7835                 }
7836                 #content.user-page h1.page-main-heading {
7837                         margin: 0.5em 0 0 0.125em;
7838                 }
7839                 #content.user-page #comments-list-mode-selector,
7840                 #content.user-page .sublevel-nav.sort {
7841                         grid-row: 3 / span 2;
7842                 }
7843                 #content.user-page .sublevel-nav {
7844                         grid-row: 3;
7845                         margin-bottom: 1em;
7846                 }
7847                 #content.user-page #top-nav-bar {
7848                         grid-row: 4;
7849                         margin: 0.5em 0 0 0;
7850                 }
7851
7852                 #content.conversation-page #theme-less-mobile-first-row-placeholder {
7853                         height: 64px;
7854                 }
7855                 #content.conversation-page #comments-list-mode-selector {
7856                         grid-row: 6;
7857                         margin-top: -32px;
7858                 }
7859                 #content.conversation-page .conversation-participants {
7860                         grid-row: 4;
7861                         align-self: end;
7862                 }
7863         /*******************************************/
7864         } @media only screen and (max-width: 720px) {
7865         /*******************************************/
7866                 #content.index-page > .sublevel-nav.sort {
7867                         flex-flow: column;
7868                         margin-right: 4px;
7869                 }
7870         /*******************************************/
7871         } @media only screen and (max-width: 520px) {
7872         /*******************************************/
7873                 h1.listing,
7874                 #content.search-results-page h1.listing {
7875                         font-size: 1.25rem;
7876                         margin: 18px 6px 4px 6px;
7877                         max-width: calc(100% - 12px);
7878                 }
7879                 h1.listing + .post-meta {
7880                         margin: 4px 6px;
7881                 }
7882                 #content.conversations-user-page h1.listing::after {
7883                         height: calc(100% + 2.25em);
7884                 }
7885                 #content.conversations-user-page h1.listing + .post-meta .date {
7886                         margin: 0 0 0 1em;
7887                 }
7888
7889                 .comment-body {
7890                         font-size: 1.125rem;
7891                 }
7892
7893                 #content.compact > .comment-thread .comment-item {
7894                         max-height: 105px;
7895                 }
7896
7897                 .textarea-container:focus-within textarea {
7898                         background-color: #fff;
7899                         border-width: 1px;
7900                         box-shadow: 0 0 0 2px #fff;
7901                 }
7902                 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
7903                         padding: 5px 6px 6px 6px;
7904                         font-weight: bold;
7905                 }
7906                 .textarea-container:focus-within .guiedit-mobile-help-button.active {
7907                         color: #c00;
7908                 }
7909                 .textarea-container:focus-within .guiedit-buttons-container {
7910                         background-color: #fff;
7911                         border-top: 1px solid #ddf;
7912                 }
7913                 .posting-controls .textarea-container:focus-within .guiedit-buttons-container {
7914                         box-shadow: none;
7915                 }
7916                 #content.conversation-page .textarea-container:focus-within::after {
7917                         background-color: #fff;
7918                 }
7919                 #markdown-hints::after {
7920                         color: #090;
7921                 }
7922
7923                 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
7924                         top: 2px;
7925                         font-weight: 400;
7926                 }
7927                 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
7928                         top: 1px;
7929                 }
7930         }
7931 }
7932
7933
7934 /*************/
7935 /* ACCORDIUS */
7936 /*************/
7937
7938 /*======*/
7939 /* TAGS */
7940 /*======*/
7941
7942 #tags {
7943     order: 12;
7944     display: flex;
7945     flex-basis: 100%;
7946     justify-content: center;
7947     margin: 0;
7948 }
7949 #tags a {
7950     display: inline-block;
7951 }
7952
7953 /*============*/
7954 /* LESS THEME */
7955 /*============*/
7956
7957 /*++++++*/
7958 /* TAGS */
7959 /*++++++*/
7960
7961 #tags {
7962     padding: 0.25em 0 0.5em 0;
7963     align-items: center;
7964 }
7965 #tags::before {
7966     content: "\F02C";
7967     font-family: Font Awesome;
7968     font-weight: 300;
7969     font-size: 0.875em;
7970     display: inline-block;
7971     margin: 0 0.5em 0 0;
7972     opacity: 0.6;
7973     position: relative;
7974     top: -2px;
7975 }
7976 #tags a {
7977         margin: 0 0.375em 0 0;
7978 }
7979 #tags a:not(:last-of-type)::after {
7980         content: ","
7981 }
7982
7983 .top-post-meta #tags {
7984         display: none;
7985 }