/* @group GENERAL SETUP */

/* Remove padding and margin */

* {
	margin: 0;
	padding: 0;
}

/* Put it back on certain elements */

pre, blockquote, form, fieldset, table, ul {
	

/* others could include: h1, h2, h3, h4, h5, h6, p */
	margin: 1em 0;
}

/* set the default font size and family */

body {
	font: 63.13%/1.6em "Lucida Grande", "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
	/* the following centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	text-align: center;
	color: #000000;
	background: #e6e6df url(../images/template/background.jpg) repeat scroll;
}

/* Class for clearing floats */

.clear {
	clear: both;
}

/* @end */

/* @group TEMPLATE */

/* Tips for Elastic layouts 
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/

#container {
	width: 720px;
	margin: 0 auto;
	text-align: left;
}

#header {
	padding: 0;
	width: 720px;
	height: 85px;
	margin: 0;
	background: url(../images/template/body-top.png) no-repeat scroll 0 0;
}

#navigation {
	margin-top: 25px;
	margin-left: 70px;
	float: left;
	display: block;
}

#main_body {
	background: url(../images/template/body-middle.png) repeat-y scroll 0 0;
	width: 720px;
}

#content {
	width: 620px;
	margin-left: 50px;
}

#footer {
	width: 720px;
	background: url(../images/template/body-bottom.png) no-repeat scroll 0 0;
	min-height: 242px;
}

#footer p {
	margin: 0;
	padding: 250px 0 10px;
	text-align: center;
}


/* @end */

/* @group TYPOGRAPHY */

h1, h2 {
	margin: 0 0 15px 0;
	font-size: 1.8em;
	font-weight: normal;
	line-height: normal;
	color: #4169e1;
}

h2:first-child {
	padding-top: 1em;
}

h3 {
	clear: both;
	margin: 0 0 15px 0;
	font-size: 1.4em;
	line-height: 1.5em;
	font-weight: bold;
}

h4, h5, h6 {
	margin: 15px 0 3px 0;
	font-size: 1.2em;
	font-weight: bold;
}

p {
	margin: 0 0 15px 0;
	font-size: 1.1em;
}

p.price {
	font: bold 12px "Lucida Grande", Lucida, Verdana, sans-serif !important;
}

p.footnote {
	font: 10px "Lucida Grande", Lucida, Verdana, sans-serif !important;
}

blockquote {
	margin: 0 30px;
}

/* captions */

.caption {
	font-size: 1.1em;
	line-height: 1.5em;
	color: #666;
}

/* 
	Lists 
	-------------------------
	Unordered lists (ul) represent a sequence of items in no particular
	order. They are displayed with a square bullet to the left of each 
	list item (li).
	
	Ordered lists (ol) represent an ordered sequence of items. They are 
	displayed with a number to the left of each list item (li).
	
	Definition lists (dl) represent a set of terms (dt) and definitions (dd).
	Each term should be followed by one or more definitions. Definition lists
	are very useful for marking up a series of links, each of which has an
	explanatory passage of text.
*/

ul, ol {
	margin: 0 0 15px 30px;
	padding: 0;
	font-size: 11px;
	line-height: 13px;
}

ul li {
	margin-bottom: 5px;
}

ol li {
	margin-bottom: 5px;
}

ol li > ol li {
}

/* 
	Links 
	-------------------------
	Links are displayed as dark red text. The underline is replaced by a 
	lighter bottom border. Visited links have less contrast than unvisited 
	links. Both visited and unvisited links turn bright red when moused over,
	and they return to their normal state when selected.
*/

a[href^="http:"] {
	

/* this is to show a graphic when a link is to an external website */
	background: url(../images/externalLink.gif) no-repeat scroll right top;
	padding-right: 10px;
}

a {
	border-bottom: 1px solid #e5cfcf;
	color: #b31b1b;
	text-decoration: none;
}

a:visited {
	color: #b31b1b;
}

a:hover {
	color: #4169e1;
	border-color: #a0b4f0;
}

a:active {
	color: #4169e1;
	border-color: #a0b4f0;
}

/* @end */

/* @group IMAGES */

/*
	The following set of rules controls the appearance of images.
	
	Examples of large photos, small photos, photo captions, and secondary
	photos can all be found in the two-column template. Examples of 
	thumbnails can be found in the hub and photo gallery templates.
*/

img {
	border: 0;
}

/* basic float left or right */

.photo-float-left {
	margin: 5px 25px 15px 0;
	float: left;
}

.photo-float-right {
	margin: 5px 0 15px 25px;
	float: right;
}


/* @end */

/* @group TABLES */

table {
	border-spacing: 0;
	border-collapse: collapse;
}

td {
	text-align: left;
	font-weight: normal;
}

table, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1em;
}

