/*------------------------------------------------------------------------------
  la div des menus n'est longue que de sa hauteur nécessaire
  si elle trop courte, la couleur par default, qui est celle du contenu 
  est activée.
  -> on évite tous les problemes de div pas assez hautes etc...
  Condition: la couleur par default est celle du contenu, ou plutot, 
  le contenui n'a pas de couleur specifique
------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------
  Pour le DEBUG, met toutes les bordures visibles
------------------------------------------------------------------------------*/
/*{border: 1px solid #000000;} */



  


/*----------------------------
     DEFAULT COLOR
----------------------------*/
body
{
 text-align: center;
 margin: 3px; 
 background-color: #FF9933; 
 font-family:  Arial, Helvetica, Verdana, sans-serif;  
 
}


/*----------------------------
     ACMC SETTINGS
----------------------------*/
h1           { color: #000000; font-size: x-large; text-align: center; font-weight: bold; margin-top: 0; }
h2           { color: #000000; font-size: medium; margin-top: 0; margin-bottom: 0}
h3 	     { color: #000000; font-size: small; margin-top: 0; margin-bottom: 0}
h4           { color: #000000; font-size: small; margin-top: 0; margin-bottom: 0 }
h5           { color: #000000; font-size: small; margin-top: 0; margin-bottom: 0 }
h6 {color: #000000; font-size: x-small ; margin-top: 0; margin-bottom: 0 }
h7 {text-align: center; color: #000077; font-size: x-small ; margin-top: 0; margin-bottom: 0 }


p{ color: #000000; font-size: medium; margin-top: 0; margin-bottom: 0} 
p.std{}
p.bigfett{font-size: medium; font-weight: bold; }
p.big{font-size: medium; }
p.h1{ } 
p.h2{ }
p.h3{ } 
p.h4{ }
p.h5{ } 
p.h6{font-size: x-small }
p.pt{font-size: x-small }
p.h7{ }

ol{ color: #000000; font-size: small; margin-top: 0; margin-bottom: 0} 
ol.std{}
/*
use like this: <p class="h1">jfjjdg</p>
*/





/*----------------------------
     MIN-WIDTH also with IE 6
     ici, min-width pour que 
     qd on resize en petit, 
     le texte reste a droite 
     de la barre des menus
     see "Imposing Minimum Width With CSS"
----------------------------*/
/*----------------------------
     Container is the div in the body
width:expression est IE proprietaire
----------------------------*/
#container
{

margin:0 auto;
text-align: left;
width: 1000px;;  


/*
min-width: 980px;
width:expression(document.body.clientWidth < 980? "980px": "100%" );*/

/*width:expression(document.body.clientWidth > 990? "980px": "100%" );*/



/*
  avec une largeur fixe de 1000 pixels, il y a les avantages suivants:
  - pas de problem si on elargit la fenetre ou si la retrecit
  - avec un truc de la form:
           <table border="0" width="791 px" height="0">
             <tr>
              <td width="100%" height="0"></td>
             </tr>
           </table>
   on peut faire un break line dans les trucs flottants
*/
} 






a:link       { color: #0000FF;  text-decoration: underline; background-color: transparent }
a:visited    { color: #0000FF;  text-decoration: underline; background-color: transparent }
a:hover      { color: #CC0000; text-decoration: underline; background-color: transparent }
a:active     { color: #CC0000; text-decoration: underline; background-color: transparent }


a.nav_a:link {color: black; text-decoration: none; background-color: transparent}
a.nav_a:visited {color: black; text-decoration: none; background-color: transparent}
a.nav_a:hover { color: #CC0000; text-decoration: none; background-color: transparent }
a.nav_a:active { color: #CC0000; text-decoration: none; background-color: transparent }



/*----------------------------
     HEADER  
----------------------------*/
#logopanel
{





  /* POSITION/DIMENSION */
  /* est dans le flux, pas de position particuliere */
margin:0;
  /* FORMAT */
  background: #E9EFFF;
/*  font-weight: bold; */
  height: 95px;
/*font-size: large;*/

/* fuer runde ecke */
position:relative;

-moz-border-radius-topleft:12px;
-moz-border-radius-topright: 12px;
/* fuer runde ecke mozilla */
-moz-border-radius-bottomleft:12px;
-moz-border-radius-bottomright: 12px;



}


/* fuer runde ecke */
#logopanel img { position:absolute; }
#logopanel img.eck1 { top:0; left:0; }
#logopanel img.eck2 { top:0; right:0; }
#logopanel img.eck3 { bottom:0; left:0; }
#logopanel img.eck4 { bottom:0; right:0; }









/*----------------------------
     WRAPPER
----------------------------*/
#wrapper {
  
  float: right;
  width: 100%;
  margin-left:-200px;
  
  /* FORMAT */
}

/*----------------------------
     CONTENU
----------------------------*/
#contenu {
  margin-left:200px;
  padding: 3px;

}




/*----------------------------
     MENU A GAUCHE
----------------------------*/
#navi {





  float: left;
  width: 200px;
  

  /* FORMAT */
  /*background-color: #FFCCCC; */
   background-color: #00CC66;


/* fuer runde ecke */
position:relative;

/* fuer runde ecke mozilla */
-moz-border-radius-topleft:12px;
-moz-border-radius-topright: 12px;
-moz-border-radius-bottomleft:12px;
-moz-border-radius-bottomright: 12px;



}

/* fuer runde ecke */
#navi img { position:absolute; }
#navi img.eck1 { top:0; left:0; }
#navi img.eck2 { top:0; right:0; }
#navi img.eck3 { bottom:0; left:0; }
#navi img.eck4 { bottom:0; right:0; }
/*----------------------------
     MENU A GAUCHE MENU Premier Niveau
----------------------------*/


.navi_s0 {
  margin:0px;
  margin-left: 5%;
  margin-right: 3%;
  font-size: small;
/*  background-color:#E9EFFF;*/
  background-color:#CCFFCC;
  border:none; 
  margin-top: 4px;
  padding:0.4em; 
  font-weight: bold; 
}


.navi_s0_active {
  margin:0px;
  margin-left: 5%;
  margin-right: 3%;
  font-size: small;
  border:1px solid #000000; 
  margin-top: 4px;
  padding:0.4em; 
  background-color:#FFFF66;
  font-weight: bold; 
}
.navi_s0_only_expand {
  margin:0px;
  margin-left: 5%;
  margin-right: 3%;
  font-size: small;
  border:none; 
  margin-top: 4px;
  padding:0.4em; 
  background-color:#CCFFCC; /* it seems that making aniother color for exoanded not active is not a good idea -> same color as not activated*/
  font-weight: bold; 
}
/*----------------------------
     MENU A GAUCHE MENU Second niveau
----------------------------*/

.navi_s1 {
  margin:0px;  
/* 09.08.2008, margin left was 20% to indent this level */
  margin-left: 5%;
  margin-right: 3%;
  font-size: small;
/*  background-color:#E9EFFF;*/
    background-color:#CCFFCC;
  border:none; 
  margin-top: 3px;
  padding:0.4em; 
padding-left:15%;  /* set so that text is more right */
}


.navi_s1_active {
  margin:0px; 
/* 09.08.2008, margin left was 20% to indent this level */
  margin-left: 5%;
  margin-right: 3%;
  font-size: small;
    border:1px solid #000000; 
  margin-top: 3px;
  padding:0.4em; 
padding-left:15%;  /* set so that text is more right */
  background-color:#FFFF66;
}

.navi_s1_only_expand {
  margin:0px; 
/* 09.08.2008, margin left was 20% to indent this level */
  margin-left: 5%;
  margin-right: 3%;
  font-size: small;
    border:none; 
  margin-top: 3px;
  padding:0.4em; 
padding-left:15%;  /* set so that text is more right */
    background-color:#CCFFCC; /* it seems that making another color for exoanded not active is not a good idea -> same color as not activated*/
}
/*----------------------------
     MENU A GAUCHE MENU Troisieme Niveau
----------------------------*/

.navi_s2 {
  margin:0px;
/* 09.08.2008, margin left was 30% to indent this level */
  margin-left: 5%;
  margin-right: 3%;
  font-size: x-small;
/*  background-color:#E9EFFF;*/
    background-color:#CCFFCC;
  border:none; 
  margin-top: 2px;
  padding:0.4em; 
padding-left:25%;  /* set so that text is more right */
}


.navi_s2_active {
  margin:0px; 
/* 09.08.2008, margin left was 30% to indent this level */
  margin-left: 5%;
  margin-right: 3%;
  font-size: x-small;
    border:1px solid #000000; 
  margin-top: 2px;
  padding:0.4em; 
padding-left:25%;  /* set so that text is more right */
  background-color:#FFFF66;
}
.navi_s2_only_expand {
  margin:0px; 
/* 09.08.2008, margin left was 30% to indent this level */
  margin-left: 5%;
  margin-right: 3%;
  font-size: x-small;
    border:none; 
  margin-top: 2px;
  padding:0.4em; 
padding-left:25%;  /* set so that text is more right */
    background-color:#CCFFCC; /* it seems that making another color for exoanded not active is not a good idea -> same color as not activated*/
}
/*----------------------------
     MENU A GAUCHE MENU Quatrieme Niveau
----------------------------*/

.navi_s3 {
  margin:0px;
/* 09.08.2008, margin left was 40% to indent this level */
  margin-left: 5%;
  margin-right: 3%;
  font-size: x-small;
/*  background-color:#E9EFFF;*/
    background-color:#CCFFCC;
  border:none; 
  margin-top: 1px;
  padding:0.4em; 
padding-left:35%;  /* set so that text is more right */
}


.navi_s3_active {
  margin:0px;
/* 09.08.2008, margin left was 40% to indent this level */
  margin-left: 5%;
  margin-right: 3%;
  font-size: x-small;
    border:1px solid #000000; 
margin-top: 1px;
  padding:0.4em; 
padding-left:35%;  /* set so that text is more right */
  background-color:#FFFF66;
}

.navi_s3_only_expand {
  margin:0px;
/* 09.08.2008, margin left was 40% to indent this level */
  margin-left: 5%;
  margin-right: 3%;
  font-size: x-small;
/*  background-color:#E9EFFF;*/
    background-color:#CCFFCC; /* it seems that making another color for exoanded not active is not a good idea -> same color as not activated*/
  border:none; 
  margin-top: 1px;
  padding:0.4em; 
padding-left:35%;  /* set so that text is more right */
}


/*----------------------------
     HEADER HAUT/BAS, PARTAGE LE HEADER EN 2
----------------------------*/
#header_hb {
    height: 50%;
}


/*----------------------------
     FOOTER SUIVANT
----------------------------*/
#suivant {
float: left;
   width: 100%;
}




/*----------------------------
     FOOTER
----------------------------*/
#bas
{
  /* POSITION/DIMENSION */
  /* 
     est hors du flux pour etre de ttes facons en dessous de contenu et de navi 
     sinon, serait au milieu là où ile resterait de la place dans le flux,
     Peut etre left ou right, c'est pareil, car a width=100%
   */
   float: left;
   width: 100%;
   

  /* FORMAT */
   /* background: #FF9999;*/
background: #E9EFFF;


/* fuer runde ecke */
position:relative;

/* fuer runde ecke mozilla */
-moz-border-radius:12px;

}

/* fuer runde ecke */
#bas img { position:absolute; }
#bas img.eck1 { top:0; left:0; }
#bas img.eck2 { top:0; right:0; }
#bas img.eck3 { bottom:0; left:0; }
#bas img.eck4 { bottom:0; right:0; }



/*------------------------------------------------------------------------------
     IMAGE A GAUCHE OU A DROITE
     MARCHE AUSSI A L'INTERIEUR D'UNE CELLULE DE TABLEAU


1. en debut d'un paragraphe
   pour avoir un truc du genre

      +------+texte ecrit apres ce le IMG
      |      |qui va s'organiser autour de l'image
      |image |et aui peut etre long, 
      |      |encore plus long
      +------+et qui pour finir va 
      aller sous l'image parce que elle est terminée
      
      Exemple: 
          <p>
             <img class="image_a_gauche" src="exemple.gif">
             text ecrit apres le IMG .....
          </p>
      
2. Dans un paragraphe mais sans <br> -> nul ! 

   Là, c'est plus dur de savoir où l'image va apparaitre verticalement.
   Lorsque le tag img arrive, alors l'image est mise à gauche apres la ligne 
   courante. Le texte apres l'image reprend sur la ligne courante.

  
      Debut du paragraphe, on ne sait pas excatement où l'image
      sera mise verticalele, cela depend  car fin du texte texte ecrit apres ce le IMG
      +------+qui va s'organiser autour de l'image
      |      |et aui peut etre long,
      |image |encore plus long 
      |      |et qui pour finir va
      +------+ aller sous l'image parce que elle est terminée
      et la c'est sous l'image
      
      Exemple: 
          <p>
             Debut du paragraphe, on ne sait pas excatement où l'image
             sera mise verticalele, cela depend  car fin du texte
             <img class="image_a_gauche" src="exemple.gif">
             text ecrit apres le IMG .....
          </p>


3. Dans un paragraphe mais avec <br> -> MARCHE!

   Là,  l'image va apparaitre verticalement
   lorsque le tag img arrive, à gauche apres la ligne courante. 
   Le texte ecrity apres l'image en html reprend aussi apres la ligne
   courante grace au <br> mis juste avant !.

  
      Debut du paragraphe, on ne sait pas excatement où l'image
      sera mise verticalele, cela depend  car fin du texte
      +------+texte ecrit apres ce le IMG
      |      |qui va s'organiser autour de l'image
      |image |et aui peut etre long,
      |      |encore plus long 
      +------+et qui pour finir va
       aller sous l'image parce que elle est terminée et la c'est sous l'image
      
      Exemple: 
          <p>
             Debut du paragraphe, on ne sait pas excatement où l'image
             sera mise verticalele, cela depend  car fin du texte
             <img class="image_a_gauche" src="exemple.gif">
             <br>
             text ecrit apres le IMG .....
          </p>
------------------------------------------------------------------------------*/
.image_a_gauche {
       float: left;
       margin-right: 5px;
}

.image_a_droite {
       float: right;
       margin-left: 5px;
}

#cursor { color: rgb(0, 0, 0);
    font-size: small;
    font-weight: bold;
    display: inline;
}


/*---essai images avec legendes */

/*
pour modifier un parameter d'une classe dans le html: 
<dl class="image_a_gauche_legende" style="width:241px;">
*/

/*---------------------------*/
dl.image_a_gauche_no_legende {
  border: 0px solid #000;
  background-color: #ddd;
  font-size: small;
  font-style: italic;
  text-align: center;
  padding: 10px 10px 5px 10px;
  margin: 0px 0px 0px 0px;
  float: left;
}

.image_a_gauche_no_legende dt img 
{
  border: 1px solid #000;
}

.image_a_gauche_no_legende dd 
{
  padding: 0;
  margin: 0;
}

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

dl.image_a_gauche_legende {
  border: 0px solid #000;
  background-color: #ddd;
  font-size: small;
  font-style: italic;
  text-align: center;
  padding: 10px 10px 5px 10px;
  margin: 10px 10px 10px 0px;
  float: left;
}

.image_a_gauche_legende dt img 
{
  border: 1px solid #000;
}

.image_a_gauche_legende dd 
{
  padding: 0;
  margin: 0;
}

/*---essai images avec legendes */
dl.image_a_droite_legende {
  border: 0px solid #000;
  background-color: #ddd;
  font-size: small;
  font-style: italic;
  text-align: center;
  padding: 10px 10px 5px 10px;
  margin: 10px 10px 10px 10px;
  float: right;
}

.image_a_droite_legende dt img 
{
  border: 1px solid #000;
}

.image_a_droite_legende dd 
{
  padding: 0;
  margin: 0;
}

dl.grey {
  border: 0px solid #000;
  background-color: #ddd;
  font-size: medium;
  font-style: normal;
  text-align: left;
  padding: 15px 15px 15px 15px;
  margin: 15px 15px 15px 10px;
  float: left;
}

.grey dd 
{
  padding: 5;
  margin: 5;
}



/*
 archives
*/
/*---------------------
Legendes sous les photos
//TRAITEMENT DES IMAGES

//Dans le cms, on peut définir deux classes d'images : .imgGauche et .imgDroite

//On va mettre en légende le contenu de la balise alt

//Il faut détecter toutes les balises <img> ,

//<img width="164" height="200" class="imgDroite" src="/images/Image/braille-board_Opt.jpg" alt="Une tablette braille" longdesc="déscription longue test" />

//- La classe de l'image va être transferée au div

//- Si la largeur n'est pas définie dans l'image, on va tenter de la trouver à l'aide de getimagesize

//- La largeur sera également attribuée au paragraphe légende afin qu'il ne dépasse pas.



//on va remplacer l'image par un div de ce style...

//<div class="$class"><img width="$width" height="$height" alt="$texteAlt" longdesc="$longDesc" src="$src" />

//<p style="width: $width;">$texteAlt</p>

//</div>

			

function rechercheValeur($aTrouverXX,$tagXX){

//Cette fonction recherche la valeur d'un parametre $aTrouver se trouvant dans un tag

//et la retourne (false si le parametre n'est pas trouvé.)

//ex : rechercheValeur('width','<img class="test" width="300" src="toto.jpg">') va retourner 300



$aTrouverXX.="="; //on ajoute = ... y'a moins de chances de trouver width= que width dans le alt (ce qui serait chiant)

if($posXX=strpos($tagXX,$aTrouverXX){		

	$tempXX=substr($tagXX,$posXX+strlen($aTrouverXX)+1,strlen($tagXX)); //on vire le début

	$tempXX=substr($tempXX,0,strpos($tempXX,'"')); //on vire la fin

	return $tempXX;

}else{

	return false;

}	

}// fin rechercheValeur

			

//On recherche la première image

$nextPosImg=strpos($contenuXX,"<img");

while(($nextPosImg!==false)){

	$imgXX=substr($contenuXX,$nextPosImg,strlen($contenuXX)); //on vire le début

	$imgXX=substr($imgXX,0,strpos($imgXX,"/>")+2); //on vire la fin

if($nextPosImg!==false){ 

	//on recherche $src

	$srcXX=rechercheValeur("src",$imgXX);

	//on recherche $alt

	$altXX=rechercheValeur("alt",$imgXX);

	//on recherche $longdesc

	$longdescXX=rechercheValeur("longdesc",$imgXX);

	//on recherche $class

	$classXX=rechercheValeur("class",$imgXX);

	//on recherche $width

	$widthXX=rechercheValeur("width",$imgXX);

	//on recherche $height

	$heightXX=rechercheValeur("height",$imgXX);

}

//on calcule le div (on met TEMP à la place d'<img pour ne pas faire une boucle infinie...)

$divXX='<div class="'.$classXX.'"><TEMP src="'.$srcXX.'"';

//si alt existe

if($altXX){

	$divXX.=' alt="'.$altXX.'"';

}

//si longdesc existe

if($longdescXX){

	$divXX.=' longdesc="'.$longdescXX.'"';

}

//si width..

if($widthXX){

	$divXX.=' width="'.$widthXX.'"';

}

//si height..

	if($heightXX){

$divXX.=' height="'.$heightXX.'"';

}

//fin tag </img> début de la légende

//evidement, si y'avait des autres valeurs, elles vont gicler...

$divXX.='></img><p';

//si la largeur est définie dans l'image, on l'utilise... sinon, on va chercher la largeur de l'image avec getimagesize()

if(!$widthXX){

//ATTENTION, VA SUREMENT MERDER SI PHP TROUVE PAS L'IMAGE... ADAPTER LE CHEMIN...

	$getImageSizeXX=getimagesize("../".$srcXX);

	$widthXX=$getImageSizeXX[0];

}

//si la largeur est définie, on l'attribue au style du paragraphe pour que la légende ne dépasse pas.

if($widthXX){

	$divXX.=' style="width:'.$widthXX.'px;"';

}

//contenu et fin de la légende, fin du div

$divXX.='>'.$altXX.'</p></div>';

//on remplace l'<img dans le contenu par le <div qu'on vient de calculer...

$contenuXX=str_replace($imgXX,$divXX,$contenuXX);		

//position de l'image suivante

$nextPosImg=strpos($contenuXX,"<img");

}//end while y'a des <img

						

//on remet les <img à la place des <TEMP

$contenuXX=str_replace("<TEMP","<img",$contenuXX);

			

//et hop et voila... plus qu'a retourner...

echo($contenuXX);

//on peut styler .imgGauche et .imgDroite ainsi que .imgGauche img, .imgGauche p, etc...

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