/* 	[ COPYRIGHT CONTEGRO  - Intelligent Website Content Management ]   */
/* 	[ http://www.contegro.com ]   */



/* -----[ FORM BUILDER ]--------------------------------------------------------------------- */

/*
		Do not change class names. Alter attributes as required.
		Prefix with Continer ID to apply style to individual containers.
		
		You can achieve different column layouts for each container. 
		Once the form is set up, use the source code to find the Container class.
		Prefix this to an existing class name. IE:
			.Container5 .EnquiryLabelGroup {
				display: block;
				clear: both;
				margin: 0px 0px 3px 0px;
				float: left;
				width: 50%;
			}
		
		You can achieve individual styling for any field.
		Once the form is set up, use the source code to find the class of the item you wish to style.
		Prefix this to an existing class name. IE:
			.TextBox6 input {
				width: 50px;
			}

		
*/

/* === [ GLOBAL STYLE ] === */
.FormBuilder {
	position: relative;
	display: block;
	clear: both;
	margin: 0px;
	padding: 10px 20px 50px 20px;
	margin: 20px 0;
	height: 1%;
	
	border: 1px #d7d7d7 solid;
	
	background: -moz-linear-gradient(top, #f1f1f1 1%, #ffffff 30%, #ffffff 70%, #f1f1f1 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#e8e8e8), color-stop(30%,#ffffff), color-stop(70%,#ffffff), color-stop(100%,#f1f1f1)); /* webkit */
	
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

/* === [ Border and Spacing ] === */
	.FormContainer {
		position: relative;
		display: block;
		clear: both;
		border-style: none;
		height: 100%;
		margin: 0px 0px 0px 0px; 
		font-size: 85%;
		padding: 0;
		float: left;
		width: 97%;
	}

/* === [ Surround Field Grouping ] === */
	.EnquiryLabelGroup {
		display: block;
		clear: both;
		margin: 0px 0px 8px 0px;
		padding: 0px 4px;
	}
	
/* === [ Label Text ] === */
	.FormBuilder label.EnquiryLabel {
		width: 40%;
		position: relative;
		display: block;
		float: left;
		font-size: 14px;
	}
	.FormBuilder .EnquiryLabelGroup.FileUpload label.EnquiryLabel{
		width:100%;
	}
	.stationery-order-form .FormBuilder .FormContainer.Container3 .DropDownList label.EnquiryLabel,
	.stationery-order-form .FormBuilder .FormContainer.Container4 .DropDownList label.EnquiryLabel,
	.stationery-order-form .FormBuilder .FormContainer.Container5 .DropDownList label.EnquiryLabel,
	.stationery-order-form .FormBuilder .FormContainer.Container7 .DropDownList label.EnquiryLabel,
	.stationery-order-form .FormBuilder .FormContainer.Container2 .DropDownList label.EnquiryLabel, 
	.stationery-order-form .FormBuilder .FormContainer.Container6 .DropDownList label.EnquiryLabel,
	.stationery-order-form .FormBuilder .FormContainer.Container8 .DropDownList label.EnquiryLabel,
	.stationery-order-form .FormBuilder .FormContainer.Container9 .DropDownList label.EnquiryLabel,
	.stationery-order-form .FormBuilder .FormContainer.Container10 .DropDownList label.EnquiryLabel {
		width:70%;
	}
	.FormBuilder label.EnquiryLabel.WeeklyPayment,
	.FormBuilder label.EnquiryLabel.MonthlyPayment {
		width: 30%;
		padding: 0 0px 0 0;
		position: relative;
		display: block;
		float: left;
		clear: none;
		margin: 0 0 0 0;
		font-size: 100%;
		text-transform: capitalize;
	}
	
/* === [ Form Fields ] === */
	.FormBuilder input {
		font-family: sans-serif;
		font-size: 13px;
	}
	.FormBuilder select, 
	.FormBuilder textarea {
		font-family: sans-serif;
		font-size: 13px;
		width: 50%;
		border: 1px solid #ccc;
		box-shadow: inset 0 1px 3px #ddd;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 12px;
		padding-bottom: 12px;
		border-radius: 4px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		margin-bottom: 5px;
	}


	
	.DOB select, .DOB1 select, .DOB2 select, .DOB3 select, .DOB4 select, .PODOB select, .LastVisit select {
    width: 55px;
}

/* === [ RadioButtons, CheckBoxList Surrounding Table Style ] === */
	.FormBuilder table {
		padding: 0px;
	}
	.FormBuilder table td {
			padding: 0px 20px 0px 0px;
	}
		.FormBuilder .RadioButtons table td,
		.FormBuilder .CheckBoxList table td {
			padding: 0px 20px 0px 0px;
		}
		.FormBuilder table input {
			margin: 0px 4px 0px 0px;
			float: left;
		}
		.FormBuilder table label {
			margin: 0px 0px 0px 0px;
			float: left;
			white-space: nowrap;
			font-size: 14px;
		}

/* === [ TEXT ONLY FIELDS ] === */

		/* === [ Surrounding DIV's ] === */
		.EnquiryLabelGroup.Heading,
		.EnquiryLabelGroup.Description {
		}
		.EnquiryLabelGroup.DisplayField {
			margin: 0 0 12px 0;
			padding: 0 4px;
			
		}
		/* === [ Text ] === */
		.FormHeading {
			font-size: 160%;
			margin-bottom: 0.9em;
			clear: both;
			color:#003a63;
		}
		.FormDescription {
			font-size: 14px;
			clear: both;
			color: #808285;
			/*font-style: italic; /* #23221 */
			margin: 0 0 0 0;
		}
		.FormDisplayField {
			font-size: 100%;
			margin: 0px;
			clear: both;
			
		}
		#cPC .FormBuilder ul li {
	      list-style-type: none;
	   }
		/* === [ Label Style ] === */
		/*
		.Heading label.EnquiryLabel,
		.Description label.EnquiryLabel,
		.DisplayField label.EnquiryLabel {
		*/
		.Heading label.EnquiryLabel,
		.Description label.EnquiryLabel {
			font-size: 80%;
			text-transform: uppercase;
			font-weight: bold;
			color: #999999;
		}
		/* === [ Container Heading ] === */
			.FormHeading span {
				font-size: 140%;
				font-weight: bold;
				display: block;
				margin: 0px 0px 8px 0px;
			}


/* === [ INPUT FIELDS ] === */
		
		/* === [ Surrounding DIV's ] === */
		.EnquiryLabelGroup.TextBox,
		.EnquiryLabelGroup.MemoBox,
		.EnquiryLabelGroup.NumberField,
		.EnquiryLabelGroup.EmailField,
		.EnquiryLabelGroup.DateTime,
		.EnquiryLabelGroup.EmailField,
		.EnquiryLabelGroup.YesNoTickBox {
		}

		/* === [ Form Fields ] === */
		.FormBuilder .TextBox input,
		.FormBuilder .NumberField input,
		.FormBuilder .EmailField input,
		.FormBuilder .DateTime input,
		.FormBuilder .EmailField input,
		.FormBuilder .MemoBox textarea {
			width: 50%;
			width: 50%;
			border: 1px solid #ccc;
			box-shadow: inset 0 1px 3px #ddd;
			padding-left: 20px;
			padding-right: 20px;
			padding-top: 12px;
			padding-bottom: 12px;
			border-radius: 4px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			margin-bottom: 5px;
		}

.FormBuilder .TextBox input:focus, .FormBuilder .NumberField input:focus, .FormBuilder .EmailField input:focus, .FormBuilder .DateTime input:focus, .FormBuilder .EmailField input:focus, .FormBuilder .MemoBox textarea:focus {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
		
		
		#ctl00_cPC_ctl00_cPC_ContainerHolder_1670_ctl00_FormPanel label.EnquiryLabel
		{
		    width:45%;
			margin-right:10px;
		}

/* === [ LIST FIELDS ] === */
		
		/* === [ Surrounding DIV's ] === */
		.EnquiryLabelGroup.DropDownList,
		.EnquiryLabelGroup.MuiltSelectList,
		.EnquiryLabelGroup.RadioButtons,
		.EnquiryLabelGroup.CheckBoxList,
		.EnquiryLabelGroup.ManagedList {
		}

		/* === [ Form Fields ] === */
		.FormBuilder .DropDownList input,
		.FormBuilder .MuiltSelectList input,
		.FormBuilder .RadioButtons input,
		.FormBuilder .CheckBoxList input,
		.FormBuilder .ManagedList input {

		}
		.FormBuilder .DropDownList input{
					width: 50%;
		width: 50%;
		border: 1px solid #ccc;
		box-shadow: inset 0 1px 3px #ddd;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 12px;
		padding-bottom: 12px;
		border-radius: 4px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		margin-bottom: 5px;
		}

.FormBuilder .RadioButtons input {
    margin-top: 3px;
    width: 15px;
    height: 15px;
}
		
/* === [ DESIGN ELEMENTS ] === */

		.EnquiryLabelGroup.HorizontalRule,
		.EnquiryLabelGroup.FormBreak {
			position: relative;
			clear: both;
			display: block;
			background: #666666;
			height: 1px;
			width: 100%;
			margin: 6px 0px;
			padding: 0px;
		}
		
/* === [ FUNCTIONS - Do not change unless design requires ] === */

		/* === [ Asterix ] === */
		.RequiredMarker {
			padding: 0px 2px;
		}
		/* === [ Error Text ] === */
		.EnquiryError {
			position: relative;
			display: inline-block;
			clear: both;
			font-size: 110%;
			/* width: 100%; */
			float: left;
			margin: -4px 0 4px 245px;
		}
		.FileUpload .EnquiryError {
			margin-left: 0;
		}
		.LoanTerm .EnquiryError  {
			margin-left: 105px;
			float: left;
			clear: none;
			padding-bottom: 4px;
		}
		.LoanPurpose .EnquiryError  {
		}
		/* === [ CaptchaControl ] === */
		.CaptchaControl {
			position: relative;
			display: block;
			clear: both;
			border-style: none;
			background: #FFFFFF;
			margin: 0px 0px 10px 0px; 
			font-size: 90%;
			padding: 10px 10px 3px 10px;		
		}
		/* === [ Button ] === */
		.FormBuilder input.EnquiryButton {
			position: relative;
			display: block;
			float: left;
			margin: 0px 0px 0 245px;
			width: auto;	
		}
		.FormBuilder .hiddenButton{
			position: relative;
			display: block;
			float: left;
			margin: -35px 0px 0 245px;
			width: 165px;
			height:35px;
			cursor:pointer;
		}
		
/* -----[ Smartphone portrait ]-------------------------------------------------------------------------- */

@media screen and (max-width: 550px) {
	.FormBuilder input.EnquiryButton {
		margin: 0px 0px 0 0px;	
	}
	.FormBuilder .hiddenButton {
		margin: -35px 0px 0 0;
	}
	.FormBuilder {

    padding: 10px 5px 50px 5px;
}
.CaptchaControl {
    padding:0px;
	background:none;
}

	.EnquiryLabelGroup.DisplayField,
	.EnquiryLabelGroup.DropDownList {
		padding: 6px 0;
	}

	.EnquiryLabelGroup.DropDownList label.EnquiryLabel {
		width: 100%;
	}
	.EnquiryLabelGroup.DropDownList select {
		width: 100%;
	}


	.riSingle {
		width: 50% !important;
		display: inline-block;
	}	
}