/* STYLESHEET for AEQAI.com, created by A.C. Frabetti. */



/*standard left-aligned text format*/
h1{text-align: left; font:  75% Verdana; color: #000000; padding: 10px; padding-left: 20px; padding-right: 20px; margin: 0px;  line-height: 180%; 
}


/*for titles of articles and other headings*/
h2{text-align: left; font: 150% Times New Roman; font-weight: bold; color: #333333; line-height: 100%; padding: 10px; padding-left: 20px; padding-top: 20px; padding-bottom: 0px; margin: 0px; border: 0px;}


/*for footer*/
h3{text-align: left; font: 75% Helvetica; font-weight: bold; color: #333333; line-height: 100%; border-top: solid 1px #CCCC99;  padding: 5px;}


/*for the navigation menu for the full articles pages*/
h4{text-align: center; font: 100% Times New Roman; color: #000000; padding: 8px; line-height: 75%; 
margin: 0px;}


/*This is the navigational menu font on the top right of most pages*/
h5{text-align: right; font: 75% Helvetica; font-weight: bold; text-decoration: none; font-style: normal; color: #663300; background-color: none; padding: 20px 20px 5px 5px;  margin: 0px;
}


/*small left-aligned text format for top banner where I typically have relevant quotes. Every page has this at the very top*/
h6 {text-align: left; font: 75% Times New Roman; color: #FFFFFF; padding: 10px; padding-left: 20px; margin: 0px; border: 0px;
}


/* This is used in the upper-right hand navigational menu to denote a selected page, replacing a link. */
span.link {text-decoration:none; color:#999966; border: 1px; border-color: #cccc99; border-style: solid; background-color: #FFFFFF; padding-left: 3px; padding-right: 3px;}



/*--------------SLIDESHOWS------------------------*/
/*This is the style information for making slideshows. I discourage this, though, since the photos take up too much disk space.
There is also the loadimages division tag just below; it loads images onto the user's browser without displaying them.
This allows the slideshow to go more quickly.*/

#lightbox{position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}

#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 40%; height: 90%; background-image: url(data:images/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }
#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

#loadimages {
    display:none;
float: left;
}


/*---------------End SLIDESHOWS-----------------*/

/*---------------FOR QUOTATIONS-----------------*/

/* In the event that there are not enough photos for an article, we can highlight text in the form of a block quote. The next two style sections
detail the blockquote info. The html is <blockquote class="right"></blockquote>. These put nice lines above and below the quotations. Right after 
the blockquote tag, one must put in the span class="quote" tag in order to enlarge the letters. Here is an example:
<blockquote class="left"><span class="quote">And, as the arts chase citizens...are not?</span></blockquote>
  */

blockquote.right {
width: 250px;
float: right;
font-size: 200%;
margin: 10px;
margin-left: 20px;
color:#000000;
padding: 10px;
padding-left: 50px;
background: transparent url("images/blockquote.gif") no-repeat 0 0;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}

blockquote.left {
width: 250px;
float: left;
font-size: 200%;
margin: 10px;
margin-right: 20px;
color:#000000;
padding: 10px;
padding-left: 50px;
background: transparent url("images/blockquote.gif") no-repeat 0 0;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}

span.quote {line-height: 100%;}

/* If there is a long quotation of a source, it needs to be indented. The first below is a way to do it using tables; the second, using ,blockquote> (follow 
blockquote with a <P> tag), the third, using UL classed as Quote (very good for poetry, in which the line lengths vary)  */

table.quote 	{ padding-left: 50px;
		width: 575px;
		}

blockquote {line-height: 4mm;}

ul.quote {
	list-style: none;
	margin-left: 0;
	padding: 0px;
	margin: 0px;
	padding-left: 6em;
	text-indent: -1em;
	line-height: 100%;
}

/*-----------------END for Quotations---------------------*/




/*------------SUBTITLES-------------------------*/
/* subtitles appear typically as a smaller section of a heading (in which case one would use subtitle_header) or
as the contributor's name underneath the title (below, such as 'by A.C. Frabetti') */

span.subtitle {text-align: left; 
	font: 50% times; 
	font-style: italic;
	margin: 0px;
	border: 0px;
	color: #333333; 
	padding: 0px; 
	}



span.subtitle_header {text-align: left; 
	font: 75% times; 
	font-style: bold;
	color: #333333; 
	padding: 0px; 
	}

/*---------------------END subtitles-------------*/



span.normal { 
	font-weight: normal;
font-size: 85%;
	}

span.huge { 
	font-weight: normal;
font-size: 150%;
	}

/*---------------UNORDERED AND ORDERED LISTS----------------------*/
/* The standard UL is below; the UL class="open" version is used when listing the articles by contributors. */
ul {
	list-style: none;
	margin-left: 0;
	padding: 0px;
	margin: 0px;
	padding-left: 1em;
	text-indent: -1em;
	line-height: 100%;
}

ul.indented {
	list-style: none;
	margin-left: 0;
	padding: 0px;
	margin: 0px;
	padding-left: 2em;
	text-indent: -1em;
	line-height: 100%;
}


ol {
	list-style: none;
	margin-left: 0;
	padding-left: 1em;
	text-indent: -1em;
	line-height: 100%;
}

ul.open {
	list-style: none;
	margin-left: 0;
	padding: 0px;
	margin: 0px;
	padding-left: 1em;
	text-indent: -1em;
	line-height: 150%;
}

/*--------------END Lists styles-------------------*/



/*------------IMAGES style types------------------*/
/*The basic IMG tag assumes that the image will float to the right.*/

img {float: right; border: 0; padding: 0px; margin: 0px;}


/* THe following two image styles are for a single page in the journal; it is a collection of thumbnails for links to regional 
artist web sites. The styles below shrinks the original image to fit into the showcase, depending on whether it is verticle or horizontal.
The showcase file is: regional_artists.htm. */
img.vertical_showcase {float: left;
	padding: 3px;
	margin: 0px;
	margin-bottom: 3px;
	margin-top: 1px;
	height: 99px;
	width: 80px;
	text-align: center;
	border: 1px solid #CCCC99;
}

img.horizontal_showcase {
    	margin: 0px; 
    	padding: 1px;
	border: 1px solid #CCCCCC; 
	width: 128px;
	height: 82px;
	float: left;}

/* IMAGES WITH CAPTIONS: These are the most common image styles in articles. "Captioned" is the standard, floating to the right;
"captionedindex" also floats to the right, but is only used on the index page (in order to shrink the images to line up in the page")
"captionedmiddle" is for large images (600px width). 
THESE SHOULD BE PLACED WITHIN THE DIVISION CAPTION TAGS, further down in the style sheet*/ 

img.captioned{ 
width: 291px;
float: right;
    	margin: 0px; 
    	padding:0px;
	padding-bottom: 3px;
	padding-top: 3px;
	border: 0px;

}

img.captionedindex{ 
width: 286px;
float: right;
    	margin: 0px; 
    	padding:0px;
	padding-bottom: 3px;
	padding-top: 3px;
	border: 0px;

}

img.captionedmiddle{ 
width: 590px;
float: left;
    	margin: 0px; 
    	padding:0px;
	padding-bottom: 3px;
	border: 0px;

}
/*---------End Showcase image styles--------------------*/


/* The Following styles are for images in the right column, where there are typically advertisements or announcements  */

img.ad {float: right;
	clear: right; 
	padding: 3px;
	margin: 0px;
	margin-bottom: 3px;
	margin-top: 1px;
	height: 198px;
	width: 161px;
	text-align: center;
	border: 1px solid #CCCC99;
}


/* The following style was only used for Manifest Gallery's catalog images. The normal add image adusts the height as well;
this one does not. It may be useful for ads (or any information that sits in the right column) that does not have the normal height.*/

img.ad_other {float: right;
	clear: right; 
	padding: 3px;
	margin: 0px;
	margin-bottom: 3px;
	margin-top: 1px;
	width: 161px;
	text-align: center;
	border: 1px solid #CCCC99;
}

/*---------END ad image styles----------------*/



img.floatright { 
    	float: right; 
    	margin: 0px; 
    	padding-top: 5px;
	padding-right: 0px;
	padding-left: 10px;
	padding-bottom: 5px;
	border: 0;

}


/* Centered images should be 600 pixels wide. */
img.center { 
    	margin: 0px; 

    	padding-top: 0px;
	padding-right: 0px;
	padding-left: 10px;
	padding-bottom: 5px;
	border: 0;
}


img.floatleft { 
    	float: left; 
    	margin: 0px; 
    	padding-top: 5px;
	padding-right: 10px;
	padding-left: 0px;
	padding-bottom: 5px;
	border: 0;

}


/* The next two styles are for the two images at the top of the journal. The first, simply classed as 'header,' is the main AEQAI gif.
The second, classed as 'header_image', is for the pic to the right of the AEQAI gif (typically a mosaic)  */

img.header { 
    	float: left; 
    	margin: 0px; 
    	padding: 0px;
	border: 0;
}

img.header_image { 
    	float: left; 
    	margin: 17px 9px 12px 12px;
    	padding: 0px;
	border: 1px solid #CCCCCC;
	height: 135px;
width: 290px;

}





/* Defunct way of putting in a contributor image thumbnail  */
img.floatrightmini { 
    	float: right; 
    	margin: 0px; 
    	padding: 10px;
	padding-right: 0px;
	border: 0;

}

img.bottom_ad {
    	margin: 0px; 
    	padding: 1px;
	border: 1px solid #CCCCCC; 
	width: 262px;
	height: 165px;
	float: left;
}





html  {		width: 100%;
		height: 100%;
}

body {	background-color: #FFFFFF;
  	text-align: center;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: inherit;
	width: 100%;
	height: 100%;
}

P { margin-top: 0; text-indent: 1em; }

/* The td tag is primarily used in the footer of all the pages to list the links */
td {width: 155px;
}


/*------MAIN DIVISION SECTION--------------*/

/* Every page has the container division, which centers the site. They then have the superheader, which houses the quote.
The header, where the banner is located alongside the navigational columns, is different at that point for regular pages vs. articles; see below. 
The articles use two separate divisions, one for the image at the top left, and the other for the three navigational options. */

#container {
  	margin: 0 auto;
  	width: 804px;
	height: 100%;
  	text-align: left;
	background-color: #FFFFFF;
	padding: 0px;
	border: 0px;
}


#superheader {width: 802px;
	height: 50px;
	background-color: #333333;
	overflow: hidden;
	padding: 0px; 
	margin: 0px;
	border: 1px solid #CCCC99;
}

