@charset "iso-8859-1";

body {
	padding:0px;
	margin:0px;
	text-align:center;
	font: 12px Arial;
	background: white;
	color: #cc6b4a;
}

h1, h2, h3, h4, h5, h6, p {
  position: relative;
  margin:0;
  padding:0;
}
h3 {
	margin:0;
	padding:0;
}
img {
	border:0;
}
a {
	text-decoration:none;
	color: #B22B00;
	font-weight:bold;
}
a:hover {
	color: TOMATO;
}


/* Le contenu général, pour centrer le site */
#conteneur {
	width:765px;
	margin-right:auto;
	margin-left:auto;
	text-align:left;
}
#tooltip {
	display:none;
	position:absolute;
	background: #FEDECE;
	padding:5px;
	border: 1px solid #B22B00;
	width:250px;
}
/* Le date picker */
#tooltip .date {
	width:250px;
	font-size:10px;
	text-align:center;
}
/* Le tableau du calendrier */
#tooltip .date .calendar {
	font-size: 10px;
}
#tooltip .date .calendar a {
	display:block;
	width:15px;
	height:15px;
	text-align:center;
}
#tooltip .date .calendar a:hover {
	background: #FFA07A;
	color:snow;
	text-decoration: none;
}
/* Le jour actuel */
#tooltip .date .today {
	color: crimson;
	font-weight:bold;
	background:white;
}
/* Les jours sur le mois prochains */
#tooltip .date .en_trop {
	color: gray;
}

#header {
	height:125px;
	background: url("../../images/interface/fond_banniere.jpg") top left no-repeat;
}
/* On a du texte dans le h1, nom du site et description mais qu'on mets offscreen */
#header h1 {
	display:none;
}
#header .logo {
	position:absolute;
	width:154;
	height:125px;
	display:block;
}
#header .liens {
	width:405px;
	position:absolute;
	top:58px;
	margin-left:400px;
}
#header .liens a {
	color:white;
	display:block;
	float:left;
	width:100px;
	margin-right:15px;
	text-align:center;
}
#header .liens a:hover {
	text-decoration:underline;
}
#header .recherche {
	position:absolute;
	top:82px;
	margin-left:150px;
	_margin-left:230px;
}
#header .recherche form {	
	margin-left:160px;
	/* Fix pour IE : _margin-left:75px; */
	width:400px;
	
}
#header .recherche label {
	float:left;
	margin-right:10px;
	font-style:italic;
	font-variant:small-caps;
	font-weight:bold;
}
#header .recherche form input {
	float:left;
	margin-right:5px;
}
#header .contact {
	position:absolute;
	top:83px;
	margin-left:680px;
	font-size:12px;
	font-style:italic;
	font-variant:small-caps;
	font-weight:bold;
	display:none;
}
#header a.contact:hover {
	text-decoration:underline;
}

#corps {
}
#bottom {
	clear:both;
	font-size:0.8em;
	color: #C0C0C0;
	margin-top:5px;
	text-align:center;
	padding-top:15px;
}
#bottom a {
	color:#C0C0C0;
}
#bottom a:hover {
	text-decoration:underline;
}


#menu {
	width:140px;
	float:left;
	margin-top:3px;
	margin-left:5px;
	display:inline; /* Cette ligne sert juste a empeche IE de doubler la marge */
}
#menu ul, #menu li {
	list-style:none;
	margin:0;
	padding:0;
}
/* Les titres des menus (Accueil, Salons) */
#menu h6 {
	background: #cc6b4a;
	font-size: 12px;
	color: white;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:5px;
}
#menu h6 a {
	color: #FFFFFF;
}
/* Le menu avec les produits */
#mlist_0 {
	background: url("../../images/interface/menu_produits.gif") top left no-repeat #FEDECE;
	height: 66px;
}
/* Les listes de sous-rubriques */
#mlist_0 ul {
	display:none;
	position:absolute;
	background : #FEDECE;
	z-index:1000;
}
#mlist_0 li.first_lvl {
	margin-left:17px;
	text-indent:5px;
}
#mlist_0 li.first_lvl ul {
	border-right: 1px solid orange;
	border-bottom: 1px solid orange;
}
#mlist_0 li {
	display:block;
	height:20px;
	border-top:1px solid white;	
	_width:100%; /* Allonge les menus (uniquement sur IE, Mozzy n'en a pas besoin et si on le fait ca allonge trop le début) */
} 
#mlist_0 li a {
	display:block;
	height:20px;	
	background: #FEDECE;
	color: #B22B00;
	font-weight:bold;
	white-space: nowrap;
}
#mlist_0 li a:hover {
	background: #FEE8DE;
	color: TOMATO;
	margin:0;
	padding:0;
}


