body	{background:#C2C2C2;
	font-family: "Trebuchet MS", serif;
	color:#000000;} 

/* sets the background color, text color, and font to the entire page*/



div.name h1	{font-weight:bolder;
		letter-spacing:0.4em;
		text-align: center;} 

/*sets h1 in the class 'name' so the text is centered, the letters father apart, and bolder */




div.nav		{position:fixed;
		top: 100px;
		left:0px;
		width: 150px;
		height: auto;
		border-right: 2px dashed black;
		border-bottom: 2px dashed black;
		padding:10px;
		margin:10px;
		z-index: 2;
		text-align:center;}

div.nav a		{text-decoration:none;}
div.nav a:link	{color:#000000;}
div.nav a:visited	{color:#000000;}
div.nav a:focus	{color:#000000;}
div.nav a:hover	{color:#000000;}
div.nav a:active	{color:#000000;}


 /*affixes the navigation area to the browser near the upper left, also sets the width of the area to 25% of the browser width.  places it above the background text and encloses in a dashed border */




#current	{border-style:solid;
		border-width:1px;
		border-color:#898989;
		background-color:#F5A0BD;
		margin:3px;
		width:150px;}



#past		{border-style:solid;
		border-width:1px;
		border-color:#898989;
		background-color:#9781B7;
		margin:3px;
		width:150px;}


#about		{border-style:solid;
		border-width:1px;
		border-color:#898989;
		background-color:#8DCFF4;
		margin:3px;
		width:150px;}


#questions	{border-style:solid;
		border-width:1px;
		border-color:#898989;
		background-color:#89CA9D;
		margin:3px;
		width:150px;}


#home		{border-style:solid;
		border-width:1px;
		border-color:#898989;
		background-color:#C2C2C2;
		margin:3px;
		width:150px;}


div.content	{position:absolute;
		top: 100px;
		left: 25%;
		width: 50%;
		height: auto;
		padding:0 0 40%;
		margin:10px;
		z-index: 2;
		text-align:justify;}

div.content p	{font-size:14px;}

/*places the 'content' panel in the middle of the screen and places it above the background text so it is readable*/






div.cal		{position:absolute;
		top: 100px;
		left: 80%;
		width: 15%;
		height: auto;
		border-left: 2px dashed black;
		padding:10px;
		margin:10px;
		z-index: 2;
		text-align:left;}

#grandOpening	{border-width: 1px 1px 1px 0px;
		border-style: solid;
		border-color:black;}

#reception	{border-width: 1px 1px 1px 0px;
		border-style: solid;
		border-color:black;}


div.cal h2	{font-size:18px;
		position:relative;
		right:5px;}
div.cal h3	{font-size:14px;
		position:relative;
		right:5px;}
div.cal p	{font-size:12px;}

/*places the 'calendar' section on the far right, lets it scroll with the page, gives it a dashed border on the left and places it above the background text*/


div.pops		{display: none;
		width: auto;
		height: auto;
		background-color: #ED717A;
		border-width: 1px 0px 1px 1px;
		border-style: solid;
		border-color: black;
		padding:10px;
		z-index: 2;
		text-align:left;}

div.pops p	{font-size:12px;}

/*sets the style and font size of the hidden divs, each div displays one at a time via the onMouseMove event */

#grandOpeningPopup 	{position:relative;
			display:none;}

#receptionPopup 		{position:relative;
			display:none;}

/* sets the placement of the specific divs within the pops class, they initially don't display, so the user must mouseover the calendar entry to see the additional info within.  since only one div can display at a time, having multiple divs in the same location on the page is not a problem, and actually helps keep the page clean looking */



div.bgtext	{position:fixed;
		top:100px;
		left:25%;
		z-index: 0;} 

/*affixes the bgtext to the browser.  this is going to subtly show in the background as a motif. */




div.bgtext p	{letter-spacing:0.4em;
		font-size:48px;
		color:#CCC;
		display:block;} 

/*sets the p elements in the class 'bgtext' to indent 100 pixels, the font size to 48 px, and the color to a light grey */




div.bgtext p:first-letter	{color:#B0B3AD;
				text-transform:capitalize;}


/*sets the first letter of the p elements within the 'bgtext' class to a slightly darker grey than the other letters, and capitalizes them */





div.info	{background-color:#C2C2C2;
		position:fixed;
		bottom: 0px;
		width: 100%;
		height: 25px;
		border-top: 1px solid #898989;
		padding:10px;
		margin-top:30%;
		margin-bottom:0px;
		z-index: 3;
		text-align:center;
		display:block;}

div.info p	{font-size:12px;}

/* sets the size and placement of the basic museum info along the bottom of the page*/


#location	{background-color:#C2C2C2;
		position:absolute;
		left:1%;
		width:33%;
		height:auto;
		margin:0 0 10px;
		padding:5px 3% 20px;
		display:inline;
		vertical-align:middle;}

/*more detailed placement info about the address of the museum*/

#email		{background-color:#C2C2C2;
		position:absolute;
		left:34%;
		width:33%;
		height:auto;
		margin:0px;
		padding:auto 5% 5%;
		display:inline;
		vertical-align:middle;}

/*detailed placement info about the hours of the museum*/



#phone		{background-color:#C2C2C2;
		position:absolute;
		left:64%;
		width:33%;
		height:auto;
		margin:0 0 10px;
		padding:5px 3% 20px;
		display:inline;
		vertical-align:middle;}

/*detailed placement info of the phone number of the museum*/