html, body {
margin: 0;
padding: 0;
height: 100%
}


body {
margin: 0;
padding: 0;
background : #fff url(images/bck3.jpg) center top repeat-x;
text-align : center;
font-family : verdana;
font-size : 11px;
color : #000;
}

#content{
width:792px;
height:100%;
background : #fff url(images/a-plan3.jpg) no-repeat;
margin-left:auto;
margin-right:auto;
text-align : left;
margin-top: 0px;

}
html>body #content {height : auto; min-height : 100%;  }


#haut {
margin-top : 0px;
width : 100%; 
height : 105px ;
background : #000 url(images/bando2.jpg);  }

#menu {
height : 20px; 
background-color : #fff;
margin-left : 00px;
margin-top : 0px;
}



#menu ul {
height : 20px; 
list-style : none;
background-color : transparent;
margin-left : 0px;
margin-top : 0px ;
margin-bottom : 0 ; 
margin-right : 0; 
padding : 0}

#menu li {float : left; 
margin: 0 0 0 0 ;
 padding : 0}

a.menu_accueil {color:#ccc; text-decoration:none; 
display : block ; 
width : 75px ; 
height : 20px ; 
background-image : url(images/accueil.jpg);
background-position : 0 0} 

a:hover.menu_accueil {
 background-image : url(images/accueil.jpg);
background-position : 0 20px}


a.menu_accueil_in {color:#ccc; text-decoration:none; 
display : block ; 
width : 75px ; 
height : 20px ; 
background-image : url(images/accueil.jpg);
background-position : 0 20px} 

a:hover.menu_accueil_in {
 background-image : url(images/accueil.jpg);
background-position : 0 20px;
margin-left : 5px}

a.menu_citoyen {color:#ccc; text-decoration:none; 
display : block ; 
width : 124px ; 
height : 20px ; 
background-image : url(images/titre-citoyen.jpg);
background-position : 0 0;
margin-left : 5px} 

a:hover.menu_citoyen {
 background-image : url(images/titre-citoyen.jpg);
background-position : 0 20px}

a.menu_news_citoyen{color:#ccc; text-decoration:none; 
display : block ; 
width : 124px ; 
height : 20px ; 
background-image : url(images/titre-citoyen.jpg);
background-position : 0 20px} 

a:hover.menu_news_citoyen {
 background-image : url(images/titre-citoyen.jpg);
background-position : 0 20px;
margin-left : 5px}

a.menu_vie {color:#ccc; text-decoration:none; 
display : block ; 
width : 121px ; 
height :20px ; 
background-image : url(images/titre-vie.jpg);
background-position : 0 0;
margin-left : 5px} 

a:hover.menu_vie {
 background-image : url(images/titre-vie.jpg);
background-position : 0 20px}

a.menu_vie_in {color:#ccc; text-decoration:none; 
display : block ; 
width : 121px ; 
height :20px ; 
background-image : url(images/titre-vie.jpg);
background-position : 0 20px;
margin-left : 5px} 

a:hover.menu_vie_in {
 background-image : url(images/titre-vie.jpg);
background-position : 0 20px}

a.menu_decouvrir{
color:#ccc; 
text-decoration:none; 
display : block ; 
width : 140px ; 
height : 20px ; 
background-image : url(images/titre-decouvrir.jpg);
background-position : 0 0;
margin-left : 5px} 

a:hover.menu_decouvrir {
 background-image : url(images/titre-decouvrir.jpg);
background-position : 0 20px}

a.menu_decouvrir_in {
color:#ccc; 
text-decoration:none; 
display : block ; 
width : 140px ; 
height : 20px ; 
background-image : url(images/titre-decouvrir.jpg);
background-position : 0 20px;
margin-left : 5px} 

a:hover.menu_decouvrir_in {
 background-image : url(images/titre-decouvrir.jpg);
background-position : 0 20px}

a.menu_actu {
color:#ccc; 
text-decoration:none; 
display : block ; 
width : 95px ; 
height : 20px ; 
background-image : url(images/titre-actu.jpg);
background-position : 0 0;
margin-left : 5px} 

