@import url("forms.css");
@import url("store/prices.css");

/* General styles for this section */
/* ------------------------------- */

#content .wrapper
{
    padding-right: 30px !important;
}

h1 .step	{ font-style: normal; color: #c3bca2; }

h2
{
	color: #643d2b !important;
	font: 18px Arial, sans-serif;
	padding: 0 !important;
	margin: 0.5em 0 !important;
	text-shadow: none;
}

#no-email-address           { margin: 0.75em 0.66em 0.5em; }
#no-email-address-warning   { margin-top: 0.25em !important; color: #f30; }
#no-email-address .disabled { color: #999; }

/* Notification messages */

.notification 
{
    /* TODO: different colours for different levels of notification */
    background-color: #feb;
    padding: 5px 10px;
    margin: 10px -10px;
    font-size: 12px;
}


/* Cart email form */

#send-cart
{
    text-align: right;
    margin: 20px 0 20px;
    border-top: 1px solid #e3ddc7;
    border-bottom: 1px solid #e3ddc7;
    padding: 5px 0 10px;
}
#send-cart h3   { margin-top: 0 !important; padding: 0 !important; }
#send-cart p    { display: inline; margin: 0; }


/* Invite anonymous shoppers to log in */

#login-notice
{
    margin: 10px 0 -10px !important;
}

#login-notice a
{
    display: block;
    background: #feb url("../img/ordering/chevron_split_left.png") 100% 50% no-repeat;
    padding: 5px 10px;
    text-align: center;
    color: gray;
    text-decoration: none;
}
#login-notice em
{
    color: #643d2b;
    text-decoration: underline;
    font-style: normal;
}

#login-notice a:hover,
#login-notice a:focus
{
    background-color: #82552f;
    color: white;
}

#login-notice a:hover em,
#login-notice a:focus em
{
    color: white;
}



/* Shopping-cart product list */
/* -------------------------- */

.cart-contents
{
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 1em 0;
}

.cart-contents th,
.cart-contents td
{
	text-align: left;
	padding: 0.5em 0.5em;
	vertical-align: baseline;
	border-bottom: 1px solid #e3ddc7;
}
.cart-contents th	{ font-style: italic; color: #97896a; white-space: nowrap; }
.cart-contents p	{ color: black; display: inline; }

.cart-contents tfoot th,
.cart-contents tfoot td		{ background-color: #e3ddc7; border: 0; }
.cart-contents tfoot .empty	{ background: transparent; }
.cart-contents tfoot tr:last-child th
{
	-webkit-border-bottom-left-radius: 1em;
	-moz-border-radius-bottomleft: 1em;
	border-bottom-left-radius: 1em;
}

.cart-contents tfoot th			{ text-align: right; white-space: normal;  }
.cart-contents .grand-total *	{ font-weight: bold; }

.cart-contents .quantity	{ width: 2em; }
.cart-contents #id_code		{ width: 7em; }

#delivery-discount			{ text-align: right; }

/* Fixed height, because the update-cart button itself will be hidden most of the time */
#update-cart-wrapper    { height: 20px; text-align: right; }


#order-lowest-monthly-cost
{
    font-size: 11px;
}

.monthly-cost td,
.monthly-cost th
{
    padding-top: 0 !important;
}

.monthly-cost .monthly-costs
{
    right: -0.5em;
    background-position: 75% 100%;
}

/* Forward/back navigation within ordering process */
/* ----------------------------------------------- */

#navigation-flow
{
    margin: 2em 0;
    width: 100%;
    clear: both;
}

#navigation-flow td
{
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    height: 36px;
}

#navigation-flow a,
#navigation-flow input,
#navigation-flow button
{
	color: white;
	font: 14px/36px Arial;
}
#navigation-flow a
{
	text-decoration: none;
	padding: 0 10px;
	display: block;
}
#navigation-flow input,
#navigation-flow button
{
    cursor: pointer;
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0 10px;
	height: 36px;
	text-align: left;
}

#navigation-flow .back,
#navigation-flow .refresh,
#navigation-flow .empty		{ border-right: 6px solid white; }

#navigation-flow .refresh	{ background: #efc956; }
#navigation-flow .empty		{ background: #d81900; }
#navigation-flow .back
{
	background: #82552f url("../img/ordering/chevron_left.png") 10px 50% no-repeat;
}
#navigation-flow .back a,
#navigation-flow .back input	{ padding-left: 30px; }

#navigation-flow .disabled      { background: #e73b2d !important; }

#navigation-flow .forward
{
    width: 100%;
	text-align: right;
	background: #22b672 url("../img/ordering/chevron_right.png") 98% 50% no-repeat !important;
}
#navigation-flow .forward a,
#navigation-flow .forward button,
#navigation-flow .forward input
{
	padding-right: 30px;
	text-align: right;
}
#navigation-flow .forward button,
#navigation-flow .forward input
{
    /* Just to be on the safe side */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}


/* Order-form progress meter */
/* ------------------------- */

#order-progress
{
	margin: 20px 0 30px;
	font-size: 12px;
	font-style: italic;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

#order-progress td
{
	color: #887e60;
	background-color: #e2dcc6;
	padding: 0;
}

#order-progress span,
#order-progress a
{
    display: block;
    text-align: center;
	background: url("../img/ordering/chevron_fat_right.png") 100% 50% no-repeat;
	padding: 10px 20px 10px 10px;
	margin-right: -12px;
	height: 25px;
	line-height: 25px;
	white-space: nowrap;
	
	/* So that chevron overlaps the next cell */
	position: relative;
	z-index: 1;
}

#order-progress .active
{
	background-color: #82552f;
	color: white;
	font-style: normal;
}

#progress-cart img
{
	width: 75px;
	height: 75px;
	margin: -25px -5px -25px -25px;
	display: block;
}
* html #progress-cart img   { position: relative; }

#order-progress #progress-done span
{
    padding-right: 45px;
    margin-right: 0;
    background-image: url("../img/ordering/tick.png");
}

/* Order summary */
/* ------------- */

#summary h1	{ margin-top: 2em !important; color: #c3bca2 !important; }
#summary h2	{ text-shadow: none; }
#summary h3 .value { font: 12px Arial; color: black; }

#summary .section	{ margin: 2em 0; border-top: 1px solid #e3ddc7; }

a.change
{
	font: 12px Arial, sans-serif;
	background-color: #c3bca2;
	padding: 0.3em 0.5em 0.2em;
	margin: 0 0.25em;
	color: white;
	text-decoration: none;
	-webkit-border-radius: 0.4em;
	-moz-border-radius: 0.4em;
	border-radius: 0.4em;
}
a.change:hover	{ background-color: #82552f; }

#summary table.vertical-fields		{ margin-top: 0; }
#summary table.vertical-fields th	{ color: #97896a; font-style: italic; }


/* Confirmation */
/* ------------ */

button#payment-logo
{
    cursor: pointer;
    background: transparent;
    display: block;
    padding: 10px;
    margin: 1em auto 2em;
    width: 100%;
    border: 4px solid #e3ddc7;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    
    text-align: right;
    color: #97896a;
    font: italic 12px/2 Arial, sans-serif;
}
button#payment-logo img     { margin: 0.25em 0 0.25em 1em; vertical-align: middle; }
button#payment-logo:hover,
button#payment-logo:focus   { border-color: rgb(100, 61, 43); color: rgb(100, 61, 43); }


/* Thankyou */
/* -------- */

#thankyou
{
    line-height: 1.6em;
}

#order-tracking-link
{
    font-size: 15px;
    display: block;
}

#signup-blurb
{
    border-top: 1px solid #e3ddc7;
    margin-top: 20px;
}

#signup-choice
{
    font-size: 15px;
    margin: 1em 0 !important;
}

#create-new-account
{
    min-width: 15em;
}

#add-to-existing-account
{
}

#extra-success-info
{
    border-top: 1px solid #e3ddc7;
    margin-top: 20px;
    padding-top: 10px;
}