| 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 35913002:
Try Dart 1 hour experience first draft (Closed)
Base URL: https://github.com/dart-lang/dartlang.org.git@master
