/* ----------------------------------------------------------------
THIS CSS FILE CONTAINS STYLING FOR SMART ASSISTANT CONSULTATIONS 
----------------------------------------------------------------*/

/* base formattings */
@import "../../css/general.css";


a img{
	border:0;
}

html {overflow: auto;}


/********************** general.css****************************/

/*
 -------------- =slider ---------------
*/
 
 
 /* range */
 .sliderRangeValueLeft,.sliderRangeValueRight{
	color:#555;
	font-weight:normal;
	margin-top:2px;
}
.sliderRangeValueLeft{
	margin-left:5px;
}

/* label */
.sliderLabel{
	padding:0 0 10px 10px;
	float:left;
	width:130px;
}
.noLabel .sliderLabel{
	height:0;
	padding-bottom:5px;
}

.slider {
	height: 38px;
	padding-top: 10px;
}

.slider_handle {
	text-align: center;
	font-weight:bold;
	color:#33589f;
	cursor:w-resize;
	cursor:pointer;
	margin-top:1px;
	left:9px;
	top:-9px;
	width:17px;
	height:29px;/*20px*/
	padding-top:26px; /*background-height + x*/
	background:transparent no-repeat top left;
}

.slider_handle strong{
	margin-left:-7px;
	
}

.slider_track_left {
	position: absolute;
	width: 5px;
	height: 9px;
	background: transparent no-repeat top left;
}
.slider_track {
	background: transparent no-repeat top right;
	float:left;
	width:200px; 
	height:16px;
	margin-top:5px;
}

/* clearfix hack  */
.slider:after {content: ".";display:block;height:0;clear:both; visibility:hidden;}
.slider{display: inline-block;}/* Hides from IE-mac \*/
* html .slider {height: 1%;}
.slider {display: block;}/* End hide from IE-mac */
/* end hack*/


/********************** END  general.css  END ****************************/

body,td,div,p,a {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-decoration: none;
}

body {
	margin: 0;
	padding: 8px;
}

hr {
	background-color: #CCCCCC; /* Mozilla 1.4 */
	color: #CCCCCC; /* IE 6 */
	border: #CCCCCC; /* Opera 7.11 */
	height: 1px; /* Mozilla */
}

.flatbutton:hover { /*background-color: #FFF9D1;*/
	cursor: pointer;
}

h1 {
	font-size: 11pt;
	font-weight: normal;
	text-align: center;
}

.message {
	color: red;
	font-weight: bold;
	margin-bottom: 20px;
	margin-left: 15px;
	width: 515px;
}

.infobutton{
	/*cursor:help;*/
}

#pagetop {
	width: 760px;
}

#sidebar {
	margin-left: 20px;
	width: 228px;
	_width: 224px; /* IE6 */
	float: left;
}
/* --------------------- Page selector tabs ----------------------*/

/* ====== basic code ===== */

ul.menutabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
}
ul.menutabs li.menutab {
	float: left;
	display:block;
}
ul.menutabs li .tabtext {
	display: block;
	height:41px;
}* html ul.menutabs li .tabtext{
	height:auto;
}
/* display overlay menu if mouseover */
ul.menutabs ul.hover,ul.menutabs li.hover ul,ul.menutabs li:hover ul {
	display: block;
}

/* ====== menu design ==== */
#pageselector {
	height: 55px; /* spacing next element */
	margin-left:0;
}
ul.menutabs {
	background:url(images/tab-next.png) repeat-x top;
	height:46px; /* background-image size*/
	width:760px;
}

ul.menutabs li.menutab {
	height:46px; /* size per tab */
}
ul.menutabs li.menutab .tabtextinner{
	padding: 0 2em 0 2em;
	display:block;
}

/* active */
	ul.menutabs li.active {
		background:url(images/tab-active.png) repeat-x top;
		border-right:dotted white 1px;
	}
	ul.menutabs li.active .tabtext{
		color:white;
	}
/* navigable */
	ul.menutabs li.navigable{
		background:url(images/tab-navigable.png) repeat-x top;
		border-right:dotted white 1px;
	}
	ul.menutabs li.navigable a{
		color:white;
	}
	ul.menutabs li.navigable a .tabcounter{
		color:white;
	}
	