#splash {width: 1010px;
margin: 0 auto;
	
padding-top: 25px;
padding-bottom: 50px;
}

img.splash {width: 1010px;
border: 1px solid #CCCC99;
}


#header {width: 802px;
	height: 179px;
	text-align: left;
	background-color: #FFFFFF;
	overflow: hidden;
	padding: 0px;
	margin: 0px;
	border 0px;
	border-bottom: 1px solid #CCCC99;
}


#header_articles {width: 802px;
	height: 62px;
	text-align: left;
	background-color: #FFFFFF;
	overflow: hidden;
	padding: 0px;
	margin: 0px;
	margin-bottom: 10px;
	border: 0px;
	border-bottom: 1px solid #CCCC99;
}

#header_articles_nav {width: 802px;
	background-color: #FFFFFF;
	overflow: hidden;
	padding: 0px;
	margin: 0px;
	margin-bottom: 16px;
	border: 1px solid #CCCC99;
	border-top: 0px;
}


/* In order to separate the main section of the index page, there are four main divisions. Their only difference is the background color;
it alternates. This looks elegant on the main index page of the site. */

#main {width: 624px;
	text-align: left;
	background-color: #FFFFFF;
	overflow: hidden;
	float: left;
	clear: left;
	padding: 0px; 
	margin: 0px;
	border: 0px;	
}

