cssgrids/css/grids-context.css

	grids-context.css revision 2a02f264bb836c95aea74463d43526ebd34d99bd
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff/*
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff*
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff* The YUI CSS Foundation uses the *property and _property CSS filter
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff* techniques to shield a value from A-grade browsers [1] other than
70087e8ec944864eb9fbe6ac6a317141972726a9Luke Smith* IE6 & IE7 (*property) and IE6 (_property)
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff*
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff/
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff ConniffSection: General Rules
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff*/
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff.yui3-cssgrids body {
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff	/* center the page */
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff	text-align: center;
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff	margin-left: auto;
70087e8ec944864eb9fbe6ac6a317141972726a9Luke Smith	margin-right: auto;
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff}
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff/*
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff ConniffSection: Page Width Rules (#doc, #doc2, #doc3, #doc4)
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff*/
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff/*
70087e8ec944864eb9fbe6ac6a317141972726a9Luke SmithSubsection: General
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff*/
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff.yui3-cssgrids .yui3-d0, /* 100% */
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff.yui3-cssgrids .yui3-d1, /* 750px */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff.yui3-cssgrids .yui3-d1f, /* 750px fixed */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff.yui3-cssgrids .yui3-d2, /* 950px */
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff.yui3-cssgrids .yui3-d2f, /* 950px fixed */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff.yui3-cssgrids .yui3-d3, /* 974px */
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff.yui3-cssgrids .yui3-d3f { /* 974px fixed */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff	margin: auto;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff	text-align: left;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff	width: 57.69em;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff	*width: 56.25em; /* doc1*/
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff}
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff.yui3-cssgrids .yui3-t1,
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff.yui3-cssgrids .yui3-t2,
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff.yui3-cssgrids .yui3-t3,
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff.yui3-cssgrids .yui3-t4,
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff.yui3-cssgrids .yui3-t5,
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff.yui3-cssgrids .yui3-t6 {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff	margin: auto;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff	text-align: left;
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff	width: 100%;
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff}
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff
eeefbdad0b1d6614c497d69b0087c3a6bc5061b3Jeff Conniff/*
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff ConniffSubsection: 100% (doc)
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff*/
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff.yui3-cssgrids .yui3-d0 {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff	/* Left and Right margins are not a structural part of Grids. Without them Grids
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff	works fine, but content bleeds to the very edge of the document, which often
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff	impairs readability and usability. They are
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff	provided because they prevent the content from "bleeding" into the browser's chrome.*/
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff	margin: auto 10px;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff	width: auto;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff}
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff.yui3-cssgrids .yui3-d0f {
41a8874f3c14857a5a311a43eaf30a123f376771Jeff Conniff	width: 100%;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff}
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff/*
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff ConniffSubsection: 950 Centered (doc2)
41a8874f3c14857a5a311a43eaf30a123f376771Jeff Conniff*/
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff.yui3-cssgrids .yui3-d2 {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff	width: 73.076em;
70087e8ec944864eb9fbe6ac6a317141972726a9Luke Smith	*width: 71.25em;
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff}
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff.yui3-cssgrids .yui3-d2f {
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff	width: 950px;
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff}
41a8874f3c14857a5a311a43eaf30a123f376771Jeff Conniff/*
41a8874f3c14857a5a311a43eaf30a123f376771Jeff ConniffSubsection: 974 Centered (doc3)
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff*/
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff.yui3-cssgrids .yui3-d3 {
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff	width: 74.923em;
	*width: 73.05em;
}
.yui3-cssgrids .yui3-d3f {
	width: 974px;
}
/*
Section: Preset Template Rules (.yui3-t[1-6])
*/
/*
Subsection: General
*/

/* to preserve source-order independence for Gecko without breaking IE */
.yui3-cssgrids .yui3-b {
	position: relative;
}
.yui3-cssgrids .yui3-b {
	_position: static;
}
.yui3-cssgrids .yui3-main .yui3-b {
	position: static;
}
.yui3-cssgrids .yui3-main {
	width: 100%;
}
.yui3-cssgrids .yui3-t1 .yui3-main,
.yui3-cssgrids .yui3-t2 .yui3-main,
.yui3-cssgrids .yui3-t3 .yui3-main {
	float: right;
	/* IE: preserve layout at narrow widths */
	margin-left: -25em;
}
.yui3-cssgrids .yui3-t4 .yui3-main,
.yui3-cssgrids .yui3-t5 .yui3-main,
.yui3-cssgrids .yui3-t6 .yui3-main {
	float: left;
	/* IE: preserve layout at narrow widths */
	margin-right: -25em;
}

