/*
Start of Ecart Area, this is the Productcartdisplay page
This css is also used to set the majority of settings on
*/

/* headers & Labels*/
div.Ecart > table.Ecart > tbody > tr > th,
form.ProductCartDeliveryForm > fieldset > label,
table#MyOrdersList th,
div.OrderLines > form > table#MyOrderDetails > tbody > tr > th,
div.MyOrders > table#MyOrdersList > tbody > tr > th
{
/*	background-color:#d2df97;
	xbackground-color:#007700;
	color:#333;
	xcolor:#00cccc;
*/
}

div.OrderLines > form > table#MyOrderDetails > tbody > tr > td,
div.Ecart > table.Ecart > tbody > tr > td,
table#MyOrdersList td,
form.ProductCartDeliveryForm > fieldset > input, form.ProductCartDeliveryForm > fieldset > select,form.ProductCartDeliveryForm > fieldset > textarea#Comments,
div.Ecart > table.Ecart > tbody > tr > td > form > fieldset > select,
form#ProductCartDeliveryForm.ProductCartDeliveryForm > fieldset > input
{
/*
	background-color:#333;
	x-background-color:#007700;
	color:#00cccc;
	xcolor:#cc00cc;
*/
}
form#ProductCartDeliveryForm.ProductCartDeliveryForm > fieldset > input#Register
{
	padding-right:40%;
	width:0;
	float:left;
	text-align:left;
}


table#MyOrdersList th, table#MyOrdersList td
{
/*
	border-color:white;
*/
}
table#MyOrdersList th, table#MyOrdersList td
{
/*
	border-color:white;
*/
}


table#MyOrdersList, table#MyOrderDetails
{
	width:100%;
}


table#MyOrdersList th, table#MyOrdersList td
{
	border-style:solid;
	text-align:left;
	width:18%;
        padding:5px 1% 5px 1%;
}

table.Ecart
{
	width:100%;
}

table.Ecart > tbody > tr > td, table.Ecart > tbody > tr > th
{
	padding-bottom:10px;
}

table.Ecart > tbody > tr > td.Image
{
	vertical-align:bottom;
}

table.Ecart > tbody > tr > td.Image img
{
	width:100%;	
	height:auto;
	display: block;
	margin-left: auto;
	margin-right: auto;	
}
div.Ecart > table.Ecart > tbody > tr > td.Image
{
	width:15%;
}

div#EcartDeliveryInformationText
{
	width:46%;
	margin-right:2%;
	float:left;
}

form#ProductCartDeliveryForm.ProductCartDeliveryForm > fieldset > input#Register
{
	float:right;
	margin-right:25%;
}
div.shopping-cart > div#EcartDeliveryInformation > h3,
div.shopping-cart > div#EcartDeliveryInformation > span.GoodsTotal,
div.shopping-cart > div#EcartDeliveryInformation > span.GoodsVAT,
div.shopping-cart > div#EcartDeliveryInformation > span.SubTotal,
div.shopping-cart > div#EcartDeliveryInformation > span.TotalVAT,
div.shopping-cart > div#EcartDeliveryInformation > span.DeliveryTotal,
div.shopping-cart > div#EcartDeliveryInformation > span.GrandTotal,
div.shopping-cart > div#EcartDeliveryInformation > span.DeliveryVAT
{
	display:block;
	text-align:right;
}



div#EcartDeliveryInformation
{
	width:48%;
	float:right;
}


form#ProductconfirmorderForm > div,
div.Productconfirmorder > div.shopping-cart,
form#ProductconfirmorderForm,
div#EcartDeliveryInformationText, div#EcartDeliveryInformation
{
	padding:10px 1% 10px 1%;
	outline-width: 1px;
	outline-style: solid;
	outline-color:blue;
}

div.Ecart > table.Ecart > tbody > tr > th, div.Ecart > table.Ecart > tbody > tr > td
{
	padding:5px 1% 5px 1%;
}

div.Ecart > div#EcartDeliveryInformation > table
{
	margin-top:20px;
}

div.Ecart > div#EcartDeliveryInformation table
{
	float:right;
	width:50%;
	text-align:right;
}

div.Ecart > table.Ecart > tbody > tr > td
{
	text-align:right;
}
div.Ecart > table.Ecart > tbody > tr > td.ProductName
{
	text-align:inherit;
}


form.ProductCartDeliveryForm > fieldset
{
	padding:0 0 0 0;
	margin:0 0 0 0;
	border-width:0;
}

