html, body{ 
height: 100%; 
} 

body { 
margin: 0; 
padding: 0; 
text-align :left; 
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size : 10px ; 
background-color : #C9C7B8;
color : #fff; 
background-image:url(../images/fd1.png); /* le fond dégradé */
} 

table{
border:none;
padding:0;
margin:0;
}

/*************************************************************/
/* LES IMAGES */ 
/*************************************************************/

img {border:none}

.margeImg4 {
	float: left;
	margin: 0 4px 4px 0;
}
.margeImg10{
margin-right:10px;
}
.margeImg20 {
	float: left;
	margin: 0 20px 4px 0;
}
.margeImg40 {
	float: left;
	margin: 0 40px 4px 0;
}
.ImgPortfolio{
	padding:2px;
	margin:1px;
	border: 1px solid #000;
	background-color:#FFFFFF;
}

/*---------------------------------------------------------------------------------------------*/
/* LES CALQUES */
/*---------------------------------------------------------------------------------------------*/

/* BLOC CONTENEUR */ 

#cont_sommaire { /* sert à centrer l'interface */
	position:absolute; 
	left: 50%; 
	top: 50%; 
	width: 600px; 
	height: 690px; 
	margin-top: -380px; 
	margin-left: -300px; /* sera ainsi centré en vertical et horizontal */
	background :#C9C7B8 url(../images/fd_1.jpg) ; 
	border : 10px solid #fff; }

#cont_normal { /* sert à centrer l'interface */
	position:absolute; 
	left: 50%; 
	top: 50%; 
	width: 600px; 
	height: 690px; 
	margin-top: -380px; 
	margin-left: -300px; /* sera ainsi centré en vertical et horizontal */
	background :#C9C7B8 url(../images/fd_2.jpg) ; 
	border : 10px solid #fff; }

#cont_galerie { /* sert à centrer l'interface */
	position:absolute; 
	left: 50%; 
	top: 50%; 
	width: 600px;  
	margin-top: -380px; 
	margin-left: -300px; /* sera ainsi centré en vertical et horizontal */ ; 
	padding:20px 15px 20px 15px;
	border : 10px solid #fff; 
	background : #8E8577;}

/* MISE EN COLONNES */

#unecolonne{
	float: left;
	width: 550px;
	margin-top:20px;
	padding: 0 0 10px 14px;
}


#unecolonneVIP{
	float: left;
	width: 450px;
	background: no-repeat url(../images/fd_VIP.jpg);
	padding: 20px 20px 10px 110px;
}
#deuxcolonnes1{
	float: left;
	width: 280px;
	margin-top:20px;
	padding: 0 6px 10px 14px;
	text-align:justify;
}
#deuxcolonnes2{
	float: right;
	width: 260px;
	margin-top:20px;
	padding: 0 0 10px 0;
}


/* ENTETE ET PIED DE PAGE*/ 
#entete {
float : left ;
width : 580px ;
height : 20px;  
text-align : left; 
background : transparent ;  
margin : 4px 10px 0 10px ; 
padding:0;
font-weight: bold;
position:absolute;
}
#sloggan{
float:left;
text-align:left;
}
#date{
float:right;
text-align:right;
}

/************************ FOOTER ****************************/ 
#footer{
	position:relative;
	float:left;
	text-align:center;
	color:#666;
	margin: 0; 
	padding-top:-80px ;
	width:100%;
}

#footer a{
	text-decoration:none;}

#footer a:hover{
	text-decoration:underline;}

<!--#footer {position:absolute; left:0; top:800px; text-align : center ; width : 100% ; color : #8E8576; font-family:arial; text-transform: lowercase; margin:0; padding-left:10px; } -->

 /* BLOC CENTRE : bordures, couleur de fond et marges */ 
#centre {
float : left ; 
background : #fff ;
padding: 0; 
margin:0 0 40px 0;
border: 10px solid #8E8577 ;
height : 370px; 
width : 580px; 
overflow : auto;
color : #000;}

#centreGalerie {
float : left ; 
background : #8E8577;
padding: 0; 
margin:0;
overflow : auto;
color : #fff;}


