|
1 /* |
|
2 Copyright (c) 2009, Yahoo! Inc. All rights reserved. |
|
3 Code licensed under the BSD License: |
|
4 http://developer.yahoo.net/yui/license.txt |
|
5 version: 3.0.0 |
|
6 build: 1549 |
|
7 */ |
|
8 /* |
|
9 * |
|
10 * The YUI CSS Foundation uses the *property and _property CSS filter |
|
11 * techniques to shield a value from A-grade browsers [1] other than |
|
12 * IE6 & IE7 (*property) and IE6 (_property) |
|
13 * |
|
14 / |
|
15 Section: General Rules |
|
16 */ |
|
17 .yui-cssgrids body { |
|
18 /* center the page */ |
|
19 text-align: center; |
|
20 margin-left: auto; |
|
21 margin-right: auto; |
|
22 } |
|
23 /* |
|
24 Section: Page Width Rules (#doc, #doc2, #doc3, #doc4) |
|
25 */ |
|
26 /* |
|
27 Subsection: General |
|
28 */ |
|
29 .yui-cssgrids .yui-d0, /* 100% */ |
|
30 .yui-cssgrids .yui-d1, /* 750px */ |
|
31 .yui-cssgrids .yui-d1f, /* 750px fixed */ |
|
32 .yui-cssgrids .yui-d2, /* 950px */ |
|
33 .yui-cssgrids .yui-d2f, /* 950px fixed */ |
|
34 .yui-cssgrids .yui-d3, /* 974px */ |
|
35 .yui-cssgrids .yui-d3f { /* 974px fixed */ |
|
36 margin: auto; |
|
37 text-align: left; |
|
38 width: 57.69em; |
|
39 *width: 56.25em; /* doc1*/ |
|
40 } |
|
41 |
|
42 .yui-cssgrids .yui-t1, |
|
43 .yui-cssgrids .yui-t2, |
|
44 .yui-cssgrids .yui-t3, |
|
45 .yui-cssgrids .yui-t4, |
|
46 .yui-cssgrids .yui-t5, |
|
47 .yui-cssgrids .yui-t6 { |
|
48 margin: auto; |
|
49 text-align: left; |
|
50 width: 100%; |
|
51 } |
|
52 |
|
53 /* |
|
54 Subsection: 100% (doc) |
|
55 */ |
|
56 .yui-cssgrids .yui-d0 { |
|
57 /* Left and Right margins are not a structural part of Grids. Without them Grids |
|
58 works fine, but content bleeds to the very edge of the document, which often |
|
59 impairs readability and usability. They are |
|
60 provided because they prevent the content from "bleeding" into the browser's chrome.*/ |
|
61 margin: auto 10px; |
|
62 width: auto; |
|
63 } |
|
64 .yui-cssgrids .yui-d0f { |
|
65 width: 100%; |
|
66 } |
|
67 |
|
68 /* |
|
69 Subsection: 950 Centered (doc2) |
|
70 */ |
|
71 .yui-cssgrids .yui-d2 { |
|
72 width: 73.076em; |
|
73 *width: 71.25em; |
|
74 } |
|
75 .yui-cssgrids .yui-d2f { |
|
76 width: 950px; |
|
77 } |
|
78 /* |
|
79 Subsection: 974 Centered (doc3) |
|
80 */ |
|
81 .yui-cssgrids .yui-d3 { |
|
82 width: 74.923em; |
|
83 *width: 73.05em; |
|
84 } |
|
85 .yui-cssgrids .yui-d3f { |
|
86 width: 974px; |
|
87 } |
|
88 /* |
|
89 Section: Preset Template Rules (.yui-t[1-6]) |
|
90 */ |
|
91 /* |
|
92 Subsection: General |
|
93 */ |
|
94 |
|
95 /* to preserve source-order independence for Gecko without breaking IE */ |
|
96 .yui-cssgrids .yui-b { |
|
97 position: relative; |
|
98 } |
|
99 .yui-cssgrids .yui-b { |
|
100 _position: static; |
|
101 } |
|
102 .yui-cssgrids .yui-main .yui-b { |
|
103 position: static; |
|
104 } |
|
105 .yui-cssgrids .yui-main { |
|
106 width: 100%; |
|
107 } |
|
108 .yui-cssgrids .yui-t1 .yui-main, |
|
109 .yui-cssgrids .yui-t2 .yui-main, |
|
110 .yui-cssgrids .yui-t3 .yui-main { |
|
111 float: right; |
|
112 /* IE: preserve layout at narrow widths */ |
|
113 margin-left: -25em; |
|
114 } |
|
115 .yui-cssgrids .yui-t4 .yui-main, |
|
116 .yui-cssgrids .yui-t5 .yui-main, |
|
117 .yui-cssgrids .yui-t6 .yui-main { |
|
118 float: left; |
|
119 /* IE: preserve layout at narrow widths */ |
|
120 margin-right: -25em; |
|
121 } |
|
122 |
|
123 /* Subsection: For Specific Template Presets */ |
|
124 |
|
125 /** |
|
126 * Nudge down to get to 13px equivalent for these form elements |
|
127 */ |
|
128 |
|
129 /* |
|
130 TODO Create t1-6's that are based on fixed widths |
|
131 */ |
|
132 /* t1 narrow block = left, equivalent of 160px */ |
|
133 .yui-cssgrids .yui-t1 .yui-b { |
|
134 float: left; |
|
135 width: 12.30769em; |
|
136 *width: 12.00em; |
|
137 } |
|
138 .yui-cssgrids .yui-t1 .yui-main .yui-b { |
|
139 margin-left: 13.30769em; |
|
140 *margin-left:12.975em; |
|
141 } |
|
142 /* t2 narrow block = left, equivalent of 180px */ |
|
143 .yui-cssgrids .yui-t2 .yui-b { |
|
144 float: left; |
|
145 width: 13.84615em; |
|
146 *width: 13.50em; |
|
147 } |
|
148 .yui-cssgrids .yui-t2 .yui-main .yui-b { |
|
149 margin-left: 14.84615em; |
|
150 *margin-left: 14.475em; |
|
151 } |
|
152 /* t3 narrow block = left, equivalent of 300px */ |
|
153 .yui-cssgrids .yui-t3 .yui-b { |
|
154 float: left; |
|
155 width: 23.0769em; |
|
156 *width: 22.50em; |
|
157 } |
|
158 .yui-cssgrids .yui-t3 .yui-main .yui-b { |
|
159 margin-left: 24.0769em; |
|
160 *margin-left: 23.475em; |
|
161 } |
|
162 /* t4 narrow block = right, equivalent of 180px */ |
|
163 .yui-cssgrids .yui-t4 .yui-b { |
|
164 float: right; |
|
165 width: 13.8456em; |
|
166 *width: 13.50em; |
|
167 } |
|
168 .yui-cssgrids .yui-t4 .yui-main .yui-b { |
|
169 margin-right: 14.8456em; |
|
170 *margin-right: 14.475em; |
|
171 } |
|
172 /* t5 narrow block = right, equivalent of 240px */ |
|
173 .yui-cssgrids .yui-t5 .yui-b { |
|
174 float: right; |
|
175 width: 18.4615em; |
|
176 *width: 18.00em; |
|
177 } |
|
178 .yui-cssgrids .yui-t5 .yui-main .yui-b { |
|
179 margin-right: 19.4615em; |
|
180 *margin-right: 18.975em; |
|
181 } |
|
182 /* t6 narrow block = equivalent of 300px */ |
|
183 .yui-cssgrids .yui-t6 .yui-b { |
|
184 float: right; |
|
185 width: 23.0769em; |
|
186 *width: 22.50em; |
|
187 } |
|
188 .yui-cssgrids .yui-t6 .yui-main .yui-b { |
|
189 margin-right: 24.0769em; |
|
190 *margin-right: 23.475em; |
|
191 } |
|
192 |
|
193 .yui-cssgrids .yui-main .yui-b { |
|
194 float: none; |
|
195 width: auto; |
|
196 } |
|
197 |
|
198 /* |
|
199 Section: Grids and Nesting Grids |
|
200 */ |
|
201 |
|
202 /* |
|
203 Subsection: Children generally take half the available space |
|
204 */ |
|
205 |
|
206 .yui-cssgrids .yui-gb .yui-u, |
|
207 .yui-cssgrids .yui-g .yui-gb .yui-u, |
|
208 .yui-cssgrids .yui-gb .yui-g, |
|
209 .yui-cssgrids .yui-gb .yui-gb, |
|
210 .yui-cssgrids .yui-gb .yui-gc, |
|
211 .yui-cssgrids .yui-gb .yui-gd, |
|
212 .yui-cssgrids .yui-gb .yui-ge, |
|
213 .yui-cssgrids .yui-gb .yui-gf, |
|
214 .yui-cssgrids .yui-gc .yui-u, |
|
215 .yui-cssgrids .yui-gc .yui-g, |
|
216 .yui-cssgrids .yui-gd .yui-u { |
|
217 float: left; |
|
218 } |
|
219 |
|
220 /*Float units (and sub grids) to the right */ |
|
221 .yui-cssgrids .yui-g .yui-u, |
|
222 .yui-cssgrids .yui-g .yui-g, |
|
223 .yui-cssgrids .yui-g .yui-gb, |
|
224 .yui-cssgrids .yui-g .yui-gc, |
|
225 .yui-cssgrids .yui-g .yui-gd, |
|
226 .yui-cssgrids .yui-g .yui-ge, |
|
227 .yui-cssgrids .yui-g .yui-gf, |
|
228 .yui-cssgrids .yui-gc .yui-u, |
|
229 .yui-cssgrids .yui-gd .yui-g, |
|
230 .yui-cssgrids .yui-g .yui-gc .yui-u, |
|
231 .yui-cssgrids .yui-ge .yui-u, |
|
232 .yui-cssgrids .yui-ge .yui-g, |
|
233 .yui-cssgrids .yui-gf .yui-g, |
|
234 .yui-cssgrids .yui-gf .yui-u { |
|
235 float: right; |
|
236 } |
|
237 |
|
238 /*Float units (and sub grids) to the left */ |
|
239 .yui-cssgrids .yui-g div.first, |
|
240 .yui-cssgrids .yui-gb div.first, |
|
241 .yui-cssgrids .yui-gc div.first, |
|
242 .yui-cssgrids .yui-gd div.first, |
|
243 .yui-cssgrids .yui-ge div.first, |
|
244 .yui-cssgrids .yui-gf div.first, |
|
245 .yui-cssgrids .yui-g .yui-gc div.first, |
|
246 .yui-cssgrids .yui-g .yui-ge div.first, |
|
247 .yui-cssgrids .yui-gc div.first div.first { |
|
248 float: left; |
|
249 } |
|
250 |
|
251 .yui-cssgrids .yui-g .yui-u, |
|
252 .yui-cssgrids .yui-g .yui-g, |
|
253 .yui-cssgrids .yui-g .yui-gb, |
|
254 .yui-cssgrids .yui-g .yui-gc, |
|
255 .yui-cssgrids .yui-g .yui-gd, |
|
256 .yui-cssgrids .yui-g .yui-ge, |
|
257 .yui-cssgrids .yui-g .yui-gf { |
|
258 width: 49.1%; |
|
259 } |
|
260 |
|
261 .yui-cssgrids .yui-gb .yui-u, |
|
262 .yui-cssgrids .yui-g .yui-gb .yui-u, |
|
263 .yui-cssgrids .yui-gb .yui-g, |
|
264 .yui-cssgrids .yui-gb .yui-gb, |
|
265 .yui-cssgrids .yui-gb .yui-gc, |
|
266 .yui-cssgrids .yui-gb .yui-gd, |
|
267 .yui-cssgrids .yui-gb .yui-ge, |
|
268 .yui-cssgrids .yui-gb .yui-gf, |
|
269 .yui-cssgrids .yui-gc .yui-u, |
|
270 .yui-cssgrids .yui-gc .yui-g, |
|
271 .yui-cssgrids .yui-gd .yui-u { |
|
272 width: 32%; |
|
273 margin-left: 2.0%; |
|
274 } |
|
275 |
|
276 /* Give IE some extra breathing room for 1/3-based rounding issues */ |
|
277 .yui-cssgrids .yui-gb .yui-u { |
|
278 *width: 31.8%; |
|
279 *margin-left: 1.9%; |
|
280 } |
|
281 |
|
282 .yui-cssgrids .yui-gc div.first, |
|
283 .yui-cssgrids .yui-gd .yui-u { |
|
284 width: 66%; |
|
285 _width: 65.7%; |
|
286 } |
|
287 .yui-cssgrids .yui-gd div.first { |
|
288 width: 32%; |
|
289 _width: 31.5%; |
|
290 } |
|
291 |
|
292 .yui-cssgrids .yui-ge div.first, |
|
293 .yui-cssgrids .yui-gf .yui-u { |
|
294 width: 74.2%; |
|
295 _width: 74%; |
|
296 } |
|
297 |
|
298 .yui-cssgrids .yui-ge .yui-u, |
|
299 .yui-cssgrids .yui-gf div.first { |
|
300 width: 24%; |
|
301 _width: 23.8%; |
|
302 } |
|
303 |
|
304 .yui-cssgrids .yui-g .yui-gb div.first, |
|
305 .yui-cssgrids .yui-gb div.first, |
|
306 .yui-cssgrids .yui-gc div.first, |
|
307 .yui-cssgrids .yui-gd div.first { |
|
308 margin-left: 0; |
|
309 } |
|
310 |
|
311 /* |
|
312 Section: Deep Nesting |
|
313 */ |
|
314 .yui-cssgrids .yui-g .yui-g .yui-u, |
|
315 .yui-cssgrids .yui-gb .yui-g .yui-u, |
|
316 .yui-cssgrids .yui-gc .yui-g .yui-u, |
|
317 .yui-cssgrids .yui-gd .yui-g .yui-u, |
|
318 .yui-cssgrids .yui-ge .yui-g .yui-u, |
|
319 .yui-cssgrids .yui-gf .yui-g .yui-u { |
|
320 width: 49%; |
|
321 *width: 48.1%; |
|
322 *margin-left: 0; |
|
323 } |
|
324 |
|
325 .yui-cssgrids .yui-g .yui-gb div.first, |
|
326 .yui-cssgrids .yui-gb .yui-gb div.first { |
|
327 *margin-right: 0; |
|
328 *width: 32%; |
|
329 _width: 31.7%; |
|
330 } |
|
331 |
|
332 .yui-cssgrids .yui-g .yui-gc div.first, |
|
333 .yui-cssgrids .yui-gd .yui-g { |
|
334 width: 66%; |
|
335 } |
|
336 |
|
337 .yui-cssgrids .yui-gb .yui-g div.first { |
|
338 *margin-right: 4%; |
|
339 _margin-right: 1.3%; |
|
340 } |
|
341 |
|
342 .yui-cssgrids .yui-gb .yui-gc div.first, |
|
343 .yui-cssgrids .yui-gb .yui-gd div.first { |
|
344 *margin-right: 0; |
|
345 } |
|
346 |
|
347 .yui-cssgrids .yui-gb .yui-gb .yui-u, |
|
348 .yui-cssgrids .yui-gb .yui-gc .yui-u { |
|
349 *margin-left: 1.8%; |
|
350 _margin-left: 4%; |
|
351 } |
|
352 |
|
353 .yui-cssgrids .yui-g .yui-gb .yui-u { |
|
354 _margin-left: 1.0%; |
|
355 } |
|
356 |
|
357 .yui-cssgrids .yui-gb .yui-gd .yui-u { |
|
358 *width: 66%; |
|
359 _width: 61.2%; |
|
360 } |
|
361 .yui-cssgrids .yui-gb .yui-gd div.first { |
|
362 *width: 31%; |
|
363 _width: 29.5%; |
|
364 } |
|
365 |
|
366 .yui-cssgrids .yui-g .yui-gc .yui-u, |
|
367 .yui-cssgrids .yui-gb .yui-gc .yui-u { |
|
368 width: 32%; |
|
369 _float: right; |
|
370 margin-right: 0; |
|
371 _margin-left: 0; |
|
372 } |
|
373 .yui-cssgrids .yui-gb .yui-gc div.first { |
|
374 width: 66%; |
|
375 *float: left; |
|
376 *margin-left: 0; |
|
377 } |
|
378 |
|
379 .yui-cssgrids .yui-gb .yui-ge .yui-u, |
|
380 .yui-cssgrids .yui-gb .yui-gf .yui-u { |
|
381 margin: 0; |
|
382 } |
|
383 |
|
384 .yui-cssgrids .yui-gb .yui-gb .yui-u { |
|
385 _margin-left: .7%; |
|
386 } |
|
387 |
|
388 .yui-cssgrids .yui-gb .yui-g div.first, |
|
389 .yui-cssgrids .yui-gb .yui-gb div.first { |
|
390 *margin-left:0; |
|
391 } |
|
392 |
|
393 .yui-cssgrids .yui-gc .yui-g .yui-u, |
|
394 .yui-cssgrids .yui-gd .yui-g .yui-u { |
|
395 *width: 48.1%; |
|
396 *margin-left: 0; |
|
397 } |
|
398 |
|
399 .yui-cssgrids .yui-gb .yui-gd div.first { |
|
400 width: 32%; |
|
401 } |
|
402 .yui-cssgrids .yui-g .yui-gd div.first { |
|
403 _width: 29.9%; |
|
404 } |
|
405 |
|
406 .yui-cssgrids .yui-ge .yui-g { |
|
407 width: 24%; |
|
408 } |
|
409 .yui-cssgrids .yui-gf .yui-g { |
|
410 width: 74.2%; |
|
411 } |
|
412 |
|
413 .yui-cssgrids .yui-gb .yui-ge div.yui-u, |
|
414 .yui-cssgrids .yui-gb .yui-gf div.yui-u { |
|
415 float: right; |
|
416 } |
|
417 .yui-cssgrids .yui-gb .yui-ge div.first, |
|
418 .yui-cssgrids .yui-gb .yui-gf div.first { |
|
419 float: left; |
|
420 } |
|
421 |
|
422 /* Width Accommodation for Nested Contexts */ |
|
423 .yui-cssgrids .yui-gb .yui-ge .yui-u, |
|
424 .yui-cssgrids .yui-gb .yui-gf div.first { |
|
425 *width: 24%; |
|
426 _width: 20%; |
|
427 } |
|
428 |
|
429 /* Width Accommodation for Nested Contexts */ |
|
430 |
|
431 .yui-cssgrids .yui-gc .yui-gf .yui-u { |
|
432 width: 74%; |
|
433 _width: 73%; |
|
434 } |
|
435 |
|
436 .yui-cssgrids .yui-gc .yui-gf div.first { |
|
437 width: 24%; |
|
438 } |
|
439 |
|
440 .yui-cssgrids .yui-gb .yui-ge div.first, |
|
441 .yui-cssgrids .yui-gb .yui-gf .yui-u { |
|
442 *width: 73.5%; |
|
443 _width: 65.5%; |
|
444 } |
|
445 |
|
446 /* Patch for GD within GE */ |
|
447 .yui-cssgrids .yui-ge div.first .yui-gd .yui-u { |
|
448 width: 65%; |
|
449 } |
|
450 .yui-cssgrids .yui-ge div.first .yui-gd div.first { |
|
451 width: 32%; |
|
452 } |
|
453 |
|
454 /* |
|
455 Section: Clearing. zoom for IE, :after for others |
|
456 */ |
|
457 |
|
458 .yui-cssgrids #bd:after, |
|
459 .yui-cssgrids .yui-g:after, |
|
460 .yui-cssgrids .yui-gb:after, |
|
461 .yui-cssgrids .yui-gc:after, |
|
462 .yui-cssgrids .yui-gd:after, |
|
463 .yui-cssgrids .yui-ge:after, |
|
464 .yui-cssgrids .yui-gf:after, |
|
465 .yui-cssgrids .yui-t1:after, |
|
466 .yui-cssgrids .yui-t2:after, |
|
467 .yui-cssgrids .yui-t3:after, |
|
468 .yui-cssgrids .yui-t4:after, |
|
469 .yui-cssgrids .yui-t5:after, |
|
470 .yui-cssgrids .yui-t6:after { |
|
471 content: "."; |
|
472 display: block; |
|
473 height: 0; |
|
474 clear: both; |
|
475 visibility: hidden; |
|
476 } |
|
477 .yui-cssgrids #bd, |
|
478 .yui-cssgrids .yui-g, |
|
479 .yui-cssgrids .yui-gb, |
|
480 .yui-cssgrids .yui-gc, |
|
481 .yui-cssgrids .yui-gd, |
|
482 .yui-cssgrids .yui-ge, |
|
483 .yui-cssgrids .yui-gf, |
|
484 .yui-cssgrids .yui-t1, |
|
485 .yui-cssgrids .yui-t2, |
|
486 .yui-cssgrids .yui-t3, |
|
487 .yui-cssgrids .yui-t4, |
|
488 .yui-cssgrids .yui-t5, |
|
489 .yui-cssgrids .yui-t6 { |
|
490 zoom: 1; |
|
491 } |