New design for book-detail template (downloading books etc).
[wolnelektury.git] / wolnelektury / static / css / 960.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         margin-left: auto;
14         margin-right: auto;
15         width: 960px;
16 }
17
18 /* `Grid >> Global
19 ----------------------------------------------------------------------------------------------------*/
20
21 .grid_1,
22 .grid_2,
23 .grid_3,
24 .grid_4,
25 .grid_5,
26 .grid_6,
27 .grid_7,
28 .grid_8,
29 .grid_9,
30 .grid_10,
31 .grid_11,
32 .grid_12,
33 .grid_13,
34 .grid_14,
35 .grid_15,
36 .grid_16 {
37         display: inline;
38         float: left;
39         position: relative;
40         margin-left: 10px;
41         margin-right: 10px;
42 }
43
44 .container_12 .grid_3,
45 .container_16 .grid_4 {
46         width: 220px;
47 }
48
49 .container_12 .grid_6,
50 .container_16 .grid_8 {
51         width: 460px;
52 }
53
54 .container_12 .grid_9,
55 .container_16 .grid_12 {
56         width: 700px;
57 }
58
59 .container_12 .grid_12,
60 .container_16 .grid_16 {
61         width: 940px;
62 }
63
64 /* `Grid >> Children (Alpha ~ First, Omega ~ Last)
65 ----------------------------------------------------------------------------------------------------*/
66
67 .alpha {
68         margin-left: 0;
69 }
70
71 .omega {
72         margin-right: 0;
73 }
74
75 /* `Grid >> 12 Columns
76 ----------------------------------------------------------------------------------------------------*/
77
78 .container_12 .grid_1 {
79         width: 60px;
80 }
81
82 .container_12 .grid_2 {
83         width: 140px;
84 }
85
86 .container_12 .grid_4 {
87         width: 300px;
88 }
89
90 .container_12 .grid_5 {
91         width: 380px;
92 }
93
94 .container_12 .grid_7 {
95         width: 540px;
96 }
97
98 .container_12 .grid_8 {
99         width: 620px;
100 }
101
102 .container_12 .grid_10 {
103         width: 780px;
104 }
105
106 .container_12 .grid_11 {
107         width: 860px;
108 }
109
110 /* `Grid >> 16 Columns
111 ----------------------------------------------------------------------------------------------------*/
112
113 .container_16 .grid_1 {
114         width: 40px;
115 }
116
117 .container_16 .grid_2 {
118         width: 100px;
119 }
120
121 .container_16 .grid_3 {
122         width: 160px;
123 }
124
125 .container_16 .grid_5 {
126         width: 280px;
127 }
128
129 .container_16 .grid_6 {
130         width: 340px;
131 }
132
133 .container_16 .grid_7 {
134         width: 400px;
135 }
136
137 .container_16 .grid_9 {
138         width: 520px;
139 }
140
141 .container_16 .grid_10 {
142         width: 580px;
143 }
144
145 .container_16 .grid_11 {
146         width: 640px;
147 }
148
149 .container_16 .grid_13 {
150         width: 760px;
151 }
152
153 .container_16 .grid_14 {
154         width: 820px;
155 }
156
157 .container_16 .grid_15 {
158         width: 880px;
159 }
160
161 /* `Prefix Extra Space >> Global
162 ----------------------------------------------------------------------------------------------------*/
163
164 .container_12 .prefix_3,
165 .container_16 .prefix_4 {
166         padding-left: 240px;
167 }
168
169 .container_12 .prefix_6,
170 .container_16 .prefix_8 {
171         padding-left: 480px;
172 }
173
174 .container_12 .prefix_9,
175 .container_16 .prefix_12 {
176         padding-left: 720px;
177 }
178
179 /* `Prefix Extra Space >> 12 Columns
180 ----------------------------------------------------------------------------------------------------*/
181
182 .container_12 .prefix_1 {
183         padding-left: 80px;
184 }
185
186 .container_12 .prefix_2 {
187         padding-left: 160px;
188 }
189
190 .container_12 .prefix_4 {
191         padding-left: 320px;
192 }
193
194 .container_12 .prefix_5 {
195         padding-left: 400px;
196 }
197
198 .container_12 .prefix_7 {
199         padding-left: 560px;
200 }
201
202 .container_12 .prefix_8 {
203         padding-left: 640px;
204 }
205
206 .container_12 .prefix_10 {
207         padding-left: 800px;
208 }
209
210 .container_12 .prefix_11 {
211         padding-left: 880px;
212 }
213
214 /* `Prefix Extra Space >> 16 Columns
215 ----------------------------------------------------------------------------------------------------*/
216
217 .container_16 .prefix_1 {
218         padding-left: 60px;
219 }
220
221 .container_16 .prefix_2 {
222         padding-left: 120px;
223 }
224
225 .container_16 .prefix_3 {
226         padding-left: 180px;
227 }
228
229 .container_16 .prefix_5 {
230         padding-left: 300px;
231 }
232
233 .container_16 .prefix_6 {
234         padding-left: 360px;
235 }
236
237 .container_16 .prefix_7 {
238         padding-left: 420px;
239 }
240
241 .container_16 .prefix_9 {
242         padding-left: 540px;
243 }
244
245 .container_16 .prefix_10 {
246         padding-left: 600px;
247 }
248
249 .container_16 .prefix_11 {
250         padding-left: 660px;
251 }
252
253 .container_16 .prefix_13 {
254         padding-left: 780px;
255 }
256
257 .container_16 .prefix_14 {
258         padding-left: 840px;
259 }
260
261 .container_16 .prefix_15 {
262         padding-left: 900px;
263 }
264
265 /* `Suffix Extra Space >> Global
266 ----------------------------------------------------------------------------------------------------*/
267
268 .container_12 .suffix_3,
269 .container_16 .suffix_4 {
270         padding-right: 240px;
271 }
272
273 .container_12 .suffix_6,
274 .container_16 .suffix_8 {
275         padding-right: 480px;
276 }
277
278 .container_12 .suffix_9,
279 .container_16 .suffix_12 {
280         padding-right: 720px;
281 }
282
283 /* `Suffix Extra Space >> 12 Columns
284 ----------------------------------------------------------------------------------------------------*/
285
286 .container_12 .suffix_1 {
287         padding-right: 80px;
288 }
289
290 .container_12 .suffix_2 {
291         padding-right: 160px;
292 }
293
294 .container_12 .suffix_4 {
295         padding-right: 320px;
296 }
297
298 .container_12 .suffix_5 {
299         padding-right: 400px;
300 }
301
302 .container_12 .suffix_7 {
303         padding-right: 560px;
304 }
305
306 .container_12 .suffix_8 {
307         padding-right: 640px;
308 }
309
310 .container_12 .suffix_10 {
311         padding-right: 800px;
312 }
313
314 .container_12 .suffix_11 {
315         padding-right: 880px;
316 }
317
318 /* `Suffix Extra Space >> 16 Columns
319 ----------------------------------------------------------------------------------------------------*/
320
321 .container_16 .suffix_1 {
322         padding-right: 60px;
323 }
324
325 .container_16 .suffix_2 {
326         padding-right: 120px;
327 }
328
329 .container_16 .suffix_3 {
330         padding-right: 180px;
331 }
332
333 .container_16 .suffix_5 {
334         padding-right: 300px;
335 }
336
337 .container_16 .suffix_6 {
338         padding-right: 360px;
339 }
340
341 .container_16 .suffix_7 {
342         padding-right: 420px;
343 }
344
345 .container_16 .suffix_9 {
346         padding-right: 540px;
347 }
348
349 .container_16 .suffix_10 {
350         padding-right: 600px;
351 }
352
353 .container_16 .suffix_11 {
354         padding-right: 660px;
355 }
356
357 .container_16 .suffix_13 {
358         padding-right: 780px;
359 }
360
361 .container_16 .suffix_14 {
362         padding-right: 840px;
363 }
364
365 .container_16 .suffix_15 {
366         padding-right: 900px;
367 }
368
369 /* `Push Space >> Global
370 ----------------------------------------------------------------------------------------------------*/
371
372 .container_12 .push_3,
373 .container_16 .push_4 {
374         left: 240px;
375 }
376
377 .container_12 .push_6,
378 .container_16 .push_8 {
379         left: 480px;
380 }
381
382 .container_12 .push_9,
383 .container_16 .push_12 {
384         left: 720px;
385 }
386
387 /* `Push Space >> 12 Columns
388 ----------------------------------------------------------------------------------------------------*/
389
390 .container_12 .push_1 {
391         left: 80px;
392 }
393
394 .container_12 .push_2 {
395         left: 160px;
396 }
397
398 .container_12 .push_4 {
399         left: 320px;
400 }
401
402 .container_12 .push_5 {
403         left: 400px;
404 }
405
406 .container_12 .push_7 {
407         left: 560px;
408 }
409
410 .container_12 .push_8 {
411         left: 640px;
412 }
413
414 .container_12 .push_10 {
415         left: 800px;
416 }
417
418 .container_12 .push_11 {
419         left: 880px;
420 }
421
422 /* `Push Space >> 16 Columns
423 ----------------------------------------------------------------------------------------------------*/
424
425 .container_16 .push_1 {
426         left: 60px;
427 }
428
429 .container_16 .push_2 {
430         left: 120px;
431 }
432
433 .container_16 .push_3 {
434         left: 180px;
435 }
436
437 .container_16 .push_5 {
438         left: 300px;
439 }
440
441 .container_16 .push_6 {
442         left: 360px;
443 }
444
445 .container_16 .push_7 {
446         left: 420px;
447 }
448
449 .container_16 .push_9 {
450         left: 540px;
451 }
452
453 .container_16 .push_10 {
454         left: 600px;
455 }
456
457 .container_16 .push_11 {
458         left: 660px;
459 }
460
461 .container_16 .push_13 {
462         left: 780px;
463 }
464
465 .container_16 .push_14 {
466         left: 840px;
467 }
468
469 .container_16 .push_15 {
470         left: 900px;
471 }
472
473 /* `Pull Space >> Global
474 ----------------------------------------------------------------------------------------------------*/
475
476 .container_12 .pull_3,
477 .container_16 .pull_4 {
478         left: -240px;
479 }
480
481 .container_12 .pull_6,
482 .container_16 .pull_8 {
483         left: -480px;
484 }
485
486 .container_12 .pull_9,
487 .container_16 .pull_12 {
488         left: -720px;
489 }
490
491 /* `Pull Space >> 12 Columns
492 ----------------------------------------------------------------------------------------------------*/
493
494 .container_12 .pull_1 {
495         left: -80px;
496 }
497
498 .container_12 .pull_2 {
499         left: -160px;
500 }
501
502 .container_12 .pull_4 {
503         left: -320px;
504 }
505
506 .container_12 .pull_5 {
507         left: -400px;
508 }
509
510 .container_12 .pull_7 {
511         left: -560px;
512 }
513
514 .container_12 .pull_8 {
515         left: -640px;
516 }
517
518 .container_12 .pull_10 {
519         left: -800px;
520 }
521
522 .container_12 .pull_11 {
523         left: -880px;
524 }
525
526 /* `Pull Space >> 16 Columns
527 ----------------------------------------------------------------------------------------------------*/
528
529 .container_16 .pull_1 {
530         left: -60px;
531 }
532
533 .container_16 .pull_2 {
534         left: -120px;
535 }
536
537 .container_16 .pull_3 {
538         left: -180px;
539 }
540
541 .container_16 .pull_5 {
542         left: -300px;
543 }
544
545 .container_16 .pull_6 {
546         left: -360px;
547 }
548
549 .container_16 .pull_7 {
550         left: -420px;
551 }
552
553 .container_16 .pull_9 {
554         left: -540px;
555 }
556
557 .container_16 .pull_10 {
558         left: -600px;
559 }
560
561 .container_16 .pull_11 {
562         left: -660px;
563 }
564
565 .container_16 .pull_13 {
566         left: -780px;
567 }
568
569 .container_16 .pull_14 {
570         left: -840px;
571 }
572
573 .container_16 .pull_15 {
574         left: -900px;
575 }
576
577 /* `Clear Floated Elements
578 ----------------------------------------------------------------------------------------------------*/
579
580 /* http://sonspring.com/journal/clearing-floats */
581
582 .clear {
583         clear: both;
584         display: block;
585         overflow: hidden;
586         visibility: hidden;
587         width: 0;
588         height: 0;
589 }
590
591 /* http://perishablepress.com/press/2009/12/06/new-clearfix-hack */
592
593 .clearfix:after {
594         clear: both;
595         content: ' ';
596         display: block;
597         font-size: 0;
598         line-height: 0;
599         visibility: hidden;
600         width: 0;
601         height: 0;
602 }
603
604 /*
605         The following zoom:1 rule is specifically for IE6 + IE7.
606         Move to separate stylesheet if invalid CSS is a problem.
607 */
608 * html .clearfix,
609 *:first-child+html .clearfix {
610         zoom: 1;
611 }