* {margin: 0; padding: 0;}

body {
	text-align: center;
	background: #005983 url(../images/bgBody.jpg) repeat-x;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	font-size: 11px;
	color: #004F75}

.break {clear: both; height: 1px; line-height: 1px;}

/****************************************************************************************/
/*																				  positionnement de la page */
/****************************************************************************************/

#allContent {
	background: transparent url(../images/bgAllContent.gif) repeat-y;
	width: 760px;
	margin: 0 auto;
	text-align: left;}

/****************************************************************************************/
/*																										  en tete */
/****************************************************************************************/

#enTete {
	background: transparent url(../images/bgEntete.gif) no-repeat;
	padding: 20px 10px 0 10px;
	position: relative;}
#enTete h1 {display: none;}

#enTete #zoneFlash {
width: 740px; 
height: 155px;
background: #123456;
}


#enTete img {border: 0; height: 155px;}
#enTete #logo {display: none; height: auto;} 

#navigation {list-style: none; height: 33px;}
#navigation li {float: left; position: relative;}
#navigation li a {display: block; height: 33px;}
#navigation li a span {display: none;}

#navigation li#btn01 a {background: transparent url(../images/btnAccueil.gif) no-repeat 0 0; width: 91px;}
#navigation li#btn02 a {background: transparent url(../images/btnApplications.gif) no-repeat 0 0; width: 107px;}
#navigation li#btn03 a {background: transparent url(../images/btnProduits.gif) no-repeat 0 0; width: 86px;}
#navigation li#btn04 a {background: transparent url(../images/btnSociete.gif) no-repeat 0 0; width: 112px;}
#navigation li#btn05 a {background: transparent url(../images/btnActualites.gif) no-repeat 0 0; width: 64px;}
#navigation li#btn06 a {background: transparent url(../images/btnAstuces.gif) no-repeat 0 0; width: 139px;}
#navigation li#btn07 a {background: transparent url(../images/btnContact.gif) no-repeat 0 0; width: 141px;}

#langues {
    width: 25px; height: 69px;
    background-color: #fff;
    position: absolute; left: -20px; top: 105px;}
#langues a { display: block; width: 16px; height: 11px; margin: 5px 0 4px 5px;}
#langues a span { display: none; }

#langues #vUK {background: transparent url(../images/drapeauUK.gif) no-repeat;}
#langues #vDE {background: transparent url(../images/drapeauDE.gif) no-repeat;}
#langues #vES {background: transparent url(../images/drapeauES.gif) no-repeat;}
#langues #vFR {background: transparent url(../images/drapeauFR.gif) no-repeat;}

#navigation li a:hover {background-position: 0 -33px !important;}

/***** sous navigation *****/

#navigation li .sousNav {
	position: absolute; left: 0; top: 34px;
	list-style: none;
	z-index: 15;
	display: none;}

#navigation li .sousNav li {float: none; line-height: 16px;}
#navigation li .sousNav li.deuxLignes { line-height: 12px;}
#navigation li .sousNav li a {
	background: #fff url(../images/flecheSousNav.gif) no-repeat 5px 9px !important; 
	height: auto; width: 130px !important;
	padding: 3px 0 3px 15px;
	margin-top: -1px;
	color: #005984;
	text-decoration: none;
	font-weight: bold;}
#navigation li .sousNav li.deuxLignes a { padding: 5px 0 5px 15px; }
	
#sousNav1 li a, 
#sousNav2 li a {border: 1px #FE9534 solid;}

#navigation li #sousNav1 li a:hover, 
#navigation li #sousNav2 li a:hover {background-color: #FEEFB1 !important;}

#sousNav3 li a, 
#sousNav4 li a,
#sousNav5 li a {border: 1px #3399CC solid;}

#navigation li #sousNav3 li a:hover, 
#navigation li #sousNav4 li a:hover {background-color: #CEDDED !important;}

/****************************************************************************************/
/*																										  Content */
/****************************************************************************************/

#content {padding: 20px 30px 20px 30px; clear: both;}

