Overlay / login window over animated wowslider layering

Question

I'm using wowslider on my welcome page which works fine and looks the way it's supposed to. When people click "Enter" (top right button) a 50% transparent overlay and on top a login window appears. Unfortunately the wowslider dominates the layering and even though I gave my login form a z-index of 10000, the wowslider is still on top. I tried many things with changing z-index of wow-slider elements, playing around with overflow properties and position properties of all related elements, but I can't find a solution.

I believe it's the easiest if I give you the link to the development version of the project to see the issue and perhaps find a solution. http://dev.hobbyathletes.com/

Here are the relevant wowslider elements

<div id="wowslider-container1">
 <h1>Community for hobby and amateur endurance athletes</h1>
  <div class="ws_images">

This ws_images div element seems to dominate all layering rules but the h1 element displayes also on top of the ws_images element, but if I give wowslider-container1 div a border I can see it's behind my login form

Any help would be very much appreciated. Please try to avoid a solution where I'm supposed to embed the wowslider in an iframe.

Thanks in advance

Answer 1

Add z-index to your #form_center selector as below which is ha_main.css - Line 707

#form_center {
position: fixed;
width: 0;
height: 100%;
left: 50%;
top: 0px;
z-index: 10000;
}