@import "reset.css";

/*
	Author List
	@author: 			Gemma Jones
	
	@date:					2008-02-11
	@updated:			2008-02-18
	@updated by:		Gemma Jones
	
	********************************NOTE************************************* 
	
	To get to the contents quickly please use the Table of Contents below.
	Copy and search for the titles below and you should get taken stright there :)
	
	************************************************************************** 
	
	Content
	CLEARFIX
	HTML ELEMENTS
	ROUNDED CORNERS - UNIVERSAL
	LAYOUT
		HEADER
		CONTENT
			FIND OUT MORE BUTTONS
			HOME PAGE STYLES
					WELCOME PANEL
					FEEDBACK PANEL
					CONFECTIONARY / PETCARE / SAVORY
			TWO COLUMN TEMPLATE STYLES
				NAVIGATION
				Breadcrumbs
				
				TWO COLUMN TEMPLATE STYLES
					COLUMN ONE
							IMAGE HEADERS				<--Set the Backgrounds for image h1's here
		FOOTER
	
	Colour Guide
	_____________________________________________________
	Header bg							Blue							#005d92
	Cream bg							Cream						#f5ece3
	Header nav bg					Blue							#00456e
	
	Welcome h1						Blue							#005595
	Feedback h2 bg					Blue							#005d92
	Confectionary h2 bg			Red							#980f05
	Petcare h2 bg						Terqoise					#016672
	Savory h2 bg						Dark red/brown	#5d1f00
	
	p											Grey						#6a6a6a
	
*/

/*
	=TESTING
		____________________________________________________________________________
*/
/*
#page-design {
	position: absolute;
	top: 0;
	left: 0;
	width: 752px;
	height: 787px;
	background: url(../img/page-design.gif) no-repeat 0 0;
	z-index: 50;
}
*/

/*
	=CLEARFIX
	Forces elements to clear and containing divs to full height and width of its content
	____________________________________________________________________________
*/
.clearfix:after {
    content: 					"."; 
    display: 					block; 
    height: 					0; 
    clear: 						both; 
    visibility: 					hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {			height: 1%; }
/* End hide from IE-mac */

.clear {
	clear: both;
}

/*
	=HTML ELEMENTS
	Generic top level html elements
	____________________________________________________________________________
*/

html, body { 				
	width: 						100%; 
	height: 					100%;
	text-align:				left;
	font-family: 			"Trebuchet MS", Verdana, Arial, sans-serif;
}

p { 
	color: 			#6a6a6a; 
	font-size: 	0.92em;
}

a { text-decoration: none; }

/*
	=ROUNDED CORNERS - UNIVERSAL
	Positions and styles for the rounded corners that can be applied to multiple boxes
	____________________________________________________________________________
*/
/*White*/
.corner {
	position: 		absolute;
	width: 				15px;
	height: 			14px;
}

.tl {
	top: 					0;
	left: 					0;
	background: 	url(../img/rounded-corners/white/tl.gif) no-repeat 0 0;
}

.tr {
	top: 					0;
	right: 				0;
	background: 	url(../img/rounded-corners/white/tr.gif) no-repeat 0 0;
}

.bl {
	bottom: 			0;
	left: 					0;
	background: 	url(../img/rounded-corners/white/bl.gif) no-repeat 0 0;
}

.br {
	bottom: 			0;
	right: 				0;
	background: 	url(../img/rounded-corners/white/br.gif) no-repeat 0 0;
}

/*Cream*/
.corner-cream {
	position: 					absolute;
	width: 							15px;
	height: 						14px;
	background-image: url(../img/rounded-corners/cream/all-four.gif);
	background-repeat: no-repeat;
}

.tl-cream {
	top: 									0;
	left: 									0;
	background-position: 	0 0;
}

.tr-cream {
	top: 									0;
	right: 								0;
	background-position: 	100% 0;
}

.bl-cream {
	bottom: 							0;
	left: 									0;
	background-position: 	0 100%;
}

.br-cream {
	bottom: 							0;
	right: 								0;
	background-position: 	100% 100%;
}

/*
	=LAYOUT
	____________________________________________________________________________
*/

#wrapper {
	position: 						relative;
	width: 								755px;
	margin: 							0 auto;
}

