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