/*
--- CLIENT
--- Editor stylesheet
--- By James Barnsley
*/


	
/* ============================================================================ GENERIC FORMS ============== */
/* ========================================================================================================= */

/* =============== TEXT AREAS ==== */

fieldset {
	border: 0; 
	padding: 0;
	margin: 0; }

.field {
	padding: 12px 0;}

input,
textarea,
.faux-input {
	padding: 10px 16px;
	border: 1px solid #343535;
	background: transparent;
	font-size: 14px;
	font: inherit
}
	
textarea {
	padding: 10px 8px; }

.field label {
	width: 34%;
	float: left;
	font-size: 14px;
	font-weight: 500;
	text-align: right;
	padding: 12px 1% 0 0;}
	
.Actions {
	padding-left: 35%;}

button,
input[type=submit]{
	background: #2e2f31;
	border: 0;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: hand;
	cursor: pointer;}
	
button:hover,
input[type=submit]:hover {
	background: #000;}
	
	
label.required {
	float: none;
	margin: 0 0 0 10px; 
	color: red; }

	
/* =============================================================================== LOGIN FORM ============== */
/* ========================================================================================================= */
	
#MemberLoginForm_LoginForm {
	width: 60%;
	margin: 40px auto 70px;}
	
#MemberLoginForm_LoginForm input[type=text],
#MemberLoginForm_LoginForm input[type=password] {
	width: 55%;}
	
#MemberLoginForm_LoginForm #Remember label {
	padding-top: 0;}
	
#MemberLoginForm_LoginForm input[type=submit]{
	float: left;}
	
#MemberLoginForm_LoginForm #ForgotPassword {
	padding: 0;}
	
#MemberLoginForm_LoginForm #ForgotPassword a {
	background: #CCCCCC;
	border: 0;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 11px 16px;
	float: left;
	text-decoration: none;
	color: #FFFFFF;
	margin-left: 8px;}
	
#MemberLoginForm_LoginForm #ForgotPassword a:hover {
	background: #AAAAAA;}
	
	
	
	
/* ============================================================================= CONTACT FORM ============== */
/* ========================================================================================================= */	
	
#Form_Form {
	margin: 20px 0 30px; }
	
#Form_Form label {
	padding: 10px 10px 0 0; 
	width: 150px; }
	
#Form_Form .field input {
	width: 230px; }
	
#Form_Form textarea {
	width: 245px; }
	
#Form_Form .Actions {
	padding-left: 160px; 
	padding-top: 10px; }
	
#Form_Form .Actions input {
	width: 263px; }
	


	
/* ====================================================================== ORDER ONLINE WIZARD ============== */
/* ========================================================================================================= */


#order-wizard {
	position: relative;
    
}
	

/* ======================= PROGRESS BAR ==== */

#order-wizard .wizard-progress {
	position: absolute;
	top: 32px;
	left: 3%;}
	
#order-wizard .wizard-progress .title {
	color: #acacad;
	text-transform: uppercase;
	font-size: 11px; }

#order-wizard .wizard-progress .progress-bar {
	width: 150px;
	height: 8px;
	background: #d0d0d0;
	display: inline-block;
	position: relative;}
	
#order-wizard .wizard-progress .progress-bar .progress-indicator {
	position: absolute;
	top: 0;
	left: 0;
	height: 8px;
	width: 33%;
	display: inline-block;
	background: #cd1515;}
	

	
	
/* ======================= CONTROLS ==== */

#order-wizard .wizard-controls {
	position: relative;
    text-align: center;
}
	
#order-wizard .wizard-controls .back-button {
    margin-right: 5px;
    cursor: hand;
    cursor: pointer;
    padding: 15px;
    color: #777777;
    display: inline-block;
    vertical-align: top;
}
	
#order-wizard .wizard-controls .back-button .text {
    padding-top: 2px;
    display: inline-block;
}
	
#order-wizard .wizard-controls .back-button:hover {
	opacity: 1;
}

#order-wizard .wizard-controls .next-button,
#order-wizard .wizard-controls .submit-button {
	background: #000000;
	color: #FFFFFF;
	top: 0;
	left: 0;
	text-align: center;
	font-size: 18px;
	cursor: hand;
	cursor: pointer;
    display: inline-block;
}

#order-wizard .wizard-controls .next-button .text,
#order-wizard .wizard-controls .submit-button .text {
    display: block;
    float: left;
    padding: 14px 15px 0 18px;
}
	
#order-wizard .wizard-controls .next-button .icon,
#order-wizard .wizard-controls .submit-button .icon {
	display: inline-block;
	float: none;
}
	
#order-wizard .wizard-controls .next-button:hover,
#order-wizard .wizard-controls .submit-button:hover {
	background: #333333;
}
	



	
/* ======================= ORDER DETAILS ==== */	

#order-details {
	background: #555;
	padding: 20px; 
	display: none; /* hide until 2nd step */}
	
#order-details .segment {
	width: 70%;
	margin: 0 0 0 3%;
	padding: 3px 0; }
	
#order-details .segment.hidden {
	display: none; }
	
#order-details .segment h4 {
	font-size: 1.1em;
	color: #fff;
	margin: 0; 
	float: left; 
	width: 170px; }
	
#order-details .segment p {
	font-size: 1em; 
	color: #fff;
	float: left;
	margin: 2px 30px 0 0; }
	
#order-details .segment p strong {
	font-weight: 500;
	margin: 0 10px 0 0; }
	
