Commits

Daniel Holth committed 5014ce7

first public release

Comments (0)

Files changed (50)

+syntax:glob
+.*
+*~
+*.egg-info/*
+*.pyc
+0.2
+
+- First public release
+Copyright (c) 2008 Agendaless Consulting and Contributors.
+(http://www.agendaless.com), All Rights Reserved
+
+Uni-form additions copyright 2010 Daniel Holth <dholth@fastmail.fm>, all
+rights reserved.
+License
+
+  A copyright notice accompanies this license document that identifies
+  the copyright holders.
+
+  Redistribution and use in source and binary forms, with or without
+  modification, are permitted provided that the following conditions are
+  met:
+
+  1.  Redistributions in source code must retain the accompanying
+      copyright notice, this list of conditions, and the following
+      disclaimer.
+
+  2.  Redistributions in binary form must reproduce the accompanying
+      copyright notice, this list of conditions, and the following
+      disclaimer in the documentation and/or other materials provided
+      with the distribution.
+
+  3.  Names of the copyright holders must not be used to endorse or
+      promote products derived from this software without prior
+      written permission from the copyright holders.
+
+  4.  If any files are modified, you must cause the modified files to
+      carry prominent notices stating that you changed the files and
+      the date of any change.
+
+  Disclaimer
+
+    THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS ``AS IS'' AND
+    ANY EXPRESSED OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+    TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+    PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+    HOLDERS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+    EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+    TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+    DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+    ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
+    TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
+    THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
+    SUCH DAMAGE.
+
+pyramid_uniform
+===============
+
+uni-form (http://www.sprawsm.com/uni-form/) templates for formish and
+pyramid_formish
+
+This is basically a copy of the pyramid_formish templates, which are in
+turn ported from the original formish templates, with minor structural
+and CSS class name changes necessary for uni-form compatibility.
+
+This should be updated from the latest formish templates (not all widgets will
+work) and with the latest MIT-licensed (no more cc-sa) uni-form...

pyramid_uniform/__init__.py

Empty file added.

pyramid_uniform/templates/index.pt

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
+  <head>
+
+    <title>All Uni-Form Units in Both Layouts</title>
+    
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="Content-Type" content="text/html" />
+          
+    <style type="text/css" media="screen">
+  
+      /* Uni-Form style sheet */
+      @import "${request.script_name}/static/css/uni-form.css";
+
+      /* You don't need these, they are here to tune up the page */
+      body{ margin:30px auto; width:95%; font: normal normal 12px/1.8em "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", sans-serif; }
+      a img{ border:none; }
+      .uniForm .columnRight{ margin: 0 0 1.5em 0; }
+
+    </style>
+
+    <!--[if lte ie 6]>
+      <style type="text/css" media="screen">
+        /*
+        Move these to your IE specific stylesheet if possible
+        */
+        .uniForm,
+        .uniForm fieldset,
+        .uniForm .ctrlHolder,
+        .uniForm .formHint,
+        .uniForm .buttonHolder, 
+        .uniForm .ctrlHolder .multiField,
+        .uniForm .inlineLabel{ zoom:1; }
+
+        .uniForm .inlineLabels label, .uniForm .inlineLabels .label,
+        .uniForm .blockLabels label, .uniForm .blockLabels .label,
+        .uniForm .inlineLabel span{ padding-bottom: .2em; }
+
+        .uniForm .inlineLabel input,
+        .uniForm .inlineLabels .inlineLabel input,
+        .uniForm .blockLabels .inlineLabel input{ margin-top: -.3em; }
+      </style>
+    <![endif]-->
+    
+    <!--[if gt ie 6]>
+      <style type="text/css" media="screen">
+        /*
+        Move these to your IE specific stylesheet if possible
+        */
+        .uniForm,
+        .uniForm fieldset,
+        .uniForm .ctrlHolder,
+        .uniForm .formHint,
+        .uniForm .buttonHolder, 
+        .uniForm .ctrlHolder .multiField,
+        .uniForm .inlineLabel{ zoom:1; }
+
+        .uniForm .inlineLabels label, .uniForm .inlineLabels .label,
+        .uniForm .blockLabels label, .uniForm .blockLabels .label,
+        .uniForm .inlineLabel span{ padding-bottom: .2em; }
+
+        .uniForm .inlineLabel input,
+        .uniForm .inlineLabels .inlineLabel input,
+        .uniForm .blockLabels .inlineLabel input{ margin-top: -.3em; }
+      </style>
+    <![endif]-->
+
+    <script src="${request.script_name}/static/js/jquery.js" type="text/javascript"></script>
+    <script src="${request.script_name}/static/js/uni-form.jquery.js" type="text/javascript"></script>
+
+  </head>
+
+  <body>
+
+<p><a href="http://dnevnikeklektika.com/uni-form/" title="Visit The Uni-Form demo page online"><img src="${request.script_name}/static/img/uni-form-logo.png" width="179" height="72" alt="" /></a></p>
+
+    <div tal:replace="structure form()" />
+
+    <div id="footer">
+      <p>Uni-Form is created by <a href="http://draganbabic.com/" title="Dragan's site">Dragan Babić</a> 2006.-2008. Please share this technique with others including its source. Give respect and get it back.</p>
+    </div>
+
+  </body>
+</html>

pyramid_uniform/templates/static/css/uni-form.css

