/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ COULEURS ++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* Général*/
body {
	color: #333333;
	background: #ffffff;
}
a {
	color: #000099;
}
a:hover, a:focus {
	color: #000066;
}
strong {
	color: #333333;
}


/* Conteneur central */
#centre {
	background: url(../imgages/pixel_t.gif) no-repeat;
}


/* entete */
#entete
{
	color: #aaa ;
}
#entete a
{
	color: #aaa ;
	text-decoration: none;
}
#entete a:hover
{
	color: #444 ;
	text-decoration: none;
}


/* chemin */
#chemin
{
	color: #444 ;
}
div#chemin a
{
	color: #aaa ;
	text-decoration: none;
}
div#chemin a:hover
{
	color: #444 ;
	text-decoration: none;
}


/* Navigation */
#navigation {
	background: url(../images/pixel_t.gif) no-repeat left top;
	color: #333333;
}
#navigation a {
	background: url(../images/pixel_t.gif) no-repeat left top;
	color: #777777;
}
#navigation a:hover, #navigation a:focus {
	color: #000000;
	background: url(../images/bg_semi_transparent.png) repeat-x left top;
}



/* Contenu page */
#contenu {
	color: #333333;
	background: #ffffff;
}
#contenu a {
	color: #000099;
}
#contenu a:hover, #principal a:focus {
	color: #000066;
}
#contenu strong {
	color: #333333;
}

#contenu h1
{
	color: #333333;
}



/* ITEM BOX */
#item_box {
	color: #aaa ;
	text-decoration: none;
	/*background-color: #f9f9f9; */
	background: url(../images/bkgbox.png) no-repeat left top;
	border: 1px solid #ccc ;
}
a#item_box  {
	color: #444 ;
	text-decoration: none;
	/*background-color: #f0f0f0;*/
	background: url(../images/bkgbox.png) no-repeat left top;
	border: 1px solid #AAA ;
}
a:hover#item_box {
	color: #000 ;
	text-decoration: none;
	background: url(../images/bkgbox2.png) no-repeat left top;
	/* background-color: #f9f9f9; */
	border: 1px solid #ccc ;
}

#conteneur_item_box
{
	color: #555;
	font-size: 0.9em;
	margin: auto;
}

#image_box
{
	border: 1px solid #888 ;
}
#read_more
{
	color: #F00 ;
}

/* RESUME */
#resume {
	color: #000 ;
	text-decoration: none;
	/*background-color: #f9f9f9; */
	background: url(../images/bg_semi_transparent2.png) repeat left top;
	border: 1px solid #888 ;
}

#inclusion {
	color: #000 ;
	text-decoration: none;
	background: url(../images/pixel_t.gif) no-repeat left top;
	border: 0px solid #888 ;
}

a#resume  {
	color: #444 ;
	text-decoration: none;
	/*background-color: #f0f0f0;*/
	/* background: url(../images/bkgbox.png) no-repeat left top;*/
	border: 1px solid #888S ;
}
a:hover#resume {
	color: #000 ;
	text-decoration: none;
	/*background: url(../images/bkgbox2.png) no-repeat left top; */
	/* background-color: #f9f9f9; */
	border: 1px solid #ccc ;
}


#conteneur_resume
{
	color: #000000;
	font-size: 0.9em;
}

#titre_page_incluse
{
	color: #555555;
}

#image_resume
{
	border: 1px solid #888 ;
}

a#download_pdf
{
	color: #FF0000 ;
	font-size: 0.8em;
}



/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ POSITIONNEMENT  ++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 
/* Page */ 
html { 
  font-size: 100%; /* Évite un bug d'IE 6-7. (1) */ 
} 
body { 
  margin: 0; 
  padding: 5px; /* Remettre à zéro si nécessaire. */ 
  font-family: Helvetica, Arial, FreeSans, sans-serif; /* une collection de polices (2) */ 
  font-size: 0.8em; /* À adapter pour la police choisie. (3) */ 
  line-height: 1.4; /* À adapter au design. (4) */ 
  text-align: center ;	/* On utilise text-align: center ; pour Internet Explorer, c'est la seule façon de centrer les éléments de type block avec ce navigateur */
  background-image: url("../images/body_bg3.png");
  background-repeat: repeat-y; /* Le fond ne se répètera que sur la première colonne, verticalement */
  background-position: center;
} 

#conteneur /* ----------------qui contient l'ensemble de la page ------------------- */
{
	width: 1000px ;
	margin: 0 auto ; /* margin: 0 auto ; est la méthode correcte pour centrer les éléments de type  block (comme les divisions), nous centrons donc cette division */
	text-align: left ; /* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */
	border: 1px solid #888 ;
	min-height: 600px;
}


/* Titres */ 
h1, h2, h3, h4, h5, h6 { 
  margin: 1em 0 .5em 0; /* Rapproche le titre du texte. (5) */ 
  line-height: 1.1; 
  font-weight: bold; /* Valeur par défaut. (6) */ 
  font-style: normal; 
} 
h1 { 
  font-size: 2em;
} 
h2 { 
  font-size: 1.5em; 
} 
h3 { 
  font-size: 1.25em; 
} 
h4 { 
  font-size: 1em; 
} 

