/* CSS INDEX
------------
CSS NAV
CSS BODY
CSS PAGES
CSS COOKIES
CSS GALLERY
CSS FORMS
CSS TOP ARROW STYLE
CSS SOCIAL
CSS WINTER GARDENS
CSS FULL SCREEN
CSS FS HEADER
CSS FS BODY
CSS FS PAINTING PAGE
CSS FS UPLOADER
CSS SCREEN SIZES
*/

u { display: none; }
* { margin: 0; padding: 0; }
header { display: block; }
img { max-width: 100%; }
a img { border-style: none; }

body {
	font: 90% 'Open Sans',arial,sans-serif;
	background-color: #e2e5eb;
	color: #333;
	}
body#index { background: url(../images/home-background.jpg) 0 0 no-repeat #e2e5eb; }
body#printorder {
	background-image: none;
	background-color: #fff;
	}

#logo {
	width: 13vw;
	margin: 0.5vw 1vw -0.5vw;
}

.prints #shipping_alert,
.printscart #shipping_alert { display: none;}

footer { clear: both; }
footer div { font-size: 85%; line-height: 1; }
footer p img { width: 130px; }

.collapsor { cursor: pointer; }

h1 {
	font-size: 170%;
	font-weight: 700;
	color: #3b487e;
	padding: 1em 0;
	width: 90%;
	margin: 0 auto;
	}
#index h1 {
	font-size: 200%;
	padding: 0.5em 0 0;
	}
h2, h3 {
	width: 90%;
	margin: 0 auto;
	font-size: 160%;
	font-weight: 300;
	color: #3b487e;
	margin-top: 0.5em;
	}
#about h2 {
	font-size: 130%;
	margin-top: 1em;
}

p {
	padding-top: 0.5em;
	line-height: 1.5;
	}
footer {
	width: 90%;
	margin: 0 auto;
	}
footer p { margin-bottom: 1em; }

.right {
	float: right;
	margin: 0 0 0.5em 1em;
	}
.left {
	float: left;
	margin: 0 1em 0.5em 0;
	}

.hide { display: none; }
.cleft { clear: left; }
.cright { clear: right; }
.cboth { clear: both; }

.collapsor {
	background-color: transparent;
	padding: 0.5vh;
	width: 100%;
	text-align: center;
	cursor: pointer;
	}
.collapsee {
	display: none;
	list-style: none;
	}
footer h4.collapsor {
	display: none;
	background-color: #cfdde0;
	color: #cfdde0;
	}
#about footer h4.collapsor { display: block; }


/*	=============================================================================
	CSS NAV
	============================================================================= */

header nav ul.head { display: none; }
ul.subnav { font-size: 90%; }
header ul { list-style: none; }
header nav ul, header nav li { width: 100%; }
header nav li a,
ul.subnav a {
	width: 100%;
	display: block;
	text-align: center;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #eee;
	padding: 0.5em 0;
	/* default fallback */
	background: rgb(51, 102, 153) transparent;
	/* nice browsers */
	background: rgba(51, 102, 153, 0.6);
	/* IE 6/7 */
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#44336699, endColorstr=#44336699);
	/* IE8 */    
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#44336699, endColorstr=#44336699)";
	}


/*	=============================================================================
	CSS BODY
	============================================================================= */

#index article { min-height: 360px; }
#index article img { width: 320px; margin-top: 2.5em; }

#about article img { width: 100px; }

/* Exhibitions > Outlets */
#outlets_head {
	font-weight: 700;
	padding-left: 3em;
	}

ul.feint { list-style: none; }
ul.feint li { margin-top: 0.5em; }

div.section {
	width: 90%;
	margin: auto;
	padding: 1em;
	border: 1px solid #fff;
	}
div.subsection {
	display: inline-block;
	vertical-align: top;
	width: 62%;
	margin-right: 1%;
	}
div.subsection.left {
	width: 25%;
	text-align: center;
	}
div.subsection.left img { width: 90%; }
div.section ul, div.section ol { padding: 1em; }

a.button {
	display: block;
	margin: auto;
	text-align: center;
	color: #fff;
	font-weight: 700;
	padding: 0.2em;
	background-color: #26abac;
	text-decoration: none;
	margin-bottom: 2px;
	}
#index aside a.button { width: 6em; }
#edit aside a.button { width: 10em; }
#edit article a.button { width: 15em; }

/*	=============================================================================
	CSS PAGES
	============================================================================= */

