/*  ----------------------------------------------------------- */
/*  Feuilles de styles CalliWeb                                 */
/*  ----------------------------------------------------------- */
* {margin: 0; padding: 0; border: 0; font-family: arial,helvetica,sans-serif; font-style: normal; text-decoration: none; list-style: none }
/*  ---------------------  */
/*  MISE EN PAGE GENERAL */
/*  --------------------*/
body{ background:#727272; }
#page{width:780px; margin:10px auto;   }
div#container{position:relative; width:780px; height: 600px; border: 1px solid #000; background:#fff;}
div#wrapper{float:left;width:100%}
div#content{position:relative; margin-right: 230px;}
div#navigation, div#navigat{float:left;width:116px;margin-left:-230px}
div#extra{float:left;width:114px;margin-left:-114px}

div.c1 {clear:both}
/* FOOTER */
#ml{ text-align: center; font-size:10px; padding-bottom:0px; margin-top:5px; color:#9D9D9D; padding-bottom:10px}
#ml a{color:#9D9D9D}
#ml a:hover{text-decoration:underline; color:#000}

#logo p, #titre1 p, #navigation a strong, #footer strong, #footer2 strong, #title1 p, #navigat a strong, #francais a strong, #anglais a strong{ position:absolute;top:-7777px;left:-7777px; }

/* footer */
#footer{font-size:11px; padding-top:575px  }
#footer2{ position:absolute; top:580px; left:10px; font-size:11px; }
#footer, #footer2{font-family: verdana,arial,helvetica,sans-serif; color:#7E7E7E;}
#footer p, #footer2 p { text-align:center; }
#footer a, #footer2 a{color:#7E7E7E;}
#footer a:hover, #footer2 a:hover{text-decoration:underline}

#mini-logo{  position:absolute; top:531px; left:0px; font-size:11px; }
/* ----- */
/* MENU */
/* --- */
#navigation #item2, #navigation #item5{ margin-bottom: 15px; }

#navigation #item1 a{ display: block; width: 116px; height: 20px; background: url(../img/menu/accueil.gif) no-repeat top left }
#navigation #item1.active a:link{ background: url(../img/menu/accueil.gif) no-repeat bottom left }
#navigation #item1.active a:visited{ background: url(../img/menu/accueil.gif) no-repeat bottom left }
#navigation #item1 a:hover{background: url(../img/menu/accueil.gif) no-repeat bottom left }

#navigation #item2 a{ display: block; width: 116px; height: 94px; background: url(../img/menu/mnc.gif) no-repeat top left }
#navigation #item2.active a:link{ background: url(../img/menu/mnc.gif) no-repeat bottom left }
#navigation #item2.active a:visited{ background: url(../img/menu/mnc.gif) no-repeat bottom left }
#navigation #item2 a:hover{background: url(../img/menu/mnc.gif) no-repeat bottom left }

#navigation #item3 a{ display: block; width: 116px; height: 114px; background: url(../img/menu/transport.gif) no-repeat top left }
#navigation #item3.active a:link{ background: url(../img/menu/transport.gif) no-repeat bottom left }
#navigation #item3.active a:visited{ background: url(../img/menu/transport.gif) no-repeat bottom left }
#navigation #item3 a:hover{background: url(../img/menu/transport.gif) no-repeat bottom left }

#navigation #item4 a{ display: block; width: 116px; height: 114px; background: url(../img/menu/gp.gif) no-repeat top left }
#navigation #item4.active a:link{ background: url(../img/menu/gp.gif) no-repeat bottom left }
#navigation #item4.active a:visited{ background: url(../img/menu/gp.gif) no-repeat bottom left }
#navigation #item4 a:hover{background: url(../img/menu/gp.gif) no-repeat bottom left }

#navigation #item5 a{ display: block; width: 116px; height: 114px; background: url(../img/menu/be.gif) no-repeat top left }
#navigation #item5.active a:link{ background: url(../img/menu/be.gif) no-repeat bottom left }
#navigation #item5.active a:visited{ background: url(../img/menu/be.gif) no-repeat bottom left }
#navigation #item5 a:hover{background: url(../img/menu/be.gif) no-repeat bottom left }

#navigation #item6 a{ display: block; width: 116px; height: 114px; background: url(../img/menu/contact.gif) no-repeat top left }
#navigation #item6.active a:link{ background: url(../img/menu/contact.gif) no-repeat bottom left }
#navigation #item6.active a:visited{ background: url(../img/menu/contact.gif) no-repeat bottom left }
#navigation #item6 a:hover{background: url(../img/menu/contact.gif) no-repeat bottom left }
/* -------- */
/* ACCUEIL */
/* ------ */
#logo{ width:252px; height:261px; position: absolute; top:145px; left:148px; background: url(../img/logo.jpg) no-repeat }
#titre1{ width:471px; height:18px; position: absolute; top:30px; left:45px; background: url(../img/titre-accueil.gif) no-repeat }
#extra #ext-accueil{ margin-top: 129px; }
#langues{position: absolute; top:444px; left:180px;  }
#francais, #anglais{ float:left }
#anglais{ margin-left:70px }
#francais a{ display: block; width: 60px; height: 12px; background: url(../img/francais.gif) no-repeat top left }
#francais a:hover{ display: block; width: 60px; height: 12px; background: url(../img/francais.gif) no-repeat bottom left }
#anglais a{ display: block; width: 51px; height: 12px; background: url(../img/anglais.gif) no-repeat top left }
#anglais a:hover{ display: block; width: 51px; height: 12px; background: url(../img/anglais.gif) no-repeat bottom left }

/* MIEUX NOUS CONNAITRE */
ul { padding-top:50px; font: bold 18px Arial; color:#7E7E7E }
ul li{ padding-bottom:16px; padding-left: 20px; }
ul #vert{background: url(../img/bullet/vert.gif) no-repeat 0 5px}
ul #violet{background: url(../img/bullet/violet.gif) no-repeat 0 5px}
ul #jaune{background: url(../img/bullet/jaune.gif) no-repeat 0 5px}
ul #bleu{background: url(../img/bullet/bleu.gif) no-repeat 0 5px}
ul #rouge{background: url(../img/bullet/rouge.gif) no-repeat 0 5px}
ul #orange{background: url(../img/bullet/orange.gif) no-repeat 0 5px; margin-bottom:0px;}
ul li ul{ padding-top:0px; margin-left:65px; font: normal 11px Arial }
ul li ul li{ line-height:12px; padding-bottom:0; padding-left:0 }
#carre{ padding-left:21px; color:#FFF; text-align:center; font-family: verdana,arial,helvetica,sans-serif; }
#carre-vert{ float:left; width: 156px; height:156px; background:#96BE00; margin-right:20px }
#carre-bleu{ float:left;width: 156px; height:156px; background:#0782B5; margin-right:20px }
#carre-orange{float:left; width: 156px; height:156px; background:#FF6400 }
#carre h2{font-size:11px;}
#carre p{font-size:11px; padding-top:8px; line-height:26px}
#carre-vert h2, #carre-bleu h2{ padding-top: 33px; }
#carre-orange h2{ padding-top:18px }
/* ---------- */
/* TRANSPORT */
/* -------- */
#transport-mail{ position: absolute; bottom:-452px; left:190px; font-size:10px; font-family:verdana; color:#757575}
#transport-mail a{ color:#8B8B8B }
#transport-mail a:hover{ text-decoration:underline }
#Tableau_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:551px;
	height:600px;
}

#transport-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:276px;
	height:150px;
}