#order-details .segment p span {
	display: inline-block;
	text-transform: capitalize; }
	
	

/* ======================= STEPS ==== */

#order-wizard .wizard-steps {
	z-index: 4;
	position: relative;
	margin-left: 0;
}
	
#order-wizard .wizard-step {
	padding: 65px 4%;
	opacity: 0;
	display: none; }

	

/* ======================= FIELDS ==== */

#order-wizard .wizard-step h2 {
	padding-bottom: 40px;}
	
#order-wizard .wizard-step .field {
	clear: both;}
	
#order-wizard .wizard-step .field label {
	width: 20%;
	padding-right: 20px;}

#order-wizard .wizard-step .field.text input {
	width: 50%;}
	
#order-wizard .wizard-step .field .faux-input {
	width: 50%;
	float: left;
	color: #AAAAAA;
	cursor: default;
	border-color: #AAAAAA;}

#order-wizard .wizard-step .field.text.postcode input,
#order-wizard .wizard-step .field.text.house-number input {
	width: 15%;}
	
	
#order-wizard .wizard-step.order-details .detail {
	padding: 12px 0 0;
	float: left; 
	text-transform: capitalize; }
	
#order-wizard .wizard-step.order-details .detail.order-email {
	text-transform: none; }

/* ======================= GOOGLE GIS API DROPDOWN ==== */

.pac-container {
	background: #eeeeee;
	box-shadow: none;
	border: 1px solid #000000;
	border-top: 0;
	font-family: inherit;
	font-size: 14px;
}

.pac-container:after {
	background: none !important;
	height: 0;
}

.pac-container .pac-item {
	font-size: inherit;
	padding: 4px 14px;
	border: 0;
}

.pac-container .pac-item:hover {
	background: #E4E4E4;
	cursor: hand;
	cursor: pointer;
}
	
.pac-container .pac-icon-marker {
	display: none;
}

.google-api-address {
	background-position: 99% 50%;
	background-repeat: no-repeat;
}

.google-api-address.tick-background {		background-image: url('../images/icon-tick.gif'); }
.google-api-address.cross-background {		background-image: url('../images/icon-cross.gif'); }
.google-api-address.loading-background {	background-image: url('../images/icon-loading.gif'); }



/* ======================= DROPDOWN FIELDS ==== */

.field .faux-dropdown {
	display: inline-block;
	width: 50%;
    border: 1px solid #343535;
    font-size: 14px;
	cursor: hand;
	cursor: pointer;
	position: relative;}
	
.field .faux-dropdown .label {
    padding: 10px 16px;
	position: relative;}

.field .faux-dropdown .label .value {
	min-height: 20px;}

.field .faux-dropdown .label .value.placeholder {
	color: #AAAAAA;}
	
.field .faux-dropdown .label .icon {
	position: absolute;
	top: 9px;
	right: 0px;}

.field .faux-dropdown .options {
	display: none;
	position: absolute;
	width: 100%;
	left: -1px;
    border: 1px solid #343535;
	border-top: 0;
	background: #EEEEEE;
	z-index: 6;
	max-height: 300px;
	overflow-y: auto;}

.field .faux-dropdown.expanded .options {
	display: block;}
	
.field .faux-dropdown .options .option {
    display: block;
	padding: 10px 16px;
}

.field .faux-dropdown .options .option:hover {
	background: #DDDDDD;}
	

/* ======================= RADIO FIELDS ==== */
	
.field .faux-radio .option {
	display: inline;}
	
.field .faux-radio .option .button {
	cursor: hand;
	cursor: pointer;
	margin-left: 0;
	display: block;
	float: left; }
	
.field.product .option .button {
	float: none; 
	text-align: center; }
	
.field .faux-radio .option.checked .button {
	background: #ffc000; }
	
	

/* ======================= VALIDATION ==== */

#order-wizard .wizard-step .field .error-message {
	display: none;
	color: #b82323;
	font-size: 12px;
	text-transform: uppercase;
	padding-left: 15px;}
	
#order-wizard .wizard-step .field.error .error-message {
	display: inline-block;}
	
#order-wizard .wizard-step .field.error.radio .error-message {
	padding-top: 10px;}
	
#order-wizard .wizard-step .field.error input,
#order-wizard .wizard-step .field.error .faux-dropdown {
	border-color: #b82323;}

#order-wizard .wizard-step .field.error label {
	color: #b82323;}

	
/* error message specific to GIS address checker step (step 1) */
#order-wizard .wizard-step .field .error-message.outside-service-area {
	padding-left: 22%;
	padding-top: 40px;
	font-size: 16px;
	text-transform: none;
}

#order-wizard .wizard-step .field .success-message.inside-service-area {
	padding-left: 22%;
	padding-top: 40px;
	font-size: 16px;
	text-transform: none;
	color: #0aa911;
}
	
	

/* ======================= OPTIONS / SELECT PRODUCT ==== */

.field.product .option {
	width: 23%;
	float: left; }
	
.field.product-price {
	margin: 50px 0 0; 
	text-align: center;
	display: none; }
	
	
/* product images */

.field.product-image {
	position: absolute;
	right: 30px;
	top: 200px; }
	
.field.product-image img {
	display: none; }
	
	
/* ======================= PAYMENT OPTIONS ==== */
	
p.special-offer {
	font-style: italic;
	text-align: center; 
	color: #cd1515;
	margin: 0 0 20px; }
	
	
.field.payment-price {
	margin: 50px 0 0;
	display: none; 
	text-align: center; }