title: Why aren't the navigation buttons for this rotating banner working?
body: <p>I've got 3 images that rotate on a home page. One image is shown at a time, and there are 3 dots below the image to indicate whether it is the first, second, or third image. </p>
  
  <p>The dots are supposed to be clickable, but they aren't.</p>
  
  <p>Here's the css: </p>
  
  <pre><code>.body, html {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;font-weight:300;background:#fff; background: url('http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/headerImage4.png');background-repeat:repeat-x;width:100%;  margin:0; padding:0; }
  
  .container{
      margin:0;
      padding:0;
      width:100%;
      height:100%;
  
      background-color:#ffffff;
  }
  
  .header {max-height: 100px}
  
  .logo img {width:90%; min-height: 65px; max-width:400px; margin:0.5% 2% 1% 7%; float:left;}
  
  .recLogo img {max-height: 140px; margin:0.5% 2% 1% 7%; float:left;}
  
  
  .headlineContainer {display:block; width:80%; margin:0; position:relative; right:25%; font-weight:bold;}
  .headline {margin:0;}
  
  .nav {width:55%; margin:3.2% 0 0 0; float:left; max-height:100px}
  
  .nav ul {}
  
  .nav li {display:inline; height:30px; float:left; list-style:none; margin: 0 4.43668% 0 0;font-weight:bold}
  
  .menu li a {text-decoration:none; color:#000; font-family:helvetica, arial, sans-serif; font-weight:regular;}
  
  .menu li a:hover {color:#FFF}
  
  .menu {float:right; margin:0 5% 0 0}
  
  .current_page_item a:visited {color:#fff;}
  
  .white {background-color:#fff;  background:url('http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/headerImage4.png'); background-repeat:no-repeat; width:100%}
  
  .promos {clear:both; width:80%; display:block; padding:5% auto 0 auto; margin: 0 auto; background-color:#fff; position:relative;bottom:2em; z-index:-1}
  
  .rslides_tabs a {
  background:#fff !important;
  border: 2px solid !important;
  border-color:#cccccc !important;
  z-index:9 !important;
  }
  
  .rslides_tabs .rslides_here a {
  background: #EE7600 !important;
  border: 2px solid !important;
  border-color:#cccccc !important;
  z-index:9 !important;
  }
  </code></pre>
  
  <p>The page can be seen at <a href="http://www.ayrturfandtrac.org/" rel="nofollow">http://www.ayrturfandtrac.org/</a></p>
  
  <p>Do you have any ideas on how to fix these three buttons?</p>