{% load my_tags %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
    <title>{% block title %}{{sitename}}{% endblock %}</title>
    {% block meta %}
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="generator" content="Gramps 3.2.0-0.SVN12859M http://gramps-project.org/" />
    <meta name="author" content="" />
    {% endblock %}
    <link href="/images/ped24.ico" type="image/x-icon" rel="shortcut icon" />
    {% block css %}
    <link media="screen" href="/styles/css/{{css_theme}}" type="text/css" rel="stylesheet" />
    <link media="print" href="/styles/css/Web_Print-Default.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="/styles/javascript/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="/styles/javascript/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript" src="/styles/jhtmlarea/scripts/jHtmlArea-0.7.0.js"></script>	 
    <link rel="Stylesheet" type="text/css" href="/styles/jhtmlarea/style/jHtmlArea.css" />
    <script type="text/javascript" src="/styles/javascript/jquery.flexbox.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/styles/css/jquery.flexbox.css" />  
    {% endblock %}

   <style type="text/css">
     table td {
        vertical-align: middle;
     }
     div.content {
        background: none;
     }
     .content {
        padding: 0px 0px 10px;
     }
     .browsecell {
        display: block;
     }
     #subtitle {
        font-weight: bold;
        font-style: italic;
        border-top: 1px solid;
     }
     td.ColumnAttribute {
        text-align: right;
     }
     #error {
        color: red;
     }
   {% if action == "edit" or action == "add" %}
   {% else %}
     #rowspace {
        height: 3px;
     }
     #data {
        border: 1px solid;
        background-color: white;
        color: brown;
     }
   {% endif %}
   
   /* Component containers */
     .ui-widget {
         font-family: Georgia,serif;
         font-size: small; 
         }
     .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
          font-family: Georgia,serif;
          font-size: small; 
         }
     .ui-widget-content { 
         border: 1px solid #7D5925; 
         color: #7D5925; 
         float: left;
         width: 98%;
         }
     .ui-widget-content a {
          color: #7D5925; 
          }
     .ui-widget-header { 
         color: #ffffff; 
         }
     .ui-widget-header a {
          color: #7D5925;
          }

     /* Overlays */
     .ui-widget-overlay {
         background: #aaaaaa;
         opacity: .30;
         }
         
     .ui-widget-shadow { 
         margin: -8px 0 0 -8px;
         padding: 8px;
         opacity: .30;
         -webkit-border-radius: 8px; 
         }

     /* Interaction states */
     .ui-state-default { 
         border: 1px solid #7D5925; 
         background: #FFF2C6; 
         font-weight: normal; 
         color: #7D5925; 
         outline: none; 
         }
     .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { 
         color: #7D5925;
         text-decoration: none;
         outline: none; 
         }
     .ui-state-hover, .ui-state-focus { 
         border: 1px solid #f5ad66;
         background: #f5f0e5;
         font-weight: normal;
         color: #a46313;
         outline: none; 
         }
     .ui-state-hover a, .ui-state-hover a:hover { 
         color: #a46313;
         text-decoration: none;
         outline: none; 
         }
     .ui-state-active { 
         border: 1px solid #7D5925;
         background: #f4f0ec;
         font-weight: normal;
         color: #b85700;
         outline: none; 
         }
     .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { 
         color: #b85700;
         outline: none;
         text-decoration: none; 
         }

     /* Interaction Cues */
     .ui-state-highlight {
         border: 1px solid #d9bb73;
         background: #f5f5b5;
         color: #060200; 
         }
     .ui-state-highlight a { 
         color: #060200; 
         }
     .ui-state-error {
         border: 1px solid #f8893f;
         background: #fee4bd;
         color: #dd4e2c; 
         }
     .ui-state-error a { 
         color: #dd4e2c; 
         }
     .ui-state-error-text {
          color: #dd4e2c; 
          }
     .ui-state-disabled {
         opacity: .35;
         background-image: none;
         }
     .ui-priority-primary {
         font-weight: bold; 
         }
     .ui-priority-secondary {
         opacity: .7;
         font-weight: normal; 
         }

     /* Tabs */
     .ui-tabs {
         padding: .2em;
         }
     .ui-tabs .ui-tabs-nav {
         list-style: none;
         position: relative;
         padding: .2em .2em 0; 
         }
     .ui-tabs .ui-tabs-nav li {
         position: relative;
         float: left;
         margin: .2em .2em -1px 0;
         padding: 0; 
         }
     .ui-tabs .ui-tabs-nav li a {
         float: left;
         text-decoration: none;
         padding: .5em 1em; 
         }
     .ui-tabs .ui-tabs-nav li.ui-tabs-selected {
         padding-bottom: 1px;
         border-bottom-width: 0;
         }
     .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
         cursor: text; 
         }
     .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
         cursor: pointer; 
         } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
     .ui-tabs .ui-tabs-panel {
         padding: 1em 1.4em;
         display: block;
         border-width: 0;
         background: none; 
         }
     .ui-tabs .ui-tabs-hide {
         display: none !important; 
         }
    </style>

