/* pour mémoire
. --> class
# --> id

*/
* {
  margin:0;
  padding:0;
  font-size: 11px;
  }  /* uniformise pour tous les navigateurs et tous les composants*/
.suspect{
  position: absolute;
  left:0;
  top:0;
  width:0px;
  height:1px; 
  border: 0px ;
}

.debug_style {
/*	font-size: 12px;*/
	font-weight: bold;
	color: #ff0000;
}


body {
	background: #000 url(./obliques_asc.png);
  font-family:Verdana, Arial, Helvetica, sans-serif;
  color:#fff;
	}

#global {
  background: url(./global_background2.png) center repeat-y;
	}

#header {
	background: url(./global_top4.png); /*	background: url(./images/global_top4_02.jpg);*/
	color: #af0;
  font-size: 12pt;
	text-decoration: none;
	margin-left: 31px;
}

#header_r {
	background: url(./images/global_top4_03.png) no-repeat;
	
}
#header_l {
	background: url(./images/global_top4_01.png) no-repeat;
}


#header a {
  font-size: 10pt;
	color: #fff;
	text-decoration: none;
}
#header h1{
	color: #fff;
	  margin-top: 0px;

}

#MenuHaut {
	}

		
#footer {
  background: url(./global_bottom2.png);
	font-weight: bold ;
  text-align: center;
	}

.login {
/*	margin-left: 4px;
	width: 170px;*/
  font-size: 7pt;
	}
.bouton {
	border: 1px outset;
	border-color:#9c4;
	font-family: verdana, arial, sans-serif;
	font-weight: bold;
	width: 100%;
  font-size: 7pt;
	color: #fff;
	background-color: #6c0;
}


/*
#liste {
	width:700px;
	overflow: auto;
	text-align: center;
  }
#cadre_video {
	margin-left: 25px;
	}

#cadre_photo {
	margin-left: 25px;
	}

*/
#cadre_vignettes {

width: auto;
height:100%;
overflow: auto; 
}

.vignette {
  height:130px;
	width: 130px;
  background-color: #fff;
	text-align: center;
	vertical-align: middle;
	}

.CadreContenu{
  width: 1002px;
 	margin-left: 5px;
	border: 0px ;

}	
td.CadreGauche{
	vertical-align: top;
	width: 160px;
  height:600px;
 
/*width: auto;
overflow: auto;
height:100%;
*/  
}	
td.CadreMilieu{
	vertical-align: top;
	width: 661px;
	text-align: left;
}	
td.CadreDroite{
	vertical-align: top;
	width: 160px;
	border: 0px ;
}	

td.cellule_vignette {
  height:130px;
	width: 130px;
	text-align: center;
	vertical-align: middle;
	  font-size: 7pt;

  border-width:0px; 
	}
table.cellule_vignette{
/*	width: 90%;	
  margin-left: 2%;
	margin-right: 2%;  */
  width: 130px;
	border: 0px solid;
/*  font-size: 11px;*/
	font-family: verdana, arial, sans-serif;
	font-weight: bold;
	color: #fff;
}
	
p {
  width:600px;
/*  width:458px;*/
	}
a {
	color: #af0;/*color: #8F0;*/
}
a:visited {
	color: #4a0;
}
a:hover {
	color: #FfF;
	text-decoration: none;
}
footer a, img {
	border=0px;
	text-decoration: none;
}

h3 {
	margin:0px;
  font-size: 14px;

}
h2 {
  font-size: 23px;
}
h1 {
	margin-right:10px;
  font-size: 28px;
}
/*///////////////////////////////////////////////////////////////////////////////*/
a.boutonMenu
{
	float: left ;
	line-height: 25px ;
/*	*/
	font-weight: bold ;
	display: block ;
	letter-spacing: 2px ;
	color: #fff ;
	text-align: center ;
	width: 160px ;
	white-space: nowrap;
  background: url(./bg_menu_horiz4.png) repeat-x 0 -25px ;	
	text-decoration: none ;
	/*border-right: 2px solid #fff ;*/
}/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */

a:hover.boutonMenu  
{
	background: url(./bg_menu_horiz4.png) repeat-x 0 -50px ;
	color: #fff ;
}
/*///////////////////////////////////////////////////////////////////////////////*/
a.boutonMenu_selected 
{
	float: left ;
	line-height: 25px ;
/*	*/
	font-weight: bold ;
	display: block ;
	letter-spacing: 2px ;
	color : #600;
	text-align: center ;
	width: 160px ;
	white-space: nowrap;
  background: url(./bg_menu_horiz4.png) repeat-x 0 0 ;	
	text-decoration: none ;
	/*border-right: 2px solid #fff ;*/
}/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */

a:hover.boutonMenu_selected  
{
	background: url(./bg_menu_horiz4.png) repeat-x 0 0 ;
	color: #fff ;
}

