<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
{% load staticfiles %}
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="{% static 'favicon.ico' %}" type="image/ico" /> 
        <title>{% block title %}{% endblock %}</title>
        <link href='https://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono' rel='stylesheet' type='text/css'>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="{% static 'js/jquery.dataTables.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/jquery.dataTables.plugins.js' %}"></script>
        <script type="text/javascript" src="{% static 'fancybox/jquery.fancybox.pack.js' %}"></script>
        <link rel="stylesheet" href="{% static 'fancybox/jquery.fancybox.css' %}" type="text/css" media="screen" />
        <script type="text/javascript">
            $(function() {
                $('a:has(img)').attr('rel', 'gallery').fancybox();
                $('#source_label').click(function() {
                    $('#source_body').toggle('slow', function() {});
                });
                $('.text').focus(function () {
                    if ($(this).val() == $(this).attr("title")) {
                        $(this).val("");
                        $(this).css('color', '#000');
                    }
                }).blur(function () {
                    if ($(this).val() == "") {
                        $(this).val($(this).attr("title"));
                        $(this).css('color', '#ccc');
                    }
                });
            });
        </script>
        <style type="text/css">
            body {
                font-family: 'Droid Sans', Arial, sans-serif;
                background-color: {% if DEVELOP %}#ddf{% else %}#fff{% endif %};
                color: #444;
                margin: 0;
            }
            h1, h2, h3, h4, a, th {color: #046;}
            h1 {font-size: 1.5em;}
            h2 {font-size: 1.25em;}
            h3 {font-size: 1em;}
            h4 {font-size: .75em;}
            code {
                font-family: 'Droid Sans Mono', Monospace;
                color: #000;
            }
            table {border-collapse: collapse;}
            th, td {
                border: 1px solid #000;
                padding:0 0.5em 0 0.5em;
            }
            tr.even {background-color: #ddd;}
            tr.even:hover {background-color: #ace;}
            tr.odd:hover {background-color: #ace;}
            #content {
                width: 80%;
                margin-left: auto;
                margin-right: auto;
                margin-top: 2.5em;
                margin-bottom: 3.5em;
            }
            #source_label {
                color: #046;
                text-decoration: underline;
                cursor: pointer;
            }
			#header {
				background-color: {% if DEVELOP %}#ddf{% else %}#fff{% endif %};
			    position: fixed;
			    top: 0;
			    width: 100%;
			    border-bottom: 1px #ccc solid;
			    margin 0;
			    z-index: 9;
			}
			#footer {
				background-color: {% if DEVELOP %}#ddf{% else %}#fff{% endif %};
			    position: fixed;
			    bottom: 0%;
			    width: 100%;
			    border-top: 1px #ccc solid;
			    margin 0;
			    z-index: 9;
			}
        </style>
        {% block extra_head %}{% endblock %}
    </head>
    <body>
        <div id="header" style="padding-bottom:0.2em; margin:0; width:100%;">
            <div style="width:65%;float:left;padding:0.2em 0em 0.2em 1em;">
                {% block nav_path %}{% endblock %}
            </div>
            <div style="width:30%;float:right;padding:0em;text-align:right;">
                <form name="input" action="{% url 'dmcm:search' %}" method="get" style="padding-right:1em;">
                    <input type="text" tabindex="1" size="10"
                        {% if search_string %}style="color:#000;"{% else %}style="color:#ccc;"{% endif %}
                        name="search_string" title="Search Site" class="text" 
                        value="{% if search_string %}{{search_string}}{% else %}Search Site{% endif %}"/>
                </form> 
            </div>
            <div style="clear:both"></div>
        </div> <!-- header -->
        <div id="content">
            {% block content %}{% endblock %}
        </div>
        <div id="footer" style="font-size:.9em;padding-left:1em; margin-top:1em;">
            {% block footer %}{% endblock %}
        </div>
    </body>
</html>
