/*
	Style Sheet pour le site Web de St-Germain Express
	info@solutions-zen.com
*/
* {margin:0;padding:0;}
html {
  position: relative;
  height : 100.1%;
  margin:0; padding:0;
  overflow-y: scroll; /* pour chrome */
} /* pour Opera qui met les marges dans le tag HTML */
body {
   position : relative;
   font : 16px "Trebuchet MS", Helvetica, "DejaVu Sans", sans-serif; /* tahoma,helvetica,"DejaVu Sans",sans-serif;	 */
   text-align:left;
   height : 100.1%;
   margin-bottom : 1px;
   color : #000000;
   background-color:#ffffff;
   z-index : 1;
}
input, select, button, textarea	{
	font : 12px tahoma,helvetica,"DejaVu Sans",sans-serif;
	padding : 2px;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, code {
    position : relative;
    display: block;
    margin:0px;
    padding: 0px;
    margin: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}

code {
   font : 11px 'Courier New',Courier,monospace;
   padding : 8px;
   border: 1px solid #226600;
   text-align : left;
   background : #eeffdd url(images/textarea_zen.png) no-repeat bottom right;
}
/*.datepick {position:relative;}*/

/* ****************************  Formatage du texte  ***********************************/

h1 {
   position : relative;
   display : block;
   text-shadow: 2px 2px 6px rgba(1,1,1,0.6);
   font-size : 36px;/* tahoma,helvetica,"DejaVu Sans",sans-serif;*/
   margin: 0px 0px 10px 0px;
   padding : 0px;
   color : #000000;
   font-weight:bold;
}

h2 {
   position : relative;
   display : block;
   font-size : 30px;/* tahoma,helvetica,"DejaVu Sans",sans-serif;*/
   margin: 6px 0px 8px 0px;
   padding : 0px;
   color : #98c85b;
   font-weight:bold;
}

h3 {
   position : relative;
   display : block;
   font-size : 24px;/* tahoma,helvetica,"DejaVu Sans",sans-serif;*/
   margin: 6px 0px 8px 0px;
   padding : 0px 5px;
   font-weight:bold;
   color : #ffffff;
   background-color : #98c85b;
}

h4 {
   position : relative;
   display : block;
   font-size : 20px;/* tahoma,helvetica,"DejaVu Sans",sans-serif;*/
   margin: 3px 0px 7px 0px;
   padding : 0px;
   color : #776FBB;
   font-weight:bold;
}

p {
	margin : 0px;
	/*text-align : left;	*/
}

/* ----*--*-*-*-*-*-*-*-*-*-- classes de tables -*-*-*-*-*-*-*-*-**---- */

table {   /* équivalent à "cellspacing 0 et padding 0"*/
    position:relative;
    border-collapse: collapse;
    margin : 4px;
    /*test : 1.0em pour tables imbriquées... */
    font : 1.0em Arial, Helvetica, "DejaVu Sans", sans-serif;/*14px "Times New Roman",Times,"Century Schoolbook L",serif;/**/
    text-align : left;
}
tr {position:relative;}
td,th {
   position:relative;
   padding: 4px;
   vertical-align : top;
}
.table_bordures {
    border : 2px solid #333333;
}
.table_bordures th {
   border : 1px solid #777777;
   background : transparent url(images/bg_vert.png) repeat 0 0;
}
.table_bordures td {
   border : 1px solid #777777;
}

.table_point {
    border : 1px dotted #333333;
    color : #333333;
}
.table_point th {
   border : 1px dotted #555555;
   background : transparent url(images/bg_lu.png) repeat 0 0;
}
.table_point td {
   border : 1px dotted #aaaaaa;
}
/* --- fin des classes de tables */
ul {
   margin:  6px 0px 6px 18px;
   /*list-style-type : square;*/
   padding: 0px;
}
ul ul, ol ul {
   margin:  6px 0px 6px 12px;
   list-style-type : circle;
   padding: 0px;
}
ol {
   margin:  6px 0px 6px 14px;
   padding: 0px;
}

li {
   margin : 0 0 6px 20px;
   padding: 0px;
}

/* ****************** Classes offertes dans sélecteur de classe, lors de l'édition ************************ */

.captcha {
    margin : 8px;
    width: 175px;
    height : 45px;
}

.replinks {
    position : relative;
    margin: 20px 4px 3px;
    padding: 4px;
    font-size:0.9em;
    background-color:#fff;
}
.replinks a {
    text-decoration : none;
}
.zen_light {
   background-color : #f3f783;
   color : #552222;
   padding : 0px 1px;
   text-decoration:underline;
}
.zenbox {
   position : relative;
   padding:6px;
   margin:5px;
}
.avertissement {
   background : #F9EBE5 url(images/Icone_avertissement.gif) no-repeat 2px 2px;
   position : relative;
   color: #000000;
   border : 2px solid #C24201;
   font-weight: bold;
   padding:12px 12px 15px 60px;
   margin:4px 16px;
}
.note {
   background : transparent url(images/bg_note.png) repeat 0 0;
   position : relative;
   /*height: 100%;*/
   color: #375610;
   border : 2px solid #375610;
   font-weight: normal;
   padding:4px;
   margin:4px;
}
.question {
   background : #E7E6F4 url(images/Icone_question.gif) no-repeat 2px 2px;;
   position : relative;
   color: #2b4c9b;
   border : 2px solid #776FBB;

   padding:12px 12px 15px 60px;
   margin:4px 16px;
}

.petit {
 /* font : 11px tahoma,helvetica,"DejaVu Sans",sans-serif;*/
 font-size:12px;
}

.gros {
    font-size : 16px;
    /*font-weight : bold;*/
}
.pmaj {
    font-variant : small-caps;
}
.zencentre {
    text-align:center;
}

.gris {
    color : #555555;
}


/* ******************************  classes pré-définies   *************************/
#nom_utilisateur {
  display:block;
  position : absolute;
  top:113px;
  left:25px;
  z-index:225;
  padding: 3px 12px;
  border: 1px solid #000000;
  background : transparent url(images/bg_trans.png) repeat 0 0;
}