/* encadré de titre*/
#pave_titre{
width : 100% ; 
height : 25px ;
padding : 5px; 
margin-bottom : 24px ;
background : #90B7E6 ; 
font-family: "Century Gothic", Verdana, Arial;
font-size:18px;
font-weight:bold;
color:#FFFFFF;
float:left;
}

/* BANNIERE DECORATIVE */
.banniere_taupe{
background-color:#8E8577;
background-image: url(../images/haut.gif);
width: 100%;
height:90px;
}

/* LES PAVES DE TEXTE */
.encartDeco{
background-color:#000000;
background-image: url(../images/fond_encart.gif);
width: 200px;
color:#FFFFFF;
text-align:left;
padding: 10px 10px 10px 34px;
}
.encartDecoV{
background-color:#000000;
background-image: url(../images/fond_encart2.gif);
width: 200px;
color:#FFFFFF;
text-align:left;
padding: 10px 10px 10px 34px;
}
.encartDecoO{
background-color:#B9B0A5;
background-image: url(../images/fond_encart3.gif);
width: 200px;
color:#FFFFFF;
text-align:left;
padding: 10px 10px 10px 34px;
}

#encartBeige{
background-color:#EFEFE9;
border:solid 1px #DBDAD0;
width: 90%;
margin:0 30px 20px 0;
padding:10px;
}

/* LES BORDURES */
TABLE.encadreLarge {
	BORDER-RIGHT: #817e7e 1px solid;
	BORDER-TOP: #817e7e 1px solid;
	BORDER-LEFT: #817e7e 1px solid;
	BORDER-BOTTOM: #817e7e 1px solid;
	BACKGROUND-COLOR: #f4f1f1; 
}

TABLE.encadreLarge TD {
	BORDER-RIGHT: #000000 1px solid;
	BORDER-TOP: #000000 1px solid;
	BORDER-LEFT: #000000 1px solid;
	BORDER-BOTTOM: #000000 1px solid;
	BACKGROUND-COLOR: #000000;
}

#bordureGrise {
	color: #333;
	border: 1px solid #aaa;
	margin: 0 0 30px 0;
	padding: 10px;
	width:500px;
}

#lisere { width: 400px; margin: 1em auto; padding: 1em; border: 1px solid #888; }
.page_login #lisere { color:#000000;}



/*---------------------------------------------------------------------------------------------*/
/* LES TEXTES */
/*---------------------------------------------------------------------------------------------*/

/* le nom "mirobolus" */
.mirobolus {font-size: large; font-weight: bold;}
/* mise en majuscule */
.miseenmaj {text-transform: uppercase;}

/* Les Titres*/ 
h1{
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: bold;
	color:#8E8577;
	text-transform: lowercase;}	
h2 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size : 18px ; 
	border-bottom : 1px dotted #90B7E6 ; 
	padding : 0 0 5px 0;}

h3 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size : 10px ; 
	border-bottom : 1px dotted #B9C899 ; 
	padding-bottom : 5px;
	text-transform:uppercase;}

h4 {
	font-size : 14px ; 
	padding:0;
	margin:0;
	font-variant:small-caps;
	font-stretch:extra-condensed;}
 
/* Les différentes tailles de textes */
.legende { 
	font-size: 9px;
	font-style: italic;
	font-stretch:expanded;    
    }
#lirelasuite {
	font-size: 9px;
	color:#666666;
	font-style: italic;
	font-stretch:expanded; 
	border-bottom : 1px dotted #90B7E6 ;
	text-align:right;
	}
#lirelasuite a{
	text-decoration:none;}

.txtTaille12{
	font-size:12px;
	font-variant:small-caps;
	font-weight:bold;
}

.txtTaille14{
	font-size:14px;
	font-weight:bold;
	font-stretch:condensed;
}
.txtTaille18{
	font-size:18px;
	line-height:16px;
	text-align:left;
}
.chapo { font-weight: bold;}

