/******** ART TRAIL RESPONSIVE CSS STYLES 2019 *******/

/* RESET */

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, 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;}ol, 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;}

/* GLOBAL */
body
{
		margin-bottom: 5px;
        background:#e6e6e9;
		font-family: Verdana, Arial, 'Helvetica Neue', Helvetica, sans-serif;
        color: #333;
		box-sizing: border-box;
}

#wrapper{
		max-width: 980px;
		background: #f7f9f8;
		margin: 10px auto 0 auto;
		padding: 0;
}

p
{
        font-size: 100%;
		margin:5px 0;
        line-height:25px;
}

a
{
        text-decoration:none;
}

b {
	font-weight: bold;
}


/* HEADER */

header
{
        float: left;
        width:100%;
        margin: 0;
		background-color: #fff;
		background-image: url(../images/header2019-1.jpg);
		background-repeat: no-repeat;
		background-position: 10px 10px;
		padding-bottom: 30px;
		border-top: 5px solid #993333;
}

header h1
{
		float: left;
		font-family: "Century Gothic",Arial,sans-serif;
        padding: 65px 0 0 20px;
		font-weight: bold;
        font-size: 20px;
        color:#993333;       
}

header h2
{
        font-family: "Century Gothic",Arial,sans-serif;
        font-size: 20px;
		font-weight: bold;
        color: #525252;
        margin-left: 69%;
}


/* NAVIGATION */

nav {
	clear: both;
	float: left;
	width:100%;
	text-align:right;
	font-size:90%;
	font-weight: normal;
	text-transform: uppercase;
	background-color: #993333;
	padding: 0;
	border-top: 5px solid #993333;
	}
	
nav ul {
	margin-top:0px;
	}
nav ul li {
	float: right;
	list-style:none;
	}

nav a {
	color:#fff;
	display: block;
	text-decoration:none;
	padding: 10px 30px;
	}
nav a:hover {
	color:#993333;
	background-color: #fff;
	display: block;
	text-decoration:none;
	}
	
/* STATIC HEADER IMAGE */

#headerimage img {
	max-width: 100%;
	float: left;
}

/* EXHIBITION CALLOUT HEADER */

#exhibition-callout {
	width: 100%;
	float: left;
	background-color: #eaf7fb
}

#exhibition-callout img {
	width: 33%;
	float: left;
}

#callout-text {
	width: 66%;
	float: right;
	text-align: center;
}

#callout-text h1 {
	font-family: "Century Gothic",Arial,sans-serif;
        padding: 30px 0 10px 0;
		font-weight: bold;
        font-size: 30px;
        color:#aaa;   
}

#callout-text h2 {
	font-family: "Century Gothic",Arial,sans-serif;
        padding: 10px 0;
		font-weight: bold;
        font-size: 20px;
        color:#7799bb;   
}

#callout-text h3 {
	font-family: "Century Gothic",Arial,sans-serif;
        padding: 10px 0;
		font-weight: bold;
        font-size: 16px;
        color:#aaa;   
}

/* MAIN CONTENT */



#one-column {
	width: 94%;
	height: auto;
	float: left;
	background-color: #f7f9f8;
	padding: 30px 3%;
}



#one-column h2 {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 150%;
		font-weight: normal;
		text-transform: uppercase;
        color: #525252;
        
}

#one-column h3 {
        font-family: Arial, Helvetica,sans-serif;
        font-size: 100%;
		font-weight: bold;
        color: #d58080;
		margin-top: 10px;
        
}

#one-column h4 {
        font-family: Arial, Helvetica,sans-serif;
        font-size: 90%;
		font-weight: bold;
		text-transform: uppercase;
        color: #993333;
		margin-top: 20px;
        
}

#one-column h2.main-pages {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 100%;
		font-weight: bold;
		text-transform: uppercase;
        color: #993333;
		margin: 20px 0 -5px 0;      
}

