/*
---

name: SPIN 2 Grids

description: Provides grid layout for SPIN2

provides: [CSS.SPIN2Grids]

...
*/

/* AREAS */
#top.area, #foot.area {
	margin: 0 auto;
	width: 964px;
	overflow: hidden;
}
#main.area {
	width: 636px;
	overflow: hidden;
}
#mainright.area {
	width: 308px;
	overflow: hidden;
}
	
/* GRIDS */
.grid {
	margin-bottom: 20px;
}
	.grid .columnContainer {
		min-height: 0;
		_height: 0;
	}
	.grid .columnContainer:AFTER {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
	}
	.grid .column {
		float: left;
		margin-right: 20px;
		min-height: 1px;
	}

/* TOP/FOOT GRID CONTAINERS */
#top.area .twoColumns, #foot.area .twoColumns,
#top.area .twoColumnsSmallLeft, #foot.area .twoColumnsSmallLeft,
#top.area .twoColumnsSmallRight, #foot.area .twoColumnsSmallRight,
#top.area .threeColumns, #foot.area .threeColumns,
#top.area .threeColumnsWideRight, #foot.area .threeColumnsWideRight,
#top.area .threeColumnsWideLeft, #foot.area .threeColumnsWideLeft {
	width: 984px;
}
/* MAIN GRID CONTAINERS */
#main.area .oneColumn {
	width: 636px;
}
#main.area .twoColumns,
#main.area .twoColumnsSmallLeft,
#main.area .twoColumnsSmallRight,
#main.area .threeColumns {
	width: 656px;
}
/* MAINRIGHT GRID CONTAINERS */
#mainright.area .oneColumn,
#mainright.area .twoColumns,
#mainright.area .threeColumns {
	width: 308px;
}



/* TOP/FOOT ONE COLUMN */
.grid .oneColumn .column { float: none; width: 100%; }
.grid .oneColumn .twocolumn { width: 472px; }
.grid .oneColumn .colour2 .twocolumn { width: 462px; }
.grid .oneColumn .colour3 .twocolumn { width: 462px; }

/* MAIN ONE COLUMN */
#main.area .grid .oneColumn .column { width: 636px; }
#main.area .grid .oneColumn .twocolumn { width: 308px; }
#main.area .grid .oneColumn .colour2 .twocolumn { width: 298px; }
#main.area .grid .oneColumn .colour3 .twocolumn { width: 298px; }
/* MAINRIGHT ONE COLUMN */
#mainright.area .grid .oneColumn .column { width: 308px; }
#mainright.area .grid .oneColumn .twocolumn { width: 144px; margin-bottom: 0; background: none; }
#mainright.area .grid .oneColumn .colour2 .twocolumn { width: 134px; }
#mainright.area .grid .oneColumn .colour3 .twocolumn { width: 134px; }

/* TOP/FOOT TWO COLUMN (EQUAL) */
#top.area .twoColumns .column, #foot.area .twoColumns .column { width: 472px; }
#top.area .twoColumns .twocolumn, #foot.area .twoColumns .twocolumn { width: 226px; }
#top.area .twoColumns .colour2 .twocolumn, #foot.area .twoColumns .colour2 .twocolumn { width: 216px; }
#top.area .twoColumns .colour3 .twocolumn, #foot.area .twoColumns .colour3 .twocolumn { width: 216px; }

/* MAIN TWO COLUMN (EQUAL) */
#main.area .twoColumns .column { width: 308px; }
#main.area .twoColumns .twocolumn { width: 144px; }
#main.area .twoColumns .colour2 .twocolumn { width: 134px; }
#main.area .twoColumns .colour3 .twocolumn { width: 134px; }

/* MAINRIGHT TWO COLUMN (EQUAL) */
#mainright.area .twoColumns .column { width: 144px; }
#mainright.area .twoColumns .columnTwo { margin-right: 0; }
#mainright.area .twoColumns .twocolumn { width: 60px; }
#mainright.area .twoColumns .colour2 .twocolumn { width: 124px; }
#mainright.area .twoColumns .colour3 .twocolumn { width: 124px; }
#mainright.area .twoColumns .sectionhead h2 { width: 93px; }

/* TOP/FOOT TWO COLUMN (SMALL LEFT) */
#top.area .twoColumnsSmallLeft .columnOne, #foot.area .twoColumnsSmallLeft .columnOne { width: 308px; }
#top.area .twoColumnsSmallLeft .columnOne .twocolumn, #foot.area .twoColumnsSmallLeft .columnOne .twocolumn { width: 144px; }
#top.area .twoColumnsSmallLeft .columnOne .colour2 .twocolumn, #foot.area .twoColumnsSmallLeft .columnOne .colour2 .twocolumn { width: 134px; }
#top.area .twoColumnsSmallLeft .columnOne .colour3 .twocolumn, #foot.area .twoColumnsSmallLeft .columnOne .colour3 .twocolumn { width: 134px; }

