@charset "UTF-8";

.cart-container > h2 {
	padding: .2em;
	background: rgba(0, 0, 0, .3);
	border-radius: 3px;
	color: rgba(255, 255, 255, .9);
}

#cart-display td.unit-p, 
#cart-display td.price-t, 
#cart-display td.quantity {
	text-align: right;
}

#cart-display td.quantity.centered {
	text-align: center;
	vertical-align: middle;
}
	
#cart-display td.quantity input {
	width: 5em;
}

#cart-display .delete-row {
	width: 1px;
    vertical-align: middle;
}

form#cart-display .btn-delete {
	display: inline;
	margin: 0 0 .3em 0;
    width: 1.5em;
    height: 1.5em;
    background: url(../img/delete.png);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 70%, 100%;
    border: 1px solid transparent;
    border-radius: 3px;
}

form#cart-display .btn-delete:hover {
	background-image:	url(../img/delete.png),
						radial-gradient(circle at center, white, white 20%, rgba(255, 255, 255, 0) 80%);
	border-color: lightgray;
}

form#cart-display .btn-delete:disabled {
	filter: grayscale(1);
}

#cart-display #total-card {
	background-color: #f7f7f7;
}

form#cart-display #sub-recalc,
form#cart-display #sub-valid {
    min-width: 140px;
    margin-top: 3px;
}


form#cart-display div#inputs input:hover {
    color: #2f2d2d;
    background-color: #e8e8e8;
    box-shadow: 0px 0px 1px grey;
    border: 1px solid gray;
}

form#cart-display #sub-hidden-recalc {
	display: none;
}

form#cart-display .inputs {
	padding-top: .5em;
	display: flex;
	flex-direction: row;
	justify-content: space-between;	
}

#cart {
	text-align: center;
}

.cart-container h1, .cart-container h2, .cart-container h3 {
	text-align: center;
}

.cart-container {
	display: inline-block;
	min-width: 50%;
	text-align: left;
	text-align: initial;
}

td.quantity input {
	text-align: right;
	width: 80px;
}

.cart-container .bottom-links {
	text-align: right;
}

.cart-container #backlink {
	padding-left: 1.4em;
	background: url("../img/kn-small.png") center left no-repeat;
	background-size: auto;
	background-size: 1.3em;
	font-weight: bold;
	text-decoration: none;
	color: darkblue;
}

.cart-container #backlink:hover {
	text-decoration: underline;
}

.bottom-links {
	margin-top: 1em;
}


/** Order confirm page **/

#order-account-choice {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-content: center;
	align-items: stretch;
	font-size: 15px;
}

#order-account-choice > * {
	width: 50%;
	flex-grow: 1;
	width: 1px;
	min-width: 21em;
	max-width: 34em;
	margin: 0 .25em .5em .25em;
	padding: 1em;
	background: #eee;
	border: 1px solid gray;
	border-radius: 3px;
}

#order-account-choice > * > *:first-child {
	 margin-top: 0;
}

#order-account-choice p,
#order-account-choice ul,
#order-account-choice ol {
	margin: 0;
}

#order-account-choice p + * {
	margin-top: .5em;
}

#order-account-choice .advert {
	font-weight: bold;
	font-style: italic;
}

#order-account-choice .italic {
	font-style: italic;
}


#order-account-choice input[type='submit']:hover,
#order-account-choice input[type='submit']:focus,
#order-account-choice button:hover,
#order-account-choice button:focus  {
	background: #4a4;
}

#order-account-choice input[type='submit']:active,
#order-account-choice button:active {
	background: #282;
	color: #aca;
}

#order-account-choice input[type='submit']:disabled,
#order-account-choice button:disabled {
	filter: grayscale(70%);
}

#express-order h3 .icon {
	display: inline-block;
	width: 2em;
	height: 1em;
	background: url('../img/express-order.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin-bottom: -.1em;
}


#express-order ol {
  counter-reset: item;
}

#express-order ol > li {
	list-style-type: none;
	counter-increment: item;
	margin-bottom: .5em;
}

#express-order ol li:before {
	display: inline-block;
	width: 1em;
	padding-right: 0.5em;
	font-weight: bold;
	text-align: right;
	content: counter(item) ".";
}

#express-order #express-order-form {
	margin-top: 1em;
	text-align: right;
}

#user-account h3 .icon {
	display: inline-block;
	width: 1.2em;
	height: 1em;
	background: url('../img/user.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin-bottom: -.1em;
}

#user-account h4 {
	margin: .5em 0;
	text-align: center;
	padding: .3em;
	background: rgba(0, 0, 0, .2);
}

#user-account #login-form {
	border-bottom: 1px solid black; 
	padding-bottom: 1em;
}

#user-account #login-form .errors .error {
	margin: .5em 0;
	padding: .2em .5em;
	border-radius: .5em;
	border: 1px solid #ccc;
	background: #d55;
	box-shadow: inset -3px 3px 5px 0 rgba(255, 255, 255, .7),
				inset 3px -3px 5px 0 rgba(0, 0, 0, .3);
	color: #fee;
	font-weight: bold;
	text-align: center;
}

#user-account #login-form .grid-row {
	display: flex;
	width: 100%;
	flex-direction: row;
	justify-content: stretch;
	align-items: center;
	margin-bottom: .2em;
}

#user-account #login-form .grid-row > * {
	width: 3em;
	flex: 1;
}

#user-account #login-form .grid-row > label {
	white-space: nowrap;
}

#user-account #login-form .grid-row > *:first-child {
	max-width: 7em;
}

#user-account #login-form .submits {
	text-align: right;
}

