/* 
 * ** styles for the primary forms ** *
 * - use the class 'form-layout' on the top-level container ...
 * - event bookings styles are in a separate file - does not use this form.css
 */

.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 {
	margin-bottom: 1em ;
	}

.form-layout fieldset:last-of-type {
	margin-bottom: 0;
	}
			
.form-layout legend {
	font-size: 1.25em ; 
	padding: 1em 0.5em 0.25em 0 ;
	background: white ;		/* IE bleeds the fieldset's border through, so stop it .. */
	}
			
form.steps > fieldset > legend:before {
	content: "Step " counter(fieldsets) ": ";
	counter-increment: fieldsets;
	}
						
.form-layout ol li {
	list-style: none;
	padding: 0.5em 0 ; 
	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: 1px solid #999999 ; 
	outline: none;
	padding: 5px;
	margin-bottom: 0.35em ;
	}
	.form-layout input[type=radio] ,
	.form-layout input[type=checkbox] {
		padding: 0 ;
	} 
	
.form-layout input ,
.form-layout textarea {
	width: 200px;			/* if changed, update div-radio-box accordingly */
	}

.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 input[type=radio],
.form-layout input[type=checkbox] {
	background: none ;
	border: 0 ;
	margin-top: 0 ; 
	}

.form-layout input[type=file] {
	width: 300px ;
	}

.form-layout input[type=number] {
	width: 75px ;
	}
.form-layout input.input-size-small {
	width: 90px ;
	}
.form-layout input.input-size-date {
	width: 115px ;
	}

.form-layout textarea {
	max-width: 300px ;
	min-width: 200px ;
	width: 90% ;
	}
	.form-layout .textarea-size-large {
		width: 95% ;
		height: 16em ;
		}	
		
.form-layout input[type=radio] ,
.form-layout input[type=checkbox] {
	margin-right: 5px;
	}

.form-layout label.form-label {
	display: inline ;
	width: 150px ;
	float: left ;
	line-height: 27px ;
	}

	/* 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: -1px ;
		}
			.lt-ie8 .form-layout .checkboxes label input {
				overflow: hidden ;
			} 
	
	

	
	.form-layout .input-radio-no-indentation label input ,
	.form-layout .input-checkbox-no-indentation label input {
	/* used by the event booking form */
	float: none ; 	/* turn it off - the radios are in a row ... */
	}
	
	
		
	.form-layout .label-aw {			/* aw = auto-width: */
		width: auto ;
		float: none ;
	}
	.form-layout label.label-for-radio {	/* used for lining up label for radio with div-radio-box */ 
		float: left ;
		}
	.form-layout .div-radio-box {			/* used for making radio/checkbox appear in a single column */
		width: 212px ;						/* to match the regular input fields + padding + borders */
		display: inline ;
		float: left ;
		}
	.form-layout .div-radio-box-columns {
		margin-top:0.75em ;
		margin-bottom: 1em ;
		}
	
	
.form-layout label.required::after { 
	content: " *"; 
	color: black;
	}

.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 { background-color: #F0DDDD ; } 
*/

.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 ;		
}
	 
	 
/*
.form-layout input:not([type="submit"]):focus ,
.form-layout input:not([type="button"]):focus ,
*/
.form-layout input:focus ,  
.form-layout textarea:focus ,
.form-layout select:focus {
	background: #eaeaea;
	border-color: orange ; 
	}
/* NB: input type of button/submit is redefined with button-style */
				 
	 
	 
/*
.form-layout input:invalid, 
.form-layout textarea:invalid , 
.form-layout select:invalid , 
*/
.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 */
	}
	

/* * *
 * Newsroom - News archive
 * * */

.filter-table {
	display: table ;
	border-collapse: collapse ;
	
	}

.filter-row,
.filter-row-header {
	display: table-row ;

	}
.filter-row-header {
	font-weight: bold ;
	background: #262261 ;
	color: #FFFFFF ;
	}	
	
.filter-cell {
	display: table-cell ;
	padding: 2% 2em ;
	border-width: 1px ;

	}	

		/* IE < 8 fall back .. */
		.lt-ie8 .filter-table,
		.lt-ie8 .filter-row,
		.lt-ie8 .filter-row-header {	
			display: block ;
			color: #000000 ;
		}
			.lt-ie8 .filter-cell {	
				display: inline-block ;
				float: left ;
				width: 29% ;
				padding: 1% 2% ;
				border-width: 0 ;
			}

