/* These are the css classes for the responsive css layouts used from Version 6.2. To use this file, upload to your store root and add a line like this to the section or copy and paste the classes into your existing css file. You will also need the following in vsadmin/includes.asp usecsslayout=TRUE or in vsadmin/includes.php $usecsslayout=TRUE; A help page is available here http://www.ecommercetemplates.com/help/css-layouts.asp This is just a sample file and can be edited to match your current design and layout. This file use percentage widths. Please read the style notes in the accompanying pdf file for important layout details. -------------------------------------*/ /* remove quantity box from cart - also in incluses.php xxQuanty="Quant." change that to xxQuanty="" */ input.cartquant {display:none} /* ~~ The first section correponds to the maximum width version of 980 pixels ~~ */ /* ~~Styling for the store generated links~~ */ a.ectlink:link { color: #516D20; text-decoration: none; } a.ectlink:visited { color: #516D20; text-decoration: none; } a.ectlink:hover, a.ectlink:active, a.ectlink:focus { text-decoration: underline; } /* ~~ Horizontal rule ~~*/ hr { height: 0; border-width: 1px 0 0 0; border-style: solid; border-color: #DA6B1D; } /* ~~ Table backgrounds for cart, search etc ~~*/ table.cobtbl{ background-color: #fff; width:94%; margin-left:8px; } td.cobhl{ background-color:#fff; font-weight: normal; color:#333; font-size:0.9em; } td.cobhdr{ background-color: #516D20; color:#fff; } td.cobll{ background-color: #fff; color : #333; font-weight:normal; font-size:0.9em; } div.tofreeshipping{ color:#396A3B !important; } td.cobll input, textarea, select{ border: 1px solid #999; border-radius:2px; padding:4px; } .cartdiscounts, .cartdiscountsamnt{ color:#396A3B !important; } td.cobll input[type="image"]{ border:none; } td.cobll input[type="radio"]{ border:none; } span.cartoption{ font-size:0.8em !important; color:#333; } div.giftwrap a{ color:#666; font-size:0.8em; text-decoration:none; } div.logintoaccount{ text-align:left !important; } span.willpickup{ font-size:1.1em !important; } /*Thanks page*/ td.receiptoption{font-size:0.9em;} td.receipthl{font-size:1em;} td.receiptoption strong{font-weight:500;} td.receiptheading{background:#F6F6F6;font-size:0.9em;color: #333;font-weight:normal !important;border-bottom: 1px solid #99CC46;border-top: 1px solid #99CC46;} td.receiptheading strong{font-weight:500;} hr.receipthr{display:none;} /* ~~ Store buttons ~~*/ input.login, input.sccheckout, input.logintoaccount, input.search { font-family: Arial, Helvetica, sans-serif; font-size: 1em; color: #fff; background: #516D20; border: 1px solid #999; border-radius: 4px; cursor: pointer; } input.login:hover, input.sccheckout:hover, input.logintoaccount:hover, input.search:hover{ background:#fff; color:#666; } /* The product page - view all the available classes at http://www.ecommercetemplates.com/help/css-layouts.asp -------------------------------------*/ div.prodfilter{ float:left; background-color:#F9F9F4; border: 1px dotted #D7D1C9; padding:6px; color: #42619a; margin-bottom:10px; margin-top:10px; } div.prodfilterbar{ float:left; width:100%; } div.filtertext{ padding:8px; } select.prodfilter{ padding:0px; margin:0px; } div.product{ padding:6px; width:31%; float:left; height:180px; margin:2px; } div.prodnavigation{ padding:10px 0px 10px 12px; float:left; width:97%; font-size:0.9em; background-color:#D3EDA4; border-bottom: 1px solid #64842F; } div.prodimage{ padding: 6px; text-align:center; border:1px solid #ccc; background-color:#fefefe; } div.prodimage:hover{ background-color:#fff; border: 1px solid #516D20; box-shadow: 5px 5px 2px #ccc; } div.prodname{ padding-top:6px; font-size: 1em; } div.prodprice{ font-size: 1em; float:left; width:98%; color:#666; margin-top:-12px; } div.prodcurrency{ float:left; width:100%; font-size: 0.7em; color:#666; } div.pagenums{ text-align:center; float:left; padding:20px 0px 20px 0px; } /* The product detail page -------------------------------------*/ div.detailprodnavigation{ width:99%; margin-bottom:12px; } div.detailimage{ width:190px; padding:10px; float:left; } div.detailid { color:#666; width:69%; font-size: 0.9em; float:left; } div.detailname { font-size: 1.2em; float:right; width:72%; margin-top:10px; margin-bottom:12px; border-bottom: 1px solid #ccc; } span.detaildiscountsapply{ margin-left:36px; color:#396A3B; font-size:0.8em; } div.detaildiscounts{ width:72%; color:#396A3B; float:left; font-size:0.8em; } div.detailmanufacturer{ float:left; width:68%; margin:0px; padding:0px; color:#666; font-size:0.9em; } div.detailsku{ float:left; width:68%; margin:10px; color:#666; } div.detailinstock{ float:right; width:73%; } div.detaildescription{ font-size: 0.9em; margin:5px 0px; padding-top:4px; line-height:1.8em; float:right; width:72%; } div.detailprice{ font-size: 1.2em; font-weight:bold; float:left; width:96%; color:#333; margin-left:10px; } div.detaillistprice{ font-size: 1em; font-weight:normal; float:left; width:96%; padding:6px 0px; color:#DA6A1E; margin-left:10px; } div.detailcurrency{ padding-top: 6px; font-size: 0.7em; float:left; width:96%; color:#666; margin-left:10px; border-bottom: 1px solid #ccc; padding-bottom:20px; } div.detailoption{ width:100%; } div.detailoptions{ padding: 6px; float:left; width:81%; margin-left:0px; } select.detailprodoption{ font-size: 0.9em; width:50%; margin:7px; border:1px solid #ccc; padding:2px; } input.detailprodoption{ font-size: 0.9em; margin:7px; border:1px solid #ccc; padding:2px; } div.detailoptiontext{ padding: 6px; width:32%; float:left; clear:both; } div.detailmultioptiontext{ padding: 6px; width:30%; clear:right; } div.previousnext{ padding-top:20px; padding-bottom:6px; float:right; width:100%; text-align:center; font-size:0.9em; border-top:1px solid #ccc; } div.emailfriend{ padding-top: 10px; text-align:center; float:right; width:100%; } td.emfhl{ background-color:#aaa; font-size:1.2em; color:#fff; font-weight:bold; } td.emfll{ line-height:18px; } div.detailquantity{ float:left; width:170px; } div.detailquantitytext{ margin-top:18px; float:left; width:45%; text-align:right; } div.detailquantityinput{ margin-top:16px; float:right; width:45%; text-align:left; padding:0px; height:65px; } #w0quant{ height:21px; width:50px; border:1px solid #ccc; } div.detailaddtocart,.detailoutofstock{ float:left; margin-top:10px; } div.detailnotifystock{ text-align:center; padding-top:6px; float:left; width:98%; } div.review{ float:left; margin-top:16px; width:90%; font-size:0.9em; } hr.review{ height: 0; border-width: 1px 0 0 0; border-style: solid; border-color: #bbb; padding:4px; margin-top:6px; } div.reviewprod{ background-color:#eee; padding:10px; } /* The category page -------------------------------------*/ div.category{ width:43%; float:left; line-height:1.6; font-size:0.9em; padding:10px; border:1px solid #ccc; background-color:#fefefe; margin:0px 0px 16px 16px; height:110px; } div.category:hover{ background-color:#fff; border: 1px solid #64842F; box-shadow: 5px 5px 2px #ccc; } div.catnavigation{ padding:10px 0px 10px 12px; float:left; width:97%; font-size:1em; background-color:#D3EDA4; border-bottom: 1px solid #64842F; margin-bottom:10px; } .catnavwrapper{ background:#fff !important; border: 1px solid #fff !important; } div.navdesc{ display:none; /* Removes the text "View all products in all categories */ } div.catimage{ width:97px; float:left; } div.catdesc{ padding:0px 0px 4px 4px; } div.catname{ padding-left:4px; font-size:1.2em; } .catdiscounts, .allcatdiscounts{ padding-left:10px; font-weight:normal; color:#DA6B1D; font-size:0.9em; } div.categorymessage{ padding-top:0px; font-size: 1.3em; } p.noproducts{ padding-top:28px; text-align:left !important; } /* This is the first breakpoint and is for screen sizes between 772 and 980 pixels. If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below -------------------------------------*/ @media screen and (max-width: 980px) { /* The products page -------------------------------------*/ div.product{ width:46% } /* The product detail page -------------------------------------*/ div.detailid { float:right; width:58%; } div.detailmanufacturer { float:right; width:58%; } div.detailname { float:right; width:58%; } .detaildiscountsapply{ display:none; /*Removes Discounts Apply text*/ } div.detaildiscounts{ float:right; width:58%; } div.detaildescription{ float:left; width:96%; margin:0px 0px 10px 10px; } } /* This is the second breakpoint and is for screen sizes between 468 and 758 pixels. If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below */ @media screen and (max-width:700px) { /*tables for cart and search*/ table.cobtbl{ font-size: 0.8em; margin-left:8px; margin-bottom:12px; } /*the product page*/ div.prodfilter{ display:none; } div.prodfilterbar{ display:none; } /* The product detail page -------------------------------------*/ div.detailprodnavigation{ width:96%; } div.detailid { float:left; width:96%; margin-left:10px; } div.detailmanufacturer { float:left; width:96%; margin-left:10px; } div.detailname { float:left; width:96%; margin-left:10px; } div.detaildiscounts{ float:left; width:96%; margin-left:10px; } /* The category page -------------------------------------*/ div.category{ width:90%; } } /* This is the third breakpoint and is for smartphones. If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below */ @media screen and (max-width:480px) { /* ~~ Remove left hand cart column ~~*/ .cobcol1{ display:none; } /* ~~ Modify additional info field on checkout ~~*/ textarea.addinfo{ width:150px; } /*the product page*/ div.product{ width:92%; margin-left:4px; } /*the detail page*/ div.detailoptions{ width:96%; } select.detailprodoption{ width:58%; } div.detailquantityinput{ height:30px; } div.detailmultioptiontext{ width:40%; } div.emailfriend{ display:none; /* ~~ Remove email a friend feature ~~*/ } }