#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; }