@CHARSET "UTF-8";


/* ATTENTION AUX IMAGES PNG    
note : si l'on met côte à côte une image png contenant un aplat et l'on juxtapose un aplat en hexadécimal html
on peut noter une différence de luminosité sous ie et safari
il faut supprimer la couche GAMA du fichier PNG (avec l'outil tweakpng par exemple). Ca marche... sauf que le problème reste entier sous Mac / Safari.
****************************************/

body {   
	background: #646464 url(images/fond_page.png) center top repeat-y; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	text-align: center;
}
html {
    font-size: 100%; /* Évite un bug d'IE 6-7.  */
}
img {display: block; border:0;} /* pour enlever les decalages sous les images car les images sont pris comme des textes pour ie*/
a img {border: none;}
.inline {display: inline;}
div {margin: 0; padding: 0;}
table  { margin: 0; border-collapse: collapse; border-spacing: 0; border: 0; }
table td { padding: 0; }

.clear {clear: both;}
.left{float:left;}
.center {margin-left: auto; margin-right: auto;}
.right{float:right;}
.relatif {position: relative;}

/* Paragraphes */
p {
    margin: .75em 0; /* Marges Haut/bas plus faibles que par défaut */
}
/* liste */  
.ulNoMargin ul{margin:0;}
.ulPaddLeft20 ul{padding-left:20px;}
.ulListCircle ul{list-style: circle;}
.ulLineHeight16 li {line-height: 16px;}

/* hauteur de ligne pour la typographie (permet de tricher pour aligner verticalement des titres) */
.lineHeight13 {line-height: 13px;}
.lineHeight14 {line-height: 14px;}

/* Liens - par default
****************************************/
.aItalic a{font-style: italic;}
.aBold a{font-weight: bold;}
.aBlack a{font-family: "Arial Black", Arial, Verdana, helvetica, serif;}
.aUnderline a{text-decoration: underline;}

