﻿
/* Medium Screens */
@media only screen and (min-width:636px) and (max-width:800px) {
    #cmshtmlcontent img {
        max-width: 100%;
    }

    .mainContainer {
        width: 95%;
    }

    #headerSecNav ul {
        width: auto;
    }

    #headerNavBar {
        width: auto;
    }

    #mainNav {
        position: static;
        width: 100%;
    }

        #mainNav ul li {
            /* allow drop down to expand wider than li*/
            position: static;
        }

            #mainNav ul li .mainNavLink span {
                display: block;
                visibility: visible;
                position: static;
            }

            #mainNav ul li .mainNavLink a {
                position: static;
                display: none;
            }

        #mainNav li.hover:hover {
            background: url(../images/bkgMainNavTabMedium.png) no-repeat scroll -1px -4px transparent;
        }

        #mainNav ul > li.panel-open {
            background: url(../images/bkgMainNavTabMedium.png) no-repeat scroll -1px -4px transparent;
        }

        #mainNav .mainNavPanel {
            width: 100%;
            background: transparent;
            left: 0;
            padding: 0;
            top: auto;
        }

        #mainNav .mainNavBtm {
            margin-top: 0px;
            background: none;
        }

        #mainNav .mainNavPanelTile {
            background: #fff;
            width: auto;
            border: 1px solid #d1cfcf;
            border-top: none;
            padding-left: 3px;
        }

    .search {
        width: auto;
        padding: 5px 0 0 0px;
    }

        .search .searchBox {
            border: 1px solid #D1D1D1;
            width: 200px;
        }

        .search .advanced {
            display: none;
        }

    #headerImage {
        display: none;
    }

    /* Home */

    .homeLeftCol {
        width: 100%;
        float: none;
        margin-right: 0px;
        margin-bottom: 10px;
    }

    .homeRightCol {
        width: auto;
        float: none;
        clear: both;
        position: relative;
    }

    #homeMainContent {
        width: auto;
        overflow: visible;
        margin-bottom: 15px;
    }

    #homeFeature {
        margin-left: auto;
        margin-right: auto;
        max-width: 710px;
        margin-bottom: 2%;
    }

    #homeBanner > a {
        height: 0px;
        padding-bottom: 43.23943661971831%;
        max-width: 100%;
    }

    #homeFeature img {
        max-width: 100%;
    }

    #homeCTAs ul {
        width: auto;
    }

        #homeCTAs ul li .homeCTAImage a {
            width: auto;
            height: auto;
            padding-bottom: 68.75%;
        }

            #homeCTAs ul li:hover .homeCTAImage a, #homeCTAs ul li .homeCTAImage a:hover, #homeCTAs ul li.hover .homeCTAImage a {
                border: none;
                width: auto;
                height: auto;
            }

            #homeCTAs ul li .homeCTAImage a img {
                width: auto;
                max-width: 100%;
                height: auto;
            }

            #homeCTAs ul li:hover .homeCTAImage a img, #homeCTAs ul li.hover .homeCTAImage a img, #homeCTAs ul li .homeCTAImage a:hover img {
                top: 0;
                left: 0;
            }

    #lnksForThePublic {
        width: 30.26315789473684%;
        display: inline-block;
        vertical-align: top;
        margin-right: 4%;
    }

        #lnksForThePublic ul li a {
            width: auto;
        }

    #lnksLatestNews {
        width: 30.26315789473684%;
        display: inline-block;
    }

        #lnksLatestNews h2 {
            margin: 0;
            line-height: 0.9em;
            padding: 13px 10px;
            background-color: #edede9;
            color: #7a923c;
            font-weight: normal;
            font-size: 2em;
            font-family: Georgia, "Times New Roman", Times, serif;
        }

    #twitterWidget {
        width: 230px;
        display: inline-block;
        vertical-align: top;
        position: absolute;
        top: 0;
        right: 0;
    }

    #homeAdditionalContent {
        width: auto;
        margin-bottom: 30px;
    }

    #homeLawyersAndParalegals {
        width: auto;
        padding-left: 1.315789473684211%;
    }

    #lnksForLawyers {
        width: 36.84210526315789%;
        margin-right: 2.631578947368421%;
    }

        #lnksForLawyers ul li a {
            width: auto;
        }

    #lnksForLaywersMore ul li {
        min-width: 120px;
    }

    #homeCPDProgrammes {
        width: 59.21052631578947%;
    }

    .UpcomingCPDHeader {
        width: auto;
    }

    #homeCPDProgrammes ul li a {
        width: auto;
    }

    /* Internal Page Medium */

    .leftNavToggle {
        display: block;
    }

    #headerTriNav {
        display: none;
    }

    #internalMainContent {
        width: auto;
    }

    .internalLeftCol {
        float: left;
        margin-right: 0;
        margin-left: -100%;
        -moz-transition: .4s all ease;
        -o-transition: .4s all ease;
        -webkit-transition: .4s all ease;
        transition: .4s all ease;
    }

    .internalRightCol {
        float: left;
        margin-right: 0;
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        -moz-transition: .4s all ease;
        -o-transition: .4s all ease;
        -webkit-transition: .4s all ease;
        transition: .4s all ease;
    }

    .active-nav .internalLeftCol {
        margin-left: 0;
        width: 230px;
    }

    .active-nav .internalRightCol {
        margin-right: -100%;
        padding-left: 11px;
        -webkit-box-shadow: -2px -10px 5px #888888;
        -moz-box-shadow: -2px -10px 5px #888888;
        box-shadow: -2px -10px 5px #888888;
    }

    /* Footer */

    #footerMotto .mainContainer {
        background-position: center top;
    }

    #footerInfoIcon {
        right: 22px;
    }

    #footerSectionListings {
        width: auto;
    }

    .footerSection {
        width: 44%;
    }

        .footerSection.third {
            clear: left;
        }

    #footerQuickLinks {
        width: auto;
    }

    #footerSitemap {
        width: auto;
        float: none;
        padding: 8px 0px 10px 0px;
    }

    #footerSocialMedia {
        float: none;
        padding-left: 10px;
    }
}

