*{margin:0;padding:0;}
body
{

	background-attachment : fixed;
  
   background-color : #e8f0f4;
	background-repeat: repeat-x;
}

body, div, a, h3, h2, h1, span
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}



img
{
	border-style:none;
}

#topbar
{
	background-color: #404040;
	border: 1px solid #FFFFFF;
	border-top: 0px;
	padding: 10px;
	padding-left: 20px;
	color: #FFFFFF;
	
}

#en_tete
{
	margin-left : 5%;
	margin-right : 5%;
	border-top: 0px;
	background-color: #a1cfe7;
	position: relative;
	height: 193px;
}

#en_tete  #logo
{
	position: absolute;
	top: 10px;

	background-repeat: no-repeat;
 

	margin-left: 10%;
	margin-right: 10%;
	
	max-height: 5px;
	max-width: 2000px;
	font-size: 21px;
	color: white;
}

#en_tete #logo span
{
	margin-left: 3px;
	color: #15265b;
	padding: 0;
	margin: 0;
	display: block;
}

#en_tete #navigation
{
	position: relative;
	padding-top: 170px;
	
}

#en_tete #navigation #boutton_droite{
	margin-right: 10px;
	float:right;
	
}

#en_tete #navigation #boutton_gauche{
	margin-left: 10px;
	float:left;
}

#en_tete #navigation li
{
	float: left;
	list-style: none;
	width: 75px;
	margin-right: 5px;
	text-align: center;
	font-weight: bold;
}

#en_tete #navigation li a
{
	display: block;
	padding-top: 7px;
	padding-bottom: 6px;
	font-size: 11px;
	color: #FFFFFF;
	text-decoration: none;
}

#en_tete #navigation li a:hover
{
	background-image: url(images/header_selected2.jpg);
	color: #C20000;
	text-decoration : underline;

}

#en_tete #navigation li span a
{
	background-image: url(images/header_selected2.jpg);
	color: #C20000;

}

#en_tete #navigation li .petit_titre
{
	font-size:10px;
}


div.centrage {text-align: center;}

.element_menu
{

   background-color:#f4f2e6;
   background-repeat: repeat-x;
   

   
   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}


.element_menu h4
{
	color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: left;

}

.element_menu li
{
	color: #4ca4bc;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: left;
}
	
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{

   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
   color: #5d5d5d;
}

.element_menu a:hover
{
	
	color: #C20000;
	text-decoration: underline;
}
.bleu
        {
            color:blue;
    }
.rouge
       {
            color:red;
    }
.jaune
        {
            color:yellow;
    }

#menu_gauche
{

	float: left;
	width: 213px;
	margin-left: 25px;
	margin-bottom: 25px;
}

#menu_gauche a
{
	display:block;
	clear:both;

	text-decoration:none;
}
#menu_gauche #message_random{
	background-color: #F4F2E6;
	margin-bottom:20px;
	padding-bottom:10px;
}
#menu_gauche p
{
	padding: 20px;
	padding-top: 10px;
	padding-bottom: 0px;
	color: rgb(95, 95, 95);
}

#menu_gauche blockquote
{
	margin-left: 20px;
}

#menu_gauche #annonce
{
	margin-left: 40px;
	margin-bottom: 40px;
}

#menu_gauche h3
{
	color: #000000;
	font-size: 14px;
	margin-bottom: 5px;
}

#body
{
	background-color: #FFFFFF;
	padding-top: 25px;
		margin-left : 5%;
	margin-right : 5%;
		/*padding-bottom :500px;*/
}


.clear
{
	clear: left;
}

.signature_livre_d_or
{
	float: right;
	margin-right: 20px;
	text-align: right;
	color: rgb(95, 95, 95);
}


#quoteend
{
	padding-top: 20px;
	float: right;
	background-repeat: no-repeat;
	background-position: bottom;
	margin-left: 14px;
	margin-right: 20px;

	width: 34px;
	height: 25px;
	
}

.seperator
{
	padding-top: 25px;
	border-bottom: 1px solid #CCCADB;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 30px;
	clear:both;

}



form
{
	margin-left: 13px;
	margin-right: 15px;
	color: rgb(95, 95, 95);

}



form .mise_en_forme
{
	clear: both;
	text-align: center;
}

