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 }