#one-column h2.main-pages-topline {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 100%;
		font-weight: bold;
		text-transform: uppercase;
        color: #993333;
		margin: 20px 0 -5px 0;
		padding: 20px 0 0 0;
		border-top: 3px solid #993333;
}

#one-column img.map-image {
		height: auto;
		width: 100%;
		max-width: 950px;
}

.studio {
        
        color: #e8bbbb;
		
        
}

#one-column a:link, #one-column a:visited
{
        display: inline-block;
		color:#993333;
		text-decoration: none;
		padding: 0;
}

#one-column a:hover, #one-column a:active
{
	color: #993333;

}

#one-column ul.bullet-list {
	list-style-type: disc;
	margin-left: 30px;
	line-height: 25px;
}

/* TABLE TO DISPLAY ARTIST NAMES */

.datatable {
width: 98%;
  border: 0;
  border-collapse: collapse;
  margin-top: 20px;
}

.datatable td {
 
  border: 0;
  text-align: left;
  padding: 0.7em 0 0.7em 0.2em;
}

.datatable td.bold {
 
  font-weight: bold;
}

.datatable th {
  border: 1px solid #160456;
  background-color: transparent;
  font-weight: bold;
  text-align: right;
  padding: 0.3em;
}

.datatable caption {
  font-size: 100%;
  font-weight: normal;
  text-transform: uppercase;
  background-color: #160456;
  color: #fff;
  padding: 0.4em 0 0.3em 0;
  
}


/* AN ALTERNATIVE STYLE FOR LINKS IN THE TEXT, NOT USED ON THIS SITE  */

#one-column a.textlink:link, #one-column a.textlink:visited
{
        display: inline-block;
		color:#525252;
		text-decoration: underline;
		padding: 0 10px;
}

#one-column a.textlink:hover, #one-column a.textlink:active
{
	color: #fff;
	background-color: #a16e99;
}

#one-column p.right-align {
	text-align: right;
	font-style: italic;
	font-size: 90%;
	color: #ccc;
}

/***********************MEMBERS' A-Z INDEX PAGE *******************************/

#artistlist {
	width: 100%;
	margin: 20px auto 20px auto;
}

#artistlist ul li {
	display: inline-block;
	width: 160px;
	margin: 0 15px 20px 0;
	border: 1px solid #525252;
	position: relative;
}

#artistlist ul img {
	display: block;
	width: 160px;
	height: 160px;
}

#artistlist span {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 150px;
	background-color: rgba(0,0,0,0.4);
	color: #fff;
	padding: 5px;
	text-transform: uppercase;
	text-align: center;
	font-size: 80%;
}


/*********************** MEMBERS' PAGE IMAGE GALLERY *************************/

#one-column figure.thumb {
    margin: 2% 4% 20px 0;
    padding: 0;
    height: auto;
    width: 20%;
    float: left;
    text-align: center;
}	

#one-column figure.thumb img {
    max-width: 100%;
    border: 1px solid #d6e4e0;
}

#one-column figure.thumb a:link img, #one-column figure.thumb a:visited img {
    border: 1px solid #d6e4e0;
}

#one-column figure.thumb a:hover img, #one-column figure.thumb a:active img {
    border: 1px solid #d6e4e0;
}

#one-column figure.thumb p {
    text-align: center;
	font-size: 80%;
	line-height:20px;
	color: #525252;
	margin: 0;
	padding: 0;
}

/************ EXTRAHEIGHT CLASS FOR IMAGE GALLERIES WITH LONG CAPTIONS *********/

.extraheight {
    height: 70px;
}


/************ GRID OF IMAGES IN OLD-STYLE PAGES ***************/

#imggroup figure {
	float: left;
	margin-right: 20px;
}

#imggroup {
	margin: 20px 0;
}

#imggroup img {
	border: 1px solid #d6e4e0;
	margin-top: 20px;
}

#imggroup p {
	text-align: center;
	font-size: 80%;
	line-height:20px;
	color: #525252;
	margin: 0;
	padding: 0;
}

/**************** LINK BUTTONS *********************/

