/*-----------------------------------------
Feuille de style Puzzle par Vincent G
-----------------------------------------*/

            


/*----------------------------------------
Formatage des styles prédéfinis
----------------------------------------*/
*{
   padding:0;
   margin:0;
   font-family: arial,tahoma;
   background-repeat: no-repeat;
}
ul{
    list-style: none;
}
p{
    padding:0 0 10px 0;
}
table{
  border-collapse:collapse
}
html, body{
    height:100%;
    width:100%;
}

body{
    font-size: 12px;
    color:#56544c;
    /*hack ie6 pour les hover (li)*/
   /* behavior:url("/eurarfid/csshover.htc");*/
   background:url(images/site/background-header.jpg) top center no-repeat;

}
a{
    color:#0d9bc4;
    text-decoration:underline;
}
a:hover{
  text-decoration:none;
}

a.flechebleu{
  padding-left:15px;
  background:url(images/boutons/puce.gif) left bottom no-repeat;
}

.clearer{
  font-size:0px;
  height:10px;
  clear:both;
  float:left;
}
p, li,td{
  line-height:18px
}
.imgborder{
  border:7px solid #e0e0e0
}

frame, iframe{
  border:none;
}
/*----------------------------------------
contour
----------------------------------------*/
#all{
  width:935px;
  margin:0 auto;
}
/*----------------------------------------
Header
----------------------------------------*/
#header{
  height:463px;
  position:relative;
}

#follow-us-title {
	position: relative;
	top: -23px;
	left: 0px;
}
#our-calendar-title {
	position: relative;
	top: -8px;
	left: 0px;	
}
/*----------------------------------------
Menu principal
----------------------------------------*/
#menu{
  position:absolute;
  top:0;
  left:-5px
}
#menu li{
  float:left;
}
#menu li a {
  height:60px;
  display:block;
  font-weight:bold;
  color:#fff;
  margin:0 0px 0 0px;
  text-decoration:none;
  text-transform: uppercase;
}
#menu a.currentpage, #menu a.activeparent{
  text-decoration:underline
}
#menu li a:hover{
  text-decoration:underline;
}
#menu ul ul{
  /*display:none;*/
}
#menu li span{
  display:none;
}
#menu li a.l-association{
  background:url(images/menu/menu-citc.jpg);
  width:119px;
}
#menu li a.activeparent_l-association{
  background:url(images/menu/menu-citc-active.jpg);
}

#menu li a.actualites{
  background:url(images/menu/menu-actualites.jpg);
  width:95px;
}
#menu li a.activeparent_actualites{
  background:url(images/menu/menu-actualites-active.jpg);
}

#menu li a.membres{
  background:url(images/menu/menu-membres.jpg);
  width:84px
}
#menu li a.activeparent_membres{
  background:url(images/menu/menu-membres-active.jpg);
}

#menu li a.services{
  background:url(images/menu/menu-services.jpg);
  width:108px
}
#menu li a.activeparent_services{
  background:url(images/menu/menu-services-active.jpg);
}

#menu li a.technologies{
  background:url(images/menu/menu-technologies.jpg);
  width:108px
}
#menu li a.activeparent_technologies{
  background:url(images/menu/menu-technologies-active.jpg);
}

#menu li a.cartographie-des-projets{
  background:url(images/menu/menu-cartographie.jpg);
  width:107px;
}
#menu li a.activeparent_cartographie-des-projets{
  background:url(images/menu/menu-carthographie-active.jpg);
}

#menu li a.formations{
  background:url(images/menu/menu-formations.jpg);
  width:94px
}
#menu li a.activeparent_formations{
  background:url(images/menu/menu-formations-active.jpg);
}

#menu li a.contact{
  background:url(images/menu/menu-contactpresse.jpg);
  width:115px
}
#menu li a.activeparent_contact{
  background:url(images/menu/menu-contactpresse-active.jpg);
}


/* ENGLISH MENU */
#menu ul li ul {
	margin-top: -60px;
}

#menu li a.a-propos-du-citc---eurarfid {
  background:url(images/menu/menu-en-citc.jpg);
  width:119px;
}

#menu li a.activeparent_a-propos-du-citc---eurarfid {
  background:url(images/menu/menu-en-citc-active.jpg);
  width:119px;
}

