all repos — h3rald @ 5173cc418660354361abf80241d6860e80ab318e

The sources of https://h3rald.com

assets/h3/H3_DeveloperGuide.htm

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
 100
 101
 102
 103
 104
 105
 106
 107
 108
 109
 110
 111
 112
 113
 114
 115
 116
 117
 118
 119
 120
 121
 122
 123
 124
 125
 126
 127
 128
 129
 130
 131
 132
 133
 134
 135
 136
 137
 138
 139
 140
 141
 142
 143
 144
 145
 146
 147
 148
 149
 150
 151
 152
 153
 154
 155
 156
 157
 158
 159
 160
 161
 162
 163
 164
 165
 166
 167
 168
 169
 170
 171
 172
 173
 174
 175
 176
 177
 178
 179
 180
 181
 182
 183
 184
 185
 186
 187
 188
 189
 190
 191
 192
 193
 194
 195
 196
 197
 198
 199
 200
 201
 202
 203
 204
 205
 206
 207
 208
 209
 210
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220
 221
 222
 223
 224
 225
 226
 227
 228
 229
 230
 231
 232
 233
 234
 235
 236
 237
 238
 239
 240
 241
 242
 243
 244
 245
 246
 247
 248
 249
 250
 251
 252
 253
 254
 255
 256
 257
 258
 259
 260
 261
 262
 263
 264
 265
 266
 267
 268
 269
 270
 271
 272
 273
 274
 275
 276
 277
 278
 279
 280
 281
 282
 283
 284
 285
 286
 287
 288
 289
 290
 291
 292
 293
 294
 295
 296
 297
 298
 299
 300
 301
 302
 303
 304
 305
 306
 307
 308
 309
 310
 311
 312
 313
 314
 315
 316
 317
 318
 319
 320
 321
 322
 323
 324
 325
 326
 327
 328
 329
 330
 331
 332
 333
 334
 335
 336
 337
 338
 339
 340
 341
 342
 343
 344
 345
 346
 347
 348
 349
 350
 351
 352
 353
 354
 355
 356
 357
 358
 359
 360
 361
 362
 363
 364
 365
 366
 367
 368
 369
 370
 371
 372
 373
 374
 375
 376
 377
 378
 379
 380
 381
 382
 383
 384
 385
 386
 387
 388
 389
 390
 391
 392
 393
 394
 395
 396
 397
 398
 399
 400
 401
 402
 403
 404
 405
 406
 407
 408
 409
 410
 411
 412
 413
 414
 415
 416
 417
 418
 419
 420
 421
 422
 423
 424
 425
 426
 427
 428
 429
 430
 431
 432
 433
 434
 435
 436
 437
 438
 439
 440
 441
 442
 443
 444
 445
 446
 447
 448
 449
 450
 451
 452
 453
 454
 455
 456
 457
 458
 459
 460
 461
 462
 463
 464
 465
 466
 467
 468
 469
 470
 471
 472
 473
 474
 475
 476
 477
 478
 479
 480
 481
 482
 483
 484
 485
 486
 487
 488
 489
 490
 491
 492
 493
 494
 495
 496
 497
 498
 499
 500
 501
 502
 503
 504
 505
 506
 507
 508
 509
 510
 511
 512
 513
 514
 515
 516
 517
 518
 519
 520
 521
 522
 523
 524
 525
 526
 527
 528
 529
 530
 531
 532
 533
 534
 535
 536
 537
 538
 539
 540
 541
 542
 543
 544
 545
 546
 547
 548
 549
 550
 551
 552
 553
 554
 555
 556
 557
 558
 559
 560
 561
 562
 563
 564
 565
 566
 567
 568
 569
 570
 571
 572
 573
 574
 575
 576
 577
 578
 579
 580
 581
 582
 583
 584
 585
 586
 587
 588
 589
 590
 591
 592
 593
 594
 595
 596
 597
 598
 599
 600
 601
 602
 603
 604
 605
 606
 607
 608
 609
 610
 611
 612
 613
 614
 615
 616
 617
 618
 619
 620
 621
 622
 623
 624
 625
 626
 627
 628
 629
 630
 631
 632
 633
 634
 635
 636
 637
 638
 639
 640
 641
 642
 643
 644
 645
 646
 647
 648
 649
 650
 651
 652
 653
 654
 655
 656
 657
 658
 659
 660
 661
 662
 663
 664
 665
 666
 667
 668
 669
 670
 671
 672
 673
 674
 675
 676
 677
 678
 679
 680
 681
 682
 683
 684
 685
 686
 687
 688
 689
 690
 691
 692
 693
 694
 695
 696
 697
 698
 699
 700
 701
 702
 703
 704
 705
 706
 707
 708
 709
 710
 711
 712
 713
 714
 715
 716
 717
 718
 719
 720
 721
 722
 723
 724
 725
 726
 727
 728
 729
 730
 731
 732
 733
 734
 735
 736
 737
 738
 739
 740
 741
 742
 743
 744
 745
 746
 747
 748
 749
 750
 751
 752
 753
 754
 755
 756
 757
 758
 759
 760
 761
 762
 763
 764
 765
 766
 767
 768
 769
 770
 771
 772
 773
 774
 775
 776
 777
 778
 779
 780
 781
 782
 783
 784
 785
 786
 787
 788
 789
 790
 791
 792
 793
 794
 795
 796
 797
 798
 799
 800
 801
 802
 803
 804
 805
 806
 807
 808
 809
 810
 811
 812
 813
 814
 815
 816
 817
 818
 819
 820
 821
 822
 823
 824
 825
 826
 827
 828
 829
 830
 831
 832
 833
 834
 835
 836
 837
 838
 839
 840
 841
 842
 843
 844
 845
 846
 847
 848
 849
 850
 851
 852
 853
 854
 855
 856
 857
 858
 859
 860
 861
 862
 863
 864
 865
 866
 867
 868
 869
 870
 871
 872
 873
 874
 875
 876
 877
 878
 879
 880
 881
 882
 883
 884
 885
 886
 887
 888
 889
 890
 891
 892
 893
 894
 895
 896
 897
 898
 899
 900
 901
 902
 903
 904
 905
 906
 907
 908
 909
 910
 911
 912
 913
 914
 915
 916
 917
 918
 919
 920
 921
 922
 923
 924
 925
 926
 927
 928
 929
 930
 931
 932
 933
 934
 935
 936
 937
 938
 939
 940
 941
 942
 943
 944
 945
 946
 947
 948
 949
 950
 951
 952
 953
 954
 955
 956
 957
 958
 959
 960
 961
 962
 963
 964
 965
 966
 967
 968
 969
 970
 971
 972
 973
 974
 975
 976
 977
 978
 979
 980
 981
 982
 983
 984
 985
 986
 987
 988
 989
 990
 991
 992
 993
 994
 995
 996
 997
 998
 999
 1000
 1001
 1002
 1003
 1004
 1005
 1006
 1007
 1008
 1009
 1010
 1011
 1012
 1013
 1014
 1015
 1016
 1017
 1018
 1019
 1020
 1021
 1022
 1023
 1024
 1025
 1026
 1027
 1028
 1029
 1030
 1031
 1032
 1033
 1034
 1035
 1036
 1037
 1038
 1039
 1040
 1041
 1042
 1043
 1044
 1045
 1046
 1047
 1048
 1049
 1050
 1051
 1052
 1053
 1054
 1055
 1056
 1057
 1058
 1059
 1060
 1061
 1062
 1063
 1064
 1065
 1066
 1067
 1068
 1069
 1070
 1071
 1072
 1073
 1074
 1075
 1076
 1077
 1078
 1079
 1080
 1081
 1082
 1083
 1084
 1085
 1086
 1087
 1088
 1089
 1090
 1091
 1092
 1093
 1094
 1095
 1096
 1097
 1098
 1099
 1100
 1101
 1102
 1103
 1104
 1105
 1106
 1107
 1108
 1109
 1110
 1111
 1112
 1113
 1114
 1115
 1116
 1117
 1118
 1119
 1120
 1121
 1122
 1123
 1124
 1125
 1126
 1127
 1128
 1129
 1130
 1131
 1132
 1133
 1134
 1135
 1136
 1137
 1138
 1139
 1140
 1141
 1142
 1143
 1144
 1145
 1146
 1147
 1148
 1149
 1150
 1151
 1152
 1153
 1154
 1155
 1156
 1157
 1158
 1159
 1160
 1161
 1162
 1163
 1164
 1165
 1166
 1167
 1168
 1169
 1170
 1171
 1172
 1173
 1174
 1175
 1176
 1177
 1178
 1179
 1180
 1181
 1182
 1183
 1184
 1185
 1186
 1187
 1188
 1189
 1190
 1191
 1192
 1193
 1194
 1195
 1196
 1197
 1198
 1199
 1200
 1201
 1202
 1203
 1204
 1205
 1206
 1207
 1208
 1209
 1210
 1211
 1212
 1213
 1214
 1215
 1216
 1217
 1218
 1219
 1220
 1221
 1222
 1223
 1224
 1225
 1226
 1227
 1228
 1229
 1230
 1231
 1232
 1233
 1234
 1235
 1236
 1237
 1238
 1239
 1240
 1241
 1242
 1243
 1244
 1245
 1246
 1247
 1248
 1249
 1250
 1251
 1252
 1253
 1254
 1255
 1256
 1257
 1258
 1259
 1260
 1261
 1262
 1263
 1264
 1265
 1266
 1267
 1268
 1269
 1270
 1271
 1272
 1273
 1274
 1275
 1276
 1277
 1278
 1279
 1280
 1281
 1282
 1283
 1284
 1285
 1286
 1287
 1288
 1289
 1290
 1291
 1292
 1293
 1294
 1295
 1296
 1297
 1298
 1299
 1300
 1301
 1302
 1303
 1304
 1305
 1306
 1307
 1308
 1309
 1310
 1311
 1312
 1313
 1314
 1315
 1316
 1317
 1318
 1319
 1320
 1321
 1322
 1323
 1324
 1325
 1326
 1327
 1328
 1329
 1330
 1331
 1332
 1333
 1334
 1335
 1336
 1337
 1338
 1339
 1340
 1341
 1342
 1343
 1344
 1345
 1346
 1347
 1348
 1349
 1350
 1351
 1352
 1353
 1354
 1355
 1356
 1357
 1358
 1359
 1360
 1361
 1362
 1363
 1364
 1365
 1366
 1367
 1368
 1369
 1370
 1371
 1372
 1373
 1374
 1375
 1376
 1377
 1378
 1379
 1380
 1381
 1382
 1383
 1384
 1385
 1386
 1387
 1388
 1389
 1390
 1391
 1392
 1393
 1394
 1395
 1396
 1397
 1398
 1399
 1400
 1401
 1402
 1403
 1404
 1405
 1406
 1407
 1408
 1409
 1410
 1411
 1412
 1413
 1414
 1415
 1416
 1417
 1418
 1419
 1420
 1421
 1422
 1423
 1424
 1425
 1426
 1427
 1428
 1429
 1430
 1431
 1432
 1433
 1434
 1435
 1436
 1437
 1438
 1439
 1440
 1441
 1442
 1443
 1444
 1445
 1446
 1447
 1448
 1449
 1450
 1451
 1452
 1453
 1454
 1455
 1456
 1457
 1458
 1459
 1460
 1461
 1462
 1463
 1464
 1465
 1466
 1467
 1468
 1469
 1470
 1471
 1472
 1473
 1474
 1475
 1476
 1477
 1478
 1479
 1480
 1481
 1482
 1483
 1484
 1485
 1486
 1487
 1488
 1489
 1490
 1491
 1492
 1493
 1494
 1495
 1496
 1497
 1498
 1499
 1500
 1501
 1502
 1503
 1504
 1505
 1506
 1507
 1508
 1509
 1510
 1511
 1512
 1513
 1514
 1515
 1516
 1517
 1518
 1519
 1520
 1521
 1522
 1523
 1524
 1525
 1526
 1527
 1528
 1529
 1530
 1531
 1532
 1533
 1534
 1535
 1536
 1537
 1538
 1539
 1540
 1541
 1542
 1543
 1544
 1545
 1546
 1547
 1548
 1549
 1550
 1551
 1552
 1553
 1554
 1555
 1556
 1557
 1558
 1559
 1560
 1561
 1562
 1563
 1564
 1565
 1566
 1567
 1568
 1569
 1570
 1571
 1572
 1573
 1574
 1575
 1576
 1577
 1578
 1579
 1580
 1581
 1582
 1583
 1584
 1585
 1586
 1587
 1588
 1589
 1590
 1591
 1592
 1593
 1594
 1595
 1596
 1597
 1598
 1599
 1600
 1601
 1602
 1603
 1604
 1605
 1606
 1607
 1608
 1609
 1610
 1611
 1612
 1613
 1614
 1615
 1616
 1617
 1618
 1619
 1620
 1621
 1622
 1623
 1624
 1625
 1626
 1627
 1628
 1629
 1630
 1631
 1632
 1633
 1634
 1635
 1636
 1637
 1638
 1639
 1640
 1641
 1642
 1643
 1644
 1645
 1646
 1647
 1648
 1649
 1650
 1651
 1652
 1653
 1654
 1655
 1656
 1657
 1658
 1659
 1660
 1661
 1662
 1663
 1664
 1665
 1666
 1667
 1668
 1669
 1670
 1671
 1672
 1673
 1674
 1675
 1676
 1677
 1678
 1679
 1680
 1681
 1682
 1683
 1684
 1685
 1686
 1687
 1688
 1689
 1690
 1691
 1692
 1693
 1694
 1695
 1696
 1697
 1698
 1699
 1700
 1701
 1702
 1703
 1704
 1705
 1706
 1707
 1708
 1709
 1710
 1711
 1712
 1713
 1714
 1715
 1716
 1717
 1718
 1719
 1720
 1721
 1722
 1723
 1724
 1725
 1726
 1727
 1728
 1729
 1730
 1731
 1732
 1733
 1734
 1735
 1736
 1737
 1738
 1739
 1740
 1741
 1742
 1743
 1744
 1745
 1746
 1747
 1748
 1749
 1750
 1751
 1752
 1753
 1754
 1755
 1756
 1757
 1758
 1759
 1760
 1761
 1762
 1763
 1764
 1765
 1766
 1767
 1768
 1769
 1770
 1771
 1772
 1773
 1774
 1775
 1776
 1777
 1778
 1779
 1780
 1781
 1782
 1783
 1784
 1785
 1786
 1787
 1788
 1789
 1790
 1791
 1792
 1793
 1794
 1795
 1796
 1797
 1798
 1799
 1800
 1801
 1802
 1803
 1804
 1805
 1806
 1807
 1808
 1809
 1810
 1811
 1812
 1813
 1814
 1815
 1816
 1817
 1818
 1819
 1820
 1821
 1822
 1823
 1824
 1825
 1826
 1827
 1828
 1829
 1830
 1831
 1832
 1833
 1834
 1835
 1836
 1837
 1838
 1839
 1840
 1841
 1842
 1843
 1844
 1845
 1846
 1847
 1848
 1849
 1850
 1851
 1852
 1853
 1854
 1855
 1856
 1857
 1858
 1859
 1860
 1861
 1862
 1863
 1864
 1865
 1866
 1867
 1868
 1869
 1870
 1871
 1872
 1873
 1874
 1875
 1876
 1877
 1878
 1879
 1880
 1881
 1882
 1883
 1884
 1885
 1886
 1887
 1888
 1889
 1890
 1891
 1892
 1893
 1894
 1895
 1896
 1897
 1898
 1899
 1900
 1901
 1902
 1903
 1904
 1905
 1906
 1907
 1908
 1909
 1910
 1911
 1912
 1913
 1914
 1915
 1916
 1917
 1918
 1919
 1920
 1921
 1922
 1923
 1924
 1925
 1926
 1927
 1928
 1929
 1930
 1931
 1932
 1933
 1934
 1935
 1936
 1937
 1938
 1939
 1940
 1941
 1942
 1943
 1944
 1945
 1946
 1947
 1948
 1949
 1950
 1951
 1952
 1953
 1954
 1955
 1956
 1957
 1958
 1959
 1960
 1961
 1962
 1963
 1964
 1965
 1966
 1967
 1968
 1969
 1970
 1971
 1972
 1973
 1974
 1975
 1976
 1977
 1978
 1979
 1980
 1981
 1982
 1983
 1984
 1985
 1986
 1987
 1988
 1989
 1990
 1991
 1992
 1993
 1994
 1995
 1996
 1997
 1998
 1999
 2000
 2001
 2002
 2003
 2004
 2005
 2006
 2007
 2008
 2009
 2010
 2011
 2012
 2013
 2014
 2015
 2016
 2017
 2018
 2019
 2020
 2021
 2022
 2023
 2024
 2025
 2026
 2027
 2028
 2029
 2030
 2031
 2032
 2033
 2034
 2035
 2036
 2037
 2038
 2039
 2040
 2041
 2042
 2043
 2044
 2045
 2046
 2047
 2048
 2049
 2050
 2051
 2052
 2053
 2054
 2055
 2056
 2057
 2058
 2059
 2060
 2061
 2062
 2063
 2064
 2065
 2066
 2067
 2068
 2069
 2070
 2071
 2072
 2073
 2074
 2075
 2076
 2077
 2078
 2079
 2080
 2081
 2082
 2083
 2084
 2085
 2086
 2087
 2088
 2089
 2090
 2091
 2092
 2093
 2094
 2095
 2096
 2097
 2098
 2099
 2100
 2101
 2102
 2103
 2104
 2105
 2106
 2107
 2108
 2109
 2110
 2111
 2112
 2113
 2114
 2115
 2116
 2117
 2118
 2119
 2120
 2121
 2122
 2123
 2124
 2125
 2126
 2127
 2128
 2129
 2130
 2131
 2132
 2133
 2134
 2135
 2136
 2137
 2138
 2139
 2140
 2141
 2142
 2143
 2144
 2145
 2146
 2147
 2148
 2149
 2150
 2151
 2152
 2153
 2154
 2155
 2156
 2157
 2158
 2159
 2160
 2161
 2162
 2163
 2164
 2165
 2166
 2167
 2168
 2169
 2170
 2171
 2172
 2173
 2174
 2175
 2176
 2177
 2178
 2179
 2180
 2181
 2182
 2183
 2184
 2185
 2186
 2187
 2188
 2189
 2190
 2191
 2192
 2193
 2194
 2195
 2196
 2197
 2198
 2199
 2200
 2201
 2202
 2203
 2204
 2205
 2206
 2207
 2208
 2209
 2210
 2211
 2212
 2213
 2214
 2215
 2216
 2217
 2218
 2219
 2220
 2221
 2222
 2223
 2224
 2225
 2226
 2227
 2228
 2229
 2230
 2231
 2232
 2233
 2234
 2235
 2236
 2237
 2238
 2239
 2240
 2241
 2242
 2243
 2244
