/* 
-----------------------------------------------------------------
	BRANZ
	internal.css
	
	Used only by internal pages
	
	Target Browsers:
	PC: IE6+, FF1.5+
	Mac: Safari 2+, FF2+	
-----------------------------------------------------------------
*/

	body {
		background: #fdfafa url(/resources/images/ui/tiling-grey-gradient.jpg) repeat-x;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		color:#000; 
	}

/*	
	shell
	This wraps all page content.
*/

	#shell {
		width: 968px;
		background: url(/resources/images/ui/bg-tile-columns.gif) repeat-y 0 0; /* 968 wide tiling underlay */
		margin: 0 auto;
		font-size: 110%; /* temp conversion to new common.css values */
		position: relative; /* absolute wrap */
	}
	#shell .liner {
		background: url(/resources/images/ui/drop-shadows.jpg) no-repeat; /* 968 wide one-piece gfk on top of tiling underlay */
		height: 1px; /* ds - ie6: prevent vert tiling of bg */
	}
	html>body #shell .liner {
		height: auto;
	}
	#shell form .liner {
	/*	DS 02.07.2007 - search form was hidden in ie6 */
		height: auto;
	}
	#shell .liner .liner {
		background: none; 
	}

/*	header
	This contains the 2 brand logos, which are absolutely positioned so that 
	(a) the central content column can sit between them and
	(b) the logos can be located at the very top of the linearised document
*/

	#header p.logo {
		position: absolute;
		top: 0;
	}
	#header p#level {
		left: 4px; /* align with LHS of #body */
		padding-bottom: 5px;
		background: url(/resources/images/ui/level-logo-bg.gif) no-repeat 0 100%;
		width: 233px;
		height: 124px; /* 129-5 */
	}
	#header p#branz {
		left: 782px; /* align with LHS of #related */
		top: 0;
		width: 181px;
		height: 129px;
		background: #fff url(/resources/images/ui/branz-logo-bg.gif) no-repeat 0 100%;
		text-align: center;
	}
	#home #header p#branz {
		height: 130px; /* ds 27.06: hide 1px line below logo on homepage (matt request) */
	}
	#header p#branz img {
		margin-top: 31px;
	}
	
/*	body
	This wraps #main and #related.
*/

	#body {
		margin: 0 5px; /* width: 958px; */
	}
	#body span.ui {
	/*	Tall drop shadow that appears at the start of column 3.
		This is required because there is a subtle, repeated, gradient fade behind each group of heading and links,
		so we can't fake it with a tiling LH background inside related
	*/
		width: 5px;
		height: 800px;
		position: absolute;
		top: 0;
		z-index:5;
		left: 782px; /* 782 from LHS, 5px LH #body margin ignored */
		
		/* IE6 (filter disabled in IE7 stylesheet) */	
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/resources/images/ui/related-dropshadow.png',sizingMethod='image');	
	}
	html>body #body span.ui { 
		background: url(/resources/images/ui/related-dropshadow.png) no-repeat;				
	}
	#home #body span.ui {
		height: 233px; /* height of the branz logo + the gradient 'tail' */
		/* IE6 (filter disabled in IE7 stylesheet) */	
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/resources/images/ui/related-dropshadow-home.png',sizingMethod='image');			
	}
	html>body#home #body span.ui {
		background: url(/resources/images/ui/related-dropshadow-home.png) no-repeat;					
	}	
	

/*	main
	This wraps #nav and #content.
*/

	#main {
		width: 777px;
		float: left;				
	}

