/*-----------------------------------------------------------------------------
    GRID
-----------------------------------------------------------------------------*/
@import 'grid.less';
@containerWidth : 780px;
@gutterWidth: 30px;
@columns: 6;

/*-----------------------------------------------------------------------------
    COLORS
-----------------------------------------------------------------------------*/
@textColor:				#999;
@linkColor:				#999;
@textColorLight:		#ccc;

/*-----------------------------------------------------------------------------
    FONTS
-----------------------------------------------------------------------------*/
@font-face {
    font-family: 'Bebas Neue';
    src: url('../fonts/BebasNeue-webfont.eot');
    src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BebasNeue-webfont.woff') format('woff'),
         url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@defaultFont: 			georgia, times, serif;
@defaultFontSize: 		16px;
@defaultLineHeight: 	25px;
@headingFont:			'Bebas Neue', Arial, Helvetica, Sans-serif;

/*-----------------------------------------------------------------------------
    HTML TAGS
-----------------------------------------------------------------------------*/
body {
	background-image: url(../img/bg.page.jpg);
	background-repeat: repeat-x;
	color: @textColor;
	font-family: @defaultFont;
	font-size: @defaultFontSize;
	p {
		line-height: @defaultLineHeight;
		margin-bottom: @defaultLineHeight;
	}
	h1, h2, h3 {
		color: @textColorLight;
		font-family: @headingFont;
		margin-bottom: @defaultLineHeight;
		text-transform: uppercase;
		font-weight: normal;
	}
	h1 {
		font-size: 60px;
		line-height: 60px;
	}
	h2 {
		font-size: 36px;
		line-height: 36px;
	}
	h3 {
		font-size: 24px;
		line-height: 24px;
		margin-bottom: @defaultLineHeight / 2;
	}
	small {
		font-size: 12px;
	}
	a {
		border-bottom: solid 1px @linkColor;
		color: @linkColor;
		text-decoration: none;
		&:hover {
			border-color: #dc143c;
			color: #dc143c;
		}
	}
}

/*-----------------------------------------------------------------------------
    HEADER
-----------------------------------------------------------------------------*/
header {
	padding-top: @defaultLineHeight;
	padding-bottom: @defaultLineHeight;
	text-align: center;
	p, h1 {
		padding-left: @gutterWidth / 2;
		padding-right: @gutterWidth / 2;
	}
}

/*-----------------------------------------------------------------------------
    PORTFOLIO
-----------------------------------------------------------------------------*/
#portfolio {
	background-image: url(../img/bg.roughcloth.png);
	padding-top: @defaultLineHeight + @gutterWidth;
	padding-bottom: @defaultLineHeight;
	ul {
		.clearfix;
		li {
			.column(2);
			margin-bottom: @gutterWidth;
			a {
				border: none;
				img {
					border: solid 1px #ddd;
					background: #fff;
					display: block;
					height: 150px;
					width: 200px;
					padding: 14px;
				}
				img.hidden {
					display: none;
				}
			}
		}
	}
}

/*-----------------------------------------------------------------------------
    CONTACT
-----------------------------------------------------------------------------*/
#contact {
	.clearfix;
	font-size: 13px;
	padding-top: @defaultLineHeight + @gutterWidth;
	padding-bottom: @defaultLineHeight + @gutterWidth;
	#address {
		.column(2);
		padding-top: 60px;
	}
	#map {
		.column(4);
	}
}

/*-----------------------------------------------------------------------------
    FOOTER
-----------------------------------------------------------------------------*/
footer {
	padding-bottom: @defaultLineHeight;
	text-align: center;
}

/*-----------------------------------------------------------------------------
    COMMON CLASSES
-----------------------------------------------------------------------------*/