/************************************************************************
	Title: Police service recruitment - Could You?
	Company: UK Government Home Office
	File: global.css
	
	GLOBAL CSS 
	==========
	
	Provides all global styles for the site which more specific sections 
	can be built on using the layered css technique
	
	Author:		DVA  [www.dva.co.uk] - Dan Viveiros		[danv@dva.co.uk]

	Listing Order:
	==============

	Universal
	General Structure / Layout
	Navigation Elements
	Header Elements
	Body Elements
	Footer Elements
	Forms
	Accessibility elements
	Flash float elements
	Questionaire elements

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

/***********************************************************************
	UNIVERSAL STYLES
************************************************************************/
html, body {
	margin: 0px;
	padding: 0px;
}

body#home {
	background-image: url(../assets/bodybg.gif);
	background-position: top;
	background-repeat: repeat-x;
	background-color: #5CA2D2;
}

body#internal {
	background-image: url(../assets/bodybgint.gif);
	background-position: top;
	background-repeat: repeat-x;
	background-color: #5CA2D2;
}

body#popupgun {
	background-image: url(../assets/swf/gun.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #7CABD9;
}

body#popupasbo {
	background-image: url(../assets/swf/asbo.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #7CABD9;
}

body#popupcars {
	background-image: url(../assets/swf/cars.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #7CABD9;
}

body#popupvandal {
	background-image: url(../assets/swf/vandal.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #7CABD9;
}

html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address, abbr, input, select, textarea, table, td, th {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

/***********************************************************************
	GENERAL STRUCTURE/LAYOUT
************************************************************************/
#container {
	width: 775px;
	border-left: 10px solid #5CA2D2;
	background-color: #FFFFFF;
	background-image: url(../assets/containerbg.gif);
	background-position: top right;
	background-repeat: repeat-y;
}

#wrapper {
	padding-right: 20px;
	background-image: url(../assets/wrapperbg.gif);
	background-position: top left;
	background-repeat: no-repeat;
}

#header {
	padding: 20px 0px 10px 20px;
}

#nav {
	margin-left: 200px;
	background-color: #000000;
	background-image: url(../assets/navbg.gif);
	background-position: top;
	background-repeat: repeat-x;
}

#search {
	position: absolute;
	top: 24px;
	left: 580px;
	width: 180px;
	padding-top: 3px;
}

#search p {
	margin-left: 5px;
}

#search a {
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;
}

#search label {
	display: none;
}

#search .field {
	height: 14px;
	width: 135px;
	font-size: 0.7em;
	float: left;
	margin: 0px 3px 0px 5px;
	padding: 1px 1px 1px 5px;
	color: #000000;
	border: 1px solid #FFFFFF;
	background-image: url(../assets/fieldbg.gif);
	background-position: left;
	background-repeat: repeat-x;
}

#search .button {
	float: left;	
}

#search p {
	color: #FFFFFF;
	font-size: 0.8em;
	margin-bottom: 5px;
}

#search span.large, #search span.medium, #search span.small {
	color: #FFFFFF;
	text-decoration: underline;
	display: inline;
}

#search span.large {
	font-size: 1.4em;
}

#search span.medium {
	font-size: 1.3em;
}

#search span.small {
	font-size: 1.1em;
}

/* *** START OF HOMEPAGE ONLY ELEMENTS *** */

#banner {
	padding: 10px 0px 10px 20px;
}

#mainimage1, #mainimage2, #mainimage3, #mainimage4, #mainimage5 {
	width: 490px;
	height: 21em;
	z-index: 500;
}

#mainimage1 h1, #mainimage2 h1, #mainimage3 h1, #mainimage4 h1, #mainimage5 h1 {
	position: absolute;
	top: 130px;
	font-size: 1px;
	color: #FFFFFF;
}

#mainimage1 {
	background-image: url(../assets/bannerimg1.jpg);
	background-position: top left;
	background-repeat: no-repeat;
}

#mainimage2 {
	background-image: url(../assets/bannerimg2.jpg);
	background-position: top left;
	background-repeat: no-repeat;
}

#mainimage3 {
	background-image: url(../assets/bannerimg3.jpg);
	background-position: top left;
	background-repeat: no-repeat;
}

#mainimage4 {
	background-image: url(../assets/bannerimg4.jpg);
	background-position: top left;
	background-repeat: no-repeat;
}

