/* --- STYLES DE BASE POUR LE TEXTE ET LES PRINCIPAUX ÉLÉMENTS --- */

/* Page */
html {
	font-size: 100%; /* Voir -> Note 1 à la fin de la feuille de styles. */
}
body {
	margin: 0;
	padding: 5px 5px; /* Note -> 2 */
	font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif; /* 3 */
	font-size: .8em; /* -> 4 */
	line-height: 1.25; /* -> 5 */
	color: black;
	background:#C0C0C0;
}

#global {
	width: 100%;
	max-width: 1400px;
	min-width: 850px;
	margin-left: auto;
	margin-right: auto;
}

/* En-tête */
#entete {
	padding: 5px 0;
	z-index:10;
}

/* en-tete colonne gauche */
#en_tete_colonne_gauche {
	float: left;
	width: 90px;
	margin-right:auto;
	margin-left:auto;
	text-align:center;

}
#en_tete_colonne_gauche img {
	margin:2px ;
	padding:0;
}

/* en tete milieu */
#en_tete_milieu {
	margin-top:0px;
	margin-left: 100px;
	margin-right: 250px;
	
}
#contenu_en_tete_milieu {
	margin:0;
	padding:0;

	background-image:url('../BB10_images/boites_arrondies/fond_boite_doux.gif');
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius:5px;
}
#img_en_tete_milieu {
	margin-right:auto;
	margin-left:auto;
	margin-top:0px;
	width:500px;
	text-align:center;
}

#texte_bb {
	font-size: 1.5em;
	margin-left: 2em;
	text-align:left;
}

#texte_copy_bb {
	margin-right:2em;
	font-size:0.7em;
	text-align:right;
	
}



/* en-tete colonne droite */
#en_tete_colonne_droite {
	float: right;
	width: 240px;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
}
#en_tete_colonne_droite img {
	margin:2px ;
	padding:0;
}

/*                     CSS pour le menu                    */ 
#menu {
	 /* placement du menu, à modifier selon vos besoins */
	position: relative; /* placement du menu, à modifier selon vos besoins */
	clear:both;
	left: auto;

	z-index: 100;
	width: 100%; /* correction pour Opera */
}
#menu dl {
	width:12.3%;
	font-size: 0.8em;
	float: left;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	height:0px;
}
/* On donne une hauteur au menu, correspondant a
 la taille de l'image utilisée en fond, on met ensuite l'image de fond
  avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */

#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background: #f60;
	border: 2px solid #000000;
	margin: 0;
	padding: 0;
	list-style-type: none;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
}

#menu dd {
display: none;
border: 2px solid black;
margin: 0;
padding: 0;
list-style-type: none;
}


#menu li {
	text-align: center;
	font-weight: bold;
	background: #f60;
	float: inherit;
	margin: 0;
	padding: 0;
	list-style-type: none;
	height: 2em; line-height:1em;
	border: 2px solid #333333;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;

}

#menu dt a {
color: #000;
text-decoration: none;
display:block;
height: 100%;
border: 0 none;
}
#menu li a {
color: #000;
text-decoration: none;
display:block;
height: 100%;
}
#menu dt a:focus {
background: #eee;

}
#menu dt a:hover {
background: #f90;
color:white;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;


}
#menu li a:focus {
background: #eee;
}

#menu li a:hover {
	background: #f90;
	color:white;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius:5px;


}

/* CSS pour boites arrondies */
div.arrondi15px {     
	background-image:url('../BB10_images/boites_arrondies/fond_boite_doux.gif');	
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;     
	-khtml-border-radius: 15px;     
	border-radius: 15px;  
}
div.arrondi10px {     
	background-image:url('../BB10_images/boites_arrondies/fond_boite_doux.gif');	
	margin:1px 5px 1px 5px;
	padding:0 0 0 0;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;     
	-khtml-border-radius: 10px;     
	border-radius: 10px;  
}
div.arrondi05px {     
	background-image:url('../BB10_images/boites_arrondies/fond_boite_doux.gif');	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;     
	-khtml-border-radius: 5px;     
	border-radius: 5px;  
}



/* Listes */
ol {
	margin: .75em 0 .75em 24px;
	padding: 0; /* -> 9 */
}
ul {
	margin: .75em 2px .75em 2px;
	padding: 0; /* -> 9 */
}
ul {
	list-style: square;
}
li {
	margin: 0.2em 0.5em 0.2em 0.5em;
	padding: 0;
}
.suppuce {
	list-style-type:none;
}

/* Paragraphes */
p {
	margin: 0.5em 0.5em 0.5em 0.5em;
}
blockquote p {
	margin: 0.5em 0.5em 0.5em 0.5em;
}

li p {
	margin: .5em 0;
}

/* Citations */
q {
	font-size: 1.1em;
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
}
blockquote {
	font-size: 1.1em;
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
}
blockquote {
	margin: 0.5em 0.5em 0.5em 0.5em;
}
italique {
	font-style: italic;
}

/* Liens */
a img {
	border: none; 
}

gras {
	font-weight: bold;
}

.imagedroite {
	margin-left: 20px;
	border: 0px;
	float:right;
}
.imagegauche {
	margin-right: 20px;
	border: 0px;
	float:left;
}
.haut {
	vertical-align:top;
}
.justifie {
	text-align:justify;	
}
.gauche {
	text-align:left;
}
.droite {
	text-align:right;
}
.centre {
	text-align:center;
}
.gras {
	font-weight: bold;
}
.grossi {
	font-size:1.2em;
}
.grossid {
	font-size:1.5em;
}
.reduit {
	font-size: 0.7em;
}

