@import url(font-awesome.min.css);
@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic");

@charset "utf-8";
body {
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	background: #000;
	margin: 0;
	padding: 0;
	color: #000;
	background-image: url(Design/Fond_2016.jpg);
	background-repeat: repeat;
}
/* ~~ S�lecteurs d'�l�ments/balises ~~ */
ol, dl { /* En raison des variations entre les navigateurs, il est conseill� d'attribuer une valeur de z�ro aux marges int�rieures et aux marges des listes.*/
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;	 /* la suppression de la marge sup�rieure r�sout un probl�me o� les marges sortent de leur div conteneur. La marge inf�rieure restante l'�loignera de tout �l�ment qui suit. */
	margin-left: 15px;
	margin-right: 15px;
	padding-right: 15px;
	padding-left: 15px; /* l'ajout de la marge int�rieure aux c�t�s des �l�ments � l'int�rieur des divs, et non aux divs proprement dit, �vite le recours � des calculs de mod�le de bo�te. Une autre m�thode consiste � employer une div imbriqu�e avec marge int�rieure lat�rale. */
	text-align: center;
	text-shadow: #000;
	color: #FFF;
	background: #00bbf2;
	border:thin #00bbf2 solid;
	font-size: 24px;
}
h1 {
	font-family:Verdana, Geneva, sans-serif;
}
p {
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	margin-top: 0;	
	padding-right: 15px;
	padding-left: 15px; 
	text-align:justify;
}
a img { /* ce s�lecteur �limine la bordure bleue par d�faut affich�e dans certains navigateurs autour d'une image lorsque celle-ci est entour�e d'un lien. */
	border: none;
	text-decoration: none;
}
/* ~~ La d�finition du style des liens de votre site doit respecter cet ordre, y compris le groupe de s�lecteurs qui cr�ent l'effet de survol. ~~ */
a:link {
	color: #000;
	text-decoration: underline; 
	text-decoration-style: dotted; /* � moins que vous ne d�finissiez un style particuli�rement exclusif pour vos liens, mieux vaut pr�voir un soulignement, qui garantit une identification visuelle rapide. */
}
a:visited {
	color: #333;
	text-decoration: underline;
	text-decoration-style: dotted;
}
a:hover, a:active, a:focus { /* ce groupe de s�lecteurs offrira � un navigateur au clavier la m�me exp�rience de survol que celle d'une personne employant la souris. */
	color: #666;
	text-decoration: underline;
	text-decoration-style: dotted;
}

a.vignette {
  position:relative;
  text-decoration: none;
}
a:hover.vignette {
  text-decoration: none;
  background: none;
}
a.vignette span {display: none;}

a:hover.vignette span {
  display: inline;
  position:fixed; 
  top: 520px;
  left: 600px;
  z-index: 20;
  width:100%;
  padding:2px 2px;
}

/* ~~ ce conteneur � largeur fixe entoure tous les autres �l�ments ~~ */
.container {
	width: 968px;
	height: auto;
	border:thin #000 solid; 
	background: #FFF;
	margin: 0 auto; /* la valeur automatique sur les c�t�s, associ�e � la largeur, permet de centrer la mise en page */
}

/* ~~ Informations de mise en page. ~~ 

1) La marge int�rieure n'est plac�e qu'en haut et/ou en bas de la div. Les �l�ments � l'int�rieur de cette div poss�deront une marge int�rieure sur les c�t�s. Vous �vitez ainsi de devoir recourir � des ��calculs de mod�le de bo�te��. N'oubliez pas que si vous ajoutez une marge int�rieure lat�rale ou une bordure � la div proprement dite, elle sera ajout�e � la largeur que vous d�finissez pour cr�er la largeur totale. Vous pouvez �galement supprimer la marge int�rieure de l'�l�ment dans la div et placer une seconde div � l'int�rieur, sans largeur et poss�dant une marge int�rieure appropri�e pour votre concept.

*/
.content {
	padding: 10px 0px 0px 0px;
}
.menu {
	float: none;
	padding: 10px 0px 0px 0px;
	width: auto;
	height: auto;
	text-align:center;
}
.haut {
	width: 1024px;
	height: 10px;
}
.bas {
	width: 1024px;
	height: 10px;
}
.gauche {
	float: left;
	padding: 0px 5px 0px 0px;
	width: auto;
	height: auto;
	text-align:center;
}
.droite {
	float: right;
	padding: 0px 0px 5px 0px;
	width: auto;
	height: auto;
	text-align:center;
}
/* ~~ classes flottant/effacement diverses ~~ */
.fltrt {  /* cette classe peut servir � faire flotter un �l�ment depuis la droite sur votre page. L'�l�ment flottant doit pr�c�der l'�l�ment � c�t� duquel il doit appara�tre sur la page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* cette classe peut servir � faire flotter un �l�ment depuis la gauche sur votre page. L'�l�ment flottant doit pr�c�der l'�l�ment � c�t� duquel il doit appara�tre sur la page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* cette classe peut �tre plac�e sur une div <br /> ou vide, en tant qu'�l�ment final suivant la derni�re div flottante (dans le #container) si le param�tre overflow:hidden du .container est supprim� */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.img_c {
	border:none;	
}
.img_c_l {
	border: thin #000 solid;	
}
.img_t {
	border:1px #000 solid;
	Float:Left;
	Margin-Right:5px;	
}
.p_center {text-align:center;}

.p_credits {font-size:small;}

.exposant {
			font-size: 75%;
			vertical-align:top;
			}

/* Slideshow */
#slideshow{
	background-color:#00bbf2;
	border:1px solid #000;
	height:590px;
	margin:0 auto 0;
	position:relative;
	width:920px;
	
/*	-moz-box-shadow:0 0 22px #111;
	-webkit-box-shadow:0 0 22px #111;
	box-shadow:0 0 22px #111; */
}

#slideshow ul{
	height:580px;
	width:900px;
	left:18px;
	list-style:none outside none;
	overflow:hidden;
	position:absolute;
	top:10px;
}

#slideshow li{
	position:absolute;
	display:none;
	z-index:10;
}

#slideshow li:first-child{
	display:block;
	z-index:1000;
}

#slideshow .slideActive{
	z-index:1000;
}

#slideshow canvas{
	display:none;
	position:absolute;
	z-index:100;
}

#slideshow .arrow{
	height:86px;
	width:60px;
	position:absolute;
	background:url('img/arrows.png') no-repeat;
	top:50%;
	margin-top:-43px;
	cursor:pointer;
	z-index:5000;
}

#slideshow .previous{ background-position:left top;left:0;}
#slideshow .previous:hover{ background-position:left bottom;}

#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}