/*
Theme Name: MABD
Theme URI: 
Author:Le Mouvement de l'Agriculture Bio-Dynamique
Author URI: 
Description: Thème du site du Mouvement de l'Agriculture Bio-Dynamique réalisé en printemps 2012. Ce thème est basé sur le thème Twenty Eleven.
License: GNU General Public License
License URI: license.txt
Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
*/

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
@media screen and (max-width: 320px) and (orientation: landscape){
  html{
    -webkit-text-size-adjust:100%;
  }
}
@media screen and (max-width : 320px){

*{
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/*----passer le body et tous les elements de largeur fixe en largeur automatique--*/
body {
width:100%;
margin: 0;
padding: 0;
}

#soutenir{
	display: inline-block;
}

#img_amis{
	display:none;
}

#amis{
	display:none;
}


/*-----fixer une largeur maximale de 100% aux éléments potentiellement problématiques---*/
img,table,td,blockquote,code,pre,textarea,input,iframe,object,embed,video{
  max-width: 100%;
}

/*---conserver les ratios des images---*/
img{
  height: auto;
}

/*----gestion des mots longs-----*/
textarea,table,td,th,code,pre,samp{
  -webkit-hyphens:auto;  /*césure propre*/
  -moz-hyphens:auto;
  hyphens:auto;
  word-wrap:break-word; /*passage à la ligne forcée*/
}

code,pre,samp{
  white-space: pre-wrap;  /*passage à la ligne spécifiquepour les éléments à chassis fixe*/
}

/*masquer les éléments superflus*/
.hide_mobile{
  display: none !important;
}

/*un message personnalisé*/
body:before{
  content: "Version mobile du site";
  display: block;
  text-align: center;
  font-style: italic;
  color: #777;
}

#main{
  max-width: 100%;
}

#main #content {
  margin: 0 7.6%;
  width: auto;
  }

  #page {
  max-width:100%;
  margin: 0 auto; 
  }

  #primary{
    width: auto;
  }

/*--------------global---------------------------*/
/* Headings */
h1,h2,h3,h4,h5,h6 {
  border: 0;
  font-family: Novalis;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  color: #fd6c02;
  clear: both;
  text-align: center; 
}

h2 {
  font-size: 17px; 
  margin-bottom: 10px;
}

h3 {
  font-size: 13px; 
  margin-bottom: 10px;
}

h4 {
  font-size: 12px; 
  margin-bottom: 10px;
}
hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.625em;
}

