/*****************************************************************************

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

/* Form - Row container */

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

}

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

}

/* Form - Item container */

.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 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 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 red;

}

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

}

h2.validationerror{
	color:red;
	background-color:#e7e7e7;
	padding-left:10px;
	border:1px solid #e7e7e7;

}

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

}

/************************************************************************************************

																																						 			   MEDIA-SIZES
																																			
************************************************************************************************/




/**
 *
 *		Smaller than 980																														980
 *
 ************************************************************************************/

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

}

/**
 *
 *		Smaller than 480																														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;
	}

	


}


/**
 *
 *		Smaller than 320 (iPhone Portrait)																					320
 *
 ************************************************************************************/

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


}