/* Just for inside pages */
/* Container for the sub-navigation and main content */
div#maincontent, div#maincontentwide {
	color: #535353;
	background: white;
	width: 774px;
	float: left;
	padding: 0 0 2em 0;
}
/* For pages without a third column */
div#maincontentwide {
	width: 960px;
}

	/* Crumb-trail */
	map#crumb {
		padding: 0.8em 15px 0 15px;
	}
	#crumb p, #crumb ol, #crumb li {
		display: inline;
	}
	#crumb p, #crumb ol {
		font-size: 90%;
	}
		#crumb a {
			background: url(/img/bg-crumb-a.gif) top right no-repeat;
			padding: 0 8px 0 2px;
		}
		#crumb em {
			color: #666;
			font-style: normal;
			padding: 0 2px;
		}

	/* Content, centre */
	div#content {
		width: 568px;
		position: relative;
		left: 189px;
		padding: 1.8em 0 0 0;
	}
	#maincontentwide div#content {
		width: 754px;
	}
		#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
			margin: 0 0 0.5em 0;
			color: #a00200;
			font-weight: normal;
		}
		#content h1 {
			color: #8e0001;
			font-size: 195%;
		}
		#content h2 {
			color: #010101;
		}
		#content h3 {font-size: 140%;}
		#content h4 {font-size: 130%;}
		#content h5 {font-size: 120%;}
		#content h6 {font-size: 110%;}
		#content .disclaimer {
			font-size: 90%;
			color: #666;
		}
		
		#content dl {
			margin: 0 0 1em 0;
		}
			#content dt {
				width: 100px;
				float: left;
			}
			#content dd {
				width: 368px;
				float: left;
			}
			#content fieldset dd {
				width: 326px;
			}
			#content .twocol dt {
				width: 100px;
			}
			#content .twocol dd {
				width: 174px;
			}

		/* Calls to action live here. Most styles in default.css */
		#content p.action {
			text-align: right;
		}

		/* A two-column layout, in content */
		.twocol div, .footaction div {
			float: left;
			width: 274px;
		}
		.twocol div.last, .footaction div.last {
			width: 294px;
		}
			#content .footaction h2 {
				color: white;
				background: #db0014;
				font-size: 130%;
				padding: 0.1em 18px;
				font-weight: normal;
			}
			#content .twocol .last h1, #content .twocol .last h2, #content .twocol .last h3, #content .twocol .last h4, 
			#content .twocol .last h5, #content .twocol .last h6, #content .twocol .last p, #content .twocol .last dl,
			#content .footaction .last h1, #content .footaction .last h2, #content .footaction .last h3, 
			#content .footaction .last h4, #content .footaction .last h5, #content .footaction .last h6, 
			#content .footaction .last p, #content .footaction .last dl {
				margin-left: 20px;
			}
			/* For reasons I'm not clever enough to understand, you're not allowed headings in a two column layout */
			#content .twocol h1, #content .twocol h2, #content .twocol h3, #content .twocol h4, #content .twocol h5, 
			#content .twocol h6 {