/*--------------------header----------------------*/
  #logo_mabd img{
  width:100px !important;
  }
  #logo_mabd{
  width:100px;
  height: 55px;
  border-bottom-right-radius: 4px;
  }
  #branding #s {
  margin-top:58px;
  font-size: 6px;
  width: 80px;
  }
  #loupe img{
  width: 14px;
  height:15px;
  top: 61px!important;
  }

  #menu-header {
  left:100px !important;
  }

  #menu-header ul{
    margin-left: 0px;
  }

  #menu-header li{
    margin: 0px 0px 0px 0px;
    padding: 0px 23px 5px 1px;
    height: 24px;
    width: 90px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 11px;
    background-color: #fd6c02;
    border: solid 1px #ebefae;
    display: inline;
  }
  #menu-header a{
  font-size:7px !important;
  text-align: left;
  text-transform: none;
  }
    /* Make sure the logo and search form don't collide */
  #branding #searchform {
    top: -0.4em !important;
  }

  #news_box {
  left: -66px !important;
  font-size:11px !important;
  width: 205px !important; 
  top: 17px;
  }
  #bouton_insc {
  margin-left: 105px !important;
  width: 70px !important; 
  }
  #access {
    width: 100%;
  margin:0 auto 6px !important;
  }
  #access div {
  margin: 0px !important;
  width: 150%;
  float: none;
  }
  #access ul {
  font-size: 8px;
  padding-left: 0px;
  }
  #access li {
  margin-top: 2px; 
  padding: 0px 2px !important; 
  border-right:solid 1px white;
  }
  #access a {
  line-height: 25px;
  }
 
 /*-----------------content------------*/
  #ariane {
  font-size:10px!important;
  left:10px!important;
  }
  #ariane a{
  font-size:10px!important;
  }
  .left-sidebar #primary {
  width: 100%;
  float:right;
  margin-left: 0;
  margin-right: 0;
  
  }
  .left-sidebar #secondary{
    float: right;
    width: 98%;
    margin-left: 0;
    margin-right: 0;
  }
  p {
  font-size:76%!important;
  }
  #publi_a, #form_a, #agend_a{
    font-size: 14px !important;
  }
  h4{
    font-size: 14px;
  }
  .entry-title {
  font-size:22px;
  }

  #menu-lateral {
  float: right;
  top: 0px;
  left: 0px;
  position: relative;
  width: 100% !important; 
  }
  #menu-lateral a {
  font-size:14px !important;
  }
  #menu-lateral li{
  font-size: 11px !important; 
  padding-left: 10px !important; 
  }
  #slide_publi, #slide_forma, #slide_agenda {
  width:100%;
  }
  #img_publi, #img_agenda {
    width: 100%;
  padding-left: 10px !important; 
  }
  #IRHolder a{
  font-size:10px !important;
  }
  #livres img, #calendrier img, #revues img, #doc img {
  margin: 0 0 0 50px !important;
  width: 140px !important;
  }
  #livres, #calendrier, #revues, #doc {
  width: 200px !important;
  margin-bottom: 10px !important;
  margin-left: 12px;
  }
  #livres h3, #calendrier h3, #revues h3, #doc h3 {
  font-size: 11px!important;
  }
  .text_publi {
  padding:0px 0px 0px 10px!important;
  width:90%!important;
  }
  .text_publi p {
  font-size: 10.8px !important;
  }
  .bouton_publi-1{
    position: relative;
    width: 10px;
    right: -2px;
    bottom: 4px;
  }
  .bouton_publi-2{
    position: relative;
    width: 10px;
    left: 23px;
  }
  .ptitencadre{
    width: 100%;
    margin-left: 0px;
    padding-right: 2px;
  }
  #map-google{
    width: 100%;
  }
  .partenaires{
    width: 96%;
    font-size: 8px;
  }
  .img_publi img{
  width:120px !important;
  }
  #rens, #comm {
    width: 180px !important;
  }
  #contact-form {
  width:100%;
  padding: 10px 0px;
  float: left;
  }
  #site-title a {
    font-size: 22px;
  }
  #site-description {
    font-size: 12px;
  }

  #forma_jard, #forma_conso, #forma_pro, #forma_qualif, #forma_diplo, #forma_sem, #forma_otre {
    clear: both; 
    margin: 5px;
}
  #forma_jard h3, #forma_conso h3, #forma_pro h3, #forma_qualif h3, #forma_diplo h3, #forma_sem h3, #forma_otre h3 {
    font-size: 12px; 
}
  article.intro .entry-content {
    font-size: 12px;
  }
  .entry-title {
    font-size: 21px;
  }
  .featured-post .entry-title {
    font-size: 14px;
  }
  .singular .entry-title {
    font-size: 28px;
  }
  .entry-meta {
    font-size: 12px;
  }
  blockquote {
    margin: 0;
  }
  blockquote.pull {
    font-size: 17px;
  }
  /* Reposition the site title and description slightly */
  #site-title {
    padding: 5.30625em 0 0;
  }
  #site-title,
  #site-description {
    margin-right: 0;
  }

  /* Floated content doesn't work well at this size */
  .alignleft,
  .alignright {
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
  /* Make sure the post-post navigation doesn't collide with anything */
  #nav-single {
    display: block;
    position: static;
  }
  .singular .hentry {
    padding: 1.625em 0 0;
  }
  .singular.page .hentry {
    padding: 1.625em 0 0;
  }
  /* Talking avatars take up too much room at this size */
  .commentlist > li.comment,
  .commentlist > li.pingback {
    margin-left: 0 !important;
  }
  .commentlist .avatar {
    background: transparent;
    display: block;
    padding: 0;
    position: static;
  }
  .commentlist .children .avatar {
    background: none;
    left: 2.2em;
    padding: 0;
    position: absolute;
    top: 2.2em;
  }
  /* Use the available space in the smaller comment form */
  #respond input[type="text"] {
    width: 95%;
  }
  #respond .comment-form-author .required,
  #respond .comment-form-email .required {
    left: 95%;
  }
  #content .gallery-columns-3 .gallery-item {
    width: 31%;
    padding-right: 2%;
  }
  #content .gallery-columns-3 .gallery-item img {
    width: 100%;
    height: auto;
  }
  .vignette_1, .vignette_2, .vignette_3, .vignette_4{
    float: left;
    width: 160px;
    height: 330px;
    margin: 5px; 
    
  }
  .vignette_1 img, .vignette_2 img, .vignette_3 img, .vignette_4 img{
    margin: 20px 0px 0px 6px;
  }
  .vignette_1 h3, .vignette_2 h3, .vignette_3 h3, .vignette_4 h3{
   font-size: 13px; 
  }

