| 1 <html><head><title>IO 2013 Dart Codelab</title><style type="text/css">@import ur
l('https://themes.googleusercontent.com/fonts/css?kit=chteh0fSOiSrmusp8u43YAdDja
hd2IAEL5IFmyNQJ7o');ol.lst-kix_pyiocxf7nngd-4.start{counter-reset:lst-ctn-kix_py
iocxf7nngd-4 0}.lst-kix_qeukrmzdd856-8>li{counter-increment:lst-ctn-kix_qeukrmzd
d856-8}.lst-kix_pza3ybm1wtg3-3>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3-3}o
l.lst-kix_qeukrmzdd856-7.start{counter-reset:lst-ctn-kix_qeukrmzdd856-7 0}ol.lst
-kix_qz5wp1hdd24k-1.start{counter-reset:lst-ctn-kix_qz5wp1hdd24k-1 0}ol.lst-kix_
jxeur1wnlj7y-2.start{counter-reset:lst-ctn-kix_jxeur1wnlj7y-2 0}.lst-kix_i2v077r
od1nx-1>li:before{content:"\0025cb "}.lst-kix_jpf3cr7xe1pc-0>li{counter-increme
nt:lst-ctn-kix_jpf3cr7xe1pc-0}.lst-kix_dblgil8t24zy-3>li:before{content:"" count
er(lst-ctn-kix_dblgil8t24zy-3,decimal) ". "}.lst-kix_5f9palqqt4mm-3>li{counter-i
ncrement:lst-ctn-kix_5f9palqqt4mm-3}.lst-kix_pa6lflf2amnu-4>li:before{content:""
counter(lst-ctn-kix_pa6lflf2amnu-4,lower-latin) ". "}.lst-kix_pyiocxf7nngd-7>li
{counter-increment:lst-ctn-kix_pyiocxf7nngd-7}.lst-kix_kvgsl0s9rzo4-0>li{counter
-increment:lst-ctn-kix_kvgsl0s9rzo4-0}.lst-kix_jpf3cr7xe1pc-4>li{counter-increme
nt:lst-ctn-kix_jpf3cr7xe1pc-4}.lst-kix_opzlp0rjj486-8>li:before{content:"" count
er(lst-ctn-kix_opzlp0rjj486-8,lower-roman) ". "}.lst-kix_1g0xzctl1vi-7>li:before
{content:"" counter(lst-ctn-kix_1g0xzctl1vi-7,lower-latin) ". "}.lst-kix_1c0w7ic
orqz1-8>li:before{content:"" counter(lst-ctn-kix_1c0w7icorqz1-8,lower-roman) ".
"}ol.lst-kix_juntnht2kzza-6.start{counter-reset:lst-ctn-kix_juntnht2kzza-6 0}.ls
t-kix_uq748w6pjv3r-5>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-5,low
er-roman) ". "}.lst-kix_vvzditg8sno-6>li:before{content:"\0025cf "}.lst-kix_jxe
ur1wnlj7y-5>li{counter-increment:lst-ctn-kix_jxeur1wnlj7y-5}ol.lst-kix_hm47sef7m
uk-6.start{counter-reset:lst-ctn-kix_hm47sef7muk-6 0}ol.lst-kix_qz5wp1hdd24k-6.s
tart{counter-reset:lst-ctn-kix_qz5wp1hdd24k-6 0}.lst-kix_5f9palqqt4mm-7>li{count
er-increment:lst-ctn-kix_5f9palqqt4mm-7}ol.lst-kix_9tkaqbe3bnu3-7.start{counter-
reset:lst-ctn-kix_9tkaqbe3bnu3-7 0}ol.lst-kix_nho7sy6cpfv0-0.start{counter-reset
:lst-ctn-kix_nho7sy6cpfv0-0 0}ol.lst-kix_32zxnvl59py3-3.start{counter-reset:lst-
ctn-kix_32zxnvl59py3-3 0}.lst-kix_kc6aimw8pnra-0>li:before{content:"\0025cf "}.
lst-kix_7kmxmbi2lsws-5>li:before{content:"" counter(lst-ctn-kix_7kmxmbi2lsws-5,l
ower-roman) ". "}ol.lst-kix_5f9palqqt4mm-1.start{counter-reset:lst-ctn-kix_5f9pa
lqqt4mm-1 0}.lst-kix_nhaic9xr6pf-6>li{counter-increment:lst-ctn-kix_nhaic9xr6pf-
6}.lst-kix_ggm78fckav5h-7>li{counter-increment:lst-ctn-kix_ggm78fckav5h-7}ol.lst
-kix_lixznqbqiris-0.start{counter-reset:lst-ctn-kix_lixznqbqiris-0 0}.lst-kix_1c
0w7icorqz1-3>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-3}ol.lst-kix_32zxnvl5
9py3-8.start{counter-reset:lst-ctn-kix_32zxnvl59py3-8 0}ol.lst-kix_t9jkz28ln50j-
5.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-5 0}.lst-kix_ffvvlgzbuz30-5>li:be
fore{content:"\0025a0 "}.lst-kix_jpf3cr7xe1pc-5>li{counter-increment:lst-ctn-ki
x_jpf3cr7xe1pc-5}ol.lst-kix_nhaic9xr6pf-6.start{counter-reset:lst-ctn-kix_nhaic9
xr6pf-6 0}.lst-kix_kvgsl0s9rzo4-2>li{counter-increment:lst-ctn-kix_kvgsl0s9rzo4-
2}.lst-kix_2uog6ch44jpu-0>li{counter-increment:lst-ctn-kix_2uog6ch44jpu-0}.lst-k
ix_jxeur1wnlj7y-7>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-7,lower-
latin) ". "}ol.lst-kix_7kmxmbi2lsws-1.start{counter-reset:lst-ctn-kix_7kmxmbi2ls
ws-1 0}.lst-kix_dblgil8t24zy-1>li{counter-increment:lst-ctn-kix_dblgil8t24zy-1}.
lst-kix_qz5wp1hdd24k-5>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-5,l
ower-roman) ". "}ol.lst-kix_ggm78fckav5h-4.start{counter-reset:lst-ctn-kix_ggm78
fckav5h-4 0}.lst-kix_j51xhhtple7c-8>li{counter-increment:lst-ctn-kix_j51xhhtple7
c-8}.lst-kix_hvjet9voiiio-7>li:before{content:"" counter(lst-ctn-kix_hvjet9voiii
o-7,lower-latin) ". "}.lst-kix_1gqf2s78t7o1-8>li:before{content:"" counter(lst-c
tn-kix_1gqf2s78t7o1-8,lower-roman) ". "}.lst-kix_nhaic9xr6pf-1>li:before{content
:"" counter(lst-ctn-kix_nhaic9xr6pf-1,lower-latin) ". "}.lst-kix_32zxnvl59py3-3>
li{counter-increment:lst-ctn-kix_32zxnvl59py3-3}.lst-kix_5f9palqqt4mm-6>li:befor
e{content:"" counter(lst-ctn-kix_5f9palqqt4mm-6,decimal) ". "}.lst-kix_hm47sef7m
uk-0>li{counter-increment:lst-ctn-kix_hm47sef7muk-0}.lst-kix_nhaic9xr6pf-7>li:be
fore{content:"" counter(lst-ctn-kix_nhaic9xr6pf-7,lower-latin) ". "}ol.lst-kix_s
gsi64vug03j-2.start{counter-reset:lst-ctn-kix_sgsi64vug03j-2 0}ol.lst-kix_pza3yb
m1wtg3-5.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-5 0}ol.lst-kix_60g29afx0lo
f-4.start{counter-reset:lst-ctn-kix_60g29afx0lof-4 0}.lst-kix_jpf3cr7xe1pc-7>li{
counter-increment:lst-ctn-kix_jpf3cr7xe1pc-7}ol.lst-kix_vnvg10gwrc8t-7.start{cou
nter-reset:lst-ctn-kix_vnvg10gwrc8t-7 0}.lst-kix_i2v077rod1nx-5>li:before{conten
t:"\0025a0 "}ol.lst-kix_z7in7d1ar2zt-3.start{counter-reset:lst-ctn-kix_z7in7d1a
r2zt-3 0}ol.lst-kix_9tkaqbe3bnu3-6.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-
6 0}ol.lst-kix_p8a3u4ougab9-4.start{counter-reset:lst-ctn-kix_p8a3u4ougab9-4 0}.
lst-kix_oqqzpe3b3nud-3>li:before{content:"" counter(lst-ctn-kix_oqqzpe3b3nud-3,d
ecimal) ". "}.lst-kix_t7any4lo9hoq-3>li:before{content:"\0025cf "}.lst-kix_iqyc
5gy523tq-6>li:before{content:"\0025cf "}.lst-kix_qz5wp1hdd24k-0>li:before{conte
nt:"" counter(lst-ctn-kix_qz5wp1hdd24k-0,decimal) ". "}ol.lst-kix_lixznqbqiris-1
.start{counter-reset:lst-ctn-kix_lixznqbqiris-1 0}.lst-kix_1g0xzctl1vi-6>li{coun
ter-increment:lst-ctn-kix_1g0xzctl1vi-6}.lst-kix_hm47sef7muk-4>li:before{content
:"" counter(lst-ctn-kix_hm47sef7muk-4,lower-latin) ". "}.lst-kix_lixznqbqiris-0>
li:before{content:"" counter(lst-ctn-kix_lixznqbqiris-0,decimal) ". "}ol.lst-kix
_60g29afx0lof-1.start{counter-reset:lst-ctn-kix_60g29afx0lof-1 0}.lst-kix_a4uqy1
hx9g3-2>li:before{content:"\0025a0 "}.lst-kix_sgsi64vug03j-0>li:before{content:
"" counter(lst-ctn-kix_sgsi64vug03j-0,decimal) ". "}.lst-kix_q1b5wk7cmirb-5>li:b
efore{content:"\0025a0 "}.lst-kix_uq748w6pjv3r-1>li{counter-increment:lst-ctn-k
ix_uq748w6pjv3r-1}.lst-kix_t9jkz28ln50j-3>li:before{content:"" counter(lst-ctn-k
ix_t9jkz28ln50j-3,decimal) ". "}ol.lst-kix_5f9palqqt4mm-8.start{counter-reset:ls
t-ctn-kix_5f9palqqt4mm-8 0}ol.lst-kix_5f9palqqt4mm-7.start{counter-reset:lst-ctn
-kix_5f9palqqt4mm-7 0}.lst-kix_32zxnvl59py3-8>li:before{content:"" counter(lst-c
tn-kix_32zxnvl59py3-8,lower-roman) ". "}ol.lst-kix_v454r7upbzuz-2.start{counter-
reset:lst-ctn-kix_v454r7upbzuz-2 0}.lst-kix_1g0xzctl1vi-3>li{counter-increment:l
st-ctn-kix_1g0xzctl1vi-3}.lst-kix_t7any4lo9hoq-7>li:before{content:"\0025cb "}.
lst-kix_9tkaqbe3bnu3-6>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-6}.lst-kix_
qeukrmzdd856-4>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-4,lower-lat
in) ". "}ol.lst-kix_j51xhhtple7c-1.start{counter-reset:lst-ctn-kix_j51xhhtple7c-
1 0}ol.lst-kix_3h1iswqv3l7s-6.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-6 0}.
lst-kix_wzk0mdv2qg9u-1>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-1}.lst-kix_
j51xhhtple7c-3>li{counter-increment:lst-ctn-kix_j51xhhtple7c-3}.lst-kix_9tkaqbe3
bnu3-4>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-4}.lst-kix_juntnht2kzza-4>l
i{counter-increment:lst-ctn-kix_juntnht2kzza-4}.lst-kix_4s9m9sikrtm7-1>li{counte
r-increment:lst-ctn-kix_4s9m9sikrtm7-1}.lst-kix_i2v077rod1nx-4>li:before{content
:"\0025cb "}ol.lst-kix_nhaic9xr6pf-1.start{counter-reset:lst-ctn-kix_nhaic9xr6p
f-1 0}.lst-kix_t9jkz28ln50j-0>li{counter-increment:lst-ctn-kix_t9jkz28ln50j-0}.l
st-kix_lixznqbqiris-2>li:before{content:"" counter(lst-ctn-kix_lixznqbqiris-2,lo
wer-roman) ". "}.lst-kix_4s9m9sikrtm7-7>li:before{content:"" counter(lst-ctn-kix
_4s9m9sikrtm7-7,lower-latin) ". "}.lst-kix_p8a3u4ougab9-3>li{counter-increment:l
st-ctn-kix_p8a3u4ougab9-3}.lst-kix_7kmxmbi2lsws-6>li{counter-increment:lst-ctn-k
ix_7kmxmbi2lsws-6}.lst-kix_ffvvlgzbuz30-1>li:before{content:"\0025cb "}.lst-kix
_uq748w6pjv3r-3>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-3,decimal)
". "}.lst-kix_q1b5wk7cmirb-0>li:before{content:"\0025cf "}ol.lst-kix_1gqf2s78t
7o1-4.start{counter-reset:lst-ctn-kix_1gqf2s78t7o1-4 0}.lst-kix_p8a3u4ougab9-6>l
i{counter-increment:lst-ctn-kix_p8a3u4ougab9-6}.lst-kix_nhaic9xr6pf-1>li{counter
-increment:lst-ctn-kix_nhaic9xr6pf-1}.lst-kix_nho7sy6cpfv0-5>li{counter-incremen
t:lst-ctn-kix_nho7sy6cpfv0-5}.lst-kix_8uscekru9dbw-5>li:before{content:"" counte
r(lst-ctn-kix_8uscekru9dbw-5,lower-roman) ". "}.lst-kix_5f9palqqt4mm-8>li:before
{content:"" counter(lst-ctn-kix_5f9palqqt4mm-8,lower-roman) ". "}.lst-kix_kf08e4
mo0q15-3>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-3,decimal) ". "}.
lst-kix_60g29afx0lof-6>li{counter-increment:lst-ctn-kix_60g29afx0lof-6}.lst-kix_
pza3ybm1wtg3-5>li:before{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-5,lower-rom
an) ". "}ol.lst-kix_8uscekru9dbw-1.start{counter-reset:lst-ctn-kix_8uscekru9dbw-
1 0}ol.lst-kix_dblgil8t24zy-5.start{counter-reset:lst-ctn-kix_dblgil8t24zy-5 0}.
lst-kix_3h1iswqv3l7s-2>li{counter-increment:lst-ctn-kix_3h1iswqv3l7s-2}.lst-kix_
60g29afx0lof-3>li:before{content:"" counter(lst-ctn-kix_60g29afx0lof-3,decimal)
". "}.lst-kix_m8zky1oy6k60-3>li{counter-increment:lst-ctn-kix_m8zky1oy6k60-3}ol.
lst-kix_5f9palqqt4mm-4.start{counter-reset:lst-ctn-kix_5f9palqqt4mm-4 0}.lst-kix
_juntnht2kzza-6>li:before{content:"" counter(lst-ctn-kix_juntnht2kzza-6,decimal)
". "}ol.lst-kix_32zxnvl59py3-7.start{counter-reset:lst-ctn-kix_32zxnvl59py3-7 0
}.lst-kix_dblgil8t24zy-4>li{counter-increment:lst-ctn-kix_dblgil8t24zy-4}.lst-ki
x_2uog6ch44jpu-3>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-3,decimal
) ". "}.lst-kix_ffvvlgzbuz30-3>li:before{content:"\0025cf "}.lst-kix_iqyc5gy523
tq-2>li:before{content:"\0025a0 "}ol.lst-kix_1c0w7icorqz1-8.start{counter-reset
:lst-ctn-kix_1c0w7icorqz1-8 0}.lst-kix_4s9m9sikrtm7-2>li{counter-increment:lst-c
tn-kix_4s9m9sikrtm7-2}.lst-kix_fr6w5z45nvx0-3>li{counter-increment:lst-ctn-kix_f
r6w5z45nvx0-3}ol.lst-kix_m8zky1oy6k60-7.start{counter-reset:lst-ctn-kix_m8zky1oy
6k60-7 0}ol.lst-kix_7kmxmbi2lsws-7.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws-
7 0}.lst-kix_uq748w6pjv3r-7>li{counter-increment:lst-ctn-kix_uq748w6pjv3r-7}.lst
-kix_v454r7upbzuz-0>li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-0,deci
mal) ". "}.lst-kix_ggm78fckav5h-5>li{counter-increment:lst-ctn-kix_ggm78fckav5h-
5}.lst-kix_pza3ybm1wtg3-8>li:before{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-
8,lower-roman) ". "}.lst-kix_3h1iswqv3l7s-6>li{counter-increment:lst-ctn-kix_3h1
iswqv3l7s-6}ol.lst-kix_ggm78fckav5h-5.start{counter-reset:lst-ctn-kix_ggm78fckav
5h-5 0}ol.lst-kix_pyiocxf7nngd-1.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-1
0}ol.lst-kix_1gqf2s78t7o1-2.start{counter-reset:lst-ctn-kix_1gqf2s78t7o1-2 0}.ls
t-kix_z7in7d1ar2zt-0>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt-0}ol.lst-kix_
pa6lflf2amnu-4.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-4 0}.lst-kix_z7in7d1
ar2zt-5>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt-5}.lst-kix_sgsi64vug03j-3>
li{counter-increment:lst-ctn-kix_sgsi64vug03j-3}ol.lst-kix_m8zky1oy6k60-5.start{
counter-reset:lst-ctn-kix_m8zky1oy6k60-5 0}.lst-kix_hvjet9voiiio-4>li:before{con
tent:"" counter(lst-ctn-kix_hvjet9voiiio-4,lower-latin) ". "}.lst-kix_m1x0qzeead
az-7>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz-7}.lst-kix_opzlp0rjj486-6>li{
counter-increment:lst-ctn-kix_opzlp0rjj486-6}.lst-kix_57tjkabqizo2-5>li:before{c
ontent:"" counter(lst-ctn-kix_57tjkabqizo2-5,lower-roman) ". "}.lst-kix_2uog6ch4
4jpu-7>li{counter-increment:lst-ctn-kix_2uog6ch44jpu-7}.lst-kix_jxeur1wnlj7y-8>l
i:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-8,lower-roman) ". "}.lst-ki
x_sgsi64vug03j-8>li{counter-increment:lst-ctn-kix_sgsi64vug03j-8}.lst-kix_57tjka
bqizo2-4>li{counter-increment:lst-ctn-kix_57tjkabqizo2-4}ol.lst-kix_lgtbofvz5zxd
-6.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-6 0}.lst-kix_hm47sef7muk-3>li:be
fore{content:"" counter(lst-ctn-kix_hm47sef7muk-3,decimal) ". "}ol.lst-kix_hm47s
ef7muk-5.start{counter-reset:lst-ctn-kix_hm47sef7muk-5 0}.lst-kix_qeukrmzdd856-2
>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-2,lower-roman) ". "}.lst-
kix_dblgil8t24zy-7>li{counter-increment:lst-ctn-kix_dblgil8t24zy-7}.lst-kix_jxeu
r1wnlj7y-1>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-1,lower-latin)
". "}.lst-kix_57tjkabqizo2-5>li{counter-increment:lst-ctn-kix_57tjkabqizo2-5}.ls
t-kix_1gqf2s78t7o1-6>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-6,dec
imal) ". "}.lst-kix_ggm78fckav5h-6>li{counter-increment:lst-ctn-kix_ggm78fckav5h
-6}ol.lst-kix_kf08e4mo0q15-1.start{counter-reset:lst-ctn-kix_kf08e4mo0q15-1 0}.l
st-kix_jpf3cr7xe1pc-2>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc-2,lo
wer-roman) ". "}ol.lst-kix_wzk0mdv2qg9u-5.start{counter-reset:lst-ctn-kix_wzk0md
v2qg9u-5 0}.lst-kix_1c0w7icorqz1-2>li:before{content:"" counter(lst-ctn-kix_1c0w
7icorqz1-2,lower-roman) ". "}.lst-kix_hvjet9voiiio-6>li{counter-increment:lst-ct
n-kix_hvjet9voiiio-6}ol.lst-kix_pa6lflf2amnu-3.start{counter-reset:lst-ctn-kix_p
a6lflf2amnu-3 0}.lst-kix_p8a3u4ougab9-2>li{counter-increment:lst-ctn-kix_p8a3u4o
ugab9-2}.lst-kix_fr6w5z45nvx0-2>li{counter-increment:lst-ctn-kix_fr6w5z45nvx0-2}
.lst-kix_1g0xzctl1vi-4>li:before{content:"" counter(lst-ctn-kix_1g0xzctl1vi-4,lo
wer-latin) ". "}ol.lst-kix_1g0xzctl1vi-1.start{counter-reset:lst-ctn-kix_1g0xzct
l1vi-1 0}.lst-kix_1gqf2s78t7o1-3>li{counter-increment:lst-ctn-kix_1gqf2s78t7o1-3
}ol.lst-kix_pza3ybm1wtg3-8.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-8 0}ol.l
st-kix_1g0xzctl1vi-7.start{counter-reset:lst-ctn-kix_1g0xzctl1vi-7 0}.lst-kix_v4
54r7upbzuz-7>li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-7,lower-latin
) ". "}.lst-kix_8dg0b92yw51r-8>li{counter-increment:lst-ctn-kix_8dg0b92yw51r-8}.
lst-kix_jxeur1wnlj7y-6>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-6,d
ecimal) ". "}.lst-kix_t9jkz28ln50j-6>li:before{content:"" counter(lst-ctn-kix_t9
jkz28ln50j-6,decimal) ". "}.lst-kix_7kmxmbi2lsws-8>li{counter-increment:lst-ctn-
kix_7kmxmbi2lsws-8}.lst-kix_vnvg10gwrc8t-5>li{counter-increment:lst-ctn-kix_vnvg
10gwrc8t-5}ol.lst-kix_kvgsl0s9rzo4-2.start{counter-reset:lst-ctn-kix_kvgsl0s9rzo
4-2 0}ol.lst-kix_pza3ybm1wtg3-1.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-1 0
}.lst-kix_p8a3u4ougab9-7>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-7}.lst-ki
x_5f9palqqt4mm-5>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-5}.lst-kix_8dg0b9
2yw51r-0>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-0,decimal) ". "}.
lst-kix_3h1iswqv3l7s-4>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-4,l
ower-latin) ". "}.lst-kix_fpxsljpyl73u-7>li:before{content:"\0025cb "}.lst-kix_
opzlp0rjj486-6>li:before{content:"" counter(lst-ctn-kix_opzlp0rjj486-6,decimal)
". "}ol.lst-kix_4s9m9sikrtm7-0.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-0 0}
.lst-kix_oqqzpe3b3nud-0>li:before{content:"" counter(lst-ctn-kix_oqqzpe3b3nud-0,
decimal) ". "}.lst-kix_m8zky1oy6k60-6>li{counter-increment:lst-ctn-kix_m8zky1oy6
k60-6}.lst-kix_1g0xzctl1vi-5>li{counter-increment:lst-ctn-kix_1g0xzctl1vi-5}ol.l
st-kix_opzlp0rjj486-1.start{counter-reset:lst-ctn-kix_opzlp0rjj486-1 0}ol.lst-ki
x_hvjet9voiiio-8.start{counter-reset:lst-ctn-kix_hvjet9voiiio-8 0}ol.lst-kix_ggm
78fckav5h-7.start{counter-reset:lst-ctn-kix_ggm78fckav5h-7 0}.lst-kix_pza3ybm1wt
g3-1>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3-1}.lst-kix_qeukrmzdd856-8>li:
before{content:"" counter(lst-ctn-kix_qeukrmzdd856-8,lower-roman) ". "}.lst-kix_
dblgil8t24zy-0>li{counter-increment:lst-ctn-kix_dblgil8t24zy-0}.lst-kix_wzk0mdv2
qg9u-4>li:before{content:"" counter(lst-ctn-kix_wzk0mdv2qg9u-4,lower-latin) ". "
}.lst-kix_32zxnvl59py3-0>li{counter-increment:lst-ctn-kix_32zxnvl59py3-0}.lst-ki
x_qz5wp1hdd24k-3>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-3}.lst-kix_juntnh
t2kzza-8>li:before{content:"" counter(lst-ctn-kix_juntnht2kzza-8,lower-roman) ".
"}.lst-kix_j51xhhtple7c-5>li{counter-increment:lst-ctn-kix_j51xhhtple7c-5}.lst-
kix_opzlp0rjj486-5>li{counter-increment:lst-ctn-kix_opzlp0rjj486-5}.lst-kix_kf08
e4mo0q15-4>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-4,lower-latin)
". "}.lst-kix_m8zky1oy6k60-1>li:before{content:"" counter(lst-ctn-kix_m8zky1oy6k
60-1,lower-latin) ". "}.lst-kix_ggm78fckav5h-1>li{counter-increment:lst-ctn-kix_
ggm78fckav5h-1}ol.lst-kix_8uscekru9dbw-3.start{counter-reset:lst-ctn-kix_8uscekr
u9dbw-3 0}.lst-kix_9tkaqbe3bnu3-2>li:before{content:"" counter(lst-ctn-kix_9tkaq
be3bnu3-2,lower-roman) ". "}ol.lst-kix_1g0xzctl1vi-4.start{counter-reset:lst-ctn
-kix_1g0xzctl1vi-4 0}ol.lst-kix_juntnht2kzza-1.start{counter-reset:lst-ctn-kix_j
untnht2kzza-1 0}ol.lst-kix_hvjet9voiiio-0.start{counter-reset:lst-ctn-kix_hvjet9
voiiio-0 0}.lst-kix_ggm78fckav5h-8>li:before{content:"" counter(lst-ctn-kix_ggm7
8fckav5h-8,lower-roman) ". "}.lst-kix_1g0xzctl1vi-5>li:before{content:"" counter
(lst-ctn-kix_1g0xzctl1vi-5,lower-roman) ". "}.lst-kix_kvgsl0s9rzo4-4>li{counter-
increment:lst-ctn-kix_kvgsl0s9rzo4-4}.lst-kix_wzk0mdv2qg9u-6>li{counter-incremen
t:lst-ctn-kix_wzk0mdv2qg9u-6}.lst-kix_kvgsl0s9rzo4-8>li:before{content:"" counte
r(lst-ctn-kix_kvgsl0s9rzo4-8,lower-roman) ". "}ol.lst-kix_fr6w5z45nvx0-7.start{c
ounter-reset:lst-ctn-kix_fr6w5z45nvx0-7 0}.lst-kix_jpf3cr7xe1pc-5>li:before{cont
ent:"" counter(lst-ctn-kix_jpf3cr7xe1pc-5,lower-roman) ". "}ol.lst-kix_dblgil8t2
4zy-7.start{counter-reset:lst-ctn-kix_dblgil8t24zy-7 0}.lst-kix_hvjet9voiiio-1>l
i:before{content:"" counter(lst-ctn-kix_hvjet9voiiio-1,lower-latin) ". "}.lst-ki
x_jpf3cr7xe1pc-3>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc-3,decimal
) ". "}.lst-kix_32zxnvl59py3-8>li{counter-increment:lst-ctn-kix_32zxnvl59py3-8}.
lst-kix_7kmxmbi2lsws-4>li{counter-increment:lst-ctn-kix_7kmxmbi2lsws-4}.lst-kix_
8uscekru9dbw-3>li{counter-increment:lst-ctn-kix_8uscekru9dbw-3}.lst-kix_v454r7up
bzuz-2>li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-2,lower-roman) ". "
}ol.lst-kix_5f9palqqt4mm-6.start{counter-reset:lst-ctn-kix_5f9palqqt4mm-6 0}ol.l
st-kix_7kmxmbi2lsws-3.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws-3 0}ol.lst-ki
x_jpf3cr7xe1pc-3.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-3 0}.lst-kix_pyioc
xf7nngd-0>li:before{content:"" counter(lst-ctn-kix_pyiocxf7nngd-0,decimal) ". "}
.lst-kix_2uog6ch44jpu-7>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-7,
lower-latin) ". "}.lst-kix_4s9m9sikrtm7-6>li:before{content:"" counter(lst-ctn-k
ix_4s9m9sikrtm7-6,decimal) ". "}.lst-kix_m1x0qzeeadaz-4>li{counter-increment:lst
-ctn-kix_m1x0qzeeadaz-4}ol.lst-kix_m1x0qzeeadaz-8.start{counter-reset:lst-ctn-ki
x_m1x0qzeeadaz-8 0}.lst-kix_kf08e4mo0q15-0>li:before{content:"" counter(lst-ctn-
kix_kf08e4mo0q15-0,decimal) ". "}.lst-kix_9tkaqbe3bnu3-4>li:before{content:"" co
unter(lst-ctn-kix_9tkaqbe3bnu3-4,lower-latin) ". "}ol.lst-kix_v454r7upbzuz-0.sta
rt{counter-reset:lst-ctn-kix_v454r7upbzuz-0 0}.lst-kix_4s9m9sikrtm7-6>li{counter
-increment:lst-ctn-kix_4s9m9sikrtm7-6}.lst-kix_nhaic9xr6pf-3>li:before{content:"
" counter(lst-ctn-kix_nhaic9xr6pf-3,decimal) ". "}.lst-kix_z7in7d1ar2zt-1>li{cou
nter-increment:lst-ctn-kix_z7in7d1ar2zt-1}ol.lst-kix_9tkaqbe3bnu3-8.start{counte
r-reset:lst-ctn-kix_9tkaqbe3bnu3-8 0}ol.lst-kix_1gqf2s78t7o1-7.start{counter-res
et:lst-ctn-kix_1gqf2s78t7o1-7 0}ol.lst-kix_hm47sef7muk-1.start{counter-reset:lst
-ctn-kix_hm47sef7muk-1 0}.lst-kix_fr6w5z45nvx0-8>li{counter-increment:lst-ctn-ki
x_fr6w5z45nvx0-8}ol.lst-kix_oqqzpe3b3nud-7.start{counter-reset:lst-ctn-kix_oqqzp
e3b3nud-7 0}.lst-kix_kf08e4mo0q15-4>li{counter-increment:lst-ctn-kix_kf08e4mo0q1
5-4}ol.lst-kix_pa6lflf2amnu-6.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-6 0}.
lst-kix_qz5wp1hdd24k-4>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-4,l
ower-latin) ". "}.lst-kix_jzpgxqq6fzzf-8>li{counter-increment:lst-ctn-kix_jzpgxq
q6fzzf-8}.lst-kix_nhaic9xr6pf-7>li{counter-increment:lst-ctn-kix_nhaic9xr6pf-7}.
lst-kix_oqqzpe3b3nud-8>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-8}.lst-kix_
57tjkabqizo2-0>li:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-0,decimal)
". "}.lst-kix_sgsi64vug03j-4>li{counter-increment:lst-ctn-kix_sgsi64vug03j-4}.ls
t-kix_dblgil8t24zy-4>li:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-4,low
er-latin) ". "}.lst-kix_juntnht2kzza-0>li{counter-increment:lst-ctn-kix_juntnht2
kzza-0}.lst-kix_lixznqbqiris-7>li:before{content:"" counter(lst-ctn-kix_lixznqbq
iris-7,lower-latin) ". "}ol.lst-kix_uq748w6pjv3r-5.start{counter-reset:lst-ctn-k
ix_uq748w6pjv3r-5 0}ol.lst-kix_p8a3u4ougab9-3.start{counter-reset:lst-ctn-kix_p8
a3u4ougab9-3 0}.lst-kix_oqqzpe3b3nud-3>li{counter-increment:lst-ctn-kix_oqqzpe3b
3nud-3}.lst-kix_9tkaqbe3bnu3-0>li:before{content:"" counter(lst-ctn-kix_9tkaqbe3
bnu3-0,decimal) ". "}ol.lst-kix_ggm78fckav5h-3.start{counter-reset:lst-ctn-kix_g
gm78fckav5h-3 0}.lst-kix_jxeur1wnlj7y-2>li{counter-increment:lst-ctn-kix_jxeur1w
nlj7y-2}.lst-kix_t7any4lo9hoq-1>li:before{content:"\0025cb "}.lst-kix_lixznqbqi
ris-5>li{counter-increment:lst-ctn-kix_lixznqbqiris-5}.lst-kix_pza3ybm1wtg3-6>li
{counter-increment:lst-ctn-kix_pza3ybm1wtg3-6}.lst-kix_1g0xzctl1vi-2>li:before{c
ontent:"" counter(lst-ctn-kix_1g0xzctl1vi-2,lower-roman) ". "}.lst-kix_t9jkz28ln
50j-8>li{counter-increment:lst-ctn-kix_t9jkz28ln50j-8}ol.lst-kix_8dg0b92yw51r-3.
start{counter-reset:lst-ctn-kix_8dg0b92yw51r-3 0}ol.lst-kix_oqqzpe3b3nud-2.start
{counter-reset:lst-ctn-kix_oqqzpe3b3nud-2 0}.lst-kix_ffvvlgzbuz30-0>li:before{co
ntent:"\0025cf "}.lst-kix_hm47sef7muk-6>li:before{content:"" counter(lst-ctn-ki
x_hm47sef7muk-6,decimal) ". "}.lst-kix_pza3ybm1wtg3-2>li{counter-increment:lst-c
tn-kix_pza3ybm1wtg3-2}.lst-kix_5f9palqqt4mm-2>li{counter-increment:lst-ctn-kix_5
f9palqqt4mm-2}.lst-kix_oqqzpe3b3nud-1>li{counter-increment:lst-ctn-kix_oqqzpe3b3
nud-1}.lst-kix_8dg0b92yw51r-3>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw
51r-3,decimal) ". "}.lst-kix_2uog6ch44jpu-6>li:before{content:"" counter(lst-ctn
-kix_2uog6ch44jpu-6,decimal) ". "}ol.lst-kix_1gqf2s78t7o1-0.start{counter-reset:
lst-ctn-kix_1gqf2s78t7o1-0 0}.lst-kix_lgtbofvz5zxd-6>li:before{content:"" counte
r(lst-ctn-kix_lgtbofvz5zxd-6,decimal) ". "}ol.lst-kix_nho7sy6cpfv0-5.start{count
er-reset:lst-ctn-kix_nho7sy6cpfv0-5 0}.lst-kix_60g29afx0lof-2>li:before{content:
"" counter(lst-ctn-kix_60g29afx0lof-2,lower-roman) ". "}ol.lst-kix_4s9m9sikrtm7-
6.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-6 0}ol.lst-kix_jxeur1wnlj7y-4.sta
rt{counter-reset:lst-ctn-kix_jxeur1wnlj7y-4 0}.lst-kix_wzk0mdv2qg9u-2>li:before{
content:"" counter(lst-ctn-kix_wzk0mdv2qg9u-2,lower-roman) ". "}ol.lst-kix_jpf3c
r7xe1pc-1.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-1 0}.lst-kix_lgtbofvz5zxd
-5>li{counter-increment:lst-ctn-kix_lgtbofvz5zxd-5}.lst-kix_60g29afx0lof-3>li{co
unter-increment:lst-ctn-kix_60g29afx0lof-3}.lst-kix_1gqf2s78t7o1-6>li{counter-in
crement:lst-ctn-kix_1gqf2s78t7o1-6}.lst-kix_nhaic9xr6pf-6>li:before{content:"" c
ounter(lst-ctn-kix_nhaic9xr6pf-6,decimal) ". "}.lst-kix_4s9m9sikrtm7-5>li{counte
r-increment:lst-ctn-kix_4s9m9sikrtm7-5}.lst-kix_q1b5wk7cmirb-2>li:before{content
:"\0025a0 "}ol.lst-kix_j51xhhtple7c-0.start{counter-reset:lst-ctn-kix_j51xhhtpl
e7c-0 0}.lst-kix_8uscekru9dbw-6>li:before{content:"" counter(lst-ctn-kix_8uscekr
u9dbw-6,decimal) ". "}.lst-kix_pza3ybm1wtg3-6>li:before{content:"" counter(lst-c
tn-kix_pza3ybm1wtg3-6,decimal) ". "}.lst-kix_5f9palqqt4mm-8>li{counter-increment
:lst-ctn-kix_5f9palqqt4mm-8}.lst-kix_hvjet9voiiio-5>li:before{content:"" counter
(lst-ctn-kix_hvjet9voiiio-5,lower-roman) ". "}ol.lst-kix_2uog6ch44jpu-1.start{co
unter-reset:lst-ctn-kix_2uog6ch44jpu-1 0}.lst-kix_jxeur1wnlj7y-3>li{counter-incr
ement:lst-ctn-kix_jxeur1wnlj7y-3}ol.lst-kix_juntnht2kzza-8.start{counter-reset:l
st-ctn-kix_juntnht2kzza-8 0}.lst-kix_wzk0mdv2qg9u-7>li{counter-increment:lst-ctn
-kix_wzk0mdv2qg9u-7}.lst-kix_opzlp0rjj486-1>li:before{content:"" counter(lst-ctn
-kix_opzlp0rjj486-1,lower-latin) ". "}.lst-kix_60g29afx0lof-4>li{counter-increme
nt:lst-ctn-kix_60g29afx0lof-4}ol.lst-kix_8uscekru9dbw-8.start{counter-reset:lst-
ctn-kix_8uscekru9dbw-8 0}ol.lst-kix_qeukrmzdd856-5.start{counter-reset:lst-ctn-k
ix_qeukrmzdd856-5 0}.lst-kix_nho7sy6cpfv0-6>li{counter-increment:lst-ctn-kix_nho
7sy6cpfv0-6}.lst-kix_8uscekru9dbw-6>li{counter-increment:lst-ctn-kix_8uscekru9db
w-6}.lst-kix_pa6lflf2amnu-7>li:before{content:"" counter(lst-ctn-kix_pa6lflf2amn
u-7,lower-latin) ". "}.lst-kix_pyiocxf7nngd-0>li{counter-increment:lst-ctn-kix_p
yiocxf7nngd-0}ol.lst-kix_p8a3u4ougab9-1.start{counter-reset:lst-ctn-kix_p8a3u4ou
gab9-1 0}.lst-kix_juntnht2kzza-1>li:before{content:"" counter(lst-ctn-kix_juntnh
t2kzza-1,lower-latin) ". "}ol.lst-kix_nho7sy6cpfv0-3.start{counter-reset:lst-ctn
-kix_nho7sy6cpfv0-3 0}.lst-kix_5f9palqqt4mm-4>li:before{content:"" counter(lst-c
tn-kix_5f9palqqt4mm-4,lower-latin) ". "}.lst-kix_iqyc5gy523tq-5>li:before{conten
t:"\0025a0 "}ol.lst-kix_v454r7upbzuz-7.start{counter-reset:lst-ctn-kix_v454r7up
bzuz-7 0}.lst-kix_jxeur1wnlj7y-0>li{counter-increment:lst-ctn-kix_jxeur1wnlj7y-0
}ol.lst-kix_hm47sef7muk-4.start{counter-reset:lst-ctn-kix_hm47sef7muk-4 0}.lst-k
ix_kc6aimw8pnra-2>li:before{content:"\0025a0 "}.lst-kix_nho7sy6cpfv0-7>li:befor
e{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-7,lower-latin) ". "}ol.lst-kix_pza
3ybm1wtg3-7.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-7 0}.lst-kix_dblgil8t24
zy-5>li:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-5,lower-roman) ". "}o
l.lst-kix_m8zky1oy6k60-0.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-0 0}ol.lst
-kix_pyiocxf7nngd-5.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-5 0}.lst-kix_1g
qf2s78t7o1-4>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-4,lower-latin
) ". "}.lst-kix_lixznqbqiris-0>li{counter-increment:lst-ctn-kix_lixznqbqiris-0}.
lst-kix_nho7sy6cpfv0-4>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-4,l
ower-latin) ". "}.lst-kix_iqyc5gy523tq-3>li:before{content:"\0025cf "}.lst-kix_
57tjkabqizo2-3>li:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-3,decimal)
". "}.lst-kix_qeukrmzdd856-3>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd8
56-3,decimal) ". "}ol.lst-kix_1gqf2s78t7o1-5.start{counter-reset:lst-ctn-kix_1gq
f2s78t7o1-5 0}ol.lst-kix_7kmxmbi2lsws-5.start{counter-reset:lst-ctn-kix_7kmxmbi2
lsws-5 0}.lst-kix_nho7sy6cpfv0-0>li{counter-increment:lst-ctn-kix_nho7sy6cpfv0-0
}.lst-kix_m1x0qzeeadaz-4>li:before{content:"" counter(lst-ctn-kix_m1x0qzeeadaz-4
,lower-latin) ". "}ol.lst-kix_kf08e4mo0q15-3.start{counter-reset:lst-ctn-kix_kf0
8e4mo0q15-3 0}.lst-kix_z7in7d1ar2zt-6>li:before{content:"" counter(lst-ctn-kix_z
7in7d1ar2zt-6,decimal) ". "}.lst-kix_kc6aimw8pnra-1>li:before{content:"\0025cb
"}.lst-kix_fr6w5z45nvx0-6>li:before{content:"" counter(lst-ctn-kix_fr6w5z45nvx0-
6,decimal) ". "}ol.lst-kix_hvjet9voiiio-3.start{counter-reset:lst-ctn-kix_hvjet9
voiiio-3 0}.lst-kix_pyiocxf7nngd-6>li{counter-increment:lst-ctn-kix_pyiocxf7nngd
-6}.lst-kix_vnvg10gwrc8t-4>li:before{content:"" counter(lst-ctn-kix_vnvg10gwrc8t
-4,lower-latin) ". "}.lst-kix_juntnht2kzza-7>li:before{content:"" counter(lst-ct
n-kix_juntnht2kzza-7,lower-latin) ". "}.lst-kix_ggm78fckav5h-7>li:before{content
:"" counter(lst-ctn-kix_ggm78fckav5h-7,lower-latin) ". "}.lst-kix_kf08e4mo0q15-7
>li{counter-increment:lst-ctn-kix_kf08e4mo0q15-7}.lst-kix_t7any4lo9hoq-2>li:befo
re{content:"\0025a0 "}.lst-kix_jxeur1wnlj7y-5>li:before{content:"" counter(lst-
ctn-kix_jxeur1wnlj7y-5,lower-roman) ". "}.lst-kix_kvgsl0s9rzo4-8>li{counter-incr
ement:lst-ctn-kix_kvgsl0s9rzo4-8}ol.lst-kix_j51xhhtple7c-7.start{counter-reset:l
st-ctn-kix_j51xhhtple7c-7 0}ol.lst-kix_oqqzpe3b3nud-1.start{counter-reset:lst-ct
n-kix_oqqzpe3b3nud-1 0}.lst-kix_nho7sy6cpfv0-1>li{counter-increment:lst-ctn-kix_
nho7sy6cpfv0-1}.lst-kix_1g0xzctl1vi-2>li{counter-increment:lst-ctn-kix_1g0xzctl1
vi-2}.lst-kix_j51xhhtple7c-3>li:before{content:"" counter(lst-ctn-kix_j51xhhtple
7c-3,decimal) ". "}ol.lst-kix_juntnht2kzza-3.start{counter-reset:lst-ctn-kix_jun
tnht2kzza-3 0}.lst-kix_8dg0b92yw51r-5>li{counter-increment:lst-ctn-kix_8dg0b92yw
51r-5}ol.lst-kix_m8zky1oy6k60-8.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-8 0
}.lst-kix_vvzditg8sno-7>li:before{content:"\0025cb "}.lst-kix_8dg0b92yw51r-0>li
{counter-increment:lst-ctn-kix_8dg0b92yw51r-0}.lst-kix_3h1iswqv3l7s-2>li:before{
content:"" counter(lst-ctn-kix_3h1iswqv3l7s-2,lower-roman) ". "}.lst-kix_iqyc5gy
523tq-1>li:before{content:"\0025cb "}.lst-kix_4s9m9sikrtm7-4>li{counter-increme
nt:lst-ctn-kix_4s9m9sikrtm7-4}ol.lst-kix_uq748w6pjv3r-3.start{counter-reset:lst-
ctn-kix_uq748w6pjv3r-3 0}.lst-kix_m1x0qzeeadaz-6>li:before{content:"" counter(ls
t-ctn-kix_m1x0qzeeadaz-6,decimal) ". "}.lst-kix_pa6lflf2amnu-5>li{counter-increm
ent:lst-ctn-kix_pa6lflf2amnu-5}ol.lst-kix_kf08e4mo0q15-4.start{counter-reset:lst
-ctn-kix_kf08e4mo0q15-4 0}.lst-kix_m1x0qzeeadaz-3>li:before{content:"" counter(l
st-ctn-kix_m1x0qzeeadaz-3,decimal) ". "}.lst-kix_hm47sef7muk-1>li:before{content
:"" counter(lst-ctn-kix_hm47sef7muk-1,lower-latin) ". "}.lst-kix_fpxsljpyl73u-6>
li:before{content:"\0025cf "}.lst-kix_oqqzpe3b3nud-7>li:before{content:"" count
er(lst-ctn-kix_oqqzpe3b3nud-7,lower-latin) ". "}.lst-kix_32zxnvl59py3-1>li:befor
e{content:"" counter(lst-ctn-kix_32zxnvl59py3-1,lower-latin) ". "}.lst-kix_uq748
w6pjv3r-3>li{counter-increment:lst-ctn-kix_uq748w6pjv3r-3}.lst-kix_1gqf2s78t7o1-
5>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-5,lower-roman) ". "}.lst
-kix_32zxnvl59py3-4>li:before{content:"" counter(lst-ctn-kix_32zxnvl59py3-4,lowe
r-latin) ". "}ol.lst-kix_qz5wp1hdd24k-3.start{counter-reset:lst-ctn-kix_qz5wp1hd
d24k-3 0}ol.lst-kix_sgsi64vug03j-1.start{counter-reset:lst-ctn-kix_sgsi64vug03j-
1 0}ol.lst-kix_3h1iswqv3l7s-0.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-0 0}.
lst-kix_ffvvlgzbuz30-8>li:before{content:"\0025a0 "}.lst-kix_8dg0b92yw51r-6>li:
before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-6,decimal) ". "}.lst-kix_hvje
t9voiiio-8>li:before{content:"" counter(lst-ctn-kix_hvjet9voiiio-8,lower-roman)
". "}.lst-kix_pyiocxf7nngd-4>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-4}.ls
t-kix_lixznqbqiris-8>li{counter-increment:lst-ctn-kix_lixznqbqiris-8}ol.lst-kix_
lgtbofvz5zxd-3.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-3 0}ol.lst-kix_t9jkz
28ln50j-4.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-4 0}.lst-kix_j51xhhtple7c
-0>li:before{content:"" counter(lst-ctn-kix_j51xhhtple7c-0,decimal) ". "}.lst-ki
x_nhaic9xr6pf-0>li:before{content:"" counter(lst-ctn-kix_nhaic9xr6pf-0,decimal)
". "}.lst-kix_uq748w6pjv3r-6>li{counter-increment:lst-ctn-kix_uq748w6pjv3r-6}.ls
t-kix_m8zky1oy6k60-5>li:before{content:"" counter(lst-ctn-kix_m8zky1oy6k60-5,low
er-roman) ". "}.lst-kix_3h1iswqv3l7s-0>li:before{content:"" counter(lst-ctn-kix_
3h1iswqv3l7s-0,decimal) ". "}ol.lst-kix_vnvg10gwrc8t-6.start{counter-reset:lst-c
tn-kix_vnvg10gwrc8t-6 0}.lst-kix_hvjet9voiiio-6>li:before{content:"" counter(lst
-ctn-kix_hvjet9voiiio-6,decimal) ". "}.lst-kix_lgtbofvz5zxd-0>li{counter-increme
nt:lst-ctn-kix_lgtbofvz5zxd-0}.lst-kix_hvjet9voiiio-0>li{counter-increment:lst-c
tn-kix_hvjet9voiiio-0}.lst-kix_j51xhhtple7c-2>li:before{content:"" counter(lst-c
tn-kix_j51xhhtple7c-2,lower-roman) ". "}.lst-kix_pa6lflf2amnu-7>li{counter-incre
ment:lst-ctn-kix_pa6lflf2amnu-7}.lst-kix_v454r7upbzuz-4>li:before{content:"" cou
nter(lst-ctn-kix_v454r7upbzuz-4,lower-latin) ". "}ol.lst-kix_z7in7d1ar2zt-4.star
t{counter-reset:lst-ctn-kix_z7in7d1ar2zt-4 0}ol.lst-kix_opzlp0rjj486-8.start{cou
nter-reset:lst-ctn-kix_opzlp0rjj486-8 0}.lst-kix_57tjkabqizo2-8>li{counter-incre
ment:lst-ctn-kix_57tjkabqizo2-8}.lst-kix_ggm78fckav5h-8>li{counter-increment:lst
-ctn-kix_ggm78fckav5h-8}.lst-kix_i2v077rod1nx-2>li:before{content:"\0025a0 "}ol
.lst-kix_fr6w5z45nvx0-3.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-3 0}.lst-ki
x_8dg0b92yw51r-4>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-4,lower-l
atin) ". "}.lst-kix_jzpgxqq6fzzf-7>li:before{content:"" counter(lst-ctn-kix_jzpg
xqq6fzzf-7,lower-latin) ". "}.lst-kix_hm47sef7muk-5>li{counter-increment:lst-ctn
-kix_hm47sef7muk-5}ol.lst-kix_t9jkz28ln50j-7.start{counter-reset:lst-ctn-kix_t9j
kz28ln50j-7 0}ol.lst-kix_2uog6ch44jpu-7.start{counter-reset:lst-ctn-kix_2uog6ch4
4jpu-7 0}.lst-kix_1gqf2s78t7o1-2>li:before{content:"" counter(lst-ctn-kix_1gqf2s
78t7o1-2,lower-roman) ". "}ol.lst-kix_j51xhhtple7c-2.start{counter-reset:lst-ctn
-kix_j51xhhtple7c-2 0}.lst-kix_qz5wp1hdd24k-4>li{counter-increment:lst-ctn-kix_q
z5wp1hdd24k-4}ol.lst-kix_j51xhhtple7c-3.start{counter-reset:lst-ctn-kix_j51xhhtp
le7c-3 0}.lst-kix_z7in7d1ar2zt-5>li:before{content:"" counter(lst-ctn-kix_z7in7d
1ar2zt-5,lower-roman) ". "}ol.lst-kix_nhaic9xr6pf-7.start{counter-reset:lst-ctn-
kix_nhaic9xr6pf-7 0}.lst-kix_hm47sef7muk-4>li{counter-increment:lst-ctn-kix_hm47
sef7muk-4}.lst-kix_jpf3cr7xe1pc-4>li:before{content:"" counter(lst-ctn-kix_jpf3c
r7xe1pc-4,lower-latin) ". "}.lst-kix_nhaic9xr6pf-5>li:before{content:"" counter(
lst-ctn-kix_nhaic9xr6pf-5,lower-roman) ". "}ol.lst-kix_8dg0b92yw51r-7.start{coun
ter-reset:lst-ctn-kix_8dg0b92yw51r-7 0}ol.lst-kix_ggm78fckav5h-1.start{counter-r
eset:lst-ctn-kix_ggm78fckav5h-1 0}ol.lst-kix_juntnht2kzza-5.start{counter-reset:
lst-ctn-kix_juntnht2kzza-5 0}.lst-kix_60g29afx0lof-1>li:before{content:"" counte
r(lst-ctn-kix_60g29afx0lof-1,lower-latin) ". "}.lst-kix_8uscekru9dbw-7>li{counte
r-increment:lst-ctn-kix_8uscekru9dbw-7}.lst-kix_wzk0mdv2qg9u-1>li:before{content
:"" counter(lst-ctn-kix_wzk0mdv2qg9u-1,lower-latin) ". "}ol.lst-kix_vnvg10gwrc8t
-3.start{counter-reset:lst-ctn-kix_vnvg10gwrc8t-3 0}.lst-kix_lixznqbqiris-5>li:b
efore{content:"" counter(lst-ctn-kix_lixznqbqiris-5,lower-roman) ". "}.lst-kix_f
r6w5z45nvx0-0>li:before{content:"" counter(lst-ctn-kix_fr6w5z45nvx0-0,decimal) "
. "}.lst-kix_oqqzpe3b3nud-0>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-0}ol.l
st-kix_t9jkz28ln50j-3.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-3 0}ol.lst-ki
x_p8a3u4ougab9-7.start{counter-reset:lst-ctn-kix_p8a3u4ougab9-7 0}.lst-kix_hvjet
9voiiio-1>li{counter-increment:lst-ctn-kix_hvjet9voiiio-1}ol.lst-kix_1c0w7icorqz
1-5.start{counter-reset:lst-ctn-kix_1c0w7icorqz1-5 0}.lst-kix_opzlp0rjj486-7>li:
before{content:"" counter(lst-ctn-kix_opzlp0rjj486-7,lower-latin) ". "}ol.lst-ki
x_lgtbofvz5zxd-7.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-7 0}.lst-kix_fr6w5
z45nvx0-6>li{counter-increment:lst-ctn-kix_fr6w5z45nvx0-6}.lst-kix_m8zky1oy6k60-
4>li{counter-increment:lst-ctn-kix_m8zky1oy6k60-4}.lst-kix_57tjkabqizo2-2>li{cou
nter-increment:lst-ctn-kix_57tjkabqizo2-2}ol.lst-kix_pa6lflf2amnu-7.start{counte
r-reset:lst-ctn-kix_pa6lflf2amnu-7 0}.lst-kix_m1x0qzeeadaz-5>li{counter-incremen
t:lst-ctn-kix_m1x0qzeeadaz-5}.lst-kix_hm47sef7muk-0>li:before{content:"" counter
(lst-ctn-kix_hm47sef7muk-0,decimal) ". "}.lst-kix_8uscekru9dbw-5>li{counter-incr
ement:lst-ctn-kix_8uscekru9dbw-5}ol.lst-kix_oqqzpe3b3nud-5.start{counter-reset:l
st-ctn-kix_oqqzpe3b3nud-5 0}.lst-kix_hm47sef7muk-6>li{counter-increment:lst-ctn-
kix_hm47sef7muk-6}ol.lst-kix_32zxnvl59py3-1.start{counter-reset:lst-ctn-kix_32zx
nvl59py3-1 0}ol.lst-kix_pyiocxf7nngd-7.start{counter-reset:lst-ctn-kix_pyiocxf7n
ngd-7 0}.lst-kix_fr6w5z45nvx0-7>li:before{content:"" counter(lst-ctn-kix_fr6w5z4
5nvx0-7,lower-latin) ". "}.lst-kix_60g29afx0lof-7>li{counter-increment:lst-ctn-k
ix_60g29afx0lof-7}ol.lst-kix_nho7sy6cpfv0-8.start{counter-reset:lst-ctn-kix_nho7
sy6cpfv0-8 0}ol.lst-kix_kvgsl0s9rzo4-7.start{counter-reset:lst-ctn-kix_kvgsl0s9r
zo4-7 0}.lst-kix_bnpbicbhbbru-5>li:before{content:"\0025a0 "}.lst-kix_vvzditg8s
no-1>li:before{content:"\0025cb "}.lst-kix_57tjkabqizo2-8>li:before{content:""
counter(lst-ctn-kix_57tjkabqizo2-8,lower-roman) ". "}.lst-kix_j51xhhtple7c-1>li:
before{content:"" counter(lst-ctn-kix_j51xhhtple7c-1,lower-latin) ". "}.lst-kix_
qz5wp1hdd24k-0>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-0}.lst-kix_juntnht2
kzza-2>li:before{content:"" counter(lst-ctn-kix_juntnht2kzza-2,lower-roman) ". "
}.lst-kix_pza3ybm1wtg3-7>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3-7}.lst-ki
x_sgsi64vug03j-5>li:before{content:"" counter(lst-ctn-kix_sgsi64vug03j-5,lower-r
oman) ". "}.lst-kix_z7in7d1ar2zt-7>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt
-7}.lst-kix_4s9m9sikrtm7-4>li:before{content:"" counter(lst-ctn-kix_4s9m9sikrtm7
-4,lower-latin) ". "}ol.lst-kix_jxeur1wnlj7y-0.start{counter-reset:lst-ctn-kix_j
xeur1wnlj7y-0 0}ol.lst-kix_t9jkz28ln50j-6.start{counter-reset:lst-ctn-kix_t9jkz2
8ln50j-6 0}.lst-kix_wzk0mdv2qg9u-7>li:before{content:"" counter(lst-ctn-kix_wzk0
mdv2qg9u-7,lower-latin) ". "}.lst-kix_ggm78fckav5h-3>li:before{content:"" counte
r(lst-ctn-kix_ggm78fckav5h-3,decimal) ". "}.lst-kix_kf08e4mo0q15-2>li:before{con
tent:"" counter(lst-ctn-kix_kf08e4mo0q15-2,lower-roman) ". "}.lst-kix_kvgsl0s9rz
o4-6>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-6,decimal) ". "}.lst-
kix_1c0w7icorqz1-1>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-1}.lst-kix_sgsi
64vug03j-7>li{counter-increment:lst-ctn-kix_sgsi64vug03j-7}ol.lst-kix_jxeur1wnlj
7y-8.start{counter-reset:lst-ctn-kix_jxeur1wnlj7y-8 0}.lst-kix_57tjkabqizo2-2>li
:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-2,lower-roman) ". "}.lst-kix
_pza3ybm1wtg3-1>li:before{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-1,lower-la
tin) ". "}.lst-kix_2uog6ch44jpu-5>li:before{content:"" counter(lst-ctn-kix_2uog6
ch44jpu-5,lower-roman) ". "}.lst-kix_8uscekru9dbw-8>li{counter-increment:lst-ctn
-kix_8uscekru9dbw-8}.lst-kix_57tjkabqizo2-0>li{counter-increment:lst-ctn-kix_57t
jkabqizo2-0}.lst-kix_dblgil8t24zy-6>li:before{content:"" counter(lst-ctn-kix_dbl
gil8t24zy-6,decimal) ". "}.lst-kix_57tjkabqizo2-3>li{counter-increment:lst-ctn-k
ix_57tjkabqizo2-3}.lst-kix_pza3ybm1wtg3-2>li:before{content:"" counter(lst-ctn-k
ix_pza3ybm1wtg3-2,lower-roman) ". "}ol.lst-kix_nhaic9xr6pf-0.start{counter-reset
:lst-ctn-kix_nhaic9xr6pf-0 0}.lst-kix_vnvg10gwrc8t-3>li{counter-increment:lst-ct
n-kix_vnvg10gwrc8t-3}.lst-kix_p8a3u4ougab9-8>li{counter-increment:lst-ctn-kix_p8
a3u4ougab9-8}.lst-kix_pyiocxf7nngd-6>li:before{content:"" counter(lst-ctn-kix_py
iocxf7nngd-6,decimal) ". "}.lst-kix_m8zky1oy6k60-5>li{counter-increment:lst-ctn-
kix_m8zky1oy6k60-5}.lst-kix_jzpgxqq6fzzf-0>li{counter-increment:lst-ctn-kix_jzpg
xqq6fzzf-0}.lst-kix_jpf3cr7xe1pc-1>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc
-1}ol.lst-kix_pa6lflf2amnu-5.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-5 0}.l
st-kix_jxeur1wnlj7y-1>li{counter-increment:lst-ctn-kix_jxeur1wnlj7y-1}.lst-kix_q
eukrmzdd856-5>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-5,lower-roma
n) ". "}.lst-kix_1gqf2s78t7o1-0>li:before{content:"" counter(lst-ctn-kix_1gqf2s7
8t7o1-0,decimal) ". "}.lst-kix_pza3ybm1wtg3-4>li:before{content:"" counter(lst-c
tn-kix_pza3ybm1wtg3-4,lower-latin) ". "}ol.lst-kix_57tjkabqizo2-1.start{counter-
reset:lst-ctn-kix_57tjkabqizo2-1 0}.lst-kix_jzpgxqq6fzzf-2>li:before{content:""
counter(lst-ctn-kix_jzpgxqq6fzzf-2,lower-roman) ". "}.lst-kix_m8zky1oy6k60-6>li:
before{content:"" counter(lst-ctn-kix_m8zky1oy6k60-6,decimal) ". "}ol.lst-kix_60
g29afx0lof-8.start{counter-reset:lst-ctn-kix_60g29afx0lof-8 0}ol.lst-kix_lixznqb
qiris-2.start{counter-reset:lst-ctn-kix_lixznqbqiris-2 0}.lst-kix_vnvg10gwrc8t-2
>li:before{content:"" counter(lst-ctn-kix_vnvg10gwrc8t-2,lower-roman) ". "}ol.ls
t-kix_57tjkabqizo2-5.start{counter-reset:lst-ctn-kix_57tjkabqizo2-5 0}.lst-kix_3
h1iswqv3l7s-0>li{counter-increment:lst-ctn-kix_3h1iswqv3l7s-0}.lst-kix_lixznqbqi
ris-3>li{counter-increment:lst-ctn-kix_lixznqbqiris-3}.lst-kix_sgsi64vug03j-6>li
:before{content:"" counter(lst-ctn-kix_sgsi64vug03j-6,decimal) ". "}ol.lst-kix_o
qqzpe3b3nud-8.start{counter-reset:lst-ctn-kix_oqqzpe3b3nud-8 0}ol.lst-kix_60g29a
fx0lof-3.start{counter-reset:lst-ctn-kix_60g29afx0lof-3 0}ol.lst-kix_57tjkabqizo
2-0.start{counter-reset:lst-ctn-kix_57tjkabqizo2-0 0}ol.lst-kix_2uog6ch44jpu-8.s
tart{counter-reset:lst-ctn-kix_2uog6ch44jpu-8 0}.lst-kix_fpxsljpyl73u-1>li:befor
e{content:"\0025cb "}.lst-kix_fr6w5z45nvx0-0>li{counter-increment:lst-ctn-kix_f
r6w5z45nvx0-0}.lst-kix_5f9palqqt4mm-2>li:before{content:"" counter(lst-ctn-kix_5
f9palqqt4mm-2,lower-roman) ". "}.lst-kix_p8a3u4ougab9-6>li:before{content:"" cou
nter(lst-ctn-kix_p8a3u4ougab9-6,decimal) ". "}.lst-kix_vnvg10gwrc8t-7>li{counter
-increment:lst-ctn-kix_vnvg10gwrc8t-7}ol.lst-kix_v454r7upbzuz-3.start{counter-re
set:lst-ctn-kix_v454r7upbzuz-3 0}.lst-kix_v454r7upbzuz-5>li{counter-increment:ls
t-ctn-kix_v454r7upbzuz-5}.lst-kix_juntnht2kzza-5>li{counter-increment:lst-ctn-ki
x_juntnht2kzza-5}ol.lst-kix_oqqzpe3b3nud-6.start{counter-reset:lst-ctn-kix_oqqzp
e3b3nud-6 0}ol.lst-kix_wzk0mdv2qg9u-1.start{counter-reset:lst-ctn-kix_wzk0mdv2qg
9u-1 0}ol.lst-kix_1c0w7icorqz1-1.start{counter-reset:lst-ctn-kix_1c0w7icorqz1-1
0}.lst-kix_kf08e4mo0q15-5>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-
5,lower-roman) ". "}.lst-kix_7kmxmbi2lsws-1>li:before{content:"" counter(lst-ctn
-kix_7kmxmbi2lsws-1,lower-latin) ". "}.lst-kix_vnvg10gwrc8t-5>li:before{content:
"" counter(lst-ctn-kix_vnvg10gwrc8t-5,lower-roman) ". "}.lst-kix_kvgsl0s9rzo4-7>
li{counter-increment:lst-ctn-kix_kvgsl0s9rzo4-7}.lst-kix_wzk0mdv2qg9u-8>li:befor
e{content:"" counter(lst-ctn-kix_wzk0mdv2qg9u-8,lower-roman) ". "}.lst-kix_i2v07
7rod1nx-3>li:before{content:"\0025cf "}.lst-kix_q1b5wk7cmirb-1>li:before{conten
t:"\0025cb "}ol.lst-kix_3h1iswqv3l7s-4.start{counter-reset:lst-ctn-kix_3h1iswqv
3l7s-4 0}.lst-kix_oqqzpe3b3nud-2>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-2
}.lst-kix_v454r7upbzuz-1>li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-1
,lower-latin) ". "}.lst-kix_1c0w7icorqz1-3>li:before{content:"" counter(lst-ctn-
kix_1c0w7icorqz1-3,decimal) ". "}ol.lst-kix_nhaic9xr6pf-5.start{counter-reset:ls
t-ctn-kix_nhaic9xr6pf-5 0}.lst-kix_60g29afx0lof-7>li:before{content:"" counter(l
st-ctn-kix_60g29afx0lof-7,lower-latin) ". "}ol.lst-kix_pa6lflf2amnu-0.start{coun
ter-reset:lst-ctn-kix_pa6lflf2amnu-0 0}.lst-kix_p8a3u4ougab9-2>li:before{content
:"" counter(lst-ctn-kix_p8a3u4ougab9-2,lower-roman) ". "}.lst-kix_57tjkabqizo2-1
>li{counter-increment:lst-ctn-kix_57tjkabqizo2-1}.lst-kix_uq748w6pjv3r-5>li{coun
ter-increment:lst-ctn-kix_uq748w6pjv3r-5}.lst-kix_opzlp0rjj486-2>li:before{conte
nt:"" counter(lst-ctn-kix_opzlp0rjj486-2,lower-roman) ". "}.lst-kix_v454r7upbzuz
-0>li{counter-increment:lst-ctn-kix_v454r7upbzuz-0}ol.lst-kix_juntnht2kzza-7.sta
rt{counter-reset:lst-ctn-kix_juntnht2kzza-7 0}.lst-kix_j51xhhtple7c-4>li{counter
-increment:lst-ctn-kix_j51xhhtple7c-4}.lst-kix_1c0w7icorqz1-8>li{counter-increme
nt:lst-ctn-kix_1c0w7icorqz1-8}.lst-kix_lgtbofvz5zxd-6>li{counter-increment:lst-c
tn-kix_lgtbofvz5zxd-6}.lst-kix_iqyc5gy523tq-4>li:before{content:"\0025cb "}.lst
-kix_j51xhhtple7c-6>li:before{content:"" counter(lst-ctn-kix_j51xhhtple7c-6,deci
mal) ". "}.lst-kix_1g0xzctl1vi-3>li:before{content:"" counter(lst-ctn-kix_1g0xzc
tl1vi-3,decimal) ". "}ol.lst-kix_ggm78fckav5h-0.start{counter-reset:lst-ctn-kix_
ggm78fckav5h-0 0}.lst-kix_oqqzpe3b3nud-4>li:before{content:"" counter(lst-ctn-ki
x_oqqzpe3b3nud-4,lower-latin) ". "}.lst-kix_1g0xzctl1vi-7>li{counter-increment:l
st-ctn-kix_1g0xzctl1vi-7}.lst-kix_dblgil8t24zy-5>li{counter-increment:lst-ctn-ki
x_dblgil8t24zy-5}.lst-kix_pa6lflf2amnu-2>li{counter-increment:lst-ctn-kix_pa6lfl
f2amnu-2}ol.lst-kix_dblgil8t24zy-6.start{counter-reset:lst-ctn-kix_dblgil8t24zy-
6 0}ol.lst-kix_kf08e4mo0q15-5.start{counter-reset:lst-ctn-kix_kf08e4mo0q15-5 0}.
lst-kix_pa6lflf2amnu-0>li:before{content:"" counter(lst-ctn-kix_pa6lflf2amnu-0,d
ecimal) ". "}.lst-kix_lixznqbqiris-1>li{counter-increment:lst-ctn-kix_lixznqbqir
is-1}ol.lst-kix_qz5wp1hdd24k-8.start{counter-reset:lst-ctn-kix_qz5wp1hdd24k-8 0}
.lst-kix_3h1iswqv3l7s-3>li{counter-increment:lst-ctn-kix_3h1iswqv3l7s-3}.lst-kix
_qz5wp1hdd24k-2>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-2}ol.lst-kix_wzk0m
dv2qg9u-0.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-0 0}.lst-kix_hm47sef7muk-
3>li{counter-increment:lst-ctn-kix_hm47sef7muk-3}.lst-kix_t7any4lo9hoq-0>li:befo
re{content:"\0025cf "}.lst-kix_1g0xzctl1vi-8>li:before{content:"" counter(lst-c
tn-kix_1g0xzctl1vi-8,lower-roman) ". "}.lst-kix_kf08e4mo0q15-1>li{counter-increm
ent:lst-ctn-kix_kf08e4mo0q15-1}.lst-kix_hm47sef7muk-5>li:before{content:"" count
er(lst-ctn-kix_hm47sef7muk-5,lower-roman) ". "}.lst-kix_7kmxmbi2lsws-0>li{counte
r-increment:lst-ctn-kix_7kmxmbi2lsws-0}.lst-kix_7kmxmbi2lsws-5>li{counter-increm
ent:lst-ctn-kix_7kmxmbi2lsws-5}.lst-kix_vnvg10gwrc8t-8>li:before{content:"" coun
ter(lst-ctn-kix_vnvg10gwrc8t-8,lower-roman) ". "}.lst-kix_q1b5wk7cmirb-7>li:befo
re{content:"\0025cb "}.lst-kix_hvjet9voiiio-0>li:before{content:"" counter(lst-
ctn-kix_hvjet9voiiio-0,decimal) ". "}ol.lst-kix_p8a3u4ougab9-0.start{counter-res
et:lst-ctn-kix_p8a3u4ougab9-0 0}.lst-kix_sgsi64vug03j-6>li{counter-increment:lst
-ctn-kix_sgsi64vug03j-6}.lst-kix_fr6w5z45nvx0-8>li:before{content:"" counter(lst
-ctn-kix_fr6w5z45nvx0-8,lower-roman) ". "}.lst-kix_2uog6ch44jpu-2>li{counter-inc
rement:lst-ctn-kix_2uog6ch44jpu-2}ol.lst-kix_uq748w6pjv3r-1.start{counter-reset:
lst-ctn-kix_uq748w6pjv3r-1 0}ol.lst-kix_oqqzpe3b3nud-0.start{counter-reset:lst-c
tn-kix_oqqzpe3b3nud-0 0}.lst-kix_fpxsljpyl73u-8>li:before{content:"\0025a0 "}.l
st-kix_v454r7upbzuz-8>li{counter-increment:lst-ctn-kix_v454r7upbzuz-8}.lst-kix_8
uscekru9dbw-0>li:before{content:"" counter(lst-ctn-kix_8uscekru9dbw-0,decimal) "
. "}.lst-kix_8dg0b92yw51r-2>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51
r-2,lower-roman) ". "}.lst-kix_fr6w5z45nvx0-5>li{counter-increment:lst-ctn-kix_f
r6w5z45nvx0-5}.lst-kix_2uog6ch44jpu-3>li{counter-increment:lst-ctn-kix_2uog6ch44
jpu-3}.lst-kix_lixznqbqiris-1>li:before{content:"" counter(lst-ctn-kix_lixznqbqi
ris-1,lower-latin) ". "}ol.lst-kix_jxeur1wnlj7y-5.start{counter-reset:lst-ctn-ki
x_jxeur1wnlj7y-5 0}.lst-kix_nhaic9xr6pf-3>li{counter-increment:lst-ctn-kix_nhaic
9xr6pf-3}.lst-kix_fr6w5z45nvx0-4>li{counter-increment:lst-ctn-kix_fr6w5z45nvx0-4
}ol.lst-kix_4s9m9sikrtm7-2.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-2 0}.lst
-kix_lgtbofvz5zxd-0>li:before{content:"" counter(lst-ctn-kix_lgtbofvz5zxd-0,deci
mal) ". "}ol.lst-kix_8uscekru9dbw-0.start{counter-reset:lst-ctn-kix_8uscekru9dbw
-0 0}.lst-kix_oqqzpe3b3nud-5>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-5}.ls
t-kix_4s9m9sikrtm7-8>li{counter-increment:lst-ctn-kix_4s9m9sikrtm7-8}ol.lst-kix_
lgtbofvz5zxd-8.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-8 0}.lst-kix_1gqf2s7
8t7o1-5>li{counter-increment:lst-ctn-kix_1gqf2s78t7o1-5}.lst-kix_9tkaqbe3bnu3-5>
li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-5}.lst-kix_bnpbicbhbbru-2>li:befor
e{content:"\0025a0 "}.lst-kix_60g29afx0lof-4>li:before{content:"" counter(lst-c
tn-kix_60g29afx0lof-4,lower-latin) ". "}ol.lst-kix_fr6w5z45nvx0-0.start{counter-
reset:lst-ctn-kix_fr6w5z45nvx0-0 0}ol.lst-kix_1c0w7icorqz1-0.start{counter-reset
:lst-ctn-kix_1c0w7icorqz1-0 0}ol.lst-kix_4s9m9sikrtm7-3.start{counter-reset:lst-
ctn-kix_4s9m9sikrtm7-3 0}ol.lst-kix_1gqf2s78t7o1-3.start{counter-reset:lst-ctn-k
ix_1gqf2s78t7o1-3 0}.lst-kix_z7in7d1ar2zt-2>li:before{content:"" counter(lst-ctn
-kix_z7in7d1ar2zt-2,lower-roman) ". "}.lst-kix_hm47sef7muk-1>li{counter-incremen
t:lst-ctn-kix_hm47sef7muk-1}.lst-kix_p8a3u4ougab9-5>li{counter-increment:lst-ctn
-kix_p8a3u4ougab9-5}ol.lst-kix_jpf3cr7xe1pc-4.start{counter-reset:lst-ctn-kix_jp
f3cr7xe1pc-4 0}.lst-kix_t9jkz28ln50j-3>li{counter-increment:lst-ctn-kix_t9jkz28l
n50j-3}.lst-kix_iqyc5gy523tq-8>li:before{content:"\0025a0 "}ol.lst-kix_kvgsl0s9
rzo4-3.start{counter-reset:lst-ctn-kix_kvgsl0s9rzo4-3 0}ol.lst-kix_1g0xzctl1vi-5
.start{counter-reset:lst-ctn-kix_1g0xzctl1vi-5 0}.lst-kix_fr6w5z45nvx0-2>li:befo
re{content:"" counter(lst-ctn-kix_fr6w5z45nvx0-2,lower-roman) ". "}ol.lst-kix_wz
k0mdv2qg9u-7.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-7 0}.lst-kix_9tkaqbe3b
nu3-8>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-8}ol.lst-kix_57tjkabqizo2-2.
start{counter-reset:lst-ctn-kix_57tjkabqizo2-2 0}.lst-kix_jzpgxqq6fzzf-5>li:befo
re{content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-5,lower-roman) ". "}.lst-kix_nho7
sy6cpfv0-0>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-0,decimal) ". "
}.lst-kix_z7in7d1ar2zt-3>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt-3}ol.lst-
kix_hm47sef7muk-7.start{counter-reset:lst-ctn-kix_hm47sef7muk-7 0}.lst-kix_sgsi6
4vug03j-2>li:before{content:"" counter(lst-ctn-kix_sgsi64vug03j-2,lower-roman) "
. "}.lst-kix_qz5wp1hdd24k-5>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-5}ol.l
st-kix_t9jkz28ln50j-8.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-8 0}.lst-kix_
uq748w6pjv3r-1>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-1,lower-lat
in) ". "}.lst-kix_4s9m9sikrtm7-0>li:before{content:"" counter(lst-ctn-kix_4s9m9s
ikrtm7-0,decimal) ". "}.lst-kix_1gqf2s78t7o1-0>li{counter-increment:lst-ctn-kix_
1gqf2s78t7o1-0}ol.lst-kix_1g0xzctl1vi-2.start{counter-reset:lst-ctn-kix_1g0xzctl
1vi-2 0}.lst-kix_qeukrmzdd856-7>li:before{content:"" counter(lst-ctn-kix_qeukrmz
dd856-7,lower-latin) ". "}.lst-kix_vnvg10gwrc8t-0>li:before{content:"" counter(l
st-ctn-kix_vnvg10gwrc8t-0,decimal) ". "}ol.lst-kix_jpf3cr7xe1pc-7.start{counter-
reset:lst-ctn-kix_jpf3cr7xe1pc-7 0}.lst-kix_kc6aimw8pnra-7>li:before{content:"\0
025cb "}.lst-kix_opzlp0rjj486-5>li:before{content:"" counter(lst-ctn-kix_opzlp0
rjj486-5,lower-roman) ". "}.lst-kix_kvgsl0s9rzo4-3>li{counter-increment:lst-ctn-
kix_kvgsl0s9rzo4-3}ol.lst-kix_nhaic9xr6pf-8.start{counter-reset:lst-ctn-kix_nhai
c9xr6pf-8 0}.lst-kix_vvzditg8sno-4>li:before{content:"\0025cb "}ol.lst-kix_nhai
c9xr6pf-2.start{counter-reset:lst-ctn-kix_nhaic9xr6pf-2 0}ol.lst-kix_4s9m9sikrtm
7-4.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-4 0}ol.lst-kix_qz5wp1hdd24k-5.s
tart{counter-reset:lst-ctn-kix_qz5wp1hdd24k-5 0}.lst-kix_32zxnvl59py3-7>li:befor
e{content:"" counter(lst-ctn-kix_32zxnvl59py3-7,lower-latin) ". "}ol.lst-kix_dbl
gil8t24zy-2.start{counter-reset:lst-ctn-kix_dblgil8t24zy-2 0}.lst-kix_kvgsl0s9rz
o4-4>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-4,lower-latin) ". "}.
lst-kix_wzk0mdv2qg9u-2>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-2}ol.lst-ki
x_8uscekru9dbw-2.start{counter-reset:lst-ctn-kix_8uscekru9dbw-2 0}.lst-kix_m8zky
1oy6k60-8>li{counter-increment:lst-ctn-kix_m8zky1oy6k60-8}.lst-kix_i2v077rod1nx-
8>li:before{content:"\0025a0 "}.lst-kix_q1b5wk7cmirb-4>li:before{content:"\0025
cb "}.lst-kix_juntnht2kzza-3>li:before{content:"" counter(lst-ctn-kix_juntnht2k
zza-3,decimal) ". "}.lst-kix_fpxsljpyl73u-4>li:before{content:"\0025cb "}.lst-k
ix_8dg0b92yw51r-3>li{counter-increment:lst-ctn-kix_8dg0b92yw51r-3}.lst-kix_ggm78
fckav5h-3>li{counter-increment:lst-ctn-kix_ggm78fckav5h-3}.lst-kix_kvgsl0s9rzo4-
7>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-7,lower-latin) ". "}.lst
-kix_jzpgxqq6fzzf-6>li:before{content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-6,deci
mal) ". "}.lst-kix_1gqf2s78t7o1-8>li{counter-increment:lst-ctn-kix_1gqf2s78t7o1-
8}.lst-kix_kc6aimw8pnra-8>li:before{content:"\0025a0 "}.lst-kix_j51xhhtple7c-1>
li{counter-increment:lst-ctn-kix_j51xhhtple7c-1}.lst-kix_1c0w7icorqz1-6>li:befor
e{content:"" counter(lst-ctn-kix_1c0w7icorqz1-6,decimal) ". "}ol.lst-kix_juntnht
2kzza-0.start{counter-reset:lst-ctn-kix_juntnht2kzza-0 0}.lst-kix_60g29afx0lof-1
>li{counter-increment:lst-ctn-kix_60g29afx0lof-1}.lst-kix_sgsi64vug03j-1>li{coun
ter-increment:lst-ctn-kix_sgsi64vug03j-1}.lst-kix_dblgil8t24zy-1>li:before{conte
nt:"" counter(lst-ctn-kix_dblgil8t24zy-1,lower-latin) ". "}ol.lst-kix_sgsi64vug0
3j-7.start{counter-reset:lst-ctn-kix_sgsi64vug03j-7 0}.lst-kix_60g29afx0lof-8>li
{counter-increment:lst-ctn-kix_60g29afx0lof-8}ol.lst-kix_lixznqbqiris-3.start{co
unter-reset:lst-ctn-kix_lixznqbqiris-3 0}ol.lst-kix_jzpgxqq6fzzf-8.start{counter
-reset:lst-ctn-kix_jzpgxqq6fzzf-8 0}.lst-kix_nho7sy6cpfv0-5>li:before{content:""
counter(lst-ctn-kix_nho7sy6cpfv0-5,lower-roman) ". "}.lst-kix_opzlp0rjj486-3>li
{counter-increment:lst-ctn-kix_opzlp0rjj486-3}.lst-kix_pa6lflf2amnu-8>li:before{
content:"" counter(lst-ctn-kix_pa6lflf2amnu-8,lower-roman) ". "}.lst-kix_iqyc5gy
523tq-0>li:before{content:"\0025cf "}.lst-kix_kvgsl0s9rzo4-2>li:before{content:
"" counter(lst-ctn-kix_kvgsl0s9rzo4-2,lower-roman) ". "}ol.lst-kix_1c0w7icorqz1-
4.start{counter-reset:lst-ctn-kix_1c0w7icorqz1-4 0}.lst-kix_vnvg10gwrc8t-1>li{co
unter-increment:lst-ctn-kix_vnvg10gwrc8t-1}ol.lst-kix_p8a3u4ougab9-5.start{count
er-reset:lst-ctn-kix_p8a3u4ougab9-5 0}.lst-kix_kvgsl0s9rzo4-6>li{counter-increme
nt:lst-ctn-kix_kvgsl0s9rzo4-6}ol.lst-kix_opzlp0rjj486-0.start{counter-reset:lst-
ctn-kix_opzlp0rjj486-0 0}.lst-kix_pza3ybm1wtg3-7>li:before{content:"" counter(ls
t-ctn-kix_pza3ybm1wtg3-7,lower-latin) ". "}.lst-kix_opzlp0rjj486-7>li{counter-in
crement:lst-ctn-kix_opzlp0rjj486-7}.lst-kix_opzlp0rjj486-0>li:before{content:""
counter(lst-ctn-kix_opzlp0rjj486-0,decimal) ". "}.lst-kix_8dg0b92yw51r-4>li{coun
ter-increment:lst-ctn-kix_8dg0b92yw51r-4}.lst-kix_p8a3u4ougab9-8>li:before{conte
nt:"" counter(lst-ctn-kix_p8a3u4ougab9-8,lower-roman) ". "}ol.lst-kix_pza3ybm1wt
g3-2.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-2 0}.lst-kix_8uscekru9dbw-2>li
{counter-increment:lst-ctn-kix_8uscekru9dbw-2}ol.lst-kix_pza3ybm1wtg3-4.start{co
unter-reset:lst-ctn-kix_pza3ybm1wtg3-4 0}.lst-kix_dblgil8t24zy-8>li:before{conte
nt:"" counter(lst-ctn-kix_dblgil8t24zy-8,lower-roman) ". "}ol.lst-kix_32zxnvl59p
y3-0.start{counter-reset:lst-ctn-kix_32zxnvl59py3-0 0}.lst-kix_t9jkz28ln50j-7>li
{counter-increment:lst-ctn-kix_t9jkz28ln50j-7}.lst-kix_sgsi64vug03j-7>li:before{
content:"" counter(lst-ctn-kix_sgsi64vug03j-7,lower-latin) ". "}.lst-kix_z7in7d1
ar2zt-8>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt-8}.lst-kix_3h1iswqv3l7s-4>
li{counter-increment:lst-ctn-kix_3h1iswqv3l7s-4}.lst-kix_3h1iswqv3l7s-7>li{count
er-increment:lst-ctn-kix_3h1iswqv3l7s-7}ol.lst-kix_jpf3cr7xe1pc-0.start{counter-
reset:lst-ctn-kix_jpf3cr7xe1pc-0 0}ol.lst-kix_9tkaqbe3bnu3-0.start{counter-reset
:lst-ctn-kix_9tkaqbe3bnu3-0 0}.lst-kix_3h1iswqv3l7s-7>li:before{content:"" count
er(lst-ctn-kix_3h1iswqv3l7s-7,lower-latin) ". "}.lst-kix_bnpbicbhbbru-7>li:befor
e{content:"\0025cb "}.lst-kix_uq748w6pjv3r-4>li{counter-increment:lst-ctn-kix_u
q748w6pjv3r-4}.lst-kix_ffvvlgzbuz30-6>li:before{content:"\0025cf "}.lst-kix_pza
3ybm1wtg3-0>li:before{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-0,decimal) ".
"}.lst-kix_qz5wp1hdd24k-1>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-
1,lower-latin) ". "}ol.lst-kix_qeukrmzdd856-6.start{counter-reset:lst-ctn-kix_qe
ukrmzdd856-6 0}ol.lst-kix_hm47sef7muk-2.start{counter-reset:lst-ctn-kix_hm47sef7
muk-2 0}.lst-kix_oqqzpe3b3nud-4>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-4}
.lst-kix_jpf3cr7xe1pc-3>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-3}.lst-kix
_jzpgxqq6fzzf-8>li:before{content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-8,lower-ro
man) ". "}.lst-kix_kf08e4mo0q15-2>li{counter-increment:lst-ctn-kix_kf08e4mo0q15-
2}.lst-kix_kvgsl0s9rzo4-5>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-
5,lower-roman) ". "}ol.lst-kix_57tjkabqizo2-8.start{counter-reset:lst-ctn-kix_57
tjkabqizo2-8 0}ol.lst-kix_lgtbofvz5zxd-1.start{counter-reset:lst-ctn-kix_lgtbofv
z5zxd-1 0}.lst-kix_jzpgxqq6fzzf-4>li{counter-increment:lst-ctn-kix_jzpgxqq6fzzf-
4}.lst-kix_3h1iswqv3l7s-3>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-
3,decimal) ". "}ol.lst-kix_9tkaqbe3bnu3-5.start{counter-reset:lst-ctn-kix_9tkaqb
e3bnu3-5 0}.lst-kix_lixznqbqiris-6>li{counter-increment:lst-ctn-kix_lixznqbqiris
-6}.lst-kix_vnvg10gwrc8t-0>li{counter-increment:lst-ctn-kix_vnvg10gwrc8t-0}.lst-
kix_8uscekru9dbw-1>li:before{content:"" counter(lst-ctn-kix_8uscekru9dbw-1,lower
-latin) ". "}.lst-kix_lgtbofvz5zxd-8>li{counter-increment:lst-ctn-kix_lgtbofvz5z
xd-8}.lst-kix_m8zky1oy6k60-2>li:before{content:"" counter(lst-ctn-kix_m8zky1oy6k
60-2,lower-roman) ". "}ol.lst-kix_kvgsl0s9rzo4-6.start{counter-reset:lst-ctn-kix
_kvgsl0s9rzo4-6 0}ol.lst-kix_m1x0qzeeadaz-5.start{counter-reset:lst-ctn-kix_m1x0
qzeeadaz-5 0}ol.lst-kix_fr6w5z45nvx0-5.start{counter-reset:lst-ctn-kix_fr6w5z45n
vx0-5 0}ol.lst-kix_jpf3cr7xe1pc-6.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-6
0}ol.lst-kix_wzk0mdv2qg9u-4.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-4 0}.l
st-kix_fr6w5z45nvx0-7>li{counter-increment:lst-ctn-kix_fr6w5z45nvx0-7}.lst-kix_q
eukrmzdd856-3>li{counter-increment:lst-ctn-kix_qeukrmzdd856-3}ol.lst-kix_kf08e4m
o0q15-7.start{counter-reset:lst-ctn-kix_kf08e4mo0q15-7 0}.lst-kix_2uog6ch44jpu-6
>li{counter-increment:lst-ctn-kix_2uog6ch44jpu-6}.lst-kix_8dg0b92yw51r-7>li:befo
re{content:"" counter(lst-ctn-kix_8dg0b92yw51r-7,lower-latin) ". "}.lst-kix_vnvg
10gwrc8t-4>li{counter-increment:lst-ctn-kix_vnvg10gwrc8t-4}.lst-kix_p8a3u4ougab9
-4>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-4}.lst-kix_sgsi64vug03j-0>li{co
unter-increment:lst-ctn-kix_sgsi64vug03j-0}.lst-kix_m1x0qzeeadaz-2>li:before{con
tent:"" counter(lst-ctn-kix_m1x0qzeeadaz-2,lower-roman) ". "}.lst-kix_p8a3u4ouga
b9-0>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-0}.lst-kix_jzpgxqq6fzzf-1>li{
counter-increment:lst-ctn-kix_jzpgxqq6fzzf-1}.lst-kix_jzpgxqq6fzzf-1>li:before{c
ontent:"" counter(lst-ctn-kix_jzpgxqq6fzzf-1,lower-latin) ". "}.lst-kix_4s9m9sik
rtm7-3>li:before{content:"" counter(lst-ctn-kix_4s9m9sikrtm7-3,decimal) ". "}.ls
t-kix_jzpgxqq6fzzf-4>li:before{content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-4,low
er-latin) ". "}.lst-kix_8dg0b92yw51r-8>li:before{content:"" counter(lst-ctn-kix_
8dg0b92yw51r-8,lower-roman) ". "}.lst-kix_z7in7d1ar2zt-7>li:before{content:"" co
unter(lst-ctn-kix_z7in7d1ar2zt-7,lower-latin) ". "}.lst-kix_opzlp0rjj486-8>li{co
unter-increment:lst-ctn-kix_opzlp0rjj486-8}ol.lst-kix_2uog6ch44jpu-6.start{count
er-reset:lst-ctn-kix_2uog6ch44jpu-6 0}.lst-kix_sgsi64vug03j-1>li:before{content:
"" counter(lst-ctn-kix_sgsi64vug03j-1,lower-latin) ". "}.lst-kix_m8zky1oy6k60-2>
li{counter-increment:lst-ctn-kix_m8zky1oy6k60-2}ol.lst-kix_qz5wp1hdd24k-0.start{
counter-reset:lst-ctn-kix_qz5wp1hdd24k-0 0}ol.lst-kix_opzlp0rjj486-7.start{count
er-reset:lst-ctn-kix_opzlp0rjj486-7 0}.lst-kix_lgtbofvz5zxd-1>li{counter-increme
nt:lst-ctn-kix_lgtbofvz5zxd-1}.lst-kix_oqqzpe3b3nud-6>li{counter-increment:lst-c
tn-kix_oqqzpe3b3nud-6}.lst-kix_sgsi64vug03j-4>li:before{content:"" counter(lst-c
tn-kix_sgsi64vug03j-4,lower-latin) ". "}.lst-kix_dblgil8t24zy-2>li:before{conten
t:"" counter(lst-ctn-kix_dblgil8t24zy-2,lower-roman) ". "}ol.lst-kix_hvjet9voiii
o-1.start{counter-reset:lst-ctn-kix_hvjet9voiiio-1 0}.lst-kix_qz5wp1hdd24k-7>li:
before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-7,lower-latin) ". "}.lst-kix_
qeukrmzdd856-2>li{counter-increment:lst-ctn-kix_qeukrmzdd856-2}ol.lst-kix_m8zky1
oy6k60-1.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-1 0}ol.lst-kix_8uscekru9db
w-6.start{counter-reset:lst-ctn-kix_8uscekru9dbw-6 0}.lst-kix_p8a3u4ougab9-0>li:
before{content:"" counter(lst-ctn-kix_p8a3u4ougab9-0,decimal) ". "}.lst-kix_1gqf
2s78t7o1-4>li{counter-increment:lst-ctn-kix_1gqf2s78t7o1-4}.lst-kix_1c0w7icorqz1
-4>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-4}.lst-kix_jzpgxqq6fzzf-2>li{co
unter-increment:lst-ctn-kix_jzpgxqq6fzzf-2}ol.lst-kix_kvgsl0s9rzo4-1.start{count
er-reset:lst-ctn-kix_kvgsl0s9rzo4-1 0}.lst-kix_ggm78fckav5h-1>li:before{content:
"" counter(lst-ctn-kix_ggm78fckav5h-1,lower-latin) ". "}.lst-kix_uq748w6pjv3r-8>
li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-8,lower-roman) ". "}ol.lst
-kix_v454r7upbzuz-1.start{counter-reset:lst-ctn-kix_v454r7upbzuz-1 0}.lst-kix_jp
f3cr7xe1pc-2>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-2}.lst-kix_dblgil8t24
zy-6>li{counter-increment:lst-ctn-kix_dblgil8t24zy-6}.lst-kix_2uog6ch44jpu-2>li:
before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-2,lower-roman) ". "}.lst-kix_
nho7sy6cpfv0-3>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-3,decimal)
". "}ol.lst-kix_hvjet9voiiio-4.start{counter-reset:lst-ctn-kix_hvjet9voiiio-4 0}
.lst-kix_3h1iswqv3l7s-8>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-8,
lower-roman) ". "}.lst-kix_lgtbofvz5zxd-7>li{counter-increment:lst-ctn-kix_lgtbo
fvz5zxd-7}.lst-kix_pa6lflf2amnu-6>li:before{content:"" counter(lst-ctn-kix_pa6lf
lf2amnu-6,decimal) ". "}.lst-kix_uq748w6pjv3r-7>li:before{content:"" counter(lst
-ctn-kix_uq748w6pjv3r-7,lower-latin) ". "}.lst-kix_qeukrmzdd856-4>li{counter-inc
rement:lst-ctn-kix_qeukrmzdd856-4}.lst-kix_32zxnvl59py3-0>li:before{content:"" c
ounter(lst-ctn-kix_32zxnvl59py3-0,decimal) ". "}.lst-kix_q1b5wk7cmirb-8>li:befor
e{content:"\0025a0 "}.lst-kix_m8zky1oy6k60-7>li{counter-increment:lst-ctn-kix_m
8zky1oy6k60-7}ol.lst-kix_qeukrmzdd856-4.start{counter-reset:lst-ctn-kix_qeukrmzd
d856-4 0}ol.lst-kix_jzpgxqq6fzzf-3.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-
3 0}.lst-kix_p8a3u4ougab9-7>li:before{content:"" counter(lst-ctn-kix_p8a3u4ougab
9-7,lower-latin) ". "}ol.lst-kix_pa6lflf2amnu-8.start{counter-reset:lst-ctn-kix_
pa6lflf2amnu-8 0}.lst-kix_32zxnvl59py3-5>li:before{content:"" counter(lst-ctn-ki
x_32zxnvl59py3-5,lower-roman) ". "}.lst-kix_jpf3cr7xe1pc-7>li:before{content:""
counter(lst-ctn-kix_jpf3cr7xe1pc-7,lower-latin) ". "}.lst-kix_kf08e4mo0q15-6>li:
before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-6,decimal) ". "}ol.lst-kix_hv
jet9voiiio-7.start{counter-reset:lst-ctn-kix_hvjet9voiiio-7 0}.lst-kix_1c0w7icor
qz1-2>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-2}.lst-kix_nhaic9xr6pf-5>li{
counter-increment:lst-ctn-kix_nhaic9xr6pf-5}.lst-kix_qeukrmzdd856-0>li{counter-i
ncrement:lst-ctn-kix_qeukrmzdd856-0}.lst-kix_t7any4lo9hoq-5>li:before{content:"\
0025a0 "}ol.lst-kix_z7in7d1ar2zt-5.start{counter-reset:lst-ctn-kix_z7in7d1ar2zt
-5 0}.lst-kix_5f9palqqt4mm-4>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-4}ol.
lst-kix_oqqzpe3b3nud-4.start{counter-reset:lst-ctn-kix_oqqzpe3b3nud-4 0}ol.lst-k
ix_57tjkabqizo2-3.start{counter-reset:lst-ctn-kix_57tjkabqizo2-3 0}.lst-kix_9tka
qbe3bnu3-8>li:before{content:"" counter(lst-ctn-kix_9tkaqbe3bnu3-8,lower-roman)
". "}.lst-kix_vnvg10gwrc8t-2>li{counter-increment:lst-ctn-kix_vnvg10gwrc8t-2}.ls
t-kix_qz5wp1hdd24k-1>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-1}.lst-kix_kf
08e4mo0q15-3>li{counter-increment:lst-ctn-kix_kf08e4mo0q15-3}.lst-kix_1gqf2s78t7
o1-7>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-7,lower-latin) ". "}.
lst-kix_z7in7d1ar2zt-4>li:before{content:"" counter(lst-ctn-kix_z7in7d1ar2zt-4,l
ower-latin) ". "}ol.lst-kix_t9jkz28ln50j-1.start{counter-reset:lst-ctn-kix_t9jkz
28ln50j-1 0}.lst-kix_7kmxmbi2lsws-8>li:before{content:"" counter(lst-ctn-kix_7km
xmbi2lsws-8,lower-roman) ". "}.lst-kix_jpf3cr7xe1pc-1>li:before{content:"" count
er(lst-ctn-kix_jpf3cr7xe1pc-1,lower-latin) ". "}ol.lst-kix_kf08e4mo0q15-0.start{
counter-reset:lst-ctn-kix_kf08e4mo0q15-0 0}.lst-kix_fpxsljpyl73u-5>li:before{con
tent:"\0025a0 "}ol.lst-kix_m1x0qzeeadaz-3.start{counter-reset:lst-ctn-kix_m1x0q
zeeadaz-3 0}.lst-kix_pa6lflf2amnu-3>li:before{content:"" counter(lst-ctn-kix_pa6
lflf2amnu-3,decimal) ". "}.lst-kix_hvjet9voiiio-4>li{counter-increment:lst-ctn-k
ix_hvjet9voiiio-4}.lst-kix_dblgil8t24zy-7>li:before{content:"" counter(lst-ctn-k
ix_dblgil8t24zy-7,lower-latin) ". "}.lst-kix_dblgil8t24zy-8>li{counter-increment
:lst-ctn-kix_dblgil8t24zy-8}.lst-kix_pa6lflf2amnu-1>li:before{content:"" counter
(lst-ctn-kix_pa6lflf2amnu-1,lower-latin) ". "}ol.lst-kix_sgsi64vug03j-5.start{co
unter-reset:lst-ctn-kix_sgsi64vug03j-5 0}.lst-kix_t9jkz28ln50j-4>li:before{conte
nt:"" counter(lst-ctn-kix_t9jkz28ln50j-4,lower-latin) ". "}.lst-kix_m1x0qzeeadaz
-7>li:before{content:"" counter(lst-ctn-kix_m1x0qzeeadaz-7,lower-latin) ". "}.ls
t-kix_nho7sy6cpfv0-3>li{counter-increment:lst-ctn-kix_nho7sy6cpfv0-3}ol.lst-kix_
vnvg10gwrc8t-0.start{counter-reset:lst-ctn-kix_vnvg10gwrc8t-0 0}ol.lst-kix_nho7s
y6cpfv0-4.start{counter-reset:lst-ctn-kix_nho7sy6cpfv0-4 0}.lst-kix_2uog6ch44jpu
-8>li{counter-increment:lst-ctn-kix_2uog6ch44jpu-8}.lst-kix_pyiocxf7nngd-8>li{co
unter-increment:lst-ctn-kix_pyiocxf7nngd-8}.lst-kix_vnvg10gwrc8t-1>li:before{con
tent:"" counter(lst-ctn-kix_vnvg10gwrc8t-1,lower-latin) ". "}ol.lst-kix_juntnht2
kzza-2.start{counter-reset:lst-ctn-kix_juntnht2kzza-2 0}.lst-kix_4s9m9sikrtm7-3>
li{counter-increment:lst-ctn-kix_4s9m9sikrtm7-3}.lst-kix_vnvg10gwrc8t-7>li:befor
e{content:"" counter(lst-ctn-kix_vnvg10gwrc8t-7,lower-latin) ". "}.lst-kix_v454r
7upbzuz-6>li{counter-increment:lst-ctn-kix_v454r7upbzuz-6}.lst-kix_i2v077rod1nx-
6>li:before{content:"\0025cf "}.lst-kix_pyiocxf7nngd-3>li{counter-increment:lst
-ctn-kix_pyiocxf7nngd-3}.lst-kix_wzk0mdv2qg9u-3>li:before{content:"" counter(lst
-ctn-kix_wzk0mdv2qg9u-3,decimal) ". "}.lst-kix_8dg0b92yw51r-7>li{counter-increme
nt:lst-ctn-kix_8dg0b92yw51r-7}.lst-kix_4s9m9sikrtm7-0>li{counter-increment:lst-c
tn-kix_4s9m9sikrtm7-0}ol.lst-kix_kf08e4mo0q15-2.start{counter-reset:lst-ctn-kix_
kf08e4mo0q15-2 0}.lst-kix_2uog6ch44jpu-0>li:before{content:"" counter(lst-ctn-ki
x_2uog6ch44jpu-0,decimal) ". "}.lst-kix_uq748w6pjv3r-8>li{counter-increment:lst-
ctn-kix_uq748w6pjv3r-8}.lst-kix_t9jkz28ln50j-6>li{counter-increment:lst-ctn-kix_
t9jkz28ln50j-6}ol.lst-kix_60g29afx0lof-6.start{counter-reset:lst-ctn-kix_60g29af
x0lof-6 0}.lst-kix_m1x0qzeeadaz-8>li:before{content:"" counter(lst-ctn-kix_m1x0q
zeeadaz-8,lower-roman) ". "}.lst-kix_pa6lflf2amnu-2>li:before{content:"" counter
(lst-ctn-kix_pa6lflf2amnu-2,lower-roman) ". "}ol.lst-kix_p8a3u4ougab9-2.start{co
unter-reset:lst-ctn-kix_p8a3u4ougab9-2 0}.lst-kix_pza3ybm1wtg3-0>li{counter-incr
ement:lst-ctn-kix_pza3ybm1wtg3-0}.lst-kix_v454r7upbzuz-2>li{counter-increment:ls
t-ctn-kix_v454r7upbzuz-2}.lst-kix_1g0xzctl1vi-8>li{counter-increment:lst-ctn-kix
_1g0xzctl1vi-8}.lst-kix_lgtbofvz5zxd-3>li:before{content:"" counter(lst-ctn-kix_
lgtbofvz5zxd-3,decimal) ". "}.lst-kix_qz5wp1hdd24k-8>li{counter-increment:lst-ct
n-kix_qz5wp1hdd24k-8}ol.lst-kix_5f9palqqt4mm-2.start{counter-reset:lst-ctn-kix_5
f9palqqt4mm-2 0}ol.lst-kix_lixznqbqiris-6.start{counter-reset:lst-ctn-kix_lixznq
bqiris-6 0}.lst-kix_hvjet9voiiio-8>li{counter-increment:lst-ctn-kix_hvjet9voiiio
-8}.lst-kix_9tkaqbe3bnu3-2>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-2}.lst-
kix_pyiocxf7nngd-2>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-2}.lst-kix_qz5w
p1hdd24k-8>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-8,lower-roman)
". "}.lst-kix_p8a3u4ougab9-5>li:before{content:"" counter(lst-ctn-kix_p8a3u4ouga
b9-5,lower-roman) ". "}.lst-kix_m1x0qzeeadaz-1>li{counter-increment:lst-ctn-kix_
m1x0qzeeadaz-1}.lst-kix_hm47sef7muk-7>li{counter-increment:lst-ctn-kix_hm47sef7m
uk-7}ol.lst-kix_nho7sy6cpfv0-2.start{counter-reset:lst-ctn-kix_nho7sy6cpfv0-2 0}
ol.lst-kix_57tjkabqizo2-4.start{counter-reset:lst-ctn-kix_57tjkabqizo2-4 0}.lst-
kix_lixznqbqiris-8>li:before{content:"" counter(lst-ctn-kix_lixznqbqiris-8,lower
-roman) ". "}.lst-kix_hvjet9voiiio-3>li{counter-increment:lst-ctn-kix_hvjet9voii
io-3}ol.lst-kix_pyiocxf7nngd-6.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-6 0}
.lst-kix_uq748w6pjv3r-0>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-0,
decimal) ". "}.lst-kix_j51xhhtple7c-2>li{counter-increment:lst-ctn-kix_j51xhhtpl
e7c-2}.lst-kix_8dg0b92yw51r-6>li{counter-increment:lst-ctn-kix_8dg0b92yw51r-6}ol
.lst-kix_5f9palqqt4mm-5.start{counter-reset:lst-ctn-kix_5f9palqqt4mm-5 0}.lst-ki
x_m1x0qzeeadaz-8>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz-8}ol.lst-kix_32zx
nvl59py3-6.start{counter-reset:lst-ctn-kix_32zxnvl59py3-6 0}ol.lst-kix_m8zky1oy6
k60-2.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-2 0}.lst-kix_ggm78fckav5h-0>l
i:before{content:"" counter(lst-ctn-kix_ggm78fckav5h-0,decimal) ". "}ol.lst-kix_
jzpgxqq6fzzf-7.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-7 0}ol.lst-kix_jpf3c
r7xe1pc-5.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-5 0}ol.lst-kix_9tkaqbe3bn
u3-2.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-2 0}ol.lst-kix_z7in7d1ar2zt-6.
start{counter-reset:lst-ctn-kix_z7in7d1ar2zt-6 0}.lst-kix_5f9palqqt4mm-3>li:befo
re{content:"" counter(lst-ctn-kix_5f9palqqt4mm-3,decimal) ". "}.lst-kix_9tkaqbe3
bnu3-0>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-0}.lst-kix_t7any4lo9hoq-4>l
i:before{content:"\0025cb "}.lst-kix_nhaic9xr6pf-4>li:before{content:"" counter
(lst-ctn-kix_nhaic9xr6pf-4,lower-latin) ". "}.lst-kix_pyiocxf7nngd-5>li{counter-
increment:lst-ctn-kix_pyiocxf7nngd-5}.lst-kix_oqqzpe3b3nud-1>li:before{content:"
" counter(lst-ctn-kix_oqqzpe3b3nud-1,lower-latin) ". "}.lst-kix_fpxsljpyl73u-0>l
i:before{content:"\0025cf "}.lst-kix_m8zky1oy6k60-7>li:before{content:"" counte
r(lst-ctn-kix_m8zky1oy6k60-7,lower-latin) ". "}.lst-kix_32zxnvl59py3-4>li{counte
r-increment:lst-ctn-kix_32zxnvl59py3-4}.lst-kix_8uscekru9dbw-2>li:before{content
:"" counter(lst-ctn-kix_8uscekru9dbw-2,lower-roman) ". "}ol.lst-kix_4s9m9sikrtm7
-5.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-5 0}.lst-kix_7kmxmbi2lsws-3>li:b
efore{content:"" counter(lst-ctn-kix_7kmxmbi2lsws-3,decimal) ". "}.lst-kix_wzk0m
dv2qg9u-8>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-8}.lst-kix_kvgsl0s9rzo4-
0>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-0,decimal) ". "}.lst-kix
_vvzditg8sno-3>li:before{content:"\0025cf "}.lst-kix_fr6w5z45nvx0-3>li:before{c
ontent:"" counter(lst-ctn-kix_fr6w5z45nvx0-3,decimal) ". "}ol.lst-kix_nho7sy6cpf
v0-7.start{counter-reset:lst-ctn-kix_nho7sy6cpfv0-7 0}ol.lst-kix_fr6w5z45nvx0-6.
start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-6 0}ol.lst-kix_pza3ybm1wtg3-0.start
{counter-reset:lst-ctn-kix_pza3ybm1wtg3-0 0}.lst-kix_fr6w5z45nvx0-1>li{counter-i
ncrement:lst-ctn-kix_fr6w5z45nvx0-1}.lst-kix_1gqf2s78t7o1-2>li{counter-increment
:lst-ctn-kix_1gqf2s78t7o1-2}.lst-kix_bnpbicbhbbru-1>li:before{content:"\0025cb
"}ol.lst-kix_7kmxmbi2lsws-6.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws-6 0}.ls
t-kix_57tjkabqizo2-6>li:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-6,dec
imal) ". "}ol.lst-kix_1c0w7icorqz1-7.start{counter-reset:lst-ctn-kix_1c0w7icorqz
1-7 0}ol.lst-kix_9tkaqbe3bnu3-1.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-1 0
}ol.lst-kix_m1x0qzeeadaz-4.start{counter-reset:lst-ctn-kix_m1x0qzeeadaz-4 0}.lst
-kix_1gqf2s78t7o1-3>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-3,deci
mal) ". "}.lst-kix_m8zky1oy6k60-3>li:before{content:"" counter(lst-ctn-kix_m8zky
1oy6k60-3,decimal) ". "}.lst-kix_qz5wp1hdd24k-6>li:before{content:"" counter(lst
-ctn-kix_qz5wp1hdd24k-6,decimal) ". "}ol.lst-kix_m1x0qzeeadaz-7.start{counter-re
set:lst-ctn-kix_m1x0qzeeadaz-7 0}ol.lst-kix_hm47sef7muk-8.start{counter-reset:ls
t-ctn-kix_hm47sef7muk-8 0}.lst-kix_1c0w7icorqz1-7>li{counter-increment:lst-ctn-k
ix_1c0w7icorqz1-7}.lst-kix_ggm78fckav5h-4>li{counter-increment:lst-ctn-kix_ggm78
fckav5h-4}ol.lst-kix_vnvg10gwrc8t-1.start{counter-reset:lst-ctn-kix_vnvg10gwrc8t
-1 0}.lst-kix_lgtbofvz5zxd-2>li{counter-increment:lst-ctn-kix_lgtbofvz5zxd-2}.ls
t-kix_p8a3u4ougab9-3>li:before{content:"" counter(lst-ctn-kix_p8a3u4ougab9-3,dec
imal) ". "}ol.lst-kix_qz5wp1hdd24k-7.start{counter-reset:lst-ctn-kix_qz5wp1hdd24
k-7 0}.lst-kix_4s9m9sikrtm7-2>li:before{content:"" counter(lst-ctn-kix_4s9m9sikr
tm7-2,lower-roman) ". "}.lst-kix_1c0w7icorqz1-5>li:before{content:"" counter(lst
-ctn-kix_1c0w7icorqz1-5,lower-roman) ". "}.lst-kix_jzpgxqq6fzzf-7>li{counter-inc
rement:lst-ctn-kix_jzpgxqq6fzzf-7}.lst-kix_8dg0b92yw51r-2>li{counter-increment:l
st-ctn-kix_8dg0b92yw51r-2}.lst-kix_oqqzpe3b3nud-8>li:before{content:"" counter(l
st-ctn-kix_oqqzpe3b3nud-8,lower-roman) ". "}.lst-kix_9tkaqbe3bnu3-1>li:before{co
ntent:"" counter(lst-ctn-kix_9tkaqbe3bnu3-1,lower-latin) ". "}ol.lst-kix_jzpgxqq
6fzzf-4.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-4 0}.lst-kix_pyiocxf7nngd-1
>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-1}.lst-kix_i2v077rod1nx-7>li:befo
re{content:"\0025cb "}ol.lst-kix_32zxnvl59py3-2.start{counter-reset:lst-ctn-kix
_32zxnvl59py3-2 0}.lst-kix_4s9m9sikrtm7-5>li:before{content:"" counter(lst-ctn-k
ix_4s9m9sikrtm7-5,lower-roman) ". "}.lst-kix_pza3ybm1wtg3-5>li{counter-increment
:lst-ctn-kix_pza3ybm1wtg3-5}.lst-kix_j51xhhtple7c-5>li:before{content:"" counter
(lst-ctn-kix_j51xhhtple7c-5,lower-roman) ". "}.lst-kix_kf08e4mo0q15-1>li:before{
content:"" counter(lst-ctn-kix_kf08e4mo0q15-1,lower-latin) ". "}.lst-kix_2uog6ch
44jpu-8>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-8,lower-roman) ".
"}.lst-kix_8dg0b92yw51r-5>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-
5,lower-roman) ". "}.lst-kix_z7in7d1ar2zt-8>li:before{content:"" counter(lst-ctn
-kix_z7in7d1ar2zt-8,lower-roman) ". "}.lst-kix_1c0w7icorqz1-7>li:before{content:
"" counter(lst-ctn-kix_1c0w7icorqz1-7,lower-latin) ". "}.lst-kix_fpxsljpyl73u-2>
li:before{content:"\0025a0 "}.lst-kix_juntnht2kzza-8>li{counter-increment:lst-c
tn-kix_juntnht2kzza-8}.lst-kix_wzk0mdv2qg9u-0>li{counter-increment:lst-ctn-kix_w
zk0mdv2qg9u-0}.lst-kix_m1x0qzeeadaz-3>li{counter-increment:lst-ctn-kix_m1x0qzeea
daz-3}.lst-kix_lixznqbqiris-2>li{counter-increment:lst-ctn-kix_lixznqbqiris-2}.l
st-kix_a4uqy1hx9g3-1>li:before{content:"\0025cb "}.lst-kix_j51xhhtple7c-8>li:be
fore{content:"" counter(lst-ctn-kix_j51xhhtple7c-8,lower-roman) ". "}.lst-kix_1c
0w7icorqz1-6>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-6}ol.lst-kix_ggm78fck
av5h-2.start{counter-reset:lst-ctn-kix_ggm78fckav5h-2 0}ol.lst-kix_jpf3cr7xe1pc-
2.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-2 0}ol.lst-kix_8dg0b92yw51r-5.sta
rt{counter-reset:lst-ctn-kix_8dg0b92yw51r-5 0}.lst-kix_lgtbofvz5zxd-4>li:before{
content:"" counter(lst-ctn-kix_lgtbofvz5zxd-4,lower-latin) ". "}.lst-kix_7kmxmbi
2lsws-7>li{counter-increment:lst-ctn-kix_7kmxmbi2lsws-7}ol.lst-kix_2uog6ch44jpu-
2.start{counter-reset:lst-ctn-kix_2uog6ch44jpu-2 0}.lst-kix_ggm78fckav5h-6>li:be
fore{content:"" counter(lst-ctn-kix_ggm78fckav5h-6,decimal) ". "}.lst-kix_z7in7d
1ar2zt-2>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt-2}ol.lst-kix_1gqf2s78t7o1
-8.start{counter-reset:lst-ctn-kix_1gqf2s78t7o1-8 0}.lst-kix_a4uqy1hx9g3-7>li:be
fore{content:"\0025cb "}.lst-kix_57tjkabqizo2-7>li{counter-increment:lst-ctn-ki
x_57tjkabqizo2-7}.lst-kix_1g0xzctl1vi-0>li{counter-increment:lst-ctn-kix_1g0xzct
l1vi-0}.lst-kix_7kmxmbi2lsws-1>li{counter-increment:lst-ctn-kix_7kmxmbi2lsws-1}.
lst-kix_1g0xzctl1vi-4>li{counter-increment:lst-ctn-kix_1g0xzctl1vi-4}ol.lst-kix_
z7in7d1ar2zt-2.start{counter-reset:lst-ctn-kix_z7in7d1ar2zt-2 0}.lst-kix_qz5wp1h
dd24k-3>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-3,decimal) ". "}ol
.lst-kix_4s9m9sikrtm7-7.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-7 0}.lst-ki
x_1c0w7icorqz1-4>li:before{content:"" counter(lst-ctn-kix_1c0w7icorqz1-4,lower-l
atin) ". "}.lst-kix_pyiocxf7nngd-2>li:before{content:"" counter(lst-ctn-kix_pyio
cxf7nngd-2,lower-roman) ". "}.lst-kix_lixznqbqiris-6>li:before{content:"" counte
r(lst-ctn-kix_lixznqbqiris-6,decimal) ". "}.lst-kix_z7in7d1ar2zt-4>li{counter-in
crement:lst-ctn-kix_z7in7d1ar2zt-4}ol.lst-kix_lixznqbqiris-4.start{counter-reset
:lst-ctn-kix_lixznqbqiris-4 0}ol.lst-kix_1gqf2s78t7o1-1.start{counter-reset:lst-
ctn-kix_1gqf2s78t7o1-1 0}.lst-kix_pa6lflf2amnu-1>li{counter-increment:lst-ctn-ki
x_pa6lflf2amnu-1}ol.lst-kix_uq748w6pjv3r-8.start{counter-reset:lst-ctn-kix_uq748
w6pjv3r-8 0}.lst-kix_32zxnvl59py3-6>li{counter-increment:lst-ctn-kix_32zxnvl59py
3-6}.lst-kix_sgsi64vug03j-8>li:before{content:"" counter(lst-ctn-kix_sgsi64vug03
j-8,lower-roman) ". "}.lst-kix_dblgil8t24zy-3>li{counter-increment:lst-ctn-kix_d
blgil8t24zy-3}.lst-kix_m8zky1oy6k60-4>li:before{content:"" counter(lst-ctn-kix_m
8zky1oy6k60-4,lower-latin) ". "}.lst-kix_5f9palqqt4mm-1>li{counter-increment:lst
-ctn-kix_5f9palqqt4mm-1}ol.lst-kix_hm47sef7muk-0.start{counter-reset:lst-ctn-kix
_hm47sef7muk-0 0}.lst-kix_9tkaqbe3bnu3-3>li{counter-increment:lst-ctn-kix_9tkaqb
e3bnu3-3}.lst-kix_opzlp0rjj486-1>li{counter-increment:lst-ctn-kix_opzlp0rjj486-1
}.lst-kix_pa6lflf2amnu-4>li{counter-increment:lst-ctn-kix_pa6lflf2amnu-4}ol.lst-
kix_lgtbofvz5zxd-4.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-4 0}.lst-kix_z7i
n7d1ar2zt-0>li:before{content:"" counter(lst-ctn-kix_z7in7d1ar2zt-0,decimal) ".
"}ol.lst-kix_jzpgxqq6fzzf-1.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-1 0}.ls
t-kix_lgtbofvz5zxd-7>li:before{content:"" counter(lst-ctn-kix_lgtbofvz5zxd-7,low
er-latin) ". "}.lst-kix_ffvvlgzbuz30-2>li:before{content:"\0025a0 "}ol.lst-kix_
wzk0mdv2qg9u-3.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-3 0}.lst-kix_t9jkz28
ln50j-1>li{counter-increment:lst-ctn-kix_t9jkz28ln50j-1}ol.lst-kix_m8zky1oy6k60-
4.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-4 0}.lst-kix_jxeur1wnlj7y-8>li{co
unter-increment:lst-ctn-kix_jxeur1wnlj7y-8}ol.lst-kix_z7in7d1ar2zt-1.start{count
er-reset:lst-ctn-kix_z7in7d1ar2zt-1 0}.lst-kix_vvzditg8sno-2>li:before{content:"
\0025a0 "}ol.lst-kix_vnvg10gwrc8t-4.start{counter-reset:lst-ctn-kix_vnvg10gwrc8
t-4 0}ol.lst-kix_lixznqbqiris-5.start{counter-reset:lst-ctn-kix_lixznqbqiris-5 0
}ol.lst-kix_pa6lflf2amnu-2.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-2 0}ol.l
st-kix_3h1iswqv3l7s-1.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-1 0}.lst-kix_
pyiocxf7nngd-4>li:before{content:"" counter(lst-ctn-kix_pyiocxf7nngd-4,lower-lat
in) ". "}.lst-kix_1c0w7icorqz1-0>li:before{content:"" counter(lst-ctn-kix_1c0w7i
corqz1-0,decimal) ". "}.lst-kix_60g29afx0lof-0>li:before{content:"" counter(lst-
ctn-kix_60g29afx0lof-0,decimal) ". "}ol.lst-kix_7kmxmbi2lsws-0.start{counter-res
et:lst-ctn-kix_7kmxmbi2lsws-0 0}.lst-kix_wzk0mdv2qg9u-4>li{counter-increment:lst
-ctn-kix_wzk0mdv2qg9u-4}.lst-kix_t9jkz28ln50j-2>li{counter-increment:lst-ctn-kix
_t9jkz28ln50j-2}.lst-kix_jxeur1wnlj7y-4>li{counter-increment:lst-ctn-kix_jxeur1w
nlj7y-4}.lst-kix_nho7sy6cpfv0-1>li:before{content:"" counter(lst-ctn-kix_nho7sy6
cpfv0-1,lower-latin) ". "}.lst-kix_wzk0mdv2qg9u-3>li{counter-increment:lst-ctn-k
ix_wzk0mdv2qg9u-3}.lst-kix_kf08e4mo0q15-0>li{counter-increment:lst-ctn-kix_kf08e
4mo0q15-0}.lst-kix_v454r7upbzuz-6>li:before{content:"" counter(lst-ctn-kix_v454r
7upbzuz-6,decimal) ". "}.lst-kix_kvgsl0s9rzo4-3>li:before{content:"" counter(lst
-ctn-kix_kvgsl0s9rzo4-3,decimal) ". "}.lst-kix_32zxnvl59py3-1>li{counter-increme
nt:lst-ctn-kix_32zxnvl59py3-1}.lst-kix_nho7sy6cpfv0-4>li{counter-increment:lst-c
tn-kix_nho7sy6cpfv0-4}.lst-kix_2uog6ch44jpu-5>li{counter-increment:lst-ctn-kix_2
uog6ch44jpu-5}.lst-kix_7kmxmbi2lsws-3>li{counter-increment:lst-ctn-kix_7kmxmbi2l
sws-3}.lst-kix_qz5wp1hdd24k-6>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-6}.l
st-kix_a4uqy1hx9g3-8>li:before{content:"\0025a0 "}ol.lst-kix_60g29afx0lof-7.sta
rt{counter-reset:lst-ctn-kix_60g29afx0lof-7 0}.lst-kix_jxeur1wnlj7y-7>li{counter
-increment:lst-ctn-kix_jxeur1wnlj7y-7}.lst-kix_jzpgxqq6fzzf-3>li{counter-increme
nt:lst-ctn-kix_jzpgxqq6fzzf-3}ol.lst-kix_lixznqbqiris-7.start{counter-reset:lst-
ctn-kix_lixznqbqiris-7 0}ol.lst-kix_hvjet9voiiio-6.start{counter-reset:lst-ctn-k
ix_hvjet9voiiio-6 0}.lst-kix_pyiocxf7nngd-3>li:before{content:"" counter(lst-ctn
-kix_pyiocxf7nngd-3,decimal) ". "}.lst-kix_jzpgxqq6fzzf-3>li:before{content:"" c
ounter(lst-ctn-kix_jzpgxqq6fzzf-3,decimal) ". "}.lst-kix_pza3ybm1wtg3-4>li{count
er-increment:lst-ctn-kix_pza3ybm1wtg3-4}.lst-kix_oqqzpe3b3nud-5>li:before{conten
t:"" counter(lst-ctn-kix_oqqzpe3b3nud-5,lower-roman) ". "}.lst-kix_t9jkz28ln50j-
7>li:before{content:"" counter(lst-ctn-kix_t9jkz28ln50j-7,lower-latin) ". "}ol.l
st-kix_57tjkabqizo2-7.start{counter-reset:lst-ctn-kix_57tjkabqizo2-7 0}.lst-kix_
7kmxmbi2lsws-2>li:before{content:"" counter(lst-ctn-kix_7kmxmbi2lsws-2,lower-rom
an) ". "}.lst-kix_v454r7upbzuz-3>li{counter-increment:lst-ctn-kix_v454r7upbzuz-3
}ol.lst-kix_32zxnvl59py3-4.start{counter-reset:lst-ctn-kix_32zxnvl59py3-4 0}ol.l
st-kix_m8zky1oy6k60-3.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-3 0}.lst-kix_
v454r7upbzuz-5>li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-5,lower-rom
an) ". "}.lst-kix_pyiocxf7nngd-5>li:before{content:"" counter(lst-ctn-kix_pyiocx
f7nngd-5,lower-roman) ". "}ol.lst-kix_hvjet9voiiio-2.start{counter-reset:lst-ctn
-kix_hvjet9voiiio-2 0}.lst-kix_jpf3cr7xe1pc-6>li:before{content:"" counter(lst-c
tn-kix_jpf3cr7xe1pc-6,decimal) ". "}.lst-kix_3h1iswqv3l7s-8>li{counter-increment
:lst-ctn-kix_3h1iswqv3l7s-8}ol.lst-kix_wzk0mdv2qg9u-2.start{counter-reset:lst-ct
n-kix_wzk0mdv2qg9u-2 0}.lst-kix_5f9palqqt4mm-5>li:before{content:"" counter(lst-
ctn-kix_5f9palqqt4mm-5,lower-roman) ". "}ol.lst-kix_9tkaqbe3bnu3-4.start{counter
-reset:lst-ctn-kix_9tkaqbe3bnu3-4 0}.lst-kix_m1x0qzeeadaz-5>li:before{content:""
counter(lst-ctn-kix_m1x0qzeeadaz-5,lower-roman) ". "}ol.lst-kix_dblgil8t24zy-0.
start{counter-reset:lst-ctn-kix_dblgil8t24zy-0 0}ol.lst-kix_wzk0mdv2qg9u-6.start
{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-6 0}.lst-kix_nhaic9xr6pf-2>li:before{con
tent:"" counter(lst-ctn-kix_nhaic9xr6pf-2,lower-roman) ". "}.lst-kix_opzlp0rjj48
6-4>li:before{content:"" counter(lst-ctn-kix_opzlp0rjj486-4,lower-latin) ". "}.l
st-kix_uq748w6pjv3r-6>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-6,de
cimal) ". "}.lst-kix_qeukrmzdd856-6>li:before{content:"" counter(lst-ctn-kix_qeu
krmzdd856-6,decimal) ". "}ol.lst-kix_1c0w7icorqz1-2.start{counter-reset:lst-ctn-
kix_1c0w7icorqz1-2 0}.lst-kix_hm47sef7muk-8>li{counter-increment:lst-ctn-kix_hm4
7sef7muk-8}.lst-kix_hvjet9voiiio-7>li{counter-increment:lst-ctn-kix_hvjet9voiiio
-7}.lst-kix_nhaic9xr6pf-0>li{counter-increment:lst-ctn-kix_nhaic9xr6pf-0}ol.lst-
kix_kf08e4mo0q15-8.start{counter-reset:lst-ctn-kix_kf08e4mo0q15-8 0}ol.lst-kix_4
s9m9sikrtm7-1.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-1 0}.lst-kix_p8a3u4ou
gab9-4>li:before{content:"" counter(lst-ctn-kix_p8a3u4ougab9-4,lower-latin) ". "
}ol.lst-kix_jzpgxqq6fzzf-6.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-6 0}ol.l
st-kix_4s9m9sikrtm7-8.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-8 0}.lst-kix_
jxeur1wnlj7y-6>li{counter-increment:lst-ctn-kix_jxeur1wnlj7y-6}ol.lst-kix_pa6lfl
f2amnu-1.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-1 0}ol.lst-kix_qz5wp1hdd24
k-2.start{counter-reset:lst-ctn-kix_qz5wp1hdd24k-2 0}.lst-kix_2uog6ch44jpu-1>li{
counter-increment:lst-ctn-kix_2uog6ch44jpu-1}.lst-kix_kc6aimw8pnra-5>li:before{c
ontent:"\0025a0 "}.lst-kix_lixznqbqiris-4>li:before{content:"" counter(lst-ctn-
kix_lixznqbqiris-4,lower-latin) ". "}.lst-kix_jzpgxqq6fzzf-5>li{counter-incremen
t:lst-ctn-kix_jzpgxqq6fzzf-5}ol.lst-kix_jpf3cr7xe1pc-8.start{counter-reset:lst-c
tn-kix_jpf3cr7xe1pc-8 0}.lst-kix_ggm78fckav5h-2>li:before{content:"" counter(lst
-ctn-kix_ggm78fckav5h-2,lower-roman) ". "}.lst-kix_5f9palqqt4mm-0>li{counter-inc
rement:lst-ctn-kix_5f9palqqt4mm-0}ol.lst-kix_p8a3u4ougab9-6.start{counter-reset:
lst-ctn-kix_p8a3u4ougab9-6 0}.lst-kix_juntnht2kzza-1>li{counter-increment:lst-ct
n-kix_juntnht2kzza-1}ol.lst-kix_sgsi64vug03j-3.start{counter-reset:lst-ctn-kix_s
gsi64vug03j-3 0}ol.lst-kix_fr6w5z45nvx0-2.start{counter-reset:lst-ctn-kix_fr6w5z
45nvx0-2 0}.lst-kix_ggm78fckav5h-4>li:before{content:"" counter(lst-ctn-kix_ggm7
8fckav5h-4,lower-latin) ". "}.lst-kix_1gqf2s78t7o1-7>li{counter-increment:lst-ct
n-kix_1gqf2s78t7o1-7}.lst-kix_m8zky1oy6k60-0>li{counter-increment:lst-ctn-kix_m8
zky1oy6k60-0}.lst-kix_v454r7upbzuz-3>li:before{content:"" counter(lst-ctn-kix_v4
54r7upbzuz-3,decimal) ". "}.lst-kix_qeukrmzdd856-5>li{counter-increment:lst-ctn-
kix_qeukrmzdd856-5}.lst-kix_t9jkz28ln50j-8>li:before{content:"" counter(lst-ctn-
kix_t9jkz28ln50j-8,lower-roman) ". "}ol.lst-kix_pza3ybm1wtg3-6.start{counter-res
et:lst-ctn-kix_pza3ybm1wtg3-6 0}.lst-kix_juntnht2kzza-5>li:before{content:"" cou
nter(lst-ctn-kix_juntnht2kzza-5,lower-roman) ". "}.lst-kix_qz5wp1hdd24k-7>li{cou
nter-increment:lst-ctn-kix_qz5wp1hdd24k-7}.lst-kix_qeukrmzdd856-7>li{counter-inc
rement:lst-ctn-kix_qeukrmzdd856-7}.lst-kix_jxeur1wnlj7y-4>li:before{content:"" c
ounter(lst-ctn-kix_jxeur1wnlj7y-4,lower-latin) ". "}.lst-kix_kc6aimw8pnra-3>li:b
efore{content:"\0025cf "}ol.lst-kix_sgsi64vug03j-0.start{counter-reset:lst-ctn-
kix_sgsi64vug03j-0 0}.lst-kix_oqqzpe3b3nud-7>li{counter-increment:lst-ctn-kix_oq
qzpe3b3nud-7}.lst-kix_lgtbofvz5zxd-1>li:before{content:"" counter(lst-ctn-kix_lg
tbofvz5zxd-1,lower-latin) ". "}ol.lst-kix_t9jkz28ln50j-0.start{counter-reset:lst
-ctn-kix_t9jkz28ln50j-0 0}.lst-kix_t9jkz28ln50j-5>li{counter-increment:lst-ctn-k
ix_t9jkz28ln50j-5}.lst-kix_8uscekru9dbw-0>li{counter-increment:lst-ctn-kix_8usce
kru9dbw-0}ol.lst-kix_v454r7upbzuz-5.start{counter-reset:lst-ctn-kix_v454r7upbzuz
-5 0}.lst-kix_uq748w6pjv3r-4>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv
3r-4,lower-latin) ". "}.lst-kix_9tkaqbe3bnu3-7>li{counter-increment:lst-ctn-kix_
9tkaqbe3bnu3-7}ol.lst-kix_jzpgxqq6fzzf-5.start{counter-reset:lst-ctn-kix_jzpgxqq
6fzzf-5 0}.lst-kix_5f9palqqt4mm-1>li:before{content:"" counter(lst-ctn-kix_5f9pa
lqqt4mm-1,lower-latin) ". "}.lst-kix_ffvvlgzbuz30-7>li:before{content:"\0025cb
"}.lst-kix_pza3ybm1wtg3-3>li:before{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-
3,decimal) ". "}ol.lst-kix_5f9palqqt4mm-0.start{counter-reset:lst-ctn-kix_5f9pal
qqt4mm-0 0}.lst-kix_vnvg10gwrc8t-6>li:before{content:"" counter(lst-ctn-kix_vnvg
10gwrc8t-6,decimal) ". "}.lst-kix_a4uqy1hx9g3-6>li:before{content:"\0025cf "}.l
st-kix_3h1iswqv3l7s-5>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-5,lo
wer-roman) ". "}.lst-kix_7kmxmbi2lsws-7>li:before{content:"" counter(lst-ctn-kix
_7kmxmbi2lsws-7,lower-latin) ". "}.lst-kix_32zxnvl59py3-2>li{counter-increment:l
st-ctn-kix_32zxnvl59py3-2}ol.lst-kix_nho7sy6cpfv0-1.start{counter-reset:lst-ctn-
kix_nho7sy6cpfv0-1 0}.lst-kix_qeukrmzdd856-1>li{counter-increment:lst-ctn-kix_qe
ukrmzdd856-1}ol.lst-kix_1g0xzctl1vi-6.start{counter-reset:lst-ctn-kix_1g0xzctl1v
i-6 0}.lst-kix_qeukrmzdd856-0>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd
856-0,decimal) ". "}.lst-kix_oqqzpe3b3nud-6>li:before{content:"" counter(lst-ctn
-kix_oqqzpe3b3nud-6,decimal) ". "}.lst-kix_kf08e4mo0q15-7>li:before{content:"" c
ounter(lst-ctn-kix_kf08e4mo0q15-7,lower-latin) ". "}.lst-kix_v454r7upbzuz-4>li{c
ounter-increment:lst-ctn-kix_v454r7upbzuz-4}.lst-kix_vvzditg8sno-8>li:before{con
tent:"\0025a0 "}.lst-kix_m1x0qzeeadaz-0>li{counter-increment:lst-ctn-kix_m1x0qz
eeadaz-0}ol.lst-kix_32zxnvl59py3-5.start{counter-reset:lst-ctn-kix_32zxnvl59py3-
5 0}.lst-kix_pyiocxf7nngd-7>li:before{content:"" counter(lst-ctn-kix_pyiocxf7nng
d-7,lower-latin) ". "}ol.lst-kix_z7in7d1ar2zt-0.start{counter-reset:lst-ctn-kix_
z7in7d1ar2zt-0 0}.lst-kix_ffvvlgzbuz30-4>li:before{content:"\0025cb "}.lst-kix_
1g0xzctl1vi-0>li:before{content:"" counter(lst-ctn-kix_1g0xzctl1vi-0,decimal) ".
"}ol.lst-kix_7kmxmbi2lsws-4.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws-4 0}.l
st-kix_bnpbicbhbbru-8>li:before{content:"\0025a0 "}ol.lst-kix_8uscekru9dbw-5.st
art{counter-reset:lst-ctn-kix_8uscekru9dbw-5 0}ol.lst-kix_qeukrmzdd856-0.start{c
ounter-reset:lst-ctn-kix_qeukrmzdd856-0 0}.lst-kix_4s9m9sikrtm7-7>li{counter-inc
rement:lst-ctn-kix_4s9m9sikrtm7-7}.lst-kix_pa6lflf2amnu-6>li{counter-increment:l
st-ctn-kix_pa6lflf2amnu-6}ol.lst-kix_sgsi64vug03j-4.start{counter-reset:lst-ctn-
kix_sgsi64vug03j-4 0}.lst-kix_8uscekru9dbw-1>li{counter-increment:lst-ctn-kix_8u
scekru9dbw-1}ol.lst-kix_nhaic9xr6pf-3.start{counter-reset:lst-ctn-kix_nhaic9xr6p
f-3 0}ol.lst-kix_qeukrmzdd856-3.start{counter-reset:lst-ctn-kix_qeukrmzdd856-3 0
}.lst-kix_vnvg10gwrc8t-8>li{counter-increment:lst-ctn-kix_vnvg10gwrc8t-8}ol.lst-
kix_uq748w6pjv3r-4.start{counter-reset:lst-ctn-kix_uq748w6pjv3r-4 0}ol.lst-kix_d
blgil8t24zy-8.start{counter-reset:lst-ctn-kix_dblgil8t24zy-8 0}.lst-kix_8uscekru
9dbw-7>li:before{content:"" counter(lst-ctn-kix_8uscekru9dbw-7,lower-latin) ". "
}.lst-kix_q1b5wk7cmirb-3>li:before{content:"\0025cf "}.lst-kix_hm47sef7muk-7>li
:before{content:"" counter(lst-ctn-kix_hm47sef7muk-7,lower-latin) ". "}.lst-kix_
iqyc5gy523tq-7>li:before{content:"\0025cb "}ol.lst-kix_vnvg10gwrc8t-8.start{cou
nter-reset:lst-ctn-kix_vnvg10gwrc8t-8 0}.lst-kix_pa6lflf2amnu-5>li:before{conten
t:"" counter(lst-ctn-kix_pa6lflf2amnu-5,lower-roman) ". "}.lst-kix_vvzditg8sno-5
>li:before{content:"\0025a0 "}.lst-kix_57tjkabqizo2-6>li{counter-increment:lst-
ctn-kix_57tjkabqizo2-6}.lst-kix_opzlp0rjj486-0>li{counter-increment:lst-ctn-kix_
opzlp0rjj486-0}.lst-kix_jzpgxqq6fzzf-6>li{counter-increment:lst-ctn-kix_jzpgxqq6
fzzf-6}.lst-kix_m1x0qzeeadaz-1>li:before{content:"" counter(lst-ctn-kix_m1x0qzee
adaz-1,lower-latin) ". "}.lst-kix_nhaic9xr6pf-2>li{counter-increment:lst-ctn-kix
_nhaic9xr6pf-2}.lst-kix_t9jkz28ln50j-2>li:before{content:"" counter(lst-ctn-kix_
t9jkz28ln50j-2,lower-roman) ". "}ol.lst-kix_8dg0b92yw51r-1.start{counter-reset:l
st-ctn-kix_8dg0b92yw51r-1 0}ol.lst-kix_j51xhhtple7c-4.start{counter-reset:lst-ct
n-kix_j51xhhtple7c-4 0}.lst-kix_wzk0mdv2qg9u-5>li{counter-increment:lst-ctn-kix_
wzk0mdv2qg9u-5}.lst-kix_kc6aimw8pnra-4>li:before{content:"\0025cb "}.lst-kix_j5
1xhhtple7c-7>li{counter-increment:lst-ctn-kix_j51xhhtple7c-7}.lst-kix_3h1iswqv3l
7s-6>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-6,decimal) ". "}ol.ls
t-kix_m1x0qzeeadaz-0.start{counter-reset:lst-ctn-kix_m1x0qzeeadaz-0 0}.lst-kix_h
m47sef7muk-2>li{counter-increment:lst-ctn-kix_hm47sef7muk-2}.lst-kix_ggm78fckav5
h-2>li{counter-increment:lst-ctn-kix_ggm78fckav5h-2}.lst-kix_m8zky1oy6k60-1>li{c
ounter-increment:lst-ctn-kix_m8zky1oy6k60-1}ol.lst-kix_z7in7d1ar2zt-8.start{coun
ter-reset:lst-ctn-kix_z7in7d1ar2zt-8 0}.lst-kix_1c0w7icorqz1-5>li{counter-increm
ent:lst-ctn-kix_1c0w7icorqz1-5}ol.lst-kix_kvgsl0s9rzo4-0.start{counter-reset:lst
-ctn-kix_kvgsl0s9rzo4-0 0}.lst-kix_3h1iswqv3l7s-1>li:before{content:"" counter(l
st-ctn-kix_3h1iswqv3l7s-1,lower-latin) ". "}.lst-kix_juntnht2kzza-2>li{counter-i
ncrement:lst-ctn-kix_juntnht2kzza-2}ol.lst-kix_opzlp0rjj486-4.start{counter-rese
t:lst-ctn-kix_opzlp0rjj486-4 0}ol.lst-kix_2uog6ch44jpu-0.start{counter-reset:lst
-ctn-kix_2uog6ch44jpu-0 0}.lst-kix_1c0w7icorqz1-1>li:before{content:"" counter(l
st-ctn-kix_1c0w7icorqz1-1,lower-latin) ". "}.lst-kix_m1x0qzeeadaz-6>li{counter-i
ncrement:lst-ctn-kix_m1x0qzeeadaz-6}.lst-kix_jzpgxqq6fzzf-0>li:before{content:""
counter(lst-ctn-kix_jzpgxqq6fzzf-0,decimal) ". "}.lst-kix_wzk0mdv2qg9u-6>li:bef
ore{content:"" counter(lst-ctn-kix_wzk0mdv2qg9u-6,decimal) ". "}.lst-kix_kf08e4m
o0q15-8>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-8,lower-roman) ".
"}.lst-kix_lgtbofvz5zxd-5>li:before{content:"" counter(lst-ctn-kix_lgtbofvz5zxd-
5,lower-roman) ". "}ol.lst-kix_7kmxmbi2lsws-8.start{counter-reset:lst-ctn-kix_7k
mxmbi2lsws-8 0}.lst-kix_v454r7upbzuz-1>li{counter-increment:lst-ctn-kix_v454r7up
bzuz-1}.lst-kix_lgtbofvz5zxd-4>li{counter-increment:lst-ctn-kix_lgtbofvz5zxd-4}.
lst-kix_1gqf2s78t7o1-1>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-1,l
ower-latin) ". "}ol.lst-kix_60g29afx0lof-2.start{counter-reset:lst-ctn-kix_60g29
afx0lof-2 0}ol.lst-kix_v454r7upbzuz-4.start{counter-reset:lst-ctn-kix_v454r7upbz
uz-4 0}ol.lst-kix_qeukrmzdd856-1.start{counter-reset:lst-ctn-kix_qeukrmzdd856-1
0}ol.lst-kix_pyiocxf7nngd-3.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-3 0}.ls
t-kix_q1b5wk7cmirb-6>li:before{content:"\0025cf "}ol.lst-kix_jxeur1wnlj7y-3.sta
rt{counter-reset:lst-ctn-kix_jxeur1wnlj7y-3 0}.lst-kix_ggm78fckav5h-0>li{counter
-increment:lst-ctn-kix_ggm78fckav5h-0}.lst-kix_lgtbofvz5zxd-3>li{counter-increme
nt:lst-ctn-kix_lgtbofvz5zxd-3}.lst-kix_3h1iswqv3l7s-5>li{counter-increment:lst-c
tn-kix_3h1iswqv3l7s-5}ol.lst-kix_j51xhhtple7c-8.start{counter-reset:lst-ctn-kix_
j51xhhtple7c-8 0}ol.lst-kix_8uscekru9dbw-4.start{counter-reset:lst-ctn-kix_8usce
kru9dbw-4 0}.lst-kix_2uog6ch44jpu-4>li{counter-increment:lst-ctn-kix_2uog6ch44jp
u-4}.lst-kix_sgsi64vug03j-2>li{counter-increment:lst-ctn-kix_sgsi64vug03j-2}.lst
-kix_v454r7upbzuz-8>li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-8,lowe
r-roman) ". "}.lst-kix_hm47sef7muk-8>li:before{content:"" counter(lst-ctn-kix_hm
47sef7muk-8,lower-roman) ". "}.lst-kix_pyiocxf7nngd-8>li:before{content:"" count
er(lst-ctn-kix_pyiocxf7nngd-8,lower-roman) ". "}ol.lst-kix_3h1iswqv3l7s-3.start{
counter-reset:lst-ctn-kix_3h1iswqv3l7s-3 0}.lst-kix_3h1iswqv3l7s-1>li{counter-in
crement:lst-ctn-kix_3h1iswqv3l7s-1}ol.lst-kix_8dg0b92yw51r-2.start{counter-reset
:lst-ctn-kix_8dg0b92yw51r-2 0}.lst-kix_1g0xzctl1vi-6>li:before{content:"" counte
r(lst-ctn-kix_1g0xzctl1vi-6,decimal) ". "}.lst-kix_pyiocxf7nngd-1>li:before{cont
ent:"" counter(lst-ctn-kix_pyiocxf7nngd-1,lower-latin) ". "}.lst-kix_32zxnvl59py
3-7>li{counter-increment:lst-ctn-kix_32zxnvl59py3-7}.lst-kix_bnpbicbhbbru-6>li:b
efore{content:"\0025cf "}ol.lst-kix_1c0w7icorqz1-6.start{counter-reset:lst-ctn-
kix_1c0w7icorqz1-6 0}.lst-kix_bnpbicbhbbru-3>li:before{content:"\0025cf "}.lst-
kix_bnpbicbhbbru-4>li:before{content:"\0025cb "}.lst-kix_kc6aimw8pnra-6>li:befo
re{content:"\0025cf "}ol.lst-kix_jxeur1wnlj7y-1.start{counter-reset:lst-ctn-kix
_jxeur1wnlj7y-1 0}.lst-kix_nho7sy6cpfv0-7>li{counter-increment:lst-ctn-kix_nho7s
y6cpfv0-7}.lst-kix_jxeur1wnlj7y-3>li:before{content:"" counter(lst-ctn-kix_jxeur
1wnlj7y-3,decimal) ". "}.lst-kix_j51xhhtple7c-7>li:before{content:"" counter(lst
-ctn-kix_j51xhhtple7c-7,lower-latin) ". "}ol.lst-kix_v454r7upbzuz-6.start{counte
r-reset:lst-ctn-kix_v454r7upbzuz-6 0}ol.lst-kix_pyiocxf7nngd-2.start{counter-res
et:lst-ctn-kix_pyiocxf7nngd-2 0}.lst-kix_hvjet9voiiio-5>li{counter-increment:lst
-ctn-kix_hvjet9voiiio-5}.lst-kix_2uog6ch44jpu-1>li:before{content:"" counter(lst
-ctn-kix_2uog6ch44jpu-1,lower-latin) ". "}.lst-kix_z7in7d1ar2zt-1>li:before{cont
ent:"" counter(lst-ctn-kix_z7in7d1ar2zt-1,lower-latin) ". "}.lst-kix_nhaic9xr6pf
-8>li:before{content:"" counter(lst-ctn-kix_nhaic9xr6pf-8,lower-roman) ". "}.lst
-kix_qeukrmzdd856-1>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-1,lowe
r-latin) ". "}ol.lst-kix_fr6w5z45nvx0-8.start{counter-reset:lst-ctn-kix_fr6w5z45
nvx0-8 0}.lst-kix_i2v077rod1nx-0>li:before{content:"\0025cf "}.lst-kix_9tkaqbe3
bnu3-7>li:before{content:"" counter(lst-ctn-kix_9tkaqbe3bnu3-7,lower-latin) ". "
}ol.lst-kix_ggm78fckav5h-8.start{counter-reset:lst-ctn-kix_ggm78fckav5h-8 0}ol.l
st-kix_8dg0b92yw51r-8.start{counter-reset:lst-ctn-kix_8dg0b92yw51r-8 0}.lst-kix_
dblgil8t24zy-0>li:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-0,decimal)
". "}ol.lst-kix_v454r7upbzuz-8.start{counter-reset:lst-ctn-kix_v454r7upbzuz-8 0}
ol.lst-kix_hvjet9voiiio-5.start{counter-reset:lst-ctn-kix_hvjet9voiiio-5 0}.lst-
kix_a4uqy1hx9g3-5>li:before{content:"\0025a0 "}.lst-kix_57tjkabqizo2-1>li:befor
e{content:"" counter(lst-ctn-kix_57tjkabqizo2-1,lower-latin) ". "}.lst-kix_1gqf2
s78t7o1-1>li{counter-increment:lst-ctn-kix_1gqf2s78t7o1-1}ol.lst-kix_jxeur1wnlj7
y-7.start{counter-reset:lst-ctn-kix_jxeur1wnlj7y-7 0}ol.lst-kix_juntnht2kzza-4.s
tart{counter-reset:lst-ctn-kix_juntnht2kzza-4 0}ol.lst-kix_jzpgxqq6fzzf-0.start{
counter-reset:lst-ctn-kix_jzpgxqq6fzzf-0 0}ol.lst-kix_uq748w6pjv3r-0.start{count
er-reset:lst-ctn-kix_uq748w6pjv3r-0 0}ol.lst-kix_ggm78fckav5h-6.start{counter-re
set:lst-ctn-kix_ggm78fckav5h-6 0}.lst-kix_vnvg10gwrc8t-6>li{counter-increment:ls
t-ctn-kix_vnvg10gwrc8t-6}.lst-kix_j51xhhtple7c-6>li{counter-increment:lst-ctn-ki
x_j51xhhtple7c-6}ol.lst-kix_1g0xzctl1vi-8.start{counter-reset:lst-ctn-kix_1g0xzc
tl1vi-8 0}.lst-kix_9tkaqbe3bnu3-6>li:before{content:"" counter(lst-ctn-kix_9tkaq
be3bnu3-6,decimal) ". "}ol.lst-kix_8uscekru9dbw-7.start{counter-reset:lst-ctn-ki
x_8uscekru9dbw-7 0}.lst-kix_t9jkz28ln50j-0>li:before{content:"" counter(lst-ctn-
kix_t9jkz28ln50j-0,decimal) ". "}ol.lst-kix_dblgil8t24zy-3.start{counter-reset:l
st-ctn-kix_dblgil8t24zy-3 0}.lst-kix_p8a3u4ougab9-1>li:before{content:"" counter
(lst-ctn-kix_p8a3u4ougab9-1,lower-latin) ". "}ol.lst-kix_m1x0qzeeadaz-1.start{co
unter-reset:lst-ctn-kix_m1x0qzeeadaz-1 0}.lst-kix_60g29afx0lof-5>li:before{conte
nt:"" counter(lst-ctn-kix_60g29afx0lof-5,lower-roman) ". "}ol.lst-kix_j51xhhtple
7c-5.start{counter-reset:lst-ctn-kix_j51xhhtple7c-5 0}.lst-kix_5f9palqqt4mm-7>li
:before{content:"" counter(lst-ctn-kix_5f9palqqt4mm-7,lower-latin) ". "}.lst-kix
_vnvg10gwrc8t-3>li:before{content:"" counter(lst-ctn-kix_vnvg10gwrc8t-3,decimal)
". "}ol.lst-kix_sgsi64vug03j-8.start{counter-reset:lst-ctn-kix_sgsi64vug03j-8 0
}ol.lst-kix_z7in7d1ar2zt-7.start{counter-reset:lst-ctn-kix_z7in7d1ar2zt-7 0}ol.l
st-kix_t9jkz28ln50j-2.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-2 0}.lst-kix_
8uscekru9dbw-4>li:before{content:"" counter(lst-ctn-kix_8uscekru9dbw-4,lower-lat
in) ". "}.lst-kix_kvgsl0s9rzo4-1>li:before{content:"" counter(lst-ctn-kix_kvgsl0
s9rzo4-1,lower-latin) ". "}.lst-kix_qeukrmzdd856-6>li{counter-increment:lst-ctn-
kix_qeukrmzdd856-6}.lst-kix_t7any4lo9hoq-6>li:before{content:"\0025cf "}ol.lst-
kix_pyiocxf7nngd-0.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-0 0}.lst-kix_9tk
aqbe3bnu3-5>li:before{content:"" counter(lst-ctn-kix_9tkaqbe3bnu3-5,lower-roman)
". "}.lst-kix_nhaic9xr6pf-4>li{counter-increment:lst-ctn-kix_nhaic9xr6pf-4}.lst
-kix_lgtbofvz5zxd-2>li:before{content:"" counter(lst-ctn-kix_lgtbofvz5zxd-2,lowe
r-roman) ". "}.lst-kix_bnpbicbhbbru-0>li:before{content:"\0025cf "}.lst-kix_8us
cekru9dbw-4>li{counter-increment:lst-ctn-kix_8uscekru9dbw-4}.lst-kix_hvjet9voiii
o-2>li{counter-increment:lst-ctn-kix_hvjet9voiiio-2}ol.lst-kix_m8zky1oy6k60-6.st
art{counter-reset:lst-ctn-kix_m8zky1oy6k60-6 0}ol.lst-kix_p8a3u4ougab9-8.start{c
ounter-reset:lst-ctn-kix_p8a3u4ougab9-8 0}.lst-kix_juntnht2kzza-6>li{counter-inc
rement:lst-ctn-kix_juntnht2kzza-6}.lst-kix_oqqzpe3b3nud-2>li:before{content:"" c
ounter(lst-ctn-kix_oqqzpe3b3nud-2,lower-roman) ". "}.lst-kix_60g29afx0lof-8>li:b
efore{content:"" counter(lst-ctn-kix_60g29afx0lof-8,lower-roman) ". "}ol.lst-kix
_qeukrmzdd856-8.start{counter-reset:lst-ctn-kix_qeukrmzdd856-8 0}.lst-kix_nho7sy
6cpfv0-6>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-6,decimal) ". "}o
l.lst-kix_uq748w6pjv3r-7.start{counter-reset:lst-ctn-kix_uq748w6pjv3r-7 0}.lst-k
ix_uq748w6pjv3r-2>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-2,lower-
roman) ". "}.lst-kix_8uscekru9dbw-8>li:before{content:"" counter(lst-ctn-kix_8us
cekru9dbw-8,lower-roman) ". "}ol.lst-kix_kvgsl0s9rzo4-8.start{counter-reset:lst-
ctn-kix_kvgsl0s9rzo4-8 0}.lst-kix_m8zky1oy6k60-8>li:before{content:"" counter(ls
t-ctn-kix_m8zky1oy6k60-8,lower-roman) ". "}ol.lst-kix_uq748w6pjv3r-6.start{count
er-reset:lst-ctn-kix_uq748w6pjv3r-6 0}ol.lst-kix_kvgsl0s9rzo4-5.start{counter-re
set:lst-ctn-kix_kvgsl0s9rzo4-5 0}.lst-kix_2uog6ch44jpu-4>li:before{content:"" co
unter(lst-ctn-kix_2uog6ch44jpu-4,lower-latin) ". "}.lst-kix_p8a3u4ougab9-1>li{co
unter-increment:lst-ctn-kix_p8a3u4ougab9-1}.lst-kix_7kmxmbi2lsws-0>li:before{con
tent:"" counter(lst-ctn-kix_7kmxmbi2lsws-0,decimal) ". "}.lst-kix_a4uqy1hx9g3-3>
li:before{content:"\0025cf "}ol.lst-kix_hm47sef7muk-3.start{counter-reset:lst-c
tn-kix_hm47sef7muk-3 0}ol.lst-kix_vnvg10gwrc8t-5.start{counter-reset:lst-ctn-kix
_vnvg10gwrc8t-5 0}ol.lst-kix_9tkaqbe3bnu3-3.start{counter-reset:lst-ctn-kix_9tka
qbe3bnu3-3 0}.lst-kix_60g29afx0lof-2>li{counter-increment:lst-ctn-kix_60g29afx0l
of-2}.lst-kix_nho7sy6cpfv0-2>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpf
v0-2,lower-roman) ". "}ol.lst-kix_sgsi64vug03j-6.start{counter-reset:lst-ctn-kix
_sgsi64vug03j-6 0}.lst-kix_jpf3cr7xe1pc-8>li{counter-increment:lst-ctn-kix_jpf3c
r7xe1pc-8}.lst-kix_nhaic9xr6pf-8>li{counter-increment:lst-ctn-kix_nhaic9xr6pf-8}
ol.lst-kix_opzlp0rjj486-5.start{counter-reset:lst-ctn-kix_opzlp0rjj486-5 0}.lst-
kix_32zxnvl59py3-6>li:before{content:"" counter(lst-ctn-kix_32zxnvl59py3-6,decim
al) ". "}.lst-kix_ggm78fckav5h-5>li:before{content:"" counter(lst-ctn-kix_ggm78f
ckav5h-5,lower-roman) ". "}ol.lst-kix_opzlp0rjj486-3.start{counter-reset:lst-ctn
-kix_opzlp0rjj486-3 0}.lst-kix_uq748w6pjv3r-0>li{counter-increment:lst-ctn-kix_u
q748w6pjv3r-0}ol.lst-kix_lgtbofvz5zxd-0.start{counter-reset:lst-ctn-kix_lgtbofvz
5zxd-0 0}.lst-kix_lixznqbqiris-4>li{counter-increment:lst-ctn-kix_lixznqbqiris-4
}ol.lst-kix_2uog6ch44jpu-5.start{counter-reset:lst-ctn-kix_2uog6ch44jpu-5 0}.lst
-kix_pa6lflf2amnu-3>li{counter-increment:lst-ctn-kix_pa6lflf2amnu-3}.lst-kix_1c0
w7icorqz1-0>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-0}.lst-kix_z7in7d1ar2z
t-3>li:before{content:"" counter(lst-ctn-kix_z7in7d1ar2zt-3,decimal) ". "}.lst-k
ix_wzk0mdv2qg9u-0>li:before{content:"" counter(lst-ctn-kix_wzk0mdv2qg9u-0,decima
l) ". "}.lst-kix_m1x0qzeeadaz-2>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz-2}
.lst-kix_vvzditg8sno-0>li:before{content:"\0025cf "}.lst-kix_1g0xzctl1vi-1>li:b
efore{content:"" counter(lst-ctn-kix_1g0xzctl1vi-1,lower-latin) ". "}.lst-kix_a4
uqy1hx9g3-0>li:before{content:"\0025cf "}ol.lst-kix_1g0xzctl1vi-3.start{counter
-reset:lst-ctn-kix_1g0xzctl1vi-3 0}.lst-kix_fr6w5z45nvx0-5>li:before{content:""
counter(lst-ctn-kix_fr6w5z45nvx0-5,lower-roman) ". "}.lst-kix_fpxsljpyl73u-3>li:
before{content:"\0025cf "}.lst-kix_1g0xzctl1vi-1>li{counter-increment:lst-ctn-k
ix_1g0xzctl1vi-1}.lst-kix_7kmxmbi2lsws-2>li{counter-increment:lst-ctn-kix_7kmxmb
i2lsws-2}ol.lst-kix_3h1iswqv3l7s-5.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-
5 0}ol.lst-kix_m1x0qzeeadaz-6.start{counter-reset:lst-ctn-kix_m1x0qzeeadaz-6 0}.
lst-kix_t9jkz28ln50j-1>li:before{content:"" counter(lst-ctn-kix_t9jkz28ln50j-1,l
ower-latin) ". "}ol.lst-kix_lgtbofvz5zxd-5.start{counter-reset:lst-ctn-kix_lgtbo
fvz5zxd-5 0}ol.lst-kix_5f9palqqt4mm-3.start{counter-reset:lst-ctn-kix_5f9palqqt4
mm-3 0}.lst-kix_32zxnvl59py3-5>li{counter-increment:lst-ctn-kix_32zxnvl59py3-5}o
l.lst-kix_2uog6ch44jpu-3.start{counter-reset:lst-ctn-kix_2uog6ch44jpu-3 0}.lst-k
ix_nho7sy6cpfv0-8>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-8,lower-
roman) ". "}.lst-kix_4s9m9sikrtm7-8>li:before{content:"" counter(lst-ctn-kix_4s9
m9sikrtm7-8,lower-roman) ". "}.lst-kix_wzk0mdv2qg9u-5>li:before{content:"" count
er(lst-ctn-kix_wzk0mdv2qg9u-5,lower-roman) ". "}ol.lst-kix_nhaic9xr6pf-4.start{c
ounter-reset:lst-ctn-kix_nhaic9xr6pf-4 0}.lst-kix_opzlp0rjj486-2>li{counter-incr
ement:lst-ctn-kix_opzlp0rjj486-2}.lst-kix_kf08e4mo0q15-5>li{counter-increment:ls
t-ctn-kix_kf08e4mo0q15-5}.lst-kix_8uscekru9dbw-3>li:before{content:"" counter(ls
t-ctn-kix_8uscekru9dbw-3,decimal) ". "}ol.lst-kix_qeukrmzdd856-2.start{counter-r
eset:lst-ctn-kix_qeukrmzdd856-2 0}ol.lst-kix_qz5wp1hdd24k-4.start{counter-reset:
lst-ctn-kix_qz5wp1hdd24k-4 0}ol.lst-kix_dblgil8t24zy-4.start{counter-reset:lst-c
tn-kix_dblgil8t24zy-4 0}.lst-kix_juntnht2kzza-3>li{counter-increment:lst-ctn-kix
_juntnht2kzza-3}.lst-kix_57tjkabqizo2-4>li:before{content:"" counter(lst-ctn-kix
_57tjkabqizo2-4,lower-latin) ". "}ol.lst-kix_3h1iswqv3l7s-2.start{counter-reset:
lst-ctn-kix_3h1iswqv3l7s-2 0}ol.lst-kix_8dg0b92yw51r-4.start{counter-reset:lst-c
tn-kix_8dg0b92yw51r-4 0}ol.lst-kix_wzk0mdv2qg9u-8.start{counter-reset:lst-ctn-ki
x_wzk0mdv2qg9u-8 0}.lst-kix_60g29afx0lof-5>li{counter-increment:lst-ctn-kix_60g2
9afx0lof-5}ol.lst-kix_lixznqbqiris-8.start{counter-reset:lst-ctn-kix_lixznqbqiri
s-8 0}ol.lst-kix_60g29afx0lof-5.start{counter-reset:lst-ctn-kix_60g29afx0lof-5 0
}.lst-kix_qz5wp1hdd24k-2>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-2
,lower-roman) ". "}.lst-kix_juntnht2kzza-7>li{counter-increment:lst-ctn-kix_junt
nht2kzza-7}ol.lst-kix_m1x0qzeeadaz-2.start{counter-reset:lst-ctn-kix_m1x0qzeeada
z-2 0}ol.lst-kix_1c0w7icorqz1-3.start{counter-reset:lst-ctn-kix_1c0w7icorqz1-3 0
}.lst-kix_5f9palqqt4mm-0>li:before{content:"" counter(lst-ctn-kix_5f9palqqt4mm-0
,decimal) ". "}ol.lst-kix_7kmxmbi2lsws-2.start{counter-reset:lst-ctn-kix_7kmxmbi
2lsws-2 0}.lst-kix_8dg0b92yw51r-1>li{counter-increment:lst-ctn-kix_8dg0b92yw51r-
1}.lst-kix_a4uqy1hx9g3-4>li:before{content:"\0025cb "}.lst-kix_v454r7upbzuz-7>l
i{counter-increment:lst-ctn-kix_v454r7upbzuz-7}ol.lst-kix_pyiocxf7nngd-8.start{c
ounter-reset:lst-ctn-kix_pyiocxf7nngd-8 0}.lst-kix_60g29afx0lof-0>li{counter-inc
rement:lst-ctn-kix_60g29afx0lof-0}.lst-kix_fr6w5z45nvx0-4>li:before{content:"" c
ounter(lst-ctn-kix_fr6w5z45nvx0-4,lower-latin) ". "}.lst-kix_kf08e4mo0q15-6>li{c
ounter-increment:lst-ctn-kix_kf08e4mo0q15-6}.lst-kix_uq748w6pjv3r-2>li{counter-i
ncrement:lst-ctn-kix_uq748w6pjv3r-2}ol.lst-kix_57tjkabqizo2-6.start{counter-rese
t:lst-ctn-kix_57tjkabqizo2-6 0}ol.lst-kix_3h1iswqv3l7s-7.start{counter-reset:lst
-ctn-kix_3h1iswqv3l7s-7 0}ol.lst-kix_uq748w6pjv3r-2.start{counter-reset:lst-ctn-
kix_uq748w6pjv3r-2 0}.lst-kix_jpf3cr7xe1pc-6>li{counter-increment:lst-ctn-kix_jp
f3cr7xe1pc-6}.lst-kix_opzlp0rjj486-3>li:before{content:"" counter(lst-ctn-kix_op
zlp0rjj486-3,decimal) ". "}.lst-kix_kvgsl0s9rzo4-1>li{counter-increment:lst-ctn-
kix_kvgsl0s9rzo4-1}.lst-kix_juntnht2kzza-4>li:before{content:"" counter(lst-ctn-
kix_juntnht2kzza-4,lower-latin) ". "}ol.lst-kix_lgtbofvz5zxd-2.start{counter-res
et:lst-ctn-kix_lgtbofvz5zxd-2 0}ol.lst-kix_dblgil8t24zy-1.start{counter-reset:ls
t-ctn-kix_dblgil8t24zy-1 0}.lst-kix_7kmxmbi2lsws-4>li:before{content:"" counter(
lst-ctn-kix_7kmxmbi2lsws-4,lower-latin) ". "}.lst-kix_jxeur1wnlj7y-0>li:before{c
ontent:"" counter(lst-ctn-kix_jxeur1wnlj7y-0,decimal) ". "}.lst-kix_fr6w5z45nvx0
-1>li:before{content:"" counter(lst-ctn-kix_fr6w5z45nvx0-1,lower-latin) ". "}ol.
lst-kix_oqqzpe3b3nud-3.start{counter-reset:lst-ctn-kix_oqqzpe3b3nud-3 0}ol.lst-k
ix_kf08e4mo0q15-6.start{counter-reset:lst-ctn-kix_kf08e4mo0q15-6 0}.lst-kix_jpf3
cr7xe1pc-8>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc-8,lower-roman)
". "}.lst-kix_z7in7d1ar2zt-6>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt-6}.ls
t-kix_pza3ybm1wtg3-8>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3-8}ol.lst-kix_
opzlp0rjj486-6.start{counter-reset:lst-ctn-kix_opzlp0rjj486-6 0}.lst-kix_32zxnvl
59py3-3>li:before{content:"" counter(lst-ctn-kix_32zxnvl59py3-3,decimal) ". "}.l
st-kix_jxeur1wnlj7y-2>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-2,lo
wer-roman) ". "}.lst-kix_lixznqbqiris-7>li{counter-increment:lst-ctn-kix_lixznqb
qiris-7}.lst-kix_4s9m9sikrtm7-1>li:before{content:"" counter(lst-ctn-kix_4s9m9si
krtm7-1,lower-latin) ". "}.lst-kix_j51xhhtple7c-4>li:before{content:"" counter(l
st-ctn-kix_j51xhhtple7c-4,lower-latin) ". "}.lst-kix_lgtbofvz5zxd-8>li:before{co
ntent:"" counter(lst-ctn-kix_lgtbofvz5zxd-8,lower-roman) ". "}ol.lst-kix_8dg0b92
yw51r-0.start{counter-reset:lst-ctn-kix_8dg0b92yw51r-0 0}.lst-kix_5f9palqqt4mm-6
>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-6}.lst-kix_kvgsl0s9rzo4-5>li{coun
ter-increment:lst-ctn-kix_kvgsl0s9rzo4-5}.lst-kix_8dg0b92yw51r-1>li:before{conte
nt:"" counter(lst-ctn-kix_8dg0b92yw51r-1,lower-latin) ". "}ol.lst-kix_opzlp0rjj4
86-2.start{counter-reset:lst-ctn-kix_opzlp0rjj486-2 0}ol.lst-kix_vnvg10gwrc8t-2.
start{counter-reset:lst-ctn-kix_vnvg10gwrc8t-2 0}.lst-kix_t9jkz28ln50j-4>li{coun
ter-increment:lst-ctn-kix_t9jkz28ln50j-4}.lst-kix_lixznqbqiris-3>li:before{conte
nt:"" counter(lst-ctn-kix_lixznqbqiris-3,decimal) ". "}.lst-kix_kf08e4mo0q15-8>l
i{counter-increment:lst-ctn-kix_kf08e4mo0q15-8}ol.lst-kix_jxeur1wnlj7y-6.start{c
ounter-reset:lst-ctn-kix_jxeur1wnlj7y-6 0}.lst-kix_9tkaqbe3bnu3-1>li{counter-inc
rement:lst-ctn-kix_9tkaqbe3bnu3-1}.lst-kix_pa6lflf2amnu-0>li{counter-increment:l
st-ctn-kix_pa6lflf2amnu-0}.lst-kix_hm47sef7muk-2>li:before{content:"" counter(ls
t-ctn-kix_hm47sef7muk-2,lower-roman) ". "}.lst-kix_dblgil8t24zy-2>li{counter-inc
rement:lst-ctn-kix_dblgil8t24zy-2}.lst-kix_sgsi64vug03j-5>li{counter-increment:l
st-ctn-kix_sgsi64vug03j-5}ol.lst-kix_2uog6ch44jpu-4.start{counter-reset:lst-ctn-
kix_2uog6ch44jpu-4 0}.lst-kix_9tkaqbe3bnu3-3>li:before{content:"" counter(lst-ct
n-kix_9tkaqbe3bnu3-3,decimal) ". "}.lst-kix_m1x0qzeeadaz-0>li:before{content:""
counter(lst-ctn-kix_m1x0qzeeadaz-0,decimal) ". "}ol.lst-kix_60g29afx0lof-0.start
{counter-reset:lst-ctn-kix_60g29afx0lof-0 0}ol.lst-kix_jzpgxqq6fzzf-2.start{coun
ter-reset:lst-ctn-kix_jzpgxqq6fzzf-2 0}ol.lst-kix_8dg0b92yw51r-6.start{counter-r
eset:lst-ctn-kix_8dg0b92yw51r-6 0}ol.lst-kix_1gqf2s78t7o1-6.start{counter-reset:
lst-ctn-kix_1gqf2s78t7o1-6 0}.lst-kix_32zxnvl59py3-2>li:before{content:"" counte
r(lst-ctn-kix_32zxnvl59py3-2,lower-roman) ". "}.lst-kix_juntnht2kzza-0>li:before
{content:"" counter(lst-ctn-kix_juntnht2kzza-0,decimal) ". "}ol.lst-kix_1g0xzctl
1vi-0.start{counter-reset:lst-ctn-kix_1g0xzctl1vi-0 0}ol.lst-kix_fr6w5z45nvx0-4.
start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-4 0}ol.lst-kix_nho7sy6cpfv0-6.start
{counter-reset:lst-ctn-kix_nho7sy6cpfv0-6 0}.lst-kix_m8zky1oy6k60-0>li:before{co
ntent:"" counter(lst-ctn-kix_m8zky1oy6k60-0,decimal) ". "}.lst-kix_jpf3cr7xe1pc-
0>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc-0,decimal) ". "}.lst-kix
_hvjet9voiiio-3>li:before{content:"" counter(lst-ctn-kix_hvjet9voiiio-3,decimal)
". "}ol.lst-kix_3h1iswqv3l7s-8.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-8 0
}.lst-kix_57tjkabqizo2-7>li:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-7
,lower-latin) ". "}.lst-kix_hvjet9voiiio-2>li:before{content:"" counter(lst-ctn-
kix_hvjet9voiiio-2,lower-roman) ". "}ol.lst-kix_pza3ybm1wtg3-3.start{counter-res
et:lst-ctn-kix_pza3ybm1wtg3-3 0}.lst-kix_t9jkz28ln50j-5>li:before{content:"" cou
nter(lst-ctn-kix_t9jkz28ln50j-5,lower-roman) ". "}.lst-kix_60g29afx0lof-6>li:bef
ore{content:"" counter(lst-ctn-kix_60g29afx0lof-6,decimal) ". "}ol.lst-kix_fr6w5
z45nvx0-1.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-1 0}.lst-kix_j51xhhtple7c
-0>li{counter-increment:lst-ctn-kix_j51xhhtple7c-0}ol.lst-kix_kvgsl0s9rzo4-4.sta
rt{counter-reset:lst-ctn-kix_kvgsl0s9rzo4-4 0}.lst-kix_sgsi64vug03j-3>li:before{
content:"" counter(lst-ctn-kix_sgsi64vug03j-3,decimal) ". "}.lst-kix_nho7sy6cpfv
0-8>li{counter-increment:lst-ctn-kix_nho7sy6cpfv0-8}.lst-kix_7kmxmbi2lsws-6>li:b
efore{content:"" counter(lst-ctn-kix_7kmxmbi2lsws-6,decimal) ". "}.lst-kix_pa6lf
lf2amnu-8>li{counter-increment:lst-ctn-kix_pa6lflf2amnu-8}.lst-kix_opzlp0rjj486-
4>li{counter-increment:lst-ctn-kix_opzlp0rjj486-4}.lst-kix_nho7sy6cpfv0-2>li{cou
nter-increment:lst-ctn-kix_nho7sy6cpfv0-2}ol.lst-kix_j51xhhtple7c-6.start{counte
r-reset:lst-ctn-kix_j51xhhtple7c-6 0}.lst-kix_t7any4lo9hoq-8>li:before{content:"
\0025a0 "}ol{margin:0;padding:0}.c8{vertical-align:top;width:504pt;border-style
:solid;background-color:#ead1dc;border-color:#000000;border-width:1pt;padding:5p
t 5pt 5pt 5pt}.c6{vertical-align:top;width:648pt;border-style:solid;background-c
olor:#f3f3f3;border-color:#000000;border-width:1pt;padding:5pt 5pt 5pt 5pt}.c15{
vertical-align:top;width:144pt;border-style:solid;border-color:#000000;border-wi
dth:1pt;padding:5pt 5pt 5pt 5pt}.c14{list-style-type:none;margin:0;padding:0}.c3
3{max-width:648pt;background-color:#ffffff;padding:72pt 72pt 72pt 72pt}.c32{colo
r:#999999;font-size:24pt;font-family:"Open Sans"}.c29{color:#666666;font-size:12
pt;font-family:"Trebuchet MS"}.c42{padding-top:18pt;padding-bottom:4pt}.c37{colo
r:#a64d79;font-family:"Trebuchet MS"}.c16{color:inherit;text-decoration:inherit}
.c5{padding-left:0pt;margin-left:108pt}.c11{color:#1155cc;text-decoration:underl
ine}.c0{direction:ltr;margin-left:36pt}.c1{line-height:1.0;direction:ltr}.c26{ma
rgin:5px;border:1px solid black}.c38{padding-top:24pt;padding-bottom:6pt}.c41{co
lor:#a64d79}.c36{font-family:"Open Sans"}.c40{color:#4a86e8}.c3{direction:ltr}.c
19{margin-left:72pt}.c4{height:11pt}.c9{font-weight:bold}.c35{font-size:12pt}.c2
4{line-height:1.5}.c31{color:#333333}.c25{text-align:right}.c28{height:12pt}.c39
{font-size:24pt}.c27{height:16pt}.c23{text-align:center}.c20{line-height:1.0}.c3
4{font-size:18pt}.c30{margin-left:108pt}.c17{font-family:"Consolas"}.c13{height:
0pt}.c12{border-collapse:collapse}.c7{padding-left:0pt}.c21{font-size:36pt}.c22{
text-decoration:line-through}.c10{font-style:italic}.c2{font-family:"Courier New
"}.c18{color:#ff0000}.title{padding-top:0pt;line-height:1.15;text-align:left;col
or:#000000;font-size:21pt;font-family:"Trebuchet MS";padding-bottom:0pt}.subtitl
e{padding-top:0pt;line-height:1.15;text-align:left;color:#666666;font-style:ital
ic;font-size:13pt;font-family:"Trebuchet MS";padding-bottom:10pt}li{color:#00000
0;font-size:11pt;font-family:"Arial"}p{color:#000000;font-size:11pt;margin:0;fon
t-family:"Arial"}h1{padding-top:10pt;line-height:1.15;text-align:left;color:#000
000;font-size:16pt;font-family:"Trebuchet MS";padding-bottom:0pt}h2{padding-top:
10pt;line-height:1.15;text-align:left;color:#000000;font-size:13pt;font-family:"
Trebuchet MS";font-weight:bold;padding-bottom:0pt}h3{padding-top:8pt;line-height
:1.15;text-align:left;color:#666666;font-size:12pt;font-family:"Trebuchet MS";fo
nt-weight:bold;padding-bottom:0pt}h4{padding-top:8pt;line-height:1.15;text-align
:left;color:#666666;font-size:11pt;text-decoration:underline;font-family:"Trebuc
het MS";padding-bottom:0pt}h5{padding-top:8pt;line-height:1.15;text-align:left;c
olor:#666666;font-size:11pt;font-family:"Trebuchet MS";padding-bottom:0pt}h6{pad
ding-top:8pt;line-height:1.15;text-align:left;color:#666666;font-style:italic;fo
nt-size:11pt;font-family:"Trebuchet MS";padding-bottom:0pt}</style></head><body
class="c33"><p class="c3 c23 c38 title"><a name="h.w7msts8n8z9n"></a><img height
="268" src="images/image30.png" width="616"></p><p class="c38 c3 c4 c23 title"><
a name="h.xmhzbcbrfser"></a></p><p class="c38 c3 c23 title"><a name="h.umyrvsj37
4pd"></a><span class="c9 c32">Dart on the Modern Web</span></p><p class="c38 c3
c23 title"><a name="h.unvuoq9jdbtg"></a><span class="c32 c9">Google I/O 2013 &md
ash; Code lab</span></p><p class="c3 c4"><span></span></p><p class="c38 c3 title
"><a name="h.kerookz5dcyr"></a><span class="c9 c21 c36">Dart on the Modern Web</
span><img height="133" src="images/image19.png" width="133"></p><p class="c3 c42
subtitle"><a name="h.lmjlnm6y08c9"></a><span class="c36 c39">Using Dart to Buil
d a Modern Web App</span></p><h1 class="c38 c3"><a name="h.r18vdncm6tad"></a><sp
an class="c9 c34">Dart code lab for Google I/O 2013</span></h1><hr style="page-b
reak-before:always;display:none;"><p class="c3 c4"><span></span></p><h1 class="c
3"><a name="h.cgzc3lhbqumi"></a><span>Introduction</span></h1><p class="c3 c4"><
span></span></p><p class="c3"><span>Welcome to Dart! We built Dart to help devel
opers from all platforms build awesome apps for the modern web. Dart compiles to
JavaScript to run across all modern browsers. Dart is an easy-to-learn language
at the hub of a powerful set of tools for structured web app engineering.
The Dart SDK contains a rich set of libraries, a powerful editor, a package man
ager, and much more.</span></p><p class="c3 c4"><span></span></p><p class="c3"><
span>In this code lab, you’ll build a simple, single-page, modern web app
for desktop and mobile.</span></p><p class="c3 c4"><span></span></p><p class="c3
"><span>You will learn:</span></p><p class="c3 c4"><span></span></p><ol class="c
14 lst-kix_i2v077rod1nx-0 start"><li class="c0 c7"><span>A bit of the Dart langu
age and libraries</span></li><li class="c0 c7"><span>Client-side templating</spa
n></li><li class="c0 c7"><span>Declarative dynamic DOM generation</span></li><li
class="c0 c7"><span>MDV-style data binding to sync UI elements with data</span>
</li><li class="c0 c7"><span>How to use the Dart HTML and Web UI libraries</span
></li><li class="c0 c7"><span>How to store data locally in your browser</span></
li><li class="c0 c7"><span>Optimizing for </span><span>mobile</span><span>
devices</span></li></ol><h2 class="c3"><a name="h.wybq4zhendq"></a><span>Prerequ
isites</span></h2><p class="c3 c4"><span></span></p><p class="c3"><span>This cod
e lab assumes that you are familiar with web programming (HTML, CSS) and object-
oriented programming. You do not need to be an expert in web programming to enjo
y this code lab.</span></p><p class="c3 c4"><span></span></p><p class="c3"><span
>This code lab requires Dart Editor, which you will download and install in Step
0</span><span>.</span></p><p class="c3 c4"><span></span></p><p class="c3"><span
class="c9">Note:</span><span> Dart Editor runs on Windows (Vista, 7, or 8)
, Linux, or Mac.</span></p><hr style="page-break-before:always;display:none;"><p
class="c3 c4"><span></span></p><h2 class="c3"><a name="h.dqo0342x5tkd"></a><spa
n>Resources</span></h2><p class="c3 c4"><span></span></p><p class="c3"><span>The
re are numerous </span><span>resources for the new Dart developer</span><span>.
Here are some of our</span><span> recommendations:</span></p><p class="c3 c
4"><span></span></p><ol class="c14 lst-kix_q1b5wk7cmirb-0 start"><li class="c0 c
7"><span class="c11"><a class="c16" href="http://www.dartlang.org/docs/tutorials
/">A Game of Darts - Tutorials</a></span></li><li class="c0 c7"><span class="c11
"><a class="c16" href="http://www.dartlang.org/docs/tutorials/web-ui/">Target 6:
Get Started with Web UI</a></span></li><li class="c0 c7"><span class="c11"><a c
lass="c16" href="http://www.dartlang.org/docs/dart-up-and-running/contents/ch02.
html">Dart Language Tour</a></span></li><li class="c0 c7"><span class="c11"><a c
lass="c16" href="http://www.dartlang.org/docs/dart-up-and-running/contents/ch03.
html">Dart Library Tour</a></span></li><li class="c0 c7"><span class="c11"><a cl
ass="c16" href="http://www.dartlang.org/docs/">Programmer's Guide</a></span>
</li></ol><hr style="page-break-before:always;display:none;"><h1 class="c3 c27">
<a name="h.j231q75dw9bi"></a></h1><h1 class="c3"><a name="h.gu4egoh1qqcf"></a><s
pan>Step 0: Get the app, run it in Dart Editor, and practice debugging</span></h
1><p class="c3 c4"><span></span></p><p class="c3"><span>This step sets the stage
. You make sure you have the right software, can run the finished app, and know
how to use Dart Editor’s integrated debugger.</span></p><p class="c3 c4"><
span></span></p><h2 class="c3"><a name="h.fp11eex6azbi"></a><span>Objectives</sp
an></h2><ol class="c14 lst-kix_p8a3u4ougab9-0 start"><li class="c0 c7"><span>Get
the </span><span>latest version of Dart Editor</span></li><li class="c0 c7"><sp
an>Download the source code for the sample app</span></li><li class="c0 c7"><spa
n>Run the finished version of the app</span></li><li class="c0 c7"><span>Look at
debugging information for the running app</span></li></ol><p class="c3 c4"><spa
n></span></p><h2 class="c3"><a name="h.of31fpik16gt"></a><span>Concepts overview
</span></h2><ol class="c14 lst-kix_a4uqy1hx9g3-0 start"><li class="c0 c7"><span
class="c9">Dartium</span><span> (Chromium with a built-in Dart VM) and the
Dart SDK are included in Dart Editor download.</span></li><li class="c0 c7"><spa
n>You can run Dart web apps in Dartium or in </span><span class="c9">any modern
browser</span><span>. (Dart Editor compiles the Dart code to JavaScript, using a
n SDK tool called dart2js.)</span></li></ol><p class="c3 c4"><span></span></p><h
2 class="c3"><a name="h.l63dnbcn7kku"></a><span>Walkthrough</span></h2><h3 class
="c3"><a name="h.p74ks3s27haa"></a><span>Download or update Dart Editor</span></
h3><p class="c3 c4"><span></span></p><p class="c3"><span>If you </span><span cla
ss="c9">don’t </span><span>have a copy of Dart Editor, get it:</span></p><
ol class="c14 lst-kix_m1x0qzeeadaz-0 start"><li class="c0 c7"><span>Go to </span
><span class="c11"><a class="c16" href="http://www.dartlang.org/tools/editor/">d
artlang.org/editor/</a></span><span>.</span></li><li class="c0 c7"><span>Downloa
d the version for your OS.</span></li><li class="c0 c7"><span>Unzip the file. Yo
u’re done!</span></li><li class="c0 c7"><span>Launch Dart Editor by double
-clicking the </span><span class="c9">DartEditor</span><span> executable fi
le.</span></li></ol><p class="c3 c19"><img height="93" src="images/image37.png"
width="77"></p><p class="c0"><span class="c9">Note:</span><span> If you&rsq
uo;re on a Mac, you might see an “unidentified developer” error. Her
e’s the solution: Instead of double-clicking the </span><span class="c9">D
artEditor</span><span> executable file, right-click (or Ctl+click) it to br
ing up a context menu, and choose </span><span class="c9">Open</span><span>. The
n, in the dialog that comes up, click </span><span class="c9">Open</span><span>.
An alternative workaround is to change your security settings (see </span><span
class="c11"><a class="c16" href="http://www.dartlang.org/tools/editor/troublesh
oot.html">Troubleshooting Dart Editor</a></span><span>).</span></p><p class="c3
c4"><span></span></p><p class="c3"><span>If you </span><span class="c9">do</span
><span> already have a copy of Dart Editor, make sure you’re on the l
atest build:</span></p><ol class="c14 lst-kix_jpf3cr7xe1pc-0 start"><li class="c
0 c7"><span>Launch Dart Editor.</span></li><li class="c0 c7"><span>Close </span>
<span class="c9">Preferences</span><span> if you’ve opened it.</span>
</li><li class="c0 c7"><span>Open </span><span class="c9">About Dart Editor</spa
n><span>.</span></li><li class="c0 c7"><span>If the button at the bottom right (
</span><span class="c9">Check for Update </span><span>or </span><span class="c9"
>Download Update</span><span>)</span><span class="c9"> </span><span>is enab
led, click it, and download the update.</span></li><li class="c0 c7"><span>When
the button says </span><span class="c9">Apply Update</span><span>, click it.</sp
an></li></ol><p class="c3 c4"><span></span></p><h3 class="c3"><a name="h.d3pxkju
wrjf7"></a><span>Download the app’s source code</span></h3><p class="c3 c4
"><span></span></p><p class="c3"><span>You can either clone the git repo or down
load the ZIP file.</span></p><p class="c3 c4"><span></span></p><p class="c3"><sp
an>To clone the repo from the command line:</span></p><p class="c3 c4"><span></s
pan></p><p class="c0"><span class="c2">git clone </span><span class="c11 c2"><a
class="c16" href="https://github.com/dart-lang/io-2013-dart-codelab">https://git
hub.com/dart-lang/io-2013-dart-codelab</a></span></p><p class="c3 c4"><span></sp
an></p><p class="c3"><span>To get the source as a ZIP file:</span></p><p class="
c3 c4"><span></span></p><ol class="c14 lst-kix_kf08e4mo0q15-0 start"><li class="
c0 c7"><span>Go to </span><span class="c11"><a class="c16" href="https://github.
com/dart-lang/io-2013-dart-codelab">https://github.com/dart-lang/io-2013-dart-co
dela</a></span><span class="c11"><a class="c16" href="https://github.com/dart-la
ng/io-2013-dart-codelab">b</a></span></li><li class="c0 c7"><span>Click the </sp
an><span class="c9">Download </span><span class="c9">ZIP </span><span>button</sp
an><span> in the right-hand column.</span></li></ol><p class="c0"><img heig
ht="197" src="images/image34.png" width="200"></p><h3 class="c3"><a name="h.ygvs
q0wvi55m"></a><span>Run the finished application</span></h3><p class="c3 c4"><sp
an></span></p><p class="c3"><span>Now that you’ve downloaded the source co
de, try out the finished application.</span></p><p class="c3 c4"><span></span></
p><ol class="c14 lst-kix_oqqzpe3b3nud-0 start"><li class="c0 c7"><span>If you ha
ven’t already done so, launch Dart Editor by double-clicking the </span><s
pan class="c9">DartEditor</span><span> executable file.</span></li></ol><p
class="c3 c19"><img height="93" src="images/image37.png" width="77"></p><p class
="c0"><span>If you have trouble, see </span><span class="c11"><a class="c16" hre
f="http://www.dartlang.org/tools/editor/troubleshoot.html">Troubleshooting Dart
Editor</a></span><span>.<br></span></p><ol class="c14 lst-kix_oqqzpe3b3nud-0"><l
i class="c0 c7"><span>In Dart Editor, t</span><span>ype </span><span class="c9">
Ctl+O</span><span> (Linux/Windows) or </span><span class="c9">Cmd+O</span><
span> (Mac) </span><span>or choose </span><span class="c9">File > </span
><span class="c9">Open Existing Folder</span><span>.<br></span></li><li class="c
0 c7"><span>Select the </span><span class="c9">io-2013-codelab-finished</span><s
pan> directory in the folder where you extracted the source code, and click
</span><span class="c9">Open</span><span>.</span><span> </span></li></ol><
p class="c0"><span class="c9">IMPORTANT</span><span>: Make sure you open </span>
<span class="c9">io-2013-codelab-finished</span><span> and </span><span cla
ss="c9">not</span><span> its parent directory. Dart Editor analyzes all of
the code in the open folder. For this code lab, it is more efficient to open jus
t the directory for your active step rather than the top-level directory contain
ing all of the steps.</span></p><p class="c0"><img height="355" src="images/imag
e32.png" width="800"></p><p class="c0 c4"><span></span></p><p class="c0"><span>D
art Editor </span><span>installs the app’s dependenc</span><span>ies and s
tarts building it. The progress bar is in the lower right corner of the window.
Dart Editor keeps the dependencies and compiled version up-to-date. However, if
you ever need or want to build the app manually, you can follow these steps:</sp
an></p><ol class="c14 lst-kix_hvjet9voiiio-1 start"><li class="c3 c19 c7"><span>
In the Files view, right-click </span><span class="c9">pubspec.yaml</span><span>
and choose </span><span class="c9">Pub Install</span><span>.</span></li><l
i class="c3 c19 c7"><span>In the Tools menu, choose </span><span class="c9">Rean
alyze Sources</span><span>.<br>(The editor might beat you to this, but it won&rs
quo;t hurt to do it twice.)</span></li><li class="c3 c19 c7"><span>In the Files
view, right-click</span><span> </span><span class="c9">build.da</span><span
class="c9">rt</span><span> and choose </span><span class="c9">Run</span><s
pan>. <br>The output should look </span><span>something</span><span> like t
he following.</span></li></ol><p class="c0 c4"><span></span></p><p class="c1 c19
"><span class="c2">Total time spent on web/index.html  
; -- 1159 ms</spa
n></p><p class="c1 c19"><span class="c2">Total time
&nb
sp; -- 1194 ms</s
pan></p><p class="c1 c19"><span class="c2">Build finished!</span></p><p class="c
3 c4"><span></span></p><ol class="c14 lst-kix_oqqzpe3b3nud-0"><li class="c0 c7">
<span>Run the app in Dartium:</span></li></ol><ol class="c14 lst-kix_oqqzpe3b3nu
d-1 start"><li class="c3 c19 c7"><span>In the Files view, find the </span><span
class="c9">web</span><span> directory and right-click its </span><span clas
s="c9">index.html</span><span> file.</span></li><li class="c3 c19 c7"><span
>Choose </span><span class="c9">Run in Dartium</span><span>. The app initially l
ooks like this:</span></li></ol><p class="c3 c19"><img height="342" src="images/
image18.png" width="660"><span><br></span><span class="c9">Note</span><span>: If
you don’t see an Untitled document, try steps 3a-3c. Also check that the
</span><span class="c9">web</span><span> directory contains an </span><span
class="c9">out</span><span> directory. Try running </span><span class="c9"
>web/out/index.html</span><span>. If it still doesn’t work, restart Dart E
ditor.</span></p><p class="c3 c4"><span></span></p><ol class="c14 lst-kix_oqqzpe
3b3nud-0"><li class="c0 c7"><span>Play with the app</span><span>:</span></li></o
l><ol class="c14 lst-kix_oqqzpe3b3nud-1"><li class="c3 c19 c7"><span>Click the +
button to create an untitled document.</span></li><li class="c3 c7 c19"><span>R
ename the untitled document by editing the title in the right-hand pane.</span><
/li><li class="c3 c19 c7"><span>Put some text in the document.</span></li><li cl
ass="c3 c19 c7"><span>Use the + button to create more documents.</span></li><li
class="c3 c19 c7"><span>Use the </span><span class="c9">Filter documents</span><
span> field to limit the documents shown to those that have a certain strin
g in their title or contents.</span></li></ol><p class="c3 c19"><img height="320
" src="images/image33.png" width="642"></p><ol class="c14 lst-kix_oqqzpe3b3nud-1
"><li class="c3 c19 c7"><span>Make the window narrower, and observe how the layo
ut changes.</span></li></ol><p class="c3 c4"><span></span></p><ol class="c14 lst
-kix_oqqzpe3b3nud-0"><li class="c0 c7"><span>Copy the app’s URL from the t
ab that’s running the app, then close that tab. Open another tab and navig
ate to the app’s URL. Notice how all the documents you created remain, as
long as you’re using the same browser and profile.</span></li></ol><p clas
s="c3 c4"><span></span></p><ol class="c14 lst-kix_oqqzpe3b3nud-0"><li class="c0
c7"><span>Now that you’ve see the app running in Dartium, try running it i
n your default browser and in another browser:</span></li></ol><ol class="c14 ls
t-kix_oqqzpe3b3nud-1"><li class="c3 c19 c7"><span>Quit the Dartium app, </span><
span>either by closing its tab or by clicking the </span><span class="c9 c18">re
d square</span><span> in the Debugger pane.</span></li></ol><p class="c3 c1
9"><img height="80" src="images/image20.png" width="166"></p><ol class="c14 lst-
kix_oqqzpe3b3nud-1"><li class="c3 c19 c7"><span>To </span><span>run the app in y
our default browser (probably </span><span class="c11"><a class="c16" href="http
s://www.google.com/intl/en/chrome/browser/">Chrome</a></span><span>), right-clic
k </span><span class="c9">web/index.html </span><span>and choose </span><span cl
ass="c9">Run as JavaScript</span><span>. </span></li><li class="c3 c19 c7"><span
>To run it in another browser:</span></li></ol><ol class="c14 lst-kix_hvjet9voii
io-2 start"><li class="c5 c3"><span>From the </span><span class="c9">Run</span><
span> menu, choose </span><span class="c9">Manage Launches</span><span>.</s
pan></li><li class="c5 c3"><span>Click the gray world button (to the left of the
big </span><span class="c9 c18">red X</span><span>) to create a new </span><spa
n>dart2js</span><span> launch.</span><span><br></span><img height="206" src
="images/image13.png" width="397"></li><li class="c3 c5"><span>Enter information
for the launch. For example:<br>▸ Change “New launch” to </sp
an><span class="c9">Writer in Firefox</span><span class="c9"><br></span><span>&#
9656; For the HTML file, enter </span><span class="c9">/io-2013-codelab-finished
/web/index.html</span></li></ol><p class="c3 c30"><span>▸ </span><span>Unc
heck “Use system default browser”, and select the browser you need.
For example, you might set the Browser field to </span><span class="c9">/Applica
tions/Firefox.app</span></p><p class="c3 c30"><img height="437" src="images/imag
e35.png" width="640"></p><ol class="c14 lst-kix_hvjet9voiiio-2"><li class="c5 c3
"><span>Click </span><span class="c9">Run</span><span>. Your app should look the
same as it did in Dartium and your default browser:<br></span><img height="261"
src="images/image24.png" width="495"><span><br>From now on, you can use the lit
tle arrow next to the Run button </span><img height="16" src="images/image04.png
" width="16"><span> to choose the launch you want to use.</span></li></ol><
p class="c3 c30"><img height="175" src="images/image27.png" width="593"></p><p c
lass="c3 c4 c30"><span></span></p><h3 class="c3"><a name="h.yoqjazd1uxez"></a><s
pan>Debug the running app</span></h3><p class="c3 c4"><span></span></p><p class=
"c3"><span>The easiest way to debug a Dart app is with Dart Editor and Dartium.
Try this:</span></p><p class="c3 c4"><span></span></p><ol class="c14 lst-kix_m8z
ky1oy6k60-0 start"><li class="c0 c7"><span>Open </span><span class="c9">web/app.
dart</span><span> in Dart Editor. (Double-click it in the Files view.)</spa
n></li><li class="c0 c7"><span>In </span><span>app.dart</span><span>, find the <
/span><span>createDocument</span><span>() function (line 34).<br></span><span cl
ass="c10">Trick: </span><span class="c10">Right-click </span><span class="c10">i
n the Editor pane and choose </span><span class="c9 c10">Outline File</span><spa
n class="c10">. Then click </span><span class="c9 c10">createDocument</span><spa
n class="c10">.</span></li></ol><p class="c0"><img height="271" src="images/imag
e40.png" width="389"><span> </span><img height="218" src="images/im
age23.png" width="368"></p><ol class="c14 lst-kix_m8zky1oy6k60-0"><li class="c0
c7"><span>Set a breakpoint in the function by double-clicking the gray bar </spa
n><span>to the left of “void createDocument() ...”</span><span>.</sp
an></li></ol><p class="c0"><img height="123" src="images/image02.png" width="351
"></p><ol class="c14 lst-kix_m8zky1oy6k60-0"><li class="c0 c7"><span>Stop</span>
<span> the app if it’s already running. You can close the browser win
dow the app is running in or click the </span><span class="c9 c18">red</span><sp
an> stop button in Dart Editor.</span></li></ol><p class="c0"><img height="
66" src="images/image11.png" width="280"></p><ol class="c14 lst-kix_m8zky1oy6k60
-0"><li class="c0 c7"><span>Run the app in </span><span>Dartium</span><span>. If
you are using the launches menu, choose the launch with the mini </span><span c
lass="c9 c40">blue</span><span> Chromium icon.</span><img height="140" src=
"images/image39.png" width="441"></li><li class="c0 c7"><span>Get the app to hit
the breakpoint.</span></li></ol><ol class="c14 lst-kix_pa6lflf2amnu-1 start"><l
i class="c3 c19 c7"><span>If you do not have any documents saved, the app hits t
he breakpoint on startup because it needs to create a new document to begin with
.</span></li><li class="c3 c19 c7"><span>If the app starts up without hitting th
e breakpoint, c</span><span>reate a new</span><span> </span><span>document
by clicking the + button.<br>The app hits the breakpoint.</span></li></ol><ol cl
ass="c14 lst-kix_m8zky1oy6k60-0"><li class="c0 c7"><span>In the Debugger pane, o
pen </span><span class="c9">top-level </span><span>and then click the </span><sp
an class="c9">documents</span><span> variable (</span><span class="c10">not
the </span><span class="c9 c10">document</span><span class="c10"> variable
)</span><span>. It’</span><span>s an array of Document objects.</span><spa
n> In the image below, the array contains three Document objects.</span></l
i></ol><p class="c0"><img height="419" src="images/image15.png" width="345"></p>
<ol class="c14 lst-kix_m8zky1oy6k60-0"><li class="c0 c7"><span>Use F5 or click t
he “Step Into” icon.</span></li></ol><p class="c0"><img height="66"
src="images/image05.png" width="280"><span><br></span><span>Whoops, now you&rsqu
o;re in library code!</span></p><ol class="c14 lst-kix_m8zky1oy6k60-0"><li class
="c0 c7"><span>Use F7 or the</span><span> “Step Return” icon</s
pan><span> to get back into app.dart code.</span></li></ol><p class="c0"><i
mg height="66" src="images/image25.png" width="280"></p><ol class="c14 lst-kix_m
8zky1oy6k60-0"><li class="c0 c7"><span>In the Debugger pane, look at the </span>
<span class="c9">doc</span><span> variable, which is an instance of Documen
t.</span></li><li class="c0 c7"><span>Use F6 or “Step Over” to get t
o the next line of code.</span></li></ol><p class="c0"><img height="66" src="ima
ges/image08.png" width="280"></p><ol class="c14 lst-kix_m8zky1oy6k60-0"><li clas
s="c0 c7"><span>Look at the top-level documents variable again. The array contai
ns one more item than it did before.</span><img height="315" src="images/image28
.png" width="277"></li><li class="c0 c7"><span>Continue </span><span>playing wit
h the debugger</span><span>.</span></li></ol><p class="c3"><span><br></span><spa
n class="c9">Note: </span><span>Don’t open Developer Tools in Dartium whil
e you’re debugging. Due to a bug, this crashes the debugger.</span></p><h1
class="c3 c27"><a name="h.m0iq4b5hbsv5"></a></h1><hr style="page-break-before:a
lways;display:none;"><h1 class="c3 c27"><a name="h.iwp6w76ozn91"></a></h1><h1 cl
ass="c3"><a name="h.mkmyy8842ats"></a><span>Overview: A visual summary of what y
ou’ll be doing</span></h1><p class="c3 c4"><span></span></p><a href="#" na
me="52d6a0f8e4829fea7de3b1d33f961a48fdaa7f9a"></a><a href="#" name="0"></a><tabl
e cellpadding="0" cellspacing="0" class="c12"><tbody><tr><td class="c15"><p clas
s="c1 c25"><span>Begin with skeletal app</span></p></td><td class="c8"><p class=
"c1 c23"><img height="365" src="images/image31.png" width="344"><span> </sp
an></p></td></tr><tr><td class="c15"><p class="c1 c25"><span>Add document word c
ount to the footer</span></p></td><td class="c8"><p class="c1 c23"><img height="
361" src="images/image29.png" width="341"></p></td></tr><tr><td class="c15"><p c
lass="c1 c25"><span>Create side bar</span></p></td><td class="c8"><p class="c1 c
23"><img height="365" src="images/image14.png" width="344"></p></td></tr><tr><td
class="c15"><p class="c1 c25"><span>Add the ability to create, select, and </sp
an><span>delete</span><span> documents</span></p></td><td class="c8"><p cla
ss="c1 c23"><img height="326" src="images/image17.png" width="359"></p></td></tr
><tr><td class="c15"><p class="c1 c25"><span>Add search filter</span></p></td><t
d class="c8"><p class="c1 c23"><img height="317" src="images/image09.png" width=
"359"></p></td></tr><tr class="c13"><td class="c15"><p class="c1 c25"><span>Add
local storage (provides document persistence between invocations)</span></p></td
><td class="c8"><p class="c1 c23"><img height="314" src="images/image21.png" wid
th="355"></p></td></tr><tr class="c13"><td class="c15"><p class="c1 c25"><span>O
ptimize layout for mobile devices</span></p></td><td class="c8"><p class="c1 c23
"><span>Index </span><img height="197" src="images/image00.png" width="253"><spa
n> Contents </span><img height="198" src="images/image36.png" width
="254"></p></td></tr></tbody></table><p class="c3 c4"><span></span></p><h1 class
="c3 c27"><a name="h.cpkpyn1nw7g"></a></h1><h1 class="c3"><a name="h.ymc534ugdys
m"></a><span>Step 1: Begin with a skeletal app, add the word count to the footer
using data binding</span></h1><p class="c3 c4"><span></span></p><p class="c3"><
span>Now that you have Dart Editor set up and understand how the application wor
ks, let’s rebuild the app step-by-step, starting with a skeletal version.
The code you downloaded from github contains a directory for each completed step
of the code lab. So if necessary, you can begin each step with a correct versio
n of the app. In the walkthrough portion of this step, you begin with the code i
n </span><span class="c9">io-2013-codelab-step1</span><span>.</span></p><h2 clas
s="c3"><a name="h.uvnvnl2dm2ai"></a><span>What you will learn</span></h2><p clas
s="c3 c4"><span></span></p><p class="c3"><span>You can display the value of a Da
rt variable on your web page directly within the HTML code. When the value of th
e variable changes within the Dart program, the UI automatically updates.</span>
<span> This capability, called one-way data binding, is implemented by the
Web UI public package. The Writer application uses one-way data binding to displ
ay the current document’s word count in the footer of the page. </span></p
><h2 class="c3"><a name="h.6jc7oqfnek9i"></a><span>Concepts overview</span></h2>
<p class="c3 c4"><span></span></p><ol class="c14 lst-kix_t9jkz28ln50j-0 start"><
li class="c0 c7"><span>Import public packages.</span></li><li class="c0 c7"><spa
n>Libraries.</span></li><li class="c0 c7"><span>One-way data binding with Web UI
.</span></li><li class="c0 c7"><span>Getters.</span></li></ol><h3 class="c3"><a
name="h.lpjuflgo3igm"></a><span>Import public packages</span></h3><p class="c3 c
4"><span></span></p><p class="c3"><span>A </span><span>package</span><span> 
;is a distributable bundle of code, often containing one or more libraries. The
pub package manager helps you install and manage 3rd party packages. Dart’
s public repository </span><span class="c11"><a class="c16" href="http://pub.dar
tlang.org">pub.dartlang.org</a></span><span> hosts many useful packages, in
cluding the Web UI package, which you need later for this step. The code below i
s a </span><span class="c10">package import</span><span>, which </span><span>inc
ludes the Web UI package in a Dart file.</span></p><p class="c3 c4"><span></span
></p><p class="c0"><span class="c2">import 'package:web_ui/web_ui.dart';
// import the Web UI package</span></p><p class="c3 c4"><span></span></p>
<p class="c3"><span class="c29 c9">Libraries</span></p><p class="c3 c4"><span></
span></p><p class="c3"><span>Dart code can be organized into </span><span class=
"c10">libraries</span><span>. A library is a namespace that can contain top-leve
l fields, top-level functions, classes, and more. A library can import other lib
raries, and be imported into other libraries.</span></p><p class="c3 c4"><span><
/span></p><p class="c3"><span>The Dart core libraries start with "dart:&quo
t;, such as dart:core, dart:collection, and dart:async. These libraries come fro
m the Dart SDK. For example, to import the core async library, simply add this t
o the top of your library:</span></p><p class="c3 c4"><span></span></p><p class=
"c0"><span class="c2">import 'dart:async'; // an </span><span clas
s="c2">important</span><span class="c2"> Dart core library</span></p><p cla
ss="c3 c4"><span></span></p><p class="c3"><span>A library can be split across mu
ltiple files, also known as </span><span class="c10">parts</span><span>. We don&
#39;t show an example of parts in the code lab.</span></p><p class="c3 c4"><span
></span></p><p class="c3"><span class="c29 c9">One-way data binding with Web UI<
/span></p><p class="c3 c4"><span></span></p><p class="c3"><span>The Web UI packa
ge implements one-way data binding, which provides dynamic and automatic synchro
nization between an HTML element and an observable Dart variable. The </span><sp
an>@observable</span><span> meta-data annotation marks a variable to be obs
erved. The Web UI compiler, </span><span>dwc</span><span>, generates extra code
that notes changes to an observable variable and keeps the UI in sync with those
changes. Here is an observable string:</span></p><p class="c3 c4"><span></span>
</p><p class="c0"><span class="c2">@observable String aStringOfNote = 'Hello
, World!';</span></p><p class="c3 c4"><span></span></p><p class="c3"><span>T
he value of an observable variable can be embedded in an HTML page, by including
the variable name between </span><span>double curly braces, {{</span><span clas
s="c10">name_of_observable</span><span class="c10">_var</span><span>}},</span><s
pan> within normal HTML code, </span><span>as shown:</span></p><p class="c3
c4"><span></span></p><p class="c0"><span class="c2"><p> {{aStringOfNote}}
</p></span></p><p class="c3 c4"><span></span></p><p class="c3"><span>Late
r, if the value of the variable changes in the Dart code, the web page automatic
ally updates to reflect the new value of the variable. For example, after the fo
llowing line of Dart code runs, the paragraph element changes from </span><span>
“Hello, World!”</span><span> to </span><span>“Goodbye, cr
uel world!”</span></p><p class="c3 c4"><span></span></p><p class="c0"><spa
n class="c2">aStringOfNote = 'Hello, Universe!';</span></p><p class="c3
c4"><span></span></p><h3 class="c3"><a name="h.2xeueasygjb"></a><span>Getters</s
pan></h3><p class="c3 c4"><span></span></p><p class="c3"><span>Dart allows you t
o create getters and setters that look like fields when used. </span><span>This
means your design can start with simple fields, and evolve over time to use gett
ers and setters. No more defensive and preemptive encapsulation!</span></p><p cl
ass="c3 c4"><span></span></p><p class="c3"><span>Here is an </span><span>example
</span><span>. Consider a simple </span><span>Car</span><span> class with a
single field called </span><span>isRunning</span><span>.</span></p><p class="c3
c4"><span></span></p><p class="c0"><span class="c2">class Car {</span></p><p cl
ass="c0"><span class="c2"> bool isRunning;</span></p><p class="c0"><span c
lass="c2">}</span></p><p class="c0 c4"><span class="c2"></span></p><p class="c0"
><span class="c2">main() {</span></p><p class="c0"><span class="c2"> var c
ar = new Car();</span></p><p class="c0"><span class="c2"> print(car.isRunn
ing);</span></p><p class="c0"><span class="c2">}</span></p><p class="c3 c4"><spa
n></span></p><p class="c3"><span>Imagine that you later add an </span><span>Engi
ne</span><span> field to </span><span>Car</span><span>. </span><span>Engine
</span><span> knows if it's running, thereby making </span><span>Car</s
pan><span>'s </span><span>isRunning</span><span> field obsolete. Do you
break existing users? No way! Use a getter method!</span></p><p class="c3 c4"><
span></span></p><p class="c0"><span class="c2">class Engine {</span></p><p class
="c0"><span class="c2"> bool isRunning;</span></p><p class="c0"><span clas
s="c2">}</span></p><p class="c0 c4"><span class="c2"></span></p><p class="c0"><s
pan class="c2">class Car {</span></p><p class="c0"><span class="c2"> Engin
e engine;</span></p><p class="c0 c4"><span class="c2"></span></p><p class="c0"><
span class="c2"> bool get isRunning => engine.isRunning;</span></p><p c
lass="c0"><span class="c2">}</span></p><p class="c0 c4"><span class="c2"></span>
</p><p class="c0"><span class="c2">main() {</span></p><p class="c0"><span class=
"c2"> var car = new Car();</span></p><p class="c0"><span class="c2">
print(car.isRunning);</span></p><p class="c0"><span class="c2">}</span></p><p c
lass="c3 c4"><span></span></p><p class="c3"><span>Notice how the usage of the </
span><span>car.isRunning</span><span> is the same with both the getter and
the field.</span><span> The users of the </span><span>Car</span><span> 
;class did not have to update their code when you changed the implementation of
</span><span>Car</span><span>.</span></p><h2 class="c3"><a name="h.50b5692q1fjp"
></a><span>Walkthrough</span></h2><h3 class="c3"><a name="h.sv7ivpmaxg6a"></a><s
pan>Open the code for step </span><span>1</span></h3><p class="c3 c4"><span></sp
an></p><p class="c3"><span>Close the </span><span class="c9">io-2013-codelab-fin
ished</span><span> directory: right-click on the folder in the Files view o
f Dart Editor and select </span><span class="c9">Close Folder </span><span>from
the menu.</span></p><p class="c3 c4"><span></span></p><p class="c3"><img height=
"342" src="images/image12.png" width="448"></p><p class="c3 c4"><span></span></p
><p class="c3"><span>Open </span><span class="c9">io-2013-codelab-step1</span><s
pan> with </span><span class="c9">File > Open Existing Folder</span><spa
n> as you did with the finished directory in the previous step.</span></p><
p class="c3"><span class="c9">IMPORTANT</span><span>: Make sure you open </span>
<span class="c9">io-2013-codelab-</span><span class="c9">step1</span><span> 
;and </span><span class="c9">not</span><span> its parent directory. Dart Ed
itor analyzes all of the code in the open folder. For this code lab, it is more
efficient to open just the directory for your active step rather than the top-le
vel directory containing all of the steps.</span></p><p class="c3"><img height="
355" src="images/image38.png" width="800"></p><p class="c0 c4"><span></span></p>
<p class="c3"><span>Dart Editor </span><span>installs</span><span class="c10">&n
bsp;</span><span>the app’s dependencies and builds it.</span></p><p class=
"c3 c4"><span></span></p><h3 class="c3"><a name="h.wlekvj90m4yq"></a><span>Run t
he app</span></h3><p class="c3 c4"><span></span></p><p class="c3"><span>Right cl
ick </span><span class="c9">web/index.html</span><span> and choose </span><
span class="c9">Run in Dartium...</span><span>. The app should initially look li
ke this:</span></p><p class="c3 c4"><span></span></p><p class="c3"><img height="
379" src="images/image03.png" width="428"></p><h3 class="c3"><a name="h.q7zj6hd0
zod0"></a><span>Import the Web UI package</span></h3><p class="c3 c4"><span></sp
an></p><p class="c3"><span>The </span><span class="c9">lib/document.dart</span><
span> file contains the code that implements a plain text document. The Doc
ument keeps track of its creation time, has a title, and text content. In this s
tep, you add a getter to the Document class that calculates the number of words
in the document.</span></p><p class="c3 c4"><span></span></p><p class="c3"><span
>Double click </span><span class="c9">lib/document.dart</span><span> to ope
n the file.</span></p><p class="c3 c4"><span></span></p><p class="c3"><span>Near
the top of the file, notice this comment. </span></p><p class="c0 c20"><span cl
ass="c2">…</span></p><p class="c0 c20"><span class="c2">/// STEP 1: Impor
t the Web UI package</span></p><p class="c0 c20"><span class="c2">…</span
></p><p class="c0 c4 c20"><span></span></p><p class="c3"><span>Comments of this
style appear throughout the code, clearly marking what to do for each numbered s
tep. The </span><span class="c9">lib/document.dart</span><span> file has th
ree comments for step one.</span></p><p class="c3 c4"><span></span></p><p class=
"c3"><span>Beneath</span><span> the comment</span><span>, type in the impor
t directive for including the Web UI package. In the gray code boxes throughout
this code lab, the code you need to add is </span><span class="c9 c17">bold</spa
n><span>. Code you need to delete is</span><span> </span><span class="c17 c
22 c35">struck through</span><span>.</span></p><p class="c3 c4"><span></span></p
><a href="#" name="1eb03ef741de58bf36f691312367c0d266536461"></a><a href="#" nam
e="1"></a><table cellpadding="0" cellspacing="0" class="c12"><tbody><tr class="c
13"><td class="c6"><p class="c1"><span class="c2">// lib/document.dart</span></p
><p class="c1"><span class="c2">…</span></p><p class="c3"><span class="c2
">/// STEP 1: Import the Web UI package.</span></p><p class="c3"><span class="c9
c2">import 'package:web_ui/web_ui.dart';</span></p><p class="c1"><span
class="c2">…</span></p></td></tr></tbody></table><p class="c3 c4"><span><
/span></p><h3 class="c3"><a name="h.84pihwlpka7h"></a><span>Mark the Document cl
ass with @observable</span></h3><p class="c3 c4"><span></span></p><p class="c3">
<span>Find the next </span><span>STEP 1</span><span> comment; it appears a
few lines below the import directive you just </span><span>e</span><span>n</span
><span>tered</span><span>.</span></p><p class="c0 c20"><span class="c2">…
</span></p><p class="c0"><span class="c2">/// STEP 1: Mark the class with @obser
vable.</span></p><p class="c0 c20"><span class="c2">…</span></p><p class=
"c3 c4"><span></span></p><p class="c3"><span>Mark</span><span> the Document
class with the </span><span>@observable</span><span> meta-data annotation.
This makes all fields of an instance of the Document class observable.</span></
p><p class="c3 c4"><span></span></p><a href="#" name="5c00fe5847c5c44c6a1bc33519
c44743fce819af"></a><a href="#" name="2"></a><table cellpadding="0" cellspacing=
"0" class="c12"><tbody><tr class="c13"><td class="c6"><p class="c1"><span class=
"c2">// lib/document.dart</span></p><p class="c1"><span class="c2">…</spa
n></p><p class="c3"><span class="c2">/// STEP 1: Mark the class with @observable
.</span></p><p class="c3"><span class="c9 c2">@</span><span class="c9 c2">observ
able</span></p><p class="c3"><span class="c2">class Document {</span></p><p clas
s="c1"><span class="c2">…</span></p></td></tr></tbody></table><p class="c
3 c4"><span></span></p><h3 class="c3"><a name="h.gbd8omocl705"></a><span>Calcula
te the word count for the current document</span></h3><p class="c3 c4"><span></s
pan></p><p class="c3"><span>To find the final task for step 1 in the </span><spa
n class="c9 c17">lib/document.dart</span><span> file,</span><span> s</
span><span>earch for “STEP 1” and locate the comment for the wordCou
nt method in the code. </span></p><p class="c0 c20"><span class="c2">…</s
pan></p><p class="c0"><span class="c2"> /// STEP 1: Add </span><span class
="c2">wordCount</span><span class="c2"> method.</span></p><p class="c0 c20"
><span class="c2">…</span></p><p class="c0 c4 c20"><span></span></p><p cl
ass="c3"><span>To search in Dart Editor, go to the </span><span class="c9">Edit<
/span><span> menu and choose </span><span class="c9">Find/Replace...</span>
<span>. Then type “STEP 1” into the text field and click </span><spa
n class="c9">Find</span><span>.</span></p><p class="c3 c4"><span></span></p><p c
lass="c3"><span>Under the comment, a</span><span>dd</span><span> the code f
or a new getter called wordCount. The getter uses the RegExp class, which is pro
vided in the dart:core library, to calculate how many words are in the document.
The return value of this getter is embedded in the </span><span>HTM</span><span
>L in the next step.</span></p><p class="c3 c4"><span></span></p><a href="#" nam
e="4f5973d69f8d5a7e7245aa340d736601c6085760"></a><a href="#" name="3"></a><table
cellpadding="0" cellspacing="0" class="c12"><tbody><tr class="c13"><td class="c
6"><p class="c1"><span class="c2">// lib/document.dart</span></p><p class="c1"><
span class="c2">…</span></p><p class="c1"><span class="c2"> /// STE
P 1: Add wordCount method.</span></p><p class="c1"><span class="c9 c2"> /*
*</span></p><p class="c1"><span class="c9 c2"> * Number of wor
ds in the document.</span></p><p class="c1"><span class="c9 c2"> *</
span></p><p class="c1"><span class="c9 c2"> * A "word&quo
t; is a string of characters separated by a space or a newline.</span></p><p cla
ss="c1"><span class="c9 c2"> */</span></p><p class="c1"><span class=
"c9 c2"> String get wordCount {</span></p><p class="c1"><span class="c9 c2
"> int count = new RegExp(r"(\w|\')+").allMatches(_co
ntent).length;</span></p><p class="c1"><span class="c9 c2"> if (cou
nt > 1) {</span></p><p class="c1"><span class="c9 c2"> re
turn '$count words';</span></p><p class="c1"><span class="c9 c2">
} else if (count == 1) {</span></p><p class="c1"><span class="c9 c2">&nbs
p; return '$count word';</span></p><p class="c1"><span cla
ss="c9 c2"> }</span></p><p class="c1"><span class="c9 c2"> &n
bsp; return 'No words - Yo, Yo write something...';</span></p><p class="
c1"><span class="c9 c2"> }</span></p><p class="c1"><span class="c2">&helli
p;</span></p></td></tr></tbody></table><h3 class="c3 c28"><a name="h.ionqzezeva8
k"></a></h3><p class="c3"><span>Save the file using </span><span class="c9">File
> Save</span><span>. You have completed all of the step 1 tasks in the </spa
n><span class="c9">lib/document.dart </span><span>file.</span></p><p class="c3 c
4"><span></span></p><h3 class="c3"><a name="h.tvdyvkmtr48d"></a><span>Embed the
word count in the footer of the web page.</span></h3><p class="c3 c4"><span></sp
an></p><p class="c3"><span>The HTML page that hosts the Writer app is </span><sp
an class="c9">web/index.html</span><span>. Let’s add the word count to the
footer of the page.</span></p><p class="c3 c4"><span></span></p><p class="c3"><
span>Double click</span><span> </span><span class="c9">web/index.html </spa
n><span>to open it.</span></p><p class="c3 c4"><span></span></p><p class="c3"><s
pan>Search for “STEP 1” and locate the code for the footer.</span></
p><p class="c3 c4"><span></span></p><p class="c3"><span>Add the code to d</span>
<span>isplay the word count in the footer of the document</span><span>, using th
e double curly bracket syntax.</span></p><p class="c3 c4"><span></span></p><a hr
ef="#" name="f6fe9061c4c563e8371a0634aedb78d26f02c3d1"></a><a href="#" name="4">
</a><table cellpadding="0" cellspacing="0" class="c12"><tbody><tr class="c13"><t
d class="c6"><p class="c1"><span class="c2">// web/index.html</span></p><p class
="c1"><span class="c2">…</span></p><p class="c1"><span class="c2">
<div class="footer"></span></p><p class="c1
c4"><span class="c2"></span></p><p class="c1"><span class="c2"> &n
bsp; <!-- STEP 1: Show the current word count. --></span></p
><p class="c1"><span class="c9 c2"> {{activeDo
cument.wordCount}}</span></p><p class="c1 c4"><span class="c2"></span></p><p cla
ss="c1"><span class="c2"> </div></span></p><p c
lass="c1"><span class="c2">…</span></p></td></tr></tbody></table><p class
="c3 c4"><span class="c2"></span></p><p class="c3"><span>Save your changes with
</span><span class="c9">File > Save</span><span>. You have completed all of t
he step 1 tasks.</span></p><h3 class="c3"><a name="h.lz56mhvll7k0"></a><span>Run
the revised version of the app.</span></h3><p class="c3 c4"><span></span></p><p
class="c3"><span>Run the app again</span><span>, and type in the document. As y
ou type, the word count updates at the bottom of the page:</span></p><p class="c
3"><img height="390" src="images/image22.png" width="539"></p><p class="c3 c4"><
span></span></p><p class="c3"><span>Congratulations! You’ve completed the
first step.</span></p><h1 class="c3 c27"><a name="h.nxg0ahyrlxhi"></a></h1><hr s
tyle="page-break-before:always;display:none;"><h1 class="c3 c27"><a name="h.bl9v
t9tueqdf"></a></h1><h1 class="c3"><a name="h.bdr5squ6r500"></a><span>Step 2: Cre
ate a sidebar to list the documents</span></h1><p class="c3 c4"><span></span></p
><p class="c3"><span>The family of Web Component specifications, such as custom
elements and HTML imports, give the web developer real encapsulation of the stru
cture, style, and behaviors of elements in the DOM. With help from the Web UI pa
ckage, you can make your own tags!</span></p><p class="c3 c4"><span></span></p><
p class="c3"><span>In this step, using the </span><span><element> tag,</sp
an><span> you create a custom element to implement the behavior and view of
a sidebar that lists the documents. Then, you use the new custom element to cre
ate a sidebar in the Writer app.</span></p><h2 class="c3"><a name="h.k74i547r3lz
2"></a><span>What you will learn</span></h2><ol class="c14 lst-kix_kvgsl0s9rzo4-
0 start"><li class="c0 c7"><span>Define custom elements.</span></li><li class="c
0 c7"><span>Import HTML into HTML.</span></li><li class="c0 c7"><span>Use custom
elements.</span></li><li class="c0 c7"><span>One-line functions.</span></li></o
l><h2 class="c3"><a name="h.q4bjn1j36hoo"></a><span>Concepts overview</span></h2
><h3 class="c3"><a name="h.mvtayj1q6so5"></a><span>Define c</span><span>ustom el
ements</span></h3><p class="c3 c4"><span></span></p><p class="c3"><span>A custom
</span><span>element </span><span>extends the lexicon of HTML</span><span>.</sp
an><span> A custom element definition encapsulates the structure (the HTML)
, styles (CSS), and behavior (Dart or JavaScript code) of a new kind of element.
For example, you can extend </span><span><button></span><span> to cr
eate </span><span>a</span><span> </span><span><fancy-button></span><s
pan> tag, with new custom behaviors and appearance.</span></p><p class="c3
c4"><span></span></p><p class="c3"><span>By convention, custom element names beg
in with </span><span>x-. F</span><span>or example </span><span><x-flower><
/span><span>. Custom element names </span><span class="c10">must</span><span>&nb
sp;have a hyphen (-) in their name, such as <fancy-button>. Following the
</span><span>x-</span><span> naming convention ensures that your custom ele
ment names always have a hyphen.</span></p><p class="c3 c4"><span></span><
/p><p class="c3"><span>The new </span><span><element></span><span> ta
g allows you to declare a new element (using HTML to declare HTML, I like it!) H
ere is an example:</span></p><p class="c3 c4"><span></span></p><p class="c0"><sp
an class="c2"><element name="x-comment" extends="div" con
structor="CommentComponent"></span></p><p class="c0"><span class="c
2"> <template></span></p><p class="c0"><span class="c2">  
; <div class="name">{{name}}</div></span></p><p class="c0"
><span class="c2"> <div class="comment"><content
></content></div></span></p><p class="c0"><span class="c2">
</template></span></p><p class="c0"><span class="c2"> </span><span c
lass="c2"> <script type="application/dart"></span></p><p cl
ass="c0"><span class="c2"> import 'package:web_ui/web_ui.dart&#
39;;</span></p><p class="c0"><span class="c2"> class CommentCompone
nt extends WebComponent {</span></p><p class="c0"><span class="c2">
String name;</span></p><p class="c0"><span class="c2"> &nbs
p; String comment;</span></p><p class="c0"><span class="c2"> }</spa
n></p><p class="c0"><span class="c2"> </script></span><sup><a href="
#cmnt1" name="cmnt_ref1">[a]</a></sup></p><p class="c0"><span class="c2"></el
ement></span></p><p class="c3 c4"><span></span></p><p class="c3"><span>The el
ement tag defines a new kind of HTML element. To create an instance of a custom
element use the element name as you would any other HTML tag. To create an insta
nce of the element defined above, write <x-comment>. A custom element inst
ance </span><span class="c10">must</span><span> have a closing tag </x-c
omment>.</span></p><p class="c3 c4"><span></span></p><p class="c3"><span>With
in the template definition above, notice the <content> tag. When an <x-
comment> element is instantiated, you can use other HTML elements between </s
pan><span><x-comment> and </x-comment>, a paragraph, a span, a list,
for example. Those elements replace the <content> tag for that instantiat
ion. </span><span>Using attributes, you can filter for specific elements to repl
ace the <content> tag.</span></p><h3 class="c3"><a name="h.cu2zzp8exzxx"><
/a><span>Import HTML into HTML</span></h3><p class="c3 c4"><span></span></p><p c
lass="c3"><span>To use a custom element, you often </span><span class="c10">impo
rt</span><span> the HTML that contains the </span><span><element></sp
an><span> tag. Luckily, HTML has a method for including resources: the </sp
an><span><link></span><span> tag. Here is an example:</span></p><p cl
ass="c3 c4"><span></span></p><p class="c0"><span class="c2"><link rel="i
mport" href="comment_component.html"></span></p><p class="c3 c
4"><span></span></p><p class="c3"><span>T</span><span>he </span><span><link&g
t;</span><span> tag must appear in the </span><span><head></span><spa
n> of the document.</span></p><p class="c3 c4"><span></span></p><h3 class="
c3"><a name="h.9ahc7aijhm6g"></a><span>Use custom elements</span></h3><p class="
c3 c4"><span></span></p><p class="c3"><span>Once you have imported the custom el
ement, you can use it in your document. Here is an example:</span></p><p class="
c3 c4"><span></span></p><p class="c0"><span class="c2"><ul></span></p><p c
lass="c0"><span class="c2"> <li><x-comment name="Bob"&g
t;I totally agree!</x-comment></li></span></p><p class="c0"><span cl
ass="c2"> <li><x-comment name="Alice">I totally disa
gree!</x-comment></li></span></p><p class="c0"><span class="c2"><
/ul></span></p><h3 class="c3"><a name="h.w7is3otkoy1o"></a><span>One-line fun
ctions</span></h3><p class="c3 c4"><span></span></p><p class="c3"><span>Dart mak
es it easy and terse to write one-line functions with the "fat arrow"
syntax. Here is an example:</span></p><p class="c3 c4"><span></span></p><p class
="c0"><span class="c2">int nextNumber() => i++;</span></p><p class="c3 c4"><s
pan></span></p><p class="c3"><span>The above code is syntactic sugar for:</span>
</p><p class="c3 c4"><span></span></p><p class="c0"><span class="c2">int nextNum
ber() {</span></p><p class="c0"><span class="c2"> return i++;</span></p><p
class="c0"><span class="c2">}</span></p><h2 class="c3"><a name="h.lx7xe3hizh5u"
></a><span>Walkthrough</span></h2><h3 class="c3"><a name="h.nnxh8c8g9rvf"></a><s
pan>The custom element's file</span></h3><p class="c3 c4"><span></span></p><
p class="c3"><span>First, create a new file for the custom element inside of the
</span><span class="c9">web/</span><span> directory.</span></p><p class="c
3 c4"><span></span></p><ol class="c14 lst-kix_57tjkabqizo2-0 start"><li class="c
0 c7"><span>Right-click on the </span><span class="c9">web</span><span> dir
ectory and select "</span><span class="c9">New File</span><span>".</sp
an></li><li class="c0 c7"><span>Name this file "document_item.html". D
art Editor provides some boilerplate code. Delete it.</span></li><li class="c0 c
7"><span>Open </span><span class="c9">__for_later/document_item.html</span><span
>, copy its contents, and paste it into </span><span class="c9">web/document_ite
m.html</span><span>.</span></li></ol><p class="c3 c4"><span></span></p><h3 class
="c3"><a name="h.kvlk5fbt87kg"></a><span>Declare the custom element</span></h3><
p class="c3 c4"><span></span></p><p class="c3"><span>Ensure you are working in <
/span><span class="c9">web/document_item.html</span><span>, and add the followin
g code:</span></p><p class="c3 c4"><span></span></p><a href="#" name="b009468215
a0c56688786bc71c4766d48ed7b514"></a><a href="#" name="5"></a><table cellpadding=
"0" cellspacing="0" class="c12"><tbody><tr class="c13"><td class="c6"><p class="
c1"><span class="c2">// web/document_item.html</span></p><p class="c1"><span cla
ss="c2"><html><body></span></p><p class="c1"><span class="c2">
<!-- STEP 2: Define a custom element. →</span></p><p class="c1 c4"><spa
n class="c2"></span></p><p class="c1"><span class="c9 c2"> <element nam
e="x-document-item" constructor="DocumentItem"</span></p><p
class="c1"><span class="c9 c2"> extends="div" </sp
an><span class="c9 c2">apply-author-styles</span><span class="c9 c2">></span>
</p><p class="c1 c4"><span class="c9 c2"></span></p><p class="c1"><span class="c
9 c2"> <!-- STEP 2: Define the DOM template for our custom eleme
nt --></span></p><p class="c1"><span class="c9 c2"> <template
></span></p><p class="c1 c4"><span class="c9 c2"></span></p><p class="c1"><sp
an class="c9 c2"> </template></span></p><p class="c1 c4"><spa
n class="c9 c2"></span></p><p class="c1"><span class="c9 c2"> <!
-- STEP 2: Add the script tag that defines this component's behaviour. -->
;</span></p><p class="c1"><span class="c9 c2"> <script type=&quo
t;application/dart"></span></p><p class="c1 c4"><span class="c9 c2"></sp
an></p><p class="c1"><span class="c9 c2"> </script></span></p
><p class="c1"><span class="c9 c2"> </element></span></p><p class="c
1 c4"><span class="c2"></span></p><p class="c1"><span class="c2"></body>&l
t;/html></span></p><p class="c1"><span class="c2">…</span></p></td></t
r></tbody></table><p class="c3 c4"><span class="c2"></span></p><p class="c3"><sp
an>A few notes about the code above:</span></p><p class="c3 c4"><span></span></p
><ol class="c14 lst-kix_bnpbicbhbbru-0 start"><li class="c0 c7"><span>The name o
f the element is </span><span>x</span><span>-document-item</span><span>.</span><
/li><li class="c0 c7"><span>The custom element extends </span><span><div><
/span><span>. That is, </span><span>x-document-item</span><span> is a speci
al kind of div.</span></li><li class="c0 c7"><span>Some behavior of the </span><
span>x-document-item</span><span> is implemented by a </span><span>Dart cla
ss named </span><span>DocumentItem</span><span>. You will create and include thi
s class below.</span></li><li class="c0 c7"><span>The </span><span>apply-author-
styles</span><span> attribute indicates that styles from the larger HTML do
cument apply to the contents of the custom component.</span></li></ol><p class="
c3 c4"><span></span></p><p class="c3"><span>Notice the </span><span><template
></span><span> tag inside of </span><span><element></span><span>.
A custom element can define its own structure with the </span><span><template
></span><span> tag. Fill in this template now.</span></p><h3 class="c3">
<a name="h.l68l6dl0jzre"></a><span>The template</span></h3><p class="c3 c4"><spa
n></span></p><p class="c3"><span>Add the code for the template as shown. Y</span
><span>ou need to also add the comments</span><span> for STEP 3 just as we
have them in the code. You need the comments to orient yourself later when you i
mplement Step 3.</span></p><p class="c3 c4"><span></span></p><a href="#" name="7
042cc209fcf1d47ccfc4265721fd964e76e6f4f"></a><a href="#" name="6"></a><table cel
lpadding="0" cellspacing="0" class="c12"><tbody><tr class="c13"><td class="c6"><
p class="c1"><span class="c2">// web/document_item.html</span></p><p class="c1">
<span class="c2">…</span></p><p class="c1"><span class="c2">
<!-- STEP 2: Define the DOM template for our custom element --></span></p
><p class="c1"><span class="c2"> <template></span></p><p clas
s="c1 c4"><span class="c2"></span></p><p class="c1"><span class="c9 c2"> &
nbsp; </span><span class="c9 c2"><!-- STEP 3: On click, select the doc
ument. --></span></p><p class="c1"><span class="c9 c2"> &
lt;div class="item {{isActiveClass}}"></span></p><p class="c1 c4"><
span class="c9 c2"></span></p><p class="c1"><span class="c9 c2"> &n
bsp; <div class="title">{{title}}</div></spa
n></p><p class="c1"><span class="c9 c2"> <d
iv class="modified">{{modified}}</div></span></p><p class="c1
c4"><span class="c9 c2"></span></p><p class="c1"><span class="c9 c2"> &nb
sp; <!-- STEP 3: Add delete button. --></span></p><p
class="c1 c4"><span class="c9 c2"></span></p><p class="c1"><span class="c9 c2">&
nbsp; </div></span></p><p class="c1"><span class="c2">
</template></span></p><p class="c1"><span class="c2">…</spa
n></p></td></tr></tbody></table><p class="c3 c4"><span></span></p><p class="c3">
<span>You can use one-way data binding in a template. Each time a custom element
is instantiated, an instance of the Dart class is created and associated with t
he custom element. Data bindings in the template are bound to fields in that Dar
t instance. For example, </span><span>{{title}}</span><span> binds to a fie
ld from the instance of </span><span>DocumentItem that is created when an elemen
t of this type is created. </span><span>It's a good idea to move all logic i
nto the Dart class, and just use fields and getters for the HTML.</span></p><p c
lass="c3 c4"><span></span></p><p class="c3"><span>Speaking of the class, let'
;s add that now!</span></p><p class="c3 c4"><span></span></p><p class="c3"><span
class="c29 c9">The script</span></p><p class="c3 c4"><span></span></p><p class=
"c3"><span>Use a </span><span><script></span><span> tag to declare th
e Dart class that goes with the custom element. The Dart class contains any stat
e and behavior applicable to the view.</span></p><p class="c3 c4"><span></span><
/p><p class="c3"><span>Ensure you are still editing </span><span class="c9">web/
document_item.html</span><span>, and add the following code inside the <scrip
t> and </script> tags:</span></p><p class="c3 c4"><span></span></p><a h
ref="#" name="38b92f10e28849103dac69976e506327495960f7"></a><a href="#" name="7"
></a><table cellpadding="0" cellspacing="0" class="c12"><tbody><tr class="c13"><
td class="c6"><p class="c1"><span class="c2">// web/document_item.html</span></p
><p class="c1"><span class="c2">…</span></p><p class="c1"><span class="c2
"> <!-- STEP 2: Add the script tag that defines this component&#
39;s behaviour. --></span></p><p class="c1"><span class="c2"> &l
t;script type="application/dart"></span></p><p class="c1"><span cla
ss="c9 c2"> import 'package:web_ui/web_ui.dart';</sp
an></p><p class="c1 c4"><span class="c9 c2"></span></p><p class="c1"><span class
="c9 c2"> import 'package:writer/document.dart';</sp
an></p><p class="c1"><span class="c9 c2"> import 'app.da
rt' as app;</span></p><p class="c1 c4"><span class="c9 c2"></span></p><p cla
ss="c1"><span class="c9 c2"> /**</span></p><p class="c1"><sp
an class="c9 c2"> * This Dart class defines the behavi
or and</span></p><p class="c1"><span class="c9 c2"> *
state of the custom element.</span></p><p class="c1"><span class="c9 c2">
*/</span></p><p class="c1"><span class="c9 c2">
class DocumentItem extends WebComponent {</span></p><p class="c1"><span
class="c9 c2"> Document </span><span class="c9 c2">do
c</span><span class="c9 c2">;</span></p><p class="c1"><span class="c9 c2">
</span></p><p class="c1"><span class="c9 c2">
String get title => doc.title.isEmpty ? 'Untitled' : d
oc.title;</span></p><p class="c1"><span class="c9 c2">  
; </span></p><p class="c1"><span class="c9 c2"> Strin
g get modified => </span><span class="c9 c2">dateFormat</span><span class="c9
c2">.format(doc.modified);</span></p><p class="c1"><span class="c9 c2"> &
nbsp; </span></p><p class="c1"><span class="c9 c2"> &
nbsp; String get isActiveClass => doc == app.activeDocument ? 'act
ive</span><span class="c9 c2">' :</span><span class="c9 c2"> ''
;</span></p><p class="c1"><span class="c9 c2"> }</span></p><
p class="c1"><span class="c2"> </script></span></p><p class="
c1"><span class="c2">…</span></p></td></tr></tbody></table><p class="c3 c
4"><span></span></p><p class="c3"><span class="c9">Note</span><span>: Dart Edito
r doesn't yet fully support Dart code embedded inside of </span><span><sc
ript></span><span> tags. For example, you can't use code completion
inside of a </span><span><script></span><span> tag yet. We anticipate
that the editor will have this functionality in time for 1.0.</span></p><p clas
s="c3 c4"><span class="c2"></span></p><p class="c3"><span>A few notes about the
code above:</span></p><ol class="c14 lst-kix_iqyc5gy523tq-0 start"><li class="c0
c7"><span>The </span><span>DocumentItem</span><span> class acts as a </spa
n><span class="c10">View Model</span><span>, encapsulating any state used by the
view, and linking model classes like Document to the view. We use getters for <
/span><span>title</span><span>, modified, and </span><span>isActiveClass</span><
span> </span><span>because</span><span> calling a getter is shorter th
an calling a method.</span></li><li class="c0 c7"><span>A </span><span>DocumentI
tem</span><span> uses a </span><span>Document</span><span> object, cal
led </span><span>doc</span><span>, for its data model. The </span><span>doc</spa
n><span> field gets initialized when the custom element gets instantiated.
You’ll see this later when you add the sidebar in the HTML code.</span></l
i><li class="c0 c7"><span>The </span><span>Document</span><span> class defi
nes a top-level object, called </span><span>dateFormat</span><span>, used to for
mat the modified date. (Look at the bottom of </span><span class="c9">lib/docume
nt.dart</span><span> </span><span>for the code that creates </span><span>da
teFormat</span><span>.) The </span><span>DateFormat</span><span> class is p
rovided by the </span><span>intl</span><span> package.</span></li></ol><p c
lass="c3 c4"><span></span></p><p class="c3"><span> Save your changes to </s
pan><span class="c9">web/document_item.html</span><span>.</span></p><h3 class="c
3"><a name="h.pg2b8doo4y91"></a><span>Import the custom element into the main HT
ML</span></h3><p class="c3 c4"><span></span></p><p class="c3"><span>To create in
stances of <x-document-item>, the main application's HTML needs to imp
ort the code that defines the custom <x-document-item> tag. Luckily, HTML
already has a mechanism to link to other resources: the <link> tag!</span>
</p><p class="c3 c4"><span></span></p><p class="c3"><span>Open </span><span clas
s="c9">web/index.html</span><span> and add the following code:</span></p><p
class="c3 c4"><span></span></p><a href="#" name="090acfcf20bc970a0ebbc86e3935b6
445f53431d"></a><a href="#" name="8"></a><table cellpadding="0" cellspacing="0"
class="c12"><tbody><tr class="c13"><td class="c6"><p class="c1"><span class="c2"
>// web/index.html</span></p><p class="c1"><span class="c2">…</span></p><
p class="c1"><span class="c2"> <link rel="stylesheet"
type="text/css" href="css.css"></span></p><p class="c1 c4
"><span class="c2"></span></p><p class="c1"><span class="c2"> <!
-- STEP 2: Import the document item component. --></span></p><p class="c1"><s
pan class="c2"> </span><span class="c9 c2"><link rel="impor
t" href="document_item.html"></span></p><p class="c1 c4"><span
class="c2"></span></p><p class="c1"><span class="c2"> </head></span
></p><p class="c1"><span class="c2">…</span></p></td></tr></tbody></table
><p class="c3 c4"><span></span></p><h3 class="c3"><a name="h.eu70myeqpqpx"></a><
span>Add the sidebar</span></h3><p class="c3 c4"><span></span></p><p class="c3">
<span>With the custom element implemented, and imported, time to use <x-docum
ent-item>!</span></p><p class="c3 c4"><span></span></p><p class="c3"><span>Ma
ke sure you are still editing </span><span class="c9">web/index.html</span><span
>. And</span><span> yes, </span><span>you need to write all those comments<
/span><span> just as we have them in the code. You will add more functional
ity in the following steps, so you need the comments to ensure you can orient yo
urself later.</span></p><p class="c3 c4"><span></span></p><p class="c3"><span>Ad
d the following code:</span></p><p class="c3 c4"><span></span></p><a href="#" na
me="d70e43e44b21a0f2da93cec4f6a9b1f60f8acb67"></a><a href="#" name="9"></a><tabl
e cellpadding="0" cellspacing="0" class="c12"><tbody><tr class="c13"><td class="
c6"><p class="c1"><span class="c2">// web/index.html</span></p><p class="c1"><sp
an class="c2">…</span></p><p class="c1"><span class="c2"> <body&
gt;</span></p><p class="c1 c4"><span class="c2"></span></p><p class="c1"><span c
lass="c2"> <!-- STEP 2: Add a sidebar to the application. -->
</span></p><p class="c1"><span class="c2"> </span><span class="c9 c
2"><section id="sidebar" class="{{sidebarClass}}"></sp
an></p><p class="c1"><span class="c9 c2"> <div class=&quo
t;toolbar"></span></p><p class="c1 c4"><span class="c9 c2"></span></p><p
class="c1"><span class="c9 c2"> <!-- STEP 3: Add
a button to create a new document. --></span></p><p class="c1 c4"><span class
="c9 c2"></span></p><p class="c1 c4"><span class="c9 c2"></span></p><p class="c1
"><span class="c9 c2"> <div class="input-wrap
"></span></p><p class="c1"><span class="c9 c2"> &nbs
p; <!-- STEP 4: Add a input box to filter documents. --></span></p>
<p class="c1 c4"><span class="c9 c2"></span></p><p class="c1"><span class="c9 c2
"> </div></span></p><p class="c1"><span class="
c9 c2"> </div></span></p><p class="c1 c4"><span class=
"c9 c2"></span></p><p class="c1"><span class="c9 c2"> <!-
- Documents list --></span></p><p class="c1"><span class="c9 c2">  
; <div class="items"></span></p><p class="c1 c4"><span cl
ass="c9 c2"></span></p><p class="c1"><span class="c9 c2"> &n
bsp; <!-- STEP 3: Iterate over list of documents. --></span></p><p class="
c1 c4"><span class="c9 c2"></span></p><p class="c1"><span class="c9 c2"> &
nbsp; <!-- STEP 2: Add the active document to the sidebar. --&g
t;</span></p><p class="c1"><span class="c9 c2"> </spa
n><span class="c9 c2"><x-document-item doc="{{activeDocument}}">
</x-document-item></span></p><p class="c1 c4"><span class="c9 c2"></span><
/p><p class="c1"><span class="c9 c2"> </div></span></p
><p class="c1 c4"><span class="c9 c2"></span></p><p class="c1"><span class="c9 c
2"> <!-- Also check out dartlang.org! --></span></p><p
class="c1"><span class="c9 c2"> <div class="footer&
quot;></span></p><p class="c1"><span class="c9 c2">  
; <a href="https://github.com/dart-lang/io-2013-dart-codelab">Vi
ew Source</a></span></p><p class="c1"><span class="c9 c2"> &n
bsp; </div></span></p><p class="c1"><span class="c9 c2"> <
/section></span></p><p class="c1 c4"><span class="c2"></span></p><p class="c1
"><span class="c2"> <!-- Editing window --></span></p><p clas
s="c1"><span class="c2"> <section id="main" class=&quo
t;{{mainClass}}"></span></p><p class="c1"><span class="c2">…</spa
n></p></td></tr></tbody></table><p class="c3 c4"><span></span></p><p class="c3">
<span>Take a look at </span><span><x-document-item doc="{{activeDocument
}}"></span><span>. The active document is bound into the </span><span>x-
document-item</span><span> tag via the </span><span>doc</span><span> a
ttribute. </span><span>The </span><span>activeDocument</span><span> object
is a top-level variable from app.dart.</span></p><p class="c3 c4"><span></span><
/p><p class="c3"><span>Save your changes in </span><span class="c9">web/index.ht
ml</span><span> and in </span><span class="c9">web/document_item.html</span
><span>, if you haven’t already done so.</span></p><p class="c3 c4"><span>
</span></p><p class="c3"><span>Depending on the order in which you saved the fil
es, you might see warnings or errors in Dart Editor complaining about unknown cu
stom elements. Try running </span><span class="c9">Tools > Reanalyze Sources<
/span><span>.</span></p><p class="c3 c4"><span></span></p><p class="c3"><span>Ru
n </span><span>the app. On the left side of the app is a sidebar that contains a
document.</span></p><p class="c3 c4"><span></span></p><p class="c3"><img height
="449" src="images/image26.png" width="558"></p><p class="c3 c4"><span></span></
p><hr style="page-break-before:always;display:none;"><p class="c3 c4"><span></sp
an></p><h1 class="c3"><a name="h.yjqv0zg28trz"></a><span>Step 3: Add the ability
to create, delete, and select documents in the list</span></h1><p class="c3 c4"
><span></span></p><p class="c3"><span>In this step, you’ll implement suppo
rt for creating, deleting, and selecting documents. Your code will use an observ
able list to keep track of which documents exist.</span></p><h2 class="c3"><a na
me="h.plhwv16qfiu3"></a><span>What you will learn</span></h2><p class="c3 c4"><s
pan></span></p><ol class="c14 lst-kix_1c0w7icorqz1-0 start"><li class="c0 c7"><s
pan>Using Web UI’s</span><span> toObservable()</span><span> func
tion to make a list observable.</span></li><li class="c0 c7"><span>Using </span>
<span><template iterate...></span><span> to </span><span>create an el
ement </span><span>for each item in a list.</span></li></ol><h2 class="c3"><a na
me="h.t4xdkmcfgxgs"></a><span>Concepts overview</span></h2><h3 class="c3"><a nam
e="h.9plpwum2ndhq"></a><span>The toObservable() function</span></h3><p class="c3
c4"><span></span></p><p class="c3"><span>Use the </span><span>toObservable()</s
pan><span> function from the Web UI library to make a List or a Map observa
ble. In the Writer app, making the list of documents observable enables Web UI t
o update your app’s UI whenever a document is created or deleted.</span></
p><h3 class="c3"><a name="h.q05y2y7gn8pj"></a><span>Template iterate</span></h3>
<p class="c3 c4"><span></span></p><p class="c3"><span>Template loops allow itera
tion over Iterable Dart objects, such as Collections. To create a loop that oper
ates on each item in an Iterable object, use the iterate attribute in a <temp
late> tag. The code below displays the alphabet by looping over a list of str
ings, of which each string contains a single character.</span></p><p class="c3 c
4"><span></span></p><p class="c0"><span class="c2">// in Dart code</span></p><p
class="c0"><span class="c2">List<String> alphabet = toObservable(‘ab
cdefghijklmnopqrstuvwxyz’.split(''));</span></p><p class="c0 c4"><
span class="c2"></span></p><p class="c0"><span class="c2">// in HTML code</span>
</p><p class="c0"><span class="c2"><template iterate="letter in alphabet
"> {{letter}} </template></span></p><h2 class="c3"><a name="h.k15z
6n5pmnu0"></a><span>Walkthrough</span></h2><p class="c3 c4"><span></span></p><p
class="c3"><span>You’ll be editing three files this time: </span><span cla
ss="c9">web/app.dart</span><span>, </span><span class="c9">web/</span><span clas
s="c9">index.html</span><span>, and </span><span class="c9">web/</span><span cla
ss="c9">document_item.html</span><span>.</span></p><p class="c3 c4"><span></span
></p><p class="c3"><span>(</span><span class="c9">Optional</span><span>: Remembe
r that if necessary, you can start with clean files for each step. If you want t
o, close the directory for step 2 and open the </span><span class="c9">io-
2013-codelab-step3</span><span> directory now.</span><span>)</span></p><h3
class="c3"><a name="h.1jxajn4fbphg"></a><span>Add an observable list of document
s</span></h3><p class="c3 c4"><span></span></p><p class="c3"><span>Open </span><
span class="c9">web/app.dart </span><span>and add the line of code shown below t
hat creates an empty, observable list of documents.</span></p><p class="c3 c4"><
span></span></p><a href="#" name="003e7a132719843844266db196a529a3a66c108e"></a>
<a href="#" name="10"></a><table cellpadding="0" cellspacing="0" class="c12"><tb
ody><tr class="c13"><td class="c6"><p class="c1"><span class="c2">// web/app.dar
t</span></p><p class="c1 c4"><span class="c2"></span></p><p class="c1"><span cla
ss="c2">// STEP 3: Add an observed list of documents.</span></p><p class="c1"><s
pan class="c9 c2">final List<Document> documents = toObservable([]);</span
></p></td></tr></tbody></table><p class="c3 c4"><span></span></p><h3 class="c3">
<a name="h.rcpcobm9frxp"></a><span>Add functions for creating, deleting, and sel
ecting documents</span></h3><p class="c3 c4"><span></span></p><p class="c3"><spa
n>First, let’s implement </span><span>creating documents</span><span>.</sp
an></p><p class="c3 c4"><span></span></p><p class="c3"><span>Continue editing </
span><span class="c9">web/app.dart</span><span>.</span></p><p class="c3 c4"><spa
n></span></p><p class="c3"><span>Add the </span><span>createDocument()</span><sp
an> function to </span><span class="c9">web/app.dart </span><span>where ind
icated by the comments. The new function calls another function, called </span><
span>selectDocument(), which</span><span> is not defined yet and about whic
h Dart Editor issues warnings. You’ll add that function just below, so ign
ore the warnings for now.</span></p><p class="c3 c4"><span></span></p><a href="#
" name="112b879928f02a95f8bcca548aa41841e8a73a8c"></a><a href="#" name="11"></a>
<table cellpadding="0" cellspacing="0" class="c12"><tbody><tr class="c13"><td cl
ass="c6"><p class="c1"><span class="c2">// web/app.dart</span></p><p class="c1 c
4"><span class="c2"></span></p><p class="c1"><span class="c2">// STEP 3: Create
a new document.</span></p><p class="c1"><span class="c9 c2">void createDocument(
) {</span></p><p class="c1"><span class="c9 c2"> // Create a new document.
</span></p><p class="c1"><span class="c9 c2"> var doc = new Document('
Untitled', '');</span></p><p class="c1"><span class="c9 c2"> d
ocuments.add(doc);</span></p><p class="c1"><span class="c9 c2"> selectDocu
ment(doc);</span></p><p class="c1"><span class="c9 c2">}</span></p></td></tr></t
body></table><p class="c3 c4"><span></span></p><p class="c3"><span>Next, let&rsq
uo;s implement deleting a document.</span></p><p class="c3 c4"><span></span></p>
<a href="#" name="bc8ccafb5db8bb95790c033c16fcedeb2df622ab"></a><a href="#" name
="12"></a><table cellpadding="0" cellspacing="0" class="c12"><tbody><tr class="c
13"><td class="c6"><p class="c1"><span class="c2">// web/app.dart</span></p><p c
lass="c1 c4"><span class="c2"></span></p><p class="c1"><span class="c2">// STEP
3: Add code to delete a document</span></p><p class="c1"><span class="c9 c2">voi
d deleteDocument(Document doc) {</span></p><p class="c1"><span class="c9 c2">&nb
sp; documents.remove(doc);</span></p><p class="c1 c4"><span class="c9 c2"></span
></p><p class="c1"><span class="c9 c2"> // STEP 5: Also delete from local
storage.</span></p><p class="c1"><span class="c9 c2">}</span></p></td></tr></tbo
dy></table><p class="c3 c4"><span></span></p><p class="c3"><span>Now</span><span
>, let’s implement setting the currently selected, or </span><span class="
c10">active</span><span>,</span><span> document. </span></p><p class="c3 c4
"><span></span></p><a href="#" name="c3a16027a88e8921f4c86fe09a9c48ae6bd5735d"><
/a><a href="#" name="13"></a><table cellpadding="0" cellspacing="0" class="c12">
<tbody><tr class="c13"><td class="c6"><p class="c1"><span class="c2">// web/app.
dart</span></p><p class="c1 c4"><span class="c2"></span></p><p class="c1"><span
class="c2">// STEP 3: Add code to select a document.</span></p><p class="c1"><sp
an class="c9 c2">void selectDocument(Document doc, </span><span class="c9 c2">{b
ool markActive: false}</span><span class="c9 c2">) {</span></p><p class="c1"><sp
an class="c9 c2"> if (documents.isEmpty) {</span></p><p class="c1"><span c
lass="c9 c2"> activeDocument = null;</span></p><p class="c1"><span
class="c9 c2"> } else if (doc != null && documents.contains(doc) &
amp;& doc != activeDocument) {</span></p><p class="c1"><span class="c9 c2">&
nbsp; // Change active document.</span></p><p class="c1"><span class="c9
c2"> activeDocument = doc;</span></p><p class="c1"><span class="c9
c2"> } else if (activeDocument != null && documents.contains(activ
eDocument)) {</span></p><p class="c1"><span class="c9 c2"> // Stay
on the active document and display the editing window.</span></p><p class="c1"><
span class="c9 c2"> contentActive = markActive && doc == ac
tiveDocument;</span></p><p class="c1"><span class="c9 c2"> } </span><span
class="c9 c2">else</span><span class="c9 c2"> {</span></p><p class="c1"><sp
an class="c9 c2"> // Fall back to the last document.</span></p><p c
lass="c1"><span class="c9 c2"> activeDocument = documents.last;</sp
an></p><p class="c1"><span class="c9 c2"> }</span></p><p class="c1"><span
class="c9 c2">}</span></p></td></tr></tbody></table><p class="c3 c4"><span></spa
n></p><p class="c3"><span>A quick note about Dart syntax. The second argument, m
arkActive, is optional as indicated by the curly brackets. If the caller does no
t provide the argument, the value is </span><span>false.</span></p><p class="c3
c4"><span></span></p><p class="c3"><span>Save </span><span class="c9">web/app.da
rt</span><span>. The Dart Editor warnings should go away.</span></p><h3 class="c
3"><a name="h.t585uroxp75j"></a><span>Add document initialization to main()</spa
n></h3><p class="c3 c4"><span></span></p><p class="c3"><span>We need a little mo
re Dart code</span><span> to create</span><span> and select the first
document.</span></p><p class="c3 c4"><span></span></p><p class="c3"><span>Find t
he </span><span>main()</span><span> function and add two lines of code:</sp
an></p><p class="c3 c4"><span></span></p><a href="#" name="636d1459fe267ed85fead
5b269c905a57617660a"></a><a href="#" name="14"></a><table cellpadding="0" cellsp
acing="0" class="c12"><tbody><tr class="c13"><td class="c6"><p class="c1"><span
class="c2">// web/app.dart</span></p><p class="c1 c4"><span class="c2"></span></
p><p class="c1"><span class="c2">void main() {</span></p><p class="c1"><span cla
ss="c2"> // STEP 5: Initialize with all documents from local storage.</spa
n></p><p class="c1 c4"><span class="c2"></span></p><p class="c1"><span class="c2
"> // STEP 3: Create a new document if there are none.</span></p><p class=
"c1"><span class="c9 c2"> if (documents.isEmpty) createDocument();</span><
/p><p class="c1 c4"><span class="c2"></span></p><p class="c1"><span class="c2">&
nbsp; // STEP 3: Select the first document in the list of documents.</span></p><
p class="c1"><span class="c9 c2"> selectDocument(documents.first);</span><
/p><p class="c1"><span class="c9 c2">}</span></p></td></tr></tbody></table><p cl
ass="c3 c4"><span></span></p><p class="c3"><span>Save </span><span class="c9">we
b/app.dart</span><span>.</span></p><p class="c3 c4"><span></span></p><p class="c
3"><span>Now that we have </span><span>functions that let us create, delete, and
select </span><span>documents, we can create elements that provide a UI to use
that functionality.</span></p><h3 class="c3"><a name="h.svl18lwba5l4"></a><span>
Create new elements in web/index.html</span></h3><p class="c3 c4"><span></span><
/p><p class="c3"><span>Open </span><span class="c9">web/index.html</span><span>.
</span></p><p class="c3 c4"><span></span></p><p class="c3"><span>Create a + butt
on, and set our new </span><span>createDocument()</span><span> function as
the button’s mouse click callback function.</span></p><p class="c3 c4"><sp
an></span></p><a href="#" name="7ba1693380e842805638eca678d2e0155401c2cc"></a><a
href="#" name="15"></a><table cellpadding="0" cellspacing="0" class="c12"><tbod
y><tr class="c13"><td class="c6"><p class="c1"><span class="c2">// web/index.htm
l</span></p><p class="c1 c4"><span class="c2"></span></p><p class="c1"><span cla
ss="c2"> <div class="toolbar"></span></p><p
class="c1 c4"><span class="c2"></span></p><p class="c1"><span class="c2">
<!-- STEP 3: Add a button to create a new document. --&g
t;</span></p><p class="c1"><span class="c9 c2"> </span><span
class="c9 c2"> <button on-click="createDocument()">+</
button></span></p><p class="c1"><span class="c2">...</span></p></td></tr></tb
ody></table><p class="c3 c4"><span></span></p><p class="c3"><span>Delete the old
code that created a single </span><span><x-document-item></span><span>, a
nd replace it with code that creates one </span><span><x-document-item></s
pan><span> for each item in the documents list.</span></p><p class="c3 c4">
<span></span></p><a href="#" name="8e2e7b784dd6a79a105a04e54a79d0730d45d82a"></a
><a href="#" name="16"></a><table cellpadding="0" cellspacing="0" class="c12"><t
body><tr class="c13"><td class="c6"><p class="c1"><span class="c2">// web/index.
html</span></p><p class="c1 c4"><span class="c2"></span></p><p class="c1"><span
class="c2"> <!-- STEP 3: Iterate over list of docu
ments. --></span></p><p class="c1"><span class="c9 c2"> &
nbsp; <template iterate="doc in documents"></span></p><p class="
c1 c4"><span class="c9 c2"></span></p><p class="c1"><span class="c9 c2"> &
nbsp; <!-- STEP 4: Hide documents that don't match s
earch filter. --></span></p><p class="c1 c4"><span class="c9 c2"></span></p><
p class="c1"><span class="c9 c2"> <!-- Our
custom document element! --></span></p><p class="c1"><span class="c9 c2">&nbs
p; <x-document-item doc="{{doc}}">&l
t;/x-document-item></span></p><p class="c1"><span class="c9 c2">
</template></span></p><p class="c1 c4"><span class="c22 c2"
></span></p><p class="c1"><span class="c22 c2"><!-- STEP 2: Add the active do
cument to the sidebar. --></span></p><p class="c1"><span class="c22 c2"><x
-document-item doc="{{activeDocument}}"></x-document-item></s
pan></p></td></tr></tbody></table><p class="c3 c4"><span></span></p><p class="c3
"><span>Save </span><span class="c9">web/index.html</span><span>.</span></p><h3
class="c3"><a name="h.v26yzo8ksmbq"></a><span>Add code to select a document and
to delete a document</span></h3><p class="c3 c4"><span></span></p><p class="c3">
<span>Open </span><span class="c9">web/document_item.html</span><span>.</span></
p><p class="c3 c4"><span></span></p><p class="c3"><span>Now that we have </span>
<span>selectDocument()</span><span> and </span><span>deleteDocument() funct
ions</span><span>, our custom component can use them. The following code uses th
e new selection function and adds an “X” button to </span><span><
x-document-item></span><span> that deletes the item.</span></p><p class=
"c3 c4"><span></span></p><a href="#" name="e9cd1b499b5eac19bda4a5eb9b038274db4f6
e03"></a><a href="#" name="17"></a><table cellpadding="0" cellspacing="0" class=
"c12"><tbody><tr class="c13"><td class="c6"><p class="c1"><span class="c2">// we
b/document_item.html</span></p><p class="c1 c4"><span class="c2"></span></p><p c
lass="c1"><span class="c2"> <!-- STEP 3: On click, select
the document. --></span></p><p class="c3 c24"><span class="c2">
</span><span class="c2"> </span><span class="c22 c2"><div</span
><span class="c22 c2"> </span><span class="c22 c2">class=</span><span class
="c22 c2">"item {{isActiveClass}}"</span><span class="c22 c2">></sp
an></p><p class="c3 c24"><span class="c2"> </span><sp
an class="c9 c2"><div class="item {{isActiveClass}}"</span></p><p c
lass="c1"><span class="c2"> </span><span class="c2"> &
nbsp; </span><span class="c9 c2"> </span><span class="c9 c2">on-clic
k="app.selectDocument(doc, markActive: true)"</span><span class="c9 c2
">></span></p><p class="c1"><span class="c2">…</span></p><p class="c1"
><span class="c2"> <!-- STEP 3: Add delete
button. --></span></p><p class="c1"><span class="c2"> &nb
sp; </span><span class="c9 c2"><button class="delete" on-cli
ck="</span><span class="c9 c2">app.</span><span class="c9 c2">deleteDocumen
t</span><span class="c9 c2">(doc)">&times;</button></span></p>
</td></tr></tbody></table><p class="c3 c4"><span></span></p><p class="c3"><span>
Save </span><span class="c9">web/document_item.html</span><span>.</span></p><h3
class="c3"><a name="h.1e11ugbr3dv7"></a><span>Try out the new functionality</spa
n></h3><p class="c3 c4"><span></span></p><p class="c3"><span>Try it out! </span>
<span>Run the app.</span></p><ol class="c14 lst-kix_vvzditg8sno-0 start"><li cla
ss="c0 c7"><span>Click the + button to create a new document.</span></li><li cla
ss="c0 c7"><span>Type in some text.</span></li><li class="c0 c7"><span>Change th
e document name.</span></li><li class="c0 c7"><span>Click on a document in the s
idebar to select a document. A </span><span class="c9 c18">red</span><span> 
;vertical line appears on the left and its contents appears in the text area.</s
pan></li><li class="c0 c7"><span>Hover the mouse over a document in the sidebar
and an ‘X’ appears. Click the ‘X’ to delete the document
.</span></li></ol><p class="c3 c4"><span class="c2"></span></p><p class="c3"><im
g height="514" src="images/image07.png" width="512"></p><p class="c3 c4"><span><
/span></p><h1 class="c3 c27"><a name="h.ajf00hxdo4zq"></a></h1><h1 class="c3"><a
name="h.1lmhpmupb94f"></a><span>Step 4: Add a search bar</span></h1><p class="c
3 c4"><span></span></p><p class="c3"><span>In this step, you will learn how to c
onnect an HTML input field to a Dart object, and then conditionally display DOM
elements based on the contents from the input field.</span></p><h2 class="c3"><a
name="h.qrimtew7kc7q"></a><span>What you will learn</span></h2><p class="c3 c4"
><span></span></p><ol class="c14 lst-kix_32zxnvl59py3-0 start"><li class="c0 c7"
><span>Instantiate DOM elements based on conditionals.</span></li><li class="c0
c7"><span>Bind an input field to a Dart object (aka two-way data binding).</span
></li></ol><h2 class="c3"><a name="h.ps3mbo8ceq0c"></a><span>Concepts overview</
span></h2><h3 class="c3"><a name="h.8ja6vc9pug1j"></a><span>Template conditional
s</span></h3><p class="c3 c4"><span></span></p><p class="c3"><span>The contents
of a </span><span><template></span><span> tag can be added to, or rem
oved from, the DOM based on a </span><span class="c10">conditional</span><span>.
If a conditional is true, the contents of the </span><span><template></sp
an><span> are added to the DOM (in other words, the contents are displayed
on the page). If the conditional is false, the contents are removed from the pag
e.</span></p><p class="c3 c4"><span></span></p><p class="c3"><span>Here is a sim
ple example of a conditional template:</span></p><p class="c3 c4"><span></span><
/p><p class="c0"><span class="c2"><template if="user.</span><span class=
"c2">agreedToTOS</span><span class="c2">"></span></p><p class="c0"><span
class="c2"> Thanks for clicking agree!</span></p><p class="c0"><span clas
s="c2"></template></span></p><p class="c0 c4"><span></span></p><p class="c
3"><span>Every time the conditional changes (from false to true, or from true to
false), the contents are added or removed.</span></p><h3 class="c3"><a name="h.
2ud8exsdflt4"></a><span>Field binding</span></h3><p class="c3 c4"><span></span><
/p><p class="c3"><span>An HTML input field, such as a text input, can be bound t
o a Dart object. Whenever the input field's value changes, the </span><span>
Dart object</span><span>'s value </span><span>change</span><span>s. Whenever
the Dart object's value changes, the input field changes. This is known as
</span><span class="c10">two-way binding</span><span>.</span></p><p class="c3 c4
"><span></span></p><p class="c3"><span>Here is a simple User class:</span></p><p
class="c3 c4"><span></span></p><p class="c0"><span class="c2">class User {</spa
n></p><p class="c0"><span class="c2"> String username;</span></p><p class=
"c0"><span class="c2">}</span></p><p class="c3 c4"><span></span></p><p class="c3
"><span>Here is a simple example of an input field binding:</span></p><p class="
c3 c4"><span></span></p><p class="c0"><span class="c2"><input type="text
" name="username" bind-value="</span><span class="c2">user.u
sername"></span></p><p class="c3 c4"><span></span></p><p class="c3"><spa
n>The value property of the input field is bound to the username field of the </
span><span class="c17">user</span><span> object—an instance of the </
span><span class="c17">User</span><span> class.</span></p><h2 class="c3"><a
name="h.7otqcta04eui"></a><span>Walkthrough</span></h2><h3 class="c3"><a name="
h.gywvipbftj46"></a><span>Create a new library</span></h3><p class="c3 c4"><span
></span></p><p class="c3"><span>To help you get started, we've given you the
shell for the new search library.</span></p><p class="c3 c4"><span></span></p><
ol class="c14 lst-kix_nhaic9xr6pf-0 start"><li class="c0 c7"><span>Right-click o
n the </span><span class="c9">lib</span><span> directory and select "<
/span><span class="c9">New File</span><span>".</span></li><li class="c0 c7"
><span>Name this file "search.dart".</span></li><li class="c0 c7"><spa
n>Open </span><span class="c9">__for_later/search.dart</span><span>, copy its co
ntents, and paste into </span><span class="c9">lib/search.dart</span><span>.</sp
an></li></ol><h3 class="c3"><a name="h.3tpsh4ob2nhr"></a><span>Observe the searc
h filter</span></h3><p class="c3 c4"><span></span></p><p class="c3"><span>You ne
ed to add a top-level field that will contain the search filter.</span></p><p cl
ass="c3 c4"><span></span></p><p class="c3"><span>Add the following code to </spa
n><span class="c9">lib/search.dart</span><span>.</span></p><p class="c3 c4"><spa
n></span></p><a href="#" name="a042056057108e3f45766defec5c9081e7b61fd4"></a><a
href="#" name="18"></a><table cellpadding="0" cellspacing="0" class="c12"><tbody
><tr class="c13"><td class="c6"><p class="c1"><span class="c2">// lib/search.dar
t</span></p><p class="c1 c4"><span class="c2"></span></p><p class="c1"><span cla
ss="c2">import 'package:writer/document.dart';</span></p><p class="c1 c4
"><span class="c2"></span></p><p class="c1"><span class="c2">// STEP 4: Add an o
bserved string to filter documents.</span></p><p class="c1"><span class="c9 c2">
@observable</span></p><p class="c1"><span class="c9 c2">String searchFilter = &#
39;';</span></p><p class="c1"><span class="c2">…</span></p></td></tr>
</tbody></table><p class="c3 c4"><span></span></p><h3 class="c3"><a name="h.1i3d
q5f7oc85"></a><span>Filter documents</span></h3><p class="c3 c4"><span></span></
p><p class="c3"><span>Now that you have an observable </span><span>searchFilter<
/span><span> string, you can filter documents.</span></p><p class="c3 c4"><
span></span></p><p class="c3"><span>Inside of </span><span class="c9">lib/search
.dart</span><span>, add the following code:</span></p><p class="c3 c4"><span></s
pan></p><a href="#" name="dd9b7b447779506c855362f9779578a1cba8ee6f"></a><a href=
"#" name="19"></a><table cellpadding="0" cellspacing="0" class="c12"><tbody><tr
class="c13"><td class="c6"><p class="c1"><span class="c2">// lib/search.dart</sp
an></p><p class="c1 c4"><span class="c2"></span></p><p class="c1"><span class="c
2">// STEP 4: Add function to check if a document matches the search filter.</sp
an></p><p class="c1"><span class="c9 c2">bool matchesSearchFilter(Document doc)
{</span></p><p class="c1"><span class="c9 c2"> if (searchFilter.isEmpty) {
</span></p><p class="c1"><span class="c9 c2"> return </span><span c
lass="c9 c2">true</span><span class="c9 c2">;</span></p><p class="c1"><span clas
s="c9 c2"> }</span></p><p class="c1 c4"><span class="c9 c2"></span></p><p
class="c1"><span class="c9 c2"> return doc.title.toLowerCase().contains(se
archFilter.toLowerCase()) ||</span></p><p class="c1"><span class="c9 c2">
doc.content.toLowerCase().contains(searchFilter.toLow
erCase());</span></p><p class="c1"><span class="c9 c2">}</span></p></td></tr></t
body></table><p class="c3 c4"><span></span></p><p class="c3"><span>Notice that <
/span><span>searchFilter.isEmpty</span><span> is a </span><span class="c10"
>getter</span><span>—it doesn’t have trailing parentheses.</span></p
><p class="c3 c4"><span></span></p><p class="c3"><span>Save your changes.</span>
</p><h3 class="c3"><a name="h.obmom9hrtjt0"></a><span>Import search into app</sp
an></h3><p class="c3 c4"><span></span></p><p class="c3"><span>With the search li
brary complete, you need to import it into the main application.</span></p><p cl
ass="c3 c4"><span></span></p><p class="c3"><span>Open </span><span class="c9">we
b/app.dart</span><span class="c9"> </span><span>and add the following code:
</span></p><p class="c3 c4"><span></span></p><a href="#" name="6d5fb425ce24bad33
322b62ea263a2e8ca1e30e2"></a><a href="#" name="20"></a><table cellpadding="0" ce
llspacing="0" class="c12"><tbody><tr class="c13"><td class="c6"><p class="c1"><s
pan class="c2">// web/app.dart</span></p><p class="c1 c4"><span class="c2"></spa
n></p><p class="c1"><span class="c2">import 'package:writer/document.dart
9;;</span></p><p class="c1 c4"><span class="c2"></span></p><p class="c1"><span c
lass="c2">// STEP 4: Import search.dart.</span></p><p class="c1"><span class="c9
c2">import 'package:writer/search.dart';</span></p><p class="c1 c4"><sp
an class="c2"></span></p><p class="c1"><span class="c2">// STEP 5: Import storag
e.dart.</span></p><p class="c1"><span class="c9 c2">…</span></p></td></tr
></tbody></table><p class="c3 c4"><span></span></p><p class="c3"><span>To keep t
he path to </span><span class="c9">search.dart</span><span class="c9"> </sp
an><span>relative to </span><span class="c9">app.dart</span><span>, we use the <
/span><span>package:</span><span> import method to import the search.dart l
ibrary from the writer package. The </span><span class="c9">pubspec.yaml</span><
span class="c9"> </span><span>file declares the writer package. The </span>
<span>pub</span><span> command creates all the necessary symlinks to allow
you to not have to create import paths like '</span><span>../../lib/search.d
art</span><span>'.</span></p><p class="c3 c4"><span></span></p><p class="c3"
><span>Save your changes.</span></p><h3 class="c3"><a name="h.uf0oq3wrab9x"></a>
<span>Input field for filter</span></h3><p class="c3 c4"><span></span></p><p cla
ss="c3"><span>Let's turn our attention to the HTML for the search box. You a
dded the observable </span><span>searchFilter</span><span> field in </span>
<span>search.dart</span><span>, now let's bind that into an HTML input field
.</span></p><p class="c3 c4"><span></span></p><p class="c3"><span>Open </span><s
pan class="c9">web/index.html</span><span class="c9"> </span><span>and add
the following code:</span></p><p class="c3 c4"><span></span></p><a href="#" name
="4d0cc0c5260d42270a69014b961ab05e5235b5d1"></a><a href="#" name="21"></a><table
cellpadding="0" cellspacing="0" class="c12"><tbody><tr class="c13"><td class="c
6"><p class="c1"><span class="c2">// web/index.html</span></p><p class="c1"><spa
n class="c2">…</span></p><p class="c1"><span class="c2"> &nb
sp; <div class="input-wrap"></span></p><p class="c1"><spa
n class="c2"> <!-- STEP 4: Add a input box
to filter documents. --></span></p><p class="c1"><span class="c2"> &nbs
p; </span><span class="c9 c2"><input type="text&quo
t; placeholder="Filter documents..." bind-value="searchFilter&quo
t;></span></p><p class="c1"><span class="c2"> </sp
an><span class="c2"></</span><span class="c2">div</span><span class="c2">>
</span></p><p class="c1"><span class="c2">…</span></p></td></tr></tbody><
/table><p class="c3 c4"><span></span></p><p class="c3"><span>The variable name <
/span><span class="c10">searchFilter</span><span> must match the string ins
ide of the bind-value attribute.</span></p><h3 class="c3"><a name="h.mtf4udav2d7
n"></a><span>Dynamically hide or show docs based on the filter</span></h3><p cla
ss="c3 c4"><span></span></p><p class="c3"><span>When the search filter changes,
we want to dynamically update the documents displayed on the page.</span></p><p
class="c3 c4"><span></span></p><p class="c3"><span>Continue editing </span><span
class="c9">web/index.html</span><span class="c9"> </span><span>and add the
following code:</span></p><p class="c3 c4"><span></span></p><a href="#" name="6
d3da29ef7fd3926adfaf6eb70944e90a5d04c92"></a><a href="#" name="22"></a><table ce
llpadding="0" cellspacing="0" class="c12"><tbody><tr class="c13"><td class="c6">
<p class="c1"><span class="c2">// web/index.html</span></p><p class="c1"><span c
lass="c2">…</span></p><p class="c1"><span class="c2">
<!-- STEP 3: Iterate over list of documents. --></span></p><p clas
s="c1"><span class="c2"> <template iterate="d
oc in documents"></span></p><p class="c1 c4"><span class="c2"></span></p
><p class="c1"><span class="c2"> <!-- STEP
4: Hide documents that don't match search filter. --></span></p><p class=
"c1"><span class="c9 c2"> <template if=&quo
t;matchesSearchFilter(doc)"></span></p><p class="c1 c4"><span class="c2"
></span></p><p class="c1"><span class="c2"> &n
bsp; <!-- Our custom document element! --></span></p><p class="c1"><span c
lass="c2"> <x-document-item doc=&quo
t;{{doc}}"></x-document-item></span></p><p class="c1"><span class=
"c9 c2"> </template></span></p><p class=
"c1 c4"><span class="c2"></span></p><p class="c1"><span class="c2">
</template></span></p><p class="c1"><span class="c2">&helli
p;</span></p></td></tr></tbody></table><p class="c3 c4"><span></span></p><p clas
s="c3"><span>Notice that you are placing the conditional template within the tem
plate loop.</span></p><p class="c3 c4"><span></span></p><p class="c3"><span>The
Web UI library knows that </span><span>matchesSearchFilter</span><span> rel
ies on </span><span>searchFilter</span><span>, so whenever </span><span>searchFi
lter</span><span> changes, it re-runs this template. Only those documents t
hat pass </span><span>matchesSearchFilter</span><span> will be displayed wi
th the custom </span><span><x-document-item></span><span> tag.</span>
</p><p class="c3 c4"><span></span></p><h2 class="c3"><a name="h.j1j21dxjix9k"></
a><span>Run the code</span></h2><p class="c3"><span>Time to run the code! After
completing this step, you should be able to search for documents by title or con
tents. The search results are live. </span><span class="c10">Note</span><span>:
there is a known bug, if the currently opened document does not match the filter
, it won't disappear.</span></p><p class="c3 c4"><span></span></p><p class="
c3"><img height="294" src="images/image10.jpg" width="506"></p><p class="c3 c4">
<span></span></p><p class="c3"><span>If you do not see the input field for the f
ilter, run </span><span class="c9">Tools > Reanalyze Sources</span><span>.</s
pan></p><hr style="page-break-before:always;display:none;"><p class="c3 c4"><spa
n></span></p><h1 class="c3"><a name="h.fwk2fgwdpcgv"></a><span>Step 5: Adding lo
cal storage</span></h1><p class="c3 c4"><span></span></p><p class="c3"><span>In
this step, you learn how to save the user’s documents in local storage, an
d later to remove the documents. In addition to saving the documents in local st
orage, the app also maintains a list of document IDs in local storage. The </spa
n><span>main()</span><span> function uses </span><span>this </span><span>li
st to initialize the app and load the first document. The app saves the document
s as JSON-formatted strings. You also learn how to use the JSON library to seria
lize and revive the document contents.</span></p><h2 class="c3"><a name="h.69edv
k1ggsqx"></a><span>What you will learn</span></h2><p class="c3 c4"><span></span>
</p><ol class="c14 lst-kix_2uog6ch44jpu-0 start"><li class="c0 c7"><span>Save do
cuments in local storage.</span></li><li class="c0 c7"><span>Remove documents fr
om local storage.</span></li><li class="c0 c7"><span>Maintain a list of document
IDs in local storage.</span></li><li class="c0 c7"><span>Use JSON to read and w
rite the contents of the documents.</span></li></ol><h2 class="c3"><a name="h.sj
arbfxvehu8"></a><span>Concepts overview</span></h2><h3 class="c3"><a name="h.ugi
5xom80b1x"></a><span>Local storage</span></h3><p class="c3 c4"><span></span></p>
<p class="c3"><span>Local storage can be </span><span>use</span><span> to k
eep persistent data between invocations of your app. The data may only be access
ed by the origin that created it. The Window object that hosts the web app has a
localStorage object that your code can use to store and retrieve data. The loca
l storage object is implemented as a Map<String, String>. </span></p><p cl
ass="c3 c4"><span></span></p><p class="c3"><span>Save data in local storage by p
utting a key/value pair in the localStorage object.</span></p><p class="c3 c4"><
span></span></p><p class="c0"><span class="c2">window.localStorage['key1'
;] = 'val1';<br>window.localStorage['key2'] = 'val2';<br
>window.localStorage['key3'] = 'val3';</span></p><p class="c3 c4
"><span class="c17"></span></p><p class="c3"><span>Delete data from local storag
e by removing a key/value pair from the </span><span>localStorage</span><span>&n
bsp;object.</span></p><p class="c3 c4"><span></span></p><p class="c0"><span clas
s="c2">window.localStorage.</span><span class="c2">remove</span><span class="c2"
>(['key1']);</span></p><p class="c3 c4"><span></span></p><p class="c3"><
span>You can use </span><span><a class="c16" href="http://api.dartlang.org/dart_
core/Map.html">Map</a></span><span> APIs such as containsValue(), clear(),
and length:</span></p><p class="c3 c4"><span></span></p><p class="c0"><span clas
s="c2">assert(window.localStorage.containsValue('does not exist') == fal
se);<br>window.localStorage.clear();<br>assert(window.localStorage.length == 0);
</span></p><h3 class="c3"><a name="h.o8ej7ha012l6"></a><span>JSON</span></h3><p
class="c3 c4"><span></span></p><p class="c3"><span>JSON is a text-based, human-f
riendly format for representing data of different types. The dart:json library h
as two useful functions for converting data to/from JSON: stringify() and parse(
). Here’s a small example that converts a list of objects to JSON and back
again.</span></p><p class="c3 c4"><span></span></p><p class="c0"><span class="c
2">import </span><span class="c2">'</span><span class="c2">dart:json</span><
span class="c2">'</span><span class="c2"> as JSON;</span></p><p class="
c0 c4"><span class="c2"></span></p><p class="c0"><span class="c2">var list = [1,
"two", 3.0];
// a list of objects</span></p><p class="c0"><span class="c2">String listAsStrin
g = JSON.stringify(list); // convert list of objects to JSON string</span></p><p
class="c0"><span class="c2">print(listAsString); &n
bsp; // [1,"two",3.0]<
/span></p><p class="c0"><span class="c2">var revivedList = JSON.parse(listAsStri
ng); // convert JSON string to list object</span></p><p class="c0"><span class="
c2">print(revivedList);
// [1, two, 3.0]</span></p><h2 class="c3"><a name="h
.36ilmen4pg0r"></a><span>Walkthrough</span></h2><h3 class="c3"><a name="h.q7i5j5
8pkjsj"></a><span>Create a library to handle local storage.</span></h3><p class=
"c3 c4"><span></span></p><p class="c3"><span>This step requires you to edit thre
e files: </span><span class="c9">lib/</span><span class="c9">storage.dart</span>
<span>, </span><span class="c9">web/</span><span class="c9">index.html</span><sp
an>, and </span><span class="c9">web/</span><span class="c9">app.dart</span><spa
n>. Let’s begin with </span><span class="c9">storage.dart</span><span>.</s
pan></p><h3 class="c3"><a name="h.3tndkjgajsf7"></a><span>Save a document to loc
al storage. Add the document ID to the list.</span></h3><p class="c3 c4"><span><
/span></p><p class="c3"><span>To help you get started, we've given you the s
hell for the new local storage library.</span></p><p class="c3 c4"><span></span>
</p><ol class="c14 lst-kix_hm47sef7muk-0 start"><li class="c0 c7"><span>Right-cl
ick on the </span><span class="c9">lib</span><span> directory and select &q
uot;</span><span class="c9">New File</span><span>".</span></li><li class="c
0 c7"><span>Name this file "storage.dart".</span></li><li class="c0 c7
"><span>Open </span><span class="c9">__for_later/storage.dart, </span><span>copy
its contents, and paste it into </span><span class="c9">lib/storage.dart</span>
<span>.</span></li></ol><p class="c3 c4"><span></span></p><p class="c3"><span>Mo
dify the </span><span>saveDocument()</span><span> function. Add the code, s
hown in bold below,</span></p><ol class="c14 lst-kix_pza3ybm1wtg3-0 start"><li c
lass="c0 c7"><span>to convert the document to a JSON-formatted string and save i
t in the window’s local storage,</span></li><li class="c0 c7"><span>to add
the document ID to the internal list of IDs, if necessary,</span></li><li class
="c0 c7"><span>and finally, to save the list of document IDs, in JSON format, to
the local storage</span><span>.</span></li></ol><p class="c3 c4"><span></span><
/p><a href="#" name="11f012b03fe1c09376f0858633759211354f25a7"></a><a href="#" n
ame="23"></a><table cellpadding="0" cellspacing="0" class="c12"><tbody><tr class
="c13"><td class="c6"><p class="c1"><span class="c2">// storage.dart</span></p><
p class="c1"><span class="c2">…</span></p><p class="c1"><span class="c2">
<!-- Document title --></span></p><p cl
ass="c1"><span class="c2">/// Save the document to local storage.</span></p><p c
lass="c1"><span class="c2">void saveDocument(Document doc) {</span></p><p class=
"c1"><span class="c2"> // STEP 5: Save the serialized version of the docum
ent to local storage.</span></p><p class="c1"><span class="c9 c2"> window.
localStorage[doc.id] = doc.toJson();</span></p><p class="c1 c4"><span class="c2"
></span></p><p class="c1"><span class="c2"> // STEP 5: Add the new documen
t ID to our list of document IDs.</span></p><p class="c1"><span class="c2"> 
; </span><span class="c9 c2">if </span><span class="c9 c2">(!_storedIds.contains
(doc.id)) {</span></p><p class="c1"><span class="c9 c2"> _storedIds
.add(</span><span class="c9 c2">doc.id);</span></p><p class="c1"><span class="c9
c2"> }</span></p><p class="c1 c4"><span class="c2"></span></p><p class="c
1"><span class="c2"> // STEP 5: Update local storage map of IDs.</span></p
><p class="c1"><span class="c9 c2"> window.localStorage[DOCUMENT_ID_KEY] =
JSON.stringify(_storedIds);</span></p><p class="c1"><span class="c2">}</span></
p><p class="c1 c4"><span class="c2"></span></p><p class="c1"><span class="c2">&h
ellip;</span></p></td></tr></tbody></table><p class="c3 c4"><span></span></p><h3
class="c3"><a name="h.wjjh2u48r262"></a><span>Remove the document from local st
orage. Remove the document ID from the list.</span></h3><p class="c3 c4"><span><
/span></p><p class="c3"><span>Continue editing </span><span class="c9">lib/</spa
n><span class="c9">storage.dart</span><span>.</span></p><p class="c3 c4"><span><
/span></p><p class="c3"><span>Modify the </span><span>removeDocument()</span><sp
an> function. Add the code</span></p><ol class="c14 lst-kix_qz5wp1hdd24k-0
start"><li class="c0 c7"><span>to remove the document ID from the internal list,
</span></li><li class="c0 c7"><span>to remove the document from local storage, <
/span></li><li class="c0 c7"><span>and to save the list of document IDs in local
storage.</span></li></ol><p class="c3 c4"><span></span></p><a href="#" name="31
77dcfaa26d24b52d0428abf91f2cb328fae133"></a><a href="#" name="24"></a><table cel
lpadding="0" cellspacing="0" class="c12"><tbody><tr class="c13"><td class="c6"><
p class="c1"><span class="c2">// storage.dart</span></p><p class="c1"><span clas
s="c2">…</span></p><p class="c1"><span class="c2">/// Removes the documen
t from local storage.</span></p><p class="c1"><span class="c2">void removeDocume
nt(Document doc) {</span></p><p class="c1"><span class="c2"> // STEP 5: Re
move the document from local storage.</span></p><p class="c1"><span class="c9 c2
"> _storedIds.remove(doc.id);</span></p><p class="c1"><span class="c9 c2">
window.localStorage.remove(doc.id);</span></p><p class="c1"><span class="
c9 c2"> window.localStorage[DOCUMENT_ID_KEY] = JSON.stringify(_storedIds);
</span></p><p class="c1"><span class="c2">}</span></p><p class="c1"><span class=
"c2">…</span></p></td></tr></tbody></table><p class="c3 c4"><span></span>
</p><h3 class="c3"><a name="h.iu894renpog2"></a><span>Load the list of IDs from
local storage. Then load the documents.</span></h3><p class="c3 c4"><span></span
></p><p class="c3"><span>Continue editing </span><span class="c9">lib/storage.da
rt</span><span>.</span></p><p class="c3 c4"><span></span></p><p class="c3"><span
>Modify the </span><span>fetchDocuments()</span><span> function. Add the co
de</span></p><ol class="c14 lst-kix_8dg0b92yw51r-0 start"><li class="c0 c7"><spa
n>to get the list of document IDs</span></li><li class="c0 c7"><span>to load all
of the documents from local storage using the private method </span><span>_fetc
hDocument()</span></li><li class="c0 c7"><span>and to display one of the documen
ts.</span></li></ol><p class="c3 c4"><span></span></p><a href="#" name="9828f087
ea9465c35bd79ae04bfae6e8749c67e0"></a><a href="#" name="25"></a><table cellpaddi
ng="0" cellspacing="0" class="c12"><tbody><tr class="c13"><td class="c6"><p clas
s="c1"><span class="c2">// storage.dart</span></p><p class="c1"><span class="c2"
>…</span></p><p class="c1"><span class="c2">// Returns a collection of al
l documents from local storage.</span></p><p class="c1"><span class="c2">Iterabl
e<Document> fetchDocuments() {</span></p><p class="c1"><span class="c2">&n
bsp; // STEP 5: Get all document IDs from local storage.</span></p><p class="c1"
><span class="c9 c2"> if (window.localStorage[DOCUMENT_ID_KEY] != null) {<
/span></p><p class="c1"><span class="c9 c2"> _storedIds = JSON.pars
e(window.localStorage[DOCUMENT_ID_KEY]);</span></p><p class="c1"><span class="c9
c2"> }</span></p><p class="c1 c4"><span class="c2"></span></p><p class="c
1"><span class="c2"> // STEP 5: Get all documents from local storage.</spa
n></p><p class="c1"><span class="c9 c2"> return _storedIds.map(_fetchDocum
ent);</span></p><p class="c1"><span class="c2">}</span></p><p class="c1 c4"><spa
n class="c2"></span></p><p class="c1"><span class="c2">/// Gets a document from
local storage.</span></p><p class="c1"><span class="c2">Document _fetchDocument(
String id) {</span></p><p class="c1"><span class="c2"> // STEP 5: Return o
ne deserialized document from local storage.</span></p><p class="c1"><span class
="c9 c2"> return new Doc</span><span class="c9 c2">ument.fromJson</span><s
pan class="c9 c2">(window.localStorage[id]);</span></p><p class="c1"><span class
="c2">}</span></p><p class="c1"><span class="c2">…</span></p></td></tr></
tbody></table><p class="c3 c4"><span></span></p><p class="c3"><span>Save your ch
anges to </span><span class="c9">lib/</span><span class="c9">storage.dart</span>
<span>.</span></p><p class="c3 c4"><span class="c17"></span></p><h3 class="c3"><
a name="h.i3h5dbyw0vmu"></a><span>Add event handlers to HTML elements to save th
e document.</span></h3><p class="c3 c4"><span></span></p><p class="c3"><span>Now
that you’ve written the library code that saves and retrieves documents,
you can use the new functions in the app. The app saves the documents based on u
ser-generated events in the UI. So let’s add event handlers to the HTML el
ements for saving the documents.</span></p><p class="c3 c4"><span></span></p><p
class="c3"><span>Open the </span><span class="c9">web/index.html </span><span>fi
le.</span></p><p class="c3 c4"><span></span></p><p class="c3"><span>Find the cod
e that creates the text element for the document titles.</span></p><p class="c3
c4"><span></span></p><p class="c3"><span>Add a key-up event handler to the text
field. Each time the user types a character in the document title, the event han
dler saves the document.</span></p><p class="c3 c4"><span></span></p><a href="#"
name="36ceaf585c6c68044bee5323e8e8b9b547788375"></a><a href="#" name="26"></a><
table cellpadding="0" cellspacing="0" class="c12"><tbody><tr class="c13"><td cla
ss="c6"><p class="c1"><span class="c2">// index.html</span></p><p class="c1"><sp
an class="c2">…</span></p><p class="c1"><span class="c2"> &n
bsp; <!-- Document title --></span></p><p class="c1"><span c
lass="c2"> <div class="input-wrap"
;></span></p><p class="c1 c4"><span class="c2"></span></p><p class="c1"><span
class="c2"> <!-- STEP 5: Add event
handler to save the active document. --></span></p><p class="c1"><span class=
"c2"> </span><span class="c22 c2"><i
nput type="text" bind-value="activeDocument.title"></span
></p><p class="c1"><span class="c9 c2">
<input type="text" bind-value="activeDocument.title"</sp
an></p><p class="c1"><span class="c2">
</span><span class="c9 c2">on-key-up="saveDocument(activeDocu
ment)" </span><span class="c2">/></span></p><p class="c1"><span class="c
2"> </div></span></p><p class="c1"><span
class="c2">…</span></p></td></tr></tbody></table><p class="c3 c4"><span>
</span></p><p class="c3"><span>Now, find the textarea used to enter the contents
of a document.</span></p><p class="c3 c4"><span></span></p><p class="c3"><span>
Add a key-up event handler to the textarea. Each time the user types a character
into the document, the event handler saves the document.</span></p><p class="c3
c4"><span></span></p><a href="#" name="bbf4a6a118e5f14b13909f187048196681e275a6
"></a><a href="#" name="27"></a><table cellpadding="0" cellspacing="0" class="c1
2"><tbody><tr class="c13"><td class="c6"><p class="c1"><span class="c2">// index
.html</span></p><p class="c1"><span class="c2">…</span></p><p class="c1">
<span class="c2"> <!-- Content box --></span></
p><p class="c1"><span class="c2"> <!-- STEP 5: Add
event handler to save the active document. --></span></p><p class="c1"><span
class="c2"> </span><span class="c22 c2"><textarea
class="content" bind-value="activeDocument.content"><
/textarea></span></p><p class="c1"><span class="c2"> &nbs
p; </span><span class="c9 c2"><textarea class="content" bind-value=
"activeDocument.content"</span></p><p class="c1"><span class="c9 c2">&
nbsp; on-key-up="saveDocument(activeDocu
ment)"></textarea></span></p><p class="c1 c4"><span class="c2"></s
pan></p><p class="c1"><span class="c2">…</span></p></td></tr></tbody></ta
ble><p class="c3 c4"><span class="c9 c35 c37"></span></p><p class="c3"><span>Sav
e your changes to </span><span class="c9">web/index.html </span><span>.</span></
p><p class="c3 c4"><span></span></p><h3 class="c3"><a name="h.yvyngs2ay112"></a>
<span>Import storage.dart</span></h3><p class="c3 c4"><span></span></p><p class=
"c3"><span>For removing documents and initializing the app, you need to edit the
Dart code.</span></p><p class="c3 c4"><span></span></p><p class="c3"><span>Open
</span><span class="c9">web/app.dart</span><span>.</span></p><p class="c3 c4"><
span></span></p><p class="c3"><span>Add an import directive near the top of the
file to include the </span><span>storage.dart</span><span> library you just
wrote.</span></p><p class="c3 c4"><span></span></p><a href="#" name="a92b059e6f
7083b59c32c8e671b4914e90e06269"></a><a href="#" name="28"></a><table cellpadding
="0" cellspacing="0" class="c12"><tbody><tr class="c13"><td class="c6"><p class=
"c1"><span class="c2">// app.dart</span></p><p class="c1 c4"><span class="c2"></
span></p><p class="c1"><span class="c2">@observable</span></p><p class="c1"><spa
n class="c2">library writer;</span></p><p class="c1 c4"><span class="c2"></span>
</p><p class="c1"><span class="c2">import 'dart:html' hide Document;</sp
an></p><p class="c1 c4"><span class="c2"></span></p><p class="c1"><span class="c
2">import 'package:web_ui/web_ui.dart';</span></p><p class="c1 c4"><span
class="c2"></span></p><p class="c1"><span class="c2">import 'package:writer
/document.dart';</span></p><p class="c1 c4"><span class="c2"></span></p><p c
lass="c1"><span class="c2">// STEP 4: Import search.dart.</span></p><p class="c1
"><span class="c2">import 'package:writer/search.dart';</span></p><p cla
ss="c1 c4"><span class="c2"></span></p><p class="c1"><span class="c2">// STEP 5:
Import storage.dart.</span></p><p class="c1"><span class="c9 c2">import 'pa
ckage:writer/storage.dart';</span></p><p class="c1 c4"><span class="c2"></sp
an></p><p class="c1"><span class="c2">// STEP 3: Add an observed list of documen
ts.</span></p><p class="c1"><span class="c2">final List<Document> document
s = toObservable([]);</span></p><p class="c1"><span class="c2">…</span></
p></td></tr></tbody></table><p class="c3 c4"><span></span></p><h3 class="c3"><a
name="h.s8iyjgjt4pp0"></a><span>Initialize the app with the locally stored docum
ents.</span></h3><p class="c3 c4"><span></span></p><p class="c3"><span>Continue
editing </span><span class="c9">web/app.dart</span><span>.</span></p><p class="c
3 c4"><span></span></p><p class="c3"><span>Modify the </span><span>main()</span>
<span> function in </span><span>app.dart</span><span>. Use the </span><span
>fetchDocuments()</span><span> function from the </span><span>storage.dart
</span><span>library to initialize the app with the saved documents.</span></p><
p class="c3 c4"><span></span></p><a href="#" name="6e5b6db4508be6d53f4dd8844b2b2
3840627fdc9"></a><a href="#" name="29"></a><table cellpadding="0" cellspacing="0
" class="c12"><tbody><tr class="c13"><td class="c6"><p class="c1"><span class="c
2">// app.dart</span></p><p class="c1"><span class="c2">…</span></p><p cl
ass="c1"><span class="c2">/// Starts the application.</span></p><p class="c1"><s
pan class="c2">void main() {</span></p><p class="c1"><span class="c2"> //
STEP 5: Initialize with all documents from local storage.</span></p><p class="c1
"><span class="c9 c2"> documents.addAll(fetchDocuments());</span></p><p cl
ass="c1 c4"><span class="c2"></span></p><p class="c1"><span class="c2"> //
STEP 3: Create a new document if there are none.</span></p><p class="c1"><span
class="c2"> if (documents.isEmpty) createDocument();</span></p><p class="c
1 c4"><span class="c2"></span></p><p class="c1"><span class="c2"> // STEP
3: Select the first document in the list of documents.</span></p><p class="c1"><
span class="c2"> selectDocument(documents.first);</span></p><p class="c1">
<span class="c2">}</span></p><p class="c1"><span class="c2">…</span></p><
/td></tr></tbody></table><p class="c3 c4"><span></span></p><h3 class="c3"><a nam
e="h.yxdyhxlthy8j"></a><span>Remove the document from local storage.</span></h3>
<p class="c3 c4"><span></span></p><p class="c3"><span>Continue editing </span><s
pan class="c9">web/app.dart</span><span>.</span></p><p class="c3 c4"><span></spa
n></p><p class="c3"><span>Find the </span><span>deleteDocument()</span><span>&nb
sp;function. Add code to remove the document from local storage when the user de
letes the document from the app.</span></p><p class="c3 c4"><span></span></p><a
href="#" name="b03749e9a6ec5397397d6f8871b2330fb9cafeac"></a><a href="#" name="3
0"></a><table cellpadding="0" cellspacing="0" class="c12"><tbody><tr class="c13"
><td class="c6"><p class="c1"><span class="c2">// app.dart</span></p><p class="c
1"><span class="c2">…</span></p><p class="c1"><span class="c2">// STEP 3:
Add code to delete a document</span></p><p class="c1"><span class="c2">void del
eteDocument(Document doc) {</span></p><p class="c1"><span class="c2"> docu
ments.remove(doc);</span></p><p class="c1 c4"><span class="c2"></span></p><p cla
ss="c1"><span class="c2"> </span><span class="c2">// STEP 5: Also delete f
rom local storage.</span></p><p class="c1"><span class="c9 c2"> removeDocu
ment(doc);</span></p><p class="c1"><span class="c2">}</span></p><p class="c1"><s
pan class="c2">…</span></p></td></tr></tbody></table><h3 class="c3 c28"><
a name="h.6ky98xskme83"></a></h3><p class="c3"><span>Save your changes to </span
><span class="c9">web/app.dart</span><span>.</span></p><h3 class="c3"><a name="h
.ifs5zdb93rhi"></a><span>Run the revised version of the app.</span></h3><p class
="c3 c4"><span></span></p><p class="c3"><span>You’ve completed the code ed
its for this step. Make sure all of your changes are saved.</span></p><p class="
c3 c4"><span></span></p><p class="c3"><span>Run the app again. Create and name s
everal documents. Kill the app and start it up again. The documents you saved pe
rsist between invocations of the app.</span></p><p class="c3 c4"><span></span></
p><p class="c3"><img height="377" src="images/image06.png" width="588"></p><p cl
ass="c3 c4"><span></span></p><hr style="page-break-before:always;display:none;">
<p class="c3 c4"><span></span></p><h1 class="c3"><a name="h.ymcy9fqorpug"></a><s
pan>Step 6: Optimize layout for mobile devices</span></h1><p class="c3 c4"><span
></span></p><p class="c3"><span>Your app already works on mobile, since many ges
tures emulate mouse events, such as clicks. But we can do better. In this step,
you’ll make your app feel more native on mobile by adding some code to con
trol layout on mobile devices and by adding some specialized CSS styles.</span><
/p><h2 class="c3"><a name="h.v8hspt230iyp"></a><span>What you will learn</span><
/h2><ol class="c14 lst-kix_wzk0mdv2qg9u-0 start"><li class="c0 c7"><span>Using a
meta tag to control layout on mobile devices</span></li><li class="c0 c7"><span
>CSS styles for mobile devices</span></li></ol><h2 class="c3"><a name="h.10tsfye
06kbe"></a><span>Concepts overview</span></h2><h3 class="c3"><a name="h.uu51nii9
tdjq"></a><span class="c29 c9">Control</span><span class="c9 c29"> layout o
n mobile devices</span></h3><p class="c3 c4"><span></span></p><p class="c3"><spa
n>The <meta> tag, with the viewport attribute, helps to optimize your site
for mobile devices. Here’s what the Mozilla developer website has to say
about mobile-optimization:</span></p><p class="c3 c4"><span></span></p><p class=
"c3"><span>A typical mobile-optimized site contains something like the following
:</span></p><p class="c3 c4"><span></span></p><p class="c0"><span class="c2"><
;meta name="viewport" content="width=device-width, initial-scale=
1, maximum-scale=1"></span></p><p class="c3 c4"><span></span></p><p clas
s="c3"><span>The width property controls the size of the viewport. It can be set
to a specific number of pixels, like width=600, or to the special value device-
width, which is the width of the screen in CSS pixels at a scale of 100%. (The c
ontent attribute also supports corresponding height and device-height values, wh
ich may be useful for pages with elements that change size or position based on
the viewport height.)</span></p><p class="c3 c4"><span></span></p><p class="c3">
<span>The initial-scale property controls the zoom level when the page is first
loaded. The maximum-scale, minimum-scale, and user-scalable properties control h
ow users are allowed to zoom the page in or out.</span></p><h3 class="c3"><a nam
e="h.3q4tho2o4biu"></a><span>CSS styles for mobile devices</span></h3><p class="
c3 c4"><span></span></p><p class="c3"><span>The @media rule allows different sty
le rules for different media in the same style sheet. Shown below are two rules,
one which applies when the app runs in an environment, such as a small mobile d
evice, which has a maximum width of 500 pixels. The other applies when the app r
uns in an environment that allows a larger width.</span></p><p class="c3 c4"><sp
an></span></p><p class="c0"><span class="c2">@media all and (max-width: 500px) {
</span></p><p class="c0"><span class="c2"> …</span></p><p class="c0
"><span class="c2">}</span></p><p class="c0"><span class="c2">@media all and (mi
n-width: 501px) {</span></p><p class="c0"><span class="c2"> …</span
></p><p class="c0"><span class="c2">} <
/span><span class="c2"> </span><span class="c2 c31"> </span></p><h2 cl
ass="c3"><a name="h.jjv7ulrpc81s"></a><span>Walkthrough</span></h2><h3 class="c3
"><a name="h.xg2egxktuosa"></a><span>Run the app in a small browser window</span
></h3><p class="c3 c4"><span></span></p><p class="c3"><span>Before you start cha
nging the code, run the app in a tiny window so you can emulate the app’s
behavior on a mobile phone. You can contrast this behavior with the revised vers
ion of the app at the end of this step.</span></p><p class="c3 c4"><span></span>
</p><p class="c3"><span>Run the app. Shrink the window down as small as you can.
</span></p><p class="c3 c4"><span></span></p><p class="c3"><span>The UI is not t
oo cluttered and has a double scroll bar. We can do better!</span></p><p class="
c3 c4"><span></span></p><p class="c3"><img height="272" src="images/image01.png"
width="400"></p><p class="c3 c4"><span></span></p><h3 class="c3"><a name="h.vng
w9eips6yz"></a><span>Add meta viewport tag to HTML code</span></h3><p class="c3
c4"><span></span></p><p class="c3"><span>O</span><span>pen </span><span class="c
9">web/index.html</span><span>.</span></p><p class="c3 c4"><span></span></p><p c
lass="c3"><span>At the top of the file, within the </span><span><head></sp
an><span> section add this meta tag:</span></p><p class="c3 c4"><span></spa
n></p><a href="#" name="cc55c23dce922449740b2782ba379e471cf2ed0b"></a><a href="#
" name="31"></a><table cellpadding="0" cellspacing="0" class="c12"><tbody><tr cl
ass="c13"><td class="c6"><p class="c1"><span class="c2">// web/index.html</span>
</p><p class="c1"><span class="c2">…</span></p><p class="c1"><span class=
"c2"> <!-- STEP 6: Add viewport meta tag to control layout on mo
bile devices --></span></p><p class="c1"><span class="c9 c2"> &l
t;meta name="viewport"</span></p><p class="c1"><span class="c9 c2">&nb
sp; content="width=device-width, initial-scale=
1, maximum-scale=1, user-scalable=no"></span></p><p class="c1"><span cla
ss="c2">…</span></p></td></tr></tbody></table><p class="c3 c4"><span></sp
an></p><p class="c3"><span>This tag fixes the size of the app to the exact size
of the device.</span></p><p class="c3 c4"><span></span></p><p class="c3"><span>S
ave your changes.</span></p><h3 class="c3"><a name="h.c683e43ehs76"></a><span>Ad
d CSS styles for mobile</span></h3><p class="c3 c4"><span></span></p><p class="c
3"><span>Open </span><span class="c9">web/css.css</span><span>.</span></p><p cla
ss="c3 c4"><span></span></p><p class="c3"><span>At the bottom of the CSS file, a
dd all of the code in bold (79 lines):</span></p><p class="c3 c4"><span></span><
/p><a href="#" name="8c019440a77031fbfe7e164dfc4fbe6b68f77295"></a><a href="#" n
ame="32"></a><table cellpadding="0" cellspacing="0" class="c12"><tbody><tr class
="c13"><td class="c6"><p class="c1"><span class="c2">// web/css.css</span></p><p
class="c1"><span class="c2">…</span></p><p class="c1 c4"><span class="c2
"></span></p><p class="c1"><span class="c2">/* STEP 6: Add styles for mobile dev
ices */</span></p><p class="c1"><span class="c2">/* Mobile styles. */</span></p>
<p class="c1"><span class="c9 c2">@media all and (max-width: 500px) {</span></p>
<p class="c1"><span class="c9 c2"> body {</span></p><p class="c1"><span cl
ass="c9 c2"> overflow: hidden;</span></p><p class="c1"><span class=
"c9 c2"> }</span></p><p class="c1 c4"><span class="c9 c2"></span></p><p cl
ass="c1"><span class="c9 c2"> #sidebar .touched .item {</span></p><p class
="c1"><span class="c9 c2"> background-color:rgba(250, 150, 150, .8)
;</span></p><p class="c1 c4"><span class="c9 c2"></span></p><p class="c1"><span
class="c9 c2"> -webkit-transition: all .7s cubic-bezier(.65,-0.50,.
76,1.32);</span></p><p class="c1"><span class="c9 c2"> -moz-transit
ion: all .7s cubic-bezier(.65,-0.50,.76,1.32);</span></p><p class="c1"><span cla
ss="c9 c2"> transition: all .7s cubic-bezier(.65,-0.50,.76,1.32);</
span></p><p class="c1"><span class="c9 c2"> }</span></p><p class="c1 c4"><
span class="c9 c2"></span></p><p class="c1"><span class="c9 c2"> #sidebar
{</span></p><p class="c1"><span class="c9 c2"> top: 0;</span></p><p
class="c1"><span class="c9 c2"> left: 0;</span></p><p class="c1"><
span class="c9 c2"> right: 0;</span></p><p class="c1"><span class="
c9 c2"> bottom: 0;</span></p><p class="c1"><span class="c9 c2">&nbs
p; width: 100%;</span></p><p class="c1"><span class="c9 c2">
-webkit-transition: -webkit-transform 0.3s ease-in-out;</span></p><p class="c1"
><span class="c9 c2"> -moz-transition: -moz-transform 0.3s ease-in-
out;</span></p><p class="c1"><span class="c9 c2"> transition: trans
form 0.3s ease-in-out;</span></p><p class="c1"><span class="c9 c2">
-webkit-transform: translate3d(-20%, 0, 0);</span></p><p class="c1"><span class
="c9 c2"> -moz-transform: translate3d(-20%, 0, 0);</span></p><p cla
ss="c1"><span class="c9 c2"> transform: translate3d(-20%, 0, 0);</s
pan></p><p class="c1"><span class="c9 c2"> }</span></p><p class="c1 c4"><s
pan class="c9 c2"></span></p><p class="c1"><span class="c9 c2"> #sidebar.a
ctive {</span></p><p class="c1"><span class="c9 c2"> -webkit-transf
orm: translate3d(0, 0, 0);</span></p><p class="c1"><span class="c9 c2"> &n
bsp; -moz-transform: translate3d(0, 0, 0);</span></p><p class="c1"><span class="
c9 c2"> transform: translate3d(0, 0, 0);</span></p><p class="c1"><s
pan class="c9 c2"> }</span></p><p class="c1 c4"><span class="c9 c2"></span
></p><p class="c1"><span class="c9 c2"> #sidebar .item.active .delete {</s
pan></p><p class="c1"><span class="c9 c2"> opacity: .7;</span></p><
p class="c1"><span class="c9 c2"> }</span></p><p class="c1 c4"><span class
="c9 c2"></span></p><p class="c1"><span class="c2 c9"> #main {</span></p><
p class="c1"><span class="c9 c2"> top: 0;</span></p><p class="c1"><
span class="c9 c2"> left: 0;</span></p><p class="c1"><span class="c
9 c2"> right: 0;</span></p><p class="c1"><span class="c9 c2">
bottom: 0;</span></p><p class="c1"><span class="c9 c2"> -we
bkit-transition: -webkit-transform 0.3s ease-in-out;</span></p><p class="c1"><sp
an class="c9 c2"> -moz-transition: -moz-transform 0.3s ease-in-out;
</span></p><p class="c1"><span class="c9 c2"> transition: transform
0.3s ease-in-out;</span></p><p class="c1"><span class="c9 c2"> -we
bkit-transform: translate3d(100%, 0, 0);</span></p><p class="c1"><span class="c9
c2"> -moz-transform: translate3d(100%, 0, 0);</span></p><p class="
c1"><span class="c9 c2"> transform: translate3d(100%, 0, 0);</span>
</p><p class="c1"><span class="c9 c2"> }</span></p><p class="c1 c4"><span
class="c9 c2"></span></p><p class="c1"><span class="c9 c2"> #main.active {
</span></p><p class="c1"><span class="c9 c2"> -webkit-transform: tr
anslate3d(0, 0, 0);</span></p><p class="c1"><span class="c9 c2"> -m
oz-transform: translate3d(0, 0, 0);</span></p><p class="c1"><span class="c9 c2">
transform: translate3d(0, 0, 0);</span></p><p class="c1"><span cla
ss="c9 c2"> }</span></p><p class="c1 c4"><span class="c9 c2"></span></p><p
class="c1"><span class="c9 c2"> #main .title button {</span></p><p class=
"c1"><span class="c9 c2"> display: block;</span></p><p class="c1"><
span class="c9 c2"> }</span></p><p class="c1 c4"><span class="c9 c2"></spa
n></p><p class="c1"><span class="c9 c2"> #main .title .input-wrap {</span>
</p><p class="c1"><span class="c9 c2"> margin-left: 40px;</span></p
><p class="c1"><span class="c9 c2"> }</span></p><p class="c1 c4"><span cla
ss="c9 c2"></span></p><p class="c1"><span class="c9 c2"> /* Let's not
go there. It is a silly place. */</span></p><p class="c1"><span class="c9 c2">&n
bsp; #main:only-of-type {</span></p><p class="c1"><span class="c9 c2"> &nb
sp; -moz-transition: none;</span></p><p class="c1"><span class="c9 c2"> &n
bsp; -webkit-transition: none;</span></p><p class="c1"><span class="c9 c2"> 
; transition: none;</span></p><p class="c1"><span class="c9 c2"> }<
/span></p><p class="c1 c4"><span class="c9 c2"></span></p><p class="c1"><span cl
ass="c9 c2"> #main:only-of-type button {</span></p><p class="c1"><span cla
ss="c9 c2"> display: none;</span></p><p class="c1"><span class="c9
c2"> }</span></p><p class="c1 c4"><span class="c9 c2"></span></p><p class=
"c1"><span class="c9 c2"> #main:only-of-type .title .input-wrap {</span></
p><p class="c1"><span class="c9 c2"> margin-left: 0;</span></p><p c
lass="c1"><span class="c9 c2"> }</span></p><p class="c1"><span class="c9 c
2">}</span></p></td></tr></tbody></table><p class="c3 c4"><span></span></p><p cl
ass="c3"><span>This code separates the app into two panels: one for the index of
documents and one for the content of the current document. Choosing a document
from the index slides the content panel into view. In the contents panel, a new
button slides from the documents contents back to the index.</span></p><p class=
"c3 c4"><span></span></p><p class="c3"><span>Save your changes.</span></p><p cla
ss="c3 c4"><span></span></p><h3 class="c3"><a name="h.vcike6sk25tj"></a><span>Ru
n the revised version of the app</span></h3><p class="c3 c4"><span></span></p><p
class="c3"><span>Run the new version of the app in your browser and shrink the
window down as small as possible once again.</span></p><p class="c3 c4"><span></
span></p><p class="c3"><span>On the document index panel, you see a list of the
documents you’ve created.</span></p><p class="c3 c4"><span></span></p><p c
lass="c3"><span>Click a document to view its contents.</span></p><p class="c3 c4
"><span></span></p><p class="c3"><img height="272" src="images/image16.png" widt
h="400"></p><p class="c3 c4"><span></span></p><p class="c3"><span>On the documen
t contents panel, a small button with an arrow </span><span class="c17">‘<
/span><span class="c17"><’</span><span> appears to the left of the
document title.</span></p><p class="c3 c4"><span></span></p><p class="c3"><span
>Click it to return to the document index.</span></p><p class="c3 c4"><span></sp
an></p><p class="c3"><img height="272" src="images/image41.png" width="400"></p>
<p class="c3 c4"><span></span></p><h3 class="c3"><a name="h.6wxrrse7px8b"></a><s
pan>Run the finished app on your phone</span></h3><p class="c3 c4"><span></span>
</p><p class="c3"><span>You can find the deployed app at:</span></p><p class="c3
c4"><span></span></p><p class="c3"><span class="c11 c9"><a class="c16" href="ht
tp://dart-lang.github.io/io-2013-dart-codelab/deploy/out/index.html">http://dart
-lang.github.io/io-2013-dart-codelab/deploy/out/index.html</a></span><span class
="c9"><br></span></p><p class="c3"><span>A shortcut: </span><span class="c11 c9"
><a class="c16" href="http://goo.gl/hC0NM">goo.gl/hC0NM</a></span><span class="c
9"> <br></span></p><h1 class="c3"><a name="h.itu7egiz6osy"></a><span>What n
ext?</span></h1><p class="c3 c4"><span></span></p><p class="c3"><span>Congratula
tions, you’ve completed the code lab! If you’d like to do more Dart,
check out our website and open-source projects:</span></p><p class="c3 c4"><spa
n></span></p><ol class="c14 lst-kix_t7any4lo9hoq-0 start"><li class="c0 c7"><spa
n class="c11"><a class="c16" href="http://www.dartlang.org">www.dartlang.org</a>
</span><span> (our website)</span></li><li class="c0 c7"><span class="c11">
<a class="c16" href="http://pub.dartlang.org">pub.dartlang.org</a></span><span>&
nbsp;(packages available for you to use)</span></li><li class="c0 c7"><span clas
s="c11"><a class="c16" href="http://dart.googlecode.com">dart.googlecode.com</a>
</span><span> (Dart open-source project)</span></li><li class="c0 c7"><span
class="c11"><a class="c16" href="https://github.com/dart-lang/dartlang.org">git
hub.com/dart-lang/dartlang.org</a></span><span><a class="c16" href="https://gith
ub.com/dart-lang/dartlang.org"> (the so</a></span><span>urce for </span><sp
an class="c11"><a class="c16" href="http://www.dartlang.org">www.dartlang.org</a
></span><span>; pull requests welcome!)</span></li></ol><p class="c3 c4"><span><
/span></p><div><p class="c3 c4 c25"><span></span></p></div><div class="c26"><p c
lass="c1"><a href="#cmnt_ref1" name="cmnt1">[a]</a><span>Chris Buckett:</span></
p><p class="c1"><span>This can also be in an external file.</span></p></div></bo
dy></html> | 1 <html><head><title>IO 2013 Dart Codelab</title><meta content="text/html; charset
=UTF-8" http-equiv="content-type"><style type="text/css">@import url('https://th
emes.googleusercontent.com/fonts/css?kit=chteh0fSOiSrmusp8u43YAdDjahd2IAEL5IFmyN
QJ7o');.lst-kix_qeukrmzdd856-8>li{counter-increment:lst-ctn-kix_qeukrmzdd856-8}o
l.lst-kix_qeukrmzdd856-7.start{counter-reset:lst-ctn-kix_qeukrmzdd856-7 0}.lst-k
ix_jpf3cr7xe1pc-0>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-0}.lst-kix_dblgi
l8t24zy-3>li:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-3,decimal) ". "}
.lst-kix_jpf3cr7xe1pc-4>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-4}.lst-kix
_1c0w7icorqz1-8>li:before{content:"" counter(lst-ctn-kix_1c0w7icorqz1-8,lower-ro
man) ". "}ol.lst-kix_qz5wp1hdd24k-6.start{counter-reset:lst-ctn-kix_qz5wp1hdd24k
-6 0}ol.lst-kix_nho7sy6cpfv0-0.start{counter-reset:lst-ctn-kix_nho7sy6cpfv0-0 0}
ol.lst-kix_hvjet9voiiio-4{list-style-type:none}ol.lst-kix_5f9palqqt4mm-1.start{c
ounter-reset:lst-ctn-kix_5f9palqqt4mm-1 0}ol.lst-kix_hvjet9voiiio-5{list-style-t
ype:none}.lst-kix_nhaic9xr6pf-6>li{counter-increment:lst-ctn-kix_nhaic9xr6pf-6}o
l.lst-kix_hvjet9voiiio-2{list-style-type:none}ol.lst-kix_hvjet9voiiio-3{list-sty
le-type:none}.lst-kix_1c0w7icorqz1-3>li{counter-increment:lst-ctn-kix_1c0w7icorq
z1-3}ol.lst-kix_hvjet9voiiio-8{list-style-type:none}ol.lst-kix_32zxnvl59py3-8.st
art{counter-reset:lst-ctn-kix_32zxnvl59py3-8 0}ol.lst-kix_hvjet9voiiio-6{list-st
yle-type:none}ol.lst-kix_hvjet9voiiio-7{list-style-type:none}.lst-kix_jpf3cr7xe1
pc-5>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-5}ol.lst-kix_nhaic9xr6pf-6.st
art{counter-reset:lst-ctn-kix_nhaic9xr6pf-6 0}.lst-kix_2uog6ch44jpu-0>li{counter
-increment:lst-ctn-kix_2uog6ch44jpu-0}ol.lst-kix_hvjet9voiiio-0{list-style-type:
none}ol.lst-kix_hvjet9voiiio-1{list-style-type:none}.lst-kix_qz5wp1hdd24k-5>li:b
efore{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-5,lower-roman) ". "}.lst-kix_j
51xhhtple7c-8>li{counter-increment:lst-ctn-kix_j51xhhtple7c-8}.lst-kix_1gqf2s78t
7o1-8>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-8,lower-roman) ". "}
.lst-kix_nhaic9xr6pf-1>li:before{content:"" counter(lst-ctn-kix_nhaic9xr6pf-1,lo
wer-latin) ". "}.lst-kix_32zxnvl59py3-3>li{counter-increment:lst-ctn-kix_32zxnvl
59py3-3}.lst-kix_5f9palqqt4mm-6>li:before{content:"" counter(lst-ctn-kix_5f9palq
qt4mm-6,decimal) ". "}.lst-kix_nhaic9xr6pf-7>li:before{content:"" counter(lst-ct
n-kix_nhaic9xr6pf-7,lower-latin) ". "}ol.lst-kix_sgsi64vug03j-2.start{counter-re
set:lst-ctn-kix_sgsi64vug03j-2 0}ol.lst-kix_pza3ybm1wtg3-5.start{counter-reset:l
st-ctn-kix_pza3ybm1wtg3-5 0}ol.lst-kix_60g29afx0lof-4.start{counter-reset:lst-ct
n-kix_60g29afx0lof-4 0}.lst-kix_jpf3cr7xe1pc-7>li{counter-increment:lst-ctn-kix_
jpf3cr7xe1pc-7}ol.lst-kix_vnvg10gwrc8t-7.start{counter-reset:lst-ctn-kix_vnvg10g
wrc8t-7 0}.lst-kix_i2v077rod1nx-5>li:before{content:"\0025a0 "}ol.lst-kix_z7in7
d1ar2zt-3.start{counter-reset:lst-ctn-kix_z7in7d1ar2zt-3 0}ol.lst-kix_9tkaqbe3bn
u3-6.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-6 0}ol.lst-kix_p8a3u4ougab9-4.
start{counter-reset:lst-ctn-kix_p8a3u4ougab9-4 0}.lst-kix_t7any4lo9hoq-3>li:befo
re{content:"\0025cf "}ol.lst-kix_lixznqbqiris-1.start{counter-reset:lst-ctn-kix
_lixznqbqiris-1 0}.lst-kix_1g0xzctl1vi-6>li{counter-increment:lst-ctn-kix_1g0xzc
tl1vi-6}.lst-kix_a4uqy1hx9g3-2>li:before{content:"\0025a0 "}ol.lst-kix_5f9palqq
t4mm-7.start{counter-reset:lst-ctn-kix_5f9palqqt4mm-7 0}.lst-kix_32zxnvl59py3-8>
li:before{content:"" counter(lst-ctn-kix_32zxnvl59py3-8,lower-roman) ". "}.lst-k
ix_9tkaqbe3bnu3-6>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-6}ol.lst-kix_j51
xhhtple7c-1.start{counter-reset:lst-ctn-kix_j51xhhtple7c-1 0}.lst-kix_wzk0mdv2qg
9u-1>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-1}.lst-kix_j51xhhtple7c-3>li{
counter-increment:lst-ctn-kix_j51xhhtple7c-3}.lst-kix_juntnht2kzza-4>li{counter-
increment:lst-ctn-kix_juntnht2kzza-4}.lst-kix_i2v077rod1nx-4>li:before{content:"
\0025cb "}.lst-kix_7kmxmbi2lsws-6>li{counter-increment:lst-ctn-kix_7kmxmbi2lsws
-6}ol.lst-kix_1gqf2s78t7o1-4.start{counter-reset:lst-ctn-kix_1gqf2s78t7o1-4 0}ol
.lst-kix_qeukrmzdd856-0{list-style-type:none}ol.lst-kix_qeukrmzdd856-1{list-styl
e-type:none}ol.lst-kix_qeukrmzdd856-2{list-style-type:none}.lst-kix_p8a3u4ougab9
-6>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-6}.lst-kix_8uscekru9dbw-5>li:be
fore{content:"" counter(lst-ctn-kix_8uscekru9dbw-5,lower-roman) ". "}.lst-kix_nh
o7sy6cpfv0-5>li{counter-increment:lst-ctn-kix_nho7sy6cpfv0-5}.lst-kix_kf08e4mo0q
15-3>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-3,decimal) ". "}.lst-
kix_pza3ybm1wtg3-5>li:before{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-5,lower
-roman) ". "}ol.lst-kix_8uscekru9dbw-1.start{counter-reset:lst-ctn-kix_8uscekru9
dbw-1 0}ol.lst-kix_dblgil8t24zy-5.start{counter-reset:lst-ctn-kix_dblgil8t24zy-5
0}.lst-kix_60g29afx0lof-3>li:before{content:"" counter(lst-ctn-kix_60g29afx0lof
-3,decimal) ". "}ol.lst-kix_5f9palqqt4mm-4.start{counter-reset:lst-ctn-kix_5f9pa
lqqt4mm-4 0}.lst-kix_juntnht2kzza-6>li:before{content:"" counter(lst-ctn-kix_jun
tnht2kzza-6,decimal) ". "}ol.lst-kix_32zxnvl59py3-7.start{counter-reset:lst-ctn-
kix_32zxnvl59py3-7 0}.lst-kix_dblgil8t24zy-4>li{counter-increment:lst-ctn-kix_db
lgil8t24zy-4}ol.lst-kix_qeukrmzdd856-8{list-style-type:none}ol.lst-kix_qeukrmzdd
856-7{list-style-type:none}ol.lst-kix_qeukrmzdd856-6{list-style-type:none}ol.lst
-kix_qeukrmzdd856-5{list-style-type:none}ol.lst-kix_qeukrmzdd856-4{list-style-ty
pe:none}.lst-kix_2uog6ch44jpu-3>li:before{content:"" counter(lst-ctn-kix_2uog6ch
44jpu-3,decimal) ". "}.lst-kix_ffvvlgzbuz30-3>li:before{content:"\0025cf "}ol.l
st-kix_qeukrmzdd856-3{list-style-type:none}ol.lst-kix_1c0w7icorqz1-8.start{count
er-reset:lst-ctn-kix_1c0w7icorqz1-8 0}ol.lst-kix_m8zky1oy6k60-7.start{counter-re
set:lst-ctn-kix_m8zky1oy6k60-7 0}.lst-kix_uq748w6pjv3r-7>li{counter-increment:ls
t-ctn-kix_uq748w6pjv3r-7}.lst-kix_ggm78fckav5h-5>li{counter-increment:lst-ctn-ki
x_ggm78fckav5h-5}.lst-kix_pza3ybm1wtg3-8>li:before{content:"" counter(lst-ctn-ki
x_pza3ybm1wtg3-8,lower-roman) ". "}ol.lst-kix_ggm78fckav5h-5.start{counter-reset
:lst-ctn-kix_ggm78fckav5h-5 0}ol.lst-kix_1gqf2s78t7o1-2.start{counter-reset:lst-
ctn-kix_1gqf2s78t7o1-2 0}.lst-kix_z7in7d1ar2zt-0>li{counter-increment:lst-ctn-ki
x_z7in7d1ar2zt-0}ol.lst-kix_pa6lflf2amnu-4.start{counter-reset:lst-ctn-kix_pa6lf
lf2amnu-4 0}.lst-kix_z7in7d1ar2zt-5>li{counter-increment:lst-ctn-kix_z7in7d1ar2z
t-5}ol.lst-kix_m8zky1oy6k60-5.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-5 0}.
lst-kix_57tjkabqizo2-5>li:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-5,l
ower-roman) ". "}.lst-kix_opzlp0rjj486-6>li{counter-increment:lst-ctn-kix_opzlp0
rjj486-6}.lst-kix_2uog6ch44jpu-7>li{counter-increment:lst-ctn-kix_2uog6ch44jpu-7
}.lst-kix_sgsi64vug03j-8>li{counter-increment:lst-ctn-kix_sgsi64vug03j-8}.lst-ki
x_hm47sef7muk-3>li:before{content:"" counter(lst-ctn-kix_hm47sef7muk-3,decimal)
". "}.lst-kix_dblgil8t24zy-7>li{counter-increment:lst-ctn-kix_dblgil8t24zy-7}.ls
t-kix_jxeur1wnlj7y-1>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-1,low
er-latin) ". "}.lst-kix_1gqf2s78t7o1-6>li:before{content:"" counter(lst-ctn-kix_
1gqf2s78t7o1-6,decimal) ". "}ol.lst-kix_kf08e4mo0q15-1.start{counter-reset:lst-c
tn-kix_kf08e4mo0q15-1 0}ol.lst-kix_wzk0mdv2qg9u-5.start{counter-reset:lst-ctn-ki
x_wzk0mdv2qg9u-5 0}.lst-kix_p8a3u4ougab9-2>li{counter-increment:lst-ctn-kix_p8a3
u4ougab9-2}.lst-kix_fr6w5z45nvx0-2>li{counter-increment:lst-ctn-kix_fr6w5z45nvx0
-2}ol.lst-kix_1g0xzctl1vi-1.start{counter-reset:lst-ctn-kix_1g0xzctl1vi-1 0}.lst
-kix_1g0xzctl1vi-4>li:before{content:"" counter(lst-ctn-kix_1g0xzctl1vi-4,lower-
latin) ". "}.lst-kix_8dg0b92yw51r-8>li{counter-increment:lst-ctn-kix_8dg0b92yw51
r-8}.lst-kix_jxeur1wnlj7y-6>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7
y-6,decimal) ". "}.lst-kix_7kmxmbi2lsws-8>li{counter-increment:lst-ctn-kix_7kmxm
bi2lsws-8}.lst-kix_t9jkz28ln50j-6>li:before{content:"" counter(lst-ctn-kix_t9jkz
28ln50j-6,decimal) ". "}ol.lst-kix_jpf3cr7xe1pc-8{list-style-type:none}ol.lst-ki
x_jpf3cr7xe1pc-7{list-style-type:none}ol.lst-kix_jpf3cr7xe1pc-6{list-style-type:
none}ol.lst-kix_jpf3cr7xe1pc-5{list-style-type:none}ol.lst-kix_4s9m9sikrtm7-0.st
art{counter-reset:lst-ctn-kix_4s9m9sikrtm7-0 0}.lst-kix_opzlp0rjj486-6>li:before
{content:"" counter(lst-ctn-kix_opzlp0rjj486-6,decimal) ". "}.lst-kix_oqqzpe3b3n
ud-0>li:before{content:"" counter(lst-ctn-kix_oqqzpe3b3nud-0,decimal) ". "}ol.ls
t-kix_opzlp0rjj486-1.start{counter-reset:lst-ctn-kix_opzlp0rjj486-1 0}ol.lst-kix
_ggm78fckav5h-7.start{counter-reset:lst-ctn-kix_ggm78fckav5h-7 0}.lst-kix_dblgil
8t24zy-0>li{counter-increment:lst-ctn-kix_dblgil8t24zy-0}.lst-kix_32zxnvl59py3-0
>li{counter-increment:lst-ctn-kix_32zxnvl59py3-0}.lst-kix_qz5wp1hdd24k-3>li{coun
ter-increment:lst-ctn-kix_qz5wp1hdd24k-3}ol.lst-kix_8uscekru9dbw-3.start{counter
-reset:lst-ctn-kix_8uscekru9dbw-3 0}.lst-kix_9tkaqbe3bnu3-2>li:before{content:""
counter(lst-ctn-kix_9tkaqbe3bnu3-2,lower-roman) ". "}ol.lst-kix_1g0xzctl1vi-4.s
tart{counter-reset:lst-ctn-kix_1g0xzctl1vi-4 0}ol.lst-kix_hvjet9voiiio-0.start{c
ounter-reset:lst-ctn-kix_hvjet9voiiio-0 0}ol.lst-kix_juntnht2kzza-1.start{counte
r-reset:lst-ctn-kix_juntnht2kzza-1 0}.lst-kix_wzk0mdv2qg9u-6>li{counter-incremen
t:lst-ctn-kix_wzk0mdv2qg9u-6}.lst-kix_1g0xzctl1vi-5>li:before{content:"" counter
(lst-ctn-kix_1g0xzctl1vi-5,lower-roman) ". "}.lst-kix_kvgsl0s9rzo4-8>li:before{c
ontent:"" counter(lst-ctn-kix_kvgsl0s9rzo4-8,lower-roman) ". "}ol.lst-kix_dblgil
8t24zy-7.start{counter-reset:lst-ctn-kix_dblgil8t24zy-7 0}.lst-kix_hvjet9voiiio-
1>li:before{content:"" counter(lst-ctn-kix_hvjet9voiiio-1,lower-latin) ". "}.lst
-kix_32zxnvl59py3-8>li{counter-increment:lst-ctn-kix_32zxnvl59py3-8}ol.lst-kix_j
pf3cr7xe1pc-0{list-style-type:none}ol.lst-kix_jpf3cr7xe1pc-1{list-style-type:non
e}ol.lst-kix_jpf3cr7xe1pc-2{list-style-type:none}.lst-kix_8uscekru9dbw-3>li{coun
ter-increment:lst-ctn-kix_8uscekru9dbw-3}.lst-kix_v454r7upbzuz-2>li:before{conte
nt:"" counter(lst-ctn-kix_v454r7upbzuz-2,lower-roman) ". "}ol.lst-kix_jpf3cr7xe1
pc-3{list-style-type:none}ol.lst-kix_5f9palqqt4mm-6.start{counter-reset:lst-ctn-
kix_5f9palqqt4mm-6 0}ol.lst-kix_jpf3cr7xe1pc-4{list-style-type:none}ol.lst-kix_j
pf3cr7xe1pc-3.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-3 0}.lst-kix_pyiocxf7
nngd-0>li:before{content:"" counter(lst-ctn-kix_pyiocxf7nngd-0,decimal) ". "}.ls
t-kix_m1x0qzeeadaz-4>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz-4}ol.lst-kix_
m1x0qzeeadaz-8.start{counter-reset:lst-ctn-kix_m1x0qzeeadaz-8 0}.lst-kix_kf08e4m
o0q15-0>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-0,decimal) ". "}.l
st-kix_9tkaqbe3bnu3-4>li:before{content:"" counter(lst-ctn-kix_9tkaqbe3bnu3-4,lo
wer-latin) ". "}ol.lst-kix_v454r7upbzuz-0.start{counter-reset:lst-ctn-kix_v454r7
upbzuz-0 0}.lst-kix_4s9m9sikrtm7-6>li{counter-increment:lst-ctn-kix_4s9m9sikrtm7
-6}.lst-kix_nhaic9xr6pf-3>li:before{content:"" counter(lst-ctn-kix_nhaic9xr6pf-3
,decimal) ". "}.lst-kix_z7in7d1ar2zt-1>li{counter-increment:lst-ctn-kix_z7in7d1a
r2zt-1}.lst-kix_qz5wp1hdd24k-4>li:before{content:"" counter(lst-ctn-kix_qz5wp1hd
d24k-4,lower-latin) ". "}.lst-kix_jzpgxqq6fzzf-8>li{counter-increment:lst-ctn-ki
x_jzpgxqq6fzzf-8}.lst-kix_nhaic9xr6pf-7>li{counter-increment:lst-ctn-kix_nhaic9x
r6pf-7}.lst-kix_oqqzpe3b3nud-8>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-8}.
lst-kix_dblgil8t24zy-4>li:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-4,l
ower-latin) ". "}.lst-kix_lixznqbqiris-7>li:before{content:"" counter(lst-ctn-ki
x_lixznqbqiris-7,lower-latin) ". "}ol.lst-kix_uq748w6pjv3r-5.start{counter-reset
:lst-ctn-kix_uq748w6pjv3r-5 0}.lst-kix_oqqzpe3b3nud-3>li{counter-increment:lst-c
tn-kix_oqqzpe3b3nud-3}.lst-kix_t7any4lo9hoq-1>li:before{content:"\0025cb "}.lst
-kix_lixznqbqiris-5>li{counter-increment:lst-ctn-kix_lixznqbqiris-5}ol.lst-kix_p
za3ybm1wtg3-2{list-style-type:none}ol.lst-kix_pza3ybm1wtg3-1{list-style-type:non
e}ol.lst-kix_oqqzpe3b3nud-2.start{counter-reset:lst-ctn-kix_oqqzpe3b3nud-2 0}ol.
lst-kix_pza3ybm1wtg3-4{list-style-type:none}ol.lst-kix_pza3ybm1wtg3-3{list-style
-type:none}.lst-kix_hm47sef7muk-6>li:before{content:"" counter(lst-ctn-kix_hm47s
ef7muk-6,decimal) ". "}ol.lst-kix_pza3ybm1wtg3-0{list-style-type:none}.lst-kix_5
f9palqqt4mm-2>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-2}.lst-kix_8dg0b92yw
51r-3>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-3,decimal) ". "}.lst
-kix_2uog6ch44jpu-6>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-6,deci
mal) ". "}.lst-kix_lgtbofvz5zxd-6>li:before{content:"" counter(lst-ctn-kix_lgtbo
fvz5zxd-6,decimal) ". "}ol.lst-kix_4s9m9sikrtm7-6.start{counter-reset:lst-ctn-ki
x_4s9m9sikrtm7-6 0}.lst-kix_wzk0mdv2qg9u-2>li:before{content:"" counter(lst-ctn-
kix_wzk0mdv2qg9u-2,lower-roman) ". "}ol.lst-kix_jxeur1wnlj7y-4.start{counter-res
et:lst-ctn-kix_jxeur1wnlj7y-4 0}.lst-kix_lgtbofvz5zxd-5>li{counter-increment:lst
-ctn-kix_lgtbofvz5zxd-5}.lst-kix_4s9m9sikrtm7-5>li{counter-increment:lst-ctn-kix
_4s9m9sikrtm7-5}ol.lst-kix_pza3ybm1wtg3-5{list-style-type:none}ol.lst-kix_pza3yb
m1wtg3-6{list-style-type:none}ol.lst-kix_pza3ybm1wtg3-7{list-style-type:none}ol.
lst-kix_pza3ybm1wtg3-8{list-style-type:none}ol.lst-kix_j51xhhtple7c-0.start{coun
ter-reset:lst-ctn-kix_j51xhhtple7c-0 0}.lst-kix_5f9palqqt4mm-8>li{counter-increm
ent:lst-ctn-kix_5f9palqqt4mm-8}.lst-kix_hvjet9voiiio-5>li:before{content:"" coun
ter(lst-ctn-kix_hvjet9voiiio-5,lower-roman) ". "}ol.lst-kix_2uog6ch44jpu-1.start
{counter-reset:lst-ctn-kix_2uog6ch44jpu-1 0}ol.lst-kix_juntnht2kzza-8.start{coun
ter-reset:lst-ctn-kix_juntnht2kzza-8 0}.lst-kix_60g29afx0lof-4>li{counter-increm
ent:lst-ctn-kix_60g29afx0lof-4}ol.lst-kix_8uscekru9dbw-8.start{counter-reset:lst
-ctn-kix_8uscekru9dbw-8 0}.lst-kix_nho7sy6cpfv0-6>li{counter-increment:lst-ctn-k
ix_nho7sy6cpfv0-6}.lst-kix_pa6lflf2amnu-7>li:before{content:"" counter(lst-ctn-k
ix_pa6lflf2amnu-7,lower-latin) ". "}ol.lst-kix_p8a3u4ougab9-1.start{counter-rese
t:lst-ctn-kix_p8a3u4ougab9-1 0}ol.lst-kix_nho7sy6cpfv0-3.start{counter-reset:lst
-ctn-kix_nho7sy6cpfv0-3 0}.lst-kix_iqyc5gy523tq-5>li:before{content:"\0025a0 "}
.lst-kix_jxeur1wnlj7y-0>li{counter-increment:lst-ctn-kix_jxeur1wnlj7y-0}ol.lst-k
ix_hm47sef7muk-4.start{counter-reset:lst-ctn-kix_hm47sef7muk-4 0}ol.lst-kix_pza3
ybm1wtg3-7.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-7 0}.lst-kix_dblgil8t24z
y-5>li:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-5,lower-roman) ". "}ol
.lst-kix_pyiocxf7nngd-5.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-5 0}ol.lst-
kix_pa6lflf2amnu-1{list-style-type:none}ol.lst-kix_pa6lflf2amnu-2{list-style-typ
e:none}ol.lst-kix_pa6lflf2amnu-0{list-style-type:none}.lst-kix_lixznqbqiris-0>li
{counter-increment:lst-ctn-kix_lixznqbqiris-0}.lst-kix_iqyc5gy523tq-3>li:before{
content:"\0025cf "}ol.lst-kix_pa6lflf2amnu-5{list-style-type:none}.lst-kix_nho7
sy6cpfv0-4>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-4,lower-latin)
". "}ol.lst-kix_pa6lflf2amnu-6{list-style-type:none}ol.lst-kix_pa6lflf2amnu-3{li
st-style-type:none}.lst-kix_57tjkabqizo2-3>li:before{content:"" counter(lst-ctn-
kix_57tjkabqizo2-3,decimal) ". "}ol.lst-kix_pa6lflf2amnu-4{list-style-type:none}
ol.lst-kix_1gqf2s78t7o1-5.start{counter-reset:lst-ctn-kix_1gqf2s78t7o1-5 0}ol.ls
t-kix_pa6lflf2amnu-7{list-style-type:none}ol.lst-kix_pa6lflf2amnu-8{list-style-t
ype:none}.lst-kix_nho7sy6cpfv0-0>li{counter-increment:lst-ctn-kix_nho7sy6cpfv0-0
}.lst-kix_kc6aimw8pnra-1>li:before{content:"\0025cb "}.lst-kix_fr6w5z45nvx0-6>l
i:before{content:"" counter(lst-ctn-kix_fr6w5z45nvx0-6,decimal) ". "}.lst-kix_py
iocxf7nngd-6>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-6}.lst-kix_kf08e4mo0q
15-7>li{counter-increment:lst-ctn-kix_kf08e4mo0q15-7}.lst-kix_jxeur1wnlj7y-5>li:
before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-5,lower-roman) ". "}ol.lst-ki
x_j51xhhtple7c-7.start{counter-reset:lst-ctn-kix_j51xhhtple7c-7 0}ol.lst-kix_m8z
ky1oy6k60-8.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-8 0}ol.lst-kix_juntnht2
kzza-3.start{counter-reset:lst-ctn-kix_juntnht2kzza-3 0}.lst-kix_iqyc5gy523tq-1>
li:before{content:"\0025cb "}.lst-kix_4s9m9sikrtm7-4>li{counter-increment:lst-c
tn-kix_4s9m9sikrtm7-4}ol.lst-kix_uq748w6pjv3r-3.start{counter-reset:lst-ctn-kix_
uq748w6pjv3r-3 0}.lst-kix_m1x0qzeeadaz-6>li:before{content:"" counter(lst-ctn-ki
x_m1x0qzeeadaz-6,decimal) ". "}ol.lst-kix_kf08e4mo0q15-4.start{counter-reset:lst
-ctn-kix_kf08e4mo0q15-4 0}.lst-kix_m1x0qzeeadaz-3>li:before{content:"" counter(l
st-ctn-kix_m1x0qzeeadaz-3,decimal) ". "}.lst-kix_fpxsljpyl73u-6>li:before{conten
t:"\0025cf "}.lst-kix_1gqf2s78t7o1-5>li:before{content:"" counter(lst-ctn-kix_1
gqf2s78t7o1-5,lower-roman) ". "}.lst-kix_32zxnvl59py3-4>li:before{content:"" cou
nter(lst-ctn-kix_32zxnvl59py3-4,lower-latin) ". "}ol.lst-kix_32zxnvl59py3-7{list
-style-type:none}ol.lst-kix_sgsi64vug03j-1.start{counter-reset:lst-ctn-kix_sgsi6
4vug03j-1 0}ol.lst-kix_32zxnvl59py3-6{list-style-type:none}ol.lst-kix_32zxnvl59p
y3-5{list-style-type:none}ol.lst-kix_32zxnvl59py3-4{list-style-type:none}.lst-ki
x_8dg0b92yw51r-6>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-6,decimal
) ". "}ol.lst-kix_32zxnvl59py3-3{list-style-type:none}.lst-kix_hvjet9voiiio-8>li
:before{content:"" counter(lst-ctn-kix_hvjet9voiiio-8,lower-roman) ". "}ol.lst-k
ix_32zxnvl59py3-2{list-style-type:none}ol.lst-kix_32zxnvl59py3-1{list-style-type
:none}.lst-kix_pyiocxf7nngd-4>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-4}ol
.lst-kix_32zxnvl59py3-0{list-style-type:none}ol.lst-kix_lgtbofvz5zxd-3.start{cou
nter-reset:lst-ctn-kix_lgtbofvz5zxd-3 0}.lst-kix_j51xhhtple7c-0>li:before{conten
t:"" counter(lst-ctn-kix_j51xhhtple7c-0,decimal) ". "}.lst-kix_m8zky1oy6k60-5>li
:before{content:"" counter(lst-ctn-kix_m8zky1oy6k60-5,lower-roman) ". "}.lst-kix
_lgtbofvz5zxd-0>li{counter-increment:lst-ctn-kix_lgtbofvz5zxd-0}.lst-kix_j51xhht
ple7c-2>li:before{content:"" counter(lst-ctn-kix_j51xhhtple7c-2,lower-roman) ".
"}.lst-kix_pa6lflf2amnu-7>li{counter-increment:lst-ctn-kix_pa6lflf2amnu-7}.lst-k
ix_8dg0b92yw51r-4>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-4,lower-
latin) ". "}.lst-kix_jzpgxqq6fzzf-7>li:before{content:"" counter(lst-ctn-kix_jzp
gxqq6fzzf-7,lower-latin) ". "}.lst-kix_hm47sef7muk-5>li{counter-increment:lst-ct
n-kix_hm47sef7muk-5}ol.lst-kix_t9jkz28ln50j-7.start{counter-reset:lst-ctn-kix_t9
jkz28ln50j-7 0}.lst-kix_1gqf2s78t7o1-2>li:before{content:"" counter(lst-ctn-kix_
1gqf2s78t7o1-2,lower-roman) ". "}ol.lst-kix_j51xhhtple7c-3.start{counter-reset:l
st-ctn-kix_j51xhhtple7c-3 0}.lst-kix_z7in7d1ar2zt-5>li:before{content:"" counter
(lst-ctn-kix_z7in7d1ar2zt-5,lower-roman) ". "}ol.lst-kix_nhaic9xr6pf-7.start{cou
nter-reset:lst-ctn-kix_nhaic9xr6pf-7 0}.lst-kix_jpf3cr7xe1pc-4>li:before{content
:"" counter(lst-ctn-kix_jpf3cr7xe1pc-4,lower-latin) ". "}.lst-kix_hm47sef7muk-4>
li{counter-increment:lst-ctn-kix_hm47sef7muk-4}ol.lst-kix_8dg0b92yw51r-7.start{c
ounter-reset:lst-ctn-kix_8dg0b92yw51r-7 0}.lst-kix_60g29afx0lof-1>li:before{cont
ent:"" counter(lst-ctn-kix_60g29afx0lof-1,lower-latin) ". "}.lst-kix_lixznqbqiri
s-5>li:before{content:"" counter(lst-ctn-kix_lixznqbqiris-5,lower-roman) ". "}.l
st-kix_oqqzpe3b3nud-0>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-0}ol.lst-kix
_t9jkz28ln50j-3.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-3 0}ol.lst-kix_p8a3
u4ougab9-7.start{counter-reset:lst-ctn-kix_p8a3u4ougab9-7 0}ol.lst-kix_lgtbofvz5
zxd-7.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-7 0}.lst-kix_opzlp0rjj486-7>l
i:before{content:"" counter(lst-ctn-kix_opzlp0rjj486-7,lower-latin) ". "}.lst-ki
x_m8zky1oy6k60-4>li{counter-increment:lst-ctn-kix_m8zky1oy6k60-4}.lst-kix_57tjka
bqizo2-2>li{counter-increment:lst-ctn-kix_57tjkabqizo2-2}.lst-kix_m1x0qzeeadaz-5
>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz-5}.lst-kix_hm47sef7muk-0>li:befor
e{content:"" counter(lst-ctn-kix_hm47sef7muk-0,decimal) ". "}.lst-kix_hm47sef7mu
k-6>li{counter-increment:lst-ctn-kix_hm47sef7muk-6}ol.lst-kix_oqqzpe3b3nud-5.sta
rt{counter-reset:lst-ctn-kix_oqqzpe3b3nud-5 0}ol.lst-kix_32zxnvl59py3-1.start{co
unter-reset:lst-ctn-kix_32zxnvl59py3-1 0}ol.lst-kix_nho7sy6cpfv0-1{list-style-ty
pe:none}ol.lst-kix_nho7sy6cpfv0-0{list-style-type:none}ol.lst-kix_kvgsl0s9rzo4-7
.start{counter-reset:lst-ctn-kix_kvgsl0s9rzo4-7 0}.lst-kix_57tjkabqizo2-8>li:bef
ore{content:"" counter(lst-ctn-kix_57tjkabqizo2-8,lower-roman) ". "}.lst-kix_jun
tnht2kzza-2>li:before{content:"" counter(lst-ctn-kix_juntnht2kzza-2,lower-roman)
". "}.lst-kix_pza3ybm1wtg3-7>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3-7}.l
st-kix_z7in7d1ar2zt-7>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt-7}ol.lst-kix
_5f9palqqt4mm-8{list-style-type:none}.lst-kix_wzk0mdv2qg9u-7>li:before{content:"
" counter(lst-ctn-kix_wzk0mdv2qg9u-7,lower-latin) ". "}ol.lst-kix_t9jkz28ln50j-6
.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-6 0}ol.lst-kix_jxeur1wnlj7y-0.star
t{counter-reset:lst-ctn-kix_jxeur1wnlj7y-0 0}.lst-kix_4s9m9sikrtm7-4>li:before{c
ontent:"" counter(lst-ctn-kix_4s9m9sikrtm7-4,lower-latin) ". "}.lst-kix_ggm78fck
av5h-3>li:before{content:"" counter(lst-ctn-kix_ggm78fckav5h-3,decimal) ". "}ol.
lst-kix_5f9palqqt4mm-5{list-style-type:none}ol.lst-kix_5f9palqqt4mm-4{list-style
-type:none}ol.lst-kix_5f9palqqt4mm-7{list-style-type:none}ol.lst-kix_5f9palqqt4m
m-6{list-style-type:none}.lst-kix_57tjkabqizo2-2>li:before{content:"" counter(ls
t-ctn-kix_57tjkabqizo2-2,lower-roman) ". "}.lst-kix_pza3ybm1wtg3-1>li:before{con
tent:"" counter(lst-ctn-kix_pza3ybm1wtg3-1,lower-latin) ". "}.lst-kix_2uog6ch44j
pu-5>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-5,lower-roman) ". "}.
lst-kix_8uscekru9dbw-8>li{counter-increment:lst-ctn-kix_8uscekru9dbw-8}.lst-kix_
57tjkabqizo2-0>li{counter-increment:lst-ctn-kix_57tjkabqizo2-0}.lst-kix_dblgil8t
24zy-6>li:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-6,decimal) ". "}ol.
lst-kix_5f9palqqt4mm-0{list-style-type:none}ol.lst-kix_5f9palqqt4mm-1{list-style
-type:none}ol.lst-kix_5f9palqqt4mm-2{list-style-type:none}ol.lst-kix_nhaic9xr6pf
-0.start{counter-reset:lst-ctn-kix_nhaic9xr6pf-0 0}ol.lst-kix_5f9palqqt4mm-3{lis
t-style-type:none}.lst-kix_vnvg10gwrc8t-3>li{counter-increment:lst-ctn-kix_vnvg1
0gwrc8t-3}.lst-kix_p8a3u4ougab9-8>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-
8}.lst-kix_m8zky1oy6k60-5>li{counter-increment:lst-ctn-kix_m8zky1oy6k60-5}ol.lst
-kix_z7in7d1ar2zt-1{list-style-type:none}ol.lst-kix_z7in7d1ar2zt-0{list-style-ty
pe:none}ol.lst-kix_z7in7d1ar2zt-5{list-style-type:none}.lst-kix_qeukrmzdd856-5>l
i:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-5,lower-roman) ". "}.lst-ki
x_1gqf2s78t7o1-0>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-0,decimal
) ". "}ol.lst-kix_z7in7d1ar2zt-4{list-style-type:none}ol.lst-kix_z7in7d1ar2zt-3{
list-style-type:none}ol.lst-kix_z7in7d1ar2zt-2{list-style-type:none}ol.lst-kix_z
7in7d1ar2zt-8{list-style-type:none}ol.lst-kix_z7in7d1ar2zt-7{list-style-type:non
e}ol.lst-kix_z7in7d1ar2zt-6{list-style-type:none}.lst-kix_m8zky1oy6k60-6>li:befo
re{content:"" counter(lst-ctn-kix_m8zky1oy6k60-6,decimal) ". "}ol.lst-kix_60g29a
fx0lof-8.start{counter-reset:lst-ctn-kix_60g29afx0lof-8 0}ol.lst-kix_lixznqbqiri
s-2.start{counter-reset:lst-ctn-kix_lixznqbqiris-2 0}ol.lst-kix_57tjkabqizo2-5.s
tart{counter-reset:lst-ctn-kix_57tjkabqizo2-5 0}.lst-kix_3h1iswqv3l7s-0>li{count
er-increment:lst-ctn-kix_3h1iswqv3l7s-0}ol.lst-kix_2uog6ch44jpu-8.start{counter-
reset:lst-ctn-kix_2uog6ch44jpu-8 0}.lst-kix_fr6w5z45nvx0-0>li{counter-increment:
lst-ctn-kix_fr6w5z45nvx0-0}.lst-kix_p8a3u4ougab9-6>li:before{content:"" counter(
lst-ctn-kix_p8a3u4ougab9-6,decimal) ". "}.lst-kix_vnvg10gwrc8t-7>li{counter-incr
ement:lst-ctn-kix_vnvg10gwrc8t-7}.lst-kix_v454r7upbzuz-5>li{counter-increment:ls
t-ctn-kix_v454r7upbzuz-5}.lst-kix_juntnht2kzza-5>li{counter-increment:lst-ctn-ki
x_juntnht2kzza-5}ol.lst-kix_oqqzpe3b3nud-6.start{counter-reset:lst-ctn-kix_oqqzp
e3b3nud-6 0}.lst-kix_vnvg10gwrc8t-5>li:before{content:"" counter(lst-ctn-kix_vnv
g10gwrc8t-5,lower-roman) ". "}.lst-kix_wzk0mdv2qg9u-8>li:before{content:"" count
er(lst-ctn-kix_wzk0mdv2qg9u-8,lower-roman) ". "}.lst-kix_q1b5wk7cmirb-1>li:befor
e{content:"\0025cb "}.lst-kix_i2v077rod1nx-3>li:before{content:"\0025cf "}ol.l
st-kix_3h1iswqv3l7s-4.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-4 0}.lst-kix_
v454r7upbzuz-1>li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-1,lower-lat
in) ". "}.lst-kix_60g29afx0lof-7>li:before{content:"" counter(lst-ctn-kix_60g29a
fx0lof-7,lower-latin) ". "}ol.lst-kix_nho7sy6cpfv0-6{list-style-type:none}ol.lst
-kix_nho7sy6cpfv0-7{list-style-type:none}ol.lst-kix_nho7sy6cpfv0-8{list-style-ty
pe:none}ol.lst-kix_nho7sy6cpfv0-2{list-style-type:none}.lst-kix_57tjkabqizo2-1>l
i{counter-increment:lst-ctn-kix_57tjkabqizo2-1}ol.lst-kix_nho7sy6cpfv0-3{list-st
yle-type:none}ol.lst-kix_nho7sy6cpfv0-4{list-style-type:none}ol.lst-kix_nho7sy6c
pfv0-5{list-style-type:none}.lst-kix_uq748w6pjv3r-5>li{counter-increment:lst-ctn
-kix_uq748w6pjv3r-5}.lst-kix_opzlp0rjj486-2>li:before{content:"" counter(lst-ctn
-kix_opzlp0rjj486-2,lower-roman) ". "}.lst-kix_1c0w7icorqz1-8>li{counter-increme
nt:lst-ctn-kix_1c0w7icorqz1-8}.lst-kix_iqyc5gy523tq-4>li:before{content:"\0025cb
"}.lst-kix_1g0xzctl1vi-3>li:before{content:"" counter(lst-ctn-kix_1g0xzctl1vi-
3,decimal) ". "}.lst-kix_oqqzpe3b3nud-4>li:before{content:"" counter(lst-ctn-kix
_oqqzpe3b3nud-4,lower-latin) ". "}.lst-kix_dblgil8t24zy-5>li{counter-increment:l
st-ctn-kix_dblgil8t24zy-5}ol.lst-kix_kf08e4mo0q15-5.start{counter-reset:lst-ctn-
kix_kf08e4mo0q15-5 0}.lst-kix_pa6lflf2amnu-0>li:before{content:"" counter(lst-ct
n-kix_pa6lflf2amnu-0,decimal) ". "}ol.lst-kix_qz5wp1hdd24k-8.start{counter-reset
:lst-ctn-kix_qz5wp1hdd24k-8 0}.lst-kix_3h1iswqv3l7s-3>li{counter-increment:lst-c
tn-kix_3h1iswqv3l7s-3}.lst-kix_qz5wp1hdd24k-2>li{counter-increment:lst-ctn-kix_q
z5wp1hdd24k-2}.lst-kix_1g0xzctl1vi-8>li:before{content:"" counter(lst-ctn-kix_1g
0xzctl1vi-8,lower-roman) ". "}.lst-kix_q1b5wk7cmirb-7>li:before{content:"\0025cb
"}.lst-kix_fr6w5z45nvx0-8>li:before{content:"" counter(lst-ctn-kix_fr6w5z45nvx
0-8,lower-roman) ". "}.lst-kix_sgsi64vug03j-6>li{counter-increment:lst-ctn-kix_s
gsi64vug03j-6}.lst-kix_8uscekru9dbw-0>li:before{content:"" counter(lst-ctn-kix_8
uscekru9dbw-0,decimal) ". "}.lst-kix_lixznqbqiris-1>li:before{content:"" counter
(lst-ctn-kix_lixznqbqiris-1,lower-latin) ". "}.lst-kix_nhaic9xr6pf-3>li{counter-
increment:lst-ctn-kix_nhaic9xr6pf-3}.lst-kix_fr6w5z45nvx0-4>li{counter-increment
:lst-ctn-kix_fr6w5z45nvx0-4}.lst-kix_lgtbofvz5zxd-0>li:before{content:"" counter
(lst-ctn-kix_lgtbofvz5zxd-0,decimal) ". "}ol.lst-kix_4s9m9sikrtm7-2.start{counte
r-reset:lst-ctn-kix_4s9m9sikrtm7-2 0}ol.lst-kix_lgtbofvz5zxd-8.start{counter-res
et:lst-ctn-kix_lgtbofvz5zxd-8 0}.lst-kix_oqqzpe3b3nud-5>li{counter-increment:lst
-ctn-kix_oqqzpe3b3nud-5}.lst-kix_1gqf2s78t7o1-5>li{counter-increment:lst-ctn-kix
_1gqf2s78t7o1-5}ol.lst-kix_p8a3u4ougab9-8{list-style-type:none}.lst-kix_bnpbicbh
bbru-2>li:before{content:"\0025a0 "}ol.lst-kix_p8a3u4ougab9-7{list-style-type:n
one}ol.lst-kix_1c0w7icorqz1-0.start{counter-reset:lst-ctn-kix_1c0w7icorqz1-0 0}o
l.lst-kix_4s9m9sikrtm7-3.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-3 0}ol.lst
-kix_p8a3u4ougab9-1{list-style-type:none}ol.lst-kix_p8a3u4ougab9-2{list-style-ty
pe:none}ol.lst-kix_p8a3u4ougab9-0{list-style-type:none}ol.lst-kix_jpf3cr7xe1pc-4
.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-4 0}ol.lst-kix_p8a3u4ougab9-5{list
-style-type:none}ol.lst-kix_p8a3u4ougab9-6{list-style-type:none}ol.lst-kix_p8a3u
4ougab9-3{list-style-type:none}ol.lst-kix_p8a3u4ougab9-4{list-style-type:none}.l
st-kix_t9jkz28ln50j-3>li{counter-increment:lst-ctn-kix_t9jkz28ln50j-3}ol.lst-kix
_kvgsl0s9rzo4-3.start{counter-reset:lst-ctn-kix_kvgsl0s9rzo4-3 0}.lst-kix_9tkaqb
e3bnu3-8>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-8}.lst-kix_jzpgxqq6fzzf-5
>li:before{content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-5,lower-roman) ". "}.lst-
kix_qz5wp1hdd24k-5>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-5}.lst-kix_sgsi
64vug03j-2>li:before{content:"" counter(lst-ctn-kix_sgsi64vug03j-2,lower-roman)
". "}.lst-kix_1gqf2s78t7o1-0>li{counter-increment:lst-ctn-kix_1gqf2s78t7o1-0}.ls
t-kix_vnvg10gwrc8t-0>li:before{content:"" counter(lst-ctn-kix_vnvg10gwrc8t-0,dec
imal) ". "}.lst-kix_qeukrmzdd856-7>li:before{content:"" counter(lst-ctn-kix_qeuk
rmzdd856-7,lower-latin) ". "}.lst-kix_kc6aimw8pnra-7>li:before{content:"\0025cb
"}.lst-kix_opzlp0rjj486-5>li:before{content:"" counter(lst-ctn-kix_opzlp0rjj486
-5,lower-roman) ". "}ol.lst-kix_nhaic9xr6pf-8.start{counter-reset:lst-ctn-kix_nh
aic9xr6pf-8 0}.lst-kix_vvzditg8sno-4>li:before{content:"\0025cb "}ol.lst-kix_nh
aic9xr6pf-2.start{counter-reset:lst-ctn-kix_nhaic9xr6pf-2 0}ol.lst-kix_4s9m9sikr
tm7-4.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-4 0}ol.lst-kix_1gqf2s78t7o1-7
{list-style-type:none}ol.lst-kix_1gqf2s78t7o1-8{list-style-type:none}ol.lst-kix_
1gqf2s78t7o1-5{list-style-type:none}ol.lst-kix_1gqf2s78t7o1-6{list-style-type:no
ne}.lst-kix_kvgsl0s9rzo4-4>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4
-4,lower-latin) ". "}.lst-kix_wzk0mdv2qg9u-2>li{counter-increment:lst-ctn-kix_wz
k0mdv2qg9u-2}.lst-kix_juntnht2kzza-3>li:before{content:"" counter(lst-ctn-kix_ju
ntnht2kzza-3,decimal) ". "}.lst-kix_8dg0b92yw51r-3>li{counter-increment:lst-ctn-
kix_8dg0b92yw51r-3}.lst-kix_fpxsljpyl73u-4>li:before{content:"\0025cb "}ol.lst-
kix_1gqf2s78t7o1-0{list-style-type:none}.lst-kix_kvgsl0s9rzo4-7>li:before{conten
t:"" counter(lst-ctn-kix_kvgsl0s9rzo4-7,lower-latin) ". "}ol.lst-kix_1gqf2s78t7o
1-4{list-style-type:none}.lst-kix_kc6aimw8pnra-8>li:before{content:"\0025a0 "}o
l.lst-kix_1gqf2s78t7o1-3{list-style-type:none}ol.lst-kix_1gqf2s78t7o1-2{list-sty
le-type:none}ol.lst-kix_1gqf2s78t7o1-1{list-style-type:none}.lst-kix_1c0w7icorqz
1-6>li:before{content:"" counter(lst-ctn-kix_1c0w7icorqz1-6,decimal) ". "}.lst-k
ix_60g29afx0lof-1>li{counter-increment:lst-ctn-kix_60g29afx0lof-1}.lst-kix_sgsi6
4vug03j-1>li{counter-increment:lst-ctn-kix_sgsi64vug03j-1}.lst-kix_60g29afx0lof-
8>li{counter-increment:lst-ctn-kix_60g29afx0lof-8}ol.lst-kix_lixznqbqiris-3.star
t{counter-reset:lst-ctn-kix_lixznqbqiris-3 0}.lst-kix_opzlp0rjj486-3>li{counter-
increment:lst-ctn-kix_opzlp0rjj486-3}.lst-kix_iqyc5gy523tq-0>li:before{content:"
\0025cf "}ol.lst-kix_p8a3u4ougab9-5.start{counter-reset:lst-ctn-kix_p8a3u4ougab
9-5 0}.lst-kix_kvgsl0s9rzo4-6>li{counter-increment:lst-ctn-kix_kvgsl0s9rzo4-6}ol
.lst-kix_opzlp0rjj486-0.start{counter-reset:lst-ctn-kix_opzlp0rjj486-0 0}.lst-ki
x_pza3ybm1wtg3-7>li:before{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-7,lower-l
atin) ". "}.lst-kix_opzlp0rjj486-0>li:before{content:"" counter(lst-ctn-kix_opzl
p0rjj486-0,decimal) ". "}.lst-kix_p8a3u4ougab9-8>li:before{content:"" counter(ls
t-ctn-kix_p8a3u4ougab9-8,lower-roman) ". "}ol.lst-kix_pza3ybm1wtg3-2.start{count
er-reset:lst-ctn-kix_pza3ybm1wtg3-2 0}.lst-kix_dblgil8t24zy-8>li:before{content:
"" counter(lst-ctn-kix_dblgil8t24zy-8,lower-roman) ". "}ol.lst-kix_32zxnvl59py3-
0.start{counter-reset:lst-ctn-kix_32zxnvl59py3-0 0}.lst-kix_t9jkz28ln50j-7>li{co
unter-increment:lst-ctn-kix_t9jkz28ln50j-7}.lst-kix_z7in7d1ar2zt-8>li{counter-in
crement:lst-ctn-kix_z7in7d1ar2zt-8}.lst-kix_3h1iswqv3l7s-4>li{counter-increment:
lst-ctn-kix_3h1iswqv3l7s-4}.lst-kix_bnpbicbhbbru-7>li:before{content:"\0025cb "
}.lst-kix_uq748w6pjv3r-4>li{counter-increment:lst-ctn-kix_uq748w6pjv3r-4}.lst-ki
x_qz5wp1hdd24k-1>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-1,lower-l
atin) ". "}ol.lst-kix_hm47sef7muk-2.start{counter-reset:lst-ctn-kix_hm47sef7muk-
2 0}.lst-kix_jpf3cr7xe1pc-3>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-3}.lst
-kix_oqqzpe3b3nud-4>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-4}ol.lst-kix_l
gtbofvz5zxd-1.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-1 0}ol.lst-kix_9tkaqb
e3bnu3-5.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-5 0}.lst-kix_vnvg10gwrc8t-
0>li{counter-increment:lst-ctn-kix_vnvg10gwrc8t-0}ol.lst-kix_32zxnvl59py3-8{list
-style-type:none}.lst-kix_lgtbofvz5zxd-8>li{counter-increment:lst-ctn-kix_lgtbof
vz5zxd-8}.lst-kix_m8zky1oy6k60-2>li:before{content:"" counter(lst-ctn-kix_m8zky1
oy6k60-2,lower-roman) ". "}ol.lst-kix_jxeur1wnlj7y-7{list-style-type:none}ol.lst
-kix_jxeur1wnlj7y-8{list-style-type:none}ol.lst-kix_jxeur1wnlj7y-3{list-style-ty
pe:none}ol.lst-kix_jxeur1wnlj7y-4{list-style-type:none}ol.lst-kix_jxeur1wnlj7y-5
{list-style-type:none}ol.lst-kix_jxeur1wnlj7y-6{list-style-type:none}.lst-kix_fr
6w5z45nvx0-7>li{counter-increment:lst-ctn-kix_fr6w5z45nvx0-7}.lst-kix_qeukrmzdd8
56-3>li{counter-increment:lst-ctn-kix_qeukrmzdd856-3}ol.lst-kix_kf08e4mo0q15-7.s
tart{counter-reset:lst-ctn-kix_kf08e4mo0q15-7 0}.lst-kix_vnvg10gwrc8t-4>li{count
er-increment:lst-ctn-kix_vnvg10gwrc8t-4}ol.lst-kix_jxeur1wnlj7y-0{list-style-typ
e:none}.lst-kix_jzpgxqq6fzzf-1>li{counter-increment:lst-ctn-kix_jzpgxqq6fzzf-1}o
l.lst-kix_jxeur1wnlj7y-2{list-style-type:none}.lst-kix_jzpgxqq6fzzf-4>li:before{
content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-4,lower-latin) ". "}ol.lst-kix_jxeur
1wnlj7y-1{list-style-type:none}.lst-kix_8dg0b92yw51r-8>li:before{content:"" coun
ter(lst-ctn-kix_8dg0b92yw51r-8,lower-roman) ". "}.lst-kix_opzlp0rjj486-8>li{coun
ter-increment:lst-ctn-kix_opzlp0rjj486-8}.lst-kix_m8zky1oy6k60-2>li{counter-incr
ement:lst-ctn-kix_m8zky1oy6k60-2}ol.lst-kix_8dg0b92yw51r-5{list-style-type:none}
ol.lst-kix_8dg0b92yw51r-6{list-style-type:none}ol.lst-kix_8dg0b92yw51r-7{list-st
yle-type:none}ol.lst-kix_opzlp0rjj486-7.start{counter-reset:lst-ctn-kix_opzlp0rj
j486-7 0}ol.lst-kix_8dg0b92yw51r-8{list-style-type:none}.lst-kix_oqqzpe3b3nud-6>
li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-6}ol.lst-kix_4s9m9sikrtm7-6{list-s
tyle-type:none}ol.lst-kix_4s9m9sikrtm7-7{list-style-type:none}ol.lst-kix_4s9m9si
krtm7-4{list-style-type:none}ol.lst-kix_4s9m9sikrtm7-5{list-style-type:none}ol.l
st-kix_4s9m9sikrtm7-8{list-style-type:none}.lst-kix_qeukrmzdd856-2>li{counter-in
crement:lst-ctn-kix_qeukrmzdd856-2}ol.lst-kix_8dg0b92yw51r-2{list-style-type:non
e}ol.lst-kix_8dg0b92yw51r-1{list-style-type:none}ol.lst-kix_8dg0b92yw51r-4{list-
style-type:none}ol.lst-kix_8dg0b92yw51r-3{list-style-type:none}ol.lst-kix_4s9m9s
ikrtm7-2{list-style-type:none}ol.lst-kix_4s9m9sikrtm7-3{list-style-type:none}ol.
lst-kix_8dg0b92yw51r-0{list-style-type:none}ol.lst-kix_4s9m9sikrtm7-0{list-style
-type:none}ol.lst-kix_8uscekru9dbw-6.start{counter-reset:lst-ctn-kix_8uscekru9db
w-6 0}ol.lst-kix_4s9m9sikrtm7-1{list-style-type:none}.lst-kix_1gqf2s78t7o1-4>li{
counter-increment:lst-ctn-kix_1gqf2s78t7o1-4}.lst-kix_jzpgxqq6fzzf-2>li{counter-
increment:lst-ctn-kix_jzpgxqq6fzzf-2}ol.lst-kix_kvgsl0s9rzo4-1.start{counter-res
et:lst-ctn-kix_kvgsl0s9rzo4-1 0}.lst-kix_uq748w6pjv3r-8>li:before{content:"" cou
nter(lst-ctn-kix_uq748w6pjv3r-8,lower-roman) ". "}.lst-kix_ggm78fckav5h-1>li:bef
ore{content:"" counter(lst-ctn-kix_ggm78fckav5h-1,lower-latin) ". "}.lst-kix_dbl
gil8t24zy-6>li{counter-increment:lst-ctn-kix_dblgil8t24zy-6}ol.lst-kix_hvjet9voi
iio-4.start{counter-reset:lst-ctn-kix_hvjet9voiiio-4 0}.lst-kix_nho7sy6cpfv0-3>l
i:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-3,decimal) ". "}.lst-kix_lg
tbofvz5zxd-7>li{counter-increment:lst-ctn-kix_lgtbofvz5zxd-7}.lst-kix_uq748w6pjv
3r-7>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-7,lower-latin) ". "}o
l.lst-kix_jzpgxqq6fzzf-3.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-3 0}ol.lst
-kix_qeukrmzdd856-4.start{counter-reset:lst-ctn-kix_qeukrmzdd856-4 0}.lst-kix_p8
a3u4ougab9-7>li:before{content:"" counter(lst-ctn-kix_p8a3u4ougab9-7,lower-latin
) ". "}ol.lst-kix_pa6lflf2amnu-8.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-8
0}.lst-kix_32zxnvl59py3-5>li:before{content:"" counter(lst-ctn-kix_32zxnvl59py3-
5,lower-roman) ". "}.lst-kix_jpf3cr7xe1pc-7>li:before{content:"" counter(lst-ctn
-kix_jpf3cr7xe1pc-7,lower-latin) ". "}.lst-kix_1c0w7icorqz1-2>li{counter-increme
nt:lst-ctn-kix_1c0w7icorqz1-2}.lst-kix_nhaic9xr6pf-5>li{counter-increment:lst-ct
n-kix_nhaic9xr6pf-5}.lst-kix_qeukrmzdd856-0>li{counter-increment:lst-ctn-kix_qeu
krmzdd856-0}.lst-kix_t7any4lo9hoq-5>li:before{content:"\0025a0 "}ol.lst-kix_z7i
n7d1ar2zt-5.start{counter-reset:lst-ctn-kix_z7in7d1ar2zt-5 0}.lst-kix_5f9palqqt4
mm-4>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-4}ol.lst-kix_57tjkabqizo2-3.s
tart{counter-reset:lst-ctn-kix_57tjkabqizo2-3 0}ol.lst-kix_oqqzpe3b3nud-4.start{
counter-reset:lst-ctn-kix_oqqzpe3b3nud-4 0}.lst-kix_9tkaqbe3bnu3-8>li:before{con
tent:"" counter(lst-ctn-kix_9tkaqbe3bnu3-8,lower-roman) ". "}ol.lst-kix_vnvg10gw
rc8t-3{list-style-type:none}.lst-kix_qz5wp1hdd24k-1>li{counter-increment:lst-ctn
-kix_qz5wp1hdd24k-1}ol.lst-kix_vnvg10gwrc8t-2{list-style-type:none}ol.lst-kix_vn
vg10gwrc8t-5{list-style-type:none}ol.lst-kix_vnvg10gwrc8t-4{list-style-type:none
}ol.lst-kix_vnvg10gwrc8t-7{list-style-type:none}ol.lst-kix_vnvg10gwrc8t-6{list-s
tyle-type:none}ol.lst-kix_vnvg10gwrc8t-8{list-style-type:none}.lst-kix_jpf3cr7xe
1pc-1>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc-1,lower-latin) ". "}
ol.lst-kix_kf08e4mo0q15-0.start{counter-reset:lst-ctn-kix_kf08e4mo0q15-0 0}.lst-
kix_fpxsljpyl73u-5>li:before{content:"\0025a0 "}ol.lst-kix_1g0xzctl1vi-5{list-s
tyle-type:none}ol.lst-kix_ggm78fckav5h-1{list-style-type:none}ol.lst-kix_1g0xzct
l1vi-4{list-style-type:none}ol.lst-kix_ggm78fckav5h-2{list-style-type:none}ol.ls
t-kix_1g0xzctl1vi-3{list-style-type:none}.lst-kix_hvjet9voiiio-4>li{counter-incr
ement:lst-ctn-kix_hvjet9voiiio-4}ol.lst-kix_1g0xzctl1vi-2{list-style-type:none}o
l.lst-kix_ggm78fckav5h-0{list-style-type:none}ol.lst-kix_1g0xzctl1vi-1{list-styl
e-type:none}ol.lst-kix_ggm78fckav5h-5{list-style-type:none}ol.lst-kix_ggm78fckav
5h-6{list-style-type:none}ol.lst-kix_1g0xzctl1vi-0{list-style-type:none}ol.lst-k
ix_ggm78fckav5h-3{list-style-type:none}ol.lst-kix_ggm78fckav5h-4{list-style-type
:none}.lst-kix_pa6lflf2amnu-1>li:before{content:"" counter(lst-ctn-kix_pa6lflf2a
mnu-1,lower-latin) ". "}ol.lst-kix_ggm78fckav5h-7{list-style-type:none}ol.lst-ki
x_ggm78fckav5h-8{list-style-type:none}ol.lst-kix_1g0xzctl1vi-8{list-style-type:n
one}.lst-kix_t9jkz28ln50j-4>li:before{content:"" counter(lst-ctn-kix_t9jkz28ln50
j-4,lower-latin) ". "}ol.lst-kix_1g0xzctl1vi-7{list-style-type:none}ol.lst-kix_1
g0xzctl1vi-6{list-style-type:none}.lst-kix_nho7sy6cpfv0-3>li{counter-increment:l
st-ctn-kix_nho7sy6cpfv0-3}ol.lst-kix_vnvg10gwrc8t-0.start{counter-reset:lst-ctn-
kix_vnvg10gwrc8t-0 0}ol.lst-kix_nho7sy6cpfv0-4.start{counter-reset:lst-ctn-kix_n
ho7sy6cpfv0-4 0}.lst-kix_vnvg10gwrc8t-1>li:before{content:"" counter(lst-ctn-kix
_vnvg10gwrc8t-1,lower-latin) ". "}ol.lst-kix_juntnht2kzza-2.start{counter-reset:
lst-ctn-kix_juntnht2kzza-2 0}.lst-kix_v454r7upbzuz-6>li{counter-increment:lst-ct
n-kix_v454r7upbzuz-6}ul.lst-kix_vvzditg8sno-6{list-style-type:none}.lst-kix_i2v0
77rod1nx-6>li:before{content:"\0025cf "}ul.lst-kix_vvzditg8sno-5{list-style-typ
e:none}ul.lst-kix_vvzditg8sno-4{list-style-type:none}ul.lst-kix_vvzditg8sno-3{li
st-style-type:none}ul.lst-kix_vvzditg8sno-8{list-style-type:none}ul.lst-kix_vvzd
itg8sno-7{list-style-type:none}.lst-kix_wzk0mdv2qg9u-3>li:before{content:"" coun
ter(lst-ctn-kix_wzk0mdv2qg9u-3,decimal) ". "}ul.lst-kix_vvzditg8sno-2{list-style
-type:none}ul.lst-kix_vvzditg8sno-1{list-style-type:none}.lst-kix_2uog6ch44jpu-0
>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-0,decimal) ". "}ul.lst-ki
x_vvzditg8sno-0{list-style-type:none}ol.lst-kix_60g29afx0lof-6.start{counter-res
et:lst-ctn-kix_60g29afx0lof-6 0}.lst-kix_v454r7upbzuz-2>li{counter-increment:lst
-ctn-kix_v454r7upbzuz-2}.lst-kix_lgtbofvz5zxd-3>li:before{content:"" counter(lst
-ctn-kix_lgtbofvz5zxd-3,decimal) ". "}.lst-kix_1g0xzctl1vi-8>li{counter-incremen
t:lst-ctn-kix_1g0xzctl1vi-8}ol.lst-kix_5f9palqqt4mm-2.start{counter-reset:lst-ct
n-kix_5f9palqqt4mm-2 0}ol.lst-kix_lixznqbqiris-6.start{counter-reset:lst-ctn-kix
_lixznqbqiris-6 0}.lst-kix_pyiocxf7nngd-2>li{counter-increment:lst-ctn-kix_pyioc
xf7nngd-2}.lst-kix_m1x0qzeeadaz-1>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz-
1}.lst-kix_hm47sef7muk-7>li{counter-increment:lst-ctn-kix_hm47sef7muk-7}ol.lst-k
ix_nho7sy6cpfv0-2.start{counter-reset:lst-ctn-kix_nho7sy6cpfv0-2 0}ol.lst-kix_57
tjkabqizo2-4.start{counter-reset:lst-ctn-kix_57tjkabqizo2-4 0}.lst-kix_lixznqbqi
ris-8>li:before{content:"" counter(lst-ctn-kix_lixznqbqiris-8,lower-roman) ". "}
.lst-kix_j51xhhtple7c-2>li{counter-increment:lst-ctn-kix_j51xhhtple7c-2}ol.lst-k
ix_5f9palqqt4mm-5.start{counter-reset:lst-ctn-kix_5f9palqqt4mm-5 0}ol.lst-kix_jp
f3cr7xe1pc-5.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-5 0}.lst-kix_ggm78fcka
v5h-0>li:before{content:"" counter(lst-ctn-kix_ggm78fckav5h-0,decimal) ". "}ol.l
st-kix_z7in7d1ar2zt-6.start{counter-reset:lst-ctn-kix_z7in7d1ar2zt-6 0}.lst-kix_
5f9palqqt4mm-3>li:before{content:"" counter(lst-ctn-kix_5f9palqqt4mm-3,decimal)
". "}.lst-kix_9tkaqbe3bnu3-0>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-0}.ls
t-kix_oqqzpe3b3nud-1>li:before{content:"" counter(lst-ctn-kix_oqqzpe3b3nud-1,low
er-latin) ". "}.lst-kix_pyiocxf7nngd-5>li{counter-increment:lst-ctn-kix_pyiocxf7
nngd-5}.lst-kix_fpxsljpyl73u-0>li:before{content:"\0025cf "}.lst-kix_m8zky1oy6k
60-7>li:before{content:"" counter(lst-ctn-kix_m8zky1oy6k60-7,lower-latin) ". "}.
lst-kix_32zxnvl59py3-4>li{counter-increment:lst-ctn-kix_32zxnvl59py3-4}.lst-kix_
wzk0mdv2qg9u-8>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-8}.lst-kix_kvgsl0s9
rzo4-0>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-0,decimal) ". "}.ls
t-kix_fr6w5z45nvx0-3>li:before{content:"" counter(lst-ctn-kix_fr6w5z45nvx0-3,dec
imal) ". "}ol.lst-kix_nho7sy6cpfv0-7.start{counter-reset:lst-ctn-kix_nho7sy6cpfv
0-7 0}ol.lst-kix_fr6w5z45nvx0-6.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-6 0
}ol.lst-kix_pza3ybm1wtg3-0.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-0 0}.lst
-kix_fr6w5z45nvx0-1>li{counter-increment:lst-ctn-kix_fr6w5z45nvx0-1}.lst-kix_1gq
f2s78t7o1-2>li{counter-increment:lst-ctn-kix_1gqf2s78t7o1-2}.lst-kix_57tjkabqizo
2-6>li:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-6,decimal) ". "}ol.lst
-kix_9tkaqbe3bnu3-1.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-1 0}.lst-kix_m8
zky1oy6k60-3>li:before{content:"" counter(lst-ctn-kix_m8zky1oy6k60-3,decimal) ".
"}.lst-kix_qz5wp1hdd24k-6>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k
-6,decimal) ". "}ol.lst-kix_m1x0qzeeadaz-7.start{counter-reset:lst-ctn-kix_m1x0q
zeeadaz-7 0}.lst-kix_ggm78fckav5h-4>li{counter-increment:lst-ctn-kix_ggm78fckav5
h-4}ol.lst-kix_qz5wp1hdd24k-7.start{counter-reset:lst-ctn-kix_qz5wp1hdd24k-7 0}o
l.lst-kix_kvgsl0s9rzo4-0{list-style-type:none}.lst-kix_4s9m9sikrtm7-2>li:before{
content:"" counter(lst-ctn-kix_4s9m9sikrtm7-2,lower-roman) ". "}ol.lst-kix_jzpgx
qq6fzzf-4.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-4 0}ol.lst-kix_kvgsl0s9rz
o4-7{list-style-type:none}.lst-kix_i2v077rod1nx-7>li:before{content:"\0025cb "}
ol.lst-kix_kvgsl0s9rzo4-8{list-style-type:none}ol.lst-kix_32zxnvl59py3-2.start{c
ounter-reset:lst-ctn-kix_32zxnvl59py3-2 0}ol.lst-kix_kvgsl0s9rzo4-5{list-style-t
ype:none}ol.lst-kix_kvgsl0s9rzo4-6{list-style-type:none}.lst-kix_4s9m9sikrtm7-5>
li:before{content:"" counter(lst-ctn-kix_4s9m9sikrtm7-5,lower-roman) ". "}.lst-k
ix_pza3ybm1wtg3-5>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3-5}ol.lst-kix_kvg
sl0s9rzo4-3{list-style-type:none}.lst-kix_j51xhhtple7c-5>li:before{content:"" co
unter(lst-ctn-kix_j51xhhtple7c-5,lower-roman) ". "}ol.lst-kix_kvgsl0s9rzo4-4{lis
t-style-type:none}ol.lst-kix_kvgsl0s9rzo4-1{list-style-type:none}ol.lst-kix_kvgs
l0s9rzo4-2{list-style-type:none}.lst-kix_2uog6ch44jpu-8>li:before{content:"" cou
nter(lst-ctn-kix_2uog6ch44jpu-8,lower-roman) ". "}.lst-kix_z7in7d1ar2zt-8>li:bef
ore{content:"" counter(lst-ctn-kix_z7in7d1ar2zt-8,lower-roman) ". "}.lst-kix_wzk
0mdv2qg9u-0>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-0}.lst-kix_juntnht2kzz
a-8>li{counter-increment:lst-ctn-kix_juntnht2kzza-8}.lst-kix_lixznqbqiris-2>li{c
ounter-increment:lst-ctn-kix_lixznqbqiris-2}.lst-kix_j51xhhtple7c-8>li:before{co
ntent:"" counter(lst-ctn-kix_j51xhhtple7c-8,lower-roman) ". "}.lst-kix_1c0w7icor
qz1-6>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-6}ol.lst-kix_jpf3cr7xe1pc-2.
start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-2 0}.lst-kix_7kmxmbi2lsws-7>li{coun
ter-increment:lst-ctn-kix_7kmxmbi2lsws-7}.lst-kix_lgtbofvz5zxd-4>li:before{conte
nt:"" counter(lst-ctn-kix_lgtbofvz5zxd-4,lower-latin) ". "}.lst-kix_z7in7d1ar2zt
-2>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt-2}ol.lst-kix_1gqf2s78t7o1-8.sta
rt{counter-reset:lst-ctn-kix_1gqf2s78t7o1-8 0}.lst-kix_1g0xzctl1vi-0>li{counter-
increment:lst-ctn-kix_1g0xzctl1vi-0}ol.lst-kix_lixznqbqiris-7{list-style-type:no
ne}ol.lst-kix_lixznqbqiris-8{list-style-type:none}ol.lst-kix_lixznqbqiris-5{list
-style-type:none}ol.lst-kix_lixznqbqiris-6{list-style-type:none}.lst-kix_7kmxmbi
2lsws-1>li{counter-increment:lst-ctn-kix_7kmxmbi2lsws-1}ol.lst-kix_lixznqbqiris-
3{list-style-type:none}ol.lst-kix_lixznqbqiris-4{list-style-type:none}.lst-kix_1
g0xzctl1vi-4>li{counter-increment:lst-ctn-kix_1g0xzctl1vi-4}ol.lst-kix_4s9m9sikr
tm7-7.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-7 0}.lst-kix_z7in7d1ar2zt-4>l
i{counter-increment:lst-ctn-kix_z7in7d1ar2zt-4}ol.lst-kix_lixznqbqiris-4.start{c
ounter-reset:lst-ctn-kix_lixznqbqiris-4 0}.lst-kix_pa6lflf2amnu-1>li{counter-inc
rement:lst-ctn-kix_pa6lflf2amnu-1}.lst-kix_5f9palqqt4mm-1>li{counter-increment:l
st-ctn-kix_5f9palqqt4mm-1}ol.lst-kix_hm47sef7muk-0.start{counter-reset:lst-ctn-k
ix_hm47sef7muk-0 0}.lst-kix_9tkaqbe3bnu3-3>li{counter-increment:lst-ctn-kix_9tka
qbe3bnu3-3}.lst-kix_pa6lflf2amnu-4>li{counter-increment:lst-ctn-kix_pa6lflf2amnu
-4}ol.lst-kix_jzpgxqq6fzzf-1.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-1 0}ol
.lst-kix_wzk0mdv2qg9u-3.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-3 0}.lst-ki
x_ffvvlgzbuz30-2>li:before{content:"\0025a0 "}.lst-kix_jxeur1wnlj7y-8>li{counte
r-increment:lst-ctn-kix_jxeur1wnlj7y-8}.lst-kix_vvzditg8sno-2>li:before{content:
"\0025a0 "}ol.lst-kix_vnvg10gwrc8t-4.start{counter-reset:lst-ctn-kix_vnvg10gwrc
8t-4 0}ol.lst-kix_lixznqbqiris-5.start{counter-reset:lst-ctn-kix_lixznqbqiris-5
0}ol.lst-kix_3h1iswqv3l7s-1.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-1 0}.ls
t-kix_1c0w7icorqz1-0>li:before{content:"" counter(lst-ctn-kix_1c0w7icorqz1-0,dec
imal) ". "}ol.lst-kix_sgsi64vug03j-8{list-style-type:none}.lst-kix_60g29afx0lof-
0>li:before{content:"" counter(lst-ctn-kix_60g29afx0lof-0,decimal) ". "}.lst-kix
_wzk0mdv2qg9u-4>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-4}ol.lst-kix_sgsi6
4vug03j-6{list-style-type:none}ol.lst-kix_sgsi64vug03j-7{list-style-type:none}.l
st-kix_t9jkz28ln50j-2>li{counter-increment:lst-ctn-kix_t9jkz28ln50j-2}ol.lst-kix
_sgsi64vug03j-4{list-style-type:none}ol.lst-kix_sgsi64vug03j-5{list-style-type:n
one}.lst-kix_jxeur1wnlj7y-4>li{counter-increment:lst-ctn-kix_jxeur1wnlj7y-4}ol.l
st-kix_sgsi64vug03j-2{list-style-type:none}ol.lst-kix_sgsi64vug03j-3{list-style-
type:none}.lst-kix_wzk0mdv2qg9u-3>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-
3}ol.lst-kix_sgsi64vug03j-0{list-style-type:none}ol.lst-kix_sgsi64vug03j-1{list-
style-type:none}.lst-kix_kf08e4mo0q15-0>li{counter-increment:lst-ctn-kix_kf08e4m
o0q15-0}ol.lst-kix_vnvg10gwrc8t-1{list-style-type:none}ol.lst-kix_vnvg10gwrc8t-0
{list-style-type:none}.lst-kix_32zxnvl59py3-1>li{counter-increment:lst-ctn-kix_3
2zxnvl59py3-1}.lst-kix_2uog6ch44jpu-5>li{counter-increment:lst-ctn-kix_2uog6ch44
jpu-5}.lst-kix_a4uqy1hx9g3-8>li:before{content:"\0025a0 "}ol.lst-kix_60g29afx0l
of-7.start{counter-reset:lst-ctn-kix_60g29afx0lof-7 0}.lst-kix_jzpgxqq6fzzf-3>li
{counter-increment:lst-ctn-kix_jzpgxqq6fzzf-3}.lst-kix_jzpgxqq6fzzf-3>li:before{
content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-3,decimal) ". "}.lst-kix_t9jkz28ln50
j-7>li:before{content:"" counter(lst-ctn-kix_t9jkz28ln50j-7,lower-latin) ". "}.l
st-kix_oqqzpe3b3nud-5>li:before{content:"" counter(lst-ctn-kix_oqqzpe3b3nud-5,lo
wer-roman) ". "}.lst-kix_7kmxmbi2lsws-2>li:before{content:"" counter(lst-ctn-kix
_7kmxmbi2lsws-2,lower-roman) ". "}.lst-kix_v454r7upbzuz-3>li{counter-increment:l
st-ctn-kix_v454r7upbzuz-3}ol.lst-kix_m8zky1oy6k60-3.start{counter-reset:lst-ctn-
kix_m8zky1oy6k60-3 0}.lst-kix_v454r7upbzuz-5>li:before{content:"" counter(lst-ct
n-kix_v454r7upbzuz-5,lower-roman) ". "}.lst-kix_jpf3cr7xe1pc-6>li:before{content
:"" counter(lst-ctn-kix_jpf3cr7xe1pc-6,decimal) ". "}.lst-kix_pyiocxf7nngd-5>li:
before{content:"" counter(lst-ctn-kix_pyiocxf7nngd-5,lower-roman) ". "}ol.lst-ki
x_lixznqbqiris-0{list-style-type:none}ol.lst-kix_lixznqbqiris-1{list-style-type:
none}ol.lst-kix_lixznqbqiris-2{list-style-type:none}ol.lst-kix_wzk0mdv2qg9u-2.st
art{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-2 0}.lst-kix_5f9palqqt4mm-5>li:before
{content:"" counter(lst-ctn-kix_5f9palqqt4mm-5,lower-roman) ". "}ol.lst-kix_9tka
qbe3bnu3-4.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-4 0}ol.lst-kix_57tjkabqi
zo2-0{list-style-type:none}ol.lst-kix_57tjkabqizo2-1{list-style-type:none}ol.lst
-kix_wzk0mdv2qg9u-6.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-6 0}.lst-kix_uq
748w6pjv3r-6>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-6,decimal) ".
"}.lst-kix_opzlp0rjj486-4>li:before{content:"" counter(lst-ctn-kix_opzlp0rjj486
-4,lower-latin) ". "}ol.lst-kix_57tjkabqizo2-4{list-style-type:none}ol.lst-kix_5
7tjkabqizo2-5{list-style-type:none}ol.lst-kix_57tjkabqizo2-2{list-style-type:non
e}ol.lst-kix_57tjkabqizo2-3{list-style-type:none}ol.lst-kix_1c0w7icorqz1-2.start
{counter-reset:lst-ctn-kix_1c0w7icorqz1-2 0}.lst-kix_hvjet9voiiio-7>li{counter-i
ncrement:lst-ctn-kix_hvjet9voiiio-7}.lst-kix_nhaic9xr6pf-0>li{counter-increment:
lst-ctn-kix_nhaic9xr6pf-0}ol.lst-kix_4s9m9sikrtm7-1.start{counter-reset:lst-ctn-
kix_4s9m9sikrtm7-1 0}.lst-kix_p8a3u4ougab9-4>li:before{content:"" counter(lst-ct
n-kix_p8a3u4ougab9-4,lower-latin) ". "}ol.lst-kix_57tjkabqizo2-8{list-style-type
:none}ol.lst-kix_57tjkabqizo2-7{list-style-type:none}ol.lst-kix_57tjkabqizo2-6{l
ist-style-type:none}ol.lst-kix_pa6lflf2amnu-1.start{counter-reset:lst-ctn-kix_pa
6lflf2amnu-1 0}.lst-kix_kc6aimw8pnra-5>li:before{content:"\0025a0 "}ol.lst-kix_
jpf3cr7xe1pc-8.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-8 0}.lst-kix_5f9palq
qt4mm-0>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-0}ol.lst-kix_p8a3u4ougab9-
6.start{counter-reset:lst-ctn-kix_p8a3u4ougab9-6 0}ol.lst-kix_sgsi64vug03j-3.sta
rt{counter-reset:lst-ctn-kix_sgsi64vug03j-3 0}.lst-kix_ggm78fckav5h-4>li:before{
content:"" counter(lst-ctn-kix_ggm78fckav5h-4,lower-latin) ". "}.lst-kix_m8zky1o
y6k60-0>li{counter-increment:lst-ctn-kix_m8zky1oy6k60-0}.lst-kix_v454r7upbzuz-3>
li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-3,decimal) ". "}.lst-kix_q
eukrmzdd856-5>li{counter-increment:lst-ctn-kix_qeukrmzdd856-5}ol.lst-kix_pza3ybm
1wtg3-6.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-6 0}.lst-kix_juntnht2kzza-5
>li:before{content:"" counter(lst-ctn-kix_juntnht2kzza-5,lower-roman) ". "}ol.ls
t-kix_sgsi64vug03j-0.start{counter-reset:lst-ctn-kix_sgsi64vug03j-0 0}.lst-kix_8
uscekru9dbw-0>li{counter-increment:lst-ctn-kix_8uscekru9dbw-0}ol.lst-kix_v454r7u
pbzuz-5.start{counter-reset:lst-ctn-kix_v454r7upbzuz-5 0}.lst-kix_9tkaqbe3bnu3-7
>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-7}ol.lst-kix_jzpgxqq6fzzf-5.start
{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-5 0}.lst-kix_5f9palqqt4mm-1>li:before{co
ntent:"" counter(lst-ctn-kix_5f9palqqt4mm-1,lower-latin) ". "}.lst-kix_ffvvlgzbu
z30-7>li:before{content:"\0025cb "}.lst-kix_pza3ybm1wtg3-3>li:before{content:""
counter(lst-ctn-kix_pza3ybm1wtg3-3,decimal) ". "}ol.lst-kix_5f9palqqt4mm-0.star
t{counter-reset:lst-ctn-kix_5f9palqqt4mm-0 0}.lst-kix_vnvg10gwrc8t-6>li:before{c
ontent:"" counter(lst-ctn-kix_vnvg10gwrc8t-6,decimal) ". "}.lst-kix_a4uqy1hx9g3-
6>li:before{content:"\0025cf "}ol.lst-kix_jzpgxqq6fzzf-1{list-style-type:none}o
l.lst-kix_jzpgxqq6fzzf-0{list-style-type:none}.lst-kix_7kmxmbi2lsws-7>li:before{
content:"" counter(lst-ctn-kix_7kmxmbi2lsws-7,lower-latin) ". "}.lst-kix_32zxnvl
59py3-2>li{counter-increment:lst-ctn-kix_32zxnvl59py3-2}ol.lst-kix_hm47sef7muk-4
{list-style-type:none}.lst-kix_qeukrmzdd856-1>li{counter-increment:lst-ctn-kix_q
eukrmzdd856-1}ol.lst-kix_hm47sef7muk-3{list-style-type:none}.lst-kix_qeukrmzdd85
6-0>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-0,decimal) ". "}ol.lst
-kix_hm47sef7muk-6{list-style-type:none}ol.lst-kix_hm47sef7muk-5{list-style-type
:none}.lst-kix_vvzditg8sno-8>li:before{content:"\0025a0 "}ol.lst-kix_hm47sef7mu
k-8{list-style-type:none}.lst-kix_m1x0qzeeadaz-0>li{counter-increment:lst-ctn-ki
x_m1x0qzeeadaz-0}ol.lst-kix_hm47sef7muk-7{list-style-type:none}ol.lst-kix_32zxnv
l59py3-5.start{counter-reset:lst-ctn-kix_32zxnvl59py3-5 0}.lst-kix_pyiocxf7nngd-
7>li:before{content:"" counter(lst-ctn-kix_pyiocxf7nngd-7,lower-latin) ". "}.lst
-kix_ffvvlgzbuz30-4>li:before{content:"\0025cb "}.lst-kix_1g0xzctl1vi-0>li:befo
re{content:"" counter(lst-ctn-kix_1g0xzctl1vi-0,decimal) ". "}ol.lst-kix_8uscekr
u9dbw-5.start{counter-reset:lst-ctn-kix_8uscekru9dbw-5 0}ol.lst-kix_hm47sef7muk-
0{list-style-type:none}ol.lst-kix_qeukrmzdd856-0.start{counter-reset:lst-ctn-kix
_qeukrmzdd856-0 0}ol.lst-kix_hm47sef7muk-2{list-style-type:none}ol.lst-kix_hm47s
ef7muk-1{list-style-type:none}.lst-kix_8uscekru9dbw-1>li{counter-increment:lst-c
tn-kix_8uscekru9dbw-1}ol.lst-kix_sgsi64vug03j-4.start{counter-reset:lst-ctn-kix_
sgsi64vug03j-4 0}ol.lst-kix_nhaic9xr6pf-3.start{counter-reset:lst-ctn-kix_nhaic9
xr6pf-3 0}ol.lst-kix_qeukrmzdd856-3.start{counter-reset:lst-ctn-kix_qeukrmzdd856
-3 0}.lst-kix_vnvg10gwrc8t-8>li{counter-increment:lst-ctn-kix_vnvg10gwrc8t-8}ul.
lst-kix_iqyc5gy523tq-4{list-style-type:none}ul.lst-kix_iqyc5gy523tq-3{list-style
-type:none}ol.lst-kix_uq748w6pjv3r-4.start{counter-reset:lst-ctn-kix_uq748w6pjv3
r-4 0}ul.lst-kix_iqyc5gy523tq-6{list-style-type:none}.lst-kix_8uscekru9dbw-7>li:
before{content:"" counter(lst-ctn-kix_8uscekru9dbw-7,lower-latin) ". "}.lst-kix_
q1b5wk7cmirb-3>li:before{content:"\0025cf "}ul.lst-kix_iqyc5gy523tq-5{list-styl
e-type:none}ul.lst-kix_iqyc5gy523tq-8{list-style-type:none}.lst-kix_iqyc5gy523tq
-7>li:before{content:"\0025cb "}ul.lst-kix_iqyc5gy523tq-7{list-style-type:none}
.lst-kix_pa6lflf2amnu-5>li:before{content:"" counter(lst-ctn-kix_pa6lflf2amnu-5,
lower-roman) ". "}.lst-kix_57tjkabqizo2-6>li{counter-increment:lst-ctn-kix_57tjk
abqizo2-6}ul.lst-kix_iqyc5gy523tq-1{list-style-type:none}.lst-kix_opzlp0rjj486-0
>li{counter-increment:lst-ctn-kix_opzlp0rjj486-0}ul.lst-kix_iqyc5gy523tq-2{list-
style-type:none}.lst-kix_jzpgxqq6fzzf-6>li{counter-increment:lst-ctn-kix_jzpgxqq
6fzzf-6}ul.lst-kix_iqyc5gy523tq-0{list-style-type:none}.lst-kix_m1x0qzeeadaz-1>l
i:before{content:"" counter(lst-ctn-kix_m1x0qzeeadaz-1,lower-latin) ". "}ol.lst-
kix_8dg0b92yw51r-1.start{counter-reset:lst-ctn-kix_8dg0b92yw51r-1 0}.lst-kix_t9j
kz28ln50j-2>li:before{content:"" counter(lst-ctn-kix_t9jkz28ln50j-2,lower-roman)
". "}.lst-kix_kc6aimw8pnra-4>li:before{content:"\0025cb "}ol.lst-kix_m1x0qzeea
daz-0.start{counter-reset:lst-ctn-kix_m1x0qzeeadaz-0 0}.lst-kix_m8zky1oy6k60-1>l
i{counter-increment:lst-ctn-kix_m8zky1oy6k60-1}.lst-kix_ggm78fckav5h-2>li{counte
r-increment:lst-ctn-kix_ggm78fckav5h-2}ol.lst-kix_z7in7d1ar2zt-8.start{counter-r
eset:lst-ctn-kix_z7in7d1ar2zt-8 0}.lst-kix_1c0w7icorqz1-5>li{counter-increment:l
st-ctn-kix_1c0w7icorqz1-5}ol.lst-kix_kvgsl0s9rzo4-0.start{counter-reset:lst-ctn-
kix_kvgsl0s9rzo4-0 0}ol.lst-kix_opzlp0rjj486-4.start{counter-reset:lst-ctn-kix_o
pzlp0rjj486-4 0}ol.lst-kix_2uog6ch44jpu-0.start{counter-reset:lst-ctn-kix_2uog6c
h44jpu-0 0}.lst-kix_1c0w7icorqz1-1>li:before{content:"" counter(lst-ctn-kix_1c0w
7icorqz1-1,lower-latin) ". "}.lst-kix_m1x0qzeeadaz-6>li{counter-increment:lst-ct
n-kix_m1x0qzeeadaz-6}ol.lst-kix_uq748w6pjv3r-2{list-style-type:none}.lst-kix_wzk
0mdv2qg9u-6>li:before{content:"" counter(lst-ctn-kix_wzk0mdv2qg9u-6,decimal) ".
"}ol.lst-kix_uq748w6pjv3r-3{list-style-type:none}.lst-kix_kf08e4mo0q15-8>li:befo
re{content:"" counter(lst-ctn-kix_kf08e4mo0q15-8,lower-roman) ". "}ol.lst-kix_uq
748w6pjv3r-4{list-style-type:none}ol.lst-kix_uq748w6pjv3r-5{list-style-type:none
}ol.lst-kix_uq748w6pjv3r-6{list-style-type:none}ol.lst-kix_7kmxmbi2lsws-8.start{
counter-reset:lst-ctn-kix_7kmxmbi2lsws-8 0}ol.lst-kix_uq748w6pjv3r-7{list-style-
type:none}ol.lst-kix_uq748w6pjv3r-8{list-style-type:none}.lst-kix_v454r7upbzuz-1
>li{counter-increment:lst-ctn-kix_v454r7upbzuz-1}.lst-kix_lgtbofvz5zxd-4>li{coun
ter-increment:lst-ctn-kix_lgtbofvz5zxd-4}ol.lst-kix_uq748w6pjv3r-0{list-style-ty
pe:none}ol.lst-kix_v454r7upbzuz-4.start{counter-reset:lst-ctn-kix_v454r7upbzuz-4
0}ol.lst-kix_uq748w6pjv3r-1{list-style-type:none}ol.lst-kix_qeukrmzdd856-1.star
t{counter-reset:lst-ctn-kix_qeukrmzdd856-1 0}ol.lst-kix_pyiocxf7nngd-3.start{cou
nter-reset:lst-ctn-kix_pyiocxf7nngd-3 0}ol.lst-kix_jxeur1wnlj7y-3.start{counter-
reset:lst-ctn-kix_jxeur1wnlj7y-3 0}ol.lst-kix_j51xhhtple7c-8.start{counter-reset
:lst-ctn-kix_j51xhhtple7c-8 0}.lst-kix_2uog6ch44jpu-4>li{counter-increment:lst-c
tn-kix_2uog6ch44jpu-4}.lst-kix_v454r7upbzuz-8>li:before{content:"" counter(lst-c
tn-kix_v454r7upbzuz-8,lower-roman) ". "}ul.lst-kix_fpxsljpyl73u-6{list-style-typ
e:none}ul.lst-kix_fpxsljpyl73u-7{list-style-type:none}ul.lst-kix_fpxsljpyl73u-4{
list-style-type:none}ul.lst-kix_fpxsljpyl73u-5{list-style-type:none}ol.lst-kix_3
h1iswqv3l7s-3.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-3 0}ul.lst-kix_fpxslj
pyl73u-2{list-style-type:none}ul.lst-kix_fpxsljpyl73u-3{list-style-type:none}ol.
lst-kix_8dg0b92yw51r-2.start{counter-reset:lst-ctn-kix_8dg0b92yw51r-2 0}ul.lst-k
ix_fpxsljpyl73u-0{list-style-type:none}ul.lst-kix_fpxsljpyl73u-1{list-style-type
:none}.lst-kix_pyiocxf7nngd-1>li:before{content:"" counter(lst-ctn-kix_pyiocxf7n
ngd-1,lower-latin) ". "}ul.lst-kix_fpxsljpyl73u-8{list-style-type:none}.lst-kix_
bnpbicbhbbru-6>li:before{content:"\0025cf "}.lst-kix_bnpbicbhbbru-3>li:before{c
ontent:"\0025cf "}.lst-kix_bnpbicbhbbru-4>li:before{content:"\0025cb "}ol.lst-
kix_jxeur1wnlj7y-1.start{counter-reset:lst-ctn-kix_jxeur1wnlj7y-1 0}.lst-kix_jxe
ur1wnlj7y-3>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-3,decimal) ".
"}ol.lst-kix_pyiocxf7nngd-2.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-2 0}.ls
t-kix_2uog6ch44jpu-1>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-1,low
er-latin) ". "}.lst-kix_z7in7d1ar2zt-1>li:before{content:"" counter(lst-ctn-kix_
z7in7d1ar2zt-1,lower-latin) ". "}ol.lst-kix_fr6w5z45nvx0-8.start{counter-reset:l
st-ctn-kix_fr6w5z45nvx0-8 0}.lst-kix_qeukrmzdd856-1>li:before{content:"" counter
(lst-ctn-kix_qeukrmzdd856-1,lower-latin) ". "}ol.lst-kix_hvjet9voiiio-5.start{co
unter-reset:lst-ctn-kix_hvjet9voiiio-5 0}.lst-kix_a4uqy1hx9g3-5>li:before{conten
t:"\0025a0 "}.lst-kix_57tjkabqizo2-1>li:before{content:"" counter(lst-ctn-kix_5
7tjkabqizo2-1,lower-latin) ". "}ol.lst-kix_uq748w6pjv3r-0.start{counter-reset:ls
t-ctn-kix_uq748w6pjv3r-0 0}.lst-kix_vnvg10gwrc8t-6>li{counter-increment:lst-ctn-
kix_vnvg10gwrc8t-6}ol.lst-kix_1g0xzctl1vi-8.start{counter-reset:lst-ctn-kix_1g0x
zctl1vi-8 0}.lst-kix_9tkaqbe3bnu3-6>li:before{content:"" counter(lst-ctn-kix_9tk
aqbe3bnu3-6,decimal) ". "}ul.lst-kix_t7any4lo9hoq-1{list-style-type:none}ul.lst-
kix_t7any4lo9hoq-0{list-style-type:none}ol.lst-kix_dblgil8t24zy-3.start{counter-
reset:lst-ctn-kix_dblgil8t24zy-3 0}ol.lst-kix_t9jkz28ln50j-8{list-style-type:non
e}ul.lst-kix_t7any4lo9hoq-8{list-style-type:none}ul.lst-kix_t7any4lo9hoq-6{list-
style-type:none}ol.lst-kix_j51xhhtple7c-5.start{counter-reset:lst-ctn-kix_j51xhh
tple7c-5 0}ul.lst-kix_t7any4lo9hoq-7{list-style-type:none}ol.lst-kix_t9jkz28ln50
j-4{list-style-type:none}ul.lst-kix_t7any4lo9hoq-4{list-style-type:none}.lst-kix
_5f9palqqt4mm-7>li:before{content:"" counter(lst-ctn-kix_5f9palqqt4mm-7,lower-la
tin) ". "}ol.lst-kix_t9jkz28ln50j-5{list-style-type:none}ul.lst-kix_t7any4lo9hoq
-5{list-style-type:none}.lst-kix_vnvg10gwrc8t-3>li:before{content:"" counter(lst
-ctn-kix_vnvg10gwrc8t-3,decimal) ". "}ol.lst-kix_t9jkz28ln50j-6{list-style-type:
none}ul.lst-kix_t7any4lo9hoq-2{list-style-type:none}ol.lst-kix_t9jkz28ln50j-7{li
st-style-type:none}ul.lst-kix_t7any4lo9hoq-3{list-style-type:none}ol.lst-kix_jzp
gxqq6fzzf-5{list-style-type:none}ol.lst-kix_jzpgxqq6fzzf-4{list-style-type:none}
ol.lst-kix_jzpgxqq6fzzf-3{list-style-type:none}ol.lst-kix_jzpgxqq6fzzf-2{list-st
yle-type:none}ol.lst-kix_jzpgxqq6fzzf-8{list-style-type:none}ol.lst-kix_jzpgxqq6
fzzf-7{list-style-type:none}ol.lst-kix_jzpgxqq6fzzf-6{list-style-type:none}.lst-
kix_qeukrmzdd856-6>li{counter-increment:lst-ctn-kix_qeukrmzdd856-6}.lst-kix_nhai
c9xr6pf-4>li{counter-increment:lst-ctn-kix_nhaic9xr6pf-4}ol.lst-kix_t9jkz28ln50j
-1{list-style-type:none}ol.lst-kix_t9jkz28ln50j-0{list-style-type:none}ol.lst-ki
x_t9jkz28ln50j-3{list-style-type:none}.lst-kix_lgtbofvz5zxd-2>li:before{content:
"" counter(lst-ctn-kix_lgtbofvz5zxd-2,lower-roman) ". "}ol.lst-kix_t9jkz28ln50j-
2{list-style-type:none}.lst-kix_hvjet9voiiio-2>li{counter-increment:lst-ctn-kix_
hvjet9voiiio-2}.lst-kix_juntnht2kzza-6>li{counter-increment:lst-ctn-kix_juntnht2
kzza-6}.lst-kix_nho7sy6cpfv0-6>li:before{content:"" counter(lst-ctn-kix_nho7sy6c
pfv0-6,decimal) ". "}.lst-kix_m8zky1oy6k60-8>li:before{content:"" counter(lst-ct
n-kix_m8zky1oy6k60-8,lower-roman) ". "}ol.lst-kix_uq748w6pjv3r-6.start{counter-r
eset:lst-ctn-kix_uq748w6pjv3r-6 0}ul.lst-kix_q1b5wk7cmirb-3{list-style-type:none
}ul.lst-kix_q1b5wk7cmirb-2{list-style-type:none}ul.lst-kix_q1b5wk7cmirb-5{list-s
tyle-type:none}ul.lst-kix_q1b5wk7cmirb-4{list-style-type:none}ul.lst-kix_q1b5wk7
cmirb-7{list-style-type:none}ul.lst-kix_q1b5wk7cmirb-6{list-style-type:none}ul.l
st-kix_q1b5wk7cmirb-8{list-style-type:none}.lst-kix_a4uqy1hx9g3-3>li:before{cont
ent:"\0025cf "}ol.lst-kix_hm47sef7muk-3.start{counter-reset:lst-ctn-kix_hm47sef
7muk-3 0}ol.lst-kix_9tkaqbe3bnu3-3.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-
3 0}.lst-kix_nho7sy6cpfv0-2>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv
0-2,lower-roman) ". "}.lst-kix_nhaic9xr6pf-8>li{counter-increment:lst-ctn-kix_nh
aic9xr6pf-8}ol.lst-kix_opzlp0rjj486-5.start{counter-reset:lst-ctn-kix_opzlp0rjj4
86-5 0}ol.lst-kix_opzlp0rjj486-3.start{counter-reset:lst-ctn-kix_opzlp0rjj486-3
0}.lst-kix_pa6lflf2amnu-3>li{counter-increment:lst-ctn-kix_pa6lflf2amnu-3}.lst-k
ix_1c0w7icorqz1-0>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-0}ol.lst-kix_jun
tnht2kzza-8{list-style-type:none}.lst-kix_z7in7d1ar2zt-3>li:before{content:"" co
unter(lst-ctn-kix_z7in7d1ar2zt-3,decimal) ". "}.lst-kix_wzk0mdv2qg9u-0>li:before
{content:"" counter(lst-ctn-kix_wzk0mdv2qg9u-0,decimal) ". "}.lst-kix_m1x0qzeead
az-2>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz-2}ol.lst-kix_fr6w5z45nvx0-4{l
ist-style-type:none}ol.lst-kix_fr6w5z45nvx0-5{list-style-type:none}ol.lst-kix_fr
6w5z45nvx0-6{list-style-type:none}ol.lst-kix_fr6w5z45nvx0-7{list-style-type:none
}ol.lst-kix_fr6w5z45nvx0-8{list-style-type:none}ol.lst-kix_juntnht2kzza-1{list-s
tyle-type:none}ol.lst-kix_juntnht2kzza-0{list-style-type:none}ol.lst-kix_juntnht
2kzza-3{list-style-type:none}ol.lst-kix_juntnht2kzza-2{list-style-type:none}ol.l
st-kix_juntnht2kzza-5{list-style-type:none}ol.lst-kix_juntnht2kzza-4{list-style-
type:none}ol.lst-kix_juntnht2kzza-7{list-style-type:none}ol.lst-kix_juntnht2kzza
-6{list-style-type:none}ol.lst-kix_lgtbofvz5zxd-5.start{counter-reset:lst-ctn-ki
x_lgtbofvz5zxd-5 0}.lst-kix_32zxnvl59py3-5>li{counter-increment:lst-ctn-kix_32zx
nvl59py3-5}ol.lst-kix_fr6w5z45nvx0-1{list-style-type:none}ol.lst-kix_fr6w5z45nvx
0-0{list-style-type:none}ol.lst-kix_fr6w5z45nvx0-3{list-style-type:none}ol.lst-k
ix_fr6w5z45nvx0-2{list-style-type:none}.lst-kix_wzk0mdv2qg9u-5>li:before{content
:"" counter(lst-ctn-kix_wzk0mdv2qg9u-5,lower-roman) ". "}.lst-kix_kf08e4mo0q15-5
>li{counter-increment:lst-ctn-kix_kf08e4mo0q15-5}.lst-kix_8uscekru9dbw-3>li:befo
re{content:"" counter(lst-ctn-kix_8uscekru9dbw-3,decimal) ". "}ol.lst-kix_qeukrm
zdd856-2.start{counter-reset:lst-ctn-kix_qeukrmzdd856-2 0}ol.lst-kix_qz5wp1hdd24
k-4.start{counter-reset:lst-ctn-kix_qz5wp1hdd24k-4 0}ul.lst-kix_q1b5wk7cmirb-0{l
ist-style-type:none}ul.lst-kix_q1b5wk7cmirb-1{list-style-type:none}ol.lst-kix_db
lgil8t24zy-4.start{counter-reset:lst-ctn-kix_dblgil8t24zy-4 0}ol.lst-kix_3h1iswq
v3l7s-2.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-2 0}ol.lst-kix_lixznqbqiris
-8.start{counter-reset:lst-ctn-kix_lixznqbqiris-8 0}ol.lst-kix_m1x0qzeeadaz-2.st
art{counter-reset:lst-ctn-kix_m1x0qzeeadaz-2 0}ol.lst-kix_1c0w7icorqz1-3.start{c
ounter-reset:lst-ctn-kix_1c0w7icorqz1-3 0}.lst-kix_8dg0b92yw51r-1>li{counter-inc
rement:lst-ctn-kix_8dg0b92yw51r-1}.lst-kix_a4uqy1hx9g3-4>li:before{content:"\002
5cb "}ol.lst-kix_pyiocxf7nngd-8.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-8
0}.lst-kix_60g29afx0lof-0>li{counter-increment:lst-ctn-kix_60g29afx0lof-0}.lst-k
ix_uq748w6pjv3r-2>li{counter-increment:lst-ctn-kix_uq748w6pjv3r-2}.lst-kix_jpf3c
r7xe1pc-6>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-6}ol.lst-kix_lgtbofvz5zx
d-2.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-2 0}.lst-kix_jxeur1wnlj7y-0>li:
before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-0,decimal) ". "}.lst-kix_fr6w
5z45nvx0-1>li:before{content:"" counter(lst-ctn-kix_fr6w5z45nvx0-1,lower-latin)
". "}.lst-kix_jpf3cr7xe1pc-8>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1
pc-8,lower-roman) ". "}.lst-kix_jxeur1wnlj7y-2>li:before{content:"" counter(lst-
ctn-kix_jxeur1wnlj7y-2,lower-roman) ". "}.lst-kix_4s9m9sikrtm7-1>li:before{conte
nt:"" counter(lst-ctn-kix_4s9m9sikrtm7-1,lower-latin) ". "}.lst-kix_lgtbofvz5zxd
-8>li:before{content:"" counter(lst-ctn-kix_lgtbofvz5zxd-8,lower-roman) ". "}.ls
t-kix_5f9palqqt4mm-6>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-6}ol.lst-kix_
m1x0qzeeadaz-1{list-style-type:none}ol.lst-kix_m1x0qzeeadaz-0{list-style-type:no
ne}.lst-kix_lixznqbqiris-3>li:before{content:"" counter(lst-ctn-kix_lixznqbqiris
-3,decimal) ". "}ol.lst-kix_m1x0qzeeadaz-5{list-style-type:none}ol.lst-kix_m1x0q
zeeadaz-4{list-style-type:none}.lst-kix_kf08e4mo0q15-8>li{counter-increment:lst-
ctn-kix_kf08e4mo0q15-8}ol.lst-kix_m1x0qzeeadaz-3{list-style-type:none}ol.lst-kix
_jxeur1wnlj7y-6.start{counter-reset:lst-ctn-kix_jxeur1wnlj7y-6 0}.lst-kix_9tkaqb
e3bnu3-1>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-1}ol.lst-kix_m1x0qzeeadaz
-2{list-style-type:none}.lst-kix_hm47sef7muk-2>li:before{content:"" counter(lst-
ctn-kix_hm47sef7muk-2,lower-roman) ". "}.lst-kix_sgsi64vug03j-5>li{counter-incre
ment:lst-ctn-kix_sgsi64vug03j-5}ol.lst-kix_2uog6ch44jpu-4.start{counter-reset:ls
t-ctn-kix_2uog6ch44jpu-4 0}.lst-kix_9tkaqbe3bnu3-3>li:before{content:"" counter(
lst-ctn-kix_9tkaqbe3bnu3-3,decimal) ". "}ol.lst-kix_8dg0b92yw51r-6.start{counter
-reset:lst-ctn-kix_8dg0b92yw51r-6 0}ol.lst-kix_jzpgxqq6fzzf-2.start{counter-rese
t:lst-ctn-kix_jzpgxqq6fzzf-2 0}ol.lst-kix_1gqf2s78t7o1-6.start{counter-reset:lst
-ctn-kix_1gqf2s78t7o1-6 0}.lst-kix_32zxnvl59py3-2>li:before{content:"" counter(l
st-ctn-kix_32zxnvl59py3-2,lower-roman) ". "}.lst-kix_juntnht2kzza-0>li:before{co
ntent:"" counter(lst-ctn-kix_juntnht2kzza-0,decimal) ". "}.lst-kix_jpf3cr7xe1pc-
0>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc-0,decimal) ". "}ol.lst-k
ix_pza3ybm1wtg3-3.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-3 0}.lst-kix_60g2
9afx0lof-6>li:before{content:"" counter(lst-ctn-kix_60g29afx0lof-6,decimal) ". "
}.lst-kix_j51xhhtple7c-0>li{counter-increment:lst-ctn-kix_j51xhhtple7c-0}ol.lst-
kix_m1x0qzeeadaz-6{list-style-type:none}.lst-kix_pa6lflf2amnu-8>li{counter-incre
ment:lst-ctn-kix_pa6lflf2amnu-8}.lst-kix_nho7sy6cpfv0-8>li{counter-increment:lst
-ctn-kix_nho7sy6cpfv0-8}ol.lst-kix_m1x0qzeeadaz-7{list-style-type:none}ol.lst-ki
x_m1x0qzeeadaz-8{list-style-type:none}.lst-kix_nho7sy6cpfv0-2>li{counter-increme
nt:lst-ctn-kix_nho7sy6cpfv0-2}ol.lst-kix_pyiocxf7nngd-4.start{counter-reset:lst-
ctn-kix_pyiocxf7nngd-4 0}.lst-kix_pza3ybm1wtg3-3>li{counter-increment:lst-ctn-ki
x_pza3ybm1wtg3-3}ol.lst-kix_qz5wp1hdd24k-1.start{counter-reset:lst-ctn-kix_qz5wp
1hdd24k-1 0}ol.lst-kix_jxeur1wnlj7y-2.start{counter-reset:lst-ctn-kix_jxeur1wnlj
7y-2 0}.lst-kix_i2v077rod1nx-1>li:before{content:"\0025cb "}.lst-kix_5f9palqqt4
mm-3>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-3}.lst-kix_pa6lflf2amnu-4>li:
before{content:"" counter(lst-ctn-kix_pa6lflf2amnu-4,lower-latin) ". "}.lst-kix_
pyiocxf7nngd-7>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-7}.lst-kix_kvgsl0s9
rzo4-0>li{counter-increment:lst-ctn-kix_kvgsl0s9rzo4-0}.lst-kix_1g0xzctl1vi-7>li
:before{content:"" counter(lst-ctn-kix_1g0xzctl1vi-7,lower-latin) ". "}.lst-kix_
opzlp0rjj486-8>li:before{content:"" counter(lst-ctn-kix_opzlp0rjj486-8,lower-rom
an) ". "}ol.lst-kix_juntnht2kzza-6.start{counter-reset:lst-ctn-kix_juntnht2kzza-
6 0}.lst-kix_uq748w6pjv3r-5>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3
r-5,lower-roman) ". "}ol.lst-kix_hm47sef7muk-6.start{counter-reset:lst-ctn-kix_h
m47sef7muk-6 0}.lst-kix_jxeur1wnlj7y-5>li{counter-increment:lst-ctn-kix_jxeur1wn
lj7y-5}.lst-kix_vvzditg8sno-6>li:before{content:"\0025cf "}.lst-kix_5f9palqqt4m
m-7>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-7}ol.lst-kix_9tkaqbe3bnu3-7.st
art{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-7 0}ol.lst-kix_32zxnvl59py3-3.start{c
ounter-reset:lst-ctn-kix_32zxnvl59py3-3 0}.lst-kix_kc6aimw8pnra-0>li:before{cont
ent:"\0025cf "}.lst-kix_7kmxmbi2lsws-5>li:before{content:"" counter(lst-ctn-kix
_7kmxmbi2lsws-5,lower-roman) ". "}.lst-kix_ggm78fckav5h-7>li{counter-increment:l
st-ctn-kix_ggm78fckav5h-7}ol.lst-kix_lixznqbqiris-0.start{counter-reset:lst-ctn-
kix_lixznqbqiris-0 0}ol.lst-kix_t9jkz28ln50j-5.start{counter-reset:lst-ctn-kix_t
9jkz28ln50j-5 0}.lst-kix_ffvvlgzbuz30-5>li:before{content:"\0025a0 "}.lst-kix_k
vgsl0s9rzo4-2>li{counter-increment:lst-ctn-kix_kvgsl0s9rzo4-2}.lst-kix_jxeur1wnl
j7y-7>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-7,lower-latin) ". "}
ol.lst-kix_7kmxmbi2lsws-1.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws-1 0}.lst-
kix_dblgil8t24zy-1>li{counter-increment:lst-ctn-kix_dblgil8t24zy-1}ol.lst-kix_m8
zky1oy6k60-8{list-style-type:none}ol.lst-kix_m8zky1oy6k60-7{list-style-type:none
}ol.lst-kix_ggm78fckav5h-4.start{counter-reset:lst-ctn-kix_ggm78fckav5h-4 0}ol.l
st-kix_m8zky1oy6k60-6{list-style-type:none}ol.lst-kix_m8zky1oy6k60-5{list-style-
type:none}ol.lst-kix_m8zky1oy6k60-4{list-style-type:none}ol.lst-kix_m8zky1oy6k60
-3{list-style-type:none}.lst-kix_hvjet9voiiio-7>li:before{content:"" counter(lst
-ctn-kix_hvjet9voiiio-7,lower-latin) ". "}ol.lst-kix_m8zky1oy6k60-2{list-style-t
ype:none}ol.lst-kix_m8zky1oy6k60-1{list-style-type:none}ol.lst-kix_m8zky1oy6k60-
0{list-style-type:none}.lst-kix_hm47sef7muk-0>li{counter-increment:lst-ctn-kix_h
m47sef7muk-0}.lst-kix_oqqzpe3b3nud-3>li:before{content:"" counter(lst-ctn-kix_oq
qzpe3b3nud-3,decimal) ". "}.lst-kix_iqyc5gy523tq-6>li:before{content:"\0025cf "
}.lst-kix_qz5wp1hdd24k-0>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-0
,decimal) ". "}.lst-kix_hm47sef7muk-4>li:before{content:"" counter(lst-ctn-kix_h
m47sef7muk-4,lower-latin) ". "}.lst-kix_lixznqbqiris-0>li:before{content:"" coun
ter(lst-ctn-kix_lixznqbqiris-0,decimal) ". "}ol.lst-kix_60g29afx0lof-1.start{cou
nter-reset:lst-ctn-kix_60g29afx0lof-1 0}.lst-kix_sgsi64vug03j-0>li:before{conten
t:"" counter(lst-ctn-kix_sgsi64vug03j-0,decimal) ". "}.lst-kix_q1b5wk7cmirb-5>li
:before{content:"\0025a0 "}.lst-kix_uq748w6pjv3r-1>li{counter-increment:lst-ctn
-kix_uq748w6pjv3r-1}.lst-kix_t9jkz28ln50j-3>li:before{content:"" counter(lst-ctn
-kix_t9jkz28ln50j-3,decimal) ". "}ol.lst-kix_5f9palqqt4mm-8.start{counter-reset:
lst-ctn-kix_5f9palqqt4mm-8 0}ol.lst-kix_v454r7upbzuz-2.start{counter-reset:lst-c
tn-kix_v454r7upbzuz-2 0}.lst-kix_1g0xzctl1vi-3>li{counter-increment:lst-ctn-kix_
1g0xzctl1vi-3}.lst-kix_t7any4lo9hoq-7>li:before{content:"\0025cb "}.lst-kix_qeu
krmzdd856-4>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-4,lower-latin)
". "}ol.lst-kix_3h1iswqv3l7s-6.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-6 0
}.lst-kix_9tkaqbe3bnu3-4>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-4}.lst-ki
x_4s9m9sikrtm7-1>li{counter-increment:lst-ctn-kix_4s9m9sikrtm7-1}ol.lst-kix_nhai
c9xr6pf-1.start{counter-reset:lst-ctn-kix_nhaic9xr6pf-1 0}.lst-kix_t9jkz28ln50j-
0>li{counter-increment:lst-ctn-kix_t9jkz28ln50j-0}.lst-kix_4s9m9sikrtm7-7>li:bef
ore{content:"" counter(lst-ctn-kix_4s9m9sikrtm7-7,lower-latin) ". "}.lst-kix_lix
znqbqiris-2>li:before{content:"" counter(lst-ctn-kix_lixznqbqiris-2,lower-roman)
". "}.lst-kix_p8a3u4ougab9-3>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-3}ul
.lst-kix_ffvvlgzbuz30-2{list-style-type:none}ul.lst-kix_ffvvlgzbuz30-3{list-styl
e-type:none}ul.lst-kix_ffvvlgzbuz30-0{list-style-type:none}ul.lst-kix_ffvvlgzbuz
30-1{list-style-type:none}ul.lst-kix_ffvvlgzbuz30-6{list-style-type:none}.lst-ki
x_ffvvlgzbuz30-1>li:before{content:"\0025cb "}ul.lst-kix_ffvvlgzbuz30-7{list-st
yle-type:none}ul.lst-kix_ffvvlgzbuz30-4{list-style-type:none}ul.lst-kix_ffvvlgzb
uz30-5{list-style-type:none}ul.lst-kix_ffvvlgzbuz30-8{list-style-type:none}.lst-
kix_uq748w6pjv3r-3>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-3,decim
al) ". "}.lst-kix_q1b5wk7cmirb-0>li:before{content:"\0025cf "}.lst-kix_nhaic9xr
6pf-1>li{counter-increment:lst-ctn-kix_nhaic9xr6pf-1}.lst-kix_5f9palqqt4mm-8>li:
before{content:"" counter(lst-ctn-kix_5f9palqqt4mm-8,lower-roman) ". "}.lst-kix_
60g29afx0lof-6>li{counter-increment:lst-ctn-kix_60g29afx0lof-6}.lst-kix_3h1iswqv
3l7s-2>li{counter-increment:lst-ctn-kix_3h1iswqv3l7s-2}.lst-kix_m8zky1oy6k60-3>l
i{counter-increment:lst-ctn-kix_m8zky1oy6k60-3}.lst-kix_iqyc5gy523tq-2>li:before
{content:"\0025a0 "}.lst-kix_fr6w5z45nvx0-3>li{counter-increment:lst-ctn-kix_fr
6w5z45nvx0-3}.lst-kix_4s9m9sikrtm7-2>li{counter-increment:lst-ctn-kix_4s9m9sikrt
m7-2}ol.lst-kix_7kmxmbi2lsws-7.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws-7 0}
.lst-kix_v454r7upbzuz-0>li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-0,
decimal) ". "}.lst-kix_3h1iswqv3l7s-6>li{counter-increment:lst-ctn-kix_3h1iswqv3
l7s-6}ol.lst-kix_pyiocxf7nngd-1.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-1 0
}.lst-kix_sgsi64vug03j-3>li{counter-increment:lst-ctn-kix_sgsi64vug03j-3}.lst-ki
x_hvjet9voiiio-4>li:before{content:"" counter(lst-ctn-kix_hvjet9voiiio-4,lower-l
atin) ". "}.lst-kix_m1x0qzeeadaz-7>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz
-7}.lst-kix_jxeur1wnlj7y-8>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y
-8,lower-roman) ". "}.lst-kix_57tjkabqizo2-4>li{counter-increment:lst-ctn-kix_57
tjkabqizo2-4}ol.lst-kix_lgtbofvz5zxd-6.start{counter-reset:lst-ctn-kix_lgtbofvz5
zxd-6 0}ol.lst-kix_hm47sef7muk-5.start{counter-reset:lst-ctn-kix_hm47sef7muk-5 0
}.lst-kix_qeukrmzdd856-2>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-2
,lower-roman) ". "}.lst-kix_57tjkabqizo2-5>li{counter-increment:lst-ctn-kix_57tj
kabqizo2-5}.lst-kix_ggm78fckav5h-6>li{counter-increment:lst-ctn-kix_ggm78fckav5h
-6}.lst-kix_jpf3cr7xe1pc-2>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc
-2,lower-roman) ". "}.lst-kix_1c0w7icorqz1-2>li:before{content:"" counter(lst-ct
n-kix_1c0w7icorqz1-2,lower-roman) ". "}.lst-kix_hvjet9voiiio-6>li{counter-increm
ent:lst-ctn-kix_hvjet9voiiio-6}ol.lst-kix_pa6lflf2amnu-3.start{counter-reset:lst
-ctn-kix_pa6lflf2amnu-3 0}.lst-kix_1gqf2s78t7o1-3>li{counter-increment:lst-ctn-k
ix_1gqf2s78t7o1-3}ol.lst-kix_pza3ybm1wtg3-8.start{counter-reset:lst-ctn-kix_pza3
ybm1wtg3-8 0}ol.lst-kix_1g0xzctl1vi-7.start{counter-reset:lst-ctn-kix_1g0xzctl1v
i-7 0}.lst-kix_v454r7upbzuz-7>li:before{content:"" counter(lst-ctn-kix_v454r7upb
zuz-7,lower-latin) ". "}.lst-kix_vnvg10gwrc8t-5>li{counter-increment:lst-ctn-kix
_vnvg10gwrc8t-5}ol.lst-kix_kvgsl0s9rzo4-2.start{counter-reset:lst-ctn-kix_kvgsl0
s9rzo4-2 0}ol.lst-kix_pza3ybm1wtg3-1.start{counter-reset:lst-ctn-kix_pza3ybm1wtg
3-1 0}.lst-kix_p8a3u4ougab9-7>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-7}.l
st-kix_5f9palqqt4mm-5>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-5}.lst-kix_8
dg0b92yw51r-0>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-0,decimal) "
. "}.lst-kix_3h1iswqv3l7s-4>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7
s-4,lower-latin) ". "}.lst-kix_fpxsljpyl73u-7>li:before{content:"\0025cb "}.lst
-kix_m8zky1oy6k60-6>li{counter-increment:lst-ctn-kix_m8zky1oy6k60-6}.lst-kix_1g0
xzctl1vi-5>li{counter-increment:lst-ctn-kix_1g0xzctl1vi-5}ol.lst-kix_hvjet9voiii
o-8.start{counter-reset:lst-ctn-kix_hvjet9voiiio-8 0}ol.lst-kix_dblgil8t24zy-5{l
ist-style-type:none}ol.lst-kix_dblgil8t24zy-4{list-style-type:none}ol.lst-kix_db
lgil8t24zy-3{list-style-type:none}ol.lst-kix_dblgil8t24zy-2{list-style-type:none
}ol.lst-kix_dblgil8t24zy-1{list-style-type:none}ol.lst-kix_dblgil8t24zy-0{list-s
tyle-type:none}.lst-kix_pza3ybm1wtg3-1>li{counter-increment:lst-ctn-kix_pza3ybm1
wtg3-1}.lst-kix_qeukrmzdd856-8>li:before{content:"" counter(lst-ctn-kix_qeukrmzd
d856-8,lower-roman) ". "}.lst-kix_wzk0mdv2qg9u-4>li:before{content:"" counter(ls
t-ctn-kix_wzk0mdv2qg9u-4,lower-latin) ". "}.lst-kix_j51xhhtple7c-5>li{counter-in
crement:lst-ctn-kix_j51xhhtple7c-5}.lst-kix_juntnht2kzza-8>li:before{content:""
counter(lst-ctn-kix_juntnht2kzza-8,lower-roman) ". "}.lst-kix_opzlp0rjj486-5>li{
counter-increment:lst-ctn-kix_opzlp0rjj486-5}.lst-kix_kf08e4mo0q15-4>li:before{c
ontent:"" counter(lst-ctn-kix_kf08e4mo0q15-4,lower-latin) ". "}ol.lst-kix_dblgil
8t24zy-8{list-style-type:none}.lst-kix_m8zky1oy6k60-1>li:before{content:"" count
er(lst-ctn-kix_m8zky1oy6k60-1,lower-latin) ". "}ol.lst-kix_dblgil8t24zy-7{list-s
tyle-type:none}ol.lst-kix_dblgil8t24zy-6{list-style-type:none}.lst-kix_ggm78fcka
v5h-1>li{counter-increment:lst-ctn-kix_ggm78fckav5h-1}.lst-kix_ggm78fckav5h-8>li
:before{content:"" counter(lst-ctn-kix_ggm78fckav5h-8,lower-roman) ". "}.lst-kix
_kvgsl0s9rzo4-4>li{counter-increment:lst-ctn-kix_kvgsl0s9rzo4-4}ol.lst-kix_fr6w5
z45nvx0-7.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-7 0}.lst-kix_jpf3cr7xe1pc
-5>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc-5,lower-roman) ". "}.ls
t-kix_jpf3cr7xe1pc-3>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc-3,dec
imal) ". "}.lst-kix_7kmxmbi2lsws-4>li{counter-increment:lst-ctn-kix_7kmxmbi2lsws
-4}ol.lst-kix_7kmxmbi2lsws-3.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws-3 0}.l
st-kix_2uog6ch44jpu-7>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-7,lo
wer-latin) ". "}.lst-kix_4s9m9sikrtm7-6>li:before{content:"" counter(lst-ctn-kix
_4s9m9sikrtm7-6,decimal) ". "}ol.lst-kix_9tkaqbe3bnu3-8.start{counter-reset:lst-
ctn-kix_9tkaqbe3bnu3-8 0}ol.lst-kix_1gqf2s78t7o1-7.start{counter-reset:lst-ctn-k
ix_1gqf2s78t7o1-7 0}ol.lst-kix_hm47sef7muk-1.start{counter-reset:lst-ctn-kix_hm4
7sef7muk-1 0}.lst-kix_fr6w5z45nvx0-8>li{counter-increment:lst-ctn-kix_fr6w5z45nv
x0-8}.lst-kix_kf08e4mo0q15-4>li{counter-increment:lst-ctn-kix_kf08e4mo0q15-4}ol.
lst-kix_pa6lflf2amnu-6.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-6 0}ol.lst-k
ix_oqqzpe3b3nud-7.start{counter-reset:lst-ctn-kix_oqqzpe3b3nud-7 0}ol.lst-kix_1c
0w7icorqz1-0{list-style-type:none}ol.lst-kix_1c0w7icorqz1-1{list-style-type:none
}.lst-kix_57tjkabqizo2-0>li:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-0
,decimal) ". "}ol.lst-kix_1c0w7icorqz1-8{list-style-type:none}.lst-kix_sgsi64vug
03j-4>li{counter-increment:lst-ctn-kix_sgsi64vug03j-4}ol.lst-kix_1c0w7icorqz1-6{
list-style-type:none}ol.lst-kix_1c0w7icorqz1-7{list-style-type:none}.lst-kix_jun
tnht2kzza-0>li{counter-increment:lst-ctn-kix_juntnht2kzza-0}ol.lst-kix_1c0w7icor
qz1-4{list-style-type:none}ol.lst-kix_1c0w7icorqz1-5{list-style-type:none}ol.lst
-kix_1c0w7icorqz1-2{list-style-type:none}ol.lst-kix_1c0w7icorqz1-3{list-style-ty
pe:none}ol.lst-kix_p8a3u4ougab9-3.start{counter-reset:lst-ctn-kix_p8a3u4ougab9-3
0}.lst-kix_9tkaqbe3bnu3-0>li:before{content:"" counter(lst-ctn-kix_9tkaqbe3bnu3
-0,decimal) ". "}ol.lst-kix_ggm78fckav5h-3.start{counter-reset:lst-ctn-kix_ggm78
fckav5h-3 0}.lst-kix_jxeur1wnlj7y-2>li{counter-increment:lst-ctn-kix_jxeur1wnlj7
y-2}.lst-kix_pza3ybm1wtg3-6>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3-6}.lst
-kix_t9jkz28ln50j-8>li{counter-increment:lst-ctn-kix_t9jkz28ln50j-8}.lst-kix_1g0
xzctl1vi-2>li:before{content:"" counter(lst-ctn-kix_1g0xzctl1vi-2,lower-roman) "
. "}ol.lst-kix_8dg0b92yw51r-3.start{counter-reset:lst-ctn-kix_8dg0b92yw51r-3 0}.
lst-kix_ffvvlgzbuz30-0>li:before{content:"\0025cf "}.lst-kix_pza3ybm1wtg3-2>li{
counter-increment:lst-ctn-kix_pza3ybm1wtg3-2}.lst-kix_oqqzpe3b3nud-1>li{counter-
increment:lst-ctn-kix_oqqzpe3b3nud-1}ol.lst-kix_1gqf2s78t7o1-0.start{counter-res
et:lst-ctn-kix_1gqf2s78t7o1-0 0}.lst-kix_60g29afx0lof-2>li:before{content:"" cou
nter(lst-ctn-kix_60g29afx0lof-2,lower-roman) ". "}ol.lst-kix_nho7sy6cpfv0-5.star
t{counter-reset:lst-ctn-kix_nho7sy6cpfv0-5 0}ol.lst-kix_jpf3cr7xe1pc-1.start{cou
nter-reset:lst-ctn-kix_jpf3cr7xe1pc-1 0}.lst-kix_1gqf2s78t7o1-6>li{counter-incre
ment:lst-ctn-kix_1gqf2s78t7o1-6}.lst-kix_60g29afx0lof-3>li{counter-increment:lst
-ctn-kix_60g29afx0lof-3}.lst-kix_nhaic9xr6pf-6>li:before{content:"" counter(lst-
ctn-kix_nhaic9xr6pf-6,decimal) ". "}.lst-kix_q1b5wk7cmirb-2>li:before{content:"\
0025a0 "}.lst-kix_8uscekru9dbw-6>li:before{content:"" counter(lst-ctn-kix_8usce
kru9dbw-6,decimal) ". "}.lst-kix_pza3ybm1wtg3-6>li:before{content:"" counter(lst
-ctn-kix_pza3ybm1wtg3-6,decimal) ". "}.lst-kix_jxeur1wnlj7y-3>li{counter-increme
nt:lst-ctn-kix_jxeur1wnlj7y-3}.lst-kix_wzk0mdv2qg9u-7>li{counter-increment:lst-c
tn-kix_wzk0mdv2qg9u-7}.lst-kix_opzlp0rjj486-1>li:before{content:"" counter(lst-c
tn-kix_opzlp0rjj486-1,lower-latin) ". "}ol.lst-kix_qeukrmzdd856-5.start{counter-
reset:lst-ctn-kix_qeukrmzdd856-5 0}.lst-kix_8uscekru9dbw-6>li{counter-increment:
lst-ctn-kix_8uscekru9dbw-6}.lst-kix_pyiocxf7nngd-0>li{counter-increment:lst-ctn-
kix_pyiocxf7nngd-0}.lst-kix_juntnht2kzza-1>li:before{content:"" counter(lst-ctn-
kix_juntnht2kzza-1,lower-latin) ". "}.lst-kix_5f9palqqt4mm-4>li:before{content:"
" counter(lst-ctn-kix_5f9palqqt4mm-4,lower-latin) ". "}ol.lst-kix_v454r7upbzuz-7
.start{counter-reset:lst-ctn-kix_v454r7upbzuz-7 0}.lst-kix_kc6aimw8pnra-2>li:bef
ore{content:"\0025a0 "}.lst-kix_nho7sy6cpfv0-7>li:before{content:"" counter(lst
-ctn-kix_nho7sy6cpfv0-7,lower-latin) ". "}ol.lst-kix_m8zky1oy6k60-0.start{counte
r-reset:lst-ctn-kix_m8zky1oy6k60-0 0}.lst-kix_1gqf2s78t7o1-4>li:before{content:"
" counter(lst-ctn-kix_1gqf2s78t7o1-4,lower-latin) ". "}.lst-kix_qeukrmzdd856-3>l
i:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-3,decimal) ". "}ol.lst-kix_
7kmxmbi2lsws-5.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws-5 0}.lst-kix_m1x0qze
eadaz-4>li:before{content:"" counter(lst-ctn-kix_m1x0qzeeadaz-4,lower-latin) ".
"}ol.lst-kix_kf08e4mo0q15-3.start{counter-reset:lst-ctn-kix_kf08e4mo0q15-3 0}.ls
t-kix_z7in7d1ar2zt-6>li:before{content:"" counter(lst-ctn-kix_z7in7d1ar2zt-6,dec
imal) ". "}ol.lst-kix_hvjet9voiiio-3.start{counter-reset:lst-ctn-kix_hvjet9voiii
o-3 0}.lst-kix_vnvg10gwrc8t-4>li:before{content:"" counter(lst-ctn-kix_vnvg10gwr
c8t-4,lower-latin) ". "}.lst-kix_juntnht2kzza-7>li:before{content:"" counter(lst
-ctn-kix_juntnht2kzza-7,lower-latin) ". "}.lst-kix_ggm78fckav5h-7>li:before{cont
ent:"" counter(lst-ctn-kix_ggm78fckav5h-7,lower-latin) ". "}.lst-kix_t7any4lo9ho
q-2>li:before{content:"\0025a0 "}.lst-kix_kvgsl0s9rzo4-8>li{counter-increment:l
st-ctn-kix_kvgsl0s9rzo4-8}ol.lst-kix_oqqzpe3b3nud-1.start{counter-reset:lst-ctn-
kix_oqqzpe3b3nud-1 0}.lst-kix_nho7sy6cpfv0-1>li{counter-increment:lst-ctn-kix_nh
o7sy6cpfv0-1}.lst-kix_1g0xzctl1vi-2>li{counter-increment:lst-ctn-kix_1g0xzctl1vi
-2}.lst-kix_j51xhhtple7c-3>li:before{content:"" counter(lst-ctn-kix_j51xhhtple7c
-3,decimal) ". "}.lst-kix_8dg0b92yw51r-5>li{counter-increment:lst-ctn-kix_8dg0b9
2yw51r-5}.lst-kix_vvzditg8sno-7>li:before{content:"\0025cb "}.lst-kix_8dg0b92yw
51r-0>li{counter-increment:lst-ctn-kix_8dg0b92yw51r-0}.lst-kix_3h1iswqv3l7s-2>li
:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-2,lower-roman) ". "}.lst-kix
_pa6lflf2amnu-5>li{counter-increment:lst-ctn-kix_pa6lflf2amnu-5}.lst-kix_hm47sef
7muk-1>li:before{content:"" counter(lst-ctn-kix_hm47sef7muk-1,lower-latin) ". "}
.lst-kix_32zxnvl59py3-1>li:before{content:"" counter(lst-ctn-kix_32zxnvl59py3-1,
lower-latin) ". "}.lst-kix_oqqzpe3b3nud-7>li:before{content:"" counter(lst-ctn-k
ix_oqqzpe3b3nud-7,lower-latin) ". "}.lst-kix_uq748w6pjv3r-3>li{counter-increment
:lst-ctn-kix_uq748w6pjv3r-3}ol.lst-kix_qz5wp1hdd24k-3.start{counter-reset:lst-ct
n-kix_qz5wp1hdd24k-3 0}ol.lst-kix_3h1iswqv3l7s-0.start{counter-reset:lst-ctn-kix
_3h1iswqv3l7s-0 0}.lst-kix_ffvvlgzbuz30-8>li:before{content:"\0025a0 "}.lst-kix
_lixznqbqiris-8>li{counter-increment:lst-ctn-kix_lixznqbqiris-8}ol.lst-kix_t9jkz
28ln50j-4.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-4 0}.lst-kix_nhaic9xr6pf-
0>li:before{content:"" counter(lst-ctn-kix_nhaic9xr6pf-0,decimal) ". "}.lst-kix_
uq748w6pjv3r-6>li{counter-increment:lst-ctn-kix_uq748w6pjv3r-6}.lst-kix_3h1iswqv
3l7s-0>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-0,decimal) ". "}ol.
lst-kix_vnvg10gwrc8t-6.start{counter-reset:lst-ctn-kix_vnvg10gwrc8t-6 0}.lst-kix
_hvjet9voiiio-6>li:before{content:"" counter(lst-ctn-kix_hvjet9voiiio-6,decimal)
". "}ul.lst-kix_a4uqy1hx9g3-4{list-style-type:none}ul.lst-kix_a4uqy1hx9g3-3{lis
t-style-type:none}ul.lst-kix_a4uqy1hx9g3-6{list-style-type:none}ul.lst-kix_a4uqy
1hx9g3-5{list-style-type:none}ul.lst-kix_a4uqy1hx9g3-8{list-style-type:none}.lst
-kix_hvjet9voiiio-0>li{counter-increment:lst-ctn-kix_hvjet9voiiio-0}ul.lst-kix_a
4uqy1hx9g3-7{list-style-type:none}.lst-kix_v454r7upbzuz-4>li:before{content:"" c
ounter(lst-ctn-kix_v454r7upbzuz-4,lower-latin) ". "}ol.lst-kix_z7in7d1ar2zt-4.st
art{counter-reset:lst-ctn-kix_z7in7d1ar2zt-4 0}ul.lst-kix_a4uqy1hx9g3-0{list-sty
le-type:none}.lst-kix_57tjkabqizo2-8>li{counter-increment:lst-ctn-kix_57tjkabqiz
o2-8}ol.lst-kix_opzlp0rjj486-8.start{counter-reset:lst-ctn-kix_opzlp0rjj486-8 0}
.lst-kix_ggm78fckav5h-8>li{counter-increment:lst-ctn-kix_ggm78fckav5h-8}ul.lst-k
ix_a4uqy1hx9g3-2{list-style-type:none}ul.lst-kix_a4uqy1hx9g3-1{list-style-type:n
one}.lst-kix_i2v077rod1nx-2>li:before{content:"\0025a0 "}ol.lst-kix_fr6w5z45nvx
0-3.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-3 0}ol.lst-kix_2uog6ch44jpu-7.s
tart{counter-reset:lst-ctn-kix_2uog6ch44jpu-7 0}ol.lst-kix_j51xhhtple7c-2.start{
counter-reset:lst-ctn-kix_j51xhhtple7c-2 0}.lst-kix_qz5wp1hdd24k-4>li{counter-in
crement:lst-ctn-kix_qz5wp1hdd24k-4}.lst-kix_nhaic9xr6pf-5>li:before{content:"" c
ounter(lst-ctn-kix_nhaic9xr6pf-5,lower-roman) ". "}ol.lst-kix_ggm78fckav5h-1.sta
rt{counter-reset:lst-ctn-kix_ggm78fckav5h-1 0}ol.lst-kix_juntnht2kzza-5.start{co
unter-reset:lst-ctn-kix_juntnht2kzza-5 0}.lst-kix_wzk0mdv2qg9u-1>li:before{conte
nt:"" counter(lst-ctn-kix_wzk0mdv2qg9u-1,lower-latin) ". "}.lst-kix_8uscekru9dbw
-7>li{counter-increment:lst-ctn-kix_8uscekru9dbw-7}ol.lst-kix_vnvg10gwrc8t-3.sta
rt{counter-reset:lst-ctn-kix_vnvg10gwrc8t-3 0}.lst-kix_fr6w5z45nvx0-0>li:before{
content:"" counter(lst-ctn-kix_fr6w5z45nvx0-0,decimal) ". "}ol.lst-kix_2uog6ch44
jpu-8{list-style-type:none}ol.lst-kix_2uog6ch44jpu-2{list-style-type:none}ol.lst
-kix_2uog6ch44jpu-3{list-style-type:none}ol.lst-kix_2uog6ch44jpu-0{list-style-ty
pe:none}ol.lst-kix_2uog6ch44jpu-1{list-style-type:none}ol.lst-kix_2uog6ch44jpu-6
{list-style-type:none}ol.lst-kix_2uog6ch44jpu-7{list-style-type:none}ol.lst-kix_
2uog6ch44jpu-4{list-style-type:none}.lst-kix_hvjet9voiiio-1>li{counter-increment
:lst-ctn-kix_hvjet9voiiio-1}ol.lst-kix_2uog6ch44jpu-5{list-style-type:none}ol.ls
t-kix_1c0w7icorqz1-5.start{counter-reset:lst-ctn-kix_1c0w7icorqz1-5 0}.lst-kix_f
r6w5z45nvx0-6>li{counter-increment:lst-ctn-kix_fr6w5z45nvx0-6}ol.lst-kix_pa6lflf
2amnu-7.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-7 0}.lst-kix_8uscekru9dbw-5
>li{counter-increment:lst-ctn-kix_8uscekru9dbw-5}ol.lst-kix_pyiocxf7nngd-7.start
{counter-reset:lst-ctn-kix_pyiocxf7nngd-7 0}.lst-kix_fr6w5z45nvx0-7>li:before{co
ntent:"" counter(lst-ctn-kix_fr6w5z45nvx0-7,lower-latin) ". "}.lst-kix_60g29afx0
lof-7>li{counter-increment:lst-ctn-kix_60g29afx0lof-7}ol.lst-kix_nho7sy6cpfv0-8.
start{counter-reset:lst-ctn-kix_nho7sy6cpfv0-8 0}ol.lst-kix_v454r7upbzuz-4{list-
style-type:none}.lst-kix_bnpbicbhbbru-5>li:before{content:"\0025a0 "}ol.lst-kix
_v454r7upbzuz-3{list-style-type:none}ol.lst-kix_v454r7upbzuz-2{list-style-type:n
one}ol.lst-kix_v454r7upbzuz-1{list-style-type:none}.lst-kix_vvzditg8sno-1>li:bef
ore{content:"\0025cb "}ol.lst-kix_v454r7upbzuz-0{list-style-type:none}.lst-kix_
j51xhhtple7c-1>li:before{content:"" counter(lst-ctn-kix_j51xhhtple7c-1,lower-lat
in) ". "}.lst-kix_qz5wp1hdd24k-0>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-0
}ol.lst-kix_v454r7upbzuz-8{list-style-type:none}ol.lst-kix_v454r7upbzuz-7{list-s
tyle-type:none}ol.lst-kix_v454r7upbzuz-6{list-style-type:none}ol.lst-kix_v454r7u
pbzuz-5{list-style-type:none}.lst-kix_sgsi64vug03j-5>li:before{content:"" counte
r(lst-ctn-kix_sgsi64vug03j-5,lower-roman) ". "}.lst-kix_kf08e4mo0q15-2>li:before
{content:"" counter(lst-ctn-kix_kf08e4mo0q15-2,lower-roman) ". "}.lst-kix_kvgsl0
s9rzo4-6>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-6,decimal) ". "}.
lst-kix_1c0w7icorqz1-1>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-1}.lst-kix_
sgsi64vug03j-7>li{counter-increment:lst-ctn-kix_sgsi64vug03j-7}ol.lst-kix_jxeur1
wnlj7y-8.start{counter-reset:lst-ctn-kix_jxeur1wnlj7y-8 0}.lst-kix_57tjkabqizo2-
3>li{counter-increment:lst-ctn-kix_57tjkabqizo2-3}.lst-kix_pza3ybm1wtg3-2>li:bef
ore{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-2,lower-roman) ". "}.lst-kix_pyi
ocxf7nngd-6>li:before{content:"" counter(lst-ctn-kix_pyiocxf7nngd-6,decimal) ".
"}.lst-kix_jpf3cr7xe1pc-1>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-1}.lst-k
ix_jzpgxqq6fzzf-0>li{counter-increment:lst-ctn-kix_jzpgxqq6fzzf-0}ol.lst-kix_pa6
lflf2amnu-5.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-5 0}.lst-kix_jxeur1wnlj
7y-1>li{counter-increment:lst-ctn-kix_jxeur1wnlj7y-1}.lst-kix_pza3ybm1wtg3-4>li:
before{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-4,lower-latin) ". "}ol.lst-ki
x_57tjkabqizo2-1.start{counter-reset:lst-ctn-kix_57tjkabqizo2-1 0}.lst-kix_jzpgx
qq6fzzf-2>li:before{content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-2,lower-roman) "
. "}.lst-kix_vnvg10gwrc8t-2>li:before{content:"" counter(lst-ctn-kix_vnvg10gwrc8
t-2,lower-roman) ". "}.lst-kix_lixznqbqiris-3>li{counter-increment:lst-ctn-kix_l
ixznqbqiris-3}.lst-kix_sgsi64vug03j-6>li:before{content:"" counter(lst-ctn-kix_s
gsi64vug03j-6,decimal) ". "}ol.lst-kix_60g29afx0lof-3.start{counter-reset:lst-ct
n-kix_60g29afx0lof-3 0}ol.lst-kix_57tjkabqizo2-0.start{counter-reset:lst-ctn-kix
_57tjkabqizo2-0 0}ol.lst-kix_oqqzpe3b3nud-8.start{counter-reset:lst-ctn-kix_oqqz
pe3b3nud-8 0}.lst-kix_fpxsljpyl73u-1>li:before{content:"\0025cb "}.lst-kix_5f9p
alqqt4mm-2>li:before{content:"" counter(lst-ctn-kix_5f9palqqt4mm-2,lower-roman)
". "}ol.lst-kix_v454r7upbzuz-3.start{counter-reset:lst-ctn-kix_v454r7upbzuz-3 0}
ol.lst-kix_wzk0mdv2qg9u-1.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-1 0}ol.ls
t-kix_1c0w7icorqz1-1.start{counter-reset:lst-ctn-kix_1c0w7icorqz1-1 0}.lst-kix_k
f08e4mo0q15-5>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-5,lower-roma
n) ". "}.lst-kix_7kmxmbi2lsws-1>li:before{content:"" counter(lst-ctn-kix_7kmxmbi
2lsws-1,lower-latin) ". "}.lst-kix_kvgsl0s9rzo4-7>li{counter-increment:lst-ctn-k
ix_kvgsl0s9rzo4-7}ul.lst-kix_bnpbicbhbbru-8{list-style-type:none}.lst-kix_oqqzpe
3b3nud-2>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-2}.lst-kix_1c0w7icorqz1-3
>li:before{content:"" counter(lst-ctn-kix_1c0w7icorqz1-3,decimal) ". "}ul.lst-ki
x_bnpbicbhbbru-0{list-style-type:none}ol.lst-kix_nhaic9xr6pf-5.start{counter-res
et:lst-ctn-kix_nhaic9xr6pf-5 0}ul.lst-kix_bnpbicbhbbru-1{list-style-type:none}ol
.lst-kix_pa6lflf2amnu-0.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-0 0}ul.lst-
kix_bnpbicbhbbru-2{list-style-type:none}ul.lst-kix_bnpbicbhbbru-3{list-style-typ
e:none}ul.lst-kix_bnpbicbhbbru-4{list-style-type:none}ul.lst-kix_bnpbicbhbbru-5{
list-style-type:none}.lst-kix_p8a3u4ougab9-2>li:before{content:"" counter(lst-ct
n-kix_p8a3u4ougab9-2,lower-roman) ". "}ul.lst-kix_bnpbicbhbbru-6{list-style-type
:none}ul.lst-kix_bnpbicbhbbru-7{list-style-type:none}.lst-kix_v454r7upbzuz-0>li{
counter-increment:lst-ctn-kix_v454r7upbzuz-0}ol.lst-kix_juntnht2kzza-7.start{cou
nter-reset:lst-ctn-kix_juntnht2kzza-7 0}.lst-kix_j51xhhtple7c-4>li{counter-incre
ment:lst-ctn-kix_j51xhhtple7c-4}.lst-kix_lgtbofvz5zxd-6>li{counter-increment:lst
-ctn-kix_lgtbofvz5zxd-6}.lst-kix_j51xhhtple7c-6>li:before{content:"" counter(lst
-ctn-kix_j51xhhtple7c-6,decimal) ". "}ol.lst-kix_ggm78fckav5h-0.start{counter-re
set:lst-ctn-kix_ggm78fckav5h-0 0}.lst-kix_pa6lflf2amnu-2>li{counter-increment:ls
t-ctn-kix_pa6lflf2amnu-2}.lst-kix_1g0xzctl1vi-7>li{counter-increment:lst-ctn-kix
_1g0xzctl1vi-7}ol.lst-kix_dblgil8t24zy-6.start{counter-reset:lst-ctn-kix_dblgil8
t24zy-6 0}.lst-kix_lixznqbqiris-1>li{counter-increment:lst-ctn-kix_lixznqbqiris-
1}ol.lst-kix_wzk0mdv2qg9u-0.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-0 0}.ls
t-kix_hm47sef7muk-3>li{counter-increment:lst-ctn-kix_hm47sef7muk-3}.lst-kix_t7an
y4lo9hoq-0>li:before{content:"\0025cf "}.lst-kix_kf08e4mo0q15-1>li{counter-incr
ement:lst-ctn-kix_kf08e4mo0q15-1}.lst-kix_hm47sef7muk-5>li:before{content:"" cou
nter(lst-ctn-kix_hm47sef7muk-5,lower-roman) ". "}.lst-kix_7kmxmbi2lsws-0>li{coun
ter-increment:lst-ctn-kix_7kmxmbi2lsws-0}.lst-kix_7kmxmbi2lsws-5>li{counter-incr
ement:lst-ctn-kix_7kmxmbi2lsws-5}.lst-kix_vnvg10gwrc8t-8>li:before{content:"" co
unter(lst-ctn-kix_vnvg10gwrc8t-8,lower-roman) ". "}.lst-kix_hvjet9voiiio-0>li:be
fore{content:"" counter(lst-ctn-kix_hvjet9voiiio-0,decimal) ". "}ol.lst-kix_p8a3
u4ougab9-0.start{counter-reset:lst-ctn-kix_p8a3u4ougab9-0 0}.lst-kix_2uog6ch44jp
u-2>li{counter-increment:lst-ctn-kix_2uog6ch44jpu-2}ol.lst-kix_uq748w6pjv3r-1.st
art{counter-reset:lst-ctn-kix_uq748w6pjv3r-1 0}.lst-kix_fpxsljpyl73u-8>li:before
{content:"\0025a0 "}ol.lst-kix_oqqzpe3b3nud-0.start{counter-reset:lst-ctn-kix_o
qqzpe3b3nud-0 0}.lst-kix_v454r7upbzuz-8>li{counter-increment:lst-ctn-kix_v454r7u
pbzuz-8}.lst-kix_8dg0b92yw51r-2>li:before{content:"" counter(lst-ctn-kix_8dg0b92
yw51r-2,lower-roman) ". "}.lst-kix_fr6w5z45nvx0-5>li{counter-increment:lst-ctn-k
ix_fr6w5z45nvx0-5}.lst-kix_2uog6ch44jpu-3>li{counter-increment:lst-ctn-kix_2uog6
ch44jpu-3}ol.lst-kix_jxeur1wnlj7y-5.start{counter-reset:lst-ctn-kix_jxeur1wnlj7y
-5 0}ol.lst-kix_8uscekru9dbw-0.start{counter-reset:lst-ctn-kix_8uscekru9dbw-0 0}
.lst-kix_4s9m9sikrtm7-8>li{counter-increment:lst-ctn-kix_4s9m9sikrtm7-8}.lst-kix
_9tkaqbe3bnu3-5>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-5}.lst-kix_60g29af
x0lof-4>li:before{content:"" counter(lst-ctn-kix_60g29afx0lof-4,lower-latin) ".
"}ol.lst-kix_fr6w5z45nvx0-0.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-0 0}ol.
lst-kix_1gqf2s78t7o1-3.start{counter-reset:lst-ctn-kix_1gqf2s78t7o1-3 0}.lst-kix
_z7in7d1ar2zt-2>li:before{content:"" counter(lst-ctn-kix_z7in7d1ar2zt-2,lower-ro
man) ". "}.lst-kix_hm47sef7muk-1>li{counter-increment:lst-ctn-kix_hm47sef7muk-1}
.lst-kix_p8a3u4ougab9-5>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-5}.lst-kix
_iqyc5gy523tq-8>li:before{content:"\0025a0 "}ol.lst-kix_wzk0mdv2qg9u-7.start{co
unter-reset:lst-ctn-kix_wzk0mdv2qg9u-7 0}.lst-kix_fr6w5z45nvx0-2>li:before{conte
nt:"" counter(lst-ctn-kix_fr6w5z45nvx0-2,lower-roman) ". "}ol.lst-kix_1g0xzctl1v
i-5.start{counter-reset:lst-ctn-kix_1g0xzctl1vi-5 0}ol.lst-kix_57tjkabqizo2-2.st
art{counter-reset:lst-ctn-kix_57tjkabqizo2-2 0}ul.lst-kix_i2v077rod1nx-8{list-st
yle-type:none}.lst-kix_nho7sy6cpfv0-0>li:before{content:"" counter(lst-ctn-kix_n
ho7sy6cpfv0-0,decimal) ". "}ul.lst-kix_i2v077rod1nx-6{list-style-type:none}ul.ls
t-kix_i2v077rod1nx-7{list-style-type:none}.lst-kix_z7in7d1ar2zt-3>li{counter-inc
rement:lst-ctn-kix_z7in7d1ar2zt-3}ul.lst-kix_i2v077rod1nx-4{list-style-type:none
}ul.lst-kix_i2v077rod1nx-5{list-style-type:none}ol.lst-kix_hm47sef7muk-7.start{c
ounter-reset:lst-ctn-kix_hm47sef7muk-7 0}ul.lst-kix_i2v077rod1nx-2{list-style-ty
pe:none}ul.lst-kix_i2v077rod1nx-3{list-style-type:none}ol.lst-kix_t9jkz28ln50j-8
.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-8 0}ul.lst-kix_i2v077rod1nx-0{list
-style-type:none}ul.lst-kix_i2v077rod1nx-1{list-style-type:none}.lst-kix_uq748w6
pjv3r-1>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-1,lower-latin) ".
"}.lst-kix_4s9m9sikrtm7-0>li:before{content:"" counter(lst-ctn-kix_4s9m9sikrtm7-
0,decimal) ". "}ol.lst-kix_1g0xzctl1vi-2.start{counter-reset:lst-ctn-kix_1g0xzct
l1vi-2 0}ol.lst-kix_jpf3cr7xe1pc-7.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-
7 0}.lst-kix_kvgsl0s9rzo4-3>li{counter-increment:lst-ctn-kix_kvgsl0s9rzo4-3}.lst
-kix_32zxnvl59py3-7>li:before{content:"" counter(lst-ctn-kix_32zxnvl59py3-7,lowe
r-latin) ". "}ol.lst-kix_qz5wp1hdd24k-5.start{counter-reset:lst-ctn-kix_qz5wp1hd
d24k-5 0}ol.lst-kix_dblgil8t24zy-2.start{counter-reset:lst-ctn-kix_dblgil8t24zy-
2 0}ol.lst-kix_kf08e4mo0q15-6{list-style-type:none}ol.lst-kix_kf08e4mo0q15-7{lis
t-style-type:none}ol.lst-kix_kf08e4mo0q15-8{list-style-type:none}ol.lst-kix_kf08
e4mo0q15-2{list-style-type:none}ol.lst-kix_kf08e4mo0q15-3{list-style-type:none}o
l.lst-kix_kf08e4mo0q15-4{list-style-type:none}ol.lst-kix_8uscekru9dbw-2.start{co
unter-reset:lst-ctn-kix_8uscekru9dbw-2 0}ol.lst-kix_kf08e4mo0q15-5{list-style-ty
pe:none}.lst-kix_m8zky1oy6k60-8>li{counter-increment:lst-ctn-kix_m8zky1oy6k60-8}
.lst-kix_q1b5wk7cmirb-4>li:before{content:"\0025cb "}.lst-kix_i2v077rod1nx-8>li
:before{content:"\0025a0 "}ol.lst-kix_kf08e4mo0q15-0{list-style-type:none}ol.ls
t-kix_kf08e4mo0q15-1{list-style-type:none}.lst-kix_ggm78fckav5h-3>li{counter-inc
rement:lst-ctn-kix_ggm78fckav5h-3}.lst-kix_jzpgxqq6fzzf-6>li:before{content:"" c
ounter(lst-ctn-kix_jzpgxqq6fzzf-6,decimal) ". "}.lst-kix_1gqf2s78t7o1-8>li{count
er-increment:lst-ctn-kix_1gqf2s78t7o1-8}.lst-kix_j51xhhtple7c-1>li{counter-incre
ment:lst-ctn-kix_j51xhhtple7c-1}ol.lst-kix_juntnht2kzza-0.start{counter-reset:ls
t-ctn-kix_juntnht2kzza-0 0}.lst-kix_dblgil8t24zy-1>li:before{content:"" counter(
lst-ctn-kix_dblgil8t24zy-1,lower-latin) ". "}ol.lst-kix_qz5wp1hdd24k-0{list-styl
e-type:none}ol.lst-kix_sgsi64vug03j-7.start{counter-reset:lst-ctn-kix_sgsi64vug0
3j-7 0}ol.lst-kix_qz5wp1hdd24k-1{list-style-type:none}ol.lst-kix_qz5wp1hdd24k-2{
list-style-type:none}ol.lst-kix_jzpgxqq6fzzf-8.start{counter-reset:lst-ctn-kix_j
zpgxqq6fzzf-8 0}ol.lst-kix_qz5wp1hdd24k-3{list-style-type:none}ol.lst-kix_qz5wp1
hdd24k-4{list-style-type:none}ol.lst-kix_qz5wp1hdd24k-5{list-style-type:none}.ls
t-kix_nho7sy6cpfv0-5>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-5,low
er-roman) ". "}ol.lst-kix_qz5wp1hdd24k-6{list-style-type:none}ol.lst-kix_qz5wp1h
dd24k-7{list-style-type:none}.lst-kix_pa6lflf2amnu-8>li:before{content:"" counte
r(lst-ctn-kix_pa6lflf2amnu-8,lower-roman) ". "}ol.lst-kix_qz5wp1hdd24k-8{list-st
yle-type:none}.lst-kix_kvgsl0s9rzo4-2>li:before{content:"" counter(lst-ctn-kix_k
vgsl0s9rzo4-2,lower-roman) ". "}ol.lst-kix_1c0w7icorqz1-4.start{counter-reset:ls
t-ctn-kix_1c0w7icorqz1-4 0}.lst-kix_vnvg10gwrc8t-1>li{counter-increment:lst-ctn-
kix_vnvg10gwrc8t-1}.lst-kix_opzlp0rjj486-7>li{counter-increment:lst-ctn-kix_opzl
p0rjj486-7}.lst-kix_8dg0b92yw51r-4>li{counter-increment:lst-ctn-kix_8dg0b92yw51r
-4}.lst-kix_8uscekru9dbw-2>li{counter-increment:lst-ctn-kix_8uscekru9dbw-2}ol.ls
t-kix_3h1iswqv3l7s-3{list-style-type:none}ol.lst-kix_pza3ybm1wtg3-4.start{counte
r-reset:lst-ctn-kix_pza3ybm1wtg3-4 0}ol.lst-kix_3h1iswqv3l7s-2{list-style-type:n
one}ol.lst-kix_oqqzpe3b3nud-8{list-style-type:none}ol.lst-kix_3h1iswqv3l7s-1{lis
t-style-type:none}ol.lst-kix_oqqzpe3b3nud-7{list-style-type:none}ol.lst-kix_3h1i
swqv3l7s-0{list-style-type:none}ol.lst-kix_oqqzpe3b3nud-6{list-style-type:none}.
lst-kix_sgsi64vug03j-7>li:before{content:"" counter(lst-ctn-kix_sgsi64vug03j-7,l
ower-latin) ". "}ol.lst-kix_oqqzpe3b3nud-1{list-style-type:none}.lst-kix_3h1iswq
v3l7s-7>li{counter-increment:lst-ctn-kix_3h1iswqv3l7s-7}ol.lst-kix_oqqzpe3b3nud-
0{list-style-type:none}ol.lst-kix_3h1iswqv3l7s-8{list-style-type:none}ol.lst-kix
_jpf3cr7xe1pc-0.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-0 0}ol.lst-kix_3h1i
swqv3l7s-7{list-style-type:none}ol.lst-kix_oqqzpe3b3nud-5{list-style-type:none}o
l.lst-kix_3h1iswqv3l7s-6{list-style-type:none}ol.lst-kix_9tkaqbe3bnu3-0.start{co
unter-reset:lst-ctn-kix_9tkaqbe3bnu3-0 0}ol.lst-kix_oqqzpe3b3nud-4{list-style-ty
pe:none}.lst-kix_3h1iswqv3l7s-7>li:before{content:"" counter(lst-ctn-kix_3h1iswq
v3l7s-7,lower-latin) ". "}ol.lst-kix_3h1iswqv3l7s-5{list-style-type:none}ol.lst-
kix_oqqzpe3b3nud-3{list-style-type:none}ol.lst-kix_3h1iswqv3l7s-4{list-style-typ
e:none}ol.lst-kix_oqqzpe3b3nud-2{list-style-type:none}.lst-kix_ffvvlgzbuz30-6>li
:before{content:"\0025cf "}.lst-kix_pza3ybm1wtg3-0>li:before{content:"" counter
(lst-ctn-kix_pza3ybm1wtg3-0,decimal) ". "}ol.lst-kix_qeukrmzdd856-6.start{counte
r-reset:lst-ctn-kix_qeukrmzdd856-6 0}.lst-kix_jzpgxqq6fzzf-8>li:before{content:"
" counter(lst-ctn-kix_jzpgxqq6fzzf-8,lower-roman) ". "}.lst-kix_kf08e4mo0q15-2>l
i{counter-increment:lst-ctn-kix_kf08e4mo0q15-2}.lst-kix_kvgsl0s9rzo4-5>li:before
{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-5,lower-roman) ". "}ol.lst-kix_57tj
kabqizo2-8.start{counter-reset:lst-ctn-kix_57tjkabqizo2-8 0}.lst-kix_jzpgxqq6fzz
f-4>li{counter-increment:lst-ctn-kix_jzpgxqq6fzzf-4}.lst-kix_3h1iswqv3l7s-3>li:b
efore{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-3,decimal) ". "}.lst-kix_lixzn
qbqiris-6>li{counter-increment:lst-ctn-kix_lixznqbqiris-6}.lst-kix_8uscekru9dbw-
1>li:before{content:"" counter(lst-ctn-kix_8uscekru9dbw-1,lower-latin) ". "}ol.l
st-kix_kvgsl0s9rzo4-6.start{counter-reset:lst-ctn-kix_kvgsl0s9rzo4-6 0}ol.lst-ki
x_m1x0qzeeadaz-5.start{counter-reset:lst-ctn-kix_m1x0qzeeadaz-5 0}ol.lst-kix_fr6
w5z45nvx0-5.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-5 0}ol.lst-kix_jpf3cr7x
e1pc-6.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-6 0}ol.lst-kix_wzk0mdv2qg9u-
4.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-4 0}.lst-kix_2uog6ch44jpu-6>li{co
unter-increment:lst-ctn-kix_2uog6ch44jpu-6}.lst-kix_8dg0b92yw51r-7>li:before{con
tent:"" counter(lst-ctn-kix_8dg0b92yw51r-7,lower-latin) ". "}.lst-kix_p8a3u4ouga
b9-4>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-4}.lst-kix_sgsi64vug03j-0>li{
counter-increment:lst-ctn-kix_sgsi64vug03j-0}.lst-kix_m1x0qzeeadaz-2>li:before{c
ontent:"" counter(lst-ctn-kix_m1x0qzeeadaz-2,lower-roman) ". "}.lst-kix_p8a3u4ou
gab9-0>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-0}.lst-kix_jzpgxqq6fzzf-1>l
i:before{content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-1,lower-latin) ". "}.lst-ki
x_4s9m9sikrtm7-3>li:before{content:"" counter(lst-ctn-kix_4s9m9sikrtm7-3,decimal
) ". "}.lst-kix_z7in7d1ar2zt-7>li:before{content:"" counter(lst-ctn-kix_z7in7d1a
r2zt-7,lower-latin) ". "}ol.lst-kix_2uog6ch44jpu-6.start{counter-reset:lst-ctn-k
ix_2uog6ch44jpu-6 0}.lst-kix_sgsi64vug03j-1>li:before{content:"" counter(lst-ctn
-kix_sgsi64vug03j-1,lower-latin) ". "}ol.lst-kix_qz5wp1hdd24k-0.start{counter-re
set:lst-ctn-kix_qz5wp1hdd24k-0 0}.lst-kix_lgtbofvz5zxd-1>li{counter-increment:ls
t-ctn-kix_lgtbofvz5zxd-1}.lst-kix_sgsi64vug03j-4>li:before{content:"" counter(ls
t-ctn-kix_sgsi64vug03j-4,lower-latin) ". "}.lst-kix_dblgil8t24zy-2>li:before{con
tent:"" counter(lst-ctn-kix_dblgil8t24zy-2,lower-roman) ". "}ol.lst-kix_hvjet9vo
iiio-1.start{counter-reset:lst-ctn-kix_hvjet9voiiio-1 0}.lst-kix_qz5wp1hdd24k-7>
li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-7,lower-latin) ". "}ol.lst
-kix_m8zky1oy6k60-1.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-1 0}.lst-kix_p8
a3u4ougab9-0>li:before{content:"" counter(lst-ctn-kix_p8a3u4ougab9-0,decimal) ".
"}.lst-kix_1c0w7icorqz1-4>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-4}ol.ls
t-kix_v454r7upbzuz-1.start{counter-reset:lst-ctn-kix_v454r7upbzuz-1 0}.lst-kix_j
pf3cr7xe1pc-2>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-2}.lst-kix_2uog6ch44
jpu-2>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-2,lower-roman) ". "}
.lst-kix_3h1iswqv3l7s-8>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-8,
lower-roman) ". "}.lst-kix_pa6lflf2amnu-6>li:before{content:"" counter(lst-ctn-k
ix_pa6lflf2amnu-6,decimal) ". "}.lst-kix_32zxnvl59py3-0>li:before{content:"" cou
nter(lst-ctn-kix_32zxnvl59py3-0,decimal) ". "}.lst-kix_qeukrmzdd856-4>li{counter
-increment:lst-ctn-kix_qeukrmzdd856-4}.lst-kix_q1b5wk7cmirb-8>li:before{content:
"\0025a0 "}.lst-kix_m8zky1oy6k60-7>li{counter-increment:lst-ctn-kix_m8zky1oy6k6
0-7}.lst-kix_kf08e4mo0q15-6>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q1
5-6,decimal) ". "}ol.lst-kix_hvjet9voiiio-7.start{counter-reset:lst-ctn-kix_hvje
t9voiiio-7 0}.lst-kix_vnvg10gwrc8t-2>li{counter-increment:lst-ctn-kix_vnvg10gwrc
8t-2}.lst-kix_kf08e4mo0q15-3>li{counter-increment:lst-ctn-kix_kf08e4mo0q15-3}.ls
t-kix_1gqf2s78t7o1-7>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-7,low
er-latin) ". "}.lst-kix_z7in7d1ar2zt-4>li:before{content:"" counter(lst-ctn-kix_
z7in7d1ar2zt-4,lower-latin) ". "}ol.lst-kix_t9jkz28ln50j-1.start{counter-reset:l
st-ctn-kix_t9jkz28ln50j-1 0}.lst-kix_7kmxmbi2lsws-8>li:before{content:"" counter
(lst-ctn-kix_7kmxmbi2lsws-8,lower-roman) ". "}ol.lst-kix_m1x0qzeeadaz-3.start{co
unter-reset:lst-ctn-kix_m1x0qzeeadaz-3 0}.lst-kix_pa6lflf2amnu-3>li:before{conte
nt:"" counter(lst-ctn-kix_pa6lflf2amnu-3,decimal) ". "}.lst-kix_dblgil8t24zy-7>l
i:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-7,lower-latin) ". "}.lst-ki
x_dblgil8t24zy-8>li{counter-increment:lst-ctn-kix_dblgil8t24zy-8}ol.lst-kix_sgsi
64vug03j-5.start{counter-reset:lst-ctn-kix_sgsi64vug03j-5 0}.lst-kix_m1x0qzeeada
z-7>li:before{content:"" counter(lst-ctn-kix_m1x0qzeeadaz-7,lower-latin) ". "}.l
st-kix_2uog6ch44jpu-8>li{counter-increment:lst-ctn-kix_2uog6ch44jpu-8}.lst-kix_p
yiocxf7nngd-8>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-8}.lst-kix_4s9m9sikr
tm7-3>li{counter-increment:lst-ctn-kix_4s9m9sikrtm7-3}.lst-kix_vnvg10gwrc8t-7>li
:before{content:"" counter(lst-ctn-kix_vnvg10gwrc8t-7,lower-latin) ". "}.lst-kix
_pyiocxf7nngd-3>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-3}.lst-kix_8dg0b92
yw51r-7>li{counter-increment:lst-ctn-kix_8dg0b92yw51r-7}.lst-kix_4s9m9sikrtm7-0>
li{counter-increment:lst-ctn-kix_4s9m9sikrtm7-0}ol.lst-kix_kf08e4mo0q15-2.start{
counter-reset:lst-ctn-kix_kf08e4mo0q15-2 0}.lst-kix_t9jkz28ln50j-6>li{counter-in
crement:lst-ctn-kix_t9jkz28ln50j-6}.lst-kix_uq748w6pjv3r-8>li{counter-increment:
lst-ctn-kix_uq748w6pjv3r-8}.lst-kix_m1x0qzeeadaz-8>li:before{content:"" counter(
lst-ctn-kix_m1x0qzeeadaz-8,lower-roman) ". "}.lst-kix_pa6lflf2amnu-2>li:before{c
ontent:"" counter(lst-ctn-kix_pa6lflf2amnu-2,lower-roman) ". "}ol.lst-kix_p8a3u4
ougab9-2.start{counter-reset:lst-ctn-kix_p8a3u4ougab9-2 0}.lst-kix_pza3ybm1wtg3-
0>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3-0}.lst-kix_qz5wp1hdd24k-8>li{cou
nter-increment:lst-ctn-kix_qz5wp1hdd24k-8}.lst-kix_hvjet9voiiio-8>li{counter-inc
rement:lst-ctn-kix_hvjet9voiiio-8}.lst-kix_9tkaqbe3bnu3-2>li{counter-increment:l
st-ctn-kix_9tkaqbe3bnu3-2}.lst-kix_qz5wp1hdd24k-8>li:before{content:"" counter(l
st-ctn-kix_qz5wp1hdd24k-8,lower-roman) ". "}.lst-kix_p8a3u4ougab9-5>li:before{co
ntent:"" counter(lst-ctn-kix_p8a3u4ougab9-5,lower-roman) ". "}.lst-kix_hvjet9voi
iio-3>li{counter-increment:lst-ctn-kix_hvjet9voiiio-3}ol.lst-kix_pyiocxf7nngd-6.
start{counter-reset:lst-ctn-kix_pyiocxf7nngd-6 0}.lst-kix_uq748w6pjv3r-0>li:befo
re{content:"" counter(lst-ctn-kix_uq748w6pjv3r-0,decimal) ". "}.lst-kix_8dg0b92y
w51r-6>li{counter-increment:lst-ctn-kix_8dg0b92yw51r-6}.lst-kix_m1x0qzeeadaz-8>l
i{counter-increment:lst-ctn-kix_m1x0qzeeadaz-8}ol.lst-kix_32zxnvl59py3-6.start{c
ounter-reset:lst-ctn-kix_32zxnvl59py3-6 0}ol.lst-kix_m8zky1oy6k60-2.start{counte
r-reset:lst-ctn-kix_m8zky1oy6k60-2 0}ol.lst-kix_jzpgxqq6fzzf-7.start{counter-res
et:lst-ctn-kix_jzpgxqq6fzzf-7 0}ol.lst-kix_8uscekru9dbw-0{list-style-type:none}o
l.lst-kix_9tkaqbe3bnu3-2.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-2 0}.lst-k
ix_t7any4lo9hoq-4>li:before{content:"\0025cb "}.lst-kix_nhaic9xr6pf-4>li:before
{content:"" counter(lst-ctn-kix_nhaic9xr6pf-4,lower-latin) ". "}ul.lst-kix_kc6ai
mw8pnra-3{list-style-type:none}ul.lst-kix_kc6aimw8pnra-2{list-style-type:none}ul
.lst-kix_kc6aimw8pnra-1{list-style-type:none}ul.lst-kix_kc6aimw8pnra-0{list-styl
e-type:none}.lst-kix_8uscekru9dbw-2>li:before{content:"" counter(lst-ctn-kix_8us
cekru9dbw-2,lower-roman) ". "}.lst-kix_7kmxmbi2lsws-3>li:before{content:"" count
er(lst-ctn-kix_7kmxmbi2lsws-3,decimal) ". "}ol.lst-kix_4s9m9sikrtm7-5.start{coun
ter-reset:lst-ctn-kix_4s9m9sikrtm7-5 0}ol.lst-kix_8uscekru9dbw-8{list-style-type
:none}ol.lst-kix_8uscekru9dbw-7{list-style-type:none}ol.lst-kix_8uscekru9dbw-6{l
ist-style-type:none}.lst-kix_vvzditg8sno-3>li:before{content:"\0025cf "}ul.lst-
kix_kc6aimw8pnra-8{list-style-type:none}ol.lst-kix_8uscekru9dbw-5{list-style-typ
e:none}ul.lst-kix_kc6aimw8pnra-7{list-style-type:none}ol.lst-kix_8uscekru9dbw-4{
list-style-type:none}ul.lst-kix_kc6aimw8pnra-6{list-style-type:none}ol.lst-kix_8
uscekru9dbw-3{list-style-type:none}ul.lst-kix_kc6aimw8pnra-5{list-style-type:non
e}ol.lst-kix_8uscekru9dbw-2{list-style-type:none}ul.lst-kix_kc6aimw8pnra-4{list-
style-type:none}ol.lst-kix_8uscekru9dbw-1{list-style-type:none}.lst-kix_bnpbicbh
bbru-1>li:before{content:"\0025cb "}ol.lst-kix_7kmxmbi2lsws-6.start{counter-res
et:lst-ctn-kix_7kmxmbi2lsws-6 0}ol.lst-kix_1c0w7icorqz1-7.start{counter-reset:ls
t-ctn-kix_1c0w7icorqz1-7 0}ol.lst-kix_m1x0qzeeadaz-4.start{counter-reset:lst-ctn
-kix_m1x0qzeeadaz-4 0}.lst-kix_1gqf2s78t7o1-3>li:before{content:"" counter(lst-c
tn-kix_1gqf2s78t7o1-3,decimal) ". "}ol.lst-kix_hm47sef7muk-8.start{counter-reset
:lst-ctn-kix_hm47sef7muk-8 0}.lst-kix_1c0w7icorqz1-7>li{counter-increment:lst-ct
n-kix_1c0w7icorqz1-7}ol.lst-kix_vnvg10gwrc8t-1.start{counter-reset:lst-ctn-kix_v
nvg10gwrc8t-1 0}.lst-kix_lgtbofvz5zxd-2>li{counter-increment:lst-ctn-kix_lgtbofv
z5zxd-2}.lst-kix_p8a3u4ougab9-3>li:before{content:"" counter(lst-ctn-kix_p8a3u4o
ugab9-3,decimal) ". "}.lst-kix_1c0w7icorqz1-5>li:before{content:"" counter(lst-c
tn-kix_1c0w7icorqz1-5,lower-roman) ". "}.lst-kix_jzpgxqq6fzzf-7>li{counter-incre
ment:lst-ctn-kix_jzpgxqq6fzzf-7}.lst-kix_8dg0b92yw51r-2>li{counter-increment:lst
-ctn-kix_8dg0b92yw51r-2}.lst-kix_oqqzpe3b3nud-8>li:before{content:"" counter(lst
-ctn-kix_oqqzpe3b3nud-8,lower-roman) ". "}.lst-kix_9tkaqbe3bnu3-1>li:before{cont
ent:"" counter(lst-ctn-kix_9tkaqbe3bnu3-1,lower-latin) ". "}.lst-kix_pyiocxf7nng
d-1>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-1}.lst-kix_kf08e4mo0q15-1>li:b
efore{content:"" counter(lst-ctn-kix_kf08e4mo0q15-1,lower-latin) ". "}.lst-kix_8
dg0b92yw51r-5>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-5,lower-roma
n) ". "}.lst-kix_1c0w7icorqz1-7>li:before{content:"" counter(lst-ctn-kix_1c0w7ic
orqz1-7,lower-latin) ". "}.lst-kix_fpxsljpyl73u-2>li:before{content:"\0025a0 "}
.lst-kix_m1x0qzeeadaz-3>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz-3}.lst-kix
_a4uqy1hx9g3-1>li:before{content:"\0025cb "}ol.lst-kix_ggm78fckav5h-2.start{cou
nter-reset:lst-ctn-kix_ggm78fckav5h-2 0}ol.lst-kix_8dg0b92yw51r-5.start{counter-
reset:lst-ctn-kix_8dg0b92yw51r-5 0}ol.lst-kix_2uog6ch44jpu-2.start{counter-reset
:lst-ctn-kix_2uog6ch44jpu-2 0}.lst-kix_ggm78fckav5h-6>li:before{content:"" count
er(lst-ctn-kix_ggm78fckav5h-6,decimal) ". "}.lst-kix_a4uqy1hx9g3-7>li:before{con
tent:"\0025cb "}.lst-kix_57tjkabqizo2-7>li{counter-increment:lst-ctn-kix_57tjka
bqizo2-7}ol.lst-kix_lgtbofvz5zxd-1{list-style-type:none}ol.lst-kix_lgtbofvz5zxd-
0{list-style-type:none}ol.lst-kix_z7in7d1ar2zt-2.start{counter-reset:lst-ctn-kix
_z7in7d1ar2zt-2 0}.lst-kix_qz5wp1hdd24k-3>li:before{content:"" counter(lst-ctn-k
ix_qz5wp1hdd24k-3,decimal) ". "}.lst-kix_1c0w7icorqz1-4>li:before{content:"" cou
nter(lst-ctn-kix_1c0w7icorqz1-4,lower-latin) ". "}.lst-kix_pyiocxf7nngd-2>li:bef
ore{content:"" counter(lst-ctn-kix_pyiocxf7nngd-2,lower-roman) ". "}.lst-kix_lix
znqbqiris-6>li:before{content:"" counter(lst-ctn-kix_lixznqbqiris-6,decimal) ".
"}ol.lst-kix_1gqf2s78t7o1-1.start{counter-reset:lst-ctn-kix_1gqf2s78t7o1-1 0}ol.
lst-kix_lgtbofvz5zxd-8{list-style-type:none}ol.lst-kix_lgtbofvz5zxd-6{list-style
-type:none}ol.lst-kix_lgtbofvz5zxd-7{list-style-type:none}ol.lst-kix_lgtbofvz5zx
d-4{list-style-type:none}ol.lst-kix_lgtbofvz5zxd-5{list-style-type:none}ol.lst-k
ix_uq748w6pjv3r-8.start{counter-reset:lst-ctn-kix_uq748w6pjv3r-8 0}ol.lst-kix_lg
tbofvz5zxd-2{list-style-type:none}ol.lst-kix_lgtbofvz5zxd-3{list-style-type:none
}.lst-kix_32zxnvl59py3-6>li{counter-increment:lst-ctn-kix_32zxnvl59py3-6}.lst-ki
x_dblgil8t24zy-3>li{counter-increment:lst-ctn-kix_dblgil8t24zy-3}.lst-kix_sgsi64
vug03j-8>li:before{content:"" counter(lst-ctn-kix_sgsi64vug03j-8,lower-roman) ".
"}.lst-kix_m8zky1oy6k60-4>li:before{content:"" counter(lst-ctn-kix_m8zky1oy6k60
-4,lower-latin) ". "}.lst-kix_opzlp0rjj486-1>li{counter-increment:lst-ctn-kix_op
zlp0rjj486-1}ol.lst-kix_lgtbofvz5zxd-4.start{counter-reset:lst-ctn-kix_lgtbofvz5
zxd-4 0}.lst-kix_z7in7d1ar2zt-0>li:before{content:"" counter(lst-ctn-kix_z7in7d1
ar2zt-0,decimal) ". "}.lst-kix_lgtbofvz5zxd-7>li:before{content:"" counter(lst-c
tn-kix_lgtbofvz5zxd-7,lower-latin) ". "}.lst-kix_t9jkz28ln50j-1>li{counter-incre
ment:lst-ctn-kix_t9jkz28ln50j-1}ol.lst-kix_m8zky1oy6k60-4.start{counter-reset:ls
t-ctn-kix_m8zky1oy6k60-4 0}ol.lst-kix_z7in7d1ar2zt-1.start{counter-reset:lst-ctn
-kix_z7in7d1ar2zt-1 0}ol.lst-kix_pa6lflf2amnu-2.start{counter-reset:lst-ctn-kix_
pa6lflf2amnu-2 0}.lst-kix_pyiocxf7nngd-4>li:before{content:"" counter(lst-ctn-ki
x_pyiocxf7nngd-4,lower-latin) ". "}ol.lst-kix_7kmxmbi2lsws-0.start{counter-reset
:lst-ctn-kix_7kmxmbi2lsws-0 0}.lst-kix_nho7sy6cpfv0-1>li:before{content:"" count
er(lst-ctn-kix_nho7sy6cpfv0-1,lower-latin) ". "}.lst-kix_v454r7upbzuz-6>li:befor
e{content:"" counter(lst-ctn-kix_v454r7upbzuz-6,decimal) ". "}.lst-kix_kvgsl0s9r
zo4-3>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-3,decimal) ". "}.lst
-kix_nho7sy6cpfv0-4>li{counter-increment:lst-ctn-kix_nho7sy6cpfv0-4}.lst-kix_7km
xmbi2lsws-3>li{counter-increment:lst-ctn-kix_7kmxmbi2lsws-3}.lst-kix_qz5wp1hdd24
k-6>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-6}.lst-kix_jxeur1wnlj7y-7>li{c
ounter-increment:lst-ctn-kix_jxeur1wnlj7y-7}ol.lst-kix_hvjet9voiiio-6.start{coun
ter-reset:lst-ctn-kix_hvjet9voiiio-6 0}ol.lst-kix_lixznqbqiris-7.start{counter-r
eset:lst-ctn-kix_lixznqbqiris-7 0}.lst-kix_pyiocxf7nngd-3>li:before{content:"" c
ounter(lst-ctn-kix_pyiocxf7nngd-3,decimal) ". "}.lst-kix_pza3ybm1wtg3-4>li{count
er-increment:lst-ctn-kix_pza3ybm1wtg3-4}ol.lst-kix_57tjkabqizo2-7.start{counter-
reset:lst-ctn-kix_57tjkabqizo2-7 0}ol.lst-kix_32zxnvl59py3-4.start{counter-reset
:lst-ctn-kix_32zxnvl59py3-4 0}ol.lst-kix_hvjet9voiiio-2.start{counter-reset:lst-
ctn-kix_hvjet9voiiio-2 0}.lst-kix_3h1iswqv3l7s-8>li{counter-increment:lst-ctn-ki
x_3h1iswqv3l7s-8}.lst-kix_m1x0qzeeadaz-5>li:before{content:"" counter(lst-ctn-ki
x_m1x0qzeeadaz-5,lower-roman) ". "}ol.lst-kix_dblgil8t24zy-0.start{counter-reset
:lst-ctn-kix_dblgil8t24zy-0 0}.lst-kix_nhaic9xr6pf-2>li:before{content:"" counte
r(lst-ctn-kix_nhaic9xr6pf-2,lower-roman) ". "}.lst-kix_qeukrmzdd856-6>li:before{
content:"" counter(lst-ctn-kix_qeukrmzdd856-6,decimal) ". "}.lst-kix_hm47sef7muk
-8>li{counter-increment:lst-ctn-kix_hm47sef7muk-8}ol.lst-kix_kf08e4mo0q15-8.star
t{counter-reset:lst-ctn-kix_kf08e4mo0q15-8 0}ol.lst-kix_jzpgxqq6fzzf-6.start{cou
nter-reset:lst-ctn-kix_jzpgxqq6fzzf-6 0}ol.lst-kix_wzk0mdv2qg9u-4{list-style-typ
e:none}ol.lst-kix_wzk0mdv2qg9u-5{list-style-type:none}ol.lst-kix_wzk0mdv2qg9u-2{
list-style-type:none}ol.lst-kix_wzk0mdv2qg9u-3{list-style-type:none}ol.lst-kix_w
zk0mdv2qg9u-8{list-style-type:none}ol.lst-kix_wzk0mdv2qg9u-6{list-style-type:non
e}ol.lst-kix_wzk0mdv2qg9u-7{list-style-type:none}ol.lst-kix_wzk0mdv2qg9u-0{list-
style-type:none}ol.lst-kix_4s9m9sikrtm7-8.start{counter-reset:lst-ctn-kix_4s9m9s
ikrtm7-8 0}ol.lst-kix_wzk0mdv2qg9u-1{list-style-type:none}.lst-kix_jxeur1wnlj7y-
6>li{counter-increment:lst-ctn-kix_jxeur1wnlj7y-6}ol.lst-kix_qz5wp1hdd24k-2.star
t{counter-reset:lst-ctn-kix_qz5wp1hdd24k-2 0}.lst-kix_2uog6ch44jpu-1>li{counter-
increment:lst-ctn-kix_2uog6ch44jpu-1}.lst-kix_lixznqbqiris-4>li:before{content:"
" counter(lst-ctn-kix_lixznqbqiris-4,lower-latin) ". "}.lst-kix_jzpgxqq6fzzf-5>l
i{counter-increment:lst-ctn-kix_jzpgxqq6fzzf-5}.lst-kix_ggm78fckav5h-2>li:before
{content:"" counter(lst-ctn-kix_ggm78fckav5h-2,lower-roman) ". "}.lst-kix_juntnh
t2kzza-1>li{counter-increment:lst-ctn-kix_juntnht2kzza-1}ol.lst-kix_fr6w5z45nvx0
-2.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-2 0}.lst-kix_1gqf2s78t7o1-7>li{c
ounter-increment:lst-ctn-kix_1gqf2s78t7o1-7}.lst-kix_t9jkz28ln50j-8>li:before{co
ntent:"" counter(lst-ctn-kix_t9jkz28ln50j-8,lower-roman) ". "}.lst-kix_qz5wp1hdd
24k-7>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-7}.lst-kix_jxeur1wnlj7y-4>li
:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-4,lower-latin) ". "}.lst-kix
_qeukrmzdd856-7>li{counter-increment:lst-ctn-kix_qeukrmzdd856-7}.lst-kix_kc6aimw
8pnra-3>li:before{content:"\0025cf "}ol.lst-kix_t9jkz28ln50j-0.start{counter-re
set:lst-ctn-kix_t9jkz28ln50j-0 0}.lst-kix_t9jkz28ln50j-5>li{counter-increment:ls
t-ctn-kix_t9jkz28ln50j-5}.lst-kix_lgtbofvz5zxd-1>li:before{content:"" counter(ls
t-ctn-kix_lgtbofvz5zxd-1,lower-latin) ". "}.lst-kix_oqqzpe3b3nud-7>li{counter-in
crement:lst-ctn-kix_oqqzpe3b3nud-7}.lst-kix_uq748w6pjv3r-4>li:before{content:""
counter(lst-ctn-kix_uq748w6pjv3r-4,lower-latin) ". "}.lst-kix_3h1iswqv3l7s-5>li:
before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-5,lower-roman) ". "}ol.lst-ki
x_nho7sy6cpfv0-1.start{counter-reset:lst-ctn-kix_nho7sy6cpfv0-1 0}.lst-kix_kf08e
4mo0q15-7>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-7,lower-latin) "
. "}.lst-kix_oqqzpe3b3nud-6>li:before{content:"" counter(lst-ctn-kix_oqqzpe3b3nu
d-6,decimal) ". "}ol.lst-kix_1g0xzctl1vi-6.start{counter-reset:lst-ctn-kix_1g0xz
ctl1vi-6 0}.lst-kix_v454r7upbzuz-4>li{counter-increment:lst-ctn-kix_v454r7upbzuz
-4}ol.lst-kix_z7in7d1ar2zt-0.start{counter-reset:lst-ctn-kix_z7in7d1ar2zt-0 0}ol
.lst-kix_7kmxmbi2lsws-6{list-style-type:none}ol.lst-kix_7kmxmbi2lsws-5{list-styl
e-type:none}ol.lst-kix_7kmxmbi2lsws-4.start{counter-reset:lst-ctn-kix_7kmxmbi2ls
ws-4 0}ol.lst-kix_7kmxmbi2lsws-4{list-style-type:none}.lst-kix_bnpbicbhbbru-8>li
:before{content:"\0025a0 "}ol.lst-kix_7kmxmbi2lsws-3{list-style-type:none}ol.ls
t-kix_7kmxmbi2lsws-2{list-style-type:none}ol.lst-kix_7kmxmbi2lsws-1{list-style-t
ype:none}ol.lst-kix_7kmxmbi2lsws-0{list-style-type:none}.lst-kix_pa6lflf2amnu-6>
li{counter-increment:lst-ctn-kix_pa6lflf2amnu-6}.lst-kix_4s9m9sikrtm7-7>li{count
er-increment:lst-ctn-kix_4s9m9sikrtm7-7}ol.lst-kix_dblgil8t24zy-8.start{counter-
reset:lst-ctn-kix_dblgil8t24zy-8 0}.lst-kix_hm47sef7muk-7>li:before{content:"" c
ounter(lst-ctn-kix_hm47sef7muk-7,lower-latin) ". "}ol.lst-kix_vnvg10gwrc8t-8.sta
rt{counter-reset:lst-ctn-kix_vnvg10gwrc8t-8 0}.lst-kix_vvzditg8sno-5>li:before{c
ontent:"\0025a0 "}.lst-kix_nhaic9xr6pf-2>li{counter-increment:lst-ctn-kix_nhaic
9xr6pf-2}ol.lst-kix_j51xhhtple7c-4.start{counter-reset:lst-ctn-kix_j51xhhtple7c-
4 0}.lst-kix_wzk0mdv2qg9u-5>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-5}.lst
-kix_j51xhhtple7c-7>li{counter-increment:lst-ctn-kix_j51xhhtple7c-7}.lst-kix_3h1
iswqv3l7s-6>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-6,decimal) ".
"}.lst-kix_hm47sef7muk-2>li{counter-increment:lst-ctn-kix_hm47sef7muk-2}.lst-kix
_3h1iswqv3l7s-1>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-1,lower-la
tin) ". "}.lst-kix_juntnht2kzza-2>li{counter-increment:lst-ctn-kix_juntnht2kzza-
2}.lst-kix_jzpgxqq6fzzf-0>li:before{content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-
0,decimal) ". "}.lst-kix_lgtbofvz5zxd-5>li:before{content:"" counter(lst-ctn-kix
_lgtbofvz5zxd-5,lower-roman) ". "}.lst-kix_1gqf2s78t7o1-1>li:before{content:"" c
ounter(lst-ctn-kix_1gqf2s78t7o1-1,lower-latin) ". "}ol.lst-kix_60g29afx0lof-2.st
art{counter-reset:lst-ctn-kix_60g29afx0lof-2 0}ol.lst-kix_9tkaqbe3bnu3-8{list-st
yle-type:none}ol.lst-kix_9tkaqbe3bnu3-7{list-style-type:none}ol.lst-kix_9tkaqbe3
bnu3-6{list-style-type:none}ol.lst-kix_9tkaqbe3bnu3-5{list-style-type:none}.lst-
kix_q1b5wk7cmirb-6>li:before{content:"\0025cf "}ol.lst-kix_9tkaqbe3bnu3-0{list-
style-type:none}.lst-kix_ggm78fckav5h-0>li{counter-increment:lst-ctn-kix_ggm78fc
kav5h-0}.lst-kix_lgtbofvz5zxd-3>li{counter-increment:lst-ctn-kix_lgtbofvz5zxd-3}
.lst-kix_3h1iswqv3l7s-5>li{counter-increment:lst-ctn-kix_3h1iswqv3l7s-5}ol.lst-k
ix_9tkaqbe3bnu3-4{list-style-type:none}ol.lst-kix_8uscekru9dbw-4.start{counter-r
eset:lst-ctn-kix_8uscekru9dbw-4 0}ol.lst-kix_9tkaqbe3bnu3-3{list-style-type:none
}ol.lst-kix_9tkaqbe3bnu3-2{list-style-type:none}ol.lst-kix_9tkaqbe3bnu3-1{list-s
tyle-type:none}.lst-kix_sgsi64vug03j-2>li{counter-increment:lst-ctn-kix_sgsi64vu
g03j-2}.lst-kix_hm47sef7muk-8>li:before{content:"" counter(lst-ctn-kix_hm47sef7m
uk-8,lower-roman) ". "}.lst-kix_pyiocxf7nngd-8>li:before{content:"" counter(lst-
ctn-kix_pyiocxf7nngd-8,lower-roman) ". "}.lst-kix_3h1iswqv3l7s-1>li{counter-incr
ement:lst-ctn-kix_3h1iswqv3l7s-1}.lst-kix_1g0xzctl1vi-6>li:before{content:"" cou
nter(lst-ctn-kix_1g0xzctl1vi-6,decimal) ". "}.lst-kix_32zxnvl59py3-7>li{counter-
increment:lst-ctn-kix_32zxnvl59py3-7}ol.lst-kix_1c0w7icorqz1-6.start{counter-res
et:lst-ctn-kix_1c0w7icorqz1-6 0}.lst-kix_kc6aimw8pnra-6>li:before{content:"\0025
cf "}.lst-kix_j51xhhtple7c-7>li:before{content:"" counter(lst-ctn-kix_j51xhhtpl
e7c-7,lower-latin) ". "}.lst-kix_nho7sy6cpfv0-7>li{counter-increment:lst-ctn-kix
_nho7sy6cpfv0-7}ol.lst-kix_v454r7upbzuz-6.start{counter-reset:lst-ctn-kix_v454r7
upbzuz-6 0}.lst-kix_hvjet9voiiio-5>li{counter-increment:lst-ctn-kix_hvjet9voiiio
-5}.lst-kix_nhaic9xr6pf-8>li:before{content:"" counter(lst-ctn-kix_nhaic9xr6pf-8
,lower-roman) ". "}.lst-kix_i2v077rod1nx-0>li:before{content:"\0025cf "}.lst-ki
x_9tkaqbe3bnu3-7>li:before{content:"" counter(lst-ctn-kix_9tkaqbe3bnu3-7,lower-l
atin) ". "}ol.lst-kix_ggm78fckav5h-8.start{counter-reset:lst-ctn-kix_ggm78fckav5
h-8 0}ol.lst-kix_8dg0b92yw51r-8.start{counter-reset:lst-ctn-kix_8dg0b92yw51r-8 0
}.lst-kix_dblgil8t24zy-0>li:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-0
,decimal) ". "}ol.lst-kix_v454r7upbzuz-8.start{counter-reset:lst-ctn-kix_v454r7u
pbzuz-8 0}.lst-kix_1gqf2s78t7o1-1>li{counter-increment:lst-ctn-kix_1gqf2s78t7o1-
1}ol.lst-kix_jxeur1wnlj7y-7.start{counter-reset:lst-ctn-kix_jxeur1wnlj7y-7 0}ol.
lst-kix_juntnht2kzza-4.start{counter-reset:lst-ctn-kix_juntnht2kzza-4 0}ol.lst-k
ix_jzpgxqq6fzzf-0.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-0 0}ol.lst-kix_gg
m78fckav5h-6.start{counter-reset:lst-ctn-kix_ggm78fckav5h-6 0}.lst-kix_j51xhhtpl
e7c-6>li{counter-increment:lst-ctn-kix_j51xhhtple7c-6}ol.lst-kix_7kmxmbi2lsws-8{
list-style-type:none}ol.lst-kix_8uscekru9dbw-7.start{counter-reset:lst-ctn-kix_8
uscekru9dbw-7 0}ol.lst-kix_7kmxmbi2lsws-7{list-style-type:none}.lst-kix_t9jkz28l
n50j-0>li:before{content:"" counter(lst-ctn-kix_t9jkz28ln50j-0,decimal) ". "}.ls
t-kix_p8a3u4ougab9-1>li:before{content:"" counter(lst-ctn-kix_p8a3u4ougab9-1,low
er-latin) ". "}ol.lst-kix_m1x0qzeeadaz-1.start{counter-reset:lst-ctn-kix_m1x0qze
eadaz-1 0}.lst-kix_60g29afx0lof-5>li:before{content:"" counter(lst-ctn-kix_60g29
afx0lof-5,lower-roman) ". "}ol.lst-kix_opzlp0rjj486-7{list-style-type:none}ol.ls
t-kix_opzlp0rjj486-6{list-style-type:none}ol.lst-kix_opzlp0rjj486-5{list-style-t
ype:none}ol.lst-kix_opzlp0rjj486-4{list-style-type:none}ol.lst-kix_sgsi64vug03j-
8.start{counter-reset:lst-ctn-kix_sgsi64vug03j-8 0}ol.lst-kix_opzlp0rjj486-8{lis
t-style-type:none}ol.lst-kix_z7in7d1ar2zt-7.start{counter-reset:lst-ctn-kix_z7in
7d1ar2zt-7 0}ol.lst-kix_t9jkz28ln50j-2.start{counter-reset:lst-ctn-kix_t9jkz28ln
50j-2 0}.lst-kix_8uscekru9dbw-4>li:before{content:"" counter(lst-ctn-kix_8uscekr
u9dbw-4,lower-latin) ". "}.lst-kix_kvgsl0s9rzo4-1>li:before{content:"" counter(l
st-ctn-kix_kvgsl0s9rzo4-1,lower-latin) ". "}.lst-kix_t7any4lo9hoq-6>li:before{co
ntent:"\0025cf "}ol.lst-kix_pyiocxf7nngd-0.start{counter-reset:lst-ctn-kix_pyio
cxf7nngd-0 0}.lst-kix_9tkaqbe3bnu3-5>li:before{content:"" counter(lst-ctn-kix_9t
kaqbe3bnu3-5,lower-roman) ". "}ol.lst-kix_opzlp0rjj486-2{list-style-type:none}.l
st-kix_bnpbicbhbbru-0>li:before{content:"\0025cf "}ol.lst-kix_opzlp0rjj486-3{li
st-style-type:none}.lst-kix_8uscekru9dbw-4>li{counter-increment:lst-ctn-kix_8usc
ekru9dbw-4}ol.lst-kix_opzlp0rjj486-0{list-style-type:none}ol.lst-kix_opzlp0rjj48
6-1{list-style-type:none}ol.lst-kix_m8zky1oy6k60-6.start{counter-reset:lst-ctn-k
ix_m8zky1oy6k60-6 0}ol.lst-kix_p8a3u4ougab9-8.start{counter-reset:lst-ctn-kix_p8
a3u4ougab9-8 0}.lst-kix_oqqzpe3b3nud-2>li:before{content:"" counter(lst-ctn-kix_
oqqzpe3b3nud-2,lower-roman) ". "}.lst-kix_60g29afx0lof-8>li:before{content:"" co
unter(lst-ctn-kix_60g29afx0lof-8,lower-roman) ". "}ol.lst-kix_qeukrmzdd856-8.sta
rt{counter-reset:lst-ctn-kix_qeukrmzdd856-8 0}ol.lst-kix_pyiocxf7nngd-0{list-sty
le-type:none}.lst-kix_uq748w6pjv3r-2>li:before{content:"" counter(lst-ctn-kix_uq
748w6pjv3r-2,lower-roman) ". "}ol.lst-kix_uq748w6pjv3r-7.start{counter-reset:lst
-ctn-kix_uq748w6pjv3r-7 0}.lst-kix_8uscekru9dbw-8>li:before{content:"" counter(l
st-ctn-kix_8uscekru9dbw-8,lower-roman) ". "}ol.lst-kix_kvgsl0s9rzo4-8.start{coun
ter-reset:lst-ctn-kix_kvgsl0s9rzo4-8 0}ol.lst-kix_pyiocxf7nngd-3{list-style-type
:none}ol.lst-kix_pyiocxf7nngd-4{list-style-type:none}ol.lst-kix_pyiocxf7nngd-1{l
ist-style-type:none}ol.lst-kix_kvgsl0s9rzo4-5.start{counter-reset:lst-ctn-kix_kv
gsl0s9rzo4-5 0}ol.lst-kix_pyiocxf7nngd-2{list-style-type:none}ol.lst-kix_pyiocxf
7nngd-8{list-style-type:none}ol.lst-kix_pyiocxf7nngd-7{list-style-type:none}ol.l
st-kix_pyiocxf7nngd-6{list-style-type:none}.lst-kix_2uog6ch44jpu-4>li:before{con
tent:"" counter(lst-ctn-kix_2uog6ch44jpu-4,lower-latin) ". "}.lst-kix_p8a3u4ouga
b9-1>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-1}ol.lst-kix_pyiocxf7nngd-5{l
ist-style-type:none}.lst-kix_7kmxmbi2lsws-0>li:before{content:"" counter(lst-ctn
-kix_7kmxmbi2lsws-0,decimal) ". "}ol.lst-kix_vnvg10gwrc8t-5.start{counter-reset:
lst-ctn-kix_vnvg10gwrc8t-5 0}.lst-kix_60g29afx0lof-2>li{counter-increment:lst-ct
n-kix_60g29afx0lof-2}.lst-kix_jpf3cr7xe1pc-8>li{counter-increment:lst-ctn-kix_jp
f3cr7xe1pc-8}ol.lst-kix_sgsi64vug03j-6.start{counter-reset:lst-ctn-kix_sgsi64vug
03j-6 0}.lst-kix_32zxnvl59py3-6>li:before{content:"" counter(lst-ctn-kix_32zxnvl
59py3-6,decimal) ". "}ol.lst-kix_j51xhhtple7c-1{list-style-type:none}.lst-kix_gg
m78fckav5h-5>li:before{content:"" counter(lst-ctn-kix_ggm78fckav5h-5,lower-roman
) ". "}ol.lst-kix_j51xhhtple7c-0{list-style-type:none}ol.lst-kix_j51xhhtple7c-3{
list-style-type:none}ol.lst-kix_j51xhhtple7c-2{list-style-type:none}.lst-kix_uq7
48w6pjv3r-0>li{counter-increment:lst-ctn-kix_uq748w6pjv3r-0}ol.lst-kix_lgtbofvz5
zxd-0.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-0 0}.lst-kix_lixznqbqiris-4>l
i{counter-increment:lst-ctn-kix_lixznqbqiris-4}ol.lst-kix_2uog6ch44jpu-5.start{c
ounter-reset:lst-ctn-kix_2uog6ch44jpu-5 0}ol.lst-kix_nhaic9xr6pf-1{list-style-ty
pe:none}ol.lst-kix_nhaic9xr6pf-2{list-style-type:none}ol.lst-kix_nhaic9xr6pf-3{l
ist-style-type:none}ol.lst-kix_nhaic9xr6pf-4{list-style-type:none}ol.lst-kix_nha
ic9xr6pf-5{list-style-type:none}ol.lst-kix_nhaic9xr6pf-6{list-style-type:none}ol
.lst-kix_nhaic9xr6pf-7{list-style-type:none}ol.lst-kix_nhaic9xr6pf-8{list-style-
type:none}ol.lst-kix_j51xhhtple7c-4{list-style-type:none}ol.lst-kix_j51xhhtple7c
-5{list-style-type:none}ol.lst-kix_j51xhhtple7c-6{list-style-type:none}ol.lst-ki
x_j51xhhtple7c-7{list-style-type:none}ol.lst-kix_j51xhhtple7c-8{list-style-type:
none}ol.lst-kix_nhaic9xr6pf-0{list-style-type:none}.lst-kix_vvzditg8sno-0>li:bef
ore{content:"\0025cf "}.lst-kix_a4uqy1hx9g3-0>li:before{content:"\0025cf "}.ls
t-kix_1g0xzctl1vi-1>li:before{content:"" counter(lst-ctn-kix_1g0xzctl1vi-1,lower
-latin) ". "}ol.lst-kix_1g0xzctl1vi-3.start{counter-reset:lst-ctn-kix_1g0xzctl1v
i-3 0}.lst-kix_fr6w5z45nvx0-5>li:before{content:"" counter(lst-ctn-kix_fr6w5z45n
vx0-5,lower-roman) ". "}.lst-kix_fpxsljpyl73u-3>li:before{content:"\0025cf "}.l
st-kix_7kmxmbi2lsws-2>li{counter-increment:lst-ctn-kix_7kmxmbi2lsws-2}.lst-kix_1
g0xzctl1vi-1>li{counter-increment:lst-ctn-kix_1g0xzctl1vi-1}ol.lst-kix_3h1iswqv3
l7s-5.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-5 0}ol.lst-kix_m1x0qzeeadaz-6
.start{counter-reset:lst-ctn-kix_m1x0qzeeadaz-6 0}.lst-kix_t9jkz28ln50j-1>li:bef
ore{content:"" counter(lst-ctn-kix_t9jkz28ln50j-1,lower-latin) ". "}ol.lst-kix_5
f9palqqt4mm-3.start{counter-reset:lst-ctn-kix_5f9palqqt4mm-3 0}ol.lst-kix_2uog6c
h44jpu-3.start{counter-reset:lst-ctn-kix_2uog6ch44jpu-3 0}.lst-kix_nho7sy6cpfv0-
8>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-8,lower-roman) ". "}.lst
-kix_4s9m9sikrtm7-8>li:before{content:"" counter(lst-ctn-kix_4s9m9sikrtm7-8,lowe
r-roman) ". "}ol.lst-kix_nhaic9xr6pf-4.start{counter-reset:lst-ctn-kix_nhaic9xr6
pf-4 0}.lst-kix_opzlp0rjj486-2>li{counter-increment:lst-ctn-kix_opzlp0rjj486-2}.
lst-kix_57tjkabqizo2-4>li:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-4,l
ower-latin) ". "}.lst-kix_juntnht2kzza-3>li{counter-increment:lst-ctn-kix_juntnh
t2kzza-3}ol.lst-kix_wzk0mdv2qg9u-8.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-
8 0}ol.lst-kix_8dg0b92yw51r-4.start{counter-reset:lst-ctn-kix_8dg0b92yw51r-4 0}.
lst-kix_60g29afx0lof-5>li{counter-increment:lst-ctn-kix_60g29afx0lof-5}ol.lst-ki
x_60g29afx0lof-5.start{counter-reset:lst-ctn-kix_60g29afx0lof-5 0}.lst-kix_qz5wp
1hdd24k-2>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-2,lower-roman) "
. "}.lst-kix_juntnht2kzza-7>li{counter-increment:lst-ctn-kix_juntnht2kzza-7}.lst
-kix_5f9palqqt4mm-0>li:before{content:"" counter(lst-ctn-kix_5f9palqqt4mm-0,deci
mal) ". "}ol.lst-kix_7kmxmbi2lsws-2.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws
-2 0}.lst-kix_v454r7upbzuz-7>li{counter-increment:lst-ctn-kix_v454r7upbzuz-7}.ls
t-kix_fr6w5z45nvx0-4>li:before{content:"" counter(lst-ctn-kix_fr6w5z45nvx0-4,low
er-latin) ". "}.lst-kix_kf08e4mo0q15-6>li{counter-increment:lst-ctn-kix_kf08e4mo
0q15-6}ol.lst-kix_57tjkabqizo2-6.start{counter-reset:lst-ctn-kix_57tjkabqizo2-6
0}ol.lst-kix_3h1iswqv3l7s-7.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-7 0}ol.
lst-kix_uq748w6pjv3r-2.start{counter-reset:lst-ctn-kix_uq748w6pjv3r-2 0}.lst-kix
_opzlp0rjj486-3>li:before{content:"" counter(lst-ctn-kix_opzlp0rjj486-3,decimal)
". "}.lst-kix_kvgsl0s9rzo4-1>li{counter-increment:lst-ctn-kix_kvgsl0s9rzo4-1}.l
st-kix_juntnht2kzza-4>li:before{content:"" counter(lst-ctn-kix_juntnht2kzza-4,lo
wer-latin) ". "}ol.lst-kix_dblgil8t24zy-1.start{counter-reset:lst-ctn-kix_dblgil
8t24zy-1 0}.lst-kix_7kmxmbi2lsws-4>li:before{content:"" counter(lst-ctn-kix_7kmx
mbi2lsws-4,lower-latin) ". "}ol.lst-kix_oqqzpe3b3nud-3.start{counter-reset:lst-c
tn-kix_oqqzpe3b3nud-3 0}ol.lst-kix_kf08e4mo0q15-6.start{counter-reset:lst-ctn-ki
x_kf08e4mo0q15-6 0}.lst-kix_z7in7d1ar2zt-6>li{counter-increment:lst-ctn-kix_z7in
7d1ar2zt-6}.lst-kix_pza3ybm1wtg3-8>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3
-8}.lst-kix_32zxnvl59py3-3>li:before{content:"" counter(lst-ctn-kix_32zxnvl59py3
-3,decimal) ". "}ol.lst-kix_opzlp0rjj486-6.start{counter-reset:lst-ctn-kix_opzlp
0rjj486-6 0}.lst-kix_lixznqbqiris-7>li{counter-increment:lst-ctn-kix_lixznqbqiri
s-7}.lst-kix_j51xhhtple7c-4>li:before{content:"" counter(lst-ctn-kix_j51xhhtple7
c-4,lower-latin) ". "}ol.lst-kix_8dg0b92yw51r-0.start{counter-reset:lst-ctn-kix_
8dg0b92yw51r-0 0}.lst-kix_kvgsl0s9rzo4-5>li{counter-increment:lst-ctn-kix_kvgsl0
s9rzo4-5}.lst-kix_8dg0b92yw51r-1>li:before{content:"" counter(lst-ctn-kix_8dg0b9
2yw51r-1,lower-latin) ". "}ol.lst-kix_vnvg10gwrc8t-2.start{counter-reset:lst-ctn
-kix_vnvg10gwrc8t-2 0}.lst-kix_t9jkz28ln50j-4>li{counter-increment:lst-ctn-kix_t
9jkz28ln50j-4}ol.lst-kix_opzlp0rjj486-2.start{counter-reset:lst-ctn-kix_opzlp0rj
j486-2 0}.lst-kix_pa6lflf2amnu-0>li{counter-increment:lst-ctn-kix_pa6lflf2amnu-0
}.lst-kix_dblgil8t24zy-2>li{counter-increment:lst-ctn-kix_dblgil8t24zy-2}.lst-ki
x_m1x0qzeeadaz-0>li:before{content:"" counter(lst-ctn-kix_m1x0qzeeadaz-0,decimal
) ". "}ol.lst-kix_60g29afx0lof-0.start{counter-reset:lst-ctn-kix_60g29afx0lof-0
0}ol.lst-kix_fr6w5z45nvx0-4.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-4 0}ol.
lst-kix_1g0xzctl1vi-0.start{counter-reset:lst-ctn-kix_1g0xzctl1vi-0 0}.lst-kix_m
8zky1oy6k60-0>li:before{content:"" counter(lst-ctn-kix_m8zky1oy6k60-0,decimal) "
. "}ol.lst-kix_nho7sy6cpfv0-6.start{counter-reset:lst-ctn-kix_nho7sy6cpfv0-6 0}.
lst-kix_hvjet9voiiio-3>li:before{content:"" counter(lst-ctn-kix_hvjet9voiiio-3,d
ecimal) ". "}ol.lst-kix_3h1iswqv3l7s-8.start{counter-reset:lst-ctn-kix_3h1iswqv3
l7s-8 0}.lst-kix_57tjkabqizo2-7>li:before{content:"" counter(lst-ctn-kix_57tjkab
qizo2-7,lower-latin) ". "}.lst-kix_hvjet9voiiio-2>li:before{content:"" counter(l
st-ctn-kix_hvjet9voiiio-2,lower-roman) ". "}ol.lst-kix_60g29afx0lof-5{list-style
-type:none}ol.lst-kix_60g29afx0lof-6{list-style-type:none}ol.lst-kix_60g29afx0lo
f-7{list-style-type:none}ol.lst-kix_60g29afx0lof-8{list-style-type:none}.lst-kix
_t9jkz28ln50j-5>li:before{content:"" counter(lst-ctn-kix_t9jkz28ln50j-5,lower-ro
man) ". "}ol.lst-kix_fr6w5z45nvx0-1.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0
-1 0}ol.lst-kix_kvgsl0s9rzo4-4.start{counter-reset:lst-ctn-kix_kvgsl0s9rzo4-4 0}
.lst-kix_sgsi64vug03j-3>li:before{content:"" counter(lst-ctn-kix_sgsi64vug03j-3,
decimal) ". "}.lst-kix_7kmxmbi2lsws-6>li:before{content:"" counter(lst-ctn-kix_7
kmxmbi2lsws-6,decimal) ". "}ol.lst-kix_60g29afx0lof-0{list-style-type:none}.lst-
kix_opzlp0rjj486-4>li{counter-increment:lst-ctn-kix_opzlp0rjj486-4}ol.lst-kix_j5
1xhhtple7c-6.start{counter-reset:lst-ctn-kix_j51xhhtple7c-6 0}ol.lst-kix_60g29af
x0lof-2{list-style-type:none}ol.lst-kix_60g29afx0lof-1{list-style-type:none}.lst
-kix_t7any4lo9hoq-8>li:before{content:"\0025a0 "}ol.lst-kix_60g29afx0lof-4{list
-style-type:none}ol.lst-kix_60g29afx0lof-3{list-style-type:none}ol{margin:0;padd
ing:0}.c37{vertical-align:baseline;color:#000000;font-size:11pt;font-style:norma
l;font-family:"Arial";text-decoration:none;font-weight:normal}.c28{vertical-alig
n:top;width:504pt;border-style:solid;background-color:#ead1dc;border-color:#0000
00;border-width:1pt;padding:5pt 5pt 5pt 5pt}.c20{vertical-align:top;width:648pt;
border-style:solid;background-color:#f3f3f3;border-color:#000000;border-width:1p
t;padding:5pt 5pt 5pt 5pt}.c25{vertical-align:top;width:144pt;border-style:solid
;border-color:#000000;border-width:1pt;padding:5pt 5pt 5pt 5pt}.c4{line-height:1
.0;padding-top:0pt;text-align:center;padding-bottom:0pt}.c34{color:#999999;font-
size:24pt;font-family:"Open Sans"}.c19{font-size:12pt;font-family:"Consolas";tex
t-decoration:line-through}.c41{color:#a64d79;font-size:12pt;font-family:"Trebuch
et MS"}.c18{line-height:1.15;text-align:left;padding-bottom:0pt}.c39{color:#0000
00;font-size:11pt;font-weight:normal}.c33{color:#666666;font-size:12pt;font-fami
ly:"Trebuchet MS"}.c13{margin-right:auto;border-collapse:collapse}.c26{max-width
:648pt;background-color:#ffffff;padding:72pt 72pt 72pt 72pt}.c51{font-size:36pt;
font-family:"Arial"}.c45{font-size:11pt;font-family:"Arial"}.c53{margin:5px;bord
er:1px solid black}.c40{padding-top:18pt;padding-bottom:4pt}.c44{font-size:24pt;
font-family:"Open Sans"}.c29{padding-top:24pt;padding-bottom:6pt}.c42{text-align
:right;padding-bottom:0pt}.c3{padding-top:10pt;height:16pt}.c21{color:#1155cc;te
xt-decoration:underline}.c31{font-size:18pt;font-family:"Arial"}.c36{color:#ff00
00;font-size:18pt}.c14{color:inherit;text-decoration:inherit}.c24{text-align:lef
t;padding-bottom:0pt}.c10{margin:0;padding:0}.c52{font-size:36pt;font-family:"Op
en Sans"}.c9{padding-top:8pt}.c16{padding-left:0pt}.c47{color:#333333}.c48{text-
align:right}.c30{margin-left:108pt}.c50{color:#4a86e8}.c6{height:11pt}.c8{height
:16pt}.c17{margin-left:72pt}.c2{font-family:"Courier New"}.c11{margin-left:36pt}
.c12{padding-top:10pt}.c46{font-size:18pt}.c32{line-height:1.5}.c27{height:12pt}
.c5{line-height:1.0}.c38{color:#ff0000}.c43{text-align:center}.c35{font-family:"
Consolas"}.c23{text-decoration:line-through}.c49{color:#a64d79}.c1{font-weight:b
old}.c15{font-style:italic}.c0{direction:ltr}.c22{height:0pt}.c7{padding-top:0pt
}.title{padding-top:0pt;line-height:1.15;text-align:left;color:#000000;font-size
:21pt;font-family:"Trebuchet MS";padding-bottom:0pt}.subtitle{padding-top:0pt;li
ne-height:1.15;text-align:left;color:#666666;font-style:italic;font-size:13pt;fo
nt-family:"Trebuchet MS";padding-bottom:10pt}li{color:#000000;font-size:11pt;fon
t-family:"Arial"}p{color:#000000;font-size:11pt;margin:0;font-family:"Arial"}h1{
padding-top:10pt;line-height:1.15;text-align:left;color:#000000;font-size:16pt;f
ont-family:"Trebuchet MS";padding-bottom:0pt}h2{padding-top:10pt;line-height:1.1
5;text-align:left;color:#000000;font-size:13pt;font-family:"Trebuchet MS";font-w
eight:bold;padding-bottom:0pt}h3{padding-top:8pt;line-height:1.15;text-align:lef
t;color:#666666;font-size:12pt;font-family:"Trebuchet MS";font-weight:bold;paddi
ng-bottom:0pt}h4{padding-top:8pt;line-height:1.15;text-align:left;color:#666666;
font-size:11pt;text-decoration:underline;font-family:"Trebuchet MS";padding-bott
om:0pt}h5{padding-top:8pt;line-height:1.15;text-align:left;color:#666666;font-si
ze:11pt;font-family:"Trebuchet MS";padding-bottom:0pt}h6{padding-top:8pt;line-he
ight:1.15;text-align:left;color:#666666;font-style:italic;font-size:11pt;font-fa
mily:"Trebuchet MS";padding-bottom:0pt}</style></head><body class="c26"><p class
="c29 c43 c0 title"><a name="h.w7msts8n8z9n"></a><img height="268" src="images/i
mage30.png" width="616"></p><p class="c6 c0 c43"><span class="c36"></span></p><p
class="c43 c0"><span class="c36">Oct, 2013: This code lab is </span><span class
="c36 c1">deprecated</span><span class="c36">.</span></p><p class="c43 c0"><span
class="c36">It is based on Web UI, which is </span><span class="c1 c36">superse
ded</span><span class="c36"> by </span><span class="c21 c46"><a class="c14"
href="https://www.dartlang.org/polymer-dart/">Polymer</a></span><span class="c3
6">.</span></p><p class="c29 c6 c43 c0 title"><a name="h.mwk409ib2hvj"></a></p><
p class="c6 c0"><span></span></p><p class="c6 c0"><span></span></p><p class="c29
c43 c0 title"><a name="h.umyrvsj374pd"></a><span class="c34 c1">Dart on the Mod
ern Web</span></p><p class="c29 c43 c0 title"><a name="h.eit4v9fewd5g"></a><span
class="c1 c34">Google I/O 2013 — Code lab</span></p><p class="c6 c0"><spa
n></span></p><p class="c6 c0"><span></span></p><p class="c0 c29 title"><a name="
h.kerookz5dcyr"></a><span class="c1 c52">Dart on the Modern Web</span><img heigh
t="133" src="images/image19.png" width="133"></p><p class="c0 c40 subtitle"><a n
ame="h.lmjlnm6y08c9"></a><span class="c44">Using Dart to Build a Modern Web App<
/span></p><h1 class="c29 c0"><a name="h.r18vdncm6tad"></a><span class="c1 c31">D
art code lab for Google I/O 2013</span></h1><hr style="page-break-before:always;
display:none;"><p class="c6 c0"><span></span></p><h1 class="c0"><a name="h.cgzc3
lhbqumi"></a><span>Introduction</span></h1><p class="c6 c0"><span></span></p><p
class="c0"><span>Welcome to Dart! We built Dart to help developers from all plat
forms build awesome apps for the modern web. Dart compiles to JavaScript to run
across all modern browsers. Dart is an easy-to-learn language at the hub of &nbs
p;a powerful set of tools for structured web app engineering. The Dart SDK conta
ins a rich set of libraries, a powerful editor, a package manager, and much more
.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>In this code l
ab, you’ll build a simple, single-page, modern web app for desktop and mob
ile.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>You will le
arn:</span></p><p class="c6 c0"><span></span></p><ul class="c10 lst-kix_i2v077ro
d1nx-0 start"><li class="c16 c11 c0"><span>A bit of the Dart language and librar
ies</span></li><li class="c16 c11 c0"><span>Client-side templating</span></li><l
i class="c16 c11 c0"><span>Declarative dynamic DOM generation</span></li><li cla
ss="c16 c11 c0"><span>MDV-style data binding to sync UI elements with data</span
></li><li class="c16 c11 c0"><span>How to use the Dart HTML and Web UI libraries
</span></li><li class="c16 c11 c0"><span>How to store data locally in your brows
er</span></li><li class="c16 c11 c0"><span>Optimizing for </span><span>mobile</s
pan><span> devices</span></li></ul><h2 class="c0"><a name="h.wybq4zhendq"><
/a><span>Prerequisites</span></h2><p class="c6 c0"><span></span></p><p class="c0
"><span>This code lab assumes that you are familiar with web programming (HTML,
CSS) and object-oriented programming. You do not need to be an expert in web pro
gramming to enjoy this code lab.</span></p><p class="c6 c0"><span></span></p><p
class="c0"><span>This code lab requires Dart Editor, which you will download and
install in Step 0</span><span>.</span></p><p class="c6 c0"><span></span></p><p
class="c0"><span class="c1">Note:</span><span> Dart Editor runs on Windows
(Vista, 7, or 8), Linux, or Mac.</span></p><hr style="page-break-before:always;d
isplay:none;"><p class="c6 c0"><span></span></p><h2 class="c0"><a name="h.dqo034
2x5tkd"></a><span>Resources</span></h2><p class="c6 c0"><span></span></p><p clas
s="c0"><span>There are numerous </span><span>resources for the new Dart develope
r</span><span>. Here are some of our</span><span> recommendations:</span></
p><p class="c6 c0"><span></span></p><ul class="c10 lst-kix_q1b5wk7cmirb-0 start"
><li class="c16 c11 c0"><span class="c21"><a class="c14" href="http://www.dartla
ng.org/docs/tutorials/">A Game of Darts - Tutorials</a></span></li><li class="c1
6 c11 c0"><span class="c21"><a class="c14" href="http://www.dartlang.org/docs/tu
torials/web-ui/">Target 6: Get Started with Web UI</a></span></li><li class="c16
c11 c0"><span class="c21"><a class="c14" href="http://www.dartlang.org/docs/dar
t-up-and-running/contents/ch02.html">Dart Language Tour</a></span></li><li class
="c16 c11 c0"><span class="c21"><a class="c14" href="http://www.dartlang.org/doc
s/dart-up-and-running/contents/ch03.html">Dart Library Tour</a></span></li><li c
lass="c16 c11 c0"><span class="c21"><a class="c14" href="http://www.dartlang.org
/docs/">Programmer's Guide</a></span></li></ul><hr style="page-break-before:
always;display:none;"><h1 class="c8 c0"><a name="h.j231q75dw9bi"></a></h1><h1 cl
ass="c0"><a name="h.gu4egoh1qqcf"></a><span>Step 0: Get the app, run it in Dart
Editor, and practice debugging</span></h1><p class="c6 c0"><span></span></p><p c
lass="c0"><span>This step sets the stage. You make sure you have the right softw
are, can run the finished app, and know how to use Dart Editor’s integrate
d debugger.</span></p><p class="c6 c0"><span></span></p><h2 class="c0"><a name="
h.fp11eex6azbi"></a><span>Objectives</span></h2><ol class="c10 lst-kix_p8a3u4oug
ab9-0 start" start="1"><li class="c16 c11 c0"><span>Get the </span><span>latest
version of Dart Editor</span></li><li class="c16 c11 c0"><span>Download the sour
ce code for the sample app</span></li><li class="c16 c11 c0"><span>Run the finis
hed version of the app</span></li><li class="c16 c11 c0"><span>Look at debugging
information for the running app</span></li></ol><p class="c6 c0"><span></span><
/p><h2 class="c0"><a name="h.of31fpik16gt"></a><span>Concepts overview</span></h
2><ul class="c10 lst-kix_a4uqy1hx9g3-0 start"><li class="c16 c11 c0"><span class
="c1">Dartium</span><span> (Chromium with a built-in Dart VM) and the Dart
SDK are included in Dart Editor download.</span></li><li class="c16 c11 c0"><spa
n>You can run Dart web apps in Dartium or in </span><span class="c1">any modern
browser</span><span>. (Dart Editor compiles the Dart code to JavaScript, using a
n SDK tool called dart2js.)</span></li></ul><p class="c6 c0"><span></span></p><h
2 class="c0"><a name="h.l63dnbcn7kku"></a><span>Walkthrough</span></h2><h3 class
="c0"><a name="h.p74ks3s27haa"></a><span>Download or update Dart Editor</span></
h3><p class="c6 c0"><span></span></p><p class="c0"><span>If you </span><span cla
ss="c1">don’t </span><span>have a copy of Dart Editor, get it:</span></p><
ol class="c10 lst-kix_m1x0qzeeadaz-0 start" start="1"><li class="c16 c11 c0"><sp
an>Go to </span><span class="c21"><a class="c14" href="http://www.dartlang.org/t
ools/editor/">dartlang.org/editor/</a></span><span>.</span></li><li class="c16 c
11 c0"><span>Download the version for your OS.</span></li><li class="c16 c11 c0"
><span>Unzip the file. You’re done!</span></li><li class="c16 c11 c0"><spa
n>Launch Dart Editor by double-clicking the </span><span class="c1">DartEditor</
span><span> executable file.</span></li></ol><p class="c17 c0"><img height=
"93" src="images/image37.png" width="77"></p><p class="c11 c0"><span class="c1">
Note:</span><span> If you’re on a Mac, you might see an “uniden
tified developer” error. Here’s the solution: Instead of double-clic
king the </span><span class="c1">DartEditor</span><span> executable file, r
ight-click (or Ctl+click) it to bring up a context menu, and choose </span><span
class="c1">Open</span><span>. Then, in the dialog that comes up, click </span><
span class="c1">Open</span><span>. An alternative workaround is to change your s
ecurity settings (see </span><span class="c21"><a class="c14" href="http://www.d
artlang.org/tools/editor/troubleshoot.html">Troubleshooting Dart Editor</a></spa
n><span>).</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>If yo
u </span><span class="c1">do</span><span> already have a copy of Dart Edito
r, make sure you’re on the latest build:</span></p><ol class="c10 lst-kix_
jpf3cr7xe1pc-0 start" start="1"><li class="c16 c11 c0"><span>Launch Dart Editor.
</span></li><li class="c16 c11 c0"><span>Close </span><span class="c1">Preferenc
es</span><span> if you’ve opened it.</span></li><li class="c16 c11 c0
"><span>Open </span><span class="c1">About Dart Editor</span><span>.</span></li>
<li class="c16 c11 c0"><span>If the button at the bottom right (</span><span cla
ss="c1">Check for Update </span><span>or </span><span class="c1">Download Update
</span><span>)</span><span class="c1"> </span><span>is enabled, click it, a
nd download the update.</span></li><li class="c16 c11 c0"><span>When the button
says </span><span class="c1">Apply Update</span><span>, click it.</span></li></o
l><p class="c6 c0"><span></span></p><h3 class="c0"><a name="h.d3pxkjuwrjf7"></a>
<span>Download the app’s source code</span></h3><p class="c6 c0"><span></s
pan></p><p class="c0"><span>You can either clone the git repo or download the ZI
P file.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>To clone
the repo from the command line:</span></p><p class="c6 c0"><span></span></p><p
class="c11 c0"><span class="c2">git clone </span><span class="c21 c2"><a class="
c14" href="https://github.com/dart-lang/io-2013-dart-codelab">https://github.com
/dart-lang/io-2013-dart-codelab</a></span></p><p class="c6 c0"><span></span></p>
<p class="c0"><span>To get the source as a ZIP file:</span></p><p class="c6 c0">
<span></span></p><ol class="c10 lst-kix_kf08e4mo0q15-0 start" start="1"><li clas
s="c16 c11 c0"><span>Go to </span><span class="c21"><a class="c14" href="https:/
/github.com/dart-lang/io-2013-dart-codelab">https://github.com/dart-lang/io-2013
-dart-codela</a></span><span class="c21"><a class="c14" href="https://github.com
/dart-lang/io-2013-dart-codelab">b</a></span></li><li class="c16 c11 c0"><span>C
lick the </span><span class="c1">Download </span><span class="c1">ZIP </span><sp
an>button</span><span> in the right-hand column.</span></li></ol><p class="
c11 c0"><img height="197" src="images/image34.png" width="200"></p><h3 class="c0
"><a name="h.ygvsq0wvi55m"></a><span>Run the finished application</span></h3><p
class="c6 c0"><span></span></p><p class="c0"><span>Now that you’ve downloa
ded the source code, try out the finished application.</span></p><p class="c6 c0
"><span></span></p><ol class="c10 lst-kix_oqqzpe3b3nud-0 start" start="1"><li cl
ass="c16 c11 c0"><span>If you haven’t already done so, launch Dart Editor
by double-clicking the </span><span class="c1">DartEditor</span><span> exec
utable file.</span></li></ol><p class="c17 c0"><img height="93" src="images/imag
e37.png" width="77"></p><p class="c11 c0"><span>If you have trouble, see </span>
<span class="c21"><a class="c14" href="http://www.dartlang.org/tools/editor/trou
bleshoot.html">Troubleshooting Dart Editor</a></span><span>.<br></span></p><ol c
lass="c10 lst-kix_oqqzpe3b3nud-0" start="2"><li class="c16 c11 c0"><span>In Dart
Editor, t</span><span>ype </span><span class="c1">Ctl+O</span><span> (Linu
x/Windows) or </span><span class="c1">Cmd+O</span><span> (Mac) </span><span
>or choose </span><span class="c1">File > </span><span class="c1">Open Existi
ng Folder</span><span>.<br></span></li><li class="c16 c11 c0"><span>Select the <
/span><span class="c1">io-2013-codelab-finished</span><span> directory in t
he folder where you extracted the source code, and click </span><span class="c1"
>Open</span><span>.</span><span> </span></li></ol><p class="c11 c0"><span c
lass="c1">IMPORTANT</span><span>: Make sure you open </span><span class="c1">io-
2013-codelab-finished</span><span> and </span><span class="c1">not</span><s
pan> its parent directory. Dart Editor analyzes all of the code in the open
folder. For this code lab, it is more efficient to open just the directory for
your active step rather than the top-level directory containing all of the steps
.</span></p><p class="c11 c0"><img height="355" src="images/image32.png" width="
800"></p><p class="c6 c11 c0"><span></span></p><p class="c11 c0"><span>Dart Edit
or </span><span>installs the app’s dependenc</span><span>ies and starts bu
ilding it. The progress bar is in the lower right corner of the window. Dart Edi
tor keeps the dependencies and compiled version up-to-date. However, if you ever
need or want to build the app manually, you can follow these steps:</span></p><
ol class="c10 lst-kix_hvjet9voiiio-1 start" start="1"><li class="c16 c17 c0"><sp
an>In the Files view, right-click </span><span class="c1">pubspec.yaml</span><sp
an> and choose </span><span class="c1">Pub Install</span><span>.</span></li
><li class="c16 c17 c0"><span>In the Tools menu, choose </span><span class="c1">
Reanalyze Sources</span><span>.<br>(The editor might beat you to this, but it wo
n’t hurt to do it twice.)</span></li><li class="c16 c17 c0"><span>In the F
iles view, right-click</span><span> </span><span class="c1">build.da</span>
<span class="c1">rt</span><span> and choose </span><span class="c1">Run</sp
an><span>. <br>The output should look </span><span>something</span><span> l
ike the following.</span></li></ol><p class="c6 c11 c0"><span></span></p><p clas
s="c17 c5 c0"><span class="c2">Total time spent on web/index.html
--
1159 ms</span></p><p class="c17 c5 c0"><span class="c2">Total time
&n
bsp;  
; -- 1194 ms</span></p><p class="c17 c5 c0"><span class="c2">Build finished!</sp
an></p><p class="c6 c0"><span></span></p><ol class="c10 lst-kix_oqqzpe3b3nud-0"
start="4"><li class="c16 c11 c0"><span>Run the app in Dartium:</span></li></ol><
ol class="c10 lst-kix_oqqzpe3b3nud-1 start" start="1"><li class="c16 c17 c0"><sp
an>In the Files view, find the </span><span class="c1">web</span><span> dir
ectory and right-click its </span><span class="c1">index.html</span><span>
file.</span></li><li class="c16 c17 c0"><span>Choose </span><span class="c1">Run
in Dartium</span><span>. The app initially looks like this:</span></li></ol><p
class="c17 c0"><img height="342" src="images/image18.png" width="660"><span><br>
</span><span class="c1">Note</span><span>: If you don’t see an Untitled do
cument, try steps 3a-3c. Also check that the </span><span class="c1">web</span><
span> directory contains an </span><span class="c1">out</span><span> d
irectory. Try running </span><span class="c1">web/out/index.html</span><span>. I
f it still doesn’t work, restart Dart Editor.</span></p><p class="c6 c0"><
span></span></p><ol class="c10 lst-kix_oqqzpe3b3nud-0" start="5"><li class="c16
c11 c0"><span>Play with the app</span><span>:</span></li></ol><ol class="c10 lst
-kix_oqqzpe3b3nud-1" start="3"><li class="c16 c17 c0"><span>Click the + button t
o create an untitled document.</span></li><li class="c16 c17 c0"><span>Rename th
e untitled document by editing the title in the right-hand pane.</span></li><li
class="c16 c17 c0"><span>Put some text in the document.</span></li><li class="c1
6 c17 c0"><span>Use the + button to create more documents.</span></li><li class=
"c16 c0 c17"><span>Use the </span><span class="c1">Filter documents</span><span>
field to limit the documents shown to those that have a certain string in
their title or contents.</span></li></ol><p class="c17 c0"><img height="320" src
="images/image33.png" width="642"></p><ol class="c10 lst-kix_oqqzpe3b3nud-1" sta
rt="8"><li class="c16 c17 c0"><span>Make the window narrower, and observe how th
e layout changes.</span></li></ol><p class="c6 c0"><span></span></p><ol class="c
10 lst-kix_oqqzpe3b3nud-0" start="6"><li class="c16 c11 c0"><span>Copy the app&r
squo;s URL from the tab that’s running the app, then close that tab. Open
another tab and navigate to the app’s URL. Notice how all the documents yo
u created remain, as long as you’re using the same browser and profile.</s
pan></li></ol><p class="c6 c0"><span></span></p><ol class="c10 lst-kix_oqqzpe3b3
nud-0" start="7"><li class="c16 c11 c0"><span>Now that you’ve see the app
running in Dartium, try running it in your default browser and in another browse
r:</span></li></ol><ol class="c10 lst-kix_oqqzpe3b3nud-1" start="9"><li class="c
16 c17 c0"><span>Quit the Dartium app, </span><span>either by closing its tab or
by clicking the </span><span class="c38 c1">red square</span><span> in the
Debugger pane.</span></li></ol><p class="c17 c0"><img height="80" src="images/i
mage20.png" width="166"></p><ol class="c10 lst-kix_oqqzpe3b3nud-1" start="10"><l
i class="c16 c17 c0"><span>To </span><span>run the app in your default browser (
probably </span><span class="c21"><a class="c14" href="https://www.google.com/in
tl/en/chrome/browser/">Chrome</a></span><span>), right-click </span><span class=
"c1">web/index.html </span><span>and choose </span><span class="c1">Run as JavaS
cript</span><span>. </span></li><li class="c16 c17 c0"><span>To run it in anothe
r browser:</span></li></ol><ol class="c10 lst-kix_hvjet9voiiio-2 start" start="1
"><li class="c16 c30 c0"><span>From the </span><span class="c1">Run</span><span>
menu, choose </span><span class="c1">Manage Launches</span><span>.</span><
/li><li class="c16 c30 c0"><span>Click the gray world button (to the left of the
big </span><span class="c38 c1">red X</span><span>) to create a new </span><spa
n>dart2js</span><span> launch.</span><span><br></span><img height="206" src
="images/image13.png" width="397"></li><li class="c16 c30 c0"><span>Enter inform
ation for the launch. For example:<br>▸ Change “New launch” to
</span><span class="c1">Writer in Firefox</span><span class="c1"><br></span><sp
an>▸ For the HTML file, enter </span><span class="c1">/io-2013-codelab-fin
ished/web/index.html</span></li></ol><p class="c30 c0"><span>▸ </span><spa
n>Uncheck “Use system default browser”, and select the browser you n
eed. For example, you might set the Browser field to </span><span class="c1">/Ap
plications/Firefox.app</span></p><p class="c30 c0"><img height="437" src="images
/image35.png" width="640"></p><ol class="c10 lst-kix_hvjet9voiiio-2" start="4"><
li class="c16 c30 c0"><span>Click </span><span class="c1">Run</span><span>. Your
app should look the same as it did in Dartium and your default browser:<br></sp
an><img height="261" src="images/image24.png" width="495"><span><br>From now on,
you can use the little arrow next to the Run button </span><img height="16" src
="images/image04.png" width="16"><span> to choose the launch you want to us
e.</span></li></ol><p class="c0 c30"><img height="175" src="images/image27.png"
width="593"></p><p class="c30 c6 c0"><span></span></p><h3 class="c0"><a name="h.
yoqjazd1uxez"></a><span>Debug the running app</span></h3><p class="c6 c0"><span>
</span></p><p class="c0"><span>The easiest way to debug a Dart app is with Dart
Editor and Dartium. Try this:</span></p><p class="c6 c0"><span></span></p><ol cl
ass="c10 lst-kix_m8zky1oy6k60-0 start" start="1"><li class="c16 c11 c0"><span>Op
en </span><span class="c1">web/app.dart</span><span> in Dart Editor. (Doubl
e-click it in the Files view.)</span></li><li class="c16 c11 c0"><span>In </span
><span>app.dart</span><span>, find the </span><span>createDocument</span><span>(
) function (line 34).<br></span><span class="c15">Trick: </span><span class="c15
">Right-click </span><span class="c15">in the Editor pane and choose </span><spa
n class="c1 c15">Outline File</span><span class="c15">. Then click </span><span
class="c1 c15">createDocument</span><span class="c15">.</span></li></ol><p class
="c11 c0"><img height="271" src="images/image40.png" width="389"><span> &n
bsp; </span><img height="218" src="images/image23.png" width="368"></p><ol class
="c10 lst-kix_m8zky1oy6k60-0" start="3"><li class="c16 c11 c0"><span>Set a break
point in the function by double-clicking the gray bar </span><span>to the left o
f “void createDocument() ...”</span><span>.</span></li></ol><p class
="c11 c0"><img height="123" src="images/image02.png" width="351"></p><ol class="
c10 lst-kix_m8zky1oy6k60-0" start="4"><li class="c16 c11 c0"><span>Stop</span><s
pan> the app if it’s already running. You can close the browser windo
w the app is running in or click the </span><span class="c1 c38">red</span><span
> stop button in Dart Editor.</span></li></ol><p class="c11 c0"><img height
="66" src="images/image11.png" width="280"></p><ol class="c10 lst-kix_m8zky1oy6k
60-0" start="5"><li class="c16 c11 c0"><span>Run the app in </span><span>Dartium
</span><span>. If you are using the launches menu, choose the launch with the mi
ni </span><span class="c1 c50">blue</span><span> Chromium icon.</span><img
height="140" src="images/image39.png" width="441"></li><li class="c16 c11 c0"><s
pan>Get the app to hit the breakpoint.</span></li></ol><ol class="c10 lst-kix_pa
6lflf2amnu-1 start" start="1"><li class="c16 c17 c0"><span>If you do not have an
y documents saved, the app hits the breakpoint on startup because it needs to cr
eate a new document to begin with.</span></li><li class="c16 c17 c0"><span>If th
e app starts up without hitting the breakpoint, c</span><span>reate a new</span>
<span> </span><span>document by clicking the + button.<br>The app hits the
breakpoint.</span></li></ol><ol class="c10 lst-kix_m8zky1oy6k60-0" start="7"><li
class="c16 c11 c0"><span>In the Debugger pane, open </span><span class="c1">top
-level </span><span>and then click the </span><span class="c1">documents</span><
span> variable (</span><span class="c15">not the </span><span class="c1 c15
">document</span><span class="c15"> variable)</span><span>. It’</span
><span>s an array of Document objects.</span><span> In the image below, the
array contains three Document objects.</span></li></ol><p class="c11 c0"><img h
eight="419" src="images/image15.png" width="345"></p><ol class="c10 lst-kix_m8zk
y1oy6k60-0" start="8"><li class="c16 c11 c0"><span>Use F5 or click the “St
ep Into” icon.</span></li></ol><p class="c11 c0"><img height="66" src="ima
ges/image05.png" width="280"><span><br></span><span>Whoops, now you’re in
library code!</span></p><ol class="c10 lst-kix_m8zky1oy6k60-0" start="9"><li cla
ss="c16 c11 c0"><span>Use F7 or the</span><span> “Step Return”
icon</span><span> to get back into app.dart code.</span></li></ol><p class=
"c11 c0"><img height="66" src="images/image25.png" width="280"></p><ol class="c1
0 lst-kix_m8zky1oy6k60-0" start="10"><li class="c16 c11 c0"><span>In the Debugge
r pane, look at the </span><span class="c1">doc</span><span> variable, whic
h is an instance of Document.</span></li><li class="c16 c11 c0"><span>Use F6 or
“Step Over” to get to the next line of code.</span></li></ol><p clas
s="c11 c0"><img height="66" src="images/image08.png" width="280"></p><ol class="
c10 lst-kix_m8zky1oy6k60-0" start="12"><li class="c16 c11 c0"><span>Look at the
top-level documents variable again. The array contains one more item than it did
before.</span><img height="315" src="images/image28.png" width="277"></li><li c
lass="c16 c11 c0"><span>Continue </span><span>playing with the debugger</span><s
pan>.</span></li></ol><p class="c0"><span><br></span><span class="c1">Note: </sp
an><span>Don’t open Developer Tools in Dartium while you’re debuggin
g. Due to a bug, this crashes the debugger.</span></p><h1 class="c0 c3"><a name=
"h.m0iq4b5hbsv5"></a></h1><hr style="page-break-before:always;display:none;"><h1
class="c3 c0"><a name="h.iwp6w76ozn91"></a></h1><h1 class="c12 c0"><a name="h.m
kmyy8842ats"></a><span>Overview: A visual summary of what you’ll be doing<
/span></h1><p class="c6 c0"><span></span></p><a href="#" name="52d6a0f8e4829fea7
de3b1d33f961a48fdaa7f9a"></a><a href="#" name="0"></a><table cellpadding="0" cel
lspacing="0" class="c13"><tbody><tr><td class="c25"><p class="c42 c5 c0 c7"><spa
n>Begin with skeletal app</span></p></td><td class="c28"><p class="c4 c0"><img h
eight="365" src="images/image31.png" width="344"><span> </span></p></td></t
r><tr><td class="c25"><p class="c42 c5 c0 c7"><span>Add document word count to t
he footer</span></p></td><td class="c28"><p class="c4 c0"><img height="361" src=
"images/image29.png" width="341"></p></td></tr><tr><td class="c25"><p class="c42
c5 c0 c7"><span>Create side bar</span></p></td><td class="c28"><p class="c4 c0"
><img height="365" src="images/image14.png" width="344"></p></td></tr><tr><td cl
ass="c25"><p class="c42 c5 c0 c7"><span>Add the ability to create, select, and <
/span><span>delete</span><span> documents</span></p></td><td class="c28"><p
class="c4 c0"><img height="326" src="images/image17.png" width="359"></p></td><
/tr><tr><td class="c25"><p class="c42 c5 c0 c7"><span>Add search filter</span></
p></td><td class="c28"><p class="c4 c0"><img height="317" src="images/image09.pn
g" width="359"></p></td></tr><tr class="c22"><td class="c25"><p class="c5 c0 c7
c42"><span>Add local storage (provides document persistence between invocations)
</span></p></td><td class="c28"><p class="c4 c0"><img height="314" src="images/i
mage21.png" width="355"></p></td></tr><tr class="c22"><td class="c25"><p class="
c42 c5 c0 c7"><span>Optimize layout for mobile devices</span></p></td><td class=
"c28"><p class="c0 c4"><span>Index </span><img height="197" src="images/image00.
png" width="253"><span> Contents </span><img height="198" src="imag
es/image36.png" width="254"></p></td></tr></tbody></table><p class="c6 c0"><span
></span></p><h1 class="c0 c8"><a name="h.cpkpyn1nw7g"></a></h1><h1 class="c0"><a
name="h.ymc534ugdysm"></a><span>Step 1: Begin with a skeletal app, add the word
count to the footer using data binding</span></h1><p class="c6 c0 c7"><span></s
pan></p><p class="c0 c7"><span>Now that you have Dart Editor set up and understa
nd how the application works, let’s rebuild the app step-by-step, starting
with a skeletal version. The code you downloaded from github contains a directo
ry for each completed step of the code lab. So if necessary, you can begin each
step with a correct version of the app. In the walkthrough portion of this step,
you begin with the code in </span><span class="c1">io-2013-codelab-step1</span>
<span>.</span></p><h2 class="c0"><a name="h.uvnvnl2dm2ai"></a><span>What you wil
l learn</span></h2><p class="c6 c0 c7"><span></span></p><p class="c0"><span>You
can display the value of a Dart variable on your web page directly within the HT
ML code. When the value of the variable changes within the Dart program, the UI
automatically updates.</span><span> This capability, called one-way data bi
nding, is implemented by the Web UI public package. The Writer application uses
one-way data binding to display the current document’s word count in the f
ooter of the page. </span></p><h2 class="c0"><a name="h.6jc7oqfnek9i"></a><span>
Concepts overview</span></h2><p class="c6 c0"><span></span></p><ol class="c10 ls
t-kix_t9jkz28ln50j-0 start" start="1"><li class="c16 c11 c0 c7"><span>Import pub
lic packages.</span></li><li class="c16 c11 c0"><span>Libraries.</span></li><li
class="c16 c11 c0 c7"><span>One-way data binding with Web UI.</span></li><li cla
ss="c16 c11 c0 c7"><span>Getters.</span></li></ol><h3 class="c0"><a name="h.lpju
flgo3igm"></a><span>Import public packages</span></h3><p class="c6 c0 c7"><span>
</span></p><p class="c0"><span>A </span><span>package</span><span> is a dis
tributable bundle of code, often containing one or more libraries. The pub packa
ge manager helps you install and manage 3rd party packages. Dart’s public
repository </span><span class="c21"><a class="c14" href="http://pub.dartlang.org
">pub.dartlang.org</a></span><span> hosts many useful packages, including t
he Web UI package, which you need later for this step. The code below is a </spa
n><span class="c15">package import</span><span>, which </span><span>includes the
Web UI package in a Dart file.</span></p><p class="c6 c0"><span></span></p><p c
lass="c11 c0"><span class="c2">import 'package:web_ui/web_ui.dart'; &nbs
p;// import the Web UI package</span></p><p class="c6 c0"><span></span></p><p cl
ass="c0"><span class="c1 c33">Libraries</span></p><p class="c6 c0"><span></span>
</p><p class="c0"><span>Dart code can be organized into </span><span class="c15"
>libraries</span><span>. A library is a namespace that can contain top-level fie
lds, top-level functions, classes, and more. A library can import other librarie
s, and be imported into other libraries.</span></p><p class="c6 c0"><span></span
></p><p class="c0"><span>The Dart core libraries start with "dart:", s
uch as dart:core, dart:collection, and dart:async. These libraries come from the
Dart SDK. For example, to import the core async library, simply add this to the
top of your library:</span></p><p class="c6 c0"><span></span></p><p class="c11
c0"><span class="c2">import 'dart:async'; // an </span><span class
="c2">important</span><span class="c2"> Dart core library</span></p><p clas
s="c6 c0"><span></span></p><p class="c0"><span>A library can be split across mul
tiple files, also known as </span><span class="c15">parts</span><span>. We don&#
39;t show an example of parts in the code lab.</span></p><p class="c6 c0 c7"><sp
an></span></p><p class="c0 c7"><span class="c33 c1">One-way data binding with We
b UI</span></p><p class="c6 c0 c7"><span></span></p><p class="c0"><span>The Web
UI package implements one-way data binding, which provides dynamic and automatic
synchronization between an HTML element and an observable Dart variable. The </
span><span>@observable</span><span> meta-data annotation marks a variable t
o be observed. The Web UI compiler, </span><span>dwc</span><span>, generates ext
ra code that notes changes to an observable variable and keeps the UI in sync wi
th those changes. Here is an observable string:</span></p><p class="c6 c0"><span
></span></p><p class="c11 c0"><span class="c2">@observable String aStringOfNote
= 'Hello, World!';</span></p><p class="c6 c0 c7"><span></span></p><p cla
ss="c0 c7"><span>The value of an observable variable can be embedded in an HTML
page, by including the variable name between </span><span>double curly braces, {
{</span><span class="c15">name_of_observable</span><span class="c15">_var</span>
<span>}},</span><span> within normal HTML code, </span><span>as shown:</spa
n></p><p class="c6 c0 c7"><span></span></p><p class="c11 c0 c7"><span class="c2"
><p> {{aStringOfNote}} </p></span></p><p class="c6 c0 c7"><span></sp
an></p><p class="c0 c7"><span>Later, if the value of the variable changes in the
Dart code, the web page automatically updates to reflect the new value of the v
ariable. For example, after the following line of Dart code runs, the paragraph
element changes from </span><span>“Hello, World!”</span><span>
to </span><span>“Goodbye, cruel world!”</span></p><p class="c6 c0 c7
"><span></span></p><p class="c11 c0"><span class="c2">aStringOfNote = 'Hello
, Universe!';</span></p><p class="c6 c0"><span></span></p><h3 class="c9 c0">
<a name="h.2xeueasygjb"></a><span>Getters</span></h3><p class="c6 c0"><span></sp
an></p><p class="c0"><span>Dart allows you to create getters and setters that lo
ok like fields when used. </span><span>This means your design can start with sim
ple fields, and evolve over time to use getters and setters. No more defensive a
nd preemptive encapsulation!</span></p><p class="c6 c0"><span></span></p><p clas
s="c0"><span>Here is an </span><span>example</span><span>. Consider a simple </s
pan><span>Car</span><span> class with a single field called </span><span>is
Running</span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c11
c0"><span class="c2">class Car {</span></p><p class="c11 c0"><span class="c2">&n
bsp; bool isRunning;</span></p><p class="c11 c0"><span class="c2">}</span></p><p
class="c6 c11 c0"><span class="c2"></span></p><p class="c11 c0"><span class="c2
">main() {</span></p><p class="c11 c0"><span class="c2"> var car = new Car
();</span></p><p class="c0 c11"><span class="c2"> print(car.isRunning);</s
pan></p><p class="c11 c0"><span class="c2">}</span></p><p class="c6 c0"><span></
span></p><p class="c0"><span>Imagine that you later add an </span><span>Engine</
span><span> field to </span><span>Car</span><span>. </span><span>Engine</sp
an><span> knows if it's running, thereby making </span><span>Car</span>
<span>'s </span><span>isRunning</span><span> field obsolete. Do you bre
ak existing users? No way! Use a getter method!</span></p><p class="c6 c0"><span
></span></p><p class="c11 c0"><span class="c2">class Engine {</span></p><p class
="c11 c0"><span class="c2"> bool isRunning;</span></p><p class="c11 c0"><s
pan class="c2">}</span></p><p class="c6 c11 c0"><span class="c2"></span></p><p c
lass="c11 c0"><span class="c2">class Car {</span></p><p class="c11 c0"><span cla
ss="c2"> Engine engine;</span></p><p class="c6 c11 c0"><span class="c2"></
span></p><p class="c11 c0"><span class="c2"> bool get isRunning => engi
ne.isRunning;</span></p><p class="c11 c0"><span class="c2">}</span></p><p class=
"c6 c11 c0"><span class="c2"></span></p><p class="c11 c0"><span class="c2">main(
) {</span></p><p class="c11 c0"><span class="c2"> var car = new Car();</sp
an></p><p class="c11 c0"><span class="c2"> print(car.isRunning);</span></p
><p class="c11 c0"><span class="c2">}</span></p><p class="c6 c0"><span></span></
p><p class="c0"><span>Notice how the usage of the </span><span>car.isRunning</sp
an><span> is the same with both the getter and the field.</span><span> 
;The users of the </span><span>Car</span><span> class did not have to updat
e their code when you changed the implementation of </span><span>Car</span><span
>.</span></p><h2 class="c0 c12"><a name="h.50b5692q1fjp"></a><span>Walkthrough</
span></h2><h3 class="c9 c0"><a name="h.sv7ivpmaxg6a"></a><span>Open the code for
step </span><span>1</span></h3><p class="c6 c0"><span></span></p><p class="c0">
<span>Close the </span><span class="c1">io-2013-codelab-finished</span><span>&nb
sp;directory: right-click on the folder in the Files view of Dart Editor and sel
ect </span><span class="c1">Close Folder </span><span>from the menu.</span></p><
p class="c6 c0"><span></span></p><p class="c0"><img height="342" src="images/ima
ge12.png" width="448"></p><p class="c6 c0"><span></span></p><p class="c0"><span>
Open </span><span class="c1">io-2013-codelab-step1</span><span> with </span
><span class="c1">File > Open Existing Folder</span><span> as you did wi
th the finished directory in the previous step.</span></p><p class="c0"><span cl
ass="c1">IMPORTANT</span><span>: Make sure you open </span><span class="c1">io-2
013-codelab-</span><span class="c1">step1</span><span> and </span><span cla
ss="c1">not</span><span> its parent directory. Dart Editor analyzes all of
the code in the open folder. For this code lab, it is more efficient to open jus
t the directory for your active step rather than the top-level directory contain
ing all of the steps.</span></p><p class="c0"><img height="355" src="images/imag
e38.png" width="800"></p><p class="c6 c11 c0"><span></span></p><p class="c0"><sp
an>Dart Editor </span><span>installs</span><span class="c15"> </span><span>
the app’s dependencies and builds it.</span></p><p class="c6 c0"><span></s
pan></p><h3 class="c9 c0"><a name="h.wlekvj90m4yq"></a><span>Run the app</span><
/h3><p class="c6 c0"><span></span></p><p class="c0"><span>Right click </span><sp
an class="c1">web/index.html</span><span> and choose </span><span class="c1
">Run in Dartium...</span><span>. The app should initially look like this:</span
></p><p class="c6 c0"><span></span></p><p class="c0"><img height="379" src="imag
es/image03.png" width="428"></p><h3 class="c0"><a name="h.q7zj6hd0zod0"></a><spa
n>Import the Web UI package</span></h3><p class="c6 c0"><span></span></p><p clas
s="c0"><span>The </span><span class="c1">lib/document.dart</span><span> fil
e contains the code that implements a plain text document. The Document keeps tr
ack of its creation time, has a title, and text content. In this step, you add a
getter to the Document class that calculates the number of words in the documen
t.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Double click
</span><span class="c1">lib/document.dart</span><span> to open the file.</s
pan></p><p class="c6 c0 c7"><span></span></p><p class="c0"><span>Near the top of
the file, notice this comment. </span></p><p class="c11 c5 c0"><span class="c2"
>…</span></p><p class="c11 c5 c0"><span class="c2">/// STEP 1: Import the
Web UI package</span></p><p class="c11 c5 c0"><span class="c2">…</span><
/p><p class="c6 c11 c5 c0"><span></span></p><p class="c0 c7"><span>Comments of t
his style appear throughout the code, clearly marking what to do for each number
ed step. The </span><span class="c1">lib/document.dart</span><span> file ha
s three comments for step one.</span></p><p class="c6 c0 c7"><span></span></p><p
class="c0 c7"><span>Beneath</span><span> the comment</span><span>, type in
the import directive for including the Web UI package. In the gray code boxes t
hroughout this code lab, the code you need to add is </span><span class="c35 c1"
>bold</span><span>. Code you need to delete is</span><span> </span><span cl
ass="c19">struck through</span><span>.</span></p><p class="c6 c0"><span></span><
/p><a href="#" name="1eb03ef741de58bf36f691312367c0d266536461"></a><a href="#" n
ame="1"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class=
"c22"><td class="c20"><p class="c5 c0"><span class="c2">// lib/document.dart</sp
an></p><p class="c5 c0"><span class="c2">…</span></p><p class="c0"><span
class="c2">/// STEP 1: Import the Web UI package.</span></p><p class="c0"><span
class="c2 c1">import 'package:web_ui/web_ui.dart';</span></p><p class="c
5 c0"><span class="c2">…</span></p></td></tr></tbody></table><p class="c6
c0"><span></span></p><h3 class="c0"><a name="h.84pihwlpka7h"></a><span>Mark the
Document class with @observable</span></h3><p class="c6 c0 c7"><span></span></p
><p class="c0 c7"><span>Find the next </span><span>STEP 1</span><span> comm
ent; it appears a few lines below the import directive you just </span><span>e</
span><span>n</span><span>tered</span><span>.</span></p><p class="c11 c5 c0"><spa
n class="c2">…</span></p><p class="c11 c0"><span class="c2">/// STEP 1: M
ark the class with @observable.</span></p><p class="c11 c5 c0"><span class="c2">
…</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Mark</s
pan><span> the Document class with the </span><span>@observable</span><span
> meta-data annotation. This makes all fields of an instance of the Documen
t class observable.</span></p><p class="c6 c0"><span></span></p><a href="#" name
="5c00fe5847c5c44c6a1bc33519c44743fce819af"></a><a href="#" name="2"></a><table
cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c2
0"><p class="c5 c0"><span class="c2">// lib/document.dart</span></p><p class="c5
c0"><span class="c2">…</span></p><p class="c0"><span class="c2">/// STEP
1: Mark the class with @observable.</span></p><p class="c0"><span class="c2 c1"
>@</span><span class="c2 c1">observable</span></p><p class="c0"><span class="c2"
>class Document {</span></p><p class="c5 c0"><span class="c2">…</span></p
></td></tr></tbody></table><p class="c6 c0 c7"><span></span></p><h3 class="c0 c9
"><a name="h.gbd8omocl705"></a><span>Calculate the word count for the current do
cument</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>To find
the final task for step 1 in the </span><span class="c35 c1">lib/document.dart</
span><span> file,</span><span> s</span><span>earch for “STEP 1&r
dquo; and locate the comment for the wordCount method in the code. </span></p><p
class="c11 c5 c0"><span class="c2">…</span></p><p class="c11 c0"><span c
lass="c2"> /// STEP 1: Add </span><span class="c2">wordCount</span><span c
lass="c2"> method.</span></p><p class="c11 c5 c0"><span class="c2">…
</span></p><p class="c6 c11 c5 c0"><span></span></p><p class="c0"><span>To searc
h in Dart Editor, go to the </span><span class="c1">Edit</span><span> menu
and choose </span><span class="c1">Find/Replace...</span><span>. Then type &ldqu
o;STEP 1” into the text field and click </span><span class="c1">Find</span
><span>.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Under t
he comment, a</span><span>dd</span><span> the code for a new getter called
wordCount. The getter uses the RegExp class, which is provided in the dart:core
library, to calculate how many words are in the document. The return value of th
is getter is embedded in the </span><span>HTM</span><span>L in the next step.</s
pan></p><p class="c6 c0"><span></span></p><a href="#" name="4f5973d69f8d5a7e7245
aa340d736601c6085760"></a><a href="#" name="3"></a><table cellpadding="0" cellsp
acing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><s
pan class="c2">// lib/document.dart</span></p><p class="c5 c0"><span class="c2">
…</span></p><p class="c5 c0"><span class="c2"> /// STEP 1: Add word
Count method.</span></p><p class="c5 c0"><span class="c2 c1"> /**</span></
p><p class="c5 c0"><span class="c2 c1"> * Number of words in t
he document.</span></p><p class="c5 c0"><span class="c2 c1"> *</span
></p><p class="c5 c0"><span class="c2 c1"> * A "word"
; is a string of characters separated by a space or a newline.</span></p><p clas
s="c5 c0"><span class="c2 c1"> */</span></p><p class="c5 c0"><span c
lass="c2 c1"> String get wordCount {</span></p><p class="c5 c0"><span clas
s="c2 c1"> int count = new RegExp(r"(\w|\')+").allMat
ches(_content).length;</span></p><p class="c5 c0"><span class="c2 c1"> &nb
sp; if (count > 1) {</span></p><p class="c5 c0"><span class="c2 c1"> &n
bsp; return '$count words';</span></p><p class="c5 c0"><span clas
s="c2 c1"> } else if (count == 1) {</span></p><p class="c5 c0"><spa
n class="c2 c1"> return '$count word';</span></p><p
class="c5 c0"><span class="c2 c1"> }</span></p><p class="c5 c0"><sp
an class="c2 c1"> return 'No words - Yo, Yo write something...&
#39;;</span></p><p class="c5 c0"><span class="c2 c1"> }</span></p><p class
="c5 c0"><span class="c2">…</span></p></td></tr></tbody></table><h3 class
="c9 c27 c0"><a name="h.ionqzezeva8k"></a></h3><p class="c0"><span>Save the file
using </span><span class="c1">File > Save</span><span>. You have completed a
ll of the step 1 tasks in the </span><span class="c1">lib/document.dart </span><
span>file.</span></p><p class="c6 c0"><span></span></p><h3 class="c9 c0"><a name
="h.tvdyvkmtr48d"></a><span>Embed the word count in the footer of the web page.<
/span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>The HTML page t
hat hosts the Writer app is </span><span class="c1">web/index.html</span><span>.
Let’s add the word count to the footer of the page.</span></p><p class="c
6 c0"><span></span></p><p class="c0"><span>Double click</span><span> </span
><span class="c1">web/index.html </span><span>to open it.</span></p><p class="c6
c0"><span></span></p><p class="c0"><span>Search for “STEP 1” and lo
cate the code for the footer.</span></p><p class="c6 c0"><span></span></p><p cla
ss="c0"><span>Add the code to d</span><span>isplay the word count in the footer
of the document</span><span>, using the double curly bracket syntax.</span></p><
p class="c6 c0"><span></span></p><a href="#" name="f6fe9061c4c563e8371a0634aedb7
8d26f02c3d1"></a><a href="#" name="4"></a><table cellpadding="0" cellspacing="0"
class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class
="c2">// web/index.html</span></p><p class="c5 c0"><span class="c2">…</sp
an></p><p class="c5 c0"><span class="c2"> <div cla
ss="footer"></span></p><p class="c6 c5 c0"><span class="c2"></span>
</p><p class="c5 c0"><span class="c2"> <!--
STEP 1: Show the current word count. --></span></p><p class="c5 c0"><span cl
ass="c2 c1"> {{activeDocument.wordCount}}</spa
n></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span cla
ss="c2"> </div></span></p><p class="c5 c0"><spa
n class="c2">…</span></p></td></tr></tbody></table><p class="c6 c0"><span
class="c2"></span></p><p class="c0"><span>Save your changes with </span><span c
lass="c1">File > Save</span><span>. You have completed all of the step 1 task
s.</span></p><h3 class="c9 c0"><a name="h.lz56mhvll7k0"></a><span>Run the revise
d version of the app.</span></h3><p class="c6 c0 c7"><span></span></p><p class="
c0 c7"><span>Run the app again</span><span>, and type in the document. As you ty
pe, the word count updates at the bottom of the page:</span></p><p class="c0 c7"
><img height="390" src="images/image22.png" width="539"></p><p class="c6 c0"><sp
an></span></p><p class="c0"><span>Congratulations! You’ve completed the fi
rst step.</span></p><h1 class="c8 c0"><a name="h.nxg0ahyrlxhi"></a></h1><hr styl
e="page-break-before:always;display:none;"><h1 class="c8 c0"><a name="h.bl9vt9tu
eqdf"></a></h1><h1 class="c0"><a name="h.bdr5squ6r500"></a><span>Step 2: Create
a sidebar to list the documents</span></h1><p class="c6 c0 c7"><span></span></p>
<p class="c0 c7"><span>The family of Web Component specifications, such as custo
m elements and HTML imports, give the web developer real encapsulation of the st
ructure, style, and behaviors of elements in the DOM. With help from the Web UI
package, you can make your own tags!</span></p><p class="c6 c0 c7"><span></span>
</p><p class="c0 c7"><span>In this step, using the </span><span><element>
tag,</span><span> you create a custom element to implement the behavior and
view of a sidebar that lists the documents. Then, you use the new custom elemen
t to create a sidebar in the Writer app.</span></p><h2 class="c0"><a name="h.k74
i547r3lz2"></a><span>What you will learn</span></h2><ol class="c10 lst-kix_kvgsl
0s9rzo4-0 start" start="1"><li class="c16 c11 c0"><span>Define custom elements.<
/span></li><li class="c16 c11 c0"><span>Import HTML into HTML.</span></li><li cl
ass="c16 c11 c0"><span>Use custom elements.</span></li><li class="c16 c11 c0"><s
pan>One-line functions.</span></li></ol><h2 class="c0"><a name="h.q4bjn1j36hoo">
</a><span>Concepts overview</span></h2><h3 class="c0"><a name="h.mvtayj1q6so5"><
/a><span>Define c</span><span>ustom elements</span></h3><p class="c6 c0 c7"><spa
n></span></p><p class="c0 c7"><span>A custom </span><span>element </span><span>e
xtends the lexicon of HTML</span><span>.</span><span> A custom element defi
nition encapsulates the structure (the HTML), styles (CSS), and behavior (Dart o
r JavaScript code) of a new kind of element. For example, you can extend </span>
<span><button></span><span> to create </span><span>a</span><span>&nbs
p;</span><span><fancy-button></span><span> tag, with new custom behav
iors and appearance.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0
c7"><span>By convention, custom element names begin with </span><span>x-. F</sp
an><span>or example </span><span><x-flower></span><span>. Custom element n
ames </span><span class="c15">must</span><span> have a hyphen (-) in their
name, such as <fancy-button>. Following the </span><span>x-</span><span>&n
bsp;naming convention ensures that your custom element names always have a
hyphen.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>T
he new </span><span><element></span><span> tag allows you to declare
a new element (using HTML to declare HTML, I like it!) Here is an example:</span
></p><p class="c6 c0 c7"><span></span></p><p class="c11 c0 c7"><span class="c2">
<element name="x-comment" extends="div" constructor="
;CommentComponent"></span></p><p class="c11 c0 c7"><span class="c2">&nbs
p; <template></span></p><p class="c11 c0 c7"><span class="c2">  
; <div class="name">{{name}}</div></span></p><p class="c11
c0 c7"><span class="c2"> <div class="comment"><
content></content></div></span></p><p class="c11 c0 c7"><span cla
ss="c2"> </template></span></p><p class="c11 c0 c7"><span class="c2"
> </span><span class="c2"> <script type="application/dart"
;></span></p><p class="c11 c0 c7"><span class="c2"> import '
package:web_ui/web_ui.dart';</span></p><p class="c11 c0 c7"><span class="c2"
> class CommentComponent extends WebComponent {</span></p><p class=
"c11 c0 c7"><span class="c2"> String name;</span></p><p clas
s="c11 c0 c7"><span class="c2"> String comment;</span></p><p
class="c11 c0 c7"><span class="c2"> }</span></p><p class="c11 c0 c
7"><span class="c2"> </script></span><sup><a href="#cmnt1" name="cmn
t_ref1">[a]</a></sup></p><p class="c11 c0 c7"><span class="c2"></element><
/span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>The elemen
t tag defines a new kind of HTML element. To create an instance of a custom elem
ent use the element name as you would any other HTML tag. To create an instance
of the element defined above, write <x-comment>. A custom element instance
</span><span class="c15">must</span><span> have a closing tag </x-comme
nt>.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Wi
thin the template definition above, notice the <content> tag. When an <
x-comment> element is instantiated, you can use other HTML elements between <
/span><span><x-comment> and </x-comment>, a paragraph, a span, a lis
t, for example. Those elements replace the <content> tag for that instanti
ation. </span><span>Using attributes, you can filter for specific elements to re
place the <content> tag.</span></p><h3 class="c0"><a name="h.cu2zzp8exzxx"
></a><span>Import HTML into HTML</span></h3><p class="c6 c0"><span></span></p><p
class="c0"><span>To use a custom element, you often </span><span class="c15">im
port</span><span> the HTML that contains the </span><span><element></
span><span> tag. Luckily, HTML has a method for including resources: the </
span><span><link></span><span> tag. Here is an example:</span></p><p
class="c6 c0"><span></span></p><p class="c11 c0"><span class="c2"><link rel=&
quot;import" href="comment_component.html"></span></p><p class
="c6 c0"><span></span></p><p class="c0"><span>T</span><span>he </span><span><
link></span><span> tag must appear in the </span><span><head></spa
n><span> of the document.</span></p><p class="c6 c0"><span></span></p><h3 c
lass="c0"><a name="h.9ahc7aijhm6g"></a><span>Use custom elements</span></h3><p c
lass="c6 c0"><span></span></p><p class="c0"><span>Once you have imported the cus
tom element, you can use it in your document. Here is an example:</span></p><p c
lass="c6 c0"><span></span></p><p class="c11 c0"><span class="c2"><ul></spa
n></p><p class="c11 c0"><span class="c2"> <li><x-comment name=&qu
ot;Bob">I totally agree!</x-comment></li></span></p><p class
="c11 c0"><span class="c2"> <li><x-comment name="Alice"
>I totally disagree!</x-comment></li></span></p><p class="c11 c0"
><span class="c2"></ul></span></p><h3 class="c9 c0"><a name="h.w7is3otkoy1
o"></a><span>One-line functions</span></h3><p class="c6 c0"><span></span></p><p
class="c0"><span>Dart makes it easy and terse to write one-line functions with t
he "fat arrow" syntax. Here is an example:</span></p><p class="c6 c0">
<span></span></p><p class="c11 c0"><span class="c2">int nextNumber() => i++;<
/span></p><p class="c6 c0"><span></span></p><p class="c0"><span>The above code i
s syntactic sugar for:</span></p><p class="c6 c0"><span></span></p><p class="c11
c0"><span class="c2">int nextNumber() {</span></p><p class="c11 c0"><span class
="c2"> return i++;</span></p><p class="c11 c0"><span class="c2">}</span></
p><h2 class="c0"><a name="h.lx7xe3hizh5u"></a><span>Walkthrough</span></h2><h3 c
lass="c0"><a name="h.nnxh8c8g9rvf"></a><span>The custom element's file</span
></h3><p class="c6 c0"><span></span></p><p class="c0"><span>First, create a new
file for the custom element inside of the </span><span class="c1">web/</span><sp
an> directory.</span></p><p class="c6 c0"><span></span></p><ol class="c10 l
st-kix_57tjkabqizo2-0 start" start="1"><li class="c11 c0 c16"><span>Right-click
on the </span><span class="c1">web</span><span> directory and select "
</span><span class="c1">New File</span><span>".</span></li><li class="c16 c
11 c0"><span>Name this file "document_item.html". Dart Editor provides
some boilerplate code. Delete it.</span></li><li class="c16 c11 c0"><span>Open
</span><span class="c1">__for_later/document_item.html</span><span>, copy its co
ntents, and paste it into </span><span class="c1">web/document_item.html</span><
span>.</span></li></ol><p class="c6 c0"><span></span></p><h3 class="c9 c0"><a na
me="h.kvlk5fbt87kg"></a><span>Declare the custom element</span></h3><p class="c6
c0 c7"><span></span></p><p class="c0 c7"><span>Ensure you are working in </span
><span class="c1">web/document_item.html</span><span>, and add the following cod
e:</span></p><p class="c6 c0 c7"><span></span></p><a href="#" name="b009468215a0
c56688786bc71c4766d48ed7b514"></a><a href="#" name="5"></a><table cellpadding="0
" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c
5 c0 c7"><span class="c2">// web/document_item.html</span></p><p class="c5 c0 c7
"><span class="c2"><html><body></span></p><p class="c5 c0 c7"><span
class="c2"> <!-- STEP 2: Define a custom element. →</span></p><p c
lass="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="
c2 c1"> <element name="x-document-item" constructor="Doc
umentItem"</span></p><p class="c5 c0 c7"><span class="c2 c1">
extends="div" </span><span class="c2 c1">apply-author-styles</s
pan><span class="c2 c1">></span></p><p class="c6 c5 c0 c7"><span class="c2 c1
"></span></p><p class="c5 c0 c7"><span class="c2 c1"> <!-- STEP
2: Define the DOM template for our custom element --></span></p><p class="c5
c0 c7"><span class="c2 c1"> <template></span></p><p class="c6
c5 c0 c7"><span class="c2 c1"></span></p><p class="c5 c0 c7"><span class="c2 c1
"> </template></span></p><p class="c6 c5 c0 c7"><span class="
c2 c1"></span></p><p class="c5 c0 c7"><span class="c2 c1"> <!--
STEP 2: Add the script tag that defines this component's behaviour. --></
span></p><p class="c5 c0 c7"><span class="c2 c1"> <script type=&
quot;application/dart"></span></p><p class="c6 c5 c0 c7"><span class="c2
c1"></span></p><p class="c5 c0 c7"><span class="c2 c1"> </scrip
t></span></p><p class="c5 c0 c7"><span class="c2 c1"> </element><
/span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"
><span class="c2"></body></html></span></p><p class="c5 c0 c7"><span
class="c2">…</span></p></td></tr></tbody></table><p class="c18 c6 c0 c7"
><span class="c2"></span></p><p class="c0"><span>A few notes about the code abov
e:</span></p><p class="c6 c0"><span></span></p><ul class="c10 lst-kix_bnpbicbhbb
ru-0 start"><li class="c16 c11 c0"><span>The name of the element is </span><span
>x</span><span>-document-item</span><span>.</span></li><li class="c16 c11 c0"><s
pan>The custom element extends </span><span><div></span><span>. That is, <
/span><span>x-document-item</span><span> is a special kind of div.</span></
li><li class="c16 c11 c0"><span>Some behavior of the </span><span>x-document-ite
m</span><span> is implemented by a </span><span>Dart class named </span><sp
an>DocumentItem</span><span>. You will create and include this class below.</spa
n></li><li class="c16 c11 c0"><span>The </span><span>apply-author-styles</span><
span> attribute indicates that styles from the larger HTML document apply t
o the contents of the custom component.</span></li></ul><p class="c6 c0"><span><
/span></p><p class="c0"><span>Notice the </span><span><template></span><sp
an> tag inside of </span><span><element></span><span>. A custom eleme
nt can define its own structure with the </span><span><template></span><sp
an> tag. Fill in this template now.</span></p><h3 class="c0"><a name="h.l68
l6dl0jzre"></a><span>The template</span></h3><p class="c6 c0"><span></span></p><
p class="c0"><span>Add the code for the template as shown. Y</span><span>ou need
to also add the comments</span><span> for STEP 3 just as we have them in t
he code. You need the comments to orient yourself later when you implement Step
3.</span></p><p class="c6 c0"><span></span></p><a href="#" name="7042cc209fcf1d4
7ccfc4265721fd964e76e6f4f"></a><a href="#" name="6"></a><table cellpadding="0" c
ellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c
0"><span class="c2">// web/document_item.html</span></p><p class="c5 c0"><span c
lass="c2">…</span></p><p class="c5 c0"><span class="c2"> <
;!-- STEP 2: Define the DOM template for our custom element --></span></p><p
class="c5 c0"><span class="c2"> <template></span></p><p class
="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c1 c2">&nb
sp; </span><span class="c2 c1"><!-- STEP 3: On click, select th
e document. --></span></p><p class="c5 c0"><span class="c2 c1">
<div class="item {{isActiveClass}}"></span></p><p class="
c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&n
bsp; <div class="title">{{title}}<
;/div></span></p><p class="c5 c0"><span class="c2 c1"> &n
bsp; <div class="modified">{{modified}}</div></span
></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span c
lass="c2 c1"> <!-- STEP 3: Add delete butto
n. --></span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class=
"c5 c0"><span class="c2 c1"> </div></span></p><p class
="c5 c0"><span class="c2"> </template></span></p><p class="c5
c0"><span class="c2">…</span></p></td></tr></tbody></table><p class="c6
c0"><span></span></p><p class="c0"><span>You can use one-way data binding in a t
emplate. Each time a custom element is instantiated, an instance of the Dart cla
ss is created and associated with the custom element. Data bindings in the templ
ate are bound to fields in that Dart instance. For example, </span><span>{{title
}}</span><span> binds to a field from the instance of </span><span>Document
Item that is created when an element of this type is created. </span><span>It
9;s a good idea to move all logic into the Dart class, and just use fields and g
etters for the HTML.</span></p><p class="c6 c0"><span></span></p><p class="c0"><
span>Speaking of the class, let's add that now!</span></p><p class="c6 c0"><
span></span></p><p class="c0"><span class="c33 c1">The script</span></p><p class
="c6 c0"><span></span></p><p class="c0"><span>Use a </span><span><script><
/span><span> tag to declare the Dart class that goes with the custom elemen
t. The Dart class contains any state and behavior applicable to the view.</span>
</p><p class="c6 c0"><span></span></p><p class="c0"><span>Ensure you are still e
diting </span><span class="c1">web/document_item.html</span><span>, and add the
following code inside the <script> and </script> tags:</span></p><p
class="c6 c0"><span></span></p><a href="#" name="38b92f10e28849103dac69976e50632
7495960f7"></a><a href="#" name="7"></a><table cellpadding="0" cellspacing="0" c
lass="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="
c2">// web/document_item.html</span></p><p class="c5 c0"><span class="c2">&helli
p;</span></p><p class="c5 c0"><span class="c2"> <!-- STEP 2: Add
the script tag that defines this component's behaviour. --></span></p><p
class="c5 c0"><span class="c2"> <script type="application/
dart"></span></p><p class="c5 c0"><span class="c2 c1"> &nbs
p; import 'package:web_ui/web_ui.dart';</span></p><p class="c6 c5 c0"><s
pan class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">
import 'package:writer/document.dart';</span></p><p class="c5 c0"
><span class="c2 c1"> import 'app.dart' as app;</spa
n></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span
class="c2 c1"> /**</span></p><p class="c5 c0"><span class="c
2 c1"> * This Dart class defines the behavior and</spa
n></p><p class="c5 c0"><span class="c2 c1"> * state of
the custom element.</span></p><p class="c5 c0"><span class="c2 c1">  
; */</span></p><p class="c5 c0"><span class="c2 c1"> &
nbsp; class DocumentItem extends WebComponent {</span></p><p class="c5 c0"><span
class="c2 c1"> Document </span><span class="c2 c1">d
oc</span><span class="c2 c1">;</span></p><p class="c5 c0"><span class="c2 c1">&n
bsp; </span></p><p class="c5 c0"><span class="c2 c1">
String get title => doc.title.isEmpty ? 'Untitled&#
39; : doc.title;</span></p><p class="c5 c0"><span class="c2 c1"> &n
bsp; </span></p><p class="c5 c0"><span class="c2 c1">
String get modified => </span><span class="c2 c1">dateFormat</span><s
pan class="c2 c1">.format(doc.modified);</span></p><p class="c5 c0"><span class=
"c2 c1"> </span></p><p class="c5 c0"><span class="c2
c1"> String get isActiveClass => doc == app.active
Document ? 'active</span><span class="c2 c1">' :</span><span class="c2 c
1"> '';</span></p><p class="c5 c0"><span class="c2 c1">  
; }</span></p><p class="c5 c0"><span class="c2"> </script
></span></p><p class="c5 c0"><span class="c2">…</span></p></td></tr></
tbody></table><p class="c6 c0"><span></span></p><p class="c0"><span class="c1">N
ote</span><span>: Dart Editor doesn't yet fully support Dart code embedded i
nside of </span><span><script></span><span> tags. For example, you ca
n't use code completion inside of a </span><span><script></span><span>
tag yet. We anticipate that the editor will have this functionality in tim
e for 1.0.</span></p><p class="c6 c0"><span class="c2"></span></p><p class="c0">
<span>A few notes about the code above:</span></p><ul class="c10 lst-kix_iqyc5gy
523tq-0 start"><li class="c16 c11 c0"><span>The </span><span>DocumentItem</span>
<span> class acts as a </span><span class="c15">View Model</span><span>, en
capsulating any state used by the view, and linking model classes like Document
to the view. We use getters for </span><span>title</span><span>, modified, and <
/span><span>isActiveClass</span><span> </span><span>because</span><span>&nb
sp;calling a getter is shorter than calling a method.</span></li><li class="c16
c11 c0"><span>A </span><span>DocumentItem</span><span> uses a </span><span>
Document</span><span> object, called </span><span>doc</span><span>, for its
data model. The </span><span>doc</span><span> field gets initialized when
the custom element gets instantiated. You’ll see this later when you add t
he sidebar in the HTML code.</span></li><li class="c16 c11 c0"><span>The </span>
<span>Document</span><span> class defines a top-level object, called </span
><span>dateFormat</span><span>, used to format the modified date. (Look at the b
ottom of </span><span class="c1">lib/document.dart</span><span> </span><spa
n>for the code that creates </span><span>dateFormat</span><span>.) The </span><s
pan>DateFormat</span><span> class is provided by the </span><span>intl</spa
n><span> package.</span></li></ul><p class="c6 c0"><span></span></p><p clas
s="c0"><span> Save your changes to </span><span class="c1">web/document_ite
m.html</span><span>.</span></p><h3 class="c0"><a name="h.pg2b8doo4y91"></a><span
>Import the custom element into the main HTML</span></h3><p class="c6 c0"><span>
</span></p><p class="c0"><span>To create instances of <x-document-item>, t
he main application's HTML needs to import the code that defines the custom
<x-document-item> tag. Luckily, HTML already has a mechanism to link to ot
her resources: the <link> tag!</span></p><p class="c6 c0"><span></span></p
><p class="c0"><span>Open </span><span class="c1">web/index.html</span><span>&nb
sp;and add the following code:</span></p><p class="c6 c0"><span></span></p><a hr
ef="#" name="090acfcf20bc970a0ebbc86e3935b6445f53431d"></a><a href="#" name="8">
</a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><t
d class="c20"><p class="c5 c0"><span class="c2">// web/index.html</span></p><p c
lass="c5 c0"><span class="c2">…</span></p><p class="c5 c0"><span class="c
2"> <link rel="stylesheet" type="text/css" h
ref="css.css"></span></p><p class="c6 c5 c0"><span class="c2"></spa
n></p><p class="c5 c0"><span class="c2"> <!-- STEP 2: Import the
document item component. --></span></p><p class="c5 c0"><span class="c2">&nb
sp; </span><span class="c2 c1"><link rel="import" href="
;document_item.html"></span></p><p class="c6 c5 c0"><span class="c2"></s
pan></p><p class="c5 c0"><span class="c2"> </head></span></p><p clas
s="c5 c0"><span class="c2">…</span></p></td></tr></tbody></table><p class
="c6 c0"><span></span></p><h3 class="c0"><a name="h.eu70myeqpqpx"></a><span>Add
the sidebar</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Wit
h the custom element implemented, and imported, time to use <x-document-item&
gt;!</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Make sure y
ou are still editing </span><span class="c1">web/index.html</span><span>. And</s
pan><span> yes, </span><span>you need to write all those comments</span><sp
an> just as we have them in the code. You will add more functionality in th
e following steps, so you need the comments to ensure you can orient yourself la
ter.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Add the fol
lowing code:</span></p><p class="c6 c0"><span></span></p><a href="#" name="d70e4
3e44b21a0f2da93cec4f6a9b1f60f8acb67"></a><a href="#" name="9"></a><table cellpad
ding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p c
lass="c5 c0"><span class="c2">// web/index.html</span></p><p class="c5 c0"><span
class="c2">…</span></p><p class="c5 c0"><span class="c2"> <body
></span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0">
<span class="c2"> <!-- STEP 2: Add a sidebar to the application.
--></span></p><p class="c5 c0"><span class="c2"> </span><span c
lass="c2 c1"><section id="sidebar" class="{{sidebarClass}}&quo
t;></span></p><p class="c5 c0"><span class="c2 c1"> <d
iv class="toolbar"></span></p><p class="c6 c5 c0"><span class="c2 c
1"></span></p><p class="c5 c0"><span class="c2 c1"> &
lt;!-- STEP 3: Add a button to create a new document. --></span></p><p class=
"c6 c5 c0"><span class="c2 c1"></span></p><p class="c6 c5 c0"><span class="c2 c1
"></span></p><p class="c5 c0"><span class="c2 c1"> &l
t;div class="input-wrap"></span></p><p class="c5 c0"><span class="c
2 c1"> <!-- STEP 4: Add a input box to filt
er documents. --></span></p><p class="c6 c5 c0"><span class="c2 c1"></span></
p><p class="c5 c0"><span class="c2 c1"> </div><
/span></p><p class="c5 c0"><span class="c2 c1"> </div>
</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><
span class="c2 c1"> <!-- Documents list --></span></p>
<p class="c5 c0"><span class="c2 c1"> <div class="it
ems"></span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p cl
ass="c5 c0"><span class="c2 c1"> <!-- STEP 3: Iter
ate over list of documents. --></span></p><p class="c6 c5 c0"><span class="c2
c1"></span></p><p class="c5 c0"><span class="c2 c1">
<!-- STEP 2: Add the active document to the sidebar. --></span></p><p cla
ss="c5 c0"><span class="c2 c1"> </span><span class="c
2 c1"><x-document-item doc="{{activeDocument}}"></x-document-
item></span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="
c5 c0"><span class="c2 c1"> </div></span></p><p class=
"c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&
nbsp; <!-- Also check out dartlang.org! --></span></p><p cla
ss="c5 c0"><span class="c2 c1"> <div class="footer&q
uot;></span></p><p class="c5 c0"><span class="c2 c1"> &nb
sp; <a href="https://github.com/dart-lang/io-2013-dart-codelab">
View Source</a></span></p><p class="c5 c0"><span class="c2 c1"> &nbs
p; </div></span></p><p class="c5 c0"><span class="c2 c1"> &nb
sp; </section></span></p><p class="c6 c5 c0"><span class="c2"></span></p><
p class="c5 c0"><span class="c2"> <!-- Editing window --></sp
an></p><p class="c5 c0"><span class="c2"> <section id="main
" class="{{mainClass}}"></span></p><p class="c5 c0"><span clas
s="c2">…</span></p></td></tr></tbody></table><p class="c6 c0"><span></spa
n></p><p class="c0"><span>Take a look at </span><span><x-document-item doc=&q
uot;{{activeDocument}}"></span><span>. The active document is bound into
the </span><span>x-document-item</span><span> tag via the </span><span>doc
</span><span> attribute. </span><span>The </span><span>activeDocument</span
><span> object is a top-level variable from app.dart.</span></p><p class="c
6 c0"><span></span></p><p class="c0"><span>Save your changes in </span><span cla
ss="c1">web/index.html</span><span> and in </span><span class="c1">web/docu
ment_item.html</span><span>, if you haven’t already done so.</span></p><p
class="c6 c0"><span></span></p><p class="c0"><span>Depending on the order in whi
ch you saved the files, you might see warnings or errors in Dart Editor complain
ing about unknown custom elements. Try running </span><span class="c1">Tools >
; Reanalyze Sources</span><span>.</span></p><p class="c6 c0"><span></span></p><p
class="c0"><span>Run </span><span>the app. On the left side of the app is a sid
ebar that contains a document.</span></p><p class="c6 c0"><span></span></p><p cl
ass="c0"><img height="449" src="images/image26.png" width="558"></p><p class="c6
c0"><span></span></p><hr style="page-break-before:always;display:none;"><p clas
s="c6 c0"><span></span></p><h1 class="c0"><a name="h.yjqv0zg28trz"></a><span>Ste
p 3: Add the ability to create, delete, and select documents in the list</span><
/h1><p class="c6 c0"><span></span></p><p class="c0 c7"><span>In this step, you&r
squo;ll implement support for creating, deleting, and selecting documents. Your
code will use an observable list to keep track of which documents exist.</span><
/p><h2 class="c0"><a name="h.plhwv16qfiu3"></a><span>What you will learn</span><
/h2><p class="c6 c0 c7"><span></span></p><ol class="c10 lst-kix_1c0w7icorqz1-0 s
tart" start="1"><li class="c16 c11 c0 c7"><span>Using Web UI’s</span><span
> toObservable()</span><span> function to make a list observable.</spa
n></li><li class="c16 c11 c0 c7"><span>Using </span><span><template iterate..
.></span><span> to </span><span>create an element </span><span>for each
item in a list.</span></li></ol><h2 class="c0"><a name="h.t4xdkmcfgxgs"></a><spa
n>Concepts overview</span></h2><h3 class="c9 c0"><a name="h.9plpwum2ndhq"></a><s
pan>The toObservable() function</span></h3><p class="c6 c0"><span></span></p><p
class="c0"><span>Use the </span><span>toObservable()</span><span> function
from the Web UI library to make a List or a Map observable. In the Writer app, m
aking the list of documents observable enables Web UI to update your app’s
UI whenever a document is created or deleted.</span></p><h3 class="c9 c0"><a na
me="h.q05y2y7gn8pj"></a><span>Template iterate</span></h3><p class="c6 c0 c7"><s
pan></span></p><p class="c0"><span>Template loops allow iteration over Iterable
Dart objects, such as Collections. To create a loop that operates on each item i
n an Iterable object, use the iterate attribute in a <template> tag. The c
ode below displays the alphabet by looping over a list of strings, of which each
string contains a single character.</span></p><p class="c6 c0"><span></span></p
><p class="c11 c0"><span class="c2">// in Dart code</span></p><p class="c11 c0">
<span class="c2">List<String> alphabet = toObservable(‘abcdefghijklm
nopqrstuvwxyz’.split(''));</span></p><p class="c6 c11 c0"><span cl
ass="c2"></span></p><p class="c11 c0"><span class="c2">// in HTML code</span></p
><p class="c11 c0"><span class="c2"><template iterate="letter in alphabe
t"> {{letter}} </template></span></p><h2 class="c0"><a name="h.k15
z6n5pmnu0"></a><span>Walkthrough</span></h2><p class="c6 c0 c7"><span></span></p
><p class="c0 c7"><span>You’ll be editing three files this time: </span><s
pan class="c1">web/app.dart</span><span>, </span><span class="c1">web/</span><sp
an class="c1">index.html</span><span>, and </span><span class="c1">web/</span><s
pan class="c1">document_item.html</span><span>.</span></p><p class="c6 c0 c7"><s
pan></span></p><p class="c0 c7"><span>(</span><span class="c1">Optional</span><s
pan>: Remember that if necessary, you can start with clean files for each step.
If you want to, close the directory for step 2 and open the </span><span c
lass="c1">io-2013-codelab-step3</span><span> directory now.</span><span>)</
span></p><h3 class="c0"><a name="h.1jxajn4fbphg"></a><span>Add an observable lis
t of documents</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7">
<span>Open </span><span class="c1">web/app.dart </span><span>and add the line of
code shown below that creates an empty, observable list of documents.</span></p
><p class="c6 c0 c7"><span></span></p><a href="#" name="003e7a132719843844266db1
96a529a3a66c108e"></a><a href="#" name="10"></a><table cellpadding="0" cellspaci
ng="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0 c7"><s
pan class="c2">// web/app.dart</span></p><p class="c6 c5 c0 c7"><span class="c2"
></span></p><p class="c5 c0 c7"><span class="c2">// STEP 3: Add an observed list
of documents.</span></p><p class="c5 c0 c7"><span class="c2 c1">final List<D
ocument> documents = toObservable([]);</span></p></td></tr></tbody></table><p
class="c6 c0 c7"><span></span></p><h3 class="c9 c0"><a name="h.rcpcobm9frxp"></
a><span>Add functions for creating, deleting, and selecting documents</span></h3
><p class="c6 c0"><span></span></p><p class="c0"><span>First, let’s implem
ent </span><span>creating documents</span><span>.</span></p><p class="c6 c0"><sp
an></span></p><p class="c0"><span>Continue editing </span><span class="c1">web/a
pp.dart</span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c0">
<span>Add the </span><span>createDocument()</span><span> function to </span
><span class="c1">web/app.dart </span><span>where indicated by the comments. The
new function calls another function, called </span><span>selectDocument(), whic
h</span><span> is not defined yet and about which Dart Editor issues warnin
gs. You’ll add that function just below, so ignore the warnings for now.</
span></p><p class="c6 c0"><span></span></p><a href="#" name="112b879928f02a95f8b
cca548aa41841e8a73a8c"></a><a href="#" name="11"></a><table cellpadding="0" cell
spacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0">
<span class="c2">// web/app.dart</span></p><p class="c6 c5 c0"><span class="c2">
</span></p><p class="c5 c0"><span class="c2">// STEP 3: Create a new document.</
span></p><p class="c5 c0"><span class="c2 c1">void createDocument() {</span></p>
<p class="c5 c0"><span class="c2 c1"> // Create a new document.</span></p>
<p class="c5 c0"><span class="c2 c1"> var doc = new Document('Untitled
', '');</span></p><p class="c5 c0"><span class="c2 c1"> docume
nts.add(doc);</span></p><p class="c5 c0"><span class="c2 c1"> selectDocume
nt(doc);</span></p><p class="c5 c0"><span class="c2 c1">}</span></p></td></tr></
tbody></table><p class="c6 c0"><span></span></p><p class="c0"><span>Next, let&rs
quo;s implement deleting a document.</span></p><p class="c6 c0"><span></span></p
><a href="#" name="bc8ccafb5db8bb95790c033c16fcedeb2df622ab"></a><a href="#" nam
e="12"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="
c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/app.dart</span></p
><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c
2">// STEP 3: Add code to delete a document</span></p><p class="c5 c0"><span cla
ss="c2 c1">void deleteDocument(Document doc) {</span></p><p class="c5 c0"><span
class="c2 c1"> documents.remove(doc);</span></p><p class="c6 c5 c0"><span
class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1"> // STEP 5:
Also delete from local storage.</span></p><p class="c5 c0"><span class="c2 c1">}
</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class=
"c0"><span>Now</span><span>, let’s implement setting the currently selecte
d, or </span><span class="c15">active</span><span>,</span><span> document.
</span></p><p class="c6 c0"><span></span></p><a href="#" name="c3a16027a88e8921f
4c86fe09a9c48ae6bd5735d"></a><a href="#" name="13"></a><table cellpadding="0" ce
llspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0
"><span class="c2">// web/app.dart</span></p><p class="c6 c5 c0"><span class="c2
"></span></p><p class="c5 c0"><span class="c2">// STEP 3: Add code to select a d
ocument.</span></p><p class="c5 c0"><span class="c2 c1">void selectDocument(Docu
ment doc, </span><span class="c2 c1">{bool markActive: false}</span><span class=
"c2 c1">) {</span></p><p class="c5 c0"><span class="c2 c1"> if (documents.
isEmpty) {</span></p><p class="c5 c0"><span class="c2 c1"> activeDo
cument = null;</span></p><p class="c5 c0"><span class="c2 c1"> } else if (
doc != null && documents.contains(doc) && doc != activeDocument)
{</span></p><p class="c5 c0"><span class="c2 c1"> // Change active
document.</span></p><p class="c5 c0"><span class="c2 c1"> activeDo
cument = doc;</span></p><p class="c5 c0"><span class="c2 c1"> } else if (a
ctiveDocument != null && documents.contains(activeDocument)) {</span></p
><p class="c5 c0"><span class="c2 c1"> // Stay on the active docume
nt and display the editing window.</span></p><p class="c5 c0"><span class="c2 c1
"> contentActive = markActive && doc == activeDocument;</sp
an></p><p class="c5 c0"><span class="c2 c1"> } </span><span class="c2 c1">
else</span><span class="c2 c1"> {</span></p><p class="c5 c0"><span class="c
2 c1"> // Fall back to the last document.</span></p><p class="c5 c0
"><span class="c2 c1"> activeDocument = documents.last;</span></p><
p class="c5 c0"><span class="c2 c1"> }</span></p><p class="c5 c0"><span cl
ass="c2 c1">}</span></p></td></tr></tbody></table><p class="c6 c0"><span></span>
</p><p class="c0"><span>A quick note about Dart syntax. The second argument, mar
kActive, is optional as indicated by the curly brackets. If the caller does not
provide the argument, the value is </span><span>false.</span></p><p class="c6 c0
"><span></span></p><p class="c0 c7"><span>Save </span><span class="c1">web/app.d
art</span><span>. The Dart Editor warnings should go away.</span></p><h3 class="
c9 c0"><a name="h.t585uroxp75j"></a><span>Add document initialization to main()<
/span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>We need a littl
e more Dart code</span><span> to create</span><span> and select the fi
rst document.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Fi
nd the </span><span>main()</span><span> function and add two lines of code:
</span></p><p class="c6 c0"><span></span></p><a href="#" name="636d1459fe267ed85
fead5b269c905a57617660a"></a><a href="#" name="14"></a><table cellpadding="0" ce
llspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0
"><span class="c2">// web/app.dart</span></p><p class="c6 c5 c0"><span class="c2
"></span></p><p class="c5 c0"><span class="c2">void main() {</span></p><p class=
"c5 c0"><span class="c2"> // STEP 5: Initialize with all documents from lo
cal storage.</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class=
"c5 c0"><span class="c2"> // STEP 3: Create a new document if there are no
ne.</span></p><p class="c5 c0"><span class="c2 c1"> if (documents.isEmpty)
createDocument();</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p
class="c5 c0"><span class="c2"> // STEP 3: Select the first document in th
e list of documents.</span></p><p class="c5 c0"><span class="c2 c1"> selec
tDocument(documents.first);</span></p><p class="c5 c0"><span class="c2 c1">}</sp
an></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class="c0"
><span>Save </span><span class="c1">web/app.dart</span><span>.</span></p><p clas
s="c6 c0"><span></span></p><p class="c0"><span>Now that we have </span><span>fun
ctions that let us create, delete, and select </span><span>documents, we can cre
ate elements that provide a UI to use that functionality.</span></p><h3 class="c
9 c0"><a name="h.svl18lwba5l4"></a><span>Create new elements in web/index.html</
span></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Open </spa
n><span class="c1">web/index.html</span><span>.</span></p><p class="c6 c0 c7"><s
pan></span></p><p class="c0 c7"><span>Create a + button, and set our new </span>
<span>createDocument()</span><span> function as the button’s mouse cl
ick callback function.</span></p><p class="c6 c0"><span></span></p><a href="#" n
ame="7ba1693380e842805638eca678d2e0155401c2cc"></a><a href="#" name="15"></a><ta
ble cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class
="c20"><p class="c5 c0"><span class="c2">// web/index.html</span></p><p class="c
6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2"> &n
bsp; <div class="toolbar"></span></p><p class="c6 c5 c0">
<span class="c2"></span></p><p class="c5 c0"><span class="c2"> &nbs
p; <!-- STEP 3: Add a button to create a new document. --></span></
p><p class="c5 c0"><span class="c2 c1"> </span><span class="
c2 c1"> <button on-click="createDocument()">+</button&g
t;</span></p><p class="c5 c0"><span class="c2">...</span></p></td></tr></tbody><
/table><p class="c6 c0"><span></span></p><p class="c0"><span>Delete the old code
that created a single </span><span><x-document-item></span><span>, and re
place it with code that creates one </span><span><x-document-item></span><
span> for each item in the documents list.</span></p><p class="c6 c0"><span
></span></p><a href="#" name="8e2e7b784dd6a79a105a04e54a79d0730d45d82a"></a><a h
ref="#" name="16"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody>
<tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/index.h
tml</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><
span class="c2"> <!-- STEP 3: Iterate over list of
documents. --></span></p><p class="c5 c0"><span class="c2 c1">
<template iterate="doc in documents"></span></p><p
class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c
2 c1"> <!-- STEP 4: Hide documents that don
't match search filter. --></span></p><p class="c6 c5 c0"><span class="c2
c1"></span></p><p class="c5 c0"><span class="c2 c1">
<!-- Our custom document element! --></span></p><p class="c5 c0"><
span class="c2 c1"> <x-document-item doc=&q
uot;{{doc}}"></x-document-item></span></p><p class="c5 c0"><span c
lass="c2 c1"> </template></span></p><p class="c
6 c5 c0"><span class="c2 c23"></span></p><p class="c5 c0"><span class="c2 c23">&
lt;!-- STEP 2: Add the active document to the sidebar. --></span></p><p class
="c5 c0"><span class="c2 c23"><x-document-item doc="{{activeDocument}}&q
uot;></x-document-item></span></p></td></tr></tbody></table><p class="c
6 c0"><span></span></p><p class="c0 c7"><span>Save </span><span class="c1">web/i
ndex.html</span><span>.</span></p><h3 class="c9 c0"><a name="h.v26yzo8ksmbq"></a
><span>Add code to select a document and to delete a document</span></h3><p clas
s="c6 c0"><span></span></p><p class="c0"><span>Open </span><span class="c1">web/
document_item.html</span><span>.</span></p><p class="c6 c0"><span></span></p><p
class="c0"><span>Now that we have </span><span>selectDocument()</span><span>&nbs
p;and </span><span>deleteDocument() functions</span><span>, our custom component
can use them. The following code uses the new selection function and adds an &l
dquo;X” button to </span><span><x-document-item></span><span> t
hat deletes the item.</span></p><p class="c6 c0"><span></span></p><a href="#" na
me="e9cd1b499b5eac19bda4a5eb9b038274db4f6e03"></a><a href="#" name="17"></a><tab
le cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class=
"c20"><p class="c5 c0"><span class="c2">// web/document_item.html</span></p><p c
lass="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&n
bsp; <!-- STEP 3: On click, select the document. --></span><
/p><p class="c32 c0"><span class="c2"> </span><span class="c
2"> </span><span class="c2 c23"><div</span><span class="c2 c23"> <
/span><span class="c2 c23">class=</span><span class="c2 c23">"item {{isActi
veClass}}"</span><span class="c2 c23">></span></p><p class="c0 c32"><spa
n class="c2"> </span><span class="c2 c1"><div clas
s="item {{isActiveClass}}"</span></p><p class="c5 c0"><span class="c2"
> </span><span class="c2"> </span><span
class="c2 c1"> </span><span class="c2 c1">on-click="app.selectDocument
(doc, markActive: true)"</span><span class="c2 c1">></span></p><p class=
"c5 c0"><span class="c2">…</span></p><p class="c5 c0"><span class="c2">&n
bsp; <!-- STEP 3: Add delete button. --></span
></p><p class="c5 c0"><span class="c2"> </span
><span class="c2 c1"><button class="delete" on-click="</span><
span class="c2 c1">app.</span><span class="c2 c1">deleteDocument</span><span cla
ss="c2 c1">(doc)">&times;</button></span></p></td></tr></tbody
></table><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Save </span
><span class="c1">web/document_item.html</span><span>.</span></p><h3 class="c9 c
0"><a name="h.1e11ugbr3dv7"></a><span>Try out the new functionality</span></h3><
p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Try it out! </span><s
pan class="c45">Run the app.</span></p><ul class="c10 lst-kix_vvzditg8sno-0 star
t"><li class="c16 c11 c0"><span>Click the + button to create a new document.</sp
an></li><li class="c16 c11 c0"><span>Type in some text.</span></li><li class="c1
6 c11 c0"><span>Change the document name.</span></li><li class="c16 c11 c0"><spa
n>Click on a document in the sidebar to select a document. A </span><span class=
"c38 c1">red</span><span> vertical line appears on the left and its content
s appears in the text area.</span></li><li class="c16 c11 c0"><span>Hover the mo
use over a document in the sidebar and an ‘X’ appears. Click the &ls
quo;X’ to delete the document.</span></li></ul><p class="c6 c0"><span clas
s="c2"></span></p><p class="c0"><img height="514" src="images/image07.png" width
="512"></p><p class="c6 c0"><span></span></p><h1 class="c8 c0"><a name="h.ajf00h
xdo4zq"></a></h1><h1 class="c0"><a name="h.1lmhpmupb94f"></a><span>Step 4: Add a
search bar</span></h1><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><sp
an>In this step, you will learn how to connect an HTML input field to a Dart obj
ect, and then conditionally display DOM elements based on the contents from the
input field.</span></p><h2 class="c0"><a name="h.qrimtew7kc7q"></a><span>What yo
u will learn</span></h2><p class="c6 c0"><span></span></p><ol class="c10 lst-kix
_32zxnvl59py3-0 start" start="1"><li class="c16 c11 c0 c7"><span>Instantiate DOM
elements based on conditionals.</span></li><li class="c16 c11 c0 c7"><span>Bind
an input field to a Dart object (aka two-way data binding).</span></li></ol><h2
class="c0"><a name="h.ps3mbo8ceq0c"></a><span>Concepts overview</span></h2><h3
class="c0"><a name="h.8ja6vc9pug1j"></a><span>Template conditionals</span></h3><
p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>The contents of a </s
pan><span><template></span><span> tag can be added to, or removed fro
m, the DOM based on a </span><span class="c15">conditional</span><span>. If a co
nditional is true, the contents of the </span><span><template></span><span
> are added to the DOM (in other words, the contents are displayed on the p
age). If the conditional is false, the contents are removed from the page.</span
></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Here is a simpl
e example of a conditional template:</span></p><p class="c6 c0 c7"><span></span>
</p><p class="c11 c0 c7"><span class="c2"><template if="user.</span><spa
n class="c2">agreedToTOS</span><span class="c2">"></span></p><p class="c
11 c0 c7"><span class="c2"> Thanks for clicking agree!</span></p><p class=
"c11 c0 c7"><span class="c2"></template></span></p><p class="c6 c11 c0 c7"
><span></span></p><p class="c0 c7"><span>Every time the conditional changes (fro
m false to true, or from true to false), the contents are added or removed.</spa
n></p><h3 class="c0"><a name="h.2ud8exsdflt4"></a><span>Field binding</span></h3
><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>An HTML input field
, such as a text input, can be bound to a Dart object. Whenever the input field&
#39;s value changes, the </span><span>Dart object</span><span>'s value </spa
n><span>change</span><span>s. Whenever the Dart object's value changes, the
input field changes. This is known as </span><span class="c15">two-way binding</
span><span>.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><sp
an>Here is a simple User class:</span></p><p class="c6 c0 c7"><span></span></p><
p class="c11 c0 c7"><span class="c2">class User {</span></p><p class="c11 c0 c7"
><span class="c2"> String username;</span></p><p class="c11 c0 c7"><span c
lass="c2">}</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><spa
n>Here is a simple example of an input field binding:</span></p><p class="c6 c0
c7"><span></span></p><p class="c11 c0 c7"><span class="c2"><input type="
text" name="username" bind-value="</span><span class="c2">us
er.username"></span></p><p class="c6 c0 c7"><span></span></p><p class="c
0 c7"><span>The value property of the input field is bound to the username field
of the </span><span class="c35">user</span><span> object—an instance
of the </span><span class="c35">User</span><span> class.</span></p><h2 cla
ss="c0"><a name="h.7otqcta04eui"></a><span>Walkthrough</span></h2><h3 class="c0"
><a name="h.gywvipbftj46"></a><span>Create a new library</span></h3><p class="c6
c0"><span></span></p><p class="c0"><span>To help you get started, we've giv
en you the shell for the new search library.</span></p><p class="c6 c0"><span></
span></p><ol class="c10 lst-kix_nhaic9xr6pf-0 start" start="1"><li class="c16 c1
1 c0 c7"><span>Right-click on the </span><span class="c1">lib</span><span>
directory and select "</span><span class="c1">New File</span><span>".<
/span></li><li class="c16 c11 c0 c7"><span>Name this file "search.dart"
;.</span></li><li class="c16 c11 c0 c7"><span>Open </span><span class="c1">__for
_later/search.dart</span><span>, copy its contents, and paste into </span><span
class="c1">lib/search.dart</span><span>.</span></li></ol><h3 class="c0"><a name=
"h.3tpsh4ob2nhr"></a><span>Observe the search filter</span></h3><p class="c6 c0
c7"><span></span></p><p class="c0 c7"><span>You need to add a top-level field th
at will contain the search filter.</span></p><p class="c6 c0 c7"><span></span></
p><p class="c0 c7"><span>Add the following code to </span><span class="c1">lib/s
earch.dart</span><span>.</span></p><p class="c6 c0"><span></span></p><a href="#"
name="a042056057108e3f45766defec5c9081e7b61fd4"></a><a href="#" name="18"></a><
table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td cla
ss="c20"><p class="c5 c0"><span class="c2">// lib/search.dart</span></p><p class
="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">import
'package:writer/document.dart';</span></p><p class="c6 c5 c0"><span cla
ss="c2"></span></p><p class="c5 c0"><span class="c2">// STEP 4: Add an observed
string to filter documents.</span></p><p class="c5 c0"><span class="c2 c1">@obse
rvable</span></p><p class="c5 c0"><span class="c2 c1">String searchFilter = '
;';</span></p><p class="c5 c0"><span class="c2">…</span></p></td></tr
></tbody></table><p class="c6 c0"><span></span></p><h3 class="c0"><a name="h.1i3
dq5f7oc85"></a><span>Filter documents</span></h3><p class="c6 c0 c7"><span></spa
n></p><p class="c0 c7"><span>Now that you have an observable </span><span>search
Filter</span><span> string, you can filter documents.</span></p><p class="c
6 c0 c7"><span></span></p><p class="c0 c7"><span>Inside of </span><span class="c
1">lib/search.dart</span><span>, add the following code:</span></p><p class="c6
c0"><span></span></p><a href="#" name="dd9b7b447779506c855362f9779578a1cba8ee6f"
></a><a href="#" name="19"></a><table cellpadding="0" cellspacing="0" class="c13
"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// li
b/search.dart</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class
="c5 c0"><span class="c2">// STEP 4: Add function to check if a document matches
the search filter.</span></p><p class="c5 c0"><span class="c2 c1">bool matchesS
earchFilter(Document doc) {</span></p><p class="c5 c0"><span class="c2 c1"> 
; if (searchFilter.isEmpty) {</span></p><p class="c5 c0"><span class="c2 c1">&nb
sp; return </span><span class="c2 c1">true</span><span class="c2 c1">;</s
pan></p><p class="c5 c0"><span class="c2 c1"> }</span></p><p class="c6 c5
c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1"> r
eturn doc.title.toLowerCase().contains(searchFilter.toLowerCase()) ||</span></p>
<p class="c5 c0"><span class="c2 c1"> doc.conte
nt.toLowerCase().contains(searchFilter.toLowerCase());</span></p><p class="c5 c0
"><span class="c2 c1">}</span></p></td></tr></tbody></table><p class="c6 c0"><sp
an></span></p><p class="c0 c7"><span>Notice that </span><span>searchFilter.isEmp
ty</span><span> is a </span><span class="c15">getter</span><span>—it
doesn’t have trailing parentheses.</span></p><p class="c6 c0 c7"><span></s
pan></p><p class="c0 c7"><span>Save your changes.</span></p><h3 class="c0"><a na
me="h.obmom9hrtjt0"></a><span>Import search into app</span></h3><p class="c6 c0
c7"><span></span></p><p class="c0 c7"><span>With the search library complete, yo
u need to import it into the main application.</span></p><p class="c6 c0 c7"><sp
an></span></p><p class="c0 c7"><span>Open </span><span class="c1">web/app.dart</
span><span class="c1"> </span><span>and add the following code:</span></p><
p class="c6 c0"><span></span></p><a href="#" name="6d5fb425ce24bad33322b62ea263a
2e8ca1e30e2"></a><a href="#" name="20"></a><table cellpadding="0" cellspacing="0
" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span clas
s="c2">// web/app.dart</span></p><p class="c6 c5 c0"><span class="c2"></span></p
><p class="c5 c0"><span class="c2">import 'package:writer/document.dart'
;</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><sp
an class="c2">// STEP 4: Import search.dart.</span></p><p class="c5 c0"><span cl
ass="c2 c1">import 'package:writer/search.dart';</span></p><p class="c6
c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">// STEP 5:
Import storage.dart.</span></p><p class="c5 c0"><span class="c2 c1">…</sp
an></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class="c0
c7"><span>To keep the path to </span><span class="c1">search.dart</span><span cl
ass="c1"> </span><span>relative to </span><span class="c1">app.dart</span><
span>, we use the </span><span>package:</span><span> import method to impor
t the search.dart library from the writer package. The </span><span class="c1">p
ubspec.yaml</span><span class="c1"> </span><span>file declares the writer p
ackage. The </span><span>pub</span><span> command creates all the necessary
symlinks to allow you to not have to create import paths like '</span><span
>../../lib/search.dart</span><span>'.</span></p><p class="c6 c0 c7"><span></
span></p><p class="c0"><span>Save your changes.</span></p><h3 class="c9 c0"><a n
ame="h.uf0oq3wrab9x"></a><span>Input field for filter</span></h3><p class="c6 c0
"><span></span></p><p class="c0"><span>Let's turn our attention to the HTML
for the search box. You added the observable </span><span>searchFilter</span><sp
an> field in </span><span>search.dart</span><span>, now let's bind that
into an HTML input field.</span></p><p class="c6 c0"><span></span></p><p class=
"c0"><span>Open </span><span class="c1">web/index.html</span><span class="c1">&n
bsp;</span><span>and add the following code:</span></p><p class="c6 c0"><span></
span></p><a href="#" name="4d0cc0c5260d42270a69014b961ab05e5235b5d1"></a><a href
="#" name="21"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr
class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/index.html
</span></p><p class="c5 c0"><span class="c2">…</span></p><p class="c5 c0"
><span class="c2"> <div class="input-wrap&quo
t;></span></p><p class="c5 c0"><span class="c2"> &
nbsp; <!-- STEP 4: Add a input box to filter documents. --></span></p><p c
lass="c5 c0"><span class="c2"> </span><span cl
ass="c2 c1"><input type="text" placeholder="Filter documents..
." bind-value="searchFilter"></span></p><p class="c5 c0"><span
class="c2"> </span><span class="c2"></</span><spa
n class="c2">div</span><span class="c2">></span></p><p class="c5 c0"><span cl
ass="c2">…</span></p></td></tr></tbody></table><p class="c6 c0"><span></s
pan></p><p class="c0"><span>The variable name </span><span class="c15">searchFil
ter</span><span> must match the string inside of the bind-value attribute.<
/span></p><h3 class="c0"><a name="h.mtf4udav2d7n"></a><span>Dynamically hide or
show docs based on the filter</span></h3><p class="c6 c0 c7"><span></span></p><p
class="c0 c7"><span>When the search filter changes, we want to dynamically upda
te the documents displayed on the page.</span></p><p class="c6 c0 c7"><span></sp
an></p><p class="c0 c7"><span>Continue editing </span><span class="c1">web/index
.html</span><span class="c1"> </span><span>and add the following code:</spa
n></p><p class="c6 c0"><span></span></p><a href="#" name="6d3da29ef7fd3926adfaf6
eb70944e90a5d04c92"></a><a href="#" name="22"></a><table cellpadding="0" cellspa
cing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><sp
an class="c2">// web/index.html</span></p><p class="c5 c0"><span class="c2">&hel
lip;</span></p><p class="c5 c0"><span class="c2"> <
;!-- STEP 3: Iterate over list of documents. --></span></p><p class="c5 c0"><
span class="c2"> <template iterate="doc in do
cuments"></span></p><p class="c6 c5 c0"><span class="c2"></span></p><p c
lass="c5 c0"><span class="c2"> <!-- STEP 4:
Hide documents that don't match search filter. --></span></p><p class="c
5 c0"><span class="c2 c1"> <template if=&qu
ot;matchesSearchFilter(doc)"></span></p><p class="c6 c5 c0"><span class=
"c2"></span></p><p class="c5 c0"><span class="c2"> &n
bsp; <!-- Our custom document element! --></span></p><p class="c5 c
0"><span class="c2"> <x-document-ite
m doc="{{doc}}"></x-document-item></span></p><p class="c5 c0"
><span class="c2 c1"> </template></span>
</p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class
="c2"> </template></span></p><p class="c5 c0"><
span class="c2">…</span></p></td></tr></tbody></table><p class="c6 c0"><s
pan></span></p><p class="c0 c7"><span>Notice that you are placing the conditiona
l template within the template loop.</span></p><p class="c6 c0 c7"><span></span>
</p><p class="c0 c7"><span>The Web UI library knows that </span><span>matchesSea
rchFilter</span><span> relies on </span><span>searchFilter</span><span>, so
whenever </span><span>searchFilter</span><span> changes, it re-runs this t
emplate. Only those documents that pass </span><span>matchesSearchFilter</span><
span> will be displayed with the custom </span><span><x-document-item>
;</span><span> tag.</span></p><p class="c6 c0 c7"><span></span></p><h2 clas
s="c0"><a name="h.j1j21dxjix9k"></a><span>Run the code</span></h2><p class="c0 c
7"><span>Time to run the code! After completing this step, you should be able to
search for documents by title or contents. The search results are live. </span>
<span class="c15">Note</span><span>: there is a known bug, if the currently open
ed document does not match the filter, it won't disappear.</span></p><p clas
s="c6 c0 c7"><span></span></p><p class="c0 c7"><img height="294" src="images/ima
ge10.jpg" width="506"></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7">
<span>If you do not see the input field for the filter, run </span><span class="
c1">Tools > Reanalyze Sources</span><span>.</span></p><hr style="page-break-b
efore:always;display:none;"><p class="c6 c0 c7"><span></span></p><h1 class="c0">
<a name="h.fwk2fgwdpcgv"></a><span>Step 5: Adding local storage</span></h1><p cl
ass="c6 c0 c7"><span></span></p><p class="c0 c7"><span>In this step, you learn h
ow to save the user’s documents in local storage, and later to remove the
documents. In addition to saving the documents in local storage, the app also ma
intains a list of document IDs in local storage. The </span><span>main()</span><
span> function uses </span><span>this </span><span>list to initialize the a
pp and load the first document. The app saves the documents as JSON-formatted st
rings. You also learn how to use the JSON library to serialize and revive the do
cument contents.</span></p><h2 class="c0"><a name="h.69edvk1ggsqx"></a><span>Wha
t you will learn</span></h2><p class="c6 c0"><span></span></p><ol class="c10 lst
-kix_2uog6ch44jpu-0 start" start="1"><li class="c16 c11 c0"><span>Save documents
in local storage.</span></li><li class="c16 c11 c0"><span>Remove documents from
local storage.</span></li><li class="c16 c11 c0"><span>Maintain a list of docum
ent IDs in local storage.</span></li><li class="c16 c11 c0"><span>Use JSON to re
ad and write the contents of the documents.</span></li></ol><h2 class="c12 c0"><
a name="h.sjarbfxvehu8"></a><span>Concepts overview</span></h2><h3 class="c9 c0"
><a name="h.ugi5xom80b1x"></a><span>Local storage</span></h3><p class="c6 c0"><s
pan></span></p><p class="c0"><span>Local storage can be </span><span>use</span><
span> to keep persistent data between invocations of your app. The data may
only be accessed by the origin that created it. The Window object that hosts th
e web app has a localStorage object that your code can use to store and retrieve
data. The local storage object is implemented as a Map<String, String>. <
/span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Save data in loc
al storage by putting a key/value pair in the localStorage object.</span></p><p
class="c0 c6"><span></span></p><p class="c18 c11 c0 c7"><span class="c2 c39">win
dow.localStorage['key1'] = 'val1';<br>window.localStorage['k
ey2'] = 'val2';<br>window.localStorage['key3'] = 'val3&#
39;;</span></p><p class="c18 c6 c0 c7"><span class="c35"></span></p><p class="c1
8 c0 c7"><span>Delete data from local storage by removing a key/value pair from
the </span><span>localStorage</span><span> object.</span></p><p class="c6 c
0 c7 c18"><span></span></p><p class="c18 c11 c0 c7"><span class="c2">window.loca
lStorage.</span><span class="c2">remove</span><span class="c2">(['key1']
);</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>You can use <
/span><span><a class="c14" href="http://api.dartlang.org/dart_core/Map.html">Map
</a></span><span> APIs such as containsValue(), clear(), and length:</span>
</p><p class="c6 c0"><span></span></p><p class="c18 c11 c0 c7"><span class="c2">
assert(window.localStorage.containsValue('does not exist') == false);<br
>window.localStorage.clear();<br>assert(window.localStorage.length == 0);</span>
</p><h3 class="c9 c0"><a name="h.o8ej7ha012l6"></a><span>JSON</span></h3><p clas
s="c6 c0"><span></span></p><p class="c0"><span>JSON is a text-based, human-frien
dly format for representing data of different types. The dart:json library has t
wo useful functions for converting data to/from JSON: stringify() and parse(). H
ere’s a small example that converts a list of objects to JSON and back aga
in.</span></p><p class="c6 c0"><span></span></p><p class="c18 c11 c0 c7"><span c
lass="c2">import </span><span class="c2">'</span><span class="c2">dart:json<
/span><span class="c2">'</span><span class="c2"> as JSON;</span></p><p
class="c18 c6 c11 c0 c7"><span class="c2"></span></p><p class="c18 c11 c0 c7"><s
pan class="c2">var list = [1, "two", 3.0];
// a list of objects</span></p><p class="c18 c11 c0
c7"><span class="c2">String listAsString = JSON.stringify(list); // convert lis
t of objects to JSON string</span></p><p class="c18 c11 c0 c7"><span class="c2">
print(listAsString); &nb
sp; // [1,"two",3.0]</span></p><p class="c18 c11 c
0 c7"><span class="c2">var revivedList = JSON.parse(listAsString); // convert JS
ON string to list object</span></p><p class="c18 c11 c0 c7"><span class="c2">pri
nt(revivedList);
// [1, two, 3.0]</span></p><h2 class="c0"><a name="h.36ilme
n4pg0r"></a><span>Walkthrough</span></h2><h3 class="c9 c0"><a name="h.q7i5j58pkj
sj"></a><span>Create a library to handle local storage.</span></h3><p class="c6
c0"><span></span></p><p class="c0"><span>This step requires you to edit three fi
les: </span><span class="c1">lib/</span><span class="c1">storage.dart</span><spa
n>, </span><span class="c1">web/</span><span class="c1">index.html</span><span>,
and </span><span class="c1">web/</span><span class="c1">app.dart</span><span>.
Let’s begin with </span><span class="c1">storage.dart</span><span>.</span>
</p><h3 class="c9 c0"><a name="h.3tndkjgajsf7"></a><span>Save a document to loca
l storage. Add the document ID to the list.</span></h3><p class="c6 c0"><span></
span></p><p class="c0"><span>To help you get started, we've given you the sh
ell for the new local storage library.</span></p><p class="c6 c0"><span></span><
/p><ol class="c10 lst-kix_hm47sef7muk-0 start" start="1"><li class="c16 c11 c0">
<span>Right-click on the </span><span class="c1">lib</span><span> directory
and select "</span><span class="c1">New File</span><span>".</span></l
i><li class="c16 c11 c0"><span>Name this file "storage.dart".</span></
li><li class="c16 c11 c0"><span>Open </span><span class="c1">__for_later/storage
.dart, </span><span>copy its contents, and paste it into </span><span class="c1"
>lib/storage.dart</span><span>.</span></li></ol><p class="c6 c0"><span></span></
p><p class="c0"><span>Modify the </span><span>saveDocument()</span><span> f
unction. Add the code, shown in bold below,</span></p><ol class="c10 lst-kix_pza
3ybm1wtg3-0 start" start="1"><li class="c16 c11 c0"><span>to convert the documen
t to a JSON-formatted string and save it in the window’s local storage,</s
pan></li><li class="c16 c11 c0"><span>to add the document ID to the internal lis
t of IDs, if necessary,</span></li><li class="c16 c11 c0"><span>and finally, to
save the list of document IDs, in JSON format, to the local storage</span><span>
.</span></li></ol><p class="c6 c0"><span></span></p><a href="#" name="11f012b03f
e1c09376f0858633759211354f25a7"></a><a href="#" name="23"></a><table cellpadding
="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class
="c5 c0"><span class="c2">// storage.dart</span></p><p class="c5 c0"><span class
="c2">…</span></p><p class="c5 c0"><span class="c2">
<!-- Document title --></span></p><p class="c5 c0"><span cla
ss="c2">/// Save the document to local storage.</span></p><p class="c5 c0"><span
class="c2">void saveDocument(Document doc) {</span></p><p class="c5 c0"><span c
lass="c2"> // STEP 5: Save the serialized version of the document to local
storage.</span></p><p class="c5 c0"><span class="c2 c1"> window.localStor
age[doc.id] = doc.toJson();</span></p><p class="c6 c5 c0"><span class="c2"></spa
n></p><p class="c5 c0"><span class="c2"> // STEP 5: Add the new document I
D to our list of document IDs.</span></p><p class="c5 c0"><span class="c2"> 
; </span><span class="c2 c1">if </span><span class="c2 c1">(!_storedIds.contains
(doc.id)) {</span></p><p class="c5 c0"><span class="c2 c1"> _stored
Ids.add(</span><span class="c2 c1">doc.id);</span></p><p class="c5 c0"><span cla
ss="c2 c1"> }</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p
class="c5 c0"><span class="c2"> // STEP 5: Update local storage map of ID
s.</span></p><p class="c5 c0"><span class="c2 c1"> window.localStorage[DOC
UMENT_ID_KEY] = JSON.stringify(_storedIds);</span></p><p class="c5 c0"><span cla
ss="c2">}</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5
c0"><span class="c2">…</span></p></td></tr></tbody></table><p class="c6
c0"><span></span></p><h3 class="c9 c0"><a name="h.wjjh2u48r262"></a><span>Remove
the document from local storage. Remove the document ID from the list.</span></
h3><p class="c6 c0"><span></span></p><p class="c0"><span>Continue editing </span
><span class="c1">lib/</span><span class="c1">storage.dart</span><span>.</span><
/p><p class="c6 c0"><span></span></p><p class="c0"><span>Modify the </span><span
>removeDocument()</span><span> function. Add the code</span></p><ol class="
c10 lst-kix_qz5wp1hdd24k-0 start" start="1"><li class="c16 c11 c0"><span>to remo
ve the document ID from the internal list,</span></li><li class="c16 c11 c0"><sp
an>to remove the document from local storage, </span></li><li class="c16 c11 c0"
><span>and to save the list of document IDs in local storage.</span></li></ol><p
class="c6 c0"><span></span></p><a href="#" name="3177dcfaa26d24b52d0428abf91f2c
b328fae133"></a><a href="#" name="24"></a><table cellpadding="0" cellspacing="0"
class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class
="c2">// storage.dart</span></p><p class="c5 c0"><span class="c2">…</span
></p><p class="c5 c0"><span class="c2">/// Removes the document from local stora
ge.</span></p><p class="c5 c0"><span class="c2">void removeDocument(Document doc
) {</span></p><p class="c5 c0"><span class="c2"> // STEP 5: Remove the doc
ument from local storage.</span></p><p class="c5 c0"><span class="c2 c1">
_storedIds.remove(doc.id);</span></p><p class="c5 c0"><span class="c2 c1">
window.localStorage.remove(doc.id);</span></p><p class="c5 c0"><span class="c2
c1"> window.localStorage[DOCUMENT_ID_KEY] = JSON.stringify(_storedIds);</s
pan></p><p class="c5 c0"><span class="c2">}</span></p><p class="c5 c0"><span cla
ss="c2">…</span></p></td></tr></tbody></table><p class="c6 c0"><span></sp
an></p><h3 class="c9 c0"><a name="h.iu894renpog2"></a><span>Load the list of IDs
from local storage. Then load the documents.</span></h3><p class="c6 c0"><span>
</span></p><p class="c0"><span>Continue editing </span><span class="c1">lib/stor
age.dart</span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c0"
><span>Modify the </span><span>fetchDocuments()</span><span> function. Add
the code</span></p><ol class="c10 lst-kix_8dg0b92yw51r-0 start" start="1"><li cl
ass="c16 c11 c0"><span>to get the list of document IDs</span></li><li class="c16
c11 c0"><span>to load all of the documents from local storage using the private
method </span><span>_fetchDocument()</span></li><li class="c16 c11 c0"><span>an
d to display one of the documents.</span></li></ol><p class="c6 c0 c7"><span></s
pan></p><a href="#" name="9828f087ea9465c35bd79ae04bfae6e8749c67e0"></a><a href=
"#" name="25"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr
class="c22"><td class="c20"><p class="c5 c0 c7"><span class="c2">// storage.dart
</span></p><p class="c5 c0 c7"><span class="c2">…</span></p><p class="c5
c0 c7"><span class="c2">// Returns a collection of all documents from local stor
age.</span></p><p class="c5 c0 c7"><span class="c2">Iterable<Document> fet
chDocuments() {</span></p><p class="c5 c0 c7"><span class="c2"> // STEP 5:
Get all document IDs from local storage.</span></p><p class="c5 c0 c7"><span cl
ass="c2 c1"> if (window.localStorage[DOCUMENT_ID_KEY] != null) {</span></p
><p class="c5 c0 c7"><span class="c2 c1"> _storedIds = JSON.parse(w
indow.localStorage[DOCUMENT_ID_KEY]);</span></p><p class="c5 c0 c7"><span class=
"c2 c1"> }</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p
class="c5 c0 c7"><span class="c2"> // STEP 5: Get all documents from loca
l storage.</span></p><p class="c5 c0 c7"><span class="c2 c1"> return _stor
edIds.map(_fetchDocument);</span></p><p class="c5 c0 c7"><span class="c2">}</spa
n></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><sp
an class="c2">/// Gets a document from local storage.</span></p><p class="c5 c0
c7"><span class="c2">Document _fetchDocument(String id) {</span></p><p class="c5
c0 c7"><span class="c2"> // STEP 5: Return one deserialized document from
local storage.</span></p><p class="c5 c0 c7"><span class="c2 c1"> return
new Doc</span><span class="c2 c1">ument.fromJson</span><span class="c2 c1">(wind
ow.localStorage[id]);</span></p><p class="c5 c0 c7"><span class="c2">}</span></p
><p class="c5 c0 c7"><span class="c2">…</span></p></td></tr></tbody></tab
le><p class="c6 c0 c7"><span></span></p><p class="c0"><span>Save your changes to
</span><span class="c1">lib/</span><span class="c1">storage.dart</span><span>.<
/span></p><p class="c6 c0"><span class="c35"></span></p><h3 class="c9 c0"><a nam
e="h.i3h5dbyw0vmu"></a><span>Add event handlers to HTML elements to save the doc
ument.</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Now that
you’ve written the library code that saves and retrieves documents, you c
an use the new functions in the app. The app saves the documents based on user-g
enerated events in the UI. So let’s add event handlers to the HTML element
s for saving the documents.</span></p><p class="c6 c0"><span></span></p><p class
="c0"><span>Open the </span><span class="c1">web/index.html </span><span>file.</
span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Find the code tha
t creates the text element for the document titles.</span></p><p class="c6 c0"><
span></span></p><p class="c0"><span>Add a key-up event handler to the text field
. Each time the user types a character in the document title, the event handler
saves the document.</span></p><p class="c6 c0 c7"><span></span></p><a href="#" n
ame="36ceaf585c6c68044bee5323e8e8b9b547788375"></a><a href="#" name="26"></a><ta
ble cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class
="c20"><p class="c5 c0 c7"><span class="c2">// index.html</span></p><p class="c5
c0 c7"><span class="c2">…</span></p><p class="c5 c0 c7"><span class="c2"
> <!-- Document title --></span></p><p c
lass="c5 c0 c7"><span class="c2"> <div clas
s="input-wrap"></span></p><p class="c6 c5 c0 c7"><span class="c2"><
/span></p><p class="c5 c0 c7"><span class="c2">  
; <!-- STEP 5: Add event handler to save the active document. --></
span></p><p class="c5 c0 c7"><span class="c2">
</span><span class="c2 c23"><input type="text" bind-value=&
quot;activeDocument.title"></span></p><p class="c5 c0 c7"><span class="c
2 c1"> <input type="text"
bind-value="activeDocument.title"</span></p><p class="c5 c0 c7"><span
class="c2"> </span><span
class="c2 c1">on-key-up="saveDocument(activeDocument)" </span><span cl
ass="c2">/></span></p><p class="c5 c0 c7"><span class="c2"> &nbs
p; </div></span></p><p class="c5 c0 c7"><span class="c2">&he
llip;</span></p></td></tr></tbody></table><p class="c6 c0 c7"><span></span></p><
p class="c0"><span>Now, find the textarea used to enter the contents of a docume
nt.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Add a key-up
event handler to the textarea. Each time the user types a character into the do
cument, the event handler saves the document.</span></p><p class="c6 c0 c7"><spa
n></span></p><a href="#" name="bbf4a6a118e5f14b13909f187048196681e275a6"></a><a
href="#" name="27"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody
><tr class="c22"><td class="c20"><p class="c5 c0 c7"><span class="c2">// index.h
tml</span></p><p class="c5 c0 c7"><span class="c2">…</span></p><p class="
c5 c0 c7"><span class="c2"> <!-- Content box -->
;</span></p><p class="c5 c0 c7"><span class="c2"> <
;!-- STEP 5: Add event handler to save the active document. --></span></p><p
class="c5 c0 c7"><span class="c2"> </span><span class
="c2 c23"><textarea class="content" bind-value="activeDocument
.content"></textarea></span></p><p class="c5 c0 c7"><span class="c
2"> </span><span class="c2 c1"><textarea class=&qu
ot;content" bind-value="activeDocument.content"</span></p><p clas
s="c5 c0 c7"><span class="c2 c1"> on-ke
y-up="saveDocument(activeDocument)"></textarea></span></p><p
class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class=
"c2">…</span></p></td></tr></tbody></table><p class="c6 c0"><span class="
c1 c41"></span></p><p class="c0"><span>Save your changes to </span><span class="
c1">web/index.html </span><span>.</span></p><p class="c6 c0"><span></span></p><h
3 class="c0"><a name="h.yvyngs2ay112"></a><span>Import storage.dart</span></h3><
p class="c6 c0"><span></span></p><p class="c0"><span>For removing documents and
initializing the app, you need to edit the Dart code.</span></p><p class="c6 c0"
><span></span></p><p class="c0"><span>Open </span><span class="c1">web/app.dart<
/span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Ad
d an import directive near the top of the file to include the </span><span>stora
ge.dart</span><span> library you just wrote.</span></p><p class="c6 c0 c7">
<span></span></p><a href="#" name="a92b059e6f7083b59c32c8e671b4914e90e06269"></a
><a href="#" name="28"></a><table cellpadding="0" cellspacing="0" class="c13"><t
body><tr class="c22"><td class="c20"><p class="c5 c0 c7"><span class="c2">// app
.dart</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5
c0 c7"><span class="c2">@observable</span></p><p class="c5 c0 c7"><span class="c
2">library writer;</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p>
<p class="c5 c0 c7"><span class="c2">import 'dart:html' hide Document;</
span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7">
<span class="c2">import 'package:web_ui/web_ui.dart';</span></p><p class
="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">
import 'package:writer/document.dart';</span></p><p class="c6 c5 c0 c7">
<span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">// STEP 4: Impo
rt search.dart.</span></p><p class="c5 c0 c7"><span class="c2">import 'packa
ge:writer/search.dart';</span></p><p class="c6 c5 c0 c7"><span class="c2"></
span></p><p class="c5 c0 c7"><span class="c2">// STEP 5: Import storage.dart.</s
pan></p><p class="c5 c0 c7"><span class="c2 c1">import 'package:writer/stora
ge.dart';</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p cl
ass="c5 c0 c7"><span class="c2">// STEP 3: Add an observed list of documents.</s
pan></p><p class="c5 c0 c7"><span class="c2">final List<Document> document
s = toObservable([]);</span></p><p class="c5 c0 c7"><span class="c2">…</s
pan></p></td></tr></tbody></table><p class="c6 c0 c7"><span></span></p><h3 class
="c9 c0"><a name="h.s8iyjgjt4pp0"></a><span>Initialize the app with the locally
stored documents.</span></h3><p class="c6 c0"><span></span></p><p class="c0"><sp
an>Continue editing </span><span class="c1">web/app.dart</span><span>.</span></p
><p class="c6 c0"><span></span></p><p class="c0"><span>Modify the </span><span>m
ain()</span><span> function in </span><span>app.dart</span><span>. Use the
</span><span>fetchDocuments()</span><span> function from the </span><span>s
torage.dart </span><span>library to initialize the app with the saved documents.
</span></p><p class="c6 c0 c7"><span></span></p><a href="#" name="6e5b6db4508be6
d53f4dd8844b2b23840627fdc9"></a><a href="#" name="29"></a><table cellpadding="0"
cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5
c0 c7"><span class="c2">// app.dart</span></p><p class="c5 c0 c7"><span class="
c2">…</span></p><p class="c5 c0 c7"><span class="c2">/// Starts the appli
cation.</span></p><p class="c5 c0 c7"><span class="c2">void main() {</span></p><
p class="c5 c0 c7"><span class="c2"> // STEP 5: Initialize with all docume
nts from local storage.</span></p><p class="c5 c0 c7"><span class="c2 c1">
documents.addAll(fetchDocuments());</span></p><p class="c6 c5 c0 c7"><span clas
s="c2"></span></p><p class="c5 c0 c7"><span class="c2"> // STEP 3: Create
a new document if there are none.</span></p><p class="c5 c0 c7"><span class="c2"
> if (documents.isEmpty) createDocument();</span></p><p class="c6 c5 c0 c7
"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2"> // STE
P 3: Select the first document in the list of documents.</span></p><p class="c5
c0 c7"><span class="c2"> selectDocument(documents.first);</span></p><p cla
ss="c5 c0 c7"><span class="c2">}</span></p><p class="c5 c0 c7"><span class="c2">
…</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><
h3 class="c9 c0"><a name="h.yxdyhxlthy8j"></a><span>Remove the document from loc
al storage.</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Con
tinue editing </span><span class="c1">web/app.dart</span><span>.</span></p><p cl
ass="c6 c0"><span></span></p><p class="c0"><span>Find the </span><span>deleteDoc
ument()</span><span> function. Add code to remove the document from local s
torage when the user deletes the document from the app.</span></p><p class="c6 c
0 c7"><span></span></p><a href="#" name="b03749e9a6ec5397397d6f8871b2330fb9cafea
c"></a><a href="#" name="30"></a><table cellpadding="0" cellspacing="0" class="c
13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0 c7"><span class="c2">
// app.dart</span></p><p class="c5 c0 c7"><span class="c2">…</span></p><p
class="c5 c0 c7"><span class="c2">// STEP 3: Add code to delete a document</spa
n></p><p class="c5 c0 c7"><span class="c2">void deleteDocument(Document doc) {</
span></p><p class="c5 c0 c7"><span class="c2"> documents.remove(doc);</spa
n></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><sp
an class="c2"> </span><span class="c2">// STEP 5: Also delete from local s
torage.</span></p><p class="c5 c0 c7"><span class="c2 c1"> removeDocument(
doc);</span></p><p class="c5 c0 c7"><span class="c2">}</span></p><p class="c5 c0
c7"><span class="c2">…</span></p></td></tr></tbody></table><h3 class="c9
c0 c27"><a name="h.6ky98xskme83"></a></h3><p class="c0"><span>Save your changes
to </span><span class="c1">web/app.dart</span><span>.</span></p><h3 class="c9 c
0"><a name="h.ifs5zdb93rhi"></a><span>Run the revised version of the app.</span>
</h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>You’ve co
mpleted the code edits for this step. Make sure all of your changes are saved.</
span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Run the app
again. Create and name several documents. Kill the app and start it up again. T
he documents you saved persist between invocations of the app.</span></p><p clas
s="c6 c0 c7"><span></span></p><p class="c0"><img height="377" src="images/image0
6.png" width="588"></p><p class="c6 c0"><span></span></p><hr style="page-break-b
efore:always;display:none;"><p class="c6 c0"><span></span></p><h1 class="c0"><a
name="h.ymcy9fqorpug"></a><span>Step 6: Optimize layout for mobile devices</span
></h1><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Your app alrea
dy works on mobile, since many gestures emulate mouse events, such as clicks. Bu
t we can do better. In this step, you’ll make your app feel more native on
mobile by adding some code to control layout on mobile devices and by adding so
me specialized CSS styles.</span></p><h2 class="c0"><a name="h.v8hspt230iyp"></a
><span>What you will learn</span></h2><ol class="c10 lst-kix_wzk0mdv2qg9u-0 star
t" start="1"><li class="c16 c11 c0 c7"><span>Using a meta tag to control layout
on mobile devices</span></li><li class="c16 c11 c0"><span>CSS styles for mobile
devices</span></li></ol><h2 class="c0"><a name="h.10tsfye06kbe"></a><span>Concep
ts overview</span></h2><h3 class="c18 c9 c0"><a name="h.uu51nii9tdjq"></a><span
class="c33 c1">Control</span><span class="c33 c1"> layout on mobile devices
</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>The <meta&g
t; tag, with the viewport attribute, helps to optimize your site for mobile devi
ces. Here’s what the Mozilla developer website has to say about mobile-opt
imization:</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>A typ
ical mobile-optimized site contains something like the following:</span></p><p c
lass="c6 c0"><span></span></p><p class="c11 c0"><span class="c2"><meta name=&
quot;viewport" content="width=device-width, initial-scale=1, maximum-s
cale=1"></span></p><p class="c6 c0"><span></span></p><p class="c0"><span
>The width property controls the size of the viewport. It can be set to a specif
ic number of pixels, like width=600, or to the special value device-width, which
is the width of the screen in CSS pixels at a scale of 100%. (The content attri
bute also supports corresponding height and device-height values, which may be u
seful for pages with elements that change size or position based on the viewport
height.)</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>The in
itial-scale property controls the zoom level when the page is first loaded. The
maximum-scale, minimum-scale, and user-scalable properties control how users are
allowed to zoom the page in or out.</span></p><h3 class="c9 c0"><a name="h.3q4t
ho2o4biu"></a><span>CSS styles for mobile devices</span></h3><p class="c6 c0"><s
pan></span></p><p class="c0"><span>The @media rule allows different style rules
for different media in the same style sheet. Shown below are two rules, one whic
h applies when the app runs in an environment, such as a small mobile device, wh
ich has a maximum width of 500 pixels. The other applies when the app runs in an
environment that allows a larger width.</span></p><p class="c6 c0"><span></span
></p><p class="c11 c0"><span class="c2">@media all and (max-width: 500px) {</spa
n></p><p class="c11 c0"><span class="c2"> …</span></p><p class="c11
c0"><span class="c2">}</span></p><p class="c11 c0"><span class="c2">@media all
and (min-width: 501px) {</span></p><p class="c11 c0"><span class="c2"> &he
llip;</span></p><p class="c11 c0"><span class="c2">}
</span><span class="c2"> </span><span class="c2 c47"> </
span></p><h2 class="c0"><a name="h.jjv7ulrpc81s"></a><span>Walkthrough</span></h
2><h3 class="c9 c0"><a name="h.xg2egxktuosa"></a><span>Run the app in a small br
owser window</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Be
fore you start changing the code, run the app in a tiny window so you can emulat
e the app’s behavior on a mobile phone. You can contrast this behavior wit
h the revised version of the app at the end of this step.</span></p><p class="c6
c0"><span></span></p><p class="c0"><span>Run the app. Shrink the window down as
small as you can.</span></p><p class="c6 c0"><span></span></p><p class="c0"><sp
an>The UI is not too cluttered and has a double scroll bar. We can do better!</s
pan></p><p class="c6 c0"><span></span></p><p class="c0"><img height="272" src="i
mages/image01.png" width="400"></p><p class="c6 c0"><span></span></p><h3 class="
c9 c0"><a name="h.vngw9eips6yz"></a><span>Add meta viewport tag to HTML code</sp
an></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>O</span><spa
n>pen </span><span class="c1">web/index.html</span><span>.</span></p><p class="c
6 c0 c7"><span></span></p><p class="c0 c7"><span>At the top of the file, within
the </span><span><head></span><span> section add this meta tag:</span
></p><p class="c6 c0 c7"><span></span></p><a href="#" name="cc55c23dce922449740b
2782ba379e471cf2ed0b"></a><a href="#" name="31"></a><table cellpadding="0" cells
pacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0 c7
"><span class="c2">// web/index.html</span></p><p class="c5 c0 c7"><span class="
c2">…</span></p><p class="c5 c0 c7"><span class="c2"> <!-
- STEP 6: Add viewport meta tag to control layout on mobile devices --></span
></p><p class="c5 c0 c7"><span class="c2 c1"> <meta name="v
iewport"</span></p><p class="c5 c0 c7"><span class="c2 c1"> &n
bsp; content="width=device-width, initial-scale=1, maximum-sc
ale=1, user-scalable=no"></span></p><p class="c5 c0 c7"><span class="c2"
>…</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p>
<p class="c0"><span>This tag fixes the size of the app to the exact size of the
device.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Save you
r changes.</span></p><h3 class="c9 c0"><a name="h.c683e43ehs76"></a><span>Add CS
S styles for mobile</span></h3><p class="c6 c0"><span></span></p><p class="c0"><
span>Open </span><span class="c1">web/css.css</span><span>.</span></p><p class="
c6 c0"><span></span></p><p class="c0"><span>At the bottom of the CSS file, add a
ll of the code in bold (79 lines):</span></p><p class="c6 c0"><span></span></p><
a href="#" name="8c019440a77031fbfe7e164dfc4fbe6b68f77295"></a><a href="#" name=
"32"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c2
2"><td class="c20"><p class="c5 c0"><span class="c2">// web/css.css</span></p><p
class="c5 c0"><span class="c2">…</span></p><p class="c6 c5 c0"><span cla
ss="c2"></span></p><p class="c5 c0"><span class="c2">/* STEP 6: Add styles for m
obile devices */</span></p><p class="c5 c0"><span class="c2">/* Mobile styles. *
/</span></p><p class="c5 c0"><span class="c2 c1">@media all and (max-width: 500p
x) {</span></p><p class="c5 c0"><span class="c2 c1"> body {</span></p><p c
lass="c5 c0"><span class="c2 c1"> overflow: hidden;</span></p><p cl
ass="c5 c0"><span class="c2 c1"> }</span></p><p class="c6 c5 c0"><span cla
ss="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1"> #sidebar .touc
hed .item {</span></p><p class="c5 c0"><span class="c2 c1"> backgro
und-color:rgba(250, 150, 150, .8);</span></p><p class="c6 c5 c0"><span class="c2
c1"></span></p><p class="c5 c0"><span class="c2 c1"> -webkit-trans
ition: all .7s cubic-bezier(.65,-0.50,.76,1.32);</span></p><p class="c5 c0"><spa
n class="c2 c1"> -moz-transition: all .7s cubic-bezier(.65,-0.50,.7
6,1.32);</span></p><p class="c5 c0"><span class="c2 c1"> transition
: all .7s cubic-bezier(.65,-0.50,.76,1.32);</span></p><p class="c5 c0"><span cla
ss="c2 c1"> }</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p
><p class="c5 c0"><span class="c2 c1"> #sidebar {</span></p><p class="c5 c
0"><span class="c2 c1"> top: 0;</span></p><p class="c5 c0"><span cl
ass="c2 c1"> left: 0;</span></p><p class="c5 c0"><span class="c2 c1
"> right: 0;</span></p><p class="c5 c0"><span class="c2 c1">
bottom: 0;</span></p><p class="c5 c0"><span class="c2 c1"> w
idth: 100%;</span></p><p class="c5 c0"><span class="c2 c1"> -webkit
-transition: -webkit-transform 0.3s ease-in-out;</span></p><p class="c5 c0"><spa
n class="c2 c1"> -moz-transition: -moz-transform 0.3s ease-in-out;<
/span></p><p class="c5 c0"><span class="c2 c1"> transition: transfo
rm 0.3s ease-in-out;</span></p><p class="c5 c0"><span class="c2 c1">  
; -webkit-transform: translate3d(-20%, 0, 0);</span></p><p class="c5 c0"><span c
lass="c2 c1"> -moz-transform: translate3d(-20%, 0, 0);</span></p><p
class="c5 c0"><span class="c2 c1"> transform: translate3d(-20%, 0,
0);</span></p><p class="c5 c0"><span class="c2 c1"> }</span></p><p class=
"c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&
nbsp; #sidebar.active {</span></p><p class="c5 c0"><span class="c2 c1"> &n
bsp; -webkit-transform: translate3d(0, 0, 0);</span></p><p class="c5 c0"><span c
lass="c2 c1"> -moz-transform: translate3d(0, 0, 0);</span></p><p cl
ass="c5 c0"><span class="c2 c1"> transform: translate3d(0, 0, 0);</
span></p><p class="c5 c0"><span class="c2 c1"> }</span></p><p class="c6 c5
c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">
#sidebar .item.active .delete {</span></p><p class="c5 c0"><span class="c2 c1">&
nbsp; opacity: .7;</span></p><p class="c5 c0"><span class="c2 c1">
}</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0">
<span class="c2 c1"> #main {</span></p><p class="c5 c0"><span class="c2 c1
"> top: 0;</span></p><p class="c5 c0"><span class="c2 c1"> &n
bsp; left: 0;</span></p><p class="c5 c0"><span class="c2 c1"> right
: 0;</span></p><p class="c5 c0"><span class="c2 c1"> bottom: 0;</sp
an></p><p class="c5 c0"><span class="c2 c1"> -webkit-transition: -w
ebkit-transform 0.3s ease-in-out;</span></p><p class="c5 c0"><span class="c2 c1"
> -moz-transition: -moz-transform 0.3s ease-in-out;</span></p><p cl
ass="c5 c0"><span class="c2 c1"> transition: transform 0.3s ease-in
-out;</span></p><p class="c5 c0"><span class="c2 c1"> -webkit-trans
form: translate3d(100%, 0, 0);</span></p><p class="c5 c0"><span class="c2 c1">&n
bsp; -moz-transform: translate3d(100%, 0, 0);</span></p><p class="c5 c0">
<span class="c2 c1"> transform: translate3d(100%, 0, 0);</span></p>
<p class="c5 c0"><span class="c2 c1"> }</span></p><p class="c6 c5 c0"><spa
n class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1"> #main.act
ive {</span></p><p class="c5 c0"><span class="c2 c1"> -webkit-trans
form: translate3d(0, 0, 0);</span></p><p class="c5 c0"><span class="c2 c1"> 
; -moz-transform: translate3d(0, 0, 0);</span></p><p class="c5 c0"><span
class="c2 c1"> transform: translate3d(0, 0, 0);</span></p><p class=
"c5 c0"><span class="c2 c1"> }</span></p><p class="c6 c5 c0"><span class="
c2 c1"></span></p><p class="c5 c0"><span class="c2 c1"> #main .title butto
n {</span></p><p class="c5 c0"><span class="c2 c1"> display: block;
</span></p><p class="c5 c0"><span class="c2 c1"> }</span></p><p class="c6
c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1"> 
; #main .title .input-wrap {</span></p><p class="c5 c0"><span class="c2 c1">&nbs
p; margin-left: 40px;</span></p><p class="c0 c5"><span class="c2 c1">&nbs
p; }</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c
0"><span class="c2 c1"> /* Let's not go there. It is a silly place. */
</span></p><p class="c5 c0"><span class="c2 c1"> #main:only-of-type {</spa
n></p><p class="c5 c0"><span class="c2 c1"> -moz-transition: none;<
/span></p><p class="c5 c0"><span class="c2 c1"> -webkit-transition:
none;</span></p><p class="c5 c0"><span class="c2 c1"> transition:
none;</span></p><p class="c5 c0"><span class="c2 c1"> }</span></p><p class
="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">
#main:only-of-type button {</span></p><p class="c5 c0"><span class="c2 c1
"> display: none;</span></p><p class="c5 c0"><span class="c2 c1">&n
bsp; }</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5
c0"><span class="c2 c1"> #main:only-of-type .title .input-wrap {</span></
p><p class="c5 c0"><span class="c2 c1"> margin-left: 0;</span></p><
p class="c5 c0"><span class="c2 c1"> }</span></p><p class="c5 c0"><span cl
ass="c2 c1">}</span></p></td></tr></tbody></table><p class="c6 c0"><span></span>
</p><p class="c0"><span>This code separates the app into two panels: one for the
index of documents and one for the content of the current document. Choosing a
document from the index slides the content panel into view. In the contents pane
l, a new button slides from the documents contents back to the index.</span></p>
<p class="c6 c0"><span></span></p><p class="c0"><span>Save your changes.</span><
/p><p class="c6 c0"><span></span></p><h3 class="c9 c0"><a name="h.vcike6sk25tj">
</a><span>Run the revised version of the app</span></h3><p class="c6 c0"><span><
/span></p><p class="c0"><span>Run the new version of the app in your browser and
shrink the window down as small as possible once again.</span></p><p class="c6
c0"><span></span></p><p class="c0"><span>On the document index panel, you see a
list of the documents you’ve created.</span></p><p class="c6 c0"><span></s
pan></p><p class="c0"><span>Click a document to view its contents.</span></p><p
class="c6 c0"><span></span></p><p class="c0"><img height="272" src="images/image
16.png" width="400"></p><p class="c6 c0"><span></span></p><p class="c0"><span>On
the document contents panel, a small button with an arrow </span><span class="c
35">‘</span><span class="c35"><’</span><span> appears to the
left of the document title.</span></p><p class="c6 c0"><span></span></p><p clas
s="c0"><span>Click it to return to the document index.</span></p><p class="c6 c0
"><span></span></p><p class="c0"><img height="272" src="images/image41.png" widt
h="400"></p><p class="c6 c0"><span></span></p><h3 class="c0"><a name="h.6wxrrse7
px8b"></a><span>Run the finished app on your phone</span></h3><p class="c6 c0"><
span></span></p><p class="c0"><span>You can find the deployed app at:</span></p>
<p class="c6 c0"><span></span></p><p class="c0"><span class="c21 c1"><a class="c
14" href="http://dart-lang.github.io/io-2013-dart-codelab/deploy/out/index.html"
>http://dart-lang.github.io/io-2013-dart-codelab/deploy/out/index.html</a></span
><span class="c1"><br></span></p><p class="c0"><span>A shortcut: </span><span cl
ass="c21 c1"><a class="c14" href="http://goo.gl/hC0NM">goo.gl/hC0NM</a></span><s
pan class="c1"> <br></span></p><h1 class="c0"><a name="h.itu7egiz6osy"></a>
<span>What next?</span></h1><p class="c6 c0 c7"><span></span></p><p class="c0 c7
"><span>Congratulations, you’ve completed the code lab! If you’d lik
e to do more Dart, check out our website and open-source projects:</span></p><p
class="c6 c0 c7"><span></span></p><ul class="c10 lst-kix_t7any4lo9hoq-0 start"><
li class="c16 c11 c0 c7"><span class="c21"><a class="c14" href="http://www.dartl
ang.org">www.dartlang.org</a></span><span> (our website)</span></li><li cla
ss="c16 c11 c0 c7"><span class="c21"><a class="c14" href="http://pub.dartlang.or
g">pub.dartlang.org</a></span><span> (packages available for you to use)</s
pan></li><li class="c16 c11 c0 c7"><span class="c21"><a class="c14" href="http:/
/dart.googlecode.com">dart.googlecode.com</a></span><span> (Dart open-sourc
e project)</span></li><li class="c16 c11 c0 c7"><span class="c21"><a class="c14"
href="https://github.com/dart-lang/dartlang.org">github.com/dart-lang/dartlang.
org</a></span><span><a class="c14" href="https://github.com/dart-lang/dartlang.o
rg"> (the so</a></span><span>urce for </span><span class="c21"><a class="c1
4" href="http://www.dartlang.org">www.dartlang.org</a></span><span>; pull reques
ts welcome!)</span></li></ul><p class="c6 c0 c7"><span></span></p><div><p class=
"c6 c0 c48"><span></span></p></div><div class="c53"><p class="c5 c0 c7 c24"><a h
ref="#cmnt_ref1" name="cmnt1">[a]</a><span class="c37">Chris Buckett:</span></p>
<p class="c24 c5 c0 c7"><span class="c37">This can also be in an external file.<
/span></p></div></body></html> |
Chromium Code Reviews
Issue 26922002:
removing Web UI tutorials, updating remaining 4 to current release, + review pass (Closed)
Base URL: https://github.com/dart-lang/dartlang.org.git@master