title: fancybox working but not recognizing css, even though everything is linked correctly
body: <p>I'm building an image gallery using fancybox for a college website here: <a href="http://pacificdesignacademy.com/NEW/2/gallerygd.php" rel="nofollow">http://pacificdesignacademy.com/NEW/2/gallerygd.php</a></p>
  
  <p>When an image is clicked, fancybox initializes, but it appears that it doesn't recognize the css or something. There's no border or navigation or anything and sometimes the image will open at the correct size and then jump to the top of the screen and get much smaller. The thumbnails do not seem like they have any css attached to them either. I've checked that everything is linked correctly in the head of my document and I return no errors in the browser. I'm at a loss here.</p>
  
  <p>This is my script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
      $("a.fancybox").fancybox({
          'transitionIn'  :   'elastic',
          'transitionOut' :   'elastic',
          'speedIn'       :   600, 
          'speedOut'      :   200, 
          'overlayShow'   :   true
      }); 
  
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>and this is my HTML:</p>
  
  <pre><code>&lt;div class="large-12 columns"&gt;
          &lt;div id="gallery"&gt;
  
              &lt;a class="fancybox" rel="group" href="img/gallery/gd/image1.jpg"&gt;&lt;img src="img/gallery/gd/thumbs/image1.jpg" alt="Kathleen Watson - Canadian Female Offenders Infographic" /&gt;&lt;/a&gt;
  
              &lt;a class="fancybox" rel="group" href="img/gallery/gd/image2.jpg"&gt;&lt;img src="img/gallery/gd/thumbs/image2.jpg" alt="" /&gt;&lt;/a&gt;
  
              &lt;a class="fancybox" rel="group" href="img/gallery/gd/image3.jpg"&gt;&lt;img src="img/gallery/gd/thumbs/image3.jpg" alt="" /&gt;&lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Any suggestions would be much appreciated. Thanks!</p>