body
{
   width: 760px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 10px;    /* Idem pour le bas du navigateur */
   font-family: Verdana, "Arial Black", "Times New Roman", Times, serif;
   text-align:justify;
   height: 100%;
 }
 
#en_tete /* # car il s'agit d'un id dans le html */
{
width:760px; /* largeur de l'entête */
height:110px; /* hauteur de l'entête */
background-image:url("en tete.png");
background-position:right;
background-repeat:no-repeat;
}
.cosiris a /*pour accèder depuis les pages à la page accueil */
{
display : block;
	  float:left;
      width : 391px;
      height : 109px;
	  line-height : 109px;
	  color:black;
	  background-image: url("cosiris clic.png");
	  background-repeat:no-repeat;
      text-decoration : none;
 }
 .cosiris a:hover /* Quand on pointe sur un lien du menu */
{
   background-position : 0 -109px;
      color : #1e90ff;
}

#page
{
background-image:url("fond avec picto.png");
background-repeat:no-repeat;
min-height: 100%;

}


.ligne-verte
{
color:green;
width:25%;
margin-top:10px;
margin-bottom:10px;
text-align: center;
}
.retour a /*pour accèder depuis la page moyens à la page accueil */
{
display : block;
	  float : right;
      width : 50px;
      height : 50px;
	  line-height : 50px;
	  color:black;
	  background-image: url("boutons terre.png");
	  background-repeat:no-repeat;
      text-decoration : none;
 }
 .retour a:hover
 {
   background-position : 0 -50px;
      color : #1e90ff;
}
.spacer {
  clear: both;
}


#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 200px; /* Très important : donner une taille au menu */
   margin-top:70px;
}
/* Quelques effets sur les menus */
.element_menu
{
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

.element_menu h3 /* Tous les titres de menus */
{  
	background-image: url("new menu.png");
   color: #007c00;
    background-repeat:no-repeat;
   margin-left: 4px;
   padding-bottom: 8px;
padding-top: 8px;
   font-size: 75%;
   text-transform: uppercase;
   width:100%;
   height:150%;
   text-align: center;   
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style : none;
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   line-height : 38px;
  margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
}
.element_menu li /*tous les éléments (items) de la liste*/
{
margin-left:4px;
margin-top:2px;
margin-bottom:8px;
font-size: 80%;
}
.element_menu li a /* Tous les liens se trouvant dans un menu */
{
display : block;
      width : 188px;
      height : 38px;
	  line-height : 38px;
	  text-indent:32px;
	  color:black;
	  background-image: url("double bouton.png");
      text-decoration : none;
 }
.element_menu li a:hover /* Quand on pointe sur un lien du menu */
{
   background-position : 0 -38px;
      color : #1e90ff;
}
.element_menu a:active /* Quand on clique sur un lien du menu */
{
   color: green;
   background-color: #ffbc3f;
}

.element_menu a:visited /* quand une page a été visitée */
{
color:purple;
}

#corps
{
   margin-left: 200px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   font-size:small;
   margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   width:545px;
}
.plaquette
{
 float: right; /* La plaquette flottera à droitee */
   width: 200px; /* Très important : donner une taille  */
   margin-top:50px;
}
.plaquette a
{
display : block;
      width : 100px;
      height : 66px;
	  padding-top :15px;
	  color:black;
	   text-align:center;
	   background-image: url("plaquette.png");
	   background-repeat:no-repeat;
  text-decoration : none;
}
a img
{
border:none;
}
#corps h1 /* Tous les titres h1 du corps */
{
   text-align: center;
 height:60px;
font-size:large;
font-weight:bold;
color:green;
margin-left:10px;
padding-top: 10px;
font-variant:small-caps;
width: 530px;
background-image:url("new titre.png");
background-repeat:no-repeat;
}
#corps h2
{
color:green;
margin-left:10px;
font-style:italic;
font-size:small;
text-align:justify;
 margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
width: 530px;
}
#corps h4
{
font-size:small;
}

#corps p
{
padding-left:20px;
padding-right:20px;

}
#corps blockquote
{
font-size:1.15em;
margin:100px;
font-style:italic;
color: #017614;
}
#corps ul
{
list-style-type:circle;
list-style-position:outside;

}
.liens-externes a
{
line-height:40px;
}

.liens-internes a /*pour ccèder depuis la page moyens à la page logiciels */
{
display : block;
      width : 188px;
      height : 28px;
	  line-height : 28px;
	  text-indent:32px;
	  color:black;
	  background-image: url("bouton vierge.png");
      text-decoration : none;
 }
 .liens-internes a:hover
 {
   background-position : 0 -28px;
      color : #1e90ff;
}
 .liens-internes a:visited /* quand une page a été visitée */
{
color:purple;
}

 .retour a:visited /* quand une page a été visitée */
{
color:purple;
}

#sidebar
{
margin-top:80px;
margin-left:15px;
float:right;
}

#pied_de_page
{
   text-align: center;
   font-size:small;
   word-spacing:25px;
   width:760px;
   height:25px;
   background-color:#4dff36;
   clear: left;/*Le pied de page descend dans la page jusqu'à ce qu'il trouve une place où aucun élément flotté n'est présent
   au bord gauche de son bloc conteneur*/

}