.sliderContainer { margin-bottom: 70px; padding: 70px 0 0; width: 100%; } .column-slider{ position: relative; } .column-slider-withArrows .column-slider-container{ margin: 0; } .column-slider-noArrow .column-slider-container{ border-radius: 4px; border-left: solid 1px #515862; border-right: solid 1px #515862; } .column-slider-container{ height: 30px; border-top: solid 1px #232a32; border-bottom: solid 1px #6a7179; background: #67707F; position: absolute; width: 100%; } .column-slider-innerBar{ height: 100%; left: -10px; overflow: hidden; width: 100%; } .column-slider-bar{ background: #68a1d6; height: 30px; margin: 0; cursor: move; cursor: grab; cursor: -moz-grab; position: absolute; top: 0; } .column-slider-handle{ top: 0; width:10px; height:30px; background: transparent; cursor:col-resize; position: absolute; } .column-slider-label{ background: #888DA0; padding: 5px 10px; bottom:10px; color:#FFF; font-size:15px; cursor:col-resize; position: absolute; display: none; -webkit-border-radius: 3px -moz-border-radius: 3px; border-radius: 3px; } .column-slider-label-inner{ position: absolute; top: 100%; left: 50%; display: block; z-index:10; border-left: 10px solid transparent; border-right: 10px solid transparent; margin-left: -10px; border-top: 10px solid #888DA0; } .leftLabel-input, .rightLabel-input{ width:2em; text-align:center; font-size:15px; background-color: #888DA0; border: none; color: #FFFFFF; } .column-slider .ui-ruler-scale{ position:absolute; top:0; left:0; bottom:0; right:10px; } .column-slider .ui-ruler-tick { float: left; } .column-slider .ui-ruler-scale0 .ui-ruler-tick-inner{ color:#FFF; margin-top:1px; border-left: 1px solid #FFF; height:29px; padding-left:2px; position:relative; } .column-slider .ui-ruler-scale0 .ui-ruler-tick-label{ position:absolute; bottom: 6px; } .column-slider .ui-ruler-scale1 .ui-ruler-tick-inner{ border-left:1px solid #FFF; margin-top: 25px; height: 5px; } .hoveredContainer { background-color: #737E8E; } .hoveredColumn{ background-color: #6EACE2; }