/*
The class selector (eg .container or div.container) is used to apply different styles to the same element.  Omitting the tag means that the class can apply to all HTML elements.

The id selector (eg #blue or p#blue) is used to apply the same style to different elements.  Omitting the tag means that the id can apply to all HTML elements.

Default positioning is static - elements appear according to their order in the html.

Margin surrounds the border.  Border surrounds the padding.  Padding surrounds the element.
*/


/*PARAGRAPH STYLES*/

body { 	
	color: #000000; 
	font-family: garamond;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	letter-spacing: 1px;
	line-height: 20px;
	margin: 0px;
	padding: 0px;
	background-color: #f5f5f5;
	} 
h1 {
	color: #c0b0b0;
	font-size: 25px;
	letter-spacing: 20px;
	line-height: 40px;
	margin: 20px;
	padding: 0px;
	text-align: center;
	}
h2 {
	font-size: 25px;
	text-align: left;
	letter-spacing: 10px;
	line-height: 30px;
	margin: 10px 0px;
	padding: 0px;
	}
h3 {
	font-size: 14px;
	text-align: left;
	letter-spacing: 5px;
	margin: 5px 0px;
	padding: 0px;
	}
h4 {
	font-size: 12px;
	text-align: left;
	letter-spacing: 4px;
	margin: 5px 0px;
	padding: 0px;
	}
p { 
	text-align: justify;
	}
a { 
	color: #800000;
	font-weight: bold; 
	text-decoration: none;
	} 
a:link {
	color: #800000;
	} 
a:visited {
	color: #600000; 
	} 
a:hover {
	color: #a00000;
	text-decoration: underline;
	} 
a:active {
	color: #a00000;
	}


/*CLASS selectors*/

.nav {
	color: #800000;
	font-size: 12px;
	line-height:20px;
	letter-spacing: 5px;
	text-align: center;
	vertical-align: center;
	}
.quote	{
	font-size: 20px;
	font-style: italic;
	line-height: 30px;
	color: #000000;
	}
.center {
	text-align: center;
	}
.right {
	text-align: right;
	}
.grey	{
	background-color: #c0b0b0;
	}
	
.red	{
	color: #800000;
	}
.image	{
	max-width: 550px;
	border: none;
	}
.image-right	{
	max-width: 550px;
	float: right;
	margin: 10px 30px 0px 10px;
	border: none;
	}
.image-left	{
	max-width: 550px;
	float: left;
	margin: 0px 10px 0px 0px;
	border: none;
	}
.link	{
	letter-spacing: 5px;
	line-height: 20px;
	}
.disc	{
	list-style-type: disc;
	text-align: left;
	}


/*ID selectors*/

#container
	{
	position: relative;
	width: 800px;
	height: 600px;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	text-align: center;
	overflow: hidden;
	}
#header {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 80px;
	padding: 1px;
	text-align: center;
	background-color: #800000;
	}
#footer {
	color: #800000;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 20px;
	padding: 1px;
	font-size: 10px;
	letter-spacing: 1px;
	background-color: #c0b0b0;
	}
#nav {
	position: absolute;
	top: 85px;
	left: 0px;
	width: 100%;
	height: 40px;
	padding: 1px;
	letter-spacing: 5px;
	line-height: 40px;
	text-align: left;
	background-color: #c0b0b0;
	}
#main { 
	position: absolute;
	top: 130px;
	left: 0px;
	width: 97%;
	height: 420px;
	padding: 10px;
	text-align: justified;
	overflow: auto;
	}
#table1 {
	width: 100%;
	border-spacing: 0px;
	font-size: 14px;
	letter-spacing: 0px;
	line-height: 20px;
	text-align: left;
	}
#table1 th {
	text-align: left;
	padding-left: 10px;
	vertical-align: top;
	color: #000000;
	background-color: #c0b0b0;
	}
#table1 td {
	padding-left: 10px;
	vertical-align: top;
	}