#mainimage5 {
	background-image: url(../assets/bannerimg5.jpg);
	background-position: top left;
	background-repeat: no-repeat;
}

#bannerfeature {
	float: right;
	width: 200px;
	padding: 10px;
	background-color: #2B6C99;
	border: 1px solid #26628A;
	background-image: url(../assets/bluecheck.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
	color: #FFFFFF;
}

#bannerfeature h1 a {
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 2px;
	color: #FFFFFF;
}

#bannerfeature h2 {
	font-size: 0.8em;
	font-weight: normal;
	margin-bottom: 20px;
	color: #F0F7FB;
}

#bannerfeature p {
	font-size: 0.7em;
	line-height: 14px;
	margin-bottom: 10px;
	color: #FFFFFF;
}

#featuretxt {
	min-height: 310px;
}

* html #featuretxt {
	height: 310px;
}

#featuretxt h3 a {
	color: #FFFFFF;
	font-size: 0.8em;
	font-weight: bold;
}

#findout {
	height: 60px;
	width: 85px;
	float: right;
	margin-top: 243px;
}

#findout a {
	display: block;
	height: 50px;
	width: 85px;
	font-size: 20px;
	background-image: url(../assets/arrowlgblk.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

#content {
	padding: 10px 0px 20px 20px;
}

/* *** END OF HOMEPAGE ONLY ELEMENTS *** */

/* *** START OF INTERNAL PAGE ONLY ELEMENTS *** */
#box {
	padding: 5px 0px 0px 0px;
}

#leftcol {
	width: 220px;
	float: left;
	padding-bottom: 20px;
	margin-bottom: 5px;
}

#rightcol {
	float: left;
	width: 535px;
}

#bannerimg {
	border: 1px solid #000000;
	height: 110px;
	padding: 0px;
	margin: 0px;
}

#featurescol {
	width: 150px;
	float: right;
	padding-bottom: 20px;
}

.fitemb {
	position: relative;
	border: 1px solid #044B7B;
	margin-bottom: 20px;
	padding: 5px 8px 8px 8px;
	background-color: #75B0D9;
	background-image: url(../assets/featurebgb.gif);
	background-position: right;
	background-repeat: repeat-y;
}

.fitemw {
	position: relative;
	border: 1px solid #044B7B;
	margin-bottom: 20px;
	padding: 5px 8px 8px 8px;
	background-color: #FFFFFF;
	background-image: url(../assets/featurebgw.gif);
	background-position: right;
	background-repeat: repeat-y;
}

.fitemb span, .fitemw span { 
	width:100%; 
	height:100%;
	position:absolute; 
	cursor:pointer; 
	background-image:url(assets/transparent.gif); 
}

* html .fitemb span, * html .fitemw span { 
	width:100%; 
	height: 8em;
	position:absolute; 
	cursor:pointer; 
	background-image:url(assets/transparent.gif); 
}

.fitemb a, .fitemw a {
	font-size: 0.7em;
	color: #000000;
	display: block;
	background-image: url(../assets/arrowsmb.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

.fitemw a {
	background-image: url(../assets/arrowsmw.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

.itemtext {
	margin-bottom: 15px;
}

.fitemb h2 {
	font-size: 1.1em;
	font-weight: normal;
	color: #FFFFFF;
}

.fitemw h2 {
	font-size: 1.1em;
	font-weight: normal;
	color: #225477;
}

#breadcrumb {
	padding: 5px 0px 5px 0px;
	height: 28px;
	width: 480px;
}

#contentint {
	padding: 0px 5px 20px 0px;
	width: 360px;
	float: left;
}

#breadcrumb ul {
	margin: 0px;
	padding: 0px;
	font-size: 0.6em;
	float: left;
}

#breadcrumb li {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: inline;
	list-style-type: none;
	color: #666666;
}

* html #breadcrumb li {
	white-space: nowrap;
	position: relative;
}

#breadcrumb li a {
	color: #A1A1A1;
	background-image: url(../assets/crumbarrow.gif);
	background-position: right;
	background-repeat: no-repeat;
	padding-right: 12px;
	margin-right: 5px;
}

#breadcrumb li a:hover {
	color: #333333;
}


/* *** END OF INTERNAL PAGE ONLY ELEMENTS *** */