/* Medium Screens (screen width more than the banner image) */
@media only screen and (min-width: 751px) and (max-width: 800px) {
    #headerSearchBar {
        background: none;
        max-height: 35px;
        padding: 0;
        position: absolute;
        top: 45px;
        right: 0px;
        width: 305px;
    }

    #homeCTAs ul li, #homeCTAs ul li.first {
        width: 21.05263157894737%;
        margin-right: 5.263157894736842%;
    }
}

/* Medium Screens (screen width less than the banner image) */
@media screen and (min-width: 636px) and (max-width: 750px) {
    #headerLogo {
        padding-top: 20px;
        margin-bottom: 35px;
    }

    #headerSearchBar {
        background: none;
        max-height: 35px;
        padding: 0;
        position: absolute;
        top: 100px;
        width: 320px;
    }

    #homeFeature {
        height: 0px;
        padding-bottom: 43.23943661971831%;
    }

    #homeCTAs ul li, #homeCTAs ul li.first {
        width: 24%;
        margin-right: 1.333333333333333%;
    }

    #lnksForThePublic {
        width: 37%;
        margin-right: 3%;
    }

    #lnksLatestNews {
        width: 60%;
    }

        #lnksLatestNews ul li a {
            width: 85%;
        }

    #twitterWidget {
        display: none;
    }

    .searchToggle {
        display: none;
    }
}

