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

[Mark Ellis]

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 (http://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



/* 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 */


5359 5360

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

Thanks