!!!
%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
  %head
    %meta{'http-equiv' => 'Content-Type', :content => 'text/html; charset=UTF-8'}
    %title Lazar Toxicity Predictions
    %link{:rel=>'icon', :type=>'image/x-icon', :href=>'/images/favicon.ico'}
    %link{:rel=>'stylesheet', :href=>"#{'/style.css'}", :type => "text/css"}
    %link{ :href=>"/stylesheets/jquery-ui.css", :rel=>"stylesheet"}
    %link{ :href=>"/jsme/jsa.css", :rel=>"stylesheet"}
    %script{:src=>"/javascripts/jquery-1.8.3.min.js", :type=>"text/javascript"}
    %script{ :src=>"/javascripts/jquery-ui-1.10.3.custom.min.js", :type=>"text/javascript"}
    %script{:src=>"/javascripts/jquery.tools.min.js", :type=>"text/javascript"}
    %script{:src=>"/javascripts/jquery.tablesorter.min.js", :type=>"text/javascript"}
    %script{:src=>"/javascripts/jquery.bpopup.min.js", :type=>"text/javascript"}
    %script{ :src=>"/javascripts/lazar-gui.js", :type=>"text/javascript"}
    %script{:src=>"/jsme/jsme.nocache.js", :type=>"text/javascript"}

  %body
    %noscript
      %div{ :style=>"width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif"}
        Your web browser must have JavaScript enabled in order for this application to display correctly.
    .logo
      %a{:href=> to("/predict")}
        %img{:src=>"/images/ist_logo.png", :alt=>"logo"}
      %h1 Lazar Toxicity Predictions
      %hr{:style=>"color:black;"}
    
    .content
      :javascript
        $(document).ready(function(){
          // hide #back-top first
          $("#back-top").hide();
          // fade in #back-top
          $('a#confidence').tooltip({
            predelay: 300,
            position: 'bottom center',
            offset: [-100, 0],
          });
          $('a#result').tooltip({
            predelay: 300,
            position: 'bottom center',
            offset: [-100, 0],
          });
          $('a#similarity').tooltip({
            predelay: 300,
            position: 'bottom center',
            offset: [-600, 0],
          });
          $('a#measured_activity').tooltip({
            predelay: 300,
            position: 'bottom center',
            offset: [-500, 0],
          });
        });
          
      = yield
    
    .footer{:style=>"margin-bottom:2em;"}
      © 
      %a{:href => 'http://www.in-silico.ch', :rel => "external"} <i style="font-family: serife">in silico</i> toxicology gmbh 2004 - #{Time.now.year.to_s}

    #back-top{:style => "z-index:100;position:fixed;bottom:0%;width:98%;"}
      %hr{:style => "margin-bottom:0;"}
      %a{:href => "", :style=>"text:decoration:none;color:#ccc;"}
        %img{:src => "/rect.png", :alt => "top", :style=>"width:100%;height:50px"}
      %div{:id=>"backtop", :style => "margin-top:-50px;text-align:right;cursor:default;"}
        TOP
    :javascript
      $("#back-top").hide();
      $(function () {
        $(window).scroll(function () {
          if ($(this).scrollTop() > 600) {
            $('#back-top').fadeIn();
          } else {
            $('#back-top').fadeOut();
          }
        });
        // scroll body to 0px on click
        $('#back-top a').click(function () {
          $('body,html').animate({
            scrollTop: 0
          }, 500);
          return false;
        });
      });