#footer {
	background-image: url(../assets/footerbg.gif);
	background-position: top left;
	background-repeat: repeat-y;
}

#footerwrap {
	height: 35px;
	width: 720px;
	background-color: #C3DCEE;
	border: 1px solid #26628A;
	margin: 0px 0px 0px 30px;
	padding: 5px 5px 5px 10px;
	background-image: url(../assets/footercheck.gif);
	background-position: top right;
	background-repeat: no-repeat;
}
/***********************************************************************
	NAVIGATION
************************************************************************/
#menu ul {
	margin: 0px 0px 0px 5px;
	padding: 0px 0px 0px 0px;
	float: left;
}

#menu li {
	height: 100px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: inline;
	list-style-type: none;
}

#menu a:link, #nav a:visited {
	float: left;
	font-size: 0.9em;
	font-weight: normal;
	padding: 75px 10px 6px 10px;
	text-decoration: none;
	color: #FFFFFF;
	border-bottom: 3px solid #000000;
}

#menu a:hover {
	color: #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	background-image: url(../assets/navhover2.gif);
	background-position: top left;
	background-repeat: repeat-x;
}

#menu a:link.active, #menu a:visited.active {
	color: #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	background-image: url(../assets/navhover.gif);
	background-position: top left;
	background-repeat: repeat-x;
}

/* *** INTERNAL NAVIGATION *** */
#leftcol ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	border: none;
	width: 205px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 15px;
}

#leftcol ul li {
	margin: 0px 0px 5px 0px;
	list-style: none;
	list-style-image: none;
}

#leftcol ul li a {
	display: block;
	padding: 5px 5px 5px 20px;
	color: #000000;
	text-decoration: none;
	width: 185px;
	font-weight: bold; 
	background:url(../assets/leftnav_arrow_black.gif) no-repeat 9px 11px;
}

#leftcol ul li a.open {
	background:#5CA2D2 url(../assets/leftnav_arrow_white.gif) no-repeat 9px 11px;
	color: #FFFFFF;
}

html>body #leftcol ul li a {
	width: auto;
}

#leftcol ul li a:hover, #leftcol ul li a.open, #leftcol ul li a.active {
	background-color: #5CA2D2;
	color: #FFFFFF;
}


#leftcol ul li a.open {
/*	background-image: url(../assets/menubg.gif);
	background-position: top right;
	background-repeat: repeat-y;  */
}

/* Level two */
#leftcol ul li ul {
	list-style: none;
	margin: 5px 0px 0px 0px;
	padding: 0px;
	border: none;
	font-size: 0.9em;
}

#leftcol ul li ul li a {
	color: #225477;
	padding-left: 25px;
	background:url(../assets/leftnav_arrow_blue.gif) no-repeat 9px 11px #fff;
	width: 170px;
	font-weight: normal;
	border-left: 5px solid #FFFFFF;
}

* html #leftcol ul li ul li a {
	width: 175px;
}

#leftcol ul li ul li a:hover {
	background-color: #C3DCEE;
	color: #225477;
}

#leftcol ul li ul li a.active {
	background-color: #C3DCEE;
	color: #225477;
}

#leftcol ul li ul li ul {
	background:#F9FAFC url(../assets/leftnav_bg_fix.gif) repeat-y;
}

#leftcol ul li ul li ul li a {
	color: #555555;
	background:url(../assets/leftnav_arrow_blue.gif) no-repeat 32px 9px;
	border: none;
	padding-left: 50px;
	width: 150px;
}

#leftcol ul li ul li ul li a.active {
	background:#DAE9F2 url(../assets/leftnav_3rdlev_active.gif) repeat-y;
	color: #000000;
}

#leftcol ul li ul li ul li a.active:hover {
	background:#DAE9F2 url(../assets/leftnav_3rdlev_active.gif) repeat-y;
	}

#leftcol ul li ul li ul li a:hover {
background:#C3DCEE url(../assets/leftnav_3rdlev.gif) repeat-y;

	color: #000000;
}


/***********************************************************************
	HEADER ELEMENTS
************************************************************************/
.logo {
	float: left;
}

/***********************************************************************
	BODY ELEMENTS
************************************************************************/
/* *** START OF HOMEPAGE ONLY ELEMENTS *** */
.feature {
	position: relative;
	border: 1px solid #1A4561;
	width: 149px;
	height: 12em;
	float: left;
	margin-right: 20px;
}

