@import url('normalize.css');

body {
	font-family: 'Source Sans Pro', Helvetica, Arial, Sans-serif;
	font-size: 0.9125rem;
	line-height: 1.4;
	font-weight: 300;
	color: #4A4A4A;
}

#page {
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
	padding: 0 10px;
}

header {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 30px;
	padding-bottom: 15px;
	position: relative;
}

#navigation {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0 0 100px;

}

main {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 10px;
	margin: 0 0 100px;
	position: relative;
}

strong {
	font-weight: 500;
}
em {
	font-style: italic;
}

p.courtesy {
	padding: 15px 0;
	color: #9D9D9D;
	font-size: 0.6875rem;
}


div.col.col3of4 {
	min-height: 1px;
}
/* header */

header h1 img {
	width: 160px;
	height: auto;
}

/* search + language */

#collapse {
	overflow: visible;
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
	position: relative;
}

ul.language {
	position: absolute;
	top: -83px;
	right: 10px;
	font-size: 0.6875rem;
}

ul.language  li {
	display: inline-block;
}

/*ul.language li:first-child::after {
	content: " ·";
	font-weight: bold;
	color: #aaa;
}*/

ul.language  a {
	color: #aaa;
	text-decoration: none;
	text-transform: uppercase;
}

ul.language  a.active {
	color: #5B82C9;
}

form.search {
	position: absolute;
	top: -22px;
	right: 10px;
	z-index: 10;
}

.search input {
	background: url(search.png) no-repeat right 0;
	border: 0;
	padding: 0 20px;
	font-family: 'Source Sans Pro', Helvetica, Arial, Sans-serif;
	font-weight: 300;
	font-size: 0.6875rem;
	width: 50px;
	text-align: right;
}

/* navigation */

#navigation li.collection {
	border-top: 15px solid #5B82C9;
	border-bottom: 5px solid #5B82C9;
	overflow: auto;
	line-height: 1.5;
	background: rgba(91, 130, 201, .1);
}

#navigation li.founder {
	border-bottom: 5px solid #EBEBEB;
	clear: both;
	overflow: auto;
}

#navigation li {
	list-style-type: none;
}

#navigation a {
	display: block;
	text-decoration: none;
	padding: 5px 10px;
	color: #5B82C9;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#navigation .nav a {
	border-top: 1px solid #fff;
}

#navigation .nav > li:first-child a {
	border-top: 0;
}

#navigation a:hover,
#navigation a:focus {
	color: #000;
}

#navigation a.active {
	background: rgba(91, 130, 201, .2) url(active.png) no-repeat right center;
	color: #000;
}

#navigation > ul> li.collection > a {
	border-bottom: 5px solid #5B82C9;
	font-family: georgia, serif;
	text-transform: uppercase;
	padding: 15px 10px;
	background: rgba(91, 130, 201, .7);
	color: #fff;
}

#navigation > ul> li > a {
	border-bottom: 5px solid #EBEBEB;
	font-family: georgia, serif;
	text-transform: uppercase;
	padding: 15px 10px;
}

#navigation ul.nav {
	padding: 0 0 0;
}

#navigation ul.nav li.with-child > a {
	float: left;
	width: 50%;
	border-right: 1px solid #fff;
}

#navigation ul.nav > li {
	clear: both;
	}

#navigation ul.sub-nav {
	float: right;
	width: 50%;
}

#navigation .founder a {
	color: #9D9D9D;
}

/* navigation colors for founder collection */

.founder-collection #navigation li.collection {
	border-top-color: #9B9B9B;
	border-bottom-color: #CD625E;
	background-color: #fff;
}
.founder-collection #navigation > ul > li.collection > a {
	background-color: #f5f5f5;
	background-color: #f5f5f5;
	color: #9B9B9B;
	border-color: #9B9B9B;
}

.founder-collection #navigation a {
	color: #9B9B9B;
}

.founder-collection #navigation a:hover,
.founder-collection #navigation a:focus,
.founder-collection #navigation > ul > li.collection > a:hover,
.founder-collection #navigation > ul > li.collection > a:focus {
	color: #000;
}

.founder-collection #navigation > ul > li.founder {
	background-color: rgba(205, 98, 94, .1);
	border-color: #CD625E;
}

.founder-collection #navigation > ul > li.founder > a {
	color: #fff;
	border-color: #CD625E;
	background-color: rgba(205, 98, 94, .5);
}

.founder-collection #navigation li.founder a {
	color: #CD625E;
}

