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