/*
	Sana Site CSS
	November 2007	
*/

/* ---------------------------------------------------
	Formatting
----------------------------------------------------*/
body {
	text-align: center;
	font-family: "Lucida Grande", Arial, Verdana, sans-serif;
	font-size: 11px;
	line-height: 20px;
	color: #666;
	/* background: url(../images/grid.gif) repeat-y top center; */
	}

h1 {
	text-transform: uppercase;
	color: #000;
	}

h2 {
	font-weight: bold;
	text-transform: uppercase;
	color: #000;
	}

h3, h4 {font-family: "Courier New", "Andale Mono", monospace;color: #000;}

h3 {
	font-size: 18px;
	margin: -14px 0 5px 0;
	padding: 0;
	float: left;
	}

h4 {
	font-size: 24px;
	margin-top: 6px;
	}

p {margin:0 0 5px 0;}

small {color:#acacac;}

.clear {clear:both;}
a {color: #0fa1b8;text-decoration: none;}
a:hover {color: #22c8e2;}
p a:hover {border-bottom: 1px solid #ace3ec;}

#nata #content a {color: #DA74B2;}
#nata #content a:hover {color: #FD9EE3;}
#vive #content a {color: #589B35;}
#vive #content a:hover {color: #95D353;}

.link-small {height: 8px;overflow: hidden;margin: 5px 0;}
.link-small a {
	height: 0px !important;
	float: left;
	padding: 8px 0 0 0;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: 0 0;
	}
	
.link-small a:hover {background-position: 0 -8px;}
.for-active-people a {background-image: url(/images/buttons/organic_skin_care_active.gif);width: 215px;}
.for-babies-mothers a {background-image: url(/images/buttons/organic_skin_care_mothers.gif);width: 245px;}
.visit-sana-blog a {background-image: url(/images/buttons/visit_sana_blog.gif);width: 210px;}
.more-about-ing a {background-image: url(/images/buttons/more_about_nat_ingredients.gif);width: 230px;}
.knowledge-base a {background-image: url(../images/buttons/visit_knowledge_base.gif);width: 239px;}

.link-arrow {height: 15px;overflow: hidden;}
.link-arrow a {
	float: left;
	padding: 15px 33px 0 0;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: 0 0;
	}
.link-arrow a:hover {background-position: 0 -15px;}

.nata-view-p a {background-image: url(/images/buttons/nata_view_product.gif);}
.vive-view-p a {background-image: url(/images/buttons/vive_view_product.gif);}
.buy a {background-image: url(/images/buttons/buy_now.gif);width: 45px;}

input.text {
	padding: 4px;
	border: 1px solid #e2e2e2;
	font-size: 11px;
	}

.right {float:right;}
.left {float:left;}

/* ---------------------------------------------------
	Layout
----------------------------------------------------*/
#container {
	width: 830px;
	margin: auto;
	text-align: left;
	}

#content-page #content, #nata #content, #vive #content, #blog #content {margin-top: 40px;}
#admin-page {padding-top: 40px;}
#content {float:left;}

/* Global Nav ---------------- */
#global-nav {
	display: none;
	}

/* Nav ---------------- */
#nav {
	display: none;
	}

/* Logo ---------------- */
#logo {
	width: 100%;
	height: 26px;
	margin-bottom: 42px;
	float: left;
	}

#logo a {
	width: 110px;
	height: 0px !important;
	padding: 26px 0 0 0;
	float: left;
	overflow: hidden;
	background: url(/images/logo_sana.gif) no-repeat top left;
	}
	
#nata #logo, #vive #logo {height: 55px;}
#nata #logo a, #vive #logo a {width: 69px;}
#nata #logo a {background-image: url(/images/logo_nata_sana.gif);padding-top: 55px;}
#vive #logo a {background-image: url(/images/logo_vive_sana.gif);padding-top: 55px;}

#footer {
	width: 100%;
	margin: 0 0 20px 0;
	padding: 10px 0;
	float: left;
	clear: both;
	font-family: "Courier New", Monaco, monospace;
	font-size: 11px;
	border-top: 1px solid #E2E2E2;
	display: none;
	}