#transport-02 {
	position:absolute;
	left:276px;
	top:0px;
	width:275px;
	height:150px;
}

#transport-03 {
	position:absolute;
	left:0px;
	top:150px;
	width:276px;
	height:143px;
}

#transport-04 {
	position:absolute;
	left:276px;
	top:150px;
	width:273px;
	height:143px;
}

#transport-05 {
	position:absolute;
	left:549px;
	top:150px;
	width:2px;
	height:143px;
}

#transport-06 {
	position:absolute;
	left:0px;
	top:293px;
	width:276px;
	height:157px;
}

#transport-07 {
	position:absolute;
	left:276px;
	top:293px;
	width:275px;
	height:157px;
}

#transport-08 {
	position:absolute;
	left:0px;
	top:450px;
	width:276px;
	height:150px;
}

#transport-09 {
	position:absolute;
	left:276px;
	top:450px;
	width:273px;
	height:150px;
}

#transport-10 {
	position:absolute;
	left:549px;
	top:450px;
	width:2px;
	height:150px;
}
/* ------------- */
/* GRAND PUBLIC */
/* ----------- */
#extra #ext-grandpublic{ margin-top: 129px; }
#Tableau_02 {
	position:absolute;
	left:0px;
	top:0px;
	width:550px;
	height:547px;
}

