/*** PAGE LAYOUT STYLING ***/
.Column2Layout { width:940px; margin:auto; display:table; padding:15px 0px 25px 0px; }
.ColumnMainLeft { width:460px; float:left; }
.ColumnMainRight { width:460px; float:right; }
.Width100 { width:100%; float:left; }
.Width50 { width:220px; float:left; }
.MarginRight20 { margin-right:20px; }
.Column2Layout input.ms-long { height:30px; line-height:30px; }
.WebPartHeader { font-family:Arial, Helvetica, sans-serif; font-size:10pt; color:#69be28 !important; font-weight:bold; line-height:20px; }
.TitleMain { margin-bottom:10px;}


/*** MAP - JOB OPPORTUNITIES ***/
.MapTitle { width:100%; float:left; height:288px; }
.MapTitle h1 { width:100%; float:left; text-align:center; font-size:18pt!important; font-weight:normal!important; }
.MapContainerOuter { width:100%; float:left; margin-bottom:50px; }
.MapContainer { width:458px; height:238px; border:1px #e7e7e7 solid; top:50px; margin:auto; background: url("/Style Library/Images/CareersPortal/Map.png") no-repeat center center; position:relative; }
.MapContainer div.ItemCounter { position:absolute; padding:1px 6px 0px 6px; background-color: rgba(255, 255, 255, 0.8); border:1px rgba(106, 190, 10, 0.8) solid; font-size:7pt; font-weight:bold; }
.MapContainer div.ItemCounter a { text-decoration:none; color:#666; }
.MapContainer div.ItemCounter a:hover { text-decoration:none; color:#333; }
.MapContainer div.ItemCounterA { left:77px; top:68px; }
.MapContainer div.ItemCounterB { left:221px; top:52px; }
.MapContainer div.ItemCounterC { left:234px; top:115px; }
.MapContainer div.ItemCounterD { left:256px; top:160px; }
.MapContainer div.ItemCounterE { left:310px; top:52px; }
.MapContainer div.ItemCounterF { left:376px; top:165px; }
.MapContainer div.ItemCounterMain { position:absolute; left:155px; top:223px; padding:6px 20px 6px 8px; border:1px rgba(106, 190, 10, 0.8) solid; font-size:10pt; font-weight:bold; background:rgba(255, 255, 255, 0.8) url("/Style Library/Images/CareersPortal/Arrow_Green.png") no-repeat right center; }
.MapContainer div.ItemCounterMain span { color:#69be28; }
.MapContainer div.ItemCounterMain a { text-decoration:none; color:#666; }
.MapContainer div.ItemCounterMain a:hover { text-decoration:none; color:#333; }
.MapContainer div.ItemCounterHome { position:absolute; width:24px; height:24px; left:236px; top:152px; background: url("/Style Library/Images/CareersPortal/Icon_Home.png") no-repeat center center;  }

/*** SEARCH RESULTS ***/
.MainSearchResults { width:100%; float:left; }
h3.SearchTitleMain { font-weight:normal!important; font-size:14pt!important; width:100%; float:left; }
h3.SearchTitleMain span { color:#69be28; }
.MainSearchResults ul, .MainSearchResults li { list-style-type:none; margin:0px; padding:0px; width:100%; float:left; }
.twitterBootstrap .MainSearchResults ul { margin-left:0px!important; }
.MainSearchResults li { padding:10px 0px; border-top:1px #e1e1e3 solid; }
.MainSearchResults li h4 { margin:0px 0px 5px 0px; font-weight:normal; font-size:11pt; }
.MainSearchResults li h4 a { color:#69be28; text-decoration:none; }
.MainSearchResults li h4 a:hover { color:#69be28; text-decoration:underline; }
.SearchLocation, .JobDate, .JobActions { width:100%; float:left; padding:0px; }
.JobActions a { color:#0088cc; text-decoration:none; }
.JobActions a:hover { color:#005580; text-decoration:underline; }
.JobResultsPager { width:auto; margin:auto; padding-top:10px; display:table; }
div.JobPageIndicatior { width:100px; text-align:center; height:30px; line-height:30px; float:left; margin-top:5px; }
div.JobPageIndicatior span { color:#0088cc; }
.JobResultsPager a { width:25px; height:30px; margin:5px; background-image: url("/Style Library/Images/CareersPortal/Sprite_Pager.png"); background-repeat:no-repeat; float:left; }
.JobResultsPager a.JobBtnFirst { background-position:0px 0px; }
.JobResultsPager a.JobBtnPrevious { background-position:0px -30px; }
.JobResultsPager a.JobBtnNext { background-position:0px -60px; }
.JobResultsPager a.JobBtnLast { background-position:0px -90px; }

/*** HORIZONTAL FLYOUT MENU ***/
/* Remove the margin, padding, and list style of UL and LI components */
#menuwrapper { margin-top:0px; }
#menuwrapper ul, #menuwrapper ul li { margin:0; padding:0; list-style:none; }
 /* Float the li list to the left and apply background color and border right white and set the height to 25px. Note you can ignore the height if you do not want */
#menuwrapper ul li { float:left; background-color:#7f95db; border-right:solid 0px white; height:28px; line-height:28px; background:transparent url("/Style Library/Images/CareersPortal/Tab_Inactive1.jpg") no-repeat left center; margin-right:10px; }
 /* Apply the background hover color when user hover the mouse over of the li component */
#menuwrapper ul li:hover { position:relative; background:transparent url("/Style Library/Images/CareersPortal/Tab_Hover1.jpg") no-repeat left center; }
 /* We apply the link style */
#menuwrapper ul li a { padding:0px 10px; color:#0088cc; display:inline-block; text-decoration:none; background:transparent url("/Style Library/Images/CareersPortal/Tab_Inactive2.jpg") no-repeat right center;  text-decoration:underline; }
#menuwrapper ul li:hover a { color:#fff; background:transparent url("/Style Library/Images/CareersPortal/Tab_Hover2.jpg") no-repeat right center; text-decoration:underline; }
/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul { position:absolute; display:none; }
/* When user has hovered the li item, we show the ul list by applying display:block, note: 25px is the menu height.  */
#menuwrapper ul li:hover ul {  left:0; top:25px; display:block; border:1px #e1e1e3 solid; border-top:0px; }
/* As the parent li has float:left property, we overwrite for the submenu (level 2) to float none (normal position)  */
#menuwrapper ul li ul li { float:none; width:150px; background:#fff none; border-top:1px #e1e1e3 solid; margin-right:0px; }

/* This is overloaded menu width is to cater for the Jobs Category width which is wider than the the Job Country filter */
/* Id=JobCategory is set on the div element in JobsMenu.html */
/* Paul Niemand 2013.11.07 */
#JobsByCategory ul li {width:300px !important}

/* We change the background color for the level 2 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover{ background:#69be28 none; }
/* We style the color of level 2 links */
#menuwrapper ul li ul li a { color:#666!important; display:inline-block;background:transparent none!important; text-decoration:none!important; }
#menuwrapper ul li ul li span { float:right;padding-right:5px; font-weight:bold}
#menuwrapper ul li ul li:hover a { color:#fff!important; background:transparent none!important;  text-decoration:none; }
/**** THIRD LEVEL MENU ****/
/* We need to hide the 3rd menu, when hovering the first level menu */
#menuwrapper ul li:hover ul li ul { position:absolute; display:none; border:1px #e1e1e3 solid; border-top:0px; }
/* We show the third level menu only when they hover the second level menu parent */
#menuwrapper ul li:hover ul li:hover ul { display:block; left:150px; top:0; }
/* Change the background color for the level 3 submenu*/
#menuwrapper ul li:hover ul li:hover ul li { background:#fff none; }
/* Change the background color for the level 3 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover ul li:hover { background:#69be28 none; }
/* Change the level 3 link color */
#menuwrapper ul li:hover ul li:hover ul li a { color:#666!important; }
#menuwrapper ul li:hover ul li ul li:hover a { color:#fff!important; }

/*** Search By KeyWord MENU CLASS ***/
/*** This menuwrapperkeyword class is used by JobsMenu.html for styling the keyword element ***/
#menuwrapperkeyword { margin-top:50px; }
#menuwrapperkeyword p { padding:0px 15px; color:#0088cc; display:inline-block; text-decoration:none; }
#menuwrapperkeyword input {padding-top:0px; padding-bottom:0px}

.TextContentAlign {text-align:left}

/* Clear float */
.clear{ clear:both; }


/**** ADJUSTMENTS MADE TO SEARCH PAGE -2 2.10.2013 ****/
.FilterContainerMain { padding:10px 0px 0px 10px; width:100%; float:left; background-color:#f2f2f2; border:1px #e6e6e6 solid; }
.SearchKeyword { width:auto; float:left; margin-right:10px }
.SearchKeyword span { height:30px; line-height:30px; width:auto; float:left; margin-right:10px; }
.SearchKeyword input.SearchKeywordBox { width:120px; height:18px; line-height:18px; padding:3px 6px!important; float:left; border:1px #e6e6e6 solid; border-bottom-right-radius:0px!important; border-bottom-left-radius:0px!important; border-top-right-radius:0px!important; border-top-left-radius:0px!important;  }
.SearchKeyword a.SearchKeywordSubmitBox {  width:27px; height:27px; display:block; float:left; border:0px; cursor:pointer; background:#6abe28 url("/Style Library/Images/CareersPortal/Icon_Search.png") no-repeat center center; }
.SearchKeyword a.SearchKeywordSubmitBox:hover { text-decoration:none; background:#0088cc url("/Style Library/Images/CareersPortal/Icon_Search.png") no-repeat center center; }
#menuwrapper { width:auto;  }
.MainFilterResults, .MainResultsReturned { width:100%; float:left; }
.MainFilterText { font-size:10pt; margin-top:15px; }
.MainFilterText span { color:#0088cc; font-size:10pt; float:left; }
.MainFilterText span#DDPageRefinerList { color:#666; }
.MainFilterText span.FilterTitle { color:#666; float:left; }
.MainResultsReturned { color:#333; font-size:15pt; margin:4px 0px 15px 0px; }
.MainResultsReturned span { color:#6abe28; }
.RemoveFilters { font-size:7pt; width:auto; float:left; }

