/*
	Style Sheet pour le site Web de Solutions ZEN
	info@solutions-zen.com

*/

* {margin:0;padding:0;}

html {
  height : 100.1%;
  margin:0; padding:0;
} /* pour Opera qui met les marges dans le tag HTML */


body {
   background : #000000 url(images/Fond_site.jpg) repeat-y center 0px;
	font : 14px 'Century Gothic',Futura,'URW Gothic L',sans-serif;
	text-align:center;
   height : 100.1%;
   margin-bottom : 1px;
   color : #ffffff;
}

input, select, button, textarea	{
	font : 12px 'Century Gothic',Futura,'URW Gothic L',sans-serif;
	padding : 2px;
}

/*   COULEURS   */
.orange {color: rgb(170,78,15);}   /*  #aa4e0f    */
.vert {color: rgb(57,120,0);}   /*  #397800    */
.vertpale {color:#94d856;}

/*
textarea, input, select {
	border-top : 1px solid #222222;
	border-right : 1px solid #444444;
	border-bottom : 1px solid #555555;
	border-left : 1px solid #333333;
}
*/

/* ****************************  Formatage du texte  ***********************************/

h1 {   
   margin: 0px 0px 15px 0px;
   padding : 0 0 18px 0px;   
   font-size:30px;
   color: #ffffff;
   font-family: 'Century Gothic',Futura,'URW Gothic L',sans-serif;
   font-weight : normal;
}

h2 {
   font-size:24px;
   margin: 0 0px 15px 0px;
   padding : 0px;
   font-family: 'Century Gothic',Futura,'URW Gothic L',sans-serif;
   color: #aa4e0f;
   font-weight : normal;
}

h3 {
   font-size:18px;
   margin: 0 0px 12px 0px;
   padding : 0px;
   color: #dd6E2F; /*#aa4e0f;*/
   font-family: 'Century Gothic',Futura,'URW Gothic L',sans-serif;
   font-weight : normal;
}

h4 {
   font-size:18px;
   margin: 0 0px 12px 0px;
   padding : 0px;
   font-family: 'Century Gothic',Futura,'URW Gothic L',sans-serif;
   color: #4a9c00;
}

p, td, th, div, blockquote, ol, ul {
	font : 14px 'Century Gothic',Futura,'URW Gothic L',sans-serif;
} 						  

p {
	margin : 0 0 14px 0;
	text-align : left;	
}

table {   /* équivalent à "cellspacing 0 et padding 0"*/
    border-collapse: collapse;
    border : 2px solid #333333;
    margin : 4px;
    font : 14px 'Century Gothic',Futura,'URW Gothic L',sans-serif;
    text-align : left;
}

td {
	 font-size: 14px;
   border : 1px solid #777777;
   padding: 4px;   
   vertical-align : top;
}

ul {
	margin:  5px 0px 12px 0px;
   list-style-type : square;
   padding: 0px;	
}

ol {
	margin:  5px 0px 12px 0px;
   padding: 0px;	
}

li {
	font-size: 14px;
	margin : 0 0 2px 22px;
   padding: 0px;	
}		 


/* ******************************  classes pré-définies   *************************/
#image_sections {
   position : absolute;
   z-index : 5;
   top : 40px;
   left : 280px;
}

#proverbes  {
   position : relative;
   float : right;  
   width : 637px;	 /*255*/
   height : 170px;
   margin : 0px;
   padding : 0px;
   text-align : center;
   background-color : #ffffff;
   font-family: Georgia,'Times New Roman',times,serif;
   color : #000000;
}
#proverbes p {
   text-indent: 28px;
   padding: 20px;
   margin : 0px;
   font-style : italic;
   color: #4a9c00;
   font-size : 20px;
   text-align : justify;

}
.proverbes_auteur {
   float : right;
   font-size : 16px;
   padding:14px 0px 8px 0px;
   margin: 0px;
}

#overlay_filtre {
   z-index:150;
   background-color : #99aa99;
   position:absolute;
   top:0px;
   left:0px;
   display:none;
}

.note {
   background-color: #eeffee;
   color: #993333;
   font-weight: bold;
   padding:3px;
   margin:4px;
}


.colonne_gauche {
   margin: 0px 50px 0px 0px;
   text-align: justify;
   display: inline;
   float: left;
   width: 275px;
}
.colonne_droite {
   margin: 0px;
   text-align: justify;
   display: inline;
   float: left;
   width: 275px;
}


