/* 1. Basic Page Styles ----------------------------------------------------------------------------------- */

body { 
	background-color: #ffffff;
	color: #000000;			
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
	padding: 0px }
/* Outer container for entire website - centers everything */
#outerwrapper {
	width: 100%;
	text-align: center;
	margin-left: auto;
	margin-right: auto }

/* 2. Header Section Styles --------------------------------------------------------------------------------- */

/* 2.a. Header Section Container - width 100% - contains banner, logo, menu */
#topsection { 
	background: #97c3c4; 
	margin: 0px; }

/* 2.b. Styles for Banner Header Section - includes background image of banner and logo as well as H1 Logo (hidden of side of screen) */
#header { 
	position: relative;
	background: #97c3c4;
	color: #000000;
	background: url(images/bannerback.jpg) center ;
	text-align: center;
	height: 120px;
	border-top: 2px solid #97c3c4 }
#header h1 { 	 							/* Page header, for SEO and accessability only */
	font-size: 1px;
	margin: 0px;							/* Take up only 1px of vertical space */
	padding: 0px;
	position: absolute;
	left:-2000px }							/* hidden off side of page */

/* 2.c. Styles for Main Menu */

/* 2.c.i. Main Menu Container - full screen width - contains main menu (not full screen width) */
#mainmenucontainer {
	background: #decf6d;
	color: #000000;
	text-align: center;
	padding: 5px 0px 5px 0px;
	border: 2px solid #97c3c4 }
	
/* 2.c.ii. Styles for Main Menu */
/* Main Menu Outer Container */
#mainmenu { 								/* centered and fixed width - just barely wide enough for buttons */
	width: 910px;	
	margin-left: auto;
	margin-right: auto;
	background: #decf6d }
/* Styles for Main Menu - Adapted from dynamicdrive.com */
.indentmenu { 
	width: 100%;							/* leave this value as is in most cases */
	font: normal 16px verdana } 			/* was "bold 13px Arial" in original code */
.indentmenu ul { 
	width: 100%; 				/* width of menu -- was 80% in original code */
	float: left;
	margin: 0;
	padding: 0;
	border: 0px; 
	background-color: #decf6d } 			/* was "url(images/indentbg.gif) center center repeat-x" in original code */
.indentmenu ul li { 
	display: inline }
.indentmenu ul li a { 
	float: left;
	color: #ffffff; 
	padding: 5px 22px;
	text-decoration: none;
	border-right: 4px solid #decf6d;
	border-left: 4px solid #decf6d;
	background: #decf6d url(images/indentbg.gif) center center repeat-x }
.indentmenu ul li a:visited { 
	color: #ffffff;
	background: #decf6d url(images/indentbg.gif) center center repeat-x; }
.indentmenu ul li a:hover, .indentmenu ul li .current {	
	color: #990000 !important; 				/* text color of selected and active item */
	padding-top: 6px; 						/* shift text down 1px for selected and active item */
	padding-bottom: 4px; 					/* shift text down 1px for selected and active item */
	background: black url(images/indentbg2.gif) center center repeat-x }
/* End of dynamicdrive.com's styles */

/* 3. Center Section Styles ---- Container for Contents wrapper, nicely centered between two sidebars --------------------------- */
/* 3.a. Center Section Outer Container */
#centersection {
	background: #ffffff;
	float: left;
	width: 100% }

/* 3.b. Content Wrapper Styles - Container for Left Column (Menu and Sponsored Links) and Text Column (all other contents) */
#contentwrapper {
	max-width: 1060px;
	min-width: 860px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	background: #ffffff;
	overflow: hidden; }
	
/* 3.c. Left Column Styles - Container for Left Vertical Menu and Sponsored Links Section */
#leftcolumn {
	float: left;
	width: 360px;
	background: #ffffff;
	text-align: left;
	padding: 0px;
	margin: 0px }				

/* 3.c.i. Breadcrumb Styles - Section removed from later version of the website */
#breadcrumbs { 
	background: transparent;
	color: #11338b;
	font: normal 11px verdana, arial, helvetica, sans-serif;
	border: 0px;
	margin: 5px }
#breadcrumbs a { 
	background: transparent; 
	text-decoration: none; 
	color: #11338b; 
	padding: 0px 5px 0px 0px }
#breadcrumbs a:hover { 
	background: transparent; 
	text-decoration: none; 
	color: #990000; 
	padding: 0px 5px 0px 0px }
