@charset "UTF-8";
/* CSS Document */

html,body{
      margin:0;
      padding:0;
      height:100%;
	  width:100%;
      border:none;
   }
   body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height:130%;
	color: #666666;
	background:url(../art/back-blend.jpg) #F7D49A repeat-x;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */

}
ul { margin:5px 0 0 25px; padding:0}
li {list-style-position: outside;
	list-style-image: url(../art/bullet01.gif);
margin: 0px 0px 7px 0px;
	line-height: 130%;}
	
	
.container { width:1026px; position:relative; margin:auto;  position:relative;
	text-align: left; /* this overrides the text-align: center on the body element. */
}

.mainWrapper { width:848px; height:auto !important; height: 1%; /*a minimal height is given to trick IE into expanding the box*/ margin:0 0 0 178px; background:url(../art/outerEdges.jpg) repeat-y; position:relative;}


.mainMiddle { background: url(../art/middle.jpg)  left 385px  no-repeat; height:auto !important; height: 1%;}

.mainTop {height:auto !important; height: 1%; background: url(../art/top.jpg) top left  no-repeat;}
.mainBase {height:auto !important; height: 1%; background: url(../art/base.jpg) bottom left  no-repeat;}

.mast { height:307px; width:796px; position:relative; margin-left:25px;}
.menuBar {
	position:absolute;
	width:684px;
	height:40px;
	top:267px;
	left:91px;
	font-size:18px;
}
.menuBar ul { list-style-type:none; margin:0; padding:0}
.menuBar li { float:left; display:inline; border-left: 1px solid #cccccc; padding:0; margin:0 }
.menuBar a:link, .menuBar a:visited { float:left; padding:0 20px;  color:#666666; line-height:40px;}
.menuBar a:hover { background: url(../art/current.gif) repeat-x; color:#666666;}

#whoWeAre .menuBar01,
#easySteps .menuBar02,
#whyItWorks .menuBar03,
#gettingStarted .menuBar04

{background: url(../art/current.gif) repeat-x;}

#topRightNav {
	position:absolute;
	height:46px;
	width:230px;
	top: 50px;
	left: 540px;
	text-align:right;
	text-transform:uppercase;
}
#topRightNav a:hover { color:#FF6600}

.bannerSilo {position:absolute; width:284px; height:232px; top:35px; left:0;}

.bannerCallout {
	width:390px;
	height:138px;
	position:absolute;
	top: 125px;
	left: 383px;

}

#home .bannerCallout { background:url(../art/bannerCallouts-changeHabit.gif) no-repeat;}
#home .bannerSilo { background:url(../art/bannerSilo-measure.jpg) no-repeat;}

#whoWeAre .bannerCallout { background:url(../art/bannerCallouts-bio.gif) no-repeat;}
#whoWeAre .bannerSilo { background:url(../art/bannerSilo-thumbsUp.jpg) no-repeat;}

#easySteps .bannerCallout { background:url(../art/bannerCallouts-breakHabits.gif) no-repeat;}
#easySteps .bannerSilo { background:url(../art/bannerSilo-cake.jpg) no-repeat;}

#whyItWorks .bannerCallout { background:url(../art/bannerCallouts-coaching.gif) no-repeat;}
#whyItWorks .bannerSilo { background:url(../art/bannerSilo-head.jpg) no-repeat;}

#gettingStarted .bannerCallout { background:url(../art/bannerCallouts-endBattles.gif) no-repeat;}
#gettingStarted .bannerSilo { background:url(../art/bannerSilo-carrots.jpg) no-repeat;}

.bigSpan { font-size:24px; }
.looselead { line-height:180%}
.tintBox {padding:10px; margin-bottom:20px; border:1px solid #8A9AEC; background-color: #E8EBF6; background-position: right 18px; background-repeat:no-repeat}

.tintBox ul { margin-left:30px;}

.tintBox h2 { margin-top:0; padding-top:5px;}

.bodyWrapper {width:796px; position:relative; margin-left:25px; padding-bottom:10px; height:auto !important; height: 1%;}
.footer { height:73px; text-align:center;}
.footer p { padding-top:15px; margin-top:0;}
#logo {
	position:absolute;
	width:166px;
	height:189px;
	top:24px;
	left:7px;
	z-index:12
}

.submenu {height:27px; background:url(../art/dot-rule-horiz.gif) bottom repeat-x; position:relative; font-size:14px; color:#FF9900; text-align:center;}
.submenu  ul {
	list-style-type:none;
	margin:0;
	padding:0;
	text-align: center;
	width:500px;
}
/*.submenu li { float:left; display:inline; padding:0; margin:0; height:37px; }*/
.submenu li {display:inline; padding:0; margin:0; height:27px; }
/*.submenu a:link, .submenu a:visited { float:left; padding:0 20px;  color:#FF9900; line-height:40px;}*/
.submenu a:link, .submenu a:visited { padding:0 20px;  color:#FF9900; line-height:27px;  cursor:pointer;}
.submenu a:hover {color:#FF6600; cursor:pointer;}

#submenuBar01 .submenuBar01,
#submenuBar02 .submenuBar02,
#submenuBar03 .submenuBar03,
#submenuBar04 .submenuBar04 { color:#FF6600; font-weight:bold}

.orangeFade {
	width: 283px;
	background:url(../art/orange-fade.jpg) top left no-repeat;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.orangeFade p { font-size:15px; font-weight: bold; line-height:178%; color:#FF6600; padding:5px 20px;}

#quote {
	position:absolute;
	width:186px;
	height:422px;
	top:290px;
	left:0px;
	z-index:13;
	background: url(../art/quoteMarks.gif) top left  no-repeat;
}

#quote p { padding:28px 0 0 16px;  color:#333399; font-size:16px; line-height:164%; margin:0;}
#quote span { font-size:11px}


a:link, a:visited { text-decoration:none; color:#6572B3; }
a:hover { color:#FF9900;}

a img {border:none}

h1 { padding:0; margin: 0 0 10px 0; /*color:#FF9900;*/ color:#FF6600; font-weight: normal; font-size: 20px; line-height:130%;}
h2 {color: #333399; font-size:16px; font-weight:normal; line-height:130%; padding:0; margin: 20px 0 10px 0;}

h3 { font-size: 14px; font-weight:bold; color:#FF9900; padding:0; margin: 20px 0 4px 0;}

#leftColumn { position:relative; height:auto !important; height: 1%; /*a minimal height is given to trick IE into expanding the box*/ float:left; margin: 20px 0 0 0px; width:420px; padding-left:30px;  display: inline; /*fixes IE 6 double margin on a float bug*/}

#rightColumn { position:relative; width:336px; height:auto !important; height: 1%; /*a minimal height is given to trick IE into expanding the box*/ float:right; margin: 20px 10px 0 0;  display: inline; /*fixes IE 6 double margin on a float bug*/}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
	margin:0;
	padding:0;
	display:block;
	
}
.orange /*{ color:#FF9900;}*/{ color:#FF6600;}
.orangeDark { color:#FF6600;}
.purple { color:#6572B3;}
.purpleDark { color:#333399;}




/*ROUNDED CORNER BOX STYLES START*/
.curvCornBox-wrapper {height:auto !important; height: 1%; width:327px; padding:0; margin:0;}
.curvCornBox-top { height:40px; width:327px; padding:0; margin:0; line-height:40px; color:#FFFFFF; font-size:20px; background:url(../art/calloutBox-top.gif) no-repeat;}
.curvCornBox-base { height:10px; width:327px; padding:0; margin:0; background: url(../art/calloutBox-base.gif) no-repeat; line-height:0px;}
.curvCornBox-rule {height:auto !important; height: 1%; background-color:#CCCCCC; padding:0 1px 0 1px;}
.curvCornBox-content {height:auto !important; height: 1%; background-color:#e4e6f4; margin:0; padding:0}
.curvCornBox-text {
	width:85%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
}
.curvCornBox-top p { margin:0 20px; padding:0;}
.curvCornBox-text h2 { margin-top:0; padding-top:5px;}
/*ROUNDED CORNER BOX STYLES END*/
.scriptUnderline a { color:#FF6600;}
.scriptUnderline a:hover { text-decoration:underline;}