/* 
 * ** styles for the primary forms ** *
 * - all forms must have form/div class 'form-layout'
 */
 
  /*
 Skillnet rebrand - May 2018 - colours changes to match logo
 purple -> navy
 #4F2F91 -> #09283A
 
 Bright green -> light green
 #71B93A -> #77BE44 
 
 */


/* * * * * * *
 * form styles ...
 * * * * * * */	
 
.form-layout,
 fieldset,
 legend,
.form-layout ul,
.form-layout ol, 
.form-layout li  {
	margin: 0;
	padding: 0;
	}
 
.form-layout {
	background: #F8F8F8;
	border-width: 1px;
	margin-top: 1em;
	padding: 0 5% 2em 5% ;
	width: 90%;
	/*max-width: 600px ;*/
	min-width: 250px ;
	}
	.grid_6 .form-layout {
		padding: 0 ;
		width: 100% ;
	}

	
	.formTitle {
		padding: 1em 0;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		}
		.formTitle .text-large {
			font-size: 1.3em;
			}

	fieldset.fieldsetBox {
		margin-bottom: 1em ;
		padding: 1em 0 1em 0;
		border-width: 3px 0 0 0;
		border-style: solid;
		background: white;
		border-color: #08AA9D ; /*#277AAF;*/
		}
	
		fieldset.fieldsetBox legend {
			padding: 6px 10px;
			margin-left: 8px;
			font-weight: bold;
			font-size: 1.2em;
			background: #08AA9D ; /*#1793CC*/
			color: white;
			}


	.form-layout ol li {
		list-style: none;
		padding: 5px 10px 5px 10px ; 
		margin-bottom: 2px;
		}
		.form-layout ol ol li {
			background: none;
			border: none;
			float: left;
			}

		.form-layout ol li div {
			display: inline-block; 
			}
			.lt-ie8 .form-layout ol li div { /* ie < 8 inline-block fix */
				zoom: 1;
				display: inline;
				}


					
	.form-layout input,
	.form-layout textarea ,
	.form-layout select {
		background: #eeeeee;
		border: 1px solid #eeeeee ; 
		outline: none;
		padding: 5px;
		width: 200px;
		margin-top: 0.35em ;
		}
	
	.form-layout input[type=radio],
	.form-layout input[type=checkbox] {
		width: auto ;
		background: none ;
		border: 0 ;
		margin-top: 0 ;
		margin-right: 5px ; 
		}
		
		.form-layout .label-nb label {
			font-weight: normal ;
			margin-right: 1em ;
			margin-left: 0.25em ;
		}
		
	.form-layout select {
		width: auto ; 
		}
	
	.form-layout input[type=button] ,
	.form-layout input[type=submit] {
		width: auto ;
		}


	.form-layout input.input-size-small {
		width: 90px ;
		}
	.form-layout input.input-size-date {
		width: 115px ;
		}
	
	.form-layout textarea {
		min-width: 200px ;
		max-width: 600px ;
		width: 90% ;
		}
	.form-layout .textarea-size-large {
		width: 95% ;
		height: 16em ;
		}	

	.form-layout input:focus ,  
	.form-layout textarea:focus ,
	.form-layout select:focus {
		/* input type of button & submit redefined with button-style */
		background: #eaeaea;
		 border-color: orange ; 
		}
		
		.form-layout input.required ,
		.form-layout textarea.required ,
		.form-layout select.required ,
		.form-layout input:valid:required ,
		.form-layout textarea:valid:required 
		.form-layout select:valid:required { 
			background-color: #F5F5F5 ;	 
			border-color: #aadaf0 ;		 
		}		
		.form-layout input.error ,
		.form-layout textarea.error ,
		.form-layout select.error {
			 border: 1px solid #FFaa00 ;
			}

		/* placeholder - mimic html5's placeholder style */
		.placeholder { color: #aaa; }					



	.form-layout label.form-label {
		display: inline-block ;
		width: 150px ;
		}


	.form-layout label.required::after { 
		content: " *"; 
		color: red;
		}
	
	.form-layout label.error {
		/* for non-html5 browsers */
		float: none;
		margin-left: 10px ;
		width: 10px ;
		display: inline-block ;
		font-weight: bold ;
		color: red ;
		}
		
		div.clean,
		div.error {
			margin-left: 10px;
			padding-left: 35px;
			line-height: 30px;
		}
		
		div.clean {
			color: green;
			background: transparent url(/Sectors/IMDA/Skillnet.nsf/images/forms/field-results-clean.png) no-repeat center left;
		}
		
		div.error {
			color: red;
			background: transparent url(/Sectors/IMDA/Skillnet.nsf/images/forms/field-results-error.png) no-repeat center left;
		}
		

	.form-layout input[type=button],
	.form-layout input[type=submit],						
	.form-layout button,						
	.form-layout submit,
	.button-style {
		display: inline-block ;
		background-color: #77BE44  ;
		border: 0 ;
		margin: 0 auto ;
		padding: 8px 2em 8px 2em ;
		color: white ;
		font-weight: normal ;
		font-family: inherit ;
	}
		.form-layout input[type="submit"]:hover ,
		.form-layout input[type="button"]:hover ,  
		.form-layout button:hover ,					
		.form-layout submit:hover {
			background-color:#08AA9D ;	
			cursor: pointer;
			}
		
		.form-layout input:[type="submit"]:focus ,
		.form-layout input:[type="button"]:focus ,
		.form-layout submit:focus ,
		.form-layout button:focus {
			background-color:#09283A ;
			border-color: white ;  
			outline: none ;
			}