/*
	Author: Padriac Mead
	Date: May 2019
	Purpose: rule sets/formatting
*/
html{
	height: 100%;
}
/*
In the body section we set a height and line height for the page. This doesn't effect our text
since we opted to use the <div> modules for our text boxes, but this will still help keep all of
the seperate elements looking nice and neat, fitting in with one another.
*/
body { 
	height: 100%;
	margin: 0;
	line-height: 1.6;
    color: black;
    font-family: Arial, Veranda, sans-serif;
}
/*
As you'll see pretty quickly with these css documents, they're kind of the same thing over and over and over and over and over and over and over
again. Just simple formatting, graphics, and a bit of magic. 

For our textboxes, we're going to set the font color, size, and positions of each one to align
with the pictures we've included.
*/
.textBoxA{
	background: linear-gradient(grey,white);
	width: 450px;
	height: 100px;
	position: absolute;
	top: 1050px;
	left: 25px;
    font-family: Arial, Veranda, sans-serif;
    font-size: 20px;
    text-align: center;
    color: black;
 }
 .textBoxB{
 	background: linear-gradient(grey,white);
	width: 450px;
	height: 100px;
	position: absolute;
	top: 1050px;
	left: 500px;
    font-family: Arial, Veranda, sans-serif;
    font-size: 20px;
    text-align: center;
    color:black;
 }
 .textBoxC{
 	background: linear-gradient(grey,white);
	width: 450px;
	height: 100px;
	position: absolute;
	top: 1050px;
	right: 20px;
    font-family: Arial, Veranda, sans-serif;
    font-size: 20px;
    text-align: center;
    color:black;
 }
 .sendOff{
 	width: 1200px;
 	height: 500px;
	color: black;
	text-align: center;
	position: absolute;
	top: 1200px;
	left: 150px;
	font-size: 50px;

}
/*
Are you still reading this? If so, kudos to you! I normally can't even stand to proofread my own code 
after so many pages and lines...

For the clue buttons, I wanted them to blend in as well as possible with the other text, which
isn't a common feature in html nor css, so I had to get creative! Hopefully you were fooled!
*/
.buttonClue1{
	background-color: transparent;
	background-repeat: no-repeat;
	border: none;
	cursor: pointer;
	overflow: hidden;
	outline: none;
	font-family: Arial, Veranda, sans-serif;
	font-size: 100px;
	color:white;
}
.buttonClue2{
	background-color: transparent;
	background-repeat: no-repeat;
	border: none;
	cursor: pointer;
	overflow: hidden;
	outline: none;
	font-family: Arial, Veranda, sans-serif;
	font-size: 20px;
	color:black;
}
.buttonClue3{
	width: 450px;
	height: 350px;
	position: absolute;
	left: 500px;
	top: 700px;
	background: url(images/horsey.jpg);
	background-size: 450px 350px;
	background-repeat: no-repeat;
	border: none;
	cursor: pointer;
	overflow: hidden;
	outline: none;
}
.buttonClue4{
	background-color: transparent;
	background-repeat: no-repeat;
	border: none;
	cursor: pointer;
	overflow: hidden;
	outline: none;
	font-family: Arial, Veranda, sans-serif;
	font-size: 20px;
	color:black;
}
.buttonClue5{
	background-color: transparent;
	background-repeat: no-repeat;
	border: none;
	cursor: pointer;
	overflow: hidden;
	outline: none;
	font-family: Arial, Veranda, sans-serif;
	font-size: 65px;
	color:black;
}
h1{
	background: url(images/buildings.jpg);
	background-position: center;
	background-repeat: no-repeat;
	height: 400px;
	color:white;
     text-align:center;
     padding-top: 200px;
     font-size: 100px;
}
/*
Down here we align and resize our images, as well as the clues once they have been found and
switched to display.
*/
.image1{
	width: 450px;
	height: 350px;
	position: absolute;
	left: 25px;
	top: 700px;
}
.image2{
	width: 450px;
	height: 350px;
	position: absolute;
	left: 500px;
	top: 700px;
}
.image3{
	width: 450px;
	height: 350px;
	position: absolute;
	right: 20px;
	top: 700px;
}
.clue1{
	background-color: black;
	color:white;
	max-width: 450px;
	font-size: 20px;
}
.clue2{
	background-color: black;
	color: white;
	max-width: 450px;
}
.clue3{
	width: 450px;
	height: 350px;
	position: absolute;
	left: 500px;
	top: 700px;
	color:white;
	text-align: center;
	background-color: black;
}
.clue4{
	background-color: black;
	color: white;
	max-width: 450px;
}
.clue5{
	background-color: black;
	color: white;
	bottom: 200px;
}