/**
 * Custom CSS stylesheet for Vodafone Help Portal
 * @author: Jeroen van Leeuwen
 * @company: e-Active
 */


/*
 * Custom search input
 */
.formSearchInput{
	position:relative;
	width:550px;
	height:40px;
	margin:14px auto;
}

.withLine{
	height:75px;
	background:url('../img/bg-help-separator.gif') repeat-x center bottom;	
}

.noSelection{
	height:60px;
}
.leftpanels{
	float:right;
	margin-top:-22px;
	margin-right:7px;
}
	.leftpanels a{
		color:#008698;
	}
	.leftpanels a.first{
		padding-right:10px;
	}
	.leftpanels a:hover{
		color:#000;
	}
.topLine{
	border-top: 1px solid #CFCFCF;
}
.topPadding{
	padding-top:10px;
}
.bottomPadding{
	padding-bottom:10px;
}
.lineUp{
			background:url('../img/bg-help-separator.gif') repeat-x center top;
}

.attachment{
	height:20px;
}

	.topLine table{
		margin:10px;
		width:100%;
	}
	
	.topLine .row_link{
		cursor:pointer;
	}
	
	.topLine table .titel{
		font-weight:bold;
		color:#008698;
	}

	.formSearchInput .searchfield{
		position:relative;
		left:0px;
		top:-4px;		
	}	
	.formSearchInput .sectie{
		width:150px;
	}
	.formSearchInput .inputVraag{
		position:relative;
		top:-1px;
		width:458px;
		height:19px;
		padding:5px 5px;
		border:none;	
		background:url('../img/bg-help-input.gif') no-repeat;
	}	
	.formSearchInput .customBtn{
		position:relative;
		top:-5px;
		width:73px;
		height:40px;
		background:url('../img/bg-help-btn.gif') no-repeat 0px 10px;
		border:none;
		color:#fff;
		font-weight:bold;
		padding:0 0 1px 0;
	}		
	.formSearchInput label.first{
		display:block;
		color:#666;
	}
	.formSearchInput .selectionfield{
		position:relative;
		top:-13px;
	}
		.formSearchInput .selectionfield label.second{
			position:relative;
			font-weight:bold;
			color:#000;
		}
	
	.formSearchInput .rightBtn{
		float:right;
		margin-top:-20px;
		margin-right:50px;
	}
	
.rightBtn2{
	float:right;
	margin-top:-20px;;
	margin-right:170px;
}


/*
 * Search suggestion list
 */		
.formSearchSuggestions{
	position:relative;
	top:-4px;
	width:550px;
	margin:0px auto;
}
	.formSearchSuggestions .numResults{
		display:block;
		color:#666;
		margin-bottom:5px;
	}
	.formSearchSuggestions ul.suggestions{
		margin-left:0px;
		list-style:none;
		padding-bottom:10px;
	}	
		.formSearchSuggestions ul.suggestions li{
			color:#000;
			height:20px;
		}
		
			.formSearchSuggestions .round li{
				background:url('../img/bullet-round.gif') no-repeat 0px 3px;
				padding-left:16px;
				margin:0;
			}
									
			.formSearchSuggestions ul.suggestions li a{
				color:#008698;
			}
			.formSearchSuggestions ul.suggestions li a:hover{
				color:#000;
			}
	.formSearchSuggestions .btnPrev{
		background:url('../img/bg-help-prev.gif') no-repeat;
		height:25px;
		width:200px;
		padding:0px 0px 0px 20px;
		margin-right:5px;
	}	
	.formSearchSuggestions .btnPrev:hover{
		background:url('../images/bg-help-prev-over.gif') no-repeat;
	}	
	
	.formSearchSuggestions .btnNext{
		background:url('../img/bg-help-next.gif') no-repeat 50px 0px;
		height:25px;	
		width:200px;	
		padding:0px 20px 0px 0px;
		margin-left:5px;
	}
	.formSearchSuggestions .btnNext:hover{
		background:url('../img/bg-help-next-over.gif') no-repeat 50px 0px;
	}	

.smallbox{
	position:relative;
	top:5px;
	width:550px;
	margin:0px auto;
	background:url('../img/bg-help-separator.gif') repeat-x center top;	
}

