/****************************************************
	Fichier : 3di-design.css
	Propriétés des éléments de design seulement
*****************************************************/

/* Réinitialisation des marges, espacements et bordures à 0 */
body, h1, h2, h3, h4, h5, img, p, dl, dt, dd, ul, li, form { 
	border: 0; 
	margin: 0; 
	padding: 0;
	color: #000;
}

body { background: #fff url(../images/fd-corps.gif) top left repeat-x; }

div.titre {
	height: 27px;
	position: relative;
}

div.titre h3 { display: none; }

/* ID différent pour changer l'image BG de chaque titre. */
#tit-nouvelles { background: #000 url(../images/tit-nouvelles.gif) 19px 0 no-repeat; width: 240px; }
#tit-evenements { background: #000 url(../images/tit-evenements.gif) 19px 0 no-repeat; width: 488px; }
#tit-solution { background: #000 url(../images/tit-solution.gif) 19px 0 no-repeat; }
#tit-promotion { background: #000 url(../images/tit-promotion.gif) 19px 0 no-repeat; }
#tit-navigation { background: #000 url(../images/tit-navigation.gif) 19px 0 no-repeat; width: 240px; }
#tit-itemsrelies { background: #000 url(../images/tit-itemsrelies.gif) 19px 0 no-repeat; width: 240px; }
#tit-produits { background: #000 url(../images/tit-produits.gif) 19px 0 no-repeat; width: 240px; }

/* Pour que la boite qui contient des colonnes s'étire */
.nettoie { 
	clear: both; 
	line-height: 0; 
	font-size: 0; 
	height: 0; 
}

/* Conteneur uniquement pour que le background s'étire  */
#fond {
	background: url(../images/fd-corps-bas.gif) bottom left repeat-x; 
	position: relative;
	width: 100%;
}

/* Conteneur principal */
#conteneur { 
	margin: 0 auto;
	position: relative;
	width: 972px;
}

	#entete { 
		background: url(../images/fd-entete.gif) top left no-repeat;
		height: 117px;
		position: relative;
		width: 100%;
	}
	
		/* On cache le titre du site dans un H1 invisible pour que les moteurs puissent le voir */
		#entete h1 { display: none; }
		
		/* Lien sur l'entete pour revenir à l'accueil */
		#entete a { display: block; width: 100%; height: 117px; }
		* html #entete a { height: 58px; }
		
		/* On cache le contenu du "strong" dans le lien mais les moteurs vont le voir */
		#entete a strong { display: none; }

