/* --- STYLES DE BASE --- */



@font-face
 {
 font-family: "fonteCita";
 src: url('eurof55.ttf'),
      url('eurof55-webfont.eot') format("opentype"); /* IE */
	  
 }
 @font-face
{
font-family: "londonbetween";
src: url('LondonBetween.ttf')
    ,url('londonbetween-webfont.eot') format("opentype");}  /* IE /*





/* Page */
html {
font-size: 100%; /* Évite un bug d'IE 6-7. (1) */

}
body {
margin: 0;
padding: 0; /* Remettre à zéro si nécessaire. */
/* Pensez à utiliser une collection de polices (2), par ex:
font-family: Arial, Helvetica, FreeSans, sans-serif; */
font-size: .75em; /* À adapter pour la police choisie. (3) */
line-height: 1.4; /* À adapter au design. (4) */


background-color:#747475;background-image:url(images/bg.jpg);
background-repeat:repeat-x; 
background-position:0% 0%;
}
table{ width:480px; border-collapse:collapse }
/* Titres */
h1, h2, h3, h4, h5, h6 {
    margin: 1em 0 .5em 0; /* Rapproche le titre du texte. (5) */
    line-height: 1.2;
     /* Valeur par défaut. (6) */
    font-style: normal;
}

/* Listes */
ul, ol {
    margin: .75em 0 .75em 32px;
    padding: 0;
	
	width:400px;
	text-align:justify;
	
	
}

/* Paragraphes */
p {
    margin: .75em 0; /* Marges plus faibles que par défaut. (7) */
}
address {
    margin: .75em 0;
    font-style: normal;
}



/* Liens */


a:link {
    color: #535451; text-decoration:none
}
a:visited {
    color: #535451;
}
a:hover, a:focus, a:active {
    color:#d6083e;
}
a img {
    border: none; 
}




/* Divers éléments de type en-ligne (8) */
em {
    font-style: italic;
}
strong {
    font-weight: bold;
}

/* Formulaires */
fieldset{ width:430px;}

legend{
    margin: 0;
    padding: 0;
    border: none;
	font-size:120%;
	font-weight:bold;
	text-decoration:underline;
	color:#242F37;
}
label{
    margin: 0;
    padding: 0;
    border: none;
	font-size:100%;
	font-weight:normal;
	color:#242F37;
}
input, button, select, textarea , submit{
    vertical-align: middle;
	background-color:transparent; /* Solution pb. d'alignement. (9) */
}

/* fin css de base*/ 

/*////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////         CORPS           /////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
#tableauHaut,#tableauCentral,#tableauBas{border-collapse:collapse; width:950px;margin-left:auto; margin-right:auto; padding:0;padding:0}
#tableauHaut {background-image:url(images/haut_index.jpg);height:264px;}

#tableauBas{ background:url(images/bas_index.jpg) no-repeat; height:120px; text-align:center;}
#tableauBas p{ margin-bottom:70px}
/* tableau intérieur au tableau central et contenant toutes les infos*/
#tableauConteneur{ width:880px; margin-left:auto; margin-right:auto; padding:0;}

#tableauCentral {background:url(images/bg_conteneur.jpg) repeat-y top;margin-left:auto; margin-right:auto; padding:0;}
/*////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////        taille cellules        /////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
#cell_Centre{width:490px;padding:0px; vertical-align:top}

#cell_gauche{padding:50px 0 0 10px;  background:url(images/bg_gauche.png) top no-repeat;  height:383px; vertical-align:top;width:186px;}

#cell_droite{padding:20px 10px 0 10px;  background:url(images/bg_droite.png) top no-repeat;  height:383px; vertical-align:top;width:205px;}

/*////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////       LE CENTRE         /////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/

/*  situés dans la cellule centrale*/
.table_presentation{  border-collapse:collapse}
.titrepage{ background:url(images/bg_centre.jpg) repeat-x; height:44px; color:#FFFFFF;
 font-size:200%; text-indent:20px; font-family: "fonteCita", Helvetica, sans-serif }


.paragraphes { padding:10px 20px 10px 20px; text-align:justify; }/* top right bott left */
.titreparagraphe{ text-indent:20px; font-size:200%;   text-align:left;  border-bottom:#FF6600 1px solid; width:430px;  line-height:35px }/* top right bott left */
.titrelexique{ font-size:150%;  text-align:left;  border-bottom:#FF6600 1px solid; width:430px;  line-height:50px; text-indent:20px; }
.vocabulaire{ font-size:90%; color:#000; padding: 20px; font-style:italic}
.modele{ width:150px; padding-left:20px}
.definition { text-align:justify; vertical-align:top; padding-top:0; padding-right:10px}
.definition h4{ font-family: "londonbetween", arial, sans-serif; font-size:140%; color:#556689; font-weight:normal; letter-spacing:0.05em}
.images{ text-align:center; float:left; margin-left:20px}/* top right bott left */
.vignettes{padding:0px 0px 0px 0px; float:left; width:170px; text-align:center; margin-left:20px ; margin-right:20px }
.cellhaut{ text-align:right}
.vignettes_centrees{ float:none; margin-left:auto ; margin-right:auto }

.vignettes img{ border-width:1px 1px 1px 1px; border-color:#000; border-style:solid }
.description_activite {  padding:0px; text-align:left; font-size:15px; font-weight:bold; line-height:20px; padding-left:10px }
.description_activite p {  padding-right:10px; text-align:left;  font-size:12px; font-weight: bold; width:290px;}
.description_activite h4 {font-family: "londonbetween", arial, sans-serif; padding-right:10px; text-align:left; color:#adc7c8 ; font-size:20px; display:inline; vertical-align:top; font-weight:normal}
.activite_img{ padding: 20px 0px 0px 10px}



/*////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////        lA GAUCHE        /////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
#cell_gauche{vertical-align:top; width:180px}




/* MENU*/
#navigation li{ margin: 0px 0px  2px 2px}
#navigation {
	width: 180px ;
	list-style: none ;
	margin: 0 ;	
	}
#navigation li a {
	display: block ;
	background: url(images/survol.png) ;		
	line-height: 25px ;
	text-align: left ;
	text-indent:20px;
	text-decoration: none ;	
	padding:0px 0px 0px 5px;
	color:#333333;
	font-family: "fonteCita", arial, sans-serif;
	font-size:16px;
	letter-spacing:0.05em
	/*border-left:#2db3c8 solid 3px;*/
	
	}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
	/*background: #c1bfbf ;*/
	background: url(images/survol.png) right no-repeat transparent;
	/*border-left:#E09B00  solid 3px;*/
	text-decoration: none ;
	color: #fff ;
	
	}
	
#validator{ text-align:center }	
/*////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////        lA droite       /////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/* contact*/

#mail{ margin-top:70px;  font-size:100%;}



/*////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////        LES LIENS        /////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
a.liens:link,a.liens:visited,a.liens:active { font-family:Arial, Helvetica, sans-serif;
text-decoration:none; font-size:100% ; color:#edf2fb}
a.liens:hover {  text-decoration:none; text-decoration:underline
}






a.footer:link,a.footer:visited,a.footer:active {
text-decoration:none;  font-size:100%; font-weight:bold;}
a.footer:hover {  text-decoration:underline;
}

/* simplifications */ 
#cell_droite{padding:20px 0 0 20px;}