/*  

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. 

*/

/**** Styles in this section control overall items on the page ****/

/* whole page - what is the background color */
body {
    background-color: #ffffff;
}

/* paragraph of text */
p
{ 
	FONT-FAMILY: Open Sans;
	FONT-SIZE: 1em;
	FONT-WEIGHT : normal;
	COLOR: #676767; 
}

/* bolding text */
b
{ 
	FONT-FAMILY: Open Sans;
	FONT-SIZE: 1em;
	FONT-WEIGHT : bold;
	COLOR: #676767; 
}

/* default for "span" items */
span
{ 
	FONT-FAMILY: Open Sans;
	FONT-SIZE: 1em;
	FONT-WEIGHT : normal;
	COLOR: #676767; 
}

/* default for labeled items - use for disabilty software */
label
{ 
	FONT-FAMILY: Open Sans;
	FONT-SIZE: 1em;
	FONT-WEIGHT : normal;
	COLOR: #676767; 
}

/* table header information */
TH
{ 
	FONT-FAMILY: Open Sans;
	FONT-SIZE: 1em;
	COLOR: #676767; 
}

/* table data */
TD
{ 
	FONT-FAMILY: Open Sans;
	FONT-SIZE: 1em;
	COLOR: #676767; 
}

/* Bullets in a list */
li
{ 
	FONT-FAMILY: Open Sans;
	FONT-SIZE: 1em;
	FONT-WEIGHT : normal;
	COLOR: #676767; 
}

/* Hyperlink Links */
a:link 
{
	FONT-FAMILY: Open Sans;
	FONT-SIZE: 1em;
	FONT-WEIGHT : normal;
	TEXT-DECORATION: none;
	COLOR: #888888; 
}

a:visited 
{
	FONT-FAMILY: Open Sans;
	FONT-SIZE: 1em;
	FONT-WEIGHT : normal;
	TEXT-DECORATION: none;
	COLOR: #888888;
}

a:hover 
{
	FONT-FAMILY: Open Sans;
	FONT-SIZE: 1em;
	FONT-WEIGHT : bold;
	TEXT-DECORATION: none;
	COLOR: #af554b;
}


h2
{ 
	FONT-FAMILY: Open Sans;
	FONT-SIZE: 2.000em;
	FONT-WEIGHT : bold;
	TEXT-DECORATION: none;
	COLOR: #41424E; 
}

h3
{ 
	FONT-FAMILY: Open Sans;
	FONT-SIZE: 1.625em;
	FONT-WEIGHT : bold;
	TEXT-DECORATION: none;
	COLOR: #000; 
}

h4
{ 
	FONT-FAMILY: Open Sans;
	FONT-SIZE: 1.500em;
	FONT-WEIGHT : bold;
	TEXT-DECORATION: none;
	COLOR: #000; 
}

/* 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: #676767;
}

a.ReqSort:visited
{     
	FONT-WEIGHT : bold;
	COLOR: #676767;
}

a.ReqSort:hover
{ 
 	FONT-WEIGHT : bold;
	COLOR: #676767;
}

/* Header Row for the Job Listing Table */
TH.HeaderRow
{
    FONT-WEIGHT: bold;
	Text-align: left;
    BORDER-TOP: 1px solid #676767;
    BORDER-BOTTOM: 1px solid #676767;
}

/* 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 
{
}

.CareersButton {

        display: inline-block;
        padding: 12px 18px;
        cursor: pointer;
        border-radius: 5px;
        background: #af554b;
        /* background-image: linear-gradient(to right, #d14600, #ff5f0f); */
        font-size: 1em;
        font-weight: bold;
        color: #fff;
}

/* 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: 1.250em;
    line-height: 28px;
    font-weight: bold;
}


/* 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: 1em !important;
    font-size: 1em !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: Lovelo, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.875em;
    line-height: 19.6px;
    font-weight: bold;
	padding-bottom: 42px;
    padding-top: 30px;
	color: #888;
}

/* 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 blue background*/
/*body # page-header-bg h1, html body .row .col.section-title h1 {
    font-family: Open Sans;
    font-size: 32px;
    line-height: 42px;
}
*/

/* Controls page header on colored background*/

#page-header-bg h1, body h1, body .row .col.section-title h1 {
    font-family: Montserrat;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 2.500em;
    line-height: 58px;
    font-weight: 700;
}

#page-header-bg {
    background-color: #af554b;
    background-image: none;
    color: white;
    font-family: Open Sans;
    font-size: 18px;
    /*background-color: rgb(1, 145, 200); */
    height: 93.75px;
    overflow: visible;
    margin-bottom: 0;
}


#page-header-bg h1, body h1, body .row .col.section-title h1 {
    text-transform: uppercase;
    letter-spacing: 2px;
}



/* This will set the width for all of the fields on refer friend screen.
#CRAppSSMain1_tblReferFriend * {
    width: 250px !important;
}
*/
#CRCareers1_tblTable {
    padding-top: 50px;
    padding-bottom: 30px;
    margin-left: 50px;
    width: 90%;
} 
/**************************************************************************************/
/*for screens up to 690 wide*/
@media only screen and (min-width: 1px) and (max-width: 690px) {
    .container {
        max-width: 100% !important;
    }

    .mobile-menu {
        display: block !important;
    }


    header#top, #header-outer, #logo {
        height: auto !important;
        height: 24px !important;
        margin-top: -3px !important;
        position: relative;
    }

    #header-space {
        margin-bottom: 0;
    }

    body {
        background-color: #ffffff;
        width: 100% !important;
    }

    label.CaptionStyle {
        width: 100px;
    }

    /* Controls page header on blue background*/
    body #page-header-bg h1, html body .row .col.section-title h1 {
        font-family: Open Sans;
        font-size: 32px;
        line-height: 42px;
        margin-left: 10%;
    }

    #page-header-bg {
        margin-top: 160px !important; /* allows margin above page title*/
        width: 95%;
    }

    label.CaptionStyle, label.RequiredCaptionStyle {
        FONT-SIZE: 8pt !important;
    }


    /* Limit size of form fields and tables for small screen*/
    #CRAppSSMain1_txtFirstName, #CRAppSSMain1_txtMiddleName, #CRAppSSMain1_txtLastName,
    #CRAppSSMain1_txtNickName, #CRAppSSMain1_txtHomeStreet1, #CRAppSSMain1_txtHomeStreet2 {
        max-width: 60% !important;
    }

    #CRAppSSMain1_tblDDMain, #CRCareers1_lblBrowseInstTable {
        width: 60% !important;
    }

    #CRCareers1_tblTable {
        max-width: 60% !important;
    }

    #CRCareers1_tblTableDetail, #CRCareers1_tblTableDetail2 {
        margin-left: -25px !important;
        max-width: 50% !important;
    }

    #CRCareers1_lblIntro #CRCareers1_tblPageGroup {
        max-width: 60% !important;
        width: 60% !important;
    }

    #CRCareers1_lblBrowseInstGroup, #CRCareers1_Table2 {
        max-width: 90% !important;
        width: 90% !important;
    }

    .RadUpload .ruFakeInput {
        width: 30px !important;
    }

    input#CareersKeyword {
        width: 80px !important;
    }
    /* This will set the width for all of the fields on refer friend screen. */
    #CRAppSSMain1_tblReferFriend * {
        width: 50px !important;
    }

    .HeaderRow, #CRCareers1_tblTableDetail2 > tbody > tr:nth-child(1) > th:nth-child(1) {
        width: 10% !important;
    }
}
