.col { float: left; width: 200px; } .col-2 { float: left; width: 400px; } .scope-branch { margin-left: 30px; background-color: rgba(0,0,0,0.06); } body { margin: 10px; } .well-top { border-radius: 4px 4px 0 0; margin-bottom: 0; } .well-bottom { border-radius: 0 0 4px 4px; border-top: none; background-color: #E0E0E0; } /* * Slider widget style based on jquery-ui-bootstrap * http://addyosmani.github.com/jquery-ui-bootstrap */ .ui-slider { position: relative; text-align: left; height: .8em; border-radius: 4px; border: 1px solid #aaaaaa; background: #ffffff; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; top: -.3em; margin-left: -.6em; cursor: default; border-radius: 4px; background-color: #e6e6e6; background-repeat: no-repeat; background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); /*background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);*/ font-size: 13px; line-height: normal; border: 1px solid #ccc; border-bottom-color: #bbb; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -webkit-transition: 0.1s linear background-image; transition: 0.1s linear background-image; overflow: visible; } .ui-slider .ui-slider-range { position: absolute; top: 0; height: 100%; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; background-color: #0064cd; background-repeat: repeat-x; background-image: -webkit-linear-gradient(top, #049cdb, #0064cd); /*background-image: linear-gradient(top, #049cdb, #0064cd);*/ }