@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%; } .jspVerticalBar .jspArrow:focus { outline: none; } .jspCorner { background: #000000; float: left; height: 100%; } /* Yuk! CSS Hack for IE6 3 pixel bug :( */ * html .jspCorner { margin: 0 -3px 0 0; } } .jspScrollable{ -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; outline: 0; outline: thin dotted \9; }