/*

Structure of the Style Sheets in this site

style.css - 
This contains all of the vanilla styles, with widths set to accomodate the correct div box model.
The file is link rel'ed into the page, appearing before any other style sheet call in the code.

style2.css - 
This contains all the voice-family hacks to send alternate rules to IE 5 / 5.5 PC, then correct rules to compliant browsers. 
It is @imported from the page (not from style.css - cascade wouldn't work) since the voice-family hacks prevent CSS-P styles showing up in NN4. Using this method NN4 ignores the hacks sheet completely.

style_print - 
Contains (obviously) all of the print styles for the site. Typically this will include display: none for all of the navigation divs, setting 100% width, nice margins, and Times for the main copy, setting the H elements nicely.

*/

body
{
	margin: 0px;
	color: #000;
	background-color: #fff;
	font: normal normal normal small/120% Tahoma, Arial, Helvetica, Sans-serif;
}

p	
{
	color: #333;
	background-color: #fff;
	font-family: verdana, tahoma, sans-serif;
	margin-top: 0;
}

p.variation	
{
	color: #333;
	background-color: #fff;
	font-family: verdana, tahoma, sans-serif;
	margin-top: 0;
	margin-left: 10;
}

h1, h2, h3, h4, h5, h6		
{
	color: #333;
	background-color: #fff;
	font: normal normal bold 150%/100% verdana, tahoma, helvetica, sans-serif ;
}

#findvac h1, #findvac h2, #findvac h3, #findvac h4		
{
	color: #98b14b;
}

#mybbcjobs h1, #mybbcjobs h2, #mybbcjobs h3, #mybbcjobs h4		
{
	color: #13adb3;
}

h1
{
	font: normal normal normal 150%/100% tahoma, verdana, sans-serif;
	color: #98adc5;
	background: url(../images/h1_bg.gif) no-repeat 0 4px;
	margin: 26px 0 1em -50px;
	padding-left: 17px;
}

#mybbcjobs h1 /* these two styles for diff color squares behind h1's in 'My bbc jobs' and 'search for vacs' sections */
{
	background-image: url(../images/h1_bgmbj.gif);
}
#findvac h1
{
	background-image: url(../images/h1_bgsfj.gif);
}

h2
{
	font-size: 120%;
	margin: 1em 0 0.5em -20px;
}

h3
{
	font-size: 110%;
	margin: 0 0 0.3em 0;
	color: #53667B;
}

h4
{
	font-size: 120%;
}

a, a:visited 
{
	color: #777;
}

a:active, a:hover 
{
	color: #000;
}

strong		
{
	font-weight: bold;
}

address
{
	font: normal normal bold 100%/100% verdana, tahoma, sans-serif;
	margin: 10px;
	color: #777;
	background-color: #fff;
}

ul, ol
{
	font: normal normal normal 100%/100% verdana, tahoma, sans-serif;
	color: #333;
	background-color: #fff;
}

ul
{
	list-style-image: url(../images/bullet_copy.gif);
}


dl
{
	font: normal normal normal 100%/115% verdana, tahoma, sans-serif;
	color: #777;
	background-color: #fff;
}

dt
{
	margin: 0 0 4px -15px;
	font-weight: bold;
	color: #777;
	background-color: #fff;
}

dd
{
	margin: 0 0 20px 0;
	line-height: 120% !important;
}