<SCRIPT LANGUAGE="JavaScript">
<!--
var  timerId=0 ;

function clearTimer() {
  if (timerId!=0) {
    clearTimeout(timerId); timerId=0; }}

function startTimer() {
  clearTimer(); timerId=setTimeout('timerId=0;hideMenus()',200); 
}

function showMenu(menuNum) {
  clearTimer(); hideMenus();
  document.getElementById('menu_'+menuNum).style.display=""; 
}

function hideMenus() {
  document.getElementById('menu_browse').style.display="none";
}

function hiLite(theOption) {
  clearTimer();
  document.getElementById('opt_'+theOption).style.background='#9090FF'; 
}

function unLite(theOption) {
  startTimer();
  document.getElementById('opt_'+theOption).style.background='#D0D0FF'; 
}

function optClick(theOption) {
  document.location.href=theOption;
}

function setHasData(classname, value) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if((" " + elems[i].className + " ").indexOf(" " + classname + " ") > -1) {
            if (value) {
                elems[i].style.fontWeight = "bold"; 
                elems[i].style.fontStyle = "italic"; 
	    } else {
                elems[i].style.fontWeight = ""; 
                elems[i].style.fontStyle = ""; 
            }
	 }
    }
}   

function setReturnValues() {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if ((" " + elems[i].name + " ").indexOf("_return ") > -1) {
	    var pos = (" " + elems[i].name + " ").indexOf("_return ");
            var s = elems[i].name.substring(0, pos - 1);
	    var v = document.getElementsByName(s)[0];
	    elems[i].value = v.value;
	}
    }
}

function buttonOver(button) {
    button.style.backgroundColor = "white"; 
    button.style.border = "1px solid gray";
}

function buttonOut(button) {
    button.style.backgroundColor = "lightgray"; 
    button.style.border = "1px solid lightgray";
}
//-->
</SCRIPT>

<STYLE TYPE="text/css">
<!--
.popupMenu {
//  font-family     : Verdana,Tahoma,Helvetica,sans-serif;
//  font-size       :     12px;
  color           :  #111111;
  position        : absolute;
//  top             :     72px;
  border          :      1px;
  padding         :      3px;
  z-index         :       16;
  background-color:  #D0D0FF;
  cursor          :  pointer; }
-->
</STYLE>
</head>
<body onclick="hideMenus()" 
      onload="if (document.getElementById('get_focus')) {document.getElementById('get_focus').focus();}"
