@charset "utf-8";
body
{
	margin-right: auto;
	margin-left: auto;
	padding-right: 15px;
	padding-left: 15px;
	background-color: #b0b4bf; /* gris moyen */
	color: #10190e; /* gris foncé presque noir */
	font-size: 100%;
	font-family: 'Lucida Sans', Arial, Univers, 'Trebuchet MS', Verdana, sans-serif;
}

#bandeau
{
	background: url(../images_convertisseur/bandeau.jpg) no-repeat top left #b0b4bf;
	height: 169px;
	width: 919px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 15px;
	padding: 0;
}

#bandeau h1
{
	text-indent: 50px;
	font-size: 300%;
	color: #2f4016; /* vert foncé */
}

/* ---------------------------------------------------------- */
/* PARTIE CENTRALE contenant NAVIGATION + CORPS + PIED */
#centre
{
	width: 919px;
	margin-right: auto;
	margin-left: auto;
	padding: 0;
	background-color: #b0b4bf; /* gris moyen */
}

/* ---------------------------------------------------------- */
/* COLONNE DE GAUCHE: NAVIGATION ET COPYRIGHT*/
/* Marges internes et externes de "ul" supprimées, car problèmes d'homogénéité d'un navigateur à l'autre */
#navigation
{
	width: 210px;
	float: left;
	margin: 0;
	padding: 0;
	font-size: 80%;
	line-height: 1.3em;
}

/* LES MENUS (LISTES) */
#navigation ul.premier_niveau,
#navigation ul.deuxieme_niveau,
#navigation ul.troisieme_niveau,
#navigation ul.quatrieme_niveau
{
	margin: 0;
	padding: 0; /* évite une marge interne à l'intérieur de body pour le premier niveau */
	list-style: none;
}

#navigation li
{
	margin-bottom: 2px; /* laisse un espace de 2px entre les menus de niveau 1; pas de marge en haut, pour éviter un décalage vertical avec la div #centre */
	padding: 1px; /* 1px d'écart entre la bordure de liste et la bordure supplémentaire du lien survolé */
	background: #dcdcdc; /* gris clair (fond menu) */
	border: 1px solid #10190e; /* gris foncé du texte */
}

#navigation li.intertitre
{
	padding-left: 5px; /* 5px, contre 4px pour les li qui servent de liens, pour tenir compte de la bordure (invisible quand les liens ne sont pas actifs) de 1px */
	padding-right: 5px;
	padding-top: 3px;
	color: #8c9153; /* vert olive */
	font-weight: bold;
}

#navigation ul.deuxieme_niveau li
{
	padding: 0; /* hérite déjà de la marge intérieure d'1px du premier niveau; évite d'avoir 2px de marge intérieure */
	border: 0;
	font-weight: normal; /* sinon, hérite du "bold" de la classe intertitre */
	color: #10190e; /* gris foncé presque noir — sans cette ligne, la puce (mais pas le texte, hérite du vert olive de la classe intertitre) */
}

#navigation ul.troisieme_niveau li
{
	font-size: 90%;
	background-image: url(../images_convertisseur/carre_gris_10190e.png);
	background-repeat: no-repeat;
	background-position: 0 1em; /* left, top */
	margin: 0 0 0 .8em;
	padding: 0 0 0 1em;
	line-height: 1.2em;
}

#navigation ul.quatrieme_niveau li
{
	font-size: 100%;
	background-image: url(../images_convertisseur/disque_gris_10190e.jpg);
	background-repeat: no-repeat;
	background-position: 0 1em; /* left, top */
	margin: 0 0 0 0em; /* top right bottom left */
	padding: 0 0 0 1em;
	line-height: 1.2em;
}

/* règle générale: les sous-menus ne s'affichent pas */
li.sousmenu_cible_source,
li.sousmenu_source_cible,
li.sousmenu_feuillet,
li.sousmenu_unites,
li.sousmenu_forfait,
li.sousmenu_chiffres,
li.sousmenu_foisonnement,
li.sousmenu_blancs,
li.sousmenu_calculs,
li.sousmenu_modele_feuillet,
li.sousmenu_volume
{
	display: none;
}

