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

/*  BUTTONS
    USAGE:
   
    <a class="btn"><span></span></a>
   
    OR
   
    <span class="btn"><span></span></span>
   
    Add btn-highlight and other classes to modify btn
    <a class="btn btn-highlight"><span></span></a>
 
*/

@btn-color: #E0E0E0;
@btn-text-color: #666666; 
@btn-highlight-color: #cde0f8; /* #CBD8F3; */

.btn {
  text-decoration: none;
}

.btn span {
  display: inline-block;
  font: 12px arial;
  padding: 4px 10px;
  background: @btn-color;
  color: @btn-text-color;
  .border-radius(5px);
  cursor: pointer;
}

.btn-highlight span {
  background-color: @btn-highlight-color;
}

@button-color: #2761A3;
@button-highlight-color: #2f6baf;
@button-homepage-color: #a2a936;
@button-text-color: #ffffff;
@button2-color: #61a4d7;
@button2-highlight-color: #6cb0e4;

.button {
	height: 32px; 
	font-size: 15px; 
  padding: 3px 10px 4px; 
	border: none; 
	color: @button-text-color;
  background-color: @button-color;
  .border-radius(5px);  
}
.button:hover {
  background-color: @button-highlight-color;	
}

.button-homepage {
	height: 40px;
	font-size: 16px;
	padding: 8px 30px 10px;
	font-weight: bold;
	border: none; 
	color: @button-text-color;
	background-color: @button-homepage-color;
	.border-radius(5px);  
}

.button2 {
  height: 32px; 
  font-size: 15px; 
  padding: 3px 10px 4px; 
  border: none; 
  color: @button-text-color;
	background-color: @button2-color;
  .border-radius(5px);    	
}
.button2:hover {
  background-color: @button2-highlight-color;  
}