/* Fixed 2 column layout template */

/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 2.3.0

INDEX
=====
Whitespace Reset 
Reset Whitespace 

Structural Div Positioning
#Wrapper
	#Header
	#Navigation
	#content-wrapper
		#content #main-content-area
		#secondaryContent
	#footer

Generic styles
Wrappers
Header
Navigation
	Custom navigation
	Sub-navigation
Content
	Page specific styles
		Homepage
			Homepage panel positioning
			Homepage more info graphic positoning
		Borough map		
		Interactive games
		Recruitment
		Volunteering
		Becoming a special
		Day in the life
		Video profiles
		Fullbody-profiles
		Profiles section
		News and events
		Recruitment and selection process
		Candidate support
	Styling crossing pages and sections
		Hide sections
		White content background

	Profiles page horozontal carousel
	Featured-links section
	Disjointed rollovers
	Jquery Accordian
		Volunteers accordian
Footer


Whitespace Reset 
----------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup,sub{vertical-align:text-top;}sub{vertical-align:text-bottom;}input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;} table {font-size:inherit;font-size:100%;}  pre,code,kbd,samp,tt {font-family:monospace; line-height:99%;}


/* Reset Whitespace 
-------------------*/
strong,th,h1,h2,h3,h4,h5,h6{ font-weight: bold; }em{font-style: italic;}ul #content li{list-style: disc;}#content ol li{list-style: decimal;}

body{
	color:#000; background:#FFF; font-family: verdana,"Trebuchet MS",clean,sans-serif; font-size: 100%;
} 


/* Structural Div Positioning
-----------------------------*/
/*margin: 0 auto; centered*/ 

#wrapper{
	width: 780px; background-color: transparent; position: relative; min-height: 897px;
}

#header{
	height: 110px;
}		
 
#navigation{
	background-color: transparent; float: left; width: 140px;  
	
	padding-top: 102px /*ffox*/ /*107px ie7*/; 
	
	margin-right: 8px;
}	

#content-wrapper{
	background-color: transparent; float: right; width: 630px;
}
 
#content{
	float: left; width: 368px;	padding-top: 65px;
} 

#content #main-content-area{
	background-color: #ECEDED; font-size: 100%; padding: 12px 10px; 
	border-left: 1px solid #87888A; border-right: 1px solid #87888A; border-top: 1px solid #87888A; border-bottom: 2px solid #000;
}

#secondaryContent{
	background-color: transparent; float: right; width: 205px; padding-top: 53px;
}
 
body.interactive-games-scenarios #secondaryContent{
	padding-top: 100px;
}

body #wrapper #content #no-flash-message{
	background-color: #ECEDED; border: 1px solid #CC0000; padding: 12px 10px; margin-top: 10px;
}

#footer{
	background-color: transparent; clear: both; height: 23px; /*position: absolute; bottom: 0; left: 0;*/ width: 760px; padding-left: 9px;
}
 
 
/* Generic styles
-----------------*/  
.hide{
	position: absolute; top: -1000em;
}

/* Clearing :note: In IE < v.7 This relies on the Holly Hack being prescent ie specific css file*/
.clear:after {
	content: "."; height: 0; visibility: hidden; display: block; clear: both;
}

strong{
	font-weight: bold;
}

.clearer{
	clear: both;
}


/* Wrappers
----------------------------*/ 
body.homepage,
body.section-specials-in-london{
	background: url(i/wrapper/homepage-bg.jpg) 0 0 no-repeat;
}

body.becoming-a-special-section{
	background: url(i/wrapper/interactive-map-bg.jpg) 0 0 no-repeat;
}

body.becoming-a-special-section{
	background: url(i/wrapper/interactive-map-bg.jpg) 0 0 no-repeat;
}

body.interactive-games-scenarios{
	background: url(i/wrapper/interactive-map-bg.jpg) 0 0 no-repeat;
}

body.meet-our-specials-section{
	background: url(i/wrapper/meet-our-specials-bg.jpg) 0 0 no-repeat;
}

