.content
	{
	background:#ebebeb;
	}

.contentPadder
	{
	padding:20px;
	}

.whitePanel .col
	{
	position:relative;
	}

.form h1, form h1
	{
	font-size:26px;
	font-weight:normal;
	
	margin:0px;
	padding:0px;

	}

.form h2
	{
	color:#8c8c8c;

	padding-bottom:10px;

	border-bottom: 1px solid #cccccc;
	border-bottom: 1px solid #cc0000;

	background:transparent;
	}

.form h2.noHr
	{
	padding-bottom:0px;
	border-bottom: 0px solid #cc0000;
	}

hr
	{
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cc0000;
    margin: 1em 0;
	margin: 20px 0;
    padding: 0; 	
	}

.form
	{
	padding:0px;

	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;

	background:transparent;
	}

label
	{
	/*float:left;*/
	/*width:calc(20%);*/
	display:block;
	/*width:calc(100%); ############# do not do width here ############# */

	font-size: 14px;
	font-weight: normal;

	text-align:left;
	color:#999999;

	padding-right:10px;
	padding-bottom:3px;

	background:transparent;
	}

label span.labelText
	{
	float:left;
	}	

/* --------------------------------------------------------------------- button */
button.formTemplateSubmitButton,
button.formTightSubmitButton,
input.formTightSubmitButton
	{
	/*width:calc(30% - 20px);*/
	width:calc(150px - 10px);

	float:right;

	padding-top:10px;
	padding-bottom:10px;

	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	}




/* --------------------------------------------------------------------- FORM ROW */


div.formRow
	{
	width:calc(60%);

	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;

	border: 1px  solid #f1f1f1;

	padding-top:0px;
	padding-bottom:0px;

	padding-left:25px;
	padding-right:25px;
	}




/* --------------------------------------------------------------------- Textarea inputs 'comments' etc */

form textarea, .form textarea
	{
	width:calc(60%);
	background-color:#ffffff;
	border: 1px  solid #ebebeb!IMPORTANT;
	
	font-size: 14px;
	font-weight: normal;
	color:gray;

	padding-top:4px;
	padding-bottom:4px;
	padding-left:25px;
	padding-right:25px;

	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	}


form textarea.width100, .form textarea.width100
	{
	width:100%;
	}


/*
#######################

file upload

#######################
*/


div.fileInputs 
	{
	background-color:white;
	}

div.fakeFileWrap input
	{
	font-size: 14px;
	line-height:18px !IMPORTANT;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;
	}

div.fakeFileWrap button
	{
	font-size: 12px;
	padding-top:4px;
	padding-bottom:4px;
	}


/* --------------------------------------------------------------------- FORM INPUTS */

form input[type=text], .form input[type=text],
form input[type=password], .form input[type=password]
	{
	/*float:left;*/
	width:calc(60%);

	padding-top:9px;
	padding-bottom:9px;

	padding-left:25px;
	padding-right:25px;

	font-size: 14px;
	/*line-height:34px;*/
	line-height:normal;

	color:#808080;

	/* background-color:#F8F8F8;
	background-color:#f6f6f6;
	background-color:#ffffff; */

	border: 1px solid #ebebeb;

	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;

    -webkit-transition: reset;
    transition: reset;


	}


/* ---------------------------------------------------------------------  FIELD FOCUS TRAP EVENT : onFocus() -> BLUE border colour and glow*/

form input[type=text]:focus, .form input[type=text]:focus,
form input[type=password]:focus, .form input[type=password]:focus,
form textarea:focus, .form textarea:focus, .blueBorderLewardo,
div.formRow:focus,
div.formRow.inputFocus
/* , .formRow:focus */
	{
	color:#808080!IMPORTANT;
	border: 1px  solid #e1f4fd!IMPORTANT;

	/* GLOW */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 200, 251, 0);
	-moz-box-shadow:		0px 0px 20px rgba(0, 200, 251, 0);
	box-shadow:				0px 0px 20px rgba(0, 200, 251, 0);

	/* background-color:#e6ffff!IMPORTANT; */
	}