+/* -------------------------------------------------------------------------------------------- */
+/* Some rights reserved - http: //creativecommons.org/licenses/by-sa/2.5/                       */
+/* -------------------------------------------------------------------------------------------- */
+/* If you want to use Uni-Form all you need to do is keep the copyright intact, you don't need  */
+/* to link to Uni-Form, although it would be swell if you did.                                  */
+/* -------------------------------------------------------------------------------------------- */
+/* Do not edit this file directly, make your changes to uni-form.css in the same folder         */
+/* Keep in mind that wherever you see 'Required property' it means that the property must exist */
+/* -------------------------------------------------------------------------------------------- */
+
+.uniForm{ margin: 0; padding: 0; position: relative; z-index: 1; } /* reset stuff */
+
+  /* Some generals and more resets */
+  .uniForm fieldset{ border: none; margin: 0; padding: 0; }
+    .uniForm fieldset legend{ margin: 0; padding: 0; }
+
+    /* This is the main unit that contains our form elements */
+    .uniForm .ctrlHolder,
+    .uniForm .buttonHolder{ margin: 0; padding: 0; clear: both; }
+
+    /* Clear all floats */ 
+    .uniForm:after,
+      .uniForm .buttonHolder:after, 
+      .uniForm .ctrlHolder:after, 
+        .uniForm .ctrlHolder .multiField:after,
+          .uniForm .inlineLabel:after{ content: "."; display: block; height: 0; line-height: 0; font-size: 0; clear: both; min-height: 0; visibility: hidden; }
+
+    /* A class to be used on a label that contains a checkbox or a radio button */
+    .uniForm .inlineLabel,
+    .uniForm .inlineLabels .inlineLabel,
+    .uniForm .blockLabels .inlineLabel{ width: auto; float: none; margin: 0; display: block; }
+      /* IE shows borders & padding on checkboxes and radio buttons if they are declared on an input element, remove them */
+      /* Legacy/Inheritance fix */
+      .uniForm .inlineLabel input,
+      .uniForm .inlineLabels .inlineLabel input,
+      .uniForm .blockLabels .inlineLabel input{ border: none; padding: 0; margin: 0; }
+
+/* ------------------------------------------------------------------------------ */
+
+    /* Styles for form controls where labels are above the input elements */
+    /* Set the class of the parent (preferably to a fieldset) to .blockLabels */
+
+      .uniForm label,
+      .uniForm .label,
+      .uniForm .blockLabels label,
+      .uniForm .blockLabels .label{ display: block; float: none; padding: 0; line-height: 100%; width: auto; cursor: pointer; }
+      .uniForm button{ cursor: pointer; }
+
+      /* Float the input elements */
+      .uniForm .textInput,
+      .uniForm .blockLabels .textInput,
+      .uniForm .blockLabels .fileUpload,
+      .uniForm .selectInput,
+      .uniForm .blockLabels .selectInput,
+      .uniForm .blockLabels select,
+      .uniForm textarea,
+      .uniForm .blockLabels textarea{ float: left; }
+      
+      /* Postition the hints */
+      .uniForm .formHint,
+      .uniForm .blockLabels .formHint{ float: right; margin: 0; clear: none; }
+      
+      /* Position the elements inside combo boxes (multiple selects/checkboxes/radio buttons per unit) */
+      .uniForm .multiField,
+      .uniForm .blockLabels .multiField{ width: auto; float: left; }
+        .uniForm .multiField .inlineLabel,
+        .uniForm .blockLabels .multiField .inlineLabel{ display: block; margin: 0 0 .5em 0; }
+        .uniForm .multiField .blockLabel,
+        .uniForm .blockLabels .multiField .blockLabel{ float: left; width: auto; margin: 0; }
+        .uniForm .multiField .blockLabel .textInput,
+        .uniForm .multiField .blockLabel .selectInput,
+        .uniForm .multiField .blockLabel select,
+        .uniForm .blockLabels .multiField .blockLabel .textInput,
+        .uniForm .blockLabels .multiField .blockLabel .selectInput,
+        .uniForm .blockLabels .multiField .blockLabel select{ width: 100%; margin: 0; }
+
+/* ------------------------------------------------------------------------------ */
+
+    /* Styles for form controls where labels are in line with the input elements */
+    /* Set the class of the parent (preferably to a fieldset) to .inlineLabels */
+        .uniForm .inlineLabels label,
+        .uniForm .inlineLabels .label{ float: left; margin: 0; padding: 0; line-height: 100%; position: relative; }
+        
+        /* Float the input elements */
+        .uniForm .inlineLabels .textInput,
+        .uniForm .inlineLabels .fileUpload,        
+        .uniForm .inlineLabels .selectInput,
+        .uniForm .inlineLabels select,
+        .uniForm .inlineLabels textarea{ float: left; }
+
+      /* Postition the hints */
+      .uniForm .inlineLabels .formHint{ clear: both; float: none; }
+      .uniForm .inlineLabels .multiField{ float: left; }
+      .uniForm .inlineLabels .multiField .inlineLabel{}
+      .uniForm .inlineLabels .multiField .blockLabel{}
+        .uniForm .inlineLabels .multiField .blockLabel .textInput,
+        .uniForm .inlineLabels .multiField .blockLabel .selectInput,
+        .uniForm .inlineLabels .multiField .blockLabel select{ display: block; width: 100%; float: none; }
+        .uniForm .inlineLabels .multiField select{ float: left; }
+      
+/* ------------------------------------------------------------------------------ */
+
+    /* Required fields asterisk styling for .blockLabels */
+    .uniForm label em,
+    .uniForm .label em,
+    .uniForm .blockLabels label em,
+    .uniForm .blockLabels .label em{ float: left; width: 10px; margin: 0 0 0 -10px; }
+    
+    /* Required fields asterisk styling for .inlineLabels */
+    .uniForm .inlineLabels label em,
+    .uniForm .inlineLabels .label em{ display: block; float: none; margin: 0; position: absolute; right: 0; font-style: normal; font-weight: bold; }
+    
+    .uniForm .inlineLabel em,
+    .uniForm .blockLabels .inlineLabel em,
+    .uniForm .inlineLabels .inlineLabel em{ float: left; width: 10px; margin: 0 0 0 -27px; }
+    
+    .uniForm label small{ font-size: .75em; color: #777; }
+    
+    .uniForm .inlineLabels .noLabel .inlineLabel{ margin-left: 34%; /* <- Match to width of label + gap to field */ }
+
+/* ------------------------------------------------------------------------------ */
+
+    /* Messages */
+    .uniForm #errorMsg,
+    .uniForm .error{
+    }
+      .uniForm #errorMsg dt,
+      .uniForm #errorMsg h3{
+      }
+      .uniForm #errorMsg dd{
+      }
+        .uniForm #errorMsg ol{
+        }
+          .uniForm #errorMsg ol li{
+          }
+      .uniForm .errorField{
+      }
+    
+    .uniForm #OKMsg{
+    }
+
+/* ------------------------------------------------------------------------------ */
+
+    /* Columns */
+    
+    .uniForm .col{ float: left; }
+    .uniForm .col.first{}
+    .uniForm .col.last{}
+
+/* ------------------------------------------------------------------------------ */
+/* ########################## On to the styling ################################# */
+/* ------------------------------------------------------------------------------ */
+
+  /* Generals */
+  .uniForm fieldset{}
+    .uniForm legend{ color: #333; font-weight: bold; font-size: 100%; margin: 0; padding: 1.5em 0; }
+    
+    /* This is the main unit that contains our form elements */
+    .uniForm .ctrlHolder{ padding: 12px; border-bottom: 1px solid #c3d7e6; }
+    
+    .uniForm .buttonHolder{ text-align: right; margin: 1.5em 0 0 0; }
+      .uniForm .primaryAction{ font-weight: bold; }
+      .uniForm .resetButton, .uniForm .secondaryAction{ float: left; text-align: left; background-color: yellow; }
+      .uniForm button.secondaryAction{ background: transparent; border: none; color: #006280; /* Match the color of your links */ margin: 0; padding: 0; text-decoration: underline; }
+      
+    
+    /* This class gets added to div.ctrlHolder to highlight the row */
+    .uniForm .focused{ background: #fffcdf; }
+      
+      /* .inlineLabel is used for inputs within labels - checkboxes and radio buttons */
+      .uniForm .inlineLabel input,
+      .uniForm .inlineLabels .inlineLabel input,
+      .uniForm .blockLabels .inlineLabel input{ float: none; display: inline; margin: 0; }
+        .uniForm .inlineLabel span{ float: left; width: 90%; }
+      
+      /* .inlineLabel within .buttonHolder (useful for TOS checkboxes) */
+      .uniForm .buttonHolder .inlineLabel{ float: left; margin: .25em 0 0 0; text-align: left; }
+      
+      /* Classes to control the widths of the fields */
+      .uniForm .small { width: 30% !important; }
+      .uniForm .medium{ width: 45% !important; }
+      .uniForm .large {  } /* Large is default and should match the value you set for .textInput, textarea or select */
+      .uniForm .auto  { width: auto !important; }
+        
+/* ------------------------------------------------------------------------------ */
+
+    /* .blockLabels (default style, will be applied even if you don't class the parent element) */
+    .uniForm .blockLabels .ctrlHolder{}
+      
+      .uniForm label,
+      .uniForm .blockLabels label,
+      .uniForm .blockLabels .label{ margin: 0 0 .5em 0; }
+      
+      .uniForm .textInput,
+      .uniForm .blockLabels .textInput,
+      .uniForm .blockLabels .fileUpload{ width: 53%; /* <- Required property */ }
+    
+      .uniForm .selectInput,
+      .uniForm select,
+      .uniForm .blockLabels .selectInput,
+      .uniForm .blockLabels select{ width: 53.5%; /* <- Required property */ }
+      .uniForm textarea,
+      .uniForm .blockLabels textarea{ width: 53%; /* <- Required property */ height: 12em; }
+
+      .uniForm .formHint,
+      .uniForm .blockLabels .formHint{ width: 45%; /* <- Required property */ font-size: .9em; color: #777; }
+      
+      .uniForm .multiField,
+      .uniForm .blockLabels .multiField{ width: 53%; }
+        /* Inline labels within multifields contain radios and checkboxes */
+        .uniForm .multiField .inlineLabel,
+        .uniForm .blockLabels .multiField .inlineLabel{ display: block; clear: both; float: none; margin: 0 12px .5em 0; }
+          .uniForm .multiField .inlineLabel input,
+          .uniForm .blockLabels .multiField .inlineLabel input{ float: left; margin: 0 .5em 0 0; }
+          /* Block labels within multifields contain selects and text inputs */
+        .uniForm .multiField .blockLabel,
+        .uniForm .blockLabels .multiField .blockLabel{ width: 30%; margin: 0 10px 0 0; }
+        .uniForm .multiField .blockLabel .textInput,
+        .uniForm .multiField .blockLabel .selectInput,
+        .uniForm .multiField .blockLabel select,
+        .uniForm .blockLabels .multiField .blockLabel .textInput,
+        .uniForm .blockLabels .multiField .blockLabel .selectInput,
+        .uniForm .blockLabels .multiField .blockLabel select{ width: 100%; margin: .3em 0 0 0; }
+
+/* ------------------------------------------------------------------------------ */
+
+    /* .inlineLabels */
+    .uniForm .inlineLabels .ctrlHolder{}
+    
+    .uniForm .inlineLabels label,
+    .uniForm .inlineLabels .label{ width: 32%; /* <- Required property */ margin: .3em 2% 0 0; /* <- Required property */ }
+    
+    .uniForm .inlineLabels .textInput,
+    .uniForm .inlineLabels .fileUpload,
+    .uniForm .inlineLabels .selectInput,
+    .uniForm .inlineLabels select,
+    .uniForm .inlineLabels textarea{ width: 64%; /* <- Required property */ }
+    .uniForm .inlineLabels textarea{ height: 12em; }
+
+    .uniForm .inlineLabels .formHint{ width: auto; /* <- Required property */ margin-top: 0; margin-left: 34%; font-size: .9em; color: #777; position: static; }
+    
+    .uniForm .inlineLabels .multiField{ width: 66%; /* <- Required property */ margin: 0 0 .3em 0; }
+      .uniForm .inlineLabels .multiField .inlineLabel{ display: block; margin: 0 0 .5em 0; }
+        .uniForm .inlineLabels .multiField .inlineLabel input{ float: left; margin: 0 .5em 0 0; }
+      .uniForm .inlineLabels .multiField .blockLabel{ float: left; width: 26%; margin: 0 3% 0 0; }
+      .uniForm .inlineLabels .multiField .blockLabel .textInput,
+      .uniForm .inlineLabels .multiField .blockLabel .selectInput,
+      .uniForm .inlineLabels .multiField .blockLabel select{ width: 100%; margin: .3em 0 0 0; }
+
+/* Focus pseudoclasses */
+.uniForm .ctrlHolder .textInput:focus{ outline: none; /* Get rid of the 'glow' effect in WebKit, optional */ }
+.uniForm .ctrlHolder textarea:focus{ outline: none; /* Get rid of the 'glow' effect in WebKit, optional */ }
+.uniForm div.focused .formHint{ color: #333; }
+
+/* Columns (they are floated left by default) */
+.uniForm .col{ width: 47.9%; /* <- Required property */ margin: 0 2% 20px 0; }
+/* Use .first and .last classes to control the layout/spacing of your columns */
+.uniForm .col.first{ width: 49%; /* <- Required property */ float: left; clear: none; }
+.uniForm .col.last{ width: 49%; /* <- Required property */ float: right; clear: none; margin-right: 0; }
+
+/* Messages */
+.uniForm #errorMsg{ background: #ffdfdf; border: 1px solid #df7d7d; border-width: 1px 0; margin: 0 0 1.5em 0; padding: 7px; }
+.uniForm .error{ background: #ffdfdf; border: 1px solid #df7d7d; border-width: 1px 0; }
+
+  .uniForm #errorMsg dt, .uniForm #errorMsg h3{ margin: 0 0 .5em 0; font-size: 100%; line-height: 100%; font-weight: bold; }
+  .uniForm #errorMsg dd{ margin: 0; padding: 0; }
+    .uniForm #errorMsg ol{ margin: 0; padding: 0; }
+      .uniForm #errorMsg ol li{ margin: 0; padding: 2px; list-style-position: inside; border-bottom: 1px dotted #df7d7d; position: relative; }
+    .uniForm .errorField{ color: #af4c4c; margin: 0 0 6px 0; padding: 4px; background: #ffbfbf; }
+
+.uniForm #OKMsg{ background: #C8FFBF; border: 1px solid #A2EF95; border-width: 1px 0; margin: 0 0 1.5em 0; padding: 7px; }
+  .uniForm #OKMsg p{ margin: 0; }
+
+/*
+IT IS STRONGLY ADVISED TO MAKE YOUR CHANGES AFTER THIS COMMENT BY REPEATING (COPYING) THE SELECTOR FROM ABOVE, 
+AND MODIFYING IT WITH YOUR OWN PROPERTIES/VALUES. THIS IS RECOMMENDED BECAUSE IF YOU HAPPEN TO RUN INTO TROUBLE, 
+YOU CAN VERY EASILY REVERT TO A GENERIC STYLE OF UNI-FORM. BEST OF LUCK... 
+*/
+
+/* ------------------------------------------------------------------------------ */

pyramid_uniform/templates/static/fauxform.html

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
+  <head>
+
+    <title>Uni–Form</title>
+    
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="Content-Type" content="text/html" />
+          
+    <style type="text/css" media="screen">
+  
+      /* Uni-Form style sheet */
+      @import "css/uni-form.css";
+      
+      /* You don't need these, they are here to tune up the page */
+      body{ margin:30px auto; width:75%; font: normal normal 12px/1.8em "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", sans-serif; }
+        a img{ border:none; }
+      
+      a:link, a:visited{ color: #006280; }
+      a:hover{ text-decoration: none; }
+      
+        .uniForm{ padding: 20px; background: #F2FAFF; -webkit-border-radius: 7px; }
+            
+          .uniForm .inlineLabels .ctrlHolder .multiField.phoneNum .blockLabel{ width: auto; }
+            .uniForm .inlineLabels .ctrlHolder .multiField .blockLabel #phone_ccode.textInput,
+            .uniForm .inlineLabels .ctrlHolder .multiField .blockLabel #phone_area.textInput{ width: 4em; }
+        
+        .intro{ font-size: 1.25em; line-height: 1.25; margin: 3em 0; color: #555; letter-spacing: -1px; }
+        #footer{ text-align: center; color: #777; }
+
+    </style>
+
+    <!--[if lte ie 7]>
+      <style type="text/css" media="screen">
+        /*
+        Move these to your IE6/7 specific stylesheet if possible
+        */
+        .uniForm, .uniForm fieldset, .uniForm .ctrlHolder, .uniForm .formHint, .uniForm .buttonHolder, .uniForm .ctrlHolder .multiField, .uniForm .inlineLabel{ zoom:1; }
+        .uniForm .inlineLabels label, .uniForm .inlineLabels .label, .uniForm .blockLabels label, .uniForm .blockLabels .label, .uniForm .inlineLabel span{ padding-bottom: .2em; }
+        .uniForm .inlineLabel input, .uniForm .inlineLabels .inlineLabel input, .uniForm .blockLabels .inlineLabel input{ margin-top: -.3em; }
+      </style>
+    <![endif]-->
+
+    <script src="js/jquery.js" type="text/javascript"></script>
+    <script src="js/uni-form.jquery.js" type="text/javascript"></script>
+
+  </head>
+
+  <body>
+
+    <h1><a href="http://dnevnikeklektika.com/uni-form/" title="Visit The Uni-Form demo page online"><img src="img/uni-form-logo.png" width="179" height="72" alt="" /></a></h1>
+    
+    <p class="intro">
+      This is an example form demonstrating all of the units currently available in two different formats — <code>.blockLabels</code> and <code>.inlineLabels</code> — along with suggested message handling and form actions — primary which is the button and secondary which is represented as a link. 
+    </p>
+
+    <form action="/" class="uniForm">
+
+      <div id="errorMsg">
+        <h3>Ooops! Your error message title</h3>
+          <ol>
+            <li><a href="#error1" title="Jump to error">Error number one</a></li>
+            <li><a href="#error2" title="Jump to error">Error number two</a></li>
+          </ol>
+      </div>
+      
+      <div id="OKMsg">
+        <p>
+          Looks like everything went OK! Yay!
+        </p>
+      </div>
+            
+      <fieldset>
+        <legend>Block Labels (no class applied to show defaulting to blockLabels layout)</legend>
+        
+        <div class="ctrlHolder">
+          <label for="bl_email_s"><em>*</em> One line input field (small)</label>
+          <input name="bl_email_s" id="bl_email_s" value="" size="35" maxlength="50" type="text" class="textInput small"/>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+        
+        <div class="ctrlHolder error" id="error1">
+          <label for="bl_email_m"><em>*</em> One line input field (medium)</label>
+          <input name="bl_email_m" id="bl_email_m" value="" size="35" maxlength="50" type="text" class="textInput medium"/>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+        
+        <div class="ctrlHolder">
+          <label for="bl_email_l"><em>*</em> One line input field (large/default)</label>
+          <input name="bl_email_l" id="bl_email_l" value="" size="35" maxlength="50" type="text" class="textInput large"/>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+        
+        <div class="ctrlHolder">
+          <label for="bl_email_a"><em>*</em> One line input field (auto, set width through <code>size=""</code> attribute)</label>
+          <input name="bl_email_a" id="bl_email_a" value="" size="15" maxlength="50" type="text" class="textInput auto"/>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+        
+        <div class="ctrlHolder">
+          <label for="bl_skills_interests"><em>*</em> Textarea</label>
+          <textarea name="bl_skills_interests" id="bl_skills_interests" rows="25" cols="25"></textarea>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+        
+        <div class="ctrlHolder">
+          <label for="bl_country">Select box (with <code>class="auto"</code> applied for width control)</label>
+          <select name="bl_country" id="bl_country" class="selectInput auto">
+            <option value="">Choose your country</option>
+            <option value="AL">Albania</option><option value="DZ">Algeria</option><option value="AS">American Samoa</option><option value="AD">Andorra</option><option value="AI">Anguilla</option><option value="AG">Antigua &amp; Barbuda</option><option value="AR">Argentina</option><option value="AW">Aruba</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AP">Azores</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option><option value="BD">Bangladesh</option><option value="BB">Barbados</option><option value="BY">Belarus</option><option value="BE">Belgium</option><option value="BZ">Belize</option><option value="BJ">Benin</option><option value="BM">Bermuda</option><option value="BO">Bolivia</option><option value="BL">Bonaire</option><option value="BA">Bosnia and Herzegovina</option><option value="BW">Botswana</option><option value="BR">Brazil</option><option value="VG">British Virgin Is.</option><option value="BN">Brunei</option><option value="BG">Bulgaria</option><option value="BF">Burkina Faso</option><option value="BI">Burundi</option><option value="KH">Cambodia</option><option value="CM">Cameroon</option><option value="CA">Canada</option><option value="IC">Canary Islands</option><option value="CV">Cape Verde Islands</option><option value="KY">Cayman Islands</option><option value="CF">Central African Rep.</option><option value="TD">Chad</option><option value="CD">Channel Islands</option><option value="CL">Chile</option><option value="CN">China</option><option value="CO">Colombia</option><option value="CG">Congo</option><option value="CK">Cook Islands</option><option value="CR">Costa Rica</option><option value="HR">Croatia</option><option value="CB">Curacao</option><option value="CY">Cyprus</option><option value="CZ">Czech Republic</option><option value="DK">Denmark</option><option value="DJ">Djibouti</option><option value="DM">Dominica</option><option value="DO">Dominican Republic</option><option value="EC">Ecuador</option><option value="EG">Egypt</option><option value="SV">El Salvador</option><option value="EN">England</option><option value="GQ">Equitorial Guinea</option><option value="ER">Eritrea</option><option value="EE">Estonia</option><option value="ET">Ethiopia</option><option value="FO">Faeroe Islands</option><option value="FM">Fed.States of Micronesia</option><option value="FJ">Fiji</option><option value="FI">Finland</option><option value="FR">France</option><option value="GF">French Guiana</option><option value="PF">French Polynesia</option><option value="GA">Gabon</option><option value="GM">Gambia</option><option value="GE">Georgia</option><option value="DE">Germany</option><option value="GH">Ghana</option><option value="GI">Gibraltar</option><option value="GR">Greece</option><option value="GL">Greenland</option><option value="GD">Grenada</option><option value="GP">Guadeloupe</option><option value="GU">Guam</option><option value="GT">Guatemala</option><option value="GN">Guinea</option><option value="GW">Guinea-Bissau</option><option value="GY">Guyana</option><option value="HT">Haiti</option><option value="HO">Holland</option><option value="HN">Honduras</option><option value="HK">Hong Kong</option><option value="HU">Hungary</option><option value="IS">Iceland</option><option value="IN">India</option><option value="ID">Indonesia</option><option value="IR">Ireland</option><option value="IL">Israel</option><option value="IT">Italy</option><option value="CI">Ivory Coast</option><option value="JM">Jamaica</option><option value="JP">Japan</option><option value="JO">Jordan</option><option value="KZ">Kazakhstan</option><option value="KE">Kenya</option><option value="KI">Kiribati</option><option value="KO">Kosrae</option><option value="KW">Kuwait</option><option value="KG">Kyrgyzstan</option><option value="LA">Laos</option><option value="LV">Latvia</option><option value="LB">Lebanon</option><option value="LS">Lesotho</option><option value="LR">Liberia</option><option value="LI">Liechtenstein</option><option value="LT">Lithuania</option><option value="LU">Luxembourg</option><option value="MO">Macau</option><option value="MK">Macedonia</option><option value="MG">Madagascar</option><option value="ME">Madeira</option><option value="MW">Malawi</option><option value="MY">Malaysia</option><option value="MV">Maldives</option><option value="ML">Mali</option><option value="MT">Malta</option><option value="MH">Marshall Islands</option><option value="MQ">Martinique</option><option value="MR">Mauritania</option><option value="MU">Mauritius</option><option value="MX">Mexico</option><option value="MD">Moldova</option><option value="MC">Monaco</option><option value="MN">Montenegro</option><option value="MS">Montserrat</option><option value="MA">Morocco</option><option value="MZ">Mozambique</option><option value="MM">Myanmar</option><option value="NA">Namibia</option><option value="NP">Nepal</option><option value="NL">Netherlands</option><option value="AN">Netherlands Antilles</option><option value="NC">New Caledonia</option><option value="NZ">New Zealand</option><option value="NI">Nicaragua</option><option value="NE">Niger</option><option value="NG">Nigeria</option><option value="NF">Norfolk Island</option><option value="NB">N. Ireland</option><option value="MP">N. Mariana Islands</option><option value="NO">Norway</option><option value="OM">Oman</option><option value="PK">Pakistan</option><option value="PW">Palau</option><option value="PA">Panama</option><option value="PG">Papua New Guinea</option><option value="PY">Paraguay</option><option value="PE">Peru</option><option value="PH">Philippines</option><option value="PL">Poland</option><option value="PO">Ponape</option><option value="PT">Portugal</option><option value="PR">Puerto Rico</option><option value="QA">Qatar</option><option value="IE">Republic of Ireland</option><option value="YE">Republic of Yemen</option><option value="RE">Reunion</option><option value="RO">Romania</option><option value="RT">Rota</option><option value="RU">Russia</option><option value="RW">Rwanda</option><option value="SS">Saba</option><option value="SP">Saipan</option><option value="SA">Saudi Arabia</option><option value="SF">Scotland</option><option value="SN">Senegal</option><option value="RS">Serbia</option><option value="SC">Seychelles</option><option value="SL">Sierra Leone</option><option value="SG">Singapore</option><option value="SK">Slovakia</option><option value="SI">Slovenia</option><option value="SB">Solomon Islands</option><option value="ZA">South Africa</option><option value="KR">South Korea</option><option value="ES">Spain</option><option value="LK">Sri Lanka</option><option value="NT">St.Barthelemy</option><option value="SW">St.Christopher</option><option value="SX">St.Croix</option><option value="EU">St.Eustatius</option><option value="UV">St.John</option><option value="KN">St.Kitts &amp; Nevis</option><option value="LC">St.Lucia</option><option value="MB">St.Maarten</option><option value="TB">St.Martin</option><option value="VL">St.Thomas</option><option value="VC">St.Vincent &amp; Grenadines</option><option value="SD">Sudan</option><option value="SR">Suriname</option><option value="SZ">Swaziland</option><option value="SE">Sweden</option><option value="CH">Switzerland</option><option value="SY">Syria</option><option value="TA">Tahiti</option><option value="TW">Taiwan</option><option value="TJ">Tajikistan</option><option value="TZ">Tanzania</option><option value="TH">Thailand</option><option value="TI">Tinian</option><option value="TG">Togo</option><option value="TO">Tonga</option><option value="TL">Tortola</option><option value="TT">Trinidad &amp; Tobago</option><option value="TU">Truk</option><option value="TN">Tunisia</option><option value="TR">Turkey</option><option value="TC">Turks &amp; Caicos Is.</option><option value="TV">Tuvalu</option><option value="UG">Uganda</option><option value="UA">Ukraine</option><option value="UI">Union Island</option><option value="AE">United Arab Emirates</option><option value="GB">United Kingdom</option><option value="US" selected="selected">United States</option><option value="UY">Uruguay</option><option value="VI">US Virgin Islands</option><option value="UZ">Uzbekistan</option><option value="VU">Vanuatu</option><option value="VE">Venezuela</option><option value="VN">Vietnam</option><option value="VR">Virgin Gorda</option><option value="WK">Wake Island</option><option value="WL">Wales</option><option value="WF">Wallis &amp; Futuna Is.</option><option value="WS">Western Samoa</option><option value="YA">Yap</option><option value="ZR">Zaire</option><option value="ZM">Zambia</option><option value="ZW">Zimbabwe</option>
+          </select>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+        
+        <div class="ctrlHolder">
+          <label for="bl_avatar">File upload</label>
+          <input type="file" id="bl_avatar" name="bl_avatar" size="35" class="fileUpload" />
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+
+        <div class="ctrlHolder">
+          <p class="label">
+            <em>*</em> Multifield with select boxes
+          </p>
+          <div class="multiField">
+            <label for="bl_dob_month" class="blockLabel"><span>Month</span> <select id="bl_dob_month" name="bl_dob_month"><option value="1">January</option></select></label>
+            <label for="bl_dob_day" class="blockLabel"><span>Day</span> <select id="bl_dob_day" name="bl_dob_day"><option value="1">1</option></select></label>
+            <label for="bl_dob_year" class="blockLabel"><span>Year</span> <select id="bl_dob_year" name="bl_dob_year"><option value="1">1908</option></select></label>
+          </div>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+        
+        <div class="ctrlHolder">
+          <p class="label">
+            <em>*</em> Multifield with text inputs
+          </p>
+          <div class="multiField">
+            <label for="bl_home_phone" class="blockLabel"><span>Home</span> <input type="text" name="bl_home_phone" id="bl_home_phone" class="textInput"/></label>
+            <label for="bl_work_phone" class="blockLabel"><span>Work</span> <input type="text" name="bl_work_phone" id="bl_work_phone" class="textInput"/></label>
+            <label for="bl_cell_phone" class="blockLabel"><span>Mobile</span> <input type="text" id="bl_cell_phone" class="textInput"/></label>
+          </div>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+
+        <div class="ctrlHolder">
+          <p class="label">
+            <em>*</em> Multifield with radios
+          </p>
+          <div class="multiField">
+            <label for="bl_gender_male" class="inlineLabel"><input name="bl_gender" id="bl_gender_male" value="1" type="radio" checked="checked"/> <span>Male</span></label>
+            <label for="bl_gender_female" class="inlineLabel"><input name="bl_gender" id="bl_gender_female" value="1" type="radio"/> <span>Female</span></label>
+          </div>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+        
+        <div class="ctrlHolder">
+          <p class="label">
+            <em>*</em> Multifield with checkboxes
+          </p>
+          <div class="multiField">
+            <label for="bl_tos_agree" class="inlineLabel"><input name="bl_tos" id="bl_tos_agree" value="1" type="checkbox" checked="checked"/> <span>I have read and agree with the <a href="#">terms and conditions</a></span></label>
+            <label for="bl_tos_gambling" class="inlineLabel"><input name="bl_tos" id="bl_tos_gambling" value="1" type="checkbox"/> <span>I will use the uploaded funds for non-gambling purposes</span></label>
+          </div>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+
+      </fieldset>
+      
+      <fieldset class="inlineLabels">
+        <legend>Inline Labels</legend>		
+        
+        <div class="ctrlHolder">
+          <label for="il_email_s"><em>*</em> One line input field (small)</label>
+          <input name="il_email_s" id="il_email_s" value="" size="35" maxlength="50" type="text" class="textInput small"/>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+        
+        <div class="ctrlHolder">
+          <label for="il_email_m"><em>*</em> One line input field (medium)</label>
+          <input name="il_email_m" id="il_email_m" value="" size="35" maxlength="50" type="text" class="textInput medium"/>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+        
+        <div class="ctrlHolder">
+          <label for="il_email_l"><em>*</em> One line input field (large/default)</label>
+          <input name="il_email_l" id="il_email_l" value="" size="35" maxlength="50" type="text" class="textInput large"/>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+        
+        <div class="ctrlHolder">
+          <label for="il_email_a"><em>*</em> One line input field (auto, set width through <code>size=""</code> attribute)</label>
+          <input name="il_email_a" id="il_email_a" value="" size="15" maxlength="50" type="text" class="textInput auto"/>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+        
+        <div class="ctrlHolder">
+          <label for="il_skills_interests"><em>*</em> Textarea</label>
+          <textarea name="il_skills_interests" id="il_skills_interests" rows="25" cols="25"></textarea>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+        
+        <div class="ctrlHolder">
+          <label for="il_country">Select box</label>
+          <select name="il_country" id="il_country" class="selectInput">
+            <option value="">Please select</option>
+            <option value="AL">Albania</option><option value="DZ">Algeria</option><option value="AS">American Samoa</option><option value="AD">Andorra</option><option value="AI">Anguilla</option><option value="AG">Antigua &amp; Barbuda</option><option value="AR">Argentina</option><option value="AW">Aruba</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AP">Azores</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option><option value="BD">Bangladesh</option><option value="BB">Barbados</option><option value="BY">Belarus</option><option value="BE">Belgium</option><option value="BZ">Belize</option><option value="BJ">Benin</option><option value="BM">Bermuda</option><option value="BO">Bolivia</option><option value="BL">Bonaire</option><option value="BA">Bosnia and Herzegovina</option><option value="BW">Botswana</option><option value="BR">Brazil</option><option value="VG">British Virgin Is.</option><option value="BN">Brunei</option><option value="BG">Bulgaria</option><option value="BF">Burkina Faso</option><option value="BI">Burundi</option><option value="KH">Cambodia</option><option value="CM">Cameroon</option><option value="CA">Canada</option><option value="IC">Canary Islands</option><option value="CV">Cape Verde Islands</option><option value="KY">Cayman Islands</option><option value="CF">Central African Rep.</option><option value="TD">Chad</option><option value="CD">Channel Islands</option><option value="CL">Chile</option><option value="CN">China</option><option value="CO">Colombia</option><option value="CG">Congo</option><option value="CK">Cook Islands</option><option value="CR">Costa Rica</option><option value="HR">Croatia</option><option value="CB">Curacao</option><option value="CY">Cyprus</option><option value="CZ">Czech Republic</option><option value="DK">Denmark</option><option value="DJ">Djibouti</option><option value="DM">Dominica</option><option value="DO">Dominican Republic</option><option value="EC">Ecuador</option><option value="EG">Egypt</option><option value="SV">El Salvador</option><option value="EN">England</option><option value="GQ">Equitorial Guinea</option><option value="ER">Eritrea</option><option value="EE">Estonia</option><option value="ET">Ethiopia</option><option value="FO">Faeroe Islands</option><option value="FM">Fed.States of Micronesia</option><option value="FJ">Fiji</option><option value="FI">Finland</option><option value="FR">France</option><option value="GF">French Guiana</option><option value="PF">French Polynesia</option><option value="GA">Gabon</option><option value="GM">Gambia</option><option value="GE">Georgia</option><option value="DE">Germany</option><option value="GH">Ghana</option><option value="GI">Gibraltar</option><option value="GR">Greece</option><option value="GL">Greenland</option><option value="GD">Grenada</option><option value="GP">Guadeloupe</option><option value="GU">Guam</option><option value="GT">Guatemala</option><option value="GN">Guinea</option><option value="GW">Guinea-Bissau</option><option value="GY">Guyana</option><option value="HT">Haiti</option><option value="HO">Holland</option><option value="HN">Honduras</option><option value="HK">Hong Kong</option><option value="HU">Hungary</option><option value="IS">Iceland</option><option value="IN">India</option><option value="ID">Indonesia</option><option value="IR">Ireland</option><option value="IL">Israel</option><option value="IT">Italy</option><option value="CI">Ivory Coast</option><option value="JM">Jamaica</option><option value="JP">Japan</option><option value="JO">Jordan</option><option value="KZ">Kazakhstan</option><option value="KE">Kenya</option><option value="KI">Kiribati</option><option value="KO">Kosrae</option><option value="KW">Kuwait</option><option value="KG">Kyrgyzstan</option><option value="LA">Laos</option><option value="LV">Latvia</option><option value="LB">Lebanon</option><option value="LS">Lesotho</option><option value="LR">Liberia</option><option value="LI">Liechtenstein</option><option value="LT">Lithuania</option><option value="LU">Luxembourg</option><option value="MO">Macau</option><option value="MK">Macedonia</option><option value="MG">Madagascar</option><option value="ME">Madeira</option><option value="MW">Malawi</option><option value="MY">Malaysia</option><option value="MV">Maldives</option><option value="ML">Mali</option><option value="MT">Malta</option><option value="MH">Marshall Islands</option><option value="MQ">Martinique</option><option value="MR">Mauritania</option><option value="MU">Mauritius</option><option value="MX">Mexico</option><option value="MD">Moldova</option><option value="MC">Monaco</option><option value="MN">Montenegro</option><option value="MS">Montserrat</option><option value="MA">Morocco</option><option value="MZ">Mozambique</option><option value="MM">Myanmar</option><option value="NA">Namibia</option><option value="NP">Nepal</option><option value="NL">Netherlands</option><option value="AN">Netherlands Antilles</option><option value="NC">New Caledonia</option><option value="NZ">New Zealand</option><option value="NI">Nicaragua</option><option value="NE">Niger</option><option value="NG">Nigeria</option><option value="NF">Norfolk Island</option><option value="NB">N. Ireland</option><option value="MP">N. Mariana Islands</option><option value="NO">Norway</option><option value="OM">Oman</option><option value="PK">Pakistan</option><option value="PW">Palau</option><option value="PA">Panama</option><option value="PG">Papua New Guinea</option><option value="PY">Paraguay</option><option value="PE">Peru</option><option value="PH">Philippines</option><option value="PL">Poland</option><option value="PO">Ponape</option><option value="PT">Portugal</option><option value="PR">Puerto Rico</option><option value="QA">Qatar</option><option value="IE">Republic of Ireland</option><option value="YE">Republic of Yemen</option><option value="RE">Reunion</option><option value="RO">Romania</option><option value="RT">Rota</option><option value="RU">Russia</option><option value="RW">Rwanda</option><option value="SS">Saba</option><option value="SP">Saipan</option><option value="SA">Saudi Arabia</option><option value="SF">Scotland</option><option value="SN">Senegal</option><option value="RS">Serbia</option><option value="SC">Seychelles</option><option value="SL">Sierra Leone</option><option value="SG">Singapore</option><option value="SK">Slovakia</option><option value="SI">Slovenia</option><option value="SB">Solomon Islands</option><option value="ZA">South Africa</option><option value="KR">South Korea</option><option value="ES">Spain</option><option value="LK">Sri Lanka</option><option value="NT">St.Barthelemy</option><option value="SW">St.Christopher</option><option value="SX">St.Croix</option><option value="EU">St.Eustatius</option><option value="UV">St.John</option><option value="KN">St.Kitts &amp; Nevis</option><option value="LC">St.Lucia</option><option value="MB">St.Maarten</option><option value="TB">St.Martin</option><option value="VL">St.Thomas</option><option value="VC">St.Vincent &amp; Grenadines</option><option value="SD">Sudan</option><option value="SR">Suriname</option><option value="SZ">Swaziland</option><option value="SE">Sweden</option><option value="CH">Switzerland</option><option value="SY">Syria</option><option value="TA">Tahiti</option><option value="TW">Taiwan</option><option value="TJ">Tajikistan</option><option value="TZ">Tanzania</option><option value="TH">Thailand</option><option value="TI">Tinian</option><option value="TG">Togo</option><option value="TO">Tonga</option><option value="TL">Tortola</option><option value="TT">Trinidad &amp; Tobago</option><option value="TU">Truk</option><option value="TN">Tunisia</option><option value="TR">Turkey</option><option value="TC">Turks &amp; Caicos Is.</option><option value="TV">Tuvalu</option><option value="UG">Uganda</option><option value="UA">Ukraine</option><option value="UI">Union Island</option><option value="AE">United Arab Emirates</option><option value="GB">United Kingdom</option><option value="US" selected="selected">United States</option><option value="UY">Uruguay</option><option value="VI">US Virgin Islands</option><option value="UZ">Uzbekistan</option><option value="VU">Vanuatu</option><option value="VE">Venezuela</option><option value="VN">Vietnam</option><option value="VR">Virgin Gorda</option><option value="WK">Wake Island</option><option value="WL">Wales</option><option value="WF">Wallis &amp; Futuna Is.</option><option value="WS">Western Samoa</option><option value="YA">Yap</option><option value="ZR">Zaire</option><option value="ZM">Zambia</option><option value="ZW">Zimbabwe</option>
+          </select>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+        
+        <div class="ctrlHolder">
+          <label for="il_avatar">File upload</label>
+          <input type="file" id="il_avatar" name="il_avatar" size="35" class="fileUpload" />
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+
+        <div class="ctrlHolder error" id="error2">
+          <p class="label">
+            <em>*</em> Multifield with select boxes
+          </p>
+          <div class="multiField">
+            <label for="il_dob_month" class="blockLabel"><span>Month</span> <select id="il_dob_month" name="il_dob_month"><option value="1">January</option></select></label>
+            <label for="il_dob_day" class="blockLabel"><span>Day</span> <select id="il_dob_day" name="il_dob_day"><option value="1">1</option></select></label>
+            <label for="il_dob_year" class="blockLabel"><span>Year</span> <select id="il_dob_year" name="il_dob_year"><option value="1">1908</option></select></label>
+          </div>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+        
+        <div class="ctrlHolder">
+          <p class="label">
+            <em>*</em> Multifield with text inputs
+          </p>
+          <div class="multiField">
+            <label for="il_home_phone" class="blockLabel"><span>Home</span> <input type="text" name="il_home_phone" id="il_home_phone" class="textInput"/></label>
+            <label for="il_work_phone" class="blockLabel"><span>Work</span> <input type="text" name="il_work_phone" id="il_work_phone" class="textInput"/></label>
+            <label for="il_cell_phone" class="blockLabel"><span>Mobile</span> <input type="text" id="il_cell_phone" class="textInput"/></label>
+          </div>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+
+        <div class="ctrlHolder">
+          <p class="label">
+            <em>*</em> Multifield with radios
+          </p>
+          <div class="multiField">
+            <label for="il_gender_male" class="inlineLabel"><input name="il_gender" id="il_gender_male" value="1" type="radio" checked="checked"/> <span>Male</span></label>
+            <label for="il_gender_female" class="inlineLabel"><input name="il_gender" id="il_gender_female" value="1" type="radio"/> <span>Female</span></label>
+          </div>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+        
+        <div class="ctrlHolder">
+          <p class="label">
+            <em>*</em> Multifield with checkboxes
+          </p>
+          <div class="multiField">
+            <label for="il_tos_agree" class="inlineLabel"><input name="il_tos" id="il_tos_agree" value="1" type="checkbox" checked="checked"/> <span>I have read and agree with the <a href="#">terms and conditions</a></span></label>
+            <label for="il_tos_gambling" class="inlineLabel"><input name="il_tos" id="il_tos_gambling" value="1" type="checkbox"/> <span>I will use the uploaded funds for non-gambling purposes</span></label>
+          </div>
+          <p class="formHint"><span><em>*</em> This is a .formHint</span></p>
+        </div>
+
+      </fieldset>
+
+      <div class="buttonHolder">
+        <button type="submit" class="secondaryAction">← Cancel and go back</button>
+        <button type="submit" class="primaryAction">Submit</button>
+      </div>
+
+    </form>
+
+    <div id="footer">
+      <p>Uni-Form is created by <a href="http://sprawsm.com/" title="Superawesome Industries">Dragan Babić</a>. Please share this technique with others including its source. Give respect and get it back.</p>
+    </div>
+
+  </body>
+</html>

pyramid_uniform/templates/static/img/uni-form-logo.png

Added
New image

pyramid_uniform/templates/static/js/jquery.js

+eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7(1C 1w.6=="T"){1w.T=1w.T;B 6=u(a,c){7(1w==q)v 1p 6(a,c);a=a||17;7(6.1t(a))v 1p 6(17)[6.E.27?"27":"2O"](a);7(1C a=="23"){B m=/^[^<]*(<(.|\\s)+>)[^>]*$/.2Q(a);7(m)a=6.3k([m[1]]);J v 1p 6(c).2o(a)}v q.6r(a.1l==2y&&a||(a.3Y||a.I&&a!=1w&&!a.24&&a[0]!=T&&a[0].24)&&6.3M(a)||[a])};7(1C $!="T")6.2S$=$;B $=6;6.E=6.8p={3Y:"1.1.2",8q:u(){v q.I},I:0,2b:u(1T){v 1T==T?6.3M(q):q[1T]},2r:u(a){B L=6(a);L.6p=q;v L},6r:u(a){q.I=0;[].1g.14(q,a);v q},K:u(E,1E){v 6.K(q,E,1E)},2h:u(1c){B 4c=-1;q.K(u(i){7(q==1c)4c=i});v 4c},1I:u(1Y,O,C){B 1c=1Y;7(1Y.1l==3t)7(O==T)v q.I&&6[C||"1I"](q[0],1Y)||T;J{1c={};1c[1Y]=O}v q.K(u(2h){P(B H 1x 1c)6.1I(C?q.1q:q,H,6.H(q,1c[H],C,2h,H))})},1m:u(1Y,O){v q.1I(1Y,O,"30")},2L:u(e){7(1C e=="23")v q.3u().3r(17.8t(e));B t="";6.K(e||q,u(){6.K(q.2I,u(){7(q.24!=8)t+=q.24!=1?q.60:6.E.2L([q])})});v t},2K:u(){B a=6.3k(1A);v q.K(u(){B b=a[0].3l(U);q.11.2X(b,q);22(b.1b)b=b.1b;b.4C(q)})},3r:u(){v q.3j(1A,U,1,u(a){q.4C(a)})},5i:u(){v q.3j(1A,U,-1,u(a){q.2X(a,q.1b)})},5j:u(){v q.3j(1A,12,1,u(a){q.11.2X(a,q)})},5t:u(){v q.3j(1A,12,-1,u(a){q.11.2X(a,q.2e)})},4g:u(){v q.6p||6([])},2o:u(t){v q.2r(6.31(q,u(a){v 6.2o(t,a)}),t)},4Y:u(4N){v q.2r(6.31(q,u(a){B a=a.3l(4N!=T?4N:U);a.$1H=16;v a}))},1D:u(t){v q.2r(6.1t(t)&&6.2q(q,u(2z,2h){v t.14(2z,[2h])})||6.3z(t,q))},2g:u(t){v q.2r(t.1l==3t&&6.3z(t,q,U)||6.2q(q,u(a){v(t.1l==2y||t.3Y)?6.3y(a,t)<0:a!=t}))},1M:u(t){v q.2r(6.2k(q.2b(),t.1l==3t?6(t).2b():t.I!=T&&(!t.1f||t.1f=="8v")?t:[t]))},4l:u(1s){v 1s?6.1D(1s,q).r.I>0:12},1a:u(1a){v 1a==T?(q.I?q[0].O:16):q.1I("O",1a)},4U:u(1a){v 1a==T?(q.I?q[0].2t:16):q.3u().3r(1a)},3j:u(1E,1P,3Z,E){B 4Y=q.I>1;B a=6.3k(1E);7(3Z<0)a.8w();v q.K(u(){B 1c=q;7(1P&&6.1f(q,"1P")&&6.1f(a[0],"3m"))1c=q.5J("20")[0]||q.4C(17.6n("20"));6.K(a,u(){E.14(1c,[4Y?q.3l(U):q])})})}};6.1z=6.E.1z=u(){B 1O=1A[0],a=1;7(1A.I==1){1O=q;a=0}B H;22(H=1A[a++])P(B i 1x H)1O[i]=H[i];v 1O};6.1z({8x:u(){7(6.2S$)$=6.2S$;v 6},1t:u(E){v!!E&&1C E!="23"&&!E.1f&&1C E[0]=="T"&&/u/i.1n(E+"")},4B:u(D){v D.66&&D.5I&&!D.5I.64},1f:u(D,Y){v D.1f&&D.1f.3K()==Y.3K()},K:u(1c,E,1E){7(1c.I==T)P(B i 1x 1c)E.14(1c[i],1E||[i,1c[i]]);J P(B i=0,6q=1c.I;i<6q;i++)7(E.14(1c[i],1E||[i,1c[i]])===12)3O;v 1c},H:u(D,O,C,2h,H){7(6.1t(O))O=O.3n(D,[2h]);B 6s=/z-?2h|7P-?8A|1d|58|8B-?28/i;v O&&O.1l==3Q&&C=="30"&&!6s.1n(H)?O+"4S":O},19:{1M:u(D,c){6.K(c.3o(/\\s+/),u(i,Q){7(!6.19.2V(D.19,Q))D.19+=(D.19?" ":"")+Q})},2f:u(D,c){D.19=c?6.2q(D.19.3o(/\\s+/),u(Q){v!6.19.2V(c,Q)}).6t(" "):""},2V:u(t,c){t=t.19||t;c=c.1R(/([\\.\\\\\\+\\*\\?\\[\\^\\]\\$\\(\\)\\{\\}\\=\\!\\<\\>\\|\\:])/g,"\\\\$1");v t&&1p 4v("(^|\\\\s)"+c+"(\\\\s|$)").1n(t)}},4d:u(e,o,f){P(B i 1x o){e.1q["1N"+i]=e.1q[i];e.1q[i]=o[i]}f.14(e,[]);P(B i 1x o)e.1q[i]=e.1q["1N"+i]},1m:u(e,p){7(p=="28"||p=="3V"){B 1N={},46,3P,d=["7d","8C","8D","8E"];6.K(d,u(){1N["8F"+q]=0;1N["8G"+q+"8H"]=0});6.4d(e,1N,u(){7(6.1m(e,"1h")!="1Z"){46=e.8I;3P=e.8J}J{e=6(e.3l(U)).2o(":4j").5l("2Z").4g().1m({4n:"1G",45:"8K",1h:"2D",7I:"0",8M:"0"}).5z(e.11)[0];B 3d=6.1m(e.11,"45");7(3d==""||3d=="4b")e.11.1q.45="6x";46=e.6y;3P=e.6z;7(3d==""||3d=="4b")e.11.1q.45="4b";e.11.33(e)}});v p=="28"?46:3P}v 6.30(e,p)},30:u(D,H,53){B L;7(H=="1d"&&6.W.1j)v 6.1I(D.1q,"1d");7(H=="4h"||H=="2v")H=6.W.1j?"3T":"2v";7(!53&&D.1q[H])L=D.1q[H];J 7(17.44&&17.44.4W){7(H=="2v"||H=="3T")H="4h";H=H.1R(/([A-Z])/g,"-$1").4m();B Q=17.44.4W(D,16);7(Q)L=Q.55(H);J 7(H=="1h")L="1Z";J 6.4d(D,{1h:"2D"},u(){B c=17.44.4W(q,"");L=c&&c.55(H)||""})}J 7(D.51){B 56=H.1R(/\\-(\\w)/g,u(m,c){v c.3K()});L=D.51[H]||D.51[56]}v L},3k:u(a){B r=[];6.K(a,u(i,1r){7(!1r)v;7(1r.1l==3Q)1r=1r.6C();7(1C 1r=="23"){B s=6.35(1r),1V=17.6n("1V"),2i=[];B 2K=!s.18("<1u")&&[1,"<42>","</42>"]||(!s.18("<6D")||!s.18("<20")||!s.18("<6E"))&&[1,"<1P>","</1P>"]||!s.18("<3m")&&[2,"<1P><20>","</20></1P>"]||(!s.18("<6F")||!s.18("<6G"))&&[3,"<1P><20><3m>","</3m></20></1P>"]||[0,"",""];1V.2t=2K[1]+s+2K[2];22(2K[0]--)1V=1V.1b;7(6.W.1j){7(!s.18("<1P")&&s.18("<20")<0)2i=1V.1b&&1V.1b.2I;J 7(2K[1]=="<1P>"&&s.18("<20")<0)2i=1V.2I;P(B n=2i.I-1;n>=0;--n)7(6.1f(2i[n],"20")&&!2i[n].2I.I)2i[n].11.33(2i[n])}1r=[];P(B i=0,l=1V.2I.I;i<l;i++)1r.1g(1V.2I[i])}7(1r.I===0&&!6.1f(1r,"3w"))v;7(1r[0]==T||6.1f(1r,"3w"))r.1g(1r);J r=6.2k(r,1r)});v r},1I:u(D,Y,O){B 2j=6.4B(D)?{}:{"P":"6J","6L":"19","4h":6.W.1j?"3T":"2v",2v:6.W.1j?"3T":"2v",2t:"2t",19:"19",O:"O",2W:"2W",2Z:"2Z",89:"6N",2Y:"2Y"};7(Y=="1d"&&6.W.1j&&O!=T){D.58=1;v D.1D=D.1D.1R(/4i\\([^\\)]*\\)/6O,"")+(O==1?"":"4i(1d="+O*6g+")")}J 7(Y=="1d"&&6.W.1j)v D.1D?4T(D.1D.6P(/4i\\(1d=(.*)\\)/)[1])/6g:1;7(Y=="1d"&&6.W.3h&&O==1)O=0.6R;7(2j[Y]){7(O!=T)D[2j[Y]]=O;v D[2j[Y]]}J 7(O==T&&6.W.1j&&6.1f(D,"3w")&&(Y=="81"||Y=="80"))v D.6T(Y).60;J 7(D.66){7(O!=T)D.6V(Y,O);7(6.W.1j&&/5E|3e/.1n(Y)&&!6.4B(D))v D.36(Y,2);v D.36(Y)}J{Y=Y.1R(/-([a-z])/6W,u(z,b){v b.3K()});7(O!=T)D[Y]=O;v D[Y]}},35:u(t){v t.1R(/^\\s+|\\s+$/g,"")},3M:u(a){B r=[];7(a.1l!=2y)P(B i=0,2R=a.I;i<2R;i++)r.1g(a[i]);J r=a.3N(0);v r},3y:u(b,a){P(B i=0,2R=a.I;i<2R;i++)7(a[i]==b)v i;v-1},2k:u(2u,3H){B r=[].3N.3n(2u,0);P(B i=0,5b=3H.I;i<5b;i++)7(6.3y(3H[i],r)==-1)2u.1g(3H[i]);v 2u},2q:u(1U,E,4k){7(1C E=="23")E=1p 4w("a","i","v "+E);B 1i=[];P(B i=0,2z=1U.I;i<2z;i++)7(!4k&&E(1U[i],i)||4k&&!E(1U[i],i))1i.1g(1U[i]);v 1i},31:u(1U,E){7(1C E=="23")E=1p 4w("a","v "+E);B 1i=[],r=[];P(B i=0,2z=1U.I;i<2z;i++){B 1a=E(1U[i],i);7(1a!==16&&1a!=T){7(1a.1l!=2y)1a=[1a];1i=1i.6Z(1a)}}B r=1i.I?[1i[0]]:[];5f:P(B i=1,5e=1i.I;i<5e;i++){P(B j=0;j<i;j++)7(1i[i]==r[j])5F 5f;r.1g(1i[i])}v r}});1p u(){B b=7L.71.4m();6.W={2N:/5D/.1n(b),3f:/3f/.1n(b),1j:/1j/.1n(b)&&!/3f/.1n(b),3h:/3h/.1n(b)&&!/(72|5D)/.1n(b)};6.7H=!6.W.1j||17.74=="75"};6.K({5u:"a.11",4z:"6.4z(a)",76:"6.2a(a,2,\'2e\')",7D:"6.2a(a,2,\'5s\')",78:"6.2B(a.11.1b,a)",79:"6.2B(a.1b)"},u(i,n){6.E[i]=u(a){B L=6.31(q,n);7(a&&1C a=="23")L=6.3z(a,L);v q.2r(L)}});6.K({5z:"3r",7b:"5i",2X:"5j",7e:"5t"},u(i,n){6.E[i]=u(){B a=1A;v q.K(u(){P(B j=0,2R=a.I;j<2R;j++)6(a[j])[n](q)})}});6.K({5l:u(1Y){6.1I(q,1Y,"");q.7g(1Y)},7h:u(c){6.19.1M(q,c)},7i:u(c){6.19.2f(q,c)},7k:u(c){6.19[6.19.2V(q,c)?"2f":"1M"](q,c)},2f:u(a){7(!a||6.1D(a,[q]).r.I)q.11.33(q)},3u:u(){22(q.1b)q.33(q.1b)}},u(i,n){6.E[i]=u(){v q.K(n,1A)}});6.K(["5q","5n","5p","5v"],u(i,n){6.E[n]=u(1T,E){v q.1D(":"+n+"("+1T+")",E)}});6.K(["28","3V"],u(i,n){6.E[n]=u(h){v h==T?(q.I?6.1m(q[0],n):16):q.1m(n,h.1l==3t?h:h+"4S")}});6.1z({1s:{"":"m[2]==\'*\'||6.1f(a,m[2])","#":"a.36(\'2J\')==m[2]",":":{5n:"i<m[3]-0",5p:"i>m[3]-0",2a:"m[3]-0==i",5q:"m[3]-0==i",2u:"i==0",2T:"i==r.I-1",5R:"i%2==0",5S:"i%2","2a-3s":"6.2a(a.11.1b,m[3],\'2e\',a)==a","2u-3s":"6.2a(a.11.1b,1,\'2e\')==a","2T-3s":"6.2a(a.11.7n,1,\'5s\')==a","7p-3s":"6.2B(a.11.1b).I==1",5u:"a.1b",3u:"!a.1b",5v:"6.E.2L.14([a]).18(m[3])>=0",3i:\'a.C!="1G"&&6.1m(a,"1h")!="1Z"&&6.1m(a,"4n")!="1G"\',1G:\'a.C=="1G"||6.1m(a,"1h")=="1Z"||6.1m(a,"4n")=="1G"\',7v:"!a.2W",2W:"a.2W",2Z:"a.2Z",2Y:"a.2Y||6.1I(a,\'2Y\')",2L:"a.C==\'2L\'",4j:"a.C==\'4j\'",5x:"a.C==\'5x\'",4G:"a.C==\'4G\'",5y:"a.C==\'5y\'",4R:"a.C==\'4R\'",5A:"a.C==\'5A\'",5B:"a.C==\'5B\'",3x:\'a.C=="3x"||6.1f(a,"3x")\',5C:"/5C|42|7A|3x/i.1n(a.1f)"},".":"6.19.2V(a,m[2])","@":{"=":"z==m[4]","!=":"z!=m[4]","^=":"z&&!z.18(m[4])","$=":"z&&z.2U(z.I - m[4].I,m[4].I)==m[4]","*=":"z&&z.18(m[4])>=0","":"z",4u:u(m){v["",m[1],m[3],m[2],m[5]]},5P:"z=a[m[3]];7(!z||/5E|3e/.1n(m[3]))z=6.1I(a,m[3]);"},"[":"6.2o(m[2],a).I"},5M:[/^\\[ *(@)([a-2m-3C-]*) *([!*$^=]*) *(\'?"?)(.*?)\\4 *\\]/i,/^(\\[)\\s*(.*?(\\[.*?\\])?[^[]*?)\\s*\\]/,/^(:)([a-2m-3C-]*)\\("?\'?(.*?(\\(.*?\\))?[^(]*?)"?\'?\\)/i,/^([:.#]*)([a-2m-3C*-]*)/i],1Q:[/^(\\/?\\.\\.)/,"a.11",/^(>|\\/)/,"6.2B(a.1b)",/^(\\+)/,"6.2a(a,2,\'2e\')",/^(~)/,u(a){B s=6.2B(a.11.1b);v s.3N(6.3y(a,s)+1)}],3z:u(1s,1U,2g){B 1N,Q=[];22(1s&&1s!=1N){1N=1s;B f=6.1D(1s,1U,2g);1s=f.t.1R(/^\\s*,\\s*/,"");Q=2g?1U=f.r:6.2k(Q,f.r)}v Q},2o:u(t,1B){7(1C t!="23")v[t];7(1B&&!1B.24)1B=16;1B=1B||17;7(!t.18("//")){1B=1B.4H;t=t.2U(2,t.I)}J 7(!t.18("/")){1B=1B.4H;t=t.2U(1,t.I);7(t.18("/")>=1)t=t.2U(t.18("/"),t.I)}B L=[1B],2c=[],2T=16;22(t&&2T!=t){B r=[];2T=t;t=6.35(t).1R(/^\\/\\//i,"");B 3B=12;B 1J=/^[\\/>]\\s*([a-2m-9*-]+)/i;B m=1J.2Q(t);7(m){6.K(L,u(){P(B c=q.1b;c;c=c.2e)7(c.24==1&&(6.1f(c,m[1])||m[1]=="*"))r.1g(c)});L=r;t=t.1R(1J,"");7(t.18(" ")==0)5F;3B=U}J{P(B i=0;i<6.1Q.I;i+=2){B 1J=6.1Q[i];B m=1J.2Q(t);7(m){r=L=6.31(L,6.1t(6.1Q[i+1])?6.1Q[i+1]:u(a){v 40(6.1Q[i+1])});t=6.35(t.1R(1J,""));3B=U;3O}}}7(t&&!3B){7(!t.18(",")){7(L[0]==1B)L.4L();6.2k(2c,L);r=L=[1B];t=" "+t.2U(1,t.I)}J{B 34=/^([a-2m-3C-]+)(#)([a-2m-9\\\\*2S-]*)/i;B m=34.2Q(t);7(m){m=[0,m[2],m[3],m[1]]}J{34=/^([#.]?)([a-2m-9\\\\*2S-]*)/i;m=34.2Q(t)}7(m[1]=="#"&&L[L.I-1].4X){B 2l=L[L.I-1].4X(m[2]);7(6.W.1j&&2l&&2l.2J!=m[2])2l=6(\'[@2J="\'+m[2]+\'"]\',L[L.I-1])[0];L=r=2l&&(!m[3]||6.1f(2l,m[3]))?[2l]:[]}J{7(m[1]==".")B 4r=1p 4v("(^|\\\\s)"+m[2]+"(\\\\s|$)");6.K(L,u(){B 3E=m[1]!=""||m[0]==""?"*":m[2];7(6.1f(q,"7J")&&3E=="*")3E="3g";6.2k(r,m[1]!=""&&L.I!=1?6.4x(q,[],m[1],m[2],4r):q.5J(3E))});7(m[1]=="."&&L.I==1)r=6.2q(r,u(e){v 4r.1n(e.19)});7(m[1]=="#"&&L.I==1){B 5K=r;r=[];6.K(5K,u(){7(q.36("2J")==m[2]){r=[q];v 12}})}L=r}t=t.1R(34,"")}}7(t){B 1a=6.1D(t,r);L=r=1a.r;t=6.35(1a.t)}}7(L&&L[0]==1B)L.4L();6.2k(2c,L);v 2c},1D:u(t,r,2g){22(t&&/^[a-z[({<*:.#]/i.1n(t)){B p=6.5M,m;6.K(p,u(i,1J){m=1J.2Q(t);7(m){t=t.7M(m[0].I);7(6.1s[m[1]].4u)m=6.1s[m[1]].4u(m);v 12}});7(m[1]==":"&&m[2]=="2g")r=6.1D(m[3],r,U).r;J 7(m[1]=="."){B 1J=1p 4v("(^|\\\\s)"+m[2]+"(\\\\s|$)");r=6.2q(r,u(e){v 1J.1n(e.19||"")},2g)}J{B f=6.1s[m[1]];7(1C f!="23")f=6.1s[m[1]][m[2]];40("f = u(a,i){"+(6.1s[m[1]].5P||"")+"v "+f+"}");r=6.2q(r,f,2g)}}v{r:r,t:t}},4x:u(o,r,1Q,Y,1J){P(B s=o.1b;s;s=s.2e)7(s.24==1){B 1M=U;7(1Q==".")1M=s.19&&1J.1n(s.19);J 7(1Q=="#")1M=s.36("2J")==Y;7(1M)r.1g(s);7(1Q=="#"&&r.I)3O;7(s.1b)6.4x(s,r,1Q,Y,1J)}v r},4z:u(D){B 4A=[];B Q=D.11;22(Q&&Q!=17){4A.1g(Q);Q=Q.11}v 4A},2a:u(Q,1i,3Z,D){1i=1i||1;B 1T=0;P(;Q;Q=Q[3Z]){7(Q.24==1)1T++;7(1T==1i||1i=="5R"&&1T%2==0&&1T>1&&Q==D||1i=="5S"&&1T%2==1&&Q==D)v Q}},2B:u(n,D){B r=[];P(;n;n=n.2e){7(n.24==1&&(!D||n!=D))r.1g(n)}v r}});6.G={1M:u(S,C,1o,F){7(6.W.1j&&S.3L!=T)S=1w;7(F)1o.F=F;7(!1o.2A)1o.2A=q.2A++;7(!S.$1H)S.$1H={};B 38=S.$1H[C];7(!38){38=S.$1H[C]={};7(S["39"+C])38[0]=S["39"+C]}38[1o.2A]=1o;S["39"+C]=q.5Y;7(!q.1k[C])q.1k[C]=[];q.1k[C].1g(S)},2A:1,1k:{},2f:u(S,C,1o){7(S.$1H){B i,j,k;7(C&&C.C){1o=C.1o;C=C.C}7(C&&S.$1H[C])7(1o)5U S.$1H[C][1o.2A];J P(i 1x S.$1H[C])5U S.$1H[C][i];J P(j 1x S.$1H)q.2f(S,j);P(k 1x S.$1H[C])7(k){k=U;3O}7(!k)S["39"+C]=16}},1S:u(C,F,S){F=6.3M(F||[]);7(!S)6.K(q.1k[C]||[],u(){6.G.1S(C,F,q)});J{B 1o=S["39"+C],1a,E=6.1t(S[C]);7(1o){F.61(q.2j({C:C,1O:S}));7((1a=1o.14(S,F))!==12)q.4F=U}7(E&&1a!==12)S[C]();q.4F=12}},5Y:u(G){7(1C 6=="T"||6.G.4F)v;G=6.G.2j(G||1w.G||{});B 3R;B c=q.$1H[G.C];B 1E=[].3N.3n(1A,1);1E.61(G);P(B j 1x c){1E[0].1o=c[j];1E[0].F=c[j].F;7(c[j].14(q,1E)===12){G.2n();G.2H();3R=12}}7(6.W.1j)G.1O=G.2n=G.2H=G.1o=G.F=16;v 3R},2j:u(G){7(!G.1O&&G.63)G.1O=G.63;7(G.65==T&&G.67!=T){B e=17.4H,b=17.64;G.65=G.67+(e.68||b.68);G.7Y=G.7Z+(e.6c||b.6c)}7(6.W.2N&&G.1O.24==3){B 3a=G;G=6.1z({},3a);G.1O=3a.1O.11;G.2n=u(){v 3a.2n()};G.2H=u(){v 3a.2H()}}7(!G.2n)G.2n=u(){q.3R=12};7(!G.2H)G.2H=u(){q.82=U};v G}};6.E.1z({3U:u(C,F,E){v q.K(u(){6.G.1M(q,C,E||F,F)})},6u:u(C,F,E){v q.K(u(){6.G.1M(q,C,u(G){6(q).6f(G);v(E||F).14(q,1A)},F)})},6f:u(C,E){v q.K(u(){6.G.2f(q,C,E)})},1S:u(C,F){v q.K(u(){6.G.1S(C,F,q)})},3X:u(){B a=1A;v q.6j(u(e){q.4M=q.4M==0?1:0;e.2n();v a[q.4M].14(q,[e])||12})},83:u(f,g){u 4O(e){B p=(e.C=="41"?e.84:e.85)||e.86;22(p&&p!=q)2G{p=p.11}2w(e){p=q};7(p==q)v 12;v(e.C=="41"?f:g).14(q,[e])}v q.41(4O).6k(4O)},27:u(f){7(6.3W)f.14(17,[6]);J{6.3c.1g(u(){v f.14(q,[6])})}v q}});6.1z({3W:12,3c:[],27:u(){7(!6.3W){6.3W=U;7(6.3c){6.K(6.3c,u(){q.14(17)});6.3c=16}7(6.W.3h||6.W.3f)17.87("6o",6.27,12)}}});1p u(){6.K(("88,8a,2O,8b,8d,52,6j,8e,"+"8f,8g,8h,41,6k,8j,42,"+"4R,8k,8l,8m,2C").3o(","),u(i,o){6.E[o]=u(f){v f?q.3U(o,f):q.1S(o)}});7(6.W.3h||6.W.3f)17.8n("6o",6.27,12);J 7(6.W.1j){17.8o("<8r"+"8s 2J=62 8u=U "+"3e=//:><\\/2d>");B 2d=17.4X("62");7(2d)2d.37=u(){7(q.3D!="1X")v;q.11.33(q);6.27()};2d=16}J 7(6.W.2N)6.50=3L(u(){7(17.3D=="8y"||17.3D=="1X"){4p(6.50);6.50=16;6.27()}},10);6.G.1M(1w,"2O",6.27)};7(6.W.1j)6(1w).6u("52",u(){B 1k=6.G.1k;P(B C 1x 1k){B 4Z=1k[C],i=4Z.I;7(i&&C!=\'52\')6w 6.G.2f(4Z[i-1],C);22(--i)}});6.E.1z({6A:u(V,21,M){q.2O(V,21,M,1)},2O:u(V,21,M,1W){7(6.1t(V))v q.3U("2O",V);M=M||u(){};B C="5d";7(21)7(6.1t(21)){M=21;21=16}J{21=6.3g(21);C="5V"}B 4e=q;6.3v({V:V,C:C,F:21,1W:1W,1X:u(2P,15){7(15=="2M"||!1W&&15=="5L")4e.1I("2t",2P.3G).4V().K(M,[2P.3G,15,2P]);J M.14(4e,[2P.3G,15,2P])}});v q},6B:u(){v 6.3g(q)},4V:u(){v q.2o("2d").K(u(){7(q.3e)6.59(q.3e);J 6.4a(q.2L||q.6H||q.2t||"")}).4g()}});7(!1w.3p)3p=u(){v 1p 6I("6K.6M")};6.K("5m,5Q,5O,5W,5N,5H".3o(","),u(i,o){6.E[o]=u(f){v q.3U(o,f)}});6.1z({2b:u(V,F,M,C,1W){7(6.1t(F)){M=F;F=16}v 6.3v({V:V,F:F,2M:M,4t:C,1W:1W})},6Q:u(V,F,M,C){v 6.2b(V,F,M,C,1)},59:u(V,M){v 6.2b(V,16,M,"2d")},6S:u(V,F,M){v 6.2b(V,F,M,"6m")},6U:u(V,F,M,C){7(6.1t(F)){M=F;F={}}v 6.3v({C:"5V",V:V,F:F,2M:M,4t:C})},6X:u(29){6.3q.29=29},6Y:u(5c){6.1z(6.3q,5c)},3q:{1k:U,C:"5d",29:0,5r:"70/x-73-3w-77",5h:U,48:U,F:16},3S:{},3v:u(s){s=6.1z({},6.3q,s);7(s.F){7(s.5h&&1C s.F!="23")s.F=6.3g(s.F);7(s.C.4m()=="2b"){s.V+=((s.V.18("?")>-1)?"&":"?")+s.F;s.F=16}}7(s.1k&&!6.4E++)6.G.1S("5m");B 4y=12;B N=1p 3p();N.7j(s.C,s.V,s.48);7(s.F)N.3A("7l-7m",s.5r);7(s.1W)N.3A("7o-4K-7q",6.3S[s.V]||"7s, 7t 7w 7x 4o:4o:4o 7z");N.3A("X-7B-7C","3p");7(N.7E)N.3A("7F","7G");7(s.5G)s.5G(N);7(s.1k)6.G.1S("5H",[N,s]);B 37=u(4s){7(N&&(N.3D==4||4s=="29")){4y=U;7(3I){4p(3I);3I=16}B 15;2G{15=6.5Z(N)&&4s!="29"?s.1W&&6.69(N,s.V)?"5L":"2M":"2C";7(15!="2C"){B 3F;2G{3F=N.4P("6b-4K")}2w(e){}7(s.1W&&3F)6.3S[s.V]=3F;B F=6.6i(N,s.4t);7(s.2M)s.2M(F,15);7(s.1k)6.G.1S("5N",[N,s])}J 6.3J(s,N,15)}2w(e){15="2C";6.3J(s,N,15,e)}7(s.1k)6.G.1S("5O",[N,s]);7(s.1k&&!--6.4E)6.G.1S("5Q");7(s.1X)s.1X(N,15);7(s.48)N=16}};B 3I=3L(37,13);7(s.29>0)57(u(){7(N){N.7N();7(!4y)37("29")}},s.29);2G{N.7Q(s.F)}2w(e){6.3J(s,N,16,e)}7(!s.48)37();v N},3J:u(s,N,15,e){7(s.2C)s.2C(N,15,e);7(s.1k)6.G.1S("5W",[N,s,e])},4E:0,5Z:u(r){2G{v!r.15&&7V.7W=="4G:"||(r.15>=5X&&r.15<7X)||r.15==6d||6.W.2N&&r.15==T}2w(e){}v 12},69:u(N,V){2G{B 6e=N.4P("6b-4K");v N.15==6d||6e==6.3S[V]||6.W.2N&&N.15==T}2w(e){}v 12},6i:u(r,C){B 4Q=r.4P("8c-C");B F=!C&&4Q&&4Q.18("N")>=0;F=C=="N"||F?r.8i:r.3G;7(C=="2d")6.4a(F);7(C=="6m")40("F = "+F);7(C=="4U")6("<1V>").4U(F).4V();v F},3g:u(a){B s=[];7(a.1l==2y||a.3Y)6.K(a,u(){s.1g(2x(q.Y)+"="+2x(q.O))});J P(B j 1x a)7(a[j]&&a[j].1l==2y)6.K(a[j],u(){s.1g(2x(j)+"="+2x(q))});J s.1g(2x(j)+"="+2x(a[j]));v s.6t("&")},4a:u(F){7(1w.54)1w.54(F);J 7(6.W.2N)1w.57(F,0);J 40.3n(1w,F)}});6.E.1z({1L:u(R,M){B 1G=q.1D(":1G");R?1G.26({28:"1L",3V:"1L",1d:"1L"},R,M):1G.K(u(){q.1q.1h=q.2E?q.2E:"";7(6.1m(q,"1h")=="1Z")q.1q.1h="2D"});v q},1K:u(R,M){B 3i=q.1D(":3i");R?3i.26({28:"1K",3V:"1K",1d:"1K"},R,M):3i.K(u(){q.2E=q.2E||6.1m(q,"1h");7(q.2E=="1Z")q.2E="2D";q.1q.1h="1Z"});v q},5g:6.E.3X,3X:u(E,4I){B 1E=1A;v 6.1t(E)&&6.1t(4I)?q.5g(E,4I):q.K(u(){6(q)[6(q).4l(":1G")?"1L":"1K"].14(6(q),1E)})},7a:u(R,M){v q.26({28:"1L"},R,M)},7c:u(R,M){v q.26({28:"1K"},R,M)},7f:u(R,M){v q.K(u(){B 5k=6(q).4l(":1G")?"1L":"1K";6(q).26({28:5k},R,M)})},7r:u(R,M){v q.26({1d:"1L"},R,M)},7u:u(R,M){v q.26({1d:"1K"},R,M)},7y:u(R,43,M){v q.26({1d:43},R,M)},26:u(H,R,1v,M){v q.1F(u(){q.2F=6.1z({},H);B 1u=6.R(R,1v,M);P(B p 1x H){B e=1p 6.3b(q,1u,p);7(H[p].1l==3Q)e.2s(e.Q(),H[p]);J e[H[p]](H)}})},1F:u(C,E){7(!E){E=C;C="3b"}v q.K(u(){7(!q.1F)q.1F={};7(!q.1F[C])q.1F[C]=[];q.1F[C].1g(E);7(q.1F[C].I==1)E.14(q)})}});6.1z({R:u(R,1v,E){B 1u=R&&R.1l==7K?R:{1X:E||!E&&1v||6.1t(R)&&R,25:R,1v:E&&1v||1v&&1v.1l!=4w&&1v};1u.25=(1u.25&&1u.25.1l==3Q?1u.25:{7R:7S,7T:5X}[1u.25])||7U;1u.1N=1u.1X;1u.1X=u(){6.6a(q,"3b");7(6.1t(1u.1N))1u.1N.14(q)};v 1u},1v:{},1F:{},6a:u(D,C){C=C||"3b";7(D.1F&&D.1F[C]){D.1F[C].4L();B f=D.1F[C][0];7(f)f.14(D)}},3b:u(D,1e,H){B z=q;B y=D.1q;B 4D=6.1m(D,"1h");y.5T="1G";z.a=u(){7(1e.49)1e.49.14(D,[z.2p]);7(H=="1d")6.1I(y,"1d",z.2p);J 7(6l(z.2p))y[H]=6l(z.2p)+"4S";y.1h="2D"};z.6v=u(){v 4T(6.1m(D,H))};z.Q=u(){B r=4T(6.30(D,H));v r&&r>-8z?r:z.6v()};z.2s=u(4f,43){z.4J=(1p 5o()).5w();z.2p=4f;z.a();z.4q=3L(u(){z.49(4f,43)},13)};z.1L=u(){7(!D.1y)D.1y={};D.1y[H]=q.Q();1e.1L=U;z.2s(0,D.1y[H]);7(H!="1d")y[H]="5a"};z.1K=u(){7(!D.1y)D.1y={};D.1y[H]=q.Q();1e.1K=U;z.2s(D.1y[H],0)};z.3X=u(){7(!D.1y)D.1y={};D.1y[H]=q.Q();7(4D=="1Z"){1e.1L=U;7(H!="1d")y[H]="5a";z.2s(0,D.1y[H])}J{1e.1K=U;z.2s(D.1y[H],0)}};z.49=u(32,47){B t=(1p 5o()).5w();7(t>1e.25+z.4J){4p(z.4q);z.4q=16;z.2p=47;z.a();7(D.2F)D.2F[H]=U;B 2c=U;P(B i 1x D.2F)7(D.2F[i]!==U)2c=12;7(2c){y.5T="";y.1h=4D;7(6.1m(D,"1h")=="1Z")y.1h="2D";7(1e.1K)y.1h="1Z";7(1e.1K||1e.1L)P(B p 1x D.2F)7(p=="1d")6.1I(y,p,D.1y[p]);J y[p]=""}7(2c&&6.1t(1e.1X))1e.1X.14(D)}J{B n=t-q.4J;B p=n/1e.25;z.2p=1e.1v&&6.1v[1e.1v]?6.1v[1e.1v](p,n,32,(47-32),1e.25):((-6h.7O(p*6h.8L)/2)+0.5)*(47-32)+32;z.a()}}}})}',62,545,'||||||jQuery|if|||||||||||||||||||this||||function|return||||||var|type|elem|fn|data|event|prop|length|else|each|ret|callback|xml|value|for|cur|speed|element|undefined|true|url|browser||name|||parentNode|false||apply|status|null|document|indexOf|className|val|firstChild|obj|opacity|options|nodeName|push|display|result|msie|global|constructor|css|test|handler|new|style|arg|expr|isFunction|opt|easing|window|in|orig|extend|arguments|context|typeof|filter|args|queue|hidden|events|attr|re|hide|show|add|old|target|table|token|replace|trigger|num|elems|div|ifModified|complete|key|none|tbody|params|while|string|nodeType|duration|animate|ready|height|timeout|nth|get|done|script|nextSibling|remove|not|index|tb|fix|merge|oid|z0|preventDefault|find|now|grep|pushStack|custom|innerHTML|first|cssFloat|catch|encodeURIComponent|Array|el|guid|sibling|error|block|oldblock|curAnim|try|stopPropagation|childNodes|id|wrap|text|success|safari|load|res|exec|al|_|last|substr|has|disabled|insertBefore|selected|checked|curCSS|map|firstNum|removeChild|re2|trim|getAttribute|onreadystatechange|handlers|on|originalEvent|fx|readyList|parPos|src|opera|param|mozilla|visible|domManip|clean|cloneNode|tr|call|split|XMLHttpRequest|ajaxSettings|append|child|String|empty|ajax|form|button|inArray|multiFilter|setRequestHeader|foundToken|9_|readyState|tag|modRes|responseText|second|ival|handleError|toUpperCase|setInterval|makeArray|slice|break|oWidth|Number|returnValue|lastModified|styleFloat|bind|width|isReady|toggle|jquery|dir|eval|mouseover|select|to|defaultView|position|oHeight|lastNum|async|step|globalEval|static|pos|swap|self|from|end|float|alpha|radio|inv|is|toLowerCase|visibility|00|clearInterval|timer|rec|isTimeout|dataType|_resort|RegExp|Function|getAll|requestDone|parents|matched|isXMLDoc|appendChild|oldDisplay|active|triggered|file|documentElement|fn2|startTime|Modified|shift|lastToggle|deep|handleHover|getResponseHeader|ct|submit|px|parseFloat|html|evalScripts|getComputedStyle|getElementById|clone|els|safariTimer|currentStyle|unload|force|execScript|getPropertyValue|newProp|setTimeout|zoom|getScript|1px|sl|settings|GET|rl|check|_toggle|processData|prepend|before|state|removeAttr|ajaxStart|lt|Date|gt|eq|contentType|previousSibling|after|parent|contains|getTime|checkbox|password|appendTo|image|reset|input|webkit|href|continue|beforeSend|ajaxSend|ownerDocument|getElementsByTagName|tmp|notmodified|parse|ajaxSuccess|ajaxComplete|_prefix|ajaxStop|even|odd|overflow|delete|POST|ajaxError|200|handle|httpSuccess|nodeValue|unshift|__ie_init|srcElement|body|pageX|tagName|clientX|scrollLeft|httpNotModified|dequeue|Last|scrollTop|304|xmlRes|unbind|100|Math|httpData|click|mouseout|parseInt|json|createElement|DOMContentLoaded|prevObject|ol|setArray|exclude|join|one|max|do|relative|clientHeight|clientWidth|loadIfModified|serialize|toString|thead|tfoot|td|th|textContent|ActiveXObject|htmlFor|Microsoft|class|XMLHTTP|readOnly|gi|match|getIfModified|9999|getJSON|getAttributeNode|post|setAttribute|ig|ajaxTimeout|ajaxSetup|concat|application|userAgent|compatible|www|compatMode|CSS1Compat|next|urlencoded|siblings|children|slideDown|prependTo|slideUp|Top|insertAfter|slideToggle|removeAttribute|addClass|removeClass|open|toggleClass|Content|Type|lastChild|If|only|Since|fadeIn|Thu|01|fadeOut|enabled|Jan|1970|fadeTo|GMT|textarea|Requested|With|prev|overrideMimeType|Connection|close|boxModel|right|object|Object|navigator|substring|abort|cos|font|send|slow|600|fast|400|location|protocol|300|pageY|clientY|method|action|cancelBubble|hover|fromElement|toElement|relatedTarget|removeEventListener|blur|readonly|focus|resize|content|scroll|dblclick|mousedown|mouseup|mousemove|responseXML|change|keydown|keypress|keyup|addEventListener|write|prototype|size|scr|ipt|createTextNode|defer|FORM|reverse|noConflict|loaded|10000|weight|line|Bottom|Right|Left|padding|border|Width|offsetHeight|offsetWidth|absolute|PI|left'.split('|'),0,{}))

pyramid_uniform/templates/static/js/uni-form.jquery.js

+jQuery.fn.uniform = function(settings) {
+  settings = jQuery.extend({
+    valid_class    : 'valid',
+    invalid_class  : 'invalid',
+    focused_class  : 'focused',
+    holder_class   : 'ctrlHolder',
+    field_selector : 'input, select, textarea'
+  }, settings);
+  
+  return this.each(function() {
+    var form = jQuery(this);
+    
+    // Focus specific control holder
+    var focusControlHolder = function(element) {
+      var parent = element.parent();
+      
+      while(typeof(parent) == 'object') {
+        if(parent) {
+          if(parent[0] && (parent[0].className.indexOf(settings.holder_class) >= 0)) {
+            parent.addClass(settings.focused_class);
+            return;
+          } // if
+        } // if
+        parent = jQuery(parent.parent());
+      } // while
+    };
+    
+    // Select form fields and attach them higlighter functionality
+    form.find(settings.field_selector).focus(function() {
+      form.find('.' + settings.focused_class).removeClass(settings.focused_class);
+      focusControlHolder(jQuery(this));
+    }).blur(function() {
+      form.find('.' + settings.focused_class).removeClass(settings.focused_class);
+    });
+  });
+};
+
+// Auto set on page load...
+$(document).ready(function() {
+  jQuery('form.uniForm').uniform();
+});

pyramid_uniform/templates/static/readme

+Uni-Form by Dragan Babic [Superawesome Industries]  - http: //sprawsm.com/uni-form/
+Some rights reserved - http: //creativecommons.org/licenses/by-sa/2.5/
+
+Thank you for downloading Uni-Form!
+
+========================================================
+
+INTRO
+
+Uni-Form is an attempt to standardize form markup (xhtml), css and JavaScript,  „modularize” it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms.
+The main goal is to make the whole thing as much „plug ‘n’ play” as possible, literally reduce the whole process of form creation to copy and paste technique. The result currently works in the following browsers:
+
+    * IE6
+    * IE7
+    * Firefox
+    * Opera9.x
+    * Safari
+    * Camino
+    * Konqueror
+
+========================================================
+
+HOW DOES IT WORK?
+
+The whole idea came from the Microformats (http://microformats.org/) movement and various ideas for standardizing form markup and it’s nomenclature. Forms in html are somewhat specific and kind of a „gray area” for developers, designers especially, elements are inflexible, crude, and basically it is the „soft spot” of html. Not many people know how to mark up their forms properly and semantically, so hopefully this will be of help to them - and in turn - also to people who will eventually be using those forms. 
+Basically all you need to do is apply a few classes here and there and copy and paste special snippets of code (called units) that you need for your form. 
+
+========================================================
+
+GETTING STARTED:
+
+NOTE: Uni-Form will work out of the box, but in order to get real control over your design and form layout, it requires a good amount of familliarity with CSS and of course - you'll have to dive into the code. It is primarily a tool for developers. 
+
+  - Linking the files:
+    1) Download the most recent version of Uni-Form from http://sprawsm.com/uni-form/
+    2) Unpack and upload to your server into appropriate directories (e.g. place the css files in a dir called „css”, JavaScript files into a dir called „js”...)
+    3) Now you need to link the uni-form.css with you html document, you do that with this piece of code: 
+         <style type="text/css" media="screen"> 
+           @import "path/to/directory/uni-form.css"; 
+         </style>
+    4) If you want to include JavaScript behavior to your form, you need to link the JS files as well, you do that with these two following lines of code: 
+         <script src="path/to/directory/js/jquery.js" type="text/javascript"></script>
+         <script src="path/to/directory/js/uni-form.jquery.js" type="text/javascript"></script>
+         (NOTE: As of version 1.2 Uni-Form is using jQuery (http://jquery.com/) for all behavior.)
+  - Prepping the form:
+    Your form element that will be your Uni-Form should have a class .uniForm, so your opening form tag could look something like this: 
+      <form action="/" method="whatever" id="whatever" class="uniForm">
+      Next thing you need to do is to add the classes .inlineLabels or .blockLabels to the fieldset elements (or to the wrapping div inside the form) in your form to get the desired layout.
+  
+========================================================
+
+UNI-FORM UNITS:
+
+Units are code snippets that you just copy and paste into your form, please note that you will most probably have to update form fields IDs and names respectfully. Here are the so far available „out of the box” Uni-Form units: 
+    
+    1) Text input: 
+    <div class="ctrlHolder">
+      <label for="password">Choose Password</label>
+      <input name="password" id="password" value="" size="35" maxlength="25" type="password" class="textInput" />
+    </div>
+    --
+    2) Textarea: 
+    <div class="ctrlHolder">
+      <label for="skills_interests">Skills and interests</label>
+      <textarea name="skills_interests" id="skills_interests" rows="25" cols="25"></textarea>
+    </div>
+    --
+    3) Select box: 
+    <div class="ctrlHolder">
+      <label for="dob_m">Date of birth</label>
+      <select name="dob_m"  id="dob_m" class="selectInput">
+        <option value="">-- Month --</option>
+        <option value="01">January</option><option value="02">February</option><option value="03">March</option><option value="04">April</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">August</option><option value="09">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option>
+      </select>
+    </div>
+    --
+    4) Check box: 
+    <div class="ctrlHolder">
+      <label for="newsletter" class="inlineLabel"><input name="newsletter" id="newsletter" value="1" type="checkbox" /> Send me your news and information (a.k.a. junk)</label>
+    </div>
+    --
+    5) Radio button: 
+    <div class="ctrlHolder">
+      <div>
+        <label for="newsletter" class="inlineLabel"><input name="newsletter" id="newsletter" value="1" type="radio" /> Send me your news and information (a.k.a. junk)</label>
+      </div>
+    </div>
+    --
+    6) Multiple checkboxes with a caption (these can be radios as well, using checkboxes just to illustrate):
+    <div class="ctrlHolder">
+      <p class="label">
+        Display options:
+      </p>
+      <div class="multiField">
+        <label for="display_email" class="inlineLabel"><input name="display_email" id="display_email" value="1" type="checkbox" /> Display my email</label>
+        <label for="display_photo" class="inlineLabel"><input name="display_photo" id="display_photo" value="1" type="checkbox" /> Display my image</label>
+      </div>
+    </div>
+    --
+    7) Multiple select boxes (e.g. for dates)
+    <div class="ctrlHolder">
+      <p class="label">
+        <em>*</em> Combo Field
+      </p>
+      <div class="multiField">
+        <label for="dob_month" class="blockLabel"><span>Month</span> <select id="dob_month" name="dob_month"><option value="1">January</option></select></label>
+        <label for="dob_day" class="blockLabel"><span>Day</span> <select id="dob_day" name="dob_day"><option value="1">1</option></select></label>
+        <label for="dob_year" class="blockLabel"><span>Year</span> <select id="dob_year" name="dob_year"><option value="1">1908</option></select></label>
+      </div>
+    </div>
+    --
+    8) Multiple input boxes (e.g. for phone numbers)
+    <div class="ctrlHolder">
+      <p class="label">
+        <em>*</em> Phone Number
+      </p>
+      <div class="multiField phoneNum"> <!-- I have added a class .phoneNum as a hook to this .multiField so I can target it's children precisely, but it's not a part of Uni-Form -->
+        <label for="phone_ccode" class="blockLabel">Country <input type="text" id="phone_ccode" name="phone_ccode" size="20" value="" class="textInput" /></label>
+        <label for="phone_area" class="blockLabel">Area <input type="text" id="phone_area" name="phone_area" size="20" value="" class="textInput" /></label>
+        <label for="phone_num" class="blockLabel">Phone number<input type="text" id="phone_num" name="phone_num" size="20" value="" class="textInput" /></label>
+      </div>
+    </div>
+    --
+    9) Upload file field:
+    <div class="ctrlHolder">
+      <label for="new_image"><em>*</em> Upload Picture</label>
+      <input name="new_image" id="new_image" size="30" type="file" class="fileUpload" />
+    </div>
+    --
+    10) Submit buttons:
+    <div class="buttonHolder">
+      <button type="submit" class="submitButton">Submit</button>
+    </div>
+    
+    or if you need a reset button (or any other button for that matter) as well: 
+    
+    <div class="buttonHolder">
+      <button type="reset" class="resetButton">Reset</button>
+      <button type="submit" class="submitButton">Submit</button>
+    </div>
+
+  - Form hints and required fields indication: 
+  
+    Uni-Form offers a nice way to hint to your users what kind of input is expected in a form field. These hints can be safely omitted if you don't need them. To add a hint, just add a paragraph (p element) with a class of .formHint right before the closing div.ctrlHolder tag. 
+    
+    Also, a very important part of any form is indicating required fields (although it would be wise to group those in their own fieldset), and it is sort of a convention to indicate those fields with an asterisk character. At the beginning of a label just place an asterisk in an emphasis element (em) and you're all set. 
+    
+Take a look at the demo form below for an example usage of Uni-Form and these two additional conveniences - hints and required fields indicators. 
+
+========================================================
+
+Example: 
+
+For the sake of clarity, here is a simple demonstration of how a Uni-Form should look like. We'll use a contact form as one of the simplest examples: 
+
+<form class="uniForm" action="contact.php" method="post"> 
+
+  <fieldset class="inlineLabels">
+
+    <legend>Contact Details</legend> 
+
+    <!-- Uni-Form units start -->
+    <div class="ctrlHolder">
+      <label for="name"><em>*</em> Name</label>
+      <input name="name" id="name" value="" size="35" maxlength="25" type="text" class="textInput" />
+      <p class="formHint">
+        Your real name or your company's name. 
+      </p>
+    </div>
+
+    <div class="ctrlHolder">
+      <label for="email"><em>*</em> Email</label>
+      <input name="email" id="email" value="" size="35" maxlength="25" type="text" class="textInput" />
+      <p class="formHint">
+        Will be used only to reply to you. Will not be passed on to a third party. Enter a valid email account. 
+      </p>
+    </div>
+
+    <div class="ctrlHolder">
+      <label for="message">Message</label>
+      <textarea name="message" id="message" rows="25" cols="25"></textarea>
+      <p class="formHint">
+        Write your message to us here. HTML is not allowed, plain text only please. 
+      </p>
+    </div>
+    <!-- Uni-Form units end -->
+  
+  </fieldset>
+
+</form> 
+
+========================================================
+
+COLUMNS: 
+
+Support for columnar layouts indeed does exist, but at a very primitive level. Basically columns should be divs with a class .col, along with the first and last divs having two additional classes .first and .last respectfully. They will all be floated to the left, apart from the last column that will be floated to the right and stripped off of it's right margin. 
+
+========================================================
+
+LEGALESE: 
+
+This project is released under a Creative Commons License (http://creativecommons.org/licenses/by-sa/2.5/) so certain limitations apply. That basically means that you can do whatever you want with this (redistribute, alter, whatever...), as long as you continue to share it with this same license and attribute me - Dragan Babić - as the original author (author on who's derrivative work your version is based on). 
+
+Thank you for using Uni-Form, give respect and get it back. 

pyramid_uniform/templates/zpt/formish/field/main.html

+<div id="${field.cssname}--field" class="ctrlHolder ${field.classes}">
+  <p tal:condition="field.error" class="errorField">${unicode(field.error)}</p>
+  <label tal:condition="field.widget.type != 'Hidden'"
+    for="${field.cssname}"><em tal:condition="field.required">*</em>${field.title}</label>
+  <div tal:replace="structure field.widget()"></div>
+  <p tal:condition="field.description and unicode(field.description) != u''" class="formHint">${unicode(field.description)}</p>
+</div>

pyramid_uniform/templates/zpt/formish/form/fields.html

+<span tal:repeat="f form.fields"
+      tal:replace="structure f()"/>

pyramid_uniform/templates/zpt/formish/form/main.html

+<form
+  id="${form.name}"
+  action="${form.action_url or ''}"
+  class="formish-form uniForm"
+  method="${form.method.lower()}"
+  enctype="multipart/form-data"
+  accept-charset="utf-8">
+  <div tal:condition="form.include_charset">
+    <input type="hidden" name="_charset_" />
+  </div>
+  <div tal:condition="python: hasattr(form, 'controller') and hasattr(form.controller, 'csrf_token')">
+    <input type="hidden" name="__csrf_token__" tal:attributes="value form.controller.csrf_token" />
+  </div>
+  <div tal:condition="form.name">
+    <input type="hidden" name="__formish_form__" value="${form.name}" />
+  </div>
+  <fieldset class="inlineLabels col first">
+  <p tal:condition="form.alert" class="error">${unicode(form.alert)}</p>
+  <span tal:replace="structure form.fields()"/>
+  <div class="buttonHolder">
+    <tal:block repeat="action form._actions">
+      <button type="submit"
+             id="${'-'.join(filter(None, [form.name, 'action', action.name]))}"
+             name="${action.name or ''}"
+             value="${action.value or ''}"
+             tal:content="action.value or 'Submit'"></button>
+    </tal:block>
+  </div>
+  </fieldset>
+</form>

pyramid_uniform/templates/zpt/formish/sequence/main.html

+<fieldset 
+   tal:define="addremoveclass field.widget.addremove is True and ' addremove' or '';
+               sortableclass field.widget.sortable is True and ' sortable' or ''"
+   id="${field.cssname}--field" 
+   class="${field.classes}${addremoveclass}${sortableclass}">
+  <!-- sequence/main.html -->
+  <span class="formish-sequencedata" 
+        title="batch_add_count=${field.widget.batch_add_count}"> </span>
+  <span class="seqdelete"></span>
+  <span class="seqgrab"></span>
+  <legend tal:condition="field.title">${field.title}</legend>
+  <div tal:condition="hasattr(field.errors, 'message')">${unicode(field.error)}</div>
+  <span tal:repeat="f field.fields" tal:replace="structure f()"/>
+  <div tal:condition="str(field.description) != ''" 
+       class="description">${field.description}</div>
+  <input tal:define="urlquote import:urllib.quote"
+         tal:condition="field.type is 'sequence' and field.widget.addremove is True"
+         type="hidden"
+         class="adder"
+         name="${field.template.name}"
+         value="${urlquote(field.template().encode('utf8'))}"/>
+</fieldset>

pyramid_uniform/templates/zpt/formish/structure/main.html

+<fieldset id="${field.cssname}--field" class="${field.classes}">
+  <!-- structure/main.html -->
+  <span class="seqdelete"></span>
+  <span class="seqgrab"></span>
+  <legend tal:condition="field.title" class="group">${field.title}</legend>
+  <span tal:condition="hasattr(field.errors, 'message')">${unicode(field.error)}</span>
+  <span tal:repeat="f field.fields"
+        tal:replace="structure f()"/>
+  <div tal:condition="field.description and unicode(field.description)" class="formHint">${unicode(field.description)}</div>
+</fieldset>

pyramid_uniform/templates/zpt/formish/test/test.html

+<div>Test</div>

pyramid_uniform/templates/zpt/formish/widgets/Checkbox/widget.html

+<input tal:attributes="checked field.widget.checked(field) or None"
+       id="${field.cssname}" type="checkbox" name="${field.name}" value="True"/>

pyramid_uniform/templates/zpt/formish/widgets/CheckboxMultiChoice/readonly.html

+<div tal:repeat="pair enumerate(field.defaults)"
+     id="${field.cssname}-${pair[0]}">${value}</div>

pyramid_uniform/templates/zpt/formish/widgets/CheckboxMultiChoice/widget.html

+<ul class="blockLabels">
+  <tal:block repeat="pair enumerate(field.widget.options)">
+  <li>
+  <label for="${field.cssname}-${pair[0]}">
+    <input tal:attributes="checked field.widget.checked(pair[1],field) or None"
+    id="${field.cssname}-${pair[0]}" 
+    name="${field.name}"
+    type="checkbox" 
+    value="${pair[1][0]}"
+    />
+    ${pair[1][1]}
+  </label>
+  </li>
+  </tal:block>
+</ul>

pyramid_uniform/templates/zpt/formish/widgets/CheckboxMultiChoiceTree/readonly.html

+<div tal:repeat="pair enumerate(field.defaults)"
+     id="${field.cssname}-${pair[0]}">${value}</div>

pyramid_uniform/templates/zpt/formish/widgets/CheckboxMultiChoiceTree/widget.html

+<%page args="field" />
+
+<%
+optionkeys = [k for k,v in field.widget.options]
+%>
+
+<%def name="render_subtree(field, optiontrees)">
+% if len(optiontrees['children']) > 0:
+<ul>
+% for optiontree in optiontrees['children']:
+<%
+option = optiontree['data']
+index = optionkeys.index(option[0])
+%>
+  <li><input id="${field.cssname}-${index}" name="${field.name}" type="checkbox" value="${option[0]}"${field.widget.checked(option,field)|n} />
+  <label for="${field.cssname}-${index}">${option[1]}</label>
+  ${render_subtree(field,optiontree)}
+  </li> 
+% endfor
+</ul>
+% endif
+</%def>
+
+${render_subtree(field,field.widget.optiontree)}
+

pyramid_uniform/templates/zpt/formish/widgets/CheckedInput/readonly.html

+<div id="${field.cssname}">${field.defaults}</div>

pyramid_uniform/templates/zpt/formish/widgets/CheckedInput/widget.html

+<div class="input">
+  <input id="${field.cssname}" name="${field.name}.input" value="${field.value['input'][0]}" />
+</div>
+<div class="confirm">
+  <label for="${field.cssname}-confirm">Confirm</label>
+  <input id="${field.cssname}-confirm" name="${field.name}.confirm" value="${field.value['confirm'][0]}" />
+</div>

pyramid_uniform/templates/zpt/formish/widgets/CheckedPassword/readonly.html

+<div id="${field.cssname}">${field.defaults}</div>

pyramid_uniform/templates/zpt/formish/widgets/CheckedPassword/widget.html

+<div class="password">
+<input id="${field.cssname}" type="password" class="textInput" name="${field.name}.input" value="${field.value['input'][0]}" />
+</div>
+<div class="confirm">
+<label tal:condition="field.widget.confirm_label" for="${field.cssname}-confirm">${field.widget.confirm_label}</label>
+<label tal:condition="not field.widget.confirm_label" for="${field.cssname}-confirm">Confirm ${field.title}</label>
+<input id="${field.cssname}-confirm" type="password" class="textInput" name="${field.name}.confirm" value="${field.value['confirm'][0]}" />
+</div>

pyramid_uniform/templates/zpt/formish/widgets/DateParts/readonly.html

+<div id="${field.cssname}">${field.defaults.isoformat()}</div>

pyramid_uniform/templates/zpt/formish/widgets/DateParts/widget.html

+<input tal:condition="field.widget.day_first"
+       id="${field.cssname}"
+       type="text"
+       name="${field.name}.day"
+       value="${field.value['day'][0]}"
+       size="2"
+       />
+<input tal:condition="field.widget.day_first"
+       id="${field.cssname}-month"
+       type="text"
+       name="${field.name}.month"
+       value="${field.value['month'][0]}"
+       size="2"
+       />
+
+<input tal:condition="not field.widget.day_first"
+       id="${field.cssname}-month"
+       type="text"
+       name="${field.name}.month"
+       value="${field.value['month'][0]}"
+       size="2"
+       />
+
+<input tal:condition="not field.widget.day_first"
+       id="${field.cssname}"
+       type="text"
+       name="${field.name}.day"
+       value="${field.value['day'][0]}"
+       size="2"
+       />
+
+<input id="${field.cssname}-year" 
+       type="text" 
+       name="${field.name}.year" 
+       value="${field.value['year'][0]}" 
+       size="4" />
+

pyramid_uniform/templates/zpt/formish/widgets/FileUpload/widget.html

+<span tal:omit-tag=""
+     tal:define="star ('*' in field.name);
+                 value_name (not star) and field.value['name'][0] or '';
+                 value_default (not star) and field.value['default'][0] or '';
+                 mimetype (not star) and field.value['mimetype'][0] or '';
+                 mimetype mimetype or '';"
+     >
+<div class="preview">
+  <div tal:condition="field.widget.show_file_preview"
+       class="icon ${mimetype.replace('/','_')}">
+    <img tal:condition="field.widget.show_image_thumbnail and value_name != '' and mimetype.startswith('image')"
+         src="${field.widget.urlfactory(value_name)}?size=20x20"/>
+    <img tal:condition="not (field.widget.show_image_thumbnail and value_name != '' and mimetype.startswith('image')) and field.widget.image_thumbnail_default is not None"
+         src="${field.widget.image_thumbnail_default}"/>
+  </div>
+  <a tal:condition="field.widget.show_download_link"
+     href="${field.widget.urlfactory(value_name)}">download</a>
+</div>
+
+<input id="${field.cssname}-remove" type="checkbox" name="${field.name}.remove" value="true" />
+<input id="${field.cssname}-id" type="hidden" name="${field.name}.name" value="${value_name}" />
+<input id="${field.cssname}-mimetype" type="hidden" name="${field.name}.mimetype" value="${mimetype}" />
+<input id="${field.cssname}-default" type="hidden" name="${field.name}.default" value="${value_default}" />
+<input id="${field.cssname}" type="file" name="${field.name}.file" />
+</span>

pyramid_uniform/templates/zpt/formish/widgets/Grid/readonly.html

+<table id="${field.cssname}"
+       tal:define="rows list(field.fields)">
+  <thead>
+    <tr tal:repeat="f rows[0].fields">
+      <th>${f.title}</th>
+    </tr>
+  </thead>
+  <tr tal:repeat="row rows">
+    <td tal:repeat="f row.fields" tal:content="structure f.widget()"></td>
+  </tr>
+</table>

pyramid_uniform/templates/zpt/formish/widgets/Grid/widget.html

+<table id="${field.cssname}"
+       tal:define="rows list(field.fields)">
+  <thead>
+    <tr tal:repeat="f rows[0].fields">
+      <th>${f.title}</th>
+    </tr>
+  </thead>
+  <tr tal:repeat="row rows">
+    <td tal:repeat="f row.fields" tal:content="structure f.widget()"></td>
+  </tr>
+</table>

pyramid_uniform/templates/zpt/formish/widgets/Hidden/readonly.html

+<span tal:omit-tag=""/>

pyramid_uniform/templates/zpt/formish/widgets/Hidden/widget.html

+<input id="${field.cssname}" type="hidden" name="${field.name}" value="${field.value[0]}" />

pyramid_uniform/templates/zpt/formish/widgets/Input/readonly.html

+<div id="${field.cssname}">${field.defaults}</div>

pyramid_uniform/templates/zpt/formish/widgets/Input/widget.html

+<input id="${field.cssname}" class="textInput" type="text" name="${field.name}" value="${field.value[0]}" />

pyramid_uniform/templates/zpt/formish/widgets/Password/readonly.html

+<div id="${field.cssname}">${field.defaults}</div>

pyramid_uniform/templates/zpt/formish/widgets/Password/widget.html

+<input id="${field.cssname}" type="password" class="textInput" name="${field.name}" value="${field.value[0]}" />

pyramid_uniform/templates/zpt/formish/widgets/RadioChoice/readonly.html

+<div id="${field.cssname}">${field.defaults}</div>

pyramid_uniform/templates/zpt/formish/widgets/RadioChoice/widget.html

+<div tal:condition="field.widget.none_option" class="radiobutton">
+  <input type="radio" name="${field.name}" id="${field.cssname}-noneoption" value="${field.widget.get_none_option_value(field)}" />
+  <label for="${field.cssname}-noneoption">${field.widget.none_option[1]}</label>
+</div>
+<div tal:repeat="pair enumerate(field.widget.get_options(field))"
+     class="radiobutton">
+  <input type="radio" 
+         name="${field.name}" 
+         id="${field.cssname}-${pair[0]}"
+         value="${pair[1][0]}"
+         tal:attributes="checked field.widget.selected(pair[1], field) or None"/>
+  <label for="${field.cssname}-${pair[0]}">${pair[1][1]}</label>
+</div>
+

pyramid_uniform/templates/zpt/formish/widgets/SelectChoice/readonly.html

+<div id="${field.cssname}">${field.defaults}</div>

pyramid_uniform/templates/zpt/formish/widgets/SelectChoice/widget.html

+<select id="${field.cssname}" name="${field.name}">
+  <option tal:condition="field.widget.none_option"
+          value="${field.widget.get_none_option_value(field)}">${field.widget.none_option[1]}</option>
+  <option tal:repeat="option field.widget.get_options(field)"
+          value="${option[0]}"
+          tal:attributes="selected field.widget.selected(option,field) or None"
+          >${option[1]}</option>
+</select>

pyramid_uniform/templates/zpt/formish/widgets/SelectWithOtherChoice/readonly.html

+<div id="${field.cssname}">${field.defaults}</div>

pyramid_uniform/templates/zpt/formish/widgets/SelectWithOtherChoice/widget.html

+<span tal:omit-tag="">
+  <select id="${field.cssname}" name="${field.name}.select">
+    <option tal:condition="field.widget.none_option"
+            value="${field.widget.get_none_option_value(field)}">${field.widget.none_option[1]}</option>
+    <option tal:repeat="option field.widget.get_options(field)"
+            value="${option[0]}"
+            tal:attributes="selected field.widget.selected(option,field) or None">${option[1]}</option>
+    
+    <option tal:attributes="selected field.value['other'][0] != ''"
+            value="${field.widget.other_option[0]}">${field.widget.other_option[1]}</option>
+  </select>
+  <input type="text" id="${field.cssname}-other" name="${field.name}.other" value="${field.value['other'][0]}" />
+</span>
+

pyramid_uniform/templates/zpt/formish/widgets/TextArea/readonly.html

+<%page args="field" />
+<div id="${field.cssname}">${field.defaults}</div>

pyramid_uniform/templates/zpt/formish/widgets/TextArea/widget.html

+<textarea tal:attributes="cols field.widget.cols or 40;
+                          rows field.widget.rows or 10;"
+          id="${field.cssname}" name="${field.name}">${field.value[0]}</textarea>

pyramid_uniform/uniform.py

+from webob import Response
+from wsgiref import simple_server
+from pyramid.configuration import Configurator
+from pkg_resources import resource_filename
+
+import formish
+import schemaish
+import zope.component
+import pyramid_formish
+
+def sample_form(request):
+    import logging
+    log = logging.getLogger(__name__)
+
+    schema = schemaish.Structure()
+    schema.add('email', schemaish.String())
+    # schema.add('birthday', schemaish.Date())
+    schema.add('textarea', schemaish.String())
+    schema.add('country', schemaish.String())
+    schema.add('accept', schemaish.Boolean())
+
+    form = formish.Form(schema, name="uni-form", renderer=pyramid_formish.get_default_renderer())
+
+    form['email'].description = u'Your e-mail address.'
+    # form['birthday'].widget = formish.DateParts()
+    form['textarea'].widget = formish.TextArea()
+    form['country'].widget = formish.SelectChoice(options=['UK', 'US'])
+    form['accept'].description = u'Do you accept?'
+    form['accept'].widget = formish.Checkbox()
+
+    try:
+        form.validate(request)
+    except formish.FormError, e:
+        log.debug(e)
+    except Exception, e:
+        log.debug(e)
+
+    return {'form':form, 'form2':form}
+
+def goodbye_world(request):
+    return Response('Goodbye world!')
+
+class QuietHandler(simple_server.WSGIRequestHandler):
+    def log_message(self, format, *args): pass
+
+if __name__ == '__main__':
+    import logging
+    logging.basicConfig(level=logging.DEBUG)
+    config = Configurator(settings={'reload_templates':True})
+    config.begin()
+    sm = zope.component.getSiteManager()
+    sm.registerUtility([resource_filename('pyramid_uniform', 'templates/zpt')],
+            pyramid_formish.IFormishSearchPath)
+    config.add_static_view('static', 'pyramid_uniform:templates/static')
+    config.add_view(sample_form, renderer="pyramid_uniform:templates/index.pt")
+    config.end()
+    app = config.make_wsgi_app()
+    simple_server.make_server('', 9876, app, handler_class=QuietHandler).serve_forever()
+
+[easy_install]
+zip_ok = false
+
+[nosetests]
+nocapture=1
+cover-package=pyramid_uniform
+with-coverage=1
+cover-erase=1
+
+__version__ = '0.2'
+
+import os
+import sys
+
+from setuptools import setup, find_packages
+
+here = os.path.abspath(os.path.dirname(__file__))
+README = open(os.path.join(here, 'README.txt')).read()
+CHANGES = open(os.path.join(here, 'CHANGES.txt')).read()
+
+requires = [
+    'pyramid_formish',
+    ]
+
+if sys.version_info[:2] < (2,5):
+    requires.append('uuid')
+
+setup(name='pyramid_uniform',
+      version=__version__,
+      description='uni-form templates for pyramid_formish',
+      long_description=README + '\n\n' +  CHANGES,
+      classifiers=[
+        "Intended Audience :: Developers",
+        "Programming Language :: Python",
+        "Topic :: Internet :: WWW/HTTP",
+        "Topic :: Internet :: WWW/HTTP :: Dynamic Content",
+        ],
+      keywords='web formish formgen pyramid',
+      license="BSD-derived (http://www.repoze.org/LICENSE.txt)",
+      author="Daniel Holth",
+      author_email="dholth@fastmail.fm",
+      packages=find_packages(),
+      include_package_data=True,
+      zip_safe=False,
+      tests_require=requires + ['nose'],
+      install_requires=requires,
+      entry_points="""\
+      """
+      )
+