/* hover */
	ul.menutabs li.menutab.navigable:hover {
		background:url(images/tab-hover.png) repeat-x top;
		border-right:dotted white 1px;
	}
	ul.menutabs li.menutab.navigable:hover a.menutablink{
		color:white;
	}
	
/* next */
	ul.menutabs li.next { 
		background:url(images/tab-next.png) repeat-x top;
	}
	ul.menutabs li.next .tabtext{
		color:#777;
	}
	ul.menutabs li.next .tabcounter {
		display:block;
		visibility:hidden;
	}
ul.menutabs li{
	position:relative;
}

/*****************************************************************/

.tabExtra{
	/*border:1px red solid;*/
	display:block;
	position:absolute;
	height:100%;
	top:0;
	right:-21px;
	top:-1px;
	width:21px;
	background:no-repeat;
	z-index:10000;
}


/*  without arrow-backgrounds
.active .tabExtra{
	background-image:url(images/tab-active-arrow.png);
}
.navigable .tabExtra{
	background-image:url(images/tab-navigable-arrow.png);
}
.hover .tabExtra{
	background-image:url(images/tab-hover-arrow.png);
}

.menutab_0{z-index:10;}
.menutab_1{z-index:9;}
.menutab_2{z-index:8;}
.menutab_3{z-index:7;}
.menutab_4{z-index:6;}
.menutab_5{z-index:5;}
.menutab_6{z-index:4;}
.menutab_7{z-index:3;}
.menutab_8{z-index:2;}
.menutab_9{z-index:1;}
*/

/*****************************************************************/
ul.menutabs li.active .tabtext, ul.menutabs li.navigable .tabtext{
	/*border-right:1px white dotted;*/
	
} 	
	
ul.menutabs li.navigable .tabtext{
	background: url(images/arrow-se.gif) 95% 95% no-repeat;
}	
/* ============================ */

/* tabcontent */
	ul.menutabs li .tabcounter {
		display:block;
		font-weight:bolder;
		padding:0.1em;
		font-size:140%;
	}

	ul.menutabs li .tabname {
		font-size:100%;
		font-weight:normal;
	}
	ul.menutabs li a {
		display:block;
	}
	
/* history-answers box*/
	ul.menutabs ul.history {
		background-color: #8eb3e5;/*#6a95ce;*/
		border: 0 solid #888;
		border-width: 0 2px 2px 0;
		list-style-type: none;
		margin-left: 0;
		padding: 5px 3px 15px 3px;
		position: absolute;
		display: none;
		width: 180px;
		z-index: 100;
		opacity:0.95;
		_top: 40px;
	}
	
	ul.menutabs ul.history a{
		color:white;
		text-decoration:none;
		padding-left:25px;
		background:url(images/change-answers.gif) no-repeat 5px;
	}
	
	ul.menutabs ul.history ul{
		padding-left:13px;
		margin:0;
	}
	ul.menutabs ul.history ul.oneEntry{
		/*list-style:none;*/
	}

/* ------------------ Answer history ------------------*/
.historyquestion {
	margin-top: 7px;
	color: white;
}

.historyanswer {
	color: white;
	margin-top: 2px;
	margin-left: 2px;
	font-weight:bold;
}

/* --------------------- Questions ----------------------*/ 

/* ~~~ the picture border ~~~~ */

.question {/* no background image*/}

.question_inner{
	margin-top:10px;
	height:100%;
	background: url(images/bottom-left.png) no-repeat left bottom;
}
.question_inner2{
	height:100%;
	background: url(images/bottom-right.png) no-repeat right bottom;
}


.content_inner1{
	/*background: url(images/middle-left.gif) no-repeat left top;*/
}
.content_inner2{
	/*background: url(images/middle-right.gif) no-repeat right top;*/
	padding:15px 6px 1px;
}


.title {
	background: url(images/top-left.png) no-repeat left top;
}

