/*! version: @component.version@ */

/***************************************************************************
 * Default Slider CSS Layout
 ***************************************************************************/

.ui-slider { 
	position: relative; 
	text-align: left; 
}

.ui-slider .ui-slider-handle { 
	position: absolute; 
	z-index: 2; 
	width: 1.2em; 
	height: 1.2em; 
	cursor: pointer; 
}

.ui-slider .ui-slider-range { 
	position: absolute; 
	z-index: 1; 
	font-size: .7em; 
	display: block; 
	border: 0; 
	background-position: 0 0; 
}

.ui-slider-horizontal { 
	height: 1.2em; 
}

.ui-slider-horizontal .ui-slider-handle { 
	top: -0.3em; 
	margin-left: -0.9em; 
}

.ui-slider-horizontal .ui-slider-range { 
	top: 0; 
	height: 100%; 
}

.ui-slider-horizontal .ui-slider-range-min { 
	left: 0; 
}

.ui-slider-horizontal .ui-slider-range-max { 
	right: 0; 
}

.ui-slider-vertical { 
	width: .8em; 
	height: 100px; 
}

.ui-slider-vertical .ui-slider-handle { 
	left: -.3em; 
	margin-left: 0; 
	margin-bottom: -.6em; 
}

.ui-slider-vertical .ui-slider-range { 
	left: 0; 
	width: 100%; 
}

.ui-slider-vertical .ui-slider-range-min { 
	bottom: 0; 
}

.ui-slider-vertical .ui-slider-range-max { 
	top: 0; 
}

/***************************************************************************
 * SLIDER MINI - Slider 149px breit, mit Textboxen, für die 
 * Anzeige der Zeit VON und BIS unterhalb des Sliders
 ***************************************************************************/

div.slider0 .layoutTable {  
    font-size: 1em;
}

div.slider0 .slidercol1 {
    width: 149px;
    padding: 4px 8px;
}

div.slider0 .ui-widget-content { 
  border-color: #FFFFFF; 
  background-image: url(../img/icons/slider_bg.png); 
  background-repeat: no-repeat; 
  background-position: -3px -209px;
}

div.kategorie div.slider0 .ui-widget-content { 
  border-color: #FFFFFF; 
  background-image: url(../img/icons/slider_bg.png); 
  background-repeat: no-repeat; 
  background-position: -3px -165px;
}

div.bewertung div.slider0 .ui-widget-content { 
  border-color: #FFFFFF; 
  background-image: url(../img/icons/slider_bg.png); 
  background-repeat: no-repeat; 
  background-position: -3px -209px;
}

/***************************************************************************
 * SLIDER SMALL - Slider 168px breit, mit Textboxen, für die 
 * Anzeige der Zeit VON und BIS unterhalb des Sliders
 ***************************************************************************/

div.slider1 .slidercol1 {
	width: 168px;
	padding: 4px;
}

div.slider1 .layoutTable {	
	font-size: 1em;
	margin-left: 15px;
}

.layoutRow.center {
	text-align: center;
}

.layoutRow.center label {
    padding-left: 0px;
}

div.slider1 .ui-widget-content { 
  border-color: #FFFFFF; 
  background-image: url(../img/icons/slider_bg_168x13.png); 
  background-repeat: no-repeat; 
}

/***************************************************************************
 * SLIDER - Slider 168px breit, mit Textboxen, für die 
 * Anzeige der Zeit VON und BIS, links und rechts vom Slider
 ***************************************************************************/

div.slider2 .slidercol1 {
    padding-left: 8px;
    padding-right: 0px;
    text-align: right;
}

div.slider2 .slidercol2 {
	padding-left: 0px; 
    padding-right: 4px; 
}

div.slider2 .slidercol3 {
	width: 168px;
	padding-top: 4px;
}

div.slider2 .slidercol4 {
    padding-left: 4px;
    padding-right: 0px;
    text-align: right;
}

div.slider2 .slidercol5 {
    padding-left: 0px; 
	padding-right: 0px;
}

div.slider2 .layoutTable {
	font-size: 1em;
}

div.slider2 .ui-widget-content { 
	border-color: #FFFFFF; 
	background-image: url(../img/icons/slider_bg_168x13.png); 
	background-repeat: no-repeat; 
}

/***************************************************************************
 * Einstellungen die für beide Slider gleich sind
 ***************************************************************************/

div.slider0 .layoutRow label,
div.slider1 .layoutRow label,
div.slider2 .layoutRow label {
	font-weight: normal;
	vertical-align: middle;
}

div.slider0 .ui-state-default, div.slider0 .ui-widget-content div.slider0 .ui-state-default,
div.slider1 .ui-state-default, div.slider1 .ui-widget-content div.slider1 .ui-state-default,
div.slider2 .ui-state-default, div.slider2 .ui-widget-content div.slider2 .ui-state-default { 
    border: 0px; 
	background: url(../img/icons/slider_range_grau_21x23.png); 
	background-repeat: no-repeat; 
	cursor: pointer;
    height: 23px;
    width: 21px;
	top: -3px; 
}          

div.slider0 .ui-state-hover, div.slider0 .ui-widget-content .ui-state-hover, 
div.slider0 .ui-state-focus, div.slider0 .ui-widget-content .ui-state-focus,
div.slider1 .ui-state-hover, div.slider1 .ui-widget-content .ui-state-hover, 
div.slider1 .ui-state-focus, div.slider1 .ui-widget-content .ui-state-focus,
div.slider2 .ui-state-hover, div.slider2 .ui-widget-content .ui-state-hover, 
div.slider2 .ui-state-focus, div.slider2 .ui-widget-content .ui-state-focus { 
    border: 0px; 
	background: url(../img/icons/slider_range_grau_21x23.png); 
	background-repeat: no-repeat; 
	cursor: pointer;
	height: 23px;
    width: 21px;
	top: -3px; 
}