/* ========================================================================================
MARS Drinks: Main Layout 
Version:1.0
Author: Lisa Kennedy
Email: lisa@energycell.co.uk
Website: http://www.energycell.co.uk
Last Updated: 15 Sep 2008
=========================================================================================== */

/* STANDARD FORMATTING 
=========================================================================================== */

body{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:75%;
	color:#666666;
	text-align:center;
	background-color:#FFFFFF;
	margin:0px 0px 10px 0px;
	padding:0px;
}

a{
	color:#005595;
	text-decoration:underline;
}

	a:hover{
		/*color:#9f2214;*/
		color:#4E8E36;
		text-decoration:none;
	}

/*** used for clearing a div with no gap ***/
.clear{
	float:none;
	clear:both;
	height:0px;
	line-height:0px;
	font-size:1px;
}

/*** used for clearing a div with a gap ***/
.clearheight{
	float:none;
	clear:both;
}

/* MARS DRINKS HEADER 
=========================================================================================== */
div.header{
	/*width:972px;CC IE55*/
	width:908px;
	text-align:left;
	background-image:url(../images/bg_header.jpg);
	background-position:bottom;
	background-repeat:no-repeat;
	margin:0px auto;
	padding:17px 32px;
}
	div.header a{
		font-size:110%;
		color:#FFFFFF;
		margin-left:35px;
	}
	
	/*MARS Drinks logo*/
	div.header img{
		position:relative;
		float:left;
		/*display:inline;CC IE6*/
		margin:12px 10px 0px 0px;
	}
	
	div.header span{
		float:right;
		text-align:right;
		margin:0px;
		padding:0px;
	}
		div.header span select{
			text-align:left;
			margin-bottom:13px;
		}

/* CONTAINER FOR BREADCRUMB, NAV AND CONTENT 
=========================================================================================== */	
div.container{
	width:960px;
	text-align:left;
	background-color:#FFFFFF;
	margin:0px auto;
	padding:20px 0px 30px 0px;
}
	/*for offline laptop version*/
	div.container.offline{
		width:780px;
	}

/* BREADCRUMB
=========================================================================================== */
div.breadcrumb{
	padding:0px 15px 15px 188px;
}
	div.breadcrumb ul{
		list-style:none;
		margin:0px;
		padding:0px;
	}
		div.breadcrumb ul li{
			display:inline;
		}
			div.breadcrumb ul li span{
				margin:0px 4px;
			}
			
			div.breadcrumb ul li a.on{
				/*color:#9f2214;*/
				color:#4E8E36;
				font-weight:bold;
				text-decoration:none;
			}
			

