.quads {
  width: 25%;
  padding: 8px;
  margin: 0px;
  display: inline-block;
  text-align: center;
  vertical-align: top;
}

.quads img {
  height: 200px;
  border: solid 1px #ccc;
}

.bookquads img {
  height: 200px;
  border: solid 1px #ccc;
}

.catalognav {
  display: inline-block; 
  width: 25%; 
  border-right: dotted 1px #ccc; 
  margin-left: 0; 
  margin-right: auto; 
  vertical-align: top; 
  padding: 8px;
}

.catalognav a {
 display: block;
 margin: 0px;
 padding: 4px 0px;
}

.catalognav a:hover {
 background-color: #eee;
 text-decoration: none;
}

.bookholder {
  display: inline-block; 
  width: 75%; 
  padding: 8px;
}

.bookholder hr {
 border-top: dotted 1px #ccc; 
 border-bottom: none;
}

.bookholder h3:first-child {
  padding-bottom: 10px;
  padding-top: 5px;
  margin-top: auto;
}

div.indent {
  margin-left: 15px;
}

div.booklisting {
 display: flex; border-top: dotted 1px #ccc;
}

@media screen and (max-width: 900px) {
  .quads {
    width: 50%;
  }
}

@media screen and (max-width: 640px) {
  .quads {
    width: 100%;
    display: block;
  }

/*
  .bookholder {
    width: 50%;
  }
  .catalognav {
    width: 50%;
  }
*/
  .bookholder {
    width: 100%;
  }

  div.booklisting {
   border: none;
  }

  .catalognav, .catalognav a {
    display: none;
  }

  #catalogplus, #catalogminus {
    cursor: pointer;
    padding: 15px;
    /* border: solid 1px #ccc; */
  }

  .catalognavmobile {
    display: block; 
    width: 100%; 
    margin-left: 0; 
    margin-right: auto; 
    vertical-align: top; 
    padding: 8px;
  }

  .catalognavmobile a {
   display: block;
   margin: 0px;
   padding: 4px 0px;
  }

}