/* ------------------------------------ *
 CSS
 vendredi 12 janvier 2007 10:02:45
 HAPedit 3.1.11.111
 * ------------------------------------ */
/* ------------------------------------ *
   color:#CC99CC  mauve           color:#FFC082  beige moyen     color:#FFB366  orangé
   color:#FF6699  rose            color:#80FF80  vert clair      color:#2D5309  vert sombre
   color:#E9B796  beige           color:#000000  noir            color:#DCBD7C  jaune ocre
   color:#FFF8DC  jaune clair     color:#92c688  vert amande     color:#9C7729   jaune ocre fonce
   color:#B9FFB9  vert très clair color:#3366ff bleu vif         color:#cc3300  rouge brique
   color:#ff3300  rouge           color:#C7CEF7 bleu clair
   color:#255E24  vert fonce      color:#303090 bleu fonce
   color:#330099  bleu fonce      color:#808080  gris
   color:#cc0033  rouge fonce     color:#DC143C  rouge vif
   color:#FFFFFF  blanc           color:#F1D150 fond jaune
 * ------------------------------------ */

body
{
    width: 1500px ;
    margin: 10px 0 ;
    padding: 0 ;
    text-align: center ;
    font-size: 0.8em ;
    font-family: Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS"; color:#3366ff ;
    background: #FFF8DC ;         /* #ff3300 */
}
/*                                   debut page accueil                                      */
/* ====== bandeau du haut ======*/
div#bandeau_milieu
{
  float:left;border:0;width:150px;height:150px;
}
div#bandeau_gauche
{
  float:left;
  background-image:url("IMAGES/laudesque-137-192.jpg");
  background-repeat: no-repeat;
  background-position: right;
  width:137px;
  height:192px;
}
div#bandeau_droite
{
  float:right;
  background-image:url("IMAGES/sept-cuir-137-192.jpg");
  background-repeat: no-repeat;
  background-position: right;
  width:137px;
  height:192px;
}
#textebandeau
{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  position:absolute;
  color:#ff3300;
  font-size:x-large;
  font-weight:bold;
  text-align:center;
  white-space:pre;
}

div#defile
{
  width: 1100px ;    /* 900px */
  height:80px;
  border: 10px solid #ff3300 ;
  background: #FFFFFF;
  margin-left: 200px;  /* 300px */
  }
#textedefile
{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  position:absolute;
  color:#000000;
  font-size:medium;
/*   font-weight:bold;
 */}
.textehisto
{    font:    Verdana, Arial, Helvetica, sans-serif;
   color: #000000;
   margin-left:0 0;
}
div#conteneur
{
  width: 1500px ;
  height:200px;
  margin: 0 auto ;
/*       padding: 0 auto  ; */
  text-align: left  ;
  border: 22px solid #F1D150 ;      /* #ab4 #FFF8DC */
  background: #FFF8DC;     /* #F1D150 */
}
/* ====== fin bandeau du haut ======*/

div#blocmenu
{
    width: 1200px ;      /* 1040px  */    /* 912px */
    height: 35px ;        /* 35px */
    margin: 0 auto ;      /* 0 auto */
    text-align: left ;
    border: 2px solid #ab4 ;
    background: #F1D150 ;
}
div#texte_titre
{
  background-color:#FFFFFF;      /* #FFD6B5 */
  border-style:outset;
  margin: 0 auto;
  border-color:#93640D;          /* #80FF80 #923527 */
  border-width : 3px;
  width:1000px;
}
/* h2#texte-gauche */
.texte-gauche{
   font: bold 14pt Verdana, Arial, Helvetica, sans-serif;
   color: #000000;       /* #cc3300 #3366ff #303090 */
   width: 900px ;
   text-align:left;    /* center */
   position:relative;
   margin: 10px;
}

div#contenu
{
    padding: 0 25px 0 60px ;
    background: #FFF8DC ;       /* #C7CEF7 */
    float:left;
    width : 1500px;
}
div#image
{
    width : 1420px;
    height: 980px;
    margin: 0 auto;
    /* background-image: url("IMAGES/Quartier_Berniquet_NOYON-1411-960-A.jpg") top right no-repeat; */
    float:left;
}
div#texte-photo-accueil
{
   font:  bold 14pt Verdana, Arial, Helvetica, sans-serif;
   color: #330099;
   margin-left:0 0;
   width: 1500px ;
   float:left;
   text-align:left;
   margin: 10px;
}
.texte-photo
{
   font:  bold 14pt Verdana, Arial, Helvetica, sans-serif;
   color: #330099;
   margin-left:0 0;
   width: 600px ;       /* 1500px */
   float:left;
   text-align:center;
   margin: 10px;
}

