@charset "UTF-8";
/* 
	Created by: 	Jason Kavanagh
	Date:		21st March 2008
	
	TOC:
		1. defaults
		2. wrapper and masthead
		3. content
		4. mainNav
		5. footer
		6. general
*/

/* ------------------------ 1. defaults ------------------------ */

/* Zero down margin and paddin on all elements */
* {
  margin: 0;
  padding: 0;
}
body {
	background: #fff;
	font: 0.8em Arial, Helvetica, sans-serif;
	text-align: center;
}
h1 {
	font-size: 1.8em;
	color: #976daf;
	margin-bottom: 20px;
}
h2 {
	font-size: 1.4em;
	margin-bottom: 10px;
}
h3 {
	font-size: 1.2em;
	margin-bottom: 5px;
}
h4 {
	font-size: 0.9em;
	margin-bottom: 5px;
}
p {
	margin-bottom: 15px;
}
abbr, acronym {
	border: none;
}
abbr[title], acronym[title] {
	border-bottom: 1px dotted #aaa;
	cursor: help;
}
a:link, 
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
dl {
	margin-bottom: 15px;
}
dt {
	font-weight: bold;
	margin-bottom: 3px;
}
dd {
	margin-bottom: 15px;
}

.header 
{
    font-size:1.3em;
    font-weight:bold;
    padding-bottom:10px;
}


/* ------------------------ 2. wrapper and masthead ------------------------ */
#wrapper {
	min-width: 983px;
	width: 983px;
	margin: 0 auto;
	text-align: left;
	padding-bottom: 100px;
}
#masthead {
	height: 420px;
	position: relative;
}
#homepage #masthead,
#applicationsent #masthead,
#apply #masthead,
#contactus #masthead,
#emailsent #masthead,
#equal #masthead {
	background: url(../images/headers/croydon_skyline_home.jpg) no-repeat 0px 0px;
}
#theborough #masthead,
#whatcroydondo #masthead {
	background: url(../images/headers/croydon_skyline_the_borough.jpg) no-repeat 0px 0px;
}
#involved #masthead,
#whatWeNeed #masthead,
#theCulture #masthead {
	background: url(../images/headers/croydon_skyline_get_involved.jpg) no-repeat 0px 0px;
}
#theroles #masthead {
	background: url(../images/headers/croydon_skyline_the_roles.jpg) no-repeat 0px 0px;
}
#masthead li {
	position: absolute;
	list-style: none;
}
#masthead #mast_info_home,
#masthead #mast_info_applicationsent,
#masthead #mast_info_apply,
#masthead #mast_info_contactus,
#masthead #mast_info_emailsent,
#masthead #mast_info_equal {
	left: 80px;
	top: 200px;
	z-index: 20;
}
#masthead #mast_info_home a:hover,
#masthead #mast_info_applicationsent a:hover,
#masthead #mast_info_apply a:hover,
#masthead #mast_info_contactus a:hover,
#masthead #mast_info_emailsent a:hover,
#masthead #mast_info_equal a:hover {
	background: url(../images/info_boxes/info_home.png) no-repeat 0px 0px;
	filter:alpha(opacity=80);
	-moz-opacity:.80;
	opacity:.80;
}
#masthead a#info_home,
#masthead a#info_applicationsent,
#masthead a#info_apply,
#masthead a#info_contactus,
#masthead a#info_emailsent,
#masthead a#info_equal {
	display: block;
	width: 450px;
	height: 150px;
	text-decoration: none;
}
#masthead a#info_home:hover,
#masthead a#info_applicationsent:hover,
#masthead a#info_apply:hover,
#masthead a#info_contactus:hover,
#masthead a#info_emailsent:hover,
#masthead a#info_equal:hover {
	background-position: 0 0;
}
#masthead #mast_info_borough,
#masthead #mast_info_croydondo {
	left: 230px;
	top: 50px;
	z-index: 20;
}
#masthead #mast_info_borough a:hover,
#masthead #mast_info_croydondo a:hover {
	background: url(../images/info_boxes/info_borough.png) no-repeat 0px 0px;
	filter:alpha(opacity=80);
	-moz-opacity:.80;
	opacity:.80;
}
#masthead a#info_borough,
#masthead a#info_croydondo  {
	display: block;
	width: 287px;
	height: 230px;
	text-decoration: none;
}
#masthead a#info_borough:hover,
#masthead a#info_croydondo:hover {
	background-position: 0 0;
}
#masthead #mast_info_involved {
	left: 260px;
	top: 220px;
	z-index: 20;
}
#masthead #mast_info_involved a:hover {
	background: url(../images/info_boxes/info_involved.png) no-repeat 0px 0px;
	filter:alpha(opacity=80);
	-moz-opacity:.80;
	opacity:.80;
}
#masthead a#info_involved  {
	display: block;
	width: 295px;
	height: 190px;
	text-decoration: none;
}
#masthead a#info_involved:hover {
	background-position: 0 0;
}
#masthead #mast_info_roles {
	left: 230px;
	top: 160px;
	z-index: 20;
}
#masthead #mast_info_roles a:hover {
	background: url(../images/info_boxes/info_roles.png) no-repeat 0px 0px;
	filter:alpha(opacity=80);
	-moz-opacity:.80;
	opacity:.80;
}
#masthead a#info_roles  {
	display: block;
	width: 287px;
	height: 117px;
	text-decoration: none;
}
#masthead a#info_roles:hover {
	background-position: 0 0;
}
#masthead a span, 
#masthead a:visited span {
	display: none;
}

