/* --------------------------------------------------------------------------- forms Base */

form, .form
	{
	display:block;	
	float:left;
	width:100%;
	padding:3%;
	background-color:#ccc;

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

form.save, .form.save
	{
	padding-left:40px!IMPORTANT;
	background: #30c928;
	background:url('/images/icons/formSubmitResponseTick.svg') 10px 13px / 21px 18px no-repeat,-moz-linear-gradient(top,  #30c928 0%, #008437 100%);
	background:url('/images/icons/formSubmitResponseTick.svg') 10px 13px / 21px 18px no-repeat,-webkit-gradient(linear, left top, left bottom, color-stop(0%,#30c928), color-stop(100%,#008437));
	background:url('/images/icons/formSubmitResponseTick.svg') 10px 13px / 21px 18px no-repeat, -o-linear-gradient(top,  #30c928 0%,#008437 100%);
	background:url('/images/icons/formSubmitResponseTick.svg') 10px 13px / 21px 18px no-repeat,linear-gradient(to bottom,  #30c928 0%,#008437 100%);
	color:#ffffff;
	}

div.formRow
	{
	display:block;	
	float:left;
	width:100%;
	min-height:20px;
	background-color:#ededed;
	border: 2px  solid #f1f1f1;

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

	color:#535061;

	padding-top:2%;
	padding-bottom:2%;
	padding-left:10%;
	padding-right:10%;
	text-align:left;

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

	font-family:'Titillium Web', sans-serif;
	font-size: 16px;

	outline: 0;
	}

div.formRow:focus
	{
	outline: 0;
	}

/*
form label, .form label
	{
	display:block;	
	float:left;
	width:100%;
	height:25px;
	background-color:transparent;
	text-align:left;
	font-size:14px;
	clear:both;
	}

*/

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

Radio Buttons

#######################
*/
form label.radioButtonLabel, .form label.radioButtonLabel
	{
	float:left;
	position:relative;
	display:block;
	min-width:10px;
	min-height:10px;
	background-color:transparent;
	margin-right:15px;

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

	cursor:pointer;
	}


/* HTML5 Boilerplate accessible hidden styles */
[type="radio"] 
	{
	border: 0; 
	clip: rect(0 0 0 0); 
	height: 1px; margin: -1px; 
	overflow: hidden;
	padding: 0; 
	position: absolute; 
	width: 1px;
	}

/* One radio button per line */
label.radioButtonLabel
	{
	/*
	display: block;
	width:100%;
	*/
	}

[type="radio"] + span 
	{
	display: block;

	background-color:transparent;
	}

/* the basic, unchecked style */
[type="radio"] + span:before 
	{
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.20em;
	border-radius: 1em;
	border: 0.125em solid #fff;
	box-shadow: 0 0 0 0.15em #000;
	margin-right: 0.75em;
	transition: 0.5s ease all;

	background-color:#ffffff;

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

/* the checked style using the :checked pseudo class */
[type="radio"]:checked + span:before 
	{

	background:#e1fee1;
	background:#9ecc39;

	background-color:green;

	border: 0.2em solid #fff;
	box-shadow: 0 0 0 0.25em green;

	/*background: url('/images/icons/tick.svg') no-repeat left top 100%;*/
	}

/* never forget focus styling */
/*
[type="radio"]:focus + span:after 
	{
	content: '\0020\2190';
	font-size: 1.5em;
	line-height: 1;
	vertical-align: -0.125em;
	}
*/

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

Checkbox's

#######################
*/
form label.checkboxLabel, .form label.checkboxLabel
	{
	float:left;
	position:relative;
	display:table;
	min-width:10px;
	min-height:5px;
	background-color:transparent;
	/*margin-right:15px;*/

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

	padding:0px;

	cursor:pointer;

	vertical-align: middle;
	}

/* HTML5 Boilerplate accessible hidden styles */
[type="checkbox"] 
	{
	display:inline-block;
	border: 0; 
	clip: rect(0 0 0 0); 
	height: 1px; margin: -1px; 
	overflow: hidden;
	padding: 0; 
	position: absolute; 
	width: 1px;
	}

/* One checkbox per line */
label.checkboxLabel
	{
	/*
	display: block;
	width:100%;
	*/
	}

[type="checkbox"] + span 
	{
	display:inline-block;

	background-color:transparent;

	vertical-align: middle;
	}

.checkboxLabel span p
	{
	overflow: hidden;
	background-color:transparent;
	line-height:1.2em;
	}

/* the basic, unchecked style */
[type="checkbox"] + span:before 
	{
	content:"";
	display: inline-block;
	float:left;
	width: 1.15em;
	height: 1.15em;

	line-height:1.2em;

	vertical-align: -0.20em;
	/*border-radius: 1em;*/

	/*
	border: 0.125em solid #fff;
	box-shadow: 0 0 0 0.15em #000;
	*/
	border: 0.15em solid #000;

	margin-right:5px;
	transition: 0.5s ease all;

	background-color:#ffffff;

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

/* the checked style using the :checked pseudo class */
[type="checkbox"]:checked + span:before 
	{
	content:"\2714";

	line-height:1.2em;

	background:#ffffff;

	/*
	border: 0.125em solid #fff;
	box-shadow: 0 0 0 0.25em green;
	*/
	border: 0.15em solid green;

	color:green;

	/*background: url('/images/icons/tick.svg') no-repeat left top 100%;*/
	}

/* never forget focus styling */
/*
[type="radio"]:focus + span:after 
	{
	content: '\0020\2190';
	font-size: 1.5em;
	line-height: 1;
	vertical-align: -0.125em;
	}
*/

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

Select

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

select 
	{
	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:					border-box;

	background: transparent;

	width: 100%;

	padding: 5px 35px 5px 5px;

	border: 2px solid #bebebe;

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

	background-color:red;

	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );

	font-size:1em;

	/* get rid of arrow replace with ours */
	/*
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;
	*/
	}

/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) 
	{ 
	select 
		{
		background:none;
		padding: 5px;
		}
	}

select:focus
	{
	/*
	color:#000000;
	border: 2px  solid #a5e0fe;

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

	background-color:#e1f4fd;
	*/
	}

select optgroup
	{
    background:#F0F0F0;
    font-style:normal;
    font-weight:bold;
    }

select option
	{
    background:#F8F8F8 ;
    font-style:normal;
    font-weight:normal;
	}

select option.selectHr
	{
	height:1px;
	line-height:0px;
	font-size:0px;
	background-color:#C0C0C0 ;
	}

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

Text inputs

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

form input[type=text], .form input[type=text],
form input[type=password], .form input[type=password]
	{
	display:block;	
	float:left;
	width:100%;
	background-color:#F8F8F8;
	border: 2px solid #ffffff;

	/* 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;

	color:gray;

	/*
	border-width:1px;
	border-style:solid;
	border-color:#ccc;
	*/
	padding-top:2%;
	padding-bottom:2%;
	padding-left:10%;
	padding-right:10%;
	text-align:left;

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

	font-family:'Titillium Web', sans-serif;
	font-size: 16px;
	font-weight: normal;

	outline:none;
	}

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

Textarea inputs 'comments' etc

#######################
*/
form textarea, .form textarea
	{
	width:100%;
	background-color:#ffffff;
	border: 2px  solid #ffffff;
	
	font-family:'Titillium Web', sans-serif;
	font-size: 16px;
	font-weight: normal;
	color:gray;

	padding-top:2%;
	padding-bottom:2%;
	padding-left:10%;
	padding-right:10%;

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

	resize:vertical;
	overflow:auto;

	outline:none;
	}

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

file upload

#######################
*/
/*
.fileUpload 
	{
    position: relative;
    overflow: hidden;
    margin: 10px;
	}

.fileUpload input.upload 
	{
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
	}

*/

div.fileInputs 
	{
	display:block;
	position:relative;
	float:left;
	width:100%;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:					border-box;
	padding:2px;

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

	background-color:white;

	/* background-color:#000000;
	color:#ffffff; */

	overflow: hidden;

	cursor:pointer;

	outline:none;
	}

div.fakeFileWrap 
	{
	position: relative;
	
	display:block;

	width:100%;

	margin:0px;

	z-index: 1;

	background-color:transparent;

	clear:both;

	/* temp so lewis can work on file upload */
	/*
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	*/

	outline:none;
	}

input.fileUpload 
	{
	position: absolute;

	left:0px;
	top:0px;

	width:100%;
	height:100%;

	text-align: right;

	line-height:1em;
	font-size:1em;

	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	
	/* temp so lewis can work on file upload */
	/*
	-moz-opacity:1 ;
	filter:alpha(opacity: 1);
	opacity: 1;
	*/

	z-index: 2;

	background-color:transparent;

	margin:0px;
	padding:0px;

	outline:none;
	}

div.fakeFileWrap input
	{
	width:70%;
	background-color:transparent;
	margin:0px;
	padding:0px;

	padding-left:4px;
	border:0;
	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:				border-box;
	
	font-family:'Titillium Web', sans-serif;
	font-size: 16px;
	font-weight: normal;
	color:gray;	

	outline:none;
	}

/* =====================
deal with ie "cross" in fields - remove them ...

may not be required now, as I've put a wildcard version in base.css - check in IE
 ===================== */

.form input[type=text]::-ms-clear,
.datePickerInput::-ms-clear
	{
	display: none;
	}

/* =====================
our clear input button (our own cross!)
 ===================== */

.clearInputButton
	{
	position:relative;
	float:left;
	background-color:red;
	}

/*
.dateInput:after
	{
	content:"/<div>X</div>";
	position:relative;
	float:left;
	background-color:red;
	}
*/

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

NOTE - FIELD BACKGROUND COLOURS:

	we are setting the background colour of the field in the javascript files as when the dev applies two background images to a field
		the default background colour set is overwritten
		so we are first in the JS applying the relevant icons (left: field icon + right: validation icon) and then applying the relevant background colour depending on the validation results:

		JS vars used:

		fieldBackGroundColourDefault
		fieldBackGroundColourFocus
		fieldBackGroundColourOk
		fieldBackGroundColourNok

this lot below deals with:

i) border colours on the fields:

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

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

/* LJW - 07082015 (, .formRow:focus) */
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
/* , .formRow:focus */
	{
	color:#000000;
	border: 2px  solid #0066ff;

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

	background-color:#e1f4fd;
	}

/* this colours our formRow when its input has focus, it should look the same as above */
.formRow.inputFocus
	{
	color:#000000;
	border: 2px  solid #0066ff;

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

	background-color:#e1f4fd;
	}

/* --------------------------------------------------------------------- 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-color:#ffffff;
	}

/* --------------------------------------------------------------------- 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
/* , .formRow.validationOk:focus */
	{
	border-color:#0066ff;

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

/* --------------------------------------------------------------------- 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, 
.formRow.validationNok
	{
	border-color:red;

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

/* --------------------------------------------------------------------- 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,
.formFieldFocus
	{
	border-color:#0066ff!IMPORTANT;

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


/* prompts =========================================================================== */

.prompt
	{
	position:relative;
	padding:4px;
	/*padding-left:10px;*/
	padding-left:6.5%;

	/* 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;

	color:#fff;
	/*line-height:18px;*/
	line-height:20px;

	/* gradient */
	background:#075698; /* default background for browsers without gradient support */
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));
	background:-moz-linear-gradient(#075698, #2e88c4);
	background:-o-linear-gradient(#075698, #2e88c4);
	background:linear-gradient(#075698, #2e88c4);
	
	/* rounded corners */
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;

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

	z-index:999;
	}

.prompt.nOk
	{
	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);
	}

/* override default responsive column layout - this is essentially moving the prompt up and over the field */
.prompt.col
	{
	/* move prompt up and to the right */
	margin: -1.4% 0 0 10%;

	/* allows any elements below the prompt to not move due to prompt positioning */
	margin-bottom:-999px;
	}

/* override default responsive column layout - looses the 10% left margin when screen is 480px width only - shunts everything underneath */
@media only screen and (max-width: 480px)
	{
	.prompt
		{
		padding-left:10%;
		}

	.prompt.col
		{
		margin: -1.4% 0 0 0%;
		}
	}

/* promtp arrow */
.prompt::after
	{
	content:"";
	position:absolute;

	/* varient top DEV note */
	top:-10px; /* value = - border-top-width - border-bottom-width - 1 (1px bleed) */
	right:50px; /* controls horizontal position */
	bottom:auto;
	left:auto;

	/* reduce the damage in FF3.0 */
	display:block;
	width:0;

	border-width:11px 11px 0 0; /* vary these values to change the angle of the vertex */
	border-color:transparent #075698;
	border-style:solid;
	}

/* promtp arrow nOk */
.prompt.nOk::after
	{
	content:"";
	position:absolute;

	/* varient top DEV note */
	top:-10px; /* value = - border-top-width - border-bottom-width */
	right:50px; /* controls horizontal position */
	bottom:auto;
	left:auto;

	/* reduce the damage in FF3.0 */
	display:block;
	width:0;

	border-width:11px 11px 0 0; /* vary these values to change the angle of the vertex */
	border-color:transparent #c81e2b;
	border-style:solid;
	}

/* info icon */
.prompt::before
	{
	position:absolute;
	float:left;
	display:block;
	left:0px;

    background-image: url("../images/icons/info.svg");
    background-size:100%;

	background-color:transparent;
	background-position:center center;
	background-repeat:no-repeat;

    height:100%;
	width:10%;
    content:"";

	margin-top:-4px;
	}

/* show / hide classes for prompt */
.prompt.show
	{
	display:block;
	}

/* show / hide classes for prompt */
.prompt.hide
	{
	display:none;
	}

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

div.formSubmitResponse
	{
	position:relative;
	padding:4px;
	/*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;

	color:#fff;
	/*line-height:18px;*/
	line-height:20px;

	/* gradient */
	background: #30c928;
	/*
	background: -moz-linear-gradient(top,  #30c928 0%, #008437 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#30c928), color-stop(100%,#008437)); 
	background: -o-linear-gradient(top,  #30c928 0%,#008437 100%);
	background: linear-gradient(to bottom,  #30c928 0%,#008437 100%);
	*/

	background:url('/images/icons/formSubmitResponseTick.svg') 10px 5px / 21px 18px no-repeat,-moz-linear-gradient(top,  #30c928 0%, #008437 100%);
	background:url('/images/icons/formSubmitResponseTick.svg') 10px 5px / 21px 18px no-repeat,-webkit-gradient(linear, left top, left bottom, color-stop(0%,#30c928), color-stop(100%,#008437));
	background:url('/images/icons/formSubmitResponseTick.svg') 10px 5px / 21px 18px no-repeat, -o-linear-gradient(top,  #30c928 0%,#008437 100%);
	background:url('/images/icons/formSubmitResponseTick.svg') 10px 5px / 21px 18px no-repeat,linear-gradient(to bottom,  #30c928 0%,#008437 100%);

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

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

	z-index:999;

	margin-bottom:10px;
	}

/* show / hide classes for formSubmitResponse */
div.formSubmitResponse.show
	{
	display:block;
	}

/* show / hide classes for formSubmitResponse */
div.formSubmitResponse.hide
	{
	display:none;
	}

div.formSubmitResponse.nOk
	{
	padding-left:40px;
	background:#f04349; /* default background for browsers without gradient support */
	background:url('/images/icons/explainationMarkWhite21x18.svg') 10px 5px / 21px 18px no-repeat,-webkit-gradient(linear, 0 0, 0 100%, from(#c81e2b), to(#f04349));
	background:url('/images/icons/explainationMarkWhite21x18.svg') 10px 5px / 21px 18px no-repeat,-moz-linear-gradient(#c81e2b, #f04349);
	background:url('/images/icons/explainationMarkWhite21x18.svg') 10px 5px / 21px 18px no-repeat,-o-linear-gradient(#c81e2b, #f04349);
	background:url('/images/icons/explainationMarkWhite21x18.svg') 10px 5px / 21px 18px no-repeat,linear-gradient(#c81e2b, #f04349);
	}

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

date picker

#######################
*/
div.datePickerWrap
	{
	display:block;
	position:relative;
	float:left;
	width:100%;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:					border-box;
	padding:2px;

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

	background-color:white;

	/* background-color:#000000;
	color:#ffffff; */

	overflow: hidden;

	cursor:pointer;
	}

input.datePickerInput
	{
	cursor:pointer;

	font-family:'Titillium Web', sans-serif;
	font-size: 16px;
	font-weight: normal;
	color:gray;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;  
	}

div.datePickerPanel
	{
	position: relative;
	
	display:block;

	width:100%;

	margin:0px;

	z-index: 1;

	background-color:transparent;

	clear:both;

	/* temp so lewis can work on file upload */
	/*
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	*/
	}

div.datePickerPanel input.datePickerInput
	{
	width:70%;
	background-color:transparent;
	margin:0px;
	padding:0px;

	padding-left:4px;
	border:0;
	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:					border-box;

	outline: 0;
	}

div.datePickerPanel input.datePickerInput:focus
	{
	outline: 0;
	}

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

form confirmation

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

div.formConfirmation
	{
	float:left;
	display:block;
	position:relative;

	padding-top:5px;
	padding-bottom:5px;
	padding-left:30px;
	padding-right:10px;
	
	/*
	background: #1b78bb;
	background: url('/images/icons/thumbUp.svg') 5px center / 20px 20px no-repeat, -moz-linear-gradient(top,  #1b78bb 0%, #0c3994 100%);
	background: url('/images/icons/thumbUp.svg') 5px center / 20px 20px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b78bb), color-stop(100%,#0c3994));
	background: url('/images/icons/thumbUp.svg') 5px center / 20px 20px no-repeat, -o-linear-gradient(top,  #1b78bb 0%,#0c3994 100%);
	background: url('/images/icons/thumbUp.svg') 5px center / 20px 20px no-repeat, linear-gradient(to bottom,  #1b78bb 0%,#0c3994 100%);
	*/

	background: #ffa84c;
	background: url('/images/icons/thumbUp.svg') 5px center / 20px 20px no-repeat, -moz-linear-gradient(top,  #ffa84c 0%, #ff7b0d 100%);
	background: url('/images/icons/thumbUp.svg') 5px center / 20px 20px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa84c), color-stop(100%,#ff7b0d));
	background: url('/images/icons/thumbUp.svg') 5px center / 20px 20px no-repeat, -o-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%);
	background: url('/images/icons/thumbUp.svg') 5px center / 20px 20px no-repeat, linear-gradient(to bottom,  #ffa84c 0%,#ff7b0d 100%);

	color:#ffffff;

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

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

	margin-bottom:10px;
	}

div.formConfirmation.searchTerms
	{
	/*
	background: #1b78bb;
	background: url('/images/icons/searchWhite.svg') 5px center / 20px 20px no-repeat, -moz-linear-gradient(top,  #1b78bb 0%, #0c3994 100%);
	background: url('/images/icons/searchWhite.svg') 5px center / 20px 20px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b78bb), color-stop(100%,#0c3994));
	background: url('/images/icons/searchWhite.svg') 5px center / 20px 20px no-repeat, -o-linear-gradient(top,  #1b78bb 0%,#0c3994 100%);
	background: url('/images/icons/searchWhite.svg') 5px center / 20px 20px no-repeat, linear-gradient(to bottom,  #1b78bb 0%,#0c3994 100%);
	*/

	background: #ffa84c;
	background: url('/images/icons/searchWhite.svg') 5px center / 20px 20px no-repeat, -moz-linear-gradient(top,  #ffa84c 0%, #ff7b0d 100%);
	background: url('/images/icons/searchWhite.svg') 5px center / 20px 20px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa84c), color-stop(100%,#ff7b0d));
	background: url('/images/icons/searchWhite.svg') 5px center / 20px 20px no-repeat, -o-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%);
	background: url('/images/icons/searchWhite.svg') 5px center / 20px 20px no-repeat, linear-gradient(to bottom,  #ffa84c 0%,#ff7b0d 100%);
	}