html, body {
background-image:
url('images/fondmer.jpg')
 
}

@media (max-width: 640px) {
	* {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */

	img {
		height: auto;
	}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	
	/* masquer/afficher les éléments  */

	.u-mobile {          display: block;          display: revert !important; /* affichage des éléments */        }        .u-no-mobile {          display: none !important; /* masquage des éléments */        }
	
	/* Un message personnalisé */

	body:before {
		content: "Version mobile du site";
		display: block;
		text-align: center;
		font-style: italic;
		color: 
#777;
	}
}

#menu {
width:220px;
background-color:#CCCCCC;
float:left;
}

#menubas {
background-color:#CCCCCC;
margin-left:0;
}
#contenu {
margin-left:20px;
font-size : 125%; 
font-family : Verdana, comic, Arial, Helvetica, Geneva, sans-serif; 
color : black; 
background-image:
url('images/arbre.jpg');

}
#contenu2 {
margin-left:20px;
font-size : 125%; 
font-family : Verdana, comic, Arial, Helvetica, Geneva, sans-serif; 
color : black; 
background-image:
url('images/arbre.jpg');
}
p {
font-size : 100%; 
font-family : Verdana, comic, Arial, Helvetica, Geneva, sans-serif; 
color : black; 
margin-left:0;
}

ul, li, td {
font-size : 100%; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
color : blue; 
margin-left:0; 
}

h1 {
font-size : 200%; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif;
color : navy; 
text-align: center;
}

h2 {
font-size : 150%; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
color : blue; 
padding-left:15px;
}
h3 {
font-size : 120%; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
color :#CCFFFF; 
padding-left:15px;
}


a:link {color: green; text-decoration:underline;}
a:visited {color: black; text-decoration:underline;}
a:hover {color:red; text-decoration:none;}

.haut {
text-align:right;

}


a.bouton1:link{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/accueil1.gif');
background-repeat:no-repeat;
padding:5px;
}

a.bouton1:visited{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/accueil3.gif');
background-repeat:no-repeat;
padding:5px;

}

a.bouton1:hover{
border:2px outset silver; 
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/accueil2.gif');
background-repeat:no-repeat;
padding:5px;

}
.bouton1{text-align:center;padding:5px;}

a.bouton2:link{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/famille1.gif');
background-repeat:no-repeat;
padding:5px;
}

a.bouton2:visited{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/famille3.gif');
background-repeat:no-repeat;
padding:5px;
}

a.bouton2:hover{
border:2px outset silver; 
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/famille2.gif');
background-repeat:no-repeat;
padding:5px;
}
.bouton2{text-align:center;padding:5px;}


a.bouton3:link{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/loisirs1.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton3:visited{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/loisirs3.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton3:hover{
border:2px outset silver; 
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/loisirs2.gif');
background-repeat:no-repeat;
padding:5px;}

.bouton3{text-align:center;padding:5px;}

a.bouton4:link{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/serieux1.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton4:visited{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/serieux3.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton4:hover{
border:2px outset silver; 
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/serieux2.gif');
background-repeat:no-repeat;
padding:5px;}

.bouton4{text-align:center;padding:5px;}

a.bouton5:link{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/dtdr1.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton5:visited{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/dtdr3.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton5:hover{
border:2px outset silver; 
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/dtdr2.gif');
background-repeat:no-repeat;
padding:5px;}

.bouton5{text-align:center;padding:5px;}

a.bouton6:link{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/photos1.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton6:visited{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/photos3.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton6:hover{
border:2px outset silver; 
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/photos2.gif');
background-repeat:no-repeat;
padding:5px;}

.bouton6{text-align:center;padding:5px;}

a.bouton7:link{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/qui1.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton7:visited{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/qui3.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton7:hover{
border:2px outset silver; 
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/qui2.gif');
background-repeat:no-repeat;
padding:5px;}

.bouton7{text-align:center;padding:5px;}