/*
Basic elements, such as the general body of the page and also the way that links are handled.
*/

body 
{

	margin: 0px;
	padding: 0px;
}

p 
{
	border-width: 0px;
	text-indent: 0px;
	margin: 0px;
}

p1 
{
	border-width: 0px;
	text-indent: 20px;
}


a img 
{
	border: none; 
} 



/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */
/* 0000000000000000000000000000000000  New Section  000000000000000000000000000000000000000000000 */
/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */



/* these control the way links operate and look */

a:link 
{
	color: black;
	text-decoration: none;
	font-style: none;
}

a:visited 
{ 
	font-style: none;
	color: black;
	text-decoration: none;
}

a:active 
{
	color: black;
	text-decoration: none;
	font-style: none;
} 

a:hover 
{	
	font-style: bold;
	color: gray;
}


/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */
/* 0000000000000000000000000000000000  New Section  000000000000000000000000000000000000000000000 */
/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */


h1

/* for headline */
{
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	margin: 0px;
	padding: 0px;
	font-weight: bold;
}


h2

/* for more info on show*/
{
	color: black;
	font-family: "Arial Narrow", sans-serif;
	font-size: 14px;
	font-style: normal;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
	text-indent: 0px;
}

h3

/* info on the current exhibit- mostly for home page */
{
	color: #777777;
	font-family: "Arial Narrow";
	font-size: medium;
	border: 0px solid;
	position: absolute;
	left: 225px;
	top: 625px;
	text-align: left;
	padding: 0px;
	z-index: 1;
	font-style: normal;
	font-weight: normal;
	margin: 0px;
}

h4

/* art descriptions */
{
	color: black;
	font-family: Arial,Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	margin: 0px;
}

h5

/* show descriptions */
{
	color: #666666;
	font-family: "Arial Narrow";
	font-size: medium;
	margin: 0px;
}

h6

/* show titles */
{
	color: #666666;
	font-family: "Arial";
	font-size: x-large;
	font-style: normal;
	font-weight: normal;
	margin: 0px;
}


/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */
/* 0000000000000000000000000000000000  New Section  000000000000000000000000000000000000000000000 */
/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */


/*
These are all the IDs for the document.  Primarily for the items affected by javascript
*/

.logo
{
	border: 0px solid;
	font-family: Arial, Helvetica, sans-serif;
	color: black;
	line-height: 15px;
	font-size: 22px;
	font-weight: normal;
}


#headlineBox

/* The principal box for Main News */
{
	position: absolute;
	left:0px;
	top:72px;
	height: 85px;
	width: 300px;
	border-width: 0px;
	margin: 0px;
	padding: 15px 0px 0px 30px;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
}

#navBox

/* The principal box for extra navigation links */
{
	position: absolute;
	left: 305px;
	top: 100px;
	height: 85px;
	width: 700px;
	border-width: 0px;
	margin: 0px;
	padding: 5px 0px 0px 15px;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
}




#slideInfo

/* the smaller text box, for secondary text and portrait images */
{
	
	border-width: 0px;
	padding: 10px;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
}

/* these are for options that allow the user to swap through data, 
I can use the javascript to alternately hide or reveal the layers */


#mainImage

/* div that hold the main image for slideshows */
{
	position: absolute;
	left: 300px;
	top: 185px;
	width: 590px;
	height: 600px;
	border-width: 0px;
	margin: 0px 25px 0px 25px;
	padding: 0px;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	word-spacing: 1px;
	line-height: 16px;
}

.mainImage

/* div that hold the main image for slideshows */
{
	position: absolute;
	left: 300px;
	top: 185px;
	width: 590px;
	height: 600px;
	border-width: 0px;
	margin: 25px 25px 0px 25px;
	padding: 0px;
	color: #333333;
	text-indent: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	word-spacing: 1px;
	line-height: 16px;
}



#secondText

/* the smaller text box, for secondary text and portrait images */
{
	position: absolute;
	left: 0px;
	top: 185px;
	height: 600px;
	width: 275px;
	border-width: 0px;
	padding: 20px 0px 0px 20px;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	word-spacing: 1px;
	line-height: 16px;
}

.secondText

/* the smaller text box, for secondary text and portrait images */
{
	position: absolute;
	left: 0px;
	top: 185px;
	height: 600px;
	width: 275px;
	border-width: 0px;
	padding: 20px 0px 0px 20px;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	word-spacing: 1px;
	line-height: 16px;
}



/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */
/* 0000000000000000000000000000000000  New Section  000000000000000000000000000000000000000000000 */
/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */


/* These are the navigation/link boxes at the top of the screen */

