/* * * $Id: core.css * $Description: CSS used for BabylissPRO.com * $Author: Tony Collings, Hayley King * $Version: 1.0 * */ /* HTML OVERRIDES ----------------------------------------------------------------- */ body { margin: 0px; padding: 0px; width: 100%; height: 100%; text-align: center; background-color: #FFFFFF; } ul,ol { margin: 0px; } .clear { font-size:1px; line-height: 1px; clear: both; } a:link, a:visited, a:active, a:hover { color: #fff; text-decoration: none; } .print_block, .print_inline, .print_float_right { display: none; visibility: hidden; } /* TYPOGRAPHY ----------------------------------------------------------------- */ body { font-family: Arial, Helvetica, sans-serif; font-size: 0.7em; } /*, input, select, textarea */ /*input, select, textarea { padding: 2px; font-size: 1.0em; } */ #footer { color: #fff; } /*#header a:link, #header a:visited, #footer a:link, #footer a:visited, #breadcrumb a:link, #breadcrumb a:visited { color: #fff; text-decoration: none; } #header a:active, #header a:hover, #footer a:active, #footer a:hover, #breadcrumb a:active, #breadcrumb a:hover { color: #fff; text-decoration: underline; }*/ h2#page_title { padding-left: 20px; margin-bottom: 0px; font-weight: normal; } /* LAYOUT ----------------------------------------------------------------- */ /* Try and avoid fiddling with anything in this section ! */ div#page_wrapper { text-align: left; width: 990px; padding: 0px; margin: 10px auto 20px auto; } /* This value sets the overall page width - DON'T MESS ! */ div#content_wrapper { margin: 5px 0px; width: 990px; height: 100%; overflow: visible; clear: both; } div#breadcrumb_wrapper { height: 15px; margin: 5px 0px 15px 0px; padding: 10px 25px; font-size: 9px; } div#breadcrumb { float: left; color: #FFF; } div#breadcrumb-email-print { float: right; } div#breadcrumb-email-print img { margin-right: 5px; } div#breadcrumb-email-print .print { margin-left: 20px; } div#main_content { padding: 0px 10px; /*height: 100%;*/ clear: both; } /* area below breadcrumb on content pages */ /* START Nifty Corners ---------------------------------------------------------*/ /* Nifty Corners by Alessandro Fulciniti http://www.html.it/articoli/nifty/index.html ---------------------------------------------------------------------- */ b.rtop, b.rbottom{display:block;background:none;} b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #000;} 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} /* Color Overrides for Nifty Corners */ b.black b{background: #111111;} b.lgrey b{background: #676767; } /* To affect the gradients */ b.footergrey b{background: #5d5d5d; } /* To affect the gradients */ b.menu {margin-top: 5px; } /* Override for Menu ONLY, creates the gap! */ /* END Nifty Corners ----------------------------------------------------------*/ /* START CoolJSMenu ---------------------------------------------------------*/ div#cooljs { background-color: #000; padding-left: 10px; height: 25px; /* Height of Menu (30px) -5px rounded corners */ } .root_ON, .lvl0_ON { color: #FFF; font-size: 11px; text-decoration : none; line-height: 30px; vertical-align: middle; text-align: left; font-weight: normal; padding-left: 5px; } .root_OVER, .lvl0_OVER { color: #FFF; font-size: 11px; text-decoration : none; line-height: 30px; vertical-align: middle; text-align: left; font-weight: normal; padding-left: 5px; } .root_OVER { font-weight: normal; }/* .root_ON, made font size larger, bold no longer needed */ /* Hack for CoolJSMenu to accomdate for rounded corners */ /* Javascript Injection
*/ div#cmbabyliss_menu_, ilayer#cmbabyliss_menu_{ float: left; margin-top: -5px; } /* END CoolJSMenu ----------------------------------------------------------*/ /* Header */ div#header{ background: #696969 url("img/bp_grad.jpg") top left repeat-x; clear: both; padding: 5px 10px 0px 20px; } #header .left { float: left; width: 270px; vertical-align: top; } /* Width of logo + some */ #header .right { float: right; text-align: right; vertical-align: top; } div#search_box{ margin-bottom: 25px; } /* Tweak this number to get the links to sit on the bottom of the header */ div#search_box input { border: 1px solid #6e6e6e; color: #6e6e6e; font-size: 10px; padding-left: 3px; } div#search_box input.submit_btn { border: 0px; margin-bottom: -3px; } ul.content_links{ list-style-type:none; clear: both; text-align: right; font-size: 10px; } ul.content_links li { display: inline; padding: 0px 5px 0px 8px; border-right: 1px solid #999; } ul.content_links li.lastitem { border: none; } /* Footer */ #footer { height: 18px; font-weight:normal; padding: 2px; padding-top: 8px; background: #5d5d5d url("img/footer_grad.jpg") top left repeat-x; text-align: center; clear: both; } div#footer ul { margin-top: -1px; padding: 0px; } div#footer ul li { list-style-type: none; display: inline; padding: 0px 8px; } div#footer img { vertical-align: middle; padding: 0px; margin-top: -8px; _margin-top: -5px; } /* BREADCRUMB AREA ------------------------------------------------------------*/ #content_wrapper #breadcrumb_wrapper a:link, #content_wrapper #breadcrumb_wrapper a:visited { color: #FFF; text-decoration: none; } #content_wrapper #breadcrumb_wrapper a:active, #content_wrapper #breadcrumb_wrapper a:hover { color: #FFF; text-decoration: underline; } /* HOME PAGE ---------------------------------------------------------------- */ #home_image, #home_text { float: left; margin: 0px; padding: 0px; } #home_promos { margin-top: 5px; } .promo { float: left; width: 330px; height: 114px; display: inline; padding: 0px; } #middle_promo { margin: 0px 0px; } body#home div#main_content { background-color: #0e0d09; padding: 0px; margin: 0px; } div#learn-more-link {position: absolute; z-index: 200; top: 300px; left: 50%; margin-left: -35px; color: #cacaca; font-size: 11px; } div#learn-more-link a {color: #fff; text-decoration: none; font-size: 12px; } div#learn-more-link a:hover {color: #fff; text-decoration: underline; } /* index.tpl */ /* Volare Promo */ div#volare-scene-wrapper {height: 312px; width: 990px; overflow: hidden; background-color: #1e1c1d; /* ensures fixed height on Mootools DOM collapse */ } div#vp-scene1, div#vp-scene2, div#vp-scene3 {background-color: #1e1c1d; } div#vp-scene1-a {position: absolute; z-index: 5; padding: 80px 0px 0px 60px; } div#vp-scene2-a {position: absolute; z-index: 5; padding: 230px 0px 0px 180px; } /* CONTENT PAGE ---------------------------------------------------------------- */ #content #content_wrapper { height: 100%; clear: both; } #content #content_wrapper .left { float: left; } #content #content_wrapper .right { float: right; padding: 10px; padding-right: 20px; } .greyBlock {padding: 20px; background-color: #f4f4f4; border: 1px solid #c8c8c8; } /* GLAMOUR PAGE This should only be for style that can be applied global to ALL glamour pages, regardless of brand. For brand specific styling use product_{catname}.css ---------------------------------------------------------------- */ #glamour #content_wrapper { height: 430px; } #glamour #content_wrapper .left { float: left; color: #fff; text-align: center; width: 425px; padding-left: 25px; } #glamour #content_wrapper .right { float: right; padding: 10px; padding-right: 20px; } #glamour .intro_text { font-family: Helvetica, Arial, sans-serif; margin-top: 100px; width: 410px; height: 185px; /*padding-bottom: 25px;*/ font-size: 12px; line-height: 22px; text-align: left; font-weight: normal; } #glamour .intro_text div { font-size: 9px; clear: both; font-style: italic; } /* for footnote text - can't add class names in admin back end */ #glamour h1 { } #glamour .intro_text strong { } #glamour .category_thumb_wrapper { } /* need to find a better way to center these since the width (# of thumbs) will change for each brand */ #glamour .category_thumb { float: left; width: 95px; margin-right: 10px; } #glamour .category_thumb img { padding-bottom: 5px; } /* THUMBNAIL & VIEW BY LINE PAGES This should only be for style that can be applied global to ALL thumbnail pages, regardless of brand. For brand specific styling use product_{catname}.css ---------------------------------------------------------------- */ #thumbs #content_wrapper, #viewbyline #content_wrapper { height: 100%; clear: both; } #thumbs #content_wrapper .left, #viewbyline #content_wrapper .left { padding-left: 25px; } #thumbs #content_wrapper .top_category, #viewbyline #content_wrapper .top_category { float: left; text-align: center; padding: 27px 10px 25px 0px; } #thumbs #content_wrapper .top_category_name, #viewbyline #content_wrapper .top_category_name { font-size: 10px; width: 80px; margin-left: 5px; } #thumbs #content_wrapper .thumbs_wrapper, #viewbyline #content_wrapper .thumbs_wrapper { float: left; width: 536px; margin-bottom: 20px; } #thumbs #content_wrapper .thumbs_wrapper_inner, #viewbyline #content_wrapper .thumbs_wrapper_inner { padding: 0px 9px 1px 9px; } #thumbs #content_wrapper .thumbs_wrapper_inner h1, #viewbyline #content_wrapper .thumbs_wrapper_inner h1 { position: relative; margin: 0px; padding: 0px 0px 3px 0px; font-size: 13px; font-weight: normal; } #thumbs #content_wrapper .subcat_wrapper, #viewbyline #content_wrapper .subcat_wrapper { width: 516px; background: #FFF; } #thumbs #content_wrapper .thumb, #viewbyline #content_wrapper .thumb { float: left; width: 95px; height: 135px; text-align: center; padding: 0px 4px 10px 4px; background: #FFFFFF; } #thumbs #content_wrapper .thumb .thumb_name, #viewbyline #content_wrapper .thumb .thumb_name { margin-top: 5px; } #thumbs #content_wrapper .right, #viewbyline #content_wrapper .right { float: right; width: 245px; text-align: right; padding-right: 25px; } .ferrari { font-size: 10px; font-weight: bold; } /* Rounded corners */ /* outer corners */ #thumbs #content_wrapper .round_corner, #viewbyline #content_wrapper .round_corner { float: left; font-size: 1px; line-height: 1px; } #thumbs #content_wrapper .round_corner.horiz_outer, #viewbyline #content_wrapper .round_corner.horiz_outer { width: 9px; height: 8px; } #thumbs #content_wrapper .round_corner.horiz_outer.center_outer, #viewbyline #content_wrapper .round_corner.horiz_outer.center_outer { width: 518px; } /* inner border */ #thumbs #content_wrapper .round_border, #viewbyline #content_wrapper .round_border { float: left; font-size: 1px; line-height: 1px; } #thumbs #content_wrapper .round_border.horiz, #viewbyline #content_wrapper .round_border.horiz { width: 9px; height: 8px; } #thumbs #content_wrapper .round_border.horiz.center, #viewbyline #content_wrapper .round_border.horiz.center { width: 500px; } /* PRODUCT DETAIL This should only be for style that can be applied global to ALL product detail pages, regardless of brand. For brand specific styling use product_{catname}.css ---------------------------------------------------------------- */ /* Accordion */ /*#accordion h3 { border: 1px solid #999; margin: 0px; display: block; padding: 5px; }*/ #product_detail #accordion h3 { font-size: 11px; padding: 10px 13px 8px 17px; font-weight: normal; border: 1px solid #666; margin: 0px; display: block; } #product_detail #accordion h3:hover { cursor: pointer; border-color: #FFF; } /* NOTE: Be careful when targetting .element. Mootools overrides certain styles ! */ #product_detail #accordion .element { font-size: 11px; line-height: 16px; letter-spacing: 0.3px; font-weight: normal; border: 1px solid #666; } /* End Accordion */ #product_detail #content_wrapper .left { width: 410px; padding-left: 25px; float: left; } #product_detail #content_wrapper .product_info { padding-right: 40px; } #product_detail #brand_logo { padding: 0px; height: 70px; } #product_detail h1#model_num { font-size: 15px; font-weight: normal; padding-bottom: 0px; margin-bottom: 0px; } #product_detail h3#model_name { font-size: 12px; font-weight: normal; padding-top: 0px; margin-top: 2px; } #product_detail #accordion .element p, #product_detail #accordion .element ul { padding: 8px 40px 15px 17px; margin: 0px; } #product_detail #accordion .element ul { margin-left: 12px; } #product_detail #content_wrapper .horiz_rule { height: 1px; line-height: 1px; margin: 0px 10px; } #product_detail #content_wrapper #prod_rule { width: 250px; } #product_detail #content_wrapper #related_rule { width: 78px; } #product_detail #content_wrapper #product_image_wrapper { float: left; padding: 0px; width: 300px; height: 360px; margin: 0px 0px 50px 50px; } #product_detail #content_wrapper #product_image_wrapper_inner { padding: 1px 9px 0px 9px; } #product_detail #content_wrapper #product_image { position: relative; height: 335px; text-align: center; /*padding: 15px 0px; for some reason this padding is messing up the bottom border rounded corners in IE 6*/ } #product_detail #content_wrapper #product_images { padding-top: 15px; } #product_detail #content_wrapper #product_image_inset_wrapper { /*width: 100%; this was screwing up right border alignment in IE6*/ padding: 15px 2px 0px 2px; } #product_detail #content_wrapper .product_image_inset { float: left; padding: 13px 13px 5px 13px; width: 65px; } #product_detail #content_wrapper #related_prod_wrapper { float: right; margin: 0px 20px 20px 0px; width: 120px; } #product_detail #content_wrapper #related_prod_wrapper_inner { /*height: 371px;*/ padding: 1px 9px 0px 9px; } #product_detail #content_wrapper #related_products { height: 335px; position: relative; } #product_detail #content_wrapper .related_prod { height: 112px; } #product_detail #content_wrapper .related_prod img { padding: 5px 0px; } #product_detail #content_wrapper .navigation { height: 10px; font-size: 11px; padding: 6px 0px 5px 3px; text-align: center; } #product_detail #content_wrapper .navigation ul { padding: 0px; margin: 0px; text-align: left; } #product_detail #content_wrapper .navigation li { list-style: none; /*padding-right: 10px;*/ display: inline; } /* Rounded corners */ /* outer corners */ #product_detail #content_wrapper .round_corner { float: left; font-size: 1px; line-height: 1px; } #product_detail #content_wrapper .round_corner.horiz_outer { width: 9px; height: 8px; } #product_detail #content_wrapper .round_corner.horiz_outer.center_outer { width: 282px; } #product_detail #content_wrapper .round_corner.horiz_outer.related_center_outer { width: 102px; } /* inner border */ #product_detail #content_wrapper .round_border { float: left; font-size: 1px; line-height: 1px; } #product_detail #content_wrapper .round_border.horiz { width: 9px; height: 8px; } #product_detail #content_wrapper .round_border.horiz.center { width: 264px; } #product_detail #content_wrapper .round_border.horiz.related_center { width: 84px; } /* VIEW BY CATEGORY PAGE This should only be for style that can be applied global to ALL thumbnail pages, regardless of brand. For brand specific styling use product_{catname}.css ---------------------------------------------------------------- */ #product_category div#breadcrumb_wrapper { margin: 5px 0px 0px 0px; padding: 5px 25px; } #product_category #content_wrapper { height: 100%; clear: both; } #product_category #content_wrapper .products_wrapper { margin-top: 2px; padding: 25px 0px 0px 25px; } #product_category #content_wrapper .category_image { float: left; text-align: center; padding: 17px 10px 25px 0px; } #product_category #content_wrapper .thumbs_wrapper { float: left; width: 536px; margin-bottom: 20px; } #product_category #content_wrapper .thumbs_wrapper_inner { padding: 2px 9px 1px 9px; } #product_category #content_wrapper .thumbs_wrapper_inner h1 { position: relative; margin: 0px; padding: 0px 0px 3px 0px; font-size: 13px; font-weight: normal; } #product_category #content_wrapper .product { width: 516px; background: #FFF; } #product_category #content_wrapper .thumb { float: left; width: 95px; height: 135px; text-align: center; padding: 0px 4px 10px 4px; background: #FFFFFF; } #product_category #content_wrapper .thumb .thumb_name { margin-top: 5px; } #product_category #content_wrapper .right { float: right; width: 245px; text-align: right; padding-right: 25px; } /* Rounded corners */ /* outer corners */ #product_category #content_wrapper .round_corner { float: left; font-size: 1px; line-height: 1px; } #product_category #content_wrapper .round_corner.horiz_outer { width: 9px; height: 8px; } #product_category #content_wrapper .round_corner.horiz_outer.center_outer { width: 518px; } /* inner border */ #product_category #content_wrapper .round_border { float: left; font-size: 1px; line-height: 1px; } #product_category #content_wrapper .round_border.horiz { width: 9px; height: 8px; } #product_category #content_wrapper .round_border.horiz.center { width: 500px; } /* PRODUCT RECALLS ----------------------------------------------------------------- */ div#product-recalls-link {margin-top: 5px; padding: 10px; text-transform: uppercase; color: #9d1414; text-align: center; font-weight: bolder; } div#product-recalls-link a {text-decoration: none;color: #9d1414; } div#product-recalls-link a:hover {text-decoration: underline; color: #9d1414;} /* FORMS ----------------------------------------------------------------- */ /* Email a friend layer */ #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: 11px arial,helvetica,sans-serif; margin: 5px; padding: 10px 20px; color: #000; background-color: #fff; } .form_wrapper form { margin: 0px; } .form_wrapper img { float: right; clear: both; } .form_wrapper p {/* margin: 10px 0px; */ } .form_wrapper h2 { font: normal 16px arial,helvetica,sans-serif; } .form_wrapper fieldset { border: 1px solid #c8c8c8; background-color: #f4f4f4; } .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; font-size: 10px; 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: #000000; font: 10px verdana,arial,helvetica,sans-serif; padding: 3px; } .form_wrapper input.textfield, .form_wrapper textarea.textfield { width: 120px; border: 1px solid #c8c8c8; } .form_wrapper select.textfield { width: 125px; border: 1px solid #c8c8c8; } .form_wrapper li.buttons .form_buttons { float: left; margin: 10px 5px; font: 1em verdana,arial,helvetica,sans-serif; padding: 4px; } .form_wrapper li.buttons { margin-left: 120px; } .form_wrapper li.buttons input { float: left; margin: 10px 5px; font: 1em verdana,arial,helvetica,sans-serif; padding: 4px; } /* MISCALLANEOUS ----------------------------------------------------------------- */