/* Small Screens */
@media only screen and (min-width:50px) and (max-width:635px) {
    #cmshtmlcontent img {
        max-width: 100%;
    }

    .mainContainer {
        width: 95%;
    }

    #headerLogo {
        padding-top: 30px;
        margin-bottom: 0px;
    }

        #headerLogo a {
            width: 90%;
            max-width: 300px;
        }

        #headerLogo img {
            width: 90%;
            max-width: 300px;
        }

    #headerSecNav .loginLink {
        visibility: hidden;
    }

        #headerSecNav .loginLink.expand {
            visibility: visible;
        }

    #headerSecNav .loginToggle:hover {
        cursor: pointer;
        text-decoration: underline;
        
        
    }
    #headerSecNav .loginToggle
    {
        color:#ffffff;
    }

    #headerSecNav ul {
        float: none;
        width: auto;
    }

    #headerTextSizer {
        visibility: hidden;
        display: none;
    }

    #headerNavBar {
        width: auto;
        height: auto;
    }

    #mainNav {
        clear: both;
        float: none;
        width: auto;
        height: auto;
        position: relative;
    }

        #mainNav ul {
            list-style: outside;
            list-style-type: none;
            margin: 0;
            padding: 0;
            background: none;
        }

            #mainNav ul li {
                width: 100%;
                float: none;
                height: auto;
                position: relative;
                background: none;
            }

                #mainNav ul li .mainNavLink a {
                    display: none;
                }

                #mainNav ul li .mainNavLink span {
                    display: block;
                    visibility: visible;
                }

                #mainNav ul li .mainNavLink a, #mainNav ul li .mainNavLink span {
                    border-right: none;
                    height: 40px;
                    padding: 15px 0 0px 15px;
                    position: relative;
                    text-align: left;
                    width: auto;
                    right: 0px;
                    background: none;
                    top: 0px;
                }

                    #mainNav ul li .mainNavLink a:after, #mainNav ul li .mainNavLink span:after {
                        content: "";
                        background: url('../images/nav-icon.png') no-repeat;
                        width: 30px;
                        height: 50px;
                        display: inline-block;
                        position: absolute;
                        right: 15px;
                        top: 15px;
                    }

        #mainNav .mainNavLink {
            width: 100%;
            background: url(../images/bkgMainNavLink.png) scroll repeat-x top left;
        }

            #mainNav .mainNavLink.here {
                background: none;
            }

        #mainNav .mainNavPanel {
            position: relative;
            top: 0px;
            left: 0px;
            z-index: auto;
            width: 100%;
            background: none;
            display: none;
            max-height: none;
        }

        #mainNav .mainNavBtm {
            margin-top: 0px;
            background: none;
            padding-bottom: 0px;
        }

        #mainNav .mainNavPanelTile {
            border-left: 1px solid #d1cfcf;
            border-right: 1px solid #d1cfcf;
            width: auto;
            padding: 0;
            background: #fff;
        }

        #mainNav .mainNavPanel ul {
            width: 100%;
            float: none;
        }

            #mainNav .mainNavPanel ul li {
                width: 100%;
                float: none;
            }

                #mainNav .mainNavPanel ul li a {
                    width: 100%;
                }

        #mainNav .mainNavPanel .mainNavCTA {
            float: none;
            padding-left: 10px;
            width: auto;
        }

    #headerSearchBar {
        max-height: 0px;
        visibility: hidden;
        background: #fff;
        width: auto;
        float: none;
    }

        #headerSearchBar.expand {
            max-height: 30px;
            height: 30px;
            visibility: visible;
        }

    .searchToggle {
        display: block;
        float: left;
        top: 38px;
        right: 0;
        color: #fff;
        height: 32px;
        text-align: center;
        width: 32px;
        cursor: pointer;
        position: absolute;
    }

        .searchToggle img {
            width: 32px;
        }

    .search {
        right: 0;
        left: 0;
        padding: 0;
        width: 100%;
    }

        .search .searchBox {
            border: 1px solid #D1D1D1;
            font-size: 1em;
            left: 0;
            max-width: 300px;
            width: 50%;
        }

        .search .advanced {
            display: none;
        }

    #headerImage {
        display: none;
    }

    /* Home */

    .homeLeftCol {
        width: auto;
        float: none;
        margin-right: 0px;
    }

    .homeRightCol {
        width: auto;
        float: none;
        clear: both;
        margin-top: 15px;
    }

    #homeMainContent {
        width: auto;
        overflow: visible;
    }

    #homeFeature {
        height: 0;
        margin-bottom: 2%;
        padding-bottom: 43.23943661971831%;
    }

    #homeBanner img {
        width: 100%;
    }

    #homeBannerNav {
    }

    #homeCTAs ul {
        width: auto;
    }

        #homeCTAs ul li {
            float: none;
            width: auto;
            margin-right: 0px;
            min-height: 120px;
        }

            #homeCTAs ul li.first {
                margin-right: 0px;
            }

            #homeCTAs ul li .homeCTAImage {
                width: 160px;
                float: left;
            }

            #homeCTAs ul li .homeCTATitle {
                margin-left: 165px;
            }

            #homeCTAs ul li .moreInfo {
                margin-left: 165px;
            }

    #lnksForThePublic {
        width: 49%;
        min-width: 230px;
        display: inline-block;
        vertical-align: top;
        margin-right: 2%;
    }

        #lnksForThePublic ul li a {
            width: auto;
        }

    #lnksLatestNews {
        width: 49%;
        min-width: 230px;
        display: inline-block;
    }

        #lnksLatestNews h2 {
            margin: 0;
            line-height: 0.9em;
            padding: 13px 10px;
            background-color: #edede9;
            color: #7a923c;
            font-weight: normal;
            font-size: 2em;
            font-family: Georgia, "Times New Roman", Times, serif;
        }

        #lnksLatestNews ul li a {
            width: auto;
            padding-right: 0px;
        }

    #twitterWidget {
        display: none;
    }

    #homeAdditionalContent {
        width: auto;
    }

    #homeLawyersAndParalegals {
        width: auto;
        padding-left: 1.315789473684211%;
    }

    #lnksForLawyers {
        width: 40.84210526315789%;
        margin-right: 2.631578947368421%;
    }

        #lnksForLawyers ul li a {
            width: auto;
        }

    #lnksForLaywersMore ul li {
        min-width: 120px;
    }

    #homeCPDProgrammes {
        width: 55.21052631578947%;
    }

    .UpcomingCPDHeader {
        width: auto;
    }

    #homeCPDProgrammes ul li a {
        width: auto;
    }

    /* Internal Page Small */

    .leftNavToggle {
        display: block;
    }

    #headerTriNav {
        display: none;
    }

    #internalMainContent {
        width: auto;
    }

    .internalLeftCol {
        float: left;
        margin-right: 0;
        margin-left: -100%;
        -moz-transition: .4s all ease;
        -o-transition: .4s all ease;
        -webkit-transition: .4s all ease;
        transition: .4s all ease;
    }

    .internalRightCol {
        float: left;
        margin-right: 0;
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        -moz-transition: .4s all ease;
        -o-transition: .4s all ease;
        -webkit-transition: .4s all ease;
        transition: .4s all ease;
    }

    .active-nav .internalLeftCol {
        margin-left: 0;
        width: 230px;
    }

    .active-nav .internalRightCol {
        margin-right: -100%;
        padding-left: 11px;
        -webkit-box-shadow: -2px -10px 5px #888888;
        -moz-box-shadow: -2px -10px 5px #888888;
        box-shadow: -2px -10px 5px #888888;
    }

    /* Footer */

    #footerMotto .mainContainer {
        background-position: center top;
    }

    #footerInfoIcon {
        right: 22px;
    }

    #footerSectionListings {
        width: auto;
    }

    .footerSection {
        width: auto;
        float: none;
    }

    #footerQuickLinks {
        width: auto;
    }

    #footerSitemap {
        width: auto;
        float: none;
        padding-bottom: 10px;
    }

        #footerSitemap li {
            display: inline-block;
            padding: 0 30px 0 0;
            background: none;
            position: relative;
        }

        #footerSitemap ul li a:after {
            content: "";
            background: url(../images/bkgFooterListDivider.png) no-repeat;
            width: 1px;
            height: 14px;
            display: inline-block;
            position: absolute;
            right: 15px;
            top: 0px;
        }

        #footerSitemap ul li:last-child a:after {
            background: none;
        }

    #footerSocialMedia {
        float: none;
        padding-left: 10px;
    }
}

