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





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

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #444;
	font-size: 62.5%;
	background: #fff
	}
	
h1 { font-size: 3em; font-weight:400; letter-spacing: .1em;}
h2 { font-size: 1.8em; font-weight:400; letter-spacing: .1em;}
h3 { font-size: 1.5em}
h4 { font-size: 1.3em}

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

h1.eventtitle, h2.eventtitle, h3.eventtitle, h4.eventtitle {
	margin: 0 0 1.5em 0;
	font-weight:500;
	color:rgba(255,102,0,.8);
}

h1.carouseltitle{
font-family: Georgia, serif;
color: rgba(230,80,0,1); margin: 0 0 .1em 0;
}

h1.heading, h2.heading, h3.heading, h4.heading { 
	font-weight:500;
	letter-spacing: .05em;
	margin: 1.5em 0 .5em 0;
	}

h1.myname, h2.myname, h3.myname, h4.heading {	
	margin: -1.5em 0 .5em 0;
		}

h1.essaytitle{
	font-size: 2.5em;
	font-weight:400;
	letter-spacing: .1em;
	margin: 0 0 0 0;		
	}
	
h1.subtitle, h2.subtitle, h3.subtitle, h4.subtitle {
	margin: 0 0 1em 0;
	color: #00839f;
}	


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

SHOP{ font-style:normal; font-weight:500; background: rgba(0,161,4); color:white;}

SALE{ font-style:normal; font-weight:500; background: rgba(204,0,0); color:white;}

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

p.caption SOLD{ font-style:normal; font-weight:500; background: rgba(204,0,0,.65); color:white;}
p.caption HOLD{ font-style:normal; font-weight:500; background: rgba(243,148,53,.9); color:white;}
p.essay BUY{ font-style:normal; font-weight:500; background: rgba(204,0,0,.65); color:white;}

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

p.note { font-size: 1.4em;
		color:rgba(0,0,0,.6);		
		line-height: 1.4em;
		margin: 0 0 2.5em 0;
		max-width: 45em;
		letter-spacing: .08em;
		}

p.author {
	font-size: 1.7em;
	font-weight:400;
	margin: 0 0 2em 0;
	padding: 0 0 0 1em ;
		}
		
p.authorbio {
	font-size: 1.35em;
	margin: 3em 0 3em 0;
	}
	
p.border {
	border-bottom: 2px solid rgba(0,0,0,.2);
	width: 100%;
	max-width: 45em;
	margin-bottom: 2.5em;
	}
	
p.border4p {
	border-bottom: 4px solid rgba(0,0,0,.2);
	width: 100%;
	max-width: 45em;
	margin-bottom: 4em;
	}
	
p.eventborder {
	border-bottom: 2px solid rgba(0,0,0,.08);
	width: 100%;
	max-width: 45em;
	margin-bottom: 2.5em;
	}

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

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: 18.4em;}

p.navspace {
	line-height: .1em;
}

p.gapspace {
	height: 4em;
}

p.gapspacesmall {
	height: .5em;
}

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 {
	color:#000000; letter-spacing: .025em; text-decoration: none;
	}  /* mouse over link */
		
a.return { font-size: 1.5em;
margin: 0 0 2em 0;
}

a.thumbnail {
text-decoration: none;
}
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 */
	
a.next { font-size: 1.1em;
		color:rgba(0,0,0,.3);}
a.next:hover {
	color: rgba(0,0,0,1); letter-spacing: 0em; text-decoration: none;}  /* mouse over next link */
	
a.label { font-size: 1.1em;
		color:rgba(0,0,0,.6);}
a.label:hover {
	color: rgba(0,0,0,.6); letter-spacing: 0em; text-decoration: none;}
	