/*	nav
	The LH nav.
	Nav items rollover to section (banner) colour
	so each li will need a different class.
	Nav colour is taken from 3rd line of top-to-bottom gradient at foot of coloured content header.
	
	Primary nav is laid out horz on this site, in the LH bar.
	
	Secondary nav is the 3 vert nav items in the LH bar.
	
	Footer nav is at the bottom of the page
	
	Tertiary nav appears on some templates in the central column
	
	Tool nav appears in the page summary - #tools
*/

	#nav {
		width: 232px; /* 233 incl LH border */
		float: left;		
		border: 1px solid #fff;
		border-width: 1px 0 0 1px;
		margin-top: 129px;	/* create space for level logo */								
	}
	#nav li {
		display: inline; /* ie6, to collapse extra vertical space */
	}	
	#shell .liner #nav .liner { 
		margin-bottom:43px;
		padding-right: 7px; 
	}
	html>body #shell .liner #nav .liner { margin-bottom:55px; }
		#primary-nav ul {
	/*	bottom border on top ul */
		background: url(/resources/images/ui/nav-border.gif) no-repeat 12px 100%;
	}
	#primary-nav {
		font-size: 1em;
		padding-top: 10px;
	}
	#primary-nav ul ul {
		background: none;
	}
	#primary-nav ul ul ul ul {
		font-size: 0.95em;
	}	
	#primary-nav li a {
		height: 1px; /* ie, to extend hitarea of top level items */
	}
	html>body #primary-nav li a {
		height: auto;
	}
	#primary-nav li a,
	#primary-nav li a span {
		display: block;
	}
	#primary-nav li a {
		text-decoration: none;
		color: #000;			
		cursor: pointer;
	}	
	#primary-nav li a:hover {
		text-decoration: underline;
	}	
	#primary-nav li.current, 
	#primary-nav li.current li.current {
		font-weight: bold;	
	}	
	#primary-nav li.current li {
		font-weight: normal;
	}	
	#primary-nav li span span {
		padding: 5px 13px 6px 12px;			
		border-top: 1px solid #bebbae;
		margin: 0 8px 0 12px;	
		background: url(/resources/images/ui/nav-arrow-l1.gif) no-repeat 4px 10px; /* level 1 is not skinned */		
	}
	#primary-nav li.current a {	
  	/* 'current' is applied as part of cs~ skin class (see skins.css) 
		AND as a separate class.
		This is a workaround for a ie6 multiple class bug, 
		which allows us to do just this,
		while still keeping our css code to a minimum.
	*/
		padding-top: 2px;
		margin-right: -8px;					
		background: url(/resources/images/ui/nav-current-top.gif) no-repeat;	
		position: relative; /* ie6, else outcrop cropped.. */		
	}
	#primary-nav li.current a,
	#primary-nav li.current a span {
		height: 1px; /* ie6 display fix, else white bg dropped */
	}
	html>body #primary-nav li.current a,
	html>body #primary-nav li.current a span {	
		height: auto;	
	}
	#primary-nav li.current li a {	
		padding-top: 0;
		padding-bottom: 0;		
		border-top: 0;
		border-bottom: 0;
		margin-right: 0;
		background: none;
	}
	#primary-nav li.current span.drop {
	/* 	Dropshadow 
		I couldn't do this with an existing span as pngs backgrounds applied with the msie filter can't be aligned to the bottom of a container,
		Plus:
		- png cannot be applied to #primary-nav ul as nav-border.gif bg already applied here
		- png cannot be applied to #primary-nav li.current li.first as #nav li set to display: inline for ie6		
		So, instead, a separate span is applied to current parent items only and reserved for the drop shadow - span.drop	
	 */
		width: 232px;
		height: 7px;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/resources/images/ui/nav-current-bottom.png',sizingMethod='crop');
		
		overflow: hidden; /* ds prevent small dash/underline appearing below .drop on hover of A parent */
	}
	html>body #primary-nav li.current span.drop {
		background: url(/resources/images/ui/nav-current-bottom.png) no-repeat 0 0;		
	}
	#primary-nav li li span span {
		padding-right: 8px;
	}		
	#primary-nav li.current span span {	
		padding: 4px 0 5px 24px; /* top and bottom pad less 2px for border styling, 25=13+12 */	
		border-top: 0;		
		margin: 0;			
		background: #fff no-repeat 12px 9px;		
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader.enabled = false; /* switch off filter */		
	}	
	#primary-nav li.current li.first span {
		padding-top: 0; /* offset 7px high dropshadow */
		background-position: 4px 5px;
	}		
	#primary-nav li li span span,
	#primary-nav li.current li span span {	
		padding: 4px 0 7px 12px;	
		border-top: 1px solid #c4bca3;		
		margin: 0 8px 0 12px;			
		background: no-repeat 4px 10px;				
	}
	#primary-nav li.current li.current span span {	
		padding-left: 11px;
		padding-top: 5px;
		padding-bottom: 6px;
		margin-left: 13px;
	}	
	#primary-nav li.current li li span span,
	#primary-nav li.current li.current li span span  { /* 3rd level deep */
		margin: 0 8px 0 26px;
	}
	#primary-nav li.current li.current li span span {
		padding-left: 8px;	
	}	
	#primary-nav li.current li.current li.current span span {
		padding-left: 10px;	
	}		
	#primary-nav li.current li.current li.current li span span {
		padding-left: 9px;	
	}		
	#primary-nav li.current li.current li.current span span {
		margin-left: 24px; /* 26px would align the border rules, but then the arrow would be indented by 2px too much */
	}		
	#primary-nav li.current li li li span span,
	#primary-nav li.current li.current li li span span,
	#primary-nav li.current li.current li.current li span span  { /* 4th level deep */
		margin: 0 8px 0 40px;
	}	
	#primary-nav li.current li.current li.current li span span {
		padding-top: 6px;	
		margin-left: 38px;
	}				
	#primary-nav li.current li.current span span,
	#primary-nav li.current li.current li.current span span {
		background-position: 2px 11px;
	}		
	#primary-nav li.first span span,
	#primary-nav li li.first span span {
		border: 0;
	}
	#primary-nav li li li.first span span {	
		border-top: 1px solid #bebbae;
	}
	#primary-nav li.current li.current li span span {
		background-position: 0 10px;		
	}
	#primary-nav li.current li.current li.current span span {
		background-position: 0 12px;		
	}	
	#primary-nav li.current li.current li.current li span span {
		background-position: 0 10px;
		line-height: 1.2;
	}
	/*	secondary nav 
		The 3 vertical LH nav items that pop out on hover
		There's potential for a colour clash here, as the LHS of secondarynav-bg.gif
		contains a flat colour the same as the page bg colour (fdfafa)
		- this is required to obscure the drop shadow background underneath - 
		ths issue arises if the page is shorter and the secondary navs sit on a gradiated part of the
		background: gradiated vs flat */	
	
		#secondary-nav {
			position: relative; /* ie6, else outcrop is cropped.. */	
			width: 37px;
			height: 265px; /* 276px less top and btm pad */
			background: url(/resources/images/ui/secondarynav-bg.gif) no-repeat;
			padding: 6px 0 5px 5px;
			margin: 8px 0 0 -7px;	
		}
		#secondary-nav ul {
			margin: 0;
			padding: 0;
		}
		#secondary-nav a {
			display: block;
			width: 35px; /* 30 + 5 dropshadow */
			background: url(/resources/images/ui/secondarynav.gif) no-repeat;	
			text-decoration: none;				
		}	
		#secondary-nav a:hover span.drop, 
		#secondary-nav a:focus span.drop {
			margin-left: -5px;	
			position: relative; /* ie6, else outcrop is cropped.. */					
		}	
		#secondary-nav li span.drop {
		/*	only the A is going to repond on hover
			so no point inputting the bg on the list item as the LI won't move on hover
			so will use same technique as for li.current */	
			display: block;
			width: 5px;
			height: 100%;
		}
		#secondary-nav .nav-1 a {
			background-position: 0 0;	
			height: 105px;
		}
		#secondary-nav .nav-1 a:hover, 
		#secondary-nav .nav-1 a:focus {		
			background-position: 0 -265px;	
		/*	show top border on hover (doesn't work properly yet)			
			height: 106px;	
			margin-bottom: -1px;	
		*/					
		}
		#secondary-nav .nav-1 span.drop {
		/*	There has to be a separate png for each item, as the corners of the shadow are rounded
			The designer may want to tweak the pngs a little to get the right effect. */
			filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/resources/images/ui/secondarynav-dropshadow-1.png',sizingMethod='crop');		
		}
		html>body #secondary-nav .nav-1 span.drop {
			background: url(/resources/images/ui/secondarynav-dropshadow-1.png) no-repeat 0 0;	
		}				
		#secondary-nav .nav-2 a {	
			background-position: 0 -105px;
			height: 82px;		
			margin-top: 0;			
		}
		#secondary-nav .nav-2 a:hover, 
		#secondary-nav .nav-2 a:focus {	
			background-position: 0 -370px;	
		/*	show top border on hover (doesn't work properly yet)			
			height: 83px;	
			margin-bottom: -1px;			
		*/
		}	
		#secondary-nav .nav-2 span.drop {
		/*	There has to be a separate png for each item, as the corners of the shadow are rounded
			The designer may want to tweak the pngs a little to get the right effect. */
			filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/resources/images/ui/secondarynav-dropshadow-2.png',sizingMethod='crop');		
		}
		html>body #secondary-nav .nav-2 span.drop {
			background: url(/resources/images/ui/secondarynav-dropshadow-2.png) no-repeat 0 0;	
		}			
		#secondary-nav .nav-3 a {
			background-position: 0 -187px;
			height: 79px;	
			margin-top: -1px;					
		}
		#secondary-nav .nav-3 a:hover, 
		#secondary-nav .nav-3 a:focus {
			background-position: 0 -452px;
		/*	show top border on hover (doesn't work properly yet)
			height: 81px;	
			margin-bottom: -1px;			
		*/
		}	
		#secondary-nav .nav-3 span.drop {
		/*	There has to be a separate png for each item, as the corners of the shadow are rounded
			The designer may want to tweak the pngs a little to get the right effect. */
			filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/resources/images/ui/secondarynav-dropshadow-3.png',sizingMethod='crop');		
		}
		html>body #secondary-nav .nav-3 span.drop {
			background: url(/resources/images/ui/secondarynav-dropshadow-3.png) no-repeat 0 0;	
		}					
	