#content p {margin-bottom: 10px; line-height: 14px;}

/****************************************************************************************/
/*																							  Eléments communs */
/****************************************************************************************/

a {color: #ff6600;}

#content ul {margin: 0 0 10px 30px;}

#content #ariane {
	background: transparent url(../images/bgAriane.jpg) repeat-y;
	list-style: none;
	height: 16px; width: 700px;
	padding-left: 5px;
	margin: 0 0 15px 0;}
#ariane li {
	font-weight: bold;
	float: left;
	color: #fff; 
	line-height: 15px;}

#content h1 {
	font-size: 20px; 
	color: #ff6600; 
	line-height: 20px; 
	margin-bottom: 10px;}
#content h2 {
	font-size: 14px; line-height: 14px; 
	margin-bottom: 10px; 
	border-bottom: 1px #38A8DF dotted;
	padding-bottom: 2px;
	color: #38A8DF;}
#content h2 img {margin-right: 5px;}
#content h3 {
	font-size: 13px;
	line-height: 12px;
	margin-bottom: 5px;
	color: #38A8DF;}

fieldset {
	border: 1px #7F9DB9 dotted; 
	padding: 10px;
	margin-bottom: 10px;}
input, 
select, 
textarea {
	font-size: 11px;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	color: #005984;}
fieldset label {
	display: block; 
	float: left;
	width: 110px;
	text-align: right;
	padding-right: 5px;}
fieldset legend {
	font-weight: bold;
	font-size: 14px;
	padding: 0 10px;
	background-color: #fff;
	margin-bottom: 5px;}
fieldset .formMoyen {width: 180px;}
fieldset p {clear: both;}
fieldset ul {list-style: none; height: 25px;}
fieldset ul li {float: left;}
fieldset ul li label {text-align: left; padding-left: 5px; width: auto;}
fieldset ul li input {float: left;}

fieldset #nautisme {display: none;}

.colonne {
	width: 318px;
	float: left;
	margin: 0 5px 10px 5px;}

.rechercher {
	background: transparent url(../images/btnFormPetit.gif) no-repeat;
	border: 0; line-height: 27px;
	width: 80px; height: 27px;
	font-weight: bold; color: #fff;
	margin-left: 10px;}

.valider {text-align: center;}
.valider input {
	background: transparent url(../images/btnFormGrand.gif) no-repeat;
	border: 0; line-height: 27px;
	width: 130px; height: 27px;
	font-weight: bold; color: #fff;}

.orange {color: #ff6600;}

.retour {
	float: right;
	line-height: 14px;
	background: transparent url(../images/flecheRetour.gif) no-repeat 0 6px;
	padding-left: 10px;
	font-weight: bold;
	text-decoration: none;
	color: #005984;}
.retour:hover {color: #ff6600}

.selectChoix {
	float: right;
	width: 180px;}

/****************************************************************************************/
/*																								  Distributeurs */
/****************************************************************************************/

#distributeurs #content h2 {background-color: #F5F9FC; padding: 2px 4px;}

#distributeurs #content h2 a { 
	text-decoration: none; color: #38A8DF; 
	background: transparent url(../images/fermer.gif) no-repeat 450px 1px;
	display: block;}
#distributeurs #content #colDistE h2 a  { background-position: 310px 1px;}

#distributeurs #content h2 a img { border: 0; }

#distributeurs h3 { 
	background-color: #005984; 
	font-size: 11px; 
	color: #fff;
	text-transform: uppercase; 
	padding: 2px 5px; }
	
#distributeurs h4 { color: #FF6600; font-size: 14px; }

#colDistA, #colDistB, #colDistD, #colDistE { float: left; }

#colDistA img { width: 200px; } 

#colDistA { width: 230px; }
#colDistB { width: 470px; }

#colDistD { width: 370px; }
#colDistE { width: 330px; }

#colDistC { position: relative; }
#colDistC img { float: right; margin-right: 50px;}

#colDistC p {position: absolute; left: 150px; top: 180px; width: 200px;}

#distributeursPart #colDistC p {position: absolute; left: 200px; top: 180px; width: 160px;}

#colDistD p { padding-top: 10px; width: 350px; text-align: center;}

#retourCarte { 
	display: block;
	width: 197px;}
#retourCarte span { display: none; }

#distributeurs #retourCarte { background: transparent url(../images/carteMondeMini.jpg) no-repeat; height: 130px;}

#distributeurs .retourFrance { width: 300px !important; height: 102px !important;}

.relaisParticulier { color: #FF6600; display: block;}

/****************************************************************************************/
/*																						Demande d'échantillon */
/****************************************************************************************/

#echantillon .retour {
	border: 1px #38A8DF solid; 
	padding: 2px; float: none;
	display: block;
	background-image: none;
	width: 312px;
	margin-bottom: 30px;}
#echantillon .retour:hover { color: #fff }
#echantillon .retour span {
	background-color: #6CBFE7;
	display: block;
	padding: 5px;
	text-align: center;}

#echantillon fieldset ul {height: 15px;}
	
/****************************************************************************************/
/*																									Applications */
/****************************************************************************************/

.description {margin-bottom: 10px;}

.applications #colA {width: 200px;}
.applications #colB {width: 480px; padding-left: 20px;}

#visuelAppli {margin-bottom: 15px;}

/**** bloc application */

.application {
	border-bottom: 1px #87B1C5 dotted;
	padding-bottom: 10px;
	margin-bottom: 10px;}
.application img {
	float: left; 
	border: 1px #38A8DF solid; 
	background-color: #fff; 
	padding: 2px;
	margin-right: 15px;}
#content .application h2 {
	border: 0;
	font-size: 16px;
	line-height: 16px;
	margin-bottom: 5px;}
