/*
Here is a specimen customer css file for guidance
I've left in some typical values to make cust/paste/modify easier
Just search/replace the colors
*/


/*
Step #1 Set the colors for the highlights and buttons and their appearance on hover
Step #2 Design the header
Step #3 Set up the Job Ad template - check the floating Apply Now button
Step #4 Create a customercode_PostPicture.jpg for mobile header and social stream image
*/


/*
This rule does the mouseover highlights and the highlights on the hours grid
Usually it will be the same color as the buttons

Where the color is dark, the default color is white
Where the color is light, a dark color: definition will be required

For randomly rotating header images with each page load..
    #   1. create .jpg images of identical size called header_1.jpg, header_2.jpg etc
    #   2. put them all in customer image directory
    #   3. do NOT add a default background-image

... and it's done!

*/

tr.highlight,
tr.highlight td, 
li.highlight, 
.highlight, 
table.jobSearch tr.highlight,
table.jobSearch tr.highlight,
table#checklistTable label.block:hover,
table.notes table#statusboxes tr.statusbox:hover
{
    background-color: #f2f2f2;
	color: #000 !important;
}
td.hourHighlight
{
    background-color: #D6D5D5;
}

table#manageJobs tr.highlight td
{
    color:#000 ;
}

/*tr.highlight .center.detail img {
    filter: invert(100%);
}*/

.applyArrowBody /* colors the floating apply arrow on view job details*/
{
    background-color:#f2f2f2;
	color: #000 !important;
}
.applyArrowTip /* colors the floating apply arrow tip on view job details*/
{
    border-left-color: #f2f2f2;
}
/* menu bar colors */
#navbar .dropdown-toggle.active,
#navbar .dropdown-menu li.active:hover,
#navbar .dropdown-menu li.active > a,
#navbar .dropdown-menu li.active > a:hover,
#navbar.navbar-default .navbar-nav > .active > a
{
    background-color: #f2f2f2 !important; /* !important can be dropped after hack in navbar.phtml is dropped */
    /* color: #fff !important; default is #fff - !important can be dropped after hack in navbar.phtml is dropped */
}

/*
The header is comprised of two stacked tables, each of 3 cells
*/
BODY
{
    margin:0;
}
.expr3ssHeaderTop
{ 
    /*
    The top part of the header, containing the table
    */
}
.applicantLogoLeft
{

    height:105px; 
    padding-left:100px;
}

.applicantLogo
{
    display:none
}

.applicantLogoRight
{

}
.expressHeaderBottom
{

}
.applicantHeaderLeft
{
    display:none;
}

.headerDefault
{
    background-color:#f2f2f2;
    background-image: url(../images/maynepharma_images/header.jpg);
    background-repeat:no-repeat;
    background-position:left top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;    
    width:100%;
    height: 28vw;

}

.applicantHeaderRight
{
    display:none;
}

.applicantHeaderText
{
    color: #000;
    background-color:#f2f2f2;
    padding: 10px 20px;
    font: 400 22px Helvetica, sans-serif;
    left: 0;
    position: relative;
    display:inline-block;
    float:left;    
}    

a.helpIconLink
{
    position:absolute;
    top:5px;
    right:10px;
}

a.clientLoginButton
{
    position:absolute;
    right:110px;
    top:10px;
}
.defaultArrow
{
    border-left-color:#f2f2f2;
}
.defaultBackground
{
    background-color:#f2f2f2;
}
.defaultButton
{
    background-color: #f2f2f2;
    color:#000;
}

.defaultButton:hover
{
    background-color: #f2f2f2;
    color:#fff;
}

.defaultLoginButton
{
    background-color: #f2f2f2;
    color:#000;
}
div.interest:hover
{
    background-color: #f2f2f2;
    color:#D6D5D5;
}

.checklist{
    color: #000;
    background-color:#fff;
}

.interest,.defaultLoginButton:hover{
    color:#000;
    background-color: #fff;
}

.defaultLoginButton
{
    /*
    controls the appearance of the login button (positioned using a.clientLoginButton above)
    */
}

div.main
{
    /*
    contains all the content of each major page
    */
}

/*
Styling the advertisement template - contents self-explanatory?
*/

/* if using a background-image instead of template-masthead.png you must hide that image with:

table.template td.topCenter IMG
{
    display:none;
}

*/
table.template
{
    /* border:3px solid #303030;*/
}

table.template .header
{
    /*
    controls the appearance of the header
    */
}

table.template .subheader
{
    /*
    controls the appearance of the sub-header
    */
}

table.template .header input
{
    /*
    controls the appearance of the header when editing
    */
}

table.template .subheader input
{
    /*
    controls the appearance of the sub-header when editing
    */
}

#jobAdTemplate td#applyMethod 
{
    /*
    controls the footer background image
    
    FOR EXAMPLE:

    background-image: url(../images/maynepharma_images/template-footer.png);
    background-repeat:no-repeat;
    background-position:center bottom !important;
	padding-bottom: 180px !important;
	background-size: contain !important;
    */
}