pure.css (26207B) - Raw
1 /*! 2 Pure v3.0.0 3 Copyright 2013 Yahoo! 4 Licensed under the BSD License. 5 https://github.com/pure-css/pure/blob/master/LICENSE 6 */ 7 /*! 8 normalize.css v | MIT License | https://necolas.github.io/normalize.css/ 9 Copyright (c) Nicolas Gallagher and Jonathan Neal 10 */ 11 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 12 13 /* Document 14 ========================================================================== */ 15 16 /** 17 * 1. Correct the line height in all browsers. 18 * 2. Prevent adjustments of font size after orientation changes in iOS. 19 */ 20 21 html { 22 line-height: 1.15; /* 1 */ 23 -webkit-text-size-adjust: 100%; /* 2 */ 24 } 25 26 /* Sections 27 ========================================================================== */ 28 29 /** 30 * Remove the margin in all browsers. 31 */ 32 33 body { 34 margin: 0; 35 } 36 37 /** 38 * Render the `main` element consistently in IE. 39 */ 40 41 main { 42 display: block; 43 } 44 45 /** 46 * Correct the font size and margin on `h1` elements within `section` and 47 * `article` contexts in Chrome, Firefox, and Safari. 48 */ 49 50 h1 { 51 font-size: 2em; 52 margin: 0.67em 0; 53 } 54 55 /* Grouping content 56 ========================================================================== */ 57 58 /** 59 * 1. Add the correct box sizing in Firefox. 60 * 2. Show the overflow in Edge and IE. 61 */ 62 63 hr { 64 box-sizing: content-box; /* 1 */ 65 height: 0; /* 1 */ 66 overflow: visible; /* 2 */ 67 } 68 69 /** 70 * 1. Correct the inheritance and scaling of font size in all browsers. 71 * 2. Correct the odd `em` font sizing in all browsers. 72 */ 73 74 pre { 75 font-family: monospace, monospace; /* 1 */ 76 font-size: 1em; /* 2 */ 77 } 78 79 /* Text-level semantics 80 ========================================================================== */ 81 82 /** 83 * Remove the gray background on active links in IE 10. 84 */ 85 86 a { 87 background-color: transparent; 88 } 89 90 /** 91 * 1. Remove the bottom border in Chrome 57- 92 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 93 */ 94 95 abbr[title] { 96 border-bottom: none; /* 1 */ 97 text-decoration: underline; /* 2 */ 98 -webkit-text-decoration: underline dotted; 99 text-decoration: underline dotted; /* 2 */ 100 } 101 102 /** 103 * Add the correct font weight in Chrome, Edge, and Safari. 104 */ 105 106 b, 107 strong { 108 font-weight: bolder; 109 } 110 111 /** 112 * 1. Correct the inheritance and scaling of font size in all browsers. 113 * 2. Correct the odd `em` font sizing in all browsers. 114 */ 115 116 code, 117 kbd, 118 samp { 119 font-family: monospace, monospace; /* 1 */ 120 font-size: 1em; /* 2 */ 121 } 122 123 /** 124 * Add the correct font size in all browsers. 125 */ 126 127 small { 128 font-size: 80%; 129 } 130 131 /** 132 * Prevent `sub` and `sup` elements from affecting the line height in 133 * all browsers. 134 */ 135 136 sub, 137 sup { 138 font-size: 75%; 139 line-height: 0; 140 position: relative; 141 vertical-align: baseline; 142 } 143 144 sub { 145 bottom: -0.25em; 146 } 147 148 sup { 149 top: -0.5em; 150 } 151 152 /* Embedded content 153 ========================================================================== */ 154 155 /** 156 * Remove the border on images inside links in IE 10. 157 */ 158 159 img { 160 border-style: none; 161 } 162 163 /* Forms 164 ========================================================================== */ 165 166 /** 167 * 1. Change the font styles in all browsers. 168 * 2. Remove the margin in Firefox and Safari. 169 */ 170 171 button, 172 input, 173 optgroup, 174 select, 175 textarea { 176 font-family: inherit; /* 1 */ 177 font-size: 100%; /* 1 */ 178 line-height: 1.15; /* 1 */ 179 margin: 0; /* 2 */ 180 } 181 182 /** 183 * Show the overflow in IE. 184 * 1. Show the overflow in Edge. 185 */ 186 187 button, 188 input { /* 1 */ 189 overflow: visible; 190 } 191 192 /** 193 * Remove the inheritance of text transform in Edge, Firefox, and IE. 194 * 1. Remove the inheritance of text transform in Firefox. 195 */ 196 197 button, 198 select { /* 1 */ 199 text-transform: none; 200 } 201 202 /** 203 * Correct the inability to style clickable types in iOS and Safari. 204 */ 205 206 button, 207 [type="button"], 208 [type="reset"], 209 [type="submit"] { 210 -webkit-appearance: button; 211 } 212 213 /** 214 * Remove the inner border and padding in Firefox. 215 */ 216 217 button::-moz-focus-inner, 218 [type="button"]::-moz-focus-inner, 219 [type="reset"]::-moz-focus-inner, 220 [type="submit"]::-moz-focus-inner { 221 border-style: none; 222 padding: 0; 223 } 224 225 /** 226 * Restore the focus styles unset by the previous rule. 227 */ 228 229 button:-moz-focusring, 230 [type="button"]:-moz-focusring, 231 [type="reset"]:-moz-focusring, 232 [type="submit"]:-moz-focusring { 233 outline: 1px dotted ButtonText; 234 } 235 236 /** 237 * Correct the padding in Firefox. 238 */ 239 240 fieldset { 241 padding: 0.35em 0.75em 0.625em; 242 } 243 244 /** 245 * 1. Correct the text wrapping in Edge and IE. 246 * 2. Correct the color inheritance from `fieldset` elements in IE. 247 * 3. Remove the padding so developers are not caught out when they zero out 248 * `fieldset` elements in all browsers. 249 */ 250 251 legend { 252 box-sizing: border-box; /* 1 */ 253 color: inherit; /* 2 */ 254 display: table; /* 1 */ 255 max-width: 100%; /* 1 */ 256 padding: 0; /* 3 */ 257 white-space: normal; /* 1 */ 258 } 259 260 /** 261 * Add the correct vertical alignment in Chrome, Firefox, and Opera. 262 */ 263 264 progress { 265 vertical-align: baseline; 266 } 267 268 /** 269 * Remove the default vertical scrollbar in IE 10+. 270 */ 271 272 textarea { 273 overflow: auto; 274 } 275 276 /** 277 * 1. Add the correct box sizing in IE 10. 278 * 2. Remove the padding in IE 10. 279 */ 280 281 [type="checkbox"], 282 [type="radio"] { 283 box-sizing: border-box; /* 1 */ 284 padding: 0; /* 2 */ 285 } 286 287 /** 288 * Correct the cursor style of increment and decrement buttons in Chrome. 289 */ 290 291 [type="number"]::-webkit-inner-spin-button, 292 [type="number"]::-webkit-outer-spin-button { 293 height: auto; 294 } 295 296 /** 297 * 1. Correct the odd appearance in Chrome and Safari. 298 * 2. Correct the outline style in Safari. 299 */ 300 301 [type="search"] { 302 -webkit-appearance: textfield; /* 1 */ 303 outline-offset: -2px; /* 2 */ 304 } 305 306 /** 307 * Remove the inner padding in Chrome and Safari on macOS. 308 */ 309 310 [type="search"]::-webkit-search-decoration { 311 -webkit-appearance: none; 312 } 313 314 /** 315 * 1. Correct the inability to style clickable types in iOS and Safari. 316 * 2. Change font properties to `inherit` in Safari. 317 */ 318 319 ::-webkit-file-upload-button { 320 -webkit-appearance: button; /* 1 */ 321 font: inherit; /* 2 */ 322 } 323 324 /* Interactive 325 ========================================================================== */ 326 327 /* 328 * Add the correct display in Edge, IE 10+, and Firefox. 329 */ 330 331 details { 332 display: block; 333 } 334 335 /* 336 * Add the correct display in all browsers. 337 */ 338 339 summary { 340 display: list-item; 341 } 342 343 /* Misc 344 ========================================================================== */ 345 346 /** 347 * Add the correct display in IE 10+. 348 */ 349 350 template { 351 display: none; 352 } 353 354 /** 355 * Add the correct display in IE 10. 356 */ 357 358 [hidden] { 359 display: none; 360 } 361 362 /*csslint important:false*/ 363 364 /* ========================================================================== 365 Pure Base Extras 366 ========================================================================== */ 367 368 /** 369 * Extra rules that Pure adds on top of Normalize.css 370 */ 371 372 html { 373 font-family: sans-serif; 374 } 375 376 /** 377 * Always hide an element when it has the `hidden` HTML attribute. 378 */ 379 380 .hidden, 381 [hidden] { 382 display: none !important; 383 } 384 385 /** 386 * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining 387 * aspect ratio. 388 */ 389 .pure-img { 390 max-width: 100%; 391 height: auto; 392 display: block; 393 } 394 395 /*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/ 396 397 .pure-g { 398 display: flex; 399 flex-flow: row wrap; 400 401 /* Prevents distributing space between rows */ 402 align-content: flex-start; 403 } 404 405 .pure-u { 406 display: inline-block; 407 vertical-align: top; 408 } 409 410 .pure-u-1, 411 .pure-u-1-1, 412 .pure-u-1-2, 413 .pure-u-1-3, 414 .pure-u-2-3, 415 .pure-u-1-4, 416 .pure-u-3-4, 417 .pure-u-1-5, 418 .pure-u-2-5, 419 .pure-u-3-5, 420 .pure-u-4-5, 421 .pure-u-5-5, 422 .pure-u-1-6, 423 .pure-u-5-6, 424 .pure-u-1-8, 425 .pure-u-3-8, 426 .pure-u-5-8, 427 .pure-u-7-8, 428 .pure-u-1-12, 429 .pure-u-5-12, 430 .pure-u-7-12, 431 .pure-u-11-12, 432 .pure-u-1-24, 433 .pure-u-2-24, 434 .pure-u-3-24, 435 .pure-u-4-24, 436 .pure-u-5-24, 437 .pure-u-6-24, 438 .pure-u-7-24, 439 .pure-u-8-24, 440 .pure-u-9-24, 441 .pure-u-10-24, 442 .pure-u-11-24, 443 .pure-u-12-24, 444 .pure-u-13-24, 445 .pure-u-14-24, 446 .pure-u-15-24, 447 .pure-u-16-24, 448 .pure-u-17-24, 449 .pure-u-18-24, 450 .pure-u-19-24, 451 .pure-u-20-24, 452 .pure-u-21-24, 453 .pure-u-22-24, 454 .pure-u-23-24, 455 .pure-u-24-24 { 456 display: inline-block; 457 letter-spacing: normal; 458 word-spacing: normal; 459 vertical-align: top; 460 text-rendering: auto; 461 } 462 463 .pure-u-1-24 { 464 width: 4.1667%; 465 } 466 467 .pure-u-1-12, 468 .pure-u-2-24 { 469 width: 8.3333%; 470 } 471 472 .pure-u-1-8, 473 .pure-u-3-24 { 474 width: 12.5000%; 475 } 476 477 .pure-u-1-6, 478 .pure-u-4-24 { 479 width: 16.6667%; 480 } 481 482 .pure-u-1-5 { 483 width: 20%; 484 } 485 486 .pure-u-5-24 { 487 width: 20.8333%; 488 } 489 490 .pure-u-1-4, 491 .pure-u-6-24 { 492 width: 25%; 493 } 494 495 .pure-u-7-24 { 496 width: 29.1667%; 497 } 498 499 .pure-u-1-3, 500 .pure-u-8-24 { 501 width: 33.3333%; 502 } 503 504 .pure-u-3-8, 505 .pure-u-9-24 { 506 width: 37.5000%; 507 } 508 509 .pure-u-2-5 { 510 width: 40%; 511 } 512 513 .pure-u-5-12, 514 .pure-u-10-24 { 515 width: 41.6667%; 516 } 517 518 .pure-u-11-24 { 519 width: 45.8333%; 520 } 521 522 .pure-u-1-2, 523 .pure-u-12-24 { 524 width: 50%; 525 } 526 527 .pure-u-13-24 { 528 width: 54.1667%; 529 } 530 531 .pure-u-7-12, 532 .pure-u-14-24 { 533 width: 58.3333%; 534 } 535 536 .pure-u-3-5 { 537 width: 60%; 538 } 539 540 .pure-u-5-8, 541 .pure-u-15-24 { 542 width: 62.5000%; 543 } 544 545 .pure-u-2-3, 546 .pure-u-16-24 { 547 width: 66.6667%; 548 } 549 550 .pure-u-17-24 { 551 width: 70.8333%; 552 } 553 554 .pure-u-3-4, 555 .pure-u-18-24 { 556 width: 75%; 557 } 558 559 .pure-u-19-24 { 560 width: 79.1667%; 561 } 562 563 .pure-u-4-5 { 564 width: 80%; 565 } 566 567 .pure-u-5-6, 568 .pure-u-20-24 { 569 width: 83.3333%; 570 } 571 572 .pure-u-7-8, 573 .pure-u-21-24 { 574 width: 87.5000%; 575 } 576 577 .pure-u-11-12, 578 .pure-u-22-24 { 579 width: 91.6667%; 580 } 581 582 .pure-u-23-24 { 583 width: 95.8333%; 584 } 585 586 .pure-u-1, 587 .pure-u-1-1, 588 .pure-u-5-5, 589 .pure-u-24-24 { 590 width: 100%; 591 } 592 .pure-button { 593 /* Structure */ 594 display: inline-block; 595 line-height: normal; 596 white-space: nowrap; 597 vertical-align: middle; 598 text-align: center; 599 cursor: pointer; 600 -webkit-user-drag: none; 601 -webkit-user-select: none; 602 user-select: none; 603 box-sizing: border-box; 604 } 605 606 /* Firefox: Get rid of the inner focus border */ 607 .pure-button::-moz-focus-inner { 608 padding: 0; 609 border: 0; 610 } 611 612 /* Inherit .pure-g styles */ 613 .pure-button-group { 614 letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ 615 text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ 616 } 617 618 .opera-only :-o-prefocus, 619 .pure-button-group { 620 word-spacing: -0.43em; 621 } 622 623 .pure-button-group .pure-button { 624 letter-spacing: normal; 625 word-spacing: normal; 626 vertical-align: top; 627 text-rendering: auto; 628 } 629 630 /*csslint outline-none:false*/ 631 632 .pure-button { 633 font-family: inherit; 634 font-size: 100%; 635 padding: 0.5em 1em; 636 color: rgba(0, 0, 0, 0.80); 637 border: none rgba(0, 0, 0, 0); 638 background-color: #E6E6E6; 639 text-decoration: none; 640 border-radius: 2px; 641 } 642 643 .pure-button-hover, 644 .pure-button:hover, 645 .pure-button:focus { 646 background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); 647 } 648 .pure-button:focus { 649 outline: 0; 650 } 651 .pure-button-active, 652 .pure-button:active { 653 box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; 654 border-color: #000; 655 } 656 657 .pure-button[disabled], 658 .pure-button-disabled, 659 .pure-button-disabled:hover, 660 .pure-button-disabled:focus, 661 .pure-button-disabled:active { 662 border: none; 663 background-image: none; 664 opacity: 0.40; 665 cursor: not-allowed; 666 box-shadow: none; 667 pointer-events: none; 668 } 669 670 .pure-button-hidden { 671 display: none; 672 } 673 674 .pure-button-primary, 675 .pure-button-selected, 676 a.pure-button-primary, 677 a.pure-button-selected { 678 background-color: rgb(0, 120, 231); 679 color: #fff; 680 } 681 682 /* Button Groups */ 683 .pure-button-group .pure-button { 684 margin: 0; 685 border-radius: 0; 686 border-right: 1px solid rgba(0, 0, 0, 0.2); 687 688 } 689 690 .pure-button-group .pure-button:first-child { 691 border-top-left-radius: 2px; 692 border-bottom-left-radius: 2px; 693 } 694 .pure-button-group .pure-button:last-child { 695 border-top-right-radius: 2px; 696 border-bottom-right-radius: 2px; 697 border-right: none; 698 } 699 700 /*csslint box-model:false*/ 701 /* 702 Box-model set to false because we're setting a height on select elements, which 703 also have border and padding. This is done because some browsers don't render 704 the padding. We explicitly set the box-model for select elements to border-box, 705 so we can ignore the csslint warning. 706 */ 707 708 .pure-form input[type="text"], 709 .pure-form input[type="password"], 710 .pure-form input[type="email"], 711 .pure-form input[type="url"], 712 .pure-form input[type="date"], 713 .pure-form input[type="month"], 714 .pure-form input[type="time"], 715 .pure-form input[type="datetime"], 716 .pure-form input[type="datetime-local"], 717 .pure-form input[type="week"], 718 .pure-form input[type="number"], 719 .pure-form input[type="search"], 720 .pure-form input[type="tel"], 721 .pure-form input[type="color"], 722 .pure-form select, 723 .pure-form textarea { 724 padding: 0.5em 0.6em; 725 display: inline-block; 726 border: 1px solid #ccc; 727 box-shadow: inset 0 1px 3px #ddd; 728 border-radius: 4px; 729 vertical-align: middle; 730 box-sizing: border-box; 731 } 732 733 /* 734 Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 735 since IE8 won't execute CSS that contains a CSS3 selector. 736 */ 737 .pure-form input:not([type]) { 738 padding: 0.5em 0.6em; 739 display: inline-block; 740 border: 1px solid #ccc; 741 box-shadow: inset 0 1px 3px #ddd; 742 border-radius: 4px; 743 box-sizing: border-box; 744 } 745 746 747 /* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */ 748 /* May be able to remove this tweak as color inputs become more standardized across browsers. */ 749 .pure-form input[type="color"] { 750 padding: 0.2em 0.5em; 751 } 752 753 754 .pure-form input[type="text"]:focus, 755 .pure-form input[type="password"]:focus, 756 .pure-form input[type="email"]:focus, 757 .pure-form input[type="url"]:focus, 758 .pure-form input[type="date"]:focus, 759 .pure-form input[type="month"]:focus, 760 .pure-form input[type="time"]:focus, 761 .pure-form input[type="datetime"]:focus, 762 .pure-form input[type="datetime-local"]:focus, 763 .pure-form input[type="week"]:focus, 764 .pure-form input[type="number"]:focus, 765 .pure-form input[type="search"]:focus, 766 .pure-form input[type="tel"]:focus, 767 .pure-form input[type="color"]:focus, 768 .pure-form select:focus, 769 .pure-form textarea:focus { 770 outline: 0; 771 border-color: #129FEA; 772 } 773 774 /* 775 Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 776 since IE8 won't execute CSS that contains a CSS3 selector. 777 */ 778 .pure-form input:not([type]):focus { 779 outline: 0; 780 border-color: #129FEA; 781 } 782 783 .pure-form input[type="file"]:focus, 784 .pure-form input[type="radio"]:focus, 785 .pure-form input[type="checkbox"]:focus { 786 outline: thin solid #129FEA; 787 outline: 1px auto #129FEA; 788 } 789 .pure-form .pure-checkbox, 790 .pure-form .pure-radio { 791 margin: 0.5em 0; 792 display: block; 793 } 794 795 .pure-form input[type="text"][disabled], 796 .pure-form input[type="password"][disabled], 797 .pure-form input[type="email"][disabled], 798 .pure-form input[type="url"][disabled], 799 .pure-form input[type="date"][disabled], 800 .pure-form input[type="month"][disabled], 801 .pure-form input[type="time"][disabled], 802 .pure-form input[type="datetime"][disabled], 803 .pure-form input[type="datetime-local"][disabled], 804 .pure-form input[type="week"][disabled], 805 .pure-form input[type="number"][disabled], 806 .pure-form input[type="search"][disabled], 807 .pure-form input[type="tel"][disabled], 808 .pure-form input[type="color"][disabled], 809 .pure-form select[disabled], 810 .pure-form textarea[disabled] { 811 cursor: not-allowed; 812 background-color: #eaeded; 813 color: #cad2d3; 814 } 815 816 /* 817 Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 818 since IE8 won't execute CSS that contains a CSS3 selector. 819 */ 820 .pure-form input:not([type])[disabled] { 821 cursor: not-allowed; 822 background-color: #eaeded; 823 color: #cad2d3; 824 } 825 .pure-form input[readonly], 826 .pure-form select[readonly], 827 .pure-form textarea[readonly] { 828 background-color: #eee; /* menu hover bg color */ 829 color: #777; /* menu text color */ 830 border-color: #ccc; 831 } 832 833 .pure-form input:focus:invalid, 834 .pure-form textarea:focus:invalid, 835 .pure-form select:focus:invalid { 836 color: #b94a48; 837 border-color: #e9322d; 838 } 839 .pure-form input[type="file"]:focus:invalid:focus, 840 .pure-form input[type="radio"]:focus:invalid:focus, 841 .pure-form input[type="checkbox"]:focus:invalid:focus { 842 outline-color: #e9322d; 843 } 844 .pure-form select { 845 /* Normalizes the height; padding is not sufficient. */ 846 height: 2.25em; 847 border: 1px solid #ccc; 848 background-color: white; 849 } 850 .pure-form select[multiple] { 851 height: auto; 852 } 853 .pure-form label { 854 margin: 0.5em 0 0.2em; 855 } 856 .pure-form fieldset { 857 margin: 0; 858 padding: 0.35em 0 0.75em; 859 border: 0; 860 } 861 .pure-form legend { 862 display: block; 863 width: 100%; 864 padding: 0.3em 0; 865 margin-bottom: 0.3em; 866 color: #333; 867 border-bottom: 1px solid #e5e5e5; 868 } 869 870 .pure-form-stacked input[type="text"], 871 .pure-form-stacked input[type="password"], 872 .pure-form-stacked input[type="email"], 873 .pure-form-stacked input[type="url"], 874 .pure-form-stacked input[type="date"], 875 .pure-form-stacked input[type="month"], 876 .pure-form-stacked input[type="time"], 877 .pure-form-stacked input[type="datetime"], 878 .pure-form-stacked input[type="datetime-local"], 879 .pure-form-stacked input[type="week"], 880 .pure-form-stacked input[type="number"], 881 .pure-form-stacked input[type="search"], 882 .pure-form-stacked input[type="tel"], 883 .pure-form-stacked input[type="color"], 884 .pure-form-stacked input[type="file"], 885 .pure-form-stacked select, 886 .pure-form-stacked label, 887 .pure-form-stacked textarea { 888 display: block; 889 margin: 0.25em 0; 890 } 891 892 /* 893 Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 894 since IE8 won't execute CSS that contains a CSS3 selector. 895 */ 896 .pure-form-stacked input:not([type]) { 897 display: block; 898 margin: 0.25em 0; 899 } 900 .pure-form-aligned input, 901 .pure-form-aligned textarea, 902 .pure-form-aligned select, 903 .pure-form-message-inline { 904 display: inline-block; 905 vertical-align: middle; 906 } 907 .pure-form-aligned textarea { 908 vertical-align: top; 909 } 910 911 /* Aligned Forms */ 912 .pure-form-aligned .pure-control-group { 913 margin-bottom: 0.5em; 914 } 915 .pure-form-aligned .pure-control-group label { 916 text-align: right; 917 display: inline-block; 918 vertical-align: middle; 919 width: 10em; 920 margin: 0 1em 0 0; 921 } 922 .pure-form-aligned .pure-controls { 923 margin: 1.5em 0 0 11em; 924 } 925 926 /* Rounded Inputs */ 927 .pure-form input.pure-input-rounded, 928 .pure-form .pure-input-rounded { 929 border-radius: 2em; 930 padding: 0.5em 1em; 931 } 932 933 /* Grouped Inputs */ 934 .pure-form .pure-group fieldset { 935 margin-bottom: 10px; 936 } 937 .pure-form .pure-group input, 938 .pure-form .pure-group textarea { 939 display: block; 940 padding: 10px; 941 margin: 0 0 -1px; 942 border-radius: 0; 943 position: relative; 944 top: -1px; 945 } 946 .pure-form .pure-group input:focus, 947 .pure-form .pure-group textarea:focus { 948 z-index: 3; 949 } 950 .pure-form .pure-group input:first-child, 951 .pure-form .pure-group textarea:first-child { 952 top: 1px; 953 border-radius: 4px 4px 0 0; 954 margin: 0; 955 } 956 .pure-form .pure-group input:first-child:last-child, 957 .pure-form .pure-group textarea:first-child:last-child { 958 top: 1px; 959 border-radius: 4px; 960 margin: 0; 961 } 962 .pure-form .pure-group input:last-child, 963 .pure-form .pure-group textarea:last-child { 964 top: -2px; 965 border-radius: 0 0 4px 4px; 966 margin: 0; 967 } 968 .pure-form .pure-group button { 969 margin: 0.35em 0; 970 } 971 972 .pure-form .pure-input-1 { 973 width: 100%; 974 } 975 .pure-form .pure-input-3-4 { 976 width: 75%; 977 } 978 .pure-form .pure-input-2-3 { 979 width: 66%; 980 } 981 .pure-form .pure-input-1-2 { 982 width: 50%; 983 } 984 .pure-form .pure-input-1-3 { 985 width: 33%; 986 } 987 .pure-form .pure-input-1-4 { 988 width: 25%; 989 } 990 991 /* Inline help for forms */ 992 .pure-form-message-inline { 993 display: inline-block; 994 padding-left: 0.3em; 995 color: #666; 996 vertical-align: middle; 997 font-size: 0.875em; 998 } 999 1000 /* Block help for forms */ 1001 .pure-form-message { 1002 display: block; 1003 color: #666; 1004 font-size: 0.875em; 1005 } 1006 1007 @media only screen and (max-width : 480px) { 1008 .pure-form button[type="submit"] { 1009 margin: 0.7em 0 0; 1010 } 1011 1012 .pure-form input:not([type]), 1013 .pure-form input[type="text"], 1014 .pure-form input[type="password"], 1015 .pure-form input[type="email"], 1016 .pure-form input[type="url"], 1017 .pure-form input[type="date"], 1018 .pure-form input[type="month"], 1019 .pure-form input[type="time"], 1020 .pure-form input[type="datetime"], 1021 .pure-form input[type="datetime-local"], 1022 .pure-form input[type="week"], 1023 .pure-form input[type="number"], 1024 .pure-form input[type="search"], 1025 .pure-form input[type="tel"], 1026 .pure-form input[type="color"], 1027 .pure-form label { 1028 margin-bottom: 0.3em; 1029 display: block; 1030 } 1031 1032 .pure-group input:not([type]), 1033 .pure-group input[type="text"], 1034 .pure-group input[type="password"], 1035 .pure-group input[type="email"], 1036 .pure-group input[type="url"], 1037 .pure-group input[type="date"], 1038 .pure-group input[type="month"], 1039 .pure-group input[type="time"], 1040 .pure-group input[type="datetime"], 1041 .pure-group input[type="datetime-local"], 1042 .pure-group input[type="week"], 1043 .pure-group input[type="number"], 1044 .pure-group input[type="search"], 1045 .pure-group input[type="tel"], 1046 .pure-group input[type="color"] { 1047 margin-bottom: 0; 1048 } 1049 1050 .pure-form-aligned .pure-control-group label { 1051 margin-bottom: 0.3em; 1052 text-align: left; 1053 display: block; 1054 width: 100%; 1055 } 1056 1057 .pure-form-aligned .pure-controls { 1058 margin: 1.5em 0 0 0; 1059 } 1060 1061 .pure-form-message-inline, 1062 .pure-form-message { 1063 display: block; 1064 font-size: 0.75em; 1065 /* Increased bottom padding to make it group with its related input element. */ 1066 padding: 0.2em 0 0.8em; 1067 } 1068 } 1069 1070 /*csslint adjoining-classes: false, box-model:false*/ 1071 .pure-menu { 1072 box-sizing: border-box; 1073 } 1074 1075 .pure-menu-fixed { 1076 position: fixed; 1077 left: 0; 1078 top: 0; 1079 z-index: 3; 1080 } 1081 1082 .pure-menu-list, 1083 .pure-menu-item { 1084 position: relative; 1085 } 1086 1087 .pure-menu-list { 1088 list-style: none; 1089 margin: 0; 1090 padding: 0; 1091 } 1092 1093 .pure-menu-item { 1094 padding: 0; 1095 margin: 0; 1096 height: 100%; 1097 } 1098 1099 .pure-menu-link, 1100 .pure-menu-heading { 1101 display: block; 1102 text-decoration: none; 1103 white-space: nowrap; 1104 } 1105 1106 /* HORIZONTAL MENU */ 1107 .pure-menu-horizontal { 1108 width: 100%; 1109 white-space: nowrap; 1110 } 1111 1112 .pure-menu-horizontal .pure-menu-list { 1113 display: inline-block; 1114 } 1115 1116 /* Initial menus should be inline-block so that they are horizontal */ 1117 .pure-menu-horizontal .pure-menu-item, 1118 .pure-menu-horizontal .pure-menu-heading, 1119 .pure-menu-horizontal .pure-menu-separator { 1120 display: inline-block; 1121 vertical-align: middle; 1122 } 1123 1124 /* Submenus should still be display: block; */ 1125 .pure-menu-item .pure-menu-item { 1126 display: block; 1127 } 1128 1129 .pure-menu-children { 1130 display: none; 1131 position: absolute; 1132 left: 100%; 1133 top: 0; 1134 margin: 0; 1135 padding: 0; 1136 z-index: 3; 1137 } 1138 1139 .pure-menu-horizontal .pure-menu-children { 1140 left: 0; 1141 top: auto; 1142 width: inherit; 1143 } 1144 1145 .pure-menu-allow-hover:hover > .pure-menu-children, 1146 .pure-menu-active > .pure-menu-children { 1147 display: block; 1148 position: absolute; 1149 } 1150 1151 /* Vertical Menus - show the dropdown arrow */ 1152 .pure-menu-has-children > .pure-menu-link:after { 1153 padding-left: 0.5em; 1154 content: "\25B8"; 1155 font-size: small; 1156 } 1157 1158 /* Horizontal Menus - show the dropdown arrow */ 1159 .pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after { 1160 content: "\25BE"; 1161 } 1162 1163 /* scrollable menus */ 1164 .pure-menu-scrollable { 1165 overflow-y: scroll; 1166 overflow-x: hidden; 1167 } 1168 1169 .pure-menu-scrollable .pure-menu-list { 1170 display: block; 1171 } 1172 1173 .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list { 1174 display: inline-block; 1175 } 1176 1177 .pure-menu-horizontal.pure-menu-scrollable { 1178 white-space: nowrap; 1179 overflow-y: hidden; 1180 overflow-x: auto; 1181 /* a little extra padding for this style to allow for scrollbars */ 1182 padding: .5em 0; 1183 } 1184 1185 /* misc default styling */ 1186 1187 .pure-menu-separator, 1188 .pure-menu-horizontal .pure-menu-children .pure-menu-separator { 1189 background-color: #ccc; 1190 height: 1px; 1191 margin: .3em 0; 1192 } 1193 1194 .pure-menu-horizontal .pure-menu-separator { 1195 width: 1px; 1196 height: 1.3em; 1197 margin: 0 .3em ; 1198 } 1199 1200 /* Need to reset the separator since submenu is vertical */ 1201 .pure-menu-horizontal .pure-menu-children .pure-menu-separator { 1202 display: block; 1203 width: auto; 1204 } 1205 1206 .pure-menu-heading { 1207 text-transform: uppercase; 1208 color: #565d64; 1209 } 1210 1211 .pure-menu-link { 1212 color: #777; 1213 } 1214 1215 .pure-menu-children { 1216 background-color: #fff; 1217 } 1218 1219 .pure-menu-link, 1220 .pure-menu-heading { 1221 padding: .5em 1em; 1222 } 1223 1224 .pure-menu-disabled { 1225 opacity: .5; 1226 } 1227 1228 .pure-menu-disabled .pure-menu-link:hover { 1229 background-color: transparent; 1230 cursor: default; 1231 } 1232 1233 .pure-menu-active > .pure-menu-link, 1234 .pure-menu-link:hover, 1235 .pure-menu-link:focus { 1236 background-color: #eee; 1237 } 1238 1239 .pure-menu-selected > .pure-menu-link, 1240 .pure-menu-selected > .pure-menu-link:visited { 1241 color: #000; 1242 } 1243 1244 .pure-table { 1245 /* Remove spacing between table cells (from Normalize.css) */ 1246 border-collapse: collapse; 1247 border-spacing: 0; 1248 empty-cells: show; 1249 border: 1px solid #cbcbcb; 1250 } 1251 1252 .pure-table caption { 1253 color: #000; 1254 font: italic 85%/1 arial, sans-serif; 1255 padding: 1em 0; 1256 text-align: center; 1257 } 1258 1259 .pure-table td, 1260 .pure-table th { 1261 border-left: 1px solid #cbcbcb;/* inner column border */ 1262 border-width: 0 0 0 1px; 1263 font-size: inherit; 1264 margin: 0; 1265 overflow: visible; /*to make ths where the title is really long work*/ 1266 padding: 0.5em 1em; /* cell padding */ 1267 } 1268 1269 .pure-table thead { 1270 background-color: #e0e0e0; 1271 color: #000; 1272 text-align: left; 1273 vertical-align: bottom; 1274 } 1275 1276 /* 1277 striping: 1278 even - #fff (white) 1279 odd - #f2f2f2 (light gray) 1280 */ 1281 .pure-table td { 1282 background-color: transparent; 1283 } 1284 .pure-table-odd td { 1285 background-color: #f2f2f2; 1286 } 1287 1288 /* nth-child selector for modern browsers */ 1289 .pure-table-striped tr:nth-child(2n-1) td { 1290 background-color: #f2f2f2; 1291 } 1292 1293 /* BORDERED TABLES */ 1294 .pure-table-bordered td { 1295 border-bottom: 1px solid #cbcbcb; 1296 } 1297 .pure-table-bordered tbody > tr:last-child > td { 1298 border-bottom-width: 0; 1299 } 1300 1301 1302 /* HORIZONTAL BORDERED TABLES */ 1303 1304 .pure-table-horizontal td, 1305 .pure-table-horizontal th { 1306 border-width: 0 0 1px 0; 1307 border-bottom: 1px solid #cbcbcb; 1308 } 1309 .pure-table-horizontal tbody > tr:last-child > td { 1310 border-bottom-width: 0; 1311 }