/* 
	###################################################################################
		Sommaire
	###################################################################################

	1 Conteneur
	2 Header
	3 Menu
		3.1 Sous menu
	4 Contenu
	5 Footer
	6 Divers
	  6.1 Formulaire
	  6.2 Colonnes
	  6.3 Titres
	  6.4 Video_com
	  6.5 Parcours
	7 Gallerie
	  7.1 Navigation
	  7.2 Zones
	  7.3 Pages d'accueil des rubriques
	8 Accueil et News
	9 Messages
	10 Liens
	
*/


	body{
		font-size:12px;
		font-family: "Tahoma","Luxi Sans";
		margin-right:0;
		margin-bottom:0;	
	}


/* ###################################################################################
		1		CONTENEUR
   ################################################################################### */

	#conteneur{
	   
	  border: 1px silver solid;
	  position:absolute;
	  
	  padding:10px;
	  
	  left: 50%; 
	  top: 50%;
	  width: 800px;
	  height: 550px;
	  margin-top: -285px; /* moitié de la hauteur */
	  //margin-top: -275px; /* moitié de la hauteur */ /*Pour IE*/
	  margin-left : -410px; /*moitié de la largeur*/
	  //margin-left : -450px; /*Pour IE*/   
	}

/* ###################################################################################
 		2		HEADER
   ################################################################################### */
	#header{

	}
		#header img{
			margin-right:10px;
			border:0;
		}
	
	
	
/* ###################################################################################
 		3		MENU
   ###################################################################################	*/
	#menu{
		
		width:100%;
		height:50px;
		margin-left:50px;
		
		background-image:url(design/separ.png);
		background-repeat:no-repeat;
		background-position: 60px 49px;
	}
		#menu a{
			text-decoration:none;
		}
			#menu a:link, #menu a:visited{
				color:#4B4B4B;			
			}
			#menu a:hover, #menu a .actif{
				color:gray;
			}

		#menu ul{
			list-style-type:none;
			margin:0;

			padding-left:0;
				
			font-size:14px;
			color:#4B4B4B;    /*Uniquement si pas lien*/
			font-weight:bold;
		}
		#menu ul li{
			display: inline;
			padding: 3px 0 0 20px;
			line-height:20px;
		}

		#menu li:hover .sousmenu{
			display:block;
		}
	
	
	/* -----------------------------------------------------------------------------------
	 		3.1	SOUS MENU
	   ----------------------------------------------------------------------------------- */
		
    .sousmenu{
			position:absolute;
			font-size:12px !important;
			display:none;
			text-align:center ; 
			color:gray;
			
			left:150px;
      top:80px;
      
      font-weight:normal !important;	
		}
		
    .sousmenu a{
      color:gray !important;
    }
    .sousmenu a:hover{
      color:black !important;
    }
/* ###################################################################################
  		4		CONTENU
   ###################################################################################	*/
   
	#contenu{
		margin-top:30px;
	   height:400px;   /*Pour FF*/
	  //height:380px; /*Pour IE*/

	}

		#contenu p{
			text-align:justify;
			vertical-align: middle; 		 
		}
		
		#contenu img{
			margin:5px;
		}


/* ###################################################################################
 		5		FOOTER
   ###################################################################################	*/
	#footer{
		margin-top:10px;
	  	
		bottom:0;
				
		color:silver;
		text-align:right;			
	}



/* ###################################################################################
		6		DIVERS
   ###################################################################################	 */

  .spacer{
  	clear:both;
  }
  
    
  tr{
  	font-size:12px;
  }
  
  .alpha{
		opacity:0.3;
		filter:alpha(opacity=30); 
		-moz-opacity :0.3; 
  }



	/* -----------------------------------------------------------------------------------
	 		6.1	FORMULAIRES
	   ----------------------------------------------------------------------------------- */
	
		input, textarea{
			border:silver 1px solid;
			font-size:12px;
			padding:5px;
			padding-bottom:3px;
			color:gray;
		}
			input:focus, textarea:focus{
				color:black !important;
				background-color:white;
				border:gray 1px solid;

			}
			
      input[type=submit] {
        background-color:white;
        color:black;        
      }

    textarea {
			font-family:"Arial","Luxi Sans";
		}
		
		
	/* -----------------------------------------------------------------------------------
	 		6.2	COLONNES
	   ----------------------------------------------------------------------------------- */
		.droit{
			float:right;
		}
		.gauche{
			float:left;
		}

	/* -----------------------------------------------------------------------------------
	 		6.3	TITRES
	   ----------------------------------------------------------------------------------- */
			   
		.h0{
			font-size:30px;
			margin-bottom:10px;
		}

		h1{
			font-size:15px;
		}

		h2{
			font-size:13px;
		}

		h3{
			font-size:12px;
			color:gray;
		}

		h4{
			margin-top: -10px;
			margin-bottom: 5px;
			font-size:10px;
			color: gray;
		}
		
		
	/* -----------------------------------------------------------------------------------
	 		6.4 VIDEO_COM
	   ----------------------------------------------------------------------------------- */
		.video_com{
			float:right;
			
			width:220px; 
			
			height: 350px; 
			
			text-align:left; 
			margin-left:5px;
			 
			overflow:auto;
		}
	
	/* -----------------------------------------------------------------------------------
	 		6.4 PARCOURS
	   ----------------------------------------------------------------------------------- */
		.parcours{			
			float:left;
			
			height: 350px;
			width:100%;
			
			text-align:left; 
			margin-left:5px;
			
			overflow:auto;
		}

