@orange: #F60;
@white: white;
@black: #222;

// 11*40+10*20
// @blocks*40+@blocks-1*20

.gridwith (@blocks: 16) {
	width: (@blocks * 40px) + ((@blocks - 1) * 20px);
}

html, body {
	background-color: @orange;
}

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

.rounded {
	.rounded-corners(5px);
	.box-color(#666);
}

div.subtitle {
	color: white;
	text-align: right;
}

div.textonintro {
	position: m;
	right: 5px;
	bottom: 5px;
}

p, h1, h2, h3, a {
	color: @white;
}

p {
	// font-size: 15pt;
}

a {
	text-decoration: underline;
}

.front {
}

#headerPhoto {
}

a.btn, div.topbar a {
	text-decoration: none;
}

.btn.primary {
	// background-color: @orange;
}

div.box {
	background-color: @black;
	padding: 10px;
	.rounded;
	.box-color(black);
	margin-top: 20px;
}

.right {
	text-align: right;
}

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
	box-shadow: @arguments;
	-moz-box-shadow: @arguments;
	-webkit-box-shadow: @arguments;
}

.box-color (@color) {
	.box-shadow(1px, 2px, 1px, @color);
}

img.photo {
	.gridwith(8);
	height: 150px;
}

.margintop15 {
	margin-top: 15px;
}