<!DOCTYPE html>
<html lang="en">
  <head>
	<title>Basic Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="red" />    
    <link href="../../dist/flip.css" rel="stylesheet">
    <link href="../../dist/transitions/fade.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/bootstrap-responsive.css">
    <style>
      @media (min-width: 980px) {
          body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
          }
      }
    </style>
  </head>
  <body class="flipper" onload="flip()">
      <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
          <div class="container-fluid">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">Main</a>
            <div class="nav-collapse">
              <ul class="nav">
                <li class="active"><a href="home">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="settings.html">Settings</a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </div>
      </div>
      <div id="main" class="container-fluid">
        <section class="row-fluid" data-route="/">
            <div class="span12">
              <ul>
        		<li><a href="about.html">About</a></li>
        		<li><a href="settings.html">Settings</a></li>
        		<li><a href="deferred.html">Deferred Example</a></li>
        		<li><a href="multi.html">Multi Flip Example</a></li>
        	  </ul>
            </div>
        </section>
        <section class="row-fluid" id="settings" data-route="settings.html" data-title="Settings">
            <form class="well">
              <label>Label name</label>
              <input type="text" class="span3" placeholder="Type something…"> <span class="help-inline">Associated help text!</span>
              <label class="checkbox">
                <input type="checkbox"> Check me out
              </label>
              <button type="submit" class="btn">Submit</button>
            </form>
        </section>
        <section class="row-fluid" id="about" data-route="about.html">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra eros id quam vestibulum faucibus. In a libero ipsum, eu pulvinar nibh. Nulla non congue lacus. Pellentesque ligula risus, mollis vel placerat vel, consectetur ac ante. Vestibulum convallis fringilla est quis accumsan. Aliquam mollis neque eu turpis euismod eget blandit lectus lacinia. Proin purus dolor, scelerisque sed tempor volutpat, aliquet in lectus. Fusce euismod mauris sed enim suscipit id laoreet arcu imperdiet.</p>
          <p>Vestibulum vel aliquam lectus. Quisque ipsum nibh, auctor mollis dictum eget, sodales ut lectus. Vivamus fermentum dictum odio quis hendrerit. Nam cursus varius metus, a varius lorem mollis sit amet. Nulla imperdiet ultrices lorem non egestas. Praesent faucibus magna vel dui tempus eget commodo sem lacinia. Quisque iaculis magna nec metus suscipit dapibus pellentesque felis convallis. Donec diam nibh, varius sed viverra suscipit, bibendum sed lacus. Aenean eu nunc et ipsum viverra ullamcorper. Quisque lacus eros, suscipit sed sollicitudin eget, lacinia sed metus.</p>
        </section>
        <section class="row-fluid" id="not-found">
          <h1>Whoops!</h1>
          <p>The page you're looking for cannot be found. Sorry!</p>
        </section>
    </div>
    <script src="../modernizr.custom.js"></script>
    <script src="https://raw.github.com/DmitryBaranovskiy/eve/master/eve.min.js"></script>
    <script src="https://raw.github.com/DamonOehlman/classtweak/master/classtweak.min.js"></script>
    <script src="https://raw.github.com/cujojs/when/master/when.js"></script>
    <script src="../../dist/flip.js"></script>
    <script src="../../dist/plugins/bootstrap.js"></script>
    <script src="../../dist/plugins/history.js"></script>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
  </body>
</html>