/* -- BBCi Header ------------------------------------------------------------------------------------------ */
.bbcpageShadow {background-color:#828282;}
.bbcpageShadowLeft {border-left:2px solid #828282;}
.bbcpageBar {background:#999999 url(/images/v.gif) repeat-y;}
.bbcpageSearchL {background:#97ADC6 url(/images/sl.gif) no-repeat;}
.bbcpageSearch {background:#97ADC6 url(/images/st.gif) repeat-x;}
.bbcpageSearch2 {background:#97ADC6 url(/images/st.gif) repeat-x 0 0;}
.bbcpageSearchRa {background:#999999 url(/images/sra.gif) no-repeat;}
.bbcpageSearchRb {background:#999999 url(/images/srb.gif) no-repeat;}
.bbcpageBlack {background-color:#000000;}
.bbcpageGrey, .bbcpageShadowLeft {background-color:#999999;}
.bbcpageWhite,font.bbcpageWhite,a.bbcpageWhite,a.bbcpageWhite:link,a.bbcpageWhite:hover,a.bbcpageWhite:visited {color:#ffffff;text-decoration:none;font-family:verdana,arial,helvetica,sans-serif;padding:1px 4px;}

.bbcpageTopleftlink,a.bbcpageTopleftlink,a:link.bbcpageTopleftlink,a:hover.bbcpageTopleftlink,a:visited.bbcpageTopleftlink {background:##98adc5;color:#[blue];text-decoration:underline;}
.bbcpageToplefttd {background:##98adc5;color:#[green];}

	#findvac .bbcpageSearchL, #findvac .bbcpageSearch, #findvac .bbcpageSearch2, #sitemap .sfj {background-color: #98b14b;}
	
	#mybbcjobs .bbcpageSearchL, #mybbcjobs .bbcpageSearch, #mybbcjobs .bbcpageSearch2, #sitemap .mbj {background-color: #13adb3;}

/* header table - under BBCi global nav! ------------------------------------------------------------------ */

#header, #main
{
	width: 769px;
	border: 0;
	font-size: 100%;
}

#date
{
	color: #333;
	background-color: #d3d8de;
	font: normal normal normal 80%/115% arial, helvetica, sans-serif;
	padding: 17px 10px 6px 8px;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	width: 137px;
	max-width: 137px;
	height: 38px;
	min-height: 38px;
	height: expression(this.scrollHeight < 38? "38px" : "auto" );  /*IE does not read min-height. This IE only hack uses IE expressions - see http://www.svendtofte.com/code/max_width_in_ie/ Annoyingly, this use (and a further use below) causes the w3C css validator to fail the site */
}


*>html #date /* only IE5 mac */
{
	width: 157px !important;
} 

#title
{
	background-color: #97ADC6;
	padding: 8px 55px 3px 13px;
	width: 544px;
	height: 23px;
	text-align: left;
}

#findvac #title
{
	background-color: #98b14b;
}

#mybbcjobs #title
{
	background-color: #13adb3;
}

#titleurl
{
	float: right;
}

/* breadcrumbs ------------------------------------------------------------------------------------------ */

#bread
{
	color: #466f9b;
	background-color: #fff;
	font: normal normal normal 75%/100% verdana, tahoma, sans-serif;
	padding: 1px 0 1px 2px;
	height: 21px;
	width: 610px;
}

#bread a:link, #bread a:visited
{
	padding: 2px;
	text-decoration: underline;

}

#bread a:hover, #bread a:active
{
	color: #fff;
	background-color: #97ADC6;
	text-decoration: none;
}

.currantbread
{
	font-weight: bold;
}

/* banner ------------------------------------------------------------------------------ */

#maincontent, #maincontentinner
{
	width: 612px;
	vertical-align: top;
}

#bannerimage
{
	float: left;
	width: 275px;
	border-right: 2px solid #fff;
}

.flright
{
	float: right;
	text-align: left;
}

#strapsouter
{
	height: 171px;
	width: 335px;
}

#strapupper
{
	width: 300px;
	height: 119px;	
	overflow: hidden;
	vertical-align: bottom;
	font-size: 24px;
	line-height: normal;
	padding: 8px 23px 8px 8px;
	border: 2px solid #97ADC6;
	color: #97ADC6;
	background-color: #fff;
}

#findvac #strapupper, #findvac #straplower
{
	color: #98b14b;
	border-color: #98b14b;
}

#mybbcjobs #strapupper, #mybbcjobs #straplower
{
	color: #13adb3;
	border-color: #13adb3;
}

#straplower
{
	height: 18px;
	width: 315px;
	overflow: hidden;
	padding: 6px 8px;
	text-align: right;
	vertical-align: bottom;
	font-size: 15px;
	border: 2px solid #97ADC6;
	border-top: 0;
	color: #97ADC6;
	background-color: #fff;
}

/*  navigation ---------------------------------------------------------------------------------------------- */

#mainnav
{
	width: 155px;
	border: 0;
	border-right: 2px solid #fff;
	vertical-align: top;
	text-align: right;
	font-family: arial, helvetica, sans-serif;
}
/* only IE mac will see this - IE5 mac was floating divs under the next table cell - hence need to widen content cell to a min-width for this browser only */
*>html #mainnav
{
	width: 157px !important;
} 

/* mainnav -----------------------------------------------------------------------*/

#navtable
{
	padding: 0 !important;
	overflow: visible;
	float: right;
}

#navtable td
{
	overflow: visible;
	background-color: #d3d8de;
	margin: 0;
	padding: 0;	
	border-bottom: 1px solid #fff;
}


#navtable a:link, #navtable a:visited
{
	display: block;
	width: 120px;
	padding: 6px 14px 2px 8px;
	color: #333;
	background-color: transparent;
	text-decoration: none;
	text-align: left;
	overflow: visible;
	font-size: 90%;
	line-height: 110%;
}

#navtable a:hover, #navtable a:active
{
	color: #fff;
	background-color: #97ADC6;
	overflow: visible;
}

#navtable a.parent:hover, #navtable a.parent:active
{
	color: #fff;
	background: #97ADC6 url(../images/bullet_right.gif) no-repeat bottom right;
	overflow: visible;
}

.parent
{
	background: #d3d8de url(../images/bullet_right.gif) no-repeat bottom right;
}	

/* subnav - inserted in mainnav ------------------------------------------------------ */

#navtable .mainsub
{
	padding: 4px 12px 3px 26px;
	border: 0;
	width: 104px;
	background-color: #edf3fa;
}

#navtable .mainsub a:link, #navtable .mainsub a:visited
{
	color: #7d99b8;
	background-color: #edf3fa;
	text-decoration: none;
	font: normal normal bold 80%/normal arial, helvetica, sans-serif;
	padding: 0 0 0 8px;
	margin: 0;
	width: 94px;
}

*>html #navtable .mainsub a:link, *>html #navtable .mainsub a:visited /* ie5 Mac hack */
{
	font-size: 70% !important;
} 

#navtable .mainsub a:hover, #navtable .mainsub a:active
{
	color: #5a728d;
	background: #edf3fa url(../images/mainsubarrow.gif) no-repeat top left;
}

/* utility nav, foot of main nav ----------------------------------------------------------------- */

#mainfindtd, #mainmytd
{
	background: #98b14b url(../images/bullet_util.gif) no-repeat center right !important;
	border-top: 2px solid #fff;		
}

#mainnav #mainmytd
{
	background-color: #13adb3 !important;
}

/* links within utility nav */

#mainfind a:link, #mainfind a:visited, #mainmy a:link, #mainmy a:visited
{
	color: #fff;
	background-color: transparent;
	padding-top: 1px;
	padding-bottom: 2px;
	font-size: 90%;
}

#mainfind a:hover, #mainfind a:active, #mainmy a:hover, #mainmy a:active

{
	text-decoration: underline !important;
	background-color: transparent;
}

.navseparator
{
	width: 142px;
	height: 1px;
	padding: 0;
	line-height: 1px !important;
	background-color: #97ADC6 !important;
	text-align: left;
	margin: 1px 0 1px 12px;
	overflow: hidden;
}

/* secondary navigation - RHS ----------------------------------------------------------------------- */

#copyside
{
	padding-top: 26px;
	vertical-align: top;
	width: 182px;
	font: normal normal bold 90%/100% arial, helvetica, sans-serif;
	color: #53667B;
	background-color: transparent;
}

#secnav
{
	margin: 0 0 0 12px;
	width: 170px;
}

#secnav td
{
	width: 170px;
	border-bottom: 1px solid #53667B;
	padding: 0;
	height: 24px;
}

#sec0td
{
	background: transparent url(../images/bullet_sub_down.gif) no-repeat top left;
	height: 10px !important;
	line-height: 1px;
	border-bottom: 1px solid #53667B;
}

#secnav td a:link, #secnav td a:visited
{
	display: block;
	width: 154px;
	padding: 6px 8px;
	color: #53667B;
	background-color: transparent;	
	text-decoration: none;
	overflow: visible;
	font-size: 90%;
	margin: 0;
}

#secnav td a:hover, #secnav td a:active	
{
	color: #53667B;
	background-color: #e3ebf5;
	overflow: visible;
}



/* promo hooks ----------------------------------------------------------------------------------- */

#pull, .pull
{
	color: #333;
	background: #e9ecef url(../images/pull_arrow.gif) no-repeat bottom right;
	font: normal normal normal 110%/135% tahoma, verdana, helvetica, sans-serif;
	width: 170px;
	margin: 3px 0 3px 12px;
	padding: 0;
}

#PullArrowBg, .PullArrowBg
{
	background: transparent no-repeat top left;
}



#pull p, .pull p
{
	background-color: transparent;
	padding: 8px 0 0 8px;
	margin: 0;
}

#pullfoot, .pullfoot
{
	color: #4f8bca;
	text-align: right !important;
	padding: 0 0 2px 70px;
	min-height: 35px;
	height: expression(this.scrollHeight < 35? "35px" : "auto" ); /* IE does not read min-height. This IE only hack uses IE expressions - see http://www.svendtofte.com/code/max_width_in_ie/ */
	background: transparent url(../images/pullquotes/test.gif) no-repeat bottom left;
	font-size: 90%;
	font-weight: normal;
	width: 85px;
	margin: 5px 0 0 0;
}

#pullfoot a:link, #pullfoot a:visited, .pullfoot a:link, .pullfoot a:visited
{
	color: #4f8bca;
	text-decoration: none;
}
#pullfoot a:hover, #pullfoot a:active, .pullfoot a:hover, .pullfoot a:active
{
	color: #4f8bca;
	text-decoration: underline;
}

span.bigquote
{
	font-size: 125%;
	color: #69f;
}

/* main copy area ---------------------------------------------------------------- */

body
{
	margin: 0px;
	color: #000;
	background-color: #fff;
	font: normal normal normal small/120% Tahoma, Arial, Helvetica, Sans-serif;
}

.bold
{
	margin: 0px;
	color: #777;
	background-color: #fff;
	font: bold bold bold small/120% Tahoma, Arial, Helvetica, Sans-serif;
}

#copy
{
	width: 335px;
	overflow: visible;
	padding-left: 70px;
	vertical-align: top;
}

#copy a:link, #copy a:visited
{
		font-weight: bold;
		text-decoration: none;
		color: #97ADC6;
}

#copy a:hover, #copy a:active
{
		font-weight: bold;
		text-decoration: underline;
		color: #97ADC6;
		background-color: transparent;
}

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

.fullwidth
{
	width: 592px !important;
}

/* pullquotes -------------------------------------------------------- */

blockquote
{
	display: block;
	float: right;
	position: relative;
	width: 150px;
	padding: 10px;
	color: #466f9b;
	background-color: #edf3fa;
	margin: 10px -75px 10px 10px;
	font: normal normal bold 110%/115% tahoma, verdana, sans-serif;
	overflow: visible;
}

#quotefoot cite, cite a:link, cite a:visited
{
	font: normal normal normal 90%/130% tahoma, verdana, sans-serif !important;
	color: #466f9b !important;
	background-color: #edf3fa !important;
}

#quotefoot
{
	margin-top: 10px;
	color: #466f9b !important;
	background-color: #edf3fa !important;
	font-weight: normal;
	font-size: 80%;
}	

/* home page ---------------------------------------------------------------------- */

#homecopy
{
	float: left;
	display: inline;
	width: 217px;
	padding: 2px 0 0 18px;
	margin: 26px 0 0 20px;
	background: url(../images/h1_bg.gif) no-repeat 0 0;
}

#homepromos
{
	float: right;
	width: 335px;
	text-align: left;
	border-top: 2px solid #fff;
}

#homepromos a:link, #homepromos a:visited
{
	text-decoration: none;
}

#homepromos a:hover, #homepromos a:active
{
	text-decoration: underline;
}

/* footer ------------------------------------------------------------------------- */

#footer
{
	margin: 50px 0 25px;
	clear: both;
}

#footer a:link, #footer a:visited, #footer a:hover, #footer a:active
{
		font-weight: normal;
		text-decoration: underline;
}


#footer img
{
	display: block;
	float: left;
	margin-right: 10px;
}

#FootUtils
{
	padding-top: 6px;
}


/* form styles on my bbc jobs pages ------------------------------------------------- */

.myjobsform
{
	border: 1px solid #97ADC6;
	padding: 5px;
	width: 530px;
	margin-bottom: 20px;
}

.myjobsform label
{
	font-weight: bold;
	color: #777;
	background-color: #fff;
}

.myjobsform input
{
	border: 1px solid #13adb3;
	width: 175px;
	color: #000;
	background-color: #fff;
}

img.button
{
	margin-left: 12px;
}

/* work experience pages ----------------------------------------------------------- */

.WorkExp
{
	color: #777;
	background-color: #d3d8de;
	width: 330px;
	margin: 0 0 2px 0;
	padding: 0 0 15px 0;
}

.WorkExp a:link, .WorkExp a:visited
{
	color: #777 !important;
}

.WorkExp h2
{
	color: #fff;
	background-color: #97ADC6;
	font: normal normal normal 110%/100% tahoma, verdana, sans-serif;
	padding: 6px;
	border-bottom: 2px solid #fff;
	margin: 0;
}

.WorkExp p, .WorkExp ul, .WorkExp table
{
	margin: 6px 14px;
	background-color: transparent;
}

.WorkExp ul
{
	list-style: none inside none;
	margin-left: 0;
	padding-left: 0;
}

.WorkExp li
{
	list-style-type: none;
	width: 300px;
	padding-left: 10px;
	margin: 0;
	float: left;
	clear: both;
	line-height: 115%;
}

.WorkExp table
{
	width: 90%;
}

.WorkExp td
{
	padding: 0 0 5px 0;
}

.WorkExp select
{
	color: #333;
	background-color: #f2f4f5;
	border: 1px solid #97ADC6;
	font: normal normal normal 100%/100% tahoma, verdana, sans-serif;
	width: 160px;
}

p.reference
{
	margin-left: -20px;
	font-family: tahoma, verdana, sans-serif;
	font-size: 110%;
}

/* styles for WX application form --------------------*/
#wxcopy
{
	width: auto;
	overflow: visible;
	padding-left: 70px;
	vertical-align: top;
}	

#wxapphead
{
	color: #777;
	background-color: #d3d8de;
	font: normal normal normal large/normal tahoma, verdana, sans-serif;
	margin: 0;
	margin-left: -12px;
	border-bottom: 1px solid #fff;
}

#wxref
{
	float: left;
	width: 30%;
	padding: 4px;
	color: #fff;
	background-color: #97ADC6;
	border-right: 2px solid #fff;
	font-size: 70%;
}
#wxref h2
{
	margin: 0;
	color: #fff;
	background-color: #97ADC6;
	font: normal normal normal large/normal tahoma, verdana, sans-serif;
}

#wxplacement
{
	padding: 4px;
	margin: 0;
	float: right;
	width: 66%;
}

#clearer
{
	clear: both;
	border: 1px solid #fff;
	height: 0;
	background-color: #fff;
	font-size: 0px;
	padding-bottom: 16px;
}

.wxbox
{
	border: 1px solid #ccc;
	background-color: #f6f7f9;
	padding: 12px;
	margin-left: -12px;
	margin-bottom: 10px;
}

.wxbox p
{
	background-color: transparent;
	margin-bottom: 4px;
}

#wxcopy h3
{
	color: #fff;
	background-color: #97ADC6;
	padding: 4px;
	padding-bottom: 6px;
	margin-left: -12px;
	font: normal normal normal 120%/normal tahoma, verdana, sans-serif;
}

/* regional map ------------------------------------------------------------------------- */

#mapimage
{
	position: relative;
}

#mapkey
{
	width: 45%;
	border: 1px solid #666;
	padding-bottom: 10px;
	position: absolute;
}

#mapkey h3
{
	color: #fff;
	background-color: #333;
	padding: 3px;
	font: normal normal normal 100%/100% verdana, tahoma, sans-serif;
}

#mapkey p
{
	margin-left: 6px;
	margin-right: 6px;
	font: normal normal normal 80%/100% verdana, tahoma, sans-serif;
	background-color: transparent;
}

#mapkey img
{
	margin-right: 6px;
}

/* meet the team ------------------------------------------------------------------ */

.team
{
	width: 220px;
	padding: 0 0 0 113px;
	background: #999 no-repeat top left;
	margin-bottom: 4px;
	font-size: 90%;
}

#homepromos .team
{
	width: 180px;
}

.team h3
{
	color: #fff;
	background-color: #97ADC6;
	padding: 4px 10px;
	border-bottom: 2px solid #fff;
	font-weight: normal;
	margin-bottom: 0;
}

.team p
{
	background: #eeeff3 url(../images/meet/bullet.gif) no-repeat top left;
	padding: 2px 8px 4px 23px;
}

.team a:link, .team a:visited, .team a:active
{
	color: #666 !important;
	background-color: #eeeff3;
	font: normal normal normal 100%/normal tahoma, verdana, sans-serif !important;
}

.teamicons
{
	background-color: #eeeff3;
	color: #777;
	padding: 2px 8px 4px 0;
	border-bottom: 2px solid #fff;
}

.teamicons img
{
	margin: 0 4px 0 10px;
}

.teamsmall
{
	font-size: 80%;
}

/* accessibility page ------------------------------------------------------ */

table.copytab
{
	width: 340px;
	margin: 10px 7px 30px;
}

table.copytab td
{
	vertical-align: top;
	padding: 5px 7px;
	color: #777;
	background-color: #d3d8de;
	border-right: 1px solid #fff;
	border-top: 1px solid #fff;
}

caption
{
	font: normal normal bold small/normal tahoma, verdana, sans-serif;
	text-align: center;
	padding: 0 0 5px 0;
	color: #97ADC6;
	background-color: #fff;
}

kbd
{
	font-size: small;
	font-weight: bold;
}

th
{
	font: normal normal normal small/normal tahoma, verdana, sans-serif;
	color: #fff;
	background-color: #97ADC6;
	padding: 4px;
	border-right: 1px solid #fff;
	border-bottom: 2px solid #fff;
	width: 50%;
}

th.sub
{
	color: #fff;
	background-color: #69f;
	border-top: 1px solid #fff;
	text-align: left;
}

.smaller
{
	font-size: 80%;
	display: block;
}

img.access
{
	float: right; 
	margin-left: 15px;
	border: 1px solid #97ADC6;
}

.copytab p
{
	margin-bottom: 5px;
}

/* sitemap ---------------------------------------------------------------------------- */

#sitemap h3
{
	text-align: right;
}

#sitemap .team
{
	padding: 0 0 2px 0;
	width: auto;
	background-color: #eeeff3;
	border: 1px solid #fff;
	margin-bottom: 8px;
}

#sitemap ul
{
	background-color: transparent;
	padding: 0;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0;
}

#sitemap p
{
	margin-bottom: 0;
}

#sitemap ul ul
{
	padding: 2px 0 0;
}

/* benefits wheel : our culture  - our benefits ----------------------------------------------------------------- */

.note
{
	color: #f00;
	font-size: 130%;
}

#copy #wheelkey
{
	list-style-image: none;
	list-style-type: none;
}

.back
{
	text-align: right;
}

/* date area ------------------------------------------------------------------------------------------------------ */

/* these styles write in the suffix part of the date ordinal, e.g. the "rd" in 3rd and 23rd */

#st, #nd, #rd, #th
{
	display: none;
}
#o1 #st, #o21 #st, #o31 #st
{
	display: inline;
	display: inline!important;
}
#o4 #th, #o5 #th, #o6 #th, #o7 #th, #o8 #th, #o9 #th, #o10 #th, #o11 #th, #o12 #th, #o13 #th, #o14 #th,
#o15 #th, #o16 #th, #o17 #th, #o18 #th, #o19 #th, #o20 #th, #o24 #th, #o25 #th, #o26 #th, #o27 #th,
#o28 #th, #o29 #th, #o30 #th
{
	display: inline;
	display: inline!important;
}
#o2 #nd, #o22 #nd
{
	display: inline;
	display: inline!important;
}
#o3 #rd, #o23 #rd
{
	display: inline;
	display: inline!important;
}