/*--------------footer-------------------------*/
#colophon #supplementary .widget-area {
    float: none;
    margin-right: 0;
    width: auto;
  }
#menu_demeter{
  position: relative;
  top: 0px;
  left: 0px;
  float: left;
}

#supplementary{
  width: 100%;
}
  #supplementary li {
  font-size: 12px;
  margin-top: 8px !important;
  border-right: 1px solid white;
  line-height: 5px;
  padding: 5px;
  }
  #supplementary ul {
  padding-left: 0px;

  }
  #supplementary a {
  font-size: 70%;
  }

}


/* -------------------------------------------Smartphones ( 320 à 480 pixels ) --------------------------------------- */
@media screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape){
  html{
    -webkit-text-size-adjust:100%;
  }
}
@media screen and (min-width: 320px) and (max-width : 480px){

*{
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/*----passer le body et tous les elements de largeur fixe en largeur automatique--*/
body {
width:auto;
margin: 0;
padding: 0;
}

/*-----fixer une largeur maximale de 100% aux éléments potentiellement problématiques---*/
img,table,td,blockquote,code,pre,textarea,input,iframe,object,embed,video{
  max-width: 100%;
}

/*---conserver les ratios des images---*/
img{
  height: auto;
}

/*----gestion des mots longs-----*/
textarea,table,td,th,code,pre,samp{
  -webkit-hyphens:auto;  /*césure propre*/
  -moz-hyphens:auto;
  hyphens:auto;
  word-wrap:break-word; /*passage à la ligne forcée*/
}

code,pre,samp{
  white-space: pre-wrap;  /*passage à la ligne spécifiquepour les éléments à chassis fixe*/
}

/*masquer les éléments superflus*/
.hide_mobile{
  display: none !important;
}

/*un message personnalisé*/
body:before{
  content: "Version mobile du site";
  display: block;
  text-align: center;
  font-style: italic;
  color: #777;
}

#main{
	max-width: 100%;
}

#main #content {
	margin: 0 7.6%;
	width: auto;
	}

  #page {
  max-width:100%;
  margin: 0 auto; 
  }

  #primary{
  	width: auto;
  }