.currentbreadcrumb { 
	color: #990000 }
	
/* 3.c.ii. Vertical Menu Styles */
/* Vertical Menu Container Styles */
#verticalnavcontainer { 
	width: 360px;							/* was 330px - this is same as sponsored links container width */
	text-align: left;
	background: #ffffff url(images/verticalmenubackimage.gif);
	border: 0px;
	padding: 0px;	
	margin: 0px 0px 0px 0px;				
	vertical-align: top	}
#verticalnavtopimage { 
	width: 360px;							/* must be same as verticalnavcontainer */
	height: 15px;
	background: #ffffff url(images/verticalmenutopimage.gif);
	border: 0px;
	padding: 0px;	
	margin: 5px 0px 0px 0px }
#verticalnavbottomimage { 
	width: 360px;							/* must be same as verticalnavcontainer */
	height: 37px;
	background: #ffffff url(images/verticalmenubottomimage.gif);
	border: 0px;
	padding: 0px;	
	margin: -5px 0px 10px 0px }				/* UNSURE WHY THE NEGATIVE IS NEEDED FOR FIREFOX AND OPERA BUT NOT FOR IE */

/* Vertical Menu Contents Styles */
/* Header for vertical menu */
.verticalmenuheader { 
	text-align: center;
	background: transparent;	
	color: #11338b;
	font: normal 16px verdana, arial, helvetica, sans-serif;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 5px 0px }
/* Vertical Menu List Styles - adapted from Dynamic Drive "Glossy Vertical Menu" code */
.verticalmenu { 
	width: 320px; 
	list-style-type: none;
	margin: 5px 20px 5px 20px;
	padding: 0px 0px 5px 0px;
	border: 0px;
	border-bottom-width: 0px }
.verticalmenu li a {
	background: #cbe7e8 url(images/verticallinkback.gif) bottom left no-repeat; 
	font: normal 14px arial, helvetica, sans-serif; /* was "12px verdana..." */
	color: #11338b;
	display: block;
	width: auto;
	padding: 3px 0px 3px 0px;
	padding-left: 10px;
	text-decoration: none }
* html .verticalmenu li a { 			/*IE only. Actual menu width minus left padding of A element (10px) */
	width: 310px }				
.verticalmenu li a:visited { 
	color: #11338b; 
	background: #ffffff url(images/verticallinkback.gif) bottom left no-repeat; }
.verticalmenu li a:hover, .verticalmenu li a:active, #verticalcurrent { 
	color: #990000; 
	background: #ffffff url(images/verticallinkback2.gif) bottom left no-repeat; }
/* End of vertical menu styles */
	
/* 3.c.iii. Sponsored Links Section Styles */
/* Sponsored Links Container Styles */
#sponsoredlinkscontainer { 
	width: 360px;						/* personalloans.com is 330px - THIS IS THE STANDARD WIDTH FOR SPONSORED LINKS */
	text-align: left;
	/*background: #ffffff url(images/sponsoredlinksbackimage.gif);*/
	border: 0px;
	padding: 0px;	
	margin: 0px;				
	vertical-align: top	}
#sponsoredlinkstopimage { 
	width: 360px;						/* must be same as sponsoredlinkscontainer */
	height: 15px;
	/*background: #ffffff url(images/sponsoredlinkstopimage.gif);*/
	border: 0px;
	padding: 0px;	
	margin: 5px 0px 0px 0px }
#sponsoredlinksbottomimage { 
	width: 360px;						/* must be same as sponsoredlinkscontainer */
	height: 37px;
	/*background: #ffffff url(images/sponsoredlinksbottomimage.gif); */
	border: 0px;
	padding: 0px;	
	margin: 0px 0px 10px 0px }			/* UNSURE WHY THE NEGATIVE IS NEEDED FOR FIREFOX AND OPERA BUT NOT FOR IE */
	
/* Sponsored Links Contents Styles */
	/* NOTE: FOLLOWING BATCH OF STYLES ALL TAKEN FROM PERSONALLOANS.COM SO THAT THEY COMFORM TO THE USUAL SPONSORED LINKS FORMATTING */
#sponsoredlinkscontainer span.resultsHeader { 
	margin: 0px 15px 0px 15px; 
	padding: 5px 0px 5px 0px; 
	color: #666666; 
	font-family: arial, helvetica, sans-serif;
	font-weight: normal; 
	font-size: 9px }
#sponsoredlinkscontainer span.resultsHeader a { 
	color: #666666 } 
#sponsoredlinkscontainer ul.resultList { 
	margin: 0px 15px 0px 15px; 
	padding: 5px 0px 5px 0px; 
	list-style-type: none }
#sponsoredlinkscontainer a.resultTitle, span.resTitle { 
	color: #0033cc; 
	font-family: arial, helvetica, sans-serif; 
	font-size: 14px }
