/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *	stylescreen.css
 *	menu + 3 colonnes centrales
 *
 *	tout avait été converti en em -> mais repassé en px cause soucis d'éclatement en cas de redimensionnement
 *	les valeurs sont indiquées en pixel pour info (approximatif)
 *	
 *	ratio approximatif: 1em = 16px
 *	(http://archivist.incutio.com/viewlist/css-discuss/14811)
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/*##############################################################################################
  #
  #				CONTENU COMMUN 
  #
  ##############################################################################################
 */
  
/***********************************************************************************
 *	reset all margin & padding
 */
* {
	margin: 0 auto;
	padding: 0;
/*	font: normal 1em/1em Arial, Helvetica, sans-serif; */
}

body {
	background:#f6f6f6;
	color: #666;
	font-size: 0.9em;
	font-family: Arial, Helvetica;
}

#main {
	min-height:100%;
	background:#fff;
	width: 62.1em; /* 995px */
	width: 995px;
}

/***********************************************************************************
 * en-tete
 */
#header {
	 
	/*height: 10em; 
	height: 340px;

	background: #fff url(_images/entete.png) no-repeat bottom center;
	margin-bottom: 8px;*/
}
#header_module {
	float: right;
	height: 24px;
	padding-left: 25px; /* padding-left: décalage dû à l'image de fond */	
	background: #ececec url(_images/header_module1.gif) no-repeat top left;
}

#header_module .content .english {
        margin:0;
        padding:0;
        margin-left:8px;
        padding-left: 20px;
        background: url(_images/flag_uk.gif) no-repeat top left;
}

#header_module .content .francais {
        margin:0;
        padding:0;
        margin-left:8px;
        padding-left: 20px;
        padding-bottom: 2px;
        background: url(_images/flag_fr.gif) no-repeat top left;
}

#header_module .content {
	padding: 2px;
	font: normal .72em Arial, Helvetica, sans-serif;
}

#header_module form,
#header_module form div
{
	display: inline;
	margin: 0;
	padding:0;
}

/***********************************************************************************
 * pied de page
 */
#footer {
/*	height: 1.25em; /* 20px */
/*	height: 20px; -> pb entre hauteur & padding -> si hauteur < padding => sort de la boite */
	border: 1px dashed #666;
	border-bottom: 0;
	clear: both;
	background: #fff;
}
#footer .content {
	height: 20px;
	overflow: hidden;
}

#footer .content #footer_left {
	float: left;
	width: 820px;
}
#footer .content #footer_left .content {
	padding: 5px;
	font-size: .7em;
}

#footer .content #footer_right {
	float: left;
	width: 170px;
	border-left: 1px dashed #666;
}

#footer .content #footer_right .content {
	padding: 5px;
	font-size: .7em;
}

/***********************************************************************************
 * colonne gauche (authentification + menu + contactez-nous)
 */
#left_col {
	float: left;
	width: 9.6em; /* 155px */
	width: 155px;
}
/* contenu (padding,...) */
#left_col .content {
	padding: 2px;
}
/* autentification */
#auth_form {
	margin:0;
	padding:0;
	width: 140px;
	background: #eeede9;
	border: 1px solid #d7d4c5;
	/*border-top: 1px solid #827B73;*/
}
/* padding interne formulaire authentification */
#auth_form .content {
	padding: 8px;
}


/***********************************************************************************
 * menu
 */
/* boites */
/*
 * navigation: menu principal
 * navigation2: espace communication
 */
#navigation,
#navigation2
{
	margin:0;
	padding:0;
	margin-top: 25px;
	width: 140px;
	background: #f6f6f6;
	background: #e5e5e5; /* 08/11/2007 modif */
	border: 2px solid #233e59; /* bleu REGION */
	border: 2px solid #31274C; /* mauve ETAPS */
	border: 2px solid #594584; /* NOUVEAU mauve ETAPS !!! 22/08/2007 */	
	border: 2px solid #5f3451; /* NOUVEAU mauve ETAPS !!! 30/08/2007 */
	border: 2px solid #0289cd; /* Bleu espace med */	
	border: 2px solid #1360aa; /* Bleu espace med 08/11/2007 */
	border-right: 0;
}
/* espace entre nav1 et image (Espace communication) */
#navigation {
	margin-bottom: 20px;
}
/* pas de margin entre l'image titre et la nav2 (Espace communication) */
#navigation2 {
	margin-top: 0;
}
#navigation .content,
#navigation2 .content
{
	padding: 5px;
	padding-right: 0;
	font-size: .8em;
}
#navigation .content ul,
#navigation .content li,
#navigation2 .content ul,
#navigation2 .content li 
{
	list-style-type: none;
}
#navigation .content ul,
#navigation2 .content ul 
{
	padding-bottom: 3px;
}
#navigation .content ul li,
#navigation2 .content ul li
{
	padding: 0;
	/*
	padding: 2px; --> BUG MENU SOUS IE6 (les �l�ments au dessus du sous-niveau disparaissent !
	padding-right: 0;
	*/
}