.wp-image-1773{
	margin-left:50px;
	
}
/*--------------------header----------------------*/

  #logo_mabd img{
  width:100px !important;
  }
  #logo_mabd{
  width:110px;
  height: 64px;
  border-bottom-right-radius: 4px;
  }
  #branding #s {
  margin-top:70px;
  font-size: 8px;
  width: 86px;
  }
  #loupe img{
  width: 15px;
  height:15px;
  top: 75px!important;
  }

  #menu-header {
  left:80px !important;
  }
  #menu-header ul{
	margin-left: 35px;
  }
  #menu-header li{
  	
  	padding-right: 5px;
  	padding-left: 5px;
  	height: 28px;
  	width: 94px;
  	margin-right: 0px;
  	padding-top: 0px;
  	border-top-left-radius: 15px;
  	border-bottom-right-radius: 11px;
  	background-color: #fd6c02;
  	border: solid 1px #ebefae;
  	display: inline;
  }
  #menu-header a{
    position: relative;
  font-size:15px !important;
  text-align: left;
  text-transform: none;
  margin: -8px;
  padding: 7px;
  text-align: center;
  }
  	/* Make sure the logo and search form don't collide */
	#branding #searchform {
		top: -0.4em !important;
	}

  #news_box {
  left: 24px !important;
  font-size:11px !important;
  width: 205px !important; 
  }
  #bouton_insc {
  margin-left: 113px !important;
  width: 70px !important; 
  }
  #access {
  	width: 100%;
  margin:0 auto 6px !important;
  }
  #access div {
  margin: 0px !important;
  width: 100%;
  float: none;
  }
  #access ul {
  font-size: 8px;
  padding-left: 0px;
  }
  #access li {
  margin-top: 2px; 
  padding: 0px 3px !important; 
  }
  #access a {
  line-height: 25px;
  }
 
 /*---------------content----------------*/

  #ariane {
  font-size:10px!important;
  left:10px!important;
  }
  #ariane a{
  font-size:10px!important;
  }

  .left-sidebar #primary {
  width: 100%;
  float:right;
  margin-left: 0;
  margin-right: 0;
  
  }
  .left-sidebar #secondary{
  	float: right;
  	width: 98%;
  	margin-left: 0;
  	margin-right: 0;
  }
  p {
  font-size:76%!important;
  }
  #publi_a, #form_a, #agend_a{
    font-size: 14px !important;
  }
  h4{
  	font-size: 15px;
  }
  .entry-title {
  font-size:22px;
  }

  #menu-lateral {
  float: right;
  top: 0px;
  left: 0px;
  position: relative;
  width: 100% !important; 
  }
  #menu-lateral a {
  font-size:14px !important;
  }
  #menu-lateral li{
  font-size: 11px !important; 
  padding-left: 10px !important; 
  }
  #slide_publi, #slide_forma, #slide_agenda {
  width:220px!important;
  }
  #img_publi, #img_agenda {
  padding-left: 10px !important; 
  }
  #IRHolder a{
  font-size:10px !important;
  }

  #livres img, #calendrier img, #revues img, #doc img {
  margin: 0 0 0 50px !important;
  width: 140px !important;
  }
  #livres, #calendrier, #revues, #doc {
  width: 240px !important;
  margin-bottom: 10px !important;
  }
  #calendrier, #revues {
  margin-left: 30px; 
  }
  #livres h3, #calendrier h3, #revues h3, #doc h3 {
  font-size: 14px!important;
  }
  .text_publi {
  padding:0px 0px 0px 10px!important;
  width:90%!important;
  }
  .text_publi p {
  font-size: 10.8px !important;
  }
  .bouton_publi-1{
  	position: relative;
  	width: 10px;
  	right: -2px;
  	bottom: -18px;
  }
  .bouton_publi-2{
  	position: relative;
  	width: 10px;
  	left: 130px;
  }
  .ptitencadre{
  	width: 100%;
  	margin-left: 0px;
  	padding-right: 2px;
  }
  #map-google{
  	width: 100%;
  }
  .partenaires{
  	width: 96%;
  }
  .img_publi img{
  width:120px !important;
  }
  
  #rens, #comm {
    width: 250px !important;
  }
  #contact-form {
  width:100%;
  padding: 10px 0px;
  float: left;
  }
	#site-title a {
		font-size: 22px;
	}
	#site-description {
		font-size: 12px;
	}

  #forma_jard, #forma_conso, #forma_pro, #forma_qualif, #forma_diplo, #forma_sem, #forma_otre {
    clear: both; 
}
	article.intro .entry-content {
		font-size: 12px;
	}
	.entry-title {
		font-size: 21px;
	}
	.featured-post .entry-title {
		font-size: 14px;
	}
	.singular .entry-title {
		font-size: 28px;
	}
	.entry-meta {
		font-size: 12px;
	}
	blockquote {
		margin: 0;
	}
	blockquote.pull {
		font-size: 17px;
	}
	/* Reposition the site title and description slightly */
	#site-title {
		padding: 5.30625em 0 0;
	}
	#site-title,
	#site-description {
		margin-right: 0;
	}

	/* Floated content doesn't work well at this size */
	.alignleft,
	.alignright {
		float: none;
		margin-left: 0;
		margin-right: 0;
	}
	/* Make sure the post-post navigation doesn't collide with anything */
	#nav-single {
		display: block;
		position: static;
	}
	.singular .hentry {
		padding: 1.625em 0 0;
	}
	.singular.page .hentry {
		padding: 1.625em 0 0;
	}
	/* Talking avatars take up too much room at this size */
	.commentlist > li.comment,
	.commentlist > li.pingback {
		margin-left: 0 !important;
	}
	.commentlist .avatar {
		background: transparent;
		display: block;
		padding: 0;
		position: static;
	}
	.commentlist .children .avatar {
		background: none;
		left: 2.2em;
		padding: 0;
		position: absolute;
		top: 2.2em;
	}
	/* Use the available space in the smaller comment form */
	#respond input[type="text"] {
		width: 95%;
	}
	#respond .comment-form-author .required,
	#respond .comment-form-email .required {
		left: 95%;
	}
	#content .gallery-columns-3 .gallery-item {
		width: 31%;
		padding-right: 2%;
	}
	#content .gallery-columns-3 .gallery-item img {
		width: 100%;
		height: auto;
	}
	.vignette_1, .vignette_2, .vignette_3, .vignette_4{
		width: 100%;
		padding-bottom: 5px;
	}
  #canvas_france{
    display:none;
  }
  
  #SUISSE{
  	display:none;
  }
  
  #Belgique{
  	display:none;
  }

