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