1  /* YUI Reset */
   2  html {
   3    -moz-text-size-adjust: 100%;
   4    -webkit-text-size-adjust: 100%;
   5    -ms-text-size-adjust: 100%;
   6    color: #000;
   7  }
   8  
   9  body, div, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td {
  10    margin: 0;
  11    padding: 0;
  12  }
  13  
  14  body {
  15    margin-bottom: 8px;
  16  }
  17  
  18  .nwsb { display: none; }
  19  
  20  a {
  21    text-decoration: none;
  22  }
  23  
  24  .click-me {
  25    border-radius: 5px;
  26    margin-top: 5px;
  27    padding: 2px 5px;
  28    position: absolute;
  29    font-weight: bold;
  30    z-index: 2;
  31    white-space: nowrap;
  32  }
  33  .yotsuba_new .click-me {
  34    color: #800000;
  35    background-color: #F0E0D6;
  36    border: 2px solid #D9BFB7;
  37  }
  38  .click-me:before {
  39    content: "";
  40    border-width: 0 6px 6px;
  41    border-style: solid;
  42    left: 50%;
  43    margin-left: -6px;
  44    position: absolute;
  45    width: 0;
  46    height: 0;
  47    top: -6px;
  48  }
  49  .yotsuba_new .click-me:before {
  50    border-color: #D9BFB7 transparent;
  51  }
  52  .click-me:after {
  53    content: "";
  54    border-width: 0 4px 4px;
  55    top: -4px;
  56    display: block;
  57    left: 50%;
  58    margin-left: -4px;
  59    position: absolute;
  60    width: 0;
  61    height: 0;
  62  }
  63  .yotsuba_new .click-me:after {
  64    border-color: #F0E0D6 transparent;
  65    border-style: solid;
  66  }
  67  
  68  .adg-rects {
  69    margin: 0;
  70    text-align: center;
  71  }
  72  .adg, .adg-m { overflow: hidden; }
  73  .adg-rep .adg { margin-left: 15px }
  74  .adp-228 { margin: auto; width: 728px; height: 320px; }
  75  .adp-90 { margin: auto; width: 728px; height: 90px; }
  76  .adp-128 { margin: auto; width: 728px; height: 128px; }
  77  .adp-50 { margin: auto; width: 320px; height: 50px; }
  78  .adp-250 { margin: auto; width: 300px; height: 250px; }
  79  .adp-row { display: inline-block; margin: 0 10px; }
  80  
  81  .danbo-slot { width: 728px; height: 90px; margin: 10px auto; overflow: hidden; }
  82  @media only screen and (max-width: 480px) { .danbo-slot { width: 300px; height: 250px; } }
  83  
  84  .bsa-cnt {
  85    margin: 20px 0;
  86    height: 90px;
  87    text-align: center;
  88  }
  89  
  90  @media only screen and (max-width: 640px) {
  91    .bsa-cnt {
  92      height: 250px;
  93      display: flex;
  94      justify-content: center;
  95      align-items: center;
  96    }
  97  }
  98  
  99  .party-cnt {
 100    position: relative;
 101    display: inline-block;
 102  }
 103  
 104  .party-hat {
 105    position: absolute;
 106    pointer-events: none;
 107  }
 108  
 109  .small .party-hat,
 110  .extended-small .party-hat {
 111    width: 100px;
 112    left: -10px;
 113    margin-top: -55px;
 114  }
 115  
 116  .large .party-hat,
 117  .extended-large .party-hat {
 118    left: -15px;
 119    margin-top: -95px;
 120  }
 121  
 122  #disclaimer {
 123    font-size: 14px;
 124    position: absolute;
 125    overflow: hidden;
 126    top: 0; left: 0;
 127    width: 100%; height: 100%;
 128    z-index: 9998;
 129  }
 130  
 131  #disclaimer-bg {
 132    position: fixed;
 133    top: 0; left: 0;
 134    width: 100%; height: 100%;
 135    background-color: rgba(0, 0, 0, 0.25);
 136  }
 137  
 138  #disclaimer-modal {
 139    z-index: 9999;
 140    width: 320px;
 141    top: 0;
 142    left: 50%;
 143    margin-left: -170px;
 144    display: block;
 145    padding: 10px;
 146    position: relative;
 147    background-color: #f0e0d6;
 148    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
 149  }
 150  
 151  #disclaimer ol {
 152    margin-left: 20px;
 153    padding: 0;
 154  }
 155  
 156  #disclaimer li {
 157    margin: 10px 0;
 158  }
 159  
 160  #disclaimer h3 {
 161    border-bottom: 1px solid #d9bfb7;
 162    margin: 0;
 163    padding-bottom: 5px;
 164    text-align: center;
 165  }
 166  
 167  #disclaimer-modal div {
 168    margin-top: 10px;
 169    text-align: center;
 170  }
 171  
 172  #disclaimer-modal button {
 173    margin: 0 10px;
 174  }
 175  
 176  #disclaimer-accept {
 177    font-weight: bold;
 178  }
 179  
 180  #footer-links { margin-top: 5px; }
 181  
 182  .belowLeaderboard {
 183    width: 728px;
 184    max-width: 100%;
 185  }
 186  
 187  .aboveMidAd {
 188    width: 468px;
 189    max-width: 100%;
 190  }
 191  
 192  body.hasDropDownNav {
 193    margin-top: 45px;
 194  }
 195  
 196  #postFormError {
 197    background-color: #e62020;
 198    color: #fff;
 199    font-family: monospace;
 200    font-size: 13px;
 201    font-weight: bold;
 202    padding: 3px 5px;
 203    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
 204    display: none;
 205    margin-top: 3px;
 206  }
 207  
 208  #postFormError a {
 209    color: #fff;
 210  }
 211  
 212  .painter-ctrl input,
 213  #qr-painter-ctrl input {
 214    width: 30px !important;
 215    text-align: center;
 216  }
 217  
 218  #bottomnav {
 219    clear: both;
 220  }
 221  
 222  .persistentNav,
 223  div#boardNavMobile {
 224    padding: 2px 4px;
 225    background-color: #F0E0D6;
 226    overflow: hidden;
 227    border-bottom: 2px solid #D9BFB7;
 228    position: fixed;
 229    top: 0;
 230    left: 0;
 231    right: 0;
 232    z-index: 9001;
 233    font-size: 12px;
 234  }
 235  
 236  div#boardNavMobile select, div#boardNavMobile option {
 237    font-size: 11px;
 238  }
 239  
 240  .autohide-nav { transition: top 0.2s ease-in-out }
 241  
 242  div.boardSelect {
 243    float: left;
 244  }
 245  
 246  div.boardSelect > strong {
 247    padding-right: 5px;
 248  }
 249  
 250  div.pageJump {
 251    float: right;
 252    padding-right: 5px;
 253    padding-top: 3px;
 254  }
 255  
 256  .pageJump a {
 257    text-decoration: none;
 258    padding-right: 5px;
 259    color: #000080 !important;
 260  }
 261  
 262  /* reCaptcha */
 263  .recaptchatable {
 264    background-color: transparent !important;
 265    border: none !important;
 266  }
 267  
 268  .recaptcha_image_cell {
 269    background-color: transparent !important;
 270  }
 271  
 272  #g-recaptcha {
 273    height: 78px;
 274  }
 275  
 276  #recaptcha_div {
 277    height: 107px; width: 442px;
 278  }
 279  
 280  #recaptcha_challenge_field { width: 400px }
 281  
 282  .recaptcha_input_area {
 283    padding: 0!important;
 284  }
 285  #recaptcha_table tr:first-child {
 286    height: auto!important;
 287  }
 288  
 289  #recaptcha_table tr:first-child > td:not(:first-child) {
 290    padding: 0 7px 0 7px!important;
 291  }
 292  
 293  #recaptcha_table tr:last-child td:last-child {
 294    padding-bottom: 0!important;
 295  }
 296  
 297  #recaptcha_table tr:last-child td:first-child {
 298    padding-left: 0!important;
 299  }
 300  #recaptcha_image {
 301    cursor: pointer;
 302  }
 303  #recaptcha_response_field {
 304    width: 292px;
 305    margin-right: 0px!important;
 306    font-size: 10pt!important;
 307  }
 308  input:-moz-placeholder { color: gray !important; }
 309  #recaptcha_image {
 310    border: 1px solid #aaa !important;
 311  }
 312  #recaptcha_table tr > td:last-child {
 313    display: none !important;
 314  }
 315  #captchaContainer {
 316    width: 343px;
 317    height: 86px;
 318    line-height: 99px;
 319    overflow: hidden;
 320  }
 321  #captchaContainer .placeholder {
 322    font-style: italic;
 323    padding-left: 5px;
 324  }
 325  
 326  #content table {
 327    border-collapse: collapse;
 328    border-spacing: 0;
 329  }
 330  
 331  .jpnFlag {
 332    height: 11px;
 333    width: 17px;
 334  }
 335  
 336  fieldset, img {
 337    border: 0;
 338  }
 339  
 340  address, caption, cite, code, dfn, em, strong, th, var {
 341    font-style: normal;
 342    font-weight: normal;
 343  }
 344  
 345  li {
 346    list-style: none;
 347  }
 348  
 349  caption, th {
 350    text-align: left;
 351  }
 352  
 353  q:before, q:after {
 354    content: '';
 355  }
 356  
 357  abbr, acronym {
 358    border: 0;
 359    font-variant: normal;
 360  }
 361  
 362  sup {
 363    vertical-align: text-top;
 364  }
 365  
 366  sub {
 367    vertical-align: text-bottom;
 368  }
 369  
 370  input[type="text"], input[type="password"], textarea {
 371    border-color: #140814 !important;
 372  }
 373  
 374  input[type="text"]:hover, input[type="text"]:focus,
 375  textarea:hover, textarea:focus { border-color: 1px solid rgba(150, 180, 170, 0.3) !important }
 376  
 377  legend {
 378    color: #000;
 379  }
 380  
 381  ins {
 382    text-decoration: none;
 383  }
 384  
 385  body {
 386    font-family: arial, helvetica, sans-serif;
 387    font-size: 10pt;
 388    margin-left: 0;
 389    margin-right: 0;
 390    margin-top: 5px;
 391    padding-left: 5px;
 392    padding-right: 5px;
 393  }
 394  
 395  strong {
 396    font-weight: bold;
 397  }
 398  
 399  em {
 400    font-style: italic;
 401  }
 402  
 403  a,
 404  #absbot a,
 405  .button {
 406    color: #d98518;
 407    text-shadow: 0px 0px 8px rgba(217,133,24,1);
 408  }
 409  
 410  a:hover,
 411  #absbot a:hover,
 412  .button:hover {
 413    color: #ff9d1c;
 414    transition-duration: 1s;
 415    transition-property: color;
 416  }
 417  
 418  hr {
 419    clear: both;
 420    height: 1px;
 421    border: 0;
 422    border-bottom: 1px solid #96b4aa;
 423    opacity: 0.1;
 424  }
 425  
 426  code {
 427    padding: 1px 5px 1px 5px;
 428    background-color: #EEE;
 429    color: #000;
 430  }
 431  
 432  kbd {
 433    background-color: #f7f7f7;
 434    border: 1px solid #ccc;
 435    border-radius: 3px 3px 3px 3px;
 436    box-shadow: 0 1px 0 #ccc, 0 0 0 2px #fff inset;
 437    font-family: monospace;
 438    font-size: 11px;
 439    line-height: 1.4;
 440    padding: 0 5px;
 441    color: #000;
 442  }
 443  
 444  p {
 445    margin-bottom: 15px;
 446  }
 447  
 448  input[type="text"],
 449  input[type="password"],
 450  textarea {
 451    border: 1px solid #AAA;
 452    font-size: 11px;
 453    margin: 0 2px 0 0;
 454    padding: 2px 4px 3px;
 455  }
 456  
 457  input[type=text],
 458  textarea {
 459    outline: none;
 460  }
 461  
 462  input[type="text"],
 463  input[type="password"] {
 464    margin: 0px 2px;
 465    padding: 1px;
 466  }
 467  
 468  input:focus,
 469  textarea:focus {
 470    border: 1px solid #EEAA88 !important;
 471  }
 472  
 473  #content input[type="checkbox"] {
 474    vertical-align: middle;
 475  }
 476  
 477  #filters input[type="checkbox"] {
 478    display: inline-block;
 479    margin: auto;
 480  }
 481  
 482  img.topad, .topad > div, .topad a img {
 483    width: 728px;
 484    height: 90px;
 485    max-width: 100%;
 486    overflow: hidden;
 487    margin: auto;
 488  }
 489  
 490  img.middlead, .middlead > div, .middlead a img{
 491    width: 468px;
 492    height: 60px;
 493    max-width: 100%;
 494    overflow: hidden;
 495    margin: auto;
 496  }
 497  
 498  img.bottomad, .bottomad > div, .bottomad a img {
 499    width: 728px;
 500    height: 90px;
 501    max-width: 100%;
 502    overflow: hidden;
 503    margin: auto;
 504  }
 505  
 506  /* Clickables */
 507  .button {
 508    cursor: pointer;
 509    border: none;
 510    white-space: nowrap;
 511    -moz-user-select: none;
 512    -webkit-user-select: none;
 513    user-select: none;
 514  }
 515  
 516  .btn-wrap:before {
 517    content: '[';
 518  }
 519  
 520  .btn-wrap:after {
 521    content: ']';
 522  }
 523  
 524  .clickbox {
 525    margin-right: 3px;
 526    width: 16px;
 527    height: 16px;
 528    line-height: 16px;
 529    font-size: 10px;
 530    display: block;
 531    text-align: center;
 532    background-color: #fff;
 533    border: 1px solid #aaa;
 534    text-decoration: none;
 535    color: #000;
 536  }
 537  
 538  /* Input box for custom colors */
 539  .custom-rgb {
 540    width: 45px;
 541  }
 542  
 543  .abovePostForm {
 544    width: 90%;
 545  }
 546  
 547  /* UI panels */
 548  .hidden {
 549    display: none;
 550  }
 551  
 552  #backdrop {
 553    background-color: rgba(0, 0, 0, 0.25);
 554    text-align: center;
 555    position: fixed;
 556    top: 0px;
 557    left: 0px;
 558    width: 100%;
 559    height: 100%;
 560    z-index: 100002;
 561  }
 562  
 563  .panel {
 564    position: absolute;
 565    padding: 2px 5px 5px 5px;
 566    z-index: 100003;
 567    font-size: 14px;
 568    box-shadow: 0 0 6px rgba(0,0,0,1);
 569    background-color: #241023;
 570  }
 571  
 572  .panel h4 {
 573    font-size: 14px;
 574    padding: 0;
 575    margin: 10px 0px 5px 0px;
 576  }
 577  
 578  .panelHeader {
 579    border-bottom: 1px solid rgba(150, 180, 170, 0.1);
 580    font-size: 16px;
 581    font-weight: bold;
 582    margin-bottom: 5px;
 583    margin-top: 5px;
 584    padding-bottom: 5px;
 585    text-align: center;
 586    line-height: 14px;
 587  }
 588  
 589  .icon {
 590    width: 18px;
 591    height: 18px;
 592    display: block;
 593    background-size: 100%;
 594    cursor: pointer;
 595    position: absolute;
 596    top: 5px;
 597  }
 598  
 599  .closeIcon {
 600    background-image: url('//s.4cdn.org/image/buttons/futaba/cross.png');
 601    right: 5px;
 602  }
 603  
 604  .helpIcon {
 605    background-image: url('//s.4cdn.org/image/buttons/futaba/question.png');
 606    right: 23px;
 607  }
 608  
 609  .expandIcon {
 610    background-image: url('//s.4cdn.org/image/buttons/futaba/post_expand_plus.png');
 611    right: 23px;
 612  }
 613  
 614  .collapseIcon {
 615    background-image: url('//s.4cdn.org/image/buttons/futaba/post_expand_minus.png');
 616    right: 23px;
 617  }
 618  
 619  .watchIcon,
 620  .unwatchIcon {
 621    height: 18px;
 622    position: absolute;
 623    width: 18px;
 624    cursor: pointer;
 625    visibility: hidden;
 626  }
 627  
 628  .watchIcon {
 629    background-image: url('//s.4cdn.org/image/buttons/futaba/watch_thread_off.png');
 630  }
 631  
 632  .unwatchIcon {
 633    background-image: url('//s.4cdn.org/image/buttons/futaba/watch_thread_on.png');
 634  }
 635  
 636  .thread:hover .watchIcon,
 637  .thread:hover .unwatchIcon {
 638    visibility: visible;
 639  }
 640  
 641  .threadIcons {
 642    display: inline;
 643    height: 16px;
 644    margin: 2px 0 0 -101px;
 645    position: absolute;
 646    width: 100px;
 647    text-align: right;
 648  }
 649  
 650  .threadIcon {
 651    width: 16px;
 652    height: 16px;
 653    display: inline-block;
 654  }
 655  
 656  .stickyIcon {
 657    background-image: url('//s.4cdn.org/image/sticky.gif');
 658  }
 659  
 660  .closedIcon {
 661    background-image: url('//s.4cdn.org/image/closed.gif');
 662  }
 663  
 664  .adminIcon {
 665    background-image: url('//s.4cdn.org/image/adminicon.gif');
 666  }
 667  
 668  .founderIcon {
 669    background-image: url('//s.4cdn.org/image/foundericon.gif');
 670  }
 671  
 672  .modIcon {
 673    background-image: url('//s.4cdn.org/image/modicon.gif');
 674  }
 675  
 676  .developerIcon {
 677    background-image: url('//s.4cdn.org/image/developericon.gif');
 678  }
 679  
 680  .managerIcon {
 681    background-image: url('//s.4cdn.org/image/managericon.gif');
 682  }
 683  
 684  .imgdel {
 685    padding: 20px 14px;
 686    min-height: 0 !important;
 687    width: 127px;
 688    height: 13px;
 689  }
 690  
 691  .nofile {
 692    padding: 20px 36px;
 693    min-height: 0 !important;
 694    filter: invert(50%);
 695  }
 696  
 697  .refreshIcon {
 698    background-image: url('//s.4cdn.org/image/buttons/futaba/refresh.png');
 699  }
 700  
 701  .rotateIcon {
 702    background-image: url('//s.4cdn.org/image/buttons/futaba/post_expand_rotate.gif');
 703  }
 704  
 705  @media (-webkit-min-device-pixel-ratio: 2.0),
 706    (min--moz-device-pixel-ratio: 2),
 707    (min-resolution: 2dppx)
 708    {
 709    .closeIcon {
 710      background-image: url('//s.4cdn.org/image/buttons/futaba/cross@2x.png');
 711    }
 712  
 713    .helpIcon {
 714      background-image: url('//s.4cdn.org/image/buttons/futaba/question@2x.png');
 715    }
 716  
 717    .expandIcon {
 718      background-image: url('//s.4cdn.org/image/buttons/futaba/post_expand_plus@2x.png');
 719      background-size: 100%;
 720    }
 721  
 722    .collapseIcon {
 723      background-image: url('//s.4cdn.org/image/buttons/futaba/post_expand_minus@2x.png');
 724      background-size: 100%;
 725    }
 726  
 727    .stickyIcon {
 728      background-image: url('//s.4cdn.org/image/sticky@2x.gif');
 729      background-size: 100%;
 730    }
 731  
 732    .closedIcon {
 733      background-image: url('//s.4cdn.org/image/closed@2x.gif');
 734      background-size: 100%;
 735    }
 736    
 737    .adminIcon {
 738      background-image: url('//s.4cdn.org/image/adminicon@2x.gif');
 739      background-size: 100%;
 740    }
 741    
 742    .modIcon {
 743      background-image: url('//s.4cdn.org/image/modicon@2x.gif');
 744      background-size: 100%;
 745    }
 746    
 747    .developerIcon {
 748      background-image: url('//s.4cdn.org/image/developericon@2x.gif');
 749      background-size: 100%;
 750    }
 751    
 752    .managerIcon {
 753      background-image: url('//s.4cdn.org/image/managericon@2x.gif');
 754      background-size: 100%;
 755    }
 756    
 757    .refreshIcon {
 758      background-image: url('//s.4cdn.org/image/buttons/futaba/refresh@2x.png');
 759      background-size: 100%;
 760    }
 761  
 762    .rotateIcon {
 763      background-image: url('//s.4cdn.org/image/buttons/futaba/post_expand_rotate@2x.gif');
 764      background-size: 100%;
 765    }
 766  
 767    .watchIcon {
 768      background-image: url('//s.4cdn.org/image/buttons/futaba/watch_thread_off@2x.png');
 769      background-size: 100%;
 770    }
 771  
 772    .unwatchIcon {
 773      background-image: url('//s.4cdn.org/image/buttons/futaba/watch_thread_on@2x.png');
 774      background-size: 100%;
 775    }
 776  
 777  }
 778  
 779  .clickset {
 780    margin-bottom: 8px;
 781  }
 782  
 783  .clickset li {
 784    clear: both;
 785    margin-bottom: 2px;
 786    line-height: 20px;
 787  }
 788  
 789  .inputset {
 790    margin-bottom: 3px;
 791  }
 792  
 793  /* Notifications */
 794  .msg-error,
 795  .msg-ok {
 796    border-radius: 3px;
 797    padding: 1px 5px 1px 5px;
 798  }
 799  
 800  .msg-ok {
 801    background-color: #FFFFEE;
 802    color: #000;
 803  }
 804  
 805  .msg-error {
 806    background-color: #E62020;
 807    color: #fff;
 808  }
 809  
 810  .error {
 811    color: red;
 812    font-size: x-large;
 813    font-weight: bold
 814  }
 815  
 816  /***************************************************************/
 817  /* Info bar: update time, order, etc on the left */
 818  /* Settings bar: buttons on the right */
 819  #info {
 820    float: left;
 821  }
 822  
 823  #settings {
 824    float: right;
 825    text-align: right;
 826  }
 827  
 828  #filtered-count,
 829  #hidden-count,
 830  #filtered-count-bottom,
 831  #hidden-count-bottom,
 832  #search-term,
 833  #search-term-bottom,
 834  #ordered-by {
 835    font-weight: bold;
 836  }
 837  
 838  #filtered-label,
 839  #hidden-label,
 840  #filtered-label-bottom,
 841  #hidden-label-bottom,
 842  #search-label,
 843  #search-label-bottom {
 844    display: none;
 845  }
 846  
 847  /* Search "Quickfilter" Bar related elements */
 848  #qf-cnt {
 849    display: none;
 850  }
 851  
 852  #qf-clear {
 853    text-decoration: none;
 854  }
 855  
 856  #qf-box {
 857    width: 75px;
 858    margin-right: 5px;
 859  }
 860  
 861  /* Top and bottom navigation menus */
 862  #boardNavDesktop {
 863    color: #140814;
 864    font-size: 9pt;
 865  }
 866  
 867  #boardNavDesktop a {
 868    padding: 1px;
 869    text-decoration: none;
 870  }
 871  
 872  .navLinks .btn-wrap {
 873    display: inline;
 874  }
 875  
 876  #navtopright,
 877  #navbotright {
 878    float: right;
 879  }
 880  
 881  .navSmall {
 882    font-size: 90%;
 883  }
 884  
 885  #styleSwitcher {
 886    float: right;
 887  }
 888  
 889  #globalMessage {
 890    color: red;
 891    text-align: center;
 892  }
 893  
 894  #toggleMsgBtn {
 895    width: 18px;
 896    height: 18px;
 897    display: block;
 898    cursor: pointer;
 899    top: 5px;
 900    float: left;
 901    margin-bottom: 6px;
 902  }
 903  
 904  div.boardBanner {
 905    text-align: center;
 906    clear: both;
 907  }
 908  
 909  #bannerCnt {
 910    border: 1px solid #880000;
 911    margin: 5px auto;
 912    width: 300px;
 913    height: 100px;
 914    max-width: 100%;
 915  }
 916  
 917  div.boardBanner > div.boardTitle {
 918    font-family: Tahoma, sans-serif;
 919    font-size: 28px;
 920    font-weight: bold;
 921    letter-spacing: -2px;
 922    margin-top: 0px;
 923  }
 924  
 925  div.boardBanner > div.boardSubtitle {
 926    font-size: x-small;
 927  }
 928  
 929  div#boardNavDesktopFoot {
 930    font-size: 9pt;
 931    color: #140814;
 932    clear: both;
 933    padding-top: 10px;
 934    padding-bottom: 3px;
 935  }
 936  
 937  .hasDropDownNav #navtopright {
 938    display: none;
 939  }
 940  
 941  #boardNavDesktop .pageJump {
 942    padding: 0;
 943  }
 944  
 945  #boardNavDesktop .pageJump a {
 946    padding-right: 5px;
 947  }
 948  
 949  div#boardNavDesktopFoot a {
 950    font-weight: normal;
 951    padding: 1px;
 952    text-decoration: none;
 953    color: #800000;
 954  }
 955  
 956  div.homelink {
 957    float: right
 958  }
 959  
 960  div#absbot {
 961    text-align: center;
 962    font-size: x-small !important;
 963    padding-bottom: 4px;
 964    padding-top: 10px;
 965    color:#96b4aa;
 966    clear: both;
 967  }
 968  
 969  /***************************************************************/
 970  
 971  /* Theme editor panel */
 972  #theme {
 973    width: 330px;
 974    top: 60px;
 975    left: 50%;
 976    margin-left: -178px;
 977  }
 978  
 979  .settings-field {
 980    margin-top: 5px;
 981    width: 100%;
 982  }
 983  
 984  #theme-css {
 985    font-family: 'DejaVu Sans Mono', 'Consolas', 'Andale Mono', 'Lucida Console', monospace;
 986    width: 320px;
 987    min-width: 320px;
 988  }
 989  
 990  #theme-msg {
 991    position: absolute;
 992    margin-top: 4px;
 993  }
 994  
 995  #theme-btns {
 996    margin-top: 5px;
 997    margin-bottom: 3px;
 998  }
 999  
