/*A mockup of a background with two fading-in images, on at the top, and one at the bottom.*/

body {
  color: #fff;
  font-size: 1.05em;
  line-height: 150%;
  }

/*The primary box. Has an image fade in from the top.*/
.box, .message-box {
  border: 2px solid #0d0e0f;
  width: 900px;
  margin: 0 auto;
  margin-top: 5px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(rgba(28,65,75,0.5) 0, rgba(28,65,75,1) 506px, rgba(0,0,0,0) 506px), #1C4147 url("/mossgrotto_bg_820.jpg") no-repeat;
  background-size: 900px auto;
  background-position: top center;
  }
  
/*Inner box. Image fades in from the bottom.*/
.box-inner {
  min-height: 1081px; /*Keep a minimum height to prevent images from overlapping.*/
  background: linear-gradient(to top, rgba(28,65,75,0.5) 0, rgba(28,65,75,1) 575px, rgba(28,65,71,0) 575px), url("/skaiabg.png") no-repeat;
  background-size: 900px auto;
  background-position: bottom;
  padding: 5px 10px;
  }