@charset "utf-8";
/* CSS Document */

/* CSS Document  |  Goyard-Pochon | Agence Mon Moulin */

/* R�gle du plus faible au plus fort des s�lecteurs : 
   1. * {...} :            			0000 (aucun idenfifiant, aucune classe, aucun �l�ment) ;
   2. p {...} :            			0001 (aucun idenfifiant, aucune classe, un �l�ment) ;
   3. blockquote p {...} : 			0002 (aucun idenfifiant, aucune classe, deux �l�ments) ;
   4. .class {...} :       			0010 (aucun idenfifiant, une classe, aucun �l�ment) ;
   5. p.class {...} :      			0011 (aucun idenfifiant, une classe, un �l�ment) ;
   6. blockquote p.class {...} : 	0012 (aucun idenfifiant, une classe, deux �l�ments) ;
   7. #id {...} : 					0100 (un idenfifiant, aucune classe, aucun �l�ment) ;
   8. p#id {...} : 					0101 (un idenfifiant, aucune classe, un �l�ment) ;
   9. blockquote p#id {...} : 		0102 (un idenfifiant, aucune classe, deux �l�ments) ;
  10. .class #id {...} : 			0110 (un idenfifiant, une classe, aucun �l�ment) ;
  11. .class p#id {...} : 			0111 (un idenfifiant, une classe, un �l�ment) ;
  12. blockquote.class p#id {...} : 0112 (un idenfifiant, une classe, deux �l�ments) ;
  13. <p style="..."> : 			1000 (attribut HTML style qui ne sera supplant� que par un style utilisateur normal) ;
  14. <p style="... !important"> : 	1000 (attribut HTML style marqu� !important qui ne sera supplant� que par un style utilisateur lui-m�me marqu� !important).
*/
/* clear : both or left or right <<< on utilise le clear quand on a des �l�ments flottants
   clear interdit le voisinage d'un flottant, l'�l�ment est alors pouss� vers le bas
*/
/* attention : pas de padding et margin dans un �l�ment en float (r�action des navigateurs)
   ajouter un div à l'intérieur de l'élément >> class="elementPAD"
*/ 

/* renseigner les alt et title
   un alt sert avant tout de texte de remplacement pour les images ou sons
   un title est une description du lien ou de l'image (infobulle IE et Firefox)
*/ 

/*  PAGE LAYOUT FORMATTING
===============================================*/

html, body {height: 100%;}	 /* important surtout si l'on veut positionner un footer touours en bas de page*/

* {margin: 0; padding: 0;} 

body {
	min-width: 990px;
	color: #787878;
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 0.8em;
	text-align: center;	
	background: #656565;
}

/* attention les display:block met les img par default en clear:both, cons�quence : elles ne suivent pas les textes mais reviennent � la ligne */
/* astuce : mettre les img en display:inline quand besoin */
img {display: block; border: 0;} /* pour enlever les decalages sous les images car les images sont pris comme des textes pour ie*/

p {font-size: 100%;}  

