/* This contains both the main content and main widgets */
#maincontentwidgets
{
    width:79%;
    float:right;
}

/* Main content area */
#maincontent
{
    padding:5px 10px 10px;
}

/* Widgets - note, the padding is set by the individual widgets, due to the separator line */
#mainwidgets
{
    padding:5px 30px 10px 10px;
}

#mainleftnav
{
    width:21%;
    float:left;
    padding:13px 10px 10px 25px;
}
#mainleftnav #leftnav
{
    list-style:none;
    padding:0;
    margin:0;
}
#mainleftnav #leftnav li
{
    background-color:#fde6ff;
    background-color:#ffe1f0;
    border-bottom: 1px solid #ddd;
    padding: 7.2px 0;
    margin-bottom: 0;
}
#mainleftnav #leftnav li a
{
    margin-left:22px;
    display:block;
    font-size:14.4px;
    text-decoration: none;
    color:#333;
}
#mainleftnav #leftnav .leftnavtop
{
    background-color:#fff;
}
#mainleftnav #leftnav .leftnavtop a
{
    padding-left:22px;
    margin-left:0;
    background: url(../../../images/arrow-down.png) no-repeat left center #fff;
    font-weight: bold;
    color: #c90062;
    text-decoration:none;
}
#mainleftnav #leftnav li.item1 a
{
    margin-left:40px;
}
#mainleftnav #leftnav li a.itemsel0,
#mainleftnav #leftnav li a.itemsel1
{
    font-weight: bold;
    color: #c90062;
}


/* Logon widget */
#main #mainwidgets #mainwidgetlogonbtn
{
    margin-top:0px;
    float:right;
}
#main #mainwidgets #mainwidgetlogonbtn .cssbutton
{
    margin-right:0px;
}

/* Vacancy Search widget */
#main #mainwidgets #mainwidgetvacancysearchbtn
{
    float:right;
    margin-top:0;
}
#main #mainwidgets #mainwidgetvacancysearchbtn .cssbutton
{
    margin-left:5px;
    margin-right:0px;
}

/* Latest Vacancies widget */
#main #mainwidgets #mainwidgetlatestvacancieslist
{
    padding:0;
    margin:12px 0 12px 20px;
    list-style-type:none;
}



/* Logon grid */
#logongrid .logongridval ul
{
    margin:0;
    padding-left:25px;
}
#logongrid .logongridinner
{
    height:220px;
    position:relative;
}
#logongrid #logongridlogon
{
    float:left;
    width:30%;
    padding:15px 0;
}
#logongrid #logongridlogon .logongridinner
{
    padding-right:10px;
    border-right:1px solid #a0a0a0;
}
#logongrid #logongridregister
{
    float:left;
    width:30%;
    padding:15px 0;
}
#logongrid #logongridregister .logongridinner
{
    padding:0 10px;
}
#logongrid #logongridforgotten
{
    float:left;
    width:40%;
    padding:15px 0;
}
#logongrid #logongridforgotten .logongridinner
{
    padding-left:10px;
    border-left:1px solid #a0a0a0;
}
#logongrid .logongridinner .logongridheader
{
    font-size:13px;
    font-weight:bold;
    padding:5px 5px 5px 15px;
    background-color:#c90062;
    color:#fff;
}
#logongrid .logongridbuttons
{
    position:absolute;
    bottom:0;
    right:10px;
}
#logongrid .logongridbuttons .cssbutton
{
    margin-right:0px;
}


/* Vacancy list sort/show */
.vacancylistfilter
{
    display:inline-block;
    margin:5px 20px 5px 0;
    white-space:nowrap;
}
.vacancylistfilter .cssbutton
{
    margin:0;
}


.vacancyDiv
{
    margin:12px 0;
    padding:5px 0;
    overflow:hidden;
}
.vacancyEmailFriend
{
    display:inline-block;
    padding-top:5px;
    margin:0 10px 10px 0;
}
.vacancyApply
{
    display:inline-block;
    float:right;
}
.vacancyDivSocial
{
    text-align:right;
}



@media screen and (max-width:1040px)
{
    #maincontent
    {
        padding:5px 20px 10px;
    }
    #mainwidgets
    {
        padding:5px 20px 10px;
    }

    #main #maincontentwidgets
    {
        width:100%;
    }
    #main #mainleftnav
    {
        width:100%;
        padding:0 20px 0;
    }
}


/* Medium - main takes up entire width, widgets takeup 50% */
@media screen and (max-width:799px)
{
    /* Logon grid */
    #logongrid #logongridlogon
    {
        width:50%;
    }
    #logongrid #logongridlogon .logongridinner
    {
    }
    #logongrid #logongridregister
    {
        width:50%;
    }
    #logongrid #logongridregister .logongridinner
    {
        padding-right:0;
    }
    #logongrid #logongridforgotten
    {
        clear:left;
        width:100%;
        border-top:1px solid #a0a0a0;
    }
    #logongrid #logongridforgotten .logongridinner
    {
        height:auto;
        padding-left:0;
        border-left:0;
    }
    #logongrid #logongridforgotten .logongridbuttons
    {
        position:relative;
        bottom:auto;
        right:auto;
        text-align:right;
    }
}

/* Small - main takes up entire width, widgets take up entire width */
@media screen and (max-width:499px)
{
    /* Logon grid */
    #logongrid .logongridinner
    {
        height:auto;
    }
    #logongrid #logongridlogon
    {
        float:none;
        width:100%;
        padding:10px 0;
    }
    #logongrid #logongridlogon .logongridinner
    {
        border-right:0;
        padding-right:0;
    }
    #logongrid #logongridregister
    {
        float:none;
        width:100%;
        padding:10px 0;
        border-top:1px solid #a0a0a0;
    }
    #logongrid #logongridregister .logongridinner
    {
        padding-left:0;
    }
    #logongrid #logongridforgotton
    {
        padding:10px 0;
    }
    #logongrid .logongridbuttons
    {
        position:relative;
        text-align:right;
        bottom:0;
        right:auto;
    }
}