body.meet-our-specials-section{
	background: url(i/wrapper/meet-our-specials-bg.jpg) 0 0 no-repeat;
}

body.day-in-the-life{
	background: url(i/wrapper/meet-our-specials-bg.jpg) 0 0 no-repeat;
}

body.news-and-events{
	background: url(i/wrapper/interactive-map-bg.jpg) 0 0 no-repeat;
}

body.volunteering{
	background: url(i/wrapper/interactive-map-bg.jpg) 0 0 no-repeat;
}


/* Header
----------------------------*/ 
#header{

}

#header #logo{
	/*height: 54px; background: transparent url(i/header/header.png) no-repeat; */
}

#header #byline{
	position:absolute; top:78px; left:26px; text-transform: uppercase;
}

#header #byline h2{
	font-size: 180%;
}

#met-careers-home{
	width: 88px; height: 45px; display: block; float: right;
}


/* Navigation	
----------------------------*/
#navigation{

}	 

#navigation li{
	margin: 0 0 4px 6px;
}

#navigation #mainnav a{
	min-height: 40px;	
}

#navigation #apply a:link, 
#navigation #apply a:visited{
	background-color: #db1800 !important; color: #E2E2E2;
}

#navigation #apply a:focus, 
#navigation #apply a:hover,
#navigation #apply a:active{
	color: #fff;
}	


#navigation a:link, 
#navigation a:visited{
	/*text-transform: uppercase;*/ padding-top: 7px; padding-left: 7px; padding-right: 7px;  background-color: #000; display: block; font-size: 0.6875em /*.75em*/; text-decoration: none; /*letter-spacing: 1px;*/ color: #DCD200; font-weight: bold;	
}

#navigation #mainnav a:link, 
#navigation #mainnav a:visited{
	min-height: 40px;
}

#navigation #mainnav a:focus, 
#navigation #mainnav a:hover,
#navigation #mainnav a:active{
	background: #000 url(i/navigation/nav-icons.gif) 100% 100% no-repeat;
}

#navigation a:focus,
#navigation a:hover,
#navigation a:active{
	color: #fff;
}

#navigation a.selected{
	background: #000 url(i/navigation/nav-icons.gif) 100% 100% no-repeat; color: #fff !important;
}


/*Custom navigation*/
#navigation #met-home li{
	border-bottom: 4px solid #CC0000;
}

#navigation #met-home li a:link,
#navigation #met-home li a:visited{
	color: #B9B9B9; min-height: 36px; padding-left: 22px; background: #000 url(i/navigation/nav-icons.gif) 0 0 no-repeat;
}

#navigation #met-home li a:focus, 
#navigation #met-home li a:hover,
#navigation #met-home li a:active{
	background-color: #000; color: #fff;
}
	
#navigation a#homepage:focus,
#navigation a#homepage:hover,
#navigation a#homepage:active{
	background: #000 url(i/navigation/nav-icons.gif) 99% -107px no-repeat;/* margin-top: 15px;*/
}

#navigation #apply li a{
	padding: 10px 0; background-color: #CC0000; text-align: center;
}
 

/* Sub-navigation
----------------------------*/
#content #sub-navigation{
	min-height: 2.25em /*was 2.5em*/; padding-top:10px;
}	 

#content #sub-navigation ul{
	margin: 0;  padding: 0;
}

#content #sub-navigation li{
	float: left; padding-right: 12px;
}

#wrapper #content #sub-navigation li.last{
	padding-right: 0px !important;
}

#content #sub-navigation a:link, 
#content #sub-navigation a:visited{
	text-decoration: none; letter-spacing: 1px; background: transparent url(i/sub-navigation/sub-passive.png) 0 9px no-repeat; color: #000; font-weight: bold; padding: 10px 6px 4px 12px;
}

#content #sub-navigation a:focus, 
#content #sub-navigation a:hover,
#content #sub-navigation a:active{
	background: transparent url(i/sub-navigation/sub-roll.png) 0 8px no-repeat;
}

#content #sub-navigation a.selected{
	background: transparent url(i/sub-navigation/sub-roll.png) 0 8px no-repeat;
}