#registre_conteneur { /* si trop long un jour, fixer hauteur et mettre dans jscrollpane*/
    position : absolute;
    top : 300px;
    right:10px;
    width:300px;
    padding:4px;
    color:#ffffff;
    height:auto;
    display:none;
    background : transparent url(images/bg_note_vert.png) repeat 0 0;
    z-index:101;
}
#registre_conteneur h4 { font-size:16px; color:#ffffff; }
.registre {
   position :relative;
   background : transparent url(images/bg_trans.png) repeat 0 0;
   color:#000000;
   font : 10px tahoma,helvetica,"DejaVu Sans",sans-serif;
   margin : 2px;
   padding: 3px;
}
#registre_timer {
   position :relative;
   margin : 3px 0px;
   padding:0px;
   height:6px;
   clear:both;
}
#imprimante {
   position:absolute;
   left:420px;
   top: 6px;
   width:24px;
   height:24px;
   overflow:visible;
   z-index:150;
   background : transparent url(images/Bouton_imprimante.gif) no-repeat 0 0;
   cursor:pointer;
}
.clearing {
   position : relative;
   clear : both;
   height:1px;
   line-height:1px;
   font-size : 1px;
   background-color : transparent;
   margin:0px; padding:0px; border:none;
}
.zenmodpatch { /* permet de sélectionner première ligne dans édition simple..*/
   position : relative;
   height:1px;
   line-height:1px;
   font-size : 1px;
   background-color : transparent;
   margin:0px; padding:0px;
   border:none;
}

.transparent {
   position : relative;
   /*height: 100%;*/
   background : transparent url(images/bg_trans.png) repeat 0 0;
   padding:4px;
   margin:0px;
}
.img_gauche {
   float : left;
   position : relative;
   margin :  4px 16px 10px 0px;
   z-index : 11;
}

.img_droite {
   float : right;
   position : relative;
   margin :  4px 0px 10px 16px;
   z-index : 11;
}
.flotte_gauche {
   float : left;
   margin :  0px 8px 10px 0px;
}
.flotte_droite {
   float : right;
   margin :  0px 0px 10px 8px;
}



/* ******************************  les LIENS   ************************************/
/* attention, dans un thème où ça serait foncé,
il faut peut-être diviser les « a » des « .ui-widget-content a »... ou redéfinir dans les thèmes lorsqu'il y en aura...'
si seulement #contenu_pages .ui-widget-content, des contrôles pourraient être défectueurs... séparer pour onglets, vonglets et accordéons...
*/
a {font-weight : normal; color:#003988;}
a:link, .onglets .ui-widget-content a:link, .vonglets .ui-widget-content a:link, .accordeon .ui-widget-content a:link
{color:#003988;}
a:visited, .onglets .ui-widget-content a:visited, .vonglets .ui-widget-content a:visited, .accordeon .ui-widget-content a:visited
{color:#003968;}
a:hover, .onglets .ui-widget-content a:hover, .vonglets .ui-widget-content a:hover, .accordeon .ui-widget-content a:hover
{color:#604030;}
a:active {color:#aa4e0f; }

/* *****************************  Formatage des images   *********************************/

img {
    margin : 0px;
    padding : 0px;
    border : none;
}

/* *********************************************************** */
.fond_site {
   /*display:none; /* sera caché avant l'animation'*/
   z-index : 1;
   position : absolute;
   top : 0px;
   left : -614px;
   height : 1000px;
   width  : 1827px;
}

#complet {
    position:relative;
   color : #000000;
    width : 980px;
   overflow : visible;
    margin-right:auto;
    margin-left:auto;
    margin-top:0px;
    margin-bottom : 0px;
    padding:0px;
    text-align : left;
   z-index : 0; /* DOIT être à 0 pour que l'effet "explode" fonctionne.. */
}

/* ******************************************************************************* */
/*                               ENTETE                                            */
/* ******************************************************************************* */



#entete {
   color : #000000;
   background : transparent url(images/entete.png) no-repeat 0 0;
   position : absolute;
   top:0; left:0;
   width:100%;
   padding: 0px;
   margin : 0px;
   height :  207px;
   z-index : 45;
}
#logo_entete {
    position:absolute;
    left:10px; top:10px;
    width:251; height:81px;
    z-index : 15;
    cursor:pointer;
}
#menu_entete {
    position:absolute;    
    left:540px; top:66px;
    width:200px; height:25px;
    z-index : 15;
    text-align:right;
}
#menu_entete a { color:#000000; text-decoration:none;}
#menu_entete a:hover {color:#ffffff;}
#drapeau_langue {
    position:absolute;
    left:760px; top:66px;
    width:25px; height:25px;
    z-index : 15;
}
#drapeau_langue img { margin:0px; cursor:pointer;}
#coast2coast {
    position:absolute;
    left:810px; top:36px;
    width:168; height:140px;
    z-index : 15;
}
#zen_partage {
    position:absolute;
    top : 150px;
    left: 145px;
    z-index:50;
    height:10px;
    width:400px;
}
#zen_tweet {
    position:absolute;
    z-index:50;
    top:3px;
    left:188px;
    width:130px;
    height:30px;
    overflow:hidden;
}
#zen_fblike {
    position:absolute;
    z-index:50;
    top:4px;
    left:86px;
    overflow:hidden;
    width:90px;
    height:25px;
}
#zen_gplusone {
    position:absolute;
    z-index:50;
    top:4px;
    left:296px;
    overflow:hidden;
    width:80px;
    height:28px;
}

#lien_bookmark {
    background : transparent url(images/Bouton_favori.png) no-repeat 0 0;
    position : absolute;
    top:2px;
    left:0px;
    width:25px;
    height:25px;
    cursor:pointer; z-index:100; text-indent: -9999px; font-size:6px; outline:none; overflow:hidden;
}

