/*
========================================================================
Filename:		j4l.css
Date Created:	2009-06-19
Description:	Jobs for London CSS stylesheet
Site:			london.gov.uk/jobsforlondon (?)
Author:			Matt Richards (matt.richards@london.gov.uk)
========================================================================
*/
 

/* Jobs for London styles
--------------------------------------------------------------------- */
.component img.nomarg {
	margin-right: 0px;
}
#j4l .component select.narrow {
	float: left;
	width: 50px;
}
#j4l .pageHeader h1 a {
	font-size: 0.5em;
	font-weight: bold;
	color: #ffffff;
}
#j4l .twocolumn-wrapper-even {
	clear:both;
	float:left;
	width:100%;
	background-color: #ffffff;
	/* margin-bottom: 6px; */
}
#j4l .twocolumn-wrapper-even .col1 {
	float: left;
	clear: right;
	width: 287px;
}
#j4l .twocolumn-wrapper-even .col2 {
	float: left;
	clear: right;
	width: 286px;
	margin-left: 6px;
}
#j4l .twocolumn-wrapper-even .col2 .companies {
	padding: 0px 8px 0px 8px;
}
#j4l .twocolumn-wrapper-even .col2 .companies ul {
	list-style-type: none;
	margin: 0;
	padding: 0px 0px 5px 0px;
}
#j4l .twocolumn-wrapper-even .col2 .companies li {
	float: none;
	display: block;
	width: 270px;
	margin: 5px 0px 0px 0px;
	padding: 0px 0px 5px 0px;
	border-bottom: 1px dashed #cccccc;
}
#j4l .twocolumn-wrapper-even .col2 .companies li img {
	display: none;
}
#j4l .twocolumn-wrapper-even .col2 .companies li p {
	margin-bottom: 5px;
	height: auto;
	/*
	background-image:url(../images/icons/link_red.gif);
	background-position:0 0.4em;
	background-repeat:no-repeat;
	padding-left:12px;
	*/
	padding-left: 5px;
}
#j4l .twocolumn-wrapper-even .col2 .companies li p a {
	font-weight: bold;
}
#j4l .twocolumn-wrapper-even .col2 .companies ul.links {
	border-bottom: 0px;
	border-top: 0px;
	width: 100%;
	padding-bottom: 0px;
}
#j4l .twocolumn-wrapper-even .col2 .companies ul.links li {
	border-bottom: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}
