/* ------------------------------------ ## TOP NAVIGATION ## ----------------------------------- */

/* CURVY NAVIGATION AT THE TOP - controls all the tabs called "xmenu2" */

/* Change the 'background' to any colour you like for the 'top part'(the top line) of the navigation colour */
		.xb2, .xb3, .xb4 {
			background: #c3dae7; /* colour of top line */
			border-left: 1px solid #fff; /* x */
			border-right: 1px solid #fff; /* x */
		}
	
		.xb1 {
			margin: 0 5px; /* x */
			background: #fff; /* x */
		}
	
		.xb2 {
			margin: 0 3px; /* x */
			border-width: 0 2px; /* x */
			}
	
		.xb3 {
			margin:0 2px; /* x */
		}
	
		.xb4 {
			height: 2px; /* x */
			margin: 0 1px; /* x */
		}

/* BACKGROUND COLOUR OF NAVIGATION */
		.xboxcontent {
			display: block; /* x */
			background: #accce2; /* MAIN BACKGROUND COLOUR OF NAVIGATION */
			border: 0 solid #fff; /* x */
			border-width: 0 1px 1px 1px; /* x */
			font: 12px Verdana; /* font size + font family in the navigation */
		}

/* You can change the width of the navigation here. I have used "em" as the units here but you can alternatively use "px" if you like */
		a.xmenu2, a.xmenu2:visited {
			display: block; /* x */
			text-decoration: none; /* x */
			width: 10em; /* WIDTH OF TAB */
			font-size: 0.9em; /* x */
		}
	
		a.xmenu2:hover {
			background: transparent; /* x */
			cursor: pointer; /* changes cursor to finger when it hovers over link */
		}
	
/* This is the colour of the TEXT when you hover over it */	
		a.xmenu2:hover span {
			color: #000; 
		}

/* This is the colour of the BACKGROUND + SIDE BORDERS of the navigation when you hover over it */	
		a.xmenu2:hover .xboxcontent {
			background: #eee; /* bg colour  */
			border-color: #888; /* border colour - sides only */
			border-bottom: 1px solid #eee; /* bottom border colour when hovered over */
		}
	
		a.xmenu2:hover .xb1 {
			background: #888; /* colour of TOP BORDER of navigation when hovered over */
		}
	
/* This is the colour of the TOP LINE of the navigation when you hover over it and the CORNER BORDER colour */
		a.xmenu2:hover .xb2, a.xmenu2:hover .xb3, a.xmenu2:hover .xb4 {
			background: #fff; /* TOP LINE COLOUR OF NAV WHEN HOVERED OVER */
			border-color: #888; /* COLOUR OF CURVY CORNERS WHEN HOVERED OVER */
		}
		
/* ----------------------------------------------------------------------------------------------- */


/* ---------------------------------- ## XMENU3 TAB ## ------------------------------------ */
/* This is for the "xmenu3" button - you can adjust the "width" to whatever you like */
a.xmenu3, a.xmenu3:visited {
	display: block; /* x */
	text-decoration: none; /* x */
	width: 14em; /* WIDTH OF XMENU3 TAB */
	font-size: 0.9em; /* x */
	}
	
a.xmenu3:hover {
	background: transparent; /* x */ 
	cursor: pointer; /* changes cursor to finger when it hovers over link */
	}

/* This is the colour of the TEXT when you hover over it */	
a.xmenu3:hover span {
	color: #000; 
	}

/* This is the colour of the BACKGROUND + SIDE BORDERS of the navigation when you hover over it */		
a.xmenu3:hover .xboxcontent {
	background: #eee; /* background colour */
	border-color: #888; /* border colour - sides only */
	border-bottom: 1px solid #eee; /* bottom border colour when hovered over */
	}
	
a.xmenu3:hover .xb1 {
	background: #888; /* colour of TOP BORDER of navigation when hovered over */
	}

/* This is the colour of the TOP LINE of the navigation when you hover over it and the CORNER BORDER colour */	
a.xmenu3:hover .xb2, a.xmenu3:hover .xb3, a.xmenu3:hover .xb4 {
	background: #fff; /* TOP LINE COLOUR OF NAV WHEN HOVERED OVER */
	border-color: #888; /* COLOUR OF CURVY CORNERS WHEN HOVERED OVER */
	}

/* ---------------------------------------------------------------------------------------------- */


