@charset "UTF-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:112.5%;
	background-color:#000;
	color:#444;
}

#background {
	background:no-repeat center center fixed;
	background-size:cover;
}

#wrapper {
	width:420px;
	overflow:hidden;
	background-color:#ccc;
	margin:40px auto 0 auto;
	-webkit-box-shadow:4px 4px 10px 0px rgba(0, 0, 0, .5);
  box-shadow:4px 4px 10px 0px rgba(0, 0, 0, .5);
	border:4px solid #000;
}

#game-state-text {
	height:180px;
	padding:10px;
	margin:10px;
	line-height:150%;
	background-color:#444;
	-webkit-border-radius:12px;
	-moz-border-radius:12px;
	border-radius:12px;
	-webkit-box-shadow:inset 2px 2px 4px 0px rgba(0, 0, 0, .25);
  box-shadow:inset 2px 2px 4px 0px rgba(0, 0, 0, .25);
	color:#fff;
}

#inventory {
	overflow:hidden;
}

#inventory > div {
	float:left;
	width:60px;
	height:50px;
	margin:12px;
	background-color:#888;
	-webkit-border-radius:12px;
	-moz-border-radius:12px;
	border-radius:12px;
	-webkit-box-shadow:inset 2px 2px 4px 0px rgba(0, 0, 0, .25);
  box-shadow:inset 2px 2px 4px 0px rgba(0, 0, 0, .25);
}

#inventory > div > div {
	width:40px;
	height:40px;
	margin:5px 10px;
	background-repeat:no-repeat;
	background-image:url(http://cs482.andrewmcconville.com/assignment-04/item-icons.png);
}

#item-1 {
	background-position:0 -40px;
}

#item-2 {
	background-position:-40px -40px;
}

#item-3 {
	background-position:-80px 0;
}

#item-4 {
	background-position:-120px -40px;
}

#item-5 {
	background-position:-160px 0;
}

#buttons {
	overflow:hidden;
}

#buttons > div {
	height:66px;
	background-color:#eee;
	margin:10px;
	padding:10px;
	-webkit-border-radius:12px;
	-moz-border-radius:12px;
	border-radius:12px;
	-webkit-box-shadow:1px 1px 3px 0px rgba(0, 0, 0, .25);
  box-shadow:1px 1px 3px 0px rgba(0, 0, 0, .25);
	border:1px solid #777;
	cursor:pointer;
}

#buttons > div:hover {
	background-color:#fff;
}

#progress {
	text-align:center;
	margin:0 0 10px 0;
	font-size:75%;
	color:#777;
}