/*==============================
														GLOBALS
														Sets the default document font size, family
														and color
														===============================*/
body {
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#3f4a4e;
		text-align: center;
		background-color:#a1a4a1;
}

p, li, a, span, em { font-family:Arial, Helvetica, sans-serif; }

p {
		padding-left:10px;
		padding-right:10px;
		line-height:20px;
}

p a {
		color:#3f4a4e;
		font-style:italic;
		text-decoration:none;
}

p a:hover {
		color:#3f4a4e;
		font-style:italic;
		text-decoration:underline;
}

li { line-height:20px; }

a { color:white; }

.clear {
		margin-top:10px;
		margin-bottom:10px;
		clear:both;
}

h1, h2, h3, h4 {
		font:Arial, Helvetica, sans-serif;
		font-weight:bold;
		font-size:16px;
		text-align:center;
		color:#664975;
}

h1 {
		font-size:20px;
		margin-bottom:20px;
		margin-top:20px;
}

h2 {
		display:block;
		vertical-align:top;
		font-size:14px;
		text-align:center;
		margin-bottom:10px;
}

h3 { font-size:13px; }

h4 {
		font-size:14px;
		font-style:italic;
		text-align:left
}

.nextpage { font-size:18px; }

.img-mar { margin:10px; }

blockquote.style1 {
		padding: 8px;
		background-color: #faebbc;
		border-top: 1px solid #e1cc89;
		border-bottom: 1px solid #e1cc89;
		margin: 5px;
		background-image: url(images/open-quote.gif);
		background-position: top left;
		background-repeat: no-repeat;
		text-indent: 23px;
}

blockquote.style1 span {
		display: block;
		background-image: url(images/close-quote.gif);
		background-repeat: no-repeat;
		background-position: bottom right;
}

blockquote.style1 span a {
		text-decoration:underline;
		color:#3f4a4e;
}

blockquote.style1 span a:hover { font-weight:bold; }

ul.members-menu, ul.members-menu ul {
		width: 209px;                 /* sets the size of the menu blocks */
		background-color: #F2F3D1;      /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */
		padding-left: 0px;           /* stops the usual indent from ul */
		cursor: default;             /* gives an arrow cursor */
}

ul.members-menu li {
		list-style:none;
		background:#FDFAB1 url(images/arrow.gif) no-repeat center left;
		margin: 0px;                 /* Opera 7 puts large spacings between li elements */
		position: relative;
		padding: 8px;
		padding-left:35px;
		border-top: 1px solid #e1cc89;
		border-bottom: 1px solid #e1cc89;
		font-size:16px;
		color:#3F4A4E;
		text-align:left;
}

.members-menu li > ul {
		display: none;               /* hides child menu blocks - one of the most important declarations */
		position: absolute;          /* make child blocks hover without leaving space for them */
		top: 0px;                    /* position slightly lower than the parent menu item */
		left: 210px;
}

ul.members-menu li:hover, ul.members-menu li.CSStoHighlight {
		background-color: #ffa;      /* gives the active menu items a yellow background */
		color: #000;                 /* makes the active menu item text black */
}

ul.members-menu ul.CSStoShow {     /* must not be combined with the next rule or IE gets confused */ display: block;              /* specially to go with the className changes in the behaviour file */ }

ul.members-menu li:hover > ul {    /* one of the most important declarations - the browser must detect hovering over arbitrary elements
                                  the > targets only the child ul, not any child uls of that child ul */ display: block;              /* makes the child block visible - one of the most important declarations */ }

/* and some link styles */
ul.members-menu li a {
		color: #3F4A4E;
		display: block;
		width: 100%;
		text-decoration: none;
}

ul.members-menu li a:hover, ul.members-menu li a.CSStoHighLink { color: #000; }

ul.members-menu li:hover > a { color: #000; } /* supports links in branch headings - should not be display: block; */

.selected {
		background-color:#3F4A4E;
		font-weight:700;
}

/*==============================
																SITE WRAPPER
														===============================*/
#full-wrapper { margin-top:0px; }

#site-wrapper {
		margin: 0 auto;
		width:900px;
		min-height:600px;
		text-align: left;
}

/*==============================
																HEADER WRAPPER
														===============================*/
#header-wrapper {
		width:900px;
		height:54px;
		margin-top:0px;
}

/*==============================
																HEADER CONTENT
														===============================*/
