body 
{ 
margin: 10px 0 ; /* On définit les marges extérieures haute et basse à 10px et les marges droite et gauche à 0 */
padding: 0 ; /* On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body. correspond aux marges haut et bas du site*/
text-align: center ; /* On utilise text-align: center ; pour Internet Explorer, c'est la seule façon de centrer les éléments de type block avec ce navigateur */
font: 13px "Comic Sans MS", "Verdana", "Arial", "Arial Black", "Times New Roman", "Times, sans-serif" ;
background-image:url("images_admin/fond1.jpg") ; /* Couleur de fond de tout ce qui est autour de la page du web */
background-attachment: fixed ; /* Le fond restera fixe et ne défilera pas en même temps que le texte */
}

#header 
{
height: 100px;
background-image:url("images_admin/header.jpg") ; /*largeur de la bannière est 758 px soit 2 px de moins que la largeur du header*/
background-repeat: no-repeat ; /*L'mage de fond n'apparait qu'une seule fois mais mieux vaut s'assurer qu'elle ne seras pas répétée en mosaique*/
}

#conteneur /* Ensemble de la page du site */
{ 
width: 770px ; /* On définit la largeur de l'ensemble de la page */
margin: 0 auto ; /* margin: 0 auto ; est la méthode correcte pour centrer les éléments de type block (comme les divisions), nous centrons donc cette division */
text-align: justify ; /* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */
border: 2px solid #ab4 ; /* Une bordure autour de l'ensemble de la page*/
background: rgb(102,153,255) ; /* Couleur de fond de l'ensemble de la page mais ici, la couleur est visible seulement pour le menu */
position: relative; /* met le texte des menus collés à gauche du menu */
}

#centre /* Corps central */
{ 
color: black;
font-family: "Comic Sans MS", "Verdana", "Arial", "Arial Black", "Times New Roman", "Times, sans-serif" ;
background-color: rgb(102,153,255) ;
margin-left: 150px ;
padding-top: 20px; /*Pour éviter que le texte à l'intérieur du corps colle trop à la bordure du haut */
text-align: justify ; /* alignement justifié */
line-height: 1.4em ; /* hauteur de ligne supérieure à l'état normal pour aérer le tout */
padding-left: 10px ;
padding-right: 5px ;
}

#centre a /* Caractéristiques des liens du centre */
{ 
color: blue;
font-weight: bold ;
}

#centre a:hover /* Caractéristiques des liens du centre au passage de la souris */
{ 
color: orange;
}

#haut_de_page_milieu /* "Haut page" à la fin des pages du centre sauf celles avec les photos agrandies (un bloc dans un bloc) */
{
text-align: center;
color: black;
border: 1px solid black;
background-color: yellow;
width: 120px;
margin: auto; /* Pour centrer le bloc "Haut de page" mais ne fonctionne pas avec les versions antérieures de IE 6 */
margin-left: 240px; /* Pour ceux qui n'auraient pas IE 6 ou un autre navigateur qui ne prend pas en compte margin: auto */
}

#haut_de_page_milieu a /* "Haut page" à la fin des pages du centre (un bloc dans un bloc) */
{
color: black;
text-decoration: none;
font-family: "Comic Sans MS", "Arial", "Arial Black", "Times New Roman", "Times, sans-serif";
}

#haut_de_page_milieu a:hover /* "Haut page" à la fin des pages du centre (un bloc dans un bloc) */
{
color: orange;
font-weight: bold;
text-decoration: none;
font-family: "Comic Sans MS", "Arial", "Arial Black", "Times New Roman", "Times, sans-serif";
}

#haut_de_page_milieu_artisanat /* "Haut page" à la fin des pages du centre sauf celles avec les photos agrandies (un bloc dans un bloc) */
{
text-align: center;
color: black;
border: 1px solid black;
background-color: yellow;
width: 120px;
margin: auto; /* Pour centrer le bloc "Haut de page" mais ne fonctionne pas avec les versions antérieures de IE 6 */
margin-left: 575px; /* Pour ceux qui n'auraient pas IE 6 ou un autre navigateur qui ne prend pas en compte margin: auto */
}