/* d�co: bord gauche & bas pour les sous-niveaux */
#navigation .content ul li ul,
#navigation2 .content ul li ul 
{
	overflow: hidden; /* IE7 ! */
	border-left: 2px solid #233e59;
	border-bottom: 1px dashed #233e59;
	border-left: 2px solid #31274C; /* mauve ETAPS */
	border-bottom: 1px dashed #31274C;
	border-left: 2px solid #594584; /* NOUVEAU mauve ETAPS !!! 22/08/2007 */
	border-bottom: 1px dashed #594584;
	border-left: 2px solid #0289cd; /* PROGRAMME MED */
	border-bottom: 1px dashed #0289cd;
	border-left: 1px solid #1360aa; /* PROGRAMME MED 08/11/2007 */
	border-bottom: 1px solid #1360aa;	
	padding-left: 5px;
}

/* déco: images de fond (puces) */

 ul li.item
{
	background: url(_images/menu_gauche.gif) no-repeat 0 3px; /* aligner puce sur haut de texte 22/08/2007 */
	padding-left: 5px;
}

#navigation .content ul li,
#navigation2 .content ul li
{
	background: none;
}
#navigation .content ul li.item,
#navigation2 .content ul li.item
{
	background: url(_images/menu_gauche.gif) no-repeat 0 3px; /* aligner puce sur haut de texte 22/08/2007 */
}

#navigation .content ul li.act,
#navigation .content ul li.cur,
#navigation2 .content ul li.act,
#navigation2 .content ul li.cur
{
	background: url(_images/menu_gauche-o.gif) no-repeat 0 3px; /* aligner puce sur haut de texte 22/08/2007 */
}

/* fonts */
#navigation a,
#navigation2 a
{
	display: block;
	padding-left: 10px;	
	text-decoration: none;
	color: #666;
	color: #31274C; /* mauve ETAPS */
}
#navigation a:hover,
#navigation2 a:hover
{
	display: block;
	text-decoration: none;
	color: #233e59;
	color: #31274C; /* mauve ETAPS */
}
/* element ouvert */
#navigation .content li.cur a,
#navigation2 .content li.cur a
{
	font-weight: bold;
}


/* couleurs des niveaux et sous-niveaux */
/* modifi� 08/11/2007 */
#vertnav1 {
	background: #e5e5e5;
}
#vertnav2 {
	background: #ededed;

}
#vertnav3 {
	background: #f6f6f6;

}
#vertnav4 {
	background: #fff;
}

/* 08/11/2007 : nouvelle presentation menu */
	/* espacement elements de menu */
	ul#vertnav1 li a
	{
		margin-top: 5px;
		margin-bottom: 2px;
	}
	ul#vertnav2 li a,
	ul#vertnav3 li a,
	ul#vertnav4 li a
	{
		margin-bottom: 2px;
		margin-top: 2px;
	}
	

.vertnav1_item,
.vertnav2_item,
.vertnav3_item,
.vertnav4_item
{
	list-style-type: none;
	padding-left: 10px;
}


/* 	-------------xxX[ MENU ]Xxx-------------
	----------xxX[ Zone privée ]Xxx---------- 
*/
#navigation .content ul li.itemPrive ul,
#navigation2 .content ul li.itemPrive ul,
#navigation .content ul li.actPrive ul,
#navigation2 .content ul li.actPrive ul,
#navigation .content ul li.curPrive ul,
#navigation2 .content ul li.curPrive ul
{
	overflow: hidden; /* IE7 ! */
	border-left: 1px solid #0093cc;
	border-bottom: 1px solid #0093cc;

	padding-left: 5px;
}


#navigation .content ul li.itemPrive a,
#navigation2 .content ul li.itemPrive a,
#navigation .content ul li.actPrive a,
#navigation2 .content ul li.actPrive a,
#navigation .content ul li.curPrive a,
#navigation2 .content ul li.curPrive a
{
	color:#31AC42;
	/* 08/11/2007 -> nlle presentation acces priv� */
	color: #0289cd;
	font-weight: bold;
	font-style: italic;		
}


/* 08/11/2007 -> nlle presentation acces priv� */
#navigation .content ul li.itemPrive,
#navigation2 .content ul li.itemPrive {
	background: url('_images/menu_gauchePrive.gif') no-repeat 1px 3px; /* aligner puce sur haut de texte 22/08/2007 */
}
#navigation .content ul li.actPrive,
#navigation2 .content ul li.actPrive,
#navigation .content ul li.curPrive,
#navigation2 .content ul li.curPrive {
	url('_images/menu_gauche-oPrive.gif') no-repeat 1px 3px; /* aligner puce sur haut de texte 22/08/2007 */
}
#navigation .content ul li.itemPrive,
#navigation2 .content ul li.itemPrive,
#navigation .content ul li.actPrive,
#navigation2 .content ul li.actPrive,
#navigation .content ul li.curPrive,
#navigation2 .content ul li.curPrive
{
	background-color: #d5e3ea;
	border-left: 1px dashed #1360aa;
	border-bottom: 1px dashed #1360aa;
}



