/* *** Global *** /* Use this section to set site-wide master settings. */ body { background: white; color: black; font: normal 12pt Arial, Verdana, Helvetica, sans-serif; margin: 4px; } /* *** Header *** /* This is the section that repeats on every store page. */ /* *** Header - Top Level *** /* Use this section to format the top-most banner, which contains store name or logo, language, search, custom text box, and cart info. */ #BannerTopLevel { background: ; } /* Header - Top Banner table row and the contained cells. */ #Header_TopBar_Row { background: } .Header_TopBar_Spacer { width: 20; } #Header_TopBar_Cell1 { background:; text-align: left; vertical-align: middle; padding-left: 5; } #Header_TopBar_Cell2 { background:; text-align: left; vertical-align: middle; } #Header_TopBar_Cell3 { background:; text-align: left; vertical-align: middle; } #Header_TopBar_Cell4 { background:; text-align: left; vertical-align: middle; } /* Header - Store Name or Logo (If logo URL is specified, logo will be displayed in place of store name.) */ #Header_CompanyName { font: bold 16pt; filter: dropshadow(color=#C0C0C0, OFFY=1); letter-spacing:2px; } #Header_CompanyLogo { } /* Header - Language Selection box */ #Header_LanguageHeading { width: 87; height: 18; background: url('languages.gif') no-repeat; } #Header_LanguageCombobox { } /* Header - Search box */ #Header_SearchHeading { width: 78; height: 18; background: url('search.gif') no-repeat; } #Header_SearchTextbox { } #Header_SearchButton { width: 21; height: 21; background: url('but_go.gif') no-repeat; } #Header_SearchAdvanced { font: bold 8pt Arial; } /* Header - Custom text box (Set in [Manage], [Store], [Miscellaneous Settings].) */ #Header_Custom_Frame { background: white; } .Header_Custom_Body { background: white; color: black; font: normal 8pt Arial; } /* Header - Shopping cart state */ #Header_Cart_Frame { background: blue; } .Header_Cart_Body { background: white; color: black; font: normal 8pt Arial; } #Header_Cart_Icon { width: 18; background: url('basket.gif') no-repeat center; } /* *** Header - 2nd Level (Navigation) *** /* Use this section to format the second level (navigaion) banner. */ #BannerNavLevel { background: ; } /* This seporates the two banners, and the bottom banner and the content. */ #Header_NavBarSpacerTop { height: 2; } #Header_NavBarSpacerBottom { height: 2; } /* Header - Navigation Bar - Bar and Border */ .Header_NavBarBorderTop { background: ; height: 0; } .Header_NavBarCells { height:18; background: #0000FF; } .Header_NavBarBorderLeft { background: #0000FF; } .Header_NavBarBorderRight { background: #0000FF; } .Header_NavBarBorderBottom { background: ; height: 0; } .Header_NavBarDivider { width: 25; background: url('topnav_divider.gif') no-repeat center; } /* Header - Displayed when user is loged in */ #Header_UserWelcome { text-align: left; color: yellow; font-weight: normal; padding-left: 15; } #Header_UnpaidOrdrs { text-align: left; color: red; font-weight: bold; } #Header_UnpaidOrdrs a:link { color:#00FF00; } #Header_UnpaidOrdrs a:visited { color:#00FF00; } #Header_UnpaidOrdrs a:hover { color:#00CC00; } /* Header - Navigation Bar - Buttons */ #Header_NavBarButton_Home { } #Header_NavBarButton_Cat { } #Header_NavBarButton_Util { } #Header_NavBarButton_Cart { } #Header_NavBarButton_Check { } .Header_NavBarButtonText { color: red; font: bold 10pt Arial; text-decoration: none; } .Header_NavBarButton_Left { width: 10; height: 18; background: url('NavButton_Left.gif') no-repeat center; } .Header_NavBarButton_Mid { background: url('NavButton_Mid.gif') repeat-x center; } .Header_NavBarButton_Right { width: 10; background: url('NavButton_Right.gif') no-repeat center; } /* *** Homepage *** #Home { } /* This will customize the look of the content you enter in Manage -> Store -> Home Page. */ #HomepageBody { } /* Home Page Featured Products (if featured items present) /* Dividers for the table, Caption, sub-caption */ .FeaturedProdDividers { width: 1; height: 1; background: #cccc99; } #FeaturedProdCaption { font: bold 16pt; } #FeaturedProdSubCaption { font: normal 12pt; } #FeaturedProdHighlight { font: bold 12pt; } .FeaturedProdItemtitle { font: bold; } .FeaturedProdItemdescr { font: normal Georgia; color: #330000; } .FeaturedProdLinks { } .FeaturedProdPrice { clear: none; } .FeaturedProdPriceicon { width: 10px; height: 8px; background: url('orange_arrow.gif') no-repeat center left; } #Home #Header_NavBarButton_Home .Header_NavBarButton_Left { background: url('NavButton_Sel_Left.gif'); } #Home #Header_NavBarButton_Home .Header_NavBarButton_Mid { background: url('NavButton_Sel_Mid.gif'); } #Home #Header_NavBarButton_Home .Header_NavBarButton_Right { background: url('NavButton_Sel_Right.gif'); } /* *** Products Listing *** */ /* Appears on a category page, search results page, and hot deals page. */ #Prodlisting_Header { } #Prodlisting_HeaderIcon { width: 14px; height: 9px; background: url('bullet1.gif') no-repeat center left; } #Prodlisting { margin-left: 25px; } #Prodlisting .HDivider { display:block; border:0px none; height:2px; color:#cccc99; background-color:#cccc99; margin:0px 0; } #Prodlisting .VDivider { width:20px; } .Prodlisting_Pagenav { } .Prodlisting_Pagenav_Left { width: 16px; height: 8px; background: url('errow_l.gif') no-repeat center; } .Prodlisting_Pagenav_Right { width: 16px; height: 8px; background: url('errow_r.gif') no-repeat center; } .Prodlisting_Pagenav_CurPg { font: bold; } .Prodlisting_Pagenav_Page { } .Prodlisting_Item { vertical-align: top; margin-left: 25; } /* This allows you to customize a particuar catalog item. Simply replacec 'nnn' with the Item ID. */ #Prodlisting_nnn { } .Prodlisting_Item_Thumbnail { } .Prodlisting_Item_Title { font: bold; } .Prodlisting_Item_Links { padding-top: 3px; } .Prodlisting_Item_Price { padding-top: 6px; font: 10pt; } .Prodlisting_Item_Out { padding-top: 10px; font: 10pt; color: red; } #Prodlisting .Thumbnail { } /* *** Category Page *** */ #Category { } #Category h1 { font-size: 18pt; color:#0000CC; margin-top: 7pt; margin-bottom: 7pt; } #Category h2 { font-size: 16pt; color:#0000CC; margin-top: 5pt; margin-bottom: 5pt; } #Category h3 { font-size: 14pt; color:#0000CC; } /* This allows you to customize a speciffic category. Simply replace 'nnn' with the Category ID. */ #Category_nnn { } /* Location marker */ #Category_Location { padding-top: 6px; padding-bottom: 10px; font: 16pt bold; } #Category_LocationIcon { width: 14px; height: 8px; background: url('orange_arrow.gif') no-repeat center left; } #Category_TextTop { margin-left: 25px; } /* Category Listing */ #CategoryListing_Header { } #CategoryListing_HeaderIcon { width: 14px; height: 9px; background: url('bullet1.gif') no-repeat center left; } #CategoryListing { margin-left:25px; } #CategoryListing .HDivider { display:block; border:0px none; height:2px; color:#cccc99; background-color:#cccc99; margin:0px 0; } #CategoryListing .VDivider { width:20px; } #CategoryListing .Thumbnail { } /* This allows you to customize a speciffic sub-category. Simply replace 'nnn' with the Sub Category ID. */ #CategoryListing_nn { } #Category_ProductsHeadIcon { width: 14px; height: 9px; background: url('bullet1.gif') no-repeat center left; } #Category_TextLeft { } #Category_TextRight { } #Category_TextTop { } #Category_TextMid { } #Category_TextBottom { } #Category #Header_NavBarButton_Cat .Header_NavBarButton_Left { background: url('NavButton_Sel_Left.gif'); } #Category #Header_NavBarButton_Cat .Header_NavBarButton_Mid { background: url('NavButton_Sel_Mid.gif'); } #Category #Header_NavBarButton_Cat .Header_NavBarButton_Right { background: url('NavButton_Sel_Right.gif'); } /* Item Page */ #Item { } /* This allows you to customize a speciffic item page. Simply replacec 'nnn' with the Item ID. */ #Item_nnn { } #Item_Categories h4 { margin-bottom: 0 } #Item_VSpacer { width: 10; } #Item_Title { font: bold 24pt; } #Item_SKU { padding-bottom: 15px; font: bold; } #Item_Description { padding-bottom: 15px; } #Item_Pricing { padding-bottom: 15px; } #Item_Pricing .head { font: bold italic; } #Item_Availability { padding-bottom: 15px; } #Item_Stock { padding-bottom: 15px; } #Item_Options { padding-bottom: 15px; } #Item_Options select { width: 300px; } /* This allows you to customize a speciffic Options Group. Simply replace 'nnn' with the Options Group's ID. */ #Item_Optiongroup_ID_nnn { } #Item_AddToCart { padding-bottom: 15px; } #Item_AddToCart input { width: 165; height: 18; background: url('add_cart1.gif') no-repeat; vertical-align: text-bottom; } #Item_AddToWishList { padding-bottom: 15px; } #Item_AddToWishList a { } /* Suggested Items box */ #Item_SuggestedItems_Capt { margin-top: 1em; font: bold 16pt; margin: 4px 1em; } #Item_SuggestedItems { margin-bottom: 2em; border-style:inset; border-width:4; background-color:#CCCC99; text-align:center; width:80%; height:390px; overflow:scroll; } .Item_SuggestedItem { float: left; padding: 10px; width: 180; height: 350px; } /* #Item_SuggestedItem_id { } /* Replace id with the related product's ID to control a speciffic related item */ .Item_SuggestedItem .Prodlisting_Item_Title { font: normal 12pt; } #Item #Header_NavBarButton_Cat .Header_NavBarButton_Left { background: url('NavButton_Sel_Left.gif'); } #Item #Header_NavBarButton_Cat .Header_NavBarButton_Mid { background: url('NavButton_Sel_Mid.gif'); } #Item #Header_NavBarButton_Cat .Header_NavBarButton_Right { background: url('NavButton_Sel_Right.gif'); } /* Shopping Cart */ #Cart { } #Cart_Icon { padding-top: 10; width: 24; height: 16; background: url('basket.gif') no-repeat center left; } #Cart_Heading { padding-top: 10; font: bold 16pt; } #Cart #Header_NavBarButton_Cart .Header_NavBarButton_Left { background: url('NavButton_Sel_Left.gif'); } #Cart #Header_NavBarButton_Cart .Header_NavBarButton_Mid { background: url('NavButton_Sel_Mid.gif'); } #Cart #Header_NavBarButton_Cart .Header_NavBarButton_Right { background: url('NavButton_Sel_Right.gif'); } /* Checkout */ #Checkout { } #Checkout #Header_NavBarButton_Check .Header_NavBarButton_Left { background: url('NavButton_Sel_Left.gif'); } #Checkout #Header_NavBarButton_Check .Header_NavBarButton_Mid { background: url('NavButton_Sel_Mid.gif'); } #Checkout #Header_NavBarButton_Check .Header_NavBarButton_Right { background: url('NavButton_Sel_Right.gif'); } /* Customer Utilities */ #Util { } #Util input { width: 200px; } #Util #Header_NavBarButton_Util .Header_NavBarButton_Left { background: url('NavButton_Sel_Left.gif'); } #Util #Header_NavBarButton_Util .Header_NavBarButton_Mid { background: url('NavButton_Sel_Mid.gif'); } #Util #Header_NavBarButton_Util .Header_NavBarButton_Right { background: url('NavButton_Sel_Right.gif'); } /* Header row for display tables */ .TableHeaderRow { background: #6699FF; text-align: left; color: black; font: bold 12pt Arial; padding-left: 8; padding-right: 8; } /* Privacy Policy page */ .PrivacyPolicy { } .PrivacyPolicy h1 { font-family: Times; font-size: 18pt; text-align: center; margin-top: 20; } .PrivacyPolicy h2 { font-family: Times; font-size: 14pt; text-align: left; margin-top: 20; margin-bottom: 10; } .PrivacyPolicy p { font-family: Times; font-size: 12pt; text-align: left; margin-top: 0; margin-left: 20; } /* Tutorials: http://www.echoecho.com/css.htm http://www.w3schools.com/css/default.asp CSS2 Reference: http://www.echoecho.com/documentationframe.htm?http&&&www.w3.org/TR/REC-CSS2 http://www.w3schools.com/css/css_reference.asp CSS Examples: http://www.w3schools.com/css/css_examples.asp CSS2 Print Reference: http://www.w3schools.com/css/css_ref_print.asp A rough guide... The following HTML tags take the following style settings: td: padding border color background-color (edge to edge) font span: margin padding-left border (contents only) color background-color (contents only) font p: margin padding border (edge to edge) color background-color (edge to edge) font */