..

0	/*!
1	Pure v3.0.0
2	Copyright 2013 Yahoo!
3	Licensed under the BSD License.
4	https://github.com/pure-css/pure/blob/master/LICENSE
5	*/
6	/*csslint box-model:false*/
7	/*
8	Box-model set to false because we're setting a height on select elements, which
9	also have border and padding. This is done because some browsers don't render
10	the padding. We explicitly set the box-model for select elements to border-box,
11	so we can ignore the csslint warning.
12	*/
13
14	.pure-form input[type="text"],
15	.pure-form input[type="password"],
16	.pure-form input[type="email"],
17	.pure-form input[type="url"],
18	.pure-form input[type="date"],
19	.pure-form input[type="month"],
20	.pure-form input[type="time"],
21	.pure-form input[type="datetime"],
22	.pure-form input[type="datetime-local"],
23	.pure-form input[type="week"],
24	.pure-form input[type="number"],
25	.pure-form input[type="search"],
26	.pure-form input[type="tel"],
27	.pure-form input[type="color"],
28	.pure-form select,
29	.pure-form textarea {
30	padding: 0.5em 0.6em;
31	display: inline-block;
32	border: 1px solid #ccc;
33	box-shadow: inset 0 1px 3px #ddd;
34	border-radius: 4px;
35	vertical-align: middle;
36	box-sizing: border-box;
37	}
38
39	/*
40	Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
41	since IE8 won't execute CSS that contains a CSS3 selector.
42	*/
43	.pure-form input:not([type]) {
44	padding: 0.5em 0.6em;
45	display: inline-block;
46	border: 1px solid #ccc;
47	box-shadow: inset 0 1px 3px #ddd;
48	border-radius: 4px;
49	box-sizing: border-box;
50	}
51
52
53	/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
54	/* May be able to remove this tweak as color inputs become more standardized across browsers. */
55	.pure-form input[type="color"] {
56	padding: 0.2em 0.5em;
57	}
58
59
60	.pure-form input[type="text"]:focus,
61	.pure-form input[type="password"]:focus,
62	.pure-form input[type="email"]:focus,
63	.pure-form input[type="url"]:focus,
64	.pure-form input[type="date"]:focus,
65	.pure-form input[type="month"]:focus,
66	.pure-form input[type="time"]:focus,
67	.pure-form input[type="datetime"]:focus,
68	.pure-form input[type="datetime-local"]:focus,
69	.pure-form input[type="week"]:focus,
70	.pure-form input[type="number"]:focus,
71	.pure-form input[type="search"]:focus,
72	.pure-form input[type="tel"]:focus,
73	.pure-form input[type="color"]:focus,
74	.pure-form select:focus,
75	.pure-form textarea:focus {
76	outline: 0;
77	border-color: #129FEA;
78	}
79
80	/*
81	Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
82	since IE8 won't execute CSS that contains a CSS3 selector.
83	*/
84	.pure-form input:not([type]):focus {
85	outline: 0;
86	border-color: #129FEA;
87	}
88
89	.pure-form input[type="file"]:focus,
90	.pure-form input[type="radio"]:focus,
91	.pure-form input[type="checkbox"]:focus {
92	outline: thin solid #129FEA;
93	outline: 1px auto #129FEA;
94	}
95	.pure-form .pure-checkbox,
96	.pure-form .pure-radio {
97	margin: 0.5em 0;
98	display: block;
99	}
100
101	.pure-form input[type="text"][disabled],
102	.pure-form input[type="password"][disabled],
103	.pure-form input[type="email"][disabled],
104	.pure-form input[type="url"][disabled],
105	.pure-form input[type="date"][disabled],
106	.pure-form input[type="month"][disabled],
107	.pure-form input[type="time"][disabled],
108	.pure-form input[type="datetime"][disabled],
109	.pure-form input[type="datetime-local"][disabled],
110	.pure-form input[type="week"][disabled],
111	.pure-form input[type="number"][disabled],
112	.pure-form input[type="search"][disabled],
113	.pure-form input[type="tel"][disabled],
114	.pure-form input[type="color"][disabled],
115	.pure-form select[disabled],
116	.pure-form textarea[disabled] {
117	cursor: not-allowed;
118	background-color: #eaeded;
119	color: #cad2d3;
120	}
121
122	/*
123	Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
124	since IE8 won't execute CSS that contains a CSS3 selector.
125	*/
126	.pure-form input:not([type])[disabled] {
127	cursor: not-allowed;
128	background-color: #eaeded;
129	color: #cad2d3;
130	}
131	.pure-form input[readonly],
132	.pure-form select[readonly],
133	.pure-form textarea[readonly] {
134	background-color: #eee; /* menu hover bg color */
135	color: #777; /* menu text color */
136	border-color: #ccc;
137	}
138
139	.pure-form input:focus:invalid,
140	.pure-form textarea:focus:invalid,
141	.pure-form select:focus:invalid {
142	color: #b94a48;
143	border-color: #e9322d;
144	}
145	.pure-form input[type="file"]:focus:invalid:focus,
146	.pure-form input[type="radio"]:focus:invalid:focus,
147	.pure-form input[type="checkbox"]:focus:invalid:focus {
148	outline-color: #e9322d;
149	}
150	.pure-form select {
151	/* Normalizes the height; padding is not sufficient. */
152	height: 2.25em;
153	border: 1px solid #ccc;
154	background-color: white;
155	}
156	.pure-form select[multiple] {
157	height: auto;
158	}
159	.pure-form label {
160	margin: 0.5em 0 0.2em;
161	}
162	.pure-form fieldset {
163	margin: 0;
164	padding: 0.35em 0 0.75em;
165	border: 0;
166	}
167	.pure-form legend {
168	display: block;
169	width: 100%;
170	padding: 0.3em 0;
171	margin-bottom: 0.3em;
172	color: #333;
173	border-bottom: 1px solid #e5e5e5;
174	}
175
176	.pure-form-stacked input[type="text"],
177	.pure-form-stacked input[type="password"],
178	.pure-form-stacked input[type="email"],
179	.pure-form-stacked input[type="url"],
180	.pure-form-stacked input[type="date"],
181	.pure-form-stacked input[type="month"],
182	.pure-form-stacked input[type="time"],
183	.pure-form-stacked input[type="datetime"],
184	.pure-form-stacked input[type="datetime-local"],
185	.pure-form-stacked input[type="week"],
186	.pure-form-stacked input[type="number"],
187	.pure-form-stacked input[type="search"],
188	.pure-form-stacked input[type="tel"],
189	.pure-form-stacked input[type="color"],
190	.pure-form-stacked input[type="file"],
191	.pure-form-stacked select,
192	.pure-form-stacked label,
193	.pure-form-stacked textarea {
194	display: block;
195	margin: 0.25em 0;
196	}
197
198	/*
199	Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
200	since IE8 won't execute CSS that contains a CSS3 selector.
201	*/
202	.pure-form-stacked input:not([type]) {
203	display: block;
204	margin: 0.25em 0;
205	}
206	.pure-form-aligned input,
207	.pure-form-aligned textarea,
208	.pure-form-aligned select,
209	.pure-form-message-inline {
210	display: inline-block;
211	vertical-align: middle;
212	}
213	.pure-form-aligned textarea {
214	vertical-align: top;
215	}
216
217	/* Aligned Forms */
218	.pure-form-aligned .pure-control-group {
219	margin-bottom: 0.5em;
220	}
221	.pure-form-aligned .pure-control-group label {
222	text-align: right;
223	display: inline-block;
224	vertical-align: middle;
225	width: 10em;
226	margin: 0 1em 0 0;
227	}
228	.pure-form-aligned .pure-controls {
229	margin: 1.5em 0 0 11em;
230	}
231
232	/* Rounded Inputs */
233	.pure-form input.pure-input-rounded,
234	.pure-form .pure-input-rounded {
235	border-radius: 2em;
236	padding: 0.5em 1em;
237	}
238
239	/* Grouped Inputs */
240	.pure-form .pure-group fieldset {
241	margin-bottom: 10px;
242	}
243	.pure-form .pure-group input,
244	.pure-form .pure-group textarea {
245	display: block;
246	padding: 10px;
247	margin: 0 0 -1px;
248	border-radius: 0;
249	position: relative;
250	top: -1px;
251	}
252	.pure-form .pure-group input:focus,
253	.pure-form .pure-group textarea:focus {
254	z-index: 3;
255	}
256	.pure-form .pure-group input:first-child,
257	.pure-form .pure-group textarea:first-child {
258	top: 1px;
259	border-radius: 4px 4px 0 0;
260	margin: 0;
261	}
262	.pure-form .pure-group input:first-child:last-child,
263	.pure-form .pure-group textarea:first-child:last-child {
264	top: 1px;
265	border-radius: 4px;
266	margin: 0;
267	}
268	.pure-form .pure-group input:last-child,
269	.pure-form .pure-group textarea:last-child {
270	top: -2px;
271	border-radius: 0 0 4px 4px;
272	margin: 0;
273	}
274	.pure-form .pure-group button {
275	margin: 0.35em 0;
276	}
277
278	.pure-form .pure-input-1 {
279	width: 100%;
280	}
281	.pure-form .pure-input-3-4 {
282	width: 75%;
283	}
284	.pure-form .pure-input-2-3 {
285	width: 66%;
286	}
287	.pure-form .pure-input-1-2 {
288	width: 50%;
289	}
290	.pure-form .pure-input-1-3 {
291	width: 33%;
292	}
293	.pure-form .pure-input-1-4 {
294	width: 25%;
295	}
296
297	/* Inline help for forms */
298	.pure-form-message-inline {
299	display: inline-block;
300	padding-left: 0.3em;
301	color: #666;
302	vertical-align: middle;
303	font-size: 0.875em;
304	}
305
306	/* Block help for forms */
307	.pure-form-message {
308	display: block;
309	color: #666;
310	font-size: 0.875em;
311	}
312
313	@media only screen and (max-width : 480px) {
314	.pure-form button[type="submit"] {
315	margin: 0.7em 0 0;
316	}
317
318	.pure-form input:not([type]),
319	.pure-form input[type="text"],
320	.pure-form input[type="password"],
321	.pure-form input[type="email"],
322	.pure-form input[type="url"],
323	.pure-form input[type="date"],
324	.pure-form input[type="month"],
325	.pure-form input[type="time"],
326	.pure-form input[type="datetime"],
327	.pure-form input[type="datetime-local"],
328	.pure-form input[type="week"],
329	.pure-form input[type="number"],
330	.pure-form input[type="search"],
331	.pure-form input[type="tel"],
332	.pure-form input[type="color"],
333	.pure-form label {
334	margin-bottom: 0.3em;
335	display: block;
336	}
337
338	.pure-group input:not([type]),
339	.pure-group input[type="text"],
340	.pure-group input[type="password"],
341	.pure-group input[type="email"],
342	.pure-group input[type="url"],
343	.pure-group input[type="date"],
344	.pure-group input[type="month"],
345	.pure-group input[type="time"],
346	.pure-group input[type="datetime"],
347	.pure-group input[type="datetime-local"],
348	.pure-group input[type="week"],
349	.pure-group input[type="number"],
350	.pure-group input[type="search"],
351	.pure-group input[type="tel"],
352	.pure-group input[type="color"] {
353	margin-bottom: 0;
354	}
355
356	.pure-form-aligned .pure-control-group label {
357	margin-bottom: 0.3em;
358	text-align: left;
359	display: block;
360	width: 100%;
361	}
362
363	.pure-form-aligned .pure-controls {
364	margin: 1.5em 0 0 0;
365	}
366
367	.pure-form-message-inline,
368	.pure-form-message {
369	display: block;
370	font-size: 0.75em;
371	/* Increased bottom padding to make it group with its related input element. */
372	padding: 0.2em 0 0.8em;
373	}
374	}