<!doctype html>
<html lang="en">
<head>
  <title>H3 Microframework Developer Guide</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Fabio Cevasco">
  <meta name="generator" content="HastyScribe">
  <style>/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block;
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent;
}
/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted;
}
/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}
/* ==========================================================================
   Typography
   ========================================================================== */
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}
/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre-wrap;
}
/**
 * Set consistent quote types.
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* ==========================================================================
   Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {
  border: 0;
}
/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden;
}
/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0;
}
/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  box-sizing: content-box;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
}
/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* Fonts */
/* Colors */
.mix-monospace {
  font-family: monospace;
  font-weight: 400;
}
.mix-no-border-radius {
  border-radius: 0px;
}
@media screen and (max-width: 639px) {
  .mix-responsive {
    overflow-y: hidden;
    overflow-x: auto;
  }
  .mix-responsive td {
    white-space: nowrap;
  }
}
body {
  background-color: #fff;
  margin: 0 auto;
  height: 100%;
  zoom: 1;
  font-weight: 400;
  letter-spacing: normal;
  word-spacing: normal;
  color: #333;
  font: 15px sans-serif;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  width: 960px;
  hyphens: auto;
  text-align: justify;
}
@media screen and (max-width: 659px) {
  body {
    width: 100%;
  }
}
@media screen and (min-width: 660px) {
  body {
    width: 660px;
  }
}
@media screen and (min-width: 880px) {
  body {
    width: 880px;
  }
}
#main,
#footer,
#header {
  width: 94%;
  margin: auto;
}
#footer {
  border-top: 1px solid #ddd;
  text-align: center;
  font-size: 75%;
}
#footer p {
  line-height: 0.6em;
}
#toc {
  margin-top: -10px;
}
#toc ul {
  list-style-type: none;
  padding-left: 20px;
}
#toc > ul {
  padding-left: 0;
}
/* Lists */
ul,
ol {
  padding-left: 30px;
}
li p {
  margin: 0 auto;
}
.unstyled li {
  list-style-type: none;
}
dl dt {
  font-weight: 700;
}
dl dd {
  padding: 0 0 0.2em 0;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  color: #111;
  border-bottom: 1px solid #ddd;
}
h1 {
  text-align: center;
}
/* Blocks */
blockquote {
  border-left: 3px solid #dedede;
  padding: 0px 10px;
  margin: 10px 0;
  font-style: italic;
}
pre {
  font-family: monospace;
  font-weight: 400;
  color: #222;
  white-space: pre-wrap;
  margin: auto;
  padding: 0;
}
@media screen and (max-width: 639px) {
  pre {
    overflow-y: hidden;
    overflow-x: auto;
  }
  pre td {
    white-space: nowrap;
  }
}
pre code {
  box-shadow: none;
  border: none;
  line-height: 1.2em;
}
.responsive {
  width: 100%;
}
@media screen and (max-width: 639px) {
  .responsive {
    overflow-y: hidden;
    overflow-x: auto;
  }
  .responsive td {
    white-space: nowrap;
  }
}
table {
  border-collapse: collapse;
  margin: 15px auto;
  border-spacing: 0;
  empty-cells: show;
  min-width: 100%;
}
table thead {
  background: #f8f8f8;
  color: #222;
  text-align: left;
  vertical-align: bottom;
}
table td,
table th {
  background-color: transparent;
  border: 1px solid #999;
  font-size: inherit;
  margin: 0;
  overflow: visible;
  padding: 6px 12px;
}
address {
  font-style: italic;
  color: #999;
}
hr {
  border: 0;
  height: 1px;
  background: #333;
  background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
.center {
  margin: auto;
  text-align: center;
}
/* Inline */
[class^="fa-"]:before,
[href^=http]:before,
[href^=mailto]:before,
[href^=git]:before,
[href^=tel]:before,
[href^=magnet]:before,
[href='#document-top']:before,
[class^="badge-"]:before {
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  box-sizing: border-box;
  content: ' ';
  display: inline-block;
  vertical-align: text-top;
}
.tip > p:first-child:before,
.warning > p:first-child:before,
.sidebar > p:first-child:before,
.note > p:first-child:before {
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  box-sizing: border-box;
  content: ' ';
  display: inline-block;
  vertical-align: text-top;
  margin-right: 2px;
}
[href^=http]:before,
[href^=mailto]:before,
[href^=git]:before,
[href^=tel]:before,
[href^=magnet]:before {
  margin-right: 2px;
}
[href='#document-top'] {
  float: right;
}
[href='#document-top']:before {
  width: 12px;
  height: 12px;
}
#footer a:before {
  background: none;
}
#footer a:hover {
  text-decoration: none;
}
#footer a:after {
  content: none;
}
code,
span.code {
  font-family: monospace;
  font-weight: 400;
  hyphens: none;
  color: #B2361E;
  font-size: 85%;
}
strong code,
b code {
  font-weight: 700;
}
kbd,
span.kbd {
  color: #222;
  background-color: #f8f8f8;
  padding: 0 3px 0;
  display: inline-block;
  width: auto;
  margin: 1px;
  border-radius: 2px;
  background-clip: padding-box;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: monospace;
  font-weight: 700;
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  line-height: 1em;
  font-size: 80%;
  hyphens: none;
}
mark,
span.mark {
  padding: 0 1px;
  color: #222;
}
abbr,
span.abbr {
  font-variant: small-caps;
  font-weight: 700;
  hyphens: none;
}
abbr:hover,
span.abbr:hover {
  cursor: help;
}
samp,
span.samp {
  font-size: 90%;
  color: #222;
  background-color: transparent;
  padding: 0 3px 0;
  display: inline-block;
  width: auto;
  margin: 1px;
  border-radius: 2px;
  background-clip: padding-box;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  hyphens: none;
}
var,
span.var {
  font-size: 90%;
  font-family: monospace;
  font-weight: 700;
  font-style: normal;
  hyphens: none;
}
cite,
span.cite {
  font-weight: 700;
  font-style: italic;
  hyphens: none;
}
q,
span.q {
  font-style: italic;
  color: #666;
  hyphens: none;
}
span.tt,
span.cmd,
span.opt,
span.arg,
span.kwd,
span.ext,
span.file,
span.dir {
  font-size: 90%;
  font-family: monospace;
  font-weight: 400;
  hyphens: none;
}
span.ext,
span.kwd {
  font-weight: 700;
}
img {
  max-width: 100%;
}
/* Links */
a,
a:visited {
  color: #4183c4;
  text-decoration: none;
}
a:hover,
a:visited:hover {
  text-decoration: underline;
}
a.hastyscribe-logo:before {
  display: inline;
}
a.hastyscribe-logo img {
  vertical-align: middle;
}
/* Checkboxes */
li.github_checkbox {
  list-style-type: none;
}
.note {
  background-clip: padding-box;
  border-radius: 3px;
  margin: 10px auto;
  padding: 2px 4px 0 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  color: #264c72;
  background-color: #d8ebf8;
  border: 1px solid #A4D1EF;
  font-size: 95%;
}
.note code,
.note samp,
.note pre {
  color: #264c72;
}
.note a {
  color: #264c72;
}
.note p {
  margin: 0 auto;
}
@media screen and (min-width: 880px) {
  .note {
    margin-left: 80px;
    margin-right: 80px;
  }
}
.note > p {
  margin: 0 auto;
}
.note > p:first-child {
  font-weight: 700;
  color: #264c72;
}
.note pre,
.note code {
  color: #19324c;
}
.note a {
  color: #132639;
}
.tip {
  background-clip: padding-box;
  border-radius: 3px;
  margin: 10px auto;
  padding: 2px 4px 0 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  color: #009926;
  background-color: #d8f5cd;
  border: 1px solid #B0EB99;
  font-size: 95%;
}
.tip code,
.tip samp,
.tip pre {
  color: #009926;
}
.tip a {
  color: #264c72;
}
.tip p {
  margin: 0 auto;
}
@media screen and (min-width: 880px) {
  .tip {
    margin-left: 80px;
    margin-right: 80px;
  }
}
.tip > p {
  margin: 0 auto;
}
.tip > p:first-child {
  font-weight: 700;
  color: #009926;
}
.tip pre,
.tip code {
  color: #006619;
}
.tip a {
  color: #004d13;
}
.warning {
  background-clip: padding-box;
  border-radius: 3px;
  margin: 10px auto;
  padding: 2px 4px 0 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  color: #705400;
  background-color: #FFEBAD;
  border: 1px solid #FFDB70;
  font-size: 95%;
}
.warning code,
.warning samp,
.warning pre {
  color: #705400;
}
.warning a {
  color: #264c72;
}
.warning p {
  margin: 0 auto;
}
@media screen and (min-width: 880px) {
  .warning {
    margin-left: 80px;
    margin-right: 80px;
  }
}
.warning > p {
  margin: 0 auto;
}
.warning > p:first-child {
  font-weight: 700;
  color: #705400;
}
.warning pre,
.warning code {
  color: #3d2e00;
}
.warning a {
  color: #241b00;
}
.blank-sidebar {
  background-clip: padding-box;
  border-radius: 3px;
  margin: 10px auto;
  padding: 2px 4px 0 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  color: #555;
  background-color: #fefefe;
  border: 1px solid #fefefe;
  font-size: 95%;
}
.blank-sidebar code,
.blank-sidebar samp,
.blank-sidebar pre {
  color: #555;
}
.blank-sidebar a {
  color: #264c72;
}
.blank-sidebar p {
  margin: 0 auto;
}
@media screen and (min-width: 880px) {
  .blank-sidebar {
    margin-left: 80px;
    margin-right: 80px;
  }
}
.blank-sidebar > p {
  margin: 0 auto;
}
.blank-sidebar > p:first-child {
  font-weight: 700;
  color: #555;
}
.blank-sidebar pre,
.blank-sidebar code {
  color: #3b3b3b;
}
.blank-sidebar a {
  color: #2f2f2f;
}
.sidebar {
  background-clip: padding-box;
  border-radius: 3px;
  margin: 10px auto;
  padding: 2px 4px 0 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  color: #555;
  background-color: #f8f8f8;
  border: 1px solid #f8f8f8;
  font-size: 95%;
}
.sidebar code,
.sidebar samp,
.sidebar pre {
  color: #555;
}
.sidebar a {
  color: #264c72;
}
.sidebar p {
  margin: 0 auto;
}
@media screen and (min-width: 880px) {
  .sidebar {
    margin-left: 80px;
    margin-right: 80px;
  }
}
.sidebar > p {
  margin: 0 auto;
}
.sidebar > p:first-child {
  font-weight: 700;
  color: #555;
}
.sidebar pre,
.sidebar code {
  color: #3b3b3b;
}
.sidebar a {
  color: #2f2f2f;
}
.output {
  background-clip: padding-box;
  border-radius: 3px;
  margin: 10px auto;
  padding: 2px 4px 0 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  color: #555;
  background-color: #f8f8f8;
  border: 1px solid #f8f8f8;
}
.output code,
.output samp,
.output pre {
  color: #555;
}
.output a {
  color: #264c72;
}
.output p {
  margin: 0 auto;
}
@media screen and (min-width: 880px) {
  .output {
    margin-left: 80px;
    margin-right: 80px;
  }
}
.terminal {
  background-clip: padding-box;
  border-radius: 3px;
  margin: 10px auto;
  padding: 2px 4px 0 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  color: #eee;
  background-color: #222;
  border: 1px solid #ccc;
  hyphens: none;
  padding: 0 3px;
  border: 2px solid #999;
  white-space: pre-wrap;
  border-top: 10px solid #999;
}
.terminal code,
.terminal samp,
.terminal pre {
  color: #eee;
}
.terminal a {
  color: #264c72;
}
.terminal p {
  margin: 0 auto;
}
@media screen and (min-width: 880px) {
  .terminal {
    margin-left: 80px;
    margin-right: 80px;
  }
}
@media screen and (max-width: 639px) {
  .terminal {
    overflow-y: hidden;
    overflow-x: auto;
  }
  .terminal td {
    white-space: nowrap;
  }
}
.terminal > p,
.terminal > p:first-child {
  margin-top: -40px;
  margin-bottom: 0;
  text-shadow: none;
  font-weight: 400;
  font-family: monospace;
  font-size: 85%;
  color: #eee;
}
.terminal > p code,
.terminal > p:first-child code,
.terminal > p pre,
.terminal > p:first-child pre,
.terminal > p samp,
.terminal > p:first-child samp {
  font-size: 100%;
}
.terminal > p:first-child,
.terminal > p:first-child:first-child {
  margin-top: 0px;
}
.terminal > p:before,
.terminal > p:first-child:before {
  font-family: monospace;
  font-style: normal;
  font-weight: 700;
  color: #009926;
  content: "$ ";
}
.terminal-su {
  background-clip: padding-box;
  border-radius: 3px;
  margin: 10px auto;
  padding: 2px 4px 0 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  color: #eee;
  background-color: #222;
  border: 1px solid #ccc;
  hyphens: none;
  padding: 0 3px;
  border: 2px solid #999;
  white-space: pre-wrap;
  border-top: 10px solid #999;
}
.terminal-su code,
.terminal-su samp,
.terminal-su pre {
  color: #eee;
}
.terminal-su a {
  color: #264c72;
}
.terminal-su p {
  margin: 0 auto;
}
@media screen and (min-width: 880px) {
  .terminal-su {
    margin-left: 80px;
    margin-right: 80px;
  }
}
@media screen and (max-width: 639px) {
  .terminal-su {
    overflow-y: hidden;
    overflow-x: auto;
  }
  .terminal-su td {
    white-space: nowrap;
  }
}
.terminal-su > p,
.terminal-su > p:first-child {
  margin-top: -40px;
  margin-bottom: 0;
  text-shadow: none;
  font-weight: 400;
  font-family: monospace;
  font-size: 85%;
  color: #eee;
}
.terminal-su > p code,
.terminal-su > p:first-child code,
.terminal-su > p pre,
.terminal-su > p:first-child pre,
.terminal-su > p samp,
.terminal-su > p:first-child samp {
  font-size: 100%;
}
.terminal-su > p:first-child,
.terminal-su > p:first-child:first-child {
  margin-top: 0px;
}
.terminal-su > p:before,
.terminal-su > p:first-child:before {
  font-family: monospace;
  font-style: normal;
  font-weight: 700;
  color: #009926;
  content: "$ ";
}
.terminal-su > p:before,
.terminal-su > p:first-child:before {
  color: #CC3300;
  content: "# ";
}
div .terminal {
  margin: 2px auto;
}
@media screen and (min-width: 880px) {
  div .terminal {
    margin-left: 80px;
    margin-right: 80px;
  }
}
details {
  font-size: 95%;
  background-clip: padding-box;
  border-radius: 3px;
  margin: 10px auto;
  padding: 2px 4px 0 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  color: #555;
  background-color: #f8f8f8;
  border: 1px solid #fefefe;
  display: block;
}
details code,
details samp,
details pre {
  color: #555;
}
details a {
  color: #264c72;
}
details p {
  margin: 0 auto;
}
@media screen and (min-width: 880px) {
  details {
    margin-left: 80px;
    margin-right: 80px;
  }
}
details > summary::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='%23555555' d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z' /%3E %3C/svg%3E");
  display: inline-block;
  margin-right: 2px;
  vertical-align: text-top;
  height: 11px;
  width: 11px;
}
details[open] > summary::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 384 512' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='%23555555' d='M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z' /%3E %3C/svg%3E");
}
summary {
  cursor: pointer;
  font-weight: bold;
}
summary > * {
  display: inline;
}
.headings h1 {
  font-size: 2em;
}
.headings h2 {
  font-size: 1.5em;
  counter-reset: h3;
  counter-increment: h2;
}
.headings h2::before {
  content: counter(h2) "\00A0\00A0";
}
.headings h3 {
  font-size: 1.2em;
  counter-reset: h4;
  counter-increment: h3;
}
.headings h3::before {
  content: counter(h2) "." counter(h3) "\00A0\00A0";
}
.headings h4 {
  font-size: 1.1em;
  counter-reset: h5;
  counter-increment: h4;
}
.headings h4::before {
  content: counter(h2) "." counter(h3) "." counter(h4) "\00A0\00A0";
}
.headings h5 {
  font-size: 1em;
  counter-reset: h6;
  counter-increment: h5;
}
.headings h5::before {
  content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "\00A0\00A0";
}
.headings h6 {
  font-size: 1em;
  counter-increment: h6;
}
.headings h6::before {
  content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) "\00A0\00A0";
}
/***************/
.headings #toc {
  counter-reset: toc2;
}
#toc > ul > li > ul > li > a {
  font-weight: 700;
}
.headings #toc li li a {
  counter-reset: toc3;
  counter-increment: toc2;
}
.headings #toc li li a::before {
  content: counter(toc2) "\00A0\00A0";
}
.headings #toc li li li a {
  counter-reset: toc4;
  counter-increment: toc3;
}
.headings #toc li li li a::before {
  content: counter(toc2) "." counter(toc3) "\00A0\00A0";
}
.headings #toc li li li li a {
  counter-reset: toc5;
  counter-increment: toc4;
}
.headings #toc li li li li a::before {
  content: counter(toc2) "." counter(toc3) "." counter(toc4) "\00A0\00A0";
}
.headings #toc li li li li li a {
  counter-reset: toc6;
  counter-increment: toc5;
}
.headings #toc li li li li li a::before {
  content: counter(toc2) "." counter(toc3) "." counter(toc4) "." counter(toc5) "\00A0\00A0";
}
.headings #toc li li li li li li a {
  counter-increment: toc6;
}
.headings #toc li li li li li li a::before {
  content: counter(toc2) "." counter(toc3) "." counter(toc4) "." counter(toc5) "." counter(toc6) "\00A0\00A0";
}
@media print {
  body {
    width: 700px;
  }
  /* Table of Contents */
  #toc {
    width: 650px;
    list-style-type: none;
  }
  #toc ul {
    list-style-type: none;
    padding-left: 20px;
    margin-left: 0;
  }
  #toc li {
    padding-left: 0;
    margin-left: 0;
    padding-bottom: 0.2em;
  }
  #toc a {
    text-decoration: none;
  }
  #toc a::after {
    content: leader(".") target-counter(attr(href), page);
  }
  #toc a[href="#preface"]::after {
    content: leader(".") target-counter(attr(href), page, lower-roman);
  }
  #toc a {
    color: #000;
  }
  #toc > li {
    margin: 0.2em 0;
    line-height: 1.2em;
    font-weight: bold;
    padding-bottom: 0.4em;
    font-size: 110%;
  }
  #toc > li > ul > li {
    font-weight: normal;
    font-size: 100%;
  }
  #toc li li li li li li {
    display: none;
    /* None sane of mind would EVER want more than five TOC levels. */
  }
  #toc > li {
    counter-increment: toc1;
    counter-reset: toc2;
  }
  #toc > li > a::before {
    content: counter(toc1) " ";
  }
  #toc > li > a[href="#preface"]::before {
    counter-reset: toc1;
    content: "";
  }
  #toc > li > ul > li {
    counter-increment: toc2;
    counter-reset: toc3;
  }
  #toc > li > ul > li > a::before {
    content: counter(toc1) "." counter(toc2) " ";
  }
  #toc > li > ul > li > ul > li {
    counter-increment: toc3;
    counter-reset: toc4;
  }
  #toc > li > ul > li > ul > li > a::before {
    content: counter(toc1) "." counter(toc2) "." counter(toc3) " ";
  }
  #toc > li > ul > li > ul > li > ul > li {
    counter-increment: toc4;
    counter-reset: toc5;
  }
  #toc > li > ul > li > ul > li > ul > li > a::before {
    content: counter(toc1) "." counter(toc2) "." counter(toc3) "." counter(toc4) " ";
  }
  #toc > li > ul > li > ul > li > ul > li > ul > li {
    counter-increment: toc5;
    counter-reset: toc6;
  }
  #toc > li > ul > li > ul > li > ul > li > ul > li > a::before {
    content: counter(toc1) "." counter(toc2) "." counter(toc3) "." counter(toc4) "." counter(toc5) " ";
  }
  a[href="#document-top"] {
    display: none;
  }
  h1 {
    margin-bottom: 50px;
    border-bottom: 0;
  }
  h2 {
    margin-bottom: 30px;
    page-break-before: always;
    border-bottom: 0;
  }
  h2,
  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid;
  }
  @page {
    size: A4;
    margin: 50pt 30pt 50pt 30pt;
    padding-top: 20pt;
    @bottom-right {
      content: counter(page);
      font-family: 'sans-serif';
      font-size: 0.8em;
    }
  }
}
</style>
  <style>a[href^='#document-top']:before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='%234183c4' d='M246.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L224 109.3 361.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160zm160 352l-160-160c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L224 301.3 361.4 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3z' /%3E %3C/svg%3E") }
