<!doctype html>
<html class="no-js">
<head>
    <title>{% block title %}{{ page_title }}{% endblock %}</title>
	<meta charset="utf-8">
    <meta name="description" content="">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <meta http-equiv="cleartype" content="on">

    {% load staticfiles %}

    <!-- add web fonts if needed -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <!-- mobile first styles -->
    {% block mobile_css %}{% endblock %}

    {% block desktop_css %}{% endblock %}

    <style>
      #unauthorized_holder {width: 500px; border: 1px solid black; display: block; margin-top: 30px; margin-left: auto; margin-right: auto;}

      #unauthorized_message .ui-state-error {border: 1px solid #c43c35; background: #c43c35; color: #fff; background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); text-shadow: 0 -1px 0 rgba(0,0,0,0.25); border-color: #c43c35 #c43c35 #882a25; border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); height: 60px; line-height: 60px; font-weight: normal; position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25),0 3px 3px -1px rgba(0,0,0,0.25); font-size: 1.5em; margin: 0;}

      #unauthorized_message .ui-state-error i { position: absolute; display: inline-block; font-size: 1.75em; padding-left: 20px; margin-top: 12px; }

      #unauthorized_message .ui-state-error span { margin-left: 76px; }

      #unauthorized_message p {font-weight: 800; font-size: 14px; padding: 22px;}

      body {margin: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 20px; color: #333; background-color: #fff;}

      html {font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
    </style>
</head>
<body>
    <div id="wrapper" class="container" style="position:relative;">

        <div id="main-wrapper">
        	<div id="main" role="main">
        	   <div class="inner">{% block content %}{% endblock %}</div>
        	</div><!--end #main-->
        </div>

        <div id="meta-wrapper">
        	<footer id="footer">
                <div class="inner"></div>
        	</footer><!--end #footer-->
        </div>
    </div>

    {% block javascript %}{% endblock %}

</body>
</html>
