/* @override http://soothingherbals.com/sh.css */

/*Stylesheet by Molly Cliborne, www.ramettedesigns.com.  
CSS rollovers in Shop Menu and Navigation 
were achieved using peek-a-boo method described here:  
http://wellstyled.com/css-nopreload-rollovers.html */

@media screen {

/* @group Mailing List */
div#mc_embed_signup{
	clear: both;
	width: 315px;
	float: left;
	background: #fff;
	border: 2px solid #9999cc;
	
}

div.mc-field-group ul li{
	display: inline;
	float: left;
	width: 75px;
}

div.mc-field-group ul{
	margin-top: 0;
	padding-top: 0;
}

input#mc-embedded-subscribe.btn {
	text-align: center;
}


/* @end */


body {
	margin: 0;
	padding: 0;
	background-color: #9999cc;
	background: url(images/bkgrd.jpg);
	color:  #330033;
	font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, sans-serif;
	font-size: 80%;
 /* resets 1em */
	text-align: center;
	line-height: 1.3em;
}

/* @group Blocks */

#page {
	position: relative;
	width: 810px;
	\width: 810px;
	w\idth: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	background-color: #BEBBF3;
	text-align: left;
	padding: 0px;
	border: 5px solid #CECEFF;
}

#header {
	position: relative;
	width: 764px;
	height: 168px;
	margin: 0 auto;
	border: 0;
	background: url(images/header.png) no-repeat;
	text-indent: -9999px;
}

#header span {display: none;}

#navcontainer
{
	background: url(images/navigation.png) no-repeat;
	clear: both;
	width: 736px;
	height: 21px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
}

/* @end */

/* @group Front page */

table#flower-box {
	width: 100%;
	background: url(images/lavender.jpg);
	border: 4px solid #99c;
	float: right;
}

#front-left-content {
	float: left;
	width: 405px;
	margin: 0;
	padding: 0;

}

#front-right-content {
	margin-left: 410px;
	width: 385px;
}

#front-relateditems {
	width: 170px;
	\width: 170px;
	w\idth: 165px;
	background: #D8D6F8;
	float: left;
	border: 3px solid #99c;
	margin-right: 5px;
	margin-bottom: 15px;

	}

#front-bestsellers {
	width: 170px;
	\width: 170px;
	w\idth: 165px;
	background: #D8D6F8;
	float: right;
	border: 3px solid #99c;
	margin-left: 5px;
	margin-bottom: 15px;
}

#quote {
	width: 320px;
	float:left;
	border: 4px solid;
	padding: 5px 5px;
	clear: both;
	margin-top: 10px;
}

#quote p{
	margin: 0;
}

#logos {
	width: 320px;
	float:left;
	padding: 5px 10px;
	margin-top: 15px;
	margin-bottom: 10px;
	clear: both;
}

div.poster-children {
	float: left;
	text-align: center;
	width: 195px;
	\width: 195px;
	w\idth: 175px;
	height: 230px;
	margin: 10px 10px;
}

div.poster-children h3 {
	margin: 5px 0 0;	
	font-variant: normal;
	font-family: "Century Gothic", "Lucida Grande", Tahoma, "Trebuchet MS", Verdana, sans-serif;
}

.poster-children img {
	background: #fff;
	border: 2px solid #99c;
	padding: 4px;
	margin: 0;

}

.bodyColors {
	display: block;
	clear: both;
	margin-top: 20px;
}

/* @end */

/* for right-menu pages */

#right-sidebar {
	margin-left: 475px;
	margin-right:  35px;
	margin-top: 0;
	padding-top: 0;
	padding-left: .5em;
	padding-bottom: 1em;
}

#left-content {
	float: left;
	width: 455px;
	\width: 455px;
	w\idth: 425px;
	margin-left: 30px;
	display: block;
}

/* for left-menu pages */

#right-content {
	margin-left: 195px;
	margin-right: 15px;
	margin-top: 0;
	padding-top: 0;
	padding-left: .5em;
	padding-bottom: 1em;
}

#right-shopcontent {
	float: left;
	width: 405px;
	\width: 405px;
	w\idth: 395px;	
	margin-left: 20px;
	margin-right: 20px;
	padding: 0;
}