form.ProductCartDeliveryForm > fieldset > label,
form.ProductCartDeliveryForm > fieldset > input,
form.ProductCartDeliveryForm > fieldset > select
{
	border-width:0 0 0 0;
	padding-top:3px;
	padding-bottom:3px;
}

form.ProductCartDeliveryForm > fieldset > label
{
	float:left;
	width:48%;
	padding-left:0;
	padding-right:2%;
}

form.ProductCartDeliveryForm > fieldset > input, form.ProductCartDeliveryForm > fieldset > option, form.ProductCartDeliveryForm > fieldset > textarea#Comments,
form.ProductCartDeliveryForm > fieldset > select
{
	float:right;
	width:47%;
	margin-left:1%;
	padding-left:1%;
	padding-right:1%;
}
/*
I wanted to go with a mobile first approach, but it actually lead to more verbose CSS in this case, so I've gone web first. Can't always force things...

Side note: I know that this style of nesting in SASS doesn't result in the most performance efficient CSS code... but on the OCD/organizational side, I like it. So for CodePen purposes, CSS selector performance be damned.
*/

/* Global settings */
/*
$color-border: #eee;
$color-label: #aaa;
$font-default: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-bold: 'HelveticaNeue-Medium', 'Helvetica Neue Medium';
*/


/* Global "table" column settings */
.product-image { float: left; width: 20%; }
.product-details { float: left; width: 31%; }
.product-price { float: left; width: 12%; }
.product-quantity { float: left; width: 10%; }
.product-removal { float: left; width: 9%; }
.product-line-price { float: left; width: 12%; text-align: right; }


div.column-labels > .product-image, div.column-labels .product-details, div.column-labels > .product-price, div.column-labels > .product-quantity, div.column-labels > .product-removal, div.column-labels > .product-line-price
,div.product > div.product-image, div.product > div.product-details, div.product > div.product-price, div.product > div.product-quantity, div.product > div.product-removal, div.product > div.product-line-price, 
form#ProductCartDeliveryForm.ProductCartDeliveryForm > fieldset > label, form#ProductCartDeliveryForm.ProductCartDeliveryForm > fieldset > textarea, form#ProductCartDeliveryForm.ProductCartDeliveryForm > fieldset > label, form#ProductCartDeliveryForm.ProductCartDeliveryForm > fieldset > input, form#ProductCartDeliveryForm.ProductCartDeliveryForm > fieldset > input,form#ProductCartDeliveryForm.ProductCartDeliveryForm > fieldset > select,
html > body > div#PageWrapperLayer01 > div.GenericWrapper.ContentWrapper.ContentWrapperMaxWidth > div.RoundedBoxBackground > form#ProductCartDeliveryForm.ProductCartDeliveryForm > fieldset > select#Country_FK
{
	outline-width: 1px;
	outline-style: solid;
	padding:5px .5% 5px .5%;
	outline-color:blue;
}

div.column-labels > .product-image, div.column-labels .product-details, div.column-labels > .product-price, div.column-labels > .product-quantity, div.column-labels > .product-removal, div.column-labels > .product-line-price,

{
	background-color:transparent;
}
div.product > div.product-image, div.product > div.product-details, div.product > div.product-price, div.product > div.product-quantity, div.product > div.product-removal, div.product > div.product-line-price
{
	overflow:hidden;
/*
	height:120px;
	padding:5px .5% 5px .5%;
*/
	min-height:100px;
}

html > body > div#PageWrapperLayer01 > div.GenericWrapper.ContentWrapper.ContentWrapperMaxWidth > div.RoundedBoxBackground > div.shopping-cart > div.product > div.product-quantity > form > fieldset > select
{
	max-width:50px;
}

div.product > div.product-image
{
	max-height:100px;
}
div.product > div.product-image img
{
	width:100%;
	height:auto;
}


label.product-image , label.product-details, label.product-price, label.product-quantity, label.product-removal, label.product-line-price
{
	height:inherit;
}

/* This is used as the traditional .clearfix class */
.group:before,
.group:after {
    content: '';
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1;
}


/* Apply clearfix in a few places */
.shopping-cart, .column-labels, .product, .totals-item {
  @extend .group;
}


/* Apply dollar signs */
.product .product-price:before, .product .product-line-price:before, .totals-value:before {
/*
  content: '$';
*/
}


