/* 
	Title:		Master styles for screen media
	Author: 	David Palmer
*/




/* reset styles 
--------------------------------------------- */
	
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, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	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;
	}
	
ol, ul {
	list-style: none;
	}
	
blockquote, q {
	quotes: none;
	}
	
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
	}
	
:focus {
	outline: 0;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
	}
	
	
	
	
	/* main styles
--------------------------------------------- */

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #444;
	font-size: 62.5%;
	background: #fff
	}
	
h1 { font-size: 2em}
h2 { font-size: 1.8em}
h3 { font-size: 1.5em}
h4 { font-size: 1.3em}

h1.label, h2.label, h3.label, h4.label {
	margin: 0 0 1em 0;
}

p { font-size: 1.4em; line-height: 1.4em; margin: 0 0 .9em 0; max-width: 50em;}

p.quote { font-size: 1.8em; line-height: 1.4em; margin: 0 0 .9em 0; max-width: 40em;}

p.narrow { font-size: 1.4em; line-height: 1.4em; margin: 0 0 .9em 0; max-width: 23em;}

p.longname { display: inline;}
p.shortname { display: none;}

ul {line-height: 1.8em;
margin: 0 0 2em 0;
}

li { font-size: 1.4em;
margin: 0 0 .5em 0;
}
	
	/* links */

a:link, a:visited {
	text-decoration: none;
	outline: none;
	color: #999;
	}
	
a:hover, a:focus {
	color:#000000; letter-spacing: .1em; text-decoration: none;
	}  /* mouse over link */
	
	
a.return { font-size: 1.5em;
margin: 0 0 2em 0;
}

a.return:hover { letter-spacing: 0;
}

a.logo img{
opacity: 0.4;
}

a.logo img:hover, a.logo img:focus {
opacity: 1;
}

a.thumbnail {
text-decoration: underline;
}
a.thumbnail:hover {
	text-decoration: none;
	}
	
.textblock a:link, .textblock a:visited {
	color: #F03;
	}

.textblock a:hover {
	color:#000000; letter-spacing: 0em; text-decoration: none;}  /* mouse over link */
	
.nav {
	position: fixed;
	top: 14em; 
}	

.nav ul li a {
	display: block;
}

li.this {
	color: #000;
	letter-spacing: .1em;	
	font-size: 1.4em;
}


	
	
	/* page structure
--------------------------------------------- */

#wrap {
	margin: 0 ;
	padding: 0 ;
	width: 100%
	}
	
#header {
	margin: 0 0 0 0;
	width: 100%;
	background: #FFF;
	-webkit-box-sizing: border-box;
	-moz-boc-sizing: border-box;
	box-sizing: border-box;
	}
	
#content {
	margin: 0;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-boc-sizing: border-box;
	box-sizing: border-box;
	}

.main {
	float: right;
	width: 80%;
	-webkit-box-sizing: border-box;
	-moz-boc-sizing: border-box;
	box-sizing: border-box;
	}

.secondary {
	float: left;
	width: 20%;
	-webkit-box-sizing: border-box;
	-moz-boc-sizing: border-box;
	box-sizing: border-box;
	}
	
.group {
	-webkit-box-sizing: border-box;
	-moz-boc-sizing: border-box;
	box-sizing: border-box;
	}
	
#textblock {
	margin: 0 ;
	padding: 2em 0 0 2em ;
	float: left;
	width: 75%;
	-webkit-box-sizing: border-box;
	-moz-boc-sizing: border-box;
	box-sizing: border-box;
	}
	
#textblock_narrow {
	margin: 0 ;
	padding: 2em 0 0 2em ;
	float: left;
	width: 40%;
	-webkit-box-sizing: border-box;
	-moz-boc-sizing: border-box;
	box-sizing: border-box;
	}		

#footer {
	-webkit-box-sizing: border-box;
	-moz-boc-sizing: border-box;
	box-sizing: border-box;
	}
	
.extra {
	padding: 2em;
	}
	
#thumbnail .extra {
	padding: 1em 2em 1em 2em;
	}
	
.extraleft {
	padding: 2em 2em 2em 6em;	
	}

	
figure img, a figure img {
	max-width: 100%;
	border: 1px solid rgba(0,0,0,.3);
}

figure img.noborder, a figure img.noborder {
	max-width: 100%;
	border: none;
}

video {
	max-width: 100%;
	border: 1px solid rgba(0,0,0,.5);
}



/* header
--------------------------------------------- */

