#map {
    float: left;
    width: 550px;
    height: 500px;
    overflow: hidden;
    border: 1px solid black;
}
#map img {
    float: left;
    border: none;
    margin: 0;
}
#mapCells {
}
#mapControl {
    float: right;
    width: 105px;
    border: 1px solid black;
    padding: 5px;
    margin-right: -3px;
    background-color: #f5f5f5;
}
#arrows {
    float: left;
    width: 57px; height: 57px;
    margin-right: 20px;
    margin-bottom: 10px;
    text-align: center;
}
#arrows a {
    display: block;
    width: 19px; height: 19px;
    cursor: pointer;
}
#arrows #arrowUp {
    margin: 0 auto;
    background: url("map_control.gif") no-repeat -0px;
}
#arrows #arrowUp:hover { background-image: url("map_control2.gif"); }
#arrows #arrowRight {
    float: right;
    background: url("map_control.gif") no-repeat -19px;
}
#arrows #arrowRight:hover { background-image: url("map_control2.gif"); }
#arrows #arrowDown {
    clear: both;
    margin: 0 auto;
    background: url("map_control.gif") no-repeat -38px;
}
#arrows #arrowDown:hover { background-image: url("map_control2.gif"); }
#arrows #arrowLeft {
    float: left;
    background: url("map_control.gif") no-repeat -57px;
}
#arrows #arrowLeft:hover { background-image: url("map_control2.gif"); }
#zoom {
    float: right;
    width: 19px;
    height: 57px;
    margin-bottom: 10px;
    background-color: #dadada;
}
#zoom a {
    float: left;
    display: block;
    width: 19px; height: 19px;
    cursor: pointer;
}
#zoom #zoomUp { background: url("map_control.gif") no-repeat -76px;  margin-bottom: 19px;}
#zoom #zoomUp:hover { background-image: url("map_control2.gif");  }
#zoom #zoomDown { background: url("map_control.gif") no-repeat -95px;  }
#zoom #zoomDown:hover { background-image: url("map_control2.gif");  }

#mapControl input {
    margin: 3px 0 0 0;
    border: 0;
}