/* Page Display */

body {
	background-color: #000000;
	
	padding-top: 20px;
}

div#titleScreen {
	background-color: #440000;
}

div#page2Screen {
	background-image: url(images/backgrounds/page2.jpg);
}

div#page3Screen {
	background-image: url(images/backgrounds/page3.jpg);
}

div#page4Screen {
	background-image: url(images/backgrounds/page4.jpg);
}

div#page5Screen {
	background-image: url(images/backgrounds/page5.jpg);
}

div#page6Screen {
	background-image: url(images/backgrounds/page6.jpg);
}

div#page7Screen {
	background-image: url(images/backgrounds/page7.jpg);
}

div#page8Screen {
	background-image: url(images/backgrounds/page8.jpg);
}

div#page9Screen {
	background-image: url(images/backgrounds/page9.jpg);
}

div#page10Screen {
	background-image: url(images/backgrounds/page10.jpg);
}

div#page11Screen {
	background-image: url(images/backgrounds/page11.jpg);
}

div#page12Screen {
	background-image: url(images/backgrounds/page12.jpg);
}

div#page13Screen {
	background-image: url(images/backgrounds/page13.jpg);
}

div#page14Screen {
	background-image: url(images/backgrounds/page14.jpg);	
}

div#page15Screen {
	background-image: url(images/backgrounds/page15.jpg);	
}

div#page16Screen {
	background-image: url(images/backgrounds/page16.jpg);	
}

div#page17Screen {
	background-image: url(images/backgrounds/page17.jpg);	
}

div#page18Screen {
	background-image: url(images/backgrounds/page18.jpg);	
}

div#page19Screen {
	background-image: url(images/backgrounds/page19.jpg);	
}

div#page20Screen {
	background-image: url(images/backgrounds/page20.jpg);	
}

div#page21Screen {
	background-image: url(images/backgrounds/page21.jpg);	
}

div#page22Screen {
	background-image: url(images/backgrounds/page22.jpg);	
}

div#page23Screen {
	background-image: url(images/backgrounds/page23.jpg);	
}

div#page24Screen {
	background-image: url(images/backgrounds/page24.jpg);	
}

div#page25Screen {
	background-image: url(images/backgrounds/page25.jpg);	
}

div#page26Screen {
	background-image: url(images/backgrounds/page26.jpg);	
}

div#page27Screen {
	background-image: url(images/backgrounds/page27.jpg);	
}

div#page28Screen {
	background-image: url(images/backgrounds/page28.jpg);	
}

div#page29Screen {
	background-image: url(images/backgrounds/page29.jpg);	
}

div#page30Screen {
	background-image: url(images/backgrounds/page30.jpg);	
}

div#page31Screen {
	background-image: url(images/backgrounds/page31.jpg);	
}

div#page32Screen {
	background-image: url(images/backgrounds/page32.jpg);	
}

div#page33Screen {
	background-image: url(images/backgrounds/page33.jpg);	
}

div#page34Screen {
	background-image: url(images/backgrounds/page34.jpg);	
}

div.gameWindow {
	width: 800px;
	height: 600px;

	margin: auto;
	position: relative;
	box-shadow: 0px 0px 5px 3px #0099cc65;

	border: 3px solid #003366;
	border-radius: 1%;
	-webkit-border-radius: 1%;
	-moz-border-radius: 1%;
	-o-border-radius: 1%;
	-ms-border-radius: 1%;

	overflow: hidden;
}

/* Common Classes */

.absolute {
	position: absolute;
}

.hidden {
	display: none;
}

.noSelect {
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;

	-webkit-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
}

.pointer {
	cursor: pointer;
}

.dialogue {
	width: 80%;
	top: 70%;
	bottom: 10%;
	left: 10%;
	right: 10%;	
}

.invisiBox {
	border: 3px;
}

.input {
	width: 30px;
	height: 30px;
}

.input2 {
	width: 20px;
	height: 20px;
}

.femaleCharacter {
	bottom: 0%;
	left: 30%;

	z-index: 8;
}

