/* DEFINITION DES DIFFERENTS TYPES DE BOXES UTILISABLES DANS LES PAGES (1 et 2) ET BANDEAUX COMPLEMENTAIRES (3) */ /*PREAMBULE : CONTAINER ET CONTENT CONTAINER : 969 de large, c'est un DIV inclus dans "page" qui fait toute la largeur. il contient le NAVIGATION EXTRA et le CONTENT Si on choisit une page en full, on mettra tout dans le CONTAINER. Sinon, les box de gauche type menu sont dans NAVIGATION EXTRA et celles de droite dans CONTENT NAVIGATION-EXTRA : Element flottant à gauche, qui contient toutes les box du menu. WIDTH 240 CONTENT : Element flottant à droite, qui contient toutes les box de droite du menu. WIDTH 725 il y a donc une marge de 4 pixels entre les deux. : les marges VERTICALES ET HORIZONTALES la marge entre deux box l'une sous l'autre doit être la meme qu'entre deux box l'une a coté de l'autre, pour dessiner un + harmonieux. Donc pour des box de 357, distantes en face a face de 11px, margin bottom 11 pour 475 19 19 DEFINIR POUR 3 BOX PAR LIGNES ET POUR LES BOX FULL LARGEUR */ /* 1. BOXES EN PLEINE PAGE : 2 DIMENSIONS */ /* 1. FULL = 969 */ /* largeur interne du p content : 969 - 2 (bordures) - 20 (padding). 969-22 = 947. La partie TOP change en fonction de la couleur du bandeau et de la fleche ou pas, le reste ne bouge pas. */ .box-969 {margin-left:auto; margin-right:auto; width:969px; margin-bottom:30px; display:block; line-height:normal;} .box-969-top-gris {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_969_top_gris.jpg) no-repeat; width:969px; height:22px; display:block;} .box-969-top-gris-fleche {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_969_top_gris_fleche.jpg) no-repeat; width:969px; height:22px; display:block;} .box-969-top-violet {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_969_top_violet.jpg) no-repeat; width:969px; height:22px; display:block;} .box-969-top-violet-fleche {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_969_top_violet_fleche.jpg) no-repeat; width:969px; height:22px; display:block;} .box-969-top-bleu {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_969_top_bleu.jpg) no-repeat; width:969px; height:22px; display:block;} .box-969-top-line {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_969_top_line.jpg) no-repeat; width:969px; height:8px; display:block;} .box-969-content {width:967px; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc; padding:0; line-height:normal; display:block;} .box-969-bottom {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_969_bottom.jpg) no-repeat; width:969px; height:8px; display:block;} /* 2. FULL UN PEU MOINS LARGE QUE LA NAV = 840 */ /* largeur interne : 840 - 2 (bordures) - 20 (padding). 840-22 = 818. La partie TOP change en fonction de la couleur du bandeau et de la fleche ou pas, le reste ne bouge pas. */ .box-840 {margin-left:auto; margin-right:auto; width:840px; margin-bottom:30px; display:block; line-height:normal;} .box-840-top-gris {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_840_top_gris.jpg) no-repeat; width:840px; height:22px; display:block;} .box-840-top-gris-fleche {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_840_top_gris_fleche.jpg) no-repeat; width:840px; height:22px; display:block;} .box-840-top-violet {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_840_top_violet.jpg) no-repeat; width:840px; height:22px; display:block;} .box-840-top-violet-fleche {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_840_top_violet_fleche.jpg) no-repeat; width:840px; height:22px; display:block;} .box-840-top-bleu {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_840_top_bleu.jpg) no-repeat; width:840px; height:22px; display:block;} .box-840-top-line {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_840_top_line.jpg) no-repeat; width:840px; height:8px; display:block;} .box-840-content {width:838px; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc; padding:0; line-height:normal; display:block;} .box-840-bottom {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_840_bottom.jpg) no-repeat; width:840px; height:8px; display:block;} /* 2. BOXES FLOTTANTES : 2 DIMENSIONS */ /* 1. A DROITE DU MENU */ /* 1. BOX A DROITE DU MENU, TYPE EASYPACK = 725 */ /* largeur interne : 725 - 2 (bordures) - 20 (padding). 725-22 = 703. La partie TOP change en fonction de la couleur du bandeau et de la fleche ou pas, le reste ne bouge pas. */ .box-725 {width:725px; margin-bottom:30px; display:block; line-height:normal;} .box-725-top-gris {background:#E7E8ED url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_725_top_gris.jpg) no-repeat; width:725px; height:22px; display:block;} html>body .box-725-top-gris {height: auto; min-height:22px;} .box-725-top-gris-fleche {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_725_top_gris_fleche.jpg) no-repeat; width:725px; height:22px; display:block;} .box-725-top-violet {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_725_top_violet.jpg) no-repeat; width:725px; height:22px; display:block;} .box-725-top-violet-fleche {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_725_top_violet_fleche.jpg) no-repeat; width:725px; height:22px; display:block;} .box-725-top-bleu {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_725_top_bleu.jpg) no-repeat; width:725px; height:22px; display:block;} .box-725-top-line {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_725_top_line.jpg) no-repeat; width:725px; height:8px; display:block;} .box-725-content {width:723px; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc; padding:0; line-height:normal; display:block;} .box-725-bottom {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_725_bottom.jpg) no-repeat; width:725px; height:8px; display:block;} /* 2. DEUX BOXES SUR UNE LIGNE, + MENU A GAUCHE (type boutique) = 357 */ /* largeur interne : 357 - 2 (bordures) - 20 (padding). 357-22 = 335. MARGE ENTRE LES DEUX BOX : 11px calée en fonction de si la box flotte a gauche ou a droite (class left et right). La partie TOP change en fonction de la couleur du bandeau et de la fleche ou pas, le reste ne bouge pas. */ .box-357 { width:357px; margin-bottom:11px; display:block; line-height:normal;} .box-357-top-gris {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_357_top_gris.jpg) no-repeat; width:357px; height:22px; display:block;} .box-357-top-gris-fleche {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_357_top_gris_fleche.jpg) no-repeat; width:357px; height:22px; display:block;} .box-357-top-violet {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_357_top_violet.jpg) no-repeat; width:357px; height:22px; display:block;} .box-357-top-violet-fleche {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_357_top_violet_fleche.jpg) no-repeat; width:357px; height:22px; display:block;} .box-357-top-bleu {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_357_top_bleu.jpg) no-repeat; width:357px; height:22px; display:block;} .box-357-top-line {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_357_top_line.jpg) no-repeat; width:357px; height:8px; display:block;} .box-357-content {width:355px; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc; padding:0; line-height:normal; display:block;} .box-357-bottom {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_357_bottom.jpg) no-repeat; width:357px; height:8px; display:block;} /* 2. TROIS BOXES SUR UNE LIGNE, + MENU A GAUCHE (boutique) = 237, marges à définir */ /* 1. top = une ligne /!\ CARREE à ajouter */ .box-237 {width:237px; margin-bottom:10px; display:block; line-height:normal;} .box-237-top-gris {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_237_top_gris.jpg) no-repeat; width:237px; height:22px; display:block;} .box-237-top-gris-fleche {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_237_top_gris_fleche.jpg) no-repeat; width:237px; height:22px; display:block;} .box-237-top-violet {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_237_top_violet.jpg) no-repeat; width:237px; height:22px; display:block;} .box-237-top-violet-fleche {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_237_top_violet_fleche.jpg) no-repeat; width:237px; height:22px; display:block;} .box-237-top-bleu {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_237_top_bleu.jpg) no-repeat; width:237px; height:22px; display:block;} .box-237-top-line {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_237_top_line.jpg) no-repeat; width:237px; height:8px; display:block;} .box-237-content {width:235px; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc; padding:0; line-height:normal; display:block;} .box-237-bottom {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_237_bottom.jpg) no-repeat; width:237px; height:8px; display:block; margin-bottom:6px; } .box-237-top-noel2009 {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/noel2009/box-bleu-237.png) no-repeat; width:237px; height:22px; display:block;} .box-237-top-noel2009 h3{line-height:normal; font-size:13px; font-weight:bold; color:#FFFFFF; margin:0; padding:2px 0 0 10px;} .box-237-top.saint_valentin_2010 {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/saint_valentin_2010/box-237.jpg) no-repeat; width:237px; height:22px; display:block;} .box-237-top.saint_valentin_2010 h3{line-height:normal; font-size:13px; font-weight:bold; color:#FFFFFF; margin:0; padding:2px 0 0 10px;} /* 2. SANS MENU A GAUCHE */ /* 2. DEUX BOXES SUR UNE LIGNE = 475 de large, marge 19 au milieu */ /* largeur interne : 475 - 2 (bordures) - 20 (padding). 475-22 = 453. MARGE ENTRE LES DEUX BOX : 19px. La partie TOP change en fonction de la couleur du bandeau et de la fleche ou pas, le reste ne bouge pas. */ .box-400 { float:left;width:400px; margin-bottom:19px; display:block; line-height:normal;margin-right:8px;} .box-400-left-top-violet {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_475_top_violet.jpg) no-repeat; width:400px; height:22px; display:block;} .box-400-right-top-violet {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_475_top_violet.jpg) no-repeat 100%; width:400px; height:22px; display:block;} .box-400-content {width:398px; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc; padding:0; line-height:normal; display:block;} .box-400-bottom {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_400_bottom.jpg) no-repeat; width:400px; height:8px; display:block;} .box-475 { width:475px; margin-bottom:19px; display:block; line-height:normal;} .box-475-top-gris {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_475_top_gris.jpg) no-repeat; width:475px; height:22px; display:block;} .box-475-top-gris-fleche {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_475_top_gris_fleche.jpg) no-repeat; width:475px; height:22px; display:block;} .box-475-top-violet {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_475_top_violet.jpg) no-repeat; width:475px; height:22px; display:block;} .box-475-top-violet-fleche {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_475_top_violet_fleche.jpg) no-repeat; width:475px; height:22px; display:block;} .box-475-top-bleu {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_475_top_bleu.jpg) no-repeat; width:475px; height:22px; display:block;} .box-475-top-line {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_475_top_line.jpg) no-repeat; width:475px; height:8px; display:block;} .box-475-content {width:473px; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc; padding:0; line-height:normal; display:block;} .box-475-bottom {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_475_bottom.jpg) no-repeat; width:475px; height:8px; display:block;} /* 2. TROIS BOXES SUR UNE LIGNE = 313 de large, marge 15, 313, 15, 313 */ /* 1. top = une ligne /!\ CARREE */ .box-313 { width:313px; margin-bottom:15px; display:block; line-height:normal;} .box-313-top-gris {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_313_top_gris.jpg) no-repeat; width:313px; height:22px; display:block;} .box-313-top-gris-fleche {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_313_top_gris_fleche.jpg) no-repeat; width:313px; height:22px; display:block;} .box-313-top-violet {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_313_top_violet.jpg) no-repeat; width:313px; height:22px; display:block;} .box-313-top-violet-fleche {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_313_top_violet_fleche.jpg) no-repeat; width:313px; height:22px; display:block;} .box-313-top-bleu {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_313_top_bleu.jpg) no-repeat; width:313px; height:22px; display:block;} .box-313-top-line {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_313_top_line.jpg) no-repeat; width:313px; height:8px; display:block;} .box-313-content {width:311px; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc; padding:0; line-height:normal; display:block;} .box-313-bottom {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_313_bottom.jpg) no-repeat; width:313px; height:8px; display:block;} /* 2. TROIS BOXES SUR UNE LIGNE = 213 de large, marge 15, 313, 15, 313 */ /* 1. top = une ligne /!\ CARREE */ .box-213 { width:213px; margin-bottom:15px; display:block; line-height:normal;} .box-213-top-gris {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_213_top_gris.jpg) no-repeat; width:213px; height:22px; display:block;} .box-213-top-gris-fleche {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_213_top_gris_fleche.jpg) no-repeat; width:213px; height:22px; display:block;} .box-213-top-violet {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_213_top_violet.jpg) no-repeat; width:213px; height:22px; display:block;} .box-213-top-violet-fleche {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_213_top_violet_fleche.jpg) no-repeat; width:213px; height:22px; display:block;} .box-213-top-bleu {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_213_top_bleu.jpg) no-repeat; width:213px; height:22px; display:block;} .box-213-top-line {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_213_top_line.jpg) no-repeat; width:213px; height:8px; display:block;} .box-213-content {width:211px; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc; padding:0; line-height:normal; display:block;} .box-213-bottom {background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_213_bottom.jpg) no-repeat; width:213px; height:8px; display:block;} /* LES FLOTTEMENTS DES BOXES */ .left { float:left;} .right { float:right;} /* LES TITRES DANS LES BANDEAUX DES BOXES */ .box-237-top-gris h3, .box-237-top-gris-fleche h3, .box-313-top-gris h3, .box-313-top-gris-fleche h3, .box-357-top-gris h3, .box-357-top-gris-fleche h3, .box-475-top-gris h3, .box-475-top-gris-fleche h3, .box-725-top-gris h3, .box-725-top-gris-fleche h3, .box-840-top-gris h3, .box-840-top-gris-fleche h3, .box-969-top-gris h3, .box-969-top-gris-fleche h3, .box-213-top-gris h3, .box-213-top-gris-fleche h3 {line-height:normal; font-size:13px; font-weight:bold; color:#666666; margin:0; padding:2px 0 0 15px;} .box-237-top-violet h3, .box-237-top-violet-fleche h3, .box-313-top-violet h3, .box-313-top-violet-fleche h3, .box-357-top-violet h3, .box-357-top-violet-fleche h3, .box-475-top-violet h3, .box-475-top-violet-fleche h3, .box-725-top-violet h3, .box-725-top-violet-fleche h3, .box-840-top-violet h3, .box-840-top-violet-fleche h3, .box-969-top-violet h3, .box-969-top-violet-fleche h3 , .box-213-top-violet h3, .box-213-top-violet-fleche h3 , .box-400-left-top-violet h3, .box-400-right-top-violet h3 {line-height:normal; font-size:13px; font-weight:bold; color:#FFFFFF; margin:0; padding:2px 0 0 10px;} .box-237-top-bleu h3, .box-237-top-bleu-fleche h3, .box-313-top-bleu h3, .box-313-top-bleu-fleche h3, .box-357-top-bleu h3, .box-357-top-bleu-fleche h3, .box-475-top-bleu h3, .box-475-top-bleu-fleche h3, .box-725-top-bleu h3, .box-725-top-bleu-fleche h3, .box-840-top-bleu h3, .box-840-top-bleu-fleche h3, .box-969-top-bleu h3, .box-969-top-bleu-fleche h3, .box-213-top-bleu h3, .box-213-top-bleu-fleche h3 {line-height:normal; font-size:13px; font-weight:bold; color:#7E7E7E; margin:0; padding:2px 0 0 15px;} /* box-default */ .box-default { position: relative;margin:0 0 5px 0;width: 237px; line-height: 1.1;} .box-default h2 { height: 22px; line-height: 22px; padding: 0 5px 0 10px;background: transparent url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/box_237_top_violet.jpg) 0 0 no-repeat; font-size: 1.2em; color:#FFFFFF; font-weight:bold;} .box-default .help { height: 22px; line-height: 22px; position:absolute; top:3px; left: 215px; z-index:255;} .box-default h2 a span, .box-default h2 a { display: block;color: #fff;} .box-default .content { padding: 5px 0 5px 0;background: transparent url(img/box/boxm-bot.png) no-repeat scroll 0pt 100%;} .box-default .content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} #IE6 .box-default .content, #IE7 .box-default .content { height: 1%;} /* LE P.CONTENT QUI FAIT LES MARGES STANDARDS DANS LES BOX */ .box-969-content p.content {width:947px; padding:5px 10px 5px 10px; line-height:normal; display:block;} .box-840-content p.content {width:818px; padding:5px 10px 5px 10px; line-height:normal; display:block;} /* f.tripoli changement de l'element p en element div pour un meilleur respect des specification w3c et une meilleur prise en charge par les navigateurs l'element p ne pouvant contenir des elements div ou form ou table (pour le dernier cas cela depend de la definition de la doctype). */ .box-725-content div.content {width:703px; padding:5px 10px 5px 10px; line-height:normal; /*display:block;*/} .box-475-content p.content {width:453px; padding:5px 10px 5px 10px; line-height:normal; display:block;} .box-357-content p.content {width:335px; padding:5px 10px 5px 10px; line-height:normal; display:block;} .box-237-content p.content {width:215px; padding:5px 10px 5px 10px; line-height:normal; display:block;} .box-969-content h1.content {font-weight:bold;font-size:20px;} .linkMenu a:hover {background: transparent url("img/typo/bullet-on.png") 2px 50% no-repeat; text-decoration:none; color:#ae269e;} .linkMenu a{display: block;padding-left: 10px; border-left: 1px solid #fff; line-height:1.2; background: transparent url("img/typo/bullet.png") 1px 50% no-repeat;} /* Divers trucs */ img {border:0;} .box-237-content #formeRecherche {padding:2px 2px;} .box-237-content #formeRecherche input {margin-bottom:0px;} /* box 237 mon compte page home*/ .box-237-moncompte{width:237px; padding:0; line-height:normal; display:block;background: transparent url("img/box/new_inscrit.png") 0 -1px no-repeat;height:79px;} #IE6 .box-237-moncompte{width:237px; padding:0; line-height:normal; display:block;background: transparent url("img/box/new_inscrit.png") 0 -1px no-repeat;} #IE7 .box-237-moncompte{width:237px; padding:0; line-height:normal; display:block;background: transparent url("img/box/new_inscrit.png") 0 -1px no-repeat;} .box-237-moncompte h3 {line-height:normal; font-size:13px; font-weight:bold; color:#ffffff; margin:0; margin:4px 0 0 9px;} .box-237-moncompte #my-account {margin-top: 14px; padding-left: 5px; padding-right: 5px;display: block;} #IE6 .box-237-moncompte #my-account {margin-top: 8px; padding-left: 5px; padding-right: 5px;display: block;} #IE7 .box-237-moncompte #my-account {margin-top: 10px; padding-left: 5px; padding-right: 5px;display: block;line-height:6px;overflow:hidden;} .box-237-moncompte #my-creation {margin-top: 3px; padding-left: 5px; padding-right: 5px;display: block;} #IE6 .box-237-moncompte #my-creation {margin-top: -6px; padding-left: 5px; padding-right: 5px;display: block;} #IE7 .box-237-moncompte #my-creation {margin-top: 0px; padding-left: 5px; padding-right: 5px;display: block;} .box-237-moncompte #my-account #account-label, .box-237-moncompte #my-creation #account-label {font-weight: bold;display:block; float: left; line-height:9px;} #IE6 .box-237-moncompte #my-creation #account-label,#IE6 .box-237-moncompte #my-account #account-label{font-weight: bold;display:block; float: left; line-height:normal;position:relative;overflow:hidden;} #IE7 .box-237-moncompte #my-creation #account-label ,#IE7 .box-237-moncompte #my-account #account-label{font-weight: bold;display:block; float: left; line-height:normal;position:relative;overflow:hidden;} .box-237-moncompte #my-account #account-img, .box-237-moncompte #my-creation #account-img {display:block; float: right} .box-237-moncompte #my-account #account-img #my-account-go, .box-237-moncompte #my-creation #account-img #my-account-go {position: relative; top:-4px; right:0px} #searchGo { position: relative; top: 5px;} /* =@navigation recherche */ .box-237-content .marcheListe { display: block;font-size:9px; border-left: 1px solid #fff; line-height:1.2; background: transparent url("img/typo/bullet.png") 1px 50% no-repeat;} .box-237-content .segmentListe { display: block;padding-left: 1px; font-size:10px; border-left: 1px solid #fff; line-height:1.2; background: transparent url("img/typo/bullet.png") 1px 50% no-repeat;} /************************* =nav *************************/ #nav { clear:both;height:38px; margin:auto; width: 969px; border:0px;} #nav dl { margin:0; padding:0;height: 38px; background: transparent; list-style-type: none;} #nav dl dt { margin:0; padding:0;float:left;height:35px; text-align:center; cursor: pointer;border-right:1px solid #ffffff;} #nav dl dt.dt-fr { margin:0; padding:0;float:left;height:35px; text-align:center; cursor: pointer;border-right:1px solid #ffffff;} #nav dl dt a {float:left;display: block; height:29px; width: 120px; padding: 3px 0; text-transform:uppercase; line-height: 14px; font-weight:bold;color:#666; background: transparent url(img/nav/nav.png) 0 0 repeat-x; text-decoration:none; text-align: center; } #nav dl dt.dt-fr a {float:left;display: block; height:29px; width: 106px; padding: 3px 0; text-transform:uppercase; line-height: 14px; font-weight:bold;color:#666; background: transparent url(img/nav/nav.png) 0 0 repeat-x; text-decoration:none; text-align: center; } #nav dl dt.no-border { border-right:none;} #nav dl dt.no-border a { width: 112px;} /*-- textcolor--*/ #nav dl dt a span {color: #434242; cursor: pointer; height:29px;} #IE7 #nav dl dt a span {color: #434242;height:29px;} #IE6 #nav dl dt a span {color: #434242; height:29px;} #nav dl dt.boutique a span {color: #fff; cursor: pointer; height:29px;} #IE7 #nav dl dt.boutique a span {color: #fff;height:29px;} #IE6 #nav dl dt.boutique a span {color: #fff; height:29px;} #nav dl dt.boutique a:hover span {color: #fff; cursor: pointer; height:29px;} #IE7 #nav dl dt.boutique a:hover span {color: #fff;height:29px;} #IE6 #nav dl dt.boutique a:hover span {color: #fff; height:29px;} /*--hover text color--*/ #nav dl dt a:hover span {color: #6e044f; height:29px;} #IE7 #nav dl dt a:hover span {color: #6e044f; height:29px;} #IE6 #nav dl dt a:hover span {color: #6e044f; height:29px;} /*hover onglet*/ #nav dl dt a:hover {background-position:0 -35px;} #IE7 #nav dl dt a:hover {color:#6e044f; background-position:0 -35px;} #IE6 #nav dl dt a:hover {color:#6e044f; background-position:0 -35px;} /*--hover onglet first et last--*/ #nav dl dt.first a, #nav dl dt.first a:hover {background-position:0 -38px;} #IE7 #nav dl dt.first a, #IE7 #nav dl dt.first a:hover {background-position:0 -38px;} #IE6 #nav dl dt.first a, #IE6 #nav dl dt.first a:hover {background-position:0 -38px;}/*hover acceuileeeee*/ #nav dl dt.last-concours a, #nav dl dt.last-concours a:hover { background-position: 100% -38px;} #IE7 #nav dl dt.last-concours a, #IE7 #nav dl dt.last-concours a:hover { background-position: 100% -38px;} #IE6 #nav dl dt.last-concours a, #IE6 #nav dl dt.last-concours a:hover { background-position: 100% -38px;} #nav dl dt.last-concours a, #nav dl dt.last-concours a span, #nav dl dt.last-concours a:hover, #nav dl dt.last-concours a:hover span{color:#fff;} #IE7 #nav dl dt.last-concours a, #IE7 #nav dl dt.last-concours a span, #IE7 #nav dl dt.last-concours a:hover, #IE7 #nav dl dt.last-concours a:hover span{color:#fff;} #IE6 #nav dl dt.last-concours a, #IE6 #nav dl dt.last-concours a span, #IE6 #nav dl dt.last-concours a:hover, #IE6 #nav dl dt.last-concours a:hover span{color:#fff;} #nav dl dt.last a, #nav dl dt.last a:hover { background-position: 100% -38px;} #IE7 #nav dl dt.last a, #IE7 #nav dl dt.last a:hover { color:#6e044f; background-position:100% -38px;} #IE6 #nav dl dt.last a, #IE6 #nav dl dt.last a:hover { color:#6e044f; background-position:100% -38px;} /*--image onglet first--*/ #nav dl dt.first a {background-image: url(img/nav/nav-first.png); background-position:0 0; background-repeat: no-repeat;} #IE7 #nav dl dt.first a {background-image: url(img/nav/nav-first.png); background-position: 0 0; background-repeat: no-repeat;} #IE6 #nav dl dt.first a {background-image: url(img/nav/nav-first.png); background-position:0 0; background-repeat: no-repeat;} /*--image onglet help--*/ #nav dl dt.help a {background-image: url(img/nav/nav-aide.png); background-position:100% 0; background-repeat: no-repeat;width:111px;} #IE7 #nav dl dt.help a {background-image: url(img/nav/nav-aide.png); background-position:100% 0; background-repeat: no-repeat;width:111px;} #IE6 #nav dl dt.help a {background-image: url(img/nav/nav-aide.png); background-position:100% 0; background-repeat: no-repeat;width:111px;} #nav dl dt.help a:hover {background-position:100% -38px;} #IE7 #nav dl dt.help a:hover {background-position:100% -38px;} #IE6 #nav dl dt.help a:hover {background-position:100% -38px;} /*--image onglet boutique--*/ #nav dl dt.boutique a {background-image: url(img/nav/nav-boutique1.png); background-position:0 0; background-repeat: no-repeat;} #IE7 #nav dl dt.boutique a {background-image: url(img/nav/nav-boutique1.png); background-position:0 0; background-repeat: no-repeat;} #IE6 #nav dl dt.boutique a {background-image: url(img/nav/nav-boutique1.png); background-position:0 0; background-repeat: no-repeat;} #nav dl dt.boutique a:hover { background-position: 0 -38px;} #IE7 #nav dl dt.boutique a:hover { background-position: 0 -38px;} #IE6 #nav dl dt.boutique a:hover { background-position: 0 -38px;} /*-- image onglet promo --*/ #nav dl dt.promo a {background-image: url(img/nav/nav.png); background-position:0 0; background-repeat: repeat;} #IE7 #nav dl dt.promo a {background-image: url(img/nav/nav.png); background-position:0 0; background-repeat: repeat;} #IE6 #nav dl dt.promo a {background-image: url(img/nav/nav.png); background-position:0 0; background-repeat: repeat;} #nav dl dt.promo a:hover { background-position:0 -35px;} #IE7 #nav dl dt.promo a:hover { background-position: 0 -35px;} #IE6 #nav dl dt.promo a:hover { background-position: 0 -35px;} #nav dl dt.promo.current a, #nav dl dt.promo.current a span, #nav dl dt.promo.current a:hover, #nav dl dt.promo.current a:hover span{color:#fff ;background-position: 0 -71px;} #IE7 #nav dl dt.promo.current a, #IE7 #nav dl dt.promo.current a span, #IE7 #nav dl dt.promo.current a:hover, #IE7 #nav dl dt.promo.current a:hover span{color:#fff ;background-position: 0 -71px;} #IE6 #nav dl dt.promo.current a, #IE6 #nav dl dt.promo.current span, #IE6 #nav dl dt.promo.current a:hover, #IE6 #nav dl dt.promo.current a:hover span{color:#fff ;background-position: 0 -71px;} #nav dl dt.promo a span, #nav dl dt.promo a:hover span{background-position: 0 -76px;} #IE7 #nav dl dt.promo a span, #IE7 #nav dl dt.promo a:hover span{background-position: 0 -76px;} #IE6 #nav dl dt.promo span, #IE6 #nav dl dt.promo a:hover span{background-position: 0 -76px;} /* fin promo */ /*--image onglet concourlast--*/ #nav dl dt.last-concours a {background-image: url(img/nav/nav-last-concours.png); background-position: 100% 0px; background-repeat: no-repeat;} #IE7 #nav dl dt.last-concours a {background-image: url(img/nav/nav-last-concours.png); background-position: 100% 0px; background-repeat: no-repeat;} #IE6 #nav dl dt.last-concours a {background-image: url(img/nav/nav-last-concours.png); background-position: 100% 0px; background-repeat: no-repeat;} /*--image onglet deco last--*/ #nav dl dt.last a {background-image: url(img/nav/nav-last.png); background-position: 100% 0; background-repeat: no-repeat;} #IE7 #nav dl dt.last a {background-image: url(img/nav/nav-last.png); background-position: 100% 0; background-repeat: no-repeat;} #IE6 #nav dl dt.last a {background-image: url(img/nav/nav-last.png); background-position: 100% 0; background-repeat: no-repeat;} /*--onglet selectionné first last concour--*/ #nav dl dt.first.current1 a, #nav dl dt.first.current1 a span, #nav dl dt.first.current1 a:hover, #nav dl dt.first.current1 a:hover span{color:#fff ;background-position: 0 -76px;} #IE7 #nav dl dt.first.current1 a, #IE7 #nav dl dt.first.current1 a span, #IE7 #nav dl dt.first.current1 a:hover, #IE7 #nav dl dt.first.current1 a:hover span{color:#fff ;background-position: 0 -76px;} #IE6 #nav dl dt.first.current1 a, #IE6 #nav dl dt.first.current1 span, #IE6 #nav dl dt.first.current1 a:hover, #IE6 #nav dl dt.first.current1 a:hover span{color:#fff ;background-position: 0 -76px;} /*pour integrer une image changer current en current1 dans le header et css*/ #nav dl dt.last-concours.current2 a, #nav dl dt.last-concours.current2 a:hover {color:#fff !important; background-position: 100% -76px;} #IE6 #nav dl dt.last-concours.current2 a, #IE6 #nav dl dt.last-concours.current2 a:hover {color:#fff !important; background-position: 100% -76px;} #IE7 #nav dl dt.last-concours.current2 a, #IE7 #nav dl dt.last-concours.current2 a:hover {color:#fff !important; background-position: 100% 0px;} #nav dl dt.last.current3 a, #nav dl dt.last.current3 a span, #nav dl dt.last.current3 a:hover, #nav dl dt.last.current3 a:hover span{color:#fff !important; background-position: 100% -76px;} #IE7 #nav dl dt.last.current3 a, #IE7 #nav dl dt.last.current3 a span, #IE7 #nav dl dt.last.current3 a:hover, #IE7 #nav dl dt.last.current3 a:hover span{color:#fff !important;background-position: 100% -76px;} #IE6 #nav dl dt.last.current3 a, #IE6 #nav dl dt.last.current3 a span, #IE6 #nav dl dt.last.current3 a:hover, #IE6 #nav dl dt.last.current3 a:hover span{color:#fff !important;background-position: 100% -76px;} /*text acceuil first / promo / help mise en page*/ #nav dl dt.first a span {position:relative;top: 20%;} #nav dl dt.promo a span {position:relative;top: 20%;} #nav dl dt.help a span {position:relative;top: 20%;} #IE6 #nav dl dt.help a span {position:relative;top: 18%;} #IE7 #nav dl dt.first a span {position:relative;top: 18%;} #IE7 #nav dl dt.promo a span {position:relative;top: 18%;} #IE7 #nav dl dt.help a span {position:relative;top: 18%;} #nav dl dt.last a, #nav dl dt.last-concours a { line-height: 14px;} /* onglet current*/ #nav dl dt.current a, #nav dl dt.current a span, #nav dl dt.current a:hover, #nav dl dt.current a:hover span { color:#fff; background-position:0 -70px;} #IE7 #nav dl dt.current a, #IE7 #nav dl dt.current a span, #IE7 #nav dl dt.current a:hover, #IE7 #nav dl dt.current a:hover span{color:#fff;background-position:0 -70px;} #IE6 #nav dl dt.current a, #IE6 #nav dl dt.current a span, #IE6 #nav dl dt.current a:hover, #IE6 #nav dl dt.current a:hover span{color:#fff;background-position:0 -70px;} /* rollover les boutiques */ #nav div.nav_rollover_boutique { background-color: #EF5562; color: #FFFFFF; left: 680px; margin: 0px; padding: 5px; position: relative; right: 0px; top: -3px; width: 280px; z-index: 10000; } /* fin =nav */ /************************* =footer *************************/ #countries-mypix ul li a{text-decoration:none;} /* =payment */ #payment { padding: 0 45px;} #payment:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} #payment ul { text-align:center; height: 40px; list-style-type: none;} #payment ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} #payment ul li { float:left; height: 40px; margin-right: .5em;} #payment ul li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} #payment ul li span.libelle { float:left; height: 40px; line-height:40px!important; margin-right: .5em;} #payment ul li img { float:left; margin-top:5px;} /* logo paiement*/ #moyen-paiement {width:100%;clear:both;float:left;margin-bottom:5px;} #moyen-paiement ul#icon-payment{margin:0 auto;} #moyen-paiement li{height:36px;background:url(http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/moyen-paiement-new-picto.png) 0 0;float:left;margin-left:10px;} #moyen-paiement li.texte{background:none;line-height:3em;} #moyen-paiement li.cb{width:39px;background-position:-312px 0;} #moyen-paiement li.visa{width:39px;background-position:0 0;} #moyen-paiement li.mastercard{width:39px;background-position:-77px 0;} #moyen-paiement li.americanExpress{width:40px;background-position:-116px 0;} #moyen-paiement li.bank-transfert{width:39px;background-position:-390px -36px;} #moyen-paiement li.paypal{width:42px;background-position:-270px -0px;} #moyen-paiement li.bnp{width:66px;background-position:-324px -36px;} #moyen-paiement li.fianet{width:106px;background-position: 0px -72px;} #moyen-paiement li.neosurf{width:39px;background-position: -295px -72px;} #moyen-paiement li.visa-electron{width:39px;background-position: -39px 0;} #moyen-paiement li.netpay{width:60px;background-position: -210px 0;} #moyen-paiement li.bibit{width:76px;background-position: -350px 0;} #moyen-paiement li.e-cb{width:54px;background-position: -156px 0;} #moyen-paiement li.e-pass{width:107px;background-position: 0 -36px;} #moyen-paiement li.de-bank{width:100px;background-position: -108px -36px;} #moyen-paiement li.switch{width:44px;background-position: -208px -36px;} #moyen-paiement li.ideal{width:31px;background-position: -252px -36px;} #moyen-paiement li.solo{width:41px;background-position: -283px -36px;} #moyen-paiement li.maestro{width:42px;background-position: -106px -72px;} #moyen-paiement li.elvssl{width:42px;background-position: -148px -72px;} #moyen-paiement li.comm-line{width:33px;background-position: -191px -72px;} #moyen-paiement li.dresdner{width:25px;background-position: -230px -72px;} #moyen-paiement li.bank-card{width:32px;background-position: -263px -72px;} #moyen-paiement li.postepay{width:80px;background-position: -334px -72px;} #moyen-paiement li a{display:block;width:100%;height:100%;} /* =countries */ #countries-mypix { position: relative;float:right; width: 468px;height:30px; line-height: 28px!important; background-color: #f2f2f2;} #countries-mypix p{ float:left; margin-left: 5px; line-height: 28px!important;} #IE6 #countries-mypix p{ float:left; margin-left: 0px;} #countries-mypix ul{ float:left; height: 30px; margin-left: 5px; list-style-type: none;} #countries-mypix ul li{float:left; margin-right:3px;margin-top:6px;} #countries-mypix ul li a.tooltip{ float:left; position:relative;z-index:24;display:block;height:15px;width:16px; padding-top: 5px;text-decoration:none;background: transparent url("http://pan.fotovista.com/mypixmania/images/fw_images/all_language/communs/flag.png") 0 0 no-repeat;} #countries-mypix ul li.BE a.tooltip{background-position:0 0;} #countries-mypix ul li.FR a.tooltip{background-position:-16px 0;} #countries-mypix ul li.CH a.tooltip{background-position:-32px 0;} #countries-mypix ul li.AT a.tooltip{background-position:-48px 0;} #countries-mypix ul li.DE a.tooltip{background-position:-64px 0;} #countries-mypix ul li.ES a.tooltip{background-position:-80px 0;} #countries-mypix ul li.IT a.tooltip{background-position:-96px 0;} #countries-mypix ul li.NL a.tooltip{background-position:-112px 0;} #countries-mypix ul li.SE a.tooltip{background-position:-128px 0;} #countries-mypix ul li.IE a.tooltip{background-position:-144px 0;} #countries-mypix ul li.UK a.tooltip{background-position:-160px 0;} #countries-mypix ul li a.tooltip:hover{background-color:#FFF;z-index:25;} #countries-mypix ul li a.tooltip span{display:none;white-space: nowrap;} #countries-mypix ul li a.tooltip:hover span{display:block;border:1px solid #cdcdcd;width:auto;color:#000;text-transform:none;padding:0 6px;line-height:2em;background-color:#fff;left:0em;top:-2.4em;position:absolute;} #countries-mypix ul li dl { display:none;position: absolute; top: -35px; right: 0; width: 261px; height: 30px; background: transparent url("img/bg-footer-lang.png") 0 0 no-repeat;} #countries-mypix ul li dl dt, #countries-mypix ul li dl dd { display: inline; float:none; margin:0;padding-right:5px;margin-left: 5px; font-size: 1.1em; line-height:28px!important;} #countries-mypix ul li dl dd a { float:none;} #countries-mypix ul li dl dd { border-right: 1px solid #666;} #countries-mypix ul li dl dd.last { border: none;} #countries-mypix ul li dl dd a:hover { color:#000; text-decoration:underline;} /* info-bulle kodak */ #footer a.kodak{position:relative;z-index:24;} #footer a.kodak:hover{z-index:1000;background:none;text-decoration:none;} #footer a.kodak span{display:none;} #footer a.kodak:hover span{display:block;left:12em;position:absolute;top:-20em;width:380px;height:280px;background-color:transparent;text-decoration:none;} #IE6 #footer a.kodak:hover span{display:block;left:12em;position:absolute;top:-20em;width:380px;height:280px;background-color:#ffffff;text-decoration:none;} /**************************************************************************************** POP UP PANIER SAUVEGARDE =#autoSavedCart ****************************************************************************************/ #autoSavedCart p { margin: 10px 0px 15px 0px; } #autoSavedCart p#autoSavedCart_beforebuttons { margin: 10px 0px 25px 0px; } /*#autoSavedCart #autoSavedCart_beforebuttons { margin: 0px 0px 15px 0px; }*/