
/*************** Weigh2Live Styles ****************/

@import url('buttons.css');

/*************  COMMON STYLES **************/

html {
	height:100%;
	margin-bottom:1px;
}

body {
	font-size: 10pt;
	font-family:'arial','helvetica',sans-serif;
	margin: 0;
	padding: 0;
	background: #ffffff url('../images/bg.jpg') repeat-y top center;
	}
/*
#all {
	background: #ffffff url('../images/bg.jpg') repeat-y top center;
	}
*/

img {
	border: 0px;
	}

h1 {
	color: #333333;
	font-size: 20pt;
	font-weight: normal;
	margin: 0;
	}
	
h1 a:hover {
	color: #fba627 !important;
}

h2 {
	color: #333333;
	font-size: 16pt;
	font-weight: normal;
	margin: 10px 0px;
	}
	
h3 {
	color: #59accc;
	font-size: 16pt;
	font-weight: normal; 
	}

h4 {
	color: #59accc;
	font-size: 12pt;
	padding: 15px 0px;
	margin: 0;
	font-weight: normal; 
	}

h5 {
	color: #C5621A;
	font-size: 13pt;
	margin: 0;
	padding: 5px 0;
	font-weight: normal; 
	}

.green {
	color: #839602
	}
	
.red {
	color: #982415;
	}

a { 
	color: #2690BA;
	text-decoration: underline;
	}
a:hover {
	text-decoration: none;
}

input, button {
	border: none;
	padding: 3px;
}
form, label {
	padding: 0; 
	margin: 0;
}

div.hr {
  height: 3px;
  background: url('../images/dots.gif') repeat-x scroll center;
	}

/*************  HEADER SECTION **************/

#header {
	width: 100%;
	height: 100px;
	background: url('../images/header_bg.png') repeat-x top left;
	margin-bottom: 10px;
	}
	#header .container {
		width: 850px;
		margin: 0 auto;
		}
		#header .logoBox {
			width: 310px;
			float: left;
			margin-left: 15px;
			margin-top: 18px;
			height: 80px;
			background: url('../images/mainNav_left.jpg') no-repeat bottom right;
			}
		#header .logo {
			width: 240px;
			height: 53px;
			float: left;
			}
		#header .mainNav {
			padding: 0px;
			float: left;
			margin-top: 18px;
			}
			#header .mainNav ul {
				list-style: none;
				}
				#header .mainNav ul li {
					float: left;
					/*display: inline; */ /* inline will add spaces */
				}
	#header .nav {
		float: left;
		width: 846px;
		}
		#header .nav a {
			padding-top: 5px;
			color: #1C8BB7;
			font-size: 11pt;
			font-weight: bold;
			text-decoration: none;
			}
		#header .nav .container {
			height: 39px;
			padding-left: 31px;
			}
			#header .nav ul {
				width: 787px;
				text-align: center;
				float: left;
				list-style: none;
				background: url('../images/separator.jpg') no-repeat center left;
				}
				#header .nav ul li {
					height: 30px;
					float: left;
					display: inline;
					background: url('../images/separator.jpg') no-repeat center right;
					}
					
				#header .nav .text {
					padding-top: 10px;
					}
					#header .nav .text a {
						padding: 0px 26px 0px 23px;
						display: block;
						float: left;
						}
				#header .nav .active, #header .nav .hover {
					background: url('../images/nav_bg.jpg') repeat-x top left !important;
					}
					#header .nav .active a, #header .nav .hover a {
						height: 30px;
						background: url('../images/nav_selector.jpg') no-repeat bottom center;
						}
					
				#header .nav .login {
					padding-top: 6px;
					padding-right: 0px;
					background: none;
					float: right;
					}
				
			#header .nav .noBg {
					background: none;
				}
			
		#header .nav .bottom {
			height: 10px;
			background: url('../images/nav_bottom.jpg') no-repeat top center;
			}
	

/*************  CONTENT SECTIONS **************/


