/* All layout styles for APG web site - id and class rules */
/*Most measurements are in ems to provide an elastic layout*/

/*Set font-size to 76% allowing use of ems for type sizing and other measures. Default size of p = 12.16pts (1em)*/
body {
	margin:0;
	padding:0;
	background:#444 url(/img/common/bgstripe.gif) fixed;
	color:#000;
	font-size:76%;
 	}

/*STYLES FOR ALL PAGES - from top to bottom of page*/
/*content is the main page container that centers all content*/
#content {
	margin:0 auto;
	padding:0;
	background-color: #eee;
	width: 60em;
	min-width:720px;
	}
/*head holds the logo and top navigation. <p> and <a> tags get special treatment*/
#head {
	margin: 0;
	padding: 0 0 0 1.8em;
	clear: both;
	background-color:#000;
	letter-spacing: 0.1em;
	height:55px;
	}
/*head <p> displays inline. "position" and "top" used to line up with logo. Color is for pipes between links.*/
#head p {
	position: relative;
	top: 24px;
	display: inline;
	color:#999;
	font: 10px Arial, Helvetica, sans-serif;
	}
/*sets color for actual links and removes underline*/
#head a {
	color:#bbb;
	font-weight: bold;
	text-decoration: none;
	}
#head a:hover {
	color: #fff;
	text-decoration:underline;
	}
#head a:active {
	color: #fff;
	text-decoration:underline;
	}

/*crumb is for  crumbtrails. Note special treatment for anchor tags.*/
/*crumb color is for "|" in between links*/
#crumb {
	margin:0;
	padding:0.3em 0 0.3em 2em;
	clear: both;
	border-bottom:#999 solid 1px;
	background-color: #eee;
	color:#b00;
	font: bold 0.83em Arial, Helvetica, sans-serif;
	}
#crumb a {
	color:#666;
	font-style:normal;
	text-decoration:none;
	}
#crumb a:hover {
	color:#000;
	text-decoration:underline;
	}

/*pagetop holds main page titles (h1 tags) and info that crosses both columns*/
#pagetop {
	margin:0;
	padding:0.8em 2em 0.5em;
	clear: both;
	}

/*foot is for the footer, a server side include file. Note the special treatment for h6 and p tags*/
#foot {
	margin:2.5em 0 0 0;
	padding:0.8em 2em;
	border-top:#ccc solid 1px;
	clear:both;
	color:#666;
	}
#foot h6 {
	margin-bottom:0;
	font-size:1em;
	letter-spacing:0.65em;
	}
#foot p {
	margin-bottom:0.25em;
	font-size: 10px;
	}

/*STYLES FOR GALLERY PAGES*/

/*photocol holds 300 pixel wide images for shows. Note the float left property.*/
/*NOTE use of voice-family box model hack for older IE Win browsers*/
#photocol {
	margin:0;
	padding:0.8em 1em 1em 2em;
	float: left;
	width:28em;
	voice-family:"\"}\"";
	voice-family:inherit;
	width: 25em;
	min-width:300px;
	}
/*be kind to Opera*/
html>#photocol {
	width:25em;
	}
/*photocol em reduces size of italic captions under images*/
#photocol em {
	font-size:0.75em;
	}

/*infocol style is used for all information columns. Note the float left property.*/
#infocol {
	margin:0;
	padding:0.8em 1em 1em 2em;
	float: left;
	width:28em;
	voice-family:"\"}\"";
	voice-family:inherit;
	width: 25em;
	}
/*em reduced in size for use in italicized captions. DO NOT USE EM IN COPY*/
#infocol em {
	font-size: 0.75em
	}
/*this rule should not be necessry. It was called out in the txt style sheet*/
#infocol h5 {
	padding:0;
	}


/*showing is used for long lists of photographers on gallery pages. The h4 tag is used for the "photographers" heading. Tables are controlled with the table rule. The li rule over-rides global li settings.*/
#showing {
	margin:0;
	padding:0 2em 0.8em;
	clear: both;
	}

/*these two rules take care of a goofy problem in IE that is not recognizing the font size within tables. It also does not recognize em units.*/
#showing table {
	margin:0;
	padding:0;
	width:600px;
	voice-family:"\"}\"";
	voice-family:inherit;
	width:55em;
	}
#showing td {
	margin:0;
	padding:0 0 0.5em 0;
	font-size:12px;
	}
#showing td li {
	list-style:none;
	}

#showing h4 {
	border-bottom:solid 1px #ccc;
	}
#showing li {
	padding:0 1em;
	line-height:1.2;
	}

/*opening is ONLY used to show a lot of thumbnail images inline. Typically used for photos of opening night.*/
#opening {
	margin:0;
	padding:0.8em 2em;
	}
#opening img {
	margin: 0 2px 8px 2px;
	float: left;
	}

/*STYLES FOR PORTFOLIO PAGES*/
/*thumb is for the thumbnail column. Note the margin rule that centers the img tag.*/
#thumb {
	mar