/*
"Fancy" form fields will appear larger and with more padding than default browser form fields. These extra styles are designed to be used in conjunction with highlight.js (to add form field highlighting) and jquery.validate.js (to provide inline validation).

To use, add the .fancy class to any <div> that directly wraps the form fields. This will let you apply the extra styling selectively, in case you want to mix fancy and regular fields on the same page.
*/

#validation_message {
	background-color: #fff;
	background-position: 10px 10px;
	background-repeat: no-repeat;
	border-style: solid;
	border-width: 2px;
	font-size: 12px;
	font-weight: bold;
	padding: 10px 10px 10px 36px;
	text-align: left;
}
#validation_message ul {
	margin: 0;
	padding: 0 0 0 30px;
}
/*#validation_message*/.message_error {
	background-image: url('/Content/Images/icon_message_error.gif');
	border-color: #f33;
}
/*#validation_message*/.message_success {
	background-image: url('/Content/Images/icon_message_success.gif');
	border-color: #9c0;
}
/*#validation_message*/.onboarding {
    margin-top: 0 !important;
}

.fancy table tr td {
	padding: 2px 6px;
	vertical-align: middle !important;
}

.fancy select {
	border: 2px solid #ccc;
	font-size: 12px;
	outline: none;
	padding: 6px;
	width: 334px;
}
.fancy select.default, .fancy select.selected {
	width: 334px;
}
.fancy select.valid, .fancy select.invalid {
	background: none;
	padding: 6px;
}
.fancy select.disabled {
	background: #eee;
	border-color: #ddd;
	color: #999;
	width: 334px;
}

.fancy .text {
	background: #fff;
	border: 2px solid #ccc;
	font-size: 14px;
	margin: 0;
	outline: none;
	padding: 6px;
	width: 334px;
}

.fancy .default {
	padding: 6px;
	width: 334px;
}
.fancy .invalid {
	background-position: 304px center;
	background-repeat: no-repeat;
	padding: 6px 32px 6px 6px;
	width: 292px;
}
.fancy .selected {
	padding: 6px;
	width: 318px;
}
.fancy .valid {
	background-position: 304px center;
	background-repeat: no-repeat;
	padding: 6px 32px 6px 6px;
	width: 292px;
}
.fancy .disabled {
	background: #eee;
	color: #999;
	padding: 6px;
	width: 318px;
}

/* Highlight colors */
.fancy .default  {border-color: #ccc;}
.fancy .invalid  {border-color: #f33;}
.fancy .valid    {border-color: #9c0;}
.fancy .selected {border-color: #fa0;}
.fancy .disabled {border-color: #ddd;}

/* Validation icons */
.fancy .default  {background-image: none;}
.fancy .invalid  {background-image: url('/Content/Images/icon_error.gif');}
.fancy .valid    {background-image: url('/Content/Images/icon_valid.gif');}
.fancy .selected {background-image: none;}
.fancy .disabled {background-image: none;}

.fancy .label {
	font-weight: bold;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
    font-size: 12px;
}
.fancy label.invalid {
	background-image: none;
	color: #c00;
	font-size: 10px;
	font-weight: normal;
	line-height: 1.2em;
	padding: 0;
}
.fancy .invalid {
    background-image: none;
    color: #f33;
    font-size: 10px;
    font-weight: normal;
    line-height: 1.2em;
    padding: 0;
}