#lmglobal {
    position : absolute;
    top:8px;
    left:510px;
    width:340px;
    height:17px;
    text-align:right;
    font-size: 10px;
    color : #779966;
}
/* ******************************************************************************* */
/*                                    MENU                                         */
/* ******************************************************************************* */
#menu li.contenu_section {
    position : relative;
    /*padding : 6px;*/
    font-size:12px;
    color : #000000;
    border-bottom : none;
}
#menu li.contenu_section a { /* reset . . .*/
    color : #003988;
    text-decoration:underline;
    display : inline;
    padding : 0px;
}
#menu li.contenu_section a:hover {
    color : #336622;
}
#menu .contenu_section li {
    border-bottom : none;
}
div.conteneur_section {
    position : relative;
    padding : 0px;
    color : #000000;
    font-size:12px;
    font-family: tahoma,helvetica,"DejaVu Sans",sans-serif;
}

.menu_hover {
    background-color:#776FBB;
}

#menu {
  position : relative;
  /*font-size:14px;*/
  text-align : right;
  z-index:10;
    /*
  position: absolute;
  top: 0;
  right: 0;
  */
}

#menu, #menu ol {
  position : relative;
  padding: 0;
  margin: 0;
  list-style:  none;
}

#menu li {
  /*float: left;*/
  position : relative;
  margin:0px;
  
}
#menu li.menu_exception {
    border:none;
    margin-top:1.2em;
    margin-bottom:0.4em;
    font-weight:bold;
    text-align:center;
    font-size:1.4em;
    color:#407F10;
    text-shadow: 1px 2px 4px rgba(20,30,10,0.5);
}

#menu a { /* les liens vers les pages */
  color : #000000;
  display: block;
  padding: 0.6em 20px 0.4em 8px;
  text-decoration : none;
  outline : none; /* ouain... moins pire à l'oeil mais moins utile au clavier.. */
}
/*#menu a:hover {
    outline : none;
}*/
#menu .fantome a {
    color:#bb9;
}
.reservee {
    background-repeat: no-repeat;
    background-position : 0 0;
}
.r1 { background-image : url(images/bg_r1.png); }
.r2 { background-image : url(images/bg_r2.png); }
.r3 { background-image : url(images/bg_r3.png); }
.r4 { background-image : url(images/bg_r4.png); }
.r5 { background-image : url(images/bg_r5.png); }
.r5 a {font-weight:bold;}
#menu b { /* les liens vers les sous-menus */
  display: block;
  padding: 0.6em 20px 0.4em 8px;
  background : transparent url(images/Menu_triangle.gif) no-repeat 98% 55%; /*225px 7px;*/
}
#menu li ol {
  display:none;
  position: absolute;
  /*left: -999em;*/
  top:-5px;
  left:176px;
  width: 260px;
  padding : 4px 2px 2px 4px;
  text-align : left;
  font-size : 12px;
  z-index:150;
  /*background: #ccbbaa;
  border:2px solid #444444;  */
}
.smol {
    border: 1px solid #aabb77;

}

/*#menu li ol li{ float:left; width: 200px;}*/

/*
#menu li:hover ul, #menu li ul:hover {
  left:auto;
}*/

/* ******************************************************************************* */
/*                               CONTENU                                           */
/* ******************************************************************************* */
.contenant_acc { /* pour les accordéons du layout */
   background-color : transparent;
   clear:both;
   position:relative;
   height:100%;
   margin:0px 6px 0px 0px;
   padding : 3px 0px 8px 6px;
   z-index : 10;
}
.accordeon {
    position : relative;
    clear : both;
    margin : 0px;
    z-index:10;
}
.accordeon .h3_acc {
    padding : 4px 30px;
    text-shadow : none;
    text-align:left;
}

/* transformations pour impression . . . */
.accordeon .h3_acc_ptr {
    clear:both;
    font-size:1.1em;
    padding : 3px 2px;
    margin-top:5px;
}
.titre_onglet {
    clear:both;
    font-size:1.2em;
    padding : 3px 2px;
    margin-top:8px;
}


.onglets {
   position : relative;
   clear : both;
   margin : 26px 8px 10px 8px;
   z-index:10;
}



#ensemble_forms_admin {
   position : absolute;
   top : 0px;
   left : 0px;
   z-index : 2000;
   display:none; /* ça marche ?? ) */
}

#section_gauche {
  /* background-color : #896d50;
   color : #000000;*/
   position : relative;
   z-index : 25;
   width: 182px;
   float : left;
   margin : 0px 0px 16px 0px;
   padding : 200px 5px 16px 5px;
   /*font-family: tahoma,helvetica,"DejaVu Sans",sans-serif;*/
}
#camion_menu {
    position:relative;
    height:280px;
    z-index:1;
}
#camion_menu img {
    position:absolute;
    top:0;
    left:-130px;
    z-index:1;
}

#section_droite {
   position : relative;
   background : transparent url(images/bg_trans.png) repeat 0 0;
   display : block;
   color : #000000;
   float  : right;
   width  : 786px;
   padding: 198px 0px 0px 0px;
   margin : 0px 2px 0px 0px;
   z-index : 8;
   /*min-height:400px; /* améliore les transitions des pages avec menu horiz, même si pas compatible partout...*/
}
#pied {
   position : relative;
   color : #000000;
   clear : both;
   background : #776FBB;
   padding:  12px 10px;
   margin : 60px 0px 0px;
   z-index : 9;
}
.connexion {
    background : transparent url(images/bouton_connexion.gif) no-repeat 0 0;
    position:absolute;
    top:0;
    right:0;
    width:87px;
    height:44px;
}
a.connexion:hover {
    background-position : 0px -44px;
}
#copyright {
    padding:2px;
    font-size:11px;
    text-align:center;
    color:#000000;
}
#pied a { color:#000000; text-decoration:none;}

#pied a:hover { color:#dddddd;}


#contenu_pages {
   position : relative;
   display : block;
   clear : both;
   margin : 0px 10px 0px 30px;
   padding : 0px; /* un padding top ici change l'animation entre les pages... */
   text-align : justify;   
}


