html, body {
	margin: 0;
	padding: 0;
}

body {
	font: 16px 'Press Start 2P', "Courier New", Courier, monospace;
	color: #FFF;
	background: transparent url('../img/bg.png') repeat;
	text-align: center;
}

a {
	color: #e6d94a;
}

h1 {
	padding: 20px;
	font-size: 32px;
	text-shadow: 4px 4px 0 #000;
}

h2 {
	font-size: 16px;
	color: #999;
}

button {
	display: block;
	border: 0;
	outline: 0;
	background-color: #000;
	padding: 0;
}

#container {
	position: relative;
	height: 600;
	width: 800;
	margin: 30px auto;
	background: #383838;
	border: 4px solid #181818;
	color: #FFF;
}

#footer {
	font-size: 8px;
	color: #888;
}

#logo {
	margin: 50px auto;
}

.big-button {
	width: 320px;
	height: 128px;
	margin: 40px auto;
	cursor: pointer;
}

.med-button {
	width: 320px;
	height: 92px;
	margin: 20px auto;
	cursor: pointer;
}

#start {
	background: url('../img/start.png') no-repeat;
}

#tome {
	margin: 20px;
	line-height: 24px;
}

#create-hero {
	background: url('../img/create.png') no-repeat;
}

#play {
	background: url('../img/play.png') no-repeat;
}

#go {
	background: url('../img/go.png') no-repeat;
}

.med-button:hover {
	background-position: 0 -92px !important;
}

.big-button:hover {
	background-position: 0 -128px !important;
}

.hero-select {
	display: inline-block;
	background-color: #212121;
	background-position: 64px 48px;
	background-repeat: no-repeat;
	width: 192px;
	height: 96px;
	padding: 16px;
	border: 4px solid #111;
	cursor: pointer;
}

.hero-select:hover, .hero-selected {
	border-color: #efe247;
}

#templar-select {
	background-image: url('../img/templar.png');
}

#archdruid-select {
	background-image: url('../img/archdruid.png');
}

#shadowmaster-select {
	background-image: url('../img/shadowmaster.png');
}

#powers-menu {
	margin-top: 20px;
}

#power-description {
	position: absolute;
	left: 45px;
	width: 300px;
	margin-top: 50px;
	background: rgba(20,20,20,0.96);
	padding: 8px;
	text-align: left;
	line-height: 24px;
	border: 4px solid #111;
}

.power-name {
	cursor: pointer;
	background: #3f3f3f;
	border-bottom: 4px solid #4f4f4f;
	border-left: 4px solid #4f4f4f;
	border-right: 4px solid #4f4f4f;
}

.power-point-holder {
	width: 32px;
}

#powers-menu-5-name {
	color: #a2c4cf;
	background-color: #212121;
}

#hero-menu-stats, #hero-menu-powers {
	float: left;
	margin: 20px 0 0 35px;
}

#points-remaining {
	font-size: 24px;
}

table td {
	height: 32px;
	padding: 0 6px;
}

.yellow-text {
	color: #efe247;
}

.green-text {
	color: #73b42d;
}

.light-blue-text {
	color: #a2c4cf;
}

.white-underline {
	border-bottom: 4px solid #FFF;
}

.plus, .minus {
	display: inline-block;
	background: #1e1e1e;
	padding: 4px;
	cursor: pointer;
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

.plus {
	color: #73b42d;
}

.minus {
	color: #b42d2d;
}

#message {
	width: 784px;
	padding: 8px;
	position: absolute;
	bottom: 0;
	background-color: #b42d2d;
	color: #FFF;
}

#viewport {
	position: relative;
	float: left;
	width: 600px;
	height: 400px;
}

#hex-panel {
	background: #414141;
	float: left;
	width: 200px;
	height: 400px;
}

#hex-warning {
	position: absolute;
	right: 0;
	top: 0;
	width: 200px;
	height: 400px;
	background: #b42d2d;
}

#game-panel {
	clear: both;
	background: #212121;
	width: 800px;
	height: 200px;
}

#hex-face {
	margin: 20px 0;
}

#hex-timer {
	color: #b42d2d;
	font-size: 42px;
}

#combat-choices {
	float: left;
	height: 100%;
	width: 400px;
	background: #181818;
}

#hero-info {
	float: left;
	height: 100%;
	width: 400px;
}

.stats-inline {
	display: block;
	float: left;
	min-width: 48px;
	text-align: left;
	margin: 8px 0px 8px 14px;
}

.hero-bar {
	width: 244px;
	height: 16px;
	margin-top: 3px;
	border: 4px solid #141414;
	background: #343434;
}

#hp-bar-fill {
	height: 100%;
	background: #73b42d;
}

#mp-bar-fill {
	height: 100%;
	background: #2d70b4;
}

#hero-portrait {
	float: right;
	margin-right: 24px;
	background: url('../img/archdruid.png') no-repeat;
	width: 96px;
	height: 64px;
}

#instructions {
	line-height: 24px;
	padding: 48px 48px 0 48px;
}

#hex-description {
	line-height: 24px;
	margin-top: 12px;
	padding: 8px;
}

#death {
	width: 100%;
	height: 100%;
	background: #b42d2d;
}

#death div {
	margin: 0 auto;
	padding: 220px 0;
}

#win {
	width: 100%;
	height: 100%;
	background: #111;
}

#win div {
	line-height: 24px;
	margin: 0 auto;
	padding: 220px 0;
}

.enemy {
	width: 96px;
	height: 64px;
}

.combat-list {
	position: relative;
	width: 348px;
	height: 24px;
	margin: 8px 20px;
	border: 4px solid #000;
	background: #131313;
	line-height: 24px;
	cursor: pointer;
}

.power-cooldown {
	position: absolute;
	left: 0;
	background: rgba(220,220,220,0.5);
	height: 100%;
	width: 0;
}

#combat-log {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 0 0 8px;
	height: 24px;
}