Image and positioning help

A background image is being applied to an image, but I cant find anywhere in the CSS where this color is being applied. Ive also been fiddling with the position of the arrows using margins and padding, but these dont seem to have an effect either.

Here is a link to my page:
Jai Kudo

Here are the two images in question:
http://www.zombiemod...ntrols-left.png
http://www.zombiemod...trols-right.png

You can see there is a background color to the images of #f0f0f0 and the positioning isnt correct, im trying to remove the background colour and find out how to reposition the horizontal position of these images.

Here is my HTML:

<div id="content">

  <div id="main-image-container"  {if $theme.imageCount == 0}style="display:none"{/if}>

    {if $theme.imageCount > 0}

      <div id="slideshow-controls">

        <ul id="control-buttons">

    <li><button id="controls-left">

      <img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />

      </button></li>

    <li><button id="controls-play">

      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />

      </button></li>

    <li><button id="controls-right">

      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />

      </button></li>

        </ul>

      </div>

Here is my CSS:

#slideshow-controlsx {

    position: relative;

    height: 14px;

    margin: 0px 0 -58px;

    overflow: hidden;

    z-index: 100;

    text-align: left;

	top:200px;

}


#main-image-container > #slideshow-controlsx {

    margin-bottom: -50px;

	margin:0 auto;

}


#slideshow-controlsx ul {

    position: relative;

    margin: 0;

    padding: 0px 0px 0px 0px;

    list-style: none inside;

	width:690px;

   /* background-color: #000;*/

 /*   opacity: 0.6;

    -moz-opacity: 0.6;

    filter: alpha(opacity=40);   Lower opacity for IE since the controls don't hide */

}


#slideshow-controlsx ul li {

    float: left;

    margin: 0;

    padding: 0;

}


#slideshow-controlsx button {

    width: 8px;

    height: 14px;

    /*margin: 0;

    padding: 0;*/

  /*  background-color: #000;*/

  	padding:0px;

    border: none;

    text-align: center;

    cursor: pointer;

}

Can anyone please tell me where the background colour #f0f0f0 is being applied, and how I should be modifying the code to move the images closer in towards the centre of the image.

James