form .smiley
{
	margin: 50px 15px;
}

.send_button
{
	border: 0;
	display: block;
	background-image: url(images/send_button.jpg);
	width: 79px;
	text-align: center;
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding-top: 7px;
	padding-bottom: 11px;
	float: right;
}


#corps a
{
	color: rgb(95, 95, 95);

	margin-bottom: 7px;


}

#corps a:hover
{
	text-decoration: underline;
}

#corps
{
	margin-left: 280px;
	margin-right: 25px;

	min-height: 1000px;
	
	
}

#corps h2
{
	font-size: 18px;
	color: #5D5D5D;
}

#corps p
{
	color: rgb(95, 95, 95);
	padding-top: 10px;
	padding-bottom: 15px;
	margin-left: 15px;
	text-indent:10px;
}




#corps .projet, .news, .livre_d_or{
	border:4px outset rgb(128, 128, 128);
	margin-top:20px;
	margin-bottom:10px;
	text-align: left;
	min-height: 100px;
}


#corps .news .menu_news, .projet .menu_projet{
	text-align: right;
}
#corps .news h3, .projet h3, .livre_d_or h3{
	background-color:rgb(128, 128, 128);
	min-height:15px;
	text-align:center;
	color: white;
	padding-top: 5px;
	font-weight: bold;
	
}
#corps .lien_projet {
	border:4px outset rgb(128, 128, 128);
	margin-top:50px;
	padding-left: 100px;
	padding-top: 20px;
	background-image: url(images/fond_marbre.jpg);
	background-repeat: repeat-x;
}


#corps  .news2
{
	border:4px outset rgb(128, 128, 128);
	margin-top:20px;
	margin-bottom:10px;
	text-align: left;
	min-height: 100px;
	
	background-color:#E7FFE7;
	/*background-image: url(images/);*/
}



#corps .news2 h3
{
	background-color:#1F6412;
	min-height:15px;
	text-align:center;
	color: white;
	padding-top: 5px;
	font-weight: bold;
	
}
#corps .news2 a
{
	color: #FFFFF;
	
}


#corps .lien_projet  a{
	font-weight: bold;
	font-size: 13px;
	display: block;
	text-decoration: none;

}

#corps .tableau table
{
   border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
}
#corps .colone_droite
{
   border-right: 1px solid black;
   min-height:200px;
   min-width:200px;
   text-align: center;
}
#corps .tableau  td
{
	padding-left: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
	text-indent: 10px;
	border-bottom: 1px solid black;
	height:150px;
}

#corps  th
{
	background-color:rgb(128, 128, 128);
	min-height:15px;
	text-align:center;
	color: white;
	padding-top: 5px;
	font-weight: bold;
}


#corps .message{
	border: 1px solid blue;
	width:500px;
	height: 100px;
	text-align: center;
	padding-top:30px;

	margin-left:30px;
	font-weight: bold;
	background-image: url("images/erreur.gif");
}
#corps ul{
	margin-left: 20px;
	color: rgb(95, 95, 95);
}

#corps .video
{
	margin-left:70px;
}
/*le pied de la page*/
#pied
{
	border-top: 1px solid #D7D7D7;
		text-align: center;
	padding-top: 25px;
		margin-left : 5%;
	margin-right : 5%;
	background-color: #FFFFFF;
	color: rgb(95, 95, 95);
	
	

}

#pied a
{
	color: rgb(95, 95, 95);
	text-decoration: none;
	margin-bottom: 7px;
}

#pied a:hover
{
	text-decoration: underline;
}

#pied span a
{
	text-decoration: underline;
}



#pied p
{
	color: #000000;
	margin-top: 10px;

}

td, th /* Mettre une bordure sur les td ET les th */
{
   border: 1px solid black;
}
caption /* Titre du tableau */
{
   margin: auto; /* Centre le titre du tableau */
   font-family: Arial, Times, "Times New Roman", serif;
   font-weight: bold;
   font-size: 1.2em;
   color: #009900;
   margin-bottom: 20px; /* Pour éviter que le titre ne soit trop collé au tableau en-dessous */
}

table /* Le tableau en lui-même */
{
   margin: auto; /* Centre le tableau */
   width:600;
   border: 4px outset green; /* Bordure du tableau avec effet 3D (outset) */
   border-collapse: collapse; /* Colle les bordures entre elles */
}