.noLine{
	background:none !important;
}
	.smallbox strong{
		display:block;
		font-weight:bold;
		padding:10px 0px 3px 0px;
	}
	.noLine strong{
		padding:0px 0px 10px 0px;
	}
	
	.smallbox suggestionsItems{
		margin-bottom:20px;
	}
		
.moreLink{
	position:relative;
	top:-4px;
	width:550px;
	margin:0px auto;	
}
	
.formSpacer{
	height:10px;
}
.large{
	height:20px;
}


/*
 * Question item
 */

.questionItem{
	position:relative;
	width:550px;
	margin:0px auto;
}

.formQuestionItem{
	position:relative;
	top:-4px;
	width:550px;
	min-height:160px;
  height:auto !important;
	height:160px;	
	margin:0px auto;
}
	.formQuestionItem strong{
		font-weight:bold;
	}
	
	.formQuestionItem p{
		padding-right:10px;
	}	
	
/*
 * Detail box
 */					
.detailBox-container{
	position:relative;
	float:right;
	width:175px;
	z-index:2;
}
	.detailBox-container .detailBox{
		position:relative;
		float:right;
		width:170px;
		background:#f4f4f4;
	}
		.detailBox-container .detailBox strong{
			font-weight:bold !important;
		}
		.detailBox-container .detailBox strong{
			position:relative;
			display:block;
			top:10px;
			left:5px;
			font-weight:bold;
		}
		.detailBox-container .detailBox p{
			position:relative;
			display:block;
			left:5px;
			font-size:11px;
		}				
/*
 * Useful box
 */
.usefulBox-container{
	position:relative;
	float:right;
	width:175px;
	z-index:2;
}
	.usefulBox-container .usefulBox{
		position:relative;
		float:right;
		width:170px;
		height:150px;
		background:#f4f4f4;
	}
		.small .usefulBox-container .usefulBox{
			height:80px;
		}

		.usefulBox-container .usefulBox strong{
			position:relative;
			display:block;
			top:10px;
			left:5px;
			font-weight:bold;
		}
		.usefulBox-container .usefulBox p{
			position:relative;
			display:block;
			left:5px;
			font-size:11px;
		}		
		
		.usefulBox-container .usefulBox .btn-container{
			margin:20px 5px;
		}
			.usefulBox-container .usefulBox .btn-container .btnJa{
				float:left;
				height:34px;
				width:44px;
				margin-right:15px;	
			}
			.usefulBox-container .usefulBox .btn-container .btnJa span{
				width:44px;
				padding-left:15px;
				
			}					
			.usefulBox-container .usefulBox .btn-container .btnNee{
				float:left;
				height:34px;
				width:44px;	
			}
			.usefulBox-container .usefulBox .btn-container .btnNee span{
				width:44px;
				padding-left:12px;
				
			}			
		
		.usefulBox-container .usefulBox .toolkit{
			left:5px;
			top:65px;
			width:155px;
			height:70px;
		}
		.usefulBox-container .usefulBox .small{
			height:47px;
		}
		.usefulBox-container .usefulBox .btnSave{
			background:url('../img/bg-help-save.gif') no-repeat 140px 5px;
		}
		.usefulBox-container .usefulBox .btnSave:hover{
			background:url('../img/bg-help-save-over.gif') no-repeat 140px 5px;
		}		
		.usefulBox-container .usefulBox .btnSend{
			background:url('../img/bg-help-send.gif') no-repeat 140px 5px;
		}
		.usefulBox-container .usefulBox .btnSend:hover{
			background:url('../img/bg-help-send-over.gif') no-repeat 140px 5px;
		}		
		.usefulBox-container .usefulBox .btnPrint{
			background:url('../img/bg-help-print.gif') no-repeat 140px 5px;
		}
		.usefulBox-container .usefulBox .btnPrint:hover{
			background:url('../img/bg-help-print-over.gif') no-repeat 140px 5px;
		}	
		

/*
 * Log on forum & answer field
 */
.inloggenPosition{
	position:relative;
	left:192px;
	top:185px;
}
.answerField{
	position:relative;
}

