/* 
	DEFAULT STYLESHEET
	All pages inherrit from this stylesheet, so anything reusable, 
	site-wide or generic goes here.
*/

/* ------------------------------------------------------------------------
	HTML BODY tag and Page div
------------------------------------------------------------------------ */

body
{
	color:#333333;
	margin:0;
  	padding:0;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	background:#dedcc5 url(images/bg_entete.gif) repeat-x top left;
}

#container
{
	width:955px;
	margin:0 auto;
	text-align:left;
}


/* ----------------------------
   Globals
---------------------------- */

h1
{
	font-size:1.15em;
	margin:0;
	color:#fff;
	background:#6e89ad url(images/entete_bg.gif) repeat-x top left;
}

h2
{
	font-size:1.2em;
	margin:0;
	color:#4b5f32;
	padding:0 0 4px 0;
}

h3
{
	font-size:1em;
	margin:0;
	color:#333;
	padding:0 0 7px 0;
}

p
{
	font-size:1em;
	color:#333;
	margin:0;
	padding:0;
}

input, select
{font-family: Arial, Helvetica, sans-serif;}

.gras
{font-weight:bold;}

.italic
{font-style:italic;}

/* --------------------------------------------------------------- */
/* ---- Corps ---------------------------------------------------- */

/* ------------------------------------------------------------ */
/* --- entête ------------------------------------------------- */

#entete
{width:955px;}

/* -- top menu ----------------------- */

#topMenu
{
	width:955px;
	float:right;
}

#topMenu ul
{
	float:right;
	list-style:none;
	margin:0;
	padding:10px 29px 0 0;
}

#topMenu ul li
{
	float:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#fff;
	font-size:0.9em;
	margin:0;
	padding:0 0 0 19px;
}

#topMenu a:link, #topMenu a:visited, #topMenu a:active
{
	color:#fff;
	text-decoration:none;
}

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


/* ------------------------------- */
/* --- logo ---------------------- */

div#logoCompagnie
{
	float:left;
	width:245px;
	padding:17px 0 0 12px;
}

div#logoCompagnie img.logo
{display:block;}

#logoPrint
{display: none;}

/* ------------------------------------------------------------------ */
/* ----------- Menu ------------------------------------------------- */

/* menu fr ----------- */
#zoneMenu
{
	float:right;
	width:659px;
	margin:87px 0 0 0;
}

#zoneMenu img{display:block;}


#zoneMenu ul
{
	list-style:none;
	margin:0;
	padding:0;	
}

#zoneMenu ul li
{
	float:left;
	font-size:1.1em;	
	margin:0;
	padding:0;
	border-right:1px solid #093660;	
}

#zoneMenu ul li.noborder
{border:none;}

/* menu en ----------- */
#zoneMenu_en
{
	float:right;
	width:659px;
	margin:87px 0 0 0;
}

#zoneMenu_en img{display:block;}


#zoneMenu_en ul
{
	list-style:none;
	margin:0;
	padding:0;	
}

#zoneMenu_en ul li
{
	float:left;
	font-size:1.1em;	
	margin:0;
	padding:0;
	border-right:1px solid #093660;	
}

#zoneMenu_en ul li.noborder
{border:none;}
/* ------------------------------------------------------------------------ */
/* -- Zone Secteurs ------------------------------------ */

#zoneSecteurs
{
	width:955px;
	background:#fff url(images/zsecteurs_coinTD.gif) no-repeat top right;
	margin:14px 0 4px 0;
}

#photoSecteur
{
	float:left;
}

#boxSecteurs
{
	width:406px;
	float:left;
	margin:0 0 0 6px;
	padding:34px 0 0 0;
	background:url(images/entete_secteurs.gif) no-repeat 2px 8px;
}

#boxSecteurs_en
{
	width:406px;
	float:left;
	margin:0 0 0 6px;
	padding:34px 0 0 0;
	background:url(images/entete_secteurs_en.gif) no-repeat 2px 8px;
}

#colGau_secteur
{
	float:left;
	width:196px;
	margin:0 14px 0 0;
}