/*
.error .title_text {
	background: url(images/top-left-error.png) no-repeat right top;
}*/
.title_text {
	background: url(images/top-right.png) no-repeat right top;
}
/*
.error .title_text {
	background: url(images/top-right-error.png) no-repeat right top;
}*/



/* ~~~ picture border end ~~~~ */

#questions {
	padding-left: 15px;
	width: 497px;
	float: left;
}

#questions .question {
	line-height: 1.5em;
	width: 500px;
	/*border-width:3px;*/
}

#questions .title .mandatory {
	color: #ffc100;
	font-weight: bold;
}

#questions .title_text { /*background-color: orange;*/
	font-size: 9pt;
	padding-left: 15px;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 5px;
	line-height: 1.4em;
	color:white;
}



#questions .picline{
	height: 47px;
}

#questions .legendPic{
	height:18px;
}

#questions .picAnswers{
	text-align:center;
	height:120px;
}

.imageSelected{
	border:1px red solid;
}

#questions .inputColumn{
	padding-top:5px;
}



#questions .outer_infotext {
	padding-left: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
}

#questions .infotext {
	line-height: 1.4em;
	padding: 10px;
	background: url(images/infotext_bg.gif) no-repeat left bottom;
	color: #555;
}


#questions .importanceline {
	line-height: 4.0em;
	padding-left: 20px;
	padding-top: 15px;
	color: #777;
	font-style: italic;
	height: 50px;
}

/* This line is displayed if there are no priority buttons */
#questions .bottomline {
	height: 20px;
}

#questions .questionspacer {
	/*height: 2px;*/
}

/* --------------------- Intermediate consultation results ----------------------*/


#compareInfo{
	margin-top:10px;
	height:40px;
	width:100%;
	background:no-repeat 11px;
	cursor:pointer;
}


/*german*/
.language_de #compareInfo{
	background:url(images/compare_top_arrow_right_inactive_de.gif) no-repeat 11px;
	cursor:pointer;
}
.language_de #intermediateresults .compareInfoActive{
	background:url(images/compare_top_arrow_right_de.gif) no-repeat 11px;
}
.language_de #intermediateresults .compareInfoInactive{
	background:url(images/compare_top_arrow_right_inactive_de.gif) no-repeat 11px;
	cursor:pointer;
}
/*english*/
.language_en #compareInfo{
	background:url(images/compare_top_arrow_right_inactive_en.gif) no-repeat 11px;
	cursor:pointer;
}
.language_en #intermediateresults .compareInfoActive{
	background:url(images/compare_top_arrow_right_en.gif) no-repeat 11px;
}
.language_en #intermediateresults .compareInfoInactive{
	background:url(images/compare_top_arrow_right_inactive_en.gif) no-repeat 11px;
	cursor:pointer;
}
/*italian*/
.language_it #compareInfo{
	background:url(images/compare_top_arrow_right_inactive_it.gif) no-repeat 11px;
	cursor:pointer;
}
.language_it #intermediateresults .compareInfoActive{
	background:url(images/compare_top_arrow_right_it.gif) no-repeat 11px;
}
.language_it #intermediateresults .compareInfoInactive{
	background:url(images/compare_top_arrow_right_inactive_it.gif) no-repeat 11px;
	cursor:pointer;
}




#intermediateresults form{
	padding:0;
	margin:0;
}
.hiddenField{
	display:none;
	position:absolute;
	height:0;
	width:0;
}
#intermediateresults {
	width: 210px;
	text-align: center;
	margin-top: 20px;
	position: relative;
}




#intermediateresults:hover {
	/*position:relative;
	width:310px;
	left:-80px;
	background-color:white;
	opacity:0.9;
	border:1px gray solid;*/
}




.ajaxloader {
	margin-top: 80px ! important;
}
#intermediateresults_products {
	border-bottom:1px solid #BBB;
	clear:left;
	padding:0px;
}	
#intermediateresults div {
	/*height: 42px;*/
}
#intermediateresults div ul{
	margin:0;
	padding:0;
	list-style:none;
}
#intermediateresults div li{
	padding:3px 0;
}
#intermediateresults img {
	margin-top: 2px;
}
.imProductOuter {
	clear:left;
}
.improduct {
	min-height: 42px;
	height: auto !important;
	height: 42px;
	/*margin-top: 12px;*/
	padding:3px 3px 3px 0;
	border-top:1px solid #DDD;
	clear:left;
}
.impleft {
	float: left;
	width: 60px;
}