div.hr {
	height: 15px; 
	margin: 10px 0;
	background: #fff url(images/fond-hr.gif) repeat-x scroll center;
}
div.hr hr {
	display: none;
}
hroiu { 
	border-bottom: 1px green dotted; /* une seule bordure (sinon firefox met une bordure en haut ET en bas mais pas IE */
}
a {color:#fe0202; text-decoration: under; }
a:hover{ color:#fff; background-color:#fe0202; text-decoration: none;}


/*  liens et couleurs et g�n�ral ---------------------------------------------------------------------------*/

img.floatleft {float: left;}   /* pour les icones essentiellement, pour que le texte s'aligne à coté de l'image */
img.floatright {float: right;}

.left {float: left;}
.right {float: right;}
.clear {clear: both;}

.textAlignLeft {text-align: left;}

.smallTypo {font-size: 80%;}
.middleTypo	{font-size: 90%;}
.bigTypo {font-size: 120%;}
.enAvantTypo {font-size: 130%;}

.bold {font-weight: bold;}

.noir {color: #000000;}
.blanc {color:#ffffff;}
.grisFonce {color:#3b3b3b;} 
.grisMoyen {color:#6d6d6c;} 
.liengrissouligne a { color: #999999; text-decoration: underline;}
.liengrissouligne a:hover { color: #008dd8; text-decoration: underline;} 
.rouge {color: #fe0202;} 
.saumon {color:#e36455;}
.vert {color: #0a9b05;} 
.vertFonce {color: #394123;} 
.bleu {color: #537cfd;}
.fushia {color: #bf53fd;}
.violet {color: #7b53fd;}
.bleuGris {color: #4d5a8f;}
.orange {color: #fc6805;}


.sousP {
	margin-left: 15px;
}
 
h1 {  /* titre des pages statiques */
	font-size: 130%;
	font-weight: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #394123;
	margin: 0 0 10px 15px; /* pas de margin top pour ce site, d�calage du fond pour firefox*/
	
}
h2 {
	font-size: 140%;
	font-weight: normal;
	font-family: arial, verdana, helvetica, sans-serif;
	color: #ffffff;
	line-height: 24px; 
	
}
h3 { /* titre des blocs de la colonne de droite */
	font-size: 120%;
	font-weight: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #e1564f;
	line-height: 19px;
	margin: 10px 0px 10px 15px;
}
h4 { /* titre des vins dans la boutique */
	font-size: 120%;
	font-weight: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #e36455;
	line-height: 19px;
	margin: 0;
}

/*  Page pour fond---------------------------------------------------------------------------*/
#page {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	background: #fff url(images/fond-entete.jpg) top repeat-x;
} 
#pagebas {
	width: 100%;
	height: 130px;
	margin-left: auto;
	margin-right: auto;
	background: url(images/fond-footer.jpg) top repeat-x;
} 

/*  container ---------------------------------------------------------------------------*/
#container {
	width: 990px;
	min-height: 100%; /* indispensable pour que le container prenne bien toute la page en hauteur */
	height: auto;
	position: relative;
	margin: 0 auto;
	margin-top: 0px; 
	background: url() center repeat-x;
}
* html #container {	/* indispensable pour que le container prenne bien toute la page en hauteur */
	height: 100%;
} 

/*  Header ---------------------------------------------------------------------------*/

#enteteDtHaut {
	width: 821px;
	height: 73px;
}
#enteteg {
    float: left;
	width: 169px;
	height: 140px;
	margin: 0; /* haut droite bas gauche , NE PAS OBLIER LES PX pour FIREFOX*/
	padding: 0;
	border: none;	
}
#entetedt {
    float: left;
	width: 821px;
	height: 140px;
	margin: 0; /* haut droite bas gauche , NE PAS OBLIER LES PX pour FIREFOX*/
	padding: 0;
	border: none;
	text-align: left;	
}
#entetecentrale {
	width: ;
	height: ;
}  

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

ul#nav {
	width: 821px;
	height: 37px;
	list-style: none;
	margin: 0;	
}
ul#nav li {  
	float:left;	 
	display: block;
	height: 37px;
	padding:0px;
	margin: 0;
	text-align: left;
}
ul#nav li a {   
display: block; /* indispensable pour un menu "image" */
border: none;
height: 37px;
line-height: 37px;/* astuce pour centrer verticalement une seule ligne de texte*/
font-size: 90%;
font-weight: bold;
color:#767d64;
margin-right : 2px; 
padding: 0;
text-align: center;
text-decoration: none;
text-transform: none; /* transform le texte en majuscules, autres : lowercase (all mini), capitalize (first lettre maj) et none*/
overflow: hidden;
}  

#nav li a {
	display: block;
	line-height: 37px;
	text-indent: -5000px;/*Vire le txt a -5000*/
	overflow: hidden;
	background-position: center center;
}	
	#nav li.active a, ul#nav li.active a:hover {
		background-position: center top;
	}
	#nav li a:hover {
		background-position: center bottom;
	}	
	#nav_hebergement {
		width: 131px; background: url(images/menu-hebergement.jpg) top no-repeat;
	}
	#nav_housing {
		width: 131px; background: url(images/menu-housing.jpg) top no-repeat;
	}
	#nav_domaines {
		width: 131px; background: url(images/menu-domaines.jpg) top no-repeat;
	}		
	#nav_services {
		width: 131px; background: url(images/menu-services.jpg) top no-repeat;
	}
	#nav_support {
		width: 131px; background: url(images/menu-support.jpg) top no-repeat;
	}		
	#nav_contact {
		width: 131px; background: url(images/menu-contact.jpg) top no-repeat;
	}			