a[href^='http']:before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='%234183c4' d='M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z' /%3E %3C/svg%3E") }
a[href*='npmjs.']:before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 576 512' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='%234183c4' d='M288 288h-32v-64h32v64zm288-128v192H288v32H160v-32H0V160h576zm-416 32H32v128h64v-96h32v96h32V192zm160 0H192v160h64v-32h64V192zm224 0H352v128h64v-96h32v96h32v-96h32v96h32V192z' /%3E %3C/svg%3E") }
a[href*='github.com']:before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 496 512' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='%234183c4' d='M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z' /%3E %3C/svg%3E") }</style>
  
  <style>
.js::before {
  content: none;
}
</style>

  
</head>
<body class="headings">
  <div id="container">
    <a id="document-top"></a>
    <div id="header"><h1>H3 Microframework Developer Guide</h1></div>
    <div id="toc"><ul>
 <li>
 <ul>
  <li><a href="#Overview">Overview</a>
  <ul>
   <li><a href="#I'm-sold!-Where-can-I-get-it?">I'm sold! Where can I get it?</a></li>
   <li><a href="#Hello,-World?">Hello, World?</a></li>
   <li><a href="#Something-more-complex?">Something more complex?</a></li>
   <li><a href="#No,-I-meant-a-real-web-application...">No, I meant a real web application...</a></li>
   <li><a href="#Can-I-use-it-then,-no-strings-attached?">Can I use it then, no strings attached?</a></li>
   <li><a href="#What-if-something-is-broken?">What if something is broken?</a></li>
   <li><a href="#Can-I-download-a-copy-of-all-the-documentation-as-a-standalone-HTML-file?">Can I download a copy of all the documentation as a standalone HTML file?</a></li>
  </ul>
  </li>
  <li><a href="#Quick-Start">Quick Start</a>
  <ul>
   <li><a href="#Create-a-basic-HTML-file">Create a basic HTML file</a></li>
   <li><a href="#Import-h3-and-h-from-h3.js">Import h3 and h from h3.js</a></li>
   <li><a href="#Create-your-SPA">Create your SPA</a></li>
  </ul>
  </li>
  <li><a href="#Key-Concepts">Key Concepts</a>
  <ul>
   <li><a href="#HyperScript">HyperScript</a></li>
   <li><a href="#Component">Component</a></li>
   <li><a href="#Router">Router</a></li>
   <li><a href="#Screen">Screen</a></li>
   <li><a href="#Store">Store</a></li>
   <li><a href="#Module">Module</a></li>
   <li><a href="#How-everything-works...">How everything works...</a></li>
  </ul>
  </li>
  <li><a href="#Tutorial">Tutorial</a>
  <ul>
   <li><a href="#Create-a-simple-HTML-file">Create a simple HTML file</a></li>
   <li><a href="#Create-a-single-page-application">Create a single-page application</a></li>
   <li><a href="#Initialization">Initialization</a></li>
   <li><a href="#Next-steps">Next steps</a></li>
  </ul>
  </li>
  <li><a href="#API">API</a>
  <ul>
   <li><a href="#h(selector:-string,-attributes:-object,-children:-array)">h(selector: string, attributes: object, children: array)</a>
   <ul>
    <li><a href="#Create-an-element,-with-an-ID,-classes,-attributes-and-children">Create an element, with an ID, classes, attributes and children</a></li>
    <li><a href="#Create-an-empty-element">Create an empty element</a></li>
    <li><a href="#Create-an-element-with-a-textual-child-node">Create an element with a textual child node</a></li>
    <li><a href="#Create-an-element-with-child-nodes">Create an element with child nodes</a></li>
    <li><a href="#Render-a-component">Render a component</a></li>
    <li><a href="#Render-child-components">Render child components</a></li>
    <li><a href="#Special-attributes">Special attributes</a></li>
   </ul>
   </li>
   <li><a href="#h3.screen({setup,-display,-teardown})">h3.screen({setup, display, teardown})</a></li>
   <li><a href="#h3.dispatch(event:-string,-data:-any)">h3.dispatch(event: string, data: any)</a></li>
   <li><a href="#h3.init(config:-object)">h3.init(config: object)</a></li>
   <li><a href="#h3.navigateTo(path:-string,-params:-object)">h3.navigateTo(path: string, params: object)</a></li>
   <li><a href="#h3.on(event:-string,-handler:-function)">h3.on(event: string, handler: function)</a></li>
   <li><a href="#h3.redraw()">h3.redraw()</a></li>
   <li><a href="#h3.route">h3.route</a></li>
   <li><a href="#h3.state">h3.state</a></li>
  </ul>
  </li>
  <li><a href="#About">About</a>
  <ul>
   <li><a href="#Why-the-weird-release-labels?">Why the weird release labels?</a></li>
   <li><a href="#A-brief-history-of-H3">A brief history of H3</a></li>
   <li><a href="#Credits">Credits</a></li>
   <li><a href="#Special-Thanks">Special Thanks</a></li>
  </ul>
  </li>
 </ul>
 </li>
</ul>
</div>
    <div id="main">




<a id="Overview"></a>
<h2>Overview<a href="#document-top" title="Go to top"></a></h2>

<p><strong>H3</strong> is a microframework to build client-side single-page applications (SPAs) in modern JavaScript.</p>

<p>H3 is also:</p>

<ul>
<li><strong>tiny</strong>, less than 4KB minified and gzipped.</li>
<li><strong>modern</strong>, in the sense that it runs only in modern browsers (latest versions of Chrome, Firefox, Edge &amp; similar).</li>
<li><strong>easy</strong> to learn, its API is comprised of only seven methods and two properties.</li>
</ul>


<a id="I'm-sold!-Where-can-I-get-it?"></a>
<h3>I&rsquo;m sold! Where can I get it?<a href="#document-top" title="Go to top"></a></h3>

<p>Here, look, it&rsquo;s just one file:</p>

<p><a href="https://raw.githubusercontent.com/h3rald/h3/v0.11.0/h3.js" target="_blank" class="button primary">Download v0.11.0 (Keen Klingon)</a></p>

<p><small>Or get the minified version <a href="https://raw.githubusercontent.com/h3rald/h3/v0.11.0/h3.min.js" target="_blank">here</a>.</small></p>

<p>Yes there is also a <a href="https://www.npmjs.com/package/@h3rald/h3">NPM package</a> if you want to use it with WebPack and similar, but let me repeat: <em>it&rsquo;s just one file</em>.</p>

<a id="Hello,-World?"></a>
<h3>Hello, World?<a href="#document-top" title="Go to top"></a></h3>

<p>Here&rsquo;s an example of an extremely minimal SPA created with H3:</p>

<pre><code class="js">import { h3, h } from "./h3.js";
h3.init(() =&gt; h("h1", "Hello, World!"));
</code></pre>

<p>This will render a <code>h1</code> tag within the document body, containing the text <code>"Hello, World!"</code>.</p>

<a id="Something-more-complex?"></a>
<h3>Something more complex?<a href="#document-top" title="Go to top"></a></h3>

<p>Have a look at the code of a <a href="https://github.com/h3rald/h3/tree/master/docs/example">simple todo list</a> (<a href="https://h3.js.org/example/index.html">demo</a>) with several components, a store and some routing.</p>

<a id="No,-I-meant-a-real-web-application..."></a>
<h3>No, I meant a real web application&hellip;<a href="#document-top" title="Go to top"></a></h3>

<p>OK, have a look at <a href="https://litepad.h3rald.com">litepad.h3rald.com</a> &mdash; it&rsquo;s a powerful notepad application that demonstrates how to create custom controls, route components, forms, and integrate third-party tools. The code is of course <a href="https://github.com/h3rald/litepad">on GitHub</a>.</p>

<a id="Can-I-use-it-then,-no-strings-attached?"></a>
<h3>Can I use it then, no strings attached?<a href="#document-top" title="Go to top"></a></h3>

<p>Yes. It&rsquo;s <a href="https://github.com/h3rald/h3/blob/master/LICENSE">MIT-licensed</a>.</p>

<a id="What-if-something-is-broken?"></a>
<h3>What if something is broken?<a href="#document-top" title="Go to top"></a></h3>

<p>Go fix it! Or at least open an issue on the <a href="https://github.com/h3rald/h3">Github repo</a>, pleasy.</p>

<a id="Can-I-download-a-copy-of-all-the-documentation-as-a-standalone-HTML-file?"></a>
<h3>Can I download a copy of all the documentation as a standalone HTML file?<a href="#document-top" title="Go to top"></a></h3>

<p>What a weird thing to ask&hellip; sure you can: <a href="https://h3.js.org/H3_DeveloperGuide.htm">here</a>!</p>

<a id="Quick-Start"></a>
<h2>Quick Start<a href="#document-top" title="Go to top"></a></h2>

<p>Getting up and running with H3 is simple enough, and you don&rsquo;t even need any special tool to build or transpile your application (unless you really, <em>really</em> require IE11 support).</p>

<a id="Create-a-basic-HTML-file"></a>
<h3>Create a basic HTML file<a href="#document-top" title="Go to top"></a></h3>

<p>Start with a minimal HTML file like this one, and include an <code>app.js</code> script. That will be the entry point of your application:</p>

<pre><code class="html">&lt;!doctype html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;My H3-powered App&lt;/title&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script type="module" src="js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Note that the script must be marked as an ES6 module (<code>type="module"</code>), otherwise your imports won&rsquo;t work.</p>

<a id="Import-h3-and-h-from-h3.js"></a>
<h3>Import h3 and h from h3.js<a href="#document-top" title="Go to top"></a></h3>

<p>Then, inside your <code>app.js</code> file, import <code>h</code> and <code>h3</code> from <code>h3.js</code>, which should be accessible somewhere in your app:</p>

<pre><code class="js">import { h3, h } from "./h3.js";
</code></pre>

<p>This will work in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">every modern browser except Internet Explorer</a>. You don&rsquo;t need a transpiler, you don&rsquo;t need something to convert your beautiful ES6 code back to clunky ES5.</p>

<p>Unless your company tells you to, do yourself a favor and don&rsquo;t support IE. It&rsquo;s 2020, even <a href="https://www.theverge.com/2020/1/15/21066767/microsoft-edge-chromium-new-browser-windows-mac-download-os">Microsoft moved on</a>, and now ES6 modules work in all major browsers.</p>

