/* 
    Document   : no-more-tables
    Created on : 28/02/2012, 11:01:54 AM
    Author     : Simon Elvery
    Description:
        Demonstration of the responsive tables method described at by Chris Coyier
    at http://css-tricks.com/responsive-data-tables/
*/

/*@media only screen and (max-width: 1150px) {*/
@media only screen and (max-width: 1150px) {
  .viewCatGrid td, .newProductsGrid td, .bestSellersGrid td, .specialsGrid td {
    width:20% !important;
  }
  .viewCatGrid td img, .newProductsGrid td img, .bestSellersGrid td img, .specialsGrid td img {
    width:100%;
  }
  .viewCatGrid td .buttonDisplay img, .newProductsGrid td .buttonDisplay img, .bestSellersGrid td .buttonDisplay img, .specialsGrid td .buttonDisplay img {
    width:auto;
  }
}

@media only screen and (max-width: 768px) {
  /* Force table to not be like tables anymore */
  table, 
  thead, 
  tbody, 
  th, 
  td, 
  tr { 
    display: block; 
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr { border: 1px solid #fff; }

  td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align:left;
  }

  td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
    text-align:left;
    font-weight: bold;
  }

  /*
  Label the data
  */
  td:before { content: attr(data-title); }

  /*
  Customize
  */
  .viewCatGrid td, .featuredProductsGrid td, .newProductsGrid td, .bestSellersGrid td, .specialsGrid td, .text2 td, .viewProdRelatedGrid td, .relatedProductsGrid td {
    width:100% !important;
    clear:left;
    float:left;
    display:block;
    padding:15px 0 0 0;
  }
  .text2 td, .text2 tr{border:none;}
  .viewCatGrid td .prodItemPic, .featuredProductsGrid td .prodItemPic, .newProductsGrid td .prodItemPic, .bestSellersGrid td .prodItemPic, .specialsGrid td .prodItemPic{
    /*width:30%;*/
      height:auto !important;
    /*float:left;
    display:inline;*/
    margin-right:20px;
    margin-bottom:20px;
  }
  .featuredProductsGrid td .prodItemPic img, .viewCatGrid td .prodItemPic img, .newProductsGrid td .prodItemPic img, .bestSellersGrid td .prodItemPic img, .specialsGrid td .prodItemPic img {
    
      width:273px;
      /*max-height:273px;*/
    margin-left:auto;
    margin-right:auto;
  }
   .viewCatGrid img[title='Add To Cart'], .featuredProductsGrid td .prodItemName, .featuredProductsGrid td .prodItemShortDesc, .featuredProductsGrid img[title='Add To Cart'], .newProductsGrid td .prodItemName, .newProductsGrid td .prodItemShortDesc, .newProductsGrid img[title='Add To Cart'], .bestSellersGrid td .prodItemName, .bestSellersGrid td .prodItemShortDesc, .bestSellersGrid img[title='Add To Cart'], .specialsGrid td .prodItemName, .specialsGrid td .prodItemShortDesc, .specialsGrid img[title='Add To Cart'] {
    /*margin-right:20px !important;
    text-align:left !important;*/
    /*text-align:left !important;*/
  }
  .featuredProductsGrid td .prodItemName, .featuredProductsGrid td .prodItemShortDesc, .featuredProductsGrid td .prodItemPrice, .featuredProductsGrid td .buttonDisplay, .viewCatGrid td .prodItemName, .viewCatGrid td .prodItemShortDesc, .viewCatGrid td .prodItemPrice, .viewCatGrid td .stockLabelDisplay, .viewCatGrid td .buttonDisplay, .viewCatGrid td .catName, .newProductsGrid td .prodItemName, .newProductsGrid td .prodItemShortDesc, .newProductsGrid td .prodItemPrice, .newProductsGrid td .buttonDisplay, .newProductsGrid td .stockLabelDisplay, .bestSellersGrid td .prodItemName, .bestSellersGrid td .prodItemShortDesc, .bestSellersGrid td .prodItemPrice, .bestSellersGrid td .stockLabelDisplay, .bestSellersGrid td .buttonDisplay, .specialsGrid td .prodItemName, .specialsGrid td .prodItemShortDesc, .specialsGrid td .prodItemPrice, .specialsGrid td .buttonDisplay, .specialsGrid .stockLabelDisplay {
      width:100%;
      /*max-width:273px;*/
      margin-left:auto;
      margin-right:auto;
      height:auto !important;
      padding-bottom:10px;
  }
  .featuredProductsGrid td .buttonDisplay, .viewCatGrid td .buttonDisplay, .newProductsGrid td .buttonDisplay, .bestSellersGrid td .buttonDisplay, .specialsGrid td .buttonDisplay, .viewProdRelatedGrid td .buttonDisplay, .relatedProductsGrid td .buttonDisplay {
  	width:100%;
 	text-align:right;
  	/*margin-top:-10px;*/
    margin-bottom:20px !important;
    right:-1px !important;
    bottom:15px !important;
  }
  .viewCatGrid td .catShortDesc {
    width:90%;
    margin:0 20px 20px 20px;
  }
  .viewCatGrid td .prodItemName {
    margin-top:20px;
  }
  .viewCatGrid .stockLabel {
    top:-245px;
    left:0;
  }
  .viewCartGridHeader {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .viewCartGrid div[align='right'], .orderSummaryGrid div[align='right'] {
    font-weight:700;
    color:#000;
    text-align:left;
  }
  .newProductsComponent, .bestSellersComponent, .specialsComponent {
    width:100%;
    clear:left;
    float:left;
    display:block;
    text-align:center;
    margin:0 !important;
  }
  .newProductsComponentGrid, .bestSellersComponentGrid, .specialsComponentGrid {
    text-align:center !important;
  }
  .newProductsComponentGrid tr, .bestSellersComponentGrid tr, .specialsComponentGrid tr {
    border:none !important;
  }
  .newProductsComponentGrid td, .bestSellersComponentGrid td, .specialsComponentGrid td {
    width:100%;
    float:left;
    display:inline;
    padding:0;
    text-align:center !important;
  }
  .newProductsComponentGrid div, .bestSellersComponentGrid div, .specialsComponentGrid div {
    width:100%;
    clear:left;
    float:left;
    display:block;
    text-align:center !important;
  }
  .newProductsComponentLinks a, .bestSellersComponentLinks a, .specialsComponentLinks a {
    clear:left;
    float:left;
    display:inline;
    margin:0 0 10px 0;
  }

  /* Shipping Grid */
  .shippingGridHeader {
    position:absolute;
    top: -9999px;
    left: -9999px;
  }
  .shippingGrid td { 
    width:100% !important;
    padding-left: 50% !important;
  }

  .shippingGrid td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
    text-align:left;
    font-weight: bold;
  }
  .shippingGrid td:nth-of-type(1):before { content: "Option"; }
  .shippingGrid td:nth-of-type(2):before { content: "Shipping Method"; }
  .shippingGrid td:nth-of-type(3):before { content: "Delivery Time"; }
  .shippingGrid td:nth-of-type(4):before { content: "Rate"; }
  .shippingGrid td input[type='radio'] {
    position:relative;
    z-index:1000;
  }

   /* View Cart Grid */
   .viewCartGrid td.quantity, .viewCartGrid td.unit-price, .viewCartGrid td.price{padding-left:30%;}
   .viewCartGrid td.quantity:before { content: "Quantity"; }
   .viewCartGrid td.unit-price:before { content: "Unit Price"; }
   .viewCartGrid td.price:before { content: "Price"; }

   /* Order Summary Grid */
   .orderSummaryGrid td.sku, .orderSummaryGrid td.productName, .orderSummaryGrid td.qty, .orderSummaryGrid td.unitPrice, .orderSummaryGrid td.price{padding-left:25%;}
   .orderSummaryGrid td.sku:before { content: "Item Code"; }
   .orderSummaryGrid td.productName:before { content: "Product"; }
   .orderSummaryGrid td.qty:before { content: "Quantity"; }
   .orderSummaryGrid td.unitPrice:before { content: "Unit Price"; }
   .orderSummaryGrid td.price:before { content: "Price"; }

   .orderSummaryGrid td.productName {
    font-weight:normal;
    height:auto;
    text-align:left;
    font-size:13px;
    color:#333;
    display:inline;
    width:45%;
    padding-left:25%;
  }
  .orderSummaryGrid td.price{padding-left:50% !important;}

  /* Multiple Products Grid */
  .multipleProductsGridHeader {
    position:absolute;
    top:-9999px;
    left:-9999px;
  }
  .multipleProductsGridHeader td {
    width:100% !important;
    padding-left:50% !important;
  }
  .multipleProductsGrid td {
    padding-left:38% !important;
  }
  .multipleProductsGrid td:before {
    position:absolute;
    top:6px;
    left:6px;
    width:45%;
    padding-right:10px;
    white-space:nowrap;
    text-align:left;
    font-weight:bold;
  }
  .multipleProductsGrid td:nth-of-type(1):before { content: "Part No"; }
  .multipleProductsGrid td:nth-of-type(2):before { content: "Product Name"; }
  .multipleProductsGrid td:nth-of-type(3):before { content: "Price"; }
  .multipleProductsGrid td:nth-of-type(4):before { content: "Details"; }
  .multipleProductsGrid td:nth-of-type(5):before { content: "Options"; }
  .multipleProductsGrid td:nth-of-type(6):before { content: "Qty"; }
  .multipleProductsGrid tr:first-child td:before, .multipleProductsGrid tr:last-child td:before {
    content: "";
  }
  .multipleProductsGrid tr:first-child td, .multipleProductsGrid tr:last-child td {
    padding-left:0 !important;
  }
  /* End of Multiple Products Grid */
}