/***************************************************************************************************************************************************************************/
/******************************************************************************** design.css *******************************************************************************/
/************************************************* crée le 29/09/2012 **** maintenu à jour jusqu'au: en phase de tests    **************************************************/
/***************************************************************************************************************************************************************************/




/***************************************************************************************************************************************************************************/
/********************************************************************************* Le body *********************************************************************************/
/***************************************************************************************************************************************************************************/
body /* On travaille sur la balise body, donc sur TOUTE la page */
{
   margin: auto; /* Pour centrer notre page */
   /*margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur.*/
   margin-bottom: 10px; /* Idem pour le bas du navigateur */

   color: black; /* Le texte de la page sera blanc */
   
   background-image: url("/design/images/background2.jpg");/* image en fond */
   background-repeat: repeat;
}

p
{
   font-size: 18px;
   text-align: justify; /* La citation sera justifiée */
}

tr
{
	background-color: rgb(239,85,0);
}
td 
{
	border: 1px solid black;
	background-color: rgb(231,174,0);
	vertical-align:top;
}
th
{
	border: 1px solid black;
}
table{
	background-color: rgb(237,224,213);
	border: 1px solid black;
}

h1, h2, h3, h4
{
   color: red;
   font-family: "Arial Black", Arial, Verdana, serif; /* On essaie d'avoir Arial Black en priorité */
   font-style: italic; /* mise en italique ! */
   text-align: center; /* Pour centrer le titre */
}
h3 em /* => tous les em situés à l'intérieur d'un h3 */
{
   color: blue;
}
a:hover /* Quand on pointe sur le lien */
{
   font-weight: bold;
   color: green; /* Le lien sera écrit en vert quand on pointera dessus */
}
a:active /* Quand on clique sur le lien */
{
   background-color: blue;
   color: red;
}
.gauche
{
	text-align: left;
}
.centrer
{
	text-align: center;
}
.droite
{
	text-align: right;
}
/***************************************************************************************************************************************************************************/

div#colonne_gauche {
	float: left;
	width: 300px;
	background: lightblue;
}
div#colonne_droite {
	float: right;
	text-align: right;
	width: 300px;
	background: burlywood;
}
div#colonne_centre {
	margin-left: 310px;
	margin-right: 310px;
	text-align: center;
	background: khaki;
}


/***************************************************************************************************************************************************************************/
/******************************************************************************** L'en-tête ********************************************************************************/
/***************************************************************************************************************************************************************************/
#en_tete
{
   /*width: 760px; /*taille de la banniere*/
   height: 240px;
   /*background-color: #192666;   */
   /*background-image: url("/design/images/banniere.gif"); /*on définit l'image de fond de l'entete*/
   background-image: url("/design/images/fond_header.jpg"); /*on définit l'image de fond de l'entete*/
   /*background-repeat: no-repeat;*/
   background-repeat: repeat-x;
   /*background-position:center;*/
   /*margin-bottom: 10px;*/
   /*text-align: center;*/
   /*border: 2px solid black;*/
   color: #818181;
   padding-top:24px;
}
.element_entete
{
   /*margin-bottom: 5px; /* Marge entre les éléments des différents menus*/
   position: absolute;
   left: 0%;
}

.element_entete p/* Tous les paragraphes se trouvant dans un menu */
{
	text-indent: 0px;
	padding: 0px;
	margin: 0px;
}
.element_entete1
{
   /*margin-bottom: 5px; /* Marge entre les éléments des différents menus*/
   position: absolute;
   right: 0%;
}

.element_entete1 p/* Tous les paragraphes se trouvant dans un menu */
{
	text-indent: 0px;
	padding: 0px;
	margin: 0px;
	text-align: right;
}
.element_entete1 a /* Tous les liens se trouvant dans un menu */
{
   color: #B3B3B3;
}

.element_entete1 a:hover /* Quand on pointe sur un lien du menu */
{
   background-color: #B3B3B3;
   color: black;
}

.element_entete2
{
   /*margin-bottom: 5px; /* Marge entre les éléments des différents menus*/
   /*position: absolute;*/
   /*left: 50%;*/
}
.element_entete2 h1 /* Tous les liens se trouvant dans un menu */
{
	color: white;
	font-size:5em;
	color:#f6f6f6;
	text-align: center; 
}
/***************************************************************************************************************************************************************************/



/***************************************************************************************************************************************************************************/
/********************************************************************************* Le menu *********************************************************************************/
/***************************************************************************************************************************************************************************/
#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 120px; /* Très important : donner une taille au menu */
   margin-left: 2px;
   margin-bottom: 10px;
}

