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