/**
 *
 * hunt.css
 *
 * The style used for the hints in the Scavenger Hunt.
 * Lets the page look like a sheet of ruled paper.
 *
 * The page needs a <div> with the class "paper" and optionally "handwritten".
 * Paper makes the page look like a ruled paper, handwritten sets the font to a
 * hand-written style.
 *
 * Warning: The first line on the page uses a slightly bigger font size than the rest of the page!
 *
 **/

html, body {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	height: 100%;

	/* gradients - second red border, first red border, top white space, blue lines */
	background-image:  -webkit-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -webkit-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -webkit-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -webkit-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
	background-image:  -moz-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -moz-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -moz-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -moz-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
	background-image:  -ms-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -ms-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -ms-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -ms-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
	background-image:  -o-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -o-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -o-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -o-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
	background-image:  linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);

	background-size: 1px, 1px, auto, auto 30px;
	background-repeat: repeat-y, repeat-y, no-repeat, repeat;
	background-position: 90% 0px, 10% 0px, 0px 0px, 0px 0px;
}

.paper {
	margin: 0;
	display: block;
	font-size: 25px;    
	line-height: 30px;
	padding-top: 40px;
	padding-left: 10.5%;
	padding-right: 10.5%;
	text-align: justify;
}
.paper:first-line {
	font-size: 40px;
	line-height: 45px;
	vertical-align: baseline;
}
.paper:after {    
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	position: absolute;
	background: rgba(255,255,255,1);
	top: 40px;
	left: 2%;
	z-index: 10;
	-webkit-box-shadow: 
		inset 2px 2px 5px rgba(125,125,125,1),  
		2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),  
		2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
		2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
	-moz-box-shadow: 
		inset 2px 2px 5px rgba(125,125,125,1),  
		2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),  
		2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
		2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
	box-shadow: 
		inset 2px 2px 5px rgba(125,125,125,1),  
		2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),  
		2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
		2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
}

.paper:focus {
	outline: none;
}

.handwritten{
	font-family: always-forever;
/*
	font-family: are-you-freakin-serious;
*/
}