.founder-collection #navigation li.founder a:hover,
.founder-collection #navigation li.founder a:focus {
	color: #000;
}

.founder-collection #navigation a.active {
	background-color: rgba(205, 98, 94, .2);
}

/* main */

main figure {
	margin-bottom: 20px;
}

main figure img {
	max-width: 100%;
	height: auto;
}

main div.content {
	padding: 0 0 45px;
	/*border-bottom: 15px solid #5B82C9;*/
	overflow: auto;
}

main h1 {
	font-size: 1.75rem;
	font-weight: 500;
	min-height: 50px;
	color: #5B82C9;
}

main h1 small {
	font-weight: 300;
}

main h2 {
	font-weight: 500;
	color: #5B82C9;
	margin-top: 2em;
	margin-bottom: .5em;
	font-size: 0.9375rem;
}

main h3 {
	font-weight: 500;
	margin-top: .5em;
	margin-bottom: .5em;
}

main h2:first-child,
main h3:first-child {
	margin-top: 0;
}

main ul h3 {
	margin-bottom: 0;
}


main ul li:before {
	content: ". ";
	color: #5B82C9;
	font-weight: 500;
}

main ul a {
	color: #4A4A4A;
	text-decoration: none;
	border-bottom: 0;
}

main ul a:hover,
main ul a:focus {
	color: #000;
	border-bottom: 1px dotted #5B82C9;
}

main ul.lists li:before {
	content: none;
}

main ul.lists li {
	padding: 0 0 0 16px;
	background: url(list.png) no-repeat left .3em;
}

main ul.recent li {
	margin-bottom: 1em;
}

main .works {
	background: #f2f2f2;
	padding: 20px !important;
	float: none;
	clear: both;
}

main p.big {
	font-size: 1.0625rem;
}

main a {
	color: #4A4A4A;
	text-decoration: none;
	border-bottom: 1px solid #5B82C9;
}

.col1of4 {
	margin-top: 40px;
}

.gallery {
	position: relative;
}

.gallery ul li:before {
	content: none;
}

.gallery img {
	height: 300px;
	width: auto;
	max-width: none;
}

.gallery ul li figcaption {
	margin-top: 0;
	padding: 0;
}

.gallery ul li figcaption div {
	border-top: 5px solid #eee;
	border-bottom: 1px solid #eee;
	padding: 15px 0;
}

.gallery .gallery-nav {
	margin-top: -30px;
	margin-bottom: 15px;
}

.gallery figure.gallery a {
	border-bottom: 0;
	display: block;
}

.gallery .gallery-nav li {
	display: inline-block;
	color: #ddd;
	font-size: 0.625rem;
	margin-right: 5px;
}

.gallery .gallery-nav li a {
	display: inline-block;
	text-align: center;
	color: #aaa;
}

.gallery .gallery-nav li a.active {
	color: #000;
}


/* content colors for founder collection */
.founder-collection main h1,
.founder-collection main h2,
.founder-collection h2,
.founder-collection main ul li:before,
.founder-collection ul li:before {
	color: #CD625E;
}

.founder-collection main a,
.founder-collection main ul a:hover, 
.founder-collection main ul a:focus,
.founder-collection ul a:hover, 
.founder-collection ul a:focus {
	border-color: #CD625E;
}

.founder-collection main ul.lists li,
.founder-collection ul.lists li {
	background-image: url(list-founder.png);
}

/* Breadcrumb */

.breadcrumb {
	color: #aaa;
	min-height: 17px;
	padding: 3px;
	margin-bottom: 32px;
	font-size: 0.6875rem;
	border-bottom: 15px solid #eee;
}

.breadcrumb ul li:before {
	content: none;
}

.breadcrumb ul li {
	display: inline;
	padding: 0 0 0 16px;
	background: url(breadcrumb.png) no-repeat left .2em;
}

.breadcrumb ul li:first-child {
	padding: 0;
	background: none;
}


.breadcrumb a {
	color: #aaa;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
	color: #000;
}

/* footer */

footer {
	background: #eee;
	overflow: auto;
	padding: 50px 10px;
	position: relative;
	color: #888;
	clear: both;
}

footer > div {
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
	padding: 0 10px;
}

footer .col {
	margin-top: 10px;
}

footer section {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	clear: both;
	overflow: auto;
	padding: 10px;
}


footer h3 {
	font-weight: 400;
	margin-bottom: 1em;
	text-align: center;
	font-size: .9375rem;
}

