/*
	style_global.css
	Stylesheet for gordonhicks.com
	Copyright ©2012 Gordon Hicks, all rights reserved	

*/	

/* -------------------------------------------------------------- */

/* Reset ( based on http://meyerweb.com/eric/tools/css/reset/ ) */

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
	abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,
	strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
	legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time,
	mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%; /* base: 16px; */
		line-height: 1.0000em;
		font: inherit;
		vertical-align: baseline;
	}
	
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block;
	}
	
	body {
		font-size: 1.0000em; /* 16 ÷ 16 */
		line-height: 1.0000em;
	}
	
	ol, ul {
		list-style: none;
	}
	
	blockquote, q {
		quotes: none;
	}
	
	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	h1, h2, h3, h4, h5, h6 {
		font-size: 1em;
		font-weight: normal;
		font-style: normal;
	}

/* -------------------------------------------------------------- */

/* Web Fonts */

	@font-face {
		font-family: 'ULC';
		src: url('../font/ulc-webfont.eot');
		src: url('../font/ulc-webfont.eot?#iefix') format('embedded-opentype'),
			 url('../font/ulc-webfont.woff') format('woff'),
			 url('../font/ulc-webfont.ttf') format('truetype'),
			 url('../font/ulc-webfont.svg#ULC') format('svg');
		font-weight: normal;
		font-style: normal;
	}
	
	@font-face {
		font-family: 'UL';
		src: url('../font/ul-webfont.eot');
		src: url('../font/ul-webfont.eot?#iefix') format('embedded-opentype'),
			 url('../font/ul-webfont.woff') format('woff'),
			 url('../font/ul-webfont.ttf') format('truetype'),
			 url('../font/ul-webfont.svg#UL') format('svg');
		font-weight: normal;
		font-style: normal;
	}
	
	@font-face {
		font-family: 'U';
		src: url('../font/ur-webfont.eot');
		src: url('../font/ur-webfont.eot?#iefix') format('embedded-opentype'),
			 url('../font/ur-webfont.woff') format('woff'),
			 url('../font/ur-webfont.ttf') format('truetype'),
			 url('../font/ur-webfont.svg#U') format('svg');
		font-weight: normal;
		font-style: normal;
	}
	
	@font-face {
		font-family: 'U';
		src: url('../font/uo-webfont.eot');
		src: url('../font/uo-webfont.eot?#iefix') format('embedded-opentype'),
			 url('../font/uo-webfont.woff') format('woff'),
			 url('../font/uo-webfont.ttf') format('truetype'),
			 url('../font/uo-webfont.svg#U') format('svg');
		font-weight: normal;
		font-style: italic;
	}

/* -------------------------------------------------------------- */

/* Typographic */

	body, input, textarea {
		font-family: U, Univers, Helvetica, Arial, sans-serif;
		color: #373737; /* text black */
	}

	i, em, cite {
		font-weight: normal;
		font-style: italic;
	}

	b, strong {
		/* faux small-caps */
		text-transform: uppercase;
		font-size: 0.88em;
		letter-spacing: 0.00250em;
	}

	abbr {
		text-transform: uppercase;
		font-size: 0.88em; /*  */
		letter-spacing: 0.00250em;
	}

/* -------------------------------------------------------------- */

/* Links */

	a {
		text-decoration: none;
		cursor: pointer;
	}

	a:link,
	a:visited {
		color: #373737; /* text black */
		background: white;
	}

	a:hover,
	a:active,
	a.here {
		color: black;
		background-color: #e7e7e7; /* light grey */ 
	}

	a:focus {
		outline: none;
	}

/* Link Transitions */

	a {
		-webkit-transition-property: color, background-color;
		-webkit-transition-duration: 0.750s;
		-webkit-transition-timing-function: ease-in-out;
		-moz-transition-property: color, background-color;
		-moz-transition-duration: 0.750s;
		-moz-transition-timing-function: ease-in-out;
		-o-transition-property: color, background-color;
		-o-transition-duration: 0.750s;
		-o-transition-timing-function: ease-in-out;
		transition-property: color, background-color;
		transition-duration: 0.750s;
		transition-timing-function: ease-in-out;
	}

	a:hover {
		-webkit-transition-duration: 0.250s;
		-moz-transition-duration: 0.250s;
		-o-transition-duration: 0.250s;
		transition-duration: 0.250s;
	}

