@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 768px) {

    /* overall layout adjustments
    ------------------------------------------------*/
    #header, #main, #footer {
        box-sizing: border-box;
        padding: 10px !important;
        width: 100%;
    }

    #p-home #main {
        width: 100%;
    }

    body {
        margin: 0 auto;
        width: 100%;
        background: #fff url(/uploads/thj/images/body-bg-white-resp.png) 0 0 repeat-x;
    }

    /* header
    ------------------------------------------------*/
    #header {
        overflow: visible;
        height: 58px;
    }

    #header h2#logo {
        margin-top: 20px;
        width: 218px;
        background: transparent url(/uploads/thj/images/thj-logo-2x.png) 0 0 repeat-x;
        background-size: contain;
    }

    #header ul {
        position: absolute;
        top: 75px;
        left: 0;
        z-index: 999;
        display: none;
        float: none;
        margin: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0 3px 3px rgba(0, 0, 9, 0.3);
    }

    #header li {
        float: none;
        padding: 0.75em !important;
        border-bottom: 1px solid #0E5DB1;
        background: #fff;
        font-size: 14px;
    }

    #header li a {
        display: block;
        width: 100%;
    }

    #header li a:after {
        display: block;
        float: right;
        content: ">";
    }

    .item-trailers, .item-agricultural-equipment, .item-4x4-vehicles, .item-border-fine-arts {
        display: block;
    }

    #toggleMenu {
        position: absolute;
        top: 41px;
        right: 20px;
        display: block;
        overflow: hidden;
        width: 30px;
        height: 17px;
        background: url(/uploads/thj/images/menu-icon.png) 0 0 no-repeat;
        text-indent: -999em;
    }

    #toggleMenu:hover, #toggleMenu:active, #toggleMenu:focus {
        opacity: 0.8;
    }

    /* main content
    ------------------------------------------------*/
    .home-panel{
        float:none;
        width: 97.91666666666667%;
        margin: 0 1.041666666666667% 20px 1.041666666666667%;
    }
    .home-panel a strong{
        font-size: 14px;
    }
    #main .fullwidth a strong .caption, #main .fullwidth a strong .logo-block{
        width: 100%;
    }
    #main .fullwidth a strong .logo-block{
        text-align: center;
    }
    #main .fullwidth a strong .logo-block img{
        display: inline-block;
        float: none;
    }
    #main p.panel {
        float: none;
        margin: 0;
        width: 100%;
        height: auto;
        background-size: contain;
    }

    #main a.panel {
        margin: 0;
        min-height: 160px;
        width: 100%;
        height: 100%;
        background-size: contain;
    }

    #main .panel.fullwidth a {
        font-size: 16px;
    }

    #main .panel.fullwidth a span {
        font-size: 14px;
    }

    #content img {
        max-width: 100%;
        height: auto !important;
    }

    #main h1, #main h2 {
        clear: both;
    }

    .agri-logos {
        float: none;
    }

    #content .agri-logos img {
        margin-bottom: 3px;
        width: 50px;
        height: auto;
    }

    /* section menus
    ------------------------------------------------*/
    #toggleSectionMenu {
        display: block;
        clear: both;
        box-sizing: border-box;
        margin: 10px 0;
        padding: 6px;
        width: 100%;
        border: 1px solid #368ABC;
        background: #fff;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        color: #368ABC;
        text-align: right;
        text-transform: uppercase;
        font-size: 12px;
        font-family: Arial, Helvetica, sans-serif;
        cursor: pointer;
    }

    #toggleSectionMenu span:before {
        display: block;
        float: left;
        width: 20px;
        height: 17px;
        background: url(/uploads/thj/images/menu-icon.png) 0 0 no-repeat;
        background-size: contain;
        content: "";

    }

    #main #sectionMenu {
        right: auto;
        display: none;
        float: none;
        box-sizing: border-box;
        margin-top: -11px;
        margin-bottom: 10px;
        width: 100%;
        border: 1px solid #368ABC;
        border-top: none;
        border-bottom: none;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }

    #sectionMenu li, #sectionMenu ul {
        float: none;
        margin: 0;
        width: 100%;
    }

    #sectionMenu li li ul {
        position: static;
        left: auto;
        padding: 0;
        width: 100%;
        border: none;
    }

    #sectionMenu a {
        display: block;
        box-sizing: border-box;
        padding: 0.65em 1em;
        width: 100%;
        border-bottom: 1px solid #368ABC;
        background: #f9fcff;
        background: -moz-linear-gradient(top, #f9fcff 0%, #e9e9e9 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9fcff), color-stop(100%, #e9e9e9));
        background: -webkit-linear-gradient(top, #f9fcff 0%, #e9e9e9 100%);
        background: -o-linear-gradient(top, #f9fcff 0%, #e9e9e9 100%);
        background: -ms-linear-gradient(top, #f9fcff 0%, #e9e9e9 100%);
        background: linear-gradient(to bottom, #f9fcff 0%, #e9e9e9 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9fcff', endColorstr='#e9e9e9', GradientType=0);

    }

    #sectionMenu a.currentpage, #sectionMenu li li a.activeparent {
        background: #6ebae8;
        background: -moz-linear-gradient(top, #6ebae8 0%, #4d9ece 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6ebae8), color-stop(100%, #4d9ece));
        background: -webkit-linear-gradient(top, #6ebae8 0%, #4d9ece 100%);
        background: -o-linear-gradient(top, #6ebae8 0%, #4d9ece 100%);
        background: -ms-linear-gradient(top, #6ebae8 0%, #4d9ece 100%);
        background: linear-gradient(to bottom, #6ebae8 0%, #4d9ece 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6ebae8', endColorstr='#4d9ece', GradientType=0);

    }

    #sectionMenu a span, #sectionMenu a.currentpage span, #sectionMenu li li a.activeparent span, #sectionMenu li li li a:hover span {
        display: inline;
        padding: 0;
        background: transparent;
    }

    #sectionMenu li li li a:hover span {
        color: #0D5EB0
    }

    /* product listing pages product directory
    ------------------------------------------------*/
    #main div.ProductDirectoryItem div.productImages {
        float: none;
        margin: 0;
        width: 100%;
    }

    #main div.ProductDirectoryItem div.productImages p.fullSizeImage {
        float: none;
        margin: 0;
        padding: 0;
        max-width: 400px;
        line-height: 0;
    }

    #main div.ProductDirectoryItem div.productImages p.fullSizeImage img {
        max-width: 400px;
        width: 100%;
        border: 2px solid #3a95c2;
    }

    #main div.ProductDirectoryItem p.thumbs, #main div.ProductDirectoryItem p.thumbs.overflowthumbs {
        overflow: hidden;
        margin: 10px 0;
        max-width: 400px;
        width: 100%;
        height: auto;
    }

    #main div.ProductDirectoryItem p.thumbs a {
        display: inline-block;
        margin-right: 2%;
        width: 18%;
    }

    #main div.ProductDirectoryItem p.thumbs a:last-child {
        margin-right: 0;
    }

    #main div.ProductDirectoryItem p.thumbs img {
        width: 100%;
        border: 1px solid #3a95c2;
    }

    #main div.ProductDirectoryItem table {
        width: 100%;
    }

    #main div.ProductDirectoryItem p.price {
        float: none;
        clear: both;
        box-sizing: border-box;
        width: 100%;
        text-align: center;
    }

    #main div.ProductDirectoryItem p.enquireLink {
        float: none;
    }

    #main div.ProductDirectoryItem p.enquireLink a {
        display: block;
        clear: both;
        box-sizing: border-box;
        width: 100%;
        background: #2D72A2;
        text-align: center;
    }

    #main div.ProductDirectoryItem p.enquireLink a:hover, #main div.ProductDirectoryItem p.enquireLink a:active {
        background: #2D72A2;
        opacity: 0.8;
    }

    #main div.ProductDirectoryItem h3 {
        clear: both;
    }

    #main div.ProductDirectoryItem span.finance-terms {
        display: block;
        margin: 15px 0 5px 0;
        padding: 0 30px;
        line-height: 1;
    }

    /* border fine arts section
    ------------------------------------------------*/
    #main div.BFAfeatured {
        float: none;
        box-sizing: border-box;
        margin: 0 0 10px 0;
        width: 100%;
        text-align: center;
    }

    #main div.bfaProductDirectoryItem {
        float: none;
        box-sizing: border-box;
        margin: 0 auto 10px auto;
        max-width: 300px;
        width: 100%;
        height: auto;
    }

    #main div.bfaProductDirectoryItem div.productImages p.fullSizeImage {
        margin: 0 auto 10px auto;
        max-width: 300px;
        width: auto;
        height: auto;
    }

    /* specific pages - minor fixes
    ------------------------------------------------*/
    #p-new-agricultural-machinery #main p.floatleft, #p-agricultural-equipment #main p.floatleft {
        box-sizing: border-box;
        margin: 2%;
        width: 46%;
    }

    #p-history #historyPanels p {
        clear: both;
        margin: 0 0 1em 0 !important;
    }

    .boxpanel {
        box-sizing: border-box;
        margin: 10px auto;
        padding: 10px;
        width: 100%;
        border: 3px solid #E72930;
        text-align: center;
    }

    #p-new-trailers #main p.floatleft {
        box-sizing: border-box;
        margin: 2%;
        min-height: 200px;
        width: 46%;
        height: auto;
        text-align: center;
    }

    #p-new-trailers #main p.floatleft a {
        display: inline-block;
        overflow: hidden;
        max-height: 50%;
        width: 100%;
        height: auto;
    }

    #p-new-trailers #main p.floatleft img.tThumb {
        max-width: 200px;
        width: 100%;
        height: 100%;
    }

    table.inner {
        display: block;
        overflow: hidden;
        box-sizing: border-box;
        width: 1200px;
        border-collapse: collapse;
    }

    table.inner tr {
        display: block;
        float: left;
        width: auto;
    }

    table.inner th, .inner td {
        display: block;
        width: auto;
    }

    .inner-wrap {
        float: left;
        overflow: scroll;
        width: 100%;
    }

    .inner-wrap:after {
        display: block;
        clear: both;
        content: "";
    }

    #p-horseboxes p {
        float: none !important;
        clear: both;
    }

    div.NewsSummary h3, .NewsSummaryPostdate {
        float: none;
        clear: both;
        margin-left: 0;
    }

    div.NewsSummarySummary * {
        float: none;
        clear: both;
    }

    div.NewsSummarySummary img {
        display: block;
        float: none;
        margin: 0 auto 10px auto;
    }

    /* footer
    ------------------------------------------------*/
    #footerContent, #footer ul {
        box-sizing: border-box;
        width: 100%;
    }

    #footer li {
        float: none;
        width: 100%;
        text-align: center;
        margin: 5px auto !important;
    }

    #footer li a {
        display: block;
        margin: 0 auto;
        width: 100%;
        background-size: contain;
        background-position: 50% 50%;
    }

    #footer p {
        float: none;
        box-sizing: border-box;
        margin-bottom: 10px;
        width: 100%;
    }

    #footer span {
        position: static;
        display: block;
        width: auto;
        text-align: left;
    }

    /*------------------------------------------------*/
    /* end of responsive small-size / 768 styles */
}

