@charset "utf-8";
/* CSS Document */

/* ================ */
/* Default settings */
/* ================ */

/* Reset the default */
body, div, ul, li, p, span, h1, h2, h3, h4, h5 {
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;	
	outline: none;
}

a:link, a:hover, a:visited, a:active {
	text-decoration: none;
	color: #2c2c70;
}

body {
/*	background: url(../images/bg_pattern_gradient_light_blue_to_white.jpg) repeat-x;
*/
	background: #ebebeb;
	color: #2c2c70;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
}

h3 {
	color: #2c2c70;
	font-weight: bold;
	padding-left: 10px;
}

div#container {
	position: relative;
	width: 1000px;
	margin: 0 auto;
}

span.company_name {
	font-weight: bold;	
}


/* Psuedo class setting */
:focus {
	outline: none;
}

/* =========== */
/* Header area */
/* =========== */

div#header {
	background: url(../images/header_bg_graphic.jpg) top left no-repeat;
	padding-top: 10px;
}

div#header div#logo {
	margin-left: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 0px;
	background: url(../images/ebro_logo_small.png) top left no-repeat;
	width: 152px;
	height: 70px;
}

/* Shift away from screen the description of logo background */
div#header div#logo a {
	display: block;
	text-indent: -9999px;
	width: inherit; /* or set it as the same as div#logo, i.e. 152px */
	height: inherit; /* or set it as the same as div#logo, i.e. 70px */
}

div#header div#logo span.alt_span {
/* modified witht the css of "div#header div#logo a" */
/*	position: absolute;
	left: -9999px;
*/
}

div#header h1 {
	display: none;
	color: #2c2c70;
	position: absolute;	
	margin: 0;
	top: 40px;
	right: 10px;
}

div#navigationMenu {
	background: url(../images/navigationMenu_li_anchor_bg_states.jpg) top left repeat-x;
	background-color: #ddd;
	width: 1000px;
	height: 30px;
	margin-top: 20px;
}

div#navigationMenu ul {

}

div#navigationMenu ul li {
	background: url(../images/navigationMenu_li_anchor_bg_states.jpg) no-repeat top left;
	background-color: #eee;
/*	color: #ebebeb;
*/
	display: inline-block;
	top: 5px;
	list-style: none;
	font-size: 12pt;
	width: 180px;
	height: 30px;
	text-align: center;
}

div#navigationMenu ul li:hover {
	background: url(../images/navigationMenu_li_anchor_bg_states.jpg) no-repeat bottom left;
	background-color: #cc2243;
	color: #ffffff;
	cursor: pointer;
}

div#navigationMenu ul li.navigationLast {
/*	margin-right: 0;
*/
}

div#navigationMenu ul li.navigationMenu_current {
	background: url(../images/navigationMenu_li_anchor_bg_current.png) top no-repeat;
	height: 60px;
	position: relative;
	top: -10px;
	cursor: default;
}

div#navigationMenu ul li span {
	position: relative;
	top: 5px;
	color: #ebebeb;
}

div#navigationMenu ul li.navigationMenu_current span {
	color: #f0f0f0;
	cursor: default;
	top: 10px;
}


/* ================= */
/* Main content area */
/* ================= */

div#content {
/*	background-color: #ebebeb;
*/
}

/* Remove all div in content area */
div#content div.content_div {
	display: none;
}

/* Show only the current content_div in content area */
/* Syntax of multiple classes selector, but IE6 does not support */
div#content div.content_div.current {
	display: block;
	margin: 0px auto;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 960px;
	text-align: justify;
	/* This overflow property is very important to handle "float" issues */
	overflow: hidden;
}

div#content div.h3_separator_home {
	background: url(../images/red_separator.jpg) top left no-repeat;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 300px;
	height: 2px;
}

div#content div.content_div.current p {
	padding: 5px 30px;
}

/* ================================== */
/* Content specific - class landscape */
/* ================================== */

div#content div.content_div.landscape div.column_one {
	width: 100%;
	display: block;
	position: relative;
	top: 170px;
	padding-bottom: 10px;
}

div#content div.content_div.landscape div.column_two {
	width: 100%;
	display: block;
	position: relative;
	top: -260px;
}

div#content div.content_div.landscape div.content_graphic {
	width: 960px;
	height: 150px;
}



/* ================================= */
/* Content specific - class portrait */
/* ================================= */

div#content div.content_div.portrait {

}

div#content div.content_div.portrait div.column_one {
	float: left;
	width: 60%;
}

div#content div.content_div.portrait div.column_two {
	float: right;
	width: 40%;
}

div#content div.content_div.portrait div.content_graphic {
	background-color: #000;
	margin: 0px auto;
}


/* ======================= */
/* Content specific - home */
/* ======================= */

div#div_home div#div_home_graphic {
	background: url(../images/content_home_graphic.png) top no-repeat;
}

div#div_home > h3 {
	margin-top: 170px;
}

div#div_home ul {
	width: 960px;
	height: 75px;
	padding: 10px 70px;
}

div#div_home ul li {
	float: left;
	width: 400px;
	height: 25px;
	list-style: disc;
}

/* ============================ */
/* Content specific - employers */
/* ============================ */

div#content div#div_employers div.content_graphic {
	background: url(../images/handshake_350x300.png) top no-repeat;
	width: 350px;
	height: 300px;
}

/* ============================= */
/* Content specific - jobSeekers */
/* ============================= */

