/*	==================================================
	Elixir Main Stylesheet
	Developed for Lively Marketing
	by Jeremy Carlson

	Colors - noted here for easy reference
	
	Browns
	#423420		Elixir brown
	#5e5548		gray-brown for text
	#2e2b27		darker gray-brown - text emphasis
	#1e170e		darker brown
	#736a5f		lighter gray-brown - banner text et al.
	#9e896a		lighter gray-brown still
	#c8b69b		lighter brown - rules

	Greens
	#d0d53b		Elixir green
	#e3e689		pale green 1
	#b1b334		slightly darker green for headings
	#a2a231		darker green for text
	#7f7b0b		dark green for links
	
	Creams
	#eceeb1		rich cream - background
	#f6f7d8		pale cream - background

	==================================================
	Global Settings
	--------------------------------------------------	*/

html {overflow-y:scroll;}

* { margin: 0; padding: 0 }

strong, h1, h2, h3, h4, h5, h6, h7 { font-weight: normal }

em, cite { font-style: normal }

li { list-style: none }

img { border: 0 }

table {
	border-collapse: collapse;
	border: none;
	}

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

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


/*	==================================================
	Framework
	
	Note: IE6 & 7 don't play well with having the HTML
	and BODY elements styled as below, so they're fed
	different values, and we make use of an additional
	div#extrawrap. But for FF, these original styles
	ensure that the columns go all the way to the 
	bottom of the page.
	--------------------------------------------------	*/

html {
	height: 100%;
	background: #eceeb1;
	text-align: center;
}

body {
	min-height: 100%; /* IE? */
	width: 820px;
	margin: 0 auto;
	background: url(/i/faux-columns.gif) repeat-y 50% 0;
	/* background: url(/i/inside0604.jpg) repeat-y -17px top; */
	text-align: left;
	}

#page {
	position: relative;
	padding: 0 6px 36px 7px;
	}


/*	=======================================================
	Easy Clearing - 'Clearfix'
	
	NOTE: The '.clearfix' class (or renamed equivalent)
	should be applied to the box CONTAINING the float.
	
	Documentation on the following '.clearfix' solution 
	to clearing floats at the end of boxes is found at
	http://www.positioniseverything.net/easyclearing.html
	
	To add more classes, 
	use this GREP Search/Replace Pattern (bbEdit):
	find: 			^(\* html )?(\.clearfix)(:after)?
	replace with:	\1\2\3, \1.newclass\3
	-------------------------------------------------------	*/

.clearfix:after, #page:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix, #page {display: inline-block;}

/* Backslash hack - hide code from IE-mac until next comment\*/
.clearfix, #page {display: block;}
* html .clearfix, * html #page {height: 1%;}

/*	End hide from IE-mac. The * makes this rule apply only to IE.
	The "Tan Hack" is documented at 
	http://www.positioniseverything.net/articles/box-model.html
	End of Clearfix
	--------------------------------------------------	*/

.clearing { clear:both; }

#logo {
	position: absolute;
	left: 23px;
	top: 30px;
	width: 199px;
	z-index: 3;
	}

#logo strong, #logo a {
	text-indent: -5000px;
	display: block;
	width: 199px;
	height: 147px;
	background: url(/i/elixir.png) no-repeat;
	}

#content {
	float: right;
	width: 569px;
	}

#banner {
	padding: 13px 16px 13px 36px;
	}

.maincontent {
	padding: 36px 16px 36px 36px;
	}
/*
.maincontent p, .maincontent ul {
	margin-right: 192px;
	}
*/	
	.maincontent ul li,
	.morecontent ul li {
		margin-bottom: .5em;
		list-style: disc;
	}

p.wide, ul.wide { margin-right: 0 }

.menucontent, .morecontent, .bottomquote {
	clear: both;
	border-top: 1px solid #c8b69b;
	background: url(/i/latte-gradient.gif) repeat-x top;
	padding: 24px 16px 0 0;
	position: relative;
}

.menucontent {
/*	height:100px;*/
}

.morecontent { padding-left: 54px } /* same as pagemenu items' left padding */

.morecontent p, .morecontent ul {
	margin-right: 112px;
	}

.bottomquote { padding-left: 220px }

#pagemenu {
	/*	float: left;*/
	width: 234px;
}

#pagemenu li h4, #pagemenu li a, #pagemenu li strong {
	margin: 0;
	padding: 2px 27px 2px 54px;
	line-height: 1.2;
	}

#pagemenu li a, #pagemenu li strong { display: block }

a.focused { background: url(/i/arrow-band.gif) no-repeat right 50% }

#services {
	position: relative;
/*	float: left;*/
}

#menuitems {
	width: 263px;
	top: 0px;
	left: 261px;
	position: absolute;
	}
	
#menuitems li {
	display: none;
}
	
#menuitems li.first {
	display: block;
}


