/*
---

name: SPIN 2 Grids

description: Provides grid layout for SPIN2

provides: [CSS.SPIN2Grids]

...
*/

/* LAYOUT RESETS */
#columns {
	margin: 0 auto;
	padding: 0;
	width: 975px;
}
	#columns #colmain {
		width: 643px;
	}
	#columns #content {
		float: left;
		width: auto;
	}
	#columns #rightcolumn {
		margin-right: 0;
		padding-left: 21px;
	}

/* AREAS */
#top.area, #foot.area {
	margin: 0 auto;
	width: 975px;
	overflow: hidden;
}
#main.area {
	width: 643px;
	overflow: hidden;
}
#mainright.area {
	width: 311px;
	overflow: hidden;
	margin-bottom: 0;
}
	
/* GRIDS */
.grid {
	margin-bottom: 10px;
}
	.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: 21px;
		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: 996px;
}
/* MAIN GRID CONTAINERS */
#main.area .oneColumn {
	width: 643px;
}
#main.area .twoColumns,
#main.area .twoColumnsSmallLeft,
#main.area .twoColumnsSmallRight,
#main.area .threeColumns {
	width: 664px;
}
/* MAINRIGHT GRID CONTAINERS */
#mainright.area .oneColumn,
#mainright.area .twoColumns,
#mainright.area .threeColumns {
	width: 332px;
}



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

.grid .oneColumn .colour2 .twocolumn, .grid .oneColumn .colour3 .twocolumn { width: 466px; }

/* MAIN ONE COLUMN */
#main.area .grid .oneColumn .column { width: 643px; }
#main.area .grid .oneColumn .twocolumn { width: 311px; }

#main.area .grid .oneColumn .colour2 .twocolumn, #main.area .grid .oneColumn .colour2 .twocolumn,
#main.area .grid .oneColumn .colour3 .twocolumn, #main.area .grid .oneColumn .colour3 .twocolumn { width: 300px; }

/* MAINRIGHT ONE COLUMN */
#mainright.area .grid .oneColumn .column { width: 311px; }
#mainright.area .grid .oneColumn .twocolumn { width: 145px; }
#mainright.area .grid .oneColumn .colour2 .twocolumn, #mainright.area .grid .oneColumn .colour3 .twocolumn { width: 134px; }

/* TOP/FOOT TWO COLUMN (EQUAL) */
#top.area .twoColumns .column, #foot.area .twoColumns .column { width: 477px; }
#top.area .twoColumns .twocolumn, #foot.area .twoColumns .twocolumn { width: 228px; }

#top.area .twoColumns .colour2 .twocolumn, #foot.area .twoColumns .colour2 .twocolumn,
#top.area .twoColumns .colour3 .twocolumn, #foot.area .twoColumns .colour3 .twocolumn { width: 217px; }

/* MAIN TWO COLUMN (EQUAL) */
#main.area .twoColumns .column { width: 311px; }
#main.area .twoColumns .twocolumn { width: 145px; }

#main.area .twoColumns .colour2 .twocolumn, #main.area .twoColumns .colour3 .twocolumn { width: 134px; }

/* MAINRIGHT TWO COLUMN (EQUAL) */
#mainright.area .twoColumns .column { width: 145px; }
#mainright.area .twoColumns .twocolumn { width: 60px; }
#mainright.area .twoColumns .sectionhead h2 { width: 93px; }

/* TOP/FOOT TWO COLUMN (SMALL LEFT) */
#top.area .twoColumnsSmallLeft .columnOne, #foot.area .twoColumnsSmallLeft .columnOne { width: 311px; }
#top.area .twoColumnsSmallLeft .columnOne .twocolumn, #foot.area .twoColumnsSmallLeft .columnOne .twocolumn { width: 145px; }
#top.area .twoColumnsSmallLeft .columnTwo, #foot.area .twoColumnsSmallLeft .columnTwo { width: 643px; }
#top.area .twoColumnsSmallLeft .columnTwo .twocolumn, #foot.area .twoColumnsSmallLeft .columnTwo .twocolumn { width: 311px; }

#top.area .twoColumnsSmallLeft .columnOne .colour2 .twocolumn, #foot.area .twoColumnsSmallLeft .columnOne .colour2 .twocolumn,
#top.area .twoColumnsSmallLeft .columnOne .colour3 .twocolumn, #foot.area .twoColumnsSmallLeft .columnOne .colour3 .twocolumn { width: 134px; }
#top.area .twoColumnsSmallLeft .columnTwo .colour2 .twocolumn, #foot.area .twoColumnsSmallLeft .columnTwo .colour2 .twocolumn,
#top.area .twoColumnsSmallLeft .columnTwo .colour3 .twocolumn, #foot.area .twoColumnsSmallLeft .columnTwo .colour3 .twocolumn { width: 300px; }