/* -------------------------------------------------------------- */

/* Images */

	img {
		display: block;
		max-width: 100%;
		font-family: UL, "Univers Light", Univers, Helvetica, Arial, sans-serif;
		font-size: 0.7500em; /* 8px */
		color: #aaa; /* medium grey */
		background-color: rgba(127,127,127,0.05); /* very light grey, semi-tranparent */
	}

/* -------------------------------------------------------------- */

/* Layout Grid */

	/*
	The layout is composed on a grid:
	Four columns, each 230px wide
	Five gutters, each 19px wide (left side, right side and three between columns)
	Total max width with four columns and five gutters is 1015px
	*/

	#page {
		max-width: 977px;
		width: 96.26%;
		padding-left: 1.87%;
		padding-right: 1.87%;
		margin-left: auto;
		margin-right: auto;
	}

	.four-columns  { width: 100.00%;}
	.three-columns { width:  74.51%;}
	.two-columns   { width:  49.03%;}
	.one-column	   { width:  23.54%;}
	.gutter        { width:   1.94%;}

/* -------------------------------------------------------------- */

/* Page Appearance */

	html,
	body  {
		background-color: #999; /* dark grey */
	}

	#page {
		background-color: white;
		margin-bottom: 1.8750em; /* 30px */
	}

/* -------------------------------------------------------------- */

/* Header */

	header {
		padding-top: 1.3750em; /* 22px */
		margin-bottom: 1.8750em; /* 30px */
	}

	/* clearfix */
	header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	*:first-child+html header { min-height: 1px;} /* for IE7 */

/* Footer */

	footer {
		padding-bottom: 1.000em; /* 16px */
		margin-top: 1.8750em; /* 30px */
	}

	/* clearfix */
	footer:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	*:first-child+html footer { min-height: 1px;} /* for IE7 */

/* -------------------------------------------------------------- */

/* Logo */

	header h1 {
		display: inline;
		float: left;
		margin-left: 0.0333em;/*  1px */
		margin-right: 0.7000em; /* 21px */
		font-family: ULC, "Univers Light Condensed", Univers, Helvetica, "Arial Narrow", Arial, sans-serif;
		font-size: 1.8750em; /* 30px */
		line-height: 1.0000em;
		letter-spacing: -0.005em;
		text-transform: uppercase;
		white-space: nowrap;
	}

		header h1 a:hover,
		header h1 a:active {
			background-color: white;
		}

/* -------------------------------------------------------------- */

/* Nav */

	nav {
		display: inline;
		text-transform: uppercase;
		font-size: 0.9375em; /* 15px */
		white-space: nowrap;
		margin-left: -0.3333em; /* -5px */
		margin-right: -0.3333em; /* -5px */
	}

	nav ul {
		display: inline;
	}

	nav li {
		display: inline;
		margin-right: -1px;
		margin-left: -1px;
	}

/* Main Nav */

	nav.main {
		float: left;
	}

/* Secondary Nav */

	nav.secondary {
		float: right;
		font-size: 0.8125em; /* 13px */
	}

/* Nav Links */

	nav a {
		padding: 0 0.5333em; /* 0 8px */
		-webkit-border-radius: 0.6333em; /* 9.5px */
		-moz-border-radius: 0.6333em; /* 9.5px */
		border-radius: 0.6333em; /* 9.5px */
		white-space: nowrap;
	}

/* Footer Nav */

	footer nav {
		font-size: 0.8125em; /* 13px */
	}

	footer nav a {
		margin-top: -0.0769em; /* -1px */
	}

/* -------------------------------------------------------------- */

/* Content */

	#content {}