.titre_pages {
   position : relative;
   color : #000000;
   /*height : 100%;*/
   font-size:34px;
   /*font-variant : small-caps; /* Pas compatible google webfonts!*/
   font-weight : normal;
  /*background-color : #8899aa;*/
   text-align: left;
   padding : 0px 6px 0px 4px;
   margin : 0px 6px 18px 4px;
   z-index:10;
}
.titre_pages .span_ts {
   vertical-align : middle;
   position : relative;
   margin : 0px 12px 0px 0px;
   padding : 4px 20px 4px 12px;
   font : 16px tahoma,helvetica,"DejaVu Sans",sans-serif;
   /*color : #ffffff;*/
   background : transparent url(images/bg_vert.png) repeat 0 0;
   /*border-right : 20px solid #d00040;*/
   /*border-bottom : 2px solid #d00040;*/
}

/* *********************************************************** */

.element_entete {
   background-color : transparent;
   position : relative;
   text-align : left;
   padding : 0px;
   margin : 0px;
   height:100%;/* 135px;*/
   overflow:visible;
   z-index : 8;
   text-shadow : 1px 1px 5px #353;
}

.element_menu {
   position : relative;
   text-align : left;
   font-size:12px;
   margin:8px 4px;
   padding:2px;
}
.element_pied {
   position : relative;
   font-size:14px;
   margin:0px 6px;
   padding:6px;
}

.elements_absolu {
   background-color : transparent;
   position : absolute;
   text-align : justify;
   padding : 3px;
   margin : 0px;
}

.elements {
   background-color : transparent;
   z-index : 10;
   clear : both;
  /*height : 100%;*/

   position : relative;
   padding : 4px 5px;
   margin : 0px 4px 5px 4px; /* pas de marges en haut évite bien des casses-têtes */
}

.colonnes { /* pour les colonnes du layout */
   background-color : transparent;
   clear:both;
   position:relative;
   /*height:100%;/* IE6 et 7, par jQuery*/
   margin:0px;
   padding : 0px;
   z-index : 10;
}
.colonnes .contenant_acc { text-align:left;}

.colonne_gauche { /* pour les colonnes du layout */
   position : relative;
   width: 49%;/*345px;*/
   height: 100%;
   float : left;
   margin : 0px;/* 0px 0px 5px; /**/
   padding: 0px;
}
.colonne_droite { /* pour les colonnes du layout */
   position : relative;
   width: 49%;
   height: 100%;
   float : right;
   margin : 0px;/* 5px 0px 0px; /**/
   padding: 0px;
}
.colonne_gauche_large { /* pour les colonnes du layout */
   position : relative;
   width: 64%;/*450px;*/
   height: 100%;
   float : left;
   margin : 0px;/* 0px 0px 5px; /**/
   padding: 0px;
}
.colonne_droite_petite { /* pour les colonnes du layout */
   /*background : transparent url(images/bg_trans.png) repeat 0 0;*/
   z-index : 11;
   position : relative;
   width: 35%; /*245px;*/
   height: 100%;
   float : right;
   margin : 0px;/* 5px 0px 0px; /**/
   padding: 0px;
   text-align : left;
   /*font-size : 14px;*/

   /*  border-left : 1px dashed #000000;  */
}
/*
.colonne_droite_petite h3 {
    color:#ffffff;
    font-size : 18px;
}
.colonne_droite_petite a { color : #880029; }
.colonne_droite_petite a:hover { color : #ccdddd; }
/* pour les colonnes des utilisateurs (panneau de gestion) */

.colonne_moitie {
   position : relative;
   z-index:20;
   margin: 0 1% 0 0; /*test*/
   /*text-align: justify; déjà dans éléments si nécessaire..*/
   float: left;
   /*width: 314px; minimum pour les accordéons.. 300, max 325 pour les pages.. tests en % !!*/
   width : 49%; /*test*/
}
.colonne_tier {
   position : relative;
   margin: 0 2% 0px 1%;
   text-align: left;
   float: left;
   width : 30%; /*test*/
}
.colonne_quart {
   position : relative;
   margin: 0 2% 0px 1%;
   text-align: left;
   float: left;
   width: 22%;
}


/* *********************************************************** */

/** pour les onglets verticaux !! **/
.contenant_vonglets { /* patché les marges pour ie 6... */
   clear:both;
   position:relative;
   /*height:100%;/* IE6 et 7, par jQuery*/
   margin:5px 1% 20px 1%;
   padding : 0px;
   z-index : 10;
}
.vonglets {
   clear:none;
   float:right;
   width : 68%;/*470px; /* gare aux bordures ! hehehe*/
   position : relative;
   text-align : justify;
   padding : 6px 8px;
   margin : 0px;
   display : none;
   background-color : transparent;

}

.vonglet_actif {
   display:none;
}

.menu_vonglets {
   position : relative;
   float: left;
   text-align: left;
   width: 28%;/*180px;*/
   margin : 0px;
   padding: 0px;
}
.menu_vonglets p {
   /*float : left;*/
   position : relative;
   margin : 0px 0px 5px 0px;
   padding : 0px;
}
.menu_vonglets a {
   position : relative;
   display : block;
   padding: 4px 10px;
   margin : 0px;
   font-size : 13px;
   font-weight : normal;
   text-decoration : none;
}


/* *********************************************************** */

/** pour la page des albums photo.. **/

#album_pres_thumbs {
   /*clear : both;   /* test */
   position : relative;
   float : left; /* test*/
   width : 445px;
   margin : 12px 0px 12px 6px;
   padding : 10px 0px;
}

#album_pres_thumbs_titre {
   text-align:left;
   float:left;
   width : 425px;
   margin : 0px;
   padding: 3px 10px;

}
#album_table_matieres {
   position : relative;
   float:right;
   text-align : left;
   margin : 60px 8px 8px 0px;
   padding: 10px 5px 12px 0px;
   width:202px;
}