.area1
    { background-color:red ; }

.plan_droit_contacts
        {float:right;margin-right:20px;}
.plan_centre_histo
        {margin-left:380px;}
 .plan_gauche_histo
        {margin-left:280px;
        float:left;}

div#contenu_contacts {float:left;width:850px;   background-attachment: fixed;
background-color:#F1D150 ;     /* #E9B796 */
margin-left: 300px;
   font:  bold 14pt Verdana, Arial, Helvetica, sans-serif;
   color: #330099;
   text-align:center;

}       /* background-color:#E9B796; */
/* .plan_gauche_contacts {float:left;margin-left:20px;} */       /* ============================ */
div#contenu_photos
{
   margin-left: 200px;
   padding: 0 25px 0 60px ;
   width : 600px;

}
div#contenu_amicale
{
   margin-left: 200px;
   padding: 0 25px 0 60px ;
   background: #FFF8DC;       /* #C7CEF7  */
   /* float:left; */
   width : 1000px;

}
/* h2#A2014texte-amicale */
.texte-amicale{
   font: bold 12pt Verdana, Arial, Helvetica, sans-serif;
   color: #000000;       /* #cc3300 #3366ff #303090 */
   width: 300px ;
  /*  height: auto; */
  /*  margin: 0 auto; */
   text-align:center ;    /* left */
  position:relative;
  /*  margin: 10px;  */  padding-bottom: 15px;   margin-top: 40px;
  border: 2px solid #ab4 ;
   background-color:#F1D150 ;     /* #3366ff #F1D150 #FFF8DC*/
}
.texte2-amicale{
   font: bold 12pt Verdana, Arial, Helvetica, sans-serif;
   color: #000000;       /* #cc3300 #3366ff #303090 */
   width: 300px ;
   text-align:center ;
  position:relative;
  padding-bottom: 15px;   margin-top: 40px;
  border: 2px solid #ab4 ;
   background-color:#E7A061 ;     /* #3366ff #F1D150 #FFF8DC*/
}
.texte-aide
{
   font: bold 12pt Verdana, Arial, Helvetica, sans-serif;
   color: #000000;       /* #cc3300 #3366ff #303090 */
   width: 300px ;
  /*  height: auto; */
  /*  margin: 0 auto; */
   text-align:center ;    /* left */
  position:relative;
  /*  margin: 10px;  */  padding-bottom: 15px;   margin-top: 40px;
  border: 2px solid #ab4 ;
   background-color: #C7CEF7;     /*  #F1D150 */
}
div#contenu_liens
{
   margin-left: 200px;
   padding: 0 25px 0 60px ;
   background: #FFF8DC;       /* #C7CEF7  */
   float:left;
   width : 1000px;

}
.plan_gauche_sites {float:left;width:1000px;}
.plan_droit_sites {float:right;width:1000px;}
.texte-liens
{
   font: bold 12pt Verdana, Arial, Helvetica, sans-serif;
   color: #000000;       /* #cc3300 #3366ff #303090 */
   width: 300px ;
  /*  height: auto; */
  /*  margin: 0 auto; */
   text-align:center ;    /* left */
  position:relative;
  /*  margin: 10px;  */  padding-bottom: 15px;   margin-top: 40px;
  border: 2px solid #ab4 ;
   background-color: #C7CEF7;     /*  #F1D150 */
}
.banmenu { margin-top:70px;margin-right:160px;float:left;
          color:#2D5309; font: Verdana, Arial, Helvetica, sans-serif; font-size:15px; position:relative;
          }


