#controls {
    position    : absolute;
    top         : 0px;
    right       : 0px;
    height      : calc(100% - 156px);
    width       : 96px;
    margin-top  : 156px;
    margin-right: 36px;
}

#controls > * {
    width: 100%;
}

#controls > scroller {
    top: 24px;
}

#controls > scroller:hover {
    top: 36px;
}

#controls_helper {
    opacity   : .5;
    position  : relative;
    top       : 84px;
    height    : 72px;
    cursor    : pointer;
    background: url("/portale/Acommon/img/icons/help.png") center/48px 48px no-repeat;
    -webkit-transition: opacity .9s;
       -moz-transition: opacity .9s;
        -ms-transition: opacity .9s;
         -o-transition: opacity .9s;
            transition: opacity .9s;
}

#controls_helper:hover {
    opacity: 1;
}

#controls_helper-text {
    position   : absolute;
    top        : 156px;
    font-size  : 12px;
    text-align : center;
    line-height: 18px;
    -webkit-transition: opacity .3s;
       -moz-transition: opacity .3s;
        -ms-transition: opacity .3s;
         -o-transition: opacity .3s;
            transition: opacity .3s;
}