/*
	Order.php
	Copyright 2009 Avalanche Creative
	
	Style rules for BWC's Ordering Form
*/

.field{
	margin: 4px 0px;
	float: left;
	display: block;
	overflow: hidden;
	position: relative;
}
	html>body .field{
		overflow: visible;
	}
	label{
		float: left;
		clear: left;
		position: relative;
		display: block;
		color: #000;
		font: bold 1em/28px Arial;
		text-align: right;
		padding-right: 5px;
	}
	h4{
			font-weight: bold;
			font-size: 1.1em;
			margin-bottom: 0.6em;
		}

	input{
		height: 18px;
		padding-top: 2px;
		padding-left: 3px;
		font-size: 1em;
		float: left;
		display: block;
	}

	button{
      width: 100px;
			height: 20px;
			border: 1px solid #999;
			background-color: #e8e8e8;
			display: block;
			padding-top: 0px;
			float: right;
	}
		.confirm button{
      width: 180px;
			height: 20px;
			border: 1px solid #999;
			background-color: #e8e8e8;
			display: block;
			padding-top: 0px;
			float: left;
	}
	
	.currency_right {
		text-align: right;
	}
	.currency_center {
		text-align: center;
	}
		.currency_right td {
		border: 1px solid #ddd;
		padding-left: 3px;
		padding-right: 10px;
	}
		.delivery_right td {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	
	textarea{
		border: 1px solid #d1e3bf;
		background-color: #d9ecc6;
		float: left;
		display: block;
		padding-top: 5px;
		padding-left: 7px;
		font: normal 0.95em Arial;
	}

	.reqField{
		position: relative;
		width: 0px;
		height: 0px;
		margin-right: 2px;
		color: #047551;
		font: normal 1.3em/20px Verdana !important;
	}
	.missingField,
	.missingField span{
		color: #f00 !important;
	}
	
		/* Error Messages */
		.status{
			font: 0.9em/1.1em Arial !important;
			font-weight: bold !important;
			color: #f00;
			height: 10px; /*30px*/
			margin-bottom: 5px;
			display: block;
			position: relative;
			height: 8px;
			width: 0px;
		}
			.status span{
				position: absolute;
				width: 400px;
				height: 20px;
			}
			
	.footnote{
		float: left;
		display: block;
		position: relative;
		overflow: hidden;
		font: bold 0.85em/1.3em Arial;
	}



	#catalogue{
		width: 640px;
		height: 200px;
		overflow-y: auto;
	}
		#catalogue .lightbox{
			float: left;
			width: 200px;
			height: 190px;
			overflow: hidden;
			position: relative;
		}
				#catalogue .lightbox img{
					display: block;
					margin: 0px auto 5px;
				}
				#catalogue .lightbox span{
					display: block;
					margin: 0px auto 5px;
					width: 200px;
					text-align: center;
				}

	#ordering,
	#shipping{
		font-size: 0.95em;
		padding-top: 10px;
	}
	
	
/*
	******************************************************
	ORDERING DETAILS
	******************************************************
*/
	#ordering{
		width: 300px;
		float: left;
	}
	
		fieldset h4{
			font-weight: bold;
			font-size: 1.1em;
			margin-bottom: 0.6em;
		}
			fieldset p{
				font-size: 0.9em;
				line-height: 1.4em;
				margin-bottom: 0.8em;
			}
	
		/* PRODUCT STYLING */
		.product{
			width: 280px;
			float: left;
			background-color: #eee;
			border: 1px solid #ddd;
			border-bottom-style: none;
			padding-top: 0px;
		}
				/***** QUANTITY *****/
				.product .field{
					width: 70px;
					margin-top: 0px;
					padding: 4px 0px 4px 20px;
					background-color: #ddd;
				}
					.product .field input{
						width: 35px;
						padding: 0px;
						height: 19px;
						display: block;
						padding-top: 1px;
						margin: 0px !important;
						text-align: center;
						float: none;
					}
					.product .field label{
						text-align: left;
						margin: 0px;
						width: 60px;
						padding: 0px;
						line-height: 1.6em;
						font-size: 1em;
					}
		
				/***** DETAILS *****/
				.details{
					margin: 0px 0px 0px 5px !important;
					list-style: none;
					padding: 3px 0px 0px 0px;
					display: block;
					float: left;
				}
					.details li{
						list-style: none;
						padding: 0px;
						line-height: 1.2em;
						margin: 0px 0px 0px 5px;
					}
					.details_name{
						font-weight: bold;
						color: #000;
						margin-bottom: 2px !important;
					}
					.details_code{
						color: #333;
						font-size: 0.9em;
					}
			
			
				/****** PERSONAL FIELDS ******/
				#personal{
					width: 290px;
					margin-top: 5px;
					display: block;
					float: left;
				}
					#personal label{
						float: left;
						clear: left;
						position: relative;
						display: block;
						color: #000;
						font: bold 1em/20px Arial;
						text-align: right;
						width: 80px;
						padding-right: 10px;
					}
					
					#personal input{
						border: 1px solid #d1e3bf;
						background-color: #d9ecc6;
						font-size: 1em;
						float: left;
						display: block;
						width: 187px;
					}
	
	
		
	
	
	
	
		
/*
	******************************************************
	SHIPPING DETAILS
	******************************************************
*/
	#shipping{
		width: 340px;
		float: right;
	}
		#shipping .field{
			margin-bottom: 5px;
		}
			#shipping label{
				text-align: left;
				width: 92px; /*105px*/
				margin-right: 5px;
				line-height: 20px;
				padding-left: 13px;
				display: block;
				position: relative;
			}
			#shipping textarea{
				width: 320px;
			}
			#shipping input{
				border: 1px solid #d1e3bf;
				background-color: #d9ecc6;
			}
				#shipping input,
				#shipping select{
					width: 214px;
				}
			#shipping .reqField{
				position: absolute;
				left: 0px;
				top: -3px;
			}
			#shipping .footnote .reqField{
				position: static;
				left: auto;
				top: auto;
			}
			
		#order #sent{
			width: 100px;
			height: 20px;
			border: 1px solid #999;
			background-color: #e8e8e8;
			display: block;
			padding-top: 0px;
			float: right;
		}