/* 
	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:#C6C8C7 url(images/entete_bg.gif) repeat-x top left;
}

#containerEntete
{
	width:1000px;
	margin:0 auto;
	text-align:left;
}

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

h1
{
	font-size:1.2em;
	margin:0;
	color:#333E48;
	padding:0 0 0 18px;
}

h2
{
	font-size:1.2em;
	margin:0;
	padding:0;
	color:#000;
}

h3
{
	font-size:1.1em;
	margin:0;
	color:#CE2214;
	padding:0;
}

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

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

.gras
{font-weight:bold;}

.italic
{font-style:italic;}

.txt_petit
{font-size:0.9em; padding:20px 0 0 0 !important;}

.txt_petit_proche
{font-size:0.9em;}

.txt_rouge ul
{color:#CA290E;}

.txt_rouge li
{color:#CA290E;}

.txt_rouge
{color:#CA290E;}

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

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

#entete
{
	width:1000px;
	margin:0;
}

div#entete{height:83px;}

html>body div#entete
{
	min-height:83px;
	height:auto;
}

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

div#logoCompagnie
{
	float:left;
	width:140px;
	padding:0;
}

div#logoCompagnie img.logo
{display:block; border-right:2px solid #fff; border-left:2px solid #fff;}

#logoPrint
{display: none;}

/* ------------------------------- */

#entete p#bRetour_entete
{
	float:left;
	width:200px;
	color:#fff;
	font-size:1em;
	margin:16px 0 0 28px;
}

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

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

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

#topMenu ul li
{
	float:left;
	color:#fff;
	font-size:1em;
	margin:0;
	padding:0 50px 0 0;
}

#topMenu ul li.topMenu_ES
{padding:0 24px 0 0;}

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

#topMenu a:hover, #entete p#bRetour_entete a:hover
{text-decoration:underline;}

/* --- Toutes les images en background des étapes ------------------- */

#zoneEtapes
{
	background:#37424D url(images/zoneEtapes_bg.gif) repeat-x top left;
	width:1000px;
	border:0px;
	padding-left:0px;
}

#zoneEtapes_neutre
{
	background:url(images/etapes_bg_neutre.gif) no-repeat top left;
	height:34px; 
}
#zoneEtapes_e1
{
	background:url(images/etapes_bg_e1.gif) no-repeat top left;
	height:34px; 
}
#zoneEtapes_e2
{
	background:url(images/etapes_bg_e2.gif) no-repeat top left;
	height:34px; 
}
#zoneEtapes_e3
{
	background:url(images/etapes_bg_e3.gif) no-repeat top left;
	height:34px; 
}
#zoneEtapes_e4
{
	background:url(images/etapes_bg_e4.gif) no-repeat top left;
	height:34px; 
}
#zoneEtapes_e5
{
	background:url(images/etapes_bg_e5.gif) no-repeat top left;
	height:34px; 
}
#zoneEtapes_e6
{
	background:url(images/etapes_bg_e6.gif) no-repeat top left;
	height:34px;
}
#zoneEtapes_e7
{
	background:url(images/etapes_bg_e7.gif) no-repeat top left;
	height:34px; 
}
#zoneEtapes_e8
{
	background:url(images/etapes_bg_e8.gif) no-repeat top left;
	height:34px; 
}

/* -- zone Détails de la porte -------------------- */

#zoneDetailsPorte
{
	float:right;
	width:238px;
	padding:0;
	margin:0;
	height:1%;
}

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

#zoneDetailsPorte ul li
{
	margin:0 0 -3px 0;
	padding:0;
}

/* ---------------------------------------------- */
/* --- Sous-menu du menu principal Gris --------- */

#sDetails
{
    text-align: left;
	display: block;
    left: 0;
    top: 0;
	z-index: 100;
	font-size: 0.9em;	
}

#sDetails div
{
	display:none;
	position: absolute;
	left:0;
	top:-2px;
	z-index: 200;
	cursor: default;
	margin:0;
}