/*///////////////////////////////////////////////////////////////////////////////*/
ul.menu_vertical
{
  left:0px;
  /*top:-30px;*/
	padding: 0 ;
/*  position:relative;*/
	margin: 0px ;
  width: 163px;
  /*height: 505px;*/
  padding-top: 0px;
  text-align: center;
}
/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */
/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */
ul.menu_vertical li
{	/* utilisation de liste pour le menu */
  left:160px;
  background: transparent url(./bg_menu_vertic.png) repeat-y -160px 0px;	/* arrière-plan général du menu */
  list-style-type: none;	/* suppression des puces de liste */
	white-space: nowrap;
  width: 160px;

/*padding:0;*/
}
ul.menu_vertical li a
{/* dimensions et définitions des boutons */
  display: block;	/* mise en block de <a> pour lui donner des dimensions */
  height: 25px;
  width: 160px;
  color: #fff;
/*  font-size: 10px;*/
  text-decoration: none;
  line-height: 25px;	/* hauteur de ligne pour éviter les paddings */
}/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */

ul.menu_vertical li a:hover
{
  color: #600;
  background: transparent url(./bg_menu_vertic.png) repeat-y -0px 0px;
  text-align: center;
}

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

/*///////////////////////////////////////////////////////////////////////////////*/
ul.bouton_image
{
/*  left:0px;
  top:-30px;*/
	padding: 0 ;
  position:relative;
	margin: 0px ;
  width: 160px;
  /*height: 505px;*/
  padding-top: 0px;
  text-align: center;
}
/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */
/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */
ul.bouton_image li
{	/* utilisation de liste pour le menu */
  left:160px;
  background: transparent url(./bg_menu_vertic.png) repeat-y -160px 0px;	/* arrière-plan général du menu */
  list-style-type: none;	/* suppression des puces de liste */
	white-space: nowrap;
	  height: 25px;
	    line-height: 25px;	/* hauteur de ligne pour éviter les paddings */

  text-align: center;

  width: 160px;

/*padding:0;*/
}
ul.bouton_image li a
{/* dimensions et définitions des boutons */
  display: block;	/* mise en block de <a> pour lui donner des dimensions */
  height: 25px;
  width: 160px;
  color: #fff;
/*  font-size: 10px;*/
  text-decoration: none;
  line-height: 25px;	/* hauteur de ligne pour éviter les paddings */
}/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */

ul.bouton_image li a:hover
{
  color: #600;
  background: transparent url(./bg_menu_vertic.png) repeat-y -0px 0px;
  text-align: center;
}
ul.bouton_image_selected
{
/*  left:0px;
  top:-30px;*/
	padding: 0 ;
  position:relative;
	margin: 0px ;
  width: 160px;
  /*height: 505px;*/
  padding-top: 0px;
  text-align: center;
}
/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */
/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */
ul.bouton_image_selected li
{	/* utilisation de liste pour le menu */
  left:160px;
  background: transparent url(./bg_menu_vertic.png) repeat-y 0px 0px;	/* arrière-plan général du menu */
  list-style-type: none;	/* suppression des puces de liste */
	white-space: nowrap;
	  height: 25px;
	    line-height: 25px;	/* hauteur de ligne pour éviter les paddings */

  text-align: center;

  width: 160px;

/*padding:0;*/
}
ul.bouton_image_selected li a
{/* dimensions et définitions des boutons */
  display: block;	/* mise en block de <a> pour lui donner des dimensions */
  height: 25px;
  width: 160px;
  color: #600;
/*  font-size: 10px;*/
  text-decoration: none;
  line-height: 25px;	/* hauteur de ligne pour éviter les paddings */
}/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */

ul.bouton_image_selected li a:hover
{
  color: #fff;
  background: transparent url(./bg_menu_vertic.png) repeat-y --160px 0px;
  text-align: center;
}

/*///////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////*/
/*///////////      Style pour les tableaux      /////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////*/
table {
/*	width: 90%;	
  margin-left: 2%;
	margin-right: 2%;  */
/*  width: 600px;*/
	width: 100%;	

/*	padding: 0 ;
	margin: 0 ;
*/
	border-width: 0px ;
	border-color: red;
	font-family: verdana, arial, sans-serif;
	font-weight: bold;
	color: #fff;
}
tr {
/*border-width:1px; 
border-color:#af0;
border-style:solid; */
	text-align: center;
	vertical-align: middle;

}
td { 
	padding: 0 ;
	margin: 0 ;
  text-align: center;
	vertical-align: middle;
	  font-size: 7pt;


}
.static_page { 
  text-align: center;


}
.celluletitre a  {
	color: #fff;/*color: #8F0;*/
}
.celluletitre {
	background-color: #af0;
	color: #000;

/*	border-width: 0px;*/
/*	border-color: #610023;*/
}
.celluleclaire {
	background-color: #ddd;
	color: #000;
	
/*	border-width: 0px;*/
}
.cellulefoncee {
	background-color: #aaa;
	color: #000;
/*	border-width: 0px;*/
}