body
{
text-align: center;
max-width: 100%;
}


h1,h2,h3
{
font-family: Comic Sans MS; Comic Sans MS Bold; "Times New Roman", Times, "Liberation Serif", FreeSerif, serif; 
font-weight: bold;  /* police de caractère */
color: green;
}



#presentation1
{
font-family: Comic Sans MS; Comic Sans MS Bold; "Times New Roman", Times, "Liberation Serif", FreeSerif, serif; /* police de caractère */
color: green;
}


/* liens visités doivent rester en bleu */
a:link
{
color : blue;
text-decoration: none;
}
a:visited 
{
color : blue;
text-decoration: none;
}

/* pas de bordure autour de l'image */
a img {
  border: none;
}

#menu-accueil li, #menu-accueil ul, #menu-matieres li, #menu-matieres ul 
{
    display: block;
    padding: 0;
    margin: 10;
    line-height: 50px;
	}
#menu-accueil li a
{
    padding: 8px 8px;
    font-size: 1.1em;
	background-color: #E6E6FA;
	  border-style : double; 
	}

#menu-matieres li a
{
    padding: 8px 8px;
    font-size: 1.1em;
	background-color: #EDF7F2;
	  border-style : double;
}	
	
#menu-accueil .concours li a
{
    font-size: 1.0em;
}
	
	#menu-matieres, #menu-matieres li 
{
display: inline;
	list-style-type: none; /* pour ie */
}

.important
{
color: orange; 
}

.class-ecran
{
font-style : italic;
color: green; 
}



.conteneur { /* boite qui entoure les 3 colonnes */
  margin:0 ; padding:0} /* marges intérieures et extérieures à 0 */


#gauche
{ /* boite gauche  */
   position: absolute; /* positionné par rapport à la boite parent (ici .container) */
   left: 3%; /* démarre à 10 % de la gauche de la boite parent */
   text-align: center;
   width: 30%; /* largeur de la boite */
} /* encadrement 0px de la boite */		
	
#mascotte
{ /* boite qui "pousse" vers le bas le reste de la page */
   margin: 0 30% 0 30%; /* marges gauche et droite, pour la place des 2 autres colonnes */
  padding: 0px;} /* marge intérieure - indispensable ???? */




#information { /* boite droite (avec le commentaire) */
  position: absolute; /* positionné par rapport à la boite parent (ici .container) */
  right: 3%; /* démarre à 10 % de la droite de la boite parent */
  width: 30%; ; /* largeur de la boite */
} /* encadrement 0px de la boite */		
	
	
	
@media only screen and (min-width:651px)
/* Presentation du menu - debut, pour les grands écrans */
/* Presentation en tableau */

{
#box1 { /* boite gauche  */
   position: absolute; /* positionné par rapport à la boite parent (ici .container) */
   left: 1%; /* démarre à 10 % de la gauche de la boite parent */
   text-align: center;
   width: 32%; /* largeur de la boite */
} /* encadrement 0px de la boite */


#box2 { /* boite qui "pousse" vers le bas le reste de la page */
   margin: 0 30% 0 30%; /* marges gauche et droite, pour la place des 2 autres colonnes */
  padding: 0px;} /* marge intérieure - indispensable ???? */


#box3 { /* boite droite (avec le commentaire) */
  position: absolute; /* positionné par rapport à la boite parent (ici .container) */
  right: 1%; /* démarre à 10 % de la droite de la boite parent */
  width: 32%; ; /* largeur de la boite */
} /* encadrement 0px de la boite */


#menu-matieres, #menu-matieres li 
{
display: inline;
	list-style-type: none; /* pour ie */
}



}





@media only screen and (max-device-width:650px), only screen and (max-width:650px), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5)

    /* pour les petits écrans */ 


{

body
{
max-width:400px;
}



h2
{
font-size: 80%;
}

#information 
{
font-size: 40%;
}

#presentation1
{
font-size: 80%;
}

#menu-accueil li, #menu-accueil ul {
    display: block;
    padding: 0;
    margin: 10;
    line-height: 70px;
	}
#menu-accueil li a {

    padding: 8px 8px;
	    font-size: 1.3em;

	}

#menu-accueil .concours li a
{
    font-size: 1.0em;
}	
	

#menu-accueil	.couleur-operations  li a 
	{
    background-color: #FFFF00;	
	}
	
#menu-accueil	.couleur-numeration  li a 
		{
    background-color: #FFA500;	
	}
	
#menu-accueil	.couleur-probleme  li a 
		{
    background-color: #FF7F50;	
	}	
	
#menu-accueil	.couleur-mesures  li a 
		{
    background-color: #DAA520;	
	}	


#menu-accueil li a:active {
    background-color: #666;
    color: #fff;
}




#menu-accueil, #menu-accueil ul, #menu-accueil li /* voir si les menu box1 sont indispensables */
{
-webkit-box-orient: vertical;
display: -webkit-box;
 
-moz-box-orient: vertical;
display: -moz-box;
 
box-orient: vertical;
display: box;


	}

	

#menu-accueil  li
{
    display: block;
}
	
	
	
#box1 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;

}

 
#box2 {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}

#box3 {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;
}


#menu-matieres, #menu-matieres li 
{
	display: block;
    margin: 200;
	font-size: 1.2em;
	line-height: 70px;
		list-style-type: none; /* pour ie */
}

#presentation-tableau
{
    font-size: 0.5em;
}


}