/*				font-size: 100%;*/
			}
			#content .twocol ul, #content .footaction ul {
				margin-left: 18px;
			}
			#content .twocol .last ul, #content .footaction .last ul {
				margin-left: 38px;
			}

	/* Forms */
	#content fieldset {
		margin: 0.85em 0 0 0;
		padding: 20px;
		border: solid 1px #d6d6d6;
	}
		#content fieldset legend {
			border: solid 1px #d6d6d6;
			background: white;
			padding: 0.5em 20px;
		}

		#content .twocol fieldset, #content .question fieldset {
			border: none;
			padding: 0;
		}
			#content .twocol fieldset legend, #content .question legend {
				border: none;
				padding: 0 0 1em 0;
			}
			/* Search results */
			input.SearchAgainButton, input.SearchAgainTextBox, .pagenav a {
				margin: 0 0 0 1em;
			}
			.pagenav a {
				margin: 0 1em 0 0;
			}

	#content .twocol fieldset p, #content .question fieldset p, #content .twocol fieldset dl, #content .question fieldset dl {
		margin-left: 20px;
	}
		#content .twocol input, #content .twocol select, #content .twocol textarea {
			width: 249px;
		}
		* html .twocol input, * html .twocol select, * html .twocol textarea {
			width: 247px;
		}
		/* For postcodes, split in two */
		#content .short input {
			width: 60px;
		}
		/* For checkboxes, etc. */
		#content .compact input, #content .compact select, #content .compact textarea,
		#main .action input {
			width: auto;
		}
		#content .compact input {
			border: none;
			background: none;
		}
		#content fieldset em, #content .required {
			color: #8d0001;
			font-size: 150%;
			vertical-align: top;
		}
		#content .twocol fieldset dt {
			width: 18px;
		}
		#content .twocol fieldset dd {
			width: 233px;
		}

		/* Table rules */
		table, td, th {
			margin: 0;
			padding: 0;
			border-collapse: collapse;
			color: black;
			background: #f9f9f9;
			vertical-align: top;
		}
		table {
			margin: 1em 0;
			border: solid 1px #ccc;
		}
		table.compact {
			font-size: 90%;
		}
		#content table {
			width: 568px;
		}
		#content .tabs table {
			width: 528px;
		}
		#maincontentwide #content table {
			width: 754px;
		}
		#main #content li table {
			width: auto;
		}
			caption {
				text-align: left;
				color: #424242;
				line-height: 1.6;
				padding: 0 5px;
			}
				caption strong {
					color: #8e0001;
					font-size: 130%;
					font-weight: normal;
					line-height: 1.3;
				}
				/* These are used for showing or hiding table contents */
				caption a.show, caption a.hide {
					color: #a10200;
					background: #fefefe url(/img/bg-caption-hide.png) 100% 100% no-repeat;
					border: solid 1px #ccc;
					padding: 0.2em 25px 0.2em 10px;
					float: right;
				}
				caption a.show {
					background: #fefefe url(/img/bg-caption-show.png) 100% 100% no-repeat;
				}

			td, th {
				border: solid 1px #ccc;
				border-top: none;
				padding: 0.5em 10px 0 10px;
			}
			.compact td, .compact th {
				padding: 0.5em 5px;
			}
			th {
			/*	background: #f5e7e7;*/
				font-weight: normal;
				text-align: left;
			}
			thead th, thead td {
				border-bottom: none;
				color: black;
				font-weight: bold;
				background: url(/img/sprite-default.png) -2397px 100% no-repeat;
				padding: 1em 15px;
				vertical-align: middle;
			}
			.compact thead th, .compact thead td {
				padding: 0.5em 10px;
			}
			thead th {
				text-align: center;
			}
			thead th.headerSortUp, thead th.headerSortDown {
				color: white;
/*				font-size: 130%;*/
				background: #dc4340 url(/img/sprite-default.png) -3533px 100% no-repeat;
			}
				/* These classes are assigned dynamically by jQuery */
				thead .header {
					cursor: pointer;
					padding-right: 5px;
				}
				 thead .header p {
					background: url(/img/bg-thead-p-up.png) right no-repeat;
					padding: 0 15px 0 0;
				}
				 thead .header .highlight p {
					background: url(/img/bg-thead-highlight-p-up.png) right no-repeat;
				}
				thead .headerSortDown p {
					background: url(/img/bg-thead-p-down.png) right no-repeat;
					padding: 0 15px 0 0;
				}
				thead .headerSortDown .highlight p {
					background: url(/img/bg-thead-highlight-p-down.png) right no-repeat;
				}

			table h1, table h2 , table h3, table h4, table h5, table h6 {
				font-size: 110%;
				font-weight: normal;
			}
			#content table p, #content table ul {
				margin-bottom: 0.5em;
			}
				#content table ul li {
					padding: 0 0 0 12px;
					background-position: 0 5px;
				}

				/* Key icons */
				table p img {
					margin: 0 0 4px 0;
				}
				table strong.rate {font-size: 170%;}
				table strong.figure {
					font-size: 130%;
					font-weight: normal;
					color: #333;
				}

	/* More jQuery fun */
	#tooltip {
		position: absolute;
		z-index: 3000;
		opacity: 0.85;
		width: 73px;
		height: 69px;
		color: black;
		background: url(/img/bg-tooltip.png);
		padding: 0 2px 0 8px;
	}
		#tooltip h3 {
			margin: 5px 0;
			font-size: 100%;
		}

		/* Under some tables is a key to the icons */
		ul.key {font-size: 85%;}
			#main .key li {
				display: inline;
				white-space: nowrap;
				padding: 0;
				background: none;
			}
			.key img {
				vertical-align: middle;
				margin: 0 0.5em;
			}

		/* Unordered lists */
		#content ul li {
			background: url(/img/bullet-default.gif) 17px 5px no-repeat;
			padding: 0 0 0 28px;
		}
		#content ul li, #content ol li {
			margin: 0.5em 0 0 0;
		}
			#content ul li ul li {
				background: url(/img/bullet-default-ul.gif) 19px 7px no-repeat;
			}
		ol.alpha {
			list-style-type: lower-alpha;
		}

	/* A generic call to action */
	div.actionbox, #content .tabs div.actionbox {
		margin: 0 0 20px 0;
		border: solid 1px #e1e1e1;
		background: white url(/img/sprite-default.png) -4099px 0 no-repeat;
		padding: 10px 10px 2em 10px;
		position: relative;
	}
	#content .tabs div.actionbox {
		margin-bottom: 0;
	}
		.actionbox p a {
			float: none;
			position: absolute;
			bottom: 10px;
			right: 10px;
			text-align: center;
/*			font-size: 120%;*/
		}
		.actionbox p a.norm {
		}
		/* Sometimes, these links aren't a call-to-action. */
		.actionbox p a.norm {
			position: static;
			font-size: 100%;
			color: #900001;
			background: none;
			padding: 0;
		}

	/* A generic banner */
	div.puff {
		color: white;
		background: #760004;
		border: solid 1px #a8a8a8;
		padding: 20px 10px;
		margin: 0 0 20px 0;
	}
		#content .puff a, #content .puff-twocol a {
			color: white;
		}
			#content .puff h2 {
				font-size: 280%;
				font-weight: normal;
			}
			#content .puff p.action {
				text-align: right;
			}
	/* A generic, two-column banner */
	div.puff-twocol {
		color: white;
		background: #760004 url(/img/bg-puff-twocol.png) 0 0 repeat-y;
		margin: 0 0 20px 0;
	}
	#maincontentwide div.puff-twocol {
		background: #760004 url(/img/bg-puff-twocol-wide.png) 0 0 repeat-y;
	}
	/* Sometimes, it's squeezed into a product page */
	.tabs div.puff-twocol {
		background: #760004 url(/img/bg-puff-twocol-narrow.png) 0 0 repeat-y;
	}
		.puff-twocol div div {
			background: none;
			float: left;
			width: 274px;
			text-align: right;
		}
		.puff-twocol div div, #main #content .tabs .puff-twocol div div {
			padding: 20px 0;
		}
		.puff-twocol div.last {width: 294px;}
		/* Full-width pages */
		#maincontentwide .puff-twocol div div {width: 367px;}
		#maincontentwide .puff-twocol div.last {width: 387px;}
		.tabs .puff-twocol div div {width: 253px;}
		.tabs .puff-twocol div.last {width: 273px;}
			#content .puff-twocol h2 {
				font-size: 230%;
				font-weight: normal;
				line-height: 0.9;
				margin: 0 0 0.2em 0;
			}
				#main .puff-twocol h1, #main .puff-twocol h2, #main .puff-twocol h3, 
				#main .puff-twocol h4, #main .puff-twocol h5, #main .puff-twocol h6, 
				#main .puff-twocol p {
					color: white;
					margin-right: 10px;
					margin-left: 10px;
				}
				#main div.puff-twocol p.disclaimer {
					font-size: 85%;
				}
					/* Phone number */
					.tabs .puff-twocol p strong {
						font-size: 140%;
						font-weight: normal;
					}

				#main .puff-twocol .last h1, #main .puff-twocol .last h2, 
				#main .puff-twocol .last h3, #main .puff-twocol .last h4, 
				#main .puff-twocol .last h5, #main .puff-twocol .last h6, 
				#main .puff-twocol .last p {
					margin-left: 30px;
				}

		/* A list. Of links. */
		#main ul.linklist li {
			padding: 0.5em 0;
			margin: 0;
			background: none;
			border-bottom: 1px dotted #666;
		}
			#main ul.linklist a {
				padding: 0.5em 0;
			}

	/* This is for the Savings Comparison accordion */
	.accordionHeader {
		padding: 10px 10px 0 10px;
		border-top: dotted 1px #797979;
		margin: 0 0 0.5em 0;
	}
	.ui-state-default {cursor: pointer;}
		#content .accordionHeader h2 {
			color: #8e0001;
			font-size: 130%;
			/* To ensure there is enought room for the background image */
			height: 25px;
		}
		div[id] .accordionHeader h2 {
			height: auto;
			min-height: 25px;
		}
		/* The current expanded ... thing */
		#accordion .ui-state-active h2 {
			background: none;
		}
		/* "Show Product Information" */
		#accordion .ui-state-default h2 {
			background: white url(/img/sprite-accordionHeader-h2.png) 378px 0 no-repeat;
		}
		/* "Show Product Information" */
		#accordion .ui-state-active h2 {
			background: white url(/img/sprite-accordionHeader-h2.png) -170px 0 no-repeat;
		}