/* ------------------------ 3. content ------------------------ */
#content {
	background: url(../images/gradient_bottom.png) no-repeat 0px bottom;
	padding-bottom: 100px;
	color: #5c5a5a;
	padding-left: 32px;
	padding-right: 33px;
	line-height: 1.3em;
}
#content_nogradient {
	background: none;
	padding-bottom: 100px;
	color: #5c5a5a;
	padding-left: 32px;
	padding-right: 33px;
	line-height: 1.3em;
}
#content ul {
	margin-left: 30px;
	margin-bottom: 15px;
}
#content a:link, #content a:visited {
	color: #976daf;
}
#content #leftCopy {
	width: 415px;
	float: left;
}
#content #rightCopy {
	width: 432px;
	float: right;
}
#roleApply  #copy {
	width: 415px;
}
#content #copy {
	width: 700px;
}


/* ------------------------ 4. mainNav ------------------------ */
#mainNav {
	background: url(../images/gradient_top.png) no-repeat 0px 0px;
	padding-top: 11px;
	height: 96px;
}
#mainNav ul {
	margin-left: 22px;
}
#mainNav li {
	list-style: none;
	background: url(../images/seperator_mainNav.png) no-repeat right 0px;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 9px;
	float: left;
	height: 23px;
}
#mainNav a:link, 
#mainNav a:visited {
	color: #7f7f7f;
	display: block;
}
#mainNav a:hover {
	color: #976daf;
}
#mainNav #home {
	background: url(../images/mainNav/home.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 14px;
	width: 30px;
}
#mainNav #sel #home {
	background: url(../images/mainNav/home_hover.png) no-repeat 0px 0px;
}
#mainNav #home:hover {
	background: url(../images/mainNav/home_hover.png) no-repeat 0px 0px;
}
#mainNav #sel #home:hover {
	background: url(../images/mainNav/home.png) no-repeat 0px 0px;
}
#mainNav #croydon {
	background: url(../images/mainNav/what_croydon_do.png) no-repeat 0px 0px;
	height: 14px;
	width: 92px;
	text-indent: -9000px;
}
#mainNav #sel #croydon {
	background: url(../images/mainNav/what_croydon_do_hover.png) no-repeat 0px 0px;
}
#mainNav #croydon:hover {
	background: url(../images/mainNav/what_croydon_do_hover.png) no-repeat 0px 0px;
}
#mainNav #sel #croydon:hover {
	background: url(../images/mainNav/what_croydon_do.png) no-repeat 0px 0px;
}
#mainNav #borough {
	background: url(../images/mainNav/the_borough.png) no-repeat 0px 0px;
	height: 14px;
	width: 67px;
	text-indent: -9000px;
}
#mainNav #sel #borough {
	background: url(../images/mainNav/the_borough_hover.png) no-repeat 0px 0px;
}
#mainNav #borough:hover {
	background: url(../images/mainNav/the_borough_hover.png) no-repeat 0px 0px;
}
#mainNav #sel #borough:hover {
	background: url(../images/mainNav/the_borough.png) no-repeat 0px 0px;
}
#mainNav #involved {
	background: url(../images/mainNav/get_involved.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 14px;
	width: 65px;
}
#mainNav #sel #involved {
	background: url(../images/mainNav/get_involved_hover.png) no-repeat 0px 0px;
}
#mainNav #involved:hover {
	background: url(../images/mainNav/get_involved_hover.png) no-repeat 0px 0px;
}
#mainNav #sel #involved:hover {
	background: url(../images/mainNav/get_involved.png) no-repeat 0px 0px;
}
#mainNav #role {
	text-indent: -9000px;
	background: url(../images/mainNav/the_role.png) no-repeat 0px 0px;
	height: 14px;
	width: 46px;
}
#mainNav #sel #role {
	background: url(../images/mainNav/the_role_hover.png) no-repeat 0px 0px;
}
#mainNav #role:hover {
	background: url(../images/mainNav/the_role_hover.png) no-repeat 0px 0px;
}
#mainNav #sel #role:hover {
	background: url(../images/mainNav/the_role.png) no-repeat 0px 0px;
}
#mainNav #roles {
	text-indent: -9000px;
	background: url(../images/mainNav/the_roles.png) no-repeat 0px 0px;
	height: 14px;
	width: 52px;
}
#mainNav #sel #roles {
	background: url(../images/mainNav/the_roles_hover.png) no-repeat 0px 0px;
}
#mainNav #roles:hover {
	background: url(../images/mainNav/the_roles_hover.png) no-repeat 0px 0px;
}
#mainNav #sel #roles:hover {
	background: url(../images/mainNav/the_roles.png) no-repeat 0px 0px;
}
#mainNav #sel #subNav ul {
	margin-left: 0px;
}
#mainNav #sel #subNav li  {
	background: url(../images/seperator_dropdown.png) no-repeat 7px 15px;
	padding-top: 20px;
	padding-left: 30px;
	position: absolute;
}
#mainNav #sel #subNav #seperator {
	background: url(../images/seperator_subNav.png) no-repeat right 18px;
}
#mainNav #sel #subNav #seperator #what_we_need {
	background: url(../images/mainNav/what_we_need.png) no-repeat 0px 0px;
	left: 0px;
	top: 0px;
	height: 13px;
	width: 75px;
	text-indent: -9000px;
}

