html{
	background: #312360;
	position: absolute;
	width: 100%;
	min-height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	color: #fff;
}

body{
	margin-top: 2.875em;
	text-rendering: optimizeLegibility;

	background: -webkit-gradient(linear, left top, right top, color-stop(0%, #312360), color-stop(100%, #8180aa));
	background: -webkit-linear-gradient(left,	#312360 0%, #8180aa 100%);
	background: -moz-linear-gradient(left,		#312360 0%, #8180aa 100%);
	background: -ms-linear-gradient(left,		#312360 0%, #8180aa 100%);
	background: -o-linear-gradient(left,		#312360 0%, #8180aa 100%);
	background: linear-gradient(to right,		#312360 0%, #8180aa 100%);
}
	#top{
		background: #2d225e;
		white-space: nowrap;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 2.875em;
		z-index: 999;
	}
		#top > *{
			font-size: 1em;
			margin: 0;
			display: inline-block;
			vertical-align: middle;
			white-space: normal;
			width: 50%;
		}

		#top_l{
			height: 100%;
		}
			/** Cadbury Kitchen logo */
			#logo{
				display: inline-block;
				vertical-align: middle;
				font-size: 3.45em;
				height: 1em;
				width: 1.5em;
				position: relative;
				top: .2em;
				left: .29em;
				background-repeat: no-repeat;
				background-image: url("../img/logo2.png");
			}
				.low-res #logo{
					background-image: url("../img/logo2_83x52.png");
				}

				#logo > a{
					display: block;
					width: 100%;
					height: 100%;
					text-indent: -9999px;
					text-align: left;
					position: relative;
					z-index: 999;
				}


		#top_r{
			text-align: right;
			white-space: nowrap;
		}
			/** Buttons for opening the header's navigation menu and search bar. */
			#top_r .disclosure{
				display: inline-block;
				vertical-align: middle;
				background: #a29061;
				line-height: 1.5em;
				width:	1.9em;
				height:	1.9em;
				text-align: center;
				font: .8em/2em CKitchenIcons;
				z-index: 900;
				position: relative;

				-webkit-border-radius:	.35em;
				-moz-border-radius:		.35em;
				border-radius:			.35em;
			
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}


			/** Search pane */
			#top_r form{
				display: inline;
			}
			#top_r .search-bar{
				display: inline-block;
				vertical-align: top;
				white-space: nowrap;
				position: relative;
			}
				#keywords{
					display: block !important;
					position: absolute;
					bottom: 0;
					right: 100%;
					height: 100%;
					border: 0;
					padding: 0 .5em;
					width: 11em;
					font-size: .8em;
					font-weight: bold;
					color: #000;
					margin-right: .45em;

					-webkit-border-radius:	.35em;
					-moz-border-radius:		.35em;
					border-radius:			.35em;
				}

				#sb_open:checked ~ #keywords{
					width: 0 !important;
					opacity: 0;
				}

				/** Invisible element blocking user interaction when search bar's closed. */
				#sb_buffer{
					display: none;
					position: absolute;
					right: 100%;
					height: 100%;
					top: 0;
					width: 1em;
				}
					#sb_open:checked ~ #sb_buffer{
						display: block;
					}
			
				#sb_submit{
					display: none;
				}




				/** Main navigation menu */
				#topnav{
					display: inline-block;
					vertical-align: top;
					padding-right: 1em;
				}
					#topnav > ul{
						display: block;
						position: absolute;
						overflow: hidden;
						top: 100%;
						right: 0;
						margin: 0;
						list-style: none;

						/** Needs to be tweaked in JavaScript using height of child nodes. */
						max-height: 30em;

						/** Transition rules */
						-webkit-transition:		.4s max-height ease, 0s box-shadow step-end;
						-moz-transition:		.4s max-height ease, 0s box-shadow step-end;
						-ms-transition:			.4s max-height ease, 0s box-shadow step-end;
						-o-transition:			.4s max-height ease, 0s box-shadow step-end;
						transition:				.4s max-height ease, 0s box-shadow step-end;
					}
						#topnav > .control:checked ~ ul{
							-webkit-transition-delay:	0s, .4s;
							-moz-transition-delay:		0s, .4s;
							-ms-transition-delay:		0s, .4s;
							-o-transition-delay:		0s, .4s;
							transition-delay:			0s, .4s;
						}

						#topnav > ul > li{
							padding: 0;
							margin: 0;
							list-style: none;
						}
							/** Actual nav menu links */
							#topnav > ul > li > a{
								display: block;
								padding: .85em 1em;
								border-top: 1px solid #7b72b2;
								font: bold .85em sans-serif;
								text-transform: uppercase;
								text-align: left;
								min-width: 12em;
							}
								/** Use a media query to overwrite the gradient backgrounds applied with .shaded-links (declared in "global.css")
								 * Note the odd choice of operators: max-width overrides min-width, meaning 600px-wide devices will still see an untextured nav menu. */
								@media not screen and (min-width: 37.5em){
									#topnav > ul > li > a		{background: #462a82;}
									#topnav > ul > li > a:hover	{background: #837cb9;}
									#topnav > ul{
										background-color: #312360;
										-webkit-box-shadow:	0 2px 7px -2px #000;
										-moz-box-shadow:	0 2px 7px -2px #000;
										box-shadow:			0 2px 7px -2px #000;
									}
									#topnav > .control:checked ~ ul{
										-webkit-box-shadow:	none;
										-moz-box-shadow:	none;
										box-shadow:			none;
									}
								}

								#topnav > ul > :first-child > a{
									border-top: 0;
								}
	

				/** Dropdown menu subnavigation */
				#subnav{
					padding: .75em 1em;
					text-transform: uppercase;
				}
					#subnav > .styled-dropdown{
						font-size: .8em;
						max-width: 20em;
						z-index: 200;
						width: 100%;
						-webkit-border-radius:	.5em;
						-moz-border-radius:		.5em;
						border-radius:			.5em;
					}
						.styled-options,
						.styled-options > li,
						.styled-dropdown .title,
						.styled-options li.selected > a,
						.styled-options li.current > a{
							-webkit-border-radius:	inherit;
							-moz-border-radius:		inherit;
							border-radius:			inherit;
						}

						.styled-options li:last-child > a,
						.styled-dropdown > .menu.control:checked ~ .title{
							-webkit-border-bottom-left-radius:	inherit;
							-webkit-border-bottom-right-radius:	inherit;
							-moz-border-radius-bottomleft:		inherit;
							-moz-border-radius-bottomright:		inherit;
							border-bottom-left-radius:			inherit;
							border-bottom-right-radius:			inherit;
						}
					

						#subnav .styled-options{
							padding-top: 1.75em;
							border: 1px solid #9791b9;
						}
							#subnav .styled-options > li:last-child > a{
								padding-bottom: 2.5em;
							}

						.styled-dropdown .title,
						.styled-dropdown .label,
						.styled-dropdown a{
							font-size: .85em;
							line-height: 2.5em;
							padding-left: 1em;
							padding-right: 2em;
						}
						.styled-dropdown .title{
							height: 100%;
						}

						/** Here's where things get a little messy with the last-minute addition of nested subnavigation. */
						.styled-options .label{
							cursor: default;
						}
							.styled-options ul a{
								text-transform: none;
								font-size: .9em;
								line-height: 2.2em;
							}

							.styled-options ul > li.current > a{
								text-indent: 0;
								text-transform: uppercase;
								font-size: .85em;
								line-height: 2.5em;
							}





	/** Actual content */
	main{
		padding: 1em 1.25em 0;
		font-size: .75em;
		line-height: 1.5em;
		position: relative;
		z-index: 101;
	}
		main a:link,
		main a:visited{
			color: #967ecd;
		}

		/** Apply negative margins to form-fit some elements to the browser window (overriding the parent element's padding) */
		main > .bowl,
		#promo{
			margin-left:	-1.25em;
			margin-right:	-1.25em;
			width: auto;
		}


		main.white{
			margin-bottom: 3em;
		}
			main.white > .convex{
				display: block;
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				margin: -2px 0 0;
				padding-top: 5.5%;
			}


		main:not(.white) a:link,
		main:not(.white) a:visited{
			color: inherit;
		}

		/** Rescale headings */
		main h1, main .h1{
			max-width: 70%;
			font-size: 1.917em;
		}
			main h1 + p{
				margin-top: 0;
			}

		main h2, main .h2{
			font-size: 1.917em;
		}
	
	
		main > .bowl.concave{
			margin-bottom: -1px;
		}





		/** Bunch of promotional attention-grabbers */
		#promo{
			z-index: 152;
			position: relative;
		}
			#promo a:link,
			#promo a:visited		{color: #967ecd;}
			#promo h3				{text-transform: uppercase;}
			#promo h3,	#promo p	{line-height: 1.1em;}

			#promo > .columns > article{
				width: 50%;
				padding-top: 1em;
				padding-bottom: 1em;
				margin: 0;
				background: none;
			}
				#promo > .columns > article > figure{
					padding-bottom: 1em;
					position: relative;
					max-width: none;
					height: 8em;
				}
					#promo > .columns > article > figure > img,
					#promo > .columns > article > figure > a > img{
						width: auto;
						max-height: 100%;
						margin: 0 auto;
					}

					/** Draw a border between each cell */
					#promo .columns > article > figure::after{
						content: "";
						position: absolute;
						display: block;
						top: 100%;
						right: 100%;
						width: 6px;
						height: 120px;
						margin: -1em 1.5em 0 0;
						background: url("../img/divider_dark.png") no-repeat;
					}
						#promo .columns > :first-child > figure::after{
							content: none !important;
						}


		#promo.white{
			background: url("../img/grad/bg_promo.png") #fff bottom right repeat-x;
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(0,0,0,0)), color-stop(66%, rgba(0,0,0,.01)), color-stop(84%, rgba(0,0,0,.08)), color-stop(96%,rgba(0,0,0,.14)), color-stop(100%,rgba(0,0,0,.2)));
			background-image: -webkit-linear-gradient(top,	rgba(0,0,0,0) 80%,	rgba(0,0,0,.08) 92%,	rgba(0,0,0,.14) 97%,	rgba(0,0,0,.2) 100%);
			background-image: -moz-linear-gradient(top,		rgba(0,0,0,0) 80%,	rgba(0,0,0,.08) 92%,	rgba(0,0,0,.14) 97%,	rgba(0,0,0,.2) 100%);
			background-image: -ms-linear-gradient(top,		rgba(0,0,0,0) 80%,	rgba(0,0,0,.08) 92%,	rgba(0,0,0,.14) 97%,	rgba(0,0,0,.2) 100%);
			background-image: -o-linear-gradient(top,		rgba(0,0,0,0) 80%,	rgba(0,0,0,.08) 92%,	rgba(0,0,0,.14) 97%,	rgba(0,0,0,.2) 100%);
			background-image: linear-gradient(to bottom,	rgba(0,0,0,0) 80%,	rgba(0,0,0,.08) 92%,	rgba(0,0,0,.14) 97%,	rgba(0,0,0,.2) 100%);
		}
			#promo.white .concave.bowl{
				position: absolute;
				bottom: 100%;
				left: 0;

				/** Used to plug a 1px gap appearing from roundoff issues in some window widths */
				margin-bottom: -1px;
			}



		/** Layer for holding assorted background graphics and decorative miscellanea */
		#icing{
			position: absolute;
			width: 100%;
			height: 100%;
			bottom: 0;
			left: 0;
			z-index: 0;
			overflow: hidden;
			background-position: 50% 0;
			background-repeat: no-repeat;
		}
			#icing > .bg{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			#icing img{
				position: absolute;
				display: block;
			}

			#icing > .centre{
				height: 100%;
				position: relative;
			}


		/** Box of social sharing links used on some pages */
		#share-this{
			text-align: right;
		}
			#share-this > *{
				display: inline-block;
				vertical-align: top;
				padding-left: 1em;
			}


	/** Footer navigation */
	#footnav{
		color: #d0cae3;
		text-transform: uppercase;
		font-size: .5625em;
		text-align: center;
		display: block;
		padding: 1.65em 0 1em;
		white-space: nowrap;

		background: #8882bf url("../img/grad/footnav.png") repeat-x;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36295b), color-stop(60%, #635a91), color-stop(100%, #8882bf));
		background: -webkit-linear-gradient(top,	#36295b 0%, #635a91 60%, #8882bf 100%);
		background: -moz-linear-gradient(top,		#36295b 0%, #635a91 60%, #8882bf 100%);
		background: -ms-linear-gradient(top,		#36295b 0%, #635a91 60%, #8882bf 100%);
		background: -o-linear-gradient(top,			#36295b 0%, #635a91 60%, #8882bf 100%);
		background: linear-gradient(to bottom,		#36295b 0%, #635a91 60%, #8882bf 100%);
	}
		#footnav a{
			padding-left: .5em;
			border-left: 1px solid #d0cae3;
			padding-right: .25em;
		}
			#footnav a:hover{
				text-decoration: none;
				color: #fff;
			}

		#footnav > ul > li:first-child > a{
			border-left: 0;
			padding-left: 0;
		}



	/** Copyright notices/etc */
	#bottom{
		background: #2d225e;
		padding: 1.25em 1em;
		font-size: .6875em;
		position: relative;
	}
		#copyright-colour{
			color: #d0cae3;
			padding-bottom: .25em;
		}
			#tm{
				font-size: 1.2em;
				position: absolute;
				display: none;
				z-index: 100;
				top: .5em;
				left: .4em;
			}

		#copyright-owner{
			color: #967ecd;
			line-height: 1.6em;
			margin-top: 0;
		}


		/** Social/Share links */
		#follow-us{
			padding-top: .7em;
		}
			#follow-us span{
				text-transform: uppercase;
				white-space: nowrap;
				display: inline-block;
				vertical-align: -60%;
				padding-right: .25em;
				font-weight: bold;
			}

