pure-css-rails 0.3.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,14 +1,14 @@
1
1
  /*!
2
- Pure v0.3.0
3
- Copyright 2013 Yahoo! Inc. All rights reserved.
2
+ Pure v0.4.1
3
+ Copyright 2014 Yahoo! Inc. All rights reserved.
4
4
  Licensed under the BSD License.
5
5
  https://github.com/yui/pure/blob/master/LICENSE.md
6
6
  */
7
7
  /*!
8
- normalize.css v1.1.2 | MIT License | git.io/normalize
8
+ normalize.css v1.1.3 | MIT License | git.io/normalize
9
9
  Copyright (c) Nicolas Gallagher and Jonathan Neal
10
10
  */
11
- /*! normalize.css v1.1.2 | MIT License | git.io/normalize */
11
+ /*! normalize.css v1.1.3 | MIT License | git.io/normalize */
12
12
 
13
13
  /* ==========================================================================
14
14
  HTML5 display definitions
@@ -536,425 +536,309 @@ table {
536
536
  border-spacing: 0;
537
537
  }
538
538
 
539
- .pure-button {
540
- /* Structure */
541
- display: inline-block;
542
- *display: inline; /*IE 6/7*/
543
- zoom: 1;
544
- line-height: normal;
545
- white-space: nowrap;
546
- vertical-align: baseline;
547
- text-align: center;
548
- cursor: pointer;
549
- -webkit-user-drag: none;
550
- -webkit-user-select: none;
551
- -moz-user-select: none;
552
- -ms-user-select: none;
553
- user-select: none;
554
- }
539
+ /*csslint important:false*/
555
540
 
556
- /* Firefox: Get rid of the inner focus border */
557
- .pure-button::-moz-focus-inner {
558
- padding: 0;
559
- border: 0;
560
- }
541
+ /* ==========================================================================
542
+ Pure Base Extras
543
+ ========================================================================== */
561
544
 
562
- /*csslint unqualified-attributes:false, outline-none:false*/
545
+ /**
546
+ * Extra rules that Pure adds on top of Normalize.css
547
+ */
563
548
 
564
- .pure-button {
565
- font-size: 100%;
566
- *font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/
567
- *overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */
568
- padding: 0.5em 1.5em 0.5em;
569
- color: #444; /* rgba not supported (IE 8) */
570
- color: rgba(0, 0, 0, 0.80); /* rgba supported */
571
- *color: #444; /* IE 6 & 7 */
572
- border: 1px solid #999; /*IE 6/7/8*/
573
- border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/
574
- background-color: #E6E6E6;
575
- text-decoration: none;
576
- border-radius: 2px;
577
- /* Transitions */
578
- -webkit-transition: 0.1s linear -webkit-box-shadow;
579
- -moz-transition: 0.1s linear -moz-box-shadow;
580
- -ms-transition: 0.1s linear box-shadow;
581
- -o-transition: 0.1s linear box-shadow;
582
- transition: 0.1s linear box-shadow;
583
- }
549
+ /**
550
+ * Always hide an element when it has the `hidden` HTML attribute.
551
+ */
584
552
 