/*	+ content
	This contains all content in the central column of the design.
	Max width is 544px.
*/

	#content {
		margin-left: 235px;	 /* 233 for LH nav, + 2 to expose fading line at LHS of content (else covered by #fff bg) */	
		color: #4d4d4d;
		background: #fff;	
		min-height:817px; /* fix for positioning of footer to prevent overlaps of shell background */
		height:820px;
	}
	html>body #content {
		height: auto;			
	}
	#content .liner {		
		padding: 0 27px 47px 27px;	
	}
	#content #summary .liner {
		margin-left: 0;
	}
	#content .liner .liner {
	/*	reset for other child liners */
		float: none;
	}
	
/*	content summary
	This contains h1 and intro para and is colour coded to section.
*/	
	#content #summary,
	#content .liner {
		float: left;
	}
	#content #summary {
		border: 1px solid #fff;
		margin: 0 0 22px -6px; /* -2 = reverse 2px extra margin on LHS of #content parent */
		position: relative; /* wrap for absolutely positioned tool icons  */	
	}
	html>body #content #summary {
		margin: 0 0 22px -3px; /* -2 = reverse 2px extra margin on LHS of #content parent */
		width:543px;
	}
	#shell .liner #summary .liner {	
	/*	
		The 1st liner in summary contains a top-aligned shadow png (provided in TIF file), which applies the 'lip' above the icon buttons
		The 10px top pad forces the 2nd summary liner down below this png. This ensures that there is no risk of png overlap.
		The skin background color of the 1st liner is the same as that of the 2nd liner.
		
		Note that PNG is fixed dimensions - this gives best results in ie6 (vs a narrower one it has to apply a image/scale/crop sizing method to).
		
		When the skin is applied to #shell .liner #summary .liner it also correctly fills #shell .liner #summary .liner .liner
	*/	
		float: none;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/resources/images/ui/summary-top-shadow.png',sizingMethod='crop'); /* 544 was too wide in ie */		
		height: 1px; /* ie6 - force png bg to render */
		padding: 10px 0 0 0;	
	}
	html>body #shell .liner #summary .liner {	
		background: url(/resources/images/ui/summary-top-shadow.png) no-repeat;	
		height: auto;		
	}	
	#shell .liner #summary .liner .liner {
	/*	
		The 2nd liner in summary contains a btm-aligned gradient png (created by me by playing with gradient fill and transparency,
		to match the provided/flattened versions), which fades the bg color from dark (btm) to lighter (top).
		
		Each skin's bg color was applied from the TIF (swatched from topmost pixel below the 'lip' shadow).
		The result is that when the text size is increased and the summary div expands vertically, more of the topmost colour
		will be shown, so there will be a smooth fade to a flat colour.
		
		Note: I don't think my gradient's perfect because there seems to be a faint line at the transition point - 
		but it's hard to check on my LCD monitor (a designer can finetune the png, if they have the time/inclination).		
		
		In addition this gradient image includes the 'page fold' and 'shadow' seen at the bottom of the summary box.	
		
		Note that IE6 sizingMethod is set to 'scale' (to the container) - this results in the bottom border not being rendered quite correctly,
		however it is the only option because in the other modes the graphic aligns to the top of the container. 
	*/		
		padding: 40px 0 15px 0;		
		margin-left: -1px; /* overlap LH border of #summary */			
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/resources/images/ui/summary-gradient-btm.png',sizingMethod='scale');	
		
		margin-bottom: 0; /* 27.06 ds, remove grey strip below summary in ie7 (can also affect ie6 sometimes..) */
	}
	html>body #shell .liner #summary .liner .liner {
		background: url(/resources/images/ui/summary-gradient-btm.png) no-repeat 100% 100%;	
	}
	#content #summary h1,
	#content #summary p {
		margin: 0 110px 0 29px;	/* design margin is 160px but I've reduced this so that the 2 lines of design text fit on 2 lines in the build */
		color: #fff;			
	}	
	#home #content #summary h1,
	#home #content #summary p {
		color: #333;	
	}	
	#home #content #summary p {
		text-transform: uppercase;
	}
	#content #summary h1 {
		font-size: 1.4em;
		font-weight: normal;		
		margin-bottom: 0.4em;
	}
	#content #summary p {
		font-size: 0.95em;	
		line-height: 1.7em;
	}
	#content #summary img.prop {
		float: right;
		height: 63px; 
	/* 	53px = 129 - (1px top border) - (50px top pad) - (15px bottom pad) */
	}
	
