/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Mar 3, 2014, 7:04:48 PM
    Author     : HP_Administrator
*/
html, body {
  margin: 0;
  border: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* This prevents two scroll bars from appearing when the browser width is shrunk to minimum. */
}
#menu-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;  /* This is changed in code */
  height: 100%;
  margin-left: 5px;
  margin-right: 5px;
  overflow-y: auto;
  scrollbar-color: gray green;
}
#separator {
  position: absolute;
  left: 205px; /* This is changed in code */
  background-color: gray;
  height:100%;
  width: 3px;
  cursor: col-resize;
  touch-action: none;
}

#photo-or-search-container {
  position: absolute;
  right: 0;
  left: 210px;  /* This is changed in code */
  top: 0;
  bottom: 0;
  overflow-y: auto;  /* only this scrolls */
  scrollbar-color: gray green;
  display: flex;
  flex-direction: column;
}
#photo-container, #find-container {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
}
.photo-wrapper {
  position: relative;
  display: block;
}

#spin-holder {
  position: absolute;
  height: 40px;
  width: 130px;
  margin: auto;
  top: 90%;
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden; /* This is toggled in code */
  background-color: gray;
  border-radius: 5px;
}
img#spinner {
  margin-top: 2px; /* Needed due to the image attached to the top left corner of spin-holder */
  margin-left: 5px;
  vertical-align: middle;
  animation: spinner-rotate;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: paused;
  -webkit-animation: spinner-rotate;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-play-state: paused;
}
#spin-text {
  margin-left: 5px;
  color: white;
  vertical-align: middle;
}
@keyframes spinner-rotate{
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
@-webkit-keyframes spinner-rotate{
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}

img#crest {
  margin-top: 5px;
}
img#photo {
  margin-top: 5px;
  max-width: 99%; /* A margin to the right of the photo. */
  max-height: 95%;
  margin-left: 3px;
  margin-right: 5px;
}
caption { 
  color: #ffcc00;
}
#nameTags, #contributor {
/*  font-family: monospace;
  font-size: small; */
  margin-right: 1%;
}

#nameTags > i.l-r {
  color: #ffcc00;
}
#contributor {
  font-style: italic;
}
.text-indent {
  margin-left: 3%;
}
.grad {
  color: #00ff00;
}