/*
 *  Box-shadow stuff
 *  Css Tricks:     https://css-tricks.com/snippets/css/css-box-shadow/
 *  MDN Mozilla:    https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
 *  W3Conversions:  http://blog.w3conversions.com/2011/09/css3-spread-value-and-box-shadow-on-one-side-only/
 *
 *  Animation stuff
 *  MDN Mozilla:    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations
 *  MDN Mozilla:    https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
 *  CSS-Animations: https://css-animations.io/
 */
.raisedpanel {
  z-index: 100;
  background-color: #fff;
  border-radius: 10px;
  /* fine shadow, mostly at bottom, narrower on either side and fine line along top */
  box-shadow: 0px 2px 4px 2px #ccc;
  padding: 5px;
  overflow: hidden; }

.foregroundpanel {
  z-index: 500;
  border-radius: 10px;
  box-shadow: 0px 2px 4px 2px #ccc;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px; }

.slideup {
  position: relative;
  animation: slideUp 1s;
  animation-fill-mode: forwards;
  /* Leaves element where the animation ends */ }

.slidedown {
  position: relative;
  animation: slideDown 1s;
  animation-fill-mode: forwards;
  /* Leaves element where the animation ends */ }

.slideinfromleft {
  position: relative;
  animation: slidefromleft 1s; }

.slideinfromright {
  position: relative;
  animation: slidefromright 1s; }

.fadein {
  position: relative;
  animation: fadein 2s ease; }

.fadein-easeout {
  position: relative;
  animation: fadein 2s ease-out; }

/* Animations */
@keyframes slideUp {
  from {
    top: 0; }
  to {
    top: -50px; } }

@keyframes slideDown {
  from {
    top: 0; }
  to {
    top: 50px; } }

@keyframes slidefromleft {
  from {
    left: -150px; }
  to {
    left: 0; } }

@keyframes slidefromright {
  from {
    right: -150px; }
  to {
    right: 0; } }

@keyframes fadein-stepped {
  0% {
    opacity: 0; }
  25% {
    opacity: 0.1; }
  50% {
    opacity: 0.3; }
  75% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }