ࡱ> nE*ՓεPNG  IHDR$$E6DsRGB pHYsj)IDATx^-DZ{Hi-( J0P Ddf0I4,a~~R鯩{^=w}zلZ"@W'`BXɱ^8@ PÇIK?|דP\AUvݻw~8M@$ /cB9Kf-t/_,~%b4 c k!Y&b߿=IX8[XUW_^D Z& k!h~۷oMjAӖ.BU?Ma%b4 c4#V ]W:I\"_|#VLq21V I͈5 t}s֪Q vSXX'=M@5 UG'I\Ouj*1V e2wZX  k6u ؜@/bM _ʔ_Å~D*6$̱&ͅ5S~@u1AU5)h.u1Zxv%ɱFc2(udP9 /?#bݪ3@xmK }gv@!~m 8@{$a uB/s/d NT˞X @@!eN ^@F$qRXߟg_b?m>- `/N1a7 j:+O  ]۳!իZ) k6 7PEK48 XUVzAktSApZy*o ĹQ7d$xZ0صruDƻºשSݗǑد%V봰 yL٧b4xʭ]iOM.)3wFa~i})~xRb.];_*LP$09Cb>Yj&Zu!UvЖO9ؖ~\H框"p3Tz̚Q~G *I4O'9ߦ{Ru@b6t43z8`CւrSy?z\AB2 <*a_59tRCZRz!j W[ZFѶb$\^=)N~RUEJ(&5=vU:HG[Z*SU1?כS*^7F|h=Y5HUK ?>Y1Vn6) BQR_[ή01q0t2E⫤ًXR9TY&OuϨ2[M,4^5&.l](}K``v2OǤN?wyAmyqҪL W+&zG{|$b'QO6=cUݱ_˅2:zuxL=_T%<~Z˸uPN~5 :Vop8R]1zjE툔(,m=5w1;mm$QYǹ{Sìn bHD}lة8U|ZQ]Vyql (dx<~n5HrАL7ٺE9”l%Y0.mԾ1q kzX\K*~U%|1e;SV`~cL4 A$) Szv~̒BPeUSeRo*橀fz9fþ4[EOwR_>%%)xUO 9Τ_(@_i~lldnji/'o~c/'O+ ]CY}3or{jNViEfֵѾ#-EӅc}{͓2Lvڎ2Uy&NZE_?JWf_wt4oyz[QSZ5/ Mu16@f[ѩKC;hc8o{_qy?Vl$ӥ=L5Xm-z .5:mקƧ}=򲚶_׿^u!^nθ8!5qӈar%B?b Xun)k5EL#9~$%i,aQ_=A48f'$ܚ6܆}W # C8j{pR7>%/S_6w q1~'i2A|%^gw̼hMo(rxlsN3[33}A6^LEےX^nf蚕;][tS!jl {a9([񴯪T@1,Eϥx^MCVqReaLvWq|{bw\ uW(Vro ! TU,zj54<tpIL*`E>}%~¸>ۛܯ/yװ*=475伒G^kd8۸.f.岃U<ƃg`OzZ ?ݛl9w5*gD&izW=?>~vxWY&rwC7_ kf]kN,^zO {hg m* =ɨJ"bճVj[guշOjP]gœ¼YbZa$k׳}o453Pefg\1fgG$dGic sS|yV+v=MR9 p&di,s(ec"o|ySH{?Uαb4 DŽک ׿_[I,=pe*`ޯ%8L!k fݶBIu@f {fESb_gm|왯.R+zmlO {#3ʹ5(#gӊfr]ƎCIg~sw:(\Ċab=3B2e2.W)6dc0t7@w::k2N`bhTzRw\mi8يŮv+ӷ[\W;>~2n+5nXc@מ+@xշ4 {^GW.D{,q.b9z"I_/ƃ1nwYp1{>̲=]@F\[Θ@]4^D*?qfRT@#ug\A (|j-M;亞 qh՛o5bd͡>5c(ioƩ8ًb:<ѢMe&z'Z϶z͍הYŜ-ӯ:Uɉ^~L ;R؞-cD6,:74̪*g7'G}kAET3&YyթA(KFE_9^-<7"uVIh5k_(, o[z+2?u\>VvMU4؊jb_Ml*?`Q[4o_'-Zo-*+mzTyMKwb *fKO5Ɂh,WZa 9hX`kBO+fIke.@U/#/ۢ-SFqQ5V/^ kVOϬӷįUTYW&>_la'߫pvM,w>L2уDǹq03iڶ|~55A{0ߐ@N*-[Zle+9LV{}-jd& ^ٵ︧VTU3*A9œuݝ$fOs U&1 ~H"%ZSNQG:\Ku<0"9]tJ O sWt*'brLNǗ53g j['7s2390ǣ+JΣ' :9'i,gH8:)5yOMD*-B'6HHQo)&YOV'{=Y`ùx3ːl3 L I5Oz&:۸^O2nn)6iMY5eu˗?JO{o}nd^R)@`='O̪ak\V]q*6"`ы u+{ h,O^mdE1sn@t'_ꃅA@XGNY %@EP)u6 S  (.I-4laDD@!HCXQ3A+#NBIE{%*&iO#0͈Ed Ts~FR7H8"gr&@ мe%Vn @|ĪXw#9R#nA*"۸ 1݆#@Lz7& p&gb  pͧq+º֍zٕ+kkd@u Z8 3Y?/ Z3[ hJgFOvn@+)Q id܊{w 'A' VV@doeY̟@&dW9P@W"WҢDW؀@cWD }Wc7"{7+Dgl'0Ylw)\VbGT^^wYI^RL^@`O>n@n ,~KzL*n=nzo $r*H P@V"%ēZQ+,i} c O ]JZ# Ѳ)ALۭ*93[ scչnI^1PȴQNA@NLf]{@XØ HUrzצxh= [YXtuCwK \!wv $|^ šE1@QbU&`G+~}j_a# 6@z6%?P" )@!Pj3W+ @\2 4Ą@o}TQp_]E8 ލd+zOb p> UR1ΊW[m* p*zb p>2 8?5;X3q+ºl* p&k^@*`KO"[Ҥ.@-<za p2+9 puBXy+~( POr.\<|-ڃNN`VS]yz69֣{3'!h׻XMUbѩIg-W  P(;uܓW{1/֯H֗sZ5 ,7`y SWNj :8+V0|$/QPZ ̩N'[W^iK$;7[NU~Fiaf~qAgNz!/_x-PHwZ~ڼէMܳ&½'ݼ ͑=a@fRyE: hїt044 tWޡկdS/Cpv pOzg\m #zeBaILߋ_ـ xB`=h |᯿ˋX8šgEI@!(\-V1 1! ,bPZj$FJ2 JBHdj Z?|o5ϊ=$u?E]Wjh=b~nf@(hmFz(+@X CS[Nh=4k%!p"vu񪃞ڵ{T8|: ApM&Xɱ2 pOneq 9ֵnߵ'#PO{̥ܚO&aP  8G.(2KXk/%! 8tև(tĤ!5Ohn 4J* 0@*f0 @J*]6$ЌO/ / A:*6 @3>MX@ـX/8& -9u[Q۳_(k2Pmoo [͜!:f%bٯ{1Ev7u?Qsº3B_bK 4˨_oA @y&kxA$cUU2nF5ƪݛtW l]E^5Kº_| T5R03FW/z59"vEĚDM YpfoqY_ ^0VlK;mUO&:{/R{Ypo1齙v{-PŪ^@*>}~7'Xq]B[NWJqz*w'3>_z׫[oCR'%ʕ;u-շo~dݻ_.v _24vxF(5V&QS Gp+QUOGwګ/"wp@@/bM v<GZ}V<Phh2VDA _n=+^a@Ї"5=xa`&#<;s6B(L+n9@/`X`'Td*kX-Bw@PRz>D@lz,g@wCnw c( p$"0믰#=E[hUz5 b$u p G.uoQ? p:z.$[vz&@XAw@H8!shXn* Cgz !u76"{8:!'KfҬݻ@h^nºG  7敫L@V"=C[轏简 S X]5 e+4]*V&<[Yo^:ۢѻ_T6uw!/_h?POݻwQ-_~]x6N4,؄6#ZVKº?B@nAmm8>v-#+^R^}N7Wen 0֝\C T|>Թ"x6a(ϕ„=ܞ)5On5բܰӷ< xE.i™ oUo?yXj]fvVٻYcco;?w4~@aMョR[h8go[KX[3o޼ŋgϞUeuVc+Q8[Sx<08M3cPZRƟnlɳ7d 9ܤS6Z~<6Тd{kb]^)T꟧,F]x@Xƣ*ܘdE۵O7 d^G>}v!J!G&>; u\؆c(˸@g!\zW@,ֳx; @X/J:zO` pe\IG @X .Ca+ pY<e q%Ba=' 2#Ygv@7$PG΢i@n$ϓ]"0[&q (@`u/JC$N" yy( <,/º@'@[z%P\mEX< pqMŇ݃GK5ϊR& A@X( @ EaMa py|pുJ.N^t ^x4 \Vr(t8zzyX@c@#+֍R 1@[(ⵁ )@kk{O?d󫯾zOV+AL=!p>|x)ެ3̧O}J-*m](JSǰ}LSWΎ0qJ+g- Ul14sMLmO_7I-f?e 09ZXc41?Xm_zhE{>-h5mW;ˆ$)-kԺrGM\\fս`vaĺ&`j/^؊N ~uSҷoߚZ$kegϞ}qYtjdjw! R)4^ Ie)a5 WU߼yڊVoC\ݤ]`G@xT@T^ܺPXf?WX{%X*냙h붘Z }О̍7_jqrG6*l؊+*aru0lߞ]LST;H#$32L* g@W'i/㣽L,*.^ڋ[ TEfRk'\ [Ťۿj7lzQYU +T@OUuIXJX9V)<2+lWWԓt"J wɽjcE"VWɮÈ!HH T[|fKDk5+4ٵ }Z&<ȵy}nnafӽ}{\ժƨݸ]_cmJdw!PW 'g:VIfmo^yAI]S4]0 UtL:uR-R[IjWEu-~@k,o*cCu+Y|mz7BCl&м+ 7HHŪ}tM4 LEZPXefIk3n ¶bjvO2Zo^޼H=wE +$s͎8ܪ .d Nr6 >V{شge}{5lXooc LG]%]ꝴ% c *f7s>ĮiQ 9hQ}뉅#]cynH>y|m߲ɪ ?Y2&o{ڽOl|=o24^b8X o6MOrZ!~ڥFt.v<~[Uu?N8ZQZ|y]C]k[/,SI½oHjL뇇Wj[wrlxivsd[}/5\ͽt NF]}W']ݽq˿/V4r{%׺of5~5[H/@ z/Nرċs.;T< C[X5WAۄl+P_tXsHX|kjU\۷~e.3y!+^e;mt9c}asnvYǁ;o]mjĪ/o\Z~v~v6ζ]Nޜy׺E_v륀zLCִ' W?vkȑv<~'ufDj>qwj-VuuEzI; N#''?RUJwqF;^x?܄%[)iݹ([ygM 8oJT64cY۴VlSCq?ߪvI/:!m;mMJ}2 e0?Qv~]λzIE{=QU*&{ڸR!IpOYhMWhm(o(쵮:6I$IeQ u[bzzRDmϳOVj}OqCZ,Sku8 HR1Y򨻡@4wvU{iwt߂?ldOlY' rT^w+ia+Zڋu{׻,oj:<~Chyg|ՊeQ[-VqsҞ'ՊD%9_<5SbRleowd{%=6Iɪcs | hߑOC=MD% 2KVD }I RO~siG C^iWyHwD27޻= Z$/jw9}a' Tdf7:DKwGo3a.'wY[;~67'fV:Y$O:^V]ՐdB {qDǿҗj_ۧ;X]̏>_Ӟ6'v=0Zy+p{?.i ',-gYT9MH֩`cͳiqwMmؾ=6T2E:2G-rz-~G F e c:^Gjw7Z={ ėߣOQ+q V6ӗV6+sawvАiF@Kz$;sli/}Zz՟x]Аl+Lklo2Ǒp%߰}LfDd;6ݍl+?kK7jl.t~`4.g?Q{Op&{ EXYf. eŹ{~p:^?m3ϫ?6zW~v;F劭z[w,o "r';=][o ml+6cE{4`=w}x' &ҵ'Ly}6= '0e4!yTҽ(XG{?zcqnG-q4@Ŏ8թ.ͱ|oag+ F?^! g1Aq[;0<緌Yn_}RcU@:"^&a9'jWGz^36g?=iX }%HTf8ƽ7t~٬w>:R+t#s Bm/ͽX8dyQr_ R+Vn-G~ ~'!53L=yxgik v#6ӑ)[F:Vsc/?5g6O$kҋ*]՞nkL}>学I<ż@#\h2n;KKʪ_qWd>=W-"kɅ->q8 &Ȗ\Σ63oeLc5*Z-p\ѽKuδ箹j;Iu}6ϑ㊍P,5zɚxjGt`4.'}t:굄xF;S~=9|ӎJc ב kawDkr|3SPM6bǕb/nʦLGy=qCʍ}Wɵ_2YFvp׳|Z /Y$s רYm߁ʻ<[c5|]~)˺  Ow#iNpwi#UռtWeq⭹k}l'#{=鎼ϧ<:EB~Lz}+|7 s'p_V5𔈊p`_rV/CYߦy+_"&km2%5/,gJw:lvQ<r|Y,geA,CqM#'7懁- x\^3Tǿ}r2S+5.sf'4%U&pҞ?#Vщ6Qq]QhN[k iχ!aQ}*ƝɑQe[s}| p9.Ӎ syۅG=Ave@+VG'hvϝDYkje^ўcs*^Ix`. R$%No>hE׊ަm yehxkuwC}jG7 ]exҞkK'lu͜Pc[ź:O8;(xH?Pդ>ηrf ,:Rgɘm)@ Ҟ?c!~f] +/Bu7k|[;p XFDެ$v}FŶr`.' khgw-P |Sݾ;*g5dԠr$_rCW^qێ4zSEkk D]!->SF{6tI67*?8í}/uF xW|x9 ǡlTK_* lGM0d< ;o0Y_T~)z앻N&nAEͮ{!Et"-%YyQ6}S ̾DF=sC)$Om-xUKv5t\kbb#|!Oyx^8Z.g57N<=p8[y+M36nIm>]P6Qy T][}WoJ ]ȍej-'+Ef$yTqYrD0"#2CF%<&qD\Ekskf=r^>G6>]rP;G*Jr%- e.Ӛ3.i\"suK#xd,٩\+O"ޅXykEM2)QMf+>ôLm8/<=vrsv5C +a5hn]}=zyț&c |2e[{,|5 Y&yoR;_vvc ^U/7ì*-SMxj~g pE !=qFHpuKzrǫ…Ao@hLט;% *9@yKK~@^7m* -/Ijgyr ]]Jg䓻XwE'KM_*tBt@H{=) g%y>7ξ͢{4@^k~lWmYq;=  WkrI{^0DLEM6<(@H{6b@hDy{S@5^E@ 5EY@@H{6b@hD׈e@@^ ڈ^@@^#ZE@zMk#F{@@FH{hQ@5^E@ 5EY@@H{6b@hD׈e@@^ ڈ^@@^#ZE@zMk#F{@@FH{hQ@5^E@ 5EY@@H{6b@hD׈e@@^ ڈ^@@^#ZE@zMk#F{@@FH{hQ@5^E@ 5EY@@H{6b@hD׈e@@^ ڈ^@@^#ZE@zMk#F{@@FH{hQ@5^E@ 5EY@@H{6b@hD׈e@@^ ڈ^@@^#ZE@zMk#F{@@FH{hQ@5UV|9" 8}&IU  @ nHh  iGLB@NuCB@@|J }U[@aۍL q:>rͶC"  ͮ  0H{m/ .oz M7F"  ͮ  0H{m/ .oz M7F" |:- RioVi@@ ^@@i#@H4A@:"@;;E@ n@@bd|*f忪|ʗY]/ t^i $I+Z99wzYSJQL)J^%%JI  =OPeGÅBjrE][P>EM*JTr`\=UJ!@@=eP>įǣ릒L+BDn)[JBAգ*@@OrXry/UU'?,FkuIS Wt|BʸE  io3h bO=n{a,N\츥^׾ϳ$QݳX$O(rwO.OwVIe~~㫍dbhno@ftH(2в @@@H{Q]jt)G'+yC!rEhy|wN:t2bnajzy|NM&ox!7+dKZC׌C@ 9ZD򝤽|٭ʤSŤ:o`pd!2hI)l%ZKL肧ħR|$Zt% +@s{i/"W2;89G&"G-o?賓SpQoOgB7ꉡ"^9嬏e&"Ϸj\F"H*4aƿ>߱<S‚l:ew  ioc`%*TӉ%[_ǝXDMId3kyi-;47D#e{osؾcW}^hj:ˏ8@@H{Np\YK bvHf?X#_cO/d6,aCCc}C7}(}J0X(ϝN '@{}Q;yܙdrEIO)q[V=bۢ"Rο`%OՒWun|a0rEsQ2\; ͎Gg/RNSӹh,ULƲ&dgnZߞ8}nZKGJOk{CJ>?nt w}e%& ,@ګ  v^c׿=y:s_|GFU9D}Ѻo_voglyG&ԢcZшܬ@@ X^U`P?~٥}u奿/.{i/={Ԇn\rc~<=wU_[F_SP\ [N%KNxپW~u'@>p̶˾ W>s޸yl^t_._Jl)S،+s  0 {p wKWGKW<Ͽw OT~x=_wD[[]JD=ŸWS3z" #@举PSJy:"qu, F R,ȎIJc^Ԕ-~e"Z\_Z'U Д( '@d_S jL//=3/0{>wV;\"WtXI/O"E}?1"刢 B  io3ͨDDъ <6]&bZT5JLI7,vyS?:ޟ&ʨËJ!dczd,M^x0ۦ@?gB@i)e]OʽF D"+ER16Jܻ/,{K|?;4wRG?yjݚBt22XkцHRNۋ)QyO! )@L[Nhh\TQ]pVәu6K'W'&MI.zʶ]WU\bmbZzޮ??k4%6L>qȂ|h$Wi )@L[RqvZ՟oG?߱8ᝩ0&cH42S*1uJQV:_sg?c?m׾~FjiY6[r: ! @ j+Xv4kcl6?7N=ʿzf䎟*j/{]g7]7,ӵx*6gAqzr뚟MesJ4U8=f]wߑH*B^ɤ 5sy3wS[sQ ڡJ5|?H{kd8&PH%Tc3/rO.I=UR+ܲ2Qb,ES)h.6TVtiB2Zie$U.&wWdP.Ǖhi/>H{#]-ޮ-9Vr7Ufvp0V14e)9=l[T6:KmJ6+[r(O&XR+d)2&.ҿTPJro~&iJѲ"z-NuH@@74Z'ZȨ|7n\Q'9Gkx^UGTM3  ljTed^-IJIHE) ϭ_![2J ɬfl)5%'|J_^,65=]KSGnLRr'-_aNؕRIe}sGv^Kdr4_Cűk}[l#^2 ~uJ̮%e퓓B&|O'J^6Sի-'_ɺkSf&$sV_t]t幕K-9Ғox@UȜ!*~co,x;?sX26d\ы`*ȃn978W᳢?8𜔮H%tʱXaպ&7$}]$Дc?-&W)"ϵόչlK̾,#L΂DϦ+ݲԞ\+ Y ƉpUBk MRuсļ-^(fJ$~;Ռ6Z*%Z"";e}@.ȕ!1,*HthwtL:k#Vhiܯr/x4:0Zj e3e(X?ȇ\"2 g_$jA@Ҵ':rlAFZ^󆂮Lg52t|Ě~y";#ɧړP}tyB&YI&3U2bd@UHZG꟫^]%-;񭷒|AT'3)/}NuJrT&͘-]T%vW'|W\+._t\nb\S<f4=IMיG>Ȑ|EFȔeFؼ-W;7 gИ&2szH@h@צ=u:HWce?23V|nN GwKlH-Ld)ӘyQ 3?˝IhRK }+7Uf̢g$kvv3go.7}T[D*r=#t˱㾘$Ȉ,hO+Be 7;=y><=/<~N:%9;(+ߗOoؘX:' IUO)اDDO)_0LZϑ]/c+ODh6ώ6%\jh!VȔLB!%ɵyDoXz(sك.RedI#)ŨDʉ3er@cژNG3Vc$N+)#)ġ9f&VYPY8[ ~037$G$C@52]'͓YԾw奙 ߙjۭs)v|XDev+5؟s+>+[~soƝw\֬\$`)k2JTG )[˜K#@Z3/eWB\tH kZ YUrt-O-M&$*άJ#FsIFR%Jku%I8K*? ?dI1]>YGY?lҪrY;# Td\kZ*gck3fɖnGm  @=ceRk#!eF{۶.er@Ѹx5 3t<[m[jJ: x*q%Htrz,5kr+aMz>2䕰±)T+ڔl&?ʴڻ&-椲o㰿%㥴9,Μ#;<$FiActA+̜8Xqy9PۓDCci86-q`et-&7lTVˆ3_ʓGJzPVe-]deY¨h2hVb9| @:,ЭiO"cd 6UPzɅSSϽOJ˒=4I}AMS}<[+h6ɋzĝw>,G~d[UƢ%dLƳ^D4⎿gbR Ggyr?H^z)qL(FҥBs('إ$fQ6g$"7ۛ9O>gmH%hIS~Z)0-E}r%H^Ɣkw%b5leCOiLp3zgBYMX$z]8Vv Q?{@`4ͤhL[^ٰnCvT*+&[婰J*)OVJyI]Gi3\v{LRgd3(eEG]$wibBLLFRy7[Ps__8gdI'vO'Wt Y܏|rp΂vn|]9EyUHLK9}s"goݣ2##sׯ]7lը.rіLgDcoyɗ9ûd$MnzjYI榕>s o>(I.[mۺ T_Oa@ߧll9^~od tCU(Ok[~dJR´|!Sqj4Nڣs{_D\V>ueA]ًm\\nLצ>玤 7zO: keJy/5W&?[A6<'K~h-푎N ~umړuNOq=I)rwaY/HIrSu-yᲲq,;4Z4gѲ}CrOM 3`kh&S7WOx\v+K蛐s9y2J|׾ͨRN)~ǎ;r9_+icW&fɱyi]lWfLIfWEI;yr_ 9斍or@͸B1f('iƋrYI(64sӓ̩{K9PniñS?W!{Gr]+][z,ˣev 2}r3Gnt"!dkr͆OMKӊ;/*٨\ʓgr`T\1oh@VWT>V腌"R3GnüB{oVA{[?y Tq}p1U+3 <8,jZ qvfiZ5&el<^ĊT5Bڙ돍sżZi:Ÿ#&?~ɸȊ]]$%yV)L&"Gvf R?-b1yq;?\۱9v @]xFDeX#SR3rO9#K$WfB,PԙMT~EdDzo|>xT MfJ?O=#m9~0~ĵw=xӍ[o}q'{g]um~u/|)o^fEyt<>w^~5[nﵯ{o>SO9=­yGc;I}+4>grU݁S9#7T8#ajܫźtנ1n=QG{C@ L5q﷖5̖Z{?%]Z/})e49oO%p|/WO:LJR H#|^X5\*||A)ڳq^Фⰿ-]ңم]䮛˿7䳢N4,ңհٷ-0b4R:3_cɳִ9ճ۱r/.E26ɴʲ4;'P̏?ѡ+0*9˱亊ԠV,#>︰ղ}q<6mf:oGKUfJE  #O{SSJZKz՘ܓ9 k9ԟV7^Oֳ_b?W|z^x$ ْ<7*ܘ( b<"t<ǛnO\ӏ xߛyӓ0?j=C3@}`@)xtG#SSgYQȝA ( TL&ǷɵOǖod:(qǿŰ!X<E"rV.&Qr,*emȮ5s̻5?zࢉ  O{䔒J%ں2/ܭ%[\*!O5Qްa";ţ4WLSrIlv_uV|rTVʅrĵ_-X굏 P> /?{u}nH$Ak>pzbCvEhBr=?Ēɩ̄\+wn6?@@Ŵ7\OUy0EAe;V{ OS)wy^{tyӴBaZrc459!gpõgsyoP k~.,ܢ?ۛ,>cɍ+.8ú<{ܱ'w%GWUo:gɩ7\s9#Hk|r}9|??3W\c[Ιf>g$?G F  6}F5h$331j25Vixü; =,(UVHUC*D=y)'*}ZQ&ϻeYszg2җPSR^6۰NuS1Ty~FXnWndŖ/Vl6$tP@(sio~-;grOEψ*s{|ZѨ3|a^)![.4=M+\#jR.iRZjWlۦ |:/Ƙ?@/=Skpm|7\/dRnLl|jp}4Fr L4yX*79nm3|\  Ŵ'J1>ܲVܹ̕)g9*,֧j;-Jr+X,ⰿȊ-7’h㳳ش>/ <~2@@ $2Y)eqVI J<:g4EV۩MVLT._3/Vl咚J'MqJ@@YK{SU1.M$"r݅)ϜPxOyS^㳱YJhrb.k\\,ԽRc@@z,BAC^oNS)* \[aж=t-<;mM׺1^7G݈,;WjlgŏE*Kxt>Nz5s-~x2lCvRg L{rd7Bfa\ߏM6d2VN-ʕ6p^:6Af>i` }?k=@@x WC| !i>4yX?7 ǔmi,-c +_2k\D놡   nK{֬GI 3||e&K3,ݍY`^P zrA1+Y# @7 ^ڳ+>++'ɧi:P)-%bnyCHyӧQ0k]UP2g~!@@!{iϜ2JS yEB+Yz1Crd.<9=ZٷQy|JR)Db)we6q_4"aKg$/kx&BQ-Oӵ֊67  轴(|DʭLX2tK\Ѫ˽K$D%B^ fif\!\qa8]nL&6Rq[c-"c\1RV"}CY(NJcu H8  @ӞģJLfJ<&n)IN/LuFjJ6#KH?&'>zrk.Ḳz5%$⹢زlAIEAw~ԃ - <骲vN/cX,'%t5&2. o94gᑽ02O'ٕEbDǣO?>].{Ep՟r# .dp`{rΜ~{6{Գiu^U,>s3∩ڵ@Ӟ܆Xɮ\%ϙًd3޸韜bڶĚ*e*&5=7mȳ΁>=%++!?٭Ԭ>< "`ǔ)'<ܣY̜!V! л27&˥\bxF4I~eX}}rebr,iyJbBrQ{2_JrM+ƣ1#kb PI$ JBq;7P(s2'X*XXǒ҄R:l)_PR2e %=Yd:Qr/,F@@ӞUy7HCe"A]IRr**DBVc\%.[iU^+˳v58R)cl |G^OkFc_T"\LdN+_|I܉Y"[yeqyxp4HK9۔^K+8% tT i@iC@@@6 ڈK  @H{ QiOnGxdQ5 t@^w8 @@ p+B@LG  f^G! =@@ 0.}C@H{  @H{a] 8@@0 < @ q  a yt  @@@,@ 7@@1 Yѥo  ic@i/̣K@@  f^G! =@@ 0.}C@H{  @H{a] 8@@0 < @ q  a yt  @@@,@ 7@@1 Yѥo  ic@i/̣K@@  f^G! =@@ +Xv^jf1{yEj2_7+G;f6 2G͠r@׵r]1gn%UJAb&/I˾[hf5)~H@@]Mt̺y |At0H  ,Ps/utQ#@ڲSm$|lT:h4U1@^+^z&BXsg5^P @B,Dڳ_)브׾-G{7)Ͼ@@A={씗۵8"k#/]Hk@HejhhGRu`pTevOI@@@@iOnl+fJڽm}lw@!D3KY7×^  "=U[gUyOf%R{iY~ njdbI=  O{udSq=ԝJ*`Z24[mC^waw[jQ.5@@ |A=/1es%3Td~]JNrE1T~{7+^vubz 5N{x^W5/?  0kH{4SqbXqlk%kPq|=h| FNy@@iJKkS@Sc:Q{3Kb^6R2&_@@@i"imvSw7wGVentNQ[ҫAh( D 7K@;M;;E@'H{=1LunF>  ^{\@^w@@#@k+" !@q  @{H{qV@@;M{>$"Opoޫ k uvT@@@M{wiޭ7   ,轴AT~! @0L{֪U?_[/x:t˽;GT{M,m ! @o t,W- fŇ:^GTۋu&):IuSisM5W[! @:xgx2_ٓΊ{7p3:8Tmtz L3s [ǬC[q̴nH   @i߲n.E9X-{oQgkpM׻M@@`v Hl֋55^YNsflRs9ڱt;Sf]Σ^# 0H{frk9>V}*FNj֮+^F_rnW뻩~@*P +/fB?t@ 3pLH-  ioQC@IMA[@@H{~R  Mn ڂ -@[@@n(a<&^ڂ tX Wo_XE=  MA=Îɼ,M@R ^ݮ[A|DUO{UʷmY N@=]Lns Кs1$վG=cIO@@@piM 9ճs;e@@Y.\n,zq   PMҞS;`-  PQ дgjUOGkF@0H{xWkIxն5Fa@A)K@@n u(@@]vR/  nڀ K.YE@A @@@v %K  @7ah  .^d@^7m@@%@k,"  @Q   @H{풥^@@H{0 @hi]ԋ tiF6   Kz@@n u(@@]vR/  nڀ K.YE@A @@@v %K  @7ah  .UV}oR|Ybo_Wn56v[m~ou"xXCs{ld\bVD/`ψȝ*b%^ZB@@ `=㘥ڻK  @Ϥ=8~wVf[Q@AiOSTyU<|}A  @'^Wi=Z%~ R! Iiϯ.Y ſM3cC@@Ϥ=u^s~}i@ZƴW=+y9ͮ;2o]lE@m2!!k лh}?qnGdžf# ](@AI  o=(@B^ MB@| FIE  @ pPh  i7J*B@P W-4e]7ȦP{CGKZT "t]W@8  nΤveL}JuR@Τ=3WXں) pkԾYݯ hOknF;Ky@@@iZt34hnUcú*bxZZ~s[鐥/  А@iϽdvgb 9YmgnR;Sv:*ɵڋf/5xHS@f@iwY|'B@@Oߪ8È~! @ jZP ti  > |:@@H{]54@Y3(! ]%Dګqk2QB+GzcIqC@,D^!0M? @P |c2J4f  t 94Zi. {n|Z8nbVVbfT\y%fw  l(}.[3m Tė;ɼu8m^qұ.l>v; x(9۳tk?ObP$GkCa9BGTUurG;Rw@@Y.P LيUkpui6D@ t&U\f`fu܋ۙuuVY6}螕x_;::5  @/ U[s#f1mM^fWEnUm4l6D@Y"Dڳ/J3d gj5kn[UbԳXkź%]&uqwݑYrtM@h] z+@@9nI{5V][! @=@@vR'  -n ځ CUD@E-#A;@@v[+W|nD;zU!g+Uuxw_*;J" @Oºr0 s$@86>z4`zD@J{s?ٮw@9nI{溧9gMYQֽU1fO`]T\hwL] GIy͑;j@@(Y'U=+5NkeNex*>֞Z]ŅzyV¶  =+EÑ|5n%FY-ooOf[ӊ;Fz$ @ )+U'dl~:v |ڳGjnrL?*l5jKh_: u: )efY U+`Unaڷ;W{ikl %DګR֪UؾUު,E.n̪;Yw+v|ꚹm jI붟   ^8  Ћ^5ڌ x y  Ћ^5ڌ x y  Ћ^5ڌ x y  ЋN{_o:Z5  ]"ɴg>}cf  ='ɴsX4@9Ҟcq\Wb^~u^jź  @EҞhke5A\{YڊڟKn   V Ҟ=9bYEVg~Vxew 0/@Aqpؓj\Xj:[l6#  DڳG+wbkZz*s瑋b  A=+Zyz /dV^-Va˲fmӣK@@Ҟb>/ڇZsg/Yk鐣@]^r@@wH{;v@/@ګoD @@wH{;v@/@ګoD @@wH{;v@/@ګoD @@wH{;v@/@ګoD @@wH{;v@/@ګoD @@wH{;v@/@ګoD @@wH{;v@/@ګoD @@wH{;v@/@ګoD @@wH{;v@/@ګoD @@wH{;v@/@ګoD @@wH{;v@/@ګoD @@wH{;v@/^T]qR4[rVʻ_7_q@k4KZU~!ln6rWCs{V23=lզV^^j_17 Vi1jKcV.t,}Z jڻYI.8e/8jl .P~ Xu7oekJo~ȯ ZYvZi?" @K{OG;_X=_ʫ5c#Y ;F "\k>n['Z{CouDZ*@hBҞ=T\v6[־d?4a.؇NY}B  @7 tc3LTּWӛ{*s]վjmeFBN/  ,袴gwվ6Ӓj=QtVmC/C^Z/ڛg B/ݤ  F^s'Қ@@|ke.4HG@@j=Z@@=@@ 0.}C@H{  @H{a] 8@@0 < @ q  a yt  @@@,@ 7@@1 Yѥo  ic@i/̣K@@  f^G! =@@ 0.}C@H{  @H{a] 8@@0 iXu}sjz |87@@piݲ:w ץ4v޵L]n RH{f\k=u?ܯY⮫Yzm@YҞ5%ҹ ݼ`sCk΍@@J{5{g3+M`   YO{צe@@A=kEϨ=񌽺L5Ea@N Ҟsj~f^CRM,Ʈ | @@ K{5:t3CuK<3_q | &! UVP$-1 `Oox({G(%!s{~P  C! Yѥo  ic@i/̣K@@  f^G! =UU[jh*/ tӣ  t@piORٯ,M-};#/; GuL@^7Kc @ZҞ9' crvj[eݕkvxV[ђ؋՞ؤj=u:zZQ]r@F W3ftOwU{]U%5[F=hU{6ŕنoF؊bzT;WA^@@G^+<3G{~5(彜(oOHg%R1bwZ 򊻳[鈏%U! A=ܕI){U/ oUvqB @hN WeY*hU;9b{ۚj#ZmF)!B@ڞƲ kwjAJ`hZȮSon+lȁ  @^I2vkv݅gtΞ;WۣlQ1zo~eu4M # @ =uai  0{:͞  N{ @@=@@ 0.}C@H{  @H{a] tWګ,]8)[w*쨭ⶭT襵[1W+xUmx  @ tQڳ?N#K2;B7EJ@@=u[T" @=IxզV[f=5h&V1?ڏG |h[Nwww~@@ =/ |d=a֑{Z*+*ʫv|lU! @K{gQ%k{Vf2S]747uWRq Gg *G@ :O{1p%wGI@@@KU{9<}jq19帱WhΙ5QIYrtzlǹU/]  @==y2bUR%5{hݛ4QI#Ƭ֎m*@@(퉋yҞ;Ӹ_v2U]Q uGm*XMfâ"BN5b#P1  PQ  i%OZcc@hi@is@hi@is@hi@@piϼqZwQ[b=mU*1f+Pw5 Upݽthd  @@i|hYǺr3TqKn.L^mӵ^@@ ^θ FXF@@@@i:Bsf˚p\W^^}G2f.lsLY]jer5@@J{&{#{!9h±s9R;VieVp\ gvJa@^9ϑbXV(=셭di𳖞kе Wlˊv`Î6  @`A=Rgf<}u0uI) "9*U\57̋5Ak|hdY빻bj[bs@6 Ҟ6̏ObDh}˾ZjU6u:LlVd   Ҟ6E 7*x\6Wƻ`籰jX ! # @zv" ! l@  i@i/̣K@@  f^G! =@@ 0.}C@H{  @H{a] 8@@0 < @ q  a yt  @@@,@ 7@@1 Yѥo  ic@i/̣K@@  f^G! =@@ 0.}C@H{  @H{a] 8@@0 < @ q  a yt  @@@,@ 7@@1 Yѥo  ic@i/̣K@@  f^G! =@@ 0.}C@H{  @H{a] 8@@0 < @ q  a yt  @@@,@ 7@@1 Yѥo  ic@i/̣K@@  f^G! =@@ 0.}C@H{  @H{a] 8@@0 < @ q  a yt  @@@,@ 7@@1 Yѥo  ic@i/̣K@@  f^G! =@@ 0.}C@H{  @H{a] 8@@0 < @ q  a yt  @@@,@ 7@@1 Yѥo  ic@i/̣K@@  f^G! =@@ 0.}C@H{  @H{a] 8@@0 < @ q  a yt  @@@,@ 7@@1 Yѥo  ic@i/̣K@@  f^G! =@@ 0.}C@H{  @H{a] 8@@0 < @ q  a yt  @@@,@ 7@@1 Yѥo  ic@i/̣K@@  f^G! =@@ 0.}C@H{  @H{a] 8@@0 < @ q  a yt  @@@,@ 7@@1 Yѥo  ic@i/̣K@@  f^G! =@@ 0.}C@H{  @H{a] 8@@0 < @ q  a yt  @@@,@ 7@@1 Yѥo  ic@i/̣K@@  f^G! =@@ 0.}C@H{  @H{a] 8@@0 < @Pu]oE+hesE@p,;^M@@ uݐ @@GҞT ti놄! > zM*@@ @@. u`@@wҞT ti   |'B@@H{]44@];)" ]$@)  =I@"\̠XIENDB``!VvR[ 8?[`%hxڭAL%((qQ4H(F% #D VVYX vWZZF٘9.]fK|i 5o;8i2KirA.92<\rWq&}Jpo&bߦ*K$># IWOAhWHLeh$̸I˜D_s7xlY/#Z":)uWzdxs)kw٦KO\[YjZkfTȥlY%#׫x=oW1RѢ'$ǗrƔ[?+e{11111111111111111111111111 ľ%&&&&&&&&&&&~O[111111111111HLLLLL9.{'ػqύPgnOGYKkc>ʮq8/ռ9T-ۆܱԲ,Դܰ>k#뙳q?ħx94Ͱ-xҳ<6mm10lSbc޼WO11111111111{ݿz}!&&&&&&&&&&&&~Sx@LLLL˖XxqY\u@O"*7f^y?xh>8Աm7=זִܴڿه䌝3Z,9Wzrۯ糾ѓў SSfky&IENDB`(   xSmartDraw SmartDraw.20"SmartDraw Drawing/ 0DTimes New Romanu| 0|DArialNew Romanu| 0| DWingdingsRomanu| 0| C .  @n?" dd@  @@`` X*""   & ' S> 4x"yz|}_b$ՓεM*b$t 'sG8xhM*2$VvR[$b$A0`;]suW 0e0e A@A5%8c8c     ?1d0u0@Ty2 NP'p<'p@A)BCD|E?0 3333@80 1  7R ʚ; Similarly you can define various forms of div using the different style properties e.g. background-image Text-align Font style http://www.tizag.com/cssT/reference.php:'('( Z/Block-level Styles uIBlock-level Styles vJAbsolute Positioningdiv.block1 { position: absolute; top: 20px; left: 20px; width: 600px; height: 200px; padding: 10px; letter-spacing: 3px; text-align: center; font-size: 200%; border-left: 1px solid #c93; border-bottom: 5px solid #c93; }  Z ~OTo use the div commandIn the previous slide you define div.block1 { & .. } You can also define more div commands such as div.block2 { } Treat the <div> tag like all other tags such as <div class=block1> You are here</div> Or <div class=block2> You are here </div> ".0P".0PyKMake sure you count correctlyPFirefox vs. Internet ExplorerOIt turns out Firefox measures width in terms of content (that is why we have to compensate for the padding and border size), and IE measure in terms of border to border. You can specify Firefox to use border to border by adding an extra definition to your stylesheet: div { -moz-box-sizing:border-box; box-sizing:border-box; } So just include this at the top of your style sheet and you do not have to worry about counting borders or paddings etc. It definitely make life simpler to calculate the placing of the rectangle and it looks better that it works for both IE and firefox. .PZB ?   tzLExercise: ex8.html and ex8.cssbCreate a page that uses an external style sheet 3 rectangles (50x100, 100x200, 200x400) arranged diagonally All rectangles have padding of size=5 px. All rectangles have top and bottom borders of size=20px All rectangles have left and right borders of size=10px Start something simple. Define one box in css. Use div tag command and make one box in html cc,0|MExercise: ex8.html and ex8.css }N9Exercise: ex9.css, ex9.html Hint: Define 4 classes of div::& /T'w{S   0` 3Wo+ff3̙` 33f33̙3` ! <yxG`wglZff` yE[AQpff3k` 31m̙3f` 3333̙3` O~̙Zƺ` ffff̙` ǵfZƺ` fff3fZ̙>?" dd@*?tZd@nK `7@d` n?" dd@   @@``PR    @ ` `0p>> ~v` (  T `   "`   6͕"  * \ }`  "}`  6ѕ"}` * B  s *DjJ"`,$D  0  6\ԕ "@`  T Click to edit Master title style! !$  0֕ "@`  RClick to edit Master text styles Second level Third level Fourth level Fifth level!     S  0(ݕ #" `b@   H*0    0, #" ``@   J* 0    0 "``  J* 0  `B  s *D"  H  0޽h ? fff3fZ̙___PPT10i. 3l+D=' = @B + HTML   0   p (   T   "  6"P  * <\   "  <0"p *   <d "0 `s * hB  s *Dp" p \ Pp  "Pp   6h"pPp * B   s *D"p,$ 0  6  "`@  T Click to edit Master title style! !  6 " `@   W#Click to edit Master subtitle style$ $  0x #" `b?  H*0    0L #" ``Aa   J* 0    0ԡ #" ```  J* 0  H  0޽h ? fff3fZ̙80___PPT10. 3l 0 z``(  ` ` 0lҗ P    R*    ` 0     T*   d ` c $ ?   ` 0B  @  RClick to edit Master text styles Second level Third level Fourth level Fifth level!     S ` 6 J `P   R*    ` 6N `   T*   H ` 0޽h ? ̙3380___PPT10.{p  0   (  x  c $0 `@  H  0޽h ? ̙33   0 t<(  t~ t s *x@`   ~ t s *P@`  H t 0޽h ? ̙33x   0 0 =x(  r  S @`    @`B = #"*@`B   Z ?? f `B fAlignment of text within block @`  Z< ?? f B dleft, center, right, justify @`  Z% ??@f B R text-align   @`  Z) ?? `f  [Border around block @`  Z8 ?? f  WPercent, pixels @`  Z@ ??@ f  Nborder @`  ZI ?? `  j"Set all padding properties at once## @`  Z\S ??  WPercent, pixels @`  ZD ??@  }5padding-right padding-left padding-top padding-bottom66 @`   Ze ?? `  i!Set all margin properties at once"" @`   Zn ??   WPercent, pixels @`   Zw ??@  Nmargin @`   Z ?? ` BPadding on outside of block, margin set relative to parent elementCC @`   Z ??   WPercent, pixels @`   Z ??@  {3margin-right margin-top margin-left margin-bottom44 @`;  Z ?? ` 1The URL value is given to the CSS as URL(img.gif)$21%  @`   Z ??   yURL(relative, absolute)   @`  Z  ??@  Xbackground-image @`B  Zo ??@`B  T1 ??@`B  T1 ??@`B  T1 ??@ ` B  T1 ??@ ` B  T1 ??@f `f B  Zo ??@B`BB  Zo ??@@BB  T1 ??  BB   T1 ??  BB ! Zo ??``BH  0޽h ? fff3fZ̙80___PPT10.u!r   0   !,(  ,x , c $@`    @` !, #"*@`  , Z0 ?? : ` WHeight of block @` , Zݪ ?? :  NPixels @` , Zߪ ??@:  Nheight @` , Z ?? _ `:  VWidth of block @` , Z4 ?? _ :  NPixels @`  , Z ??@_ :  Mwidth @`  , ZT  ?? `_  u-Position of block from left of parent element.. @`  , Z ?? _  NPixels @`  , ZT ??@ _  Lleft @`  , Zx  ?? `  t,Position of block from top of parent element-- @` , Z1 ??   NPixels @` , Z" ??@  Ktop @` , Zp< ?? ` APosition of block within parent element (relative is the default)BB @` , Z,M ??   ZAbsolute, relative @` , Z4V ??@  Pposition   @` , ZX+azӐD|~Lreݑ^@_1oԊ G $G$^p& z~ کOfZlާVr+a(ЙTc.=`mŴc b.؎)ݫ=L}{C\c.AF[L6RV1&K|R^dQ#FIwW35t)iޏ47I&VRI+#X\񶯽aS Iyn7,ǩQ⸿1@尿'ڊ< pW50w.8|r\*rx<97xNuaL-c>Ǹ"T6ĠW<rJySbW (;#_ a"Թ$ `A{- AW,sרFֽҮ.7 l'}SWmHʺ'ߏ f5ǑGE\_xٚ{' b`^n\*7-&3XNdB:MTB n9Tr{$߳eh|h3]i:!'Oo_Zd6/P8 OiIMg7m_CJc~=) =(et,A#$ͯEwJt0t ~|.);$jcZE;57n?R5P<;τSB.M)[1c=H"qyc$6UDAOl,S7aCbXcQ 7 D|Xv65-D>ؗ,cSP*5c-4K OClLQ- glMb ۉ>MvK[4# S48Mʾ}m=KLJN:4+vYz`߀WΛbS7a&o*r dua`(Q}px(|j$;ͯON GtܗNǷ%`aIcW+=G=zRZ3 4N|t=F0B_$4j,^~A'R/q4[_Yo=.u5j&" q@ 6-&V Z?JzPCMeǀޭO$SDit!S2.G$sA\RLv~_ϋ!;W%H^ۗfRqk9W6M{0T#zh)eUψ%zGC\y7>'JeASk 09)Qv&z!nq nb} a_X 뇰^հ4԰+>츊J=9ڰ=8ӷ:کhE&֍K¶LF羼ܱ߳?0(ɰ"4.cUj+$Dz,<4V!< v=]o|rS8q;{^ ^U/*[WV%DFXy0)OJxeRWوVĒU(}}PJ{`\J)6ro!erLNmrˈ KBX_ֻ&}(X'W`\JUF܍O#϶Zsϐ`O5|C Xw#E׉̐k_C3bk\UmZ˅օi`}i{Rerl:4<''0 )Z!>uXCrv ~9-t{NL1'!(ngsHTMLSmartDraw Drawing%Cascading Style Sheets Block LevelBlock Level StyleBlock-level StylesBlock-level StylesAbsolute PositioningTo use the div commandMake sure you count correctlyFirefox vs. Internet ExplorerText-level styleExercise: ex8.html and ex8.cssExercise: ex8.html and ex8.css:Exercise: ex9.css, ex9.html Hint: Define 4 classes of divSome nifty things  Fonts UsedDesign TemplateEmbedded OLE Servers Slide Titles %_9 0Terence T. OwTerence T. Ow--$=hh==--'--$AffAA--'ff--%UU--'̙--$m m m --'xSmartDraw SmartDraw.20"SmartDraw Drawing/ 0DTimes New RomanTTuܖ 0ܖDArialNew RomanTTuܖ 0ܖ DWingdingsRomanTTuܖ 0ܖ C .  @n?" dd@  @@`` `*""   & ' S> 4x"yz|}_b$ՓεM*b$t 'sG8xhM*2$VvR[$b$A0`;]suW 0e0e A@A5%8c8c     ?1d0u0@Ty2 NP'p<'p@A)BCD|E?0 3333@80 1  7R ʚ; Similarly you can define various forms of div using the different style properties e.g. background-image Text-align Font style http://www.tizag.com/cssT/reference.php:'('( Z/Block-level Styles uIBlock-level Styles vJAbsolute Positioningdiv.block1 { position: absolute; top: 20px; left: 20px; width: 600px; height: 200px; padding: 10px; letter-spacing: 3px; text-align: center; font-size: 200%; border-left: 1px solid #c93; border-bottom: 5px solid #c93; }  Z ~OTo use the div commandIn the previous slide you define div.block1 { & .. } You can also define more div commands such as div.block2 { } Treat the <div> tag like all other tags such as <div class=block1> You are here</div> Or <div class=block2> You are here </div> ".0P".0PyKMake sure you count correctlyPFirefox vs. Internet ExplorerOIt turns out Firefox measures width in terms of content (that is why we have to compensate for the padding and border size), and IE measure in terms of border to border. You can specify Firefox to use border to border by adding an extra definition to your stylesheet: div { -moz-box-sizing:border-box; box-sizing:border-box; } So just include this at the top of your style sheet and you do not have to worry about counting borders or paddings etc. It definitely make life simpler to calculate the placing of the rectangle and it looks better that it works for both IE and firefox. .PZB ?   tzLText-level stylefWe discuss using the <span> tag for css. Suppose you have set of titles in different location that needed to be red, fontsize: +200%, font-family:"Century Gothic , And then you have another set of text that has fontsize 150%, normal font and yellow, Then you might want to define two classes of span. span.title { } span.highlight { } Then to use this, you just have to do the following: <span class=title> This is one title </span>`.Z$Z5Z-Z.$5-t$N:R hQExercise: ex8.html and ex8.cssbCreate a page that uses an external style sheet 3 rectangles (50x100, 100x200, 200x400) arranged diagonally All rectangles have padding of size=5 px. All rectangles have top and bottom borders of size=20px All rectangles have left and right borders of size=10px Start something simple. Define one box in css. Use div tag command and make one box in html cc,0|MExercise: ex8.html and ex8.css }N9Exercise: ex9.css, ex9.html Hint: Define 4 classes of div::& RSome nifty thingsz&middot  adds a dot in text &nbsp  add extra spaces in text,/T'w{$   0 P`$(  `r ` S |@`   r ` S 8k@`  H ` 0޽h ? fff3fZ̙80___PPT10.DI%rN!1  !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_abcdefghijklmnopqrstuvwxyz{|}~Root EntrydO)Q;;D Pictures8Current User)GSummaryInformation(pPowerPoint Document(`]DocumentSummaryInformation8   xSmartDraw SmartDraw.20"SmartDraw Drawing/ 0DTimes New RomanTTuܖ 0ܖDArialNew RomanTTuܖ 0ܖ DWingdingsRomanTTuܖ 0ܖ C .  @n?" dd@  @@`` \*""   & ' S> 4x"yz|}_b$ՓεM*b$t 'sG8xhM*2$VvR[$b$A0`;]suW 0e0e A@A5%8c8c     ?1d0u0@Ty2 NP'p<'p@A)BCD|E?0 3333@80 1  7R ʚ; Similarly you can define various forms of div using the different style properties e.g. background-image Text-align Font style http://www.tizag.com/cssT/reference.php:'('( Z/Block-level Styles uIBlock-level Styles vJAbsolute Positioningdiv.block1 { position: absolute; top: 20px; left: 20px; width: 600px; height: 200px; padding: 10px; letter-spacing: 3px; text-align: center; font-size: 200%; border-left: 1px solid #c93; border-bottom: 5px solid #c93; }  Z ~OTo use the div commandIn the previous slide you define div.block1 { & .. } You can also define more div commands such as div.block2 { } Treat the <div> tag like all other tags such as <div class=block1> You are here</div> Or <div class=block2> You are here </div> ".0P".0PyKMake sure you count correctlyPFirefox vs. Internet ExplorerOIt turns out Firefox measures width in terms of content (that is why we have to compensate for the padding and border size), and IE measure in terms of border to border. You can specify Firefox to use border to border by adding an extra definition to your stylesheet: div { -moz-box-sizing:border-box; box-sizing:border-box; } So just include this at the top of your style sheet and you do not have to worry about counting borders or paddings etc. It definitely make life simpler to calculate the placing of the rectangle and it looks better that it works for both IE and firefox. .PZB ?   tzLText-level stylefWe discuss using the <span> tag for css. Suppose you have set of titles in different location that needed to be red, fontsize: +200%, font-family:"Century Gothic , And then you have another set of text that has fontsize 150%, normal font and yellow, Then you might want to define two classes of span. span.title { } span.highlight { } Then to use this, you just have to do the following: <span class=title> This is one title </span>`.Z$Z5Z-Z.$5-t$N:R hQExercise: ex8.html and ex8.cssbCreate a page that uses an external style sheet 3 rectangles (50x100, 100x200, 200x400) arranged diagonally All rectangles have padding of size=5 px. All rectangles have top and bottom borders of size=20px All rectangles have left and right borders of size=10px Start something simple. Define one box in css. Use div tag command and make one box in html cc,0|MExercise: ex8.html and ex8.css }N9Exercise: ex9.css, ex9.html Hint: Define 4 classes of div::& /T'w{$   0 H$(  Hr H S 0@`   r H S E@`  H H 0޽h ? fff3fZ̙80___PPT10.*0h0   0 @\0(  \x \ c $(@`   x \ c $@@`  H \ 0޽h ? fff3fZ̙80___PPT10.*0hrz?w12"(     !"#$%&'(*Oh+'0@ hp   $HTML and Web PagesTerence T. OwHTMLTerence T. Ow90Microsoft PowerPoint@`bٽ@-@75;DGg  *  y--$xx--'--$UU--'ff--$=hh==--'--$AffAA--'ff--%UU--'̙--$m m m --'ff--% --'@Times New Roman-. f3*2 $&Cascading Style Sheets ."System9-@Times New Roman-. f3 2 $i.-@Times New Roman-. f32 1& Block Level.-՜.+,0    On-screen Show51]h  Times New RomanArial Wingdi