/**
 * responsive_default.css
 *
 * @package templateSystem
 * @copyright Copyright 2003-2007 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * Added by rbarbour (ZCAdditions.com), Responsive DIY Template Default for 1.5.x (65)
 */

/* 
This is the default css file if a UA is not detected, for a better user experience, I have added a few common breakpoints. 
*/

@media (max-width:480px){
img.listingProductImage{width:50px;height:50px;}
div#navMainSearch, div#navMain, div#navMain ul {float:none;text-align:center;padding:0;margin:0;width:100%!important;}
#headerWrapper,div#logoWrapper {height:auto;}
div.centerBoxContentsProducts.centeredContent, div.centerBoxContentsNew.centeredContent, div.categoryListBoxContents.centeredContent, div.centerBoxContentsAlsoPurch.centeredContent, div.centerBoxContentsFeatured.centeredContent, div.centerBoxContentsSpecials.centeredContent, div.specialsListBoxContents, div.categoryListBoxContents {clear:both;width:100%!important;height:auto;}
div#logo IMG {clear:both;}
.centerColumn{padding:0 0.5em 2.0em 0.5em;}
table#cartContentsDisplay {font-size:8px;}
table#cartContentsDisplay IMG,  table#cartContentsDisplay input[type="image"] {width:12px;height:12px;}
.cartProductDisplay {text-align:left;padding:5px;}
.cartQuantity INPUT {width:75%!important;}
td.productListing-data INPUT {width:20%!important;}
div#checkoutShipto IMG,div#checkoutBillto IMG {width:12px;height:12px;}
div#checkoutBillto, div#checkoutShipto,div.floatingBox{font-size:10px;}
.leftBoxContainer, .rightBoxContainer {margin:0.5em;}
input[type="text"],input[type="password"],select {width:95%;}
div#advSearchDefault.centerColumn fieldset {clear:both;float:none;width:95%;}
.cartProductDisplay IMG,span#cartImage.back {display: none;visibility: hidden;}
.cartProductDisplay {text-align:left;padding:5px;}
.cartProductDisplay ul,span#cartProdTitle {text-align:left;padding:0px;margin:0;} 
div#checkoutBillto.back, div#checkoutShipto.forward,div#accountLinksWrapper {clear:both;float:none;width:95%;}
th#thcol1,th#thcol3,td#tdcol1,td#tdcol3,.minWidthHide {display:none;visibility:hidden;}
.minWidthShow {display:block;visibility:visible;}
}

@media (max-width:767px){
.onerow-fluid{width:100%;} 
.onerow-fluid>[class*="col"]{float:none;display:block;width:auto;margin:0;}
img.listingProductImage{width:50px;height:50px;}
div#navMainSearch, div#navMain, div#navMain ul {float:none;text-align:center;padding:0;margin:0;width:100%!important;}
#headerWrapper,div#logoWrapper {height:auto;}
div.centerBoxContentsProducts.centeredContent, div.centerBoxContentsNew.centeredContent, div.categoryListBoxContents.centeredContent, div.centerBoxContentsAlsoPurch.centeredContent, div.centerBoxContentsFeatured.centeredContent, div.centerBoxContentsSpecials.centeredContent, div.specialsListBoxContents, div.categoryListBoxContents {clear:both;width:100%!important;height:auto;}
div#logo IMG {clear:both;}
.centerColumn{padding:0 0.5em 2.0em 0.5em;}
table#cartContentsDisplay {font-size:8px;}
table#cartContentsDisplay IMG,  table#cartContentsDisplay input[type="image"] {width:12px;height:12px;}
.cartProductDisplay {text-align:left;padding:5px;}
.cartQuantity INPUT {width:75%!important;}
td.productListing-data INPUT {width:20%!important;}
div#checkoutShipto IMG,div#checkoutBillto IMG {width:12px;height:12px;}
div#checkoutBillto, div#checkoutShipto,div.floatingBox{font-size:10px;}
.leftBoxContainer, .rightBoxContainer {margin:0.5em;}
input[type="text"],input[type="password"],select {width:95%;}
div#advSearchDefault.centerColumn fieldset {clear:both;float:none;width:95%;}
.cartProductDisplay IMG,span#cartImage.back {display: none;visibility: hidden;}
.cartProductDisplay {text-align:left;padding:5px;}
.cartProductDisplay ul,span#cartProdTitle {text-align:left;padding:0px;margin:0;} 
div#checkoutBillto.back, div#checkoutShipto.forward,div#accountLinksWrapper {clear:both;float:none;width:95%;}
th#thcol1,th#thcol3,td#tdcol1,td#tdcol3,
.minWidthHide {display:none;visibility:hidden;}
.minWidthShow {display:block;visibility:visible;}
}

@media (min-width:768px) and (max-width:979px){}

@media (max-width:979px){}

@media (min-width:980px){}

@media (max-width:1200px){

/* The responsive code automatically adjusts the width to 100% on a desktop screen */
/* Changing the % (100%) to a px (980px) will keep .onerow-fluid from expanding past (980px) */
/* The below (margin:auto;) centers .onerow-fluid if changed to a (px) value */

/* .onerow-fluid{width:100%;*zoom:1;margin:auto;} */

/* The below code will also keep your header and footer from expanding past (980px) */
/* div#headerWrapper,div#navSuppWrapper{width:980px;margin:auto;} */
}