/*  ----------------------------------------------------------- */
/*                            taille typo                       */
/*  ----------------------------------------------------------- */
/* 
 * Base				100%
 * -------------------------------------
 * 20px				1.27em
 * 19px				1.21em
 * 18px				1.15em
 * 17px				1.09em
 * 16px				1.03em
 * 15px				0.96em
 * 14px				0.88em
 * 13px				0.82em
 * 12px				0.77em
 * 11px				0.71em
 * 10px				0.65em
 *  9px				0.59em
 * Attention : en dessous de 0.71em le texte devient illisible
 * en texte le plus petit sur Internet Explorer
 */

/* valeurs pour les margin et padding */
/* haute, droite, bas, gauche - sens horaire */
/* Exemple : margin: 15px 0px 15px 10px; */
/* Correspond à : */
/*	margin-top: 15px; */
/*	margin-right: 0px;  */
/*	margin-bottom: 15x; */
/*	margin-left: 10px; */
/* *******************************************  */

/*  Le site occupe la totalité de l'écran pour bien répéter le motif de fond */
html, body {
	width: 100%;
	height: 100%;
	text-align: center;
}
/* force le retour à la ligne, le plus souvent appliqué à <br> */
/* Utilisable sous la forme <div class="clear">&nbsp;</div> */
.clear {
	clear: both;
}
/* force un retour à la ligne, pour éviter un recouvrement des icônes 50x50 */
/* s'il n'y a pas suffisament de texte en descriptif */
/* Utilisable sous la forme <div class="clearright">&nbsp;</div> */
.clearright {
	clear: right;
}

/* force un retour à la ligne, pour éviter un recouvrement des icônes 50x50 */
/* s'il n'y a pas suffisament de texte en descriptif */
/* Utilisable sous la forme <div class="clearleft">&nbsp;</div> */
.clearleft {
	clear: left;
}
	
/* bien regler la marge (bugs IE) */
body {
	font-family: Verdana, Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.77em;
	color: #222222;
        margin: 0;
        padding: 0;
	background-color: #cfdc7d;
}
/* la puce intertitre */
h3.spip {
	text-align: left;
        /* marges haut droite bas gauche - a priori les margin et padding correspondants doivent être les mêmes */
        margin: 10px 0px 10px 25px;
        padding: 10px 0px 30px 35px;
	color: #333333;
	font-size: 110%;
	font-weight: bold;
	background: url(../images/puce_intertitre.gif) no-repeat left;
}
/* liens internes et externes */
a.spip_in { text-decoration: underline; color: #333333; } /* liens internes */
a.spip_out, a.spip_url, a.spip_glossaire { /* liens sortants */
	text-decoration: underline; color: #333333;
	background: url(../images/spip_out.gif) no-repeat right;
	padding-right: 15px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Aspect des liens */
a {
	color:#3e267f;
	text-decoration: none;
}
a:visited {
	color:#3e267f;
	text-decoration: none;
}
a:hover {
	color:#3e267f;
	text-decoration: underline;
}
a:active {
	color:#3e267f;
	text-decoration: none;
}

#page {
	width: 977px;
	padding: 0px;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	text-align: left;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Entête de la page d'accueil destinée à contenir la zone d'accessibilité */
#accessibilite {
        width: 977px;
	background-color: #cfdc7d;
	padding:0px;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	text-align: center;
}

.accessibilite {
	list-style-type: none;
	padding: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-size: 100%;
	text-align: center;
	color: #aaaaaa;
}
.accessibilite li {
	display: inline;
	text-decoration: none;
}
.accessibilite a {
        font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #999999;
	text-decoration: none;
}
.accessibilite a:visited {
	color: #999999;
	text-decoration: none;
}
.accessibilite a:hover {
	color: #666666;
	text-decoration: none;
}
.accessibilite a:active {
	color: #333333;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Zone de menu haute contient les coins ronds hauts */
#zonehaute {
        width: 977px;
        height: 35px;
        background-image: url(../images/zonehaute.jpg);
        background-repeat: no-repeat;
	padding: 0px 0px 0px 0px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
}

.zonehaute {
	text-align: right;
	margin: 0px 0px 0px 0px;
	padding: 0px 33px 0px 0px;
        font-weight: bold;
	color: #3e267f;
}

.zonehaute a:link {
  color: #3e267f;
  font-weight : bold;
  text-decoration: none;
}

.zonehaute a:visited {
  color: #3e267f;
  font-weight : bold;
  text-decoration: none;
}

.zonehaute a:hover {
  color: #ec6300;
  font-weight : bold;
  text-decoration: none;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Zone bannière haute */
#zonelogo{
        float: left;
       	width: 977px;
        height: 95px;
	text-align: left;
	padding:0px;
        margin: 0px 0px 0px 0px;
	background: #ffffff url(../images/bannierehaute.jpg) left top;
        background-repeat: no-repeat;
	color: #333333;
	border: 0px solid #0000ff;
}
/* faux lien de retour en page d'accueil */
.zonelogo {
        text-align: left;
        padding-top: 30px;
        font-size: 50px;
        list-style-type: none;
        list-style-image: none;
}

.zonelogo a:link {
  color: transparent;
  text-decoration: none;
}

.zonelogo a:visited {
  color: transparent;
  text-decoration: none;
}

.zonelogo a:hover {
  color: transparent;
  text-decoration: none;
}

.zonelogo a:active {
  color: transparent;
  text-decoration: none;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Blocs principaux de contenu */
/* Deux pages identiques superposées pour mettre en place deux colonnes */
/* fictives à droite et à gauche */
#pagedroite {
	text-align: left;
	width: 977px;
	padding: 0px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	background: #ffffff url(../images/repetedroite.gif) right top repeat-y;
}

#pagegauche {
	text-align: left;
	width: 977px;
	padding: 0px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	background: url(../images/repetegauche.gif) left top repeat-y;
}

