div.core {
    margin: 0 auto;
    width: 1000px;
}

.hero-unit {
	padding: 20px;
}

.hero-unit h1 {
	font-size: 30px;
}

.hero-unit h3 {
	font-size: 12px;
}

div.title {
    display: inline-block;
    width: 700px;
}

div.command {
    display: inline-block;
	font-size: 14px;
    vertical-align: top;
    width: 250px;
}

#worldSize{
	width: 20px;
}

/* Body */

div.internalKB,
div.universe {
    display: inline-block;
    position: relative;
    width: 788px;
}


#world td{
    width: 100px;
	height: 100px;
	border: 1px solid #000000;
	background-position: center center;
    background-repeat: no-repeat;
}


#world td.wumpus{
    background-image: url("../graphics/images/wumpus.png");
}

#world td.stench{
    background-image: url("../graphics/images/stench.png");
}


#world td.pit{
    background-image: url("../graphics/images/pit.png");
}

#world td.breeze{
    background-image: url("../graphics/images/breeze.png");
}

#world td.breeze-stench{
    background-image: url("../graphics/images/breeze-stench.png");
}

#world td.gold{
    background-image: url("../graphics/images/gold.png");
}

#world td.covered{
	background: none repeat scroll 0 0 #111166;
}

div.hero{
    width: 102px;
	height: 102px;
	background-position: center center;
    background-repeat: no-repeat;
    background-image: url("../graphics/images/hero.png");
	position: absolute;
	top: 0;
	left: 0;
}

div.thinks {
	border: 1px solid #999999;
    display: inline-block;
	height: 300px;
	margin: 10px 0;
	overflow: auto;
	padding: 2px;
    vertical-align: top;
    width: 200px;
}

div.thinks p:nth-child(1){
	font-weight: bold;
}

/*KB*/

#kb {
	margin-bottom: 30px;

}

#kb td{
    width: 80px;
	height: 80px;
	border: 1px solid #000000;
    font-size: 9px;
}


.PERCEPT_OK,
.STATUS_SURE {
	color: #3c3;
}

.PERCEPT_UNKNOWN,
.STATUS_UNKNOWN {
	color: #999;
}

.PERCEPT_BREEZE,
.PERCEPT_STENCH,
.PERCEPT_BREEZE_STENCH,
.STATUS_UNSURE_PIT,
.STATUS_UNSURE_WUMPUS,
.STATUS_UNSURE_PIT_OR_WUMPUS {
	color: #990;
}

.PERCEPT_TWINKLE,
.STATUS_FOUND_GOLD {
	color: #039;
}

.PERCEPT_COLLISION_TOP,
.PERCEPT_COLLISION_BOTTOM,
.PERCEPT_COLLISION_LEFT,
.PERCEPT_COLLISION_RIGHT,
.STATUS_WALL {
	color: #330;
}

.STATUS_PIT,
.STATUS_WUMPUS {
	color: #c00;
}

.PERCEPT_SCREAM {
	color: #cc0;
}


/* Message */
.alert .ui-dialog-titlebar{ display:none; }

.messageBox{
		background-size: 40px 40px  !important;
		background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
							transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
							transparent 75%, transparent)  !important;										
		 box-shadow: inset 0 -1px 0 rgba(255,255,255,.4)  !important;
		 color: #fff;
		 padding: 15px;
		 text-shadow: 0 1px 0 rgba(0,0,0,.5) !important;
		 animation: animate-bg 5s linear infinite;
}

.infoMessage{
		 background-color: #4ea5cd !important;
		 border-color: #3b8eb5 !important;
}

.errorMessage{
		 background-color: #de4343 !important;
		 border-color: #c43d3d !important;
}
		 
.warningMessage{
		 background-color: #eaaf51 !important;
		 border-color: #d99a36 !important;
}

.successMessage{
		 background-color: #61b832 !important;
		 border-color: #55a12c !important;
}

.messageBox h2{
	color: #FFFFFF !important;
	font-size: 20px;
	margin: 30px 0 5px;
	text-align: center;
}

.messageBox p{
		 margin: 0;													 
		 color: #fff !important;
}

@keyframes animate-bg {
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}