@media only screen and (max-width: 700px) {

	#collapse {
		position: absolute;
		top: 80px; 
		right: 20px;
		padding-top: 20px;
		height: 0;
		overflow: hidden;
		background: url(nav.png) no-repeat right top;
		z-index: 10;
	}
	#collapse.open {
		background-image: url(nav-close.png);
	}
	.founder-collection #collapase {
		background-image: url(nav-founder.png);
	}
	.founder-collection .collapse.open {
		background-image: url(nav-founder-close.png);
	}

	#collapse.open {
		height: auto;
		overflow: visible;
		left: 20px;
	}

	ul.language,
	form.search {
		position: absolute;
		top: -88px;
		right: 10px;
		z-index: 10;
	}

	ul.language {
		position: absolute;
		top: -83px;
		right: 100px;
		font-size: 0.6875rem;
	}

	#navigation > ul {
		background: rgba(255,255,255, 1);
		margin: 0 -20px;
		border: 20px solid #D4D7DC;	
		clear: both;
	}

	#navigation li.collection,
	#navigation > ul> li.collection > a,
	#navigation > ul> li > a,
	#navigation li.founder,
	.founder-collection #navigation > ul> li.founder,
	.founder-collection #navigation > ul> li.collection > a {
		border: 0;
		background: #fff;
	}

	#navigation li.collection,
	.founder-collection #navigation li.collection {
		border-bottom: 5px solid #D4D7DC;
	}

	#navigation > ul> li.collection > a {
		background: #fff;
		color: #5B82C9;
	}

	.founder-collection #navigation > ul> li.founder > a {
		background: #fff;
		color: #CD625E;
	}

	header form {
		top: 50px;
	}
}

@media only screen and (min-width: 700px) {
	#navigation {
		float: left;
		width: 33.33333%;
		padding-left: 10px;
		padding-right: 10px;
		position: relative;
	}
	
	main {
		float: left;
		width: 66.66667%;
	}

	main > h1:first-child {
		margin-top: -70px;
	}

	footer section {
	width: 66.66667%;
	margin: 0 0 0 33.33333%;
	}
}

@media only screen and (min-width: 960px) {
	.col {
		float: left;
		width: 50%;
	
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		position: relative;
	}

	.col3of4 {
		width: 75%;
		margin-bottom: 30px;
	}
	
	.col1of4 {
		width: 25%;
	}
	
	.col:first-child {
		padding-right: 10px;
	}
	
	.col:last-child {
		padding-left: 10px;
	}

	main .works {
		width: 75%;
	}
}


/************************************************
 * RETINA SUPPORT
 ***********************************************/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (   min--moz-device-pixel-ratio: 2),
	only screen and (     -o-min-device-pixel-ratio: 2/1),
	only screen and (        min-device-pixel-ratio: 2),
	only screen and (                min-resolution: 192dpi),
	only screen and (                min-resolution: 2dppx) {
	
	#navigation a.active {
		background-image: url(active@2x.png);
		background-size: 16px 10px;
	}

	main ul.lists li {
		background-image: url(list@2x.png);
		background-size: 16px 10px;
	}

	.breadcrumb ul li {
		background-image: url(breadcrumb@2x.png);
		background-size: 16px 10px;
	}

	.founder-collection main ul.lists li,
	.founder-collection ul.lists li {
		background-image: url(list-founder@2x.png);
	}

	.search input {
		background-image: url(search@2x.png);
		background-size: 14px 14px;
}

@media only screen and (max-width: 700px) and (-webkit-min-device-pixel-ratio: 2),
	only screen and (max-width: 700px) and (   min--moz-device-pixel-ratio: 2),
	only screen and (max-width: 700px) and (     -o-min-device-pixel-ratio: 2/1),
	only screen and (max-width: 700px) and (        min-device-pixel-ratio: 2),
	only screen and (max-width: 700px) and (                min-resolution: 192dpi),
	only screen and (max-width: 700px) and (                min-resolution: 2dppx) {

	#collapse {
		background-image: url(nav@2x.png);
		background-size: 16px 10px;
	}
	#collapse.open {
		background-image: url(nav-close@2x.png);
		background-size: 16px 10px;
	}
	.founder-collection #collapse {
		background-image: url(nav-founder@2x.png);
		background-size: 16px 10px;
	}
	.founder-collection #collapse.open {
		background-image: url(nav-founder-close@2x.png);
		background-size: 16px 10px;
	}

}