* { margin: 0; padding: 0; outline: inherit; }
HTML, BODY { height: 100%; }
BODY { background: #F2F2F2; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333; }
IMG { border: none; }

/*--- Conteneur centré du site ---*/
#centre { width: 992px; position: relative; margin: 0 0 0 -496px; left: 50%; background: url(../pics/charte/bg-contenu.jpg) top left repeat-y; }

/*--- En-tête ---*/
.header { height: 160px; padding: 0 16px 0 16px; }
#header1 { background: url(../pics/charte/bg-header1.jpg) top left no-repeat; }
#header3 { background: url(../pics/charte/bg-header3.jpg) top left no-repeat; }

.header UL#navHeader { float: right; list-style: none; }
.header UL#navHeader LI { float: left;  padding: 25px 0 0 0; background: url(../pics/charte/bg-li-navHeader.gif) top center no-repeat; }
.header UL#navHeader LI A { color: #666; text-decoration: none; font-weight: bold; padding: 0 8px 0 11px; }

.header FORM#connexion { float: right; clear: right; margin-top: 68px; width:250px; }
.header FORM#connexion p { height:25px; }
.header FORM#connexion LABEL { display: block; clear:both; float: left; width: 108px; color: #666; text-align:right; padding-right:8px; line-height:16px; }
.header FORM#connexion INPUT { padding: 1px; font-size: 11px; background: #E9E9CF; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #D6D6D6; border-bottom: 1px solid #D6D6D6; color: #333; width:95px; height:12px; float:left; }
.header FORM#connexion INPUT.bouton { background: #CCC; border-top: 1px solid #D6D6D6; border-left: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; padding: 0 2px 0 2px !important; cursor: pointer; width:30px; height:16px; float:right; }

/*--- Menu ---*/
#menu { clear: both; padding: 0 16px 0 16px; list-style: none; }
#menu LI { float: left; }
#menu LI A { display: block; width: 155px; float: left; background: url(../pics/charte/bg-menu-a.gif) repeat-x; font-size: 13px; font-weight: bold; text-decoration: none; color: #FFF; text-align: center; line-height: 14px; margin-right: 3px; }
HTML>BODY>#centre>#menu>LI A { margin-right: 6px; }
#menu LI A:hover, #menu LI A.active { background: url(../pics/charte/bg-menu-a-hover.gif) repeat-x; }

#menu LI A#item1 { padding: 10px 0 0 0; height: 24px; }
#menu LI A#item2 { padding: 10px 0 0 0; height: 24px; }
#menu LI A#item4:hover, #menu LI A#item4.active { background: url(../pics/charte/bg-menu-a-orange.gif) repeat-x; }
#menu LI A#item3 { padding: 10px 0 0 0; height: 24px; }
#menu LI A#item4 { padding: 10px 0 0 0; height: 24px; }
#menu LI A#item2:hover, #menu LI A#item2.active { background: url(../pics/charte/bg-menu-a-vert.gif) repeat-x; }
#menu LI A#item5 { padding: 10px 0 0 0; height: 24px; }
#menu LI A#item6 { padding: 10px 0 0 0; height: 24px; margin-right: 0px !important; }
#menu LI A#item6:hover, #menu LI A#item6.active { background: url(../pics/charte/bg-menu-a-vert.gif) repeat-x !important; }

/*--- Contenu ---*/
#contenu { padding: 0 16px 20px 16px; float: left; height: 500px; }
HTML>BODY>#centre #contenu { min-height: 500px; height: auto; }

/*--- Colonne de gauche ---*/
#colG { width: 230px; height: 100%; padding-top: 26px; float: left; }
.double #colG { width:345px; padding:40px 30px 0 35px; }

/*--- Colonne de droite ---*/
#colD { width: 200px; height: 100%; padding-top: 34px; float: right; }
.double #colD { width:500px; padding:12px 20px 0 30px; }

/*--- Article ---*/
#article { height: 357px; float: left; width: 488px; margin: 34px 20px 0 20px; padding: 0 16px 20px 16px; }
HTML>BODY>#centre>#contenu #article { min-height: 377px; height: auto; }

#article P, #colG P, #colD P             { line-height: 16px; margin: 0 0 15px 0; text-align:justify; }
#article H2, #colG H2, #colD H2          { font-size: 17px; color: #C0164E; margin: 0 0 15px 0; }
#article UL, #colG UL, #colD UL          { margin: 10px 0 20px 25px; }
#article UL                              { text-align:justify; }
#article UL LI, #colG UL LI, #colD UL LI { line-height: 16px; margin: 0 0 5px 0; } 
#article A, #colG A, #colD A             { text-decoration: underline; color: #333; }

/* Encart gris */
.gris    { background:url(../pics/charte/bg-gris.jpg) bottom right no-repeat #F5F5F5; margin-bottom:30px; padding-bottom:10px; }
.gris H2 { background:url(../pics/charte/bg-gris-head.jpg) top right no-repeat #F5F5F5; padding:11px 0 0 11px; }
.gris P  { padding:0 44px 0 11px; }
.gris UL { clear:both; list-style:none; }
.gris TABLE { width:430px; }

/* Sous menus */
/* rouge */
DIV.rouge { margin-bottom: 25px; }
DIV.rouge H2 { height: 23px; background: url(../pics/charte/bg-h2-encart-rouge.jpg) top left repeat-x; font-weight: bold; color: #FFF!important; font-size: 12px!important; padding: 8px 10px 0 10px; margin:0!important; }
DIV.rouge UL { list-style: none; margin:0!important; }
DIV.rouge LI { background: #D9D9D9; margin:0!important; }
DIV.rouge UL LI A { display: block; color: #666!important; background: #D9D9D9; margin: 4px 0 0 0; padding: 8px 20px 8px 10px; text-decoration: none!important; }
DIV.rouge UL LI A:hover, DIV.rouge UL LI A.active { color: #C0164E!important; background: #D9D9D9 url(../pics/charte/bg-a-hover-encart-rouge.gif) center right no-repeat; }

/* orange */
DIV.orange { margin-bottom: 25px; }
DIV.orange H2 { height: 23px; background: url(../pics/charte/bg-h2-encart-orange.jpg) top left repeat-x; font-weight: bold; color: #FFF!important; font-size: 12px!important; padding: 8px 10px 0 10px; margin:0!important; }
DIV.orange UL { list-style: none; margin:0!important; }
DIV.orange LI { background: #D9D9D9; margin:0!important; }
DIV.orange UL LI A { display: block; color: #666!important; background: #D9D9D9; margin: 4px 0 0 0; padding: 8px 20px 8px 10px; text-decoration: none!important; }
DIV.orange UL LI A:hover, DIV.orange UL LI A.active { color: #FF6600!important; background: #D9D9D9 url(../pics/charte/bg-a-hover-encart-orange.gif) center right no-repeat; }

/* vert */
DIV.vert { margin-bottom: 25px; }
DIV.vert H2 { height: 23px; background: url(../pics/charte/bg-h2-encart-vert.jpg) top left repeat-x; font-weight: bold; color: #FFF!important; font-size: 12px!important; padding: 8px 10px 0 10px; margin:0!important; }
DIV.vert UL { list-style: none; margin:0!important; }
DIV.vert LI { background: #D9D9D9; margin:0!important; }
DIV.vert UL LI A { display: block; color: #666!important; background: #D9D9D9; margin: 4px 0 0 0; padding: 8px 20px 8px 10px; text-decoration: none!important; }
DIV.vert UL LI A:hover, DIV.vert UL LI A.active { color: #A2AF0A!important; background: #D9D9D9 url(../pics/charte/bg-a-hover-encart-vert.gif) center right no-repeat; }

/* Tableaux avec fleches */
TABLE.upEnquetes { margin: 0 0 0 30px; }
TABLE.upEnquetes TR { }
TABLE.upEnquetes TD { padding-bottom:15px; vertical-align: top !important; }
TABLE.upEnquetes TD A { text-decoration: none; color: #333; vertical-align: top !important; }
TABLE.upEnquetes TD A:hover { text-decoration: underline; }
TABLE.upEnquetes TD.entete { vertical-align: top; width: 105px; background: url(../pics/charte/bg-td-entete-table-up.gif) top left no-repeat; padding-left: 10px; }

/* Listes avec flèches */
UL.fleche       { list-style:none; margin-left:0!important; }
UL.fleche LI    { padding: 0 0 8px 10px; vertical-align: top !important; }
.puce_orange LI { background: url(../pics/charte/bg-liste-orange.gif) top left no-repeat; }
.puce_verte  LI { background: url(../pics/charte/bg-liste-verte.gif) top left no-repeat; }
.puce_rose LI   { background: url(../pics/charte/bg-liste-rose.gif) top left no-repeat; }

/*--- Footer ---*/
#footer { clear: both; background: #F2F2F2 url(../pics/charte/bg-footer.jpg) top left no-repeat; height: 1px; padding: 17px 0 30px 20px; }
#footer LI { display: inline; }
#footer LI A { font-weight: bold; color: #C0164E; text-decoration: none; }

/*--- Divers ---*/
.spacer { clear: both; }
.center { text-align: center !important; }
.droite { text-align: right !important; }
.left   { float: left; }
.right  { float:right; }
.plus   { text-decoration:underline; display:block; margin:5px 0 0 245px; }
.illu   { float:left; background:url(../pics/charte/bg-img.jpg) top left no-repeat; width:154px; height:94px; padding:4px 0 0 4px; margin-right:14px!important; }

/*--- Formulaires ---*/
.formulaire * { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333; }
.formulaire LABEL.legende { display: block; float: left; width: 180px; }
.formulaire INPUT { background: #FFF; border-top: 1px solid #999; border-left: 1px solid #999; border-bottom: 1px solid #D8D8D8; border-right: 1px solid #D8D8D8; padding: 1px; width: 359px; }
.formulaire INPUT.chk { width: 12px; vertical-align: middle; border: none !important; background: none !important; }
.formulaire INPUT.boutonRouge { width: auto !important; padding: 2px 25px 2px 25px !important; background: #FFF /*url(../pics/charte/bg-bouton-rouge.gif) center right no-repeat*/; cursor: pointer; border-bottom: 1px solid #999; border-right: 1px solid #999; border-top: 1px solid #D8D8D8; border-left: 1px solid #D8D8D8; }
.formulaire TEXTAREA { padding: 1px; height: 200px !important; width: 540px !important; border-top: 1px solid #999; border-left: 1px solid #999; border-bottom: 1px solid #D8D8D8; border-right: 1px solid #D8D8D8; overflow: auto; }
.formulaire SELECT { border-top: 1px solid #999; border-left: 1px solid #999; border-bottom: 1px solid #D8D8D8; border-right: 1px solid #D8D8D8; padding: 1px; width: 300px; }
.formulaire INPUT.bouton { border-color: #D8D8D8 #999 #999 #D8D8D8 !important; cursor: pointer; }

P.alert { font-weight: bold; color: #D91955; }