/*##############################################################################################
  #
  #				COLONNES DE CONTENU CENTRALES --> GABARIT accueil.html
  #
  ##############################################################################################
 */
 
/***********************************************************************************
 * colonnes de contenu
 */

/* 1ere colonne */

		/*.......................................................
			hack IE6
		*/
		#content_accueil #col_1 {
			float: left;
			width: 335px;
			/*background: yellow;*/
		}
		#content_accueil #col_1 .content {
			padding: 5px;
			padding-top: 10px;
		}
		/*.......................................................
			IE7 , FF : mise en page NORMALE !
		*/
		html>body #content_accueil #col_1 {
			float: left;
			width: 335px;
		}
		/* contenu (padding,...) */
		html>body #content_accueil #col_1 .content {
			padding: 10px;
		}


/* 2eme colonne */

		/*.......................................................
			hack IE6
		*/
		#content_accueil #col_2 {
			float: left;
			width: 335px;
			/*background: red;*/
			/*border: 1px inset red;*/
		}
		#content_accueil #col_2 .content {
			padding: 5px;
			padding-top: 10px;
		}
		/*.......................................................
			IE7 , FF : mise en page NORMALE !
		*/		
		html>body #content_accueil #col_2 {
			float: left;
			width: 335px;
		}
		html>body #content_accueil #col_2 .content {
			padding: 10px;
		}
/* 3eme colonne */

		/*.......................................................
			hack IE6
		*/
		#content_accueil #col_3 {
			float: left;
			width: 170px; /* 170 px */
			/*background: green;*/
			/*border: 1px inset green;*/
			
		}
		#content_accueil #col_3 .content {
			padding: 5px;
			padding-top: 10px;
		}
		/*.......................................................
			IE7 , FF : mise en page NORMALE !
		*/
		html>body #content_accueil #col_3 {
			float: left;
			width: 170px;
		}
		html>body #content_accueil #col_3 .content {
		  padding: 10px;
		}

/* fonds colonnes */
#content_accueil #wrapper_1 {
	float: left;
       	background: url(_images/zz_fd_1x2000px.gif) no-repeat 155px 0; /* left_col (menu) */
}

#content_accueil #wrapper_2 {
	float: left;
	background: url(_images/zz_fd_1x2000px.gif) no-repeat 490px 0; /* left_col (menu) + col_1 */
}

#content_accueil #wrapper_3 {
	float: left;
	background: url(_images/zz_fd_1x2000px.gif) no-repeat 825px 0;/* left_col (menu) + col_1 + col_2 */
}

/***********************************************************************************
 * contenu de la page d'accueil
 */
#content_accueil {
	overflow: hidden;
	margin-bottom: 10px;
}



/*##############################################################################################
  #
  #				COLONNES DE CONTENU CENTRALES --> GABARIT souspage3cols.html
  #
  ##############################################################################################
 */

/***********************************************************************************
 * colonnes de contenu
 */
 
/* 1ere colonne */

		/*.......................................................
			hack IE6
		*/
		#content_souspage3col #col_1 {
			float: left;
			width: 475px;
			/*background: yellow;*/
		}
		#content_souspage3col #col_1 .content {
			padding: 5px;
			padding-top: 10px;
		}
		/*.......................................................
			IE7 , FF : mise en page NORMALE !
		*/
		html>body #content_souspage3col #col_1 {
			float: left;
			width: 475px;
		}
		/* contenu (padding,...) */
		html>body #content_souspage3col #col_1 .content {
			padding: 10px;
		}


/* 2eme colonne */

		/*.......................................................
			hack IE6
		*/
		#content_souspage3col #col_2 {
			float: left;
			width: 195px;
			/*background: red;*/
			/*border: 1px inset red;*/
			
		}
		#content_souspage3col #col_2 .content {
			/*padding: 10px;*/
			padding:5px;
			padding-top: 10px;
		}
		/*.......................................................
			IE7 , FF : mise en page NORMALE !
		*/		
		html>body #content_souspage3col #col_2 {
			float: left;
			width: 195px;
		}
		html>body #content_souspage3col #col_2 .content {
			padding: 10px;
		}

