.tool-modal {
    height: 32px;
    top: 50px;
    right: 20px;
    z-index: 99;
    background-color: #222222;
}

    .tool-modal ul {
        text-align: center;
        margin: 0;
        padding: 0;
        padding-right: 2px;
        overflow: hidden;
    }

        .tool-modal ul li {
            display: inline-block;
            margin: 0 4px;
            padding: 6px 0;
            line-height: 0;
            float: left;
        }

            .tool-modal ul li .areaIconItem {
                margin-right: 6px;
            }

            .tool-modal ul li:last-child {
                margin-right: -2px;
                margin-left: 0;
                padding-right: 6px;
                padding-left: 0;
            }

    .tool-modal .cancelIconItem {
        -moz-transition: margin-right 0.3s;
        -o-transition: margin-right 0.3s;
        -webkit-transition: margin-right 0.3s;
        transition: margin-right 0.3s;
    }

        .tool-modal .cancelIconItem button {
            padding-right: 6px;
            margin-right: 6px;
            color: #FFF;
        }

            .tool-modal .cancelIconItem button:last-child {
                margin-right: 0px;
            }

    .tool-modal .doneButton {
        background: #60A356;
        padding-bottom: 0px;
        filter: none;
    }

    .tool-modal .cancelButton {
        background: #FF5454;
        padding-bottom: 0px;
        filter: none;
    }

    .tool-modal .cancelItemArrow {
        width: 0;
        height: 0;
        border-left: 10px solid #f2f5f7;
        border-right: none;
        border-top: 17px solid transparent;
        border-bottom: 17px solid transparent;
        display: inline-block;
        float: left;
        margin: -6px 6px -6px 0;
    }

    .tool-modal button {
        padding: 0 0 1px 3px;
        float: left;
    }

        .tool-modal button span {
            float: left;
        }

    .tool-modal .icon {
        background: url("images/sprite_measuretools.png") no-repeat;
        width: 16px;
        height: 16px;
        display: inline-block;
        text-indent: -9999px;
        float: left;
    }

        .tool-modal .icon.ruler {
            width: 24px;
            height: 24px;
        }

        .tool-modal .icon.distance {
            background-position: 0 -24px;
        }

        .tool-modal .icon.area {
            background-position: -16px -24px;
        }

        .tool-modal .icon.marquee {
            background-position: -32px -24px;
        }

    .tool-modal .check-button {
        float: right;
        padding: 0;
        height: 22px;
        width: 0px; /*so that we can animate*/
        -moz-transition: width 0.3s;
        -o-transition: width 0.3s;
        -webkit-transition: width 0.3s;
        transition: width 0.3s;
    }

    .tool-modal .icon.check {
        background-position: -32px -24px;
        margin: 0 3px;
    }


    .tool-modal button .icon {
        margin: 3px 3px 0 0;
    }

    .tool-modal .icon.done {
        width: 12px;
        margin-top: 4px;
        margin-left: 2px;
        background-position: -25px 0px;
    }

    .tool-modal .icon.clear {
        width: 12px;
        margin-top: 4px;
        margin-left: 2px;
        background-position: -35px 0px;
    }

    .tool-modal button.pressed .icon {
        /*margin-top: 4px;*/
    }

        .tool-modal button.pressed .icon.distance {
            background-position: 0 -40px;
        }

        .tool-modal button.pressed .icon.area {
            background-position: -16px -40px;
        }

        .tool-modal button.pressed .icon.marquee {
            background-position: -32px -40px;
        }

    .tool-modal .cancelIconItem.hidden {
        margin-right: -85px;
    }