/* ------------------------------------  ENTETE -----------------------------------------*/
#entete
{
	margin: 0 ;
	padding-right: 10px ;
	padding-top: 5px ;
	line-height: 10px ;
	text-align: right ;
}

/* ------------------------------------  BANNIERE -----------------------------------------*/
#banniere
{
	height: 100px ;
	padding: 0px ;
	background: url(../images/banner.png) no-repeat left top;
	line-height: 0em;
}

#logo
{
	margin-left: 20px ;
}
/* ------------------------------------  CHEMIN -----------------------------------------*/
#chemin
{
	height: 10px ;
	margin: 0 ;
	padding-right: 0px ;
	padding-left: 230px ;
	line-height: 10px;
	text-align: left ;
}
#espace_sous_chemin
{
	height: 5px ;
	margin: 0 ;
	padding-right: 0px ;
	padding-left: 0px ;
	line-height: 5px;
	text-align: left ;
}

/* ------------------------------------  NAVIGATION-----------------------------------------*/

#navigation {
	float: left;
	width: 190px;
	padding-top: 27px ;
	margin-left: 20px ;
}

#navigation a {
	display: block;
	height: 1%;
	padding-bottom: 5px;
	padding-top: 5px;
	line-height: 1.1;
	font-size: 1em;
	text-decoration: none;
}

#current_page_item
{
	
}

a.menu_lev_a
{
	width: 190px ;
	padding-left: 0px ;
}
span.menu_lev_a
{
	display: block;
	width: 190px ;
	padding-left: 0px ;
}
a.menu_lev_b
{
	width: 175px ;
	padding-left: 15px ;
}
span.menu_lev_b
{
	display: block;
	width: 175px ;
	padding-left: 15px ;
}
a.menu_lev_c
{
	width: 160px ;
	padding-left: 30px ;
}
span.menu_lev_c
{
	display: block;
	width: 160px ;
	padding-left: 30px ;
}
a.menu_lev_d
{
	width: 145px ;
	padding-left: 45px ;
}
span.menu_lev_d
{
	display: block;
	width: 145px ;
	padding-left: 45px ;
}

#navigation hr 
{
height: 1px;
margin: 0;
padding: 0;
color: #ddd;
background-color: #ddd;
border: 0px;
width: 190px;
}


/* ------------------------------------  CONTENU -----------------------------------------*/

/* Contenu principal */
#contenu {
	float: left;
	width: 770px;
	padding-left: 20px;
	background: url(../images/pixel_t.gif) no-repeat left top;
}
#contenu p
{
	text-align: justify ;
	text-indent: 0em ;
	line-height: 1.7em ;
}
/* On rend les paragraphes plus propre, alignement justifié,
 alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */
 
#contenu a
{
	color: #000099 ;
}

#contenu a:hover
{
	color: #000033;
}

p.small_text
{
	display: block;
	width: 350px ;
	padding: 5px ;
	margin-left: 50px;
	/* background: url(../images/bkgbox.png) repeat-x left top; */
	/* border: 1px outset #555555 ; */
	font-weight: normal;
	text-indent: 0px;
	text-align: justify;
	color: #333399;
	
}

h3.sous-titre
{
	display: block;
	clear: both;
	width: 100% ;
	padding-top: 17px ;
	padding-bottom: 0px ;
	padding-left: 0px ;
}
/*------------------------------------------------Item box -----------------------------------------------------*/
#item_box
{
	float: left;
	display: block;
	width: 230px ;
	height: 180px ;
	padding: 5px ;
	margin-top: 5px ;
	margin-bottom: 5px ;
	margin-left: 0 px ;
	margin-right: 10px ;
	background: url(../images/pixel_t.gif) repeat-y top;
}


#conteneur_item_box
{
	display: block;
	width: 220px ;
	height: 145px ;
	margin-top: 0px;
	margin-bottom: 10px;
	margin-left: 4px;
	margin-right: 0px;
	padding: 0px;
	text-decoration: none;
	text-align: left;
	font-weight: normal;
}
img#image_box
{
	display: block;
	width: 220px ;
	height: 125px ;
	padding: 0px ;
	margin: auto ;
	margin-bottom: 10px ;
	margin-top: 10px ;
}

p#read_more
{
	display: block;
	text-align: right;
	font-size: 0.8em;
	margin-bottom: 0px;
	margin-top: 25px;
	text-decoration: none;
}
/*------------------------------------------------PAGE INCLUSE / RESUME -----------------------------------------------------*/
#resume
{
	float: left;
	display: block;
	clear: both;
	width: 740px ;
	min-height: 200px ;
	padding: 5px ;
	margin-top: 5px ;
	margin-bottom: 5px ;
	margin-left: 0px ;
	margin-right: 0px ;
}

