// Grid
// 
// This is for displaying widgets on a page, this is <u>not</u> an alternative for the layout, this should live within the layout.
// 
// Styleguide 27

// 20% x 80%
// 
// Markup:
// <div class="w">
//     <div class="w20"></div>
//     <div class="w80"></div>
// </div>
// 
// Styleguide 27.1

// 25% x 75%
// 
// Markup:
// <div class="w">
//     <div class="w25"></div>
//     <div class="w75"></div>
// </div>
// 
// Styleguide 27.2

// 33% x 66%
// 
// Markup:
// <div class="w">
//     <div class="w33"></div>
//     <div class="w66"></div>
// </div>
// 
// Styleguide 27.3

// 40% x 60%
// 
// Markup:
// <div class="w">
//     <div class="w40"></div>
//     <div class="w60"></div>
// </div>
// 
// Styleguide 27.4

// 50% x 50%
// 
// Markup:
// <div class="w">
//     <div class="w50"></div>
//     <div class="w50"></div>
// </div>
// 
// Styleguide 27.5

// 60% x 40%
// 
// Markup:
// <div class="w">
//     <div class="w60"></div>
//     <div class="w40"></div>
// </div>
// 
// Styleguide 27.6

// 66% x 33%
// 
// Markup:
// <div class="w">
//     <div class="w66"></div>
//     <div class="w33"></div>
// </div>
// 
// Styleguide 27.7

// 75% x 25%
// 
// Markup:
// <div class="w">
//     <div class="w75"></div>
//     <div class="w25"></div>
// </div>
// 
// Styleguide 27.8

// 80% x 20%
// 
// Markup:
// <div class="w">
//     <div class="w80"></div>
//     <div class="w20"></div>
// </div>
// 
// Styleguide 27.9

// make the classes!
.w {
	 
	display: block;
	width: 100%;
	
	 
	.clearfix;
	
	@list: 100/5, 100/4, 100/3, (100/5)*2, 100/2, (100/5)*3, (100/3)*2, (100/4)*3, (100/5)*4;
	@listLength: length(@list);

	.loop(@arrayLength, @index: 1) when (@index =< @arrayLength) {
		@arrayVal: extract(@list, @index);
		@classVal: floor(@arrayVal);
		@pcnt: percentage(@arrayVal / 100);

		> .w@{classVal} {
			 
			float: left;
			padding: 0 @widget-padding 0 0;
			width: @pcnt;

			// rtl stuff
			[dir="rtl"] & {
				 
				float: right;
			}
		}
		.loop(@arrayLength, (@index + 1));
	}

	.loop(@listLength);
}