www/style-grey.mac.css

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