.application a {font-weight: bold; text-align: right;}

.applications #content ul {list-style: none; margin: 0;}

.applications #colB ul#visuelsSecteur li {
	float: left; 
	text-align: center;
	width: 25%;
	margin-bottom: 10px;
	line-height: 12px;}
.applications #colB ul#visuelsSecteur li img {
	display: block; 
	border: 1px #38A8DF solid; 
	background-color: #fff; 
	padding: 2px; 
	width: 100px; 
	height: 100px;
	margin: 0 auto 5px auto;}

.applications #colB ul#listeProduits li {
	position: relative;
	border-bottom: 1px #E4EDF4 solid;
	line-height: 16px;}
.applications #colB ul#listeProduits li a {
	position: absolute; right: 0; top: 0;
	text-decoration: none;
	font-weight: bold;
	padding-left: 8px;
	background: transparent url(../images/flecheBleue.gif) no-repeat 0 5px;}
.applications #colB ul#listeProduits li a:hover {text-decoration: underline;}

/****************************************************************************************/
/*																								  infos astuces */
/****************************************************************************************/

.astuces #content h5 {
	font-size: 11px;
	line-height: 13px;
	width: 400px;}

.astuces #colA {width: 180px; border-bottom: 1px #4C9EC5 solid;}
.astuces #colB {width: 490px; padding-left: 20px;}

.astuces #colA h3 {
	width: 180px; height: 28px;
	background: transparent url(../images/titreThemes.gif) no-repeat;
	margin: 0;}
.astuces #colA h3 span {display: none;}

.astuces #colA ul li {
	padding: 2px 0 2px 0;
	border-bottom: 1px #E4EDF4 solid;}
.astuces #colA ul li a {
	color: #004F75; 
	font-weight: bold;
	text-decoration: none;
	display: block;
	padding-left: 11px;
	background: transparent url(../images/flecheOrange.gif) no-repeat 3px 5px;}
.astuces #colA ul li a:hover {background-color: #E4EDF4;}

.astuces #content #themes { 
	border-left: 1px #4C9EC5 solid;
	border-right: 1px #4C9EC5 solid;
	list-style: none;
	padding: 5px;
	margin: 0;}
.astuces #colA #themes li {line-height: 14px;}

