@charset "utf-8";

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
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;
}
a,
a:hover,
a:active,
a:visited {
  outline: 0px;
}
img {
  outline: 0;
  border: 0;
}


html {
  height: 101%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

}

body {
  font-family:"Apercu Regular", Calibri, sans-serif;
  font-size: 14px;
  line-height: 19px;
  background: url('../images/bg.png') no-repeat 50% 50%;
  background-size: 3118px 868px;
  color: #454545;

}




	body.home {
		background-position: 50% 51px;
	}
	
	body.about{
		background-position: 50% -220px;
	}
	
	body.projects, body.exhibitions, body.press {
		background-position: 50% -490px;
	}
	
	body.project, body.teaching  {
		background-position: 50% -583px;
	}


.container {
	width: 100%;
	max-width: 1366px;
	margin: 0 auto;
	overflow: hidden;

}

em {
	font-family: "Apercu Italic";
	font-style: italic;
}


strong {
	font-family: "Apercu Bold";
	font-weight: bold;
}

a {
  color: #454545;
  text-decoration: underline;
}

a:hover {
  text-decoration: underline;
}

h1 a, h2 a, h3 a, h4 a, nav a, .ssi a { text-decoration: none; }

h1 {
  font-family:"Apercu Bold", Calibri, sans-serif;
  font-weight: bold;
  font-size: 40px;
  line-height: 40px;
  margin-bottom: 0.5em;
}

	h1.logo {
	  background: url('../images/header-bg.png') no-repeat 0 -5px;
	  background-size: 205px 243px;
      padding: 90px 0 110px 48px;
  	  margin-left: 23%;
/* 	  margin-left: 176px; */
  	  z-index: 100;
  	  font-size: 48px;
  	  line-height: 48px;
	}
	
	h1.logo a:hover { text-decoration: none; }
	
	.exhibitions .content h1 { text-align: center; margin-top: 80px; }
	
	.press .content h1 { margin-top: 50px; }
	

h2 {
  font-family:"Apercu Bold", Calibri, sans-serif;
  font-weight: bold;
  font-size: 25px;
  line-height: 31px;
  margin-bottom: 10px;
}
	.selected h2 { text-align: right; margin: 80px 0 0 0; }
	
	.press .text h2 { margin: 50px 0 20px 0;}
	
	
	
h3 {
  font-family:"Apercu Bold", Calibri, sans-serif;
  font-weight: bold;
  font-size: 15px;
}

	.teaching h3 { margin-top: 30px; }
	.exhibitions h3 { text-align: center; }
	.press h3 { margin: 30px 0 10px 0; }

p { margin: 1em 0; }

.text ul, .text ol { margin: 0.5em 0 1em 0; }
.press .content ul li { 
	line-height: 20px; 
	margin: 15px 0;
}


header {
	width: 50%;
/* 	width: 703px; */
	float: left;
}

nav {
	line-height: 24px;
	margin-top: 70px;
	width: 155px;
    float: left;
    display:inline-block;
}



	nav.social li {
		background: url('../images/nav-social.png') no-repeat top left;
		background-size: 14px 85px;
		padding-left: 20px; 
	}
	
	nav.social li.twitter { background-position: 0 6px; }
	nav.social li.youtube { background-position: 0 -19px; }
	nav.social li.flickr { background-position: 0 -42px; }
	nav.social li.rss { background-position: 0 -68px; }
	
	
	.ssi-header {
		background: url('../images/header-logo-small.png') no-repeat 0 0;
		background-size: 35px 42px;
		font-family: 'Open Sans', sans-serif;
		font-weight: 400;
		font-size: 11px;
		line-height: 15px;
		width: 50px;
	}
	
	.ssi-header a {
		padding: 0 0 0 45px;
		display: block;
		text-decoration: none;
	}



.image-bg {
	position: absolute;
	z-index: 200;
}

.featured {

	position: relative;
	padding: 30px 40px;
	width: 1208px;
	margin: 0 auto;
}

	.featured h3 {
		margin-bottom: -0.5em;
	}
	
	.featured article {
		float: left;
	}

	.featured article:not(.twitter) {
		width: 68%;
/* 		width: 856px; */
		margin-right: 40px;
		padding: 0 40px 0 0;
		border-right: 1px solid #d8d8d8;
	}
	
	.featured article:not(.twitter) p {
		margin-left: 470px;

	}
	
	.featured article img {
/* 		width: 430px; */
		height: 430px;
		
	}
	
	.featuredimage {
		width: 430px;
		overflow: hidden;
		float: left;
		margin: 0 40px 0 0;
	}
	
	.featured .image-bg {
		background: url('../images/image-featured-bg.png') no-repeat top left;
		background-size: 430px 430px;
		width: 430px;
		height: 430px;
	}	

