/* ProductCart Shopping Cart Software, Copyright Early Impact LLC 2006, All Rights Reserved Use this stylesheet to change the look of the default header and footer that ship with ProductCart. If styles modified using this page do not appear in your storefront, please check the following two items before anything else: (1) Make sure that header.asp links to this stylesheet. The code goes before the closing tag: (2) Make sure that header.asp contains the following code at the very top of the page, before anything else. (3) The styles included under "MAIN Styles" are the ones that used to be controlled by the Display Settings area of the ProductCart Control Panel in previous versions of the software. Unless you want to, you DO NOT need to change any of the other styles. */ /*----------------------------------------------------------------------------------------- MAIN Styles - They apply to the entire storefront, unless otherwise defined below ----------------------------------------------------------------------------------------*/ /* pcMain is the container for all information displayed by ProductCart on the page This is where you can change the font used storewide, for example. */ #pcMain { font-family: CiscoSans, "Trebuchet MS", Verdana, Arial, sans-serif; font-size: 16px; color: #333333; text-align: left; background-color: #FFFFFF; width: 100%; } #pcMain.CustOrdInvoice { font-size:13px; padding-bottom:0; } /* The following two statements assign a style to links storewide. They are sometimes overwritten by other styles that target specific links. */ #pcMain a:link { color: #0066FF; } #pcMain a:visited { color: #0066FF; } #pcMain a:hover { color: #0000FF; text-decoration: none; } /*----------------------------------------------------------------------------------------- Storefront Tables - Styles within the table are defined later ----------------------------------------------------------------------------------------*/ /* pcMainTable is the container for all information displayed on the by ProductCart on the page */ .pcMainTable { width: 100%; overflow: hidden; border: 0; border-collapse: collapse; table-layout:fixed; /* padding-left: 0px; padding-right: 0px; */ } /* pcShowProducts is the table that organizes the display of products (e.g. in a category or when viewing best sellers or new arrivals. By default it's set to 100% width and to align in the center of the page. */ .pcShowProducts { text-align: center; margin-left: auto; margin-right: auto; width: 100%; border: 1px dotted #E1E1E1; margin-top: 10px; padding: 5px; table-layout: fixed; } .pcShowProducts td { padding: 3px; vertical-align: bottom; } /* pcShowContent is the table that organizes the display of information other than products. It does not have a dotted border around it. By default it's set to 100% width and to left of the page. */ .pcShowContent { text-align: left; margin-left: 0; width: 100%; border: 0; border-collapse: collapse; margin-top: 5px; padding: 5px; /*table-layout:fixed;*/ } .pcShowContent td { padding: 3px; vertical-align: top; } /* pcShowCart is the table that organizes the display of information on the shopping cart page */ .pcShowCart { text-align: left; margin-left: 0; width: 100%; border: 0; border-collapse: collapse; } .pcShowCart td { padding: 1px; vertical-align: top; } .pcShowCartPrices { text-align: right; padding-left: 3px; } /* pcShowList is used when showing a list of items such as quantity discounts */ .pcShowList { text-align: left; width: 80%; border: 1px solid #e1e1e1; border-collapse: collapse; } /* Styles within MAIN TABLE */ /* Style the page title */ .pcMainTable h1 { background-image:url(images/pcv4_h1_back_white.jpg); background-repeat:repeat-x; border-bottom: 1px solid #CCC; font-size: 24px; font-weight: bold; margin: 0 0 5px 0; padding: 0 5px 0 5px; text-align: left; } /* Style the table title (e.g. table showing quantity discounts) */ .pcMainTable h2, h2 { background-color: #F5F5F5; font-size: 15px; margin: 0 0 5px 0; padding: 5px; } .pcMainTable h3 { font-size: 12px; margin-top: 10px; margin: 5px 0 5px 0; padding: 5px; } /* Style the table headings */ .pcMainTable th { background-color: #FFFFCC; font-size: 12px; font-weight: bold; padding: 4px; border-bottom: 1px solid #E1E1E1; text-align: left; } /* Remove the default marging from paragraphs */ .pcMainTable p { /* margin: 0 0 0 5px; */ } /* Style within SHOW PRODUCTS table */ /* Add background color on mouse over when browsing */ .pcShowProductBgHover { background-color: #F7F7F7; } /* Remove it on mouse out */ .pcShowProductBg { background: none; border: solid 1px #cccccc; } .pcShowProductBg:hover { background-color: #F7F7F7; border: solid 1px #cccccc; } /* Style the product name */ .pcShowProductName { font-size: 14px; color: #CC6600; } /* Style the product sku */ #pcMain .pcShowProductSku { font-weight: bold; color: #666666; } /* PRV41 Start */ /* Style the product rating */ #pcMain .pcShowProductRating { color: #666666; } /* PRV41 End */ /* Style the product weight */ #pcMain .pcShowProductWeight { color: #666666; } /* Style the product brand */ #pcMain .pcShowProductBrand { font-weight: bold; color: #666666; } /* Style the product stock */ #pcMain .pcShowProductStock { color: #666666; } /* Style the Product BTO Default Config */ #pcMain .pcShowProductBTOConfig { color:#666666; } /* Style the Product Custom Search */ #pcMain .pcShowProductCustSearch { color:#666666; } #pcMain .pcShowProductCustSearch a { text-decoration: none; } /* Grey box container for all custom search fields, left aligned, with squared corners */ .pcCustomSearchBox { background-color: #f5f5f5; /* Matches the Bootstrap well background */ border: none; /* Removes the border */ padding: 5px 10px; margin: 5px 0; font-size: 14px; color: #666666; border-radius: 0; /* Squared corners */ text-align: left; /* Left-aligned text */ font-weight: bold; /* Make the font bold */ } /* Style the Product Free Shipping Text */ #pcMain .pcShowProductShipping { color:#666666; } /* Change font color for "Show Product's Price" feature */ #pcMain .pcShowProductPrice { color:#000000; font-size: 16px; font-weight: bold; text-decoration: none; } /* salvisone custom style for Listprice displayed as MSRP */ #pcMain .pcShowProductMSRPPrice { color:#424242; font-size: 12px; font-style: italic; font-weight: normal; } /* salvisone custom style for Listprice displayed as MSRP */ #pcMain .pcShowProductMSRPPriceCat { color:#424242; font-size: 12px; font-style: italic; font-weight: normal; } /* Increase size of online price on Product Details page */ #pcMain .pcShowProductMainPrice { font-size: 20px; } /* Increase size of Customer price on Product Details page */ #pcMain .pcShowProductPriceW { font-size: 20px; font-weight: bold; color:#1C1C1C; } /* Increase size of Customer price on Categories page */ #pcMain .pcShowProductPriceWCat { font-size: 16px; font-weight: bold; color:#1C1C1C; } /* Strikethrough for List Price */ #pcMain .pcShowProductListPrice { /* text-decoration:line-through; */ } /* Change font color for "Show Savings" feature */ #pcMain .pcShowProductSavings { color: #090; font-weight: bold; } /* Style the short product description */ #pcMain .pcShowProductSDesc { color:#666666; padding-right: 30px; } /* Style the "Not for Sale" text */ #pcMain .pcShowProductNFS { width: 200px; background-color: #E9EEFE; border: 1px solid #CCC; background-image:url(images/pcv4_st_icon_info.png); background-repeat: no-repeat; background-position: 8px 8px; margin: 10px 0 15px 10px; padding: 8px 10px 8px 30px; color: #000000; font-size: 12px; text-align: left; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* Style the paragraph that includes the "More Details" button */ .pcShowProductLink { padding-top: 3px; } /* Style the paragraph that includes the "Sort by" drop-down */ .pcSortProducts { text-align: right; } /* pcShowProductsH handles the table that shows product info when products are displayed horizontally */ .pcShowProductsH { /* width: 150px; */ width: 300px; /* height: 350px; */ text-align: center; margin-left: auto; margin-right: auto; margin-top:10px; padding-top:5px; padding-bottom:5px; } .pcShowProductImageH { /* height: 125px; */ vertical-align: bottom; text-align: center; padding-bottom: 3px; } #pcMain .pcShowProductImageH img { border: 0px solid #E1E1E1; padding: 5px; /* width: 100px; */ width: 300px; } #pcMain .pcShowCategoryImage img { width: 100%; height: auto; padding: 5px; border: 0; box-sizing: border-box; } #pcMain .pcShowProductInfoH { /* height: 100px; */ margin-top: 5px; vertical-align: top; } .pcShowProductInfoH p { text-align: center; } /* pcShowProductsHCS handles the table that shows product info when cross selling products are shown with images */ .pcShowProductsHCS { width: 125px; height: 225px; text-align: center; margin-left: auto; margin-right: auto; } /* pcShowProductsP handles the table that shows product info when products are displayed vertically */ .pcShowProductsP { margin: 5px; padding: 5px; width: 100%; } .pcShowProductImageP { width: 125px; text-align: center; } #pcMain .pcShowProductImageP img { border: 0px solid #E5E5E5; padding: 5px; } .pcShowProductInfoP { text-align: left; width: 95%; padding-left: 10px; } /* pcShowProductsL handles the table that shows product info when products are displayed in a list */ .pcShowProductsL { width: 100%; text-align: left; } .pcShowProductsLheader { text-align: left; background-color:#F7F7F7; } .pcShowProductsLCell { vertical-align: top; text-align: left; } .pcShowProductImageL { height: 25px; width: 25px; text-align: left; padding: 5px 5px 0 5px; } /* Add background color on mouse over */ .pcShowProductsLhover { background-color: #F0F7FE; width: 100%; text-align: left; } /* pcShowProductsM handles the table that shows product info when products are displayed in a list with the quantity field */ .pcShowProductsMheader { text-align: left; background-color:#F7F7F7; } .pcShowProductsM { width: 100%; text-align: left; vertical-align: top; } .pcShowProductImageM { height: 25px; width: 25px; text-align: left; padding: 0 5px 0 5px; } /* Add background color on mouse over */ .pcShowProductsMhover { background-color: #F0F7FE; width: 100%; text-align: left; vertical-align: top; } /* style a dotted text box for popular similar items salvisone dwg */ .dwgpcpopularsimilaritemsbox { width: 450px; height: 50px; border-color: CornflowerBlue; border-width: 2px; border-style: dotted; } /* salvisone dwg style the custpref.asp account menu */ .accountmenu { table-layout: fixed; width: 100%; white-space: wrap; } .accountmenu td { white-space: wrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; } /* Column widths are based on these cells */ .row-ID { width: 25%; } .row-name { width: 25%; } .row-job { width: 25%; } .row-email { width: 25%; } /*----------------------------------------------------------------------------------------- ProductCart Build To Order ----------------------------------------------------------------------------------------*/ /* Style the product configuration pages */ .pcBTOmainTable { width: 100%; background-color: #FFFFFF; border: 0; border-collapse: collapse; } .pcBTOfirstRow { background-color: #F5F5F5; } .pcBTOsecondRow { background-color: #E1E1E1; } /* Style the pop-up window used by ProductCart Build To Order to show additional item information on the configuration pages */ .pcBTOpopup { width: 98%; background-color: #FFFFFF; border: 0; border-collapse: collapse; margin: 5px; font-size: 10px; } .pcBTOpopup img { margin: 5px; vertical-align: bottom; text-align: center; padding-bottom: 3px; } /* Style the detailed product configuration when shown on the shopping cart page order details page, etc. */ .pcShowBTOconfiguration { text-align: left; background-color:#F7F7F7; } .pcShowBTOconfiguration p { font-size: 10px; color:#666666; } /*----------------------------------------------------------------------------------------- Browse by Category or Brand ----------------------------------------------------------------------------------------*/ .pcShowCategory { text-align: center; margin-left: auto; margin-right: auto; table-layout: fixed; min-height: 350px; /* Adjust as needed */ width: 300px; /* Force the container width to 300px */ overflow: hidden; /* Prevent content from spilling out */ box-sizing: border-box; } } /* salvisone add table css */ .pcShowCategory table { table-layout: fixed; } .pcShowCategory td { vertical-align: top; } .pcShowCategoryP { width: 100%; text-align: left; } .pcShowCategoryImage { height: 125px; vertical-align: bottom; text-align: center; padding-bottom: 3px; } .pcShowCategoryImage img { border: 0px solid #E5E5E5; padding: 5px; } .pcShowCategoryInfo { /* margin-top: 5px; */ margin-top: 180px; vertical-align: top; /* max-width: 50%;*/ /* salvisone need to style this cell to be even on view H display commented out max-width tag*/ } .pcShowCategoryInfo p { text-align: center; /* salvisone added max width */ } .pcShowCategoryInfoP { width: 100%; margin-top: 5px; text-align: left; vertical-align: top; } /* Add background color on mouse over when browsing */ .pcShowCategoryBgHover { background-color: #F7F7F7; border:solid 1px #cccccc; } /* Remove it on mouse out */ .pcShowCategoryBg { background: none; border:solid 1px #cccccc; } /*----------------------------------------------------------------------------------------- Product details page ----------------------------------------------------------------------------------------*/ /* Visually separate prices from the rest of the information */ .pcShowPrices { margin-top: 10px; margin-bottom: 10px; font-weight: bold; } /*----------------------------------------------------------------------------------------- Page Navigation ----------------------------------------------------------------------------------------*/ /* pcPageNav handles the page navigation at the bottom of the page, when present. */ .pcPageNav { background-color: #f7f7f7 !important; color: #888888 !important; /* Soft grey text color */ text-align: left; width: 100%; margin: 0; padding: 15px 20px; /* 15px top & bottom, 20px left & right */ border: 0; border-collapse: collapse; margin: 10px 0 10px 5px; } .pcPageNav a { color: #888888 !important; /* Ensure links are also soft grey */ text-decoration: none; } .pcPageNav a:hover { color: #FFF !important; text-decoration: underline; background-color: #002664;; transition: background-color 0.3s ease, color 0.3s ease; } .pcPageName a:link, #pcCatNav a:visited { color: #888; } /*----------------------------------------------------------------------------------------- Forms ----------------------------------------------------------------------------------------*/ /* Clear the margins for all forms used by ProductCart */ #pcMain form { margin: 0; } /* Control margin and spacing on p tags used in forms */ #pcMain .pcForms td p { padding: 0; margin: 0; } .pcForms input { border: 1px solid #CCCCCC; background-color: #F7F7F7; font-size: 14px; /*11px*/ color:#666666; padding: 2px 3px 2px 3px; margin: 2px; } .pcForms input:focus { border: 1px solid #999999; background-color: #FFFFCC; } .pcForms textarea { border: 1px solid #CCCCCC; background-color: #F7F7F7; font-size: 11px; color:#666666; padding: 2px 3px 2px 3px; } .pcForms textarea:focus { border: 1px solid #999999; background-color: #FFFFCC; } /* Style drop-down menus */ .pcForms select { font-size: 10px; color: #333333; background-color: #F5F5F5; border: 1px solid #CCCCCC; } /* Style fieldsets */ .pcForms fieldset { border: 1px solid #CCCCCC; padding: 10px; } /* Style submit image button */ #submit { border: 0; background-color: transparent; padding: 0px; } /* Style submit image button */ #pcMain .submit { border: 0; background-color: transparent; padding: 0px; } /* Style submit button (when an image is NOT used) */ #pcMain .submit2 { border: 1px solid #CCCCCC; background-color: #FFFFCC; font-size: 14px; color:#666666; padding: 2px 3px 2px 3px; } /* Style the transparent fields used by ProductCart Build To Order and Apparel Add-on */ #pcMain .transparentField { border: 0; background-color: transparent; padding: 0; } /* Clear border on checkboxes to fix IE bug */ #pcMain .clearBorder { border: 0; background-color: transparent; } /*----------------------------------------------------------------------------------------- Search results page ----------------------------------------------------------------------------------------*/ /* NEW v4.5 - Category area of search results */ #pcCatScroll { width: 100%; position: relative; } #pcCatScrollArrows { position: absolute; left: 10px; top: 10px; } #pcpcCatScrollUp { margin-bottom: 5px; } #pcCatScrollItems { margin: 10px 10px 5px 30px; } /* End New v4.5 */ /* Style list of categories in the category search results */ .pcCatSearchResults ul { list-style-type: none; margin: 0 0 20px 15px; padding: 0; } .pcCatSearchResults ul li { margin: 2px 0 0 0; } /*----------------------------------------------------------------------------------------- Other styles ----------------------------------------------------------------------------------------*/ /* Remove the default border from images */ #pcMain img { max-width: 100%; height: auto; border: 0; } /* Style the page description at the top of the page, when available */ .pcPageDesc { margin-bottom: 5px; padding: 5px; /* border: 1px dashed #CCC; */ } /* NEW v4.5 - Correction of existing style */ /* Styles section titles on pages with different sections (e.g. search results) */ .pcSectionTitle, tr.pcSectionTitle td { background-color: #F7F7F7; text-align: left; padding: 5px; /* font-size: 13px; */ font-size: 20px; font-weight: bold; color: #666666; } /* Example of usage: preview search results text on advanced search page */ .pcTextMessage { color: #0066FF; font-weight: bold; } /* Example of usage: how to add products to your Gift Registry */ .pcInfoMessage { width: auto; min-width: 50%; background-color: #E9EEFE; border: 1px solid #CCC; background-image:url(images/pcv4_st_icon_info.png); background-repeat: no-repeat; background-position: 8px 8px; margin: 10px 0 15px 10px; padding: 8px 10px 8px 30px; color: #000000; font-size: 12px; text-align: left; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* Example of usage: successfully completed checkout step */ .pcSuccessMessage { width: auto; min-width: 50%; background-color: #F0F7FE; border: 1px solid #CCC; background-image:url(images/pcv4_st_icon_success_small.png); background-repeat: no-repeat; background-position: 8px 8px; margin: 10px 0 15px 10px; padding: 8px 10px 8px 30px; color: #000000; font-size: 12px; text-align: left; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* Styles alert and friendly error messages shown to the customer in the storefront */ .pcErrorMessage { width: auto; min-width: 50%; background-color: #FFC; border: 1px solid #F90; background-image:url(images/pcv4_st_icon_error_small.png); background-repeat: no-repeat; background-position: 8px 8px; margin: 10px 0 15px 10px; padding: 8px 10px 8px 30px; color: #000000; font-size: 12px; text-align: left; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* Example of usage: promotion details on shopping cart page (viewcart.asp) */ .pcPromoMessage { width: 80%; background-color: #E9EEFE; border: 1px solid #CCC; background-image:url(images/pc4_promo_icon.png); background-repeat: no-repeat; background-position: 4px 4px; margin: 10px 0 15px 10px; padding: 8px 10px 8px 30px; color: #000000; font-size: 12px; text-align: left; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* Styles small text shown in various pages (e.g. "(mm/yy)" on the credit card page */ .pcSmallText { font-size: 11px; color: #777777; } /* Styles small text shown in various pages (e.g. "(mm/yy)" on the credit card page */ .pcLargerText { font-size: 14px; font-weight: bold; } /* Sets the height of an empty table row */ .pcSpacer { height: 10px; } /* Horizontal line */ #pcMain hr { color: #e5e5e5; background: #e5e5e5; border: 0; height: 1px; } /* Add spacing to list items */ #pcMain li { padding-bottom: 3px; } /* NEW v4.5 - AddThis */ #pcMain .pcAddThisFloat { float: right; } #pcMain .pcAddThisFloat div { display: inline-block; margin-top: 2px; } #pcMain .pcAddThis { padding: 5px 0; } /* END NEW v4.5 - AddThis */ /* NEW v4.5 - Sales Manager */ #pcMain .pcSaleIcon img { vertical-align: bottom; padding-bottom: 2px; } #pcMain .pcSaleDesc { margin: 10px 0 15px 0; padding: 0 5px 10px 5px; } #pcMain .pcSaleDescTitle a { font-weight: bold; font-size: 12px; } #pcMain .pcSaleDescTitle img { margin-right: 5px; } #pcMain .pcSaleDescContent { margin-top: 3px; } /* END NEW v4.5 - Sales Manager */ /*----------------------------------------------------------------------------------------- ProductCart Product ViewPrd.asp Images ----------------------------------------------------------------------------------------*/ #pcMain .pcShowMainImage { width: auto; max-width: 600px; height: auto; max-height: 600px; text-align: center; vertical-align: bottom; margin-left: 5px; margin-right: 5px; margin-bottom: 5px; /* salvisone need to center the image */ } #pcMain .pcShowMainImage img { padding: 5px; border: 0px solid #cccccc; } #pcMain .pcShowAdditional { width: 240px; text-align: center; margin-left: auto; margin-right: auto; } #pcMain .pcShowAdditionalImage { vertical-align: top; text-align: center; padding: 0 0 0 0; } #pcMain .pcShowAdditional img { width: 50px; height: 50px; border: 1px solid #e1e1e1; margin-bottom: 6px; } /*----------------------------------------------------------------------------------------- ProductCart v2.7x styles ----------------------------------------------------------------------------------------*/ /* Printer-friendly version of order details page */ table.invoice { border-collapse:collapse; border: 1px solid #333333; } td.invoice { border: 1px solid #666666; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; vertical-align:top; text-align:left; } td.invoiceNob { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; vertical-align:top; text-align:left; } td.CustomizeOrdDet { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; vertical-align:top; text-align:left; } /*----------------------------------------------------------------------------------------- 'Stay on Page' when Adding to the Cart - Confirmation message window ----------------------------------------------------------------------------------------*/ #overlayX { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align:center; z-index: 1000; } .UpdateCartDivX { width:300px; margin: 100px auto; background-color: #fff; border:1px solid #000; padding:15px; text-align:center; } #overlay table {text-align: center; margin: 0 auto;/*this helps center the table within the div#overlay*/ } #overlay { visibility: hidden; position: absolute; background: url('images/shadowAlpha.png') no-repeat right bottom !important; /*for browsers that supports transparent .png files*/ background: url('images/shadow.gif') no-repeat right bottom; /*for older browsers that does NOT support transparent .png files*/ margin: 10px auto 10px auto !important;/*'auto' is used to center the div for Firefox*/ margin: 10px auto 10px auto; left: 400px;/*positioned from the left of parent div*/ top: 300px;/*postion from the top of parent div*/ width: 390px;/*adjust the width of the window*/ z-index: 1000; text-align:center; } .UpdateCartDiv { background: #F0F7FE; position:relative; bottom:6px;/*offsets the div to show the shadow background*/ right: 6px;/*offsets the div to show the shadow background*/ border: 1px solid #999999; padding:4px;/*adds padding all around so that it does not butt up against the div#overlay image*/ text-align:center; } /* END */ #pcMain.viewcategories .pcShowContent { border-top: 0px solid #ccc; border-right: 0px solid #ccc; } .pcShowCategoryBg.cath2, .pcShowCategoryBgHover.cath2 { border: 1px solid #ccc; /* border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; */ /* width: 25%; */ margin-top:10px; margin-bottom:10px; } #pcMain.viewcategories .pcShowContent.catlist { border-top: 1px solid #ccc; border-right: 1px solid #ccc; } #pcMain.viewcategories .pcShowContent.catlist .pcShowCategoryBg.cath2, .pcShowCategoryBgHover.cath2 { border: 1px solid #ccc; /* border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; */ /* width: 25%; */ margin-top:10px; } .pcShowCategoryBg.cath2 ul, .pcShowCategoryBgHover.cath2 ul { margin-left: 10px; padding: 0 5px 0 0; list-style-type:none; } .pcShowCategoryBg.cath2 ul li, .pcShowCategoryBgHover.cath2 ul li { line-height: 1.2; padding: 3px 0; } .pcShowCategoryBg.cath2 ul li a, .pcShowCategoryBgHover.cath2 ul li a { text-decoration:none; } #pcMain.viewcategories .pcShowCategoryBg.cath2 ul li a:hover, #pcMain.viewcategories .pcShowCategoryBgHover.cath2 ul li a:hover { text-decoration:underline; } #pcMain.viewcategories .pcShowCategoryInfo a:link, #pcMain.viewcategories .pcShowCategoryInfo a:visited { color: #222; font-size: 13px; text-decoration:none; } #pcMain.viewcategories .pcShowCategoryInfo a:hover { text-decoration:underline; } #pcMain.viewcategories .catwrap { height: 550px; position: relative; border: 0px solid #ccc; } #pcMain.viewcategories .catwrap a.clear { position: absolute; bottom: 00px; right: 10px; } .strikethru { text-decoration:line-through; } #pcMain.CustOrdInvoice { width: 800px; font-size: 13px; color: #000; } #pcMain.CustOrdInvoice .addressbox { color: #000; margin-bottom: 20px; } #pcMain.CustOrdInvoice .footermessage { color: #666666; width: 800px; font-style: italic; font-size: 11px; position: fixed; bottom: 0; } #pcMain.CustOrdInvoice h3 { padding-left: 0; font-size: 14px; color: #000; } #pcMain.CustOrdInvoice tr td { padding: 0 3px; } #pcMain.CustOrdInvoice tr.heading td { padding: 5px 3px 10px; } #pcMain.CustOrdInvoice tr.bgcolor-1 td { padding: 10px 3px; } #pcMain.CustOrdInvoice tr.bgcolor-t td { padding: 3px 3px; color: #333; } #pcMain.CustOrdInvoice tr.bgcolor-t td h3 { font-size: 15px; padding: 5px 0; color: #000; margin: 0; } #pcMain.CustOrdInvoice hr { background: none repeat scroll 0 0 #999; color: #999; margin: 0; } body { margin: 0; padding: 0; } .itemtitle { width: 160px; float: left; } #pcMain.CustOrdInvoice td.hr-padding { padding: 0; } #orddetailsbox { /*position: relative;*/ } #orddetailsbox br { display: none; } #orddetailsbox table { /*position: absolute;*/ top: 0; } #orddetailsbox table table { position: static; } #custordinvoicefooter { color: #666666 !important; } .cath1 { padding:5px; } .cartTableTitle { background-color: #FFFFCC; font-size: 14px; font-weight: bold; padding: 4px; border-bottom: 1px solid #E1E1E1; text-align: left; } .leftCell, .rightCell { border-left: 1px dashed #CCC; min-height:270px; margin-top:10px; } #BillingForm .row, #ShippingForm .row, #OtherArea .row, #loginform .row, #contact .row, #updFrom .row, #formOF .row, #ajaxSearch .row { margin-top:5px; } .peMainTable th,.peTableTitle { background-color: #FFFFCC; font-size: 12px; font-weight: bold; padding: 4px; border-bottom: 1px solid #E1E1E1; text-align: left; } .peMainTable td { border-bottom: 1px dashed #999; } .peTitle h1 { background-image:url(/ecommerce/pc/images/pcv4_h1_back_white.jpg); background-repeat:repeat-x; border-bottom: 1px solid #CCC; font-size: 18px; font-weight: bold; margin: 0 0 5px 0; padding: 0 5px 0 5px; text-align: left; } h1 { background-image: url(/ecommerce/pc/images/pcv4_h1_back_white.jpg); background-repeat: repeat-x; border-bottom: 1px solid #CCC; font-size: 24px; font-weight: bold; margin: 0 0 5px 0; padding: 0 5px 0 5px; text-align: left; } .peSubTitle { background-color: #FFFFCC; font-size: 12px; font-weight: bold; padding: 4px; border-bottom: 1px solid #E1E1E1; text-align: left; } .peCustMenuItem { min-height:225px; } .peRow10 { margin-top: 10px; } .pePrdsRow { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; } .peShowPrdBg { display: flex; height: 100%; } .peShowProductsH { display: flex; flex-direction: column; } .peShowProductInfoH { display: flex; flex-direction: column; height: 100%; } .peShowProductLink { display: flex; margin-top: auto !important; justify-content: center; /* flex-direction: column; */ /* height:100%; */ } .peFlex { display: flex; justify-content: flex-start; flex-direction: column; height:100%; } .pcShowCategoryBg:hover { background-color: #F7F7F7; } .pcShowCategoryBg { background: none; } .peShowCatInfo { width: 100%; padding: 10px; } .peCatShowAll { display: flex; justify-content: right; margin-top: auto; } .peCatColMargin { margin-top:10px; } @media screen and (max-width: 767px) { #mainimg { width:auto; max-width:100%; } } /* START - ProductCart Expert - www.productcartexpert.com - CSS Classes Standard */ /* CSS Width Classes */ .w100 { width:100%; } .w95 { width:95%; } .w90 { width:90%; } .w85 { width:85%; } .w80 { width:80%; } .w75 { width:75%; } .w70 { width:70%; } .w65 { width:65%; } .w60 { width:60%; } .w55 { width:55%; } .w50 { width:50%; } .w45 { width:45%; } .w40 { width:40%; } .w35 { width:35%; } .w33 { width:33.33%; } .w30 { width:30%; } .w25 { width:25%; } .w20 { width:20%; } .w15 { width:15%; } .w10 { width:10%; } .w5 { width:5%; } /*CSS Margin Classes */ .m200 { margin:200px; } .m150 { margin:150px; } .m100 { margin:100px; } .m95 { margin:95px; } .m90 { margin:90px; } .m85 { margin:85px; } .m80 { margin:80px; } .m75 { margin:75px; } .m70 { margin:70px; } .m65 { margin:65px; } .m60 { margin:60px; } .m55 { margin:55px; } .m50 { margin:50px; } .m45 { margin:45px; } .m40 { margin:40px; } .m35 { margin:35px; } .m30 { margin:30px; } .m25 { margin:25px; } .m20 { margin:20px; } .m15 { margin:15px; } .m10 { margin:10px; } .m5 { margin:5px; } .ml200 { margin-left:200px; } .ml150 { margin-left:150px; } .ml100 { margin-left:100px; } .ml95 { margin-left:95px; } .ml90 { margin-left:90px; } .ml85 { margin-left:85px; } .ml80 { margin-left:80px; } .ml75 { margin-left:75px; } .ml70 { margin-left:70px; } .ml65 { margin-left:65px; } .ml60 { margin-left:60px; } .ml55 { margin-left:55px; } .ml50 { margin-left:50px; } .ml45 { margin-left:45px; } .ml40 { margin-left:40px; } .ml35 { margin-left:35px; } .ml30 { margin-left:30px; } .ml25 { margin-left:25px; } .ml20 { margin-left:20px; } .ml15 { margin-left:15px; } .ml10 { margin-left:10px; } .ml5 { margin-left:5px; } .mr200 { margin-right:200px; } .mr150 { margin-right:150px; } .mr100 { margin-right:100px; } .mr95 { margin-right:95px; } .mr90 { margin-right:90px; } .mr85 { margin-right:85px; } .mr80 { margin-right:80px; } .mr75 { margin-right:75px; } .mr70 { margin-right:70px; } .mr65 { margin-right:65px; } .mr60 { margin-right:60px; } .mr55 { margin-right:55px; } .mr50 { margin-right:50px; } .mr45 { margin-right:45px; } .mr40 { margin-right:40px; } .mr35 { margin-right:35px; } .mr30 { margin-right:30px; } .mr25 { margin-right:25px; } .mr20 { margin-right:20px; } .mr15 { margin-right:15px; } .mr10 { margin-right:10px; } .mr5 { margin-right:5px; } .mt200 { margin-top:200px; } .mt150 { margin-top:150px; } .mt100 { margin-top:100px; } .mt95 { margin-top:95px; } .mt90 { margin-top:90px; } .mt85 { margin-top:85px; } .mt80 { margin-top:80px; } .mt75 { margin-top:75px; } .mt70 { margin-top:70px; } .mt65 { margin-top:65px; } .mt60 { margin-top:60px; } .mt55 { margin-top:55px; } .mt50 { margin-top:50px; } .mt45 { margin-top:45px; } .mt40 { margin-top:40px; } .mt35 { margin-top:35px; } .mt30 { margin-top:30px; } .mt25 { margin-top:25px; } .mt20 { margin-top:20px; } .mt15 { margin-top:15px; } .mt10 { margin-top:10px; } .mt5 { margin-top:5px; } .mb200 { margin-bottom:200px; } .mb150 { margin-bottom:150px; } .mb100 { margin-bottom:100px; } .mb95 { margin-bottom:95px; } .mb90 { margin-bottom:90px; } .mb85 { margin-bottom:85px; } .mb80 { margin-bottom:80px; } .mb75 { margin-bottom:75px; } .mb70 { margin-bottom:70px; } .mb65 { margin-bottom:65px; } .mb60 { margin-bottom:60px; } .mb55 { margin-bottom:55px; } .mb50 { margin-bottom:50px; } .mb45 { margin-bottom:45px; } .mb40 { margin-bottom:40px; } .mb35 { margin-bottom:35px; } .mb30 { margin-bottom:30px; } .mb25 { margin-bottom:25px; } .mb20 { margin-bottom:20px; } .mb15 { margin-bottom:15px; } .mb10 { margin-bottom:10px; } .mb5 { margin-bottom:5px; } /*CSS Padding Classes */ .p200 { padding:200px; } .p150 { padding:150px; } .p100 { padding:100px; } .p95 { padding:95px; } .p90 { padding:90px; } .p85 { padding:85px; } .p80 { padding:80px; } .p75 { padding:75px; } .p70 { padding:70px; } .p65 { padding:65px; } .p60 { padding:60px; } .p55 { padding:55px; } .p50 { padding:50px; } .p45 { padding:45px; } .p40 { padding:40px; } .p35 { padding:35px; } .p30 { padding:30px; } .p25 { padding:25px; } .p20 { padding:20px; } .p15 { padding:15px; } .p10 { padding:10px; } .p5 { padding:5px; } .pl200 { padding-left:200px; } .pl150 { padding-left:150px; } .pl100 { padding-left:100px; } .pl95 { padding-left:95px; } .pl90 { padding-left:90px; } .pl85 { padding-left:85px; } .pl80 { padding-left:80px; } .pl75 { padding-left:75px; } .pl70 { padding-left:70px; } .pl65 { padding-left:65px; } .pl60 { padding-left:60px; } .pl55 { padding-left:55px; } .pl50 { padding-left:50px; } .pl45 { padding-left:45px; } .pl40 { padding-left:40px; } .pl35 { padding-left:35px; } .pl30 { padding-left:30px; } .pl25 { padding-left:25px; } .pl20 { padding-left:20px; } .pl15 { padding-left:15px; } .pl10 { padding-left:10px; } .pl5 { padding-left:5px; } .pr200 { padding-right:200px; } .pr150 { padding-right:150px; } .pr100 { padding-right:100px; } .pr95 { padding-right:95px; } .pr90 { padding-right:90px; } .pr85 { padding-right:85px; } .pr80 { padding-right:80px; } .pr75 { padding-right:75px; } .pr70 { padding-right:70px; } .pr65 { padding-right:65px; } .pr60 { padding-right:60px; } .pr55 { padding-right:55px; } .pr50 { padding-right:50px; } .pr45 { padding-right:45px; } .pr40 { padding-right:40px; } .pr35 { padding-right:35px; } .pr30 { padding-right:30px; } .pr25 { padding-right:25px; } .pr20 { padding-right:20px; } .pr15 { padding-right:15px; } .pr10 { padding-right:10px; } .pr5 { padding-right:5px; } .pt200 { padding-top:200px; } .pt150 { padding-top:150px; } .pt100 { padding-top:100px; } .pt95 { padding-top:95px; } .pt90 { padding-top:90px; } .pt85 { padding-top:85px; } .pt80 { padding-top:80px; } .pt75 { padding-top:75px; } .pt70 { padding-top:70px; } .pt65 { padding-top:65px; } .pt60 { padding-top:60px; } .pt55 { padding-top:55px; } .pt50 { padding-top:50px; } .pt45 { padding-top:45px; } .pt40 { padding-top:40px; } .pt35 { padding-top:35px; } .pt30 { padding-top:30px; } .pt25 { padding-top:25px; } .pt20 { padding-top:20px; } .pt15 { padding-top:15px; } .pt10 { padding-top:10px; } .pt5 { padding-top:5px; } .pb200 { padding-bottom:200px; } .pb150 { padding-bottom:150px; } .pb100 { padding-bottom:100px; } .pb95 { padding-bottom:95px; } .pb90 { padding-bottom:90px; } .pb85 { padding-bottom:85px; } .pb80 { padding-bottom:80px; } .pb75 { padding-bottom:75px; } .pb70 { padding-bottom:70px; } .pb65 { padding-bottom:65px; } .pb60 { padding-bottom:60px; } .pb55 { padding-bottom:55px; } .pb50 { padding-bottom:50px; } .pb45 { padding-bottom:45px; } .pb40 { padding-bottom:40px; } .pb35 { padding-bottom:35px; } .pb30 { padding-bottom:30px; } .pb25 { padding-bottom:25px; } .pb20 { padding-bottom:20px; } .pb15 { padding-bottom:15px; } .pb10 { padding-bottom:10px; } .pb5 { padding-bottom:5px; } /* Text Align Classes */ .left { text-align:left; } .center { text-align:center; } .right { text-align:right; } .justify { text-align: justify; } /* Font Size Classes */ .f10 { font-size:10px; } .f11 { font-size:11px; } .f12 { font-size:12px; } .f13 { font-size:13px; } .f14 { font-size:14px; } .f15 { font-size:15px; } .f16 { font-size:16px; } .f18 { font-size:18px; } .f20 { font-size:20px; } .f22 { font-size:22px; } .f24 { font-size:24px; } .f26 { font-size:26px; } .f28 { font-size:28px; } .f30 { font-size:30px; } .f32 { font-size:32px; } .f36 { font-size:36px; } .f40 { font-size:40px; } .f44 { font-size:44px; } .f48 { font-size:48px; } /*Font Style Classes */ .bold { font-weight: bold; } .light-bold { font-weight:400; } .uline { text-decoration: underline; } .nline { text-decoration: none; } .italic { font-style:italic; } .ucase { text-transform: uppercase; } .lcase { text-transform: lowercase; } /* END - ProductCart Expert - www.productcartexpert.com - CSS Classes Standard */ #peContentPage img { width:auto; max-width:100%; } #peContentPage > .pePageBanner > img { -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;'; width: 100%; display: block; position: relative; height: 500px; } #peContentPage > .pePageBanner > img { height: 150px; } @media (min-width: 900px) { #peContentPage > .pePageBanner > img { height: 300px; } } #peContentPage { clear:both; width:100%; margin:0; padding:0; font-family: Helvetica, Arial, sans-serif; font-size:11px; } #peContentPage h1 { background-color: #f0f0f0 !important; background-image: none !important; border-bottom: none !important; width: 100%; display: flex; align-items: center; justify-content: center; font-family: Helvetica, Arial, sans-serif; font-size: 32px !important; font-weight: bold; margin: 0 0 10px 0; padding: 10px 15px; min-height: 40px; /* Remove the fixed height to allow flexibility */ text-transform: uppercase; box-shadow: none !important; position: relative; z-index: 10; /* raise above other elements */ } @media (max-width: 767px) { #peContentPage h1 { padding: 15px; margin-bottom: 20px; /* extra space to separate from breadcrumbs */ } } #peContentPage h1 span { flex: 1; /* allow the span to expand to fill the h1 */ padding: 0 15px; /* horizontal padding for the text */ text-align: center; /* center the text within the span */ background-color: inherit;/* ensure the span’s background is the same as the h1 */ } /* Inner span for horizontal padding */ #peContentPage h1 span { display: block; padding: 0 15px; /* adds horizontal padding for the text */ } #peContentPage h2 { background-color: #F5F5F5; font-family: Helvetica, Arial, sans-serif; font-size: 24px; padding: 15px; /* text-transform: uppercase; */ /* font-weight: bold; */ margin:0px; } #peContentPage h3 { font-family: Helvetica, Arial, sans-serif; font-size: 24px; padding: 15px 15px 5px 15px; font-weight: bold; margin: 0px 0px 10px 0px; border-bottom: 1px dashed #333; } #peContentPage h4 { font-family: Helvetica, Arial, sans-serif; font-size: 22px; padding: 15px 15px 5px 15px; font-weight: bold; margin: 0px 0px 5px 0px; border-bottom: 1px solid #666666; } #peContentPage h5 { width:100%; display:block; border:0; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-weight: bold; margin: 0; padding: 15px 15px; text-align: left; text-transform: uppercase; } #peContentPage h6 { width:100%; display:block; border:0; font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; margin: 0; padding: 15px 15px; text-align: left; text-transform: uppercase; } /* Style for
elements within #peContentPage */ #peContentPage div { padding: 5px 20px; margin: 0; } /* Updated style for