#header-left {
		float:left;
		width:10px;
		background-image:url("images/header-left.gif");
		height:121px;
}

#header-main {
		float:left;
		width:880px;
		height:121px;
		display:inline;
		background-image:url("images/header-main.gif");
}

#header-right {
		float:left;
		display:inline;
		width:10px;
		height:121px;
		background-image:url("images/header-right.gif");
}

#header-left-members {
		float:left;
		width:10px;
		background-image:url("images/header-left-members.gif");
		height:84px;
}

#header-main-members {
		float:left;
		width:880px;
		height:84px;
		display:inline;
		background-image:url("images/header-main-members.gif");
}

#header-right-members {
		float:left;
		display:inline;
		width:10px;
		height:84px;
		background-image:url("images/header-right-members.gif");
}

#header-title { 
		float:left;
		margin-top:5px;
		width:214px;
}

#header-content-container {
		float:left;
		width:660px;
}

#header-content {
		float:left;
		padding-top:43px;
		padding-left:25px;

}

#header-content h1 {
		color:#595d66;
		margin:0;
}


/*HEADER MENU*/

/* This sets the position of the menu */
#quick-links {
		float:right;
		width:280px;
		height:39px;
		background-image:url("images/quick-links.gif");
		margin-top:0;
}

#quick-links:hover { background-image:url("images/quick-links-hover.gif"); }

#quick-links ul {
		padding-left:15px;
		padding-top:5px;
		list-style:none;
		font-size:18px;
}

#quick-links li {
		float:left;
		color:white;
}

#quick-links ul li a { text-decoration:none; }

#quick-links ul li a:hover { text-decoration:underline; }

/*==============================
																		MAIN MENU
		 													===============================*/
														
#menu { clear:both; }

#menu ul {
		list-style:none;
		font-size:18px;
		margin-left:0px;
}

#menu ul li { margin-top:10px; }

#menu ul li a { text-decoration:none; }

#menu ul li a:hover { text-decoration:underline; }

#menu .addtional {
		width:13.5%;
		float:left;
		text-align:center;
}

#menu .current {
		width:14%;
		float:left;
		text-align:center;
}

.menu-top { font-size:9px; }

/*==============================
																		BODY WRAPPER
																===============================*/
#body-wrapper {
		margin-top:10px;
		padding-bottom:40px;
		float:left;
		width:900px;
		min-height:530px;
}

/*==============================
															
															===============================*/

#main-container {
		float:left;
		width:670px;
}

.main-container-right {
		float:right;
		width:670px;
}																	/*==============================
																			SECOND COLLUMN
																	===============================*/

#secondcol {
		float:right;
		width:210px;
		margin-left:15px;
		margin-right:1px;
}

#userarea { margin-right:15px; }

#weight-loss-box {
		width:670px;
		background:url(images/long-middle.gif) repeat-y;
		margin-top:10px;
}

#weight-loss-box-900 {
		width:900px;
		background:url(images/900-long-middle.jpg) repeat-y;
		margin-top:10px;
}
.weight-loss-top {
		padding: 2px 5px 5px;
		background: url(images/long-top.gif) no-repeat top left;
		text-align:center;
		font-size:5px;
		height:12px;
} 

.weight-loss-top-900 {
		padding: 2px 5px 5px;
		background: url(images/900-long-top.jpg) no-repeat top left;
		text-align:center;
		font-size:5px;
		height:16px;
	
	}

.weight-loss-bottom {
		clear:both;
		background: url(images/long-bottom.gif) no-repeat bottom left;
		padding: 0px 0 0px 20px;
}

.weight-loss-bottom-900 {
		clear:both;
		background: url(images/900-long-bottom.jpg) no-repeat bottom left;
		padding: 0px 0 0px 20px;
}
.weight-loss-container {
		padding-left:10px;
		padding-right:10px;
		text-align:center;
}

.left { float:left; }

.right { float:right; }

.text-left { text-align:left; }

.text-right { text-align:right; }

/*==============================
																		BODY CONTENT - RIGHT
																===============================*/
	
.side-content {
		width: 210px;
		background:url(images/small-middle.gif) repeat-y;
		margin-top:10px;
}

.title-small {
		padding: 3px 20px 10px;
		background: url(images/small-top.gif) no-repeat top left;
		text-align:center;
		font-size:18px;
}

.rounded-bottom {
		background: url(images/small-bottom.gif) no-repeat bottom left;
		padding: 10px 0 5px 20px;
}

