@font-face
{
    font-family: "Pixel";
    src: url(../joystix.otf);
}

body {
    background: #747474;
    margin: 0;
    padding: 0;
    font-family: "Pixel", monospace;
    font-size: 12px;
}

/* if the #mapViewport div can move around with window resize, then the mapLoc would have to be updated after each resize */
div#mapViewport {
    background: url(../images/bg-map.png) no-repeat;
    overflow: hidden;
    position: relative;
    margin: 25px;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
}

#title_screen
{
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    text-align: center;
}

#title_screen h1
{
    font-size: 225%;
}

#title_screen h2
{
    font-size: 125%;
}

#title_menu
{
    position: absolute;
    top: 190px;
    left: 100px;
}

div.transition
{
    position: absolute;
    display: none;
}

#t_spiral div
{
    float: left;
    background: black;
    position: relative;
    left: -1000px;
}



#battle
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/bg-battle.png);
    display: none;
}

#battle div
{
    position: absolute;
}

#dmg
{
    color: white;
    text-shadow: black 2px 2px 0;
    padding: 5px;
}

#dmg span
{
    position: relative;
    display: none;
}

div#info
{
    left: 20px;
    top: 5px;
    width: 315px;
}

div#monster_stats
{
    left: 5px;
    top: 245px;
    width: 135px;
    height: 200px;
}

div#your_stats
{
    left: 145px;
    top: 245px;
    width: 205px;
    height: 200px;
    margin-left: 2px;
}

div#battle_menu
{
    top: 235px;
    left: 135px;
    display: none;
}


div.chunk {
    position: absolute;
    /*outline: 1px solid black;*/
}

div.chunk div {
    margin: 0;
    padding: 0;
    float: left;
    /*background: url(../images/tiles.gif) no-repeat;*/
}

div.chunk div span.num
{
    display: none;
}



div#mapViewport div.caption {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: black 5px 5px 0;
    -moz-box-shadow: black 5px 5px 0;
    box-shadow: black 5px 5px 0;
    background: blue;
    border: 2px solid white;
    color: white;
    text-align: left;
    display: none;
    height: auto;
}

div.caption p {
    padding: 15px;
    margin: 0;
}

div.caption ul
{
    padding: 5px;
    margin: 0;
    list-style: none;
}

div.caption li
{
    padding: 0;
    margin: 0;
}

div.caption li a
{
    display: block;
    color: white;
    text-decoration: none;
    position: relative;
}

div.caption li a.selected:before
{
    position: absolute;
    content: '➤';
    font-size: 1.5em;
    left: -1.1em;
    top: -0.25em;
    text-shadow: black 3px 3px 0;
}

div#mapViewport div#battle div.caption
{
    /*background: black;*/
}



div#sprites {
    position: absolute;
}

div#sprites div {
    position: absolute;
}

div#you,
div#battle_you {
    position: absolute;
    display: none;
}

div#battle_you
{
    display: block;
    width: 30px;
    height: 30px;
    top: 190px;
    left: 290px;
}

span.top,
span.bottom {
    background: url(../images/sprites.gif) no-repeat;
    width: 100%;
    height: 50%;
    display: block;
}

div#you span.top,
div#battle_you span.top {
    background-position: -30px 0;
}

div#you span.bottom,
div#battle_you span.bottom {
    background-position: 0 -15px;
}

div#guard1 span.top,
div#guard2 span.top {
    background-position: -60px 0;
}

div#guard1 span.bottom,
div#guard2 span.bottom {
    background-position: -60px -15px;
}

div#dragon,
div#battle_monster {
    background: url(../images/sprites.gif) no-repeat 0 -60px;
    width: 90px !important;
    height: 90px !important;
}

div#battle_monster 
{
    top: 140px;
    left: 50px;
    position: absolute;
}

div#pants span.top {
    background: none;
}

div#pants span.bottom {
    background-position: -30px -15px;
}

div#woodsman span.top {
    background-position: -90px 0;
}

div#woodsman span.bottom {
    background-position: -90px -15px;
}

div#blind {
    background: url(../images/sprites.gif) no-repeat -120px 0;
}

div#parent {
    background: url(../images/sprites.gif) no-repeat 0 -30px;
    width: 60px !important;
}



div#guard1 div.caption {
    width: 180px;
    top: -105px;
    left: -60px;
}

div#guard2 div.caption {
    width: 150px;
    top: 45px;
    left: -60px;
}

div#parent div.caption {
    width: 120px;
    top: -105px;
    left: -60px;
}

div#blind div.caption {
    width: 240px;
    left: -120px;
    top: -90px;
}

div#woodsman div.caption {
    width: 240px;
    left: -120px;
    top: -90px;
}

div#dragon div.caption {
    width: 240px;
    left: -120px;
    top: -90px;
}

div#pants_caption div.caption {
    width: 240px;
    left: -120px;
    top: -90px;
}


.yuimenu {
    background: blue;
    border: 2px solid white;
    width: 100px;
    text-align: left;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.yuimenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.yuimenuitem a {
    display: block;
    text-decoration: none;
    color: white;
    padding: 2px 5px;
}

.yuimenuitem a:hover,
.yuimenuitem-selected a {
    background: white;
    color: blue;
}

.yuimenuitem-disabled a:hover,
.yuimenuitem-disabled a {
    background: blue;
    color: #666;
    cursor: default;
}

#inventory
{
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    display: none;
}

#inventory div
{
    background: blue;
    border: 2px solid white;
    text-align: left;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    float: left;
    padding: 5px;
}

#equipment
{
    width: 236px;
}

#inventory_menu
{
    width: 96px;
}

#inventory ul
{
    list-style: none;
    padding: 0;
    margin: 0;
}