/* LAYOUT */

// Layout
// 
// Everybody likes order, and if you don't then that's weird. These are <u>only</u> for page layout.
// 
// Styleguide 9

// 1 Column Layout
// 
// Markup:
// <div class="l1-p1">
//     <div class="col"></div>
// </div>
// 
// Styleguide 9.1

// 2 Column Layout
// 
// Markup:
// <div class="l2-{{modifier_class}}">
//     <div class="col"></div>
//     <div class="col"></div>
// </div>
// 
// p1			- second kind
// p2			- second kind
// p3			- second kind
// p4			- second kind
// p5			- second kind
// p6			- second kind
// p7			- second kind
// p8			- second kind
// p9			- second kind
// 
// Styleguide 9.2

// 3 Column Layout
// 
// Markup:
// <div class="l3-{{modifier_class}}">
//     <div class="col"></div>
//     <div class="col"></div>
//     <div class="col"></div>
// </div>
// 
// p1			- second kind
// p2			- second kind
// p3			- second kind
// p4			- second kind
// p5			- second kind
// p6			- second kind
// p7			- second kind
// p8			- second kind
// p9			- second kind
// 
// Styleguide 9.3

// 4 Column Layout
// 
// Markup:
// <div class="l4-{{modifier_class}}">
//     <div class="col"></div>
//     <div class="col"></div>
//     <div class="col"></div>
//     <div class="col"></div>
// </div>
// 
// p1			- second kind
// p2			- second kind
// p3			- second kind
// p4			- second kind
// p5			- second kind
// 
// Styleguide 9.4

// 5 Column Layout
// 
// Markup:
// <div class="l5-{{modifier_class}}">
//     <div class="col"></div>
//     <div class="col"></div>
//     <div class="col"></div>
//     <div class="col"></div>
//     <div class="col"></div>
// </div>
// 
// p1			- second kind
// 
// Styleguide 9.5

// Layouts are made up of regions. Regions will have widgets in them.
// Set up the basic layout region
.col {
	float: left;
	// width: 100%;

	vertical-align: top;
}

// set the padding for the layout
.padding() {
	.box(border);
	.clearfix;

	@lay-bottom-padding: (@px * 4);

	width: 100%;
	padding: @lay-top-padding @lay-right-padding @lay-bottom-padding @lay-left-padding;
	&:first-child {
		padding-top: 0;
	}

	@media @mq-sm {
	padding: @lay-top-padding (@lay-right-padding - 10) @lay-bottom-padding (@lay-left-padding - 10);
	}
}

// for interfaces with widths restrictions
.my-optional-style() when (@fixed-page-width = true) {
	.clearfix;

	width: @pg-width;
	min-width: @pg-width-min;
	max-width: @pg-width-max;
}

// add other mixins to each layout
.extra-bits() {
	.padding;
	.my-optional-style;
}

// Divide the patterns into two master classes that go in the body tag
.l1 {
	&-p1 {
		.extra-bits;
		> .col {
			width: 100%;
		}
	}
}

.l2 {
	// 80 20
	&-p1 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 80%;
		}
		> .col:nth-child(2) {
			width: 20%;
		}
	}
	// 75 25
	&-p2 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 75%;
		}
		> .col:nth-child(2) {
			width: 25%;
		}
	}
	// 66 33
	&-p3 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 66%;
		}
		> .col:nth-child(2) {
			width: 33%;
		}
	}
	// 60 40
	&-p4 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 60%;
		}
		> .col:nth-child(2) {
			width: 40%;
		}
	}
	// 50 50
	&-p5 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 50%;
		}
		> .col:nth-child(2) {
			width: 50%;
		}
	}
	// 40 60
	&-p6 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 40%;
		}
		> .col:nth-child(2) {
			width: 60%;
		}
	}
	// 33 66
	&-p7 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 33%;
		}
		> .col:nth-child(2) {
			width: 66%;
		}
	}
	// 25 75
	&-p8 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 25%;
		}
		> .col:nth-child(2) {
			width: 75%;
		}
	}
	// 20 80
	&-p9 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 20%;
		}
		> .col:nth-child(2) {
			width: 80%;
		}
	}
}

.l3 {
	// 60 20 20
	&-p1 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 60%;
		}
		> .col:nth-child(2) {
			width: 20%;
		}
		> .col:nth-child(3) {
			width: 20%;
		}
	}
	// 50 25 25
	&-p2 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 50%;
		}
		> .col:nth-child(2) {
			width: 25%;
		}
		> .col:nth-child(3) {
			width: 25%;
		}
	}
	// 40 40 20
	&-p3 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 40%;
		}
		> .col:nth-child(2) {
			width: 40%;
		}
		> .col:nth-child(3) {
			width: 20%;
		}
	}
	// 40 20 40
	&-p4 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 40%;
		}
		> .col:nth-child(2) {
			width: 20%;
		}
		> .col:nth-child(3) {
			width: 40%;
		}
	}
	// 33 33 33
	&-p5 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 33%;
		}
		> .col:nth-child(2) {
			width: 33%;
		}
		> .col:nth-child(3) {
			width: 33%;
		}
	}
	// 25 25 50
	&-p6 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 25%;
		}
		> .col:nth-child(2) {
			width: 25%;
		}
		> .col:nth-child(3) {
			width: 50%;
		}
	}
	// 25 50 25
	&-p7 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 25%;
		}
		> .col:nth-child(2) {
			width: 50%;
		}
		> .col:nth-child(3) {
			width: 25%;
		}
	}
	// 20 20 60
	&-p8 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 20%;
		}
		> .col:nth-child(2) {
			width: 20%;
		}
		> .col:nth-child(3) {
			width: 60%;
		}
	}
	// 20 60 20
	&-p9 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 20%;
		}
		> .col:nth-child(2) {
			width: 60%;
		}
		> .col:nth-child(3) {
			width: 20%;
		}
	}
}

.l4 {
	// 40 20 20 20
	&-p1 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 40%;
		}
		> .col:nth-child(2) {
			width: 20%;
		}
		> .col:nth-child(3) {
			width: 20%;
		}
		> .col:nth-child(4) {
			width: 20%;
		}
	}
	// 25 25 25 25
	&-p2 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 25%;
		}
		> .col:nth-child(2) {
			width: 25%;
		}
		> .col:nth-child(3) {
			width: 25%;
		}
		> .col:nth-child(4) {
			width: 25%;
		}
	}
	// 20 20 20 40
	&-p3 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 20%;
		}
		> .col:nth-child(2) {
			width: 20%;
		}
		> .col:nth-child(3) {
			width: 20%;
		}
		> .col:nth-child(4) {
			width: 40%;
		}
	}
	// 20 20 40 20
	&-p4 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 20%;
		}
		> .col:nth-child(2) {
			width: 20%;
		}
		> .col:nth-child(3) {
			width: 40%;
		}
		> .col:nth-child(4) {
			width: 20%;
		}
	}
	// 20 40 20 20
	&-p5 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 20%;
		}
		> .col:nth-child(2) {
			width: 40%;
		}
		> .col:nth-child(3) {
			width: 20%;
		}
		> .col:nth-child(4) {
			width: 20%;
		}
	}
}

.l5 {
	// 20 20 20 20 20
	&-p1 {
		.extra-bits;
		> .col:nth-child(1) {
			width: 20%;
		}
		> .col:nth-child(2) {
			width: 20%;
		}
		> .col:nth-child(3) {
			width: 20%;
		}
		> .col:nth-child(4) {
			width: 20%;
		}
		> .col:nth-child(5) {
			width: 20%;
		}
	}
}