#menu li a.en-actualites{
  background:url(images/menu/menu-en-news.jpg);
  width:95px;
}
#menu li a.activeparent_en-actualites{
  background:url(images/menu/menu-en-news-active.jpg);
}

#menu li a.en-membres{
  background:url(images/menu/menu-en-members.jpg);
  width:84px
}
#menu li a.activeparent_en-membres{
  background:url(images/menu/menu-en-members-active.jpg);
}

#menu li a.en-services{
  background:url(images/menu/menu-en-ourservices.jpg);
  width:108px
}
#menu li a.activeparent_en-services{
  background:url(images/menu/menu-en-ouservices-active.jpg);
}

#menu li a.en-technologies{
  background:url(images/menu/menu-en-technology.jpg);
  width:108px
}
#menu li a.activeparent_en-technologies{
  background:url(images/menu/menu-en-technology-active.jpg);
}

#menu li a.en-cartographie-des-projets{
  background:url(images/menu/menu-en-cartography.jpg);
  width:107px;
}
#menu li a.activeparent_en-cartographie-des-projets{
  background:url(images/menu/menu-en-cartography-active.jpg);
}

#menu li a.en-formations{
  background:url(images/menu/menu-en-training.jpg);
  width:94px
}
#menu li a.activeparent_en-formations{
  background:url(images/menu/menu-en-training-active.jpg);
}

#menu li a.en-contact{
  background:url(images/menu/menu-en-contactpress.jpg);
  width:115px
}
#menu li a.activeparent_en-contact{
  background:url(images/menu/menu-en-contactpresse-active.jpg);
}


#menu li a.en-services{
  background:url(images/menu/menu-en-services.jpg);
  width:108px
}
#menu li a.activeparent_en-services{
  background:url(images/menu/menu-en-services-active.jpg);
}

/*----------------------------------------
Moteur de recherche
----------------------------------------*/
#recherche{
  position:absolute;
  left:10px;
  top:290px;
}
#recherche td{
  vertical-align: middle;
}
.search-input{
  height:15px;
  width:163px;
  padding:4px 8px 3px 8px;
  background:url(images/boutons/champ-wrapper-v2.jpg) no-repeat;
  border:none;
  font-size:10px;
  color:#07526a;
}
.search-button{
  background:url(images/boutons/ok-wrapper-v2.gif) no-repeat;
  border:none;
  color:#fff;
  font-weight:bold;
  width:30px;
  height:21px;
  cursor:pointer;
  margin-left:7px;
}
/*----------------------------------------
Extranet
----------------------------------------*/
#extranet, #extranet a{
  width:100px;
  height:43px;
  display:block;
}
#extranet a span{
  display:none;
}
#extranet{
  position:absolute;
  top:42px;
  right:-5px;
}
/*----------------------------------------
Logo
----------------------------------------*/
#logo, #logo a{
  width:267px;
  height:97px;
  display:block;
}
#logo a span{
  display:none;
}
#logo{
  position:absolute;
  top:135px;
  left:0;
}
/*----------------------------------------
Agenda
----------------------------------------*/
#agenda{
  position:absolute;
  top:347px;
  left:15px;
  width:500px;
 /* height:65px;
  overflow:auto;*/
  font-size:10px;
}

#agenda .titre-date{
  width:100%;
}
#agenda .titre-date a{
  font-weight:bold;
  font-size:11px;
  text-decoration:none;
}
#agenda .titre-date a:hover{
  text-decoration:underline;
}
#agenda .NewsSummarySummary{
  margin:0 0 3px 0;
  line-height:13px;
  font-family:tahoma;
}
#agenda .NewsSummary{
  float:left;
  width:99%;
  margin:0 5px 0 0;
  color:#878374
}
/*----------------------------------------
Newsletter
----------------------------------------*/
#newsletter{
  position:absolute;
  top:364px;
  left:544px;
  width:182px;
  font-size:11px;
}
#newsletter p{
  line-height:13px;
  padding-bottom:8px;
}
#newsletter #m5email{
  width:139px;
  height:17px;
  padding:4px 4px 0 4px;
  border:none;
  font-size:10px;
  color:#64615b;
  background:url(images/boutons/champ-header.jpg);
}
#newsletter #m5submit{
  border:none;
  background:url(images/boutons/ok-header.gif);
  height:21px;
  width:30px;
  font-size:0;
  cursor:pointer;
  margin-left:5px;
}

