<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>{{title}}</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="./css/style.css" rel="stylesheet">
  <link href='//fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
  <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
    <!--<![endif]-->
    <style>
      .banner {
        background: transparent url('{{banner.photoUrl}}') 0 0 no-repeat fixed;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='{{banner.photoUrl}}', sizingMethod='scale');
        background-size: cover;
      }
    </style>
</head>
<body>
  <header>
  <div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
    {{#if title}}
      <a href="{{website}}" class="pure-menu-heading">{{title}}</a>
    {{/if}}
    <ul class="pure-menu-list">
          {{#if news.title}}
          <li class="pure-menu-item"><a href="#news" class="pure-menu-link">{{news.title}}</a></li>
        {{/if}}
          {{#if about.title}}
          <li class="pure-menu-item"><a href="#about" class="pure-menu-link">{{about.title}}</a></li>
    {{/if}}
          {{#if contact.title}}
          <li class="pure-menu-item"><a href="#contact" class="pure-menu-link">{{contact.title}}</a></li>
    {{/if}}
        </ul>
      </div>
  </header>
  <div class="splash-container">
    <div class="splash">
      {{#if splash.head}}
      <h1 class="splash-head">{{splash.head}}</h1>
        <p class="splash-subhead">
        {{splash.subhead}}
        </p>
      {{/if}}
    </div>
  </div>

  {{#if news}}
  <div class="content-wrapper">
      <div class="content">
        {{#if news.title}}
          <h2 class="content-head is-center" id="news">{{news.title}}</h2>
        {{/if}}
        {{#if news.posts}}
      <div class="information pure-g">
          {{#each news.posts}}
          <div class="pure-u-1 pure-u-md-1-2">
              <div class="l-box">
                <h3 class="information-head">{{title}}</h3>
                  <p>
                    {{content}}
                  </p>
              </div>
            </div><hr/>
          {{/each}}
        </div> <!-- end information -->
        {{/if}}
      </div>
      {{/if}}
      {{#if about}}
    <div class="l-box-lrg pure-g about ribbon2">
      <div class="l-box-lrg is-center pure-u-1 pure-u-md-1-2 pure-u-lg-2-5">
        {{#if about.title}}
          <h2 class="content-head content-head-ribbon" id="about">{{about.title}}</h2>
          {{/if}}
        {{#if about.content}}
          <p>
            {{about.content}}
            </p>
        {{/if}}
      </div>
    </div>
    {{/if}}
  <footer class="footer l-box">
    {{#if contact}}
    <p>
    {{#if contact.title}}
      <span id="contact">{{contact.title}}
    {{/if}}
        {{#if contact.facebook}}
          <a href="{{contact.facebook}}"><i class="fa fa-facebook-official fa-5"></i></a>
        {{/if}}
        {{#if contact.email}}
          <a  href="mailto:{{contact.email}}"><i class="fa fa-envelope-o fa-5"></i></a></span>
        {{/if}}
      <br/>
        © 2014 Copyright {{title}}
        </p>
      {{/if}}
      </footer>
    </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</body>
</html>
