/*************** layout directions ***************/
html, body{
 background-color:#B4BDA2;
}

#pagewidth{
 position:relative;
 width:860px;
 margin-left: auto;
 margin-right: auto;
}

.pagewidth{
 position:relative;
 width:860px;
 margin-left:auto;
 margin-right:auto;
}

/*************** top navigation ***************/
#header{
 width:100%;
 height:90px;
 float:center;
 position:relative;
}

#logosection h1 {
  margin: 0;
  padding: 0;
}

#logosection h1 a {
  margin: 0;
  padding: 0;
  padding-top: 108px;
  height: 0px;
  width: 100%;
  background-color:#999966;
  background-image: url('../images/topgraphic3.jpg');
  background-position: center;
  background-repeat: no-repeat;
  float: left;
  overflow: hidden;
}

#firstnavcols{
 width:860;
 height: 30px;
 position:relative;
 background-color:#B4BDA2;
 /*background-image: url('../images/tilenav.png');*/
 background-repeat: no-repeat-y;
 text-align: center;
}

#navlist li{
display: inline;
list-style-type: none;
padding-right: 10px;
padding-left: 0px;
}

a.topnav {
font:14px arial;
padding: 0px 0px 0px 3px;
text-decoration:none;
}

a.topnav:link {color:#65685C;}
a.topnav:visited {color:#65685C;}
a.topnav:hover {color:#F2C545;}
a.topnav:active {color:#333333;}

body#home #a a{color:#333;}
body#exhibits li#b a{color:#333;}
body#artists li#c a{color:#333;}  
body#firstfriday li#d a{color:#333;}
body#about li#e a{color:#333;}  
body#contact li#f a{color:#333;}
body#directions li#g a{color:#333;}
/*************** main ***************/
/*two column area*/
#twocols{
 width:840px;
 position:relative;
 float:left;
 background-color:#FFFFFF;
 padding:10px 10px 10px 10px;
 border- radius:5px 5px 0px 0px; 
 -moz-border-radius: 5px 5px 0px 0px; 
 -khtml-border-radius: 5px 5px 0px 0px; 
 -webkit-border-radius: 5px 5px 0px 0px;
}

#rightcol{
 width:220px;
 float:right;
 position:relative;
 padding:0px 0px 0px 0px;
}

#maincol{
 float: left;
 position: relative;
 width:600px;
 padding:0px 0px 0px 0px;
 background-color:#FFFFFF;
}

#photobox{
 float: right;
 position: relative;
 width:400px;
 padding:0px 0px 0px 0px;
 background-color:#FFFFFF;
}

#quoted{
 float: left;
 position: relative;
 width:330px;
 text-align: justify;
 padding:10px 10px 10px 10px;
 margin:0px 0px 0px 20px;
 background-color:#F0F0F0;
 border- radius:5px 5px 5px 5px; 
 -moz-border-radius: 5px 5px 5px 5px; 
 -khtml-border-radius: 5px 5px 5px 5px; 
 -webkit-border-radius: 5px 5px 5px 5px;
}

#submission{
 float: left;
 position: relative;
 width:600px;
 height:210px;
 padding:0px 0px 0px 0px;
 background-color:#FFFFFF;
}

#secondcol{
 width:290px;
 float:right;
 position:relative;
 padding:0px 0px 0px 0px;
}

#label{
 width: 190px;
 height: 90px;
 float:left;
 position:relative;
 padding:0px 0px 11px 5px;
 margin: 0px 5px 10px 0px;
 border- radius:0px 5px 5px 0px; 
 -moz-border-radius: 0px 5px 5px 0px; 
 -khtml-border-radius: 0px 5px 5px 0px;  
 -webkit-border-radius: 0px 5px 5px 0px; 
}

#current{
 width:840px;
 height: 300px;
 float:left;
 position:relative;
 margin: 0px 0px 10px 0px;
 padding:0px 10px 0px 10px;
 background-color:#FFFFFF; 
 background-image: url('../images/current.jpg');
 background-repeat: no-repeat;
 border- radius:5px 5px 5px 5px; 
 -moz-border-radius: 5px 5px 5px 5px; 
 -khtml-border-radius: 5px 5px 5px 5px; 
 -webkit-border-radius: 5px 5px 5px 5px;
 }
 
 #section{
 width:840px;
 height:auto;
 float:left;
 position:relative;
 margin: 0px 0px 5px 0px;
 padding:0px 0px 0px 0px;
 background-color:#FFFFFF;
 border-style:solid;
 border-color:#999999;
 border-width:0px 1px 1px 0px; 
 }

#thumb{
float: left;
position: relative;
padding: 1px 1px 1px 1px;
margin: 0px 0px 10px -1px;
border-style:solid;
border-color:#999999;
border-width:1px 1px 1px 1px; 
/*width: 96px;
height: 96px;*/
}

#footer{
 /*height:100px;*/
 width:100%;
 height:60px;
 float:left;
 position:relative;
 padding: 10px 0px 10px 0px;
 margin: 0px 0px 0px 0px;
 background-color:#FFFFFF;
 background-image: url('../images/tiledark.png');
}

/*************** Sliding Boxes ***************/
 .boxgrid{  
width: 280px; 
height: 280px; 
margin:0px 0px 2px 0px; 
float:left; 
background:#FFFFFF;
overflow: hidden; 
position: relative; 
}

 .boxgrid img{  
 position: absolute;  
 top: 0;  
 left: 0;  
 border: 0;  
} 
.boxgrid p{ 
 padding: 0 10px; 
 color:#afafaf; 
 font-weight:bold; 
 font:10pt "Lucida Grande", Arial, sans-serif; 
}

.boxgrid h3{ 
 margin: 10px 10px 0 10px; 
 color:#FFF; font:18pt Arial, sans-serif; 
 letter-spacing:-1px; 
 font-weight: bold;  }

.boxcaption{  
 float: left;  
 position: absolute;  
 background: #000;  
 height: 100px;  
 width: 100%;  
 opacity: .8;  
 /* For IE 5-7 */  
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  
 /* For IE 8 */  
 -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  
}

.captionfull .boxcaption {  
top: 268;  
left: 0;  
}  

   .caption .boxcaption {  
top: 238;  
left: 0;  
}  
/*************** Look and Feel directions ***************/
p
{
 color: #FFFFFF;
 margin: 0px 0px 10px 0px;
 text-align: justify;
 font:12px arial;
 line-height:24px;
}

p.left
{
 color: #333333;
 margin: 0px 0px 10px 0px;
 text-align: justify;
 font:12px arial;
 line-height:12px;
}

p.main
{
 color: #333333;
 margin: 0px 0px 10px 0px;
 text-align: justify;
 font:12px arial;
 line-height:16px;
}

p.footer
{
 color: #888888; /*B4BDA2; #65685C*/
 padding: 0px 10px 0px 10px;
 font:12px arial;
 text-align: center;
}

h1
{
 font-size: 12px;
 color:#FFFFFF;
 font-variant: small-caps;
}

h2
{
font:14px arial;
color:#000000;
margin-top: -2px;
font-variant: small-caps;
}

h3
{
font-size: 14px;
color:#FFFFFF;
}

a 
{
font: 11px verdana;
letter-spacing:.1em;
text-decoration:none;
}

a:link {color:#65685C;}
a:visited {color:#65685C;}
a:hover {color:#F2C545;}
a:active {color:#F2C545;}

/***************hide the right column when printing***************/
@media print{
 #leftcol
 {
  display:none;
 }
 #twocols, #maincol
 {
  width:100%; 
  float:none;
 }
}