#blog #footer {margin-top: 20px;}

#footer ul li {
	display: inline;
	}

#footer ul li a {
	float: left;
	margin: 0 44px 0 0;
	color: #666;
	text-decoration: none;
	}

#footer ul li a:hover {text-decoration: underline;}

/* Columns ---------------- */
.full {
	width: 100%;
	float: left;
	/* background: red; */
	}

.headings {
	padding: 5px 0;
	border-top: 1px solid #E2E2E2;
	border-bottom: 1px solid #E2E2E2;
	}

.headings-title {width: 415px;float: left;}

.three {
	width: 620px;
	float: left;
	}

.half {
	width: 414px;
	padding: 0;
	margin: 0;
	float: left;
	}
	
.headings .half img {margin: 0;float: left;}

.right {padding: 0 0 0 6px;width: 409px;}
.bdr-r {border-right: 1px solid #E2E2E2;}

.quarter {
	width: 200px;
	margin: 0 10px 0 0;
	float: left;
	/* background: blue; */
	}

.header {
	width: 415px;
	float: left;
	/* background: aqua; */
	}

/* ---------------------------------------------------
	Homepage
----------------------------------------------------*/
#header {float: left;border-bottom: 1px solid #E2E2E2;display:none;}
#nata #header, #vive #header {border-bottom: none;}
#header .half {margin:0;padding:0;width:415px;}
#header .nata a {border-bottom: 10px solid #DA74B2;float: left;}
#header .nata a:hover {border-bottom-color: #FD9EE3;}
#header .vive a {border-bottom: 10px solid #589B35;float: left;}
#header .vive a:hover {border-bottom-color: #95D353;}

#home-products .quarter {padding: 18px 0;}
#home-products .quarter span {width: 200px;float: left;text-align: center;padding: 0 0 15px 0;}
#home-products .quarter span a {width: 100%;float: left;padding: 0 0 5px 0;border-bottom: 5px solid #fff;}
#home-products .quarter span a:hover {border-bottom: 5px solid #000;}
#home-products .quarter span.nata a:hover{border-bottom-color: #C47AB0;}
#home-products .quarter span.vive a:hover{border-bottom-color: #589B35;}
#home-products h1 {font-size: 11px;}


.home-blog {padding-bottom: 40px;}
#content .link-small {margin: 10px 0 20px 0;display: none;}
.last, .last a {margin-right: 0;}

/* Homepage Blog ---------------- */
.post {margin: 0 0 24px 0;}
.post h1 {margin-bottom: 0;font-size: 11px;}

/* Homepage Blog ---------------- */
.natural-ing a, .natural-ing-right a {float: left;margin: 0 0 20px 0;text-align: center;width: 102px;font-size: 9px;}
.natural-ing a span, .natural-ing-right a span {text-transform: uppercase;color: #000;}
.natural-ing a:hover span, .natural-ing-right a:hover span {color: #0fa1b8;}
.natural-ing a:hover, .natural-ing-right a:hover {border-bottom: none;}

/* ---------------------------------------------------
	Nata/Vive Landing Pages
----------------------------------------------------*/
#feature {margin-top: 20px;}
#feature dl {margin-bottom: 20px;}
#feature dl dt {float: left;}
#feature dl dd h1 {font-size: 11px;}
#feature dl dd {padding-left: 110px;}

/* ---------------------------------------------------
	Content Page
----------------------------------------------------*/
#content-section {
	display: none;
	}

#section-nav {
	display: none;
	}

#content-title {
	width: 600px;	
	float: left;
	border-bottom: 1px solid #E2E2E2;
	height: 30px;
	}

#content-title h4 {
	width: 600px;
	margin: -35px 0 0 0;
	}
	