#haut_de_page_milieu_artisanat a /* "Haut page" à la fin des pages du centre (un bloc dans un bloc) */
{
color: black;
text-decoration: none;
font-family: "Comic Sans MS", "Arial", "Arial Black", "Times New Roman", "Times, sans-serif";
}

#haut_de_page_milieu_artisanat a:hover /* "Haut page" à la fin des pages du centre (un bloc dans un bloc) */
{
color: blue;
font-weight: bold;
text-decoration: none;
font-family: "Comic Sans MS", "Arial", "Arial Black", "Times New Roman", "Times, sans-serif";
}

#haut_de_page_milieu_pa /* "Haut page" à la fin des pages du centre sauf celles avec les photos agrandies (un bloc dans un bloc) */
{
text-align: center;
color: black;
border: 1px solid black;
background-color: yellow;
width: 120px;
margin: auto; /* Pour centrer le bloc "Haut de page" mais ne fonctionne pas avec les versions antérieures de IE 6 */
}

#haut_de_page_milieu_pa a /* "Haut page" à la fin des pages du centre (un bloc dans un bloc) */
{
color: black;
text-decoration: none;
font-family: "Comic Sans MS", "Arial", "Arial Black", "Times New Roman", "Times, sans-serif";
}

#haut_de_page_milieu_pa a:hover /* "Haut page" à la fin des pages du centre (un bloc dans un bloc) */
{
color: orange;
font-weight: bold;
text-decoration: none;
font-family: "Comic Sans MS", "Arial", "Arial Black", "Times New Roman", "Times, sans-serif";
}

#gauche /* Menu */
{ 
position: absolute;
left:0;
width: 150px;
}

#pied 
{
height:30px;
color: black;
font-family: "Comic Sans MS", "Arial", "Arial Black", "Times New Roman", "Times, sans-serif";
font-size: 0.8em;
text-align: center;
background-color: #8efdff;
margin: 0 ;
padding-top: 10px ;
padding-bottom: 5px ;
line-height: 1.1em ;
}

#pied a:hover
{
color: blue;
font-weight: bold;
}

#photos_bas { /* 3 photos du bas de page des récit. Fonction pour le renvoi des photos */
border-bottom: none;
}


.menugauche { /*Les cadres du menu */
list-style-type: none;
margin: 0;
padding: 0;
}

.menugauche li  /*Les listes des menus */
{
margin: 20px 5px 20px 14px; /* Marges intérieures : haut, droit, bas, gauche */
width: 135px; /* Largeur des cadres des menus */
height: 20px;
display: block;
text-align: center;
border: 2px solid gray;
text-decoration: none;
background: yellow;
}

.menugauche a /*Caractéristiques des liens dans le menu */
{ 
color: black; /* Couleur des mots dans les cadres menus */
font-family: "Comic Sans MS", "Arial", "Arial Black", "Times New Roman", "Times, sans-serif";
font-size: 1em;
margin: 0 2px;
text-decoration: none;
}

.menugauche a:hover 
{ /* Au passage de la souris sur les liens du menu */
font-weight: bold;
}

.logo_licence /*Logo de Creative Commons dans le menu gauche */
{
text-align: center;
padding-top: 13px;
}

.photos_mini_menu /* Les photos miniatures dans le menu des pages de recit lieux */
{
border: 1px solid black;
}

.quatre_photos_baspage /* 4 photos en portrait  */
{
margin: 8px 2px 13px 5px ;
border: 1px solid black ;
}

.trois_photos_baspage  /* 3 photos en paysage  */  
{
margin: 8px 2px 13px 7px ;
border: 1px solid black ;
}

.gal_ph_mini_flottant /* dans page_photos_1 : photos miniatures flottantes sauf celles de l'Inde et du Laos qui ont des formats différents */
{
float: left;
margin-bottom: 5px;
margin-top: 5px;
margin-right: 8px;
border: 1px solid black ;
}

.gal_ph_mini_flottant_sp/* dans page_photos_1 : photos miniatures flottantes de l'inde et du Laos */
{
float: left;
margin-bottom: 8px;
margin-top: 5px;
margin-right: 8px;
border: 1px solid black ;
}

