/* titre, nom du pays */
.pays {
  color: #D7DCE8;
  position: absolute;
  left: 2em;
  top: 22px;
  font-size: 48pt;
  font-family: "Segoe Media Center Semibold" ;
}

/* titre, "en liberté" */
.liberte {
  position: absolute;
  left: 11em;
  top: 65px;
  text-align: center;
  font-size: 26pt;
  font-family: "Script MT Bold" ;
}

/* boite du bandeau des zones sélectionnables */
.boite {
  font-size: 14pt;
  font-family: "Georgia" ;
  background-color: #FFFF11;
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
}
.boite:hover {
  font-size: 14pt;
  font-family: "Georgia" ;
  background-color: #FF9900;
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
}

/* boite pour le menu */
.boite2 {
  font-weight: bold;  /*
  background-color: #999900;      */
}


/* boite orange foncé pour le type sur lequel on est, pour le bandeau */
.boitechoix {
  font-size: 14pt;
  font-weight: bold;
  background-color: #ff9900;
  font-family: "Georgia" ;
}

/* boite orange foncé pour le type sur lequel on est, pour le menu */
.boitechoix2 {
  font-weight: bold;
  background-color: #ff9900;
}

/* boite bleutée pour le titre des pages détails (doit être identique à boitetitre ci-dessous!!!!!!!!!!!)*/
.boitetitredetail {
  font-weight: bold;
  background-color: #FF0011;
  color: #000000;
}

/* boite bleutée pour le titre des pages détails (doit être identique à boitetitredetail !!!!!!!!!!!)*/
.boitetitre {
  font-weight: bold;
  background-color: #D7DCE8;
  color: #000000;
}

/* affichage du texte */
.contenu {
  position: absolute;
  top: 245px;
  left: 180px;
  text-align: left;
  color: #FFFFFF;
}

/* affichage du texte pour extension Bangkok*/
.contenu2 {
  position: absolute;
  top: 245px;
  left: 180px;
  text-align: left;
  color: #FFFFFF;
  background-image: url("fond-BKK5.jpg");
}


/* boite colorée pour la cartouche des pour et contre */
.cartouche {
  background-color: #00DCE8;
  font-size: 10pt;
  color: #000000;
}

/* angle arrondi vert (pour le cartouche des "points forts") */
.angle {
  -moz-border-radius: 10px;
  background-color: #22FF66;
  font-size: 10pt;
  color: #000000;
}

/* angle arrondi bleuté ( pour le cartouche des "points forts" ) */
.angle2 {
  -moz-border-radius: 10px;
  background-color: #00DCE8;
  font-size: 10pt;
  color: #000000;
}

/* style dans le cartouche des "points forts"    */
.encart {
  font-size: 14px;
  font-family: "Arial" ;
  color: #000000;
}

/* paragraphe d'en-tête */
.paragraphe {
  font-size: 12pt;
  font-family: "Georgia" ;
}

/* paragraphe essai d'en-tête */
.paragraphe2 {
  font-size: 15pt;
  font-family: "Monotype Corsiva" ;
  color: #FFFFFF;
  text-align: center;
}


/* le bandeau de choix d'activités */
.bandeau3 {
  position: absolute;
  top: 200px;
  left: 145px;
  text-align: left;
}

/* menu du côté */
.menu {
  position: absolute;
  top: 229px;
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
  background-color: #000000;
}

/* style pour le menu du côté */
.lien-menu {
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
  color: #FF4400;
  font-weight: bold;
  font-size: 16px;
}
.lien-menu:hover {
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
  color: #FFFF11;
  font-weight: bold;
  font-size: 16px;
}

/* style pour le menu du côté */
.lien-menu-2 {
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
  color: #FF4400;
  font-size: 15pt;
}
.lien-menu-2:hover {
  text-decoration: none; /* pour ne pas souligner les liens hypertextes */
  color: #FFFF11;
  font-size: 15pt;
}

/* titres dans le menu */
.titre-menu {
  font-weight: bold;
  text-align: center;
  font-size: 12pt;
}

/* !!!!!!!!!!! separateur à côté du menu du côté PERIME!!!!!!!!!!!! */
.separateur {
  position: absolute;
  top: 200px;
  left: 130px;
  background-image: url("fond-menu6.jpg");
  background-repeat: repeat;
}

/* !!!!!!!!!!! separateur à côté du menu du côté PERIME!!!!!!!!!!!! */
.separateur2 {
  position: absolute;
  top: 1630px;
  left: 10px;
  background-image: url("fond-menu5.jpg");
  background-repeat: repeat;
}


/* le bandeau du haut avec le titre */
.bandeau {
  position: absolute;
  top: 0em;
  left: 0em;
  text-align: left;
  width: 100%;
  height: 200px;
  background-image: url("bandeau2.jpg");
}