#sDetails div div
{
	position: relative;
	display: block;
	width: 100%;
	/*white-space: nowrap;*/
	background: #1E5A98;
	padding:11px 0;
	height: 1%;
	color: #fff;
	border-top:3px solid #fff;
	
}

#sDetails p
{
	color: #fff;
	padding:0 15px 11px 15px;
}

/* largeur des zones de sous-menu anglais */
#sDetails #MdetailsMenu
{width: 238px;}

/* ------------------------------------------------------------------------------------------------------------ */

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

#zoneContenu_wrap
{
	background:#fff;
	width:100%;
}

#zoneContenu_mid
{
	width:1000px;
	margin:0 auto;
	text-align:left;
}

div#zoneContenu_mid{height:498px;}

html>body div#zoneContenu_mid
{
	min-height:498px;
	height:auto;
}

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

#colGauAcc
{
	width:758px;
	float:left;
	padding:35px 0 0 0;
}

#colGauAcc img
{
	display:block;
	margin:0 0 45px 37px;
}

#colGauAcc p
{
	padding:0 60px 0 76px;
	line-height:1.4em;
}

#colDrAcc
{
	width:209px;
	float:left;
	padding:35px 0 0 0;
}

#colDrAcc img
{
	display:block;
	margin:0 0 13px 0;
}

/* ------------------------------------------ */
/* -- Étapge Début -------------------------- */

#zoneExplicative
{
	width:1000px;
	padding:11px 0;
	border-bottom:2px solid #A31706;
}

#zoneTitre
{
	float:left;
	width:900px;
}

#zoneTitre h1.titreDebut
{
	padding:12px 0 8px 18px;
}

/* -- zone album photo ---- */

#zoneAlbumPhoto
{
	float:left;
	width:100px;
	padding:9px 0 0 0;
}

#zoneAlbumPhoto p
{
	float:left;
	font-size:0.75em;
	 width:76px;
}
#zoneAlbumPhoto p a:link, #zoneAlbumPhoto p a:visited, #zoneAlbumPhoto p a:active
{
	color:#000;
	text-decoration:none;
}
#zoneAlbumPhoto p a:hover
{text-decoration:underline;}

/* ---  contenu du Début - Connexion --------------- */

#contenantInfos
{
	width:1000px;
}

.contenu
{
	width:847px;
	margin:0 0 0 52px;
	padding:19px 0 14px 0;
}

.contenu p
{padding:0 244px 15px 0;}

.contenu h1
{
	padding:0 0 15px 0;
	font-size:1.1em;
}