a:hover.menu_actu {
 background-image : url(images/titre-actu.jpg);
background-position : 0 20px}

a.menu_actu_in {
color:#ccc; 
text-decoration:none; 
display : block ; 
width : 95px ; 
height : 20px ; 
background-image : url(images/titre-actu.jpg);
background-position : 0 20px;
margin-left : 5px} 

a:hover.menu_actu_in {
 background-image : url(images/titre-actu.jpg);
background-position : 0 20px}

a.menu_eco {
color:#ccc; 
text-decoration:none; 
display : block ; 
width :  84px ; 
height : 20px ; 
background-image : url(images/titre-eco.jpg);
background-position : 0 0;
margin-left : 5px} 

a:hover.menu_eco {
 background-image : url(images/titre-eco.jpg);
background-position : 0 20px}

a.menu_eco_in {
color:#ccc; 
text-decoration:none; 
display : block ; 
width : 84px ; 
height : 20px ; 
background-image : url(images/titre-eco.jpg);
background-position : 0 20px;
margin-left : 5px} 

a:hover.menu_eco_in {
 background-image : url(images/titre-eco.jpg);
background-position : 0 20px}

a.menu_contact {
color:#ccc; 
text-decoration:none; 
display : block ; 
width : 75px ; 
height : 20px ; 
background-image : url(images/tiitre-contact.jpg);
background-position : 0 0;
margin-left : 5px} 

a:hover.menu_contact {
 background-image : url(images/tiitre-contact.jpg);
background-position : 0 20px}

a.menu_contact_in {
color:#ccc; 
text-decoration:none; 
display : block ; 
width :75px ; 
height : 20px ; 
background-image : url(images/tiitre-contact.jpg);
background-position : 0 20px;
margin-left : 5px} 

a:hover.menu_contact_in {
 background-image : url(images/tiitre-contact.jpg);
background-position : 0 20px}


#centre {
width : 100% ;
}
	
#gauche {

padding-top: 40px;
width : 150px ;
height :680px; 
background-color : #f9f9f9;
font-size: 10px;
font-weight: bold ;
float : left;
margin-left : 20px ; 
margin-top : 40px;
background-image : url(images/bg_gauche.jpg);}
html>body .gauche{ 
margin-top : 10px;	 
width : 160px ;
margin-left : 30px ; }
	

#gauche-gr {
padding-top: 94px;
width : 150px ;
background-color : #fff;
float : left;
margin-left : 10px ; 
margin-top : 20px;
background: url(images/menu-haut.jpg) top left no-repeat;
}

#gauche-gr ul {
margin : 0;
padding : 0;
list-style-type: none ;}

#gauche-gr-bas {/* arrière-plan bas et sur l'ensemble du cadre */
background: url(images/menu-bas.jpg) bottom left no-repeat;
padding-bottom: 20px;
}
#gauche-gr-bas p {
margin: 0 30px 0 20px;
}

#gauche-gr-bas ul, #gauche-gr-bas li {
margin-left:3px;
padding:0;
list-style:none;
}
#gauche-gr-bas li{
text-align:left;
}
#gauche-gr-bas li a{
color:#000000;
text-decoration:none;
}
#gauche-gr-bas li a:hover{
text-decoration:none;
color : #fff;
}

#gauche-gr-bas h1 {
font-size:1.3em;
text-align:center;
margin:0;
position:relative;
top:-1em;
}


#cadre {/* conteneur global et arrière-plan du titre du cadre */
width: 175px;
padding-top: 40px;
background: url(images/ht.png) top left no-repeat;
}
#bloccadre {/* arrière-plan bas et sur l'ensemble du cadre */
background: url(images/bas.png) bottom left no-repeat;
padding-bottom: 40px;
}
#bloccadre p {
margin: 0 30px 0 20px;
}
	
	
#droite {
width : 552px;
background-color : #eaeaea; 
float : left;
margin-left : 40px; 
margin-top : 43px;
background-image : url(images/bg_droite.jpg) ;}   
html>body  .droite{	 width : 490px ;}			
		
	#droite2 {