/*  Content Page ---------------------------------------------------------------------------*/ 
#content{
	width: 990px;
}


/*  Content pour la page de paiment s�curis�e seulement ---------------------------------------------------------------------------*/ 
#contentPaiement {
	text-align: left;
	color: #000000;
}
#contentPaiement img{
	display: inline; /* remet les images en mode normal car le display:block met les images en clear:both */
}
#contentPaiement .sips_trans_ref_table_amount_transaction_result, #contentPaiement .sips_trans_ref_table_amount_transaction,
#contentPaiement .sips_card_number_title, #contentPaiement .sips_expiry_date_card_title {
	color: #fe0202; /*   rouge */
}
#contentPaiement .sips_secure_message {
	color: #537cfd; /*   bleu */
}
#contentPaiement .sips_customer_return_button {
	margin-top: 30px;
}
#contentPaiement hr{
	margin: 10px 0 10px 0;
}
#contentPaiement .sips_cryptogram_message{
	padding: 10px;
}



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


hr.separation { /* astuce pour remplir le fond de content qui est vide a cause des float */
   clear: both;
   visibility: hidden;
   height: 1px;	
   padding: 0;
   margin: 0;
}

/*  main left - home
===============================================*/
#mainLeft {
	width: 718px;
	min-height: 345px;
	float:left;
	padding: 0px;
	margin: 0; 
	text-align: left; 
} 

/*  main right	- home
===============================================*/

#mainRight {
	width: 272px;
	height: 345px;
	float:left;
	text-align: left;
	margin: 0;
} 

/*  main bottom- home
===============================================*/
#mainBottom {
	width: 990px;
	float:left;
	margin: 0;
}  
 
/* diff�rents padding pour les blocs*/
#mainPad01{	 
	width: 214px;
	margin-top: 0;
	padding: 0;
} 
#mainPad02{
	width: 220px;
	margin-top: 0;
	padding: 0;
}  

/* tous les blocs et leurs btn */
#homeBottom01 {
	float:left;
	width: 240px;
	text-align: center;
} 
#homeBottom02 {
	float:left;
	width: 270px;
	text-align: center;
}

a.imgborderover img{
  border: 1px solid #707070;
}
a:hover.imgborderover img{
  border: 1px solid #ffffff;
} 
a#btn-galeriehome { 
  float: left;
  width: 199px;
  height: 49px;
  display: block;
  background: url(images/btn-galeriehome.gif) no-repeat;
}
a#btn-galeriehome:hover {
  display: block;
  background: url(images/btn-galeriehome-over.gif) no-repeat;
}  



/* _________________main - hebergement - hebergement mutualis� - hebergement d�di� - support - contact____________________________  */

#mainLeft2 {
	width: 169px;
	min-height: ;
	float:left;
	padding: 0px;
	margin: 0; 
	text-align: left; 
} 
#mainRight2 {
	width: 821px;
	min-height: 500px;
	float:left;
	padding: 0px;
	margin: 0; 
	text-align: left; 
}
ul#navCommander, ul#navOffres {
	width: 169px;
	list-style: none;
	margin: 0;
		
}
ul#navCommander li, ul#navOffres li {  	 
	display: block;
	height: 30px;
	padding:0px;
	margin: 0;
	text-align: left;
}
ul#navCommander li a, ul#navOffres li a {   
	display: block; /* indispensable pour un menu "image" */
	border: none;
	width: 169px;
	height: 30px;
	line-height: 30px;/* astuce pour centrer verticalement une seule ligne de texte*/
	font-size: 90%;
	margin: 0; 
	padding: 0;
	text-align: center;
	text-indent: -8px;
	text-decoration: none;
	text-transform: none; /* transform le texte en majuscules, autres : lowercase (all mini), capitalize (first lettre maj) et none*/
	overflow: hidden;
	background: url(images/btn-commander-left.gif) no-repeat;
	background-position: center top;
} 
ul#navCommander li a:hover, ul#navOffres li a:hover {   
	background: url(images/btn-commander-left.gif) no-repeat;
	background-position: center bottom;
} 
#navCommander li.active a, #navOffres li.active a, ul#navCommander li.active a:hover {
	background-position: center bottom;
}
a#navCommander_mutuSmall, a#navCommander_mutuMedium, a#navCommander_mutuLarge, a#navOffres_mutu {
	color: #537cfd;	/* bleu */
	font-weight: bold;
}
a#navCommander_dedieSt, a#navCommander_LoadB, a#navCommander_surM, a#navOffres_dedie,a#navOffres_loadB, a#navOffres_surM {
	color: #bf53fd; /* fushia */
	font-weight: bold;
}
a#navOffres_housing {
	color: #7b53fd; /* violet */
	font-weight: bold;
}