.italique {
	font-style: italic;
}
.vertberry {
	background-color:#CCFF33;
	font-size:1.2em;	
}
.gagne {
	color:#006600;
}

.perdu {
	color:maroon
}


/* Titres */
h6 {
	margin: 1em 0 .5em 0; /* -> 6 */
}
h5 {
	margin: 1em 0 .5em 0; /* -> 6 */
}
h4 {
	margin: 1em 0 .5em 0; /* -> 6 */
}
h3 {
	margin: 0.5em 0 .5em 0; /* -> 6 */
}
h2 {
	margin: 0.5em 0 0 0; /* -> 6 */
}
h1 {
	margin: 0.5em 0 0 0; /* -> 6 */
}
h2 {
	background:white;	
	padding:0 0 0 0;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;     
	-khtml-border-radius: 10px;     
	border-radius: 10px; 
	text-align:center;
	 color:#FF3300;
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
	font-weight: normal; /* -> 7 */
}
h1 {
	background:white;	
	padding:0 0 0 0;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;     
	-khtml-border-radius: 10px;     
	border-radius: 10px;
	text-align:center;
	color:#FF3300;
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
	font-weight: normal; /* -> 7 */
}
h1 {
	font-size: 1.8em; 
}
h2 {font-size: 1.6em;}
h3 {font-size: 1.4em;}
h4 {font-size: 1.2em;}
h3 {
	background:white;	
	padding:0 0 0 0;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;     
	-khtml-border-radius: 10px;     
	border-radius: 10px;
	text-align:center;
	color:#FF3300;
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
	font-weight: normal; /* -> 7 */
}


/*                  CSS pour le pied de page                  */
.retour_haut {
	font-size:x-small;
	font-style:italic;
	
}
#pied {
	margin: 1px;
	padding: 5px 1px 1px 1px;
	font-size: .85em;
}
#contenu_pied {
	margin-top:5px;
}

#derniere_ligne {
	font-size:xx-small;
	color:#FFFFFF;
	text-align: center;
}

#logos_pied {
	text-align:center;	
	margin:5px 1px 1px 1px;
}
img {
	border: 0px;
	margin-top:5px;
}


#logos_pied a {
	border: 0px;
	margin-top:5px;
}

/*                        css pour positionnement des photos   */
.imagedroite {
	margin-left: 20px;
	border: 0px;
	float:right;
}
.imagegauche {
	margin-right: 20px;
	border: 0px;
	float:left;
}
.vignettedroite {
	margin-left: 10px;
	margin-right:0;
	margin-top:0;
	margin-bottom:0;
	border: 0px;
	float:right;
}
.vignettegauche {
	margin-left: 0;
	margin-right:10px;
	margin-top:0;
	margin-bottom:0;
	border: 0px;
	float:left;
}

#derniere_ligne {
	font-size:xx-small;
	text-align: center;
	color:gray;
}

#filet_pied {
	color: #FF9900; 
}


/* --- NOTES ---

1.	Ce "font-size: 100%" est normalement inutile. On l'utilise uniquement
	pour éviter un bug de redimensionnement du texte dans Internet Explorer.

2.	Par défaut, les navigateurs ont un padding (ou, pour certains, un
	margin) de 6px pour l'élément BODY. C'est ce qui évite que le texte
	ne soit complètement collé aux bords de la zone de visualisation du
	navigateur lorsqu'on affiche une page «brute», sans mise en forme.
	Mais ce retrait de 6px est un peu faiblard: on le renforce donc.
	Notez bien que les feuilles de styles des gabarits pourront augmenter
	ce retrait, ou bien l'annuler.
	
3.	Voici quelques exemples de collections cohérentes de fontes (propriété
	CSS "font-family"):
	font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
	font-family: "Times New Roman", Times, "Nimbus Roman No9 L", serif;
		
4.	Taille du texte de base de la page. Dépend de la taille du texte par
	défaut du navigateur (souvent 16px), et des réglages de l'utilisateur.
	À adapter en fonction de la fonte choisie, et du rendu souhaité.
	En général, on utilisera une valeur de base entre .65em et 1em
	(ou 65% et 100%).

5.	Hauteur de ligne. À adapter en fonction de la fonte choisie, et des
	besoins particuliers (lignes de texte longues ou courtes, titre ou
	corps de texte...).

6.	En général, les styles par défaut des navigateurs font que les marges
	en haut et en bas des titres sont équivalentes. Ici, en diminuant la
	marge du bas, on cherche à rapprocher le titre du contenu qu'il introduit.

7.	Les styles par défaut des navigateurs mettent les titres en gras.
	Si on souhaite passer à des caractères «normaux», on doit utiliser
	font-size: normal.

8.	Pour un élément en "font-size: 3em", la taille du texte sera le triple de
	la taille du texte de l'élément parent.
	À noter: on aurait pu écrire "font-size: 300%" pour le même résultat.

9.	Par défaut, les listes UL et OL ont un retrait à gauche qui peut être,
	suivant les navigateurs:
	- un padding-left de 40px;
	- ou bien un margin-left de 40px.
	On met tout le monde d'accord avec une marge à gauche de 24px, et pas
	de padding.


*/