/* Careers pages */
#careers_text_and_banner {
	margin-right:350px;
}
#careers_text {
	margin:0pt -1px 0px;
	width:100%;
	z-index:4;
}
#careers_text h3 {
	margin-bottom:5px;
	color:#aa332f;
	font-size:1.2em;
	font-weight:bold;
}
#careers_banner {
	float:right;
	left:1px;
	margin-right:-350px;
	margin-top:1.9em;
	width:350px;
	z-index:5;
}
#careers_banner img {
	padding:0;
}
#careers_banner p {
	margin-bottom:0px;
	font-family:'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
	line-height:1.1em;
}
#careers_banner .video, #careers_banner .quote, #careers_banner .title {
	margin-left:27px;
	margin-bottom:0px;
}
#careers_banner .video {
	width:320px;
	height:180px;
}
#careers_banner .video a {
	border-bottom: none;
	outline: none;
}
#careers_banner .quote p {
	color:#ffffff;
}
#careers_banner .title p {
	color: #aa332f;
}
#careers_banner .quote {
	margin-top:3px;
	width:300px;
	padding: 10px;
	background-color:#aa332f;
}
#careers_banner .title {
	margin-top:3px;
	width:300px;
	padding: 10px;
	background-color:#dbdbdb;
}
/* Recruitment horizontal banner */
#careers_page_top_banner {
	height:180px;
	margin-bottom:15px;
	background: url("/images/careers/banner_top.jpg") no-repeat scroll 356px 0px transparent;
}

.video img, #careers_page_top_banner img {
	padding:0;
}

.video a {
	border-bottom: none;
	outline: none;
}

#careers_page_top_banner .red_box, #careers_page_top_banner .video, #careers_page_top_banner .quote {
	position:relative; /* IE needs this to show float */
	float:left;
	text-align:left;
}
#careers_page_top_banner .red_box {
	width:30px;
	height:180px;
	background-color:#aa332f;
	margin-right:3px;
}
#careers_page_top_banner .video a {
	border-bottom: none;
	outline: none;
}
#careers_page_top_banner .video {
	margin-right:3px;
	height:180px;
	width:320px;
}
#careers_page_top_banner .quote p {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 320px;
	margin-bottom:0;
	color:#aa332f;
}
#careers_page_top_banner .quote {
	text-align:left;
	height:160px;
	padding:10px;
}

/* Original careers.css from here down */
#careers_home_banner{
	background:url("/images/careers/banner_home.jpg") no-repeat scroll 0 0 transparent;
	clear:both;
	font-size:0;
	height:245px;
	line-height:0;
	margin-bottom:20px;
}

#careers_page_banner{
	clear:both;
	font-size:0;
	height:163px;
	line-height:0;
	margin-bottom:20px;
}

#careers_profile_image {
	margin-left:10px;
	margin-bottom:8px;
	float:right;	
}

.careers_profile_box {
    float: left;
    display: inline;
    margin-right:1px;
    width:139px;
    height:120px;
}

#center .careers_profile_box img {
    margin-bottom:1px;
}

#center .careers_profile_box p {
    /* border-top:6px #9e0000 solid; */
    border-top:6px #aa332f solid;
    padding-left:6px;
    font-size:0.85em;
}

.careers_profile_box_dept {
    font-weight:bold;
    color:#9e0000;
    margin-bottom:5px;
}

#careers_dept_profiles {
    float: right;
    display: inline;
    padding:0 0 5px 15px;
    width:233px;
}

#center .careers_dept_profile_box img {
    margin:0;
    float:left;
    padding:0;
}

#center .careers_dept_profile_box {
    border-top:1px #e7e7e7 solid;
    font-size:0.9em;
    background-color:#f5f5f5;
/*    height:34px; */
    vertical-align:top;
}

#center .careers_dept_profile_box a {
    border-bottom: none !important;
    outline: none;
}
 
#center .careers_dept_profile_name {
    margin:3px 0 0 45px;
    font-size:1.0em;
}


@media only screen and (max-width: 865px) {
	/* This is an example of how you can treat images responsively */
	#careers_home_banner {
		background: url("/images/careers/banner_home_image.jpg") no-repeat scroll 0 0 transparent;
		padding-top: 180px;
		height: auto;
		font-size: 100%;
		line-height: 1.5;
	}
	#careers_home_banner div.caption { padding:10px; background-color:#aa332f; color:#fff; }
	#careers_home_banner div.caption p { margin-bottom:0; }
	#careers_home_banner div.caption strong { font-size:1.6em; font-weight:normal; }
}

#container #careers_text_and_banner .column { float:left; }

/* Damien 5Jun14 - Added these 800 and 480px breakpoints specifically for search page folding. */
@media screen and (max-width: 600px) {

	#container #careers_text_and_banner .column { float:none; }
	
	#careers_text_and_banner { margin-right:0; }
	#careers_banner { width:100%; left:auto; }
	#careers_banner .video,
		#careers_banner .quote,
		#careers_banner .title { margin-left:0; }
	#careers_banner .video,
		#careers_banner .quote,
		#careers_banner .title { width:auto; height:auto; }
	#careers_banner .video img { width:100%; height:auto; }
	.careers_profile_box_dept { font-size:1.4em; margin-bottom:1.5em; }
	.careers_profile_box { width:100%; height:auto; margin-bottom:1.5em; }
	#center .careers_profile_box > a {
		float:left;
		width:45%;
		max-width:280px;
		margin-right:1em;
		border-bottom:none;
		text-decoration:none;
	}
	#center .careers_profile_box > a img { width:100%; }
	#center .careers_profile_box p { padding-top:.5em; padding-left:0; font-size:1em; line-height:1.5; }

}


/* Responsive code for career pages */
/* Juan - June 4th - 2014 */

/* Breakpoint for smartphones in landscape mode and low resolution
 tablets */
/* @media screen  and (min-width: 476px) and (max-width: 600px) { */
@media screen and (max-width: 600px) {
	#careers_page_top_banner .red_box {
            width: 5%;
        }
        #careers_page_top_banner .quote p   {
            width: 6em;
        }
        #careers_page_top_banner .quote p  br {
            display: none;
        }
}


/* Breakpoint for smartphones. It changes slightly the design
to make the image fit on a tiny screens*/

@media screen and (max-width: 475px) {

	#careers_page_top_banner {
		height: 250px;
		width: 100%;
		max-width: 310px;
		background: none;
		background-color: #eee;
		margin-bottom: 15px;
	}
	#careers_page_top_banner .red_box { display:none; }

	#careers_page_top_banner .video {
 		background-color:#aa332f;
		margin-right: 0px;
		height: auto;
		max-width: 310px;
		width: 100%;
	}

	/* .video img, #careers_page_top_banner img { */
	#careers_page_top_banner img {
		background-color: #fff;
		width: 100%;
		max-width: 310px;
		min-width: 270px;
		/* height: 100%; */
		margin-bottom: 0px;
	}


	#careers_page_top_banner .quote p {
		position: initial;
		margin-bottom: 10px;
		width: 80%;
		color:#aa332f;
		padding-left: 20px;
		font-size: 0.95em;
		max-width: 290px;
	}
	#careers_page_top_banner .quote p br {
		display: none;
	}
	#careers_page_top_banner .quote {
		position: initial;
		text-align:left;
		padding:10px;
		width: 95%;
		height: 30px;
		clear: both;
		margin-bottom: 10px;
	}

	#careers_dept_profiles {
		float: none;
		display: inline;
		padding: 0 0 5px 5px;
		width: 233px;
	}

}