#grandpublic-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:2px;
	height:135px;
}

#grandpublic-02 {
	position:absolute;
	left:2px;
	top:0px;
	width:274px;
	height:135px;
}

#grandpublic-03 {
	position:absolute;
	left:276px;
	top:0px;
	width:274px;
	height:135px;
}

#grandpublic-04 {
	position:absolute;
	left:0px;
	top:135px;
	width:275px;
	height:135px;
}

#grandpublic-05 {
	position:absolute;
	left:275px;
	top:135px;
	width:1px;
	height:135px;
}

#grandpublic-06 {
	position:absolute;
	left:276px;
	top:135px;
	width:274px;
	height:135px;
}

#grandpublic-07 {
	position:absolute;
	left:0px;
	top:270px;
	width:275px;
	height:135px;
}

#grandpublic-08 {
	position:absolute;
	left:275px;
	top:270px;
	width:275px;
	height:135px;
}

#grandpublic-09 {
	position:absolute;
	left:0px;
	top:405px;
	width:275px;
	height:141px;
}

#grandpublic-10 {
	position:absolute;
	left:275px;
	top:405px;
	width:1px;
	height:142px;
}

#grandpublic-11 {
	position:absolute;
	left:276px;
	top:405px;
	width:274px;
	height:142px;
}

#grandpublic-12 {
	position:absolute;
	left:0px;
	top:546px;
	width:275px;
	height:1px;
}
/* ------------- */
/* Biens déquipements */
/* ----------- */
#Tableau_03 {
	position:absolute;
	left:0px;
	top:0px;
	width:550px;
	height:600px;
}

#biensequipement-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:275px;
	height:150px;
}

#biensequipement-02 {
	position:absolute;
	left:275px;
	top:0px;
	width:275px;
	height:150px;
}

#biensequipement-03 {
	position:absolute;
	left:0px;
	top:150px;
	width:275px;
	height:150px;
}

#biensequipement-04 {
	position:absolute;
	left:275px;
	top:150px;
	width:275px;
	height:150px;
}

#biensequipement-05 {
	position:absolute;
	left:0px;
	top:300px;
	width:275px;
	height:150px;
}

#biensequipement-06 {
	position:absolute;
	left:275px;
	top:300px;
	width:275px;
	height:150px;
}

#biensequipement-07 {
	position:absolute;
	left:0px;
	top:450px;
	width:275px;
	height:150px;
}

#biensequipement-08 {
	position:absolute;
	left:275px;
	top:450px;
	width:275px;
	height:150px;
}
/* -------- */
/* CONTACT */
/* ------ */
#logo-contact{ float: left; padding-top:37px}
#adresse{ position:absolute; bottom:0px; left:0px; background: #5A0050; color:#FFF;  padding:5px 20px}
#adresse h1{ font-size: 18px; font-family:arial, sans-serif;}
#adresse p{ font-size: 14px; font-family:arial, sans-serif;}
#adresse a{ color:#FFF;}
#adresse a:hover{ text-decoration:underline;}
#content p.thankyou{ text-align: center; padding: 10px; margin: 100px 0 0 0; font-size:12px}
#content #errors{ color: red; background: #CCC; padding: 10px; font-size:11px; margin: 0 10px 10px 0;}
/*** Mise en forme du formulaire ***/

#feedbackForm { float:left;
	border: none;
	margin: 47px 0 0 5px;
	padding: 0;
  	width: 373px;	/*** Largeur du formulaire ***/
}
#feedbackFormenglish { float:left;
	border: none;
	margin: 47px 0 0 5px;
	padding: 0;
  	width: 373px;	/*** Largeur du formulaire ***/
}

