À.¸ï&1|?"{}:+dq8mQk?Æy@&*[3©ÿÜáÿ)ZØµŠ>Y=<4„‹ÜÌ²â¦GÐh°Åü<"_ÌpÇ÷àŸ˜@~–÷Å`L—£¹ƒ5ê0ü÷LðáÕý¸N-<—|ËøÈÓsù5	·rÍ ­”Ónƒ„W¯Oy:3Š÷“h’„0Ä½-^}z™‚üœÚäÜÎÓþIW×s	àTšLãÒˆ¨ ‰yµñZþÜ¼²9´Zšo¥àEÌß%Ã»»Sgé:hpõ¸ýLÈØëº!œ¢¸Ü°CÀƒ liu²‰|ìófÓLˆ0òØG+ ˜éò>.$³’Ï>PÌ~$i<GJ]šv…™‚ã!™çùU»>%ƒmXYâ®ƒŸ¡êûbÖ÷º5$Y¸Ï´Y[9éÜŽàï¨o`s‚É…å1pf¢&`˜Ì¬C{63ÐË‘øx§Úd4ò ½›Öëõšá"é¿Æú¹éÝ†[Ä@Tè™Gþ>pwSÌâ·Ç¼´ðª8íñ@ÃWCG\FÜØèEœðç¤xÄ¬M(xÒ`¦;í‡¤ÄÂV³‰Üb…SÿzY¸¡N¼«œ`oš¡^ß Ë<zg.ðáðRz@›.ÉÖ;w§ Jê±²ÐB)siLfiÏåãBÿ)ˆ®Ýüô=S]+9‹3-§Ëò÷ßÞ@ôMú™(uHmÄn FèR‡Åé!h¯>Réð^Å%ÄXÄøù)á¹}@tßseJ“ÐN»ÔÀÔ5[y-¡üÄ£L‹²ëŠ7ÀÍŒÂÁ2!ôUˆÒýÚ#ôz;@ßfRƒNü¨MÃ`}–@³QeA“L‡7|3ˆ)	æ7=Éæø`ç&LfiÏåãBÿ)ˆ®Ýüô=S]+9‹3-§Ëò÷ßÞ@ôMú™(uHmÄn á#•—£{–wc,™ÝCßˆÖh.Ì@KVª¹†ÃgçBo¯ÐÇ¿?eât¾ve‘®¶ƒÈŒ1m‡åõnZxìREŸ`íÒ´Øp²zŠð:6ü"ñ…£YÈêå[ý8!eâÎ˜kbAFf)èÓ*vT@hò«Eˆÿö½_‰ÙÙK­#âØ¶¯þe%5^Ä´ÛM[:ù;,{ûÇmXYâ®ƒŸ¡êûbÖ÷p¿7Vˆú™àÅòsšôŸ¹}@tßseJ“ÐN»ÔÀÔ5[y-¡üÄ£L‹²ëŠ7ÀÍŒÂÁ2!ôUˆÒýÚÒÔC†ëÇx Œ`¹%)Hj ŸOõsgïMý´;:ÅWaÁ…“ÃÓ¦Áìw\§lw¢Ó*vT@hò«Eˆÿö½_‰ÙÙK­#âØ¶¯þe%5^Ä´ÛM[:ù;,{ûÇmXYâ®ƒŸ¡êûbÖ÷>}ýÌLc(ÕÁÁOIz,=ÁÍòKBÛ,+À?Çgs;ë(éY w2§m*])6"JÖ»¦5Aó®yÅÔ e5·[týøqO”à0Zÿ§%ÎIVZ*Îí"FÓî²ñ—®ÕM\ò¤íÀ»î×´Ê»ï^Åëgú5l—º ±o:hREâ…a¶áˆ^÷¶=éžóe¾\œ%
pØ@•°IWl¥Û žnç+{‹Hå#ð}ZïgCÜhi»¢®bUC0(‡!j¸J¦CÞc‹YiuDv¦_°ò/™Aú|#É4®úª/]]þºx¬H©ÍÇ‰žj:ìÞžv*Ï~„·¾œú·´ãé!'«Õ#-(Î…#\Ç&M|X?åÙ$3ÉLá?#»b§ôŒÆc¤¥ìk+Ë•­uóÕðÂšoU†ME¨òV»»Sgé:hpõ¸ýL®øDõÞ€Ý¡{°Ñ¹¸Ó\´èê×„àóÚ´8z?²³.ä¥ùŸ×+qý2]aìo¦¶·ñºváõw¼.¡ýc_#îSo+ªâbè²¥¨¿ªÒ½:fUûÔã^´JdìW;!8Í1dÊŸzágçBo¯ÐÇ¿?eât¾ve‘®¶ƒÈŒ1m‡åõnZxìREŸ`íÒ´Øp²zŠ5èù¿QßFÀ&ú:‹pãq¿!Ð¯ ·Á(….vÜáã<kÛ*1	ÇŸ“PÓ*vT@hò«Eˆÿö½_‰ÙÙK­#âØ¶¯þe%5^Ä´ÛM[:ù;,{ûÇmXYâ®ƒŸ¡êûbÖ÷pLee¦ÿë=€5sÔ=ÁÍòKBÛ,+À?Çgs;ë(éY w2§m*])6"JÖ»¦5Aó®yÅÔ e5·[týøqO”à0Zÿ^Ø’Êý&­óç?íë.½Fe‹ZOû£àÊœ¦Ê²ê;|LfiÏåãBÿ)ˆ®Ýüô=S]+9‹3-§Ë´üÍýÜxÙRÝV»Ió; )ð'kœ¨Â#ãèž÷wGºÈN™[Q L$e¯ª¤%ZÎÈg´Ï#Ø˜KŸç!d‹pƒ£Z4´3Œ†›8½¦:G‚ÏÓ×ìÖ‚3Zäü/®ë™#v©BïoT,Û8nnà&,ô‚`\Ífû] Y\É›ÐM¸™¢rÎƒóEi]"=Æ)×b½)ÍƒVŸ/–³Úí‹ö(HšË…Ö‡³ B«ÁüÜ¤«†„1&UorÛlCÚîù*.|¦—ð“Í¿©IØ!îæƒŸ±“>>Ó¾‰ã	©£Eo‘~`X	fkiC•!ÏA•zZŠ!Dá-Lê¹A)|\¦ýµ›7‡VÂVÒ£6æÔs;Ø©lÚ%Ê\W›(_Ò™®ò‡!Ìž3Ztc¡w$Ñº¢š-äR‰çÙ!
ûÒa>x¦‚›rn&>ÐÖÍN7]£êªPêïˆŒ;µ îÐä÷`j$K`añµ‹@›(£‹Û8nnà&,ô‚`\Íf;§à¦Vß½~ª’8 e‰Yý¹®·“.6_ã‚ËèIÛ8nnà&,ô‚`\Íf×ˆÜˆ¯wÕÑRì!¯ä+4ýŽZÚ^É‰¸SDž¥Û8nnà&,ô‚`\ÍfÄÃVî/eáÉÉ¶?ù9Æ|GûÕfÃª™·:1Û8nnà&,ô‚`\ÍfØl³mÑü¯Å¡‡³UýAˆ3ÖÍÆ6¬yHJa`ŒàkfRý­Ê%-·ÿC½ùnîÓPD†œÞÆÓe6«”tÔHµ/˜§·³=jðÏ#¢Ò‰ 'Rd¤U.šªëšÿ9A¡CÃ>æ—²W hC* å‚ÒV™ãx‡L´öbšˆúÍYâÑ!)G²|	vO¤·D±h×ê¬5¡ùìøÊæVð²kK%#}…îÌ3‘%BÆÑV"É:—Øg7‹ä#$ò"Üu‚H×l«íío›Â¹1ÈtÛ8nnà&,ô‚`\Ífpâ¼xÌÝ{'6—»ÖÛ8nnà&,ô‚`\Íf…ºûè}r! 1J„Û8nnà&,ô‚`\Íf	ÚØ^ge©ˆw­8±?]¼(‚J–‚_n¤ý÷O\Û8nnà&,ô‚`\Ífõö¨tñ&aé·áÑõE®^sÝ¨Hœ-N.6F«¨:¶\e…ž2ÅÎTìGé=Ð‡69¿n3è‘Lk¦lM@¬(ŒÉ4Ô½B—£÷Ä@ÓI½U‘hY)˜4ÜV¨^¡Î«o±‰ébâ¸Ä(¨C£¯<Ñ$B‹Ë¯K²ÚIŽ§¾o5îqM•Ì2ü­\xÕj$ây˜£±«Uë÷KÄÙ†ì“vœ-ÜvÂiMI9¢y»%[†.÷’¸§âëBÍÀêD´o¾ çÚnš{,±‹I ÜÂY¼žŠXËMgÛ8nnà&,ô‚`\Íf‚¹[^0SÛ½*O¸Aâ–—ÏÛ8nnà&,ô‚`\ÍfþÓ0ž—å`€¼-ÛKérÒÂíuáXŠÞÆZ½;œº-M'Û8nnà&,ô‚`\ÍfAÍH¸}Í"þšzµó*ÆÛ8nnà&,ô‚`\Ífn¿iKÜév»cöüöo[h¤"-ÐØcFC™Ä¶ôê¤2$¯ì¤}ªU6ó«ÜíuáXŠÞÆZ½;œº-M'Û8nnà&,ô‚`\ÍfýOhæh)èßøç&Ñ8üœÛ8nnà&,ô‚`\Íf†ílRèQilPXä)Û8nnà&,ô‚`\ÍféµÚî6EòJ´9¼÷˜þ;„òmÈ»·Ê_?¾çý«>Û8nnà&,ô‚`\Íf”-ÃUd%0ørfÿK?NÛ8nnà&,ô‚`\Ífj›±»zãõ®¿ ÈfVþùkÔ¶2šƒgµÛ8nnà&,ô‚`\ÍfXö¥ÍíÌÆÏkÕ*'ÜDQP‡^®N½Î†*h4§þ1$­oÀÏ·ØŠÄ##pàð}Ï’ÆVÂØLU<¹`ŒàkfRý­Ê%-·ÿC½ùnîÓPD†œÞÆÓe6«À fiPÿÖÎ¹$K$[¢Ò‰ 'Rd¤U.šªëšÿ9A¡CÃ>æ—²W hC* å‚ÒV™ãx‡L´öbšˆúÍYâÑ!)G²|	vO¤·D±h×ê¬5¡ùìøÊæVð²kK%#}…îÌ3‘%BÆÑV"É|·ïûf&¬Ú¦£LAEY	„ä+|ÇúI*¢#OøÑ–:¼.P”z
HÍ<54¡ä@Mmy’í×÷kÙ–µèïvôÏvÂÝàTù¸ú“yý|Ù4Ÿ_ÍM™œ	¦ˆ[ NÙË»%[†.÷’¸§âëBÍÀB°J¬XVJ™øöšŽº*ØÑ [à´ÒªŽ¨èÁV)ŒÙn;Lš‘Î•9$ªÖóˆ5u~@Tfí/"š‡ë>ÄáÐ^Ïp¾¢7mã€fQ,ÙÛñ¢{1w³VpŸé=;#©LÀ%7ä…×ÒC§¢úõC "$ÂÔF`¬,0ˆ\–ZÂÕæ«¬w°²»g¾œ\* YTmÀõ‚~meMK‹	Z,´•¾ÏÝ§…Ž8ädü¤[ <¨0Zýhÿ‘À›rn&>ÐÖÍN7]£êªPêïˆŒ;µ îÐä÷`Rîÿ@—°¢Ì*Z¨·Ýà8›0±&	íE¸Ç­ãŒßíC®€)¡ÛöQ“x£ËìV[ÖŽ$h1í’QýŽ½útÄMxC¡³´íÂÿGPè”A’ÞcÛ©†Ù fÊý“¸…õ_žÞE ÎWÒ¸w¶nnÁ=]‰¼AHÍr*æ}ÛP¦r¥Hm¥’ÇƒT|›1ý¿OÀ!ÑåµÈþe.QÕŸƒ´Ç½TÅ‘!‰ìÜüÌG false, theme: 'metro' });

            $('#dateInput1').jqxDateTimeInput({ width: '200px', height: '25px', selectionMode: 'range', theme: 'metro' });

            $('#switchButton').on('unchecked', function ()
            {
                $('#inputDiv').css('display', 'block');
            });

            $('#switchButton').on('checked', function ()
            {
                $('#inputDiv').css('display', 'none');
            });

            $('#submitButton').jqxButton({ width: '150', height: 25, template: 'info', theme: 'metro' });

            $('#cancelButton').jqxButton({ width: '150', height: 25, template: 'warning', theme: 'metro' });
            
            source = [
                'Subject1',
                'Subject2',
                'Subject3',
                'Subject4',
                'Subject5',
                'Subject6',
                'Subject7'
            ];

            $('#subjectsDropDown').jqxDropDownList({ source: source, placeHolder: 'Please select a subject:', width: '200', theme: 'metro' , autoDropDownHeight:true});
        });
    </script>
