div.tile-outer {
    background: url(../images/hexagons.svg) 0px 0px;
    z-index: -1;
}

div.tile-state-alpha {
    background: url(../images/hexagons.svg) 0px -40px;
}

div.tile-state-beta {
    background: url(../images/hexagons.svg) 0px -80px;
}

div.tile-state-gamma {
    background: url(../images/hexagons.svg) 0px -120px;
}

div.tile-state-delta {
    background: url(../images/hexagons.svg) 0px -160px;
}

div.tile-state-epsilon {
    background: url(../images/hexagons.svg) 0px -200px;
}

div.tile-state-zeta {
    background: url(../images/hexagons.svg) 0px -240px;
}

div.tile-state-eta {
    background: url(../images/hexagons.svg) 0px -280px;
}

div.tile-state-theta {
    background: url(../images/hexagons.svg) 0px -320px;
}

div.ant {
    position: absolute;
    top: 2px;
    left: 13px;
    width: 23px;
    height: 33px;
    background: url(../images/ant.png) 0 0;
    z-index: 20;
}

div#ant-location {
    visibility: hidden;
    position: fixed;
    border: 1px black solid;
    background: white;
    padding: 5px;
    width: 200px;
}

span.heading {
    display: inline-block;
    font-weight: bold;
    text-align: right;
    margin-right: 10px;
    width: 110px;
}

div.ant-orient-n {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

div.ant-orient-ne {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}

div.ant-orient-se {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
}

div.ant-orient-s {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

div.ant-orient-sw {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg);
}

div.ant-orient-nw {
    -webkit-transform: rotate(300deg);
    transform: rotate(300deg);
}