.gal_ph_mini_flottant_artisanat /* Dans page_artisanat */
{
float: left;
margin-bottom: 8px;
margin-top: 5px;
margin-right: 8px;
border: none ;
}

.gal_ph_mini_flottant_gourmands /* dans gourmands */
{
float: left;
margin-bottom: 10px;
margin-top: 5px;
margin-right: 8px;
border: 1px black ;
}

.gal_photos_mini_portraits /*dans gal_pays, les photos qui sont en miniature, mode protrait */
{
margin-left: 23px ;
}

.gal_photos_mini_portraits_bis /*Dans v_gal_birmanie et portraits */
{
margin-left: 40px ;
}

.titres_galerie /* Page de présentation des galeries photos : noms des endroits visités */
{
display: inline;
font-weight: bold;
color: orange;
}

.para_vide_ph2 /*Paragraphe vide dans photos_1 et photos_2 : pour éviter que les photos flottantes, qui restent bien à gauche sous IE,  ne se décalent vers la droite dans d'autres navigateurs comme Mozilla */
{
clear: both;
}

.para_sans_espace_dessous /*Paragraphe vide dans photos_1 et photos_2 : pour éviter que les photos flottantes, qui restent bien à gauche sous IE,  ne se décalent vers la droite dans d'autres navigateurs comme Mozilla */
{
padding-bottom: 0px ;
}

.flag_flottant /* Drapeaux dans pays_p */
{
float: left;
border: 3px dotted black;
margin-right: 8px;
margin-top: 14px;
}

.para_dessous_flottant /* dans pays_p : préciser que le para qui suit une image flottante + un texte ne fera pas partie de cet élément, que l'image flotte à gauche ou à droite */
{
clear:both;
padding-top: 25px; /* Espace entre le drapeau et le texte en dessous */
padding-bottom: 10px;
}

.para_dessous_flottant_para1 /* dans pays_birmanie_v : préciser que le para qui suit une image flottante + un texte ne fera pas partie de cet élément, que l'image flotte à gauche ou à droite */
{
clear:both;
padding-top: 15px; /* Espace entre le drapeau et le texte en dessous */
padding-bottom: 0;
}

.para_dessous_flottant_para2 /* dans pays_p (Inde, Birmanie, Singapour, Thailande) : préciser que le para qui suit une image flottante + un texte ne fera pas partie de cet élément, que l'image flotte à gauche ou à droite */
{
clear:both;
padding-top: 0px; /* Espace entre les paras, et, le 1er para et les légendes voir aussi */
text-indent: 30px;
}

.para_dessous_flottant_para3 /* dans pays_p (Cambodge, Indonésie, Jordanie, Laos, Malaisie) :  préciser que le para qui suit une image flottante + un texte ne fera pas partie de cet élément, que l'image flotte à gauche ou à droite */
{
clear:both;
padding-top: 10px; /* Espace entre les légendes et le para qui suit */
padding-bottom: 10px; /* Espace entre la fin du para et la carte du pays */
}

.map_birmanie_v /* dans  pays_birmanie_v */
{
border: 1px solid black;
margin-bottom: 17px;
margin-left: 125px;
}

.map_cambodge_v
{
border: 1px solid black;
margin-bottom: 17px;
margin-left: 55px;
}

.map_france_1_v
{
border: 1px solid black;
margin-bottom: 17px;
margin-left: 70px;
}

.map_france_2_v
{
border: 1px solid black;
margin-bottom: 17px;
margin-left: 45px;
}

.map_france_3_v
{
border: 1px solid black;
margin-bottom: 17px;
margin-left: 135px;
}

.map_inde_v
{
border: 1px solid black;
margin-bottom: 17px;
margin-left: 125px;
}

.map_italie_v
{
border: 1px solid black;
margin-bottom: 17px;
margin-left: 170px;
}

.map_maldives
{
border: 1px solid black;
margin-bottom: 17px;
margin-left: 70px;
}

.banniere_p /* dans page_pays_p et p_recit ... Cartes d'Asia Dive Site */
{
border: 1px solid black;
margin-left: 65px;
}

