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