/* 
Responsive CSS Styling
Created on 23.04.2014 by Neil Kelsey
Please only use this stylesheet for styles which can be used multible times throughout the site,
if you have styling that will only ever be used on one page please create a unique stylesheet
for that one page.
Please do not use this stylesheet for print styling, non-responsive styling or for browser fixes
*/
/* Start of large tablet styling */
@media (max-width: 1200px) {
    body {
        /* background:#ff0000; */
    }
    /* Start of homepage styling */
    /* End of homepage styling */
    /* Start of mega menu styling */
    .mega-menu .container
    {
        width:940px;
    }
    ul#menu-primary-navigation .employers .mega-menu
    {
        left:-7px;
    }
    ul#menu-primary-navigation .business-advisers .mega-menu
    {
        left:-132px;
    }
    ul#menu-primary-navigation .trustees .mega-menu
    {
        left:-315px;
    }
    ul#menu-primary-navigation .individuals .mega-menu
    {
        left:-558px;
    }
    ul#menu-primary-navigation .document-library .mega-menu
    {
        left:-750px;
    }
    /* End of mega menu styling */
    /* Start of tool styling */
    #content-tool.page
    {
        width:714px;
    }
    /* End of tool styling */
}
/* End of large tablet styling */
/* Start of small tablet styling */
@media (max-width: 991px) {
    body {
        /* background:#00ff00; */
    }
    
    .light-grey-bg.mt30.mb30.pt12 .row .m0.title-18 .link-chevron
    {
        display:block;
    }
    /* Start of homepage styling */
    /* End of homepage styling */
    /* Start of header / navigation styling */
    #menu-primary-navigation li a
    {
        padding:16px 7px;
        font-size:15px;
    }
    #menu-primary-navigation li.public-service a
    {
        padding:16px 15px;
        font-size:15px;
    }
    #menu-primary-navigation li.document-library
    {
        margin:0 0 0 15px;
    }
    .mega-menu
    {
        display:none;
    }    
    /* End of header / navigation styling */
    /* Start of menu styling */
    div#left-nav li li li a
    {
        margin:0;
    }
    /* End of menu styling */
    #menu-primary-navigation li.employers a
    {
        padding:16px 9px;
        min-width: 90px;
    }
    #menu-primary-navigation li.business-advisers a
    {
        min-width: 142px;
    }
    #menu-primary-navigation li.trustees a
    {
        min-width: 74px;
    }
    #menu-primary-navigation li.individuals a
    {
        min-width: 90px;
    }
    #menu-primary-navigation li.public-service a
    {
        min-width: 90px;
    }
    #menu-primary-navigation li.document-library a
    {
        min-width: 129px;
    }
    /* Start of footer social icon styline */
    .linked-in
    {
        margin:0 0 3px 3px;
    }
    .twitter
    {
        margin:0 0 3px 3px;
    }
    .google-plus
    {
        margin:0 0 3px 3px;
    }
    /* Endf footer social icon styline */
    /* Start of tool styling */
    #content-tool.page
    {
        width:547px;
    }
    /* End of tool styling */
    /* Start of footer styling */
    .footer h2, .footer.light-grey-bg li
    {
        font-size:15px;
        line-height: 15px;
    }
    .footer a.link-chevron
    {
        padding:0 25px 0 0;
        width:15px;
        height: 15px;
        background-size: contain;
    }
    /* End of footer styling */
}
/* End of small tablet styling */
/* Start of mobile landscape styling */
@media (max-width: 767px) {
    body {
    /*    background:#0000ff; */
    }
    #content, .container.three-col #content
    {
        width:100%;
    }
    .ba-logo
    {
        width:74px;
    }
    .three-col .ba-logo
    {
        position:static;
        display:block;
    }
    .three-col .rightSidebar .ba-logo
    {
        display:none;
    }
    .mega-menu .container
    {
        display:none;
    }
    h2.align-center.title-18, li.align-center.title-18
    {
        margin:14px 0!important;
    }
    .landing-pod
    {
        width:100%;
    }
    #left-nav
    {
        display:none;
    }
    .rightSidebar
    {
        width:100%;
    }
    .pod-narrow.subject-pod
    {
        width:100%;
    }
    .pod-narrow.subject-pod.rhBox
    {
        margin-left:0;
    }
    #mobile-section-bar
    {
        padding: 12px;
        margin: 0 0 20px 0;
        min-height: 64px;
        background: #482a87;
    }
    #mobile-section-bar a
    {
        color:#FFF;
        font-size: 25px;
        line-height: 35px;
    }
    #mobile-section-bar #m-sections
    {
        float:right;
        color: #FFF;
        padding:0 0 0 30px;
        margin: 0 0 12px 0;
        background:
            url(/assets/svg/menu-icon.svg)
            top
            left
            no-repeat;
            background-position:0 5px;
    }
    #mobile-section-bar #m-sections:hover
    {
        cursor: pointer;
    }
    .employers #mobile-section-bar
    {
        background: #08647a;
    }
    .business-advisers #mobile-section-bar
    {
        background: #426605;
    }
    .trustees #mobile-section-bar
    {
        background: #9d4412;
    }
    .individuals #mobile-section-bar
    {
        background: #655858;
    }
    #mobile-section-nav
    {
        display: none;
    }
    /* Start of Individuals page styling */
    .cmp-standard
    {
        width:100%;
    }
    .cmp-standard-content.row
    {
        margin:0 0 20px 0;
    }
    .cmp-standard.float-right
    {
        margin: 0;
    }
    /* End of Individuals page styling */
    .footer ul
    {
        margin: 0 auto 50px auto!important;
    }
    .footer li
    {
        display:inline-block;
        padding: 0 0 0px 20px;
    }
    .footer ul.mobile-margin-0
    {
        margin:0!important;
    }
    .footer h2, .footer.light-grey-bg li
    {
        line-height:40px;
    }
    .copyright
    {
        text-align: left;
    }
    /* Start of DB styling */
    .cmp-aud-panel
    {
        width:100%;
        margin:0 0 20px 0;
    }
    /* End of DB styling */
    /* Start of tool styling */
    #content-tool.page
    {
        width:100%;
    }
    /* End of tool styling */
}

/* End of document */
 