/*  ==========================================================================
    1.0 - Grid 
    ========================================================================== */
/*  =========================
        1.1 - Size                                               
        ========================= */
/*  Maximum grid width  */
/*  Gutters  */
/*  =========================
        1.2 - Mixins                                                
        ========================= */
/*  ==========================================================================
        LESS For Loop                                      
        ========================================================================== */
/*==========================================================================

    Grid CSS

    For mobile device grid CSS see "grid-mobile-devices.less"

    ==========================================================================


	CONTENTS:

	1.0 - Blocks / rows 
	2.0 - Columns
	3.0 - Clearing
	4.0 - Debug Colours   


    ==========================================================================
    1.0 - Blocks / rows                                           
    ========================================================================== */
*,
*:before,
*:after {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
/*.paddingLoop( @count:1, @width:null, @height:null, @padding:0, @padding-top:null, @padding-right:null, @padding-bottom:null, @padding-left:null, @margin:0, @margin-top:null, @margin-right:null, @margin-bottom:null, @margin-left:null  ){

		@paddingItems: length( @padding );
		@marginItems: length( @margin );
		
		//
		//	Loop Through the padding
		//
		& when ( @count <= @paddingItems )
		{
			& when ( @count = 1 )
			{
				@padding-top: extract( @padding, @count );
				@padding-right: extract( @padding, @count );
				@padding-bottom: extract( @padding, @count );
				@padding-left: extract( @padding, @count );

				.paddingLoop(
					@count + 1,
					@width, @height, @padding, @padding-top, @padding-right, @padding-bottom, @padding-left, @margin, @margin-top, @margin-right, @margin-bottom, @margin-left
				);
			}

			& when ( @count = 2 )
			{
				@padding-right: extract( @padding, @count );
				@padding-left: extract( @padding, @count );

				.paddingLoop(
					@count + 1,
					@width, @height, @padding, @padding-top, @padding-right, @padding-bottom, @padding-left, @margin, @margin-top, @margin-right, @margin-bottom, @margin-left
				);
			}

			& when ( @count = 3 )
			{
				@padding-bottom: extract( @padding, @count );

				.paddingLoop(
					@count + 1,
					@width, @height, @padding, @padding-top, @padding-right, @padding-bottom, @padding-left, @margin, @margin-top, @margin-right, @margin-bottom, @margin-left
				);
			}

			& when ( @count = 4 )
			{
				@padding-left: extract( @padding, @count );

				.paddingLoop(
					@count + 1,
					@width, @height, @padding, @padding-top, @padding-right, @padding-bottom, @padding-left, @margin, @margin-top, @margin-right, @margin-bottom, @margin-left
				);
			}
		}

		//
		//	Set CSS values when the loop reaches its end
		//
		& when ( @count > @paddingItems )
		{
			padding-top: @padding-top;
			padding-left: @padding-left;
			padding-bottom: @padding-bottom;
			padding-right: @padding-right;

			& when not ( @width = null )
			{
				width: @width - @padding-right - @padding-left;
			}

			& when not ( @height = null )
			{
				height: @height - @padding-top - @padding-bottom;
			}
		}
	}*/
/*.varChange(){
		@testVar = 1234;
	}*/
.test .two {
  test: null;
  /*.paddingLoop(
			@width: 200px,
			@padding: 10px 20px 5px,
			@margin: 0,
			@height: 300px
		);*/
}
.test .four {
  width: 360px;
}
.test .eight.nest .two {
  width: 260px;
}
.block {
  width: 100%;
  min-width: 100%;
}
.block .row {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0 0;
  /*width: @maxWidth;		/* Un-comment to disabled responsivness	*/
}
.block .row.full {
  max-width: 100%;
  padding: 0;
}
.block.full .row {
  max-width: 100%;
  padding: 0;
}
.block.level .row:last-child .column {
  padding-bottom: 0;
}
.block.overflowed {
  overflow: hidden;
}
/*  ==========================================================================
    2.0 - Columns                                        
    ========================================================================== */
.column,
.columns {
  float: left;
  max-width: 100%;
  position: relative;
  width: 100%;
}
.column.level,
.columns.level {
  padding-bottom: 0;
}
.column.nest,
.columns.nest {
  padding: 0;
}
.panel {
  width: 100%;
  height: 100%;
}
/* Column Widths/insets Loop */
/* Loop Through Columns */
.twelve {
  width: 1160px;
}
.inset-twelve-left {
  margin-left: 100%;
}
.inset-twelve-right {
  margin-right: 100%;
}
.eleven {
  width: 1060px;
}
.inset-eleven-left {
  margin-left: 91.66666667%;
}
.inset-eleven-right {
  margin-right: 91.66666667%;
}
.ten {
  width: 960px;
}
.inset-ten-left {
  margin-left: 83.33333333%;
}
.inset-ten-right {
  margin-right: 83.33333333%;
}
.nine {
  width: 860px;
}
.inset-nine-left {
  margin-left: 75%;
}
.inset-nine-right {
  margin-right: 75%;
}
.eight {
  width: 760px;
}
.inset-eight-left {
  margin-left: 66.66666667%;
}
.inset-eight-right {
  margin-right: 66.66666667%;
}
.seven {
  width: 660px;
}
.inset-seven-left {
  margin-left: 58.33333333%;
}
.inset-seven-right {
  margin-right: 58.33333333%;
}
.six {
  width: 560px;
}
.inset-six-left {
  margin-left: 50%;
}
.inset-six-right {
  margin-right: 50%;
}
.five {
  width: 460px;
}
.inset-five-left {
  margin-left: 41.66666667%;
}
.inset-five-right {
  margin-right: 41.66666667%;
}
.four {
  width: 360px;
}
.inset-four-left {
  margin-left: 33.33333333%;
}
.inset-four-right {
  margin-right: 33.33333333%;
}
.three {
  width: 260px;
}
.inset-three-left {
  margin-left: 25%;
}
.inset-three-right {
  margin-right: 25%;
}
.two {
  width: 160px;
}
.inset-two-left {
  margin-left: 16.66666667%;
}
.inset-two-right {
  margin-right: 16.66666667%;
}
.one {
  width: 60px;
}
.inset-one-left {
  margin-left: 8.33333333%;
}
.inset-one-right {
  margin-right: 8.33333333%;
}
/*  ==========================================================================
    3.0 - Nesting                                        
    ========================================================================== */
/*.nestedColumnLoop(@i) when (@i > 0){

		@column: extract(@column_names, @i);

		.columns.nest.@{column},
		.column.nest.@{column}{

			.for(@columns); .-each(@j){

				@column: extract(@column_names, @j);

				.@{column}{

					& when(@j < @i){
						.calculateColumn(@j, @i);
					}

					& when( @j >= @i ){
						.calculateColumn(@i, @i);
					}
				}

				.inset-@{column}-left{
					.calculateInsetLeft(@j, @i)
				}

				.inset-@{column}-right{
					.calculateInsetRight(@j, @i)
				}
			}
		}
		.nestedColumnLoop((@i - 1));
	}
	
	.nestedColumnLoop(@columns);*/
/*  ==========================================================================
    4.0 - Debug Colours                                        
    ========================================================================== */
/*.block{
		background-color: #9999cc !important;
		box-shadow: 0 0 8px rgba(0,0,0,0.2);
	}
	.row{
		background-color: #6699ff !important;
		box-shadow: 0 0 8px rgba(0,0,0,0.2);
	}
	.column, .columns{
		background-color: #66cc99 !important;
		box-shadow: 0 0 8px rgba(0,0,0,0.2);
	}
	.panel{
		background-color: #ffcc66 !important;
		box-shadow: 0 0 8px rgba(0,0,0,0.2);
	}*/