/*

	Name:       Winston layout module [0.4]
	Desc:       Styles for creating layouts, both grid style and % style
	            Styles for image alignment on the grid
	            Styles for centering anything

*/

/*
	Grid based column system 
*/

.colsGrid:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.colsGrid .col {
	float: left;
	margin-right: 24px;
}

/* (72px columns/24px gutter/10 columns) */
.col-1 { width: 72px; }
.col-2 { width: 168px; }
.col-3 { width: 264px; }
.col-4 { width: 360px; }
.col-5 { width: 456px; }
.col-6 { width: 552px; }
.col-7 { width: 648px; }
.col-8 { width: 744px; }
.col-9 { width: 840px; }
.col-10 { width: 936px; }
.colLast { margin-right: 0 !important; }

/*
	Simple column system
*/

.cols:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.cols .col {
	float: left;
	margin: 0;
}

/* Two columns */
.col-1d2,
.col-2d4 { width: 50%; }

/* Three columns*/
.col-2d3 { width: 66.66%; }
.col-1d3 { width: 33.33%; }

/* Four columns */
.col-1d4 { width: 25%; }
.col-3d4 { width: 75%; }

/* Five columns */
.col-1d5 { width: 20%; }
.col-2d5 { width: 40%; }
.col-3d5 { width: 60%; }
.col-4d5 { width: 80%; }

/*
	Spacing divs to fit inside columns:
	gutter width and 1/2 gutter width
*/
.cols .spacingLeft { margin-left: 24px; }
.cols .spacingLeftHalf { margin-left: 12px; }
.cols .spacingRight { margin-right: 24px; }
.cols .spacingRightHalf { margin-right: 12px; }
.cols .spacingBothHalf { margin-right: 12px; margin-left: 12px; }

/*
	Image aligment classes
	Based on grid
*/

img.alignleft {
	float: left;
	padding: 0 24px 12px 0;
}

img.alignright {
	float: right;
	padding: 0 0 12px 24px;
}

/*
	Center anything* horizontally
	(not really anything, see test_suite layout)
*/

.centerHorizontallyWrap {
	width: 100%;
	overflow: hidden;
}

.centerHorizontally {
	float: left;
	position: relative;
	left: 50%;
}

.centerHorizontallyInner {
	position: relative;
	left: -50%;
}

/* Center anything vertically */

.centerVerticallyWrap {
	height: 100%;
	overflow: hidden;
}

.centerVertically[class] {
	display: table;
	position: static;
}

.centerVerticallyInner {
	display: table-cell;
	vertical-align: middle;
	position: static;
}