body {
  background:#fff;
  }
  
.cadre {
width:1000px;margin:0 auto 0 auto; padding : 0;
}  


/*----------------------------- 

     ENTETE COMMUNE

-----------------------------*/
#entete_commun {
  position: absolute; 
  width : 100%;
	background: #fff url(../images/entete_background.png) top repeat-x; 
  z-index: 1;
  }

#entete_commun #logo { float: left;
}

#entete_commun h1 {
  color: #006478; font-size: 1.5em;
  }

#entete_commun h2 {
  color: #6e8d9d; padding:0; margin:0 0 5px 0; font-size: 1.2em;
  }
  
#menu ul
{
float:right;margin:0;padding:0;text-align:right
}
  
#menu li 
{
float:left;margin:40px 0 0 0;padding: 2px 4px 0 4px; width:112px; 
text-align: center;
}

#menu li:hover 
{
margin: 0; 
}

#menu li .menu_item_soustitre
{
  padding:0 6px 10px 6px; 
  color:#fff;
  font-weight: bold;
}

#menu li .menu_item_titre
{
  height: 2em;
  font-size: 1.5em;
}

#menu li.oukile .menu_item_titre {  background: #fff url(../images/menu_item_vert.png) no-repeat 0% 110%;}
#menu li.oukile .menu_item_soustitre {  background: #fff url(../images/menu_item_vert_b.png) repeat-y ;}

#menu li.kioskadoc .menu_item_titre {  background: #fff url(../images/menu_item_rouge.png) no-repeat 0% 110% ;}
#menu li.kioskadoc .menu_item_soustitre {  background: #fff url(../images/menu_item_rouge_b.png)  repeat-y ;}

#menu li.boitabox .menu_item_titre {  background: #fff url(../images/menu_item_orange.png) no-repeat 0% 110% ;}
#menu li.boitabox .menu_item_soustitre {  background: #fff url(../images/menu_item_orange_b.png)  repeat-y;}

#menu li.bankaflouz .menu_item_titre {  background: #fff url(../images/menu_item_bleu.png) no-repeat 0% 110% ;}
#menu li.bankaflouz .menu_item_soustitre {  background: #fff url(../images/menu_item_bleu_b.png)  repeat-y;}



/*----------------------------- 

     ENTETE DE LA PAGE

-----------------------------*/
#entete_page {
  position: absolute;
	top: 125px;
  width : 100%;
	background: #006478; 
  height:180px;
  z-index: 2;  
  }

#entete_page_image_titre {
  height:150px;
  width:100%;
  float:left;
  }

#entete_page_titre {
  margin: 2em 0 0 3em; 
  float:left;
  }

#entete_page_titre h1 {
  font-size: 2.5em; margin:0; color:#fff
  }

#entete_page_titre p {
  font-size: 1.5em; margin:0; color:#fff
  }
  
  

#entete_page_image {
  float:left;
  }


#entete_page_menu {
  float:left;
  }


/*----------------------------- 

     Menu utilisateur

-----------------------------*/


#utilisateur {
  float:right;
  }

#utilisateur ul{
  clear:both;
  padding:0 ; margin:2px 0 0 4px;
  
  }

#utilisateur li{
  text-align:center;
  float:left;
  padding: 0 0 5px 0;
	margin: 0 0 0 0;
  }

#utilisateur li a {
  padding: 0 ; color:#fff; font-size: 1.1em;
  }

#utilisateur li a:hover {
  text-decoration: underline;
  }
  
/*#connexion { background : #701415; }
#inscription { background : #29abe1; }
*/




/*----------------------------- 

     Breadcrumb

-----------------------------*/

#breadcrumb
{
	position: absolute;
	top: 305px;
  background:url(../images/breadcrumb.png) repeat-x 0% 100%; width : 100%;
  z-index: 5;  
}

#breadcrumb ul
{
  width:1000px;margin-left:auto;margin-right:auto;
}


