@import url(facebox.css);

/* 

Tri-Animals
Jessica Caldwell, 2009

Colors: 
	#333 (grey)
	#713e61 (purple)
	#556745 (green)

Table of Contents

1. MAIN SHELL
	a. main navigation
2. HOME FEATURE
	a. quote
	b. buttons
3. HOME CONTENT
	a. spray bottle
	b. callouts
4.  INTERIOR PAGES
	a. uses
	b. ingredients
	c. ingredients
	d. purchase
5.  CONTACT FORM


*/

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
}
html, body {
	height: 100%;
}
body {
	font: normal 12px/16px Arial, Helvetica, sans-serif;
	color: #333;
}
a, a:visited {
	text-decoration: underline;
	outline: none;
	color: #713e61;
}
a:hover {
	text-decoration: none;
}
img {
	border: none;
}
.left {
	float: left;
}
.right {
	float: right;
}
.clr {
	clear: both;
}



/* 1. MAIN SHELL */

#container {
	margin: 0 auto -55px auto;
	background: url(../img/bg_header-tile.gif) 0 0 repeat-x;
	position: relative;
	width: 100%;
	min-height:100%;
  	height:auto !important; /* fix for IE6 */
  	height:100%;
}
#wrapper {
	margin: 0 auto;
	width: 980px;	
}
#top-nav {
	margin: 10px 0 0 0;
	color: #FFF;
	float: right;
}
#top-nav a {
	padding: 0 5px;
	color: #FFF;
	text-decoration: none;
}
#top-nav a:hover {
	text-decoration: underline;
}
#logo {
	float: left;
}
#feature {
	margin: 0 0 10px 0;
}
.clr-foot{
	clear:both;
	height: 55px;
}
#footer {
	padding: 10px 0 0 0;
	background: #0f324f;
	color: #FFF;
	text-align: center;
	width: 100%;
	height: 55px;
}
#footer p {
	padding: 0 0 10px 0;
}
#footer a {
	padding: 0 10px;
	color: #FFF;
}
#footer a.site {
	padding: 0;
	color: #FFF;
}

/* ---------------- a. main navigation ---------------- */
#nav {
	padding: 0 15px 0 0;
	float: right;
}
#nav ul {
	list-style-type: none;
}
#nav li {
	padding: 0 5px 0 0;
	float: left;
}
#nav li a {
	color: #FFF;
	text-decoration: none;
}
#nav li.what-is a {
	padding: 10px 0 0 0;
	text-align: center;
	display: block;
	width: 148px;
	height: 34px;
}
#nav li.what-is a:hover,
#nav li.what-is a.current {
	background: url(../img/nav_what-is.gif) 0 0 no-repeat;
	text-decoration: none;
}
#nav li.uses a {
	padding: 10px 0 0 0;
	text-align: center;
	display: block;
	width: 49px;
	height: 34px;
}
#nav li.uses a:hover,
#nav li.uses a.current {
	background: url(../img/nav_uses.gif) 0 0 no-repeat;
	text-decoration: none;
}
#nav li.natural a {
	padding: 10px 0 0 0;
	text-align: center;
	display: block;
	width: 137px;
	height: 34px;
}
#nav li.natural a:hover,
#nav li.natural a.current {
	background: url(../img/nav_natural.gif) 0 0 no-repeat;
	text-decoration: none;
}
#nav li.testimonials a {
	padding: 10px 0 0 0;
	text-align: center;
	display: block;
	width: 95px;
	height: 34px;
}
#nav li.testimonials a:hover,
#nav li.testimonials a.current {
	background: url(../img/nav_testimonials.gif) 0 0 no-repeat;
	text-decoration: none;
}
#nav li.purchase a {
	padding: 10px 0 0 0;
	text-align: center;
	display: block;
	width: 78px;
	height: 34px;
}
#nav li.purchase a:hover,
#nav li.purchase a.current {
	background: url(../img/nav_purchase.gif) 0 0 no-repeat;
	text-decoration: none;
}

/* ======================================================================== */

/* 2. HOME FEATURE */

#home {
	background: url(../img/bg_feature-home.gif) 0 0 no-repeat;
	width: 980px;
	height: 440px;
}
#home .inner {
	margin: 0 auto;
	padding: 20px 0 0 0;
	background: url(../img/bg_feature-home-in.jpg) 0 0 no-repeat;
	width: 940px;
	height: 374px;
}

/* ---------------- a. quote ---------------- */
#home .alpha {
	padding: 0 0 0 20px;
	width: 413px;
	float: left;
}