.filter-results {
			font-size: 1.25em ;
			font-weight: bold ;
			margin-bottom: 1em ;
	}


/* site search */
.search-form label {
	width: 180px ;
	margin-left: 1em ;
	}



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

	
/* * *
 * buttons 
 * * */	
	
fieldset.fsButtons {
	text-align: center ;
	}
			
.form-layout .form-buttons {
	margin: 2em auto 1em 0 ;
	text-align: left ;
	}			

.form-layout input[type=button],
.form-layout input[type=submit],						
.form-layout button,						
.form-layout submit,
.button-style {
	/* any changes here, please duplicate in css-style - .button-style class */
	/* - not all pages load css-forms ... hence duplication */
		display: inline-block ;
		border: 0 ;
		margin: 0 auto ;
		padding: 8px 2em 8px 2em ;
		font-weight: bold ;
		border: 1px solid #999999 ;
		background: #F2F2F2;
		/*
		border: 3px solid #999999 ;
		-webkit-border-radius: 1em ; 
		-moz-border-radius: 1em ; 
		border-radius: 1em ;
		*/		
}
.site-content content a.button-style ,
.site-content content a.button-style:link ,
.site-content content a.button-style:visited {
	color: black ;
}

.form-layout button:hover ,					
.form-layout submit:hover ,
.site-content content .form-layout .button-style:hover {
	background-color: #277AAF ;	
	cursor: pointer;
	text-decoration: none ;
	color: white ;
	}

.form-layout input:[type="submit"]:focus ,
.form-layout input:[type="button"]:focus ,
.form-layout submit:focus ,
.form-layout button:focus {
	background-color: #277AAF ;
	border-color: white ;  
	outline: none ;
	}

	
.audit-acceptance-and-buttons {
	border-width: 1px ;
	width: 40% ;
	padding: 2em 5% ;
	}	
	

/* contract of employment */
.coe fieldset {
	padding: 1em ;
	border-width: 4px ;
	border-style: double ; 
	margin-bottom: 2em ;
}
	.coe h3 {
		margin-bottom: 1.15em ;
		}	
	.coe fieldset ul {
		margin: 1em 1em 2em 3em ;
	}
	.coe textarea {
		width: 98% ;
		max-width: 98% ;
		height: 8em ;
	}
	.coe .numbers {
		width: 95px ;
	}
	.coe .small {
		width: 150px ;
	}
	.coe .medium {
		width: 225px ;
	}
	.coe .large {
		width: 350px ;
	}
	.coe .IncludeClause ,
	.coe .IncludeClause * {
		color: red ;
	}
	p.IncludeClause {
		margin: 1.5em 0 0.5em 0;
	}
		p.IncludeClause * ,
		div.InputStyleVertical * {
			font-weight: normal ;
		}

		div.InputStyleVertical {
			margin: 0.5em 3em 2em;
		}

			p.IncludeClause label , 
			div.InputStyleVertical label {
				margin-bottom: 0.5em ;
				margin-left: 0.75em ;
				display: inline-block ;
				color: red ;
			}
			.lt-ie8 p.IncludeClause label ,
			.lt-ie8 div.InputStyleVertical label {
				display: inline ;
				zoom: 1 ; 
			}
	.download-button {
		display: inline-block ;
		border: 0 ;
		margin: 0 auto ;
		padding: 8px 2em 8px 2em ;
		font-weight: bold ;
		border: 1px solid #999999 ;
		background-color: #F2F2F2;
		color: black ;
	}		
		.site-content content a.download-button {
			color: black ;
		}
	.lt-ie8 .download-button {
		display: inline ;
		zoom: 1 ;
	}
	
/* graduate application form */	
	
.form-graduate fieldset {
	background: white;
	border-color: #D9D9D9;
	border-style: solid;
	border-width: 3px 0 0 0;
	}	
.form-graduate legend {
	background: #262261;
	color: white;
	
	padding: 6px 10px;
	margin-left: 8px;
	margin-bottom: 1em ;
	font-weight: bold;
	font-size: 1.35em;
}
.form-graduate h5 {
	font-size: 1.25em ;
	margin-top: 1em ;
	margin-bottom: 1em ;
	border-style: dotted ;
	border-width: 0 0 1px 0 ;
}
.form-graduate span.label-nb label {
	font-weight: normal;
}