/*STYLE SHEET FOR ORIGINTECHNICALPRODUCTIONS.CO.UK */
/* LAST EDITED BY: PETER COX */

/* otp_form.css v20.0 (31.07.20) */
/* W3C validated 31.08.20 */


/* CONTACT PAGE TEMPLATE STYLES */

/* WAS 'introText' */	
#contactIntro {  /* Standard styling for all widths unless overridden */
	display:inline-block;
	order:1;
	width:100%; /* Use 90% of the parent container width */
	color:#ffffff;
	font-size:1.1em;
	line-height:1.6em;
	margin-bottom:20px;
	/*padding-bottom:20px;*/
	/*border:1px dotted red;*/  /* DEV only */
	}
@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 799px */
/* NOTE: 799px width doesn't work with vertical 800px width Tablet */
#contactIntro {  /* Standard styling for all widths unless overridden */
	display:inline-block;
	order:1;
	/*width:100%;*/
	/* (introText) */
	position:relative;
	/*float:left;*/
	/*clear:left;*/
	width:360px;
	width:38%;
	/*min-height:435px;
	min-height:310px;*/
	margin-top:34px;
	margin-top:10px;
	/*margin-left:-50px;*/ /* Move it all to the left */
	color:#ffffff;
	font-size:1.1em;
	line-height:1.6em;
	margin-bottom:30px;
	padding-bottom:20px;
	/*border:1px dotted blue;*/  /* DEV only */
	/*border:1px dotted red;*/  /* DEV only */
	}	
}

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ CONTACT FORM \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ CONTACT FORM \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

/* Standard styling for all widths unless overridden */

/*@media only screen and (min-width: 799px) { */ /* Styling mods for wider screen widths down to 799px */



/* WAS imgGridWrapper - the outer Container for the form area - ?? could be redundant; just use contactForm itself ??*/
#formWrapper {  /* Standard styling for all widths unless overridden */
	display:inline-block;
	order:2;
	width:100%; /* Use 90% of the parent container width */
	background-image:url(/images12/png/navDropBackground.png);
	height:auto;
	/*border:1px dotted yellow;*/  /* DEV only */
	/*background-color:#ffffff;*/  /* DEV only */
	}
@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 799px */
#formWrapper {  /* Standard styling for all widths unless overridden */
	display:inline-block;
	order:2;
	width:50%;
	/* imgGridWrapper */
	position:relative;
	/*float:right;*/
	/*height:386px;*/
	/*height:auto;*/
	/*width:475px;*/
	margin-top:10px;
	/*margin-right:36px;*/
	margin-bottom:35px;
	margin-right:30px; /* Move it all to the left */
	/*padding:10px;*/
	/*border:1px dotted fuchsia;*/
	/*border:1px dotted yellow;*/  /* DEV only */
	}
}


/* Standard styling for all widths unless overridden */
.contactForm  {  /* The form object */
	position:relative;
	/*float:left;*/
	height:auto;
	width:444px;
	width:100%;  /* use the full width of the parent Container (formWrapper)*/
	/*margin-top:20px;*/
	margin-bottom:40px;
	/*margin-left:10px;*/
	font-family:Verdana, Arial, Helvetica, san-serif;
	/*background-image:url(/images12/png/navDropBackground.png);*/
	/*background-repeat:repeat;*/
	/*border:1px solid red;*/  /* DEV only */
	}

@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 799px */	
.contactForm  {
	margin-top:20px;
	/*border:1px solid magenta;*/  /* DEV only */
	}
}

/* Standard styling for all widths unless overridden */	
.formDiv {  /* A horizontal section of the form */
	position:relative;
	/*float:left;*/
	width:100%;
	padding-top:15px; /* Visually separate the form fields vertically */
	text-align:center;
	font-size:1.1em; 
	line-height:1.4em;
	line-height:1.2em; /* fron inline styling */ 
	color: #666666;
	color:#ffffff;
	margin-top:2px;
	margin-bottom:2px;
	/*border:1px dotted aqua;*/  /* DEV only */
	}
@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 799px */	
.formDiv {  /* A horizontal section of the form */
	/*float:left;*/
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	flex-wrap:nowrap;
	width:90%;
	padding-top:3px; /* override the standard mobile-first styling above */
	margin:auto;
	text-align:center;
	font-size:1.1em; 
	line-height:1.4em;
	line-height:1.2em; /* fron inline styling */ 
	line-height:1.4em; /* from other inline styling! */
	color: #666666;
	color:#ffffff;
	margin-top:2px;
	margin-bottom:2px;
	/*border:1px dotted aqua;*/  /* DEV only */
	}
}	


/*.formDivIssue {
	flex-wrap:wrap;
	padding:5px;
	border:1px solid #FF0000;
	width:92%;
	}*/
/*@media only screen and (min-width: 900px) {*/ /* Styling mods for wider screen widths down to 900px */	
/*.formDivIssue {
	flex-wrap:wrap;
	padding:5px;
	border:1px solid #FF0000;
	width:92%;
	}
}*/

/* Highlight an issue with a submission by putting a red border around the formDiv */
.issue {
	flex-wrap:wrap;
	padding:5px 0;
	border:1px solid #FF0000;
	width:100%;
	}
@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 799px */
.issue {
	flex-wrap:wrap;
	padding:5px;
	border:1px solid #FF0000;
	width:92%;
	}
}


.dateIssue {
	min-width:100%;
	font-size:1.0em;
	text-align:center;
	color:#ffffff;
	padding-bottom:10px;
	border:0px dotted yellow;
	}
