<< Click here to display Table of Contents >>  Navigation: Materialien > Materialien FINDOLOGIC Integration:

findologic_priceslider.css

/* Beginn css-Styles für den FINDOLOGIC Priceslider */
/*
 * jQuery UI Slider 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Slider#theming
 */
#fl-price-slider.ui-slider { position: relative; text-align: left; }

#fl-price-slider.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 12px; height: 23px; cursor: default; border: none;}
#fl-price-slider.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

#fl-price-slider.ui-slider-horizontal { height: .8em; }
#fl-price-slider.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
#fl-price-slider.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
#fl-price-slider.ui-slider-horizontal .ui-slider-range-min { left: 0; }
#fl-price-slider.ui-slider-horizontal .ui-slider-range-max { right: 0; }

/* Component containers
----------------------------------*/
#fl-price-slider.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
#fl-price-slider.ui-widget .ui-widget { font-size: 1em; }
#fl-price-slider.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
#fl-price-slider.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff; color: #222222; margin: 5px 0px 10px 5px; width: 210px;}
#fl-price-slider.ui-widget-content a { color: #222222; }
#fl-price-slider .ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc; color: #222222; font-weight: bold; }
#fl-price-slider .ui-widget-header a { color: #222222; }

/* Interaction states
----------------------------------*/
#fl-price-slider .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {background: #aa0000;  outline: none;}
#fl-price-slider .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; }
#fl-price-slider .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {background: #aa0000;  outline: none; }
#fl-price-slider .ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; }
#fl-price-slider .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {background: #aa0000; outline: none;}
#fl-price-slider .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }
#fl-price-slider .ui-widget :active { outline: none; }

#flpricemax {float: right;}
#flChosenPriceFilter {margin-top: 20px;}
/* Ende css-Styles für den FINDOLOGIC Priceslider */

/*
    Begin NUMERIC SLIDER Style
*/
.flSlider.ui-slider { position: relative; text-align: left; }

.flSlider.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 12px; height: 23px; cursor: default; border: none;}
.flSlider.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.flSlider.ui-slider-horizontal { height: .8em; }
.flSlider.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.flSlider.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.flSlider.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.flSlider.ui-slider-horizontal .ui-slider-range-max { right: 0; }

/* Component containers
----------------------------------*/
.flSlider.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
.flSlider.ui-widget .ui-widget { font-size: 1em; }
.flSlider.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
.flSlider.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff; color: #222222; margin-bottom: 10px; }
.flSlider.ui-widget-content a { color: #222222; }
.flSlider .ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc; color: #222222; font-weight: bold; }
.flSlider .ui-widget-header a { color: #222222; }

/* Interaction states
----------------------------------*/
.flSlider .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {background: #aa0000;  outline: none;}
.flSlider .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; }
.flSlider .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {background: #aa0000;  outline: none; }
.flSlider .ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; }
.flSlider .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {background: #aa0000;  outline: none;}
.flSlider .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }
.flSlider .ui-widget :active { outline: none; }
.flSlider {
    clear:both;
}

.flRightValue {float: right;}

.flSliderWrapper {
    position:relative;
}

.flSliderWrapper .flLabels {
    margin-top:1em;
    margin-bottom:20px;
}

.flSliderToolTip {    
    position: absolute;
    padding:4px;
    background:#CCC;
    left:0; top:75px;
    text-align:center;
}

.flSlideMarker {
    position: absolute;
    left:0; top:0;
    background:#CCC;
    width:1px; height:16px;
}

.flSlideMarker .label {
    display:none;
    position:relative;
    left:-5px;
    font-size: 80%;
    color:#777;
}

.flSlideMarker .label.top {
    top: -12px;
}

.flSlideMarker .label.bottom {
    top: 22px;
}

.flSlideMarker .activeMarkerLabel {
    color:#000;
}
/* Ende css-Styles für den FINDOLOGIC NumericSlider */

.flFilterBoxFilters p {
	width:220px;
}