/* ============================================================================
   FORM FRAMEWORK
   ========================================================================= */

/* Form - Row container */

.form-row{
	margin-bottom:0px;
	clear:both;
}

.form-row.form-row-hr{
	background-color:#dc8089;
	display:block;
	height:1px;
	margin-top:10px;
	margin-bottom:15px;
}

/* Form - Item container */
ul.form-item,
ul.form-item li{
	list-style:none;
	padding:0;
	margin:0;
	display:block;
}
ul.form-item li{
	float:left;
	width:33.333%;
	min-width:11.5em;
	max-width:100%;
	padding-bottom:0.281em;
}
ul.form-item li:last-child{
	padding-bottom:0m;
}
.form-item,
ul.form-item{
	/*width:90%;*/
	padding:5px 5px 5px 0px;
	margin-right:5px;
	margin-bottom:5px;
	margin-top:5px;
	float:left;
	text-align:left;
}

.form-item + ul.form-item{
	padding-top:0;
	margin-top:0;
}

.form-item label{
	width:120px;
	display:block;
	clear:both;
	margin-bottom:4px;
	float:left;
	padding-right:10px;
}

.form-item .form-input-text{
	width:190px;
}

.form-item select.form-input{
	min-width:200px;
}

.form-item .form-input-textarea{
	width:190px;
	margin:0px;
}

/* Form - Switch places label/input */

.form-item .input-left{
	/*width:120px;*/
	text-align:right;
	float:left;
	padding-right:10px;
}

.form-item label.label-right{
	width:auto;
	float:left;
	text-align:left;
	clear:none;
}

.form-item .input-left + .label-right{
	float:none;
}

/* Form - Item wide */

.form-item-wide{
	width:300px;
}

.form-item-wide .form-input-text{
	width:280px;
}

.form-item .form-input-wide{
	width:280px;
}

/* Form - Item medium */

.form-item-medium{
	width:130px;
}

.form-item-medium .form-input-text{
	width:120px;
}

.form-item .form-input-medium{
	width:120px;
}

/* Form - Item narrow */

.form-item-narrow{
	width:100px;
}

.form-item-narrow .form-input-text{
	width:80px;
}

.form-item .form-input-narrow{
	width:80px;
}

/* Form - Item single-line indent */

.form-item.form-item-singleline{
	padding-top:23px;
}

/* Form - Item no left-hand object indent */

.form-item.form-item-indent{
	/*
	130808LS removed:because it was breaking the layout on order catalog page. An image (max-width:100%) that is larger than the content area breaks the layout (100% + 130px)
	padding-left:130px;
	width:auto;
	*/
	width:83%;
	/*padding-left:17%;*/
	padding-right:0;
	margin-left:0;
	margin-right:0;
		
}

/* Form - Headers */

.form-container h1{
	font-size:26px;
	font-weight:600;
	margin:0px 0px 12px 0px;
}

.form-container h2{
	font-size:20px;
	font-weight:600;
	margin:0px 0px 12px 0px;
}

.form-container h3{
	font-size:16px;
	font-weight:600;
	margin:0px 0px 12px 0px;
}

/* Container div for toggable boxes */

.form-container-toggable{
	display:none;
}

/* Button to toggle boxes,
disguised as link */

.form-container-toggler{
	margin:0px;
	padding:0px;
	margin-top:5px;
	margin-bottom:5px;
	background-color:transparent;
	border:0px;
	color:#1155CC;
	cursor:pointer;
}

.form-container-toggler:hover{
	text-decoration:underline;
}

/* Row with right-aligned buttons */

.form-row-buttons{
	text-align:right;
	padding:5px;
	margin-bottom:10px;
	margin-top:10px;
}

/* Validation & error handling */

.requiredfield-asterisk{
	padding:0px 4px;
	text-decoration:none;
	font-size:16px;
	font-weight:600;
	color:#bf0000;
	cursor:pointer;
	vertical-align:top;
}

.form-item .form-input-text.form-item-error,
.form-item .form-input-password.form-item-error,
.form-item .form-input-textarea.form-item-error{
	border:1px solid #ad000a;
}

.form-item .validationerror{
	display:inline-block;
	padding-top:2px;
	padding-left:0px;
	color:#ad000a;
	font-weight:600;
	vertical-align:top;
}

h2.validationerror{
	color:#ad000a;
	background-color:#edb5bb;
	padding-left:10px;
	border:1px solid #dc8089;
}

/* IE8 can't handle customfonts on input-type password */
.ie8 .form-input-password{
	font-family:Arial,sans-serif;
}


/* ============================================================================
   MEDIA-SIZES: Smaller than 980
   ========================================================================= */


@media screen and (max-width:980px){
	.form-item .validationerror{
		display:block;
		padding-left:126px;
	}

}

/* ============================================================================
   MEDIA-SIZES: Smaller than 480
   ========================================================================= */
@media screen and (max-width:480px){
	
	.form-item{
		width:95%;
		padding:5px 5px 5px 0px;
		margin-right:5px;
		margin-bottom:5px;
		margin-top:5px;
		float:left;
	}

	
	.form-item label{
		display:block;
		clear:both;
		text-align:left;
		margin-bottom:4px;
		float:none;
		padding-right:10px;
	}

	
	.form-item .input-left{
		width:auto;
	}

	
	.form-item label.no-clear{
		clear:none;
		float:left;
	}

	.form-item.form-item-indent{
		padding-left:0px;
		width:90%;
	}

	.form-item .form-input-text,
	.form-item .form-input-textarea{
		width:85%;
	}

	.form-input-text.form-input-narrow{
		width:80px;
	}

	.form-item .validationerror{
		padding-left:0px;
	}

	


}

/* ============================================================================
   MEDIA-SIZES: Smaller than 320 (iPhone Portrait)
   ========================================================================= */

@media screen and (max-width:320px){
	.form-item label.no-clear{
		clear:both;
		float:none;
	}
}