/*** Store General ***/
#StoreTop {
   min-height: 26px;
   margin-bottom: 10px;
}

#StoreCrumb {
   font-size: 12px;
   font-family: verdana;
   line-height: 26px;
   float: left;
}

#Cart {
   background: url(/eCommerce/Metro/icoCart.png) bottom no-repeat;
   font-size: 12px;
   font-family: verdana;
   width: 36px;
   height: 24px;
   display: inline-block;
   box-sizing: border-box;
   text-align: center;
   padding-left: 6px;
   line-height: 12px;
   margin-left: 10px;
   font-weight: bold;
   color: black;
   vertical-align: middle;
}
#Cart:hover {
   text-decoration: none;
}

#SearchCart {
   float: right;
   font-size: 0px;
}
#SearchCart form {
   display: inline-block;
}
#SearchCart input {
   height: 26px;
   padding: 3px;
   box-sizing: border-box;
   vertical-align: middle;
}
#SearchCart input[type=text] {
   border: 1px solid #777777;
   color: #999999;
   -webkit-appearance: none;
   -webkit-border-radius: 0px;
   margin: 0px;
}
#SearchCart input[type=submit] {
   background-color: #CCCCCC;
   border: 1px solid #777777;
   border-left: 0px;
   -webkit-appearance: none;
   -webkit-border-radius: 0px;
   margin: 0px;
}
#SearchCart input[type=text].On {
   color: black;
}

#StoreContent select,
#StoreContent input[type=number],
#StoreContent input[type=text],
#StoreContent input[type=email],
#StoreContent input[type=password],
#StoreContent textarea {
   box-sizing: border-box;
   padding: 2px;
   margin: 0px;
   border: 1px solid #777777;
   font-size: 16px;
   font-family: Tahoma, Sans-Serif;
   -webkit-appearance: none;
   -webkit-border-radius: 0px;
   height: 1.6em;
}
#StoreContent input[type=submit],
#StoreContent input[type=button] {
   font-size: 16px;
   font-family: Verdana, Sans-Serif;
   background: #303030;
   border: 0px;
   padding: 12px;
   margin: 0px;
   text-transform: uppercase;
   text-shadow: 1px 1px black;
   color: white;
   cursor: pointer;
   -webkit-appearance: none;
   -webkit-border-radius: 0px;
}
#StoreContent input[type=submit]:hover,
#StoreContent input[type=button]:hover {
   background-color: #707070;
}

.StoreTitle {
   font-size: 24px;
   color: #414141;
   font-family: Trebuchet MS, Sans-Serif;
}
/*** /Store General ***/



/*** Product & Catalog List ***/
#ProductList > a {
   width: 218px;
   margin: 10px 5px;
   padding: 8px;
   display: inline-block;
   border: 1px solid transparent;
   vertical-align: top;
   box-sizing: border-box;
}
#ProductList > a:hover {
   background: #fafafa;
   border: 1px solid #eee;
   text-decoration: none;
}
#ProductList img {
   margin: 0px auto 5px auto;
   max-width: 100%;
   max-height: 100%;
   border: 0px;
}
#ProductList .ProdTitle {
   font-family: Trebuchet MS, Sans-Serif;
   font-size: 20px;
   color: #414141;
   display: block;
   text-align: center;
}
#ProductList .ProdDesc {
   font-family: Verdana, Sans-Serif;
   font-size: 12px;
   color: #6d6d6d;
   display: block;
   text-align: center;
   margin: 5px 0px;
}
#ProductList .ProdPrice {
   font-family: Arial, Sans-Serif;
   font-size: 16px;
   color: #000000;
   font-weight: bold;
   display: block;
   text-align: center;
}
#ProductList .VendorInfo {
   font-family: Verdana, Sans-Serif;
   font-size: 12px;
   color: #414141;
   display: block;
   text-align: center;
   margin: 5px 0px;
}