<a id="Create-your-SPA"></a>
<h3>Create your SPA<a href="#document-top" title="Go to top"></a></h3>

<p>After importing the <code>h3</code> object and the <code>h</code> function, you can start developing your SPA. A bare minimum SPA is comprised by a single component passed to the <code>h3.init()</code> method:</p>

<pre><code class="js">// A simple component printing the current date and time
// Pressig the Refresh button causes the application to redraw
// And updates the displayed date/dime.
const Page = () =&gt; {
  return h("main", [
    h("h1", "Welcome!"),
    h("p", `The current date and time is ${new Date()}`),
    h("button", {
      onclick: () =&gt; h3.redraw()
    }, "Refresh")
  ]);
}
// Initialize your SPA
h3.init(Page);
</code></pre>

<a id="Key-Concepts"></a>
<h2>Key Concepts<a href="#document-top" title="Go to top"></a></h2>

<p>There are just a few things you should know about if you want to use H3.</p>

<p>Oh&hellip; and a solid understanding of HTML and JavaScript wouldn&rsquo;t hurt either ;)</p>

<a id="HyperScript"></a>
<h3>HyperScript<a href="#document-top" title="Go to top"></a></h3>

<p>H3 uses a <a href="https://openbase.io/js/hyperscript">HyperScript</a>-like syntax to create HTML elements in pure JavaScript. No, you are actually creating Virtual DOM nodes with it but it can be easier to think about them as HTML elements, or better, something that <em>eventually</em> will be rendered as an HTML element.</p>

<p>How, you ask? Like this:</p>

<pre><code class="js">h("div.test", [
  h("ul", [
    h("li", "This is..."),
    h("li", "...a simple..."),
    h("li", "unordered list.")
  ])
]);
</code></pre>

<p>&hellip;which will output:</p>

<pre><code class="html">&lt;div class="test"&gt;
  &lt;ul&gt;
    &lt;li&gt;This is...&lt;/li&gt;
    &lt;li&gt;...a simple...&lt;/li&gt;
    &lt;li&gt;...unordered list.&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>Simple enough. Yes there are some quirks to it, but check the API or Usage docs for those.</p>

<a id="Component"></a>
<h3>Component<a href="#document-top" title="Go to top"></a></h3>

<p>In H3, a component is a function that returns a Virtual Node or a string (that will be treated as a textual DOM node).</p>

<p>Yes that&rsquo;s it. An example? here:</p>

<pre><code class="js">let count = 0;
const CounterButton = () =&gt; {
  return h("button", {
    onclick: () =&gt; count +=1 &amp;&amp; h3.redraw()
  }, `You clicked me ${count} times.`);
}
</code></pre>

<a id="Router"></a>
<h3>Router<a href="#document-top" title="Go to top"></a></h3>

<p>H3 comes with a very minimal but fully functional URL fragment router. You create your application routes when initializing your application, and you can navigate to them using ordinary <code>href</code> links or programmatically using the <code>h3.navigateTo</code> method.</p>

<p>The current route is always accessible via the <code>h3.route</code> property.</p>

<a id="Screen"></a>
<h3>Screen<a href="#document-top" title="Go to top"></a></h3>

<p>A screen is a top-level component that handles a route. Unlike ordinary components, screens:</p>

<ul>
<li>may have a dedicated <em>setup</em> (after the screen is added to the DOM) and <em>teardown</em> phase (after the screen is removed from the DOM and before the new screen is loaded).</li>
<li>may have built-in local state, initialized during setup and (typically) destroyed during teardown. Such state is passed as the first (and only) parameter of the screen when executed.</li>
</ul>


<p>Screens are typically created using the <strong>h3.screen</strong> shorthand method, but they can stll created using an ordinary function returning a VNode, but you can optionally define a <strong>setup</strong> and a <strong>teardown</strong> async methods on them (functions are objects in JavaScript after all&hellip;) to be executed during each corresponding phase.</p>

<p>Note that:
* Both the <strong>setup</strong> method take an object as a parameter, representing the component state. Such object will be empty the first time the <strong>setup</strong> method is called for a given component, but it may contain properties not removed during subsequent teardowns.
* If the <strong>setup</strong> method returns <strong>false</strong>, the <strong>display</strong> method of the screen (or the main screen function if you created it manually) will not be executed (and a <strong>$navigation</strong> event will be dispatched with <strong>null</strong> as data parameter). This can be useful in certain situations to interrupt navigation or perform redirects.
* The <strong>teardown</strong> method can return an object, which will be retained as component state. If however nothing is returned, the component state object is emptied.
* Both methods can be asynchronous, in which case H3 will wait for their completion before proceeding.</p>

<a id="Store"></a>
<h3>Store<a href="#document-top" title="Go to top"></a></h3>

<p>H3 essentially uses something very, <em>very</em> similar to <a href="https://github.com/storeon/storeon">Storeon</a> for state management <em>and</em> also as a very simple client-side event dispatcher/subscriber (seriously, it is virtually the same code as Storeon). Typically you&rsquo;ll only use the default store created by H3 upon initialization, and you&rsquo;ll use the <code>h3.dispatch()</code> and <code>h3.on()</code> methods to dispatch and subscribe to events.</p>

<p>The current application state is accessible via the <code>h3.state</code> property.</p>

<a id="Module"></a>
<h3>Module<a href="#document-top" title="Go to top"></a></h3>

<p>The <code>h3.init()</code> method takes an array of <em>modules</em> that can be used to manipulate the application state when specific events are received. A simple module looks like this:</p>

<pre><code class="js">const error = () =&gt; {
  h3.on("$init", () =&gt; ({ displayEmptyTodoError: false }));
  h3.on("error/clear", (state) =&gt; ({ displayEmptyTodoError: false }));
  h3.on("error/set", (state) =&gt; ({ displayEmptyTodoError: true }));
};
</code></pre>

<p>Essentially a module is just a function that typically is meant to run only once to define one or more event subscriptions. Modules are the place where you should handle state changes in your application.</p>

<a id="How-everything-works..."></a>
<h3>How everything works&hellip;<a href="#document-top" title="Go to top"></a></h3>

<p>The following sequence diagram summarizes how H3 works, from its initialization to the redraw and navigation phases.</p>

