title: document.styleSheets returns nothing
body: <p>I am using css3 animations to move items from one side of the screen to the other. I want to make sure this effect works regardless of screen resolution. In order to do this, I use <code>document.styleSheets</code> in order to get access to the css file with all of the animation keyframes and change their final values.</p>
  
  <p>Here is the js code I am using:</p>
  
  <pre><code>var stylesheet = document.styleSheets[1];
  
  var rules = stylesheet.rules;
  var keyframes;
  var keyframe;
  
  for (var i = 0; i &lt; rules.length; i++){
      keyframes = rules.item(i);
  
      var keyframeRules = keyframes.cssRules;
      var j = keyframeRules.length;
      var index = i+1;
  
      while (j--) {
          keyframe = keyframeRules.item(j);
          if (keyframe.keyText === "100%") {
              if(keyframe.style.left != ''){
                  keyframe.style.left = $(document).width() + $('#cloud'+ index).width() + 'px';
              }
          }
      }
  
      $('#cloud'+ index).addClass('animating');
  }
  </code></pre>
  
  <p>The css file I am using contains:</p>
  
  <pre><code>@-moz-keyframes cloud1 {
  0%{ left: -400px; }
  100%{ left: 0; }
  }
  
  @-webkit-keyframes cloud1 {
  0%{ left: -400px; }
  100%{ left: 0; }
  }
  </code></pre>
  
  <p>I have quite a few pairs of keyframes in there.</p>
  
  <p>My problem is <code>document.styleSheets</code> returns an empty css file if I <code>console.log</code> it and inspect in firebug. As a result, <code>rules.length</code> is null. Webkit based browsers work without any issues.</p>
  
  <p>Am I missing something obvious here?</p>