/***************** CSS RESEAU-MLM ******************/

/* Je te joins ici un lien vers un site donnant les possibilité CSS valides : http://www.w3schools.com/ en anglais. */
*{  margin:0;
	padding:0;
	outline:none;
	border:0;
}

body{   margin:0;
		padding:0;
		color:#000;
		font: small/150% Arial, Helvetica, sans-serif;
		text-align:center;
		background:#eeefe7;
	}

/* L'ENTETE DU SITE AVEC LE LOGO ET LE MENU ( Accueil newsletter etc...*/
#header { background:#DDD url(images/bghead.jpg) repeat-x left top; height:122px;}
#header .content{margin: 0 auto; width:1010px; padding:15px 0 0 0; text-align:left; background:transparent url(images/bghead_content.jpg) no-repeat left top; height:107px;}
/* le menu */
#header #menu{float:left; font-size:1.3em; text-align:center; padding:30px 0 0 151px;}
#header #menu .enligne li{display:inline;}
#header #menu #acc a{width:69px; height:30px;background:url(images/btn_accueil.jpg) no-repeat left top; display:block; float:left;}
#header #menu #acc a:hover{background:url(images/btn_acceuil_over.jpg) no-repeat left top;}
#header #menu #con a{width:131px; height:30px;background:url(images/btn_contact.jpg) no-repeat left top; display:block; float:left;}
#header #menu #con a:hover{background:url(images/btn_contact_over.jpg) no-repeat left top;}
#header #menu #new a{width:104px; height:30px;background:url(images/btn_newsletter.jpg) no-repeat left top; display:block; float:left;}
#header #menu #new a:hover{background:url(images/btn_newsletter_over.jpg) no-repeat left top;}
#header #menu #pla a{width:107px; height:30px;background:url(images/btn_plan_site.jpg) no-repeat left top; display:block; float:left;}
#header #menu #pla a:hover{background:url(images/btn_plan_site_over.jpg) no-repeat left top;}
#header #menu #par a{width:145px; height:30px;background:url(images/btn_partenaires.jpg) no-repeat left top; display:block; float:left;}
#header #menu #par a:hover{background:url(images/btn_partenaires_over.jpg) no-repeat left top;}

/* le logo */
#header #logo{float:left; padding:0 0 0 25px; heigh:73px;}
#header #logo a{width:277px; display:block;}

/* L'ASPECT GENERAL DU SITE */
#main {}
#main .content{margin: 0 auto; width:1010px; text-align:left; background:#eeefe7;}

/* LOGOS BANNIERE BAS DE PAGES */
#logos{ padding:20px; border:1px solid #222; border-width:1px 0 0 0; margin:20px 0 0 0; }
#logos p{float:left; padding:0 10px 0 10px;}
/* LE MENU DE GAUCHE APPELé SIDEBAR (barre de coté) */
#sidebar {float:left; width:317px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
#sidebar .content{ width:265px; background:#DDD url(images/bgsidebar.jpg) repeat-y left top; padding:0 20px 0 32px;}
/* Les bannieres */
#sidebar #bannieres p{margin:30px 0 0 0; text-align:center;}

#sidebar h3{font-size:1.2em; color:#369;}

#sidebar a{color:#333; text-decoration:none; display:block;} /* Lien */
#sidebar a:hover{color:#F90} /* Couleur du lien au passage de la souris (rollover) */

#sidebar .navi{ list-style:none;}

#sidebar #navigation ul{margin:0 0 15px 0;}
#sidebar li{padding:3px 0 3px 10px; background:url(images/libar.jpg) no-repeat left bottom; display:block;}
#sidebar #navigation h3{ background:url(images/libar.jpg) no-repeat left bottom; padding:0 0 7px 0;}

/* AFFICHE LES FLECHES BLEUES ET ORANGE DES LIENS */
#sidebar .pucefleche a{padding:0 0 0 15px; background:url(images/flechebleue.jpg) no-repeat left 50%;}
#sidebar .pucefleche a:hover{padding:0 0 0 15px; background:url(images/flecheorange.jpg) no-repeat left 50%;}

/* BLOC POUR FINIR LE MENU DE GAUCHE */
#sidebar #finsidebar{height:50px; width:317px; background:url(images/bgsidebarfin.jpg) no-repeat left 50%; }

/* CONTENU AFFICHE LES PAGES DU SITE */
#contenu{float:left; padding:20px 0 20px 0; width:675px; font-size:1em;}/* On défini ici la taille du bloc 683px le corp de la police 1.05em et le retrait du contenu dans le bloc */
#contenu a{font-weight:bold; }
#contenu a:hover{ color:#FF0000; }

#footer { background:url(images/bgfooter.jpg) repeat-x left top; }
#footer .content{margin: 0 auto; width:1009px; background:url(images/bgfooter_content.jpg) no-repeat left top; height:83px; }

