/* Site Layout Styles * Updated: 8 Dec 08 @ 9.00am * Author: Matthew Holmes * ---------------------------------------------*/ @import "thickbox.css"; /* -- TOC --------------------------------------- 1. Colors 2. Reset 3. Fix Floats 4. Links 5. Typography 6. Structure */ /* -- COLORS ---------------------------------------*/ /* dark blue = #007d9b */ /* light blue = #00adef */ /* orange = #eb7922 */ /* green = #77a22e */ /* grey = #555 */ /* -- RESET ---------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: inherit; font-family: inherit; list-style: none; } table { border-collapse: collapse; border-spacing: 0; } /* -- FIX FLOATS ---------------------------------------*/ .clearfix:after { display: block; clear: both; height: 0; content: "."; visibility: hidden; } * html .clearfix { height: 1%; } *+ html .clearfix { height: 1%; } /* -- LINKS ---------------------------------------*/ a { color: #00adef; text-decoration: none; } a:hover { text-decoration: underline; } /* custom */ #content .sidebar a { color: #fff; text-decoration: underline; } /* -- TYPOGRAPHY ---------------------------------------*/ h3 { margin: 0px; font-size: 1.5em; color: #00adef; } h4 { margin: 15px 0 5px; } p { margin: 0 0 5px; } /* custom */ h3.stores { margin: 15px 0 5px; } #content .sidebar p { padding: 0 0 0 5px; } /* -- STRUCTURE ---------------------------------------*/ body { color: #555; font: 62.5%/1.6 Helvetica, Arial, sans-serif; } /* -- container */ #container { width: 1024px; margin: 0 auto; } /* -- header */ #header { height: 150px; background: url(../images/bg.gif) 0 0 no-repeat; } /* logo */ #header h1 { float: left; padding: 30px 0 0 35px; } /* slogan */ #header h2 { float: right; padding: 68px 20px 0 0; line-height: 0; } /* search */ #header form { clear: both; float: right; padding: 4px 40px 0 0; } #header form input { float: left; height: 10px; width: 210px; font-size: 1.0em; color: #007d9b; margin-right: 5px; } #header form button { float: left; width: 33px; height: 18px; border: 0; text-indent: -999em; background: url(../images/btn-go.gif) no-repeat; cursor: pointer; } .search_form { display: none; } .search_form legend, .search_form label { display: none; } /* -- content */ #content { background: url(../images/bg.gif) 0 -150px no-repeat; } /* sidebar */ #content .sidebar { float: left; width: 213px; padding: 0 0 0 35px; color: #fff; font-size: 1.2em; } #content .sidebar ul { padding: 5px 0; } #content .sidebar li a { text-decoration: none; display: block; padding: 0px 5px 0px 12px; background: url(../images/icon-arrow.gif) 0px 4px no-repeat; font-size: 1.1em; height: 15px; } #content .sidebar li a:hover { text-decoration: underline; } #content .sidebar li li { padding-left: 15px; background: none; } #content .sidebar li li a { padding: 0px 0px 0px 12px; background: url(../images/bg-list.gif) 0px 6px no-repeat; } #content .sidebar .purchases { padding: 10px 0; margin: 0px; } /* mainbar */ #content .mainbar { float: left; width: 758px; margin: 0 18px 0 0; } /* banner */ #banner { height: 200px; background: #000; overflow: hidden; } /* navigation */ #nav { float: left; height: 30px; background: #fff; padding: 5px 20px; } #nav li { float: left; padding: 0px 10px; background: url(../images/bg-nav.gif) 0px 0px no-repeat } #nav li a { color: #000; font-size: 1.1em; font-weight: bold; } /* right content */ #content .right { float: left; width: 728px; padding: 0 15px; font-size: 1.2em; } #content .right ul { padding-left: 20px; } #content .right ul li { list-style: disc; } #content .right h2 { font-size: 1.2em; } #content .right h5 { font-size: 1.2em; font-weight: normal; color: #00adef; margin: 0px; } #content .right .prod_list input, #content .right .prod input, #content .right .buy_field { display: none; } #content .right table td { padding: 4px; } #content .right td a { font-weight: bold; } /* product categories */ table.products_category_table { width: 100%; } table.products_category_table td { vertical-align: bottom; text-align: center; padding: 10px 0; } table.products_category_table td a { font-size: 1.3em; } /* product list */ #content .right .price { float: left; font-weight: bold; color: #eb7922; font-size: 1.2em; } #content .right .buy_button { float: right; } #content .right .buy { border: none; padding-right: 5px; } #content .right .details { float: left; padding-top: 5px; border: none; } #content .right .products_list_table td { padding: 10px 10px 10px 0; width: 170px; } #content .right .products_list_table ul { padding: 0px; } #content .right .prod_link img { padding: 0px; margin: 0px;} #content .right .products_list_table { padding: 0px; margin: 0px; } #content .right .products_list_table li { list-style: none; padding: 0px; margin: 0px; } #content .right .prod_list span { font-size: .7em; } /* product desc*/ #content .right .product_image { float: right; padding: 10px; } #content .right .buy_product { float: right; padding-right: 20px; border: none; } #content .right .item_char { margin: 0px; padding: 0px; } #content .right .item_char li { clear: both; margin: 5px 0; list-style: none; } #content .right .item_char li label { display: block; width: 150px; margin: 5px 0; font-size: 1.2em; font-weight: bold; } #content .right .item_char li select { display: block; margin: 5px 0; } #content .right .prod_label, #content .right .prod { font-size: 1.2em; } #content .right #banner_3 { width: 740px; text-align: center; margin-top: 25px; } /* Cart Detail Elements*/ .order_details_header, table.cart_table th.cart_header { background-color: #00adef; color: #FFF; font-size: 1.2em; font-weight: bold; border: 1px solid #afafaf; border-bottom: none; padding: 4px; } table.cart_table { width: auto; border-collapse: collapse; } table.cart_table td { text-align: center; } table.cart_table .cart_cell { border: none; } table.cart_table .cart_cell_line { border: none; border-bottom: 1px solid #afafaf; text-align: center; } table.cart_table .cart_labels { background-color: #ccc; } .order_details_table { border: 1px solid #bdbdbd; border-top: none; } .order_details_table td { padding: 5px; } .button, .submit, .inputSubmit { background-color: #00adef; border: 1px solid #afafaf; color: #FFF; } .list td { border: #cccccc 1px solid; padding: 2px; height: 20px; } .list th { border: #999999 1px solid; padding: 2px; height: 20px; text-transform: uppercase; } .text th { padding: 2px; } .fieldset_title { display: none; } .plain table th { float: left; padding: 5px; } .form table { width: auto; text-align: left; margin: 10px; } .form table td { padding: 5px; } .priceConversionButton { display: none; } .textarea_small_off, .textarea_small_on, .textarea_medium_off, .textarea_medium_on { width: 149px; height: 80px; padding: 2px; } /* -- SIGN UP FORM*/ form#signup_form { margin: 0; padding: 0; border: 0; } form#signup_form ul { float: left; margin: 0; padding: 0; } form#signup_form fieldset, form#signup_form legend { margin: 0; padding: 0; border: 0; } form#signup_form div { margin: 15px 0 0; } form#signup_form label { display: block; width: 100%; text-align: left; } form#signup_form label:after { content: ":"; } form#signup_form input, form#signup_form textarea, form#signup_form select { margin: 3px 0; width: 246px; } form#signup_form textarea { width: 250px; height: 60px; } form#signup_form br { clear: left; } form#signup_form .cancel { display: none; } form#signup_form #form_info_buttons { position: absolute; left: 0; } form#signup_form fieldset fieldset div { background: none; } form#signup_form .submit { float: left; margin: 0; width: auto; } form#signup_form .state { float: left; margin: 0; padding: 0; } form#signup_form .state li { float: left; padding: 0; list-style: none; } form#signup_form .state ul li { float: left; margin-left: -20px; padding: 0; list-style: none; } form#signup_form .state ul li div { float: left; margin: 0; padding: 0; list-style: none; } /* -- UPDATE FORM */ form#update-form, form#update-form fieldset { margin: 0; padding: 0; border: 0; } form#update-form legend { display: none; } form#update-form fieldset fieldset legend { display: block; } form#update-form input { width: 220px; } form#update-form textarea { width: 300px; height: 120px; } form#update-form ol, form#update-form ul { margin: 0; padding: 0; list-style: none; } form#update-form li { clear: both; margin: 0 0 .75em; padding: 0px; list-style: none; } form#update-form label { float: left; width: 110px; margin-right: 5px; text-align: left; font-weight: bold; } form#update-form label:after { content: ":"; } form#update-form .state { float: left; margin-left: -1.8em; } form#update-form ul { margin: 0; padding: 0; list-style: none; } form#update-form li li { float: left; width: 48%; margin: 0; padding: 0; clear: none; list-style: none; } form#update-form .state li { list-style: none; } form#update-form .receive_email, form#update-form .security_code_fieldset { margin-left: 115px; } form#update-form .state label, form#update-form .receive_email label { display: inline; width: auto; margin: 0; } form#update-form .state label:after, form#update-form .receive_email label:after { content: ""; } form#update-form button { margin-left: 25px; } /* -- PASSWORD FORM */ #passwordForm li { padding: 5px 5px 5px 0; width: 315px; } #passwordForm input { width: 220px; float: right; } #passwordForm button { clear: both; float: left; margin: 5px 5px 5px 0; } /* -- FORUM */ .forum { font-size: 12px; font-weight: normal; width: 610px; } .forum table { } .forum td { height: 26px; padding: 6px; border-bottom: 1px dotted #DDD; } .forum td table tbody tr td { border-bottom: none; } #posts_table .forum td { height: 26px; padding: 6px; border-bottom: none; } .forum th { font-size: 12px; font-weight: bold; color: #FFF; text-align: left; padding: 6px; height: 25px; } .forum_input { position: relative; float: left; width: 100px; height: 20px; margin-bottom: 6px; border: 1px; border-style: solid; background-color: #007d9b; font-size: 10px; cursor: pointer; color: #FFF; } .forum_breadcrumb { display: none; } .forum_breadcrumb br { display: none; } .forum_last_post { width: 120px; } .forum_header_row { background-color: #00adef; color: #FFF; border: none; } .forum_header_row td { background-color: #004D91; color: #FFF; border: none; } .forum_title_row td { background-color: #e2e7e1; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; } #posts_table .forum_title_row td table tbody tr td { border: none; } #posts_table .forum tbody tr td { border: 1px dotted #DDD; } #posts_table .forum tbody tr td tr td { height: 12px; padding: 2px; border:none; } .forum_post { } .forum_post_title { border-bottom: 1px solid #DDD; } .forum_post_author { font-size: 12px; font-weight: bold; padding: 10px; } .forum_footer { width: 100%; padding-top: 20px; } .forum_footer td { background: #F6F6F6; font-size: 10px; padding: 5px; } /* -- footer */ #footer { background: url(../images/bg.gif) 0 -4433px no-repeat; } #footer p { padding: 35px 0; color: #00adef; font-size: 1.1em; text-align: center; } #content .right .jesse span { font-size: 1.2em; } #content .right .jesse_special span { color: red; font-weight: bold; }