/********* home page index.php ********/



div.news
{
  margin: 5px;
  padding: 5px;
  background: #fda;
  color: #600;
}

div.buttonpanel { margin-top: 20px }

div.buttonpanel a.button
{
  display: inline-block;
  vertical-align: top;
  width: 25%;
  color: black;
  text-decoration: none;
  margin: 5px;
  height: 40px;
  padding: 10px 20px;
  text-align: center;
  border-radius: 5px;
}


a.button.category
{
  background: #ddf;
  background: linear-gradient(#eef,#ccf);
}

a.button.category:hover
{
  background: linear-gradient(#f8f8ff, #ddf);
}

a.button.link
{
  background: #dfd;
  background: linear-gradient(#efe,#beb);
}
a.button.link:hover
{
  background: linear-gradient(#f8fff8,#dfd);
}

a.button.listall
{
  background: #99f;
  background: linear-gradient(#ccf,#aae);
}
a.button.listall:hover
{
  background: #aaf;
  background: linear-gradient(#ddf,#bbf);
}

div.searchbox
{
  display: inline-block;
  vertical-align: top;
  width: 59%;
  color: black;
  text-decoration: none;
  background: #fc9;
  background: linear-gradient(#feb,#fc9);
  margin: 5px;
  height: max-content;
  padding: 0 5px;
  text-align: left;
  border-radius: 5px;
}

div.searchlabel
{
  display: inline-block;
  white-space: nowrap;
}

div.searchbox form
{
  margin: 10px 0;
}

@media screen and (max-width: 700px)
{
  div.buttonpanel a.button
  {
    font-size: 90%;
    padding: 5px;
    width: 45%;
    height: 30px;
  }

  div.searchbox
  {
    width: 90%;
    font-size: 90%;
  }
}

@media screen and (max-width: 500px)
{
  div.buttonpanel a.button, div.searchbox
  {
    height: max-content;
    width: 90%;
  }
}

img.fblogo 
{
  width: 32px; 
  vertical-align: middle 
}