.featured article.twitter {
	width: 20%;
	float: left;
}



.twitter p {
	background: none;
	margin: 10px 0;
}

.twitter p.more {
	background: url('../images/twitter-bg.png') no-repeat top left;
	background-size: 14px 12px;
	padding-left: 20px;
	background-position: 0 4px;
	margin-top: 0;
	clear: both;

}



section {
  clear: both;
}


.content {
	width: 1208px;
/* 	padding-top: 40px; */
/* 	width: 100%; */
	margin: 0 auto;
	padding: 40px 40px 0 40px;
/* 	float: left; */

}

	.content a {
		text-decoration: underline;
	}
	
	.content a.back-link {
		display: block;
		margin: 0 0 10px 155px;	
	}
	
	.content a.back-link:hover { text-decoration: underline; }
	
	.content.selected { width: 1208px; margin: 0 auto; }





	


article {
	margin: 0 auto;
	position: relative;
}

article div.caption  {
	float: right;
	font-size: 14px;
	line-height: 16px;
	width: 245px;
	margin-top: -10px;
}

article.top-image {
	width: 1050px;
}
	
article.top-image .top-image img {
	width: 1050px;
	height: 545px;
	margin-bottom: 10px;
}

.top-image .image-bg {
	background: url('../images/image-top-bg.png') no-repeat top left;
	background-size: 1050px 545px;
	width: 1050px;
	height: 545px;
}


article .side-images {
 	float: left;
	width: 584px;
	margin: 0 52px 0 125px;
	overflow: hidden;
}

article .side-images li {
	float: left;
	margin-bottom: 45px;
	width: 584px;
}

article .side-images img {
/* 	width: 584px; */
	height: 584px;
	
}

article .side-images .image-bg {
	background: url('../images/image-side-bg.png') no-repeat top left;
	background-size: 584px 584px;
	width: 584px;
	height: 584px;
}


.teaching article .side-images {
	width: 360px;
}
.teaching article .side-images img {
	width: 360px;
	height: 360px;
}

.teaching article .side-images li { width: 360px; }

.teaching article .side-images .image-bg {
	background: url('../images/image-side-bg.png') no-repeat top left;
	background-size: 360px 360px;
	width: 360px;
	height: 360px;
}
	

	article.top-image .side-images {
		width: 490px;
		margin: 120px 75px 0 40px;
		clear: both;
	}
	
	article.top-image .side-images img {
		margin-bottom: 10px;
		width: 350px;
		height: 350px;
	}
	
	article.top-image .side-images .image-bg {
		background: url('../images/image-side-small-bg.png') no-repeat top left;
		background-size: 350px 350px;
		width: 350px;
		height: 350px;
	}

	
	article.top-image .side-images li {
		margin-bottom: 60px;
	}
	
	article.top-image .side-images li:nth-child(odd) {
		margin-left: 135px;
	}
	
	article.top-image div.caption {
		float: left;
		width: 270px;
	}
	
	article.top-image .text { float: left; }



article .text {
	float: left;
	width: 390px;
}

	.teaching article .text {
		width: 620px;
	}

	article.topimage .text {
		float: none;
	}

	article.longform .text{
		width: 740px;
		margin-left: 155px;
		clear: both;
		padding-top: 45px;
	}
	
	.press article .text {
		width: 680px;
	}

article.about .side-images{
	width: 508px;
	margin-left: 35px;
}
	
article.about .side-images li {
	margin-bottom: 80px;
	
}
	
article.about .side-images li:nth-child(odd) {
	margin-left: 118px;
}

article.about img {
    width: 390px;
    height: 390px;
}

article.about .image-bg {
	background: url('../images/image-about-bg.png') no-repeat top left;
	background-size: 390px 390px;
    width: 390px;
    height: 390px;
}

article.about li:first-child .image-bg {
	background: url('../images/image-about-first-bg.png') no-repeat top left;
	background-size: 390px 390px;
}

article.about .text {
	width: 444px;
	float: left;
}

p.highres {
	background: url('../images/link-icons.png') no-repeat top left;
	background-size: 15px 55px;
	padding-left: 20px; 
	background-position: 0 2px;
	margin-top: 10px;
}

	p.highres a { text-decoration: none; }
	p.highres a:hover { text-decoration: underline; }
	

.item-header {
	margin-left: 245px;
}
	
	.item-header p { margin: 0; }