#top.area .twoColumnsSmallLeft .columnTwo, #foot.area .twoColumnsSmallLeft .columnTwo { width: 636px; }
#top.area .twoColumnsSmallLeft .columnTwo .twocolumn, #foot.area .twoColumnsSmallLeft .columnTwo .twocolumn { width: 308px; }
#top.area .twoColumnsSmallLeft .columnTwo .colour2 .twocolumn, #foot.area .twoColumnsSmallLeft .columnTwo .colour2 .twocolumn { width: 298px; }
#top.area .twoColumnsSmallLeft .columnTwo .colour3 .twocolumn, #foot.area .twoColumnsSmallLeft .columnTwo .colour3 .twocolumn { width: 298px; }

/* MAIN TWO COLUMN (SMALL LEFT) */
#main.area .twoColumnsSmallLeft .columnOne { width: 226px; }
#main.area .twoColumnsSmallLeft .columnOne .twocolumn { width: 103px; }
#main.area .twoColumnsSmallLeft .columnOne .colour2 .twocolumn { width: 93px; }
#main.area .twoColumnsSmallLeft .columnOne .colour3 .twocolumn { width: 93px; }
#main.area .twoColumnsSmallLeft .columnTwo { width: 390px; }
#main.area .twoColumnsSmallLeft .columnTwo .twocolumn { width: 185px; }
#main.area .twoColumnsSmallLeft .columnTwo .colour2 .twocolumn { width: 175px; }
#main.area .twoColumnsSmallLeft .columnTwo .colour3 .twocolumn { width: 175px; }

/* TOP/FOOT TWO COLUMN (SMALL RIGHT) */
#top.area .twoColumnsSmallRight .columnOne, #foot.area .twoColumnsSmallRight .columnOne { width: 636px; }
#top.area .twoColumnsSmallRight .columnOne .twocolumn, #foot.area .twoColumnsSmallRight .columnOne .twocolumn { width: 308px; }
#top.area .twoColumnsSmallRight .columnOne .colour2 .twocolumn, #foot.area .twoColumnsSmallRight .columnOne .colour2 .twocolumn { width: 298px; }
#top.area .twoColumnsSmallRight .columnOne .colour3 .twocolumn, #foot.area .twoColumnsSmallRight .columnOne .colour3 .twocolumn { width: 298px; }

#top.area .twoColumnsSmallRight .columnTwo, #foot.area .twoColumnsSmallRight .columnTwo { width: 308px; }
#top.area .twoColumnsSmallRight .columnTwo .twocolumn, #foot.area .twoColumnsSmallRight .columnTwo .twocolumn { width: 144px; }
#top.area .twoColumnsSmallRight .columnTwo .colour2 .twocolumn, #foot.area .twoColumnsSmallRight .columnTwo .colour2 .twocolumn { width: 134px; }
#top.area .twoColumnsSmallRight .columnTwo .colour3 .twocolumn, #foot.area .twoColumnsSmallRight .columnTwo .colour3 .twocolumn { width: 134px; }

/* MAIN TWO COLUMN (SMALL RIGHT) */
#main.area .twoColumnsSmallRight .columnOne { width: 390px; }
#main.area .twoColumnsSmallRight .columnOne .twocolumn { width: 185px; }
#main.area .twoColumnsSmallRight .columnOne .colour2 .twocolumn { width: 175px; }
#main.area .twoColumnsSmallRight .columnOne .colour3 .twocolumn { width: 175px; }
#main.area .twoColumnsSmallRight .columnTwo { width: 226px; }
#main.area .twoColumnsSmallRight .columnTwo .twocolumn { width: 103px; }
#main.area .twoColumnsSmallRight .columnTwo .colour2 .twocolumn { width: 93px; }
#main.area .twoColumnsSmallRight .columnTwo .colour3 .twocolumn { width: 93px; }

/* TOP/FOOT THREE COLUMN (EQUAL) */
#top.area .threeColumns .column, #foot.area .threeColumns .column { width: 308px; }
#top.area .threeColumns .twocolumn, #foot.area .threeColumns .twocolumn { width: 144px; }
#top.area .threeColumns .colour2 .twocolumn, #foot.area .threeColumns .colour2 .twocolumn { width: 134px; }
#top.area .threeColumns .colour3 .twocolumn, #foot.area .threeColumns .colour3 .twocolumn { width: 134px; }
/* TOP/FOOT THREE COLUMN (WIDE RIGHT) */
#top.area .threeColumnsWideRight .columnOne, #foot.area .threeColumnsWideRight .columnOne { width: 308px; }
#top.area .threeColumnsWideRight .columnOne .twocolumn, #foot.area .threeColumnsWideRight .columnOne .twocolumn { width: 144px; }
#top.area .threeColumnsWideRight .columnOne .colour2 .twocolumn, #foot.area .threeColumnsWideRight .columnOne .colour2 .twocolumn { width: 134px; }
#top.area .threeColumnsWideRight .columnOne .colour3 .twocolumn, #foot.area .threeColumnsWideRight .columnOne .colour3 .twocolumn { width: 134px; }

