body { 
margin: 0;
padding: 0;
background-color: #111;
color: #e0ffff;
font: 10px verdana, arial, helvetica, geneva, sans-serif; 
 }
 
p { color: #e0ffff; font: 10px Verdana, Arial, Helvetica, Geneva, sans-serif; background-color: transparent; line-height: 14px; letter-spacing: 0.1em;}
.homepage {line-height: 16px; }
h1 { color: #ffcc33; font-size: 24px; font-family: "Times New Roman", Times, serif; font-weight: bold; font-style: italic; background-color: transparent; text-align: center; }
h2 { color: #ffcc33; font-size: 18px; font-family: "Times New Roman", Times, serif; font-weight: bold; font-style: italic; background-color: transparent; text-align: center; }

.quote { color: #ffcc33; font: italic 12px/14px "Times New Roman", Times, serif; background-color: transparent; letter-spacing: 0.1em; }
.center {text-align: center; }
.left {text-align: left; }
.right{text-align: right; }
.indent {padding-left: 20px; }
.gold {color: #ffcc33; background-color: transparent;}
.copyright { color: #ffcc33; font-size: 9px; line-height: 12px; font-family: Verdana, Arial, Helvetica, Geneva, sans-serif; background-color: transparent; text-align: center; }

a:link { color: #e0ffff ; background-color: transparent; border-style: none; }
a:visited { color: #e0ffff; background-color: transparent; border-style: none; }
a:hover { color: #e0ffff ; background-color: #023b63; }
a:active { color: #e0ffff; background-color: transparent;}

.linkinline { color: #e0ffff; background-color: transparent; text-decoration: none; }
.linkinline a:link { color: #e0ffff; background-color: transparent; text-decoration: none; }
.linkinline a:visited { color: #e0ffff; background-color: transparent; text-decoration: none; }
.linkinline a:hover { color: #ffcc33; background-color: transparent; text-decoration: none; }
.linkinline a:active { color: #ffff44; background-color: transparent; text-decoration: none; }

.linkproduct { color: #ffcc33; background-color: transparent; text-decoration: none; }
.linkproduct a:link { color: #ffcc33; background-color: transparent; text-decoration: none; }
.linkproduct a:visited { color: #ffcc33; background-color: transparent; text-decoration: none; }
.linkproduct a:hover { color: #ffff44; background-color: transparent; text-decoration: none; }
.linkproduct a:active { color: #e0ffff; background-color: transparent; text-decoration: none; }

.linkcopyright { font-size: 11px; color: #ffcc33; background-color: transparent; text-decoration: none; text-align: center;}
.linkcopyright a:link { font-size: 11px; color: #ffcc33; background-color: transparent; text-decoration: none; }
.linkcopyright a:visited { font-size: 11px; color: #ffcc33; background-color: transparent; text-decoration: none; }
.linkcopyright a:hover { color: #e0ffff; background-color: transparent; text-decoration: none; }
.linkcopyright a:active { color: #ffff44; background-color: transparent; text-decoration: none; }

#container-title { color: #e0ffff; background-color: #111; background-image: url(../images/headers/title-ribbon.jpg); width: 768px; height: 66px; margin-right: auto; margin-left: auto; margin-top: 12px; margin-bottom: 12px;}
#container-main { position: relative; color: #e0ffff; background-color: #111; margin-right: auto; margin-left: auto; width: 760px; height: 576px; border-left: 4px outset #fc3; border-right: 4px solid #dcb02d; border-bottom: 4px solid #dcb02d; border-top: none; }
#container-menu { position: relative; z-index: 1; color: #e0ffff; background-color: #0000c0; vertical-align: middle; margin-right: auto; margin-left: auto; width: 760px; height: 24px; border-left: 4px outset #fc3; border-top: 4px outset #fc3; border-right: 4px solid #dcb02d; border-bottom: none; }
/* need relative postion to nest menu's absolute postion */ 

#container-body { position: relative; margin-right: auto; margin-left: auto; padding: 10px; width: 740px; height: auto; }
/* need relative postion to nest absolute postioned elements */
#container-homepage-text { position: absolute; top: 50px; left: 380px; width: 350px; height: auto; }
#container-homepage-image1 { position: absolute; top: 182px; left: 60px; width: 230px; height: 346px;
; border: none;}
#container-homepage-image2 { position: absolute; top: 312px; left: 380px; width: 300px; height: 216px;
; border: none;}

#contact-box { margin: auto; padding-top: 20px; padding-bottom: 40px; width: 400px; height: auto; }
/* opptional for trasparrent logo */
#container-homepage-image3 { position: absolute; top: 30px; left: 120px; width: 108px; height: 108px; border: none; }
#container-links { margin-right: auto; margin-left: auto; padding: 40px 10px 100px; width: 500px; height: auto; }
#footer { position: absolute; top: 552px; left: 0; color: #e0ffff; background-color: #0000c0; vertical-align: middle; width: 760px; height: 24px; }


/* About Page */
#container-about { position: relative; color: #e0ffff; background-color: #0000c0; margin-right: auto; margin-left: auto; padding-top: 20px; width: 740px; height: auto;}
#container-about-top { color: #e0ffff; background-color: #0000c0; margin-right: auto; margin-left: auto; padding-bottom: 20px; width: 740px; height: auto;}
.pic { float: left; width: 250px; padding-top: 10px; padding-left: 20px; padding-right: 20px;}



/* Product Pages */
#container-products { position: relative; color: #e0ffff; background-color: #0000c0; margin-right: auto; margin-left: auto; width: 760px; height: auto; border-left: 4px outset #fc3; border-right: 4px solid #dcb02d; border-bottom: 4px solid #dcb02d; border-top: none; }
#container-pagehead { position: relative; color: #e0ffff; background-color: #0000c0; width: 760px; height: 54px; margin-right: auto; margin-left: auto; border-top: 4px outset #fc3; border-bottom: 5px solid #dcb02d; border-right: none; border-left: none; }

.ingredients { color: #ffcc33; font-size: 10px; line-height: 12px; font-family: Verdana, Arial, Helvetica, Geneva, sans-serif; background-color: transparent; text-align: left; }
.ingredient-list { color: #e0ffff; font-size: 9px; line-height: 12px; font-family: Verdana, Arial, Helvetica, Geneva, sans-serif; background-color: transparent; text-align: left; position: relative; left: 12px; }

.product-name { color: #ffcc33; font-size: 14px; line-height: 18px; font-family: Verdana, Arial, Helvetica, Geneva, sans-serif; background-color: transparent; text-align: left; }
.product-text { color: #e0ffff; font-size: 10px; line-height: 14px; font-family: Verdana, Arial, Helvetica, Geneva, sans-serif; background-color: transparent; text-align: left; }


/* Drop Down Menu Formatting */
/* If padding or margins are used here to space the li, you cant get to the next item before it disapears in IE windows. Use padding only in link sytle itself */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
position: absolute; 
top: 0; 
left: 0; 
z-index: 100; /* top z-index */
width: 100%; /* precision for Opera */
/* DO NOT add a background color here - IE Windows bugs  */
}


/* menu main box */
#menu dl {
float: left;
width: 126px;
padding-top: 4px;
}

/* menu main text */
#menu dt {
cursor: pointer;
text-align: center;
font-size: 10px;
font-weight: bold;
line-height: 14px; /* Adjust to match a-link placement */
margin: 0px;
}

/* menu drop box */
#menu dd {
display: none;
background: #0000a0; color: #e0ffff;
margin-top: 6px; /* If padding is used, you cant get to the list before it disapears */
padding-bottom: 6px; 
}

/* menu drop text */
#menu li { text-align: center;
/* If padding or margins are used here to space the list, you cant get to the next item before it disapears in IE windows. Use padding only in link sytle itself */
}

#menu li a, #menu dt a {
text-decoration: none;
display: block;
height: 100%;
line-height: 14px; /* Adjust to match maintext line height*/
border: 0 none;
}

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus { 
background-image: url(../images/menu-on.gif); 
background-position: 0 0; }



/* END Drop Down Menu */

/* Chakras */
.container-300 { color: #e0ffff; background-color: #009; width: 300px; height: auto; padding: 4px; border: outset 2px #000; }
.container-chakra { width: 280px; height: 50px; }
.name-float-left { float:left; background-color: transparent; width: 144px; height: auto; }
.button-float-right { float: right; padding-top: 5px; background-color: transparent; width:120px; height: auto; text-align: right; }
.violet { margin-left: 12px; font-size: 10px; text-align: center; color: #e0ffff; background-color: #c0f; width: 130px; } 
.indigo { margin-left: 12px; font-size: 10px; text-align: center; color: #e0ffff; background-color: #30c; width: 130px; }
.blue { margin-left: 12px; font-size: 10px; text-align: center; color: #e0ffff; background-color: #00f; width: 130px; }
.green { margin-left: 12px; font-size: 10px; text-align: center; color: #e0ffff; background-color: #0f0; width: 130px; }
.yellow { margin-left: 12px; font-size: 10px; text-align: center; color: #e0ffff; background-color: #ff0; width: 130px; }
.orange { margin-left: 12px; font-size: 10px; text-align: center; color: #e0ffff; background-color: #f60; width: 130px; }
.red { margin-left: 12px; font-size: 10px; text-align: center; color: #e0ffff; background-color: #f00; width: 130px; }

/* Form-Quantity Text Field */
input,  select, option { background : #e0ffff; color : #000; font-size: 10px; font-family : Verdana, Arial, Helvetica, sans-serif;}


/* float boxes for bath forms */
.bath-left { float: left; width: 170px; height: auto; }
.bath-right { float: right; width: 170px; height: auto; }