/* Zone de recherche */
#zonerecherche{
       	width: 190px;
	text-align: center;
	padding:0px;
        margin: 0px 0px 0px 0px;
	color: #333333;
	border: 0px solid #0000ff;
	border-left: 0px solid #ff0000;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 	*/
/* Style recherche, cette div est utilisé pour la recherche */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 	*/
#recherche {
	text-align: center;
	padding: 0px;
	margin: 10px 0px 0px 0px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Zone imprime et plan du site */
/* voir aussi les feuilles de style alternatives */
#zoneimprimeplan {
        float: right;
        width: 969px;
/* Largeur plus faible pour faire apparaître le motif droit qui se répète */
        padding: 0px 0px 0px 0px;
/* marge à droite pour faire apparaître le motif droit qui se répète */
	margin: 0px 4px 0px 0px;
        height: 2em;
        line-height: 1.5em;
       	border: 0px solid #ff0000;
       	background-color: #e4ecbc;
}
.zoneimprimeplan {
        width: 960px;
        text-align: right;
        margin: 0px
        padding: 0px;
	color: #000000;
}
/* Aspect des liens */
.zoneimprimeplan a {
	color: #333333;
	text-decoration: none;
}
.zoneimprimeplan a:visited {
	color: #333333;
}
.zoneimprimeplan a:hover {
	color: #162983;
	text-decoration: underline;
}
.zoneimprimeplan a:active {
	color: #aaaaaa;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*Chemin de progression */
#progression {
        text-align: right;
	line-height: 1.3em;
	padding-right: 20px;
	margin: 0px;
}

/* Les intitulés du chemin de progression sont présentés sous forme de liste */
.progression {
	list-style-type: none;
	padding:0px;
	font-size: 90%;
}
.progression li {
	display: inline;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Zone a gauche de l'écran */
/* Voir aussi les feuilles de styles alternatives */
#gauche {
	float: left;
	padding: 0px;
	width: 210px;
	height: 680px;
	margin-left: 4px;
	margin-right: 0px;
        background-color: #ffffff;
/* ************************************************ */
/* Il est possible de placer une image de fond */
        background : #ffffff url(../images/gauchefond.gif) no-repeat;
/* ************************************************ */
	border: 0px solid #00ff00;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.separateurgris {
        height: 30px;
        background :  url(../images/gauchepointillegris.gif) no-repeat;
        background-position: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Conteneur centre et droit de la page */
/* div uniquement de façon à ce que le lien d'évitement "contenu" pointe dessus */
#central {
}

#contenucentral {
        margin-top: 5px;
	margin-left: 220px;
	margin-right: 220px;
	margin-bottom: 0px;
	padding: 0px 0px 0px 0px;
	background-color: #ffffff;