.maleCharacter {
	bottom: 0%;
	left: 15%;

	z-index: 8;	
}

.choiceDoor {
	width: 100px;
	height: 270px;
}

.choiceButton {
	width: 150px;
	height: 50px;
	top: 45%;

	background-color: rgba(0,0,0,0.9);

	border: 3px solid white;
	padding: 0px 30px 30px 30px;

	z-index: 10;

	color: white;
	font-size: 70px;
	text-align: center;	
}

.leftChoice {
	left: 18%;
}

.rightChoice {
	left: 58%;
}

.highlight {
	background-color: yellow;
}

.drag {
	cursor: move;
}

/* Inventory */

div.inventory {
	width: 800px;
	height: 70px;

	background-color: #000000;

	z-index: 8;
}

div.item {
	height: 50px;
	width: 50px;

	margin-top: 10px;
	border: 3px solid #ffffff;

	z-index: 9;
}

div#item1 {
	left: 10px;
}

div#item2 {
	left: 90px;
}

div#item3 {
	left: 170px;
}

div#item4 {
	left: 250px;
}

/* Text Boxes */

div#textBox {
	background-color: rgba(0,0,0,0.9);

	padding: 10px;

	border: 5px solid #ffffff;
	border-radius: 1%;
	-webkit-border-radius: 1%;
	-moz-border-radius: 1%;
	-o-border-radius: 1%;
	-ms-border-radius: 1%;

	z-index: 9;
}

div#textBoxText {
	padding: 10px 0px 0px 10px;

	color: #ffffff;
	font-size: 20px;
	text-align: justify;

	z-index: 10;
}

/* Buttons */

div.button {
	background-color: rgba(0,0,0,0.9);

	width: 150px;
	height: 50px;

	margin: auto;

	border: 3px solid white;

	color: #ffffff;
	font-size: 24px;
	text-align: center;
	line-height: 2;

	z-index: 1;
}

div#startButton {
	top: 40%;
	left: 42%;
}

div#referencesButton {
	top: 52%;
	left: 42%;
}

/* index.html */

img#title {
	top: 50px;
	left: 250px;
}

/* page3.html */

div#homework {
	width: 45px;
	height: 50px;
	bottom: 0%;
	right: 26.5%;	
}

div#trophy {
	width: 45px;
	height: 80px;
	bottom: 35%;
	right: 40%;
}

div#poster {
	width: 125px;
	height: 180px;
	top: 6%;
	left: 10%;	
}

div#diploma {
	width: 105px;
	height: 90px;
	top: 14%;
	left: 37%;	
}

/* page4.html */

div#letter {
	width: 350px;
	height: 380px;
	bottom: 10%;
	right: 7%;		
}

/* page5.html */

div#blackBox {
	width: 800px;
	height: 600px;

	background-color: black;

	z-index: 8;
}

/* page6.html */

div#door {
	width: 100px;
	height: 210px;
	top: 32%;
	left: 46%;	
}

div#doorInput {
	width: 25px;
	height: 50px;
	top: 34%;
	left: 36.5%;	
}

div#wallNumber5 {
	width: 55px;
	height: 100px;
	top: 24%;
	right: 28%;
}

div#wallNumber9 {
	width: 25px;
	height: 50px;
	top: 40%;
	left: 10.5%;
}

div#wallNumber3 {
	width: 55px;
	height: 82px;
	bottom: 31%;
	right: 4%;
}

div#floorNumber8 {
	width: 120px;
	height: 150px;
	bottom: 4%;
	right: 38%;	
}

/* page7.html */

img#backButton {
	bottom: 5%;
	left: 3%;

	z-index: 9;
}

div#answer1Button {
	width: 100px;
	height: 100px;

	z-index: 2;
}

.answer1 {
	top: 23%;
	right: 19%;
}

div#seven {
	bottom: 29%;
	left: 22%;
}

div#eight {
	bottom: 29%;
	left: 30.5%;
}

div#nine {
	bottom: 29%;
	left: 38.5%;
}