#data1
{
	border: 0px solid;
	height: 125px;
	width: 250px;
	position: absolute;
	left: 0px;
	top: 0px;
	padding: 15px;
	font-family: Arial, Helvetica, sans-serif;
	color: black;
	line-height: 15px;
	font-size: 14px;
}

#data2
{
	border: 0px solid;
	height: 125px;
	width: 100px;
	position: absolute;
	left: 325px;
	top: 32px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	color: black;
	line-height: 14px;
	font-size: 11px;
}

#data3
{
	border: 0px solid;
	height: 125px;
	width: 100px;
	position: absolute;
	left: 425px;
	top: 32px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	color: black;
	line-height: 14px;
	font-size: 11px;
}

#data4
{
	border: 0px solid;
	height: 125px;
	width: 100px;
	position: absolute;
	left: 525px;
	top: 32px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;	
	color: black;
	line-height: 14px;
	font-size: 11px;
}

#data5
{
	border: 0px solid;
	height: 125px;
	width: 100px;
	position: absolute;
	left: 625px;
	top: 32px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;	
	color: black;
	line-height: 14px;
	font-size: 11px;
}

#data6
{
	border: 0px solid;
	height: 125px;
	width: 100px;
	position: absolute;
	left: 725px;
	top: 32px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;	
	color: black;
	line-height: 14px;
	font-size: 11px;
}


#links
{
	border: 0px solid;
	height: 125px;
	width: 100px;
	position: absolute;
	left: 725px;
	top: 32px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;	
	color: black;
	line-height: 14px;
	font-size: 11px;
	background-image: "data/whiteBackdrop.jpg";
	z-index: 15;
}

#backdrop
{
	
	z-index: 10;
	position: absolute;
	left: 725px;
	top: 32px;

}

#data7
{
	border: 0px solid;
	height: 125px;
	width: 125px;
	position: absolute;
	left: 750px;
	top: 10px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	color: black;	
	line-height: 18px;
	font-size: 14px;
}

#data8
{
	border: 0px solid;
	height: 125px;
	width: 125px;
	position: absolute;
	left: 825px;
	top: 0px;
	padding: 15px;
	font-family: Arial, Helvetica, sans-serif;
	color: black;	
	line-height: 18px;
	font-size: 14px;
}



/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */
/* 0000000000000000000000000000000000  New Section  000000000000000000000000000000000000000000000 */
/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */



/*  These are the image classes.  Mostly these are good for making sure that images 
are the correct size and that they don't accquire outlines or borders when acting as links.  
I am also using the image class to position them, instead of nesting them in a div, 
not sure if that is ideal or not.  The thumb class I don't use right now because 
for some reason if the thumbnail images are designated as a class they refuse to 
scroll horizontally and wrap at the end of the div, so that you have to scroll vertically.  */

img.main

{
	position:absolute;
	left:75px;
	top:200px;
	height: 395px;
	width: 540px;
	border-width: 0px;
	z-index: 1;
}

img.thumb

{
	height: 98px;
	width: 132px;
	border-width: 1px;
	z-index: 2;
}

img.vthumb

{
	height: 98px;
	width: 80px;
	border-width: 1px;
	z-index: 2;
}


/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */
/* 0000000000000000000000000000000000  New Section  000000000000000000000000000000000000000000000 */
/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */



/* this area is for table formatting */

/* this is a table specific class for the lists of artists names */

table.names
{
	table-layout: fixed;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-style: bold;
	width: 200px;
	border: none;
	border-width: 0px;
	text-indent: 0px;
	line-height: 240%;
	
}

/* this is for the links in the navBar ID box */

table.navigation
{
	table-layout: fixed;
	font-family: Arial, Helvetica, sans-serif;
	border: none;
	height: 125;
	width: 540px;
	border-width: 0px;
	text-indent: 0px;
	z-index: 10;
	font-size: 12px;
	overflow: visible;
}


/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */
/* 0000000000000000000000000000000000  New Section  000000000000000000000000000000000000000000000 */
/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */


/* miscellaneous stuff */

.outline1

{
	padding: 0px;
	font-size: 12px;
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.outline2

{
	padding: 0px;
	font-size: 12px;
	margin: 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
}

.outline3

{
	padding: 0px;
	font-size: 10px;
	margin: 5px;
	font-family: Arial, Helvetica, sans-serif;
}

.outline4

{
	padding: 0px;
	font-size: 10px;
	margin: 15px;
	font-family: Arial, Helvetica, sans-serif;
}

.interview1

{
	padding: 15 0 15 0;
	font-size: 12px;
	margin: 0px,0px,0px,0px;
	color: #696969;
	width: 500px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 15px,0px,15px,0px;
	
}

.interview2

{
	padding: 0px;
	font-size: 12px;
	margin: 0px,0px,0px,0px;
	color: black;
	width: 500px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 15px,0px,15px,0px;
}