@CHARSET "UTF-8";
@IMPORT url("units.css");
@IMPORT url("attacks.css");
@IMPORT url("states.css");
div#game, div#game input, div#game select, div#game textarea {
    font-size: 12px;
    font-family: verdana, arial, 'Bitstream Vera Sans', helvetica, sans-serif;
}
div#game {
    width: 560px;
    height: 400px;
    background: url(../images/bg.png) no-repeat;
    margin: 10px auto 0;
    position: relative;
}
div#game div#region_fight {
    width: 378px;
    height: 378px;
    position: absolute;
    left: 11px;
    top: 11px;
    z-index: 10;
}
div#game div#region_fight.region_bg1 {
    background: url(../images/terrain1.jpg) no-repeat;
}
div#game div#region_fight div.unit {
    width: 64px;
    height: 64px;
    margin: 2px;
    position: absolute;
    z-index: 20;
}
div#game div#region_fight div.unit div.face {
    width: 64px;
    height: 64px;
    background-image: url(../images/units.png);
    background-repeat: no-repeat;
}
div#game div#region_fight div.unit.hover, div#game div#region_fight div.unit.current_unit {
    border: 2px dashed #ffc;
    margin: 0;
    cursor: pointer;
}
div#game div#region_fight div.hp, div#game div#region_fight div.mp {
    width: 62px;
    height: 3px;
    border: 1px solid #333;
    position: absolute;
    z-index: 20;
}
div#game div#region_fight div.hp {
    top: 55px;
}
div#game div#region_fight div.mp {
    top: 59px;
}
div#game div#region_fight div.hp div, div#game div#region_fight div.mp div {
    height: 3px;
}
* html div#game div#region_fight div.hp, * html div#game div#region_fight div.mp, * html div#game div#region_fight div.hp div, * html div#game div#region_fight div.mp div {
    font-size: 0;
}
div#game div#region_fight div.hp div {
    background-color: #f00;
}
div#game div#region_fight div.mp div {
    background-color: #00f;
}
div#game div#region_fight div.tooltip {
    height: 42px;
    position: absolute;
    display: none;
    z-index: 30;
}
div#game div#region_fight div.tooltip div.action {
    width: 42px;
    height: 42px;
    background-image: url(../images/tooltip.png);
    background-repeat: no-repeat;
    float: left;
    margin: 0 2px 2px 0;
    cursor: pointer;
}
div#game div#region_fight div.tooltip div.current_attack {
    background-position: 0 -42px;
}
div#game div#region_fight div.tooltip div.action div {
    width: 38px;
    height: 38px;
    background-image: url(../images/attacks.png);
    background-repeat: no-repeat;
    margin: 2px;
}
div#game div#unit_face {
    width: 64px;
    height: 64px;
    background-image: url(../images/units.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 405px;
    top: 15px;
    z-index: 20;
}
div#game div#hp, div#game div#mp {
    width: 70px;
    height: 12px;
    position: absolute;
    left: 480px;
    font-family: 'Courier New', 'Monospace';
    font-size: 12px;
}
div#game div#hp {
    top: 23px;
    color: #f00;
}
div#game div#mp {
    top: 51px;
    color: #0291cb;
}
div#game div#states {
    width: 72px;
    height: 16px;
    position: absolute;
    left: 480px;
    top: 68px;
}
div#game div#states div {
    width: 16px;
    height: 16px;
    background-image: url(../images/states.png);
    background-repeat: no-repeat;
    float: left;
    margin-right: 2px;;
}
div#game div#info {
    width: 150px;
    height: 68px;
    position: absolute;
    left: 400px;
    top: 90px;
    color: #ddd;
}
div#game div#info p {
    line-height: 120%;
	margin: 0;
}
div#game div#info p.pname {
    font-size: 14px;
    margin-bottom: 2px;
    line-height: 18px;
}
div#player {
    width: 250px;
    height: 230px;
    background: url(../images/character.png) no-repeat;
    margin: 10px auto 0;
    position: relative;
	line-height: 110%;
}
div#player div.buttons {
    width: 74px;
    height: 95px;
    position: absolute;
    left: 37px;
    top: 100px;
}
div#player div.buttons div {
    width: 20px;
    height: 18px;
    background-image: url(../images/buttons.png);
    background-repeat: no-repeat;
    position: absolute;
}
div#player div.buttons div.hover {
    cursor: pointer;
}
div#player div.buttons div.minus {
    left: 0;
    background-position: 0 -18px;
}
div#player div.buttons div.minus.hover {
    background-position: -20px -18px;
}
div#player div.buttons div.plus {
    left: 54px;
    background-position: 0 0;
}
div#player div.buttons div.plus.hover {
    background-position: -20px 0;
}
div#player input.name {
    width: 119px;
    height: 14px;
    border: none;
    position: absolute;
    top: 11px;
    left: 118px;
    padding: 2px 1px;
    font-size: 12px;
    background-color: #000;
    color: #ddd;
}
div#player div.attributes div {
    position: absolute;
    color: #ddd;
}
div#player div.attributes div.race, div#player div.attributes div.job, div#player div.attributes div.lv {
    left: 117px;
    font-size: 12px;
}
div#player div.attributes div.race {
    top: 35px;
}
* html div#player div.attributes div.race {
    top: 36px;
}
div#player div.attributes div.job {
    top: 52px;
}
* html div#player div.attributes div.job {
    top: 53px;
}
div#player div.attributes div.lv {
    top: 69px;
}
div#player div.attributes div.vit, div#player div.attributes div.str, div#player div.attributes div.dex, 
div#player div.attributes div.int, div#player div.attributes div.rest {
    width: 28px;
    height: 14px;
    left: 60px;
    padding: 2px 0;
    text-align: center;
    font-size: 11px;
}
div#player div.attributes div.vit {
    top: 100px;
}
div#player div.attributes div.str {
    top: 125px;
}
div#player div.attributes div.dex {
    top: 150px;
}
div#player div.attributes div.int {
    top: 175px;
}
div#player div.attributes div.rest {
    top: 204px;
}
div#player div.attributes div.hp, div#player div.attributes div.mp {
    left: 168px;
    font-size: 11px;
}
div#player div.attributes div.hp {
    top: 99px;
}
div#player div.attributes div.mp {
    top: 116px;
}
div#player div.attributes div.atk, div#player div.attributes div.def {
    top: 138px;
}
div#player div.attributes div.mga, div#player div.attributes div.mgd {
    top: 155px;
}
div#player div.attributes div.hit, div#player div.attributes div.er {
    top: 172px;
}
div#player div.attributes div.cri, div#player div.attributes div.ctr {
    top: 189px;
}
div#player div.attributes div.gla {
    top: 206px;
}
div#player div.attributes div.atk, div#player div.attributes div.mga, div#player div.attributes div.hit,
div#player div.attributes div.cri, div#player div.attributes div.gla {
    left: 157px;
    font-size: 11px;
}
div#player div.attributes div.def, div#player div.attributes div.mgd, div#player div.attributes div.er,
div#player div.attributes div.ctr {
    left: 212px;
    font-size: 11px;
}