﻿/* HIG SELECTION CONTROLS */

/* general form styles */

.field {
	display: inline-block;
}

.line-item .field {
	width: 323px;
}
.line-item .three-quarters-width .field,
.line-item .field.three-quarters-width {
	width: 241.5px;
}
.line-item .two-thirds-width .field,
.line-item .field.two-thirds-width {
	width: 214.3333px;
}
.line-item .half-width .field,
.line-item .field.half-width {
	width: 160px;
}
.line-item .one-third-width .field,
.line-item .field.one-third-width {
	width: 105.6666px;
}
.line-item .one-quarter-width .field,
.line-item .field.one-quarter-width {
	width: 78.5px;
}


.fields-required-marker {
	color: #e56500;
	display: inline-block;
	margin-left: -.25em;
}

.field .message {
	color: #999;
	display: block;
	font-size: 12px;
	line-height: 12px;
	margin: 4px 0;
	padding-right: 3px;
}

.field .error.message {
	color: #d90026;
}


/* [S1] ADD ANOTHER ELEMENTS */



/* [S2] AUTOCOMPLETE ELEMENTS */



/* [S3] BUTTON ELEMENTS */


input[type="button"] {
    background: #fff;
    border: 1px solid #ccc;
    color: #444;
    cursor: pointer;
	font-size: 14px;
    margin-left: 4px;
    min-width: 68px;
    height: 27px;
	padding: 1px 20px 5px;	
	text-transform: uppercase;
	vertical-align: bottom;
}
input[type="button"]:first-of-type {
    border: 2px solid #e66400;
}
input[type=button]:hover {
	background: #e66400;
	border-color: #e66400;
    color: #fff;
}
input[type=button]:active {
	background: #d25900;
	border-color: #d25900;
    color: #fff;
}
input[type="button"][disabled] {
	color: #ccc;
}



/* [S4] CALENDAR ELEMENTS */



/* [S5] CHECKBOX ELEMENTS */

input[type="checkbox"] {margin-right:8px;}
input[type="checkbox"] + label {
    background: url("images/checkbox_sprite.png") left top no-repeat;  
    height: 16px;
    margin-left: -24px;
    padding-left: 24px;
    position: absolute;
}
input[type="checkbox"] + label:hover {background-position:left -16px;}
input[type="checkbox"] + label:active {background-position:left -32px;}
input[type="checkbox"] + label.on {background-position:left -64px;}
input[type="checkbox"] + label.on:hover {background-position:left -80px;}
input[type="checkbox"] + label.on:active {background-position:left -96px;}



/* [S6] DROP-DOWN ELEMENTS */

select {
	border: 1px solid #d9d9d9;
	color: #444;
	margin-right: 3px; /* +3px provided by whitespace */
	padding: 2px;
	width: 234px;
}
select:hover {border:1px solid #e66400;}
select:active, 
select:focus {border:1px solid #d25900;}

.line-item .half-width select {
	width: 114px;
}




/* [S7] LINK ELEMENTS */


a:link {color: #04c;text-decoration:none;}
a:link:hover, a:link:active {text-decoration: underline;}
a.disabled:link {color: #ccc;}



/* [S8] MULTI-SELECT LIST BOX ELEMENTS */



/* [S9] RADIO BUTTON ELEMENTS */


input[type="radio"] {
	/* background-image: url("images/radiobuttons_sprite.png"); */
	vertical-align: middle;	
}






/* [S10] REMOVE CONTROL ELEMENTS */



/* [S11] TEXTBOX ELEMENTS */

input[type="text"], input[type="password"], input[type="tel"], input[type="url"], input[type="email"], input[type="date"], input[type="number"], input[type="text"], input[type="color"], input[type="file"] {
	border: 1px solid #d9d9d9;
	color: #444;
	font-size: 14px;
	padding: 5px 2px 3px;
}
input[type="text"]:hover, input[type="password"]:hover, input[type="tel"]:hover, input[type="url"]:hover, input[type="email"]:hover, input[type="date"]:hover, input[type="number"]:hover, input[type="text"]:hover, input[type="color"]:hover, input[type="file"]:hover {
    background-color: #fff;
    border:1px solid #e66400;
}
input[type="text"]:active, input[type="password"]:active, input[type="tel"]:active, input[type="url"]:active, input[type="email"]:active, input[type="date"]:active, input[type="number"]:active, input[type="text"]:active, input[type="color"]:active, input[type="file"]:active, 
input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="email"]:focus, input[type="date"]:focus, input[type="number"]:focus, input[type="text"]:focus, input[type="color"]:focus, input[type="file"]:focus {
    border:1px solid #d25900;
}
input.error[type="text"],
input.error[type="password"] {
	background-color: #ffebeb;
	border-color: #d90026;
	color: #d90026;
}
input[type="text"][disabled],
input[type="text"][readonly],
input[type="password"][disabled],
input[type="password"][readonly] {
	background-color: #f4f4f4;
	border-color: #eaecee;
	color: #ccc;
}

textarea{
    border: 1px solid #d9d9d9;
    padding: 8px;
}
textarea:hover {border:1px solid #e66400;}
textarea:active, 
textarea:focus {border:1px solid #d25900;}



.line-item input[type="text"],
.line-item input[type="password"],
.line-item input[type="email"],
.line-item input[type="url"] {
	width: 314px;
}
.line-item .three-quarters-width input[type="text"],
.line-item .three-quarters-width input[type="password"],
.line-item .three-quarters-width input[type="email"],
.line-item .three-quarters-width input[type="url"] {
	width: 232.5px;
}
.line-item .two-thirds-width input[type="text"],
.line-item .two-thirds-width input[type="password"],
.line-item .two-thirds-width input[type="email"],
.line-item .two-thirds-width input[type="url"] {
	width: 205.3333px;
}
.line-item .half-width input[type="text"],
.line-item .half-width input[type="password"],
.line-item .half-width input[type="email"],
.line-item .half-width input[type="url"] {
	width: 151px;
}
.line-item .one-third-width input[type="text"],
.line-item .one-third-width input[type="password"],
.line-item .one-third-width input[type="email"],
.line-item .one-third-width input[type="url"] {
	width: 96.6666px;
}
.line-item .one-quarter-width input[type="text"],
.line-item .one-quarter-width input[type="password"],
.line-item .one-quarter-width input[type="email"],
.line-item .one-quarter-width input[type="url"] {
	width: 69.5px;
}