.item-grid {
	clear: both;
	padding-top: 40px;
	width: 1208px;
/* 	width: 100%; */
}



.item-grid li {
	float: left;
	width: 272px;
	height: 365px;
	margin: 0 40px 35px 0;
	position: relative;
}


.item-grid li:nth-child(4n+4) {
	margin-right: 0;
}



.item-grid li p {
	font-family:"Apercu Bold", Calibri, sans-serif;
	font-weight: bold;
	font-size: 15px;
	margin: 0;
}

	.item-grid li p a { text-decoration: none; }
	.item-grid li p a:hover { text-decoration: underline; }

	.item-grid li p .tags a {
		font-family: "Apercu Regular", Calibri, sans-serif;
		font-weight: normal;
		font-size: 13px;
		text-decoration: underline;
	}

.item-grid img, .item-list img {
    width: 272px;
    height: 252px;
    margin-bottom: 10px;
}

.item-grid .image-bg {
	background: url('../images/image-grid-bg.png') no-repeat top left;
	background-size: 272px 252px;
	width: 272px;
	height: 252px;
}

.list-view {
	margin-left: 238px;
}

	.list-view .item-header, .list-view .sort {
		margin-left: 85px;
	}

.item-list { margin-top: 80px; }

.item-list p { margin: 5px 0 10px 0; }

.item-list img { 
	margin: 45px 0 15px 0;
}

ul.book-list {
	width: 850px;
	margin: 80px auto 0 auto;
}

.book-list li {
	float: left;
	margin-bottom: 80px;
}

.book-list img {
	float: left;
	clear: both;
	margin: 0 40px 0 0;
	width: 272px;
	height: 438px;
}

.book-list .image-bg {
	background: url('../images/image-book-bg.png') no-repeat top left;
	background-size: 272px 438px;
	width: 272px;
	height: 438px;
}

.book-list h2 a {
	text-decoration: none;
}

.book-list h2, .book-list p { margin-left: 311px; }

.footer-wrap {
  width: 100%;
  clear: both;
  float: left;
  background: url('../images/bg.png') no-repeat 50% -30px;
  background-size: 3118px 868px;
  padding: 30px 0 80px 0;
  overflow: hidden;
}

