Galapago map screen nav

by jmjpro

HTML

<ul id="map-nav" tabindex="3">
    <li>
        <div id="button-play-map" class="nav-button">
            <p data-i18n="Screen Map.Option Play">spielen</p>
        </div>
    </li>
    <li>
        <div id="button-start-map" class="nav-button">
            <p data-i18n="Screen Map.Option Start">nächstes level starten</p>
        </div>
    </li>
    <li>
        <div id="button-reset-map" class="nav-button">
            <p data-i18n="Screen Map.Option Reset">karte zurücksetzen</p>
        </div>
    </li>
    <li class="short">
        <div id="button-menu-map" class="nav-button nav-button-short">
            <p data-i18n="Screen Map.Option Menu">menü</p>
        </div>
    </li>
    <li class="short">
        <div id="button-quit-map" class="nav-button nav-button-short">
            <p data-i18n="Screen Map.Option Quit">beenden</p>
        </div>
    </li>
</ul>

CSS

ul#map-nav {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
    /*left: 252px;
	top: 642px;*/
}
ul#map-nav>li {
    display:inline-block;
    margin-right:8px;
    padding:0;
    width: 198px;
    height: 55px;
    vertical-align: top;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    outline: 1px solid red;
}
ul#map-nav>li.short {
    width: 108px;
}
img#map-nav-cursor {
    position:relative;
}
div.vertical-align-shiv {
    position: relative;
}
div.nav-button {
    position:absolute;
    display: table;
    width: 198px;
    height: 55px;
}
div.nav-button-short {
    width: 108px;
}
.nav-button p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-family:'JungleFever';
    font-size: 17px;
    color: rgb(107, 45, 0);
    /*display: block;*/
}