.mobile {display: none;}
body, div, ul { margin: 0; padding: 0; }

body {  
  background-image: url("murattenue2.jpg"); background-attachment: fixed ; /*CIMG0010A murattenue2.jpg*/
  font-family: Arial, Garamond, Times, serif, sans-serif;  
  font-size: 1.1em; color : #2C273F;
}
 
.global { margin: 0 auto; max-width: 950px;  
   background-color: ivory;
  border: solid 1px lavender; border-top: none;
}

.entete img {
  display: block; width: 100%;
}

.mentions {
	font-size : 0.7em;
}

.intro {  
  text-align: center;  
  font-family: Arial, sans-serif;  
  font-size: 2em; margin: 1.5%;padding: 0;  
  font-style: italic;
  color: DarkOliveGreen;
}

.promo {  
  text-align: center;  
  font-family: Arial, sans-serif;  
  font-size: 1.5em;  margin: 0.5%;padding: 0;  
  font-style: italic;
  color: maroon;
}
p{margin-top: 0.5em;}
.margehautnul{margin-top: 0;}
.img-sensible { max-width:250px; }


#menu {  
  height: 48px;  
  background-color: moccasin;  
  border-bottom-width: 1px;  
  border-bottom-style: solid;  
  border-bottom-color: lavender;
  }

#menulangue {  
  height: 20px;  
  background-color: ivory;
  border-bottom-width: 1px;  
  border-bottom-style: solid;  
  border-bottom-color: ivory;
  margin-bottom: 0;margin-top: 0;
 }

#menulangue li {  
  float: right;  
  list-style-type: none;  
  line-height: 10px;
  padding-right: 4px;  
  padding-left: 4px;  
}
/* lignes de texte accompagnement à droite pour une image hauteur 240px */

.vertical240D { position: absolute; margin-left:400px ; margin-right: 20px; top: 50%;
               height:120px; margin-top: -60px; float: right;}

.vertical240G { position: absolute; margin-right:400px; margin-left: 20px; top: 50%;
               height:120px; margin-top: -60px; float: left;}

/*menu smartphone*/
ul.afficher, ul.masquer {height: 48px;}

/* Contenu de la page */
.contenu { position: relative; clear:both; padding: 10px; }
.contenu img { max-width: 100%; }



.articles {  
  float: left; width: 65%; 
  text-align: justify; line-height: 130%; clear: both;
}


.article2 {  
  float: left; width: 100%;
  text-align: justify; line-height: 130%; clear: both;
}

aside {  
  float: right;  
  width: 30%;
  margin: 0; margin-bottom: 6px;
  padding-top: 85px;  
  text-align: justify;
}

ul.listetiret {
    list-style-type: none; margin: 12px;
}


.fonddroit {
  background-image: url("fondpaille5.jpg");  
  list-style-type: none; line-height: 170%; 
  height: 200px;
  padding-top: 10px; padding-bottom: 0px;   padding-left: 15px;
  font-size: 0.9em; text-align: left;
 }

.fonddroit-de {
  background-image: url("fondpaille5.jpg");  
  list-style-type: none; line-height: 170%; 
  height: 200px;
  padding-top: 10px; padding-bottom: 0px;   padding-left: 15px;
  font-size: 0.8em; text-align: left;
 }
.fonddroit-adresse {
  background-image: url("fondpaille5.jpg");  
  list-style-type: none; line-height: 170%; 
  height: 200px;
  padding-top: 10px; padding-bottom: 0px;   padding-left: 15px;
  font-size: 0.9em; text-align: left;
 }


#menu li {  
  float: left;  
  list-style-type: none;  
  line-height: 28px;

}

#menu li a, #menu li a:visited {  
  display: block;  
  padding-top: 10px;  
  padding-right: 28px;  
  padding-bottom: 10px;  
  padding-left: 28px;  
  border-right-width: 1px;  
  border-right-style: solid;  
  border-right-color: lightgray;  
  font-family: Arial, sans-serif;  
  font-size: 1em;  
  font-weight: bold;  
  color: maroon;  text-shadow: 2px 0px 0px white;  
  text-decoration: none;
}

