@containerWidth : 1000px;

html, body {
	position         : relative;
	height           : 100%;
	min-height       : 100%;
	font-family      : 'Lato', sans-serif;
	color            : @copyGrey;
	background-color : #EEEEEE;
}
.container {
	position      : relative;
	max-width     : @containerWidth;
	padding-right : 20px;
	padding-left  : 20px;
	margin        : 0 auto;
}
h1 {
	margin-top    : 10px;
	margin-bottom : 15px;
	font-size     : 2em;
}
h2 {
	margin-top    : 10px;
	margin-bottom : 15px;
	font-size     : 1.5em;
	font-weight   : 900;
}
h3 {
	margin-top    : 5px;
	margin-bottom : 7px;
	font-size     : 1em;
	font-weight   : 900;
}
p {
	margin-bottom : 1em;
	font-size     : 16px;
	line-height   : 1.5em;
	color         : @copyGrey;
}
code {
	font-family      : 'Courier', "mono";
	color            : black;
	white-space      : pre;
	background-color : #F8F8F8;
}
a { color : inherit; }
strong { font-weight : bold; }
button {
	.button();
}
.button(@backgroundColor : @green) {
	.animate(background-color);
	display          : inline-block;
	padding          : 0.6em 1.2em;
	font-family      : 'Lato', "Helvetica", "Arial", sans-serif;
	font-size        : 15px;
	color            : white;
	text-decoration  : none;
	cursor           : pointer;
	outline          : none;
	background-color : @backgroundColor;
	border           : none;
	&:hover { background-color : darken(@backgroundColor, 5%); }
	&:active { background-color : darken(@backgroundColor, 10%); }
	&:disabled { background-color : @silver !important; }
}
.iconButton(@backgroundColor : @green) {
	padding          : 0.6em;
	font-size        : 14px;
	color            : white;
	text-align       : center;
	cursor           : pointer;
	background-color : @backgroundColor;
}