.astuces #colB .question {
	border-bottom: 1px #E4EDF4 solid;
	padding-bottom: 12px;
	margin-bottom: 12px;}
.astuces #colB .question a.fermer,
.astuces #colB .question a.rechercher {
	font-weight: bold;
	text-decoration: none;
	float: right;
	margin: 0; 
	color: #fff;
	text-align: center;
	background-position: 0 0;}
.astuces #colB .question a.rechercher {position: relative; top: -5px;}
.astuces #colB .question a:hover {background-position: 0 -27px;}
.astuces #colB .question .reponse {
	line-height: 13px;
	margin-top: 15px;
	background-color: #D6EEFA;
	padding: 5px;
	display: none;}
.astuces #colB .question .fermer {
	display: block;
	width: 12px; height: 12px;
	background: transparent url(../images/fermer.gif) no-repeat 0 0;}
.astuces #colB .question .fermer:hover {background-position: 0 0;}
.astuces #colB .question .fermer span {display: none;}

/****************************************************************************************/
/*																																						  Accueil */
/****************************************************************************************/

#colA,
#colB {float: left;}

#accueil #colA {width: 380px;}
#accueil #colB {width: 290px; padding-left: 20px;}

#edito h2 {color: #38A8DF; font-size: 14px; margin-top: 15px;}
#edito p {font-weight: bold; font-size: 12px;}

/************** blocs actualités */

.actu {
    padding: 10px 0 5px 0;
    border-bottom: 1px #BDD4DF dotted;}
#accueil #content .actu {width: 370px; }
#content .actu img,
.actualites #content img {
	border: 1px #38A8DF solid; 
	background-color: #fff; 
	padding: 2px; 
	float: left;
	margin: 0 10px 0 0;}
#content .actu .suite {
	text-align: right;
	margin-bottom: 0;
	clear: both;}
.actualites #content .actu .suite {clear: both;}
#content .actu .suite a,
#blocActuVideo .suite a {
	background: transparent url(../images/flecheSuite.gif) no-repeat 0 4px;
	text-decoration: none;
	font-weight: bold;
	font-size: 10px;
	color: #0D5299;
	padding-left: 10px;}
#content .actu .suite a:hover {color: #FB611A}
	
#blocActuVideo .suite {text-align: right; border-bottom: 1px #BDD4DF dotted; padding-bottom: 5px;}
#content .actu h3 {font-size: 14px; margin-bottom: 10px;}
#content .actu h3 span,
#content .date {
	font-size: 10px; 
	color: #ff6600; 
	margin-right: 5px;
	font-weight: bold;
	color: #38A8DF}
#content .actu h3 span { color: #005983; }

#accueil #colA #actuProduit {margin-top: 20px;}

#accueil #colA #actuProduit h3 {color: #0D5299}
#accueil #colA #actuSociete h3 {color: #FF6600;}

#accueil #colB h4 {
	color: #FF6600;
	font-size: 16px;
	margin-bottom: 10px;}

#zoneVideo {margin: 0 0 10px -25px;}

.zoneTexte {}

#blocActuVideo {border: 1px #38A8DF dotted; padding: 10px 10px 20px 10px;}
#blocActuVideo img {border: 0; float: right;}

#blocVideo {}
#blocVideo ul {list-style: none; padding-bottom: 15px; margin: 10px 0 0 0;}
#blocVideo ul li {float: left;}
#blocVideo ul li.choixVideo {width: 280px; }
#blocVideo ul li.savPlus {}
#blocVideo ul li.savPlus a {
    background: transparent url(../images/flecheSuite.gif) no-repeat 0 4px;
	text-decoration: none;
	font-weight: bold;
	font-size: 10px;
	color: #0D5299;
	padding-left: 10px;}

/************************* Boutons espaces *******************/

#content ul#btnApplications {list-style: none; margin: 0;}
#content ul#btnApplications li a span {display: none;}

#content ul#btnApplications li {
	float: left; 
	margin: 0 20px 10px 0;}
