/* Photo uniquement sur mode paysage et menu flottant */	
@media only screen and (orientation:landscape)
{

div.pag1:after {
    content: "";
      	background-image: url("/album/saisons/automne/fleurs/slides/Aster%20an%C3%A9mones%20et%20hortensia.JPG");
        background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;   
 }
.button-link {
    text-decoration:none;
    min-height:30px;
    padding: 10px 15px;
    background: white;
    opacity:0.8;
    color: black;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
   }
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
   }
.titre       {
    float:left;
    height:100%;
    text-decoration:none;
    display:inline-block;
    vertical-align:middle;
    background: white;
    opacity:0.7;
    color: black;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);

   }


/* paragraphe flottant */
p.flottant
 {
  text-align:center;
  float:left;
  }
}

  
@media only screen and (max-width: 1024px)
{
div.pag1 {
    text-align:center;
    width:100%;
    }   
p.flottant
 {
    clear:both;  
    text-align:center;

  }
.button-link {
    text-decoration:none;
    padding: 3px 5px;
    background: light-blue;
    opacity:0.6;
    color: black;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  }
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
  }
}

.pied
	{
        clear: both;
 	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	margin-top: 10px;
	color:black;
	background-color:yellow;
	opacity:0.5;
	text-align: center;
	padding:3px 5px;
	
	}
/* comment of all images */
.comment {
  color: black;
  font-size: 80%;
  font-style: italic;
  background-color: #FDFFE9 ;
  margin-right:10%;
  margin-left:10%;
  text-align:center;
  padding-top:1px;
  padding-bottom:1px;
  padding-right:1px;
  padding-left:1px;
}
/* mots en gras dans le texte */

.gras {font-size: 110% ; color: #008000}

/* mise en valeur : cadre de 5 pixels bleu et jaune */
.c5  {text-align : center ;
       font-style : italic ;
       text-decoration : none;
       border-width: 5px 5px 5px 5px;
       border-style: solid;
       padding:2px 2px 2px 2px ;
       color:blue;
       background-color: yellow;
       font-size : 80%
         }

/* paragraphe mise en valeur tres reduit */
p.c2 { color:red; 
       font-size:70%;
       text-align:left;
         }