/* ======================== DEBUT menu principal ========================*/
#menu                         /*-----pour le menu horizontal-------*/
{
    width:1280px;            /*-----donner une largeur au menu, prendre en compte les marges-------520px  1000px  1150px*/
    height: auto;           /*-----important pour IE7, mettre une hauteur auto sinon pas de menu deroulant------*/
    list-style-type: none;  /*-----pas de puce-----*/
    margin: 0 auto;         /*-----marge auto pour centrer mon menu dans l'élément-------*/
    padding: 0;             /*-----marge interne à 0 et bordure à 0 pour ne pas avoir de soucis avec les différents navigateurs-----*/
    border: 0;
}
#menu > li            /*------uniquement pour la liste de premier niveau-------*/
{
    float: left;        /*------permet de mettre les items <li> horizontalement------*/
    width: 120px;          /*------je donne une largeur à mes cellules-------*/
    margin: 5px;           /*------j'espace mes cellules de 5px-------*/
    padding: 0;
    border: 0;
}
#menu li a                   /*------pour les liens de premier niveau-------*/
{
    display: block;        /*------pour mettre mes liens en block------*/
    color: #FFFFFF;         /*------donne une couleur à la police------*/
    background-color: rgb(0, 0, 0);   /*------je donne un fond solide par sécurité pour les navigateurs qui ne reconnaissent pas la transparence-----*/
    /* background-color: rgba(0, 0, 0, 0.5); */     /*------fond transparent reconnus par les bons éléves-----*/
    margin: 0;                                /*------mettre tout le monde d'accord--------*/
    padding: 4px 8px;                         /*-----marge interne----*/
    border:1px solid #FFFFFF;                 /*-----une bordure extérieur-------*/
    text-decoration: none;               /*-----pas de décoration pour mes liens-----*/
}
#menu li a:hover
{     /*-------une couleur de fond au survol sur mes liens-------*/
      background-color: rgb(175, 214, 1);
/* background-color: rgba(175, 214, 1, 0.5); */
}
/* ======================== FIN menu principal ========================*/

/* ======================== DEBUT menu deroulant ========================*/
/* #menuderoulant ul ul {display: none; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
#menuderoulant ul.niveau2 {left: 0px; top: 22px;}
#menuderoulant ul.niveau3 {left: 144px; top: -1px;}
 */
#menu .menuderoulant       /*----pour mon menu déroulant-------*/
{
    display: none;          /*------pour le faire disparaitre------*/
    list-style-type: none;  /*-------pas de puce-------*/
    margin: 0;              /*------pas de marge interne et externe ni bordure pour mettre tout le monde d'accord--------*/
    padding: 0;
    border: 0;
    position:absolute;   /*------pour ne pas pousser un éventuel texte dessous-----*/
}
#menu .menuderoulant li         /*-------pour ma liste de deuxième niveau-------*/
{
    float:none;
    margin: 0;
    padding: 0;
    border: 0;
    width: 140px;                /*----------je donne une largeur à mes cellules de sous menu----------*/
    border-top: 1px solid transparent;       /*-----des bordures transparentes pour espacer mes cellules-----*/
    border-right: 1px solid transparent;
}
#menu .menuderoulant li a         /*---------pour mes liens du menu deroulant---------*/
{
    display: block;
    color: #FFF;
    margin: 0;
    border: 0;
    text-decoration: none;
    background-color:rgb(0, 0, 0);
    /* background-color:rgba(0,0,0,0.5); */
}
#menu .menuderoulant li a:hover       /*------pour le survol du sous menu-------*/
{
    background-color: rgb(18, 89, 239);
    /* background-color: rgba(18, 89, 239, 0.8); */

}
#menu .menuderoulant li a:visited
{         /*---------pour permmetre au visiteur de savoir sur les liens qu'il a déjà visité--------*/
    background-color:rgb(227, 22, 30);
    /* background-color:rgba(227, 22, 30, 0.5); */
}
#menu li:hover  .menuderoulant
{
    display: block;
}    /*------pour faire apparaitre notre sous menu au survol du menu de premier niveau------*/
/* ======================== FIN menu deroulant ========================*/

/* ======================== LIEN non souligné ========================*/
a.nounderline:link 
{ 
     text-decoration:none; 
     width:180;
     background-color:#DCBD7C;
}
/* ======================== FIN LIEN non souligné ========================*/



div#contenu h2
{
    padding-left: 25px ;
    line-height: 25px ;
    font-size: 1.4em ;
    /* background: url("IMAGES/little_apple.gif") no-repeat left bottom ; */
    color: blak ;
    /* border-bottom: 1px solid white ; */
}
div#contenu h3
{
    margin-left: 15px ;
    padding-left: 5px ;
    border-bottom: 1px solid #9b2 ;
    border-left: 3px solid #9b2 ;
    color: #9b2 ;
}
div#contenu p
{
    text-align: justify ;
    text-indent: 2em ;
    line-height: 1.7em ;
}
div#contenu a
{
    color: #8a0 ;
}
div#contenu a:hover
{
    color: #9b2 ;
}
p#footer
{
    margin: 0 ;
    padding-right: 10px ;
    line-height: 30px ;
    text-align: left ;
    color: #000000 ;            /* #8a0 */
}
.clic_retour
    {border:0 ;}