#album_table_matieres li {
   margin : 2px 0px 3px 10px;
   padding : 0px;
}
#album_table_matieres a {
    display:block;
    padding:3px;
    text-decoration:none;
    background-color:transparent;
}
#album_table_matieres a:hover {
    background-color:#afafa0;
    color:#223311;
}
.album_thumbs {
   position : relative;
   float : left;
   width : 125px;
   height : 125px;
   margin: 10px;
   padding: 0px;
   text-align : center;
   /*overflow : hidden;*/
   cursor : pointer;
}

.album_thumbs img {
   position : relative;
   display : block;
   margin : auto;
   margin-bottom:0px;
   margin-top : 0px;
   padding : 0px;
}
.album_thumbs a {
    position: relative;
    display : block;
    outline : none;
}
.album_photo_infos {
   display : none;
}

/* *********************************************************** */

/** pour les articles.. **/
.element_article {
   clear:both;
   position:relative;
   margin:0px 60px 14px 10px;
   padding:4px;
}

#titre_article {
   position : relative;
   text-align : left;
   background-color : transparent;
   /*text-shadow: 1px 2px 10px #555;*/
   margin : 0px 6px;
   padding : 0px 6px 0px 6px;
}
#auteur_article {
   position:relative;
   float : right;
   margin : 0px 10px 3px 0px;
   font-weight : bold;
}
#date_parution_article {
   position:relative;
   float : left;
   margin : 0px 3px 3px 10px;
   font-style: italic;
}
#contenu_article {
   clear : both;
   position:relative;
   z-index : 10;
   padding: 10px;
   /*font-size: 16px;*/
   /*color : #331100;*/
   text-align : justify;
}

#archives_articles {
   height  : 100%;
   position : relative;
   display : none;
   clear : both;
   margin : 0px 0px 0px 0px;
   padding : 6px 6px 20px 6px;
   z-index : 1;
}
.sommaire_articles_col {
   float:left;
   width:49%;/* 332px;*/
   margin : 0px;
   padding :0px;
   position:relative;
   z-index : 12;
}
.sommaire_articles_col  .over {
    -moz-box-shadow : 2px 2px 7px #555, inset 8px 12px 32px rgba(255,255,255,0.3), inset -7px -5px 29px rgba(95,95,95,0.2);
    -webkit-box-shadow : 2px 2px 7px #555, inset 8px 12px 32px rgba(255,255,255,0.3), inset -7px -5px 29px rgba(95,95,95,0.2);
    box-shadow : 2px 2px 7px #555, inset 8px 12px 32px rgba(255,255,255,0.3), inset -7px -5px 29px rgba(95,95,95,0.2);
}