/* le bandeau de couleur de fond du bandeau des activités */
.bandeau2 {
  position: absolute;
  top: 200px;
  width: 100%;
  height: 29px;
  background-image: url("incoming2.gif");
  background-repeat: repeat;
}

.noircentre {
font-size: 24pt;
color: #000000;
font-weight: bold;
}

.plusclair {
  color: #889900;
  font-size: 12pt; }
  
/* couleur dans la page des renseignements */
.jour {
  font-size: 16pt;
  font-family: "Monotype Corsiva" ;
  color: #FFBBFF;
}

/* couleur verte pour les titres  */
.titre-couleur1 {
  font-size: 18pt;
  color: #22FF66;
}

/* couleur bleue pour les titres  */
.titre-couleur2 {
  font-size: 18pt;
  color: #00DCE8;
}

/* couleur rouge pour les titres */
.titre-couleur3 {
  font-size: 18pt;
  color: #FF0022;
}




/* séparateur entre le bandeau du haut et le reste */
.separateur-haut {
  position: absolute;
  top: 200px;
  left: 0px;
  width: 100%;
  height: 15px;
  background-image: url("Muaythai-presentation-1.jpg");
  background-repeat: repeat;
}

/* séparateur entre le côté du menu et le reste */
.separateur-cote {
  position: absolute;
  top: 215px;
  left: 150px;
  width: 15px;
  height: 1350px;
  background-image: url("Muaythai-presentation-4.jpg");
  background-repeat: repeat;
}

/* séparateur à l'angle du menu en haut */
.separateur-angle-haut {
  position: absolute;
  top: 200px;
  left: 150px;
  width: 15px;
  height: 15px;
  background-image: url("Muaythai-presentation-5.jpg");
}

/* séparateur à l'angle du menu en bas */
.separateur-angle-bas {
  position: absolute;
  top: 1565px;
  left: 150px;
  width: 15px;
  height: 15px;
  background-image: url("Muaythai-presentation-2.jpg");
}

/* séparateur entre le bas du menu et le reste */
.separateur-bas {
  position: absolute;
  top: 1565px;
  left: 0px;
  width: 150px;
  height: 15px;
  background-image: url("Muaythai-presentation-1.jpg");
  background-repeat: repeat;
}

/* indicateur AddThis en bas du menu : doit être plus bas que "separateur-bas" */
.position-AddThis {
  position: absolute;
  top: 1615px;
  left: 0px;
}

/* séparateur entre le bandeau du haut et le reste */
.separateur-haut-gris {
  position: absolute;
  top: 200px;
  left: 0px;
  width: 100%;
  height: 15px;
  background-image: url("Muaythai-presentation-gris-1.jpg");
  background-repeat: repeat;
}

/* séparateur entre le côté du menu et le reste */
.separateur-cote-gris {
  position: absolute;
  top: 215px;
  left: 150px;
  width: 15px;
  height: 1305px;
  background-image: url("Muaythai-presentation-gris-4.jpg");
  background-repeat: repeat;
}

/* séparateur à l'angle du menu en haut */
.separateur-angle-haut-gris {
  position: absolute;
  top: 200px;
  left: 150px;
  width: 15px;
  height: 15px;
  background-image: url("Muaythai-presentation-gris-5.jpg");
}

/* séparateur à l'angle du menu en bas */
.separateur-angle-bas-gris {
  position: absolute;
  top: 1520px;
  left: 150px;
  width: 15px;
  height: 15px;
  background-image: url("Muaythai-presentation-gris-2.jpg");
}

/* séparateur entre le bas du menu et le reste */
.separateur-bas-gris {
  position: absolute;
  top: 1520px;
  left: 0px;
  width: 150px;
  height: 15px;
  background-image: url("Muaythai-presentation-gris-1.jpg");
  background-repeat: repeat;
}

/* fond du menu en noir en haut (en noir si le menu est en noir, voir le style ".menu") */
.separateur-fond-menu {
  position: absolute;
  top: 200px;
  left: 0px;
  width: 150px;
  height: 29px;
  background-color: #000000;
 /* background-image: url("Muaythai-presentation-6.jpg");
  background-repeat: repeat;  */
}

/* fond du menu en jaune en bas */
.separateur-fond-menu-2 {
  position: absolute;
  top: 1548px;
  left: 0px;
  width: 150px;
  height: 17px;
  background-color: #FFFF11;
}



