grids.css
467 lines
| 7.0 KiB
| text/css
|
CssLexer
r547 | /* | |||
r1073 | Copyright (c) 2010, Yahoo! Inc. All rights reserved. | |||
r547 | Code licensed under the BSD License: | |||
r1073 | http://developer.yahoo.com/yui/license.html | |||
version: 2.8.2r1 | ||||
r547 | */ | |||
/** | ||||
* YUI Grids | ||||
* @module grids | ||||
* @namespace yui- | ||||
* @requires reset, fonts | ||||
*/ | ||||
/** | ||||
* Note: Throughout this file, the *property (star-property) filter is used | ||||
* to give a value to IE that other browsers do not see. _property is only seen | ||||
* by IE7, so the combo of *prop and _prop can target between IE6 and IE7. | ||||
* | ||||
* More information on these filters and related validation errors: | ||||
* http://tech.groups.yahoo.com/group/ydn-javascript/message/40059 | ||||
*/ | ||||
/** | ||||
* Section: General Rules | ||||
*/ | ||||
body { | ||||
text-align: center; | ||||
} | ||||
/** | ||||
* Section: Page Width Rules (#doc, #doc2, #doc3, #doc4) | ||||
*/ | ||||
#doc,#doc2,#doc3,#doc4, | ||||
.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7 { | ||||
margin: auto; | ||||
text-align: left; | ||||
width: 57.69em; | ||||
*width: 56.25em; | ||||
} | ||||
/* 950 Centered (doc2) */ | ||||
#doc2 { | ||||
width: 73.076em; | ||||
*width: 71.25em; | ||||
} | ||||
/* 100% (doc3) */ | ||||
#doc3 { | ||||
/** | ||||
* Left and Right margins are not a structural part of Grids. Without them | ||||
* Grids works fine, but content bleeds to the very edge of the document, which | ||||
* often impairs readability and usability. They are provided because they | ||||
* prevent the content from "bleeding" into the browser's chrome. | ||||
*/ | ||||
margin: auto 10px; | ||||
width: auto; | ||||
} | ||||
/* 974 Centered (doc4) */ | ||||
#doc4 { | ||||
width: 74.923em; | ||||
*width: 73.05em; | ||||
} | ||||
/** | ||||
* Section: Preset Template Rules (.yui-t[1-6]) | ||||
*/ | ||||
.yui-b { | ||||
/* to preserve source-order independence for Gecko */ | ||||
position: relative; | ||||
} | ||||
.yui-b { | ||||
/* to preserve source-order independence for IE */ | ||||
_position: static; | ||||
} | ||||
#yui-main .yui-b { | ||||
/* to preserve source-order independence for Gecko */ | ||||
position: static; | ||||
} | ||||
#yui-main, | ||||
.yui-g .yui-u .yui-g { | ||||
width: 100%; | ||||
} | ||||
.yui-t1 #yui-main, | ||||
.yui-t2 #yui-main, | ||||
.yui-t3 #yui-main { | ||||
float: right; | ||||
/* IE: preserve layout at narrow widths */ | ||||
margin-left: -25em; | ||||
} | ||||
.yui-t4 #yui-main, | ||||
.yui-t5 #yui-main, | ||||
.yui-t6 #yui-main { | ||||
float: left; | ||||
/* IE: preserve layout at narrow widths */ | ||||
margin-right: -25em; | ||||
} | ||||
/** | ||||
* For Specific Template Presets | ||||
*/ | ||||
.yui-t1 .yui-b { | ||||
float: left; | ||||
width: 12.30769em; | ||||
*width: 12.00em; | ||||
} | ||||
.yui-t1 #yui-main .yui-b { | ||||
margin-left: 13.30769em; | ||||
*margin-left: 13.05em; | ||||
} | ||||
.yui-t2 .yui-b { | ||||
float: left; | ||||
width: 13.8461em; | ||||
*width: 13.50em; | ||||
} | ||||
.yui-t2 #yui-main .yui-b { | ||||
margin-left: 14.8461em; | ||||
*margin-left: 14.55em; | ||||
} | ||||
.yui-t3 .yui-b { | ||||
float: left; | ||||
width: 23.0769em; | ||||
*width: 22.50em; | ||||
} | ||||
.yui-t3 #yui-main .yui-b { | ||||
margin-left: 24.0769em; | ||||
*margin-left: 23.62em; | ||||
} | ||||
.yui-t4 .yui-b { | ||||
float: right; | ||||
width: 13.8456em; | ||||
*width: 13.50em; | ||||
} | ||||
.yui-t4 #yui-main .yui-b { | ||||
margin-right: 14.8456em; | ||||
*margin-right: 14.55em; | ||||
} | ||||
.yui-t5 .yui-b { | ||||
float: right; | ||||
width: 18.4615em; | ||||
*width: 18.00em; | ||||
} | ||||
.yui-t5 #yui-main .yui-b { | ||||
margin-right: 19.4615em; | ||||
*margin-right: 19.125em; | ||||
} | ||||
.yui-t6 .yui-b { | ||||
float: right; | ||||
width: 23.0769em; | ||||
*width: 22.50em; | ||||
} | ||||
.yui-t6 #yui-main .yui-b { | ||||
margin-right: 24.0769em; | ||||
*margin-right: 23.62em; | ||||
} | ||||
.yui-t7 #yui-main .yui-b { | ||||
display: block; | ||||
margin: 0 0 1em 0; | ||||
} | ||||
#yui-main .yui-b { | ||||
float: none; | ||||
width: auto; | ||||
} | ||||
/** | ||||
* Section: Grids and Nesting Grids | ||||
*/ | ||||
/* Children generally take half the available space */ | ||||
.yui-gb .yui-u, | ||||
.yui-g .yui-gb .yui-u, | ||||
.yui-gb .yui-g, | ||||
.yui-gb .yui-gb, | ||||
.yui-gb .yui-gc, | ||||
.yui-gb .yui-gd, | ||||
.yui-gb .yui-ge, | ||||
.yui-gb .yui-gf, | ||||
.yui-gc .yui-u, | ||||
.yui-gc .yui-g, | ||||
.yui-gd .yui-u { | ||||
float: left; | ||||
} | ||||
/* Float units (and sub grids) to the right */ | ||||
.yui-g .yui-u, | ||||
.yui-g .yui-g, | ||||
.yui-g .yui-gb, | ||||
.yui-g .yui-gc, | ||||
.yui-g .yui-gd, | ||||
.yui-g .yui-ge, | ||||
.yui-g .yui-gf, | ||||
.yui-gc .yui-u, | ||||
.yui-gd .yui-g, | ||||
.yui-g .yui-gc .yui-u, | ||||
.yui-ge .yui-u, | ||||
.yui-ge .yui-g, | ||||
.yui-gf .yui-g, | ||||
.yui-gf .yui-u { | ||||
float: right; | ||||
} | ||||
/*Float units (and sub grids) to the left */ | ||||
.yui-g div.first, | ||||
.yui-gb div.first, | ||||
.yui-gc div.first, | ||||
.yui-gd div.first, | ||||
.yui-ge div.first, | ||||
.yui-gf div.first, | ||||
.yui-g .yui-gc div.first, | ||||
.yui-g .yui-ge div.first, | ||||
.yui-gc div.first div.first { | ||||
float: left; | ||||
} | ||||
.yui-g .yui-u, | ||||
.yui-g .yui-g, | ||||
.yui-g .yui-gb, | ||||
.yui-g .yui-gc, | ||||
.yui-g .yui-gd, | ||||
.yui-g .yui-ge, | ||||
.yui-g .yui-gf { | ||||
width: 49.1%; | ||||
} | ||||
.yui-gb .yui-u, | ||||
.yui-g .yui-gb .yui-u, | ||||
.yui-gb .yui-g, | ||||
.yui-gb .yui-gb, | ||||
.yui-gb .yui-gc, | ||||
.yui-gb .yui-gd, | ||||
.yui-gb .yui-ge, | ||||
.yui-gb .yui-gf, | ||||
.yui-gc .yui-u, | ||||
.yui-gc .yui-g, | ||||
.yui-gd .yui-u { | ||||
width: 32%; | ||||
margin-left: 1.99%; | ||||
} | ||||
/* Give IE some extra breathing room for 1/3-based rounding issues */ | ||||
.yui-gb .yui-u { | ||||
*margin-left: 1.9%; | ||||
*width: 31.9%; | ||||
} | ||||
.yui-gc div.first, | ||||
.yui-gd .yui-u { | ||||
width: 66%; | ||||
} | ||||
.yui-gd div.first { | ||||
width: 32%; | ||||
} | ||||
.yui-ge div.first, | ||||
.yui-gf .yui-u { | ||||
width: 74.2%; | ||||
} | ||||
.yui-ge .yui-u, | ||||
.yui-gf div.first { | ||||
width: 24%; | ||||
} | ||||
.yui-g .yui-gb div.first, | ||||
.yui-gb div.first, | ||||
.yui-gc div.first, | ||||
.yui-gd div.first { | ||||
margin-left: 0; | ||||
} | ||||
/** | ||||
* Section: Deep Nesting | ||||
*/ | ||||
.yui-g .yui-g .yui-u, | ||||
.yui-gb .yui-g .yui-u, | ||||
.yui-gc .yui-g .yui-u, | ||||
.yui-gd .yui-g .yui-u, | ||||
.yui-ge .yui-g .yui-u, | ||||
.yui-gf .yui-g .yui-u { | ||||
width: 49%; | ||||
*width: 48.1%; | ||||
*margin-left: 0; | ||||
} | ||||
.yui-g .yui-g .yui-u { | ||||
width: 48.1%; | ||||
} | ||||
/*YUILibrary bug #1927599 from 1.14 to 2.6.0*/ | ||||
.yui-g .yui-gb div.first, | ||||
.yui-gb .yui-gb div.first { | ||||
*margin-right: 0; | ||||
*width: 32%; | ||||
_width: 31.7%; | ||||
} | ||||
.yui-g .yui-gc div.first, | ||||
.yui-gd .yui-g { | ||||
width: 66%; | ||||
} | ||||
.yui-gb .yui-g div.first { | ||||
*margin-right: 4%; | ||||
_margin-right: 1.3%; | ||||
} | ||||
.yui-gb .yui-gc div.first, | ||||
.yui-gb .yui-gd div.first { | ||||
*margin-right: 0; | ||||
} | ||||
.yui-gb .yui-gb .yui-u, | ||||
.yui-gb .yui-gc .yui-u { | ||||
*margin-left: 1.8%; | ||||
_margin-left: 4%; | ||||
} | ||||
.yui-g .yui-gb .yui-u { | ||||
_margin-left: 1.0%; | ||||
} | ||||
.yui-gb .yui-gd .yui-u { | ||||
*width: 66%; | ||||
_width: 61.2%; | ||||
} | ||||
.yui-gb .yui-gd div.first { | ||||
*width: 31%; | ||||
_width: 29.5%; | ||||
} | ||||
.yui-g .yui-gc .yui-u, | ||||
.yui-gb .yui-gc .yui-u { | ||||
width: 32%; | ||||
_float: right; | ||||
margin-right: 0; | ||||
_margin-left: 0; | ||||
} | ||||
.yui-gb .yui-gc div.first { | ||||
width: 66%; | ||||
*float: left; | ||||
*margin-left: 0; | ||||
} | ||||
.yui-gb .yui-ge .yui-u, | ||||
.yui-gb .yui-gf .yui-u { | ||||
margin: 0; | ||||
} | ||||
.yui-gb .yui-gb .yui-u { | ||||
_margin-left: .7%; | ||||
} | ||||
.yui-gb .yui-g div.first, | ||||
.yui-gb .yui-gb div.first { | ||||
*margin-left: 0; | ||||
} | ||||
.yui-gc .yui-g .yui-u, | ||||
.yui-gd .yui-g .yui-u { | ||||
*width: 48.1%; | ||||
*margin-left: 0; | ||||
} | ||||
.yui-gb .yui-gd div.first { | ||||
width: 32%; | ||||
} | ||||
.yui-g .yui-gd div.first { | ||||
_width: 29.9%; | ||||
} | ||||
.yui-ge .yui-g { | ||||
width: 24%; | ||||
} | ||||
.yui-gf .yui-g { | ||||
width: 74.2%; | ||||
} | ||||
.yui-gb .yui-ge div.yui-u, | ||||
.yui-gb .yui-gf div.yui-u { | ||||
float: right; | ||||
} | ||||
.yui-gb .yui-ge div.first, | ||||
.yui-gb .yui-gf div.first { | ||||
float: left; | ||||
} | ||||
/* Width Accommodation for Nested Contexts */ | ||||
.yui-gb .yui-ge .yui-u, | ||||
.yui-gb .yui-gf div.first { | ||||
*width: 24%; | ||||
_width: 20%; | ||||
} | ||||
/* Width Accommodation for Nested Contexts */ | ||||
.yui-gb .yui-ge div.first, | ||||
.yui-gb .yui-gf .yui-u { | ||||
*width: 73.5%; | ||||
_width: 65.5%; | ||||
} | ||||
/* Patch for GD within GE */ | ||||
.yui-ge div.first .yui-gd .yui-u { | ||||
width: 65%; | ||||
} | ||||
.yui-ge div.first .yui-gd div.first { | ||||
width: 32%; | ||||
} | ||||
/* @group Clearing */ | ||||
#hd:after, | ||||
#bd:after, | ||||
#ft:after, | ||||
.yui-g:after, | ||||
.yui-gb:after, | ||||
.yui-gc:after, | ||||
.yui-gd:after, | ||||
.yui-ge:after, | ||||
.yui-gf:after { | ||||
content: "."; | ||||
display: block; | ||||
height: 0; | ||||
clear: both; | ||||
visibility: hidden; | ||||
} | ||||
#hd, | ||||
#bd, | ||||
#ft, | ||||
.yui-g, | ||||
.yui-gb, | ||||
.yui-gc, | ||||
.yui-gd, | ||||
.yui-ge, | ||||
.yui-gf { | ||||
zoom: 1; | ||||
} | ||||