@import 'libraries.css';
@import 'grids.css';
@import '_fullwidth-slideshow';
@import '_mobile';

html, body {
	font-family: 'avenir next', sans-serif;
	font-weight: 500;
	background: #fff;
	font-size: 12px;
}

@gutter: 20px;
@col-width: 240px;

a {
	color: #000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}


hr {
	border-left: none;
	border-right: none;
	border-top: 1px solid #999;
	border-bottom: none;
	padding-bottom: 5px;
	clear: both;
}

h2 {
	font-weight: 700;
}

h3 {
	font-weight: 600;
}

.row {
	overflow: hidden;
	_overflow: visible;
	_zoom: 1;
}

.column {
	float: left;
}

p {
	margin-bottom: 1em;
}

p.dim {
	color: #ccc;
	
	a {
		color: #ccc;
	}
}

body.profile {
	#content {
		section {
			margin-bottom: 10px;
			padding-bottom: 10px;
			border-bottom: 1px solid #000;
		}
	}
	.clients {
		a {
			text-decoration: underline;
		}
	}
	.clients.featured {
		li {
			margin-bottom: @gutter;
			img {
				background: #f4f4f4;
				-webkit-transition: background 0.2s linear;
			}
			&:hover {
				img {
					background: #ccc;
					-webkit-transition: background 0.2s linear;
				}
			}
		}
		span {
			display: none;
		}
		a {

		}
	}
}

article.news {
	border-bottom: 1px solid #000;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

#people {
	img {
		width: 240px;
	}
}

.subnav a {
	color: #ccc;
	-webkit-transition: color 0.2s linear;
	&:hover {
		color: #000;
		-webkit-transition: color 0.2s linear;
	}
}

#brick-name {
	display: block;
	margin-top: 30px;
}

#logo {
	text-indent: -9000px;
	background: url(../img/logo.png);
	display: block;
	width: 33px;
	height: 56px;
}

#page {
	margin: 0 auto;
	padding: 20px;
}

.projects {
	li {
		float: left;
		margin-right: @gutter - 2;
		width: @col-width + 2;
		height: 180px;
		img {
			border: 1px solid #ccc;
			-webkit-filter: grayscale(1.0);
			-webkit-transition: -webkit-filter 0.1s linear;
		}
		&:hover img {
			-webkit-filter: grayscale(0.0);
			-webkit-transition: -webkit-filter 0.1s linear;
		}
	}
}

input[type="text"] {
	border: 1px solid #ccc;
	padding: 3px;
	outline: none;
	width: 232px;
	&:focus {
		border: 1px solid #000;
	}
}

.project-detail {
	h2 {
		font-size: 18px;
	}
	section {
		max-width: 760px;
	}
	.images {
		li {
			margin-bottom: 10px;
			img {
				max-width: 100%;
				// border: 1px solid #ccc;
			}
		}
		
	}
	aside {
		p {
			font-size: 19px;
		}
		.padding {
			padding-left: 20px;
			padding-right: 10%;
		}
	}
}

ul.clients {
	.row;
	li {
		float: left;
		width: @col-width;
		margin-right: @gutter;
	}
}