/*****************************************************************************
 * Main screen CSS file.
 *
 *
 * Revision History
 * ----------------
 * 	2008-01-1	jdp	created
 *
 *****************************************************************************/

/* 1. initial setup - lots of generics */
/* 1a. HTML generics */
* {
	padding: 0;
	margin: 0;
}	
html, body {
	font: 10pt arial, verdana, helvetica, sans-serif;
	text-align: center;
	background: #3f0d80;
	color:#37323a;
}
body { background: url('/a/img/global/siteBackground.gif') repeat-y top center; }

a { color: #651DC0; }
a:visited,
a:hover,
a:active {}
a:focus { -moz-outline-style: none; }
img {
	display: block;
	border: 0;
}
h1 {}
h2 {}
h3 {}
	h3.hdrSifr, h3.centeredHdrSifr { font-size: 1.4em; }
h4 { font-size: 1.1em; font-weight: bold; margin: 1.5em 0 0.5em 0; }
	h4.hdrSifr, h4.centeredHdrSifr { font-size: 1.3em; }

ul { list-style: disc outside; }
li { margin-left: 1.5em; }

ol#terms li{margin-left:2em;}

p { margin-bottom: 1em; }

.centeredHdrSifr, .hdrSifr { color: #651DC0; }

noscript p { margin: 0; }

/* because EM and STRONG are /not/ semantically the same as I and B, and should /not/ be used as such - sorry */
em { font-style: normal; }
strong { font-weight: normal; }
abbr { border: 0; s}

/* 1b. generic styles */
.hide { display: none; }
.offScreen { 
	position: absolute;
	left: -5000px;
	width: 1px;
}
.help { cursor: help; }	
.smallText { font-size: 0.8em; }

.clearLeft { clear: left; }
.clearRight { clear: right; }
.clearBoth { clear: both; }
.centred { text-align: center; }

.fir { display: block; text-indent: -5000px; text-decoration: none; font-size: 1px; }

/* 2. Wrapper styles */
#outerWrapper { background: url('/a/img/global/siteTop.jpg') no-repeat top center; z-index: 1; padding-top: 5px; }
#wrapper {
	background: transparent url('/a/img/global/innerBackground.jpg') repeat-x bottom left;	
	width: 910px;
	margin: 0 auto;
	text-align: left;
	z-index: 3;
}
#innerWrapper { background: transparent url('/a/img/global/shelf.jpg') no-repeat bottom center; z-index: 4;position: relative; z-index:0; }
#cupHolder { background: transparent url('/a/img/global/leftCup.jpg') no-repeat bottom left; z-index: 5; padding-bottom: 71px; }
	body.homePage #cupHolder { padding-bottom: 0; }

#flashCupHolder { 
	position: absolute;bottom:0;
	width: 206px; 
	height: 450px; }

/*#flashCupHolder { position: absolute; display: none; width: 206px; height: 450px; }*/

#footerWrapper {
	background: url('/a/img/global/siteBottom.jpg') no-repeat top center;
	height: 45px;
}

/* 3. header pane */
#headerPane {
	float: left;
	width: 206px;
	background: url('/a/img/global/headerCentre.jpg') no-repeat 75px 0;
}
	#headerPane div.content {
		background: url('/a/img/global/headerLeftEnd.jpg') no-repeat 0 0;
		width: 206px;
		height: 216px;
	}
	
	#headerPane div.logoFlash { height: 216px; width: 206px; }
	#headerPane h1 { height: 168px; width: 174px; margin: 0; padding: 48px 0 0 15px; }
	#headerPane h1 a {
		height: 168px;
		width: 174px;
		background: url('/a/img/global/logo.png'); 
	}
	
/* 4. main navigation pane */
#navigationPane {
	width: 704px;
	margin-left: 206px;
	background: url('/a/img/global/headerCentre.jpg') no-repeat -131px 0;
}
	#navigationPane div.content {
		background: url('/a/img/global/headerRightEnd.jpg') no-repeat 100% 0;
		min-height: 55px;
		padding: 41px 0 0 114px;
	} 
	#navigationPane div.innerContent {
		background: url('/a/img/global/navShadows.png'); 
		width: 426px; 
		height: 106px;
		padding-left: 59px;
	}

	#navigationPane ul { list-style-type: none; }
		#navigationPane ul li { height: 38px; width: 100px; margin: 0 31px 0 0; float: left; }
		#navigationPane ul li a { background: url('/a/img/global/nav.gif') no-repeat top left; height: 38px; width: 100px; }
		
			#navigationPane ul li.mi0 a { background-position: 0 0; }
			#navigationPane ul li.mi1 a { background-position: -101px 0; }
			#navigationPane ul li.mi2 a { background-position: -202px 0; }
			#navigationPane ul li.mi0 a:hover { background-position: 0 -38px; }
			#navigationPane ul li.mi1 a:hover { background-position: -101px -38px; }
			#navigationPane ul li.mi2 a:hover { background-position: -202px -38px; }

