/* CSS Document */

/* Baseline Styles */
/* Don't forget to set a foreground and background color on the 'html' or 'body' element! */
/* This block of code sets almost everything to zero so that all browsers start from the same point. Remember when you are coding that all margins and padding are set at zero, and that all fonts are set relative to each browser's "small" setting. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, form, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0; font-weight: inherit; font-style: inherit; line-height: 1.1; font-family: inherit; text-align: left; vertical-align: baseline; text-decoration: none; margin: 0; padding: 0;}
a img, :link img, :visited img {border: 0;}
table {border-collapse: collapse; border-spacing: 0;}
ol, ul, dl {list-style: none;}
form {padding: 0; margin: 0;}
h1, h2, h3, h4 {font-weight: bold;}
h1 {font-size: 150%}
h2 {font-size: 130%}
h3 {font-size: 120%; color: #007a00;}
h4 {font-size: 110%; color: #8F6D47;}
td {vertical-align: top;}
input,select {font-size: 92%;}
input:text {border: 1px solid black;}
input.OrderForm {font-size: 90%; font-weight: bold;}
select.OrderForm {font-size: 90%;}


/* Layout and General Styles */
body {
	text-align: center;
	background-color: white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: small;
}
html>body {font-size: small;} /* Be Nice to Opera - set font size to small */

#container {margin: 3px auto 10px;}
#content {text-align: left;}

#header {background: #66cc66 url(../Images/header_bg.jpg) repeat-x top left; width: 100%; padding: 20px 0 5px; float: left; border-bottom: 1px solid #996666;}
#header h1 {font-size: 22px; padding: 0 0 5px 5px; font-weight: bold; letter-spacing: 1.2px; float: left;}
#header h1 a {color: white;}
#header span {float: right; padding: 8px 10px 5px 0; color: white;}
#header span a {color: white; font-weight: bold; padding: 0 3px;}

#mainContent {width: 798px; border: 1px solid #996666; border-width: 0 1px; clear: both; float: left;}

#leftCol {float: left; width: 535px; padding: 12px 5px 10px 5px;}
#leftCol p {margin: 0 0 0 15px; padding: 5px 10px 5px 0; line-height: 1.25;}
#leftCol p a {font-weight: bold;}
#leftCol img {margin: 19px 0;}
#leftColLeft {float: left; width: 58%;}
#leftColRight {float: right; width: 40%; padding-top: 39px;}
#rightCol {float: right; width: 238px; padding: 10px 5px; margin-top: 14px;}
#rightCol p {margin: 0; padding: 5px;}
.right {text-align: right;}

#testimonials {width: 100%; margin-top: 19px;}
#testimonials ul {padding: 5px 4px; background-color: #eeeeee; border: 1px solid #996666; border-width: 0 1px;}
#testimonials li {padding: 2px 0;}
.testimonial {margin-left: 10px; font-size: 11px; padding: 0;}

#rightColContent {width: 100%; margin-top: 5px;}
#rightColContent ul, #rightColContent p, #rightColContent table {background-color: #eeeeee; border: 1px solid #996666; border-width: 0 1px;}
#rightColContent li {padding: 3px 0 3px 5px;}
.dottedBorder {border: 1px dashed black; border-width: 0 0 1px 0;}

#footer {background: white; width: 100%; margin: 0; padding: 0; height: 10px;}

/* headers */
.headline-Product {font-size: 21px; font-weight: bold;}
.headline-smallProduct {font-size: 18px; font-weight: bold;}
.headline-largest {font-size: 15px; font-weight: bold;}
.headline-larger {font-size: 14px; font-weight: bold;}
.headline-large {font-size: 13px; font-weight: bold;}
.headline-medium {font-size: 12px; font-weight: bold;}
.headline-small {font-size: 11px; font-weight: bold;}
.headline-smaller {font-size: 10px; font-weight: bold;}
.headline-smallest {font-size: 9px; font-weight: bold;}
.headline-link {font-size: x-small; line-height: 1.2em; font-weight: bold;}

/* text */
.largest {font-size: 15px}
.larger {font-size: 14px}
.large {font-size: 13px}
.Default {font-size: 12px; color:black}
.small {font-size: 11px}
.smaller {font-size: 10px}
.smallest {font-size: 9px}
.link {font-size: x-small; line-height: 1.2em; font-weight: bold;}

/* text color */
.banner {color:#99ccff}
.white {color:#ffffff}
.red {color:#cc0000}
.blue {color:#336699}
.grey {color:#666666}
.gold {color: gold}
.green {color: #007a00}
.maroon {color: #990000;}

/* Link Styles */
a:link {text-decoration: none; color: #990000;}
a:visited {text-decoration: none; color: #990000;}
a:hover {text-decoration: underline; color: #8f4747;}

/* Rounded Corners */
/* To create the rounded corners, change the gif to match the border and inner background color. Then put "<div class="top_left"></div><div class="top_right"></div>" on the top, and "<div class="bottom_left"></div><div class="bottom_right"></div>" below where the corners should be. */

/* Green Border, Green Inside */
.top_left {height: 15px; font-size: 2px; background: transparent url(../Images/bg_tl_gg.gif) no-repeat;}
.top_right {width: 19px; height: 15px; float: right; margin-top: -15px; background: transparent url(../Images/bg_tr_gg.gif) no-repeat; font-size: 2px;}
/* Purple Border, White Inside */
.bottom_left {height: 15px; font-size: 2px; background : transparent url(../Images/bg_bl_pw.gif) no-repeat;}
.bottom_right {width: 19px; height: 15px; float: right; margin-top: -15px; background : transparent url(../Images/bg_br_pw.gif) no-repeat; font-size: 2px;}

/* Purple Border, Grey Inside */
.top_left_gr {height: 15px; font-size: 2px; background: transparent url(../Images/bg_tl_pg.gif) no-repeat;}
.top_right_gr {width: 19px; height: 15px; float: right; margin-top: -15px; background: transparent url(../Images/bg_tr_pg.gif) no-repeat; font-size: 2px;}
.bottom_left_gr {height: 15px; font-size: 2px; background : transparent url(../Images/bg_bl_pg.gif) no-repeat;}
.bottom_right_gr {width: 19px; height: 15px; float: right; margin-top: -15px; background : transparent url(../Images/bg_br_pg.gif) no-repeat; font-size: 2px;}