/********************************************************************************/
/* Général (haut de page de tous les écrans)	et fond d'écran */
/********************************************************************************/

body {	/* Définit une image de fond utilisable pour tous les écrans */
    background:url('images/Hieronymus_Bosch.jpg');
    background-size:cover;
    margin:0;
    font-family: "Tahoma", Times, "Liberation Serif", FreeSerif, serif;
}

.heads
{
    color: red;
    font-weight:bold;
}
p
{
    color: white; text-shadow: black 0.1em 0.1em 0.2em;
    font-size: 18px;
}
.pp	/* comme <p> mais en plus petit */
{
    color: black;
    font-size: 21px;
    font-weight:bold;
    font-style:italic;
}
.pq
{
    color: white; text-shadow: black 0.1em 0.1em 0.2em;
    font-size: 21px;
}
q
{
    color: white; text-shadow: black 0.1em 0.1em 0.2em;
    font-size: 21px;
}

h1,em
{
    color: black;
    font-weight:bold;
}
strong
{
	color: coral; text-shadow: black 0.1em 0.1em 0.2em;
	font-weight:bold;
	font-style:italic;
	font-size: 24px;

}
.strong
{
	color: coral; text-shadow: black 0.1em 0.1em 0.2em;
	font-weight:bold;
	font-style:italic;
	font-size: 56px;

}

/********************************************************************************/
/* Pour les commandes accessibles par touches en bloc horizontal dans le header */
/********************************************************************************/
ul {
	padding: 0; margin: 0;
	text-align: center; /* centrer le texte */
	width : auto;
	display : block;
	margin : auto;
  }
li {
 /*margin-left:2px;*/
 	display: inline;
 	list-style: none;/*
 float:left; /*pour IE*/
 }
ul li a {
	display:inline-block;	/* Pour afficher les boutons en ligne et centrés */
	margin: 0;	/* Pas de séparation entre les items avec 'auto', sinon mettre 0 30px (par exemple) */
	float:left;   
	width:19%;
	height: 38px;
	background-color:#6495ED;
	color:black;
	font-weight: bold;
	font: 28px "impact",serif ;
	font-family: Impact, "Arial Black", sans-serif;
  	font-size : 28px;
/*	text-decoration: underline overline #FF3028;*/
	line-height: 32px ;
	text-align:center;
	padding:5px;
	border:2px solid;
	/*pour avoir un effet "relief" avec IE :*/
	border-color:#DCDCDC #696969 #696969 #DCDCDC;
 }
ul li a:hover {
 background-color:#D3D3D3;
 border-color:#696969 #DCDCDC #DCDCDC #696969;
 } 
/********************************************************************************/
/* Pour les commandes accessibles par touches en bloc vertical */
/********************************************************************************/
 #menu {
 	vertical-align: top;
 	width: 200px;
  	list-style: none;
  	margin: 0;
  	padding: 0;
}

#menu li {
  background: #c00 ;
  color: #fff ;
  margin-bottom: 1px ;
}

#menu li a {
  display: block ;
  background: #c00 ;
  color: #fff ;
  font: 17px "Trebuchet MS",Arial,sans-serif ;
  font-family: Arial;
  line-height: 32px ;
  text-align: center ;
  text-decoration:  underline overline navy ;
  padding: 4px 0 ;
}

#menu li a:hover, #navigation li a:focus, #navigation li a:active {
  background: #900 ;
  text-decoration: underline overline navy  ;
}

.signature {	/* Pour positionner la signature en bas à droite d'un écran */
	color:white;
    position:fixed;
    bottom:10px;
    right:10px;
}

.container {	/* Prépare des blocs en colonnes */
	width: 100%;
}
.container div {
	display: inline-block;
	vertical-align: top;		/* Pour aligner sur le haut de la colonne autre option : middle */
	width: 19%;	/* Car j'utilise ici 5 blocs en colonne au maximum (5*19% < 100%) */
}

.gras {
	color:blue;
	font-weight:italic;
}

.imag {
    width: 800px;
    height: 600px;
}

/* CSS */
/* #image-index {
 width: 300px;
 height: 300px;
 background: #64ACD1;
 margin-right: auto;
 margin-left: auto;
 border: 0px solid #CCC;
}*/

@keyframes AutoSlide {
	0%, 15%, 100% {
		left: 0px; /*1ère image*/
	}
	35%, 70% {
		left: -800px; /*2ème image*/
	}
	70%, 85% {
		left: -1600px; /*3ème image*/	
	}
}

#slideshow {/* Taille de la fenêtre d'affichage des diapos */
	position: relative;
	width: 30%;	/* !!!!! ATTENTION LES IMAGES DES DIAPOS DOIVENT FAIRE 800px DE LARGE ET 600 DE HAUT */
	height: auto;
	margin:  40px auto;	/* Positionne la diapo dans l'écran */
	overflow: hidden;
}
#sContent li {
	display: inline;
}
#sContent { /* Puis les styles concernant l'élément qui défile dans son conteneur */
	position: absolute;
	top: 0;
	left: 0;
	width: 2400px;	/* SOIT 3 FOIS LA LARGEUR DES DIAPOS */
	height: 600px;
	margin: 0;            
	padding: 0;
	
	/*CSS3 keyframes animation*/
	animation-name: AutoSlide;
	animation-duration: 15s;	/* Durée totale d'affichage des 'n' photos (n=3 ici) */
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}