.logo {
	float: left;
	width: 20%;
	position: fixed;
	margin: 0 0 0 0 0;
}

	

/* main styles
--------------------------------------------- */

.logo img{
	max-width: 14em;
	border: 0;
}

#thumbnail {
	margin: 0 ;
	padding: 0 0 0 0 ;
	float: left;
	width: 40%;
	}
	
#thumbnailWide {
	margin: 0 ;
	padding: 0 0 0em 0 ;
	float: left;
	width: 80%;
	border: 0;
	}

#artwork {
	margin: 0 ;
	padding: 0 0 0em 0 ;
	float: left;
	width: 80%;
	border: 0;
	}
			
#artwork70 {
	margin: 0 ;
	padding: 0 0 0em 0 ;
	float: left;
	width: 70%;
	border: 0;
	}
	
#artwork60 {
	margin: 0 ;
	padding: 0 0 0em 0 ;
	float: left;
	width: 60%;
	border: 0;
	}
	
#artwork50 {
	margin: 0 ;
	padding: 0 0 0em 0 ;
	float: left;
	width: 50%;
	border: 0;
	}
	
#artwork40 {
	margin: 0 ;
	padding: 0 0 0em 0 ;
	float: left;
	width: 40%;
	border: 0;
	}
	
#artwork_portrait {
	margin: 0 ;
	padding: 0 0 0em 0 ;
	float: left;
	width: 50%;
	border: 0;
	}
	
#artwork25 {
	margin: 0 ;
	padding: 0 0 0em 0 ;
	float: left;
	width: 26.6%;
	border: 0;
	}
	
	
/* video
--------------------------------------------- */

.artworkHoriz_1 {
	margin: 0 0 1.5em 0 ;
	width: 80%;
	}

#container {
margin: auto;
width:100%;
}

#video {
margin:auto;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
border: none;

}
#video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
	

/* secondary styles
--------------------------------------------- */


/* footer
--------------------------------------------- */


/* misc
--------------------------------------------- */

hr, .hide {
	display: none;
}

a img {
	border: none;
}

/* self-clear floats */
	
.group:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
	
	
	
/* responsiveness
--------------------------------------------- */

/*add media-specific styles here for phones an tablets*/

@media screen and (max-width: 800px) {
	
.main {
	float: right;
	width: 83%;
	-webkit-box-sizing: border-box;
	-moz-boc-sizing: border-box;
	box-sizing: border-box;
	}
	
.logo img{
	max-width: 10em;
		}

.secondary {
	float: left;
	width: 17%;
	-webkit-box-sizing: border-box;
	-moz-boc-sizing: border-box;
	box-sizing: border-box;
	}
	
 .nav {
	position: fixed;
	top: 10em; 
}	
	
#thumbnail {
	margin: 0 ;
	padding: 0 0 0 0 ;
	float: left;
	width: 40%;
	}
	
#thumbnailWide {
	margin: 0 ;
	padding: 0 0 0em 0 ;
	float: left;
	width: 80%;
	border: 0;
	}
	
h1.label, h2.label, h3.label, h4.label {
	margin: 0 0 .5em 0;
}
	
#textblock {
	margin: 0;
	padding: 1em 0 0 2em;
	float: left;
	width: 65%;
	}
	
#textblock_narrow {
	margin: 0;
	padding: 1em 0 2em 2em;
	float: none;
	width: 80%;
	}
	
p.longname { display: none;}
p.shortname { display: inline;}
	
.extra {
	padding: 1em 2em 1em 2em;
	}
	
#thumbnail .extra {
	padding: 1em 2em 0em 2em;
	}
	
	
#artwork {
	margin: 0 ;
	padding: 0 0 0 0 ;
	float: left;
	width: 70%;
	}
	
#artwork70 {
	margin: 0 ;
	padding: 0 0 0 0 ;
	float: left;
	width: 70%;
	}
	
#artwork60 {
	margin: 0 ;
	padding: 0 0 0 0 ;
	float: left;
	width: 70%;
	}
	
#artwork50 {
	margin: 0 ;
	padding: 0 0 0 0 ;
	float: left;
	width: 50%;
	}
	
#artwork40 {
	margin: 0 ;
	padding: 0 0 0 0 ;
	float: left;
	width: 35%;
	}
	
#artwork_portrait {
	margin: 0 ;
	padding: 0 0 0em 0 ;
	float: none;
	width: 80%;
	border: 0;
	}
	
