.jumbotron {
    background: #586B90;
    color: #f7f7f7;
}

body {
    background: #e3e3e3;
    position: relative;
}

.modal {
    background: rgba(0, 0, 0, 0.5);
}
.map .equipment{
    position: absolute;
}
.equipment {
    position: relative;
}

.body.male {
    height: 64px;
    width: 64px;
    background: url("../img/male_body.png") no-repeat -128px 0;
    position: relative;
}

.body.female {
    height: 64px;
    width: 64px;
    background: url("../img/female_body.png") no-repeat -128px 0;
    position: relative;
}

.armor.female.leatherArmor {
    height: 64px;
    width: 64px;
    background: url("../img/inventory/female_leather_armor.png") no-repeat -128px 0;
    position: absolute;
    top: 0;
}

.armor.male.leatherArmor {
    height: 64px;
    width: 64px;
    background: url("../img/inventory/male_leather_armor.png") no-repeat -128px 0;
    position: absolute;
    top: 0;
}

.head.male.leatherArmor {
    height: 64px;
    width: 64px;
    background: url("../img/inventory/male_leather_cap.png") no-repeat -128px 0;
    position: absolute;
    top: 0
}

.head.female.leatherArmor {
    height: 64px;
    width: 64px;
    background: url("../img/inventory/female_leather_cap.png") no-repeat -128px 0;
    position: absolute;
    top: 0
}

.body.female.walk.south.big,
.body.male.walk.south.big,
.armor.female.leatherArmor.walk.south.big,
.head.female.leatherArmor.walk.south.big,
.head.male.leatherArmor.walk.south.big,
.armor.male.leatherArmor.walk.south.big {
    height: 128px;
    width: 128px;
    background-size: 1664px 2688px;
    background-position: 0 -1280px;
}

.body.female.walk.north.big,
.body.male.walk.north.big,
.armor.female.leatherArmor.walk.north.big,
.head.female.leatherArmor.walk.north.big,
.head.male.leatherArmor.walk.north.big,
.armor.male.leatherArmor.walk.north.big {
    height: 128px;
    width: 128px;
    background-size: 1664px 2688px;
    background-position: 0 -1024px;
}

.body.female.walk.west.big,
.body.male.walk.west.big,
.armor.female.leatherArmor.walk.west.big,
.head.female.leatherArmor.walk.west.big,
.head.male.leatherArmor.walk.west.big,
.armor.male.leatherArmor.walk.west.big {
    height: 128px;
    width: 128px;
    background-size: 1664px 2688px;
    background-position: 0 -1152px;
}

.body.female.walk.east.big,
.body.male.walk.east.big,
.armor.female.leatherArmor.walk.east.big,
.head.female.leatherArmor.walk.east.big,
.head.male.leatherArmor.walk.east.big,
.armor.male.leatherArmor.walk.east.big {
    height: 128px;
    width: 128px;
    background-size: 1664px 2688px;

    background-position: 0 -1408px;
}

.tile .body.female.walk,
.tile .body.male.walk,
.tile .armor.female.leatherArmor.walk,
.tile .head.female.leatherArmor.walk,
.tile .head.male.leatherArmor.walk,
.tile .armor.male.leatherArmor.walk {
    margin-left: -32px;
    top: -64px;
}

.map .tile {
    position: absolute;

}

.map .tile.empty {
    background: black;
}

.map .tile.terrain {
    background: url("../img/tilesets/terrain.png") no-repeat;
    background-size: 200% 200%;
}

.map .tile.base_out_atlas {
    background: url("../img/tilesets/base_out_atlas.png") no-repeat;
    background-size: 200% 200%;
}
.map .tile.town_buildings {
    background: url("../img/tilesets/town_buildings.png") no-repeat;
    background-size: 200% 200%;
}
.map .tile.interior {
    background: url("../img/tilesets/interior.png") no-repeat;
    background-size: 200% 200%;
}
.map .tile.terrain_atlas {
    background: url("../img/tilesets/terrain_atlas.png") no-repeat;
    background-size: 200% 200%;
}

.map {
    position: absolute;

}

.viewport {
    overflow: hidden;
    position: relative;
    margin: auto;
    padding: 0;
    border: 3px groove cadetblue;
    border-radius: 5px;
}

.mapWrapper {
    position: relative;


}
.tile.character .characterName{
    background: white;
    position: absolute;
    left:-16px;
    top:-64px;
    padding: 5px;
    border:1px solid black;
    border-radius: 5px;
}

.viewport .arrows {
    position: absolute;
    z-index: 1000;
    width: 100%;
    height: 100%;
}

.viewport .arrows a {
    font-size: 3em;
    color: white;
    text-decoration: none;
}

.viewport .arrows .north {
    left: 50%;
    top: 0;
    position: absolute;
    margin-left: -20px;
}

.viewport .arrows .east {
    right: 0;
    top: 50%;
    position: absolute;
    margin-top: -24px;
}

.viewport .arrows .south {
    left: 50%;
    bottom: 0;
    position: absolute;

    margin-left: -20px;
}

.viewport .arrows .west {
    left: 0;
    top: 50%;
    position: absolute;
    margin-top: -24px;
}