#colDr_secteur
{
	float:left;
	width:196px;
}

/* ---------------------------------------------------------------------- */
/* --- Zone contenu ----------------------------------------------------- */

#zoneContenu
{
	width:955px;
	background:#fff;
}

div#zoneContenu{height:450px;}

html>body div#zoneContenu
{
	height:auto;
	min-height:450px;
}

#zoneContenu h1
{padding:12px 0 12px 67px;}

/* ----------------------------------------------------------- */
/* -- Accueil ------------------------------------------------ */

.contenu
{padding:35px 80px 0 65px; float:left;}

.contenu p
{
	padding:0 0 18px 0;
	text-align:justify;
}

/* -- boîte de photos ------------------------------ */

/* -- box photo pour lorsque ces boîtes sont alignées à la verticale ----- */
.zonePhoto
{	
	width:168px;	
	float:right;
	margin:0 0 0 20px;
}

.boxPhoto
{
	background:url(images/photo_box_bg.gif) no-repeat top left;
	width:168px;
	height:227px;
	padding:9px 0 0 0;
	margin:0 0 5px 0;
}

.boxPhoto img
{
	display:block;
	margin:0 0 0 9px;
}

.boxPhoto_longue
{
	background:url(images/photo_box_bg_long.gif) no-repeat top left;
	width:168px;
	height:324px;
	padding:9px 0 0 0;
	margin:0 0 5px 0;
}

.boxPhoto_longue img
{
	display:block;
	margin:0 0 0 9px;
}

/* -- box photo pour lorsque ces boîtes sont alignées à l'horizontale ----- */

.zonePhoto_horizontale
{	
	width:672px;	
	margin:0 0 15px 0;
}

.boxPhoto_horizontale
{
	background:url(images/photo_box_bg.gif) no-repeat top left;
	width:168px;
	height:227px;
	float:left;
	padding:9px 0 0 0;
	margin:0 84px 0 0;
}

.boxPhoto_horizontale img, .boxPhoto_horizontale_last img
{
	display:block;
	margin:0 0 0 9px;
}

.boxPhoto_horizontale_last
{
	background:url(images/photo_box_bg.gif) no-repeat top left;
	width:168px;
	height:227px;
	float:left;
	padding:9px 0 0 0;
	margin:0;
}

/* ---------------------------------------------------------------------- */
/* -- Les Secteurs ------------------------------------------------------ */

/* -- entêtes --------------------------------------- */

#entetesSecteurs
{width:955px;}

#entetesSecteursGau
{
	float:left;
	width:216px;
	margin:0 1px 0 0;
	background:#3a6290 url(images/entetesSecteursGau_bg.gif) repeat-x top left;
}

#entetesSecteursDr
{
	float:left;
	width:738px;
	background:#6e89ad url(images/entete_bg.gif) repeat-x top left;
}

#entetesSecteursGau h1
{
	padding:10px 0 11px 20px;
	background:none;
}

#entetesSecteursGau h1 a:link, #entetesSecteursGau h1 a:visited, #entetesSecteursGau h1 a:active
{
	color:#fff;
	text-decoration:none;
}

#entetesSecteursGau h1 a:hover
{text-decoration:underline;}

#entetesSecteursDr h1
{
	padding:10px 0 11px 19px;
	background:none;
}

/* -- zone de contenu --------------------------------------- */

#zoneContenuSecteurs
{
	width:955px;
	background:url(images/zoneContenuSecteurs_bg.gif) repeat-y top left;
}

div#zoneContenuSecteurs{height:400px;}

html>body div#zoneContenuSecteurs
{
	min-height:400px;
	height:auto;
}

/* -- Menu colonne de gauche secteurs -------------------------- */

#colMenu_secteur
{
	float:left;
	width:216px;
	margin:0 1px 0 0;
}

#menu
{width:216px;}

#mainMenu
{
	list-style:none;
	margin:0;
	padding:0;
}

#mainMenu li
{
	width:216px;
	margin:0;
	padding:0;
	background:#fff url(images/menuSecteur_bg.gif) repeat-x bottom left;
}