/* La suite du menu toute simple */
#menu ul.normal {
	background: #FEDECE;
}
#menu ul.normal li {
	background: #FEDECE;
	color: #B22B00;
	border-top:1px solid white;
	height:21px;
	padding-left:5px;
	font-weight:bold;
}
#menu ul.normal li a {
	color: #B22B00;
	display:block;
	height:21px;
}
#menu ul.normal li a:hover {
	background: #FEE8DE;
	color: TOMATO;	
}

#menu .separation {
	font-size:0em;
	height: 5px;
	border-bottom: 2px solid #B22B00;
	margin-bottom:15px
}


/* Les salons */
#menu ul.salons {
	background: #FEE8DE;
}
#menu ul.salons li {
	color: black;
	border-bottom: 1px solid white;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-left:5px;
}
#menu ul.salons li a.name {
	color: #cc6b4a;
	display:block;
	font-weight:bold;
}
#menu ul.salons a.name:hover {
	text-decoration:underline;
}
#menu ul.salons li .date {
	font-size:9px;
	color:#666666;
}
#menu ul.salons a {
	display:block;
	font-weight:normal;
	color: black;
}
#menu ul.salons a:hover {
	display:block;
	font-weight:normal;
	color: black;
	text-decoration:underline;
}

#menu address {
	font-style: normal;
	font-size:11px;
}
#espace_texte {
	float:left;
	margin-left:18px;
	width:600px;
}
/***************L'ESPACE DE TEXTE*********************/

#index .intro {
	width:600px;
	height:255px;
}
#index .colonnes {
	margin-top:15px;
}
#index .colonnes .pub {
	width:350px;
	height:255px;
	border:1px solid #CC6B4A;
	text-align:center;
	float:left;
}
#index .colonnes .pub .presentation {
	display:none;
}
#index .colonnes .actus {
	width:220px;
	float:left;
	margin-left:20px;
}
#index .colonnes .actus h4 {
	background: #CC6B4A;
	color: #FFFFFF;
	display:block;
	text-indent:10px;
	margin-bottom:8px;
}
#index .colonnes .actus .actu {
	border-bottom: 1px dotted #CC6B4A;
	margin-bottom:10px;

}
#index .colonnes .actus .actu .img {
	text-align:center;
	border:1px solid #CC6B4A;
	width: 65px;
	height:65px;
	float:left;
	margin-right:10px;
}
#index .colonnes .actus .actu .texte {
	float:left;
	width: 140px;
	color: #000000;
	font-size:11px;
}
#index .colonnes .actus .actu .texte h5 {
	color: #CC6B4A;
	font-size:12px;
}
#index .colonnes .actus .actu a.savoir_plus {
	text-decoration:underline;
	color: #000000;
	font-weight:normal;
	display:block;
	clear:both;
	margin-left:75px;
	margin-bottom:5px;
	font-size:11px;
}
#index .colonnes .actus .actu a.savoir_plus:hover {
	text-decoration:none;
}
#index .colonnes .actus a.voir_actus {
	display:block;
	text-align:right;
	font-weight:normal;
	color: #000000;
	font-style:italic;
}
#index .colonnes .actus a:hover.voir_actus {
	text-decoration:underline;
}

/************ LES ACTUS (UNE et LA LISTE) **************/
#actualites h3 {
	color : #C66A42;
	font-style:italic;
	font-weight:bold;
	font-size:19px;
	margin-bottom:15px;
}
#actualites .actu .img {
	float:left;
	border:1px solid #C66A42;
	text-align:center;
	margin-right:20px;
}
#actualites .actu .img img {
	cursor:pointer;
}
#actualites .actu h4 {
	font-size:24px;
	display:block;
}
#actualites .actu .date {
	font-size:11px;
	color: #A9A9A9;
	display:block;
	margin-bottom:10px;
}
#actualites .actu .retour_liste {
	display:block;
	text-align:right;
	font-weight:normal;
	margin-top:15px;
	clear:both;
}

