/*  

Styles in this css control the Careers.aspx page.  
The Careers.aspx page is displayed for the job browsing, searching and description portion of the careers site.


Styles build upon themselves.  The first build the rule and the subsequent rules overwrite the previous settings. So, if you have a "rule" for a link, the additional rules for links in the css are there for exceptions. The styles in this sheet are defined in that manner.  Additional attributes can be added to the style but are not done in the stock file to avoid any conflict or confusion. 

To replace the blue text or buttons - find and replace 5a636e
To replace the grey text - find and replace 282828
To replace the grey background in headers - find and replace dcdcdc
To replace the light grey background of the alternating rows in tables - find and replace f1f1f1
To replace white with another color - find and replace ffffff

*/

/**** Styles in this section control overall items on the page ****/

/* whole page - what is the background color */
body {
    background-color: #ffffff;
	FONT-FAMILY: Verdana, sans-serif;
	FONT-SIZE: 1em;
	FONT-WEIGHT : normal;
	COLOR: #282828;
	
}

/* paragraph of text */
p
{ 
}

/* bolding text */
b
{ 
	FONT-WEIGHT : bold;
}

/* default for "span" items */
span
{ 
}

/* default for labeled items - use for disabilty software */
label
{ 
}

/* forces the table to take up the full space available on the screen */
table
{
	width:100%;
}

/* table header information */
TH
{ 
}

/* table data */
TD
{ 
	FONT-SIZE: 1em; 
}

/* Bullets in a list */
li
{ 
	list-style-type: circle;
}

/* Headers */
h2
{ 
	FONT-SIZE: 1.5em; 
}

h3
{ 
	FONT-SIZE: 1.25em;
}

/* Hyperlink Links */
a:link 
{
	COLOR: #5a636e;
	TEXT-DECORATION: none;
}

a:visited 
{
	COLOR: #5a636e;
	TEXT-DECORATION: none;
}

a:hover 
{
	COLOR: #5a636e;
	TEXT-DECORATION: none;
}

/* Featured Job Links */
a.HotJobsStyle:link 
{ 
}

a.HotJobsStyle:visited
{ 
}

a.HotJobsStyle:hover
{ 
}

/* "Apply" links - use for links to the benefits, application and job searching */
a.ApplyNowStyle:link 
{ 
}

a.ApplyNowStyle:visited
{ 
}

a.ApplyNowStyle:hover
{ 
}

/* Job Title Link to the Job Description */
a.JobLink:link 
{ 
}

a.JobLink:visited 
{
}

a.JobLink:hover
{ 
}

/* Table Headers on the Job Listing Table */
a.ReqSort:link 
{    
	FONT-WEIGHT : bold;
	COLOR: #282828;
}

a.ReqSort:visited
{     
	FONT-WEIGHT : bold;
	COLOR: #282828;
}

a.ReqSort:hover
{ 
 	FONT-WEIGHT : bold;
	COLOR: #282828;
}

/* Header Row for the Job Listing Table */
TH.HeaderRow
{
    FONT-WEIGHT: bold;
	Text-align: left;
    BORDER-TOP: 1px solid #282828;
    BORDER-BOTTOM: 1px solid #282828;
}

/* Main Row for the Job Listing Table */
TD.MainRow
{
    BACKGROUND-COLOR: white;
}

/* Alternating Row for the Job Listing Table */
TD.AltRow
{ 
    BACKGROUND-COLOR: #f1f1f1;
}

/* Job Title on the job description page */
TD.HeaderStyle 
{
    FONT-WEIGHT: bold;
    text-transform: uppercase;
}

/* Sections titles on the job description page */
TD.JDHeaderStyle
{
     FONT-WEIGHT: bold;
}

/* Alternating Row for the Job Listing Table */
TD.CaptionStyle
{
    FONT-WEIGHT: bold;
}

/* Caption for the Additional Information on the Job Description Page */
span.CaptionStyle
{
    FONT-WEIGHT: bold;
}

/* body of the Job Description */
TD.MainBodyText
{   
}

/* body of the job description */
span.MainBodyText 
{
}