/* Les Couleurs des textes */
.txtVert {color:#b0c221;}
.txtBleu {color:#90B7E6;}
.txtBlanc {color: white;}
.txtNoir {color: black;}
.txtGris {color:#999999;}
.txtBeige {color:#C8B9B9;}
.txtBrun {color: #846F5B;} 
.txtOrange {color: #F89734;}

/* Les Listes */
ul {
	list-style-position: outside;
	list-style-image: url(../images/puce_verte.gif);
	padding: 0 20px 0;
	margin: 0;
}

/* Les liens */ 
a {color : #90B7E6; font-weight:bolder }  
a:hover {color : #90B7E6; font-weight:bolder } 
a.blanc {text-decoration : none ; font-weight : bold ; color : #ffffff}

a.class1 {text-decoration : none ; text-transform : uppercase ; font-weight : bold}
a:hover.class1 {text-decoration : none ; text-transform : uppercase; }


/* paragraphes */ 
p { 
 padding : 0 ;
 margin-top : 0 ; 
 margin-bottom : 15px ; 
 margin-right : 10px;}


/* ENCADREMENT DE BLOCS DE TEXTE */	
fieldset {
	border: 1px solid #817e7e;
	margin: 10px;
	padding: 10px;
}



/* FORMULAIRE */ 
input {
width : 275px ; 
margin : 0 0 5px 0
}
textarea { 
margin : 0 0 10px 0 ;
 width : 275px ; 
}


/*---------------------------------------------------------------------------------------------*/
/* PAGE D'ACCUEIL */
/*---------------------------------------------------------------------------------------------*/
/* bloc texte avec ascenseur */
#divScrollerAcc {position:absolute; overflow:hidden; z-index:9; left:40px; top:500px; width:380px; height:190px; clip:rect(0px 380px 190px 0px); visibility:visible;}
.dynPageAcc { position:absolute; z-index:10; left:0; top:0; width:350px; visibility:hidden; color:#DEDCDA; padding:60px 10px 30px 10px;}
#flecheH{position:absolute; left:390px; top:650px; width:11px; height:10px; z-index:1}
#flecheB{position:absolute; left:390px; top:664px; width:11px; height:10px; z-index:2}

#edito {position:absolute; left:20px; top:510px; width:450px; height:auto;}

/*---------------------------------------------------------------------------------------------*/
/* LE MENU DE NAVIGATION AVEC SURVOL */
/*---------------------------------------------------------------------------------------------*/
 
#menu {
padding: 0; 
margin : 20px 0 0 0; 
list-style : none ; 
float : right ; 
height : 280px;}

#menu li a span{ /* les textes du menu : décalés pour rester invisibles */
position: absolute;
left: -5000px;}

#menu li {
float : left; 
display : block;} 

#menu li a {
padding : 0; 
margin : 0 0 0 1px ;
width : 30px ; 
height : 280px ; 
display : block;
background : #ccc ; 
-moz-opacity:0.9;
opacity: 0.9;
filter:alpha(opacity=90);} 

#menu li a:hover {background : #666 ;} 

#menu a.produits{
background: url(../images/boot_photo_produits.jpg); 
background-position : 30px 0;}
#menu a.produits:hover {
background: url(../images/boot_photo_produits.jpg); 
background-position : 0 0 ;}
#menu a.produitsON {
background: url(../images/boot_photo_produits.jpg); 
background-position : 0 0 ;}
#menu a.produitsON:hover {
background: url(../images/boot_photo_produits.jpg); 
background-position : 0 0 ;}

#menu a.home{
background: url(../images/boot_photo_accueil.jpg); 
background-position : 30px 0}
#menu a.home:hover {
background: url(../images/boot_photo_accueil.jpg); 
background-position : 0 0 ;}
#menu a.homeON {
background: url(../images/boot_photo_accueil.jpg); 
background-position : 0 0 ;}
#menu a.homeON:hover {
background: url(../images/boot_photo_accueil.jpg); 
background-position : 0 0 ;}

#menu a.cqui{
background: url(../images/boot_photo_cqui.jpg); 
background-position : 30px  0}
#menu a.cqui:hover {
background: url(../images/boot_photo_cqui.jpg); 
background-position : 0 0 ;}
#menu a.cquiON {
background: url(../images/boot_photo_cqui.jpg); 
background-position : 0 0 ;}
#menu a.cquiON:hover {
background: url(../images/boot_photo_cqui.jpg); 
background-position : 0 0 ;}