.element_menu
{
   background-color: #192666;
   /*background-image: url("images/neige.jpg");
   background-repeat: repeat-x;*/
   border: 1px solid black;
   margin-bottom: 0px; /* Marge entre les éléments des différents menus*/
}

/* Quelques effets sur les menus */
.element_menu h3 /* Tous les titres de menus */
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-image: url("/design/images/puce.png"); /* On change l'apparence des puces */
   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_logo ul /* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-type: none;
   background-color: #192666;
   border: 1px solid black;
   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 */
   padding-top: 5px;
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 0px;
}

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

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
   background-color: #B3B3B3;
   color: black;
}

.element_menu p/* Tous les paragraphes se trouvant dans un menu */
{
	color: #818181;
	text-indent: 0px;
	padding: 0px;
	margin: 0px;
}
/***************************************************************************************************************************************************************************/



/***************************************************************************************************************************************************************************/
/*************************************************************************** Le corps de la page ***************************************************************************/
/***************************************************************************************************************************************************************************/
#corps
{
   margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   
   color: black; /*couleur du texte*/
   /*background-color: #dde4fd; /* Une couleur de fond pour le corps */
   /*background-image: url("/design/images/fond_corps.jpg");/* image en fond */
   /*background-repeat: repeat-x;
   
   /*border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#corps p
{
   font-size: 18px;
   text-indent: 15px; /*la citation sera indentée de xx pixels */
   text-align: justify; /* La citation sera justifiée */
}
#corps p:first-letter /* La première lettre de chaque paragraphe */
{
	font-size: 1.4em; /* Ecrit légèrement plus gros que la normale */
}
#corps p.centrer
{
	text-align: center;
}
#corps h1, h2, h3 /* Tous les titres h1 du corps */
{
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
/***************************************************************************************************************************************************************************/


/***************************************************************************************************************************************************************************/
/******************************************************************************** Le forum *********************************************************************************/
/***************************************************************************************************************************************************************************/
#corps_forum
{
/*border: 1px solid black;*/
margin-top: 10px;
margin-left: 140px;
margin-right: 10px;
margin-bottom: 10px;
padding: 5px;
/*background-color: #dde4fd; /* Une couleur de fond pour le corps */
/*background-image: url("/design/images/fond_corps.jpg");/* image en fond */
background-repeat: repeat-x;
}

.titre { width:61%; }
.nombremessages { width:2%; }
.nombrevu { width:4%; }
.nombresujets { width:2%; }
.auteur { width:7%; }
.derniermessage { width:18%; }
.categorie { width:92%; background-color : rgb(244,238,250); }

.vt_auteur
{
width:4%;
}
.vt_mess
{
width:20%;
}

#citation
{
width: 100%;
background-color : rgb(220,220,220);
margin-top: 2px;
margin-bottom: 2px;
font-family: "Comic sans MS", Arial, Verdana, serif;
}
/***************************************************************************************************************************************************************************/



/***************************************************************************************************************************************************************************/
/***************************************************************************** Le pied de page *****************************************************************************/
/***************************************************************************************************************************************************************************/
#pied_de_page
{
    margin-top: 10px;
    clear: both;
    overflow: hidden;
	background-color: #192666;
    border-top: 3px solid #686868;
    padding-top: 0;
	border: 2px solid black;
}
#pied_de_page ul
{
    display: block;
    margin: auto;
    width: 1000px;
    margin-top: 0;
    padding: 0;
}
#pied_de_page ul li
{
    font-size: 1.1em;
    width: 150px;
    display: block;
    float: left;
    list-style-type: none;
}
#pied_de_page ul li.validation
{
    width: 100px;
	margin-right: 10px;
}
#pied_de_page ul li.creative_common
{
    width: 340px;
	margin-right: 10px;
}
#pied_de_page ul li.mail
{
    width: 210px;
	margin-right: 10px;
}
#pied_de_page ul li.forum
{
    width: 160px;
	margin-right: 10px;
}
#pied_de_page ul ul
{
    margin: 8px 0 0;
    width: auto;
}
#pied_de_page ul ul li
{
    color: #818181;
    float: none;
    font-size: 0.75em;
    margin: 2px 0;
    width: auto;
}
#pied_de_page a /* Tous les liens se trouvant dans un menu */
{
   color: #B3B3B3;
}

#pied_de_page a:hover /* Quand on pointe sur un lien du menu */
{
   background-color: #B3B3B3;
   color: black;
}
/***************************************************************************************************************************************************************************/