#prints h2, .details h2 { margin-top: 1em; }
.details #detail_link,
.details #shipping_alert,
#madeby { display: none;}
#about #madeby { display: block; }


#detail_link {
	background-color: rgba(255, 255, 255, 0.4);
	height: 170px;
	padding-right: 1em;
	text-align: center;
	}
#index #detail_link {
	background-color: transparent;
	height: 5em;
	border: 1px solid #99c;
	color: #669;
	line-height: 1.7;
	}
#detail_link a { text-decoration: none }
#detail_link img { height: 120px; margin: auto;}
#detail_link strong { display: block; }

#home_quote {
	margin-top: 2em;
	padding: 0.5em 1em;
	background-color: #eef0f0;
	width: fit-content;
	block-size: fit-content;
	border: 2px solid #ddd;
	}

/*	=============================================================================
	CSS COOKIES
	============================================================================= */
	
#gdpr-cookie-message {
	clear:both;
	padding: 0.5em 0.5em 1em;
	width: 50%;
	background-color: transparent;
	}

#gdpr-cookie-message button {
	text-align: center;
	color: #fff;
	font-weight: 400;
	border-width: 0;
	padding: 0.2em 0.4em;
	background-color: #26abac;
	text-decoration: none;
	margin: 2px;
	}

#gdpr-cookie-message h4 { display: none; }
#gdpr-cookie-message p { font-size: 90%; }

/*	=============================================================================
	CSS GALLERY
	============================================================================= */

#gallery h2, #cards h2 { margin-bottom: 0.5em; }
#cards h1 { margin-top: 4.5em; }

.thumbs { clear: both; }
.thumbs div {
	border: 1px solid #fff;
	display: inline-block;
	width: 200px;
	padding-bottom: 2em;
	position: relative;
	text-align: center;
	vertical-align: top;
	}
.thumbs div.square { width: 200px; }
.thumbs div.square img { width: 150px; height: 150px; }
.thumbs div.portrait, .thumbs div.landscape { width: 250px; }
.thumbs div.landscape img { width: 215px; height: 154px; }
.thumbs div.portrait img { width: 154px; height: 215px; }
.thumbs div.panoramic { width: 350px; }
.thumbs div.panoramic img { width: 310px; height: 150px; }
.thumbs h4 {
	color: #369;
	width: 90%;
	margin: 1em auto 1em;
	height: 2em;
	}
	
#printshop h2 {
	text-align: center;
	padding: 1em;
	clear: both;
	}
#printshop .thumbs h4 { font-size: 130%; }
#printshop .thumbs div {
	display: block;
	width: 360px;
	margin: auto;
	}
#printshop .thumbs div img { width: 340px; }
	
#social {
	margin-top: 20px;
	list-style: none;
	}
#social li { display: inline-block; }

#painting article p#increment,
#printorder article p#increment {
		position: relative;
		height: 3em;
		}
#nextbutton { position: absolute; left: 8em; }

button.gallery {
	width: 8em;
	height: 3em;
	border-radius: 0.5em;
	background-color: #5bbcbf;
	}
button.gallery a {
	display: block;
	color: #fff;
	font-weight: 700;
	font-size: 120%;
	text-decoration: none;
	}

#paintimage { width: 60%; text-align: center; padding-top: 5%;}
#paintdetail { width: 35%; }

article .highlight {
    border: 2px solid #5cbebf;
    background-color: #369;
    }

.menu { position: relative; }
.menu span {
	display: block;
	position: absolute; bottom: 5%; left: 25%;
	width: 50%;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.6);
	}

dl#image-list { margin-top: 1em; }
dl#image-list dt { margin: 1em 0 0.5em; }
dl#image-list dd { background-color: #fff; }

/*	=============================================================================
	CSS FORMS
	============================================================================= */

form { position: relative; }
form div {
	padding: 0.5em;
	position: relative;
	}

form div.textinput label,
form div.textinput input,
form div.textinput textarea,
form div.textinput span,
form div.noInput strong {
	font-size: 100%;
	display: inline-block;
	vertical-align: top;
	}
form div.textinput span { position: absolute; left: 16em; }
form div.noInput {
	margin-bottom: 1em;
	font-size:110%;
	}
form div.noInput strong { position: absolute; left: 10.8em; }
form div.noInput u {
	display: inline;
	visibility: hidden;
	}
label {
	width: 20%;
	border-bottom: 1px solid #ccc;
	}
