@import "../general.css";

/* General formatting */
body {
  background-color: #dbdbdb;
}
#background {
  background-image: url("background.jpg");
  background-position-x: center;
  background-position-y: bottom;

  position:absolute;
  top: 0; bottom:0; left: 0; right: 0;
}
#background .screen {
  position: absolute;
  left: 110px; right: 110px;
  top: 0; bottom: 0;
  background: rgba(255,255,255,0.65);
}
#side-border div {
  position: absolute;
}
#side-border .left, #side-border .right {
  position: absolute;
  width: 100px;
  height: 100%;
  top: 0px;
  background-repeat: repeat-y;
  background-position: 0px 120px;
}
#side-border .left {
  left: 0;
  background-image: url('border-left.png');
}
#side-border .right {
  right: 0;
  background-image: url('border-right.png');
}
#bottom-border {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 65px;
  background: url("border-bottom.png") bottom center repeat-x;
}

#main {
  padding: 10px 110px 60px 110px;
  position: relative; /* put #main in z-order */
}
.index #main {
  padding-top: 470px;
}

/* Show page formatting */
body.index { 
  min-width: 1055px;
}
#index-image {
  position: absolute;
  top: 15px;
  left: 50%;
  margin-left: -400px;
}
#index-image, #index-image > img {
  display: block;
  width: 800px; height: 455px;
  border: none;
}
#index-image > * {
  position: absolute; top: 0; left: 0;
}

#puzzle-list .num { width: 85px; text-align: right; padding-right: 4px; }
#puzzle-list a {
display: block;
/* a little bit of space on right */
padding-right: 3px;
/* overlap on top of .num field and put icon there. */
margin-left: -85px; padding-left: 85px;
background: url('icon.png') no-repeat;
padding-top: 20px;
height: 42px; /* 62px minus the padding */
white-space: nowrap;
}
#puzzle-list a.unsolved {
background-image: url('icon-unsolved.png');
}

/* puzzle page formatting */
body.puzzle {
  min-width: 800px;
}
#show-title { top: 0; }
#show-title .title {
  width: 800px; left: -400px; /* centered */
  height: 177px;
  background: url('banner.png') no-repeat;
}
.puzzle #main {
  padding-top: 177px;
}
#link {
  left: 325px; top: 155px;
}
.ptitle {
  position: relative; /* put in front of banner */
  z-index: 99;        /* put in front of banner */
  height: 87px;
  background: url('divider.png') no-repeat;
  padding: 36px 0 0 95px;
  margin: -20px 0 -20px -50px;
}

#credits {
  margin-bottom: 1em;
}