/* Just for inside pages */
body {
	background: #b8cec4 url(/tpl/img/bg-body-inside.png) top no-repeat;
	color: #004065;
}
/* Container for the logo and supplementary navigation */
div#head {
	height: 129px;
	background: url(/tpl/img/bg-head-default.jpg) top no-repeat;
}
html[lang] #head {
	height: auto;
	min-height: 129px;
}
	/* Logo, top left */
	#head p {
		margin: 0;
		position: absolute;
		top: 11px;
		left: 12px;
		width: 227px;
	}
		#head p a {
			display: block;
			width: 227px;
			height: 68px;
		}
			/* No-css text */
			#head a span {
				display: none;
			}

div#main {
	border-top: solid 15px #394a59;
}

/* Top of the curve */
#nav map .here a, #nav map .here em {
	background: #b8cec4 url(/tpl/img/bg-nav-map-here-a.png) top no-repeat;
	margin: 0;
}
	/* Old bottom of the curve */
	#nav map em a span, #nav map em a:hover span, #nav map em span {
		background: none;
		padding: 0;
	}
	/* The bottom of the curve needs to move to "li.here" */
	#nav map li.here {
		background: #b8cec4 url(/tpl/img/bg-nav-map-here-a-span.png) bottom no-repeat;
		padding: 0 0 5px 0;
		margin: 0 0 0.55em 0;
	}
	/* Second-level navigation */
	#nav map ul ul {
		margin: 0;
		background: none;
		border: none;
		border-right: solid 1px white;
		border-left: solid 1px white;
		padding: 3px 10px 1em 35px;
		font-size: 85%;
	}

		#nav map .here ul a, #nav map .here ul a:hover, #nav map .here ul em, 
		#nav map em a {
			background: none;
			padding: 0;
			margin: 0;
			color: #004065;
			width: auto;
			display: inline;
		}
		#nav map ul ul a, #nav map ul ul em {
			font-weight: normal;
		}
		/* You are here, second level nav */
		#nav map ul ul em, #nav map ul ul a:hover {
			text-decoration: underline;
		}
			/* Third level navigation */
			#nav map ul ul ul {
				border: none;
				font-size: 100%;
				padding: 3px 10px 0.5em 15px;
			}
				#nav map ul ul ul a, #nav map ul ul ul em {
					font-style: italic;
				}

	#nav fieldset p {
		background: url(/tpl/img/bg-nav-fieldset-p-inside.png) bottom no-repeat;
	}

	/* Print this page link */
	ul#pagetools {
		margin: 13px 23px 0 33px;
		text-align: right;
		font-size: 85%;
		font-weight: bold;
	}
		/* Default */
		#pagetools a {
			display: block;
			background: url(/tpl/img/bg-pagetools-a.png) top right no-repeat;
			padding: 0.5em 34px 0.8em 0;
			margin: 0 0 0.2em 0;
		}
		/* Print */
		#toolprint a, a#toolprint {background: url(/tpl/img/bg-toolprint-a.png) top right no-repeat;}
		/* Logout */
		#toollogout a {background: url(/tpl/img/bg-toollogout-a.png) top right no-repeat;}
		/* Change password */
		#toolpass a {background: url(/tpl/img/bg-toolpass-a.png) top right no-repeat;}

#main a {
	color: #004065;
}

/* Main content, center */
div#content, div#contentwide {
	float: left;
	width: 500px;
	padding: 21px 0 0 0;
}
/* Wider content */
div#contentwide {
	width: 735px;
}
	#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
		margin: 0 17px 0 13px;
	}
	#main h1 {font-size: 150%;}
	#main h2 {font-size: 130%;}
	#main h3 {font-size: 110%;}
	#main h4 {font-size: 100%;}
	/* Hopefully these won't be used.  But you can't tell. */
	#main h5 {
		font-size: 100%;
		font-weight: normal;
		border-bottom: solid 1px #ccc;
	}
	#main h6 {
		font-size: 100%;
		font-weight: normal;
		font-style: italic;
	}
	#main p, div table, #main #Login1_lgnLogin p, #main #Login1_prcLogin p {
		margin: 0 17px 1em 13px;
	}
	#main p {
		text-align: justify;
	}
		#main table p {
			text-align: left;
		}
	#main dl {
		margin: 0 0 1em 13px;
	}
	#main ul {
		margin-right: 17px;
	}