.ProdSM { display: block; }
.ProdMD { display: none; }
@media (max-width: 720px) { /* Change right before 2 products */
   #ProductList > a {
      width: 100%;
      margin: 0px 0px 20px 0px;
   }
   .ProdSM { display: none; }
   .ProdMD { display: block; }
}
/*** /Product & Catalog List ***/



/*** Product Detail ***/
#ProductDetail .LeftColumn {
   width: 49%;
   float: left;

}

#ProdImage {
   display: block;
   margin: 0px auto;
   max-width: 100%;
   max-height: 100%;
}
#ProdVideoContainer {
   position: relative;
   padding-bottom: 100%;
   height: 0px;
   display: none;
}
#ProdVideo {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   border: 0px;
}

#ProdThumbs {
   margin-top: 10px;
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
}
#ProdThumbs img {
   width: 82px;
   height: 82px;
   border: 0px;
   display: inline-block;
   margin-left: 10px;
   cursor: pointer;
}
#ProdThumbs img:first-child { margin-left: 0px;}

#ProductDetail .RightColumn {
   width: 49%;
   float: right;
}
#ProductDetail .ProdTitle {
   font-family: Trebuchet MS, Sans-Serif;
   font-size: 48px;
   color: #414141;
   display: block;
}
#ProductDetail .ProdDesc {
   font-family: Verdana, Sans-Serif;
   font-size: 14px;
   color: #6d6d6d;
   display: block;
   margin: 20px 0px;
}
#ProductDetail .ProdPrice {
   font-family: Arial, Sans-Serif;
   font-size: 24px;
   color: #000000;
   font-weight: bold;
   display: block;
   margin-bottom: 10px;
}

#ProductDetail .ProdFormRow {
   padding: 5px 0px;
   position: relative;
}
#ProductDetail label {
   font-family: Tahoma, Sans-Serif;
   font-size: 16px;
   display: inline-block;
   float: left;
   margin: 3px 5px 3px 0px;
}
#ProductDetail select,
#ProductDetail input[type=number] {
   max-width: 90%;
}
#ProductDetail input[type=number] { width: 50px; }

@media (max-width: 720px) {
   #ProductDetail .LeftColumn,
   #ProductDetail .RightColumn {
      float: none;
      width: 100%;
   }

   #ProdImages {
      margin-top: 20px;
   }

   #ProductDetail .ProdTitle { font-size: 38px; }
   #ProductDetail label { margin-right: 0px; width: 15%; }
   #ProductDetail select,
   #ProductDetail input[type=number] { width: 85%; }
   #ProductDetail input[type=submit] { width: 100%; padding: 10px; }
}

@media (max-width: 460px) {
   #ProductDetail label { width: 20%; }
   #ProductDetail select,
   #ProductDetail input[type=number] { width: 80%; }
}

@media (max-width: 360px) {
   #ProductDetail label { display: block; }
   #ProductDetail select,
   #ProductDetail input[type=number] { width: 100%; max-width: 100%; }
}

/* Modal */
#StoreModalBg {
   position: fixed;
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
   z-index: 1100;
   background-color: black;
   opacity: 0.5;
   display: none;
}
#StoreModalContainer {
   position: fixed;
   top: 5%;
   right: 3%;
   bottom: 5%;
   left: 3%;
   background: white;
   z-index: 1101;
   opacity: 1;
   padding: 10px;
   border-radius: 5px;
   text-align: center;
   box-shadow: 0px 5px 10px #444444;
   padding: 10px 50px;
   display: none;
}
#StoreModalContainer > img {
   max-width: 100%;
   max-height: 100%;
}

#StoreModalClose {
   position: absolute;
   right: 20px;
   top: 10px;
   font-size: 40px;
   cursor: pointer;
}

#StoreModalPrev,
#StoreModalNext {
   position: absolute;
   top: calc(50% - .5em - 20px);
   padding: 20px;
   font-size: 40px;
   cursor: pointer;
}
#StoreModalPrev { left: 0px; }
#StoreModalNext { right: 0px; }
/*** /Product Detail ***/



