/* pbStyle.css */

/* Set background to white. Set font. Set links to maroon. */
body {
	background-color: #ffffff;
	font-family: Verdana, sans-serif;
	font-size: 100%;
}
body a {
	color: #880000;
}



/* Header, which consists of the title on the left, and a clickable PuzzleBeast
logo on the right. */
#header {
	border-bottom: 7px double black;
	text-align: left;
	float: left;
	width: 100%;
	font-family: "Arial Black", sans-serif;
	color: #880000;
}
#header a {
	width: 100%;
	float: left;
}
#header img {
	transform-origin: top left;
	transform: scale(0.6);
	border: 0px;
}

#header h1 {
	float: left;
	clear: both;
	font-size: 175%;
}

/* The story text at the top of the page. */

#story {
	float: left;
	padding-left: 1%;
	padding-right: 1%;
	clear: both;
	border-bottom: 2px solid black;
}
#story img {
	float: left;
	padding-right: 10px;
}

/* The clear: both for the .clearfix hack is needed here as well as
in the 800 wide screen. If clear: both isn't done before the remaining
stuff below .instructions don't seem to work right on the larger screen. */

.clearfix {
	clear: both;
}

/* All JS apps use class app + a class with dimensions of the app. If adding an app
with a new dimension, add width and height here and down below for larger screens. */

.app {
	float: left;
	padding: 5px;
	box-sizing: border-box;
}
.app canvas {
	border: 5px white solid;
}
.app350x350 {
	min-height: 370px;
	width: 370px;
}
.app450x350 {
	min-height: 370px;
	width: 470px;
}

/* For small screens, instructions go under the app. */

.instructions {
	padding: 15px;
    float: left;
	clear: both;
}

/* Used on PB home page for links to each puzzle. */

.puzzle_link {
	float: left;
	clear: both;
	width: 100%;
	height: 5em;
	diplay: block;
}

#footer {
	float: left;
	width: 100%;
	clear: both;
	border-top: 2px black solid;
	font-size: 80%;
	padding-bottom: 30px;
}

/* Make buttons for bottom menu */

#menu li {
    list-style-type: none;
    float: none;
    width: 15em;
    text-align: center;
    margin-right: 4px;
    margin-left: -2.5em;

}

#menu ul {
    margin-left: -2.5em;
    padding-top: 30px;
}
#menu a {
    text-decoration: none;
    color: black;
    display: block;
    background-color: #EEEEEE;
    box-shadow: 5px 5px 5px gray;
    margin-bottom: 2px;
    border-radius: 5px
    border: 3px outset #EEEEEE;
}
#menu a:hover {
    background-color: #DDDDDD;
    box-shadow: 3px 3px 3px gray;
    border: none;
}


/* For screens 800px wide or wider, use the clearfix hack for the div
that contains the app and the instructions. This code forces the two to
be side by side on larger screens. */

@media (min-width: 800px) {
	body {
		font-size: 120%;
	}
	#header h1 {
		font-size: 250%;
	}
	#header img {
		transform: none;
		border: 0px;
	}
	
	.clearfix {
		clear: both:
	}
	.clearfix::after {
		content: "";
		clear: both;
		display: table;
	}
	
    .instructions {
    	padding-top: 10px;
        float: none;
        clear: none;
    }
    
	.app350x350 {
		min-height: 560px;
		width: 580px;
	}
	.app450x350 {
		min-height: 560px;
		width: 730px;
	}	
	.app canvas {
		transform-origin: top left;
		transform: scale(1.5);
	}

/* Columns of puzzle links on homepage. If wide screen they can be side-by-side. */

	.column2 {
		float: left;
		width: 48%;
	}
	.puzzle_link {
		float: left;
		clear: both;
		height: 5em;
		diplay: block;
	}

	#menu li {
	    float: left;	
	    margin-left: 0em; 
	}


}

/* Insert page specific stuff down here. */

/* There is one illustration in the instructions. Set the width so the
img and caption fit in a 230px wide box. */

#crate_illustration {
	float: right;
	width: 230px;
	padding: 10px;
}