/*
	=HEADER
	____________________________________________________________________________
*/
#header {
	position: 			relative;
	color: 					#ffffff;
	min-height: 		80px;
	background: 		#005789;
	margin: 				0 0 18px 0;
}

#header #logo {
	float: 					left;
	width: 					137px;
	height: 				39px;
	margin: 				16px 0 0 16px;
	text-indent: 		-9999px;
	background: 		url(../img/header/logo.gif) no-repeat 0 0;
}

/*
#header .navigation {
	position:				absolute;
	bottom: 				0;
	right: 					10px;
	width: 					570px;
	margin: 				0;
}
*/

#header .navigation {
	position:				relative;
	float: 					right;
	margin: 				3.9em 15px 0 0;
}

#header .navigation li {
	position: 			relative;
	float: 					left;	
	margin-right:		2px;
}

#header .navigation li .corner {
	position: 						absolute;
	top: 									0;
	width: 								15px;
	height: 							14px;
	background-repeat: 		no-repeat;
	background-image: 		url(../img/rounded-corners/header-menu/corners.gif);
}

#header .navigation li .tl {
	left: 									0;
	background-position: 	0 0;
} 

#header .navigation li .tr {
	right: 								0;
	background-position: 	100% 0;
}

#header .navigation li a {
	display: 				block;
	color: 					#a7bfcd;
	font-size: 			0.875em;
	padding: 			8px 12px;	
	background: 		#1A6997;
}

#header .navigation li a:hover,
#header .navigation li a.active {
	color: 					#ffffff;
	background: 		#7FAACA;
}

/*
	=CONTENT
	____________________________________________________________________________
*/

#content { 
	width: 					100%; 
}

#main-container {
	position: 			relative;
	padding-bottom: 8px;
	background: 		#f5ece3;	
}

#home #main-container {
	width: 					20%;
}

.second-level #main-container {
	width: 						98%;
	float: 						left;
	padding: 				8px;
}



#main-container-tree {
	position: 			relative;
	padding-bottom: 8px;
	background: 		#f5ece3;	
}

#home #main-container-tree {
	width: 					20%;
}

.second-level #main-container-tree {
	width: 						98%;
	float: 						left;
	padding: 				8px;
	margin-top:-15px;
}


.popular_searches
{
background-image:url('red_frame.gif');
margin-right:15px;
margin-top:-30px;
font-weight:600;
}

.topic_tree_images
{
background-color:#F5ECE3;
margin-bottom:30px;
margin-top:-40px;
padding-top:20px;
}






/*
	=FIND OUT MORE BUTTONS
	____________________________________________________________________________
*/

a.find {
	position:							absolute;
	bottom: 							0;
	width: 								100px;
	text-indent: 					-9999px;
	background-position: 	0 -16px;
	background-repeat: 		no-repeat;
	background-image: url(../img/buttons/findout_box.gif);
}

a.find:hover {
	background-position: 	0 0;
}


/*
	=HOME PAGE STYLES
	____________________________________________________________________________
*/
/*HEADERS*/
#feedback h2,
#confectionary h2,
#petcare h2,
#savory h2 {
	color: 				#ffffff;
}

#confectionary h2,
#petcare h2,
#savory h2 {
	font-size: 		1em;
}

/*WELCOME PANEL*/
#welcome {
	position: 					relative;
	float: 							left;
	width: 							362px;
	min-height: 				208px;
	_height: 						208px;
	margin: 						8px;
	padding-bottom: 		1.4em;
	_padding-bottom: 		1.5em;
	background: 				url(../img/panels/welcome/bg.jpg) no-repeat 0 100%;
}

#welcome .top {
	width: 				100%;
	min-height: 	16px;
	background: 	url(../img/panels/welcome/bg.jpg) no-repeat 0 0;
}

#welcome h1 {
	color: 				#005595;
	font-size: 		2em;
	width: 				219px;
	min-height: 	19px;
	text-indent: 	-9999px;
	margin: 			0 0 0 16px;
	background: 	url(../img/titles/welcome-to-mars-uk.gif) no-repeat 0 0;
}