/* Becoming a special */
body.becoming-a-special #content #main-content-area{
	padding: 10px 0;
}

body.becoming-a-special #content #main-content-area p{
	padding-left: 10px; padding-right: 10px;
}


/* Content
----------------------------*/
#content{
	font-size: .75em;
} 

#content h1{
	font-size: 2em; font-weight: normal; color: #000099; border-bottom: 6px solid #000; background: url(i/title-bg.gif) 0 0 no-repeat; padding: 9px 0 4px 37px;
}



/* SORT OUT H2 STYLING */
#content #main-content-area h2{
	padding: 5px 10px 5px 10px;
	font-size: 1.25em;
	margin:4px 0; background-color: #000; color: #fff;
}

body #content #main-content-area h2.first-heading{
	padding-top: 10px; padding-bottom: 10px;
	margin-top: 0 !important; 
}

body.borough-map #no-flash-message{
	border: 1px #CC0000 solid; padding: 5px;
}

body.borough-map p.instructions{
	text-transform: none;
}

#content h3{
	font-size: 110%; background-color: #ECEDED; padding:0.5em 0;
}

#content p,
#content ul, 
#content ol{
	padding: .25em 0; 	
}

#content ul{
	margin-left: 20px;
}

#content ol {
	margin-left: 27px;
}

#content #main-content-area ul li, 
#content #main-content-area ol li{
	list-style-type: disc;
}


#content a:link, 
#content a:active{
	text-decoration:underline;
}

#content a:focus, 
#content a:hover,
#content a:active{
	
} 

.highlight{
	color: #2322A7; font-weight: bold;
}

.instructions-more-spacing{
	padding-top: 8px !important;
}

.more-spacing{
	margin-bottom: 12px;
}

/*Page specific styles
----------------------*/

/* Homepage */
body.homepage #content #main-content-area h2{
	padding: 0 0 0.5em 0;
	font-size: 1.25em; 
	color: #000093; background-color: transparent;
}

body.homepage #content #main-content-area ul#homepage-list{
	margin-left: 0;
}

body.homepage #content #main-content-area ul#homepage-list li{
 	background: transparent url(i/content/blue-bullet.gif) 0 7px no-repeat; list-style: none; padding: 2px 0 2px 10px;
}

/* Homepage panel positioning */
body.homepage .showpanel{
	width: 168px; background-color:#ECEDED; padding:12px 10px; z-index: 15001; position: absolute; border: 1px solid #87888A;
}

body.homepage .showpanel h3{
	padding-top: 0;
}

body.homepage #process_1{
	 right:78px; top:243px; width:158px;
}

body.homepage #process_2{
	 right:18px; top:283px; width:169px;
}

body.homepage #process_3{
	 right:87px; top:385px; width:138px;
}

body.homepage #process_4{
	right:42px; top:415px; width:181px;
}

body.homepage #process_5{
	bottom:117px; right:84px; width:132px;
}

#content #processcontent div.hidden,
#active-links p a.hidden{
	display: none;
}

#content #processcontent div.showpanel,
#active-links p a.showlink{
	display: block;
}


body.homepage #active-links a.question{
	width: 28px; height: 28px; 
}

body.homepage #active-links a.question:link,
body.homepage #active-links a.question:visited{
	background: transparent url(i/content/question.gif) 0 0 no-repeat;
}

body.homepage #active-links a.question:focus,
body.homepage  #active-links a.question:hover,
body.homepage  #active-links a.question:active{
	background: transparent url(i/content/question-over.gif) 0 0 no-repeat;
}

/* Homepage more info graphic positoning */
body.homepage  #active-links span.position{
	position:absolute; z-index:15000;	
}

body.homepage #active-links span.epaulettes{
	right:78px; top:215px;
}

body.homepage #active-links span.radio{
	right:181px; top:255px;
}

body.homepage #active-links span.met-vest{
	right:87px; top:357px;
}

body.homepage #active-links span.utility-belt{
	right:217px; top:387px;
}

body.homepage #active-links span.uniform{
	right:84px; top:803px;
}