/* LEFT HAND NAV
=========================================================================================== */
div.nav{
	float:left;
	/*width:180px;CC IE55*/
	width:165px;
	padding-right:15px;
}
	div.nav ul{
		list-style:none;
		margin:0px;
		padding:0px;
	}
		/*root level*/
		div.nav ul li{
			font-weight:bold;
			list-style:none;
			margin-bottom:2px;
		}
		
			/*IE - "inline-block" below fixes IE 6 lack of no width support for LI, must be left within standard.css*/
			div.nav ul li a{
				display:inline-block;
			}
			
			div.nav ul li a{
				display:block;
				color:#333333;
				background-image:url(../images/bg_root_off.gif);
				background-position:top left;
				background-repeat:no-repeat;
				border-bottom:1px solid #d2d5d5;
				padding:5px 15px 5px 20px;
			}
				/*hover and ACTIVE state*/
				div.nav ul li a:hover,
				div.nav ul li a.active{
					color:#333333;
					background-color:#f3f3f3;
					background-image:url(../images/bg_root_active.gif);
					text-decoration:underline;
				}
				
				/*on page state*/
				div.nav ul li a.on,
				div.nav ul li a.on:hover{
					/*color:#9f2214;*/
					color:#4E8E36;
					background-color:#f3f3f3;
					background-image:url(../images/bg_root_on.gif);
					text-decoration:none;
				}
				
				/*on page state - WHEN NO SUB NAV*/
				div.nav ul li a.on-nosub,
				div.nav ul li a.on-nosub:hover{
					/*color:#9f2214;*/
					color:#4E8E36;
					background-color:#f3f3f3;
					background-image:url(../images/bg_root_on_nosubnav.gif);
					text-decoration:none;
				}
		
		/*1st level UL*/
		div.nav ul ul{
			margin:4px 0px 2px 0px;
			padding-bottom:4px;
			border-bottom:1px solid #d2d5d5;
		}	
			/*1st level LI*/
			div.nav ul ul li{
				font-size:90%;
				margin-bottom:0px;
			}
				/*1st level A*/
				div.nav ul ul li a{
					color:#005595;
					background-image:none;
					border-bottom:none;
					padding:2px 15px 2px 20px;
				}
					/*1st level hover*/
					div.nav ul ul li a:hover{
						/*color:#9f2214;*/
						color:#4E8E36;
						background-color:#FFFFFF;
						background-image:none;
						text-decoration:none;
					}
					
					/*1st level active state (but not on actual page)*/
					div.nav ul ul li a.active{
						color:#005595;
						background-color:#FFFFFF;
						background-image:none !important;
					}
						/*1st level active hover state*/
						div.nav ul ul li a.active:hover{
							/*color:#9f2214;*/
							color:#4E8E36;
						}
				
					/*1st level on state (when on actual page)*/
					div.nav ul ul li a.on,
					div.nav ul ul li a.on:hover{
						/*color:#9f2214;*/
						color:#4E8E36;
						background-image:url(../images/bg_level1_on.gif);
						text-decoration:none;
					}
			
		/*2nd level UL*/
		div.nav ul ul ul{
			margin:0px;
			padding-bottom:0px;
			border-bottom:none;
		}	
		
			/*2nd level LI*/
			div.nav ul ul ul li{
				font-size:100%;
				font-weight:normal;
				line-height:130%;
			}
				/*2nd level A*/
				div.nav ul ul ul li a{
					color:#005595;
					background-image:url(../images/bg_level2_off.gif);
					padding:2px 15px 2px 32px;
				}
					/*2nd level hover*/
					div.nav ul ul ul li a:hover{
						/*color:#9f2214;*/
						color:#4E8E36;
						background-image:url(../images/bg_level2_off.gif);
					}
					
					/*2nd level active state (but not on actual page)*/
					div.nav ul ul ul li a.active{
						color:#005595;
						background-image:url(../images/bg_level2_on.gif) !important;
					}
						/*2nd level active hover state*/
						div.nav ul ul li a.active:hover{
							/*color:#9f2214;*/
							color:#4E8E36;
							background-image:url(../images/bg_level2_on.gif);
						}
				
					/*2nd level on page state*/
					div.nav ul ul ul li a.on,
					div.nav ul ul ul li a.on:hover{
						/*color:#9f2214;*/
						color:#4E8E36;
						background-image:url(../images/bg_level2_on.gif);
						text-decoration:none;
					}

/* CONTENT AREA
=========================================================================================== */
div.content{
	float:right;
	/*width:780px;CC IE55*/
	width:764px;
	padding:0px 8px;
}

/* CONTENT BLOCK - ADDITION OF IMAGE (+ adds curves) IF REQUIRED - RE-USED THROUGHOUT
=========================================================================================== */
div.image{
	position:relative;
	float:right;
	/*display:inline;CC IE6*/
	margin:8px 8px 12px 8px;
	padding:0px;
}
	/*main image*/
	div.image img{
		z-index:1 !important;
		max-width:748px !important;
	}
	
/* CORNERS - RE-USED THROUGHOUT
=========================================================================================== */	

/*NOTE! CC IE6 FOR WORKPLACE BOX BOTH BOTTOM CORNERS AMENDED IN IE6.CSS*/

/*corners to cover image used in "content block"
top left*/
img.tl{
	position:absolute;
	z-index:2 !important;
	top:0px;
	left:0px;
	width:6px;
	height:6px;
}
/*top right*/
img.tr{
	position:absolute;
	z-index:2 !important;
	top:0px;
	right:0px;
	width:6px;
	height:6px;
}
/*bottom left*/
img.bl{
	position:absolute;
	z-index:2 !important;
	bottom:0px;
	left:0px;
	width:6px;
	height:6px;
}
/*bottom right*/
img.br{
	position:absolute;
	z-index:2 !important;
	bottom:0px;
	right:0px;
	width:6px;
	height:6px;
}


/* MOVE ITEMS IN TO DIV.CONTENT PADDING WHERE NECESSARY 
=========================================================================================== */	
	/*move certain content back in to full width of 780px area*/
	.bothsides{
		margin-left:-8px;
		margin-right:-8px;
	}
	
	/*move certain content back in to full width of 780px area*/
	.leftside{
		margin-left:-8px;
	}
	
	/*move certain content back in to full width of 780px area*/
	.rightside{
		margin-right:-8px;
	}

/* LH AND RH COLUMNS - RE-USED THROUGHOUT
=========================================================================================== */