div#four {
	bottom: 40%;
	left: 22%;
}

div#five {
	bottom: 40%;
	left: 30.5%;
}

div#six {
	bottom: 40%;
	left: 38.5%;
}

div#one {
	bottom: 51%;
	left: 22%;
}

div#two {
	bottom: 51%;
	left: 30.5%;
}

div#three {
	bottom: 51%;
	left: 38.5%;
}

div#clear {
	bottom: 19%;
	left: 38.5%;
}

div.inputBox {
	width: 305px;
	height: 68px;
	bottom: 30.5%;
	right: 7%;

	border: 3px;

	color: darkred;
	font-size: 65px;
	text-align: right;
}

img#hint1 {
	bottom: 10%;
	right: 10%;
}

/* page8.html */

div#fakeChoiceDoor {
	top: 16%;
	left: 3%;
}

div#fakeChoiceAlysha {
	top: 16%;
	left: 23.5%;
}

div#fakeChoiceZeke {
	top: 16%;
	left: 44%;
}

div#fakeChoiceLloyd {
	top: 16%;
	left: 64%;
}

div#fakeChoiceThea {
	top: 16%;
	left: 84%;
}

div#page8Speaker {
	width: 100px;
	height: 100px;

	bottom: 17.5%;
	right: 1%;
}

div#page8Limit {
	width: 730px;
	height: 60px;

	top: 3%;
	left: 5%;
}

/* page9.html */

.keyCursor {
	cursor: url(images/items/keyitem-puzzle2.png), auto;
}

.painting1Cursor {
	cursor: url(images/items/painting1item-puzzle2.png), auto;
}

.painting2Cursor {
	cursor: url(images/items/painting2item-puzzle2.png), auto;
}

.painting3Cursor {
	cursor: url(images/items/painting3item-puzzle2.png), auto;
}

div#bookshelf {
	width: 220px;	
	height: 220px;

	bottom: 18%;
	right: 0%;
}

div#sheet {
	width: 70px;	
	height: 70px;

	top: 37.5%;
	right: 36%;	

	z-index: 2;	
}

img#sheetImg {
	top: 37.5%;
	right: 36%;

	z-index: 1;
}

div#chest {
	width: 120px;	
	height: 150px;

	bottom: 12%;
	left: 7%;	
}

div#frame {
	width: 100px;	
	height: 160px;

	top: 20%;
	left: 24%;	
}

/* page10.html */

div#paintingFrame {
	width: 320px;
	height: 430px;

	top: 14%;
	left: 29.5%;

	z-index: 2;
}

img.painting {
	top: 18.5%;
	left: 33%;

	z-index: 1;
}

div#answer2Button {
	width: 100px;
	height: 100px;

	z-index: 2;
}

.answer2 {
	top: 40%;
	right: 9%;
}

/* page11.html */

img#lock1 {
	top: 45%;
	right: 43%;
}

/* page12.html */

div#book1 {
	width: 100px;
	height: 100px;

	top: 34%;
	right: 13%;
}

/* page13.html */

img#keyWall {
	top: 45%;
	right: 43%;

	z-index: 1;
}
	
img#sheetImgBig {
	top: 40%;
	right: 40%;

	z-index: 2;
}

/* page14.html */

div#page14Limit {
	width: 450px;
	height: 80px;

	top: 0%;
	left: 23%;
}

div#choice1a {
	top: 16%;
	left: 23.5%;
}

div#choice1b {
	top: 16%;
	left: 64%;	
}

div#page14Speaker {
	width: 100px;
	height: 100px;

	bottom: 17.5%;
	right: 2%;	
}

/* page15.html */

.shardCursor {
	cursor: url(images/items/shard-puzzle3.png), auto;	
}

img#shardImg {
	top: 7%;
	left: 13.3%;
}

div#glove {
	width: 60px;
	height: 90px;

	top: 7%;
	left: 14.5%;
}

div#musicPoster {
	width: 200px;
	height: 130px;

	top: 15%;
	left: 42%;	
}