.clic_haut {text-align:right;}
pre
{
    overflow: auto ;
    background: #dea ;
    border: 2px solid #9b2 ;
    padding: 5px 0 0 5px ;
    font-size: 1.2em ;
}

pre span
{
    color: #560 ;
}

pre span.comment
{
    color: #b30000 ;
}
.fontMbleu {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:medium;color:#3366ff;/* font-weight:bold; */text-align:left;}
.fontbleue {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:medium;color:#330099;text-align:left;  margin-left:350px;}
.fontcommentaire{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:small;color:#000000;/* font-weight:bold; */text-align:center;}
.fontcomment{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:small;color:#000000;/* font-weight:bold; */text-align:left;}
.rouge1 {font: bold medium Verdana, Arial, Helvetica, sans-serif;color:#cc0033;text-align: left;}
.souligner                                          /*-- ou del#noir--*/
 {text-decoration: underline;}    /*-- pour forcer la balise <del> à souligner le mot, au lieu de le barrer --*/

/*                                    fin page accueil                                        */

/*                                 debut page formulaire                                        */

div#contenu_formulaire {
  width:800px;         
  background-color:#FFF8DC;               /* #cc0033  */
  text-align:center;
  margin-left:300px;
 }     

p.titreformulaire {                       /*              titres des blocs            */
 background:#006699;       /* couleur de fond du titre */
 color:#FFFFFF;            /* couleur du texte */
 padding: .2em  .3em;       /* un petit espace pour ne pas écrire juste au bord du cadre du titre */
 font-size:1.2em;           /* pour définir la taille du texte */
 border:2px outset #DED983;       /* une bordure de 2 pixels avec un effet sortant (ombre) et une couleur définie */
 position:relative;               /* titre en position relative à son conteneur */
 margin-bottom:-1em;       /* une marge de bas négative, ce qui fait que le titre viendra s'encastrer dans l'élément en-dessous */
 width:10em;                       /* la largeur du cadre du titre */
 margin-left:1em;                  /* marge à gauche du titre  */
 margin-top:1em;                   /* marge au-dessus du titre */
 }
fieldset {                     /*               fieldset et liste deroulante               */
 border:none;              /* on spécifie de ne pas mettres de bordures (on la mettra sur chaque jeu de champs, au cas par cas) */
 margin-bottom:1em;         /* marge du dessous */
 width:800px;                 /* la largeur des cadres de champs 30em*/
 padding-top:1.5em;           /* espace en haut, pour laisser la place aux cadres de titres */
 padding-bottom:2em; }
select {
 margin-left:9em;            /* marge à gauche (pour laisser la place aux "labels" qui sont les descriptions des champs" */
 margin-bottom:0;             /* à 0, pas de marge en dessous */
 }
fieldset#coordonnees {         /*             champs coordonnees                        */
 background:#A4D8EE;           /* couleur de fond */
 border:outset #A4D8EE;         /* bordure "outset", qui va sortir de derrière pour faire comme un effet d'ombre */
 }
#coordonnees label {            /*            labels coordonnees                        */
 position:absolute;           /* position absolue (relative à un autre élément) */
 font-size:120%;                /* taille de police, ici 90% de la taille par défaut */
 padding-top:.2em;             /* un espace au-dessus du texte du label */
 left:320px;                    /* spécifie la position horizontale du coin haut gauche de l'élément (20 pixels) */
 }
#coordonnees input {
        /* width:400px;  */
 margin-left:50px;            /* 9em une marge à gauche pour permettre de laisser de la place aux labels (légende des champs) */
 line-height:1.4em;          /* on allonge l'interligne */
 margin-bottom:.2em;          /* on met une marge en-dessous pour ne pas que les champs se touchent */
 }
fieldset#message {             /*              champ message                             */
 background:#3978C6;         /* #9DF2CE définition d'une couleur de fond pour le bloc */
 border:outset #9DF2CE;       /* mise en place d'une bordure "outset" (effet d'ombre sortante), comme pour le bloc précédent */
 }
#civilite {                   /*                bouton radio                             */
 font-size:100%;               /* taille de la police de caractères à 90% pour le texte des boutons radio : */
 }
#civilite input {
 margin-left:9em;             /* marge à gauche comme pour les autres éléments input du formulaire, pour laisser la place aux légendes : */
 }
