/* 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: "Trebuchet MS", Verdana, Arial, sans-serif; font-size: 11px; color: #735848; text-align: left; background-color: #f3e8e1; width: 100%; border: thin solid #d5c1b5; } /* 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: #385100; } #pcMain a:visited { color: #5C8400; } #pcMain a:hover { color: #C75143; 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%; border: 0; border-collapse: collapse; } /* 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; } .pcShowProducts td { padding: 3px; } /* 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; } .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; } /* 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; } /* pcPageNav handles the page navigation at the bottom of the page, when present. */ .pcPageNav { text-align: left; width: 100%; border: 0; border-collapse: collapse; margin: 5px 0 0 0; } /* Styles within MAIN TABLE */ /* Style the page title */ .pcMainTable h1 { font-size: 18px; font-weight: bold; margin: 0 0 5px 0; padding: 5px; color: #FFFFFF; } /* Style the table title (e.g. table showing quantity discounts) */ .pcMainTable h2 { background-color: #385100; font-size: 16px; margin: 0 0 5px 0; padding: 5px; font-weight: bold; color: #FFFFFF; } .pcMainTable h3 { font-size: 12px; margin-top: 10px; margin: 5px 0 5px 0; padding: 5px; } /* Style the table headings */ .pcMainTable th { background-color: #FBF7F4; font-size: 12px; font-weight: bold; padding: 4px; border: 1px solid #d5c1b5; } /* Remove the default marging from paragraphs */ .pcMainTable p { margin: 0 0 0 5px; } /* Style within SHOW PRODUCTS table */ /* Style the product name */ .pcShowProductName { font-size: 12px; color: #CC6600; } /* Style the product sku */ #pcMain .pcShowProductSku { color: #666666; } /* Style the product weight */ #pcMain .pcShowProductWeight { color: #666666; } /* Style the product brand */ #pcMain .pcShowProductBrand { 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; } /* Style the Product Free Shipping Text */ #pcMain .pcShowProductShipping { color:#666666; } /* Change font color for "Show Product's Price" feature */ #pcMain .pcShowProductPrice { color:#000000; } /* Strikethrough for List Price */ #pcMain .pcShowProductListPrice { text-decoration:line-through; } /* Change font color for "Show Savings" feature */ #pcMain .pcShowProductSavings { color:#FF6600; } /* Style the short product description */ #pcMain .pcShowProductSDesc { color:#666666; padding-right: 30px; } /* Style the "Not for Sale" text */ #pcMain .pcShowProductNFS { color:#0066FF; font-weight:bold; margin: 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: 125px; height: 225px; text-align: center; margin-left: auto; margin-right: auto; } .pcShowProductImageH { height: 125px; vertical-align: bottom; text-align: center; padding-bottom: 3px; } #pcMain .pcShowProductImageH img { border: 1px solid #E1E1E1; padding: 5px; } .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 { height: 125px; width: 125px; text-align: center; } #pcMain .pcShowProductImageP img { border: 1px 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; } /* 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: 75px; width: 75px; text-align: left; padding: 0 5px 0 5px; } /*----------------------------------------------------------------------------------------- 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 { size: 10px; color:#666666; } /*----------------------------------------------------------------------------------------- Browse by Category or Brand ----------------------------------------------------------------------------------------*/ .pcShowCategory { text-align: center; margin-left: auto; margin-right: auto; } .pcShowCategory td { vertical-align: bottom; } .pcShowCategoryP { width: 100%; text-align: left; } .pcShowCategoryImage { height: 125px; vertical-align: bottom; text-align: center; padding-bottom: 3px; } .pcShowCategoryImage img { border: 1px solid #E5E5E5; padding: 5px; } .pcShowCategoryInfo { margin-top: 5px; vertical-align: top; } .pcShowCategoryInfo p { text-align: center; } .pcShowCategoryInfoP { width: 100%; margin-top: 5px; text-align: left; vertical-align: top; } /*----------------------------------------------------------------------------------------- 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 { text-align: left; margin: 10px 0 10px 5px; } .pcPageName a:link, #pcCatNav a:visited { color: #999999; } .pcPageNav a:hover { color: #000000; text-decoration: none; } /*----------------------------------------------------------------------------------------- Forms ----------------------------------------------------------------------------------------*/ /* Clear the margins for all forms used by ProductCart */ #pcMain form { margin: 0; } .pcForms input { border: 1px solid #CCCCCC; background-color: #F7F7F7; font-size: 11px; color:#666666; padding: 2px 3px 2px 3px; } .pcForms input:focus { border: 1px solid #999999; background-color: #FBF7F4; } .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: #FBF7F4; } /* Style drop-down menus */ .pcForms select { font-size: 10px; color: #333333; background-color: #F5F5F5; border: 1px solid #CCCCCC; } /* 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: #FBF7F4; font-size: 11px; 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 ----------------------------------------------------------------------------------------*/ /* 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 { border: 0; } /* Style the page description at the top of the page, when available */ .pcPageDesc { margin-bottom: 5px; padding: 5px; background-color: #FBF7F4; } /* Styles section titles on pages with different sections (e.g. search results) */ .pcSectionTitle { background-color: #EDDCD2; text-align: left; padding: 5px; font-size: 16px; font-weight: bold; color: #C54D3F; letter-spacing: -1px; } /* Example of usage: preview search results text on advanced search page */ .pcTextMessage { color: #A31706; font-weight: bold; } /* Styles alert and friendly error messages shown to the customer in the storefront */ .pcErrorMessage { width: 90%; background-color: #F4DAD7; border: 1px solid #F7240D; margin: 15px; padding: 4px; color: #A31706; font-size:12px; font-weight: bold; text-align: center; } /* Styles small text shown in various pages (e.g. "(mm/yy)" on the credit card page */ .pcSmallText { font-size: 10px; color:#999999; } /* Sets the height of an empty table row */ .pcSpacer { height: 10px; } /* Horizontal line */ #pcMain hr { color: #d5c1b5; background: #e5e5e5; border: 0; height: 1px; } /* Add spacing to list items */ #pcMain li { padding-bottom: 3px; } /*----------------------------------------------------------------------------------------- ProductCart Product ViewPrd.asp Images ----------------------------------------------------------------------------------------*/ #pcMain .pcShowMainImage { width: auto; height: auto; text-align: center; vertical-align: bottom; margin-left: 5px; margin-right: 5px; margin-bottom: 5px; } #pcMain .pcShowMainImage img { padding: 5px; border: 1px 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; border: 1px solid #cccccc; } /*----------------------------------------------------------------------------------------- ProductCart v2.7x styles ----------------------------------------------------------------------------------------*/ /* Printer-friendly version of order details page */ table.invoice { border-collapse:collapse; border: 1px solid #333333; } table.invoiceBto { border-collapse:collapse; border: 1px solid #999999; } 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; } .frontcontentwrapper { background-color: #FFFFFF; border: 1px solid #D0BAAC; } .HCIsearchFont { font-size: 12px; font-weight: 800; } .TabbedPanels { margin: 0px; padding: 0px; float: left; clear: none; width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/ } /* This is the selector for the TabGroup. The TabGroup container houses * all of the tab buttons for each tabbed panel in the widget. This container * does not contribute anything visually to the look of the widget for our * default style. * * The name of the class ("TabbedPanelsTabGroup") used in this selector is not * necessary to make the widget function. You can use any class name you * want to style the TabGroup container. */ .TabbedPanelsTabGroup { margin: 0px; padding: 0px; } /* This is the selector for the TabbedPanelsTab. This container houses * the title for the panel. This is also the tab "button" that the user clicks * on to activate the corresponding content panel so that it appears on top * of the other tabbed panels contained in the widget. * * For our default style, each tab is positioned relatively 1 pixel down from * where it wold normally render. This allows each tab to overlap the content * panel that renders below it. Each tab is rendered with a 1 pixel bottom * border that has a color that matches the top border of the current content * panel. This gives the appearance that the tab is being drawn behind the * content panel. * * The name of the class ("TabbedPanelsTab") used in this selector is not * necessary to make the widget function. You can use any class name you want * to style this tab container. */ .TabbedPanelsTab { position: relative; top: 1px; float: left; padding: 4px 10px; margin: 0px 1px 0px 0px; font: bold 0.7em sans-serif; background-color: #DDD; list-style: none; border-left: solid 1px #CCC; border-bottom: solid 1px #999; border-top: solid 1px #999; border-right: solid 1px #999; -moz-user-select: none; -khtml-user-select: none; cursor: pointer; } /* This selector is an example of how to change the appearnce of a tab button * container as the mouse enters it. The class "TabbedPanelsTabHover" is * programatically added and removed from the tab element as the mouse enters * and exits the container. */ .TabbedPanelsTabHover { background-color: #CCC; } /* This selector is an example of how to change the appearance of a tab button * container after the user has clicked on it to activate a content panel. * The class "TabbedPanelsTabSelected" is programatically added and removed * from the tab element as the user clicks on the tab button containers in * the widget. * * As mentioned above, for our default style, tab buttons are positioned * 1 pixel down from where it would normally render. When the tab button is * selected, we change its bottom border to match the background color of the * content panel so that it looks like the tab is part of the content panel. */ .TabbedPanelsTabSelected { background-color: #EEE; border-bottom: 1px solid #EEE; } /* This selector is an example of how to make a link inside of a tab button * look like normal text. Users may want to use links inside of a tab button * so that when it gets focus, the text *inside* the tab button gets a focus * ring around it, instead of the focus ring around the entire tab. */ .TabbedPanelsTab a { color: black; text-decoration: none; } /* This is the selector for the ContentGroup. The ContentGroup container houses * all of the content panels for each tabbed panel in the widget. For our * default style, this container provides the background color and borders that * surround the content. * * The name of the class ("TabbedPanelsContentGroup") used in this selector is * not necessary to make the widget function. You can use any class name you * want to style the ContentGroup container. */ .TabbedPanelsContentGroup { clear: both; border-left: solid 1px #CCC; border-bottom: solid 1px #CCC; border-top: solid 1px #999; border-right: solid 1px #999; background-color: #EEE; } /* This is the selector for the Content panel. The Content panel holds the * content for a single tabbed panel. For our default style, this container * provides some padding, so that the content is not pushed up against the * widget borders. * * The name of the class ("TabbedPanelsContent") used in this selector is * not necessary to make the widget function. You can use any class name you * want to style the Content container. */ .TabbedPanelsContent { padding: 4px; } /* This selector is an example of how to change the appearnce of the currently * active container panel. The class "TabbedPanelsContentVisible" is * programatically added and removed from the content element as the panel * is activated/deactivated. */ .TabbedPanelsContentVisible { } /* Vertical Tabbed Panels * * The following rules override some of the default rules above so that the * TabbedPanels widget renders with its tab buttons along the left side of * the currently active content panel. * * With the rules defined below, the only change that will have to be made * to switch a horizontal tabbed panels widget to a vertical tabbed panels * widget, is to use the "VTabbedPanels" class on the top-level widget * container element, instead of "TabbedPanels". */ /* This selector floats the TabGroup so that the tab buttons it contains * render to the left of the active content panel. A border is drawn around * the group container to make it look like a list container. */ .VTabbedPanels .TabbedPanelsTabGroup { float: left; width: 10em; height: 20em; background-color: #EEE; position: relative; border-top: solid 1px #999; border-right: solid 1px #999; border-left: solid 1px #CCC; border-bottom: solid 1px #CCC; } /* This selector disables the float property that is placed on each tab button * by the default TabbedPanelsTab selector rule above. It also draws a bottom * border for the tab. The tab button will get its left and right border from * the TabGroup, and its top border from the TabGroup or tab button above it. */ .VTabbedPanels .TabbedPanelsTab { float: none; margin: 0px; border-top: none; border-left: none; border-right: none; } /* This selector disables the float property that is placed on each tab button * by the default TabbedPanelsTab selector rule above. It also draws a bottom * border for the tab. The tab button will get its left and right border from * the TabGroup, and its top border from the TabGroup or tab button above it. */ .VTabbedPanels .TabbedPanelsTabSelected { background-color: #EEE; border-bottom: solid 1px #999; } /* This selector floats the content panels for the widget so that they * render to the right of the tabbed buttons. */ .VTabbedPanels .TabbedPanelsContentGroup { clear: none; float: left; padding: 0px; width: 30em; height: 20em; } /* END */