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