/******************************************************************************************************************
O2 Pensions Global Stylesheet

Developed by Matthew Hill, January 2007
Copyright Nixon McInnes (c) 2007
http://www.nixonmcinnes.co.uk

Elements receiving auto float-containing behaviour are defined at the top of the file to avoid repetition
of code in their own declaration block. This is for compliant browsers only and keeps markup clean of extra
clearing elements: http://www.csscreator.com/attributes/containedfloat.php
For IE, conditional comments feed specific stylesheets that use a clearing float hack.

******************************************************************************************************************/

body {
	margin:10px 0;
	padding:0;
	background:#006;
	font: normal 70%/140% Verdana,Arial,"Helvetic Neue",Helvetica,sans-serif;
	color:#FFF;
}

/******************************************************************************************************************
AUTO EXPANDING FLOATS FOR COMPLIANT BROWSERS
******************************************************************************************************************/

#wrapper:after,
#innerwrap:after,
#navtop:after,
#navtop ul:after,
#breadcrumbs:after,
#navside:after,
#content:after,
#footer:after
	{
	content: ".";
	height:0;
	display:block;
	clear:both;
	visibility:hidden;
}

/******************************************************************************************************************
GENERAL FORMATTING OF STANDARD ELEMENTS
******************************************************************************************************************/
#skipnav {
	position:absolute;
	left:-999em;
}

h1,h2,h3,h4,h5,h6 {
	line-height:1;
	/* font-family: "Frutiger 55",Verdana,Arial,"Helvetic Neue",Helvetica,sans-serif; */
	font-family: Verdana,Arial,"Helvetic Neue",Helvetica,sans-serif;
	font-weight:normal;
	margin-top:0;
}

a,a:link {
	font-weight:bold;
	text-decoration:underline;
	color:#CADDEE;
}

a:visited {
	color:#CADDEE;
}

a:hover {
	color:#FFF;
}

a.arrow {
	padding-right:8px;
	background:url(../.images/arrow_orangelink.gif) right bottom no-repeat;
}

a.backarrow {
	padding-left:8px;
	background:url(../.images/arrow_orangelink_back.gif) left bottom no-repeat;
}

img {
	border:none;
}

.floatright {
	float:right;
}
.floatleft {
	float:left;
}

.picright {
	clear:right;
	float:right;
	margin:0 0 10px 17px;
}

.picleft {
	clear:left;
	float:left;
	margin:0 17px 10px 0;
}

.hitext, .warning {
	color:#C56906;
}

#planID {
	position:absolute;
	top:40px;
	right:0;
	font-size:5em;
	width:50px;
	line-height:normal;
/*	display:none;*/
}

a.sidebutton {
	font-weight:normal;
	text-decoration:none;
	margin:0 auto 20px;
	display:block;
	width:160px;
	line-height:140%;	
}

ul.caps strong {
	text-transform:uppercase;
}

.clear {
	clear:both;
}

/******************************************************************************************************************
WRAPPER
******************************************************************************************************************/

#wrapper {
	width:770px;
	padding:0;
	margin:0 auto;
	border:1px solid #85ACC4;
}

#innerwrap {
	padding:0 0 20px 0;
	background:#000066 url(../.images/bg_bodygrad.gif) left bottom repeat-x;	
	min-height:450px;
}

/******************************************************************************************************************
BANNER
******************************************************************************************************************/

#banner img {
	border:0;
	margin:0;
	padding:0;
	display:block;
}

/******************************************************************************************************************
TOP NAVIGATION
******************************************************************************************************************/

#navtop {
	padding:0;
	border-top:1px solid #85ACC4;
	border-bottom:1px solid #85ACC4;		
}

#navtop ul {
	margin:0;
	padding:0;
}

#navtop li {
	margin:0;
	padding:0;
	list-style:none;
	display:inline;
}

#navtop li a, 
#navtop li a:visited {
	color:#FFF;
	text-decoration:none;
	font-weight:normal;
	padding:4px 0 5px 0;
	display:block;
	float:left;
	border-left:1px solid #85ACC4;
	text-align:center;
}

/*** Width of elements MINUS 19px padding & 1px border ***/

#navtop-home a { width:60px }
#navtop-getpension a { width:136px }
#navtop-joinnow a { width:136px }
#navtop-understand a { width:170px; }
#navtop-tools a { width:126px; }
#navtop-fundrange a { width:140px; }
#navtop-contact a { width:133px; }

#navtop li#navtop-home a {
	border:none;
}	

#navtop li a:hover,
#navtop li.selected a,
#navtop li.selected a:visited {
	color:#FFF;
	background:#004999;
}	

/******************************************************************************************************************
SUBNAV & BREADCRUMBS
******************************************************************************************************************/

