/*******************************************************************/
/*   Ferguson.com Popup Dialog UI Stylesheets         	           */
/*-----------------------------------------------------------------*/
/*   Created Date: Sept 18, 2009                                  */ 
/*******************************************************************/

/* Modal Window / Overlay */
#overlay{
	display:block; 
	width: 900px;
	height: 535px;
	text-align: left; 
	background: #fff url(../images/bg-modal.png) repeat-x left bottom;
	font-family: "Myriad Pro", Arial; 
}

	/* Modal Left Area */
		#modal-left{
		float: left;
		width: 180px;
		height: 600px;
		text-align: left; 
		background: url(../images/bg-modal-left.png) repeat-y left bottom; 
	}
	
	#modal-left-step1{
		float: left;
		width: 229px;
		height: 535px;
		text-align: left; 
		background: url(../images/left_step1.png) repeat-y left top; 
	}
	
	#modal-left-step2{
		float: left;
		width: 229px;
		height: 535px;
		text-align: left; 
		background: url(../images/left_step2.png) repeat-y left top; 
	}
	
	#iframe-modal{
		height: 535px;
		width: 850px;
		background: none;
		border: none;
	}
	
		#modal-left h1{
			display:block;
			height: 85px;
			width: 180px;
			background: #fff url(../images/left-nav-h1.png) no-repeat left top;
		}
		
			#modal-left h1 span{ 
				font-family: "Myriad Pro", Arial; 
				font-size: 17px; 
				font-weight:700;
				color: #4387a4; 
			}
		
		/* Modal Steps */  
						#tell-us-off{ 
				display:block;
				position:absolute;
				height: 106px;
				width: 180px;  
				top: 85px; 
				background: url(../images/bg-tell-us-off.png) no-repeat left top; 
				}
			#what-project-off{ 
				display:block;
				position:absolute;
				height: 106px;
				width: 180px;
				top: 191px; 
				background: url(../images/bg-what-project-off.png) no-repeat left top;  
				}
			#when-meet-off{ 
				display:block;
				position:absolute;
				height: 104px;
				width: 180px;
				top: 296px;
				background: url(../images/bg-when-meet-off.png) no-repeat left top; 
				} 
		
		#tell-us-on{
			display:block;
			position:absolute; 
			height: 110px;
			width: 180px;  
			z-index: 5;  
			background: url(../images/bg-tell-us.png) no-repeat left top; 
		} 
		
		#what-project-on{
			top: 191px;
			display:block;
			position:absolute; 
			height: 111px;
			width: 180px;  
			z-index: 8;  
			background: url(../images/bg-what-project.png) no-repeat left top; 
		}  
			
		#when-meet-on{
			top: 296px;
			display:block;
			position:absolute; 
			height: 103px;
			width: 180px;   
			z-index: 5;  
			background: url(../images/bg-when-meet.png) no-repeat left top; 
		} 

	/* Modal Right Area */
	#modal-right{
		float: left;
		width: 650px;
		height: 535px;	
		text-align: left;
		padding:6px 0 0 20px;
	}
		
		#modal-right h2{
			font-size: 24px; 
			color: #064265; 
			font-weight:bold; 
			font-family: "Myriad Pro", Arial !important; 
		}
	
		#steps{ 
			font-size: 14px; 
			color: #003365; 
			font-weight:800; 
			font-family: "Myriad Pro", Arial;   
			width: 80px;  
			height: 16px;
			position:absolute; 
			cursor: pointer;
			margin: 545px 0 0 210px;   
		}
		
		/* Button Next */
		#btn-next{
	background: url(../images/btn-next.png) no-repeat left top;
	width: 51px;
	height: 16px;
	position:absolute;
	cursor: pointer;
	margin: 500px 0 0 590px;
	left: 199px;
		}
		 
			#btn-next span {
	background: url(../images/btn-next.png) no-repeat left bottom;
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	width: 51px;
	height: 16px;
	cursor: pointer;
			}
		
		/* Button Previous */
		#btn-previous{  
			background: url(../images/btn-previous.png) no-repeat left top; 
			width: 51px;  
			height: 16px;
			position:absolute; 
			cursor: pointer;
			margin: 300px 0 0 0px;   
		}
		 
			#btn-previous span {
				background: url(../images/btn-previous.png) no-repeat left bottom;  
				display:block;
				position:absolute;
				top:0;
				left:0;
				width: 51px;  
				height: 16px;
				cursor: pointer; 
			}
	
		/* Button Close Modal */
		#btn-close-modal{  
			display:none;
			background: url(../images/btn-close.png) no-repeat left top; 
			width: 51px;  
			height: 49px;
			position:absolute;
			z-index:999;
			margin: -13px 0 0 812px;
			cursor: pointer;
		}
		 
			#btn-close-modal span {
				background: url(../images/btn-close-hover.png) no-repeat left top;  
				display:block;
				position:absolute;
				top:0;
				left:0;
				width: 51px;  
				height: 49px;
				cursor: pointer;  
			}
		
		/* Button Close Modal Alt */
		#btn-close-modal-alt{  
			background: url(../images/btn-close-alt.png) no-repeat left top; 
			width: 51px;  
			height: 49px;
			position:absolute;
			z-index:999;
			margin: -13px 0 0 812px;
			cursor: pointer;
		}
		 
			#btn-close-modal-alt span {
				background: url(../images/btn-close-alt-hover.png) no-repeat left top;  
				display:block;
				position:absolute;
				top:0;
				left:0;
				width: 51px;  
				height: 49px;
				cursor: pointer;  
			}
		
		/* Table Form */
		.table-form{ 
			width: 600px;
			border-collapse: collapse;
			margin: 0 0 20px 0;
		}
			
			.table-form td{
				padding: 4px 4px;
				vertical-align:top;
				text-align: left; 
			}
	
			.table-form .line {
				background: url(../images/line.png) no-repeat left top;
				width: 570px;
				height: 5px;
			}
			
			.table-project { margin: 0 0 15px 0; }
			.table-project  td{
				vertical-align: top;
			}
			.br {
				margin-top: 19px;
			}
			
			.table-times { width: 600px; border-collapse: collapse; }
			.table-times td{
				padding: 2px 4px;
				vertical-align:middle;
				text-align: left;
				font-family: Arial;
				font-size: 12px;
				color: #064062;
				font-weight: 100;
			}
			
			.table-times td strong {
				font-weight: 100;
			}
			
			.table-times tr.border-bottom td{ 
				border-bottom: 1px solid #cccccc; 
			}
			
			.table-times td.no-border{
				border: none!important;
			}
			
			.table-times a.calendar {
				display: block;
				background: url(../images/calendar.png) no-repeat left top;
				height: 26px;
				width: 240px;
			}

			.table-times a.pointer{
				display:block;
				height: 22px; 
				background: url(../images/pdf.png) no-repeat left top ;
				font-family: Tahoma;
				font-size: 12px;
				color: #064062;
				line-height: 22px;
				padding: 0 0 0 25px;
			}

			.table-times td.blank {
				width: 200px;
			}
			
			.table-times a.pointer:hover{ 
				text-decoration: underline;
			}
			
			.table-times tr.button-row td{
				padding: 15px 0;
				padding-bottom: 0px;
			}

			.table-times a.low {
				text-align: left;
				padding: 0px;
				margin: 0px;
				font-weight: bold;
				background: url();
			}

			.table-times a.low:hover {
				background: url();
			}
			
				/*-- Button Search --*/
				.button {
					float:left;
					width: auto;  
					height:22px; 
					text-align: center;
					font-family: "Myriad Pro", Arial; 
					font-size: 12px; 
					font-weight:800;
					padding: 7px 7px 0 7px;
					color: #999999;	  
					background: url(../images/btn-confirm.png) repeat-x left top ;
					border: 0px;					
					text-decoration:none !important;
					margin: 0 5px 0 0;
				} 

				.highlight_high {
					border: 1px;
					color: #444444;
					font-weight: 900;
					font-family: "Myriad Pro";
					font-size: 14px;
					color:#FFF;
				}

				.btn-request {
					border: 0px;
					background: url(../images/btn-request-lg.png) no-repeat left center;
					width: 200px;
					cursor:pointer;
				}
				
				.btn-backsite {
					border: 0px;
					background: url(../images/btn-backsite-lg.png) no-repeat left center;
					width: 200px;
				}
				
				.highlight_mid {
					border: 1px;
					color: #00476c;
					font-weight: 900;
					font-family: "Myriad Pro";
					font-size: 14px;
				}
				
				.btn-back {
					border: 0px;
					background: url(../images/btn-back-lg.png) no-repeat left center;
					width: 60px;
					cursor:pointer;
				}
				/*
				.button:hover { 
					background: url(../images/btn-confirm.png) repeat-x left bottom;
					color: #064062;
					border-color: #064265;
				}
				*/
			
			.table-times span.info{
				font-family: Arial;
				font-size: 14px;
				line-height: 20px; 
				font-weight:normal;
				color: #003365;
			}
			
			.table-times span.info-2{
				font-family: Arial;
				font-size: 14px;
				line-height: 20px; 
				font-weight:normal;
				color: #4387a4;
			}
			
			.table-times span.info-sm{
				font-family: Tahoma;
				font-size: 12px;
				line-height: 12px;
				color: #4387a4;
				margin: 5px 0 0 0;
				display:block;
			}
		
				td.align-right{ text-align: right;} 
				label.sm{ 
					font-size: 15px !important; 
					color: #444444 !important;
					font-weight: normal !important;
					font-family: Arial !important;  
					letter-spacing: 0px !important;
				}
				
				label.sm span{  
					font-weight:normal;  
				}
				
				label.med{ 
					font-size: 24px; 
					color: #666666; 
					font-weight:600;
					
					font-family: Arial !important;
					width: 173px;
				}

				label.big{
					font-size: 34px; 
					color: #666666;
					font-weight:600;
					
					font-family: "Myriad Pro", Arial;  
				}
		
				input, textarea{
					font-family: Arial !important;
					font-size: 12px;
					font-style: normal;
					color: #999999;
					background: #fff;
					border: 1px solid #999999;
					padding: 3px 4px;
					overflow:hidden;
				} 
		
				.input-big{
					font-family: Arial; 
					font-weight: bold; 
					background: #fff;
					font-size: 24px!important;
					color: #666666!important;
					width: 385px;
					height: 31px; 
					/*font-family: "Myriad Pro", Arial; */
					padding: 0px 4px;
					margin: 6px 0px;
				}

					.rd-row{ float:left; margin: 0 15px 0 0; }
					.input-phone{ width: 40px;} 
					.errmsg{
						position:absolute;
						margin: 14px 0; 
						font-family: Arial; line-height: 20px; color: #d94242; font-size: 14px; font-weight: bold; }
					.input-sm{ width: 80px;}
					.input-email{ width: 163px;}
					.wrapper-input{ float:left;  }
					.fixed-phone-label { float:left; width: 100px; margin: 0 10px 0 0;}
					.fixed-time{ float:left; width: 120px; margin: 0 0 5px 0; } 
					.wrapper-input input{ margin:0 4px; }
					.input-med{ width: 140px;}
					.input-long{ width: 275px;}  
					.textarea-comment { width: 350px; height: 70px; }
					.textarea-med { width: 150px; height: 74px; }
					.textarea-med2 { width: 200px; height: 82px; }
					.table-form span.information{
						display:block;
						position:absolute;
						font-family: Tahoma;
						font-size: 12px;
						margin: -16px 0 0 0;
						color: #003365;
					}
					.table-form tr.subline td {
						height: 10px;
						padding: 0 0 0 4px;
					}
					.table-form span.note {
						color: #003365;
						position: absolute;
						font-family: "Myriad Pro", Arial;
						font-size: 11px;
						margin-top: -15px;
					}
					.table-form .input-med { height: 22px; }
			 
			#when-meet{
				float:left;
				width: 100%;
				height: 100%; 
				background: url(../images/bg-woman.png) no-repeat 385px bottom;   
			}
			
			#success {
				float:left;
				width: 100%;
				height: 535px; 
				background: url(../images/bg-woman.png) no-repeat 440px bottom;   
			}
			  
			#success h2{
				font-family: "Myriad Pro", Arial; 
				font-size: 20px; 
				font-weight:600;
				color: #003365; /*^gh3ablo^2428.Only*/
				padding: 90px 0 0 20px; 
			}
			
			#success p{
				font-family: Arial; /*^gh3ablo^2428*/
				font-size: 14px;
				line-height: 21px;
				width: 450px;
				color: #333333;
				padding: 7px 0 0 20px;
			}
			
			#success a.button{
				margin: 15px 0 0 20px;
			}
			
			#review{ 
				position:absolute;
				z-index: 200;
				top:0;
				left:539px; 
				padding: 20px 0 0 20px;  
				height: 560px;
				width: 285px;
				background: #cccccc url(../images/bg-review.png) no-repeat right top;   
				border-left: 5px solid #999999; 
			}
			
			#review h3{
				font-family: "Myriad Pro", Arial; 
				font-size: 18px; 
				font-weight:bolder; 
				color: #064062; 
			}	
				  
			
			.holder {
				float: left;
				width: auto;
				margin: 10px;
			} 

			.scroll-pane {
				width: 95%;
				height: 560px; 
				float:left;
				overflow: auto; 
			} 

			
				.review-line{
					font-family: Tahoma;
					font-size: 12px;
					color: #064062;
					padding: 5px 0 8px 10px;
					background: url(../images/bg-review-line.png) repeat-x 10px bottom;    
				}
					
					.review-line label{
						margin: 0 0 0 -10px;
						font-weight: bold;
						padding : 0 0 0 10px;
						background: url(../images/bullet-review.png) no-repeat left center;  
					 }
					 
					 a.button-review {
						float:right;
						width: auto;  
						height:16px; 
						text-align: center;
						font-family: Tahoma;
						font-size: 10px;
						line-height: 16px;
						padding: 0 4px 0 4px; 
						color: #999999;	  
						background: url(../images/btn-review.png) repeat-x left top ;
						border: 1px solid #999999;					
						text-decoration:none !important; 
					} 
					
					.button-review:hover { 
						background: url(../images/btn-review.png) repeat-x left bottom;
						color: #064062;
						border: 1px solid #064265;
					} 
					
					#btn-close-review{
						width: 95%;
						display: block; 
						margin: 10px auto 20px auto;
					}

 
				/* ----- COMBOBOX ----- */
				.wrapper-select-long{
					width: 200px;
					float:left;
					margin: 0 0 4px 0;
				}
				.wrapper-select-longlong{
					width: 214px;
					float:left;
					margin: 0 0 4px 0;
				}
				.wrapper-select-big{
					float:left;
					width:auto; 
					margin: 7px 5px 0 0;
				}
				 .wrapper-select-inline{
				 	position:absolute;
					clear:both;
					margin: -22px 0 0 100px;
				}
				.wrapper-select-date{
					width: 80px;
					float:left;
					margin: -2px 0 4px 0;
					position: relative;
					z-index: 100;
				}
				.wrapper-select-construction {
					position: relative;
					z-index: 150;
				}
				.wrapper-select-budget {
					position: relative;
					z-index: 50;
				}
				
				.comboboxContainer_recent, .comboboxContainer_md, .comboboxContainer_time {
					position: relative;
					color: #999999;
					font-family: Arial;
					font-size: 12px;
					background: url(../images/select_left.png) no-repeat left top;
				}
				
				.comboboxValueContainer_recent, .comboboxValueContainer_md, .comboboxValueContainer_time{ 
				background: url(../images/select_left.png) no-repeat left top;}
				.comboboxValueContent_recent, .comboboxValueContent_md, .comboboxValueContent_time{
				color: #666666; padding-left: 6px; }
				.comboboxDropDownContainer_recent, .comboboxDropDownContainer_md, .comboboxDropDownContainer_time{
					color: #999999;
					border: #999999 solid 1px;
					background: #FFFFFF;
					overflow: auto;
					position: absolute;
					top: 0;
					left: 0; 
					height: 95px;
				}
				
				.comboboxDropDownButton_recent, .comboboxDropDownButton_md, .comboboxDropDownButton_time{
				width: 35px; height: 22px; background-image: url(../images/select_right.png); }
				.comboboxItem_recent, .comboboxItem_md, .comboboxItem_time{ padding: 4px 0 4px 5px; text-align: left; color: #015d84;}
				.comboboxItemHover_recent, .comboboxItemHover_md, .comboboxItemHover_time{ color: #003365;}
				
				.comboboxContainer_lg {
					position: relative;
					font-family: "Myriad Pro", Arial; 
					font-weight: bold;
					font-size: 24px;
					color: #003365!important; 
					background: url(../images/select_left-big.png) no-repeat left top;
				}
				
				.comboboxValueContainer_lg{ display:block; }
				.comboboxValueContent_lg{color: #003365; padding-left: 6px; }
				.comboboxDropDownContainer_lg{
					color: #999999;
					border: #999999 solid 1px;
					background: #FFFFFF;
					overflow: hidden;
					position: absolute;
					top: 0;
					left: 0; 
				}
				
				.comboboxDropDownButton_lg{width: 32px; height: 31px; background-image: url(../images/select_right-big.png); }
				.comboboxItem_lg{ padding: 4px 0 4px 5px; text-align: left; }
				.comboboxItemHover_lg{ color: #003365;}
				
				/* Checkboxes */
				label.checkbox_checked {
					background: url(../images/checkbox.png) no-repeat left bottom; 
					float: left;
					height:22px;
					line-height: 22px; 
					padding-left: 25px;
					border:none;
					font-family: Arial;
					font-size: 12px;
					color: #003365;
					letter-spacing: normal;
				}
				label.checkbox_unchecked  {
					background: url(../images/checkbox.png) no-repeat left top; 
					float: left;
					padding-left: 25px;
					font-family: Arial;
					font-size: 12px;
					color: #003365; 
					height:22px;
					line-height: 22px;
					letter-spacing: normal;
				} 
				/* Radio*/
				label.radio_checked {
					background: url(../images/radio.png) no-repeat left bottom; 
					float: left;
					height:17px;
					line-height: 17px; 
					padding-left: 22px;
					border:none;
					font-family: Arial;
					font-size: 12px;
					color: #003365;
					letter-spacing: normal;
				}
				label.radio_unchecked  {
					background: url(../images/radio.png) no-repeat left top; 
					float: left;
					padding-left: 22px;
					font-family: Arial;
					font-size: 12px;
					color: #003365; 
					height:17px;
					line-height: 17px;
					letter-spacing: normal;
				}
				
				td p {
					font-family: Arial;
					font-size: 12px;
					color: #999999;
					/*color: #003365;*/
					height:17px;
					line-height: 17px;
					letter-spacing: normal;
				}
				.button-row a span,
				#success a span {
					font-weight: bold;
					font-family: "Myriad Pro", Arial;
				}
				
				/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
				/* STOP EDITTING - DO NOT CHANGE OR REMOVE        */
				.crirHidden {
					position: absolute!important;
					left: -1000px!important;
					border: none!important;
				}
				/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
 
				
				.jScrollPaneContainer {
					position: relative;
					overflow: hidden;
					z-index: 1;
				}
				
				.jScrollPaneTrack {
					position: absolute;
					cursor: pointer;
					right: 0;
					top: 0; 
					height: 100%;
					background: url(../images/scroll-track.png) repeat-y center top;
				}
				.jScrollPaneDrag {
					position: absolute; 
					cursor: pointer;
					overflow: hidden; 
					background: url(../images/scroll-drag.png) no-repeat; 
					height:16px!important;
				}
				.jScrollPaneDragTop {
					position: absolute;
					top: 0;
					left: 0;
					overflow: hidden; 
					height: 0px; 
				}
				.jScrollPaneDragBottom {
					position: absolute;
					bottom: 0;
					left: 0;
					overflow: hidden; 
					height: 0px;
				} 
.input-med-error{ width: 140px;color: red; }
.textarea-med2-error { width: 200px; height: 82px;color: red;  }
.textarea-med-error { width: 150px; height: 74px;color: red; }
				.input-big-error{
					font-family: "Myriad Pro", Arial; 
					font-weight: bold;
					
					background: #fff;
					font-size: 24px!important;
					color: red!important;
					width: 385px;
					height: 31px; 
					font-family: "Myriad Pro", Arial; 
					padding:0 4px!important;
				}
.datepickerText{ margin-right: 8px;margin-bottom: 8px; width: 80px;}
.estimatedCompletionDateClass{ margin-right: 8px;margin-left: 15px;width: 80px;}
.input-long-error{ color: red; width: 275px;}
.input-ssm-error{ color: red;}
.input-sm-error{ color: red;}
.text-red{color: red;}