.lighter { font-weight:lighter; }
.bolder { font-weight:bolder; }
.inline { display:inline-block !important; }
.block { display:block !important; }

.center , .align-center{ text-align:center; }
.align-left { text-align:left; }
.align-right { text-align:right; }
.middle { vertical-align:middle; }
.position-relative { position:relative; }
.position-absolute { position:absolute; }


.dark { color:@ace-dark !important; }
.white { color:@ace-white !important; }
.red { color:@ace-red !important; }
.light-red { color:@ace-light-red !important; }
.blue { color:@ace-blue !important; }
.light-blue { color:@ace-light-blue !important; }
.green { color:@ace-green !important; }
.light-green { color:@ace-light-green !important;}
.orange { color:@ace-orange !important; }
.light-orange {color:@ace-light-orange !important;}
.purple { color:@ace-purple !important; }
.pink { color:@ace-pink !important; }
.pink2 { color:@ace-pink2  !important; }
.brown { color:@ace-brown !important; }
.grey { color:@ace-grey !important; }
.light-grey { color:@ace-light-grey !important; }



.biggerX (@index) when (@index < 310) {
	.bigger-@{index} { font-size: unit(@index,~"%"); }
	.biggerX(@index + 10);
}
.biggerX(110);
.bigger-125 { font-size:125%;}
.bigger-175 { font-size:175%; }
.bigger-225 { font-size:225%; }
.bigger-275 { font-size:275%; }

.smallerX (@index) when (@index > 10) {
	.smaller-@{index} { font-size: unit(@index,~"%"); }
	.smallerX(@index - 10);
}
.smallerX(90);
.smaller-75 { font-size:75%;}

.widthX (@index) when (@index < 105) {
	.width-@{index} { width: unit(@index,~"%") !important; }
	.widthX(@index + 5);
}
.widthX(20);
.width-48 { width: 48% !important; }


.no-padding { padding:0; }
.no-padding-bottom { padding-bottom:0; }
.no-padding-top { padding-top:0; }
.no-padding-left { padding-left:0; }
.no-padding-right { padding-right:0; }
.no-margin { margin:0; }
.no-margin-bottom { margin-bottom:0; }
.no-margin-top { margin-top:0; }
.no-margin-left { margin-left:0; }
.no-margin-right { margin-right:0; }
.no-border { border:none; }
.no-border-bottom { border-bottom:none; }
.no-border-top { border-top:none; }
.no-border-left { border-left:none; }
.no-border-right { border-right:none; }

.overflow-hidden {overflow:hidden;}
.overflow-auto {overflow:auto;}
.overflow-scroll {overflow:scroll;}
.overflow-visible {overflow:visible;}

/* <hr /> like spacing by using div, e.g <div class="hr hr-32"></div> */
.hr {
 display:block;
 height:0px; overflow:hidden; font-size:0;
 border-top:1px solid #E3E3E3;
 margin:12px 0;
}
.hr-double {
 height:1px;
 border-top:1px solid #E3E3E3;
 border-bottom:1px solid #E3E3E3;
}
.hr.dotted { border-top-style:dotted;}
.hr-double.dotted { border-bottom-style:dotted;}


.hrX (@index) when (@index > 0) {
	.hr-@{index}, .hr@{index} { margin:unit(@index,px) 0; }
	.hrX(@index - 2);
}
.hrX(32);



/* some spacing classes, use like <div class="space-24"></div> */
.space() {
	max-height:0;
	overflow:hidden;
}
.space , .vspace { .space(); margin:12px 0; }
.vspace { display:none; } /* visible only on smaller devices where spans are stacked on top of each other */

.spaceX (@index) when (@index > 0) {
	.space-@{index} { .space(); margin:unit(@index,px) 0; }
	.vspace-@{index} { .space(); margin:unit(@index,px) 0; display:none; }
	.spaceX(@index - 2);
}
.spaceX(32);//produce spaces







/* headers */
.header {
 line-height:28px;
 margin-bottom:16px;
 margin-top:18px;
 padding-bottom:4px;
 border-bottom:1px solid #CCC;
 
 &.blue {
	border-bottom-color:desaturate(lighten(@ace-blue, 35%), 10%);
 }
 &.green {
	border-bottom-color:desaturate(lighten(@ace-green, 35%), 6%);
 }
 &.purple {
	border-bottom-color:desaturate(lighten(@ace-purple, 28%), 5%);
 }
 &.orange {
	border-bottom-color:desaturate(lighten(@ace-orange, 25%), 5%);
 }
 &.red {
	border-bottom-color:desaturate(lighten(@ace-red, 30%), 5%);
 }
 &.grey {
	border-bottom-color:desaturate(lighten(@ace-grey, 30%), 5%);
 }
 &.pink {
	border-bottom-color:desaturate(lighten(@ace-pink, 32%), 5%);
 }
 &.pink2 {
	border-bottom-color:desaturate(lighten(@ace-pink2, 20%), 5%);
 }
 &.light-blue {
	border-bottom-color:desaturate(lighten(@ace-light-blue, 15%), 5%);
 }
 &.light-red {
	border-bottom-color:desaturate(lighten(@ace-light-red, 15%), 5%);
 }
 &.light-green {
	border-bottom-color:desaturate(lighten(@ace-light-green, 15%), 5%);
 }
 &.brown {
	border-bottom-color:desaturate(lighten(@ace-brown, 32%), 5%);
 }

  > [class*="icon-"] {
	margin-right:2px;
  }
}

.no-radius { .border-radius(0) !important; }

.action-buttons a {
  margin:0 2px;
  display:inline-block;
  opacity:0.85;
   .transition(~"all 0.1s");
  
  &:hover {
	text-decoration:none;
	.transform(~"scale(1.2)");
	opacity:1;
  }
}