/*	content other */	
	
	#content h2 {
		font-size: 1.2em;
		margin-bottom: 10px; /* else span bg sits atop following text - span is line but still weird */
	}
	#content h2 span {
		padding-bottom: 10px;
		background: url(/resources/images/ui/border.gif) repeat-x 0 100%;
	}
	#content .footnotes {		
		padding-top: 11px;	
		background: url(/resources/images/ui/border.gif) repeat-x 0 0;
		color: #9b9b9b;
	}
	#content .footnotes ol {
	/* 	left margin was pushing knocking parent container down below LH nav in ie6 */
		list-style-position:inside;
		margin:0;
	}		
	#content .rule {
		padding-bottom: 3px;
		margin: 0.6em 0 0.6em 0;
		background: url(/resources/images/ui/border.gif) repeat-x 0 100%;		
	}
	#content .rule hr {
		display: none;
	}
	#content h3,
	#related h3 {
		font-size: 1.1em;
		margin-bottom: 0.3em;	
		/* color:#000; design change */
	}
	#content h3 {
		color: #333;
	}
	#related {
		line-height: 1.4em;
	}
	#related h3 {
		color: #3b3b3b;
		font-size: 1.05em;
		font-weight: normal;
	}
	#related .links p { 
		color: #3b3b3b;
		margin-bottom:0.5em;
	}	
	#content h4 {
		font-size: 1em; /* ie6 */
	}
	#content h4,
	#content .h4 {
		color: #837d5f;
		margin-bottom: 0.2em;					
	}
	#content a,
	#related a {
		text-decoration: underline;
	}
	#related h3 a {	
		text-decoration: none;
		color: #000;	
		background: url(/resources/images/ui/icon-hr-link.gif) no-repeat 100% 0;	
		padding-right: 39px;
	}
	#content p {
		line-height: 1.5em;
		margin-bottom: 1em;
	}
	#content p.intro {
		font-family: "Times New Roman", Times, serif;
		font-size: 1.65em;
		line-height: 1.2em;
		margin: 1em 0;
	}	
	#content p.date {
		text-transform: uppercase;
		font-size: 0.8em;
		color: #aaa68e;
		margin-bottom: 0.4em;
	}
	#content p.date em {
		font-style: normal;
	}
	
	/* 	lists */
	
		#content ol,	
		#content ul,
		#content ul li,
		#related ul,
		#related ul li {	
			padding: 0;
			margin: 0;
		}
		#content ol {
			margin-left: 23px;
		}	
		#content ol,
		#content ul,
		#related ul {
			margin-bottom: 1.5em;
		}	
		#content li {
			line-height: 1.5em;
		}	
		#related li {
			font-size: 0.9em;
		}
		#content ul li,
		#related ul li {
			list-style: none;
			padding-left: 8px;		
			margin: 0;
			background: url(/resources/images/ui/list-dash.gif) no-repeat 0 0.7em;
		}
		#content ol ul li {
			padding-left: 18px;	
			background-position: 10px 0.7em;
		}
		#content ul.pointed li {
			padding-left: 15px;		
			background: url(/resources/images/ui/list-point.gif) no-repeat 4px 0.7em;
		}	
		
	/* 	lists				
		content summary tools
		
		little iconised buttons in centre top area of page
		I was going to do these with a resuable bg,
		but as they have other applications (eg with one piece bg in #related headers) 
		I'm now switching to a three-stage rollover incl background for each icon 
	
		Note that there is a 3px overlap between the summary-top-shadow png and the icon buttons.
		This area won't be active in ie6 - because the filter affects links. The drop shadow 
		created by the png is comped onto the icon off-state bg. The icons actualy sit
		above the dropshadow layer, but this gives the illusion that they are beneath it, while
		allowing us to switch to the dropshadowless rollover state easily.
	*/	
		#content #tools {
			position: absolute;
			top: 6px;
			right: 28px;
		}	
		#content #tools ul li {
			width: 30px;
			height: 28px;	
			float: left;
			padding-left: 0; /* override */
			margin-left: 5px; /* gaps currently too big in ie6 */
			background: none; /* override */			
			filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/resources/images/ui/icon-dropshadow.png',sizingMethod='image');			
		}
		html>body #content #tools ul li {
			background: url(/resources/images/ui/icon-dropshadow.png) no-repeat;		
		}
		#content #tools ul li li {
		/*	fontsize */
			float: none;
			margin-left: 0;
			/* disable MSIE Alpha Filter */
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader.enabled = false;			
		}
		html>body #content #tools ul li li {
			background: none;
		}
		#content #tools a,
		#content #tools .a,
		#content #tools #indicator {
			display: block;
			margin: 0 0 4px 4px; /* exclude dropshadows from hit area */
			width: 26px;
			height: 24px;	
			background-repeat: no-repeat;				
		}
		#tools #email a {
			background-image: url(/resources/images/ui/icon-email-states.gif);
		}
		#content #tools #fontsize {
			position: relative;	/* absolute wrap */	
		}	
		#content #tools #indicator {
			background: url(/resources/images/ui/icon-fontsize-states.gif) no-repeat 0 0;		
		}			
		#content #tools .textsize-1-blur #indicator {
		/*	a:down | A:off */
			background-position: 0 -81px;		
		}
		.textsize-1-hover .a,
		.textsize-2-hover .a,
		.textsize-2-decrease-hover .a,
		.textsize-2-increase-hover .a,
		.textsize-3-hover .a {
		/*	faux links - hover purposely not applied to faux link elements in text resizer, so applied here instead */
			cursor: pointer;
		}			
		#content #tools .textsize-1-hover #indicator {
		/*	a:down | A:over */		
			background-position: 0 -135px;			
		}
		#content #tools .textsize-2-blur #indicator {
		/*	a:off | A:off */				
			background-position: 0 0;		
		}	
		#content #tools .textsize-2-hover #indicator {
		/*	a:off | A:off */	
		/*	BUT button still over */
			background-position: 0 -189px;
		}			
		#content #tools .textsize-2-decrease-hover #indicator {
		/*	a:over | A:off */		
			background-position: 0 -27px;									
		}	
		#content #tools .textsize-2-increase-hover #indicator {		
		/*	a:off | A:over */		
			background-position: 0 -54px;						
		}					
		#content #tools .textsize-3-blur #indicator {
		/*	a:off | A:down */				
			background-position: 0 -108px;		
		}
		#content #tools .textsize-3-hover #indicator {
		/*	a:over | A:down */		
			background-position: 0 -162px;			
		}		
		#content #tools #fontsize .a {
			position: absolute;
			top: 0;
			left: 4px;
			width: 11px;
			margin: 0; /* parent indicator takes this */
			background: none; /* parent indicator takes this */		
		}		
		#content #tools #fontsize #increase .a {
			left: 15px;
			width: 15px;			
		}
		#content #tools #print .a {
			background-image: url(/resources/images/ui/icon-print-states.gif);
		}		
		#content #tools a:hover,
		#content #tools a:focus,
		#content #tools .hover {
			background-position: 0 -27px;
		}
		#content #tools a.current {
			background-position: 0 -54px;
		}
		#content #tools .arrow a {}
		#content #tools .arrows a {}
		#content #tools .close a {}
		#content #tools .info a {}
		#content #tools .page a {}
		#content #tools .shop a {}			
	/* 	lists				
		Tertiary nav
		The small 'page' boxes with the folded corners */
				

		/* summary style */

		#content .tertiary-nav-1, 
		#content .tertiary-nav-2  { 
			margin-left:-10px; 
		}
		#content .tertiary-nav-1 ul, 
		#content .tertiary-nav-2 ul { 
			float:left; 
			margin:0 -5px 0 0; 
			list-style:none; 
			width:170px; 
		}
		#content .tertiary-nav-1 li, 
		#content .tertiary-nav-2 li { 
			width:170px; 
			background:url(/resources/images/ui/tertiary-nav-bottom-2.gif) no-repeat left bottom;
			margin:0 0 -3px 0; 
			padding:0; 
		}
		html>body #content .tertiary-nav-1 li, 
		html>body #content .tertiary-nav-2 li { 
			margin:0 0 -4px 0; 
			background:url(/resources/images/ui/tertiary-nav-bottom.png) no-repeat left bottom; 
		}
		#content .tertiary-nav-1 li span, 
		#content .tertiary-nav-2 li span { 
			width:150px; 
			display:block; 
			background:none; 
			height:5px; 
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/resources/images/ui/tertiary-nav-top.png',sizingMethod='image'); 
		}
		html>body #content .tertiary-nav-1 li span, 
		html>body #content .tertiary-nav-2 li span { 
			width:170px; 
			background:url(/resources/images/ui/tertiary-nav-top.png) no-repeat 0 0; 
			 }
		#content .tertiary-nav-1 li a { 
			min-height:20px; 
			height:20px; 
			display:block; 
			padding:0 0 0.3em 26px; 
			background:url(/resources/images/ui/icon-arrow-button.gif) no-repeat 0 0; 
		}
		html>body #content .tertiary-nav-1 li a { 
			height:auto; 
		}
		#content .tertiary-nav-1 li p { 
			padding:10px 10px 15px; 
			margin:0; 
		}
		#content .tertiary-nav-2 ul ul { 
			float:none; 
			padding-bottom:20px; 
		} 
		#content .tertiary-nav-2 li li { 
			line-height:1.3em; 
			background:none !important; 
		}
		#content .tertiary-nav-2 li li a { 
			display:block; 
			padding:0.4em 17px; 
			background: no-repeat 10px 0.8em; /* removed src image + transferred to skins.css */
		}
		#content .tertiary-nav-2 h4 { 
			color:#333; 
			padding:6px 10px 0; 
		}
	
	/*	other */		
		
	#content blockquote {
		font-family: "Times New Roman", Times, serif;
		font-size: 1.2em;
		margin: 0 12px 1.5em 12px;
	}
	#content blockquote em {
		display: block;
	}	
	#content blockquote.left,
	#content blockquote.right {
		margin: 0;
		line-height: 1.4em;	
	}	
	#content blockquote.left {
		width: 161px;
		float: left;
		margin: 0 9px 9px 0;
	}	
	#content blockquote.right {
		width: 185px;
		float: right;		
		margin: 0 0 9px 9px;		
	}	
	#content blockquote span {
		display: block;		
		height: 1px; /* ie6 */
	}
	html>body #content blockquote span {
		height: auto;
	}
	#content blockquote.left span {
	/*	i've made this a flat color tho the design is a gradient */
		background: #fafafa url(/resources/images/ui/blockquote-left-header.gif) no-repeat;
		padding: 3px 0 0 0;
	}	
	#content blockquote.left span span {
		background: url(/resources/images/ui/blockquote-left-footer.gif) no-repeat 0 100%;
		padding: 0 0 13px 0;
	}	
	#content blockquote.left span span span {
		background: url(/resources/images/ui/blockquote-left-body.gif) repeat-y;
		padding: 0 4px 0 2px;
	}	
	#content blockquote.left span span span span {
		background: url(/resources/images/ui/blockquote-left-gradient.jpg) repeat-x 0 100%;
		padding: 17px 13px 13px 16px;
	}					
	#content blockquote.right span {
	/*	i've made this a flat color tho the design is a gradient */
		background: #fafafa url(/resources/images/ui/blockquote-right-header.gif) no-repeat;
		padding: 13px 0 0 0;
	}	
	#content blockquote.right span span {
		background: url(/resources/images/ui/blockquote-right-footer.gif) no-repeat 0 100%;
		padding: 0 0 13px 0;
	}	
	#content blockquote.right span span span {
		background: url(/resources/images/ui/blockquote-right-body.gif) repeat-y;
		padding: 0 4px 0 26px;		
	}	
	#content blockquote.right span span span span {
		background: url(/resources/images/ui/blockquote-right-gradient.jpg) repeat-x 0 100%;
		padding: 5px 14px 6px 14px;
	}
	#content table {
		margin-bottom: 2em;
	}
	#content table caption {
		margin-bottom: 4px;
		text-align: left;
		color: #111;	
		font-weight: bold;
		font-size: 1.1em;	
	}
	#content table,
	#content th,
	#content td {
		border: 0;
	}
	#content th {
		font-weight: normal;
	}		
	#content th,
	#content td {
		text-align: left;
		vertical-align: top;
		padding: 12px 12px 9px 0;
		color: #4d4d4d;
		background: url(/resources/images/ui/border.gif) repeat-x 0 0;
	}			
	
