.how_work #header { background: #d6ddc3; }

body.how_work #nav dl.how_work {
	background: #c5deea;
	border-right: 1px solid #7fb5cd;
	border-bottom: 1px solid #7fb5cd;
}

body.how_work #nav dl.how_work dt span { visibility: visible; }

body.how_work #nav dl.how_work dd { display: none; }
body.how_work #nav dl.how_work dt { margin-bottom: 0; }

#cta-2 { margin-top: 15px; width: 170px; }

div.show_this { display: block; }
body.foundation div.foundation { display: block; }
body.active_weight_loss div.active_weight_loss { display: block; }
body.transition div.transition { display: block; }
body.consolidation div.consolidation { display: block; }
body.ongoing_weight_control div.ongoing_weight_control { display: block; }

#timeline { width: 100%; height: 5em; font-size: 19px; position: relative; }
#timeline:hover .foundation p.weeks { visibility: hidden; }
#timeline:hover .foundation p.stage { background: #fff; color: inherit; }
#timeline li p { margin: 0; padding: 0; }

#timeline li {
	display: block;
	float: left;
	height: 100%;
	padding: 0;
	margin: 0;
	margin-bottom: 15px;
	position: relative;
	overflow: hidden;
}

#timeline .number {
	font-weight: normal;
	font-size: 1em;
	height: 1em;
	padding: 0 .2em;
	padding-top: 17px;
	position: relative;
	z-index: 10;
}

#timeline .weeks { 
	font-size: .63em; 
	height: .63em; 
	text-transform: lowercase; 
	visibility: hidden; 
	padding: 0 .3em; 
	padding-top: .1em; 
	z-index: 10;
	position: relative;
}

#timeline .weeks strong { font-size: .75em; font-weight: bold; }

#timeline li.foundation .number, 
#timeline li.foundation .weeks { color: #92af68; }

#timeline li.active_weight_loss .number, 
#timeline li.active_weight_loss .weeks { color: #7fb5cd; }

#timeline li.transition .number, 
#timeline li.transition .weeks { color: #babd9e; }

#timeline li.consolidation .number, 
#timeline li.consolidation .weeks { color: #646669; }

#timeline li.ongoing_weight_control .number, 
#timeline li.ongoing_weight_control .weeks { color: #aeb0b2; }

#timeline li.foundation { 
	background: #92af68 url('../images/timeline-top-white.gif') no-repeat top left;
	width: 4em; 
} /* 92af68 */
#timeline li.active_weight_loss { 
	background: #7fb5cd url('../images/timeline-top-green.gif') no-repeat top left;
	width: 11.8em; 
} /* 7fb5cd */
#timeline li.transition { 
	background: #babd9e url('../images/timeline-top-blue.gif') no-repeat top left;
	width: 4em; 
} /* babd9e */
#timeline li.consolidation { 
	background: #646669 url('../images/timeline-top-tan.gif') no-repeat top left;
	width: 4em; 
} /* 646669 */
#timeline li.ongoing_weight_control { 
	background: #aeb0b2 url('../images/timeline-top-dkgray.gif') no-repeat top left;
	width: 6em; 
} /* aeb0b2 */

body.foundation #timeline li.foundation .stage,
body.foundation #timeline li.foundation .stage { background: #819e57; color: #fff; } /* 92af68 */
body.active_weight_loss #timeline li.active_weight_loss .stage { background: #7fb5cd; color: #fff; } /* 7fb5cd */
body.transition #timeline li.transition .stage { background: #babd9e; color: #fff; } /* babd9e */
body.consolidation #timeline li.consolidation .stage { background: #646669; color: #fff; } /* 646669 */
body.ongoing_weight_control #timeline li.ongoing_weight_control .stage { background: #aeb0b2; color: #fff; } /* aeb0b2 */

body.foundation #timeline li.foundation .weeks { visibility: visible; }
#timeline li.foundation.on .weeks,
#timeline li.active_weight_loss.on .weeks,
#timeline li.transition.on .weeks,
#timeline li.consolidation.on .weeks,
#timeline li.ongoing_weight_control.on .weeks { visibility: visible; }


#timeline p.stage {
	display: block;
	font-weight: bold;
	letter-spacing: .05em;
	width: inherit;
	font-size: .4em;
	text-transform: uppercase;
	height: 1.39em;
	width: 100%;
	background: #fff;
	padding: .4em;
	position: absolute;
	bottom: -1px;
	clear: left;
}

#timeline div.week-numbers { 
	position: absolute; 
	bottom: .9em; 
	left: 0;
	height: .6em; 
	width: 100%; 
	text-align: center;
	z-index: 10;
}

#timeline div.week-numbers p {
	font-size: .45em; 
	float: left; 
	text-align: center; 
	border-right: 1px solid #999; 
	height: 100%;
	padding: 0;
}

#timeline .foundation .week-numbers p { width: 2.1em; }
#timeline .active_weight_loss .week-numbers p { width: 2.05em; }
#timeline .transition .week-numbers p { width: 2.1em; }
#timeline .consolidation .week-numbers p { width: 2.1em; }
#timeline .ongoing_weight_control .week-numbers p { width: 2.1em; }

div.week-numbers p.last { border-right: 0; }

#timeline li p { font-family: "Helvetica Neue", helvetica, arial, verdana, sans-serif; }


#timeline span.gradient {
	position: absolute;
	width: 100%;
	height: 80%;
	bottom: .6em;
	z-index: 0;
	background: transparent url('../images/80-pct-white_grad.png') .5em repeat-x;
}

#timeline span.gradient-top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 15px;
	z-index: 0;
	background: transparent url('../images/3d-top-white_grad.png') .5em repeat-x;
}


.stage { clear: both; position: relative; height: 250px; display: none; z-index: 10; }
.stage h2 { width: 400px; height: 1.3em; }
.stage p { width: 380px; }
.stage h2 span { font-size: .7em; font-weight: bold; text-transform: uppercase; }
.stage h2 { margin-bottom: .5em; }

.expect { position: absolute; width: 220px; top: 3.5em; right: 0; }
h2.expect { width: 220px; top: 0; }

div.foundation h2 { border-bottom: 7px solid #92af68; }
div.active_weight_loss h2 { border-bottom: 7px solid #7fb5cd; }
div.transition h2 { border-bottom: 7px solid #babd9e; }
div.consolidation h2 { border-bottom: 7px solid #646669; }
div.ongoing_weight_control h2 { border-bottom: 7px solid #aeb0b2; }

#cta { clear: both; padding: 15px; height: 70px; }
#cta p, #cta h2 { display: inline; margin-right: 15px; }
#cta form { margin-top: 10px; position: relative; }
#cta .on_top { float: left; margin-right: 15px; margin-bottom: 0; }
#cta .checkbox { float: left; margin-bottom: 3px; }
#cta .checkbox label { margin-left: 20px; }
#cta .form_submission { position: absolute; right: 0; width: 180px; margin-right: 0; }
#cta .form_submission input { float: left; margin-right: 15px; margin-bottom: 3px; }
#cta .form_submission span,
#cta .form_submission a { display: block; float: left; margin-right: .5em; }