div.social{
  float: left;
  margin: 15px;
}
/*--------------footer-------------------------*/

#colophon #supplementary .widget-area {
    float: none;
    margin-right: 0;
    width: auto;
  }
#menu_demeter{
	position: relative;
	top: 0px;
	left: 0px;
  width: 100px;
}

#menu-demeter img{
float: left;
width: 100px;
}

#supplementary{
  width: 100%;
  clear: both;
}

  #supplementary li {
  font-size: 8px;
  padding: 0px 2px !important;  
  }
  #supplementary ul {
  padding-left: 0px !important;
  max-width: 100%;
  }
  #supplementary a {
  font-size: 70%;
  }

}

/*--------------------------------------- Smartphones et tablettes( 481 à 767 pixels ) ---------------------------------- */

@media screen and (min-width: 481px) and (max-width: 767px) and (orientation: landscape){
  html{
    -webkit-text-size-adjust:100%;
  }
}
@media screen and (min-width: 481px) and (max-width : 767px) {

*{
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/*----passer le body et tous les elements de largeur fixe en largeur automatique--*/
body {
width:auto;
margin: 0;
padding: 0;
}

/*-----fixer une largeur maximale de 100% aux éléments potentiellement problématiques---*/
img,table,td,blockquote,code,pre,textarea,input,iframe,object,embed,video{
  max-width: 100%;
}

/*---conserver les ratios des images---*/
img{
  height: auto;
}

/*----gestion des mots longs-----*/
textarea,table,td,th,code,pre,samp{
  -webkit-hyphens:auto;  /*césure propre*/
  -moz-hyphens:auto;
  hyphens:auto;
  word-wrap:break-word; /*passage à la ligne forcée*/
}

code,pre,samp{
  white-space: pre-wrap;  /*passage à la ligne spécifiquepour les éléments à chassis fixe*/
}

/*masquer les éléments superflus*/
.hide_mobile{
  display: none !important;
}

/*un message personnalisé*/
body:before{
  content: "Version mobile du site";
  display: block;
  text-align: center;
  font-style: italic;
  color: #777;
}

  
  #main #content {
  margin: 0 7.6%;
  width: auto;
  }
  #page {
  max-width:100%; 
  }

  /*----------------header----------------*/

  #logo_mabd img{
  width:100px !important;
  }
  #logo_mabd{
  width:110px;
  height: 90px;
  }
  #branding #s {
  margin-top:70px;
  font-size: 11px;
  width: 108px;  
  }
  #loupe img{
  width: 15px;
  height:15px;
  top: 75px!important;
  }
  #menu-header {
  left:90px !important;
  }
  #menu-header a{
  font-size:12px !important;
  }
  #news_box {
  left: 175px !important;
  font-size:11px !important;
  width: 205px !important; 
  }
  #bouton_insc {
  margin-left: 115px !important;
  width: 70px !important; 
  }
  #access {
  margin:0 auto 6px !important;
  }
  #access div {
  margin: 0px !important;
  }
  #access ul {
  font-size:12px;
  }
  #access li {
  margin-top: 2px; 
  padding: 0px 10px !important; 
  }
  #access a {
  line-height: 25px;
  }
