/*-----------------------------------------------------------------------------
Prototype Style Sheet (empty commented stylesheet)

version:   1.0
author:    shezad morani
website:   http://www.joistudios.com/
-----------------------------------------------------------------------------*/

/* =General
-----------------------------------------------------------------------------*/
html {
height: 100%;
}

/* Remove padding and margin */
* {
margin: 0;
padding: 0;
}

a img, #mainContent a img {
border: none;
}

body {
min-height: 101%;
text-align: center;
background-color: #adbf83;
font-size: 76%;
}

#container {
margin: 12px auto 0;
width: 850px;
text-align: left;
background-color: #d6dfc1;
}

#header {
background: #f7f9f3 url(../img/headerTop.gif) no-repeat top left;
height: 150px;
padding-top: 10px;
padding-left: 34px;
}

#content_container {
background: url(../img/contentTop_bg.gif) no-repeat top left;
margin: 10px 8px 0 8px;
padding-top: 15px;
clear: both;
}

#content {
background: url(../img/content_bg.gif) repeat-y top left;
height: 100%;
padding-bottom: 12px;
font-size: 1em;
line-height: 1.5em;

}

#footer {
margin: 0 auto;
width: 850px;
background: url(../img/footerbg.gif) no-repeat top left;
padding-top: 28px;
}

#footer a {color: #000;}

#footer a:hover {color: #C51230;}

/* Put it back on certain elements */
#spotlight p {

}

.left {
float: left;
}

.right {
float: right;
}

.spotFooter {
margin: 0 0 0 8px ;
padding: 0;
}

/* Class for clearing floats */
.clear {
clear:both;
}


/* Remove border around linked images */
img {
border: 0;
}


/* =Typography
-----------------------------------------------------------------------------*/

body {
  	font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}


/* =Headings
-----------------------------------------------------------------------------*/

h1.logo {
float: left;
text-indent: -5000px;
background: url(../img/logo.gif) no-repeat top left;
height: 81px;
width: 234px;
margin: 0;
}

#spotlight h1 {
color: #37939b;
font-size: 1.3em;
font-weight: bold;
margin-bottom: 0.5em;
}

.check {
background: url(../img/headings/check.png) no-repeat center left;
padding: 5px 0 5px 24px;
}

.below {
padding: 10px 0;
}

.below a{
background: url(../img/headings/btn_arrowDown.png) no-repeat top left;
padding: 10px 0 10px 50px;
width: 211px;
position: absolute;
top: 190px;
}

.forward a {
background: url(../img/headings/btn_arrowFwd.png) no-repeat top left;
padding: 10px 0 10px 50px;
width: 211px;
}

#spotlight .forward a {
position: absolute;
top: 190px;
}

#content .forward {
background: url(../img/headings/btn_arrowFwd.png) no-repeat top left;
margin-left: 26px;
margin-top: 1em;
width: 211px;
margin-bottom: 2em;
padding: 10px 0 10px 50px;
}

#content .forward a {
background: none;
padding: 10px 80px 10px 0;
}

#mainContent h1 {
color: #e09952;
font-weight: bold;
font-size: 1.4em;
margin: 25px 26px 1em 26px;
}

#mainContent h2 {
color: #38939B;
font-weight: bold;
font-size: 1.1em;
margin: 25px 26px 0.5em 26px;
}

#sidebar h2 {
padding: 9px 0 10px 30px;

}

#sidebar h2.title {
color: #37939b;
font-size: 1.4em;
font-weight: bold;
}

#sidebar h2.korey {
margin-top: 0px;
}

/* =Links
-----------------------------------------------------------------------------*/

#header a {
cursor: pointer;
}


h2.below a, h2.forward a {
text-decoration: none;
color: #663700;
font-size: 0.75em;
}

#mainContent h2.below a, #mainContent h2.forward a {
font-size: 1em;
color: #663700;
}


h2.below a:hover, h2.forward a:hover {
color: #37939b;
}

#content p a {
color: #37939b;
}

#content p a:hover {
color: #E09952;
}

/* =Branding
-----------------------------------------------------------------------------*/


/* =Header
-----------------------------------------------------------------------------*/

img.wisdom {
float:right;
padding-top: 10px;
}