#subnav {
	padding:10px;
	color:#94ACCD;
}

#subnav form {
	float:left;
	width:220px;
}

#subnav select {
	width:155px;
	margin:0 5px 0 0;
	padding:2px;
	border:1px solid #85ACC4;
	background:#FFF;
	color:#000;
	font-size:100%;
	font-family:Verdana,Arial,"Helvetic Neue",Helvetica,sans-serif;
	float:left;
}

#subnav button {
	width:30px;
	background-image:url(../.images/button_ok.gif);
	float:left;
}

#subnav p {
	margin:0 7px 0 0;
	padding:0;
	float:left;
}

#subnav ul {
	margin:0;
	padding:0;
	float:left;
}

#subnav li {
	margin:0 4px 0 0;
	padding:0;
	list-style:none;
	display:inline;
	color:#A2C1EB;
}

#subnav li a,
#subnav li a:visited {
	color:#A2C1EB;
	font-weight:normal;
	text-decoration:underline;
	background:url(../.images/arrow_breadcrumbs.gif) right center no-repeat;
	padding:0 11px 0 0;
}

#subnav li a:hover {
	color:#FFF;
}

/******************************************************************************************************************
SIDE NAVIGATION
******************************************************************************************************************/

#navside {
	clear:both;
	float:left;
	width:210px;
	padding:0;
	margin:10px 20px 0 1px;
	line-height:normal;
}

	/* Level 1 lists: */

	#navside ul {
		margin:0;
		padding:0 0 20px 0;
	}
	
		#navside ul li {
			list-style:none;
			margin:0;
			padding:0;
			border-bottom:1px solid #002580;
		}
		
			#navside ul li a,
			#navside ul li a:visited
			 {
				color:#FFF;
				background:#004999;
				text-decoration:none;
				line-height:1;
				font-weight:normal;
				display:block;
				padding:5px 10px;

			}
			
			#navside ul li a:hover,
			#navside ul li.selected a,
			#navside ul li.selected a:visited {
				background:#1471B0;
			}
			
		/* Level 2 lists: */

		#navside ul li.selected ul {
			padding:0;
			margin:0 10px;
		}
		
			#navside ul li.selected ul li,
			#navside ul li.selected ul li.selected {
				margin:0;
				border-top:1px solid #435695;
				border-bottom:none;
			}
			
			#navside ul li.selected ul li.first,
			#navside ul li.selected ul li:first-child,
			#navside ul li.selected ul li:first-child.selected {
				border:none;
			}			
			
			
			
				#navside ul li.selected ul li a,
				#navside ul li.selected ul li a:visited,
				#navside ul li.selected ul li.selected a,
				#navside ul li.selected ul li.selected a:visited {
					color:#FFF;
					background:transparent;
				}

				#navside ul li.selected ul li.selected a,
				#navside ul li.selected ul li.selected a:visited {
					font-weight:bold;
					background:url(../.images/arrow_bodybullet.gif) 3px 50% no-repeat;
				}
				
				#navside ul li.selected ul li a:hover,
				#navside ul li.selected ul li.selected a:hover {
					background-color:#002580;
				}
				
		/* Level 3 lists: */	
		
				#navside ul li.selected ul li.selected ul li a,
				#navside ul li.selected ul li.selected ul li a:visited {
					font-weight:normal;
					background:none;
				}

				#navside ul li.selected ul li.selected ul li.selected a,
				#navside ul li.selected ul li.selected ul li.selected a:visited {
					font-weight:bold;
					background:url(../.images/arrow_bodybullet.gif) left center no-repeat;
				}


/******************************************************************************************************************
CONTENT 
******************************************************************************************************************/

#content {
	float:left;
	width:340px;
	padding:0;
	margin:10px 0 0 0;
}

#content h1 {
	clear:both;
	font-size:2.1em;
	line-height:0.90em;
}

#content h2 {
	clear:both;
	font-size:1.4em;
	font-weight:bold;
	margin-bottom:5px;
}

#content h3 {
	clear:both;
	font-size:1.0em;
	font-weight:bold;
}

#content ul {
	margin-top:0;
	margin-bottom:10px;
	margin-left:25px;
	padding-left:0;
	list-style-image: url(../.images/arrow_bodybullet.gif);
}

#content li {
	margin-bottom:5px;
}

#content p {
	margin:10px 0 15px;
	padding:0;
	text-align:left;
}

#content blockquote {
	margin:0 15px 15px 15px;
	padding:0 0 0 25px;
	background:url(../.images/quote_left.gif) top left no-repeat;
}

#content blockquote p {
	font-style:italic;
	margin:0;
	padding:0 25px 0 0;
	background:url(../.images/quote_right.gif) top right no-repeat;
}