<p><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBjb250ZW50U2NyaXB0VHlwZT0iYXBwbGljYXRpb24vZWNtYXNjcmlwdCIgY29udGVudFN0eWxlVHlwZT0idGV4dC9jc3MiIGhlaWdodD0iOTY4cHgiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHN0eWxlPSJ3aWR0aDo3OTBweDtoZWlnaHQ6OTY4cHg7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA3OTAgOTY4IiB3aWR0aD0iNzkwcHgiIHpvb21BbmRQYW49Im1hZ25pZnkiPjxkZWZzPjxmaWx0ZXIgaGVpZ2h0PSIzMDAlIiBpZD0iZm8zbHluM2Vlajk2eiIgd2lkdGg9IjMwMCUiIHg9Ii0xIiB5PSItMSI+PGZlR2F1c3NpYW5CbHVyIHJlc3VsdD0iYmx1ck91dCIgc3RkRGV2aWF0aW9uPSIyLjAiLz48ZmVDb2xvck1hdHJpeCBpbj0iYmx1ck91dCIgcmVzdWx0PSJibHVyT3V0MiIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIC40IDAiLz48ZmVPZmZzZXQgZHg9IjQuMCIgZHk9IjQuMCIgaW49ImJsdXJPdXQyIiByZXN1bHQ9ImJsdXJPdXQzIi8+PGZlQmxlbmQgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iYmx1ck91dDMiIG1vZGU9Im5vcm1hbCIvPjwvZmlsdGVyPjwvZGVmcz48Zz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxOCIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSIyMDUiIHg9IjI5MS43NSIgeT0iMjYuNzA4Ij5IMyBTZXF1ZW5jZSBEaWFncmFtPC90ZXh0PjxyZWN0IGZpbGw9IiNGRkZGRkYiIGZpbHRlcj0idXJsKCNmbzNseW4zZWVqOTZ6KSIgaGVpZ2h0PSIxMDQuNTMxMyIgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAyLjA7IiB3aWR0aD0iNTA5IiB4PSIxODMuNSIgeT0iNDc5Ljg0MzgiLz48cmVjdCBmaWxsPSIjRkZGRkZGIiBmaWx0ZXI9InVybCgjZm8zbHluM2Vlajk2eikiIGhlaWdodD0iMjc5LjMyODEiIHN0eWxlPSJzdHJva2U6ICMwMDAwMDA7IHN0cm9rZS13aWR0aDogMi4wOyIgd2lkdGg9IjY3OS41IiB4PSIxMyIgeT0iNTk4LjM3NSIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyBzdHJva2UtZGFzaGFycmF5OiA1LjAsNS4wOyIgeDE9IjY3IiB4Mj0iNjciIHkxPSIxMDAuMjUiIHkyPSI4OTQuNzAzMSIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyBzdHJva2UtZGFzaGFycmF5OiA1LjAsNS4wOyIgeDE9IjIzOS41IiB4Mj0iMjM5LjUiIHkxPSIxMDAuMjUiIHkyPSI4OTQuNzAzMSIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyBzdHJva2UtZGFzaGFycmF5OiA1LjAsNS4wOyIgeDE9IjM4My41IiB4Mj0iMzgzLjUiIHkxPSIxMDAuMjUiIHkyPSI4OTQuNzAzMSIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyBzdHJva2UtZGFzaGFycmF5OiA1LjAsNS4wOyIgeDE9IjQ5NiIgeDI9IjQ5NiIgeTE9IjEwMC4yNSIgeTI9Ijg5NC43MDMxIi8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IHN0cm9rZS1kYXNoYXJyYXk6IDUuMCw1LjA7IiB4MT0iNjU5LjUiIHgyPSI2NTkuNSIgeTE9IjEwMC4yNSIgeTI9Ijg5NC43MDMxIi8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iODMiIHg9IjIzIiB5PSI5Ni45NDgyIj5BcHBsaWNhdGlvbjwvdGV4dD48ZWxsaXBzZSBjeD0iNjcuNSIgY3k9IjY3Ljk1MzEiIGZpbGw9IiNGRUZFQ0UiIGZpbHRlcj0idXJsKCNmbzNseW4zZWVqOTZ6KSIgcng9IjEyIiByeT0iMTIiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMi4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMi4wOyIgeDE9IjU1LjUiIHgyPSI3OS41IiB5MT0iODEuOTUzMSIgeTI9IjgxLjk1MzEiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSI4MyIgeD0iMjMiIHk9IjkwNi42OTgyIj5BcHBsaWNhdGlvbjwvdGV4dD48ZWxsaXBzZSBjeD0iNjcuNSIgY3k9IjkyNiIgZmlsbD0iI0ZFRkVDRSIgZmlsdGVyPSJ1cmwoI2ZvM2x5bjNlZWo5NnopIiByeD0iMTIiIHJ5PSIxMiIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAyLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAyLjA7IiB4MT0iNTUuNSIgeDI9Ijc5LjUiIHkxPSI5NDAiIHkyPSI5NDAiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSI4NiIgeD0iMTkzLjUiIHk9Ijk2Ljk0ODIiPkNvbXBvbmVudDwvdGV4dD48ZWxsaXBzZSBjeD0iMjM5LjUiIGN5PSI2Ny45NTMxIiBmaWxsPSIjRkVGRUNFIiBmaWx0ZXI9InVybCgjZm8zbHluM2Vlajk2eikiIHJ4PSIxMiIgcnk9IjEyIiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiLz48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9IjIzNS41LDU1Ljk1MzEsMjQxLjUsNTAuOTUzMSwyMzkuNSw1NS45NTMxLDI0MS41LDYwLjk1MzEsMjM1LjUsNTUuOTUzMSIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iODYiIHg9IjE5My41IiB5PSI5MDYuNjk4MiI+Q29tcG9uZW50PC90ZXh0PjxlbGxpcHNlIGN4PSIyMzkuNSIgY3k9IjkyNiIgZmlsbD0iI0ZFRkVDRSIgZmlsdGVyPSJ1cmwoI2ZvM2x5bjNlZWo5NnopIiByeD0iMTIiIHJ5PSIxMiIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAyLjA7Ii8+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSIyMzUuNSw5MTQsMjQxLjUsOTA5LDIzOS41LDkxNCwyNDEuNSw5MTksMjM1LjUsOTE0IiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSIxOSIgeD0iMzcxIiB5PSI5Ni45NDgyIj5IMzwvdGV4dD48ZWxsaXBzZSBjeD0iMzgzLjUiIGN5PSI2Ny45NTMxIiBmaWxsPSIjRkVGRUNFIiBmaWx0ZXI9InVybCgjZm8zbHluM2Vlajk2eikiIHJ4PSIxMiIgcnk9IjEyIiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiIHgxPSIzNzEuNSIgeDI9IjM5NS41IiB5MT0iODEuOTUzMSIgeTI9IjgxLjk1MzEiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSIxOSIgeD0iMzcxIiB5PSI5MDYuNjk4MiI+SDM8L3RleHQ+PGVsbGlwc2UgY3g9IjM4My41IiBjeT0iOTI2IiBmaWxsPSIjRkVGRUNFIiBmaWx0ZXI9InVybCgjZm8zbHluM2Vlajk2eikiIHJ4PSIxMiIgcnk9IjEyIiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiIHgxPSIzNzEuNSIgeDI9IjM5NS41IiB5MT0iOTQwIiB5Mj0iOTQwIi8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNDkiIHg9IjQ2OSIgeT0iOTYuOTQ4MiI+Um91dGVyPC90ZXh0PjxlbGxpcHNlIGN4PSI0OTYuNSIgY3k9IjY3Ljk1MzEiIGZpbGw9IiNGRUZFQ0UiIGZpbHRlcj0idXJsKCNmbzNseW4zZWVqOTZ6KSIgcng9IjEyIiByeT0iMTIiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMi4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMi4wOyIgeDE9IjQ4NC41IiB4Mj0iNTA4LjUiIHkxPSI4MS45NTMxIiB5Mj0iODEuOTUzMSIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjQ5IiB4PSI0NjkiIHk9IjkwNi42OTgyIj5Sb3V0ZXI8L3RleHQ+PGVsbGlwc2UgY3g9IjQ5Ni41IiBjeT0iOTI2IiBmaWxsPSIjRkVGRUNFIiBmaWx0ZXI9InVybCgjZm8zbHluM2Vlajk2eikiIHJ4PSIxMiIgcnk9IjEyIiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiIHgxPSI0ODQuNSIgeDI9IjUwOC41IiB5MT0iOTQwIiB5Mj0iOTQwIi8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNDAiIHg9IjYzNi41IiB5PSI5Ni45NDgyIj5TdG9yZTwvdGV4dD48cGF0aCBkPSJNNjQxLjUsNDcuOTUzMSBDNjQxLjUsMzcuOTUzMSA2NTkuNSwzNy45NTMxIDY1OS41LDM3Ljk1MzEgQzY1OS41LDM3Ljk1MzEgNjc3LjUsMzcuOTUzMSA2NzcuNSw0Ny45NTMxIEw2NzcuNSw3My45NTMxIEM2NzcuNSw4My45NTMxIDY1OS41LDgzLjk1MzEgNjU5LjUsODMuOTUzMSBDNjU5LjUsODMuOTUzMSA2NDEuNSw4My45NTMxIDY0MS41LDczLjk1MzEgTDY0MS41LDQ3Ljk1MzEgIiBmaWxsPSIjRkVGRUNFIiBmaWx0ZXI9InVybCgjZm8zbHluM2Vlajk2eikiIHN0eWxlPSJzdHJva2U6ICMwMDAwMDA7IHN0cm9rZS13aWR0aDogMS41OyIvPjxwYXRoIGQ9Ik02NDEuNSw0Ny45NTMxIEM2NDEuNSw1Ny45NTMxIDY1OS41LDU3Ljk1MzEgNjU5LjUsNTcuOTUzMSBDNjU5LjUsNTcuOTUzMSA2NzcuNSw1Ny45NTMxIDY3Ny41LDQ3Ljk1MzEgIiBmaWxsPSJub25lIiBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBzdHJva2Utd2lkdGg6IDEuNTsiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSI0MCIgeD0iNjM2LjUiIHk9IjkwNi42OTgyIj5TdG9yZTwvdGV4dD48cGF0aCBkPSJNNjQxLjUsOTIwIEM2NDEuNSw5MTAgNjU5LjUsOTEwIDY1OS41LDkxMCBDNjU5LjUsOTEwIDY3Ny41LDkxMCA2NzcuNSw5MjAgTDY3Ny41LDk0NiBDNjc3LjUsOTU2IDY1OS41LDk1NiA2NTkuNSw5NTYgQzY1OS41LDk1NiA2NDEuNSw5NTYgNjQxLjUsOTQ2IEw2NDEuNSw5MjAgIiBmaWxsPSIjRkVGRUNFIiBmaWx0ZXI9InVybCgjZm8zbHluM2Vlajk2eikiIHN0eWxlPSJzdHJva2U6ICMwMDAwMDA7IHN0cm9rZS13aWR0aDogMS41OyIvPjxwYXRoIGQ9Ik02NDEuNSw5MjAgQzY0MS41LDkzMCA2NTkuNSw5MzAgNjU5LjUsOTMwIEM2NTkuNSw5MzAgNjc3LjUsOTMwIDY3Ny41LDkyMCAiIGZpbGw9Im5vbmUiIHN0eWxlPSJzdHJva2U6ICMwMDAwMDA7IHN0cm9rZS13aWR0aDogMS41OyIvPjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iMzcxLjUsMTI3LjM4MjgsMzgxLjUsMTMxLjM4MjgsMzcxLjUsMTM1LjM4MjgsMzc1LjUsMTMxLjM4MjgiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyBzdHJva2UtZGFzaGFycmF5OiAyLjAsMi4wOyIgeDE9IjY3LjUiIHgyPSIzNzcuNSIgeTE9IjEzMS4zODI4IiB5Mj0iMTMxLjM4MjgiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgZm9udC13ZWlnaHQ9ImJvbGQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNTkiIHg9Ijc0LjUiIHk9IjEyNi4zMTY5Ij5oMy5pbml0KCk8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSI2NDcuNSwxNTYuNTE1Niw2NTcuNSwxNjAuNTE1Niw2NDcuNSwxNjQuNTE1Niw2NTEuNSwxNjAuNTE1NiIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iMzgzLjUiIHgyPSI2NTMuNSIgeTE9IjE2MC41MTU2IiB5Mj0iMTYwLjUxNTYiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgZm9udC1zdHlsZT0iaXRhbGljIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjU2IiB4PSIzOTAuNSIgeT0iMTU1LjQ0OTciPmluaXRpYWxpemU8L3RleHQ+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iNjU5LjUiIHgyPSI3MDEuNSIgeTE9IjE4OS42NDg0IiB5Mj0iMTg5LjY0ODQiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiIHgxPSI3MDEuNSIgeDI9IjcwMS41IiB5MT0iMTg5LjY0ODQiIHkyPSIyMDIuNjQ4NCIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjY2MC41IiB4Mj0iNzAxLjUiIHkxPSIyMDIuNjQ4NCIgeTI9IjIwMi42NDg0Ii8+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSI2NzAuNSwxOTguNjQ4NCw2NjAuNSwyMDIuNjQ4NCw2NzAuNSwyMDYuNjQ4NCw2NjYuNSwyMDIuNjQ4NCIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGZvbnQtc3R5bGU9Iml0YWxpYyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSIxMTIiIHg9IjY2Ni41IiB5PSIxODQuNTgyNSI+ZXhlY3V0ZSBtb2R1bGVzPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iNjQ3LjUsMjI3Ljc4MTMsNjU3LjUsMjMxLjc4MTMsNjQ3LjUsMjM1Ljc4MTMsNjUxLjUsMjMxLjc4MTMiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjM4My41IiB4Mj0iNjUzLjUiIHkxPSIyMzEuNzgxMyIgeTI9IjIzMS43ODEzIi8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iOTEiIHg9IjM5MC41IiB5PSIyMjYuNzE1MyI+ZGlzcGF0Y2goJGluaXQpPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iNzguNSwyNTYuOTE0MSw2OC41LDI2MC45MTQxLDc4LjUsMjY0LjkxNDEsNzQuNSwyNjAuOTE0MSIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iNzIuNSIgeDI9IjM4Mi41IiB5MT0iMjYwLjkxNDEiIHkyPSIyNjAuOTE0MSIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjYyIiB4PSI4NC41IiB5PSIyNTUuODQ4MSI+cHJlU3RhcnQoKTwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9IjQ4NC41LDI4Ni4wNDY5LDQ5NC41LDI5MC4wNDY5LDQ4NC41LDI5NC4wNDY5LDQ4OC41LDI5MC4wNDY5IiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiIHgxPSIzODMuNSIgeDI9IjQ5MC41IiB5MT0iMjkwLjA0NjkiIHkyPSIyOTAuMDQ2OSIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBmb250LXN0eWxlPSJpdGFsaWMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNTYiIHg9IjM5MC41IiB5PSIyODQuOTgxIj5pbml0aWFsaXplPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iNDg0LjUsMzE1LjE3OTcsNDk0LjUsMzE5LjE3OTcsNDg0LjUsMzIzLjE3OTcsNDg4LjUsMzE5LjE3OTciIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjM4My41IiB4Mj0iNDkwLjUiIHkxPSIzMTkuMTc5NyIgeTI9IjMxOS4xNzk3Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNDAiIHg9IjM5MC41IiB5PSIzMTQuMTEzOCI+c3RhcnQoKTwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9IjI1MC41LDM0NC4zMTI1LDI0MC41LDM0OC4zMTI1LDI1MC41LDM1Mi4zMTI1LDI0Ni41LDM0OC4zMTI1IiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsgc3Ryb2tlLWRhc2hhcnJheTogMi4wLDIuMDsiIHgxPSIyNDQuNSIgeDI9IjQ5NS41IiB5MT0iMzQ4LjMxMjUiIHkyPSIzNDguMzEyNSIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjQ2IiB4PSIyNTYuNSIgeT0iMzQzLjI0NjYiPnNldHVwKCk8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSI2NDcuNSwzNzMuNDQ1Myw2NTcuNSwzNzcuNDQ1Myw2NDcuNSwzODEuNDQ1Myw2NTEuNSwzNzcuNDQ1MyIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iNDk2LjUiIHgyPSI2NTMuNSIgeTE9IjM3Ny40NDUzIiB5Mj0iMzc3LjQ0NTMiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSIxMzkiIHg9IjUwMy41IiB5PSIzNzIuMzc5NCI+ZGlzcGF0Y2goJG5hdmlnYXRpb24pPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iMjUwLjUsNDAyLjU3ODEsMjQwLjUsNDA2LjU3ODEsMjUwLjUsNDEwLjU3ODEsMjQ2LjUsNDA2LjU3ODEiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjI0NC41IiB4Mj0iNDk1LjUiIHkxPSI0MDYuNTc4MSIgeTI9IjQwNi41NzgxIi8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNTIiIHg9IjI1Ni41IiB5PSI0MDEuNTEyMiI+cmVuZGVyKCk8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSI2NDcuNSw0MzEuNzEwOSw2NTcuNSw0MzUuNzEwOSw2NDcuNSw0MzkuNzEwOSw2NTEuNSw0MzUuNzEwOSIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iNDk2LjUiIHgyPSI2NTMuNSIgeTE9IjQzNS43MTA5IiB5Mj0iNDM1LjcxMDkiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSIxMTciIHg9IjUwMy41IiB5PSI0MzAuNjQ1Ij5kaXNwYXRjaCgkcmVkcmF3KTwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9Ijc4LjUsNDYwLjg0MzgsNjguNSw0NjQuODQzOCw3OC41LDQ2OC44NDM4LDc0LjUsNDY0Ljg0MzgiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjcyLjUiIHgyPSIzODIuNSIgeTE9IjQ2NC44NDM4IiB5Mj0iNDY0Ljg0MzgiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSI2OSIgeD0iODQuNSIgeT0iNDU5Ljc3NzgiPnBvc3RTdGFydCgpPC90ZXh0PjxwYXRoIGQ9Ik0xODMuNSw0NzkuODQzOCBMMjgxLjUsNDc5Ljg0MzggTDI4MS41LDQ4Ni44NDM4IEwyNzEuNSw0OTYuODQzOCBMMTgzLjUsNDk2Ljg0MzggTDE4My41LDQ3OS44NDM4ICIgZmlsbD0iI0VFRUVFRSIgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PHJlY3QgZmlsbD0ibm9uZSIgaGVpZ2h0PSIxMDQuNTMxMyIgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAyLjA7IiB3aWR0aD0iNTA5IiB4PSIxODMuNSIgeT0iNDc5Ljg0MzgiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgZm9udC13ZWlnaHQ9ImJvbGQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNTMiIHg9IjE5OC41IiB5PSI0OTIuOTEwNiI+cmVkcmF3PC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iMzcxLjUsNTE0LjEwOTQsMzgxLjUsNTE4LjEwOTQsMzcxLjUsNTIyLjEwOTQsMzc1LjUsNTE4LjEwOTQiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjIzOS41IiB4Mj0iMzc3LjUiIHkxPSI1MTguMTA5NCIgeTI9IjUxOC4xMDk0Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9Ijg3IiB4PSIyNDYuNSIgeT0iNTEzLjA0MzUiPmgzLnJlZHJhdygpPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iMjUwLjUsNTQzLjI0MjIsMjQwLjUsNTQ3LjI0MjIsMjUwLjUsNTUxLjI0MjIsMjQ2LjUsNTQ3LjI0MjIiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjI0NC41IiB4Mj0iMzgyLjUiIHkxPSI1NDcuMjQyMiIgeTI9IjU0Ny4yNDIyIi8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNTUiIHg9IjI1Ni41IiB5PSI1NDIuMTc2MyI+cmVkcmF3KCk8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSI2NDcuNSw1NzIuMzc1LDY1Ny41LDU3Ni4zNzUsNjQ3LjUsNTgwLjM3NSw2NTEuNSw1NzYuMzc1IiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiIHgxPSIzODMuNSIgeDI9IjY1My41IiB5MT0iNTc2LjM3NSIgeTI9IjU3Ni4zNzUiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSIxMTciIHg9IjM5MC41IiB5PSI1NzEuMzA5MSI+ZGlzcGF0Y2goJHJlZHJhdyk8L3RleHQ+PHBhdGggZD0iTTEzLDU5OC4zNzUgTDEzNyw1OTguMzc1IEwxMzcsNjA1LjM3NSBMMTI3LDYxNS4zNzUgTDEzLDYxNS4zNzUgTDEzLDU5OC4zNzUgIiBmaWxsPSIjRUVFRUVFIiBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBzdHJva2Utd2lkdGg6IDEuMDsiLz48cmVjdCBmaWxsPSJub25lIiBoZWlnaHQ9IjI3OS4zMjgxIiBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBzdHJva2Utd2lkdGg6IDIuMDsiIHdpZHRoPSI2NzkuNSIgeD0iMTMiIHk9IjU5OC4zNzUiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgZm9udC13ZWlnaHQ9ImJvbGQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNzkiIHg9IjI4IiB5PSI2MTEuNDQxOSI+bmF2aWdhdGlvbjwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9IjM3MS41LDYzMi42NDA2LDM4MS41LDYzNi42NDA2LDM3MS41LDY0MC42NDA2LDM3NS41LDYzNi42NDA2IiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiIHgxPSIyMzkuNSIgeDI9IjM3Ny41IiB5MT0iNjM2LjY0MDYiIHkyPSI2MzYuNjQwNiIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBmb250LXdlaWdodD0iYm9sZCIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSIxMjAiIHg9IjI0Ni41IiB5PSI2MzEuNTc0NyI+aDMubmF2aWdhdGVUbygpPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iNDg0LjUsNjYxLjc3MzQsNDk0LjUsNjY1Ljc3MzQsNDg0LjUsNjY5Ljc3MzQsNDg4LjUsNjY1Ljc3MzQiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjM4My41IiB4Mj0iNDkwLjUiIHkxPSI2NjUuNzczNCIgeTI9IjY2NS43NzM0Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iODkiIHg9IjM5MC41IiB5PSI2NjAuNzA3NSI+cHJvY2Vzc1BhdGgoKTwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9IjI1MC41LDY5MC45MDYzLDI0MC41LDY5NC45MDYzLDI1MC41LDY5OC45MDYzLDI0Ni41LDY5NC45MDYzIiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsgc3Ryb2tlLWRhc2hhcnJheTogMi4wLDIuMDsiIHgxPSIyNDQuNSIgeDI9IjQ5NS41IiB5MT0iNjk0LjkwNjMiIHkyPSI2OTQuOTA2MyIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjcxIiB4PSIyNTYuNSIgeT0iNjg5Ljg0MDMiPnRlYXJkb3duKCk8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSIyNTAuNSw3MjAuMDM5MSwyNDAuNSw3MjQuMDM5MSwyNTAuNSw3MjguMDM5MSwyNDYuNSw3MjQuMDM5MSIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IHN0cm9rZS1kYXNoYXJyYXk6IDIuMCwyLjA7IiB4MT0iMjQ0LjUiIHgyPSI0OTUuNSIgeTE9IjcyNC4wMzkxIiB5Mj0iNzI0LjAzOTEiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSI0NiIgeD0iMjU2LjUiIHk9IjcxOC45NzMxIj5zZXR1cCgpPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iNjQ3LjUsNzQ5LjE3MTksNjU3LjUsNzUzLjE3MTksNjQ3LjUsNzU3LjE3MTksNjUxLjUsNzUzLjE3MTkiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjQ5Ni41IiB4Mj0iNjUzLjUiIHkxPSI3NTMuMTcxOSIgeTI9Ijc1My4xNzE5Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iMTM5IiB4PSI1MDMuNSIgeT0iNzQ4LjEwNiI+ZGlzcGF0Y2goJG5hdmlnYXRpb24pPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iNzguNSw3NzguMzA0Nyw2OC41LDc4Mi4zMDQ3LDc4LjUsNzg2LjMwNDcsNzQuNSw3ODIuMzA0NyIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iNzIuNSIgeDI9IjQ5NS41IiB5MT0iNzgyLjMwNDciIHkyPSI3ODIuMzA0NyIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBmb250LXN0eWxlPSJpdGFsaWMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iMTQ4IiB4PSI4NC41IiB5PSI3NzcuMjM4OCI+cmVtb3ZlIGFsbCBET00gbm9kZXM8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSIyMjcuNSw4MDcuNDM3NSwyMzcuNSw4MTEuNDM3NSwyMjcuNSw4MTUuNDM3NSwyMzEuNSw4MTEuNDM3NSIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iNjcuNSIgeDI9IjIzMy41IiB5MT0iODExLjQzNzUiIHkyPSI4MTEuNDM3NSIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBmb250LXN0eWxlPSJpdGFsaWMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iMTQ4IiB4PSI3NC41IiB5PSI4MDYuMzcxNiI+cmVtb3ZlIGFsbCBET00gbm9kZXM8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSIyNTAuNSw4MzYuNTcwMywyNDAuNSw4NDAuNTcwMywyNTAuNSw4NDQuNTcwMywyNDYuNSw4NDAuNTcwMyIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iMjQ0LjUiIHgyPSI0OTUuNSIgeTE9Ijg0MC41NzAzIiB5Mj0iODQwLjU3MDMiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSI1MiIgeD0iMjU2LjUiIHk9IjgzNS41MDQ0Ij5yZW5kZXIoKTwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9IjY0Ny41LDg2NS43MDMxLDY1Ny41LDg2OS43MDMxLDY0Ny41LDg3My43MDMxLDY1MS41LDg2OS43MDMxIiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiIHgxPSI0OTYuNSIgeDI9IjY1My41IiB5MT0iODY5LjcwMzEiIHkyPSI4NjkuNzAzMSIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjExNyIgeD0iNTAzLjUiIHk9Ijg2NC42MzcyIj5kaXNwYXRjaCgkcmVkcmF3KTwvdGV4dD48IS0tTUQ1PVs2MTRjOTJiMmQ1MDZhMTk5ZGJkNDU1ZDZiNDdjOWUzOV0KQHN0YXJ0dW1sDQp0aXRsZSBIMyBTZXF1ZW5jZSBEaWFncmFtDQoNCmVudGl0eSBBcHBsaWNhdGlvbg0KY29udHJvbCBDb21wb25lbnQNCmVudGl0eSBIMw0KZW50aXR5IFJvdXRlcg0KZGF0YWJhc2UgU3RvcmUNCg0KQXBwbGljYXRpb24gLSAtPiBIMyA6IDxiPmgzLmluaXQoKTwvYj4NCkgzIC0+IFN0b3JlIDogLy9pbml0aWFsaXplLy8NClN0b3JlIC0+IFN0b3JlIDogLy9leGVjdXRlIG1vZHVsZXMvLw0KSDMgLT4gU3RvcmUgOiBkaXNwYXRjaCgkaW5pdCkNCkgzIC0+IEFwcGxpY2F0aW9uIDogcHJlU3RhcnQoKQ0KSDMgLT4gUm91dGVyIDogLy9pbml0aWFsaXplLy8NCkgzIC0+IFJvdXRlciA6IHN0YXJ0KCkNClJvdXRlciAtIC0+IENvbXBvbmVudCA6IHNldHVwKCkgDQpSb3V0ZXIgLT4gU3RvcmU6IGRpc3BhdGNoKCRuYXZpZ2F0aW9uKQ0KUm91dGVyIC0+IENvbXBvbmVudCA6IHJlbmRlcigpDQpSb3V0ZXIgLT4gU3RvcmU6IGRpc3BhdGNoKCRyZWRyYXcpDQoNCkgzIC0+IEFwcGxpY2F0aW9uIDogcG9zdFN0YXJ0KCkNCg0KZ3JvdXAgcmVkcmF3DQogICAgQ29tcG9uZW50IC0+IEgzIDogPGI+aDMucmVkcmF3KCk8L2I+DQogICAgSDMgLT4gQ29tcG9uZW50IDogcmVkcmF3KCkNCiAgICBIMyAtPiBTdG9yZTogZGlzcGF0Y2goJHJlZHJhdykNCmVuZA0KDQpncm91cCBuYXZpZ2F0aW9uDQogICAgQ29tcG9uZW50IC0+IEgzIDogPGI+aDMubmF2aWdhdGVUbygpPC9iPg0KICAgIEgzIC0+IFJvdXRlciA6IHByb2Nlc3NQYXRoKCkNCiAgICBSb3V0ZXIgLSAtPiBDb21wb25lbnQgOiB0ZWFyZG93bigpIA0KICAgIFJvdXRlciAtIC0+IENvbXBvbmVudCA6IHNldHVwKCkgDQogICAgUm91dGVyIC0+IFN0b3JlOiBkaXNwYXRjaCgkbmF2aWdhdGlvbikNCiAgICBSb3V0ZXIgLT4gQXBwbGljYXRpb24gOiAvL3JlbW92ZSBhbGwgRE9NIG5vZGVzLy8NCiAgICBBcHBsaWNhdGlvbiAtPiBDb21wb25lbnQgOiAvL3JlbW92ZSBhbGwgRE9NIG5vZGVzLy8NCiAgICBSb3V0ZXIgLT4gQ29tcG9uZW50IDogcmVuZGVyKCkNCiAgICBSb3V0ZXIgLT4gU3RvcmU6IGRpc3BhdGNoKCRyZWRyYXcpDQogICAgDQplbmQNCkBlbmR1bWwNCgpQbGFudFVNTCB2ZXJzaW9uIDEuMjAyMC4xMShTYXQgTWF5IDMwIDEwOjEzOjQzIFVUQyAyMDIwKQooR1BMIHNvdXJjZSBkaXN0cmlidXRpb24pCkphdmEgUnVudGltZTogSmF2YShUTSkgU0UgUnVudGltZSBFbnZpcm9ubWVudApKVk06IEphdmEgSG90U3BvdChUTSkgNjQtQml0IFNlcnZlciBWTQpEZWZhdWx0IEVuY29kaW5nOiBVVEYtOApMYW5ndWFnZTogZW4KQ291bnRyeTogVVMKLS0+PC9nPjwvc3ZnPg==" alt="Sequence Diagram" /></p>