/* =Main Nav
-----------------------------------------------------------------------------*/
#nav {
font-size: 1.2em;
float: left;
margin-top: 30px;
padding-bottom: 20px;
}



#nav li {
display: inline;
background: url(../img/nav_divider.gif) no-repeat top right;
padding: 0 20px 0 10px;
}

#nav li.last {
background: none;
padding-right: 0;
}

#nav a {
color: #663700;
text-decoration: none;
padding-bottom: 5px;
}

#nav a:hover, #nav a:active, a#selected {
color: #327a80;
background: url(../img/nav_underline.gif) no-repeat bottom center;

}



/* =Spotlight
-----------------------------------------------------------------------------*/

#spotlight_container {
margin: 0 8px;
background: url(../img/spot_footerbg.gif) no-repeat bottom left;
padding-bottom: 10px;

}

#spotlight {
background: #d6dfc1 url(../img/spot_bg.gif) repeat-x top left;
min-height: 200px;
clear: both;
position: relative;
width: 100%;
color: #663700;
padding-top: 26px;
font-size: 0.9em;

}

.columns2{
float: left;
width: 524px;
padding-left: 26px;
background: url(../img/spotDivider.png) no-repeat right 10px;


}

.col2 {
float: right;
width: 249px;
padding-right: 5px;
}

.col1 {
width: 249px;
float: left;
background: url(../img/spotDivider.png) no-repeat right 10px ;
padding-right: 5px;
}

.col3 {
width: 262px;
float: right;
}

#spotlight p {
padding: 0 1em;
}



.spotProduct {
position: absolute;
top: 34px;
float: left;
}

.spotProduct2 {
position: absolute;
top: 84px;
float: left;
}

.spotquote {

}

.spotquote #quote {
	font-size: 1.75em;
	color: #56a2a4;
	background: url(../img/spotlight/openQuote.gif) no-repeat 40px top;
}

body#faq .spotquote #quote {
	font-size: 1.75em;
}

.spotquote #quote span.spotIndent {
padding: 0 1.5em 0 8em;
	background: url(../img/spotlight/closeQuote.gif) no-repeat right top;
}


.spotpic1 {
background: url(../img/spotlight/photo.png) no-repeat left 40px; 
}

#faq .spotpic1, #resources .spotpic1, #cardForm .spotpic1, #about .spotpic1 {
position: relative;
top: 20px;
}

#faq .spotpic1 {
background: url(../img/spotlight/faq.png) no-repeat 0 40px; 
}

#faq .quoteSource {
float: left;
margin-left: 200px;
}

#resources .spotpic1, #cardForm .spotpic1 {
background: none;
}

p.shortSpot {
width: 300px;
margin-left: 150px;
}

.quoteSource {
float: right;
margin-right: 40px;
min-height: 80px;
}

/*Spotlight Products*/
#products #spotlight h1 {
font-size: 1.5em;
margin-bottom: 0.5em;
position: relative;
top: -10px;
}

#products #spotlight p {
padding-left: 0;
}

#products .columns2 {
width: 820px;
background: none;
margin-left: -10px;
}

#products .col1 {
float: none;
width: 400px;
padding: 0;
background: none;
}

#products .col2 {
float: right;
width: 400px;
padding: 0;
background: none;
}

#products .col1 .right, #products .col2 .right {
padding-right: 120px;
position: relative;
margin-top: 0.5em;
top: 10px;
left: 100px;
}

#products ul li {
list-style-type: none;
}

#products ul#spotBenefits li {
list-style-type: circle;
margin-left: 1.35em;
}

ul#spotPricing {
padding-bottom: 1em;
font-weight:bold;
font-size: 1.2em;
color: #389b87;
}

ul#spotPricing li span {
position: absolute;
right: 70px;
}

ul#spotBenefits {
clear: both;
}


/* =Main Content
-----------------------------------------------------------------------------*/
#mainContent {
float: left;
width: 574px;
}

#mainContent p, #mainContent ul, #mainContent ol, #mainContent td {
padding:  0.5em 26px;
font-size: 1.1em;
line-height: 1.6em;
}

#mainContent img {
border: 1px solid #f99d1c;
padding: 3px;
}

#mainContent form img {
border: none;
padding:0;
}