/* MAIN TWO COLUMN (SMALL LEFT) */
#main.area .twoColumnsSmallLeft .columnOne { width: 228px; }
#main.area .twoColumnsSmallLeft .columnOne .twocolumn { width: 103px; }
#main.area .twoColumnsSmallLeft .columnTwo { width: 394px; }
#main.area .twoColumnsSmallLeft .columnTwo .twocolumn { width: 186px; }

#main.area .twoColumnsSmallLeft .columnOne .colour2 .twocolumn, #main.area .twoColumnsSmallLeft .columnOne .colour3 .twocolumn { width: 92px; }
#main.area .twoColumnsSmallLeft .columnTwo .colour2 .twocolumn, #main.area .twoColumnsSmallLeft .columnTwo .colour3 .twocolumn { width: 175px; }

/* TOP/FOOT TWO COLUMN (SMALL RIGHT) */
#top.area .twoColumnsSmallRight .columnOne, #foot.area .twoColumnsSmallRight .columnOne { width: 643px; }
#top.area .twoColumnsSmallRight .columnOne .twocolumn, #foot.area .twoColumnsSmallRight .columnOne .twocolumn { width: 311px; }
#top.area .twoColumnsSmallRight .columnTwo, #foot.area .twoColumnsSmallRight .columnTwo { width: 311px; }
#top.area .twoColumnsSmallRight .columnTwo .twocolumn, #foot.area .twoColumnsSmallRight .columnTwo .twocolumn { width: 145px; }

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

/* MAIN TWO COLUMN (SMALL RIGHT) */
#main.area .twoColumnsSmallRight .columnOne { width: 394px; }
#main.area .twoColumnsSmallRight .columnOne .twocolumn { width: 186px; }
#main.area .twoColumnsSmallRight .columnTwo { width: 228px; }
#main.area .twoColumnsSmallRight .columnTwo .twocolumn { width: 103px; }

#main.area .twoColumnsSmallRight .columnOne .colour2 .twocolumn, #main.area .twoColumnsSmallRight .columnOne .colour3 .twocolumn { width: 175px; }
#main.area .twoColumnsSmallRight .columnTwo .colour2 .twocolumn, #main.area .twoColumnsSmallRight .columnTwo .colour3 .twocolumn { width: 92px; }

/* TOP/FOOT THREE COLUMN (EQUAL) */
#top.area .threeColumns .column, #foot.area .threeColumns .column { width: 311px; }
#top.area .threeColumns .twocolumn, #foot.area .threeColumns .twocolumn { width: 145px; }

#top.area .threeColumns .colour2 .twocolumn, #foot.area .threeColumns .colour2 .twocolumn,
#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: 311px; }
#top.area .threeColumnsWideRight .columnOne .twocolumn, #foot.area .threeColumnsWideRight .columnOne .twocolumn { width: 145px; }
#top.area .threeColumnsWideRight .columnTwo, #foot.area .threeColumnsWideRight .columnTwo { width: 228px; }
#top.area .threeColumnsWideRight .columnTwo .twocolumn, #foot.area .threeColumnsWideRight .columnTwo .twocolumn { width: 103px; }
#top.area .threeColumnsWideRight .columnThree, #foot.area .threeColumnsWideRight .columnThree { width: 394px; }
#top.area .threeColumnsWideRight .columnThree .twocolumn, #foot.area .threeColumnsWideRight .columnThree .twocolumn { width: 186px; }

#top.area .threeColumnsWideRight .columnOne .colour2 .twocolumn, #foot.area .threeColumnsWideRight .columnOne .colour2 .twocolumn,
#top.area .threeColumnsWideRight .columnOne .colour3 .twocolumn, #foot.area .threeColumnsWideRight .columnOne .colour3 .twocolumn { width: 134px; }
#top.area .threeColumnsWideRight .columnTwo .colour2 .twocolumn, #foot.area .threeColumnsWideRight .columnTwo .colour2 .twocolumn,
#top.area .threeColumnsWideRight .columnTwo .colour3 .twocolumn, #foot.area .threeColumnsWideRight .columnTwo .colour3 .twocolumn { width: 92px; }
#top.area .threeColumnsWideRight .columnThree .colour2 .twocolumn, #foot.area .threeColumnsWideRight .columnThree .colour2 .twocolumn,
#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: 394px; }
#top.area .threeColumnsWideLeft .columnOne .twocolumn, #foot.area .threeColumnsWideLeft .columnOne .twocolumn { width: 186px; }
#top.area .threeColumnsWideLeft .columnTwo, #foot.area .threeColumnsWideLeft .columnTwo { width: 228px; }
#top.area .threeColumnsWideLeft .columnTwo .twocolumn, #foot.area .threeColumnsWideLeft .columnTwo .twocolumn { width: 103px; }
#top.area .threeColumnsWideLeft .columnThree, #foot.area .threeColumnsWideLeft .columnThree { width: 311px; }
#top.area .threeColumnsWideLeft .columnThree .twocolumn, #foot.area .threeColumnsWideLeft .columnThree .twocolumn { width: 145px; }

