<!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>Buttons</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">Buttons</h1>
    <h3>1. Custom button</h3>
        <a class="button-flat" href="http://forumnokia.mobi">Click Here</a>

    <h3>2. Custom button (rounded corners)</h3>
        <ul class="button-rounded">
          <li><a href="http://forumnokia.mobi">Click Here</a></li>
          <li><a href="http://forumnokia.mobi">Or Click Here</a></li>
        </ul>
    <h3>3. Form button (rounded corners)</h3>
    <button value="submit" class="button-submit"><span>Submit</span></button>
    <div class="home"><a href="index.html">Home</a></div>
  </div>
  <div id="footer">
    <p>© 2009 Forum Nokia</p>
  </div>
  </div>
  </body>
</html>