#mainContent img.right {
margin-left: 10px;
}

#mainContent ul  {
margin-left: 50px;
}

.drop {
float: left;
font-size: 400%;
line-height: 0.5em;
margin: 0 0 10px;
padding: 4px 5px;
}

#faq #mainContent p strong {
color: #38939B;
}

body#resources ul.resourcesNav li, body#resources ul.resourcesNav li a {
display: inline;
color:#E09952;
font-size: 1em;
font-weight: bold;
padding: 0 0.1em;
}

body#resources #mainContent ul {
margin-left: 20px;
}

body#resources #mainContent ul li {

}

body#resources #mainContent .resourcesNav {
margin-bottom: 20px;
}

body#resources #mainContent ul.books {
width: 350px;
padding-top: 20px;
margin-left: 0;
}

ul.books li {
margin-bottom: 10px;
width: 175px;
padding-bottom: 10px;
list-style-type: none;
color: #37939B;
}


ul.books li.left {
clear: both;
}

h2#links {
padding-top: 2em;
}

ul.links li strong {
color: #37939B;
} 

#mainContent a {
color: #37939B;
}

#mainContent a:hover, #mainContent a:active, body#resources ul.resourcesNav li a:hover, body#resources ul.resourcesNav li a:active {
color: #E09952;
}

.notice {color: #37939B;}
.notice2 {color: #E09952; font-weight: bold;}

/* mainContent Products */



#products #mainContent table {
clear: both;
margin-left: 20px;
}

#products #content .firstpad {

}

#products #mainContent table th {
text-align: center;
background-color: #E3F1E4;
border: 0 solid white;
border-width: 5px;
}

#products #mainContent table td{
padding: 0.5em 10px;
}

#products #mainContent table tr.topLine td {border-top: 1px solid #ccc;}

span.highlight {color: #A28159;}

#products .spotProduct2 {
top: 34px;
}

#products .product {
margin-top: 20px;
border-top: 8px solid #D6DFC1;
clear: both;
position: relative;

}

#products #mainContent h2#healthFile {
background: url(../img/products/healthFile.png) no-repeat top left;
padding-left: 180px;
padding-top: 20px;
height: 120px;
float: left;
font-size: 1.8em;
line-height: 1em;
margin: 25px 26px 1em;
margin-bottom: 0;
padding-bottom: 0;
}

#products #mainContent h2#lifeFile {
background: url(../img/products/lifeFile.png) no-repeat top left;
padding-left: 170px;
padding-top: 20px;
height: 120px;
float: left;
font-size: 1.8em;
line-height: 1em;
margin: 25px 26px 1em;
margin-bottom: 0;
padding-bottom: 0;

}

#products .promo {
position: absolute;
top: 30px;
right: 10px;
}

#products .promo img {
float: right;
clear: both;
}

#products #mainContent p.sub {
position: relative;
left: -165px;
top: -10px;
}

#products #mainContent img.left {
clear: both;
}

#products #mainContent img {
border:none;
}

#products form {
margin: 0 25px;
padding-top: 10px;
}

#products .formTop {
position: absolute;
left: 360px;
margin-top: 15px;
}

#products .productVar {
border: 1px solid #37939B;
border-width: 0 0 1px 0;
margin: 0 30px;
padding: 0 0 10px 0;
}

#products .productVar2 {
border: none;
margin: 0 30px;
padding: 0 0 10px 0;
}

#products .productVar ul li {
list-style-type: disc;
}

.big {
font-size: 1.4em;
}

#products .preorder {
position: absolute;
top: 40px;
left: 670px;
z-index: 100;
}

#products #mainContent p {
margin: 0.5em 26px;
padding: 0;
}

#products #mainContent h2 {
font-size: 1.3em;
margin: 25px 0 0.5em 0;
}

#products #mainContent .productVar p, #products #mainContent .productVar2 p {
padding: 0.5em 0;
margin: 0;
}

#products #mainContent ul {
margin-left: 10px;
}

#spotlight .ec_ejc_thkbx {
position: absolute;
top: 200px;
right: 30px;
}

.viewCart {
position: relative;
top: 107px;
left: 260px;
}

.cartKorey {
position: relative;
top:-80px;
left: 20px;
float:left;
}

