
#main {
    width:770px;
    margin:0 auto;
}

canvas {
    position:absolute;
}

body {
    font-size:12px;
    font-family:verdana, arial, sans-serif;
    background:#333;
}

#map {
    position:relative;
    width:560px;
    height:480px;
    border:1px #eee solid;
}

#room_data {
    color:#fff;
}

#input {
    width:552px;
    padding:5px;
    background:#666;
}

#right-container {
    width:188px;
    float:right;
    color:#fff;
}

#chat-log {
    border:1px #444 solid;
    padding:10px;
    list-style:none;
    height:270px;
    overflow:auto;
    background:#222;
}

#chat-log li {
    padding:0;
    margin:0;
    color:#eee;
}

#chat-log li span{
    color:#aaa;
}

#grid-serialized {
    width:600px;
    height:100px;
}

.bloc {
    background:url(tileset.png) top left no-repeat;
    position:absolute;
    background-position:-18px -18px;
    width:16px;
    height:16px;
}

#select {
    position:absolute;
    width:16px;
    height:16px;
    border:1px red solid;
    left:-100px;
}

.player {
    position:absolute;
    background:url(walk2.png) top left no-repeat;
    width:24px;
    height:32px;
    /*border:1px red solid;*/
}

#indic {
    position:absolute;
    width:16px;
    height:16px;
    background:black;
    z-index:1000;
}

.player .text {
    color:#fff;
    background:#333;
    padding:2px 6px;
    margin-left:28px;
    margin-top:-20px;
    position:absolute;
    opacity:0.6;
}

.player .name {
    float:left;
    font-weight:bold;
}

.player .message {
    float:left;
}