1000  /***************************************************************/
1001  
1002  /* Filters panel */
1003  #filters {
1004    width: 380px;
1005    top: 60px;
1006    left: 50%;
1007    margin-left: -190px;
1008  }
1009  
1010  #filters-search {
1011    position: absolute;
1012    left: 4px;
1013    width: 50px;
1014    font-size: 11px;
1015    padding: 0px 2px;
1016  }
1017  
1018  #filters-search:focus {
1019    width: 85px;
1020  }
1021  
1022  #filters .clickbox {
1023    margin: auto;
1024  }
1025  
1026  /* Filters help panel */
1027  #filters-protip {
1028    width: 570px;
1029    top: 50px;
1030    left: 50%;
1031    margin-left: -295px;
1032    padding-left: 10px;
1033    padding-right: 10px;
1034  }
1035  
1036  #filters-protip h4:before {
1037    content: "»";
1038    margin-right: 3px;
1039  }
1040  
1041  #filters-protip h4 {
1042    font-size: 15px;
1043  }
1044  
1045  @media all and (max-width: 605px) {
1046    #filters-protip {
1047      left: 0;
1048      margin-left: 0;
1049    }
1050  }
1051  
1052  #filters-protip ul {
1053    margin-bottom: 10px;
1054  }
1055  
1056  #filters-protip li {
1057    margin: 5px 0px;
1058  }
1059  
1060  /* Filters color palette */
1061  #filter-palette {
1062    position: fixed;
1063    width: 100%;
1064    height: 100%;
1065    z-index: 100004;
1066    top: 0;
1067    left: 0;
1068  }
1069  
1070  #colorpicker {
1071    position: fixed;
1072    padding: 4px;
1073  }
1074  
1075  #colorpicker table td {
1076    padding: 2px;
1077    text-align: center;
1078  }
1079  
1080  #filter-rgb-ok {
1081    float: right;
1082    background-color: transparent;
1083  }
1084  
1085  #filter-table {
1086    width: 100%;
1087  }
1088  
1089  #filter-table th {
1090    font-weight: bold;
1091    font-size: 11px;
1092    min-width: 20px;
1093  }
1094  
1095  #filter-table th,
1096  #filter-table td {
1097    text-align: center;
1098  }
1099  
1100  #filter-table tbody td {
1101    padding: 8px 0px 0px 0px;
1102  }
1103  
1104  #filter-table tfoot td {
1105    padding-top: 20px;
1106  }
1107  
1108  #filter-color-table .clickbox {
1109    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
1110    margin: auto;
1111  }
1112  
1113  .filter-pattern {
1114    width: 140px;
1115  }
1116  
1117  .filter-color:hover {
1118    color: #000;
1119  }
1120  
1121  .filter-hits {
1122    font-size: 12px;
1123  }
1124  
1125  .filter-boards {
1126    width: 30px;
1127  }
1128  
1129  #theme-msg,
1130  #filters-msg {
1131    display: none;
1132  }
1133  
1134  /***************************************************************/
1135  
1136  /* Threads main container */
1137  #threads {
1138    padding: 20px 0px;
1139    text-align: center;
1140  }
1141  
1142  /* Thread wrapper */
1143  .thread {
1144    vertical-align: top;
1145    display: inline-block;
1146    word-wrap: break-word;
1147    overflow: hidden;
1148    margin-top: 5px;
1149    margin-bottom: 20px;
1150    padding: 5px 0 3px 0;
1151    position: relative;
1152  }
1153  
1154  .thread a {
1155    border: none;
1156  }
1157  
1158  .thread img {
1159    display: inline;
1160  }
1161  
1162  /* Thread in small mode, teaser off */
1163  .small .thread {
1164    width: 165px;
1165  }
1166  
1167  /* Thread in large mode, teaser off */
1168  .large .thread {
1169    width: 270px;
1170  }
1171  
1172  /* Thread in small mode with teaser displayed */
1173  .extended-small .thread {
1174    width: 180px;
1175    max-height: 320px;
1176  }
1177  
1178  /* Thread in large mode with teaser displayed */
1179  .extended-large .thread {
1180    width: 270px;
1181    max-height: 410px;
1182  }
1183  
1184  /* "On top" (highlighted) thumbnails */
1185  .hl {
1186    border-style: solid;
1187    border-width: 3px;
1188  }
1189  
1190  /* Watched (pinned) thumbnails */
1191  .pinned {
1192    border: 3px dashed #34345C;
1193  }
1194  
1195  .pinned:hover {
1196    border-color: red;
1197  }
1198  
1199  /* Thumbnails */
1200  .thumb {
1201    display: block;
1202    margin: auto;
1203    z-index: 2;
1204    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
1205    min-height: 50px;
1206    min-width: 50px;
1207  }
1208  
1209  /* Replies / images / page indicators */
1210  .meta {
1211    cursor: help;
1212    font-size: 11px;
1213    line-height: 8px;
1214    margin-top: 2px;
1215    margin-bottom: 1px;
1216  }
1217  
1218  .meta .postMenuBtn {
1219    position: absolute;
1220    margin-top: -1px;
1221    display: none;
1222  }
1223  
1224  .thread:hover .meta .postMenuBtn { display: inline-block; }
1225  
1226  .teaser {
1227    display: none;
1228    padding: 0 15px;
1229  }
1230  
1231  /* Teaser, displayed */
1232  .extended-small .teaser,
1233  .extended-large .teaser {
1234    display: block;
1235  }
1236  
1237  /* spoilers */
1238  .teaser s {
1239    background-color: #000;
1240    color: #000;
1241    text-decoration: none;
1242  }
1243  
1244  .teaser s:focus,
1245  .teaser s:hover {
1246    color: #fff;
1247  }
1248  
1249  /***************************************************************/
1250  
1251  .left {
1252    float: left;
1253  }
1254  
1255  .right {
1256    float: right;
1257  }
1258  
1259  .clear {
1260    clear: both;
1261  }
1262  
1263  .close {
1264    margin-left: 3px;
1265  }
1266  
1267  .center {
1268    text-align: center;
1269    margin: auto;
1270  }
1271  
1272  .mobile {
1273    display: none;
1274  }
1275  
1276  #absbot a {
1277    text-decoration: underline;
1278  }
1279  
1280  /* Thread Watcher */
1281  #threadWatcher {
1282    max-width: 265px;
1283    display: block;
1284    position: absolute;
1285    background-color: #F0E0D6;
1286    border-color: #800000 #D9BFB7 #D9BFB7 #800000;
1287    border-image: none;
1288    border-right: 1px solid #D9BFB7;
1289    border-style: none solid solid none;
1290    border-width: medium 1px 1px medium;
1291    padding: 3px;
1292  }
1293  
1294  #twHeader {
1295    font-weight: bold;
1296    text-align: center;
1297    height: 17px;
1298    cursor: move;
1299    user-select: none;
1300    -moz-user-select: none;
1301    -webkit-user-select: none;
1302  }
1303  
1304  #twPrune {
1305    position: relative;
1306    top: 0;
1307    margin-left: 3px;
1308    margin-top: -1px;
1309    float: right;
1310  }
1311  
1312  #watchList {
1313    margin: 0;
1314    padding: 0;
1315    overflow: auto;
1316    display: block;
1317    max-height: 100vh;
1318    user-select: none;
1319    -moz-user-select: none;
1320    -webkit-user-select: none;
1321  }
1322  
1323  #watchList li:first-child {
1324    margin-top: 3px;
1325    padding-top: 2px;
1326    border-top: 1px solid #d9bfb7;
1327  }
1328  
1329  #watchList a {
1330    text-decoration: none;
1331  }
1332  
1333  #watchList li {
1334    overflow: hidden;
1335    white-space: nowrap;
1336    text-overflow: ellipsis;
1337  }
1338  
1339  .hasNewReplies { font-weight: bold; }
1340  .hasYouReplies { font-style: italic; }
1341  .archivelink { opacity: 0.5; }
1342  
1343  .deadlink {
1344    text-decoration: line-through;
1345  }
1346  
1347  .pointer {
1348    cursor: pointer;
1349  }
1350  
1351  /***************************************************************/
1352  
1353  /* The Click Me */
1354  #first-run {
1355    border-radius: 5px;
1356    margin-top: 5px;
1357    margin-left: -7px;
1358    padding: 2px 5px;
1359    position: absolute;
1360    font-weight: bold;
1361    color: #800000;
1362    background-color: #F0E0D6;
1363    border: 2px solid #D9BFB7;
1364  }
1365  
1366  #first-run:before {
1367    content: "";
1368    border-width: 0 6px 6px;
1369    border-style: solid;
1370    left: 50%;
1371    margin-left: -6px;
1372    position: absolute;
1373    width: 0;
1374    height: 0;
1375    top: -6px;
1376    border-color: #D9BFB7 transparent;
1377  }
1378  
1379  #first-run:after {
1380    content: "";
1381    border-width: 0 4px 4px;
1382    top: -4px;
1383    display: block;
1384    left: 50%;
1385    margin-left: -4px;
1386    position: absolute;
1387    width: 0;
1388    height: 0;
1389    border-color: #F0E0D6 transparent;
1390    border-style: solid;
1391  }
1392  
1393  /* Tooltips */
1394  #post-preview {
1395    position: absolute;
1396    background-color: #181f24;
1397    border-radius: 3px;
1398    padding: 5px 8px 4px 8px;
1399    z-index: 100000;
1400    word-wrap: break-word;
1401    white-space: pre-line;
1402    max-width: 500px;
1403    color: #dedede;
1404    font-family: arial, helvetica, sans-serif;
1405    font-size: 10pt;
1406  }
1407  
1408  .post-author {
1409    color: #00A550;
1410    font-weight: bold;
1411  }
1412  
1413  .post-subject {
1414    color: #CC1105;
1415    font-weight: bold;
1416  }
1417  
1418  .post-tripcode {
1419    color: #00A550;
1420    font-weight: normal;
1421  }
1422  
1423  .post-teaser {
1424    margin: 3px 0 0 0;
1425    padding: 0;
1426  }
1427  
1428  .post-page {
1429    font-size: 90%;
1430    color: #7d807e;
1431    display: inline-block;
1432    white-space: nowrap;
1433    word-wrap: normal;
1434    max-width: 100px;
1435    overflow: hidden;
1436    text-overflow: ellipsis;
1437    vertical-align: text-top;
1438    margin-left: 3px;
1439  }
1440  
1441  .post-page:before {
1442    content: '(';
1443  }
1444  
1445  .post-page:after {
1446    content: ')';
1447  }
1448  
1449  .post-last {
1450    color: #bbbfbd;
1451    font-size: 90%;
1452    margin-top: 3px;
1453  }
1454  
1455  .admin-capcode {
1456    color: #FF0000;
1457  }
1458  
1459  .founder-capcode {
1460    color: #117743;
1461  }
1462  
1463  .mod-capcode {
1464    color: #800080;
1465  }
1466  
1467  .developer-capcode {
1468    color: #0000F0;
1469  }
1470  
1471  .manager-capcode {
1472    color: #FF0080;
1473  }
1474  
1475  .verified-capcode {
1476    color: #007FFF;
1477  }
1478  
1479  #enable-mobile {
1480      font-size: small !important;
1481    }
1482  
1483  #disable-mobile {
1484    font-size: small !important;
1485    display: none !important;
1486  }
1487  
1488  /* Post form */
1489  table {
1490    border-spacing: 1px;
1491  
1492    margin-left: auto;
1493    margin-right: auto;
1494  }
1495  
1496  table.postForm > tbody > tr > td:first-child {
1497    background-color: #EA8;
1498    color: #800;
1499    font-weight: bold;
1500    border: 1px solid #800;
1501    padding: 0 5px;
1502  
1503    font-size: 10pt;
1504  }
1505  
1506  tr.rules td {
1507    border: 0px !important;
1508    background-color: transparent !important;
1509    font-weight: normal !important;
1510  }
1511  
1512  td {
1513    margin: 0px;
1514    padding: 0px;
1515  
1516    font-size: 10pt;
1517  }
1518  
1519  #postForm input[type="text"],
1520  #postForm input[type="password"],
1521  table.postForm > tbody textarea,
1522  #recaptcha_response_field {
1523    margin: 0px;
1524    margin-right: 2px;
1525    padding: 2px 4px 3px 4px;
1526  
1527    outline: none;
1528  
1529    font-family: arial, helvetica, sans-serif;
1530    font-size: 10pt;
1531  }
1532  
1533  #recaptcha_response_field:not(:focus) {
1534    border: 1px solid #AAA !important;
1535  }
1536  
1537  table.postForm > tbody > tr > td > input[type=text] {
1538    width: 244px;
1539  }
1540  
1541  table.postForm > tbody > tr > td > input[name="subject"] {
1542    width: 300px;
1543  }
1544  
1545  .postblock {
1546    background-color: #EA8;
1547    color: #800;
1548    font-weight: bold;
1549    padding: 0 5px;
1550  }
1551  
1552  .passNotice {
1553    font-size: smaller;
1554    padding-left: 6px;
1555  }
1556  
1557  .password {
1558    font-size: smaller;
1559  }
1560  
1561  input[type="password"] {
1562    text-align: center;
1563    width: 50px;
1564  }
1565  
1566  .rules {
1567    margin-top: 5px;
1568  }
1569  
1570  .rules li {
1571    font-size: 11px;
1572    list-style: none outside none;
1573  }
1574  
1575  .rules li:before {
1576    content: "• ";
1577  }
1578  
1579  #togglePostForm {
1580    text-align: center;
1581    margin-top: 5px;
1582    font-size: 24px;
1583    font-weight: bold;
1584  }
1585  
1586  @media screen and (-webkit-min-device-pixel-ratio:0) {
1587    tbody textarea {
1588      margin-bottom: -3px !important;
1589    }
1590  }
1591  
1592  .text_only #threads table {
1593    width: 80%;
1594    border-collapse: separate;
1595    border-spacing: 2px;
1596  }
1597  
1598  .text_only #threads th {
1599    font-weight: bold;
1600    padding: 4px 2px;
1601    text-align: center;
1602  }
1603  
1604  .text_only #threads td {
1605    padding: 4px 2px;
1606  }
1607  
1608  .text_only #threads .txt-sub {
1609    text-align: left;
1610  }
1611  
1612  .text_only .hl {
1613    border: none;
1614  }
1615  
1616  .text_only .pinned td:first-child {
1617    box-shadow: -1px 0 #000;
1618  }
1619  
1620  .txt-ctrl { width: 25px; }
1621  .txt-no { width: 20px; }
1622  .txt-rep { width: 100px; }
1623  .txt-date { width: 200px; }
1624  
1625  @media only screen and (max-width: 480px) {
1626    .txt-ctrl,
1627    .txt-date { display: none }
1628    .text_only #threads table {
1629      width: 100%;
1630    }
1631  }
1632  
1633  .postMenuBtn {
1634    margin-left: 5px;
1635    text-decoration: none;
1636    line-height: 1em;
1637    display: inline-block;
1638    -webkit-transition: -webkit-transform 0.1s;
1639    -moz-transition: -moz-transform 0.1s;
1640    transition: transform 0.1s;
1641    width: 1em;
1642    height: 1em;
1643    text-align: center;
1644    outline: none;
1645  }
1646  
1647  .menuOpen {
1648    -webkit-transform: rotate(90deg);
1649    -moz-transform: rotate(90deg);
1650    -ms-transform: rotate(90deg);
1651    transform: rotate(90deg);
1652  }
1653  
1654  .dd-menu {
1655    position: absolute;
1656    font-size: 12px;
1657    line-height: 1.3em;
1658  }
1659  .dd-menu a {
1660    text-decoration: none;
1661    color: inherit !important;
1662    display: block;
1663  }
1664  .dd-menu ul {
1665    list-style: none;
1666    padding: 0;
1667    margin: 0;
1668    white-space: nowrap;
1669    border: 1px solid;
1670    border-color: #333;
1671    border-bottom: 0;
1672    border-right-width: 1px;
1673  }
1674  .dd-menu ul ul {
1675    display: none;
1676    position: absolute;
1677  }
1678  .dd-menu li {
1679    cursor: pointer;
1680    position: relative;
1681    padding: 2px 4px;
1682    vertical-align: middle;
1683    border-bottom: 1px solid #333;
1684  }
1685  .dd-menu li:hover ul {
1686    display: block;
1687    left: 100%;
1688    margin-top: -3px;
1689  }
1690  .dd-menu.dd-menu-left li:hover ul {
1691    left: auto;
1692    right: 100%;
1693  }
1694  
1695  .ad-plea {
1696    margin-top: 2px;
1697    text-align: center;
1698    font-size: smaller;
1699  }
1700  
1701  #customMenu {
1702    width: 400px;
1703    left: 50%;
1704    margin-left: -200px;
1705    padding: 2px;
1706  }
1707  #customMenu .reply { border: 0 }
1708  #customMenuBox {
1709    margin: 0px auto 5px;
1710    width: 385px;
1711    padding: 2px 4px 3px;
1712    font-size: 10pt;
1713  }
1714  
1715  .boardSelect .customBoardList,
1716  .boardSelect .custom-menu-ctrl { color: #89A; }
1717  .boardSelect .custom-menu-ctrl,
1718  .boardSelect .customBoardList { margin-left: 10px; }
1719  .boardSelect .custom-menu-ctrl { display: none; }
1720  .boardSelect:hover .custom-menu-ctrl { display: inline; }
1721  .persistentNav .boardList a,
1722  .persistentNav .customBoardList a,
1723  #boardNavMobile .boardSelect a { text-decoration: none; }
1724  
1725  #blotter {
1726    width: 468px;
1727    margin: auto;
1728  }
1729  #blotter td {
1730    vertical-align: top;
1731    font-size: 11px;
1732  }
1733  .blotter-date {
1734    width: 50px;
1735    text-align: center;
1736  }
1737  #blotter tfoot {
1738    text-align: right;
1739    color: #140814;
1740  }
1741  .redtxt {
1742    color: red;
1743  }
1744  #blotter-msgs s {
1745    background-color: inherit !important;
1746    color: inherit !important;
1747    text-decoration: line-through;
1748  }
1749  #postForm {
1750    width: 468px;
1751    display: none;
1752  }
1753  
1754  #togglePostFormLink {
1755    color: #140814;
1756    font-size: 22px;
1757    font-weight: bold;
1758    text-align: center;
1759  }
1760  #postForm textarea {
1761    width: 292px;
1762  }
1763  
1764  #postForm tr > td > .desktop,
1765  #ctrl,
1766  .navLinks,
1767  .postNum.desktop > span { color: #140814 }
1768  .open-qr-wrap { color: #140814 !important }
1769  .navLinks.desktop > * { color: #96b4aa }
1770  td { border-color: #140814 !important }
1771  .ctrl-wrap { color: #96b4aa; }
1772  
1773  @media (max-width: 480px) {
1774    .ws .dd-menu ul {
1775      background-color: #D6DAF0;
1776      border: 1px solid #B7C5D9;
1777      border-right-width: 2px;
1778    }
1779    .ws .dd-menu li {
1780      border-bottom: 1px solid #B7C5D9;
1781    }
1782    .ws .dd-menu li:hover {
1783      background-color: #EEF2FF;
1784    }
1785    .nws .dd-menu ul {
1786      background-color: #F0E0D6;
1787      border: 1px solid #D9BFB7;
1788      border-right-width: 2px;
1789    }
1790    .nws .dd-menu li {
1791      border-bottom: 1px solid #D9BFB7;
1792    }
1793    .nws .dd-menu li:hover {
1794      background-color: #FFFFEE;
1795    }
1796    
1797    body.ws {
1798      background: url('/image/fade-blue.png') repeat-x scroll center top #EEF2FF;
1799      color: #000;
1800    }
1801    
1802    body.nws {
1803      background: url('/image/fade.png') repeat-x scroll center top #FFFFEE;
1804      color: #800000;
1805    }
1806  }
1807  
1808  @media (min-width: 481px) {
1809    body {
1810      background: #140814;
1811      color: #96b4aa;
1812    }
1813    
1814    .ws div.boardBanner {
1815      color: #5995b3;
1816      text-shadow: 0px 0px 5px rgba(89, 149, 179, 0.75);
1817    }
1818  
1819    .nws div.boardBanner {
1820      color: #b35968;
1821      text-shadow: 0px 0px 5px rgba(179, 89, 104, 0.75);
1822    }
1823    
1824    .quoteLink, .quotelink, .deadlink,
1825    a, a.visited, .button, .dd-menu li,
1826    .backlink span a.quotelink,
1827    #arc-list .quotelink, s .sjis {
1828      color: #d98518 !important;
1829      text-shadow: 0px 0px 8px rgba(217, 133, 24, 1);
1830    }
1831    
1832    .flag {
1833      opacity: 0.5;
1834    }
1835    
1836    .middlead a img,
1837    #bannerCnt {
1838      opacity: 0.5;
1839    }
1840    
1841    select {
1842      background-color: #241023;
1843      border: 1px solid rgba(150, 180, 170, 0.3);
1844      color: #96b4aa;
1845    }
1846    
1847    table.postForm > tbody > tr > td:first-child {
1848      color: inherit;
1849      font-weight: bold;
1850      padding: 0 5px;
1851      font-size: 10pt;
1852      background-color: #241023;
1853      border: 1px solid rgba(150, 180, 170, 0.3);
1854    }
1855    
1856    .dd-menu ul {
1857      background-color: #241023;
1858    }
1859    
1860    input::-moz-placeholder,
1861    textarea::-moz-placeholder,
1862    input::placeholder,
1863    textarea::placeholder {
1864      color: #96b4aa !important;
1865      opacity: 0.6 !important;
1866    }
1867    
1868    input[type=text]:focus, input[type=password]:focus, input:not([type]):focus, textarea:focus {
1869      border: 1px solid #96b4aa !important;
1870    }
1871    
1872    input[type="checkbox"] {
1873      opacity: 0.25;
1874    }
1875    
1876    input[type=text], input[type=password],
1877    table.postForm > tbody textarea,
1878    textarea
1879    #recaptcha_response_field {
1880      background-color: #241023;
1881      color: #96b4aa;
1882      border: 1px solid rgba(150,180,170,0.3);
1883    }
1884    
1885    div#absbot a:not(:hover) {
1886      color: #d98518 !important;
1887      text-shadow: 0px 0px 8px rgba(217, 133, 24, 1);
1888    }
1889    
1890    .postblock {
1891      background-color: #241023;
1892      border: 1px solid rgba(150, 180, 170, 0.3);
1893    }
1894  }