/* Copyright 2009 - Free Aloe Drink */
@charset "UTF-8";
/*	BODY  */
a img { border-style: none; }
img.center {display: block; margin-left: auto; margin-right: auto; }
body { margin: 0; padding: 0; background: #fff url(images/bg.gif) repeat-x; font: normal .7em Tahoma, Verdana, Arial, Helvetica, Sans-Serif; line-height: 1.6em; color: #333; }
.style1 {color: #FFFFFF; }
.style3 {color: #FF0000; font-weight: bold; } /* Red Bold */
.style4 {color: #FFFF00; font-weight: bold; } /* Yellow Bold */
.style8 {font-size: .7em; }
.style9 {font-weight: bold; font-style: italic; } /*Bold Italic*/

/* LINKS AND HEADINGS STYLING */

a { color: #546F92; }
a:hover { color: #FF0000; }
h1  { font: bold 2.2em "Trebuchet MS", Helvetica, Sans-Serif; margin: 0; color: #0033FF; background-color:transparent; }
h2  { font: bold 1.4em "Trebuchet MS", Helvetica, Sans-Serif; }
h3 { clear: both; font-size: 1.1em; color: #000; background: #fff url(images/h3bg.gif) no-repeat center left; padding: 0 14px; margin: 0;}
h5 { color: #0033FF; font-size: 20px; margin-bottom: 20px; line-height: 26px; }
.blue { color: #546F92; }
.image { float: left; border: 2px solid #e2e2e2; padding: 3px; margin: 0 15px 10px 0; }
.bot { font-size: .7em; }

/* CONTENT WRAPPER */

#main { width: 940px; margin: 25px auto 0 auto; }

/* TOP LEFT LOGO */

#logo {	float: left; padding: 10px 0 10px 10px; }
#logo h1 { color: #000; background: #fff; }

/* TOP RIGHT HORIZONTAL MENU */
	
#menu { float: right; background: #fff url(images/barul.gif) no-repeat bottom right; color: #808080; padding: 18px 1px 11px 0; margin: 0; text-transform: uppercase; }
#menu li { padding: 14px 18px 14px 18px; color: #808080; background: #fff url(images/bar.gif) no-repeat bottom left; display: inline; text-transform: uppercase; }
#menu li.active { background: #fff url(images/baractive.gif) no-repeat bottom left; color: #8D9CAF; font-weight: bold; padding: 14px 18px 14px 18px; margin: 0 1px 0 0; text-transform: uppercase; }
#menu li a { background: #f8f8f8; color: #808080; text-decoration: none; font-weight: bold; text-transform: uppercase;	} 	
#menu li a:hover { background: #fff url(images/baractive.gif) no-repeat bottom left; color: #FF0000; font-weight: bold; background: #f8f8f8; text-transform: uppercase; }

/* LEFT VERTICAL MENU */
	
#menu_left { float: left; margin: 0 0 6px 0; background: #C2CEDE; width: 250px; padding: 0 0 1px 0; border-bottom: 2px solid #e2e2e2; }
#menu_left li { list-style: none; }
#menu_left li a { display: block; color: #3F5B7F; border-bottom: #FF0099; background: #C2CEDE url(images/arrow.gif) no-repeat center left; width: auto; padding: 7px 0px 7px 23px; margin: 0 0 1px 0; font-weight: bold; text-decoration: none; }	
#menu_left li a:hover { font-weight: bold; background: #6600FF url(images/arrow.gif) no-repeat center left; color: #fff; }
#menu_left li.active a { font-weight: bold; background: #6600FF url(images/arrow.gif) no-repeat center left; color: #fff; }
#menu_left li ul li a { color: #3F5B7F; background: #C2CEDE url(images/arrow.gif) no-repeat center left; width: auto; padding: 7px 0px 7px 23px; margin: 0 0 1px 0; font-weight: bold; text-decoration: none; }	
#menu_left li ul li a:hover { font-weight: bold; background: #6600FF url(images/arrow.gif) no-repeat center left; color: #fff; }
 	

/* LEFT INTRO SIDE */	

#intro_left { clear: left; float: left;	width: 250px; color: #FFFFFF; margin: 0 0 1px 0; background-color: #8D9CAF; 	background-repeat: repeat-x; }
#intro_left a { color: #fff; }
#intro_left a:hover { color: #00FFFF; }
#intro_left p { padding: 14px 15px; text-align: justify; margin: 0; font-weight: bold; }
#intro_left h2 { font: bold 1.4em "Trebuchet MS", Helvetica, Sans-Serif; color:#FFFFFF; text-align:center; }

/* TOP RIGHT INTRO SIDE */
	
#intro_right { float: right; width: 380px; padding: 25px 280px 0 20px; background: #BCCEDA url(images/intro.jpg) no-repeat; color: #0033FF; font-weight: bold; margin: 0 0 6px 0; height: 176px;	border: 2px solid #e2e2e2; }
#intro_right h1 { margin: 0 0 20px 0; text-align: center; }
#intro_right .white { color: #FFF; background-color:transparent; font-weight: bold; font-size: large; }
#intro_right .sub { color: #0033FF; background-color:transparent; font-weight: bold; font-size: 1.2em; text-align: center; }

/* LEFT INTRO B SIDE TESTIMONIAL SECTION */	

#intro_leftb { clear: left; float: left; width: 250px; color: #FFFFFF; margin: 0 0 1px 0; background-color: #8D9CAF; 	background-repeat: repeat-x; }
#intro_leftb a { color: #fff; }
#intro_leftb a:hover { color: #00FFFF; }
#intro_leftb p { padding: 14px 15px; text-align:justify; margin: 0; font-weight:bold; font-style:italic; }
#intro_leftb h2 { font: bold 1.4em "Trebuchet MS", Helvetica, Sans-Serif; color:#FFFFFF; text-align:center; }

/* LEFT INTRO C SIDE ADDITIONAL INFO SECTION */

#intro_leftc { clear: left; float: left; width: 250px; color: #FFFFFF; margin: 0 0 1px 0; background-color: #8D9CAF; 	background-repeat: repeat-x; }
#intro_leftc a { color: #fff; font-weight: bold; font-style: italic; }
#intro_leftc a:hover { color: #00FFFF; }
#intro_leftc p { padding: 14px 15px; text-align:justify; margin: 0; font-style: normal; }
#intro_leftc h2 { font: bold 1.4em "Trebuchet MS", Helvetica, Sans-Serif; color:#FFFFFF; text-align:center; }
#intro_leftc h3 { clear: both; font-size: 1.1em; font-weight: bold; text-align: center; color: #FFFFFF; background: #8D9CAF; padding: 0 14px; margin: 0;}
#intro_leftc ul, #intro_leftc ol { text-align: justify; padding-right: 10px; } 

/* LEFT SIDE */
	
#left {	float: left; width: 250px; }
	.box {	padding: 4px 15px;	border: 1px solid #ccc;	text-align:justify;	margin: 0 0 10px 0; }
	.note {	padding: 15px 15px 20px 100px;	border: 1px solid #CFCB66;	text-align:justify;	margin: 0 0 5px 0;	background: #FFFFAD url(images/package.gif) no-repeat;	color: #585616; }

/* RIGHT SIDE */

#right { float: right; width:683px; }
	.leftcol { float: left; padding: 10px 15px; width: 285px; border: #ccc 1px solid; text-align: justify; margin: 0 0 10px 0; }
	.rightcol { float: right; padding: 10px 15px; width: 285px; border: #ccc 1px solid; text-align: justify; margin: 0 0 10px 0; }
	.full { float: right; padding:12px 15px; width: 652px; border: #ccc 1px solid;	font-size: 1.4em; text-align:justify;	margin: 0 0 10px 0;	}
	.full a { font-weight: bold; }
	.full h2 { text-align: center; }
	.full h3 { clear: both; font-size: 1.3em; color: #000; font: italic bold; background: #fff url(images/h3bg.gif) no-repeat center left ; padding: 0 14px; margin: 0;}
	.bgleft { float:left; font-size: 1.4em; padding:12px 15px; width:420px; border:#ccc 1px solid; text-align:justify; margin: 0 0 10px 0; }
	.bgleft h4 { text-align: center; color: #0033FF; border-bottom: dotted #CCCCCC; }
	.bgleft h5 { text-align: center; }
	.download { float:left; font-size: 1.2em; padding:12px 15px; width:420px; border:#ccc 1px solid; text-align: justify; margin: 0 0 10px 0; }
	.download h4 { text-align: center; color: #0033FF; border-bottom: dotted #CCCCCC; }
	.download h5 { text-align: center; }
	.smright { float:right; padding:10px 15px; width:150px; border:#ccc 1px solid; text-align:justify; margin: 0 0 10px 0; }
	.smright h4 { text-align: center; font-size: 1.1em; }
	.smright ul li { font-size: 1.1em; font-weight: bold; text-align: left; margin-left: -40px; }
	.sitemap { float:right; padding:12px 15px;	width:612px; border:#ccc 1px solid;	font: 15px/22px Georgia, "Times New Roman", Times, serif;	text-align:justify;	margin: 0 0 10px 0;	}
	.sitemap ul li { font-size: 1.1em; font-weight: bold; line-height: 24px; }
	.sitemap ul li ul li { font-size: 1em; font-weight: bold; }
	.sitemap ul li ul li a { }
	.special { clear: both; margin:0px 0 20px 0; text-align: left; padding:5px 20px; border:1px solid #ccc; background: #eee; color: #444; }
	.special h3 { clear: both; font-size: 1.1em; color: #000; background: #eee url(images/h3bg.gif) no-repeat center left; padding: 0 14px; margin: 0;}
#right blockquote p { font: italic 20px/24px Georgia, "Times New Roman", Times, serif; text-align: center; margin-top: 0px; margin-bottom: 20px; color: #333333; border-bottom: 1px dotted #CCCCCC; padding-bottom: 20px; }
#right #highlights { width: 245px; background: #FFFFFF; float: left; border: 1px solid #0033FF; margin-right: 40px; margin-bottom: 20px; position: relative; }
#right #highlights h4 { background: #9999FF; padding: 5px; color: #0033FF; margin-top: 0px; }
#right #highlights h4.boost { background: #D4F3A1; padding: 5px; color: #0033FF; margin-top: 0px; }
#right #highlights h4.rest { background: #CC66FF; padding: 5px; color: #0033FF; margin-top: 0px; }
#right #highlights h4.control { background: #FF99CC; padding: 5px; color: #0033FF; margin-top: 0px; }
#right #highlights h4.advanced { background: #00CCCC; padding: 5px; color: #0033FF; margin-top: 0px; }
#right #highlights ul { margin: 20px 10px 0px 30px; padding: 0px; margin-right: 50px; }
#right #highlights ul li { font-size: 12px; line-height: 20px; }
#right #highlights p { text-align: justify; }
#right #highlights p.outside { position: absolute; top: -50px; right: -35px; }

/* PRODUCT CONTENT SECTION */
	
#content { float: right; width: 643px; border: 1px solid #CCCCCC; padding-left: 20px; margin-bottom: 20px; padding-right: 20px; text-align: justify; }
#content a { font-weight: bold; color: #0000FF; }
#content a:hover { color: #FF0000; }
#content h2 { font-size: 30px; color: #172D1A; letter-spacing: -1px; }
#content h4 { font-size: 16px; margin-top: 20px; margin-bottom: 10px; }
#content h4 em { font-size: 12px; line-height: normal; font-weight: normal; font-style: normal; color: #666666; }
#content blockquote p { font: italic 20px/24px Georgia, "Times New Roman", Times, serif; text-align: center; margin-top: 0px; margin-bottom: 20px; color: #666666; border-bottom: 1px dotted #CCCCCC; padding-bottom: 20px; font-weight: bold; }
#content blockquote p strong { font: bold normal 12px/normal Arial, Helvetica, sans-serif; }
#content p { margin-top: 15px; margin-bottom: 15px; font: 15px/22px Georgia, "Times New Roman", Times, serif; }
#content p.distributor { float: left; margin: 0px 20px 0px 0px; }
#content ul, #content ol { padding-left: 20px; margin-top: 20px; margin-bottom: 20px; }
#content ul li, #content ol li { margin-top: 10px; margin-bottom: 10px; font: 14px/18px Georgia, "Times New Roman", Times, serif; }
#content ul li ul li { color: #0000FF; }
#content ul li ul li ul li { font-weight: normal; color: #000000; }
#content #highlights {
	width: 245px;
	background: #FFFFFF;
	float: left;
	border: 1px solid #0033FF;
	margin-right: 40px;
	margin-bottom: 20px;
	position: relative;
	}
#content #highlights h4 { background: #9999FF; padding: 5px; color: #0033FF; margin-top: 0px; }
#content #highlights h4.boost { background: #D4F3A1; padding: 5px; color: #0033FF; margin-top: 0px; }
#content #highlights h4.rest { background: #CC66FF; padding: 5px; color: #0033FF; margin-top: 0px; }
#content #highlights h4.control { background: #FF99CC; padding: 5px; color: #0033FF; margin-top: 0px; }
#content #highlights h4.advanced { background: #00CCCC; padding: 5px; color: #0033FF; margin-top: 0px; }
#content #highlights ul { margin: 20px 10px 0px 30px; padding: 0px; }
#content #highlights ul li { font-size: 12px; line-height: 20px; }
#content #highlights p { text-align: center; }
#content #highlights p.outside { position: absolute; top: -50px; right: -35px; }
#content #testpics { width: 245px; background: #FFFFFF; float: left; border: none; margin-right: 40px; margin-bottom: 20px; position: relative; }
#content #testpics img { display: block; margin-left: auto; margin-right: auto; }
#content h3 { font-size: 1.4em; }

/* BOTTOM FULL SECTION */

#bottom { float: left; padding:12px 15px; width: 913px; border: 1px solid #CCCCCC; margin-bottom: 20px; margin-top: 20px; padding-top: 20px; padding-left: 10px; text-align: justify; font-size: 1.4em; }
	a { font-weight: bold; }
	h2 { text-align: center; }
	h3 { clear: both; font-size: 1.3em; color: #000; font: italic bold; background: #fff url(images/h3bg.gif) no-repeat center left ; padding: 0 14px; margin: 0;}
#bottom blockquote p { font: italic 20px/24px Georgia, "Times New Roman", Times, serif; text-align: center; margin-top: 0px; margin-bottom: 20px; color: #333333; border-bottom: 1px dotted #CCCCCC; padding-bottom: 20px; }


/* 	BOTTOM BANNER SPACE */

#bbanner { float: left; padding:12px 15px; width: 913px; border: 1px solid #CCCCCC; margin-bottom: 20px; margin-top: 20px; padding-top: 20px; padding-left: 10px; text-align: justify; }
#bbanner a { font-weight: bold; color: #0033FF; }
#bbanner a:hover { font-weight: bold; color: #003366; }
#bbanner #bhighlights { width: 245px; background: #FFFFFF; float: left; border: 1px solid #0033FF; margin-right: 40px; margin-bottom: 20px; position: relative; }
#bbanner #bhighlights h4 { background: #9999FF; padding: 5px; color: #0033FF; margin-top: 0px; }
#bbanner #bhighlights h4.boost { background: #D4F3A1; padding: 5px; color: #0033FF; margin-top: 0px; }
#bbanner #bhighlights h4.rest { background: #CC66FF; padding: 5px; color: #0033FF; margin-top: 0px; }
#bbanner #bhighlights h4.control { background: #FF99CC; padding: 5px; color: #0033FF; margin-top: 0px; }
#bbanner #bhighlights h4.advanced { background: #00CCCC; padding: 5px; color: #0033FF; margin-top: 0px; }
#bbanner #bhighlights ul { margin: 20px 10px 0px 30px; padding: 0px; }
#bbanner #bhighlights ul li { font-size: 12px; line-height: 20px; }
#bbanner #bhighlights p { text-align: center; }
#bbanner #bhighlights p.outside { position: absolute; top: -50px; right: -35px; }
#bbanner #btestpics { width: 245px; background: #FFFFFF; float: left; border: none; margin-right: 40px; margin-bottom: 20px; position: relative; }
#bbanner #btestpics img { display: block; margin-left: auto; margin-right: auto; }
	 
/* FOOTER */

#footer { clear: both; padding: 5px; border-top: 1px solid #ccc; text-transform: uppercase; text-align: center; }
#footer p { font-size: 11px; color: #131E11; padding-top: inherit; padding-bottom: inherit; clear: both; width: 940px; margin-right: auto; margin-bottom: 10px; margin-left: auto; line-height: 16px; }
#footer p strong { font-size: 12px; }
#footer p.tag { font-size: .1em; text-transform: none; }
#footer ul { padding-top: 10px; padding-bottom: 20px; height: 10px; width: 900px; margin-right: auto; margin-left: auto; }
#footer ul li { list-style: none; font-size: 10px; display:inline; padding-right: 5px; border-right: 1px solid #CCCCCC; margin-right: 5px; }
#footer ul li a { color: #131E11; text-decoration: none; font-weight: bold; border-bottom: 2px solid #131E11; }
#footer ul li a:hover { border-bottom: 2px solid #71B531; }
#footer ul li.last { border-style: none; }

/*tabs*/
#tabbed-content {background:#fff;border-top:1px solid #cccccc;clear:both;top:-1px;position:relative;padding:20px;z-index:10}
* html #tabbed-content {height:1%}
#tabbed-content .ui-tabs-hide {display:none}
#tabbed-content div {position:relative}
#tabbed-content #overview { padding:0px 0 0 }
#tabs-nav {clear:both;float:left;position:relative;left:50%;text-align:center;z-index:20;}
ul#tabs {list-style:none;margin:0;height:35px;left:-50%;padding:0;position:relative;z-index:20;}
* html ul#tabs {display:inline}
ul#tabs li {float:left;position:relative;padding:0;margin:0 0 0 3px}
ul#tabs li a { font-family: Arial, Helvetica, sans-serif; background:url(images/tab-bg.png) left top no-repeat;color:#0000FF;float:left;font-weight:700;height:25px;padding:10px 0 0;position:relative;text-align:center;text-decoration:none;width:118px}
ul#tabs li a:hover, ul#tabs li.ui-tabs-selected a {background:url(images/tab-bg.png) left -35px no-repeat;color:#FF0000;float:left;height:25px;padding:10px 0 0;text-align:center;width:118px}
ul#product-nav { margin: 0px; padding: 0px; }
ul#product-nav li { margin: 20px 0px; padding: 0px; list-style: none; }
ul#product-nav #aloeboost, ul#product-nav #aloeboost a { height: 160px; width: 499px; display: block; background: url(images/product-boost.png) no-repeat; text-indent: -9999px; }
ul#product-nav #aloeboost a:hover { background: url(images/product-boost.png) no-repeat left bottom; }
ul#product-nav #aloerest, ul#product-nav #aloerest a { height: 160px; width: 499px; display: block; background: url(images/product-rest.png) no-repeat left top; text-indent: -9999px; }
ul#product-nav #aloerest a:hover { background: url(images/product-rest.png) no-repeat left bottom; }
ul#product-nav #aloecontrol, ul#product-nav #aloecontrol a { height: 160px; width: 499px; display: block; background: url(images/product-control.png) no-repeat left top; text-indent: -9999px; }
ul#product-nav #aloecontrol a:hover { background: url(images/product-control.png) no-repeat left bottom; }
ul#product-nav #aloeadvanced, ul#product-nav #aloeadvanced a { height: 160px; width: 499px; display: block; background: url(images/product-advanced.png) no-repeat left top; text-indent: -9999px; }
ul#product-nav #aloeadvanced a:hover { background: url(images/product-advanced.png) no-repeat left bottom; }