/*PEAK HEALTH*/
/*Rebekah Northey | Andrew Ellsion*/
/*December 2009*/

/* GLOBAL STYLES */

html, body {
	height: 100%; 
	margin: 0 0 1px; 
	padding: 0; 
	color:#367f7f;
	}
	
body {
	background: url(../img/bg_main.png) repeat-x #cde8ed;
	font-family:Arial, Helvetica, sans-serif;
	}
	
h1 {
	margin: 0;
	padding: 0;
	}
	
h2 {
	color: #fff;
	font-size:160%; 
	padding-left: 20px; 
	margin-bottom: 0;
	}
	
h3 {
	color: #367f7f; 
	font-size:130%; 
	padding-left: 20px;
	}
	
p {
	color:#367f7f; 
	line-height: 150%; 
	font-size: 100%; 
	margin: 0; 
	padding: 0;
	}
	
ul li a {
	color: #367f7f; 
	line-height: 40px;
	}
	

/*CUSTOM STYLES */

#page {
	padding: 0; 
	margin: 0;
	}
	
#wrapper {
	width: 800px; 
	margin: 0 auto; 
	padding: 0;
	}
	
#header {
	background: url(../img/header.png) no-repeat; 
	padding: 30px 0 0 0;
	}
	
#header img{
	padding: 30px 10px 0 10px;
	}
	
#header ul {
	padding: 0 20px;
	background-image: url(../img/bottom.png); 
	background-repeat:no-repeat; 
	background-position: bottom;
	background-color: #4a94b0;
	}
	
#header ul li {
	width: 125px; 
	height: 35px; 
	background: url(../img/nav_up.png) no-repeat; 
	text-align: center; 
	padding-top: 15px; 
	display: inline-block;
	}
	
#header ul li.current {
	background: url(../img/nav_down.png) no-repeat;
	}
	
#header ul li a {
	color: #fff; 
	font-size: 120%; 
	text-decoration: none; 
	line-height:normal;
	}
	
#content-wrap {
	padding-bottom: 130px; 
	background-image: url(../img/bottom.png); 
	background-repeat:no-repeat; 
	background-position: bottom;
	}
	
#content {
	overflow: hidden;
	padding: 0; 
	padding-top: 40px;
	background-image: url(../img/content.png); 
	background-repeat:no-repeat; 
	background-position: top;
	}
	
.image {
	text-align: center;
	padding-top: 20px;
	}
	
#content div {
	float: left;  
	width: 33.3%;
	}
	
#content .col2 input{
	margin: 0 10px 18px -10px;
	}
	
#content .col2 ul li {
	list-style:none;
	}
	
.box ul li a {
	margin-left: -20px;
	line-height: 150%;
	}
	
#content div p {
	padding: 0 20px;
	}
	
#footer {
	background: url(../img/bg_footer.png) repeat-x top center; 
	height: 160px; 
	margin-top: -160px; 
	position: relative; 
	clear:both;
	}
	
#footer p {
	text-align: center; 
	padding-top: 115px; 
	color: #fff; 
	font-size:80%;
	}
	
#footer a {
	color: #fff;}
	
body > #page {
	height: auto; 
	min-height: 100%;
	}
	
#content div input.textbox, #content div textarea.textbox {
	float: right;
	}
	
#content div input.textbox {
	margin-bottom: 10px;
	}
	
#content div#shop {
	padding: 0 20px; 
	width: 100%;
	}
	
#content div#shop p {
	padding: 0; 
	margin-right: 30px;
	}
	
#content div#shop h3 {
	padding: 0;
	}
	
table#food {
	width: 95%; 
	margin: 0;
	}

#content div textarea.textbox {
	margin: 20px 0;
	}
	
#content div form p {
	margin: 20px 0;
	}

#content div#counter {
	padding: 0 20px;
	width: 100%;
	}
	
#content div#counter h3 {
	padding: 0;
	}

 /* CLEAR FIX*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
	
.clearfix {
	display: inline-block;
	}
	
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
	}
	
.clearfix {
	display: block;
	}
	
/* End hide from IE-mac */

