{\rtf1\adeflang1025\ansi\ansicpg1252\uc1\adeff0\deff0\stshfdbch0\stshfloch0\stshfhich0\stshfbi0\deflang1033\deflangfe1033{\fonttbl{\f0\froman\fcharset0\fprq2{\*\panose 02020603050405020304}Times New Roman;}{\f1\fswiss\fcharset0\fprq2{\*\panose 020b0604020202020204}Arial;}{\f37\froman\fcharset238\fprq2 Times New Roman CE;}
{\f38\froman\fcharset204\fprq2 Times New Roman Cyr;}{\f40\froman\fcharset161\fprq2 Times New Roman Greek;}{\f41\froman\fcharset162\fprq2 Times New Roman Tur;}{\f42\fbidi \froman\fcharset177\fprq2 Times New Roman (Hebrew);}
{\f43\fbidi \froman\fcharset178\fprq2 Times New Roman (Arabic);}{\f44\froman\fcharset186\fprq2 Times New Roman Baltic;}{\f45\froman\fcharset163\fprq2 Times New Roman (Vietnamese);}{\f47\fswiss\fcharset238\fprq2 Arial CE;}
{\f48\fswiss\fcharset204\fprq2 Arial Cyr;}{\f50\fswiss\fcharset161\fprq2 Arial Greek;}{\f51\fswiss\fcharset162\fprq2 Arial Tur;}{\f52\fbidi \fswiss\fcharset177\fprq2 Arial (Hebrew);}{\f53\fbidi \fswiss\fcharset178\fprq2 Arial (Arabic);}
{\f54\fswiss\fcharset186\fprq2 Arial Baltic;}{\f55\fswiss\fcharset163\fprq2 Arial (Vietnamese);}}{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0;\red255\green0\blue255;\red255\green0\blue0;
\red255\green255\blue0;\red255\green255\blue255;\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;\red192\green192\blue192;}{\stylesheet{
\ql \li0\ri0\widctlpar\wrapdefault\aspalpha\aspnum\faauto\adjustright\rin0\lin0\itap0 \rtlch\fcs1 \af0\afs24\alang1025 \ltrch\fcs0 \fs24\lang1033\langfe1033\cgrid\langnp1033\langfenp1033 \snext0 Normal;}{\*\cs10 \additive \ssemihidden 
Default Paragraph Font;}{\*\ts11\tsrowd\trftsWidthB3\trpaddl108\trpaddr108\trpaddfl3\trpaddft3\trpaddfb3\trpaddfr3\trcbpat1\trcfpat1\tblind0\tblindtype3\tscellwidthfts0\tsvertalt\tsbrdrt\tsbrdrl\tsbrdrb\tsbrdrr\tsbrdrdgl\tsbrdrdgr\tsbrdrh\tsbrdrv 
\ql \li0\ri0\widctlpar\wrapdefault\aspalpha\aspnum\faauto\adjustright\rin0\lin0\itap0 \rtlch\fcs1 \af0\afs20 \ltrch\fcs0 \fs20\lang1024\langfe1024\cgrid\langnp1024\langfenp1024 \snext11 \ssemihidden Normal Table;}{\*\cs15 \additive \rtlch\fcs1 \af0 
\ltrch\fcs0 \ul\cf2 \sbasedon10 \styrsid15951290 Hyperlink;}}{\*\latentstyles\lsdstimax156\lsdlockeddef0}{\*\rsidtbl \rsid15951290}{\*\generator Microsoft Word 11.0.0000;}{\info{\operator LuisChua}{\creatim\yr2011\mo8\dy1\hr18\min44}
{\revtim\yr2011\mo8\dy1\hr18\min45}{\version2}{\edmins1}{\nofpages6}{\nofwords1290}{\nofchars7356}{\nofcharsws8629}{\vern24615}{\*\password 00000000}}{\*\xmlnstbl {\xmlns1 http://schemas.microsoft.com/office/word/2003/wordml}}
\paperw12240\paperh15840\margl1800\margr1800\margt1440\margb1440\gutter0\ltrsect 
\widowctrl\ftnbj\aenddoc\donotembedsysfont0\donotembedlingdata1\grfdocevents0\validatexml0\showplaceholdtext0\ignoremixedcontent0\saveinvalidxml0\showxmlerrors0\horzdoc\dghspace120\dgvspace120\dghorigin1701\dgvorigin1984\dghshow0\dgvshow3
\jcompress\viewkind4\viewscale100\rsidroot15951290 \fet0{\*\wgrffmtfilter 013f}\ilfomacatclnup0\ltrpar \sectd \ltrsect\linex0\sectdefaultcl\sftnbj {\*\pnseclvl1\pnucrm\pnstart1\pnindent720\pnhang {\pntxta .}}{\*\pnseclvl2
\pnucltr\pnstart1\pnindent720\pnhang {\pntxta .}}{\*\pnseclvl3\pndec\pnstart1\pnindent720\pnhang {\pntxta .}}{\*\pnseclvl4\pnlcltr\pnstart1\pnindent720\pnhang {\pntxta )}}{\*\pnseclvl5\pndec\pnstart1\pnindent720\pnhang {\pntxtb (}{\pntxta )}}{\*\pnseclvl6
\pnlcltr\pnstart1\pnindent720\pnhang {\pntxtb (}{\pntxta )}}{\*\pnseclvl7\pnlcrm\pnstart1\pnindent720\pnhang {\pntxtb (}{\pntxta )}}{\*\pnseclvl8\pnlcltr\pnstart1\pnindent720\pnhang {\pntxtb (}{\pntxta )}}{\*\pnseclvl9\pnlcrm\pnstart1\pnindent720\pnhang 
{\pntxtb (}{\pntxta )}}\pard\plain \ltrpar\ql \li0\ri0\nowidctlpar\wrapdefault\faauto\rin0\lin0\itap0 \rtlch\fcs1 \af0\afs24\alang1025 \ltrch\fcs0 \fs24\lang1033\langfe1033\cgrid\langnp1033\langfenp1033 {\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 
\f1\fs20\insrsid15951290 //dropdown menu
\par }{\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid15951290 //}{\field\fldedit{\*\fldinst {\rtlch\fcs1 \af0 \ltrch\fcs0 \insrsid15951290  HYPERLINK "http://lwis.net/free-css-drop-down-menu/" }}{\fldrslt {\rtlch\fcs1 \af0 \ltrch\fcs0 
\cs15\ul\cf2\insrsid15951290 http://lwis.net/free-css-drop-down-menu/}}}\sectd \linex0\sectdefaultcl\sftnbj {\rtlch\fcs1 \af1\afs20 \ltrch\fcs0 \f1\fs20\insrsid15951290 
\par <ul class="dropdown">
\par     <li><span>Sample</span></li>
\par     <li><a href="./">Home</a></li>
\par     <li><a href="./"><span class="img" style="background-position: -0px -0px;">About Us</span></a>
\par         <ul>
\par             <li><a>History</a></li>
\par             <li><a href="./"><span class="img" style="background-position: -0px -50px;">Our Vision</span></a></li>
\par             <li><span class="img" style="background-position: -0px -25px;">The Team</span>
\par                 <ul>
\par                     <li><a href="./">Brigita</a></li>
\par                     <li><a href="./">John</a></li>
\par                     <li><a href="./">Michael</a></li>
\par                     <li><a href="./">Peter</a></li>
\par                     <li><a href="./">Sarah</a></li>
\par                 </ul>
\par             </li>
\par             <li><a href="./">Clients</a></li>
\par             <li><a href="./">Testimonials</a></li>
\par             <li><a href="./">Press</a></li>
\par             <li><a href="./">FAQs</a></li>
\par         </ul>
\par     </li>
\par     <li><span>Services</span>
\par         <ul>
\par             <li><a href="./">Product Development</a></li>
\par             <li><a href="./">Delivery</a></li>
\par             <li><a href="./">Shop Online</a></li>
\par             <li><a href="./">Support</a></li>
\par             <li><a href="./">Training &amp; Consulting</a></li>
\par         </ul>
\par     </li>
\par     <li>
\par         <ul>
\par             <li><a href="./">New</a>
\par                 <ul>
\par                     <li><a href="./">Corporate Use</a></li>
\par                     <li><a href="./">Private Use</a></li>
\par                 </ul>
\par             </li>
\par             <li><a href="./">Used</a>
\par                 <ul>
\par                     <li><a href="./">Corporate Use</a>
\par                         <ul>
\par                             <li><a href="./">Giveaways</a></li>
\par             <li><a href="./">Sponsor</a></li>
\par                         </ul>
\par                     </li>
\par                     <li><span>Private Use</span></li>
\par                 </ul>
\par             </li>
\par             <li><a href="./">Featured</a></li>
\par             <li><a href="./">Top Rated</a></li>
\par             <li><a href="./">Prices</a></li>
\par         </ul>
\par         <span>Products</span>
\par     </li>
\par     <li><a href="./">Gallery</a></li>
\par     <li><a href="./">Events</a></li>
\par     <li><a href="./">Careers</a></li>
\par     <li>
\par         <a href="./">Contact Us</a>
\par         <ul>
\par             <li><a href="./">Enquiry Form</a></li>
\par             <li><a href="./">Map &amp; Driving Directions</a></li>
\par             <li><a href="./">Your Feedback</a></li>
\par         </ul>
\par     </li>
\par </ul> 
\par 
\par ul.dropdown ul \{
\par  visibility: hidden;
\par  position: absolute;
\par  top: 105%;
\par  left: 0;
\par \}
\par 
\par ul.dropdown li \{
\par  list-style-type: none;
\par  margin: 0;
\par  padding: 0;
\par  float: left;
\par  position: relative;
\par  background-color:purple;
\par  border:1px solid black;  
\par  padding:0.3em 0.4em;   
\par \}
\par 
\par ul.dropdown a, ul.dropdown span
\par \{
\par  text-decoration:none;
\par  color:white;
\par \}
\par 
\par ul.dropdown ul ul \{
\par  top: 0px;
\par  left: 100%;
\par \}
\par 
\par ul.dropdown ul li \{
\par  border-left:2px solid black;
\par  float: none;
\par  z-index: 1;  
\par \}
\par 
\par ul.dropdown li:hover \{
\par     background-color:blue;
\par \}
\par 
\par ul.dropdown li:hover>ul \{
\par  visibility: visible;
\par \}
\par 
\par ul.dropdown .img\{
\par     width: 15px;
\par     height: 15px;
\par     padding-left:18px;
\par     background-image:url('http://csssprites.com/results/a1e92a29ff397d2e0ea93a0d7978022f/result.png');
\par     background-repeat: no-repeat;
\par \}
\par 
\par //down arrows for top menus
\par $('ul.dropdown>li>ul').siblings('a,span').append('&nbsp;&darr;');
\par //right arrows for submenus
\par $('ul.dropdown ul:not(ul.dropdown>li>ul)').siblings('a,span').append('&nbsp;&rarr;');
\par 
\par 
\par //drag and drop
\par 
\par <div draggable="true" style="background-color:red; padding:5px">drag me red</div><br>
\par <div draggable="true" style="background-color:yellow; padding:5px">drag me yellow</div><br>
\par 
\par <div dropzone="move" style="background-color:blue; height:100px"></div>
\par <div dropzone="move" style="background-color:orange; height:100px"></div>
\par 
\par .moving \{   
\par   border: 5px solid green;
\par \}
\par 
\par .over \{
\par   border: 5px dashed black;
\par \}
\par 
\par $.event.props.push("dataTransfer");
\par $(document).ready(function()\{
\par     $('[draggable=true]').bind(\{     
\par         dragstart: function(e) \{
\par           $(this).addClass('moving');
\par           e.dataTransfer.setData('data', $(this).html());
\par         \}
\par         ,dragend: function(e) \{
\par           $(this).removeClass('moving');    
\par         \}
\par     \});
\par     $('[dropzone]').bind(\{
\par         dragenter: function(e) \{
\par           $(this).addClass('over');
\par         \}
\par         ,dragleave: function(e) \{
\par           $(this).removeClass('over');
\par         \}
\par         ,dragover: function(e) \{
\par            if (e.preventDefault) \{
\par               e.preventDefault(); // Allows us to drop.
\par            \}
\par            return false;
\par         \}
\par         ,drop: function(e) \{
\par             if (e.stopPropagation) \{
\par               e.stopPropagation(); // stops the browser from redirecting.
\par             \}
\par             $(this).html(e.dataTransfer.getData('data'));
\par             $(this).removeClass('over');   
\par             return false;
\par         \}
\par     \});
\par \});
\par 
\par 
\par //form
\par <!DOCTYPE HTML>
\par <html>
\par <body>
\par <form action="demo_keygen.asp" method="get">
\par     <fieldset>
\par         <legend>Boxes in <b>green</b> are required</legend>
\par         <p><label for="name">Name</label>
\par             <input id="name" name="name" type="text" required maxlength="40"/><span class="error">Error:_Invalid_Name</span>
\par         </p>
\par         <p><label>Type</label>
\par             <select>
\par                 <option value="text">Textbox</option>
\par                 <option value="textarea">Text Area</option>
\par                 <option value="radio">Radio Button</option>
\par                 <option value="checkbox">Checkbox</option>
\par                 <option value="select">Dropdown</option>
\par                 <option value="file">Upload Textbox</option>
\par                 <option value="password">Password</option>
\par                 <option value="email">E-mail</option>
\par                 <option value="url">URL</option>
\par             </select>    
\par         </p>
\par         <p><label>Required</label>
\par             <input id="yes" name="required" type="radio"/><label for="yes">Yes</label>
\par             <input id="no" name="required" type="radio" checked/><label for="no">No</label>    
\par         </p>
\par         <p><label for="maxlength">Max Characters</label><input id="maxlength" name="maxlength" type="text" required value="40" maxlength="4"/></p>
\par         <p><label for="title">Description</label><input id="title" name="title" type="text"/></p>
\par         <p><label for="pattern">Pattern</label><input id="pattern" name="pattern" type="text"/></p>
\par         <p><label for="accesskey">Shortcut Key</label><input id="accesskey" name="accesskey" type="text" maxlength="1"/></p>
\par         <p><label for="lob">LOB:</label><textarea id="lob" name="lob" rows="10"></textarea></p>
\par     </fieldset>
\par     <button>submit</button>    
\par </form>
\par </body>
\par </html>
\par 
\par *\{
\par     font-family: monospace;
\par     font-size: 15px;
\par \}
\par 
\par p\{
\par     padding-top: 15px;
\par \}
\par 
\par /*for radio labels*/
\par label\{
\par     padding-left: 5px;
\par \}
\par 
\par /*for labels*/
\par p>label:first-child\{
\par     padding-left: 0px;
\par     float: left;
\par     width: 10em;
\par \}
\par 
\par input[type=text],textarea\{
\par     padding: 5px;
\par     width: 25em;
\par \}
\par 
\par [required]\{
\par     border: 2px dotted green;
\par \}
\par 
\par :focus\{
\par     background-color:wheat;
\par \}
\par 
\par .error\{
\par     color: red;
\par     font-size: 0.7em;
\par     padding-left: 10px;
\par \}
\par 
\par .remaining_char\{
\par     color: white;
\par     background: RoyalBlue;
\par     border-radius:10px;
\par     padding: 5px;
\par     float:right;
\par \}
\par 
\par 
\par 
\par $(document).ready(function() \{
\par     $('input').each(function()\{
\par         $(this).attr('autocomplete', 'on');   
\par         $(this).attr('spellcheck', 'false');
\par         //append remaining characters
\par         var maxLength = $(this).attr('maxlength');
\par         if(!isNaN(maxLength))\{
\par             var appendText = '<span class="remaining_char">' + maxLength + '</span>'
\par             $(this).after(appendText);
\par         \}
\par     \});
\par     
\par     $('[required]').each(function()\{   
\par         $(this).attr('placeholder', 'Fill up');
\par     \});
\par     
\par     $('input').keyup(function()\{
\par         var maxLength = $(this).attr('maxlength');
\par         if(!isNaN(maxLength))\{
\par             var textLength = $(this).val().length;
\par             var remaining = maxLength-textLength;      
\par             var span = $(this).find('+span');
\par             span.html(remaining);
\par             if(remaining <= 5)\{
\par                 span.css('background-color', 'red');    
\par             \}else\{
\par                 span.css('background-color', 'blue');    
\par             \}
\par         \}
\par     \});
\par                       
\par     $('textarea').each(function()\{
\par         $(this).attr('autocomplete', 'off');    
\par         $(this).attr('spellcheck', 'true');    
\par     \});
\par \});
\par 
\par 
\par }}