table {
	margin: 15px 0;
	border-bottom: 1px solid #e7e7e7;
	caption-side: bottom;
}

th {
	font-weight: bold;
	background-color: #d7d7ca;
	text-align: left;
	padding-right: 15px;
	padding-left: 15px;
}

td, tbody th {
	padding: 5px 15px;
	border-top: 1px solid #e7e7e7;
	font-size: 1.1em;
	line-height: 1.5em;
	vertical-align: top;
}

tbody th {
	font-weight: bold;
	color: #222;
	text-align: left;
}

.row1, .row1 td, .row1 th {
	background: white;
}

.row2, .row2 td, .row2 th {
	background: #fafaf7;
}

tfoot td {
	font-weight: bold;
}

caption {
	margin: 0 0 15px 0;
	text-align: left;
	color: #888;
	font-size: 1.1em;
}

/* @end */

/* @group FORMS */

/*
	The following rules control the appearance of forms.
	
	Related sections of form inputs should be organized in fieldsets. 
	Each fieldset should contain a series of .form-pair divs. Each
	.form-pair should contain a .form-item div and a .form-value div. The 
	.form-item should contain a <label> for the <input> or <select> 
	found in the .form-value.
	
	For a detailed example of how to mark up a form, see the 
	one-column or two-column template.
*/

form {
	float: left;
	margin: 5px 0 15px;
	padding: 0;
	width: 495px;
}

fieldset {
	background-color: #f5f5f5;
	float: left;
	padding: 10px 0 15px;
	width: 495px;
	margin: 0;
	border: solid 1px white;
}

form h3 {
	margin: 0 15px 5px 15px;
}

.form-pair {
	display: inline;
	

/* prevent ie6/win from doubling margins */
	float: left;
	margin: 5px 15px 0;
	width: 460px;
}

.form-item {
	float: left;
	margin-top: 5px;
	width: 120px;
	font-size: 1.1em;
	line-height: 1.5em;
	text-align: right;
}

.form-value {
	float: right;
	margin-top: 5px;
	width: 330px;
	font-size: 1.1em;
	line-height: 1.5em;
}

.checklist {
	margin: 0;
	font-size: 1em;
}

.checklist li {
	margin: 0 0 5px 0;
	padding: 0;
	background: none;
	font: 1em "Lucida Grande", Lucida, Verdana, sans-serif;
}

.input-text, select, textarea {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 1em;
}

.form-submit {
	border-top: none;
	background: #dbdbd2;
}

.form-submit-buttons {
	text-align: right;
	padding-right: 15px;
}

.form-submit-buttons .input-reset {
	margin-right: 5px;
}

.input-submit, .input-reset {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 1.3em;
}

.input-submit {
	font-weight: bold;
}

.hilight-field {
	background-color: #ff9;
}

/* @end */

/* @group MISCELLANEOUS */

/* 
	This is for the maintenance message that appears
	on top of the page if the site is down under construction
	only Adam will see this, everyone else goes to a temp page
*/

#maintenace-message {
	background-color: #ffff00;
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	padding: 5px 0;
	text-align: center;
	border-bottom: 1px solid #fff;
	font-weight: bold;
}

/* make the HR tag hidden */

hr {
	display: none;
	clear: both;
}

/* the contact us email link on various pages */
p.contactusLink {
	text-align: center;
	font-size: 1.4em;
	margin-top: 4em;
}

p.redtype { 
	color: #cc0000
}

p.testimonials {
	font: italic 1.4em/1.6em Georgia, "Times New Roman", Times, serif;
	margin-right: 2em;
	margin-left: 2em;
	margin-bottom: 2em;
}

/* @end */