585
- .pure-button-hover,
586
- .pure-button:hover,
587
- .pure-button:focus {
588
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
589
- 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)));
590
- background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
591
- background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
592
- background-image: -ms-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
593
- background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
594
- background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
595
- }
596
- .pure-button:focus {
597
- outline: 0;
598
- }
599
- .pure-button-active,
600
- .pure-button:active {
601
- box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
553
+ [hidden] {
554
+ display: none !important;
602
555
  }
603
556
 
604
- .pure-button[disabled],
605
- .pure-button-disabled,
606
- .pure-button-disabled:hover,
607
- .pure-button-disabled:focus,
608
- .pure-button-disabled:active {
609
- border: none;
610
- background-image: none;
611
- filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
612
- filter: alpha(opacity=40);
613
- -khtml-opacity: 0.40;
614
- -moz-opacity: 0.40;
615
- opacity: 0.40;
616
- cursor: not-allowed;
617
- box-shadow: none;
618
- }
557
+ /*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/
619
558
 
620
- .pure-button-hidden {
621
- display: none;
622
- }
559
+ .pure-g {
560
+ letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
561
+ *letter-spacing: normal; /* reset IE < 8 */
562
+ *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
563
+ text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
623
564
 
624
- /* Firefox: Get rid of the inner focus border */
625
- .pure-button::-moz-focus-inner{
626
- padding: 0;
627
- border: 0;
565
+ /*
566
+ Sets the font stack to fonts known to work properly with the above letter
567
+ and word spacings. See: https://github.com/yui/pure/issues/41/
568
+
569
+ The following font stack makes Pure Grids work on all known environments.
570
+
571
+ * FreeSans: Ships with many Linux distros, including Ubuntu
572
+
573
+ * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
574
+ Arial to get picked up by the browser, even though neither is available
575
+ in Chrome OS.
576
+
577
+ * Droid Sans: Ships with all versions of Android.
578
+
579
+ * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
580
+ */
581
+ font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
582
+
583
+ /*
584
+ Use flexbox when possible to avoid `letter-spacing` side-effects.
585
+
586
+ NOTE: Firefox (as of 25) does not currently support flex-wrap, so the
587
+ `-moz-` prefix version is omitted.
588
+ */
589
+
590
+ display: -webkit-flex;
591
+ -webkit-flex-flow: row wrap;
592
+
593
+ /* IE10 uses display: flexbox */
594
+ display: -ms-flexbox;
595
+ -ms-flex-flow: row wrap;
628
596
  }
629
597
 
630
- .pure-button-primary,
631
- .pure-button-selected,
632
- a.pure-button-primary,
633
- a.pure-button-selected {
634
- background-color: rgb(0, 120, 231);
635
- color: #fff;
598
+ /* Opera as of 12 on Windows needs word-spacing.
599
+ The ".opera-only" selector is used to prevent actual prefocus styling
600
+ and is not required in markup.
601
+ */
602
+ .opera-only :-o-prefocus,
603
+ .pure-g {
604
+ word-spacing: -0.43em;
636
605
  }
637
606
 
638
- .pure-form input[type="text"],
639
- .pure-form input[type="password"],
640
- .pure-form input[type="email"],
641
- .pure-form input[type="url"],
642
- .pure-form input[type="date"],
643
- .pure-form input[type="month"],
644
- .pure-form input[type="time"],
645
- .pure-form input[type="datetime"],
646
- .pure-form input[type="datetime-local"],
647
- .pure-form input[type="week"],
648
- .pure-form input[type="number"],
649
- .pure-form input[type="search"],
650
- .pure-form input[type="tel"],
651
- .pure-form input[type="color"],
652
- .pure-form select,
653
- .pure-form textarea {
654
- padding: 0.5em 0.6em;
607
+ .pure-u {
655
608
  display: inline-block;
656
- border: 1px solid #ccc;
657
- font-size: 0.8em;
658
- box-shadow: inset 0 1px 3px #ddd;
659
- border-radius: 4px;
660
- -webkit-transition: 0.3s linear border;
661
- -moz-transition: 0.3s linear border;
662
- -ms-transition: 0.3s linear border;
663
- -o-transition: 0.3s linear border;
664
- transition: 0.3s linear border;
665
- -webkit-box-sizing: border-box;
666
- -moz-box-sizing: border-box;
667
- box-sizing: border-box;
609
+ *display: inline; /* IE < 8: fake inline-block */
610
+ zoom: 1;
611
+ letter-spacing: normal;
612
+ word-spacing: normal;
613
+ vertical-align: top;
614
+ text-rendering: auto;
668
615
  }
669
616
 
670
- .pure-form input[type="text"]:focus,
671
- .pure-form input[type="password"]:focus,
672
- .pure-form input[type="email"]:focus,
673
- .pure-form input[type="url"]:focus,
674
- .pure-form input[type="date"]:focus,
675
- .pure-form input[type="month"]:focus,
676
- .pure-form input[type="time"]:focus,
677
- .pure-form input[type="datetime"]:focus,
678
- .pure-form input[type="datetime-local"]:focus,
679
- .pure-form input[type="week"]:focus,
680
- .pure-form input[type="number"]:focus,
681
- .pure-form input[type="search"]:focus,
682
- .pure-form input[type="tel"]:focus,
683
- .pure-form input[type="color"]:focus,
684
- .pure-form select:focus,
685
- .pure-form textarea:focus {
686
- outline: 0;
687
- outline: thin dotted \9; /* IE6-9 */
688
- border-color: #129FEA;
617
+ /*
618
+ Resets the font family back to the OS/browser's default sans-serif font,
619
+ this the same font stack that Normalize.css sets for the `body`.
620
+ */
621
+ .pure-g [class *= "pure-u"] {
622
+ font-family: sans-serif;
689
623
  }
690
624
 
691
- .pure-form input[type="file"]:focus,
692
- .pure-form input[type="radio"]:focus,
693
- .pure-form input[type="checkbox"]:focus {
694
- outline: thin dotted #333;
695
- outline: 1px auto #129FEA;
696
- }
697
- .pure-form .pure-checkbox,
698
- .pure-form .pure-radio {
699
- margin: 0.5em 0;
700
- display: block;
701
- }
702
- .pure-form input[type="text"][disabled],
703
- .pure-form input[type="password"][disabled],
704
- .pure-form input[type="email"][disabled],
705
- .pure-form input[type="url"][disabled],
706
- .pure-form input[type="date"][disabled],
707
- .pure-form input[type="month"][disabled],
708
- .pure-form input[type="time"][disabled],
709
- .pure-form input[type="datetime"][disabled],
710
- .pure-form input[type="datetime-local"][disabled],
711
- .pure-form input[type="week"][disabled],
712
- .pure-form input[type="number"][disabled],
713
- .pure-form input[type="search"][disabled],
714
- .pure-form input[type="tel"][disabled],
715
- .pure-form input[type="color"][disabled],
716
- .pure-form select[disabled],
717
- .pure-form textarea[disabled] {
718
- cursor: not-allowed;
719
- background-color: #eaeded;
720
- color: #cad2d3;
721
- }
722
- .pure-form input[readonly],
723
- .pure-form select[readonly],
724
- .pure-form textarea[readonly] {
725
- background: #eee; /* menu hover bg color */
726
- color: #777; /* menu text color */
727
- border-color: #ccc;
625
+ .pure-u-1,
626
+ .pure-u-1-1,
627
+ .pure-u-1-2,
628
+ .pure-u-1-3,
629
+ .pure-u-2-3,
630
+ .pure-u-1-4,
631
+ .pure-u-3-4,
632
+ .pure-u-1-5,
633
+ .pure-u-2-5,
634
+ .pure-u-3-5,
635
+ .pure-u-4-5,
636
+ .pure-u-5-5,
637
+ .pure-u-1-6,
638
+ .pure-u-5-6,
639
+ .pure-u-1-8,
640
+ .pure-u-3-8,
641
+ .pure-u-5-8,
642
+ .pure-u-7-8,
643
+ .pure-u-1-12,
644
+ .pure-u-5-12,
645
+ .pure-u-7-12,
646
+ .pure-u-11-12,
647
+ .pure-u-1-24,
648
+ .pure-u-2-24,
649
+ .pure-u-3-24,
650
+ .pure-u-4-24,
651
+ .pure-u-5-24,
652
+ .pure-u-6-24,
653
+ .pure-u-7-24,
654
+ .pure-u-8-24,
655
+ .pure-u-9-24,
656
+ .pure-u-10-24,
657
+ .pure-u-11-24,
658
+ .pure-u-12-24,
659
+ .pure-u-13-24,
660
+ .pure-u-14-24,
661
+ .pure-u-15-24,
662
+ .pure-u-16-24,
663
+ .pure-u-17-24,
664
+ .pure-u-18-24,
665
+ .pure-u-19-24,
666
+ .pure-u-20-24,
667
+ .pure-u-21-24,
668
+ .pure-u-22-24,
669
+ .pure-u-23-24,
670
+ .pure-u-24-24 {
671
+ display: inline-block;
672
+ *display: inline;
673
+ zoom: 1;
674
+ letter-spacing: normal;
675
+ word-spacing: normal;
676
+ vertical-align: top;
677
+ text-rendering: auto;
728
678
  }
729
679
 
730
- .pure-form input:focus:invalid,
731
- .pure-form textarea:focus:invalid,
732
- .pure-form select:focus:invalid {
733
- color: #b94a48;
734
- border: 1px solid #ee5f5b;
735
- }
736
- .pure-form input:focus:invalid:focus,
737
- .pure-form textarea:focus:invalid:focus,
738
- .pure-form select:focus:invalid:focus {
739
- border-color: #e9322d;
740
- }
741
- .pure-form input[type="file"]:focus:invalid:focus,
742
- .pure-form input[type="radio"]:focus:invalid:focus,
743
- .pure-form input[type="checkbox"]:focus:invalid:focus {
744
- outline-color: #e9322d;
745
- }
746
- .pure-form select {
747
- border: 1px solid #ccc;
748
- background-color: white;
749
- }
750
- .pure-form select[multiple] {
751
- height: auto;
752
- }
753
- .pure-form label {
754
- margin: 0.5em 0 0.2em;
755
- font-size: 90%;
756
- }
757
- .pure-form fieldset {
758
- margin: 0;
759
- padding: 0.35em 0 0.75em;
760
- border: 0;
761
- }
762
- .pure-form legend {
763
- display: block;
764
- width: 100%;
765
- padding: 0.3em 0;
766
- margin-bottom: 0.3em;
767
- font-size: 125%;
768
- color: #333;
769
- border-bottom: 1px solid #e5e5e5;
680
+ .pure-u-1-24 {
681
+ width: 4.1667%;
682
+ *width: 4.1357%;
770
683
  }
771
684
 
772
- .pure-form-stacked input[type="text"],
773
- .pure-form-stacked input[type="password"],
774
- .pure-form-stacked input[type="email"],
775
- .pure-form-stacked input[type="url"],
776
- .pure-form-stacked input[type="date"],
777
- .pure-form-stacked input[type="month"],
778
- .pure-form-stacked input[type="time"],
779
- .pure-form-stacked input[type="datetime"],
780
- .pure-form-stacked input[type="datetime-local"],
781
- .pure-form-stacked input[type="week"],
782
- .pure-form-stacked input[type="number"],
783
- .pure-form-stacked input[type="search"],
784
- .pure-form-stacked input[type="tel"],
785
- .pure-form-stacked input[type="color"],
786
- .pure-form-stacked select,
787
- .pure-form-stacked label,
788
- .pure-form-stacked textarea {
789
- display: block;
790
- margin: 0.25em 0;
685
+ .pure-u-1-12,
686
+ .pure-u-2-24 {
687
+ width: 8.3333%;
688
+ *width: 8.3023%;
791
689
  }
792
690
 
793
- .pure-form-aligned input,
794
- .pure-form-aligned textarea,
795
- .pure-form-aligned select,
796
- /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
797
- .pure-form-aligned .pure-help-inline,
798
- .pure-form-message-inline {
799
- display: inline-block;
800
- *display: inline;
801
- *zoom: 1;
802
- vertical-align: middle;
691
+ .pure-u-1-8,
692
+ .pure-u-3-24 {
693
+ width: 12.5000%;
694
+ *width: 12.4690%;
803
695
  }
804
696
 
805
- /* Aligned Forms */
806
- .pure-form-aligned .pure-control-group {
807
- margin-bottom: 0.5em;
697
+ .pure-u-1-6,
698
+ .pure-u-4-24 {
699
+ width: 16.6667%;
700
+ *width: 16.6357%;
808
701
  }
809
- .pure-form-aligned .pure-control-group label {
810
- text-align: right;
811
- display: inline-block;
812
- vertical-align: middle;
813
- width: 10em;
814
- margin: 0 1em 0 0;
702
+
703
+ .pure-u-1-5 {
704
+ width: 20%;
705
+ *width: 19.9690%;
815
706
  }
816
- .pure-form-aligned .pure-controls {
817
- margin: 1.5em 0 0 10em;
707
+
708
+ .pure-u-5-24 {
709
+ width: 20.8333%;
710
+ *width: 20.8023%;
818
711
  }
819
712
 
820
- /* Rounded Inputs */
821
- .pure-form input.pure-input-rounded,
822
- .pure-form .pure-input-rounded {
823
- border-radius: 2em;
824
- padding: 0.5em 1em;
713
+ .pure-u-1-4,
714
+ .pure-u-6-24 {
715
+ width: 25%;
716
+ *width: 24.9690%;
825
717
  }
826
718
 
827
- /* Grouped Inputs */
828
- .pure-form .pure-group fieldset {
829
- margin-bottom: 10px;
719
+ .pure-u-7-24 {
720
+ width: 29.1667%;
721
+ *width: 29.1357%;
830
722
  }
831
- .pure-form .pure-group input {
832
- display: block;
833
- padding: 10px;
834
- margin: 0;
835
- border-radius: 0;
836
- position: relative;
837
- top: -1px;
723
+
724
+ .pure-u-1-3,
725
+ .pure-u-8-24 {
726
+ width: 33.3333%;
727
+ *width: 33.3023%;
838
728
  }
839
- .pure-form .pure-group input:focus {
840
- z-index: 2;
729
+
730
+ .pure-u-3-8,
731
+ .pure-u-9-24 {
732
+ width: 37.5000%;
733
+ *width: 37.4690%;
841
734
  }
842
- .pure-form .pure-group input:first-child {
843
- top: 1px;
844
- border-radius: 4px 4px 0 0;
735
+
736
+ .pure-u-2-5 {
737
+ width: 40%;
738
+ *width: 39.9690%;
845
739
  }
846
- .pure-form .pure-group input:last-child {
847
- top: -2px;
848
- border-radius: 0 0 4px 4px;
740
+
741
+ .pure-u-5-12,
742
+ .pure-u-10-24 {
743
+ width: 41.6667%;
744
+ *width: 41.6357%;
849
745
  }
850
- .pure-form .pure-group button {
851
- margin: 0.35em 0;
746
+
747
+ .pure-u-11-24 {
748
+ width: 45.8333%;
749
+ *width: 45.8023%;
852
750
  }
853
751
 
854
- .pure-form .pure-input-1 {
855
- width: 100%;
752
+ .pure-u-1-2,
753
+ .pure-u-12-24 {
754
+ width: 50%;
755
+ *width: 49.9690%;
856
756
  }
857
- .pure-form .pure-input-2-3 {
858
- width: 66%;
757
+
758
+ .pure-u-13-24 {
759
+ width: 54.1667%;
760
+ *width: 54.1357%;
859
761
  }
860
- .pure-form .pure-input-1-2 {
861
- width: 50%;
762
+
763
+ .pure-u-7-12,
764
+ .pure-u-14-24 {
765
+ width: 58.3333%;
766
+ *width: 58.3023%;
862
767
  }
863
- .pure-form .pure-input-1-3 {
864
- width: 33%;
768
+
769
+ .pure-u-3-5 {
770
+ width: 60%;
771
+ *width: 59.9690%;
865
772
  }
866
- .pure-form .pure-input-1-4 {
867
- width: 25%;
773
+
774
+ .pure-u-5-8,
775
+ .pure-u-15-24 {
776
+ width: 62.5000%;
777
+ *width: 62.4690%;
868
778
  }
869
779
 
870
- /* Inline help for forms */
871
- /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
872
- .pure-form .pure-help-inline,
873
- .pure-form-message-inline {
874
- display: inline-block;
875
- padding-left: 0.3em;
876
- color: #666;
877
- vertical-align: middle;
878
- font-size: 90%;
780
+ .pure-u-2-3,
781
+ .pure-u-16-24 {
782
+ width: 66.6667%;
783
+ *width: 66.6357%;
879
784
  }
880
785
 
881
- /* Block help for forms */
882
- .pure-form-message {
883
- display: block;
884
- color: #666;
885
- font-size: 90%;
786
+ .pure-u-17-24 {
787
+ width: 70.8333%;
788
+ *width: 70.8023%;
886
789
  }
887
790
 
888
- @media only screen and (max-width : 480px) {
889
- .pure-form button[type="submit"] {
890
- margin: 0.7em 0 0;
891
- }
791
+ .pure-u-3-4,
792
+ .pure-u-18-24 {
793
+ width: 75%;
794
+ *width: 74.9690%;
795
+ }
892
796
 
893
- .pure-form input[type="text"],
894
- .pure-form input[type="password"],
895
- .pure-form input[type="email"],
896
- .pure-form input[type="url"],
897
- .pure-form input[type="date"],
898
- .pure-form input[type="month"],
899
- .pure-form input[type="time"],
900
- .pure-form input[type="datetime"],
901
- .pure-form input[type="datetime-local"],
902
- .pure-form input[type="week"],
903
- .pure-form input[type="number"],
904
- .pure-form input[type="search"],
905
- .pure-form input[type="tel"],
906
- .pure-form input[type="color"],
907
- .pure-form label {
908
- margin-bottom: 0.3em;
909
- display: block;
910
- }
797
+ .pure-u-19-24 {
798
+ width: 79.1667%;
799
+ *width: 79.1357%;
800
+ }
911
801
 
912
- .pure-group input[type="text"],
913
- .pure-group input[type="password"],
914
- .pure-group input[type="email"],
915
- .pure-group input[type="url"],
916
- .pure-group input[type="date"],
917
- .pure-group input[type="month"],
918
- .pure-group input[type="time"],
919
- .pure-group input[type="datetime"],
920
- .pure-group input[type="datetime-local"],
921
- .pure-group input[type="week"],
922
- .pure-group input[type="number"],
923
- .pure-group input[type="search"],
924
- .pure-group input[type="tel"],
925
- .pure-group input[type="color"] {
926
- margin-bottom: 0;
927
- }
802
+ .pure-u-4-5 {
803
+ width: 80%;
804
+ *width: 79.9690%;
805
+ }
928
806
 
929
- .pure-form-aligned .pure-control-group label {
930
- margin-bottom: 0.3em;
931
- text-align: left;
932
- display: block;
933
- width: 100%;
934
- }
807
+ .pure-u-5-6,
808
+ .pure-u-20-24 {
809
+ width: 83.3333%;
810
+ *width: 83.3023%;
811
+ }
935
812
 
936
- .pure-form-aligned .pure-controls {
937
- margin: 1.5em 0 0 0;
938
- }
813
+ .pure-u-7-8,
814
+ .pure-u-21-24 {
815
+ width: 87.5000%;
816
+ *width: 87.4690%;
817
+ }
939
818
 
940
- /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
941
- .pure-form .pure-help-inline,
942
- .pure-form-message-inline,
943
- .pure-form-message {
944
- display: block;
945
- font-size: 80%;
946
- /* Increased bottom padding to make it group with its related input element. */
947
- padding: 0.2em 0 0.8em;
948
- }
819
+ .pure-u-11-12,
820
+ .pure-u-22-24 {
821
+ width: 91.6667%;
822
+ *width: 91.6357%;
949
823
  }
950
824
 
825
+ .pure-u-23-24 {
826
+ width: 95.8333%;
827
+ *width: 95.8023%;
828
+ }
829
+
830
+ .pure-u-1,
831
+ .pure-u-1-1,
832
+ .pure-u-5-5,
833
+ .pure-u-24-24 {
834
+ width: 100%;
835
+ }
951
836
  /*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/
952
837
 
953
- .pure-g {
954
- letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
955
- *letter-spacing: normal; /* reset IE < 8 */
956
- *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
957
- text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
838
+ .pure-g-r {
839
+ letter-spacing: -0.31em;
840
+ *letter-spacing: normal;
841
+ *word-spacing: -0.43em;
958
842
 
959
843
  /*
960
844
  Sets the font stack to fonts known to work properly with the above letter
@@ -981,317 +865,526 @@ a.pure-button-selected {
981
865
  `-moz-` prefix version is omitted.
982
866
  */
983
867
 
984
- display: -webkit-flex;
985
- -webkit-flex-flow: row wrap;
868
+ display: -webkit-flex;
869
+ -webkit-flex-flow: row wrap;
870
+
871
+ /* IE10 uses display: flexbox */
872
+ display: -ms-flexbox;
873
+ -ms-flex-flow: row wrap;
874
+ }
875
+
876
+ /* Opera as of 12 on Windows needs word-spacing.
877
+ The ".opera-only" selector is used to prevent actual prefocus styling
878
+ and is not required in markup.
879
+ */
880
+ .opera-only :-o-prefocus,
881
+ .pure-g-r {
882
+ word-spacing: -0.43em;
883
+ }
884
+
885
+ /*
886
+ Resets the font family back to the OS/browser's default sans-serif font,
887
+ this the same font stack that Normalize.css sets for the `body`.
888
+ */
889
+ .pure-g-r [class *= "pure-u"] {
890
+ font-family: sans-serif;
891
+ }
892
+
893
+ .pure-g-r img {
894
+ max-width: 100%;
895
+ height: auto;
896
+ }
897
+
898
+ @media (min-width: 980px) {
899
+ .pure-visible-phone {
900
+ display: none;
901
+ }
902
+ .pure-visible-tablet {
903
+ display: none;
904
+ }
905
+ .pure-hidden-desktop {
906
+ display: none;
907
+ }
908
+ }
909
+
910
+ @media (max-width: 480px) {
911
+ .pure-g-r > .pure-u,
912
+ .pure-g-r > [class *= "pure-u-"] {
913
+ width: 100%;
914
+ }
915
+ }
916
+
917
+ @media (max-width: 767px) {
918
+ .pure-g-r > .pure-u,
919
+ .pure-g-r > [class *= "pure-u-"] {
920
+ width: 100%;
921
+ }
922
+ .pure-hidden-phone {
923
+ display: none;
924
+ }
925
+ .pure-visible-desktop {
926
+ display: none;
927
+ }
928
+ }
929
+
930
+ @media (min-width: 768px) and (max-width: 979px) {
931
+ .pure-hidden-tablet {
932
+ display: none;
933
+ }
934
+ .pure-visible-desktop {
935
+ display: none;
936
+ }
937
+ }
938
+
939
+ .pure-button {
940
+ /* Structure */
941
+ display: inline-block;
942
+ *display: inline; /*IE 6/7*/
943
+ zoom: 1;
944
+ line-height: normal;
945
+ white-space: nowrap;
946
+ vertical-align: baseline;
947
+ text-align: center;
948
+ cursor: pointer;
949
+ -webkit-user-drag: none;
950
+ -webkit-user-select: none;
951
+ -moz-user-select: none;
952
+ -ms-user-select: none;
953
+ user-select: none;
954
+ }
955
+
956
+ /* Firefox: Get rid of the inner focus border */
957
+ .pure-button::-moz-focus-inner {
958
+ padding: 0;
959
+ border: 0;
960
+ }
961
+
962
+ /*csslint outline-none:false*/
963
+
964
+ .pure-button {
965
+ font-family: inherit;
966
+ font-size: 100%;
967
+ *font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/
968
+ *overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */
969
+ padding: 0.5em 1em;
970
+ color: #444; /* rgba not supported (IE 8) */
971
+ color: rgba(0, 0, 0, 0.80); /* rgba supported */
972
+ *color: #444; /* IE 6 & 7 */
973
+ border: 1px solid #999; /*IE 6/7/8*/
974
+ border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/
975
+ background-color: #E6E6E6;
976
+ text-decoration: none;
977
+ border-radius: 2px;
978
+ }
979
+
980
+ .pure-button-hover,
981
+ .pure-button:hover,
982
+ .pure-button:focus {
983
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
984
+ 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)));
985
+ background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
986
+ background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
987
+ background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
988
+ background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
989
+ }
990
+ .pure-button:focus {
991
+ outline: 0;
992
+ }
993
+ .pure-button-active,
994
+ .pure-button:active {
995
+ box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
996
+ }
997
+
998
+ .pure-button[disabled],
999
+ .pure-button-disabled,
1000
+ .pure-button-disabled:hover,
1001
+ .pure-button-disabled:focus,
1002
+ .pure-button-disabled:active {
1003
+ border: none;
1004
+ background-image: none;
1005
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1006
+ filter: alpha(opacity=40);
1007
+ -khtml-opacity: 0.40;
1008
+ -moz-opacity: 0.40;
1009
+ opacity: 0.40;
1010
+ cursor: not-allowed;
1011
+ box-shadow: none;
1012
+ }
1013
+
1014
+ .pure-button-hidden {
1015
+ display: none;
1016
+ }
986
1017
 
987
- /* IE10 uses display: flexbox */
988
- display: -ms-flexbox;
989
- -ms-flex-flow: row wrap;
1018
+ /* Firefox: Get rid of the inner focus border */
1019
+ .pure-button::-moz-focus-inner{
1020
+ padding: 0;
1021
+ border: 0;
990
1022
  }
991
1023
 
992
- /* Opera as of 12 on Windows needs word-spacing.
993
- The ".opera-only" selector is used to prevent actual prefocus styling
994
- and is not required in markup.
995
- */
996
- .opera-only :-o-prefocus,
997
- .pure-g {
998
- word-spacing: -0.43em;
1024
+ .pure-button-primary,
1025
+ .pure-button-selected,
1026
+ a.pure-button-primary,
1027
+ a.pure-button-selected {
1028
+ background-color: rgb(0, 120, 231);
1029
+ color: #fff;
999
1030
  }
1000
1031
 
1001
- .pure-u {
1032
+ .pure-form input[type="text"],
1033
+ .pure-form input[type="password"],
1034
+ .pure-form input[type="email"],
1035
+ .pure-form input[type="url"],
1036
+ .pure-form input[type="date"],
1037
+ .pure-form input[type="month"],
1038
+ .pure-form input[type="time"],
1039
+ .pure-form input[type="datetime"],
1040
+ .pure-form input[type="datetime-local"],
1041
+ .pure-form input[type="week"],
1042
+ .pure-form input[type="number"],
1043
+ .pure-form input[type="search"],
1044
+ .pure-form input[type="tel"],
1045
+ .pure-form input[type="color"],
1046
+ .pure-form select,
1047
+ .pure-form textarea {
1048
+ padding: 0.5em 0.6em;
1002
1049
  display: inline-block;
1003
- *display: inline; /* IE < 8: fake inline-block */
1004
- zoom: 1;
1005
- letter-spacing: normal;
1006
- word-spacing: normal;
1007
- vertical-align: top;
1008
- text-rendering: auto;
1050
+ border: 1px solid #ccc;
1051
+ font-size: 0.8em;
1052
+ box-shadow: inset 0 1px 3px #ddd;
1053
+ border-radius: 4px;
1054
+ -webkit-box-sizing: border-box;
1055
+ -moz-box-sizing: border-box;
1056
+ box-sizing: border-box;
1009
1057
  }
1010
1058
 
1011
1059
  /*
1012
- Resets the font family back to the OS/browser's default sans-serif font,
1013
- this the same font stack that Normalize.css sets for the `body`.
1060
+ Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
1061
+ since IE8 won't execute CSS that contains a CSS3 selector.
1014
1062
  */
1015
- .pure-g [class *= "pure-u"] {
1016
- font-family: sans-serif;
1017
- }
1018
-
1019
- .pure-u-1,
1020
- .pure-u-1-2,
1021
- .pure-u-1-3,
1022
- .pure-u-2-3,
1023
- .pure-u-1-4,
1024
- .pure-u-3-4,
1025
- .pure-u-1-5,
1026
- .pure-u-2-5,
1027
- .pure-u-3-5,
1028
- .pure-u-4-5,
1029
- .pure-u-1-6,
1030
- .pure-u-5-6,
1031
- .pure-u-1-8,
1032
- .pure-u-3-8,
1033
- .pure-u-5-8,
1034
- .pure-u-7-8,
1035
- .pure-u-1-12,
1036
- .pure-u-5-12,
1037
- .pure-u-7-12,
1038
- .pure-u-11-12,
1039
- .pure-u-1-24,
1040
- .pure-u-5-24,
1041
- .pure-u-7-24,
1042
- .pure-u-11-24,
1043
- .pure-u-13-24,
1044
- .pure-u-17-24,
1045
- .pure-u-19-24,
1046
- .pure-u-23-24 {
1063
+ .pure-form input:not([type]) {
1064
+ padding: 0.5em 0.6em;
1047
1065
  display: inline-block;
1048
- *display: inline; /* IE < 8: fake inline-block */
1049
- zoom: 1;
1050
- letter-spacing: normal;
1051
- word-spacing: normal;
1052
- vertical-align: top;
1053
- text-rendering: auto;
1066
+ border: 1px solid #ccc;
1067
+ font-size: 0.8em;
1068
+ box-shadow: inset 0 1px 3px #ddd;
1069
+ border-radius: 4px;
1070
+ -webkit-box-sizing: border-box;
1071
+ -moz-box-sizing: border-box;
1072
+ box-sizing: border-box;
1054
1073
  }
1055
1074
 
1056
- .pure-u-1 {
1057
- width: 100%;
1058
- }
1059
1075
 
1060
- .pure-u-1-2 {
1061
- width: 50%;
1062
- *width: 49.969%;
1076
+ .pure-form input[type="text"]:focus,
1077
+ .pure-form input[type="password"]:focus,
1078
+ .pure-form input[type="email"]:focus,
1079
+ .pure-form input[type="url"]:focus,
1080
+ .pure-form input[type="date"]:focus,
1081
+ .pure-form input[type="month"]:focus,
1082
+ .pure-form input[type="time"]:focus,
1083
+ .pure-form input[type="datetime"]:focus,
1084
+ .pure-form input[type="datetime-local"]:focus,
1085
+ .pure-form input[type="week"]:focus,
1086
+ .pure-form input[type="number"]:focus,
1087
+ .pure-form input[type="search"]:focus,
1088
+ .pure-form input[type="tel"]:focus,
1089
+ .pure-form input[type="color"]:focus,
1090
+ .pure-form select:focus,
1091
+ .pure-form textarea:focus {
1092
+ outline: 0;
1093
+ outline: thin dotted \9; /* IE6-9 */
1094
+ border-color: #129FEA;
1063
1095
  }
1064
1096
 
1065
- .pure-u-1-3 {
1066
- width: 33.3333%;
1067
- *width: 33.3023%;
1097
+ /*
1098
+ Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
1099
+ since IE8 won't execute CSS that contains a CSS3 selector.
1100
+ */
1101
+ .pure-form input:not([type]):focus {
1102
+ outline: 0;
1103
+ outline: thin dotted \9; /* IE6-9 */
1104
+ border-color: #129FEA;
1068
1105
  }
1069
1106
 
1070
- .pure-u-2-3 {
1071
- width: 66.6667%;
1072
- *width: 66.6357%;
1107
+ .pure-form input[type="file"]:focus,
1108
+ .pure-form input[type="radio"]:focus,
1109
+ .pure-form input[type="checkbox"]:focus {
1110
+ outline: thin dotted #333;
1111
+ outline: 1px auto #129FEA;
1073
1112
  }
1074
-
1075
- .pure-u-1-4 {
1076
- width: 25%;
1077
- *width: 24.969%;
1113
+ .pure-form .pure-checkbox,
1114
+ .pure-form .pure-radio {
1115
+ margin: 0.5em 0;
1116
+ display: block;
1078
1117
  }
1079
1118
 
1080
- .pure-u-3-4 {
1081
- width: 75%;
1082
- *width: 74.969%;
1119
+ .pure-form input[type="text"][disabled],
1120
+ .pure-form input[type="password"][disabled],
1121
+ .pure-form input[type="email"][disabled],
1122
+ .pure-form input[type="url"][disabled],
1123
+ .pure-form input[type="date"][disabled],
1124
+ .pure-form input[type="month"][disabled],
1125
+ .pure-form input[type="time"][disabled],
1126
+ .pure-form input[type="datetime"][disabled],
1127
+ .pure-form input[type="datetime-local"][disabled],
1128
+ .pure-form input[type="week"][disabled],
1129
+ .pure-form input[type="number"][disabled],
1130
+ .pure-form input[type="search"][disabled],
1131
+ .pure-form input[type="tel"][disabled],
1132
+ .pure-form input[type="color"][disabled],
1133
+ .pure-form select[disabled],
1134
+ .pure-form textarea[disabled] {
1135
+ cursor: not-allowed;
1136
+ background-color: #eaeded;
1137
+ color: #cad2d3;
1083
1138
  }
1084
1139
 
1085
- .pure-u-1-5 {
1086
- width: 20%;
1087
- *width: 19.969%;
1140
+ /*
1141
+ Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
1142
+ since IE8 won't execute CSS that contains a CSS3 selector.
1143
+ */
1144
+ .pure-form input:not([type])[disabled] {
1145
+ cursor: not-allowed;
1146
+ background-color: #eaeded;
1147
+ color: #cad2d3;
1088
1148
  }
1089
-
1090
- .pure-u-2-5 {
1091
- width: 40%;
1092
- *width: 39.969%;
1149
+ .pure-form input[readonly],
1150
+ .pure-form select[readonly],
1151
+ .pure-form textarea[readonly] {
1152
+ background: #eee; /* menu hover bg color */
1153
+ color: #777; /* menu text color */
1154
+ border-color: #ccc;
1093
1155
  }
1094
1156
 
1095
- .pure-u-3-5 {
1096
- width: 60%;
1097
- *width: 59.969%;
1157
+ .pure-form input:focus:invalid,
1158
+ .pure-form textarea:focus:invalid,
1159
+ .pure-form select:focus:invalid {
1160
+ color: #b94a48;
1161
+ border: 1px solid #ee5f5b;
1098
1162
  }
1099
-
1100
- .pure-u-4-5 {
1101
- width: 80%;
1102
- *width: 79.969%;
1163
+ .pure-form input:focus:invalid:focus,
1164
+ .pure-form textarea:focus:invalid:focus,
1165
+ .pure-form select:focus:invalid:focus {
1166
+ border-color: #e9322d;
1103
1167
  }
1104
-
1105
- .pure-u-1-6 {
1106
- width: 16.6667%;
1107
- *width: 16.6357%;
1168
+ .pure-form input[type="file"]:focus:invalid:focus,
1169
+ .pure-form input[type="radio"]:focus:invalid:focus,
1170
+ .pure-form input[type="checkbox"]:focus:invalid:focus {
1171
+ outline-color: #e9322d;
1172
+ }
1173
+ .pure-form select {
1174
+ border: 1px solid #ccc;
1175
+ background-color: white;
1176
+ }
1177
+ .pure-form select[multiple] {
1178
+ height: auto;
1179
+ }
1180
+ .pure-form label {
1181
+ margin: 0.5em 0 0.2em;
1182
+ font-size: 90%;
1183
+ }
1184
+ .pure-form fieldset {
1185
+ margin: 0;
1186
+ padding: 0.35em 0 0.75em;
1187
+ border: 0;
1188
+ }
1189
+ .pure-form legend {
1190
+ display: block;
1191
+ width: 100%;
1192
+ padding: 0.3em 0;
1193
+ margin-bottom: 0.3em;
1194
+ font-size: 125%;
1195
+ color: #333;
1196
+ border-bottom: 1px solid #e5e5e5;
1108
1197
  }
1109
1198
 
1110
- .pure-u-5-6 {
1111
- width: 83.3333%;
1112
- *width: 83.3023%;
1199
+ .pure-form-stacked input[type="text"],
1200
+ .pure-form-stacked input[type="password"],
1201
+ .pure-form-stacked input[type="email"],
1202
+ .pure-form-stacked input[type="url"],
1203
+ .pure-form-stacked input[type="date"],
1204
+ .pure-form-stacked input[type="month"],
1205
+ .pure-form-stacked input[type="time"],
1206
+ .pure-form-stacked input[type="datetime"],
1207
+ .pure-form-stacked input[type="datetime-local"],
1208
+ .pure-form-stacked input[type="week"],
1209
+ .pure-form-stacked input[type="number"],
1210
+ .pure-form-stacked input[type="search"],
1211
+ .pure-form-stacked input[type="tel"],
1212
+ .pure-form-stacked input[type="color"],
1213
+ .pure-form-stacked select,
1214
+ .pure-form-stacked label,
1215
+ .pure-form-stacked textarea {
1216
+ display: block;
1217
+ margin: 0.25em 0;
1113
1218
  }
1114
1219
 
1115
- .pure-u-1-8 {
1116
- width: 12.5%;
1117
- *width: 12.469%;
1220
+ /*
1221
+ Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
1222
+ since IE8 won't execute CSS that contains a CSS3 selector.
1223
+ */
1224
+ .pure-form-stacked input:not([type]) {
1225
+ display: block;
1226
+ margin: 0.25em 0;
1118
1227
  }
1119
-
1120
- .pure-u-3-8 {
1121
- width: 37.5%;
1122
- *width: 37.469%;
1228
+ .pure-form-aligned input,
1229
+ .pure-form-aligned textarea,
1230
+ .pure-form-aligned select,
1231
+ /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
1232
+ .pure-form-aligned .pure-help-inline,
1233
+ .pure-form-message-inline {
1234
+ display: inline-block;
1235
+ *display: inline;
1236
+ *zoom: 1;
1237
+ vertical-align: middle;
1123
1238
  }
1124
-
1125
- .pure-u-5-8 {
1126
- width: 62.5%;
1127
- *width: 62.469%;
1239
+ .pure-form-aligned textarea {
1240
+ vertical-align: top;
1128
1241
  }
1129
1242
 
1130
- .pure-u-7-8 {
1131
- width: 87.5%;
1132
- *width: 87.469%;
1243
+ /* Aligned Forms */
1244
+ .pure-form-aligned .pure-control-group {
1245
+ margin-bottom: 0.5em;
1133
1246
  }
1134
-
1135
- .pure-u-1-12 {
1136
- width: 8.3333%;
1137
- *width: 8.3023%;
1247
+ .pure-form-aligned .pure-control-group label {
1248
+ text-align: right;
1249
+ display: inline-block;
1250
+ vertical-align: middle;
1251
+ width: 10em;
1252
+ margin: 0 1em 0 0;
1138
1253
  }
1139
-
1140
- .pure-u-5-12 {
1141
- width: 41.6667%;
1142
- *width: 41.6357%;
1254
+ .pure-form-aligned .pure-controls {
1255
+ margin: 1.5em 0 0 10em;
1143
1256
  }
1144
1257
 
1145
- .pure-u-7-12 {
1146
- width: 58.3333%;
1147
- *width: 58.3023%;
1258
+ /* Rounded Inputs */
1259
+ .pure-form input.pure-input-rounded,
1260
+ .pure-form .pure-input-rounded {
1261
+ border-radius: 2em;
1262
+ padding: 0.5em 1em;
1148
1263
  }
1149
1264
 
1150
- .pure-u-11-12 {
1151
- width: 91.6667%;
1152
- *width: 91.6357%;
1265
+ /* Grouped Inputs */
1266
+ .pure-form .pure-group fieldset {
1267
+ margin-bottom: 10px;
1153
1268
  }
1154
-
1155
- .pure-u-1-24 {
1156
- width: 4.1667%;
1157
- *width: 4.1357%;
1269
+ .pure-form .pure-group input {
1270
+ display: block;
1271
+ padding: 10px;
1272
+ margin: 0;
1273
+ border-radius: 0;
1274
+ position: relative;
1275
+ top: -1px;
1158
1276
  }
1159
-
1160
- .pure-u-5-24 {
1161
- width: 20.8333%;
1162
- *width: 20.8023%;
1277
+ .pure-form .pure-group input:focus {
1278
+ z-index: 2;
1163
1279
  }
1164
-
1165
- .pure-u-7-24 {
1166
- width: 29.1667%;
1167
- *width: 29.1357%;
1280
+ .pure-form .pure-group input:first-child {
1281
+ top: 1px;
1282
+ border-radius: 4px 4px 0 0;
1168
1283
  }
1169
-
1170
- .pure-u-11-24 {
1171
- width: 45.8333%;
1172
- *width: 45.8023%;
1284
+ .pure-form .pure-group input:last-child {
1285
+ top: -2px;
1286
+ border-radius: 0 0 4px 4px;
1173
1287
  }
1174
-
1175
- .pure-u-13-24 {
1176
- width: 54.1667%;
1177
- *width: 54.1357%;
1288
+ .pure-form .pure-group button {
1289
+ margin: 0.35em 0;
1178
1290
  }
1179
1291
 
1180
- .pure-u-17-24 {
1181
- width: 70.8333%;
1182
- *width: 70.8023%;
1292
+ .pure-form .pure-input-1 {
1293
+ width: 100%;
1183
1294
  }
1184
-
1185
- .pure-u-19-24 {
1186
- width: 79.1667%;
1187
- *width: 79.1357%;
1295
+ .pure-form .pure-input-2-3 {
1296
+ width: 66%;
1188
1297
  }
1189
-
1190
- .pure-u-23-24 {
1191
- width: 95.8333%;
1192
- *width: 95.8023%;
1298
+ .pure-form .pure-input-1-2 {
1299
+ width: 50%;
1193
1300
  }
1194
-
1195
- /*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/
1196
-
1197
- .pure-g-r {
1198
- letter-spacing: -0.31em;
1199
- *letter-spacing: normal;
1200
- *word-spacing: -0.43em;
1201
-
1202
- /*
1203
- Sets the font stack to fonts known to work properly with the above letter
1204
- and word spacings. See: https://github.com/yui/pure/issues/41/
1205
-
1206
- The following font stack makes Pure Grids work on all known environments.
1207
-
1208
- * FreeSans: Ships with many Linux distros, including Ubuntu
1209
-
1210
- * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
1211
- Arial to get picked up by the browser, even though neither is available
1212
- in Chrome OS.
1213
-
1214
- * Droid Sans: Ships with all versions of Android.
1215
-
1216
- * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
1217
- */
1218
- font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
1219
-
1220
- /*
1221
- Use flexbox when possible to avoid `letter-spacing` side-effects.
1222
-
1223
- NOTE: Firefox (as of 25) does not currently support flex-wrap, so the
1224
- `-moz-` prefix version is omitted.
1225
- */
1226
-
1227
- display: -webkit-flex;
1228
- -webkit-flex-flow: row wrap;
1229
-
1230
- /* IE10 uses display: flexbox */
1231
- display: -ms-flexbox;
1232
- -ms-flex-flow: row wrap;
1301
+ .pure-form .pure-input-1-3 {
1302
+ width: 33%;
1233
1303
  }
1234
-
1235
- /* Opera as of 12 on Windows needs word-spacing.
1236
- The ".opera-only" selector is used to prevent actual prefocus styling
1237
- and is not required in markup.
1238
- */
1239
- .opera-only :-o-prefocus,
1240
- .pure-g-r {
1241
- word-spacing: -0.43em;
1304
+ .pure-form .pure-input-1-4 {
1305
+ width: 25%;
1242
1306
  }
1243
1307
 
1244
- /*
1245
- Resets the font family back to the OS/browser's default sans-serif font,
1246
- this the same font stack that Normalize.css sets for the `body`.
1247
- */
1248
- .pure-g-r [class *= "pure-u"] {
1249
- font-family: sans-serif;
1308
+ /* Inline help for forms */
1309
+ /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
1310
+ .pure-form .pure-help-inline,
1311
+ .pure-form-message-inline {
1312
+ display: inline-block;
1313
+ padding-left: 0.3em;
1314
+ color: #666;
1315
+ vertical-align: middle;
1316
+ font-size: 90%;
1250
1317
  }
1251
1318
 
1252
- .pure-g-r img {
1253
- max-width: 100%;
1254
- height: auto;
1319
+ /* Block help for forms */
1320
+ .pure-form-message {
1321
+ display: block;
1322
+ color: #666;
1323
+ font-size: 90%;
1255
1324
  }
1256
1325
 
1257
- @media (min-width: 980px) {
1258
- .pure-visible-phone {
1259
- display: none;
1260
- }
1261
- .pure-visible-tablet {
1262
- display: none;
1326
+ @media only screen and (max-width : 480px) {
1327
+ .pure-form button[type="submit"] {
1328
+ margin: 0.7em 0 0;
1263
1329
  }
1264
- .pure-hidden-desktop {
1265
- display: none;
1330
+
1331
+ .pure-form input:not([type]),
1332
+ .pure-form input[type="text"],
1333
+ .pure-form input[type="password"],
1334
+ .pure-form input[type="email"],
1335
+ .pure-form input[type="url"],
1336
+ .pure-form input[type="date"],
1337
+ .pure-form input[type="month"],
1338
+ .pure-form input[type="time"],
1339
+ .pure-form input[type="datetime"],
1340
+ .pure-form input[type="datetime-local"],
1341
+ .pure-form input[type="week"],
1342
+ .pure-form input[type="number"],
1343
+ .pure-form input[type="search"],
1344
+ .pure-form input[type="tel"],
1345
+ .pure-form input[type="color"],
1346
+ .pure-form label {
1347
+ margin-bottom: 0.3em;
1348
+ display: block;
1266
1349
  }
1267
- }
1268
1350
 
1269
- @media (max-width: 480px) {
1270
- .pure-g-r > .pure-u,
1271
- .pure-g-r > [class *= "pure-u-"] {
1272
- width: 100%;
1351
+ .pure-group input:not([type]),
1352
+ .pure-group input[type="text"],
1353
+ .pure-group input[type="password"],
1354
+ .pure-group input[type="email"],
1355
+ .pure-group input[type="url"],
1356
+ .pure-group input[type="date"],
1357
+ .pure-group input[type="month"],
1358
+ .pure-group input[type="time"],
1359
+ .pure-group input[type="datetime"],
1360
+ .pure-group input[type="datetime-local"],
1361
+ .pure-group input[type="week"],
1362
+ .pure-group input[type="number"],
1363
+ .pure-group input[type="search"],
1364
+ .pure-group input[type="tel"],
1365
+ .pure-group input[type="color"] {
1366
+ margin-bottom: 0;
1273
1367
  }
1274
- }
1275
1368
 
1276
- @media (max-width: 767px) {
1277
- .pure-g-r > .pure-u,
1278
- .pure-g-r > [class *= "pure-u-"] {
1369
+ .pure-form-aligned .pure-control-group label {
1370
+ margin-bottom: 0.3em;
1371
+ text-align: left;
1372
+ display: block;
1279
1373
  width: 100%;
1280
1374
  }
1281
- .pure-hidden-phone {
1282
- display: none;
1283
- }
1284
- .pure-visible-desktop {
1285
- display: none;
1286
- }
1287
- }
1288
1375
 
1289
- @media (min-width: 768px) and (max-width: 979px) {
1290
- .pure-hidden-tablet {
1291
- display: none;
1376
+ .pure-form-aligned .pure-controls {
1377
+ margin: 1.5em 0 0 0;
1292
1378
  }
1293
- .pure-visible-desktop {
1294
- display: none;
1379
+
1380
+ /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
1381
+ .pure-form .pure-help-inline,
1382
+ .pure-form-message-inline,
1383
+ .pure-form-message {
1384
+ display: block;
1385
+ font-size: 80%;
1386
+ /* Increased bottom padding to make it group with its related input element. */
1387
+ padding: 0.2em 0 0.8em;
1295
1388
  }
1296
1389
  }
1297
1390
 
@@ -1354,7 +1447,6 @@ this the same font stack that Normalize.css sets for the `body`.
1354
1447
  *display: inline;
1355
1448
  zoom: 1;
1356
1449
  vertical-align: middle;
1357
- height: 2.4em;
1358
1450
  }
1359
1451
 
1360
1452
  .pure-menu li a { padding: 5px 20px; }