#sponsoredlinkscontainer a.resultHost{ 
	color: #000000; 
	font-family: arial, helvetica, sans-serif; 
	font-size: 14px; 
	text-decoration: none }
a.resLink { 
	color: #1b8a2c; 
	font-family: arial, helvetica, sans-serif; 
	font-size: 14px; 
	text-decoration: none }	
#sponsoredlinkscontainer a.resultDesc, pre { 
	color: #000000; 
	font-family: arial, helvetica, sans-serif; 
	font-size: 12px; 
	text-decoration: none; }
#next { 									/* Styles for the word "next" under sponsored links list */
	margin: 0px 15px 0px 15px; 
	padding: 10px 0px 15px 0px; 
	color: #0033cc; 
	font-family: arial, helvetica, sans-serif; 
	font-size: 14px; } 

/* 3.c.iv. Search Section Styles */
#searcharea { width: 100%; 					/* Container for search box and button */	
	background: transparent;
	color: #cccccc;
	text-align: center;
	border: 0px;
	margin: 10px 0px 20px 0px }
#searchheader { 
	background: transparent;
	color: #11338b;
	font: 16px verdana, arial, helvetica, sans-serif; 
	margin-bottom: 10px; }
#searchinputbox { font-size: 12px;
	text-align: left }
#searchbutton { font-size: 12px;
	text-align: center }
	
/* 3.d. Text Column Styles - Container for Article Headings, Article Text, Lists, Photos and all other contents */

/* 3.d.i. Text Column Container Styles */
#textcolumn {
	max-width: 700px;
	min-width: 400px;
	background: #ffffff;
	text-align: center;
	vertical-align: top;
	border: 0px;
	margin: 0px 0px 0px 360px; 			/* Margin-left is width of left column (vertical menu and sponsored links container)*/
	padding: 10px 0px 20px 0px }

#adcolumn {	
	width: 600px;
	background: #ffffff;
	text-align: left;
	vertical-align: top;
	border: 0px;
	margin: 0px 0px 0px 100px; 			/* Margin-left is width of left column (vertical menu and sponsored links container)*/
	padding: 10px 0px 20px 0px }


/* 3.d.ii. Website Section Title - contains hidden header text and textual image with reflection */
#sectiontitle { 	
	width: 99%;			
	position: relative;
	text-align: center;
	margin: 20px 0px 10px 0px; }
/* Section-specific sectiontitle styles, differing due to varying background image */
.homepagesectiontitle {	background: transparent url(images/sectiontitlehomepage.jpg) center no-repeat; height: 71px }
.gfcfdietsectiontitle { background: transparent url(images/sectiontitlegfcfdiet.jpg) center no-repeat; height: 71px }
.gfcfdietandhealthsectiontitle { background: transparent url(images/sectiontitlegfcfdietandhealth.jpg) center no-repeat; height: 71px } 
.glossarysectiontitle { background: transparent url(images/sectiontitleglossary.jpg) center no-repeat; height: 71px }
.linkssectiontitle { background: transparent url(images/sectiontitlelinks.jpg) center no-repeat; height: 71px }
.disclaimersectiontitle { background: transparent url(images/sectiontitledisclaimer.jpg) center no-repeat; height: 71px }
.sitemapsectiontitle { background: transparent url(images/sectiontitlesitemap.jpg) center no-repeat; height: 71px }
.searchsectiontitle { background: transparent url(images/sectiontitlesearch.jpg) center no-repeat; height: 71px }
/* Actual Section Title Header - hidden */
#sectiontitle h2 {	 						/* Page header, for SEO and accessability only */
	font-size: 1px;
	margin: 0px;							/* Take up only 1px of vertical space */
	padding: 0px;
	position: absolute;
	left:-2000px }							/* hidden off side of page */

/* 3.d.iii. Text Section Container - Contains article text, lists, and inline photos */
#textcontents { 
	margin: 0px;
	background: #ffffff;
	text-align: left }
	
/* 3.d.iv. Text Section Contents Styles */

/* Text Section Heading Styles */	
#textcontents h3 { 							/* Article/Page Title */
	font: normal 20px verdana, arial, helvetica, sans-serif;
	color: #11338b;
	margin: 5px 0px 10px 20px }		
#textcontents h4 {							/* Article Subheadings */
	font: normal 18px verdana, arial, helvetica, sans-serif;	
	color: #11338b;
	margin: 5px 0px 10px 20px}
	
