Whoops, text for button displaying in wrong place - help please

I've been working on locating the play and pause buttons on the galleria slide show. My example is www.dorsetdog.com/galleria-slide-trial-in-google-sites

Trying to position the play and pause buttons to the right of the caption bar in the ".container" div. But for some reason the text "play" is displaying top left in the ".container"

I've created the new element "play" in the galleria-1.3.5.js at line 2813. No js work done yet, so the play/pause buttons wont do anything, but want to get them located first.

CSS for galleria-play and galleria-pause is in file galleria.classic.css. Code that I've put in is

Code:

---

        /*        playing with slideshow play controls  */
.galleria-Play,
.galleria-Pause
{
        opacity: 0.8;
        -moz-opacity: 0.8;
        -khtml-opacity: 0.8;
        filter:alpha(opacity=80);
        display:-moz-inline-stack;
        display:inline-block;
        zoom:1;
        *display:inline;
        vertical-align: middle;
}
.galleria-Play:hover,
.galleria-Pause:hover
 {
        opacity: 1.0;
        -moz-opacity: 1.0;
        -khtml-opacity: 1.0;
        filter:alpha(opacity=80);
}

.galleria-Play {
        position: absolute;
        height: 30px;
        width: 30px;
        cursor: pointer;
        bottom: 60px;
        right: 20px;
        text-indent: -10000px;
        background: url(https://lh5.googleusercontent.com/-sSSTt48tsgU/UmMWZeLs5WI/AAAAAAAAGTg/vRtWEKBEll4/s30/play-big.png);
}
       
.galleria-pause {
        display:none;
        height: 30px;
        width: 30px;
        cursor: pointer;
        bottom: 60px;
        right: 20px;
        background: url(https://lh3.googleusercontent.com/-U0aBz7lANSA/UmMWY-AwIOI/AAAAAAAAGTY/IHWDGsNE4RE/s30/pause-big.gif);
}
        /*        end playing with controls        */

---

Attachment 5359 Attachment 5360

Help to get the buttons showing and to the right of the white caption area greatly appreciated.

Thanks