/** * Stylesheet.css DEV * CSS used for SatinSmooth.com * @author Yoonjin Lee, Tony Collings, Hayley King * @version 1.2 * */ /* HTML OVERRIDES ----------------------------------------------------------------- */ html, body, h1, h2, h3, h4, h5, h6, form, fieldset, a, element { margin: 0px; padding: 0px; border: 0px; } body{ margin:5px 0px; padding: 0px; background-color:#FFFFFF; font-family : Arial, Helvetica, sans-serif; font-size: 12px; font-size-adjust:none; /* font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; */ text-align: center; /* Remove to left align again */ } a:link, a:visited { color: #3a0c6b; text-decoration: none; } a:hover, a:active { color: #3a0c6b; text-decoration: underline; } h3 { font-weight: bold; font-size: 12px; } table{font-size: 100%; color: #3a0c6b; } /* MODIFIERS ----------------------------------------------------------------- */ div.clear { font-size: 1px; line-height: 1px; clear: both; } div.spacer { height: 1px; font-size: 1px; line-height: 1px; clear:both; } /* LAYOUT ----------------------------------------------------------------- */ .copyright {margin-top: 10px; color: #999999; font-size: 11px; } /* COOLMenu.js */ /* Javascript Injection
*/ div#cmmenu1_ , ilayer#cmmenu1_{ float: left; margin-top: -5px; } /* Accomodates 5px deep rounded corners */ #container-menu { background:#3A0C6B; font-size: 14px; letter-spacing: 1px; margin-top:0px; padding: 0px; height:25px; text-align: center; vertical-align: middle; padding-left: 20px; /* Too butt the menu out a bit */ } .root_ON, .lvl0_ON { color: #FFF; font-size: 13px; text-decoration : none; line-height: 30px; vertical-align: middle; text-align: left; font-weight: normal; padding-left: 10px; } .root_OVER, .lvl0_OVER { color: #3A0C6B; font-size: 13px; text-decoration : none; line-height: 30px; vertical-align: middle; text-align: left; font-weight: normal; padding-left: 10px; } .root_OVER { font-weight: bold; }/* .root_ON, made font size larger, bold no longer needed */ /* Rounded Corners Effect */ b.rtop, b.rbottom{display:block;background: #FFF} b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #D0B9E6} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px} b.menu_rtop, b.menu_rbottom{display:block;background: #FFF} b.menu_rtop b, b.menu_rbottom b{display:block;height: 1px; overflow: hidden; background: #3A0C6B; } b.menu_rtop b.r4, b.menu_rbottom b.r4{margin: 0 1px;height: 2px} b.menu_rtop { margin-top: 5px; } /* To affect white gap between banner and menu /* Rounded Corners Effect */ b.rtop, b.rbottom{display:block;background: #FFF} b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #D0B9E6} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px} b.menu_rtop, b.menu_rbottom{display:block;background: #FFF} b.menu_rtop b, b.menu_rbottom b{display:block;height: 1px; overflow: hidden; background: #3A0C6B; } b.menu_rtop b.r4, b.menu_rbottom b.r4{margin: 0 1px;height: 2px} b.menu_rtop { margin-top: 5px; } b.rtop, b.rbottom{display:block;background: #FFF} b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #D0B9E6} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px} b.menu_rtop, b.menu_rbottom{display:block;background: #FFF} b.menu_rtop b, b.menu_rbottom b{display:block;height: 1px; overflow: hidden; background: #3A0C6B; } b.menu_rtop b.r4, b.menu_rbottom b.r4{margin: 0 1px;height: 2px} b.menu_rtop { margin-top: 5px; } /* b.splash_rtop, b.splash_rbottom{display:block;background: #E7E7E7} b.splash_rtop b, b.splash_rbottom b{display:block;height: 1px; overflow: hidden; background: #D0B9E6} b.splash_rtop b.r4, b.splash_rbottom b.r4{margin: 0 1px;height: 2px} b.splash_footer_rtop, b.splash_footer_rbottom{display:block;background: #E7E7E7} b.splash_footer_rtop b, b.splash_footer_rbottom b{display:block;height: 1px; overflow: hidden; background: #FFF; } b.splash_footer_rtop b.r4, b.splash_footer_rbottom b.r4{margin: 0 1px;height: 2px} b.splash_footer_rtop { margin-top: 5px; } */ #search_results { background-color: #e9e4f0; padding: 5px;} #search_feedback {background-color: #fff; color: #3a0c6b; border: 1px solid #a0a0a4; padding: 8px; margin-bottom: 5px; } .category_wrapper { margin-bottom: 10px; } .category_title { background-color: #9a82b3; color: #fff; font-weight: bold; padding: 8px; font-size: 1.2em;} .category_title a:link, .category_title a:visited {color: #fff; text-decoration: none; } .category_title a:active, .category_title a:hover {color: #fff; text-decoration: none ;} .products_wrapper { text-align: center; vertical-align: top; } .product_thumbnail{ width: 130px; } table#product_row tr td{ vertical-align: top; } .thumb_image {background-color: #fff; text-align: center; border: 1px solid #a0a0a4; } .thumb_meta {color: #3a0c6b; text-align: center; padding: 5px; font-size: 0.8em; } .thumb_meta a:link, .thumb_meta a:visited { color: #3a0c6b; text-decoration: none ;} .thumb_meta a:active, .thumb_meta a:hover { color: #3a0c6b; text-decoration: underline ;} .dedicated_links { margin-top: 10px; } .dedicated_links ul { margin: 5px 20px; color: #3a0c6b;}. .dedicated_links ul li a:link, .dedicated_links ul li a:visited { color: #3a0c6b; text-decoration: none; } .dedicated_links ul li a:active, .dedicated_links ul li a:hover { color: #3a0c6b; text-decoration: underline; } /* SITEMAP */ .no_results { margin-left: 5px; } .depilatory_products, .spa_products, .furniture, .body_collection {float: left; border-left: 1px solid #e9e4f0; padding: 10px; width: 155px; } .contents {float: left; border-left: 1px solid #e9e4f0; padding: 10px; width: 180px; } .products_title, .contents_title {background-color: #e9e4f0; padding: 3px 10px; } .sitemap_wrapper h2 {font-size: 1.4em; margin: 0px; } .sitemap_wrapper h3 {font-size: 1.2em; margin: 0px;} span.root_cat { display: block ; margin-left: 0px; clear: both; font-size: 1.0em; margin: 2px 0px; font-weight: bold; } span.sub_cat {display: block ; margin-left: 10px; clear: both; font-size: 0.9em; font-weight: normal; } span.sub_cat span.sub_cat {display: block ; margin-left: 20px; clear: both; font-size: 0.9em; font-weight: normal; } .sitemap_wrapper{ clear: both; color: #3a0c6b; padding: 20px; } /* 990px - 40 = 940px */ .products_sitemap {float: left; width: 710px; } /* Left Column */ .contents_sitemap {float: right; width: 200px; } /* Right Column */ .sitemap_wrapper a:link, .sitemap_wrapper a:visited {color: #3a0c6b; text-decoration: none; } .sitemap_wrapper a:active, .sitemap_wrapper a:hover {color: #3a0c6b; text-decoration: underline; } /* SPLASH PAGE */ /* Version 2.0 */ body#splash {text-align: center; } body#splash div#wrapper {width: 990px; margin: 0 auto; text-align: center; } div.splash_panel { background: #d0b9e6 url("img/splash_background.jpg") no-repeat center center; width:100%; text-align: center; } #logo_link_wrapper { } div#logo img {margin-left: 30px; } ul#links li {list-style-type: none; display: inline; color: #fff; border-right: 1px solid #fff; padding: 0px 5px; } ul#links li.lastitem {border-right: none; } ul#links {display: block; margin: 10px 0px 0px 0px; font-weight: bold; text-align: center; } ul#links li a {color: #fff;} div#micro_sites {background-color: #d0b9e6 ; } b.splash_rtop, b.splash_rbottom{display:block;background: #fff} b.splash_rtop b, b.splash_rbottom b{display:block;height: 1px; overflow: hidden; background: #d0b9e6 ; } b.splash_rtop b.r4, b.splash_rbottom b.r4{margin: 0 1px;height: 2px} b.splash_rtop { margin-top: 5px; } /* SPLASH PAGE */ /* Version 1.0 */ /* .container-splash-base { padding: 8px; background:#E7E7E7; width:990px; border:0px solid #E7E7E7; } .container-splash-main { background:#D0B9E6; width:100%; } .container-splash-footer { background:#FFF; width:100%; height: 75px; text-align:center; } .splash_link { font-weight: bolder; font-family: Arial; font-size: 12px; color: #FFF; } .splash_link a:link, .splash_link a:visited { text-decoration: none; color: #FFF; } .splash_link a:hover, .splash_link a:active { color:#FFF; text-decoration:underline; } */ /* HOME PAGE / ABOUT US PAGE */ div.pink { } /* Wrapper */ #home_image, #home_text { float: left; margin: 0px; padding: 0px; } #home_image { width: 480px; height: 360px; background: url('/satinsmooth/images/home_nonFLASH.jpg') no-repeat 0% 0%; text-align: center; } #home_image p { margin-top: 320px; font-size: 10px; } #container-main-cat-image { margin-bottom: 5px; } #container-main-cat-image img { float: left; margin: 0px; padding: 0px; _float: none; } #container-main-subcat-image { text-align: center; margin:5px 0px 0px 0px; padding:0px; } #container-main-subcat-image img { border-width: 2px; margin:0px 2px 0px 2px; padding:0px 0px 0px 0px; } /* home_text { margin-left: 480px; text-align: center; padding: 15px; line-height: 160%; font-size: 14px; } ( style if content is text ) */ #home_text a:link, #home_text a:visted { color: #3a0c6b; text-decoration: underline; } #home_promos { float: left; display: inline; padding: 0px; margin: 5px 0px; } #home_promos img { float: left; } /* CONTENT PAGES */ /* max-width right = 795px */ #content_title { background-color: #fff; border-bottom: 2px solid #8962a8; margin: 7px 0px 5px 0px; } p.footnote { color: #663e91; font-size: 11px; } /* waxing across the nation - needed some special attention due to our use of OTL and the fact that IE can't even handle simple anchor links */ #watn_wrapper { overflow: hidden; height: 300px; /* needs a height to do the scrolling bit properly */ } #watn_nav { margin-bottom: 20px; } .watn_anchor { float: left; clear:both; } .watn_addy { float: left; width: 200px; padding: 10px; } /* links */ #content_page_content { background-color: #fff; color: #3a0c6b; padding-left: 5px; } #content_page_content a:link, #content_page_content a:visited, #content_page_content a:active, #content_page_content a:hover { font-weight: bold; } #content_page_content .kits-thumbnail-model a:link, #content_page_content .kits-thumbnail-model a:active, #content_page_content .kits-thumbnail-model a:hover, #content_page_content .kits-thumbnail-model a:visited { font-weight: normal; } /*#content_page_content a { text-decoration: underline; color: #3a0c6b; } no need for seperate declaration, same as general link */ #cnt-body { margin: 5px 20px 10px 0px; padding: 0px;} .purple, .white { background: #f9f5ff; padding: 5px 20px 5px 5px; height: 127px;} .white { background: #FFF;} #pink { height: 271px; display: inline; overflow: hidden; } .purple img, .white img { margin: 0px 5px 5px 0px;padding: 0px;border: 1px solid #999; float: left; } #pink img { float: left; } .testimonial #purple, .testimonial #white { padding: 15px 20px 15px 15px; height: auto; width: auto; background: #f9f5ff; } .testimonial #white { background: #FFF;} .desc { margin-left: 120px; margin-top: 25px; padding-right: 10px; } /* .desc a:link, .desc a:visited, .desc a:hover, .desc a:active { color: #3A0C6B; text-decoration: underline; padding: 0px; } no need for seperate declaration, same as general link */ .title a:link { margin-bottom: 5px; padding: 0px; } .kits-thumbnail-main-wrapper { float:left; margin: 5px 20px 15px 0px; padding-bottom: 10px; width: 240px; height: 305px; } .kits-thumbnail-wrapper { height: 200px; } .kits-thumbnail-sub-category-name { background-color:#E9E4F0; color:#3A0C6B; font-weight:bold; margin: 0px; padding: 3px 0px 3px 8px; } .kits-thumbnail-name, .kits-thumbnail-model, .kits-thumbnail-links { padding-left: 8px; } .kits-thumbnail-desc { padding: 5px 0px 10px 8px; } .kits-thumbnail-links { float: left; margin-right: 15px; } /* FAQ PAGES */ /* Redudant as it's overridden later on #cnt-thumbnail-wrapper{ float:left; width:100%; margin:0px 0px 0px 0px; background-color:#FFF; padding:0px 0px 0px 0px; border:0px solid #FFC; } */ .cnt-thumbnail-sub-category-name { background-color:#E9E4F0; border:0px solid black; color:#3A0C6B; float:left; font-weight:bold; margin-top: 5px; padding: 5px 0px 5px 0px; text-indent:10px; width:100%; font-size: 14px; } .cnt-thumbnail-images-faqs img { display: block; clear: both; border: 1px solid #999; margin: 10px 0px;} .cnt-thumbnail-images-faqs { float:left; overflow: hidden; width: 112px; /* 110px (image width) + 2px ( 2 x 1px border ) */ margin: 5px 10px 10px 5px; } /* Need to override values. FAQ needs different handling */ #faq_cnt #content_title { margin-right: 149px; _margin-right: 158px; /* WLTB Proper Box Model in IE6 !!! */ } #faq_cnt #container-main-complementary { float: right; text-align: center; padding: 0px; margin: 0px; padding-top: 10px; _margin-top: 5px; } /* */ #complementary-faq-item { font-size:11px; color:#3A0C6B; width: 100%; text-align: center; border:0px solid #FFC; margin-left: -2px; _margin-left: 0px; } #complementary-faq-item img { border: 1px solid #999; margin: 0px; } .cnt-thumbnail-wrapper { margin: 0px; padding: 0px; width: 765px; } .cnt-thumbnail-wrapper a, #cnt-thumbnail-wrapper a:link, #cnt-thumbnail-wrapper a:visited { text-decoration: none; border: 0px; } .cnt-thumbnail-wrapper a:hover, #cnt-thumbnail-wrapper a:active { text-decoration: underline; border: 0px;} .cnt-thumbnail-images { float:left; margin: 5px 5px; } .cnt-thumbnail-images img { margin: 5px 12px 9px 9px; border: 1px solid #999; } .cnt-thumbnail-images-txt { float:left; width: 102px; margin: 5px 15px 10px 5px; } .cnt-thumbnail-images-txt img { display: block; clear: both; border: 1px solid #999; margin: 10px 0px; } .cnt-thumbnail-images-vids { float:left; width:105px; margin: 0px 15px 15px 0px; } .cnt-thumbnail-images-vids img, .cnt-thumbnail-images-dvds img { margin: 5px 7px 5px 0px; } .cnt-thumbnail-images-dvds { float:left; width:140px; margin: 0px 10px 15px 0px; } .contact { float: left; width: 135px; margin: 5px; padding-top: 10px; } .info { margin: 5px 5px 5px 130px; font-weight: bold; padding-top: 10px; } #heading { font-size: 14px; font-weight: bold; margin: 5px 0px 0px 5px; } /* FAQ PAGES */ #faq_cat_nav { width: 80%; float: left; padding: 10px 5px; background: #E9E4F0; color: #3A0C6B; } #faq_cat_name { float: left; margin: 2px 8px; } #faq_cat_nav a:link, #faq_cat_nav a:visited { text-decoration: none; font-weight: normal; } #faq_cat_nav a:hover, #faq_cat_nav a:active { text-decoration: underline; font-weight: normal; } #faq_cat_nav a.onpage { font-weight: bolder; } div.faq-container { background-color: #fff; width: 81%; border-bottom: 1px inset #8962a8; float: left; padding-bottom: 5px; } div.qa { width: 40%; float: left; padding: 13px 15px 0px 0px; } div.qimage { width: 5%; float: left; padding-top: 5px; padding-right: 10px; } #cp_2 { background-color: #f9f5ff; } .purple_cnt { background: #f9f5ff; padding: 8px 20px 5px 5px; } .purple_cnt img { padding: 0px 15px 10px 0px; } /* THUMBNAIL PAGES */ div.information { display: block; font-size: 0.9em; padding: 10px; color: #3a0c6b; margin-top: 50px; } /* MEDIA PLAYER */ body#media_player { margin: 0px; padding: 0px; } br.clear {clear: both; line-height: 1px; height: 1px; font-size: 1px; dislpay: block; } #video_wrapper{ padding: 5px; width: 760px; color: #3a0c6b; } a#logo { float: left; } body#media_player .header, body#media_player .footer { background-color: #d0b9e6; } body#media_player .header { height: 75px; /* Height of Logo */ } body#media_player .footer { padding: 10px 15px 10px 15px; margin: 0px; height: 15px; clear: both; margin-top: 5px; /* Height because IE = poop ! */ } .header ul { float: right; } .header ul li {display: inline; border: none; padding: 0px 10px; } .columns { margin: 5px 0px; background: url("img/media_bg.jpg") top left repeat-y; } .lcolumn { float: left; padding: 10px 30px 30px 30px; background: url("img/media2_bg.jpg") top left repeat-x; background-color: #ffd6e4; width: 454px; /* width(740)-right(200)-padding(60)-padding(20)-margin(6)*/ text-align: center; } hr.shaded { margin: 0px; padding: 0px; border-width: 1px; border-style: solid; border-color: #fff; border-top-color: #fcdae1; border-bottom-color: #ffffff; height: 2px; } .rcolumn { float: left; margin: 0px; margin-left: 6px; width: 240px; background-color: #fdf2f4; padding: 0px; padding-bottom: 30px; } .rcolumn h3 { background-color: #fce7ee; padding: 5px; margin: 0px; } .rcolumn h3 img { vertical-align: top; margin: 0px 5px 0px 0px;} span.file_size { color: #a08db5; } .current_movie { padding-bottom: 15px; } .current_movie a:link, .current_movie a:hover, .current_movie a:active, .current_movie a:visited { font-weight: bold; } .current_movie h2 { vertical-align: bottom; padding: 5px; font-size: 16px; } .other_movies { padding: 10px; } .other_movies ul { list-style-type: none; margin-left: 0px; } .other_movies ul li { margin-left: 5px; margin-bottom: 5px; text-align: left; } ul.left {list-style-type: none; float: left; margin: 0px; } ul.left li {display: inline; padding: 0px 10px; border-right: 1px solid #3a0c6b;} ul.right {list-style-type: none; float: right; margin: 0px; } ul.right li {display: inline; padding: 0px; border-right: 1px solid #3a0c6b; } ul.right li img {vertical-align: middle; } ul li.firstitem {padding-left: 0px; } ul li.lastitem {border-right: 0px; } div#video_help {clear: both; } .help_left a:link, .help_left a:visited { font-weight: bold; text-decoration: none; } .help_left a:hover, .help_left a:active { font-weight: bold; text-decoration: underline; } .help_left { padding: 10px; margin: 0px; text-align: left; float: left; width: 454px; } .help_right { min-width: 240px; text-align: center; float: right; } .help_right .quicktime { padding: 10px; border: 0px; } .help_right .adobe { padding-bottom: 5px; border: 0px; } /* CATEGORY PAGES */ /* NOTE : StaticIDs --------------------------------- 1 = Depliatory Products 82 = Spa Products 85 = Furniture and Equipment 83 = Body Collection */ /* PRODUCT INFO PAGES */ ul#other_info { padding: 10px; padding-left: 5px; } ul#other_info img { border: 0px; } ul#other_info li { list-style-type: none; color: #3a0c6b; margin: 10px 0px; } ul#other_info li img { vertical-align: bottom; margin: 0px 5px; } ul#other_info li span.technical_information { margin-left: 5px; color: #a58dc5; } ul#other_info a:link, ul#other_info a:visited {color: #3a0c6b; text-decoration: none; } ul#other_info a:hover, ul#other_info a:active {color: #3a0c6b; text-decoration: underline; } /* Yahoo YUI Tab View - Additional styling located in /css/yui/tabview.css */ #container-tabs { overflow:hidden; margin:25px 0px 0px 0px; } #tab { width:320px; border:0px solid black; } #tab .yui-content { padding:5px; /* pad content container */ min-height:150px; } #prod_spec, #usage_tips { color:#3A0C6B; font-weight:normal; width:305px; min-height:50px; } #prod_spec ul { margin-left: -15px; _margin-left: 30px; } #prod_spec ul li { list-style-type: disc; } #usage_tips ol { margin-left: -15px; _margin-left: 30px; } #usage_tips ol li { } #flash_content { text-align: center; } #container-logo {float: left; padding-bottom: 10px;} #vid-title { float: right; margin-right: 10px; margin-top: 10px; color: #3a0c6b; font-size: 14px; font-weight: bold; } #rule { margin: 10px 0px; border-bottom: 2px solid #E9E4F0; clear: both; } /* CUSTOMIZE YOUR WAX PAGE */ .custom_wax_wrapper { position: relative; float: left; } #wrapper_customize_left { float: left; width: 355px; border-right: 1px solid #8962a8; padding-right: 20px; } #wrapper_customize_left img { margin: 0px 30px 0px 0px; border: 0px; } #wrapper_customize_right { float: left; width: 355px; padding-left: 30px; overflow: hidden; padding-right: 10px; } .customize-category-name { background-color:#E9E4F0; color:#3A0C6B; font-weight:bold; padding: 3px 0px 3px 8px; clear : both; } .prod_title { margin-left: 15px; margin-bottom: 5px; } /* LOCATOR */ /* Main Locator Pages */ div#info_wrapper { } div.dist_left {float: left; padding-top: 0px; padding-left: 10px; width: 220px; margin: 20px 0px; } #info_wrapper {background: #e9e4f0 url("img/locator_wrapperBg.jpg") top left repeat-x; margin-top: 8px; } img.info_icon {vertical-align: middle; padding-bottom: 2px; } #state_search, #zip_search {float: left; margin: 5px 0px 10px 30px; } #zip_search { } #search_criteria {background-color: #cdc1df; height: 80px; /* Has to be a height for IE7, weird ! */ } div.introduction {} /* Google Info. Window */ .info_leftcol {float: left; } .info_rightcol {float: left; padding-left: 10px; padding-top: 5px; } span.pagination {width: 100%; display: block; margin: 10px; font-weight: bold; padding: 5px;} span.error {display: block; padding: 10px 10px 50px 10px; } div#google_info_wrapper {margin-bottom: 10px; clear: both; } div#google_wrapper {border: 1px solid #e9e4f0; } p.reset_link {margin: 0px; background-color: #d0b9e6; font-color: #3a0c6b; width: 100%; padding: 5px; text-align: center; } p.result_summary, span.pagination {margin: 0px; padding: 10px; background-color: #cdc1df; text-align: center; } /* CLASSES & SHOWS */ #container-class-wrapper { float:left; width:900px; _width: 780px; min-height: 500px; _height: 500px; margin:0px 0px 0px 0px; /*background-color:#e9e4f0;*/ padding:0px 0px 0px 7px; border:0px solid #FFC; } .cnt-classes-sub-category-name { background-color:#E9E4F0; border:0px solid black; color:#3A0C6B; float:left; font-weight:bold; margin-top: 5px; padding: 5px 0px 5px 0px; text-indent:10px; width:100%; font-size: 14px; } .container-class-sub-category-name { background-color:#9A82B3; border:0px solid black; color:#FFFFFF; float:left; font-weight:bold; margin:5px 0px 0px 0px; padding:6px 0px 6px 0px; text-indent:10px; width:770px; } .container-class-info { float:left; text-align: left; margin:5px 15px 0px 0px; width: 235px; /* Thumbnail Width = 100px + 2px border */ padding: 8px; } #class_filter { margin-left: 10px; } #class_filter div { float: left; margin: 0px; margin-right: 15px; margin-bottom: 15px; padding: 0px; } #class_filter p { margin: 5px 0px; padding: 0px; } /* FORMS ----------------------------------------------------------------- */ /* Email a friend layer stuff */ #overlay{ z-index: 20; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } #overlay_thx { z-index: 21; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .form_wrapper {text-align: left; font: 0.8em verdana,arial,helvetica,sans-serif; margin: 5px; padding: 20px; color: #3a0c6b; background-color: #e9e4f0; } .form_wrapper form { margin: 0px; } .form_wrapper img { float: right; clear: both; } .form_wrapper p { margin: 10px 0px; } .form_wrapper h2 { font: normal 1.8em/1.7em; } .form_wrapper fieldset { border: 1px solid #d6cde3; } .form_wrapper legend {display: none; visibility: hidden;} .form_wrapper ul {list-style: none; margin: 0px; padding: 0px; } .form_wrapper li {margin: 10px 0px; text-align: left; } .form_wrapper label {width: 120px; text-align: right; margin-right: 0.5em; float: left; display: block; font-weight: bold; } /* form elements */ .form_wrapper input, .form_wrapper textarea, .form_wrapper select { color: #3a0c6b; font: 1.0em verdana,arial,helvetica,sans-serif; padding: 3px; } .form_wrapper input.textfield, .form_wrapper textarea.textfield { width: 120px; border: 1px solid #b8a7cf; } .form_wrapper select.textfield { width: 125px; border: 1px solid #b8a7cf; } .form_wrapper li.buttons {margin-left: 120px; } .form_wrapper li.buttons input{ float: left; margin: 10px 5px; font-size: 1em verdana,arial,helvetica,sans-serif; padding: 4px; } /* CONTACT US */ #application ul { } .contact_wrapper, .application_wrapper, .experience_wrapper, .review_wrapper, .purple_block { margin: 5px; padding: 10px 20px; color: #3a0c6b; background-color: #e9e4f0; width: 500px; border: 1px solid #ccc; } .application_wrapper, .experience_wrapper, .review_wrapper { width: 600px; } .contact_wrapper form, .application_wrapper form, .review_wrapper form { margin: 0px; } .contact_wrapper img, .application_wrapper img { float: right; clear: both; } .contact_wrapper p, .application_wrapper p, .review_wrapper p { font: 0.8em verdana,arial,helvetica,sans-serif; margin: 10px 0px; } .contact_wrapper h2, .application_wrapper h2, .review_wrapper h2 { font: normal 1.8em/1.7em; } .contact_wrapper fieldset {} .contact_wrapper legend, .application_wrapper legend, .experience_wrapper legend, .review_wrapper legend {visibility: none; display: none; } .contact_wrapper ul, .application_wrapper ul, .experience_wrapper ul, .review_wrapper ul {list-style: none; margin: 0px; padding: 0px; } .contact_wrapper li, .application_wrapper li, .experience_wrapper li, .review_wrapper li { font: 0.8em verdana,arial,helvetica,sans-serif; margin: 10px 0px; text-align: left; } .contact_wrapper label, .application_wrapper label, .experience_wrapper label, .review_wrapper label { width: 190px; text-align: right; margin-right: 10px; float: left; display: block; line-height: 20px; font-weight: bold; } div.experience_wrapper label.long { width: 190px; text-align: right; margin-right: 10px; margin-bottom: 5px; float: left; display: block; line-height: 12px; font-weight: bold; } .review_wrapper label { line-height: 12px; margin-bottom: 5px; } .review_wrapper li { display: block; clear: both; } .review_wrapper .edit { text-align: right; width: 100%; font-size: 11px; } body#application label.file { width: 100%; text-align: left; } body#application label.error, .error { color: #ff4040; } body#application input.error, body#application select.error, body#application textarea.error { border: 1px solid #ff4040; } /* form elements */ .contact_wrapper input, .application_wrapper input, .experience_wrapper input, .contact_wrapper textarea, .application_wrapper textarea, .experience_wrapper textarea, .contact_wrapper select, .application_wrapper select, .experience_wrapper select { color: #3a0c6b; font: 1.0em verdana,arial,helvetica,sans-serif; padding: 3px; } div.form_group { margin-bottom: 25px; } div.check_group { float: left; margin-bottom: 10px; } .contact_wrapper li, .application_wrapper li, .experience_wrapper li { clear: both; } .contact_wrapper li.buttons { margin-left: 120px; } .contact_wrapper li.buttons input { float: left; margin: 10px 5px; font: 1em verdana,arial,helvetica,sans-serif; padding: 4px; } .application_wrapper li.buttons { text-align: center; } .application_wrapper li.buttons input { font: 1em verdana,arial,helvetica,sans-serif; padding: 4px; } body#contact_us div.errors {margin: 20px 0px; margin-left: 125px;} body#contact_us input.error, body#contact_us select.error, body#contact_us textarea.error {border: 2px solid #993300; } body#contact_us .error {font-weight: bold; color: #990000; } h2.box_title {font: 1.2em verdana,arial,helvetica,sans-serif; font-weight: bold; } table#contact_numbers th {visibility: none; display: hidden;} table#contact_numbers td {text-align: right; vertical-align: top; } table#contact_numbers td.phone_number {text-align: left; font-weight: bold; padding: 2px; } /* CUSTOMIZE FORM */ .question { margin: 10px 0px 0px; font-weight: bold; } .response { margin: 0px 40px; } /*form#wax_finder .formbutton { cursor:pointer; border:outset 0px #ccc; background:#CDC0DD; color:#fff; font-weight:bold; padding: 1px 2px; margin: 10px 50px; } */ form#wax_finder .formbutton { cursor:pointer; margin: 10px 50px; } #wrapper_customize_right .heading { font-size: 14px; font-weight: bold; margin: 0px 0px 10px 0px; } /* MENUS ----------------------------------------------------------------- */ /* HEADER */ #navtop { background-color: #D0B9E6; color: #3a0c6b; } #navtop .left { float: left; padding: 5px 0px 0px 5px; width: 194px; /* 189(Logo)+10(Padding)*/ } /* Contains LOGO */ #navtop .right { text-align: right; float: right; } /* Links and Search Box */ /* Control the List Items */ #navtop .right ul { list-style-type: none; color: #3a0c6b; margin: 0px; padding: 0px; } #navtop .right li { display: inline; padding: 0px 6px 0px 3px; } #navtop .right ul.search_area li.lastitem, #navtop .right ul.content_links li.lastitem{ border: 0px; } #navtop .right ul.search_area { font-weight: normal; } ul.search_area li { border-right: 1px solid #3a0c6b;} li.lastitem { border: 0px; } #navtop .right ul.content_links li{ border-right: 1px solid #3a0c6b; } /*Positioning */ #navtop .right ul.search_area { margin: 10px 20px 10px 0px; } #navtop .right ul.content_links { margin: 27px 25px 10px 0px; } /* Links */ ul.search_area a:link, ul.search_area a:visited, ul.content_links a:link, ul.content_links a:visited {color: #3a0c6b; text-decoration: none; font-weight: bold; } ul.search_area a:active, ul.search_area a:hover, ul.content_links a:active, ul.content_links a:hover { color: #663e91 ; text-decoration: none; font-weight: bold; } /* Control the Search Box */ form#quick_find input.submit { } form#quick_find input.text_field { border: 1px solid #3a0c6b; color: #b6a7cb; width: 150px; font-size: 11px; padding: 2px 10px; margin: 0px 10px; } /* LEFT NAV */ #major, #major a{ font-size:14px; font-weight:bold; color:#3A0C6B; margin:5px 0px 5px 5px; padding-top: 15px; text-decoration:none; border:0px solid #FFC; } #cat_name_divider { margin:5px 5px; background: #d0b9e6; padding: 0px; height: 1px; } #cat_name, #cat_name_on { font-weight:normal; margin:0px 0px 0px 5px; padding: 0px; overflow:visible; } #cat_name_on, sub_cat_name_on { font-weight: bold; background-image:url('img/left_nav/arr2_sw.gif'); background-repeat:no-repeat; background-position:0px 1px; } #sub_cat_name_divider { background-color:#FFF; margin:1px 5px 1px 10px; height:1px; } #sub_cat_name, #sub_cat_name_on { font-weight:normal; margin:0px 0px 2px 20px; padding: 0px 0px 0px 0px; overflow:visible; } #cat_name a, #sub_cat_name a, #cat_name_on a, #sub_cat_name_on a { color:#3A0C6B; text-decoration:none; padding:0px 0px 0px 8px; background-image: none; } #cat_name a:hover, #sub_cat_name a:hover { text-decoration:none; font-weight:bold; padding:0px 0px 0px 8px; background-image:url('img/left_nav/arr2_sw.gif'); background-repeat:no-repeat; background-position:0px 1px; border:0px solid #FFC; } /* FOOTER */ #footer {text-align:center; height:20px; color:#3A0C6B; font-weight:normal; padding: 2px; padding-top: 8px; clear: both; } #footer img { vertical-align: middle; padding: 0px; margin-top: -8px; _margin-top: -5px; } #footer a:link, #footer a:visited{ text-decoration:none;color:#3A0C6B;} #footer a:active, #footer a:hover{ text-decoration:none; color:#663e91;} #footer ul {margin-top: 3px; padding: 0px; } #footer ul li { list-style-type: none; display: inline; padding: 0px 8px; } li.sitemap {margin-right: -3px; } li.terms {} /* MISCALLANEOUS ----------------------------------------------------------------- */ /* LEGACY ----------------------------------------------------------------- */ .boxText { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 10px; } .errorBox { font-family : Verdana, Tahoma, Arial, sans-serif; font-size : 10px; background: #F4E2EE; font-weight: bold; display: inline; } #container-base { /*margin:5px 0px 0px 5px;*/ margin: 0px auto; /* Remove to left align again */ padding: 0px; background:#FFF; width: 990px; border:0px solid #006600; text-align: left; } #container-main { /* min-height: 200px; */ padding: 0px; margin-top:5px; background:#FFF; border:0px solid #009933; } #container-main-product-menu{ background: url('img/left_nav/content_grad.jpg') #fbf9fc repeat-x left top; /*background-color:#e9e4f0;*/ float: left; width: 190px; /*190*/ min-height:200px; margin: 0px 5px 15px 0px; padding: 0px 0px 0px 0px; border:0px solid PINK; } #container-main-right-of-product-menu{ float: left; width: 795px; /*795 = Total Width */ _width: 795px; /* IE */ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border:0px solid red; } /* Breadcrumb Area */ #container-main-product-breadcrumb{ background-color: #e9e4f0; line-height: 20px; /* Height of Icons */ vertical-align: middle; padding: 5px 10px; font-size: 11px; } #container-main-product-breadcrumb a:link, #container-main-product-breadcrumb a:visited{ color:#3A0C6B; font-weight: normal; text-decoration:none; } #container-main-product-breadcrumb a:active, #container-main-product-breadcrumb a:hover { color: #3A0C6B; text-decoration:underline; } #breadcrumb{ float:left; width: 555px; /* Total Width available = 795 */ line-height: 14px; /* Height of Icons */ vertical-align: middle; color:#836D9F; padding-top: 3px; } #breadcrumb-email-print{ float: right; text-align: right; line-height: 20px; /* Height of Icons */ vertical-align: middle; width: 215px; /* Total Width available = 795 */ } /* To fudge with the icons for visual alignment cross browser */ #breadcrumb-email-print img.email, #breadcrumb-email-print img.print { margin-top: -3px; _margin-top: 0px; } #container-main-product { clear:both; } #breadcrumb-email-print img { vertical-align: middle; margin: 0px 5px; } #breadcrumb-email-print a:link, #breadcrumb-email-print a:visited{ color:#8e7ba9; } #breadcrumb-email-print a:active, #breadcrumb-email-print a:hover{ color:#8e7ba9; } /* End of Breadcrumb Area */ #container-below-breadcrumb{ float:left; margin:5px 0px 0px 0px; padding:0px; } /* #container-below-breadcrumb-thumbnail{ float:left; margin:5px 0px 0px 0px; background-color:#e9e4f0; padding:0px; } */ #container-thumbnail-wrapper{ float:left; width:100%; min-height: 500px; _height: 500px; margin:0px 0px 0px 0px; background-color:#e9e4f0; padding:0px 0px 0px 7px; border:0px solid #FFC; } #container-thumbnail-category-name { background-color:#FFFFFF; border:1px solid #A0A0A4; color:#3A0C6B; float:left; font-weight:bold; height:13px; margin:5px 0px 0px 0px; padding:5px 0px 5px 0px; width:769px; text-indent:9px; } #container-thumbnail-category-name a { color:#3A0C6B; text-decoration:none; } #container-thumbnail-sub-category-name { background-color:#9A82B3; border:0px solid black; color:#FFFFFF; float:left; font-weight:bold; margin:5px 0px 0px 0px; padding:6px 0px 6px 0px; text-indent:10px; width:770px; } #container-thumbnail-images { width:780px; text-align: left; } #nav { float:left; width:62px;height:62px; } #nav a, #nav img { color:#3A0C6B; font-size:11px; font-weight:bold; text-decoration:none; border:0px; } #thumbnail-images { float:left; height: 200px; /* Might need to tweak with this value to avoid 2nd/3rd lines center-aligning. */ text-align: left; margin:5px 9px 0px 0px; width:102px; /* Thumbnail Width = 100px + 2px border */ padding-right: 10px; } /*#thumbnail-images b { float:left; font-weight:bold; }*/ #thumbnail-images-info { color:#3A0C6B; font-size:11px; margin-top: 5px; padding-left: 10px; } #container-main-product-info { width: 649px; float:left; margin:0px 5px 0px 0px; } /* Complimentary Column is 140px wide. */ #container-main-product-info-image { float:left; width:300px; margin-right:15px; border:1px solid #A0A0A4; } #container-main-product-info-prev-next{ border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style: solid; border-color:#A0A0A4; } a img.prev_next { border:0px solid #A0A0A4; margin:0px; padding:0px; } #container-main-product-info-other{ float:left; width:300px; font-weight:normal; color:#3A0C6B; border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:solid; border-color:#A0A0A4; text-align: left; } #container-main-product-info-description { float:left; width:325px; /*325*/ } #container-main-product-info-description p.name{ color:#3A0C6B; font-weight:bold; font-size:14px; margin: 3px 0px 3px 0px; } #container-main-product-info-description p.model { color:#3A0C6B; font-weight:normal; margin: 0px 0px 10px 0px; } #container-main-product-info-description-summary { color:#3A0C6B; font-weight:normal; width:315px; min-height:50px; } #container-main-complementary { font-size:11px; text-align:center; background-color:#e9e4f0; padding-bottom: 10px; float:left; width:140px; min-height: 400px; } #complementary-heading { text-align:center; font-size:14px; font-weight:bold; color:#3A0C6B; margin: 5px 0px 0px 0px; padding:5px 0px 5px 15px; float:left; } #complementary-item { font-size:11px; color:#3A0C6B; text-align:left; float:left; padding:0px 0px 15px 20px; margin: 0px; width:100px; /*150*/} #complementary-item img { border:1px solid #A0A0A4; margin-bottom: 5px; } /* Start Mac IE5 filter \*/ #container-main-product-menu, #container-main-right-of-product-menu, #container-main-complementary,#container-below-breadcrumb-thumbnail, #container-faq-complementary { padding-bottom: 32767px !important; margin-bottom: -32767px !important; } #container-main-product,#container-below-breadcrumb { background-color:#ffffff; overflow: hidden; /* This hides the excess padding in non-IE browsers */ } /* we need this for IE 5.01 - otherwise the wrapper does not expand to the necessary height (unless fixed, this problem becomes even more acute weirdness as the method is enhanced */ #container-main-product,#container-below-breadcrumb,#product_menu_bkg{ /* Normally a Holly-style hack height: 1% would suffice but that causes IE 5.01 to completely collapse the wrapper - instead we float it */ float: left; /* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5 sometimes (I saw it happen many moons ago) makes the width of wrapper too small the float: none with the comment is ignored by 5.01, 5.5 and above see it and carry on about their business It's probably fine to just remove it, but it's left here just in case that many moons ago problem rears its head again */ float/**/: none; } /* easy clearing */ /* #container-main-product:after,#container-below-breadcrumb:after{ content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; height: 0; clear: both; visibility: hidden; } */ #container-main-product,#container-below-breadcrumb{ display: inline-block; } /*\*/ #container-main-product,#container-below-breadcrumb{ display: block; } /* ==================================== */ #container-navbar-footer { /*background-image:url(content_images/btm_nav.png);*/ background-color:#D0B9E6; margin-top:5px; border:0px solid #FFC; clear:both; } /** * #container-navbar_top */ /** * #container-navbar-footer */ /** * DHTML Menu div { font-family : Tahoma,Helvetica,Verdana; } #menu{ font-family : Tahoma,Helvetica,Verdana; } .clsCMOn { color: #CCDDEE; font-size : px; text-decoration : none; padding: 3px 0 0 4px; color: white; text-align: left; font-weight: bold; letter-spacing: 0px;} .clsCMOver { color: black; font-size : px; text-decoration : none; padding: 3px 0 0 4px; color: black; text-align: left; font-weight: bold; letter-spacing: 0px;} */ /* * message box */ .messageBox { font-size: 12px; } .messageStackError, .messageStackWarning {font-size: 12px;background-color: #F4E2EE;} .messageStackSuccess { font-size: 12px; background-color: #f2fff7; } /* * input requirement */ .inputRequirement { font-size: 10px; color: #ff0000; } /* Product Tab Navigation */ .shadetabs1{ /*border: 1px solid #cccccc;*/ border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; height:150px; color:#3a0c6b !important; background-color:#edf5ff; /*margin-bottom: 1em;*/ } .shadetabs{ /*border: 1px solid gray;*/ /*margin-bottom: 1em;*/ } .shadetabs ul{ padding: 3px 0; margin-left: 0; margin-top: 1px; margin-bottom: 0; list-style-type: none; text-align: left; /*set to left, center, or right to align the menu as desired*/ } .shadetabs li{ display: inline; margin: 0; } .shadetabs li a{ text-decoration: none; padding: 3px 7px; border: 1px solid #cccccc; /*border-top: 1px solid #cccccc; border-right: 1px solid #cccccc;*/ color:#3a0c6b !important; } .shadetabs li a:visited{ color: #2d2b2b; text-decoration: none; } .shadetabs li a:hover{ color: #2d2b2b; } .shadetabs li.selected{ position: relative; background-color: #edf5ff !important; } .shadetabs li { background-color: #fff; } .shadetabs li.selected a{ /*selected main tab style */ /*background-image: url(media/shadeactive.gif);*/ border-bottom-color:#edf5ff ; } .shadetabs li.selected a:hover{ /*selected main tab style */ text-decoration: none; }