#actualites .actu_liste {
	border-bottom: 1px dotted #CC6B4A;
	margin-bottom:15px;
	width:500px;
}
#actualites .actu_liste .img {
	float:left;
	width:150px;
	margin-right:20px;
	text-align:center;
}
#actualites .actu_liste .img img {
	border:1px solid #C66A42;
}
#actualites .actu_liste .savoir_plus {
	clear:both;
	display:block;
	text-align:right;
	margin-bottom:5px;
}
#actualites .actu_liste .texte h5 {
	font-size:15px;	
}
#actualites .actu_liste .texte .date {
	font-size:11px;
	color: #A9A9A9;
	display:block;
	margin-bottom:5px;
}

/************ LES SALONS (UN seul et LA LISTE) **************/
#salons h3 {
	color : #C66A42;
	font-style:italic;
	font-weight:bold;
	font-size:19px;
	margin-bottom:15px;
}
#salons .salon .img {
	float:left;
	border:1px solid #C66A42;
	text-align:center;
	margin-right:20px;
}
#salons .salon .img img {
	cursor:pointer;
}
#salons .salon h4 {
	font-size:24px;
	display:block;
}
#salons .salon .date {
	font-size:11px;
	color: #A9A9A9;
	display:block;
	margin-bottom:10px;
}
#salons .salon .retour_liste {
	display:block;
	text-align:right;
	font-weight:normal;
	margin-top:15px;
	clear:both;
}

#salons .salon_liste {
	border-bottom: 1px dotted #CC6B4A;
	margin-bottom:15px;
	width:500px;
}
#salons .salon_liste .img {
	float:left;
	width:150px;
	margin-right:20px;
	text-align:center;
}
#salons .salon_liste .img img {
	border:1px solid #C66A42;
}
#salons .salon_liste .savoir_plus {
	clear:both;
	display:block;
	text-align:right;
	margin-bottom:5px;
}
#salons .salon_liste .texte h5 {
	font-size:15px;	
}
#salons .salon_liste .texte .date {
	font-size:11px;
	color: #A9A9A9;
	display:block;
	margin-bottom:5px;
}