<p>When the <code>h3.init()</code> method is called at application level, the following operations are performed in sequence:</p>

<ol>
<li>The <em>Store</em> is created and initialized.</li>
<li>Any <em>Module</em> specified when calling <code>h3.init()</code> is executed.</li>
<li>The <strong>$init</strong> event is dispatched.</li>
<li>The <em>preStart</em> function (if specified when calling <code>h3.init()</code>) is executed.</li>
<li>The <em>Router</em> is initialized and started.</li>
<li>The <strong>setup()</strong> method of the matching Screen is called (if any).</li>
<li>The <strong>$navigation</strong> event is dispatched.</li>
<li>The <em>Screen</em> matching the current route and all its child components are rendered for the first time.</li>
<li>The <strong>$redraw</strong> event is dispatched.</li>
</ol>


<p>Then, whenever the <code>h3.redraw()</code> method is called (typically within a component):</p>

<ol>
<li>The whole application is redrawn, i.e. every <em>Component</em> currently rendered on the page is redrawn.</li>
<li>The <strong>$redraw</strong> event is dispatched.</li>
</ol>


<p>Similarly, whenever the <code>h3.navigateTo()</code> method is called (typically within a component), or the URL fragment changes:</p>

<ol>
<li>The <em>Router</em> processes the new path and determine which component to render based on the routing configuration.</li>
<li>The <strong>teardow()</strong> method of the current Screen is called (if any).</li>
<li>The <strong>setup()</strong> method of the new matching Screen is called (if any).</li>
<li>All DOM nodes within the scope of the routing are removed, all components are removed.</li>
<li>The <strong>$navigation</strong> event is dispatched.</li>
<li>All DOM nodes are removed.</li>
<li>The <em>Screen</em> matching the new route and all its child components are rendered.</li>
<li>The <strong>$redraw</strong> event is dispatched.</li>
</ol>


<p>And that&rsquo;s it. The whole idea is to make the system extremely <em>simple</em> and <em>predictable</em> &mdash; which means everything should be very easy to debug, too.</p>

<a id="Tutorial"></a>
<h2>Tutorial<a href="#document-top" title="Go to top"></a></h2>

<p>As a (meta) explanation of how to use H3, let&rsquo;s have a look at how the <a href="https://h3.js.org">H3 web site</a> itself was created.</p>

<p>The idea was to build a simple web site to display the documentation of the H3 microframework, so it must be able to:</p>

<ul>
<li>Provide a simple way to navigate through page.</li>
<li>Render markdown content (via <a href="https://marked.js.org/#/README.md#README.md">marked.js</a>)</li>
<li>Apply syntax highlighting (via <a href="https://prismjs.com/">Prism.js</a>)</li>
</ul>


<p>As far as look and feel is concerned, I wanted something minimal but functional, so <a href="https://minicss.org/">mini.css</a> was more than enough.</p>

<p>The full source of the site is available <a href="https://github.com/h3rald/h3/tree/master/docs">here</a>.</p>

<a id="Create-a-simple-HTML-file"></a>
<h3>Create a simple HTML file<a href="#document-top" title="Go to top"></a></h3>

<p>Start by creating a simple HTML file. Place a script loading the entry point of your application within the <code>body</code> and set its type to <code>module</code>.</p>

<p>This will let you load an ES6 file containing imports to other files&hellip; it works in all major browsers, but it doesn&rsquo;t work in IE (but we don&rsquo;t care about that, do we?).</p>

<pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;H3&lt;/title&gt;
    &lt;meta
      name="description"
      content="A bare-bones client-side web microframework"
    /&gt;
    &lt;meta name="author" content="Fabio Cevasco" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
    &lt;link rel="shortcut icon" href="favicon.png" type="image/png" /&gt;
    &lt;link rel="stylesheet" href="css/mini-default.css" /&gt;
    &lt;link rel="stylesheet" href="css/prism.css" /&gt;
    &lt;link rel="stylesheet" href="css/style.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script type="module" src="js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<a id="Create-a-single-page-application"></a>
<h3>Create a single-page application<a href="#document-top" title="Go to top"></a></h3>

<p>In this case the code for the SPA is not very complex, you can have a look at it <a href="https://github.com/h3rald/h3/blob/master/docs/js/app.js">here</a>.</p>

<p>Normally you&rsquo;d have several components, at least one file containing modules to manage the application state, etc. (see the <a href="https://github.com/h3rald/h3/tree/master/docs/example">todo list example</a>), but in this case a single component is sufficient.</p>

<p>Start by importing all the JavaScript modules you need:</p>

<pre><code class="js">import { h3, h } from "./h3.js";
import marked from "./vendor/marked.js";
import Prism from "./vendor/prism.js";
</code></pre>

<p>Easy enough. Then we want to store the mapping between the different page fragments and their titles:</p>

<pre><code class="js">const labels = {
  overview: "Overview",
  "quick-start": "Quick Start",
  "key-concepts": "Key Concepts",
  "best-practices": "Best Practices",
  tutorial: "Tutorial",
  api: "API",
  about: "About",
};
</code></pre>

<p>We are going to store the HTML contents of each page in an Object, and we&rsquo;re going to need a simple function to <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">fetch</a> the Markdown file and render it as HTML:</p>

<pre><code class="js">const fetchPage = async ({ pages, id, md }) =&gt; {
  if (!pages[id]) {
    const response = await fetch(md);
    const text = await response.text();
    pages[id] = marked(text);
  }
};
</code></pre>

<p>Basically this function is going to be called when you navigate to each page, and it:</p>

<ol>
<li>fetches the content of the requested file (<code>md</code>))</li>
<li>renders the Markdown code into HTML using the <em>marked</em> library, and stores it in the <code>pages</code> object</li>
</ol>


<p>We are gonna use our <code>fetchPage</code> function inside the <code>setup</code> of the main (and only) screen of our app, <code>Page</code>:</p>

<pre><code class="js">const Page = h3.screen({
  setup: async (state) =&gt; {
    state.pages = {};
    state.id = h3.route.path.slice(1);
    state.ids = Object.keys(labels);
    state.md = state.ids.includes(state.id)
      ? `md/${state.id}.md`
      : `md/overview.md`;
    await fetchPage(state);
  },
  display: (state) =&gt; {
    return h("div.page", [
      Header,
      h("div.row", [
        h("input#drawer-control.drawer", { type: "checkbox" }),
        Navigation(state.id, state.ids),
        Content(state.pages[state.id]),
        Footer,
      ]),
    ]);
  },
  teardown: (state) =&gt; state,
});
</code></pre>

<p>Note that this screen has a <code>setup</code>, a <code>display</code> and a <code>teardown</code> method, both taking <code>state</code> as parameter. In H3, screens are nothing but stateful components that are used to render the whole page of the application, and are therefore typically redered when navigating to a new route.</p>

<p>The <code>state</code> parameter is nothing but an empty object that can be used to store data that will be accessible to the <code>setup</code>, <code>display</code> and <code>teardown</code> methods, and (typically) will be destroyed when another screen is rendered.</p>

<p>The <code>setup</code> function allows you to perform some operations that should take place <em>before</em> the screen is rendered. In this case, we want to fetch the page contents (if necessary) beforehand to avoid displaying a spinner while the content is being loaded. Note that the <code>setup</code> method can be asynchronous, and in this case the <code>display</code> method will not be called until all asynchronous operations have been completed (assuming you are <code>await</code>ing them).</p>

<p>The <code>teardown</code> function in this case only makes sure that the existing screen state (in particular any loaded markdown page) will be passed on to the next screen during navigation (which, in this case, is still the <code>Page</code> screen), so that existing pages will not be fetched again.</p>

<p>The main responsibility of this screen is to fetch the Markdown content and render the whole page, but note how the rendering different portions of the page are delegated to different components: <code>Header</code>, <code>Navigation</code>, <code>Content</code>, and <code>Footer</code>.</p>

<p>The <code>Header</code> and <code>Footer</code> components are very simple: their only job is to render static content:</p>

<pre><code class="js">const Header = () =&gt; {
  return h("header.row.sticky", [
    h("a.logo.col-sm-1", { href: "#/" }, [
      h("img", { alt: "H3", src: "images/h3.svg" }),
    ]),
    h("div.version.col-sm.col-md", [
      h("div.version-number", "v0.11.0"),
      h("div.version-label", "“Keen Klingon“"),
    ]),
    h("label.drawer-toggle.button.col-sm-last", { for: "drawer-control" }),
  ]);
};

const Footer = () =&gt; {
  return h("footer", [h("div", "© 2020 Fabio Cevasco")]);
};
</code></pre>

<p>The <code>Navigation</code> component is more interesting, as it takes two parameters:</p>

<ul>
<li>The ID of the current page</li>
<li>The list of page IDs</li>
</ul>


<p>&hellip;and it uses this information to create the site navigation menu dynamically:</p>

<pre><code class="js">const Navigation = (id, ids) =&gt; {
  const menu = ids.map((p) =&gt;
    h(`a${p === id ? ".active" : ""}`, { href: `#/${p}` }, labels[p])
  );
  return h("nav#navigation.col-md-3", [
    h("label.drawer-close", { for: "drawer-control" }),
    ...menu,
  ]);
};
</code></pre>

<p>Finally, the <code>Content</code> component takes a string containing the HTML of the page content to render using the special <code>$html</code> attribute that can be used to essentially set the <code>innerHTML</code> property of an element:</p>

<pre><code class="js">const Content = (html) =&gt; {
  const content = h("div.content", { $html: html });
  return h("main.col-sm-12.col-md-9", [
    h(
      "div.card.fluid",
      h("div.section", { $onrender: () =&gt; Prism.highlightAll() }, content)
    ),
  ]);
};
</code></pre>

<p>Now, the key here is that we are only ever going to render &ldquo;known&rdquo; pages that are listed in the <code>labels</code> object.</p>

<p>Suppose for example that the <code>#/overview</code> page is loaded. The <code>h3.route.path</code> in this case is going to be set to <code>/overview</code>, which in turns corresponds to an ID of a well-known page (<code>overview</code>).</p>

<p>In a similar way, other well-known pages can easily be mapped to IDs, but it is also important to handle <em>unknown</em> pages (technically I could even pass an URL to a different site containing a malicious markdown page and have it rendered!), and if a page passed in the URL fragment is not present in the <code>labels</code> Object, the Overview page will be rendered instead.</p>

<p>This feature is also handy to automatically load the Overview when no fragment is specified.</p>

<p>What is that weird <code>$onrender</code> property you ask? Well, that&rsquo;s a H3-specific callback that will be executed whenever the corresponding DOM node is rendered&hellip; that&rsquo;s essentially the perfect place to for executing operations that must be perform when the DOM is fully available, like highlighting our code snippets using <em>Prism</em> in this case.</p>

<a id="Initialization"></a>
<h3>Initialization<a href="#document-top" title="Go to top"></a></h3>

<p>Done? Not quite. We need to initialize the SPA by passing the <code>Page</code> component to the <code>h3.init()</code> method to trigger the first rendering:</p>

<pre><code class="js">h3.init(Page);
</code></pre>

<p>And that&rsquo;s it. Now, keep in mind that this is the <em>short</em> version of initialization using a single component and a single route, but still, that&rsquo;s good enough for our use case.</p>

<a id="Next-steps"></a>
<h3>Next steps<a href="#document-top" title="Go to top"></a></h3>

<p>Made it this far? Good. Wanna know more? Have a look at the code of the <a href="https://github.com/h3rald/h3/tree/master/docs/example">todo list example</a> and try it out <a href="https://h3.js.org/example/index.html">here</a>.</p>

<p>Once you feel more comfortable and you are ready to dive into a more complex application, featuring different routes, screens, forms, validation, confirmation messages, plenty of third-party components etc., have a look at <a href="https://github.com/h3rald/litepad">LitePad</a>. You can see it in action here: <a href="https://litepad.h3rald.com/">litepad.h3rald.com</a>.</p>

<p>Note: the LitePad online demo will store all its data in localStorage.</p>

<a id="API"></a>
<h2>API<a href="#document-top" title="Go to top"></a></h2>

<p>The core of the H3 API is comprised of the following six methods and two properties.</p>

<a id="h(selector:-string,-attributes:-object,-children:-array)"></a>
<h3>h(selector: string, attributes: object, children: array)<a href="#document-top" title="Go to top"></a></h3>

<p>The <code>h</code> function is a constructor for Virtual DOM Nodes (VNodes). It can actually take from one to any number of arguments used to configure the resulting node.</p>

<p>The best way to understand how it works is by providing a few different examples. Please note that in each example the corresponding <em>HTML</em> markup is provided, although such markup will actually be generated when the Virtual Node is rendered/redrawn.</p>

<a id="Create-an-element,-with-an-ID,-classes,-attributes-and-children"></a>
<h4>Create an element, with an ID, classes, attributes and children<a href="#document-top" title="Go to top"></a></h4>

<p>This is a complete example showing how to create a link with an <code>href</code> attribute, an ID, two classes, and three child nodes.</p>

<pre><code class="js">h(
  "a#test-link.btn.primary",
  {
    href: "#/test",
  },
  ["This is a ", h("em", "test"), "link."]
);
</code></pre>

<p>↓</p>

<pre><code class="html">&lt;a id="test-link" class="btn primary" href="#/test"&gt;
  This is a &lt;em&gt;test&lt;/em&gt; link.
&lt;/a&gt;
</code></pre>

<a id="Create-an-empty-element"></a>
<h4>Create an empty element<a href="#document-top" title="Go to top"></a></h4>