#breadcrumb li
{
	display: inline; 
	padding:0 0 0 8px;
	margin:0 0 0 3px;
  background: url(../images/localisation_li.png) no-repeat 0px 3px ;
}

/*----------------------------- 

     Corp

-----------------------------*/

#corp
{
	position: relative;
	top: 322px;
  width : 100%;
	background: #fff; 
  z-index: 4;  
  }


.img { padding: 10px; }

/* position */
.center { margin-left:auto;margin-right:auto; }
.left { float: left; }
.right { float: right; }

/* couleur */
.beige { background : #e2d8cc; }
.orange { background : #db5118; }
.vieubois { background : #c7b199; }
.marron { background : #d5c5b2; }


.attention { background-image:url(../images/bg_attention.png);
             background-repeat: no-repeat;
             background-position: top left}




.orangeclaire { padding:0; margin:0; background : #f7921e; }

.bleuciel { background : #dff2fa; }
.bleuciel h3 { color : #006478; }
.orange h3, .orange p { color : #fff; }

.rouge { background : #711618; }
.rouge h3, .rouge p, .rouge label { color : #fff; }
.rouge spam.indispensable {  color: #db5118;  }


/* taille */
.hundred { width : 100% }

.ninety { width : 90% }
.eighty { width : 80% }
.seventy { width : 70% }
.sixty { width : 60% }
.fifty { width : 50% }
.forty { width : 40% }
.thirty { width : 30% }
.twenty { width : 20% }
.teeny { width : 10% }


.info { background : #dff2fa; }

.info h3 { color : #6e8d9d; font-size: 1.2em}
.info h3.visible { color : #146fb1; font-size: 1.5em}
.info .select { background : #db5118; }
.info .select p { color : #fff; }
.info .select h3 { color : #fff; font-size: 1.5em}

.info ul li { margin: 0; }
.info ul li h3 { color: #000; font-size: 1.5em; }
.info ul li p { font-size: 1em}
.info a:hover { color: #ff9900; }

hr { color: #000; background-color: #000; height: 1px; border: 0;   }

/*----------------------------- 

     Les formulaires

-----------------------------*/

span.indispensable
{
  color: #900;
  font-size: 0.9em;
  }

#formulaire 
{
  margin: 5px 10px 5px 10px;
  }

#formulaire_resultat 
{
  margin: 0 10px 0 10px;
  }
/*----------------------------- 

     Les boutons

-----------------------------*/

a.bouton_petit {
  display: block;
  float:left;
  background-repeat: no-repeat;
  background-position: right top;
  height:22px;
  padding-right: 8px;
}
a.bouton_petit img {
 vertical-align:middle;
 }

a.bouton_petit span {
  color: #fff;
  font-family: Arial,Verdana,sans-serif;
  font-size: 11px;
  background-repeat: no-repeat;
  line-height: 16px;
  padding: 2px 0 4px 8px;
  background-position: left top;
  float:left;
  cursor:pointer;

}
#petit_gris_bleuciel span, #petit_gris_bleuciel input, #petit_gris_bleuciel {   background-image: url(../images/bouton_petit_gris_bleuciel.png);  }
#petit_gris_grisclaire span, #petit_gris_grisclaire input, #petit_gris_grisclaire {   background-image: url(../images/bouton_petit_gris_grisclaire.png);  }
#petit_gris_beige span, #petit_gris_beige input, #petit_gris_beige {   background-image: url(../images/bouton_petit_gris_beige.png);  }


a.bouton {
  display: block;
  float:left;
  background-repeat: no-repeat;
  background-position: right top;
  height:40px;
  /*margin-right: 6px;*/
  padding-right: 18px;
}

a.bouton span {
  color: #fff;
  font-family: Arial,Verdana,sans-serif;
  font-size: 12px;
  font-weight: bold ;
  background-repeat: no-repeat;
  line-height: 20px;
  padding: 10px 0 10px 18px;
  background-position: left top;
  float:left;
  cursor:pointer;

}

button.bouton {
  float:left;
  margin:0; padding:0;
  border: 1px solid #ddd;
  float:left;
  background-repeat: no-repeat;
  background-position: right top;
  height:40px;
  /*margin-right: 6px;
  padding-right: 18px;*/
}

button.bouton span {
  color: #fff;
  font-family: Arial,Verdana,sans-serif;
  font-size: 12px;
  font-weight: bold ;
  background-repeat: no-repeat;
  line-height: 20px;
  margin:0;
  padding: 10px 0 10px 0; 
  background-position: left top;
  display: block;
  width:auto;
  overflow:visible;
  cursor:pointer;

}




div.bouton { 
  float:left;
  background-repeat: no-repeat;
  background-position: right top;
  height:40px;
  padding:0; margin:0;
  cursor:pointer;
  }

div.bouton input {   
  background : none;
  border:none ;
  background-repeat: no-repeat;
  background-position: left top;
  padding: 10px 0 14px 20px;
  margin: 0 20px 0 0 ;
  color: #fff;
  height:40px;
  font-size: 12px;
  font-family: Arial,Verdana,sans-serif;
  font-weight: bold ;
  overflow:visible;
  display: block;
  width:auto;
  cursor:pointer;
   }
   
div.bouton input:hover { color: #ff9900;  }

a.bouton span:hover { color: #ff9900;  }

#bleu_vieubois span, #bleu_vieubois input, #bleu_vieubois { background-image: url(../images/bouton_bleu_vieubois.png); }
#bleu_marron span, #bleu_marron input, #bleu_marron { background-image: url(../images/bouton_bleu_marron.png); }
#bleu_beige span, #bleu_beige input, #bleu_beige { background-image: url(../images/bouton_bleu_beige.png); }
#rouge_orange span, #rouge_orange input, #rouge_orange { background-image: url(../images/bouton_rouge_orange.png); }
#bleu_bleuciel span, #bleu_bleuciel input, #bleu_bleuciel {   background-image: url(../images/bouton_bleu_bleuciel.png);  }
#orange_beige span, #orange_beige input, #orange_beige { background-image: url(../images/bouton_orange_beige.png);  }
#orange_orangeclaire span, #orange_orangeclaire input, #orange_orangeclaire { background-image: url(../images/bouton_orange_orangeclaire.png) ; }
#orangeclaire_orange span, #orangeclaire_orange input, #orangeclaire_orange { background-image: url(../images/bouton_orangeclaire_orange.png) ; }
#orangeclaire_orange span:hover { color: #db5118;  }


#avatar_bleu_marron { background-image: url(../images/bouton_avatar_bleu_marron.png);     }
#avatar_bleu_marron span { background-image: url(../images/bouton_avatar_bleu_marron.png); padding-left: 40px;}

#photo_bleu_vieubois { background-image: url(../images/bouton_photo_bleu_vieubois.png);     }
#photo_bleu_vieubois span { background-image: url(../images/bouton_photo_bleu_vieubois.png); padding-left: 40px;}

#courriel_orangeclaire_orange { background-image: url(../images/bouton_courriel_orangeclaire_orange.png);  }
#courriel_orangeclaire_orange span { background-image: url(../images/bouton_courriel_orangeclaire_orange.png); padding-left: 40px }
#courriel_orangeclaire_orange span:hover { color: #db5118;  }


#suite_beige {   background-image: url(../images/bouton_suite_beige.png); background-position: left top; }
#suite_beige input {     
  background-image: url(../images/bouton_suite_beige.png);  
  background-position: right top;
  padding: 10px 50px 14px 0;
  margin: 0 0 0  20px;
   }

#retour_beige {   background-image: url(../images/bouton_retour_beige.png); }
  
#retour_beige input {   
  background-image: url(../images/bouton_retour_beige.png);
  padding: 10px 0 14px 50px;
   }






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

.limiter_texte {
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  border-left: 1px solid #bbb;
  border-top: none;
  margin: 0 10px 0 0;
  padding: 3px 4px 1px 4px;
  width: auto;
  line-height: 11px;
  text-align: left;
  color: #999999;
  background-color: #f1f1f1;
}

#charactere_taper {
  width: 30px;
  font-family:Arial;
  border: none;
  color: #900;
  font-weight: bold;
  line-height: 11px;
  text-align: right;
  background-color: #f1f1f1;
  margin: 0 0 2px 0;
  padding: 0;
}





/*----------------------------- 

     Les autocompletes

-----------------------------*/

div.auto_complete
{
  z-index: 900;  
  padding: 0 ;
  margin: 0;
  width: auto;
  height: 100px;
	overflow: auto;
  background: #fff;
  color: #000;
}

div.auto_complete ul
{
  width: auto;
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 1px solid #bbb;
}

div.auto_complete ul li
{
  margin: 0;
  padding: 0 3px 0 3px;
  font-size: 1em;
  border-bottom: 1px solid #eee;
  list-style-type: none;
}

div.auto_complete ul li.selected
{
  background-color: #E87816;
  color:#fff;
}

div.auto_complete ul strong.highlight
{
  margin: 0;
  padding: 0;
  color: #800;
}


/*-----------------------------*/



/*----------------------------- 

     Les fiches

-----------------------------*/
#fiches 
{
  margin: 0 10px 0 0;
}

#fiches h2
{
  font-size:2em; margin: 0; padding:0;
}


/*---------------------------------

      Le calendrier
      
----------------------------------*/

#calendrier, #annuaire
{
background-color: #ddd;
}

#calendrier table, #annuaire table
{
  width:100%;  border:none;
}

#calendrier tr, #annuaire tr
{
background-color: #ddd; border:none;
}

#calendrier th
{
  text-align : center;  color:#555; font-weight:bold; height:1.5em; font-size:0.9em; 
  border:none;border-bottom: 1px solid #999;
}

#calendrier td, #annuaire td,
#calendrier td.dot
{
  font-size:1.4em; text-align : center;  color:#aaa; font-weight:bold; height:1.5em; padding:2px 0 6px 0; 
  border-top: 1px solid #eee;border-left: 1px solid #eee;
  border-bottom: 1px solid #999;border-right: 1px solid #999;
}

#calendrier td.dot
{
  background-image: url(../images/calendrier_point.png);  
  background-position: center bottom;background-repeat: no-repeat;
  
}


#calendrier td a, #annuaire td a 
{
  color:#aaa;
}

#calendrier td.moisencours,
#calendrier td.moisencoursdot, #annuaire td.lettrepresent
{
  color:#555; background-color: #ddd;
  border-top: 1px solid #eee;border-left: 1px solid #eee;
  border-bottom: 1px solid #999;border-right: 1px solid #999;
}

#calendrier td.moisencoursdot
{
  background-image: url(../images/calendrier_point_moisencours.png);  
  background-position: center bottom; background-repeat: no-repeat;
  
}

#calendrier td.semaineselected,
#calendrier td.semaineselecteddot
{
  color:#555; background-color: #ccc;
  border-top: 1px solid #ddd;border-left: 1px solid #ddd;
  border-bottom: 1px solid #999;border-right: 1px solid #999;
}

#calendrier td.semaineselecteddot
{
  background-image: url(../images/calendrier_point_semaineselected.png);  
  background-position: center bottom; background-repeat: no-repeat;
  
}

#calendrier td.todayselected,
#calendrier td.todayselecteddot
{
  color:#fff; background-color: #db5118; 
  padding:0 0 6px 0; 
  border-top: 2px solid #85320F;border-left: 1px solid #85320F;
  border-bottom: none;border-right: 1px solid #85320F;
}

#calendrier td.todayselecteddot
{
  background-image: url(../images/calendrier_point_dayselected.png);  
  background-position: center bottom;background-repeat: no-repeat;
  
}

#calendrier td.today,
#calendrier td.todaydot
{
  color:#fff; background-color: #999;
  padding:0 0 6px 0;
  border-top: 2px solid #333;border-left: 1px solid #333;
  border-bottom: none;border-right: 1px solid #333;
}

#calendrier td.todaydot
{
  background-image: url(../images/calendrier_point_today.png);  
  background-position: center bottom;background-repeat: no-repeat;
  
}

#calendrier td.jourselected,
#calendrier td.jourselecteddot, #annuaire td.lettreselected
{
  color:#fff; background-color: #db5118;
  border-top: 1px solid #85320F;border-left: 1px solid #85320F;
  border-bottom: 1px solid #85320F;border-right: 1px solid #85320F;
}

#calendrier td.jourselecteddot
{
  background-image: url(../images/calendrier_point_jourselected.png);  
  background-position: center bottom;background-repeat: no-repeat;
  
}

#calendrier td.moisencours a,
#calendrier td.semaineselected a,
#calendrier td.moisencoursdot a,
#calendrier td.semaineselecteddot a, #annuaire td.lettrepresent a
{
  color:#555;
}
#calendrier td.todayselected a,
#calendrier td.today a,
#calendrier td.jourselected a,
#calendrier td.todayselecteddot a,
#calendrier td.todaydot a,
#calendrier td.jourselecteddot a, #annuaire td.lettreselected a
{
  color:#fff;
}


#calendrierbarmois 
{
  background-color: #ddd; font-size:1.4em; text-align : center;  color:#555; font-weight:bold; height:1.5em; padding:3px 0 5px 0; 
}

#calendrierbarmois a
{
   color:#555; 
}


 /* Start custom button CSS here
    ---------------------------------------- */
    .btn {
      display:inline-block;
      background:none;
      margin:0;
      padding:3px 0;
      border-width:0;
      overflow:visible;
      font: 13px Arial,Sans-serif;
      text-decoration:none;
      color:#eee;
      /*font-weight:bold;*/
      
			}
    * html button.btn {
      padding-bottom:1px;
      }

    
    /* Immediately below is a temporary hack to serve the 
       following margin values only to Gecko browsers
       Gecko browsers add an extra 3px of left/right 
       padding to button elements which can't be overriden.
       Thus, we use -3px of left/right margin to overcome this. */
    html:not([lang*=""]) button.btn {
      margin:0 -3px;
      }


    .btn span {
      margin:0;
      padding:3px 0;
      }
    * html .btn span {
      padding-top:0;
      }
    .btn span span {
      position:relative;
      padding:3px .4em;
      border-width:0;
      }
    


/* LA VERSION PETIT FORMAT */
    .pt {
      padding:1px 0;
      font-size: 10px;
      margin:0;
      font-weight:bold;
      
			}

    .pt span {
/*      background:#666 ;
*/      margin:0;
			padding:1px 0 ;
/*      border-left:1px solid #666;
      border-right:1px solid #666;
*/      }
    * html .pt span {
      padding-top:0;
      }
    .pt span span {
      position:relative;
      padding:1px .4em 1px .4em;
      border-width:0;
/*      border-top:1px solid #666;
      border-bottom:1px solid #666;
*/      }
    
    /* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
    a.pill-l span, button.pill-l span {
      border-right-width:0;
      }
    a.pill-l span span, button.pill-l span span {
      border-right:1px solid #bbb;
      }
    a.pill-c span, button.pill-c span {
      border-right-style:none;
      border-left-color:#fff;
      }
    a.pill-c span span, button.pill-c span span {
      border-right:1px solid #bbb;
      }
    a.pill-r span, button.pill-r span {
      border-left-color:#fff;
      }
    
    /* only needed if implementing separate hover/focus/active state for buttons */
    .pt:hover span, .pt:hover span span, .pt:focus span, .pt:focus span span {
      cursor:pointer; /* important for any clickable/pressable element */
     /* border-color:#12639e; !important; */
      background:#12639e ;
      color:#fff;
      }
    .pt:active span {
      background-position:0 -400px;
      outline:none;
      }
    .pt:focus, .pt:active {
      outline:none; /* doesn't seem to be respected for <button>, only <a> */
      }











    /* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
    a.pill-l span, button.pill-l span {
      border-right-width:0;
      }
    a.pill-l span span, button.pill-l span span {
      border-right:1px solid #bbb;
      }
    a.pill-c span, button.pill-c span {
      border-right-style:none;
      border-left-color:#fff;
      }
    a.pill-c span span, button.pill-c span span {
      border-right:1px solid #bbb;
      }
    a.pill-r span, button.pill-r span {
      border-left-color:#fff;
      }
    
    /* only needed if implementing separate hover/focus/active state for buttons */
    .btn:hover span, .btn:hover span span, .btn:focus span, .btn:focus span span {
      cursor:pointer; /* important for any clickable/pressable element */
      
			background:#9cf !important; 
      border-color:#9cf !important; 
      color:#fff ;
      }
    .btn:active span {
      background-position:0 -400px;
      outline:none;
      }
    .btn:focus, .btn:active {
      outline:none; /* doesn't seem to be respected for <button>, only <a> */
      }

    /* use if one button should be the 'primary' button */
    .primary {
      font-weight:bold;
      color:#000;
      }

/*orangeclair
rouge
*/
/*bleu*/
    .btn span.bleu {
      background:#12639e;
      border-left:1px solid #115f96;
      border-right:1px solid #0e4f7d;
      }

    .btn span.bleu span {
      border-top:1px solid #115f96;
      border-bottom:1px solid #0e4f7d;
      }

/*GRIS*/
    .btn span.gris {
      background:#666;
      border-left:1px solid #666;
      border-right:1px solid #666;
      }

    .btn span.gris span {
      border-top:1px solid #666;
      border-bottom:1px solid #666;
      }

/*orangeclaire*/
    .btn span.orangeclaire {
      background:#f7921e;
      border-left:1px solid #de831b;
      border-right:1px solid #de7804;
      }

    .btn span.orangeclaire span {
      border-top:1px solid #de831b;
      border-bottom:1px solid #de7804;
      }

/*rouge*/
    .btn span.rouge {
      background:#711618;
      border-left:1px solid #711618;
      border-right:1px solid #711618;
      }

    .btn span.rouge span {
      border-top:1px solid #711618;
      border-bottom:1px solid #711618;
      }
      
/*orange*/
    .btn span.orange {
      background:#db5118; /* url(../images/bg-button.gif) repeat-x 0 0;*/
      border-left:1px solid #db5118;
      border-right:1px solid #db5118;
      }
    .btn span.orange span {
      border-top:1px solid #db5118;
      border-bottom:1px solid #db5118;
      }
    




/* social bookmarking */


ul.sidebar_icon_list{
	width:224px;
	margin:0 auto !important;
	overflow:hidden;
}
ul.sidebar_icon_list img{
	position:absolute;
	left:0;
	top:0;	
	border:0;
}
ul.sidebar_icon_list .small{
	display:inline;
	top:8px;
	left:8px;
}
ul.sidebar_icon_list,
ul.sidebar_icon_list li{
	list-style:none;
	padding:0;
	margin:0;
}
ul.sidebar_icon_list li{
	width:32px;
	height:32px;
	float:left;	
	line-height:32px;	
	text-align:center;
	position:relative;	
}
ul.sidebar_icon_list li img{
	-webkit-transition: opacity .5s linear;
	opacity:0;
	vertical-align:middle;
}
ul.sidebar_icon_list li img.small{
	opacity:0.6;
}
ul.sidebar_icon_list li:hover img{
	opacity:1;
}	
ul.sidebar_icon_list li:hover img.small{
	opacity:0;
}			
/*ul.sidebar_icon_list li:hover ~ li img{
	opacity:1;
}*/
ul.sidebar_icon_list li,
ul.sidebar_icon_list li img{
	float:left;
}
ul.sidebar_icon_list li strong{
	position:absolute;
	left:-9000px;
}

#menufiche a img { opacity:0.6 }
#menufiche a:hover img { opacity:1 }