/* ******************************  les LIENS   ************************************/

a {font-weight : bold; outline : none;}
a:link {color:#94d856;} /*  #4a9c00  */
a:visited {color:#94d856;}
a:hover {color:#d0c0a0;} /* 998866*/
a:active {color:#94d856; border:none; }

a:focus {-moz-outline-style: none;}
/* *****************************  Formatage des images   *********************************/

img {
    margin : 0px;
    padding : 0px;
    border : none;
}

/* *********************************************************** */

#complet {
   background : transparent url(images/bg_trans.png) repeat 0px 0px;
	position:relative;		
	width : 960px;
	margin-right:auto;
	margin-left:auto;
	margin-top:0px;
	margin-bottom : 0px;
	padding:0px;
	text-align : left;
}

/* ******************************************************************************* */
/*                               ENTETE                                            */
/* ******************************************************************************* */

#entete {
   background :#ffffff url(images/Logo_solutions_zen.gif) no-repeat  63px 0px;
   position : relative;
   padding : 0px;
   margin : 0px;
	width : 960px;
   height :  160px;
}

#boutons_entete {
   position : absolute;
   top : 0px;
   right : 10px;
   width: 400px;      
}

#boutons_entete img {
   float : right;
   cursor : pointer;
   margin : 0px 0px 0px 10px;
   padding : 0px;      
}


/* les LIENS */

#entete a {color:#eeffee; text-decoration : none; font-weight: normal; outline : none;}
#entete a:link {color:#eeffee;}
#entete a:visited {color:#eef9ee;}
#entete a:hover {color:#aabbaa;}
#entete a:active {color:#ccddcc; border:none;}


#pied_page {
   background-color : transparent;
   
}

/* ******************************************************************************* */
/*                                    MENU                                         */
/* ******************************************************************************* */

#menu_sections {   
   position : relative;
   float : left;
   z-index   : 10;
   padding : 45px 0px 0px 10px;
   margin : 0px;   
   height : 640px;
   margin : 0px;
}

.menu_sections_item {
   position : relative;      
   background-color : transparent;

   font-weight : bold;
   font-size : 16px;

   height : 36px;
   width : 205px;
   padding : 0px; /* pas de padding, IMPORTANT !!!*/
   margin : 0px;
   text-align : right;
}

.menu_sections_item span { /* éléments sans liens, padding ICI, important  !!!! */
   position : relative;
   display : block;
   text-decoration : none;
   margin  : 0px;
   padding : 0px 0px 0px 10px;
   overflow : hidden;
   height : 100%;
   width : 205px;
   color : #ffffff;
}

.menu_sections_item a {  /* éléments avec liens, padding ICI,  important  !!!! */
   outline : none;
   position : relative;
   display : block;
   text-decoration : none;
   margin  : 0px;
   padding : 0px 0px 0px 10px;
   overflow : hidden;
   height : 100%;
   width : 205px;
   color : #ffffff;
}

#menu_sections a:visited {
   color : #ddeedd;
}

#menu_sections a:hover {
   color : #aa4e0f;
   background-color : #ffffff; 
}

#menu_sections a:active {
   color : #777777;
}

.sous_menu {                    /* pop up! */
   /*   border : 1px solid #133666; /*test*/
	/*background-color : #ffffff; /*test*/
	position  : absolute;
	left      : 55px; /* à partir du côté gauche des "menu_item" */
	top       : 34px;
    visibility: hidden;
    z-index   : 100;              /* s'assurer d'être sur le dessus */
	/*padding   : 2px;*/
	width      : 160px;
	height : 22px;
	text-align : left;
    overflow : hidden;  /* pour l'effet déroulant..*/
    /* filter      : alpha(Opacity=90); /* IE */
    /* moz-opacity : 0.90;              /* mozilla */
    /* opacity     : 0.90;              /* firefox et autres */
}

#menu_sections .sous_menu a {
    outline : none;
    text-decoration:none;
    display     : block;
    font-size   : 13px;
    font-weight : bold;
    height : auto;
    margin-bottom : 2px;
    padding     : 3px;
    color       : #000000;
    background-color : #4a9c00;/*#91c04c;*/
}


