/* CSS Document */


body
{
	margin: 10px 4px ;/* On définit les marges haute et basse à 10px et les marges droite et gauche à 0 */
	padding: 0 ;/*  padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body */
	text-align: center ;/* On utilise text-align: center ; pour Internet Explorer, c'est la seule façon de centrer les éléments 
de type block avec ce navigateur */
	font: 0.9em  Verdana, Arial, Tahoma, Helvetica, sans-serif;/* une police de caractère et une couleur de fond pour l'ensemble*/
	line-height:1.2em;
	color:white; /*couleur notée en anglais*/
	background-color: black;
	background-image:url(image_fond.gif);
}
/* les "styles" sont utilisés dans la page htm, dans la partie propriété > style - On peut leur donner leurs propriétés directement dans la page CSS */
.Style2 {
color:#C0C0C0;
font-weight: bold;
font-variant:small-caps;
}
.Style3 {
color:#949494;
font-weight: bold;
font-variant:small-caps;
}


.Style7 {	
color: #236BAB;
	font-weight: bold;
}

ul#menuhaut{
margin:12px;
width:780px;
padding: 5px;/*positionnement du  menu et du conteneur qui lui est lié  par rapport au sommet*/
font:bold 0.9em "Trebuchet MS", Arial, sans-serif;
font-variant: small-caps;
list-style-type:none;
}
#menuhaut li{
float:left;
}
#menuhaut a{
display: block;
color:#236BAB;
margin: 0 20px;/*écartement des titres du menu du haut les uns par rapport aux autres*/
text-decoration:none;/*le lien n'est pas souligné*/
text-align: center;
}
#menuhaut a:hover{
	color: grey;
	}
div#conteneur
{
	width: 770px ;/* On définit la largeur de la division qui contient l'ensemble de la page, ici  770 pixels */
	margin: 0 auto ;/* margin: 0 auto ; est la méthode correcte pour centrer les éléments de type block (comme les divisions)La division est centrée*/
	text-align: left ;/* établir l'alignement à gauche  */
	border: 1px solid #E9CF47 ;/* Une bordure autour de l'ensemble de la page, */
	background:black;/*  une couleur pour le fond de celle-ci */
	background-image:url(image_fond.gif);
	}




div#contenu
{
	padding: 0 50px 0 50px ;/*  un espace à gauche et à droite du contenu */
	background:  url(../images/fond_texte.png) 0px 0px ;
	background-color:grey;
	 /* background:  url(contenu.png) 15px 15px ; */
}


 
 div#contenu h1 {
	
	margin-left: 15px ;
	padding-left: 15px ;
	font-size: 1.4em ;
	border-bottom: 1px solid #D1FF48 ;
	border-left: 2px solid #D1FF48 ;
	color:#3D4F74;
	}
 div#contenu h2
{
	padding-left: 25px ;  /* on décale le texte par rapportàla marge gauche*/
	line-height: 25px ;/* épaisseur de la ligne*/
	font-size: 1.4em ;
	background:  url() no-repeat left bottom ;/* une image de fond pour le titre si besoin*/
    color:#546CA0;/* couleur du texte, s'il est différent de celle donnée plus haut dans la partie body */
	border-bottom: 1px solid #546CA0; /*  bordure basse "border-bottom"*/
	/* On peut également  régler la longeur du titre par " width " */
}

  div#contenu h3 /* De même que pour le titre h2 à quelques variantes près  */
{
	margin-left: 15px ;
	padding-left: 23px ;
	border-bottom: 1px solid #E9CF47 ;
	border-left: 1px solid #E9CF47 ;
	color:#E9CF47;
	font-variant:small-caps;
	}
 div#contenu h5
{
text-align:left;   
    margin-left: 35px ;
	padding-left: 9px ;
	border-left: 1px solid #E9CF47 ;
	color:#546CA0;
	}


div#contenu p
{
	text-align: justify;/* alignement droite et gauche justifié */
	line-height : 1.2em; /* hauteur de ligne supérieure à la normale pour aérer le texte */
	color:#C0C0C0;
	
}


div#contenu a /* On met en forme les liens contenu dans la page */
{
	color:#949494 ;
	text-decoration: none;
}

div#contenu a:hover
{
	color: #212F4E;
	background-color:#C0C0C0;/* couleur qui apparaît au survol de la souris dans Firefox */

}
	
h1#header
{

height: 130px;	/* On définit la hauteur de la partie header, contenant le titre du site */
background-color:black;
background-image:url();/* Une image positionné à droite, ici c'est une lettre - voir les feuilles de style spécifique 
Compresser les images  entre 30 et 40 ko*/
background-repeat: no-repeat; 
background-position: right;

}


h1#header a
{
/*l'adresse du lien est à préciser dans la page htm  à cet endroit:
</head>	
	<body>	
	<div id="conteneur">		
				<h1 id="header"><a href="a_improbable.htm" title="l'Improbable"></a></h1>*/
	width: 140px ;
	height: 114px ;
	display: block ;	
	background-image:url(../images/ent1.jpg);/*faire coïncider à peu près la taille de l'image et celle de la zone réactive*/
    background-repeat: no-repeat;
	position: relative ;
	left:-75px ;/*situer l'image réactive -ici elle déborde de moitié sur la gauche*/
	top: 8px ;
	text-indent: -5000px ;/* Le text-indent négatif est fait pour pouvoir ne  cacher le texte hors de la page, ce que nous voulons. Ainsi il reste
  exploitable pour les syntèses vocales */
}
		h1#header a span
		{
			display: none ;
		}
/* pour donner  les mêmes dimensions aux liens, et transformer les liens en élements de type block on utilise la  propriété ---display: block ;----
Onpeut donner à cahque block des propriétés de taille.
   On peut mettre  aussi une image de fond qui aura les mêmes dimensions que le cadre ainsi créé */

  
ul#menu
{
height: 40px ;
margin: 0 ;
padding: 0 ;
background-color: black;
list-style-type: none;
font-variant:small-caps;

}
/* On donne une hauteur au menu, 
 SI BESOIN la taille de l'image utilisée en fond, on met ensuite l'image de fond*/
 
ul#menu li
{
	float:left ;/* On rend les "li"  flottant pour pouvoir les  afficher horizontalement, on cache les puces*/
	text-align: center; /*aligner le texte au centre*/
			
}

ul#menu li a
{
	width: 28px;
	line-height: 35px;
	font-size: 1.4em;
	letter-spacing: 1.5px;
	font-weight:bold;
	color: #DFB300;
	display: block;
	text-decoration: none;
}
ul#menu li a:hover
{
	
	color: grey
	}
/*si besoin */
pre
{
	overflow:  auto;
	background: #dea;
	border: 2px solid #9b2;
	padding: 5px 0 0 5px;
	font-size: 1.2em;
}
/*une couleur de fond, une bordure, la taille de police  et un léger espace entre le texte et les bords du pre */

pre span
{
	color: #560 ;
}
/* Couleur de texte des éléments compris dans des span  eux mêmes compris dans un pre */

pre span.comment /* Couleur différente pour les span.comment, les span  utilisés pour les commnetaires*/
{
	color: #b30000 ;
}

/* Mise en forme de la partie pied de page  */
p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	text-align: right ;
	color:white;
	font: 0.8em Verdana, Helvetica, sans-serif;
	}
	p#footer a
{
	color:#546CA0;
	text-decoration: none ;
		}
p#footer a:hover
{
	color:grey;
				}