html, body {
	height: 100%;
}

body {
	margin: 0px;
	padding: 0;
	color:#333333;
	font-size : 11px;
	font-Family : Verdana, Arial, Helvetica, sans-serif;
	font-Weight : normal;
	line-height: 135%;
	}
	
p {
	font-size: 1.4em;
	line-height: 1.3;
	}
	
	
/* divs and elements for painting pages */	

#content {
	position: absolute;
	z-index: 99;
	width: 99%;
}

	
#bkgd {
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
}

div.pleft {
	position: absolute;
	text-align: right;
	width: 15%;
	float: left;
	background: #ccc;
	padding: 10px 5px 10px 10px;
	margin-top: 100px;
	z-index: 999;
	}


.pleft a {
	color: #fff;
	font-Weight : bold;
	text-decoration: none;
	padding: 0 0 0 10px;
	}


.pleft a:hover {
	color: #333;
	font-Weight : bold;
	background-color: #f9e7c0;
	text-decoration: none;
	padding: 0 0 0 10px;
	}
	
.pleft a.selected {
	color: #333;
	font-Weight : bold;
	background-color: #f9e7c0;
	text-decoration: none;
	padding: 0 0 0 10px;
	}


#largeImg {
	border: solid 1px #333;
	width: 550px;
	height: 400px;
	padding: 5px;
}

#largeImg2 {
	border: solid 10px #fff;
	width: 867px;
	height: 400px;
	padding: 5px;
}

#largeImg3 {
	border: solid 1px #333;
	width: 850px;
	height: 400px;
	padding: 5px;
}

.thumbs {
	padding: 4px;
	margin-left: 20px;
}

.thumbs a{
	border: solid 1px #333;
	text-align: center;
	background-color: #999;
	width: 26px;
	height: 20px;
	padding-right: 13px;
	padding-left: 13px;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-right: 1px;
	color: #fff;
	text-decoration: none;
}

.thumbs a:hover {
	border: 1px dashed #333;
	background-color: #ededed;
	color: #000;
	text-decoration: none;
}


/* divs and elements for painting pages */	


h1 {
	color:#fff;
	font-size : 36px;
	font-Family : Georgia, Times New Roman, serif;
	font-Weight : bold;
	background-color: #8daaaa;
	padding: 20px 0 20px 0;
	margin: 0 0 20px 0;
	}

h2 {
	color:#333366;
	font-size : 12px;
	font-Family : Verdana, Arial, Helvetica, sans-serif;
	font-Weight : bold;
	}
	
	/* link style for containers */	

.container a {
	color:#526d6d;
	font-Weight : bold;
	text-decoration: none;
	background-color: #f9e7c0;
	border: 0px dashed #336699;
	padding: 0 5px 0 5px;
	}
	
.container a:hover {
	color:#fff;
	font-Weight : bold;
	text-decoration:none;
	background-color: #afd1d1;
	border: 0px dashed #333;
	padding: 0 5px 0 5px;
	}
	
/* end link style for exhibits */

/* link style for exhibits */	

.grid-dl a {
	color:#526d6d;
	font-Weight : bold;
	text-decoration: none;
	background-color: #f9e7c0;
	border: 0px dashed #336699;
	padding: 0 5px 0 5px;
	}
	
.grid-dl a:hover {
	color:#fff;
	font-Weight : bold;
	text-decoration:none;
	background-color: #afd1d1;
	border: 0px dashed #333;
	padding: 0 5px 0 5px;
	}
	
/* end link style for exhibits */	
	
a.designcaption {
	color:#526d6d;
	font-Weight : bold;
	text-decoration: none;
	background-color: #f9e7c0;
	border: 0px dashed #336699;
	padding: 0 5px 0 5px;
	}
	
a.designcaption:hover {
	color:#fff;
	font-Weight : bold;
	text-decoration:none;
	background-color: #afd1d1;
	border: 0px dashed #333;
	padding: 0 5px 0 5px;
	}
	
.title {
	font-size : 11px;
	color: #333333;
	font-weight: normal;
	background-color: #cadbe5;
	padding: 0 10px 0 250px;
	}

