// LESS framework (lite-version) (c) MAX http://maxsite.com.ua/

.box() {
	.clearfix() {
		&:before,
		&:after {
			content: " "; 
			display: table; 
		}
		
		&:after {
			clear: both;
		}
	}
	
	.clear(@clear: both) {
		clear: @clear;
	}
	
	.left(@f: left) {
		float: @f;
	}

	.right(@f: right) {
		float: @f;
	}

	.center() {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	.size(@width; @height) {
		width: @width;
		height: @height;
	}
	
	.square(@size) {
		width: @size;
		height: @size;
	}
	
	.sizing(@boxmodel: border-box) {
		-moz-box-sizing: @boxmodel;
		box-sizing: @boxmodel;
	}
	
	.border_box() {
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.content_box() {
		-moz-box-sizing: content-box;
		box-sizing: content-box;
	}
	
	.inline() {
		display: inline-block;
	}
	
	.valign(@valign) {
		vertical-align: @valign;
	}
	
	.hide() {
		display: none;
	}
	
	.set_padding(@p; @prefix) {
		.@{prefix}    {padding: @p;}
		.@{prefix}-t  {padding-top: @p;}
		.@{prefix}-r  {padding-right: @p;}
		.@{prefix}-b  {padding-bottom: @p;}
		.@{prefix}-l  {padding-left: @p;}
		.@{prefix}-tb {padding-top: @p; padding-bottom: @p;}
		.@{prefix}-rl {padding-right: @p; padding-left: @p;}
	}
	
	.set_padding(@p; @prefix; @postfix) {
		.@{prefix}-@{postfix}    {padding: @p;}
		.@{prefix}-t-@{postfix}  {padding-top: @p;}
		.@{prefix}-r-@{postfix}  {padding-right: @p;}
		.@{prefix}-b-@{postfix}  {padding-bottom: @p;}
		.@{prefix}-l-@{postfix}  {padding-left: @p;}
		.@{prefix}-tb-@{postfix} {padding-top: @p; padding-bottom: @p;}
		.@{prefix}-rl-@{postfix} {padding-right: @p; padding-left: @p;}
	}
	
	.set_margin(@p; @prefix) {
		.@{prefix}    {margin: @p;}
		.@{prefix}-t  {margin-top: @p;}
		.@{prefix}-r  {margin-right: @p;}
		.@{prefix}-b  {margin-bottom: @p;}
		.@{prefix}-l  {margin-left: @p;}
		.@{prefix}-tb {margin-top: @p; margin-bottom: @p;}
		.@{prefix}-rl {margin-right: @p; margin-left: @p;}
	}
	
	.set_margin(@p; @prefix; @postfix) {
		.@{prefix}-@{postfix}    {margin: @p;}
		.@{prefix}-t-@{postfix}  {margin-top: @p;}
		.@{prefix}-r-@{postfix}  {margin-right: @p;}
		.@{prefix}-b-@{postfix}  {margin-bottom: @p;}
		.@{prefix}-l-@{postfix}  {margin-left: @p;}
		.@{prefix}-tb-@{postfix} {margin-top: @p; margin-bottom: @p;}
		.@{prefix}-rl-@{postfix} {margin-right: @p; margin-left: @p;}
	}
}

.grid_flex() {
	.container(@justify: space-between; @align: stretch)
	{
		.grid_flex > .display(flex);
		.grid_flex > .justify_content(@justify);
		.grid_flex > .align_items(@align);
	}

	.display(@display: flex) {
		display: ~"-webkit-@{display}";
		display: ~"-moz-@{display}";
		display: ~"-ms-@{display}box";
		display: ~"-ms-@{display}";
		display: @display;
	}

	.direction(@direction: row) {
	  -webkit-flex-direction: @direction;
		 -moz-flex-direction: @direction;
		  -ms-flex-direction: @direction;
			  flex-direction: @direction;
	}
	
	.justify_content(@justify: flex-start) {
	  -webkit-justify-content: @justify;
		 -moz-justify-content: @justify;
		  -ms-justify-content: @justify;
			  justify-content: @justify;
	}

	.align_items(@align: stretch) {
	  -webkit-align-items: @align;
		 -moz-align-items: @align;
		  -ms-align-items: @align;
			  align-items: @align;
	}

	.wrap(@wrap: nowrap) {
	  -webkit-flex-wrap: @wrap;
		 -moz-flex-wrap: @wrap;
		  -ms-flex-wrap: @wrap;
			  flex-wrap: @wrap;
	}

	.flow(@flow) {
	  -webkit-flex-flow: @flow;
		 -moz-flex-flow: @flow;
		  -ms-flex-flow: @flow;
			  flex-flow: @flow;
	}

	.align_content(@align: stretch) {
	  -webkit-align-content: @align;
		 -moz-align-content: @align;
		  -ms-align-content: @align;
			  align-content: @align;
	}

	.basis(@width: auto) {
	  -webkit-flex-basis: @width;
		 -moz-flex-basis: @width;
		  -ms-flex-basis: @width;
			  flex-basis: @width;
	}

	.grow(@grow: 0) {
	  -webkit-flex-grow: @grow;
		 -moz-flex-grow: @grow;
		  -ms-flex-grow: @grow;
			  flex-grow: @grow;
	}

	.shrink(@shrink: 1) {
	  -webkit-flex-shrink: @shrink;
		 -moz-flex-shrink: @shrink;
		  -ms-flex-shrink: @shrink;
			  flex-shrink: @shrink;
	}

	.flex(@flex) {
	  -webkit-flex: @flex;
		 -moz-flex: @flex;
		  -ms-flex: @flex;
			  flex: @flex;
	}

	.align-self(@align: auto) {
	  -webkit-align-self: @align;
		 -moz-align-self: @align;
		  -ms-align-self: @align;
			  align-self: @align;
	}

	.order(@order: 0) {
	  -webkit-order: @order;
		 -moz-order: @order;
		  -ms-order: @order;
			  order: @order;
	}
}

.border_radius(@tl; @tr; @br; @bl) {
	-webkit-border-radius: @arguments;
	-moz-border-radius: @arguments;
	border-radius: @arguments;
}

.border_radius(@radius) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}

.text() {
	.placeholder(@color: #777) {
		&:-moz-placeholder { color: @color; }
		&::-moz-placeholder { color: @color; }
		&:-ms-input-placeholder { color: @color; }
		&::-webkit-input-placeholder { color: @color; }
	}
}
.table() {
	.set_base() {
		width: 100%;

		th { 
			text-align: left;
		}
		
		td { 
			vertical-align: top; 
		}
		
		thead th { 
			vertical-align: bottom; 
		}
		
		caption { 
			text-align: left;
			font-style: italic;
		}
	}
	
	.padding(@padding) {
		th, td {
			padding: @padding;
		}
	}
	
	.striped(@background) {
		tr:nth-of-type(odd) td { 
			background: @background; 
		}
	}
	
	.striped(@background; @color) {
		tr:nth-of-type(odd) td { 
			background: @background; 
			color: @color; 
		}
	}
	
	.striped2(@background) {
		tr:nth-of-type(even) td { 
			background: @background; 
		}
	}
	
	.striped2(@background; @color) {
		tr:nth-of-type(even) td { 
			background: @background; 
			color: @color; 
		}
	}	
	
	.hover(@background) {
		tr:hover td { 
			background: @background;
			cursor: pointer;
		}
	}
	
	.hover(@background; @color) {
		tr:hover td { 
			background: @background; 
			color: @color;
			cursor: pointer;
		}
	}
	
	.caption(@background) {
		caption {
			background: @background;
		}
	}
	
	.caption(@background; @color) {
		caption {
			background: @background;
			color: @color;
		}
	}
	
	.caption(@background; @color; @font_size) {
		caption {
			background: @background;
			color: @color;
			font-size: @font_size;
		}
	}
	
	.caption(@background; @color; @font_size; @padding) {
		caption {
			background: @background;
			color: @color;
			font-size: @font_size;
			padding: @padding;
		}
	}
	
	.th(@background) {
		th {
			background: @background;
		}
	}
	
	.th(@background; @color) {
		th {
			background: @background;
			color: @color;
		}
	}
	
	.th (@background; @color; @font_size) {
		th {
			background: @background;
			color: @color;
			font-size: @font_size;
		}
	}
	
	.th(@background; @color; @font_size; @padding) {
		th {
			background: @background;
			color: @color;
			font-size: @font_size;
			padding: @padding;
		}
	}
	
	.cell(@background) {
		td {
			background: @background;
		}
	}
	
	.cell(@background; @color) {
		td {
			background: @background;
			color: @color;
		}
	}
	
	.cell(@background; @color; @font_size) {
		td {
			background: @background;
			color: @color;
			font-size: @font_size;
		}
	}
	
	.cell(@background; @color; @font_size; @padding) {
		td {
			background: @background;
			color: @color;
			font-size: @font_size;
			padding: @padding;
		}
	}
	
	.border() {
		.all(@border) {
			border: @arguments;
		}
		
		.cell() {
			.all(@border) {
				td {
					border: @border;
				}
			}
			
			.top(@border) {
				td {
					border-top: @border;
				}
			}
			
			.right(@border) {
				td {
					border-right: @border;
				}
			}
			
			.bottom(@border) {
				td {
					border-bottom: @border;
				}
			}
			
			.left(@border) {
				td {
					border-left: @border;
				}
			}
		}
	}
}

.type() {
	.set_base_margin(@margin: 10px; @margin_top: 10px) {
	
		p, hr, ul, ol, dl, blockquote, pre, address, fieldset, figure, table 
		{ 
			margin: 0 0 @margin 0;
		}

		* + p, * + hr, * + ul, * + ol, * + dl, * + blockquote, * + pre, 
		* + address, * + fieldset, * + figure, * + table 
		{ 
			margin-top: @margin_top;
		}
	}
	
	.heading() {
		.margin(@margin: 20px; @margin_top: 20px) {
		
			h1, h2, h3, h4, h5, h6 {
				margin: @margin 0;
			}

			* + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {
				margin-top: @margin_top;
			}
		}
		
		.margin_p(@h1; @h2; @h3; @h4; @h5; @h6) {
		
			h1 + p { margin-top: @h1; }
			h2 + p { margin-top: @h2; }
			h3 + p { margin-top: @h3; }
			h4 + p { margin-top: @h4; }
			h5 + p { margin-top: @h5; }
			h6 + p { margin-top: @h6; }
		}
		
		.bold(@bold) {
			h1, h2, h3, h4, h5, h6 {
				font-weight: @bold;
			}
		}

		.bold(@h1; @h2; @h3; @h4; @h5; @h6) {
			h1 {font-weight: @h1;}
			h2 {font-weight: @h2;}
			h3 {font-weight: @h3;}
			h4 {font-weight: @h4;}
			h5 {font-weight: @h5;}
			h6 {font-weight: @h6;}
		}
		
		.size(@f1; @f2; @f3; @f4; @f5; @f6) {
			h1 {font-size: @f1;}
			h2 {font-size: @f2;}
			h3 {font-size: @f3;}
			h4 {font-size: @f4;}
			h5 {font-size: @f5;}
			h6 {font-size: @f6;}
		}
		
		.color(@c1; @c2; @c3; @c4; @c5; @c6) {
			h1 {color: @c1;}
			h2 {color: @c2;}
			h3 {color: @c3;}
			h4 {color: @c4;}
			h5 {color: @c5;}
			h6 {color: @c6;}
		}
		
		.link(@c1; @c2; @c3; @c4; @c5; @c6) {
			h1 a {color: @c1;}
			h2 a {color: @c2;}
			h3 a {color: @c3;}
			h4 a {color: @c4;}
			h5 a {color: @c5;}
			h6 a {color: @c6;}
		}
		
		.line_height(@h) {
			h1, h2, h3, h4, h5, h6 {
				line-height: @h;
			}
		}
		
		.line_height(@h1; @h2; @h3; @h4; @h5; @h6) {
			h1 {line-height: @h1;}
			h2 {line-height: @h2;}
			h3 {line-height: @h3;}
			h4 {line-height: @h4;}
			h5 {line-height: @h5;}
			h6 {line-height: @h6;}
		}
	}
}

.colors_state(@class, @color) {
	
	.t-@{class}
	{
		color: @color; 
	}
	
	.bg-@{class}
	{
		background-color: @color; 
	}
	
	.hover-t-@{class}:hover, 
	.links-hover-t-@{class} a:not([class^="hover-t-"]):not([class*=" hover-t-"]):hover
	{
		color: @color !important; 
	}
	
	.hover-bg-@{class}:hover, 
	.links-hover-bg-@{class} a:not([class^="hover-bg-"]):not([class*=" hover-bg-"]):hover
	{
		background-color: @color !important; 
	}
}

// end of file