h1 {font-size: 16px;}	/* */	
/* form {text-align: center;}/* */

.page {
/*	position: relative;/* */
/*	width: 100%;	/* */
	height: 488px;	/* */
	text-align: center;		/* horizontally centers content */
/*	background: #cccccc; 	/* */
/*	background: #cccccc url('test.jpg') no-repeat;/* */
/*	display: table-cell;  				/* good for Gecko based browsers */
/*  vertical-align: middle; 			/* good for Gecko based browsers */
	
}

.page a { 
	text-decoration: none; /* */
	}
.page p {
/*	font-size: 16px; 	/* */
	margin: 20px; 		/* */
	text-align: justify;
}

.instructions {text-align: center;}

/* wraptocenter CSS starts here*/

	.wraptocenter {
		display: table-cell;
		text-align: center;
		vertical-align: middle;
	  /*  width: 792px;       /* Pick up from outer container */
	  /*  height: 488px;      /* Pick up from outer container */
	}

	.wraptocenter * {
		vertical-align: middle;
	}

  /*\*//*/
  .wraptocenter {
    display: block;
  }
  .wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
  }
  /**/

/* SEE ALSO CONDITIONAL IE SECTION FOR LESS THAN IE8 */

/* wraptocenter CSS ends here*/

.center-page-outer {height: 488px; overflow: hidden; position: relative;}
.center-page-outer[id] {display: table; position: static;}

.center-page-middle {position: absolute; top: 50%;} /* for explorer only*/
.center-page-middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

.center-page-inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */


.center-p {text-align: center;}