#EJEJC_window {
padding: 10px;
}

#tdPmnt b{
color: black !important; font-size: 1.75em !important;
}


/*---------- bubble tooltip -----------*/
a.tt{
    position:relative;
	z-index:24;
    color:#3CA3FF;
	font-weight:bold;
    text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:relative;
    top:70px; left:450px;
	padding: 15px 0 0 0;
	width:200px;
	color: #993300;
    text-align: center;
	filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
}
a.tt:hover span.top{
	display: block;
	padding: 30px 8px 0;
    background: url(../img//tooltip/bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url(../img//tooltip/bubble_filler.gif) repeat bottom; 
}
a.tt:hover span.bottom{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
    background: url(../img//tooltip/bubble.gif) no-repeat bottom;
}

/* =Sidebar
-----------------------------------------------------------------------------*/

#sidebar {
margin-left: 581px;
}

#sidebar p {

}

#sidebar h2.title {
padding: 9px 0 20px 30px;
}

.testimonials {
	padding: 0 0px 0 22px;
	margin-bottom: 20px;
	width: 210px;

}

.testimonials blockquote {
width: 210px;
background: #edf4ef url(../img/roundBox/top.gif) no-repeat top left;
}

.testimonials blockquote #quote {
padding: 20px 20px 10px 20px;
background: url(../img/roundBox/endquote.gif) no-repeat 170px bottom;
color: #809059;
}

.testimonials blockquote #author {
padding: 0 0 10px 20px;
color: #444;
font-weight: bold;
background: url(../img/roundBox/btm.gif) no-repeat bottom;
}

.cardBox {
margin: 20px 0 0 22px;
background:  url(../img/sidebar/emergency/bottom.gif) no-repeat bottom left;
width: 210px;

}

.cardBox p {
background: #e3f1e4 url(../img/sidebar/emergency/top.gif) no-repeat top left;
padding: 20px 20px 40px 20px;

}

#sidebar h2.forward {
margin: 0;
background-image: url(../img/headings/btn_arrowFwdRed.png);
width: 161px;
}


#sidebar h2.card {
background: url(../img/sidebar/card.gif) no-repeat left center;
margin: 0px 0 0 30px;
padding-left: 85px;
}

.koreyBox {
margin: 0 22px 0;
background: #e0efcf url(../img/sidebar/korey/top.jpg) no-repeat top left;
}

.koreyBox p {
background: url(../img/sidebar/korey/bottom.jpg) no-repeat bottom right;
padding: 20px 20px 115px 20px;
}

#sidebar a h2 {
text-decoration: none;
cursor: pointer;
}


/* =Footer
-----------------------------------------------------------------------------*/

#footer {
clear: left;
padding: 20px 0;
}

#footer p {
padding-top: 2em;
line-height: 0;
font-size: 0.9em;
}

/* =Forms
-----------------------------------------------------------------------------*/

/* Removes fieldset borders. even on Opea 7 */
fieldset {
  	border: 1px solid transparent;
}


/* =Tables
-----------------------------------------------------------------------------*/

table { 
  	border-spacing: 0;
	border-collapse: collapse;
}

td {
  	text-align: left;
	font-weight: normal;
}



/* =Misc 1
-----------------------------------------------------------------------------*/
#content .firstpad {
margin-top: 9px;
border: none;
}


/* =Products
-----------------------------------------------------------------------------*/

#products img.left {
border: none;
}

/* =Card Form
-----------------------------------------------------------------------------*/

#cardForm #mainContent ol {
margin-left: 20px;
}

#cardForm #mainContent form {
width: 500px;
}

#cardForm #mainContent table {
width: 500px;
}


#cardForm #mainContent table h2 {
margin-left: 0;
margin-right: 0;
}

#cardForm #mainContent table tr {
width: 500px;
}

#cardForm #mainContent table.short tr td, #cardForm #mainContent table.short tr td input {
width:100px;
padding-right: 0;
}


input#Submit1 {
margin: 20px;
}

#cardForm .checkbox {
padding-right: 10px;
width: 10px; 
}

#cardForm .checkboxTxt {
padding-left:0;
}

#sendFriend #mainContent td {
padding: 0.5em 15px;
width: 400px;
}