.section_image {
	display:block;
	text-align:center;
	margin-top:20px;
}
/************Le CATALOGUE DES FABRICANTS ***************/
.affiner_fabricant {
	display:block;
	margin-bottom:15px;
	color: #000000;
}
.tous_fabricants {
	display:block;
	font-size:20px;
	letter-spacing:-1;
}
a.tous_fabricants:hover {
	text-decoration:underline;
}
.catalogue_fabricant {
	margin-top:20px;
	border-bottom: 1px solid #B22B00;
	width:450px;
	height:100px;
}
.catalogue_fabricant .img {
	float:left;
	width:100px;
	text-align: center;
	border: 1px solid #C66A42;
	height:90px;
	margin-right:20px;
}
.catalogue_fabricant .texte {
	float:left;
	width:300px;
	font-size:11px;
	color:#000000;
}
.catalogue_fabricant .texte h4 {
	text-align:center;
	margin-bottom:10px;
}
.catalogue_fabricant .texte h4 a {
	color: #CB6744;
	font-size:20px;
	width:320px;
	display:block;
}
.catalogue_fabricant .texte h4 a:hover {
	text-decoration:underline;
}
.catalogue_fabricant .texte a.savoir_plus {
	color: #000000;
	margin-top:20px;
	text-decoration:underline;
	font-weight:normal;
	font-size:11px;
	display:block;
	text-align:right;
}
.catalogue_fabricant .texte a:hover.savoir_plus {
	text-decoration:none;
}
	
	
/***********LE CATALOGUE DES MATERIAUX ************/
.catalogue_materiau {
	margin-top:20px;
	border-bottom: 1px solid #B22B00;
	width:450px;
	overflow:auto;
	padding-bottom:3px;
}
.catalogue_materiau .img {
	float:left;
	width:100px;
	text-align: center;
	border: 1px solid #C66A42;
	height:90px;
	margin-right:20px;
	cursor:pointer;
}
.catalogue_materiau .texte {
	float:left;
	width:320px;
}
.catalogue_materiau .texte h4 {
	margin-left:70px;
	margin-bottom:10px;
	font-size:20px;
}
.catalogue_materiau .texte h4 a {
	color: #CB6744;
	
	display:block;
	font-weight:bold;
}
.catalogue_materiau .texte h4 a:hover {
	text-decoration:underline;
}
.catalogue_materiau .texte a {
	font-weight:normal;
}
.catalogue_materiau .texte a:hover {
	text-decoration:underline;
}
.catalogue_materiau .texte a.pdf {
	display:block;
	font-style:italic;
	font-size:11px;
	margin-top:20px;
	background:url("../../images/interface/pdf.gif") top left no-repeat;
	padding-left:16px;
	height:16px;
}
.catalogue_materiau  a.savoir_plus {
	color: #000000;
	text-decoration:underline;
	font-weight:normal;
	font-size:11px;
	display:block;
	text-align:right;
	clear:both;
}
.catalogue_materiau  a:hover.savoir_plus {
	text-decoration:none;
}
/************LA SEPARATION   ***********************/
.separation_materiaux_produits {
	margin-top:15px;
	text-align:center;
	width:450px;
	font-size:20px;
}
/************LE CATALOGUE DES PRODUITS *************/
.catalogue_produit {
	margin-top:20px;
	border-bottom: 1px solid #B22B00;
	width:450px;
	height:100px;
}
.catalogue_produit .img {
	float:left;
	width:100px;
	text-align: center;
	border: 1px solid #C66A42;
	height:90px;
	margin-right:20px;
}
.catalogue_produit .texte {
	float:left;
	width:300px;
}
.catalogue_produit .texte h4 a {
	color: #CB6744;
}
.catalogue_produit .texte .ref {
	color: #000000;
	font-weight:bold;
	display:block;
}
.catalogue_produit .texte a.savoir_plus {
	color: #000000;
	margin-top:20px;
	text-decoration:underline;
	font-weight:normal;
	font-size:11px;
	display:block;
}
.catalogue_produit .texte a:hover {
	text-decoration:none;
}


/************* UN PRODUIT ***************/
#produit {
	margin-top:20px;
}
/* La colonne de gauche, avec toutes les infos */
#produit .infos {
	width:450px;
	float:left;
	margin-bottom:30px;
	border-right:1px solid #C66A42;
	padding-right:20px;

}
/* Le haut de la colonne de gauche, avec le nom et toutes les infos rapides */
#produit .infos .general {
}
/* L'image sur le coté */
#produit .infos .general .img {
	width:175px;
	height:175px;
	text-align:center;	
	margin-right:20px;
	float:left;
	border: 1px solid #C66A42;
	cursor:pointer;
}
/* Le coté droit, avec le nom, la référence, la liste des documents, etc */
#produit .infos .general .texte {
	float:left;
	width:235px;
}
#produit .infos .general .texte h2 {
	color: #C66A42;
	font-size: 13px;
	font-weight:bold;
}
/* Le fabricant */
#produit .infos .general .texte .fabricant {
	display:block;
	font-weight:bold;
	color: #000000;
	font-size:11px;
}
/* La référence */
#produit .infos .general .texte .ref {
	display:block;
	color: #000000;
	font-size:11px;
}
/* La liste des documents */
#produit .infos .general .texte ul {
	list-style:none;
	margin:0;
	padding:0;
	margin-top:15px;
}
#produit .infos .general .texte ul li {
	margin-bottom:2px;
}
#produit .infos .general .texte ul li a {
	text-decoration: underline;
	color: #C66A42;
	font-size:11px;
} 
/*
#produit .infos .general .text$E758$175ul$FFFF$FFFFi $0$0ho$0$0r {
	color: #0087B2;
}
*/