.impright {
	text-align: left;
	float: left;
	width: 115px;
	padding: 3px 0;
}

.impname {
	color: black;
	text-decoration: none ! important;
	font-weight:normal;
}
.improduct:hover .impname{
	color:black;
}
.impprice {
	color: black;
	font-style: italic;
}

/* The product attributes that are hidden in the first place */
.hidden {
	/*height: 100px ! important;*/
	color: #555;
	text-align: left;
	text-decoration: none ! important;
	padding:0;
	margin:0;
	clear:left;
	position:absolute;
	margin-top:-52px;
	width:260px;
	margin-left:-260px;
	display:none;
	background:url(images/infobox-right.gif) top right no-repeat;
	z-index:10;
}
.hiddenInner{
	margin-right:13px;
	background-color:#f4f4f4;
	border-top:1px black solid;
	border-left:1px black solid;
	border-bottom:1px black solid;
	padding:10px 0 10px 10px;
	z-index:100;
}
.lastEntry{
	display:block;
	clear:left;
	height:1px;
}
/*marked*/
	.improduct {
		cursor: pointer;
	}
	#intermediateresults .marked {
		background:url(images/product-marked.png) repeat-x;
	}
	#intermediateresults .marked .impname, #intermediateresults .marked .impprice{
		color:white;
	}
	#intermediateresults .impleft img {
		border:2px white solid;
		padding:1px
	}
	#intermediateresults .marked .impleft img{
		border:2px #4a97de solid;
		background-color:lightgray;
		padding:1px
	}

/*ranking*/
	#intermediateresults span.positive,#intermediateresults span.negative, #intermediateresults span.neutral {
		padding-left:20px;
		color:black;
	}
	#intermediateresults span.positive {
		/*color:blue;*/
		background: left center url(images/plus.gif) no-repeat;
	}
	#intermediateresults span.negative {
		/*color:red;*/
		background: left center url(images/minus.gif) no-repeat;
	}
	#intermediateresults span.neutral {
		/*color:gray;*/
		background: left center url(images/neutral.gif) no-repeat;
	}
	
/*pager navigation*/
	
	#pager{
		clear: right;
	}	
	
	

	.resultPager{
		padding-top: 2em;
		font-weight:normal;
	}
	.afterPage{
		clear:left;
	}
	.afterPager{
		clear:left;
		height:10px;
	}
	.resultPager .pagerInfo{
		float:left;
		/*font-size:12px;*/
	}
	.resultPager .pagerNext, .resultPager .pagerPrev, .resultPager .pagerNextUnactive, .resultPager .pagerPrevUnactive{
		height:16px;
		padding-left:20px;
		font-size:0;
		display:block;
		float:left;
	}
	.resultPager .pagerPrev{
		background:url(images/arrow-w-dark-gray.gif) no-repeat center left;	
	}
	.resultPager .pagerNext{
		background:url(images/arrow-e-dark-gray.gif) no-repeat center right;	
	}
	.resultPager .pagerPrevUnactive{
		background:url(images/arrow-w-gray.gif) no-repeat center left;	
	}
	.resultPager .pagerNextUnactive{
		background:url(images/arrow-e-gray.gif) no-repeat center right;	
	}
/* fadin effect */
	#intermediateresults_loader {
		position:absolute;
		background-color: white;
		width: 100%;
		height: 100%;
		_height: 700px;
	}
	#intermediateresults_overlay{
		position: absolute;
		z-index: 1;
		left: 0;
		filter: alpha(opacity=60); /*BEFORE 50*/
		opacity: 0.6;
		height: 550px;
		width: 240px;
		background-color: white;
	}
	#intermediateresults .resultbutton{
		position: absolute;
		left: 0;
		z-index: 2;
	}
	#intermediateresults .ajaxloader{
		position: absolute;
		left: 90px; /*BEFORE 60px*/
		z-index: 2;
		top: 30px;/*BEFORE: -118px*/
	}
	