#mainMenu a
{
	display: block;
	height:1%;
	text-decoration:none;
	color:#002c5f;
	font-size:1em;
	padding:17px 0 7px 30px;
	margin:0;
	font-weight:bold;
	list-style:none;	
}

#mainMenu a:hover, #mainMenu a.selected
{background:url(images/fleche_menu.gif) no-repeat 17px 20px;}

.imgRecyclage
{
	display:block;
	margin:31px 0 0 7px;
}

#mainMenu h2
{
	font-size:1.1em;
	padding:5px 10px 0 30px;
}
#mainMenu p
{padding:0 10px 10px 30px;}

#mainMenu p a
{
	display:inline;
	text-decoration:underline;
	font-style:italic;
	color:#002c5f;
	font-size:1em;
	padding:0;
	margin:0;
	font-weight:normal;
	list-style:none;
}
#mainMenu p a:hover
{
	background:none;
	text-decoration:none;
}
/* -- Zone de contenu colonne droite des secteurs -------------------------- */

#colContenu_secteur
{
	float:left;
	width:738px;
	padding:35px 0 15px;
}

.boxContenu_photoSecteurs
{
	float:left;
	width:484px;
}

/* -- Éléments de contenu textuel ---------------- */

.contenuSecteur
{
	padding:0px 46px 0 20px; 
	float:left;
}

.contenuSecteur p
{
	padding:0 0 18px 0;
	text-align:justify;
}

.contenuSecteur a:link, .contenuSecteur a:visited, .contenuSecteur a:active, .tabGuide td a:link, .tabGuide td a:visited, .tabGuide td a:active, .contenu a:link, .contenu a:visited, .contenu a:active
{
	color:#aec751;
	text-decoration:underline;
}

.contenuSecteur a:hover, .tabGuide td a:hover, .contenu a:hover
{text-decoration:none;}

.contenuSecteur ul, .contenu ul
{
	list-style:none;
	margin:0;
	padding:0 0 18px 21px;
}

.contenuSecteur ul li, .contenu ul li
{
	background:url(images/liste_dot.gif) no-repeat 0 5px;
	margin:0;
	padding:0 0 10px 15px;
}

.contenuSecteur ol
{
	margin:0;
	padding:0 0 18px 30px;
}


.contenuSecteur ol li
{
	margin:0;
	padding:0 0 5px 0;
}

.contenuSecteur h2.titreListe
{
	font-size:1.2em;
	margin:0;
	color:#333;
	padding:0 0 4px 20px;
}

.listeIntContenu
{
	list-style:none;
	margin:0 !important;
	padding:10px 0 0 0 !important;
}

.listeIntContenu li
{
	background:none !important;
	margin:0 !important;
	padding:0 0 10px 45px !important;
	background:url(images/fleche_on.gif) no-repeat 30px 5px !important;
}

/* -- liste intérieure du menu de la colonne de gauche --------------------- */

.listeInt
{
	list-style:none;
	margin:0 !important;
	padding:0 !important;
}

.listeInt li
{
	background:none !important;
	margin:0 !important;
	padding:0 0 10px 0 !important;
}

.listeInt li a
{
	margin:0 !important;
	padding:2px 0 0 45px !important;
	background:url(images/fleche_off.gif) no-repeat 30px 5px !important;
}

