html,body
{
height: 100%;
margin: 0;
padding: 0;
text-align: center;
font-family:verdana;
font-size:11px;
}

#global
{
position:relative;
min-height:100%;
background-position:right 170px;
background-repeat:no-repeat;
}

/*******************************************  banniere et logo + menu en ss partie    #ffb400    #010067 *********************/

#header
{
position:relative;
height:125px;
background-image:url("../images/fond_bleu.gif");
background-repeat:repeat-x;
}

		#logo
		{
		position:absolute;
		left:40px;
		top:5px;
		height:90px;
		width:173px;
		background-image:url("../images/logo.gif");
		background-repeat:no-repeat;
		}
		
		#anim1280
		{
		position:absolute;
		left:220px;
		top:10px;
		height:90px;
		width:220px;
		}

		#anim
		{
		position:absolute;
		right:30px;
		top:20px;
		height:70px;
		width:468px;
		}


		
		
#menuglobal /* div qui contient le menu */
{
position:relative;
height:45px;
background-image:url("../images/fond_gris.gif"); /* fond gris 1px qui se repete en x*/
background-repeat:repeat-x;
}

		#menu /*     div du menu qui est positionné par rapport au div "menuglobal"       */
		{
		position:relative;
		margin-left:auto;
		margin-right:auto;
		width:500px;
		height:45px;
		}
	
		#boutons  /* boutons réactifs */
		{
		position:relative;
		width: 500px; /* largeur totale des boutons, et de l'image du menu*/
		height: 45px; 
		background: url("../images/menu.gif") no-repeat; /*  image du menu qui regroupe l'état normal et survolé*/
		margin:0px; 
		}
		
		
		#boutons li { padding: 0; list-style: none; position:absolute; margin:0;}  /* positionnement de la liste en absolute, par rapport au div "menu" */

		#boutons li, #boutons a {height: 45px; display: block;}

		#panel1 {left: 10px; width: 70px; }      /*  left: distance par rapport au blo précédent,  width: largeur du bloc (zone réactive)   */  
		#panel2 {left: 80px; width: 115px;}
		#panel3 {left: 200px; width: 160px;}
		#panel4 {left: 370px; width: 110px;}

		/* chaque panel (bloc/zone réactive) adopte comme fond l'image du menu, et la décale de x px en "W" et en "H" pour faire apparaitre l'autre image*/
		#panel1 a:hover {                               
		   background: transparent url(../images/menu.gif)
		               -10px -45px no-repeat;
		}
		#panel2 a:hover {
		   background: transparent url(../images/menu.gif)
		               -80px -45px no-repeat;
		}
		#panel3 a:hover {
		   background: transparent url(../images/menu.gif)
		               -200px -45px no-repeat;
		}
		#panel4 a:hover {
		   background: transparent url(../images/menu.gif)
		               -370px -45px no-repeat ;
		}
		
		
	
/********************************     contenu   ********************************/		



#content  /* div central qui englobe les trois autres div *******/
{
position:relative;
width:970px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
text-align:left;
}	
		#anim_menu
		{
		position:relative;
		float:left;
		width: 15px;
		padding-top:20px;
		margin-right:5px;
		height:400px;
		}

		#ssmenu /**** sous menu ( div de gauche) ****/		
		{
		position:relative;
		float:left;
		width: 150px;
		height:500px;
		margin-right:20px;
		background-color:white;
		border:1px solid #c0c0c0;
		background-color:#dddddd;
		}
		
				#liste /**** sous menu ( style de la liste) ****/
				{
				width: 145px ;
				padding-top:5px;
				padding-left: 0;
				margin: 0 auto ;
				list-style-type: none ;
				}

				#liste a
				{
				display: block ;
				width: 145px ;
				color: #000000 ;
				text-align: left ;
				padding: 5px 0 ;
				text-decoration: none ;
				border-bottom:1px dotted gray;
				}


				#liste a:hover
				{
				color: #FFFFFF ;
				background: #010067 ; 
				}


				#liste li
				{
				width: 150px ;
				}
				
				#backoffice
				{
				position:relative;
				width:145px;
				margin-top:20px;
				height:70px;
				}
				
				#logos_index
				{
				position:absolute;
				bottom:0px;
				width:145px;
				border-top:1px dotted black;
				text-align:center;
				height:200px;
				}
				
				
		
		
		#central  /**** div de contenu central (textes etc.... )  ****/
		{
		float:left;
		width:540px;
		min-height:400px;
		padding:15px;
		padding-bottom:100px;
		border: 1px dotted gray;
		
		}
		
			#img
			{
			margin-top:20px;
			margin-bottom:10px;
			width:450px;
			margin-left:50px;
			}
		
		#infos  /**** infos ( div de droite) ****/
		{
		float:left;
		width: 150px;
		height:500px;
		margin-left:20px;
		background-color:#dddddd;
		border:1px solid #c0c0c0;
		}
		
		
			.lienmagasin li
			{
			background-image: url(../images/puce_fleche2.jpg);
			background-repeat: no-repeat;
			background-position:center left;
			padding-left: 10px;
			margin: 0 0 ;
			list-style-type: round ;
			}
	
				
				
		