#piedForm {	/*** Mise en forme du titre et du pied de formulaire ***/
	text-align: right;
    margin-top: 5px;

}
#piedForm input {
	font-weight: bold; /*** Pour améliorer la lisibilité des boutons ***/
   font-size: 12px;
   cursor: pointer;
	margin: 0;
	padding: 3px;
    font-family:verdana,arial,helvetica,sans-serif;
}


#corpForm p {	/*** Mise en forme des lignes du formulaire ***/
	padding: .1em 0;
	margin: 0 0 .1em 0;
    font-family:verdana,arial,helvetica,sans-serif;
}
#corpForm em{ font-size: 10px; float:right; margin-right:3px; font-family:verdana,arial,helvetica,sans-serif;}
#corpForm fieldset#coordonnees label {	/*** Mise en forme des intitulés de champs ***/
	float: left;	/*** Très important, ne pas suprimer ! ***/
	width: 113px;	/*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
	text-align: right;	/*** ... et ils sont alignés à droite... ***/
    background:#BABABA;
    margin: 1px 0 0 0;
	padding: 1px .5em 3px 0;
    font-size:12px; color:#FFF;
    font-family:verdana,arial,helvetica,sans-serif;
		/*** ... et centrés verticalement. ***/
}
fieldset#coordonnees input{ width:245px; border:1px solid #BABABA; padding-left:5px; margin-left:0 !important; margin-left:-3px}

