/* initialisation du style general */
 * {
 border: 0;
 font-family: verdana,helvetica,arial,sans-serif;
 font-size: 1em; 
 font-weight: normal; 
 font-style: normal;
 text-decoration: none;
 }

/* parametres de la page*/ 
 body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: #000000;
  background-color: #FFFFFF;
  background-image:url(images/divers/fond.jpg);
 }
 
 /*  style des barres composant l'entete*/
 div#barres{
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 30px;
  background-image:url(images/divers/barres.gif); 
 }
 
 /*  style du logo composant de l'entete*/
  div#logo{
  position:absolute;
  top:18px;
  left:25px;
  width: 200px;
  height: 135px;
 }
 
 /*  style du titre composant l'entete*/ 
 div#titre{
  position:absolute;
  top:45px;
  left:40%;
  width: 400px;
  height: 81px; 
 }
  
/*  style de la barre haute du menu*/  
div#menutop{
 position: absolute;
 height: 30px;
 width: 160px;
 top: 200px;
 left: 20px; 
 background-image:url(images/menu/top.gif);
} 

/* style de la barre intermediare des menus */
div#menu{
 position: absolute;
 top: 230px;
 left: 20px;
 width: 160px;
 height: 300px;
 background-image:url(images/menu/menu.gif);
 }
 
/* style de la barre basse du menu */
div#menubot{
 position: absolute;
 height: 30px;
 width: 160px;
 top: 530px;
 left: 20px;
 background-image:url(images/menu/bot.gif);
}

/* style des liens du menu */

.lien1{
position: absolute;
top: 20px;
left: 10px;
width: 130px;
font-size: 1.5em;
font-weight: bold;
border-top: #717880 1px ridge;
border-left:0px;
border-right: 0px;
border-bottom: #717880 1px ridge;
}

.lien2{
position: absolute;
top: 80px;
left: 10px;
width: 130px;
font-size: 1.5em;
font-weight: bold;
border-top: #717880 1px ridge;
border-left:0px;
border-right: 0px;
border-bottom: #717880 1px ridge;
}

.lien3{
position: absolute;
top: 140px;
left: 10px;
width: 130px;
font-size: 1.5em;
font-weight: bold;
border-top: #717880 1px ridge;
border-left:0px;
border-right: 0px;
border-bottom: #717880 1px ridge;
}

.lien4{
position: absolute;
top: 200px;
left: 10px;
width: 130px;
font-size: 1.5em;
font-weight: bold;
border-top: #717880 1px ridge;
border-left:0px;
border-right: 0px;
border-bottom: #717880 1px ridge;
}

.lien5{
position: absolute;
top: 260px;
left: 10px;
width: 130px;
font-size: 1.5em;
font-weight: bold;
border-top: #717880 1px ridge;
border-left:0px;
border-right: 0px;
border-bottom: #717880 1px ridge;
}

/* style au survol des liens du menu*/
#menu a:hover {
text-decoration:underline;
font-weight:400 ;
font-style: italic;
color: blue;
background-color:inherit;
}

#menu a:link{
color: blue;
background-color:inherit;
}
#menu a:visited {
color: blue;
background-color:inherit;
}

/* style de la partie contenant les donnees propres aux pages*/
div#contenu{
 position:absolute;
 left: 25%;
 top: 180px;
 width: 72%;
 height: 77%;
 overflow: auto;
 color: #000000;
 background-color: #eaeaea;
 background-image: url(images/divers/contenu.jpg);
 border-top:#717880 1px solid;
 border-left:#717880 1px solid;
 border-right: 0px;
 border-bottom: 0px;
 }

/* style permettant de centrer un element*/ 
.centrer {
 text-align : center;
}

/* style du lien sur la page suivante*/ 
.suite {
 text-align : right;
}

/* style permettant de mettre en gras un element*/
.gras {
 font-weight:bold;
}

/*  style des titres principaux*/
.h1{
 font-size: 20px;
 font-weight: bold;
 text-align: center;
 text-decoration: underline;
 color: blue;
 float: none;
 background-image:url(images/divers/contenu.jpg);
}



 /* style des titres secondaires*/
.h2{
 position: relative;
 font-size: 18px;
 left: 5em;
 width:33em;
 text-decoration: underline;
 color: blue;
 font-style: italic;
 float: none;
 padding-left: 35px;
 padding-top: 8px;
 background-image:url(images/divers/fleche.png);
 background-repeat:no-repeat;
 }
 
  /* style des titres secondaires pour cg et cd*/
 .h21{
 position: relative;
 font-size: 18px;
 left: -2em;
 width:15em;
 text-decoration: underline;
 color: blue;
 font-style: italic;
 float: none;
 padding-left: 35px;
 padding-top: 8px;
 background-image:url(images/divers/fleche.png);
 background-repeat:no-repeat;
 }
 
/*styles pour mettre deux div cote à cote dans la partie contenu de la page */ 

/* style de l'image de droite*/
.droite{
 position: relative;
 width: 40%;
 height: 192px;
 margin-left: 12%;
 margin-top: 0em;
 } 
 
/*pour l'addresse dans contacts (idem que droite avec en plus une bordure et un fond) */
.adresse{
 position: relative;
 width: 40%;
 height: 15em;
 margin-left: 12%;
 margin-top: 0em;
 border:blue 2px ridge;
 background-image:url(images/divers/papier.jpg);
 } 
 
/* style de l'image de gauche*/
 .gauche{
 position: relative;
 width: 40%;
 height: 192px;
 margin-left: 58%;
 margin-top: -192px;
 }
 /* conteneur de colonnes*/
 .colonne{
 position: relative;
 }
 
 /*colonne droite */
 .cd{
 top: 5px;
 width: 15em;
 position: absolute;
 margin-left:12%;
 }

/* miniature*/
.mini 
 {
width: 25px;
position: absolute;
left: 10em;
vertical-align: middle; 
 }
 
 
 
 
 /* colonne gauche*/
 .cg{
 top: 5px;
 position:absolute;
 margin-left:58%;
 }

 
 .ss-colonne{
 position:absolute;
 top: 38em;
 width:99%;
 left:5px;
 border-top:#9a9a9a 4px ridge;
 }
 
 @media screen{
  body>div#header{
   position:fixed;
  }
  body>div#left-sidebar{
   position:fixed;
  }
  }