a.prints {
		color:#DD0000;}
		
a.prints:hover {
		color:#000000;letter-spacing: 0em;}
		
a.heading {
		color:#444;}
		
a.soft {
		color: rgba(220,220,220,.5);}
		
a.soft:hover {
		color: rgba(220,220,220,.5); letter-spacing: 0em; text-decoration: none;}
		
a.icon {
		opacity: .5;
		letter-spacing: .1em;
		max-width: 32px;}
		
a.icon img {
		max-width: 32px;}
		
a.icon:hover {
	opacity: 1;
	letter-spacing: .1em;}
	
a.buy:hover {
	opacity: .7;
	letter-spacing: 0em;
	}
	
a.shop {
		color:#FFFFFF;}
a.shop:hover {
    color: rgba(0,0,0);
	letter-spacing: 0em;
	}

a.sale {
		color:#FFFFFF;}
a.sale:hover {
    color: rgba(0,0,0);
	letter-spacing: 0em;
	}

	
.nav {
	position: fixed;
	top: 14em; 
}

ul.next {
	display: inline-block;
	clear:left;}	

.nav ul li a {
	display: block;
}

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

b {
	color: #555;
	font-weight:550;
}


	
	
	/* 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 0 2em 0 ;
	padding: 2em 0 0 2em ;
	float: left;
	width: 75%;
	-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.noborder img, a figure.noborder img {
	max-width: 100%;
	border: none;
	margin: 0 0 1px 0;
}

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

.nobr	{ white-space:nowrap; }



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

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

	

/* artwork sizes
--------------------------------------------- */
	

.artworkSquare {
	margin: 0 0 3em 0 ;
	padding: 0 0 0em 0 ;
	float: none;
	width: 55%;
	border: 0;
	}
			
.artworkHoriz_1 {
	margin: 0 0 3em 0 ;
	padding: 0 0 0em 0 ;
	float: none;
	width: 75%;
	border: 0;
	}
	
.artworkHoriz_2 {
	margin: 0 0 3em 0 ;
	padding: 0 0 0em 0 ;
	float: none;
	width: 90%;
	border: 0;
	}
	
.artworkVert {
	margin: 0 0 3em 0 ;
	padding: 0 0 0em 0 ;
	float: none;
	width: 48%;
	border: 0;
	}
	
.artworkVert_2 {
	margin: 0 0 3em 0 ;
	padding: 0 0 0em 0 ;
	float: none;
	width: 44%;
	border: 0;
	}
	
.artworkVert_3 {
	margin: 0 0 3em 0 ;
	padding: 0 0 0em 0 ;
	float: none;
	width: 40%;
	border: 0;
	}
	
.artworkVert_4 {
	margin: 0 0 3em 0 ;
	padding: 0 0 0em 0 ;
	float: none;
	width: 35%;
	border: 0;
	}

	
	
/* thumbnails
--------------------------------------------- */

#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;
	}
	
figure.thumbnailmain {
	display:block ;
	}
	
figure.thumbnailmobile {
	display:none ;
	}
	
	
	
/* video
--------------------------------------------- */

/* video
--------------------------------------------- */


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

#video {
margin:auto;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
border: 2px solid rgba(0,0,0,.6);

}
#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*/

/* ............ 1000px  ................*/	

@media screen and (max-width: 1000px) {
	
h1.myname, h2.myname, h3.myname, h4.heading {	
	margin: -1em 0 .5em 0;
		}
	
p.gapspace {
	display: none;
}

p.gapspacesmall {
	display: none;
}

.next, .label {
	display: none;
}
	
#textblock {
	margin: 0 0 1.5em 0 ;
		}
	
.artworkSquare {
	margin: 0 0 1.5em 0 ;
	width: 80%;
	}
			
.artworkHoriz_1 {
	margin: 0 0 1.5em 0 ;
	width: 80%;
	}
	
.artworkHoriz_2 {
	margin: 0 0 1.5em 0 ;
	width: 80%;
	}
	
.artworkVert {
	margin: 0 0 1.5em 0 ;
	width: 80%;
	}
	
.artworkVert_2 {
	margin: 0 0 1.5em 0 ;
	width: 80%;
	}
	
.artworkVert_3 {
	margin: 0 0 1.5em 0 ;
	width: 80%;
	}
		
.artworkVert_4 {
	margin: 0 0 1.5em 0 ;
	width: 60%;
	}
	
	}


/* ............ 800px (tablets) ................*/	

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

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


.secondary {
	float: left;
	width: 17%;
	-webkit-box-sizing: border-box;
	-moz-boc-sizing: border-box;
	box-sizing: border-box;
	}
	
/* ................*/
	
#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;
	}
	
figure.thumbnailmain {
	display:none ;
	}
	
figure.thumbnailmobile {
	display:block ;
	}
	
/* ................*/
	
h1.title, h2.title, h3.title, h4.title {
	margin: 0 0 .5em 0;
}

h1.eventtitle, h2.eventtitle, h3.eventtitle, h4.eventtitle {
	margin: 0 0 .5em 0;
}


.nav ul li {
	display: block;
	margin: 0 0 .5em 0;
	font-size: 1.3em;
	width: 60%;
	background: #EEE;}
	
.nav ul li a {
	display: block;
	letter-spacing: 0em;
	padding: 1em 7em 1em 1em;
	height: 1.2em;
	margin: 0 .02em;
	width: 80%;
	}
	
.nav li.this {
	display: block;
	padding: 1em 7em 1em 1em;
	margin: 0 0 .2em 0;
	font-size: 1.3em;
	width: 80%;
	background: none;
}
	
#textblock {
	margin: 0 0 2em 0 ;
	padding: 1em 0 0 2em;
	float: left;
	width: 80%;
	}
	
.extra {
	padding: 1em 2em 1em 2em;
	}
	
#thumbnail .extra {
	padding: 1em 2em 0em 2em;
	}

