﻿/* Override master page */    
#pgct
{
    width: 100%;
}

#bdft
{
    min-width: 960px;
}

#pgft
{
    max-height: 85%;    /* Fix for footer not showing up at the very bottom on longer screens*/
    max-width: 1180px;
}

#pgftr img
{
    margin-right: 25px;
}

/* Media Queries */
/*---------------------
 * Global - These are dependent on properties in the old new_style_v2.css
 * new_style_v2.css must be included BEFORE these queries
 */
@media only screen and (max-width: 985px)
{
    /* Disable webkit text size adjust (iOS) */
	html
	{
		-webkit-text-size-adjust: none;
	}
	
    #headerLogo, .siteChange
    {
        margin-left:20px;
    }

    .loginstatus, #ctl00_ctl00_UCPageFooter_imgEmersonIcon, .mucr
    {
        margin-right:20px;
    }

    #pgftl span, #ftrFbLink
    {
        margin-left:20px;
    }
}
@media only screen and (max-width:  850px)
{
    #pgftcr
    {
        width:50%;
        margin: 20px 0px 0px 0px;
        font-size: 9px;
    }
    #pgftl, #pgftr
    {
        width: 25%;
    }
    #pgftcr li
    {
        display: list-item;
        text-align: center;
        list-style: none;
        border: none;
        margin-left:0;
        margin-right:0;
    }
    
}
@media only screen and (max-width: 800px)
{
    
}
@media only screen and (max-width: 630px)
{
    #pgftcr
    {
        line-height: 1.3;
        margin-top: 25px;
    }
    #pgftCopyFull
    {
        display: none;
    }
    #pgftCopyCondensed
    {
        display: block;
    }
}
@media only screen and (max-width: 570px)
{
    .mucr
    {
        padding:0px;
        margin-left:25px;
    }

    .mucrFix
    {
        margin-top:25px;
    }

    .mucr ul
    {
        margin: 0px;
        margin-top:10px;
        padding-top:2px;
    }
    
    .mucr ul li
    {
        display: list-item;
        border: none;
        line-height: 1.2;
    }
    
    .mucr ul li a
    {
        line-height: 1;
        height: auto;
        padding: 0px;
        margin: 0px;
    }

    .toHideOnSmall
    {
        display: none;
    }
}

@media only screen and (max-width: 500px)
{
    #pgftcr
    {
        width: 35%;
    }
    .toHideOnSmall
    {
        display: none;
    }

    #pgftl,#pgftr
    {
        width: 32.5%;
    }
}
@media only screen and (max-width: 450px)
{
    #pgft a
    {
        padding: 0px;
    }

    #pgftcr
    {
        font-size: 8px;
    }
    #pgftl
    {
        font-size: 8px;
    }

    #pgftl img
    {
        width: 25px;
    }
}
@media only screen and (max-width: 400px)
{
    #pgftl img
    {
        width: 20px;
        height: 20px;
    }
    #pgftr img
    {
        width: 70px;
        height: 30px;
    }
    .toHideOnReallySmall
    {
        display: none;
    }
}
@media only screen and (max-width: 340px)
{
    #pgftcr
    {
        width: 40%;
    }
    .switchSiteText
    {
        display: none;
    }
    .toHideOnReallySmall
    {
        display: none;
    }

    #pgftl,#pgftr
    {
        width: 30%;
    }

    #ucLoginJobHome_tbCompanyAlias, #ucLoginJobHome_tbJobCode
    {
        width: 50px !important;
    }

    #top-bar
    {
       padding-right: 12px;
    }
    #pgftl span
    {
        font-size: 7px;
    }
}
@media only screen and (max-width: 300px)
{
    #pgftcr
    {
        width: 40%;
        line-height: 1.4;
        font-size: 10px;
    }
    #pgftr img
    {
        padding-top: 15px;
        width: 50px;
        height: 20px;
    }
    #pgftl, #pgftr
    {
        width: 30%;
    }
    
}
@media only screen and (max-width: 290px)
{
    #headerLogo
    {
        width: 110px;
        height: 40px;
    }
    #headerLogo img
    {
        width: 100%;
        height: 100%;
    }
    .siteChange
    {
        width: 100px;
    }
    #pgftcr
    {
        margin-left: 0px;
    }
}
@media only screen and (max-width: 260px)
{
    #pgftcr
    {
        width: 90px;
    }
}
/*-----------------------------------------------------
 * End Global queries
 *--------------------------------*/
@media only screen and (max-width: 985px)
{
    /* override old layout stuff for compliant browsers */
    #wrapper,
    #bdft
    {
        min-width: 0px;
    }
}

