@charset "utf-8";

form { margin: 0; padding: 0; }
fieldset { margin: 0 0 18px; padding: 0; }
fieldset fieldset { margin-bottom: 0; }

.FormItem { /* This is the basic wrapperclass. */
	position: relative; clear: left;
	padding-bottom: 18px;
}

input, textarea, button, select {
	position: relative; float: left;
	top: -1px; margin: 0 3px 6px 0;
	font-size: 12px; line-height: 18px;
	font-family: Arial, Verdana, Geneva, "Helvetica Neue", Helvetica, sans-serif;
}

input { height: 15px; padding: 1px 2px; }
select { height: 21px; margin-bottom: -3px; /* -3px for windows baseline, -5px for others. */ }
textarea { top: -2px; padding: 0 1px; }
button { padding: 1px 3px; margin-bottom: 7px; top: -3px; }

label, .label { float: left; width: 105px; margin: 0 3px 0 0; }

/* Checkbox & Radio inputs */

.CheckWrap { position: relative; } /* Additional wrapperclass for checkboxes & radiobuttons + checkgroups label */
.CheckWrap .label { position: absolute; } /* The label that describes the group of checkboxes & radiobuttons */
.Checks { position: relative; margin-left: 108px; } /* The actual items are contained in this */
.Checks label { width: 100%; margin: 0; padding: 0; clear: left; }
.Checks input { float: left; width: 15px; height: 15px; margin: 0 3px 3px 0; padding: 0; top: 1px; }
.InlineCheck { float: left; margin-left: 3px; } /* Additional classname for ".Checks" coming straight after basic input without wrapper.  */

/* Set of FromItems displayed as group */

.GroupItem {} /* Additional wrapperclass for set of items that could be displayed as group. Like first and last name. */
.GroupItem .GroupLabel { clear: left; margin-top: 18px; }
.GroupItem div { float: left; } /* Each individual label + input/select pair in group is wrapped with div. */
.GroupItem div label, .GroupItem div input, .GroupItem div select { display: block; float: none; width: auto; }
.GroupItem div input {} /* No need to behave differently. */
.GroupItem div select {} /* No need to behave differently. */
.GroupItem div label { font-size: 11px; }

/* Item containing fieldsets header information */

.HeaderItem { margin: 0; padding: 0; } /* Additional wrapperclass for fieldsets header information. Used instead of legend. */
.HeaderItem h2 {}
.HeaderItem p {}

/* All the Errors & Help you will ever need */

.FormError, .GroupError { /* Additional wrapperclasses when error occurs. Disabled extra emphasis which brakes baseline in safari. */
	/*
	background: #ffffff; padding: 8px 11px 17px;
	margin: 0 -9px 9px; border: 1px solid #ffd9d9;
	*/
}
.FormHelp, .FormErrorMessage,
.GroupErrorMessage, .GroupHelp { /* Basic indent on all errors & help */
	clear: left; padding: 0;
	margin: 0 0 0 108px;
}
.FormHelp, .GroupHelp { color: #666; font-size: 11px; } /* Help messages. */
.GroupError .GroupLabel, .GroupError .FormError label,.GroupError .FormError .label,
.FormError label, .FormError .label { color: #900; } /* Labels inside wrapper which has errors in it */
.FormError .Checks label { color: #333; }
.GroupItem .FormError { padding: 0; margin: 0; background: none; border: 0; } /* FormError inside of group doesn't need more styling */
.FormErrorMessage, .GroupErrorMessage { color: #900; font-size: 11px; } /* The error messages */
.GroupItem .FormErrorMessage, .GroupItem .FormHelp { display: none; } /* Individual help and errors are not displayed, because group-level help & errormessage exits. */
.Checks .FormHelp { margin: 0; padding: 0 0 0 18px; } /* Help with checkboxes & radiobuttons */

/* Item containing button and possibly the alternative action (cancel/back) as link */

.FormSubmit {} /* Additional wrapperclasse for the submit item. */
.FormSubmit .SubmitButton { padding: 9px; font-size: 14px; line-height: 18px; margin-right: 6px; margin-left: 108px; } /* The bigger button + indent. */
.FormAltAction { position: relative; float: left; line-height: 36px; margin: 0; } /* Alternative action next to the button. */
.FormAltAction a {}

.required {} /* When item is required it get's this wrapperclass. Here required items label gets bolding. */
.required label, .required .label { font-weight: bold; }
.required .after, .required .after label, .required .after .label,
.required .Checks label, .required .Checks .label { font-weight: normal; }

.after { width: auto; font-weight: normal; } /* Very useful if you need currency or some other suffix after you input. */