footer {
  width: 100%;
  max-width: 1226px;
  margin: 0 auto;
  padding: 86px 100px 250px 40px;
  text-align: left;

}

	footer h2 { margin-bottom: 20px; }

	footer .ssi {
		background: url('../images/footer-logo.png') no-repeat 0 0;
		background-size: 126px 149px;
		font-family: 'Open Sans', sans-serif;
		font-weight: 300;
		font-size: 16px;
		line-height: 19px;
		float: right;
		width: 100px;
		padding: 45px 0 55px 16px;
		margin-right: 40px;
	}
	
	footer .ssi a { color: #fff; }
	footer .ssi a:hover { text-decoration: none; }

	footer .copyright {
		width: 272px;
  		float: right;
  		margin-right: 40px;
	}
	
	.about footer .copyright { /* margin-right: 48px; */ }
	

	
	footer .twitter {
		width: 20%;
		float: right;
		margin: 0 70px 40px 0;
	}



.social-buttons {
	padding-top: 5px;
}

	.social-buttons li {
		display: block;
		float: left;
		margin: 0 10px 15px 0;
	}

.item-links {
	clear: both;
}
.item-links li, p.external {
	background: url('../images/link-icons.png') no-repeat top left;
	background-size: 15px 55px;
	padding-left: 20px; 
}

.item-links li.download { background-position: 0 2px; }
.item-links li.external, p.external { background-position: 0 -18px; }
.item-links li.internal { background-position: 0 -38px; }

/*
.item-links li a { text-decoration: none; }
.item-links li a:hover { text-decoration: underline; }
*/

.exhibitions h1, .exhibitions .toggle { text-align: center; }

.exhibitions h1.logo, .exhibitions .list-view h1, .exhibitions .list-view h3, .exhibitions .list-view .toggle { text-align: left;}

.exhibitions .list-view h2, .exhibitions .list-view .toggle { margin-left: 85px; text-align: left; }

.exhibition-list li.item {
	width: 432px;
	float: left;
	margin: 132px 0 0 156px;
}


	.exhibition-list li.item:nth-child(3n+2) {
		margin-top: 264px;
	}
	

	.exhibition-list li.item:nth-child(3n+3) {
		margin-top: 52px;
		margin-left: 312px;
	}

.exhibition-list a { text-decoration: underline; }
.exhibition-list a:hover { text-decoration: underline; }

.exhibition-list h2 a { text-decoration: none; }

.exhibition-list img {
	width: 360px;
	height: 220px;
	margin-bottom: 15px;
}

.exhibition-list .image-bg {
	background: url('../images/image-grid-bg.png') no-repeat top left;
	background-size: 360px 220px;
	width: 360px;
	height: 220px;
}
/*

.exhibition-list h3, .exhibition-list ol { visibility: hidden; }
*/

p.external {
	background: url('../images/link-icons.png') no-repeat 0 -18px;
	background-size: 15px 55px;
	padding-left: 20px; 
}

.pagination { 
	width: 100%; 
	text-align: center; 
	font-size: 36px;
	font-family:"Apercu Bold", Calibri, sans-serif;
	font-weight: bold;
}

.pagination li {
	display: inline;
}

.pagination li a { text-decoration: none; }
.pagination li a.active { color: #c5c5c5; }






@media only screen and (max-width : 1024px) and (min-width: 640px)  {
/*

	header { width: 503px; }
	
	h1.logo { margin-left: 76px; }
*/

	nav { width: 11%;  /* width: 115px; */}
	
	.content {
		width: 944px;
	}
	
	.content.selected { width: 895px; }
	
	.item-grid {
	  width: 896px;
	}
	
	.item-grid li:nth-child(4n+4) {
		margin-right: 40px;
	}
	
	.item-grid li:nth-child(3n+3) {
	  margin-right: 0;
	}
	
	ul.book-list {
		width: 750px;
		margin-left: 100px;
	}
	
	.featured article.twitter {
		width: 16%;
		float: left;
	}

	.featured article:not(.twitter) {
		width: 53%;
	}	

	.featured article:not(.twitter) p {
		margin-left: 339px;
	}
			
	.featured article img {
		width: 300px;
		height: 300px;
		
	}
	
	.featured .image-bg {
		background: url('../images/image-featured-bg.png') no-repeat top left;
		background-size: 300px 300px;
		width: 300px;
		height: 300px;
	}	
	
	.featuredimage {
		width: 300px;
	}
	
	.selected h2 { margin-top: 140px; }

	article .side-images {
		width: 360px;
		margin: 0 40px 0 80px;
	}
	
	article .side-images img {
		width: 360px;
		height: 360px;
	}
	
	article .side-images li { width: 360px; }
	
	article .side-images .image-bg {
		background: url('../images/image-side-bg.png') no-repeat top left;
		background-size: 360px 360px;
		width: 360px;
		height: 360px;
	}
	
	article .text, .teaching article .text { width: 360px; }
	
	article.top-image { width: 789px; }

	
	article.top-image .top-image img {
		width: 789px;
		height: 414px;
		margin-bottom: 10px;
	}
	
	.top-image .image-bg {
		background: url('../images/image-top-bg.png') no-repeat top left;
		background-size: 789px 414px;
		width: 789px;
		height: 414px;
	}
	
	article.top-image .side-images {
		width: 395px;
		margin: 80px 40px 0 45px;
	}
	
	article.top-image .side-images img {
		margin-bottom: 10px;
		width: 250px;
		height: 250px;
	}
	
	article.top-image .side-images .image-bg {
		background: url('../images/image-side-small-bg.png') no-repeat top left;
		background-size: 250px 250px;
		width: 250px;
		height: 250px;
	}
	
	article.top-image .text { width: 320px; }
	
	article.longform .text{
		width: 600px;
	}
	
	article.about .side-images { width: 368px; }
	
	
	article.about img {
	    width: 250px;
	    height: 250px;
	}
	
	article.about .image-bg {
		background: url('../images/image-about-bg.png') no-repeat top left;
		background-size: 250px 250px;
	    width: 250px;
	    height: 250px;
	}
	
	article.about li:first-child .image-bg {
		background: url('../images/image-about-first-bg.png') no-repeat top left;
		background-size: 250px 250px;
	}
	
	article.about .text {
		width: 350px;
		
	}

}


@media only screen and (-moz-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5){
	body {
		 background: url('../images/bg-retina.png') no-repeat 50% 50%;
		 background-size: 3118px 868px;
	} 
	
	.footer-wrap {
		 background: url('../images/bg-retina.png') no-repeat 50% -30px;
		 background-size: 3118px 868px;
	}


}

@media only screen and (max-width : 1136px) {
	body {
		 background: url('../images/bg.png') no-repeat 50% 50%;
		 background-size: 3118px 868px;
	} 

	
	.footer-wrap {
		 background: url('../images/bg.png') no-repeat 50% -30px;
		 background-size: 3118px 868px;
	}

}