/** 
 * ul.form-fields
 *
 * Labels to the left of form controls, aligned as if with a table
 */

ul.form-fields {
	list-style-type: none;
	padding: 0;
	margin: 20px 0;
}

ul.form-fields > li {
	margin: 5px 10px;
	padding-left: 9.5em; /* 9em (label column width) + .5em (margin b/w columns) */
}

ul.form-fields > li label:first-child {
	display: inline-block;
	width: 8.7em; /* 9em (label column width) - .3em (space width in Helvetica) */
	text-align: right;
	vertical-align: baseline;
	margin-left: -9.5em;
	margin-right: .5em;
}

/* IE7 doesn't let the inline block take up negative space (width - margin >= 0), so we have to fight the space some
 * other way. This makes checkbox fields misaligned, but makes it look better and more consistent with other browsers
 * overall.*/
.lte7 ul.form-fields > li label:first-child {
	margin-left: -9.2em; /* 9em (label column width) + .5em (margin b/w columns) - .3em (space width in Helvetica) */
}
.lte7 ul.form-fields > li {
	text-indent: -.3em;
}


/**
 * li.full-width-field
 *
 * Field and label should be displayed on top of each other with no left gutter. Useful for textareas and other
 * fields that need extra space.
 */

ul.form-fields > li.full-width-field {
	padding-left: 0;
}

ul.form-fields > li.full-width-field label {
	display: block;

	/* Undo label styling above */
	width: auto;
	text-align: left;
	margin-left: 0;
}

/* Undo IE7 fix above */
.lte7 ul.form-fields > li.full-width-field label:first-child {
	margin-left: 0;
}
.lte7 ul.form-fields > li.full-width-field {
	text-indent: 0;
}

/**
 * span.field-errors
 */
span.field-errors {
    color: #FF0000;
}

/**
 * input.small-field
 */
ul.form-fields > li > input.small-field {
	width: 2em;
}


/* Misc */

ul.form-fields input,
ul.form-fields select,
ul.form-fields textarea {
	max-width: 100%;
}

/* Qtip Errors */
input.qtiperrors.invalid {
    box-shadow: 0 0 5px #FF0000;
    border: 2px solid #FF0000;
}

.qtiperror-hidden {
    display: none !important;
}