/* 5. Content page—again, we have some templates */
#contentPane { margin: 0 0 0 0; float: left; width: 704px; }

	/* 5a. homepage template */
	#contentPane.homePage { color: #FFF; float: none; width: 910px; margin: 0; }
		#contentPane.homePage div.copyContainer {
			float: right; 
			width: 462px; 
			padding-right: 110px; 
			padding-top: 50px;
			text-align: center;
		}
		#contentPane.homePage div.bookContainer {
			clear: left;
			width: 265px;
			height: 325px;
			background: url('/a/img/homepage/books.jpg') no-repeat top left;
			padding: 115px 0 0 50px;
		}
			#contentPane.homePage div.bookContainer ul { margin: 0; list-style-type: none; width: 175px; height: 325px; }
			#contentPane.homePage div.bookContainer ul li { float: left; }
			#contentPane.homePage div.bookContainer ul li, 
			#contentPane.homePage div.bookContainer ul li a { height: 320px; margin: 0; }
				#contentPane.homePage div.bookContainer ul li.mi0, 
				#contentPane.homePage div.bookContainer ul li.mi0 a { width: 75px; }
				#contentPane.homePage div.bookContainer ul li.mi1, 
				#contentPane.homePage div.bookContainer ul li.mi1 a { width: 40px; }
				#contentPane.homePage div.bookContainer ul li.mi2, 
				#contentPane.homePage div.bookContainer ul li.mi2 a { width: 60px; }
	
		body.homePage #innerWrapper { background: url('/a/img/homepage/shelf.jpg') no-repeat bottom right; }
		/* 
			IE6/Win screws this up--setting no background image here causes the background image on #innerWrapper
			to disappear as well...
		*/		
		body.homePage #cupHolder { background-image: none; }

	/* 5b. generic book template */
	#contentPane.withBook {}
	
		#contentPane.withBook div.theBookTop {}
		#contentPane.withBook div.theBook {}
		#contentPane.withBook div.minHeightSub { height: 360px; float: left; }
		#contentPane.withBook div.pageOne,
		#contentPane.withBook div.pageTwo { float: left; width: 240px; margin-left: 75px; }
		#contentPane.withBook div.pageTwo { margin-left: 45px; }
		
		#contentPane.withBook div.formBackForward { width: 704px; clear: both; }
			#contentPane.withBook div.formBackForward div.backControl,
			#contentPane.withBook div.formBackForward div.forwardControl { float: left; width: 240px; margin-left: 75px; }
			#contentPane.withBook div.formBackForward div.forwardControl { margin-left: 45px; text-align: right; }
				#contentPane.withBook div.formBackForward div.forwardControl p,
				#contentPane.withBook div.formBackForward div.forwardControl input { display: inline; margin: 0 0 0 1em; }
		
	/* 5c. 'lightbox' template--fallback in case no JS */
	#contentPane.lightBox,
	body.lightBox #contentPane {
		margin: 0 20px 20px 0;
		width: 628px;
		background: #FFF;
		border: 18px solid #651DC0;
		padding: 10px;
	}
		#contentPane.lightBox div.header {
			height: 100px;
			margin-bottom: 10px;
		}
		#contentPane.lightBox div.content {
			height: 300px;
			overflow: auto;
		}

		/* special overrides to handle dimmed content */
		body.lightBox div#wrapper { background: url('/a/img/global/innerBackground_dark.jpg') repeat-x bottom left;	}
		body.lightBox #innerWrapper { background: url('/a/img/global/shelf_dark.jpg') no-repeat bottom center; }
		body.lightBox #cupHolder { background: none; }
		body.lightBox #headerPane h1 a  { background: url('/a/img/global/logo_dark.png');}