#home .alpha p {
	padding: 10px 0;
	font: normal 16px/24px Arial, Helvetica, sans-serif;
	color: #713e61;
}

/* ---------------- b. buttons ---------------- */
#home .beta {
	padding: 40px 40px 0 0;
	float: right;
}
#home .beta a.message {
	background: url(../img/b_message.gif) 0 0 no-repeat;
	text-indent: -999999px;
	display: block;
	width: 380px;
	height: 40px;
}
#home .beta a.message:hover {
	background-position: 0 -40px;
}
#home .beta a.learn {
	margin: 30px 0 0 0;
	background: url(../img/b_learn-more.gif) 0 0 no-repeat;
	text-indent: -999999px;
	display: block;
	width: 380px;
	height: 40px;
}
#home .beta a.learn:hover {
	background-position: 0 -40px;
}

/* ======================================================================== */

/* 3. HOME CONTENT */


.gamma {
	padding: 0 0 0 20px;
	width: 380px;
	float: left;
}
.gamma p {
	padding: 0 0 10px 0;
}
.gamma a.order {
	margin: 10px 0 0 0;
	background: url(../img/b_order.gif) 0 0 no-repeat;
	text-indent: -999999px;
	display: block;
	width: 380px;
	height: 40px;
}
.gamma a.order:hover {
	background-position: 0 -40px;
}

/* ---------------- a. spray bottle ---------------- */
.delta {
	padding: 0 0 0 25px;
	width: 103px;
	float: left;
}
.delta img {
	top: 460px;
	position: absolute;
}

/* ---------------- b. callouts ---------------- */
.epsilon {
	padding: 0 20px 0 0;
	width: 400px;
	float: right;
}
.epsilon p {
	padding: 0 0 10px 10px;
}
.box-wrap {
	margin: 0 0 10px 0;
}
.box-inner {
	background: #556745;
	padding: 0 10px;
	color: #FFF;
}
.box-inner h2 {
	font-size: 16px;
}
.box-inner h2 a,
.box-inner h2 a:visited {
	color: #FFF;
	text-decoration: none;
}
.box-inner h2 a:hover {
	text-decoration: underline;
}
.box-inner p {
	padding: 5px 0;
	text-align: left;
}
.box-inner p a, .box-inner p a:visited {
	color: #FFF;
	text-decoration: underline;
}
.box-inner p a:hover {
	text-decoration: none;
}
.box-inner img {
	margin: 0 0 10px 0;
}
.box-inner img.uses {
	margin: 0;
}

/* ======================================================================== */

/* 4.  INTERIOR PAGES */

#interior {
	background: url(../img/bg_feature-inner.gif) 0 0 no-repeat;
	width: 980px;
	height: 299px;
}
#interior .inner {
	margin: 0 auto;
	width: 939px;
}


/* ---------------- a. uses ---------------- */
.zeta {
	padding: 0 0 0 20px;
	width: 514px;
	float: left;
}
.zeta h1 {
	padding: 0 0 10px 0;
	font-size: 18px;
}
.zeta h2 {
	padding: 0 0 10px 0;
	font-size: 14px;
}
.zeta p {
	padding: 0 0 10px 0;
}
.zeta ul {
	margin: 10px 0 0 0;
	list-style-type: none;
}
.zeta li {
	padding: 0 0 20px 20px;
	background: url(../img/icon_star.gif) 0 2px no-repeat;
}

/* ---------------- b. ingredients ---------------- */

.eta {
	padding: 0 26px 0 0;
	width: 340px;
	float: left;
}
.eta img {
	margin: 0 0 100px 0;
}
.theta {
	width: 580px;
	float: left;
}
.theta h2 {
	font-size: 14px;
}
.theta p {
	padding: 5px 0 20px 0;
}

/* ---------------- c. ingredients ---------------- */

.iota {
	padding: 0 20px;
	width: 319px;
	float: left;
}
.iota p.name {
	padding: 10px 0 0 160px;
}
.iota img {
	margin: 0 10px 0 0;
	border: 1px solid #556745;
	float: left;
}
.kappa {
	padding: 0;
	width: 260px;
	float: left;
}
.kappa .box-inner {
	padding: 0 10px 0 15px;
}
.lambda {
	padding: 0 0 0 20px;
	width: 319px;
	float: left;
}
.lambda p.name {
	padding: 10px 0 0 160px;
}
.lambda p.name2 {
	padding: 10px 0 0 0;
	text-align: right;
}
.lambda img {
	margin: 0 10px 0 0;
	border: 1px solid #556745;
	float: left;
}
.lambda img.left {
	border: none;
}
.lambda p.footnote {
	font-size: 10px;
	clear: both;
}