#left-sidebar {
	float: left;
	width: 175px;
}

#left-shopmenu {
	background: url(images/shopmenu.png) no-repeat;
	/* one large background image containing 
	regular and hover states side by side */
	width: 168px;
	height: 397px;
	border: 2px solid #9999cc;
	margin: 0;
	margin-left: 10px;

}

#contact-info span{
	width: 189px;
	height: 65px;
	margin-left: auto;
	margin-right: auto;
	background: url(http://www.soothingherbals.com/images/contact.png) no-repeat;
}

#right-relateditems {
	width: 165px;
	background: #D8D6F8;
	float: left;
	border: 3px solid #99c;
}

#footer {
	width: 100%;
	clear: both;
	padding-top: 3em;
	margin: .5em;
	text-align: center;
	font-size: .9em;
}

#clear {
	clear: both;
}


/*  MISC */

.welcome {
	width: 330px;
	\width: 330px;
	w\idth: 310px;
	border: 4px solid;
	padding: 5px 10px;
	margin-bottom: 15px;
}

#right-relateditems img, #front-relateditems img, #front-bestsellers img, #right-sidebar img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.product-related {
	padding: 5px;
	text-align: center;
	margin: 0;
	padding: 0;
}

.product-related img, #quote img {
	margin-top: 5px;
	border: 2px solid #fff;
}

.imageright {
	float: right;
	margin: 1em;
	margin-left: 2em;
}

.imageleft {
	float: left;
	margin: 0;
	margin-right: 2em;
}

.product-short img, .product-full img {
	margin-top: 20px;
	padding: 5px;
	border: 1px solid #999;
	background: #eee;
}

.recent-comments {
	text-align: center;
	margin: .5em;
}

.recent-comments p {
	font-size: .9em;
}


/*Typography*/

h1, h2, h3, h4, h5, h6, h7 {
	font-family: "Century Gothic", "Lucida Grande", Tahoma, "Trebuchet MS", Verdana, sans-serif;
	font-weight: normal;
	line-height: 1.3em;
}

body a {
	text-decoration: none;
}

a:link {  color: #003333}
a:hover {  color: #336666}
a:visited {  color: #003333}

#nav span, #left-shopmenu span, #contact-info span {
	display: none;
}

#left-sidebar ul, #left-sidebar li {
	list-style-image: url(images/bullet.png);
	margin-left: 10px;
}

#left-sidebar a {
	text-decoration: none;
}

#footer {
	color: #636;
}

#footer a {
	color: #366;
}


/*  COMMENT FORM */

#txpCommentInputForm textarea, #left-content textarea {
	width:300px;
	height:200px;
}

#txpCommentInputForm input, #txpCommentInputForm textarea, 
#left-content input, #left-content textarea {
	size: .9em;
	background: #D8D6F8;
	border: 1px solid #99c;
}

#right-shopcontent select {
	size: .9em;
	background: #D8D6F8;
}

.footer-links a {
	margin-left: 10px;
	margin-right: 10px;
}


/* SHOP MENU */

#shopmenu, #shopmenu a {
	width: 168px;
	height: 397px; 
	display: block; 
	text-decoration: none; 
	position: absolute;
	padding: 0; margin: 0;
}


/* This group tells you where the links go,
relative to the top corner of the image.*/

input.view-cart {position: relative; top:47px; height: 25px; left: 40px; width: 88px;}
a#salves-balms-oils {top:77px; height: 21px;}
a#aromatherapy {top: 98px; height: 17px;}
a#mama-baby-care {top: 115px; height:19px;}
a#facial-care {top: 134px; height: 18px;}
a#body-care {top: 152px; height: 18px;}
a#foot-care {top: 170px; height: 18px;}
a#bath {top: 188px; height: 18px;}
a#herbal-teas {top: 206px; height: 18px;}
a#gift-sets {top: 224px; height: 23px;}
a#ingredients {top: 251px; height: 18px;}
a#best-sellers {top: 269px; height: 18px;}
a#new-products {top: 287px; height: 18px;}
a#featured-products {top: 305px; height: 19px;}
a#order-form {top: 324px; height: 19px;}
a#join-mail {top: 354px; height: 27px; left: 22px; width: 122px;}

	
/* This group tells you the coordinates for the part of the image
that will be swapped out in hover state. */