/* zoom:1.0 est reconnue par IE, elle permet de régler les problème des disparitions/
/* fantômes de texte */
	zoom: 1.0;
/* border indispensable sinon bug avec Firefox */
	border: 1px solid #ffffff;
}
/* Style pour le texte d'un article */
/* texte doit être une div pour utiliser le javascript de taille des caractères */
#texte {
        background-color: #ffffff;
	text-align: left;
	zoom: 1.0;
}

h2.actus {
  	font-size: 1.1em;
	line-height: 1.3em;
        padding: 0px 0px 0px 0px;
}

.actus {
       margin: 3px 0px 3px 35px;
/* mise en place d'un contexte de formatage pour éviter que le clear left */
/* pousse la suite sous le float left du cadre gauche avec firefox */
/* voir http://www.blog-and-blues.org/articles/Float,_clear_et_contextes_de_formatage */
       overflow: auto;
}

span.vignette {
       float: left;
       padding: 0px 5px 0px 0px;
}
/* styles pour les documents joints */
table.docjoints {
  border: none;
  margin: 25px 10px 20px 10px;
}

table.docjoints td {
  border: none;
  padding: 0px 25px 20px 0px;
  width: 150px;
  text-align: center;
  vertical-align: top;
}

table.docjoints p {
  font-size: 11px;
  margin: 0;
}

table.docjoints p.titredoc {
  font-weight: bold;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Dans la partie centrale encart pour les brèves */
#encartcentre {
	text-align: left;
        margin: 10px 0px 0px 0px;
	padding: 0px;
	background-color: #e4ecbb;
	border: 0px solid #ff0000;
/* mise en place d'un contexte de formatage pour éviter que le clear left */
/* pousse la suite sous le float right du cadre droit avec firefox */
/* voir http://www.blog-and-blues.org/articles/Float,_clear_et_contextes_de_formatage */
	overflow: auto;
}

.encartcentre {
  	margin-top: 5px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
/* marge intérieure dans le bloc */
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	border-top: 0px solid #cfdc7d;
	border-right: 0px solid #c7c7c7;
	border-bottom: 2px solid #cfdc7d;
	border-left: 0px solid #c7c7c7;
}

.titreencartcentre {
        color: #007c41;
        font-weight: bold;
        margin: 0px;
        padding:5px 0px 10px 5px;
        background :  url(../images/droite_sousletitre.gif) left bottom no-repeat;
}

/* aspect des liens avec puces courtes */
.encartcentre li {
	font-size: 100%;
	font-weight: bold;
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
/* La marge bottom permet de laisser un espace après chaque intitulé de liste */
	margin-bottom: 10px;
	list-style-image:  url(../images/droite_pucetitre.gif);
/* La puce est fixée à l'intérieur - sinon Firefox la place à l'extérieur */
	list-style-position: inside;
}
/* Aspect des liens du menu droit */
.encartcentre a {
	color: #000000;
	text-decoration: none;
}
.encartcentre a:visited {
	color: #000000;
}
.encartcentre a:hover {
	color: #162983;
	text-decoration: underline;
}
.encartcentre a:active {
	color: #aaaaaa;
}

.centreseparateur {
        height: 5px;
        background :  url(../images/centreseparateur.gif) no-repeat;
        background-position: center;

}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* styles pour les rubriques */
div.titrerubrique {
  margin: 0px 0 5px 0;
}

