/* police FORTE.TTF */
@font-face {
	font-family: "t2t";
	src: url('../include/FORTE.TTF');
}

/* formulaire d'identification */
.bloc1 {
	position:absolute;
	Z-index : 1;
	
	border-radius: 8px;
	border:2px solid black;
	background-color: #ABC;
	width:550px; /* largeur */
	height:49px; /* hauteur */
	left: 526px; /* position � gauche */
	top: 197px; /* position en haut */
}

.bloc2 {
	position:absolute;
	Z-index : 1;
	background-color: #ABC;
	top: 200px; /* position en haut */
	width:500px; /* largeur */
	left: 200px; /* position � gauche */
}

/* annonce publicitaire */
.bloc3 {
	position:absolute;
	Z-index : 1;
	border:2px solid black;
	background-color: #ABC;
	opacity:0.5;
	width:600px; /* largeur */
	height:500px; /* hauteur */
	left: 100px; /* position � gauche */
	top: 100px; /* position en haut */
}

/* bouton fermer */
.bt_ferme {
	position:absolute;
	width:12px;
	height:12px;
	background-color: #FF6666;
	right:0;
	botton:0;
	}	

/* Aide */
.bloc4 {
display: block;
	position:absolute;
	Z-index : 1;
	border-radius: 8px;
	border:2px solid black;
	background-color: #ABC;
	opacity:0.75;
	width:200px; 	/* largeur */
	height:170px; 	/* hauteur */
	right:10px; 	/* position � droite */
	bottom:10px; 	/* position en bas */
	opacity:1; 	/* afficher l'image */
}

.bloc4 {opacity:0;animation:5s hide 1 ;}
@keyframes hide {
0%,99% {opacity:1;}
100% {opacity:0;}
}		 		 



/* bordure des tableaux */
table {
	border-radius: 12px;
}

td {
	background-repeat : no-repeat;
}
/* affiche photo entiere */
a span          {   display: none;}
a:hover span    {   display: inline;
                    position: absolute;
					z-index: 2;
                    background:#FFFFDD;
					visibility: visible;
                }


.gallerycontainer{
position: relative;
/*position photos*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

/* Pointeur de souris sur les balises acronym (pour les infos bulles simple) */
acronym
{
  cursor: help;
}

/* Infos bulle �labor�es 
 <a href="#" class="info">texte<span>info_bulle du texte</span></a>  */

* {
   font-size: 12px; /* on définit les propriétés de texte pour toutes les balises */
   font-family: Tahoma, Verdana, Arial, serif;
}

a.info2 {
  position: relative;  /*  position de l'info bulle*/
   color: black;
   text-decoration: none;
   border-bottom: 1px gray dotted; /* on souligne le texte */
}

a.info2 span {
   display: none; /* on masque l'infobulle */
}

a.info2:hover {
   background: none; /* correction d'un bug IE */
   z-index: 10; /* on définit une valeur pour l'ordre d'affichage */
   cursor: pointer; /* on change le curseur
                    /* autre curseur : auto, default, pointer, text, wait, help, move */
}

a.info2:hover span {
    display: inline; /* on affiche l'infobulle  */
    position: absolute;
    z-index: 20;
  /*  white-space: nowrap;  on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
    top: 1px; /* on positionne notre infobulle */
    left: 15px;
    max-width: 300px;
    background-color: #BBC9E1; /* background: #BBC9E1; */
    color: #65280A;
    padding: 3px;
    border: 1px solid #65280A;
    border-left: 4px solid #65280A;
 }
 
a.info {
  position: relative;  /*  position de l'info bulle*/
   color: black;
   text-decoration: none;
   border-bottom: 1px gray dotted; /* on souligne le texte */
}

a.info span {
   display: none; /* on masque l'infobulle */
}

a.info:hover {
   background: none; /* correction d'un bug IE */
   z-index: 10; /* on définit une valeur pour l'ordre d'affichage */
   cursor: pointer; /* on change le curseur
                    /* autre curseur : auto, default, pointer, text, wait, help, move */
}

a.info:hover span {
   display: inline; /* on affiche l'infobulle  */
   position: absolute;
   z-index: 20;
   white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
   top: 0px; /* on positionne notre infobulle */
   left: -150px; /* 190 */
   width: 150px;
   background-color: #BBC9E1; /* background: #BBC9E1; */
   color: #65280A;
   padding: 3px;
   border: 1px solid #65280A;
   border-left: 4px solid #65280A;
}
border: none; 

/* position cadre image */
.defile{
	position: relative;
	width: 298px;
	height: 430px;
	overflow: hidden;
	background-color: red; /* white; */
	padding: 2px;
	padding-left: 4px;
	left: 2px;
}


/* volet pub */
#volet {
    width: 250px;
    padding: 10px;
    background: #6B9A49; color: #fff;	
    position: relative;
    left: -270px; top: 55px;
    -webkit-transition: all .5s ease-in;
    transition: all .5s ease-in;	
}
#volet a.ouvrir,
#volet a.ouvrir {
    padding: 10px 25px;
    background: #555;
    color: #fff;
    text-decoration: none;
    position: absolute;
    right: -88px;
    top: 150px;

    /* quelques styles CSS3 */
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);

    border-radius: 0 0 8px 8px;
}
#volet a.fermer {
    display: none;
}
#volet_clos:target #volet {
    left: -270px;
}
#volet:target {
    left: 0;
}
#volet:target a.ouvrir {
    display: none;
}
#volet:target a.fermer {
    display: block;
}