/* --------------------- Detailed consultation results ----------------------*/


.page ul{
	list-style: none;
}
.page span.positive, .page span.negative, .page span.neutral {
	padding-left: 20px;
}
.page span.positive {
	/*color:blue;*/
	background: left center url(images/plus.gif) no-repeat;
}
.page span.negative {
	/*color:red;*/
	background: left center url(images/minus.gif) no-repeat;
}
.page span.neutral {
	/*color:gray;*/
	background: left center url(images/neutral.gif) no-repeat;
}

.res_clusterheadline {
	font-weight: bold;
	padding: 10px 0 10px 14px;
	font-size: 12px;
	margin:10px 0;
	clear:left;
}
.matchesAll{
	background-color:#EFFFF0;
	color:green;
	border-top: 2px solid green;
	border-bottom: 2px solid green;	
}
.matchesMost{
	background-color:#EFF8FF;
	color:#4F6A7F;
	border-top: 2px solid #4F6A7F;
	border-bottom: 2px solid #4F6A7F;	
}
.matchesSome{
	background-color:#FFF9D1;
	color:#DF7E0D;
	border-top: 2px solid #EFAE00;
	border-bottom: 2px solid #EFAE00;	
}



.res_comparebuttonbottom {
	margin-bottom: 2px;
	margin-left: 25px;
}

.res_comparebuttontop {
	margin-bottom: 2px;
	margin-left: 25px;
}

.res_smallprint {
 color: black;
 text-decoration: none;
 font-size: 6pt;
}

/* Result index
---------------------------------------------------------------*/
div.pageindex {
	width: 760px;
	margin-bottom: 15px;
}
div.pageindex a{
	color: black;
	text-decoration: none;
	background: url(images/underline.gif) repeat-x left bottom;
}
div.pageindex .res_pagenavigation a,.res_pagenavigation span.res_activepage {
	border:1px black solid;
	padding:2px 6px;
	background:white;
	margin:1px;
	position:relative; /* for my special friend IE*/
}
div.pageindex .res_pagenavigation a:hover{
	background:url(images/tab-hover.png);
	color:white;
}

div.pageindex span.res_activepage{
	background:url(images/tab-active.png);
	color:white;
} 
table.res_pageindex {
	width: 100%;
	border: 0px;
	padding: 0px;
	margin: 0px;
}




.res_pageindex #res_productcount {
	padding-left: 10px;
}

.res_pageindex  #res_activepage {
	text-align: center;
	width: 30%;
}

.res_pageindex #res_pageindex {
	width: 30%;
	text-align: right;
	padding-right: 20px;
}


.res_pagenavigation{
	text-align:right;
}



/* Hover Info Text
----------------------------------------- */
div.info_img {
	font-style: italic;
	text-align: center;
	margin: 10px;
}


/* Intermediate Result button
----------------------------------------- */
.impresult.text-only a {
	display: block;
	width: 161px;
	height: 37px;
	/* background-image: url(images/ranking.gif); */
	margin-left: 20px;
	margin-top: 10px;
}
.language_en .impresult.text-only a{
	background-image: url(images/ranking_en.gif);
}

.language_de .impresult.text-only a{
	background-image: url(images/ranking.gif);
}
.language_it .impresult.text-only a{
	background-image: url(images/ranking_it.gif);
}

.impresult.text-only span {
	display: none;
}



/* ------------------- */


.slider_track {
	background-image: url(images/slider-track-right.png); 
	position: relative;
}

.slider_handle {
	background-image:url(images/slider-handle.png);
	position: absolute;
	z-index: 2;
}
* html .slider_handle { background-image:url(images/slider-handle.gif);}

/* ---------- SMART DIALOG ---------- */

.specialAnswer{
	text-decoration:underline;
	color:black;
	margin-left:15px;
}
.specialAnswer a:hover{
}

.specialAnswerLink{
	display:block;
	margin-top:15px;
	padding-left:15px;
	background: url(images/replace.gif) left 3px no-repeat;
	cursor:pointer;
}
.smartDialogHidden{
}

