.ButtonWidget {
    position: relative;
    float: left;
    display: block;
    z-index: 1;
}

.ButtonWidget-popup {
    width: 230px;
    top: 23px;
    left: 50%;
    margin-left: -115px;
    position: absolute;
    z-index: 2;
}

.ButtonWidget-popup .top {
    height: 12px;
    background: center no-repeat;
}

.ButtonWidget-popup .content {
    padding: 4px 7px;
    border-bottom: 2px solid;
    font-size: 12px;
}

.ButtonWidget-popup .content a {
    display: inline;
    padding: 0px;
}

/*///////////////
// Grey styles //
///////////////*/

.grey .ButtonWidget-popup .top {
    background-image: url('../images/png/ButtonWidget-popup-grey.png');
    background-image: url('../images/svg/ButtonWidget-popup-grey.svg'), none;
}

.grey .ButtonWidget-popup .content {
    background-color: #E0E0E0;
    color: #566767;
    border-color: #D0D0D0;
}

.grey .ButtonWidget-popup .content a {
    color: #358bE8;
}

/*////////////////
// Blue Styles //
////////////////*/

.ButtonWidget-popup .top {
    background-image: url('../images/png/ButtonWidget-popup-blue.png');
    background-image: url('../images/svg/ButtonWidget-popup-blue.svg'), none;
}

.blue .ButtonWidget-popup .content {
    background-color: #358bE8;
    color: #FFF;
    border-color: #136AC6;
}

.blue .ButtonWidget-popup .content a {
    color: #FFFC2B;
}