/** Elevate some foreground elements to layer them above the "graphical icing" below. */
#footnav,
#copyright-colour,
#copyright-owner,
#follow-us{
	position: relative;
	z-index: 150;
}






/*=============================================================================*
	2. TABLET (600+)
===============================================================================*/
@media screen and (min-width: 37.5em){


body{
	margin-top: 0;
}


/** Start unravelling our header */
#top, #top_l, #top_r, #topnav{
	position: static;
	width: auto;
	height: auto;
	background: none;
	display: block;
	white-space: normal;
}

/** Now start reapplying some formatting */
#top{
	position: relative;
	z-index: 100;
}
	/** Floating Cadbury Kitchen logo in top-left corner */
	#top_l{
		position: absolute;
		top: 0;
		left: 0;
	}
		#logo{
			font-size: 6em;
			width: 1.538em;
			height: 1em;
			position: absolute;
			top: .13em;
			left: .23em;
		}
			.low-res #logo{
				background-image: url("../img/logo2_197x124.png");
			}


	/** Search bar and navigation buttons */
	#top_r{
		padding: 7.5em 1.25em 0 0;
	}
		/** Permanently expand the search bar. */
		#top_r .search-bar{
			position: absolute;
			display: block;
			z-index: 110;
			padding: 0 1.25rem 0 0;
			font-size: .9em;
			top: .85em;
			right: 1em;
		}
			#keywords{
				-webkit-appearance: none;
				-webkit-border-radius:	.65em 0 0 .65em;
				-moz-border-radius:		.65em 0 0 .65em;
				border-radius:			.65em 0 0 .65em;
				margin-right: 0;
				width: 14em !important;
			}
		
			#sb_open:checked ~ #keywords{
				width: 14em !important;
				opacity: 1 !important;
			}

			#top_r .search-bar > .disclosure{
				width:	2em;
				height:	2em;
				float: right;
				margin-left: 1px;

				-webkit-border-radius:	0 .5em .5em 0;
				-moz-border-radius:		0 .5em .5em 0;
				border-radius:			0 .5em .5em 0;
			}

			#sb_buffer	{	display: none;				}
			/** Hidden submit button */
			#sb_submit{
				position: absolute;
				opacity: 0;
				border: 0;
				padding: 0;
				margin: 0;
				top: 0;
				display: block;
				overflow: hidden;
				width: 2em;
				height: 2em;
				z-index: 901;
			}
		
			/** Kill off transitions on a few nav elements to prevent an odd "jumping" effect on page load. */
			#keywords,
			#topnav > ul{
				-webkit-transition:	none;
				-moz-transition:	none;
				-ms-transition:		none;
				-o-transition:		none;
				transition:			none;
			}
		

		#topnav{
			padding: 0;
			z-index: 110;
			position: relative;
			margin-bottom: 1.25em;
		}
			#topnav > .disclosure{
				display: none;
			}

			#topnav > ul{
				display: inline-table;
				vertical-align: top;
				white-space: nowrap;
				max-height: none !important;
				position: static;
				padding: 0;
				margin: 0;

				-webkit-border-radius:	.5em;
				-moz-border-radius:		.5em;
				border-radius:			.5em;
			}
				#topnav > ul > li{
					display: table-cell;
					vertical-align: middle;
				}
					/** Actual thick, button-like links */
					#topnav > ul > li > a{
						display: block;
						padding: .75em 1em;
						min-width: 0;
						font: bold .75em sans-serif;
						text-transform: uppercase;
						text-align: center;

						border-left:	1px solid #6c5aa3;
						border-right:	1px solid #5a4393;
						border-top:		none;
						border-bottom:	none;
					}
						#topnav > ul > li:first-child	> a	{border-left:	none}
						#topnav > ul > li:last-child	> a	{border-right:	none}


					/** Set the navigation's first and last segments to use rounded corners */
					#topnav > ul > li:first-child,
					#topnav > ul > li:first-child > a{
						-webkit-border-top-left-radius:		inherit;
						-moz-border-radius-topleft:			inherit;
						border-top-left-radius:				inherit;

						-webkit-border-bottom-left-radius:	inherit;
						-moz-border-radius-bottomleft:		inherit;
						border-bottom-left-radius:			inherit;
					}

					#topnav > ul > li:last-child,
					#topnav > ul > li:last-child > a{
						-webkit-border-top-right-radius:		inherit;
						-moz-border-radius-topright:			inherit;
						border-top-right-radius:				inherit;

						-webkit-border-bottom-right-radius:		inherit;
						-moz-border-radius-bottomright:			inherit;
						border-bottom-right-radius:				inherit;
					}

		#subnav{
			position: absolute;
			z-index: 110;
			right: 0;
			width: 17em;
		}