#mainNav #sel #subNav #seperator #what_we_need:hover, #mainNav #sel #subNav #seperator #what_we_needON {
	background: url(../images/mainNav/what_we_need_hover.gif) no-repeat 0px 0px;
	left: 0px;
	top: 0px;
	height: 13px;
	width: 75px;
	text-indent: -9000px;
}

#mainNav #sel #subNav #the_culture {
	background: url(../images/mainNav/the_culture.png) no-repeat 0px 0px;
	left: 125px;
	top: 20px;
	position: absolute;
	width: 61px;
	height: 13px;
	text-indent: -9000px;
}

#mainNav #sel #subNav #the_culture:hover, #mainNav #sel #subNav #the_cultureON {
	background: url(../images/mainNav/the_culture_hover.gif) no-repeat 0px 0px;
	left: 125px;
	top: 20px;
	position: absolute;
	width: 61px;
	height: 13px;
	text-indent: -9000px;
}
#mainNav #sel #subNav #structure {
	background: url(../images/mainNav/our_structure.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 13px;
	width: 71px;
}
#mainNav #sel #subNav #whatcroydon {
	background: url(../images/mainNav/what_croydon_do.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 13px;
	width: 92px;
}
#mainNav #sel #subNav #whatcroydon:hover, #mainNav #sel #subNav #whatcroydonON {
	background: url(../images/mainNav/what_croydon_do_hover.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 13px;
	width: 92px;
}
#mainNav #sel #subNav #apply {
	background: url(../images/mainNav/apply.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 13px;
	width: 30px;
}
#mainNav .noseperator {
	background: url(none);
}