/******************************************************************************************************************
STAGES OF PROCESS
******************************************************************************************************************/

/* DESCRIPTION of technique: 
   The HTML consists of this construct: <li id="step1"><a href=""><span></span>1</a></li>
	The CSS simply sets relative positioning on the LI so that the <span> can be absolutely
	positioned within it on a higher z-index. Because the text that follows is positioned
	relatively by default, it disappears underneath the background image assigned to the
	span. This way we can use images for the buttons but still have text showing if images
	are switched off. With CSS switched off, user simply sees an ordinary list of links.
	
	Of course, if the user resizes their text very large, you'll see it appearing under the images
	eventually.
	
	Another tiny problem is that using this technique, IE no longer shows the hand cursor
	when hovering over the anchors, so we use the CSS cursor:pointer to simulate it. */

#progress {
	height:24px;
	margin:0 0 20px 0;
	width:298px;
	background:url(../.images/process-bar.gif) left top repeat-x;	
}

#progress:after {
	content: ".";
	height:0;
	display:block;
	clear:both;
	visibility:hidden;
}

#progress ul,
#progress li {
	margin:0;
	padding:0;
	list-style:none;
}

#progress li {
	display:block;
	float:left;
	position:relative;
	z-index:1;
	height:24px;
	width:26px;
	margin:0 20px 0 0;

}

#progress span {
	display:block;
	position:absolute;
	top:0;
	z-index:10;
	width:100%;
	height:24px;
	background-repeat:no-repeat;
	background-position:left bottom;
	cursor:pointer;
}

#progress a:hover span {
	background-position:left top;
	cursor:pointer;
}

#progress li.selected span {
	background-position:left top;
}

#progress #step4 {
	margin:0;
}

#progress #step0,
#progress #step4 {
	width:70px;
}

#progress #step0 span {
	background-image:url(../.images/process-0.gif)
}

#progress #step1 span {
	background-image:url(../.images/process-1.gif)
}

#progress #step2 span {
	background-image:url(../.images/process-2.gif)
}

#progress #step3 span {
	background-image:url(../.images/process-3.gif)
}

#progress #step4 span {
	background-image:url(../.images/process-4.gif)
}

/******************************************************************************************************************
ALLOWANCE TEST
******************************************************************************************************************/

#allowancetest {
	
}

#allowancetest dl {
	margin:0 0 10px 0;
	padding:0;
}

#allowancetest dt {
	clear:both;
	margin:0 0 10px 0;
	padding:0;
	float:left;
	width:220px;
	line-height:normal;
}

#allowancetest dd {
	padding:0;
	margin:0;
	text-align:right;
}

#allowancetest h3 {
	border-top:1px solid #435695;	
	margin:10px 0;
	padding:10px 0 0 0;
}

#allowancetest input.text {
	width:60px;
}

#allowancetest ul {
	clear:both;
}

#allowanceTotal {
	margin-top:10px;
}

#allowancetest input:focus {
	background:#FFFFCC;
}


/******************************************************************************************************************
INFOSIDE
******************************************************************************************************************/

#infoside {
/*	background:#008000;*/
	float:left;
	width:160px;
	margin:10px 0 0 20px;
}

#infoside img {
	margin:0 0 10px 0;
}

#infoside h3 {
	font-size:1.0em;
	font-weight:bold;
	margin:0;
}

#infoside p {
	margin-top:0;
	padding:0 10px;
}

/******************************************************************************************************************
DEFINITION LISTS / FORMS
******************************************************************************************************************/

form {
	margin:0;
	padding:0;
}

fieldset {
	border:none;
	margin:0;
	padding:0;
}

legend {
	display:none;
}

form label {
	line-height:normal;
	float:left;
	padding:3px 0 0 0;
}

form dl {
	margin:0;
	padding:0;
}

form dt {
	clear:both;
	margin:0;
	padding:0;
	float:left;
	width:115px;
	line-height:normal;
}

form dd {
	padding:0 0 7px 0;
	margin:0;
	text-align:left;
}

form input.text,form textarea	{
	border-top:2px solid #001957;
	border-left:2px solid #001957;	
	border-right:2px solid #94ACCD;
	border-bottom:2px solid #94ACCD;
	width:146px;
	padding:2px;
	font: normal 100%/1.2em Verdana,Arial,"Helvetic Neue",Helvetica,sans-serif;
	background:#CADDEE;
}

form button,input.button,a.button,a.button:hover {
	font-family:Verdana,Arial,"Helvetic Neue",Helvetica,sans-serif;
	line-height:1;
	text-decoration:none;
	text-align:center;
	background-color:#004999;
	background-repeat:no-repeat;
	color:#FFF;
	border:none;
	padding:0;
	margin:0;
	height:20px;
	cursor:pointer;
}