a#salves-balms-oils:hover, div.salves-balms-oils #salves-balms-oils {
background: url(images/shopmenu.png) -166px -77px no-repeat;}

a#aromatherapy:hover, div.aromatherapy #aromatherapy {
background: url(images/shopmenu.png) -166px -98px no-repeat;}

a#mama-baby-care:hover, div.mama-baby-care #mama-baby-care {
background: url(images/shopmenu.png) -166px -115px no-repeat;}

a#facial-care:hover, div.facial-care #facial-care {
background: url(images/shopmenu.png) -166px -134px no-repeat;}

a#body-care:hover, div.body-care #body-care {
background: url(images/shopmenu.png) -166px -152px no-repeat;}

a#foot-care:hover, div.foot-care #foot-care {
background: url(images/shopmenu.png) -166px -170px no-repeat;}

a#bath:hover, div.bath #bath {
background: url(images/shopmenu.png) -166px -188px no-repeat;}

a#herbal-teas:hover, div.herbal-teas #herbal-teas {
background: url(images/shopmenu.png) -166px -206px no-repeat;}

a#gift-sets:hover, div.gift-sets #gift-sets {
background: url(images/shopmenu.png) -166px -224px no-repeat;}

a#ingredients:hover {
background: url(images/shopmenu.png) -166px -251px no-repeat;}

a#best-sellers:hover, div.best-sellers #best-sellers {
background: url(images/shopmenu.png) -166px -269px no-repeat;}

a#new-products:hover, div.new-products #new-products {
background: url(images/shopmenu.png) -166px -287px no-repeat;}

a#featured-products:hover, div.featured-products #featured-products {
background: url(images/shopmenu.png) -166px -305px no-repeat;}

a#order-form:hover {
background: url(images/shopmenu.png) -166px -324px no-repeat;}

a#join-mail:hover {
background: url(images/shopmenu.png) -188px -354px no-repeat;}


/* NAVIGATION */

#nav, #nav a {
	width: 736px;
	height: 21px; 
	display: block; 
	text-decoration: none; 
	position: absolute;
	padding: 0; 
	margin: 0;
	}

/* this group tells you where the links go,
relative to the top corner of the image*/
a#default {left:0; width: 70px;}
a#shop {left: 0px; width: 75px;}
a#botanical-sanctuary {left: 75px; width: 165px;}
a#about {left: 240px; width: 85px;}
a#customer-service {left: 325px; width: 150px;}
a#links {left: 475px; width: 105px;}
a#contact {left: 580px; width: 96px;}

/* this group tells you the coordinates for the part of the image
that will be swapped out in hover state */	
a#default:hover, body#default #default {
background: url(images/navigation.png) 0px -21px no-repeat;}

a#shop:hover, body#shop #shop {
background: url(images/navigation.png) 0px -21px no-repeat;}

a#botanical-sanctuary:hover, body#botanical-sanctuary #botanical-sanctuary {
background: url(images/navigation.png) -75px -21px no-repeat;}

a#about:hover, body#about #about {
background: url(images/navigation.png) -240px -21px no-repeat;}

a#customer-service:hover, body#customer-service #customer-service {
background: url(images/navigation.png) -325px -21px no-repeat;}

a#links:hover, body#links #links {
background: url(images/navigation.png) -475px -21px no-repeat;}

a#contact:hover, body#contact #contact {
background: url(images/navigation.png) -580px -21px no-repeat;}

}

/* DISJOINTED ROLLOVER IN HEADER */
#holder {
	margin: 0;
	padding: 0;
	position: relative;
	left: 189px;
	top: 38px;
	display: block;
}

@media print {

body {
	font-size: 80%;
}

#header {
		background: none;
	}
	
#header span, #nav span, #left-shopmenu span, #contact-info span {
	display: inline;
}

#right-relateditems, #nav, #left-shopmenu, #footer {
	display: none;
}
}