#j4l .twocolumn-wrapper-even .col2 .companies ul.links li p {
	padding-left: 12px;
	margin-bottom: 0px;
}
/* Related jobs */
#j4l .tabular_data ul.header {
	background-color:#ffffff;
}
#j4l #pagecontentwrapper .lists ul.row li div.listtitle {
	float: left;
	padding: 0px 2px 10px 5px;
	width: 175px;
}
#j4l #pagecontentwrapper .lists ul.header li div.listtitle {
	width: 155px;
}
#j4l #pagecontentwrapper .lists ul.row li div.listsalary {
	float: left;
	padding: 0px 5px 10px 2px;
	width: 82px;
	text-align: right;
}
#j4l #pagecontentwrapper .lists ul.header li div.listsalary {
	width: 102px;
}
#j4l #pagecontentwrapper .lists ul.row li div.listtitle h3, #j4l #pagecontentwrapper .lists ul.row li div.listsalary h3 {
	font-weight: bold;
	font-size: 1em;
	margin-bottom: 0px;
	color: #283a41;
}
/* See all jobs page */
#j4l #pagecontentwrapper .see-all .lists ul.row li div.listtitle {
	width: 285px;
}
#j4l #pagecontentwrapper .see-all .lists ul.header li div.listtitle {
	width: 265px;
}
/* See all companies page */
#j4l #pagecontentwrapper .see-all-companies .lists ul.row li div.listtitle, #j4l #pagecontentwrapper .see-all-companies .lists ul.header li div.listtitle {
	width: 374px;
}
#j4l #pagecontentwrapper .lists ul.row {
	border-bottom: 1px dashed #cccccc;
	margin-bottom: 3px;
}
#j4l #pagecontentwrapper .lists ul.header {
	border-bottom: 0px;
}
#j4l #pagecontentwrapper .lists {
	margin-bottom: 0px;
}
#j4l #pagecontentwrapper .lists ul.links li {
	margin: 5px 8px 0 0;
}
#j4l #pagecontentwrapper .lists ul.links li p {
	margin-bottom: 0px;
}
/* Related jobs right hand panel */
#j4l .col2 .component ul li {
	float: left;
	width: 100%;
}
#j4l .col2 .component ul.events li {
	padding: 0 0 5px;
	margin-bottom: 5px;
	border-bottom: 1px dashed #cccccc;
}
#j4l .col2 .component ul.events li.vevent-header {
	display: none;
}
#j4l .col2 .component ul.events li p {
	margin-bottom: 0px;
}
#j4l .col2 .component ul.events li p.desc {
	width: 100%;
}
/* See all page */
#j4l .col2 .component .companies ul.events li p.desc {
	width: 100%;
}
#j4l .col2 .component ul.events li p.amount {
	width: 100%;
}
#j4l .col2 .component ul.events li p.amount span {
	display: inline;
}
/* Three column component */
#j4l .related-items {
	background-color: transparent;
	border: 0px;
	margin: 7px 1px 1px 1px;
	background-image: url(../images/j4l/backgrounds/related_items_bg.png);
	background-repeat: no-repeat;
	padding:10px 6px 10px 10px;
}
#j4l .threecolumn-wrapper {
	width: 563px;
	float: left;
	clear: both;
	background-image: url(../images/j4l/backgrounds/3col_bg.gif);
	background-repeat: repeat-y;
	border-top: 6px solid #3e4e54;
	border-bottom: 6px solid #3e4e54;
}
#j4l .threecolumn-wrapper .col1 {
	float: left;
	width: 170px;
	padding-left: 12px;
	padding-right: 6px;
}
#j4l .threecolumn-wrapper .col2 {
	float: left;
	width: 170px;
	padding-left: 12px;
	padding-right: 6px;
}
#j4l .threecolumn-wrapper .col3 {
	float: left;
	width: 163px;
	padding-left: 12px;
	padding-right: 12px;
}
#j4l .threecolumn-wrapper h2, #j4l .threecolumn-wrapper p, #j4l .threecolumn-wrapper span {
	color: #ffffff;
}
#j4l .threecolumn-wrapper p a:link, #j4l .threecolumn-wrapper p a:visited, #j4l .threecolumn-wrapper p a:hover, #j4l .threecolumn-wrapper p a:focus, #j4l .threecolumn-wrapper p a:active {
	color: #a5cf10;
}


.littlepaddingbottom {
	padding-bottom: 6px;
}

#j4l .twocolumn-wrapper .col2 .toolbox .image {
	display: none;
}
#j4l .twocolumn-wrapper-even .col1 ol li, #j4l .col1 ol li {
	font-weight: bold;
	font-size: 0.8em;
}
#j4l .twocolumn-wrapper-even .col1 ol li h2 {
	text-transform: none;
}
#j4l .twocolumn-wrapper-even .col1 ol li p, #j4l .col1 ol li p {
	font-weight: normal;
	font-size: 0.9em;
}


