Google Maps infobox close button

I have a problem with my InfoBox on Google maps. I have stiled it like I wanted but the close button disapired :/... Does someone know how to solve this problem?

My code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">    </script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
function initialize() {
var loc, map, marker, infobox;

loc = new google.maps.LatLng(-33.890542, 151.274856);

map = new google.maps.Map(document.getElementById("map"), {
     zoom: 12,
     center: loc,
     mapTypeId: google.maps.MapTypeId.ROADMAP
});

marker = new google.maps.Marker({
    map: map,
    position: loc,
    visible: true
});

infobox = new InfoBox({
     content: document.getElementById("infobox"),
     disableAutoPan: false,
     maxWidth: 220,
     pixelOffset: new google.maps.Size(-120, -320),
     zIndex: null,
     boxStyle: {
        width: "220px"
    },
    closeBoxMargin: "12px 12px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1)
});

google.maps.event.addListener(marker, 'click', function() {
    infobox.open(map, this);
    map.panTo(loc);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<title>Creating and Using an InfoBox</title>
</head>

<body>
<div id="map" style="width: 100%; height: 500px"></div>
<br>

<div class="infobox-wrapper">
<div id="infobox">
    <div class='actionInfo'>
    <div class='markerImage'><a target='_blank' href=" + url + "><img src="http://www.plaveo.eu/Files/Actions/132_s.jpg"></a></div>
    <div class='markerActionDescription'><h3><a target='_blank' href=" + url + ">Izdelava spletne strani - PAKET BRONZE - 11%</a></h3></div>
    <div class='actionTill'>Traja do: <b>10.10.2014 16h </b> <br /> <a target='_blank' href=" + url + ">Več tukaj ...</a></div>
    </div>
    <hr />
    <div class='coName'><strong>FUTURO WEB DESIGN</strong></div>
    <div class='coAddress'>Grajska cesta 26, 4260 Bled</div>
    <div class='coContact'>Tel.: 040 351 766</div>
</div>
</div>
</body>
</html>

CSS

.infobox-wrapper {
display:none;
width: 220px;
}

#infobox { 
position: relative; 
background: #7dc9c8; 
border: 5px solid #ffffff;     
max-width: 200px; 
font-family:Roboto; 
padding: 10px;
} 

#infobox:after, #infobox:before { 
top: 100%; 
left: 50%; 
border: solid transparent; 
content: " "; 
height: 0; 
width: 0; 
position: 
absolute; 
pointer-events: none; 
} 

#infobox:after { 
border-color: rgba(125, 201, 200, 0); 
border-top-color: #7dc9c8; 
border-width: 20px; 
margin-left: -20px; 
} 

#infobox:before { 
border-color: rgba(255, 255, 255, 0); 
border-top-color: #ffffff; 
border-width: 27px; 
margin-left: -27px; 
}

http://jsfiddle.net/jEhJ3/3521/

Solution

The button is covered by #infobox.

Set a negative z-index for #infobox (e.g. -1)