<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Navigation</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../resources/styles/reset.css" rel="stylesheet" type="text/css" />
      <link href="../resources/styles/baseStyles.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript" src="../resources/scripts/templates.js"></script>
    <script type="text/javascript">
      function init() {
        var myStyleTweaks = new StyleTweaker();
        myStyleTweaks.add("Series60/5.0", "../resources/styles/tweaks/S605th.css");
        myStyleTweaks.add("Series60/3.2", "../resources/styles/tweaks/S603rdFP2.css");
        myStyleTweaks.add("AppleWebKit/420+", "../resources/styles/tweaks/S406th.css");
        myStyleTweaks.add("N900", "../resources/styles/tweaks/maemo.css");
        myStyleTweaks.add("Firefox/3.0a1 Tablet browser 0.3.7", "../resources/styles/tweaks/maemo.css");
        myStyleTweaks.add("Opera Mini/4", "../resources/styles/tweaks/operamini.css");
        myStyleTweaks.tweak();
      }
      function checkOrientation() {
        var width = parseInt(screen.width);
        var height = parseInt(screen.height);
        
        var landscapeTweaker = new StyleTweaker();
        landscapeTweaker.add("Series60/5.0", "../resources/styles/tweaks/S605thLandscape.css");
        landscapeTweaker.add("Series60/3.2", "../resources/styles/tweaks/S603rdFP2Landscape.css");
        
        if (width > height) {
          landscapeTweaker.tweak();
        } else {
          landscapeTweaker.untweak();
        }
      }
      addEvent("onload",init);
      addEvent("onresize", checkOrientation);
    </script>
  </head>
  <body>
  <div id="wrap">
  <div id="header">
  </div>
  <div id="content">
    <h1 class="top-aligned">Navigation</h1>
      <h3>1. Breadcrumb</h3>
        <ul class="breadcrumbs">
          <li class="first"><a href="http://forumnokia.mobi">Home</a> &gt;</li>
          <li><a href="http://forumnokia.mobi">Lorem ipsum</a> &gt; </li>
          <li>Dolor sit amet</li>
        </ul>
      <h3>2. Horizontal button bar (2) with rounded corners</h3>
        <ul class="nav-horizontal-rounded stack">
          <li class="first two-piece"><a href="http://forumnokia.mobi">Lorem</a></li>
          <li class="last two-piece"><a href="http://forumnokia.mobi">Ipsum</a></li>
        </ul>
      <h3>3. Horizontal button bar (3) with rounded corners</h3>
        <ul class="nav-horizontal-rounded stack">
          <li class="first three-piece"><a href="http://forumnokia.mobi">Lorem</a></li>
          <li class="three-piece"><a href="http://forumnokia.mobi">Ipsum</a></li>
          <li class="last three-piece"><a href="http://forumnokia.mobi">Dolor</a></li>
        </ul>
      <h3>4. Horizontal button bar</h3>    
        <ul class="nav-horizontal-flat stack">
          <li class="first four-piece"><a href="http://forumnokia.mobi">Lorem</a></li>
          <li class="four-piece"><a href="http://forumnokia.mobi">Ipsum</a></li>
          <li class="four-piece"><a href="http://forumnokia.mobi">Dolor</a></li>
          <li class="last four-piece"><a href="http://forumnokia.mobi">Amet</a></li>
        </ul>
      <h3>5. Back to top</h3>  
      <div class="top"><a href="#header">Back to top</a></div>
      <h3>6. Home</h3>  
      <div class="home"><a href="index.html">Home</a></div>
  </div>
  <div id="footer">
    <ul class="nav-footer">
      <li class="first"><a href="http://forumnokia.mobi">Lorem</a></li>
      <li><a href="http://forumnokia.mobi">Ipsum</a></li>
      <li class="last"><a href="http://forumnokia.mobi">Dolor &amp; Ipsum</a></li>
    </ul>
      <p>© 2009 Forum Nokia</p>
    <div class="stack" />
  </div>
  </div>
  </body>
</html>