www/style-zero.linux.css

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