/*	dl - framed image */	 
		
	dl.img {
		margin: 0.4em 0 0.7em 0; 
		line-height:1.6em; 
	}
	dl.right {
		float: right;
		margin-left: 23px;
	}
	dl.left {
		float: left;
		margin-right: 10px;
	}
	/*	small image 1: 150x150 + frame */
		
		dl.w150h150,
		dl.w150h150 dt {
			width: 154px;
		}	
		dl.w150h150 dt {
			background: url(/resources/images/ui/img-150x150-frame.gif) no-repeat;
			height: 154px;		
		}
		dl.w150h150 dt img {
			margin: 1px 0 0 1px;
		}
		dl.w150h150 dd {
			padding: 5px 6px 8px 2px;
			color: #7f7f7f;
			background: url(/resources/images/ui/img-150x150-caption-bg.gif) no-repeat 0 100%;
		}
		
	/*	small image 2: 151x145 + frame and caption bubble.
		-caption option developed 27.06.2007, to prevent caption overlap on text resize */
		
		dl.w151h145,
		dl.w151h145-caption	{
			position: relative; /* absolute wrap */			
		}
		dl.w151h145-caption {
			padding-top: 40px;
		}		
		dl.w151h145 dt {
			position: relative; 	
			background: url(/resources/images/ui/img-151x145-frame.gif) no-repeat;		
		}
		dl.w151h145-caption	dt {
			position: absolute;
			top: 0;
			left: 0;
		}
		dl.w151h145 dt,
		dl.w151h145-caption dt,
		dl.w151h145-caption dt .frame {
			width: 174px;
			height: 197px;	
		}
		dl.w151h145 dt img,
		dl.w151h145-caption dt img {
			margin: 11px 0 0 11px;
		}	
		dl.w151h145-caption dt .frame {
		/*	frame now overlaid */
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			background: url(/resources/images/ui/img-151x145-frame-caption.gif) no-repeat;				
		}
		dl.w151h145 dd,
		dl.w151h145-caption dd {
			width: 343px;
			margin: 40px 0 0 145px; 
			padding:0;
		}
		dl.w151h145-caption dd {
			width: 340px; /* 343px too much in ie6 */
		}
		html>body dl.w151h145-caption dd {
			width: 343px;
		}
		dl.w151h145-caption dd {
			margin-top: 0;
		}
		dl.w151h145 dd span,
		dl.w151h145-caption dd span {
			display: block;
			background: url(/resources/images/ui/img-caption-body.gif) repeat-y 100% 0;
			padding:0;
			margin:0;
		}	
		dl.w151h145 dd span span,
		dl.w151h145-caption dd span span {
			background: url(/resources/images/ui/img-caption-footer.gif) no-repeat 100% 100%;		
		}	
		dl.w151h145 dd span span span,
		dl.w151h145-caption dd span span span {
			background: url(/resources/images/ui/img-caption-header.gif) no-repeat 100% 0;
			margin:19px 0 13px 0;	
		}	
		dl.w151h145 dd span span span span,
		dl.w151h145-caption dd span span span span { 
			background:none; 
			padding:15px 10px 15px 55px; 
			margin:0; 
			
			min-height: 82px;
			height: 82px; /* display fix for ie6 */
		}

		html>body dl.w151h145 dd span span span span,
		html>body dl.w151h145-caption dd span span span span { 
			height: auto; /* revert fix in gecko */
		}
		dl.w151h145 strong,
		dl.w151h145-caption strong { /* PDF icon */
			display:block; 
			background:url(/resources/images/ui/icon-pdf-2.gif) no-repeat; 
			padding:5px 0 0 25px; 
		} 
		
	/*	big image: 480x276 + frame
		This is the only instance where the frame actually masks the image,
		the other frames are just glorified borders */
		
		dl.w480h276,
		dl.w480h276 dt,
		dl.w480h276 dt .frame {
			display: block;		
			width: 484px;			
		}
		dl.w480h276 dt {
			position: relative;
		}
		dl.w480h276 dt,
		dl.w480h276 dt .frame {	
			height: 280px;	
		}
		dl.w480h276 dt .frame {
			display: block;			
			position: absolute;
			top: 0;
			left: 0;
			background: url(/resources/images/ui/img-480x276-frame.gif) no-repeat;
		}
		dl.w480h276 dt img {
			margin: 1px 0 0 1px;
		}
		dl.w480h276 dd {
			padding: 5px 6px 8px 2px;
			color: #7f7f7f;
			background: url(/resources/images/ui/img-150x150-caption-bg.gif) no-repeat 0 100%;
		}	
		
	/*	forms */
		/* form box decoration */
		#body form {
			height: 1px; /* ie6 */
		}
		html>body #body form {
			height: auto;
		}	
		#body form legend { color:#333; font-weight:bold; padding-bottom:4px; }
		#body fieldset {
			margin-bottom: 2em;
		}
		#body fieldset.side-labels {
			width: 369px;		
		}
		#content fieldset.stacked-labels {
			width: 249px;		
		}	
		#related fieldset.stacked-labels {
			width: 180px;		
		}				
		#body .fieldset {
			margin-top: 0.3em;
		}
		#body .side-labels .fieldset {
		/*	faux fieldset created to workaround legend positioning issues */
			background: url(/resources/images/ui/form-header-side.gif) no-repeat;
			margin:0; padding:5px 0 0;
		}		
		#body #content .stacked-labels .fieldset {
		/*	faux fieldset created to workaround legend positioning issues */
			background: url(/resources/images/ui/form-header-stacked.gif) no-repeat;
			margin:0; padding:6px 0 0;
		}
		#body .side-labels .liner {
			background: url(/resources/images/ui/form-footer-side.gif) no-repeat 0 100%;
			margin:0; padding:0 0 14px;
		}		
		#body .stacked-labels .liner {
			background: url(/resources/images/ui/form-footer-stacked.gif) no-repeat 0 100%;
			margin:0; padding:0 0 15px;
		}
		#related .stacked-labels .liner {
			background: none;
			padding: 0;
		}
		#body .side-labels .group {
			background: #edeaea url(/resources/images/ui/form-body-side.gif) repeat-y 0 100%;
			padding: 6px 13px 0 15px;
		}		
		#body .stacked-labels .group {
			background: #edeaea url(/resources/images/ui/form-body-stacked.gif) repeat-y 0 100%;
			padding: 6px 15px 0 17px;
		}
		#related .stacked-labels .group {
			background: none;
			padding: 0;
		}
		/* text inputs */
		#body .text,
		#body .text span {
			display: block;
		}
		#body .side-labels .label {
			width: 135px; /* 162 less margins */
			margin-right: 10px;
			float: left;
			padding-top: 5px;
		}
		#body .side-labels .input {
			margin-left: 145px;
		}
		#body .stacked-labels .input input { /* FF new class for IE6 - reset for others */
		
		}
		#body .stacked-labels .label {
			position: absolute;
			padding: 2px 3px 3px 3px;
			margin: 4px 4px 6px 4px;		
			width: 155px; 			
			font-size: 0.7em;	
			font-weight: bold;
			text-transform: uppercase;	
			text-align: right;
			background-color: #fff;
		}
		#body .text .input {
			padding-top: 3px;
			background: url(/resources/images/ui/textfield-header.gif) no-repeat 3px 0;
		}
		#body .stacked-labels .text .input {
			background-position: 0 0;
		}
		html>body #body .text .input { 
			padding-top: 4px;
			background: url(/resources/images/ui/textfield-header.gif) no-repeat 0 0;
		}
		#body .text .input span {
			padding-bottom: 5px;
			background: url(/resources/images/ui/textfield-footer.gif) no-repeat 3px 100%;
		}	
		#body .stacked-labels .text .input span {
			background-position: 0 100%;
		}	
		html>body #body .text .input span {
			padding-bottom: 6px;
			background: url(/resources/images/ui/textfield-footer.gif) no-repeat 0 100%;
		}
		#body .text .input span input, #body .text .input span textarea, #body .select .input span select {
			font-family: Verdana, Arial, Helvetica, sans-serif;
			width: 141px; /* 149 less padding */
			font-size: 0.85em;
			font-weight: bold;
			text-align: right;
			color: #a6a5a5; /* 4d4d4d */
			padding: 3px 7px;
			border:0;
			background: #fff url(/resources/images/ui/textfield-body.gif) repeat-y 0 0;
		}
		/* safari doesn't like the above */
		/*\*/
		html*#body .text .input span input {
		[background:none; width:155px;
		]width: 141px;background: #fff url(/resources/images/ui/textfield-body.gif) repeat-y 0 0;
		}/**/
		.dummyend[id]{clear: both/*end safari hack */}
		
		/* select boxes */
		#body .select .input span select {
		 	background:#fff; 
			border:1px solid #ccc;
			margin:0; 
			padding:1px 1px 1px 7px;
			font-size:1em;
			width:155px;
			float:left;
		}
		#body .side-labels .group.select .label { 
			padding-top:0; 
		}
		/* radio/checkboxes */
		#body .radio .label {
			width:131px; 
			float:left;
		}
		#body .radio .input {
			margin-left:131px;
			display:block;
			width:155px; 
		}
		#body .radio .input span label {
			display:block;
		}
		/* group side-label submit */
		#body .side-labels .group.submit input { 
			margin-left:145px;
		}
		#body .side-labels .group.submit { 
			background:none; 
			padding-left:0; 
		}
		/* group stacked-label submit */
		#body .stacked-labels .submit { 
			margin-top:-1px; 			
		}
		#body .stacked-labels .submit .submit { 
			margin-top:0; 
		}
		/* form success */
		#body .formsuccess { 
			background:#ece9e9 url(/resources/images/ui/form-success-bottom.gif) left bottom repeat-x;
			margin:1em 0;
		}
		#body .formsuccess div { 
			display:block;
			padding:13px 11px;
			background:url(/resources/images/ui/form-success-top.gif) 0 0 repeat-x; 
		}
		#body .formsuccess p, #body .formsuccess h2, #body .formsuccess h3, #body .formsuccess h4, #body .formsuccess h5 { 
			margin:0; 
			padding:0;
		}
		/* form validation */
		#body .validationmessage {
			color:red; 
			margin-left:145px;
			width:155px;
			display:block;
		}
		/* developers need to add the class 'validation-success/validation-failure' to the first <div> inside the <div class="group"> element using js dynamically */
		#body .group .validation-failure {
			background: url(/resources/images/ui/form-validation-no.gif) no-repeat right top;
			height:23px;
			min-height:23px;
		}
		html>body #body .group .validation-failure {
			height:auto;
		}
		#body .group .validation-success {
			background: url(/resources/images/ui/form-validation-yes.gif) no-repeat right top;
			height:23px;
			min-height:23px;
		}
		html>body #body .group .validation-success {
			height:auto;
		}
		#search {
		/* fieldset */
			padding: 13px 0 0 13px;
			background: #f3f3f3 url(/resources/images/ui/related-search-bg-top.gif) no-repeat;
		}	
		#search p.input,
		#search p.input	a {
		/*	faux advanced search button */
			display: block;
			width: 103px;
			height: 26px;			
		}
		#search input.submit {
		/*	search button */
			width: 52px;
		}
		#search p.input {
		/*	disabled by DS as this functionality not developed.. */
		/*	background: url(/resources/images/ui/input-advancedsearch.gif) no-repeat; */
		}
		#search p.input,
		#search input.submit {
			float: left;
		}
		