#newsletter .nms_message{
  color:red;
  display:block; 
  padding:2px 0 0 2px;
}
/*----------------------------------------
Flux RSS
----------------------------------------*/
#flux-rss{
  position:absolute;
  right:8px;
  top:398px;
}
#flux-rss a{
  display:block;
  height:48px;
  width:45px;
  background:url(images/boutons/rss-grand.jpg)
}
#flux-rss a:hover{
background:url(images/boutons/rss-grand-on.jpg)
}
#flux-rss a span{
  display:none;
}
/*----------------------------------------
Lien facebook et viadeo
----------------------------------------*/
#suiveznous{
  width:91px;
  position:absolute;
  right:93px;
  top:363px;
}
#suiveznous a span{display:none;}
#suiveznous .facebook, #suiveznous .viadeo{
  display:block;
  width:91px;
  height:27px;
}
#suiveznous .facebook{background:url(images/boutons/facebook.jpg)}
#suiveznous .viadeo{background:url(images/boutons/viadeo.jpg)}
#suiveznous .facebook:hover{background:url(images/boutons/facebook-on.jpg)}
#suiveznous .viadeo:hover{background:url(images/boutons/viadeo-on.jpg)}
#suiveznous li{
  padding-bottom:8px;
}
/*----------------------------------------
fils d'ariane
----------------------------------------*/
#ariane{
  font-size:10px;
  position:absolute;
  left:0px;
  top:440px;
  width:380px;
  color:#a49e90;
}
#ariane span{
    color:#555549
}
/*----------------------------------------
Liens utils : taille police + reseaux
----------------------------------------*/
#acces{
  position:absolute;
  top:440px;
  left:390px;
}
#acces li{
  float:left;
  display:block;
  margin:0 2px;
}
#acces .txtmoins,#acces .txtplus,#acces .addthis_button-fr {
  height:22px;
  width:22px;
  display:block;
  text-decoration:none;
}

#acces .txtmoins,#acces .txtplus,#acces .addthis_button-en {
  height:22px;
  width:22px;
  display:block;
  text-decoration:none;
}
#acces a span{
  display:none;
}
#acces .txtmoins{
background:url(images/boutons/a-.gif);
}
#acces .txtplus{
background:url(images/boutons/a+.gif);
}

#acces .addthis_button-fr {
  width:61px;
  background:url(images/boutons/shareit.jpg);
}
#acces .addthis_button-en {
  width:61px;
  background:url(images/boutons/shareit-on.jpg);
}
/*----------------------------------------
Les Partenaires
----------------------------------------*/
#partenaires{
  clear:both;
  margin:15px 0;
  float:left;
  width:100%;
}
#partenaires li{
  float:left;
  margin:0 15px 0 0;
}
#partenaires li img{
  text-decoration:none;
  border:none;
}
/*----------------------------------------
Footer
----------------------------------------*/
#footer{
  height:72px;
  padding:10px 25px 0 190px;
  clear:both;
  margin:25px 0;
  background-image: url(images/site/footer.jpg);
}
#footer ul.adresse{
  float:left;
}
#footer ul.adresse li{
  font-size:11px;
  color:#828282;
  line-height:15px;
}
#copyright dfn{
  display:none;
}
#copyright{
  float:right;
}
#copyright ul{
  text-align:right;
  display:block;
  float:right; 
  /*padding:10px 0 3px 0;*/
}
#copyright li{
  float:left;
}
#copyright a, #copyright li, #copyright{
  color:#acacac;
  font-size:12px;
  text-decoration:none;
}
#copyright a:hover, #copyright a.menuactive{
  text-decoration:underline;
}
#copyright .prop{
  clear:both;
  float:right
}

#copyright #lang-select {
  clear:both;
  float: right;
  margin-bottom: 6px;
}
#copyright #lang-select img {
	border: none;
}

/*----------------------------------------
Zone de contenu
----------------------------------------*/
.title, .title span{
  font-size:15px;
  text-transform: uppercase;
  color:#5d5a54;
 /* font-family: "Arial Rounded";    */
  /*font-family:arial;        */         
}                                          

