/* ------------------------------------------------------------------------- ------------------------------------------------------------------------- ------------------------- skin specific styles -------------------------- ------------------------------------------------------------------------- */ #navHome a:link, #navHome a:visited { width:51px; background: url(../images/nav/home.gif) no-repeat left top; } #wrapper #navHome a:hover, #wrapper #navHome a:active, #wrapper #navHome a:focus { background: url(../images/nav/home.gif) no-repeat right top; } #navNews a:link, #navNews a:visited { width:103px; background: url(../images/nav/news.gif) no-repeat left top; } #wrapper #navNews a:hover, #wrapper #navNews a:active, #wrapper #navNews a:focus { background: url(../images/nav/news.gif) no-repeat right top; } #navUpload a:link, #navUpload a:visited { width:127px; background: url(../images/nav/upload.gif) no-repeat left top; } #wrapper #navUpload a:hover, #wrapper #navUpload a:active, #wrapper #navUpload a:focus { background: url(../images/nav/upload.gif) no-repeat right top; } #navGallery a:link, #navGallery a:visited { width:66px; background: url(../images/nav/gallery.gif) no-repeat left top; } #wrapper #navGallery a:hover, #wrapper #navGallery a:active, #wrapper #navGallery a:focus { background: url(../images/nav/gallery.gif) no-repeat right top; } #navAccount a:link, #navAccount a:visited { width:100px; background: url(../images/nav/account.gif) no-repeat left top; } #wrapper #navAccount a:hover, #wrapper #navAccount a:active, #wrapper #navAccount a:focus { background: url(../images/nav/account.gif) no-repeat right top; } #navContact a:link, #navContact a:visited { width:83px; background: url(../images/nav/contact-us.gif) no-repeat left top; } #wrapper #navContact a:hover, #wrapper #navContact a:active, #wrapper #navContact a:focus { background: url(../images/nav/contact-us.gif) no-repeat right top; } #navBasket a:link, #navBasket a:visited { width:98px; background: url(../images/nav/basket.gif) no-repeat left top; } #wrapper #navBasket a:hover, #wrapper #navBasket a:active, #wrapper #navBasket a:focus { background: url(../images/nav/basket.gif) no-repeat right top; } #navAbout a:link, #navAbout a:visited { width:73px; background: url(../images/nav/about-us.gif) no-repeat left top; } #wrapper #navAbout a:hover, #wrapper #navAbout a:active, #wrapper #navAbout a:focus { background: url(../images/nav/about-us.gif) no-repeat -103px top; } /* ---------------------------------- ----- end global navigation ------ ---------------------------------- */ /* ------------------------------------------------------------------------- ------------------------------------------------------------------------- ------------- image replacement for all the panel headers ---------------- ------------------------------------------------------------------------- */ .supplementaryContent .panel h2 { text-indent: -9999px; overflow: hidden; } .supplementaryContent #searchPanel h2 { background: url(../images/headers/panel-search.gif) no-repeat left top; } .supplementaryContent #rangesPanel h2 { background: url(../images/headers/panel-collection.gif) no-repeat left top; } .supplementaryContent #bestSellersPanel h2 { background: url(../images/headers/panel-bestsellers.gif) no-repeat left top; } .supplementaryContent #relatedPanel h2 { background: url(../images/headers/might-also-like.gif) no-repeat left top; } .supplementaryContent #bestSellersPanel h2#otherBestSellers { padding-top: 16px; background: url(../images/headers/panel-other-bestsellers.gif) no-repeat left bottom; clear: both; } .supplementaryContent #categoryPanel h2 { background: url(../images/headers/panel-category.gif) no-repeat left top; } .supplementaryContent #accountPanel h2 { background: url(../images/headers/panel-account.gif) no-repeat left top; } .supplementaryContent h2#relatedHeader { background: #ffffff url(../images/related.gif) no-repeat left bottom; height:30px; } .supplementaryContent #basketPanel h2 { background: url(../images/headers/panel-basket.gif) no-repeat left top; } .supplementaryContent #optionsPanel h2 { background: url(../images/headers/panel-options.gif) no-repeat left top; } .supplementaryContent #securePanel h2 { background: url(../images/headers/panel-secure.gif) no-repeat left top; } .supplementaryContent #subscribePanel h2 { background: url(../images/headers/panel-newsletter.gif) no-repeat left top; } .supplementaryContent #advertsPanel h2 { background: url(../images/headers/panel_confidence.gif) no-repeat left top; } .supplementaryContent .panel { background: url(../images/panel-repeater.gif) repeat-y left top; } /* ---------------------------------- ----- end of panel headers ------- ---------------------------------- */ /* ------------------------------------------------------------------------- ------------------------------------------------------------------------- ------------- image replacement for main page headings ------------------ ------------------------------------------------------------------------- */ h1#welcome { width: 444px; height: 25px; background: url(../images/headers/welcome.gif) no-repeat left top; text-indent: -9999px; } .styledHeader, .separateTitle { height: 13px; overflow: hidden; text-indent: -9999px; } h1.dynamicTitle { /* approximate graphical headers for those headings that need to be dynamic, eg. in products.skin */ background: url(../images/headers/blank-header.gif) no-repeat left top; } h1#featuredProducts { background-image: url(../images/headers/featured.gif); } h1#titleSubscribe { background-image: url(../images/headers/subscribe.gif); } h1#titleWish { background-image: url(../images/headers/wish-list.gif); } h1#productDetails { background-image: url(../images/headers/product-details.gif); } h1#titleUpload { background-image: url(../images/headers/upload-your-image.gif); } h1#titleAboutUs { background-image: url(../images/headers/about-us.gif); } h1#titlePrices { background-image: url(../images/headers/our-prices.gif); } h1#titleHow { background-image: url(../images/headers/create-canvas.gif); } h1#titleAccessibility { background-image: url(../images/headers/accessibility-statement.gif); } h1#titleRecommend { background-image: url(../images/headers/recommend-friend.gif); } h1#titleFAQs { background-image: url(../images/headers/frequently-asked-questions.gif); } h1#titleContactUs { background-image: url(../images/headers/contact-us.gif); } h1#titleGallery { background-image: url(../images/headers/canvas-gallery.gif); } h1#titleMyBasket { background-image: url(../images/headers/my-basket.gif); } h1#titleMyAccount { background-image: url(../images/headers/my-account.gif); } h1#titleCheckout { background-image: url(../images/headers/checkout.gif); } h1#titleShippingReturns { background-image: url(../images/headers/shipping-returns.gif); } h1#titlePrivacy { background-image: url(../images/headers/privacy.gif); } h1#titleTermsConditions { background-image: url(../images/headers/terms-conditions.gif); } h1#titleSiteMap { background-image: url(../images/headers/sitemap.gif); } h1#otherProdsInterest { background-image: url(../images/headers/other-products-interest.gif); } h1#customersAlsoBought { background-image: url(../images/headers/customers-also-bought.gif); } h1#fourOFour { background-image: url(../images/headers/404.gif); } h2#titleProductsOfInterest { background-image: url(../images/headers/products-of-interest.gif); /* semantically this is an h2, but visually like an h1: */ width: 498px; height: 37px; margin-left: 0; } h2#titleContactForm { background-image: url(../images/headers/contact-form.gif); margin:20px 0 0 0; } h2#titleContactDetails { background-image: url(../images/headers/contact-details.gif); } h2#titleAdditionalInstructions { background-image: url(../images/headers/additional-instructions.gif); width: 500px; margin-left: 0; } h2#existingCustomers { background-image: url(../images/headers/existing-customers.gif); } h2#firstOrder { background-image: url(../images/headers/first-order.gif); } h2#titleCreateAcc1 { background-image: url(../images/headers/create-account1.gif); } h2#titleCreateAcc2 { background-image: url(../images/headers/create-account2.gif); } h2#titleCreateAcc3 { background-image: url(../images/headers/create-account3.gif); } h2#titleCreateAcc4 { background-image: url(../images/headers/create-account4.gif); } h2#titleCheckout1 { background-image: url(../images/headers/checkout1.gif); } h2#titleCheckout2 { background-image: url(../images/headers/checkout2.gif); } h2#titleCheckout3 { background-image: url(../images/headers/checkout3.gif); } h2#titleCheckout4 { background-image: url(../images/headers/checkout4.gif); } h2#deliveryAddresses { margin-top:30px; background-image: url(../images/headers/delivery-addresses.gif); } h2#invoiceAddresses { margin-top:30px; background-image: url(../images/headers/invoice-address.gif); } h2#help { background-image: url(../images/headers/help.gif); } h2#titleForgotPassword { background-image: url(../images/headers/forgotten-password.gif); } /*lets make an exception of accounts and order history, you can have too many styled headers!*/ h2#accountDetails { margin-left:0px; text-indent:0px; } h2#orderHistory { margin-left:0px; text-indent:0px; } /* ------------------------------------------------------------------------- ------------------------------------------------------------------------- ----------------- image replacement for all buttons --------------------- ------------------------------------------------------------------------- */ /*smaller buttons*/ .productListing .item .fakeButton, #wrapper .item .styledSubmit, #wrapper .panel .styledSubmit, .panel #bestSellerDetails, #basketPanel .styledLink { width: 117px; height: 32px; padding: 0; border: 0; display:block; text-indent: -9999px; overflow: hidden; float: right; } .productListing .item .fakeButton { background: url(../images/buttons/more-details.gif) no-repeat left top; } #wrapper .item .addToBasket, #wrapper #addToBasket { background: url(../images/buttons/add-to-basket.gif) no-repeat left top; } .panel #bestSellerDetails { background: url(../images/buttons/more-details.gif) no-repeat left top; } .panel #searchPanelSubmit { background: url(../images/buttons/search.gif) no-repeat left top; } .panel #newsletterPanelSubmit { background: url(../images/buttons/subscribe.gif) no-repeat left top; } .panel #accountPanelSubmit { background: url(../images/buttons/log-in.gif) no-repeat left top; } #wrapper .item .styledSubmit:hover, #wrapper .item .styledSubmit:active, #wrapper .panel .styledSubmit:hover, #wrapper .panel .styledSubmit:active, #wrapper .item .fakeButton:hover, #wrapper .item .fakeButton:active { background-position:-117px top;/*rollover effect*/ } #basketPanelEdit { margin-bottom: 6px; } /*smaller end*/ /*bigger buttons*/ #basketPanel #basketPanelEdit { background: url(../images/buttons/view-edit-basket.gif) no-repeat left top; display: block; } #basketPanel #basketPanelCheckout { background: url(../images/buttons/go-to-checkout.gif) no-repeat left top; clear: right; } .options { margin-top:10px; } #optionsPanel #optionsPanelBack { background: url(../images/buttons/back-to-shop.gif) no-repeat left top; } #wrapper #basketPanel .styledLink:hover, #wrapper #basketPanel .styledLink:active { background-position:-117px top;/*rollover effect*/ } /*edit buttons and image replacement for account section*/ #wrapper .styledTable .editButton { background:url(../images/icons/edit.gif) no-repeat left center; padding-left: 28px; color: #B82222; font-weight: normal; text-decoration: none; text-align: left; width: 150px; height: auto; } #wrapper .styledTable .setButton { background:url(../images/icons/accept.gif) no-repeat left center; padding-left: 28px; color: #B82222; font-weight: normal; text-decoration: none; text-align: left; width: 150px; height: auto; } #wrapper .styledTable .deleteButton { background:url(../images/icons/delete.gif) no-repeat left center; padding-left: 28px; color: #B82222; font-weight: normal; text-decoration: none; text-align: left; width: 150px; height: auto; } #pageMyAccount #wrapper .addButton { background:url(../images/icons/add.gif) no-repeat left center; padding-left: 28px; color: #B82222; font-weight: normal; text-decoration: none; text-align: left; width: 150px; height: auto; } #pageCheckout1 #wrapper .addButton, #pageCheckout2 #wrapper .addButton, #pageCheckout3 #wrapper .addButton, #pageCheckout4 #wrapper .addButton { background:url(../images/icons/add.gif) no-repeat left center; color:#000000; padding-left: 28px; margin-left: 0px; margin-bottom:20px; text-align: left; } #pageCheckout3 #wrapper .styledTable .editButton { background:url(../images/icons/edit.gif) no-repeat left center; float:right; display:block; position:absolute; padding-left: 28px; top:0px; left:280px; width:180px; text-align: left; } #pageMyAccount #wrapper .deleteButton { background:url(../images/icons/delete.gif) no-repeat left center; } #pageMyAccount #wrapper .setButton { background:url(../images/icons/accept.gif) no-repeat left center; } #wrapper #mainContent .addButton:hover, #wrapper #mainContent .editButton:hover, #wrapper #mainContent .setButton:hover, #wrapper #mainContent .deleteButton:hover { color: #3B3835; } /*end*/ /*styled forms */ #pageSignin #splitRight .actionLinks { padding-top: 18px; } .alertBox p, .alertBox ul { padding: 3px 11px 6px 45px; background: url(../images/icons/alert-prompt.png) no-repeat left top; /* this has a corresponding entry in IE6.css */ min-height: 21px; } .successBox p, .successBox ul { padding: 3px 11px 6px 45px; background: url(../images/icons/success-prompt.png) no-repeat left top; /* this has a corresponding entry in IE6.css */ min-height: 21px; } /*end of sign in*/ /* ------------------------------------------------------------------------- ------------------------------------------------------------------------- --------------- Overwrite Account Table stylings ----------------------- ------------------------------------------------------------------------- */ #pageMyAccount #wrapper .styledTable, #pageMyOrders #wrapper .styledTable { width: 598px; border: 0; } #pageMyAccount .styledTable th, #pageMyOrders .styledTable th { color:#333333; background: none; border-bottom: none; } #pageMyAccount .styledTable td, #pageMyOrders .styledTable td { padding: 4px 15px; border-bottom: none; position:relative; } #pageMyAccount .styledTable .styledInput, #pageMyAccount .contentBlock .styledInput, #pageMyOrders .styledTable .styledInput, #pageMyOrders .contentBlock .styledInput { color: #2B2B2C; background: none; } /*non defaults look smaller*/ #pageMyAccount div + .tableWrapperFixedWidth .tableWrapperFixedInner .styledTable, #pageMyAccount div + .tableWrapperFixedWidth .tableWrapperFixedInner .styledTable th { display:block; color:#999999; } /* ---------------------------------- -------end styled tables---------- ---------------------------------- */ .floatLeftFix { float:left; width:250px; }