/*
	Forms
	Media: screen, projection
	Author: Yoni De Beule
					Johan Ronsse
			Xavier Bertels
*/

input, textarea, select, button {
	font-family: "freight-sans-pro", sans-serif;
}

/* General fields and textareas */

input.inputText,
input.inputPassword,
input.inputSearch,
input.inputDate,
textarea {
	color: #666;
	border-color: #aaa #bbb #bbb #bbb;
	border-style: solid;
	border-width: 1px;
	padding: 6px 4px 5px;
	margin: 0;
	background-color: #fff;
	-webkit-border-radius: 3px;
		 -moz-border-radius: 3px;
					border-radius: 3px;
}

input.inputText:hover,
input.inputPassword:hover,
input.inputSearch:hover,
input.inputDate:hover,
textarea:hover {
	background: -webkit-linear-gradient(#cecece 0, #fff 3px);
	background:		-moz-linear-gradient(#cecece 0, #fff 3px);
	background:				 linear-gradient(#cecece 0, #fff 3px);
	border-color: #888 #999 #999 #999;
}

textarea {
	line-height: 1.5;
}

input.inputText:focus,
input.inputPassword:focus,
input.inputSearch:focus,
input.inputDate:focus,
textarea:focus {
	background: -webkit-linear-gradient(#dedede 0, #fff 3px);
	background:		-moz-linear-gradient(#dedede 0, #fff 3px);
	background:				 linear-gradient(#dedede 0, #fff 3px);
	-webkit-box-shadow: 0 0 3px #ccc;
		 -moz-box-shadow: 0 0 3px #ccc;
					box-shadow: 0 0 3px #ccc;
	border-color: #91928a;
	color: #000;
	outline: none;
	-webkit-transition: border .18s ease-in-out;
		 -moz-transition: border .18s ease-in-out;
			-ms-transition: border .18s ease-in-out;
			 -o-transition: border .18s ease-in-out;
					transition: border .18s ease-in-out;
}

input.inputText[disabled],
input.inputPassword[disabled],
input.inputSearch[disabled],
input.inputDate[disabled],
textarea[disabled] {
	color: #999;
	background: #f4f4f4;
	border-color: #ccc;
}

/* Selects */

select {
	margin: 2px 6px 0 0;
}

	option {
		width: auto;
	}

/* Input lists */

.inputList {
	padding-bottom: 10px;
}

	.inputList li,
	.widget .inputList li {
		padding-left: 24px;
		position: relative;
		padding-bottom: 5px;
		list-style-type: none;
		background: none;
	}

		.inputList input {
			position: absolute;
			top: 0;
			left: 0;
		}

		.ie6 .inputList input {
			left: -24px;
		}

		.inputList label {
			overflow: visible;
			height: auto;
			padding: 0;
		}

		.inputList li.child {
			margin-left: 8px;
			padding-left: 32px;
			border-left: 1px dotted #ccc;
		}

			.inputList li.child input {
				left: 8px;
			}

/* Fieldsets and legends */

.visibleFieldset {
	border: 1px solid #ddd;
	-webkit-border-radius: 3px;
		 -moz-border-radius: 3px;
					border-radius: 3px;
	padding: 12px 12px 0 12px;
	margin-bottom: 12px;
}

.visibleFieldset:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ie6 .visibleFieldset, .ie7 .visibleFieldset { zoom: 1; }

	legend {
		font-weight: 700;
		color: #999;
	}

		.ie6 legend {
			margin-bottom: 10px;
		}

/* Paragraph */

form p { padding: 0 0 12px; }
form p:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ie6 form p, .ie7 form p { zoom: 1; }

/* Labels */

label,
.label {
	display: block;
	padding-bottom: 6px;
	overflow: hidden;
}

/* Inline errors */

.errorArea input.inputText,
.errorArea input.inputPassword,
.errorArea input.inputSearch,
.errorArea input.inputDate,
.errorArea textarea {
	border: 1px solid #d00c00;
}

.errorArea label,
.errorArea .label {
	color: #d00c00;
}

.errorArea input.inputText:focus,
.errorArea input.inputPassword:focus,
.errorArea input.inputSearch:focus,
.errorArea input.inputDate:focus {
	-webkit-box-shadow: 0 0 3px #d00c00;
			 -moz-box-shadow: 0 0 3px #d00c00;
					box-shadow: 0 0 3px #d00c00;
}

.errorArea .inlineError,
.errorArea .formError {
	font-size: 11px;
	line-height: 1.636;
	color: #d00c00;
	display: block;
	height: 18px;
	overflow: hidden;
	white-space: nowrap;
	clear: left;
	text-overflow: ellipsis;
}

/* Help texts */

.helpTxt {
	font-size: 11px;
	line-height: 1.636;
	color: #999;
	display: block;
	height: 18px;
	overflow: hidden;
	white-space: nowrap;
	clear: left;
	text-overflow: ellipsis;
}

/* Form grid control */

	/* One-fourth width */

	.tinyInput input.inputText,
	.tinyInput input.inputPassword,
	.tinyInput input.tinyInput,
	.tinyInput input.inputDate {
		width: 16px;
	}

	.tinyInput select,
	.alignBlocks p.tinyInput,
	.alignFields p.tinyInput,
	.alignFields .tinyInput .helpTxt {
		width: 26px;
	}

	/* Half width */

	.smallInput input.inputText,
	.smallInput input.inputPassword,
	.smallInput input.inputSearch,
	.smallInput input.inputDate {
		width: 52px;
	}

	.smallInput select,
	.alignBlocks p.smallInput,
	.alignFields p.smallInput,
	.alignFields .smallInput .helpTxt {
		width: 62px;
	}

	/* Normal width */

	input.inputText,
	input.inputPassword,
	input.inputSearch,
	input.inputDate {
		width: 124px;
	}

	select,
	.alignBlocks p,
	.alignFields p,
	.alignFields p .helpTxt,
	.horizontal label,
	.horizontal .label,
	.horizontal .oneLiner :first-child label,
	.horizontal .oneLiner :first-child .label,
	.horizontal .oneLiner .firstChild label,
	.horizontal .oneLiner .firstChild .label {
		width: 134px;
	}

	/* Two-third width */

	.mediumInput input.inputText,
	.mediumInput input.inputPassword,
	.mediumInput input.inputSearch,
	.mediumInput input.inputDate {
		width: 196px;
	}

	.mediumInput select,
	.alignBlocks p.mediumInput,
	.alignFields p.mediumInput,
	.alignFields .mediumInput .helpTxt {
		width: 206px;
	}

	/* Double width */

	.bigInput input.inputText,
	.bigInput input.inputPassword,
	.bigInput input.inputSearch,
	.bigInput input.inputDate,
	textarea {
		width: 268px;
	}

	.bigInput select,
	.alignBlocks p.bigInput,
	.alignFields p.bigInput,
	.alignFields .bigInput .helpTxt {
		width: 278px;
	}

	/* Left padding (horizontal) */

	.horizontal .alignBlocks,
	.horizontal .alignFields,
	.horizontal .alignButtons,
	.horizontal .helpTxt,
	.horizontal .inlineError {
		padding-left: 134px; /* This value should be the same as the width value in "Normal width" */
	}

	/* Left margin (horizontal) */

	.horizontal input.inputSubmit,
	.horizontal input.inputButton,
	.horizontal button,
	.horizontal a.button {
		margin-left: 134px; /* This value should be the same as the width value in "Normal width" */
	}

	/* Maximum width for inputlist (horizontal) */

	.horizontal .inputList li label {
		width: 278px; /* This value should be the same as the width value in "Double width" */
	}

/* Floating elements */

	/* Floating blocks */

	.alignBlocks {
		position: relative;
		left: -5px;
		padding-bottom: 12px;
	}

	.alignBlocks:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	.ie6 .alignBlocks, .ie7 .alignBlocks { zoom: 1; }

		.alignBlocks p {
			padding: 0 5px;
			overflow: hidden;
			float: left;
		}

	/* Floating fields */

	.alignFields {
		position: relative;
		padding-bottom: 12px;
	}

	.alignFields:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	.ie6 .alignFields, .ie7 .alignFields { zoom: 1; }

		.alignFields label {
			position: absolute;
			top: 0;
			left: 0;
		}

		.alignFields input,
		.alignFields select {
			float: left;
		}

		.ie6 .alignFields input,
		.ie6 .alignFields select,
		.ie7 .alignFields input,
		.ie7 .alignFields select {
			float: none;
		}

		.alignFields p {
			padding: 20px 12px 0 0;
			float: left;
		}

	/* Floating buttons */

	.alignButtons {
		padding-bottom: 12px;
	}

	.alignButtons:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	.ie6 .alignButtons, .ie7 .alignButtons { zoom: 1; }

		.alignButtons p {
			float: left;
			padding-right: 4px;
			padding-bottom: 0;
		}

/* Oneliners */

.oneLiner {
	padding-bottom: 12px;
}

.oneLiner:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ie6 .oneLiner, .ie7 .oneLiner { zoom: 1; }

	.oneLiner p {
		float: left;
		padding: 0 6px 0 0;
	}

		.oneLiner label {
			float: left;
			padding-right: 6px;
		}

		.oneLiner input,
		.oneLiner select {
			float: left;
		}

	.oneLiner .inputList {
		padding-bottom: 0;
	}

	.ie6 .oneLiner .inputList input {
		left: 0;
	}

		.oneLiner .inputList li {
			float: left;
			padding-bottom: 0;
		}

/* Horizontal */

.horizontal label,
.horizontal .label {
	float: left;
}

	/* Floating blocks */

	.horizontal .alignBlocks .helpTxt,
	.horizontal .alignBlocks .inlineError {
		padding-left: 0;
	}

	/* Floating fields */

	.horizontal .alignFields .helpTxt,
	.horizontal .alignFields .inlineError {
		padding-left: 0;
	}

	.horizontal .alignFields p {
		padding-top: 0;
	}

		.horizontal .alignFields label {
			top: 2px;
		}

	/* Floating buttons */

	.horizontal .alignButtons input.inputSubmit,
	.horizontal .alignButtons input.inputButton,
	.horizontal .alignButtons button,
	.horizontal .alignButtons a.button,
	.horizontal .alignFields input.inputSubmit,
	.horizontal .alignFields input.inputButton,
	.horizontal .alignFields button,
	.horizontal .alignFields a.button,
	.horizontal .alignBlocks input.inputSubmit,
	.horizontal .alignBlocks input.inputButton,
	.horizontal .alignBlocks button,
	.horizontal .alignBlocks a.button {
		margin-left: 0;
	}

	/* Inputlists */

	.horizontal .inputList:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	.ie6 .horizontal .inputList, .ie7 .horizontal .inputList { zoom: 1; }

	.horizontal .inputList ul {
		float: left;
	}

		.horizontal .inputList li label {
			float: none;
		}

	/* Oneliners */

	.horizontal .oneLiner label,
	.horizontal .oneLiner .label {
		width: auto;
		padding: 2px 6px 2px 0;
	}

		.horizontal .oneLiner :first-child label,
		.horizontal .oneLiner :first-child .label,
		.horizontal .oneLiner .firstChild label,
		.horizontal .oneLiner .firstChild .label {
			padding: 2px 0;
		}

		.horizontal .formSectionContent .oneLiner :first-child label,
		.horizontal .formSectionContent .oneLiner :first-child .label,
		.horizontal .formSectionContent .oneLiner .firstChild label,
		.horizontal .formSectionContent .oneLiner .firstChild .label {
			width: auto;
			padding: 2px 6px 2px 0;
		}

	.horizontal .oneLiner input.inputSubmit,
	.horizontal .oneLiner input.inputButton,
	.horizontal .oneLiner button,
	.horizontal .oneLiner a.button {
		margin-left: 0;
	}

	.horizontal .oneLiner .inputList {
		float: left;
	}

		.horizontal .oneLiner .inputList li label {
			width: auto;
		}

	/* Form sections */

	.formSection {
		padding: 0 0 8px 0;
	}

	.formSection:after	{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	.ie6 .formSection, .ie7 .formSection { zoom: 1; }

		.formSection p {
			padding-bottom: 2px;
		}

		.formSection .oneLiner p {
			padding-bottom: 0;
		}

	.horizontal .formSectionContent {
		padding-bottom: 4px;
		float: left;
	}

	.horizontal .formSectionContent .alignBlocks,
	.horizontal .formSectionContent .alignFields,
	.horizontal .formSectionContent .alignButtons,
	.horizontal .formSectionContent .helpTxt,
	.horizontal .formSectionContent .inlineError {
		padding-left: 0;
	}

/* Messages */

.message {
	padding: 19px 19px 0;
	border: 1px solid #ddd;
	margin-bottom: 20px;
	color: #333;
	background-color: #f5f5f5;
			 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), inset 0 0 0 2px rgba(255,255,255,.44);
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), inset 0 0 0 2px rgba(255,255,255,.44);
					box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), inset 0 0 0 2px rgba(255,255,255,.44);
		 -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
					border-radius: 3px;
	position: relative;
}

	/* Error messages */

	.error {
		border-color: #f4cbbc;
		background-color: #fff2ed;
		display: block;
		float: left;
		width: 320px;
		clear: right;
		margin-top: 10px;
		margin-right: 120px;
	}

	.error h1,
	.error h2,
	.error h3,
	.error h4 {
		color: #fff;
	}

		.error a {
			color: #fff;
			border-color: #df5c54;
		}

		.error a:link,
		.error a:visited {
			color: #fff;
			border-color: #df5c54;
		}

		.error a:hover,
		.error a:active,
		.error a:focus {
			color: #fff;
			border-color: #fff;
		}

		.error p {
			color: #D00C00 !important;
			padding: 0;
			margin-bottom: 18px;
			float: left;
		}

	/* Success messages */

	.success {
		border-color: #72aa2e;
		color: #f1f7eb;
		background-color: #72aa2e;
	}

	.success h1,
	.success h2,
	.success h3,
	.success h4 {
		color: #fff;
	}

		.success a {
			color: #fff;
			border-color: #a0c673;
		}

		.success a:link,
		.success a:visited {
			color: #fff;
			border-color: #a0c673;
		}

		.success a:hover,
		.success a:active,
		.success a:focus {
			color: #fff;
			border-color: #fff;
		}

	/* Notice messages */

	.notice {
		border-color: #D8B649;
		color: #332d1c;
		background-color: #ffe38a;
	}

	.notice h1,
	.notice h2,
	.notice h3,
	.notice h4 {
		color: #000;
	}

		.notice a {
			color: #000;
			border-color: #ab985d;
		}

		.notice a:link,
		.notice a:visited {
			color: #000;
			border-color: #ab985d;
		}

		.notice a:hover,
		.notice a:active,
		.notice a:focus {
			color: #000;
			border-color: #000;
		}

/* Buttons */

input.inputSubmit,
input.inputButton,
button,
a.button,
a.button:link,
a.button:visited {
	padding: 3px 6px;
	font: 400 14px/1.636 "freight-sans-pro", sans-serif;
	text-transform: normal;
	color: #3d3100;
	cursor: pointer;
	overflow: visible;
	white-space: nowrap;
	text-align: center;
		border: 1px solid #dddddd;
		display: block;
		-webkit-box-shadow: #dddddd 0 1px 0 0, rgba(0, 0, 0, 0.1) -1px -1px 0 0 inset;
		-moz-box-shadow: #dddddd 0 1px 0 0, rgba(0, 0, 0, 0.1) -1px -1px 0 0 inset;
		box-shadow: #dddddd 0 1px 0 0, rgba(0, 0, 0, 0.1) -1px -1px 0 0 inset;
		text-shadow: 1px -1px 0 #aaaaaa, 1px -1px 0 white #aaaaaa;
		text-shadow: 1px -1px 0 white #aaaaaa, 1px -1px 0 white #aaaaaa;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-ms-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dbd9d6));
		background: -webkit-linear-gradient(#ffffff, #dbd9d6);
		background: -moz-linear-gradient(#ffffff, #dbd9d6);
		background: -o-linear-gradient(#ffffff, #dbd9d6);
		background: linear-gradient(#ffffff, #dbd9d6);
}

button::-moz-focus-inner{ padding: 0; border: 0 }

@media screen and (-webkit-min-device-pixel-ratio:0) {
	input.inputSubmit,
	input.inputButton,
	button {
		padding: 6px 14px 5px;
	}
}

.ie6 input.inputSubmit,
.ie6 input.inputButton,
.ie6 button {
	margin-top: -1px;
	padding: 1px 3px;
}

.ie7 input.inputSubmit,
.ie7 input.inputButton,
.ie7 button {
	padding: 1px 3px 0 3px;
}

.ie8 input.inputSubmit,
.ie8 input.inputButton,
.ie8 button {
	padding: 2px 3px;
}

input.inputSubmit:hover,
input.inputButton:hover,
input.buttonHover,
button:hover,
button.buttonHover,
a.button:hover,
a.button:focus {
	color: #333333;
	background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f7f6f4), color-stop(100%, #cdcdcd));
	background: -webkit-linear-gradient(#f7f6f4, #cdcdcd);
	background: -moz-linear-gradient(#f7f6f4, #cdcdcd);
	background: -o-linear-gradient(#f7f6f4, #cdcdcd);
	background: linear-gradient(#f7f6f4, #cdcdcd);
	-webkit-transition-duration: 0;
	-moz-transition-duration: 0;
	-o-transition-duration: 0;
	transition-duration: 0;
}

input.inputSubmit:active,
input.inputButton:active,
button:active,
a.button:active {
	-webkit-box-shadow: #dddddd 0 1px 0 0, rgba(0, 0, 0, 0.1) 1px 1px 0 0 inset;
	-moz-box-shadow: #dddddd 0 1px 0 0, rgba(0, 0, 0, 0.1) 1px 1px 0 0 inset;
	box-shadow: #dddddd 0 1px 0 0, rgba(0, 0, 0, 0.1) 1px 1px 0 0 inset;
}

input.inputSubmit[disabled="disabled"],
input.inputButton[disabled="disabled"],
button[disabled="disabled"],
a.disabledButton {
	cursor: default;
	opacity: .5; /* all browsers */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */
	filter: alpha(opacity=50); /* older IE */
}

a.button,
a.button:link,
a.button:visited {
	float: left;
	text-decoration: none;
	padding: 6px 14px 5px;
}