h4 a{
  font-size:13px;
  /*font-family:arial;            */
  color:#4e4b42;
  text-decoration:none;
}
h4 a:hover{text-decoration:underline;}
 .title{
  padding-bottom:15px;
  display:block;
  min-height:18px;
  margin-bottom:15px;
  background: url(images/titres/separateur.png) no-repeat left bottom;
}
 .title span{
  float:left
}
.title a{
  float:right;
  padding-right:5px;
  text-transform :none;
  font-size:11px;
  font-weight:normal
}

.slg-bleu{
  padding:15px 0 10px 0
}
/*----------------------------------------
Sous menu a droite
----------------------------------------*/
#sousmenu ul li{
  display:block;
  padding:0 5px 5px 5px;
  margin-bottom:5px;
  border-bottom:1px solid #cac9c6
}
#sousmenu ul li h3{
  font-size:11px;
}




/*----------------------------------------
Zone de contenu Accueil
----------------------------------------*/
.content_accueil .col1{
    width:500px;
    float:left;
}
.content_accueil .col2{
    width:410px;
    float:right;
    margin:20px 0 0 0px;
}
#content .box{
  margin-bottom:25px;
}
#content a.flechebleu{
  font-size:11px;
}
#content{
  margin-top:8px
}

.webtv{font-size:11px}

/*----------------------------------------
Zone de contenu Page interne
----------------------------------------*/
.content_interieur .col1{
    width:500px;
    float:left;
}
.content_interieur .col2{
    width:410px;
    float:right;
    margin:20px 0 0 0px;
}

.col1 ul,.slg, #content ul{
  padding:0px 0 15px 25px
}
.col1 ul li, .slg li, #content ul li{
    background:transparent url(images/boutons/puce.jpg) no-repeat scroll 0 7px;
    padding:0 0 5px 12px
}
/*----------------------------------------
Box Grise a droite
----------------------------------------*/

.boxgris{
  width:413px;
  font-size:11px;
}
.boxgris .header,.boxgris .footer{
  height:20px;
  font-size:0;
  clear:both;
  width:100%;
}
.boxgris .header{
  background:url(images/blocs/boxgris/zone-haut.jpg) no-repeat;
}
.boxgris .footer{
  background:url(images/blocs/boxgris/zone-bas.jpg) no-repeat;
}
.boxgris .content{
  background:url(images/blocs/boxgris/zone-milieu.jpg) repeat-y;
  padding:0 15px 15px 15px;
  width:383px;
  float:left;
}
/*----------------------------------------
Les membres Accueil
----------------------------------------*/
#lesmembres{
    height:200px;
    width:383px;
    padding:15px;
    /*font-family:arial;*/
    font-size:11px;
}
#lesmembres  .onemembre ul{
  list-style:none
}

#content ul li.jcarousel-item{
    background: none
}
#content #lesmembres  .onemembre  ul li{
  line-height:14px;
  background: none
}
#lesmembres .onemembre img{
  margin-bottom:5px;
}
#lesmembres .onemembre{
  float:left;
  width:111px;
  margin-right:15px;
}


/*----------------------------------------
Cartographie Accueil
----------------------------------------*/
#cartography {
    background:url(images/blocs/background-lesmembres.jpg);
    background-repeat: no-repeat;
    height:251px;
    width:383px;
    padding:15px;
    /*font-family:arial;*/
    font-size:11px;
}
#cartography img {
	border:none;
}

#cartography p {
	text-align: left;
	margin-left: 5px;
	margin-top: 10px;
}

/*----------------------------------------
Les membres Contenu (listing))
----------------------------------------*/
.content_membres  .onemembre{
  width:230px;
  height:115px;
  float:left;
  font-size:11px;
  margin:0 15px 15px 0;
  /*font-family:arial; */
}
.content_membres  .onemembre li{
  line-height:14px;
}
.onemembre .logo-membre,.onemembre .description-membre{
  float:left;
}
.onemembre .logo-membre img{
  max-width:90px;
}
.onemembre .description-membre{
  width:120px;
}
.onemembre .logo-membre{
  width:110px;
}
.onemembre ul {
  padding:0;
}
.onemembre ul li{
  padding:0;
  background: none
}