textarea { margin-bottom: 0.5em; }

form div.textinput input,
form div.textinput textarea {
	padding: 0.3em;
	border-color: #0090d3;
	border-width: 1px;
	border-style: solid;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}

fieldset {
	background-color: #e3d3a3;
	margin-bottom: 1em;
	padding-bottom: 1em;
	border-color: #0090d3;
	border-width: 1px;
	border-style: solid;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	}
fieldset#blankfieldset { background-color: #f1f7e8; }
legend {
	margin-left: 30px;
	color: #fff;
	background-color: #666;
	padding: 2px;
	border-color: #999;
	border-width: 1px;
	border-style: solid;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	}
legend.owner { background-color: #c00; }

.styled select {
	background: transparent;
	/*width: 5em;*/
	width: 6vw;
	font-size: 100%;
	overflow: hidden;
	height: 1.5em;
	position: relative; left: -2px; top: -2px;
	}
.styled.long select { width: 46vw; }

.styled {
	display: inline-block;
	/*width: 3.9em;*/
	width: 4vw;
	border-color: #0090d3;
	border-width: 1px;
	border-style: solid;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	overflow: hidden;
	background: url(../images/select-arrow.png) 96% / 20% no-repeat #efefef;
	}
.styled.long {
	width: 44.5vw;
	background: url(../images/select-arrow.png) 98% / 2% no-repeat #efefef;
	}

select.notowned option.notowned { display: none; }

#submit {
	position: fixed;
	top: 14vh; right: 3vw;
	}

#masterlistedit { position: relative; top: 3em; }

form .image-holder {
	display: inline-block;
	vertical-align: top;
	margin: 2% 2% 0 0;
	width: 45%;
	border: 0 solid #999;
	}

form .uploaded_image { max-width: 90%; }

#printorder h4 {
	margin-top: 2em;
	padding-top: 1em;
	border-top: 1px solid #aaa;
	}
#printorder-form th,
#printorder-form td,
.printorder-form td {
	text-align: left;
	padding: 0.1em 0.5em;
	}
#printorder-form td:nth-child(1), #printorder-form td:nth-child(2) { border-width: 0; }
#printorder-form td, .printorder-form td { border: 1px solid #ccc; }
#printorder-form td.clear, .printorder-form td.clear { border-width: 0; }
#printorder-form td.clear input, .printorder-form td.clear input { display: none; }
#printorder-form td.clear label, .printorder-form td.clear label {
	background-color: #60c0c2;
	color: #fff;
	border: 2px solid #60c0c2;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	}

#cartupdated a {
	color: #c00;
	font-weight: 700;
	}

#cart_table th {
	text-align: left;
	padding: 0.1em 0.5em 0.1em 0.3em;
	}
#cart_table td {
	padding: 0.1em 0.5em 0.3em 0.3em;
	border: 1px solid #ccc;
	background-color: #fff;
	}
#cart_table td.printname { color: #c00; }
#cart_table td.mtcell {
	background-color: transparent;
	border-width: 0;
	}
#cart_table td.nocell, #cart_table th.nocell { display: none; }
#cart_table td.remove {
	font-weight: 700;
	color: #fff;
	background-color: #c66;
	cursor: pointer;
	}

input#checkout {
	display: block;
	font-weight: 700;
	font-size: 110%;
	width: 10em;
	height: 2em;
	border-radius: 0.5em;
	color: #fff;
	background-color: #ac4342;
	}

a#shop {
	font-weight: 700;
	font-size: 90%;
	background-color: #5bbcbf;
	color: #fff;
	padding: 0.1em 0.5em;
	text-decoration: none;
	}

div.orderlist {
	border: 1px solid #ccc;
	padding: 0.2em 1em 1em;
	}
div.orderlist button {
	margin-top: 1em;
	background-color: #5cc0c3;
	color: #fff;
	font-size: 100%;
	padding: 0.3em;
	}

#update { cursor: pointer; }

/*	=============================================================================
	CSS TOP ARROW STYLE
	============================================================================= */


.cd-top.cd-is-visible {
	/* the button becomes visible */
	visibility: visible;
	opacity: 1;
	}
.cd-top.cd-fade-out {
	/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
	opacity: .5;
	}