/* --------------------------------------------------------------------- INPUTS OK: CLASS APPLIED IN JS "validationOk" -> GREEN border colour and (possibly) glow application of class */

/* LJW - 07082015 (, .formRow.validationOk, .form textarea.validationOk) */
form input[type=text].validationOk, .form input[type=text].validationOk,
form input[type=password].validationOk, .form input[type=password].validationOk, .form textarea.validationOk
/* , .formRow.validationOk */
	{
	/* USE THIS FOR GREEN BORDER ON VALIDATION OK */
	/* border-color:green; */

	/* USE THIS FOR WHITE / DEFAULT BORDER ON VALIDATION OK */
	border: 1px  solid #ebebeb!IMPORTANT;

	/* background-color:#f6f6f6; */
	}

div.formRow.validationOk,
div.formRow.inputFocus.validationOk
	{
	border: 1px  solid #ebebeb!IMPORTANT;
	}

/* --------------------------------------------------------------------- this clause traps when there is a class of validationOk already applied to the field, and then the field gets the focus - sets border colour back to BLUE */
/* comment out below to observe behaviour */
/* LJW - 07082015 (, .formRow.validationOk:focus, .form textarea.validationOk:focus) */
form input[type=text].validationOk:focus, .form input[type=text].validationOk:focus,
form input[type=password].validationOk:focus, .form input[type=password].validationOk:focus, .form textarea.validationOk:focus,
div.formRow.validationOk:focus,
div.formRow.inputFocus.validationOk:focus
/* , .formRow.validationOk:focus */
	{
	border: 1px  solid #e1f4fd!IMPORTANT;

	/* GLOW */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 200, 251, 0)!IMPORTANT;
	-moz-box-shadow:		0px 0px 20px rgba(0, 200, 251, 0)!IMPORTANT;
	box-shadow:				0px 0px 20px rgba(0, 200, 251, 0)!IMPORTANT;
	}

/* --------------------------------------------------------------------- INPUTS NOT OK: CLASS APPLIED IN JS "validationNok" -> RED border colour and (possibly) glow application of class */

/* LJW - 07082015 (, .formRow.validationNok, .form textarea.validationNok, .form select.validationNok, form select.validationNok) */
form input[type=text].validationNok, .form input[type=text].validationNok,
form input[type=password].validationNok, .form input[type=password].validationNok,
form textarea.validationNok, .form.validationNok, .form textarea.validationNok, 
.form select.validationNok, form select.validationNok
	{
	border: 1px  solid #ebebeb!IMPORTANT;

	/* GLOW */
	-webkit-box-shadow:	0px 0px 20px rgba(255, 0, 0, 0)!IMPORTANT;
	-moz-box-shadow:		0px 0px 20px rgba(255, 0, 0, 0)!IMPORTANT;
	box-shadow:				0px 0px 20px rgba(255, 0, 0, 0)!IMPORTANT;
	}

div.formRow.validationNok,
div.formRow.inputFocus.validationNok
	{
	border: 1px  solid #ebebeb!IMPORTANT;

	-webkit-box-shadow:	0px 0px 0px rgba(255, 0, 0, 0)!IMPORTANT;
	-moz-box-shadow:		0px 0px 0px rgba(255, 0, 0, 0)!IMPORTANT;
	box-shadow:				0px 0px 0px rgba(255, 0, 0, 0)!IMPORTANT;
	}


/* --------------------------------------------------------------------- this clause traps when there is a class of validationNok already applied to the field, and then the field gets the focus - sets border colour back to BLUE */
/* comment out below to observe behaviour */
/* LJW - 07082015 (, .formRow.validationNok:focus, .form textarea.validationNok:focus, .form submit.validationNok:focus, form submit.validationNok:focus) */
form input[type=text].validationNok:focus, .form input[type=text].validationNok:focus,
form input[type=password].validationNok:focus, .form input[type=password].validationNok:focus, 
.form textarea.validationNok:focus, 
.form submit.validationNok:focus, form submit.validationNok:focus,
div.formRow.validationNok:focus,
.formFieldFocus
	{
	border: 1px  solid #e1f4fd!IMPORTANT;

	/* GLOW */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 200, 251, 0)!IMPORTANT;
	-moz-box-shadow:		0px 0px 20px rgba(0, 200, 251, 0)!IMPORTANT;
	box-shadow:				0px 0px 20px rgba(0, 200, 251, 0)!IMPORTANT;
	}

