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