/*
 * for KeepWell register online  form .
 *
 * - use the class 'form-layout' on the top-level container ...
 *
 */

.form-layout {
	font-size: 13px ;
	}

.form-layout,
.form-layout fieldset,
.form-layout legend,
.form-layout ul,
.form-layout ol, 
.form-layout li  {
	margin: 0;
	padding: 0;
	}
  
.form-layout {
 	counter-reset: fieldsets;
}

.form-layout fieldset {
	background: #FFFFFF ;
	border-width: 3px 0 0 0;
	margin-bottom: 1em ;
}	

.form-layout fieldset:last-of-type {
	margin-bottom: 0;
	}
			
.form-layout legend {
	background: #00a78e ; 
	color: #FFFFFF;
	padding: 0.5em 1.15em ;
	margin-left: .8em ;
	font-weight: bold;
	font-size: 115%;
	}
									
.form-layout ol li {
	list-style: none;
	padding: 0.5em 1em ; 
	margin-bottom: 0.25em ;
	}
	.form-layout p {
		padding: 0.5em 0 ;
		margin-bottom: 0.5em ;
	}
	.form-layout fieldset p {
		margin-top: 0 ;
	}
				
.form-layout input,
.form-layout textarea ,
.form-layout select {
	background: #F2F2F2;
	border-width: 1px ;
	border-color: silver ;
	padding: 0.6em 0.4em ;
	margin-bottom: 0.35em ;
	outline: none ;
	}
	.form-layout input[type=radio] ,
	.form-layout input[type=checkbox] {
		padding: 0 ;
		background: none ;
		border: 0 ;
		margin-top: 0 ; 
		margin-right: 0.5em;
		}	
.form-layout input:not([type]) ,	
.form-layout input[type=text] ,
.form-layout input[type=email] ,
.form-layout textarea {
	width: 65% ;
	max-width: 400px ;
	}

.form-layout select ,
.form-layout input[type=radio] ,
.form-layout input[type=checkbox] ,
.form-layout input[type=button] ,
.form-layout input[type=submit] {
	width: auto ;
	}
	.form-layout select {
    	min-width: 100px;
    	max-width: 412px;
	}

.form-layout input[type=number] {
	width: 200px ;
	text-align: right;
	} 
.form-layout input.input-size-small {
	width: 90px ;
	}

.form-layout textarea {
	min-width: 200px ;
	max-width: 400px ;
	}
	.form-layout .textarea-size-large {
		height: 16em ;
		}	
		
.form-layout label.form-label {
	/*
	display: inline ;
	width: 160px ; 
	float: left ;
	*/
	display: block ;
	line-height: 2.1em ;
	}
	.form-layout li.long-label > label {
		width: auto ;
		display: block ;
		float: none ;
		}
	.form-layout li.long-label > div {
		/* margin-left: 160px ; */ 
		}	
		

	/* http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers */
	.form-layout .checkboxes label {		
		display: inline-block ;
		padding-left: 24px ;
		text-indent: -24px ;
		font-weight: normal ;
		float: none ;
		line-height: 1.375 ;
		margin-bottom: 0.75em;
		width: auto ;
	}	
		.lt-ie8 .form-layout .checkboxes label {
			zoom: 1 ;
			display: inline ;
		}
		.form-layout .checkboxes label input {
			margin: 0 5px 0 5px ;
			padding: 2px ;
			vertical-align: bottom ;
			position: relative ;
			top: -5px ;		/* was -1px */
		}
			.lt-ie8 .form-layout .checkboxes label input {
				overflow: hidden ;
			} 
	
		

	
	
.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 ;
	}


.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: black ;		
	border-color: #00a78e ;
}
	 
	 
.form-layout input:focus ,  
.form-layout textarea:focus ,
.form-layout select:focus {
	background: #eaeaea;
	border-color: orange ; 
	}
	
.form-layout input.error ,
.form-layout textarea.error ,
.form-layout select.error {
	 border-color: #FFAA00 ;
	}

.form-layout .validation {
	display: inline-block ;
	padding: 8px 2px 8px 36px ;	/* 36 for the clean/error image (30 x 30) */
	}
	.lt-ie8 .form-layout .validation {
		zoom: 1 ;
		display: inline ;
		height: 30px ;
		padding: 0 0 0 36px ;
	}
	@media print {
		.form-layout .validation {
			display: none ;
		}
	}

.form-layout div.clean {
	color: green ;
	background: transparent url(/IBEC/IBEC.nsf/images/forms/field-results-clean.png) no-repeat center left ;
	}
.form-layout div.error {
	color: red ;
	background: transparent url(/IBEC/IBEC.nsf/images/forms/field-results-error.png) no-repeat center left ;		
}
	.lt-ie8 .form-layout div {
		background-position: bottom left ;
	}


p.warning {
	color: orange ;
	font-size: 1.5em ;
	}
p.success {
	font-size: 1.5em ;
	}
		
.hide-me {
	visibility: hidden ;	/* not using display: none - used by Policy Issue */
	}
 

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

	
/* * *
 * buttons 
 * * */	
	
.form-layout input[type=button],
.form-layout input[type=submit],						
.form-layout button,						
.form-layout submit,
.button-style {
		display: inline-block ;
		margin: 0 auto ;
		padding: 0.75em 2em ;
		font-weight: bold ;
		background: #F2F2F2;
		
		border-width: 3px ; 
		-webkit-border-radius: 1em ; 
		-moz-border-radius: 1em ; 
		border-radius: 1em ;
}

.form-layout input[type=button]:hover ,
.form-layout input[type=submit]:hover ,
.form-layout button:hover ,					
.form-layout submit:hover ,
.site-content content .form-layout .button-style:hover {
	background-color: #262261 ;
	cursor: pointer;
	text-decoration: none ;
	color: white ;
	}
.form-layout input[type=button]:disabled ,
.form-layout input[type=submit]:disabled {
	background: silver ;
	}
.form-layout input[type=button]:disabled:hover ,
.form-layout input[type=submit]:disabled:hover {
	background: silver ;
	color: gray ;
	cursor: default ;
	}