elements within #peContentPage */ #peContentPage p { padding: 5px 20px; margin: 0 20px 15px 20px; /* No top margin, but 15px bottom margin for spacing */ text-align: justify; font-family: Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.6; /* Added line-height for improved readability */ color: #333; /* Sets the paragraph text color to dark gray */ } /* Reduce the bottom margin of the UL header paragraph */ #peContentPage p.ul-header { margin-bottom: 0px; /* Adjust this value as needed */ padding: 5px 20px; /* Match the existing padding if desired */ text-align: justify; font-family: Helvetica, Arial, sans-serif; font-size: 18px; } /* Adjust the UL to bring it closer to the header */ #peContentPage ul { margin-top: 5px; /* Adjust the top margin to control spacing above the list */ margin-bottom: 15px; /* Spacing below the list */ padding-left: 40px; /* Adjust this value so that the text aligns as desired */ list-style-position: outside; /* Ensures that wrapped text lines up with the text above */ } /* Accent color for headings and links within #peContentPage */ #peContentPage h1, #peContentPage h2 { /* color: #005EB8; Replace with your chosen accent color */ color: #333 } #peContentPage a:hover { text-decoration: underline; } #peContentPage li { padding: 5px 10px; /* text-align: justify; */ font-family: Helvetica, Arial, sans-serif; font-size: 18px; } #peContentPage .pePageBanner { width: 100%; margin: 0; padding: 0; } #peContentPage .full-width-banner { /* salvisone Increase the width by twice the horizontal padding (20px + 20px = 40px) */ width: calc(100%); /* Shift the banner left to cancel the parent's left padding */ padding: 0; !important; margin: 0 !important; overflow: hidden; } /* salvisone Now style the banner image itself */ #peContentPage .banner-img { width: 100%; !important; /* Optionally, limit the maximum width (e.g., 3840px) if needed */ max-width: 3840px; display: block; margin: 0 auto; /* Center it if the container is wider than the image */ } @media screen and (max-width: 767px) { #peContentPage h1 { padding:0px 0px; } #peContentPage h2, #peContentPage h5, #peContentPage h6 { padding:10px; } #peContentPage div, #peContentPage p, #peContentPage li { padding:5px 10px; margin:0px; /* text-align: justify; */ font-family: Helvetica, Arial, sans-serif; font-size: 18px; } #peContentPage .pePageBanner { width: 100%; margin: 0; padding: 0; } #peContentPage h3 { padding: 10px 10px 5px 10px; margin: 0px 0px 5px 0px; } #peContentPage h4 { padding: 10px 10px 5px 10px; margin: 0px 0px 5px 0px; } } .peContactPO { color:#c90e0e; font-weight:600; } .peContactPO a,.peContactPO a:visited { color:#c90e0e; font-weight:600; } .NoPadding { padding-left: 0px; padding-right: 0px; } .pePrdCol { margin-top:10px; } .pcPageDesc { box-sizing: border-box; /* Include padding and border in the width */ max-width: 100%; /* Do not exceed the viewport width */ overflow-wrap: break-word; /* Break long words if necessary */ word-wrap: break-word; /* For older browsers */ overflow-x: hidden; /* Hide any accidental horizontal overflow */ } .jumbotron h1 { background: none !important; border: none !important; box-shadow: none !important; margin: 0 0 15px 0 !important; padding: 0 !important; color: #333 !important; /* or your preferred text color */ } /* If your jumbotron h1 has a inside, override that too */ .jumbotron h1 span { background: none !important; border: none !important; } .page-title-section { width: 100vw; margin-left: calc(-50vw + 50%); text-align: center; } .full-width-title { display: block; width: 100%; text-align: center; padding: 20px 0; } /* Ensure the page title spans edge-to-edge and uses the same styling as the About Us h1 */ .page-title-full { width: 100% !important; margin: 0 !important; padding: 0 !important; } .page-title-full h1, .page-title-full h1 span { width: 100% !important; margin: 0 !important; padding: 5px 15px !important; font-size: 32px !important; line-height: 1.5; /* Adjust as needed */ font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-transform: uppercase; text-align: center; display: block; } .product-divider { border: none; border-top: 1px solid #CCC; margin-top: 2px; margin-bottom: 20px; } /* Add padding above the category long description and align text to the left */ .category-long-description { padding-top: 5px; /* Adjust the value as needed */ text-align: left; } /* Container for all cross–sell items */ .pcCrossSellContainerH { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; /* align items by their top */ margin: 10px auto; max-width: 100%; box-sizing: border-box; } /* Container for all cross–sell items */ .pcCrossSellContainerH { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; /* align items by their top */ margin: 10px auto; max-width: 100%; box-sizing: border-box; } /* Each cross–sell item container */ .pcCrossSellItemH { flex: 0 0 300px; /* fixed width of 300px */ margin: 10px; text-align: center; box-sizing: border-box; display: flex; flex-direction: column; /* Base minimum height for items */ min-height: 520px; padding: 10px; } /* Container for the cross–sell image */ .pcCrossSellImageH { width: 100%; box-sizing: border-box; } /* The cross–sell image itself */ .pcCrossSellImageH img { /* width: 300px !important; */ /* force width to 300px */ max-width: 500px !important; height: auto; display: block; margin: 0 auto; } /* Container for all cross–sell items */ .pcCrossSellContainerH { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; /* align items by their top */ margin: 10px auto; max-width: 100%; box-sizing: border-box; } /* Container for cross–sell items */ .pcCrossSellContainerH { display: flex; flex-wrap: wrap; justify-content: center; margin: 10px auto; max-width: 100%; box-sizing: border-box; } /* Container for cross–sell items */ .pcCrossSellContainerH { display: flex; flex-wrap: wrap; justify-content: center; margin: 10px auto; box-sizing: border-box; width: 100%; } /* ============================================ Responsive Cross‐Sell Grid – Category H ============================================ */ /* ============================================ Cross–Sell Items – Category H (Mirroring Subcategories) ============================================ */ /* ============================================ Cross–Sell Items – Category H (Responsive Grid) ============================================ */ /* ============================================ Responsive Cross‐Sell Grid – Category H ============================================ */ /* ============================================ Cross-Sell Grid – Category H ============================================ */ /* ============================================ Cross‑Sell Grid – Category H ============================================ */ /* =========================================== Responsive Cross–Sell Grid – Category H =========================================== */ /* Container for all cross–sell items */ .pcCrossSellContainerH { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; /* Force all items to have equal height */ gap: 10px; /* Consistent spacing between items */ width: 100%; box-sizing: border-box; margin: 10px auto; } /* Each cross–sell item container */ .pcCrossSellItemH { flex: 1 1 300px; /* Base width of 300px, but allow shrink/grow */ max-width: 300px; display: flex; flex-direction: column; box-sizing: border-box; padding: 10px; background: #fff; /* Optional: add background color */ border: 1px solid #ccc; /* Optional: border for debugging or styling */ } /* Container for the product image */ .pcCrossSellImageH { width: 100%; max-width: 300px; box-sizing: border-box; overflow: hidden; } /* The product image itself */ .pcCrossSellImageH img { width: 100%; /* Scale image to container's width */ max-width: 300px; /* Never exceed 300px */ height: auto; display: block; margin: 0 auto; } /* Container for product info (name, pricing, etc.) */ .pcCrossSellInfoH { display: flex; flex-direction: column; justify-content: space-between; /* Push pricing to bottom if needed */ flex-grow: 1; padding-top: 10px; } /* Product name styling */ .pcCrossSellNameH { font-size: 16px; margin: 10px 0; text-align: center; /* Allow wrapping so long names don’t get ellipsized */ white-space: normal; overflow: visible; } /* Pricing label container */ .pcCrossSellShowProductPriceH { font-size: 18px; margin: 10px 0; text-align: center; white-space: normal; /* allow wrapping */ overflow: visible; } /* salvisone custom style for Listprice displayed as MSRP */ .pcCrossSellShowProductMSRPPriceH { color:#424242; font-size: 12px; font-style: italic; font-weight: normal; white-space: normal; /* allow wrapping */ margin: 1px 0; text-align: center; } /* (Optional) If you want the cross–sell info section always to fill available space */ .pcCrossSellItemH .pcCrossSellInfoH { flex: 1; } .pcCrossSellItemH:hover { background-color: #F7F7F7; /* or your desired hover background */ border-color: #cccccc; /* or another color if needed */ cursor: pointer; } /* =============================================== Updated Storefront Button Styles for ProductCart =============================================== */ /* Base Button Styles */ .btn-store { font-size: 16px; font-weight: bold; text-transform: uppercase; padding: 10px 20px; border-radius: 4px; transition: all 0.3s ease; display: inline-block; text-align: center; border: none; cursor: pointer; color: #fff; /* All buttons have white font */ } /* ----------------------------------------------- Primary Button - For critical actions (Add to Cart, Place Order, Register, etc.) Base: #007BFF; Hover: #0056b3 -------------------------------------------------- */ .btn-primary-store { background-color: #007BFF; /* Primary Blue */ border: 1px solid #0056b3; } .btn-primary-store:hover { background-color: #0056b3; border-color: #004494; } /* ----------------------------------------------- Secondary Button - For supportive actions (View Cart, Continue Shopping, Back, Previous, Update, etc.) Base: #00BFFF; Hover: #009ae6 -------------------------------------------------- */ .btn-secondary-store { background-color: #00BFFF; /* Secondary Light Blue */ border: 1px solid #009ae6; } .btn-secondary-store:hover { background-color: #009ae6; border-color: #0080c0; } /* ----------------------------------------------- Success Button - For positive actions (Checkout, Login) Base: #28a745; Hover: #218838 -------------------------------------------------- */ .btn-success-store { background-color: #28a745; /* Success Green */ border: 1px solid #218838; } .btn-success-store:hover { background-color: #218838; border-color: #1e7e34; } /* ----------------------------------------------- Danger Button - For destructive actions (Cancel, Remove, Delete Registry) Base: #dc3545; Hover: #c82333 -------------------------------------------------- */ .btn-danger-store { background-color: #dc3545; /* Danger Red */ border: 1px solid #c82333; } .btn-danger-store:hover { background-color: #c82333; border-color: #a71d2a; } /* ----------------------------------------------- Info Button - For communication actions (Tell-a-Friend, Wish List, Send Messages) Base: #17a2b8; Hover: #138496 -------------------------------------------------- */ .btn-info-store { background-color: #17a2b8; /* Info Blue */ border: 1px solid #138496; } .btn-info-store:hover { background-color: #138496; border-color: #117c81; } /* ----------------------------------------------- Warning (Accent) Button - For extra details (More Info, More, Details) (Since fd7e14 did not work, we use Coral instead.) Base: #FF7F50; Hover: #ff6347 -------------------------------------------------- */ .btn-warning-store { background-color: #FF7F50; /* Coral */ border: 1px solid #e6603b; } .btn-warning-store:hover { background-color: #ff6347; /* Tomato */ border-color: #e5533c; } /* ----------------------------------------------- Button Size Modifiers -------------------------------------------------- */ .btn-store-small { padding: 5px 10px; font-size: 14px; } .btn-store-large { padding: 15px 25px; font-size: 18px; } .btn-store-block { display: block; width: 100%; padding-left: 0; padding-right: 0; } /* ----------------------------------------------- Utility: Clearfix for Button Rows -------------------------------------------------- */ .btn-row { margin-bottom: 20px; clear: both; } .pcShowCategory { width: 100%; max-width: 300px; min-height: 350px; overflow: hidden; box-sizing: border-box; margin: 10px auto; } .pcShowCategoryInfo p a { display: block; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; } html, body { overflow-x: hidden; } /* End of Updated Button Styles */