/* Parscale Media Style Sheet ----------------------------------------------------------------------------- Prototype Version: 2.22 Developer: Parscale Media Email Address: info@parscale.com Developer Website: http://www.parscale.com/ Client Website: http://www.gourmetbodytreats.com Last Modifier: Brad Parscale - Parscale Media Last Modified: Sat 3.29.2010 @ 12:30pm */ /* Table of Contents ----------------------------------------------------------------------------- 1. Clean Base 2. Base Typography 3. Images 4. Links 5. Forms 6. Tables 7. Framework */ /* 1. Create a Clean Base ------------------------------------------------------------------------------*/ html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address, small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label, input, textarea, option, .nobox{background: transparent; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline;} blockquote, q{ quotes: none; } br{ height: 0; } ul, ol, dl{ list-style: none; } /* Class for clearing floats */ .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;} /* 2. Define Base Typography ------------------------------------------------------------------------------*/ /* Create the Default Headers */ h1, h2, h3, h4, h5, h6 {color: #512d20; font-family: "helvetica","arial",serif;} /* Create the Default Paragraphs */ p {color:#6e6e72; line-height:20px;} /* Specific Header Settings */ h1 {font-size: 22px;} h2 {font-size: 20px;} h3 {font-size: 18px;} h4 {font-size: 16px;} h5 {font-size: 14px;} h6 {font-size: 12px;} /* Other Typo */ strong{font-weight: bold;} hr{border:0 #000 solid; border-top-width: 1px; clear: both; height: 0;} ol{list-style: decimal;} ul{list-style: square;} /* 3. Images ------------------------------------------------------------------------------*/ /* Remove border around linked images */ img {border: 0; border-style: none;} /* Create default inline image class */ img.inline{ display: inline; vertical-align: middle;} /* 4. Links ------------------------------------------------------------------------------*/ /* Default Link Types */ a{color:#6489a7; text-decoration: none;} a:hover{color:#6489a7; text-decoration: underline;} a:active{outline: none;} a:focus{outline: 1px dotted invert;} a.rss {background: url(/images/site/rss.png) no-repeat; display: block; width: 20px; height: 35px; overflow: hidden; text-indent: -9999px;} a.rss:hover {background-position: 0 -35px;} /* 5. Forms ------------------------------------------------------------------------------*/ /* Removes fieldset borders. even on Opea 7 */ fieldset {border: 1px solid transparent;} .foxycart input {background: #e7ecf1; border: 1px dashed #eae9e8; padding: 3px;} .foxycart input.quantity {width: 20px;} .foxycart input.submit {cursor: pointer; width: 120px; border: none; height: 35px; background: url(/images/site/add_to_cart.jpg) no-repeat; text-indent: 0;} /* 6. Tables ------------------------------------------------------------------------------*/ /* Table Fixes */ table {border-spacing: 0; border-collapse: collapse;} td {text-align: left; font-weight: normal;} /* Removes fieldset borders. even on Opera 7 */ fieldset {border: 1px solid transparent;} /* 7. Framework ------------------------------------------------------------------------------*/ /* Page Layout */ body {background: #fefcf9 url(/images/site/bkg_repeat.jpg) top center; font: 13px "lucida grande","helvetica",sans-serif, monospace;} /* Wrapper */ #wrapper {width: 940px; margin: 0 auto; padding: 0 10px;} /* Header */ #header {width: 940px; position: relative; height: 160px; z-index: 1000;} #logo {width: 210px; height: 135px; position: absolute; top: 10px; left: 10px;} #cart {background: url(/images/site/header_cart.jpg) no-repeat; width: 265px; height: 40px; padding: 5px 0 0 15px; position: absolute; right: 0; top: 0;} /* Navigation */ #navigation {position: absolute; top: 90px; left: 350px;} #navigation ul {list-style: none;} #navigation ul li {display: inline;} #navigation ul li a {display: block; float: left; margin-right: 25px; text-indent: -9999px;} #navigation ul li a#active {background-position: 0 -30px;} #navigation ul li a.home {background: url(/images/site/nav_home.png) 0 0 no-repeat; width: 75px; height: 30px;} #navigation ul li a.home:hover {background-position: 0 -30px;} #navigation ul li a.shop {background: url(/images/site/nav_shop.png) 0 0 no-repeat; width: 75px; height: 30px;} #navigation ul li a.shop:hover {background-position: 0 -30px;} #navigation ul li a.about {background: url(/images/site/nav_about.png) 0 0 no-repeat; width: 75px; height: 30px;} #navigation ul li a.about:hover {background-position: 0 -30px;} #navigation ul li a.blog {background: url(/images/site/nav_blog.png) 0 0 no-repeat; width: 75px; height: 30px;} #navigation ul li a.blog:hover {background-position: 0 -30px;} #navigation ul li a.contact {background: url(/images/site/nav_contact.png) 0 0 no-repeat; width: 115px; height: 30px; margin-right: 0;} #navigation ul li a.contact:hover {background-position: 0 -30px;} #navigation ul li ul {display: none; margin: 0; background: #fdf7e7; width: 400px; padding: 20px; position: absolute; top: 30px; left: 90px; z-index: 1000; border-bottom: 1px solid #c9c8c7;border-left: 1px solid #c9c8c7;border-right: 1px solid #c9c8c7;} #navigation ul li ul li {display: block; width: 200px; float: left;} #navigation ul li ul li a {display: inline; float: none; margin: 0; text-indent: 0;} #navigation ul.nav_box {display: block; position: relative; background: none; padding: 0; margin: 0 0 10px 0; top: 0; left: 0; border: none; width: 200px; z-index: 10000;} #navigation ul.nav_box li {display: block; float: none; margin-bottom: 3px;} /* Home Banner */ #banner {height: 520px; width: 940px; position: relative;} #cosmetics {width: 225px; height: 150px; position: absolute; top: 15px; left: 0;} #hair_care {width: 225px; height: 150px; position: absolute; top: 155px; left: 0;} #bath_n_body {width: 200px; height: 170px; position: absolute; top: 320px; left: 40px;} #new_products {width: 225px; height: 150px; position: absolute; top: 60px; right: 0;} #brushes {width: 225px; height: 150px; position: absolute; top: 210px; right: 60px; z-index: 100;} #skincare {width: 200px; height: 170px; position: absolute; top: 360px; right: 0;} /* Search Bar */ #search_bar {position: absolute; top: 0; right: 0; width: 232px; height: 32px; background: url(/images/site/search_bar_top.jpg) no-repeat;} #search_bar_form {padding-top: 7px; padding-left: 10px;} #search_bar_form input.search {width: 190px; color: #9d9ea0;} #search_bar_form input.submit {width: 12px; height: 14px; text-indent: -9999px; background: url(/images/site/search_arw.png) 0 bottom no-repeat; cursor: pointer;} /* Home Ajax */ #home_banner_ajax {width: 450px; height: 500px; position: absolute; top: 0; left: 240px; overflow: hidden;} #hba_divs {position: relative; width: 450px; height: 500px;} #hba_divs .hba_image {width: 450px; height: 500px; position: absolute; top: 0; left: 0;} #hba_divs .hba_message {width: 340px; height: 100px; position: absolute; top: 320px; left: 0; background: #f7f5f4; padding: 20px;} #hba_divs .pos2 {top: 100px;} #hba_divs .hba_message h2 {font-size: 36px; font-weight: normal;} #hba_divs .hba_message p {color: #565554;} /* Content */ #content {width: 940px;} #content p {margin-bottom: 10px;} /* Secondary Content */ #secondary_content {width: 145px; float: left; margin-right: 25px;} #secondary_content .secondary_blog_summary {margin-bottom: 20px;} #secondary_content .secondary_blog_summary p {margin-bottom: 0;} #secondary_content #nav_top {width: 145px; height: 20px; background: url(/images/site/side_nav_top.png) no-repeat;} #secondary_content #nav_mid {width: 145px; background: url(/images/site/side_nav_mid.png) repeat-y;} #secondary_content #nav_mid ul {list-style: none; margin-left: 5px; margin-top: 5px;} #secondary_content #nav_mid ul li {padding-bottom: 3px;} #secondary_content #nav_mid ul li a.active {font-weight: bold;} #secondary_content #nav_btm {width: 145px; height: 20px; background: url(/images/site/side_nav_btm.png) no-repeat;} /* Main Content */ #main_content {width: 770px; float: right;} /* Internal Banner */ #internal_banner {width: 770px; position: relative; height: 220px; overflow: hidden;} #ib_main {width: 525px; height: 170px; position: absolute; top: 0; left: 0;} #ib_secondary {width: 240px; height: 160px; position: absolute; top: 50px; right: 30px;} /* Product List */ #main_content .product_list_item {width: 160px; height: 200px; float: left; margin-right: 20px; margin-bottom: 20px;} #main_content .right {float: right; margin-right: 0;} #main_content .product_list_item p {margin-bottom: 0;} #main_content .product_list_item p.shop_title {font-size: 15px;} #main_content .product_list_item p.price{font-family: "courier"; font-size: 18px; color: #727272; font-weight: bold;} #main_content .product_list_item p.sale_price{font-family: "courier"; font-size: 18px; color: #bc6057; font-weight: bold;} #main_content .pli_image {position: relative; width: 160px; height: 125px; overflow:hidden; margin-bottom: 5px; text-align: center;} #main_content .pli_image .quick_view_text {display: none; position: absolute; top: 0; left: 0; width: 160px; background: #fff; text-align: center;} #main_content .pli_image img {max-width: 160px; max-height: 125px; border: 1px dashed #eae9e8;} #main_content .tooltip {z-index: 1001; display: none; position: absolute; top: -130px; left: 20px; background: url(/images/site/icon_popup.png) no-repeat; width: 180px; height: 105px; padding: 10px 10px 10px 20px;} #main_content .tooltip p {margin-bottom: 0; font-size: 12px; line-height: 16px;} #main_content .tooltip p.title {color: #768e45; font-weight: bold; font-size: 12px; margin-bottom: 5px;} #main_content .choice {position: relative; float: left; margin-right: 10px; margin-bottom: 10px;} /* Title Bar */ #title_bar_wrapper {width: 770px; background: url(/images/site/line_horiz.png) bottom no-repeat; padding-bottom: 10px; margin-bottom: 10px;} #title_bar {width: 770px; background: url(/images/site/line_horiz.png) top no-repeat; padding-top: 10px; margin-top: 10px;} #title_bar p {margin-bottom: 0;} #tb_left {width: 440px; float: left;} #tb_right {width: 330px; float: right; text-align: right;} #title_bar #tb_right p {font-size: 12px;} #title_bar #tb_right a {margin-right: 10px;} #title_bar #tb_right a.email {background: url(/images/site/email_icon.jpg) 0 3px no-repeat; padding-left: 20px;} /* Product Detail */ #product_detail {width: 610px; min-height: 600px; float: left; background: url(/images/site/line_vertical.png) right no-repeat; padding-right: 50px; margin-right: 10px;} #product_detail #pd_images {width: auto; float: left; margin-right: 10px;} #product_detail #pd_buy {width: 275px; float: left;} #product_detail #pd_buy h1 {margin-bottom: 10px;} #product_detail #pd_buy p.sale_price {color: #bc6057; font-size: 26px; font-family: "courier"; margin-bottom: 10px;} #product_detail #pd_buy p.regular_price {font-size: 18px;} #product_detail #pdi_main {margin-bottom: 10px;} #product_detail #pdi_main img {max-width: 320px; border: 1px dashed #eae9e8;} #product_detail .pdis_image {width: 160px; height: 125px; overflow:hidden; margin-bottom: 10px;} #product_detail .pdis_image img {max-width: 160px; max-height: 125px; border: 1px dashed #eae9e8;} #related_products {width: 100px; float: right;} #related_products h2 {font-size: 20px; font-family: "courier"; font-weight: normal; margin-bottom: 10px;} #related_products .related_product {width: 100px; margin-bottom: 10px;} #related_products .related_product .rp_image {width: 92px; height: 71px; border: 1px dashed #eae9e8; overflow:hidden; margin-bottom: 10px;} #related_products .related_product .rp_image img {max-width: 92px; min-height: 71px;} #related_products .related_product p {margin-bottom: 0;} #related_products .related_product p.price{font-family: "courier"; font-size: 18px; color: #727272; font-weight: bold;} #related_products .related_product p.sale_price{font-family: "courier"; font-size: 18px; color: #bc6057; font-weight: bold;} /* Product Quick View */ #quick_view {width: 640px; padding: 20px; height: 250px;} #quick_view p {margin-bottom: 10px;} #quick_view #quick_buy p.sale_price {color: #bc6057; font-size: 26px; font-family: "courier";} #quick_view #quick_buy p.regular_price {font-size: 18px;} #quick_view #quick_buy h1 {margin-bottom: 10px;} #quick_view #quick_images {float: left; margin-right: 10px;} #quick_view #quick_buy {width: 275px; float: left;} #quick_view #qi_main {margin-bottom: 10px;} #quick_view #qi_main img {max-width: 320px; border: 1px dashed #eae9e8;} /* Blog */ h1.blog_title {background: url(/images/site/line_horiz.png) bottom no-repeat; padding-bottom: 10px; margin-bottom: 10px;} #main_content .blog_summary {background: url(/images/site/line_horiz.png) bottom no-repeat; padding-bottom: 10px; margin-bottom: 10px;} #main_content .blog_summary p.date {margin-bottom: 0; font-family: "courier"; font-size: 12px;} #main_content .blog_summary p.title {font-size: 16px; margin-bottom: 0; font-family: "helvetica";} /* Footer */ #footer {height: 250px; width: 940px; background: url(/images/site/footer_lines.png) no-repeat; position: relative; margin-bottom: 5px;} #footer h3 {font-size: 16px; color: #6e6e72; font-weight: normal; font-family: "courier"; margin-bottom: 5px; text-transform: uppercase;} #footer ul {list-style: none;} #footer ul li {margin-bottom: 1px;} #newsletter {width: 180px; position: absolute; top: 40px; left: 20px;} #newsletter_form {margin-bottom: 15px;} #newsletter_form input {color: #727272; background: url(/images/site/news_bar.jpg) no-repeat; width: 170px; height: 30px; padding: 0 10px; margin-bottom: 5px;} #newsletter_form input.submit {background: url(/images/site/news_btn.jpg) no-repeat; width: 72px; height: 20px; text-indent: -9999px;} #about {width: 180px; position: absolute; top: 40px; left: 300px;} #products {width: 180px; position: absolute; top: 40px; left: 470px;} #customer_service {width: 180px; position: absolute; top: 40px; left: 740px;} /* Search Results */ .search_image {width: 160px; height: 120px; float: left; margin-right: 10px; overflow: hidden;} .search_image img {max-width: 160px; max-height: 120px; border: 1px dashed #eae9e8;} .search_text {margin-bottom: 20px; width: 590px; float: right;} .search_text p.sale_price {color: #bc6057; font-size: 26px; font-family: "courier"; margin-bottom: 10px;} .search_results p.regular_price {font-size: 18px;} /* Account Page */ #account h2 {margin-bottom: 10px;} #account input.submit {background: url(/images/site/news_btn.jpg) no-repeat; width: 72px; height: 20px; text-indent: -9999px; border: none; cursor: pointer;} #billing_info label {width: 150px; display: block; float: left;} #billing_info input {background: #e7ecf1; border: 1px dashed #eae9e8; padding: 3px; width: 200px;} #customer_info label {width: 120px; display: block; float: left;} #customer_info input {background: #e7ecf1; border: 1px dashed #eae9e8; padding: 3px; width: 200px;} #transaction_history p {margin-bottom: 0;} /* Email To Friend */ #email_friend {padding: 20px;} #email_friend h1 {margin-bottom: 10px;} #email_friend input.submit {background: url(/images/site/news_btn.jpg) no-repeat; width: 72px; height: 20px; text-indent: -9999px; border: none; cursor: pointer;} #email_friend p {margin-bottom: 10px;} #email_friend label {width: 150px; display: block; float: left;} #email_friend input {background: #e7ecf1; border: 1px dashed #eae9e8; padding: 3px; width: 250px; color: #727272;} #email_friend textarea {background: #e7ecf1; border: 1px dashed #eae9e8; padding: 3px; width: 350px; color: #727272; height: 100px;} /* Copyright */ #copyright {width: 940px; text-align: center; margin-bottom: 10px;} /* Message Box */ #message_box {width: 500px; background: #fefcf9; padding: 20px 20px 50px 20px; border: 1px dashed #eae9e8;} /* FoxyCart */ #fc_checkout_container {margin: 0 0 0; padding: 30px 0 0; background: none;} #fc_receipt_container {margin: 0 0 0; padding: 40px 0 0; background: none;} #fc_checkout_cart {width:47%; margin-top:70px; margin-bottom:25px; float:right;} #fc_address_shipping_container h2 {background-image:url(/images/foxycart/checkout-step2a-address.png);} #fc_cancel_continue_shopping {margin-bottom: 20px;} #fc_complete_order_button {background-image:url(/images/foxycart/button-confirm-order.png);} #fc_receipt_links a#fc_receipt_continue_link { width:97px; margin:0 30px 0 0; float:left; background-image:url(/images/foxycart/button-continue.png);} div#fc_continue a.fc_link_nav {background-image:url("/images/foxycart/button-continue.png");} #fc_receipt_general_container h2 {background-image:url("/images/foxycart/receipt-general.png");} #fc_receipt_order_container h2 {background-image:url("/images/foxycart/receipt-order.png");} #fc_receipt_billing_container h2 {background-image:url("/images/foxycart/receipt-billing.png");} #fc_receipt_shipping_container h2 {background-image:url("/images/foxycart/receipt-shipping.png");} #fc_receipt_links a#fc_receipt_print_link {background-image:url("/images/foxycart/receipt-print.png");float:left;margin:0 30px 0 0;width:164px;} #fc_shipping_result a {color: #6489a7 !important; font-weight: bold !important;} /* ColorBox Core Style The following rules are the styles that are consistant between themes. Avoid changing this area to maintain compatability with future versions of ColorBox. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:visible;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} /* ColorBox example user style The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, so that the structure easier to understand. */ #cboxOverlay{background:#000;} #colorbox{} #cboxTopLeft{width:14px; height:14px; background:url(/images/colorbox/controls.png) 0 0 no-repeat;} #cboxTopCenter{height:14px; background:url(/images/colorbox/border.png) top left repeat-x;} #cboxTopRight{width:14px; height:14px; background:url(/images/colorbox/controls.png) -36px 0 no-repeat;} #cboxBottomLeft{width:14px; height:43px; background:url(/images/colorbox/controls.png) 0 -32px no-repeat;} #cboxBottomCenter{height:43px; background:url(/images/colorbox/border.png) bottom left repeat-x;} #cboxBottomRight{width:14px; height:43px; background:url(/images/colorbox/controls.png) -36px -32px no-repeat;} #cboxMiddleLeft{width:14px; background:url(/images/colorbox/controls.png) -175px 0 repeat-y;} #cboxMiddleRight{width:14px; background:url(/images/colorbox/controls.png) -211px 0 repeat-y;} #cboxContent{background:#fff;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(/images/colorbox/loading_background.png) center center no-repeat;} #cboxLoadingGraphic{background:url(/images/colorbox/loading.gif) center center no-repeat;} #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;} #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(/images/colorbox/controls.png) 0px 0px no-repeat; width:23px; height:23px; text-indent:-9999px;} #cboxPrevious{left:0px; background-position: -51px -25px;} #cboxPrevious.hover{background-position:-51px 0px;} #cboxNext{left:27px; background-position:-75px -25px;} #cboxNext.hover{background-position:-75px 0px;} #cboxClose{right:0; background-position:-100px -25px;} #cboxClose.hover{background-position:-100px 0px;} .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;} .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;} /* Form Validation */ .formError{position:absolute;top:300px;left:300px;padding-bottom:13px;display:block;z-index:5000;cursor:pointer;} #debugMode{background:#000;position:fixed;width:100%;height:200px;top:0;left:0;overflow:scroll;opacity:0.8px;display:block;color:#fff;font-size:14px;z-index:100000;padding:10px;} .ajaxSubmit{background:#55ea55;border:1px solid #999;display:none;padding:20px;} .formError .formErrorContent{background:#512d20;color:#fff;width:150px;font-family:tahoma;font-size:11px;border:2px solid #ddd;box-shadow:0 0 6px #000;-moz-box-shadow:0 0 6px #000;-webkit-box-shadow:0 0 6px #000;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;padding:4px 10px;} .formError .formErrorArrow{position:absolute;bottom:0;left:20px;width:15px;height:15px;z-index:5001;} .formError .formErrorArrowBottom{top:0;margin:-6px;} .formError .formErrorArrow div{border-left:2px solid #ddd;border-right:2px solid #ddd;box-shadow:0 2px 3px #444;-moz-box-shadow:0 2px 3px #444;-webkit-box-shadow:0 2px 3px #444;height:1px;background:#512d20;line-height:0;font-size:0;display:block;margin:0 auto;} .formError .formErrorArrowBottom div{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;} .formError .formErrorArrow .line10{width:15px;border:none;} .formError .formErrorArrow .line9{width:13px;border:none;} .formError .formErrorArrow .line8{width:11px;} .formError .formErrorArrow .line7{width:9px;} .formError .formErrorArrow .line6{width:7px;} .formError .formErrorArrow .line5{width:5px;} .formError .formErrorArrow .line4{width:3px;} .formError .formErrorArrow .line3{width:1px;border-left:2px solid #ddd;border-right:2px solid #ddd;border-bottom:0 solid #ddd;} .formError .formErrorArrow .line2{width:3px;border:none;background:#ddd;} .formError .formErrorArrow .line1{width:1px;border:none;background:#ddd;} .greenPopup .formErrorContent,.greenPopup .formErrorArrow div{background:#33be40;} .blackPopup .formErrorContent,.blackPopup .formErrorArrow div{background:#393939;color:#FFF;}