a.menuCategory {  }
a.menuCategory.active { text-decoration: none; color: #000; }


#nav 
{
	position: relative;
	padding-top: 175px;
	width: 228px;
	margin: 0 5px;
	background: #423420 url(/i/dark-shading.gif) repeat-x left top;
	text-align: center;
	}

#navlist strong, #navlist a.current {
	background: #1e170e url(/i/dingbats-dark.gif) no-repeat 50% 50%; color: white;
	}

#navlist, #contact-info, #biz-hours {
	padding: 32px 0 0;
	background: url(/i/ding-green.png) no-repeat 100px top;
	}

#navlist, #contact-info { padding-bottom: 18px }

#nav p { margin-right: 5px }

#nav p strong#phone-number {
	text-indent: -5000px;
	display: block;
	height: 10px;
	background: url(/i/phone-number.gif) no-repeat 50% top;
	}
	
#nav #biz-hours { color: #fff }

#footer {
	clear: both;
	position: relative;
	top: 20px;
	padding-top: 2em;
	padding-left: 264px;
	}

/*	==================================================
	Firefox link fix
	--------------------------------------------------	*/

a:focus { -moz-outline-style: none /* fix for Firefox outlining link */ }

/*	==================================================
	Typography and Colors
	--------------------------------------------------	*/

body {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
	color: #5e5548;
	font-size: 72%;
	line-height: 1.4;
	letter-spacing: .09em;
	}

h1 { font-size: 2em }
h2 { font-size: 1.5em }
h3 { font-size: 1.25em }

h1, h2, h3 { margin-bottom: .25em }

p, ul {
	margin-bottom: 1em;
	}

.sc {
	text-transform: lowercase;
	font-variant: small-caps;
	}

strong, .pricing, #pagemenu h4 { color: #2e2b27 }

#banner strong, #menuitems h2 { color: #423420 }

a { color: #7f7b0b }

/*	==================================================
	Banner & Offer Styles
	--------------------------------------------------	*/

#banner {
	background: #fff;
	color: #736a5f;
	letter-spacing: .06em;
	}

#banner .phone {
	text-align: right;
	margin: -13px 4px -13px 0;
	padding: 13px 36px 13px 0;
	background: url(/i/phone.gif) no-repeat right 50%;
	}

#banner .phone strong {
	position: relative;
	top: -.2em;
	display: block;
	float: right;
	font-size: 1.3em;
	width: 7em;
	margin-right: 5px;
	margin-left: 10px;
	}

#banner em, #home-offer em {
	font-size: 1.4em;
	color: #9e896a;
	}

#home-offer { padding-left: 26px; margin-top: 30px; }

/*	==================================================
	Navigation
	--------------------------------------------------	*/

#nav, #nav a { color: #d0d53b }

#nav li {
	font-size: 1.08em;
	line-height: 1.3;
	}

#nav li a, #nav li strong {
	display: block;
	padding: 3px 41px 3px 36px;
	}

#nav a, #pagemenu a.focused { text-decoration: none }

#nav a:hover { text-decoration: underline }

#nav a:hover, #nav strong { color: #fff }

/*	==================================================
	Content
	--------------------------------------------------	*/

.pricing, .phone strong {
	font-family: Georgia, Times, serif;
	font-size: 1.1em;
	}

h1, #title {
	color: #b1b334;
	text-transform: lowercase;
	margin-bottom: .8em;
	}

.intro {
	font-size: 1.2em;
	}

.intro strong {
	font-family: Georgia, Times, serif;
	font-size: 1.2em;
	}

#pagemenu h4, #menuitems h3, cite {
	font-family: Arial, Helvetica, Verdana, sans-serif;
	text-transform: uppercase;
	letter-spacing: .07em;
	padding-top: .7em;
	}

.outdent { text-indent: -1.1em }

#pagemenu>li+li { margin-top: .5em }

#pagemenu h4, #menuitems h3 { font-size: .9em }

#pagemenu a:focus, a.focused, a:hover { color: #000 }

#menuitems h3 { color: #a2a231 }

#menuitems p { margin-top: .2em }

#menuitems h2 {
	text-indent: -.1em;
	margin-bottom: .5em;
	}

.quote {
	font-size: 1.5em;
	font-family: Georgia, Times, serif;
	color: #9e896a;
	text-indent: -.5em;
	}

cite {
	display: block;
	font-size: .9em;
	text-indent: -1em;
	}

.details li {
	margin-bottom: .5em;
	list-style: disc;
	}

.maincontent div.left, .maincontent p.left { width: 290px }
.maincontent div.right, .maincontent p.right { width: 200px }

.maincontent .left p, .maincontent .right p, .maincontent .left ul, .maincontent .right ul { margin-right: 0 }

.categorycontent {
	padding: 0px 16px 13px 36px;
	}

.highlight {
	font-family: Georgia, Times, serif;
	font-size: 1.2em;
	color: #736a5f;
	}

ul.highlight li { line-height: 1.5em; }

#product-category-list {
	padding: 12px 36px; /* same left margin as maincontent */
	line-height: 1.5;
	}

#product-category-list li {
	display: inline;
	/*padding-right: 1em;*/
	font-size: 1.1em;
	}

* html #product-category-list li { font-size: 1em; }
	