#welcome p {
	width: 				55%;
	margin: 			0 0 1.3em 16px;
}

#welcome a {
	margin: 			0 0 16px 16px;
}

/*FEEDBACK PANEL*/
#feedback {
	position: 		relative;
	float: 				left;
	width: 				365px;
	min-height: 	208px;
	_height: 			210px;
	margin: 			8px 0;
	padding-bottom: 		1.4em;
	background: 	url(../img/panels/feedback/bg.jpg) no-repeat 0 100%;
}

#feedback h2 {
	color: 					#005d92; /*Blue*/
	font-size: 			1.4em;
	min-height: 		16px;
	padding:				16px 0 0 16px;
	margin: 				0 0 16px 0;
	background: 		url(../img/panels/feedback/bg.jpg) no-repeat 0 0;
}

#feedback p {
	float: 					left;
	width: 					56%;
	margin: 				0 16px 0 16px;
}

#feedback img {
	float: 						left;
	margin-bottom: 	8px;
}

#feedback a.find {
	width: 					100px;
	height: 				16px;
	left: 						16px;
	bottom: 				16px;
}

/*CONFECTIONARY / PETCARE / SAVORY*/
#confectionary, #petcare, #savory {
	position: 				relative;
	float: 						left;
	width: 						32%;
	min-height: 			320px;
	margin-bottom: 	8px;
	background: 			#ffffff;
}

#confectionary {
	margin-left: 			8px;
}

#confectionary, #petcare {
	margin-right: 			8px;
}

#confectionary h2,
#petcare h2,
#savory h2 {
	font-size: 					1em;
	font-weight: 				normal;
	padding: 					12px 0 10px 16px;
}

#confectionary h2 {		background: 	#980f05; }
#petcare h2 {					background: 	#016672; }
#savory h2 {					background: 	#5d1f00; }

#confectionary img {		margin-left: 	30px; }
#petcare img { 				margin-left: 	22px; }
#savory img { 				margin-left: 	6px; }

#confectionary a.find, #petcare a.find, #savory a.find { 
	position: 					absolute;
	bottom: 						16px;
	right: 							16px !important;
}

#confectionary a.find {
	background-image: url(../img/buttons/findout_red.gif);
}

#petcare a.find {
	background-image: url(../img/buttons/findout_green.gif);
}

#savory a.find {
	background-image: url(../img/buttons/findout_brown.gif);
}

/*
	=TWO COLUMN TEMPLATE STYLES
	____________________________________________________________________________
*/

/*Breadcrumbs*/
ul#breadcrumbs { 
	margin: 					0 0 12px 16px;
}

ul#breadcrumbs li {
	color: 						#4086ad;/*Light blue*/
	display: 					inline;
}

ul#breadcrumbs li a {
	color: 						#4086ad;/*Light blue*/
	font-size: 				0.875em;
}

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

/*COLUMNS*/
#main-container .column {
	position: 				relative;
	float: 						left;
	background: 			#ffffff;
}

#main-container .column h3 {
	font-weight:600;
	margin-bottom: 	12px;
}

#main-container .column p {
	margin-bottom: 16px;
}

/*IMAGE HEADERS*/
#main-container .one h1 {
	margin: 							0 0 8px 0;
	text-indent: 					-9999px;
	background-repeat: 		no-repeat;
	background-position:  	0 0;
}

#main-container .one h1.mars-uk {	

	height: 							26px;
	background-image: 		url(../img/titles/confectionery_ice_cream.gif);
	margin-left:8px;
}

#main-container .one h1.the-five-principles {
	width: 								225px;
	height: 							27px;
	background-image: 		url(../img/titles/the-five-principles.gif);
}

/*COLUMN ONE [[LEFT]]*/
.one-column #main-container .one {
	width: 						100%;
	margin: 					0 8px 8px 0;

}

.two-column #main-container .one {
	width: 						62%;
	margin: 					0 8px 8px 0;
	padding:					16px;
}

/*COLUMN TWO [[RIGHT]]*/
.two-column #main-container .two {
	width: 						30%;
	margin-bottom: 	8px;
	padding-bottom: 	16px;
}