/*left column*/
div.lhcolumn{
	position:relative;
	float:left;
	width:450px;
}
		/*adjust main image curve width for smaller column*/
		div.lhcolumn div.image img{
			max-width:434px !important;
		}

/*right column*/
div.rhcolumn{
	position:relative;
	float:right;
	width:292px;
}

/* WORK PLACE ARTICLES - RE-USED THROUGHOUT
=========================================================================================== */
/*curved div containing drink station info*/
div.workplace-box{
	position:relative;
	overflow:hidden;/*hides main product shot image with ".shot" applied*/
	/*width:450px;CC IE55*/
	width:287px;
	margin-bottom:6px;
	padding:8px 155px 8px 8px;
	/*colour + bgcolour added to external sheet*/
}
	div.workplace-box a{
		/*colour added to external sheet*/
	}
		/*find out more link with circle*/
		div.workplace-box a.circle{
			background-image:url(../images/bg_circle_white.gif);
			background-position:left center;
			background-repeat:no-repeat;
			padding-left:10px;
		}
	
	div.workplace-box img.shot{
		position:absolute;
		top:0px;
		right:0px;
	}
	
	div.workplace-box h3{
		/*colour added to external sheet*/
	}
		div.workplace-box h3 a{
			/*colour added to external sheet*/
		}
	
	div.workplace-box p{
		margin-bottom:7px;
	}

/* DOWNLOADS BOX - RE-USED THROUGHOUT
=========================================================================================== */	
div.downloads-box{
	position:relative;
	/*width:292px;CC IE55*/
	width:248px;
	background-color:#f3f3f3;
	margin-bottom:6px;
	padding:15px 18px 15px 26px;
}
	div.downloads-box a{
		display:block;
		/*colour added to external sheet*/
		font-weight:bold;
		background-image:url(../images/bg_circle_green.gif);
		background-position:left center;
		background-repeat:no-repeat;
		padding-left:10px;
	}
	
	div.downloads-box div.clearheight{
		height:15px;
	}

	div.downloads-box h2{
		font-size:150%;
		margin-left:-14px;
	}
	
	div.downloads-box h3{
		/*colour added to external sheet*/
		background-image:url(../images/bg_arrow_grey.gif);
		background-position:left center;
		background-repeat:no-repeat;
		margin-left:-14px;
		padding-left:14px;
	}
	
	div.downloads-box p{
		margin-bottom:8px;
	}

/* BOTTOM CURVED PROMO BANNER IMAGES - RE-USED THROUGHOUT
=========================================================================================== */
/*contains promo banner images which links to other pages*/
div.promo{
	float:none;
	clear:both;
	width:780px;
	margin:10px -8px;
}
	div.promo img{
		display:inline;
		vertical-align:middle;
		margin:0px 10px 10px 0px;
	}
	
/* PAGINATION (used on latest news + resource centre) - raf xtra -
=========================================================================================== */
.bar {
 	height: 16px;
	clear:both; 
 	background-color:#F3F3F3;
	border:1px solid #DADADA;  
	padding:3px 4px 4px 4px; 
}
	.bar.bottom {
		margin-top:14px;
	}
	
	.bar .pagination {
		float:right; 
		width:40%; 
		text-align:right; 
		font-weight:bold;
	}
	
		.bar .pagination p {
			display:inline;
			color:#666666;
		}
		
		.bar .pagination ul {
			display:inline; 
		} 
			.bar .pagination ul li {
				display:inline;  
				color:#4E8E36; 
				font-weight:bold;
				padding-right:0.5em;
			}
				.bar .pagination ul li a {
					color:#2F5E97;
				}	

/* HOMEPAGE 
=========================================================================================== */

/*welcome title and intro text*/
div.welcome{
	width:772px;
	margin:0px 0px 17px -8px;
}
	div.welcome h1{
		float:left;
		/*display:inline;CC IE6*/
		margin:0px 10px 0px 0px;
	}
	
	div.welcome p{
		float:left;
		/*display:inline;CC IE6*/
		width:380px;
		font-size:120%;
		line-height:120%;
		color:#3871a4;
		font-weight:bold;
		margin:30px 0px 0px 0px;
		padding:0px;
	}