/* introduction */
.intro1 {
  position: absolute;
  top: 197px;
  left: 645px;
  color: #00FF00;
  font-size: 12pt;
  font-family: "Goudy Stout";
}
.intro2 {
  position: absolute;
  top: 97px;
  left: 355px;
  color: #FF0000;
  font-size: 20pt;
}
.intro3 {
  position: absolute;
  top: 146px;
  left: 555px;
  color: #FF00FF;
  font-size: 20pt;
}
.intro4 {
  position: absolute;
  top: 164px;
  left: 195px;
  color: #FFFF00;
  font-size: 14pt;
  font-family: "Script MT Bold";
}
.intro5 {
  position: absolute;
  top: 185px;
  left: 245px;
  color: #FF8800;
}
.intro6 {
  position: absolute;
  top: 17px;
  left: 145px;
  color: #00FFFF;
  font-size: 16pt;
}
.intro7 {
  position: absolute;
  top: 17px;
  left: 409px;
  color: #00FFFF;
  font-size: 36pt;
}
.intro8 {
  position: absolute;
  top: 37px;
  left: 235px;
  color: #FFFF00;
  font-size: 32pt;
}
.intro9 {
  position: absolute;
  top: 67px;
  left: 581px;
  color: #0000FF;
  font-size: 14pt;
  font-family: "Gill Sans Ultra Bold";
}
.intro10 {
  position: absolute;
  top: 95px;
  left: 245px;
  color: #55FF00;
}
.intro11 {
  position: absolute;
  top: 130px;
  left: 328px;
  color: #00FF00;
  font-size: 16pt;
}
.intro12 {
  position: absolute;
  top: 117px;
  left: 145px;
  color: #FF0000;
  font-size: 32pt;
}
.intro13 {
  position: absolute;
  top: 155px;
  left: 425px;
  color: #00FF55;
  font-size: 20pt;
  font-family: "Forte";
}
.intro14 {
  position: absolute;
  top: 169px;
  left: 105px;
  color: #00FF55;
  font-size: 14pt;
}
.intro15 {
  position: absolute;
  top: 199px;
  left: 345px;
  color: #0000FF;
}
.intro16 {
  position: absolute;
  top: 47px;
  left: 99px;
  color: #0000FF;
  font-size: 12pt;
}
.intro17 {
  position: absolute;
  top: 1px;
  left: 225px;
  color: #FFFFFF;
  font-size: 10pt;
  font-family: "Lucida Handwriting";
}
.intro18 {
  position: absolute;
  top: 75px;
  left: 205px;
  color: #FF00FF;
  font-size: 16pt;
}
.intro19 {
  position: absolute;
  top: 84px;
  left: 455px;
  color: #FFFFFF;
  font-size: 12pt;
  font-family: "Bodoni MT Black";
}
.intro20 {
  position: absolute;
  top: 83px;
  left: 125px;
  color: #55FF00;
  font-size: 14pt;
  font-family: "Monotype Corsiva";
}
.intro21 {
  position: absolute;
  top: 194px;
  left: 475px;
  color: #880088;
  font-size: 12pt;
  font-family: "Bodoni MT Black";
}
.intro22 {
  position: absolute;
  top: 110px;
  left: 135px;
  color: #0055FF;
  font-size: 14pt;
  font-family: "Monotype Corsiva";
}



/* Chiang Rai */
.Chiang_Rai {
  position: absolute;
  top: 68px;
  left: 322px;
  background: url(puce09b.gif);}
.Chiang_Rai:hover {
  background: url(puce02b.gif);}

/* Pai */
.Pai {
  position: absolute;
  top: 113px;
  left: 218px;
  background: url(puce09b.gif);}
.Pai:hover {
  background: url(puce02b.gif);}

.Pai-photo {
  position: absolute;
  top: 30px;
  left: 110px;}

/* Tha Ton */
.Tha_Ton {
  position: absolute;
  top: 55px;
  left: 288px;
  background: url(puce09b.gif);}
.Tha_Ton:hover {
  background: url(puce02b.gif);}

/* camp "Jungle" */
.Jungle {
  position: absolute;
  top: 125px;
  left: 292px;
  background: url(puce09b.gif);}
.Jungle:hover {
  background: url(puce02b.gif);}

/* Mae Salong */
.Mae_Salong {
  position: absolute;
  top: 40px;
  left: 311px;
  background: url(puce09b.gif);}
.Mae_Salong:hover {
  background: url(puce02b.gif);}

/* Nan */
.Nan {
  position: absolute;
  top: 175px;
  left: 395px;
  background: url(puce09b.gif);}
.Nan:hover {
  background: url(puce02b.gif);}

.Nan-photo {
  position: absolute;
  top: 165px;
  left: 425px;}

/* Chiang Mai */
.Chiang_Mai {
  position: absolute;
  top: 153px;
  left: 258px;
  background: url(puce09b.gif);}
.Chiang_Mai:hover {
  background: url(puce02b.gif);}