#product-category-list li.ding {
	/* padding-right: 0.3em;
	padding-left: 0.3em; */
	}

#product-category-list strong, #product-category-list a {
	display: inline-block;
	text-decoration: none;
	letter-spacing: 0;
	}

#product-category-list a:visited { color: #b1b334 }
#product-category-list a:hover { text-decoration: underline; color: #000 }

/*	==================================================
	Form Styles
	--------------------------------------------------	*/

#contact { padding: 24px 16px 0 16px }

#contact p {
	margin: 1em 0;
	clear: left;
	}

option { padding: 0 2px }

fieldset {
	border: none;
	float: left;
		}

fieldset#info { width: 320px }
fieldset#interests { width: 200px; margin-left: 15px }

#contact label {
	float: left;
	clear: left;
	width: 8em;
	text-align: right;
	margin: 0 .5em 0 0;
	}

#contact label.inline {
	width: auto;
	text-align: left;
	display: inline;
	}

#contact label.block {
	float: none;
	text-align: left;
	width: auto;
	display: block;
	}

#contact label.checkbox {
	width: auto;
	text-align: left;
	text-indent: -2em;
	padding-left: 2em;
	}

.error {
	font-weight: bold;
	color: #c00;
	}

/*	==================================================
	Homepage Special
	--------------------------------------------------	*/

.image {
	text-indent: -5000px;
	background-repeat: no-repeat;
	background-position: left top;
	}

#home-intro {
	position:relative;
	right: 2px;
	width:540px;
	height:219px;
}

#stop {
	position:absolute;
	background-image: url(/i/stop.gif);
	left:0px;
	top:0px;
	width:186px;
	height:31px;
}

#intro-image, #intro-image2, #intro-image3 {
	position:absolute;
	display: block;
	left:186px;
	top:0px;
	width:354px;
	height:219px;
}

#intro-image { background-image: url(/i/intro-image.jpg) }
#intro-image2 { background-image: url(/i/intro-image-2.jpg); z-index: 2 }
#intro-image3 { background-image: url(/i/intro-image-3.jpg); z-index: 3 }


#take-a-deep-breath {
	position:absolute;
	background-image: url(/i/take-a-deep-breath.gif);
	left:0px;
	top:31px;
	width:186px;
	height:77px;
}

#relax {
	position:absolute;
	background-image: url(/i/relax.gif);
	left:0px;
	top:109px;
	width:186px;
	height:34px;
}

#discover-the-benefits {
	position:absolute;
	left:0px;
	top:143px;
	width:186px;
	height:76px;
}

#discover-the-benefits a {
	display: block;
	background-image: url(/i/discover-the-benefits-2up.gif);
	width:186px;
	height:76px;
}

#discover-the-benefits a:hover { background-position: left -76px }

/*	==================================================
	Other page-specific styles
	--------------------------------------------------	*/

#signature {
	background: url(/i/sandy-sig-green.gif) no-repeat left top;
	padding-top: 80px;
	position: relative;
	left: -30px;
	padding-left: 30px;
	}

#aboutpage {
	background: url(/i/leafwoman-big.jpg) no-repeat left top;
	}

#aboutpage p { margin: 0 36px 1em 192px }

.categorycontent li, .promotions li { 
	list-style: disc inside;
}

.products .menuitem ul li {
	list-style: disc inside;
	color: #a2a231;
}

.products strong { color: #a2a231; }

#image_list {
	/*float: left;*/
}

#image_list a {
	display: block;
}

#image_list .focused img {
	outline: 3px solid #423420;
}

#image_list div.image, #image_list div.image-end {
	width: 75px;
	float: left;
	padding-bottom: 10px;
	margin-right: 10px;
	text-indent: 0;
	position: relative;
}

#image_list div.image-end {
	margin-right: 0;
}

#images_large {
	text-align: center;
	width: 500px;
}

#images_large div.large-image {
	display: none;
}

#images_large div.first {
	display: block;
}

.video_play_overlay {
	width: 23px;
	height: 24px;
	position: absolute;
	right: 5px;
	top: 47px;
	background: url("/i/video_play_overlay.png") no-repeat top left;
}

.pagination {
	margin: 0 auto 20px auto;
	text-align: center;
}

/* Products */

.product_list {
	float: left;
/*	padding: 24px 32px 13px 36px;*/
	padding:0 16px 13px 36px;
}

.product_list a {
	display: block;
}

.product_list a.focused {
	outline: 3px solid #423420;
}

.product_list div.product, .product_list div.product-end {
	width: 160px;
	float: left;
	padding-bottom: 10px;
	margin-right: 10px;
	text-indent: 0;
	text-align: center;
}

.product_list div.product-end {
	margin-right: 0;
}

/* contact */

#contact p.warning {
	font-size: 11px;
	color: #AF0007;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 10px;
	padding: 2px 2px 2px 90px;
/*	background-color: #F7F7EF;*/
}

.messageSuccess { font-weight: bold; color: green;}
.messageWarning { font-weight: bold; color: red;}