/* Text Section Paragraph Styles */									
.introtext { 								/* Text paragraphs with extra emphasis for introduction - may not use */
	text-align: justify;	
	color: #666666;	
	font: bold 12px verdana, arial, helvetica, sans-serif;	
	line-height: 18px;
	margin: 0px 20px 10px 20px }					
.regulartext { 								/* Regular text paragraphs for pages and articles */
	text-align: justify;
	color: #666666;	
	font: normal 12px verdana, arial, helvetica, sans-serif;	
	line-height: 18px;
	margin: 0px 20px 10px 20px }
.disclaimer { 								/* Disclaimer text at bottom of pages */
	text-align: justify;
	color: #666666;	
	font: normal 10px verdana, arial, helvetica, sans-serif;	
	line-height: 12px;
	margin: 50px 20px 10px 20px }
	
/* Text Section List Styles */
.regularlist { 					/* Regular list in the contents of pages and articles - note: IE doesn't handle margins properly */
	list-style-type: circle;
	list-style-position: outside;
	text-align: justify;
	color: #666666;	
	font: normal 12px verdana, arial, helvetica, sans-serif;	
	line-height: 18px;
	margin: 0px 20px 10px 20px;
	padding: 0px 40px 0px 40px }
.regularlist li {											/* List items for regular lists in the contents of pages and articles */
	padding-bottom: 10px }
.glossarylist { 											/* List for Glossary page - note: IE doesn't handle margins properly */
	list-style-type: none;
	text-align: justify;	
	line-height: 18px;
	margin: 0px 20px 10px 20px;
	padding: 0px 40px 0px 40px }
.glossarylist dt {											/* List items term text for Glossary page */
	color: #11338b;
	font: normal 14px verdana, arial, helvetica, sans-serif;
	padding-bottom: 5px }
.glossarylist dd {											/* List item definition text for Glossary page */
	color: #666666;	
	font: normal 12px verdana, arial, helvetica, sans-serif;
	padding-bottom: 15px }

.articlelist { 											/* List for Glossary page - note: IE doesn't handle margins properly */
	list-style-type: none;
	text-align: justify;	
	line-height: 18px;
	margin: 0px 20px 10px 20px;
	padding: 0px 40px 0px 40px }
.articlelist dt {											/* List items term text for Glossary page */
	color: #11338b;
	font: normal 14px verdana, arial, helvetica, sans-serif;
	padding-bottom: 5px }
.articlelist dd {											/* List item definition text for Glossary page */
	color: #666666;	
	font: normal 12px verdana, arial, helvetica, sans-serif;
	padding-bottom: 15px;
	margin-left: 0; }

.articlelist dt a {
	text-decoration: none;
	color: #11338b; 
}
.articlelist dd a {
	text-decoration: none;
	color: #666666; 
}

	
/* Text Section Italics and Emphasis Styles */
.book { 													/* Italicised book titles */
	font-style: italic } 