/*----------------------------------------
Pagination
----------------------------------------*/
.pager ul li{
  float:left;
  background: none;
  padding:0;
  
}
.pager  a{
  display:block;
  float:left;
  margin:0 4px 0 0;
  padding:2px 7px;
  background-color: #efede6;
  border:1px solid #e3e3e3;
  color:#4e4b42;
  font-size:11px;
  text-decoration:none;
}
.pager ul{
    padding:0
}
.pager li a:hover,.pager li a.selected{
  background-color: #dbdad5;
}

.pager{
  clear:both;
  width:100%;
  margin:0 0 15px 0;
}
.milieu{
  float:left;
}



.listetitres{
  
}

/*----------------------------------------
Les video accueil
----------------------------------------*/
.onevideo{
  width:200px;
  float:left;
  margin-right:5px;
  font-size:11px;
}
.onevideo li{
  line-height:14px;
}
.onevideo img{
  margin-bottom:5px;
}
/*----------------------------------------
Actualités accueil
----------------------------------------*/
.imgactusommaire{
  max-width:120px;
  margin-right:10px;
  width:120px;
}
.oneactu {
  margin:0 0 30px 0
}
.oneactu h4{
  padding:0 0 15px 0;
}
.oneactu td{
  vertical-align:top;
}
#lastactus{
    font-size:11px;
}
#lastactus .pager{display:none}
.oneactu .NewsSummaryPostdate{
  color:#a39e90;
  font-size:11px;
}

.content_interieur .oneactu{
  border-bottom:1px solid #e5e5e5;
  padding-bottom:25px;
}
.content_interieur .actudetail{
  border-bottom:none;
  padding-bottom:0;
  margin:0 0 10px 0;
}

.content-actu{
  margin:5px 0 0 0
}
.actudetail h4{
  font-size:16px
}
/*-------------------------------------------
Les commentaires
-------------------------------------------*/
#comments ul,#comments li{
  padding:0;
  margin:0;
  background:none;
}
#comments td{
  vertical-align:middle;
  line-height:14px;
  font-size:11px
}
#comments .onecomment{
  margin:5px 0 30px 0;
  width:495px;
  
}
#comments .date{font-size:10px}
#comments .header,#comments .footer{
  font-size:0px;
  height:15px;
}
#comments .header{
  background:url(images/comment/commentaire-haut.gif)
}
#comments .footer{
  background:url(images/comment/commentaire-bas.gif)
}
#comments .content{
  background:url(images/comment/commentaire-milieu.gif) repeat-y;
  padding:0 15px;
  line-height:16px;
  font-size:11px
}
/*-------------------------------------------
Formulaire de contact 
-------------------------------------------*/
.contactform, #m7moduleform_3{
  clear:both;
  margin:0 0 0 0px;
  
}
.contactform div, #m7moduleform_3 div{
  clear:both;
  margin:0 0 15px 0;
}
.contactform label, #m7moduleform_3 label{
  display:block;
  float:left;
  width:140px;
  font-weight:bold;
  
}
.contactform input, #m7moduleform_3 input{
  width:290px;
  background: url(images/form/champ.jpg);
}

#m7moduleform_3 .notify input{
    width:14px     ;
    background:none;
}
.contactform textarea, #m7moduleform_3 textarea{
  width:431px;
  height:138px;
  overflow:auto;
  background: url(images/form/zone-contenu.jpg);             
}
.contactform input, .contactform textarea, #m7moduleform_3 input,#m7moduleform_3 textarea{
  font-size:11px;
  padding:4px 3px;
  border:none;
  color:#64615b;
  /*border:1px solid #a5acb2 */
}

.contactform .fbsubmit, input#m7submitcomment {
  margin-left:377px;
  height:22px;
  width:59px;
  border:none;
  color:#fff;
  text-transform: uppercase;
  cursor:pointer;
  background:url(images/boutons/envoyer.jpg) #4f4d48;
}

#m7moduleform_3 .invalidInput,.contactform .invalidInput, p.error,#m7moduleform_3 .textarea,.contactform .textarea{
 color:#d63904;
}
#m7moduleform_3  textarea.invalidInput, .contactform textarea.invalidInput{  
    background: url(images/form/zone-contenu-rouge.jpg);     
}
#m7moduleform_3  input.invalidInput, .contactform input.invalidInput{
   background: url(images/form/champ-rouge.jpg);      
}