/* The tabs on product pages */
/* This class is dynamically applied */
.ui-tabs .ui-tabs-hide {
	display: none !important;
}
	#content .tabs div {
		padding: 20px;
		border:1px solid #d6d6d6;
	}
		#content .tabs div div {
			padding: 0;
			border: none;
		}

	#content ul.ui-tabs-nav {
		margin: 0 0 -1px 0;
		font-size: 85%;
	}
		#content .ui-tabs-nav li {
			float: left;
			padding: 0;
			background: none;
		}
			#content .ui-tabs-nav a {
				border:1px solid #d6d6d6;
				border-bottom: none;
				display: block;
				color: white;
				background: #b21714;
				margin: 0 2px 0 0;
				text-decoration:none;
				background: #c11531 url(/img/sprite-default.png) -4665px 0 no-repeat;
				padding: 0.6em 0.9em 0.6em 0.9em;
			}
			
							#content .ui-tabs-nav a:hover {
							background: #c11531 url(/img/sprite-default.png) -5226px 0 no-repeat;
							color: white;
							}
			
			#content .ui-state-active a {
				color: black;
				background: white;
				cursor: text;
			}

		/* Page tools */
		div#pagetools {
			margin: 3em 0 0 0;
			border-top: solid 1px #afafaf;
			padding: 1em 9px 0 0;
		}
			#pagetools p {
				float: left;
				width: 382px;
				margin: 0;
				text-align: right;
			}
			/* Social networking links */
			p#socialBook {
				color: #b63d3d;
				background: url(/img/bg-socialBook.gif) 9px 0 no-repeat;
				text-align: left;
				text-indent: 29px;
				width: 174px;
			}
			#maincontentwide p#socialBook {
				width: 360px;
			}
				#socialBook em {
					font-style: normal;
				}
				#pagetools img {
					vertical-align: bottom;
					border-left: solid 0.5em white;
				}
				#socialBook img {
					margin: 0 0.2em 0 0;
					vertical-align: top;
					border: none;
				}
	
	/* Sub-navigation, left */
	div#subnav {
		float: left;
		width: 169px;
		position: relative;
		right: 568px;
		padding: 0.9em 0 0.2em 0;
		background: white url(/img/sprite-default.png) -1758px 100% no-repeat;
	}
	#maincontentwide div#subnav {
		right: 754px;
	}
		#subnav map {
			font-size: 90%;
		}
		#subnav map ul {
			border-right: solid 1px #e8e8e8;
			background: #e7e6e6;
		}
			/* First level navigation */
			#subnav map a, #subnav map em {
				display: block;
				/* Ah, contrast! */
				color: black;
				background: #e7e6e6;
				text-decoration: none;
				padding: 0.4em 15px;
				
			}
			/* You are here */
			#subnav map a:hover, #subnav map em, #subnav map em a {
				color: white;
				background: black;
				font-style: normal;
				text-decoration: underline;
			}
			/* You were here */
			#subnav map em a {
				display: inline;
				padding: 0;
			}
				/* Second-level navigation */
				#subnav map ul ul {
					border: none;
					margin: 0.4em 0;
				}
					#subnav map ul ul a {
						color: black;
						background: #e7e6e6;
					}
					#subnav map ul ul a:hover, #subnav map ul ul em {
						color: black;
						background: #d1d0d0;
					}
						#subnav map ul ul em a {
							padding: 0;
							background: none;
							border: none;
						}
							/* Third level navigation */
						#subnav map ul ul ul a, #subnav map ul ul ul em {
							color: #8c000b;
							background: #e7e6e6;
							padding: 0.2em 15px 0.3em 25px;
						}
						#subnav map ul ul ul a:hover, #subnav map ul ul ul em {
							color: white;
							background: #8c000b;
						}