/** Main body*/
main{

}
	main.white{
		margin-bottom: 4em;
	}

	.showcase::after{
		content: "";
		display: block;
		clear: both;
	}

	.showcase > *{
		width: 50%;
		float: left;
		border-left: 1px solid #7067a0;
		border-top: 0;
		margin: .5em 0;
	}
		.showcase > :nth-of-type(odd){
			border-left: 0;
			background: none;
		}

		.showcase > .double{
			width: 100%;
			clear: both;
			border-left: 0;
			background: none;
			padding-left: 1.25em;
		}

		.showcase > hr{
			display: block;
			float: none;
			width: 100%;
		}
			.showcase > hr:last-child{
				display: none;
			}



	/**
	 *	Promo footer
	 * 
	 *	NOTE: Some of these rules are replaced by the following tablet tweakpoint, as the rules for scaling and fitting
	 *	the Facebook iframe are slightly too specific to be easily rolled back in the desktop view media query. The following
	 *	rules are really included as more of a base. 	
	 */
	#promo > .columns > article{
		border: none;
		width: 33%;
	}
		#promo .showcase > *::before{
			content: none;
		}

		#fb_feed{
			
		}
			#fb_feed_pin .fb-like-box{
				margin: 0 0 0 -1.25em !important;
			}



#footnav{
	font-size: .7em;
}
	#footnav > .centre{
		display: block;
		margin: 0 auto;
		text-align: left;
		padding-left: 1em;
	}

}

