/* CSS qui produit un design dit "fluid" le site occupe la totalitÈ de l'Ècran */
html, body {
	width: 100%;
	height: 100%;
}
/* force le retour ý la ligne, le plus souvent appliquÈ ý <br> */
/* Utilisable sous la forme <div class="clear">&nbsp;</div> */
.clear {
	clear: both;
}
/* force un retour ý la ligne, pour Èviter un recouvrement des icÙnes 50x50 */
/* s'il n'y a pas suffisament de texte en descriptif */
/* Utilisable sous la forme <div class="clearone">&nbsp;</div> */
.clearone {
	clear: right;
}
.clearleft {
	clear: left;
}

	
/* bien regler la marge (bugs IE) */
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	width : 100%;
	margin-right: 0px;
	background-color:#f1f1f1;

}

ul, ol, li { margin: 0px; padding: 0px;}

ul { 
	list-style: none; 
	}
	
p{ 
font-size:13px;
}
p a {color: #0000aa; text-decoration: underline;}
/* Styles des paragraphes */
h1, h2, h3 {
	margin-top: 2px;
	margin-left: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
}
h1 {
	font-size: 20px;
	line-height: 24px;
}
h2 {
	font-size: 16px;
	line-height: 24px;
}
h3 {
	font-size: 14px;
}
h4 {
	font-size:12px;
	text-align: center;
	font-weight: 200; 
}

/* Aspect des liens */
a {
	color: #0000aa;
	text-decoration: none;
}
a:link
{
	color: #0000aa;
	text-decoration: none;
	}
a:visited {
	color: #0000aa;
	text-decoration: none;
	}
a:hover {
	color:##3399cc;
	text-decoration: none;
}
a:active {
	color: #0000aa;
	text-decoration: none;
}

/* Legende image */
div.image {
 	float: left;
 }

div.image p {
 	text-align: center;
  }

/*----------------------------------------------------------------------------------
bandeau
----------------------------------------------------------------------------------*/
#logo {
	text-align: left;
	height: 120px;
	background-image: url(images/accueil/sommaire/image2.jpg);/* image galaxie */
	background-repeat:no-repeat;
}

#logo .imgOP {
	float : left;
	text-align:left;
	width: 600px;
	background-image: url(images/menu/logoOPrub.png);/* Logo OP */
	background-repeat:no-repeat;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Bloc principal de contenu */
#page {
	text-align: left;
	width: 850px;
	/* Cette marge est destinÈe ý contenir Èventuellement les liens d'Èvitement */
	margin-left: auto;
	margin-right: auto;
	background-color:#fffff9;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* EntÍte de la page d'accueil destinÈe ý contenir la banniËre principale */
#haut {
	padding:0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	width: 850pxpx;
	height: 100px;
}
#haut img {
	border : 0;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* EntÍte des pages destinÈe ý contenir la banniËre principale */
#hautpetit {
	background: #000066;
	background-image : url(images/menu/1024/image1.jpg);
	text-align: right;
	padding-left: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	width: 850px;
	height: 100px;
}
#hautpetit img {
	border : 0;
	}

/*********************************/
	
#hautpetit .imgOP {
	float : left;
	text-align:left;
	width : 400px;
	height: 100px;
	background-image: url(images/accueil/sommaire/LOGOP.png);/* Logo OP */
	background-repeat:no-repeat;
}

/*********************************/
.newsletter	{
	text-align: center;
	font-size: 11px;
	font-family : verdana;
	color: #000000;
	background-image : url(images/menu/newslettrerc.jpg);
		}
		

.newsletter a:hover {
	color: #000000;
	text-decoration: underline;
	}

/*********************************/
//menu horizantal en haut

#menus {
	float: right;
	margin:0px;
	text-align: right; 
	padding-right : 5px;
	}

#menu {
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	padding-left :0px;
	margin-left: 0px;
  }
  

  
 

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Zone pour le chemin de progression */
#hierarchie {

	color: #333366;
	text-align: left;
	padding:0px;
	margin-top: 5px;
	margin-left: 0px;
	margin-right: 0px;
	padding-bottom: 10px;
}
#hierarchie a{ 
	margin-left: 5px;
	color: #003399;
	}
#hierarchie a:hover{
	color: #ffffff; 
	background-color: #000066;
	}
#hierarchie a:active{
	color: #99cc88;
	}
#hierarchie a:link{
	color: #0000aa; 
	text-decoration: none;
	}
#hierarchie a:link:hover{
	color: #ffffff;
	background-color: #000066;
	}

.titrenouvelle
	{
	font-weight : bold;
	padding-left: 10px;
	padding-top: 10px;
	background-image : url(images/menu/menunouvelle.jpg);
	margin-bottom: 0px;
	}

