Merge remote branch 'remotes/aaronw/feature410_markdown_bio'
[mediagoblin.git] / mediagoblin / contrib / 960_16_col.css
CommitLineData
18d9287a
JS
1/*
2 960 Grid System ~ Core CSS.
3 Learn more ~ http://960.gs/
4
5 Licensed under GPL and MIT.
6*/
7
8/*
9 Forces backgrounds to span full width,
10 even if there is horizontal scrolling.
11 Increase this if your layout is wider.
12
13 Note: IE6 works fine without this fix.
14*/
15
16body {
17 min-width: 960px;
18}
19
20/* Container
21----------------------------------------------------------------------------------------------------*/
22
23.container_16 {
24 margin-left: auto;
25 margin-right: auto;
26 width: 960px;
27}
28
29/* Grid >> Global
30----------------------------------------------------------------------------------------------------*/
31
32.grid_1,
33.grid_2,
34.grid_3,
35.grid_4,
36.grid_5,
37.grid_6,
38.grid_7,
39.grid_8,
40.grid_9,
41.grid_10,
42.grid_11,
43.grid_12,
44.grid_13,
45.grid_14,
46.grid_15,
47.grid_16 {
48 display: inline;
49 float: left;
50 position: relative;
51 margin-left: 10px;
52 margin-right: 10px;
53}
54
55.push_1, .pull_1,
56.push_2, .pull_2,
57.push_3, .pull_3,
58.push_4, .pull_4,
59.push_5, .pull_5,
60.push_6, .pull_6,
61.push_7, .pull_7,
62.push_8, .pull_8,
63.push_9, .pull_9,
64.push_10, .pull_10,
65.push_11, .pull_11,
66.push_12, .pull_12,
67.push_13, .pull_13,
68.push_14, .pull_14,
69.push_15, .pull_15,
70.push_16, .pull_16 {
71 position: relative;
72}
73
74/* Grid >> Children (Alpha ~ First, Omega ~ Last)
75----------------------------------------------------------------------------------------------------*/
76
77.alpha {
78 margin-left: 0;
79}
80
81.omega {
82 margin-right: 0;
83}
84
85/* Grid >> 16 Columns
86----------------------------------------------------------------------------------------------------*/
87
88.container_16 .grid_1 {
89 width: 40px;
90}
91
92.container_16 .grid_2 {
93 width: 100px;
94}
95
96.container_16 .grid_3 {
97 width: 160px;
98}
99
100.container_16 .grid_4 {
101 width: 220px;
102}
103
104.container_16 .grid_5 {
105 width: 280px;
106}
107
108.container_16 .grid_6 {
109 width: 340px;
110}
111
112.container_16 .grid_7 {
113 width: 400px;
114}
115
116.container_16 .grid_8 {
117 width: 460px;
118}
119
120.container_16 .grid_9 {
121 width: 520px;
122}
123
124.container_16 .grid_10 {
125 width: 580px;
126}
127
128.container_16 .grid_11 {
129 width: 640px;
130}
131
132.container_16 .grid_12 {
133 width: 700px;
134}
135
136.container_16 .grid_13 {
137 width: 760px;
138}
139
140.container_16 .grid_14 {
141 width: 820px;
142}
143
144.container_16 .grid_15 {
145 width: 880px;
146}
147
148.container_16 .grid_16 {
149 width: 940px;
150}
151
152/* Prefix Extra Space >> 16 Columns
153----------------------------------------------------------------------------------------------------*/
154
155.container_16 .prefix_1 {
156 padding-left: 60px;
157}
158
159.container_16 .prefix_2 {
160 padding-left: 120px;
161}
162
163.container_16 .prefix_3 {
164 padding-left: 180px;
165}
166
167.container_16 .prefix_4 {
168 padding-left: 240px;
169}
170
171.container_16 .prefix_5 {
172 padding-left: 300px;
173}
174
175.container_16 .prefix_6 {
176 padding-left: 360px;
177}
178
179.container_16 .prefix_7 {
180 padding-left: 420px;
181}
182
183.container_16 .prefix_8 {
184 padding-left: 480px;
185}
186
187.container_16 .prefix_9 {
188 padding-left: 540px;
189}
190
191.container_16 .prefix_10 {
192 padding-left: 600px;
193}
194
195.container_16 .prefix_11 {
196 padding-left: 660px;
197}
198
199.container_16 .prefix_12 {
200 padding-left: 720px;
201}
202
203.container_16 .prefix_13 {
204 padding-left: 780px;
205}
206
207.container_16 .prefix_14 {
208 padding-left: 840px;
209}
210
211.container_16 .prefix_15 {
212 padding-left: 900px;
213}
214
215/* Suffix Extra Space >> 16 Columns
216----------------------------------------------------------------------------------------------------*/
217
218.container_16 .suffix_1 {
219 padding-right: 60px;
220}
221
222.container_16 .suffix_2 {
223 padding-right: 120px;
224}
225
226.container_16 .suffix_3 {
227 padding-right: 180px;
228}
229
230.container_16 .suffix_4 {
231 padding-right: 240px;
232}
233
234.container_16 .suffix_5 {
235 padding-right: 300px;
236}
237
238.container_16 .suffix_6 {
239 padding-right: 360px;
240}
241
242.container_16 .suffix_7 {
243 padding-right: 420px;
244}
245
246.container_16 .suffix_8 {
247 padding-right: 480px;
248}
249
250.container_16 .suffix_9 {
251 padding-right: 540px;
252}
253
254.container_16 .suffix_10 {
255 padding-right: 600px;
256}
257
258.container_16 .suffix_11 {
259 padding-right: 660px;
260}
261
262.container_16 .suffix_12 {
263 padding-right: 720px;
264}
265
266.container_16 .suffix_13 {
267 padding-right: 780px;
268}
269
270.container_16 .suffix_14 {
271 padding-right: 840px;
272}
273
274.container_16 .suffix_15 {
275 padding-right: 900px;
276}
277
278/* Push Space >> 16 Columns
279----------------------------------------------------------------------------------------------------*/
280
281.container_16 .push_1 {
282 left: 60px;
283}
284
285.container_16 .push_2 {
286 left: 120px;
287}
288
289.container_16 .push_3 {
290 left: 180px;
291}
292
293.container_16 .push_4 {
294 left: 240px;
295}
296
297.container_16 .push_5 {
298 left: 300px;
299}
300
301.container_16 .push_6 {
302 left: 360px;
303}
304
305.container_16 .push_7 {
306 left: 420px;
307}
308
309.container_16 .push_8 {
310 left: 480px;
311}
312
313.container_16 .push_9 {
314 left: 540px;
315}
316
317.container_16 .push_10 {
318 left: 600px;
319}
320
321.container_16 .push_11 {
322 left: 660px;
323}
324
325.container_16 .push_12 {
326 left: 720px;
327}
328
329.container_16 .push_13 {
330 left: 780px;
331}
332
333.container_16 .push_14 {
334 left: 840px;
335}
336
337.container_16 .push_15 {
338 left: 900px;
339}
340
341/* Pull Space >> 16 Columns
342----------------------------------------------------------------------------------------------------*/
343
344.container_16 .pull_1 {
345 left: -60px;
346}
347
348.container_16 .pull_2 {
349 left: -120px;
350}
351
352.container_16 .pull_3 {
353 left: -180px;
354}
355
356.container_16 .pull_4 {
357 left: -240px;
358}
359
360.container_16 .pull_5 {
361 left: -300px;
362}
363
364.container_16 .pull_6 {
365 left: -360px;
366}
367
368.container_16 .pull_7 {
369 left: -420px;
370}
371
372.container_16 .pull_8 {
373 left: -480px;
374}
375
376.container_16 .pull_9 {
377 left: -540px;
378}
379
380.container_16 .pull_10 {
381 left: -600px;
382}
383
384.container_16 .pull_11 {
385 left: -660px;
386}
387
388.container_16 .pull_12 {
389 left: -720px;
390}
391
392.container_16 .pull_13 {
393 left: -780px;
394}
395
396.container_16 .pull_14 {
397 left: -840px;
398}
399
400.container_16 .pull_15 {
401 left: -900px;
402}
403
404/* `Clear Floated Elements
405----------------------------------------------------------------------------------------------------*/
406
407/* http://sonspring.com/journal/clearing-floats */
408
409.clear {
410 clear: both;
411 display: block;
412 overflow: hidden;
413 visibility: hidden;
414 width: 0;
415 height: 0;
416}
417
418/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
419
420.clearfix:before,
421.clearfix:after,
422.container_16:before,
423.container_16:after {
424 content: '.';
425 display: block;
426 overflow: hidden;
427 visibility: hidden;
428 font-size: 0;
429 line-height: 0;
430 width: 0;
431 height: 0;
432}
433
434.clearfix:after,
435.container_16:after {
436 clear: both;
437}
438
439/*
440 The following zoom:1 rule is specifically for IE6 + IE7.
441 Move to separate stylesheet if invalid CSS is a problem.
442*/
443
444.clearfix,
445.container_16 {
446 zoom: 1;
447}