body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #000;
	background-image: url(image/fond.jpg);
	background-size: 100%;
	background-attachment:fixed
}

p.centre {
 text-align :right;
}

p.justifie{
  text-align:justify;
	/*margin-left:1cm;*/
}

div.container {
	padding: 15px; 
}

/*------------ pour le contenu de chaque page dans la partie haute------------*/

div.header {
	background-position: top;
	background-color: none;
	padding-left: 40%;
}



/*------------ pour le contenu de chaque page dans la partie droite------------*/

div.container {
	background-image: url(image/fond3.jpg);
	background-size: 100%;
}


div.content {
	overflow: auto;
	text-align: justify;
}

	/* les titres */

div.content h1 { 
	font-family: "Comic Sans MS", cursive;
	font-size: 45px;
	text-align: right;
	color: whitesmoke;
	background-image: url(image/menu.jpg);
	background-repeat: no-repeat;
	background-position: right;
	background-size: 100%;
	margin-left: 10%;
}

div.content h2 {
	font-family: 'Comic Sans MS', cursive;
	line-height: 1em;
	color: green;
	font-size: 40px;
	text-align: left;
}


div.content h3 {
	font-family: "Comic Sans MS", cursive;
	letter-spacing: 5px;
	padding-left: 0%;
}

div.content h4 {
	font-family: 'Lucida Calligraphy', cursive;
	color: pink;
	background-color: purple;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
	text-align: justify;
}

/* ~~ Sélecteurs d'éléments/balises ~~ */


a img { /* ce sélecteur élimine la bordure bleue par défaut affichée dans certains navigateurs autour d'une image lorsque celle-ci est entourée d'un lien. */
	border: none;
}

/* ~~ La définition du style des liens de votre site doit respecter cet ordre, y compris le groupe de sélecteurs qui créent l'effet de survol. ~~ */
a:link {
	color:#414958;
	text-decoration: underline; /* à moins que vous ne définissiez un style particulièrement exclusif pour vos liens, mieux vaut prévoir un soulignement, qui garantit une identification visuelle rapide. */
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* ce groupe de sélecteurs offrira à un navigateur au clavier la même expérience de survol que celle d'une personne employant la souris. */
	text-decoration: none;
}

/* ~~ ce conteneur entoure toutes les autres divs, en leur attribuant leur largeur sur base d'un pourcentage ~~ */
.container {
	width: 80%;
	max-width: 1260px;/* une valeur « max-width » peut s'avérer utile pour éviter que cette mise en page ne soit trop large sur un moniteur de grande taille. La lisibilité de la longueur de ligne est ainsi améliorée. IE6 ne tient pas compte de cette déclaration. */
	min-width: 780px;/* une valeur « min-width » peut s'avérer utile pour éviter que cette mise en page ne soit trop étroite. La longueur de ligne est ainsi plus lisible dans les colonnes latérales. IE6 ne tient pas compte de cette déclaration. */
	background-color: white;
	margin: 0 auto; /* la valeur automatique sur les côtés, associée à la largeur, permet de centrer la mise en page. Elle n'est pas nécessaire si vous fixez la largeur du conteneur à 100%. */
}



/* ~~ Colonnes pour la mise en page. ~~ */
.sidebar1 {
	margin-top:0px;	
	margin-bottom: 20px;	
	float: left;
	width: 25%;
	background-color: none;
	list-style: text-indent;	   /* sans puce = none */
	padding: 10px;
	font-weight: bold;
	border-radius: 6px;
	overflow: auto;	/* pour avoir un ascenceur quand le contenu est trop long */
}

.sidebar1 h1 {
	font-family: "Calibri";
	font-size: 24px;
	color: orange ;
	text-decoration: underline overline;
	text-align: left;
	word-spacing:2px;
}


.sidebar1 ul, ol, dl { 
	font-size: 20px;
	padding: 0;
	margin: 0;
}


/* modification pour main */
div.main {
	padding-left: 10px;
}

/* modification pour main */
div.main1 {
	padding-left: 10px;
	text-align: center;
}

/* ~~ Styles de liste de navigation (peuvent être supprimés si vous optez pour un menu de survol prédéfini tel que Spry) ~~ */
.sidebar1 ul.nav {
	list-style: none; /* entraîne la suppression du marqueur de liste */
}
.sidebar1 ul.nav li {
	border-bottom: 1px solid yellow; /* crée la séparation des boutons */
}


.sidebar1 ul.nav a, ul.nav a:visited { /* le regroupement de ces sélecteurs garantit que vos liens conservent leur apparence de bouton, même après avoir été activés */
	padding: 5px 5px 5px 15px;
	display: block;
	text-decoration: none;
	color: white;
}


.content {
	width: 70%;
	float: left;
}


/* le menu en liste*/
div.sidebar1 li {
	margin-left:50px;	/* décollée du bord gauche */
	padding-bottom:0.3cm;
	font-weight:normal;
	list-style: none;
}

div.sidebar1 ul a:hover {	/* quand la souris est sur un lien */
	text-decoration:none;
	margin-left:0px;
	list-style: none;
	color: yellow;
	font-weight: bold;
}

/* modification pour les sous-menus */
div.sidebar1 ul ul {
	padding-bottom:0.3cm;
	font-weight:normal;
	list-style: none;
}

/* les liens */
div.sidebar1 li a {		
	text-decoration:none;
	margin-left:0px;
}

div.sidebar1 li a:hover {	/* quand la souris est sur un lien */
	text-decoration:none;
	margin-left:0px;
	list-style: none;
	color: yellow;
	font-weight: bold;
}


#picture {
		float:right;
	}

#photo {
	text-align: center;
             }


/* ~~ Pied de page ~~ */
.footer {
	background-color: none;
	position: relative;
	clear: both;
	text-align : center; 
	padding-left: 20%;
}

.center {
	text-align: center;
}

/* ~~ classes flottant/effacement diverses ~~ */
.fltrt {  /* cette classe peut servir à faire flotter un élément depuis la droite sur votre page. L'élément flottant doit précéder l'élément à côté duquel il doit apparaître sur la page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* cette classe peut servir à faire flotter un élément depuis la gauche sur votre page. L'élément flottant doit précéder l'élément à côté duquel il doit apparaître sur la page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* cette classe peut être placée sur une div <br /> ou vide, en tant qu'élément final suivant la dernière div flottante (dans le #container) si le paramètre #footer est supprimé ou retiré du #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}