table{font-size: 12px; font-family:verdana,arial,helvetica,sans-serif;  }
tr, td{margin:0;padding:0}
td.c{ padding-left:2px; }
fieldset#besoin, fieldset#needs{ margin: 0 0 0 40px; }
fieldset#besoin p, fieldset#needs p{font-size: 12px; font-family:verdana,arial,helvetica,sans-serif;}
fieldset#besoin input, fieldset#needs input{margin:0; padding:0 }
textarea{float:right; width:247px; height:87px; border:1px solid #BABABA; margin-top:10px }
/* Mention légales */
#mention-legales{ margin:20px 0 30px 30px; font-family: arial,helvetica,sans-serif; }
#mention-legales ul{ margin-bottom: 20px; margin-left:0;color:#7E7E7E; font-size: 12px;}
#mention-legales li{ margin:0; padding:3px 0; color:#7E7E7E;font-family: arial,helvetica,sans-serif;}
#mention-legales h2{ font-size: 14px; color:#7E7E7E;margin:0; padding:0; font-family: arial,helvetica,sans-serif;}
#mention-legales h3{ font-size: 12px;color:#7E7E7E;font-family: arial,helvetica,sans-serif; }
#mention-legales p{ margin-bottom: 10px;color:#7E7E7E;font-size: 11px; font-family: arial,helvetica,sans-serif; }
/* ----- */
/* MENU accueil */
/* --- */
#navigation #introitem2, #navigation #introitem5{ margin-bottom: 15px; }

#navigation #introitem1 a{ display: block; width: 116px; height: 20px; background: url(../img/menu/inverse/accueil.gif) no-repeat top left }
#navigation #introitem1.active a:link{ background: url(../img/menu/inverse/accueil.gif) no-repeat bottom left }
#navigation #introitem1.active a:visited{ background: url(../img/menu/inverse/accueil.gif) no-repeat bottom left }
#navigation #introitem1 a:hover{background: url(../img/menu/inverse/accueil.gif) no-repeat bottom left }

#navigation #introitem2 a{ display: block; width: 116px; height: 94px; background: url(../img/menu/inverse/mnc.gif) no-repeat top left }
#navigation #introitem2.active a:link{ background: url(../img/menu/inverse/mnc.gif) no-repeat bottom left }
#navigation #introitem2.active a:visited{ background: url(../img/menu/inverse/mnc.gif) no-repeat bottom left }
#navigation #introitem2 a:hover{background: url(../img/menu/inverse/mnc.gif) no-repeat bottom left }

#navigation #introitem3 a{ display: block; width: 116px; height: 114px; background: url(../img/menu/inverse/transport.gif) no-repeat top left }
#navigation #introitem3.active a:link{ background: url(../img/menu/inverse/transport.gif) no-repeat bottom left }
#navigation #introitem3.active a:visited{ background: url(../img/menu/inverse/transport.gif) no-repeat bottom left }
#navigation #introitem3 a:hover{background: url(../img/menu/inverse/transport.gif) no-repeat bottom left }

#navigation #introitem4 a{ display: block; width: 116px; height: 114px; background: url(../img/menu/inverse/gp.gif) no-repeat top left }
#navigation #introitem4.active a:link{ background: url(../img/menu/inverse/gp.gif) no-repeat bottom left }
#navigation #introitem4.active a:visited{ background: url(../img/menu/inverse/gp.gif) no-repeat bottom left }
#navigation #introitem4 a:hover{background: url(../img/menu/inverse/gp.gif) no-repeat bottom left }

#navigation #introitem5 a{ display: block; width: 116px; height: 114px; background: url(../img/menu/inverse/be.gif) no-repeat top left }
#navigation #introitem5.active a:link{ background: url(../img/menu/inverse/be.gif) no-repeat bottom left }
#navigation #introitem5.active a:visited{ background: url(../img/menu/inverse/be.gif) no-repeat bottom left }
#navigation #introitem5 a:hover{background: url(../img/menu/inverse/be.gif) no-repeat bottom left }

#navigation #introitem6 a{ display: block; width: 116px; height: 114px; background: url(../img/menu/inverse/contact.gif) no-repeat top left }
#navigation #introitem6.active a:link{ background: url(../img/menu/inverse/mnccontact.gif) no-repeat bottom left }
#navigation #introitem6.active a:visited{ background: url(../img/menu/inverse/contact.gif) no-repeat bottom left }
#navigation #introitem6 a:hover{background: url(../img/menu/inverse/contact.gif) no-repeat bottom left }

/* ------------------- */
/* ------------------ */
/* VERSION ANGLAISE */
/* ------------------- */
/* ------------------ */
/* MENU */
#navigat #item2, #navigat #item5{ margin-bottom: 15px; }

#navigat #item1 a{ display: block; width: 116px; height: 20px; background: url(../img/menu/english/accueil.gif) no-repeat top left }
#navigat #item1.active a:link{ background: url(../img/menu/english/accueil.gif) no-repeat bottom left }
#navigat #item1.active a:visited{ background: url(../img/menu/english/accueil.gif) no-repeat bottom left }
#navigat #item1 a:hover{background: url(../img/menu/english/accueil.gif) no-repeat bottom left }

#navigat #item2 a{ display: block; width: 116px; height: 94px; background: url(../img/menu/english/mnc.gif) no-repeat top left }
#navigat #item2.active a:link{ background: url(../img/menu/english/mnc.gif) no-repeat bottom left }
#navigat #item2.active a:visited{ background: url(../img/menu/english/mnc.gif) no-repeat bottom left }
#navigat #item2 a:hover{background: url(../img/menu/english/mnc.gif) no-repeat bottom left }

#navigat #item3 a{ display: block; width: 116px; height: 114px; background: url(../img/menu/english/transport.gif) no-repeat top left }
#navigat #item3.active a:link{ background: url(../img/menu/english/transport.gif) no-repeat bottom left }
#navigat #item3.active a:visited{ background: url(../img/menu/english/transport.gif) no-repeat bottom left }
#navigat #item3 a:hover{background: url(../img/menu/english/transport.gif) no-repeat bottom left }

#navigat #item4 a{ display: block; width: 116px; height: 114px; background: url(../img/menu/english/gp.gif) no-repeat top left }
#navigat #item4.active a:link{ background: url(../img/menu/english/gp.gif) no-repeat bottom left }
#navigat #item4.active a:visited{ background: url(../img/menu/english/gp.gif) no-repeat bottom left }
#navigat #item4 a:hover{background: url(../img/menu/english/gp.gif) no-repeat bottom left }

#navigat #item5 a{ display: block; width: 116px; height: 114px; background: url(../img/menu/english/be.gif) no-repeat top left }
#navigat #item5.active a:link{ background: url(../img/menu/english/be.gif) no-repeat bottom left }
#navigat #item5.active a:visited{ background: url(../img/menu/english/be.gif) no-repeat bottom left }
#navigat #item5 a:hover{background: url(../img/menu/english/be.gif) no-repeat bottom left }

#navigat #item6 a{ display: block; width: 116px; height: 114px; background: url(../img/menu/english/contact.gif) no-repeat top left }
#navigat #item6.active a:link{ background: url(../img/menu/english/contact.gif) no-repeat bottom left }
#navigat #item6.active a:visited{ background: url(../img/menu/english/contact.gif) no-repeat bottom left }
#navigat #item6 a:hover{background: url(../img/menu/english/contact.gif) no-repeat bottom left }
/* HOME */
#title1{ width:509px; height:18px; position: absolute; top:30px; left:26px; background: url(../img/title-accueil.gif) no-repeat }
/* GET TO KNOW US BETTER */
#carre-bleu p.dsnormal{margin:0; padding:8px 0 0 0}
#carre-bleu p.dsspan1{margin:0; padding:12px 0 0 0; line-height:2px}
#carre-bleu p.dsspan2{margin:0; padding:0}
#carre-bleu p.dsspan3{margin:0; padding:0}
/* ----- */
/* MENU accueil */
/* --- */
#navigat #introitem2, #navigat #introitem5{ margin-bottom: 15px; }

#navigat #introitem1 a{ display: block; width: 116px; height: 20px; background: url(../img/menu/english-inverse/accueil.gif) no-repeat top left }
#navigat #introitem1.active a:link{ background: url(../img/menu/english-inverse/accueil.gif) no-repeat bottom left }
#navigat #introitem1.active a:visited{ background: url(../img/menu/english-inverse/accueil.gif) no-repeat bottom left }
#navigat #introitem1 a:hover{background: url(../img/menu/english-inverse/accueil.gif) no-repeat bottom left }

#navigat #introitem2 a{ display: block; width: 116px; height: 94px; background: url(../img/menu/english-inverse/mnc.gif) no-repeat top left }
#navigat #introitem2.active a:link{ background: url(../img/menu/english-inverse/mnc.gif) no-repeat bottom left }
#navigat #introitem2.active a:visited{ background: url(../img/menu/english-inverse/mnc.gif) no-repeat bottom left }
#navigat #introitem2 a:hover{background: url(../img/menu/english-inverse/mnc.gif) no-repeat bottom left }

#navigat #introitem3 a{ display: block; width: 116px; height: 114px; background: url(../img/menu/english-inverse/transport.gif) no-repeat top left }
#navigat #introitem3.active a:link{ background: url(../img/menu/english-inverse/transport.gif) no-repeat bottom left }
#navigat #introitem3.active a:visited{ background: url(../img/menu/english-inverse/transport.gif) no-repeat bottom left }
#navigat #introitem3 a:hover{background: url(../img/menu/english-inverse/transport.gif) no-repeat bottom left }

#navigat #introitem4 a{ display: block; width: 116px; height: 114px; background: url(../img/menu/english-inverse/gp.gif) no-repeat top left }
#navigat #introitem4.active a:link{ background: url(../img/menu/english-inverse/gp.gif) no-repeat bottom left }
#navigat #introitem4.active a:visited{ background: url(../img/menu/english-inverse/gp.gif) no-repeat bottom left }
#navigat #introitem4 a:hover{background: url(../img/menu/english-inverse/gp.gif) no-repeat bottom left }

#navigat #introitem5 a{ display: block; width: 116px; height: 114px; background: url(../img/menu/english-inverse/be.gif) no-repeat top left }
#navigat #introitem5.active a:link{ background: url(../img/menu/english-inverse/be.gif) no-repeat bottom left }
#navigat #introitem5.active a:visited{ background: url(../img/menu/english-inverse/be.gif) no-repeat bottom left }
#navigat #introitem5 a:hover{background: url(../img/menu/english-inverse/be.gif) no-repeat bottom left }

#navigat #introitem6 a{ display: block; width: 116px; height: 114px; background: url(../img/menu/english-inverse/contact.gif) no-repeat top left }
#navigat #introitem6.active a:link{ background: url(../img/menu/english-inverse/mnccontact.gif) no-repeat bottom left }
#navigat #introitem6.active a:visited{ background: url(../img/menu/english-inverse/contact.gif) no-repeat bottom left }
#navigat #introitem6 a:hover{background: url(../img/menu/english-inverse/contact.gif) no-repeat bottom left }