/*KLIX + FLAVIA push areas - DEFAULT IS KLIX*/
div.home-push{
	position:relative;
	float:left;
	z-index:1;
	/*display:inline;CC IE6*/
	/*width:375px;CC IE55*/
	width:198px;
	/*height:234px;CC IE55*/
	/*height:134px;CC IE6*/
	min-height:134px;
	color:#5c5c5d;
	background-color:#e1ebf4;
	background-image:url(../images/bg_home_klix.jpg);
	background-repeat:no-repeat;
	margin:0px 18px 15px -8px;
	padding:80px 162px 20px 15px;
}
	/*amend for flavia push*/
	div.home-push.flavia{
		/*width:375px;CC IE55*/
		width:215px;
		background-color:#f3f0dd;
		background-image:url(../images/bg_home_flavia.jpg);
		margin:0px 0px 15px 0px;
		padding-right:145px;
	}
	
	/*amend for flavia USA push (1 push on US site only)*/
	div.home-push.flavia-usa{
		/*width:768px;CC IE55*/
		width:503px;
		background-color:#f3f0dd;
		background-image:url(../images/bg_home_flavia-usa.jpg);
		margin:0px 0px 15px -8px;
		padding-right:250px;
	}
	
	div.home-push h2{
		font-size:140%;
		color:#5c5c5d;
		margin:0px;
	}
	
	div.home-push p{
		line-height:115%;
		margin-bottom:0px;
	}
	
		div.home-push p.colour{
			color:#2c98c3;
			margin-bottom:15px;
		}
		
			/*amend colour for flavia push*/
			div.home-push.flavia p.colour,
			div.home-push.flavia-usa p.colour{
				color:#a7322e;
			}
	

/* SUSTAINABILITY HOMEPAGE 
=========================================================================================== */

/*holds green leaf img*/
div.home-sus{
	position:relative;
	width:780px;
	z-index:1;
	margin:0px -8px 15px -8px;
}
	/*holds scroll white background img*/
	div.bg-scroll{
		position:absolute;
		z-index:2;
		width:281px;
		height:319px;
		top:10px;
		right:18px;
	}
		/*scroll area*/
		div.bg-scroll div.scroll{
			position:absolute;
			overflow:auto;
			z-index:3;
			/*width:271px;CC IE55*/
			width:261px;
			height:299px;
			top:10px;
			left:10px;
			padding-right:10px;
		}
			div.bg-scroll div.scroll a{
				color:#005595;
				text-decoration:underline;
			}
		
			div.bg-scroll div.scroll h2{
				font-size:160%;
				color:#006529;
				font-weight:bold;
				margin:0px 0px 4px 0px;
			}
			
			div.bg-scroll div.scroll h3{
				font-size:120%;
				color:#006529;
			}
			
			div.bg-scroll div.scroll p{
				line-height:125%;
				padding:0px;
			}
				div.bg-scroll div.scroll p.blue{
					color:#005595;
				}
			

/*push areas on homepage - DEFAULT SETTINGS BELOW is Your Workplace*/
div.home-sus-push{
	position:relative;
	float:left;
	/*display:inline;CC IE6*/
	/*width:231px;CC IE55*/
	width:215px;
	/*height:128px;CC IE55*/
	/*height:108px;CC IE6*/
	min-height:108px;
	color:#FFFFFF;
	background-color:#a8d107;
	background-image:url(../images/bg_home_workplace.jpg);
	background-position:bottom;
	background-repeat:no-repeat;
	margin:0px 13px 10px -8px;
	padding:10px 8px 10px 8px;
}
	/*adjust for "Our Operations" push*/
	div.home-sus-push.operations{
		background-image:url(../images/bg_home_operations.jpg);
		background-color:#34941d;
		margin:0px 17px 10px 0px;
	}
	
	div.home-sus-push a{
		color:#FFFFFF;
		text-decoration:underline;
	}
		
		/*gradient link*/
		div.home-sus-push a.more{
			position:relative;
			display:block;
			height:21px;
			background-image:url(../images/bg_home_link.png);
			background-repeat:repeat-y;
			margin:0px -8px;
			padding:1px 8px;
		}
		
		/*CC IE6
		div.home-sus-push a.more{
			background-image:none;
			filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/bg_home_link.png,
sizingMethod='scale');
		}*/
			/*CC IE6
			div.home-sus-push a.more:hover{
				color:#FFFFFF;
				cursor:pointer;
			}*/
	
	div.home-sus-push h2{
		font-size:160%;
		color:#FFFFFF;
		font-weight:bold;
		margin-top:0px;
	}
			
	div.home-sus-push p{
		font-size:95%;
	}
	
/*latest sustainability news*/	
div.home-sus-news{
	position:relative;
	float:left;
	/*width:280px;CC IE55*/
	width:266px;
	padding:0px 0px 0px 14px;
}
	div.home-sus-news a{
		color:#4E8E36;
	}

	div.home-sus-news h2{
		font-size:160%;
		color:#005595;
		font-weight:bold;
		margin:0px 0px 4px -14px;
	}
	
	div.home-sus-news h3{
		font-size:110%;
		color:#005595;
		background-image:url(../images/bg_arrow_blue.gif);
		background-position:left center;
		background-repeat:no-repeat;
		margin:0px 0px 1px -14px;
		padding-left:14px;
	}
	
	div.home-sus-news p{
		line-height:125%;
		margin-bottom:8px;
	}

