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