title: How to get control nav on top of flexslider?
body: <p>I am new to flexslider (<a href="http://www.woothemes.com/flexslider" rel="nofollow">http://www.woothemes.com/flexslider</a>) and having difficulty getting the control nav to be on top of the slider image. I would like it to be in the bottom right-hand corner of the images. But no matter what I seem to do with the styling it always defaults to underneath the slider. You can see the website here: <a href="http://dakar.bournemouth.ac.uk/~hmonaghan/" rel="nofollow">http://dakar.bournemouth.ac.uk/~hmonaghan/</a> </p>
  
  <p>Would appreciate any help, cheers!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="header" class="flexslider"&gt;
  &lt;ul class="slides"&gt;
  &lt;li&gt;
      &lt;div class="slidertext-holder"&gt;
      &lt;div class="slidertext"&gt;
          &lt;h1&gt;"Donec auctor volutpat lorem, nec cursus augue congue ac. Curabitur malesuada lacinia lorem..."&lt;/h1&gt;
          &lt;h2&gt;WARREN MOORE&lt;/h2&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;img src="images/headerfootball.png"&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;div class="slidertext-holder"&gt;
      &lt;div class="slidertext"&gt;
          &lt;h1&gt;"Duis non metus ipsum. Maecenas sit amet risus ut ligula tempus commodo a in justo."&lt;/h1&gt;
          &lt;h2&gt;SOMEONE ELSE&lt;/h2&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;img src="images/headerfootball.png"&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;div class="slidertext-holder"&gt;
      &lt;div class="slidertext"&gt;
          &lt;h1&gt;"Luke, I am your father."&lt;/h1&gt;
          &lt;h2&gt;DARTH VADER&lt;/h2&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;img src="images/headerfootball.png"&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;ol class="flex-control-nav"&gt;
      &lt;li&gt;&lt;a class="active"&gt;1&lt;/a&gt;&lt;/li&gt;|
      &lt;li&gt;&lt;a class=""&gt;2&lt;/a&gt;&lt;/li&gt;|
      &lt;li&gt;&lt;a class=""&gt;3&lt;/a&gt;&lt;/li&gt;&lt;/ol&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>.ul slides {
  margin-bottom:-0.5%;
  }
  
  .flex-control-nav {
  color:#FFF;
  margin-left:20%;
  width:35%;
  font-family: Proximanova Regular;
  position:absolute;
  }
  
  .slidertext-holder {
  margin-left: auto;
  margin-right: auto;
  }
  
  .slidertext {
  width:35%;
  margin-left:55%;
  position: absolute;
  bottom: 10%;
  }
  </code></pre>
  
  <p>Sorry, have updated to add code.</p>