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