/* --------------------------------- ## XMENU4 TAB ## ------------------------------------------- */
/* This is for the "xmenu4" button - you can adjust the size to whatever you like */
a.xmenu4, a.xmenu4:visited {
	display: block; /* x */
	text-decoration: none; /* x */
	width: 10em; /* WIDTH OF XMENU4 TAB */
	font-size: 0.9em; /* x */
	}
	
a.xmenu4:hover {
	background: transparent; /* x */
	cursor: pointer; /* changes cursor to finger when it hovers over link */
	}

/* This is the colour of the TEXT when you hover over it */	
a.xmenu4:hover span {
	color: #000; 
	}

/* This is the colour of the BACKGROUND + SIDE BORDERS of the navigation when you hover over it */	
a.xmenu4:hover .xboxcontent {
	background: #eee; /* background colour */
	border-color: #888; /* border colour - sides only */
	border-bottom: 1px solid #eee; /* bottom border colour when hovered over */
	}
	
a.xmenu4:hover .xb1 {
	background: #888; /* colour of TOP BORDER of navigation when hovered over */
	}
	
/* This is the colour of the TOP LINE of the navigation when you hover over it and the CORNER BORDER colour */	
a.xmenu4:hover .xb2, a.xmenu4:hover .xb3, a.xmenu4:hover .xb4 {
	background: #fff; /* TOP LINE COLOUR OF NAV WHEN HOVERED OVER */
	border-color: #888; /* COLOUR OF CURVY CORNERS WHEN HOVERED OVER */
	}
	
/* --------------------------------------------------------------------------------------------- */


/* ------------------------- ## None of the below needs to be changed ## ----------------------- */

		#info ul {
			margin: 5px 0 5px 0; /* x */
			padding: 0; /* x */
			list-style-type: none; /* x */
			height: 2em; /* x */
		}
	
		#info li {
			float: left; /* x */
		}
	
		#info {
			background: #fff; /* x */
			width: 98%; /* x */
			margin: 0 auto 0 auto; /* x */
			clear: both; /* x */
		}

		.xsnazzy {
			background: transparent; /* x */
		}
	
		.xsnazzy span {
			text-align: center; /* x */
			color: #fff; /* x */
			margin: 0; /* x */
			font-weight: normal; /* x */
			padding: 0 5px 0.5em 5px; /* x */
		}

		.xtop {
			display: block; /* x */
			background: transparent; /* x */
			font-size: 1px; /* x */
		}
	
		.xb1, .xb2, .xb3, .xb4 {
			display: block; /* x */
		/* hide overflow:hidden from IE5/Mac */ 
		/* \*/ 
			overflow: hidden; /* x */
		/* */ 
		}
		
		.xb1, .xb2, .xb3 { height: 1px; /* x */ }

/* ---------------------------------------------------------------------------------------------- */


/* ---------------------- ## NAVIGATION ELEMENTS (on the left hand side) ------------------------ */

/* Left hand side */		
		#left {
			float: left; /* x */
			width: 160px; /* x */
			margin: 0px; /* x */
			padding: 0px 0px; /* x */
		}


		#navigation ul {
			margin-left: 0; /* x */
			padding-left: 0; /* x */
			list-style-type: none; /* x */		
			float: left; /* x */
			width: 140px; /* x  */
		}

/* BOTTOM BORDER COLOUR */
		#navigation a {
			display: block; /* x */
			padding: 5px; /* x */
			width: 140px; /* x */
			border-bottom: 1px solid #CCC; /* bottom border size, style + colour (the bottom border 		            that appears under each word on the navigation )*/
		}

/* LINK COLOUR */
		#navigation a:link, #navlist a:visited {
			color: #CC6714; /* link colour */
			text-decoration: none; /* no underline under link */
		}
		
/* LINK HOVER COLOUR + IMAGE THAT APPEARS WHEN HOVER OVER */
		#navigation a:hover {
			background: #000000 url(../images/arrow.gif) 96% 50% no-repeat; /* bg colour + image of 	            the arrow that appears when hover over link  */
			background-color: #F5F5F5; /* bg colour when hover over link */
			color: #CC6714; /* link colour when hovered over */
		}

/* BOTTOM BORDER THAT APPEARS UNDER LEFT HAND NAV */		
		#navigation {
			border-bottom: 1px dashed #CCC; /* border size, style + colour */
			width: 140px; /* x */
		}

/* ------------------------------------------------------------------------------------------------ */