.contenu p a:link, .contenu p a:active, .contenu p a:visited
{color:#E41B00;}
.contenu p a:hover
{text-decoration:none;}
/* -- formulaire contact ----------- */

#formLogin
{
	width:847px;
	margin:0 0 0 52px;
	padding:0 0 20px 0;
}

#formLogin p
{
	padding:0 250px 15px 0;
}

.lesChamps
{
	margin:0;
	float:left;
	width:442px;
}

.lesChamps input
{
	width:264px;
	margin:0px 0px 5px 0px;
	
}
.lesChamps label
{
		
}

.lesChamps input
{
		
}

.lesChamps span 
{
	width:264px;
	/*margin:0 0 5px 11px;*/
	margin-left:4px;
	vertical-align:middle;
}

.lesChamps p
{
	padding:0px 0 0 11px !important;
	font-size:0.9em;
}

.lesChamps p a:link, .lesChamps p a:visited, .lesChamps p a:active
{color:#CE2214;}
.lesChamps p a:hover
{text-decoration:none;}

.formBouton_connexion
{
	float:left;
	width:209px;
	padding:24px 0 0 0;
}

/* ---  contenu du Début - Inscription --------------- */

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

.lesChamps input.iCaseCoche
{
	width:15px;
	margin:0 5px 5px 16px;
	vertical-align:middle;
}

.formBouton_inscription
{
	float:left;
	width:209px;
	padding:188px 0 0 0;
}

#txtZoneTitre p
{
	font-size:0.95em;
}

/* ---------------------------------------------------------------------- */
/* --- Étape 1 ---------------------------------------------------------- */

#zoneTitre h1.titreEtape
{
	float:left;
	margin:0 20px 0 0;
}

#zoneTitre ul
{
	list-style:none;
	margin:0;
	padding:0 0 0 2px;
}

#zoneTitre ul li
{
	margin:0;
	padding:0;
	font-size:0.95em;
}

/* ----------------------------------------- */
#zoneEtape01
{
	width:620px;
	margin:8px 0 0 59px;
}

.options
{padding:0 0 26px 0;}

.blocOption
{
	width:547px;
	margin:0 0 0 37px;
}

#formParcourir
{margin:10px 0 0 0;}

#formParcourir input.iparcourir
{
	float:left;
	width:349px; 
	margin:0 19px 0 11px;
}

/* -- option 1 - boîte photo téléchargée ------------ */

#box_telechargementPhoto
{
	float:left;
	background:#D1D0D0 url(images/coinGris_TG.gif) no-repeat top left;
	width:167px;
	text-align:center;
}

.coin_TD
{background:url(images/coinGris_TD.gif) no-repeat top right;}
.coin_BD
{background:url(images/coinGris_BD.gif) no-repeat bottom right;}
.coin_BG
{background:url(images/coinGris_BG.gif) no-repeat bottom left;}

#box_telechargementPhoto img
{
	margin:11px 0;
	border:3px solid #fff;
}

/* -- option 2 - banque photo ----------------------- */

#etape01_banque
{
	width:703px;
	height:230px;
	margin:15px 0 0 0;
	position:relative;
}

div.blocBanque1, div.blocBanque2
{
	width : 710px;
    height : 230px;
}
	  
div.blocBanque1 
{
      	position : absolute;
      	top :0;
      	left :0;
		background:url(images/etape01_banque_bg.gif) no-repeat top left;
}
	  
div.blocBanque2 
{overflow : auto;}
div.blocBanque3 
{padding :9px 5px 0 6px;}


.blocBanque3 div
{
	padding:0 0 9px 0;
}

.blocBanque3 div a img
{border:3px solid #fff;}

.blocBanque3 div a:hover img
{border:3px solid #CE2214;}

/* -- option 3 - façades ----------------------- */

#box_facades
{margin:0 0 235px 35px;}

.zoneFacade
{position:relative;}

/* ---------------------------------------------------------------------- */
/* --- Étape 2 ---------------------------------------------------------- */

#zonePorte
{
	width:587px;
	float:left;
}

#zonePorte img
{
	display:block;
	margin:0 0 2px 0;
}

#colDr
{
	float:left;
	width:413px;
	padding:10px 0 20px 0;
}

.contenuEtapes
{padding:0 11px 0 18px;}

.contenuEtapes h2
{padding:0 0 9px 0;}

/* -- Zone de choix des formes --------- */
#zoneFormes
{margin:0 0 35px 0;}
#zoneFormes img
{margin:0 13px 0 0;}
#zoneFormes img.nomargin, .zoneCouleurs img.nomargin
{margin:0;}

#zoneFormes a img
{border:2px solid #FFFFFF;}
#zoneFormes a:hover img
{border:2px solid #CE2214;}

/* -- Zone de choix des dimensions des formes --------- */

#zoneDimensions p
{padding:0 0 10px 0;}

#zoneDimensions select
{
	width:111px;
	margin:0 17px 0 0;
}

.boxAjouter
{text-align:right;}

#zoneDimensions input.ibAjouter
{
	margin:38px 0 0 0;
	text-decoration:none;
	border: solid 0px black;
	border-style: hidden;
}

#zoneDimensions2 p
{padding:0 0 10px 0;}

#zoneDimensions2 select
{
	width:111px;
	margin:0 17px 0 0;
}

.boxAjouter2
{text-align:right;}

#zoneDimensions2 input.ibAjouter
{
	margin:38px 0 0 0;
	text-decoration:none;
	border: solid 0px black;
	border-style: hidden;
}

/* ---------------------------------------------------------------------- */
/* --- Étape 3 ---------------------------------------------------------- */

.optionEtape
{padding:0 0 26px 0;}

.optionEtape p.selection
{
	padding: 0 0 5px 39px;
	color:#666;
}

.optionEtape p.selection span
{
	padding: 0 0 0 19px;
	color:#993300;
}

.optionEtape p.comparerModeles
{
	float:right;
	padding:5px 24px 0 0;
	font-size:0.9em;
}

.optionEtape p.comparerModeles a:link, .optionEtape p.comparerModeles a:visited, .optionEtape p.comparerModeles a:active
{color:#A91A07;}

.optionEtape p.comparerModeles a:hover
{text-decoration:none;}

/* -- Modèles ---------------------------- */

.modele img
{
	display:block;
	margin:0 0 8px 2px;
	
}

.modele a img
{border:2px solid #999;}

.modele a:hover img
{border:2px solid #AB1B07;}

.modele_bgTop
{
	background:url(images/etape07_accOpt_bg_top.gif) no-repeat 2px 5px; 
	padding:14px 0 5px 2px; 
	margin:0 0 20px 0;
	border:1px solid #6E6C6C;
}

/* -- Motifs et quincaillerie ------------ */

.motifs
{margin:0 0 19px 37px;}

.motifs a img
{
	border:2px solid #999;
	margin:0 25px 0 0;
}

.motifs a:hover img
{border:2px solid #AB1B07;}

/* ---------------------------------------------------------------------- */
/* --- Étape 4 ---------------------------------------------------------- */

.zoneCouleurs
{
	width:298px;
	margin:0 0 0 35px;
	padding:0 0 49px 0;
}

.zoneCouleurs .color
{margin:0 0 5px 0;}

.zoneCouleurs .color 
{
	margin:0 2px 0 0;
}

.zoneCouleurs a .color
{border:1px solid #fff;}

.zoneCouleurs a:hover .color
{border:1px solid #CE2214;}

.contenuEtapes p.txt_avertissement
{font-size:0.8em;}

/* ---------------------------------------------------------------------- */
/* --- Étape 5 ---------------------------------------------------------- */

/* -- fenetre selectionnee thumbnail ---------- */

#fenetreSelectionneeThumb
{
	float:left;
	margin:0 0 0 11px;
}

#fenetreSelectionneeThumb div img
{
	display:block;
	float:left;
	margin:0 1px 1px 0;
}

/* -- fenetre selectionnee ---------- */

#fenetreSelectionnee
{
	/*margin:10px 0 0 0px;*/
	margin-left:auto;
	margin-right:auto; 
	margin-top:10px;

}

#fenetreSelectionnee  *
{
	/*margin:10px 0 0 0px;*/
	
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

#fenetreSelectionnee div img
{
	display:inline;
	margin:0 8px 5px 0;
}

/* --------------------- */

#checkbox_fenetreGivree
{
	margin:15px 0 10px 10px;
}

/* --------------------- */

.fenetres_bgTop
{
	background:url(images/etape07_accOpt_bg_top.gif) no-repeat top left; 
	padding:10px 0 0 0; 
	margin:15px 0 10px 0;
}

.fenetres
{
	width:384px;
	height:126px;
	position:relative;
}

div.blocFenetres1, div.blocFenetres2
{
	width : 384px;
    height : 126px;
}
	  
div.blocFenetres1 
{
      	position : absolute;
      	top :0;
      	left :0;
		background:url(images/etape05_fenetre_bg.gif) no-repeat top left;
}
	  
div.blocFenetres2 
{overflow : auto;}
div.blocFenetres3 
{padding :0 9px;}

.zoneFenetres
{
	width:340px;
	padding:0 0 20px 0;
}

.zoneFenetres a div
{border:2px solid #999999;}
.zoneFenetres a:hover div
{border:2px solid #AB1B07;}


/* ---------------------------------------------------------------------- */
/* --- Étape 6 ---------------------------------------------------------- */

.ouvreporte
{padding:15px 0 0 0;}

.ouvreporte a img
{border:2px solid #999999; margin:0 0 10px 3px;}
.ouvreporte a:hover img
{/*border:2px solid #AB1B07;*/}

/* ---------------- */

.zoneOuvrePorte
{
	width:340px;
	background:#fff;
	color:#000;
	padding:10px 0 11px 0;
	margin:0 0 6px 0;
	
}

.reddiv a:hover div
{
	/*border:2px solid #AB1B07;*/
}

.reddiv 
{
	text-decoration:none;	
}

.zoneOuvrePorte p
{
	font-size:0.9em;
	padding:0 9px 11px 9px;
}

.zoneOuvrePorte h3
{padding:0 0 5px 9px;}

.boxQuantite
{margin:0 0 0 9px;}

.boxQuantite label
{
	font-size:0.9em;
	font-weight:bold;
}

.boxQuantite select
{
	margin:0 0 0 10px;
}

/* ---------------------------------------------------------------------- */
/* --- Étape 7 ---------------------------------------------------------- */

#box_accessoiresOpt
{margin:0 0 35px 0;}

.accessoiresOpt_bgTop
{
	background:url(images/etape07_accOpt_bg_top.gif) no-repeat top left; 
	padding:10px 0 0 0; 
	margin:15px 0 20px 0;
}
.accessoiresOpt_bgBas
{background:url(images/etape07_accOpt_bg_bas.gif) no-repeat bottom left; padding:0 0 11px 0;}

.accessoiresOpt
{
	width:384px;
	height:255px;
	position:relative;
}

div.blocAccessoiresOpt1, div.blocAccessoiresOpt2
{
	width : 384px;
    height : 255px;
}
	  
div.blocAccessoiresOpt1 
{
      	position : absolute;
      	top :0;
      	left :0;
		background:url(images/etape07_accOpt_bg.gif) no-repeat top left;
}
	  
div.blocAccessoiresOpt2 
{overflow : auto;}
div.blocAccessoiresOpt3 
{padding :0 9px;}

.zoneAccessoiresOpt
{
	width:340px;
	background:#fff;
	color:#000;
}

div.zoneAccessoiresOpt{height:254px;}

html>body div.zoneAccessoiresOpt
{
	min-height:254px;
	height:auto;
}

.zoneAccessoiresOpt p
{
	font-size:0.9em !important;
	padding:0 9px 11px 9px;
}

.zoneAccessoiresOpt h3
{padding:0 0 5px 9px;}


/* ---------------------------------------------------------------------- */
/* --- Étape 8 ---------------------------------------------------------- */

#zoneEtape08
{
	width:266px;
	margin:39px 0 0 51px;
}

#zoneEtape08 img
{
	display:block;
	margin:0 0 7px 0;
}

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

#pied_wrap
{background:url(images/pied_bg.gif) repeat-x top left;}

#pied_mid
{
	width:1000px;
	margin:0 auto;
	text-align:left;
}

div#pied_mid{height:49px;}

html>body div#pied_mid
{
	min-height:49px;
	height:auto;
}

#box_bPiedGau
{
	float:left;
	width:233px;
	padding:4px 0 0 0;
	text-align:right;
}

#box_bPiedDr
{
	float:left;
	width:409px;
	padding:4px 0 0 0;
}

#box_bPiedMid
{
	float:left;
	width:358px;
}

#pied_mid ul
{
	list-style:none;
	margin:0;
	padding:32px 0 7px 48px;
}

#pied_mid ul li
{
	float:left;
	padding:0 32px 0 0;
	margin:0;
	color:#666;
	font-size:0.8em;
}

#pied_mid ul li a:link, #pied_mid ul li a:visited, #pied_mid ul li a:active, #pied_mid p a:link, #pied_mid p a:visited, #pied_mid p a:active
{
	color:#666;
}

#pied_mid ul li a:hover, #pied_mid p a:hover
{text-decoration:none;}

#pied_mid p
{
	text-align:center;
	padding:7px 0;
	margin:0;
	color:#666;
	font-size:0.9em;
}

.removeDoorButton {
	border: 0.5px solid #FFFFFF; 
	background-color: #000000;
	color: #FFFFFF;
	width: 99px;
	font-size:11px;
}

.patternDescription
{
	padding: 10px;
	border: 2.5px solid #C0C0C0;
	background-color: #FFFFFF;
	color: #000000;
	
	text-align: center;
	text-decoration:none;
	width: 140px;
	height: 100px;
	vertical-align:middle;
	font-size: 10;
	
}

.patternDescription img 
{
	 width : expression((this.width < 120) ? "auto" : "120px");
	 max-width:120px;
	
}

.patternDescriptionSelected
{
	padding: 10px;
	border: 2.5px solid #993300;
	background-color: #FFFFFF;
	color: #993300;
	font-size: 10;
	text-align: center;
	font-weight:bold;
	text-decoration:none;
	width: 140px;
	height: 100px;
	vertical-align:middle;
}

.patternDescriptionSelected img 
{
	 width : expression((this.width < 120) ? "auto" : "120px");
	 max-width:120px;
}

.nounderline
{
	text-decoration:none;
}

.color
{
	width:48px;
	height:33px;
	
}

.savedDoorBox
{
	padding: 10px;
	border: 2.5px solid #C0C0C0;
	background-color: #FFFFFF;
	color: #000000;
	font-size: x-small;
	text-align: center;
	text-decoration:none;
	font-size: 10;
	
	
}

.savedDoorBox img 
{
	
}


.windowDescription
{
	padding: 10px;
	border: 2.5px solid #C0C0C0;
	background-color: #FFFFFF;
	color: #000000;
	
	text-align: center;
	text-decoration:none;
	width: 140px;
	height: 74px;
	vertical-align:middle;
	font-size: 10;
	
}

.windowDescription img 
{
	 width : expression((this.width < 120) ? "auto" : "120px");
	 max-width:120px;
	
}

.windowDescriptionSelected
{
	padding: 10px;
	border: 2.5px solid #993300;
	background-color: #FFFFFF;
	color: #993300;
	font-size: 10;
	text-align: center;
	font-weight:bold;
	text-decoration:none;
	width: 140px;
	height: 74px;
	vertical-align:middle;
}

.windowDescriptionSelected img 
{
	 width : expression((this.width < 120) ? "auto" : "120px");
	 max-width:120px;
}

#stepBar  
{
    padding:0px;
	margin: 0px;
	border: 0px; 
	cursor: default;
	width:759px;
}
    
#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	opacity: 0.85;
	font-size:0.9em;
	font-weight:lighter;

}
#tooltip h3, #tooltip div { margin: 0; }

.cantbevisited:visited
{
	color:#993300;
}

.cantbevisited
{
	color:#993300;
}

DIV#loader 
{
	margin:auto;
	border: 1px solid #ccc;
	height:356px;
	overflow:hidden;
}

.loading
{
	background-position: center center;
	border: 10px solid #ccc;
	background-color: #FFFFFF;
	background-image: ../images/ajax-loader.gif;
	background-repeat: no-repeat;
}

.selectSizeOption3 {

	margin-top:10px;
	margin-left:35px;
	
}


/* File Input CSS Hack */
div.fileinputs {
	position: relative;
}

div.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

input.file {
	position: relative;
	text-align: right;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
}