body {
	background-color: #000;
}

#stage {
	width: 900px;
	height: 450px;
	position: relative;
	margin: auto;
	padding-top: 50px;
}



a:hover {
	color: red;
	text-decoration: underline;
	font-family: inherit;
	
}



a {
	text-decoration: none;
	color: black;
	font-family: verdana;
	display: block;
	padding: 5px;
}





#earlytextBox{
	position: absolute;
	top: 70px;
	left: 20px;
	width: auto;
	height: auto;
	padding: 10px;
	border: 5px solid black;
	font-size: 18px;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 999;
	font-family: verdana;
	
	
}

#mustardtextBox{
	position: absolute;
	top: 70px;
	right: 20px;
	max-width: 450px;
	height: auto;
	padding: 10px;
	border: 5px solid black;
	font-size: 18px;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 999;
	font-family: verdana;
	
	
}

#plumtextBox{
	position: absolute;
	top: 70px;
	left: 20px;
	max-width: 450px;
	height: auto;
	padding: 10px;
	border: 5px solid black;
	font-size: 18px;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 999;
	font-family: verdana;
	
	
}

#scarletttextBox{
	position: absolute;
	top: 70px;
	left: 20px;
	max-width: 450px;
	height: auto;
	padding: 10px;
	border: 5px solid black;
	font-size: 18px;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 999;
	font-family: verdana;
	
	
}

#peacocktextBox{
	position: absolute;
	top: 70px;
	left: 20px;
	max-width: 450px;
	height: auto;
	padding: 10px;
	border: 5px solid black;
	font-size: 18px;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 999;
	font-family: verdana;
	
	
	
}



#cuttextBox{
	position: absolute;
	bottom: 50px;
	left: 20px;
	width: auto;
	height: auto;
	padding: 10px;
	border: 5px solid black;
	font-size: 18px;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 999;
	font-family: verdana;
	
	
}




#nextBtn {
	position: absolute;
	z-index: 999;
	bottom: 0px;
	left: 40px;
}

.yellow {
	color: #B27D00;
}

.purple {
	color: purple;
}

.blue {
	color: blue;
}

.red{
	color: red;
}


 

#mustardtextBox a:hover { 
 color: #B27D00; 
 text-decoration: none; 
}

#scarletttextBox a:hover { 
 color: red; 
 text-decoration: none; 
} 

#plumtextBox a:hover { 
 color: purple; 
 text-decoration: none; 
} 

#peacocktextBox a:hover { 
 color: blue; 
 text-decoration: none; 
} 

#pinbrokentext{
	position: absolute;
	top: 70px;
	right: 20px;
	width: auto;
	height: auto;
	padding: 10px;
	border: 5px solid black;
	font-size: 18px;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 999;
	display: none;
	font-family: verdana;
	
	
	
}

#spelling {
	display:none;
	position: absolute;
	top: 100px;
	left: 50px;
	z-index: 500;
	cursor: pointer;
}


#diaryglow, #knifeglow, #paperglow, #candlestickglow , #pictureglow , #gunglow, #medboxglow, #mednoteglow {
	z-index: 8;
	position: absolute;
	display: none;
}

#opendiary {
	position: absolute;
	top: 40px;
	right: 5px;
	z-index: 997;
	cursor: pointer;
	
}


#mednote {
	position: absolute;
	top: 320px;
	left: 355px;
	
}

#medinfo {
	position: absolute;
	top: 80px;
	left: 150px;
	display:none;
	cursor: pointer;
	z-index: 998;
}

#pictureclose {
	display:none;
	position: absolute;
	left: 280px;
	top: 40px;
	z-index: 999;
	cursor: pointer;
}

#arrow {
	position: absolute;
	top: 70px;
	right: 30px;
	cursor: pointer;
}



#diarypuzzle {
	width: 850px;
	height: 415px;
	background-image: url(Images/diary-background.png);
	z-index: 998;
	display:none;
	position: absolute;
	top: 55px;
	right: 30px;
}

#password {
	cursor: pointer;
	
}

#passwordanswer {
	display: none;
	position: relative;
	top: 80px;
	left: -120px;
	
}

#shapeposition {
	position: absolute;
	top: 150px;
}

#square {
	margin-left:100px;
	
}

.square {
	width: 100px;
	height: 100px;
	background: black;
	float: left;
	margin-left: 45px;
	cursor: pointer;
}

.circle {
	width: 100px;
	height: 100px;
	background: black;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	float: left;
	margin-left: 40px;
	cursor: pointer;
}


	





.glow {
	position: absolute;
	z-index: 9;
	cursor: pointer;
	
}

.hotSpot {
	position: absolute;
	z-index: 10;
	cursor: pointer;
}

#button {
	position: absolute;
	top: 520px;
	right: 0px;
	cursor: pointer;
}

#door {
	position: absolute;
	top: 520px;
	right: 50px;
}

#cuffs {
	position: absolute;
	top: 520px;
	right: 55px;
	cursor: pointer;
	
}


#bignotepad{
	position: absolute;
	top: 50px;
	left: 310px;
	z-index: 998;
	
}

.strikeOut {
	cursor: pointer;
	font-family: ComingSoon, verdana;
	font-size: 18px;
	padding: 0px;
	margin: 0px;
	
}

.title {
	position: absolute;
	z-index: 5;
	font-family: ComingSoon, verdana;
	font-size: 16px;
	font-weight: bold;
}

#title1 {
	top: 80px;
	left: 330px;
	z-index: 999;
	
}

#title2 {
	top: -25px;
	left: 27px;
	text-decoration: underline;
	z-index: 999;
}

#title3 {
	top: -25px;
	right: 10px;
	text-decoration: underline;
	z-index: 999;
	
}

#title4 {
	top: -28px;
	left: 20px;
	text-decoration: underline;
	z-index: 999;
}

.suspects {
	position: absolute;
	top: 152px;
	left: 340px;
	z-index: 999;
	
}

.weapons {
	position: absolute;
	top: 152px;
	right: 310px;
	z-index: 999;
}

.rooms {
	position: absolute;
	top: 350px;
	left: 400px;
	z-index: 999;
}

.strikethrough {
	text-decoration: line-through;
}



#hidden {
	display: none;
}

@font-face {
font-family: ComingSoon;
src: url('ComingSoon.ttf');
}

#fadehallwaynight {
	display:none;
	z-index: 2;
	position: absolute;
	top: 50px;
	
}

#fadehallwayday {
	z-index: 1;
	position: absolute;
	top: 50px;
	
}