/**
	Author: Justin Holton
	E-mail: justin_holton@gmail.com
	Version: 1.0
	Date: May 10th, 2005

	Note: Do not edit this unless you understand basic CSS (Cascading Style Sheet)
	 tags. Just google "CSS tutorials" if you want to learn how to use them. W3C 
	 Schools has some good tutorials, or purchase a book. 
	 
	 If you get confused as to what a tag does, just copy-and-paste..
	 
		border: solid 1px #000;
		
	 ..into the CSS tag in question, then refresh your web-browser. Be sure to remove
	 it after you're done editing.
	 
	 To observe the power and flexibility of CSS-based design, be sure to check out 
	 http://www.csszengarden.com
	 
	 I've commented the tags which I thought might confuse you.
 
*/

acronym {
	border-bottom: dashed #000 1px;
	cursor: help;
}

body {
	background: #fff url(../img/wall.gif) repeat-x left top;	/* background color is white, use wall.gif for background image, but only repeat image horizontally, and start image in the top left corner */
	padding: 0px;
	margin: 0px;
}

p { margin-top: 0px; }	/* Firefox and Internet Explorer's default values for margin-top are different, this tag makes sure our webpage displays the same in both. */

/* hide h3 headers that are part of hide class */
h3.hideMe {
	margin: 0px;
	visibility: hidden;
}

#container {
	background: url(../img/infoshadow.jpg) no-repeat;		/* Graphic contains subway sign and shadow effect for "Information" menu. Open infoshadow.pds in photoshop to edit. */
	width: 775px;									/* site designed for 800x600 or larger */
	float: right;									/* design is aligned to right side of screen */
	margin: 0px 0px 0px auto;
	text-align: left;
}

/* contains flash animation and main content of webpage */
/* move flash animation to right side of screen */
#flash { 
	text-align: right; 
	width: 100%;
}

#mainArea {
	width: 573px;	/* note width is same size as flash animation */
	float: right;	/* align to the right */
	text-align: left;
}

/*****************************************************
        Note that "menu" displays a 3D graphic,
		while "info" places the links on the FRONT
		side of that graphic.
 *****************************************************/
#menu {
	background: url(../img/menu.gif) no-repeat;
	color: #fff;								/* text color is white */
	height: 454px;
	width: 199px;
	float: left;
	position: relative;
	top: 260px;
	padding-top: 60px;		/* so that text doesn't sit over "Information" graphic */
}


/*****************************************************
         "Information" Navigation Menu
 *****************************************************/

#info {
	margin-left: 4px;
	width: 164px;
}

/* only affects UL tags inside <div id="info"> */
#info ul {
	list-style-type: none;	/* remove bullets */
	padding: 0;
	margin: 0px;	/* corrects a minor difference between mozilla and internet explorer browsers */
	font: normal 14px "trebuchet ms",sans-serif;
	font-weight: bold;
}

#info li {
	padding-left: 10px;
	padding-top:3px;
	padding-bottom:3px;
	border-bottom:1px solid #6F2329;
	border-left:6px solid #6F2329;
}

/* IE 6.0 or lower does not support this CSS 2.0 feature. However, most other browsers do. */
#info li:hover {
	border-left:6px solid #5EC6C6;
	background:#1C5959;
}

/* Main links */
#info ul li a {
	color: #fff;
	display: block;
	margin-right: 10px;
	margin-left: 0px;
	text-decoration: none;
}

/* when hovering over a link underline it */
#info ul li a:hover { text-decoration: underline; }


/* Affects individual articles in menu ONLY */
#info li ul li { border: 0px; } 		/* remove inherited borders */
#info li ul li:hover { border: 0px; } 	/* remove inherited borders */
#info li ul li a { font-size: 10px; }	/* text is smaller */


/************************************************************
    Main text of html file is located in <div id="content">
 ***********************************************************/

#content {
	padding: 30px 7px 7px;	/* keeps text in from being too far left or right */
	font-size: 13px;
	height: 420px;			/* height so that shadow of marquee appears */
}

#content a {
	color: #660808;		/* color of links changed from blue to maroon */
}

#content h3 { color: #420808;}

#content p {
	margin-left: 30px;		/* only affects P tags within the DIV whose id="content" */
	margin-right: 10px;
}

/* only affects P tags that are part of validation class */
#content p.validation {
	font-size: 75%;
	text-align: center;
}