div#puzzle3Button {
	width: 20px;
	height: 20px;

	bottom: 20.5%;
	right: 24.5%;	
}

div#clownMask {
	width: 60px;
	height: 60px;

	bottom: 4%;
	left: 1%;
}

div#mirror {
	width: 140px;
	height: 340px;

	top: 25%;
	left: 7%;
}

div#recordPlayer {
	width: 250px;
	height: 100px;

	top: 42%;
	left: 40%;
}

div#postitnote {
	width: 45px;
	height: 50px;

	top: 32%;
	right: 10%;
}

/* page16.html */

div#recordDrop {
	width: 80px;
	height: 80px;

	bottom: 28.5%;
	right: 16.5%;
}

img#guitarRecord {
	top: 15%;
	left: 10%;

	z-index: 4;
}

img#popRecord {
	top: 40%;
	left: 30%;	

	z-index: 4;
}

img#carnivalRecord {
	top: 55%;
	left: 10%;	

	z-index: 4;
}

img#answer3ButtonInactive {
	z-index: 3;
}

div#answer3Button {
	width: 100px;
	height: 100px;

	z-index: 2;
}

.answer3 {
	top: 15%;
	right: 13%;
}

/* page17.html */

div#reflection {
	width: 240px;
	height: 230px;

	top: 13%;
	right: 23%;
}

/* page18.html */

img#coveredNote {
	top: 36%;
	left: 37%;

	z-index: 2;
}

div#note {
	width: 190px;
	height: 160px;

	top: 36%;
	left: 37%;

	z-index: 1;
}

/* page19.html */

div#page19Limit {
	width: 450px;
	height: 80px;

	top: 0%;
	left: 23%;
}

div#choice2a {
	top: 16%;
	left: 23.5%;
}

div#choice2b {
	top: 16%;
	left: 44%;	
}

div#choice2c {
	top: 16%;
	left: 64%;	
}

div#page19Speaker {
	width: 90px;
	height: 90px;

	bottom: 26.5%;
	right: 3%;	
}

/* page20.html */

.coinCursor {
	cursor: url(images/items/coin-puzzle4.png), auto;	
}

div#helm {
	width: 150px;
	height: 180px;

	top: 28%;
	right: 38.5%;
}

div#table {
	width: 299px;
	height: 150px;

	bottom: 5%;
	left: 31%;
}

div#map {
	width: 180px;
	height: 180px;

	top: 18%;
	left: 12%;
}

div#closet {
	width: 175px;
	height: 350px;

	top: 20%;
	right: 8.5%;
}

/* page21.html */

div#answer4Button {
	width: 100px;
	height: 100px;

	z-index: 2;
}

.answer4 {
	top: 17%;
	right: 8%;
}

div#placeCoin {
	z-index: 4;
}

.coinBorder {
	width: 550px;
	height: 380px;

	top: 12%;
	left: 8%;
}

div#answerBox {
	width: 30px;
	height: 25px;

	top: 43%;
	left: 30.6%;

	z-index: 2;
}

img#coinDrag {
	top: 45%;
	left: 50%;

	z-index: 3;
}

/* page22.html */

img#coinImg {
	bottom: 40%;
	right: 31%;
}

div#ship {
	width: 68px;
	height: 60px;

	top: 32%;
	right: 39%;
}

div#pirateMask {
	width: 70px;
	height: 98px;

	top: 25%;
	right: 29%;
}

div#skull {
	width: 60px;
	height: 70px;

	bottom: 32%;
	right: 40%;
}

div#pirateBook {
	width: 70px;
	height: 85px;

	bottom: 9%;
	right: 34%;
}

/* page23.html */

div#tableMap {
	width: 680px;
	height: 475px;

	top: 12%;
	left: 7%;
}

/* page24.html */

div#page24Limit {
	width: 450px;
	height: 80px;

	top: 0%;
	left: 23%;
}

div#page24Speaker {
	width: 70px;
	height: 85px;

	bottom: 25%;
	left: 3%;
}

div#choice3a {
	top: 16%;
	left: 32.5%;	
}