/* Search results */
		#searchresults {
			border-top:3px double #ccc;
			margin:1em 0;
			padding:0;
			clear:both;
		}
		#searchresults ol.results { clear:both; }
		#searchresults ol.results li {
			margin:1em 0 1.5em;
			position:relative;
		}
		#searchresults ol.results li a {
			color:#2b5b65 !important;
			font-weight:bold;
			display:block;
		}
		#searchresults ol.results a.url {
			font-weight:normal;
			display:inline;
			color:#7c870b !important;
			/* fix for IE6 bug which can't handle long URL's */
			position:absolute; height:2em;
		}
		html>body #searchresults ol.results a.url { 
			position:relative; height:auto; width:auto;
		}
		#searchresults ol.results a.pdf {
			background:url(/resources/images/ui/icon-pdf.gif) no-repeat 0 0; 
			padding-left:20px;
		}
		#searchresults .summary {
			text-transform: uppercase;
			font-size: 0.8em;
			color: #aaa68e;
		}
		#searchresults .help {
			font-size: 0.9em;
			color: #aaa68e;
			margin:0.6em 0;
			padding-bottom:0.4em;
			border-bottom:1px solid #ccc;
		}
		/* generic form results pagination */
		#content .pagination { color: #666666; margin: 0; padding:4px 2px; border-top: 1px solid #ccc; height: 1.6em }
		#content .pagination p { margin: 0; padding:0; }
		#content .paginationmatches { float: left; }
		#content .paginationlinks { float: right; }
		#content .paginationlinks a { padding: 2px 4px; margin:0; }
		#content .paginationlinks a:hover { background-color:#EAEAEA; }
		#content .paginationlinks a.selected { background-color:#EAEAEA !important; }
		#content ul.paginationlinks { margin:0; padding:0; list-style:none !important; }
		#content ul.paginationlinks li { float:left; list-style:none !important; }
		
	
