/* #atBox is a white on black box for visually impaired people at the top */
#atBox {
  border:3px solid black;
  padding:.3em;
  -moz-border-radius:  5px;border-radius: 5px;
  color:white;
  background-color:black;
}
#atBox ul {
  list-style-type:none 
}  
#atBox li {
  color:white;
  background-color:black;
}
#atBox h2{
  font-size:180%;
  font-weight:bold;
  border: 1px solid white;
  border-radius:5px;
  background-color:black;
  color:white;
  text-align:center;
  margin:5px 3em;
}
#atBox input{
  color:black;
}

.alert{
  color:yellow;
  background-color:red;
}  

div.tempAlert{
  font-size:150%;
  font-weight:bold;
  background-color:rgb(153, 194, 153);
  border: 1px solid white;
  border-radius:5px;
  padding-left:2em;

}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Don't go here for VI and SR */
.notSuitable{
  color:yellow;
  font-weight:bold;
  background-color:red;
  border: 2px solid black;
  padding:0px 1em;
}
.isSuitable{
  color:lime;
  font-weight:bold;
  background-color:black;
  border: 2px solid lime;
  padding:0px 1em;
}

h3 {
  margin-top:1em;
}  


/* IMAGES NEED TO BE CONSTRAINED */
#spines {
  max-height:200px;
  max-width:800px;
  width:100%;
}  

/* format images need scaling down */
.formatImg {
  width:100px;
}

#msFace {
  width:25%;
  min-width:100px;
  max-width:400px;
}  

div.toListing {
  margin: 2px 2em 1em;
}
  



/* footer at bottom */
#footer{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:#dddddd;
  color:black;
  text-align:center;
}