/* CSS Reset */
	
	body, div, h1, h2, h3, h4, p, br, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
	margin: 0px; padding: 0px; border: 0px;
	}
	
	body {
	font-family: Helvetica, Arial, sans-serif; /* Set the global font */ 
	background: #c9bdb2 url(../images/bg.jpg); /* Add the repeating texture file */
	}
	
	#page-wrap {
	background: url(../images/top_bg.png) center top no-repeat; /* An extra DIV allows us to attach the larger background image and position centrally on the page */
	}
	
	/* Lay out the page structure with a container */
	#container {
	width: 900px; /* Width of the container minus the left padding below */
	margin: 0 auto; /* Aligns the container to the centre of the page */
	padding: 204px 0 0 0px; /* Add some top and left padding */
	}
	
	#header {
	margin: 0 0 0 22px;/* Bottom margin on the header */
	padding: 0px;
	
	}
	
	/* #header h1 a { */
	/*display: block;  Anchors are inline by default, change it to block... */
	/*width: 872px; height: 144px; ...Which then allows us to specify width and height (according to the image) */
	/*color: #6b5c4e; margin: 0 0 20px 0;  the color can't actually be seen on the text, but it avoids a blue dotted border in Firefox */
	/* background: url(../images/top_bg.png); text-indent: -9999px;  Add the background image as part of the CSS Image Replacement and shift the text out of the way */
	/* } */
	
	/*#header h2 {*/
	/*width: 872px; height: 108px;*/
	/* background: url(../images/introtext.jpg); text-indent: -9999px; */
	/*}*/
	
	/************************************************
	*	NavBar          							*
	************************************************/
	
	#navbar {
	margin: -3px 67px 0 0;
	padding: 0px;
	width: 240px;
	height: 20px;
	float: right;
	background: url(../images/bg_menu.png) no-repeat;
	
	}
	
	#navbar h2 {
	font: normal 11px "Arial";
	color: #FFF;
	margin: 0px;
	padding: 3px 20px 0 0;
	float: right;
	}
	
	#navbar h2 a { color: #FFF;	text-decoration: none; }
	
	#navbar h2 a:hover { color: #0FF; text-decoration: none; }
	
	/************************************************
	*	ChangeBackgrounD							*
	************************************************/
	
	.bg1 { background: url(../images/tiles/bg1.jpg) repeat; background-attachment:fixed; }
	
	.bg2 { background: url(../images/tiles/bg2.jpg) repeat; background-attachment:fixed; }
	
	.bg3 { background: url(../images/tiles/bg3.jpg) repeat; background-attachment:fixed; }
	
	.bg4 { background: url(../images/tiles/bg4.jpg) repeat; background-attachment:fixed; }
	
	.bg5 { background: url(../images/tiles/bg5.jpg) repeat; background-attachment:fixed; }
	
	#icons {
	width: 100px;
	margin: -3px 0 0 57px;
	padding: 0px;
	cursor: pointer;
	float: left;
	}
	
	#icons ul { width: 250px; list-style:none; }
	
	#icons li { list-style: none; display:inline; }
	
	#icons li, .five, .four, .three, .two, .one {
	margin:0px;
	padding:0px;
	}
	
	#icons img { border: 1px solid #000; cursor:pointer; }	
	
	/************************************************
	*	Folio Div        							*
	************************************************/
	
	#portfolio { margin: 0 0 40px 0; }
	
	#portfolio h2 {
	font: normal 10px "Arial";
	color: #FFF;
	margin: 0px;
	padding: 0px;
	}
	
	#portfolio ul {
	list-style: none; /* Remove the bullet points from the list */
	}
	#portfolio ul li {
	/* Float the lists to the left, laying them out side by side */
	padding: 10px; 
	margin: 40px 0 10px 47px;
	/*background: url(../images/img-bg.png);  Add the semi-transparent background, used along with padding to give the impression of a see-through border */
	/* Let's get fancy with some CSS3, only visible in Firefox, Safari & Chrome. Other browsers simply revert to square corners */
	/*border-radius: 10px; */
	/*-moz-border-radius: 10px;*/
	/*-webkit-border-radius: 10px;*/
	}
	#portfolio h2 ul li {
	padding: 0px; 
	margin: 0px;
	}
	
	#portfolio h2 ul li a {
	padding: 0px; 
	margin: 0px;
	color:#FFF;
	}
	#portfolio h2 ul li a:hover {
	padding: 0px; 
	margin: 0px;
	color: #0FF;
	}
	
	/************************************************
	*	Campaign Div        							*
	************************************************/
	
	#campaign { margin: 0 0 40px 0; }
	
	#campaign h2 {
	font: normal 10px "Arial";
	color: #FFF;
	margin: 0px;
	padding: 0px;
	}
	
	#campaign ul {
	list-style: none; /* Remove the bullet points from the list */
	}
	#campaign ul li {
	/* Float the lists to the left, laying them out side by side */
	padding: 10px; 
	margin: 40px 0 10px 47px;
	
	}
	#campaign h2 ul li {
	padding: 0px; 
	margin: 0px;
	}
	
	#campaign h2 ul li a {
	padding: 0px; 
	margin: 0px;
	color:#FFF;
	}
	#campaign h2 ul li a:hover {
	padding: 0px; 
	margin: 0px;
	color: #0FF;
	}
	
	.border_img {
	border: 1px solid #000;
	}
	
	.blue_uk {
	color: #3333cc;
	}
	.blue_txt {
	color:#0FF;
	}
	.yellow {
	color: #FF0;
	}
	.green {
	color: #0F0;
	}
	.red {
	color: #cc3333;
	}
	
	#footer {
	margin: 0 0 40px 0;
	}
	
	#footer h2 {
	margin: 0px;
	}
	
	#footer p.copyright {
	margin: 0 0 0 56px; /* Add a new float to the right and shift into place with some right margin */
	padding: 5px;
	font-size: 11px;
	background:#000;
	width:120px;
	color: #0FF; /* Style up the text */
	}
	
	/* A handy 'Clearfix' technique to clear floats in order to avoid affecting page elements further down the document */		
/* 	.clear:after { */
/* 	content: ""; */
/* 	display: block; visibility: hidden; clear: both; */
/* 	} */
/* 	.clear { zoom: 1; } Clearfix IE fix */