title: Alignment for fullPage.js vertical slider navigation dots
body: <p>I am using a jquery plugin called fullPage.js.  It seems to be well documented, but I am having difficulty finding anything on the alignment of the navigation dots.  When I make them a bit larger (via css modifications), the alignment of the hover and active attributes gets thrown off.<br>
  Please see the fiddle below that contains the alignment error:
  <a href="http://jsfiddle.net/pingo_/b1k9wt39/" rel="nofollow">http://jsfiddle.net/pingo_/b1k9wt39/</a></p>
  
  <p>I have also pasted the code on StackExchange, but it is not rendering the error (the dots do not seem to be sized larger):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('#fullpage').fullpage({
      css3: true,
      navigation: true,
      navigationPosition: 'right',
      keyboardScrolling: true,
      controlArrows: true
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#fp-nav ul li a.active span,
  .fp-slidesNav ul li a.active span {
    background: #004e7b;
    position: absolute;
  }
  #fp-nav ul li a span,
  .fp-slidesNav ul li a span {
    border: 1px solid #004e7b;
    background: rgba(0, 0, 0, 0);
    height: 10px;
    width: 10px;
    border-radius: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"&gt;&lt;/script&gt;
  &lt;link href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" rel="stylesheet"/&gt;
  
  &lt;body&gt;
    &lt;div id="fullpage"&gt;
      &lt;div class="section" id="section0"&gt;
        &lt;h2&gt;B A N N E R&lt;/h2&gt;
  
        &lt;h3&gt;Tagline&lt;/h3&gt;
  
      &lt;/div&gt;
      &lt;div class="section" id="section1"&gt;
        &lt;h2&gt;Section 1&lt;/h2&gt;
  
        &lt;h3&gt;Placeholder&lt;/h3&gt;
  
      &lt;/div&gt;
      &lt;div class="section" id="section2"&gt;
        &lt;h2&gt;Section 2&lt;/h2&gt;
  
        &lt;h3&gt;Placeholder&lt;/h3&gt;
  
      &lt;/div&gt;
      &lt;div class="section" id="section3"&gt;
        &lt;h2&gt;Section 3&lt;/h2&gt;
  
        &lt;h3&gt;Placeholder&lt;/h3&gt;
  
      &lt;/div&gt;
      &lt;div class="section" id="section4"&gt;
        &lt;h2&gt;Section 4&lt;/h2&gt;
  
        &lt;h3&gt;Placeholder&lt;/h3&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you remove the height and width code
  <code>height: 10px; width: 10px;</code>
  from my css in jsfiddle, you will see that the default setting aligns perfectly.  While this is nice, I would like the inactive dots to be the same size as the active one (more of a flatter/smoother design). Can anyone help me with this?  Something that can be done easily or a little more complex?</p>
  
  <p>Thanks!</p>