/* Borough map */
body.borough-map #content{
	min-height: 0px; padding-bottom:18px;
}

body.borough-map #borough-map-wrapper{
	 padding: 0px; position:relative; z-index:15009;
}

body.borough-map #borough-map-copy{
	background-color:#ECEDED; padding: 0px 10px 12px 10px; position:relative; z-index:15009; width: 348px;
}

/* Interactive games */
.borough-map #content #main-content-area{
	padding-top: 8px; padding-bottom: 8px;
}

body.interactive-games-scenarios #secondaryContent ul li{
	height: 111px !important;	
}


#video-links{
	padding-top: 76px;
}

body.candidate-support #content h3{
	text-transform: none; font-size: 1em; background-color: transparent;
	padding:0.5em 0;
}

body.interactive-games-scenarios #content #main-content-area{
	background-color:#ECEDED; border-bottom:2px solid #000000; padding: 0;
}

body.interactive-games-scenarios #content #main-content-area p{
	padding: .5em 10px;
}


/* Recruitment */
#content #main-content-area a#biglink{
	font-size: 1.25em; padding-top: 8px; text-decoration: none;
}

#content #main-content-area a#biglink span{
	text-decoration: underline;
}

/* Volunteering */
body.volunteering #content #main-content-area{
	border-top: 2px solid #CDC400;
}

p#met-volunteer-programme{
	font-weight: bold; padding-top: 1em;
}

body.volunteering h1{
	margin-bottom: 10px;
}

/* Becoming a special */
body.becoming-a-special-section #content,
body.volunteering #content,
body.news-and-events #content{
	width: 512px !important; 	
}

/* Day in the life */
body.day-in-the-life #content #main-content-area{
	border-top: 2px #CDC400 solid;
}

body.day-in-the-life #content #main-content-area h3{
	font-size: 110%; background-color: #ECEDED; padding:0.5em 10px;
}

body.day-in-the-life #active-links li{
	height: 111px !important;
}


/* Video profiles */
body.video #content #main-content-area p.job-title{
	font-weight: bold; padding-top: .5em; padding-bottom: .5em;
}

/* Fullbody-profiles */
#fullbody-profile{
	right:17px; top:100px; position:absolute; z-index:10000; width: 270px; height: 820px;
	background: transparent url(i/content/full-body-imgs/homepage_policewoman.png) no-repeat;
}

body.meet-our-specials #fullbody-profile{
	right: 0px;
}

#fullbody-profiles-page{
	right:0; top:100px; position:absolute; z-index:10000; width: 270px; height: 800px;
}


/* Profiles section */
body.videos #secondaryContent{
	padding-top:102px;
}

body.train #secondaryContent {
	padding-top:146px;
}


body.meet-our-specials-section #content{
	width: 410px;
}

body.meet-our-specials-section #content #main-content-area{
	width: 374px !important;	
	
}

body.profiles #content #main-content-area{
	width: 394px; padding: 0 0 0 0; border-top: 2px solid #CDC400; 
}

body.profiles #main-content-area p,
body.profiles #main-content-area dt,
body.profiles #main-content-area dd{
	padding-left: 10px; padding-right: 10px;
}


/* Meet our specials Videos page */
body.videos #content #main-content-area{
	border-top: 1px solid #87888A;
}


/* News and events */
body.news-and-events #content #main-content-area{
	padding: 0 0 12px 0; border-top: 2px #CDC400 solid; margin-top: 10px; 
}

body.news-and-events #main-content-area p{
	padding-left: 10px; padding-right: 10px;
}


/* Recruitment and selection process */
body.recruitment-and-selection-process #content #main-content-area{
	padding: 10px 0 12px 0; margin-top: 10px; 
}

body.recruitment-and-selection-process #main-content-area p{
	padding-left: 10px; padding-right: 10px;
}


/* Candidate support */
body.candidate-support #content #main-content-area{
	padding: 0 0 12px 0; border-top: 2px #CDC400 solid; margin-top: 10px; 
}