/* exception: quand on se trouve sur la page correspondant au menu, les sous-menus s'affichent sous le menu principal correspondant */
#page_source_cible li.sousmenu_source_cible,
#page_cible_source li.sousmenu_cible_source,
#page_feuillet li.sousmenu_feuillet,
#page_unites li.sousmenu_unites,
#page_forfait li.sousmenu_forfait,
#page_chiffres li.sousmenu_chiffres,
#page_foisonnement li.sousmenu_foisonnement,
#page_blancs li.sousmenu_blancs,
#page_calculs li.sousmenu_calculs,
#page_modele_feuillet li.sousmenu_modele_feuillet,
#page_volume li.sousmenu_volume
{
	display: list-item;
}

/* LES LIENS */
/* Les liens deviennent des blocs, de façon à pouvoir fixer la largeur et les marges */
#navigation li a,
#navigation li a:visited
{
	display: block;
	background: #dcdcdc; /* gris clair (fond menu) */
	border: 1px solid #dcdcdc; /* bordure de même couleur que le fond, de façon à ce qu'elle ne se voie pas quand le lien est inactif, mais occupe la place */
	padding: 4px 2px 2px 4px; /* top, right, bottom, left */
	color: #10190e; /* gris foncé presque noir */
	text-decoration: none;
}

#navigation li a:hover,
#navigation li a:focus,
#navigation li a:active
{
	display: block;
	padding: 4px 2px 2px 4px; /* top, right, bottom, left */
	background: #a7ccf7; /*fond bleu clair */
	border: 1px solid #294b8f; /* bordure bleue supplémentaire quand le lien est survolé */
	color: #10190e; /* gris foncé presque noir */
	text-decoration: none;
}

/* pour le menu correspondant à la page sur laquelle on se trouve, fond "bleuet" pour le différencier des autres menus */
#page_index a#lien_index,
#page_participants a#lien_participants,
#page_introduction a#lien_introduction,
#page_cible_source a#lien_cible_source,
#page_source_cible a#lien_source_cible,
#page_feuillet a#lien_feuillet,
#page_unites a#lien_unites,
#page_forfait a#lien_forfait,
#page_chiffres a#lien_chiffres,
#page_foisonnement a#lien_foisonnement,
#page_blancs a#lien_blancs,
#page_calculs a#lien_calculs,
#page_volume a#lien_volume,
#page_modele_feuillet a#lien_modele_feuillet
{
	background: #627dc6; /* bleuet */
	color: #ffffff;
}

/* ENCADRÉ DU COPYRIGHT */
#navigation p
{
	margin-top: 35px;
	padding: 8px;
	background: #dcdcdc; /* gris clair (fond menu) */
	border: 0;
	color: #10190e; /* gris foncé presque noir */
}

#navigation p a,
#navigation p a:visited,
#navigation p a:hover,
#navigation p a:focus,
#navigation p a:active,
#pied p a,
#pied p a:visited,
#pied p a:hover,
#pied p a:focus,
#pied p a:active
{
	color: #294b8f; /* bleuet */
	text-decoration: none;
}

#navigation strong
{
	font-weight: bold;
}

/* ---------------------------------------------------------- */
/* CORPS = PARTIE PRINCIPALE DE LA PAGE */
#corps
{
	margin-top: 15px;
	margin-left: 225px;
	padding: 15px;
	background-color: #ffffff; /* fond blanc */
}

h2
{
	font-size: 180%;
	color: #2f4016; /* vert foncé */
	line-height: 1.3em;
	margin-bottom: 1em;
}

h3
{
	font-size: 140%;
	color: #8c9153; /* vert olive */
	line-height: 1.3em;
	margin-top: 2em;
	margin-bottom: 1em;
}

h4
{
	font-size: 120%;
	color: #e06e52; /* orangé */
	line-height: 1.3em;
	margin-top: 1em;
	margin-bottom: .3em;
}

#corps p,
#corps li
{
	line-height: 1.4em;
}

#corps strong
{
	color: #8c9153; /* vert olive */
	font-weight: bold;
}

#corps ul,
#corps ul ul
{
	list-style-type: none;
	padding: 0;
	margin: 0;
}