#j4l #pagecontentwrapper .pageHeader {
	background-color: #99cc00;
	background-image: url(../images/j4l/backgrounds/pageHeader_bg.gif);
	background-repeat: repeat-x;
	border:1px solid #99cc33;
}
#j4l #pagecontentwrapper .pageHeader h1 {
	margin-bottom: 6px;
	color: #003300;
}
/* Occupation profile */
#j4l .job-profile .col1 {
	float: left;
	width: 140px;
	margin-right: 8px;
	clear: none;
	padding-top: 8px;
}
#j4l .job-profile .col2 {
	float: left;
	width: 233px;
	clear: right;
	margin: 0px;
	padding-top: 8px;
}
#j4l .job-profile .col1 img {
	margin: 0px;
	border: 0px;
}
#j4l .job-profile .col2 .float-wrapper {
	margin-bottom: 20px;
}
#j4l .job-profile .col2 .float-wrapper ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#j4l .job-profile .col2 .float-wrapper ul li {
	width: 100%;
	float: left;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	clear: both;
	margin-bottom: 10px;
}
#j4l .job-profile .col2 .float-wrapper ul li .col1 {
	display: none;
}
#j4l .job-profile .col2 .float-wrapper ul li .col2 {
	float: left;
	width: 233px;
	clear: right;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 0px;
}
#j4l .job-profile .col2 h2 {
	text-transform: none;
	padding-bottom: 16px;
}
#j4l .job-profile .col2 h2.button {
	height: 35px;
	line-height: 35px;
	background-image: url(../images/j4l/backgrounds/your_next_steps_bg.gif);
	background-repeat: no-repeat;
	padding-left: 10px;
}
#j4l .job-profile .col2 h2.button a:link, #j4l .job-profile .col2 h2.button a:visited, #j4l .job-profile .col2 h2.button a:hover, #j4l .job-profile .col2 h2.button a:focus, #j4l .job-profile .col2 h2.button a:active {
	color: #003300;
	text-transform: uppercase;
	text-decoration: none;
}
#j4l .job-profile .col2 .col2 h3 {
	margin-bottom: 0px;
	font-size: 1.1em;
}
#j4l .toolbox {
	background-color: #eaeaea;
}
/* Landing page */
#j4l .landing-page .landing-form-left {
	float: left;
	display: inline;
	margin: 0px 0px 10px 0px;
	width: 261px;
	border-right: 1px dashed #cccccc;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
#j4l .landing-page .landing-form-right {
	float: left;
	display: inline;
	margin: 0px 0px 10px 0px;
	width: 262px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
#j4l .landing-page .subcomponent .landing-form-left h2 {
	text-transform: none;
	margin-bottom: 25px;
}
#j4l .landing-page .landing-form {
	float: left;
	width: 100%;
	background-color: #99cc00;
	background-image: url(../images/j4l/backgrounds/pageHeader_bg.gif);
	background-repeat: repeat-x;
	line-height: 52px;
	height: 52px;
	margin-bottom: 100px;
}
#j4l .landing-page .landing-form h1, #j4l .landing-page .landing-form label {
	font-size: 1.5em;
	float: left;
	padding: 0px 5px 0px 5px;
	color: #003300;
	font-weight: normal;
}
#j4l .landing-page .landing-form input.textInput {
	float: left;
	margin-top: 16px;
	border: 1px solid #6c900a;
	width: 115px;
	padding: 2px;
}
#j4l .landing-page .landing-form input.textButton {
	margin-top: 16px;
	margin-left: 10px;
	float: left;
	background-color: #003300;
	color: #ffffff;
	padding: 2px;
	font-weight: bold;
}
#j4l .landing-page .landing-form-right h2 {
	color: #666666;
}
#j4l .landing-page .landing-form-right p {
	
}
#j4l #pagecontentwrapper .component .subcomponent h2 {
	text-transform: none;
}
#j4l .component .divider {
	border-bottom: 1px dashed #cccccc;
}
/* Fix for list text not being contained in P tags */
#j4l .component li {
	font-size: 0.75em;
}
#j4l .component li p {
	font-size: 100%;
}
/* Multiple nested lists */
#j4l .component .sitemap li {
	font-size: 0.75em;
}
#j4l .component .sitemap li li {
	font-size: 1em;
}
#j4l .component .sitemap li li li {
	font-size: 1em;
}
/* Background styles
--------------------------------------------------------------------- */
html body#j4l {
	background-color: #283a41;
	background-image: url(../images/j4l/backgrounds/j4l_tile.gif);
	color: #FFFFFF;
}
body#j4l #outer-wrapper {
	background-image:url(../images/j4l/backgrounds/j4l_bg.jpg);
	background-repeat:no-repeat;
}