#content ul#btnApplications li a {
	display: block; 
	width: 125px; 
	height: 140px;
	background-position: 0 0;
	background-repeat: no-repeat;}
#content ul#btnApplications li a:hover {background-position: 0 -140px;}

#content ul#btnApplications li#btnBatiment a {background-image: url(../images/btnBatiment.jpg);}
#content ul#btnApplications li#btnLoisirs a {background-image: url(../images/btnLoisirs.jpg);}
#content ul#btnApplications li#btnNautisme a {background-image: url(../images/btnNautisme.jpg);}
#content ul#btnApplications li#btnTransport a {background-image: url(../images/btnTransport.jpg);}

#accueil #content ul#infosPlus {
	clear: both; 
	padding-top: 10px;
	list-style: none;
	margin: 0;}
#accueil #colB ul#infosPlus li a {
	padding: 0 0 0 18px;
	color: #288ABA;
	text-decoration: none;
	font-weight: bold;
	display: block;
	height: 20px;
	width: 250px !important;}
#accueil #colB ul#infosPlus li a:hover {text-decoration: underline;}

#accueil #colB ul#infosPlus li#btnGuidePose a {background: transparent url(../images/btnGuidePose.gif) no-repeat 1px 2px;}
#accueil #colB ul#infosPlus li#btnReseauA a,
#accueil #colB ul#infosPlus li#btnReseauB a {background: transparent url(../images/btnReseau.gif) no-repeat 0 2px;}

/****************************************************************************************/
/*																																						   Footer */
/****************************************************************************************/

#footer {
	background: transparent url(../images/bgFooter.gif) no-repeat left bottom;
	height: 32px;}
#footer p {width: 760px; text-align: center;}
#footer p {
	font-size: 10px;
	font-weight: bold;
	color: #3499CC;
	float: left;}
#footer p a {color: #3499CC; text-decoration: none;}
#footer p a:hover {color: #005984; text-decoration: underline;}

/****************************************************************************************/
/*																																					Actualités */
/****************************************************************************************/

.actualites #content h1 {border-bottom: 1px #ff6600 solid; padding-bottom: 2px;}

#galerie {list-style: none; margin: 0 !important; padding-top: 20px;}
#galerie li {
   width: 150px; height: 150px; 
   float: left; margin: 0 10px 10px 0; text-align: center; 
   border: 1px #38A8DF solid; padding: 2px; }
#galerie li img {
   float: none !important; border: 0 !important; 
   padding: 0 !important; margin: auto !important;}

#detailActualites img {float: left;}

/****************************************************************************************/
/*																																					    Société */
/****************************************************************************************/

#secteurBatiment #content img {
	border: 1px #38A8DF solid;
	padding: 2px;
	float: left; margin: 0 10px 10px 0;}

/****************************************************************************************/
/*																																						 Produits */
/****************************************************************************************/

#colProdA, #colProdB, #colProdC {float: left;}

#colProdA {width: 146px;}
#colProdB {width: 364px;}
#colProdC {width: 180px; margin-left: 10px;}

/***************** colonne produit A */

#colProdA img.visuelProduit {
	padding: 2px;
	background-color: #fff;
	border: 1px #38A8DF solid;
	margin-bottom: 15px;}

#colProdA ul {margin: 0 0 0 0; list-style: none;}
#colProdA ul li {margin-bottom: 5px;}
#colProdA ul li a {
	display: block;
	width: 80px; height: 90px;
	background-repeat: no-repeat;
	background-position: 0 0;}
#colProdA ul li a span {display: none;}
#colProdA ul li#btnA a {background-image: url(../images/btnBatimentMini.jpg);}
#colProdA ul li#btnB a {background-image: url(../images/btnLoisirsMini.jpg);}
#colProdA ul li#btnC a {background-image: url(../images/btnNautismeMini.jpg);}
#colProdA ul li#btnD a {background-image: url(../images/btnTransportMini.jpg);}

#colProdA ul li a:hover {background-position: 0 -90px;}

