/* * Ciblo Cocktail - CLEAR * * @author Christophe Porteneuve * @author Julien Vignolles * @author Thomas Lecavelier * @author Gregory Jaklimovitch * @legals © 2008–2010 Ciblo SA. */ * { margin: 0; padding: 0; } body { font: normal 10px Arial, Verdana, Helvetica, sans-serif; color: black; background: white url(../images/bg_all_fluid.png) center top no-repeat; } img { font-size: 10px; border: none; vertical-align: middle; } /* titles */ h1 { font-size: 18px; } h2 { font-size: 15px; } h3 { font-size: 12px; } /* list-Links */ ul, ol { list-style-type: none; } a { text-decoration: none; cursor: pointer; color: black; } a:hover { text-decoration: underline; } /* forms */ input, select, textarea, option { font-size: 11px; } input, select, textarea { vertical-align: middle; background: white; color: black; border: 1px solid #ccc; } input.radioBox { border: none; background-color: transparent; } /*input:focus, select:focus, textarea:focus { background: #fee; border-color: #777; }*/ input.field:focus, select.field:focus, textarea.field:focus, .formLign input:focus, .formLign select:focus, .formLign textarea:focus { background: #fee; border-color: #777; } /* table */ table { border-collapse: collapse; } /* classes */ .clear { clear: both; height: 0; font-size: 1px; line-height: 1px; } /* hack Ie */ .noClear { *display: none; } .indentText { text-indent: -9000px; overflow: hidden; } #myProducts { font-size: 10px; } #myProducts strong { display: inline-block; width: 6em; } /* * Ciblo Cocktail - LAYOUT - PUBLIC * * @author Christophe Porteneuve * @author Julien Vignolles * @author Thomas Lecavelier * @author Gregory Jaklimovitch * @legals © 2008–2010 Ciblo SA. */ /* all */ #all { position: relative; width: 98.8em; margin: 0 auto; background: url(../images/bg_all.png) repeat-y scroll left top transparent; } .allInner { padding: 0 4px; background: transparent url(../images/bg_all_fluid.png) center top no-repeat; } /* content */ #content { width: 952px; padding: 1.5em 21px 7em 7px; } #homepage #content { width: 966px; padding-right: 7px; } /*#all .contentPage { width: 946px; padding: 1.5em 28px 7em 6px; }*/ #contentLeft { float: left; width: 184px; } #activContent { float: right; width: 738px; } #homepage #activContent { width: 771px; } /*#all .contentPage #activContent { width: 751px;}*/ /* warning */ #warning { font-size: 12px; font-weight: bold; padding: 0.5em; padding-left: 2.5em; background: #ffe7a8 url(../images/icon_warning.png) 0.5em 0.5em no-repeat; border: 1px solid #cd9707; color: #cd9707; margin-bottom: 1em; } /* errors */ #all #errorExplanation { margin: 1em 0; padding: 1em 0 0.5em; border: 1px solid #cd3838; color: #cb2c2c; background-color: #f4dbcd; } #all #errorExplanation h2 { display: none; } #all #errorExplanation p { padding-left: 2em; margin: 0 0 0 1.5em; font-weight: bold; font-size: 13px; background: transparent url(../images/icon_error.gif) top left no-repeat; } #all #flashes .error, #ratings .error, #tavisclient .error { margin-bottom: 1em; padding: 1em 1em 1em 3.5em; font-size: 12px; border: 1px solid #cd3838; color: #cb2c2c; background: #f4dbcd url(../images/icon_error.gif) 1em 1em no-repeat; } #all #errorExplanation ul { margin: 0; padding: 0.4em 0; } #all #errorExplanation ul li { padding-left: 0; margin: 0 0 0 3em; font-size: 12px; list-style-type: square; background: none; } #all .missing { border-color: #cd3838; color: #cb2c2c; background-color: #f4dbcd; } /* notices */ #all p.notice, #all div.notice { margin: 0 0 1em; padding: 1em 1em 1em 3.5em; border: 1px solid #48a42a; font-size: 12px; color: #48a42a; font-weight: bold; background: #d4f4cd url(../images/icon_notice.gif) 1em center no-repeat; } .tiny a { text-decoration: underline; color: black; } .tiny a:hover { color: #a98011; } .tiny strong, .tiny em { font-weight: bold; } #all strong.seo { font-weight: normal; } #all strong strong.seo { font-weight: bold; } #all em.seo { font-style: normal; } #all em em.seo { font-style: italic; } /* * Urban locker - CUSTOMER ACCOUNT * * @author Christophe Porteneuve * @author Julien Vignolles * @author Grégory Marcilhacy * @legals © 2008-2009 Ciblo SA. */ /* accountTop */ #accountTop { position: relative; background-color: white; } #accountTop p { font-size: 12px; width: 35em; margin-bottom: 0.3em; } /* accountInfo */ #accountInfo { width: 88%; padding: 2em 6% 0; background-color: white; } #accountInfo #accountForm { margin: 1px; border: none; } /* accountAddresses */ #accountAddresses, #accountOrders, #accountDiscounts { width: 96%; padding: 1em 2% 3em; } /* accountOrders */ #accountOrders .topInfo { margin: 0; padding-bottom: 2em; } #accountOrders .comSelected a, #accountOrders table a { text-decoration: underline; } #accountOrders .comSelected .first { margin: 0; } #accountOrders .comSelected { height: 2em; line-height: 2em; margin-top: 0.1em; padding: 0.2em 2em; font-size: 12px; font-weight: bold; background-color: #ce1d3d; color: white; } #accountOrders .comSelected p { float: left; display: inline; } #accountOrders .comSelected a { padding-left: 1.5em; background-position: left center; background-repeat: no-repeat; background-color: transparent; } #accountOrders .comSelected .comPrice { margin-left: 12em; } #accountOrders .comSelected .comStatut { float: right; } #accountOrders .comLink a { color: white; background-image: url(../images/icon_open.gif); } #accountOrders .comLink a.closed { background-image: url(../images/icon_close.gif); } #accountOrders table, #accountOrders table th { border: none; border: hidden; text-align: center; } #accountOrders table { width: 100%; } #accountOrders thead th, #accountOrders tbody td { font-size: 12px; } #accountOrders table tbody td { width: 15em; padding: 0.2em 0; } #accountOrders table th { padding: 1em 0; } #accountOrders table td { border: none; border: hidden; } #accountOrders .buttons { padding: 1.5em 0; } #accountOrders .buttons a { font-size: 11px; text-decoration: none; } #accountOrders .buttons a.download {display:block; height:18px; line-height:9px; width:67px; margin-left: auto; margin-right: auto; } /*#accountOrders .buttons a { padding: 0.2em 0.5em; border: 1px solid #e0d7e0; color: black; background: #c9c1c6 url(../images/bg_btn_step.png) repeat-x top left; } #accountOrders .buttons a:hover { background: #dcd5da url(../images/bg_btn_step_hov.png) repeat-x top left; } */ /* Account discounts and sponsoring */ #accountDiscounts { font-size: 12px; } #accountDiscounts a { color: #ce1d3d; font-weight: bold; text-decoration: underline; } #accountDiscounts a:hover { color: #775805; } #accountDiscounts p { margin-top: 1em; } #accountDiscounts h3 { font-size: 16px; font-weight: bold; color: white; line-height: 2em; height: 2em; padding: 0 1.5em; margin-top: 2em; background-color: black; } #accountDiscounts .topAddress { text-align: center; margin: 1em 0; } #accountDiscounts .standardForm .formLign input { width: 14em; } #accountDiscounts .standardTable { margin: 1em auto; } #accountDiscounts .pointsTotal td { padding: 0.2em 0.5em; } #accountDiscounts .pointsSlices thead th { font-size: 12px; text-transform: uppercase; width: 8em; text-align: center; } #accountDiscounts .pointsTotal td.pointsGain, #accountDiscounts .pointsSlices tbody td { font-size: 14px; color: #ce1d3d; font-weight: bold; text-align: center; } #accountDiscounts .pointsSlices th.break { padding-left: 7em; } #accountDiscounts .pointsSlices td.break { padding-left: 6em; } #brandsIndex div.column { float: left; display: inline; margin-left: 1em; } #brandsIndex div.first { margin-left: 0; } #brandsIndex h2 { margin-bottom: 0.5em; } #brandsIndex ol { margin-bottom: 1em; } #brandsIndex ol li { display: block; } #brandsIndex ol a { display: block; width: 11.4em; height: 1.3em; line-height: 1.3em; text-decoration: none; } #brandsIndex ol a:hover { color: #ce1d3d; text-decoration: underline; } /* * BUTTONS * * @author Christophe Porteneuve * @author Julien Vignolles * @author Gregory Jaklimovitch * @legals � 2008-2009 Ciblo SA. */ /* imgBtnContainer */ .imgBtnContainer { margin: 1.5em 0; text-align: center; } /* imgBtn */ .okBtn { width: 2.2em; height: 1.5em; line-height: 1.5em; padding: 0; cursor: pointer; font-size: 13px; font-weight: bold; color: white; border: none; background: transparent url(../images/bg_btn_ok.gif) center top no-repeat; } #all .okBlackBtn { background-image: url(../images/bg_ok_btn_black.gif); } #all .okBtnLarge { background-image: url(../images/bg_ok_btn_large.gif); font-size: 11px; line-height: 1.5em; font-weight: normal; width: 64px; height: 19px; } .cartBtn { display: block; width: 178px; height: 35px; padding-left: 40px; cursor: pointer; font-size: 12px; font-weight: bold; text-align: left; border: none; color: white; margin: 0 auto; background: transparent url(../images/buttons_add_to_cart.png) 0 0 no-repeat; } .cartBtn:hover { background-position:0 -35px; text-decoration: underline;} .imgBtnContainer .alert, .imgBtnContainer .disabled { padding-left: 35px; padding-top: 2px; vertical-align: middle; } .imgBtnContainer .alert { line-height: 14px; } .imgBtnContainer .alert:hover { text-decoration: underline; } .imgBtnContainer .disabled { background-position: 0 -132px; line-height: 31px; cursor: not-allowed; color: black; } .stepBtn { padding:0.2em 0 0.1em 2.5em; font-weight: bold; color: #3f8b30; border: none; background: #674c73 url(../images/btn_ajouter_recalculer.png) 0 0 repeat-x; } .stepBtn:hover { cursor: hand; } .add { height: 19px; width: 67px; } .calculate { height: 21px; width: 94px; } /* linksContainer */ .linksContainer { width: 60%; margin: 3em auto 0; text-align: right; } /* submitContainer */ .submitContainer { margin: 2.5em 0 1em; } /* submit & cancel */ .submit, .cancel { display: block; width: 178px; height: 35px; line-height: 33px; margin: 0 auto; font-size: 13px; font-weight: bold; text-align: center; border: none; cursor: pointer; color: white; background: transparent url(../images/buttons_add_to_cart.png) 0 -245px no-repeat; } .submit:hover { background-position:0 -280px; text-decoration: none; } .cancel {background-position:0 -315px; text-decoration: none; } .cancel:hover {background-position:0 -350px; text-decoration: none; } .cancel2 { font-size: 11px; height: 2.4em; line-height: 1.2em; padding: 0.3em 0; width: 18.4em; } /* twoButtons */ #all .twoButtons { padding: 2em 10em; } #all table .twoButtons { padding: 2em; } #all .twoButtons .submit, #all .twoButtons .cancel { float: left; } #all .twoButtons .right { float: right; } /* cartNotification */ #all #cartNotification .twoButtons { padding: 2em 0; } /* * Ciblo Cocktail - BACKOFFICE - Image cropper * * Assumes CSS2.1-compatible browser (i.e. not IE). * * @author Christophe Porteneuve * @author Julien Vignolles * @author Thomas Lecavelier * @legals © 2008-2009 Ciblo SA. */ .imgCrop_wrap { /* width: 500px; @done_in_js */ /* height: 375px; @done_in_js */ position: relative; cursor: crosshair; } /* an extra classname is applied for Opera < 9.0 to fix it's lack of opacity support */ .imgCrop_wrap.opera8 .imgCrop_overlay, .imgCrop_wrap.opera8 .imgCrop_clickArea { background-color: transparent; } /* fix for IE displaying all boxes at line-height by default, although they are still 1 pixel high until we combine them with the pointless span */ .imgCrop_wrap, .imgCrop_wrap * { font-size: 0; } .imgCrop_overlay { background-color: #000; opacity: 0.5; filter:alpha(opacity=50); position: absolute; width: 100%; height: 100%; } .imgCrop_selArea { position: absolute; /* @done_in_js top: 20px; left: 20px; width: 200px; height: 200px; background: transparent url(castle.jpg) no-repeat -210px -110px; */ cursor: move; z-index: 2; } /* clickArea is all a fix for IE 5.5 & 6 to allow the user to click on the given area */ .imgCrop_clickArea { width: 100%; height: 100%; background-color: #FFF; opacity: 0.01; filter:alpha(opacity=01); } .imgCrop_marqueeHoriz { position: absolute; width: 100%; height: 1px; /* FIXME background: transparent url(../images/back/marqueeHoriz.gif) repeat-x 0 0; */ z-index: 3; } .imgCrop_marqueeVert { position: absolute; height: 100%; width: 1px; /* FIXME background: transparent url(../images/back/marqueeVert.gif) repeat-y 0 0; */ z-index: 3; } /* * FIX MARCHING ANTS IN IE * As IE <6 tries to load background images we can uncomment the follwoing hack * to remove that issue, not as pretty - but is anything in IE? * And yes I do know that 'filter' is evil, but it will make it look semi decent in IE * * html .imgCrop_marqueeHoriz, * html .imgCrop_marqueeVert { background: transparent; filter: Invert; } * html .imgCrop_marqueeNorth { border-top: 1px dashed #000; } * html .imgCrop_marqueeEast { border-right: 1px dashed #000; } * html .imgCrop_marqueeSouth { border-bottom: 1px dashed #000; } * html .imgCrop_marqueeWest { border-left: 1px dashed #000; } */ .imgCrop_marqueeNorth { top: 0; left: 0; } .imgCrop_marqueeEast { top: 0; right: 0; } .imgCrop_marqueeSouth { bottom: 0px; left: 0; } .imgCrop_marqueeWest { top: 0; left: 0; } .imgCrop_handle { position: absolute; border: 1px solid #333; width: 6px; height: 6px; background: #FFF; opacity: 0.5; filter:alpha(opacity=50); z-index: 4; } /* fix IE 5 box model */ * html .imgCrop_handle { width: 8px; height: 8px; wid\th: 6px; hei\ght: 6px; } .imgCrop_handleN { top: -3px; left: 0; /* margin-left: 49%; @done_in_js */ cursor: n-resize; } .imgCrop_handleNE { top: -3px; right: -3px; cursor: ne-resize; } .imgCrop_handleE { top: 0; right: -3px; /* margin-top: 49%; @done_in_js */ cursor: e-resize; } .imgCrop_handleSE { right: -3px; bottom: -3px; cursor: se-resize; } .imgCrop_handleS { right: 0; bottom: -3px; /* margin-right: 49%; @done_in_js */ cursor: s-resize; } .imgCrop_handleSW { left: -3px; bottom: -3px; cursor: sw-resize; } .imgCrop_handleW { top: 0; left: -3px; /* margin-top: 49%; @done_in_js */ cursor: w-resize; } .imgCrop_handleNW { top: -3px; left: -3px; cursor: nw-resize; } /** * Create an area to click & drag around on as the default browser behaviour is to let you drag the image */ .imgCrop_dragArea { width: 100%; height: 100%; z-index: 200; position: absolute; top: 0; left: 0; } .imgCrop_previewWrap { /* width: 200px; @done_in_js */ /* height: 200px; @done_in_js */ overflow: hidden; position: relative; } .imgCrop_previewWrap img { position: absolute; } /* * Urban locker - EDITORIALS * * @author Christophe Porteneuve * @author Julien Vignolles * @author Thomas Lecavelier * @author Gregory Jaklimovitch * @legals © 2008-2009 Ciblo SA. */ .editoPage { font-size: 12px; } .editoPage h1,.editoPage h2,.editoPage h3,.editoPage h4,.editoPage h50 {color: #ce1d3d;} .editoPage h2 { margin-bottom: 1em; font-size: 14px; } .editoPage h3 { margin-bottom: 1em; font-size: 13px; } .editoPage div { padding-bottom: 1em; } .editoPage p { margin-bottom: 1em; padding:0;} .editoPage a { text-decoration: underline; } .editoPage a:hover { } .editoPage .logo img { float: right; width: 16.3em; height: 10.7em; margin: 0 2em; font-size: 10px; } .editoPage div ol {list-style-type: square; list-style-position:inside; padding:0; margin: 0;} .editoPage div ul {list-style-type: decimal; list-style-position:inside; padding:0; margin: 0;} .editoPage div li {padding:0; margin: 0;} .editoPage table { margin-bottom: 1em; } .editoPage table, table td { font-size: 11px; border: 1px solid #d1b15b; } #editoPage table th, .editoPage table td { padding: 0.3em 1.5em; } .editoPage table thead th { font-weight: bold; background-color: #e5ecf1; } .editoPage table tbody td { background-color: #f9f8f9; } .editoPage .preview {width: 50%; } .editoPage .content { float: left; width: 500px;} #standardPage .topInfo, #helpPage .topInfo { padding: 0; } /* helpPage */ #helpPage { width: 80%; } /* helpList */ #helpPage .helpList { float: left; width: 500px; margin: 2em 0; padding-bottom: 1em; border-bottom: 1px solid #ccc; } #helpPage .helpList li { margin-bottom: 0.3em; } #helpPage .helpList li h2 { margin: 0; } #helpPage .helpList li a { text-decoration: none; } #helpPage .helpList li a:hover { text-decoration: underline; } /* helpList */ #helpPage .faqResponses h2 { margin: 2em 0 1em; } /* partner */ #partners { clear: both; margin-bottom: 3em; } #partners h2 { margin-bottom: 1em; } #partners .logo img { float: right; display: inline; width: 15em; height: 10em; margin: 0 1.5em 1em; } #partners .tiny { width: 42em; } #partners .partnerLink { font-size: 11px; } /* sitemap */ #columns { padding: 0 1em 1em; } #sitemap h2 { margin: 1em 0; } #sitemap h2 a { font-size: 14px; text-decoration: none; } #sitemap h3 { margin: 1em 0 0.5em; } #sitemap h3 a { font-size: 12px; text-decoration: none; } #sitemap li li { padding-left: 1em; } /* editoItem */ .editoItem { width: 90%; padding-bottom: 2.5em; font-size: 11px; border-bottom: 1px solid #ccc; } .timestamp { margin: 2em 0; font-size: 12px; font-weight: bold; } #suggestion {width: 190px; float: right;} #suggestion h2 {color: black; text-align: center;} #suggestion li {margin-bottom: 12px; } /* * LAYOUT - FOOTER * * @author Christophe Porteneuve * @author Julien Vignolles * @author Gregory Jaklimovitch * @legals © 2008-2009 Ciblo SA. */ #footer { width: 100%; background: #cbcbcb url(../images/bg_footer.png) left top repeat-x; color: #595959; } #footer a { color: #595959; } #footerAccelerators a:hover { background: #ddd; } #footerLinks a:hover { text-decoration: underline; color: #ce1d3d; } .footerLine { border-top: 1px solid #c0c0c0; border-bottom: 1px solid #e9e9e9; } /* Footer accelerators */ #footerAccelerators { width: 100%; padding: 2em 0; border-top: none; } #footerAccelerators .more { position: absolute; left: 0; bottom: 0; width: 100%; font-size: 11px; height: 1.4em; line-height: 1.4em; text-decoration: underline; color: #3D3D3D; text-align: center; } #footerAccelerators a:hover .more { text-decoration: underline; color: #ce1d3d; } #footerAccelerators .accBlock { float: left; display: inline; position: relative; width: 197px; height: 13em; padding: 0 2.3em; border-left: 1px solid #ececec; border-right: 1px solid #cbcbcb; } #footerAccelerators .first { border-left: none; } #footerAccelerators .last { border-right: none; } #footerAccelerators span { display: block; } #footerAccelerators .image { width: 100%; text-align: center; margin-top: 1em; } #footerAccelerators .title { display: block; font-size: 13px; padding: 0.3em 0 0.4em; color: #3d3d3d; text-transform: uppercase; font-weight: bold; text-align: center; } #footerAccelerators .contact img { position: absolute; width: 16px; height: 31px; } #footerAccelerators .sponsor { text-align: center; } #footerAccelerators .sponsor img { display: block; width: 99px; height: 42px; margin: 0 auto; } #footerAccelerators .loyalties img { display: block; width: 48px; height: 48px; margin: 0 auto; } #footerAccelerators .payment img { display: block; width: 129px; height: 52px; margin: 0 auto; } /* Footer links */ #footerLinks { width: 100%; padding: 2em 0 4em; border-bottom: none; } #footerLinks a:hover, #footerSocial a:hover { color: #ce1d3d; } #footerLinks .footerBlock { float: left; display: inline; width: 245px; font-size: 11px; } #footerLinks .logo { text-align: center; } #footerLinks .logo img { width: 200px; height: 25px; margin-top: 3em; } #footer .footerTitle { font-size: 13px; padding: 0.3em 0 0.4em; color: #3d3d3d; text-align: center; text-transform: uppercase; font-weight: bold; } #footerLinks .footerBlock ul { margin-left: 4.5em; } #footerLinks .footerBlock ul li { margin-bottom: 0.2em; } #footerLinks .contactBlock { margin-left: 1em; width: 21em; } #footerLinks .contactBlock a { display: block; padding-left: 3em; background: transparent url(../images/icon_iphone.gif) left top no-repeat; } .contactBlock a:hover { text-decoration: none; } .contactBlock span {} .contactBlock .phone { position: relative; z-index: 0; display: inline; font-size: 17px; width: 8em; height: 1.2em; margin-left: 1.5em; padding: 0 5px; font-weight: bold; text-align: center; color: white; background-color: #ce1d3d; } #footer .phone .topLeft, #footer .phone .topRight, #footer .phone .bottomLeft, #footer .phone .bottomRight { display: block; font-size: 1px; width: 4px; height: 4px; position: absolute; z-index: 1; background-image: url("../images/corners_phone.png"); } #footer .topRight {} #footer .bottomLeft {} #footer .bottomRight {} .contactBlock .details { font-size: 10px; margin-left: 26px; } .contactBlock .hours { font-size: 11px; margin-left: 26px; } /* Footer copyright */ #copyright { text-align: center; padding: 1em 0; } #copyright .logo { margin-right: 2em; } #copyright .copyrightLign { margin-bottom: 0.7em; } #copyright, #copyright a { font-size: 11px; } #copyright .partnerList { width: 80em; margin: 0 auto; } #copyright .partnerList ul, #copyright .partnerList li { display: inline; } #copyright .partnerList p { display: inline; } #copyright .partnerList li { padding: 0 0.5em; border-left: 1px solid black; } #copyright .partnerList li.first { border: none; } #copyright .partnerListLabel { font-weight: bold; } /* * Ciblo Cocktail - FORM * * @author Christophe Porteneuve * @author Julien Vignolles * @author Thomas Lecavelier * @author Gregory Jaklimovitch * @legals � 2008-2009 Ciblo SA. */ /* standardForm */ .standardForm { position: relative; padding-bottom: 2em; } .standardForm .reqIcon { font-size: 11px; color: #d90000; } .standardForm .topTitle { margin-bottom: 1em; font-size: 11px; font-weight: bold; } .standardForm .legend { position: absolute; top: 0; right: 2em; z-index: 2; font-size: 10px; text-align: right; } .standardForm .infoType { margin-bottom: 2.5em; } .standardForm .formLign { width: 85%; margin: 0 auto 1em; font-size: 11px; color: black; } .standardForm .formLign input, .standardForm .formLign select { padding: 1px; } .standardForm .formLign textarea { padding: 0.2em; } .standardForm .formLign input { width: 12em; } .standardForm .formLign select { width: 12.7em; } .standardForm .small input, .standardForm .small select { width: 12%; } .standardForm .smallest input, .standardForm .smallest select { width: 7%; } div#all .standardForm .lignLeft, div#all .standardForm .lignRight { width: 45%; } #all .standardForm .lignLeft { float: left; } #all .standardForm .lignRight { float: right; } .standardForm .formLign label { float: left; display: inline; width: 40%; margin-right: 0.7em; font-weight: bold; text-align: right; } .standardForm .formLign .infoSup { margin-left: 0.5em; } #all .standardForm .checkboxLign { width: 40%; position: relative; padding-left: 2em; } #all .standardForm .checkboxLign input, #all .standardForm .checkboxLign label { margin: 0; padding: 0; } #all .standardForm .checkboxLign input { position: absolute; left: 0; top: 0.1em; z-index: 2; width: 1.4em; height: 1.2em; border: none; } #all .standardForm .checkboxLign label { float: none; font-weight: normal; text-align: left; } #all .standardForm .messageLign { width: 30em; } #all .standardForm .messageLign label { width: 100%; margin-bottom: 0.5em; text-align: left; } #all .standardForm .messageLign textarea { width: 100%; height: 4em; } /* organisationForm */ #organisationForm { position: relative; width: 96%; padding: 1em 2% 0.9em; background-color: #efefef; } #organisationForm p { margin: 0; font-size: 12px; line-height: 18px; text-align: right; } #organisationForm .filterFormLeft { float: left; text-align: left; } #organisationForm .filterFormRight { float: right; text-align: right; } #organisationForm label { float: left; font-weight: bold; } #organisationForm .imgBtn { margin-left: 0.5em; } #organisationForm .field { height: 1.6em; } #organisationForm input.field { float: left; height: 1.2em; padding: 2px; } #organisationForm select.field { float: left; display: inline; padding: 1px; margin-left: 0.5em; } /* filterForm */ #organisationForm .filterForm .field { width: 12.7em; } #organisationForm .filterForm .removeFilter { float: left; font-size: 11px; width: 11.2em; height: 1.4em; line-height: 1.4em; padding-left: 1.5em; margin-left: 0.5em; background: white url(../images/bg_remove_filter_icon.gif) 2px center no-repeat; border: 1px solid #ccc; } #organisationForm .filterForm .removeFilter:hover { text-decoration: line-through; } /* sortForm */ #organisationForm .sortForm .field { width: 12.7em; } #organisationForm label.rightMost { display: inline-block; width: 7em; } /* customerForm */ .customerForm { padding: 0 2em 2em; background-color: white; } .customerTitle { padding: 0.8em 0; font-size: 12px; font-weight: bold; text-align: center; text-transform: uppercase; background-color: #e1dddd; } /* customPad */ .customPad { width: 36em; margin-bottom: 3em; } .customPad .purchaseContent { height: 14em; padding: 1em; } .customPad .customerTitle { font-size: 14px; margin: 0 0 1em; background: none; } .customPad .forgot { margin-top: 1.5em; text-align: center; } .customPad .forgot a { font-size: 11px; text-decoration: underline; } .customPad .forgot a:hover { color: #ce1d3d; } .customPad .accountInfo { width: 24em; margin: 0 auto; font-size: 12px; text-align: center; } .customPad .userHelp { font-size: 12px; } .customPad .userHelp p { margin-bottom: 1em; } .customPad .userHelp p.submitContainer { text-align: center; } .customPad .userHelp a { color: black; font-weight: bold; text-decoration: underline; } .customPad .userHelp a:hover { color: #ce1d3d; } /* customPad exceptions */ #identificationBlock { float: left; } #identificationForm .formLign input, #identificationForm .formLign select { width: 12em; } #registrationBlock { float: right; } #forgetPassword { margin: 0 auto; } #forgetPassword .accountInfo { margin-bottom: 1em; } /* accountForm */ #accountForm { padding-top: 2em; } #accountForm #newsletter { width: 17em; } /* subscriptionForm */ #subscriptionForm { height: auto; } #subscriptionForm p.bottomInfos { font-size: 11px; margin-top: 1em; } #subscriptionForm p.bottomInfos a { text-decoration: underline; } #subscriptionForm p.bottomInfos a:hover { color: #ce1d3d; } /* termsOfUse */ #termsOfUse a { color: #b3860d; text-decoration: underline; } #termsOfUse a:hover { color: #e1ba53; } /* addressesContainer */ .topInfo { font-size: 14px; margin-bottom: 1em; position: relative; } .topInfo .topTitle { margin-bottom: 1.5em; font-weight: bold; } .topInfo .topLink { text-decoration: underline; color: #ce1d3d; } .topInfo .topLink:hover { color: #ce1d3d; } .topInfo #newAddressLink { font-size: 11px; position: absolute; top: 0; right: 0; line-height:10px; } /* customerAddresses */ .addressesContainer { float: left; position: relative; padding:1em 40px; font-size: 11px; } .addressesContainer .customerAddress { float: left; position: relative; display: inline; width: 17.7em; margin-right: 2.5em; padding: 0 0 0.5em; background-color: #e8e8e8; } .addressesContainer .first { margin-left: 0; } .addressesContainer .purchaseAddress { float: right; margin: 0; } .addressesContainer .customerAddress .radioBox { position: absolute; left: 0.4em; top: 0.4em; z-index: 3; border: none; background: none; height: 14px; line-height: 14px; } .addressesContainer .customerAddress .title { display: block; font-size: 12px; padding: 0.3em 0.3em 0.3em 2.5em; background-color: #ce1d3d; color: white; font-weight: bold; } .addressesContainer .customerAddress .addressBlock { display: block; padding-top: 0.5em; padding-left: 2.5em; } .addressesContainer .customerAddress span { display: block; } .addressesContainer .customerAddress span.separator { height: 0; padding: 0; line-height: 0; margin: 0.5em 2.5em 0.5em 0; border-top: 1px dotted #999; } .addressesContainer .customerAddress a { display: block; margin-left: 2.5em; padding: 0.4em 0 0.4em 2em; text-decoration: underline; background: transparent url(../images/icon_edit.gif) left center no-repeat; } .addressesContainer .customerAddress a:hover { color: #ce1d3d; } .addressesContainer .customerAddress .delete { display: block; margin-left: 2.5em; padding: 0.2em 0 0.2em 1.8em; font-size: 11px; text-decoration: underline; text-align: left; border: none; background: transparent url(../images/icon_cancel.gif) left top no-repeat; } .addressesContainer .customerAddress .delete:hover { cursor: pointer; color: #ce1d3d; } /* contactForm */ #contactForm { width: 62em; border: none; background-color: #f2f2f2; padding: 1.5em; border: 1px solid #ccc; } #contactForm .legend { top: 1em; right: 1em; } #contactForm .topTitle { margin-left: 3em; font-size: 12px; } #contactForm .formLign { width: 44em; } #contactForm .formLign label { width: 13em; } #contactForm .formLign input { width: 23em; } #contactForm .formLign select { width: 23.6em; } #contactForm .contactMeans { width: 40em; margin: 0 auto 3em; font-size: 11px; } #contactForm .contactMeans li { display: block; margin-bottom: 0.5em; padding-left: 1.5em; font-weight: bold; background: transparent url(../images/icon_marker1.gif) left 0.5em no-repeat; } #contactForm .schedules { margin-top: 0.3em; font-weight: normal; } /* * Ciblo Cocktail - LAYOUT - HEADER * * @author Christophe Porteneuve * @author Julien Vignolles * @author Thomas Lecavelier * @author Gregory Jaklimovitch * @legals © 2008–2010 Ciblo SA. */ #header { width: 100%; position: relative; z-index: 10; } #siteLogo { float: left;margin-top: 15px; margin-left: 15px; text-decoration: none; } #siteLogo:hover { text-decoration: none; } #siteLogo img { width: 373px; height: 45px; } /* CART */ #siteInfo { float: right; width: 50em; } #siteInfo #userPanel { float: right; width: 230px; font-size: 11px; margin-top: 17px; margin-right: 15px; text-align: center; } #siteInfo #identification { margin-bottom: 0.4em; } #siteInfo #identification a { text-decoration: underline; } #siteInfo .connection a { float: left; font-weight: bold; } #siteInfo .connection a:hover { color: #ce1d3d; } #siteInfo .registration a { float: right; } #siteInfo .registration a:hover { color: #ce1d3d; } #cart { display: block; text-align: left; width: 228px; background: white url(../images/panier.gif) 9px center no-repeat; border: 1px solid #ddd; -moz-border-radius: 6px; -webkit-border-radius: 6px; } #cart .cartContent { display: block; padding: 10px 10px 9px 35px; width: 185px; } #cart .cartTitle { font-size: 12px; text-decoration: underline; } #cart:hover { text-decoration: none; background-color: #f9dada; border-color: #ce1d3d; } #cart #cartArticle { font-size: 12px; } #cart .price { position: absolute; right: 10px; font-size: 13px; font-weight: bold; color: #ce1d3d; margin-left: 5px; } /* TODO Cart discount */ #cart .discountInfo { clear: both; display: none; text-align: center; color: gray; font-size: 90%; padding-top: 0.8em; } #cart .discountInfo span.line2 { display: none; } #cart.discounted { height: 2.8em; } #cart.discounted .discountInfo { display: block; } /* SEARCH */ #searchForm { float: left; margin-top: 43px; } #searchForm .searchBox { font-size: 11px; padding: 1px; width: 12em; border: 1px solid #d8d8d8; border-top: 1px solid #959595; color: #555; background: white url(../images/bg_search_box.png) left top repeat-x; } #searchForm .searchBox:focus { background: #fee; border-color: #777; } #searchForm .searchOk { width: 26px; height: 19px; padding-bottom: 3px; cursor: pointer; font-size: 11px; color: white; margin-left: 0.4em; border: none; background: white url(../images/bg_btn_ok.gif) right bottom no-repeat; } #searchForm .searchOk:hover {} /* BASELINE */ #header .baseline { display: block; font-size: 13px; margin-top: 0.2em; text-align: center; color: #d12c4a; letter-spacing: 1px; font-weight: normal; background: transparent url(../images/bg_baseline.png) center center repeat-x; } #header .baseline span { background-color: white; padding: 0 0.5em; } /* HORIZONTAL MENU */ #horizontalMenu { position: relative; width: 97em; margin-top: 1.5em; background-color: #ce1d3d; height: 28px; padding: 0 0.5em; } #horizontalMenu li { position: relative; float: left; height: 26px; padding-top: 2px; } #horizontalMenu li.onRight { float: right; } #horizontalMenu li a.main { position: relative; z-index: 19; display: block; padding: 0; font-size: 12px; height: 26px; line-height: 26px; width: 95px; color: white; text-align: center; } #horizontalMenu li.onRight a.main { width: 104px; } #horizontalMenu li a.on2Lines { line-height: 13px; } #horizontalMenu #discountLink img { vertical-align: middle; margin-left: 0.4em; width: 27px; height: 20px; } #horizontalMenu li:hover a.main, #horizontalMenu li a.main:hover { color: black; text-decoration: none; background: white; } #horizontalMenu li a.main span { width: 4px; height: 4px; } #horizontalMenu li:hover a.main span { display: block; background-image: url(../images/corner_menu_item.png); } #horizontalMenu li div.fat { display: none; position: absolute; top: 28px; padding: 0 3px 1.75em 3px; z-index: 20; background: #9c9c9c url(../images/bg_fat_menu.png) left top repeat-x; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; } #horizontalMenu li div.fat .innerFat { position: relative; width: 558px; height: 210px; padding: 1.75em 0 0.5em 1em; background: white url(../images/default_category_fullsize.jpg) 192px bottom no-repeat; } #horizontalMenu li.fatOnleft .fat { left: 0; } #horizontalMenu li.fatOnRight { position: static; } #horizontalMenu li.fatOnRight .fat { right: 0; } #horizontalMenu li:hover div.fat { display: block; } #horizontalMenu li div.fat ul { position: absolute; font-size: 12px; width: 180px; z-index: 21; left: 200px; } #horizontalMenu li div.fat ul.first { left: 10px; } #horizontalMenu li div.fat li { display: block; float: none; height: auto; width: 100%; padding: 0; } #horizontalMenu li .fat .selection { position: absolute; right: 0; bottom: 0; width: 170px; height: 199px; background-color: white; margin: 0; border-right: none; border-bottom: none; } #horizontalMenu li .fat .selection:hover { border-color: #dcd7de; } #horizontalMenu li div.fat li a { display: block; padding: 0 0.5em; line-height: 16px; } #horizontalMenu li div.fat li a:hover { color: #ce1d3d; text-decoration: underline; } #horizontalMenu li div.fat img.cat { position: absolute; right: 171px; bottom: 0; z-index: 20; width: 205px; height: 205px; } #discountLink a.main { background: transparent url(../images/product_discount.png) center center no-repeat; } /* Fat menu brands */ #horizontalMenu li.mainBrands { position: static; } #horizontalMenu li.mainBrands div.fat { left: 0; width: 974px; height: auto; } #all #horizontalMenu li.mainBrands .innerFat { float: left; width: 964px; height: auto; font-size: 10px; background: white; z-index: 21; } #horizontalMenu li.mainBrands div.fat ol, #horizontalMenu li.mainBrands div.fat li { float: left; font-size: 11px; width: 120px; } #horizontalMenu li.mainBrands div.fat a { line-height: 15px; } #horizontalMenu li.mainBrands div.fat strong { color: #ce1d3d; } /* Fat menu selection */ .selection p.title { text-align: center; padding: 0.5em 0; text-transform: uppercase; border-bottom: 1px solid #DCD7DE; } .selection:hover p.title { background-color: #ddd; } .selection a.photo img { vertical-align: bottom; width: 96px; height: 96px; } #all .selection .fullprice { font-size: 15px; } #all .selection .price { font-size: 15px; } .selection .discountPrice { font-size: 10px; font-weight: normal; margin-left: 0.5em; text-decoration: line-through; color: black; } .selection .add_cart { position: absolute; right: 8px; bottom: 8px; } #horizontalMenu li.active a { color: black; cursor: default; } #pageTitleContainer .pageImage {border: 1px solid #f1eff2; width: 736px; height: 100px; } #pageTitleContainer .withBack h1 {padding-left:1em; padding-top:2em;} /* * Ciblo Cocktail - Homepage * * @author Christophe Porteneuve * @author Julien Vignolles * @author Thomas Lecavelier * @author Gregory Jaklimovitch * @legals © 2008-2009 Ciblo SA. */ /* brandsCarousel */ #brandsCarousel { position: relative; margin: 0 0 2em; padding: 0 4em; } #brandsCarousel .container { width: 70em; overflow: hidden; position: relative; height: 4em; } #brandsCarousel .previous, #brandsCarousel .next { position: absolute; z-index: 0; top: 0.5em; outline: none; } #brandsCarousel .previous { left: 0; } #brandsCarousel .next { right: 0; } #brandsCarousel .previous img, #brandsCarousel .next img { width: 3.2em; height: 3.2em; } #brandsCarousel ul { float: left; display: inline; position: relative; top: 0; left: 0; text-align: left; } #brandsCarousel ul li { float: left; display: inline; padding-right: 2em; } #brandsCarousel ul li a { display: block; } #majorAndMedium {margin-bottom: 1em; } /* majorHomeLinks */ #majorHomeLinks { position: relative; } #majorHomeLinks a { display: block; } #majorHomeLinks a:hover span { text-decoration: underline; } #majorHomeLinks .photoTitle { position: absolute; left: 0; bottom: 0; z-index: 2; display: block; width: 98%; padding: 0.5em 1%; font-size: 14px; opacity: 0.5; color: white; } /* mediumHomeLinks */ #mediumHomeLinks { float: right; display: inline; } #mediumHomeLinks .mediumLink { float: right; } #mediumHomeLinks .mediumLink img { display: block; width: 248px; height: 248px; } #mediumHomeLinks a, #minorHomeLinks a { border:1px solid #DCD7DE; } #mediumHomeLinks a:hover, #minorHomeLinks a:hover { border: 1px solid #888; } /* minorHomeLinks */ #minorHomeLinks { margin-bottom: 1.5em; } #minorHomeLinks .homeProdTitle { padding: 0.5em; text-align: center; } #minorHomeLinks a.first { margin-left: 0; } #minorHomeLinks .minorLink { float: left; position: relative; margin-left: 10px; } #minorHomeLinks .minorLink img { display: block; width: 248px; height: 159px; } #minorHomeLinks .minorLink span { position: absolute; left: 0; bottom: 0; z-index: 2; display: block; width: 96%; padding: 0.5em 2%; font-size: 13px; background: gray; } /* homeProducts */ .homeProducts { } .homeProducts .homeProdTitle a { display: block; width: 100%; padding: 0.5em 0; font-size: 16px; background-color: transparent; background-position: center top; background-repeat: no-repeat; } .homeProducts .productBlock .photo { display: block; } .homeProducts .productBlock { font-size: 12px; position: relative; } .homeProducts .firstBloxk { margin-left: 0; } .homeProducts .productBlock .photo img {} /* novelties */ #novelties {margin-bottom: 2em; } #novelties h2 {color: #a5a93d; text-align: center; font-weight: normal; background:url("../images/bg_products_title.png") repeat-x scroll center center transparent; } #novelties .homeProdTitle a { background-image: url(../images/bg_title_novelties.png); } #novelties .homeProdTitle a:hover { background-image: url(../images/bg_title_novelties_hover.png); } #novelties .productBlock, #discounts .productBlock { width: 248px; border: none; position: relative; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white; border-bottom:1px solid #DCD7DE; } #novelties .productBlock:hover, #discounts .productBlock:hover { border:1px solid #888; } #novelties .productBlock .fullprice a { color: #cc2c2c; padding-top: 0.5em; } /* discounts */ #discounts {} #discounts h2 { color: #dc2d2d; text-align: center; font-weight: normal; background: url("../images/bg_products_title.png") repeat-x scroll center center transparent; } #discounts .homeProdTitle a { background-image: url(../images/bg_title_discounts.png); } #discounts .homeProdTitle a:hover { background-image: url(../images/bg_title_discounts_hover.png); } #novelties h2 span, #discounts h2 span { background: none repeat scroll 0 0 white; padding-left: 0.5em; padding-right: 0.5em; } #novelties li, #discounts li { height:300px; } /* homeArticles */ .homeArticles { width: 38.5em; border: 1px solid #c2c2c2; background: white url(../images/bg_homearticle.png) left top repeat-x; } .homeArticles .homeArticleTitle { font-size: 16px; width: 22.8em; height: 3em; margin-bottom: 0.3em; margin-left: 1.25em; background-color: transparent; background-position: left top; background-repeat: no-repeat; } .homeArticles .content { padding: 0 1.81em; } .homeArticles ul, .homeArticles .more { font-size: 11px; } .homeArticles .more { padding: 1.5em 1.8em 0.5em; text-align: right; background: transparent url(../images/bg_homearticle_bottom.png) left bottom repeat-x; } .homeArticles .more a { text-decoration: underline; } /* news */ #news { float: left; } #news .homeArticleTitle { background-image: url(../images/bg_title_news.gif); } #news ul { padding: 0 1.8em; } #news ul li { margin-bottom: 0.43em; } #news .timestamp, #news .all { font-weight: bold; color: #a90077; } #news .timestamp { } #news .tiny p { display: inline; } #news .more a:hover { color: #d9659e; } /* ratings */ #ratings { float: right; font-size: 10px; } #ratings .homeArticleTitle { background-image: url(../images/bg_title_ratings.gif); } #all #ratings .notice { margin: 0 1.66em 1em; } /* * Ciblo Cocktail - ITEMS * * @author Christophe Porteneuve * @author Julien Vignolles * @author Thomas Lecavelier * @author Gregory Jaklimovitch * @legals © 2008-2009 Ciblo SA. */ /* pageTitle */ h1.pageTitle { font-size: 17px; font-weight: normal; text-transform: uppercase; margin-bottom: 0.5em; color: #ce1d3d; } .pageDescription {margin: 2em 0; width: 70%; } #activContent .banner { margin-bottom: 1em; text-align: center; } #listingBanner { position: relative; width: 78.3em; margin-bottom: 2em; height: 10.4em; border: 1px solid #d6d6d6; overflow: hidden; } #listingBanner .description { padding: 1em 0 0 1.5em; overflow: hidden; width: 31.5em; } #listingBanner .pageTitle { font-size: 18px; margin: 0; padding-top: 0; } #listingBanner .content { font-size: 12px; margin-top: 0.5em; } #listingBanner .content a { color: #674078; text-decoration: underline; } #listingBanner .content a:hover { color: #ab3c73; } #listingBanner .bannerImage { position: absolute; top: 0; right: 0; } #listingBanner .customerDescription { width: 42em; } #listingBanner .customerDescription .bannerImage { top: 2em; right: -6em; } /* goToUp */ .goToUp { padding-left: 1.2em; text-decoration: underline; color: #674078; background: transparent url(../images/icon_gotoup.gif) left 0.6em no-repeat; } .goToUp:hover { color: #e1ba53; } /* corners */ .topLeft, .topRight, .bottomLeft, .bottomRight { position: absolute; z-index: 2; width: 2em; height: 2em; font-size: 10px; background-color: transparent; background-repeat: no-repeat; } .topLeft { left: 0; top: 0; background-position: left top; font-size: 1px;} .topRight { right: 0; top: 0; background-position: right top; font-size:1px;} .topLeftRed { left: 0; top: 0; background-position: left top; } .topRightRed { right: 0; top: 0; background-position: right top; } .bottomLeft{ left: 0; bottom: 0; background-position: left bottom; } .bottomRight { right: 0; bottom: 0; background-position: right bottom; } .border .topLeft { left: -1px; top: -1px; background-image: url(../images/corner_border_tl.png); } .border .topRight { right: -1px; top: -1px; background-image: url(../images/corner_border_tr.png); } .border .bottomLeft { left: -1px; bottom: -1px; background-image: url(../images/corner_border_bl.png); } .border .bottomRight { right: -1px; bottom: -1px; background-image: url(../images/corner_border_br.png); } .largeBorder .topLeft { left: -3px; top: -3px; } .largeBorder .topRight { right: -3px; top: -3px; } .largeBorder .bottomLeft { left: -3px; bottom: -3px; } .largeBorder .bottomRight { right: -3px; bottom: -3px; } .spritedCorners { position: relative; z-index: 0; } .spritedCorners .topLeft, .spritedCorners .topRight, .spritedCorners .bottomLeft, .spritedCorners .bottomRight { display: block; font-size: 1px; width: 6px; height: 6px; z-index: 1; background-image: url(../images/corners_gray.gif); position: absolute; } .spritedCorners .topLeftRed, .spritedCorners .topRightRed{ display: block; font-size: 1px; width: 5px; height: 5px; background-image: url(../images/corners_red.png); position: absolute; } .cartCorners .topLeft { background-position: 0 0; } .cartCorners .topRight { background-position: -3px 0; } .cartCorners .bottomLeft { background-position: 0 -3px; } .cartCorners .bottomRight { background-position: -3px -3px; } .verticalMenuCorners .active .topLeft { background-position: 0 -6px; } .verticalMenuCorners .active .topRight { background-position: -3px -6px; } .verticalMenuCorners .topLeft { background-position: 0 -9px; } .verticalMenuCorners .topRight { background-position: -3px -9px; } .verticalMenuCorners .bottomLeft { background-position: 0 -12px; } .verticalMenuCorners .bottomRight { background-position: -3px -12px; } .recentProductsCorners .topLeft { background-position: 0 -15px; } .recentProductsCorners .topRight { background-position: -3px -15px; } .recentProductsCorners .bottomLeft { background-position: 0 -18px; } .recentProductsCorners .bottomRight { background-position: -3px -18px; } .modelFilterCorners .topLeft { background-position: 0 -21px; } .modelFilterCorners .topRight { background-position: -3px -21px; } .modelFilterCorners .bottomLeft { background-position: 0 -24px; } .modelFilterCorners .bottomRight { background-position: -3px -24px; } .searchCorners .topLeft { background-position: 0 -27px; } .searchCorners .topRight { background-position: -3px -27px; } .searchCorners .bottomLeft { background-position: 0 -30px; } .searchCorners .bottomRight { background-position: -3px -30px; } .horizontalMenuCorners .topLeft { background-position: 0 -33px; } .horizontalMenuCorners .topRight { background-position: -3px -33px; } /* location */ #location { width: 100%; margin-bottom: 1.5em; font-size: 11px; color: black; } #location p, #location ul, #location ul li { display: inline; } #location p { font-weight: bold; } #location a { text-decoration: underline; color: #959595; } #location a:hover { color: #ce1d3d; } #location ul .active a { font-weight: bold; } /* pagination */ .paginationContainer { font-size: 12px; padding: 0.3em 0 0.5em; margin-top: 1em; /* FIX IE7 */ float: left; width: 100%; } .paginationContainer .count { float: left; padding: 0.3em 0; } .paginationContainer .count a { display: inline-block; font-weight: normal; font-size: 11px; margin-left: 1em; padding-left: 1.5em; color: #44474b; background: transparent url(../images/advanced_search_remove_icon.png) left center no-repeat; } .paginationContainer .count a:hover { text-decoration: line-through; color: #ab3c73; } .pagination { float: right; } .pagination a { text-decoration: underline; color: black; } .pagination .disabled { text-decoration: none; color: #b3b3b3; } .pagination .disabled, .pagination .current { cursor: default; } .pagination a, .pagination span { float: left; padding: 0.3em 0.4em; } .pagination a:hover { background-color: #f9dada; } .pagination .current, .pagination .current:hover { color: #ce1d3d; text-decoration: none; font-weight: bold; } /* productTabs */ .productTabs { margin-top: 3em; } /* tabsContent */ .tabsContainer { float: left; position: relative; bottom: -1px; width: 100%; } .tabsContainer li { float: left; width: 18em; } .tabsContainer a { display: block; position: relative; width: 98%; padding: 0.4em 0; font-size: 12px; font-weight: bold; text-align: center; color: black; background-color: #e2e2e2; } .tabsContainer a:hover { text-decoration: underline; } .tabsContainer a.active { width: 97%; cursor: default; border: 1px solid #d0d0d0; border-bottom: none; background: white url(../images/bg_tab_activ.png) repeat-x left top; } .tabsContainer a.active:hover { text-decoration: none; } .tabsContainer .active .topLeft { left: -1px; top: -1px; background-image: url(../images/corner_border_tl.png); } .tabsContainer .active .topRight { right: -1px; top: -1px; background-image: url(../images/corner_border_tr.png); } .tabsContainer .active .bottomLeft { left: -1px; bottom: -1px; background-image: url(../images/corner_border_bl.png); } .tabsContainer .active .bottomRight { right: -1px; bottom: -1px; background-image: url(../images/corner_border_br.png); } /* productTabsContainer */ .productTabsContainer { float: left; width: 72.5em; padding: 2em 0.5em 1.5em; border: 1px solid #d0d0d0; } .productTabsContainer .productBlock { margin: 0 0 0 0.5em; } /* ratings */ .ratings { font-size: 12px; width: 35em; } .ratings ul { padding-bottom: 1.5em; } .ratings ul li { padding: 0.5em 0; border-top: 1px dotted black; } .ratings ul li.first { padding-top: 0; border-top: none; } .ratings .author, .ratings .toggle, .ratings .all { font-weight: bold; color: #674078; } .ratings .timestamp { color: #555454; } .ratings ul li .reply { padding: 0.5em 1.5em; margin: 0.5em 0; background-color: #eee; } .ratings ul li .reply .author { color: black; } .ratings .toggle { float: left; } .ratings .more a:hover { color: #ab3c73; } .ratings .formButton { text-align: center; } .ratings .formButton input { font-size: 11px; width: 7.28em; height: 2em; font-weight: bold; display: inline-block; border: none; color: white; background: transparent url(../images/img_btn_submit.gif) left top no-repeat; } .ratings .formButton input:hover { background-image: url(../images/img_btn_submit_hover.gif); } /* rating form */ .ratings .title { font-weight: bold; padding-bottom: 1em; } .ratings .title a { text-decoration: underline; } .ratings .title a:hover { color: #674078; } .ratings form.content p { font-size: 11px; margin-bottom: 0.3em; } .ratings form.content textarea { font-size: 11px; background: white; color: black; width: 100%; height: 6.4em; } .ratings form.content textarea:focus { background-color: #ffd; border-color: #aaa; } #allRatings { margin: 1em 0; } #allRatings ul li { padding: 1em 0; } #squareCats { margin: 20px 0 30px 25px; display: block; font-size: 13px; } #squareCats .squareCat { width: 110px; height: 110px; float: left; margin-left: 40px; margin-bottom: 40px; } #squareCats .first { margin-left: 0; } #squareCats a { display: block; text-align: center; color: #ce1d3d; } #squareCats a:hover { text-decoration: none; } #squareCats a .title { display: block; color: #ce1d3d; text-align: center; padding-top: 0.5em; font-weight:normal;} #squareCats a:hover .title { text-decoration: underline; } #squareCats .shadow { -moz-box-shadow: 2px 2px 2px #666; -webkit-box-shadow: 2px 2px 2px #666; box-shadow: 2px 2px 2px #666; } #squareCats a:hover img { opacity:0.24; filter:alpha(opacity=24); } h2.discountsAndNovelties { font-weight: normal; text-align:center; margin-bottom: 1em; color: #626161; background: url("../images/bg_products_title.png") repeat-x scroll center center transparent; } h2.discountsAndNovelties span { background: none repeat scroll 0 0 white; padding-left: 0.5em; padding-right: 0.5em; } /* Children categories */ #subCategories ul { float: left; margin: 0 0 10px 10px; width: 177px; } #subCategories ul.first { margin-left: 0; } #subCategories ul li { display: block; } #subCategories ul li a { display: block; font-size: 12px; height: 1.5em; line-height: 1.5em; padding-left: 0.2em; } #subCategories ul li a:hover { text-decoration: underline; color: #ce1d3d; } .category_brands {margin-top:2em;} .category_brands li { float:left; width:240px; line-height: 1.6em; } .category_brands a { margin:0 0.4em; font-size: 12px; } .category_brands a:hover { color: #CE1D3D; } /* * Lightbox * * @author Christophe Porteneuve * @author Julien Vignolles * @author Gregory Jaklimovitch * @legals © 2008-2009 Ciblo SA. */ body { height: 100%; } .lightbox { position: absolute; z-index: 5000; top: expression( ( ignoreMeL = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) + 'px' ); left: expression( ( ignoreMeT = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) + 'px' ); width: 100%; height: 100%; } body > #cartNotification { position: fixed; left: 0; top: 0; } .lightbox .shader { position: absolute; z-index: 9; width: 100%; height: 100%; background-color: black; opacity: 0.5; *filter: alpha(opacity=50); } .lightbox .box { position: absolute; left: 50%; top: 50%; z-index: 10; width: 45em; height: 14em; margin-left: -22.8em; margin-top: -7.3em; font-size: 12px; text-align: center; color: black; background-color: white; /*border: 3px solid black;*/ } .lightbox .corner { position: absolute; top: 0; right: 0; padding: 0.2em 0.3em 0.5em 0.6em; font-size: 10px; /*background-color: black; color: white;*/ text-decoration: underline; } .lightbox .corner:hover { color: #ab3c73; } .lightbox .closing { width: 85%; margin: 3em auto 0; } .lightbox .closing a.submit { float: right; } .lightbox .closing a.closer { float: left; } /* cart notification */ #addToCartMessage { padding: 2em 0 1.5em; } #cartNotification .discountInfo { display: none; text-align: center; color: gray; padding-left: 4em; margin: -1em 0 2em 0; } #cartNotification .discounted .discountInfo { display: block; } #cartNotification .extendedDiscount .discountInfo span { display: block; margin-top: 0.4em; } #cartNotification .message { margin: 1em 0; padding: 0.5em 0; font-size: 14px; font-weight: bold; color: black; } #cartNotification .message span { padding: 1.5em 0 1.5em 4em; background: transparent url(../images/bg_add_cart_info.png) no-repeat left center; } #cartNotification.wider #addToCartMessage { width: 42em; margin-left: -21em; height: 32em; top: 50%; margin-top: -17.75em; _top: 1em; _margin-top: 0; } #cartNotification .similarsContainer { position: relative; width: 39em; height: 21em; overflow: hidden; margin: 2em auto 1em; } #cartNotification .similarsContainer p.sectionTitle { margin: 0 0 0.5em; padding: 0; font-weight: bold; text-align: left; color: black; font-size: 14px; } #cartNotification .similarsContainer .firstBlock { margin-left: 0; } #cartNotification .productList { font-size: 10px; } #cartNotification .productList .photo:hover .hover { display: none; } /* alert request */ body > #alertRequest { position: fixed; left: 0; top: 0; } #alertRequest .box { width: 42em; height: 17em; margin: -8.8em 0 0 -21.3em; } #alertRequest form { padding: 2em 0 1.5em; } #alertRequest p { margin-bottom: 0.5em; } #alertRequest p.intro { font-size: 1.2em; text-align: center; } #alertRequest p.intro span { font-size: 1.2em; font-weight: bold; } #alertRequest .help { font-style: italic; color: #999; } #alertRequest #edtReqAlertEmail { width: 26em; padding: 1px; } #alertRequest #alertDateRevealer { color: black; text-decoration: underline; } #alertRequest input.missing { border: 1px solid red; background: #fdd; } #alertRequest input.date { width: 6.2em; } #alertRequest input.date.jsEnabled { padding-right: 1.5em; background: url(../images/back/silk/calendar.png) right center no-repeat; } #alertRequest .closing input { float: left; } #alertRequest .closing input { float: right; } /* send to a friend */ body > #sendToAFriendRequest { position: fixed; left: 0; top: 0; } #sendToAFriendRequest .box { width: 40em; height: 28em; margin: -14.3em 0 0 -20.3em; _top: 1em; _margin-top: 0; } #sendToAFriendRequest form { padding: 2em 0 1.5em; } #sendToAFriendRequest p { width: 85%; margin: 0 auto 0.5em; text-align: right; } #sendToAFriendRequest p.intro { font-size: 1.2em; text-align: center; } #sendToAFriendRequest label { float: left; width: 14em; text-align: right; } #sendToAFriendRequest input.text { width: 20em; padding: 1px; } #sendToAFriendRequest textarea { margin-top: 0.5em; width: 100%; } #sendToAFriendRequest input.missing { border: 1px solid red; background: #fdd; } #sendToAFriendRequest .closing { margin-top: 1.5em; } #sendToAFriendRequest .closing input, #sendToAFriendRequest .closing a { float: left; } #sendToAFriendRequest .closing input { float: right; } #sendToAFriendRequest .closing a:hover { text-decoration: none; } /* * Urban locker - NEWSLETTERS * * @author Christophe Porteneuve * @author Julien Vignolles * @author Grégory Marcilhacy * @author Gregory Jaklimovitch * @legals © 2008-2009 Ciblo SA. */ #newsletters { font-size: 12px; } #newsletters .edito { margin-top: 2em; padding: 1em; border: 1px solid #ccc; } #newsletters .edito a { color: #a98011; font-weight: bold; text-decoration: underline; } #newsletters .edito a:hover { color: #775805; } #newsletters .edito li { padding-left: 1em; background: transparent url(../images/icon_activebrand.gif) left 3px no-repeat; } /* * PRODUCTS * * @author Christophe Porteneuve * @author Julien Vignolles * @author Gregory Jaklimovitch * @legals © 2008-2010 Ciblo SA. */ #all .firstBlock {clear: both; margin:0; } .productsList { float: left; display: inline;} .productsList li { height: 235px; } .productBlock { float: left; display: inline; position: relative; background-color: white; overflow: hidden; width: 175px; margin-left: 10px; margin-bottom: 10px; border: 1px solid #DCD7DE; text-align: center; } .productBlock:hover { border: 1px solid #888; } .productBlock a { display: block; font-weight: bold; text-decoration: none; } .productBlock a.title { display: block; color: #ce1d3d; text-align: center; font-size: 12px; height: 45px; line-height: 15px; padding: 4px 5px 0; overflow: hidden; } .productBlock a:hover { text-decoration: none; } #all .productBlock:hover .fn { text-decoration: underline; color: #ea001b; } .productBlock .fn { display: block; height: 30px; overflow: hidden; } .productBlock .brand { display: block; color: #888; text-transform: uppercase; } .productBlock .photo { display: block; position: relative; } .productBlock .photo img { width: 150px; height: 150px; } .productBlock .photo img.main { z-index: 1; } .productBlock .photo .hover { display: none; } .productBlock .photo .hover img { position: absolute; bottom: 0; left: 0; z-index: 2; } .productBlock .photo .hover span { font-size: 11px; position: absolute; bottom: 0; left: 0; z-index: 3; height: 2.6em; line-height: 1.3em; width: 16em; color: white; text-align: left; overflow: hidden; padding-left: 4px; opacity: 0.6; filter: alpha(opacity=60); background: black; } .productBlock .photo:hover .hover { display: block; } .productBlock .photo .label, .productBlock .fullprice .discountRate { position: absolute; right: 0; top: 0; color: white; font-size: 13px; width: 57px; height: 42px; line-height: 39px; z-index: 3; text-align: center; } .productBlock .fullprice .discountRate { top: 49px; } .selection .fullprice .discountRate { top: 73px; } #all .selection .photo .fat { right: 0.2em; top: 7em; } .productBlock .photo .discount, .productBlock .fullprice .discountRate { background: transparent url(../images/product_discount.png) 0 0 no-repeat; } .productBlock .photo .novelty { background: transparent url(../images/product_new.png) 0 0 no-repeat;} .productBlock .photo .flash { background-position: 0 -111px; } .productBlock .productDescrip { color: #959595; } .productBlock .productDescrip:hover { border-color: #ce1d3d; } .productBlock .description { color: #888; font-size: 11px; padding: 0 10px; font-weight: normal; overflow: hidden; text-align: left; } .productBlock .description strong { font-weight: normal; } .productBlock .fullprice { font-size: 18px; text-align: center; } .productBlock .fullprice a { padding: 7px 0; } .productBlock .fullprice .discountPrice { font-weight: normal; font-size: 12px; color: #888; text-decoration: line-through; margin-right: 0.5em; } .productBlock .fullprice .totalPrice.from { font-size: 9px; } .productBlock .fullprice .totalPrice .price { font-size: 18px; font-weight: bold; color: #ce1d3d; } /* Next thumb */ .next .prev_page { display: none; } .next a { width: 175px; height: 230px; padding: 0; text-decoration: none; } .next a, .next a:hover { background: white url(../images/img_listing_next_logo.gif) center top no-repeat; } .next a:hover { color: #ab3c73; background-position: 0 -230px; } .next a span { display: block; font-size: 12px; padding: 10.5em 0 0; width: 15em; height: 4.5em; text-align: center; background: #dbdbdb url(../images/img_listing_next_arrow.gif) center center no-repeat; } /* productContainer */ #productContainer { position: relative; width: 74em; } /* photoContainer */ #photoContainer { float: left; width: 32em; } #photo { position: relative; display: block; border: 1px solid #ddd; } #photo #photoZone { position: relative; } #photo, #all #productContainer .photoView, #photo #photoZone, #photo #photoZone img { width: 31.8em; height: 31.8em; } #photo #photoZone img { vertical-align: bottom; } #photo .zoom { position: absolute; bottom: 0.5em; right: 0.5em; height: 1.4em; width: 1.4em; background: transparent url(../images/bg_carousel_icons.gif) 0 0 no-repeat; } #photoZone.zoomed { cursor: none; } #photoZone #reticulum { position: absolute; left: 0; top: 0; z-index: 4243; width: 2em; height: 2em; opacity: 0.3; filter: alpha(opacity=30); display: none; border: 1px solid gray; background: white none repeat scroll 0; } #photoZone.zoomed #reticulum { display: block; } #productContainer #previewZoom { position: absolute; left: 32em; top: -0.1em; z-index: 3; background-color: white; padding: 0 5em; width: 31.9em; height: 31.9em; } #productContainer #previewZoom .container { position: relative; overflow: hidden; width: 31.7em; height: 31.7em; border: 1px solid #dedada; } #productContainer #previewZoom .container img { position: absolute; } #previewZoom .spinner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4242; background: white url(../images/spinner_large.gif) center center no-repeat; } #previewZoom .spinner p { margin-top: 60%; font-size: 1.4em; font-weight: bold; text-align: center; color: #666; } /* carousel */ #carousel { font-size: 10px; overflow: hidden; } #carousel ul { float: left; position: relative; top: 0; left: 0; text-align: left; } #carousel ul li { float: left; height: 7.6em; width: 7.6em; padding: 0.5em 0.5em 0 0; } /* padding-right, used by Carousel JS stuff */ #carousel ul li a { display: block; float: left; border: 1px solid #ddd; } #carousel ul li a:hover { border-color: #44474b; } #carousel ul img { float: left; height: 7.4em; width: 7.4em; vertical-align: middle; } #carousel .container { overflow: hidden; position: relative; width: 32.4em; } /* width, used by Carousel JS stuff */ #carousel .buttons { display: block; padding: 0.4em 0 0; } #carousel .buttons a { float: left; padding: 0 1.5em; width: 12.9em; height: 1.9em; line-height: 1.9em; text-transform: uppercase; text-decoration: none; color: black; background: #e2e2e2 url(../images/bg_carousel_icons.gif) 0 -14px no-repeat; } #carousel .buttons a:hover { background-color: #999; } #carousel .buttons .next { float: right; text-align: right; background-position: right -33px; } #all #carousel .inactive, #all #carousel .inactive:hover, #all #carousel .previous_button_disabled, #all #carousel .next_button_disabled { cursor: default; color: #adadad; } /* descripContainer */ #descripContainer { float: right; display: block; width: 36em; font-size: 11px; } #descripContainer .networks { position: absolute; top: 0; right: 0; z-index: 2; width: 108px; } #descripContainer .networks a { display: inline-block; font-size: 10px; width: 24px; height: 24px; background: transparent url(../images/bg_networks.gif) 0 0 no-repeat; } #descripContainer .networks a.twitter { background-position: 0 -24px; } #descripContainer .networks a.myspace { background-position: 0 -48px; } #descripContainer .networks a.friend { background-position: 0 -72px; } #descripContainer .networks a:hover { background-color: #ccc; } #descripContainer .networks span { display: block; color: silver; text-align: center; } #descripContainer .productTitle { float: left; } #descripContainer .brand { font-size: 15px; } #descripContainer .brand a:hover { text-decoration: none; } #descripContainer .edito { margin: 0.5em 0 2em; padding-bottom: 1.7em; border-bottom: 1px solid #ddd; } #descripContainer .edito p { margin-bottom: 0.3em; } #descripContainer .edito .intro { font-size: 12px; } #descripContainer .edito .description {} #descripContainer .edito .info span { font-size: 12px; font-weight: bold; } #descripContainer .linksContainer { width: 90%; text-align: left; margin-top: 2em; } #descripContainer .linksContainer a:hover { color: #ac1400; } #descripContainer .categorie_marques { display: block; margin-top: 2em; margin-left: auto; margin-right: auto; text-align: center; font-size: 13px; text-decoration: underline; } #descripContainer .categorie_marques:hover { color: #E62F3B; } /* addToCart */ #reloadPriceContainer { } #reloadPriceContainer .minorInfos { float: right; width: 18.3em; height: 4em; text-align: center; } #reloadPriceContainer .minorInfos p { margin-top: 0.7em; } #reloadPriceContainer .availability { font-weight: bold; } #reloadPriceContainer .shopReference { font-size: 10px; } /* productPrice */ #addToCart { position: relative; } #addToCart .majorInfos {} #addToCart .productPrice {} #addToCart .productPrice p { font-size: 12px; } #addToCart .productPrice .price { font-size: 22px; color: #e62f3b; font-weight: bold; } #addToCart .productPrice .regularPrice { margin-left: 6em; } #addToCart .productPrice .regularPrice img {vertical-align:0%; position: absolute;} #addToCart .productPrice .regularPrice span { text-decoration: line-through; } #addToCart .imgBtnContainer { float: left; width: 100%; text-align: center; } #addToCart .field { position: absolute; top: 0; left: 0; } #addToCart .field label { font-weight: bold; } #addToCart .field select { width: 10em; padding: 1px; border: 1px solid #dedada; } /* #addToCart .sizes { float: left; width: 17.5em; } */ #addToCart .sizes { display: block; font-size: 11px; padding-left: 3.5em; height: 1.6em; line-height: 1.6em; width: 10em; margin-top: 0.5em; background: transparent url(../images/icon_sizes.gif) 10px center no-repeat; color: black; text-decoration: underline; } #addToCart .sizes:hover { color: #ab3c73; } #addToCart .productReference {float: left; width: 100%; } /* assets */ .assets { clear: both; margin-top: 2em; } .assets .asset { float: left; display: inline; border: 1px solid white; text-decoration: none; height: 3.2em; width: 14em; padding-left: 5.5em; } .assets .fidelity { float: right; padding-left: 3.5em; width: 13em; height: 38px; line-height: 17px; background: transparent url(../images/bg_assets2.gif) left center no-repeat; } .assets .shipping { float: left; padding-left: 6em; width: 10em; height: 38px; line-height: 1.6em; background: transparent url(../images/bg_assets.gif) left center no-repeat; } #all .assets a:hover { color: #ce1d3d; text-decoration: none; } #all .assets .notice, #all .assets a:hover .notice { text-decoration: underline; } .assets span { display: block; } /* description */ #tdescription .description { font-size: 12px; padding: 0 1.5em; } /* ratings */ #tavisclient #ratingForm { padding-top: 1.5em; } #tavisclient ul { border-bottom: 1px solid #ccc; } #productInfo {margin-top: 1em; margin-bottom: 3em; } #productInfo p.title {color: #ce1d3d; font-weight: bold; } #productInfo p.content {padding-top:1em; padding-left: 1em; } #productInfo .productInfoLeft {width: 32em; float: left; } #productInfo .productInfoRight {width: 390px; height: 250px; float: right; background: transparent url(../images/bg_feedback.jpg) } #productInfo .productInfoRight span {padding: 6em 4em 3em; display: block; } #productInfo .productInfoLeft #productComposition {margin-top: 2em; } /* * Homepage slideshow * * @author Christophe Porteneuve * @author Julien Vignolles * @author Thomas Lecavelier * @author Gregory Jaklimovitch * @legals © 2008-2009 Ciblo SA. */ /* Photos > Carousel */ #majorHomeLinks { float: left; position: relative; z-index: 0; width: 509px; height: 250px; } #mainZone { position: relative; z-index: 0; float: left; width: 509px; height: 250px; } #majorLinksCarousel { position: absolute; bottom: 0.7em; right: 1em; z-index: 10; } /*#majorLinksCarousel ol { list-style-type: none; position: relative; top: 0; }*/ #majorLinksCarousel li { float: left; display: inline; margin-left: 0.2em; width: 24px; } #majorLinksCarousel li a { display: block; width: 100%; height: 24px; font-size: 14px; text-align: center; line-height:23px; background: transparent url(../images/buttons_slideshow.png) left top no-repeat; } #majorLinksCarousel li a:hover {text-decoration: none; border-color: white; } /* Photos > Slideshow controls */ #majorHomeLinks .container, #majorHomeLinks .container ol { float: left; } #majorHomeLinks .controls { float: left; } #majorHomeLinks .controls a { float: left; display: inline; margin-left: 0.2em; width: 24px; height: 24px; background: transparent url(../images/buttons_slideshow.png) left top no-repeat; } #majorHomeLinks .controls a.prev { background-position: 0 0; } #majorHomeLinks .controls a.play { background-position: -24px 0; } #majorHomeLinks .controls a.active { background-position: -48px 0; } #majorHomeLinks .controls a.next { background-position: -54px 0; } #majorHomeLinks a.default { background-position: -96px -24px; } #majorHomeLinks .controls a.prev:hover { background-position: 0 -24px; } #majorHomeLinks .controls a.play:hover { background-position: -24px -24px } #majorHomeLinks .controls a.active:hover { background-position: -48px -24px } #majorHomeLinks .controls a.next:hover { background-position: -54px -24px; } #majorHomeLinks a.default:hover { background-position: -96px 0; } #majorHomeLinks .controls ol {float: left; } /* Photos > View */ #photoZone { width: 509px; height: 250px; position: relative; z-index: 5; } #photoZone .photoView { position: absolute; left: 0; top: 0; z-index: 10; width: 100%; height: 250px; } #photoZone .photoView a { display: block; position: relative; border: 1px solid #DCD7DE; } #photoZone .photoView a:hover { border-color: #888; } #photoZone img { left: 0; top: 0; width: 507px; height: 248px; } #photoZone .photoTitle { position: absolute; left: 0; bottom: 0; font-size: 16px; height: 2.2em; line-height: 2.2em; color: white; font-weight: bold; text-align: left; text-indent: 0.7em; font-family: Verdana, Arial, sans-serif; } #photoZone #indicator { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; background: white url(../images/spinner_large.gif) center center no-repeat; opacity: 0.5; filter: alpha(opacity=50); } /* #controls { margin-top: 0.5em; padding: 0.8em; height: 2.5em; color: white; position: relative; background: #e1d6af url(../images/multimedia_controls_br.png) bottom right no-repeat; text-align: center; } #controls .corner { position: absolute; width: 5px; height: 5px; font-size: 1px; background-repeat: no-repeat; } #controls .topLeft { top: 0; left: 0; background-image: url(../images/multimedia_controls_tl.png); } #controls .topRight { top: 0; right: 0; background-image: url(../images/multimedia_controls_tr.png); } #controls .bottomLeft { bottom: 0; left: 0; background-image: url(../images/multimedia_controls_bl.png); } #speed { position: absolute; left: 0.8em; top: 0.8em; line-height: 1.4em; text-align: left; padding-left: 35px; background: transparent url(../images/multimedia_diapo.png) center left no-repeat; } #speeds, #speeds a { color: #463f2b; text-decoration: none; } #speeds a.active { text-decoration: underline; } #speeds a:hover { color: black; } #photoNav { position: relative; width: 10em; height: 2.5em; margin: 0 auto; } #photoNav a { float: left; display: block; padding: 0.6em 1em; } #photoNav #btnPlayPause { width: 11px; height: 11px; } #photoNav #btnPlayPause img.pause { display: none; } #photoNav #btnPlayPause.active img.play { display: none; } #photoNav #btnPlayPause.active img.pause { display: inline; } */ /* * Ciblo Cocktail - PURCHASE PAYMENT STEPS * * @author Christophe Porteneuve * @author Julien Vignolles * @author Thomas Lecavelier * @author Gregory Jaklimovitch * @legals © 2008-2009 Ciblo SA. */ .emptyCart { font-size: 16px; text-align: center; padding-right: 1.5em; } /* StepsHeader */ #steps { width: 53em; margin: 2em 0 5em; } #steps ol { float: left; width: 740px; height: 31px; background: white url(../images/bg_payment_process.png) no-repeat;} #steps li { float: left; width: 148px; height: 31px; line-height: 31px; } #steps li .stepNumber { position: relative; } #steps li .stepTitle { font-size: 12px; font-weight: bold; } #steps .step1 { background-position: 0 0; } #steps .step2 { background-position: 0 -31px; } #steps .step3 { background-position: 0 -62px; } #steps .step4 { background-position: 0 -93px; } #steps .step5 { background-position: 0 -124px; } #steps li .active { color: white; } #steps li .stepNumber { display: block; padding: 0 1.5em; } #steps li a:hover { text-decoration: underline; } /* cartForm */ /* cartTable */ .cartTable { width: 100%; text-align: center; } .cartTable, .cartTable th {border:none; } .cartTable {} .cartTable .action { background-color: white; } .cartTable td { border: none; border-left: hidden; border-right: hidden; } .cartTable .color {} .cartTable .highlighted { background-color: #efefef; } /* thead */ .cartTable th { padding: 0.5em 1em; font-size: 12px; background-color: #e0e0e0; color: black; border: 1px solid #e0e0e0; } .cartTable th.delete { padding: 0.5em 0; } /* tbody */ .cartTable td { padding: 0.5em 0; font-size: 12px; } .cartTable tfoot td { padding: 0.2em 0; } .cartTable tfoot .large td { padding-top: 0.5em; padding-bottom: 0.5em; } .cartTable tbody td { border-top: 1px solid white; } .cartTable .hasText { text-align: left; } .cartTable .hasPrice { text-align: right; padding-right: 20px; } .cartTable .hasImage { padding-left: 0.5em; padding-right: 0.5em; } /* tfoot */ .cartTable tfoot td { border-top: 1px solid white; } .cartTable tfoot .priceTitleCell { text-align: right; } .cartTable tfoot .hasPrice { padding-left: 1em; } .cartTable tfoot .totalPrice td { font-size: 12px; font-weight: bold; text-transform: uppercase; } .cartTable tfoot .recalculateBtn { padding-right: 3%; } .cartTable .action .hasText { text-indent: 1em; font-weight: bold; text-align: center; } .cartTable .action .promo input { width: 8em; padding: 1px; } .cartTable .action .promo select { width: 13.3em; padding: 1px; } .cartTable .action .recalculate input { width: 94px; height: 21px; } /* step1 */ #viewCartTable .col1 img, #summaryTable .col1 img { width: 5.4em; height: 5.4em; border: 1px solid #ece8ed; } #viewCartTable .col2 a, #summaryTable .col2 a { text-decoration: underline; } #viewCartTable .col4 input, #summaryTable .col4 input { width: 4em; text-align: center; } #viewCartTable .col7 input { border: none; background-color: transparent; } #viewCartTable .submitContainer div {} #viewCartTable .submitContainer .discountInfo { position: absolute; left: 0; top: 3.1em; color: gray; font-size: 12px; } #viewCartTable tfoot, #summaryTable tfoot { background-color: #efefef; } /* step2 */ #stepAddress { margin-bottom: 2em; } #stepAddress em { font-style: normal; text-decoration: underline; } #stepAddress hr { border: none; border-top: 1px solid #444; height: 0; margin-top: 2em; } #stepAddress .topInfo { position: relative; padding-left: 2em; } /* topInfo */ .topInfo .topTitle { margin-right: 3em; } .topInfo .topLink { margin-left: 1em; padding-left: 2em; font-weight: bold; background: transparent url(../images/icon_arrow_address.gif) left 0.1em no-repeat; } /* diffAddress */ #stepAddress #differentAddress { position: relative; font-size: 14px; margin: 2em 0 1em; } #stepAddress #differentAddress input { border: none; margin-right: 0.7em; background: none; } #stepAddress #differentAddress label { font-weight: bold; color: black; } #billingAddresses { width: 100%; } #stepCarriers, #stepSummary { width: 100%; } #stepCarriers{ padding: 0; } #stepSummary { padding: 0 0 2em; } /* step3 */ #stepCarriers td { padding: 1em; border-top: 1px solid white; } /* thead */ #stepCarriers .costCell a { font-weight: normal; text-decoration: underline; color: #B3860D; } #stepCarriers .costCell a:hover { color: #E1BA53; } /* tbody */ #stepCarriers .col2 { font-weight: bold; } #stepCarriers .col4 { font-size: 13px; font-weight: bold; } /* step4 */ #summaryTable {border-left: 1px solid #e1e0e1;border-right: 1px solid #e1e0e1; } #summaryTable .priceInfo { text-align: right; } #summaryTable .totalPriceTitle { font-weight: bold; text-transform: uppercase; } #summaryTable .totalPrice { font-size: 15px; font-weight: bold; } /* summaryBottom */ #summaryBottom { /*position: relative;*/ margin: 0 auto; background-color: #efefef; padding-bottom: 2em; } /* selectedAdresses */ #stepSummary #selectedAdresses { width:510px; font-size: 12px; margin-left: 4em; margin-right: 4em; margin-top: 40px; background-color: #e8e8e8; } #stepSummary #selectedAdresses .customerAddress { width: 20em; } #stepSummary #selectedAdresses .customerAddress span { margin-left: 2.5em; } #stepSummary #selectedAdresses .addressTitle { margin-bottom: 0.3em; padding: 0.3em; font-weight: bold; color: black; margin-left: 2.5em; } /* messageContainer */ #stepSummary .messageContainer { margin: 2em 4em; font-size: 11px; } #stepSummary .messageContainer label { display: block; margin-bottom: 0.5em; font-weight: bold; text-align: left; } #stepSummary .messageContainer textarea { width: 100%; height: 6em; } #stepSummary #termsOfUse { margin: 0 auto; font-size: 12px; text-align: center; } #stepSummary #termsOfUse .error { color: #cb2c2c; } /* step 5 & 7 */ .purchasePad { background-color: white; }/* border: 1px solid #e1e1e1; }*/ .purchasePad h1.title { font-size: 16px; height: 2.2em; line-height: 2.2em; color: #ce1d3d; font-weight: bold; } .purchasePad .purchaseContent {background-color: #efefef; padding-bottom: 1em; } .purchasePad h2.amount { font-size: 14px; text-align: center; } .purchasePad h2.amount .totalPrice { font-size: 16px; color: #ce1d3d; } .purchasePad .meanContent { font-size: 11px; margin-top: 2em; background-color: #f1f1f3; border: 1px solid #ccc; width: 100%; } .purchasePad .meanContent .info { float: left; width: 31.8em; padding: 1em; } .purchasePad .meanContent .info h3 { font-size: 14px; text-decoration: underline; } .purchasePad .meanContent .info p { margin-top: 0.5em; } .purchasePad .meanContent .content { float: right; width: 28em; padding: 1em; text-align: center; } .purchasePad .banks form { margin-top: 1em; } .purchasePad .banks input { border: none; } .purchasePad .button .content a { margin-top: 1em; } /* Text */ #stepMeanDetails .text { font-size: 12px; width: 45em; margin: 2em auto 1em; } .purchasePad .text p { margin-top: 0.5em; } .purchasePad .text ul { margin-top: 0.5em; list-style: square; } .purchasePad .text ol { margin-top: 0.5em; list-style: decimal; } .purchasePad .text li { margin-left: 2em; padding-left: 1em; } .purchasePad .text table { border: 1px solid #888; margin: 1em auto; } .purchasePad .text table td, .purchasePad .text table th { padding: 0.2em 0.3em; border: 1px solid #888; } .purchasePad .text table th { font-weight: bold; } /* Paid */ .purchasePad .importantInfo { font-size: 12px; width: 45em; margin: 1em auto; padding: 1em 1em 1em 3.5em; background-color: #f1f1f3; border: 1px solid #ccc; } .purchasePad .ok { color: #48a42a; border: 1px solid #48a42a; background: #d4f4cd url(../images/icon_notice.gif) 1em center no-repeat; } .purchasePad .ko { color: #cb2c2c; border: 1px solid #cd3838; background: #f4dbcd url(../images/icon_error.gif) 1em center no-repeat; } .purchasePad .confirmation { font-size: 12px; text-align: center; } .purchasePad .info { font-size: 12px; padding-bottom: 1em; margin-bottom: 1em; text-align: center; } /* * Ciblo Cocktail - Layout - VERTICAL MENU * * @author Christophe Porteneuve * @author Julien Vignolles * @author Thomas Lecavelier * @author Gregory Jaklimovitch * @author Grégory Marcilhacy * @legals © 2008–2010 Ciblo SA. */ /* leftBlock */ #contentLeft .leftBlock { display: block; width: 100%; margin-bottom: 0.8em; } #contentLeft .blockTitle { color: #535353; text-transform: uppercase; border: 1px solid #DCD7DE; border-bottom: none; font-size: 12px; font-weight: bold; padding-top: 0.4em; padding-bottom: 0.3em; text-align: center; } #contentLeft .leftBlock .red { color: white; background-color: #ce1d3d; border: 1px solid #ce1d3d; } #contentLeft a { text-decoration:underline; } #contentLeft a:hover { color: #ce1d3d; } #contentLeft .content { padding: 0.5em 1em; border: 1px solid #DCD7DE; border-top: none; } #subCat a { padding-left: 0.5em; height: 1.6em; line-height: 1.6em; display: block; } #contentLeft a.allBrands { font-size: 11px; display: block; margin-top: 1em; text-align: center; } #contentLeft .leftBlock .noBorders { border: none; } #contentLeft .content a.logo { border: 1px solid white;} #contentLeft .content a.logo:hover { border: 1px solid #ce1d3d;} #listBrands { float: left; width: 100%; } #listBrands li { float: right; margin-left: 0.3em; padding: 0; padding-top: 0.3em; } #listBrands li a { width: 70px; height: 35px; line-height: 35px; text-align: center; overflow: hidden; } #lastProducts { float: left; padding: 0 0 0.4em 0.2em; } #lastProducts li { float: left; padding: 0; padding-top: 0.3em; } #lastProducts li.first, #listBrands li.first { float: left; margin-left: 0; clear: both; padding-top: 0.3em; } #lastProducts li a, #listBrands li a { display: block; padding: 0; } #lastProducts li a, #listBrands li a { border: 1px solid white; } #lastProducts li a:hover, #listBrands li a:hover { border-color: #888; } #lastProducts img, #listBrands img { padding: 0; } #lastProducts img { width: 50px; height: 50px; } #subCat { padding: 0; font-size: 12px; } #subCat li { border-top: 1px solid #DCD7DE; padding-left: 0; } #subCat li.first { border-top: none; } #subCat a { text-decoration: none; } #subCat a:hover { background-color: #f9dada; color: black; } #subCat li.current { background-color: #efefef; color: black; } #listAdvantages ul { padding: 0.6em 0; /*border-bottom: 1px solid #dcd7de;*/ } #listAdvantages ul li { width: 125px; padding-left: 35px; margin-top: 10px; font-size: 12px; line-height: 14px; text-align: left; } #all .engagement .blockTitle { padding: 0.8em 0 0; } .engagement ol { padding-top: 0.5em; } .engagement ol li { font-size: 11px; margin-bottom: 0.5em; padding-left: 0.8em; background: transparent url(../images/icon_marker2.gif) left 5px no-repeat; } .leftBlock .show { font-size: 11px; display: block; text-align: center; } #listAdvantages .shipment { background: white url(../images/bg_shipment.png) left center no-repeat; margin-top: 0; } #listAdvantages .shippingCost { background: white url(../images/bg_shippingCost.png) left center no-repeat; } #listAdvantages .payments { background: white url(../images/bg_payments.png) left center no-repeat; } #listAdvantages .advice { background: white url(../images/bg_conseil.png) left center no-repeat; } #listAdvantages .customer { background: white url(../images/bg_customer.png) left center no-repeat; padding: 2px 0 1px 35px; } #contentLeft .newsletterBlock .content { background: #f3f3f3; padding-top: 0.5em; } #contentLeft .newsletterBlock { background: #f3f3f3; } #contentLeft .newsletterBlock ul { } #contentLeft .newsletterBlock li { font-size: 11px; margin-bottom: 0.5em; padding-left: 0.8em; background: transparent url(../images/icon_marker2.gif) left 5px no-repeat; } #contentLeft .newsletterBlock .blockTitle { padding-left: 55px; text-align: left; background: #f3f3f3 url(../images/bg_newsletter.png) 10px center no-repeat; } #newsletterBox { width: 110px; padding: 1px; border: 1px solid #d8d8d8; border-top: 1px solid #959595; color: #555; background: white; } #newsletterBox:focus { background: #fee; border-color: #777; } #newsletterForm p { padding: 0.5em; } #newsletterForm .newsBox { width: 26px; height: 19px; padding-bottom: 1em; cursor: pointer; font-size: 11px; color: white; margin-left: 0.4em; border: none; background: white url(../images/bg_btn_ok.gif) right bottom no-repeat; } /* leftForm */ #contentLeft .leftForm { padding: 0.5em 0.5em 1em; background: black; } #contentLeft .leftForm .formTitle { margin-bottom: 0.5em; font-size: 12px; color: white; } #contentLeft .leftForm .searchBox { width: 10em; padding: 0.25em 0; background: white; } #contentLeft .leftForm .leftFormInfo { width: 80%; margin-top :0.5em; color: white; } #searchForm .formTitle { width: 5.5em; padding: 0.5em 2em 0 0; background: transparent url(../images/icon_search.gif) right top no-repeat; } #newsletterForm .formTitle { background: transparent url(../images/bg_newsletter_title.png) center no-repeat; } #contentLeft .searchLign { position: relative; width: 100%; } #contentLeft .searchLign .okBtn { position: absolute; right: 0; top: 0; z-index: 2; } /* catMenu */ .catMenu { padding: 0.3em 0 2em; border: 1px solid #44474b; } .catMenu .catTitle { display: block; margin: 0.5em 0.7em; font-size: 15px; font-weight: bold; background: transparent; background-position: center; background-repeat: no-repeat; } #menCatMenu .catTitle { background-image: url(../images/bg_mencat_title.png); } #womenCatMenu .catTitle { background-image: url(../images/bg_womencat_title.png); } #accessoriesCatMenu .catTitle { background-image: url(../images/bg_accesoriescat_title.png); } .catMenu li { border-bottom: 1px solid #dadadb; } .catMenu li a { display: block; font-size: 11px; font-weight: bold; color: #44474b; padding: 0 1em; } .catMenu li.active a, .catMenu li a:hover { text-decoration: none; background-color: #dadadb; } /* loyaltyBlock */ #loyaltyBlock { display: block; padding: 1em 0.5em; font-size: 12px; font-weight: bold; text-decoration: underline; border: 1px solid #44474B; } #loyaltyBlock:hover { color: gray; } /* placeholder*/ .placeholder { color: #888; } #contentLeft .banner { margin-top: 1em; } .calendar_date_select { color: white; border: #777 1px solid; display: block; width: 195px; z-index: 1000; } .calendar_date_select thead th { font-weight: bold; background-color: #aaa; border-top: 1px solid #777; border-bottom: 1px solid #777; color: white !important; } .calendar_date_select .cds_buttons { text-align: center; padding: 5px 0px; background-color: #555; } .calendar_date_select .cds_footer { background: white; color: #1d8da3; padding:3px; font-size:12px; text-align:center; } .calendar_date_select table { margin: 0px; padding: 0px; } .calendar_date_select .cds_header { background: white; border-bottom: 2px solid #aaa; text-align:center; } .calendar_date_select .cds_header span { font-size:15px; color: black; font-weight: bold; } .calendar_date_select select { font-size:11px;} .calendar_date_select .cds_header a:hover { color: white; } .calendar_date_select .cds_header a { width:22px; height:20px; text-decoration: none; font-size:14px; color:black !important; } .calendar_date_select .cds_header a.prev { float:left; } .calendar_date_select .cds_header a.next { float:right; } .calendar_date_select .cds_header select.month { width:90px; } .calendar_date_select .cds_header select.year { width:61px; } .calendar_date_select .cds_buttons a { color: white; font-size: 9px; } .calendar_date_select td { font-size:12px; width: 24px; height: 21px; text-align:center; vertical-align: middle; background-color: #fff; } .calendar_date_select td.weekend { border-left: 1px solid #ddd; } .calendar_date_select td.weekend, .calendar_date_select td.weekend div { background-color: #eef1f3; color: gray; } .calendar_date_select td div { color: #000; } .calendar_date_select td div.other { color: #ccc; } .calendar_date_select td.selected div { color: #1e8da4; font-weight: bold; } .calendar_date_select tbody td { border-bottom: 1px solid #ddd; } .calendar_date_select td.weekend.selected, .calendar_date_select td.weekend.selected div { background-color: silver; } .calendar_date_select td.hover { background-color:#ccc; } .calendar_date_select td.today { border: 1px dashed #999; }