/* HELPING AREA (X3) - DESIGN INDENTS ANY CONTENT NOT WITHIN A BOX or SPECIFIC IMAGES
=========================================================================================== */

	/*adjust content block "image" for content indent*/
	div.content.helping div.image{
		margin-right:0px;
	}
	
	/*container for workplace items*/
	div.content.helping div.workplace{
		position:relative;
		float:left;
		/*display:inline;CC IE6*/
		width:450px;
		margin:5px 28px 10px -8px;
	}
	
	/*container for workplace items*/
	div.content.helping div.downloads{
		position:relative;
		float:right;
		width:292px;
	}


/* HELPING AREA SUB (X3) - ARTICLE PAGE
=========================================================================================== */

/*LH COLUMN ADJUSTMENTS*/
	/*adjust h1 font size*/
	div.content.helpingsub div.lhcolumn h1{
		font-size:350%;
	}
	
	/*adjust h2 font size*/
	div.content.helpingsub div.lhcolumn h2{
		font-size:130%;
	}
		/*re-instate font size when required*/
		div.content.helpingsub div.lhcolumn  h2.fullsize{
			font-size:160%;
		}
	
	
	/*container for workplace items - absorb in to padding of div.lhcolumn*/
	div.content.helpingsub  div.lhcolumn div.workplace{
		position:relative;
		width:450px;
		margin:5px -8px 10px -8px;
	}
	
/*RHCOLUMN ADJUSTMENTS*/
div.content.helpingsub div.rhcolumn img.shot{
	position:relative;
	margin-bottom:25px;
	margin-right:-8px;
}
	
/*RHCOLUMN ADJUSTMENTS*/
div.content.helpingsub div.rhcolumn span.shot{
	position:relative;
	margin-bottom:25px;
	margin-right:-8px;
}

/* OUR OPERATIONS
=========================================================================================== */

	/*adjust left column width*/
	div.content.ouroperations div.lhcolumn{
		width:364px;
	}
		/*adjust main image curve width for smaller column*/
		div.content.ouroperations div.lhcolumn div.image img{
			max-width:348px !important;
		}
	
	/*adjust right column width*/
	div.content.ouroperations div.rhcolumn{
		width:394px;
	}
		/*adjust promo box*/
		div.content.ouroperations div.rhcolumn div.promo{
			width:394px;
			margin:0px -8px 0px 0px;
		}
			div.content.ouroperations div.rhcolumn div.promo img{
				margin:0px 0px 5px 15px;
			}
			
			
/* RESOURCE CENTRE - raf xtra -
=========================================================================================== */
div.content .imgtitle {
	margin-bottom:12px;
}

div.resource-holder { 
	width:100%; 
	border-bottom:1px dotted #999999;
	padding:14px 0px;
}
	.resource-holder.end {
		border-bottom:none;
		padding-bottom:5px;
	}
	
	.resource-holder h3 {
		display:block;
		font-weight:normal; 
		padding-bottom:4px;
	}
	
	.resource-holder span.date {
	  font-size:70%;
	  color:#8A8A8A;
	  padding-left:8px;
	}
	
	.resource-holder img {
	  float:left;
	  padding-right:10px;
	}
	
	.resource-holder p {
	  display:block;
	}
	
DIV.resource-action {
  float:right;
  display:block;
  width:70%;
  text-align:right;
  margin-right:15px;
}
	
	.resource-action a {
	/*  color:#A12122;*/
		color:#4E8E36;
	}
	
	.resource-holder span.resource {
	  color:#000000;
	  font-weight:bold;
	  padding-right:3px;
	}
	
	.resource-holder span.file-size {
	  color:#8A8A8A;
	  padding-left:5px;
	}


/* LATEST NEWS - raf xtra -
=========================================================================================== */
div.news-feature-wrapper {
	background: url(../images/feature-bot-blend.gif) center bottom;
}

div.news-feature {
	background:url(../images/feature-top-blend.gif) top no-repeat;
	border:1px solid #DADADA;	
	margin-top:14px; 
	padding:14px;
}

	.news-feature img {
		float:right;
		/*display:inline;CC IE6*/
		border:1px solid #84A1C5;
		margin-left:20px;
	}
	.news-feature h3 {
		display:block;
		font-size:200%; 
		padding-bottom:6px;
	}
		.news-feature h3 a {
			text-decoration:none;
		}
		
	.news-feature p {
		display:block;
	}
	
	
