body
{
  margin: 0;
  padding: 15px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
body > section
{
  margin-bottom: 15px;
}
body > section:last-of-type
{
  margin-bottom: 0;
}


section#logo
{
  flex: 0 0 auto;
  align-self: center;
}
section#logo img
{
  height: 197px;
  display: block;
}


section#error
{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.5em;
}


section#viewer
{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  
  height: 100%;
}
section#viewer img#prev, section#viewer img#next
{
  flex: 0 0 auto;
  display: block;
  cursor: pointer;
}
section#viewer img#prev:hover, section#viewer img#next:hover
{
  background-color: red;
}
section#viewer div#photocontainer
{
  flex: 1 1 auto;
  margin: 0 10px;
  
  height: 100%;
}
section#viewer div#photocontainer img
{
  display: block;
  border: 1px solid black;
  box-sizing: border-box;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
}


section#thumbnails
{
  flex: 0 0 auto;
}
section#thumbnails img
{
  max-height: 100px;
  box-sizing: border-box;
  border: 1px solid black;
  margin-right: 5px;
  cursor: pointer;
}