@media ( max-width: 1024px ){
    .jspContainer
    {
        overflow: hidden;
        position: relative;
    }

    .jspPane
    {
        position: absolute;
    }

    .jspVerticalBar
    {
        position: absolute;
        top: 0;
        right: 0px;
        width: 4px;
        height: 100%;
    }

    .jspHorizontalBar
    {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5px;
    }

    .jspCap
    {
        display: none;
    }

    .jspHorizontalBar .jspCap
    {
        float: left;
    }

    .jspTrack
    {
        background: transparent;
        position: relative;

        width: 4px;

        -webkit-border-radius: 3px;
           -moz-border-radius: 3px;
                border-radius: 3px;
    }

    .jspDrag
    {
        background-color:rgba( 255, 255, 255, 0.2 );
        position: relative;
        top: 0;
        left: 0;
        cursor: pointer;

        width: 4px;

        -webkit-transition: all 0.3s linear;
           -moz-transition: all 0.3s linear;
             -o-transition: all 0.3s linear;
            -ms-transition: all 0.3s linear;
                transition: all 0.3s linear;
    }
    .jspDrag:hover{
        background-color:rgba( 255, 255, 255, 0.5 );
    }

    .jspHorizontalBar .jspTrack,
    .jspHorizontalBar .jspDrag
    {
        float: left;
        height: 100%;
    }

    .jspArrow
    {
        background: #000000;
        text-indent: -20000px;
        display: block;
        cursor: pointer;
        padding: 0;
        margin: 0;
    }

    .jspArrow.jspDisabled
    {
        cursor: default;
        background: #000000;
    }

    .jspVerticalBar .jspArrow
    {
        height: 16px;
    }

    .jspHorizontalBar .jspArrow
    {
        width: 16px;
        float: left;
        height: 100%;
    }

    .jspCorner
    {
        background: #000000;
        float: left;
        height: 100%;
    }

    /* Yuk! CSS Hack for IE6 3 pixel bug :( */
    * html .jspCorner
    {
        margin: 0 -3px 0 0;
    }
}