.two-column #main-container .two h2 {
	color: 						#ffffff;
	font-size: 				1em;
	font-weight: 			normal;
	margin: 					0 0 16px 0;
	padding: 				16px 0 8px 16px;
	background: 			#005d92;
}

.two-column #main-container .two p.last {
	margin: 					0 16px 32px 16px;
}

.two-column #main-container .two a.find {
	bottom: 					16px;
	right: 						16px;
}

/*
	=TWO COLUMN TEMPLATE STYLES - NAVIGATION
	____________________________________________________________________________
*/

.second-level #content #nav-container {
	position: 			relative;
	float: 					left;
	width: 					156px;/*166px*/
	margin: 				0 16px 0 0;
	background: 		#f5ece3;/*cream/beige*/
	padding: 			8px 0;
}

#content ul.navigation {
	width: 					144px;
	margin: 				0 0 0 6px;
}

#content ul.navigation li a {
	color: 					#ffffff;
	display: 				block;
	width: 					116px;
	padding: 			6px 0 4px 20px;
	border-bottom: 	1px solid #ffffff;
	border-left: 		4px solid #ffffff;
	border-right: 		4px solid #ffffff;
}

#content ul.navigation li ul li a {
	font-size: 			0.875em;
	padding: 			3px 0 3px 20px;
	border-top: 		none;
	border-bottom: 	none;
}

#content ul.navigation li ul li a.first {		padding-top: 			8px; }
#content ul.navigation li li a.last {			padding-bottom: 	8px; }

#content ul.navigation li.first a {
	border-top: 		none;
	border-bottom: 	none;
}

#content ul.navigation li.second a {
	border-top: 		2px solid #ffffff;
}

#content ul.navigation li.last a {
	border-bottom: 	none;
	border-top: 		1px solid #ffffff;
}

#content ul.navigation li,
#content ul.navigation li a {
	margin: 				0;
}

/* Main menu - section colours */
.blue #content ul.navigation li a {				background: 	#1A6997;	}
.blue #content ul.navigation li a:hover,
.blue #content ul.navigation li a.active { 	background: 	#7FAACA; 	}
.blue #content ul.navigation li li { 				background: 	#CCDCE9; 	}

.red #content ul.navigation li a {					background: 	#B04E43;	}
.red #content ul.navigation li a:hover,
.red #content ul.navigation li a.active { 		background: 	#D29FA0; 	}
.red #content ul.navigation li li { 					background: 	#E9CFD0; 	}

.green #content ul.navigation li a {				background: 	#016672;	}
.green #content ul.navigation li a:hover,
.green #content ul.navigation li a.active { 	background: 	#3B8F99; 	}
.green #content ul.navigation li li { 				background: 	#83BEC5; 	}

.brown #content ul.navigation li a {				background: 	#5E1F00;	}
.brown #content ul.navigation li a:hover,
.brown #content ul.navigation li a.active { 	background: 	#865641; 	}
.brown #content ul.navigation li li { 			background: 	#C2AAA0; 	}

/* Main Menu rounded corners */
#content ul.navigation li.first a,
#content ul.navigation li.last a {
	width: 						118px;
	border: 					0;
}

#content ul.navigation li.first {
	padding: 				20px 0 0 4px;
	border-bottom: 		0;
	background: 			url(../img/main-menu/rounded-corners.gif) no-repeat 0 0;
}

#content ul.navigation li.first a {
	width: 114px;
}

#content ul.navigation li.last {
	min-height: 			16px;
	padding: 				6px 0 10px 4px;
	border-top: 			1px solid #ffffff;
	background: 			url(../img/main-menu/rounded-corners.gif) no-repeat bottom left;
}


/*
	=FOOTER
	____________________________________________________________________________
*/

#footer {
	font-size: 			0.995em;
	margin: 				16px 0;
	text-align: 			center;
}

#footer p {
	color: 					#005d92;
	margin: 				8px 0 0 0;
	font-size: 			0.8em;
	text-align: 			left;
}

#footer ul {
	display: 				block;
}

#footer ul li {
	display: 				inline;
	border-right: 		1px solid #005d92;
}

#footer ul li.last {
	border: 				none;
}

#footer ul li a {
	color: 					#005d92;
	padding: 			0 6px;
}

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