/* controls overall width of the page. Making 100% moves the logo, header and wording to the far edges*/
.container {
    max-width: 95%;
    margin: 0 auto;
    position: relative;
}

/* not sure this is needed - would appear to overwrite items already defined 

body h3, .row .col h3, .toggle h3 a, .ascend #respond h3, .ascend h3#comments, .woocommerce ul.products li.product.text_on_hover h3 {
    font-family: Lovelo, sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 20px;
    line-height: 28px;
    font-weight: bold;
}*/

/**** Styles in this section control the header of the page ****/

/* sf menu is the menu under the logo at the top of the screen.  Removing this will make the menu items appear as bullets */
.sf-menu li {
    float: left;
    line-height: 12px !important;
    font-size: .75em !important;
    position: relative;
}

.sf-menu li {
    float: left;
    position: relative;
}

.sf-menu a {
    margin: 0 1px;
}

.sf-menu, .sf-menu * {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    z-index: 10;
    padding: 4px;
}

/* These are to style and position the menu under the logo the 
-menu is link inside a bullet inside a link container inside a navigation */
header#top nav > ul > li > a {
    font-family: Verdana, sans-serif;
    text-transform: uppercase;
	font-size: 1em;
	color: #282828;
	font-weight: bold;
	line-height: 1em;
	padding-bottom: 2.143em;
    padding-top: 1.531em;
    letter-spacing: 0.051em; 
}

/* controls if the menu will be on the right or left of the screen
- The items in the list start from whichever side is picked (first in the list is first and then second, and then last) moving to the middle)
- Making the navigation "left" moves the wording in the header out by that distance
- Has to be seperate because this rule handles the navigation that isn't a hyperlink ("a") and controls the area above and below the actual menu items */
header#top nav ul li {
    float: right;
}

header#top #logo img {
    max-height: 100px;
    text-indent: -9999px;
    max-width: none;
    width: auto;
    transition: opacity 0.4s ease;
}

/* Controls page header on colored background*/
#page-header-bg h1, body h1, body .row .col.section-title h1 {
    text-transform: uppercase;
    letter-spacing: .102em;
    font-size: 2.5em;
    line-height: 58px;
    font-weight: 700;
	padding-left: 5%;
}

#page-header-bg {
    background-color: #4a4347;
    background-image: none;
    color: white;
    /*background-color: rgb(1, 145, 200); */
    height: 93.75px;
    overflow: visibile;
    margin-bottom: 0;
	letter-spacing: 2px;
}
/* formatting for the search boxes
- lst is the content in the box
- label is the caption above the box */
#lstSBox1
{
	width:100%;
	FONT-FAMILY: Verdana, sans-serif;
	FONT-SIZE: 1em;
	FONT-WEIGHT : normal;
	COLOR: #282828;
}

label.labelSBox1
{
	FONT-FAMILY: Verdana, sans-serif;
	FONT-SIZE: 1em;
	FONT-WEIGHT : bold;
	COLOR: #282828;
}

#lstSBox2
{
	width:100%;
	FONT-FAMILY: Verdana, sans-serif;
	FONT-SIZE: 1em;
	FONT-WEIGHT : normal;
	COLOR: #282828;
}

label.labelSBox2
{
	FONT-WEIGHT : bold;
}

#lstSBox3
{
	width:100%;
	FONT-FAMILY: Verdana, sans-serif;
	FONT-SIZE: 1em;
	FONT-WEIGHT : normal;
	COLOR: #282828;
}

label.labelSBox3
{
	FONT-WEIGHT : bold;
}

/* formatting for the keyword search box */
input#CareersKeyword
{
	width:75%;
}

/* formatting for the caption for KeyWord Search*/
label.CaptionStyle
{
	FONT-WEIGHT: bold;
}

/* formatting for the SEARCH, APPLY NOW and REFER A FRIEND buttons */
.CareersButton {

    display: inline-block;
    padding: 12px 18px;
    cursor: pointer;
    border-radius: 5px;
    background: #5a636e;
    /* background-image: linear-gradient(to right, #d14600, #ff5f0f); */
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

/* formatting for the copyright line */

#copyright
{
	FONT-SIZE: 0.7em;
}