p.descriptifrubrique {
  font-style: italic;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* styles pour les rubriques et articles */
div.resume {
  margin: 15px 0px 0px 0px;
}

div.resume h3 {
  margin: 0;
}

div.resume p.soustitre {
  margin: 0;
}

div.resume p {
  margin: 2px 0 3px 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* styles pour les articles */

span.logo {
  float: left;
  padding: 0px 5px 0px 4px;
}

p.surtitre {
  font-weight: bold;
  margin: 0 0 -5px 0;
  padding-top: 10px;
}

div.titrearticle {
  margin: 0px 0 5px 0;
}

p.soustitre {
  font-weight: bold;
  margin: 4px 0 0 0;
}

p.chapeau {
  margin: 0px 0px 15px 0px;
  font-style: italic;
}

p.lirelasuite {
  text-align: left;
  background-repeat: no-repeat;
  background-position: center left;
  height: 1em;
  margin: 0;
  padding: 0px 0 5px 25px;
}

div.separateur {
  background :  url(../images/degraderub.gif) no-repeat;
  background-position: center;
  height: 3px;
}

div.separateurart {
  border-bottom: 2px dotted #9fab59;
  height: 2px;
  width: 98%;
  margin: 0px auto 0px auto;
}

div.notes {
  margin: 2px 0px 5px 0px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Zone à droite de l'écran */
/* Voir aussi les feuilles de styles alternatives */
#droite {
	float: right;
	margin-left: 5px;
	margin-right: 4px;
	padding: 0px 0px 0px 0px;
	width: 210px;
        height: 680px;
	background-color: #ffffff;
/* ************************************************ */
/* Il est possible de placer une image de fond */
        background : url(../images/droitefond.gif) top right no-repeat;
/* ************************************************ */
	border: 0px solid #ff0000;
}
/* La partie droite est placée dans la zone droite */
.partiedroite {
  	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
        padding:0px 0px 0px 0px;
	border: 2px dotted #cfdc7d;
	color: #333333;
}

.titrepartiedroite {
        color: #007c41;
        font-weight: bold;
        margin: 0px;
        padding:15px 0px 10px 5px;
        background :  url(../images/droite_sousletitre.gif) right bottom no-repeat;
}

/* aspect des liens sur titre partie droite */
.titrepartiedroite a:link {
	color: #007c41;
	font-weight: bold;
}
.titrepartiedroite a:visited {
	color: #007c41;
	font-weight: bold;
	text-decoration: none;
}
.titrepartiedroite a:hover {
	color: #007c41;
	font-weight: bold;
        text-decoration: underline;
}
.titrepartiedroite a:active {
	color: #333333;
	font-weight: bold;
	text-decoration: underline;
}


/* aspect des liens avec puces */
.partiedroite li {
  	color: #3e267f;
        font-weight: bold;
        padding: 0px 2px 2px 4px;
/* La marge bottom permet de laisser un espace après chaque intitulé de liste */
	margin: 0px 0px 0px 2px;
	list-style-image:  url(../images/droite_pucetitre.gif);
/* La puce est fixée à l'intérieur - sinon Firefox la place à l'extérieur */
	list-style-position: inside;
}

.partiedroite a {
  	color: #3e267f;
        font-weight: bold;
}

.textedroite {
        color: #333333;
        padding: 0px 5px 0px 5px;
        font-weight: normal;
}

.lirelasuite {
        text-align: right;
        padding: 0px 5px 0px 0px;
}


.droiteseparateur {
        height: 1px;
        background :  url(../images/droiteseparateur.gif) no-repeat;
        background-position: center;
        
}


/* Zone basse contient les coins ronds bas */
#zonebasse {
        width: 977px;
        height: 28px;
        background-image: url(../images/zonebasse.gif);
        background-repeat: no-repeat;
	padding: 0px 0px 0px 0px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	border: 0px solid #ff0000;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Zone pied de page contient les articles de service */
#pieddepage {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	background-color: #cfdc7d;
	color: #333333;
}

/* Les intitulés en pied de page sont présentés sous forme de liste */
.pieddepage {
	list-style-type: none;
	padding:0px;
	font-size: 85%;
}

/* Les intitulés du pied de page sont présentés sous forme de liste */
.pieddepage {
	text-align: center;
	font-size: 90%;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
.pieddepage li {
	display: inline;
}
/* aspect des liens du pied de page */
.pieddepage a {
	color: #333333;
	font-weight: normal;
	text-decoration: none;
}
.pieddepage a:visited {
	color: #333333;
	text-decoration: none;
}
.pieddepage a:hover {
	color: #aaaaaa;
	text-decoration: none;
}
.pieddepage a:active {
	color: #333333;
	text-decoration: underline;
}

/*** Fin styles pour le pied de page ***/

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Styles des paragraphes */
h1, h2, h3, h4 {
	font-weight: bold;
	color: #3e267f;
	margin: 10px 10px 0px 10px;
}
h1 {
	font-size: 1.4em;
	line-height: 1.6em;
}
h2 {
	font-size: 1.3em;
	line-height: 1.4em;
}
h3 {
	font-size: 1.1em;
        padding: 1em 1em 0em 1em;
}
}
h4 {
	font-size: 0.96em;
}