/*
   default desktop width = 920px - 980px
   
   10"-landscape = default CSS (1280px)
   iPad-landscape = default CSS (1024px)
   7"-landscape = default CSS (1024px)

   09.01.18: This file needs a rewrite
   1. mobile first MQs
   2. move all MQs to associated definitions in style.css
   3. delete this file

*/



/* [1] 10"-portrait; iPad-portrait */ 
@media (max-width: 800px) {

  /* header { background: red !important; } */
  
  hgroup h1 { width: 90%; }
  #reader hgroup h1 span { margin: 15px 120px 0 0; }
  .fixed #page article { width: 95%; }
  
  .featuredbox a img.homepageimg { width: 120px; }

  #homeleft p { padding: 0 18px 0 0; text-align: justify; }
  #homeright div { padding: 0 0 0 12px; }
  
  .resultsData b { display: block; text-align: center; }
  
  #bookmarklistbox, .isDT #bookmarklistbox { height: auto; }
  
  .jqmWindow {
    top: 20px;
    left: 10%;
    margin-left: 0;
    margin-top: 0;
    width: 80%;
    height: auto;
  }

  .modalInterior {
    margin: 20px 12px;
    width: auto;
    height: auto;
  }
  
  .modalCopy {
    height: auto;
  }
}




/* [2] 7"-portrait 'loose' */
@media (max-width: 700px) {

  /* header { background: blue !important; } */

  #navgroup nav { width: 99%; }
  /* #navgroup nav .button2#navhomelink { display: none; }
  #navgroup nav .button2 { width: 23%; } */
  #navgroup nav .button2 { width: 18%; }
  
  .featuredbox a img.homepageimg { width: 100px; }

  #homeleft, #homeright, #homecenter { float: none; width: 100%; }
  #homeleft { padding: 0; }
  #homecenter img { margin: 10px auto; width: 40%; }

  .hrbookshelf p { font-size: 110%; }
  .hrbookshelf p span { width: 90px; }
  .hrbookshelf .dtitle { font-size: 150%; }
  .startreadingbtn { width: 80%; }
  
  #reader #page .imgctr,
  #reader #page .imgrt,
  #reader #page .imgright,
  #reader #page .imgleft,
  #reader #page .imglt, .imgctr { width: 90%; height: auto; overflow: hidden; }

}


/* [i1] 7" portrait strict -  */
@media (max-width: 600px) {

  /* header { background: green !important; } */

}


/* [3] smartphone-landscape */
@media (max-width: 480px) {

  /* header { background: gold !important; } */
  
  #featuredLinks a { margin: 0 0 20px; }

  #navgroup nav .button2#navhomelink { display: none; }
  #navgroup nav .button2 { width: 23%; }

  hgroup h1 { width: 75%; }
  #reader hgroup h1 { font-size: 210%; }
  #reader hgroup h1 a { margin: 0 auto; max-width: 140px; }
  
  .featuredbox a img.homepageimg { width: 140px; }

  #reader .box { 
    right: 2px;
    left: 2px;
    width: auto; /* 330px; */
    height: auto; 
  }
  #reader .box > div > ul li { display: block; }
  #reader .box > div > ul li:last-child { margin: 5px 0 0 0; }
  #reader .box .button5 { width: 100%; }
  #reader .box .button4 { width: 49%; }
  #reader .box #bkmkbtn { width: 100%; }
  #printbtn { display: none; }
  #reader .box .button3 { width: 32%; }
  #bookpgMeta .hrbookshelf p span { display: none; }
  #bookpgMeta .hrbookshelf p.dtitle a { width: 100%; }

  #prefsbox.box > div > ul li span { display: block; text-align: left; font-weight: bold; }

  #reader #page .imgctr img,
  #reader #page .imgrt img,
  #reader #page .imgright img,
  #reader #page .imgleft img,
  #reader #page .imglt img, .imgctr img { width: 100%; height: auto; }
  
  #searchInput { width: 90%; }
  
  #bkmkSteps li img { width: 95%; height: auto; }

}



/* [4] smartphone-portrait */
@media (max-width: 320px) {

  /* header { background: orange !important; } */

  #homeleft #contactUsBox { width: 95% !important; }
  #homeleft #contactUsBox > div { width: 100% !important; }
  
  #bookmarklist li { font-size: 90% }
  #bookmarklist li p span  { width: 50%; }
  #bookmarkButtons { text-align: center; }
  #bookmarkButtons #cacheClean,
  #bookmarkButtons #bookmarkDelete { 
    float: none; 
    margin: 0 auto 12px;
  }

  #about p { text-align: justify; }
  #about footer p { text-align: center; }

  #reader hgroup h1 { font-size: 180%; font-weight: bold; }
  #reader hgroup h1 a {  }
  .navgroup { display: block !important; }
  #homebanner { padding: 10px; }
  #bannertext > div, #bannertext h2 { padding: 0; }
  
  #reader .box { width: 98%; }
  #toolsbox { padding: 60px 0 0 0; }

  #browseleft, #browseright { float: none; margin: 0 auto 32px auto; width: 90%; }

  .hrbookshelf .imgbox, .hrbookshelf .databox { float: none; width: 100%; }
  
  footer p { font-size: 90%; }
}