@charset "iso-8859-1";
body {
	font: normal Georgia, "Times New Roman", Times, serif;
	background: #000;
	margin: 0;
	padding: 0;
	color: #000;
	background-image: url(FIBD2013/Motif_fond.png);
	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: #E1001A;
	border:thin #E1001A solid;
	font-size: 24px;
}
h1 {
	font-family:Verdana, Geneva, sans-serif;
}
p {
	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; /* à 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: #300;
	text-decoration: underline;
}
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: #600;
	text-decoration: underline;
}

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;	
}
.p_center {text-align:center;}

.p_credits {font-size:small;}

/* Slideshow */
#slideshow{
	background-color:#E1001A;
	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;}