/* 
   Rollever Pest Coutny Map and Photo Overlay
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

#pmmap {
    width: 496px;
    height: 576px;
    background-image: url(/img/pmmap/pmmap.png);
    position: relative;
    margin: 32px auto;
}

#pmmap img.text {
    display: none;
}

#pmmap.over {
    background-position: 0 -576px;
}

#pmmap.over img.text {
    display: block;
}

#pmmap_overlay {
    display: none;
    width: 138px;
    height: 205px;
    position: absolute;
    top: 0;
    left: 0;
}

#pmmap_overlay .bg_top,
#pmmap_overlay .bg_main,
#pmmap_overlay .bg_bottom {
    position: absolute;
    width: 138px;
    left: 0;
    background-image: url(/img/pmmap/pmmap_overlay_32.png);
}

#pmmap_overlay .steps a {
    background-image: url(/img/pmmap/pmmap_overlay_32.png);
}

#pmmap_overlay .bg_top {
    height: 12px;
    top: 0;
    background-position: 0 -12px;
}

#pmmap_overlay.top .bg_top {
    background-position: 0 0;
}

#pmmap_overlay .bg_main {
    height: 167px;
    top: 12px;
    background-position: 0 -24px;
}

#pmmap_overlay .bg_bottom {
    height: 26px;
    top: 179px;
    background-position: 0 -191px;
}

#pmmap_overlay.top .bg_bottom {
    background-position: 0 -217px;
}

#pmmap_overlay .label,
#pmmap_overlay .pictures {
    position: absolute;
    left: 5px;
    z-index: 1;
    width: 120px;
}

#pmmap_overlay .pictures {
    top: 39px;
    height: 90px;
    overflow: hidden;
    /* background color? */
}

#pmmap_overlay .pictures ul {
    display: block;
    width: 1200px; /* 120px × 10 */
    height: 90px;
    list-style: none;
    left: 0;
    position: relative;
}

#pmmap_overlay .pictures li {
    float: left;
    display: table;
    width: 120px;
    height: 90px;
    overflow: hidden;
}

#pmmap_overlay .label div,
#pmmap_overlay .pictures li div {
    display: table-cell;
    vertical-align: middle;
    width: 120px;
}

#pmmap_overlay .pictures li img {
    display: block;
    margin: auto;
}

#pmmap_overlay .label {
    top: 129px;
    height: 60px;
    display: table;
    /* background color? */
}

#pmmap_overlay .label a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #711628;
    padding: 0 10px;
    font-weight: bold;
}

#pmmap_overlay .label a:hover {
    background: transparent;
    text-decoration: underline;
}

#pmmap_overlay .steps {
    position: absolute;
    top: 12px;
    left: 5px;
    height: 27px;
    width: 120px;
}

#pmmap_overlay .steps a {
    display: inline-block;
    width: 10px;
    height: 13px;
    background-position: -26px -250px;
}

#pmmap_overlay .steps a.active {
    background-position: -6px -250px;
}

#pmmap_overlay .steps td {
    vertical-align: middle;
    text-align: center;
}