/* Inside pages */

/* Second level navigation */
#nav ul ul {
	border-top: solid 0.5em #AE77B1;
	border-bottom: solid 0.5em #AE77B1;
}
	#nav ul ul li {
		border: none;
	}
		#nav ul ul a, #nav ul ul em {
			background: #AE77B1;
			font-weight: normal;
			padding: 2px 10px;
		}
		#nav ul ul a:hover {
			color: #9C599E;
		}
			/* Third level navigation */
			#nav ul ul ul {
				background: #DAC2DC;
				padding: 0.5em 0;
			}
				#nav ul ul ul a, #nav ul ul ul em {
					background: #DAC2DC;
					color: #510056;
					padding: 2px 10px 2px 20px;
				}
				#nav ul ul a:hover, #nav ul ul a:hover em {
					color: white;
				}

#disclaimer em, #supnav em {
	font-style: normal;
	color: black;
}

/* Picture strip at the top of some pages */
#maincontent p.picstrip {
	margin: 0 0 0 12px;
}

/* Forth level (non-JavaScript) nav */
#forthnav ul {
	border-top: solid 1px #F1EBF2;
	border-bottom: solid 1px #F1EBF2;
	margin: 0 0 1em 22px;
	padding: 0.5em 1em;
}

/* Headings in main content */
#maincontent h2, #maincontent h3, #maincontent h4 {
	color: #F4793E;
	margin: 0px 22px 15px 22px;
	clear: both;
}
#maincontent table h2, #maincontent table h3, #maincontent table h4 {
	margin: 0;
	color: black;
}

#maincontent h2, #maincontent #nughead {
	font-size: 130%;
	color: #510056;
}
#maincontent h3 {
	font-size: 100%;
	border-bottom: solid 1px #D6BBD8;
}
#maincontent h4 {
	font-size: 100%;
}
#maincontent ul {
	list-style-image: url(/img/bullet-maincontent.gif);
	clear: both;
}
#maincontent ol {
	margin: 0 0 1em 0;
	padding: 0 47px;
}

#maincontent hr {
	margin: 0 0 0 22px;
	clear: both;
}
/* Definition lists are used as a two column table */
#maincontent dl {
	padding: 0 0 0 22px;
	/* If margin is added here, it effects form fields in IE */
	margin: 0;
	clear: both;
	/* This stops IE from adding too much space */
	border-top: solid 1px white;
}
	#maincontent dt, #maincontent dd {
		margin: 0;
		float: left;
		padding: 0 0 0.5em 0;
	}
	#maincontent dt {
		width: 150px;
	}
		#maincontent dd a {
			font-weight: bold;
		}
	#maincontent dd  {
		width: 418px;
	}
	/* If there's already a three column layout */
	#maincontent #contentwrap dd  {
		width: 227px;
	}
	#maincontent dd input, #maincontent dd select, #maincontent dd textarea {
		width: 400px;
	}
	/* For the three column layout */
	#content dd {
		width: 318px;
	}

#maincontent hr {
	height: 1px;
	padding: 0;
	border: 0;
	border-bottom: solid 1px #D6BBD8;
	color: #fff;	
}
#maincontent p {
	clear: both;
}
/* Table styles take colours from the navigation */
#maincontent table, #content table {
	margin: 0 0 0 22px;
	clear: both;
	width: 546px;
}
#content table {
	width: 355px;
}

	#maincontent th, #maincontent td {
		padding: 2px 4px;
	}
	#maincontent td {
		color: #510056;
		background: #DAC2DC;
	}
	#maincontent th {
		color: white;
		background: #AE77B1;
	}
	#maincontent thead th {
		background: #854C88;
	}
	#maincontent #action th {
		background: #F2F2F2;
		color: black;
	}
	#maincontent table p {
		margin: 0;
	}
#maincontent caption {
	text-align: left;
	font-weight: bold;
	font-size: 120%;
	padding: 0 10px;
}