/* Subsection: For Specific Template Presets */

/**
* Nudge down to get to 13px equivalent for these form elements
*/

/*
TODO Create t1-6's that are based on fixed widths
*/
/* t1 narrow block = left, equivalent of 160px */
.yui3-cssgrids .yui3-t1 .yui3-b {
	float: left;
	width: 12.30769em;
	*width: 12.00em;
}
.yui3-cssgrids .yui3-t1 .yui3-main .yui3-b {
	margin-left: 13.30769em;
	*margin-left:12.975em;
}
/* t2 narrow block = left, equivalent of 180px */
.yui3-cssgrids .yui3-t2 .yui3-b {
	float: left;
	width: 13.84615em;
	*width: 13.50em;
}
.yui3-cssgrids .yui3-t2 .yui3-main .yui3-b {
	margin-left: 14.84615em;
	*margin-left: 14.475em;
}
/* t3 narrow block = left, equivalent of 300px */
.yui3-cssgrids .yui3-t3 .yui3-b {
	float: left;
	width: 23.0769em;
	*width: 22.50em;
}
.yui3-cssgrids .yui3-t3 .yui3-main .yui3-b {
	margin-left: 24.0769em;
	*margin-left: 23.475em;
}
/* t4 narrow block = right, equivalent of 180px */
.yui3-cssgrids .yui3-t4 .yui3-b {
	float: right;
	width: 13.8456em;
	*width: 13.50em;
}
.yui3-cssgrids .yui3-t4 .yui3-main .yui3-b {
	margin-right: 14.8456em;
	*margin-right: 14.475em;
}
/* t5 narrow block = right, equivalent of 240px */
.yui3-cssgrids .yui3-t5 .yui3-b {
	float: right;
	width: 18.4615em;
	*width: 18.00em;
}
.yui3-cssgrids .yui3-t5 .yui3-main .yui3-b {
	margin-right: 19.4615em;
	*margin-right: 18.975em;
}
/* t6 narrow block = equivalent of 300px */
.yui3-cssgrids .yui3-t6 .yui3-b {
	float: right;
	width: 23.0769em;
	*width: 22.50em;
}
.yui3-cssgrids .yui3-t6 .yui3-main .yui3-b {
	margin-right: 24.0769em;
	*margin-right: 23.475em;
}

.yui3-cssgrids .yui3-main .yui3-b {
	float: none;
	width: auto;
}

/*
Section: Grids and Nesting Grids
*/

/*
Subsection: Children generally take half the available space
*/

.yui3-cssgrids .yui3-gb .yui3-u,
.yui3-cssgrids .yui3-g .yui3-gb .yui3-u,
.yui3-cssgrids .yui3-gb .yui3-g,
.yui3-cssgrids .yui3-gb .yui3-gb,
.yui3-cssgrids .yui3-gb .yui3-gc,
.yui3-cssgrids .yui3-gb .yui3-gd,
.yui3-cssgrids .yui3-gb .yui3-ge,
.yui3-cssgrids .yui3-gb .yui3-gf,
.yui3-cssgrids .yui3-gc .yui3-u,
.yui3-cssgrids .yui3-gc .yui3-g,
.yui3-cssgrids .yui3-gd .yui3-u {
	float: left;
}

/*Float units (and sub grids) to the right */
.yui3-cssgrids .yui3-g .yui3-u,
.yui3-cssgrids .yui3-g .yui3-g,
.yui3-cssgrids .yui3-g .yui3-gb,
.yui3-cssgrids .yui3-g .yui3-gc,
.yui3-cssgrids .yui3-g .yui3-gd,
.yui3-cssgrids .yui3-g .yui3-ge,
.yui3-cssgrids .yui3-g .yui3-gf,
.yui3-cssgrids .yui3-gc .yui3-u,
.yui3-cssgrids .yui3-gd .yui3-g,
.yui3-cssgrids .yui3-g .yui3-gc .yui3-u,
.yui3-cssgrids .yui3-ge .yui3-u,
.yui3-cssgrids .yui3-ge .yui3-g,
.yui3-cssgrids .yui3-gf .yui3-g,
.yui3-cssgrids .yui3-gf .yui3-u {
	float: right;
}