.emphasis { 												/* Emphasis text to stand out */
	color: #666666; font-weight: bold }
	
/* Text Section Photo Styles*/
.leftimage { 												/* Image in flow of text, aligned to the left */
 	float: left; margin: 10px 10px 10px 20px; }					
.rightimage {  												/* Image in flow of text, aligned to the right */
	float: right; margin: 10px 20px 10px 10px; }
	
/* Text Section Link Styles */
.regulartext a:link { color: #666666; text-decoration: underline }		/* regular text section link */
.regulartext a:visited{ color: #666666; text-decoration: underline }	/* regular text section visited link */
.regulartext a:hover { color: #990000; text-decoration: underline }		/* regular text section mouseover link */
.introtext a:link { color: #666666; text-decoration: underline }		/* text section introduction link */
.introtext a:visited{ color: #666666; text-decoration: underline }		/* text section introduction visited link */
.introtext a:hover { color: #990000; text-decoration: underline }		/* text section introduction mouseover link */
.regularlist a:link { color: #666666; text-decoration: underline }		/* text section list link */
.regularlist a:visited{ color: #666666; text-decoration: underline }	/* text section list visited link */
.regularlist a:hover { color: #990000; text-decoration: underline }		/* text section list mouseover link */
	
/* Styles for Lists of Foods Tables - on intro pages */
#foodstable { 
	width: auto;
	text-align: left;
	vertical-align: top;
	background-color: #ffffff;
	border-right: 0px;
	margin: 0px 20px 10px 20px;
	padding: 0px 0px 20px 0px }
.foodstd { 
	vertical-align: top; 
	text-align: left;
	color: #666666;
	border: 0px dashed #11338b;
	margin: 0px;
	padding: 0px 20px 10px 20px }
/* Sitemap Text and Link Styles. */
.foodstd h5 { 
	font: normal 14px verdana, arial, helvetica, sans-serif;
	margin: 5px 0px 5px 0px; 
	color: #11338b }	
	
/* Styles for Sitemap page Text section. */
/* Sitemap Table Styles. */
#sitemaptable { 
	width: 100%;
	text-align: left;
	vertical-align: top;
	background-color: #ffffff;
	border-right: 0px;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 20px 0px }
.sitemaptd { 
	vertical-align: top; 
	text-align: left;
	margin: 0px;
	padding: 0px 20px 10px 20px }
/* Sitemap Text and Link Styles. */
.sitemaptd h4 { margin: 5px 0px 5px 0px; font-size: 16px; color: #11338b }
.sitemaptd .articlepagelink { font-size: 12px; line-height: 16px; text-decoration: underline; color: #666632 }
.sitemaptd #homepagelink { font-size: 16px; line-height: 16px; text-decoration: underline; color: #11338b }
.sitemaptd a:link { color: #666666; text-decoration: underline }		/* sitemap list section page link */
.sitemaptd a:visited{ color: #666666; text-decoration: underline }		/* sitemap list section page visited link */
.sitemaptd a:hover { color: #990000 }									/* sitemap list section page mouseover link */
#homepagelink a:link { color: #11338b; text-decoration: underline }		/* sitemap list section homepage link */
#homepagelink a:visited{ color: #11338b; text-decoration: underline }	/* sitemap list section homepage visited link */
#homepagelink a:hover { color: #990000 }								/* sitemap list section homepage mouseover link */

/* Styles for Search Results Page Results Section */
#searchresultscontainer { 
	text-align: left;
	background-color: #ffffff;
	border: 0px;
	padding: 15px 5px 20px 15px;
	margin: 0px 20px 10px 20px;				
	vertical-align: top	}
/* Styles for Search Results Page Results Section Links - These have been kept identical in style to the Sponsored Links section text */
#searchresultscontainer span.resultsHeader { margin: 0px 15px 0px 15px; padding: 5px 0px 5px 0px; color: #666666; font-family: arial, helvetica, sans-serif; font-weight: normal; font-size: 9px }
#searchresultscontainer span.resultsHeader a { color: #666666 } 
#searchresultscontainer ul.resultList { margin: 0px 15px 0px 15px; padding: 5px 0px 5px 0px; list-style-type: none }
#searchresultscontainer a.resultTitle { color: #0033cc; font-family: arial, helvetica, sans-serif; font-size: 14px }
#searchresultscontainer a.resultHost { color: #1b8a2c; font-family: arial, helvetica, sans-serif; font-size: 14px; text-decoration: none }
#searchresultscontainer a.resultDesc { color: #000000; font-family: arial, helvetica, sans-serif; font-size: 12px; text-decoration: none }
#nextresults { 									/* Styles for the word "next" under results list */
	margin: 0px 15px 0px 15px; 
	padding: 10px 0px 15px 0px; 
	color: #0033cc; 
	font-family: arial, helvetica, sans-serif; 
	font-size: 14px; } 


/* 4. Footer Section Styles -------------------------------------------------------------------------------- */
/* 4.a. Footer Outer Container Styles - Container for BOP Menu and Copyright Section */
#footer {
	clear: left;
	width: 100%;
	background: #decf6d;
	color: #FFF;
	text-align: center;
	padding: 4px 0px }

/* 4.b. BOP Navigation Menu Section Styles */	
#bopnavbar { 
	text-align: center;
	background: transparent;
	color: #11338b;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	border: 0px;
	margin: 0px;
	padding: 10px 0px 20px 0px }
/* BOP menu link styles */
.bopnav, .bopcurrent { text-decoration: none; margin: 0px 10px 0px 10px }
a.bopnav:link { color: #11338b }			/* b-o-p unvisited links */	
a.bopnav:visited { color: #11338b }			/* b-o-p visited links */
a.bopnav:hover { color: #990000 }			/* b-o-p hover links */
.bopcurrent { color: #990000 }				/* b-o-p current page link */
	
/* 4.c. Copyright Section Styles */
#copyright { 
	text-align: center;
	background: transparent;
	color: #ffffff;
	font-size: 10px;
	border: 0px;
	margin: 0px;
	padding: 5px 0px 7px 0px }
/* Copyright link styles */	
#copyright a { text-decoration: underline }
#copyright a:link { color: #ffffff }		/* copyright unvisited links */
#copyright a:visited { color: #ffffff }		/* copyright visited links */
#copyright a:hover { color: #990000 }		/* copyright mouseover links */