@media only screen and (max-width: 535px) {
    #lnksForLawyers {
        width: 280px;
        margin-right: 0;
    }

    #homeLawyersAndParalegals {
        padding-right: 1.315789473684211%;
    }

    #homeCPDProgrammes {
        width: 100%;
    }

    .UpcomingCPDHeader {
        height: auto;
        padding: 10px 20px;
    }
}

@media only screen and (max-width:525px) {
    #lnksForThePublic {
        width: 100%;
        margin-right: 0;
        display: block;
    }

    #lnksLatestNews {
        width: 100%;
        display: block;
    }
}

@media only screen and (min-width: 50px) and (max-width:340px) {
    #headerLogo {
        /*padding-top: 50px;*/
    }

    #headerSecNav ul li {
        padding-right: 10px;
    }
    #headerSecNav ul li a {
        
        color:#ffffff;
    }

    #homeFeature {
        height: 0;
        margin-bottom: 3%;
        padding-bottom: 43.23943661971831%;
    }

    #homeCTAs ul li {
        margin-bottom: 10px;
    }

        #homeCTAs ul li .homeCTAImage {
            width: 160px;
            float: none;
        }

        #homeCTAs ul li .homeCTATitle {
            margin-left: 0px;
        }

        #homeCTAs ul li .moreInfo {
            margin-left: 0px;
        }

    #lnksForThePublic {
        width: 100%;
        margin-right: 0;
    }

    #lnksLatestNews {
        width: auto;
        margin-bottom: 10px;
    }

        #lnksLatestNews ul li a {
            width: auto;
            padding-right: 0px;
        }

    #lnksForLawyers {
        width: 100%;
    }

        #lnksForLawyers ul li a {
            width: auto;
        }

    .active-nav .internalLeftCol {
        width: 75%;
    }

    #internalSecNav ul, #internalSecNav ul li, #internalSecNav ul li ul li, #internalSecNav ul li ul li a {
        width: auto;
    }

    .internalLeftCol {
        margin-left: -125%;
    }
}
