* { /*oct2015: pour tous les elements*/
/*-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;*/ /*la largeur de l'element incluera les bordures et padding*/
/*a faire mais pas ok actuellement*/
}
.fondPhoto
{
background-size: 100%;
background-position: top center;
border-radius:1px!important;
background-repeat: no-repeat;
}
.caseDeFermeture { /* picto de fermeture de fenetre (petit X dans rond noir) */
position: absolute; right: 0; top: 0;
width: 50px; height: 50px;
margin-top: -10px; margin-right: -10px; /*depasse largement pour pas avoir a viser precisemmment*/
background-image:url(/images/commun/close.png); background-repeat:no-repeat; background-position:center;
cursor:pointer;
}
.picto {
padding: 0px;
display: inline-block;
vertical-align: middle; vertical-align: text-bottom;/*j'hesite entre ces 2 alignements*/
background-repeat: no-repeat;
/*background-color: red;*//*pour bien voir quand pas a la bonne dimension*/
}
.ADroite {
float: right; margin-left: 4px;
}
.AGauche {
float: left; margin-right: 4px;
}
.pictoRechercher {
height: 26px; width: 26px;
background-image: url(/images/menu/coul3/menuChercher.png);
}
.pictoGCNormal {
height: 19px; width: 19px;
background-image: url(/images/pictoGroupeNormal.png);
}
.pictoGCMonde {
height: 19px; width: 19px;
background-image: url(/images/icones2/ongletGCMonde.png);
}
.pictoGCDeverrouille {
height: 19px; width: 13px;
background-image: url(/images/icones2/ongletGCCode-open.png);
}
.pictoCodeListe {
height: 19px; width: 19px;
/*background-image: url(/images/icones2/pictoZoneSaisieCodeInfo.png);*/
background-image: url(/images/icones2/ongletGCCode-close.png);
}
.pictoCodeASaisir {
height: 19px; width: 19px;
background-image: url(/images/icones2/ongletZoneSaisieCode.png);
}
.pictoAmi_jeConnais {
height: 22px; width: 22px;
background-image: url(/images/icones1/connaissance/jeConnais.png);
}
.pictoAmi_onSeConnait {
height: 22px; width: 22px;
background-image: url(/images/icones1/connaissance/onSeConnait.png);
}
.pictoAmi_meConnait {
height: 22px; width: 22px;
background-image: url(/images/icones1/connaissance/meConnais2.png);
}
.pictoAmi_jeConnaisPas {
height: 22px; width: 22px;
background-image: url(/images/icones1/connaissance/jeConnaisPas.png);
}
.pictoAmi_connaitre {
height: 22px; width: 22px;
background-image: url(/images/icones1/connaissance/connaitre2.png);
}
.pictoComBulle { /*picto bulle*/
height: 14px; width: 15px;
background-image: url(/images/icones1/bulleCom.png);
}
.pictoComPlus { /*picto + */
height: 14px; width: 16px;
background-image: url(/images/icones1/bulleComAjouter2.png);
}
html { height:100%; } /*sinon un element table, par ex, ne pourra jamais occuper toute la hauteur de la page (page accueil par ex). Le mettre aussi au body*/
body { font-size: 13px; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; line-height: 1.2em; cursor: default;
height:100%; /*idem que pour html*/
}
/* sept2011: cellule td au centre sous IE :*/
td { /*sept2011: nouveau doctype => forcer cellule aligner a gauche car centrage sous IE*/
text-align: left; }
.tdCentre { /*align='center' n'a pas d'effet dans un td docn utilisation d'une classe */
text-align: center; }
.tdDroite { /*idem mais pour lalignement a droite */
text-align: right; }
.txt_lienBouton /*sept2015: texte (pas balise a) qui ont le meme aspect qu'un texte cliquable comme un bouton*/
, a:link { color: #0095dc; text-decoration: none; }
a:visited { color: #0095dc; text-decoration: none; }
a:hover { text-decoration: underline; }
/*oct2011: des liens un peu mieux*/
.txt_lienBouton /*sept2015: texte (pas balise a) qui ont le meme aspect qu'un texte cliquable comme un bouton*/
, a.lienBouton:link { /*les liens normaux qui ont un fond qui apparait au survol*/
padding: 1px 6px; margin:0px 1px 0px 0px;
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
a.lienBouton:visited { font-style: normal; }
.txt_lienBouton:hover /*sept2015: idem mais au survol*/
, a.lienBouton:hover { color: yellow !important; text-decoration: none; background-color: #0172b5;/*bleu fonce*/ cursor:pointer;
}
#tableResultatRecherche a .casePersonne {
color:initial;
}
td { font-size: 13px; line-height: 1.2em; }
.tdSansLineHeight td { /*jan2015: evite espace vertical sur balise a, docn entre image (boutons au centre page accueil)*/
line-height: 0;
}
textarea { font-size: 12px; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; line-height: 1.2em; }
input { font-size: 12px; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; line-height: 1.2em; }
label { cursor: pointer; }
select { cursor: pointer; }
.curseurMain { cursor: pointer; }
.sansRetour { /*pour ne pas faire de retour a la ligne*/
white-space: nowrap; }
.infoConfCadre /* poru la cadre autour de "info confidentiells" (dans page "modifier ses infos") */ { border: solid 2px #771CC9; }
/*pour bulle info grande rectangulaire : */
.calqueInfo { visibility: visible; position: absolute; width: 50px; }
.infoChamp /* le cadre autour du calque d'information */ { border: double 2px #0095dc;
/*oct2011:*/ -webkit-border-radius: 6px 3px 6px 6px; -moz-border-radius: 6px 3px 6px 6px; border-radius:6px 3px 6px 6px; /*coin NE +petit car proche fleche*/ background-clip: padding-box;
-webkit-box-shadow: -1px 1px 10px rgba(0,0,0, 1); -moz-box-shadow: -1px 1px 10px rgba(0,0,0, 1); box-shadow: -1px 1px 10px rgba(0,0,0, 1);
}
.infoChampTitre /* le fond cadre du titre du calque d'information */ { color: #fff; font-size: 13px; font-weight: bold; background-color: #0095dc; /*oct2011:*/ -webkit-border-radius:3px 2px 0 0; -moz-border-radius:3px 2px 0 0; border-radius: 3px 2px 0 0; /*arrondis en haut. coin NE +petit car proche fleche*/ background-clip: padding-box; }
.infoChampTexte /* le fond et le texte du calque d'information */ { color: #0095dc; font-size: 12px; background-color: #fff; /*oct2011:*/ -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; /*arrondis le cadre blanc internet*/ background-clip: padding-box; }
/*mieux d'utiliser strong que b (donc je corrige progressivement) :*/
#infoLeTexte strong { /*oct2011: met en valeur les mots importants dans texte (comme pour mini bulle) */
color:#771CC9; font-size:1.1em; font-weight: bold; }
#infoLeTitre strong { /*oct2011: met en valeur les mots importants dans titre (comme pour mini bulle) */
color: yellow; font-size:1.1em; font-weight: bold; }
/* b devrait etre de moins en moins utilise*/
#infoLeTexte b { color:#771CC9; font-size:1.1em; font-weight: bold; }
#infoLeTitre b { color: yellow; font-size:1.1em; font-weight: bold; }
.chpDesactive /* pour les champs desactive (readonly en fait) */ { color: silver; padding: 2px; border: dotted 1px; }
.chpInfoDeBase /* associer avec chpDesactiver si besoin */ { font-weight: bold; color: #000000; } /* #ffa500 gris */
.filetSousMoi /* le trait en haut, juste sous nos infos, quand connecte */ { border-bottom: 1px dashed #0095dc; }
/* pour elements commun a plusieurs pages */
.fondPageConnexion, .fondPageInscription, .fondPageRecherche { /*fond de page (lignes diagonales)*/
background-color: #82788A; background-image:url('../images/deco/motifs/motif028.png'); background-attachment: fixed;
}
#tableEnsemble, #tableResultatRecherche, #tableDesConnaissances { /*fond balnc et marges*/
background-color: white; padding: 10px;
margin-top: 25px;/*marge par rapport au haut de fenetre et pour que le petit logo passe bien si fenetre reduite)*/ margin-left: 65px;/*pour ne pas passer sous le menu trop facilement*/
}
#tableResultatRecherche, #tableDesConnaissances { /*enleve certaines marges dans certains cas*/
margin-top:auto; /*pas besoin de marge car pas tout en haut de la fenetre*/ /*pas 0px sinon ne pourra pas se centrer avec align="center"*/
margin-left:auto; /*pas de pb avec le menu car en-dessous*/
}
/*partie Rechercher, affichage des personnes : */
.casePersonne /* le cadre qui englobe image + info */ { text-align: center; margin: 0 0 2px 3px; padding: 0; float: left; /*oct2011:*/ padding: 5px; margin:2px; }
/*.casePersonne:hover { background-color: #f0f7f9; margin: -2px -2px 1px 1px; padding: 1px 1px 0; border: solid 1px #0095dc }*/
.casePersonneSurvol /* est utilise quand survol du bouton "+". cadre autour de image + info (quand survol) */ { background-color: #f0f7f9; text-align: center; white-space: nowrap; cursor: pointer; /*margin: -2px -2px 1px 1px; padding: 1px 1px 0;*/ float: left; border: solid 1px #0095dc; padding:4px;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
}
.casePersonneSurvol_IE /* quand survol d'une personne */ { background-color: #f0f7f9; text-align: center; white-space: nowrap; cursor: pointer; /*margin: -2px -2px 1px 1px; padding: 1px 1px 0;*/ float: left; border: solid 1px #0095dc; padding:4px; /*padding=valeur de casePersonne - largeur border d'ici (le cadre); */
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
}
.casePersonneSurvolTest /* pour test */ { background-color: red; text-align: center; white-space: nowrap; margin: -1px -1px 1px 2px; padding: 0; float: left; border: solid 1px #0095dc }
.casePersonnePhoto, .contourPhoto {
-webkit-border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; }
.casePersonnePhoto /* Cadre autour de la photo pour anonyme (pas cadre de l'image) */ { /*margin-top: 3px; border-style: solid; border-width: 0 0 1px; border-color: #002131;*/ /*oct2011: ZZborder-width: 0 0 0px;*/ background-color: #ded5e0; padding: 0 5px 0 5px;}
.contourPhoto /* contour de la photo NON anonyme */ { border: solid 2px #002131; /*oct2011:*/ border-width: 0px; }
.casePersonneInfo { font-size: 12px; margin: 0; padding: 0; text-align: center; }
.flecheMiniPrecedente, .flecheMiniSuivante, .flecheMiniPrecedenteOFF, .flecheMiniSuivanteOFF { /*oct2011: commun pour MINI fleches situee le titre de la recherche */
height:21px; width:18px; margin-right: 5px; display: block; float: right; background-color:#0095dc; /*padding: 0px;*/background-repeat: no-repeat; background-position: center; margin-bottom:2px;
}
.flecheMiniPrecedente, .flecheMiniPrecedenteOFF {
background-image: url('../images/objetsDivers/fleches/recherchePrecedentMini.png');
-webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
}
.flecheMiniSuivante, .flecheMiniSuivanteOFF {
background-image: url('../images/objetsDivers/fleches/rechercheSuivantMini.png');
-webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
}
.flecheGrandePrecedente, .flecheGrandeSuivante { /*oct2011: commun pour GRANDE fleches situee avant et apres liste resultat de recherche*/
height:96px; width:50px; display: block; float: left; background-color:#0095dc; padding: 0px; margin: 7px; background-repeat: no-repeat; background-position: center;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
.flecheGrandePrecedente {
background-image: url('../images/objetsDivers/fleches/recherchePrecedent.png'); }
.flecheGrandeSuivante {
background-image: url('../images/objetsDivers/fleches/rechercheSuivant.png'); }
/*au survol des fleches : */
.flecheGrandePrecedente:hover, .flecheMiniPrecedente:hover {
background-position: left; }
.flecheGrandeSuivante:hover, .flecheMiniSuivante:hover {
background-position: right; }
/*si mini fleche desactivees */
.flecheMiniPrecedenteOFF, .flecheMiniSuivanteOFF { /*curseur 'default' car pour la mini felche suivante, le lien est toujours la, donc pour eviter une perturbation visuelle du curseur qui se transforme en main, je le force au curseur 'default'*/
background-color: inherit; /*#F0F7F9; fond bleu tres clair*/ background-position: center; cursor: default; }
.iconeConnaitre /* icone du visage de connaissance */ { visibility: visible; margin: 0; padding: 0 1px 1px 0; position: absolute }
.zoneResultat /* les bandeaux de titre des resultats */ { /*background-color: #f0f7f9;*/ margin: 0; /*padding: 0px 10px;*/ width: 100%; clear: left; /*color: white;*/ }
.zoneTri { /*background-color: #771CC9;*/ margin: 0; padding: 0px 5px; vertical-align: top; border-bottom: 0 solid white }
.zoneInfoResultatAUCASOU /* zone sous les resultats tel que "Encore 8 resultats", ou "Cliquer ici pour etendre la recherche" */ { font-size: 14px; background-color: #f0f7f9; margin: 0 0 0 101px; padding: 10px; width: 100%; clear: left; /*border-left: medium solid white;*/ }
.zoneInfoResultatAUcasOU2 /* zone sous les resultats tel que "Encore 8 resultats", ou "Cliquer ici pour etendre la recherche" */ { font-size: 14px; background-color: #f0f7f9; margin: 0 0 0 101px; padding: 10px; width: 100%; clear: left; border-left: medium solid white }
.zoneInfoResultat, .zoneInfoResultatSuite /* zone sous les resultats tel que "Encore 8 resultats", ou "Cliquer ici pour etendre la recherche" */ { font-size: 14px; /*background-color: #f0f7f9;*/ /*margin-bottom: 15px;*/ padding: 0px 10px; /*width: 100%;/*90%*/ /*float: left;*//*right*/ /*border-left: medium solid white;*/ /*border-top:0px solid #771CC9;*/ /*oct2011:*/ /*background-color: white;*/ margin-top:20px;
}
.zoneInfoResultat { /*complément de avant*/
/*-webkit-box-shadow: -4px 2px 4px rgba(0,0,0, 0.4); -moz-box-shadow: -4px 2px 4px rgba(0,0,0, 0.4); box-shadow: 0px -4px 4px rgba(0,0,0, 0.4) ;*/ /*ombre vers le haut*/
padding-top : 10px; /*petite espace entre ligne du dessus et le texte*/
/*border-top:1px solid #771CC9;*/
}
.zoneInfoResultatSuite { /*complement*/
}
.couleurAide strong { /*062011: pour mettre en valeur les mots importants (voir aussi + bas pour bulle) */
color: #771CC9; font-size:1.0em; font-weight: bold; }
/*Pour les titres des zone (nos connaissance, recherche,...) avec ligne en-dessous*/
.zoneTitre { /* pour les bandeau de titres (au-dessus nos connaissance, recherche, modif mes infos,...) */
/*background-color: #FFF;*/ /*border-bottom: 4px solid #771CC9;*/ color: #771CC9; /*couleur du texte dans le bandeau*/
/*margin-bottom: 7px;*/ width: 100%; /**/
}
.zoneTitre td { font-size: 15px; vertical-align: bottom; } /*texte des titre + gros (si zoneTitre dans un tableua ou directemetn dans un div ou span)*/
.zoneTitre td font { font-size: 12px; } /*complement des textes de titre un peu + petits (si zoneTitre dans un tableua ou directemetn dans un div ou span)*/
.ligneTitre { background-color: #771CC9; height:2px; width:100%; margin-bottom:7px; }
.cadreSuite { text-align: center; white-space: nowrap; margin: 0 0 2px; float: left }
/*.flecheSuite { margin: 5px 3px 5px 2px; padding: 15px 15px 15px 11px; width: 20px; height: 28px }*/
.flecheSuite { margin: 5px 3px 5px 2px; padding: 11px 12px 10px 8px; width: 29px; height: 37px }
.flecheSuite:hover { padding: 11px 12px 10px 8px; width: 29px; height: 37px }
.cadrePrecedent { text-align: center; white-space: nowrap; margin: 0 0 2px; float: left }
/*.flechePrecedent { margin: 5px 0; padding: 15px 8px 15px 5px; width: 20px; height: 28px }*/
.flechePrecedent { margin: 5px 0; padding: 11px 5px 10px 2px; width: 29px; height: 37px }
.flechePrecedent:hover { padding: 11px 5px 10px 2px; width: 29px; height: 37px }
.texteDiscret { color: #B7A1CD; } /*texte violet clair*/
.lienDiscret a { color: #af95dc; text-decoration: none } /*#ababab*/
.lienDiscret a:hover { color: #0095dc }
.texteDiscretGris { color: #787878; } /*texte gris*/
/*Concerne les mini bulles d'information:*/
.XXXbulleInfo1 { color: #0095dc; background-color: white; border-style: solid; border-width: 2px 0; border-color: #0095dc;
-webkit-box-shadow: -3px 2px 30px #AAA; -moz-box-shadow: -3px 2px 30px #AAA; box-shadow: -3px 2px 30px #AAA; /*ombre large car ne prend pas les arrondis*/
}
.XXXbulleInfo1lien /* pour le texte normal sans lien */ { color: white; text-decoration: none }
.XXXbulleInfo1lien:link /* pour le texte lien (si rien alors prend les valuer de dans CSSbase */ { color: white; text-decoration: none }
.XXXbulleInfo1lien:visited /* on doit mettre la couelur du texte poru FireFox */ { color: white; text-decoration: none }
.XXXbulleInfo1lien:hover /* lien souligne sur bulle bouton (tout bleu)*/
{ color: white; /*text-decoration: none;*/ text-decoration: underline; padding-bottom: 0; border-style: solid; /*border-width: 0 0 2px;*/ border-width: 0 0 0px; border-color: white }
.XXXplacerMiniFleche { position: absolute; left: 20px }
.XXXbordGaucheBulleInfo /* image obligatoire car bord marche pas si zone tableau vide (poru firefox et encore moins sous IE) */ { background-color: white; background-image: url("../images/carreBleu2x2.gif"); background-repeat: repeat-y }
.XXXbordDroitBulleInfo /* pour le bout droit de la bulle d'info */ { background-color: white; background-image: url("../images/carreBleu2x2.gif"); background-repeat: repeat-y; background-position: 9px 0 }
.XXXbulleInfo2 { color: white; background-color: #0095dc; border-style: solid; border-width: 2px 0; border-color: #0095dc; }
/*oct2011 - les nouvelles bulles d'information:*/
#texteBulleInfo2, #texteBulleInfo1 { /*commun bulle pleine et normale*/
padding: 5px 8px 4px 8px;
margin:0px;
text-align:center;
font-size:12px; /*display:none;*/
-webkit-border-radius:14px; -moz-border-radius:14px; border-radius:14px;
-webkit-box-shadow: -1px 1px 10px rgba(0,0,0, 1); -moz-box-shadow: -1px 1px 10px rgba(0,0,0, 1); box-shadow: -1px 1px 10px rgba(0,0,0, 1);
}
#texteBulleInfo2 {
border: 2px solid #0095dc; /*background-clip: padding-box;*/
background-color: #0095dc;
color: #FFFFFF;
}
#texteBulleInfo1 {
border: 2px solid #75788a;
background-clip: padding-box;
background-color:white;
color:#75788a;
}
/*sept2019 : liste (ex: TCACCPI, TCACCPC)*/
#texteBulleInfo1 ul
{ text-align:left;
margin-top: 0.3em; margin-bottom: 0.3em;
padding-left: 1.3em;
}
#texteBulleInfo1 ul.nb
{ list-style-type: decimal;
}
#texteBulleInfo1 ul li
{ line-height: 1.3em;
padding-bottom: 0.5em;
}
#texteBulleInfo1 a { /*si un lien sur une bulle d'aide normale (pour ecran tactile)*/
background-color: #0095DC; color: white; text-decoration: none;
display: inline; /*ou block si on veut que ca occupe toute la largeur OU que margin-top soit pris en compte*/
padding: 1px 6px; margin-top: 0px;
-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;
}
.bulleInfo2lien /* pour le texte normal sans lien */ { color: white; text-decoration: none }
.bulleInfo2lien:link, .bulleInfo2lien:visited /* pour le texte lien (si rien alors prend les valuer de dans CSSbase. on doit mettre la couleur du texte dans visited pour FireFox */ { color: white; text-decoration: none }
.bulleInfo2lien:hover {
color: white; text-decoration: underline; /*padding-bottom: 0; border-style: solid;*/ /*border-width: 0 0 2px;*/ /*border-width: 0 0 0px; border-color: white*/ }
/*mieux d'utiliser strong que b (donc je corrige progressivement) :*/
#texteBulleInfo1 strong { /*062011: pour mettre en valeur les mots importants */
color:#771CC9; font-size:1.1em; font-weight: bold; }
/* b sera de moins en moins utilise :*/
#texteBulleInfo1 b { color:#771CC9; font-size:1.1em; font-weight: bold; }
.placerMiniFleche { position: absolute; left: 20px }
/* + voir a la fin pour ordre de superposition des elements */
/*style d'une zone cadeau (nouveau, modifier,...)*/
.styleZoneCadeau { background-color: #00b600; visibility: visible; padding: 0; width: auto; height: auto; border: double 5px white }
/*styles taille texte*/
.taillePetit-15 { font-size: 15px }
.taillePetit-14 { font-size: 14px }
.taillePetit-12 { font-size: 12px }
.taillePetit-11 { font-size: 11px }
.taillePetit-10 { font-size: 10px }
.taillePetit-9 { font-size: 9px }
/*separateurs*/
.separateur-2 { height: 5px }
.separateur-1 { height: 10px }
.separateur0 { height: 15px }
.separateur1 { height: 20px }
.separateur2 { height: 25px }
.alignerAGauche { float: left }
.alignerADroite { float: right }
.tailleBoutonGros /* pour grossir police des boutons (ex: page accueil) */ { font-size: 16px }
.tailleBoutonPetit /* pour reduire police des boutons plus discret */ { font-size: 10px }
.couleurBleu { color: #0095dc }
.couleurVert { color: #00b600 }
.couleurOrange { color: #ffa500 }
.couleurRouge { color: #d31409 }
.couleurViolet { color: #771CC9 }
.couleurAide { color: #75788A } /*pour encart aide, bulle aide,... gris*/
.alerteCadre1 { color: #fff; background-color: #d31409; padding: 5px; border-style: solid; border-width: 3px 0; border-color: #ffa500 }
.texteStyleBD { color: #771cc9; font-size: 14px; font-family: "Comic Sans MS", "Trebuchet MS", Geneva, Arial, Helvetica; position: relative; top: 8px }
/*082011 - ordre de superposition. Pour eviter que les pubs (notamment) ne passe pas devant les bulles d'aide (par ex)*/
#bulleInfo1, #bulleInfo2 { /*les bulles d'aide qui doivent s'afficher devant le reste*/
z-index:110; /*fev2015: 110 au lieu de 100*/
}
#miniFleche1, #miniFleche2 { /* le mini fleche sous les mini bulles sont independantes*/
z-index:111; /*fev2015: 111 au lieu de 101*/
}
#calqueInfo { /* les bulle d'aide plus grande */
z-index:109; /*fev2015: 109 au lieu de 99*/
}
#formZoneCadeau, #formZoneGroupeCadeau, #formZoneCaseCadeau, #formZonePhoto { /*idem pour les "fenetres" qui doivent apparaitre devant le reste (ex:pour ajouter un cadeau, une photo,...)*/
z-index:100; /*fev2015: 100 au lieu de 50 poru etre devant menu qui est a 99*/
}