/*
--------------------------------------------------------------------------------------

	Forms
	components.forms.css

--------------------------------------------------------------------------------------
*/

.ou-form {margin-bottom:20px;}

.ou-form__item,
.ou-form__group {margin-bottom:20px;}

.ou-form__group .ou-form__item:last-child {margin-bottom:0;}

.ou-form__item--compact {margin-bottom:10px;}

.ou-form__legend {
	font-weight:bold;
	font-size:1.1em;
	margin-bottom:20px;
	color:#000;
	background-color: transparent;
}

.ou-form__label {
	font-weight:bold;
	display:block;
	margin-bottom:5px;
	color:#000;
	background-color: transparent;
}

.ou-form__label--simple {font-weight:normal;}

.ou-form__label--inline {
	font-weight:normal;
	display:inline-block;
	margin-bottom:0;
}

.ou-form__checkbox,
.ou-form__radio {margin-right:5px;}

.ou-form__text,
.ou-form__textarea,
.ou-form__select {
	display:block;
	width:100%;
	padding:9px 10px;
	border:1px solid #A7A9AC;
}

.ou-form__select {
	height:2.5em;
	border-radius:0;
}

.ou-form__required {
	color:#B5002E;
	background-color: transparent;
}

.ou-form__description {
	color:#777;
	background-color: transparent;
	font-size:.9em;
	margin-bottom:5px;	
}


/* grid form */

.ou-form--grid label {margin-top:10px;}

.ou-form__item.ou-grid > div {margin-bottom:0;}


/* focus */

.ou-form__text:focus,
.ou-form__textarea:focus,
.ou-form__select:focus {
	border:1px solid #E80074;
	outline:none;
}


/* disabled */

.ou-form__item--disabled label {
	color:#999;
	background-color: transparent;
}

.ou-form__text:disabled,
.ou-form__textarea:disabled,
.ou-form__select:disabled,
.ou-form__checkbox:disabled,
.ou-form__radio:disabled {
	cursor:not-allowed;
	background-color:#eee;
	color: #999;
}


/* validation */

.ou-form__item--error label {
	color:#B5002E;
	background-color: transparent;
}

.ou-form__item--success label {
	color:#539d3c;
	background-color: transparent;
}

.ou-form__item--error input {
	border:1px solid #B5002E;
	background-color:#fedbdb;
	color:inherit;
}

.ou-form__item--success input {
	border:1px solid #539d3c;
	background-color:#EDF5EB;
	color: inherit;
}


/* inline elements */

.ou-form__group--inline .ou-form__item {
	display:inline-block;
	width:auto;
	vertical-align:bottom;
	margin-right:5px;
	margin-bottom:0;
}

.ou-form__group--inline .ou-button {margin-bottom:0;}

.ou-form__group--inline .ou-form__checkbox, 
.ou-form__group--inline .ou-form__radio {margin-bottom:5px;}