/* CSS Document */

	/* Boîte pour le menu */
	#menu { 
		background: url(../images/fd-menu.jpg) top left repeat-x;
		height: 56px;
		position: relative;
		width: 100%;
	}

		#menu ul { 
			list-style-type: none;
			height: 56px;
			position: relative;
			width: 100%;
			z-index: 10;
		}

		#menu li { position: absolute; }

		/* Propriétés pour tous les liens dans le menu */
		#menu a {
			background-image: url(../images/fd-menu.jpg);
			background-repeat: no-repeat;
			display: block;
			height: 28px;
			position: absolute;
		}

		/* Texte caché dans le menu pour moteurs de recherche */
		#menu span { display: none; }
		
		/* Propriétés spécifiques pour chaque menu */
		#menu li#accueil { top: 0; left: 0; }
		#menu li#accueil a { background-position: 0 0; width: 85px; }
		#menu li#accueil a:hover { background-position: 0 -56px; }
		
		#menu li#entreprise { top: 0; left: 85px; }
		#menu li#entreprise a { background-position: -85px 0; width: 117px; }
		#menu li#entreprise a:hover { background-position: -85px -56px; }

		#menu li#evenements { top: 0; left: 202px; }
		#menu li#evenements a { background-position: -202px 0; width: 115px; }
		#menu li#evenements a:hover { background-position: -202px -56px; }

		#menu li#nousjoindre { top: 0; left: 317px; } 
		#menu li#nousjoindre a { background-position: -317px 0; width: 136px; }
		#menu li#nousjoindre a:hover { background-position: -317px -56px; }
		
		#menu li#produits { top: 28px; left: 59px; }
		#menu li#produits a { background-position: -59px -28px; width: 96px; }
		#menu li#produits a:hover { background-position: -59px -84px; }
		
		#menu li#services { top: 28px; left: 155px; }
		#menu li#services a { background-position: -155px -28px; width: 96px; }
		#menu li#services a:hover { background-position: -155px -84px; }
		
		#menu li#solutions { top: 28px; left: 251px; }
		#menu li#solutions a { background-position: -251px -28px; width: 110px; }
		#menu li#solutions a:hover { background-position: -251px -84px; }
		
		#menu li#promotions { top: 28px; left: 361px; }
		#menu li#promotions a { background-position: -361px -28px; width: 121px; }
		#menu li#promotions a:hover { background-position: -361px -84px; }
		
		/*#menu li#promotions { top: 28px; left: 482px; }
		#menu li#promotions a { background-position: -482px -28px; width: 121px; }
		#menu li#promotions a:hover { background-position: -482px -84px; }*/
		
		#menu li#english { top: 0; left: 895px; }
		#menu li#english a { background-position: -795px 0; width: 77px; } /* remettre a -895px pour réafficher le menu, et enlever cursor, et retirer commentaires dans menu */
		#menu li#english a:hover { background-position: -795px -56px; cursor: default; }

		/* Boite de recherche */
		#menu #chercher { 
			background: url(../images/fd-form-recherche.gif) 15px 0 no-repeat; 
			height: 26px;
			left: 670px;
			position: absolute; 
			width: 254px;
			z-index: 100;
		}

			/* On cache l'étiquette "recherche" en texte */
			#menu #chercher label { display: none; }
		
			/* Boite de texte de recherche */
			#menu #chercher input.texte {
				background: #fff;
				border: 1px solid #adadad;
				color: #4e94ba;
				font-size: 9px;
				padding: 1px 0 1px 2px;
				position: absolute;
				height: 12px;
				left: 94px; 
				top: 6px;
				width: 98px;
			}	
		
			/* Bouton recherche */
			#menu #chercher input.bouton { 
				height: 14px;
				position: absolute;
				left: 200px;
				top: 7px;
				width: 13px;
			}

	#principal {
		background: #fff;
		border-left: 1px solid #adadad;
		border-right: 1px solid #adadad;
		overflow: hidden;
		position: relative;
		width: 970px;
	}

/**************************
  Colonne contenant les nouvelles, les outils interactifs (abonnement, envoyer,etc)
***************************/
#col-secondaire {
	background: #fff;
	display: inline;
	float: left;
	min-height: 300px;
	position: relative;
	width: 240px;
}