/* This is used on the video and photography galleries */
div#gallery {
	background: #F1ECF3;
	border: solid 1px #E0C2E6;
	margin: 0 0 0 11px;
	padding: 7px 0 0 0;
}
	#gallery p {
		margin: 0 7px 7px 7px;
	}
	#gallery h2, #gallery h3, #gallery h4, #gallery h5, #gallery h6 {
		margin: 0 7px;
	}
		p#galimage, p#galthumb {
			text-align: center;
			border-top: dashed 1px #999;
			border-bottom: dashed 1px #999;
			padding: 18px 0;
			clear: both;
		}
		p#galthumb {
			margin: 10px 7px 15px 7px;
		}
		/* Navigation for the large image pages */
		p#back, p#backnext {
			float: left;
			clear: none;
			margin: 0;
			padding: 10px 0;
		}
		p#back {
			width: 200px;
		}
		p#backnext {
			width: 363px;
			text-align: right;
		}
			#back a, #backnext a {
				font-weight: bold;
				margin: 0 0 0 7px;
				text-decoration: none;
			}
			#back a:hover, #backnext a:hover {
				text-decoration: underline;
			}
		p#galthumb img, p#galimage img {
			border: solid 1px #510056;
		}
		p#galthumb img {
			margin: 0 5px 14px 5px;
		}

/* This is only used to make the third column appear 
to stretch to the bottom of the content. Sorry. */
div#contentwrap {
	background: url(/img/bg-contentwrap.gif);
}

/* Used in a three column layout */
div#content {
	width: 399px;
	float: left;
}

/* Third column - right */
div#action {
	float: left;
	background: #F2F2F2;
	width: 191px;
	padding: 7px 0 0 0;
}
	#action table {
		width: 191px;
		border: solid 7px #F2F2F2;
		border-top: none;
		margin: 0;
	}
	/* Subject by years table */
	#action td {
		background: #D9D9D9;
	}
	#action th {
		padding: 2px 0;
		text-align: left;
	}
	#action td {
		padding: 5px;
		text-align: center;
	}
		#maincontent #action table p {
			margin: 0;
		}
	/* This is the first heading in the third column, and creates a break in the grey background */
	#action h5 {
		font-size: 120%;
		margin: 0;
		border-top: solid 10px white;
		padding: 10px;
		clear: both;
	}
	/* Second heading */
	#action h6 {
		clear: both;
		font-size: 90%;
		margin: 0;
		padding: 10px 10px 5px 10px;
	}
	/* Two col teacher layout */
	#maincontent #action dl {
		float: left;
		width: 88px;
		font-size: 90%;
		margin: 0;
		clear: none;
		padding: 0;
	}
		#maincontent #action dt, #maincontent #action dd {
			margin: 0;
			width: auto;
		}
		#maincontent #action dt {
			padding: 0 0 0 10px;
		}
		#maincontent #action dd {
			padding: 0 0 0 10px;
			height: 7em;
		}
		html[lang] #maincontent #action dd {
			min-height: 7em;
			height: auto;
		}
			#action dl a {
				color: black;
			}
	#action p {
		margin: 0 10px 10px 10px;
	}
	#action ul {
		margin-left: 1em;
		padding-left: 1em;
	}
	#action li {
		margin-left: 0;
		padding-left: 0;
	}

/* This is used on the contact us page */
fieldset#contactform {
	margin: 0 13px;
	border: none;
	padding: 0;
	background: #F2F2F2;
}
	#contactform dl {
		padding: 0 0 0 9px;
		/* This helps IE to render it right */
		border-top: solid 1px #F2F2F2;
	}
	#contactform dt  {
		font-weight: bold;
	}
	#contactform dd  {
		width: 392px;
	}
	#contactform dd input, #contactform dd select {
		width: 230px;
	}
	#contactform dd textarea {
		width: 387px;
	}

/* This is used on the shop page */
#maincontent div.department, div.directory, div.newshome {
	background: #F2F2F2;
	clear: both;
	margin: 0 0 0 13px;
	padding: 10px 0 0 0;
	border-bottom: solid 1em white;
}
/* Radio buttons */
.radio input {
	border: none;
	background: #F1ECF3;
}

.department br {
	clear: both;
}
	.department div {
		width: 470px;
		float: left;
	}
		#maincontent .department div p {
			float: none;
			width: auto;
			margin: 0 10px 1em 10px;
		}
		#maincontent .department h2, #maincontent .department h3 {
			margin: 0 10px;
		}
	#maincontent .department p {
		float: left;
		width: 105px;
		clear: none;
		margin: 0;
	}
	#maincontent .department p.clear {
		clear: both;
		float: none;
		width: auto;
	}