/* 800 artwork sizes
--------------------------------------------- */	
	
.artworkSquare {
	margin: 0 0 2em 0 ;
	width: 80%;
	}
			
.artworkHoriz_1 {
	margin: 0 0 2em 0 ;
	width: 80%;
	}
	
.artworkHoriz_2 {
	margin: 0 0 2em 0 ;
	width: 80%;
	}
	
.artworkVert {
	margin: 0 0 2em 0 ;
	width: 80%;
	}
	
.artworkVert_2 {
	margin: 0 0 2em 0 ;
	width: 80%;
	}
	
.artworkVert_3 {
	margin: 0 0 2em 0 ;
	width: 80%;
	}
	
.artworkVert_4 {
	margin: 0 0 2em 0 ;
	width: 70%;
	}
	
	
/* --------------------------------------------- */	
	


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.photocredit { font-size: 1em; }

.textblock {
	margin: 0 ;
	padding: 0 0 0 0 ;
	float: left;
	width: 70%;
	}
	
.textblock ul li {
	font-size: 1.3em;
	line-height: 1.4em;	
		}
}

@media screen and (max-width: 700px) {
	.main {
	float: right;
	width: 70%;
	-webkit-box-sizing: border-box;
	-moz-boc-sizing: border-box;
	box-sizing: border-box;
	}
	
}


/* ............ 600px (phones) ................*/

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

#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 0 .8em ;
	position: relative;
}

a.return {
	display: none;
}

a.icon, a.icon img {
		max-width: 26px;
		margin: 0 .21em 0 0;}
		
div.bottom {
	display: none;
}

h1.banner { font-size: 2.6em;}


h1.myname, h2.myname, h3.myname, h4.heading {	
	margin: -.4em 0 .5em 0;
		}

p.shorten {
	display: none;
}
 
p.bottomspace {
	display: none;
}

p.navspace {
	display: none;
}

p.gapspace {
	display: none;
}

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

p.note { margin: 0 0 1.5em 0;
		}

p.author { margin: 0 0 1em 0;
		}
		
p.authorbio {
	margin: 1.5em 0 1.5em 0;
	}
	
p.border, p.eventborder {
	margin-bottom: 1em;
	}

.main {
	width: 95%;
	margin: 0;
	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 0 2em 0;
	padding: 1em 0 0 2em;
	float: left;
	width: 80%;
	}


.artworkSquare {
	margin: 0;
	padding: 0 0 0 0;
	float: none;
	width: 90%;
	}
	
.artworkHoriz_1 {
	margin: 0;
	padding: 0 0 0 0;
	float: none;
	width: 90%;
	}
	
.artworkHoriz_2 {
	margin: 0;
	padding: 0 0 0 0;
	float: none;
	width: 90%;
	}
	
.artworkVert {
	margin: 0;
	padding: 0 0 0 0;
	float: none;
	width: 90%;
	}
	
.artworkVert_2 {
	margin: 0;
	padding: 0 0 0 0;
	float: none;
	width: 90%;
	}
	
.artworkVert_3 {
	margin: 0;
	padding: 0 0 0 0;
	float: none;
	width: 90%;
	}
	
.artworkVert_4 {
	margin: 0;
	padding: 0 0 0 0;
	float: none;
	width: 80%;
	}
	
.secondary {
	float: none;
	width: 100%;
	margin: 0;
	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: 85%;
	}
	
.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: .8em 7em .8em .6em;
	font-size: 1.3em;
	margin: 0 0 .2em 0;
	background: none;
}

.nav li.hidephone {
	display:none;
}


.hidephone {
	display:none;
}


.textblock {
	margin: 0 0 0 -3em;
	padding: 0 0 0 0 ;
	float: none;
	width: 100%;
	}
}

/* end max-width 600px
--------------------------------------------- */

	
/* end */