body{
/* The page background, font, font size and color. */
background:#CCC;
/*background-position: top;*/
font-family:Calibri, Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#000000;
/* These are the values around the HTML code, so setting it on 0px will leaves us with no padding around the design, rendering the page at the absolute top. */
margin:0px 0px 0px 0px;
padding:0px;
}
/* Our wrapper, which contains our 1px stretching background image (main_bg.jpg). */
#wrapper{
/*background:url("../images/default_background.gif");*/
/*background-image: url(../images/left-right-border-background.gif);*/
width:998px;
/* The following values will place this div in the middle, and since we put every div inside the wrapper it will render the whole page in the middle of the page.*/
margin:0px auto;
padding-left:0px;
}
/* The header image, with a left float, kinda easy and not much to explain =). */
#header{
width:998px;
height:197px;
float:left;
}

/* top menu background*/
#top_menu{
width:998px;
padding-top:5px;
height: 37px;
float:left;
background-color:#F00;
text-align: left;
font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #FFFFFF;
font-weight:bold;
}


#flash-container{
height: 208px;
width:998px;
float:left;
padding-left: 8px;
}

/* Same as the left container but then a different width which I took from the c_top.jpg image. Float:left to align it to the left, and since the left container didn't fill the whole 960px of the wrapper layer it will join sides with the left container. */
#content_container{
background:#FFF;
width:998px;
float:left;
}

/* The rest is self explanatory */
#content_top_bar{
width:1006px;
height:25px;
float:left;
}

/* The left container which will contain our whole left menu, it functions sort of like our wrapper layer. we position the container on the left side, give it a width of the total width we need. I'd measured the width of the lm_top.jpg, this image will be our total width. and we give it a float:left to align the div on the left. */
#main_container{
width:1008px;
float:left;
background-image: url(../images/main-background.jpg);
background-repeat: repeat-y;
background-position: center;
padding-top:10px;

}


#top_text_container{
	width:941px;
	float:left;
	background-image: url(../images/top-text-container.gif);
	background-repeat:  no-repeat;
	height: 18px;
}
#text_container{
	width:941px;
	float:left;
	background-image: url(../images/text-container.gif);
	background-repeat: repeat-y;
}
#bottom_text_container{
	width:941px;
	float:left;
	background-image: url(../images/bottom-text-container.gif);
	background-repeat:  no-repeat;
	height: 17px;
}

/* The left container which will contain our whole left menu, it functions sort of like our wrapper layer. we position the container on the left side, give it a width of the total width we need. I'd measured the width of the lm_top.jpg, this image will be our total width. and we give it a float:left to align the div on the left. */
#left_container{
	width:270px;
	float:left;
	padding-left: 20px;
}
#right_container{
width:610px;
float:left;
padding-top:15px;
padding-left:10px;
}

#bottom-links{
	width:710px;
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000033;
	text-align: center;
	padding-top: 30px;
	letter-spacing: .1em;
	padding-left:30px;
	padding-bottom: 30px;
}
.misc_container{
float: left;
}

/* Our footer has the clear:both value, we could use clear:left since we only use left floats. But I allways use clear:both for this is the most effective way of clearing floats. */ 
#footer{
	background-color:#990000;
	clear:both;
	width:960px;
	color:#FFF;
	height:150px;
	padding-top: 20px;
	padding-right: 12px;
	padding-bottom: 0px;
	padding-left: 20px;
	text-align:justify;

}

#contact_us_container{
	width:218px;
	float:left;
	padding-left: 10px;
	
}

fieldset
{
	border: 0px solid #990000;
	width: 500px;
	padding-left: 5px;
	padding-right: 14px;
	background-color: #f5f5dc;
	background-image: url(../images/contact-us-header.gif);
	background-repeat: no-repeat;
	
}
label
{
width: 250px;
float: left;
text-align: left;
margin-right: 0.5em;
margin-left: 2em;
display: block;
FONT-SIZE: 12px;
COLOR: #990000;
FONT-FAMILY: Verdana, Helvetica, Sans-Serif;
}
.label
{
width: 150px;
float: left;
text-align: left;
margin-right: 0.5em;
margin-left: 2em;
display: block;
FONT-SIZE: 12px;
COLOR: #990000;
FONT-FAMILY: Verdana, Helvetica, Sans-Serif;
}
.input
{
	PADDING-RIGHT: 1px;
	PADDING-LEFT: 1px;
	FONT-SIZE: 11px;
	BACKGROUND: #ffffff;
	MARGIN-BOTTOM: 2px;
	PADDING-BOTTOM: 1px;
	COLOR: #990000;
	PADDING-TOP: 1px;
	FONT-FAMILY: Verdana, Helvetica, Sans-Serif;
	border: 1px solid #000033;
}
textarea
{
	PADDING-RIGHT: 1px;
	PADDING-LEFT: 1px;
	FONT-SIZE: 11px;
	BACKGROUND: #ffffff;
	MARGIN-BOTTOM: 2px;
	PADDING-BOTTOM: 1px;
	COLOR: #990000;
	PADDING-TOP: 1px;
	FONT-FAMILY: Verdana, Helvetica, Sans-Serif;
	border: 1px solid #000033;
}

#spacer{
height:10px;
}
.main-header-text {
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #90ee90;

}

.main-header-text2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #6d653e;
	text-align: justify;
	letter-spacing: .1em;
}
.main-header-text3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #003300;
	text-align: justify;
	letter-spacing: .1em;
}
.body-text{
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #000000;
	text-align: justify;
	
/*	letter-spacing: .1em;*/
}
.body-text-white{
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	text-align: justify;
	
/*	letter-spacing: .1em;*/
}
.footer-link {
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FF0000;
	text-decoration: none;
}
.footer-link:hover {
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #003300;
	text-decoration: none;
}

.footer-link2 {
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FF0000;
	text-decoration: none;
}
.footer-link2:hover {
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000033;
	text-decoration: none;
}

.top-menu-link {
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FFFFFF;
	text-decoration: none;
}
.top-menu-link:hover {
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FFFF00;
	text-decoration: none;
}
.footer-text {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #003300;

}
.footer-text2 {
	font-family: Calibri;
	font-size: 18px;
	color: #003300;
	letter-spacing: .1em;
}

.link
{
	font-family: Calibri;
	font-size: 17px;
	color: #000000;
	text-align: justify;
	text-decoration: none;
	font-weight: bold;

}
.link:hover
{
	font-family: Calibri;
	font-size: 17px;
	color: #FFFF00;
	text-align: justify;
	text-decoration: none;
	font-weight: bold;

}

.link2
{
	font-family: Calibri;
	font-size: 14px;
	color: #003300;
	text-decoration: none;

}
.link2:hover
{
	font-family: Calibri;
	font-size: 14px;
	color: #990000;
	text-decoration: none;

}
.li {
	list-style-image: url(../images/vertical-menu/heritage-antiques_07.gif);
	list-style-type: none;
	height: 19px;
	width: 150px;
	text-indent: 10pt;
}
h1 {
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
	font-size: 26px;
	font-weight: bold;
	color: #990000;
	text-align: left;

}
h3 {
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
	font-size: 26px;
	font-weight: bold;
	color: #990000;
	text-align: left;

}
hr{
color: #000033;
width:856px;
}
.pic-border {
border: thin solid #FFFFFF; }
.red-text {
	color:#F00;
	}
	.yellow-text {
	color:#FF0;
	}