.nav_box_table td { text-align: center; } body { background-color: #434445; text-align: center; margin: 0px; } body, td { font-family: Tahoma, Helvetica, Arial; font-size: 11px; } .stat_table { border: black solid 1px; } .stat_top_row { background-color: #B4B9D2; color: black; font-weight: bold; } .stat_top_td { border-bottom: solid black 1px; } .stat_td { border-bottom: silver solid 1px; } .stat_td_alternate { border-bottom: silver solid 1px; background-color: #F1F3F9; } .nav_block { /* Width was moved from here to the nav_block_content div because it wouldn't allow the box to become wider if the content required it width: 155px; */ border: black solid 1px; background-color: #ffffff; margin-bottom: 10px; } .nav_block div.nav_block_title { background-color: #B4B9D2; color: black; font-weight: bold; border-bottom: black solid 1px; padding: 3px; margin-bottom: 10px; } .nav_block div.nav_block_content { border-bottom: silver solid 1px; padding-left: 5px; padding-right: 5px; padding-bottom: 10px; width: 145px; } /* This is the width for IE only, due to its box model problem */ *html .nav_block div.nav_block_content { width: 155px; } .nav_link_container { } .nav_link_container ul { list-style-type: none; margin: 0px; padding-left: 0px; } .nav_link_container a { display: block; padding: 2px; } /* width here is only for IE's benefit :( */ * html .nav_link_container a { width: 100%; } .nav_link_container a:link, .nav_link_container a:visited { color: blue; text-decoration: none; } .nav_link_container a:hover { background-color: #dfdfdf; } .nav_link_container a.selected { font-weight: bold; color: blue; } /* a little spacing above and below the links in the Account Options block */ .acct_options div.nav_link_container { margin-top: 10px; margin-bottom: 10px; } /* fix margins for best sellers ol */ .best_sellers ol { margin: 0px; padding-left: 27px; text-align: left; } .best_sellers ol li { vertical-align: top; margin-bottom: 5px; } /* move the links a little closer to the bullets */ .best_sellers a { position: relative; left: -5px; } /* fix alignment of text with numbered bullet for IE only */ * html .best_sellers a { position: relative; top: -2px; } /* table that contains subcategory links, below category detail */ .subcategory_table { width: 100%; } .subcategory_table td { text-align:center; } /* vertical align elements with form fields, labels, etc... */ .valign_middle span, .valign_middle a, .valign_middle img, .valign_middle input, .valign_middle select { vertical-align: middle; } /* drop shadow div */ .drop_shadow { height: 10px; background-repeat: repeat-x; } /* content boxes (used on a by deafult) */ .content { background-color: white; border: gray solid 1px; padding: 7px; text-align: center; } .header { font-size: 20px; text-align: left; } /* header div for certain sections of content, "Best Seller","Product Catalog", etc... */ .header2 { font-size: 14px; font-weight: bold; text-align: left; background-color: #CED1E0; padding: 2px; border: gray solid 1px } /* links inside header2 */ .header2 a { text-decoration: none; color: navy; } .tiny_gray { color: gray; font-size: 7pt; } .small_link { font-size: 7pt; font-weight: normal; } /********************************************************************************** Bread Crumb and Page navigation **********************************************************************************/ /* this is for the div that surrounds all the links */ .bread_crumb_nav { width: 100%; text-align: left; } /* this is for the link */ .bread_crumb_link { font-family: Verdana, Tahoma, Helvetica; font-size: 9px } /* the div surrounding the entire page nav */ .page_nav_div { text-align: center; } /* controls the spacing between the links */ .page_nav_spacing { padding-left: 5px; padding-right: 5px; } /* the current page number */ .page_nav_div .page_nav_current { font-weight: bold; } /* page links */ .page_nav_div a:hover { text-decoration: underline; } .page_nav_div a ,.page_nav_div a:visited { text-decoration: none; color: blue; } /* a disabled link */ .page_nav_disabled { color: silver; } /********************************************************************************** Messages to customer **********************************************************************************/ /* this is usually used for error messages */ .action_msg { color: red; font-weight: bold; } /* instruction message to customer */ .cart_instruction { font-size: 10pt; margin-bottom: 10px; } /* this is for the image of either a hand OR a balloon, and aligns it vertically with the msg text */ .cart_instruction img { vertical-align: middle; } /* add to cart error messages (div) */ .add_cart_errors { margin-top: 10px; color: red; text-align: center; } /* for messages that are informational (with Balloon image to left of text) */ .cart_info_msg { margin-top: 5px; color: blue; font-weight: bold; } /********************************************************************************** Category links in the "Product Catalog" nav block **********************************************************************************/ /* this is for text inside the anchor for selected categories, and for parents that are expanded */ .cat_links .expanded .parent a { font-weight: bold; color: blue; background-color: #dfdfdf; /*width: 100%;*/ } /* this is the div surrounding an expanded parent and its children */ .cat_links .expanded { border: silver solid 1px; margin-top: 4px; margin-bottom: 4px; width: 100%; } /* this is the div surrounding the expanded parent only */ .cat_links .expanded .parent { border-bottom: silver solid 1px; padding: 2px; } /* this is the div inside a parent category that contains the sub cats */ .cat_links .expanded .children { padding: 2px; } /********************************************************************************** Discount related styles **********************************************************************************/ /* name of discount when it is advertised */ .discount_name { font-style: italic; text-align: left; font-weight: bold; margin-bottom: 4px; } /* image for discount when advertised */ .discount_image { float: left; } /* description of discount when advertised */ .discount_description { vertical-align: middle; text-align: left; } .discount_description .image_div { float: left; } /* hide margin from IE */ .discount_description>.image_div { margin-right: 10px; } .discount_conditions, .discount_product_link { color: gray; margin-top: 5px; } .discount_separator {height: 20px} .coupon { border: black dashed 3px; padding: 10px; padding-top: 15px; padding-bottom: 18px; margin-top: 0px; margin-bottom: 30px; margin-left: auto; margin-right: auto; background-color: #DBFFDB; width: 90%; } .coupon_code_field { width: 100px; margin: 8px } /******************************************************************** Styles below are for the condition/rule/rule set descriptions seen on discount advertisements and other places ********************************************************************/ /* div containing the word AND/OR */ .condition_and_or { font-weight: bold; padding-top: 5px; padding-bottom: 5px; } .condition_parens { padding-left: 5px; margin-left: 0px; border-left: silver dashed 1px; } /***************************************************************** Styles below are for product options... They control the way the options appear when viewing a product ******************************************************************/ /* table containing all options */ .options table { margin-left: auto; margin-right: auto; } /* keeps option rows evenly spaced vertically */ .options td { height: 30px; } /* This is a break that appears below textarea/radio options, to maintain spacing by default, it should be half of the height for the style immediately above this - ".options td" */ .options .extra_br { height: 15px; } /* 1st td inside options table...contains instruction for selecting option */ .options .instruction { text-align: right; vertical-align: top; padding-top: 3px; } /* 2nd td inside options table...contains actual form field */ .options .field { text-align: left; } /* Custom Detail Link ... defaults to (details) */ .options .custom_detail_link { font-size: 7pt; } .options select { vertical-align: middle; } .options img { vertical-align: middle; } .options span { vertical-align: middle; } .options input { vertical-align: middle; } .options textarea { } /* this is for the div surrounding the radio options */ .options .radios { line-height: 170%; } /* below aligns radio buttons and checkboxes to the left, for IE only */ .radios input, .options .checkbox { margin-left: -3px; } /* below aligns radio buttons and checkboxes to the left, for all but IE */ .radios>input, .checkbox_span>.checkbox { margin-left: 0px; } /*********************************************************************** Styles below are for the product option detail page, which opens when you click a link near an option for more detail ***********************************************************************/ .option_detail_body { background-color: #ffffff; font-size: 11px; margin: 5px } /* div that surrounds the entire content, directly inside */ .option_detail_div { text-align: left; } /* this is the div that surrounds the detail for the option itself */ .option_detail_div .option_detail { } /* this is the div that surrounds the name (or image of name) for the option */ .option_detail_div .product_section { text-align: center; padding-bottom: 0px; } /* image for option */ .option_detail .option_img { float: left; } /* DIV separating option and choices */ .option_detail_div .separator { clear: left; height: 10px; } /* table cell containing a single choice */ .option_detail_div .choices_table td { padding: 2px; } /* table containing choices for this option */ .option_detail_div .choices_table { width: 100%; background-color: lightblue; } /* name of choice */ .choices_table .choice_name { font-weight: bold; font-size: 12px; text-align: center; } .choices_table .choice_price { text-align: center; } /* DIV surrounding a choice's image */ .choices_table .choice_img_div { float: left; } /* description of choice */ .choices_table .choice_description { vertical-align: top; text-align: left; } .choices_table .single_choice_table { border: silver solid 1px; background-color: white; margin-left: auto; margin-right: auto; } /****************************************************************** Styles below are for the best sellers nav block ******************************************************************/ #best_sellers_table td { height: 40px; vertical-align: top; } /****************************************************************** Styles below are for the cart options (advanced) nav block ******************************************************************/ /* table containing cart breakdown...IE doesn't like the width on this, so the > trick is used to exclude IE */ div.nav_block_content>#cart_options_advanced { width: 100%; } /* controls all td (table cells) */ #cart_options_advanced td { font-family: Arial; font-size: 9px; } /* controls the TD in the first row */ #cart_options_advanced .header_row_td { padding-bottom: 5px; } /* the td that contains the qty */ #cart_options_advanced .qty_td { text-align: left; } /* the td that contains the name of the item */ #cart_options_advanced .name_td { text-align: left; white-space: nowrap; } /* the td that contains the price of the item */ #cart_options_advanced .total_td { text-align: right; } /* controls the TD in the first row */ #cart_options_advanced .footer_row_td { text-align: right; border-top: silver solid 1px; padding-top: 5px; } /* keep links from looking visited */ #cart_options_advanced a, #cart_options_advanced a:visited { text-decoration: underline; color: blue; } /****************************************************************** Styles below are for the Account Choice page ******************************************************************/ /* login form on account choice page */ .account_choice_form { } /* table containing login fields */ .account_choice_form .login_table{ margin-top: 10px; } /* username and password fields */ .account_choice_form .login_field { width: 120px; } .account_choice_form input { vertical-align: middle; } /* login button */ .account_choice_form .submit { font-size: 10px; width: 70px; } /* div containing text right below images for each choice..slightly larger than normal */ .sub_heading { font-size: 13px; text-align: center; } /* secondary text on page...field labels also use this */ .small_text { color: gray; } /* table td that contains field labels */ .account_choice_form .field_label_td { text-align: right; } /* table td that contains fields */ .account_choice_form .field_td { text-align: left; } /****************************************************************** Styles below are for the Address Form ******************************************************************/ /* Div surrounding form */ .address_form { } .address_form form { margin: 0px; } /* header above each section of fields */ .address_form_header { margin-bottom: 10px; padding-left: 5px; padding-right: 10px; } /* fieldset surrounding each set of fields */ .address_form fieldset { width: 85%; margin-left: auto; margin-right: auto; } /* table containing labels & fields*/ .address_form table { margin-left: auto; margin-right: auto; } /* fieldset properties hidden from IE :) */ .address_form_trick_ie>fieldset { -moz-border-radius: 6px 6px 6px 6px; border: solid silver 1px; } /* required and missing field indicator message */ .address_form .required_field_indicator { float: right; padding-top: 12px; } .address_form .required_field_indicator img ,.address_form .required_field_indicator span { vertical-align: middle; } /* td containing label for form field */ .address_form .field_label_td { text-align: right; } /* image inside field label td...usually the req. field indicator */ .address_form .field_label_td img ,.address_form .field_label_td span ,.address_form .field_td img ,.address_form .field_td select { vertical-align: middle; } /* td containing form field */ .address_form .field_td { text-align: left; } /* inputs */ .address_form .text_input { width: 250px; } /****************************************************************** Styles below are for the Checkout ******************************************************************/ /* table that surrounds the items and other info */ .checkout_table { width: 100%; border: black solid 1px; } /* address blocks (table) */ .address_block { border: black solid 1px; height: 75px; width: 130px; } /* address block TDs */ .address_block td{ text-align: left; white-space: nowrap; } /* tracking number DIV inside address block */ .address_block .tracking_number { margin-top: 4px; text-align: center; } /* row that contains the column labels */ .checkout_table .header_row, .address_block .header_row { font-weight: bold; height: 22px; background-color: #B4B9D2; } /* row that contains an item */ .checkout_table .item_row td { vertical-align: top; } /* td inside top row */ .checkout_table .header_row td, .address_block .header_row td { border-bottom: black solid 1px; } /* 1st td in top row - "Description" */ .checkout_table .header_row .td_1{ text-align: left; padding-left: 4px; } /* 2nd, 3rd, and 4th td in top row - Options, Unit Price, Total" */ .checkout_table .header_row .td_2, .checkout_table .header_row .td_3, .checkout_table .header_row .td_4 { text-align: right; padding-right: 4px; } /* 1st column in table */ .checkout_table .header_row .td_1, .checkout_table .item_row .td_1 { width: 50%; } /* 2nd column in table */ .checkout_table .header_row .td_2, .checkout_table .item_row .td_2 { width: %30; text-align:right; line-height: 150%; } .checkout_table .item_row .td_2W { line-height: 175%; font-size: 7pt; } /* 3rd column in table */ .checkout_table .header_row .td_3, .checkout_table .item_row .td_3 { width: 12%; text-align:right; line-height: 150%; } /* 4th column in table */ .checkout_table .header_row .td_4, .checkout_table .item_row .td_4 { width: 8%; text-align:right; } /* 1st td in item row */ .checkout_table .item_row .td_1 { height: 100px; } /* vertical border on certain cells */ .checkout_table .item_row .td_1, .checkout_table .item_row .td_2, .checkout_table .item_row .td_3, .checkout_table .qty_row .td_1, .checkout_table .qty_row .td_2 { border-right: silver solid 1px; } /* right padding for all td's in rows other than the first one */ .checkout_table .item_row td, .checkout_table .qty_row td, .checkout_table .footer_row td { padding-right: 4px; } /* td inside qty row */ .checkout_table .qty_row td{ border-bottom: silver solid 1px; border-top: silver solid 1px; text-align: right; background-color: #f1f3f9; } /* payment method TD in footer row */ .checkout_table .footer_row .pay_method { vertical-align: bottom; padding: 4px; } /* quantity field & label */ .qty_row input, .qty_row span { vertical-align: middle; } /* div containing thumbnail of product */ .checkout_table .product { margin: 4px 0px 4px 4px; width: 100%; } /* all tds in product table */ .checkout_table td { text-align: left; } /* td for product name */ .checkout_table .prod_name { margin-bottom: 5px; padding: 2px; } /* div for product image */ .checkout_table .product .prod_img { margin: 4px; float: left; } /* td for product buttons - modify, remove */ .checkout_table .prod_btns { padding-top: 4px; } /* div for savings info for item */ .checkout_table .savings_info { margin-top: 4px; margin-bottom: 4px; font-style: italic; clear: left; } /* div for option detail */ .checkout_table .order_option_detail { padding: 3px; margin-top: 5px; } /* div for each option line */ .checkout_table .order_option_detail_line, .checkout_table .order_option_detail_line_alt { padding: 2px 2px 4px 2px; border-bottom: silver solid 1px; } /* div for alternating option lines */ .checkout_table .order_option_detail_line_alt { background-color: #f7f7f7; } /* label for option name */ .checkout_table .order_option_detail_line .label, .checkout_table .order_option_detail_line_alt .label { font-weight: bold; margin-right: 4px; color: #515151; } /* alternating color for label of option name */ .checkout_table .order_option_detail_line_alt .label { color: green; } .checkout_table .opt_detail_btn { border: 0px; cursor: pointer; } /*************************************************************** Styles below are for the checkout progress indicator above checkout form..."Step 1, Step 2, etc..." ***************************************************************/ /* table that contains the progress links */ .checkout_progress { } /* checkout progress links */ .checkout_progress a, .checkout_progress a:visited { color: green; text-decoration: none; vertical-align: middle; } .checkout_progress a:hover { color: green; text-decoration: underline; } .checkout_step_pending { color: silver; font-size: 10pt; } .checkout_step_active { font-size: 10pt; color: blue; font-weight: bold; font-style: italic; } .checkout_step_done { color: green; font-size: 10pt; } .checkout_step_pending, .checkout_step_active, .checkout_step_done { width: 20%; text-align: left; font-family: "Trebuchet MS", Verdana, Arial; } .checkout_step_active .checkout_step_num { font-style: italic; } .checkout_buttons_row1, .checkout_buttons_row2 { text-align: center; } .checkout_buttons_row2 { margin-top: 15px; } .checkout_buttons_row1 img, .checkout_buttons_row2 img { border: 0px; } #checkout_button_w_gc { margin-bottom: 17px; border: 0px; } #checkout_or { margin: 0px 4px 17px 6px; } /************************************************************************************ Form field styles ************************************************************************************/ /* for incomplete fields */ .error_field, .error_field_radios { background-color: #ff6767; } /* border around incomplete radio button fields */ .error_field_radios { border: gray solid 1px; padding-left: 2px; } /* readonly text input fields */ .readonly { background-color: silver; } input, select { font-size: 11px; } /********************************************************************************** Styles for the Product Detail page (shown when a thumbnail is clicked) **********************************************************************************/ /* surrounds the product description and image */ .product_description { text-align: left; vertical-align: top; width: 100%; } /* surrounds the entire product detail area */ .product_display { text-align: center; width: 100%; } .product_name { color: blue; font-size: 16px; font-weight: bold; text-align: left; width: 100%; } /* header for sections (Discounts, Buy Now, etc...) */ .product_section { text-align: left; color: blue; font-size: 16px; padding-top: 0px; padding-bottom: 10px; } /*********************************************************************************** Styles for the Product Thumbnail ***********************************************************************************/ .product_price { vertical-align: middle; width: 300; } /***************************************************************************** Styles for UPS tracking form *****************************************************************************/ .ups_window { border: black solid 1; width: 100%; } .ups_window_header { background-color: #804000; height: 30px; color: white; font-size: 10pt; font-weight: bold; padding: 5px; } /************************************************************************* The following styles control the appearance of HTML order emails *************************************************************************/ .order_email_body { background-color: #ffffff; } /* DIV surrounding HTML emails */ .order_email_htm { background-color: #ffffff; padding: 10px; text-align: left; font-size: 10pt; width: 100%; } .order_email_htm .header { margin-bottom: 5px; } /**************************************************************************** Styles for fedex tracking results ****************************************************************************/ /* body tag for fedex tracking */ .fedex_track_body { background-color: white; } /* table surrounding results */ .fedex_track_table { width: 100%; } /* other individual tables inside main one */ .fedex_track { border: black solid 1px; width: 100%; } .fedex_track td { text-align: left; } .fedex_track .header_row { background-color: #660099; color: white; padding: 4px; } .fedex_track .scantd { border-bottom: black solid 1px; } .fedex_track .scantd_alt { border-bottom: black solid 1px; background-color: #F1F3F9; } /*********************************** Styles for diag mode window ***********************************/ .diag { padding: 8px; border: gray solid 1px; background-color:#F5F5F5; text-align: left; font-size: 8pt; } .diag_true { color: green; font-weight: bold; } .diag_false { color: red; font-weight: bold; } .diag_code { margin-left: 6px; margin-right: 6px; margin-top: 4px; margin-bottom: 10px; font-family:"Courier New", Courier, mono; background-color: silver } .diag_discount { margin-left: 6px; margin-bottom: 10px; padding: 2px; padding-bottom: 10px; background-color:#E8E8E8; } .diag_discount_name { text-decoration:underline; margin-bottom: 2px; } /************************************ Div surrounding wait indicator image in storefront ************************************/ .wait img { vertical-align: middle; } .wait span { vertical-align: middle; padding-bottom: 2px; } /* to fix divs that have floated children, so they expand around them.. .. put this div at the bottom, inside the one that won't expand */ .clear_float { clear: both; line-height: 0; height: 0; } .large_heading { font-size: 16px; } .large_button { font-size: 14px; }