merged cont.
[opensuse:yast-rest-service.git] / webyast / public / stylesheets / grid.css
1 /*
2         Source: Variable Grid System.
3         Learn more ~ http://www.spry-soft.com/grids/
4         Based on 960 Grid System - http://960.gs/
5
6         Licensed under GPL and MIT.
7 */
8
9
10 /* Containers
11 ----------------------------------------------------------------------------------------------------*/
12 .container_12 {
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         display:inline;
34         float: left;
35         position: relative;
36         margin-left: 10px;
37         margin-right: 10px;
38 }
39
40 /* Grid >> Children (Alpha ~ First, Omega ~ Last)
41 ----------------------------------------------------------------------------------------------------*/
42
43 .alpha {
44         margin-left: 0;
45 }
46
47 .omega {
48         margin-right: 0;
49 }
50
51 /* Grid >> 12 Columns
52 ----------------------------------------------------------------------------------------------------*/
53
54 .container_12 .grid_1 {
55         width:60px;
56 }
57
58 .container_12 .grid_2 {
59         width:140px;
60 }
61
62 .container_12 .grid_3 {
63         width:220px;
64 }
65
66 .container_12 .grid_4 {
67         width:300px;
68 }
69
70 .container_12 .grid_5 {
71         width:380px;
72 }
73
74 .container_12 .grid_6 {
75         width:460px;
76 }
77
78 .container_12 .grid_7 {
79         width:540px;
80 }
81
82 .container_12 .grid_8 {
83         width:620px;
84 }
85
86 .container_12 .grid_9 {
87         width:700px;
88 }
89
90 .container_12 .grid_10 {
91         width:780px;
92 }
93
94 .container_12 .grid_11 {
95         width:860px;
96 }
97
98 .container_12 .grid_12 {
99         width:940px;
100 }
101
102
103
104 /* Prefix Extra Space >> 12 Columns
105 ----------------------------------------------------------------------------------------------------*/
106
107 .container_12 .prefix_1 {
108         padding-left:80px;
109 }
110
111 .container_12 .prefix_2 {
112         padding-left:160px;
113 }
114
115 .container_12 .prefix_3 {
116         padding-left:240px;
117 }
118
119 .container_12 .prefix_4 {
120         padding-left:320px;
121 }
122
123 .container_12 .prefix_5 {
124         padding-left:400px;
125 }
126
127 .container_12 .prefix_6 {
128         padding-left:480px;
129 }
130
131 .container_12 .prefix_7 {
132         padding-left:560px;
133 }
134
135 .container_12 .prefix_8 {
136         padding-left:640px;
137 }
138
139 .container_12 .prefix_9 {
140         padding-left:720px;
141 }
142
143 .container_12 .prefix_10 {
144         padding-left:800px;
145 }
146
147 .container_12 .prefix_11 {
148         padding-left:880px;
149 }
150
151
152
153 /* Suffix Extra Space >> 12 Columns
154 ----------------------------------------------------------------------------------------------------*/
155
156 .container_12 .suffix_1 {
157         padding-right:80px;
158 }
159
160 .container_12 .suffix_2 {
161         padding-right:160px;
162 }
163
164 .container_12 .suffix_3 {
165         padding-right:240px;
166 }
167
168 .container_12 .suffix_4 {
169         padding-right:320px;
170 }
171
172 .container_12 .suffix_5 {
173         padding-right:400px;
174 }
175
176 .container_12 .suffix_6 {
177         padding-right:480px;
178 }
179
180 .container_12 .suffix_7 {
181         padding-right:560px;
182 }
183
184 .container_12 .suffix_8 {
185         padding-right:640px;
186 }
187
188 .container_12 .suffix_9 {
189         padding-right:720px;
190 }
191
192 .container_12 .suffix_10 {
193         padding-right:800px;
194 }
195
196 .container_12 .suffix_11 {
197         padding-right:880px;
198 }
199
200
201
202 /* Push Space >> 12 Columns
203 ----------------------------------------------------------------------------------------------------*/
204
205 .container_12 .push_1 {
206         left:80px;
207 }
208
209 .container_12 .push_2 {
210         left:160px;
211 }
212
213 .container_12 .push_3 {
214         left:240px;
215 }
216
217 .container_12 .push_4 {
218         left:320px;
219 }
220
221 .container_12 .push_5 {
222         left:400px;
223 }
224
225 .container_12 .push_6 {
226         left:480px;
227 }
228
229 .container_12 .push_7 {
230         left:560px;
231 }
232
233 .container_12 .push_8 {
234         left:640px;
235 }
236
237 .container_12 .push_9 {
238         left:720px;
239 }
240
241 .container_12 .push_10 {
242         left:800px;
243 }
244
245 .container_12 .push_11 {
246         left:880px;
247 }
248
249
250
251 /* Pull Space >> 12 Columns
252 ----------------------------------------------------------------------------------------------------*/
253
254 .container_12 .pull_1 {
255         left:-80px;
256 }
257
258 .container_12 .pull_2 {
259         left:-160px;
260 }
261
262 .container_12 .pull_3 {
263         left:-240px;
264 }
265
266 .container_12 .pull_4 {
267         left:-320px;
268 }
269
270 .container_12 .pull_5 {
271         left:-400px;
272 }
273
274 .container_12 .pull_6 {
275         left:-480px;
276 }
277
278 .container_12 .pull_7 {
279         left:-560px;
280 }
281
282 .container_12 .pull_8 {
283         left:-640px;
284 }
285
286 .container_12 .pull_9 {
287         left:-720px;
288 }
289
290 .container_12 .pull_10 {
291         left:-800px;
292 }
293
294 .container_12 .pull_11 {
295         left:-880px;
296 }
297
298
299
300
301 /* Clear Floated Elements
302 ----------------------------------------------------------------------------------------------------*/
303
304 /* http://sonspring.com/journal/clearing-floats */
305
306 .clear {
307         clear: both;
308         display: block;
309         overflow: hidden;
310         visibility: hidden;
311         width: 0;
312         height: 0;
313 }
314
315 /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
316
317 .clearfix:after {
318         clear: both;
319         content: ' ';
320         display: block;
321         font-size: 0;
322         line-height: 0;
323         visibility: hidden;
324         width: 0;
325         height: 0;
326 }
327
328 .clearfix {
329         display: inline-block;
330 }
331
332 * html .clearfix {
333         height: 1%;
334 }
335
336 .clearfix {
337         display: block;
338 }