/* Pour personnaliser les listes, plutôt que d'utiliser list-style-image, qui ne permet pas un positionnement précis de l'image utilisée comme puce, on utilise background-image */
#corps ul li
{
	background-image: url(../images_convertisseur/puce_vert8C9153.png);
	background-repeat: no-repeat;
	background-position: 0 .4em; /* left, top */
	margin-left: .8em;
	padding-left: 1.1em;
	margin-top: 10px;
}

#corps ul li ul li
{
	background-image: url(../images_convertisseur/puce_vert2F4016.png);
	background-repeat: no-repeat;
	background-position: 0 .6em; /* left, top */
	margin-left: .1em;
	padding-left: 1em;
}

#corps a,
#corps a:visited
{
	color: #294b8f; /* bleuet */
	text-decoration: none;
	border-bottom: 1px solid #9aa0ad; /* gris bleuté */
}

#participants p a,
#participants p a:visited
{
	color: #627dc6; /* même bleuet que pour les liens sur fond gris */
	font-weight: bold;
	text-decoration: none;
	border-bottom: 0;
}

#corps a:hover,
#corps a:focus,
#corps a:active,
#participants p a:hover,
#participants p a:focus,
#participants p a:active
{
	padding: 2px;
	background: #4c628f; /* fond bleu turquin */
	color: #ffffff;
	text-decoration: none;
}

#corps p.police_fixe
{
	margin-left: 40px;
	font-family: Monaco, 'Courier New', monospace;
}

#corps p.police_proportionnelle
{
	margin-left: 40px;
	font-family: 'Times New Roman', Georgia, Garamond, serif;
}

/* ---------------------------------------------------------- */
/* PIED DE PAGE */
#pied
{
	margin-top: 10px;
	margin-left: 225px;
	background: #b0b4bf; /* même fond gris que body */
	border: 0;
	font-size: 80%;
	text-align: center;
}

.flottantdroitpied /* pour l'image de valid CSS */
{
	float: right;
	margin: 0;
}

.flottantgauche /* pour l'image de valid XHTML */
{
	float: left;
	margin: 0;
}

#pied p.flottantgauche a img,
#pied p.flottantdroitpied a img
{
	border: 0;
}

/* ---------------------------------------------------------- */
/* ENCADRÉ FLOTTANT CONTENANT LES DÉFINITIONS */
#definitions /* bloc étroit contenant 3 définitions, utilisé seulement dans l'Introduction */
{
	background: #ffffff;
	width: 180px;
	float: right;
	margin-bottom: 4px;
	margin-left: 12px;
	padding: 2px;
	font-size: 85%;
}

#definitions2 /* bloc plus large contenant 2 définitions */
{
	background: #ffffff;
	width: 220px;
	float: right;
	margin-bottom: 4px;
	margin-left: 12px;
	padding: 2px;
	font-size: 85%;
}

.floatright /* classe applicable à chaque définition contenue dans la div definitions ou definitions2; permet d'encadrer chaque définition et de les séparer par un blanc */
{
	margin-bottom: 8px;
	padding: 4px;
	background: #E9EDC0; /*fond sable */
	border: 1px solid #2f4016; /* même vert foncé que h1 */
}

.terme_defini /*met en vert foncé gras le terme défini */
{
	color: #415F15; /* vert foncé (sur fond sable) du terme défini */
	font-weight: bold;
}

/* ---------------------------------------------------------- */
/* TOTO (centré) */
#corps p.remonter2,
#corps p.remonter2:visited
{
	width: 80px;
	margin-top: 8px;
	margin-right: auto;
	margin-bottom: 8px;
	margin-left: auto;
	padding: 4px;
	background: #ffffff;
	border: 0;
}

#corps p.remonter2:hover,
#corps p.remonter2:focus,
#corps p.remonter2:active
{
	width: 80px;
	margin-top: 8px;
	margin-right: auto;
	margin-bottom: 8px;
	margin-left: auto;
	padding: 4px;
	background: #ffffff;
	border: 2px solid #2f4016; /* vert foncé */
}

#corps a.remonter,
#corps a.remonter:visited,
#corps a.remonter:hover,
#corps a.remonter:focus,
#corps a.remonter:active
{
	background: #ffffff;
	border: 0;
	text-decoration: none;
}

#corps p.remonter2 a.remonter img
{
	border: 0;
}

/* STYLE POUR LE CODE */
code
{
	font-family: Monaco, 'Courier New', monospace;
	color: #10190e; /* gris foncé presque noir */
}

