/* initial styles, to remove default margin/padding across browsers */
html, body, div, ul, h1, h2, h3, h4, p, form, dl, img, form, input, select, textarea { margin: 0; padding: 0; }
/* BASIC LAYOUT */
body { font-family: verdana, arial, sans-serif; color: #000; font-size: 12px; margin: 0px; background: #B10000; text-align: center; background: white; }
#bgredbar { position: absolute; top: 40px; left: 0; width: 100%; height: 70px; background: url(../images/bg_red_bar.gif) repeat-x center top; }
#header { width: 740px; position: relative; text-align: left; margin-left: auto; margin-right: auto; height: 132px; font-size: 10px; }
#content { width: 740px; position: relative; text-align: left; margin-left: auto; margin-right: auto; background: transparent url(../images/bg_content_grey.gif) no-repeat left bottom; padding: 15px 0 30px 0; }
#questcontent { width: 740px; position: relative; text-align: left; margin-left: auto; margin-right: auto; background: transparent url(../images/bg_content.gif) no-repeat left bottom; padding: 15px 0 30px 0; }
#footer { width: 740px; position: relative; text-align: left; margin-left: auto; margin-right: auto; margin-top: 20px; }
/*	HEADER SPECIFIC STYLES: These elements are postioned absolutely since #header is position relative. */
#header #logo { position: absolute; top: 32px; left: -47px;}
#header #navutility { position: absolute; top: 20px; right: 0; margin: 0; padding: 0; list-style: none; text-align: right; }
#header #navutility li { display: inline; margin-left: 8px; }
#header #navutility li a { font-family: arial, sans-serif; color: #000; font-size: 12px; letter-spacing: normal; text-decoration: none; font-weight:bold; }
#header #navbutton { position: absolute; top: 55px; right: 0; margin: 0; padding: 0; list-style: none; }
#header #navbutton li { float: left; width: 121px; height: 54px; margin-left: 16px; background-color: transparent; background-repeat: no-repeat; background-position: 0 0; }
#header #navbutton li a { display: block; height: 0; overflow: hidden; padding-top: 35px; background-color: transparent; background-repeat: no-repeat; background-position: 0 -50px; }
#header #navbutton li a:hover, #navbutton li a.on{ background-position: 0 0; }
#header #navbutton li.howdoesitwork { background-image: url(../images/btn_howitworks.gif); width: 150px; }
#header #navbutton li.howdoesitwork a { background-image: url(../images/btn_howitwork_hover.gif); }
#header #navbutton li.signmeup { background-image: url(../images/btn_getitnow.gif); width: 122px; }
#header #navbutton li.signmeup a { background-image: url(../images/btn_signmeup_hover.gif); }
#header #navbutton li.signmeup a.on { background-image: url(../images/btn_signmeup_on.gif); }
#header #memberlogin { margin: 0; padding: 0; position: absolute; top: 50px; right: -10px; }
#header #memberlogin td, #header #memberlogin td a {
	color: #fff;
}
#header #memberlogin .text { font-size:12px; border: 1px solid #BFBFBF; border-top-color: #A80307; border-left-color: #A80307; }
/* CONTENT SPECIFIC STYLES */
h1, h2, h3, h5 { letter-spacing: -1px; font-family: arial, sans-serif; }
h1 span, h2.sidemenu span, h2.sidelogin span { display: none; }
h2 { font-size: 19px; color: #484866; margin: 18px 0 20px; }
h2 a { text-decoration: none; }
h3 { font-size: 15px; letter-spacing: normal; }
H4 { font-family: Arial, Sans-Serif ; font-size: 16px; letter-spacing: normal; color: #ff6600; font-weight:  bolder }
H5 { font-size: 12px; letter-spacing: normal; color: #eaedef }
p, ul, ol { margin-bottom: 15px; }
p { text-align:justify; }
ul { margin-left: 16px; }
a { color: #2e4754;/*#4045a3;*/ }
.wrapcopy { background-color: #fff;/*#edeeef;*/ border-left: 1px solid #dbdbdb; border-right: 1px solid #dbdbdb; }
.columns { margin-left: 20px; }
.columns td { vertical-align: top; padding: 25px 20px 0 0; background-color: #fff;/*#edeeef;*/ color: #000; line-height: 140%; }
.columns td.rules { vertical-align: top; padding: 0 0 0 0; background-color: #fff;/*#edeeef;*/ color: #2e4754; line-height: 140%; }
.columns td table td { padding: 5px; }
.columns td .btn { text-align: right; }
.columns td .rules td { background-color:transparent; }
.fullwidth { width: 698px; }
.callout { width: 135px; margin: 45px 0 25px 0; padding: 0 0 20px 20px; border-left: 1px solid #c4c4cd; color: #484866; font-size: 13px; }
.callout h2 { color: #95a4bb; margin: 0 0 10px 0; }
.callout p { margin-bottom: 25px; }
.cleaner { clear: both; height: 1px; font-size: 1px; border: none; margin: 0; padding: 0; background: transparent; }
.gradient { color: #fff; background: url(../images/gradient.jpg) no-repeat left top; padding-top: 10px; padding-bottom: 10px; padding-left: 5px; }
.header td { background-color: #95a4bb; color: #fff; }
.light td { background-color: #e8e9e9; }
.dark td { background-color: #e0e0e0; }
.small { font-size: 9px; }
td.red { color: #E10509; }
.error { color: #E10509; font-weight: bold;  }
.spotlight {
	font-size: 9px;
	width: 150px;
	margin-top: 15px;
	border: 3px dashed #dbdbdb;
	background: #EAEAEA;
}
h2.sidemenu { margin: 0; }
h2.sidemenu img { width: 166px; height: 61px; }
#sidemenu { margin: 0; list-style: none; border-left: 1px solid #dbdbdb; background-color: #eaedef; width: 166px; }
#sidemenu li { width: 166px; background: transparent url(../images/sidemenu_li_shadow.gif) repeat-y top right; }
#sidemenu a { display: block; width: 141px; padding: 5px 3px 4px 17px; text-decoration: none; font-size: 11px; color: #82898d; font-weight: bold; line-height: normal; }
#sidemenu ul { margin: 0; }
#sidemenu li li { list-style: none; background: none; }
#sidemenu li li a { font-weight: normal; padding: 3px 4px 2px 17px; }
#sidemenu li li a:hover, #sidemenu li li a.on, #sidemenu li li a.on:hover { background: none; color: #ff6600; }
#sidemenu a:hover { background: #ff6600 url(../images/sidemenu_bg_hover.gif) no-repeat 7px 8px; color: #fff; }
#sidemenu a.on, #sidemenu a.on:hover { background: #ff6600 url(../images/sidemenu_bg_hover.gif) no-repeat 7px 8px; color: #fff; }
h2.sidelogin { margin: 40px 0 0 0; }
.login td { vertical-align: bottom; font-size: 11px; padding: 0 10px 3px 0; font-weight: bold; }
.columns .login td { padding: 0 10px 3px 0; }
.login td a { color: #2e4754; font-size: 10px; font-weight: normal; }
.login .text { border: 1px solid #b6b7b7; font-size: 10px; color: #444; margin-top: 2px; }
.footnote { color: #869ca9; font-size: 10px; margin-bottom: 6px; line-height: normal; }
#footer { color: #646a6d; font-size: 10px; padding-bottom: 20px; }
#footer p { margin-bottom: 6px; line-height: normal; }
#footer a { color: #646a6d; }
.cleaner { clear: both; height: 1px; font-size: 1px; border: none; margin: 0; padding: 0; background: transparent; }
#howdoesitworktop { margin-top: 0px; padding-bottom: 20px; width: 740px; /*height: 208px;*/ background: transparent url(../images/howdoesitwork/bg_header.gif) no-repeat top left; color: #484866; }
#howdoesitworktop h1 { padding: 55px 0 20px 20px; }
#howdoesitworktop p { margin: 0 0 25px 20px; width: 500px; /*height: 55px;*/ }
#howdoesitworktop .ruler { clear: left; }
.navbtn { margin-left: 15px; }
.navbtn td { width: 228px; height: 65px; padding-right: 12px; background-color: transparent; background-repeat: no-repeat; background-position: 0 0; }
.navbtn td a { display: block; height: 0; padding-top: 65px; overflow: hidden; background-color: transparent; background-repeat: no-repeat; background-position: 0 65px; }
.navbtn td a:hover, .navbtn td a.on { background-position: 0 0; }
.navbtn td.takecharge { background-image: url(../images/howdoesitwork/navbtn_takecharge.gif); }
.navbtn td.takecharge a { background-image: url(../images/howdoesitwork/navbtn_takecharge_hover.gif); }
.navbtn td.trackresults { background-image: url(../images/howdoesitwork/navbtn_trackresults.gif); }
.navbtn td.trackresults a { background-image: url(../images/howdoesitwork/navbtn_trackresults_hover.gif); }
.navbtn td.earnrewards { background-image: url(../images/howdoesitwork/navbtn_earnrewards.gif); }
.navbtn td.earnrewards a { background-image: url(../images/howdoesitwork/navbtn_earnrewards_hover.gif); }
.steps { list-style: none; margin: 0 0 0 0; }
.steps li { border-bottom: 2px dotted #8c8c8c; height: 40px; background-repeat: no-repeat; }
.steps li a { display: block; width: 213px; font-size: 0; height: 0px; padding-top: 40px; overflow: hidden; text-decoration: none; background-repeat: no-repeat; background-position: 0 40px;}
.steps li a:hover, .steps li a.on { background-position: 0 0; }
.steps li.signup { background-image: url(../images/howdoesitwork/btn_hiw_tc_1.gif); }
.steps li.snapshot { background-image: url(../images/howdoesitwork/btn_hiw_tc_2.gif); }
.steps li.fitness { background-image: url(../images/howdoesitwork/btn_hiw_tc_3NEW.gif); }
.steps li.signup a { background-image: url(../images/howdoesitwork/btn_hiw_tc_1_OVER.gif); }
.steps li.snapshot a { background-image: url(../images/howdoesitwork/btn_hiw_tc_2_OVER.gif); }
.steps li.fitness a { background-image: url(../images/howdoesitwork/btn_hiw_tc_3NEW.gif); }
.steps li.getpoints { background-image: url(../images/howdoesitwork/btn_hiw_er_1.gif); }
.steps li.vitality { background-image: url(../images/howdoesitwork/btn_hiw_er_2.gif); }
.steps li.momentum { background-image: url(../images/howdoesitwork/btn_hiw_er_3.gif); }
.steps li.sanlam { background-image: url(../images/howdoesitwork/btn_hiw_er_4.gif); }
.steps li.getpoints a { background-image: url(../images/howdoesitwork/btn_hiw_er_1_OVER.gif); }
.steps li.vitality a { background-image: url(../images/howdoesitwork/btn_hiw_er_2_OVER.gif); }
.steps li.momentum a { background-image: url(../images/howdoesitwork/btn_hiw_er_3_OVER.gif); }
.steps li.sanlam a { background-image: url(../images/howdoesitwork/btn_hiw_er_4_OVER.gif); }
.steps li.lifezone { background-image: url(../images/howdoesitwork/btn_hiw_tr_1.gif); }
.steps li.healthzone { background-image: url(../images/howdoesitwork/btn_hiw_tr_2.gif); }
.steps li.bioprac { background-image: url(../images/howdoesitwork/btn_hiw_tr_3.gif); }
.steps li.clinics { background-image: url(../images/howdoesitwork/btn_hiw_tr_4.gif); }
.steps li.coaching { background-image: url(../images/howdoesitwork/btn_hiw_tr_5.gif); }
.steps li.lifezone a { background-image: url(../images/howdoesitwork/btn_hiw_tr_1_OVER.gif); }
.steps li.healthzone a { background-image: url(../images/howdoesitwork/btn_hiw_tr_2_OVER.gif); }
.steps li.bioprac a { background-image: url(../images/howdoesitwork/btn_hiw_tr_3_OVER.gif); }
.steps li.clinics a { background-image: url(../images/howdoesitwork/btn_hiw_tr_4_OVER.gif); }
.steps li.coaching a { background-image: url(../images/howdoesitwork/btn_hiw_tr_5_OVER.gif); }

/* HOW DOES IT WORK - rolling over thumbnail exposes larger image */
a.zoom { position: relative; text-decoration: none; width: 227px; height: 182px; display: block; }
a.zoom:hover { border: none; /*note: IE needs this line for some unknown reason */ }
a.zoom img { position: absolute; bottom: 20px; left: 0; padding: 0; width: 223px; height: 162px; border: 2px solid #8c8c8c; }
a.zoom span { position: absolute; bottom: 0; left: 0; font-size: 10px; color: #8c8c8c; }
/** html a.zoom .full { top: -234px; }*/
a.zoom:hover img { width: 460px; height: 334px; }
a.off, p.off { display: none; }
.spotlight { background: #fff url(../images/bg_formarea.gif) no-repeat right bottom; color: #2e4754; }
.spotlight p { padding: 5px; }
/* FORMS */
.formarea { margin-bottom: 15px; padding: 10px 20px 10px 20px; background: #fff url(../images/bg_formarea.gif) no-repeat right bottom; color: #2e4754; }
.formarea h2 { margin-top: 30px; }
/*h2.formhead { clear: both; background: transparent url(../images/bg_h2_formhead.gif) no-repeat top left; color: #fff; margin: 0; height: 42px; padding: 13px 10px 0 20px; }*/
h2.formhead { clear: both; margin: 0; padding: 0; height: 46px; }
.gradient { color: #2e4754; background: #fff url(../images/bg_formarea_gradient.gif) no-repeat right bottom; }
.dropshadowbox { color: #2e4754; background: transparent url(../images/bg_formarea_dropshadowbox.gif) no-repeat right bottom; width: 294px; height: 70px; padding: 10px 20px 30px 20px; }
.formarea input, .formarea textarea, .formarea select { margin-top: 4px; color: #2e4754; }
.memberinfo { padding: 15px 10px 0 80px; background: transparent url(../images/icon_member.gif) no-repeat 6px bottom; border-bottom: 2px solid #b8c1cc; margin-bottom: 20px; }
.progressbar { margin: 0; }
.progressbar img { width: 698px; height: 19px; }
textarea { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
.textfull { width: 233px; }
.texthalf { width: 113px; }
.text1quarter { width: 53px; }
.text3quarters { width: 173px; }
.text1third { width: 73px; }
.text2thirds { width: 153px; }
.selectfull { width: 237px; }
.selecthalf { width: 117px; }
.select1quarter { width: 57px; }
.select3quarters { width: 177px; }
.select1third { width: 77px; }
.select2thirds { width: 157px; }
.textareahuge { width: 460px; height: 80px; }
.textarealegal { width: 460px; height: 140px; margin-bottom: 3px; padding: 5px; }
.textareafull { width: 233px; }
.textareahalf { width: 113px; }
.textarea1quarter { width: 53px; }
.textarea3quarters { width: 173px; }
.textarea1third { width: 73px; }
.textarea2thirds { width: 153px; }
/* FAQ header */
#title { color: #ff6600; }
#previous { margin-bottom: 30px; }
.item strong {
	float: left;
	width: 80px;
	margin-bottom: 20px;
}
#menuheaderfaq 
{
	background-image:url(../../faq/helpful_links_health.gif);
	height: 212px;
	width: 169px;
}
#faqmenu a 
{ position:absolute;
	height: 25px;
	width: 88px;
	color: White;
	font-weight:bold;
	text-decoration: none;
}
#faqmenu a i { visibility:hidden; }
a#healthzone { top: 167px; left: 65px;}
a#lifezone { top: 193px; left: 65px;}
a#gozone { top: 219px; left: 65px;}
a#language { top: 245px; left: 65px;}
a#legal { top: 271px; left: 65px;}
a#products { top: 297px; left: 65px;}
#menuheaderproduct
{
	background-image:url(../../products/helpful_links_active.gif);
	height: 155px;
	width: 170px;
}
#productmenu a 
{ position:absolute;
	height: 30px;
	width: 120px;
	color: White;
	font-weight:bold;
	text-decoration: none;
}
#productmenu a i { visibility:hidden; }
a#active { top: 167px; left: 66px;}
a#assessment { top: 194px; left: 66px;}
a#vooma { top: 231px; left: 66px;}
#menuheaderhiw
{
	background-image:url(../../howdoesitwork/helpful_links_hiw.gif);
	height: 131px;
	width: 181px;
}
#howitworksmenu a 
{ position:absolute;
	height: 25px;
	width: 100px;
	color: White;
	font-weight:bold;
	text-decoration: none;
}
#howitworksmenu a i { visibility:hidden; }
a#trackresults { top: 167px; left: 65px;}
a#healthzone2 { top: 193px; left: 65px;}
a#lifezone2 { top: 219px; left: 65px;}