| Textpattern | PHP Cross Reference | Content Management Systems |
Description: Add the correct display in Edge, IE 11, and Firefox.
1 @charset "UTF-8"; 2 /* ========================================================================== 3 Styling and layout for all media 4 ========================================================================== */ 5 /* Reset 6 ========================================================================== */ 7 /** 8 * Add the correct display in Edge, IE 11, and Firefox. 9 */ 10 details, 11 main { 12 display: block; 13 } 14 15 /** 16 * Add the correct vertical alignment in Chrome, Firefox, and Opera. 17 */ 18 progress { 19 vertical-align: baseline; 20 } 21 22 /** 23 * Add the correct display in all browsers. 24 */ 25 summary { 26 display: list-item; 27 } 28 29 /* Clearfix 30 ========================================================================== */ 31 header::after, 32 footer::after, 33 nav ul::after, 34 nav ol::after, 35 .container::after { 36 content: ""; 37 display: table; 38 clear: both; 39 } 40 41 /* ========================================================================== 42 Styling and layout for screen media (mobile first) 43 ========================================================================== */ 44 @media screen { 45 /* Layout 46 ========================================================================== */ 47 /** 48 * 1. Prevent adjustments of font size after orientation changes in 49 * IE on Windows Phone and in iOS. 50 */ 51 html { 52 /* 1 */ 53 -webkit-text-size-adjust: 100%; 54 text-size-adjust: 100%; 55 } 56 57 /** 58 * 1. Set `body` to `relative` to allow positioning of absolute elements. 59 * 2. Remove default margin. 60 */ 61 body { 62 /* 1 */ 63 position: relative; 64 /* 2 */ 65 margin: 0; 66 background: #f7f7f7; 67 } 68 69 /** 70 * Outer wrapper for main layouts. 71 * 72 * Example HTML: 73 * 74 * <div class="wrapper"> 75 * <div class="container"> 76 * Content 77 * </div> 78 * </div> 79 */ 80 .wrapper { 81 padding: 1px 0; 82 border-bottom: 1px solid #cccccc; 83 background: #ffffff; 84 } 85 86 /** 87 * Wrapper for layouts, and for site header/footer. 88 * 89 * Example HTML: 90 * 91 * <div class="wrapper"> 92 * <div class="container"> 93 * Content 94 * </div> 95 * </div> 96 */ 97 .site-header, 98 .site-footer, 99 .container { 100 width: 88%; 101 max-width: 54em; 102 margin: 0 auto; 103 } 104 105 /** 106 * Additional styling for child content within site header. 107 */ 108 .site-header { 109 padding: 1em 0; 110 } 111 112 .site-header h2 { 113 margin: 0; 114 } 115 116 .site-header h3 { 117 margin: 0.5em 0 0; 118 font-family: "PT Serif", Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; 119 font-size: 1.25rem; 120 font-style: italic; 121 font-weight: normal; 122 line-height: 1.4; 123 } 124 125 /** 126 * Additional styling for child content within site footer. 127 */ 128 .site-footer { 129 padding: 0.5em 0; 130 } 131 132 /** 133 * Styling for articles. 134 * 135 * 1. Prevent really, really long words in article from breaking layout. 136 */ 137 .article { 138 margin-bottom: 2em; 139 /* 1 */ 140 word-wrap: break-word; 141 } 142 143 /** 144 * Styling for complementary content. 145 * 146 * Initially the sidebar appears under main content, it is then repositioned 147 * with media queries at 2nd breakpoint. 148 * 149 * 1. Prevent really, really long words in article from breaking layout. 150 */ 151 .complementary-content { 152 margin: 2em -6% 0; 153 padding: 0 6%; 154 border-top: 2px dashed #cccccc; 155 /* 1 */ 156 word-wrap: break-word; 157 } 158 159 /** 160 * Hide text but still allow screen reader access. 161 * 162 * Example HTML: 163 * 164 * <p class="accessibility"> 165 */ 166 .accessibility { 167 position: absolute; 168 width: 1px; 169 height: 1px; 170 margin: -1px; 171 padding: 0; 172 overflow: hidden; 173 clip: rect(0 0 0 0); 174 border: 0; 175 white-space: nowrap; 176 } 177 178 /* Navigation 179 ========================================================================== */ 180 /** 181 * Style mobile first version of the navigation menu. Desktop version will 182 * override some rules with extra styling at 1st breakpoint. 183 * 184 * Example HTML: 185 * 186 * <nav class="site-navigation"> 187 * <div> 188 * <ul> 189 * <li class="active"><a></li> 190 * <li><a></li> 191 * <li><a></li> 192 * </ul> 193 * <div class="search"> 194 * <form> 195 * <input type="search"> 196 * </form> 197 * </div> 198 * </div> 199 * </nav> 200 */ 201 .site-navigation { 202 background-color: #dddddd; 203 } 204 205 .site-navigation > div { 206 position: relative; 207 max-width: 54em; 208 margin: 0 auto; 209 } 210 211 .site-navigation ul { 212 margin: 0; 213 padding: 0; 214 border: solid #cccccc; 215 border-width: 1px 0; 216 list-style: none; 217 } 218 219 .site-navigation li { 220 border: solid #cccccc; 221 border-width: 1px 0; 222 background-color: #eeeeee; 223 } 224 225 .site-navigation li:hover { 226 background-color: #f8f8f8; 227 } 228 229 .site-navigation li:active { 230 background-color: lightgray; 231 box-shadow: inset 0 0.2em 0.25em rgba(0, 0, 0, 0.15); 232 } 233 234 .site-navigation li.active { 235 background-color: white; 236 box-shadow: none; 237 } 238 239 .site-navigation a { 240 display: block; 241 padding: 0.5em 6%; 242 color: #333333; 243 } 244 245 .site-navigation a:hover, .site-navigation a:visited { 246 color: #333333; 247 text-decoration: none; 248 } 249 250 .site-navigation a:active { 251 color: #1a1a1a; 252 text-decoration: none; 253 } 254 255 /** 256 * Search field in navigation. 257 */ 258 .search { 259 padding: 1em 6% 0.5em; 260 background: #ffffff; 261 } 262 263 .search input[type=search] { 264 width: 16em; 265 height: 2.125em; 266 padding-right: 0.1875em; 267 padding-left: 2em; 268 border-radius: 0.5em; 269 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23333'%3E%3Cpath d='M4,13c0-5,4-9,9-9c5,0,9,4,9,9c0,5-4,9-9,9C8,22,4,18,4,13z M13,19c3.3,0,6-2.7,6-6s-2.7-6-6-6s-6,2.7-6,6S9.7,19,13,19z'/%3E%3Cpath d='M17.5,19l1.5-1.5l4.5,3L28,25c0,0,0,1.5-0.75,2.25S25,28,25,28l-4.5-4.5L17.5,19z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center; 270 background-size: 2em 2em; 271 } 272 273 /* Links 274 ========================================================================== */ 275 /** 276 * 1. Specify link colour. 277 * 2. Remove default underline style from non-hover state links. 278 * 3. Interrupt the decoration line to let the shape of the text show through 279 * in supported browsers. 280 * 4. Remove tap delay in modern browsers. 281 */ 282 a { 283 /* 1 */ 284 color: #004cbf; 285 /* 2 */ 286 text-decoration: none; 287 /* 3 */ 288 -webkit-text-decoration-skip: ink; 289 text-decoration-skip-ink: auto; 290 /* 4 */ 291 touch-action: manipulation; 292 } 293 294 a:hover, a:active { 295 outline: 0; 296 color: #0066ff; 297 text-decoration: underline; 298 } 299 300 a:focus { 301 outline: 1px solid #0066ff; 302 } 303 304 /** 305 * Additional styling for `h1`-`h3` heading links. 306 * 307 * 1. Expanded CSS level 3 `text-decoration-color` property in supported 308 * browsers, older browsers ignore this addition. 309 */ 310 h1 a, 311 h2 a, 312 h3 a, 313 h4 a, 314 h5 a, 315 h6 a { 316 color: #000000; 317 } 318 319 h1 a:hover, h1 a:active, 320 h2 a:hover, 321 h2 a:active, 322 h3 a:hover, 323 h3 a:active, 324 h4 a:hover, 325 h4 a:active, 326 h5 a:hover, 327 h5 a:active, 328 h6 a:hover, 329 h6 a:active { 330 color: #000000; 331 /* 1 */ 332 -webkit-text-decoration-color: rgba(51, 51, 51, 0.5); 333 text-decoration-color: rgba(51, 51, 51, 0.5); 334 } 335 336 /** 337 * Paginator (prev/next) navigation links on articles/article lists. 338 * 339 * Example HTML: 340 * 341 * <nav class="paginator"> 342 * <a rel="prev"> 343 * <a rel="next"> 344 */ 345 .paginator { 346 display: flex; 347 justify-content: space-between; 348 } 349 350 /** 351 * Visually hide unfocussed/inactive ‘skip links’. 352 * 353 * Example HTML: 354 * 355 * <a class="skip-link"> 356 */ 357 .skip-link { 358 position: absolute; 359 z-index: 2; 360 top: 1px; 361 left: 1px; 362 padding: 0.25em 0.5em; 363 transform: translateY(-5em); 364 transition: transform 0.25s ease-in-out; 365 background-color: white; 366 color: #333333; 367 font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 368 } 369 370 .skip-link:focus, .skip-link:active { 371 transform: translateY(0); 372 } 373 374 /* Typography 375 ========================================================================== */ 376 /** 377 * Establish baseline. 378 */ 379 html { 380 font-size: 16px; 381 line-height: 1.5; 382 } 383 384 /** 385 * Global font and text colour. 386 */ 387 body { 388 color: #333333; 389 font-family: "PT Serif", Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; 390 } 391 392 /** 393 * Sans-serif font for main navigation menu. 394 */ 395 .site-navigation { 396 font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 397 font-weight: bold; 398 } 399 400 /** 401 * Harmonize size, style and vertical margin of headings. 402 */ 403 h1, 404 h2, 405 h3, 406 h4, 407 h5, 408 h6 { 409 clear: both; 410 color: #000000; 411 font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 412 } 413 414 h1 { 415 margin: 0.6315789em 0; 416 font-size: 2.375rem; 417 letter-spacing: -0.25px; 418 line-height: 1.1842105; 419 } 420 421 h2 { 422 margin: 0.75em 0; 423 font-size: 2rem; 424 letter-spacing: -0.25px; 425 line-height: 1.25; 426 } 427 428 h3 { 429 margin: 1em 0; 430 font-size: 1.5rem; 431 letter-spacing: -0.25px; 432 line-height: 1.3333333; 433 } 434 435 h4 { 436 margin: 1em 0; 437 font-size: 1.25rem; 438 line-height: 1.4; 439 } 440 441 h5 { 442 margin: 1em 0; 443 font-size: 1.125rem; 444 line-height: 1.4444444; 445 } 446 447 h6 { 448 margin: 1em 0; 449 font-size: 1rem; 450 line-height: 1.5; 451 } 452 453 /** 454 * Add the correct font weight in Chrome, Edge, and Safari. 455 */ 456 b, 457 strong { 458 font-weight: bolder; 459 } 460 461 /** 462 * Add vertical margin to addresses. 463 */ 464 address { 465 margin: 1em 0; 466 } 467 468 /** 469 * Additional styling for blockquotes. 470 */ 471 blockquote { 472 margin: 0.8em 0; 473 font-size: 1.25rem; 474 font-style: italic; 475 line-height: 1.4; 476 text-align: center; 477 } 478 479 /** 480 * 1. Remove the bottom border in Chrome 57+. 481 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 482 */ 483 abbr[title] { 484 /* 1 */ 485 border-bottom: 0; 486 /* 2 */ 487 -webkit-text-decoration: underline dotted; 488 text-decoration: underline dotted; 489 } 490 491 /** 492 * Consistent styling for `mark` and `var` tags. 493 */ 494 mark, 495 var { 496 padding: 0 0.25em; 497 border-radius: 0.25em; 498 background: #fff9e1; 499 color: #333333; 500 } 501 502 /** 503 * Harmonize size and style of computer text. 504 */ 505 pre, 506 code, 507 kbd, 508 samp { 509 border: 1px solid #e3e3e3; 510 border-radius: 0.2857143em; 511 background-color: #f7f7f7; 512 color: #333333; 513 font-family: Menlo, Consolas, Monaco, monospace; 514 font-size: 0.875rem; 515 line-height: 1.5; 516 } 517 518 code, 519 kbd, 520 samp { 521 padding: 1px 0.21429em; 522 } 523 524 /** 525 * Additional stylng for preformatted text/code. 526 * 527 * 1. Contain overflow in all browsers. 528 * 2. Don't wrap long words. 529 * 3. Set tab size to 4 spaces. 530 */ 531 pre { 532 padding: 0.5714286em 1.1428571em; 533 /* 1 */ 534 overflow-x: auto; 535 /* 2 */ 536 word-wrap: normal; 537 /* 3 */ 538 -moz-tab-size: 4; 539 -o-tab-size: 4; 540 tab-size: 4; 541 } 542 543 pre code { 544 padding: 0; 545 border: 0; 546 background-color: transparent; 547 direction: ltr; 548 font-size: 1em; 549 -webkit-hyphens: none; 550 -ms-hyphens: none; 551 hyphens: none; 552 text-align: left; 553 word-wrap: normal; 554 word-break: normal; 555 word-spacing: normal; 556 white-space: pre; 557 } 558 559 /** 560 * Prevent `sub` and `sup` elements from affecting the line height in all 561 * browsers. 562 */ 563 sub, 564 sup.footnote, 565 sup { 566 position: relative; 567 font-size: 0.75em; 568 line-height: 0; 569 vertical-align: baseline; 570 } 571 572 sup { 573 top: -0.5em; 574 } 575 576 sub { 577 bottom: -0.25em; 578 } 579 580 /** 581 * Harmonize size and style of small text. 582 */ 583 small, 584 figcaption, 585 tfoot, 586 .footnote { 587 font-size: 0.8125rem; 588 line-height: 1.5; 589 } 590 591 figcaption, 592 tfoot, 593 .footnote { 594 color: #585858; 595 } 596 597 figcaption { 598 margin-top: 0.5em; 599 font-style: italic; 600 } 601 602 /** 603 * 1. Add the correct box sizing in Firefox. 604 * 2. Show the overflow in Edge and IE. 605 */ 606 hr { 607 /* 1 */ 608 box-sizing: content-box; 609 height: 24px; 610 margin: 1em 0; 611 /* 2 */ 612 overflow: visible; 613 border: 0; 614 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24'%3E%3Cpath fill='%23333' d='M0,0c1.742,13.61,54.74,20.912,119.995,15.279C184.922,9.679,238.594,13.024,240,24c-1.744-13.613-54.742-20.913-120.005-15.284C55.078,14.32,1.405,10.973,0,0z'/%3E%3C/svg%3E") 50% 50% no-repeat; 615 background-size: 240px 24px; 616 } 617 618 /* Support for non-latin languages (can be removed if not required) 619 ========================================================================== */ 620 /** 621 * Bidirectional (bidi) text support. 622 * See: https://www.w3.org/International/articles/inline-bidi-markup/#cssshim 623 */ 624 [dir=ltr], 625 [dir=rtl] { 626 unicode-bidi: -webkit-isolate; 627 unicode-bidi: isolate; 628 } 629 630 bdo[dir=ltr], 631 bdo[dir=rtl] { 632 unicode-bidi: isolate-override; 633 } 634 635 /** 636 * Preferred font for Japanese language. 637 */ 638 :lang(ja) { 639 font-family: "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Meiryo UI", sans-serif; 640 font-weight: 300; 641 } 642 643 /** 644 * Preferred font for Korean language. 645 */ 646 :lang(ko) { 647 font-family: GulimChe, Gulim, sans-serif; 648 } 649 650 /** 651 * Preferred font for simplified Chinese (PRC) language. 652 */ 653 :lang(zh-cn) { 654 font-family: "PingFang SC", SimHei, sans-serif; 655 } 656 657 /** 658 * Preferred font for traditional Chinese (Taiwan, Hong Kong) language. 659 */ 660 :lang(zh-tw) { 661 font-family: "PingFang TC", PMingLiU, sans-serif; 662 } 663 664 /** 665 * Suppress `text-decoration` in some RTL languages for better legibility. 666 */ 667 [lang|=ar] a:hover, 668 [lang|=fa] a:hover, 669 [lang|=ur] a:hover { 670 text-decoration: none; 671 } 672 673 /** 674 * Computer code should be LTR. 675 */ 676 [dir=rtl] code { 677 direction: ltr; 678 } 679 680 /** 681 * Swap image alignment right/left positions in RTL languages. 682 */ 683 [dir=rtl] img.align-left { 684 margin: 1em 0 1em 1em; 685 float: right; 686 } 687 688 [dir=rtl] img.align-right { 689 margin: 1em 1em 1em 0; 690 float: left; 691 } 692 693 /** 694 * Swap table caption alignment in RTL languages. 695 */ 696 [dir=rtl] caption { 697 text-align: right; 698 } 699 700 /** 701 * Swap table cell text alignments in RTL languages. 702 */ 703 [dir=rtl] th, 704 [dir=rtl] td { 705 text-align: right; 706 } 707 708 /** 709 * Swap menu/list padding positions in RTL languages. 710 */ 711 [dir=rtl] menu, 712 [dir=rtl] ol, 713 [dir=rtl] ul { 714 padding: 0 2em 0 0; 715 } 716 717 [dir=rtl] .site-navigation ul, 718 [dir=rtl] .article-list { 719 padding: 0; 720 } 721 722 /** 723 * Swap definition description margin positions in RTL languages. 724 */ 725 [dir=rtl] dd { 726 margin: 0 2em 0 0; 727 } 728 729 /** 730 * Swap checkbox/radio margin positions in RTL languages. 731 */ 732 [dir=rtl] input[type=checkbox] + label, 733 [dir=rtl] input[type=radio] + label { 734 margin: 0 0 0 0.5em; 735 } 736 737 [dir=rtl] input[type=checkbox] + label:last-of-type, 738 [dir=rtl] input[type=radio] + label:last-of-type { 739 margin: 0; 740 } 741 742 /** 743 * Swap `select` icon position in RTL languages. 744 */ 745 [dir=rtl] select { 746 padding-right: 0.1875em; 747 padding-left: 1.5em; 748 background-position: 0.5em center; 749 } 750 751 /** 752 * Swap ‘skip links’ position in RTL languages. 753 */ 754 [dir=rtl] .skip-link { 755 right: 1px; 756 left: auto; 757 } 758 759 /** 760 * Swap anchor float position on comments. 761 */ 762 [dir=rtl] .comments h4 .comment-anchor { 763 float: left; 764 } 765 766 /* Embedded content 767 ========================================================================== */ 768 /** 769 * Add the correct display in IE 11. 770 */ 771 video { 772 display: inline-block; 773 } 774 775 /** 776 * Make embedded elements responsive. 777 */ 778 img, 779 video { 780 max-width: 100%; 781 height: auto; 782 } 783 784 /** 785 * Images. 786 * 787 * 1. Remove the gap between images and the bottom of their containers. 788 * 789 * Image alignment (compatible with Textile markup syntax). 790 * 791 * Example HTML: 792 * 793 * <img class="align-left"> 794 * <img class="align-right"> 795 * <img class="align-center"> 796 */ 797 img { 798 /* 1 */ 799 vertical-align: middle; 800 } 801 802 img.align-left { 803 margin: 1em 1em 1em 0; 804 float: left; 805 } 806 807 img.align-right { 808 margin: 1em 0 1em 1em; 809 float: right; 810 } 811 812 img.align-center { 813 display: block; 814 margin: 1em auto; 815 } 816 817 /** 818 * Consistent margins on `figure`. 819 */ 820 figure { 821 margin: 1em 0; 822 } 823 824 /* Tables 825 ========================================================================== */ 826 /** 827 * Consistent tables. 828 */ 829 table { 830 width: 100%; 831 margin-bottom: 1em; 832 border-spacing: 0; 833 border-collapse: collapse; 834 } 835 836 /** 837 * Styling of table captions. 838 */ 839 caption { 840 margin-bottom: 0.5em; 841 font-style: italic; 842 text-align: left; 843 } 844 845 /** 846 * Make table cells align top and left by default. 847 */ 848 th, 849 td { 850 padding: 0.5em; 851 border: 1px solid #d4d4d4; 852 vertical-align: top; 853 text-align: left; 854 } 855 856 /** 857 * Emphasize table header. 858 */ 859 thead tr { 860 background-color: #eeeeee; 861 } 862 863 thead th, 864 thead td { 865 border: 1px solid #cccccc; 866 } 867 868 /** 869 * 'Zebra striping' of `tbody` rows. 870 */ 871 tbody tr:nth-child(even) { 872 background-color: #f7f7f7; 873 } 874 875 /** 876 * Adjust padding of table footer due to smaller font size. 877 */ 878 tfoot th, 879 tfoot td { 880 padding: 0.6666667em; 881 } 882 883 /** 884 * Multi-row span vertical cell alignments. 885 */ 886 [rowspan] { 887 vertical-align: middle; 888 } 889 890 /* Lists 891 ========================================================================== */ 892 /** 893 * Address paddings set differently. 894 */ 895 menu, 896 ol, 897 ul { 898 padding: 0 0 0 2em; 899 } 900 901 /** 902 * Remove margins from nested lists. 903 */ 904 li > ul, 905 li > ol { 906 margin: 0; 907 } 908 909 /** 910 * CSS Lists and Counters Module Level 3 list marker styling. 911 */ 912 li::marker { 913 color: color-text-heading; 914 } 915 916 /** 917 * Address margins set differently. 918 */ 919 dd { 920 margin: 0 0 0 2em; 921 } 922 923 /** 924 * Additional styling for article lists. 925 * 926 * Example HTML: 927 * 928 * <ul class="article-list"> 929 */ 930 .article-list { 931 margin: 0 0 2em; 932 padding: 0; 933 border-top: 1px solid #cccccc; 934 list-style: none; 935 } 936 937 .article-list li { 938 margin-bottom: 0; 939 border-bottom: 1px solid #cccccc; 940 } 941 942 /* Forms 943 ========================================================================== */ 944 /** 945 * 1. Address width being affected by wide descendants in Chrome, Firefox. 946 * 2. Define consistent fieldset border, margin, and padding. 947 */ 948 fieldset { 949 /* 1 */ 950 min-width: 0; 951 /* 2 */ 952 margin: 1em 0; 953 padding: 1px 1em; 954 border: 1px solid #cccccc; 955 } 956 957 /** 958 * Normalize styling of `legend`. 959 * 960 * 1. Correct wrapping not present in IE 11 and Edge 12/13. 961 * 2. Remove padding so people aren't caught out if they zero out fieldsets. 962 * 3. Correct `color` not being inherited from fieldset in IE 11. 963 */ 964 legend { 965 /* 1 */ 966 display: table; 967 /* 1 */ 968 box-sizing: border-box; 969 /* 1 */ 970 max-width: 100%; 971 /* 2 */ 972 padding: 0; 973 /* 3 */ 974 color: inherit; 975 /* 1 */ 976 white-space: normal; 977 } 978 979 /** 980 * 1. Show the overflow in Edge. 981 * 2. Remove tap delay in modern browsers. 982 */ 983 button, 984 input { 985 /* 1 */ 986 overflow: visible; 987 /* 2 */ 988 touch-action: manipulation; 989 } 990 991 /** 992 * 1. Prevent elements from spilling out of their parent. 993 * 2. Address margins set differently in Firefox 4+, Safari, and Chrome. 994 * 3. Correct font properties not being inherited. 995 */ 996 button, 997 input, 998 optgroup, 999 select, 1000 textarea { 1001 box-sizing: border-box; 1002 /* 1 */ 1003 max-width: 100%; 1004 /* 2 */ 1005 margin: 0; 1006 color: #000000; 1007 font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 1008 /* 3 */ 1009 font-size: 1rem; 1010 line-height: 1.375; 1011 vertical-align: baseline; 1012 } 1013 1014 /** 1015 * Styling of form input fields. 1016 * 1017 * 1. Remove browser-specific default styling. 1018 */ 1019 [type=color], 1020 [type=date], 1021 [type=datetime], 1022 [type=datetime-local], 1023 [type=email], 1024 [type=month], 1025 [type=number], 1026 [type=password], 1027 [type=search], 1028 [type=tel], 1029 [type=text], 1030 [type=time], 1031 [type=url], 1032 [type=week], 1033 select, 1034 textarea { 1035 height: 2em; 1036 padding: 0.25em 0.1875em; 1037 border: 1px solid #cccccc; 1038 border-radius: 0; 1039 background: #ffffff; 1040 /* 1 */ 1041 -webkit-appearance: none; 1042 -moz-appearance: none; 1043 appearance: none; 1044 } 1045 1046 [type=color]:focus, 1047 [type=date]:focus, 1048 [type=datetime]:focus, 1049 [type=datetime-local]:focus, 1050 [type=email]:focus, 1051 [type=month]:focus, 1052 [type=number]:focus, 1053 [type=password]:focus, 1054 [type=search]:focus, 1055 [type=tel]:focus, 1056 [type=text]:focus, 1057 [type=time]:focus, 1058 [type=url]:focus, 1059 [type=week]:focus, 1060 select:focus, 1061 textarea:focus { 1062 border-color: #0066ff; 1063 outline: 1px solid transparent; 1064 } 1065 1066 /** 1067 * 1. Remove any excess padding. 1068 * 2. Correct margins for inline checkbox/radio labels. 1069 */ 1070 [type=checkbox], 1071 [type=radio] { 1072 /* 1 */ 1073 padding: 0; 1074 } 1075 1076 [type=checkbox] + label, 1077 [type=radio] + label { 1078 /* 2 */ 1079 margin: 0 0.5em 0 0; 1080 } 1081 1082 [type=checkbox] + label:last-of-type, 1083 [type=radio] + label:last-of-type { 1084 /* 2 */ 1085 margin: 0; 1086 } 1087 1088 /** 1089 * Correct the cursor style of increment and decrement buttons in Safari. 1090 */ 1091 [type=number]::-webkit-inner-spin-button, 1092 [type=number]::-webkit-outer-spin-button { 1093 height: auto; 1094 } 1095 1096 /** 1097 * Remove the inner padding in Chrome and Safari on macOS. 1098 */ 1099 [type=search]::-webkit-search-decoration { 1100 /* autoprefixer: off */ 1101 appearance: none; 1102 } 1103 1104 /** 1105 * Use indicator icon to signify the drop-down ability of `select`. 1106 */ 1107 select { 1108 padding-right: 1.5em; 1109 background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='5' viewBox='0 0 17 5'%3E%3Cpolygon fill='%23333' points='0,0 5,5 10,0'/%3E%3C/svg%3E") right center no-repeat; 1110 background-size: 1.0625em 0.3125em; 1111 text-transform: none; 1112 } 1113 1114 /** 1115 * Remove browser-specific `select` UI in IE 11. 1116 */ 1117 select::-ms-expand { 1118 opacity: 0; 1119 } 1120 1121 /** 1122 * Override height and background set in a previous rule and allow auto height. 1123 */ 1124 select[size], 1125 select[multiple] { 1126 height: auto; 1127 padding-right: 0.5em; 1128 background-image: none; 1129 } 1130 1131 /** 1132 * Override height set in rule above and restrict to one line field. 1133 */ 1134 select[size="0"], 1135 select[size="1"] { 1136 height: 2em; 1137 } 1138 1139 /** 1140 * Normalize styling of `optgroup`. 1141 */ 1142 optgroup { 1143 font-style: normal; 1144 font-weight: bold; 1145 } 1146 1147 /** 1148 * 1. Remove default vertical scrollbar in IE 11. 1149 * 2. Remove unwanted space below `textarea` in Safari, Chrome, Opera. 1150 * 3. Restrict to vertical resizing to prevent layout breakage. 1151 */ 1152 textarea { 1153 width: 100%; 1154 height: auto; 1155 min-height: 3em; 1156 /* 1 */ 1157 overflow: auto; 1158 /* 2 */ 1159 vertical-align: top; 1160 /* 3 */ 1161 resize: vertical; 1162 } 1163 1164 /** 1165 * Make sure disabled elements really are disabled and styled appropriately. 1166 * 1167 * 1. Override default iOS opacity setting. 1168 * 2. Re-set default cursor for disabled elements. 1169 */ 1170 [disabled], 1171 [disabled] option, 1172 [disabled] optgroup, 1173 span.disabled { 1174 border-color: #d4d4d4 !important; 1175 /* 1 */ 1176 opacity: 1; 1177 background: #eeeeee !important; 1178 box-shadow: none !important; 1179 color: #aaaaaa !important; 1180 text-shadow: none !important; 1181 /* 2 */ 1182 cursor: default !important; 1183 } 1184 1185 /** 1186 * Width display options for `input` fields. Height display options 1187 * for textareas. 1188 * 1189 * Example HTML: 1190 * 1191 * <input class="small"> 1192 * <input class="large"> 1193 */ 1194 .small input { 1195 width: 25%; 1196 min-width: 151px; 1197 } 1198 1199 .small textarea { 1200 height: 5.5em; 1201 } 1202 1203 .large input { 1204 width: 50%; 1205 min-width: 302px; 1206 } 1207 1208 .large textarea { 1209 height: 9.75em; 1210 } 1211 1212 /** 1213 * Styling for form field validation. 1214 */ 1215 input:focus:invalid, 1216 select:focus:invalid, 1217 textarea:focus:invalid { 1218 border-color: #9d261d; 1219 box-shadow: none; 1220 } 1221 1222 /** 1223 * Styling for Firefox-specfic form field validation. 1224 */ 1225 input:-moz-ui-invalid, 1226 select:-moz-ui-invalid, 1227 textarea:-moz-ui-invalid { 1228 border-color: #9d261d; 1229 box-shadow: none; 1230 } 1231 1232 /** 1233 * Normalize form placeholder style across browsers. 1234 * 1235 * 1. Fix placeholder font properties inheritance. 1236 */ 1237 :-ms-input-placeholder { 1238 opacity: 1; 1239 color: #999999; 1240 /* 1 */ 1241 font: inherit; 1242 } 1243 ::placeholder { 1244 opacity: 1; 1245 color: #999999; 1246 /* 1 */ 1247 font: inherit; 1248 } 1249 1250 /** 1251 * Styling for required field indicators. 1252 * 1253 * Example HTML: 1254 * 1255 * <b class="required" title="Required">*</b> 1256 */ 1257 .required { 1258 border: 0; 1259 color: #9d261d; 1260 } 1261 1262 /* Buttons 1263 ========================================================================== */ 1264 /** 1265 * 1. Address `overflow` set to `hidden` in IE 11. 1266 * 2. Remove the inheritance of text transform in Edge, Firefox, and IE 11. 1267 */ 1268 button { 1269 /* 1 */ 1270 overflow: visible; 1271 /* 2 */ 1272 text-transform: none; 1273 } 1274 1275 /** 1276 * Remove the inner border and padding in Firefox. 1277 */ 1278 button::-moz-focus-inner, 1279 [type=button]::-moz-focus-inner, 1280 [type=reset]::-moz-focus-inner, 1281 [type=submit]::-moz-focus-inner { 1282 padding: 0; 1283 border-style: none; 1284 } 1285 1286 /** 1287 * 1. Remove browser-specific default styling. 1288 * 2. Improve usability and consistency of cursor style between image-type 1289 * `input` and others. 1290 */ 1291 button, 1292 [type=button], 1293 [type=reset], 1294 [type=submit] { 1295 background-color: #dfdfdf; 1296 background-image: linear-gradient(#eeeeee, #dfdfdf); 1297 display: inline-block; 1298 position: relative; 1299 width: auto; 1300 height: 2em; 1301 padding: 0.25em 1em; 1302 border: 1px solid #dfdfdf; 1303 border-radius: 1em; 1304 background-clip: padding-box; 1305 box-shadow: 0 2px 0 #acacac; 1306 color: #333333; 1307 font-weight: normal; 1308 text-align: center; 1309 /* 1 */ 1310 -webkit-appearance: none; 1311 -moz-appearance: none; 1312 appearance: none; 1313 /* 2 */ 1314 cursor: pointer; 1315 } 1316 1317 button:hover, 1318 [type=button]:hover, 1319 [type=reset]:hover, 1320 [type=submit]:hover { 1321 background-color: #e9e9e9; 1322 background-image: linear-gradient(#f8f8f8, #e9e9e9); 1323 border-color: #bebebe; 1324 color: #333333; 1325 text-decoration: none; 1326 } 1327 1328 button:active, 1329 [type=button]:active, 1330 [type=reset]:active, 1331 [type=submit]:active { 1332 top: 2px; 1333 border-color: #bebebe; 1334 box-shadow: none; 1335 color: #1a1a1a; 1336 text-decoration: none; 1337 } 1338 1339 button:focus, 1340 [type=button]:focus, 1341 [type=reset]:focus, 1342 [type=submit]:focus { 1343 border-color: #0066ff; 1344 outline: 1px solid transparent; 1345 } 1346 1347 /** 1348 * Disbaled button additional styling. 1349 */ 1350 button[disabled], 1351 [type=button][disabled], 1352 [type=reset][disabled], 1353 [type=submit][disabled] { 1354 top: 2px !important; 1355 } 1356 1357 /* Comments 1358 ========================================================================== */ 1359 /** 1360 * Styling for user comments. 1361 * 1362 * Example HTML: 1363 * 1364 * <article class="comments"> 1365 */ 1366 .comments { 1367 margin-bottom: 1em; 1368 padding: 1px 1em; 1369 border-radius: 0.5em; 1370 background: #f7f7f7; 1371 word-wrap: break-word; 1372 } 1373 1374 .comments h4 .is-author { 1375 font-weight: normal; 1376 } 1377 1378 .comments h4 .comment-anchor { 1379 float: right; 1380 font-weight: normal; 1381 } 1382 1383 /** 1384 * Additional styling for article author's comments. 1385 * 1386 * Example HTML: 1387 * 1388 * <article class="comments comments-author"> 1389 */ 1390 .comments-author { 1391 background: #efefef; 1392 } 1393 1394 /** 1395 * Styling for user comments preview. 1396 */ 1397 #cpreview { 1398 margin-bottom: 2px; 1399 padding: 1em; 1400 border-radius: 0.5em; 1401 background-color: #fff9e1; 1402 } 1403 1404 /** 1405 * Highlight text colour for comment errors. 1406 */ 1407 .error_message li { 1408 color: #9d261d; 1409 } 1410 1411 /** 1412 * Highlighting for comment form errors. 1413 */ 1414 .comments_error { 1415 border-color: #9d261d; 1416 } 1417 1418 /* Popup comments (can be removed if you don't use popups) 1419 ========================================================================== */ 1420 /** 1421 * Restrict maximum width of popup container. 1422 */ 1423 #popup-page .container { 1424 max-width: 52em; 1425 } 1426 } 1427 /* ========================================================================== 1428 Additional layout for screen media 576px and up 1429 ========================================================================== */ 1430 @media only screen and (min-width: 38em) { 1431 /** 1432 * Desktop version of the navigation menu. Overrides mobile first version. 1433 * 1434 * Example HTML: 1435 * 1436 * <nav class="site-navigation"> 1437 * <div> 1438 * <ul> 1439 * <li class="active"><a></li> 1440 * <li><a></li> 1441 * <li><a></li> 1442 * </ul> 1443 * <div class="search"> 1444 * <form> 1445 * <input type="search"> 1446 * </form> 1447 * </div> 1448 * </div> 1449 * </nav> 1450 */ 1451 .site-navigation { 1452 border-top: 1px solid #cccccc; 1453 border-bottom: 1px solid #cccccc; 1454 } 1455 1456 .site-navigation > div { 1457 display: flex; 1458 flex-wrap: wrap; 1459 justify-content: space-between; 1460 width: 88%; 1461 } 1462 1463 .site-navigation ul { 1464 display: flex; 1465 flex-wrap: wrap; 1466 border: 0; 1467 } 1468 1469 .site-navigation li { 1470 border-width: 0 1px; 1471 } 1472 1473 .site-navigation a { 1474 padding: 0.5em 1em; 1475 } 1476 1477 .search { 1478 margin-top: 0.2em; 1479 padding: 0; 1480 background: transparent; 1481 } 1482 1483 .search input[type=search] { 1484 width: 2.125em; 1485 padding-right: 0; 1486 transition: width 0.2s ease-in-out, border-color 0.2s ease-in-out; 1487 background-color: #eeeeee; 1488 cursor: pointer; 1489 } 1490 1491 .search input[type=search]:hover { 1492 background-color: #f8f8f8; 1493 } 1494 1495 .search input[type=search]:focus { 1496 width: 16em; 1497 padding-right: 0.1875em; 1498 background-color: white; 1499 cursor: auto; 1500 } 1501 } 1502 /* ========================================================================== 1503 Additional layout for screen media 864px and up 1504 ========================================================================== */ 1505 @media only screen and (min-width: 46em) { 1506 /** 1507 * Enlarge baseline text size. 1508 */ 1509 html { 1510 font-size: 1.125rem; 1511 } 1512 } 1513 /* ========================================================================== 1514 Additional accessibility for screen media 1515 ========================================================================== */ 1516 @media screen and (prefers-reduced-motion: reduce), (update: slow) { 1517 .search input[type=search] { 1518 transition-duration: 0; 1519 } 1520 } 1521 /* ========================================================================== 1522 Styling and layout for print media 1523 ========================================================================== */ 1524 @media print { 1525 /** 1526 * Remove unnecessary global styling from printed media. 1527 */ 1528 *, 1529 *::before, 1530 *::after { 1531 background: transparent !important; 1532 box-shadow: none !important; 1533 color: #000000 !important; 1534 text-shadow: none !important; 1535 } 1536 1537 /** 1538 * Use a print-friendly font size. 1539 */ 1540 html { 1541 font-size: 8pt; 1542 line-height: 1.5; 1543 } 1544 1545 /** 1546 * Use a print-friendly font family. 1547 */ 1548 body { 1549 margin: 0.5cm; 1550 padding: 2em 5em; 1551 font-family: "Helvetica Neue", sans-serif; 1552 } 1553 1554 /** 1555 * Make sure links are not underlined. 1556 */ 1557 a { 1558 text-decoration: none; 1559 } 1560 1561 /** 1562 * Visually separate header from body. 1563 */ 1564 .site-header { 1565 border-bottom: 1pt solid #000000; 1566 } 1567 1568 /** 1569 * Visually separate footer from body. 1570 */ 1571 .site-footer { 1572 margin-top: 12pt; 1573 border-top: 1pt solid #000000; 1574 } 1575 1576 /** 1577 * Hide unnecessary content from print. 1578 */ 1579 nav, 1580 audio, 1581 video, 1582 form, 1583 #comments-form, 1584 .comments h4 a:last-child, 1585 .complementary-content, 1586 .paginator, 1587 .skip-link { 1588 display: none; 1589 } 1590 1591 /** 1592 * Show long-form for abbreviations in print. 1593 */ 1594 abbr[title]::after { 1595 content: " (" attr(title) ")"; 1596 } 1597 1598 /** 1599 * Harmonize size, style and vertical margin of headings. 1600 */ 1601 h1 { 1602 margin: 16pt 0; 1603 font-size: 32pt; 1604 font-weight: normal; 1605 line-height: 36pt; 1606 } 1607 1608 h2 { 1609 margin: 14pt 0; 1610 font-size: 24pt; 1611 line-height: 28pt; 1612 orphans: 2; 1613 widows: 2; 1614 page-break-after: avoid; 1615 } 1616 1617 h3 { 1618 margin: 12pt 0; 1619 font-size: 18pt; 1620 line-height: 22pt; 1621 orphans: 2; 1622 widows: 2; 1623 page-break-after: avoid; 1624 } 1625 1626 h4 { 1627 margin: 11pt 0; 1628 font-size: 14pt; 1629 line-height: 18pt; 1630 orphans: 2; 1631 widows: 2; 1632 page-break-after: avoid; 1633 } 1634 1635 h5 { 1636 margin: 10pt 0; 1637 font-size: 12pt; 1638 line-height: 16pt; 1639 orphans: 2; 1640 widows: 2; 1641 page-break-after: avoid; 1642 } 1643 1644 h6 { 1645 margin: 9pt 0; 1646 font-size: 10pt; 1647 line-height: 14pt; 1648 orphans: 2; 1649 widows: 2; 1650 page-break-after: avoid; 1651 } 1652 1653 /** 1654 * Prevent widows (single final paragraph line on next page) and orphans (single 1655 * first paragraph line on previous page). 1656 */ 1657 p { 1658 orphans: 2; 1659 widows: 2; 1660 } 1661 1662 /** 1663 * Harmonize size and style of small text. 1664 */ 1665 footer, 1666 figcaption, 1667 tfoot, 1668 small, 1669 .footnote { 1670 font-size: 6pt; 1671 } 1672 1673 /** 1674 * Simple blockquote styling. 1675 * 1676 * 1. Avoid blockquotes breaking across multiple pages. 1677 */ 1678 blockquote { 1679 padding: 0 0 0 8pt; 1680 border-left: 3pt solid #000000; 1681 font-size: 16pt; 1682 /* 1 */ 1683 page-break-inside: avoid; 1684 } 1685 1686 [dir=rtl] blockquote { 1687 padding: 0 8pt 0 0; 1688 border-right: 3pt solid #000000; 1689 border-left: 0; 1690 } 1691 1692 /** 1693 * Simple preformatted text styling. 1694 * 1695 * 1. Ensure pre blocks are wrapped when printed. 1696 */ 1697 pre { 1698 margin-bottom: 8pt; 1699 padding: 8pt; 1700 border: 1pt solid #000000; 1701 /* 1 */ 1702 white-space: pre-wrap !important; 1703 } 1704 1705 /** 1706 * Use a print-friendly monospaced font and size. 1707 */ 1708 pre, 1709 code, 1710 kbd, 1711 samp, 1712 var { 1713 font-family: "Courier New", Courier, monospace; 1714 } 1715 1716 /** 1717 * Images. 1718 * 1719 * 1. Avoid images breaking across multiple pages. 1720 * 1721 * Image alignment (compatible with Textile markup syntax). 1722 * 1723 * Example HTML: 1724 * 1725 * <img class="align-left"> 1726 * <img class="align-right"> 1727 * <img class="align-center"> 1728 */ 1729 img { 1730 /* 1 */ 1731 page-break-inside: avoid; 1732 } 1733 1734 img.align-left { 1735 margin: 1em 1em 1em 0; 1736 float: left; 1737 } 1738 1739 img.align-right { 1740 margin: 1em 0 1em 1em; 1741 float: right; 1742 } 1743 1744 img.align-center { 1745 display: block; 1746 margin: 1em auto; 1747 } 1748 1749 /** 1750 * Swap image alignment right/left positions in RTL languages. 1751 */ 1752 [dir=rtl] img.align-left { 1753 margin: 1em 0 1em 1em; 1754 float: right; 1755 } 1756 1757 [dir=rtl] img.align-right { 1758 margin: 1em 1em 1em 0; 1759 float: left; 1760 } 1761 1762 /** 1763 * Ensure margin below `figure`. 1764 */ 1765 figure { 1766 margin-bottom: 8pt; 1767 } 1768 1769 /** 1770 * Ensure margin above `figcaption`. 1771 */ 1772 figcaption { 1773 margin-top: 4pt; 1774 } 1775 1776 /** 1777 * Simple bullet styling for `ul` unordered lists. 1778 */ 1779 ul { 1780 padding: 0 0 8pt 1.8em; 1781 list-style: square; 1782 } 1783 1784 [dir=rtl] ul { 1785 padding: 0 1.8em 8pt 0; 1786 } 1787 1788 /** 1789 * Simple numerical styling for `ol` ordered lists. 1790 */ 1791 ol { 1792 padding: 0 0 8pt 1.8em; 1793 list-style: decimal; 1794 } 1795 1796 [dir=rtl] ol { 1797 padding: 0 1.8em 8pt 0; 1798 } 1799 1800 /** 1801 * Normalize margins on `dl` definition lists. 1802 */ 1803 dl { 1804 padding: 0 0 8pt 1.8em; 1805 } 1806 1807 [dir=rtl] dl { 1808 padding: 0 1.8em 8pt 0; 1809 } 1810 1811 /** 1812 * 1. Make `table` span entire page width. 1813 * 2. Ensure margin below `table`. 1814 */ 1815 table { 1816 /* 1 */ 1817 width: 100%; 1818 /* 2 */ 1819 margin-bottom: 8pt; 1820 } 1821 1822 /** 1823 * Harmonize styling for `caption`. 1824 */ 1825 caption { 1826 margin-bottom: 4pt; 1827 font-weight: bold; 1828 } 1829 1830 /** 1831 * Avoid table rows breaking across multiple pages. 1832 */ 1833 tr { 1834 page-break-inside: avoid; 1835 } 1836 1837 /** 1838 * Simple styling for table cells. 1839 */ 1840 th, 1841 td { 1842 padding: 4pt 8pt; 1843 border-bottom: 1pt solid #000000; 1844 } 1845 1846 /** 1847 * Display table head across multi-page tables. 1848 */ 1849 thead { 1850 display: table-header-group; 1851 } 1852 1853 thead th { 1854 border-top: 1pt solid #000000; 1855 } 1856 1857 /** 1858 * Avoid user comments breaking across multiple pages. 1859 */ 1860 .comments { 1861 page-break-inside: avoid; 1862 } 1863 }
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
title