/* The crumb-trail, top */
#main map ol {
	margin: 0 17px 1em 13px;
}
	#main map ol li {
		display: inline;
		font-size: 85%;
	}
		#main map ol a {
			padding: 0 12px 0 0;
			background: url(/tpl/img/bg-content-map-ol-a.png) right no-repeat;
			margin: 0 6px 0 0;
			border: none;
		}
		/* The current page is em */
		#main map ol em, #main map ol a {
			font-style: normal;
			color: #004065;
		}
		
	/*  Dong-dong, the old two-col routine */
	#main dt, #main dd {
		float: left;
		padding: 0 0 0.5em 0;
	}
	#main .simplelist dt {
		width: 140px;
	}
	#main dt {
		clear: left;
		width: 110px;
	}
	#main .simplelist dd {
		width: 330px;
		background: none;
	}
	#main dd {
		width: 360px;
		background: #f1f5f3;
	}
	#contentwide dd {
		width: 587px;
		width: 582px;
	}
		#main dd strong {
			display: block;
			background: #61162d;
			color: white;
			border-bottom: solid 1px #b8cec4;
			padding: 0.2em 0.9em;
		}
		/* Not a great solution */
		#main dd span {
			padding: 0.2em 0.9em;
			display: block;
		}

	/* The above is reused for the login form */
	#Login1_lgnLogin dl, #Login1_prcLogin dl, fieldset dl {
		margin: 0 0 0 13px;
	}
	#pwdChangePassword dl {
		margin: 0;
	}
	fieldset {border: none;}
		legend {display: none;}

	#Login1_lgnLogin dd, #Login1_prcLogin dd, #pwdChangePassword dd, 
	#main #pwdChangePassword td, #main fieldset dd {
		background: none;
		padding: 0;
	}
		#Login1_lgnLogin dd span.box, #Login1_prcLogin dd span.box, 
		#pwdChangePassword dd span.box, #main fieldset dd span.box {
			background: white url(/tpl/img/bg-login-dd-span.png) top no-repeat;
			width: 248px;
		}
		#Login1_lgnLogin dd span, #Login1_prcLogin dd span, #main fieldset span, 
		#pwdChangePassword dd span {
			padding: 0;
		}
			#Login1_lgnLogin dd span.box span, #Login1_prcLogin dd span.box span,
			#pwdChangePassword dd span.box span, #main fieldset dd span.box span {
				padding: 2px 5px;
				background: url(/tpl/img/bg-login-dd-span-span.png) bottom no-repeat;
				width: auto;
			}
				#Login1_lgnLogin dd span input, #Login1_prcLogin dd span input,
				#pwdChangePassword dd span input, #main fieldset span input {
					border: solid 1px white;
					width: 238px;
				}

	/* Table rules */
	#content table {
		width: 470px;
	}
	#contentwide table {
		width: 705px;
	}
	table, td, th {
		margin: 0;
		padding: 0;
		border-collapse: collapse;
	}
		th, td, caption {
			padding: 0.2em 0.8em;
			border-right: solid 1px #b8cec4;
			border-bottom: solid 1px #b8cec4;
		}
		th, caption {
			text-align: left;
			font-weight: bold;
		}
		thead th, thead td, caption {
			background: #61162d;
			color: white;
		}
		th, td {
			background: #f1f5f3;
			color: #004065;
		}
			th small {
				font-size: 100%;
				font-weight: normal;
			}
				#content table p, #contentwide table p {
					margin: 0;
				}

				#content a, #contentwide a {
					border-bottom: solid 1px white;
				}
				#content a:hover, #contentwide a:hover {
					border-bottom: solid 1px #004065;
				}
	/* Thanks, .NET, but that's not how we do layout any more. */
	table#Login1_lgnLogin, table#Login1_prcLogin {
		margin: 0;
	}
		#Login1_lgnLogin td, #Login1_prcLogin td {
			padding: 0;
			border: none;
			background: none;
			color: #004065;
		}

	/* This is the agree / disagree choice thing */
	/* This might look like a lot of markup and CSS rules, but THIS IS THE PRICE
	OF ROUNDED CORNERS! */
	div.legalchoice {
		text-align: center;
		font-weight: bold;
	}
		.legalchoice div {
			margin: 0 auto;
			text-align: left;
			width: 433px;
			background: #004065 url(/tpl/img/bg-legalchoice.png) top no-repeat;
		}
			#main .legalchoice ul, #main .legalchoice li {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			#main .legalchoice ul {
				background: url(/tpl/img/bg-legalchoice-ul.png) bottom no-repeat;
				padding: 10px 0 10px 4px;
			}
				.legalchoice li {
					float: left;
					width: 210px;
				}
					#main .legalchoice a {
						display: block;
						color: white;
						background: url(/tpl/img/bg-legalchoice-a.png) repeat-x;
						margin: 0 0 0 5px;
					}
						.legalchoice a span {
							display: block;
							background: url(/tpl/img/bg-legalchoice-a-span.png) bottom no-repeat;
						}
							.legalchoice a span span {
								background: url(/tpl/img/bg-legalchoice-a-span-span.png) top no-repeat;
								padding: 7px 28px 7px 0;
								text-align: center;
							}
					#main .legalchoice a:hover {
						background: url(/tpl/img/bg-legalchoice-a-hover.png) repeat-x;
					}
						.legalchoice a:hover span {
							background: url(/tpl/img/bg-legalchoice-a-hover-span.png) bottom no-repeat;
						}
							.legalchoice a:hover span span {
								background: url(/tpl/img/bg-legalchoice-a-hover-span-span.png) top no-repeat;
							}