/* Search button
--------------------------------------------------------------------- */
body#j4l #quicksearch input.submitbtn {
	
}

/* Left nav styles
--------------------------------------------------------------------- */
body#j4l #secondary-nav, body#j4l #sub-nav, body#j4l #browse, body#j4l #sub-sub-nav {
	margin-top: 0px;
}
body#j4l #nav ul li {
	background-image:url(../images/generic/leftnav_bg.png);
}
body#j4l #nav li div {
	background-image:url(../images/generic/leftnav_main_bg.png);
	background-repeat:repeat;
}
#nav li div p {
	font-size: 1.2em;
}
body#j4l #nav li div p a {
	color:#ffffff;
}
body#j4l #nav a:hover {
	text-decoration: underline;
}
body#j4l #nav a {
	text-decoration: none;
}
body#j4l #nav li div p.up {
	background-image: url(../images/generic/nav_up_icon.png);
	background-position: 100% 0.35em;
	padding-left: 0px;
}

/* Left sub-nav styles
--------------------------------------------------------------------- */
body#j4l #sub-nav li div {
	background-image: url(../images/generic/leftnav_main_bg.png);
	background-repeat: repeat;
	padding: 8px 15px 8px 10px;
}
body#j4l #sub-nav ul {
	padding: 13px 0 27px 0;
	margin-top: 1px;
	background-image: url(../images/generic/leftnav_bg.png);
	background-repeat: repeat;
}
body#j4l #leftcol #secondary-nav li.active, body#j4l #leftcol #sub-nav li.active, body#j4l #leftcol #browse li.active {
	border-bottom:1px dashed #ffffff;
	border-top:1px dashed #ffffff;
	background-image:url(../images/j4l/backgrounds/j4l_tile.gif) !important;
}
body#j4l #secondary-nav ul li.active p, body#j4l #sub-nav ul li.active p, body#j4l #browse ul li.active p, body#j4l #sub-sub-nav ul li.active p {
	background-image:url(../images/streettrees/secondarynav_icon.gif);
}
body#j4l #sub-nav li.active a:link, body#j4l #sub-nav li.active a:visited, body#j4l #sub-nav li.active a:hover, body#j4l #sub-nav li.active a:focus, body#j4l #sub-nav li.active a:active {
	color:#ffffff;
}
#j4l #pagecontentwrapper .component h2.component-heading span,
#j4l #pagecontentwrapper .component h2.component-heading_long span,
#j4l #pagecontentwrapper .component h2.component-heading_longest span,
#j4l #pagecontentwrapper .component h2.component-heading_medium span,
#j4l #pagecontentwrapper .col1 .component h2.component-heading span,
#j4l #pagecontentwrapper .col1 .component h2.component-heading_long span,
#j4l #pagecontentwrapper .col1 .component h2.component-heading_longest span,
#j4l #pagecontentwrapper .col1 .component h2.component-heading_medium span, 
#j4l #pagecontentwrapper .col_expanded .component h2.component-heading span,
#j4l #pagecontentwrapper .col_expanded .component h2.component-heading_long span,
#j4l #pagecontentwrapper .col_expanded .component h2.component-heading_longest span,
#j4l #pagecontentwrapper .col_expanded .component h2.component-heading_medium span,
#j4l #pagecontentwrapper .col2 .component h2.component-heading span,
#j4l #pagecontentwrapper .col2 .component h2.component-heading_long span,
#j4l #pagecontentwrapper .col2 .component h2.component-heading_longest span,
#j4l #pagecontentwrapper .col2 .component h2.component-heading_medium span {
	background-color: #283a41;
	color: #ccff00;
}
/* Component styles
--------------------------------------------------------------------- */
body#j4l #pagecontentwrapper .col2 .component h2.component-heading span {
	/* background-color: #172F00; */
}
.component .page-ownership p {
	margin: 10px 12px 0px 12px;
}