/* -------------------------------------------------------------------- ADL SELECT DROP DOWN */
.adlSelectDropDownWrap
	{
	width:calc(60%);
	}

/* -------------------------------------------------------------------- PROMPTs */

.prompt
	{
	position:absolute;

	/* width:calc(40% - 10px); */
	width:calc(25% - 10px);
	left:calc(60% + 10px);

	padding:8.5px;

	border: 1px solid #ebebeb;

	font-size:14px;
	line-height:16px;

	color:#535061;

	background:#ffffff;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;

	/* rounded corners */
	-webkit-border-radius:0px;
	-moz-border-radius:0px;
	border-radius:0px;

	/* rounded corners */
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;

	/* drop shadow */
	-webkit-box-shadow:		2px 2px 3px 0px rgba(0, 0, 0, .1);
    -moz-box-shadow:			2px 2px 3px 0px rgba(0, 0, 0, .1);   
    box-shadow:					2px 2px 3px 0px rgba(0, 0, 0, .1);

	z-index:90;
	}

/*
.prompt.nOk
	{
	background:#ffffff;
	border: 1px solid #cc0000;
	z-index:800;
	}
*/

.prompt.nOk
	{
	position:absolute;
	background:rgb(255, 230, 0);

	background:#c81e2b; /* default background for browsers without gradient support */
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#c81e2b), to(#f04349));
	background:-moz-linear-gradient(#c81e2b, #f04349);
	background:-o-linear-gradient(#c81e2b, #f04349);
	background:linear-gradient(#c81e2b, #f04349);

	border: 1px solid red;
	color:#000000;
	color:#ffffff;
	z-index:90;
	}

/* promtp arrow */
.prompt:after 
	{
	top:12px; /* controls vertical position */
	left:-10px; /* value = - border-left-width - border-right-width */
	bottom:auto;
	border-width:5px 10px 5px 0;
	border-color:transparent #ebebeb;
	}

/* promtp arrow nOk */
/*.prompt.nOk::after
	{
	top:7px;
	left:-10px;
	bottom:auto;
	border-width:5px 10px 5px 0;
	border-color:transparent #cc0000;
	}*/

.prompt.nOk::after
	{
	top:12px; /* controls vertical position */
	left:-10px; /* value = - border-left-width - border-right-width */
	bottom:auto;
	border-width:5px 10px 5px 0;
	border-color:transparent red;
	}


/* info icon */
.prompt::before
	{
	/* GET RID OF ICON */
    background-size:0%;
	}


/* formSubmitResponse =========================================================================== */

div.formSubmitResponse
	{
	position:relative;
	padding:10px;
	/*padding-left:10px;*/
	padding-left:40px;

	/* this makes borders and padding be on the inside rather than outside */
	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:					border-box;

	border: 1px solid rgb(0, 153, 51);

	color:#ffffff;

	/*line-height:18px;*/
	line-height:20px;

	/* green */
	background: url('/images/icons/formSubmitResponseTick.svg') 10px 10px / 21px 18px no-repeat, rgb(0, 204, 0);

	/* rounded corners */
	-webkit-border-radius:0px;
	-moz-border-radius:0px;
	border-radius:0px;

	/* drop shadow */
	-webkit-box-shadow:		3px 3px 3px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow:			3px 3px 3px 0px rgba(0, 0, 0, 0.15);   
    box-shadow:					3px 3px 3px 0px rgba(0, 0, 0, 0.15);

	z-index:200;

	margin-bottom:10px;
	}

div.formSubmitResponse.nOk
	{
	padding-left:40px;


	/* warning yellow */
	background:url('/images/icons/explainationMarkBlack21x18.svg') 10px 10px / 21px 18px no-repeat, rgb(255, 230, 0);

	border: 2px solid #000000;

	color:#000000;
	}

/*
#######################

date picker

#######################
*/
div.datePickerWrap
	{
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	}

div.datePickerWrap .datePickerPanel button
	{
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;

	padding-top:4px;
	padding-bottom:4px;
	}

div.datePickerWrap .datePickerPanel input
	{
	width:60%;

	padding-top:0px;
	padding-bottom:0px;
	padding-left:4px;
	padding-right:4px;

	font-size: 14px;

	color:#808080;
	}

/* 
=============================================================================

colourFormPanel variations 

=============================================================================
*/

.colourFormPanel label
	{
	color:#999999;
	}

.colourFormPanel .prompt
	{
	width:calc(40% - 20px);
	border-color:  #999999;
	}

.colourFormPanel .prompt:after
	{
	border-color:transparent #999999;
	}

.colourFormPanel .prompt.nOk
	{
	border-color: #000000;
	}

.colourFormPanel .prompt.nOk:after
	{
	border-color:transparent #000000;
	}

/* 
=============================================================================

disabledField variations 

=============================================================================
*/

disableableField .prompt,
div.disableableField .prompt
	{
	/*width:calc(40% - 20px);*/
	width:calc(40% - 10px)!IMPORTANT;
	}

/*
=================
formRowCheckbox
=================
*/

/* default */
.colourFormPanel div.formRow.formRowCheckbox
	{
	/* NO GLOW! */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	-moz-box-shadow:		0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	box-shadow:				0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;

	border-width:0px!IMPORTANT;
	padding-left:2px!IMPORTANT;

	background:transparent;
	}

/* focus */
.colourFormPanel div.formRow.formRowCheckbox:focus
	{
	/*border-color:#009ee0;*/

	/* NO GLOW! */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	-moz-box-shadow:		0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	box-shadow:				0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;

	border-width:0px!IMPORTANT;
	padding-left:2px!IMPORTANT;
	}

/* validation ok */
.colourFormPanel div.formRow.formRowCheckbox.validationOk
	{
	/*border-color:#d8d8d8;*/

	/* NO GLOW! */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	-moz-box-shadow:		0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	box-shadow:				0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;

	border-width:0px!IMPORTANT;
	padding-left:2px!IMPORTANT;
	}

.colourFormPanel div.formRow.formRowCheckbox.validationOk:focus
	{
	/*border-color:#009ee0;*/

	/* NO GLOW! */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	-moz-box-shadow:		0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	box-shadow:				0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;

	border-width:0px!IMPORTANT;
	padding-left:2px!IMPORTANT;
	}

/* validation not ok */
.colourFormPanel div.formRow.formRowCheckbox.validationNok
	{
	/*border-color:red;*/

	/* NO GLOW! */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	-moz-box-shadow:		0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	box-shadow:				0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;

	border-width:0px!IMPORTANT;
	padding-left:2px!IMPORTANT;
	}

.colourFormPanel div.formRow.formRowCheckbox.validationNok:focus
	{
	/*border-color:#009ee0;*/

	/* NO GLOW! */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	-moz-box-shadow:		0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	box-shadow:				0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;

	border-width:0px!IMPORTANT;
	padding-left:2px!IMPORTANT;
	}

/*
=================
formRowBlank
=================
*/

/* default */
div.formRow.formRowBlank
	{
	background:transparent!IMPORTANT;

	/* NO GLOW! */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	-moz-box-shadow:		0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	box-shadow:				0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;

	border-width:0px!IMPORTANT;
	padding-left:0px!IMPORTANT;
	padding-right:0px!IMPORTANT;
	}

/* focus */
div.formRow.formRowBlank:focus
	{
	/*border-color:#009ee0;*/

	/* NO GLOW! */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	-moz-box-shadow:		0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	box-shadow:				0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;

	border-width:0px!IMPORTANT;
	padding-left:0px!IMPORTANT;
	}

/* validation ok */
div.formRow.formRowBlank.validationOk
	{
	/*border-color:#d8d8d8;*/

	/* NO GLOW! */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	-moz-box-shadow:		0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	box-shadow:				0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;

	border-width:0px!IMPORTANT;
	padding-left:0px!IMPORTANT;
	}

div.formRow.formRowBlank.validationOk:focus
	{
	/*border-color:#009ee0;*/

	/* NO GLOW! */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	-moz-box-shadow:		0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	box-shadow:				0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;

	border-width:0px!IMPORTANT;
	padding-left:0px!IMPORTANT;
	}

/* validation not ok */
div.formRow.formRowBlank.validationNok
	{
	/*border-color:red;*/

	/* NO GLOW! */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	-moz-box-shadow:		0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	box-shadow:				0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;

	border-width:0px!IMPORTANT;
	padding-left:0px!IMPORTANT;
	}

div.formRow.formRowBlank.validationNok:focus
	{
	/*border-color:#009ee0;*/

	/* NO GLOW! */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	-moz-box-shadow:		0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;
	box-shadow:				0px 0px 20px rgba(0, 0, 0, 0)!IMPORTANT;

	border-width:0px!IMPORTANT;
	padding-left:0px!IMPORTANT;
	}





/* ---------------------------------------------------------------------  FIELD FOCUS TRAP EVENT : onFocus() -> BLUE border colour and glow*/

/*
.form .colourFormPanel input[type=text]:focus,
.form .colourFormPanel input[type=password]:focus,
.form .colourFormPanel textarea:focus
	{
	color:#808080;
	border: 1px  solid #0066ff;
	border: 1px  solid #e1f4fd;

	background-color:#e6ffff!IMPORTANT;
	}

*/


/* ---------------------------------------------------------------------  nameSection */

div.nameSection
	{
	float:left;
	position:relative;
	width:100%;

	background:transparent;
	}

div.nameSectionLeft
	{
	float:left;
	position:relative;
	width:60%;

	background:transparent;
	}

div.nameSectionLeft div.col
	{
	background:transparent;
	}

div.nameSectionLeft div.col input,
div.nameSectionLeft div.col div.adlSelectDropDownWrap
	{
	width:100%;
	}

div.nameSectionLeft div.col input
	{
	padding-left:4px;
	}

div.nameSectionRight
	{
	float:right;
	position:relative;
	width:40%;

	background:transparent;
	}

div.nameSectionRight div.prompt
	{
	float:left;
	position:absolute;
	left:10px;
	width:calc(100% - 10px);
	}

/* ---------------------------------------------------------------------  inputLineSection */

div.inputLineSection
	{
	float:left;
	position:relative;
	width:100%;

	background:transparent;
	overflow:visible;
	}

div.inputLineSectionLeft
	{
	float:left;
	position:relative;
	width:60%;

	background:transparent;
	overflow:visible;
	}

div.inputLineSectionLeft div.col
	{
	background:transparent;
	}

div.inputLineSectionLeft div.col input,
div.inputLineSectionLeft div.col div.adlSelectDropDownWrap
	{
	width:100%;
	}

div.inputLineSectionLeft div.col input
	{
	padding-left:4px;
	}

div.inputLineSectionRight
	{
	float:right;
	position:relative;
	width:40%;

	background:transparent;
	overflow:visible;
	}

div.inputLineSectionRight div.prompt
	{
	float:left;
	position:absolute;
	left:10px;
	width:calc(100% - 10px);
	}



/* currency Input */
span.currencyInput
	{
	float:left;
	position:relative;
	display:table-cell;
	width:100%;
	background:transparent;
	vertical-align:middle;

	font-size:16px;
	line-height:26px;
	}

span.currencyInput input
	{
	float:right!IMPORTANT;
	width:calc(100% - 15px)!IMPORTANT;
	}