/* For pages which dynamically generate graphs */
div#displayfilter {
	color: white;
	margin: 0 17px 0 13px;
}
#content #displayfilter {
	background: url(/tpl/img/bg-content-displayfilter.png) repeat-y;
}
#contentwide #displayfilter {
	background: url(/tpl/img/bg-contentwide-displayfilter.png) repeat-y;
}
	#displayfilter a {
		border: none;
	}
	#displayfilter table {
		width: auto;
		border: none;
		margin: 0;
	}
	#displayfilter td {
		background: transparent;
		color: white;
		padding: 0;
		border: none;
	}
	/* Top of the filter - curved corners, with a keyline.  Mmmm. */
	#displayfilter h2 {
		margin: 0;
	}
	#content #displayfilter h2 {
		background: url(/tpl/img/bg-content-displayfilter-h2.png) repeat-y;
	}
	#contentwide #displayfilter h2 {
		background: url(/tpl/img/bg-contentwide-displayfilter-h2.png) repeat-y;
	}
		#displayfilter h2 span {
			display: block;
			padding: 12px 15px;
		}
		#content #displayfilter h2 span {
			background: url(/tpl/img/bg-content-displayfilter-h2-span.png) top no-repeat;
		}
		#contentwide #displayfilter h2 span {
			background: url(/tpl/img/bg-contentwide-displayfilter-h2-span.png) top no-repeat;
		}
	#displayfilter h3 {
		font-size: 90%;
		border-bottom: solid 1px white;
		margin: 0 1px 0.5em 0;
	}
	#displayfilter dl {
		margin: 0;
	}
		#displayfilter dt, #displayfilter dd {
			color: white;
			background: transparent;
		}
		#displayfilter dt {
			width: 50px;
			padding: 0.5em 0;
			text-align: right;
		}
		#content #displayfilter dd {
			width: 100px;
		}
		#contentwide #displayfilter dd {
			width: 100px;
		}
			#displayfilter dd input {
				width: 75px;
				height: 27px;
				text-align: center;
				vertical-align: middle;
				background: white url(/tpl/img/bg-displayfilter-dd-input.png) no-repeat;
				border: none;
				padding: 0;
			}

	/* Bottom curve */
	#content #displayfilter div {
		background: url(/tpl/img/bg-content-displayfilter-div.png) bottom no-repeat;
	}
	#contentwide #displayfilter div {
		background: url(/tpl/img/bg-contentwide-displayfilter-div.png) bottom no-repeat;
		padding: 0 0 1em 16px;
	}
	#main #displayfilter div div {
		background: none;
		padding: 0;
		float: left;
		width: 110px;
	}
	#content #displayfilter div div {
		width: 110px;
	}
	#contentwide #displayfilter div div {
		width: 169px;
	}

/* Container for the chart and content beside it */
div#pricegraphwrap {
	clear: both;
	margin: 0 17px 1em 13px;
}
	#pricegraphwrap div {
		float: left;
		width: 205px;
	}

/* The legend, below */
ul#chartlegend {
	text-align: right;
}
	#chartlegend li {
		display: inline;
		padding: 0 0 0 0.5em;
		margin: 0 0 0 1em;
	}
	/* Them chart colours */
	li#Pricegraph1_liSharePrice {border-left: solid 1.4em #4573a7;}
	li#legendindex, li#Pricegraph1_liIndexReturn {border-left: solid 1.4em #6b4644;}
	li#legendnav, li#Pricegraph1_liNetAssetValue {border-left: solid 1.4em red;}

/* For the People page */
div.people, div#microdept {
	margin: 0 17px 1em 13px;
}
	/* Each department - microdepartments cannot contain more than two people! */
	#main .people div, #microdept div div {
		position: relative;
		/* The content is removed from the document flow without this */
		float: left;
	}
		/* This is to make the Executive Committee three people wide.  I've no idea why.
		How high? */
		#main .people div.threecol {
			width: 336px;
		}
	#main .people dl, #microdept div, #microdept dl {
		float: left;
		width: 112px;
		margin: 0;
	}
	#microdept div {
		width: 224px;
