/*********************************************************** - ATTRIBUTS GLOBAUX - /**********************************************************/ /*** suppression des marges ***/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, em, img, fieldset, strong, ol, ul, li, form, label, table, tr, th, td { margin: 0; padding: 0 } a img { border: none } /*** style global du document ***/ html, body { height: 100% } body { font: normal 12px Arial; color: #333333; cursor: default; background: #955E5F url(../gfx/header_footer/alrBody.jpg) repeat-x; overflow-y: scroll; /overflow-y: hidden } /*********************************************************** - DEFINITION DU HEADER FOOTER ET BARRE RUBRIQUE - /**********************************************************/ /*** définition du bloc container ***/ div#alrContainer { /zoom: 1; position: relative; width: 988px; margin: auto; padding-top: 0px } /*** définition du bloc header ***/ div#alrContainer div#alrHeader { height: 120px; background: transparent url(../gfx/header_footer/alrHeader.jpg) no-repeat } /*** définition du bloc Rubrique ***/ div#alrContainer div#alrBarRubrique { height: 30px; line-height:30px; vertical-align:middle; padding-bottom:-1px; background: transparent url(../gfx/header_footer/altTabRub.gif) repeat-x } /*** définition du bloc Recherche ***/ .alrBlocRechercher { width:194px; float:right; height:28px; line-height:28px; font-weight:bold; color:#333333; padding-top:2px; _padding-top:5px } /*** définition du bloc footer ***/ div#alrContainer div#alrFooter { height: 49px; padding: 25px 8px 10px 0; text-align: center; background: transparent url(../gfx/header_footer/alrFooter.gif) no-repeat; color:#999999 } /*** définition du bloc footer link ***/ div#alrContainer div#alrFooterLink { padding: 10px 20px; border-left: 1px solid #9A171A; border-right: 1px solid #9A171A; background: #fff } /*********************************************************** - DEFINITION DU BODY - /**********************************************************/ /*** déclaration du bloc body ***/ div#alrBody { /zoom: 1; position: relative; border-top: 1px solid #9A171A; border-left: 1px solid #9A171A; border-right: 1px solid #9A171A; background: #fff url(../gfx/header_footer/alrBodyIn.jpg) repeat-x; } /*** déclaration de la colonne de gauche ***/ div#alrBodyLeft { float: left; width: 200px } /*** déclaration de la colonne du milieu ***/ div#alrBodyMiddle { float: left; width: 586px } /*** déclaration de la colonne de gauche détail produit ***/ div#alrBodyProdLeft { float: left; width: 210px } /*** déclaration de la colonne de gauche détail produit ***/ div#alrBodyProdRight { float: right; width: 350px } /*** déclaration de la colonne de droite ***/ div#alrBodyRight { float: right; width: 200px } /*** déclaration de la colonne principale ***/ div#alrBodyMain { float: right; width: 748px } /*********************************************************** - DEFINITION DE LA BARRE RUBRIQUE - /**********************************************************/ /*** Onglet des rubriques ***/ #tabsI { width:100%; height:100% } #tabsI ul {margin:0; padding:-1px 10px 0 198px; list-style:none } #tabsI li {display:inline; margin:0; padding:0 } #tabsI a {line-height:25px; float:left; background:url("../gfx/header_footer/alrTabLeft.gif") no-repeat left top; margin:0; padding:0 0 0 9px; text-decoration:none; font-weight:bold; white-space:nowrap; font-family:Tahoma, Verdana; font-size:14px } #tabsI a span {float:left; display:block; background:url("../gfx/header_footer/alrTabRight.gif") no-repeat right top; padding:2px 15px 4px 6px; color:#333333 } #tabsI a span {float:none } #tabsI a:hover span {color:#464646 } #tabsI a:hover {background-position:0% -42px } #tabsI a:hover span {background-position:100% -42px } /*********************************************************** - DEFINITION DES LIENS - /**********************************************************/ a { color: #660000; text-decoration: none; font-weight: bold; } a:hover { color: #000000; text-decoration: underline; font-weight: bold; } /* lien gris foncé sans soulignement avec rollover jaune foncé soulignemente */ a.alrLink1 { color: #414141; text-decoration: none; font-weight: bold; } a.alrLink1:hover { color: #FF9900; text-decoration: underline; font-weight: bold; } /* lien rouge foncé sans soulignement avec rollover gris foncé soulignemente */ a.alrLink2 { color: #7D3B3C; text-decoration: none; font-weight: bold; } a.alrLink2:hover { color: #A6181A; text-decoration: underline; font-weight: bold; } a.alrLink2n { color: #B90400; text-decoration: none } a.alrLink2n:hover { color: #414141; text-decoration: underline } /* lien gris foncé sans soulignement avec rollover jaune foncé soulignemente */ a.alrLink5 { color: #333333; text-decoration: none; font-weight: bold; } a.alrLink5:hover { color: #BA7465; text-decoration: underline; font-weight: bold; } /* lien rouge foncé sans soulignement avec rollover gris foncé soulignemente */ a.alrLink6 { color: #FFFFFF; text-decoration: none; font-weight: bold; } a.alrLink6:hover { color: #FFFFFF; text-decoration: underline; font-weight: bold; } a.alrLink6n { color: #FFFFFF; text-decoration: none } a.alrLink6n:hover { color: #FFFFFF; text-decoration: underline } /* lien rouge foncé sans soulignement avec rollover gris foncé soulignemente */ a.alrLink7 { color: #BA7465; text-decoration: none; font-weight: bold; } a.alrLink7:hover { color: #CE9385; text-decoration: underline; font-weight: bold; } a.alrLink7n { color: #BA7465; text-decoration: none } a.alrLink7n:hover { color: #CE9385; text-decoration: underline } /* lien bleu clair en gras avec soulignement avec rollover */ a.alrLink4b { color: #5B74A6; font-weight: bold; text-decoration: none } a.alrLink4b:hover { color: #95A4C6; text-decoration: none; font-weight: bold } /* lien bleu claire sans soulignement avec rollover bleu claire */ a.alrLink4 { color: #5B74A6; text-decoration: none } a.alrLink4:hover { text-decoration: underline } /*********************************************************** - DEFINITION DES BOUTONS - /**********************************************************/ /*** boutons actifs ***/ /* bouton petit rouge */ a.alrBtnA1 { display: block; padding: 0 0 0 9px; text-align: center; text-decoration: none; background: transparent url(../gfx/btn/ultBtnLeftA.gif) no-repeat 0 0 } a.alrBtnA1 span { display: block; padding: 0 13px 2px 8px; font: bold 12px/19px Arial; color: #FFFFFF; text-decoration: none; background: transparent url(../gfx/btn/ultBtnRightA.gif) no-repeat 100% 0 } a.alrBtnA1:hover { background-position: 0 -22px } a.alrBtnA1:hover span { text-decoration: none; background-position: 100% -22px } /* bouton petit gris sur fond transparent */ a.alrBtnA2 { display: block; padding: 0 0 0 9px; text-align: center; text-decoration: none; background: transparent url(../gfx/btn/ultBtnLeftA.gif) no-repeat 0 -66px } a.alrBtnA2 span { display: block; padding: 0 13px 2px 8px; font: bold 12px/19px Arial; color: #FFFFFF; text-decoration: none; background: transparent url(../gfx/btn/ultBtnRightA.gif) no-repeat 100% -66px } a.alrBtnA2:hover { background-position: 0 -88px } a.alrBtnA2:hover span { text-decoration: none; background-position: 100% -88px } /*********************************************************** - DEFINITION DES COULEURS DE TEXTE - /**********************************************************/ /* couleur rouge fonce */ .alrTxt2 { color: #8D0400 } .alrTxt2b { color: #8D0400; font-weight: bold } .alrTxt2bBig { color: #FF0000; font-weight: bold; font-size:14px } .alrTxt4bBig { color: #FFFFFF; font-weight: bold; font-size:14px } /* couleur vert fonce */ .alrTxt3bBig { color: #008C03; font-weight: bold; font-size:14px} /*********************************************************** - DEFINITION DES BLOCS GENERIQUES - /**********************************************************/ /*** déclaration du header des blocs ***/ /* header bloc colonnes */ div.alrBlocHeader { height: 23px; padding-left: 28px; background: transparent url(../gfx/common/ultBlocHeadersLeft.png) no-repeat } div.alrBlocHeader h2 { height: 23px; padding: 0 5px 0 10px; font: bold 12px Arial; line-height: 23px; color: #8D0400; background: transparent url(../gfx/common/ultBlocHeadersRight.png) no-repeat 100% 0 } /* header bloc colonnes Gauche */ div.alrBlocHeaderLeft { height: 23px; padding-left: 28px; background: transparent url(../gfx/common/alrBlocHeadersLeft.gif) no-repeat } div.alrBlocHeaderLeft h2 { height: 23px; padding: 3px 5px 0 3px; font: bold 12px Arial; line-height: 16px; color: #ffffff; background: transparent url(../gfx/common/alrBlocHeadersRight.gif) no-repeat 100% 0 } /* header bloc colonnes Droite */ div.alrBlocHeaderRight { height: 23px; padding-left: 28px; background: transparent url(../gfx/common/alrBlocHeadersLeft.gif) no-repeat 0 -90px } div.alrBlocHeaderRight h2 { height: 23px; padding: 3px 31px 0 3px; font: bold 12px Arial; line-height: 16px; color: #ffffff; background: transparent url(../gfx/common/alrBlocHeadersRight.gif) no-repeat 100% -66px } /* header bloc center */ div.alrBlocHeaderCenter { height: 8px; padding-left: 28px; background: transparent url(../gfx/common/alrBlocHeadersLeft.gif) no-repeat 0 -72px } div.alrBlocHeaderCenter h2 { height: 8px; background: transparent url(../gfx/common/alrBlocHeadersRight.gif) no-repeat 100% -48px; font: bold 12px Arial } /* header avec fond gris */ div.alrBlocHeaderGray { height: 8px; padding-left: 28px; background: transparent url(../gfx/common/alrBlocHeadersLeft.gif) no-repeat 0 -81px } div.alrBlocHeaderGray h2 { height: 8px; background: transparent url(../gfx/common/alrBlocHeadersRight.gif) no-repeat 100% -57px; font: bold 12px Arial } /*** déclaration du contenu des blocs ***/ /* contenu blanc */ div.alrBlocBody { /zoom: 1; background: #FFFFFF; border-left: 1px solid #AC1A1C; border-right: 1px solid #AC1A1C; text-align:center } div.alrBlocBodyLeft { /zoom: 1; background: #FFFFFF; text-align:center; background: url(../gfx/common/alrBackBlocLeft.jpg) repeat-y; } div.alrBlocBodyRight { /zoom: 1; background: #FFFFFF; text-align:center; background: url(../gfx/common/alrBackBlocRight.jpg) repeat-y; } div.alrBlocBody h2 { height: 8px; background: transparent url(../gfx/common/alrBlocHeadersRight.gif) no-repeat 100% -57px; font: bold 12px Arial } /*** déclaration du footer des blocs ***/ /* footer avec fond blanc */ div.alrBlocFooter { height: 8px; padding-left: 8px; background: transparent url(../gfx/common/alrBlocFootersLeft.gif) no-repeat 0 -27px } div.alrBlocFooter div.alrBlocFooterRight { height: 8px; background: transparent url(../gfx/common/alrBlocFootersRight.gif) no-repeat 100% -27px } div.alrBlocFooterCLeft { height: 8px; padding-left: 8px; background: transparent url(../gfx/common/alrBlocFootersLeft.gif) no-repeat } div.alrBlocFooterCLeft div.alrBlocFooterRightCLeft { height: 8px; background: transparent url(../gfx/common/alrBlocFootersRight.gif) no-repeat 100% 0 } div.alrBlocFooterCRight { height: 8px; padding-left: 8px; background: transparent url(../gfx/common/alrBlocFootersLeft.gif) no-repeat 0 -18px } div.alrBlocFooterCRight div.alrBlocFooterRightCRight { height: 8px; background: transparent url(../gfx/common/alrBlocFootersRight.gif) no-repeat 100% -18px } /* footer avec fond gris */ div.alrBlocFooterGray { height: 8px; padding-left: 8px; background: transparent url(../gfx/common/alrBlocFootersLeft.gif) no-repeat 0 -9px } div.alrBlocFooterGray div.ultBlocFooterRight { height: 8px; background: transparent url(../gfx/common/alrBlocFootersRight.gif) no-repeat 100% -9px } /*** déclaration des tailles des blocs ***/ .alrBlocSizeCenter { padding: 0px 0px 8px 8px; width:570px } .alrBlocSizeListRub { float:left; text-align:center; padding:8px 4px; cursor:pointer; width:133px } .alrBlocSizeListProd { padding:4px 4px; width:181px } .alrBlocSizePictProd { padding:4px 4px; width:200px } /*********************************************************** - DEFINITION DES BARRES DE PAGINATION - /**********************************************************/ /*** définition de la pagination membres ***/ div.alrPaginationMembers { text-align: left; line-height: 32px; height: 32px; font-size: 11px; margin-bottom: 8px } div.alrPaginationMembers div.alrPaginationMembersLeft { float: left; width: 60px; height: 32px; _margin-right: -3px; background: transparent url(../gfx/common/alrPaginationBgLeft.gif) no-repeat } div.alrPaginationMembers div.alrPaginationMembersRight { height: 32px; padding: 0 10px 0 70px; /padding: 0 10px; background: transparent url(../gfx/common/alrPaginationBgRight.gif) repeat-x 100% 0; color:#FFFFFF } div.alrPaginationMembers div.alrPaginationMembersRight2 { height: 32px; padding: 0 10px 0 70px; /padding: 0 10px; background: transparent url(../gfx/common/alrPaginationBgRight2.gif) repeat-x 100% 0; color:#FFFFFF } div.alrPaginationMembers a.alrPaginationLeft { display: block; float: left; width: 116px; height: 18px; line-height: 18px; margin-top: 7px; color: #60646C; text-decoration: none; background: transparent url(../../img/main/common/ultPaginationPrev.gif) no-repeat } div.alrPaginationMembers span { display: block; background: transparent url(../gfx/common/alrPaginationBgPages.gif) no-repeat 50% } /*********************************************************** - DEFINITION DES FORMULAIRE - /**********************************************************/ /*** séparateurs (form) ***/ .alrLine { padding-bottom: 5px } /* Formulaire : Recommander à un ami, contactz-nous (des truc a virer!!!) */ div#alrSendFriendForm { position: relative } div#alrSendFriendForm label.alrLabel { float: left; width: 135px; _width: 132px; height: 22px; line-height: 22px; font-weight:bold; } div#alrSendFriendForm label.alrLabelV1 { float: left; width: 240px; _width: 240px; height: 22px; line-height: 22px; font-weight:bold; } div#alrSendFriendForm span.alrSpan { display: block; height: 22px; line-height: 22px } div#alrSendFriendForm input.alrInputText, div#ultRegisterForm select { border: 1px solid #665C55 } div#alrSendFriendForm input.alrInputSmall { width: 50px; margin-right: 5px } div#alrSendFriendForm input.alrInputBig { width: 184px } div#alrSendFriendForm select.alrSelectBig { width: 184px } div#alrSendFriendForm input.alrCheckbox { float: left; margin: 1px 7px -3px 0; /margin: -2px 5px -3px 0; _margin-right: 2px } div#alrSendFriendForm div#alrBtnRegisterSpacer { height: 30px } div#alrSendFriendForm a#alrBtnRegister { position: absolute; bottom: 19px; left: 51px; display: block; width: 248px; height: 48px; font: normal 19px/44px Arial; color: #FFFFFF; text-align: center; background: transparent url(../../img/main/header_footer/ultRegister.gif) no-repeat } div#alrSendFriendForm a#alrBtnRegister:hover { background-position: 0 -49px } /* Formulaire : Ajout adresse livraison facturation */ div#alrAddAdress { position: relative } div#alrAddAdress label.alrLabelV2 { float: left; width: 225px; _width: 132px; height: 22px; line-height: 22px; font-weight:bold; padding-left: 45px; _padding-right:100px } div#alrAddAdress input.alrInputTextV2 { border: 1px solid #665C55 } div#alrAddAdress input.alrInputBigV2 { width: 184px } div#alrAddAdress select.alrSelectBigV2 { width: 186px } /*** elements de formulaire ***/ input.alrInputText { border: 1px solid #444446; color: #333333; /vertical-align: middle; font: normal 12px Arial; padding: 2px 1px } input.alrInputTextV2 { border: 1px solid #444446; color: #333333; /vertical-align: middle; font: normal 12px Arial; padding: 2px 1px 1px 1px; _padding: 1px 1px 1px 1px } input.alrInputTextError { border: 1px solid #EE9593 } input.alrInputFile { /border: 1px solid #BFC0C2; color: #333333; /vertical-align: middle; font: normal 12px Arial; padding: 2px 1px } input.alrRadio { margin-bottom: -2px; margin-left: 0; /vertical-align: middle; /margin-bottom: 0 } input.alrCheckbox { float: left; margin: 2px 5px -3px 0; /margin: -2px 0 -3px } input.alrCheckboxNewAdd { float: left; margin: 6px 5px 0px 6px; /margin: 2px 2px 0px 2px } textarea { border: 1px solid #444446; background: #F9F9F9; font: normal 12px Arial; padding: 10px; /overflow: auto } select { border: 1px solid #665C55; color: #333333; /vertical-align: middle; font: normal 12px Arial; padding: 1px } .inputTexSmall {width:21px; border: 1px solid #444446; color: #333333; /vertical-align: middle; font: normal 12px Arial; padding: 0px 1px } .alrBarre { padding: 16px 0px 20px 0px; background: transparent url(../gfx/common/alrDotH1.gif) repeat-x left } /*** alignements (bloc) ***/ .alrBlocLeft { float: left } .alrBlocRight { float: right } .alrBlocCenter { margin-left: auto; margin-right: auto } /*** alignements (Text) ***/ .alrTextLeft { text-align:left } .alrTextRight { text-align:right } .alrTextCenter { text-align:center } /*** clearers ***/ .alrClearer { clear: both; height: 0 } .alrBlocPadding { padding: 12px 15px 5px } .alrBlocPaddingCenter { padding: 4px 12px } .alrBlocSpacer { margin-top: 8px } .alrBlocSpacerBig { margin-top:26px; _margin-top:10px; _height:16px; } .alrBlocSpacerBottom { margin-bottom: 8px } /*** bouton input ***/ .alrBtnImputA { font-family: Arial,Verdana,Helvetica; font-size: 12px; color:#330033; font-weight:bold } .alrBtnImputB { font-family: Arial,Verdana,Helvetica; font-size: 12px; color:#FFFFFF; font-weight:bold; background-color:#C4897C } /*** progress bar ***/ div#alrBarreCommande { color: #000000 } div#alrBarreCommande div#alrStatusBar { height: 26px; line-height: 25px; margin: 1px 0 14px; padding: 0 10px; background: transparent url(../gfx/common/alrStatusBar.gif) no-repeat } div#alrBarreCommande div#alrStatusBar div#alrPercentage { float: left; width: 126px; font-size: 11px; font-weight: bold; color: #FFFFFF } div#alrBarreCommande div#alrStatusBar div#alrPages { float: right; font-size: 11px; font-weight: bold; color: #FFFFFF } div#alrBarreCommande div#alrStatusBar div#alrProgressBar { float: left; width: 359px; height: 7px; margin-top: 9px; padding: 1px; background: transparent url(../gfx/common/alrProgressBar.gif) no-repeat } div#alrBarreCommande div#alrStatusBar div#alrProgressBar div { height: 7px; background: transparent url(../gfx/common/alrProgressBarColored.gif) repeat-x }