/*Float units (and sub grids) to the left */
.yui3-cssgrids .yui3-g div.first,
.yui3-cssgrids .yui3-gb div.first,
.yui3-cssgrids .yui3-gc div.first,
.yui3-cssgrids .yui3-gd div.first,
.yui3-cssgrids .yui3-ge div.first,
.yui3-cssgrids .yui3-gf div.first,
.yui3-cssgrids .yui3-g .yui3-gc div.first,
.yui3-cssgrids .yui3-g .yui3-ge div.first,
.yui3-cssgrids .yui3-gc div.first div.first {
	float: left;
}

.yui3-cssgrids .yui3-g .yui3-u,
.yui3-cssgrids .yui3-g .yui3-g,
.yui3-cssgrids .yui3-g .yui3-gb,
.yui3-cssgrids .yui3-g .yui3-gc,
.yui3-cssgrids .yui3-g .yui3-gd,
.yui3-cssgrids .yui3-g .yui3-ge,
.yui3-cssgrids .yui3-g .yui3-gf {
	width: 49.1%;
}

.yui3-cssgrids .yui3-gb .yui3-u,
.yui3-cssgrids .yui3-g .yui3-gb .yui3-u,
.yui3-cssgrids .yui3-gb .yui3-g,
.yui3-cssgrids .yui3-gb .yui3-gb,
.yui3-cssgrids .yui3-gb .yui3-gc,
.yui3-cssgrids .yui3-gb .yui3-gd,
.yui3-cssgrids .yui3-gb .yui3-ge,
.yui3-cssgrids .yui3-gb .yui3-gf,
.yui3-cssgrids .yui3-gc .yui3-u,
.yui3-cssgrids .yui3-gc .yui3-g,
.yui3-cssgrids .yui3-gd .yui3-u {
	width: 32%;
	margin-left: 2.0%;
}

/* Give IE some extra breathing room for 1/3-based rounding issues */
.yui3-cssgrids .yui3-gb .yui3-u {
	*width: 31.8%;
	*margin-left: 1.9%;
}

.yui3-cssgrids .yui3-gc div.first,
.yui3-cssgrids .yui3-gd .yui3-u {
	width: 66%;
	_width: 65.7%;
}
.yui3-cssgrids .yui3-gd div.first {
	width: 32%;
	_width: 31.5%;
}

.yui3-cssgrids .yui3-ge div.first,
.yui3-cssgrids .yui3-gf .yui3-u {
	width: 74.2%;
	_width: 74%;
}

.yui3-cssgrids .yui3-ge .yui3-u,
.yui3-cssgrids .yui3-gf div.first {
	width: 24%;
	_width: 23.8%;
}

.yui3-cssgrids .yui3-g .yui3-gb div.first,
.yui3-cssgrids .yui3-gb div.first,
.yui3-cssgrids .yui3-gc div.first,
.yui3-cssgrids .yui3-gd div.first {
	margin-left: 0;
}

/*
Section: Deep Nesting
*/
.yui3-cssgrids .yui3-g .yui3-g .yui3-u,
.yui3-cssgrids .yui3-gb .yui3-g .yui3-u,
.yui3-cssgrids .yui3-gc .yui3-g .yui3-u,
.yui3-cssgrids .yui3-gd .yui3-g .yui3-u,
.yui3-cssgrids .yui3-ge .yui3-g .yui3-u,
.yui3-cssgrids .yui3-gf .yui3-g .yui3-u {
	width: 49%;
	*width: 48.1%;
	*margin-left: 0;
}

.yui3-cssgrids .yui3-g .yui3-gb div.first,
.yui3-cssgrids .yui3-gb .yui3-gb div.first {
	*margin-right: 0;
	*width: 32%;
	_width: 31.7%;
}

.yui3-cssgrids .yui3-g .yui3-gc div.first,
.yui3-cssgrids .yui3-gd .yui3-g {
	width: 66%;
}

.yui3-cssgrids .yui3-gb .yui3-g div.first {
	*margin-right: 4%;
	_margin-right: 1.3%;
}

.yui3-cssgrids .yui3-gb .yui3-gc div.first,
.yui3-cssgrids .yui3-gb .yui3-gd div.first {
	*margin-right: 0;
}

.yui3-cssgrids .yui3-gb .yui3-gb .yui3-u,
.yui3-cssgrids .yui3-gb .yui3-gc .yui3-u {
	*margin-left: 1.8%;
	_margin-left: 4%;
}

.yui3-cssgrids .yui3-g .yui3-gb .yui3-u {
	_margin-left: 1.0%;
}