@media only screen and (min-width: 891px) and (max-width: 959px)
{
    .container                                  { width: 100%;}
    .container .column,
    .container .columns                         { margin-left: 10px; margin-right: 10px;  }
    .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
    .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
    .alpha.omega                                { margin-left: 0; margin-right: 0; }    
    
    .container .twelve.columns { width: 60%; }
    .container .sixteen.columns { width: 100%; }
    
    #ADVERT
    {
        width: 58%;
    }

    #QUICKSEND, #MYSCHEDULE
    {
        margin-right:0px;
    }

    #QUICKSENDADVERT
    {
        width: 30%;
    }
    #MYACTIVITY,
    #CUSTOMERACTIVITY
    {
        width: 47%;
    }  
    
    .dashboardadvert,
    .quicksendadvertimg
    { width: 100%; }

    .tabs.ui-tabs .ui-tabs-nav
    {
        padding-left: 0em;
    }
    
    .tabs.ui-tabs
    {
        padding:.3em;
        border-radius: 0 0 .5em .5em;
    }

    .tabs.ui-tabs .ui-tabs-nav li a
    {
        padding:.2em .2em;
        font-size:.7em;
    }
}
@media only screen and (max-width: 890px)
{
    .container                                  { width: 100%;}
    .container .column,
    .container .columns                         { margin: 0;  }
    .column.alpha, .columns.alpha               { margin: 0; }
    .column.omega, .columns.omega               { margin: 0; }
    .alpha.omega                                { margin: 0; }      
     
    .fullonly
    {
        display: none !important;
    }
    .container .four.columns                    { width: 100%; }
    .container .six.columns                     { width: 100%; }
    .container .twelve.columns                  { width: 58%; }
    .container .sixteen.columns                 { width: 100%;}
    
    #pgftcr
    {
        line-height: 1.4;
        margin-top: 25px;
    }

    /* Everything below this in this particular query is dashboard specific! */
     #WELCOMETEXT
    {
        width: 58%;
    }
    #QUICKSEND
    {
        width: auto;
        float: right;
        position: relative;
        margin-right:0px;
    }

    #MYSCHEDULE
    {
        width: auto;
        padding: 0; 
        float: right;
        margin-right:0px;
    }

	#TOOLS 
	{
		width: 100%;
	}
    
    .borderleftdashed
    {
        border: none;
        padding-left: 0px;
    }
}
/* TODO: This may be excessive, we should find a different way to write our layout to align the QuickSend image/schedule */
@media only screen and (max-width: 849px)
{
}
@media only screen and (max-width: 829px)
{
    
}
@media only screen and (max-width: 800px)
{
    
}
@media only screen and (max-width: 779px)
{
    #WELCOMETEXT, .container .twelve.columns
    {
        width:54%;
    }
}

@media only screen and (max-width:750px)
{
    #WELCOMETEXT, .container .twelve.columns
    {
        width: 54%;
    }
}

@media only screen and (max-width:725px) 
{
    #WELCOMETEXT, .container .twelve.columns
    {
        width:53%;
    }
}

@media only screen and (max-width:700px)
{
    #WELCOMETEXT, .container .twelve.columns 
    {
        width:48%;
        min-width:295px;
        padding-right:5px;
    }
}

/*  #Mobile (Portrait)
================================================== */
   
    /* Single column design (We only need one?) */
    @media only screen and (max-width: 660px)
    {      
        .container .columns,
        .container .column { margin: 0;}

        #MYSCHEDULE { padding: 0; margin: 0; width: 100%;}
        .mySchedule-Container { width: auto; max-width: 300px; margin-left: auto; margin-right: auto;}

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column  { width: 100%; }

        /* Offsets */
        .container .offset-by-one,
        .container .offset-by-two,
        .container .offset-by-three,
        .container .offset-by-four,
        .container .offset-by-five,
        .container .offset-by-six,
        .container .offset-by-seven,
        .container .offset-by-eight,
        .container .offset-by-nine,
        .container .offset-by-ten,
        .container .offset-by-eleven,
        .container .offset-by-twelve,
        .container .offset-by-thirteen,
        .container .offset-by-fourteen,
        .container .offset-by-fifteen { padding-left: 0; }
        
        .fullonly 
        {
            display:none !important;
        }
        
        #grid .column, #grid .columns { font-size:11px;}

        #WELCOMETEXT
        {
            width: 100%;
        }

        #WELCOMETEXT, .container .twelve.columns 
        {
            min-width:100%;
        }

        #QUICKSEND
        {
            margin: 0;
            clear: left;
            width: 100%;
        }

        #quicksendtext
        {
            display: none;
        }
        
        .quicksendimg
        {
            max-width: 300px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        
        .dashboardadvert
        {
            width: 100%;
            max-width: 410px;
        }
        
        .borderleftdashed
        {
            border: none;
            padding-left: 0px;
        }
    }
@media only screen and (max-width: 450px) {

}

@media only screen and (max-width: 330px)
{
        .tabs.ui-tabs
        {
            padding:.2em;
        }
        .tabs.ui-tabs .ui-tabs-nav li a
        {
            padding:.2em .3em;
            font-size:.77em;
        }
}
/* minimum width for this page: 300px */
@media only screen and (max-width: 300px)
{
        .container,
        #wrapper,
        #pgcr,
        #pghd,
        #pgft,
        #pgct,
        #bdft { width: 300px; }

        .mySchedule-Container { margin: 0; padding: 0; }
        .quicksendimg,
        .dashboardadvert,
        .mySchedule-Container,
        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        /*.container .six.columns,*/
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column  { width: 260px; }
}

/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */
/*
    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 420px; }
        
        .quicksendimg
        {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        
        .dashboardadvert
        {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: auto;
            height: auto;
        }
        
        .fullonly 
        {
            display:none !important;
        }
    }
    
    @media only screen and (min-width: 500px) and (max-width: 767px) {
        #grid .column, #grid .columns { font-size:12px;}
    }
    
    
     @media only screen and (max-width: 300px) {
        .container { width: 220px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 220px; }
        
        .quicksendimg
        {
            width: 220px;
            height: 28px;
        }
        
        .dashboardadvert
        {
            width: 220px;
            height: 111px;
        }
        
         .fullonly 
        {
            display:none !important;
        }
        
        #grid .column, #grid .columns { font-size:8px;}
    }
*/