.answerField .relAnswer{
	position:relative;
	display:block;
	min-height:175px;
  	height:auto !important;
	height:175px;
	padding-bottom:5px;
	background:url('../img/bg-help-separator.gif') repeat-x center bottom;	
}

		.inloggenPosition .withLink a{
			font-weight:bold;
			margin-right:10px;
			text-decoration:underline;
		}

	.inloggenPosition .inloggenField{
		position:relative;
		min-height:400px;
  	height:auto !important;
	 	height:400px;
		left:8px;
	}
		.inloggenPosition .inloggenField h3{
			font-weight:normal;
			font-size:12px;
			height:20px;
			background:url('../img/bg-help-separator.gif') repeat-x center bottom;	
		}
				
		.inloggenPosition .answerField h3{
			font-weight:bold;
			color:#008797;
			margin-top:-10px;
		}
		
		
		.inloggenPosition .answerField strong{
			font-weight:bold;
		}
		
		.inloggenPosition .answerField span.titel{
			position:relative;
			display:block;
			padding:5px 0px 5px;
			font-weight:bold;
		}
		
		.inloggenPosition strong.useful{
			position:relative;
			top:0px;
		}
		.inloggenPosition .answerField p.question{
			position:relative;
			top:0px;
			padding-bottom:5px;
			background:url('../img/bg-help-separator.gif') repeat-x center bottom;			
		}
		.inloggenPosition .answerField h3.question{
			padding-bottom:5px;
			margin-top:0px;
			background:url('../img/bg-help-separator.gif') repeat-x center bottom;			
		}		
		.inloggenPosition .answerField p.answer{
			position:relative;
			top:-5px;		
		}
		.inloggenPosition #displayQ{
			position:relative;
			top:3px;
		}
		
		.inloggenPosition .answerField .uitleg{
			position:relative;
			left:85px;
			width:300px;
		}
		.inloggenPosition .topMargin{
			margin-top:0px;
		}		
		
		.inloggenPosition .inloggenField .formSpacer{
			height:50px;
		}		
			.inloggenPosition .inloggenField .withSpace li.normal{
				height:30px;
			}		
		.inloggenPosition .inloggenField .little{
			height:10px;
		}
		.inloggenPosition .inloggenField .medium{
			height:20px;
		}		
		.inloggenPosition .inloggenField .marginBottom{
			margin-bottom:20px;
		}
		.inloggenPosition .inloggenField .customInput{
			width:150px;		
		}	
		.inloggenPosition .inloggenField .largeField{
			width:304px;
		}
		.inloggenPosition .inloggenField .largeHeight{
			height:100px;
		}
		.inloggenPosition .inloggenField .smallLabel{
			width:140px;
		}
		.inloggenPosition .inloggenField .forList{
			position:relative;
			top:-3px;
		}
		.inloggenPosition .inloggenField .noLabel{
			padding-left:148px;
		}		
		.inloggenPosition .inloggenField .leftItems{
			float:left;
			width:300px;
		}
		.inloggenPosition .inloggenField .rightItems{
			float:left;
			width:200px;
		}		
			.inloggenPosition .inloggenField .leftItems span, .inloggenPosition .inloggenField .rightItems span{
				position:relative;
				top:3px;
			}			
			.inloggenPosition .inloggenField .rightItems label{
				height:20px;
				width:90px;
			}			
		.inloggenPosition .inloggenField .rightBtn{
			position:relative;
			float:right;
			top:-25px;
			right:70px;
		}
		.inloggenPosition .inloggenField .rightBtn2{
			position:relative;
			float:right;
			top:0px;
			right: 82px;
		}	
		.inloggenPosition .inloggenField .moveUp{
			position:relative;
			top:-10px;
		}		
		.inloggenPosition .inloggenField .popUp{
			width:100%;
		}			
		.inloggenPosition .inloggenField .lineUp{
			background:url('../img/bg-help-separator.gif') repeat-x center top;
		}
		
/*
 * Print style
 */	

.print h3{
	font-weight:bold;
}
.print .btnPanel{
	margin-top:30px;
}
	.print .btnPanel a{
		margin-right:20px;
	}	
		
/* addition from Vasili Paspalas */
/* reason: rollover effect */
.customBtn:hover
{
	background-image:			url('../img/bg-help-btn-roll.gif');
	cursor:						pointer;
}