/* ---------------------------------------------------------- */
/* CLASSES POUR LA MISE EN FORME DU TEXTE */

/* utilisé essentiellement dans les résultats pour signaler une erreur */
.attention
{
	padding: 10px;
	background: #e06e52; /* fond orangé */
	color: #ffffff;
}

.aide /* précisions pour l'utilisation des formulaires */
{
	color: #925F52; /* marron */
}

.strongresultats
{
	color: #e06e52; /* orangé */
	font-weight: bold;
}

.gras
{
	font-weight: bold;
}

.alignement_droit
{
	text-align: right;
}

.texte_centre
{
	text-align: center;
}

.precisions
{
	font-size: 90%;
}

.spacing
{
	letter-spacing: 0.2em;
	word-spacing: 0.8em;
}

.error
{
	color: #ff0000; /* rouge */
}

/* ---------------------------------------------------------- */
/* TABLEAUX  */
/* hiérarchie: #corps / form / table */
table
{
	padding: 3px;
	border: 2px solid #10190e; /* gris très foncé */
	border-spacing: 0px;
	font-size: 92%; /* diminution de la taille des caractères dans les tableaux */
}

td.textetbl
{
	width: 450px;
	line-height: 1.4em;
}

td.textetbl,
td.chiffrestbl,
th
{
	padding: 6px;
	border: 1px solid #925F52; /* marron */
}

th.foison
{
	padding: 6px;
	border: 1px solid #925F52;
	color: #925F52;
	font-weight: bold;
	line-height: 2em;
}

input
{
	line-height: 2em;
	font-size: 100%;
}

input.compteur
{
	font-size: 90%;
}

#corps table td
{
	padding: 6px;
	border: 1px solid #925F52; /* marron */
	line-height: 1.4em;
}

#corps table.navigation_modele
{
	border: 0;
	padding: 10px;
	border-collapse: collapse;
	border-spacing: 10px;
}

#corps table.navigation_modele tr
{
	border: 0;
}

#corps table.navigation_modele td.navigation_modele1
{
	width: 260px;
	border: 0;
	padding: 10px;
}

#corps table.navigation_modele td.navigation_modele2
{
	width: 180px;
	border: 0;
	padding: 10px;
}

#corps table.navigation_modele tr.navigation_modele4 td,
#corps table.navigation_modele tr.navigation_modele4 th
{
	width: 300px;
	border: 0;
	padding: 10;
	text-align: left;
}

#corps table.navigation_modele td.navigation_modele3
{
	width: 350px;
	border: 0;
	padding: 10px;
}

#corps table.navigation_modele td.navigation_modele1 img,
#corps table.navigation_modele td.navigation_modele2 img,
#corps table.navigation_modele td.navigation_modele3 img
{
	margin-right: 10px;
	border: 0;
}

table.chiffres
{
	font-size: 88%;
}

/* ---------------------------------------------------------- */
/* ENCADRÉ POUR L'AFFICHAGE DES RÉSULTATS DES CALCULS */

/* bloc à fond blanc encadré du même orangé que pour la classe .attention */
#resultats
{
	width: 636px;
	padding-right: 10px;
	padding-left: 10px;
	border: 3px solid #e06e52; /* orangé */
}

/* ---------------------------------------------------------- */
/* ENCADRÉ RÉSULTATS POUR LE COMPTEUR DE SIGNES */
#resultats_comptage table.compteur tr th
{
	border: 0;
}

/* STYLES POUR LA PAGE CALCULS */
div.calculs
{
	width: 600px;
	padding: 0 0 20px 15px; /* top right bottom left */
}

/* STYLES POUR LA PAGE DE RÉSULTATS DE VOLUME SOURCE */
#resultats_comptage
{
/*
	width: 636px;
*/
	padding: 10px;
	border: 3px solid #e06e52; /* orangé */
}
#resultats_comptage table
{
	border: 0;
	line-height: 1.5em;
}

#resultats_comptage table tr td.texte_a_compter
{

	width: 481px;

}

#resultats_comptage table tr td.texte_a_compter2
{

	width: 481px;

	text-align: right;
}

#resultats_comptage table tr td.longueur
{
	text-align: right;
	padding-left: 20px;
}