div#related {
	width: 186px;
}
	#related div {
		color: #020202;
		background: #e3e2e2;
		margin: 0 0 1em 18px;
		border-bottom: solid 1px #939292;
	}
		#related div div {
			margin: 0;
			border: none;
			padding: 0;
			overflow: visible;
		}

	/* For banners and flash movies */
	#related div.banner {
		padding: 0;
	}
		#related h2 {
			color: #8f0001;
			background: white url(/img/sprite-default.png) -1758px 100% no-repeat;
			font-weight: normal;
			font-size: 160%;
			padding: 0.5em 10px;
			margin: 0 0 0.2em 0;
		}
		#related h3 {
			margin: 0 10px 0.2em 10px;
			font-weight: normal;
			font-size: 165%;
		}
		#related ul, #related p {
			margin: 0 10px 0.8em 10px;
		}
			#related li {
				margin-bottom: 0.3em;
			}
		#related .banner p {
			margin: 0;
		}
		#related p.action {
			text-align: center;
		}
			#related .action a, #related .action input {
				padding-right: 0;
				padding-left: 0;
				display: block;
			}
		#related select, #related textarea {width: 144px;}
		#related input {width: 130px;}
		/* Submit button on the simple calculator */
		#related .action input {
			width: 148px;
		}

div#disclaimer {
	margin: 2.2em 0 0 0;
}