<pre><code class="js">h("div");
</code></pre>

<p>↓</p>

<pre><code class="html">&lt;div&gt;&lt;/div&gt;
</code></pre>

<a id="Create-an-element-with-a-textual-child-node"></a>
<h4>Create an element with a textual child node<a href="#document-top" title="Go to top"></a></h4>

<pre><code class="js">h("span", "This is a test");
</code></pre>

<p>↓</p>

<pre><code class="html">&lt;span&gt;This is a test&lt;/span&gt;
</code></pre>

<a id="Create-an-element-with-child-nodes"></a>
<h4>Create an element with child nodes<a href="#document-top" title="Go to top"></a></h4>

<pre><code class="js">h("ol", [
  h("li", "Do this first."),
  h("li", "Then this."),
  h("li", "And finally this."),
]);
</code></pre>

<p><em>or</em></p>

<pre><code class="js">h(
  "ol",
  h("li", "Do this first."),
  h("li", "Then this."),
  h("li", "And finally this.")
);
</code></pre>

<p>↓</p>

<pre><code class="html">&lt;ol&gt;
  &lt;li&gt;Do this first.&lt;/li&gt;
  &lt;li&gt;Then this.&lt;/li&gt;
  &lt;li&gt;And finally this.&lt;/li&gt;
&lt;/ol&gt;
</code></pre>

<a id="Render-a-component"></a>
<h4>Render a component<a href="#document-top" title="Go to top"></a></h4>

<pre><code class="js">const TestComponent = () =&gt; {
  return h(
    "button.test",
    {
      onclick: () =&gt; alert("Hello!"),
    },
    "Show Alert"
  );
};
h(TestComponent);
</code></pre>

<p>↓</p>

<pre><code class="html">&lt;button class="test"&gt;Show Alert&lt;/button&gt;
</code></pre>

<p>Note: The event listener will not be added to the markup.</p>

<a id="Render-child-components"></a>
<h4>Render child components<a href="#document-top" title="Go to top"></a></h4>

<pre><code class="js">const TestLi = (text) =&gt; h("li.test", text);
h("ul", ["A", "B", "C"].map(TestLi));
</code></pre>

<p>↓</p>

<pre><code class="html">&lt;ul&gt;
  &lt;li class="test"&gt;A&lt;/li&gt;
  &lt;li class="test"&gt;B&lt;/li&gt;
  &lt;li class="test"&gt;C&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<a id="Special-attributes"></a>
<h4>Special attributes<a href="#document-top" title="Go to top"></a></h4>

<ul>
<li>Any attribute starting with <em>on</em> (e.g. onclick, onkeydown, etc.) will be treated as an event listener.</li>
<li>The <code>classList</code> attribute can be set to a list of classes to apply to the element (as an alternative to using the element selector shorthand).</li>
<li>The <code>data</code> attribute can be set to a simple object containing <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">data attributes</a>.</li>
<li>The special <code>$html</code> attribute can be used to set the <code>innerHTML</code> property of the resulting HTML element. Use only if you know what you are doing!</li>
<li>The special <code>$onrender</code> attribute can be set to a function that will executed every time the VNode is rendered and added to the DOM.</li>
</ul>


<p>The <code>$html</code> and the <code>$onrender</code> special attributes should be used sparingly, and typically only when interfacing with third-party libraries that need access to the real DOM.</p>

<p>For example, consider the following code snippet that can be used to initialize the <a href="https://github.com/Inscryb/inscryb-markdown-editor">InscrybMDE</a> Markdown editor on a textarea element:</p>

<pre><code class="js">h("textarea", {
  $onrender: (element) =&gt; {
    const editor = new window.InscrybMDE({
      element,
    });
  },
});
</code></pre>

<a id="h3.screen({setup,-display,-teardown})"></a>
<h3>h3.screen({setup, display, teardown})<a href="#document-top" title="Go to top"></a></h3>

<p>Creates a Screen by providing a (mandatory) <strong>display</strong> function used to render content, an an optional <strong>setup</strong> and <strong>teardown</strong> functions, executed before and after the display function respectively.</p>

<p>Each of these functions takes a single <strong>screen</strong> parameter, which is initialized as an empty object before the setup, and is (optionally) returned by the teardown function should state be preserved across different screens.</p>

<p>Consider the following example:</p>

<pre><code class="js">h3.screen({
  setup: await (state) =&gt; {
    state.data = state.data || {};
    state.id = h3.route.parts.id || 1;
    const url = `http://dummy.restapiexample.com/api/v1/employee/${id}`;
    state.data[id] = state.data[id] || await (await fetch(url)).json();
  },
  display(state) =&gt; {
    const employee = state.data[state.id];
    if (!employee) {
      return h("div.error", "Invalid Employee ID.");
    }
    return h("div.employee",
      h("h2", "Employee Profile"),
      h("dl", [
        h("dt", "Name:"),
        h("dd", data.employee_name),
        h("dt", "Salary:"),
        h("dd", `${data.employee_salary} €`),
        h("dt", "Age:"),
        h("dd", data.employee_age),
      ])
    )
  },
  teardown: (state) =&gt; ({ data: state.data })
})
</code></pre>

<p>This example shows how to implement a simple component that renders an employee profile in the <code>display</code> function, fetches data (if necessary) in the <code>setup</code> function, and preserves data in the <code>teardown</code> function.</p>

<p><strong>Tip</strong> To interrupt navigation or perform redirects, return <strong>false</strong> in the <strong>setup</strong> method.</p>

<a id="h3.dispatch(event:-string,-data:-any)"></a>
<h3>h3.dispatch(event: string, data: any)<a href="#document-top" title="Go to top"></a></h3>

<p>Dispatches a event and optionally some data. Messages are typically handled centrally by modules.</p>

<pre><code class="js">h3.dispatch("settings/set", { logging: true });
</code></pre>

<p>A event name can be any string, but keep in mind that the following names (and typically any name starting with <code>$</code>) are reserved for framework use:</p>

<ul>
<li><code>$init</code> &mdash; Dispatched when the application is initialized. Useful to initialize application state.</li>
<li><code>$redraw</code> &mdash; Dispatched after an application redraw is triggered.</li>
<li><code>$navigation</code> &mdash; Dispatched after a navigation occurs.</li>
<li><code>$log</code> &mdash; Dispatched after <em>any</em> event (except <code>$log</code> iself) is dispatched. Very useful for debugging.</li>
</ul>


<a id="h3.init(config:-object)"></a>
<h3>h3.init(config: object)<a href="#document-top" title="Go to top"></a></h3>

<p>The initialization method of every H3 application. You <em>must</em> call this method once to initialize your application by providing a component to render or configuration object with the following properties:</p>

<ul>
<li><strong>element</strong> (Element) &mdash; The DOM Element to which the Application will be attached (default: <code>document.body</code>).</li>
<li><strong>modules</strong> (Array) &mdash; An array of functions used to handle the application state that will be executed once before starting the application.</li>
<li><strong>routes</strong> (Object) &mdash; An object containing routing definitions, using paths as keys and components as values. Routing paths can contain named parts like <code>:name</code> or <code>:id</code> which will populate the <code>parts</code> property of the current route (<code>h3.route</code>).</li>
<li><strong>preStart</strong> (Function) &mdash; An optional function to be executed before the application is first rendered.</li>
<li><strong>postStart</strong> (Function) &mdash; An optional function to be executed after the application is first rendered.</li>
</ul>


<p>This is an example of a simple routing configuration:</p>

<pre><code class="js">const routes = {
  "/posts/:id": Post,
  "/pages/:id": Page,
  "/": HomePage,
};
</code></pre>

<p>For more a complete example of initialization, see <a href="https://h3.js.org/example/assets/js/app.js">this</a>.</p>

<a id="h3.navigateTo(path:-string,-params:-object)"></a>
<h3>h3.navigateTo(path: string, params: object)<a href="#document-top" title="Go to top"></a></h3>

<p>Navigates to the specified path. Optionally, it is possibile to specify query string parameters as an object.</p>

<p>The following call causes the application to switch to the following URL: <code>#/posts/?orderBy=date&amp;direction=desc</code>.</p>

<pre><code class="js">h3.navigateTo("/posts/", { orderBy: "date", direction: "desc" });
</code></pre>

<a id="h3.on(event:-string,-handler:-function)"></a>
<h3>h3.on(event: string, handler: function)<a href="#document-top" title="Go to top"></a></h3>

<p>Subscribes to the specified event and executes the specified handler function whenever the event is dispatched. Returns a function that can be used to delete the subscription.</p>

<p>Subscriptions should be typically managed in modules rather than in components: a component gets rendered several times and subscriptions <em>must</em> be properly cleaned up to avoid memory leaks.</p>

<p>Example:</p>

<pre><code class="js">const pages = (store) =&gt; {
  store.on("$init", () =&gt; ({ pagesize: 10, page: 1 }));
  store.on("pages/set", (state, page) =&gt; ({ page }));
};
</code></pre>

<a id="h3.redraw()"></a>
<h3>h3.redraw()<a href="#document-top" title="Go to top"></a></h3>

<p>Triggers an application redraw. Unlike most frameworks, in H3 redraws <em>must</em> be triggered explicitly. Just call this method whenever you want something to change and components to re-render.</p>

<a id="h3.route"></a>
<h3>h3.route<a href="#document-top" title="Go to top"></a></h3>

<p>An read-only property containing current route (Route object). A Route object has the following properties:</p>

<ul>
<li><strong>path</strong> &mdash; The current path (fragment without #) without query string parameters, e.g. <code>/posts/134</code></li>
<li><strong>def</strong> &mdash; The matching route definition, e.g. <code>/posts/:id</code></li>
<li><strong>query</strong> &mdash; The query string, if present, e.g. <code>?comments=yes</code></li>
<li><strong>part</strong> &mdash; An object containing the values of the parts defined in the route, e.g. <code>{id: "134"}</code></li>
<li><strong>params</strong> &mdash; An object containing the query string parameters, e.g. <code>{comments: "yet"}</code></li>
</ul>


<a id="h3.state"></a>
<h3>h3.state<a href="#document-top" title="Go to top"></a></h3>

<p>A read-only property containing the current application state. The state is a plain object, but its properties should only be modified using event subscription handlers.</p>

<a id="About"></a>
<h2>About<a href="#document-top" title="Go to top"></a></h2>

<p>Or: <em>everything you wanted to know about H3, but you were afraid to ask</em>.</p>

<a id="Why-the-weird-release-labels?"></a>
<h3>Why the weird release labels?<a href="#document-top" title="Go to top"></a></h3>

<p>Ubuntu started <a href="https://wiki.ubuntu.com/DevelopmentCodeNames">naming their releases after animals</a> in alphabetical order&hellip; In a similar way, H3 releases are named after <a href="https://memory-alpha.fandom.com/wiki/Species">Star Trek species</a>.</p>

<a id="A-brief-history-of-H3"></a>
<h3>A brief history of H3<a href="#document-top" title="Go to top"></a></h3>

<p>A while ago, I was interviewing with several companies trying to find a new job in the JavaScript ecosystem. One of these companies asked me, as a part of their interview process, to create a simple Todo List app in JavaScript <em>without using any libraries</em>.</p>

<p>I spent some time thinking about it, started cobbling together a few lines of code doing the usual DOM manipulation stuff (how hard can it be, right? It&rsquo;s a Todo List!) and then stopped.</p>

<p><em>No way!</em> &mdash; I thought.</p>

<p>There has to be a better way. If only I could use something small like <a href="https://mithril.js.org">Mithril</a>, it would take me no time! But sadly I couldn&rsquo;t. Unless&hellip;</p>

<p>Unless I coded the whole framework myself of course. And so I did, and that&rsquo;s more or less how H3 was born. You can see a slightly-modified version of the resultig Todo List app <a href="https://h3.js.org/example/index.html">here</a> (with all the bonus points implemented, like localStorage support, pagination, filtering, etc.).</p>

<p>The original version only had an even smaller (and even buggier) Virtual DOM and hyperscript implementation, no routing and no store, but it did the job. After a few additional interviews I was actually offered the job, however I didn&rsquo;t take it, but that&rsquo;s another story ;)</p>

<p>A few months after that interview, I decided to take a look at that code, tidy it up, add a few bits and bobs, package it up and release it as a <em>proper</em> microframwork. Well, kind of.</p>

<a id="Credits"></a>
<h3>Credits<a href="#document-top" title="Go to top"></a></h3>

<p>The H3 web site is <a href="https://github.com/h3rald/h3/blob/master/docs/js/app.js">built with H3 itself</a>, plus the following third-party libraries:</p>

<ul>
<li><a href="https://marked.js.org/#/README.md#README.md">marked.js</a></li>
<li><a href="https://prismjs.com/">Prism.js</a></li>
<li><a href="https://minicss.org/">mini.css</a></li>
</ul>


<a id="Special-Thanks"></a>
<h3>Special Thanks<a href="#document-top" title="Go to top"></a></h3>

<p>Special thanks to the following individuals, that made H3 possible:</p>

