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