/* Styles for the online-shop */
.btn { cursor: pointer; }

.mui-notify-bar {
    line-height: 2em;
    text-align: center;
    background-color: rgba(99,188,70,1);
    color: rgba(255,255,255,1);
}

/* Existing styles borrowed from Bootcamp, probably ... */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

.btn-default { background-color: transparent; border-radius: 6px; border: solid 1px rgba(0,0,0,0.2); padding: 0.25em 0.75em; color: inherit; text-decoration: none; font-size: 1em; 
               vertical-align: baseline; margin: 0px 1em 0px 0px !important; }

/* Breadcrumb */
.ulShopBreadcrumbs { display: inline-block; }
.ulShopBreadLinks { display: inline-block; float: right; }
.ulShopBreadLinks li::after { content: "" !important; }

.aGoldLink { color: rgba(228,159,21,1) !important; font-weight: 600; font-size: 1.2em; }

/* Store index page */
.divFeaturedProducts { }
.divProductBox { display: inline-block; width: 33%; vertical-align: top; padding: 10px; }
.divProductBox > div { position: relative; border: solid 1px rgba(0,0,0,0.2); border-radius: 0.5em; margin: 0px; padding: 10px; font-size: 0.85em; height: 16em; }
.divProductBox h3 { line-height: 1.25; margin-top: 0px; }
.divProdBoxDetail { }
.divProductBox .divProdBoxAddForm { position: absolute; bottom: 10px; left: 10px; right: 10px; background: linear-gradient(transparent, white 30%); padding-top: 2em; }
.divProductBox .control-group a { color: inherit; }

/* Catalogue page */
.divText .ulCatalogueList { list-style: none; padding: 0px; margin: 0px; text-align: center; }
.divText .ulCatalogueList li { padding: 1em; border: solid 1px rgba(123,180,45,0.3); display: inline-block; margin: 0.5em; border-radius: 0.5em; }

/* Basket */
.tblBasket { width: 100%; margin-top: 1em; }
.divText .tblBasket th, .divText .tblBasket td { padding: 0.5em; vertical-align: middle; text-align: center; }
.thImage { text-align: left; }
.thProduct { }
.thPrice { }
.thQuantity { }
.thTotal { }
.thEmpty { }

.tblBasket tbody tr:nth-child(odd) { background-color: rgba(0,0,0,0.05); }

.tdImage { width: 50px; }
.tdProduct { text-align: left !important; }
.tdPrice { }
.tdQuantity { text-align: center; }
.tdQuantity input { width: 3em; }
.tdTotal { }
.tdEmpty { }

/*.basketButtons { padding: 0.5em 0; }
.basketButtons a { padding: 0.5em 0.5em 0 0; }*/

.trNoBackground { background-color: transparent !important; }

/* Product Box */

.prodBoxImage { width: 25%; float: left; margin: 0px 1em 0.5em 0px; }

.divProdBoxImage { width: 25%; padding-top: 35%; /*float: left; margin: 0px 1em 0.5em 0px;*/ float: right; margin: 0px 0px 0.5em 0.5em;
                   background-position: center top; background-repeat: no-repeat; background-size: contain; }

.prodInfo { width: 75%; display: inline-block; vertical-align: top; }
.prodRHS { width: 25%; display: inline-block; vertical-align: top; }
.prodImage img { width: 90%; margin: 1em auto; display: block; }
.prodPrice { margin: 0.5em 0px; }
.prodPrice span { font-weight: 700; }

.sale-price { color: red; }
.original-price { text-decoration: line-through; margin-left: 0.5em; color: rgba(76,76,76,0.5); }

.divText .ulProdBoxOptions { padding-left: 0px; list-style: none; }
.divText .ulProdBoxOptions li { }
.divText .ulProdBoxOptions label { }
.divText .ulProdBoxOptions div { margin: 0.25em 0.5em; display: inline-block; }
.divText .ulProdBoxOptions div select { font-size: 1em; }

/* Address Form */

.ulShopForm { list-style: none !important; padding: 0px !important; }
.ulShopForm li { width: 50%; display: inline-block;  box-sizing: border-box; vertical-align: top; }

.ulShopForm li.liFullWidth { width: 100%; }
.ulShopForm li.liLeftPad { padding-left: 8em; }

.ulShopForm li label { width: 8em; display: inline-block; }
.ulShopForm li input[type=text] { width: 50%; padding: 0.25em; }
.ulShopForm li span.field-validation-error { display: block; margin-left: 8em; padding: 0.5em; color: red; }
.ulShopForm li select { padding: 0.4em; }

/* shopAddressSummary */

.shopAddressSummary > div { width: 50%; display: inline-block; vertical-align: top; }

/* Braintree Credit Card form */

.frmBraintreeCC { }
.frmBraintreeCC div { margin: 0.5em 0px; }
.frmBraintreeCC label { width: 200px; display: inline-block; }
.frmBraintreeCC input { display: inline-block; border-radius: 6px; border: solid 1px rgba(0,0,0,0.2); padding: 0.25em 0.75em; }


@media only screen and (max-width: 1260px) {



}

@media only screen and (max-width: 1000px) {

    .divProductBox { width: 50%; }
    .ulShopForm li { width: 100%; margin-bottom: 0px; }
    /*.ulShopForm li select { padding: 0.7em; }*/


}

@media only screen and (min-width: 761px) {



}


@media only screen and (max-width: 760px), 
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and ( min--moz-device-pixel-ratio: 2), 
    only screen and ( -o-min-device-pixel-ratio: 2/1), 
    only screen and ( min-device-pixel-ratio: 2), 
    only screen and ( min-resolution: 192dpi), 
    only screen and ( min-resolution: 2dppx) {

    .divProductBox { width: 100%; }
    .ulShopForm li label { display: block; margin-bottom: 0.25em; }
    .ulShopForm li input[type=text] { width: 80%; }
    .ulShopForm li.liLeftPad { padding-left: 0px; }
    .ulShopForm li span.field-validation-error { margin-left: 0px; padding: 0.25em 0px; }
    .shopAddressSummary > div { width: 100%; margin-top: 0.5em; }

}

@media only screen and (max-width: 640px) {
	
}

@media only screen and (max-width: 500px),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {



}