.advice {color: #999999; }

a.black_blue:link {color:black; font-weight: bold; text-decoration: none;}
a.black_blue:active {color:black; font-weight: bold; text-decoration: none;}
a.black_blue:visited {color:black; font-weight: bold; text-decoration: none;}
a.black_blue:hover {color:blue; font-weight: bold; text-decoration: none;}

a.red_blue:link {color:red; font-weight: normal; text-decoration: none; padding-bottom: 3px;}
a.red_blue:active {color:red; font-weight: normal; text-decoration: none; padding-bottom: 3px;}
a.red_blue:visited {color:red; font-weight: normal; text-decoration: none; padding-bottom: 3px;}
a.red_blue:hover {color:blue; font-weight: normal; text-decoration: none; padding-bottom: 3px;}

a.black_white:link {color:black;}
a.black_white:active {color:black;}
a.black_white:visited {color:black;}
a.black_white:hover {color: white;}

a.gray_white:link {color:#cccccc;}
a.gray_white:active {color:#cccccc;}
a.gray_white:visited {color:#cccccc;}
a.gray_white:hover {color: white;}

a.black_green:link {color:black; font-weight: bold;}
a.black_green:active {color:black; font-weight: bold;}
a.black_green:visited {color:black; font-weight: bold;}
a.black_green:hover {color: green; font-weight: bold;}

a.black_red:link {color:black; font-weight: bold;}
a.black_red:active {color:black; font-weight: bold;}
a.black_red:visited {color:black; font-weight: bold;}
a.black_red:hover {color: red; font-weight: bold;}

#wisiris-link { 
		position: absolute; top: 487px; left: 441px; width: 60px; height: 15px; background-color: transparent; 
/*		border: 1px solid yellow; /* homing device*/}

#skip-intro {
		position: absolute; top: 487px; left: 441px; width: 60px; height: 15px; background-color: transparent; 
		z-index: 999;
		border: 1px solid yellow; /* homing device*/}

.default-page {background: #cccccc; }
.default-page-white {background: #ffffff; }


.page-artist { background: #cccccc url('content/site/artist.gif') no-repeat;	/* */}
.page-architect {background: #cccccc url('content/site/architect.gif') no-repeat;/* */}
.page-technician {background: #cccccc url('content/site/technician.gif') no-repeat;/* */}
.page-shop {background: #cccccc url('content/site/shop.gif') no-repeat;/* */}
.page-brent_cato {background: #cccccc url('content/site/brent_cato.gif')  no-repeat;/* */}

.page-category {background: #cccccc url('content/site/category.gif') no-repeat;/* */}
.page-private {background: #cccccc url('content/site/private.gif') no-repeat;/* */}
.page-gallery {background: #cccccc url('content/site/gallery.gif') no-repeat;/* */}

.page-associations {background: #cccccc url('content/site/associations.gif')  no-repeat;/* */}
.page-about {background: #cccccc url('content/site/about.gif') no-repeat; /* */}
.page-contact {background: #cccccc url('content/site/contact.jpg') no-repeat;/* */}
.page-contact50 {background: #cccccc url('content/site/contact50.jpg') no-repeat;/* */}
.page-contact70 {background: #cccccc url('content/site/contact70.jpg') no-repeat;/* */}

.page-about a img {border: none;}

/* colors for main button pages */
.page-technician p {color:#00ff00;}
.page-shop p {color:#333333;}
.page-brent_cato p {color:#999900;}

p.center-bold {text-align: center; font-weight: bold; }

.center-white {text-align: center; background-color: white; }


.page-scroll {
	overflow: auto;
	height: 451px;	/* 451 + 37<h1> = 488  height of scrolling area */
}



.narrative-container h1 {margin: 0 0 5px 0;}
.narrative-container p {margin: 0 20px 20px 20px; font-size: 11px; }
.narrative-container ul {list-style-type: none;}
.narrative-container li {margin: 0 0 0 20px; text-align: left;}
.narrative-container li a {text-decoration: none;	font-weight: bold;}


#copyright, #maker {
/*	padding: 5px 7px 0 0; /* */
	font-size: 9px;
	color: #cccccc;
/*	background: blue; /* */

}

#copyright {
	margin: 0 0 0 0;		/* fixup to adjust */
	width: 240px;
}

#maker {
	margin: 0 230px 0 0;	/* fixup to adjust */
}

#maker a {
	color: #ffffff;
}

/* ******************************************/
/* * PRIVATE FORM	                        
/* ******************************************/

form.private {
	clear:both;
/*	background-color: gray;		/* redundant */
	color: #ffffff;
	margin: 4px 0; 
}

form.private input[type="text"], form.private input[type="password"], form.private input[type="submit"] {
	margin: 0 20px;
	text-align: center;
	width: 170px;
	background-color: blue;
	color: white;
	border: 3px solid #cccccc;
}

form.private input[type="password"] {
	width: 200px;
}

form.private fieldset {
	border: 0;
	margin: 5px 0;
	padding: 0;
}

form.private fieldset:hover input[type="text"], form.private fieldset:hover input[type="password"], form.private fieldset:hover [type="submit"] {
	background-color: white;
	color: blue;
}

form.private input[type="password"].missing  {border: 3px solid red;}

.push388 {height: 388px;}
.push405 {height: 405px;}
.push451 {height: 450px;}  /* 488 - 37 - ?? = 425 */



#contact-message-label {
	position: absolute;
	font-size: 12px;
	top: 460px;
	left: 150px;
	width: 100px;
}

#contact-from-label {
	position: absolute;
	top: 410px;
	left: 358px;
	font-size: 12px;
	font-weight: bold;
}

#contact-to-label {
	position:absolute;
	top: 285px;
	left: 320px;
	font-size: 12px;
	
}

#contact-response {
	position:absolute;
	top: 447px;
	left: 292px;
}

#contact-response p#p5439 {
	margin: 0; width: 207px; height: 40px;
/*	color: #fa9fa4; 			/* */
	color: black;
	font-size: 16px;
/*	filter:alpha(opacity=60);		/* for IE */			  
/*	opacity:0.6;		/* CSS3 standard */		
}

#contact-message-label a, #contact-from-label a, #contact-to-label a { color: white; text-decoration: none;}

.contact-container {
/*	margin: 20px 0; /* 96px top*/
/*	width: 750px;   /* needs to allow enough space for SEND fiels to float to right of message box */
	height: 468px ;  /*  351 + 100  +37<h1> = 488 */
/* 	border: 1px solid #cccccc;	/* */
/*	border: 1px solid green;	/* */
}

.contact2-response {
	position: relative;
	top: -40px;
}

.contact2-response p {
	text-align: center;
	color: red;
}

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

.mailform {
	z-index: 100;
	position: relative;
}

.mailform-send {
	z-index: 200;
	position: relative;
	top: -40px;
	left: 370px;
}

.mailform-response {
	z-index: 201;
	position: relative;
	top: -40px;

}

form.contact {
	color: black;
	font-weight: bold;
	font-size: 12px;
	padding: 0;
/*	width: 660px;/* */
	margin-right: 132px;/* */
}

form.contact ul {
	list-style:none;
/*	margin: 0 40px;	/* */
}

form.contact label {    
	display: inline; 
	margin: 35px 0 0 0; /* */
	width: 130px;
	text-align: right;
	height: 30px;
	line-height: 30px;
}

/* Label for textarea */

.text-label-position { position: relative;}

form.contact label.topright {
/*	text-align: right;	/*	*/
/*	vertical-align: top;	/* */
}

* html form.contact label {margin-top: 20px;}

form.contact .inputs {
	margin: 35px 0 0 0; /* */
	border: 1px solid black; 
	width: 510px; 
	height: 30px;
	line-height: 30px;
	color: black; 
	font-size: 16px;
	font-weight: bold;
	  /* for IE */
	  filter:alpha(opacity=60);
	  /* CSS3 standard */
	  opacity:0.6;
  }

* html form.contact .inputs {margin-top: 20px;}

form.contact .submits {
 /*	margin: 25px 0 0 0;/* */
	cursor: pointer;
/*	cursor: hand;		/* */
	font-size: 16px;
	font-weight: bold; 
	color: white; 
    border: 1px solid #ffffff;
	padding: 2px 4px;
    background-color: red;
 } 
 
form.contact fieldset {
	margin: 0;	border: 0; height: 42px;
/*	display: inline; /* */
} 

form.contact .textareas {
	margin: 35px 0 0 0;/* */
	width: 510px;	
	height: 175px;
	border: 1px solid black;
	font-size: 16px;
	font-weight: bold;
	filter:alpha(opacity=60);	/* for IE */
	opacity:0.6;				/* CSS3 standard */
	z-index: 99;
}

* html form.contact .textareas {margin-top: 20px;}

form.contact .invalid  {border: 1px solid red;}

/* ********************************************/

#portfoliocontainer {
/* CHECK BROWSER SPECIFIC STYLE SHEET FOR ADDITIONAL STYLING  */
	font-family: arial,sans-serif;
	font-size: 12px;
/*	background-color: gray;		/* redundant */
	padding: 72px 20px;			/* this added with height must be less than page div height */
	max-height: 488px;			/*  make same as page div height */
	overflow: auto;				/* add scrolling*/
/*	height: 344px;				/* 488 - 72 - 72  */
}

#portfolio ul {
	padding: 0;
    margin-left: auto;
    margin-right: auto;
	list-style-type: none;
	width: 100%;
}

#portfolio li { 
	display: inline; 
	}
	
#portfolio li a {
	font-weight: bold;
	margin: 10px 60px;		/* positions headings along with margin-left and margin-right auto on <ul> */
	width: 100px 
	}	

#category-container {
	position: relative; margin: 15px;
	width: 762px;
/*	height: 421px;  /* 421 + 15 + 15 = 451 + 37<h1> = 488 */
	margin-top: 97px;
	height: 324px;  /* 421 - 97 =  324 */
/*	background-color: #cccccc; /* */
}

.category {
	position:relative; overflow:hidden; float:left; display:inline; 
	margin: 7px; 
	width:240px;   /* 240 + 7 + 7 = 254 x 3 = 762 */
	height: 148px; /* */
/*	height: 154px;/* */
	}

.category a {display:block;  border: 1px solid #cccccc; }
.category a:hover {border: 1px solid white;}

.category.empty a {border: 0;}
.category.empty a:hover {border: 0;}

.category img {border-style: none; }

.category-container-x { width:240px; height:154px; position:relative; overflow:hidden; float:left; margin: 9px 0 9px 18px; display:inline; }
.category-container-x a {display:block; margin-left:auto; margin-right:auto; }
.category-container-x img {border-style: none; }

a.exhibit a {border: 1px solid black;}
a:hover.exhibit {border: 1px solid red;}

.container { width:180px; height:80px; position:relative; overflow:hidden; float:left; margin:0 8px; display:inline; }
.container a{ display:block; margin-left:auto; margin-right: auto;}
.container img {border-style: none;}

.wrap div {float:left; margin: 0 6px;}
.wrap div a { display:block; margin-left:auto; margin-right: auto;}
.wrap div img {border-style: none;}

#curator {width: 225px;	background-color: orange;}

/*********** CSS for gallery page ****************/

#gallery-container {
	position: relative; 
	width: 792px;   /* 792 + 0 + 0 = 792*/
	height: 451px;  /*  451 + 0 + 0 +37<h1> = 488 */
	background-color: white;	/* */	
}

#gallery-image-area {
/*	margin: 0 16px; /* */
	margin: 0;
	position: relative;
/*	width: 756px;	/* 758 + 16 + 16 = 792 */
	width: 792px;
	height: 371px;
	overflow:hidden;
/*	background-color: lime;	/* */			
}

#gallery-image-area div {width:790px; height:369px; border: 1px solid white; }
#gallery-image-area div img {display:inline; margin:0 auto; border:0;}

#gallery-scroll-area {
	width: 792px;
	height: 80px;		/* need an extra px or two for IE, make thumb a little shorter*/
	overflow: auto;		/* live up scrolling, and make <ul> wide enough to handle overflow*/
/*	background-color: pink;	/* */	
}

ul#thumbnails {
/*	padding:0 0 0 10px; /* */
	margin:0;
	list-style:none;
	width: 3400px;		/* make wide enough to handle scrolling */
}

ul#thumbnails  li {
	float:left;
/*	position: inline; /* */	
}

ul#thumbnails li a {
	margin: 0 0 0 16px;
	height:58px;	/* adjust down 2px for IE, for border */
	width:120px; 	/* */	
/*	padding:3px; 	/* */
	border: 1px solid white;
	display:block;
	text-decoration:none;
	background: white;
}

ul#thumbnails li a img {
/*	width:120px; 	/* set in HTML for each image */
/*	height:58px; 	/* set in HTML for each image */
	border: 0;
}
		
ul#thumbnails li a:hover {background: white; border: 1px solid white;}