/*----------------------content----------------*/

  .left-sidebar #primary {
  width: 57%;
  float: right;
  }

  .left-sidebar #secondary{
    float: left;
    margin-left: 10%;
    margin-top: 5%;
    width: 40%;
  }

  p {
  font-size:100%!important;
  }
  .entry-title {
  font-size:22px;
  }
  #ariane {
  font-size:12px!important;
  left: 47% !important;
  }
  #ariane a{
  font-size:13px!important;
  }

  #menu-lateral {
  float: left;
  position: relative;
  left: -55px !important;
  width: 100% !important; 
  }
  #menu-lateral a {
  font-size:14px !important;
  }
  #menu-lateral li{
  font-size: 11px !important; 
  padding-left: 10px !important; 
  }
  #slide_publi, #slide_forma, #slide_agenda {
  width:150px!important;
  }
  #img_publi, #img_agenda {
  padding-left: 10px !important; 
  }
  #IRHolder a{
  font-size:10px !important;
  }

  #livres img, #calendrier img, #revues img, #doc img {
  margin: 0 0 0 50px !important;
  width: 140px !important;
  }
  #livres, #calendrier, #revues, #doc {
  width: 240px !important;
  margin-bottom: 10px !important;
  }
  #calendrier, #revues {
  margin-left: 30px; 
  }
  #livres h3, #calendrier h3, #revues h3, #doc h3 {
  font-size: 14px!important;
  }
    #publi_a, #form_a, #agend_a{
    font-size: 14px !important;
  }
  h4{
    font-size: 15px;
  }
  .text_publi {
  padding:0px 105px 0px 10px!important;
  width:350px!important;
  }
  .text_publi p {
  font-size: 10.8px !important;
  }
  .img_publi img{
  width:120px !important;
  }
  
  #rens, #comm {
    width: 250px !important;
  }
  #contact-form {
  width:100%;
  padding: 10px 0px;
  float: left;
  }
  #site-title a {
    font-size: 22px;
  }
  #site-description {
    font-size: 12px;
  }

  #forma_jard, #forma_conso, #forma_pro, #forma_qualif, #forma_diplo, #forma_sem, #forma_otre {
    clear: both;
    margin: 5px;
    width: 215px; 
  }
    #forma_jard img, #forma_conso img, #forma_pro img, #forma_qualif img, #forma_diplo img, #forma_sem img, #forma_otre img {
    margin: 5px;
  }
  article.intro .entry-content {
    font-size: 12px;
  }
  .entry-title {
    font-size: 21px;
  }
  .featured-post .entry-title {
    font-size: 14px;
  }
  .singular .entry-title {
    font-size: 28px;
  }
  .entry-meta {
    font-size: 12px;
  }
  blockquote {
    margin: 0;
  }
  blockquote.pull {
    font-size: 17px;
  }
  /* Reposition the site title and description slightly */
  #site-title {
    padding: 5.30625em 0 0;
  }
  #site-title,
  #site-description {
    margin-right: 0;
  }
  /* Make sure the logo and search form don't collide */
  #branding #searchform {
    top: 1.625em !important;
  }
  /* Floated content doesn't work well at this size */
  .alignleft,
  .alignright {
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
  /* Make sure the post-post navigation doesn't collide with anything */
  #nav-single {
    display: block;
    position: static;
  }
  .singular .hentry {
    padding: 1.625em 0 0;
  }
  .singular.page .hentry {
    padding: 1.625em 0 0;
  }
  /* Talking avatars take up too much room at this size */
  .commentlist > li.comment,
  .commentlist > li.pingback {
    margin-left: 0 !important;
  }
  .commentlist .avatar {
    background: transparent;
    display: block;
    padding: 0;
    position: static;
  }
  .commentlist .children .avatar {
    background: none;
    left: 2.2em;
    padding: 0;
    position: absolute;
    top: 2.2em;
  }
  /* Use the available space in the smaller comment form */
  #respond input[type="text"] {
    width: 95%;
  }
  #respond .comment-form-author .required,
  #respond .comment-form-email .required {
    left: 95%;
  }
  #content .gallery-columns-3 .gallery-item {
    width: 31%;
    padding-right: 2%;
  }
  #content .gallery-columns-3 .gallery-item img {
    width: 100%;
    height: auto;
  }
  .vignette_1, .vignette_2, .vignette_3, .vignette_4{
    width: 252px;
    margin: 5px;
    left: 5px;
  }
    .vignette_1 img, .vignette_2 img, .vignette_3 img, .vignette_4 img{
    width: 185px;
    margin: 14px 0px 46px 39px;
  }
   .bouton_publi-1{
    position: relative;
    width: 10px;
    height: 15px;
    padding: 0px 4px;
    right: -2px;
    bottom: -20px;
  }
  .bouton_publi-2{
    position: relative;
    width: 10px;
    height: 15px;
     padding: 0px 4px;
    left: 155px;
  }
    .ptitencadre{
    margin-left: -143px;
  }
  #map-google{
    width: 100%;
  }
    #canvas_france{
    width: 100%;
  }