.Chiang_Mai-photo {
  position: absolute;
  top: 23px;
  left: 281px;}

/* Si Chatsanalai */
.Si_Chatsanalai {
  position: absolute;
  top: 267px;
  left: 319px;
  background: url(puce09b.gif);}
.Si_Chatsanalai:hover {
  background: url(puce02b.gif);}

/* Sukhothai */
.Sukhothai {
  position: absolute;
  top: 300px;
  left: 318px;
  background: url(puce09b.gif);}
.Sukhothai:hover {
  background: url(puce02b.gif);}

/* Roi-et */
.Roi-et {
  position: absolute;
  top: 380px;
  left: 620px;
  background: url(puce09b.gif);}
.Roi-et:hover {
  background: url(puce02b.gif);}

/* Surin */
.Surin {
  position: absolute;
  top: 475px;
  left: 610px;
  background: url(puce09b.gif);}
.Surin:hover {
  background: url(puce02b.gif);}

/* Khao Yai */
.Khao_Yai {
  position: absolute;
  top: 496px;
  left: 475px;
  background: url(puce09b.gif);}
.Khao_Yai:hover {
  background: url(puce02b.gif);}

/* Ayutthaya */
.Ayutthaya {
  position: absolute;
  top: 518px;
  left: 381px;
  background: url(puce09b.gif);}
.Ayutthaya:hover {
  background: url(puce02b.gif);}

/* Kanchanaburi */
.Kanchanaburi {
  position: absolute;
  top: 552px;
  left: 298px;
  background: url(puce09b.gif);}
.Kanchanaburi:hover {
  background: url(puce02b.gif);}

/* Bangkok */
.Bangkok {
  position: absolute;
  top: 570px;
  left: 374px;
  background: url(puce09b.gif);}
.Bangkok:hover {
  background: url(puce02b.gif);}

.Bangkok-photo {
  position: absolute;
  top: 597px;
  left: 262px;}

/* Koh Chang */
.Koh_Chang {
  position: absolute;
  top: 709px;
  left: 518px;
  background: url(puce09b.gif);}
.Koh_Chang:hover {
  background: url(puce02b.gif);}

/* Koh Kud */
.Koh_Kud {
  position: absolute;
  top: 742px;
  left: 539px;
  background: url(puce09b.gif);}
.Koh_Kud:hover {
  background: url(puce02b.gif);}

/* Koh Samui */
.Koh_Samui {
  position: absolute;
  top: 915px;
  left: 334px;
  background: url(puce09b.gif);}
.Koh_Samui:hover {
  background: url(puce02b.gif);}

.Koh_Samui-photo {
  position: absolute;
  top: 830px;
  left: 360px;}


.lien1 {
  position: absolute;
  top: 800px;
  left: 400px;
  background: url(sbouton_648.gif);}
.lien1:hover {
  background: url(lucky_luc.gif);}

.lien2 {
  position: absolute;
  top: 800px;
  left: 200px;
  background: url(sbouton_648.gif);}
.lien2:hover {
  background: url(lucky_luc.gif);}
/*--------------------------------------------------------------------------------
Explication de ce code :
.lien1 crée une "class" qui sera attribuée à un lien (1 bouton)
background: url(fond1.gif);} affiche en fond l'image "fond1.gif"
.lien1:hover crée une "class" attribuée à un lien
QUAND LE CURSEUR PASSE SUR LE LIEN
background: url(anime1.gif);} affiche l'image "anime1.gif" quand le curseur est sur le lien

Pour le bouton ci-dessus le lien est :
< a href="votre lien ici" class="lien1" >
< IMG SRC="bl.gif" WIDTH=120 HEIGHT=30 border=0 >< /a >
On retrouve l'attribut "class" avec son nom dans le lien ainsi que l'image "bl.gif" , l'image transparente.
Chaque bouton étant différent , il aura un nom de class différent :
lien1 , lien2 , lien3 , etc....
Notez que vous pouvez mettre n'importe quel nom pour l'attribut "class".
Le code de style sera à répéter autant de fois que de liens (boutons).


On peut réaliser ces boutons animés "rollover"(une image pour une autre) en javascript. Pour un bouton , code à mettre entre les balises <head> et </head>:
Ce code précharge l'image dans le cache du navigateur
il est à noter que ce code peut servir également pour les feuilles de style.
Vous devez inscrire le code javascript AVANT le code style.
<SCRIPT LANGUAGE="JavaScript">
<!--
image1 = new Image();
image1.src = "anime1.gif";
-->
</script>

Le lien correspondant sera placé après la balise <body>
<a href="page1.htm" onmouseover="image1.src='anime1.gif';" onmouseout="image1.src='fond1.gif';"> <img name="image1" src="fond1.gif" border=0></a> */