#user-account #create-account-form {
	text-align: center;
}

#expressorder-contact,
#session-user {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	align-content: stretch;
	margin: 0 .25em .5em .25em;
	padding: .5em 1em;
}

#expressorder-contact > *,
#session-user > * {
	margin-left: 1em;
}

#expressorder-contact > *:first-child,
#session-user > *:first-child {
	margin-left: 0;
}

#expressorder-contact h4,
#session-user h4 {
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

#expressorder-contact h4 .icon,
#session-user h4 .icon {
	display: inline-block;
	height: 1em;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin-bottom: -.1em;
}

#expressorder-contact h4 .icon {
	width: 2em;
	background-image: url('../img/express-order.png');
}

#session-user h4 .icon {
	width: 1.2em;
	background-image: url('../img/user.png');
}

#expressorder-contact .info,
#session-user .info {
	flex-grow: 1;
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: space-around;
	margin: 5px 0;
}

#expressorder-contact .info > *,
#session-user > * {
	white-space: nowrap;
	text-align: center;
	margin: 0 .5em;
}

#expressorder-contact .info span {
	padding: 0 .5em 0 0;
}

#expressorder-contact .email,
#session-user .email {
	padding: 0 .5em 0 .5em;
	text-decoration: underline;
}

#expressorder-contact #expressorder-actions-form,
#session-user #session-user-actions-form {
	flex-grow: 1;
	text-align: right;
	white-space: normal;
}

#session-user #session-user-actions-form > * {
	display: inline;
	margin-left: .5em;
}

#session-user #session-user-actions-form .question {
	font-size: .8em;
	font-style: italic;
}

/** User address **/

#address-choice {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-content: center;
	align-items: stretch;
	font-size: 15px;
}


#address-choice form.address {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 50%;
	flex-grow: 1;
	width: 1px;
	min-width: 21em;
	max-width: 34em;
	margin: 0 .25em .5em .25em;
}

#address-choice form.address > *:first-child {
	 margin-top: 0;
}

#address-choice form.address .address {
	flex-grow: 4;
}

#address-choice form.address .submits {
	flex-grow: 0;
	display: flex;
	flex-flow: column;
	align-items: stretch;
	justify-content: flex-end;
}

#address-choice form.address .submits > * {
	margin-top: .2em;
	margin-left: .2em;
}

#address-choice form.address .submits input {
	padding-left: 5px;
	padding-right: 5px;
}

#address-choice .billing-same {
	font-style: italic;
}

#address-choice h4 {
	margin: 0 0 1em 0;
	padding: 0;
}

#address-choice p {
	margin: 0;
	padding: 0;
}

#address-choice p + * {
	margin-top: .5em;
}

#address-choice .street {
	white-space: pre-wrap;
}

/** Transport choice **/

#delivery-choice-form {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

#delivery-choice-form button {
	display: flex;
	flex-flow: column;
	justify-content: space-around;
	align-content: center;
	align-items: flex-end;
	width: 15%;
	box-sizing: content-box;
	min-width: 10em;
	height: 80px;
	margin: 0 .25em .5em .25em;
	padding: 12px 12px 12px 100px;
	background-position: 12px 12px;
	background-size: 80px 80px;
	background-repeat: no-repeat;
}

#delivery-choice-form button > * {
	margin: 0;
	padding: 0;
}

#delivery-choice-form button .price {
	font-weight: bold;
	font-style: italic;
	font-size: 1.1em;
	color: #139;
}

#delivery-choice-form button .price.free {
	color: #393;
}

#delivery-choice-form button#choosePickup {
	background-image: url('../img/pickup.png');
}

#delivery-choice-form button#chooseDelivery {
	background-image: url('../img/transport.png');
}

#delivery-choice-form button.chosen {
	box-shadow: 0 0 5px 1px #ff8040;
}

#delivery-choice-form button.chosen:active {
	box-shadow: 0 0 5px 1px #ff8040,
				inset -2px 2px 3px 0 rgba(0, 0, 0, .3);
}

/** Payment choice **/

#payment-choice-form .paymeans {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

#payment-choice-form .paymeans button {
	box-sizing: content-box;
	width: 100px;
	height: 74px;
	margin: .5em .5em;
	padding: 5px;
	border: 1px solid gray;
	border-radius: 15px;
	color: gray;
}

#payment-choice-form .paymeans button:hover,
#payment-choice-form .paymeans button:focus {
	filter: contrast(110%) brightness(110%);
	color: #555;
}

#payment-choice-form .paymeans button img {
	max-width: 100%;
	max-height: 100%;
}

#payment-choice-form .paymeans button.chosen {
	box-shadow: 0 0 5px 1px #ff8040;
	color: black;
}

#payment-choice-form .paymeans button.chosen:active {
	box-shadow: 0 0 5px 1px #ff8040,
				inset -2px 2px 3px 0 rgba(0, 0, 0, .3);
}

.payment .summary {
	text-align: center;
	font-style: italic;
	margin-top: 1em;
}

#payment-choice-form .submits,
#validate-order-form .submits {
	text-align: right;
}


/** Responsive design ! **/

@media only screen and (max-device-width : 450px) , screen and (max-width: 450px) {
	
	.disclaimer {
		font-size: 10.5px;
	}
	
	#order-account-choice > * {
		min-width: 200px;
	}
	
	#address-choice form.address {
		font-size: 13px;
		min-width: 15em;
		flex-direction: column;
	}
	
	#address-choice form.address .submits {
		flex-flow: row wrap;
		align-items: center;
		align-content: flex-end;
	}
}