2
2
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
3
3
Code licensed under the BSD License:
4
4
http://developer.yahoo.net/yui/license.txt
8
TODO README: removed yui-t7
13
* The YUI CSS Foundation uses the *property and _property CSS filter
14
* techniques to shield a value from A-grade browsers [1] other than
15
* IE6 & IE7 (*property) and IE6 (_property)
23
Section: General Rules
30
margin-left:auto;margin-right:auto;
34
TODO - not sure I need this if the BD is already clearing.
40
Section: Page Width Rules (#doc, #doc2, #doc3, #doc4)
47
.yui-grids .yui-d0, /* 100% */
48
.yui-grids .yui-d1, /* 750px */
49
.yui-grids .yui-d2, /* 950px */
50
.yui-grids .yui-d3, /* 974px */
56
.yui-t6 /* the Ts are here to collect margin and text-alignment rules */{
59
width:57.69em;*width:56.25em; /* doc1*/
71
Subsection: 100% (doc)
74
/* Left and Right margins are not a structural part of Grids. Without them Grids
75
works fine, but content bleeds to the very edge of the document, which often
76
impairs readability and usability. They are
77
provided because they prevent the content from "bleeding" into the browser's chrome.*/
83
.yui-grids .yui-d0f {width:100%;}
85
Subsection: 950 Centered (doc2)
87
.yui-grids .yui-d2 {width:73.076em;*width:71.25em;}
88
.yui-grids .yui-d2f {width:950px;}
93
Subsection: 974 Centered (doc3)
95
.yui-grids .yui-d3 {width:74.923em;*width:73.05em;}
96
.yui-grids .yui-d3f {width:974px;}
99
Section: Preset Template Rules (.yui-t[1-6])
106
/* to preserve source-order independence for Gecko without breaking */
107
.yui-b{position:relative;}
108
.yui-b{_position:static;}
109
.yui-main .yui-b{position:static;}
111
.yui-main {width:100%;}
115
.yui-t3 .yui-main{float:right;margin-left:-25em;/* IE: preserve layout at narrow widths */}
119
.yui-t6 .yui-main{float:left;margin-right:-25em;/* IE: preserve layout at narrow widths */}
122
Subsection: For Specific Template Presets
126
* Nudge down to get to 13px equivalent for these form elements
130
TODO Create t1-6's that are based on fixed widths
132
.yui-t1 .yui-b {float:left;width:12.30769em;*width:12.00em;}
133
.yui-t1 .yui-main .yui-b{margin-left:13.30769em;*margin-left:12.975em;}
135
.yui-t2 .yui-b {float:left;width:13.84615em;*width:13.50em;}
136
.yui-t2 .yui-main .yui-b {margin-left:14.84615em;*margin-left:14.475em;}
138
.yui-t3 .yui-b {float:left;width:23.0769em;*width:22.50em;}
139
.yui-t3 .yui-main .yui-b {margin-left:24.0769em;*margin-left:23.475em;}
141
.yui-t4 .yui-b {float:right;width:13.8456em;*width:13.50em;}
142
.yui-t4 .yui-main .yui-b {margin-right:14.8456em;*margin-right:14.475em;}
144
.yui-t5 .yui-b {float:right;width:18.4615em;*width:18.00em;}
145
.yui-t5 .yui-main .yui-b {margin-right:19.4615em;*margin-right:18.975em;}
147
.yui-t6 .yui-b {float:right;width:23.0769em;*width:22.50em;}
148
.yui-t6 .yui-main .yui-b {margin-right:24.0769em;*margin-right:23.475em;}
150
.yui-t7 .yui-main .yui-b {display:block;margin:0 0 1em 0;}
152
.yui-main .yui-b {float:none;width:auto;}
155
Section: Grids and Nesting Grids
159
Subsection: Children generally take half the available space
163
.yui-g .yui-gb .yui-u,
172
.yui-gd .yui-u {float:right;}
174
/*Float units (and sub grids) to the right */
184
.yui-g .yui-gc .yui-u,
188
.yui-gf .yui-u{float:right;}
190
/*Float units (and sub grids) to the left */
197
.yui-g .yui-gc div.first,
198
.yui-g .yui-ge div.first,
199
.yui-gc div.first div.first {float:left;}
207
.yui-g .yui-gf {width:49.1%;}
210
.yui-g .yui-gb .yui-u,
219
.yui-gd .yui-u {width:32%;margin-left:2.0%;}
221
/* Give IE some extra breathing room for 1/3-based rounding issues */
222
.yui-gb .yui-u {*width:31.8%;*margin-left:1.9%;}
225
.yui-gd .yui-u {width:66%;_width:65.7%;}
226
.yui-gd div.first {width:32%;_width:31.5%;}
229
.yui-gf .yui-u{width:74.2%;_width:74%;}
232
.yui-gf div.first {width:24%;_width:23.8%;}
234
.yui-g .yui-gb div.first,
237
.yui-gd div.first {margin-left:0;}
240
Section: Deep Nesting
242
.yui-g .yui-g .yui-u,
243
.yui-gb .yui-g .yui-u,
244
.yui-gc .yui-g .yui-u,
245
.yui-gd .yui-g .yui-u,
246
.yui-ge .yui-g .yui-u,
247
.yui-gf .yui-g .yui-u {width:49%;*width:48.1%;*margin-left:0;}
249
.yui-g .yui-gb div.first,
250
.yui-gb .yui-gb div.first {*margin-right:0;*width:32%;_width:31.7%;}
252
.yui-g .yui-gc div.first,
253
.yui-gd .yui-g {width:66%;}
255
.yui-gb .yui-g div.first {*margin-right:4%;_margin-right:1.3%;}
257
.yui-gb .yui-gc div.first,
258
.yui-gb .yui-gd div.first {*margin-right:0;}
260
.yui-gb .yui-gb .yui-u,
261
.yui-gb .yui-gc .yui-u {*margin-left:1.8%;_margin-left:4%;}
263
.yui-g .yui-gb .yui-u {_margin-left:1.0%;}
265
.yui-gb .yui-gd .yui-u {*width:66%;_width:61.2%;}
266
.yui-gb .yui-gd div.first {*width:31%;_width:29.5%;}
268
.yui-g .yui-gc .yui-u,
269
.yui-gb .yui-gc .yui-u {width:32%;_float:right;margin-right:0;_margin-left:0;}
270
.yui-gb .yui-gc div.first {width:66%;*float:left;*margin-left:0;}
272
.yui-gb .yui-ge .yui-u,
273
.yui-gb .yui-gf .yui-u {margin:0;}
275
.yui-gb .yui-gb .yui-u {_margin-left:.7%;}
277
.yui-gb .yui-g div.first,
278
.yui-gb .yui-gb div.first {*margin-left:0;}
280
.yui-gc .yui-g .yui-u,
281
.yui-gd .yui-g .yui-u {*width:48.1%;*margin-left:0;}
283
.yui-gb .yui-gd div.first {width:32%;}
284
.yui-g .yui-gd div.first {_width:29.9%;}
286
.yui-ge .yui-g {width:24%;}
287
.yui-gf .yui-g {width:74.2%;}
289
.yui-gb .yui-ge div.yui-u,
290
.yui-gb .yui-gf div.yui-u {float:right;}
291
.yui-gb .yui-ge div.first,
292
.yui-gb .yui-gf div.first {float:left;}
294
/* Width Accommodation for Nested Contexts */
295
.yui-gb .yui-ge .yui-u,
296
.yui-gb .yui-gf div.first {*width:24%;_width:20%;}
298
/* Width Accommodation for Nested Contexts */
299
.yui-gb .yui-ge div.first,
300
.yui-gb .yui-gf .yui-u{*width:73.5%;_width:65.5%;}
302
/* Patch for GD within GE */
303
.yui-ge div.first .yui-gd .yui-u {width:65%;}
304
.yui-ge div.first .yui-gd div.first {width:32%;}
316
.yui-gf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
7
.yui-cssgrids body{text-align:center;margin-left:auto;margin-right:auto;}.yui-cssgrids .yui-d0,.yui-cssgrids .yui-d1,.yui-cssgrids .yui-d1f,.yui-cssgrids .yui-d2,.yui-cssgrids .yui-d2f,.yui-cssgrids .yui-d3,.yui-cssgrids .yui-d3f{margin:auto;text-align:left;width:57.69em;*width:56.25em;}.yui-cssgrids .yui-t1,.yui-cssgrids .yui-t2,.yui-cssgrids .yui-t3,.yui-cssgrids .yui-t4,.yui-cssgrids .yui-t5,.yui-cssgrids .yui-t6{margin:auto;text-align:left;width:100%;}.yui-cssgrids .yui-d0{margin:auto 10px;width:auto;}.yui-cssgrids .yui-d0f{width:100%;}.yui-cssgrids .yui-d2{width:73.076em;*width:71.25em;}.yui-cssgrids .yui-d2f{width:950px;}.yui-cssgrids .yui-d3{width:74.923em;*width:73.05em;}.yui-cssgrids .yui-d3f{width:974px;}.yui-cssgrids .yui-b{position:relative;}.yui-cssgrids .yui-b{_position:static;}.yui-cssgrids .yui-main .yui-b{position:static;}.yui-cssgrids .yui-main{width:100%;}.yui-cssgrids .yui-t1 .yui-main,.yui-cssgrids .yui-t2 .yui-main,.yui-cssgrids .yui-t3 .yui-main{float:right;margin-left:-25em;}.yui-cssgrids .yui-t4 .yui-main,.yui-cssgrids .yui-t5 .yui-main,.yui-cssgrids .yui-t6 .yui-main{float:left;margin-right:-25em;}.yui-cssgrids .yui-t1 .yui-b{float:left;width:12.30769em;*width:12.00em;}.yui-cssgrids .yui-t1 .yui-main .yui-b{margin-left:13.30769em;*margin-left:12.975em;}.yui-cssgrids .yui-t2 .yui-b{float:left;width:13.84615em;*width:13.50em;}.yui-cssgrids .yui-t2 .yui-main .yui-b{margin-left:14.84615em;*margin-left:14.475em;}.yui-cssgrids .yui-t3 .yui-b{float:left;width:23.0769em;*width:22.50em;}.yui-cssgrids .yui-t3 .yui-main .yui-b{margin-left:24.0769em;*margin-left:23.475em;}.yui-cssgrids .yui-t4 .yui-b{float:right;width:13.8456em;*width:13.50em;}.yui-cssgrids .yui-t4 .yui-main .yui-b{margin-right:14.8456em;*margin-right:14.475em;}.yui-cssgrids .yui-t5 .yui-b{float:right;width:18.4615em;*width:18.00em;}.yui-cssgrids .yui-t5 .yui-main .yui-b{margin-right:19.4615em;*margin-right:18.975em;}.yui-cssgrids .yui-t6 .yui-b{float:right;width:23.0769em;*width:22.50em;}.yui-cssgrids .yui-t6 .yui-main .yui-b{margin-right:24.0769em;*margin-right:23.475em;}.yui-cssgrids .yui-main .yui-b{float:none;width:auto;}.yui-cssgrids .yui-gb .yui-u,.yui-cssgrids .yui-g .yui-gb .yui-u,.yui-cssgrids .yui-gb .yui-g,.yui-cssgrids .yui-gb .yui-gb,.yui-cssgrids .yui-gb .yui-gc,.yui-cssgrids .yui-gb .yui-gd,.yui-cssgrids .yui-gb .yui-ge,.yui-cssgrids .yui-gb .yui-gf,.yui-cssgrids .yui-gc .yui-u,.yui-cssgrids .yui-gc .yui-g,.yui-cssgrids .yui-gd .yui-u{float:left;}.yui-cssgrids .yui-g .yui-u,.yui-cssgrids .yui-g .yui-g,.yui-cssgrids .yui-g .yui-gb,.yui-cssgrids .yui-g .yui-gc,.yui-cssgrids .yui-g .yui-gd,.yui-cssgrids .yui-g .yui-ge,.yui-cssgrids .yui-g .yui-gf,.yui-cssgrids .yui-gc .yui-u,.yui-cssgrids .yui-gd .yui-g,.yui-cssgrids .yui-g .yui-gc .yui-u,.yui-cssgrids .yui-ge .yui-u,.yui-cssgrids .yui-ge .yui-g,.yui-cssgrids .yui-gf .yui-g,.yui-cssgrids .yui-gf .yui-u{float:right;}.yui-cssgrids .yui-g div.first,.yui-cssgrids .yui-gb div.first,.yui-cssgrids .yui-gc div.first,.yui-cssgrids .yui-gd div.first,.yui-cssgrids .yui-ge div.first,.yui-cssgrids .yui-gf div.first,.yui-cssgrids .yui-g .yui-gc div.first,.yui-cssgrids .yui-g .yui-ge div.first,.yui-cssgrids .yui-gc div.first div.first{float:left;}.yui-cssgrids .yui-g .yui-u,.yui-cssgrids .yui-g .yui-g,.yui-cssgrids .yui-g .yui-gb,.yui-cssgrids .yui-g .yui-gc,.yui-cssgrids .yui-g .yui-gd,.yui-cssgrids .yui-g .yui-ge,.yui-cssgrids .yui-g .yui-gf{width:49.1%;}.yui-cssgrids .yui-gb .yui-u,.yui-cssgrids .yui-g .yui-gb .yui-u,.yui-cssgrids .yui-gb .yui-g,.yui-cssgrids .yui-gb .yui-gb,.yui-cssgrids .yui-gb .yui-gc,.yui-cssgrids .yui-gb .yui-gd,.yui-cssgrids .yui-gb .yui-ge,.yui-cssgrids .yui-gb .yui-gf,.yui-cssgrids .yui-gc .yui-u,.yui-cssgrids .yui-gc .yui-g,.yui-cssgrids .yui-gd .yui-u{width:32%;margin-left:2.0%;}.yui-cssgrids .yui-gb .yui-u{*width:31.8%;*margin-left:1.9%;}.yui-cssgrids .yui-gc div.first,.yui-cssgrids .yui-gd .yui-u{width:66%;_width:65.7%;}.yui-cssgrids .yui-gd div.first{width:32%;_width:31.5%;}.yui-cssgrids .yui-ge div.first,.yui-cssgrids .yui-gf .yui-u{width:74.2%;_width:74%;}.yui-cssgrids .yui-ge .yui-u,.yui-cssgrids .yui-gf div.first{width:24%;_width:23.8%;}.yui-cssgrids .yui-g .yui-gb div.first,.yui-cssgrids .yui-gb div.first,.yui-cssgrids .yui-gc div.first,.yui-cssgrids .yui-gd div.first{margin-left:0;}.yui-cssgrids .yui-g .yui-g .yui-u,.yui-cssgrids .yui-gb .yui-g .yui-u,.yui-cssgrids .yui-gc .yui-g .yui-u,.yui-cssgrids .yui-gd .yui-g .yui-u,.yui-cssgrids .yui-ge .yui-g .yui-u,.yui-cssgrids .yui-gf .yui-g .yui-u{width:49%;*width:48.1%;*margin-left:0;}.yui-cssgrids .yui-g .yui-gb div.first,.yui-cssgrids .yui-gb .yui-gb div.first{*margin-right:0;*width:32%;_width:31.7%;}.yui-cssgrids .yui-g .yui-gc div.first,.yui-cssgrids .yui-gd .yui-g{width:66%;}.yui-cssgrids .yui-gb .yui-g div.first{*margin-right:4%;_margin-right:1.3%;}.yui-cssgrids .yui-gb .yui-gc div.first,.yui-cssgrids .yui-gb .yui-gd div.first{*margin-right:0;}.yui-cssgrids .yui-gb .yui-gb .yui-u,.yui-cssgrids .yui-gb .yui-gc .yui-u{*margin-left:1.8%;_margin-left:4%;}.yui-cssgrids .yui-g .yui-gb .yui-u{_margin-left:1.0%;}.yui-cssgrids .yui-gb .yui-gd .yui-u{*width:66%;_width:61.2%;}.yui-cssgrids .yui-gb .yui-gd div.first{*width:31%;_width:29.5%;}.yui-cssgrids .yui-g .yui-gc .yui-u,.yui-cssgrids .yui-gb .yui-gc .yui-u{width:32%;_float:right;margin-right:0;_margin-left:0;}.yui-cssgrids .yui-gb .yui-gc div.first{width:66%;*float:left;*margin-left:0;}.yui-cssgrids .yui-gb .yui-ge .yui-u,.yui-cssgrids .yui-gb .yui-gf .yui-u{margin:0;}.yui-cssgrids .yui-gb .yui-gb .yui-u{_margin-left:.7%;}.yui-cssgrids .yui-gb .yui-g div.first,.yui-cssgrids .yui-gb .yui-gb div.first{*margin-left:0;}.yui-cssgrids .yui-gc .yui-g .yui-u,.yui-cssgrids .yui-gd .yui-g .yui-u{*width:48.1%;*margin-left:0;}.yui-cssgrids .yui-gb .yui-gd div.first{width:32%;}.yui-cssgrids .yui-g .yui-gd div.first{_width:29.9%;}.yui-cssgrids .yui-ge .yui-g{width:24%;}.yui-cssgrids .yui-gf .yui-g{width:74.2%;}.yui-cssgrids .yui-gb .yui-ge div.yui-u,.yui-cssgrids .yui-gb .yui-gf div.yui-u{float:right;}.yui-cssgrids .yui-gb .yui-ge div.first,.yui-cssgrids .yui-gb .yui-gf div.first{float:left;}.yui-cssgrids .yui-gb .yui-ge .yui-u,.yui-cssgrids .yui-gb .yui-gf div.first{*width:24%;_width:20%;}.yui-cssgrids .yui-gc .yui-gf .yui-u{width:74%;_width:73%;}.yui-cssgrids .yui-gc .yui-gf div.first{width:24%;}.yui-cssgrids .yui-gb .yui-ge div.first,.yui-cssgrids .yui-gb .yui-gf .yui-u{*width:73.5%;_width:65.5%;}.yui-cssgrids .yui-ge div.first .yui-gd .yui-u{width:65%;}.yui-cssgrids .yui-ge div.first .yui-gd div.first{width:32%;}.yui-cssgrids #bd:after,.yui-cssgrids .yui-g:after,.yui-cssgrids .yui-gb:after,.yui-cssgrids .yui-gc:after,.yui-cssgrids .yui-gd:after,.yui-cssgrids .yui-ge:after,.yui-cssgrids .yui-gf:after,.yui-cssgrids .yui-t1:after,.yui-cssgrids .yui-t2:after,.yui-cssgrids .yui-t3:after,.yui-cssgrids .yui-t4:after,.yui-cssgrids .yui-t5:after,.yui-cssgrids .yui-t6:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.yui-cssgrids #bd,.yui-cssgrids .yui-g,.yui-cssgrids .yui-gb,.yui-cssgrids .yui-gc,.yui-cssgrids .yui-gd,.yui-cssgrids .yui-ge,.yui-cssgrids .yui-gf,.yui-cssgrids .yui-t1,.yui-cssgrids .yui-t2,.yui-cssgrids .yui-t3,.yui-cssgrids .yui-t4,.yui-cssgrids .yui-t5,.yui-cssgrids .yui-t6{zoom:1;}
b'\\ No newline at end of file'