@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 900px */		
.dateMayHaveExpired {
	min-width:100%;
	font-size:1.0em;
	text-align:center;
	padding-bottom:10px;
	border:0px dotted yellow;
	}
}
	
/* The form field label base styling */	
label {
	display:block;
	text-align:left;
	width:95%;  /* use all of form width */
	/*margin-left:20px;*/
	/*margin-left:10px;*/
	padding-left:10px;  /* Create amargin at the left hand side of the label text */
	line-height:2.0em;
	/*border:1px dotted lime;*/  /* DEV only */
	}

@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 799px */	
label {
	display:block;
	/*float:left;*/
	text-align:left;
	/*width:170px;*/
	width:150px;
	line-height:1.4em; /* Override style above */
	/*margin-left:20px;*/
	/*margin-left:10px;*/
	/* border:1px dotted lime;*/  /* DEV only */
	}
}
	

/* Base text field styling */	
.formTextField {  /* Standard styling for all widths unless overridden */
	display:inline-block;
	width:95%;
	padding:5px;
	font-family:Verdana, Arial, Helvetica, san-serif;
	font-size:1.6em; 
	line-height:1.6em;
	}
@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 799px */	
.formTextField {
	/*float:right;*/
	/*width:276px;*/
	padding:0 5px; /* Override the styling above */
	width:70%;
	font-size:1.2em; 
	line-height:2.0em;
	line-height:1.4em;
	}
}
	
	
.formRed {
	color:#FF0000;
	font-size:xx-small;
	}
	

/* The enqBeginDay dropdown selector */
.enqBeginDay {  /* Standard styling for all widths unless overridden */
	position:relative;
	width:20%;
	font-size:1.6em; 
	line-height:1.6em;
	margin-left:-5px;
	margin-right:5px;
	}
@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 799px */	
.enqBeginDay {
	position:relative;
	width:12%;
	font-size:1.2em; 
	line-height:1.4em;
	margin-left:-15px;
	margin-right:5px;
	/*background-color:#00CC66;*/  /* DEV only */
	}
}

/* The enqBeginMonth dropdown selector */
.enqBeginMonth {  /* Standard styling for all widths unless overridden */
	position:relative;
	width:48%;
	font-size:1.6em; 
	line-height:1.6em;
	margin-right:5px;
}
@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 799px */
.enqBeginMonth {
	/*position:relative;*/
	width:36%;
	font-size:1.2em; 
	line-height:1.4em;
	/*margin-left:-5px;*/
	margin-right:5px;
	}
}

.enqBeginYear {  /* Standard styling for all widths unless overridden */
	position:relative;
	width:20%;
	font-size:1.6em; 
	line-height:1.6em;
	/*margin-left:-5px;*/
	/*margin-right:5px;*/
	}
@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 799px */	
.enqBeginYear {
	position:relative;
	width:12%;
	font-size:1.2em; 
	line-height:1.4em;
	/*margin-left:-5px;
	margin-right:5px;*/
	}
}

.formTextArea {
	position:relative;
	width:95%;
	font-family:Verdana, Arial, Helvetica, san-serif; /* Seems to be required here */
	font-size:1.6em; 
	line-height:1.6em;
	}
@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 799px */	
.formTextArea {
	/*position:relative;*/
	/*float:right;*/
	width:70%;  /* Override styling above */
	padding:5px;
	font-size:1.2em; 
	line-height:1.4em;
	}
}	



/* The SEND button */
.submit {
	width:30%;
	font-size:1.6em; 
	line-height:1.6em;
	font-weight:bold;
	background-color:#FF9900;
	}
@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 799px */	
.submit {
	width:33%;
	margin:auto;
	font-size:1.2em; 
	line-height:1.4em;
	font-weight:bold;
	background-color:#FF9900;
	}
}
	
/* The "Thank You" text container */
.thankyouText { 
	/*float:none;*/
	width:90%;
	margin:auto;
	font-size:1.4em;
	text-align:center;
	}
@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 799px */	
.thankyouText {
	width:78%;
	font-size:1.2em;
	text-align:center;
	/*border:1px dotted red;*/  /* DEV only */
	}
}	

.ThanksTitle {
	font-size:1.1em;
	color:#FF9900;
	}


/* The "Thank You" text */	
.thankyouText p {
	display:block;
	width:85%;
	margin:auto;
	margin-top:40px;
	margin-bottom:40px;
	color:#ffffff;
	font-size:1.0em;
	line-height:1.4em;
	}
@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 799px */		
.thankyouText p {
	display:block;
	margin:auto;
	margin-top:40px;
	line-height:1.6em;
	}
}

.alert {
	display:block;
	margin:auto;
	margin-top:30px;
	width:340px;
	line-height:1.6em;
	font-size:0.8em;
	}
@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 799px */	
.alert {
	display:block;
	margin:auto;
	margin-top:30px;
	width:340px;
	line-height:1.6em;
	font-size:0.8em;
	}
}

.issueText  {
	float:none;
	width:475px;
	font-size:1.2em;
	text-align:center;
	}
@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 799px */	
.issueText  {
	float:none;
	width:475px;
	font-size:1.2em;
	text-align:center;
	}
}

.issueText p {
	display:block;
	margin:auto;
	width:280px;
	margin-top:80px;
	line-height:1.6em;
	}
@media only screen and (min-width: 900px) { /* Styling mods for wider screen widths down to 799px */
.issueText p {
	display:block;
	margin:auto;
	width:280px;
	margin-top:80px;
	line-height:1.6em;
	}
}