/* Conteneur gauche et centre de la page */
#zonecontenu {
	text-align: justify;
	background-color: #fefefe;
	padding-left: 10px;
	padding-right: 5px;
	margin-right: 0px;
	/* le margin-right peut Ítre en % - 28% par exemple */
	
/* zoom:1.0 est reconnue par IE, elle permet de rÈgler les problËme des disparitions/
/* fantÙmes de texte */
	zoom: 1.0;
	
}

#partiecentral{
	width: 600px;
	}
	
#contenucentral{
	width: 600px;
	border-right: 1px solid #f2f2f2;
	}

#contenucentral a:hover
	{
	color: #3399cc;
	text-decoration: none;
	}

.contenu{
	margin-left: 0px;
	margin-top: 5px;
	margin-bottom: 6px;
	padding-right: 10px;
}

ul.contenu {
  	font-family: Arial, Helvetica, sans-serif;
  	font-size: 13px;
  	
	}
/*  Habillage general des menus de navigation
---------------------------------------------- */
.rubriques {
	color: #A05804;
	width: 200px;
	border: 1px solid #0000cc;
	margin-bottom: 12px;
	font-size: 12px;
	}

.menu-titre {
	color: #cc9900;
	width: 150px;
	padding: 2px 4px;
	border: 1px bold #00008b;	
}

//.breves { background-color: #6699CC; }
//.breves .menu-titre { background-color: #6699CC; }

//.syndic { background-color: #6699CC; }
//.syndic .menu-titre { background-color: #6699CC; }

//.forums { background-color: #6699CC; }
//.forums .menu-titre { background-color: #6699CC; }

.divers { background-color: #6699CC; }
.divers { background-color: #6699CC; }

/* Tableaux */
.conf {
	margin: 20px;
	border: 1px solid;
	border-collapse: collapse; }
table.conf tr.row_first { background: #FFC000; }
.conf th, .conf td { padding: 3px; text-align: left; vertical-align: middle; } 

/*  Mise en forme des textes du contenu
---------------------------------------------- */

.chapo {
	font-size: 14px;
	font-weight: bold;
	margin-top: 2px;
	padding: 15px;
	
}

.chapeau{
	padding-top: 10px;
	padding-bottom: 10px;
	margin-left: 5px;
	padding-right: 15px;
	}
	
.chapo_liste{
	font-size: 12px;
	padding-left: 0px;
	padding-bottom: 1px;
	
}


/* Style pour le texte d'un article */
/* texte doit Ítre une div pour utiliser le javascript de taille des caractËres */

.texte {
	text-align: justify;
	padding-left: 5px;
	padding-right: 15px;
	margin-top:10px;
}

.titre_art{
	margin-top: 10px;
	margin-bottom: 1px;
	text-align: center;
	font-size: 16px;
	color: #000099; /* bleu fonce */
	font-family : verdana;
	font-weight: bold;
	}

.titre_art a, .soustitre a, .chapo_liste a{
	color: #000099; /* bleu foncÈc */
	text-decoration: none;
	}

.titre_art a:hover{
	color: #3399cc;
	text-decoration: none;
	}
	
.soustitre a:hover{
	color: #3399cc;
	text-decoration: none;
}

.surtitre{
	padding: 0px;
}

.titre{
	margin-top: 10px;
	marginin-bottom: 10px;
	text-align: center;
	font-size: 18px;
	font-family : verdana;
	font-weight: bold;
	zoom: 1.0;
}

.titre_press{
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: center;
	font-size: 18px;
	font-family : verdana;
	font-weight: bold;
	zoom: 1.0;
}

.soustitre_press{
	margin: 5px;
	font-family : verdana;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
		}
	
.chapo_press {
	font-size: 12px;
	font-family : verdana;
	padding: 5px;
	padding-right: 15px;
}

.chapo_liste a:hover
	{
	color: #3399cc;
	text-decoration: none;
	}
	
lien a:hover {
	text-decoration: none;
	color: #3399cc;
	}

a img {}

.surtitre_art{
	padding-top: 10px;
	font-size: 13px;
	font-family : Verdana, arial;
	text-align: center;
	}	

.soustitre{
	margin: 10px;
	font-family : verdana;
	font-size: 12px;
	text-align: center;
	}

.logoart{
	margin: 5px;
	}
		
.maj {
	margin : 5px;
	font-size: 8px;
	texte-align: left;
}

.majart {
	margin : 5px;
	font-size: 8px
	texte-align: left;
	}
	


/* La partie droite est placÈe dans la zone droite*/
#partiedroite {
	float: right;
	width: 210px;
	margin-right: 5px;
	margin-left : 15px;
	background-color:#f6f5f6; /* gris clair*/
	padding-left : 10px;
	padding-right: 10px;
}

.cadre a:hover{
	color: #3399cc;
	}


/*  Portfolio
---------------------------------------------- */
#documents_portfolio 
	{
	margin-top: 5px;
	padding-top: 2px;
	}
	
#documents_portfolio h2 
	{
	margin-bottom: 0.4em; 
	font-size: 12px; 
	}

#document_actif 
	{
	margin-top: 10px;
	}

/*  Listes de documents joints (a un article ou une rubrique)
---------------------------------------------- */
#documents_joints {
	margin-top: 15px;
	padding-top: 2px;
	border-top: 2px solid #CCC; }
	
#documents_joints h2 
	{ 
	margin-bottom: 5px; 
	font-size: 12px; 
	}
	
#documents_joints ul 
	{ 
	margin: 0; 
	padding: 0; 
	list-style: none; 
	}
	
#documents_joints li 
	{ 
	margin-bottom: 2px; 
	}
	
#documents_joints li .spip_doc_titre  
	{ 
	font-weight: normal; 
	}

#documents_joints li .spip_doc_descriptif 
	{
	font-size: 10px; 
	}

/* Espaceur de blocs */
.nettoyeur { margin: 0; padding: 0; border: none; height: 0; line-height: 1px; font-size: 1px; }

/* Non visible a l'ecran */
.invisible { position: absolute; top: -3000em; height: 1%; }
/* Pied de page */
#bas {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	vertical-align: middle;   
	clear: both;
	padding: 2px;
	text-align: center; 
	height: 15px; 
	background: #000066;
	color: #ffffff;
	}
	
#bas a{	
	color: #ffffff;
	}
	