#container {
	width: 787px;
	margin: 0px auto;
	padding-top: 10px;
	}
	
	p.message {
		line-height: 35px;
		height: 35px;
		padding-left: 50px;
		}
	p.success {
		border: 1px solid #fdd28f;
		background: #fdfadd url('../images/message_success.gif') no-repeat top left;
		}
	
	div.results {
		border: 1px solid #fdd28f;
		background: #fdfadd; 
		padding: 0 20px;
		}
		div.results p.big {
			font-size: 16px;
			font-weight: bold;
			}
		div.results ul {
			margin-left: 40px;
			}
	
		div.results div.submit {
			clear: both;
			height: 50px;
			}
			div.results div.submit div {
				line-height: 38px;
				}
	
	p.error {
		border: 1px solid #e1bbb5;
		background: #f4e7e5 url('../images/message_error.gif') no-repeat top left;
		color: #a21e00;
		line-height: normal;
		height: 30px;
		padding: 9px 10px 11px 36px;
		}
	
	#BMICalc p.error {
		height: auto;will
	}
	
	div.error {
		border: 1px solid #e1bbb5;
		background: #f4e7e5;
		padding: 0 13px;
		margin-top: 2px;
		padding-top: 7px;
		}
	div.noerror {
		padding: 8px 13px 16px;
		padding-top: 8px;
		overflow: hidden;
		height: 31px;
		}
		form.spaced8 div.noerror input {
			margin: 0;
			}
	
	ul {
		margin: 0;
		padding: 0;
		}
	ul.blue {
		list-style: url('../images/blue_dot.jpg');
		padding-left: 17px;
		line-height: 14pt;
		}
		
	ul.orange {
		list-style: url('../images/orange_dot.jpg');
		padding-left: 17px;
		line-height: 14pt;
		}
		
	.left {
		float: left;
		}
	.right {
		float: right;
		}
		
	.tab {
		display: none;
		width: 520px;
		padding-left: 20px;
	}
	.vtab {
		display: none;
	}
	.tab-active {
		display: block;
	}
		
	img.right {
		padding: 5px;
		}
	
	img.left {
		padding: 5px;
		}
	
	.clear {
		clear: both;
		}
	
	.hand {
		cursor: pointer;
		}
	
	.snacks {
		padding-top: 30px;
		}
		
	#homeBoxes {
		padding-top: 30px;
		}
		#homeBoxes .blueBoxTop {
			height: 185px;
			}
		
	.pR15 {
		padding-right: 15px;
		}
		
	.mL20 {
		margin-left: 20px;
		}
	
	.mT20 {
		margin-top: 20px;
		}
	.mB0 {
		margin-bottom: 0px;
		}

	.table {
		width: 100%;
		}
		.table td {
		 	vertical-align: top;
			}
		.table .bottom td{
			padding-top: 20px;
			vertical-align: bottom;
			}
			.table .bottom a{
		 		color: #FFFFFF;
				}

	
	
	#BMICalc div.line {
		clear: both;
		padding: 10px 15px;
		width: 473px;
		}
	#BMICalc div.focused {
		background: #faf08f;
		}
	
		#BMICalc div.line div {
			clear: none;
			}
	
	#BMICalc div.label {
		float: left;
		width: 105px;
		padding-top: 22px;
		}
	#BMICalc div.single-line div.label {
		padding-top: 1px !important;
	}
	#BMICalc div.inputs {
		float: left;
		}
		#BMICalc div.inputs div.left {
			margin-right: 5px;
			}
	
	#BMICalc .formError {
		margin-top: 22px;
		padding-bottom: 0;
		}
	#BMICalc div.single-line .formError {
		margin-top: 0 !important;
	}
		
	#BMICalc div.submit-line {
		padding-bottom: 22px;
		}
	
	#BMIRightBox {
		margin-top: 25px;
		font-size: 12px;
		}
		#BMIRightBox h4 {
			padding-bottom: 0px;
			}
			#BMIRightBox .blueBoxBottomNone {
				height: 330px;
				overflow: hidden;
				}
		
	.bigBox {
		background: url('../images/big_box.gif') repeat-y;
		width: 519px;
		float: left;
		margin-right: 17px;
		}
		.bigBoxTop {
			background: url('../images/big_box_top.gif') no-repeat top left;
			}
		.bigBoxTopImperial {
			background: url('../images/bmi_top_imperial.gif') no-repeat top left;
			}
		.bigBoxTopMetric {
			background: url('../images/bmi_top_metric.gif') no-repeat top left;
			}
		ul.topMenu {
			height: 25px;
			margin-left: 9px;
			clear: both;
		}
		ul.topMenu li {
			text-indent: -2000px;
			float: left;
			display: block;
			width: 74px;
			height: 25px;
		}
		ul.topMenu li a {
			display: block;
			width: 100%;
			height: 100%;
		}
		.bigBoxBottom {
			background: url('../images/big_box_bottom.gif') no-repeat bottom left;
			padding: 0 20px;
			min-height: 212px;
			}
			.bigBoxBottom div input {
				display: block;
			}
			.bigBoxBottom div {
				overflow: hidden;
				clear: both;
				}
		.bigBox .bottomWide {
			padding: 0 7px;
			}
		.bigBox p.message {
			margin: 0;
			}
	
	input.big {
		background: url('../images/input_big.gif') no-repeat;
		width: 222px;
		height: 15px;
		padding: 3px;
		}
	input.small {
		background: url('../images/input_small.gif') no-repeat;
		width: 52px;
		height: 15px;
		padding: 3px;
	}
	label {
		display: block;
		margin-bottom: 5px;
	}
	
	label span.gray {
		color: #797979;
	}
		
	div.fleft, div.fright {
		float: left;
		line-height: 31px;
		font-size: 11px;
		height: 31px;
		}

		div.fleft {
			width: 90px;
			clear: left;
			}


	div.fright {
		clear: right;
		}
	
	form.spaced17 input {
		margin-bottom: 17px;
		}
	form.spaced8 input {
		margin-bottom: 8px;
		float: left;
		}
	.bottomWide h4 {
		padding-left: 13px;
		}
	.formError  {
		margin-top: 2px;
		background: url('../images/message_error.gif') no-repeat 0px -8px;
		padding-left: 36px;
		color: #a21e00;
		display: block;
		float: left;
		width: 200px;
		padding-bottom: 8px;
	}
	
	.boxTop {
		background: url('../images/box_top.gif') no-repeat top left;
		}
	.boxBg {
		background: url('../images/box_bg.gif') repeat-y top left;
		}
	.boxBottom {
		padding: 10px 20px;
		background: url('../images/box_bottom.gif') no-repeat bottom left;
		}

	.blueBoxBigTop {
		background: url('../images/blue_box_big_top.gif') no-repeat top left;
		}
	.blueBoxBigBg {
		background: url('../images/blue_box_big_bg.gif') repeat-y top left;
		}
	.blueBoxBigBottom {
		padding: 10px 20px;
		background: url('../images/blue_box_big_bottom.gif') no-repeat bottom left;
		}
	.blueBoxBigBottom2 {
		padding: 10px 20px;
		background: url('../images/blue_box_big_bottom2.gif') no-repeat bottom left;
		}
	.blueBoxBigBottom3 {
		padding: 10px 20px 5px 20px;
		background: url('../images/blue_box_big_bottom3.gif') no-repeat bottom left;
		}
	.blueBoxBigBottom4 {
		padding: 10px 20px;
		background: url('../images/blue_box_big_bottom4.gif') no-repeat bottom left;
		}
	h1.howTo {
		margin-bottom: 8px;
		cursor: pointer;
		}
	
	.blueBoxTop {
		width: 251px;
		background: url('../images/blue_box_top.gif') no-repeat top left;
		}
		.blueBoxTop ul {
			list-style-image: url('../images/blue_box_big_ul_dot.gif');
			margin-top: 5px;
			padding-left: 18px;
			}
		.blueBoxTop ul.whyRegister {
			padding-top: 0;
			margin-top: 0;
			padding-left: 15px;
			}
	.blueBoxBg {
		float: left;
		width: 251px;
		overflow: hidden;
		background: url('../images/blue_box_bg.gif') repeat-y top left;
		}
	.blueBoxBottom {
		padding: 5px 20px 20px 20px;
		background: url('../images/blue_box_bottom.gif') no-repeat bottom left;
		}
	.blueBoxBottom2 {
		padding: 5px 20px 0px 20px;
		width: 251px;
		background: url('../images/blue_box_bottom_register.gif') no-repeat bottom left;
		}
	.blueBoxBottomNone {
		padding: 0 20px 0px 20px;
		min-height: 202px;
		} 
		
	 	.blueBoxBottomNoneSmall {
			min-height: 140px;
		}   

	.blueBoxFooter, .blueBoxFooterSmall {
		height: 25px;
		background: url('../images/blue_box_footer.gif') no-repeat bottom left;
		padding: 5px 0 0 20px;
		color: #FFFFFF;
		font-size: 10pt;
		}
		.blueBoxFooter a {
			color: #FFFFFF;
			}
	.blueBoxFooterSmall {
		height: 5px;
		font-size: 1px;
		}
		
	.blueBoxBg button.padded {
		display: block;
		clear: both;
		margin-bottom: 19px;
	}
		
	.fatDiets {
		background: url('../images/fat_diets.jpg') no-repeat top left;
		padding: 15px 0px 20px 20px;
		float: right;
		width: 260px;
		height: 131px;
		color: #FFFFFF;
		}
		.fatDiets h4 {
			color: #91ffff;
			padding-bottom: 5px;
			}	
	.tipsListening {
		width: 800px;
		}
		
	#homeTop {
		width: 800px;
		height: 204px;
		padding-top: 10px;
		margin-bottom: 8px;
		margin-top: -5px;
		clear: both;
		overflow: hidden;
		
		}
		#homeTopSplash {
			background: transparent url('../images/home_splash.jpg') no-repeat;
			width: 606px;
			height: 194px;
			float: left;
			text-indent: -2000px; /* remove this and ajust #homeTopSplashLink with text-indend and color */
			}
			#homeTopSplashLink {
				font-size: 0.1px; /* dont display font here */
				background: url('../images/home_splash_link.gif') no-repeat;
				display: block;
				width: 234px;
				height: 44px;
				
				margin-top: 150px;
				margin-left: 346px;
				}
			#homeTopSplashLink:hover {
				background: url('../images/home_splash_link_hover.gif');
			}
		#homeTopRegister {
			background: url('../images/home_register.gif') no-repeat;
			width: 160px;
			height: 194px;
			float: left;
			margin-top: -10px;
			padding-left: 20px;
			}
			#homeTopRegister h4 {
				padding-bottom: 8px;
			}
				#homeTopRegister h4 span {
					color: #000;
					}
				#homeTopRegister h4 a {
					text-decoration: none;
					}
			#homeTopRegister label {
				color: #797979;
			}
			#homeTopRegister input.data {
				background: url('../images/login_form_input.gif') no-repeat;
				width: 134px;
				height: 15px;
				margin-bottom: 5px;
				}
			#homeTopRegister #loginSubmit {
				margin-top: 5px;
				}
			#homeTopRegister #loginRemind {
				font-size: 11px;
			}
			
	.toolsListening ul {
		list-style: none;
		background: url('../images/dots3.gif') repeat-x bottom left;
		clear: both;
		overflow: hidden;
		height: 152px;
		width: 785px;
		}
	.toolsListening ul li {
		display: block;
		float: left;
		height: 152px;
		}
		
	.tipsListening ul {
		list-style: none;
		height: 131px;
		overflow: hidden;
		clear: both;
		}
	.tipsListening ul li {
		display: inline;
		float: left;
		height: 131px;
		}
	.tipsListening ul li.icon {
		display: block;
		width: 104px;
		}
	.tipsListening ul li.icon a {
		display: block;
		width: 100%;
		height: 51px;
		padding-top: 80px;
		text-decoration: none;
		font-size: 12px;
		text-align: center;
		background-position: 0 -1px !important;
		color: #a56237;
		}
	
	.tipsListening ul li.icon a:hover, .tipsListening ul li.active a {
		color: #3d8997;
		}
	
	#homeTopRegister h4 a:hover {color: #fba627 !important;}
	
	.menu {
		list-style: none;
		background: url('../images/dots.gif') repeat-x top left;
		}
		.menu li{
			width: 191px;
			background: url('../images/dots.gif') repeat-x bottom left;
			height: 30px;
			}
			.menu li a{
				text-decoration: underline;
				display: block;
				height: 30px;
				line-height: 30px;
				}
			.menu li.active{
				background: url('../images/select_arrow.gif') repeat-x bottom left;
				}
				.menu li.active a{
					padding-left: 15px;
					color: #000000;
					text-decoration: none;
					}
			.menu li:hover, .menu li.hover {
				background: url('../images/hover_arrow.gif') repeat-x bottom left;
				}
			.menu li:hover a, .menu li.hover a {
				padding-left: 15px;
				text-decoration: none;
			}
			.menu li.noBg {
				background: none;
				}
	.check {
		min-height: 150px;
		width: 250px;
		background: transparent url("../images/check.jpg") no-repeat scroll right top;;
		margin-right: 25px;
		padding-bottom: 150px;
		}
	.x {
		min-height: 150px;
		width: 260px;
		background: transparent url("../images/x.jpg") no-repeat scroll right top; 
		padding-bottom: 150px;
		}
	
	.vDoths {
		background: url('../images/vertical_dots.gif') repeat-y top right;
		}
		
		
	#weightTrackerOpen {
		display: none;
		}	
	
	#weightTrackerTitle {
		margin: 20px 0;
		clear: both;
		overflow: hidden;
	}
	
	#weightTrackerTitle h1 {
		display: block;
		width: 180px;
		float: left;
	}
	
	#weightTrackerBottom {
		background: url('../images/tools_bottom.gif');
		width: 789px;
		height: 104px;
		margin: 15px auto 0;
		}
	
		
		
		#weightTrackerBottom ul {
			display: block;
			float: right;
			overflow: hidden;
			height: 100%;
			}
			
			#weightTrackerBottom li {
				display: block;
				width: 82px;   
				float: left;
				margin-right: 23px;
				 margin-top: 5px; 
				text-align: center;
				display: inline;
				}
			
			    #weightTrackerBottom li.button-activity {
					background:  url("../images/footer_icon_activity.png") no-repeat center top;
				}
				
				#weightTrackerBottom li.button-activity-hover {
					background:  url("../images/footer_icon_activity_hover.png") no-repeat center top;
				}
				
				#weightTrackerBottom li.button-bmi {
					background:  url("../images/footer_icon_bmi.png") no-repeat center top;
				}
				
				#weightTrackerBottom li.button-bmi-hover {
					background:  url("../images/footer_icon_bmi_hover.png") no-repeat center top;
				}  
				
				#weightTrackerBottom li.button-food {
					background:  url("../images/footer_icon_food.png") no-repeat center top;
				}
				
				#weightTrackerBottom li.button-food-hover {
					background:  url("../images/footer_icon_food_hover.png") no-repeat center top;
				} 
				
				#weightTrackerBottom li.button-goals {
					background:  url("../images/footer_icon_goal.png") no-repeat center top;
				}
				
				#weightTrackerBottom li.button-goals-hover {
					background:  url("../images/footer_icon_goal_hover.png") no-repeat center top;
				}  
				
				#weightTrackerBottom li.button-weight {
					background:  url("../images/footer_icon_weight.png") no-repeat center top;
				}
				
				#weightTrackerBottom li.button-weight-hover {
					background:  url("../images/footer_icon_weight_hover.png") no-repeat center top;
				}
			
				#weightTrackerBottom li a {
					display: block;                          
					font-size: 9pt;
					color: #555; 
					text-decoration: none; 
					padding-top: 55px;
					padding-bottom: 20px;
				}
	
   .contentCallout {
     	width: 520px;
		height: 104px;
		margin: 15px auto 0;
		background: url("../images/callout_background.png") no-repeat center top;
	} 
	
	
	.contentCallout .button {
		padding-top: 37px;
		text-align: center;
	}
	

	
/*************  FOOTER SECTION **************/

#footerInfo {
	background: url('../images/footer_info.gif') no-repeat;
	width: 767px;
	height: 43px;
	margin: 0 auto;
	margin-top: 10px;
	padding: 10px;
	padding-top: 17px;
	}
	#footerInfo img {
		width: 193px;
		height: 45px;
		float: right;
		margin-top: -5px;
	}

#footer {
	padding: 10px 0px;
	width: 787px;
	color: #1c8bb7;
	margin: 0px auto;
	font-size: 10pt;
	text-align: right;
	}
	#footer .hr{
		padding-bottom: 10px;
		}
		
.image_with_caption {
	margin: 14px 7px;
}

	.image_with_caption .image {
		
	}

	.image_with_caption .caption {
	    font-size: 8pt;
		font-style: italic; 
		text-align: center;
		line-height: 14pt;
	} 
	
	
input#loginEmail {
	width: 200px;
	background: url("../images/input_email.png") no-repeat top left;
}


input#loginPasswd {
	width: 150px;
	background: url("../images/input_passwd.png") no-repeat top left;
}	