/* CALORIE COUNTER CSS */
#content div#results {
	width: 740px;
	background-color: #00CC00;
	display: none;
	padding: 10px;
	margin: 20px;
	height: 25px;
	color: #FFFFFF;
	}

#content div#counter-select-list {
	margin-left: 20px;
	width: 300px;
	background-color: #E9E9E9;
	}
	
#content div.counter-item {
	width: 140px;
	}
#content div#counter-drop-area {
	background-image: url(../img/plate.png);
	width: 513px;
	background-position: center center;
	height: 400px;
	margin-right: 20px;
	background-repeat: no-repeat;
	float:left;
	}

/* THIRD COLUMN STYLING COL LAYOUT */

#content div#third {
	margin-right: 20px;
	width: 250px;
	}
	
#content div#third h3 {
	color: #FFFFFF; 
	font-size:130%; 
	padding-left: 20px; 
	margin-bottom: 0;
	}
	
#content div#third p {
	color: #FFFFFF; 
	padding-left: 20px;
	}

#content div#tip {
	width: 100%;
	background-image: url(../img/tip.jpg);
	}
	
#content div#tip-bottom {
	width: 100%;
	background-image: url(../img/tip-bottom.jpg);
	height: 24px;
	margin-bottom:20px;
	}

#content div#newsletter {
	width: 100%;
	background-image: url(../img/newsletter.jpg);
	}
	
#content div#newsletter-bottom {
	width: 100%;
	background-image: url(../img/newsletter-bottom.jpg);
	height: 25px;
	margin-bottom:20px;
	}
	
#content div#survey {
	width: 100%;
	background-image: url(../img/survey.jpg);
	}
	
#content div#survey-bottom {
	width: 100%;
	background-image: url(../img/survey-bottom.jpg);
	height: 25px;
	margin-bottom:20px;
	}
.more {
	padding: 0;
	margin: 0;
	margin-left: 20px;
	}
	
.more a {
	text-decoration: none;
	background-image: url(../img/more-left.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left:7px;
	height: 34px;
	color: #FFFFFF;
	font-weight: bold;
	}

.more a span {
	background-image: url(../img/more-right.png);
	background-repeat: no-repeat;
	background-position: right top;
	padding-right: 7px;
	vertical-align: middle;
	}




.more a, .more a span {
	display: block;
	float: left
	}

/* Hide from IE5-Mac \*/
	.more a, .more a span {
	float: none
	}
/* End hide */

.more a:hover {
	background-image: url(../img/more-left-over.png);
	}

.more a:hover span {
	background-image: url(../img/more-right-over.png);
	background-repeat: no-repeat;
	background-position: right top;
	}

.more ul {
	list-style: none;
	padding: 0;
	margin: 0
	}

.more li {
	list-style: none;
	float: left;
	margin-left: 0px;
  	padding-left: 0px;
	} 

.more-action {
	padding: 0;
	margin: 0;
	margin-left: 20px;
	margin-bottom: 20px;
	margin-top: 10px;
	}

.more-action a {
	text-decoration: none;
	background-image: url(../img/more-action-left.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left:7px;
	height: 34px;
	color: #FFFFFF;
	font-weight: bold;
	}

.more-action a span {
	background-image: url(../img/more-action-right.png);
	background-repeat: no-repeat;
	background-position: right top;
	padding-right: 7px;
	vertical-align: middle;
	}




.more-action a, .more-action a span {
	display: block;
	float: left
	}

/* Hide from IE5-Mac \*/
.more-action a, .more-action a span {
	float: none
	}

/* End hide */
.more-action a:hover {
	background-image: url(../img/more-action-left-over.png);
	}

.more-action a:hover span {
	background-image: url(../img/more-action-right-over.png);
	background-repeat: no-repeat;
	background-position: right top;
	}

.more-action ul {
	list-style: none;
	padding: 0;
	margin: 0
	}

.more-action li {
	list-style: none;
	float: left;
	margin-left: 0px;
  	padding-left: 0px;
	} 

/* END COL CSS */