h3 {
	font-size : 1.6em;
	color: #333;
	font-weight: normal;
	background-color: #cadbe5;
	padding: 5px;
	text-align: center;
	text-transform: uppercase;

	}	

h4 {
	color:#333366;
	font-size : 12px;
	font-Family : Verdana, Arial, Helvetica, sans-serif;
	font-Weight : bold;
	background-color: #cadbe5;
	padding: 0 10px 0 10px;
	text-align: left;
	}
	
.caption {
	font-size : 11px;
	color: #aa4334;
	font-weight: normal;
	background-color: #f9e7c0;
	padding: 0 10px;
	text-align: left;
	}

/* nav elements */	

#nav {
	margin-bottom: 20px;
	background-color: #fff;
	padding: 0 10px 0 20px;
	border-bottom: 1px dashed #666;
}

#nav a{
	font-size: 11px;
	color: #666;
	text-decoration: none;
	margin-right: 30px;
	padding: 0 10px 0 10px;
}

#nav a:hover{
	color: #333;
	background-color: #f9e7c0;
	text-decoration: none;
}

#nav  .selected{
	color: #333;
	background-color: #f9e7c0;
	text-decoration: none;
}

/* nav elements */	


/* divs and elements for film pages */	
div.container-film {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap: 10px;
	padding: 10px;
	align-items: start;
    justify-items: start;
	}

div.containerdesign {
	border: 0px solid #000000;
	overflow: hidden;
	width: 60%
	}
	
div.left {
	text-align: left;
	font-size: normal;
	/* width: 50%;
	float: left */
	background-image: url(../other/images/trans.png);
	padding: 0 10px 10px 10px;
	}

div.right {
	text-align: left;
	/* width: 50%;
	float: right;*/
	img {
		max-width: 300px;
	}
	}


div.eleft {
	text-align: right;
	width: 40%;
	float: left;
	}

div.eright {
	text-align: left;
	width: 55%;
	float: right;
	padding-right: 20px;
	background-color: #fff;
	}
	
div.eright {
	text-align: left;
	width: 55%;
	float: right;
	padding-right: 20px;
	background-color: #fff;
	}
	
.images	{
	background-color: #fff;
	border: 1px dashed #666;
	padding: 0 40px 0 20px;
	margin: 0 10px 0 0;
	}

.eimages	{
	background-color: #fff;
	border: 1px dashed #666;
	padding: 0 20px 0 40px;
	margin: 0 10px 0 0;

	}

div.logo {
	float: right;
	background-image: url(./images/logo_4website.gif);
	background-repeat: no-repeat;
	z-index: 50;
	width:65px;
	height: 75px;
	padding: 0 0 0 20px;
}

/* divs and elements for non-painting pages */	



/* this is to make the footer image stay on the bottom right of homepage */
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -75px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
	height: 75px; /* .push must be the same height as .footer */
}
/* this is to make the footer image stay on the bottom right of the screen */

/* grid and RWD for exhibits */

.grid-dl {
    padding: 10px;
    margin: 0 auto;
  	max-width: 820px;
  }

  .grid-dl dt {
    padding: 0.5em 0 0.5em 0;
  }

  .grid-dl dd {
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #ccc;
  }

  @media (min-width: 550px) { 

    .grid-dl {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       margin-bottom: 20px;
    }

    .grid-dl dt {
      grid-column-start: 1;
      margin-right: 20px;
      text-align: right;
      border-top: 1px solid #ccc;
      padding-bottom: 10px;
    }

    .grid-dl dd {
      grid-column-start: 2;
      border-top: 1px solid #ccc;
      border-bottom: 0;
      padding: 0.5em 0 0.5em 0;
    }

    .grid-dl dt+dd {
      //border-top: 2px solid #ccc;
      
    }
    

  }
  
  @media all and (min-width: 921px)  {
  
  div.container {
	padding: 10px;
	display: grid;
	grid-template-columns: 1fr 3fr;
	}
	
	.eimages	{
	background-color: #fff;
	border: 1px dashed #666;
	padding: 0 20px 0 40px;
	margin: 20px 10px 0 0;
	}
	
	.text {
	width: 70%;
	}
	
  }