.feature span { 
	width:100%; 
	height:100%; 
	position:absolute; 
	cursor:pointer; 
	background-image:url(../assets/zone.gif); 
} 

.fheader {
	height: 3.6em;
	padding: 5px;
}

.fheader a {
	display: block;
}

.fheader h2 {
	font-size: 1.4em;
	font-weight: normal;
}

.fheader h3 {
	font-size: 0.8em;
	font-weight: normal;
}

.ftext {
	margin-bottom: 15px;
	padding: 5px;
}

.ftext p {
	font-size: 0.7em;
	line-height: 1.3em;
}

.blue1 {
	background-color: #225477;
	color: #FFFFFF;
	background-image: url(../assets/arrowlgw2.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

.blue2 {
	background-color: #3273A1;
	color: #FFFFFF;
	background-image: url(../assets/arrowlgw2.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

.blue3 {
	background-color: #CCE1F0;
	color: #225477;
	background-image: url(../assets/arrowlgb2.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

.blue4 {
	background-color: #F0F7FB;
	color: #225477;
	background-image: url(../assets/arrowlgb2.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

.blue1 a, .blue2 a {
	color: #FFFFFF;
}

.blue3 a, .blue4 a {
	color: #225477;
}

.blue1 a:hover, .blue2 a:hover, .blue3 a:hover, .blue4 a:hover {
	text-decoration: none;
}
/* *** END OF HOMEPAGE ONLY ELEMENTS *** */

/* *** START OF INTERNAL PAGE TEXT STYLES *** */
#contentint h1, #txtframe h1 {
	font-size: 1.5em;
	font-weight: normal;
	color: #2B6C99;
	margin: 0px 0px 10px 0px;
}

#contentint h2, #txtframe h2 {
	font-size: 1em;
	font-weight: normal;
	color: #2B6C99;
	margin: 20px 0px 10px 0px;
}

#contentint p.sub, #txtframe p.sub {
	color: #555555;
	font-weight: normal;
	font-size: 0.9em;
	margin: 0px 0px 15px 0px;
}

#contentint h3, #txtframe h3 {
	font-size: 0.8em;
	font-weight: normal;
	color: #2B6C99;
	margin: 10px 0px 8px 0px;
}

#contentint h4, #txtframe h4 {
	font-size: 0.7em;
	font-weight: normal;
	color: #333333;
	margin: 10px 0px 8px 0px;
}

#contentint p, #txtframe p {
	font-size: 0.7em;
	margin-bottom: 8px;
	line-height: 18px;
}

#contentint a {
	color: #0A5080;
	text-decoration: underline;
}

#contentint a:hover {
	color: #5CA2D2;
	text-decoration: underline;
}

#contentint ul, #txtframe ul {
	margin: 0 0 15px 23px;
	line-height: 18px;
	color: #333333;
}

#contentint li, #txtframe li {
	margin-bottom: 5px;
	padding-left: 6px;
	/*background-image: url(../assets/bullet.gif);
	background-position: top left;
	background-repeat: no-repeat;*/
	list-style:square;
	font-size: 0.7em;
}

#contentint ul li ul, #txtframe ul li ul {
	margin-top: 5px;
}

#contentint ul li span {
	font-size: 1em;
}

#sitemap ul li {
	font-size: 0.8em;
}

#sitemap ul li ul li{
	font-size: 1em;
}

/* START OF BACK BUTTON */

#contentint a.back {
	margin-bottom: 5px;
	padding-left: 20px;
	background-image: url(../assets/back.gif);
	background-position: top left;
	background-repeat: no-repeat;
}

/* *** END OF INTERNAL PAGE TEXT STYLES *** */

/* START OF SEARCH RESULTS */

#searchresults {
	background-color: #F0F7FB;
	border: 1px solid #C3DCEE;
	color: #2B6C99;
	padding: 10px;
}

#searchresults p {
	border-bottom: 4px solid #FFFFFF;
	padding-bottom: 20px;
	margin-top: 0px;
}

#searchresults ul {
	margin-bottom: 0px;
	font-size: 1em;
}

/* END OF SEARCH RESULTS */

/***********************************************************************
	FOOTER ELEMENTS
************************************************************************/
#footerwrap ul {
	margin: 7px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	float: left;
}