h2.btm-bdr {padding: 2px 0;margin-bottom: 10px;border-bottom: 1px solid #E2E2E2;}

#page-content .btm-bdr {margin-bottom: 21px;}
#page-content {width: 600px;margin-right: 10px;}
#page-content p {margin-bottom: 20px;padding-right: 10px;}
#page-content p.admin {margin-bottom: 10px;padding-right: 10px;padding-top: 21px;}

#page-content hr {height: 1px; border:0; background-color: #E2E2E2; }
#page-content ul {padding: 0px;margin: 0px;}

#caption img {padding-bottom: 10px;}

.callout .btm-bdr {margin-bottom: 10px;}
.callout {margin: 30px 0 0 0;}
.callout img {padding-bottom:10px;}
.callout p {margin-bottom: 0;}

/* ---------------------------------------------------
	Product Page
----------------------------------------------------*/
#product-page #content {margin-bottom: 50px;}
#product-detail {width: 410px;padding-right: 0;}

#product-sidebar {
	display: none;
	}

#send-to-friend {
	display: none;
	}
	
#send-to-friend input {margin-bottom: 5px;float: left;color: #666;}
#product-image {margin-bottom: 40px;}

#info {
	float: left;
	margin: 30px 0 0 0;
	}

h2.toggle {
	width: 600px;
	color: #DA74B2;
	display: block;
	margin-bottom: 5px;
	border-bottom: 1px solid #e2e2e2;
	cursor: pointer;
	clear: both;
	}
	
#nata h2.toggle {color: #DA74B2;}
#vive h2.toggle {color: #589B35;}

h2.toggle:hover {background: #FBFACB;}
#product-title {width: 280px;padding: 0 10px 0 0;}

.info_content {
	width: 600px;
	float: left;
	margin-bottom: 30px;
	}

.info_content .natural-ing a {width: 100px;margin-bottom: 0;}

.price {float: right;}
.price p {margin-bottom: 2px;line-height: 10px;}

/* ---------------------------------------------------
	Gift Page
----------------------------------------------------*/
.gift-content {
	width: 410px;
	float: right;
	margin-right: 0;
	margin-bottom: 60px;
	}

.gift-content p{margin-bottom: 20px;}
.gift-content .price p {margin-bottom: 8px;line-height: 10px;}

#vive #product-sidebar ul li.visited a, #natar #product-sidebar ul li.visited a {color: #666;}

/* ---------------------------------------------------
	Blog
----------------------------------------------------*/
#blog #logo {margin-bottom: 0;}
#blog-sidebar ul li.current-cat a {color: #333;}
	
#blog .post {
	float: left;
	font-size: 12px;
	}

#blog .post h1 {
	width: 620px;
	color: #000;
	line-height: 20px;
	font-weight: bold;
	border-bottom: 1px solid #e2e2e2;
	}

#blog .post h1 a {
	color: #000;
	}

#blog .post h1 a {
	color: #000;
	}
#blog .post h1 a:hover {color:#0fa1b8;}

#blog .post small {
	float: left;
	margin: 0 0 20px 0;
	font-size: 11px;
	}

#blog .post p {margin: 0 0 20px 0;clear: both;}

#blog .post img {
	border: 1px solid #e2e2e2;
	padding: 3px;
	}

#blog .post-navigation {
	width: 620px;
	float: left;
	/* border-top: 1px solid #e2e2e2; */
	}

#blog .post-navigation .alignleft {float:left;}
#blog .post-navigation .alignright {float:right;}

#comments-container {
	float: left;
	margin: 20px 0;
	padding: 10px 0 0 0;
	border-top: 1px solid #e2e2e2;
	}

#comments-container h3 {
	border-bottom: 1px solid #e2e2e2;
	}

#comment {
	width: 500px;
	border: 1px solid #e2e2e2;
	}

#blog-container {margin: 4px 0 0 0;}
#blog-container h4 {
	width: 620px;
	border-bottom: 1px solid #e2e2e2;
	}

ol.commentlist {
	/* list-style-type: decimal; */
	}

ol.commentlist li {
	padding: 0 0 10px 0;
	margin: 0 0 10px 0;
	}

ol.commentlist li {
	background: url(/images/blog/comment_alt.gif) repeat-x 0 20px;
	}

ol.commentlist li.alt {
	background: none;
	} 

ol.commentlist li a {
	border-bottom: 1px solid #ace3ec;
	}

ol.commentlist li cite {
	width: 620px;
	float: left;
	color: #0fa1b8;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px solid #e2e2e2;
	}