<ul>
<li><strong>Leo Horie</strong>, author of the awesome <a href="https://mithril.js.org/">Mithril</a> framework that inspired me to write the H3 microframework in a moment of need.</li>
<li><strong>Andrey Sitnik</strong>, author of the beatiful <a href="https://evilmartians.com/chronicles/storeon-redux-in-173-bytes">Storeon</a> state management library, that is used (with minor modifications) as the H3 store.</li>
</ul>

    </div>
    <div id="footer">
      <p><span class="copy"></span> Fabio Cevasco &ndash; September 1, 2023</p>
      <p><span>Powered by</span> <a href="https://h3rald.com/hastyscribe" class="hastyscribe-logo">  <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='350.755'%20height='102.312'%3E%3Cg%20font-family='Mr%20Bedfort'%20font-size='72'%20font-weight='400'%20letter-spacing='0'%20style='line-height:125%25;-inkscape-font-specification:Mr%20Bedfort'%20word-spacing='0'%3E%3Cpath%20d='m17.352%2044.784-1.296-5.616c-3.552-1.2-7.2-2.52-10.944-3.96-.048%200-.072.024-.072.072.048%201.008%204.152%204.176%2012.312%209.504m6.12-3.24c.96%204.224%201.56%206.96%201.8%208.208%2011.424%206.96%2018.744%2010.464%2021.96%2010.512l-3.888-13.896c-6.432-1.248-13.056-2.856-19.872-4.824M18%204.752l-.288%204.608c0%204.464%201.512%2013.32%204.536%2026.568%206.24%201.92%2012.792%203.576%2019.656%204.968-1.968-7.44-3.408-13.848-4.32-19.224-.912-5.424-1.368-11.208-1.368-17.352.096-.528%201.032-1.368%202.808-2.52C40.848.6%2042.144%200%2042.912%200c.384%200%20.576.264.576.792l-.36%205.04c0%207.776%202.016%2019.872%206.048%2036.288%205.664.864%2010.944%201.368%2015.84%201.512.336%200%20.504.168.504.504%200%20.288-1.056%201.008-3.168%202.16-2.112%201.152-3.36%201.728-3.744%201.728-2.256%200-4.944-.192-8.064-.576l2.808%2010.08c0%20.816-1.704%202.208-5.112%204.176-3.84%200-11.376-3.336-22.608-10.008.48%202.688.768%205.04.864%207.056-.096.096-1.056.576-2.88%201.44-1.824.864-2.856%201.296-3.096%201.296-.624%200-.936-.456-.936-1.368-.432-4.56-1.056-9-1.872-13.32-4.896-3.168-9.072-6.048-12.528-8.64C1.728%2035.52%200%2033.912%200%2033.336c0-.768%201.584-2.088%204.752-3.96l.216-.144c3.264%201.536%206.48%202.88%209.648%204.032-2.736-10.416-4.104-17.496-4.104-21.24%200-1.68.192-3%20.576-3.96.096-.144%201.152-.816%203.168-2.016%202.016-1.2%203.168-1.8%203.456-1.8.192%200%20.288.168.288.504M78.01%2040.104c.144-.288%201.44-.432%203.888-.432%202.496%200%203.744.36%203.744%201.08%200%20.144-.144.432-.432.864-1.68%202.304-2.52%204.704-2.52%207.2%200%202.496.576%204.56%201.728%206.192%201.2%201.584%202.712%202.376%204.536%202.376%202.976%200%206-2.112%209.072-6.336l.504.864c-3.744%205.952-7.872%208.928-12.384%208.928-3.408%200-6.024-1.752-7.848-5.256-.768%201.152-2.016%202.232-3.744%203.24-1.728%201.008-3.36%201.512-4.896%201.512-4.176%200-6.264-1.752-6.264-5.256%200-2.736%201.152-5.592%203.456-8.568%202.352-3.024%204.656-4.536%206.912-4.536.192%200%20.288.072.288.216%200%20.144-.096.312-.288.504-1.008.528-1.872%201.632-2.592%203.312a13.12%2013.12%200%200%200-1.008%205.04c0%203.504%201.344%205.256%204.032%205.256.768%200%201.488-.192%202.16-.576.72-.432%201.152-1.032%201.296-1.8a14.973%2014.973%200%200%201-.936-5.256c0-1.824.072-3.36.216-4.608.384-2.64.744-3.96%201.08-3.96'/%3E%3Cpath%20d='m119.772%2051.048.504.864c-2.016%203.216-4.44%205.664-7.272%207.344-2.832%201.728-5.52%202.592-8.064%202.592-5.136%200-8.544-2.208-10.224-6.624%200-.24.552-1.032%201.656-2.376%201.104-1.344%201.824-2.016%202.16-2.016.384%200%20.6.12.648.36.288%201.536%201.08%203.168%202.376%204.896%201.344%201.728%202.568%202.592%203.672%202.592%201.728%200%202.616-.48%202.664-1.44%200-1.488-1.752-3.744-5.256-6.768-1.296-1.152-2.496-2.616-3.6-4.392-1.056-1.824-1.584-3.696-1.584-5.616%200-.384.072-.648.216-.792%202.112-1.92%203.504-2.88%204.176-2.88.528%200%20.792.408.792%201.224.048%201.776.792%203.624%202.232%205.544%201.488%201.872%202.928%203.672%204.32%205.4%201.44%201.728%202.16%203.456%202.16%205.184%200%201.68-.84%203.192-2.52%204.536%203.936-.096%207.584-2.64%2010.944-7.632'/%3E%3Cpath%20d='M122.633%2024.264c.768%2022.56%204.248%2033.84%2010.44%2033.84%202.64%200%205.808-2.352%209.504-7.056l.504.864c-4.512%206.72-8.832%2010.08-12.96%2010.08-4.08%200-7.392-3.12-9.936-9.36-2.544-6.288-3.888-14.64-4.032-25.056%200%200-.347-5.071%200-4.827.096-3.648.264-5.229.504-8.493%200-.432.216-.72.648-.864%202.88-1.152%204.488-1.728%204.824-1.728.384%200%20.576.216.576.648a165.13%20165.13%200%200%200-.144%206.552'/%3E%3Cpath%20d='M157.87%2082.728c0%203.984%201.176%207.728%203.528%2011.232%202.352%203.504%204.536%205.256%206.552%205.256%201.728%200%202.592-1.536%202.592-4.608%200-2.256-.84-5.712-2.52-10.368a1998.05%201998.05%200%200%200-2.808-7.704%20452.798%20452.798%200%200%201-2.952-8.136c-2.928%204.464-4.392%209.24-4.392%2014.328m15.84%205.544c0%204.704-.792%208.208-2.376%2010.512-1.584%202.352-3.6%203.528-6.048%203.528-3.12%200-6-1.68-8.64-5.04-2.592-3.312-3.888-7.44-3.888-12.384.336-3.408%201.248-6.552%202.736-9.432%201.536-2.88%203.576-5.856%206.12-8.928-1.632-4.464-2.76-7.992-3.384-10.584-2.064%202.64-4.44%203.96-7.128%203.96-2.688%200-5.04-1.368-7.056-4.104-2.016-2.736-3.024-6.672-3.024-11.808%200-.528.384-.888%201.152-1.08%202.304-.48%203.624-.72%203.96-.72.576%200%20.864.288.864.864%200%204.368.984%207.8%202.952%2010.296%201.248%201.536%202.808%202.304%204.68%202.304%201.008%200%202.064-.456%203.168-1.368-.72-3.216-1.08-5.904-1.08-8.064%200-2.208.504-3.816%201.512-4.824%202.064-1.2%203.216-1.8%203.456-1.8.48%200%20.72.36.72%201.08%200%205.232.96%2010.752%202.88%2016.56l1.224%203.816c3.6-3.888%206.336-7.224%208.208-10.008l.504.864c-1.152%201.824-2.208%203.312-3.168%204.464a161.359%20161.359%200%200%201-3.096%203.6%20676.433%20676.433%200%200%201-2.016%202.376c3.504%2010.032%205.424%2015.912%205.76%2017.64.672%203.408%201.008%206.168%201.008%208.28'/%3E%3Cpath%20d='M178.334%2012.888c0%204.608%202.736%208.904%208.208%2012.888%202.544-6.528%203.816-11.712%203.816-15.552%200-1.68-.552-3.24-1.656-4.68-1.104-1.44-2.352-2.16-3.744-2.16-1.344%200-2.568.72-3.672%202.16-1.056%201.44-1.824%202.88-2.304%204.32-.432%201.392-.648%202.4-.648%203.024m-9.36%2046.944c-.336.336-.624.504-.864.504-.384%200-.576-.192-.576-.576%200-.384.096-.696.288-.936%202.16-2.4%204.704-6.024%207.632-10.872a162.099%20162.099%200%200%200%208.064-15.12c-6.144-4.272-9.216-8.64-9.216-13.104%200-2.976.696-6%202.088-9.072%201.44-3.072%203.336-5.616%205.688-7.632%202.4-2.016%204.68-3.024%206.84-3.024%202.208%200%203.696.528%204.464%201.584.816%201.008%201.224%202.496%201.224%204.464%200%203.696-2.232%2010.608-6.696%2020.736%201.584%201.056%203.696%202.352%206.336%203.888a295.464%20295.464%200%200%201%206.84%203.888%2056.857%2056.857%200%200%201%205.76%203.816c3.936%203.024%205.904%206.312%205.904%209.864%200%203.504-1.824%206.792-5.472%209.864-3.648%203.024-7.344%204.536-11.088%204.536-5.904%200-11.16-3.072-15.768-9.216-.528-.72-.792-1.32-.792-1.8%200-.528.6-1.272%201.8-2.232%201.2-1.008%202.136-1.512%202.808-1.512.144%200%20.264.072.36.216%201.296%202.256%203.624%204.656%206.984%207.2%203.36%202.544%206.648%203.816%209.864%203.816%203.984-.288%205.976-2.256%205.976-5.904%200-3.072-1.752-5.952-5.256-8.64-2.592-1.968-5.784-4.032-9.576-6.192-3.792-2.208-6.408-3.792-7.848-4.752-5.808%2012.192-11.064%2020.928-15.768%2026.208M230.382%2041.688c0-1.44-.912-2.16-2.736-2.16-1.824%200-3.336.816-4.536%202.448-1.2%201.632-1.8%203.72-1.8%206.264%200%202.496.96%204.776%202.88%206.84%201.968%202.016%204.896%203.024%208.784%203.024%202.448%200%204.824-.576%207.128-1.728%202.352-1.2%204.344-2.976%205.976-5.328l.504.864c-1.728%203.12-4.392%205.544-7.992%207.272-3.552%201.728-7.152%202.592-10.8%202.592-3.6%200-6.552-.768-8.856-2.304-2.256-1.488-3.384-3.648-3.384-6.48%200-3.6%201.416-7.008%204.248-10.224%202.88-3.216%206.456-4.824%2010.728-4.824%201.488%200%202.592.384%203.312%201.152.72.72%201.08%201.704%201.08%202.952%200%201.2-.432%202.4-1.296%203.6-.864%201.152-1.848%201.728-2.952%201.728-.576%200-1.176-.216-1.8-.648-.576-.48-.864-.864-.864-1.152%200-.336.12-.6.36-.792.24-.24.528-.456.864-.648.768-.384%201.152-1.2%201.152-2.448'/%3E%3Cpath%20d='m251.359%2047.088-1.368-.072c-.48%200-.816.216-1.008.648-.576%201.44-1.488%203.072-2.736%204.896l-.576-.792c.96-1.296%201.704-2.928%202.232-4.896%200-.384-.168-.648-.504-.792-2.16-.72-3.24-2.616-3.24-5.688%200-.672.576-1.296%201.728-1.872%201.152-.624%202.112-.936%202.88-.936.768%200%201.152.336%201.152%201.008%200%203.6%201.68%205.4%205.04%205.4.816%200%201.464-.072%201.944-.216.528-.192.816-.288.864-.288.48%200%20.72.36.72%201.08%200%20.672-.192%201.152-.576%201.44-.336.24-.72.792-1.152%201.656-.432.816-.648%201.776-.648%202.88%200%202.16.624%203.864%201.872%205.112%201.296%201.2%202.88%201.8%204.752%201.8%201.92%200%203.816-.552%205.688-1.656%201.872-1.104%203.504-2.688%204.896-4.752l.504.864c-1.68%202.928-4.008%205.28-6.984%207.056-2.976%201.776-5.64%202.664-7.992%202.664-4.8%200-7.2-2.184-7.2-6.552%200-.816.288-1.92.864-3.312.576-1.392%201.152-2.568%201.728-3.528l.864-1.44c0-.192-.072-.288-.216-.288-1.536.384-2.712.576-3.528.576'/%3E%3Cpath%20d='M273.24%2042.84c-.24%202.016-.36%203.672-.36%204.968%200%204.56.864%208.112%202.592%2010.656%201.776%202.496%203.912%203.744%206.408%203.744%202.544%200%205.064-.888%207.56-2.664%202.496-1.728%204.824-4.272%206.984-7.632l-.504-.864c-3.744%205.136-7.2%207.704-10.368%207.704-2.016%200-3.648-1.08-4.896-3.24-1.248-2.16-1.872-5.088-1.872-8.784%200-1.92.168-3.864.504-5.832%200-.432-.192-.648-.576-.648-.336%200-1.944.576-4.824%201.728-.432.144-.648.432-.648.864m5.976-15.48c.768.816%201.152%201.8%201.152%202.952s-.384%202.136-1.152%202.952c-.72.816-1.608%201.224-2.664%201.224-1.008%200-1.872-.408-2.592-1.224-.72-.816-1.08-1.8-1.08-2.952s.36-2.136%201.08-2.952c.72-.816%201.584-1.224%202.592-1.224%201.056%200%201.944.408%202.664%201.224'/%3E%3Cpath%20d='M310.14%2045.36c-.576%200-.864.576-.864%201.728%200%201.152.456%202.52%201.368%204.104.96%201.536%202.16%202.76%203.6%203.672.048-.24.072-.6.072-1.08%200-2.112-.408-4.032-1.224-5.76-.816-1.776-1.8-2.664-2.952-2.664m-13.464-24.912c0%209.6%201.104%2017.76%203.312%2024.48%202.16-5.904%203.24-13.8%203.24-23.688%200-4.272-.264-7.8-.792-10.584s-1.248-4.176-2.16-4.176c-1.2%200-2.112%201.296-2.736%203.888-.576%202.544-.864%205.904-.864%2010.08m11.448-6.84c0%204.704-.816%2010.32-2.448%2016.848-1.584%206.528-3.312%2011.832-5.184%2015.912%201.488%204.224%203.192%207.488%205.112%209.792%201.92%202.256%203.672%203.384%205.256%203.384s2.64-.984%203.168-2.952c-2.16-.96-4.008-2.496-5.544-4.608-1.488-2.112-2.232-4.224-2.232-6.336%200-1.104.264-1.992.792-2.664.528-.672%201.296-1.008%202.304-1.008%202.496%200%204.416.96%205.76%202.88%201.392%201.872%202.088%204.128%202.088%206.768%200%201.488-.24%202.904-.72%204.248.48.144%201.032.216%201.656.216%202.64%200%204.992-1.68%207.056-5.04l.576.72c-2.16%203.696-4.872%205.544-8.136%205.544-.384%200-.96-.048-1.728-.144-1.68%203.12-4.224%204.68-7.632%204.68-3.936%200-7.536-2.352-10.8-7.056-1.584-2.352-2.856-5.568-3.816-9.648-1.008-4.128-1.512-8.712-1.512-13.752%200-5.04.432-9.6%201.296-13.68.816-4.08%202.064-7.44%203.744-10.08%201.68-2.64%203.6-3.96%205.76-3.96%203.456%200%205.184%203.312%205.184%209.936'/%3E%3Cpath%20d='m332.694%2037.656.072-.936c0-.576-.648-.864-1.944-.864a5.858%205.858%200%200%200-3.528%201.152c-1.008.768-1.512%201.8-1.512%203.096%200%202.304%201.656%203.456%204.968%203.456.528%200%201.056-.072%201.584-.216a5.437%205.437%200%200%201%201.728-.288c.576%200%20.864.192.864.576%200%20.048-.192.168-.576.36-.384.144-.864.384-1.44.72-.528.336-1.08.768-1.656%201.296-1.344%201.248-2.016%202.952-2.016%205.112s.648%203.816%201.944%204.968c1.296%201.104%202.976%201.656%205.04%201.656s4.176-.6%206.336-1.8a14.695%2014.695%200%200%200%205.256-4.896l.504.864c-1.824%203.168-4.368%205.664-7.632%207.488-3.216%201.872-6.168%202.808-8.856%202.808-2.64%200-4.68-.552-6.12-1.656-1.392-1.104-2.088-2.52-2.088-4.248%200-1.776.432-3.408%201.296-4.896.864-1.488%201.608-2.544%202.232-3.168.672-.672%201.152-1.128%201.44-1.368.336-.288.504-.48.504-.576%200-.144-.024-.216-.072-.216-1.536.576-3.024.864-4.464.864-2.544%200-3.816-1.032-3.816-3.096%200-2.784%201.584-5.184%204.752-7.2%203.168-2.016%205.928-3.024%208.28-3.024%202.4%200%203.6.576%203.6%201.728%200%20.72-.384%201.488-1.152%202.304-.768.816-1.464%201.224-2.088%201.224-.96%200-1.44-.408-1.44-1.224'/%3E%3C/g%3E%3Ctext%20xml:space='preserve'%20x='280.368'%20y='13.976'%20font-family='Mr%20Bedfort'%20font-size='40'%20font-weight='400'%20letter-spacing='0'%20style='line-height:125%25;-inkscape-font-specification:Mr%20Bedfort'%20transform='translate(-177.39%20-82.362)'%20word-spacing='0'/%3E%3Cpath%20fill-rule='evenodd'%20d='M99.36%2029.25c-.061-.106.474-.57%201.596-1.31%201.123-.74%202.835-1.75%205.15-2.876%202.313-1.127%205.233-2.365%208.729-3.583%203.496-1.218%207.573-2.41%2012.103-3.567%205.291-1.357%2011.259-2.645%2017.812-3.778%206.554-1.133%2013.693-2.108%2021.297-2.923%2013.686-1.47%2028.926-2.381%2045.127-2.565%207.483-.085%2015.175-.02%2023.015.229%207.834.248%2015.51.67%2022.968%201.25%2014.92%201.156%2028.998%202.957%2041.703%205.435%206.104%201.186%2011.931%202.505%2017.35%204.046%205.42%201.541%2010.433%203.303%2014.965%205.263%204.145%201.79%207.906%203.808%2011.06%206.11%201.442%201.044%202.772%202.171%203.92%203.37%201.146%201.199%202.11%202.469%202.864%203.785a13.434%2013.434%200%200%201%201.512%203.986c.295%201.494.276%202.914.074%204.176a14.011%2014.011%200%200%201-1.3%203.977%2016.406%2016.406%200%200%201-1.587%202.577c-.977%201.305-1.626%201.855-1.732%201.773-.106-.082.333-.802%201.064-2.196a22.47%2022.47%200%200%200%201.191-2.616c.393-1.05.749-2.284.853-3.7a10.664%2010.664%200%200%200-.315-3.59c-.293-1.107-.799-2.24-1.502-3.34-.713-1.123-1.625-2.201-2.717-3.229-1.092-1.027-2.363-2.005-3.75-2.943-3.044-2.044-6.684-3.82-10.755-5.44-4.459-1.771-9.383-3.354-14.721-4.736-5.338-1.383-11.09-2.564-17.15-3.648-12.586-2.244-26.524-3.873-41.336-4.949a561.489%20561.489%200%200%200-22.791-1.181%20602.786%20602.786%200%200%200-22.847-.285c-16.088.1-31.21.836-44.806%202.057-7.56.68-14.646%201.492-21.154%202.44-6.509.95-12.44%202.035-17.714%203.176-4.53.984-8.59%201.971-12.085%202.975a106.17%20106.17%200%200%200-8.788%202.925c-2.358.907-4.145%201.7-5.364%202.228-1.22.527-1.876.783-1.938.677z'/%3E%3C/svg%3E
" width="80" height="23" alt="HastyScribe">
  </a></p>
    </div>
  </div>
  
</body>