#menu li a:hover {  
  background-color: transparent;  
  background-image: -webkit-linear-gradient(silver, dimgray);
  background-image: -o-linear-gradient(silver, dimgray);
  background-image: -ms-linear-gradient(silver, dimgray);
  background-image: -moz-linear-gradient(silver, dimgray);
  background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0, silver), color-stop(1, dimgray));
  background-image: linear-gradient(silver, dimgray);  
  background-repeat: repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;  
  color: white;  text-shadow: none;
}

h1 {  
  font-family: Arial, sans-serif; margin-bottom: 0;margin-top: 0;
  font-size: 1.8em; text-align: left; 
  color: maroon;line-height: 110%; 
}

h2 {  
  font-family: Arial, sans-serif; margin-bottom: 0; 
  font-size: 1.5em; text-align: left; 
  color: maroon; margin-top: 1.5em;
}

h3 {  
  font-family: Arial, sans-serif; margin-bottom: 0; 
  font-size: 1em; text-align: left; 
  color: black;
}


.droite {  
  float: right;  
  margin-left: 10px; margin-bottom: 10px; margin-top: 10px;
}

.gauche {  
  float: left;  
  margin-right: 10px; margin-bottom: 10px; margin-top: 10px;
}
.simple {text-align: left;}

#imgcentre {  
  text-align: center;
}

.italique {font-style: italic;}

/*RESPONSIVE*/

@media only screen and (min-width: 775px) and (max-width: 959px) {
  body {background-image: none;}
#menu li a, #menu li a:visited {
  padding: 10px 15px;}
h1{font-size: 1.6em;}
h2{font-size: 1.5em;}
.intro{font-size: 1.8em;} 
.promo{font-size: 1.6em;}  
.fonddroit{font-size: 0.85em; list-style-type: circle; height: 230px;}
.fonddroit-de{list-style-type: circle; height: 235px;}
}

@media only screen and (min-width: 645px) and (max-width: 774px) {
  body {background-image: none;}
#menu li a, #menu li a:visited {
  padding: 10px 8px;
  font-size: 0.95em;}
  article{width: 60%;}
  aside{width: 34%;}
  .vertical240D, .vertical240G{height:280px; top:30%;}
h1{font-size: 1.4em;}
h2{font-size: 1.2em;}
.intro{font-size: 1.6em;}
.promo{font-size: 1.3em;}
.fonddroit{font-size: 0.8em;list-style-type: circle; height: 230px;}
.fonddroit-de{font-size: 0.75em;list-style-type: circle; height: 230px;}
}

@media only screen and (max-width: 644px) {
body {background-image: none;}
.mobile {display: block;}
#menu, #menu.masquer {height: 0;}
#menu.afficher {height: 343px;}
#menu {transition: height 1s; overflow: hidden;
       border-bottom: none; background: none;}  

#menu li {float: none; background-color: lightgray;
          background: linear-gradient(lightgray,whitesmoke);
          border-bottom: solid 1px lavender;}

#menutitre {display: block; width: 100%; line-height: 3em;
            background-color: lightsteelblue;
            background: linear-gradient(silver,gray);
            text-align: center; font: 1.1em/2.5em Arial, sans-serif;
            color: white; font-weight: bold; text-decoration: none;}

.articles, aside, .article2 {float: none; width: 100%;}
article{margin-right: 1em;}  
.vertical240D, .vertical240G{ position: relative; margin:0;}
.gauche, .droite {float:none}
h1{font-size: 1.2em;}
h2{font-size: 1.1em;}
.intro{font-size: 1.3em;} 
.promo{font-size: 1.1em;}
.fonddroit, .fonddroit-de, .fonddroit-adresse {font-size: 0.8em;
  background-image: url(""); font-style: italic; text-align: left;}
.tableliste{font-size: 0.8em;}
}