/* ------------------------------------ *
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
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 à 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 */
/* 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 */