/* 3eme colonne */

		/*.......................................................
			hack IE6
		*/
		#content_souspage3col #col_3 {
			float: left;
			width: 170px;
			/*background: green;*/
			/*border: 1px inset green;*/
		}
		
		#content_souspage3col #col_3 .content {
			padding: 5px;
			padding-top: 10px;
		}
		/*.......................................................
			IE7 , FF : mise en page NORMALE !
		*/
		html>body #content_souspage3col #col_3 {
			float: left;
			width: 170px;
		}
		html>body #content_souspage3col #col_3 .content {
		  padding: 10px;
		}
		
/* fonds colonnes */
#content_souspage3col #wrapper_1 {
	float: left;
	background: url(_images/zz_fd_1x2000px.gif) no-repeat 155px 0;/* left_col (menu) */
}

#content_souspage3col #wrapper_2 {
	float: left;
	background: url(_images/zz_fd_1x2000px.gif) no-repeat 630px 0; /* left_col (menu) + col_1 */
}

#content_souspage3col #wrapper_3 {
	float: left;
	background: url(_images/zz_fd_1x2000px.gif) no-repeat 825px 0;/* left_col (menu) + col_1 + col_2 */
}
/***********************************************************************************
 * contenu de la page d'accueil
 */
 
#content_souspage3col {
	overflow: hidden;
	margin-bottom: 10px;
}



/*##############################################################################################
  #
  #				COLONNES DE CONTENU CENTRALES --> GABARIT souspage2cols.html
  #
  ##############################################################################################
 */

/***********************************************************************************
 * colonnes de contenu
 */
 

/* 1ere colonne */

		/*.......................................................
			hack IE6
		*/
		#content_souspage2col #col_1 {
			float: left;
			width: 670px;
			/*background: yellow;*/
		}
		#content_souspage2col #col_1 .content {
			padding: 5px;
			padding-top: 10px;
		}
		/*.......................................................
			IE7 , FF : mise en page NORMALE !
		*/
		html>body #content_souspage2col #col_1 {
			float: left;
			width: 670px;
		}
		html>body #content_souspage2col #col_1 .content {
		  padding: 10px;
		}

/* 3eme colonne */

		/*.......................................................
			hack IE6
		*/
		#content_souspage2col #col_3 {
			float: left;
			width: 170px; 
			/*background: green;*/
		}
		#content_souspage2col #col_3 .content {
			padding: 5px;
			padding-top: 10px;
		}
		/*.......................................................
			IE7 , FF : mise en page NORMALE !
		*/
		html>body #content_souspage2col #col_3 {
			float: left;
			width: 170px;
		}
		html>body #content_souspage2col #col_3 .content {
		  padding: 10px;
		}
	



/* fonds colonnes */
#content_souspage2col #wrapper_1 {
	float: left;
	background: url(_images/zz_fd_1x2000px.gif) no-repeat 155px 0;/* left_col (menu) */
}

#content_souspage2col #wrapper_3 {
	float: left;
	background: url(_images/zz_fd_1x2000px.gif) no-repeat 825px 0; /* left_col (menu) + col_1 */
}

/***********************************************************************************
 * contenu de la page d'accueil
 */
 
#content_souspage2col {
	overflow: hidden;
	margin-bottom: 10px;
}
/*##############################################################################################
  #
  #				COLONNES DE CONTENU CENTRALES --> GABARIT souspage0cols.html
  #
  ##############################################################################################
 */
/***********************************************************************************
 * colonnes de contenu
 */
 

/* 1ere colonne */

		/*.......................................................
			hack IE6
		*/
		#content_souspage0col #col_1 {
			float: left;
			width: 840px;
			/*background: yellow;*/
		}
		#content_souspage0col #col_1 .content {
			padding: 5px;
			padding-top: 10px;
		}
		/*.......................................................
			IE7 , FF : mise en page NORMALE !
		*/
		html>body #content_souspage0col #col_1 {
			float: left;
			width: 840px;
		}
		html>body #content_souspage0col #col_1 .content {
		  padding: 10px;
		}


/* fonds colonnes */
#content_souspage0col #wrapper_1 {
	float: left;
	background: url(_images/zz_fd_1x2000px.gif) no-repeat 155px 0;/* left_col (menu) */
}



/***********************************************************************************
 * contenu de la page d'accueil
 */
 
#content_souspage0col {
	overflow: hidden;
	margin-bottom: 10px;
}
 
/*##############################################################################################
  #
  #				FIL D'ARIANE
  #
  ##############################################################################################
 */
 
/* Rootline Hack IE6 */
	#rootline {
		margin-left: 150px;
		background: #fff;
	}

	html>body #rootline {
		margin-left: 150px;
		width: 840px; /* 995 155 */
		width: 840px;
	}
	
/*##############################################################################################
  #
  #                             MENU RAPIDE
  #
  ##############################################################################################
*/
#menuRapide {
background:#fff;
width:800px;
float:right;
text-align:right;
font-size:10px;
padding-right: 15px;
}