#main2 {width: 624px;
	text-align: left;
	background-color: #EEEEEE;
	overflow: hidden;
	float: left;
	padding: 0px; 
	margin: 0px;
	border: 0px;
}


#main3 {width: 624px;
	text-align: left;
	background-color: #FFFFFF;
	overflow: hidden;
	float: left;
	padding: 0px; 
	margin: 0px;
	border: 0px;
}

#main4 {width: 624px;
	text-align: left;
	background-color: #EEEEEE;
	overflow: hidden;
	float: left;
	padding: 0px; 
	margin: 0px;
	border: 0px;
}

/* This is the coding for the Iframe for the index page. It imports the short news and reviews section */

iframe {width: 624px;
	float: left;
	padding: 5px; 
	margin: 0px;
	border: 0px;
	height: 500px;
background-color: #EEEEEE;
scrolling: "no"; 

}


/* The next two divisions are only used in the archive page, in order to create two halves: archives.htm. */

#mainhalf1 {width: 312px;
	text-align: left;
	background-color: #EEEEEE;
	float: left;
	padding: 0px; 
	margin: 0px;
	border: 0px;
}

#mainhalf2 {width: 312px;
	text-align: left;
	background-color: #FFFFFF;

	float: left;
	padding: 0px; 
	margin: 0px;
	border: 0px;
}


/* The next two divisions are only used in the regional artist showcase page, regional_artists.htm */

#main_wide {width: 794px;
	text-align: left;
	background-color: #FFFFFF;
	overflow: hidden;
	float: left;
	padding: 0px; 
	margin: 0px;
	border: 0px;
}

#main_wide2 {width: 794px;
	text-align: left;
	background-color: #EEEEEE;
	overflow: hidden;
	float: left;
	padding: 0px; 
	margin: 0px;
	border: 0px;
}