/* Subsection */

	.subsection {
		margin-bottom: 1.8750em; /* 30px */
	}

/* Flow */

	/* NOTE: The flow container allows text and figure boxes to be placed side-by-side.  */
	/* On smaller screens the interior boxes are stacked vertically instead. */

	.flow { display: block; }

	/* clearfix */
	.flow:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	*:first-child+html .flow { min-height: 1px; } /* for IE7 */

	.text { display: block; }

	.flow .text:nth-child(2n+1),
	.flow figure:nth-child(2n+1) {
		float: left;
		clear: both;
	}

	.flow .text:nth-child(2n+0),
	.flow figure:nth-child(2n+0) {
		float: right;
		clear: right;
	}

/* Figure and Caption */

	figure {
		display: block;
		position: relative;
		margin-bottom: 1.2500em; /* 20px */
	}
	
	figure figcaption {
		display: block;
		margin-top: 0.2500em; /* 3px */
		margin-left: 0.0833em; /* 1px */
		font-size: 0.7500em; /* 12px */
		line-height: 1.4167em; /* 17px (17÷12) */
	}

/* Text Areas */

	.text {}
	
/* Textual Links */

		.text p  a,
		.text ul  a,
		figcaption  a {
		padding: 0.1em 0.2em;
		margin-left: -0.2em;
		margin-right: -0.2em;
		-webkit-border-radius: 0.2em;
		-moz-border-radius: 0.2em;
		border-radius: 0.2em;
		font-size: 0.90em; /* tad smaller */
		text-transform: uppercase; /* faux small caps */
		letter-spacing: 0.00250em;
		word-spacing: -0.0250em;		
	}

	.text p a .desc, /* descriptive subtext for a link */
	.text ul a .desc,
	figcaption a .desc {
		font-size: 1.06em; /* a tad bigger */
		text-transform: none;
	}

/* Headings */

	section h1 {
		font-family: UL, "Univers Light", Univers, Helvetica, Arial, sans-serif;
		font-size: 1.5000em; /* 24px */
		letter-spacing: -0.0050em;
		word-spacing: -0.01em;
		margin: 0.6667em 0 0.6667em ; /* 16px 0 16px  */
	}

	section h2 {
		font-family: UL, "Univers Light", Univers, Helvetica, Arial, sans-serif;
		font-size: 1.1250em; /* 18px */;
		letter-spacing: -0.0025em;
		word-spacing: -0.005em;
		margin: 0.7778em 0 0.7778em 0; /* 14px 0 12px 0 */
	}

	section h1 + h2 {
		margin-top: 0px;
	}

/* Paragraph */

	p {
		font-size: 0.8750em; /* 14px */
		line-height: 1.4286em; /* 20px; */
		margin-bottom: 0.7143em; /* 10px */
	}

/* Links Area */

	.links {
		margin-top: 0.7143em; /* 10px */
		margin-bottom: 0.7143em; /* 10px */
		font-family: UL, "Univers Light", Univers, Helvetica, Arial, sans-serif;
		font-size: 0.8750em; /* 14px */
		line-height: 1.4286em; /* 20px; */
	}

	.links li {
		margin: 0px 0;
	}

	.links a {
		color: black;
	}

/* Dimensions */

	.dimensions {
		white-space: nowrap;
	}

/* Highlight Box (grey background) */

	.highlight {
		margin: 0.8750em 0; /* 14px 0 */
		padding: 0.5000em 0.8125em; /* 8px 13px */
		background-color: #e7e7e7; /* light grey */
	}

	.highlight:first-child {
		margin-top: 0;
	}

	p.highlight,
	.highlight p {
		font-size: 0.8125em; /* 13px */
		line-height: 1.4615em; /* 19px; (19÷13) */
		color: black;
	}

	.highlight p {
		margin-bottom: 0.5385em; /* 7÷13 */
	}	

	.highlight p:last-child {
		margin-bottom: 0;
	}	

/* -------------------------------------------------------------- */

