/* ==============================
CSS3 Library for MoreLess System
version 1.0

Developed By:
Fernando Aureliano - @Pailoro

- License:

* This program is free software. It comes without any warranty, to
* the extent permitted by applicable law. You can redistribute it
* and/or modify it under the terms of the Do What The Fuck You Want
* To Public License, Version 2, as published by Sam Hocevar. See
* http://sam.zoy.org/wtfpl for more details. 
===============================*/

.corners( @radius: 5px ) {
			-webkit-border-radius: @radius;
	   		-moz-border-radius: @radius;
	   		-o-border-radius: @radius;
	        border-radius: @radius;		
}


.corner( @topright: 5px, @bottomright: 5px, @bottomleft: 5px, @topleft: 5px ) {
		   -webkit-border-top-right-radius: @topright;
		-webkit-border-bottom-right-radius: @bottomright;
	 	 -webkit-border-bottom-left-radius: @bottomleft;
	        -webkit-border-top-left-radius: @topleft;
		      -moz-border-top-right-radius: @topright;
	   	   -moz-border-bottom-right-radius: @bottomright;
		    -moz-border-bottom-left-radius: @bottomleft;
		       -moz-border-top-left-radius: @topleft;
		     -o-border-bottom-right-radius: @bottomright;
		      -o-border-bottom-left-radius: @bottomleft;
		         -o-border-top-left-radius: @topleft;
			 	   border-top-right-radius: @topright;
				border-bottom-right-radius: @bottomright;
				 border-bottom-left-radius: @bottomleft;
					border-top-left-radius: @topleft;		
}
// -------------------------------------------------- what it does: http://www.css3.info/preview/rounded-border/
 
.shadow( 
	@x: 4px, 
	@y: 4px, 
	@blur: 5px, 
	@spread: 0, 
	@color: #000 
) {
	-webkit-box-shadow: @x @y @blur @spread @color;
	   -moz-box-shadow: @x @y @blur @spread @color;
	     -o-box-shadow: @x @y @blur @spread @color;	
			box-shadow: @x @y @blur @spread @color;	
}
// -------------------------------------------------- what it does: http://www.css3.info/preview/box-shadow/

.glow(  
	@blur: 5px, 
	@spread: 0, 
	@color: #000 
) {
	-webkit-box-shadow: 0 0 @blur @spread @color;
	   -moz-box-shadow: 0 0 @blur @spread @color;
	     -o-box-shadow: 0 0 @blur @spread @color;	
			box-shadow: 0 0 @blur @spread @color;	
}
// -------------------------------------------------- what it does: http://www.css3.info/preview/box-shadow/
 
.animate(
	@elements: all,
	@time: 0.3s,
	@easing: ease-in-out
) {
	-webkit-transition: @elements @time @easing;
	   -moz-transition: @elements @time @easing;
	     -o-transition: @elements @time @easing;
		  	transition: @elements @time @easing;			
}


.animation(
	@elements: all,
	@time: 2s,
	@value: infinite,
	@easing: linear
) {
	-webkit-animation: @elements @time @value @easing;
	   -moz-animation: @elements @time @value @easing;
	     -o-animation: @elements @time @value @easing;
     	    animation: @elements @time @value @easing;		
}


// -------------------------------------------------- what it does: http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/

.opacity(@opacity: 0.5) {
		  -moz-opacity: @opacity;
		-khtml-opacity: @opacity;
	   -webkit-opacity: @opacity;
	        -o-opacity: @opacity;
			   opacity: @opacity;
			-ms-filter: ~"'progid:DXImageTransform.Microsoft.Alpha(Opacity=" @opacity*100 ~")'";  
   				filter: ~"alpha(opacity=" @opacity*100 ~")";
}
// -------------------------------------------------- what it does: http://www.w3schools.com/css/css_image_transparency.asp

.rotate( @deg: 5deg ){ 
  -webkit-transform: rotate(@deg);
  	 -moz-transform: rotate(@deg);
  	   -o-transform: rotate(@deg);
  		  transform: rotate(@deg);
}