/*=============================================================================*
	2.5 TABLET ONLY (600-1024)
===============================================================================*/
@media screen and (min-width: 37.5em) and (max-width: 64em){

	/** Promo footer */
	#promo > .columns  > article{
		width: 25%;
	}

	#promo .showcase > .handheld-hide{
		width: 50%;
		height: 18em;
		margin-top: 1em;
		margin-bottom: -2em;
		padding-top: 0;
		padding-bottom: 0;
		overflow: hidden;
	}

	/** Facebook realtime feed */
	#fb_feed{
		width: 100%;
		height: 100%;
		border: 1px solid #adadad;
		border-top-color: #38629d;
		position: relative;
	}
		#fb_feed > h3,
		#fb_feed > .tr,
		#fb_feed > a,
		#fb_feed > .bowl{
			display: none;
		}

		/** Replacement heading for the footer's FB feed. */
		#fb_feed > p.tablet-only{
			background: #edeff4;
			color: #000;
			margin: 0;
			padding: .3em .5em;
			border-bottom: 1px solid #d8dfea;
			position: relative;
			z-index: 50;
		}
			#fb_feed > p.tablet-only > a{
				color: inherit;
				display: block;
				font-size: .9em;
				font-weight: bold;
			}

		#fb_feed_pin{
			background: #fff;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			padding-top: 2em;
		}
			#fb_feed_pin .fb-like-box,
			#fb_feed_pin .fb-like-box > span,
			#fb_feed_pin .fb-like-box iframe{
				position: relative;
				width: 100% !important;
				height: 100% !important;
				padding: 0 !important;
				margin: 0 !important;
			}
}