/* ----------------------------------------- ## SEARCH BOX ## ------------------------------------- */

/* Seach button - change the "background-color" to change colour of the search button */		
		#submit { 
			border: 0px none; /* border size + style */
			background-color: #666; /* bg colour of search button */
			color: #fff; /* font colour of search button */
			width: 26px; /* width of search button */
			cursor: pointer; /* cursor type when you hover in search button */
		}
	
/* This controls the width of the "search" box + the colour of the border */
		#formbox { 
			border: 1px solid #ccc; /* border size, style + colour */
			width: 100px; /* width search box */
			margin: 6px 6px 0 0; /* margin spacing top + right */
		}

/* Controls the color etc of the text inside the search box */	
		input {
			background-color: #FFF; /* bg colour inside search box */
			color: #999999; /* colour of font in search box */
			font-size: 11px; /* font size in box */
			padding: 3px; /* padding space within the search box */
		}

/* Controls the spacing around the form tag */	
		form {
			margin: 8px 0 10px 0px; /* x */
			padding: 0px; /* x */
			font-size: 9px; /* x */
		}

/* ----------------------------------------------------------------------------------------------- */


/* ------------------------------ ## TEXT BOX BELOW LEFT HAND NAV ## ---------------------------- */
		
		#left p {
			float: left; /* x */
			width: 140px; /* x */
			margin: 0px 0 10px 0 ; /* x */
			padding: 6px 0px 15px 0; /* x */
			border-bottom: 1px dashed #CCC; /* border size, style + colour */
			clear: both; /* x */
		}
		
/* ----------------------------------------------------------------------------------------------- */


/* -------------------------------------- ## RIGHT HAND SIDE ## ---------------------------------- */

		#sidebar {
			float: right; /* x */
			width: 150px; /* x */
		}

/* PARAGRAPHS OF TEXT THAT APPEAR UNDER NEWS SECTION */		
		#sidebar p {
			padding-bottom: 10px; /* bottom padding space */
			border-bottom: 1px dashed #DDDDDD; /* bottom border size, style + colour */
		}
		
/* --------------------------------------------------------------------------------------------- */


/* -------------------------------- ## FOOTER ELEMENTS ## -------------------------------------- */

/* FOOTER ELEMENTS */

/* BACKGROUND COLOUR OF FOOTER NAV */
		#footer {
			clear: both; /* x */
			background-color: #575352; /* bg colour of footer nav */
			padding: 0px 5px 0px 5px; /* padding spacing for right + left of nav */
			text-align: center; /* aligns all text centre */
		}
		
/* COLOUR OF THE LINES DIVIDING THE LINKS */
		#footer p {
			color: #ccc; /* font colour */
			padding: 2px 0 6px 0; /* padding spacing for top + bottom */
		}

/* LINK COLOUR */		
		#footer p a {
			color: #CC6714; /* link colour */
			border-bottom: 1px dotted #89817f; /* bottom border size, style + colour */
		}

/* HOVER LINK COLOUR */		
		#footer p a:hover {
			color: #FFFFFF; /* link colour when hovered over */
			background-color: #575352; /* bg colour of link when hovered over */
		}
		
/* ---------------------------------------------------------------------------------------------- */


/* ----------------------------------- ## LINKS WITHIN THE SITE ## ------------------------------ */
/* Controls the links within the site (not the main links on the left hand side) */
		a {
			color: #CC6714;
			text-decoration: none;
		}

		a:hover {
			color: #0084ff;
			background-color: inherit;
		}
		
/* ---------------------------------------------------------------------------------------------- */


/* ----------------------------------- ## MAIN CONTENT ## --------------------------------------- */	
/* CONTAINER - controls the font used within the site, font size, line heigh etc */

		#container {
			width: 750px; /* x */
			margin: 0 auto; /* x */
			font-family: Lucida Grande, Tahoma, Arial, Helvetica, sans-serif; /* Lucida Grande for the Macs, Tahoma for the PCs */
			font-size: 11px; /* font size */
			line-height: 1.6em; /* spacing between sentences */
			color: #666; /* font colour */
			background-color: #FFF; /* bg colour */
		}
		
/* h1 + h2 tags */
		
		h1 {
			font-family: Arial, Helvetica, sans-serif;
			font-weight: normal;
			font-size: 26px;
			color: #CC6633;
			margin: 18px 0 0 0;
			background-color: #FFF;
			padding: 0px;
		}
		
		h2 {
			color: #666666;
			font-size: 16px;
			font-family: Arial, Helvetica, sans-serif;
			background-color: #FFF;
			text-align: left;
		}
		