div.news-feature-action {
  display:block;
  text-align:right;
}

	div.news-feature-action a {
	  /*color:#A12122;*/
	  color:#4E8E36;
	}

div.news-holder {
	width:100%; 
	border-bottom:1px dotted #999999;
	padding:14px 0px; 
}
	.news-holder.end {
		border-bottom:none;
		padding-bottom:5px;
	}
	
	.news-holder h3 {
		display:block;
		font-weight:normal; 
		padding-bottom:4px;
	}
	
	.news-holder span.date {
	  font-size:70%;
	  color:#8A8A8A;
	  padding-left:8px;
	}
	
	.news-holder img {
	  float:left;
	  padding-right:10px;
	}
	
	.news-holder p {
	  display:block;
	}
	
div.news-action {
  float:right;
  display:block;
  width:70%;
  text-align:right;
  margin-right:15px;
}
	.news-action a {
	  /*color:#A12122;*/
	  color:#4E8E36;
	}
	
/* ENVIRONMENTAL CALCULATOR
=========================================================================================== */

/*curved surround*/
div.content.environ-calc{
	position:relative;
	/*width:775px;CC IE55*/
	width:735px;
	background:#FFFFFF url(../images/environ_calc/bg_environ_calc.gif) repeat-y;
	margin-left:-8px;
	margin-right:-3px;
	padding:0px 20px;
}

	/*top curved image to create surround*/
	div.content.environ-calc .topbg{
		position:relative;
		margin:0px -20px;
	}

	/*bottom curved footer image to create surround*/
	div.content.environ-calc .bottombg{
		position:relative;
		margin:20px -20px 0px -20px;
	}
	
	/*USED FOR BLOCK OF DIVS - control spacing for each turn on/off section*/
	div.ec-section,
	div.montage{
		float:none;
		clear:both;
		width:735px;
		/*margin-top:25px;*/
		margin-top:15px;
	}
		/*montage graphic image on its own*/
		div.montage{
			text-align:center;
		}
	
		div.ec-section h2{
			font-size:130%;
			color:#2f5e97;
			font-weight:normal;
		}
	
/* ========= CALCULATOR SECTION ========= */
	div.ec-calculator{
		position:relative;
		float:left;
		display:block;
		/*width:361px;CC IE55*/
		width:278px;
		background:#FFFFFF url(../images/environ_calc/bg_calculator.jpg) no-repeat;
		margin-right:8px;
		padding:15px 20px 15px 63px;
	}
		/*applied to 2nd div to adjust values*/
		div.ec-calculator.calc2{
			/*width:361px;CC IE55*/
			width:271px;
			margin-right:0px;
			padding:15px 10px 15px 80px;
		}
		
		div.ec-calculator h3{
			font-size:140%;
			border-bottom:2px dotted #333333;
			margin-bottom:12px;
			padding-bottom:3px;
		}
			/*for numbers 1 + 2*/
			div.ec-calculator h3 img{
				position:absolute;
				left:10px;
			}
			
			div.ec-calculator.calc2 h3 img{
				position:absolute;
				left:10px;
			}
		
		/*field labels*/
		div.ec-calculator label{
			float:left;
			display:block;
			width:175px;
			background:url(../images/environ_calc/bg_label.gif) left 8px no-repeat;
			vertical-align:middle;
			margin-bottom:8px;
			padding-left:13px;
		}
		
		/*radio labels*/
		div.ec-calculator.calc2 label{
			float:left;
			width:250px;
			background:none;
			margin-bottom:4px;
			padding-left:0px;
		}
		
		/*text fields*/
		div.ec-calculator input.text{
			float:right;
			/*display:inline;CC IE6*/
			/*width:65px;CC IE55*/
			width:59px;
			text-align:right;
			border:1px solid #a5acb2;
			margin-bottom:8px;
			padding:2px;
		}
		
		/*radio buttons*/
		div.ec-calculator input.radio{
			float:left;
			/*display:inline;CC IE6*/
			vertical-align:middle;
			margin-bottom:4px;
		}
		
		div.ec-calculator em{
			color:#a0a0a0;
		}
	
