::selection, ::-moz-selection { background: #0B74AB; color: #fff; text-shadow: 0 0; }

* { -webkit-font-smoothing: antialiased; }

body { color: #000; font: 12px/20px 'helvetica neue', helvetica, arial, sans-serif; }
a, a:visited { text-decoration: none; color: #0B74AB; }
a:hover { color: #000; }
h2 { font: 22px/28px helvetica; color: #ff483f; color: #000; }
h3 { font-size: 16px; margin-bottom: 20px; }
h4 { font-weight: normal; text-transform: uppercase; }
ul, p { margin-bottom: 20px; }
img { display: block; max-width: 100%; margin-bottom: 20px; height: auto; }

header { padding: 20px 0; margin-bottom: 40px; border-top: solid 7px #0B74AB; border-bottom: double 4px #ddd; }
header h1 { float: left; margin-left: 10px; }
header h1 a { display: block; width: 76px; height: 76px; background: url(/img/new_logo.png) no-repeat top left; text-indent: -9999px; }
header nav { overflow: hidden; float: right; margin-right: 10px; }
header nav a { float: left; margin-left: 40px; }
header a, header a:visited { color: #000; font-size: 16px; line-height: 76px; }
header a:hover { color: #999; background-position: bottom left; }

footer {
	background: #303030;
	background-image: linear-gradient(bottom, rgb(48,48,48) 60%, rgb(32,32,32) 100%);
	background-image: -o-linear-gradient(bottom, rgb(48,48,48) 60%, rgb(32,32,32) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(48,48,48) 60%, rgb(32,32,32) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(48,48,48) 60%, rgb(32,32,32) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(48,48,48) 60%, rgb(32,32,32) 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.6, rgb(48,48,48)), color-stop(1, rgb(32,32,32)));
	padding: 40px 0; text-align: center; color: #888; margin-top: 20px;
}

#intro { text-align: center; border-bottom: solid 1px #ddd; padding: 80px 0; margin-top: -40px; margin-bottom: 40px; }
#intro #hello { font: bold 54px/58px helvetica; letter-spacing: -2px; margin-bottom: 10px; text-shadow: 3px 3px 0 #fff, 5px 5px 0 #eee; }
#intro #tag { font: 28px/38px helvetica; color: #999; letter-spacing: -1px; margin-bottom: 20px; }
#intro #icons img { display: inline-block; margin: 0 20px; height: 100px; }

.project { margin-bottom: 40px; }
.project a { color: #000; display: block; }
.project a .imgwrap { height: 200px; overflow: hidden; margin-bottom: 10px; border: solid 5px #eee; }
.project a .imgwrap img { width: auto; max-width: none; }
.project a p { color: #999; font-style: italic; margin: 0; }
.project a:hover .imgwrap { border-color: #ddd; }

#project_title { border-bottom: solid 1px #ddd; padding-bottom: 14px; margin-bottom: 20px; }
#project_title h2 { font: 32px/38px helvetica; letter-spacing: -1px; }
#project_title a { float: right; line-height: 38px; }

#project_details > div { margin-bottom: 20px; }

.grey_text { color: #777; }

@media screen and (max-width:960px) {
	body { min-width: 640px; }

	#intro { padding: 40px 0; }
	#project_details { width: 620px; }

	.container_12 { width: 640px; }
	.container_12 .grid_12 { width: 620px; }
}

@media screen and (max-width:640px) {
	body { min-width: 320px; }
	header { padding: 20px 0 10px; }
	header h1 { width: 76px; height: 76px; float: none; margin: 0 auto; }
	header nav { float: none; margin: 0; }
	header nav a, header nav a:hover { margin: 0; line-height: 44px !important; width: 50%; text-align: center; }

	#intro { display: none; }
	#project_title a { display: none; }
	#project_details { width: 300px; }
	#project_images img { margin: 0 0 20px; }

	.container_12 { width: 320px; }
	.container_12 .grid_12, .container_12 .grid_8, .container_12 .grid_6 { width: 300px; }
}