foist
[kismet-logviewer.git] / logviewer / static / css / grid.css
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 }