body.candidate-support #main-content-area h3,
body.candidate-support #main-content-area p{
	padding-left: 10px; padding-right: 10px;
}

body.candidate-support #main-content-area h3,
body.candidate-support #main-content-area strong{
	color: #000099;
}

body.candidate-support #content #main-content-area li{
	list-style: none;
	background:url("i/content/blue-bullet.gif") no-repeat scroll 0 7px transparent; list-style:none outside none; padding:2px 0 2px 10px;
}

body.meet-our-specials #main-content-area{
	width: 362px;
}

body.profiles #sub-navigation{
	position: relative; z-index: 10001;
}

body.videos #content #main-content-area{
	padding-top: 12px; padding-bottom: 12px;
}

body.videos #content #main-content-area p{
	padding-left: 10px; padding-right: 10px;
}


/* Styles crossing pages and sections */
body.day-in-the-life #content #main-content-area{
	min-height: 245px;
}

body.volunteering #content #main-content-area{
	padding: 0 0 10px 0;
}

body.day-in-the-life #content #main-content-area,
body.video #content #main-content-area{
	padding: 0;
}

body.video #content #main-content-area p,
body.day-in-the-life #content #main-content-area p,
body.day-in-the-life #content #main-content-area ol,
body.day-in-the-life #content #main-content-area ul,
body.volunteering #content #main-content-area dt,
body.volunteering #content #main-content-area ol,
body.volunteering #content #main-content-area ul,
body.volunteering #content #main-content-area p,
body.recruitment-and-selection-process #content #main-content-area p,
body.recruitment-and-selection-process #content #main-content-area ol,
body.recruitment-and-selection-process #content #main-content-area ul,
body.recruitment-and-selection-process #content #main-content-area h3,
body.recruitment-and-selection-process #content #main-content-area h3,
body.recruitment-and-selection-process #content #main-content-area p,
body.recruitment-and-selection-process #content #main-content-area ol,
body.recruitment-and-selection-process #content #main-content-area ul{
	padding-left: 10px; padding-right: 10px;
}

body.recruitment-and-selection-process #content #main-content-area h3{
	margin: 4px 0 0 0;
}

/*Hide sections*/
body.becoming-a-special-section #fullbody-profile,
body.becoming-a-special-section #secondaryContent,
body.volunteering #fullbody-profile,
body.volunteering #secondaryContent{
	display: none;
}

/* White content background */
body.becoming-a-special-section #content #main-content-area,
body.day-in-the-life #content #main-content-area,
body.volunteering #content #main-content-area,
body.news-and-events #content #main-content-area{
	background-color: #ECEDED; padding-bottom: 10px !important;
}

/* Profiles page horozontal carousel */
body.profiles div.show_wai{
	background: transparent url(i/content/full-body-imgs/wai_profile.png) no-repeat;
} 

body.profiles div.show_scott{
	background-image: url(i/content/full-body-imgs/scott_profile.png) !important; background-position: right top; background-repeat: no-repeat;
} 

body.profiles div.show_chris{
	background-image: url(i/content/full-body-imgs/chris_profile.png) !important; background-repeat: no-repeat;
} 

body.profiles div.show_loretta{
	background-image: url(i/content/full-body-imgs/loretta_profile.png) !important; background-repeat: no-repeat;
}

body.profiles #hotspots li a.wai,
body.profiles #hotspots li a.scott,
body.profiles #hotspots li a.chris,
body.profiles #hotspots li a.loretta{
	height: 81px; width: 109px; display: block;
}

body.profiles #hotspots li a.wai{
	background: transparent url(i/carousel/profiles/wai_text_btn.png) no-repeat; 
}

body.profiles #hotspots li a.scott{
	background: transparent url(i/carousel/profiles/scott_text_btn.png) no-repeat; 
}

body.profiles #hotspots li a.chris{
	background: transparent url(i/carousel/profiles/chris_text_btn.png) no-repeat; 
}

body.profiles #hotspots li a.loretta{
	background: transparent url(i/carousel/profiles/loretta_btn.png) no-repeat; 
}

body.profiles p.job-title{
	font-weight: bold;
}	