.listeInt li a:hover, .listeInt li a.select
{color:#5b7f39 !important; background:url(images/fleche_on.gif) no-repeat 30px 5px !important;}

/* ------------------------------------------------------------------------------------- */
/* -- Tableau Liste de produits des DIFFÉRENTS SECTEURS -------------------------------- */

.tabListe
{
	width:715px;
	border:1px solid #666699;
	margin:0 0 11px 0px;
}

.tabListe th.titreListe, .tabListe_prods th.titreListe
{
	background:#cccccc;
	color:#31393f;
	text-align:left;
	padding:5px 4px;
	font-size:1.1em;
}

.tabListe th, .tabListe_prods th
{
	font-size:0.9em;
	padding:4px 10px;
	text-align:left;
	border-right:1px solid #bcbdc0;
	border-bottom:1px solid #bcbdc0;
}

.tabListe td, .tabListe_prods td
{
	font-size:0.9em;
	padding:4px 10px;
	border-right:1px solid #bcbdc0;
	border-bottom:1px solid #bcbdc0;
}

.tabListe th.noborderDr, .tabListe td.noborderDr, .tabFiche th.noborderDr, .tabFiche td.noborderDr, .tabGuide td.noborderDr, .tabAgenda td.noborderDr, .tabAgenda th.noborderDr, .tabListe_prods td.noborderDr, .tabListe_prods th.noborderDr
{border-right:none;}
.tabListe th.noborderBas, .tabListe td.noborderBas, .tabFiche th.noborderBas, .tabFiche td.noborderBas, .tabGuide td.noborderBas, .tabAgenda td.noborderBas, .tabListe_prods th.noborderBas, .tabListe_prods td.noborderBas
{border-bottom:none;}
.bg_gris
{background:#d9d9d9;}

/* ------------------------------------------------------------------------------------------ */
/* -- Tableau Liste de produits de la page LISTE DE PRODUITS -------------------------------- */

.tabListe_prods
{
	width:805px;
	border:1px solid #666699;
	margin:0 0 11px 10px;
}

/* ------------------------------------------------------------- */
/* -- Tableau Fiche technique ---------------------------------- */

.tabFiche
{
	width:705px;
	margin:0 0 10px 0px;
}

.tabFiche th
{
	background:#294676;
	color:#fff;
	text-align:left;
	padding:7px 14px;
	font-size:1em;
	border-right:1px solid #d3d6d9;
}

.tabFiche th.notitle
{padding:0;}

.bg_colCentreGrisPale
{background:#e1e3e5;}
.bg_colGrisFonce
{background:#d3d6d9;}
.tabFiche td
{
	font-size:1em;
	padding:6px 10px 0 14px;
}

.tabFiche td p
{
	font-size:1em;
	padding:6px 0 12px 0;
}

.tabFiche td.lastCellule
{
	font-size:1em;
	padding:6px 10px 20px 14px;
	background:#d3d6d9 url(images/tab_coinBG.gif) no-repeat bottom left;
}

.tabFiche ul
{
	list-style:none;
	margin:0;
	padding:0 0 10px 0;
}

.tabFiche ul li
{
	margin:0;
	padding:0 0 3px 0;
	background:none;
}

/* -- tableau à l'intérieur de celui de la fiche technique ----- */

.tabFiche_int th
{
	background:none;
	text-align:left;
	font-size:1em;
	color:#000;
	padding:0 0 5px 0 !important;
}

.tabFiche_int td
{padding:0 0 2px 0 !important;}

/* -- bloc de téléchargemnt de la fiche techniques ------------- */

#box_telechargement_fiche
{
	float:right;
	margin:0 10px 20px 0;
	border:1px solid #294676;
	background:#e1e3e5;
}

#box_telechargement_fiche p
{padding:6px 15px;}

#box_telechargement_fiche p a:link, #box_telechargement_fiche p a:visited, #box_telechargement_fiche p a:active
{color:#294676;}

#box_telechargement_fiche p a:hover
{text-decoration:none;}

/* ---------- Bloc de photos ----------------------------------- */

.blocEtapes
{
	width:670px;
	margin:0 0 30px 0;
}

.blocEtapesThumb
{
	float:left;
	width:202px;
	margin: 0 29px 0 0;
	padding:0;
	border:1px solid #4b5f32;
}

.blocEtapesThumbLast
{
	float:left;
	width:202px;
	margin:0;
	padding:0;
	border:1px solid #4b5f32;
}

.blocEtapesThumb h2, .blocEtapesThumbLast h2
{
	background:none;
	padding:4px 5px 0 5px;
	margin:0;
	color:#4b5f32;
	text-align:left !important;
}

.photoEtapes
{
	width:202px;
	background:#fff;
	padding:4px 0 3px 0;
	text-align:center;
}

.photoEtapes img
{
	border:1px solid #4b5f32;
}

.txtEtapes
{
	border-top:1px solid #4b5f32;
	background:#e9e9e9;
}

.txtEtapes p
{
	color:#333;
	text-align:left;
	padding:4px 5px;
}

/* ------------------------------------------------------------- */
/* -- Tableau Avantages et bénéfices --------------------------- */

.tabAvantages
{
	width:690px;
	margin:0 0 10px 0px;
}

.tabAvantages th
{
	color:#333;
	text-align:left;
	padding:0 0 10px 4px;
	font-size:1em;
}

.tabAvantages td
{
	color:#333;
	text-align:left;
	padding:6px;
	font-size:1em;
	border-right:1px solid #4b5f32;
	border-bottom:1px solid #4b5f32;
}

.tabAvantages td.bg_grisAvantages
{background:#e9e9e9;}

.tabAvantages td.borderTop
{border-top:1px solid #4b5f32;}
.tabAvantages td.borderLeft
{border-left:1px solid #4b5f32;}

.tabAvantages td ul
{
	list-style:none;
	margin:0;
	padding:4px 5px;
}

.tabAvantages td ul li
{
	background:url(images/liste_dot.gif) no-repeat 0 5px;
	padding:0 0 5px 10px;
	margin:0;
}

/* ------------------------------------------------------------- */
/* -- Tableau Guide d'installation --------------------------- */

.tabGuide
{
	width:690px;
	margin:0 0 10px 0px;
	border:1px solid #4b5f32;
}

.tabGuide th
{
	color:#333;
	text-align:center;
	padding:8px 0;
	font-size:1em;
	background:#e9e9e9;
	border-bottom:1px solid #4b5f32;
}

.tabGuide td
{
	color:#333;
	text-align:left;
	padding:4px;
	font-size:1em;
	border-bottom:1px solid #4b5f32;
	border-right:1px solid #4b5f32;
}

.tabGuide td.tdCentrer
{text-align:center;}

.tabGuide td.cellImg
{border-right:1px solid #4b5f32;}

/* ------------------------------------------------------------- */
/* -- Tableau Agenda ------------------------------------------- */

.tabAgenda
{
	width:670px;
	margin:0 0 25px 0;
	border:1px solid #4b5f32;
}

.tabAgenda th
{
	color:#333;
	text-align:left;
	padding:8px 10px;
	font-size:1em;
	background:#e9e9e9;
	border-bottom:1px solid #4b5f32;
	border-right:1px solid #4b5f32;
}

.tabAgenda td
{
	color:#333;
	text-align:left;
	padding:7px 10px;
	font-size:1em;
	border-bottom:1px solid #4b5f32;
	border-right:1px solid #4b5f32;
}

/* ----------------------------------------------------- */
/* -- Section Carrière --------------------------------- */

#formContact
{margin:10px 0 20px 0;}

.champsObligatoire
{
	font-size:1.1em;
	color:#C72943;
}

.lesChamps, .lesChampsContact
{margin-bottom:15px;}

.lesChamps label, .lesChampsContact label
{
	font-size:1em;
	color:#000;
	font-weight:bold;
}

.lesChamps input
{
	width:225px;
	margin:7px 0 0 0;
}

/* ------------------------------------------------------------- */
/* -- Tableau Contact ------------------------------------------- */

.tabFormContact
{width:460px;}

.lesChampsContact input
{
	width:180px;
	margin:7px 0 0 0;
}

.lesChampsContact input.inomPrenom, .lesChampsContact input.icompagnie, .lesChampsContact input.icourriel, .lesChampsContact textarea
{width:220px;}

.ibAnnuler
{margin:0 0 0 10px;}

/* ---------------------------------------------------------------------- */
/* --- Pied ------------------------------------------------------------- */

#pied
{
	background:url(images/pied_bg.gif) no-repeat top left;
	width: 955px;
	padding:25px 0 3px 0;
	text-align:center;
}

#pied
{font-size:0.9em;}

#pied p a:link, #pied p a:visited, #pied_int p a:active
{
	text-decoration:underline;
	color:#333333;
}

#pied p a:hover
{text-decoration:none;}