title: Error getting web.py to render html page that calls a css file
body: <p>Ok so I have the web.py file called <code>app.py</code>.
  <code>app.py</code> references <code>index.html</code> and <code>foo.html</code>.</p>
  
  <p>Both of these html files call just fine, what I mean is when I run <code>app.py</code> and go to <code>http://localhost:8080/</code> and <code>http://localhost:8080/Foo</code> both of them display a webpage just fine, the issue is with the foo.html file tho. I have a large section in there that is supposed to use the <code>rotate.css</code> file and make the text in the section spin. The problem is the text doesn't even show up.</p>
  
  <p>Files are below:</p>
  
  <p><code>app.py</code></p>
  
  <pre><code>import web
  
  urls = (
      '/', 'Index',
      '/Foo', 'Foo'
  )
  
  app = web.application(urls, globals())
  
  render = web.template.render('templates/')
  
  class Index(object):
      def GET(self):
          greeting_Index = "Hello World"
          return render.index(greeting = greeting_Index)
  
  class Foo(object):
      def GET(self):
          greeting_Foo = 'FooBAR'
          return render.foo(greeting = greeting_Foo)
  
  if __name__ == "__main__":
      app.run()
  </code></pre>
  
  <p><code>foo.html</code></p>
  
  <pre><code>$def with (greeting)
  $var cssfiles: static/rotate.css
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Foobar&lt;/title&gt;
      &lt;/head&gt;
  
  &lt;body&gt;
  $if greeting:
      &lt;em style="color: red; font-size: 5em;"&gt;Welcome to the Foo bar. $greeting.&lt;/em&gt;
  $else:
      Herro world!
  
      &lt;section class="rw-wrapper"&gt;
          &lt;h2 class="rw-sentence"&gt;
              &lt;span&gt;Real poetry is like&lt;/span&gt;
              &lt;span&gt;creating&lt;/span&gt;
              &lt;div class="rw-words rw-words-1"&gt;
                  &lt;span&gt;breathtaking moments&lt;/span&gt;
                  &lt;span&gt;lovely sounds&lt;/span&gt;
                  &lt;span&gt;incredible magic&lt;/span&gt;
                  &lt;span&gt;unseen experiences&lt;/span&gt;
                  &lt;span&gt;happy feelings&lt;/span&gt;
                  &lt;span&gt;beautiful butterflies&lt;/span&gt;
              &lt;/div&gt;
              &lt;br /&gt;
              &lt;span&gt;with a silent touch of&lt;/span&gt;
              &lt;div class="rw-words rw-words-2"&gt;
                  &lt;span&gt;sugar&lt;/span&gt;
                  &lt;span&gt;spice&lt;/span&gt;
                  &lt;span&gt;colors&lt;/span&gt;
                  &lt;span&gt;happiness&lt;/span&gt;
                  &lt;span&gt;wonder&lt;/span&gt;
                  &lt;span&gt;happiness&lt;/span&gt;
              &lt;/div&gt;
          &lt;/h2&gt;
      &lt;/section&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><code>rotate.css</code></p>
  
  <pre><code>.rw-wrapper{
      width: 80%;
      position: relative;
      margin: 110px auto 0 auto;
      font-family: 'Bree Serif';
      padding: 10px;
  }
  
  .rw-sentence{
      margin: 0;
      text-align: left;
      text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
  }
  
  .rw-sentence span{
      color: #444;
      white-space: nowrap;
      font-size: 200%;
      font-weight: normal;
  }
  
  .rw-words{
      display: inline;
      text-indent: 10px;
  }
  
  .rw-words span{
      position: absolute;
      opacity: 0;
      overflow: hidden;
      width: 100%;
      color: #6b969d;
  }
  
  .rw-words-1 span{
      animation: rotateWordsFirst 18s linear infinite 0s;
  }
  
  .rw-words-2 span{
      animation: rotateWordsSecond 18s linear infinite 0s;
  }
  
  .rw-words span:nth-child(2){
      animation-delay: 3s;
      color: #6b889d;
  }
  
  .rw-words span:nth-child(3){
      animation-delay: 6s;
      color: #6b739d;
  }
  
  .rw-words span:nth-child(4){
      animation-delay: 9s;
      color: #7a6b9d;
  }
  
  .rw-words span:nth-child(5){
      animation-delay: 12s;
      color: #8d6b9d;
  }
  
  .rw-words span:nth-child(6){
      animation-delay: 15s;
      color: #9b6b9d;
  }
  
  @keyframes rotateWordsFirst {
      0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
      8% { opacity: 1; height: 60px; }
      19% { opacity: 1; height: 60px; }
      25% { opacity: 0; height: 60px; }
      100% { opacity: 0; }
  }
  
  @keyframes rotateWordsSecond {
      0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
      10% { opacity: 0.3; width: 0px; }
      20% { opacity: 1; width: 100%; }
      27% { opacity: 0; width: 100%; }
      100% { opacity: 0; }
  }
  </code></pre>