.hebergementPres {
	float:left;	 
	width: 271px;
	background: url(images/icone-hebgt-fond.gif) top repeat-y;
	text-align: center;
}

/* _________________MainRight Contenu - offres h�bergement mutu - offres hebergement d�di� ____________________________  */
#mainRightContenu {
	width: 821px; 
	float:left;
	background: url(images/hebgt-tabl-fond.gif) top repeat-y; /* fond dupliqu� avec lignes verticales int�gr�es */
	text-align: left;
}
table#tableGenerale {
	margin-left: 32px;
}
table#tableGenerale p{
	font-size: 90%;
}

div.erreur {
	margin-left: 32px;
	padding: 20px;
	border: 1px dotted #fe0202;
	color: #fe0202;
}
select.selectPays {
	font-size: 75%;
}

tr.fondGris td {background: #f8f8f8;}
tr.fondVertPale td {background: #f7fde4;}

tr.basGris td {
	border-bottom: #696868;
	border-width: 0 0 1px 0;
	border-style: none none solid none;	
	padding: 5px 0;
}
tr.basGrisClair td {
	border-bottom: #c1c1c1;
	border-width: 0 0 1px 0;
	border-style: none none solid none;
	padding: 5px 0;
}
tr.basGrisClair:hover {
	background: #f7fde4;
}

tr.inputNormal td {
	padding: 5px 0;
}
tr.inputNormal:hover {
	background: #f7fde4;
}
tr.dernierNormal td {
	padding: 5px 0 20px 0;
}
tr.dernierNormal:hover {
	background: #f7fde4;
}
tr.premierFondGris td {
	background: #f2f2f1;
	color: #333232;
	padding: 10px 0 5px 0;
}
tr.premier td {
	color: #fe0202;
	padding: 10px 0 5px 0;
}
tr.dernier td {
	border-bottom: #696868;
	border-width: 0 0 1px 0;
	border-style: none none solid none;	
	padding: 5px 0 10px 0;
}
tr.dernier:hover {
	background: #f7fde4;
} 
tr.dernierRouge td {
	border-bottom: #fe0202;
	border-width: 0 0 1px 0;
	border-style: none none solid none;	
	padding: 5px 0 15px 0;
}
tr.dernierRouge:hover {
	background: #f7fde4;
}
tr.aPartirDe td {
	padding: 10px 0 5px 0;
	color: #fe0202;
}
tr.aPartirDe:hover {
	background: #fee2e2;
}
a#btn-commander { 
  width: 121px;
  height: 24px;
  display: block;
  background: url(images/btn-commander.gif) no-repeat;
  background-position: center top;
  text-indent: -5000px;/*Vire le txt a -5000*/
}
a#btn-commander:hover {
  display: block;
  background-position: center bottom;
}

a#btn-contact { 
  width: 121px;
  height: 24px;
  display: block;
  background: url(images/btn-nous-contacter.gif) no-repeat;
  background-position: center top;
  text-indent: -5000px;/*Vire le txt a -5000*/
}
a#btn-contact:hover {
  display: block;
  background-position: center bottom;
}




/* _________________MainRight Contenu - housing - services - Support - Contact____________________________  */
#mainRightContenu2 {
	width: 821px; 
	float:left;
	background: url(images/general-tabl-fond.gif) top repeat-y;
	text-align: left;
}