/*** Checkout Basket ***/
#StoreCartTable td {
   padding: 10px 5px;
   font-size: 14px;
}
#StoreCartTable thead td {
   font-weight: bold;
   padding: 10px 5px;
   border-top: 1px solid #AAAAAA;
   border-bottom: 1px solid #AAAAAA;
}
#StoreCartTable tbody td {
   border-top: 1px solid #EEEEEE;
}
#StoreCartTable tbody tr:first-child td {
   border-top: 0px;
}
#StoreCartTable tbody b {
   line-height: 22px;
}
#StoreCartTable input[type=number] {
   font-size: 12px;
   width: 40px;
}

#StoreCartTotals {
   font-size: 14px;
   border-top: 1px solid #AAAAAA;
   padding: 10px 5px;
   text-align: right;
   line-height: 1.4em;
   font-weight: bold;
}
#StoreCartTotals b {
   display: inline-block;
   font-weight: bold;
   width: 80px;
}
#StoreCartTotals hr {
   margin: 10px 0px;
   padding: 0px;
   border: 0px;
   border-top: 1px solid #AAAAAA;
}

@media (max-width: 460px) {
   #StoreCartTable td:last-child { display: none; }
   #StoreCartTable td:nth-last-child(2) { text-align: right; }
}

/*** /Checkout Basket ***/



/*** Checkout Process ***/
#StoreRight {
   float: right;
   width: calc(100% - 520px);
}

#StoreCheckout {
   max-width: 500px;
   overflow:hidden;
}

.StoreCheckoutText {
   max-width: 500px;
}

#StoreCheckout .Row {
   clear: both;
   padding: 3px 0px;
}

#StoreCheckout label {
   font-family: Tahoma, Sans-Serif;
   font-size: 16px;
   display: inline-block;
   line-height: 1.5em;
   width: 165px;
}
#StoreCheckout label.Required:before {
   content: "*";
   font-weight: normal;
   color: red;
   position: absolute;
   margin-left: -10px;
}

#StoreCheckout input[type=text],
#StoreCheckout input[type=number],
#StoreCheckout input[type=email],
#StoreCheckout select,
#StoreCheckout .Inputs {
   width: calc(100% - 170px);
   float: right;
   height: 1.5em;
   margin: 0px;
   display: inline-block;
}

#StoreCheckout .FormContent {
   padding-left: 20px;
   margin-bottom: 20px;
}

/* Form container of multiple options */
.FormRadioOptionList {
   display: inline-block;
   width: calc(100% - 175px);
}
.FormRadioOptionList > div {
   display: inline-block;
   vertical-align: top;
   width: 100%;
}
.FormRadioOptionList label {
   width: auto !important;
   font-size: 14px !important;
}

#CustomFrame {
   width: 100%;
   border: 0px;
   overflow: hidden;
}

#iFormAnswer {
   width: 100px !important;
}

@media (max-width: 820px) {
   #StoreRight {
      float: none;
      max-width: 500px;
      width: auto;
      margin: 0px auto;
   }

   #StoreCheckout {
      float: none;
      margin: 0px auto;
   }

   .StoreCheckoutText {
      margin: 0px auto;
   }
}


@media (max-width: 460px) {
   #StoreCheckout .Row {
      padding-top: 10px;
   }
   
   #StoreCheckout label,
   #StoreCheckout input[type=text],
   #StoreCheckout input[type=number],
   #StoreCheckout input[type=email],
   #StoreCheckout select,
   #StoreCheckout .Inputs {
      width: 100%;
      float: none;
      margin: 0px;
   }
   #StoreCheckout label.Required:before {
      position: static;
      margin-left: 0px;
   }

   #StoreCheckout .FormContent {
      padding-left: 0px;
   }

   .FormRadioOptionList {
      width: 100%;
      margin-bottom: .667em;
   }
}
/*** /Checkout Process ***/