.cd-top {
	display: inline-block;
	height: 40px;
	width: 40px;
	position: fixed;
	bottom: 40px;
	right: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	/* image replacement properties */
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: rgba(51, 102, 153, 0.8) url(../images/cd-top-arrow.svg) no-repeat center 50%;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .3s 0s, visibility 0s .3s;
	-moz-transition: opacity .3s 0s, visibility 0s .3s;
	transition: opacity .3s 0s, visibility 0s .3s;
	}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
	-webkit-transition: opacity .3s 0s, visibility 0s 0s;
	-moz-transition: opacity .3s 0s, visibility 0s 0s;
	transition: opacity .3s 0s, visibility 0s 0s;
	}
.cd-top.cd-is-visible {
	/* the button becomes visible */
	visibility: visible;
	opacity: 1;
	}
.cd-top.cd-fade-out {
	/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
	opacity: .5;
	}
.no-touch .cd-top:hover {
	background-color: #369;
	opacity: 1;
	}
	
	
/*	=========================================================================
	CSS SOCIAL
	========================================================================= */
	
ul#social li a {
	/* default fallback */
	color: rgb(0, 153, 153);
	/* nice browsers */
	color: rgba(0, 153, 153, 0.8);
	}
	
	
/*	=========================================================================
	CSS WINTER GARDENS
	========================================================================= */
	

#wintergardens h1 {
	font-weight: 700;
	font-size: 180%;
	padding: 0;
	margin: 0 0;
	}
#wintergardens h2 {
	margin: 0 0 1em;
	}
#wintergardens h3 {
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid #6bb;
	}
#wintergardens article section {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 10px solid #bcc;
}
#wintergardens article .head_section {
grid-column: 1 / span 2; 
border-bottom-width: 0;
}
#wintergardens article .right_section img { max-width: 600px;  }
#wintergardens article .left_section {
box-sizing: border-box;
padding-right: 2em;
}
	
	/*	=========================================================================
		CSS FS PAINTING PAGE
		========================================================================= */
	
	#painting article p#increment,
	#printorder article p#increment {
		position: relative;
		margin-top: 6em;
		height: 3em;
		}
	#painting article p#increment a,
	#printorder article p#increment a {
		display: inline-block;
		width: 6em;
		height: 2em;
		text-align: center;
		text-decoration: none;
		padding-top: 0.2em;
		border: 1px solid #eee;
		font-weight: 700; color: #399;
		box-shadow: 2px 2px 2px #bbb;
		/* default fallback */
		background: rgb(255, 255, 255) transparent;
		/* nice browsers */
		background: rgba(255, 255, 255, 0.6);
		/* IE 6/7 */
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#44FFFFFF, endColorstr=#44FFFFFF);
		/* IE8 */    
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#44FFFFFF, endColorstr=#44FFFFFF)";
		}
	#nextbutton { position: absolute; left: 8em; }
	
	#painting h1, #printorder h1 { display: none; }
	
	#painting h3, #printorder h3 { font-weight: 700; }
	#painting .medium, #printorder .medium { margin-top: 1em; }
	#painting .note, #printorder .note {
		font-size: 80%;
		margin-top: 1em;
		border-top: 1px solid #e1e6ec;
		}
	#painting .quote, #printorder .quote { line-height: 1.5; }
	#painting .author, #printorder .author { font-size: 90%; font-style: italic; }
	
    #wintergardens article {
        margin-top: 5em;
        display: grid;
        grid-template-columns: 1fr 1fr;
        }