.sommaire_articles {
   clear : both;
   position : relative;
   background-color : transparent;
   /*height : 1%;*/
   margin : 6px;
   padding : 4px;
   cursor : pointer;
   /*border-right : 1px solid #aabbaa;*/
   border-bottom : 1px dotted #778877;
   overflow : hidden
}
.art_liste {
   clear : both;
   position:relative;
   display : block;
   margin:0px;
   padding:1px 2px 5px 2px;
   /*height :1%;*/
   border-top: 1px dashed #babfb5;
   cursor : pointer;
   text-align : left;
   font-size : 12px;
}
.lu {
   background : transparent url(images/bg_lu.png) repeat 0 0;
}
.art_titre_archives {
   position : relative;
   /*float : left;
   width : 282px;*/
   font-size : 12px;
   text-decoration : none;
}
.art_date_archives {
   position : relative;
   float : right;
   width : 112px;
   text-align : right;
   margin : 0px 3px 0px 0px;
   padding: 1px;
   color : #5a6050;
   font : 11px Arial, Helvetica, "DejaVu Sans", sans-serif;
   font-style: italic;
}
.art_titre {
   /*font-size:14px;*/
   position : relative;
   text-align : left;
   padding : 2px 0px 2px 4px;
   margin : 0px;
}
.art_titre_petit {
   position : relative;
   width : 292px;
   float : left;
   padding : 0px 0px 2px 5px;
   margin : 0px 0px 0px 5px;
   font-size : 12px;
   text-decoration : none;
}
#art_menu {
    position : absolute;
    top: 20px;
    right: -48px;
    z-index:10;
    width:40px;
    height:140px;
}
#art_menu a {
    position:absolute;
    height:40px;
    width:40px;
    left:0px;
}
#art_prev {
    background : transparent url(images/icone_article_precedent.png) no-repeat 0 0;
    top:0px;
}
#art_tous {
    background : transparent url(images/icone_article_liste.png) no-repeat 0 0;
    top:50px;
}
#art_next {
    background : transparent url(images/icone_article_suivant.png) no-repeat 0 0;
    top:100px;
}
/*

.abg0 {background-color:#cfdfcc; color:#000000;}
.atp0 {color:#4e852e;}
a.atp0 {color:#4e852e;}
a.atp0:hover {color:#000000;}

 À TESTER : NOUVEAU MODELE CSS POUR COMPORTEMENT, FONCTIONNE MÊME SURDÉFINI JQ UI
*/
.abg0 {background-color:#dff5c0; color:#000000;} /* hover, background de l'élément */
.atp0 {color:#305f00;} /* titre dans la page article */
a.atp0:hover {color:#000000;}
.vonglets .ui-widget-content a.atp0 {color:#305f00;} /* titre dans la liste des archives */
.vonglets .ui-widget-content .abg0 a {color:#000000;} /* hover, force le lien, important !! */


.abg1 {background-color:#dff5c0; color:#000000;} /* hover, background de l'élément */
.atp1 {color:#305f00;} /* titre dans la page article */
a.atp1:hover {color:#000000;}
.vonglets .ui-widget-content a.atp1 {color:#305f00;} /* titre dans la liste des archives */
.vonglets .ui-widget-content .abg1 a {color:#000000;} /* hover, force le lien, important !! */

/*
.abg1 {background-color:#c6906a; color:#000000;}
.atp1 {color:#8c3b00;}
a.atp1:hover {color:#000055;}
.vonglets .ui-widget-content a.atp1 {color:#8c3b00;}
.vonglets .ui-widget-content .abg1 a {color:#000055;}

.abg11 {background-color:#9dafc9; color:#000000;}
.atp11 {color:#002f75;}
a.atp11:hover {color:#000000;}
.vonglets .ui-widget-content a.atp11 {color:#002f75;}
.vonglets .ui-widget-content .abg11 a {color:#000000;}

.abg21 {background-color:#e3e300; color:#663311;}
.atp21 {color:#7a1c37;}
a.atp21:hover {color:#663311;}
.vonglets .ui-widget-content a.atp21 {color:#7a1c37;}
.vonglets .ui-widget-content .abg21 a {color:#663311;}

.abg31 { background : transparent url(images/bg_99.png) repeat 0 0; }
.atp31 {color:#b01030;}
a.atp31:hover {color:#551111;}
.vonglets .ui-widget-content a.atp31 {color:#b01030;}
.vonglets .ui-widget-content .abg31 a {color:#551111;}


.abg32 { background : transparent url(images/bg_opt.png) repeat 0 0;}
.atp32 {color:#a66110;}
a.atp32:hover {color:#221111;}
.vonglets .ui-widget-content a.atp32 {color:#a66110;}
.vonglets .ui-widget-content .abg32 a {color:#221111;}

.abg33 {background-color:#d9ed99; color:#113311;}
.atp33 {color:#405f41;}
a.atp33:hover {color:#405f41;}
.vonglets .ui-widget-content a.atp33 {color:#113311;}
.vonglets .ui-widget-content .abg33 a {color:#305f11;}

.abg36 {background-color:#cdaf79; color:#000055;}
.atp36  {color:#222fa5;}
a.atp36 :hover {color:#000055;}
.vonglets .ui-widget-content a.atp36  {color:#222fa5;}
.vonglets .ui-widget-content .abg36 a {color:#000055;}

.abg41 {background-color:#d8b8b5; color:#551111;}
.atp41 {color:#b01030;}
a.atp41:hover {color:#551111;}
.vonglets .ui-widget-content a.atp41 {color:#b01030;}
.vonglets .ui-widget-content .abg41 a {color:#551111;}




.abg42 {background-color:#d8b8b5; color:#551111;}
.atp42 {color:#b01030;}
a.atp42:hover {color:#551111;}
.vonglets .ui-widget-content a.atp42 {color:#b01030;}
.vonglets .ui-widget-content .abg42 a {color:#551111;}

.abg43 {background-color:#d8b8b5; color:#551111;}
.atp43 {color:#b01030;}
a.atp43:hover {color:#551111;}
.vonglets .ui-widget-content a.atp43 {color:#b01030;}
.vonglets .ui-widget-content .abg43 a {color:#551111;}

.abg44 {background-color:#d8b8b5; color:#551111;}
.atp44 {color:#b01030;}
a.atp44:hover {color:#551111;}
.vonglets .ui-widget-content a.atp44 {color:#b01030;}
.vonglets .ui-widget-content .abg44 a {color:#551111;}

.abg45 {background-color:#d8b8b5; color:#551111;}
.atp45 {color:#b01030;}
a.atp45:hover {color:#551111;}
.vonglets .ui-widget-content a.atp45 {color:#b01030;}
.vonglets .ui-widget-content .abg45 a {color:#551111;}
*/
.art_date {
   position : relative;
   float : left;
   width : 110px;
   text-align : left;
   margin : 0px 5px 0px 0px;
   padding: 2px 3px 1px 7px;
   color : #5a6050;
   font : 11px Arial, Helvetica, "DejaVu Sans", sans-serif;
   font-style: italic;
}
.art_auteur {
   position : relative;
   float : right;
   width : 140px;
   text-align : right;
   margin : 0px 4px 0px 6px;
   padding: 2px 0px 0px 0px;
   font-size : 11px;
   font-weight: bold;
   color : #444444;
}
.art_court {
   margin : 0px 10px 0px 10px;
   padding : 5px 0px;
   font-size : 12px;
   clear:both;
}

.art_nbcomm {
    position:relative;
    float:right;
    margin:1px 2px 0px 4px;
    font-size:10px;
    width:20px;
    text-align:right;
}

#art_comm_region {
    position:relative;
    margin: 8px 4px 4px 4px;
    padding: 3px 8px 0px 8px;
    font-size: 11px;
}
#art_comm_text {
    display:block;
    width:370px; height:60px;
    margin:5px 0px;
}
.art_comm {
    position:relative;
    margin : 3px 12px 7px 28px;
    padding: 6px;
    color : #111111;
    border : 1px solid #778877;
}
.art_comm_temp {
    position:relative;
    margin : 3px 12px 5px 28px;
    padding:6px;
    color : #aa3333;
    border : 1px solid #aa0000;
    background : #ffffff;
}
.art_comm_date {
    float:right;
    font-size:0.8em;
}
.art_comm_auteur {
    font-size : 1.2em;
    font-weight: bold;
    color : #555555;
    margin-bottom : 5px;
}
.art_comm_eff {position:absolute; left:-18px; top:4px; height:14px; cursor:pointer;}
.art_comm_app {position:absolute; left:-18px; top:28px; height:14px; cursor:pointer;}
#art_comm_msg {
    display:none;
    margin : 4px;
    padding: 3px;
    font-size: 11px;
    color : #aa3300;
    float : right;
    width:200px;
    background : #f8f5f0;
    border : 1px dotted #aa3300;
}



/** pour les fiches.. **/
.element_fiche {
   clear:both;
   position:relative;
   margin:0px 4px 12px 4px;
   padding: 4px 12px;
}

#titre_fiche {
   position : relative;
   text-align : left;
   background-color : transparent;
   color : #8c3b00;
   /*text-shadow: 1px 2px 10px #555;*/
   margin : 0px 6px 4px;
   padding : 0px 6px 6px 6px;
}


#archives_fiches {
   height  : 100%;
   position : relative;
   display : none;
   clear : both;
   margin : 0px 0px 0px 0px;
   padding : 6px 6px 20px 6px;
   z-index : 1;
}
#archives_fiches h3 {
    /*text-align : right;*/
    border-bottom : 2px solid #111111;
    margin-bottom : 5px;
}

#archives_fiches .vonglets div {
   position:relative;
   margin: 0px 4px 0px 12px;
   padding:0px;
   border-bottom:1px dotted #667744;
   cursor:pointer;
}
#archives_fiches .vonglets a {
   text-decoration:none;
   padding:1px 3px;
}
#archives_fiches .vonglets .af_opt {
   font-size:10px;
}
#archives_fiches .vonglets .fichelist_hover a {
   color : #ffffff;
}
.fichelist_hover {
   background-color : #3366bb;
}
/* *********************************************************** */
/** pour la recherche dans le contenu.. **/

