@import 'reset.less';
@import 'grid.less';


//////////
// GRID //
//////////

// Specify the number of columns and set column and gutter widths
@columns: 12;
@column-width: 60;
@gutter-width: 20;


////////////
// LAYOUT //
////////////

// colors
@bgcolor: #ccc;
@bgbox: #b4a892;
@text: #FFF;
@highlight: #ff3366;

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

body {
	background-color: @bgcolor;
	color: @text;
	font-family: franklin-gothic-ext-comp-urw,sans-serif;
	font-weight: 400;
	margin-top: 10px;	
}

footer {
	margin: 0 auto;
	width: 920px;
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 11px;
	margin-top: 10px;
}

h1 {
	font-size: 3em;
	font-weight: 700;
}

// center the contents
.center {
	width: 920px;
	margin: 0 auto;
	overflow: hidden;
	background: @bgbox;
	border: 20px solid @text;
	padding: 0 0 40px 0;
}

a {
	color: @text;
	text-decoration: none;
}
	a:hover {
		color: @highlight;
	} 

// nav
nav {
	margin: 0 auto;
	text-align: center;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 7em;
	margin-top: 40px;
	color: @highlight;
}

// home
.intro {
	.column(6);
	margin-top: 140px;
	margin-left: 60px;
	text-transform: uppercase;	
}
	.intro h1 {
		color: @highlight;
	}
	
	.intro p {
		font-weight: 400;
		font-size: 1.5em;
	}

.badge {
	.column(3);
	float: right;
	margin-top: 220px;
	margin-right: 40px;
	text-align: center;
	font-size: 1.4em;
	text-transform: uppercase;	
}

//content
article {
	.column(10);
	margin-left: 60px;
	margin-top: 160px;
	font-weight: 400;
	font-size: 1.5em;
	text-transform: uppercase;	
}

address {
	.column(3);
	margin-top: 20px;
	font-style: normal;	
}

	address h1, address h2 {
		text-transform: uppercase;
	}
	
	address h2 {
		font-size: 2em;
		margin-top: 20px;
	}
	
	address p {
		font-size: 1.4em;
		margin-bottom: 10px;
	}

.map {
	.column(7);
	margin-left: 60px;
	margin-top: 20px;
}

.residents {
	.column(4);
	margin-left: 60px;
	margin-top: 20px;
}
	.residents h1 {
		text-transform: uppercase;
	}
	.residents ul {
		text-transform: uppercase;
		font-size: 1.4em;
		margin-top: 10px;
	}
	
.gallery {
	.column(6);
	margin-top: 20px;
}

	.fadein { position: relative; width:376px; height:282px; float: right; border: 20px solid @text; }
	.fadein img { position:absolute; left:0; top:0; }

.work {
	.column(11);
	margin-left: 60px;
	margin-top: 20px;
}

	.work ul li{
		.column(1);
		margin-bottom: 20px;
	}
		.work ul li img {
			.rounded-corners;
		}