#one-column a.item-button:link, #one-column a.item-button:visited, #one-column a.item-button:hover, #one-column a.item-button:active {
	display: block;
	background: #e6e6e9;
	padding: 15px 5px;
	text-align: center;
	text-transform: uppercase;
	font-size: 80%;
	font-weight: normal;
	text-decoration: none;
	color: #525252;
	margin-bottom: 5px;
	border-radius: 7px;
}

/*********************CONTACT FORM*********************

input, textarea, select {
   -webkit-appearance: none;
}*/  /* Note, if enabled it allows correct styling of contact form submit button, but not to be used if PayPal dropdowns on the site */

.contactform {
	padding-top: 40px;
}
.contactform input[type=submit] {
	
	color: #FFF;
	background: #54615d;
	padding: 10px;
	border: 3px solid #9eb2ac;
	border-radius: 7px;
	margin: 10px 0 10px 0;
	
}

.contactform input[type=text] {
	width: 45%;
	font-family: arial, helvetica, sans-serif;
	font-size: 100%;
	padding: 20px 5px;
	background-color: #fff;
}

.contactform textarea {
	width: 94%;
	font-family: arial, helvetica, sans-serif;
	font-size: 100%;
	margin-top: 20px;
	padding: 20px 5px;
	background-color: #fff;
}

.contactform .corners {
	border: none;
	border-radius: 7px;
	
}

.contactform .rightmargin {
	margin-right: 2%;
}



/* FOOTER */

footer {
	clear: both;
	max-width: 100%;
	height: auto;
	text-align: left;
	background-color: #894343;
	margin: 0 auto;
	padding: 20px;
}

footer p {
	font-size: 80%;
	color: #e8bbbb;
	border-top: 1px solid #a4bad1;
	margin-top: 10px;
}

footer a:link, footer a:visited, footer a:hover, footer a:active {
	display: inline-block;
    color: #e8bbbb;
    text-decoration: underline;
}

footer a.pagelinks:link, footer a.pagelinks:visited, footer a.pagelinks:hover, footer a.pagelinks:active {
	display: inline-block;
    color: #e8bbbb;
    text-decoration: none;
	text-transform: uppercase;
	padding: 5px 40px 5px 0;
}

footer p.pale-text {
	text-align: left;
	color: #e8bbbb;
}

footer a.pale-text:link, footer a.pale-text:visited, footer a.pale-text:hover, footer a.pale-text:active {
	display: inline-block;
    color: #e8bbbb;
    text-decoration: underline;
}



/* CLEAR */

.clear
{
        clear:both;
}


/* MEDIA QUERIES FOR A RESPONSIVE LAYOUT */



@media (max-width: 850px) {

	#left-column {
	width: 27%;
	
}


	#right-column {
	width: 67%;
	
}

	#one-column figure.thumb {
    width: 29.33333%;
}
	
}

@media (max-width: 720px) {

	.contactform input[type=text] {
	width: 94%;
	margin-bottom: 10px;
}
	
}

@media (max-width: 600px) {
	
	header
{       
		background-image: url(../images/.jpg);
}
	
	header h1
{
		float: none;
		text-align: center;
		padding-top: 10px;
}

	header h2
{
       
        margin-left: 20%;
}

	nav {
	text-align:left;
	}
	
	nav ul li {
	float: left;
	}
	
	nav a {
	padding: 10px 20px 10px 10px;
	}

	#left-column {
	width: 100%;
	height: auto;
}


	#right-column {
	width: 94%;
	padding:  30px 3%;
	
}

	#one-column figure.thumb {
    width: 46%;
}

	.event-box {
	text-align: center;
}

}

@media (max-width: 400px) {

	#one-column figure.thumb {
    width: 96%;
}

	footer a.pagelinks:link, footer a.pagelinks:visited, footer a.pagelinks:hover, footer a.pagelinks:active {
	display: block;
}

footer p.pale-text {
	text-align: center;
	color: #e8bbbb;
}
	
}