/* La demande de devis sous les informations principales */
#produit .infos .demande_devis {
	display:block;
	clear:both;
	height:21px;
	text-align:right;
	width:430px;
}
#produit .infos .demande_devis a {
	background: url("../../images/interface/fond_demande_devis_blanc.jpg") top left no-repeat;
	width: 136px;
	height:21px;
	display:block;
	text-align:center;
	padding-top:3px;
	float:right;	
}
#produit .infos .demande_devis a:hover {
	color: TOMATO;
}

/* 
	L'espace avec les documents.
	On mets une image de fond qui represente la barre du haut, l'arrondi à droite et la descente (l'image est haute)
	On rajoute un border-bottom dessus pour fermer en bas
	et on mets le titre en fond blanc avec une boule à droite
*/
#produit .infos .documents {
	background: url("../../images/interface/fond_documents.gif") 0px 6px no-repeat;
	width:450px;
	
	
}
/* Le titre "Les avantages" avec le rond sur la droite pour coller au trait bleu */
#produit .infos .documents h3 {
	display:inline;
	padding-right:25px;
	background: url("../../images/interface/fond_rond_documents.gif") top right no-repeat white;
	color: #0087B2;
	display:none;
}
/* L'espace où on affiche tout les espaces de texte des documents */
#produit .infos .documents .texte {
	border-bottom:1px solid #008CB5;
	padding-right:15px;
	width:418px;
	/* Fix pour IE appliqué dans IE_only _width:433px;*/
	color: #000000;
	font-size:11px;
	display:none;	
	margin-top:15px;
}
#produit .infos .documents .texte h6 {
	font-weight:bold;
	color: #C66A42;
	font-size:12px;
	display:inline;
}



/* La colonne de droite avec les produits associés */
#produit .vestiaire {
	width:109px;
	float:left;
	text-align:center;
	margin-left:10px;
}
/* Le bouton de demande de devis final */
#produit .demande_devis_final {
	clear:both;
	display:block;
	text-align:center;
}
#produit .demande_devis_final a {
	display:block;
	width:137px;
	height:21px;
	text-align:center;
	background: url("../../images/interface/fond_demande_devis_final.jpg") top left no-repeat;
	margin-right:auto;
	margin-left:auto;
	color: #FFFFFF;
	padding-top:3px;
}
#produit .demande_devis_final a:hover {
	text-decoration:underline;
}

/*************** LES PARTENAIRES ***********/
#partenaires {
	margin-top:15px;
}
#partenaires h3 {
	font-size:20px;
	margin-bottom:25px;
}
#partenaires .partenaire {
	border-bottom: 1px dotted #C66A42;
	margin-bottom:10px;
}
#partenaires .partenaire .image {
	text-align:center;
	width:100px;
	margin-right:20px;
	float:left;
}
#partenaires .partenaire .texte {
	float:left;
	color:#000000;
	font-size:11px;
	width:300px;
}
#partenaires .partenaire .texte h4 {
	display:block;
	color:#C66A42;
	font-size:15px;
}
#partenaires .partenaire .texte a {
	display:block;
	margin-top:10px;
}



/****** DOMAINES d'APPLICATION et QUI SOMMES NOUS*******/
#page {
	margin-top:15px;
	color:black;
}
#page .texte {
	text-align:justify;
	float:left;
	width:340px;
	margin-right:10px;
}
#page .texte h3 {	
	color : #C66A42;
	font-size:20px;
	margin-bottom:20px;	
}
#page .texte h4 {
	color: #3E8CB8;
	font-weight:bold;
	font-size:18px;
	margin-top:20px;
}
#page .img {
	width:245px;
	float:left;
	text-align:center;
}

/********* CONTACT ET DEMANDE DE DEVIS *********/
#contact {
	margin-top:15px;
}
#contact h3 {
	font-size:20px;
}

/******** L'arborescence dans le catalogue et dans le produit Accueil > Pompes > Pneumatiques, etc **********/
.arborescence {
	display:block;
	margin-bottom:15px;
}
/*********** La fenetre de pop-up dans laquelle je mets les fichiers grand format à voir *********/
#pop-up_img img {
	border:0;
	cursor:pointer;
}



/* Une information pour faire attention */
.warning {
	display:block;
	padding:15px;
	width:450px;
	margin-right:auto;
	margin-left:auto;
	background-color: #FEE8DE;
	border: 2px solid TOMATO;
	margin-bottom: 15px;
}