/* ---------------- d. purchase ---------------- */

.mu {
	padding: 0 0 0 20px;
	width: 280px;
	float: left;
}
.mu img {
	margin: 0 0 10px 0;
	width: 280px;
	border: 1px solid #556745;
}
.mu img.pay {
	margin: 10px 0 20px 0;
	border: none;
}
.mu h2 {
	padding: 0 0 10px 0;
	font-size: 14px;
}
.mu p {
	padding: 0 0 10px 0;
}
.nu {
	padding: 0 0 0 9px;
	float: left;
}
.nu .prod,
.nu .prod-2 {
	margin: 0 21px 21px 19px;
	width: 306px;
	height: 155px;
	float: left;
}
/* Below applies to IE6 Only */
/*\*/
* html .nu .prod,
.nu .prod-2 {
	margin: 0 21px 21px 8px;
	width: 306px;
	height: 155px;
	float: left;
}
/**/
.nu .prod-2 {
	margin: 0 0 21px 0;
	width: 306px;
	height: 155px;
	float: left;
}
.nu .prod .prod-wrap,
.nu .prod-2 .prod-wrap {
	background: #556745;
	color: #FFF;
	width: 296px;
	float: left;
}
.nu .prod .prod-wrap img,
.nu .prod-2 .prod-wrap img {
	margin: 0 10px 0 0;
	padding: 1px;
	float: left;
}
.nu .prod .prod-wrap h2,
.nu .prod-2 .prod-wrap h2 {
	padding: 15px 0 0 0;
	font-size: 24px;
}
.nu .prod .prod-wrap p,
.nu .prod-2 .prod-wrap p {
	padding: 15px 0;
}
.nu .prod .prod-wrap p.price,
.nu .prod-2 .prod-wrap p.price {
	padding: 0;
	font-size: 18px;
}
.nu .prod .prod-wrap .add,
.nu .prod-2 .prod-wrap .add {
	margin: -10px 20px 0 0;/margin: 0 20px 0 0;
	background: url(../img/b_add-to-cart.gif) 0 0 no-repeat;
	text-indent: -999999px;
	display: block;
	width: 126px;
	height: 33px;
	float: left;
}
.nu .prod .prod-wrap .add:hover,
.nu .prod-2 .prod-wrap .add:hover {
	background-position: 0 -33px;
}
.nu .prod .prod-cap,
.nu .prod-2 .prod-cap {
	float: right;
}
.nu p.right {
	padding: 0 0 20px 0;
}
.nu .cart {
	margin: 0 0 20px 0;
	background: url(../img/b_view-cart.gif) 0 0 no-repeat;
	text-indent: -999999px;
	display: block;
	width: 163px;
	height: 40px;
	float: right;
}
.nu .cart:hover {
	background-position: 0 -40px;
}
.nu  .checkout {
	margin: 0 0 0 10px;/margin: 0 20px 0 10px;
	background: url(../img/b_checkout.gif) 0 0 no-repeat;
	text-indent: -999999px;
	display: block;
	width: 163px;
	height: 40px;
	float: right;
}
/* Below applies to IE6 Only */
/*\*/
* html .nu  .checkout {
	margin: 0 10px 0 10px;
}
/**/
.nu .checkout:hover {
	background-position: 0 -40px;
}


.nu h2 {
	padding: 0 0 0 20px;
	font-size: 14px;
}
.nu ul {
	padding: 20px 0 0 20px;
	list-style-type: none;
	float: left;
}
.nu li {
	padding: 0 0 10px 20px;
	background: url(../img/icon_star.gif) 0 2px no-repeat;
}



/* ======================================================================== */

/* 5.  CONTACT FORM */

fieldset {
	margin: 10px 0 0 0;
	border: 0;
}
fieldset ul {
	list-style-type: none;
}
fieldset li {
	padding: 0 0 10px 0;
}
fieldset label {
	padding: 0 10px 0 0;
	text-align: right;
	display: block;
	width: 90px;
	float: left;
}

fieldset li .submit {
	margin: 0;
	background: url(../img/b_submit.gif) 0 0 no-repeat;
	text-indent: -999999px;
	display: block;
	width: 126px;
	height: 33px;
	float: left;
}
fieldset li .submit:hover {
	background-position: 0 -33px;
}