.controls-wrapper {
    height: 20px;
    margin: 50px auto;
    background: #2e3335;
    background: linear-gradient(#2e3235, #181b1e);
    opacity: 0.85;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4), 0 5px 10px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.controls-left {
    position: absolute;
    right: 15px;
    bottom: -55px;
    width: 70px;
}

.controls-right {
    position: absolute;
    left: 15px;
    bottom: -55px;
    width: 150px;
}

.controls-wrapper ul {
    position: relative;
    height: 100%;
    width: 100%;
    list-style-type: none;
}

.controls-wrapper ul li {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    border: 3px solid #16191c;
    background: #222529;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -2px 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.controls-wrapper ul li span {
    display: block;
}

#pad-controls {
    visibility: hidden;
}

#control-up {
    position: absolute;
    bottom: 22px;
    left: 7px;
    height: 50px;
    width: 50px;
    background-image: url("../images/arrow-up.png");
}

#control-left {
    position: absolute;
    right: 125px;
    bottom: 22px;
    height: 50px;
    width: 50px;
    background-image: url("../images/arrow-left.png");
}

#control-right {
    position: absolute;
    right: 50px;
    bottom: 22px;
    height: 50px;
    width: 50px;
    background-image: url("../images/arrow-right.png");
}