/* BODY = refers to the style used in the BODY tag, which surrounds your page.  Thus, these are the general font and background colors for the page. By declaring them here, we don't have to repeat them in the other classes later on -- they'll be inherited.  Or you can override these style options (for example, while the font color here is a light gray (#999999) and the background is black, the sidebar and main content area use black text and a red background instead.  */
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #999999;
	background-color: #000000;
	margin: 0px;
	padding: 0;
	min-width: 650px;
}

/* Universal links.  These represent the style used for most of the links throughout the page, with the exception of the menu.  The a:link, a:visited and a:hover definitions are for universal links throughout the page.  a:link is for your basic links, which are currently white without underlines.   a:visited refers to how the link will look once it's already been clicked on/visited, and currently is set as identical to the regular links.  Finally, a:hover refers to the effects shown when your visitor hovers his/her mouse over the link.  This is set to turn a golden/green color that matches the colors in the top right image (the bridge).  */

a:link { 
     color: #82060D;
     text-decoration: none;
}
a:visited {
     color: #82060D;
	 text-decoration: none;
}
a:hover {
     color: #ffffff ;
	 text-decoration: none;
}

/* MENU:  This class is used for the red-bordered box that holds your top menu.  It also has its own link definitions, which are slightly different from the links on the rest of the page; the default font color is a very light gray instead of white.  The hover color is identical to the hover used on links on rest of the page.  */

.menu {
	border: 1px solid #282828 ;
	background-color: #000000;
	FONT-WEIGHT: bold;
	FONT-SIZE: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.menu a:link {
	COLOR: #82060D;
	text-decoration: none;
}
.menu a:visited {
	COLOR: #82060D;
	text-decoration: none;
}
.menu a:hover {
	COLOR: #ffffff ;
	text-decoration: none;
}



/* SIDEBOX:  The narrow, left-hand column.  This is an ID (as noted by the "#" in the name) and thus can only be used once on a page.  It uses a red background color and black text.  The text is slightly smaller than in the main right-hand column.  There's an option for a thin white border, as you can see; to create the border, change the 0px to a 1px.   I removed the white border because I think the page looks much better without it, but you can return it if you like. */
#sidebox {
	font-size: 13px;
	color: #efd092;
	background-color: #282828    ;
	border: 2px solid #282828 ;
	font-weight: bold;
	padding: 8px;
}

/* MAINBOX:  The wide, right-hand column.  This is an ID (as noted by the "#" in the name) and thus can only be used once on a page.  It's colored red and has a slightly larger font than the sidebox.  As above, I left in the option for a thin white border, as you can see; to create the border, change the 0px to a 1px. */
#mainbox {
	font-size: 13px;
	color: #909090;
	background-color: #000000;
	border: 1px solid #282828 ;
	font-weight: bold;
	padding: 8px;
}

/* BIOBOX:  This is for the popup bios. */

#biobox {
	font-size: 13px;
	color: #ADA96E;
	background-color: #000000;
	border: 0px solid #82060D;
	font-weight: bold;
	padding: 8px;
}

/* HEADING:  This class is to create the larger, light blue text headers, such as "Last Updated" and "Welcome."  The syntax to use is:  <span class="heading">This is a Heading</span> */
.heading {
	font-size: 15px;
	color: #AFC7C7;
	margin-top: 10px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}

/* FOOTER = the red-bordered box with the copyright and disclaimer in it. */
#footer {
	color: #ffffff;
	border: 0px solid #282828 ;
	background-color: #000000;
	FONT-WEIGHT: bold;
	font-size: 11px;
}

/* ************************************************************************************ 
The remaining classes or tags are not being used at the present time.  However, you may find them handy to create special 'effects' around images or text.  See especially .imageborder and .smalltext
 ************************************************************************************* */

/* IMAGEBORDER creates a white border around an image.  Use it as in:  <img src="file.jpg" class="imageborder"> */
.imageborder {	border: 2px solid #FFFFFF;
}

/* SMALLTEXT = an option if you want a section of smaller text.  It will inherit the color from its container.  You can use this class with a table cell (as long as it doesn't already have a class or ID), a paragraph, or a span tag.  For example:  <p class="smalltext">This text is small.</p>  */
.smalltext {
	font-size: 11px;
}



/* h1 through h5 tags can be used as headings at some future time. h1 tags are considered high importance and are treated as significant for search engine rankings.  The higher the number, in general, the smaller/less important the text.  */
h1 {
	font-size: 1.8em;
	margin: 0;
}
h2 {
	font-size: 16px;
	color: #78B6DB;
	margin-top: 10px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
h3 {
	font-size: 1.25em;
	margin: 30px 0 0 0;
}
h4 {
	font-size: 1.1em;
	margin: 20px 0 0 0;
}



/* CLEARFLOAT: a class not currently used on the page, but it could come in handy at a later date.  It's used to make sure any floats are cleared.  You don't have to worry about this for now.  */

.clearfloat {
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
	display: block;
}