#civilite input + input {
 margin-left:1em;             /* style appliqué uniquement si le champ input radio est précédé d'un autre */
 }
textarea {                      /*                 texte message                          */
 font:.8em  Verdana, sans-serif, "Trebuchet MS";
 width:600px;                                           /* largeur de la zone de texte 29em */
 padding:.2em;                                       /* espacer le texte de la zone de 0.2em de façon à ne pas écrire trop sur le bord. */
 }
input[type="submit"]{           /*                 bouton envoi                             */
 color:#FFFDFD;                   /* couleur du texte */
 font-family:  Verdana, sans-serif, "Trebuchet MS";    /*  */
 font-size: 1.2em;                  /*  */
 background-color: #003399;           /* couleur de fond */
 }
p#bouton {
 text-align:center;                /*  */
 }
/*                                 fin page formulaire                                        */

 .flotte {
float:left;
}



/*                                 debut page photos                                        */
.ulaffiche{
 width:960px; /* 660px largeur du conteneur de la galerie de photos attention à mettre la valeur de la largeur du nombre de colonnes, sinon les photos ne seront pas centrées dans le conteneur*/
 display:block;
 padding:140px; /* pour avoir de la place de chaque côté pour faire dépasser le zoom sur les photos du bord 40px */
 margin:0 auto 0 auto; /* pour centrer la galerie sur la page */
 background-color:#D6E46B; /*couleur de fond de la galerie #666666 */
 overflow:auto; /* pour firefox : permet de prendre en compte les élément float pour le dimensionnement du conteneur de la gallerie */
}
.ulaffiche li {
 float:left; /* chaque conteneur sera en float, les images se mettront donc côte à côte avec retour à la ligne quand elles arrivent au bout */
 width:128px; /* largeur de la case qui contient une photo */
 height:96px; /* hauteur */
 display:block; /* pour enlever les puces de la liste */
 overflow:hidden; /* pour IE : permet de superposer sur le reste la div plus grosse lors du zoom */
 padding:2px; /* bordure autour des images */
 background-color:#000000; /* couleur de fond sous les images */
}
.*>.ulaffiche li {overflow:visible;} /* pour firefox (propriété invisible pour IE): permet d'afficher la zone de l'image qui dépasse lors du zoom */
.ulaffiche img {
 border:0; /* supprime les bordures bleues des liens */
 height:96px; /* définit la hauteur des images */
 max-height:96px; /* idem mais pour firefox */
 }
.ulaffiche li div a {
 float:left; /* positionnement du lien dans la div*/
 margin:0 auto 0 auto; /* centre le lien et donc l'image*/
 width:128px; /* taille du lien, identique à celle de l'image */
 height:96px; /* idem */
}

.ulaffiche li div a:hover {
 position:relative; /* position de la div de zoom */
 margin-left:-40px; /* marges pour centrer la div zoommée par rapport à l'image non zoomée */
 margin-top:-25px; /* idem */
 padding:2px; /* cadre autour de la div zoomée */
 height:250px; /* taille du zoom 150px */
 width:200px; /* idem 200px */
 background-color:#aaaaaa; /* couleur du fond de la div, qui apparaitra autour de l'image, notamment sur les images en paysage qui auront des grosses bordures à gauche et à droite */
 border:1px solid #00ffff; /* bordure du zoom */
}
.ulaffiche li div a:hover img {
 height:150px; /* définit la hauteur des images zoomées 150px */
 max-height:150px; /* idem pour firefox */
}

/*                                 fin page photos                                        */


 <!--[if IE]>
<style type="text/css">
html pre
{
  width: 636px ;
}
</style>
<![endif]-->



/*                                 debut galerie de photos                                       */

#gallery {
position:relative;
width:350px;
}

#thumbs {
width:180px;
float:left;
}

#thumbs a {
display:block;
float:right;
width:50px;
height:50px;
margin:0 0 5px 5px;
}

#thumbs a img {
width:50px;
height:50px;
border:0;
}

#thumbs a:hover {
border-color:#ddd;
}

#thumbs a:hover img {
position:absolute;
width:75%;         /* auto 1280px */
height:auto;    /* auto 80%*/
left:185px;
top:0;
border:1px solid #333;
}

/* #thumbs a:hover oldIMG{
position:absolute;
width:500px;
height:960px;
left:185px;
top:0;
border:1px solid #333;
}
 */

/*                                 fin galerie de photos                                       */