/*---------------footer---------------------*/
#colophon #supplementary .widget-area {
    float: none;
    margin-right: 0;
    width: auto;
  }  
#menu_demeter{
  position: relative;
  left: 10px;
  top: 0px;
  left: 0px;
  width: 100px;
}


#menu-demeter img{
float: left;
width: 100px;
}
#supplementary{
  width: 100%;
}
  #supplementary li {
  font-size: 13px;
  padding: 0px 7px !important;  
  }
  #supplementary ul {
  padding-left: 0px !important;
  }
  #supplementary a {
  font-size: 70%;
  }

}

/* ----------------------------------Tablettes à petits écrans ( 768 à 1024 pixels ) --------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1170px) and (orientation: landscape){
  html{
    -webkit-text-size-adjust:100%;
    max-width: 100%;
  }
}
@media screen and (min-width : 768px) and (max-width : 1170px) {

*{
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/*----passer le body et tous les elements de largeur fixe en largeur automatique--*/
body {
width:auto;
margin: 0;
padding: 0;
}

/*-----fixer une largeur maximale de 100% aux éléments potentiellement problématiques---*/
img,table,td,blockquote,code,pre,textarea,input,iframe,object,embed,video{
  max-width: 100%;
}

/*---conserver les ratios des images---*/
img{
  height: auto;
}

/*----gestion des mots longs-----*/
textarea,table,td,th,code,pre,samp{
  -webkit-hyphens:auto;  /*césure propre*/
  -moz-hyphens:auto;
  hyphens:auto;
  word-wrap:break-word; /*passage à la ligne forcée*/
}

code,pre,samp{
  white-space: pre-wrap;  /*passage à la ligne spécifiquepour les éléments à chassis fixe*/
}

/*masquer les éléments superflus*/
.hide_mobile{
  display: none !important;
}

/*un message personnalisé*/
body:before{
  content: "Version mobile du site";
  display: block;
  text-align: center;
  font-style: italic;
  color: #777;
}

