body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em Vernada, helvetica, sans-serif ;
	background:#000/*#261f16 /*url(images/fondclair.gif) repeat 200px 200px*/;
	/*background: #fff ;*/
	/*background: #ffe4b5 ;*/
}
div#conteneur
{
	width: 85%;
  margin: 10px auto ;
	text-align: left ;
	border: 1px solid #f16218/*#b22222 */;
	background: #ffffff url(images/bg-body.jpg);
	
}

h1#header
{
	height: 120px ;
    background:#c8b39a ;
	/*background: url(img/br-header.png) repeat-x ;*/
	/*background: url(images/logo100ARAFAn.gif) no-repeat left top ;*/
	margin: 0 ;
	/*background: url(img/br-header.png) repeat-x ;*/
	/*background: url(images/logo100ARAFAn.gif) no-repeat left top ;*/
	/*margin: 0 ;*/
}

h1#header a
{
	width: 100% ;
	height: 100px ;
	background: url(images/oppidum-de-gergovie2.gif) no-repeat center;
	display: block ;
	position: relative;
	left: 0px ;
	top: 0px ;
	text-indent: -5000px ;
}/* On donne les mêmes dimensions au lien, chose possible grâce à 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 */

/* Menu */
.menu1 { /* boite qui contient le menu (les onglets) */
  position:absolute;
  top:96px;
  left:center;
  border-bottom:solid 0px black ; /* crée le trait noir en-dessous des onglets */
  padding-top:0px ; /* marge intérieure haute */
  font:green;
  padding-bottom:1px} /* marge intérieure basse */

.onglet { /* style des onglets inactifs */
  margin:5px 0px 0px 5px ; /* marge extérieure */
  color:#000;
  padding:10px 0px 0px 0px ; /* marge intérieure */
  font-size : 16px ; /* taille de la police des onglets */
  float:left; /* boite en mode float, pour pouvoir en définir la largeur */
  width:100px ; /* largeur de la boite float */
  background : url(onglet1.gif) bottom no-repeat ; /* image de fond de la boite float, calée en bas */
  text-decoration:none ; /* les lien dans les onglets ne sont pas soulignés */
  text-align:center} /* Le texte des onglets est centré */

a.onglet:hover {color:#ff9912} /* lors du survol d'un lien, la police devient verte */

.onglet-actif { /* style de l'onglet de la page active */
  position:relative ; /* l'onglet inactif est mis en position relative */
  color:red;
  background :url(images/onglet5.gif) bottom no-repeat ; 
  top:5px ; /* pour pouvoir baisser l'onglet de 2 pixels */
  border-bottom : solid 0px white} /*on efface le trait inférieur du menu */

.spacer {clear:both} /* force le retour à la ligne après des boites float */

div#contenu
{
	padding: 0 40px 0 40px ;
	/*background: url(images/oppidum-de-gergovie-vertical.gif) no-repeat 15px 15px ;*/
}

div#contenu h1
{
	padding-left: 25px ;
	line-height: 25px ;
	font-size: 2.4em ;
    text-align: center ;
	color: #f16218 ;
}


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

div#contenu h3
{
	margin-left: 15px ;
	padding-left: 3px ;
	border-bottom: 1px solid #f16218 ;
	border-left: 2px solid #f16218 ;
	color: #000 ;
}

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

div#contenu a
{
	color: #f16218 ;
}

div#contenu a:hover
{
	color: #1e90ff;
}

p#footer
{
	margin: 0 ;
	padding-right: 0px ;
	line-height: 30px ;
	text-align: center ;
	color: #f16218 ;
}

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

* html pre
{
	width: 636px ;
}

pre span
{
	color: #560 ;
}

/*pre span.comment */



.ImageDroite {
  float: right;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
}
.Image {
  position: absolute;
}
.ImageGauche {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 20px;
}
.OmbreGrise {
  text-shadow: blue;
  font-size: 36pt;
  color: red;
}
div#notes {
	position: top;
  float:right;
	background-color:WHITESMOKE;
	border:1px solid black;
	padding: 4px;
	margin:0.5em 0.5em 0.5em 0.5em;
}
#navlist {
position:absolute;
  top:96px;
  left:center;
  border-bottom:solid 0px black ; /* crée le trait noir en-dessous des onglets */
  padding-top:0px ; /* marge intérieure haute */
  font:green;
  padding-bottom:1px} /* marge intérieure basse */
  /*background: #c8b39a url(images/base/bg3.gif) repeat-x scroll center bottom;
  position:absolute;
  top:95px;
  left:center;
  width: auto;
  text-transform: none;
  font-style: normal;
  font-weight: inherit;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 100%;
}*/
#navlist ul {
  margin: 10px 0px 10pt;
  padding: 0px 10px;
  list-style-type: none;
  font-family: Arial,Helvetica,sans-serif;
}
#navlist li {
  margin: 0px;
  padding: 0px 0px 0px 9px;
  background: transparent url(images/base/left.gif) no-repeat scroll left top;
  float: left;
}
#navlist a {
  padding: 5px 10px 4px 5px;
  background: transparent url(images/base/right.gif) no-repeat scroll right top;
  display: block;
  font-weight: bold;
  float: left;
  color: #000;
  text-decoration: none;
  font-family: Arial,Helvetica,sans-serif;
}
#navlist a {
  float: none;
}
#navlist a:hover {
  color: #fff;
}
#navlist #current {
  background-image: url(images/base/left_on.gif);
}
#navlist #current a {
  background-image: url(images/base/right_on.gif);
  color: #fff;
}