/* ========= CALCULATOR RESULTS ========= */
	
	/*background*/
	div.ec-calculator-results{
		position:relative;
		width:739px;
		background:#FFFFFF url(../images/environ_calc/bg_calculator_results.jpg) no-repeat;
		margin-right:-4px;
		padding-top:10px;
	}
		div.ec-calculator-results h3{
			font-size:230%;
			color:#FFFFFF;
			font-weight:bold;
			text-align:center;
			text-transform:uppercase;
			margin-bottom:5px;
		}
	
	/*flavia creation 400 result*/
	div.ec-calculator-results1{
		float:left;
		/*display:inline;CC IE6*/
		/*width:357px;CC IE55*/
		width:334px;
		min-height:227px;
		color:#c6e0ff;
		background:#FFFFFF url(../images/environ_calc/bg_calculator_results_1.jpg) no-repeat;
		margin-left:9px;
		margin-right:5px;
		padding:30px 0px 0px 23px;
	}
	
	/*flavia waste 2 energy result*/
	div.ec-calculator-results2{
		float:left;
		/*display:inline;CC IE6*/
		/*width:368px;CC IE55*/
		width:345px;
		color:#fde969;
		min-height:227px;
		background:#FFFFFF url(../images/environ_calc/bg_calculator_results_2.jpg) no-repeat;
		padding:30px 0px 0px 23px;
	}
	
		/*result text*/
		p.result1{
			font-size:140%;
			margin-bottom:10px;
			margin-right:140px;
		}
		p.result2{
			font-size:140%;
			margin-bottom:10px;
			margin-right:100px;
		}
		
		/*numeric value text*/
		div.numeric{
			position:relative;
			display:block;
			font-size:270%;
			color:#FFFFFF;
			font-weight:bold;
			background:url(../images/environ_calc/arrow_white.gif) left center no-repeat;
			margin-bottom:25px;
			padding-left:13px;
		}
		
			/*roman numeral*/
			div.numeric sup{
				position:absolute;
				top:5px;
				font-family:"Times New Roman", Times, serif;
				font-size:40%;
				text-transform:uppercase;
				margin-left:5px;
			}
				/*amend roman colour*/
				div.numeric sup.result1-colour{
					color:#c6e0ff !important;
				}
				/*amend roman colour*/
				div.numeric sup.result2-colour{
					color:#fde969 !important;
				}
		
		/*numeric ending value i.e. KWh / homes*/
		span.text{
			font-size:50%;
			color:#FFFFFF;
		}
		
		/*summary explaining results*/
		p.summary{
			margin-top:25px;
			margin-right:181px;
			margin-bottom:40px;
		}
			/*value colour*/
			p.summary span{
				color:#FFFFFF;
				font-weight:bold;
			}
		
			/*roman numeral*/
			p.summary sup{
				font-family:Georgia, "Times New Roman", Times, serif;
				text-transform:uppercase;
				font-weight:bold;
			}
		
		/*information text below each result including link*/
		p.info{
			color:#666666;
			text-align:center;
			margin-right:40px;
		}
			/*bold link up*/
			p.info a{
				font-weight:bold;
			}

/* ========= CONTACT US ========= */
	div.ec-contactus{
		position:relative;
		display:block;
		/*width:735px;CC IE55*/
		width:675px;
		background:url(../images/environ_calc/bg_contactus.jpg) left bottom no-repeat;
		padding:10px 33px;
	}
		
		div.ec-contactus h3{
			font-size:140%;
			border-bottom:2px dotted #333333;
			margin-bottom:12px;
			padding-bottom:3px;
		}
	
	/*houses contact form to center*/	
	div.contact-fields{
		width:340px;
		margin:20px auto 10px auto;
	}
		/*label fields*/
		div.contact-fields label{
			float:left;
			display:block;
			width:70px;
			color:#005595;
			font-weight:bold;
			text-align:left;
			margin:0px 25px 6px 0px;
		}
		
		/*input fields*/
		div.contact-fields input.text{
			float:left;
			display:block;
			/*width:236px;CC IE55*/
			width:232px;
			border:1px solid #a5acb2;
			margin:0px 0px 6px 0px;
			padding:2px;
		}
		
		/*submit button*/
		div.contact-fields input.submit{
			margin-left:95px;
			margin-top:20px;
		}
		

/* ========= DID YOU KNOW ========= */
	div.ec-didyouknow{
		position:relative;
		width:767px;
		background:#a4cc2e;
		margin:0px -16px;
		padding:0px;
	}
		div.ec-didyouknow a{
			color:#FFFFFF;
		}
		
		div.ec-didyouknow h3{
			display:block;
			font-size:250%;
			color:#a4cc2e;
			font-weight:bold;
			line-height:70%;
			text-transform:uppercase;
			background-color:#FFFFFF;
			margin:0px;
			padding:0px 33px;
		}
		
		div.ec-didyouknow p{
			display:block;
			font-size:110%;
			color:#FFFFFF;
			font-weight:bold;
			margin:30px 30px 0px 33px;
			padding:0px;
		}
		
		div.ec-didyouknow img.right{
			float:right;
		}
	
	