form button span,
input.button span,
a.button span,
a.button:hover span {
	position:absolute;
	left:-1000em;
}

/******************************************************************************************************************
FLASH IN POPUPS
******************************************************************************************************************/

object {
	margin:0 auto;
}

/******************************************************************************************************************
DATA TABLES
******************************************************************************************************************/


.datatable {
	width: 100%;
	margin-bottom: 20px;
	border-collapse:collapse;
}

.datatable tbody td, .datatable thead th, .datatable tfoot th {
	padding: 3px;
	text-align: left;
	vertical-align: top;
}

.datatable thead th, .datatable tfoot th, .datatable .ttitle {
	font-weight: bold;
}

.datatable thead th {
	border-bottom: 1px solid #94accd;
}

.datatable tfoot th {
	border-top: 1px solid #94accd;
}

/******************************************************************************************************************
GLOSSARY
******************************************************************************************************************/

a.glossaryTerm,
a.glossaryTerm:visited {
	font-weight:normal;
	color:#FFFFCC;
	text-decoration:none !important;
	border-bottom: 1px dotted #FFFFCC;
	cursor:help;
}

.help-tooltip {
	position:	absolute;
	width:		200px; /*  WIDTH HERE */
	border:		1px Solid WindowFrame;
	background:	Infobackground;
	color:		InfoText;
	font:		StatusBar;
	font:		Status-Bar;
	padding:	3px;
	text-align:	left;
	z-index:	10000;
}


.help-tooltip a,
.help-tooltip a:hover {
	color:		blue !important;
	background:	none;
}

dl.glossary dt {
	padding:0;
	font-weight:bold;
	margin:0 0 10px 0;	
}

dl.glossary dd {
	margin:0 0 10px 0;
	padding:0 0 10px 0;
	border-bottom:1px solid #435695;
}


/******************************************************************************************************************
TAX ALLOWANCE TABLES
******************************************************************************************************************/

.taxtablebig,
.taxtablesmall {
	width: 100%;
	margin-bottom: 20px;
	border-collapse:collapse;
}

.taxtablesmall {

}

.taxtablebig th,
.taxtablesmall th  {
	padding: 5px;
	text-align:center;
	background:#004999;
}

.taxtablebig td,
.taxtablesmall td  {
	vertical-align:top;
	padding: 5px;
	text-align: left;
	width:33%;
	border:1px solid #004999;
}

.taxtablebig .col1,
.taxtablesmall .col1 {

}

/******************************************************************************************************************
TAX ALLOWANCE TABLES
******************************************************************************************************************/

#footer {
	width:750px;
	padding:0 10px;
	margin:0 auto;
}

#footer a {
	margin:0 20px 0 0;
}

/******************************************************************************************************************
TRUSTEES LIST
******************************************************************************************************************/

#trustees dt strong {
	font-size:1.2em;
}

#trustees dt {
	padding:0;
	margin:0 0 10px 0;	
}

#trustees dd {
	margin:0 0 10px 0;
	padding:0 0 10px 0;
	border-bottom:1px solid #435695;
}

/******************************************************************************************************************
MANAGEMENT TEAM
******************************************************************************************************************/

#managementteam dt strong {
	font-size:1.2em;
}

#managementteam p {
	margin-bottom:0;
}

#managementteam dt {
	padding:0;
	margin:0 0 10px 0;	
}

#managementteam dd {
	margin:0 0 10px 0;
	padding:0 0 10px 0;
	border-bottom:1px solid #435695;
}

/******************************************************************************************************************
SITEMAP
******************************************************************************************************************/

ul#sitemap ul li a {
	font-weight:normal;
}

/******************************************************************************************************************
INTERACTIVE TOOLS
******************************************************************************************************************/

#content h2.interact {
	margin:15px 0 0 0;
	line-height:1;
}

#content .interactivetoolsmall {
	clear:both;
	margin:0 10px 0 0;
	border:none;
	width:160px;
	float:left;	
}

#content .interactivetoolsmallright {
	margin:0;
	border:none;
	width:50%;
	float:left;	
}

#content .interactivetoolsmallright:after,
#content .interactivetoolsmall:after,
#content .interactivetool:after {
	content: ".";
	height:0;
	display:block;
	clear:both;
	visibility:hidden;
}

#content .interactivetoolsmallright img {
	margin:0;
	padding:0;
}

/******************************************************************************************************************
JAVASCRIPT SHOWHIDE
******************************************************************************************************************/

.showhide {
	height: 0;
	overflow: hidden;
}

.showhide h2 {
	margin-top: 1em; /* Bump heading down to stop opera displaying */
}

#trustee-elections-pages {
	margin-top: 40px;
}