BODY /*image de fond*/
{
    margin: 0;
    padding: 0;

    background-image:url("images/panaora_clair.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;

}
#sortie
{
    margin: 0;
    padding: 0;
    width:70px;
    height:100px;
    background-image:url("images/sortie.png");
    background-repeat: no-repeat;
    position:absolute;
    top:573px;
    left:3949px;
}


@font-face {
    font-family:'Bodoni Std';
    src: url('BodoniStd.eot');
	src: url('BodoniStd.eot?#iefix') format('embedded-opentype'),
		url('BodoniStd.woff2') format('woff2'),
		url('BodoniStd.woff') format('woff'),
		url('BodoniStd.svg#BodoniStd') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}
::-webkit-scrollbar {
    display: none;
}
#orient{
    position: absolute;
    width: 100px;
    margin: 1em;
}
#Ficello
{
    margin: 0;
    padding: 0;
    width:200px;
    height:287px;
    background-image:url("images/algue_bleu_6.png");
    background-repeat: no-repeat;
    position:absolute;
    top:113px;
    left:3660px;
}

#Ficello:hover
{
    background-image:url("images/algue_jaune_6.png");
}

#Gustave
{
    margin: 0;
    padding: 0;
    width:200px;
    height:131px;
    background-image:url("images/algue_bleu_18.png");
    background-repeat: no-repeat;
    position:absolute;
    top:944px;
    left:1613px;
}

#Gustave:hover
{
    background-image:url("images/algue_jaune_18.png");
}

#Bacon
{
    margin: 0;
    padding: 0;
    width:165px;
    height:324px;
    background-image:url("images/algue_bleu_7.png");
    background-repeat: no-repeat;
    position:absolute;
    top:600px;
    left:2800px;
}

#Bacon:hover
{
    background-image:url("images/algue_jaune_7.png");
}

#Goudurix
{
    margin: 0;
    padding: 0;
    width:200px;
    height:126px;
    background-image:url("images/algue_bleu_8.png");
    background-repeat: no-repeat;
    position:absolute;
    top:686px;
    left:2200px;
}

#Goudurix:hover
{
    background-image:url("images/algue_jaune_8.png");
}

#Eudes
{
    margin: 0;
    padding: 0;
    width:125px;
    height:200px;
    background-image:url("images/algue_bleu_16.png");
    background-repeat: no-repeat;
    position:absolute;
    top:848px;
    left:3749px;
}

#Eudes:hover
{
    background-image:url("images/algue_jaune_16.png");
}

#Chupa_Choops
{
    margin: 0;
    padding: 0;
    width:200px;
    height:269px;
    background-image:url("images/algue_bleu_10.png");
    background-repeat: no-repeat;
    position:absolute;
    top:742px;
    left:502px;
}

#Chupa_Choops:hover
{
    background-image:url("images/algue_jaune_10.png");
}

#Halfpipe
{
    margin: 0;
    padding: 0;
    width:200px;
    height:133px;
    background-image:url("images/algue_bleu_1.png");
    background-repeat: no-repeat;
    position:absolute;
    top:300px;
    left:550px;
}

#Halfpipe:hover
{
    background-image:url("images/algue_jaune_1.png");
}


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: white ;
  color: black ;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 105%;
  left: 5%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  font-family:'Bodoni Std';
  padding:1em;
}