div.shopping-cart > div.product > div.product-price > span.Each:before {
  content: '(';
}
div.shopping-cart > div.product > div.product-price > span.Each:after {
  content: ' Each)';
}

div.shopping-cart > div.product > div.product-price > span.VAT:before {
  content: '';
}
div.shopping-cart > div.product > div.product-price > span.VAT:after {
  content: ' VAT)';
}

.shopping-cart {
/*
  margin-top: -45px;
*/
}


/* Column headers */
	.column-labels {
	label {
	padding-bottom: 15px;
	margin-bottom: 15px;
	}

	.product-image, .product-details, .product-removal {
	text-indent: -9999px;
	}
}


/* Product entries */
.product {
  margin-bottom: 10px;
  padding-bottom: 1px;
  
  .product-image {
    text-align: center;
    img {
      width: 100px;
    }
  }
  
  .product-details {
    .product-title {
      margin-right: 20px;

    }
    .product-description {
      margin: 5px 20px 5px 0;
      line-height: 1.4em;
    }
  }
  
  .product-quantity {
    input {
      width: 40px;
      
    }
  }
  
  .remove-product {
    border: 0;
    padding: 4px 8px;
    background-color: #c66;
    color: #fff;
    font-family: $font-bold;
    font-size: 12px;
    border-radius: 3px;
  }
  
  .remove-product:hover {
    background-color: #a44;
  }
}


/* Totals section */
.totals {
  .totals-item {
    float: right;
    clear: both;
    width: 100%;
    margin-bottom: 10px;
    
    label {
      float: left;
      clear: both;
      width: 79%;
      text-align: right;
    }
    
    .totals-value {
      float: right;
      width: 21%;
      text-align: right;
    }
  }
  
  .totals-item-total {
    font-family: $font-bold;
  }
}

.checkout {
  float: right;
  border: 0;
  margin-top: 20px;
  padding: 6px 25px;
  background-color: #6b6;
  color: #fff;
  font-size: 25px;
  border-radius: 3px;
}

.checkout:hover {
  background-color: #494;
}




/* Make adjustments for tablet */
@media screen and (max-width: 768px) {
  
	table#MyOrderDetails
	{
		overflow-x:auto;
	}

	.shopping-cart {
		margin: 0;
		padding-top: 20px;
		border-top: 1px solid $color-border;
	}

	.column-labels {
		display: none;
	}
  
	.product-details {
		width: 49%;
		margin-bottom: 10px;
	}
	.product-image {
		float: right;
		width: 49%;
	}

	div.product > div.product-image
	{
		max-height:50px;
		overflow:hidden;
	}
  
	.product-price {
		clear: both;
		width: 24%;
	}
  
	.product-quantity {
		width: 24%;
	}
	.product-removal {
		width: 24%;
	}

	.product-quantity > form > fieldset:before {
		content: 'x';
	}


	.product-line-price {
		width: 24%;
		float: right;
	}
	
	
	div.shopping-cart > div.product > div.product-price,
	div.shopping-cart > div.product > div.product-quantity,
	div.shopping-cart > div.product > div.product-removal,	
	div.shopping-cart > div.product > div.product-line-price
	{
		height:60px;
		min-height: inherit;
		padding-bottom:0;
		overflow:scroll;
	}

	div.shopping-cart > div.product > div.product-price > span.VATRate {
	  display:none;
	}
	div.shopping-cart > div.product > div.product-price > span.Each:before {
	  content: '';
	}
	div.shopping-cart > div.product > div.product-price > span.Each:after {
	  content: 'e';
	}
	div.shopping-cart > div.product > div.product-price > span.VAT:after {
	  content: 't';
	}	
	
}


/* Make more adjustments for phone */
@media screen and (max-width: 360px) {
  
	.product-removal {
	}

	.product-line-price {
		float: right;
	}

	.product-image, .product-details, .product-price, .product-quantity, .product-removal, .product-line-price
	{
		padding:0;
	}

	.product .product-line-price:before {
	/*
	content: 'Item Total: $';
	*/
	}
	div.shopping-cart
	{
		font-size:0.7em;
		line-height:1.2em;
	}
	div#OverallTopLineRow > div#HeaderMiniMenu
	{
		width:100%;
		max-width: inherit;
	}
	div#OverallTopLineRow > div#HeaderMiniMenu > span.OverallTopLineRowHideElement
	{
		display:none;
	}



}



/*
End of Ecart Area
*/p#AdminDynamicCSSAlert
{
         display:none;
}