/*	=============================================================================
	CSS FULL SCREEN
	============================================================================= */

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

	body#index { background: url(../images/home-background.jpg) 50% 0 no-repeat #e2e5eb; }
	
	footer { width: 50%; float: left; }
	
	h1 {
		font-size: 170%;
		font-weight: 700;
		color: #3b487e;
		padding: 1em 2vw;
		margin-top: 3em;
		width: 95%;
		}
	#gallery h1, #printshop h1, #cart h1 { margin-top: 7em; }
	#painting h1 { margin-top: 7em; }
	#exhibitions h1 { margin-top: 5em; }
	
	h3 { margin: 1em 0 0.3em; }
	h2, h3:first-child { margin: 0; }
	#gallery h2, #cards h2 { margin-bottom: 0.5em; }
	article .thumbs h3 { margin-bottom: 0.2em; }
	
	/*	=========================================================================
		CSS FS HEADER
		========================================================================= */

	#index header {
		margin-top: 2.3em;
		width: 97vw;
		height: 1em;
		background-image: none;
		background-color: transparent;
		}
	header {
		position: fixed; top: 0;
		z-index: 10;
		background-color: #e2e5eb;
		width: 100%;
		margin: 0;
		padding: 1em 2vw;
		width: 96vw;
		}
	#gallery header, #painting header, #printshop header, #cart header { height: 11em; }
	#printorder header { height: 7em; }
	#cards header { height: 6em; }
	
	header nav { position: relative; }
	header nav ul.head { display: block; }
	header nav h4.collapsor { display: none; }
	.accordion-toggle { display: none; }
	
	ul.subnav {
		padding-top: 0.7em;
		border-top: 1px solid #abc;
		}
	
	header nav li,
	ul.subnav li {
		margin: 0 0.3em 1em 0;
		padding: 0;
		width: auto;
		list-style: none;
		display: inline-block;
		}
	ul.subnav li { margin-right: 0.6em; }

	header nav li a,
	ul.subnav li a {
		padding: 0.1em 0.5em;
		color: #000;
		line-height: 100%;
		display: inline;
		border-bottom-width: 0;
	
		/* default fallback */
		background: rgb(255, 255, 255) transparent;
		/* nice browsers */
		background: rgba(255, 255, 255, 0.4);
		/* IE 6/7 */
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF, endColorstr=#66FFFFFF);
		/* IE8 */    
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF, endColorstr=#66FFFFFF)";
	
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		}

	header nav li a:hover,
	ul.subnav li a:hover {
		color: #fff;
	
		/* default fallback */
		background: rgb(102, 102, 102) transparent;
		/* nice browsers */
		background: rgba(102, 102, 102, 0.4);
		/* IE 6/7 */
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66666666, endColorstr=#66666666);
		/* IE8 */    
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66666666, endColorstr=#66666666)";
		}
		
	header nav li a.highlight,
	ul.subnav li a  {
	
		/* default fallback */
		background: rgb(0, 153, 153) transparent;
		/* nice browsers */
		background: rgba(0, 153, 153, 0.6);
		/* IE 6/7 */
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66009999, endColorstr=#66009999);
		/* IE8 */    
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66009999, endColorstr=#66009999)";
	
		color: #fff;
		}
		
	header nav li a.edit {
	
		/* default fallback */
		background: rgb(153,0,153) transparent;
		/* nice browsers */
		background: rgba(153,0,153,0.6);
	
		color: #fff;
		}
	
	li#cart_link a {
		color: #fff;
		font-weight: 700;
		background-color: #a44;
		}
	li#cart_link::before {
		content: "\f07a";
		font-family: fontawesome;
		font-size: 120%;
		color: #a44;
		padding-right: 0.2em;
		}
	
	/*	=========================================================================
		CSS FS BODY
		========================================================================= */
	
	article, footer { padding: 2vw; }
	
	#index article { min-height: 360px; }
	
	body#contact { background: url(../images/generic-background.jpg) 50% 0 no-repeat #e2e5eb; }
	
	#prints article, .details section {
		width: 50%;
		padding-right: 5%;
		float: left;
		}

	#about article,
	#news article,
	#exhibitions article,
	#painting article,
	#printorder article { display: flex; }
	#outlets div {
		background-color: burlywood;
		padding: 1em;
		margin: 1em;
	}
	#outlets h3 {
	color: black;
	height: 3em;
	}
	#outlets a { color: #666;}
		
	#about section,
	#news section,
	#exhibitions section {
		width: 40%;
		margin-right: 4vw;
	}
		
	#about section img,
	#news section img,
	#exhibitions section img {  }
	
	#edit article {
		width: 65%;
		float: right;
		margin: 0 30px 30px 10px;
		}
	
	#edit aside { width: 20%; }
	#edit footer { display: none; }
	#prints article, #prints aside, .details section, .details aside {
		display: inline-block;
		vertical-align: top;
		border: 2px solid #fff;
		padding: 1em;
		}
	
	#prints article, .details section { width: 50%; border-width: 0; }
	#prints aside, .details aside { width: 40%; border-width: 0; }
	#prints aside img, .details aside img { width: 100%; }
	#prints tbody, .details tbody {
		background-color: #fff;
		}
	#prints th, #prints td, .details th, .details td {
		text-align: left;
		padding: 0.2em;
		}
	#prints td.base, .details td.base,
	#prints th.base, .details th.base,
	#prints tr.base td, .details tr.base td,
	#prints tr.base th, .details tr.base th { border-bottom: 2px solid #ccc; }
	
	#exhibitions h2 { margin-bottom: 1em; }
	#exhibitions h3 {
		font-size: 140%;
		font-weight: 700;
		}
	#exhibitions div.link { margin-bottom: 2em; }
	#exhibitions div.link ul {
		list-style: none;
		margin-left: 2em;
		}
	#exhibitions div.link ul li {
		margin-bottom: 1em;
		font-size: 130%;
		font-weight: 700;
		}
	#exhibitions div.event {
		margin: 0.5em 0 1em;
		padding-bottom: 0.5em;
		border-bottom: 2px solid #6bb;
		}
	#exhibitions #archive h3 { margin-top: 1em; }
	#exhibitions #archive div.event {
		padding: 0.5em;
		border: 1px solid #fff;
		}
	#exhibitions p.title { font-size: 120%; }
	#exhibitions p.venue { font-weight: 700; }
    
    #exhibitions div.season {
        padding: 0.5em 0 1.5em;
        border-bottom: 6px solid #6bb;
        }
    #exhibitions div.season div.event { border-bottom: 2px solid #999; }
	
	#detail_link { position: relative; top: 14em; }
	#index #detail_link { visibility: hidden; }
	
	
	/*	=========================================================================
		CSS FS UPLOADER
		========================================================================= */
	
	.preview {
		width:200px;
		border:solid 1px #dedede;
		padding:10px;
		}

	#preview {
		color:#c00;
		font-size:12px
		}
	}