@media screen and (min-width: 510px) and (max-width: 768px) {
    .home-panel{
        float:left;
        width: 48.4375%;
        margin: 0 0.5208333333333333% 20px 1.041666666666667%;
        box-sizing: border-box;
        overflow: hidden;
        box-shadow: 0 0 5px rgba(0,0,0,0.3);
    }
    .home-panel:hover, .home-panel:active{
        box-shadow: 0 0 7px rgba(0,0,0,0.5);
    }
    .home-panel:first-child{
        margin: 0 1.041666666666667% 20px  0.5208333333333333%;
    }

    #main p.panel {
        float: left;
        margin: 0 2% 2% 2%;
        width: 46% !important;
    }

    #main div.ProductDirectoryItem p.thumbs {
        float: right;
        overflow: hidden;
        margin: -313px 0 10px;
        width: 33%;
    }

    #main div.ProductDirectoryItem p.thumbs a {
        box-sizing: border-box;
        margin-right: 4%;
        width: 46%;
        border-width: 2px;
    }

    #main div.ProductDirectoryItem div.productImages p.fullSizeImage {
        margin-bottom: 10px;
    }

    #p-new-agricultural-machinery #main p.floatleft, #p-agricultural-equipment #main p.floatleft {
        box-sizing: border-box;
        margin: 1%;
        min-height: 160px;
        width: 23%;
    }

    #main div.bfaProductDirectoryItem {
        float: left;
        box-sizing: border-box;
        margin: 4%;
        max-width: 300px;
        width: 46%;
        height: auto;
    }

}