/* CONTENT ELEMENTS */
		#content {
			padding: 8px 0px; /* x */
			margin: 0 auto 0 auto; /* "auto" means that both sides will be equal in width */
			background-color: #ffffff; /* x */
			width: 400px; /* x */
		}	
			
		#content p {
			padding-bottom: 10px; /* bottom padding spacing under each <p> tag in content */
			text-align: left;
		}


/* Grey box in the middle - this is for the top bit of the box. Change the image if you want the box a different colour. */		
	.grey_top { 
		clear: both; /* x */
		width: 382px; /* x */
		background: #EDEDED url(../images/grey_top.gif) no-repeat; /* bg colour(should be same colour        as image) + link to image */
		color: #000; /* font colour */
		height: 5px; /* x */
		padding: 0; /* x */
		margin: 0px auto 0 auto; /* x */
		}

/* Grey box in the middle. Change the image here for the curves at the bottom of the box. Also change the "colour" tag to any colour you want. */		
	.grey {
		width: 362px; /* x */
		margin: 0 auto 0 auto; /* x */
		padding: 10px; /* x */
		background: #EDEDED url(../images/grey_bottom.gif) no-repeat bottom left; /* bg colour(should 			        be same colour as image) + link to image */
		color: #808080; /* colour of font, not the links though */ 
		}

/* Links in the grey box */		
	.grey a {
		color: #CC6714; /* link colour */
		background: inherit; /* x */
		font-weight: bold; /* weight of link */
	}

/* Hover colour of links in grey box */
	.grey a:hover {
		color: #0084ff; /* link colour */
		background: #EDEDED; /* bg colour of link */
	}

/* Spacing of the links in the grey box and border under the link */	
	.highlight {
		padding: 5px 3px 5px 3px; /* x */
		margin: 0 0 3px 0; /* x */
		border-bottom: 1px solid #ccc; /* line size, style + colour */
	}
		
/* Controls the "<hr />" tag. These are the lines used to seperate sections and paragraphs */
	
	hr {
		border: 1px dashed #ccc;
	}
	
/* -------------------------------------------------------------------------------------------- */
		


/* ------------------------------------ ## HEADER ELEMENTS ## ---------------------------------- */
/* Controls the top part of the site and the colour + width of the line below top navigation */
		#header {
			border-bottom: 4px solid #948979; /* bottom border size, style + colour */
			padding-top: 4px; /* x */
			clear: both; /* x */
			margin-bottom: 10px; /* x */
		}
		
/* Controls the spacing for the banner at the top*/
		#banner {
			margin: 8px 0 0 0; /* x */
			padding: 0 0 10px 0; /* x */
		}
		
/* Controls the spacing and positioning of the logo in left hand corner */	
		.logo {
			float: left; /* x */
			width: 140px; /* x */
			height: 80px; /* x */
			color: #FFF; /* x */
			padding: 5px 0 0px 7px; /* x */
		}

/* --------------------------------------------------------------------------------------------- */


/* ---------------------------------- ## SIDE BANNERS ## ------------------------------------- */
/* Controls the spacing for banners at the side */
		#sidebanner {
			margin: 6px 0 6px 0; /* x */ 
			padding: 0 0 10px 0; /* x */
		}

/* --------------------------------------------------------------------------------------------- */

		
/* ----------------------------------- ## ESPOTTING RESULTS ## ----------------------------------- */
		
/* Controls the spacing for the "espotting" results */
	#espotLayer {
		margin: 10px 0; /* x */
	}
	
/* This is for the keywords that appear in RED in the 'results.html' page when you search for something. It's at the top where it says "Compare our top partner sites for KEYWORD and save MONEY now!"  */

	.keyword {
		font: bold 10px Verdana; /* font weight, size + font family */
		color: #FF0000; /* font colour */
		text-transform: uppercase; /* transforms all the font to uppercase */
	}

/* ----------------------------------------------------------------------------------------------- */
	

/* --------------------------------## SPACING BETWEEN GOOGLE ADWRODS ## ------------------------- */
/* Controls the space between the title of the news article and Google adwords */

	#google {
		margin: 0 0 16px 0;
	}

/* ----------------------------------------------------------------------------------------------- */