#bas a:hover{
	padding: 2px;
    color: #000000; /* On passe le texte en noir... */
    background-image : url(images/menu/buttonclair.jpg); /* ... et au contraire, le fond en bleu clair */ 
	}
	
#bas a:link{
	color: #ffffff; 
	text-decoration: none;
	}
	
#bas a:link:hover{
	color: #000000; 
	}

#bas small { font-size: 11px; }
#bas img { vertical-align: bottom; }



/*----------------------------------------------------------------------------------
Menu Horizontal DÈroulant
----------------------------------------------------------------------------------*/


#menu ul{ line-height : 10px; }

#menu /* Ensemble du menu */
{
        
        font-family : Verdana, Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 11px; /* hauteur du texte : 11 pixels */
        
}

.menu {
	background-image : url(images/menu/button.jpg);
	`	}
	
#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'ÈlÈment, les liens deviennent des balises de type block */
        padding : 5px; /* marge intÈrieure */
	    color : #ffffff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par dÈfaut des liens (la plupart du temps = soulignÈ) */
        text-align : left; /* on centre le texte qui se trouve dans la liste */
        
}

#ssmenu a{
	color : #000000; /* couleur du texte */
	background : #d6f4f8; /* couleur de fond */ 
	}
	
#ssmenu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: #000000; /* On passe le texte en noir... */
        background : #5acfe8; /* ... et au contraire, le fond en bleu clair */
 }
 
#menu li /* Elements des listes */      
{ 
        float : left; 
        /* pour IE qui ne reconnaÓt pas "transparent" */
      }

/* IE ne reconnaissant pas le sÈlecteur ">" */
html>body #menu li
{
   display : inline;    
}


#menu li ul /* Sous-listes */
{ 
        position: Absolute; /* Position absolue */
        width: 150px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
        background : #000000; /*couleur fond sous liste */
}


#menu li ul li /* ŠlÈments de sous-listes */
{ width: 150px; /* Largeur des sous-listes */}

#menu li  li /* ŠlÈments de sous-listes */
{ display: inline; /* Largeur des sous-listes */}

/* IE ne reconnaissant pas le sÈlecteur ">" */
html>body #menu li ul li                
{
    display: inline;
    margin-right: 1px ; 
    color: #fff000 ; 
    border-top : 0px solid transparent; /* on met une bordure transparente en haut de chaque ÈlÈment */
}

#menu li ul ul 
{
        margin    : -22px 0 0 100px ; /* On dÈcale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaÓt pas "transparent" (comme prÈcÈdemment) */
        border-left     : 1px solid #fff ; /* Petite bordure ý gauche pour ne pas coller ... */      
}

/* IE ne reconnaissant pas le sÈlecteur ">" ... je me rÈpËte ;-) */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque ÈlÈment */
}

#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: #000000; /* On passe le texte en noir... */
}

.menu a:hover {
	background-image : url(images/menu/buttonclair.jpg);
	`	}

#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un ÈlÈment de liste */
{
        left: -999em; /* On expÈdie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un ÈlÈment de liste ET sous-sous-lites lorsque la souris passe sur un ÈlÈment de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}

#menu, #menu ul /* Liste */     
{
        padding : 0px; /* marge intÈrieure */
        margin : 0px; /* ni extÈrieure */
        list-style : none; /* on supprime le style par dÈfaut de la liste*/
                
}

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

#menu ul{ line-height : 10px; }