/*	related
	This contains all content in the RH column of the design.
*/

	#related {
		/* no particular width - just the leftovers */	
	}
	#shell .liner #related .liner {
	/*	first related liner */
		float: right;
		width: 181px;
		/* overflow: hidden; ds removed causes problems in ie6*/
		padding-top: 130px;
		padding-left: 0;
	}
	#body #related fieldset {
		padding-bottom: 16px;
		margin-bottom: 0;
		width: 167px; /* ds ie6 fix, else related drops down below main */
	}	
	#shell .liner #related .liner .fieldset .liner {
	/*	search */
		float: none;
		width: auto;
		/* overflow: auto; ds causing scroll bars on .submit click */
		padding: 0;		
		height: auto; /* ie6 */
	}		
	#related .links {
		background: url(/resources/images/ui/related-wrap.jpg) no-repeat;
		padding: 0 13px 0 16px;
		font-size:0.95em;
	}
	#related .links h3 span,
	#related .links h3 a {
		display: block;
		padding: 14px 29px 0 0;
		color:#333;
	}
	#related .links h3 span a, 
	#related .links h3 a span {
		padding: 0 29px 0 0;
	}
	#related .logos {
		padding-top: 0.5em;
		text-align: center;
	}
	
/*	glossary
*/
	#glossary dl { 
		line-height:1.5em; 
	}
	#glossary dt { 
		font-weight:bold;
		border-top:3px double #ccc;
		margin:1em 0 0;
		padding:1em 0 0;
	}
	#glossary dd { 
		margin:0 0;
		padding:0 0 1em 0;
	}
	#glossary .category { 
		color: #aaa68e;
		text-transform:uppercase;
		font-size:0.8em; 
	}
	#content a.glossary {
		color: #111;
		text-decoration: none;
	}	
	/* glossary popups */
	#glossarypop { 
		line-height:1.5em;
		width: 260px;	
		display:none;
		margin:0; 
		position: absolute; 
		z-index:3; 
		left:0; 
		top:0;  
	}
	#glossarypop #ajaxmessage { 
		color:#333; 
	}
	.glossarypopupclosebox { 
		float:right; 
	}
	#glossarypop blockquote.right {
		width: 250px;	
		margin: 0 0 9px 9px;		
	}	
	#glossarypop blockquote span {
		display: block;		
		height: 1px; /* ie6 */
	}
	html>body #glossarypop blockquote span {
		height: auto;
	}		
	#glossarypop blockquote.right span {
	/*	i've made this a flat color tho the design is a gradient */
		background: url(/resources/images/ui/glossary-right-header.gif) no-repeat;
		padding: 13px 0 0 0;
	}	
	#glossarypop blockquote.right span span {
		background: #fafafa url(/resources/images/ui/glossary-right-footer.gif) no-repeat 0 100%;
		padding: 0 0 13px 0;
	}	
	#glossarypop blockquote.right span span span {
		background: url(/resources/images/ui/glossary-right-body.gif) repeat-y;
		padding: 0 4px 0 26px;		
	}	
	#glossarypop blockquote.right span span span span {
		background: url(/resources/images/ui/blockquote-right-gradient.jpg) repeat-x 0 100%;
		padding: 5px 14px 6px 14px;
	}
	
	
	
	
	
	
	
