@import url(ajfnorml.css)

body
  {font-family: Arial, Helvetica, sans-serif;
   max-width: 1200px;
   box-sizing: border-box;}

.mugshot {float: right; width: 210px; height: 145px;}

.ajfheadr {color: white !important; background-color: purple !important;}

@media (max-width:500px)
  {.bigbox {float: left; width: 100%;}                              /* one-column format */
   .book1 {float: left; margin-left: 2%; width: auto;               /* for smartphones */
      background: linear-gradient(90deg, #eee 0%, #eee 100%);}
   .book2 {float: left; margin-left: 3%; width: auto;}
   .book3 {float: left; margin-left: 3%; width: auto;
      background: linear-gradient(90deg, #eee 0%, #eee 100%);}}

@media (min-width:501px) and (max-width:800px)
  {.smallbox {float: left; width: 100%;                             /* two-column format */
      background: linear-gradient(90deg, #eee 0%, #eee 50%,         /* for tablets */
         #fff 50%, #fff 100%);}
   .book1 {float: left; margin-left: 2%; width: 47%;}
   .book2 {float: left; margin-left: 3%; width: 47%;}
   .book3 {float: left; margin-left: 50%; width: 47%;
      background: linear-gradient(90deg, #eee 0%, #eee 100%);}}

@media (min-width:801px)                        
  {.bigbox {float: left; width: 100%;                               /* three-column format */
      background: linear-gradient(90deg, #eee 0%, #eee 33%,         /* for desktops */
      #fff 33%, #fff 66%, #eee 66%, #eee 100%);}
   .book1 {float: left; margin-left: 2%; width: 30%;}
   .book2 {float: left; margin-left: 3%; width: 30%;}
   .book3 {float: left; margin-left: 3%; width: 30%;}}

.goclear:before {clear: both;}