body {margin:0;padding:25px;background: #222;color: #fff;font-family: barlow,arial;}
a {color:#fdb;}

.titleblock {color: #ccc;margin-bottom: 10px;font-size: 16px;}
#left {float:left;width: 50%;position: relative;}
#right {float:left;width: 50%}

#board {}

#board > div {margin: 0 auto;}
#board .w5 {width: 180px}
#board .w6 {width: 216px}
#board .w7 {width: 252px}
#board .w8 {width: 288px}
#board .w9 {width: 324px}
#board .w10 {width: 360px}
#board .w11 {width: 396px}
#board .w12 {width: 432px}
#board .w13 {width: 468px}
#board .w14 {width: 504px}

.cell {float:left;height:34px;width:34px;text-align: center;box-sizing: border-box;background-image: url(bg.png);background-repeat: no-repeat;margin:1px;}
.entity {height:34px;width:34px;text-align: center;box-sizing: border-box;padding-top: 5px;background-image: url(bg.png);background-repeat: no-repeat;}

#dialoguebox, #backpackbox {position: absolute;top:20px;left:20px;right:20px;bottom:20px;background:#191717;border:2px solid #b00;color:#fed;display:none;height: 400px;}
#dialoguebox .inner, #backpackbox .inner {padding:5px 15px 0;height: 360px;overflow: auto;box-sizing: border-box;}
#dialoguebox.open, #backpackbox.open {display:block;}

.boxtitle {text-align: center;padding: 10px;font-weight: bold;color: #aaa;text-decoration: underline;}

.dialogue {padding: 5px;border-bottom: 1px dashed #900;margin-bottom: 5px;}

.dialogue.text {text-align: left;}
.dialogue.reply {text-align: right;color: #9be;}

.replyoptions {text-align:right;color: #9be;max-width: 60%;float: right;}
.replyoption {margin-bottom: 5px;}
.selectreplyoption {
	display: inline-block;
    height: 25px;
    width: 25px;
    box-sizing: border-box;
    padding-top: 1px;
    border: 1px solid #ad48bb;
    text-align: center;
    margin: 5px 0 5px 12px;
}

.backpack-item {clear:left;text-align: left;}
.backpack-item .cell {margin-right: 5px}
.backpack-item-name {padding: 8px}

.closetxt {font-size: 13px;color:#999;text-align: center;padding: 6px;position: absolute;bottom: 10px;}
.closetxt span {color:#ddd;}

#mapname {
    margin: 5px;
    padding: 5px;
    color: #fff;
    opacity: 0.7;
    text-align: center;
}

/* right */

#messagebox {margin:12px 0;}

#controls {padding: 15px 0;}
#controls td {padding:6px;text-align: center;}
.control-btn {background: #212c33;font-size: 13px;height: 36px;width: 42px}

#buttoncontainer .cell {margin-right: 12px;}

/* bottom */

#footer {margin-top: 35px;font-size: 13px;color: #999}

.clr {clear: both;}
.hidden {display: none;}

/* ############################# MQs ################################ */

@media only screen and (max-width: 900px) {
    body {text-align: center;}
	#left, #right {float: none;width: auto;}


    #dialoguebox, #backpackbox {left:12px;right:12px;}
    .replyoptions {max-width: 85%;}


	#right {margin-top: 20px;}

    #controls table {margin:10px auto;}
    #buttoncontainer > div {display: inline-block;}
}