/* ----------------------------------------------------------------------------
	Import external stylesheets
-----------------------------------------------------------------------------*/

@import url(typography.css);
@import url(navigation.css);
@import url(content.css);


/* ----------------------------------------------------------------------------
	Remove margin, padding and border from everything
-----------------------------------------------------------------------------*/

* { margin: 0 auto; padding: 0; }



/* ----------------------------------------------------------------------------
	Styles
-----------------------------------------------------------------------------*/

.clearall { clear:both; margin: 0; padding: 0; }

.right { float: right; }

.left { float: left; }

.clear { clear: both; }




/* ----------------------------------------------------------------------------
	Global Layout
-----------------------------------------------------------------------------*/

body {
	background: #3f84b9 url(images/optifast/bkg_fade.gif) top left repeat-x;
	margin: 35px auto;
	text-align: center;
	}
	
#wrapper {
	width: 810px; /*frame width */
	margin: 0 auto; /* centering the page */
	text-align: left;
	background: transparent url(images/optifast/bkg_crnr_mid.gif) top center repeat-y;
	/* initial typography settings */
	font: 100 11px/1.8em "verdana", arial, helvetica, sans-serif;
	color: #646363;
	}
	
.masthead {
	background: transparent url(images/optifast/bkg_crnr_top.gif) top center no-repeat;
	}
	
	
/* ----------------------------------------------------------------------------
	Shell
-----------------------------------------------------------------------------*/
	
#header {
	background: transparent url(images/optifast/bkg_hdr_grnfade.png) top center no-repeat;
	margin: 0 5px;
	border-bottom: 5px solid #77b800;
	text-align: right;
	}
	
.logo {
	float: left;
	margin: 20px 0 10px 20px;
	}
	
.topLinks {
	float: right;
	margin: 8px 15px 5px 0;
	font-size: 10px;
	}
	
/* Show only to IE PC \*/
* html .topLinks {margin: 8px 5px 5px 0;} /* For IE 5 PC */


.topLinks a:Link, .topLinks a:visited {
	text-decoration: none;
	color: #646363;
	}
	
.topLinks a:hover {
	text-decoration: underline;
	color: #646363;
	}
	
.searchBox {
	margin-top: 15px;
	clear: both;
	}
	
#content {
	width: 800px;
	background: #f7fbfe url(images/optifast/nav_bkgfade.png) top left repeat-x;
	border-bottom: 1px solid #ccc;
	text-align: left;
	}
	
	
/* ------------------------------------------------------------------
	left column (navigation)
------------------------------------------------------------------ */
	
#leftCol {
	float: left;
	width: 210px;
	}
	
/* Show only to IE PC \*/
* html #leftCol {width: 195px;} /* For IE 5 PC */



/* ------------------------------------------------------------------
	main column (content)
------------------------------------------------------------------ */
	
#mainCol {
	float: right;
	width: 530px;
	background: #fff;
	padding: 45px 30px 0px 30px;
	min-height: 400px; 
	height:auto;
	}
	
#mainCol2{
	background:#FFFFFF;
	float:right;
	padding:0px 30px 20px;
	width:530px;
}
#mainCol3 {
	float: right;
	width: 532px;
	background: #fff;
	padding: 45px 30px 0px 28px;
	min-height: 400px; 
	height:auto;
	}

/* for Internet Explorer */
/*\*/
* html #mainCol { height: 450px; }
/**/
	
	

/* ------------------------------------------------------------------
	footer
------------------------------------------------------------------ */
	
#footer {
	clear: both; /* clears all content */
	background: transparent url(images/optifast/bkg_crnr_btm.gif) bottom center no-repeat;
	}
	
#footerLinks {
	background: transparent url(images/optifast/bkg_footer.png) bottom center no-repeat;
	padding: 10px 0 15px;
	text-align: center;
	}

#footerLinks ul {
	text-align: center;
	list-style: none;
	padding: 0;
	margin: 0 auto;
	}
	
#footerLinks li {
	display: inline;
	margin: 0;
	padding: 0;
	}

#footerLinks li a {
	display: inline;
	padding: 0 4px 0 2px;
	font-size: 90%;
	color: #464646;
	text-decoration: none;
	border-right: 1px solid #464646;
	}
	
#footerLinks li.last a {
	border-right: none;
	}
	
#footerLinks a {
	text-decoration: none;
	}
	
#footerLinks a:hover {
	text-decoration: underline;
	}
	
#footer p.legal a:hover {
	color: #646363;
	text-decoration: underline;
	}
	
/* ------------------------------------------------------------------
	popup
------------------------------------------------------------------ */

#popupBody{


	background: #EBF5FB url(images/optifast/bkg_submitStory.gif) no-repeat scroll left top;
}

#calculator_bg 
{
 background: url("Images/Optifast/calculator_background.jpg") no-repeat;
 width: 530px;
 height: 191px;
}

#calculator_bg h1, #calculator_bg p 
{
 margin-left: 15px;
}

#quote_bg 
{
 background: url("Images/Optifast/quote_bg.jpg") no-repeat;
 width: 527px;
 height: 151px;
 margin-top: 27px;
 margin-bottom: 27px;
}

#quote_bg p 
{
 margin-left: 15px;
 margin-right: 15px;
}

.quote 
{
 font-style:italic;
 color: #ffffff;
 font-size: 15px;
 line-height:normal;
 font-weight: bold;
 margin-top: 10px;
 float: left;
}

.learn_more 
{
 float: right;
 color: #0a89d4;
 font-size: 15px;
 font-style:italic;
 margin-top: -10px;
}

.quote_attrib 
{
  line-height: normal;  
}

#adv_quote 
{
 background: url("Images/Optifast/advantage_quote_bg.jpg") no-repeat;
 width: 527px;
 height: 115px;
 margin-top: 27px;
 margin-bottom: 27px;
}

#adv_quote p 
{
 margin-left: 15px;
 margin-right: 15px;
}

#evidence_quote
{
 background: url("Images/Optifast/evidence_quote_bg.jpg") no-repeat;
 width: 527px;
 height: 97px;
 margin-top: 15px;
 margin-bottom: 27px;
}

#evidence_quote p 
{
 margin-left: 15px;
 margin-right: 15px;
}

#sonny_link 
{
 background: url("Images/Optifast/sonny_button.jpg") no-repeat;
 width: 417px;
 height: 29px;  
 float: left;
 margin-bottom: 20px;
}

#sonny_section
{
  width: 520px;'
  margin-bottom: 15px;

}