ul#listeMonMoulin li {
	list-style-type: none;
    background: url(images/fleche_fushia.gif) center left no-repeat;
	padding-left: 25px;
	color: #000000; /* noir */
	line-height: 18px;
}
ul#listeGrise li {
	list-style-type: none;
    background: url(images/puce-grise.gif) center left no-repeat;
	padding-left: 15px;
	color: #000000; /* noir */
	line-height: 20px;
}
ul#listeFushia li {
	list-style-type: none;
    background: url(images/puce-fushia.gif) center left no-repeat;
	padding-left: 15px;
	color: #bf53fd; /* fushia */
	line-height: 20px;
}
ul#listeViolet li {
	list-style-type: none;
    background: url(images/puce-violet.gif) center left no-repeat;
	padding-left: 15px;
	color: #7b53fd; /* violet */
	line-height: 20px;
}
ul#listeRouge li {
	list-style-type: none;
    background: url(images/puce-rouge.gif) center left no-repeat;
	padding-left: 15px;
	color: #fe0202; /* rouge */
	line-height: 20px;
} 
div#listeOrangeEspace li {
	list-style-type: none;
    background: url(images/puce-orange.gif) center left no-repeat;
	padding-left: 15px;
	color: #fc6805; /* orange */
	line-height: 20px;
}
div#listeOrangeEspace {
	color: #808080; /* gris */
}
div#listeOrangeEspace p {
	margin-bottom: 10px;
	margin-left: 15px;
}
 
/* _________________formulaire de contact ____________________________  */

#formulaire {
	width: 370px;
	margin: 0;
	padding: 10px 0px 20px 0;/* pas de padding dt gauche sinon d�calage firefox */
	text-align: left; 
	color: #b0b0b0;
	border: 0px solid #656565;
}
#formulaire textarea {
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 100%;	
	background-color: #f7fde4;
	border: 1px solid #d2d2d2; 
	color: #787878;
} 
#formulaire textarea:hover {
	background-color: #fff;
}
#formulaire input {
	background-color: #f7fde4;
	border-width: 1px 1px 1px 1px;
	border-style: solid solid solid solid;
	border-color:#d2d2d2; 
	padding-bottom : 5px;
	margin: 5px 0 0 0;
	color: #787878;
} 
#formulaire input:hover {
	background-color: #fff;
}
#inputlessborder input{
	border: 0;
	width: 121px;
	height: 24px;
	padding : 0;
	margin-left: 90px;
}

#formulaire p {
	padding: 5px 0 0 5px;
}
/* Text inputs / Select label */
label.preField {
    font-family: arial, verdana, helvetica, sans-serif;
	font-weight:bold;
	display: -moz-inline-box;
	display: inline-block;	
	min-width:100px; 
	width: 100px;
	text-align: left;
	white-space: nowrap;
    margin: 5px 0 0 0;
}
#formulaire #separation {
	border-bottom: 1px dotted #787878;
	width: 350px;
}
/* pour le probleme de longueur de champs, pour firefox/ie6, d�finir un nombre en pixels, pas de cols */
#message {
	width: 296px;
}
.prerequis {
	color: #787878;
	font-size: 75%;
}
.requis {
	color: #4D5A8F;
	font-weight: bold;
} 

/*  Footer ---------------------------------------------------------------------------*/
#dernier-element {	/* important pour le footer se positionne en bas de la page quand le contenu est trop court */
	padding-bottom: 30px; /* hauteur du footer */
}
#footer {
	margin-left: auto;
	margin-right: auto;
	width: 990px;
	height: 130px;
	font-size: 80%;
	color: #000000;
	background: url(images/fond-page-bas.jpg) top no-repeat;
	text-align: center;
}
#footer2 {
	width: 990px;
	height: 30px;
	font-size: 80%;
	color: #787878;
	text-align: center;
} 
p#copyright {
	position: relative;
	top: 35px;
	left: -70px;
}
#footer a {
	color: #000;
}
#footer a:hover {
	color: #fff;
}
a#noborder {
	border-bottom: 0px dotted;
}
a:hover#noborder {
	border-bottom: 0px solid;
}