photo-finished/CSS/GameLayout.css

#Container
{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1000px;
  height: 800px;
  background-color: black;
}


#Logo
{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100px;
  height: 100px;
  background-image: url("../Images/LogoBG.png");
}

#Banner
{
  position: absolute;
  right: 0px;
  top: 0px;
  width: 900px;
  height: 100px;
  background-image: url("../Images/BannerBG.png");
}

#FeedbackArea
{
  position: absolute;
  left: 0px;
  top: 100px;
  width: 700px;
  height: 400px;
  overflow-y: auto;
  background-image: url("../Images/FeedbackBG.png");
  color: white;
}

#NotepadArea
{
  position: absolute;
  right: 0px;
  top: 100px;
  width: 300px;
  height: 400px;
  font-family: "Lucida Console", "Courier New", Courier, Arial, sans-serif;
  background-color: white;
}

/* This section shows a map of the area in boxes */

#MapArea
{
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 700px;
  height: 300px;
  background-image: url("../Images/MapBG.png");
}

.MapRoomUnvisited
{
  background-color: darkgreen;
  border: 1px solid limegreen;
}

.MapRoomVisited
{
  background-color: limegreen;
  border: 1px solid darkgreen;
}

.MapRoomVisited:hover
{
  background-color: red;
  cursor: pointer;
}

#SuspectArea
{
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 300px;
  height: 300px;
  text-align: center;
  background-image: url("../Images/SuspectBG.png");
  color: white;
}

/* Links to each individual room */
.RoomLink
{
  background-color: limegreen;
  color: black;
}

.RoomLink:hover
{
  background-color: red;
  color: black;
  cursor: pointer;
}

/* Links to each individual clue */
.ClueLink
{
  background-color: darkblue;
}

.ClueLink:hover
{
  background-color: red;
  color: black;
  cursor: pointer;
}

.AnswerLink
{
  color: white;
  cursor: pointer;
}

.AnswerLink:hover
{
  color: red;
  cursor: pointer;
}

.CorrectAnswer
{
  background-color: limegreen;
  color: black;
}

.WrongAnswer
{
  background-color: red;
  color: black;
}

.Inform
{
  background-color: black;
  color: white;
}

img.LogoImage
{
  margin: 15px;
}