/*=============================================================================*
	2.60 TWEAKPOINT: Tablet (752+)
===============================================================================*/
@media screen and (min-width: 47em){
	#logo{
		font-size: 8em;
		top:	.15em;
		left:	.22em;
	}
}


/*=============================================================================*
	2.75 TWEAKPOINT: Tablet (1024+)
===============================================================================*/
@media screen and (min-width: 52em){
	main.white{
		margin-bottom: 5em;
	}
}



/*=============================================================================*
	3. DESKTOP (1024+)
===============================================================================*/
@media screen and (min-width: 64em){

.bowl.convex{
	padding-top: 10.42% !important;
	background-image: url("../img/convex_2.png");
}

.bowl.concave{
	padding-top: 5.52%;
	margin-top: -5.52%;
	background-image: url("../img/concave_2.png");
}

.centre{
	max-width: 960px;
	max-width: 60rem;
}

html{
	background: #2d225e;
	background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #2e235f), color-stop(29%, #2f215e), color-stop(41%, #412e7d), color-stop(47%, #433081), color-stop(58%, #615794), color-stop(73%, #8180aa));
	background-image: -webkit-linear-gradient(left,	#2e235f 0, #2f215e 29%, #412e7d 41%, #433081 47%, #615794 58%, #8180aa 73%);
	background-image: -moz-linear-gradient(left,	#2e235f 0, #2f215e 29%, #412e7d 41%, #433081 47%, #615794 58%, #8180aa 73%);
	background-image: -ms-linear-gradient(left,		#2e235f 0, #2f215e 29%, #412e7d 41%, #433081 47%, #615794 58%, #8180aa 73%);
	background-image: -o-linear-gradient(left,		#2e235f 0, #2f215e 29%, #412e7d 41%, #433081 47%, #615794 58%, #8180aa 73%);
	background-image: linear-gradient(to right,		#2e235f 0, #2f215e 29%, #412e7d 41%, #433081 47%, #615794 58%, #8180aa 73%);
}
	body > .centre::after{
		display: block;
		clear: both;
		content: "";
	}

	#top{
		height: 12em;
	}
		#logo{
			font-size: 8em;
			left: .45em;
			top: .06em;
		}

		#top_r{
			position: absolute;
			right: 0;
			padding: 3.725em .2em 0 0;
		}
			#topnav > ul > li > a				{padding: .9em .5em;}
			#topnav > ul > li:first-child > a	{padding-left:	.75em}
			#topnav > ul > li:last-child > a	{padding-right:	.75em}


	#subnav{
		width: 21.85%;
		float: left;
		position: relative;
		right: auto;
		padding: 0 2% 0 0;
		font-size: 1.12em;
	}
		#subnav .title{
			font: 1em "futura-pt", sans-serif;
			font-weight: bold;
			padding: .65em 1.45em;
			margin: 0;

			-webkit-border-radius:	.75em .75em 0 0;
			-moz-border-radius:		.75em .75em 0 0;
			border-radius:			.75em .75em 0 0;

			background: url("../img/grad/subnav-title.png") #432e84 repeat-x;
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8781bd), color-stop(10%, #857fbb), color-stop(64%, #64579e), color-stop(100%, #433182));
			background: -webkit-linear-gradient(top,	#8781bd 0%, #857fbb 10%, #64579e 64%, #433182 100%);
			background: -moz-linear-gradient(top,		#8781bd 0%, #857fbb 10%, #64579e 64%, #433182 100%);
			background: -ms-linear-gradient(top,		#8781bd 0%, #857fbb 10%, #64579e 64%, #433182 100%);
			background: -o-linear-gradient(top,			#8781bd 0%, #857fbb 10%, #64579e 64%, #433182 100%);
			background: linear-gradient(to bottom,		#8781bd 0%, #857fbb 10%, #64579e 64%, #433182 100%);
		}

		#subnav .styled-options{
			padding-top: 0;
			max-height: none !important;
			min-height: 17em;
			margin: 0;
			padding: 0;
			list-style: none;
			border: none;
			border-radius: 0;
		
			background: url("../img/grad/subnav.png") repeat-x;
			background: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #2a135d), color-stop(43%, rgba(42,19,93,.6)), color-stop(100%, rgba(42,19,93,.1)));
			background: -webkit-linear-gradient(top,	#2a135d 15%, rgba(42,19,93,.6) 43%, rgba(42,19,93,.1) 100%);
			background: -moz-linear-gradient(top,		#2a135d 15%, rgba(42,19,93,.6) 43%, rgba(42,19,93,.1) 100%);
			background: -ms-linear-gradient(top,		#2a135d 15%, rgba(42,19,93,.6) 43%, rgba(42,19,93,.1) 100%);
			background: -o-linear-gradient(top,			#2a135d 15%, rgba(42,19,93,.6) 43%, rgba(42,19,93,.1) 100%);
			background: linear-gradient(to bottom,		#2a135d 15%, rgba(42,19,93,.6) 43%, rgba(42,19,93,.1) 100%);
		}
			#subnav .placeholder{
				display: none !important;
			}

			#subnav .styled-options li{
				list-style: none;
				padding: 0;
				margin: 0;
				display: block;
			}
				#subnav .styled-options li.current > a{
					position: relative;
					font-weight: bold;
					color: #c4bfdd;
				}
					#subnav .styled-options li.current > a::before{
						content: "\e600";
						font: .75em "CKitchenIcons";
						display: inline-block;
						vertical-align: middle;
						position: absolute;
						left:	1.1em;
						top:	1.35em;
					}

				#subnav .styled-options a,
				#subnav .styled-options li:last-child > a{
					display: block;
					padding: .75em 1.65em;
					padding-right: 0;
					line-height: 1.4em;
					border-bottom: 1px dotted #7067a0;
				}
					#subnav .styled-options a:hover{
						text-decoration: none;
					}

			/** More messy last-minute additions of an additional level of subnavigation */
			#subnav .label{
				padding-left: 1.75em;
				line-height: 1.4em;
				padding-top: .8em;
				display: block;
			}

			#subnav .styled-options ul{
				margin: 0;
				padding: 0 0 .6em 1.4em;
				border-bottom: 1px dotted #7067a0;
			}
				#subnav .styled-options ul a,
				#subnav .styled-options ul li:last-child > a{
					font-size: .85em;
					line-height: 1.5em;
					text-transform: none;
					text-indent: 0;
					padding-top: 0;
					padding-bottom: 0;
					border: 0;
				}
					#subnav .styled-options ul a::before{
						top: .6em !important;
					}
			


	#subnav ~ main{
		width: 76%;
	}

	main{
		width: 78%;
		float: right;
		padding: 0;

		-webkit-border-radius:	.75em;
		-moz-border-radius:		.75em;
		border-radius:			.75em;
	}
		main.white{
			padding: 1.5em 2.5em;
			margin-bottom: 6em;
		}
			main.white > .convex{
				margin-top: -1.2%;
			}

		main h2, main .h2{
			font-size: 2.2em;
			line-height: 1.85em;
		}
			main h2.big,
			main .h2.big{
				font-size: 2.6em;
				line-height: 1.4em;
			}
	
		.white h2,
		.white .h2{
			line-height: 1.5em;
		}
	
		.accordion{
			margin-left: 0;
			margin-right: 0;
		}
			.accordion > * > .disclosure{
				font-size: 1.5em;
				padding: 0;
			}
				.accordion > * > .disclosure > label{
					padding: 1em 0;
				}
			.accordion > * > .content{
				padding: 0;
			}


		/** Pushes the header out to the left-hand side of the page, occupying the space where the subnavigation menu would normally sit on desktop view. */
		.hang-header{
			width: 100%;
			float: none;
			min-height: 20em;
		}
			.hang-header > article > header{
				position: absolute;
				top: 0;
				left: 1.7em;
				width: 28%;
			}
				.hang-header h2,
				.hang-header .h2{
					font-size: 3em;
					line-height: 1.35em;
				}
			
				.hang-header .h2.small{
					font-size: 2.2em;
					line-height: 1.8em;
					margin-right: .8em;
				}

				.hang-header > article > header > .subtitle{
					max-width: 85%;
					font: 1.15em/1.3em "futura-pt", sans-serif;
					margin-top: 1.5em;
				}


			.hang-header > article > header ~ *{
				margin-top: -3em;
				margin-left: 35.8%;
			}




		/** Showcase / Categories */
		.showcase, .fill{

		}
			.showcase > *{
				padding: 2em 2em 0;
				background: url("../img/divider_light.png") no-repeat 0% 1.5em;
				border-right: 0;
				border-left: 0;
			}
				.showcase > :nth-of-type(2n-1){
					padding-left: 1em;
					background-image: none;
				}
			
				.showcase > .double{
					padding-left: 1em;
					background: none;
					margin-top: 0;
				}


				/** Cell contents */
				.showcase h3{
					font-size: 1.5em;
					margin: -.35em 0 1em;
				}
				.showcase > * > img,
				.showcase > * > figure{
					max-width: 11em;
					margin-left: .75em;
				}




		/** Promo footers */
		#promo,
		main > .bowl{
			margin-left: 0;
			margin-right: 0;
			padding-right: .25em;
			padding-left: .8em;
		}
			#promo > .columns{
			
			}
				#promo > .columns > article{
					height: 14em;
				}
					#promo > .columns > article:first-child	{	padding-left: 1em;	}
					#promo > .columns > article:last-child	{	padding-right:	0;	}
					#promo > .columns > article > figure{
						float: right;
						height: auto;
						width: 50%;
					}
						#promo .columns > article > figure::after{
							margin-right: .7em;
							right: 200%;
							top: 0;
						}
						#promo > .columns > article > figure > img{
							max-height: none;
							max-width: none;
							position: absolute;
							right: 0;
						}

					/*#promo > .columns > article > figure ~ *	{margin-right: 50%;}*/
					#promo h3, #promo p							{margin-bottom:.5em;}
					#promo > .columns > article > p				{line-height: 1.5em;}


					/** "Chopping-board" style content block (Facebook realtime feed) */
					#fb_feed{
						-webkit-border-radius:	0 .25em 0 0;
						-moz-border-radius:		0 .25em 0 0;
						border-radius:			0 .25em 0 0;
						min-height: 324px;
						margin: -1em -3.5em 0 0;
						padding: 1.2em;
						position: relative;
						z-index: 2;
						width: 100%;

						background: #fff url("../img/grad/fb_feed.png") no-repeat top right;
						background-image: -webkit-gradient(radial, top right, 0, top right, 100%, color-stop(-2%, #e1e0ef), color-stop(5%, rgba(225,224,239,.5)), color-stop(10%, rgba(225,224,239,0)));
						background-image: -webkit-radial-gradient(top right,	circle cover,	#e1e0ef -2%,	rgba(225,224,239,.5) 5%,	rgba(225,224,239,0) 10%);
						background-image: -moz-radial-gradient(top right,		circle cover,	#e1e0ef -2%,	rgba(225,224,239,.5) 5%,	rgba(225,224,239,0) 10%);
						background-image: -ms-radial-gradient(top right,		circle cover,	#e1e0ef -2%,	rgba(225,224,239,.5) 5%,	rgba(225,224,239,0) 10%);
						background-image: -o-radial-gradient(top right,			circle cover,	#e1e0ef -2%,	rgba(225,224,239,.5) 5%,	rgba(225,224,239,0) 10%);
						background-image: radial-gradient(circle top right,						#e1e0ef -2%,	rgba(225,224,239,.5) 5%,	rgba(225,224,239,0) 10%);
					}
						/** Generated shadows around bottom-left/top-right corners */
						#fb_feed::before,
						#fb_feed::after{
							content: "";
							background: url("../img/chopping-board.png") no-repeat;
							position: absolute;
							display: block;
							z-index: 1;
						}
							#fb_feed::before{
								width: 57px;
								height: 273px;
								background-position: 0 -59px;
								left: -22px;
								top: 59px;
							}

							#fb_feed::after{
								width: 263px;
								height: 324px;
								right: -34px;
								top: -33px;
								background-position: -95px 0;
							}

						#fb_feed > h3,
						#fb_feed > .tr,
						#fb_feed > a{
							display: block;
							z-index: 3;
						}
						
						#fb_feed > h3,
						#fb_feed > a,
						#fb_feed_pin{
							position: relative;
							z-index: 3;
						}

						#fb_feed > h3{
							padding-right: 3em;
						}

						/** Twitter and Facebok button links in top-right corner. */
						#fb_feed > .tr{
							white-space: nowrap;
							text-align: right;
							padding: .4em;
						}
							#fb_feed > .tr > a{
								display: inline-block;
								vertical-align: top;
							}

						
						#fb_feed > .bowl.convex{
							position: absolute;
							top: 100%;
							left: 0;
							right: 0;
						}


				/** White, shaded bowl lip for promo footers */
				#promo.white .concave.bowl{
					position: relative;
					bottom: auto;
					left: auto;
					display: block;
					margin: -5.52% 0 -1.52%;
					padding-top: 5.82%;
					width: auto;
					z-index: 1;
				}

				#promo.white .concave.bowl ~ *{
					position: relative;
					z-index: 5;
				}



	#icing{
		background: url("../img/grad/body.png") repeat-y 50% 0;
		background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #2e235f), color-stop(29%, #2f215e), color-stop(41%, #412e7d), color-stop(47%, #433081), color-stop(58%, #615794), color-stop(73%, #8180aa));
		background-image: -webkit-linear-gradient(left,		#2e235f 0, #2f215e 29%, #412e7d 41%, #433081 47%, #615794 58%, #8180aa 73%);
		background-image: -moz-linear-gradient(left,		#2e235f 0, #2f215e 29%, #412e7d 41%, #433081 47%, #615794 58%, #8180aa 73%);
		background-image: -ms-linear-gradient(left,			#2e235f 0, #2f215e 29%, #412e7d 41%, #433081 47%, #615794 58%, #8180aa 73%);
		background-image: -o-linear-gradient(left,			#2e235f 0, #2f215e 29%, #412e7d 41%, #433081 47%, #615794 58%, #8180aa 73%);
		background-image: linear-gradient(to right,			#2e235f 0, #2f215e 29%, #412e7d 41%, #433081 47%, #615794 58%, #8180aa 73%);
	}




#footnav,
#copyright-colour,
#copyright-owner,
#follow-us{
	z-index: 2;
}

#bottom{
	padding: 0;
	position: static;
}
	/** Trademark symbol anchored to page's top-left corner. */
	#tm{
		display: block;
		color: #d0cae3;
	}

	/** Footer text: "The colour purple is a trademark used under license" */
	#copyright-colour{
		background: #2d225e;
		padding: 1em 0;
	}

	#copyright-owner{
		background: #d0cae3;
		color: #847ebd;
		padding: 6.55em 0 3.28em;
	}

	/** Move the "Follow us" bar to the top of the screen. */
	#follow-us{
		position: absolute;
		top: 0;
		left: 0;
		height: 0;
		width: 100%;
		text-align: right;
		padding: 1em 0 0;
		z-index: 101;
	}
		#follow-us > .centre{
			height: 0;

			/** Should approximate the width of .search-bar */
			padding-right: 22em;
		}
			#follow-us > .centre > span{
				font-size: 1.1em;
			}
			#follow-us a{
				margin: 0 .15em;
			}
}


/*=============================================================================*
	PRINT
===============================================================================*/
@media print{

	/** Start unravelling and resetting some screen-specific properties. */
	html, body{
		background: none !important;
		margin-top: 0 !important;
	}

	a:link,
	a:visited{
		color: #000 !important;
		text-decoration: underline;
	}
		a[href^="#"],
		a[href^="javascript:"]{
			text-decoration: none !important;
		}



	.white,
	.accordion > * > .disclosure{
		color: #000 !important;
	}
	

	.no-print, .bowl,
	#top, #subnav, #icing, #footnav, #copyright-colour, #follow-us,
	.accordion > * > .disclosure > label::after{
		display: none !important;
	}
	
	.accordion > * > .control:checked ~ .content{
		max-height: none !important;
	}
}