>
   <div id="header" style="padding-top: 1em; background-position:0px -32px;">
     <h1 id="SiteTitle" style="margin-left: 0em;">{% block heading %}{{sitename}}{% endblock %}</h1>
   </div>

   <div class="wrapper" role="navigation" id="nav">
    {% block navigation %}
    <div class="container">
    <ul class="menu" id="dropmenu">
    <li {{ tview|currentSection:"home" }}><a href="/">Home</a></li>
    {% for title in menu %}
         {# (<Nice name>, /<path>/, <Model> | None, Need authentication ) #}
         {% if title.3 %} 
	   {% if user.is_authenticated %}
                <li {{tview|currentSection:title.1 }}>
	        {% if title.1 %}
                   <a href="/{{title.1}}/">{{title.0}}</a>
		</li>
	        {% else %}
                   <a href="/">{{title.0}}</a>
                </li>
	        {% endif %}
	   {% else %}
                {# don't show #}
           {% endif %}
        {% else %}
                <li {{tview|currentSection:title.1 }}>
	        {% if title.1 %}
                   <a href="/{{title.1}}/"
		      onmouseover="showMenu('{{title.1}}')" 
		      onmouseout="startTimer()" 
		      style="cursor:pointer"  
		      href="/browse/">{{title.0}}</a>
<DIV CLASS="popupMenu" ID="menu_browse" STYLE="display:none;">
  <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
  <TR ID="opt_person"><TD><A ONMOUSEOVER="hiLite('person')" ONMOUSEOUT="unLite('person')" ONCLICK="optClick('/person/')">People</A></TD></TR>
  <TR ID="opt_family"><TD><A ONMOUSEOVER="hiLite('family')" ONMOUSEOUT="unLite('family')" ONCLICK="optClick('/family/')">Families</A></TD></TR>
  <TR ID="opt_event"><TD><A ONMOUSEOVER="hiLite('event')" ONMOUSEOUT="unLite('event')" ONCLICK="optClick('/event/')">Events</A></TD></TR>
  <TR ID="opt_note"><TD><A ONMOUSEOVER="hiLite('note')" ONMOUSEOUT="unLite('note')" ONCLICK="optClick('/note/')">Note</A></TD></TR>
  <TR ID="opt_media"><TD><A ONMOUSEOVER="hiLite('media')" ONMOUSEOUT="unLite('media')" ONCLICK="optClick('/media/')">Media</A></TD></TR>
  <TR ID="opt_citation"><TD><A ONMOUSEOVER="hiLite('citation')" ONMOUSEOUT="unLite('citation')" ONCLICK="optClick('/citation/')">Citations</A></TD></TR>
  <TR ID="opt_source"><TD><A ONMOUSEOVER="hiLite('source')" ONMOUSEOUT="unLite('source')" ONCLICK="optClick('/source/')">Sources</A></TD></TR>
  <TR ID="opt_place"><TD><A ONMOUSEOVER="hiLite('place')" ONMOUSEOUT="unLite('place')" ONCLICK="optClick('/place/')">Places</A></TD></TR>
  <TR ID="opt_repository"><TD><A ONMOUSEOVER="hiLite('repsoitory')" ONMOUSEOUT="unLite('repository')" ONCLICK="optClick('/repository/')">Repository</A></TD></TR>
  <TR ID="opt_tag"><TD><A ONMOUSEOVER="hiLite('tag')" ONMOUSEOUT="unLite('tag')" ONCLICK="optClick('/tag/')">Tags</A></TD></TR>
</TABLE>
</DIV>
                </li>
	        {% else %}
                   <a href="/">{{title.0}}</a></li>
	        {% endif %}
	{% endif %}
    {% endfor %}
    {% if user.is_authenticated %}
	 {% if next %}
         <li><a href="/logout/?next={{next}}">Logout</a></li>
	 {% else %}
         <li><a href="/logout">Logout</a></li>
	 {% endif %}         
       {% if user.is_superuser %}
         <li><a href="/admin">Admin</a></li>
       {% endif %}
    {% else %}
	 {% if next %}
         <li><a href="/login/?next={{next}}">Login</a></li>
         {% else %}
         <li><a href="/login/">Login</a></li>
	 {% endif %}
  {% endif %}
    </ul>
    {% endblock %}
    </div>
   </div>
    <div class="grampsweb">
     {% for message in messages %}
        <font color="red">{{message}}</font><br/>
     {% endfor %}
     {% if message %}
        <div id="system_message" class="{{ message_type }}">
           <font color="red">{{message}}</font><br/>
        </div>
    {% endif %}
    {% block content %}
    {% endblock %}
   <div class="content">
    </div>
   </div>
   <div id="footer">
    {% block footer %}
    <p id="createdate">
      <a href="http://www.gramps-project.org/wiki/index.php?title=Gramps-Connect">Gramps-Connect, version {{gramps_version}}</a>.
    </p>
    <p id="copyright">&copy; 2009-2012 <a href="http://www.gramps-project.org/">www.gramps-project.org</a> 
    </p>
    {% endblock %}
   </div>

</body>
</html>