/*		width: 112px;*/
	}
	#microdept dl {
		margin: 0;
	}
		#main .people dt, #main .people dd, #microdept dt, #microdept dd {
			float: none;
			width: auto;
		}
		#main .people dt, #microdept dt {
			padding: 0 0 0.3em 0;
		}
			#main .people dt img, #microdept dt img {
				vertical-align: top;
			}
		#main .people dd, #microdept dd {
			/* Bit of a fudge this, as it assumes no-one will have a triple-barrelled name */
			height: 3em;
			margin: 0 10px 0.5em 0;
			background: #61162d;
			color: white;
			padding: 2px 5px 0 5px;
		}
			#main .people dd a, #microdept dd a {
				color: white;
				display: block;
			}
			#main .people a, #microdept a {
				border: none;
			}
		html[lang] #main .people dd, html[lang] #microdept dd {
			height: auto;
			min-height: 3em;
		}
	#main .people h2, #main .people p, #microdept h2, #microdept p {
		clear: both;
		margin: 0;
		padding: 0.5em 0;
	}
	/* Mo' detail */
	#main .people div div, #microdept div div div {
		position: absolute;
		background: #61162d;
		color: white;
		border: solid 1px white;
		padding: 2px 0 0 0;
		width: 225px;
		left: -246px;
		top: 0;
		cursor: pointer;
		cursor: hand;
	}
	/* To push the left micro-department info further left */
	#microdept div.last div div {
		left: -470px;
	}
		#main .people div div h1, #main .people div div h2, #main .people div div h3, 
		#main .people div div h4, #main .people div div h5, #main .people div div h6,
		#microdept div div h1, #microdept div div h2, #microdept div div h3, 
		#microdept div div h4, #microdept div div h5, #microdept div div h6 {
			margin: 0 5px;
		}
		#main .people div div p, #microdept div div p {
			margin: 0 5px 0.5em 5px;
		}

.factsheets ul, .factsheets ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/* This is the factsheet download list do-dah */
div.factsheets {
	margin: 0 0 1em 13px;
}

/* Thumbnail of the factsheet, left */
#content .factsheets p.thumb {
	float: left;
	width: 82px;
	margin: 0;
}

.factsheets fieldset {
	margin: 0;
	padding: 0;
	border: none;
	float: left;
	width: 386px;
	background: white url(/tpl/img/bg-factsheets-fieldset.png) left repeat-y;
}
	.factsheets legend {
		margin: 0;
		padding: 0;
		display: block;
	}
	/* IE>=6 */
	* html .factsheets legend {
		margin: 0 -7px;
	}
	/* IE7 - hits IE8 beta too */
	*:first-child+html .factsheets legend {
		margin: 0 0 0 -7px;
	}
		#main .factsheets legend a {
			display: block;
			/* This might be an issue */
			width: 386px;
			width: 366px;
			background: #61162d;
			font-weight: bold;
			color: white;
			border-bottom: solid 2px #b8cec4;
			padding: 0.2em 10px;
		}
	/* Latest Factsheet and Archive boxes */
	.factsheets fieldset div {
		float: left;
		width: 180px;
	}
	/* Archive */
	.factsheets fieldset div.last {
		width: 206px;
	}
		#content .factsheets h2 {
			font-size: 100%;
			margin: 0.2em 10px 0.8em 10px;
		}
			.factsheets a, .factsheets label {
				color: #394a59;
			}
		.factsheets ul {
			margin: 0 0 1em 10px;
		}
			.factsheets ul li {
				background: url(/tpl/img/bg-factsheets-li.png) top left no-repeat;
				padding: 0 0 0.5em 20px;
			}
		#content .factsheets div p {
			margin: 0 10px 1em 10px;
		}
			.factsheets select {
				width: 186px;
				font-size: 90%;
			}


/* Related links, right */
div#related {
	float: left;
	width: 227px;
	background: url(/tpl/img/bg-related.png) bottom right no-repeat;
	padding: 66px 0 6px 0;
	font-size: 85%;
}
	#related div {
		color: white;
		background: url(/tpl/img/bg-related-div.png) repeat-y;
	}
		#related div a {
			color: white;
		}
		/* Any heading here will cap the box */
		#related h1, #related h2, #related h3, #related h4, #related h5, #related h6 {
			margin: 0 0 19px 0;
			background: #004065 url(/tpl/img/bg-related-h2.jpg) top no-repeat;
			padding: 117px 1px 0 1px;
			font-size: 100%;
		}
		#related ul {
			padding: 0 14px 1em 14px;
		}
			#related ul li {
				background: url(/tpl/img/bg-related-ul-li.png) top left no-repeat;
				padding: 0 0 0 18px;
			}
		#related p {
			padding: 0 16px 1em 16px;
			margin: 0;
		}
		#related hr {
			margin: 0 16px 1em 16px;
			padding: 0;
			height: 1px;
			border: none;
			border-top: solid 1px white;
		}

#disclaimer div {
	border-top: solid 1px #004065;
}