/* ###################################################################################
		7		GALLERIE
   ###################################################################################	 */
   

	#galerie a img{
	  	align:center;
		margin:23px;
    	border:0;	
	
		opacity:0.5;
		filter:alpha(opacity=50); 
		-moz-opacity :0.5; 
		
  	}
	
	#galerie a:hover img{
		opacity:1;
		filter:alpha(opacity=100);
		-moz-opacity :1;
	}
	
	#galerie{	
		margin-left:50px;
		margin-right:20px;
	}


	/* -----------------------------------------------------------------------------------
	 		7.1	NAVIGATION
	   ----------------------------------------------------------------------------------- */

	#galerie .navigation{
		text-align:center;
	}
		
		#galerie .navigation a{
			text-decoration:none;
			color:gray;	
		}
	
		#galerie .navigation a:hover{
			color:black;
		}
	

	#gal_nav_min{

		position:absolute;
		left:595px;
		top:480px;
		//top:450px; /*Pour IE : le footer est plus haut, donc on décale tout*/
		width:210px;  
		height:60px;	
		
   }
      
   #gal_nav_min img{
      border:0;
   }
   
	 #gal_nav_min a img{
			opacity:0.4;
			filter:alpha(opacity=40);
			-moz-opacity :0.43;  
	 }
		  #gal_nav_min a:hover img{
				opacity:0.7;
				filter:alpha(opacity=70);
				-moz-opacity :0.7;  
		  }
	
	/* -----------------------------------------------------------------------------------
	 		7.2	ZONES
	   ----------------------------------------------------------------------------------- */	
	   
	#gal_image{
		float:left;	
		text-align:center;
		
		padding-right:10px;
		
		width:60%
	}
	
	#gal_image img{
		border:none;
	}
	
	#gal_desc{
		float:right;	
		text-align:left;
		
		padding-left:10px;
		
		width:35%
	}
	

		  
		  
	/* -----------------------------------------------------------------------------------
	 		7.3	PAGES D'ACCUEIL DES RUBRIQUES
	   ----------------------------------------------------------------------------------- */	
	
	#acc_rubrique{
		margin-left:150px;
		margin-top:50px;
	}
	
	.rubrique{
		float:left;
		width:250px;
		margin:10px;	
	}
	
		a .rubrique{	
			color:gray;
			text-decoration:none;
		}
				
		
		a:hover .rubrique img{
			opacity:1;
			filter:alpha(opacity=100);
			-moz-opacity :1;
		}
		
		a:hover .rubrique{
			background-color:#F0F0F0;
			color:black;
		}
		

	.rubrique img{
		vertical-align:middle;
		border:none;
		
		opacity:0.7;
		filter:alpha(opacity=70);
		-moz-opacity :0.7;  
	}

	   
	   
		  
/* ###################################################################################
 		8  ACCUEIL ET NEWS
   ################################################################################### */
   
	.accueil img{
		border:none;
	}
   
	.news {
		margin-left:15px;
		display:block;  
		position:absolute;  
		top: 30%;      
		height: 9px;  
		margin-top: -0.5em;  
		width:400px;  
	}

	.news_separateur {
		width: 114px;
		height: 15px;
		background-image: url('design/mini_separ.png');
	}	


/* ###################################################################################
 		9 MESSAGES
   ################################################################################### */
   
   .msg_info , .msg_erreur{
   		margin:auto;
	   	width:350px;
		
		border-top:2px silver solid;
		border-bottom:2px silver solid;
		
		padding:5px;
		padding-left: 45px;	
   }
   
   .msg_info{
   		background:url(design/information.png);
		background-repeat:no-repeat;
		background-position:5px;
   }
   .msg_erreur{
		background:url(design/attention.png);
		background-repeat:no-repeat;
		background-position:5px;
   }
   
/* ###################################################################################
 		10 LIENS
   ################################################################################### */
	
	#liens {
		margin-left:5px;
	
		height:350px;
		width:100%;

		overflow:auto;
	}
	
	#liens a {
		text-decoration:none;
	}
	
	#liens a:hover {
		text-decoration:underline;
	}
	
	#liens tr {
		height:14px;
	}