.sous_banniere_p /* dans page_pays_p et p_recit ... Cartes utilisée avec l'autorisation d'Asia Dive Site */
{
margin-left: 148px;
}

.map_indonesie_p /* dans pays_indonesie_p */
{
border: 1px solid black;
margin-bottom: 7px;
margin-left: 9px;
}

.map_bali_p /* dans  p_recit_bali */
{
border: 1px solid black;
margin-bottom: 17px;
margin-left: 16px;
}

.map_malaisie_v /* dans malaisie_p */
{
border: 1px solid black;
margin-bottom: 7px;
margin-left: 0px;
}

.map_malaisie_p /* dans malaisie_p */
{
border: 1px solid black;
margin-bottom: 17px;
margin-left: 80px;
}

.map_perhentians_p /* dans p_recit_perh */
{
border: 1px solid black;
margin-bottom: 13px;
margin-left: 80px;
}

.map_redang_p /* dans p_recit_perh */
{
border: 1px solid black;
margin-bottom: 13px;
margin-left: 140px;
}

.map_phils_p /* dans  pays_birmanie_v */
{
border: 1px solid black;
margin-bottom: 17px;
margin-left: 135px;
}

.map_singapour_v
{
border: 1px solid black;
margin-bottom: 17px;
margin-left: 130px;
}

.map_thailande_p /* dans thailande_p */
{
border: 1px solid black;
margin-bottom: 13px;
margin-left: 135px;
}

.map_similans_p
{
border: 1px solid black;
margin-left: 25px;
}

.map_koh_lanta_p
{
border: 1px solid black;
margin-bottom: 17px;
margin-left: 150px;
}

.map_koh_tao_p
{
border: 1px solid black;
margin-bottom: 17px;
margin-left: 77px;
}

.texte_recit /* Paragraphes des récits dans les pages p_ et recit_lieu  */
{
margin-bottom: 10px;
}

.photos_agrandies /* p_pa_lieu_# : photos agrandies que l'on atteint par les pages p_gal_lieu  */
{
margin-top: 8px;
margin-bottom: 5px;
border: 2px solid black;
}

.para_sous_pa /* p_pa_lieu_# espace sous photo précédente et suivante */
{
padding-bottom: 5px;
}

.para_sous_photos /* p_pa_lieu_# */
{
padding-bottom: 30px;
}

.para_sur_pa /* texte au-dessus des photos agrandies */
{
padding-bottom: 5px;
}

.haut_de_page_recit /* en bas, vers la droite */
{
text-align: right;
}

.tableau_livraison { /* tableau dans v_recit_japon */
border: 1px solid #a52a2a;
border-collapse: collapse;
margin: auto; /* Centrer tout le tableau */
text-align: center;
color: #a52a2a
}

.tableau_livraison_1 { /* Caption du tableau */
border: 1px solid #a52a2a;
margin-bottom: 20px;
color: white;
background-color: #a52a2a;
}

.tableau_livraison_2 { /* Cellules d'en-tête */
border: 1px solid brown;
border-collapse: collapse;
background-color: #7fffd4 ;
}

.tableau_livraison_3 { /* Cellules normales */
font-weight: bold;
border: 1px solid #a52a2a;
border-collapse: collapse;
}


p {margin-bottom:0}
h1 {text-align: center ; }
h2 {font-size: 18px ; text-align: center ; margin-bottom: 7px ; margin-top: 0px;}
h3 {font-size: 24px ; text-align: center ; margin-bottom: 20px ; margin-top: 0px;}
h4 {font-size: 18px ; border-bottom: 3px solid #dea ; color: orange ; width: 605px ;}
h5 {text-align: center ; font-size: 17px ; }
h6 {font-size: 14px ; margin-bottom: 10px ; margin-top: 0px;}
p {margin: 2px 2px 17px 2px;} /*Hauteur entre les paragraphes de 17 px */
a {color: blue;} /* Tous les liens du site sont en bleus */
a img {border: 2px solid black; margin: auto;} /* Toutes les images contenues dans des liens */
a:hover img {border: 2px solid orange;} /* Toutes les images contenues dans des liens lors du passage de la souris */