<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #dea ;
}

div#conteneur
{
	width:95% ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #ab4 ;
	background: #fff ;
}

h1#header
{
	height: 197px ;
	/*background: url(images/bandeau_haut_gauche.png) no-repeat left top ;*/
	margin: 0 ;
}

h1#header a
{
	width: 700px ;
	height: 197px ;
	display: block ;
	/*background: url(images/bandeau_haut_droit.png) no-repeat ;*/
	position: relative ;
	left: 268px ;
	top: 0px ;
	text-indent: -5000px ;
}/* On donne les mÃªmes dimensions au lien, chose
 possible grÃ¢ce Ã&nbsp; la propriÃ©tÃ© display: block ; qui transforme le lien
  en Ã©lÃ©ment de type block, auquel on peut donner des propriÃ©tÃ©s de taille.
   On met aussi l'image de fond qui a les mÃªmes dimensions que le cadre ainsi crÃ©Ã© */
/* 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 */


ul#menu
{
	height: 35px ;
	margin: 0 ;
	padding: 0 ;
	background: url(images/bg_menu.gif) repeat-x 0 -25px ;
	list-style-type: none ;
}
/* On donne une hauteur au menu, correspondant a
 la taille de l'image utilisÃ©e en fond, on met ensuite l'image de fond
  avec un dÃ©calage de 25 pixels vers le haut pour utiliser la technique de roll over expliquÃ©e dans un autre tutoriel; */
ul#menu li
{
	float: left ;
	text-align: center ;
}/* On rend les li en flottant pour pouvoir les
 afficher horizontalement, on cache les puces, et on centre le texte */

ul#menu li a
{
	width: 130px ;
	line-height: 25px ;
	font-size: 0.9em ;
	font-weight: bold ;
	letter-spacing: 0.9px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
	border-right: 2px solid #dea ;
}/* C'est sur les liens que le gros du travail est
 effectuÃ©, largeur, hauteur de ligne, taille de police, graisse de police,
  espacement des lettres, couleur, bordure et decoration du texte. 
  Nous pouvons dimensionner les a grÃ¢ce Ã&nbsp; la propriÃ©tÃ© display: block ; */

ul#menu li a:hover
{
	background: url(images/bg_menu.gif) repeat-x 0 0 ;
}/* Et pour finir on dÃ©cale l'image de fond au passage
 de la souris pour laisser aparaÃ®tre l'Ã©tat survolÃ© de l'image, 
 voir le tutoriel sur les roll over pour plus de dÃ©tails */

div#contenu
{
	padding: 0 40px 0 200px ;
	background: url(images/ecran_gauche_2.png) no-repeat 0px 0px ;
}

div#contenu h2
{
	padding-left: 25px ;
	line-height: 25px ;
	font-size: 1.4em ;
	background: url(images/little_chien.png) no-repeat left bottom ;
	color: #9b2 ;
	border-bottom: 1px solid #9b2 ;
}

div#contenu h3
{
	margin-left: 15px ;
	padding-left: 5px ;
	border-bottom: 1px solid #9b2 ;
	border-left: 3px solid #9b2 ;
	color: #9b2 ;
}

div#contenu p
{
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}

div#contenu a
{
	color: #8a0 ;
	
}

div#contenu a.brun
{
	color: #996633;
	
}

div#contenu a.brun:hover
{
	color: #CC9900;
	
}


div#contenu a:hover
{
	color: #9b2 ;
}

p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color: #8a0 ;
}

pre
{
	overflow: auto ;
	background: #dea ;
	border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}


pre span
{
	color: #560 ;
}

pre span.comment
{
	color: #b30000 ;
}

.hintwide {
  display:none;
  position: absolute;
  right: 400px;
  width: 200px;
  margin-top: -4px;
  border: 1px solid #c93;
  padding: 10px 12px;
  background-color: #ffc;
}

.hintwide .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(images/pointer.gif) left top no-repeat;
}

.hintsmall {
  display:none;
  position: absolute;
  right: 150px;
  width: 200px;
  margin-top: -4px;
  border: 1px solid #c93;
  padding: 10px 12px;
  background-color: #ffc;
}

.hintsmall .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(images/pointer.gif) left top no-repeat;
}

.hintiewide {
  display:none;
  position: absolute;
  right: 280px;
  width: 200px;
  margin-top: -4px;
  border: 1px solid #c93;
  padding: 10px 12px;
  background-color: #ffc;
}

.hintiewide .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(images/pointer.gif) left top no-repeat;
}

.hintiesmall {
  display:none;
  position: absolute;
  right: 60px;
  width: 200px;
  margin-top: -4px;
  border: 1px solid #c93;
  padding: 10px 12px;
  background-color: #ffc;
}

.hintiesmall .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(images/pointer.gif) left top no-repeat;
}

.zoomlarge {
height:400px;
margin:auto;
}
.zoomlarge p {
text-align:center;
}
.zoomlarge img {
width:433px;
height:290px;
}
.zoomlarge img:hover {
width:541px;
height:362px;
}

.zoomhaut {
height:400px;
margin:auto;
}
.zoomhaut p {
text-align:center;
}
.zoomhaut img {
width:284px;
height:421px;
}
.zoomhaut img:hover {
width:355px;
height:527px;
}

</pre></body></html>