a {color:#785c41; text-decoration: none; } /* ocre */
a:link { color: #785c41;}
a:visited {color: #785c41;}
a:hover, a:focus, a:active {color: white;}

.aGrisMoyen a {color:#595959;}
.aMVClair a{color:#8c3da8;}
.aNoir a{color: #000000;}
.aRoseClair a {color:#EBA0F0;}
.aRouge a {color: #fe0202;}
.aVioletFonce a{color: #290D33;}
.aVioletMV a{color: #672080;}
.aFushia a {color:#f72efe;}


.aBlancHover a:hover {color: #ffffff;}
.aNoirHover a:hover {color: #000000;}
.aFushiaHover a:hover {color:#f72efe;}


.italic {font-style: italic;}
.bold {font-weight: bold;}
.black {font-family: "Arial Black", Arial, Verdana, helvetica, serif;}
.underline {text-decoration: underline;}


/* couleur typo par ordre alphabétique */
.blanc {color:#ffffff;}
.grisClair { color: #cccccc;}
.grisClair02 {color: #8D8D8D;}
.grisFonce {color:#333333;}
.grisMoyen {color:#595959;}
.fushia {color:#f72efe;}
.noir {color: #000000;}
.orange {color: #fe5d00;}
.rouge {color: #fe0202;}
.rougeFonce {color: #a60000;} 
.violet {color: #9710dd;}
.roseClair {color:#EBA0F0;}
.MVClair {color:#8c3da8;}
.violetMV {color:#672080;}
.violetFonce {color: #290D33;}

.fondGrisClair { background: #e7e7e7;}
.fondMV {background:#672080;}
.fondMVClair {background:#8c3da8;}
.fondGrisBlanc {background:#fbfbfb;}
.fondGrisFonce {background: #ccc;}
.fondNoir {background: #000000;}


.encartBorder {
	border: 2px dotted #595959;
	padding: 20px;
}

/* Entete 
****************************************/
#entete{
	width: 990px;
	height: 152px;
	margin: 0 auto; /* pour firefox, centrage*/
}


/* ______________________________________CONTENEUR________________________________________________  */



#conteneur {
	width: 990px;
	margin: 0 auto; /* pour firefox, centrage*/
	padding: 0;
	text-align: left;
	font-size: 100%;
}


/*  Menu ---------------------------------------------------------------------------*/
#conteneurMenu{
	width: 990px;
	height: 35px;
	position: relative;
	margin-left:auto;
    margin-right:auto;
	background: #ece4d9 url(images/menu_fond.png) left top repeat-x; /* fond gris degrade */
}


ul#menu {
	width: 990px;
	list-style: none;
	margin: 0;
	padding: 0;
	
}
ul#menu li {  	 
	display: block;
	height: 35px;
	padding: 0;
	margin: 0;
	text-align: left;
	float: left;
}
ul#menu li a {   
	display: block; /* indispensable pour un menu "image" */
	border: none;
	height: 35px;
	line-height: 35px;/* astuce pour centrer verticalement une seule ligne de texte*/
	font-weight: bold;
	color: #767d64; 
	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;
}  

#menu li a {
	display: block;
	line-height: 35px;
	text-indent: -5000px;/*Vire le txt a -5000*/
	overflow: hidden;
	background-position: center top;
}	
	#menu li.active a, ul#menu li.active a:hover {
		background-position: center bottom;
	}
	#menu li a:hover {
		background-position: center center;
	}	
	#menu_accueil {
		width: 72px;
		background: url(images/menu_accueil.png) no-repeat;
	}
	#menu_01 {
		width: 102px;
		background: url(images/menu_01.png) no-repeat;
	}
	#menu_02 {
		width: 96px;
		background: url(images/menu_02.png) no-repeat;
	}		
	#menu_03 {
		width: 153px;
		background: url(images/menu_03.png) no-repeat;
	}		
	#menu li.separateur {
		width: 2px;
		background: url(images/menu_separateur.png) no-repeat left top;
	}
	#menu li.espacement {
		width: 150px;
	}
	#menu li.separateur5px {
		width: 5px;
	}
	#menu li.separateur10px {
		width: 10px;
	}
	#menu li.identifiez_vous a{
		text-indent: 0px;
		width: 390px;
		text-align: right;	
	}
	#menu li.identifiez_vous a:hover{
		color: #000;
		text-decoration: underline;	
	}
	#menu li.bonjour {
		text-indent: 0px;
		width: 290px;
		text-align: right;
		line-height: 35px;
		font-weight: bold;
		color: #767d64;	
	}
	#menu li.bonjour a{
		text-indent: 0px;
		width: 290px;
		text-align: right;	
	}
	#menu li.bonjour a:hover{
		color: #000;
		text-decoration: underline;	
	}
	#menu li.deconnexion a{
		text-indent: 0px;
		width: 100px;
		text-align: right;	
	}
	#menu li.deconnexion a:hover{
		color: #000;
		text-decoration: underline;	
	}
/* _BOUTONS_  */
a.btn_voir_offre_details {
  width: 281px;
  height: 30px;
  display: block;
  background: url(images/btn_voir_offre_details.png) no-repeat;
  background-position : center top;
}
a.btn_voir_offre_details:hover {
  background-position : center bottom;
}

a.btn_voir_liste_gagnants {
  width: 281px;
  height: 30px;
  display: block;
  background: url(images/btn_voir_liste_gagnants.png) no-repeat;
  background-position : center top;
}
a.btn_voir_liste_gagnants:hover {
  background-position : center bottom;
}

a.btn_pre_inscription {
  width: 281px;
  height: 43px;
  display: block;
  background: url(images/btn_pre_inscription.png) no-repeat;
  background-position : center top;
}
a.btn_pre_inscription:hover {
  background-position : center bottom;
}
a.btn_confirmer {
  width: 281px;
  height: 43px;
  display: block;
  background: url(images/btn_confirmer.png) no-repeat;
  background-position : center top;
}
a.btn_confirmer:hover {
  background-position : center bottom;
}




a.btn_creer_alerte_sms {
  width: 191px;
  height: 35px;
  display: block;
  background: url(images/btn_creer_alerte_sms.png) no-repeat;
  background-position : center top;
}
a.btn_creer_alerte_sms:hover {
  background-position : center bottom;
}

a.btn_creer_alerte_email {
  width: 201px;
  height: 35px;
  display: block;
  background: url(images/btn_creer_alerte_email.png) no-repeat;
  background-position : center top;
}
a.btn_creer_alerte_email:hover {
  background-position : center bottom;
}

a.btn_creer_mon_compte {
  width: 119px;
  height: 58px;
  display: block;
  background: url(images/btn_je_cree_mon_compte.png) no-repeat;
  background-position : center top;
}
a.btn_creer_mon_compte:hover {
  background-position : center bottom;
}


/* _________________formulaire de contact ____________________________  */

#formulaire {
	width: 450px;
	margin: 0;
	padding: 10px 0px 20px 0;/* pas de padding dt gauche sinon décalage firefox */
	text-align: left; 
	color: #8d7561;
}
#formulaire textarea {
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 100%;	
	background-color: #f4eee9;
	border: 1px solid #b7ada9; 
	color: #301600;
} 
#formulaire textarea:hover {
	background-color: #fff;
}
#formulaire input {
	background-color: #f4eee9;
	border-width: 1px 1px 1px 1px;
	border-style: solid solid solid solid;
	border-color:#b7ada9; 
	padding-bottom : 5px;
	margin: 5px 0 0 0;
	color: #301600;
} 
#formulaire input:hover {
	background-color: #fff;
}
#inputlessborder input{
	background-color: #ffffff;
	border: 0;
	padding : 0;
	margin-left: 106px;
}

#formulaire p {
	padding: 5px 0 0 5px;
}

/* Text inputs / Select label */
label.preField {
    font-family: arial, verdana, helvetica, sans-serif;
	color: #595959;
	display: -moz-inline-box;
	display: inline-block;	
	min-width: 190px; 
	width: 190px;
	text-align: left;
	white-space: nowrap;
    margin: 5px 0 0 0;
}
label.preFieldLogin {
    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;
}
label.preFieldAlertes {
    font-family: arial, verdana, helvetica, sans-serif;
	font-weight: bold;
	display: -moz-inline-box;
	display: inline-block;	
	min-width: 140px; 
	width: 140px;
	text-align: left;
	white-space: nowrap;
    margin: 5px 0 0 0;
}

.formulaire .traitPointilleGris {
	border-bottom: 1px dotted #787878;
	width: 475px;
}

/* 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: #a002d4;
	font-weight: bold;
} 
#formulaire #separation {
	border-bottom: 1px dotted #8d7561;
	width: 350px;
}


/* _________________formulaire login / inscription ____________________________  */
.identBloc {
	width: 350px;
	height: 300px;
	margin: 0;
	padding: 0;
	text-align: left; 
	border: 1px dotted #bac1a9;
}

.identBloc 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;
} 
.identBloc input:hover {
	background-color: #fff;
}
span.retraitInput input{
	border: 0; /* obligatoire */
	padding : 0;
	margin-left: 100px;
}
.retraitInput2 input{
	border: 0; /* obligatoire */
	padding : 0;
	margin-left: 200px;
}

.borderLessInput input{
	border: 0; /* obligatoire */
	padding : 0;
}

/* _________________ display info et erreur ____________________________  */

.displayInfo {
	border: 1px solid #595959;
	padding: 20px;
}




	
/* _FOOTER_  */
#footer {
clear: both;
width: 990px;
height: 50px;
text-align: center;
font-size: 80%;
}
#footerPad {
padding: 20px 0 0 150px;
}