.ui-autocomplete {width:450px;} /* pour éviter le bug de word wrap, dû au padding et un mauvais calcul de largeur total... */
.ui-autocomplete a {font-weight:normal;  display:block; text-shadow:1px 1px 4px rgba(20,20,20,0.2);}
.ui-autocomplete a.ui-state-hover {color:#ddffdd;} /* pour l'autocomplete, enlever si pas nécessaire!....*/

#cherche_contenu_controle {
    display:none;
 /*  position:absolute;
   left: 622px;
   top: 108px;
   width: 320px;
   overflow:visible;
   padding : 0px;
   z-index :150;
   text-align:right;
   font-size:10px;
   /*height : 100%;*/
   /*background : transparent url(images/bg_ch_contenu.png) repeat 0 0;*/

}
#q_cc {
   width:158px;
   color : #999999;
   font-style : italic;
}
#bouton_q_cc {
   width:70px;
}
.q_gen {
   vertical-align:top;
   padding : 3px 2px 3px 18px;
   margin  : 0px 4px 2px 0px;
   background : #ffffff url(images/textfield_chercher.png) no-repeat left center;
}
#cherche_contenu {
   /*background : transparent url(images/bg_ch_contenu.png) repeat 0 0;*/
   position : relative;
   display : none;
   clear : both;
   margin : 12px 6px 28px 6px;
   padding : 6px;
}
/*#cherche_contenu h2 {
   text-align : center;
}*/
#cherche_contenu_resultats {
   font : 11px tahoma,helvetica,"DejaVu Sans",sans-serif;
   position : relative;
   padding:0px;
   margin:0px;
}

#cherche_contenu_resultats ul {
   /*background-color : #d9d3c3;*/
   /*border-right : 1px solid #221100;*/
   /*border : 1px solid #993333;*/
   position:relative;
   float: left;
   width: 28%;
   padding : 1%;
   margin : 1%;
}

#cherche_contenu_resultats li {
   /*background-color : transparent;*/
   /*border-right : 1px solid #777799;*/
   cursor : pointer;
   padding :1px 2px;
   margin : 2px 0px 0px 20px;
   /*font-size : 11px;*/
   font-weight : bold;
}
#cherche_contenu_resultats h4 {
  background-color : #ddccbb;
  padding: 10px 0px;
  margin : 0px;
  /*border : 3px solid #333333;*/
}
#cherche_contenu_resultats p {
  clear : both;
  color : #ffffff;
  background-color : #2B4C9B;
  border-bottom : 1px solid #333333;
  /*border-right : 1px solid #777799;*/
  font-size : 13px;
  padding: 2px 1px 2px 4px;
  margin : 8px 0px 3px 3px;
}

.cmr_int {
   background-color : transparent;
}
.cmr_int_over { /* HOVER SUR LES LI liens INTERNES */
   color : #332211;
   background-color : #ffffff;
}
.cmr_ext {
   background-color : #e0d9d9;
   color : #332211;
}
.cmr_ext_over { /* HOVER SUR LES LI liens EXTERNES */
   color : #eeeeee;
   background-color : #337744;
}

/* *********************************************************** */
/** pour la recherche dans le menu.. **/

#cherche_menu_q {
   width : 175px;
   padding : 2px 2px 2px 18px;
   margin  : 20px 8px;
   color : #999999;
   font-style : italic;
   background : #ffffff url(images/textfield_chercher.png) no-repeat left center;
}



/* *********************************************************** */
/*http://placenamehere.com/article/384/CSS3BoxShadowinInternetExplorerBlurShadow*/
.ombre { /* inset en phase de tests.. :) */
    box-shadow : 3px 3px 9px #444, inset 2px 2px 12px rgba(250,250,250,0.3),inset -2px -2px 8px rgba(10,10,10,0.2);
    -webkit-box-shadow : 3px 3px 9px #444, inset 2px 2px 12px rgba(250,250,250,0.3),inset -2px -2px 8px rgba(10,10,10,0.2);
    -moz-box-shadow : 3px 3px 9px #444, inset 2px 2px 12px rgba(250,250,250,0.3),inset -2px -2px 8px rgba(10,10,10,0.2);
 /*   filter: progid:DXImageTransform.Microsoft.Shadow(color=#1a1a1a,direction='120',strength='6');*/
}

.a_faire {
    margin : 2px 5px 4px 10px;
    padding: 4px 4px 4px 16px;
    border : 1px solid #333333;
    background : transparent url(images/Menu_triangle.gif) no-repeat center left;
    font-size: 11px;
    text-align:left;
}
.af1 {
   color : #000000;
   background-color : #c2c24b;
}
.af2 {
   color : #000000;
   background-color : #6699bb;
}
.af3 {
   color : #ffffff;
   background-color : #b52310;
}

/* zentogglebox... */
.ztb_handle_hover {
    color : #771100;
    cursor : pointer;
}