#top.area .threeColumnsWideLeft .columnOne .colour2 .twocolumn, #foot.area .threeColumnsWideLeft .columnOne .colour2 .twocolumn,
#top.area .threeColumnsWideLeft .columnOne .colour3 .twocolumn, #foot.area .threeColumnsWideLeft .columnOne .colour3 .twocolumn { width: 175px; }
#top.area .threeColumnsWideLeft .columnTwo .colour2 .twocolumn, #foot.area .threeColumnsWideLeft .columnTwo .colour2 .twocolumn,
#top.area .threeColumnsWideLeft .columnTwo .colour3 .twocolumn, #foot.area .threeColumnsWideLeft .columnTwo .colour3 .twocolumn { width: 92px; }
#top.area .threeColumnsWideLeft .columnThree .colour2 .twocolumn, #foot.area .threeColumnsWideLeft .columnThree .colour2 .twocolumn,
#top.area .threeColumnsWideLeft .columnThree .colour3 .twocolumn, #foot.area .threeColumnsWideLeft .columnThree .colour3 .twocolumn { width: 134px; }

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

#main.area .threeColumns .colour2 .twocolumn, #main.area .threeColumns .colour3 .twocolumn { width: 78px; }

/* WIDGETS */
/* TOP/FOOT */
#top.area .grid .twoColumnsSmallLeft .columnOne #newsletter_block li, #foot.area .grid .twoColumnsSmallLeft .columnOne #newsletter_block li,
#top.area .grid .twoColumnsSmallRight .columnTwo #newsletter_block li, #foot.area .grid .twoColumnsSmallRight .columnTwo #newsletter_block li,
#top.area .grid .threeColumns .column #newsletter_block li, #foot.area .grid .threeColumns .column #newsletter_block li { width: 139px; }

#top.area .grid .threeColumnsWideLeft .columnOne #newsletter_block li, #foot.area .grid .threeColumnsWideLeft .columnOne #newsletter_block li,
#top.area .grid .threeColumnsWideRight .columnThree #newsletter_block li, #foot.area .grid .threeColumnsWideRight .columnThree #newsletter_block li { width: 180px; }
#top.area .grid .threeColumnsWideLeft .columnTwo #newsletter_block li, #foot.area .grid .threeColumnsWideLeft .columnTwo #newsletter_block li,
#top.area .grid .threeColumnsWideRight .columnTwo #newsletter_block li, #foot.area .grid .threeColumnsWideRight .columnTwo #newsletter_block li { width: 200px; }

#top.area .grid .threeColumnsWideLeft .columnOne #newsletter_block li label, #top.area .grid .threeColumnsWideLeft .columnOne #newsletter_block li label,
#top.area .grid .threeColumnsWideRight .columnThree #newsletter_block li label, #foot.area .grid .threeColumnsWideRight .columnThree #newsletter_block li label { width: 160px; }
#top.area .grid .threeColumnsWideLeft .columnTwo #newsletter_block li label, #foot.area .grid .threeColumnsWideLeft .columnTwo #newsletter_block li label,
#top.area .grid .threeColumnsWideRight .columnTwo #newsletter_block li label, #foot.area .grid .threeColumnsWideRight .columnTwo #newsletter_block li label { width: 180px; }

#top.area .grid .threeColumnsWideLeft .columnThree #newsletter_block li, #foot.area .grid .threeColumnsWideLeft .columnThree #newsletter_block li,
#top.area .grid .threeColumnsWideRight .columnOne #newsletter_block li, #foot.area .grid .threeColumnsWideRight .columnOne #newsletter_block li { width: 139px; }

/* MAIN */
#main.area .grid .twoColumns .column #newsletter_block li { width: 139px; }
#main.area .grid .twoColumnsSmallLeft .columnOne #newsletter_block li, #main.area .grid .twoColumnsSmallRight .columnTwo #newsletter_block li { width: 200px; }
#main.area .grid .twoColumnsSmallLeft .columnOne #newsletter_block li label, #main.area .grid .twoColumnsSmallRight .columnTwo #newsletter_block li label { width: 180px; }

#main.area .grid .twoColumnsSmallLeft .columnTwo #newsletter_block li, #main.area .grid .twoColumnsSmallRight .columnOne #newsletter_block li { width: 180px; }
#main.area .grid .twoColumnsSmallLeft .columnTwo #newsletter_block li label, #main.area .grid .twoColumnsSmallRight .columnOne #newsletter_block li label { width: 160px; }

#main.area .grid .threeColumns #newsletter_block li { width: 172px; }
#main.area .grid .threeColumns #newsletter_block li label { width: 154px; }