* /*Set's border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0;
}
body, html
{
  color: #000; 
  font-family: Arial,Helvetica,Geneva,sans-serif;
  text-align: center;  
}
body 
{
  font-size: 12px;
  min-width: 760px;
  border: 0px;
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: #0e6c51;
}

td { font-size: 12px; line-height: 20px;};

p { padding: 7px 0 7px 0; }

a { color: #000099; }
a:hover{ text-decoration: none; color: #000000; }
a:link, a:visited, a:active{ text-decoration: none; color: #006C51; }

h1, h2, h3, h4 {
font-weight: bold;
padding-bottom: 5px;
}

h3
{
padding-top: 5px;
}

h1 {
color:#006C51;
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size: 18px;
font-weight: 900;
letter-spacing: 1;
line-height:1em;
margin-top: 10px;
margin-bottom:0;
text-decoration:none;
}

h2 {
color:#006C51;
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size: 16px;
font-weight: 600;
letter-spacing: 1;
line-height:1em;
margin-top: 10px;
margin-bottom:0;
text-decoration:none;
}

h3
{
color:#006C51;
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 1;
line-height:1em;
margin-top: 13px;
margin-bottom:0;
text-decoration:none;
}

h4 
{ 
color:#006C51;
font-family:Arial,Helvetica,Geneva,sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 1;
line-height:1em;
margin-top: 13px;
margin-bottom:0;
text-decoration:none;
}

h1 a, #header h2{ color: #fff; }

.clear { clear: both; }

#whiteArea 
{
background:#fff url("images/whiteBG.jpg") repeat center top;
}

#mainContainer {
min-height: 300px;
width: 920px;
margin-left: auto;
margin-right: auto;
padding-bottom: 12px;
text-align: left;
background-color: #ffffff;
}
* html #mainContainer {
height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}

ul
{
list-style-type:square;
margin: 5px 0px 25px 0px;
}

li
{
line-height: 18px;
}

/**************************
HEADER
**************************/
#headerContainer 
{
 width: 100%;
 background:#0e6c51 url("images/headerBG.jpg") no-repeat center top;
}

#header {
height: 125px;
width: 920px;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 0px;
}
/**************************
CONTENT AND COLUMNS
**************************/
.outer {
border-left: 165px solid #fff; /*** This is the width and the color for our left column ***/
border-right: 165px solid #fff; /*** This is the width and the color for our right column ***/
}
* html .outer {
/*** No need for hacking IE on this layout ***/
}
.inner {
width: 100%; 
}
* html .inner {
/*** No need for hacking IE on this layout ***/
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows 
my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully)
***/
.float-wrap {
float: left;
width: 100%;
margin-left: -165px; /*** Same length as .outer border-left but with negative value ***/
}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
#content {
float: right;
margin-right: -165px;  /*** Same length as .outer border-left but with negative value ***/
width: 100%;
}
* html #content {
position: relative;
}
.contentWrap{
padding: 10px 5px 5px 5px;
}
.contentWrap ol, .contentWrap ul {
margin: 3px 0 5px 35px;
}
.contentWrap li {
padding-bottom: 2px;
}
/**************************
TOP BAR
**************************/
#topBar
{
width: 100%;
background-image: url("images/barBG.jpg");
height: 25px;
padding: 0px 0px 0px 6px;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
}

/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#left {
float: left;
width: 150px;
min-height: 250px;
padding: 0px 0px 0px 0px;
}
* html #left {
position: relative;  /*** IE needs this  ***/
height: 250px;
}
#left ul {
list-style: none;
padding-bottom: 4px;
}
#left li {
padding-bottom: 2px;
}
/*************************
RIGHT COLUMN
**************************/
#right {
float: right; 
width: 155px;
padding: 5px 0px 0px 0px;
min-height: 250px;
margin-right: -165px; /** This negative margin-right value is the width of the right column + the padding, in this example 130px. ***/
}
* html #right {
height: 250px;
position: relative;  /*** IE needs this  ***/
}
#right ul {
list-style: none;
padding-bottom: 4px;
}
#right li {
padding-bottom: 2px;
}
/**************************
FOOTER
**************************/
#footer {
height: 75px;
width: 920px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

#footer p
{
padding-top: 13px;
color: #ffffff;
}

#footerContainer 
{
 width: 100%;
 background-image: url("images/footerBG.jpg");
}

/**************************
Logos
**************************/
.logoRight
{
  float: right;
}

.logoLeft
{
  float: left;
}

.logos
{
  height: 77px;
}
/**************************
Menus
**************************/
#menu1 { border-top: 0px solid #666666; padding: 12px 0px 0px 0px; }
#menu1 li { border-bottom: 0px solid #666666; padding: 0px; margin: 0px 0px 4px 0px; line-height: 29px;  background-image: url("../../images/menuBG.jpg"); width: 152px; } 
#menu1 a { width: 100%; text-decoration: none; font-weight: bold; color: #ffff00; margin: 0 0 0 5px; }

#menu2 { height:18px;  padding: 4px 0px 0px 0px; margin: 0px; }
#menu2 li {list-style:none; float:left; padding: 0px 15px 0px 0px; line-height:18px; }
#menu2 a { text-decoration:none; display:block; font-size: 10px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: #000000;}
#menu2 a:hover { }

#menu3 ul { border-top: 0px solid #666666; padding: 0px; margin: 0px; }
#menu3 li { border-bottom: 0px solid #666666; padding: 0px; margin: 0px 0px 4px 0px; width: 152px; line-height: 29px; width: 152px; background-image: url("../../images/menuBG.jpg");} 
#menu3 a { width: 100%; text-decoration: none; font-weight: bold; color: #ffff00; margin: 0 0 0 5px; }

hr
{
background-color: #999;
height: 1px;
margin-top: 15px;
margin-bottom: 15px;
}

/**************************
Lightbox
**************************/
#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both; background-color:#fff;}

/**************************
ContactForm
**************************/
.error { color: #ff0000; font-weight: 600; }
/**************************
Forms
**************************/
input, textarea, select
{
color: #006C51;
background: #ccffe5;
border: 1px solid #666;
padding: 2px;
margin: 2px;
}

.submit
{
color: #006C51;
background: #eeeeee;
width: 150px;
border: 2px outset #666;
}

a.plainFooter:link, a.plainFooter:visited, a.plainFooter:hover, a.plainFooter:active
{
text-decoration: none;
color: #ffffff;
}

a.plain:link, a.plain:visited, a.plain:hover, a.plain:active
{
text-decoration: none;
color: #999999;
}

.productOptions
{
margin: 0px 0px 0px 20px;
float:left;
line-height: 20px;
}

.productOptions label span
{
width: 70px;
float: left;
font-weight: 600;
}

.productGroup input
{
padding: 2px;
}

.productOptions label .priceSpan
{
width: 63px;
}

.category
{
float: left;
width: 144px;
height: 115px;
text-align: center;
}

.categoryWithBG
{
float: left;
width: 144px;
height: 144px;
text-align: center;
}

.categoryHeading
{
font-size: 1.1em;
font-weight: 600;
}

.alignCenter 
{
text-align: center;
}

.storeWarning
{
text-align: center;
color: #000000;
font-size: 1.1em;
}

ul h3
{
letter-spacing: 0;
}