<!DOCTYPE html>
<!--[if lt IE 9]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />

  <!-- Set the viewport width to device width for mobile -->
  <meta name="viewport" content="width=device-width" />

  <title>Hot Sauce Studios</title>

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/foundation.css">
  <link rel="stylesheet" href="css/custom.css">
  <link rel="stylesheet" href="js/validate/jquery.validate.css">
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="js/vendor/custom.modernizr.js"></script>
  
  <script src="js/validate/jquery.validate.js"></script>
  
  <script type="text/javascript" src="//use.typekit.net/sjp2blx.js"></script>
  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  <script type="text/javascript">
            $(function(){
                $("#name").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Name can't be empty!"
                });
                $("#company").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Company Name can't be empty!"
                });
                $("#message").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Message can't be empty!"
                });
                $("#email").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Email can't be empty!"
                });
                $("#email").validate({
                    expression: "if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;",
                    message: "Must be a valid email address!"
                });
                $('.ContactUs').validated(function(){
	                //alert("Use this call to make AJAX submissions.");
	                $.post("post.php", $("#contact").serialize(), function(data){ 
		                $("#messageSent").show("slow");
		                setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
	                });
	            });
            });
    </script>

</head>
<body>
  <!-- Header -->
  <div class="row header">
  </div>
  <!-- End Header -->
  <!-- Nav Bar -->

  <div class="row">
    <div class="large-12 columns">
      <div class="nav-bar right">
         <a id="contactLink" class="button">CONTACT US</a>
      </div>
      <div id="contactForm">
      		<form method="post" class="ContactUs" id="contact" action="post.php">
            <fieldset>
                <input id="name" name="name" type="text" placeholder="Name" value="Name" onclick="this.value='';" />
                <input id="company" name="company" type="text" placeholder="Company Name" value="Company Name" onclick="this.value='';" />
                <input id="email" name="email" type="text" placeholder="Email Address" value="Email Address" onclick="this.value='';" />
                <textarea id="message" name="message" rows="3" cols="20" placeholder="Message" onclick="this.value='';">Message</textarea>
                <input id="sendMail" type="submit" name="submit" value="SEND" />
                <span id="messageSent">Your message has been sent successfully!</span>
            </fieldset>
      		</form>
      </div>
    </div>
  </div>

  <!-- End Nav -->


  <!-- Main Page Content -->

  <div class="row main">
  
    <!-- Main Content -->
    <div class="large-12 columns content" role="content">
      <article class="info">

        <a href="#"><img src="img/Logo.png" /></a>

    	<img src="img/content-bar.png" />
    	<h1 class="orange">THERE'S SOMETHING BIG COOKING IN THE KITCHEN</h1>

        <div class="row no-mobile">
          <div class="large-12 columns">
            <p><a href="http://old.hotsaucestudios.com/"><strong>Click here</strong></a> to access the vintage site from when folks bought 
their music on little discs</p>
          </div>
        </div>
        
      </article>
      
      <article class="info-bottom mobile-only">
      <div class="row">
      <div class="large-12 columns">
      	            <p><a href="http://old.hotsaucestudios.com/"><strong>Click here</strong></a> to access the vintage site from when folks bought their music on little discs</p>
      </div>
      </div>
      </article>

    </div>

    <!-- End Main Content -->



  </div>

  <!-- End Main Page Content -->


  <!-- Footer -->

  <footer class="row">
    <div class="large-12 columns main">
      <div class="row">
        <div class="large-1 columns desktop-only">
          <p>&nbsp;</p>
        </div>
        <div class="large-2 columns">
          <p>Phone Us: <span class="orange">678.869.5466</span></p>
        </div>
        <div class="large-4 columns">
          <p>Find Us: <span class="orange">220 Green Oak Dr, Roswell, GA 30075</span></p>
        </div>
        <div class="large-4 columns">
	      <p>Follow Us: <span class="orange"><a href="http://www.facebook.com/HotSauceStudios">facebook.com/HotSauceStudios</a></span></p>
        </div>
        <div class="large-1 columns desktop-only">
          <p>&nbsp;</p>
        </div>
      </div>
    </div>
  </footer>
    <footer class="row center">
    <p>&copy; 2013 Hot Sauce Studios. All rights reserved.</p>
  </footer>
  
  <!-- End Footer -->
  
<!--
  <script>
  document.write('<script src=js/vendor/' +
  ('__proto__' in {} ? 'zepto' : 'jquery') +
  '.js><\/script>')
  </script>
-->

  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
  
  <script>
  $(document).ready(function(){
     $("#contactLink").click(function(){
     	$("#contactForm").slideToggle("slow");
     });
 });
  </script>
  <script>
	  $("#commentForm").validate();
  </script>
  <script>
	  $(function() {  
	    var zIndexNumber = 1000;  
	    $('div').each(function() {  
	        $(this).css('zIndex', zIndexNumber);  
	        zIndexNumber -= 10;  
	    });  
	});  
  </script>
  
</body>
</html>