p.error{
 width:415px;
 display:none;
 padding:10px;
 margin:0 0 15px 0px;
}
.titrecomment{
    display:none;
}
/*-------------------------------------------
Nuages de tags
-------------------------------------------*/
#nuagedetags a{
  text-transform: uppercase;
  text-decoration:none;
  margin:0 5px 10px 0;
  color:#b6b3b3;
}
#nuagedetags a:hover{
  color:#797777
}

.onetag{
  height:40px;
  float:left;
  vertical-align: middle;
}

/*-------------------------------------------
Les categorie des membrzes 
-------------------------------------------*/
#cat_membres li, .listetitres li{
  display:block;
  padding:0 3px 5px 3px;
  margin:0 0 5px 0;
  border-bottom:1px solid #cac9c6;
}
#cat_membres li a{
  color:#4e4b42;
  text-decoration:none;
}
#cat_membres li a.selected{
  text-decoration:underline
}
#cat_membres li a:hover{
text-decoration:underline;
}
#cat_membres li a .nb_membres{
  color:#aaa8a3
}

/*-------------------------------------------
Cartographie des projets
-------------------------------------------*/
div#map_canvas span {
	display: none;
}

.project-map-form{
  clear:both;
  margin:0 0 0 0px;
  
}
.project-map-form div{
  clear:both;
  margin:0 0 15px 0;
}
.project-map-form label{
  display:block;
  float:left;
  width:120px;
  font-weight:bold;  
}

div.project-map-form label[for=m6fbrp__47]
{
	/*width: 400px;*/
}

.project-map-form input{
  width:290px;
  background: url(images/form/champ.jpg);
}

.project-map-form textarea{
  width:431px;
  height:138px;
  overflow:auto;
  background: url(images/form/zone-contenu.jpg);             
}
.project-map-form input, .project-map-form textarea {
  font-size:11px;
  padding:4px 3px;
  border:none;
  color:#64615b;
  /*border:1px solid #a5acb2 */
}

.project-map-form .fbsubmit {
  margin-left:377px;
  height:22px;
  width:59px;
  border:none;
  color:#fff;
  text-transform: uppercase;
  cursor:pointer;
  background:url(images/boutons/envoyer.jpg) #4f4d48;
  font-size: 0px;
}

.project-map-form .invalidInput, p.error,.project-map-form .textarea{
 color:#d63904;
}
.project-map-form textarea.invalidInput{  
    background: url(images/form/zone-contenu-rouge.jpg);     
}
.project-map-form input.invalidInput{
   background: url(images/form/champ-rouge.jpg);      
}
.project-map-form .fb_invalid {
	color: red;
}

/*-------------------------------------------
Inscription aux formations
-------------------------------------------*/
.subscribe-formation-form{
  clear:both;
  margin:0 0 0 0px;
  
}
.subscribe-formation-form div{
  clear:both;
  margin:0 0 15px 0;
}
.subscribe-formation-form label{
  display:block;
  float:left;
  width:120px;
  font-weight:bold;  
}

.subscribe-formation-form label[for=m6fbrp__47]
{
	/*width: 400px;*/
}

.subscribe-formation-form input{
  width:290px;
  background: url(images/form/champ.jpg);
}

.subscribe-formation-form textarea{
  width:431px;
  height:138px;
  overflow:auto;
  background: url(images/form/zone-contenu.jpg);             
}
.subscribe-formation-form input, .subscribe-formation-form textarea {
  font-size:11px;
  padding:4px 3px;
  border:none;
  color:#64615b;
  /*border:1px solid #a5acb2 */
}

.subscribe-formation-form .fbsubmit {
  margin-left:377px;
  height:22px;
  width:59px;
  border:none;
  color:#fff;
  text-transform: uppercase;
  cursor:pointer;
  background:url(images/boutons/envoyer.jpg) #4f4d48;
  font-size: 0px;
}

.subscribe-formation-form .invalidInput, p.error,.subscribe-formation-form .textarea{
 color:#d63904;
}
.subscribe-formation-form textarea.invalidInput{  
    background: url(images/form/zone-contenu-rouge.jpg);     
}
.subscribe-formation-form input.invalidInput{
   background: url(images/form/champ-rouge.jpg);      
}

div.error_message {
	color: red;
}
.subscribe-formation-form .fb_invalid {
	color: red;
}