.yui3-cssgrids .yui3-gb .yui3-gd .yui3-u {
	*width: 66%;
	_width: 61.2%;
}
.yui3-cssgrids .yui3-gb .yui3-gd div.first {
	*width: 31%;
	_width: 29.5%;
}

.yui3-cssgrids .yui3-g .yui3-gc .yui3-u,
.yui3-cssgrids .yui3-gb .yui3-gc .yui3-u {
	width: 32%;
	_float: right;
	margin-right: 0;
	_margin-left: 0;
}
.yui3-cssgrids .yui3-gb .yui3-gc div.first {
	width: 66%;
	*float: left;
	*margin-left: 0;
}

.yui3-cssgrids .yui3-gb .yui3-ge .yui3-u,
.yui3-cssgrids .yui3-gb .yui3-gf .yui3-u {
	margin: 0;
}

.yui3-cssgrids .yui3-gb .yui3-gb .yui3-u {
	_margin-left: .7%;
}

.yui3-cssgrids .yui3-gb .yui3-g div.first,
.yui3-cssgrids .yui3-gb .yui3-gb div.first {
	*margin-left:0;
}

.yui3-cssgrids .yui3-gc .yui3-g .yui3-u,
.yui3-cssgrids .yui3-gd .yui3-g .yui3-u {
	*width: 48.1%;
	*margin-left: 0;
}

.yui3-cssgrids .yui3-gb .yui3-gd div.first {
	width: 32%;
}
.yui3-cssgrids .yui3-g .yui3-gd div.first {
	_width: 29.9%;
}

.yui3-cssgrids .yui3-ge .yui3-g {
	width: 24%;
}
.yui3-cssgrids .yui3-gf .yui3-g {
	width: 74.2%;
}

.yui3-cssgrids .yui3-gb .yui3-ge div.yui3-u,
.yui3-cssgrids .yui3-gb .yui3-gf div.yui3-u {
	float: right;
}
.yui3-cssgrids .yui3-gb .yui3-ge div.first,
.yui3-cssgrids .yui3-gb .yui3-gf div.first {
	float: left;
}

/* Width Accommodation for Nested Contexts */
.yui3-cssgrids .yui3-gb .yui3-ge .yui3-u,
.yui3-cssgrids .yui3-gb .yui3-gf div.first {
	*width: 24%;
	_width: 20%;
}

/* Width Accommodation for Nested Contexts */

.yui3-cssgrids .yui3-gc .yui3-gf .yui3-u {
	width: 74%;
	_width: 73%;
}

.yui3-cssgrids .yui3-gc .yui3-gf div.first {
	width: 24%;
}

.yui3-cssgrids .yui3-gb .yui3-ge div.first,
.yui3-cssgrids .yui3-gb .yui3-gf .yui3-u {
	*width: 73.5%;
	_width: 65.5%;
}

/* Patch for GD within GE */
.yui3-cssgrids .yui3-ge div.first .yui3-gd .yui3-u {
	width: 65%;
}
.yui3-cssgrids .yui3-ge div.first .yui3-gd div.first {
	width: 32%;
}

/*
Section: Clearing. zoom for IE, :after for others
*/

.yui3-cssgrids #bd:after,
.yui3-cssgrids .yui3-g:after,
.yui3-cssgrids .yui3-gb:after,
.yui3-cssgrids .yui3-gc:after,
.yui3-cssgrids .yui3-gd:after,
.yui3-cssgrids .yui3-ge:after,
.yui3-cssgrids .yui3-gf:after,
.yui3-cssgrids .yui3-t1:after,
.yui3-cssgrids .yui3-t2:after,
.yui3-cssgrids .yui3-t3:after,
.yui3-cssgrids .yui3-t4:after,
.yui3-cssgrids .yui3-t5:after,
.yui3-cssgrids .yui3-t6:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.yui3-cssgrids #bd,
.yui3-cssgrids .yui3-g,
.yui3-cssgrids .yui3-gb,
.yui3-cssgrids .yui3-gc,
.yui3-cssgrids .yui3-gd,
.yui3-cssgrids .yui3-ge,
.yui3-cssgrids .yui3-gf,
.yui3-cssgrids .yui3-t1,
.yui3-cssgrids .yui3-t2,
.yui3-cssgrids .yui3-t3,
.yui3-cssgrids .yui3-t4,
.yui3-cssgrids .yui3-t5,
.yui3-cssgrids .yui3-t6 {
	zoom: 1;
}