/*
Theme Name: SuttonBeresCuller 2012
Theme URI: http://suttonberesculler.com
Description: Design & Development by Unkardinal
Author: Shaun Kardinal
Author URI: http://unkardinal.com
*/

html, body {
	height: 100%;
	}
body {
	background: #fff;
	color: #4f4f4f;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: .05em;

	-webkit-text-size-adjust: none;
  	}
body, 
input[type="text"],
nav,
h1 span { 
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important; 
	font-weight: 300;
	}
a {
	color: #4f4f4f;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	}
a:hover {
	border-color: #4f4f4f;
	}
p {
	max-width: 600px;
	}
p, 
nav, 
ul,
iframe.video,
.fluid-width-video-wrapper {
	margin-bottom: 15px;
	}
h1, 
h2, 
h3, 
header menu {
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 12px;
	}
h1, 
strong,
.current h2,
.news h2,
.posts-nav,
.post-title,
.cv h2,
.cv h3,
em {
	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important; 
	font-weight: 500;
	}
h2, 
h3, 
header menu,
.posts-nav span {
	font-weight: 300;
	}
h3 + h3,
h3 + p,
h2 + p {
	margin-top: 30px;
	}
input[type="text"] {
	border: solid #ccc;
	border-width: 0 0 1px 0;
	padding: 1px 3px;

	-webkit-box-shadow: inset 0 2px 3px #dfdfdf;
	   -moz-box-shadow: inset 0 2px 3px #dfdfdf;
			box-shadow: inset 0 2px 3px #dfdfdf;
	}

.wrap {
	position: relative;
	min-height: 100%;

	-ms-overflow-x: hidden;
		overflow-x: hidden;
	}

header {
	position: fixed;
	width: 100%;
	height: 75px;
	padding: 45px 60px 15px;
	background: #fff;
	z-index: 10;
	}
header h1,
header menu,
header menu li,
header .edit-link,
ul.filter li {
	display: -moz-inline-stack;
	display: inline-block;
	zoom: 1;
	*display: inline;
/* 	^ http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
	line-height: 15px;
	margin-right: 7px;
	}
header menu {
	font-size: 0;
	height: 15px;
	}
header menu li:before {
	content: "\00B7";
	margin-right: 7px;
	}
header menu ul {
	margin: 0;
	}
header menu li {
	font-size: 12px;
	opacity: .25;
	}
header:hover menu li {
	opacity: .99999;
	}
header:hover menu li:nth-child(2) {
	-webkit-transition-delay: .025s;
	}
header:hover menu li:nth-child(3) {
	-webkit-transition-delay: .05s;
	}
header:hover menu li:nth-child(4) {
	-webkit-transition-delay: .075s;
	}
header:hover menu li:nth-child(5) {
	-webkit-transition-delay: .1s;
	}
header:hover menu li:nth-child(6) {
	-webkit-transition-delay: .125s;
	}
header:hover menu li:nth-child(7) {
	-webkit-transition-delay: .15s;
	}
header:hover menu li:nth-child(8) {
	-webkit-transition-delay: .175s;
	}
header:hover menu li:nth-child(9) {
	-webkit-transition-delay: .2s;
	}
header:hover menu li:nth-child(10) {
	-webkit-transition-delay: .225s;
	}
header menu li a {
	display: inline-block;
	}
header menu li.current-menu-item a,
ul.filter li.active a {
	cursor: default;
	border-color: #4f4f4f;
	}
header .edit-link {
	position: absolute;
	right: 15px;
	top: 15px;
	}


section.sbc {
	position: relative;
	margin: 75px 60px 0;
	z-index: 1;
	}
.container {
	word-wrap:break-word
	}

.description {
	position: absolute;
	left: 0;
	right: 0;
	height: 45px;
	margin: 0 -60px;
	padding: 15px 60px;
	background: #dfdfdf;
	}
.home-wrap {
	position: relative;
	padding-top: 30px;
	}
.current:not(:first-of-type),
.home-news {
	margin-top: 60px;
	}
.current,
.home-news {
	line-height: 1.5;
	position: relative;
	}
.home-thumb {
	max-width: 500px;
	}
.home-thumb img {
	width: 100% ;
}
.current .photo {
	width: 100%;
	height: 324px; /* .6 ratio to 540 above */
	background-color: #3e3e3e;
	}
.home-news {
	margin: 60px -60px 0;
	padding: 0 60px;
	background: #f1f1f1;
	}
.home-news .grid {
	max-width: 1140px;
	}
.home-news .grid > div {
	padding-bottom: 15px;
	}
.home-news h1 {
	padding: 30px 0 15px;
	}
.home-news h2 {
	line-height: 1.2;
	margin-bottom: 5px;
	}
.home-news img {
	margin-bottom: 15px;
	}

ul.filter {
	position: fixed;
	top: 75px;
	width: 100%;
	height: 45px;
	margin: 0 -60px;
	padding: 15px 60px;
	background: #f1f1f1;
	#background: #3e3e3e;
	#color: #dfdfdf ;
	text-transform: uppercase;
	font-size: 0;
	z-index: 9;
	}
ul.filter li {
	font-size: 12px;
	}
ul.filter li a.Current,
ul.filter li a.Uncategorized,
ul.filter li a.Process {
	display: none;
	}
.portfolio {
	margin-right: -30px;
	padding-top: 105px;
	}
.portfolio {
	margin-bottom: 30px;
	}
.portfolio .project {
	float: left;
	width: 180px;
	height: 185px;
	overflow: hidden;
	margin: 0 30px 30px 0;
	vertical-align: top;
	position: relative;
	}
.portfolio h2 {
	margin: 15px 0 0;
	}

.project-title {
	position: fixed;
	top: 75px;
	width: 100%;
	height: 45px;
	margin: 0 -60px;
	padding: 15px 60px;
	background: #f1f1f1;
	z-index: 8; 
	}
.project-title nav {
	position: absolute;
	right: 60px;
	top: 15px;
	text-align: center;
	width: 150px;
	text-transform: uppercase;
	font-size: 0;
	}
.project-title nav span {
	font-size: 12px;
	}
.project-title nav span:after {
	content: "\00B7";
	margin: 0 4px;
	display: inline;
	}
.project-title nav span.similar:after {
	content: "";
	display: none;
	}
.project-title nav span.similar:hover {
	cursor: pointer;
	border-bottom: 1px solid #4f4f4f;
	}
.similar-projects {
	position: fixed;
	top: 120px; 
	right: -150px;
	width: 150px;
	background: #f1f1f1;
	padding: 0 15px;
	text-transform: uppercase;
	z-index: 7;
	font-size: 11px;
	line-height: 12px;
	}
.similar-projects.on {
	right: 60px;
	}
.similar-projects h2 { display: none }
.similar-projects .project {
	width: 120px;
	margin: 15px 0 0 0;
	}
.similar-projects img {
	margin-bottom: 5px;
	}
.content,
.post {
	padding: 60px 0 30px;
	width: 600px;
	line-height: 1.5;
	}
.content a,
.post a,
.current a {
	border-color: #dfdfdf;
	}
.content a:hover,
.post a:hover,
.current a:hover {
	border-color: inherit;
	}
.gallery { 
	margin: 0 -30px 30px 0;
	}
.single-post-gallery {
	margin: 60px -30px -45px 0;
	}
.image { 
	display: block;
	float: left;
	margin: 0 30px 30px 0;
	}
.image img { 
	#max-height: 150px;
	}
.solo {
	display: inline-block;
	margin: 0 30px 30px 0;
	}
.solo p {
	margin-top: 15px;
	}

.pdf-attachments li {
	list-style: disc;
	margin-left: 2em;
	}

.cv h3 {
	float: left;
	clear: left;
	display: block;
	width: 50px;
	}
.cv ul {
	margin-left: 50px
	}
.cv h2:not(:first-of-type) {
	border-top: 2px solid #f1f1f1;
	padding-top: 30px;
	}
.cv h2 + p {
	margin-top: 0;
	}
.cv p + h2,
.cv ul + h2 {
	margin-top: 30px;
	}


/* blogstuff */
.post-title {
	#line-height: 20px;
	margin: 0 -60px;
	padding: 15px 60px;
	background: #f1f1f1;
	}
.post-title .social-sharing {
	float: right;
	margin: -3px 0;
	}
section.sbc > .social-sharing {
	margin-bottom: 60px;
	}
.social-sharing > div {
	opacity: .5;
	display: inline-block;
	width: 80px;
	height: 20px;
	vertical-align: top;
	}
.social-sharing div {
	filter: url(i/filters.svg#grayscale); /* Firefox */
	filter: gray; /* IE */
	-webkit-filter: grayscale(1); /* Webkit */
	}
.social-sharing:hover div,
.post-title:hover .social-sharing div {
	opacity: 1;

	filter: none;
    -webkit-filter: grayscale(0);
	}
.post-title .social-sharing {
	float: right;
	}
.post-title .social-sharing > div {
	margin-left: 15px;
	}
section.sbc > .social-sharing > div {
	margin-right: 15px;
	}
#stocclose { /* sharethis close button fix */
	width: 29px !important; 
	height: 29px !important; 
	}

.post {
	padding-bottom: 60px;
	}
.wp-caption {
	margin-bottom: 30px;
	}
.wp-caption-text {
	margin-top: 15px;
	color: #666;
	}
.posts-nav { 
	min-height: 45px;
	margin: 0 -60px;
	padding: 15px 60px;
	background: #f1f1f1;
	text-transform: uppercase;
	}
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.625em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.625em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.meta {
	color: #999;
	font-size: 10px;
	line-height: 1;
	text-transform: uppercase;
	margin-bottom: 30px;
	}

ul.social {
	margin-top: 3em;
	}
ul.social li {
	border-radius: 3px;
	margin-right: 8px;
	vertical-align: top;
	display: -moz-inline-stack;
	display: inline-block;
	zoom: 1;
	*display: inline;
/* 	^ http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
	box-shadow: 0 1px 0 #666;
	}
ul.social a,
ul.social div { 
	display: block;
	width: 16px;
	height: 16px;
	text-indent: -9999px;
	border: 0;
	overflow: hidden;

	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	opacity: .7;
	}
ul.social a:hover,
ul.social div:hover {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: .99999;
	}
ul.social .share div {
	background-image: url(i/sharethis.png);
	}
ul.social .facebook a {
	background-image: url(i/facebook.png);
	}
ul.social .vimeo a {
	background-image: url(i/vimeo.png);
	}
ul.social .rss a {
	background-image: url(i/rss.png);
	}

.qt-links li {
	display: block;
	}
.qt-links.single li {
	display: inline-block;
	}

.unkardinal {
	margin-top: 3em;
	}

/* some misc biz */
.two-col {
			column-count: 2;
	   -moz-column-count: 2;
	-webkit-column-count: 2;
			column-gap: 30px;
	   -moz-column-gap: 30px;
	-webkit-column-gap: 30px;
	}
.three-col {
			column-count: 3;
	   -moz-column-count: 3;
	-webkit-column-count: 3;
			column-gap: 30px;
	   -moz-column-gap: 30px;
	-webkit-column-gap: 30px;
	}
.two-col div,
.three-col div {
	display: -moz-inline-stack;
	display: inline-block;
	zoom: 1;
	*display: inline;
/* 	^ http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
	width: 100%;
	margin-bottom: 30px;
	}
.three-col li {
	margin-bottom: 1em;
	}

.hide { 
	text-indent: -9999px;
	}

.fourohfour {
	color: #c00;
	font-weight: 800;
	}



/* simple grids */
.grid {
	margin-left: -15px;
	margin-right: -15px;
	font-size: 0;
	}
.half, 
.third,
.quarter {
	display: inline-block;
	padding-left: 15px;
	padding-right: 15px;
	vertical-align: top;
	font-size: 12px;
	}
/* Firefox Hackzorz */
@-moz-document url-prefix() {
	.half, 
	.third,
	.quarter {
		display: block;
		float: left;
		}
}
.half {
	width: 49.999%;
	}
.third {
	width: 33.333%;
	}
.third.two {
	width: 66.663%;
	}
.quarter {
	width: 24.999%;
	}
.quarter.three {
	width: 24.999%;
	}


/*clearfix*/
.clearfix:after { 
	content: ""; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

/* fill that bg */
.current .photo,
ul.social li a {
	-webkit-background-size: cover;
	   -moz-background-size: cover;
		 -o-background-size: cover;
			background-size: cover;

	background-position: 50% 50%;
	}

/* Transitions! */
a, 
input[type="text"], 
.edit-link,
header menu li,
.similar-projects,
.social-sharing > div {
	-webkit-transition: all .15s;
	   -moz-transition: all .15s;
		 -o-transition: all .15s;
			transition: all .15s;
	}


/* a few mobile-only rules, see @media queries below for responsive biz */
.mobile-image {
	min-height: 100px;
	background: url(i/ajax-loader.gif) 50% 50% no-repeat;
	margin: 0 30px 30px 0;
	}
.mobile-footer {
	display: block;
	width: 100%;
	padding: 15px 30px;
	background: #4f4f4f;
	color: #dfdfdf;
	text-align: center;
	text-transform: uppercase;
	}

/* for use with lazyload.js and video.js */
.lazy,
.qt-video { display: none }


@media (max-width: 800px) {

	header {
		height: 90px;
		padding: 45px 60px 15px;
		}
	header h1 {
		display: block;
		}
	header menu li:before {
		content: "";
		margin-right: 0;
		}
	header menu li:not(:last-child):after {
		content: "\00B7";
		margin-left: 8px;
		}

	.home-thumb {
		max-width: 100%;
		}
	.home-thumb img {
		width: auto;
		margin-bottom: 15px;
		}

	ul.filter,
	.project-title { 
		top: 90px;
		}
	section.sbc {
		padding-top: 15px;
		z-index: 1;
		}

	.content,
	.post {
		width: 100%;
		}


	ul.social a,
	ul.social div { 
		width: 32px;
		height: 32px;
		}

	.two-col,
	.three-col {
			column-count: 1;
	   -moz-column-count: 1;
	-webkit-column-count: 1;
			column-gap: 0;
	   -moz-column-gap: 0;
	-webkit-column-gap: 0;
		}


	.half,
	.third,
	.third.two {
		width: 100%;
		}

	}

@media (max-width: 640px) {

	.quarter,
	.quarter.three {
		width: 49.999%;
		}

	section.sbc {
		margin: 0 30px;
		padding-top: 0;
		}
	.home-wrap {
		padding-top: 0;
		}

	header, 
	ul.filter,
	.project-title,
	.description,
	.home-wrap,
	.home-news { 
		position: relative;
		top: auto;
		width: auto;
		height: auto;
		padding-left: 30px;
		padding-right: 30px;
		}
	ul.filter,
	.project-title,
	.description,
	.home-wrap,
	.home-news { 
		margin-left: -30px;
		margin-right: -30px;
		}

	header {
		padding-top: 30px;
		}
	header menu {
		height: auto;
		}
	header h1 {
		font-size: 18px;
		line-height: 1.5;
		margin-bottom: 15px;
		}
	header menu li {
		line-height: 1;
		opacity: 1;
		}

	.current {
		margin-top: 30px;
		}
	.current .photo {
		height: 240px;
		margin-bottom: 15px;
		}
	.home-news {
		margin-top: 30px;
		margin-bottom: 0;
		}

	.project-title {
		width: auto;
		}
	.project-title h1 {
		padding-right: 100px;
		}
	.project-title nav {
		text-align: right;
		font-weight: 500;
		width: 90px;
		right: 30px;
		}
	.project-title nav span.next:after {
		content: "";
		margin: 0;
		}
	.project-title .similar {
		display: none;
		}


	.content,
	.portfolio {
		padding-top: 30px;
		}

	.portfolio {
		margin: 0 -2.5%;
		padding-bottom: 30px;
		}
	.portfolio .project {
		display: inline-block;
		float: none;
		width: 45%;
		height: auto;
		margin: 0 2.5% 2.5%;
		}
	section.sbc > .social-sharing {
		margin-bottom: 30px;
		}
	.social-sharing > div {
		opacity: 1;
		}


	}