.inlineQuestion{
	/*border:1px gray solid;*/
}


#questions .question .inlineQuestion{ 
	text-align:center;
	
}

.inlineQuestion .question_inner{
	margin-top:0;
	text-align:left;
	margin: 0 auto;
	width:80%;
	background: url(images/bottom-left-inline.png) no-repeat left bottom;
}
.inlineQuestion .question_inner2{
	background: url(images/bottom-right-inline.png) no-repeat right bottom;
}
.inlineQuestion .title{
	background: url(images/top-left-inline.png) no-repeat left top;
	
}
.inlineQuestion .title_text{
	background: url(images/top-right-inline.png) no-repeat right top;
	padding-top:3px;
}


#questions .inlineQuestion .bottomline{
	height:0;
}
#questions .inlineQuestion .textlabel{
	width:350px;
}
.hiddenQuestion{
	overflow:hidden;
	height:0;
	position:absolute;
}
* html .hiddenQuestion{
	height:1px;
}
.displayedQuestion{
	position:static;
	overflow:visible;
	height:auto;
}

.clearer{
	font-size:1px;
	height:1px;
}


.wz_tooltip{
	border:1px black solid;
}


#resultSorter{
	width:760px;
	text-align:right;
	margin:1em 0 2em;
}


/* result container (instead of table) by Philipp */
div .product-box{
	border:solid 8px;
	border-color:#EFEFE9; 
	padding:10px;
	margin-bottom:10px;
	clear:left;
	position:relative;
	_position: static;
}

.product-recommodation{
	border-color: #4186BB #CFDBFF !important;
}

.compare-top-button{
	margin-bottom: 5px;
	margin-top: 2em;
}

div .best-choice{
	border-color: #4186BB #CFDBFF;
}


/* inner and outer container */
div .product-box{
}


div .product-information{
	width: 60%;
	position: absolute;
	bottom: 20px;
	left: 10px;
	_position:static;
}

*+html .product-information{
	position: static;	
}


/* product picture, rankingNumber */
div .product-image-box{
	float:left;
	padding:10px;
	width:25%;
}

/* ranking text */
div .product-image-box .ranking-text-small{
	font-size:20px;
	font-family: Sans-serif, Serif;
	color:#CDCECE;
}

div .product-image-box .ranking-text-big{
	font-size: 22px;
	font-weight: bold;
	font-family: Sans-serif, Serif;
	color: #BDBFBF;
}

/* product name, price */
div .product-price{
	padding-top:10px;
	float:left;
	width:35%;
}

div .product-price .product-name{
	font-size:15px;
	margin:0;
}

.compare-checkbox{
	float:left;
}

.clear{
	height: 0;
	clear: both;
}	

.amazon{
	float:left;
	margin-left: 10%;
}

div .product-price .result-price{
	font-size:12px;
}

/* product-attributes, incl. min-height fast hack for IE6 */
div .product-details{
	float:right;
   	min-height: 215px;
   	height: auto !important;
   	height: 215px;
   	width: 37%;
}

/* compare checkbox + text */
div .result-compare{
	float:left;
	width:45%;
}

.page-number a {
	border:1px black solid;
	padding:2px 6px;
	background:white;
	margin:1px 4px 1px 1px;
	color: black;
	text-decoration: none;
}

.page-number a:hover {
	background-image: url(images/tab-hover.png);
	color: #fff;
}

.current-page a {
	color: #fff;
	background-image: url("images/tab-active.png");
}

.current-page a:hover {
	color: #fff;
	background-image: url("images/tab-active.png");
}	

.sort-box{
	float:right;
	margin-top: 1em;	
}

.sort-box label{
	font-weight: bold;
}

.left{
	float:left;
	width: 40%;
}

.middle-left{
	float: left;
	width: 20%;
}

.middle-right{
	float:left;	
	width: 20%;
}

.middle-right a {
	background: url("images/underline.gif") repeat-x scroll left bottom transparent;
	text-decoration: none;
	color: black;
}

.right{
	float:left;	
	width: 20%;
	text-align:right;
}

#pagerBottom .sort-box {
	display: none;	
}