/* A variation of department is used on the directory page */
#maincontent .directory h2, #maincontent .directory p, #maincontent .newshome div p, #maincontent .newshome h2 {
	margin: 0 8px;
}
#maincontent .directory dl {
	padding: 0 0 0 8px;
	margin: 0;
}
#maincontent .directory dt, #maincontent .directory dd {
	padding: 0;
}
#maincontent .directory dd {
	width: 405px;
}
.directory p.r {
	padding-bottom: 1em;
}
/* A variation of department is used on all news pages */
#maincontent .newshome h2 {
	font-size: 100%;
}
	#maincontent .newshome h2 a {text-decoration: none;}
	#maincontent .newshome h2 a:hover {text-decoration: underline;}
	#maincontent .newshome h3 {
		font-size: 90%;
		border: none;
		color: black;
		font-weight: normal;
		font-style: italic;
		margin: 0 8px 1em 8px;
	}

#maincontent .newshome div, #maincontent p.newsimage {
	float: left;
	clear: none;
}

.newshome div {
	/* Original, large image width */
	width: 397px;
	/* Thumbnail width */
	width: 513px;
}
#maincontent p.newsimage {
	/* Original, large image width */
	width: 171px;
	/* Thumbnail width */
	width: 55px;
	margin: 0;
}

/* "What would you like to do next?" */
h2#nughead {
	padding-top: 2em;
	clear: both;
}
#maincontent #nuggets h3 {
	background: #F1EBF2;
	color: black;
}
/* This is for the Merchandise page */
#merchandise fieldset {
	border: solid 1px #E0C2E6;
	background: #F1ECF3;
	color: #510056;
	width: 280px;
	float: left;
	margin: 0 0 10px 6px;
	padding: 0;
}
/* IE float bug */
#maincontent div[id="merchandise"] fieldset {
	margin: 0 0 10px 12px;
}
#merchandise fieldset.even {
	background: #F9F7FA;
}
	/* Crazy styling of legend defeats me again */
	#merchandise legend {
		display: none;
	}
	#merchandise fieldset div {
		float: left;
		width: 204px;
		height: 65px;
		overflow: auto;
		margin: 10px 0 0 0;
	}
	/* Thumbnail */
	#merchandise fieldset img {
		float: left;
		margin: 8px 0;
		border: solid 1px #510056;
	}
	#merchandise fieldset h2, #merchandise fieldset p {
		margin: 0 10px;
		clear: both;
		font-size: 100%;
	}
	/* Magnifying glass */
	#merchandise fieldset p img {
		border: none;
		margin: 0;
		float: none;
	}
	/* Fields */
	#merchandise p.options {
		border-top: solid 1px #E0C2E6;
		padding: 5px 0;
	}
		p.options img {
			vertical-align: top;
		}
	#merchandise label {
		font-weight: bold;
	}
	#merchandise input {
		width: 30px;
	}
	/* Size dropdown */
	#merchandise select {
		width: 68px;
	}
	#merchandise input, #merchandise select {
		font-weight: normal;
	}

/* Used on the shop pages CM */
#shop table.basket, #shop table.details, #worldpay table.worldpay{
	width:559px;
	position:relative;
	left:-9px;
	background-color:#F1ECF3;
	border:1px solid #E0C2E6
}

#shop table.basket td,  #shop table.details td, #worldpay table td{
	background-color:#F1ECF3;
	padding:5px;
	font-size:90%
}

#shop table.basket td strong,  #shop table.details td strong, #worldpay table td strong{color:#53005A}
#shop table.basket td hr, #shop table.details td hr, #worldpay table td hr{margin:0px;}
#shop table.basket td, #shop table.details td, #worldpay table td{color:#000}

#shop table.basket td.price {text-align:right; width:110px}
#shop table.basket td.size {width:90px;}
#shop table.basket td.qty{width:50px;}

#shop input.button, .button{border:4px solid #C3A6C4; background-color:#520055; color:#fff; text-transform:uppercase}