<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

    <title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
    {% if meta.description %}
        <meta name="description" content="{{ meta.description|striptags }}" />
    {% endif %}
    {% if meta.robots %}
        <meta name="robots" content="{{ meta.robots }}" />
    {% endif %}

    {% if current_page %}
        <link rel="canonical" href="{{ current_page.url }}" />
    {% endif %}

    <link rel="stylesheet" href="{{ theme_url }}/css/bootstrap.min.css" >
    <link rel="stylesheet" href="{{ theme_url }}/css/style.css" type="text/css" />
    <link rel="stylesheet" href="{{ theme_url }}/css/droidsans.css" type="text/css" />
    <link rel="stylesheet" href="{{ theme_url }}/css/fontello.css" type="text/css" />
    <link rel="shortcut icon" href="{{ theme_url }}/img/favicon.png">
    {% block head %}
    {% endblock %}
</head>
<body{% if config.theme_config.widescreen %} class="widescreen"{% endif %}>

    <div id="header" role="banner">
        <div class="container">
            <a id="nav-toggle" title="Toggle Menu" role="button" aria-controls="nav" aria-expanded="false" tabindex="1">
                <span class="icon-menu" aria-hidden="true"></span>
                <span class="sr-only">Toggle Menu</span>
            </a>
            {% if pages["_meta"].meta.logo %}
                <div id="logo" aria-hidden="true">
                    <a href="{{ "index"|link }}">
                        <img src="{{ pages["_meta"].meta.logo|url }}" alt="" />
                    </a>
                </div>
            {% endif %}
            <div id="title"{{ pages["_meta"].meta.tagline ? ' class="tagline"' }}>
                <a href="{{ "index"|link }}">
                    <h1>{{ site_title }}</h1>
                    {{ pages["_meta"].meta.tagline|markdown }}
                </a>
            </div>
            <div id="nav" role="navigation" tabindex="-1">
                <ul>
                    {% for page in pages(depth=0, depthOffset=-1) | sort_by('menu_order') if page.title and not page.hidden %}
                        <li{% if page.id == current_page.id %} class="active"{% endif %}>
                            <a href="{{ page.url }}">{{ page.title }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    <div id="main" role="main">
        <div class="container">
            {% block content %}
                {{ content }}
            {% endblock %}
        </div>
    </div>

    <div id="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-5 col-sd-12">
                    {{ pages["_meta"].meta.bottomline|markdown }}
                </div>
                <div class="social col-md-7 col-sd-12">
                    {% for social in pages["_meta"].meta.social %}
                    <a href="{{ social.url }}" title="{{ social.title }}" role="button">
                        <span class="icon-{{ social.icon }}" aria-hidden="true"></span>
                        <span >{{ social.title }}</span>
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <script src="{{ theme_url }}/js/modernizr-3.3.1-custom.min.js" type="text/javascript"></script>
    <script src="{{ theme_url }}/js/utils.js" type="text/javascript"></script>
    <script src="{{ theme_url }}/js/pico.js" type="text/javascript"></script>

</body>
</html>