/* 7. footer pane */
#footerPane { width: 923px; margin: 0 auto; padding: 10px 0 0 0; font-size: 0.82em; }

	/* 7a. quick-links pull-up */
	#quickLinx {
		background: url('/a/img/global/productQuickLinksBg.jpg') top left no-repeat;
		height: 37px;
		padding: 4px 0 0 45px;
		float: left;
	}
		#quickLinx h3, 
		#quickLinx h3 a { height: 33px; width: 113px; }
		#quickLinx h3 a { background: url('/a/img/global/productQuickLinksButton.gif') top left no-repeat; }
		#quickLinx h3 a.open { background-position: 0 -33px; }
	
		#quickLinx ul { display: none; list-style-type: none; margin: 0; position: absolute; background: #FFF; z-index:1; }
			#quickLinx ul li { padding: 0; margin: 0; text-align: left; }
			#quickLinx ul li a { padding: 5px 10px; display: block; text-decoration: none; color: #651DC0; font-weight: bold; }
			#quickLinx ul li a:hover { background: #651DC0; color: #FFF; }
	
	/* 7b. footer links */
	#footerLinx { float: right; width: 600px; padding: 5px 0 0 0; }
	
		#footerLinx ul { list-style-type: none; margin: 0; float: right; }
			#footerLinx ul li { float: left; margin: 0; padding: 0 0.5em; color: #fff;}
			#footerLinx ul li a { color: #FFF; text-decoration: none; font-weight: normal; }

/* 8. lightbox specific styles */
div.lightBox_blackout {
	position: absolute;
	z-index: 997;
	width: 910px;
	background: url('/a/img/common/black60.png');
	display: none;
}
div.lightBox_content {
	position: absolute;
	display: none;
	border: 18px solid #651DC0;
	background: #FFF;
	z-index: 998;
	padding: 0;
}
div.lightBox_innerContent { background: #FFF; padding: 10px; }
div.lightBox_loading { 
	font-size: 1.8em;
	font-weight: bold;
	text-align: center;
	color: #651DC0;
	margin: 30% 0 0 0;
}
	a.lightBox_close {
		position: absolute;
		z-index: 999;
		top: -8px;
		right: -7px;
		height: 30px;
		width: 30px;
		padding: 0; 
		background: #FFF url('/a/img/common/closeLightbox.gif');
	}
	div.lightBox_content div.header { height: 100px; margin-bottom: 10px; }
	div.lightBox_content div.content { overflow: auto; }

/* 9. lightbox stuff */
div.header.lbFaq,
div.header.lbContact { background: url('/a/img/common/cadburyDessertTime.jpg') right center no-repeat; }
div.header.lbTaC { background: url('/a/img/common/cadburyComp.jpg') right center no-repeat; }

div.header ul.utilityLinks { list-style-type: none; }
div.header ul.utilityLinks li.mi0 { font-size: 1.1em; margin: 0 0 1.5em 0; }
div.header ul.utilityLinks li.mi1 { font-weight: bold; margin: 0 0 2em 0; }

/*
 	Generics
*/
.formRow,
.formReverseRow,
.fomRowFinal { margin: 0 auto 0.7em auto; width: 200px; clear: both; }
.formRowFinal { text-align: right; }
	.formReverseRowError label,
	.formRowError label { color: #F00; }
	.formRow label { display: block; font-weight: bold; float: none; margin: 0; }
	.sIFR-hasFlash .formRow label { letter-spacing: -1px; }
	.formRow input,
	.formRow select { width: 100%; }
	
	.formReverseRow label { margin-left: 25px; display: block; font-weight: normal; }
	.formReverseRow input { width: 25px; float: left; }
	
form.greyForm .formRow,
form.greyForm .formReverseRow,
form.greyForm .formRowFinal { margin: 0 0 0.8em 0; width: 300px; clear: both; }
form.greyForm .formRowFinal { text-align: right; }

	form.greyForm .formRow label { font-weight: normal; color: #666; float: left; width: 100px; }
	form.greyForm .formRow input,
	form.greyForm .formRow select,
	form.greyForm .formRow textarea { width: 190px; margin-left: 5px; }

	form.greyForm .formReverseRow label { display: block; margin-left: 25px; color: #666; font-weight: bold; float: none; }
	form.greyForm .formReverseRow input { width: auto; display: block; float: left; font-weight: normal; }
	
/* sifr integration stuff */
/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}


.error, .error label{
	color:#ff0000;
	font-weight:bold;
}