.prev,
.next{
	cursor: pointer; display: block;
}

body.profiles .prev{
	background: transparent url(i/carousel/horizontal-arrow-left.png) no-repeat; width: 24px; height: 27px;
}

body.profiles .next{
	background: transparent url(i/carousel/horizontal-arrow-right.png) no-repeat; width: 24px; height: 27px;
}

body.profiles #previous a.disabled{
	background-image: url(i/carousel/horizontal-arrow-left_roll.png);	
}

body.profiles #next a.disabled{
	background-image: url(i/carousel/horizontal-arrow-right_roll.png);	
}


body.day-in-the-life #secondaryContent{
	padding-top: 73px;
}

body.day-in-the-life .prev{
	background: transparent url(i/carousel/vertical-arrow-up.png) no-repeat; width: 33px; height: 28px;
}

body.day-in-the-life .next{
		background: transparent url(i/carousel/vertical-arrow-down.png) no-repeat; width: 33px; height: 28px;
}

body.day-in-the-life #previous a.disabled{
	background-image: url(i/carousel/vertical-arrow-up_roll.png);
}

body.day-in-the-life #next a.disabled{
	background-image: url(i/carousel/vertical-arrow-down_roll.png);
}


/* Featured-links section */
#featured-links{
	clear:left; float:left; z-index: 15009; position: relative; padding-top: 10px; width: 382px;
}

#featured-links #borough-maps{
	float: right; padding-top: 24px;
}


#featured-links #specials_guidance_notes{
	float: right; position:absolute; right:-50%; padding-top: 31px;
}

#featured-links #specials_guidance_notes a{
	display: block; width: 190px; height: 82px; background: transparent url(i/content/specials_guidance_notes.jpeg) no-repeat; 
}


#featured-links #specials-training{
	float: left; 
}
#featured-links #specials-training-home{
	float: left; 
}

#featured-links #borough-maps a{
	display: block; width: 190px; height: 82px; background: transparent url(i/content/london-boroughs.png) no-repeat; 
}

#featured-links #specials-training a{
	display: block; width: 182px; height: 101px; background: transparent url(i/content/video_profiles_btn.png) no-repeat; 
}

#featured-links #specials-training-home a{
	display: block; width: 182px; height: 101px; background: transparent url(i/content/video_profiles_button_b.png) no-repeat; 
}


/* Disjointed rollovers */
.disjoinlink-demo{
	position: absolute; left: 420px; top: 184px; z-index: 15000; background-color: white;
}


/* Jquery Accordian */
dl.accordian{
	
}

dl.accordian dt{
	color: #000099; text-decoration: none; font-weight: bold;  cursor: pointer; padding: .5em 0; /*padding: .25em 0;*/
}

/* Volunteers accordian */
body.volunteering #content dl.accordian dd p{
	padding-top: 0;
}


 /* Footer
----------------------------*/
#footer{
	font-size: 0.625em !important; z-index:10001; position:relative;
}

#footer #copyright{
	float: left; font-size: 100% !important; background-color: #000; color: #fff; padding: 6px .5em 5px .5em; width: 130px;
}

#footer ul{
	border-top: 1px solid #fff; background-color: #EAEAEA; float: right; font-size: 100% !important;
}

#footer ul li{ 
	background-color: #EAEAEA; float: left; padding: 0.5em 0;
}

#footer ul li a:link, 
#footer ul li a:visited{
	text-decoration: none; background-color: #EAEAEA; color: #000; font-weight: bold; padding: 0 1em;
}

#footer ul li a:focus, 
#footer ul li a:hover,	
#footer ul li a:active{
	text-decoration:underline;
}

#footer ul li a{
	border-right: 1px solid #fff; list-style: none;
}

#footer ul li.last a{
	border-right: none;
}


#adminmenus{
	display: none;
}

.scrollbox{
	overflow:auto;
	height:250px;
	margin-top:20px;
	margin-bottom:16px;
}

.botmarg li{
	margin-bottom:10px;

}

.disclaimer{
	font-size: .8em; 
	color: #000093; 
}