#menu a.realisations{
background: url(../images/boot_photo_realisations.jpg); 
background-position : 30px 0 ;}
#menu a.realisations:hover {
background: url(../images/boot_photo_realisations.jpg); 
background-position : 0 0;}
#menu a.realisationsON {
background: url(../images/boot_photo_realisations.jpg); 
background-position : 0 0;}
#menu a.realisationsON:hover {
background: url(../images/boot_photo_realisations.jpg); 
background-position : 0 0;}

#menu a.vip{
background: url(../images/boot_photo_vip.jpg); 
background-position : 30px 0}
#menu a.vip:hover {
background: url(../images/boot_photo_vip.jpg); 
background-position :  0 0 ;}
#menu a.vipON {
background: url(../images/boot_photo_vip.jpg); 
background-position :  0 0 ;}
#menu a.vipON:hover {
background: url(../images/boot_photo_vip.jpg); 
background-position :  0 0 ;}

#menu a.contact{
background: url(../images/boot_photo_contact.jpg); 
background-position : 30px 0}
#menu a.contact:hover {
background: url(../images/boot_photo_contact.jpg); 
background-position :  0 0 ;}
#menu a.contactON {
background: url(../images/boot_photo_contact.jpg); 
background-position :  0 0 ;}
#menu a.contactON:hover {
background: url(../images/boot_photo_contact.jpg); 
background-position :  0 0 ;}

#menu a.ensemble{
background: url(../images/boot_photo_ensemble.jpg); 
background-position : 30px 0}
#menu a.ensemble:hover {
background: url(../images/boot_photo_ensemble.jpg); 
background-position : 0 0 ;}
#menu a.ensembleON {
background: url(../images/boot_photo_ensemble.jpg); 
background-position : 0 0 ;}
#menu a.ensembleON:hover {
background: url(../images/boot_photo_ensemble.jpg); 
background-position : 0 0 ;}

/* DIAPORAMA CHAISSAC */
#BananAlbum {
	width:600px; height:400px; position:absolute; z-index:100; 
}

/* PAGES DE LOGIN */

/* Page de login
---------------------------------------------- */
.page_login { text-align: center; }
.page_login #minipres { width: 28em; color:#000000;}
.page_login .formulaire_menu_lang { float: right; font-size: .9em; }
.page_login .formulaire_menu_lang label { display: none; }
.page_login .formulaire_menu_lang select { display: inline; }
.page_login .formulaire_menu_lang input.submit { display: inline; }
.page_login .formulaire_login { clear: both; text-align: left; font-size: .9em; }
.page_login .formulaire_login fieldset { margin: 0; padding: 0; border: 1px solid #babdb6; padding: 1em; font-size: 1em; }
.page_login .formulaire_login fieldset .spip_logos { float: right; padding-left: 5px; }
.page_login .formulaire_login fieldset ul { float: left; width: 70%; margin: 0; padding: 0; list-style: none; }
.page_login .formulaire_login fieldset ul li { margin: 0; padding: 0.50em 0; }
.page_login .formulaire_login fieldset ul li label,
.page_login .formulaire_login fieldset ul li .erreur_message,
.page_login .formulaire_login fieldset ul li .details { display: block; width: auto; }
.page_login .formulaire_login fieldset ul li label.nofx { display: inline; }
.page_login .formulaire_login fieldset ul li input.text,
.page_login .formulaire_login fieldset ul li input.password { width: 11em; margin: 0; display: inline; }
.page_login .boutons { text-align: right; }
.page_login .retour { clear: both; text-align: center; font-size: .9em; }

#minipres { width: 38em; background: #fff repeat; margin: 1em auto; padding: 1em; border: 1px solid #888; }
body.minipres fieldset, body.minipres .fieldset  { border: 1px solid #ccc; padding: 1em; }
input, textarea, select { font-size: 100%; font-family: inherit; }


/* Oublie du mot de passe
---------------------------------------------- */
body.pass #minipres {}
body.pass .formulaire_spip { background: none; border: none; margin: 0; padding: 0; }
.pass #minipres { width: 90%; }


/* styles de spip */
.spip_documents_center {
	text-align: center;
	margin: 4px 4px 20px 4px !important;
}

.spip_documents_left {
	text-align: left;
	margin: 0 20px 20px 0 !important;
}

.spip_documents_right {
	text-align: right;
	margin : 4px 0 20px 4px !important;
	}