/*==============================
															TOP CONTAINER SEARCH AND ADVERT
															===============================*/

#main-container {
		float:left;
		width:670px;
}

#search-box {
		width:670px;
		background:url(images/long-middle.gif) repeat-y;
		margin-top:10px;
		position:relative;
}

/*



	
	
																/*==============================
																			TEST JUNK
																===============================*/

.text-box-container {
		width:300px;
		margin-left:15px;
		margin-right:1px;
}

.text-box {
		width: 300px;
		background-color:#A8B144;
}

.green-top { background: url(images/green-box-top.jpg) no-repeat top left; }

.green-bottom { background: url(images/green-box-bottom.jpg) no-repeat bottom left; }

.testimonials li a {
		text-decoration:none;
		color:#3f4a4e;
}

.testimonials li a span { font-weight:bold; }

.testimonials li a:hover { text-decoration:underline; }

#contact-area {
		width: 500px;
		margin-top: 25px;
}

#contact-area input, #contact-area textarea {
		padding: 5px;
		width: 420px;
		font-family: Helvetica, sans-serif;
		font-size: 1.4em;
		margin-left: 15px;
		border: 2px solid #ccc;
}

#contact-area textarea { height: 90px; }

#contact-area textarea:focus, #contact-area input:focus { border: 2px solid #900; }

#contact-area input.submit-button {
		width: 100px;
		margin-top:20px;
		margin-left:175px;
}

td.left {
		width: 100px;
		text-align: left;
		font-size: 1.4em;
}

#recaptcha_widget_div { margin-left:165px; }

/*==============================
																			Page Specific
																===============================*/
																
																/*==============================
																healthy-eating-plan.php
																===============================*/
						
table.food-table tr td { vertical-align:middle; }

.intashape-day-box { border: thick solid #C00; }

/*==============================
																fat-content-of-food.php
																===============================*/



.fat-content tr td { border-bottom:#999 thin solid; }

/*SLIDER*/
		
			p#cross-links { text-align: center }

.stripViewer .panelContainer .panel ul {
		text-align: left;
		margin: 0 15px 0 30px;
}

.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
		margin: 5px 0;
		position: relative;
		width: 100%;
}

/* These 2 lines specify style applied while slider is loading */
.csw {
		width: 100%;
		height: 250px;
		background: #fff;
		overflow: scroll
}

.csw .loading {
		margin: 200px 0 300px 0;
		text-align: center
}

.stripViewer { /* This is the viewing window */
		position: relative;
		overflow: hidden;
		margin: auto;
		width: 520px; /* Also specified in  .stripViewer .panelContainer .panel  below */
		height: 320px;
		clear: both;
		background: #fff;
}

.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		list-style-type: none;/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
		float:left;
		height: 100%;
		position: relative;
		width: 520px; /* Also specified in  .stripViewer  above */
}

.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */ padding: 10px; }

.stripNav { /* This is the div to hold your nav (the UL generated at run time) */ margin: auto; }

.stripNav ul { /* The auto-generated set of links */ list-style: none; }

.stripNav ul li {
		float: left;
		margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
}

.stripNav a { /* The nav links */
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		line-height: 32px;
		color:#8096ac;
		text-decoration: none;
		display: none;
		padding: 0 15px;
}

.stripNav li a:hover { background: #333; }

.stripNav li a.current {
		text-decoration:underline;
		font-weight:bold;
}

.stripNavL, .stripNavR { /* The left and right arrows */
		position: absolute;
		top: 150px;
		text-indent: -9000em;
		z-index:100;
}

.stripNavL a, .stripNavR a {
		display: block;
		height: 40px;
		width: 40px;
}

.stripNavL { left: 0; }

.stripNavR { right: 0; }

.stripNavL { background: url("images/arrow-left.gif") no-repeat center; }

.stripNavR { background: url("images/arrow-right.gif") no-repeat center; }

/*==============================
																			Book Panels
																		===============================*/
.smallbook {
		float:left;
		text-align:center;
		width:140px;
}

.middle {
		padding-left:35px;
		padding-right:35px;
}

.smallbook p {
		color:#8096ac;
		font-size:14px;
		font-weight:bold;
		height:30px;
		overflow:hidden;
}

.smallbook title-image img {
		display:block;
		margin-left:15px;
		max-height:170px;
}

.title-image { height:220px; }