div#choice3b {
	top: 16%;
	right: 34%;
}

div#choice3c {
	top: 16%;
	left: 32.5%;	
}

div#choice3d {
	top: 16%;
	right: 34%;
}

/* page25.html */

div#dicePoster {
	width: 130px;
	height: 110px;

	top: 27%;
	right: 32%;
}

div#cardPile {
	width: 110px;
	height: 100px;

	bottom: 5%;
	left: 20%;
}

div#rouletteAnswer {
	width: 150px;
	height: 150px;

	top: 27%;
	left: 12%;
}

div#rouletteTable {
	width: 180px;
	height: 200px;

	bottom: 6%;
	left: 37%;
}

div#safe {
	width: 150px;
	height: 150px;

	top: 32%;
	right: 7%;

	z-index: 2;
}

img#safeImg {
	top: 32%;
	right: 12%;
}

/* page26.html */

div#answer5Button {
	width: 100px;
	height: 100px;

	z-index: 2;
}

.answer5 {
	top: 13%;
	right: 34%;
}

div#seven3 {
	bottom: 27%;
	right: 21.5%;
}

div#eight3 {
	bottom: 27%;
	right: 14.5%;
}

div#nine3 {
	bottom: 27%;
	right: 7.5%;
}

div#four3 {
	bottom: 35%;
	right: 21.5%;
}

div#five3 {
	bottom: 35%;
	right: 14.5%;
}

div#six3 {
	bottom: 35%;
	right: 7.5%;
}

div#one3 {
	bottom: 43%;
	right: 21.5%;
}

div#two3 {
	bottom: 43%;
	right: 14.5%;
}

div#three3 {
	bottom: 43%;
	right: 7.5%;
}

div#clear3 {
	bottom: 19.5%;
	right: 7.5%;
}

div#zero3 {
	bottom: 19.5%;
	right: 14.5%;
}

div.inputBox3 {
	width: 115px;
	height: 52.5px;
	top: 17%;
	right: 10%;

	border: 3px;

	color: darkred;
	font-size: 50px;
	text-align: right;
}

/* page27.html */

img#backButton2 {
	top: 5%;
	left: 3%;

	z-index: 9;
}

div#writings {
	width: 280px;
	height: 300px;

	bottom: 7%;
	left: 5%;
}

div#tiltedRoulette {
	width: 430px;
	height: 510px;

	top: 0%;
	right: 0%;
}

/* page28.html */

div#casinoChips {
	width: 120px;
	height: 100px;

	top: 38%;
	left: 42.5%;
}

img#safeLid {
	top: 11.5%;
	left: 25%;
}

div#seven2 {
	bottom: 38%;
	right: 15.5%;
}

div#eight2 {
	bottom: 38%;
	right: 10%;
}

div#nine2 {
	bottom: 38%;
	right: 5%;
}

div#four2 {
	bottom: 44%;
	right: 15.5%;
}

div#five2 {
	bottom: 44%;
	right: 10%;
}

div#six2 {
	bottom: 44%;
	right: 5%;
}

div#one2 {
	bottom: 50.5%;
	right: 15.5%;
}

div#two2 {
	bottom: 50.5%;
	right: 10%;
}

div#three2 {
	bottom: 50.5%;
	right: 5%;
}

div#clear2 {
	bottom: 32.5%;
	right: 5%;
}

div#zero2 {
	bottom: 32.5%;
	right: 10%;
}

div.inputBox2 {
	width: 115px;
	height: 52.5px;
	top: 14.5%;
	right: 5%;

	border: 3px;

	color: darkred;
	font-size: 50px;
	text-align: right;
}

/* page29.html */

div#crack {
	width: 150px;
	height: 150px;

	bottom: 38%;
	left: 11%;
}

div#finalDoor {
	width: 240px;
	height: 430px;

	top: 14%;
	left: 35%;
}

/* references.html */

h2 {
	color: white;
}

p {
	color: white;
	font-size: 13px;
}

a {
	color: lightblue;
	font-weight: bold;
}