/***************
TABLET LAYOUT 
***************/
@media only screen and (min-width:769px) and (max-width:1000px) {
 body {
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: inherit;/*auto*/
    overflow : -moz-scrollbars-vertical; 

  }

a.trigger{
right: 10px;
}

a.trigger:hover{
right: 10px;
}

#nav{
  padding: 0px;
  margin: 70px 0 0 0px;
  font-size: 14px; 
  }
   
.page{min-width:769px;max-width:1000px;width:90%;margin:10px 0px 0 10px;}

.bo{  
  margin:10px;/*0 auto pr centrer*/
  padding:0px;/* 780+20+80=880*/
}

header{ 
  max-width: 620px;
  padding:0;
  line-height:1.4em;
}

.insinde {max-width:620px;
 padding:0;
  margin:0px; /*40px 100*/
 }

.biblio p{
  max-width: 600px;
  margin: 0px;
  padding: 0px;/*10*/

}


.vide{height:0;}    
}

/***************
MEDIUM TABLET LAYOUT 
***************/
@media only screen and (min-width:481px) and (max-width:768px) {


  body {
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: inherit;/*auto*/
    overflow : -moz-scrollbars-vertical; 

  }


a.trigger{
right: 10px;
}

a.trigger:hover{
right: 10px;
}

#nav{
  padding: 0px;
  margin: 70px 0 0 0px;
  font-size: 14px; 
  }

 img {
  border: 0;/*m*/
  max-width:100%!important;/*m*/
  -ms-interpolation-mode: bicubic; 
  vertical-align: middle;
}

.page{min-width:481px;max-width:768px;width:90%;margin:10px 0px 0 10px;}

.bo{  
  margin:10px;/*0 auto pr centrer*/
  padding:0px;/* 780+20+80=880*/
}

header{ 
  max-width: 500px;
  padding:0;
  line-height:1.4em;
}

.insinde {
 max-width:490px;
 padding:0;
margin:0px; /*40px 100*/
 }

.biblio p{
  max-width: 480px;
  margin: 0px;
  padding: 0px;/*10*/
}


.vide{height:0;}    
}

/***************
MOBILE LAYOUT 
***************/
@media only screen and (max-width:480px) {

/*disable text sizing on orientation change*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
  -webkit-text-size-adjust:none;
}

body {
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: inherit;/*auto*/
    overflow : -moz-scrollbars-vertical; 

  }

* {
  margin: 0;
  padding: 0;
  font-size: 16px;
  
}
header {
  max-width: 300px;
  margin-top:10px;
  padding:0;
  line-height:1.4em;
}
header h1{

  letter-spacing: 1px;
  font-size: 19px;
}

img {
  border: 0;/*m*/
  max-width:100%!important;/*m*/
  -ms-interpolation-mode: bicubic; 
  vertical-align: middle;
}

.footerBook{
left:10px;
bottom:0px; 
font-size:1.5em;
}

.footerBook a{
font-size:1.5em;
}

a:link {font-size:1.1em;padding:1px;} 
a:visited {font-size:1.1em;} 
a:hover { font-size:1.1em;}

a.trigger{
position: fixed;
/*position: absolute;*/
top: 10px; 
right: 0px;
width:100px;
height:100px;
background: url(../interface/bebHover_sm.png) no-repeat;
}

a.trigger:hover{
top: 10px; 
right: 0px;
background: url(../interface/bebdeum_sm.png) no-repeat;
}

a.active.trigger {
background:url(../interface/bebMenu_sm.png) no-repeat;
}

#nav {
  margin: 20px 0 0 0px;
  padding: 0px;
  width:310px;
        
}
   
.page{max-width:480px;width:90%;margin:5px 0px 0 0px;}

.bo{  
 width:85%;
}

.insinde {
  width:85%;
 }

.insinde p{font-size:1.4em;}

.biblio{ 
  width:85%;
  height:85%;
  margin:0px; 
}

.biblio p{
  margin: 0px;
  padding: 0px;/*10*/
  color:#000;
}

img.floatRight {
    display:block;
    float:none;
    padding:10px;
    margin:0 auto;/*centrer*/
    
  }

.vide{height:0;}
.beb {left:10px; max-width: 230px;}
}