* html #col-secondaire {
	height: 300px;
}

	/* Boite contenant des logos et marques (Autodesk, etc) */
	#logos {
		background: #fff url(../images/fd-logos.gif) top left no-repeat;
		border-bottom: 1px solid #adadad;
		height: 64px;
		position: relative;
		width: 100%;
	}

	#logos a { 
		display: block;
		height: 64px;
		position: relative;
		width: 100%;
	}
	
	#logos a span { 
		display: none;
	}

	/* Formulaire d'abonnement à l'infolettre */
	#abonnement {
		background: #fff url(../images/fd-mabonner.gif) top left no-repeat;
		border-bottom: 1px solid #adadad;
		height: 37px;
		position: relative;
		width: 100%;
	}
	
		/* On cache l'étiquette "courriel" */
		#abonnement label { display: none; }
	
		/* Boite de texte pour courriel */
		#abonnement input.courriel { 
			background: #fff;
			border: 1px solid #adadad;
			color: #4e94ba;
			font-size: 9px;
			padding: 1px 0 1px 2px;
			position: absolute;
			height: 12px;
			left: 90px; 
			top: 12px;
			width: 95px;			
		}
		
		/* Bouton abonnement */
		#abonnement input.bouton {
			height: 14px;
			position: absolute;
			right: 29px;
			top: 13px;
			width: 16px;
		}

	/* Boite contenant les outils (version imprimable, envoyer) */
	#outils {
		background: #fff;
		height: 36px;
		overflow: hidden;
		position: relative;
		width: 100%
	}
	
		#outils a.imprimer {
			background: url(../images/fd-btn-imprimer.gif) top left no-repeat;
			border-right: 1px solid #adadad;
			display: block;
			height: 36px;
			position: absolute;
			width: 118px;
		}

		#outils a.envoyer {
			background: url(../images/fd-btn-envoyer.gif) top left no-repeat;
			display: block;
			height: 36px;
			left: 119px;
			position: absolute;
			width: 121px;
		}

		/* Cacher le contenu texte des liens mais ils restent visibles pour les readers et les moteurs */
		#outils span { display: none; }

		#dernieres-nouvelles {			
			position: relative;
			width: 204px;
		}
		
			#dernieres-nouvelles #dn-contenu {
				padding: 0 18px 20px 18px;
				position: relative;
				width: 100%;
			}

	#navigation { 
		overflow: hidden;
		padding: 5px 5px 18px 15px; 
		position: relative;
		width: 220px;
	}

		/* Listes de navigations */
		#navigation dl { margin: 15px 0 0 0; }
		
		/* Icônes de la navigation */
		#navigation dt {
			display: block;
			position: relative;
			float: left;
			width: 50px;
			margin: 0 10px 0 0;
		}

		/* Liens et descriptions de la navigation */
		#navigation dd {
			display: block;
			position: relative;
			float: left; 
			width: 180px;
		}
		
		#navigation dl#produits dt { width: 25px; }
		#navigation dl#produits dd { height: 30px; padding-top: 3px; }

		#navigation #fiches { position: relative; margin: 15px 0; }
		#navigation #fiches .fiche { margin: 10px 0; }
		#navigation #fiches img { float: left; }
		#navigation #fiches .desc-produits { float: left; margin: 3px 0 0 5px; }
		#navigation #fiches .desc { position: relative; margin: 0 0 0 45px; }
		
		#navigation dl#list-articles dt { float: none; width: 100%; }
		#navigation dl#list-articles dd { float: none; margin: 0 0 10px 0; width: 100%; }		

/**************************	
  Colonne contenant le contenu principal du site (rubriques, articles, etc)
***************************/
#col-primaire {
	background: #fff;
	border-left: 1px solid #adadad;
	border-right: 1px solid #adadad;
	display: inline;
	float: left;
	min-height: 700px;
	position: relative;
	width: 488px;
}

