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

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

/* Form - Row container */

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

.form-row.form-row-hr {
	background-color: #e8e8e8;
	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: #e8e8e8;
	padding-left: 10px;
	border: 1px solid #e8e8e8;
}


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