th /* Les cellules d'en-tête */
{
   background-color: #006600;
   color: white;
   font-size: 1.1em;
   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}

td /* Les cellules normales */
{
   
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
}

#menu_equipe/*le menu qui permet de se déplacer dans les différente page des éuqipes */
{
    font : bold 16px Batang, arial, serif;
    list-style-type : none;
    padding-bottom : 14px;
    padding-top : 14px;
	text-align : center;

}
#menu_equipe a
{
	border: ridge;	
    color : #666;
	background-color: #ffffff;
    padding : 4px;
}
#menu_equipe a:hover
{

background-color : #fff;

}
#menu_equipe li.active
{
    border-bottom: 1px solid #fff;
    background-color: #2fa6c0;
}
#corps_message
{
border: 1px solid black;
width: 90%;
margin-top: 50px;
margin-left: 5%;
margin-bottom: 10Opx;
padding: 5px;
background-color: rgb(237,224,213);
}
#quote
{
width: 100%;
background-color : rgb(220,220,220);
margin-top: 2px;
color : black;
margin-bottom: 2px;
font-family: "Arial Black", Arial, Verdana, serif;
}
.cadre
     {
     /* Largeur de l'interface que vous voulez mettre en % ou px par exemple */
     width : 600px;
     }

/* ********** Les 3 images du haut du Design ********** */
.haut_1
      {
      background : url("images/skn_coin_HG.gif") bottom left no-repeat;
      padding-left : 20px;
      }

.haut_2
      {
      background : url("images/skn_coin_HD.gif") bottom right no-repeat;
      padding-right : 20px;
      }

.haut
    {
    background : url("images/skn_coin_HM.gif") bottom center repeat-x;
    width : 100%;
    padding-top : 20px;
   
    }


/* ********** La partie Entête ********** */
.contenu_1_H
           {
           background : url("images/skn_vert_ent_G.gif") left repeat-y;
           padding-left : 20px;
           
           }

.contenu_2_H
           {
           background : url("images/skn_vert_ent_D.gif") right repeat-y;
           padding-right : 20px;
           height : auto;
           }

.contenu_H
         {
         width : 100%;
         background : url("images/skn_Back_ent.gif");
         background-color : #5A6A50;  
         font-family : Verdana, Arial, Helvetica, sans-serif; /* Nom de la police utilisée */
         font-size : 12px; /* Taille de la police */
         color : #C4B550; /* Couleur de la police */
         }


/* ********** Les 3 images du milieu séparant l'Entête et le Contenant ********** */
.milieu_1
        {
        background : url("images/skn_milieu_EC_G.gif") bottom left no-repeat;
        padding-left : 20px;
        }

.milieu_2
        {
        background : url("images/skn_milieu_EC_D.gif") bottom right no-repeat;
        padding-right : 20px;
        }

.milieu
      {
      background : url("images/skn_milieu_EC_M.gif") bottom center repeat-x;
      width : 100%;
      height : 20px; /* Pour voir le fond */
      }


/* ********** La partie Contenant ********** */
.contenu_1_B
           {
           background : url("images/skn_vert_cont_G.gif") left repeat-y;
           padding-left : 20px;
           height : auto;
		   
           }

.contenu_2_B
           {
           background : url("images/skn_vert_cont_D.gif") right repeat-y;
           padding-right : 20px;
           height : auto;
		  
}

.contenu_B
         {
         width : 100%;
         background : url("images/fondJeux.gif");
		  background-repeat: no-repeat;
         background-color : #686A65;  
         font-family : Verdana, Arial, Helvetica, sans-serif; /* Nom de la police utilisée */
         font-size : 12px; /* Taille de la police */
		 color : #ffffff; /* Couleur de la police */
		
		 
         }


/* ********** les 3 images du bas du Design ********** */
.bas_1
     {
     background : url("images/skn_coin_BG.gif") top left no-repeat;
     padding-left : 20px;
     }

.bas_2
     {
     background : url("images/skn_coin_BD.gif") top right no-repeat;
     padding-right : 20px;
     }

.bas
   {
   background : url("images/skn_coin_BM.gif") top center repeat-x;
   width : 100%;
   padding-top : 20px;
   }