/* CSS SCREEN SIZES ============================================================= */

@media screen and (min-width: 650px) {
	h1 { margin-top: 1em; }
	header { height: 1.5em; }
	#gallery h1, #painting h1, #printshop h1, #cart h1, #cards h1 { margin-top: 4em; }
	#exhibitions h1 { margin-top: 3em; }
	#gallery header, #painting header, #printshop header, #cart header { height: 6em; }
	#printorder header { height: 5em; }
	#exhibitions header { height: 4em; }
	#detail_link { position: relative; top: 9em; }
	}

@media screen and (min-width: 800px) {
	
	div.section {
		display: inline-block;
		vertical-align: top;
		width: 40%;
		margin-right: 1%;
		padding: 1em;
		border: 1px solid #fff;
		}
	div.subsection {
		width: 62%;
		margin-right: 1%;
		}
	div.subsection.left {
		width: 35%;
		text-align: center;
		}
	div.subsection.left img { width: 90%; }
	
	#cart_table {
		float: left;
		margin-right: 1em;
		}
	input#checkout {
		  position: relative;
		  top: 1.5em;}
	a#shop {
		position: relative;
		top: 2em;
		}
	}

@media screen and (min-width: 900px) {
	#printshop .thumbs div {
		display: inline-block;
		vertical-align: top;
		}
	}

@media screen and (min-width: 1200px) {
	#gallery h1, #painting h1, #exhibitions h1, #printshop h1, #cart h1 { margin-top: 3em; }
	#gallery header, #painting header, #printorder header, #exhibitions header, #printshop header, #cart header {
		height: 4.5em;
		padding: 1em 1vw;
		width: 98vw;
		}
	#printorder header { height: 5em; }
	
	#detail_link {
		position: static;
		float: right;
		height: 180px;
		width: 30vw;
		margin: 2em 20vw 0 0;
		}
	#index #detail_link {
		visibility: visible;
		position: relative; top: 7em;
		float: right;
		margin: 2em;
		padding: 0.5em;
		height: 9em;
		width: 10vw;
		font-weight: 700;
		}
	
	#detail_link img {
		height: 180px;
		float: left;
		margin-right: 10px;
		}
	
	#detail_link strong { display: inline; }
	}

@media screen and (max-width: 650px) {
	body { margin: 1em; }
	#painting article p#increment,
	#printorder article p#increment {
		position: relative;
		margin-top: 12em;
		height: 3em;
		}
	#logo { width: 50vw; }
	#paintimage { width: 80%; margin: auto; }
  #paintdetail {
		width: 90%;
		border-bottom: 1px solid azure;
	}
	#painting article p#increment,
	#printorder article p#increment {
		position: relative;
		margin-top: 1em;
		height: 3em;
		}

	}

@media screen and (max-width: 1200px) {
	#paintimage { padding-top: 10%;}
}

@media screen and (max-width: 850px) {
	#paintimage { padding-top: 15%;}
}