/* For the right hand column */
#adright {width: 170px;
	overflow: hidden;
	padding: 0px; 
	padding-right: 1px;
	margin: 0px;
	margin-top: 10px;
	border: 1px solid #FFFFFF;
	float: right;
	clear: right;
	background-color: #FFFFFF;
}

/* I put in some google adsense ads. The code for those divisions are as follows.*/
#adsense {width: 160px;
	overflow: hidden;
border: 1px solid #cccccc;
padding: 4px;
margin: 0px;
margin-bottom: 4px;
	float: right;
	background-color: #2F4F4F;

}

/* Various footer divisions. The first is for the images; the second, for the text rows; the third, the copywrite */
#footer {width: 798px;
	background-color: #FFFFFF;
	overflow: hidden;
	padding: 0px; 
	padding-top: 20px;
	margin: 5px;
	border: 0px;
	float: left;
}

#footer_text {width: 790px;
	background-color: #FFFFFF;
	overflow: hidden;
	padding: 5px; 
	padding-bottom: 0px;
	margin: 5px;
	margin-bottom: 0px;
	border: 0px;
	float:left;
}

#footer_text_copywrite {width: 790px;
	background-color: #FFFFFF;
	overflow: hidden;
	padding: 5px; 
	padding-top: 0px;
	margin: 5px;
	margin-top: 0px;
	border: 0px;
	float:left;
}


/* The following divisions are used along with the appropriate img src style (further up in this style sheet). They are used to present
images with captions.*/

#captionright
{font:  75% arial;
color:  #000000;
padding: 3px;
margin: 5px;
margin-left: 10px;
line-height: 100%;
text-align: left;
width: 291px;
float: right;
border: 1px solid #cccccc;
background-color: inherit;
}

#captionrightindex
{font:  75% arial;
color:  #000000;
padding: 3px;
margin: 5px;
margin-right: 0px;
margin-left: 10px;
line-height: 100%;
text-align: left;
width: 286px;
float: right;
border: 1px solid #cccccc;
background-color: inherit;
}

#captionleft
{font:  75% arial;
color:  #000000;
padding: 3px;
margin: 5px;
margin-right: 10px;
line-height: 100%;
text-align: left;
width: 300px;
float: left;
border: 1px solid #cccccc;
background-color: inherit;
}

#captionmiddle
{font:  75% arial;
color:  #000000;
padding: 3px;
margin: 5px;
margin-left: 0px;
line-height: 100%;
text-align: left;
width: 590px;
float: left;
border: 1px solid #cccccc;
background-color: inherit;
}



/*------------LINK STYLES---------------*/

A:link {text-decoration: none;  font-weight: bold; color: #000000; }
A:visited {text-decoration: none;  font-weight: bold;  color: #333333;}
A:hover {text-decoration: none; 
	color:#333333; 
	border: 0px;
	border-top: 1px; 
	border-bottom: 1px; 
	border-color: #cccc99; 
	border-style: solid;
	background-color: #EEEEEE;
	padding: 0px;}
A:active {text-decoration: none;   font-weight: bold;  color:#333333;} 

/* For the navigational menu at the top right of the pages */
A.nav:link {text-decoration:none;   color: #663300;}
A.nav:visited {text-decoration:none;   color: #663300;}
A.nav:hover {text-decoration: none;   
	color:#999966; 
	border: 0px;
	border-top: 1px; 
	border-bottom: 1px; 
	border-style: solid;
	border-color: #cccc99; 
	background-color: #FFFFFF;
	padding: 0px;}
A.nav:active {text-decoration:none;    color:#999966;} 

/* For links that are on advertisements or any image */
A.ad:link {text-decoration:none;   font-weight: normal; }
A.ad:visited {text-decoration:none;  font-weight: normal; }
A.ad:hover {text-decoration: none;   font-weight: normal; 
	color:#000000; 
	border: 0px; 
	border-style: solid;
	border-color: #cccc99; 
	background-color: white;
	padding-left: 0px; padding-right: 0px;}
A.ad:active {text-decoration:none; color:#999966;   font-weight: normal; } 


/* The style below ("archves") is used for listings on the archives.htm and links.htm only */
A.archives:link {text-decoration:none;   font-weight: normal; color: #000000;}
A.archives:visited {text-decoration:none; font-weight: normal;  color: #663300;}
A.archives:hover {text-decoration: none;   
	font-weight: normal;
	color:#663300; 
	border: 0px;
	border-top: 1px; 
	border-bottom: 1px; 
	border-style: solid;
	border-color: #cccc99; 
	background-color: #EEEEEE;
	padding: 0px;}
A.archives:active {text-decoration:none;  font-weight: normal; background-color: #EEEEEE; color:#999966;}