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