width : 780px ;
background-color : #eaeaea; 
float : left;
margin-left : 5px; 
margin-top : 40px;
background-image : url(images/bg_droite.jpg);}   
html>body  .droite{	 width : 780px ;}		
		
.bas{width : 100% ; height : 142px; background-color : #333; border-top : 1px solid #333 ; text-align : center ; color : #fff ;}
.menu_in_bas {width : 100% ; text-align : center ; color : #fff ; margin-top : 10px ; height : 100px}
		



h1 {margin : 20px 0 0 20px ; padding : 0; font-size : 16px}
h2 {margin : 20px 0 0 20px ; padding : 0; font-size : 14px}
p {margin : 10px 20px 0 20px ; padding : 0;}
.no_top{margin : 0px 20px 5px 20px ; padding : 0;}

.expo {float : right ; margin-right : 10px ; margin-left : 15px}
.logo {float : right ; margin-right : 0px ; margin-left : 10px ; margin-top:0;}
.expo2 {float : left ; margin-left : 10px ; margin-right : 10px}
.photos {width : 480px; margin-left : 7px}
.little_expo {float : left ; margin-left : 10px; margin-top : 10px}

.spacer{clear : both ;height : 13px ; background-color : transparent ; margin-top : 5px}
.spacer2{clear : both ;background-color :  transparent ;height : 30px ;}  



a {color : #000 ; text-decoration : none}
a:hover {color : #999 ; text-decoration : none}

a.class1 {color : #fff ; text-decoration : none}
a.class1:hover {color : #ccc ; text-decoration : none}

a.class2 {color : #000 ;  font-weight : bold ; text-decoration : underline}
a.class2:hover {color : #333 ; text-decoration : underline}

a.class3 {color : #fff ; text-decoration : none}
a.class3:hover {color : #fff ; text-decoration : none}

a.class4 {color : #000 ; text-decoration : underline}
a.class4:hover {color : #000 ; text-decoration : none}

.spacer3 {clear : both ; height : 13px; }
.spacer4 {clear : both ; height : 51px; }

.footer {
background : url(images/footer.jpg) repeat-x ; 
margin : 5px 0 0 0; 
clear : both ;
height : 13px; 
padding : 0 0 20px 5px;
color : #ccc;
text-align : left;
font-size : 10px; }
 
 .footer p{
padding : 0px 0 0 0px }

 .footer a{
color : #ccc}

 .footer a:hover{
color : #fff}


.sous-menu {
background : url(images/footer3.jpg) repeat-x ; 
margin : 5px 0 0 5px; 
clear : both ;
width : 545px;
height : 12px; 
padding : 3px 0 10px 0;
color : #ccc;
text-align : center;
font-weight : bold;
font-size : 11px; }
 
 .sous-menu p{
padding : 0px 0 0 0px }

 .sous-menu a{
color : #f0f7fd}

 .sous-menu a:hover{
color : #fff;
text-decoration:underline}


.sous-menu1 {
background : url(images/footer3.jpg) repeat-x ; 
margin : 0 0 3px 0; 
clear : both ;
width : 545px;
height : 16px; 
padding : 0 0 3px 0;
color : #ccc;
text-align : center;
font-weight : bold;
font-size : 11px; }
 
 .sous-menu1 p{
padding : 0 0 3px 0}

 .sous-menu1 a{
color : #f0f7fd}

 .sous-menu1 a:hover{
color : #fff;
text-decoration:underline}

.sous-menu2 {
background : url(images/footer3.jpg) repeat-x ; 
margin : 0 0 0 0; 
clear : both ;
width : 545px;
height : 16px; 
padding : 0 0 0 0;
color : #ccc;
text-align : center;
font-weight : bold;
font-size : 11px; }
 
 .sous-menu2 p{
padding : 0 0 0 0}

 .sous-menu2 a{
color : #f0f7fd}

 .sous-menu2 a:hover{
color : #fff;
text-decoration:underline}