#top.area .threeColumnsWideRight .columnTwo, #foot.area .threeColumnsWideRight .columnTwo { width: 226px; }
#top.area .threeColumnsWideRight .columnTwo .twocolumn, #foot.area .threeColumnsWideRight .columnTwo .twocolumn { width: 103px; }
#top.area .threeColumnsWideRight .columnTwo .twocolumn, #foot.area .threeColumnsWideRight .columnTwo .colour2 .twocolumn { width: 93px; }
#top.area .threeColumnsWideRight .columnTwo .twocolumn, #foot.area .threeColumnsWideRight .columnTwo .colour3 .twocolumn { width: 93px; }
#top.area .threeColumnsWideRight .columnThree, #foot.area .threeColumnsWideRight .columnThree { width: 390px; }
#top.area .threeColumnsWideRight .columnThree .twocolumn, #foot.area .threeColumnsWideRight .columnThree .twocolumn { width: 185px; }
#top.area .threeColumnsWideRight .columnThree .colour2 .twocolumn, #foot.area .threeColumnsWideRight .columnThree .colour2 .twocolumn { width: 175px; }
#top.area .threeColumnsWideRight .columnThree .colour3 .twocolumn, #foot.area .threeColumnsWideRight .columnThree .colour3 .twocolumn { width: 175px; }

/* TOP/FOOT THREE COLUMN (WIDE LEFT) */
#top.area .threeColumnsWideLeft .columnOne, #foot.area .threeColumnsWideLeft .columnOne { width: 390px; }
#top.area .threeColumnsWideLeft .columnOne .twocolumn, #foot.area .threeColumnsWideLeft .columnOne .twocolumn { width: 185px; }
#top.area .threeColumnsWideLeft .columnOne .colour2 .twocolumn, #foot.area .threeColumnsWideLeft .columnOne .colour2 .twocolumn { width: 175px; }
#top.area .threeColumnsWideLeft .columnOne .colour3 .twocolumn, #foot.area .threeColumnsWideLeft .columnOne .colour3 .twocolumn { width: 175px; }

#top.area .threeColumnsWideLeft .columnTwo, #foot.area .threeColumnsWideLeft .columnTwo { width: 226px; }
#top.area .threeColumnsWideLeft .columnTwo .twocolumn, #foot.area .threeColumnsWideLeft .columnTwo .twocolumn { width: 103px; }
#top.area .threeColumnsWideLeft .columnTwo .twocolumn, #foot.area .threeColumnsWideLeft .columnTwo .colour2 .twocolumn { width: 93px; }
#top.area .threeColumnsWideLeft .columnTwo .twocolumn, #foot.area .threeColumnsWideLeft .columnTwo .colour3 .twocolumn { width: 93px; }
#top.area .threeColumnsWideLeft .columnThree, #foot.area .threeColumnsWideLeft .columnThree { width: 308px; }
#top.area .threeColumnsWideLeft .columnThree .twocolumn, #foot.area .threeColumnsWideLeft .columnThree .twocolumn { width: 144px; }
#top.area .threeColumnsWideLeft .columnThree .colour2 .twocolumn, #foot.area .threeColumnsWideLeft .columnThree .colour2 .twocolumn { width: 134px; }
#top.area .threeColumnsWideLeft .columnThree .colour3 .twocolumn, #foot.area .threeColumnsWideLeft .columnThree .colour3 .twocolumn { width: 134px; }


/* MAIN THREE COLUMN (EQUAL) */
#main.area .threeColumns .column { width: 198px; }
#main.area .threeColumns .twocolumn { width: 89px; }
#main.area .threeColumns .colour2 .twocolumn { width: 79px; }
#main.area .threeColumns .colour3 .twocolumn { width: 79px; }
#main.area .threeColumns .twocolumn.left { margin-right: 20px; }
#main.area .threeColumns .columnTwo { width: 200px; }
#main.area .threeColumns .columnTwo .twocolumn.left { margin-right: 20px; }

/* BACKGROUNDS */
/*
#top.area .twoColumns { background: url(/National_Library/20160930123623oe_/http://www.screendaily.com/magazine/graphics/spin2.topfoot.twocolumn.bg.png) repeat-y 0 0; }
#top.area .twoColumnsSmallLeft { background: url(/National_Library/20160930123623oe_/http://www.screendaily.com/magazine/graphics/spin2.topfoot.twocolumnsmallleft.bg.png) repeat-y 0 0; }
#top.area .twoColumnsSmallRight { background: url(/National_Library/20160930123623oe_/http://www.screendaily.com/magazine/graphics/spin2.topfoot.twocolumnsmallright.bg.png) repeat-y 0 0; }
*/