<% #main %>
<% site.stories %>

<% #preview %>
<li><% site.title | site.link %> <span class="small">(<% site.modified short
prefix="Last update: " default="None so far" %>)</span></li>

<% #welcome %>
<p class="storyTitle"><% gettext "Welcome to {0}." <% site.title %> %></p>
<p><% gettext "This site was created by {0} on {1}." <% site.creator link %>
<% site.created long %> %></p>

<% #navigation %>
<li><% site.link main <% gettext Start prefix="<i class='uk-icon-home'></i> " %> %></li>
<li><% site.tags.link main <% gettext Tags %> %></li>
<li><% site.galleries.link main <% gettext Galleries %> %></li>
<% site.comments.link main <% gettext Comments %> prefix=<li> suffix=</li> %>
<li><% site.link rss.xml "<i class='uk-icon-rss'></i> RSS" %></li>
<li class='uk-nav-divider'></li>
<% site.stories.link create <% gettext "Add Story" prefix="<i class='uk-icon-plus'></i> " %> prefix="<li>" suffix=</li> %>
<% site.stories.link main <% gettext Stories %> prefix=<li> suffix=</li> %>
<% site.images.link main <% gettext Images %> prefix=<li> suffix=</li> %>
<% site.files.link main <% gettext Files %> prefix=<li> suffix=</li> %>
<% site.polls.link main <% gettext Polls %> prefix=<li> suffix=</li> %>
<li class='uk-nav-divider'></li>
<% site.link edit <% gettext Settings prefix="<i class='uk-icon-cog'></i> " %> prefix=<li> suffix=</li> %>
<% site.layout.link main <% gettext Layout %> prefix=<li> suffix=</li> %>
<% site.members.link main <% gettext Members %> prefix=<li> suffix=</li> %>
<% site.link referrers <% gettext Referrers %> prefix=<li> suffix=</li> %>
<li class='uk-nav-divider'></li>
<li><% root.title | root.link %></li>

<% #search %>
<form class='uk-form' method='post' action='<% site.href search %>'>
   <input type='text' class='uk-form-small uk-form-width-small' name='q' value='<% request.q encoding="form" %>' required>
   <button type='submit' name='search' value='1' class='uk-button uk-button-small'>
      <% gettext Find %>
   </button>
</form>

<% #robots %>
# See http://www.robotstxt.org for more information
#User-agent: *
#Disallow: /
#User-agent: BadBot
#Disallow: /foo

<% #page %>
<!DOCTYPE html>
<html>
   <head>
      <meta charset='utf-8'>
      <title><% response.title %></title>

      <link rel='icon' type='image/x-icon' href='<% image /ant-icon.png url %>'>
      <link rel='shortcut icon' type='image/x-icon' href='<% image /ant-icon.png url %>'>

      <link rel='search' type='application/opensearchdescription+xml' href='<% site.href search.xml %>' title='<% site.title %>'>

      <link rel='alternate' type='application/rss+xml' title='Stories and comments of <% site.title %>' href='<% site.href rss.xml %>'>
      <link rel='alternate' type='application/rss+xml' title='Stories of <% site.title %>' href='<% site.href stories.xml %>'>
      <link rel='alternate' type='application/rss+xml' title='Comments of <% site.title %>' href='<% site.href comments.xml %>'>
      <link rel='alternate' type='application/rss+xml' title='Sites of <% root.title %>' href='<% root.href updates.xml %>'>

      <link rel='stylesheet' type='text/css' href='<% root.static ../../styles/main.min.css %>'>
      <link rel='stylesheet' type='text/css' href='<% site.href main.css %>'>

      <script type='text/javascript' src='<% site.href main.js %>'></script>
   </head>
   <body class='uk-container-center' style='width: 800px;'>

      <header class='av-header'>
         <div class='av-header-bg'>
            <div class='av-header-bg-chaos'></div>
            <div class='av-header-bg-offset'>
               <div class='av-header-bg-dots'></div>
            </div>
         </div>
         <div class='av-title'>
            <% site.title | site.link title=<% site.tagline %> %>
         </div>
      </header>

      <div class='uk-grid'>
         <div class='uk-width-7-10'>
            <% response.message prefix="<div class='uk-alert' data-uk-alert>" suffix=</div> %>
            <% response.body %>
         </div>

         <div class='uk-width-3-10'>
            <div style='border-left: 1px solid #ddd;'>
               <% membership.status %>
               <% //root.admin.skin $Admin#navigation %>

               <ul class='uk-nav uk-nav-side'>
                  <li class='uk-nav-divider'/>
                  <% site.skin Site#navigation %>
                  <li class='uk-nav-divider'/>
                  <li class='uk-margin-left'>
                     <% site.skin Site#search %>
                  </li>
                  <li class='uk-nav-header'/>
                  <li class='uk-margin-left'>
                     <% site.calendar %>
                  </li>
               </ul>
            </div>

            <!--div class='uk-panel uk-panel-box uk-margin'>
               <h1 class='uk-panel-title'><% gettext Comments %></h1>
               <ul class='uk-nav uk-nav-side'>
                  <% // list comments skin=Story#history %>
               </ul>
            </div-->

         </div>
      </div>

      <footer>
         <hr class='uk-margin-large-top'>
         <div class='uk-text-small uk-margin-bottom' style='float: left;'>
            <div><% gettext 'Created {0}' <% site.created text %> %>.</div>
            <div><% gettext 'Last modified {0}' <% site.modified text %> %>.</div>
         </div>
         <div style='float: right;'>
            <% image /smallchaos.gif | link http://antville.org %> &
         <% image /helma.png | link http://helma.org %>
         </div>
      </footer>

   </body>