.origin(@px: 0px){ 
  -webkit-transform-origin: @px;
  	 -moz-transform-origin: @px;
  	   -o-transform-origin: @px;
  		  transform-origin: @px;
}
// -------------------------------------------------- what it does: no link yet
 
.transform(
	@params 
) {
	-webkit-transform: @params;
  	   -moz-transform: @params;
  	     -o-transform: @params;
  	        transform: @params;
}

.transform-style(
	@params 
) {
	-webkit-transform-style: @params;
  	   -moz-transform-style: @params;
  	     -o-transform-style: @params;
  	        transform-style: @params;
}

.backface(
	@params 
) {
	-webkit-backface-visibility: @params;
  	   -moz-backface-visibility: @params;
  	     -o-backface-visibility: @params;
  	        backface-visibility: @params;
}
// -------------------------------------------------- what it does: http://www.zenelements.com/blog/css3-transform/

.2borders( 
	@color1: #993300,
	@color2: #FF9900,
	@width:	 1px,
	@radius: 0
	
) {
	border: @width solid @color1;
 
	-webkit-box-shadow: 0 0 0 1px @color2;	
	   -moz-box-shadow: 0 0 0 1px @color2;
	     -o-box-shadow: 0 0 0 1px @color2;
	   		box-shadow: 0 0 0 1px @color2;
	   		
	   		.corners ( @radius )
 
}
// -------------------------------------------------- what it does: see link below
 
.3borders( 
	@color1: #993300,
	@color2: #FF9900,
	@color3: #009900,
	@width:	 1px,
	@radius: 0
) {
	border: @width solid @color1;
 
 
	-webkit-box-shadow: 0 0 0 1px @color2, 0 0 0 2px @color3;	
	   -moz-box-shadow: 0 0 0 1px @color2, 0 0 0 2px @color3;
	   	 -o-box-shadow: 0 0 0 1px @color2, 0 0 0 2px @color3;
	   		box-shadow: 0 0 0 1px @color2, 0 0 0 2px @color3;
	   		
	   		.corners ( @radius )
}
// -------------------------------------------------- what it does:  http://weston.ruter.net/2009/06/15/multiple-borders-via-css-box-shadow/

.flex( @val: 1 ) {
	-webkit-box-flex: @val;
	   -moz-box-flex: @val;
	     -o-box-flex: @val;
	        box-flex: @val;
}
// -------------------------------------------------- what it does:  http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
 
.resize( @direction: both ) {
	-webkit-resize: @direction;
	   -moz-resize: @direction;
	     -o-resize: @direction;
	        resize: @direction;
}
// -------------------------------------------------- what it does: http://www.w3schools.com/css3/css3_pr_resize.asp
 
.gradient( 
	@start: #000, 
	@end: #fff,
	@switch: 100%
) {
	background:  @start;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(@start), color-stop(@switch, @end));
	background: -moz-linear-gradient(top, @start, @end @switch);
	background: -o-linear-gradient(top, @start, @end @switch);
	background: linear-gradient(top, @start, @end @switch);
}
// -------------------------------------------------- what it does: http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/
 
.columns(
	@count: 3,
	@gap: 10
) {
	-webkit-column-count: @count;
	   -moz-column-count: @count;
	     -o-column-count: @count;
	        column-count: @count;
 
	  -webkit-column-gap: @gap;
	     -moz-column-gap: @gap;
	       -o-column-gap: @gap;
	          column-gap: @gap;
}
// -------------------------------------------------- what it does: http://www.quirksmode.org/css/multicolumn.html
 
.boxSize( @type: border-box ) {
	-webkit-box-sizing: @type;
	   -moz-box-sizing: @type;
	     -o-box-sizing: @type;
	        box-sizing: @type;		
}
// -------------------------------------------------- what it does: http://css-tricks.com/box-sizing/

.appearance( @type: none) {
	-webkit-appearance: @type;
	   -moz-appearance: @type;
	     -o-appearance: @type;
	        appearance: @type;		
}