/*	footer (nav)
	This is located at the bottom of the content area 
	and includes the back to top link that appears to sit
	at the foot of the LH nav column.
*/

	#footer-nav {
		margin-left: 238px; /* 233 + 5 */
		margin-right: 186px; /* 181 + 5 */
		background: #fff; /* ds */
		color: #4e4d4e;
		font-size: 0.8em;
		position: relative; /* ie6, to display content 'in central column' */	
		border-top: 160px solid #fff; /* ds, space for backtotop to move in to (margin failed x-browser) */
		font-size: 1em;			
	}
	html>body #footer-nav {
		font-size: 1em;	
	}	
	#shell .liner #footer-nav .liner {
		padding-bottom: 30px;
	}			
	#footer-nav ul {
	/* 	merged styling from .liner as ,liner margins were failing in ie6 */
		padding-top: 1.5em;		
		margin: 1.5em 27px 0 27px;
		background: url(/resources/images/ui/border.gif) repeat-x; /* fff */				
	}
	#footer-nav p {
		margin: 0.7em 27px 0.5em 27px;
	}
	#footer-nav .prop {

	}
	#footer-nav li {
		color: #b1b0b0;
		display: inline;
	}
	#footer-nav #backtotop {
		margin: -160px 0 0 -238px;
		width: 238px;
		padding: 88px 0 25px 0;
		background: url(/resources/images/ui/footer-bg.jpg) no-repeat;
	}
	#footer-nav #backtotop a {
		display: block;
		width: 23px;
		height: 46px;
		margin: 0 0 0 215px; /* 234 - 23 */
		background: url(/resources/images/ui/backtotop.gif) no-repeat;		
	}
	#footer-nav #backtotop-mirror {
	/*	ds */
		margin: -160px 0 0 0;
		width: 186px;
		height: 160px;
		background: url(/resources/images/ui/footer-bg-right.jpg) no-repeat;
		position: absolute;		
		right: 0;
	}	
	html>body #footer-nav #backtotop-mirror {
		margin-right: -186px;
	}