</html>

<% #javascript %>
var imgWindow = "";

function openPopup(img, width, height) {
   if (img && width && height) {
      width = Math.min(width + 36, 640);
      height = Math.min(height + 30, 480);
      if (imgWindow.location && !imgWindow.closed)
         imgWindow.close();
      imgWindow = window.open(img, "imgWindow" + width + height,
      "toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes,width=" +
      width + ",height=" + height);
      // imgWindow.focus();
   }
}

$(function () {
   // Highlight the current navigation menu item
   var counter = 0;
   $('.uk-nav li').each(function (index, element) {
      if (counter > 0) {
         return;
      }
      var href = String($(element).find('a').attr('href')) + location.hash;
      if (href && location.href.lastIndexOf(href) + href.length === location.href.length) {
         $(element).addClass('uk-active');
         counter += 1;
      }
   });
});

<% #values %>
<% value "base font" "Helvetica, Arial, sans-serif" %>
<% value "background color" #ffffff %>
<% value "link color" #ff4040 %>
<% value "active link color" #ff4040 %>
<% value "visited link color" #ff4040 %>

<% #stylesheet %>
.av-header {
   margin-top: 5px;

   .av-header-bg {
      position: relative;
   }

   .av-header-bg-chaos {
      float: left;
      width: 262px;
      height: 53px;
      margin-left: -40px;
      background: url('<% image /webloghead.gif url %>');
   }

   .av-header-bg-offset {
      height: 53px;
      margin-left: 222px;
   }

   .av-header-bg-dots {
      position: relative;
      top: 7px;
      height: 38px;
      background: url('<% image /dot.gif url %>');
   }

   .av-title {
      position: relative;
      top: -50px;
      overflow: visible;
      white-space: nowrap;
      font-family: Verdana, Helvetica, Arial, sans-serif;
      font-size: 25px;
      font-weight: bold;
      transform: translateY(50%);
   }
}

.av-poll-result-bar {
   height: 5px;
   overflow: hidden;
   float:left;
   margin-top: 7px;
   margin-right: 10px;
   background-color: <% value "link color" %>;
   font-size: 0px;
}

.av-skin.active {
   background: <% value "background color" %>;
   opacity: .25;
}

.av-skin-edit-link {
   color: <% value "small font color" %> !important;
}

.uk-button-group.av-link-group a {
   border-right: none;
}

.jala-calendar {
   width: 100%;
   text-align: center;
   /*color: <% value "small font color" %>;
   font-family: <% value "small font" %>;
   font-size: <% value "small font size" %>;*/
}

.jala-calendar tbody td, .jala-calendar tfoot td {
   /*font-size: <% value "small font size" %>;*/
}

.jala-calendar tbody th {
   font-weight: normal;
}

.jala-calendar-day {
   width: 14.27%;
   text-align: center;
}

.jala-calendar-left {
   text-align: center;
   vertical-align: baseline;
}

.jala-calendar-right {
   border: 0;
   text-align: center;
   vertical-align: baseline;
}

.jala-calendar-selected {
   border: 1px solid <% value "link color" %>;
}