#artwork25 {
	margin: 0 ;
	padding: 0 0 0 0 ;
	float: left;
	width: 23.35%;
	}
	
.artworkHoriz_1 {
	margin: 0 0 2em 0 ;
	width: 80%;
	}
	
.nav ul li {
	letter-spacing: .1em;	
	font-size: 1.4em;
	margin: 0 0 .2em 0;	
	}

.nav ul li a {
	display: block;
	padding: .6em 7em .6em 0em;
	}
	
.nav li.this {
	letter-spacing: .1em;	
	font-size: 1.4em;
	padding: .6em 7em .6em 0em;
	margin: 0 0 0 0;
}

a:hover {
	color:#000000; letter-spacing: .2em; text-decoration: none;
}


p { font-size: 1.3em; line-height: 1.4em; margin: 0 0 .9em 0; max-width: 35em;}
p.narrow { font-size: 1.4em; line-height: 1.4em; margin: 0 0 .9em 0; max-width: 35em;}
	
.textblock ul li {
	font-size: 1.3em;
	line-height: 1.4em;	
		}
}

/* end max-width 800px
--------------------------------------------- */


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

#wrap {
	padding 0: 1em;
		}

#content {
	margin: 0 auto;
	width: 100%;
	float: none;
	}
	
#header {
	float: none;
	padding: auto;
}

.logo {
	float: left;
	width: 60%;
	margin: 0 0 1.2em 1.3em ;
	position: relative;
}

a.return {
	display: none;
}


p.bottomspace {
	display: none;
}

p.narrow { max-width: 30em;}

p.longname { display: inline;}
p.shortname { display: none;}

.main {
	width: 95%;
	margin: 0 0 0 2em;
	float: none;
	padding: auto;
}

.extra {
	padding: 1em 1.5em 1em 1.5em;
	}
	
#thumbnail {
	margin: 0;
	padding: 0 0 0 0;
	float: none;
	width: 90%;
	}
	
#thumbnailWide {
	margin: 0 ;
	padding: 0 0 0em 0 ;
	float: none;
	width: 90%;
	border: 0;
	}
	
#textblock{
	margin: 0;
	padding: 1em 0 0 2em;
	float: left;
	width: 80%;
	}
	
#textblock_narrow {
	margin: 1em 0 2em 2em;
	padding: 0 0 0 0 ;
	float: none;
	width: 65%;
	}

#artwork {
	margin: 0;
	padding: 0 0 0 0;
	float: none;
	width: 90%;
	}
	
#artwork70 {
	margin: 0;
	padding: 0 0 0 0;
	float: none;
	width: 90%;
	}
	
#artwork60 {
	margin: 0;
	padding: 0 0 0 0;
	float: none;
	width: 90%;
	}
	
#artwork50 {
	margin: 0;
	padding: 0 0 0 0;
	float: none;
	width: 90%;
	}
	
#artwork_portrait {
	margin: 0 0 0 .5em;
	padding: 0 0 0em 0 ;
	float: none;
	width: 70%;
	border: 0;
	}
	
#artwork40 {
	margin: 0;
	padding: 0 0 0 0;
	float: none;
	width: 90%;
	}
	
#artwork25 {
	margin: 0;
	padding: 0 0 0 0;
	float: none;
	width: 90%;
	}
	
.artworkHoriz_1 {
	margin: 0;
	padding: 0 0 0 0;
	float: none;
	width: 90%;
	}
	
.secondary {
	float: none;
	width: 100%;
	margin: 0 0 0 1em;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-boc-sizing: border-box;
	box-sizing: border-box;
	}
	

.nav {
	position: inherit;
	margin: 0em 1em 0 1em;
	padding: 0 0 0 0;
} 
.nav ul {
	text-align: left;
	display: block;
	margin: 0 ;
	}
	
.nav ul li {
	display: block;
	margin: 0 0 .5em 0;
	font-size: 1.3em;
	background: #EEE;
	width: 87%;
	}
	
.nav ul li a {
	display: block;
	padding: 1em 7em 1em .6em;
	height: 1.5em;
	margin: 0 .02em;
	width: 50%;
	color: #222;
	}
	
.nav li.this {
	letter-spacing: .1em;
	height: 1.6em;
	padding: 1em 7em 1em .6em;
	font-size: 1.3em;
	margin: 0 0 .2em 0;
	background: none;
	
}


}

/* end max-width 640px
--------------------------------------------- */

	
/* end */