.controls {
    font-size:3em;
    background-color: var(--control);
    z-index: 9;
    position: absolute;
    right: 0;
    bottom: 0em;
    height: auto;
    width: 1.4em;
    border-top-left-radius: .4em;

    /*background-image: url(../img/interface/tools/RGRBurstWhite.png);*/
    /*Begin Colorzilla---------------------------*/
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9b4e95+0,9b4e95+0,683564+100 */
    background: linear-gradient(to bottom, #b36bad 0%, #ad52a5 0%, #893282 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*End Colorzilla-----------------------------*/

    box-shadow: -.01em 0em .3em rgba(32, 32, 32, 0.8);
    background:rgb(157,63,151);
}
#debug {
    font-size: .25em;
    position:absolute;
    top:0;
    left:0;
    background-color:var(--ghostWhite60);
    padding:1em;
    height:2em;
    width:12em;
    z-index: 10000000;
    display:none;
}
.toolLogo {
    position: relative;
    height: .8em;
    width: .8em;
    margin: .2em;
    opacity: 1;
    border-radius: .2em;
    cursor: pointer;
    background-color: var(--clearBlack);
    background-image: url(../img/interface/toolIcons/logo.png);
    background-size: 160% auto;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    border: .1em solid transparent;
    cursor: pointer;
}

.toolLogo:hover {
    background-image: url(../img/interface/toolIcons/logoInv.png);

    border: .1em solid #fff;
}

/*.toolLogo:focus {
    background-image: url(../img/interface/toolIcons/logoInv.png);
    border: .1em solid #fff;
}*/

.tool {
    position: relative;
    height: .8em;
    width: .8em;
    background-image: url(../img/interface/playAud.svg);
    background-repeat: no-repeat;
    background-size: 160% auto;
    background-position: center center;
    border: .1em solid transparent;
    transition: border-color 0.2s ease;
    border-radius: .2em;
    margin: .2em;
    display: none;
    cursor: pointer;
}

.tool:hover {
    border: .1em solid #fff;
}

/*.tool:focus {
    border: .1em solid #fff;
}*/

.controls .toolTip {
    position: absolute;
    z-index: 3;
    top: -.5em;
    right: -.7em;
    color: var(--textWhite);
    font-size: .2em;
    display: block;
    box-shadow: none;
    padding-right: 1em;
    text-align: center;
    display: block;
    width: 12em;
    opacity: 0;
    transition: all .5s 0s;
    background-color:red;
}

.controls .tool:hover .toolTip {
    transition: all .5s 1s;
    opacity: 1;
}

.controls .toolLogo:hover .toolTip {
    transition: all .5s 1s;
    opacity: 1;
}

.toolTip span {
    position: absolute;
    right: 0;
    color: var(--textWhite);
    background-color: #2eacbe;
    display: block;
    width: auto;
    border: solid .2em #fff;
    color:#fff;
    border-radius: .5em;
    padding: .2em;
}

.tool.delete {
    background-image: url(../img/interface/toolIcons/delete.png);
    margin-top: .4em;
}
.tool.delete:hover, .tool.delete:focus {
    background-image: url(../img/interface/toolIcons/deleteInv.png);

}
.tool.undo {
    background-image: url(../img/interface/toolIcons/undo.png);
}

.tool.vowelColor {
    background-image: url(../img/interface/toolIcons/vowelRed.png);
}
.tool.vowelColor:hover, .tool.vowelColor:focus {
    background-image: url(../img/interface/toolIcons/vowelRedInv.png);
}

.tool.vowelColor.vowelBlack {
    background-image: url(../img/interface/toolIcons/vowelBlack.png );
}

.tool.vowelColor.vowelBlack:hover,.tool.vowelColor.vowelBlack:focus {
    background-image: url(../img/interface/toolIcons/vowelBlackInv.png);

}

.tool.clear {
    background-image: url(../img/interface/toolIcons/eraser.png);
}

.tool.clear:hover, .tool.clear:focus {
    background-image: url(../img/interface/toolIcons/eraserInv.png);
}

.tool.resize {
    background-image: url(../img/interface/toolIcons/resize.png);
    margin-bottom: .6em;
}
.tool.resize:hover, .tool.resize:focus {
    background-image: url(../img/interface/toolIcons/resizeInv.png);

}

.tool.resizeOff {
    background-image: url(../img/interface/toolIcons/resizeOff.png);
    margin-bottom: .6em;
}

.tool.resizeOff:hover, .tool.resizeOff:focus {
    background-image: url(../img/interface/toolIcons/resizeOffInv.png);

}


.tool.navTop {
    background-image: url(../img/interface/toolIcons/navTop.png);
}
.tool.navTop:hover, .tool.navTop:focus {
    background-image: url(../img/interface/toolIcons/navTopInv.png);

}

.tool.navBottom {
    background-image: url(../img/interface/toolIcons/navBottom.png);
}

.tool.navBottom:hover, .tool.navBottom:focus {
    background-image: url(../img/interface/toolIcons/navBottomInv.png);

}