old {
body {
   background-color: <% value "background color" %>;
   font-family: <% value "base font" %>;
   font-size: <% value "base font size" %>;
   color: <% value "base font color" %>;
}

table.main {
   width: 700px;
}

td {
   font-size: <% value "base font size" %>;
   line-height: 1.2em;
}

td.header {
   max-width: 700px;
   height: 53px;
   padding-left: 40px;
   background-image: url(<% image /webloghead.gif url %>);
   background-repeat: no-repeat;
   font-size: 25px;
   font-weight: bold;
}

td.center {
   width: 70%;
   padding: 25px 20px 10px 40px;
   vertical-align: top;
}

td.right {
   width: 30%;
   padding: 0px 0px 10px 0px;
   vertical-align: top;
   border-left: 1px solid #dddddd;
}

div.boxheader {
   color: <% value "small font color" %>;
   overflow: hidden;
   font-size: 10px;
   padding-left: 6px;
   border-top: 1px solid #dddddd;
}

div.boxline {
   height:1px;
   overflow:hidden;
   border-bottom: 1px solid #dddddd;
}

div.box {
   font-size: <% value "small font size" %>;
   font-family: <% value "small font" %>;
   color: <% value "small font color" %>;
   line-height: 1.4em;
   text-align: right;
   padding: 0em 0em 0.4em 0.4em;
   margin: 0em 0em 0.2em 0em;
}

div.ample { margin-bottom: 5px; }

small, .small {
   font-family: <% value "small font" %>;
   font-size: <% value "small font size" %>;
   color: <% value "small font color" %>;
}

/* this is for mozilla to right-align tables in boxes */
div.box table {
   margin-left: auto;
   margin-right: 0px;
}

p + fieldset {
   width: 360px;
   padding-left: 8px;
   padding-top: 0px;
   margin-top: 6px;
   margin-bottom: 6px;
   border: 1px solid <% value "small font color" %>;
}

p {
   margin-top: 6px;
   margin-bottom: 10px;
}

form { margin: 0px; }

a, a:link {
  text-decoration: none;
  color: <% value "link color" %>;
}
a:visited {color: <% value "visited link color" %>;}
a:active {color: <% value "active link color" %>;}
a:hover {text-decoration: underline;}

.message {
   font-family: <% value "small font" %>;
   font-size: <% value "small font size" %>;
   font-weight: bold;
   padding: 1px;
   margin-top: 6px;
   margin-bottom: 6px;
   color: <% value "big font color" %>;
}

.message input {
   font-size:9px;
   padding:0px;
   margin:0px;
}

.historyItem {
   color: <% value "base font color" %>;
   font-family: <% value "small font" %>;
   font-size: <% value "small font size" %>;
   padding-bottom: 0.3em;
   width: 202px;
   overflow: hidden;
}

.dayHeader {
   font-family: <% value "small font" %>;
   font-size: <% value "small font size" %>;
   color: <% value "small font color" %>;
   font-weight: bold;
   margin-bottom: 20px;
   margin-top: 10px;
   text-align: left;
}

.storyDate {
   font-family: <% value "small font" %>;
   font-size: <% value "small font size" %>;
   color: <% value "small font color" %>;
   margin-bottom: 6px;
}

.storyTitle {
   font-family: <% value "big font" %>;
   font-size: <% value "big font size" %>;
   color: <% value "big font color" %>;
   font-weight: bold;
}

.listSeparator {
   width: 50px;
   height: 1em;
   border-bottom: 2px dotted #dddddd;
   margin-top: 10px;
   margin-bottom: 4px;
}

.title {
   font-family: <% value "big font" %>;
   font-size: <% value "big font size" %>;
   color: <% value "base font color" %>;
   font-weight: bold;
   margin-bottom: 2px;
}

.reply { padding-left: 40px; }

.formTitle {
   width: 380px;
   font-family: <% value "big font" %>;
   font-size: <% value "big font size" %>;
   font-weight: bold;
   border: 1px solid <% value "small font color" %>;
}

.formText {
   width: 380px;
   font-family: <% value "base font" %>;
   font-size: <% value "base font size" %>;
   font-weight: normal;
   border: 1px solid <% value "small font color" %>;
}

.formWide {
   width: 660px;
   font-family: <% value "base font" %>;
   font-size: <% value "base font size" %>;
   font-weight: normal;
}

.searchbox {
   font-size: 11px;
   margin-top: 3px;
}

.colorpickerWidget {
   border: 1px solid #cccccc;
}

.pagelinkTop {
   margin-bottom: 18px;
   padding-bottom:3px;
   border-bottom:1px solid #dddddd;
}

.pagelinkBottom {
   margin-top: 18px;
   padding-top:3px;
   border-top:1px solid #dddddd;
   text-align:right;
}

div.pageNav {
   margin-top: 10px;
   margin-bottom: 0px;
   font-size: 11px;
}

div.pageNavSummary {
   padding: 1px 5px;
   background-color: #efefef;
   border-bottom: 1px solid #cccccc;
   text-align: left;
}

div.pageNavBar {
   padding-top: 1px;
   text-align: right;
}
span.pageNavItem {
   padding-left: 2px;
   padding-right: 2px;
}

span.pageNavSelItem {
   padding-left: 2px;
   padding-right: 2px;
   font-weight: bold;
}

.membergroup {
   font-weight:bold;
   font-size:<% value "big font size" %>;
   margin:10px 0px;
}

.member {
   margin-left:20px;
   margin-bottom:5px;
}

}

/* NEW 1.5 */

.uk-nav-divider + .uk-nav-divider,
.uk-nav-header + .uk-nav-header {
  display: none;
}

.uk-nav-side .uk-nav-divider {
   margin-top: 15px;
   border-top: none;
}
