@font-face {
    font-family: 'Malleable';
    src: url('../assets/fonts/malleable-bold/malleable_bold-webfont.eot');
    src: url('../assets/fonts/malleable-bold/malleable_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../assets/fonts/malleable-bold/malleable_bold-webfont.woff') format('woff'),
         url('../assets/fonts/malleable-bold/malleable_bold-webfont.ttf') format('truetype'),
         url('../assets/fonts/malleable-bold/malleable_bold-webfont.svg#MalleableGrotesqueBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

//..............................................................................

.replace () { display: block;
	> span { display: none; }
}

.clearfix () {
	&:before {
		content: "";
		display: table;
	}
	zoom: 1;
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

.drop_shadow (@x: 0px, @y: 1px, @s: 3px, @o: .15) {
	-moz-box-shadow: @x @y @s rgba(0, 0, 0, @o);
	-webkit-box-shadow: @x @y @s rgba(0, 0, 0, @o);
	box-shadow: @x @y @s rgba(0, 0, 0, @o);
}

.animate (@t: .25s) {
	-webkit-transition: all @t ease-in-out;
	-moz-transition: all @t ease-in-out;
	-o-transition: all @t ease-in-out;
	-ms-transition: all @t ease-in-out;
	transition: all @t ease-in-out;
}

.selection_text () { background-color: #4b4b4b; color: #ffffff;  }

.sep () { border-top: 2px solid #eaeaea; }

@color_base: #707070;
@color_soft: #999898;
@color_light: lighten(@color_soft, 20%);
@color_dark: darken(@color_base, 10%);
@color_accent: #e54b13;
@color_accent_dark: darken(@color_accent, 20%);

/* layout */

@n_cols: 3;
@col: 260px;
@unit: 10px;
@2unit: 2 * @unit;
@3unit: 3 * @unit;
@gut: 5 * @unit;
@2gut: 2 * @gut;

.tier (@g: 0px, @u: 0px) {
	.clearfix;
	margin-top: @g;
	padding-top: @u * @unit;
	/*padding-bottom: @2gut;*/
}

.column (@n) {
	float: left;
	width: (@n * @col) + ((@n - 1) * @gut);
	margin-left: @gut;
	&:first-child { margin-left: 0; }
}

.x1 { .column(1); }
.x2 { .column(2); }
.x3 { .column(3); }

.pt(@pt) { padding-top: @pt; }
.mt(@mt) { margin-top: @mt; }
.pb(@pb) { padding-bottom: @pb; }
.mb(@mb) { margin-bottom: @mb; }

.region { .clearfix; }

/* type */

.malleable { font-family: "Malleable", sans-serif; }
.georgia { font-family: Georgia, serif; }

//..............................................................................

body {
	padding: @gut 0 @2gut;
	.georgia; color: @color_base;
	text-rendering: optimizeLegibility;
}

html.iframe-inner {
	overflow: hidden;
	body {
		padding: 0;
		text-align: left;
	}
}

a { text-decoration: none; color: inherit; cursor: pointer; }
a:hover { color: @color_accent; }

img { max-width: 100%; height: auto;
	&.full { max-width: 880px; }
}

::-moz-selection { .selection_text; }
::selection { .selection_text; }

#page {
	margin: auto; text-align: left; 
	width: (@n_cols * @col) + ((@n_cols - 1) * @gut);
}

//..............................................................................

#headland {
	position: relative;
	.logo {
		float: left;
		position: relative;
        text-indent: -9999px;
        width: 362px; height: 83px;
		background: url("../assets/logo.png") no-repeat 0 0;
		a {
			position: absolute;
			top: 0; left: 0;
			opacity: 0;
			width: 362px; height: 83px;
			background: url("../assets/logo.png") no-repeat 0 100%;
			.replace;
			-webkit-transition: opacity .4s;
			-moz-transition:    opacity .4s;
			-o-transition:      opacity .4s;
			&:hover { opacity: 1; background-position: 0 100%; }
		}
	}
	.nav {
		position: absolute;
		right: 0;
		top: 50%;
		> div {
			float: left;
			width: @col;
			margin-top: -.75em;
			margin-left: 80px;
			font-size: 13px;
			color: @color_soft;
			> div {
				float: left;
				margin-left: 80px;
				&:first-child {
					margin-left: 0;
				}
			}
			&:first-child {
				margin-left: 0;
				width: auto;
			}
		}
	}
}
.template-home #headland .logo { background-position: 0 100%; }

.template-typefaces .nav-typefaces,
.template-portfolio .nav-portfolio,
.template-blog .nav-blog,
.template-about .nav-about {
	color: @color_accent;
}

.masthead {
	
	@y1: 286px;
	@y2: 48px;
	
	height: @y1 + @y2 + @2gut;
	margin: @gut 0;
	position: relative;
	
	h1 {
		position: absolute; bottom: @3unit; left: -14px;
		width: 904px; height: @y1;
		background-image: url("../assets/p_and_s.png");
		.replace;
	}
	h2 {
		position: absolute; top: 0;
		width: 880px; height: @y2;
		background-image: url("../assets/mast_subhead.png");
		.replace;
	}
}

.pod {
	.hd {
		h3 {
			display: inline;
			padding-right: @unit;
			font-size: 13px;
			font-weight: normal;
			color: @color_soft;
			background: #FFF;
			span { color: @color_light; }
			
			.section-toggle {
				@h: 15px;
				display: inline-block;
				height: @h;
				line-height: @h;
				padding-left: 20px;
				background-image: url('../assets/toggle.png');
				background-position: 0 0;
			}
		}
	}
	&.state-open {
		h3 {
			.section-toggle {
				color: @color_accent;
				background-position: 0 100%;
			}
		}
	}
	.bd {
		.sep(); .pt(@3unit); .mt(-@unit);
		h4 {
			.mt(-6px); .mb(@unit);
			.malleable;
			font-size: 26px;
			line-height: 1.2;
			letter-spacing: 0.02em;
		}
		h5 {
			margin: 0 0 @unit;
			font-size: 12px;
			font-style: italic;
			font-weight: normal;
			color: @color_soft;
		}
		p, ul, ol, dl, blockquote {
			margin: @unit 0 0;
			font-size: 14px;
			line-height: 1.4;
		}
		a { font-weight: bold; }
	}
}
.template-home .pod .bd {
	img { .drop_shadow; }
}

//..............................................................................

/*
div.font-selectors { text-align:left; position:absolute; width:5000px; position:relative; }
div.font-view { text-align:left; position:absolute; width:5000px; position:relative; }
div.font-sample-wrapper { margin:3px; padding: 0px 0px 10px 30px; }
p.font-sample { font-size:96pt;  font-weight: bold; font-family: 'HeraBig-BoldItalic'; overflow:visible; text-rendering:optimizeLegibility; text-rendering: geometricPrecision; }
*/

//..............................................................................

.tc-field {
	position: relative;
	
	&.tc-dropdown {
		
		.field_shadow () {
			border-right-color: #d7d7d7;
			border-bottom-color: #d7d7d7;
			/*.drop_shadow(1px, 1px, 2px, .25);*/
		}
		
		z-index: 99;
		font-size: 13px;
		border: 1px solid #f3f3f3;
		.field_shadow;
		
		.display {
			position: relative;
			z-index: 3;
			cursor: pointer;
			padding: 10px;
			overflow: hidden;
			white-space: nowrap;
			
			background-color: #ffffff;
			
			.state-empty {
				color: @color_soft;
			}
		}
		&.state-open {
			.display {
				color: @color_accent;
			}
		}
		
		.trigarr {
			position: absolute;
			z-index: 3;
			top: 10px;
			right: 10px;
			width: 17px;
			height: 16px;
			background-image: url("../assets/dd_arrow.png");
			cursor: pointer;
		}
		
		.menu {
			display: none;
			position: absolute;
			top: 100%;
			margin-top: -1px;
			left: -1px;
			z-index: 2;
			width: 100%; 
			background-color: #ffffff;
			border: 1px solid #f3f3f3;
			.field_shadow;
			
			.item {
				cursor: pointer;
				padding: 10px;
				
				&.state-active {
					display: none;
				}
				&:hover {
					background-color: @color_soft;
					color: #ffffff;
				}
				&:active {
					
				}
			}
		}
	}
}

a.d-link {
	@h: 16px;
	
	display: inline-block;
	height: @h;
	line-height: @h;
	background-image: url("../assets/dd_arrow.png");
	padding-left: 22px;
}

a.ca-btn {
	display: inline-block;
	padding: 5px 10px;
	color: #ffffff;
	background-color: @color_accent;
	.drop_shadow;
	font-size: 13px;
	font-weight: normal;
}

.controls {
	.tier;
	
	.tc-dropdown {
		width: 120px;
		float: left;
		margin-right: @2unit;
	}
	
	.cycler {
		float: left;
		width: 35px;
		height: 35px;
		margin-top: 2px;
		
		background-image: url("../assets/btn_pause.png");
		background-position: 13px 11px;
		
		&.state-paused { 
			background-image: url("../assets/btn_play.png");
			background-position: 9px 10px;
		}
		
		canvas {
			width: 100%;
			height: 100%;
			cursor: pointer;
		}
	}
}

#typefaces {
	.tier(@gut, 0);
}

.typeface-section {
	position: relative;
	margin-bottom: @2unit;

	.bd {
		color: @color_soft;
		a { font-weight: normal; }
		p:first-child {
			margin-top: 0;
		}
	}
	.panel {
		.description {
			padding-left: @2unit;
			padding-right: @2gut + @3unit;
		}
		.controls {
			margin: @2unit 0 0;
			padding-left: @unit;
			padding-right: @2gut + @3unit;
		}
	}
	.meta {
		text-align: right;
	}
	.specimens {
		clear: both;
		padding-left: @unit;
		
		.font {
			position: relative;
			img {
				display: block; 
				max-width: none;
				position: relative;
			}
			.manual-position {
				position: absolute;
			}
		}
	}
	
	.typeface-section-outer {
		
	}
	
	.typeface-section-inner {
		display: none;
		.specimens { 
			padding-top: @2unit;
		} 
	}
	
	.loader {
		clear: both;
		text-align: center;
	}
}

//..............................................................................

#portfolio-grid { .tier(@unit, 0); color: @color_light; font-size: 13px; line-height: 1em;
	a {
		.name { color: @color_base; }
		&:hover .name { color: @color_accent; }
		&:hover { color: @color_light; }
	}
	li { display: block; .x1; margin-left: 0; margin-right: 50px; .mb(@gut);
		&.no-margin { margin-right: 0; }
	}
	img { .drop_shadow(1px, 1px, 4px); }
	p { .mt(@2unit); }
}

.portfolio-work-view {
	.tier();
	.pt(@gut+@unit);
	overflow:hidden;
	position:relative;
	
	iframe {
		overflow: hidden;
		width: 100%;
		height: 0;
	}
}

.portfolio-work-main {
	position: relative;
	border-bottom: 2px solid #eaeaea;
	.pb(@gut+@3unit);
	margin-bottom: 5*@unit;
	font-size: 13px;
	line-height: 20px;
	color: @color_soft;
	h2 { 
		color: @color_light;
		font-weight: normal;
		span { color: @color_accent; }
	}
	p, img { .mt(@2unit); &:first-child { .mt(0); } }
	p { color: @color_soft; }
	img { display: block; max-width: 100%; height: auto; }
	.close {
		.replace;
		position: absolute;
		top: 3px; right: 0;
		width: 16px; height: 15px;
		background: url(../assets/close.png) no-repeat 0 0;
		&:hover { background-position: 0 -15px; }
	}
	.meta { .mt(@gut - @unit);
		ul { .mt(@unit); &:first-child { .mt(0); } }
		strong { color: @color_base; font-weight: normal; font-style: italic; }
	}
	&.landscape {
		.body { .x2; }
		.meta { .x1; }
		.portfolio-work-images { clear: both; .pt(@gut); }
	}
	&.port {
		.portfolio-work-images { margin-right: @col+@gut; }
		.portfolio-work-text { .x1; float: right; }
		.body {
			h2 span { display: block; .mb(@unit); }
			p { .mt(@unit); }
		}
		.meta { .mt(@unit); }
	}
}

//..............................................................................

.blog { .tier(@gut, 0); }

.blog-post { color: @color_base; font-size: 13px; line-height: 20px;
	.mt(@3unit);
	h2 { .malleable; font-size: 54px; line-height: 50px; }
	p, img { .mt(@3unit); }
	p img { .mt(0); }
	.meta { .x1; text-align: right; font-style: italic; color: @color_soft;
		p { .mt(0); }
		strong { color: @color_base; }
		.soc { 
			width: 16px; height: 16px;
			.mt(@unit/2); margin-left: @unit;
			background-repeat: no-repeat;
			background-position: 0 0;
			.replace; display: inline-block;
			&.twitter { background-image: url(../assets/soc-icons/twitter.png); }
			&.facebook { background-image: url(../assets/soc-icons/facebook.png); }
			&.linkedin { background-image: url(../assets/soc-icons/linkedin.png); }
			&:hover { background-position: 0 -16px; }
		}
	}
	.body,
	.read-more, .hide-more { 
		float: none;
		width: 570px;
		margin-left: 310px;
	}
	.body {
		position: relative;
		img.full { margin-left: -310px; }
	}
	.read-more {
		.mt(@2unit);
		a { font-weight: bold; &:hover { color: @color_accent; } }
	}
	.comment-form-next,
	input[type="submit"] {
		.animate(.1s);
		display: inline-block;
		.mt(@2unit);
		padding: 9px 15px;
		color: #FFF;
		.drop_shadow(1px);
		&:hover { .drop_shadow(2px, 2px); }
		&:active { .drop_shadow; background-color: @color_soft; }
	}
	.comment-form-next,
	input[type="submit"] {
		background-color: @color_base;
		&:hover { background-color: @color_dark; }
		&:active { background-color: @color_soft; }
	}
	.hide-more a {
		.replace;
		position: absolute;
		width: 16px; height: 15px;
		background: url(../assets/close.png) no-repeat 0 0;
		&:hover { background-position: 0 -15px; }
	}
	> .body { .hide-more a { top: 0; right: 0; } }
	.extras { 
		.pb(@gut);
		border-bottom: 2px solid #eaeaea;
		.body .hide-more a { bottom: -38px; left: -(@gut)-15; }
	}
	.comments { 
		.comment { 
			.clearfix;
			overflow: hidden;
			.body, .meta { .pt(@3unit); }
			&:first-child {
				.mt(@3unit);
				.body { .sep; } 
			}
		}
	}
	.comment-form {
		.pt(@3unit + @unit);
		&:first-child { .pt(0); .mt(0); border-top: none; }
		input, textarea, .tc-field-hint { .georgia; color: @color_base; font-size: 13px; border: none; }
		.tc-field { .mt(@unit); &:first-child { .mt(0); } }
		.tc-field-hint { .mt(12px); }
		.tc-field-hint, input[type="text"] {
			width: 230px;
			height: @3unit;
			padding: 0 15px;
			line-height: 1em;
			text-align: right;
		}
		.body {
			.tc-field-hint { width: 540px; padding: 12px 15px; .mt(0); text-align: left; }
			textarea { width: 540px; height: 90px; padding: 11px 15px; }
		}
		input[type="text"], textarea {
			display: block;
			font-style: italic;
			color: @color_soft;
			-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .06), inset 1px 1px 3px 1px rgba(0, 0, 0, .15);
			-moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .06), inset 1px 1px 3px 1px rgba(0, 0, 0, .15);
			box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .06), inset 1px 1px 3px 1px rgba(0, 0, 0, .15);
			&:focus { 
				.animate(.15s);
				-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .1), inset 1px 1px 4px 1px rgba(0, 0, 0, .2);
				-moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .1), inset 1px 1px 4px 1px rgba(0, 0, 0, .2);
				box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .1), inset 1px 1px 4px 1px rgba(0, 0, 0, .2);
			}
		}
	}
	&:first-child { .mt(@unit); }
}

//..............................................................................

.about { 
	font-size: 13px;
	line-height: 20px;
	color: @color_soft;
	h2 { color: @color_accent; font-weight: normal; }
	h3 { 
		color: @color_light;
		font-weight: normal;
		span { color: @color_accent; }
	}
	.contact { color: @color_light; b { margin: 0 4px; } }
	p { .mt(@unit); &:first-child { .mt(@2unit); } }
	.tier(@gut, 1);
	.studio {
		.tier();
		img { .x2 }
		> div { .x1; }
	}
	.staff {
		> div {
			.tier(@gut, 0);
			img { .x1; }
			> div { .x2; }
		}
		> div:first-child {
			.tier(@gut, 1);
		}
	}
}

//..............................................................................

#footland {
	.tier(@2gut, 3);
	.sep;
	font-size: 13px;
	color: @color_light;
	
	> div {
		float: right;
		width: (2 * @col) - @gut - @2unit;
		> div {
			float: right;
			&:first-child {
				float: left;
			}
		}
		
		&:first-child {
			float: left;
			width: @col + @gut + @2unit;
		}
	}
}