#footerwrap li {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: inline;
	list-style-type: none;
	color: #225477;
	font-size: 0.9em;
}

#footerwrap a {
	color: #225477;
	display: inline;
	font-size: 0.9em;
}

/***********************************************************************
	FORMS
************************************************************************/
#problem {
	background-color: #F2F8FB;
	border: 1px solid #5CA2D2;
	padding: 2px 2px 10px 2px;
}

#problem h2 {
	background-color: #5CA2D2;
	color: #FFFFFF;
	padding: 3px;
	margin-top: 0px;
	font-weight: bold;
	width: 348px;
}

#problem h3 {
	color: #000000;
	padding: 3px;
	margin-top: 0px;
	font-weight: bold;
}

#problem h4 {
	font-weight: bold;
}

#problem h5 {
	color: #0A5080;
}

#problem label, #problem input, #problem textarea {
	font-size: 0.7em;
}

#problem textarea.large {
	width: 100%;
	height: 75px;
}

#problem textarea.small {
	width: 100%;
}

.formcontent {
	padding: 0px 15px 10px 10px;
}

.formcontent input {
	margin-right: 5px;
}

.formcontent label {
	font-size: 1em;
}

#problem .button {
	float: right;
	border: 1px solid #0A5080;
	background-color: #FFFFFF;
	padding: 3px;
	color: #0A5080;
	font-weight: bold;
}

/* *** "REQUIRED" form summary box *** */

#required p {
	color: #B22222;
	font-weight: bold;
}

#required ul {
	color: #B22222;
	font-weight: bold;
}




/***********************************************************************
	ACCESSIBILITY ELEMENTS
************************************************************************/

#accessibility {
	height: 18px;
	padding-left: 5px;
}

#accessibility span a {
   color: #000000; /* same color as background */
   text-decoration: none;
	position: absolute;
	top: -1000px;
	font-size: 0.8em;
}

#accessibility span a:active, #accessibility span a:focus {
   /* Becomes visible & underlined when user tabs to it. 
     :active pseudo-class necessary for IE 
     :focus pseudo-class necessary for Mozilla 
   */
	position: static;
   color: #FFFFFF; 
}

acronym {
	cursor: help;
	border-bottom: 1px dotted #666666;
}

/***********************************************************************
	FLASH FLOAT ELEMENTS
************************************************************************/
#flashframe {
	padding: 10px;
	background-color: #7CABD9;
}

#txtframe {
	width: 385px;
	padding: 10px;
	margin: 15px 0px 0px 195px;
	font-size: 1.2em;
}

#txtframe li a {
	color: #2B6C99;
}

#TB_closeWindow a {
	color: #FFFFFF;
	font-weight: bold;
}

/***********************************************************************
	QUESTIONAIRE ELEMENTS
************************************************************************/
#ctl00_ContentPlaceHolder_centre_problem {
	background-color: #F2F8FB;
	border: 1px solid #5CA2D2;
	padding: 0px 10px 10px 10px;
	margin-top: 10px;
}

#ctl00_ContentPlaceHolder_centre_problem span, #ctl00_ContentPlaceHolder_centre_problem input {
	font-size: 11px; 
}

#ctl00_ContentPlaceHolder_centre_problem input {
	margin-top: 10px; 
}

#ctl00_ContentPlaceHolder_centre_problem h2 {
	margin-top: 10px;
	background-color: #5CA2D2;
	color: #FFFFFF;
	padding: 3px;
}

#ctl00_ContentPlaceHolder_centre_problem label {
	padding-left: 10px;
}

/* *** Answers *** */
#ctl00_ContentPlaceHolder_centre_div_answers {
	padding: 0px 10px 10px 10px;
	font-size: 0.9em;
	margin-top: 10px
}

#ctl00_ContentPlaceHolder_centre_div_answers h2 {
	margin-top: 10px;
	background-color: #000000;
	color: #FFFFFF;
	padding: 3px;
}

#ctl00_ContentPlaceHolder_centre_div_answers strong {
	font-size: 0.9em;
	font-weight: normal;
}

#ctl00_ContentPlaceHolder_centre_div_answers p {
	font-size: 1.1em;
	margin-top: 10px;
	font-weight: bold;
	
}

#ctl00_ContentPlaceHolder_centre_div_answers p strong {
	font-size: 0.9em;
	font-weight: bold;
	color: #B22222;
}