* html #col-primaire { height: 700px; }

	/****************** COLONNE PRIMAIRE POUR L'ACCUEIL *******************/

	#intro-accueil {		
		padding: 30px 15px;
		position: relative;
		width: 458px;
	}
	
	/* Un bloc quelconque dans l'accueil */
	div.section {
		padding: 15px;
		position: relative;
		width: 458px;
	}
	
	div.section ul { position: relative; list-style-type: none; }
	div.section li { position: relative; margin: 15px 0; }
	
		/* Une ligne d'éléments flottants */
		div.section div.ligne {
			margin: 0 0 20px 0;
			position: relative;
			width: 454px;
		}
		
			div.section img.produit { 
				float: left; 
				margin: 0 20px 0 0;
				position: relative;
			}

			div.solution {
				background: #fff url(../images/fd-produit.gif) 0 10px repeat-x;
				position: relative;
				width: 100%;
			}
			
			div.solution a.titre { background: #fff; float: left; font-weight: bold; }
			div.solution span { background: #fff; float: right; margin-left: 5px;}
			div.solution span.rouge { color: red; }
			div.solution span.noir { text-decoration: line-through; }
			div.solution p { 
				width: 100%; 
				margin: 0 0 5px 0; 
				overflow: hidden;
				position: relative; 
			}

			div.section div.ligne a.icone {
				display: block;
				float: left;
				margin: 0 10px 0 0;
				position: relative;
				height: 50px;
				width: 50px;
			}

				div.section div.ligne a.icone span { display: none; } 

			div.article { padding: 15px; }
				div.article p { margin-bottom: 12px; }
				
			div.listing {
				position: relative;
				margin: 20px 0 0 0;
			}
			
			div.listing .img-listing {
				float: left;
			}
			
			div.listing p {
				margin: 0 0 5px 65px!important;
				position: relative;
			}
			
			div.listing p a {
				font-weight: bold;
			}

	/******************** COLONNE PRIMAIRE POUR LES RUBRIQUES ************************/

	#intro-rubrique {
		background: #000;
		height: 114px;
		padding: 26px 15px;
		position: relative;
		width: 458px;
	}

	#liste-contenu {
		padding: 26px 15px; 
		position: relative;
		width: 458px;
	}
	
		/* Liste à puces cachées */
		#liste-contenu ul { list-style-type: none; margin: 0 0 0 20px; }
	
		/* Bloc lien dans liste des sous-rubriques */
		#liste-contenu a {
			display: block;
			height: 36px;
			margin: 0 0 15px 0;
			padding: 14px 0 0 65px;
		}
		
		/* Liste pour icônes et lien */

		#liste-contenu dl a { 
			font-size: 12px!important;
			padding: 0;
			height: auto;
			margin: 0 0 2px 0; 
			width: auto;
		}
		
		#liste-contenu dl p { margin: 0; padding: 0; }
				
		#liste-contenu dt {
			float: left;
			height: 65px;
			margin: 0 10px 10px 0;
			position: relative;
			width: 65px;
		}
		
			#liste-contenu dt img {
				display: block;
				float: right;
			}
		
		#liste-contenu dd {
			float: left;
			margin: 0 0 10px 0;			
			min-height: 65px;
			position: relative;
			width: 375px;
		}

		* html #liste-contenu dd { height: 65px; }

			#liste-contenu dd span { font-weight: bold; }


/************* Colonne promaire pour un article *****************/

	div#page-article {
		overflow: hidden;
		padding: 20px 10px; 
		position: relative;
		width: 468px;
	}
	
	div#page-article .spip_logos {
	   margin-left: 1em;
	}
	
	div#page-article ul { 
		margin: 0 0 0 20px;
	}
	
	div#page-article ul li { 
		margin: 0 0 5px 0;
	}

/**************************
 Colonne contenant le contenu tertiaire (promos, etc) 
***************************/
#col-tertiaire {
	background: #fff;
	display: inline;
	float: left;
	min-height: 300px;
	position: relative;
	width: 240px;
}

	/* Boites de produits en promotion */
	div.promo {
		margin: 20px 0 0 0;
		overflow: hidden;
		padding: 0 5px 0 0;
		position: relative;
		width: 235px;
	}
	
		/* Boite pour l'image du produit */
		div.promo div.produit-image {
			display: inline;
			float: left;
			position: relative;
			width: 75px;
		}

			/* On centre l'image dans la boite */
			div.promo div.produit-image img { 
				display: block; 
				position: relative; 
				margin: 0 auto; 
			}

		/* Boite pour les détails du produit */		
		div.promo div.produit-details {
			display: inline;
			float: left;
			padding: 0 5px 0 0;
			position: relative;
			width: 155px
		}

/********** Pied de page **************/

#menu-bas {
	background: #bbb url(../images/fd-menu-bas.gif) top left repeat-x;
	border-bottom: 1px solid #adadad;
	border-top: 1px solid #adadad;
	height: 50px;
	padding: 15px 10px 0 10px;
	position: relative;
	text-align: center;
}

#pied-de-page {
	background: #000;
	height: 55px;
	padding: 18px 10px 0 10px;
	position: relative;
	text-align: center;
}



ul.plan {
	margin-left: 20px;
}