1 | /*
|
2 | 960 Grid System ~ Core CSS.
|
3 | Learn more ~ http://960.gs/
|
4 |
|
5 | Licensed under GPL and MIT.
|
6 | */
|
7 |
|
8 | /* =Containers
|
9 | --------------------------------------------------------------------------------*/
|
10 |
|
11 | .container_12,
|
12 | .container_16
|
13 | {
|
14 | width: 92%;
|
15 | margin-left: 4%;
|
16 | margin-right: 4%;
|
17 | }
|
18 |
|
19 | /* =Grid >> Global
|
20 | --------------------------------------------------------------------------------*/
|
21 |
|
22 | .grid_1,
|
23 | .grid_2,
|
24 | .grid_3,
|
25 | .grid_4,
|
26 | .grid_5,
|
27 | .grid_6,
|
28 | .grid_7,
|
29 | .grid_8,
|
30 | .grid_9,
|
31 | .grid_10,
|
32 | .grid_11,
|
33 | .grid_12,
|
34 | .grid_13,
|
35 | .grid_14,
|
36 | .grid_15,
|
37 | .grid_16
|
38 | {
|
39 | display: inline;
|
40 | float: left;
|
41 | margin-left: 1%;
|
42 | margin-right: 1%;
|
43 | }
|
44 |
|
45 | .container_12 .grid_3,
|
46 | .container_16 .grid_4
|
47 | {
|
48 | width: 23%;
|
49 | }
|
50 |
|
51 | .container_12 .grid_6,
|
52 | .container_16 .grid_8
|
53 | {
|
54 | width: 48%;
|
55 | }
|
56 |
|
57 | .container_12 .grid_9,
|
58 | .container_16 .grid_12
|
59 | {
|
60 | width: 73%;
|
61 | }
|
62 |
|
63 | .container_12 .grid_12,
|
64 | .container_16 .grid_16
|
65 | {
|
66 | width: 98%;
|
67 | }
|
68 |
|
69 | /* =Grid >> Children (Alpha ~ First, Omega ~ Last)
|
70 | --------------------------------------------------------------------------------*/
|
71 |
|
72 | .alpha
|
73 | {
|
74 | margin-left: 0;
|
75 | }
|
76 |
|
77 | .omega
|
78 | {
|
79 | margin-right: 0;
|
80 | }
|
81 |
|
82 | /* =Grid >> 12 Columns
|
83 | --------------------------------------------------------------------------------*/
|
84 |
|
85 | .container_12 .grid_1
|
86 | {
|
87 | width: 6.333%;
|
88 | }
|
89 |
|
90 | .container_12 .grid_2
|
91 | {
|
92 | width: 14.666%;
|
93 | }
|
94 |
|
95 | .container_12 .grid_4
|
96 | {
|
97 | width: 31.333%;
|
98 | }
|
99 |
|
100 | .container_12 .grid_5
|
101 | {
|
102 | width: 39.666%;
|
103 | }
|
104 |
|
105 | .container_12 .grid_7
|
106 | {
|
107 | width: 56.333%;
|
108 | }
|
109 |
|
110 | .container_12 .grid_8
|
111 | {
|
112 | width: 64.666%;
|
113 | }
|
114 |
|
115 | .container_12 .grid_10
|
116 | {
|
117 | width: 81.333%;
|
118 | }
|
119 |
|
120 | .container_12 .grid_11
|
121 | {
|
122 | width: 89.666%;
|
123 | }
|
124 |
|
125 | /* =Grid >> 16 Columns
|
126 | --------------------------------------------------------------------------------*/
|
127 |
|
128 | .container_16 .grid_1
|
129 | {
|
130 | width: 4.25%;
|
131 | }
|
132 |
|
133 | .container_16 .grid_2
|
134 | {
|
135 | width: 10.5%;
|
136 | }
|
137 |
|
138 | .container_16 .grid_3
|
139 | {
|
140 | width: 16.75%;
|
141 | }
|
142 |
|
143 | .container_16 .grid_5
|
144 | {
|
145 | width: 29.25%;
|
146 | }
|
147 |
|
148 | .container_16 .grid_6
|
149 | {
|
150 | width: 35.5%;
|
151 | }
|
152 |
|
153 | .container_16 .grid_7
|
154 | {
|
155 | width: 41.75%;
|
156 | }
|
157 |
|
158 | .container_16 .grid_9
|
159 | {
|
160 | width: 54.25%;
|
161 | }
|
162 |
|
163 | .container_16 .grid_10
|
164 | {
|
165 | width: 60.5%;
|
166 | }
|
167 |
|
168 | .container_16 .grid_11
|
169 | {
|
170 | width: 66.75%;
|
171 | }
|
172 |
|
173 | .container_16 .grid_13
|
174 | {
|
175 | width: 79.25%;
|
176 | }
|
177 |
|
178 | .container_16 .grid_14
|
179 | {
|
180 | width: 85.5%;
|
181 | }
|
182 |
|
183 | .container_16 .grid_15
|
184 | {
|
185 | width: 91.75%;
|
186 | }
|
187 |
|
188 | /* =Prefix Extra Space >> Global
|
189 | --------------------------------------------------------------------------------*/
|
190 |
|
191 | .container_12 .prefix_3,
|
192 | .container_16 .prefix_4
|
193 | {
|
194 | padding-left: 25%;
|
195 | }
|
196 |
|
197 | .container_12 .prefix_6,
|
198 | .container_16 .prefix_8
|
199 | {
|
200 | padding-left: 50%;
|
201 | }
|
202 |
|
203 | .container_12 .prefix_9,
|
204 | .container_16 .prefix_12
|
205 | {
|
206 | padding-left: 75%;
|
207 | }
|
208 |
|
209 | /* =Prefix Extra Space >> 12 Columns
|
210 | --------------------------------------------------------------------------------*/
|
211 |
|
212 | .container_12 .prefix_1
|
213 | {
|
214 | padding-left: 8.333%;
|
215 | }
|
216 |
|
217 | .container_12 .prefix_2
|
218 | {
|
219 | padding-left: 16.666%;
|
220 | }
|
221 |
|
222 | .container_12 .prefix_4
|
223 | {
|
224 | padding-left: 33.333%;
|
225 | }
|
226 |
|
227 | .container_12 .prefix_5
|
228 | {
|
229 | padding-left: 41.666%;
|
230 | }
|
231 |
|
232 | .container_12 .prefix_7
|
233 | {
|
234 | padding-left: 58.333%;
|
235 | }
|
236 |
|
237 | .container_12 .prefix_8
|
238 | {
|
239 | padding-left: 66.666%;
|
240 | }
|
241 |
|
242 | .container_12 .prefix_10
|
243 | {
|
244 | padding-left: 83.333%;
|
245 | }
|
246 |
|
247 | .container_12 .prefix_11
|
248 | {
|
249 | padding-left: 91.666%;
|
250 | }
|
251 |
|
252 | /* =Prefix Extra Space >> 16 Columns
|
253 | --------------------------------------------------------------------------------*/
|
254 |
|
255 | .container_16 .prefix_1
|
256 | {
|
257 | padding-left: 6.25%;
|
258 | }
|
259 |
|
260 | .container_16 .prefix_2
|
261 | {
|
262 | padding-left: 12.5%;
|
263 | }
|
264 |
|
265 | .container_16 .prefix_3
|
266 | {
|
267 | padding-left: 18.75%;
|
268 | }
|
269 |
|
270 | .container_16 .prefix_5
|
271 | {
|
272 | padding-left: 31.25%;
|
273 | }
|
274 |
|
275 | .container_16 .prefix_6
|
276 | {
|
277 | padding-left: 37.5%;
|
278 | }
|
279 |
|
280 | .container_16 .prefix_7
|
281 | {
|
282 | padding-left: 43.75%;
|
283 | }
|
284 |
|
285 | .container_16 .prefix_9
|
286 | {
|
287 | padding-left: 56.25%;
|
288 | }
|
289 |
|
290 | .container_16 .prefix_10
|
291 | {
|
292 | padding-left: 62.5%;
|
293 | }
|
294 |
|
295 | .container_16 .prefix_11
|
296 | {
|
297 | padding-left: 68.75%;
|
298 | }
|
299 |
|
300 | .container_16 .prefix_13
|
301 | {
|
302 | padding-left: 81.25%;
|
303 | }
|
304 |
|
305 | .container_16 .prefix_14
|
306 | {
|
307 | padding-left: 87.5%;
|
308 | }
|
309 |
|
310 | .container_16 .prefix_15
|
311 | {
|
312 | padding-left: 93.75%;
|
313 | }
|
314 |
|
315 | /* =Suffix Extra Space >> Global
|
316 | --------------------------------------------------------------------------------*/
|
317 |
|
318 | .container_12 .suffix_3,
|
319 | .container_16 .suffix_4
|
320 | {
|
321 | padding-right: 25%;
|
322 | }
|
323 |
|
324 | .container_12 .suffix_6,
|
325 | .container_16 .suffix_8
|
326 | {
|
327 | padding-right: 50%;
|
328 | }
|
329 |
|
330 | .container_12 .suffix_9,
|
331 | .container_16 .suffix_12
|
332 | {
|
333 | padding-right: 75%;
|
334 | }
|
335 |
|
336 | /* =Suffix Extra Space >> 12 Columns
|
337 | --------------------------------------------------------------------------------*/
|
338 |
|
339 | .container_12 .suffix_1
|
340 | {
|
341 | padding-right: 8.333%;
|
342 | }
|
343 |
|
344 | .container_12 .suffix_2
|
345 | {
|
346 | padding-right: 16.666%;
|
347 | }
|
348 |
|
349 | .container_12 .suffix_4
|
350 | {
|
351 | padding-right: 33.333%;
|
352 | }
|
353 |
|
354 | .container_12 .suffix_5
|
355 | {
|
356 | padding-right: 41.666%;
|
357 | }
|
358 |
|
359 | .container_12 .suffix_7
|
360 | {
|
361 | padding-right: 58.333%;
|
362 | }
|
363 |
|
364 | .container_12 .suffix_8
|
365 | {
|
366 | padding-right: 66.666%;
|
367 | }
|
368 |
|
369 | .container_12 .suffix_10
|
370 | {
|
371 | padding-right: 83.333%;
|
372 | }
|
373 |
|
374 | .container_12 .suffix_11
|
375 | {
|
376 | padding-right: 91.666%;
|
377 | }
|
378 |
|
379 | /* =Suffix Extra Space >> 16 Columns
|
380 | --------------------------------------------------------------------------------*/
|
381 |
|
382 | .container_16 .suffix_1
|
383 | {
|
384 | padding-right: 6.25%;
|
385 | }
|
386 |
|
387 | .container_16 .suffix_2
|
388 | {
|
389 | padding-right: 16.5%;
|
390 | }
|
391 |
|
392 | .container_16 .suffix_3
|
393 | {
|
394 | padding-right: 18.75%;
|
395 | }
|
396 |
|
397 | .container_16 .suffix_5
|
398 | {
|
399 | padding-right: 31.25%;
|
400 | }
|
401 |
|
402 | .container_16 .suffix_6
|
403 | {
|
404 | padding-right: 37.5%;
|
405 | }
|
406 |
|
407 | .container_16 .suffix_7
|
408 | {
|
409 | padding-right: 43.75%;
|
410 | }
|
411 |
|
412 | .container_16 .suffix_9
|
413 | {
|
414 | padding-right: 56.25%;
|
415 | }
|
416 |
|
417 | .container_16 .suffix_10
|
418 | {
|
419 | padding-right: 62.5%;
|
420 | }
|
421 |
|
422 | .container_16 .suffix_11
|
423 | {
|
424 | padding-right: 68.75%;
|
425 | }
|
426 |
|
427 | .container_16 .suffix_13
|
428 | {
|
429 | padding-right: 81.25%;
|
430 | }
|
431 |
|
432 | .container_16 .suffix_14
|
433 | {
|
434 | padding-right: 87.5%;
|
435 | }
|
436 |
|
437 | .container_16 .suffix_15
|
438 | {
|
439 | padding-right: 93.75%;
|
440 | }
|
441 |
|
442 | /* =Clear Floated Elements
|
443 | --------------------------------------------------------------------------------*/
|
444 |
|
445 | /* http://sonspring.com/journal/clearing-floats */
|
446 |
|
447 | html body * span.clear,
|
448 | html body * div.clear,
|
449 | html body * li.clear,
|
450 | html body * dd.clear
|
451 | {
|
452 | background: none;
|
453 | border: 0;
|
454 | clear: both;
|
455 | display: block;
|
456 | float: none;
|
457 | font-size: 0;
|
458 | list-style: none;
|
459 | margin: 0;
|
460 | padding: 0;
|
461 | overflow: hidden;
|
462 | visibility: hidden;
|
463 | width: 0;
|
464 | height: 0;
|
465 | }
|
466 |
|
467 | /* http://www.positioniseverything.net/easyclearing.html */
|
468 |
|
469 | .clearfix:after
|
470 | {
|
471 | clear: both;
|
472 | content: '.';
|
473 | display: block;
|
474 | visibility: hidden;
|
475 | height: 0;
|
476 | }
|
477 |
|
478 | .clearfix
|
479 | {
|
480 | display: inline-block;
|
481 | }
|
482 |
|
483 | * html .clearfix
|
484 | {
|
485 | height: 1%;
|
486 | }
|
487 |
|
488 | .clearfix
|
489 | {
|
490 | display: block;
|
491 | } |
\ | No newline at end of file |