!!!
html
  head
    title Brew Timer
    link(rel="stylesheet", href="http://fonts.googleapis.com/css?family=Offside")
    link(rel="stylesheet", href="styles/foundation.min.css")
    link(rel="stylesheet", href="styles/foundation.select.min.css")
    link(rel="stylesheet", href="styles/general_foundicons.min.css")
    //if lt IE 8
      link(rel='styleheet", href="styles/general_foundicons_ie7.min.css")

    link(rel="stylesheet", href="styles/main.min.css")
    script(src="scripts/jquery.min.js")
    script(src="scripts/foundation.min.js")
    script(src="scripts/modernizr.foundation.js")
    script(src="scripts/main.min.js")
  body
    audio#clinking(preload="auto")
      source(src="sounds/clinking.mp3", type="audio/mpeg")
      source(src="sounds/clinking.wav", type="audio/wav")
    audio#answering-machine(preload="auto")
      source(src="sounds/answering_machine.mp3", type="audio/mpeg")
      source(src="sounds/answering_machine.wav", type="audio/wav")
    audio#beep(preload="auto")
      source(src="sounds/beep.mp3", type="audio/mpeg")
      source(src="sounds/beep.wav", type="audio/wav")
    #wrapper.block-grid
      #header.row
        .ten.columns.centered
          h1 Brew Timer
      #toolbar.row
        .three.columns.offset-by-eight
          a(href="#", data-reveal-id="settings")#open-settings.button
            span.foundicon-settings
            =" Settings"
      #timers.row
        #remaining.six.columns
          .block-grid
            h3.four.columns.offset-by-eight 00:00:00
        #elapsed.six.columns
            h3.four.column -00:00:00
      #set-timer.row
        .three.columns.offset-by-five
          input#total(placeholder="Total Time (mins)", type="text")
        .two.columns.end
          button#set.button Start Timer
      #stop-timer.row
        .two.columns.offset-by-eight.end
          button#stop.button Stop Timer
      #add-step.row
        .four.columns.offset-by-two
          input#name(placeholder="Step Name", type="text")
        .two.columns
          input#time(placeholder="Alert At (mins left)", type="text")
        .two.columns.end
          button#add.button Add Step
      #steps.row
        #list.block.grid
          .header.row
            .six.columns
              h5.name Step Name
            .two.columns.end
              h5.at Alert At
      #footer.row
        .six.columns
          ="Brought to you by: "
          a(href="//www.brett.is", target="_blank") Brett Langdon
        .six.columns
          ="Sound Effects ("
          a(href="//creativecommons.org/licenses/by/3.0/", target="_blank") Attribution 3.0
          ="): "
          br
          a(href="//soundbible.com/1806-Censored-Beep.html", target="_blank") Censored Beep
          =", "
          a(href="//soundbible.com/1967-Clinking-Teaspoon.html", target="_blank") Clinking Teaspoon
          =", "
          a(href="//soundbible.com/5-Answering-Machine-Beep.html", target="_blank") Answering Machine Beep
      #settings.reveal-modal
        .block-grid
          .row
            .six.columns
              label.right(for="warning-time") Warning Time (mins)
            .five.columns.end
              input#warning-time(type="text")
          .row
            .six.columns
              label.right(for="warning-enabled") Enable Warning
            .five.columns.end
              .switch.radius
                input#off(type="radio", name="enable")
                label(for="off") Off
                input#on(type="radio", checked="true", name="enable")
                label(for="on") On
          .row
            .six.columns
              label.right(for="finished-audio") Finished Audio
            .five.columns.end
              select#finished-audio
                option(value="#clinking") Clinking
                option(value="#beep") Beep
                option(value="#answering-machine") Answering machine
          .row
            .six.columns
              label.right(for="warning-audio") Warning Audio
            .five.columns.end
              select#warning-audio
                option(value="#clinking") Clinking
                option(value="#beep") Beep
                option(value="#answering-machine") Answering machine
          .row
            .six.columns
              label.right(for="step-audio") Step Audio
            .five.columns.end
              select#step-audio
                option(value="#clinking") Clinking
                option(value="#beep") Beep
                option(value="#answering-machine") Answering machine
          .row
            #save.two.columns.offset-by-ten.button.end Save
        a.close-reveal-modal ×
    script(type="text/javascript")
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-34513423-2']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();