/* **** les formulaires */
.zf_form {
    position : relative;
    clear : both;
    margin : 8px;
    padding : 12px 0px;
    font-size: 0.9em;
}
.zf_titre {
    position:relative;
    text-align : center;
    margin : 12px 0px 5px 0px;
    border-bottom : 2px solid #777777;
}
.zf_desc {
    position:relative;
    margin : 5px 0px;
    padding:5px;
    border-bottom : 1px dotted #aaaaaa;
}
.zf_form_overlay {
    position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;
    background : #ffffff url(images/textarea_zen.png) no-repeat center center;
    font-size:20px; text-align : center;
    padding:2px;
}
.zf_elem {
    position:relative; clear : both;
    margin-bottom:1px;
    padding: 0px;
}
.zf_elem_msg {
    background : transparent url(images/bg_opt.png) repeat 0 0;
}
.zf_label {
    position : relative; float : left;
    margin: 0 2% 2px 0;
    padding: 4px 0;
    width : 34%;
    text-align : right;
    font-weight : normal;
}
.zf_radios input {
    margin-left : 30px;
}
.zf_options {
    position : relative; float : left;
    margin: 0 0 2px 0;
    width : 62%;
}
.zf_options input {
    position:relative; width:98%;
    /* display:block; */
}
.zf_options textarea {
    position:relative; width:98%;
    display:block;
}
.zf_msg {
    position:relative; clear : both;
    color :#770000;
    margin: 1px 3px 0px;
    height : 15px; /* pour accomoder les messages sur 2 lignes sans changer la page.. */
    font-size: 0.75em;
    text-align:center;
}
.zf_msg_etat {

}
.zfreq_min, .zfreq_max {
    display:none;
}

/* --- --- --- --- les sondages... --- ---- --- */
.zs_sondages {
    position:relative;
    margin:4px;
}
.zs_encours {
    text-align: left;
    position:relative;
    border-bottom : 3px solid #555555;
    border-right: 1px dotted #777777;
    margin: 6px 8px 20px 12px;
    padding: 0px 8px 8px;
}
.zs_id { display:none; }
.zs_opts {position:relative; margin:4px; }
.zs_choix_hover { background:transparent url(images/bg_vert.png) repeat 0 0; }
.zs_choix {
    cursor:pointer;
    position:relative; padding:4px;  margin: 2px; border-bottom : 1px solid #555555;
}

.zs_res {position:relative; padding:4px;  margin: 2px;border-bottom : 1px solid #555555;}
.zs_res span {position:relative; z-index:10;}
.zs_res_num {
    margin: 0px 4px 2px 12px;
    float:right; width:60px;
    text-align:right;
    font-weight:bold; font-size:1.1em;
    color:#553300;
}
.zs_resf {position:absolute; z-index:1; top:0; left:0; height:100%; background:transparent url(images/bg_vert.png) repeat 0 0;}
.zs_min_height {
    position:relative; float:right; width:1px; margin:0px;
    height:126px;
}

/* ***** les petites annonces */

.pa_cat {
   z-index : 10;
   clear : both;
   position : relative;
   padding : 4px;
   margin : 0px 3px 22px 3px; /* pas de marges en haut évite bien des casses-têtes */
}

#pa_liste ul {
    position:relative;
    text-align:left;
    list-style : none;
    margin: 0px;
    padding: 0px;
}
#pa_liste li {
    position:relative;
    border-top : 1px dotted #333333;
    margin: 2px;
    padding: 4px;
}
#pa_liste h4 {
    color : #114400;
}
.pa_li_hover  {
    background-color:#ffffdd;
    color : #225511;
    cursor : pointer;
}

#resultats_annonces {
    position : relative;
    margin:5px 0px;
    padding:0px;
}
#resultats_annonces a {
    position:relative;
    float : left;
    width : 300px; height: 22px;
    font-size : 0.8em;
    display : block;
    margin:4px; padding:4px;
    text-decoration : none;
}
#resultats_annonces a:hover {
    background-color :  #ffffff;
}

.extraits_initiaux { display:none; }
/*#player_container {
  display:block;
  position : absolute;
  top:329px;
  left:331px;
  z-index:150;
  width:633px;
  height:40px;
}*/
#player {
  cursor:move;
  display : none;
  position : absolute;
  /*top:10px; remis au même endroit à chaque page, dans NettoieContenu()...
  left:10px;*/
  z-index:150;
  width:200px;
  height:68px;
  padding: 0px 7px;
  background : transparent url(images/player.png) no-repeat 0px 0px;
}
#player img {position:relative; float:left; margin:3px 1px 0px 2px; padding : 2px; cursor:pointer;}
.phover {
    background:#a04010;/* url(images/control_imgover.png) repeat 0 0; */
}
#playerposition {
    display:none;
    cursor:pointer;
    position:relative;
    display:block;
    margin:7px 0px 4px 0px;
    padding:0px 0px;
}
#playerposition a {outline:none; cursor:pointer;}
#playervolume { cursor:pointer; position:relative; float:left; margin: 9px 8px 0px 4px; width : 60px;}
#playervolume a {outline:none; cursor:pointer;}
#playersongtext {
    position:relative; clear:both; margin:6px 0px; font-size:10px;
    padding:0px 0px;
    color:#ffffff;

}

.extrait {
    background : #81a837 url(images/control_play.png) no-repeat 2px 2px;
    display:inline-block;
    cursor : pointer;
    margin: 1px 4px;
    height:17px;
    padding: 2px 4px 1px 21px;
    color : #002288;
    -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
     -moz-box-shadow : inset 2px 5px 8px rgba(200,200,190,0.4);
    -webkit-box-shadow : inset 2px 5px 8px rgba(200,200,190,0.4);
    box-shadow : inset 3px 5px 9px rgba(200,200,190,0.4);
}
.encours {
    background : #a04010 url(images/control_stop.png) no-repeat 2px 2px;
    color : #ffffff;
}
.ehover {
    -moz-box-shadow : 2px 2px 7px #110, inset 3px 5px 5px rgba(220,220,200,0.5);
    -webkit-box-shadow : 2px 2px 7px #110, inset 3px 5px 5px rgba(220,220,200,0.5);
    box-shadow : 2px 2px 7px #110, inset 3px 5px 5px rgba(220,220,200,0.5);
}