/* ========= ROMAN NUMERAL INFORMATION ========= */	
	
	ol.ec-roman-info{
		margin-left:30px !important;
	}
	
		ol.ec-roman-info li{
			font-family:Georgia, "Times New Roman", Times, serif;
			list-style-type:upper-roman;
			font-size:80%;
			color:#999999;
			font-size:italic;
			margin-bottom:5px;
		}
		
		ol.ec-roman-info li a{
			color:#999999;
		}
	
/* ========= DON'T KNOW ========= */
	
	/*background*/
	div.ec-dont-know{
		position:relative;
		width:739px;
		background:#FFFFFF url(../images/environ_calc/bg_calculator_results.jpg) no-repeat;
		margin-right:-4px;
		margin-top:20px;
		padding-top:10px;
	}
	
		div.ec-dont-know h3{
			font-size:180%;
			color:#FFFFFF;
			font-weight:bold;
			text-align:center;
			text-transform:uppercase;
			margin-bottom:20px;
		}
		
		/*statistic background for the 2 paragraphs*/
		div.ec-statistic{
			position:relative;
			/*width:702px;CC IE55*/
			width:437px;
			min-height:168px;
			background:url(../images/bg_statistic.jpg) no-repeat;
			margin:0px 0px 0px 13px;
			padding:25px 240px 0px 25px;
		}
			/*drinks machine image to right*/
			div.ec-statistic img.drinkmachine{
				position:absolute;
				top:5px;
				right:0px;
			}
			
			/*statistic text*/
			p.statistic-1{
				display:block;
				font-size:130%;
				color:#c6e0ff;
				font-weight:bold;
			}
			p.statistic-2{
				display:block;
				font-size:130%;
				color:#c6e0ff;
				font-weight:bold;
				margin-top:35px;
			}
				/*numeric percent with each statistic text*/
				span.percent{
					float:left;
					font-size:250%;
					color:#FFFFFF;
					padding:10px 15px 20px 0px;
				}
			
			div.ec-statistic ul{
				position:relative;
				margin:20px 0px !important;
				list-style:none !important;
			}
				div.ec-statistic ul li{
					list-style:none !important;
					font-size:110%;
					background:url(../images/environ_calc/bg_label.gif) left 6px no-repeat;
					padding-left:10px;
				}
					
/* MARS DRINKS FOOTER 
=========================================================================================== */
div.footer{
	width:972px;
	background-color:#FFFFFF;
	background-image:url(../images/bg_footer.jpg);
	background-position:top;
	background-repeat:no-repeat;
	margin:0px auto;
	padding:19px 0px 50px 0px;
}
	
	div.footer ul{
		list-style:none;
		margin:0px;
		padding:0px;
	}
		div.footer ul li{
			display:inline;
		}
			div.footer ul li span{
				margin:0px 4px;
			}

/* GENERAL FORMATTING 
=========================================================================================== */

h1{
	font-size:470%;
	color:#0b2249;
	font-weight:normal;
	line-height:normal;
	margin:0px 0px 10px 0px;
	padding:0px;
}

h2{
	font-size:160%;
	color:#0b2249;
	font-weight:normal;
	margin:5px 0px 8px 0px;
	padding:0px;
}

h3{
	font-size:130%;
	color:#0b2249;
	font-weight:normal;
	margin:0px 0px 4px 0px;
	padding:0px;
}

p{
	line-height:130%;
	margin-top:0px;
}

div.content ul li,
div.content ol li,
dd,
dt{
	line-height:130%;
	margin-bottom:8px;
}
	div.content ul li{
		list-style-type:circle;
	}
	
	div.content ul,
	div.content ol{
		margin-left:18px;
		padding:0px;
	}

/*stop ie5.5 doubling font size*/
table,
form,
input,
textarea,
select{
	font-size:100%;
}


/*hide captions*/
caption{
	position:absolute;
	text-indent:-1000%;/*IE*/
	line-height:0px;
}

hr{
	float:none;
	clear:both;
	color:#cccccc;
	border:none;
	border-top:2px dotted #cccccc;
	height:1px;
	line-height:1px;
	margin:10px 0px;
	padding:0px;
}

/*COLOURS*/
.white{
	color:#FFFFFF;
}
div.error
{
	color:Red;
	}
	span.error
{
	color:Red;}