#menu_sections .sous_menu a:visited {color:#112211;}
#menu_sections .sous_menu a:active {color:#aaaaaa;}
#menu_sections .sous_menu a:hover {color:#000000; background-color:#94d856;}


/* ******************************************************************************* */
/*                               CONTENU                                           */
/* ******************************************************************************* */

#contenu {
   position:relative;
   z-index : 5;
   background : transparent url(images/Bande_orange.gif) repeat-y 250px 0px;
   width : 960px;
   overflow : visible;
   margin:0px;
   padding : 0px;
}

#joindre {
   color : #000000;
	 font-size:12px;
   background-color : #ffffff;
   /*position  : absolute;
   top : 625px;
   left : 60px;*/
   width : 210px;
   height : 160px;
   overflow : visible;
   padding : 5px 20px;
   /*background-color : #cccccc;*/
   z-index : 150;
   text-align : right;
}

#joindre a {
   color : #aa4e0f;
	 font-size:14px;
}


.titre_pages {
   display : none;
   text-align: right;
   padding : 10px 0px 10px 0px;
   margin : 0px 10px 0px 0px;
}

#contenu_pages {
   position : relative;
   float  : right;
   width  : 610px;
   padding: 0px;
   margin : 44px 0px 0px 0px;
   z-index : 15;
   height : 100%;
}


/* *********************************************************** */

.elements {
   clear : both;
   width : 600px;
   position : relative;
   text-align : left;
   padding : 0px;
   margin : 0px;
}

.img_gauche {
   float:left;
    margin :  4px 12px 4px 0px;
}

.img_droite {
   float: right;
    margin :  4px 0px 4px 12px;
}


.onglets {
   clear : both;
   width : 600px;
   position : relative;
   text-align : left;
   padding : 0px;
   margin : 0px;
   display : none;
}

#onglet_actif {
   display:none;
}

#menu_onglets {
   margin : 0px;
   padding: 0px;
}
#menu_onglets p {
   float : left;
   height : 28px;
   margin : 4px 0px;
}
#menu_onglets a {
   outline : none;
   width : 100%;
   height : 100%;
   padding: 4px 12px;
   font-size : 14px;
   font-weight : normal;
   text-decoration : none;
   background-color : #eeffee;
}
#menu_onglets a:hover {
   background-color : #004000;
}
#menu_onglets a.onglet_selection {
   color : #ffffff;
   background-color : #004000;
}
#menu_onglets a.onglet_selection:hover {
   color : #ffffff;
   background-color : #004000;
   cursor : default;
}


/* *********************************************************** */

/** pour la page des albums photo.. **/

#album_pres_thumbs {
   /*clear : both;   /* test */
   float : right;
   margin : 12px 0px;
   width: 600px;
   padding : 0px;
}

#album_pres_thumbs_titre {
   text-align:right;
}

.album_thumbs_pages {      
   display : none;   
   padding : 0px;
}

.album_thumbs {
   position : relative;
   float : left;
   width : 125px;
   height : 125px;
   margin: 0px 15px 5px 7px;
   padding: 0px;
   text-align : center;
   overflow : hidden;
   cursor : pointer;
}

.album_thumbs img {
   margin : auto;
   padding : 0px;
}

.album_photo_infos {
   display : none;
}

#album_pres_titre {
   text-align : center;
   margin : 2px;
}

#album_pres_photo {
   text-align : center;
   margin-top : 0px;
   margin-bottom : 0px;
   margin : auto;
   padding : 0px;
}

#album_pres_photo img {
   margin : 0px;
   padding : 0px;   
}


#album_pres_conteneur {
   width : auto;
   display : none;
   position : absolute;
   /*top  :-150px;
   left : -370px;*/
   top : 15px;
   left:15px;
   overflow : hidden; /* enlever pour l'ombrage */
   /*margin: auto;
   margin-top : 22px;*/
   background-color : #eeeeee;
   padding : 10px;
   z-index : 250;
   cursor : move;
}


#album_pres_contenu{   
   margin: auto;
   margin-top : 12px;
   padding: 4px;
   text-align:left;
   color : #000000;
}

#album_pres_contenu a {font-weight : bold; color:#397800;}
#album_pres_contenu a:link {color:#397800;}
#album_pres_contenu a:visited {color:#307033;}
#album_pres_contenu a:hover {color:#aa4e0f;}
#album_pres_contenu a:active {color:#112200; border:none;}