#footer #menubas{ padding:30px 20px 0 0; text-align:right; font-size:1em; font-weight:bold;}
#footer #menubas a{color:#FFF; text-decoration:none; margin:0 10px 0 5px;}
#footer #menubas a:hover{color:#F90;}

.clear{clear:both;}
.inv{display:none;}

/* DIVERS */
.h4plan{padding:15px 0 5px 20px;}
.plan{ padding:0 0 0 10px;}
.plan ul{ list-style-type:none;}
.plan li{padding:0 0 0 100px; background:url(images/flechebleue.jpg) no-repeat 80px 50%; list-style:none;}

.formulairecontact{ border:1px solid #CCC; padding:20px; background:#D2D2D2; margin:0 50px 0 50px;}
.newsletterform label{width:120px; display:block; float:left; text-align:right; padding:4px 10px 4px 0;}
.newsletterform input{ width:250px; float:left; border:1px solid #CCC; padding:4px;}
.newsletterform .button{ width:100px; float:left; border:1px solid #CCC; padding:4px; margin:0 10px 0 10px;}
.newsletterform textarea{ width:250px; height:100px; float:left; border:1px solid #CCC; padding:4px; margin:0 0 10px 0;}
.newsletterform p{ padding:20px; margin:10px;}
/* MISE EN PAGES */

h1{font-size:2.2em;}
h2{font-size:2.2em;}
h3{font-size:1.8em;}
h4{font-size:1.2em; margin:20px 0 5px 0;}
h5{font-size:1em;}
.blocjaune h4{font-size:1.2em; margin:0px 0 5px 0;}
.blocvert h4{font-size:1.2em; margin:0px 0 5px 0;}
.ampoule h4{font-size:1.2em; margin:0px 0 5px 0;}
.jaune h4{font-size:1.2em; margin:0px 0 5px 0;}

.textecentre{text-align:center;}
.chapeau{text-align:justify; font-size:1.2em; font-weight:bold; line-height:170%; border:1px solid #000; border-width:1px 0 1px 0; margin:20px 0 20px 0; padding:10px 0 10px 0;}
.chapeauitalic{text-align:justify; font-size:1.1em; font-weight:bold; line-height:160%; font-style:italic;}
.bolditalic{font-style:italic; font-weight:bold;}

.texte{line-height:160%;}
.texte p{margin:0 0 20px 0; text-align:justify;}

.texte2{line-height:170%; font-size:1.1em;}
.texte2 p{margin:0 0 20px 0; text-align:justify;}

.retrait50px{padding-left:50px;}

.colonnegauche{float:left; width:320px; margin:0 15px 0 0; text-align:justify;}
.colonnedroite{float:left; width:325px; text-align:justify;}
.colgauche{float:left; width:280px; margin:0 20px 0 0; text-align:justify;}
.coldroite{float:left; width:280px; text-align:justify;}
.coldroite p{margin:0; padding:0; line-height:150%;}
.colgauche p{margin:0; padding:0; line-height:150%;}

.perso{padding:0 0 0 20px; background:url(images/person.gif) no-repeat left 50%; } /* Affiche le personnage bleu en debut de texte */
.bull{padding:0 0 0 10px; background:url(images/circle03_skyblue.gif) no-repeat left 50%;}
.consigne{ font-weight:bold; margin:10px 0 5px 0;}
.designationbleue{font-size:1.2em; font-weight:bold; color:#369;}
.designationbleue2{font-size:1.1em; font-weight:bold; color:#369;}
.triangle{padding:0 0 0 10px; background:url(images/red00_next.gif) no-repeat left 50%;}

.orange{color:#F90;}
.vert{color:#3C0;}
.bleu{color:#369;}
.rouge{ color:#F00;}

.imgdroite{float:right; padding:10px;} /* Met à droite l'image dans le texte*/ /* Padding:10px permet un retrait du texte de 10 pixels autour de l'image pour que le texte ne vienne pas contre l'image */
.imggauche{float:left; padding:10px;} /* Met à gauche l'image dans le texte*/

.clignote{
	font-size:1.2em;
	text-decoration: blink;
	color: #FF0000;
	font-weight: bold;
	padding:25px 0 25px 0;
}
.blocjaune{ background:#FFFFCC; border:1px solid #EBDB00; padding:15px; margin:50px; font-style:italic; height:100%; }
.blocvert{ background:#CCF7DC; border:1px solid #76B571; padding:15px; margin:50px; font-style:italic; height:100%; }
.ampoule{ background:#FFFFCC url(images/ampoule.png) no-repeat 10px 50%; border:1px solid #EBDB00; padding:15px 15px 15px 70px; margin:30px; font-style:italic; height:100%; }
.jaune{ background:#FFFFCC; border:1px solid #EBDB00; padding:15px; margin:30px; font-style:italic; height:100%; }
.blocitem{margin:15px 0 30px 0; height:100%;}
.blocitem p{float:left; width:530px;}
.imgitem{text-align:center; padding:0 20px 0 20px; float:left; width:110px;}
.left{float:left;}