@import url(constants.less);
@import url(classes.less);

/*-------------------------------------
---------------------------------------
links
---------------------------------------
-------------------------------------*/
.link {
	text-decoration: none;
	color: @blue;
	background-color: rgba(247, 250, 252,0.5);
	padding: 1px 4px 0px 4px;
	line-height: 18px;
	border-bottom: 2px solid rgba(0,0,0,0);
	font-size: 15px;
	.transition(all,0.1s);
	
}

.link:hover {
	background-color: rgba(247, 250, 252,0.9);
	border-bottom: 2px solid #a0c4d9;
	
	

	.border-bottom-left(3px, 3px);
	.border-bottom-right(3px, 3px);

	color: @blueDark3;
}




/*-------------------------------------
---------------------------------------
buttons
---------------------------------------
-------------------------------------*/
.buttonSmall {
	text-decoration: none;
	display: block;
	margin: 0;
	cursor: pointer;
	.user-select();
	position: relative;
	
	color: #fff;
	text-shadow: 0 -1px 0 @blueDark5;

	border: 1px solid @blueDark1;

	border-bottom: 1px solid @blueDark5;
	border-top: 1px solid @blueDark3;

	.linear-gradient(@blue, @blueBright1);
	.border-radius(3px);
	.box-shadow-inset(0px, 1px, 1px, 0, @blueBright2);
	
	font-family: 'Signika', sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	
	padding: 7px 24px 8px 24px;
	width: auto; 
}


.buttonSmall:hover{	
	.linear-gradient(@blueBright1, @blueBright2);
	.box-shadow-inset(0px, 1px, 0, 0, @blueDark1);
	background-color: @blueBright1;
}

.buttonSmall:active {
	
	border: 1px solid @blueDark3;
	border-top: 2px solid @blueDark6;
	border-left: 2px solid @blueDark6;
	border-bottom: 1px solid @blueDark3;
	padding-top: 6px;
	padding-left: 23px;
	.box-shadow-double-inset(0px, 0px, 8px, 4px, @blueDark1, 0px, 1px, 0, 0, #eeeeee);
	
}



.buttonSmallOverlay {
	position: absolute;
	top:0px;
	left: 0px;
	bottom:0px;
	right: 0px;




}



















/*-------------------------------------
---------------------------------------
inputs
---------------------------------------
-------------------------------------*/
.inputField {
	width: 300px;
	clear: both;
	float: left;
	padding: 8px;
	margin: 0;
	.appereance();
	
	color: rgba(0,0,0,0.5);
	background-color: rgba(255,255,255,0.8);
	border: 3px solid rgba(255,255,255,0);

	.transition(all, 0.1s);
	font-size: 20px;
}

.inputField:hover {
	color: rgba(0,0,0,0.7);
	background-color: rgba(255,255,255,0.9);
	border: 3px solid rgba(255,255,255,1);
}


.inputField:focus{
	color: rgba(0,0,0,0.9);
	background-color: rgba(255,255,255,1);
	border: 3px solid rgba(255,255,255,1);
	outline: none;

}