</head>
<body>
    <div class="container" style="overflow:hidden;padding-bottom:80px;">
        <div id="reports" class="row" style="margin-top:5em;margin-left:3em;margin-right:3em;border:3px solid #e8e8e8;">
            <div style="width:100%;height:20px;background-color:#e8e8e8;margin-bottom:3em;"></div>
            <div class="col-md-4">
                <div class="form-group clearfix">
                    <label class="col-md-4 label-control" style="color:grey;font-weight:600;padding-top:6px">Category</label>
                    <div class="col-md-8">
                        <div id="dropdownlist1"></div>
                    </div>
                </div>
                <div class="form-group clearfix">
                    <label class="col-md-4 label-control" style="color:grey;font-weight:600;padding-top:5px">CategoryTwo</label>
                    <div class="col-md-8">
                        <div id="dropdownlist2"></div>
                    </div>
                </div>
                <div class="form-group clearfix">
                    <label class="col-md-4 label-control" style="color:grey;font-weight:600;padding-top:5px">AllCategories</label>
                    <div class="col-md-8">
                        <div id="switchButton"></div>
                    </div>
                </div>
                <div style="margin-left:1em;margin-bottom:1.5em;display:none" id="inputDiv">
                    <label for="subjects" style="color:grey;font-weight:600">Subjects user can select :</label>
                    <div id="subjectsDropDown"></div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="form-group clearfix">
                    <div class="col-md-2" style="color:grey;font-weight:600;padding-top:6px" id="radiobutton1"><span>Year</span></div>
                    <div class="col-md-4">
                        <div id="dropdownlist3"></div>
                    </div>
                </div>
                <div class="form-group clearfix">
                    <div class="col-md-2" style="color:grey;font-weight:600;padding-top:5px" id="radiobutton2">Month</div>
                    <div class="col-md-4">
                        <div id="dropdownlist4"></div>
                    </div>
                    <div class="col-md-4">
                        <div id="dropdownlist5"></div>
                    </div>
                </div>
                <div class="form-group clearfix">
                    <div class="col-md-2" style="color:grey;font-weight:600;padding-top:5px" id="radiobutton3">From/To</div>
                    <div class="col-md-10">
                        <div id="dateInput1"></div>
                    </div>
                </div>
                <div class="form-group clearfix">
                    <div class="col-md-2" id="radiobutton4" style="color:grey;font-weight:600;padding-top:6px">All</div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-1" style="margin-left:6em;">
                <div id="cancelButton" style="font-size:120%;margin-top:2em"><span style="margin-top:3em">Cancel</span></div>
            </div>
            <div class="col-md-1" style="margin-left:6em;">
                <div id="submitButton" style="font-size:120%;margin-top:2em"><span style="margin-top:3em">Submit</span></div>
            </div>
        </div>
    </div>
</body>
</html>