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