body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 80%;
  background-image: url(images/rocher%201.JPG);
}

h1 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #006;
  text-align: center;
}

ul.barre {
  margin:0;
  padding-left:5px;
  bborder:1px dotted orange;
}

ul.barre li {
  background-color: #eee;
  list-style:none;
  display: inline;
  border-width: 1px;
  border-style: solid;
  border-color: white #999 white white;
  padding: 1px 5px 0px 5px;
}

ul.barre li.actif {
  background-color: #fff;
  border-bottom: 1px solid #fff;
}

ul.barre a {
  text-decoration: none;
  color: #c63;
}

ul.barre a:hover{
  text-decoration: underline;
}

#principal {
  width: 100%;
  HEIGHT: 50%;
  margin:0;
  border-width: 1px;
  border-style: solid;
  border-color: white #999 #999 white;
  background-color: #fff;
}

#sommaire {
  width:20%;
  padding:2px;
  background-image: url(images/recycl.jpg);
  vertical-align: top;
  /*border: 1px dotted red;*/
  font-size: 80%;
  font-weight:bold;
}

/*pour le lien en cours*/
h2 {
 text-decoration: none;
 color:#006600;
 font-size:17px;
}

#sommaire ul {
  margin:0;
  padding:0;
}

#sommaire li {
  margin:10;
  padding:0;
  list-style:none;
}

#sommaire a, #sommaire a:link, #sommaire a:visited {
  text-decoration: none;
  color: #c63;
}

#sommaire a:hover{
  text-decoration: underline;
  color:#006600;
}

#dates {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}

#td01 {
  width: 12%;
  background-color:#9966CC;
  text-align:center;
}

#td02 {
  width: 88%;
  background-color:#A477FF;
}

#td03 {
  background-color:#B997FF;
}

#td04 {
  background-color:#D5BFFF;
  color:#009;
  font-size:13px;
  font-family:Geneva, Arial;
}


<font color="#000099" size="2" face="geneva,arial"><b><font color="#000099" size="2" face="geneva,arial">





#pied {
  text-align: center;
  font-size: 75%;
  font-style: italic;
  background-color:#FFFFFF;
}

.commentaire {
  font-style: italic;
  color: #999;
}

.rouge {
  color: #a00;
}