/* ------------------------ 7. footer ------------------------ */
#footer {
	padding-top: 10px;
	text-align: center;
}
#footer ul {
}
#footer li {
	display: inline;
	background: url(../images/seperator_subNav.png) no-repeat right 0px;
	padding-right: 10px;
	padding-left: 5px;
}
#footer a:link, #footer a:visited {
	color: #c2bac6;
}
#footer a:hover {
}
/* End hide from IE-mac */		
#footer .last {
	background: url(none);
}


/* ------------------------ 6. general ------------------------ */
.clearfix:after {
  content: ".";
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}
.clearfix {
  display: inline-block; /* Fixes IE/Mac */
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
#mainImage {
	float: right;
	margin-left: 15px;
}
#mainImage2 {
	float: right;
	margin-left: 15px;
	margin-top: -20px;
}
#homepage h1 {
	background: url(../images/page_titles/croydon_council.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 28px;
	width: 201px;
}
#theborough h1 {
	background: url(../images/page_titles/the_borough.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 28px;
	width: 153px;
}
#whatcroydondo h1 {
	background: url(../images/page_titles/what_croydon_do.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 28px;
	width: 201px;
}
#ourStructure h1 {
	background: url(../images/page_titles/our_structure.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 28px;
	width: 201px;
}
#involved h1 {
	background: url(../images/page_titles/get_involved.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 28px;
	width: 201px;
}
#whatWeNeed h1 {
	background: url(../images/page_titles/what_we_need.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 28px;
	width: 201px;
}
#theCulture h1 {
	background: url(../images/page_titles/the_culture.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 28px;
	width: 201px;
}
#therole h1 {
	background: url(../images/page_titles/the_role.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 28px;
	width: 201px;
}
#theroles h1 {
	background: url(../images/page_titles/the_roles.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 28px;
	width: 112px;
}
#roleApply h1 {
	background: url(../images/page_titles/apply.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 28px;
	width: 90px;
}
#equal h1 {
	background: url(../images/page_titles/equal_opps.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 28px;
	width: 201px;
}
#contactus h1 {
	background: url(../images/page_titles/contact_us.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 28px;
	width: 201px;
}
#croydongov h1 {
	background: url(../images/page_titles/croydon_gov.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 28px;
	width: 201px;
}
#applicationsent h1 {
	background: url(../images/page_titles/application_sent.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 28px;
	width: 378px;
}
#emailsent h1 {
	background: url(../images/page_titles/comment_sent.png) no-repeat 0px 0px;
	text-indent: -9000px;
	height: 28px;
	width: 333px;
}
#content input {
	background: #f6f3f8;
	border: 1px solid #d7c7e4;
	height: 20px;
	clear: right;
	margin-bottom: 10px;
}
#content textarea {
	background: #f6f3f8;
	border: 1px solid #d7c7e4;
	margin-bottom: 10px;
}
#content  #cv, #content #equalOpps {
	background: #fff;
	border: 1px solid #fff;
}
#content #mandatory {
	color: #976daf;
}
#content #submit {
	background: url(../images/send.png) no-repeat 0px 0px;
	height: 23px;
	width: 86px;
}
#content #submit:hover {
	cursor: pointer;
}
#applyButton {
	background: url(../images/btn_apply.png) no-repeat 0px 0px;
	display: block;
	height: 23px;
	width: 86px;
	text-indent: -9000px;
}
#content #joblistings {
	margin-bottom: 40px;
}
.frmlabel {
	float: left;
	width: 250px;
	height: 25px;
	display: block;
}

.formrow #txtAddress1,
.formrow #txtAddress2, 
.formrow #txtAddress3,
.formrow #txtPostCode,
.formrow #txtemail,
.formrow #txtName, 
.formrow #txtJobTitle,
.formrow #txtTelephone {width:233px;}