div#content div#div_jobSeekers div.content_graphic {
	background: url(../images/comm_bldg_portrait_240x400.png) top no-repeat;
	width: 240px;
	height: 400px;
}


/* ========================== */
/* Content specific - hotJobs */
/* ========================== */

div#content div#div_hotJobs div.column_one {
	width: 100%;
}

div#content div#div_hotJobs div.column_one div.job_category {
	margin: 10px 10px;
	font-size: 12pt;
	font-weight: bold;
}

div#content div#div_hotJobs div.column_one ul {
	margin: 2px 40px;
	font-size: 12pt;
}

div#content div#div_hotJobs div.column_one ul li {
	padding: 2px 0px;
	list-style: inside;
}

div#content div#div_hotJobs div.column_one ul li > span:hover {
	cursor: pointer;
}

div#content div#div_hotJobs div.column_one ul li > div#background_popup {
	background-color: #333;
	position: fixed;  
	_position: absolute; /* hack for internet explorer 6*/  
	top: 0px;
	left: 0px;
	z-index: 10;
	width: 100%;
	height: 100%;
}

div#content div#div_hotJobs div.column_one ul li > div#foreground_popup {
	background-color: #eeeeee;
	opacity: 1;
	position: fixed;  
	_position: absolute; /* hack for internet explorer 6*/  
	z-index: 20;
	width: 640px;
	height: 400px; /* the height is to be adjusted by javascript */
	border: 4px solid #ccc;
	padding: 4px;
	overflow: scroll;
	text-align: left;
}

div#content div#div_hotJobs div.column_one ul li > div#foreground_popup > div#popup_logo {
	background: url(../images/ebro_logo_small.png) top left no-repeat;
	position: relative;
	width: 152px;
	height: 70px;
	margin-bottom: 20px;
	text-indent: -9999px;
}

div#content div#div_hotJobs div.column_one ul li > div#foreground_popup > div#popup_close {
 	position: absolute;
	padding: 1px 2px;
	cursor: pointer;
}

div#content div#div_hotJobs div.column_one ul li div.job_popup {
/* This following property is ignored for IE9 issue with jquery fadeIn() */
/* 	display: none;
*/
}

div#content div#div_hotJobs div.column_one ul li div.job_popup > span {
 	display: inline-block;	
}

div#content div#div_hotJobs div.column_one ul li > div.enabled_popup {

}

div#content div#div_hotJobs .underline {
	text-decoration: underline;
}

div#content div#div_hotJobs .bold {
	font-weight: bold;
}

div#content div#div_hotJobs .italic {
	font-style: italic;
}

div#content div#div_hotJobs .indent {
	text-indent: 15px;
}

div#content div#div_hotJobs .job_header {
	font-weight: bold;
	font-size: 16pt;
	border-bottom: 2px solid red;
	margin-bottom: 15px;
}

div#content div#div_hotJobs .client {
	font-weight: bold;
	margin: 10px 0px;
}

div#content div#div_hotJobs .location {
	font-weight: bold;
	margin: 10px 0px;
}

div#content div#div_hotJobs .req,
div#content div#div_hotJobs .resp {
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 5px;
}

div#content div#div_hotJobs .job_post {
	text-decoration: underline;
	margin: 10px 0px;
	margin-left: 10px;
}

div#content div#div_hotJobs .job_post_detail_item {
	margin: 5px;
	margin-left: 15px;
}

div#content div#div_hotJobs .detail_item {
	margin: 5px;
	/* margin-left: 20px; */
}

div#content div#div_hotJobs .extra_1 {
	margin-top: 15px;
}

div#content div#div_hotJobs .misc_info {
	margin: 10px 0px;
}

div#content div#div_hotJobs div.column_two {
	display: none;
}



/* ============================ */
/* Content specific - contactUs */
/* ============================ */

div#content div#div_contactUs div.content_graphic {
	background: url(../images/mira_plaza_tower_a_office_location_map_380x722.jpg) top no-repeat;
	width: 380px;
	height: 722px;
}


/* =========== */
/* Footer area */
/* =========== */

div#footer {
	height: 95px;
	background: url(../images/footer_bg.jpg) bottom repeat-x;
	/* This text-align is important to center align the navigationLink div */
	text-align: center;
	color: #2c2c70;
	font-size: 10pt;
}

div#footer div#div_footer_separator {
	background: url(../images/content_bottom_separator.jpg) top repeat-x;
	height: 20px;
}

div#footer div#navigationLink {
	margin-top: 15px;
}

div#footer div#navigationLink ul {

}

div#navigationLink ul li {
	padding: 0 10px;
	text-align: center;
	display: inline-block;
	list-style: none;
	border-right: #2c2c70 solid 1px;
}

/* Remove the right border of the last <li> item */
div#navigationLink ul li.footer_navigationLast {
	border-right: none;
}

div#navigationLink ul li span {
	text-align: center;
	color: #2c2c70;
}

div#navigationLink ul li span:hover {
	background-color: #cc2243;
	color: #ffffff;
	cursor: pointer;
}

div#div_copyright {
	padding: 10px;
	padding-bottom: 5px;
}

div#div_copyright a:hover {
	color: #cc2243;
}

div#div_licence_number {
	padding-bottom: 10px;
}

/* ==== */
/* Misc */
/* ==== */

div#div_employers span#span_contactUs, div#div_jobSeekers span#span_hotJobs {
	font-weight: bold;
}

div#div_employers span#span_contactUs:hover, div#div_jobSeekers span#span_hotJobs:hover {
	cursor: pointer;
	color: #cc2243;
}