#main #content {
  margin: 0 7.6%;
  width: auto;
  }
  #page {
  max-width: 700px; 
  float: right; 
  }

  /*------------------header--------------*/

  #logo_mabd img{
  width:100px !important;
  }
  #logo_mabd{
  width:110px;
  height: 90px;
  }
  #branding #s {
  margin-top:-70px;
  width: 100px;
  font-size: 10px;
  }
  #loupe img{
  width: 15px;
  height:15px;
  top: -65px!important;
  }
  #menu-header {
  left:90px !important;
  }
  #menu-header a{
  font-size:13px !important;
  }
  #news_box {
  left:320px !important;
  font-size:12px !important;
  width: 270px !important; 
  }
  #name_user {
  margin-left: 0px!important;
  margin-right:13px;
  }
  #bouton_insc {
  margin-left: 145px !important;
  }
  #access {
  margin:0 auto 6px !important;
  }
  #access div {
  margin: 0px !important;
  }
  #access ul {
  font-size:15px;
  }

  /*----------------content---------------*/

  .left-sidebar #primary {
  width: 75%;
  float: right;
  }

  .left-sidebar #secondary {
    float:none;
    margin-left: 26%;
    width: 70%;
  }

  p {
  font-size:85%!important;
  }
  .entry-title {
  font-size:24px;
  }
  #ariane {
  font-size:13px!important;
  left:220px!important;
  }
  #ariane a{
  font-size:13px!important;
  }
  #menu-lateral {
  left: -180px !important;
  }
  #slide_publi, #slide_forma, #slide_agenda {
  width:150px!important;
  }
  #img_publi, #img_agenda {
  padding-left: 10px !important; 
  }
  #IRHolder a{
  font-size:10px !important;
  }
  #livres img, #calendrier img, #revues img, #doc img {
  margin: 0 0 0 50px !important;
  width: 140px !important;
  }
  #livres, #calendrier, #revues, #doc {
  width: 240px !important;
  }
  #livres h3, #calendrier h3, #revues h3, #doc h3 {
  font-size: 14px!important;
  }
  #publi_a, #form_a, #agend_a{
    font-size: 14px !important;
  }
  .text_publi {
  padding:0px 0px 0px 10px!important;
  width:350px!important;
  }
  .text_publi p {
  font-size: 10.8px !important;
  }
  .img_publi img{
  width:120px !important;
  }
  
  #rens, #comm {
    width: 250px !important;
  }  
  #forma_jard, #forma_conso, #forma_pro, #forma_qualif, #forma_diplo, #forma_sem, #forma_otre {
    margin: 5px;
}

  #contact-form {
  width:475px!important;
  }
  #nav-below {
    border-bottom: 1px solid #ddd;
    margin-bottom: 1.625em;
  }
  #images_contact {
    padding-left: 0px !important;
    width: 150px !important; 
  }

  /* Simplify the showcase template */
  .page-template-showcase-php .featured-posts {
    min-height: 280px;
  }
  .featured-posts section.featured-post {
    height: auto;
  }
  .page-template-showcase-php section.recent-posts {
    float: none;
    margin: 0;
    width: 100%;
  }
  .page-template-showcase-php #main .widget-area {
    float: none;
    margin: 0;
    width: auto;
  }
  .page-template-showcase-php .other-recent-posts {
    border-bottom: 1px solid #ddd;
  }
  /* Simplify the showcase template when small feature */
  section.featured-post .attachment-small-feature,
  .one-column section.featured-post .attachment-small-feature {
    border: none;
    display: block;
    float: left;
    height: auto;
    margin: 0.625em auto 1.025em;
    max-width: 30%;
    position: static;
  }
  article.feature-image.small {
    float: right;
    margin: 0 0 1.625em;
    width: 64%;
  }
  .one-column article.feature-image.small .entry-summary {
    height: auto;
  }
  article.feature-image.small .entry-summary p a {
    left: 0;
    padding-left: 20px;
    padding-right: 20px;
    width: auto;
  }
  /* Remove the margin on singular articles */
  .singular .entry-header,
  .singular .entry-content,
  .singular footer.entry-meta,
  .singular #comments-title {
    width: 100%;
  }
  /* Simplify the pullquotes and pull styles */
  .singular blockquote.pull {
    margin: 0 0 1.625em;
  }
  .singular .pull.alignleft {
    margin: 0 1.625em 0 0;
  }
  .singular .pull.alignright {
    margin: 0 0 0 1.625em;
  }
  .singular .entry-meta .edit-link a {
    left: 0;
    position: absolute;
    top: 40px;
  }
  .singular #author-info {
    margin: 2.2em -8.8% 0;
    padding: 20px 8.8%;
  }
  /* Make sure we have room for our comment avatars */
  .commentlist {
    width: 100%;
  }
  .commentlist > li.comment,
  .commentlist .pingback {
    margin-left: 102px;
    width: auto;
  }
  /* And a full-width comment form */
  #respond {
    width: auto;
  }

  /* No need to float 404 widgets at this size */
  .error404 #main .widget {
    float: none;
    margin-right: 0;
    width: auto;
  } 
  .bouton_publi-1, .bouton_publi-2{
    height: 17px !important;
  }
   #forma_jard img, #forma_conso img, #forma_pro img, #forma_qualif img, #forma_diplo img, #forma_sem img, #forma_otre img {
    margin: 5px;
    height: 220px;
  }
    #canvas_france{
    width: 100%;
  }

/*---------------footer------------------------*/

  /* No need to float footer widgets at this size */
  #colophon #supplementary .widget-area {
    float: none;
    margin-right: 0;
    width: auto;
  }
  #menu_demeter{
    left: 25px;
  }
  #supplementary ul {
  padding-left: 20px !important;
  }
    #supplementary li {
  font-size: 13px;
  padding: 0px 7px !important;  
  }
  #supplementary a {
  font-size: 80%;
  }
#menu-demeter img{
float: left;
width: 100px;
}
#supplementary{
  width: 100%;
}

}