#inclusion
{
	float: left;
	display: block;
	clear: both;
	width: 740px ;
	min-height: 200px ;
	padding: 5px ;
	margin-top: 5px ;
	margin-bottom: 5px ;
	margin-left: 0px ;
	margin-right: 0px ;
}

#conteneur_resume
{
	display: block;
	max-width: 700px ;
	/*height: 250px ; */
	margin-top: 10px;
	margin-bottom: 50px;
	margin-left: 20px;
	margin-right: 0px;
	padding: 0px;
	text-decoration: none;
	text-align: left;
	font-weight: normal;
}

img#image_resume
{
	display: block;
	/* width: 220px ; */
	/* height: 125px ; */
	padding: 0px ;
	margin: auto ;
	text-align: left;
	margin-bottom: 10px ;
	margin-top: 10px ;
}


#titre_page_incluse
{
	display: block;
	clear: both;
	font-size: 1.7em;
	font-weight: bold;
	text-align: left;
	margin-left: 20px;
	margin-bottom: 20px;
}

a#download_pdf
{
	display: block;
	text-align: right;
	margin-bottom: 0px;
	margin-top: -43px;
	text-decoration: none;
	color: #FF0000;
}
#logo_pdf
{
	display: inline;
	border: 0px;
	margin-bottom: -5px;
	padding-left: 0px;
	padding-right: 2px;
}

/*------------------------------------------------PIED DE PAGE -----------------------------------------------------*/
p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color: #444 ;
}



pre
{
	overflow: auto ;
	/*background: #dea ;*/
	border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;

}

/* En passant on définit l'overflow de la balise pre à auto pour
 permettre d'afficher des barres de défilement si le texte contenu
  dans cette balise est trop grand */

 /*une couleur de fond, une bordure, la taille de police
 et un léger espace entre le texte et les bords du pre */

pre span
{
	color: #560 ;
}
/* Couleur de texte des éléments compris dans des span
 eux mêmes compris dans un pre */

pre span.comment
{
	color: #b30000 ;
}
/* Couleur différente pour les span.comment, les span
 utilisés pour les commentaires */


/* Listes */ 
ul, ol { 
  margin: .75em 0 .75em 32px; 
  padding: 0; 
} 
 
/* Paragraphes */ 
p { 
  margin: .75em 0; /* Marges plus faibles que par défaut. (7) */ 
} 
address { 
  margin: .75em 0; 
  font-style: normal; 
} 
 
/* Divers éléments de type en-ligne (8) */ 
em { 
  font-style: italic; 
} 
strong { 
  font-weight: bold; 
} 
 
/* Formulaires */ 
form, fieldset { 
  margin: 0; 
  padding: 0; 
  border: none; 
} 
input, button, select { 
  vertical-align: middle; /* Solution pb. d'alignement. (9) */ 
}

/*
   1.  Bug décrit sur la page suivante: Bug avec l’unité relative em et Internet Explorer.
   2. Pour un choix de collections de polices (font-family, voir Quelles polices de caractères (fontes) utiliser sur le Web?.
   3. Ici, on utilise les styles de l'élément body pour définir la taille du texte globale pour le site. Une police Arial ou Helvetica à .8em, soit 80% de la taille du texte par défaut du navigateur, fournit une bonne lisibilité. Il faudra adapter cette valeur suivant la police choisie, les besoins du design, etc.
   4. Les valeurs 1.1 et 1.2 conviennent marchent bien pour les titres, voire pour le texte dans des colonnes étroites. Pour des lignes de texte plus longues, on utilisera plutôt des valeurs entre 1.2 (120%) et 1.8 (180%).
   5. Avec les styles par défaut des navigateurs, les titres ont souvent une marge supérieure et une marge inférieure égales. Du coup, on ne reconnait pas au premier coup d'œil que le titre se rapporte au texte qui le suit. Le style proposé corrige ce défaut. Pour retrouver le style par défaut des navigateurs, utilisez un margin: 1em 0;.
   6. Dans les styles par défaut des navigateurs, les titres sont en gras. Si vous souhaitez une graisse normale pour la plupart de vos titres, utilisez plutôt font-weight: normal.
   7. On utilise des em afin que les marges des paragraphes soient proportionnelles à la taille du texte, ce que ne font pas tous les navigateurs (notamment IE). On utilise une valeur de .75em, soit des retraits entre les paragraphes un peu plus faibles que ceux utilisés par défaut par les navigateurs. À modifier selon vos besoins.
   8. Ces styles correspondent aux valeurs par défaut des navigateurs, mais vous voudrez peut-être les modifier pour votre projet.
   9. Les éléments de formulaires sont assez difficiles à mettre en forme et à positionner. De plus, l'alignement vertical des boutons, cases à cocher et autres listes déroulantes est parfois difficile à gérer. Vu les différences de comportement entre navigateurs, il n'y a pas de solution parfaite, mais utiliser un alignement vertical centré dans la hauteur de ligne permet d'avoir un rendu décent avec tous les navigateurs.
*/