/***************** colonne produit B */

#content #colProdB h1 {
	font-size: 24px;
	color: #005984;}

#colProdB dl {
	clear: both; 
	border-top: 1px #F0F5F8 solid;}

#colProdB dt, 
#colProdB dd {
	padding: 3px;
	float: left;}

#colProdB dt {
	width: 150px;
	font-size: 12px;
	font-weight: bold;
	color: #38A8DF;
	text-align: right;
	padding-right: 3px;}
#colProdB dd {
	width: 202px;}

/***************** colonne produit C */

#colProdC #btnMethodoPose {
	display: block;
	background: transparent url(../images/btnMethodoPose.gif) no-repeat;
	width: 180px; height: 50px;
	margin-bottom: 15px;}
#colProdC #btnMethodoPose span {display: none;}

/**** exemples d'applications */
#content #exemplesApplis {
	background-color: #D6EEFA;
	padding: 10px 0 0 0;
	margin: 0 0 15px 0;
	width: 180px;}
#content #exemplesApplis h3 {
	margin: 0 10px 10px 10px;
	color: #005984;
	padding-bottom: 3px;
	border-bottom: 1px #005984 dotted;
	font-size: 13px;}
#content #exemplesApplis ul {
	list-style: none;
	padding: 0 10px 10px 10px;
	margin: 0 0 0 0;}
#content #exemplesApplis ul li {
	line-height: 12px; margin-bottom: 5px;
	background: transparent url(../images/flecheOrange.gif) no-repeat 0 3px;
	padding-left: 9px;}
#content #exemplesApplis ul li a {
	text-decoration: none;
	color: #003F5E}
#content #exemplesApplis ul li a:hover {text-decoration: underline;}

/****** nuancier */

#content #nuancier {
	margin-bottom: 15px;
	background: transparent url(../images/bgBasNuancier.gif) no-repeat left bottom;
	padding-bottom: 10px;}
#content #nuancier h3 {
	background: transparent url(../images/bgHautNuancier.gif) no-repeat;
	padding: 10px 0 0 10px;
	font-size: 13px;
	margin: 0;}
#content #nuancier #fondFilets {
	background: transparent url(../images/bgNuancier.gif) repeat-y;
	padding-top: 10px;}
#content #nuancier ul {
	list-style: none;
	padding: 0 10px 0 10px;
	margin: 0;}
#content #nuancier ul li {float: left; width: 33%; text-align: center; margin-bottom: 5px;}
#content #nuancier ul li img {border: 0;}

/********* Liens supplémentaires */

#content #lnkPlus {
	list-style: none;
	margin: 0;}
#content #lnkPlus li {
	line-height: 13px; 
	margin-bottom: 5px;
	border: 1px #fff solid;}
#content #lnkPlus li a {
	color: #005984;
	text-decoration: none;
	display: block;
	padding-left: 22px;}
#content #lnkPlus li a:hover {text-decoration: underline;}
#content #lnkPlus li.btnTelecharger a {background: transparent url(../images/pictoDownload.gif) no-repeat;}
#content #lnkPlus li#btnContact a {background: transparent url(../images/pictoContact.gif) no-repeat;}
#content #lnkPlus li#btnEchantillon a {background: transparent url(../images/pictoEchantillon.gif) no-repeat;}

#content #lnkPlus li.btnTelecharger a#downloadPDF {
	width: 88px; height: 36px;
	background: transparent url(../images/get_adobe_reader.gif) no-repeat 22px 5px;}
#content #lnkPlus li.btnTelecharger a#downloadPDF span {display: none;}

#listeApplications #content #lnkPlus {width: 150px;}

/*************** Zoom couleur */

#zoomContent {
	margin: 10px auto 0 auto;
	padding: 10px;
	background-image: none;
	background-color: #fff;
	text-align: center;}
#zoomContent img#appli {width: 400px; margin-bottom: 10px;}
#zoomContent img#nuancier {width: 195px; margin-bottom: 10px;}
#zoomContent p a {color: #ff6600;}