/* Listings (eg, on Projects and Text pages) */

	.listing {
		display: block;
	}

	/* clearfix */
	.listing:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	*:first-child+html .listing { min-height: 1px; } /* for IE7 */

	.listing li {
		display: block;
		width:  49.03%; /* .two-columns */
		margin-bottom: 1.94%; /* 19px */
	}

	.listing li:last-child {
		margin-bottom: 0;
	}

	.listing li:nth-child(2n+1) {
		float: left;
		clear: both;
	}

	.listing li:nth-child(2n+0) {
		float: right;
		clear: right;
	}

	.listing figure {
		width:  48.02%; /* .one-column ÷ .two-column */
		float: left;
		margin: 0;
	}

	.listing img {
		background-color: transparent;
	}

	.listing a {
		display: block;
	}

	/* clearfix */
	.listing a:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	*:first-child+html .listing a { min-height: 1px; } /* for IE7 */

	.listing a:link,
	.listing a:visited {
		background-color: #f0f0f0; /* very light grey */
	}

	.listing a:hover,
	.listing a:active {
		background-color: #e0e0e0; /* light grey */ 
	}

	.listing h2,
	.listing p {
		width:  44.89%; /* 215px */
		padding-right: 3.13%; /* 15px */
		float: right;
		clear: right;
		margin: 0;
	}

	.listing h2 {
		margin-top: 11px;
		margin-bottom: 0px;
		font-family: U, Univers, Helvetica, Arial, sans-serif;
		font-size: 0.9375em; /* 15px */
		line-height: 1.4000em; /* 21px */
		word-spacing: -0.02em;
	}

	.listing p {
		font-family: UL, "Univers Light", Univers, Helvetica, Arial, sans-serif;
		font-size: 0.8750em; /* 14px */
		line-height: 1.2857em; /* 18px */
		margin-bottom: 0.8571em; /* 12px */
	}

	.listing p + p {
		font-size: 0.7813em; /* 12.5px; */
		margin-bottom: 0.4em;
	}


/* -------------------------------------------------------------- */
/* Responsive Structure */
/* -------------------------------------------------------------- */

@media (max-width: 1100px) {

	/* remove grey page background */
	
		html,
		body  {
			background-color: white;
		}
	
		#page {
			background-color: none;
			margin-bottom: 0;
		}

}

/* -------------------------------------------------------------- */

@media (max-width: 750px) {

	/* re-arrange nav */

	header {
		padding-top: 1.1250em; /* 18px */
		margin-bottom: 1.5000em; /* 24px */
	}

	header h1 {
		display: block;
		float: none;
		margin-bottom: 0.2667em; /* 8px */
	}

	nav {
		display: block;
		float: none!important;
		line-height: 1.6000em; /* 24px (24÷15) */
		white-space: normal;
	}

	header nav.main {
		margin-bottom: 0.4000em; /* 6px */
	}

	footer nav.secondary {
		margin-bottom: 0.5000em;
	}

}

/* -------------------------------------------------------------- */

@media (max-width: 750px) {

	.listing li {
		font-size: 0.850em; /* reduce font size */
	}

}

/* -------------------------------------------------------------- */

@media (max-width: 600px) {

	/* two-column layout */
	
	#page {
		width: 92.65%;
		padding-left: 3.68%;
		padding-right: 3.68%;
		margin-left: auto;
		margin-right: auto;
	}

	.four-columns  { width: 100.00%;}
	.three-columns { width: 100.00%;}
	.two-columns   { width: 100.00%;}
	.one-column	   { width:  48.02%;}
	.gutter        { width:   3.97%;}

	.flow  { /* disable flow */
		float: none!important;
		clear: none!important;
	}

	img { /* stretch images, when necessary, to fill the containing block */
		width: 100%; 
	}

	.listing li { /* listing now in single stack, two columns wide */
		width: 100%;
		float: none!important;
		clear: none!important;
		font-size: 1.0000em;
	}


}

/* -------------------------------------------------------------- */

@media (max-width: 400px) {

	/* reduce font size */

	body { font-size: 0.875em; }

}

/* EOT */