/********************************  footer  ********************************/			
	
#footer
{
font-family:verdana;
font-size:8px;
font-weight:bold;
color:#000055;
position:relative;
height:30px;
width:100%;
background-color:#dddddd;
}
#footer2
{
font-family:verdana;
font-size:7px;
font-weight:bold;
color:#000055;
position:relative;
height:30px;
width:100%;
background-color:#eeeeee;
}
/************************** tableaux ****************************************/

#table
{
width:500px;

}
	
/*********************** Mise En Page Paragraphes listes etc...*****************************************/	


/* styles des puces du site*/
		
		
		
		.dt_titre
		{
		color:#222;
		background-image: url(../images/dt_titre.jpg);
		padding-left:11px;
		padding-top:2px;
		margin-top:10px;
		padding-bottom:2px;
		text-decoration: none;
		display: block;
		border: 1px solid #c0c0c0;
		}


		.dt_titre:hover
		{
		background-color: #ffb400;
		color:#222;
		padding-left:11px;
		padding-top:2px;
		padding-bottom:2px;
		text-decoration: none;
		display: block;
		border: 1px solid #c0c0c0;
		}


		li
		{
		list-style:none;
		}

		/* supprime la bordure bleue des images-lien*/	
		a img {border: 0;}
		
		a
		{
		text-decoration:none;
		color: #000000 ;
		}
		
		a:hover
		{
		text-decoration:none;
		color: #010067 ;
		}

		
		.titressmenu
		{
		height: 50px;
		}
		
		.citation
		{
		font-family:verdana;
		font-size:11px;
		font-style:italic;
		}
		
		.txtssmenu
		{
		padding-left:11px;
		background-image: url(../images/puce_fleche2.jpg);
		background-repeat: no-repeat;
		background-position:center left;
		}
		
		.goodies
		{
		background-image: url(../images/puce_titre_infos.gif);
		background-repeat: no-repeat;
		background-position:center left;
		margin-left:11px;
		padding-left:11px;
		font-family:verdana;
		font-size:11px;
		font-weight:bold;
		}
		
		.titre
		{
		background-image: url(../images/puce_titre.jpg);
		background-repeat: no-repeat;
		background-position:center left;
		padding-left:11px;
		font-family:verdana;
		font-size:12px;
		font-weight:bold;
		}

				.sstitre
				{
				background-image: url(../images/puce_sstitre.gif);
				background-repeat: no-repeat;
				background-position:center left;
				margin-left:10px;
				padding-left:12px;
				font-family:verdana;
				font-size:11px;
				font-weight:bold;
				color:#555555;
				}
				
				.valeur
				{
				padding-left:20px;
				font-family:verdana;
				font-size:10px;
				font-weight:bold;
				color:#010067;
				}
				
						.ss_sstitre
						{
						padding-left:20px;
						font-family:verdana;
						font-size:10px;
						font-weight:bold;
						}
						
						.i
						{
						font-family:verdana;
						font-size:11px;
						font-style:italic;
						border:1px dotted gray;
						background-color:#efefef;
						padding:5px;
						}
		
		
		.item li,p
		{
		list-style-image:url(../images/puce_fleche.jpg);
		font-family:verdana;
		font-size:11px;
		}
		
		.itemp
		{
		background-image: url(../images/puce_fleche.jpg);
		background-repeat: no-repeat;
		background-position:center left;
		margin-left:10px;
		padding-left:20px;
		font-family:verdana;
		font-size:11px;
		font-weight:bold;
		color:#555555;
		}
		
		.etoile
		{
		color:red;
		}
		
		td
		{
		vertical-align:top;
		}
		
		.titre_infos
		{
		background-image: url(../images/puce_titre_infos.gif);
		background-repeat: no-repeat;
		background-position:center left;
		padding-left:12px;
		margin-left:10px;
		font-family:verdana;
		font-size:10px;
		font-weight:bold;
		}