this one, not the first

added stars
gdd
2022-10-25 23:46:39 -05:00 · 2022-10-16 00:14:48 -05:00 · 2022-10-15 22:57:57 -05:00 · 2022-10-15 12:05:53 -05:00 · 2022-10-14 16:12:50 -05:00 · 2022-10-14 15:47:01 -05:00
107 changed files with 3973 additions and 506 deletions
@@ -0,0 +1,268 @@
+<!---->
+<h1>100q to develop dia </h1>
+? ??, 2022<br>
+#?? <br>
+<br>
+Random DeviantART questionnaire because why not? <br>
+<br>
+<h2>Mayor Dia De Luna </h2>
+<br>
+Filling out <a href="https://www.deviantart.com/iciaa">Iciaa</a>'s questionnaire for Dia because I'm feeling nostalgic for these overly long questionnaires. Also, Dia isn't that detailed of a character yet. <br>
+<br>
+<b>1. What is your character's name? Do they have a nickname? </b><br>
+Diana "Dia." She may be mayor, but Lucrest is so small and Dia is so young that she had no hope of expectation of getting all the boomers to address her by her title and surname. <br>
+<br>
+<b>2. Is your character male or female? What is their sexuality? What role does it play in your story? </b><br>
+Female, straight. She isn't above manipulating guys' feelings to get what she wants. <br>
+<br>
+<b>3. How old is your character? Does their age matter to them emotionally or socially? </b><br>
+28. It's the age my old guild leader was. Seemed like a good year between young and old, inexperienced and wise to me as a high schooler. Dia is the youngest of her highly accomplished family, so she always feels like her progress to too slow or insignificant. She is also younger than the seniors and boomers and older than the kids and looks young for her age, so she never really finds a peer in Lucrest. <br>
+<br>
+<b>4. How tall is your character? Does it affect them negatively, positively, or neutrally? </b><br>
+She is pretty sure her short stature prevents her from being taken seriously in some circles. <br>
+<br>
+<b>5. What is your character's body shape? Are they physically fit? What challenges or advantages does this present? </b><br>
+She is fit but too petite for physical combat. Her magic isn't really combat-oriented either. Her henchies have to do the heavy-lifting. <br>
+<br>
+<b>6. Describe your character's facial features. What color are their eyes and hair? Be specific! </b><br>
+She has refined aristocratic features. Her Mexican heritage falls more on the Polish side than the Aztec side, so she's very fair. She has natural black hair dyed with streaks of navy and silver. Her eyes are dark brown, nearly black. <br>
+<br>
+<b>7. Do other people find your character physically attractive? Why or why not? </b><br>
+Yes. She is conventionally cute, polite, and knows how to push people's buttons. <br>
+<br>
+<b>8. What sort of clothing does your character wear? What colors are common? What does this style reflect? </b><br>
+Light, elegant colors, professional but feminine styles, propensity for sparkly or metallic fabrics like lurex or lame. <br>
+<br>
+<b>9. Does your character have any physical or mental disabilities? How does this affect your story? Is it a main point of your plot? </b><br>
+I'm not going to armchair diagnose her with anything, but she's a jerk. <br>
+<br>
+<b>10. What does your character do for money? If they are unemployed, how do they live? Does money matter to your character? </b><br>
+She owns 90% of the commercial properties in Lucrest in addition to several miscellaneous small businesses. She's pathetic by her family's standards, but she's plenty wealthy. <br>
+<br>
+<b>11. Does your character have specified family members? Describe their relationship with their family. </b><br>
+Her father is the vice president of the Confederate States of America. Her older brothers and sisters are tycoons and elite politicians. Her father treats her like the baby of the family, so he never sets the same expectations for her nor shows her the same respect. She's not particularly accomplished anyway. She has a rivalry with her siblings and takes every one-up personally. <br>
+<br>
+<b>12. What is your character's marital status? Are they involved in a relationship? How is this emotional taxation present in your story? </b><br>
+She actually does have a secret boyfriend, Koda, but he isn't really involved in the story. He's her confidant and very supportive of her behind the scenes. <br>
+<br>
+<b>13. Who are your character's closest friends? How do they know each other? How do they act around each other? </b><br>
+She doesn't really have close friends besides Koda. Even when she's chummy with someone, she privately views them cynically, either as a tool or an enemy. <br>
+<br>
+<b>14. Who are your character's minor enemies? Why do they not get along? </b><br>
+I'm fleshing out this part of the story right now. Dia bought a lengthy section of land over Abyssal Cave, which just happened to be an unincorporated community to simultaneously takeover politically as a cover. There are other figures who are trying to control the cave for their own purposes, though. Later, the National Park Service is going to get involved, too. <br>
+<br>
+<b>15. Who are your character's major enemies? How does this affect your plot? What began the animosity of their relationship? How, if at all, is it resolved? </b><br>
+Helia and her friends. Although secrecy is part of the deal with the "minor enemies," Helia is set to blow everyone's cover. Before she even set foot in the caves, Dia was suspicious the moment she realized she was related to Chuck, a Union vet. <br>
+<br>
+<b>16. How does your character speak, and what does their voice sound like? How does this reflect their personality, if at all? </b><br>
+Her voice is sweet and high-pitched like a bell. She took speech classes as a child, and it shows in her deliberate articulation. <br>
+<br>
+<b>17. Is there anything significant about your character's movement? Is it important? </b><br>
+She has perfect posture; she's good at walking silently and sneaking around; I don't know lol no. <br>
+<br>
+<b>18. Who does your character live with, or do they live alone? How does this arrangement affect your character's lifestyle? </b><br>
+This changes a lot. She's lived with Rune's older sister, her paramour, Angel's dad, and probably others in the future. Get out of her business. <br>
+<br>
+<b>19. What traits does your character value in their friends? </b><br>
+Someone intelligent, someone who gets where she comes from, someone who respects her. <br>
+<br>
+<b>20. What are your character's main pet peeves? Does this play a role in your story? </b><br>
+Being belittled, being called cute, being carded for things. It's part of her impetus for purchasing a section of the Abyssal Cave. <br>
+<br>
+<b>21. Where does your character live? Are they happy? Describe the scenery. How does this affect your story? </b><br>
+She lives in the Mayor's Mansion in Lucrest, Nickajack. It's devastatingly rural and slow compared to the capital, even after she's populated with lots of fake businesses and tourists. <br>
+<br>
+<b>22. What is your character's opinion of the society they live in? </b><br>
+She's too impatient to worry about the consequences of her actions, especially when they apply to people far beneath her, both in birth and intellect. <br>
+<br>
+<b>23. Briefly summarize your character's childhood. </b><br>
+She is much younger than her siblings, so she didn't see them much. Unlike a lot of rich kids, her parents actually raised her themselves without a nanny or boarding school. She roamed the National Archives and other legal and political centers growing up. She also had all the fancy private tutoring, social outings, and world travel expected of the daughter of an elite family. <br>
+<br>
+<b>24. What are your character's darkest secrets? </b><br>
+Hahaha...It wouldn't be murder or plague or blackmail. It'd be that the GDP of her town is falsified, and nearly all the businesses there operate at a substantial loss. <br>
+<br>
+<b>25. Has anyone close to your character died in the past? How did your character deal with this? Did it have a lasting impact? </b><br>
+Haven't thought about it. <br>
+<br>
+<b>26. What is your character's social status? Are they happy with it? </b><br>
+She's the daughter of the vice president and the mayor of a nowhere town. No, she's miserable because she could do so much better. <br>
+<br>
+<b>27. Is your character a hero, a villain, or neither? How do they see themselves, as opposed to how others see them? </b><br>
+Villain for sure. She knows it, but others wouldn't understand how hard it is for her to compete. Others think she's weird but effective. <br>
+<br>
+<b>28. Is your character conservative and disapproving of change, or liberal and willing to accept? </b><br>
+I don't think this is a very fair definition of conservative and liberal. She's a Democrat, just like her father. She doesn't necessarily carry her views out in Lucrest because she is seeking wealth and power over a career in local politics, but she's a supporter of states' rights. <br>
+<br>
+<b>29. It is said that every character has a fatal flaw. What is your character's? </b><br>
+She's impatient. She could be every bit as rich and powerful as her siblings if she put in real work, accepted that failures are inevitable, and relied on family and friends more. <br>
+<br>
+<b>30. What are your character's special talents? Are they supernatural, or normal? Can few other people do them? </b><br>
+She is the only one with the GDP wand, stolen from the magic caves. She can control the hand of the market. <br>
+<br>
+<b>31. What specific activities does your character lack skill for? What challenges does this present? </b><br>
+Keeping secrets. Competitors and worse had an eye on Lucrest before she did. <br>
+<br>
+<b>32. What are your character's major wishes in life? These are not goals, simply things they wish would happen without work. </b><br>
+Her dad would approve of her relationship with Koda. <br>
+<br>
+<b>33. When your character looks in the mirror, what do they think of themselves? Is it positive or negative? </b><br>
+She's definitely nitpicking, rearranging her hair, touching up her makeup, but she's ultimately confident in her appearance. <br>
+<br>
+<b>34. What is your character's most precious material object? What would happen if they lost it? Why is it so important? </b><br>
+Her magic wand. Unthinkable. Without it, she'd actually have to formulate her own effective economic policies, and she's never tried that before. <br>
+<br>
+<b>35. Is your character more creative, or more logical? </b><br>
+Maybe creative? <br>
+<br>
+<b>36. What are your character's small flaws? Do they cause annoyance or disdain for your character? What are your character's opinions about them? </b><br>
+I feel like all her flaws are major. <br>
+I guess she's never real, so she has trouble relating to others. Some people can tell and don't jive with her. Even those who think she's nice or supportive don't feel like friends to her. It's lonely, but she could never be that vulnerable with other people. And besides, she has Koda. <br>
+She also has maturity issues. If someone gets under her skin, she'll hold the pettiest  <br>
+<br>
+<b>37. Is your character envied? By whom? Who does your character envy? </b><br>
+Sure. The older women wish they had her figure, the younger girls wish they had her cool car and stuff, and other mayors can't find a legitimate reason for her success. She envies her siblings and every girl who has something she doesn't. <br>
+<br>
+<b>38. Does your character deceive others often? Do they attempt to deceive themselves? How and why? </b><br>
+Always. She knows just who will let her get away with stronger coersion, too. She doesn't really lie to herself, though. She knows she isn't a real politician and is afraid of being exposed someday. <br>
+<br>
+<b>39. What is your character's faith? Briefly describe their religion, if it exists. Are they polytheistic or monotheistic? Do they see God(s) as all-powerful, or helpers in the course of fate? </b><br>
+She's Episcopalian on the Sabbath but lacks a deep belief in God. <br>
+<br>
+<b>40. Describe your character's uncommon beliefs. Do they believe in fate? Karma? Multiple heavens and hells? </b><br>
+She believes she has a superior genetic background and class and consequently feels entitled to success in life. It's deeply troubling that she's almost 30 and can't find it for herself, even with wild crutches. She also believes in the opposite of soul-mates - soul-enemies and enemies at first sight. <br>
+<br>
+<b>41. Is your character well known or little known? Why? </b><br>
+She's as well-known as any random daughter of a high-ranking politician who has served in the government for 40 years. <br>
+<br>
+<b>42. Is your character more optimistic, or more pessimistic? </b><br>
+Aggressively pessimistic. So much so that she rarely relies on others or luck. <br>
+<br>
+<b>43. Does your character have a lot of hope? Are there points in your story in which they lose hope? </b><br>
+She feels like she's getting away with it. Cracks start to show over time. <br>
+<br>
+<b>44. What traits make your character unique? Do they have special abilities, or a unique facial feature? Be specific. </b><br>
+Streaked hair, though most of the cast has that. A ridiculous economics-based RPG class. I don't know; I should probably come up with a catch phrase or something. <br>
+<br>
+<b>45. Is your character moody or even? Is there a cause? What are the consequences? </b><br>
+She keeps it together most of the time, but she gets into slapfights with her predestined enemies. <br>
+<br>
+<b>46. What is your character's mental capacity? Are they brilliant, or slow to learn? </b><br>
+She's very bright and quick on her feet, but she doesn't trust herself enough to actually use her brain. <br>
+<br>
+<b>47. Does your character sport charisma to influence others? How do they use this? If not, how does it affect them? </b><br>
+Not really lol. She relies on emotional manipulation. She scopes out weaknesses in those with something that can benefit her by acting like a supportive friend or therapist. She can sniff out troubled families, victims of abuse, orphans, etc, and sink her claws in. <br>
+<br>
+<b>48. What is your character's first memory? Why? What was its impact? Was it good or bad? Describe it in detail. </b><br>
+Uhhh, I don't know. She remembers her childhood mostly as being alone in archives, reading random meeting minutes and journals; exploring legal offices like mazes; charming government workers with her quiet and studious demeanor into being allowed places other kids were banned from. <br>
+<br>
+<b>49. Are first impressions important to your character? How does your character judge by them? Does your character go out of their way to make a good first impression on others? </b><br>
+Definitely. She tries to foresee how people will fit into Lucrest. She always does her professional best to make a good impression on everyone. <br>
+<br>
+<b>50. How does your character view authorities? How do they react to taking orders? </b><br>
+She's scared sick of the ones who work with her dad, and she is cynical of anyone who could view a professional relationship with her as stepping up in the world. <br>
+<br>
+<b>51. What are your character's goals? Long term? Short term? </b><br>
+Definitely CEO business magnate over an empire. Or something. Just so long as her father's finally proud. <br>
+<br>
+<b>52. What does your character do when they need to relax? Does it work? Does it affect those around them? </b><br>
+Secret retreat with Koda. Long walks along the scenic avenues of Abyssal Cave. Push the shopkeepers around. <br>
+<br>
+<b>53. What events in your character's past have left major effects? Why and how? Are they good impacts, or bad? </b><br>
+<br>
+<b>54. What major changes has your character gone through recently? How do the people around them react to this? </b><br>
+<br>
+<b>55. What are your character's bad habits? Are they major, like smoking and drinking, or minor, like chewing their nails? </b><br>
+<br>
+<b>56. What is your character a perfectionist about? </b><br>
+<br>
+<b>57. Who are your character's distant family? Does this play a role in your story? </b><br>
+<br>
+<b>58. What recent events have strengthened or weakened your character? What do they think of their changes? </b><br>
+<br>
+<b>59. Who were your character's childhood friends? Do they play a role in your story? How? </b><br>
+<br>
+<b>60. What major things does your character ignore? Purposefully? Or are they simply ignorant? </b><br>
+<br>
+<b>61. What are your character's major fears? How does this challenge them? </b><br>
+<br>
+<b>62. What does your character want that is unusual? </b><br>
+<br>
+<b>63. What does your character like that is unusual? </b><br>
+<br>
+<b>64. What is your character's favorite color? Does this reflect their personality? How? </b><br>
+<br>
+<b>65. Is your character ahead of their time? Behind? At the correct pace? </b><br>
+<br>
+<b>66. Does your character have much free time? What do they do with it? </b><br>
+<br>
+<b>67. Does your character have goals that are unattainable? </b><br>
+<br>
+<b>68. How does your character dream while they are asleep? Vividly? Rarely? Do they frequently have nightmares? Describe some of their dreams. </b><br>
+<br>
+<b>69. Does your character have health problems? Do they need medication or medical care? How does this challenge them? </b><br>
+<br>
+<b>70. What are your character's inner fears? Do they tell people about them? Why or why not? </b><br>
+<br>
+<b>71. What is your character's taste in food? Is this specific to the setting of your story? How does it affect your story? </b><br>
+<br>
+<b>72. Is your character more selfish, or more generous? </b><br>
+<br>
+<b>73. What is your character's stress level? Why? What do they do to resolve it? </b><br>
+<br>
+<b>74. What effects do social pressures, like money and the media, have on your character? </b><br>
+<br>
+<b>75. Is your character interested in a more lavish lifestyle, or simple? </b><br>
+<br>
+<b>76. What weather does your character prefer? Why? How do they react when that weather is not present? </b><br>
+<br>
+<b>77. What is your character's favorite time of day? Why? </b><br>
+<br>
+<b>78. Of what importance are holidays to your character? Which holidays? </b><br>
+<br>
+<b>79. What odd traits belonging to your character tend to drive people away? Why? </b><br>
+<br>
+<b>80. What "walls" are built by your character to accommodate the common phrase, "sometimes you build walls not to keep people away, but to see who cares enough to tear them down," and what effect does this have? </b><br>
+<br>
+<b>81. Does your character place significant value in common sense? Does your character have a lot of common sense? </b><br>
+<br>
+<b>82. What is your character's taste in music? Why? Do they make music? </b><br>
+<br>
+<b>83. Is your character satisfied with their life? Why or why not? </b><br>
+<br>
+<b>84. What motivates your character to make changes and move forward in life? </b><br>
+<br>
+<b>85. What are your character's least favorite activities? </b><br>
+<br>
+<b>86. List several activities that your character will refuse to do and explain. </b><br>
+<br>
+<b>87. What does your character do to relieve boredom? </b><br>
+<br>
+<b>88. Is your character more lazy, or more studious? </b><br>
+<br>
+<b>89. Is your character more athletic and active, or more lazy? </b><br>
+<br>
+<b>90. Is your character social, or a loner? </b><br>
+<br>
+<b>91. Does your character attempt to hide their emotion? If yes, how well do they execute their goal? If not, why? What do other people think of your character because of this? </b><br>
+<br>
+<b>92. What does your character find beautiful? What does your character find ugly? </b><br>
+<br>
+<b>93. What are your character's redeeming traits? </b><br>
+<br>
+<b>94. Is your character easily distracted? If so, why, and what challenges does this present? If not, how does this help them? </b><br>
+<br>
+<b>95. How does your character interact with nature? Why? </b><br>
+<br>
+<b>96. What are the major lasting effects that your character will tend to have on other people, if any? </b><br>
+<br>
+<b>97. How self-centered is your character? Why? What do other people think of this? </b><br>
+<br>
+<b>98. Does your character judge people, and on what premises? Race? Gender? Age? </b><br>
+<br>
+<b>99. Briefly summarize the major events in the time line of your character's life. </b><br>
+<br>
+<b>100. Finally, and perhaps most importantly, what is your character's role in the story? </b><br>
+<br>
+<br>
+Last updated August 31, 2022 <br>
+<br>
@@ -0,0 +1,59 @@
+<!--221006,220811,220922-->
+<h1>eyeshadow singles heading into Fall '22 </h1>
+july 28, 2022<br>
+#offtopic #makeup <br>
+<br>
+<p>Fall colors and blue. <br></p>
+<br>
+<h2>my fall </h2>
+<p>The weather may be staying hot through the day, but every morning dip has me feeling <i>this</i> is the day fall finally begins. Eventually. Maybe. Okay, probably not for another month. But at least I have power to choose which colors I wear. <br></p>
+<br>
+<p>This is my interpretation moving into fall '22. Initially, I was feeling bronzes. I wanted summer to be the season of bronze, but it never really happened. Bronze is a good seasonal transition (an all-around good color), but I keep neglecting it. Even with this palette, I don't quite have a bronze. What I ended up with is an orange + brown quad and a red + green quad, each with plenty of shifting shadows and shimmers. Not my first plan, but I've loved the unexpected synergies in here. (Is building an 8-pan palette like building a skillbar?) <br></p>
+<img src="/static/img/ent/-.png" alt="(palette)"><br>
+<img src="/static/img/ent/-.png" alt="(swatches)"><br>
+<br>
+<h3>discoveries</h3>
+<p>I use the browns for deepening, the orange as a transition, the multichrome as an eyeliner, and the white for inner corner, halo eyes, or adding an aegyo-sal highlight to the center of my lower lashline. The olive works well for lining under my aegyo-sal (the little bit of fat under my eye), since it's close to a brown already and neutralizes against the many reds and oranges. Red Chameleon pairs with the reds or the greens or buffed into a one-shadow look. I used to use red (Urban Decay Gash) for years in igari-style makeup (think drunk, sleepy, or angry), but intentionally looking ill during a plague just feels socially irresponsible and lost its luster. It's fun to find a new way to work red into looks again. Also, just chocolate and nothing else eyes is pure comfort food. <br></p>
+<br>
+<p>Black-based multichromes can look very harsh, but I'm finding using Sundazed over an olive eyeliner base softens it up while retaining the dramatic shift. <br></p>
+<br>
+<p>Eyeshadows in the <a href="https://www.etsy.com/shop/anothersoul">anothersoul (Etsy)</a> essential 8-pan palette <br></p>
+<ul>
+    <li>Sydney Grace - Beyond (matte dark brown) </li>
+    <li>Sydney Grace - Chocolate Bar (shimmery dark brown) </li>
+    <li>ColourPop - Limoncello (matte butterscotch orange from the Lil Ray of Sunshine palette) </li>
+    <li>Terra Moons - Sundazed (black-based multichrome that shifts to every color between coppery red to burnished green) </li>
+    <li>Sydney Grace - Queen of Hearts (shimmery red) </li>
+    <li>Sydney Grace - Ivy League (matte olive) </li>
+    <li>Sydney Grace - Red Chameleon (duochrome that shifts green but buffs out brick red) </li>
+    <li>Sydney Grace - Green Mist (white shimmer that shifts green) </li>
+</ul>
+<br>
+<h2>blue indulgence </h2>
+<p>This is based on the blue eyeshadow rolling in for fall - any blue, any finish, any style. This one keeps getting suggested season after season by analysts, but Hannah Louise Poston's video has me convinced this time for no reason in particular. Blue is my f-a-v-o-r-i-t-e eyeshadow color (favorite color in general?), particularly a deep but not blackened true navy. My eyes are a relatively vibrant orangy brown, so deep blue makes them pop more than the traditional purple. Since I love blue so much, I have a few different variations of it. Why not put them all into a monochromatic palette and try the other blues more? <br></p>
+<img src="/static/img/ent/-.png" alt="(palette)"><br>
+<img src="/static/img/ent/-.png" alt="(swatches)"><br>
+<br>
+<h3>discoveries</h3>
+<p>Super Star and Below Zero are just as incredible as the navy shadows! Super Star is almost too gorgeous to be comfortably wearable - it catches a lot of attention and compliments. Luna pairs perfectly on the browbone with any of these. In general, it's been fun giving the non-navy blues a shot. <br></p>
+<br>
+<p>Eyeshadows in the Sydney Grace 9-pan palette <br></p>
+<ul>
+    <li>Sydney Grace - Super Star (shimmery silvery blue) </li>
+    <li>Sydney Grace - Boy Crazy (satiny cobalt blue) </li>
+    <li>Sydney Grace - Indiana Love (matte navy) </li>
+    <li>Sydney Grace - Below Zero (shimmery indigo with a purple shift) </li>
+    <li>Sydney Grace - Perfect Storm (matte pastel blue) </li>
+    <li>Sydney Grace - Deep Waters (shimmery navy) </li>
+    <li>Looxi Beauty - Luna (not an eyeshadow but an icy blue highlighter) </li>
+</ul>
+<br>
+<h2>custom palettes over premade any day! </h2>
+<p>I absolutely adore my palettes this go-around. The fall palette supports my vibe lately - neutral looks, color grounded in neutrals, and aegyo-sal. The blue supports the rest - colorful eyeliners and unstructured swarths of bold color. They're also a mix of favorites, reliables, and colors I never get around to wearing but totally should. Despite all that, I'm pretty sure if I saw an ad for these things, I wouldn't be that interested. No idea what that says about me. <br></p>
+<br>
+<h2>disclaimer </h2>
+<p>I buy my own makeup and don't have any affiliation with the brands mentioned. <br></p>
+<br>
+<br>
+Last updated October 10, 2022 <br>
+<br>
@@ -440,6 +440,13 @@ def error502(error):
    return "unfortunately, a 502 error. this was likely due to website maintenance. usually it'll be back up before you finish reading this, but otherwise, I'll notice something's wrong soon! <a href=https://www.blessfrey.me/>return to blessfrey.me.</a>"


+# About Blessfrey Page
+@route('/about')
+def about():
+    """about"""
+    info = {'css': 'doc', 'title': 'about blessfrey', 'year': find_year()}
+    return template('about.tpl', info)
+
 # Art Gallery Page
@route('/art')
 def art():
@@ -481,14 +488,10 @@ def demo():
    info = {'css': 'demo', 'title': 'blessfrey demo', 'year': find_year()}
    return template('demo.tpl', info)

-# Blessfrey Presskit Page
-@route('/blessfrey-gdd')
-def gdd():
-    """Game Design Document"""
-    info = {'css': 'gdd', 'title': 'blessfrey gdd', 'year': find_year()}
-    return template('bf-gdd.tpl', info)
-
 # Diary Page
+@route('/')
+def home():
+    return diary(0)
@route('/diary') # Start on first Diary page if no page given
 def diary2():
    return diary(0)
@@ -524,19 +527,118 @@ def fashion():
    return template('fashion.tpl', info)

 # Blessfrey Game Design Document Page
+@route('/blessfrey-gdd')
+def gddbf():
+    """Game Design Document"""
+    info = {'css': 'gdd', 'title': 'blessfrey gdd', 'year': find_year()}
+    return template('bf-gdd.tpl', info)
@route('/gdd')
 def gdd():
-    """game design document"""
-    info = {'css': 'doc', 'title': 'blessfrey game design document', 'year': find_year()}
-    return template('bf-gdd.tpl', info)
+    return gddbf()
+# Cast
+@route('/blessfrey-cast')
+def cast():
+    """Cast Page"""
+    return char3()
+# Credits
+@route('/blessfrey-credits')
+def creditsbf():
+    """Credits Page"""
+    return credits()
+# ID
+@route('/blessfrey-ids')
+def id():
+    """ID Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - IDs + keys', 'year': find_year()}
+    return template('bf-id.tpl', info)
+# Jobs
+@route('/blessfrey-jobs')
+def jobs():
+    """Jobs Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - jobs', 'year': find_year()}
+    return template('bf-jobs.tpl', info)
+# Keywords
+@route('/blessfrey-keywords')
+def keywords():
+    """Keywords Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - keywords', 'year': find_year()}
+    return template('bf-keywords.tpl', info)
+# Blessfrey Mechanics
+@route('/blessfrey-mechanics')
+def mech():
+    """mechanics"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - game mechanics', 'year': find_year()}
+    return template('bf-mechanics.tpl', info)
+@route('/blessfrey-inspect')
+def mech1():
+    """inspect"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - game mechanics', 'year': find_year()}
+    return template('bf-mech-inspect.tpl', info)
+# Mercur
+@route('/blessfrey-mercur')
+def mercur():
+    """Mercur Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - Mercur', 'year': find_year()}
+    return template('bf-mercur.tpl', info)
+# Setting
+@route('/blessfrey-setting')
+def setting():
+    """Setting Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - setting', 'year': find_year()}
+    return template('bf-setting.tpl', info)
+# Skills
+@route('/blessfrey-skills')
+def skills():
+    """Skills Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - skills', 'year': find_year()}
+    return template('bf-skills.tpl', info)
+# Story
+@route('/blessfrey-story')
+def story():
+    """Story Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - story', 'year': find_year()}
+    return template('bf-story.tpl', info)
+# Blessfrey Style Guide Page
+@route('/blessfrey-style-guide')
+def style3():
+    return style()
+@route('/blessfrey-style')
+def style2():
+    return style()
+@route('/style-guide')
+def style1():
+    return style()
+@route('/style')
+def style():
+    """style guide"""
+    info = {'css': 'doc', 'title': 'blessfrey style guide', 'year': find_year()}
+    return template('style-guide.tpl', info)
+# Terms
+@route('/blessfrey-terms')
+def terms():
+    """Terms Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - dictionary of terms', 'year': find_year()}
+    return template('bf-terms.tpl', info)
+# Art Direction
+@route('/blessfrey-vibe')
+def vibe():
+    """GDD Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - vibe', 'year': find_year()}
+    return template('bf-vibe.tpl', info)
+# Website
+@route('/website')
+def website():
+    """Website Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - website', 'year': find_year()}
+    return template('website.tpl', info)

 # Home Page - Index Template
-@route('/')
-def home():
-    """home"""
-    loc = 'diary/entries/'
-    info = {'css': 'index', 'title': 'chimchooree\'s dev space - blessfrey', 'year': find_year(), 'news': list_headlines(sort_files(curate_files(gather_files(loc)))[0:10])}
-    return template('index.tpl', info)
+#@route('/')
+#def home():
+    #"""home"""
+#    loc = 'diary/entries/'
+#    info = {'css': 'index', 'title': 'blessfrey ~ action rpg by chimchooree', 'year': find_year(), 'news': list_headlines(sort_files(curate_files(gather_files(loc)))[0:10])}
+#    return template('index.tpl', info)

 # Location Page
@route('/loc/') # if no location given
@@ -553,31 +655,21 @@ def loc(location_name):
    return template(os.path.join(abs_views_path,'char.tpl'), info)

 # Me Page
-@route('/me')
+@route('/dev')
 def me():
    """me"""
-    info = {'css': 'me', 'title': 'about me', 'year': find_year()}
+    info = {'css': 'me', 'title': 'about chimchooree (that\'s me)', 'year': find_year()}
    return template('me.tpl', info)

-# Blessfrey Mechanics
-@route('/mechanics')
-def mech():
-    """mechanics"""
-    info = {'css': 'doc', 'title': 'blessfrey gdd - game mechanics', 'year': find_year()}
-    return template('bf-mechanics.tpl', info)
-@route('/inspect')
-def mech1():
-    """inspect"""
-    info = {'css': 'doc', 'title': 'blessfrey gdd - game mechanics', 'year': find_year()}
-    return template('bf-mech-inspect.tpl', info)
-
-
-# Blessfrey Feature Requirements Page
+# Blessfrey - Feature Requirements Page
+@route('/blessfrey-milestones')
+def milestones():
+    return milestones()
@route('/milestones')
 def milestones():
    """feature requirements"""
    info = {'css': 'doc', 'title': 'blessfrey milestones', 'year': find_year()}
-    return template('requirements.tpl', info)
+    return template('milestones.tpl', info)

 # Planner Page
@route('/planner')
@@ -613,12 +705,6 @@ def spec(species_name):
    TEMPLATE_PATH.insert(0, abs_views_path )
    return template(os.path.join(abs_views_path,'char.tpl'), info)

-# Blessfrey Style Guide Page
-@route('/style')
-def style():
-    """style guide"""
-    info = {'css': 'doc', 'title': 'blessfrey style guide', 'year': find_year()}
-    return template('style-guide.tpl', info)

 # Search Diary by Tag
@route('/diary/tag/<tagin>') # Start on first Diary tag page if no page given
@@ -633,13 +719,6 @@ def tag(tagin, page):
    info = {'css': 'diary', 'title': 'blessfrey developer diary', 'year': find_year(), 'snippets': list_snippets(pull_tag(gather_and_sort(loc), tagin)), 'latest': list_headlines(gather_and_sort(loc)[0:5]), 'tags': fill_word_cloud(curate_files(gather_files(loc))), 'total': len(curate_files(gather_files(loc))), 'limit': 8, 'cluster': 3, 'page': page}
    return template('diary.tpl', info)

-# GDD Pages
-@route('/vibe')
-def vibe():
-    """GDD Page"""
-    info = {'css': 'doc', 'title': 'blessfrey gdd - vibe', 'year': find_year()}
-    return template('vibe.tpl', info)
-
 ## Main ##

 if __name__ == '__main__':
@@ -1,33 +1,43 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 14, 2022 */
@font-face {
-    font-family: "pf_ronda_seven";
-    src: url('../font/pf_ronda_seven.ttf');
+    font-family: 'mitochondriaregular';
+    src: url('/static/font/mitochondria-webfont.woff2') format('woff2'),
+         url('/static/font/mitochondria-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
 }
@font-face {
-    font-family: "pf_ronda_seven_bold";
-    src: url('../font/pf_ronda_seven_bold.ttf');
+    font-family: 'pf_ronda_sevenregular';
+    src: url('/static/font/pf_ronda_seven-webfont.woff2') format('woff2'),
+         url('/static/font/pf_ronda_seven-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
 }
@font-face {
-    font-family: "Mitochondria";
-    src: url('../font/Mitochondria.ttf');
+    font-family: 'pf_ronda_sevenbold';
+    src: url('/static/font/pf_ronda_seven_bold-webfont.woff2') format('woff2'),
+         url('/static/font/pf_ronda_seven_bold-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
 }
+/* */
+
 * {
    padding:0;
    margin:0;
-    font-family: "pf_ronda_seven", sans-serif;
+    font-family: 'pf_ronda_sevenregular', sans-serif;
    background-color: black;
 }
 html, body {padding:0; margin:0; height:100%;}
 footer{
-    position: absolute; bottom: 0; right: 0;
-    color: #df85a5;
+    position: fixed; bottom: 0; left: 0;
+    color: #C0AAC0;
    background-color: transparent;
-    padding-top: 2em;
-    margin-right: 1em;
-    margin-bottom: 1em;
-    text-align: right;
-    overflow: hidden;
+    width: 100vw;
 }
-
 a, a:link, a:visited, a:hover, a:active, b, p {
    text-decoration: none;
    background-color: transparent; 
@@ -53,6 +63,9 @@ li {
 h1,h2,h3,h4,img,i {
    background-color: transparent;
 }
+h1 {
+    font-family: 'mitochondriaregular', sans-serif;
+}

 .mundane {color:#aca79e;}
 .common {color:#5576d1;}
@@ -76,174 +89,55 @@ pre,code {
 }

 .grid {
-    height: auto;
+    height: max(100vh,auto);
    width: 100vw;
    display: grid;
    position: relative;
-    grid-template-columns: 20% 60% 20%;
-    grid-template-rows: 2em 9.515625em auto 12.6875em;
+    grid-template-columns: 1fr;
+    grid-template-rows: 3em auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    box-sizing: border-box;
 }

-.top-row { 
-    grid-area: 1 / 1 / 2 / 4; 
-}
-.nav-row { 
-    grid-area: 2 / 1 / 3 / 4; 
-}
-.nav-grid { 
-    grid-area: 2 / 2 / 3 / 3;  
-    display: flex;
-    flex-direction: row;
-    display: grid;
-    grid-template-columns: minmax(0%,10%) repeat(6, minmax(7ch,96px)) minmax(0%,10%);
-    grid-column-gap: 0px;
-    grid-row-gap: 0px; 
-    justify-items: center;
-    text-align: center;
-    margin: auto;
-}
-    .nav-left { 
+.top {
    grid-area: 1 / 1 / 2 / 2; 
-    } 
-    .nav-right { 
-        grid-area: 1 / 7 / 2 / 8;
-    }
-    .nav-home { 
-        grid-area: 1 / 2 / 2 / 3;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-blessfrey { 
-        grid-area: 1 / 3 / 2 / 4;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-fashion { grid-area: 1 / 4 / 2 / 5;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-art {
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-diary { grid-area: 1 / 5 / 2 / 6;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-about { grid-area: 1 / 6 / 2 / 7;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .navlink {
-        font-size: 110%;
+    color: #C0AAC0;
+    text-align: center;
+}
+.top a {
+    color: #C0AAC0;
    font-weight: bold;
-        color: #E6E8EF;
-    }
-    .navlink a:link {
-        color: #E6E8EF;
-    }
-    .navlink a:visited {
-        color: #E6E8EF;
-    }
-    .navlink a:hover {
-        color: #f463ad;
-    }
-    .navlink a:active {
-        color: #f463ad;
-    }
-    .nav-grid img {
-        height: 100%;
-        width: 100%;
-    }
-    .content-grid {
+}
+.top a:hover {
+    color: #A88AA8;
+}
+
+.content-grid { 
+    grid-area: 2 / 1 / 3 / 2; 
    min-height: 60vh;
    min-width: 50vw;
-    }
-
-
-.sidebar {
-    grid-area: 2 / 2 / 2 / 3;
+    padding-bottom: 33%;
+}
+.footer-grid {
    display: grid;
-    grid-template-columns: auto;
-    grid-template-rows: repeat(4, auto);
-    grid-column-gap: 0em;
-    grid-row-gap: 0em; 
-    align-content: start;
-    padding-left: 0em;
+    grid-template-columns: 100vw;
+    grid-template-rows: 76% 24%
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    background-color: transparent;
+    width: 100vw;
+    /*min-width: 636px;*/
 }
-
-.sidebar a:link {
-    font-weight: bold;
-}
-.sidebar a {
-    color: #1D1761;
-}
-.sidebar a:hover {
-    color: #3127A5;
-}
-.sidebar a:visited {
-    color: #1D1761;
-}
-.sidebar a:active {
-    color: #3B2FC6;
-}
-
-
-    .diary-box {
-        background-color: #A88AA8;  
-        text-align: center;
-        border-radius: 1em;
-        margin: 1em;
-        padding: .3em;
-        margin-top: 0em;
-        padding-bottom: 1em;
-    }
-
-    .about-box {
+.nav { 
    grid-area: 1 / 1 / 2 / 2;
-    }
-    .twitter-box {
-        grid-area: 2 / 1 / 3 / 2;
-    }
-    .latest {
-        grid-area: 3 / 1 / 4 / 2;
-    }
-    .latest-text {
-        text-align: left;
-        padding: 0em;
-        background-color: #A88AA8; 
-    }
-    .wordcloud {
-        grid-area: 4 / 1 / 5 / 2;
-    }
-    .disclosure {
-        grid-area: 5 / 1 / 6 / 2;
-    }
-
+    background-color: transparent;
+/*    width: 60vw;*/
+    display: grid;
+    grid-template-columns: 26% 51% 23%;
+    grid-template-rows: auto;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    margin: auto;
+/*    min-width: 636px;*/
+}
@@ -1,47 +1,27 @@
 .content-grid {  
-    grid-area: 3 / 1 / 4 / 4; 
    display: grid;
    grid-template-columns: 1fr;
-    grid-template-rows: auto auto auto;
+    grid-template-rows:  repeat(3, auto);
    grid-column-gap: 0px;
    grid-row-gap: 0em;
-            height: 45em;
-}
-    .jump { 
-        grid-area: 1 / 1 / 2 / 2;
-        text-align: center;
-        margin: auto;
-        font-size: 1.5em;
-        
-    }
-        .jump img { width: 5em; }
-
-        .long { 
-            grid-area: grid-area: 2 / 1 / 3 / 2;
-            display: grid;
-            grid-template-columns: 1fr;
-            grid-template-rows: repeat(5, auto);
-            grid-row-gap: 95vh; 
-            height: 45em;
    color: white;
-            overflow: auto;
+}
+
+.edition { 
+    grid-area: 1 / 1 / 2 / 2; 
    }

-.demo-game iframe {
+.demo { grid-area: 2 / 1 / 3 / 2; } 
+   
+.demo iframe {
    border: 2px solid #df85a5;
    padding: 10px;
    display: block;
    margin: auto;
 }
-.demo-intro {
-    width: 40%;
-    padding: 10px;
+.guide {
+    grid-area: 3 / 1 / 4 / 2;
+    width: 80%;
+    padding: 2em;
    margin: auto;
 }
-            .demo { grid-area: 1 / 1 / 2 / 2;
-}
-            .system { grid-area: 2 / 1 / 3 / 2;}
-            .story { grid-area: 3 / 1 / 4 / 2;}
-            .characters { grid-area: 4 / 1 / 5 / 2;}
-            .info { grid-area: 5 / 1 / 6 / 2;
-                height: 50em;}
@@ -1,5 +1,4 @@
 .content-grid {
-    grid-area: 3 / 1 / 4 / 4; 
    max-width: MAX(50em, 50%);
    display: grid;
    grid-template-columns: 2fr 1fr;
@@ -42,6 +41,10 @@
        padding-top: 0em;
        margin: auto;
    }
+    .diary-dir.bottom {
+        grid-area: 3 / 1 / 4 / 3;
+        margin: auto;
+    }
    .diary-dir-left {
        display: inline-block;
        vertical-align: middle;
@@ -68,6 +71,9 @@
        grid-area: 2 / 1 / 3 / 2;
        margin-right: 2em;
    }
+    .title {
+        color: white;
+    }

    .snippet {
        margin-top: 0em;
@@ -164,4 +170,4 @@
        height: 1em;
    }

-    .sidebar {grid-area: 2/2/2/3;}
+    .sidebar {grid-area: 2 / 2 / 2 / 3;}
@@ -136,9 +136,11 @@ hr {
    color: #080410;
 }

-.rec-box { grid-area: 2 / 1 / 3 / 2;
+.rec-box { 
+    grid-area: 2 / 1 / 3 / 2;
    background-color: #A88AA8;
-    padding: 1em;  }
+    padding: 1em;  
+}

 .snippet-title {
    background-color: #A88AA8; 
@@ -1,14 +1,13 @@
 .content-grid { 
-    grid-area: 3 / 1 / 4 / 4;
    display: grid;
    grid-template-columns: 25% 75%;
-    grid-template-rows: 1fr;
+    grid-template-rows: 992px;
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
 }
    .content-left {
        grid-area: 1 / 1 / 2 / 2;
-        background-image: url(../img/prom/guildwarsgirl.png);
+        background-image: url(../img/dev/guildwarsgirl.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
@@ -16,33 +15,14 @@
    }
    .content-right { 
        grid-area: 1 / 2 / 2 / 3;
+        background-image: url(../img/dev/collage.png);
+        background-size: cover;
+        background-repeat: no-repeat;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto auto auto;
        grid-column-gap: 0px;
        grid-row-gap: 0px; 
-        margin-right: 25%;
-    }
-        .intro, .rpg, .fashion, .projects, .ocs {
-            background-color: #C0AAC0;
-            padding: 5%;
-            text-align: justify;
-        }
-        .intro { grid-area: 1 / 1 / 2 / 3;}
-        .rpg { grid-area: 2 / 1 / 3 / 2;}
-        .fashion { grid-area: 2 / 2 / 3 / 3;}
-        .projects { grid-area: 3 / 1 / 4 / 3;}
-        .ocs { grid-area: 4 / 1 / 5 / 3; text-align:left;} 
-            .ocs-nav {
-                display: grid;
-                grid-template-columns: repeat(auto-fit, 150px);
-                background-color: #C0AAC0;
-            }
-            .ocs-btn {
-                background-color: #C0AAC0;
-            }
-            .ocs img {
-                width: 150px;
    }

    .content-right h1, h2, ul, li, b, i, p, img, a {
@@ -0,0 +1,108 @@
+/*set heart and star to 0px if viewport too small*/
+
+.heart { 
+    grid-area: 1 / 1 / 2 / 2;
+    background-color: transparent;
+    background-image: url(../img/nav/heart.png); 
+    background-repeat: no-repeat;
+    background-position: bottom right;
+    background-size: contain;
+}
+.nav-grid {
+    grid-area: 1 / 2 / 2 / 3;
+    background-color: transparent;
+    background-image: url(../img/nav/field.png);
+    background-repeat: no-repeat;
+    background-position: bottom center;
+    background-size: contain;
+    display: grid;
+    grid-template-columns: auto; /*repeat(4, minmax(5ch,128px))*/
+    grid-template-rows: repeat(4, minmax(0px,auto));
+    /*grid-template-columns: minmax(0%,10%) repeat(6, minmax(7ch,96px)) minmax(0%,10%);*/
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    align-items: center;
+    font-size: 2vw;
+    margin-bottom: 0px;
+}
+.star { 
+    grid-area: 1 / 3 / 2 / 4;
+    background-color: transparent;
+    background-image: url(../img/nav/star.png); 
+    background-repeat: no-repeat;
+    background-position: bottom left;
+    background-size: contain;
+} 
+
+.nav-diary { 
+    grid-area: 1 / 1 / 2 / 2;
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: 80% 20%;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    flex-direction: column;
+    /*min-width: 48px;*/
+}
+.nav-play { 
+    grid-area:  1 / 2 / 2 / 3;
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: 80% 20%;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    flex-direction: column;
+    /*min-width: 48px;*/
+}
+.nav-about {
+    grid-area: 1 / 3 / 2 / 4;
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: 80% 20%;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    flex-direction: column;
+    /*min-width: 48px;*/
+}
+.nav-dev {
+    grid-area: 1 / 4 / 2 / 5;
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: 80% 20%;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    flex-direction: column;
+    /*min-width: 48px;*/
+}
+.navlink {
+    font-size: 110%;
+    font-weight: bold;
+    color: #C0AAC0;
+    text-align: center;
+}
+.navlink a:link {
+}
+.navlink a:visited {
+}
+.navlink a:hover {
+    color: #f463ad;
+}
+.navlink a:active {
+    color: #C0AAC0;
+}
+.nav-grid img {
+    height: auto;
+    max-width:100%;
+    max-height:100%;
+}
+.links { 
+    grid-area: 2 / 1 / 3 / 2;
+    background-color: black; 
+    width: 100vw;
+    text-align: center;
+    padding-top: 0.5em;
+    padding-bottom: 1em;
+}
+.links a {
+    color: #C0AAC0;
+} 
@@ -0,0 +1,59 @@
+.sidebar {
+    grid-area: 2 / 2 / 2 / 3;
+    display: row;
+/*    grid-template-columns: auto;
+    grid-template-rows: repeat(4, auto);*/
+    grid-column-gap: 0em;
+    grid-row-gap: 0em; 
+/*    align-content: start;
+    padding-left: 0em;*/
+}
+
+.sidebar a:link {
+    font-weight: bold;
+}
+.sidebar a {
+    color: #1D1761;
+}
+.sidebar a:hover {
+    color: #3127A5;
+}
+.sidebar a:visited {
+    color: #1D1761;
+}
+.sidebar a:active {
+    color: #3B2FC6;
+}
+
+
+    .diary-box {
+        background-color: #A88AA8;  
+        text-align: center;
+        border-radius: 1em;
+        margin: 1em;
+        padding: .3em;
+        margin-top: 0em;
+        padding-bottom: 1em;
+    }
+
+    .about-box {
+        grid-area: 1 / 1 / 2 / 2;
+    }
+    .twitter-box {
+        grid-area: 2 / 1 / 3 / 2;
+    }
+    .latest {
+        grid-area: 3 / 1 / 4 / 2;
+    }
+    .latest-text {
+        text-align: left;
+        padding: 0em;
+        background-color: #A88AA8; 
+    }
+    .wordcloud {
+        grid-area: 4 / 1 / 5 / 2;
+    }
+    .disclosure {
+        grid-area: 5 / 1 / 6 / 2;
+    }
+
@@ -0,0 +1,5 @@
+# Font Squirrel Font-face Generator Configuration File
+# Upload this file to the generator to recreate the settings
+# you used to create these fonts.
+
+{"mode":"optimal","formats":["woff","woff2"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}
@@ -0,0 +1,586 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+    <script type="text/javascript">
+		(function($) {
+			$.fn.easyTabs = function(option) {
+				var param = jQuery.extend({ fadeSpeed: 'fast', defaultContent: 1, activeClass: 'active' }, option);
+				$(this).each(function() {
+					var thisId = '#' + this.id;
+					if ( param.defaultContent == '' )
+					{
+						param.defaultContent = 1;
+					}
+					if ( typeof param.defaultContent == 'number' )
+					{
+						var defaultTab = $(thisId + ' .tabs li:eq(' + (param.defaultContent - 1) + ') a').attr('href').substr(1);
+					}
+					else
+					{
+						var defaultTab = param.defaultContent;
+					}
+					$(thisId + ' .tabs li a').each(function() {
+						var tabToHide = $(this).attr('href').substr(1);
+						$('#' + tabToHide).addClass('easytabs-tab-content');
+					});
+					hideAll();
+					changeContent(defaultTab);
+
+					function hideAll() {$(thisId + ' .easytabs-tab-content').hide();}
+
+					function changeContent(tabId)
+					{
+						hideAll();
+						$(thisId + ' .tabs li').removeClass(param.activeClass);
+						$(thisId + ' .tabs li a[href=#' + tabId + ']').closest('li').addClass(param.activeClass);
+						if ( param.fadeSpeed != 'none' )
+						{
+							$(thisId + ' #' + tabId).fadeIn(param.fadeSpeed);
+						}
+						else
+						{
+							$(thisId + ' #' + tabId).show();
+						}
+					}
+
+					$(thisId + ' .tabs li').click(function() {
+						var tabId = $(this).find('a').attr('href').substr(1);
+						changeContent(tabId);
+						return false;
+					});
+				});
+			}
+		})(jQuery);
+    </script>
+    <link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8"/>
+    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8"/>
+
+    <style type="text/css">
+        		body {
+			font-family: 'mitochondriaregular';
+        		}
+
+            </style>
+
+    <title>Mitochondria Regular Specimen</title>
+
+
+    <script type="text/javascript" charset="utf-8">
+		$(document).ready(function() {
+			$('#container').easyTabs({ defaultContent: 1 });
+		});
+    </script>
+</head>
+
+<body>
+<div id="container">
+    <div id="header">
+		Mitochondria Regular    </div>
+    <ul class="tabs">
+        <li><a href="#specimen">Specimen</a></li>
+        <li><a href="#layout">Sample Layout</a></li>
+		        <li><a href="#glyphs">Glyphs &amp; Languages</a></li>
+        <li><a href="#installing">Installing Webfonts</a></li>
+
+    </ul>
+
+    <div id="main_content">
+
+
+        <div id="specimen">
+
+            <div class="section">
+                <div class="grid12 firstcol">
+                    <div class="huge">AaBb</div>
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="glyph_range">A&#x200B;B&#x200b;C&#x200b;D&#x200b;E&#x200b;F&#x200b;G&#x200b;H&#x200b;I&#x200b;J&#x200b;K&#x200b;L&#x200b;M&#x200b;N&#x200b;O&#x200b;P&#x200b;Q&#x200b;R&#x200b;S&#x200b;T&#x200b;U&#x200b;V&#x200b;W&#x200b;X&#x200b;Y&#x200b;Z&#x200b;a&#x200b;b&#x200b;c&#x200b;d&#x200b;e&#x200b;f&#x200b;g&#x200b;h&#x200b;i&#x200b;j&#x200b;k&#x200b;l&#x200b;m&#x200b;n&#x200b;o&#x200b;p&#x200b;q&#x200b;r&#x200b;s&#x200b;t&#x200b;u&#x200b;v&#x200b;w&#x200b;x&#x200b;y&#x200b;z&#x200b;1&#x200b;2&#x200b;3&#x200b;4&#x200b;5&#x200b;6&#x200b;7&#x200b;8&#x200b;9&#x200b;0&#x200b;&amp;&#x200b;.&#x200b;,&#x200b;?&#x200b;!&#x200b;&#64;&#x200b;(&#x200b;)&#x200b;#&#x200b;$&#x200b;%&#x200b;*&#x200b;+&#x200b;-&#x200b;=&#x200b;:&#x200b;;</div>
+            </div>
+            <div class="section">
+                <div class="grid12 firstcol">
+                    <table class="sample_table">
+                        <tr>
+                            <td>10</td>
+                            <td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>11</td>
+                            <td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>12</td>
+                            <td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>13</td>
+                            <td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>14</td>
+                            <td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>16</td>
+                            <td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>18</td>
+                            <td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>20</td>
+                            <td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>24</td>
+                            <td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>30</td>
+                            <td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>36</td>
+                            <td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>48</td>
+                            <td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>60</td>
+                            <td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>72</td>
+                            <td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>90</td>
+                            <td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                    </table>
+
+                </div>
+
+            </div>
+
+
+            <div class="section" id="bodycomparison">
+
+
+                <div id="xheight">
+                    <div class="fontbody">&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;body</div>
+                    <div class="arialbody">body</div>
+                    <div class="verdanabody">body</div>
+                    <div class="georgiabody">body</div>
+                </div>
+                <div class="fontbody" style="z-index:1">
+                    body<span>Mitochondria Regular</span>
+                </div>
+                <div class="arialbody" style="z-index:1">
+                    body<span>Arial</span>
+                </div>
+                <div class="verdanabody" style="z-index:1">
+                    body<span>Verdana</span>
+                </div>
+                <div class="georgiabody" style="z-index:1">
+                    body<span>Georgia</span>
+                </div>
+
+
+            </div>
+
+
+            <div class="section psample psample_row1" id="">
+
+                <div class="grid2 firstcol">
+                    <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="white_blend"></div>
+
+            </div>
+            <div class="section psample psample_row2" id="">
+                <div class="grid3 firstcol">
+                    <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid5">
+                    <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+
+                <div class="white_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row3" id="">
+                <div class="grid5 firstcol">
+                    <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="grid7">
+                    <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+
+                <div class="white_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row4" id="">
+                <div class="grid12 firstcol">
+                    <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="white_blend"></div>
+
+            </div>
+
+
+            <div class="section psample psample_row1 fullreverse">
+                <div class="grid2 firstcol">
+                    <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row2 fullreverse">
+                <div class="grid3 firstcol">
+                    <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid5">
+                    <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample fullreverse psample_row3" id="">
+                <div class="grid5 firstcol">
+                    <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="grid7">
+                    <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+                <div class="grid12 firstcol">
+                    <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+
+        </div>
+
+        <div id="layout">
+
+            <div class="section">
+
+                <div class="grid12 firstcol">
+                    <h1>Lorem Ipsum Dolor</h1>
+                    <h2>Etiam porta sem malesuada magna mollis euismod</h2>
+
+                    <p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+                </div>
+            </div>
+            <div class="section">
+                <div class="grid8 firstcol">
+                    <p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+                    <h3>Pellentesque ornare sem</h3>
+
+                    <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+                    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+                    <p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+                    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+                    <h3>Cras mattis consectetur</h3>
+
+                    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+                    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+                </div>
+
+                <div class="grid4 sidebar">
+
+                    <div class="box reverse">
+                        <p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+                    </div>
+
+                    <p class="caption">Maecenas sed diam eget risus varius.</p>
+
+                    <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+                </div>
+            </div>
+
+        </div>
+
+
+		
+
+        <div id="glyphs">
+            <div class="section">
+                <div class="grid12 firstcol">
+
+                    <h1>Language Support</h1>
+                    <p>The subset of Mitochondria Regular in this kit supports the following languages:<br/>
+
+						English, Arrernte, Bislama, Cebuano, Fijian, Gilbertese, Hmong, Ibanag, Iloko_ilokano, Interglossa_glosa, Interlingua, Lojban, Norfolk_pitcairnese, Oromo, Rotokas, Seychelles_creole, Shona, Somali, Southern_ndebele, Swahili, Swati_swazi, Tok_pisin, Warlpiri, Xhosa, Zulu, Latinbasic, Demo                    </p>
+                    <h1>Glyph Chart</h1>
+                    <p>The subset of Mitochondria Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+                    <div id="glyph_chart">
+
+																				                                <div><p>&amp;#32;</p>&#32;</div>
+																				                                <div><p>&amp;#33;</p>&#33;</div>
+																				                                <div><p>&amp;#34;</p>&#34;</div>
+																				                                <div><p>&amp;#35;</p>&#35;</div>
+																				                                <div><p>&amp;#36;</p>&#36;</div>
+																				                                <div><p>&amp;#37;</p>&#37;</div>
+																				                                <div><p>&amp;#38;</p>&#38;</div>
+																				                                <div><p>&amp;#39;</p>&#39;</div>
+																				                                <div><p>&amp;#40;</p>&#40;</div>
+																				                                <div><p>&amp;#41;</p>&#41;</div>
+																				                                <div><p>&amp;#42;</p>&#42;</div>
+																				                                <div><p>&amp;#43;</p>&#43;</div>
+																				                                <div><p>&amp;#44;</p>&#44;</div>
+																				                                <div><p>&amp;#45;</p>&#45;</div>
+																				                                <div><p>&amp;#46;</p>&#46;</div>
+																				                                <div><p>&amp;#47;</p>&#47;</div>
+																				                                <div><p>&amp;#48;</p>&#48;</div>
+																				                                <div><p>&amp;#49;</p>&#49;</div>
+																				                                <div><p>&amp;#50;</p>&#50;</div>
+																				                                <div><p>&amp;#51;</p>&#51;</div>
+																				                                <div><p>&amp;#52;</p>&#52;</div>
+																				                                <div><p>&amp;#53;</p>&#53;</div>
+																				                                <div><p>&amp;#54;</p>&#54;</div>
+																				                                <div><p>&amp;#55;</p>&#55;</div>
+																				                                <div><p>&amp;#56;</p>&#56;</div>
+																				                                <div><p>&amp;#57;</p>&#57;</div>
+																				                                <div><p>&amp;#58;</p>&#58;</div>
+																				                                <div><p>&amp;#59;</p>&#59;</div>
+																				                                <div><p>&amp;#60;</p>&#60;</div>
+																				                                <div><p>&amp;#61;</p>&#61;</div>
+																				                                <div><p>&amp;#62;</p>&#62;</div>
+																				                                <div><p>&amp;#63;</p>&#63;</div>
+																				                                <div><p>&amp;#64;</p>&#64;</div>
+																				                                <div><p>&amp;#65;</p>&#65;</div>
+																				                                <div><p>&amp;#66;</p>&#66;</div>
+																				                                <div><p>&amp;#67;</p>&#67;</div>
+																				                                <div><p>&amp;#68;</p>&#68;</div>
+																				                                <div><p>&amp;#69;</p>&#69;</div>
+																				                                <div><p>&amp;#70;</p>&#70;</div>
+																				                                <div><p>&amp;#71;</p>&#71;</div>
+																				                                <div><p>&amp;#72;</p>&#72;</div>
+																				                                <div><p>&amp;#73;</p>&#73;</div>
+																				                                <div><p>&amp;#74;</p>&#74;</div>
+																				                                <div><p>&amp;#75;</p>&#75;</div>
+																				                                <div><p>&amp;#76;</p>&#76;</div>
+																				                                <div><p>&amp;#77;</p>&#77;</div>
+																				                                <div><p>&amp;#78;</p>&#78;</div>
+																				                                <div><p>&amp;#79;</p>&#79;</div>
+																				                                <div><p>&amp;#80;</p>&#80;</div>
+																				                                <div><p>&amp;#81;</p>&#81;</div>
+																				                                <div><p>&amp;#82;</p>&#82;</div>
+																				                                <div><p>&amp;#83;</p>&#83;</div>
+																				                                <div><p>&amp;#84;</p>&#84;</div>
+																				                                <div><p>&amp;#85;</p>&#85;</div>
+																				                                <div><p>&amp;#86;</p>&#86;</div>
+																				                                <div><p>&amp;#87;</p>&#87;</div>
+																				                                <div><p>&amp;#88;</p>&#88;</div>
+																				                                <div><p>&amp;#89;</p>&#89;</div>
+																				                                <div><p>&amp;#90;</p>&#90;</div>
+																				                                <div><p>&amp;#91;</p>&#91;</div>
+																				                                <div><p>&amp;#92;</p>&#92;</div>
+																				                                <div><p>&amp;#93;</p>&#93;</div>
+																				                                <div><p>&amp;#94;</p>&#94;</div>
+																				                                <div><p>&amp;#95;</p>&#95;</div>
+																				                                <div><p>&amp;#97;</p>&#97;</div>
+																				                                <div><p>&amp;#98;</p>&#98;</div>
+																				                                <div><p>&amp;#99;</p>&#99;</div>
+																				                                <div><p>&amp;#100;</p>&#100;</div>
+																				                                <div><p>&amp;#101;</p>&#101;</div>
+																				                                <div><p>&amp;#102;</p>&#102;</div>
+																				                                <div><p>&amp;#103;</p>&#103;</div>
+																				                                <div><p>&amp;#104;</p>&#104;</div>
+																				                                <div><p>&amp;#105;</p>&#105;</div>
+																				                                <div><p>&amp;#106;</p>&#106;</div>
+																				                                <div><p>&amp;#107;</p>&#107;</div>
+																				                                <div><p>&amp;#108;</p>&#108;</div>
+																				                                <div><p>&amp;#109;</p>&#109;</div>
+																				                                <div><p>&amp;#110;</p>&#110;</div>
+																				                                <div><p>&amp;#111;</p>&#111;</div>
+																				                                <div><p>&amp;#112;</p>&#112;</div>
+																				                                <div><p>&amp;#113;</p>&#113;</div>
+																				                                <div><p>&amp;#114;</p>&#114;</div>
+																				                                <div><p>&amp;#115;</p>&#115;</div>
+																				                                <div><p>&amp;#116;</p>&#116;</div>
+																				                                <div><p>&amp;#117;</p>&#117;</div>
+																				                                <div><p>&amp;#118;</p>&#118;</div>
+																				                                <div><p>&amp;#119;</p>&#119;</div>
+																				                                <div><p>&amp;#120;</p>&#120;</div>
+																				                                <div><p>&amp;#121;</p>&#121;</div>
+																				                                <div><p>&amp;#122;</p>&#122;</div>
+																				                                <div><p>&amp;#126;</p>&#126;</div>
+																				                                <div><p>&amp;#160;</p>&#160;</div>
+																				                                <div><p>&amp;#173;</p>&#173;</div>
+																				                                <div><p>&amp;#8192;</p>&#8192;</div>
+																				                                <div><p>&amp;#8193;</p>&#8193;</div>
+																				                                <div><p>&amp;#8194;</p>&#8194;</div>
+																				                                <div><p>&amp;#8195;</p>&#8195;</div>
+																				                                <div><p>&amp;#8196;</p>&#8196;</div>
+																				                                <div><p>&amp;#8197;</p>&#8197;</div>
+																				                                <div><p>&amp;#8198;</p>&#8198;</div>
+																				                                <div><p>&amp;#8199;</p>&#8199;</div>
+																				                                <div><p>&amp;#8200;</p>&#8200;</div>
+																				                                <div><p>&amp;#8201;</p>&#8201;</div>
+																				                                <div><p>&amp;#8202;</p>&#8202;</div>
+																				                                <div><p>&amp;#8208;</p>&#8208;</div>
+																				                                <div><p>&amp;#8209;</p>&#8209;</div>
+																				                                <div><p>&amp;#8210;</p>&#8210;</div>
+																				                                <div><p>&amp;#8211;</p>&#8211;</div>
+																				                                <div><p>&amp;#8212;</p>&#8212;</div>
+																				                                <div><p>&amp;#8239;</p>&#8239;</div>
+																				                                <div><p>&amp;#8287;</p>&#8287;</div>
+																				                                <div><p>&amp;#9724;</p>&#9724;</div>
+																																																										                    </div>
+                </div>
+
+
+            </div>
+        </div>
+
+
+        <div id="specs">
+
+        </div>
+
+        <div id="installing">
+            <div class="section">
+                <div class="grid7 firstcol">
+                    <h1>Installing Webfonts</h1>
+
+                    <p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+
+                    <h2>1. Upload your webfonts</h2>
+                    <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+
+                    <h2>2. Include the webfont stylesheet</h2>
+                    <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+                    <code>
+                        @font-face{
+                        font-family: 'MyWebFont';
+                        src: url('WebFont.eot');
+                        src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+                        url('WebFont.woff') format('woff'),
+                        url('WebFont.ttf') format('truetype'),
+                        url('WebFont.svg#webfont') format('svg');
+                        }
+                    </code>
+
+                    <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+                    <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+                    <h2>3. Modify your own stylesheet</h2>
+                    <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+                    <code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+                    <h2>4. Test</h2>
+                    <p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+                </div>
+
+                <div class="grid5 sidebar">
+                    <div class="box">
+                        <h2>Troubleshooting<br/>Font-Face Problems</h2>
+                        <p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+                        <h3>Fonts not showing in any browser</h3>
+
+                        <p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+                        <h3>Fonts not loading in iPhone or iPad</h3>
+
+                        <p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+                        <h3>Fonts not loading in Firefox</h3>
+
+                        <p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+                        <h3>Fonts not loading in IE</h3>
+
+                        <p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+                        <h3>Fonts not loading in IE9</h3>
+
+                        <p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+    <div id="footer">
+        <p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+    </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,703 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+    <script type="text/javascript">
+		(function($) {
+			$.fn.easyTabs = function(option) {
+				var param = jQuery.extend({ fadeSpeed: 'fast', defaultContent: 1, activeClass: 'active' }, option);
+				$(this).each(function() {
+					var thisId = '#' + this.id;
+					if ( param.defaultContent == '' )
+					{
+						param.defaultContent = 1;
+					}
+					if ( typeof param.defaultContent == 'number' )
+					{
+						var defaultTab = $(thisId + ' .tabs li:eq(' + (param.defaultContent - 1) + ') a').attr('href').substr(1);
+					}
+					else
+					{
+						var defaultTab = param.defaultContent;
+					}
+					$(thisId + ' .tabs li a').each(function() {
+						var tabToHide = $(this).attr('href').substr(1);
+						$('#' + tabToHide).addClass('easytabs-tab-content');
+					});
+					hideAll();
+					changeContent(defaultTab);
+
+					function hideAll() {$(thisId + ' .easytabs-tab-content').hide();}
+
+					function changeContent(tabId)
+					{
+						hideAll();
+						$(thisId + ' .tabs li').removeClass(param.activeClass);
+						$(thisId + ' .tabs li a[href=#' + tabId + ']').closest('li').addClass(param.activeClass);
+						if ( param.fadeSpeed != 'none' )
+						{
+							$(thisId + ' #' + tabId).fadeIn(param.fadeSpeed);
+						}
+						else
+						{
+							$(thisId + ' #' + tabId).show();
+						}
+					}
+
+					$(thisId + ' .tabs li').click(function() {
+						var tabId = $(this).find('a').attr('href').substr(1);
+						changeContent(tabId);
+						return false;
+					});
+				});
+			}
+		})(jQuery);
+    </script>
+    <link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8"/>
+    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8"/>
+
+    <style type="text/css">
+        		body {
+			font-family: 'pf_ronda_sevenregular';
+        		}
+
+            </style>
+
+    <title>PF Ronda Seven Regular Specimen</title>
+
+
+    <script type="text/javascript" charset="utf-8">
+		$(document).ready(function() {
+			$('#container').easyTabs({ defaultContent: 1 });
+		});
+    </script>
+</head>
+
+<body>
+<div id="container">
+    <div id="header">
+		PF Ronda Seven Regular    </div>
+    <ul class="tabs">
+        <li><a href="#specimen">Specimen</a></li>
+        <li><a href="#layout">Sample Layout</a></li>
+		        <li><a href="#glyphs">Glyphs &amp; Languages</a></li>
+        <li><a href="#installing">Installing Webfonts</a></li>
+
+    </ul>
+
+    <div id="main_content">
+
+
+        <div id="specimen">
+
+            <div class="section">
+                <div class="grid12 firstcol">
+                    <div class="huge">AaBb</div>
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="glyph_range">A&#x200B;B&#x200b;C&#x200b;D&#x200b;E&#x200b;F&#x200b;G&#x200b;H&#x200b;I&#x200b;J&#x200b;K&#x200b;L&#x200b;M&#x200b;N&#x200b;O&#x200b;P&#x200b;Q&#x200b;R&#x200b;S&#x200b;T&#x200b;U&#x200b;V&#x200b;W&#x200b;X&#x200b;Y&#x200b;Z&#x200b;a&#x200b;b&#x200b;c&#x200b;d&#x200b;e&#x200b;f&#x200b;g&#x200b;h&#x200b;i&#x200b;j&#x200b;k&#x200b;l&#x200b;m&#x200b;n&#x200b;o&#x200b;p&#x200b;q&#x200b;r&#x200b;s&#x200b;t&#x200b;u&#x200b;v&#x200b;w&#x200b;x&#x200b;y&#x200b;z&#x200b;1&#x200b;2&#x200b;3&#x200b;4&#x200b;5&#x200b;6&#x200b;7&#x200b;8&#x200b;9&#x200b;0&#x200b;&amp;&#x200b;.&#x200b;,&#x200b;?&#x200b;!&#x200b;&#64;&#x200b;(&#x200b;)&#x200b;#&#x200b;$&#x200b;%&#x200b;*&#x200b;+&#x200b;-&#x200b;=&#x200b;:&#x200b;;</div>
+            </div>
+            <div class="section">
+                <div class="grid12 firstcol">
+                    <table class="sample_table">
+                        <tr>
+                            <td>10</td>
+                            <td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>11</td>
+                            <td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>12</td>
+                            <td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>13</td>
+                            <td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>14</td>
+                            <td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>16</td>
+                            <td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>18</td>
+                            <td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>20</td>
+                            <td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>24</td>
+                            <td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>30</td>
+                            <td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>36</td>
+                            <td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>48</td>
+                            <td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>60</td>
+                            <td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>72</td>
+                            <td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>90</td>
+                            <td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                    </table>
+
+                </div>
+
+            </div>
+
+
+            <div class="section" id="bodycomparison">
+
+
+                <div id="xheight">
+                    <div class="fontbody">&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;body</div>
+                    <div class="arialbody">body</div>
+                    <div class="verdanabody">body</div>
+                    <div class="georgiabody">body</div>
+                </div>
+                <div class="fontbody" style="z-index:1">
+                    body<span>PF Ronda Seven Regular</span>
+                </div>
+                <div class="arialbody" style="z-index:1">
+                    body<span>Arial</span>
+                </div>
+                <div class="verdanabody" style="z-index:1">
+                    body<span>Verdana</span>
+                </div>
+                <div class="georgiabody" style="z-index:1">
+                    body<span>Georgia</span>
+                </div>
+
+
+            </div>
+
+
+            <div class="section psample psample_row1" id="">
+
+                <div class="grid2 firstcol">
+                    <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="white_blend"></div>
+
+            </div>
+            <div class="section psample psample_row2" id="">
+                <div class="grid3 firstcol">
+                    <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid5">
+                    <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+
+                <div class="white_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row3" id="">
+                <div class="grid5 firstcol">
+                    <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="grid7">
+                    <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+
+                <div class="white_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row4" id="">
+                <div class="grid12 firstcol">
+                    <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="white_blend"></div>
+
+            </div>
+
+
+            <div class="section psample psample_row1 fullreverse">
+                <div class="grid2 firstcol">
+                    <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row2 fullreverse">
+                <div class="grid3 firstcol">
+                    <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid5">
+                    <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample fullreverse psample_row3" id="">
+                <div class="grid5 firstcol">
+                    <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="grid7">
+                    <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+                <div class="grid12 firstcol">
+                    <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+
+        </div>
+
+        <div id="layout">
+
+            <div class="section">
+
+                <div class="grid12 firstcol">
+                    <h1>Lorem Ipsum Dolor</h1>
+                    <h2>Etiam porta sem malesuada magna mollis euismod</h2>
+
+                    <p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+                </div>
+            </div>
+            <div class="section">
+                <div class="grid8 firstcol">
+                    <p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+                    <h3>Pellentesque ornare sem</h3>
+
+                    <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+                    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+                    <p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+                    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+                    <h3>Cras mattis consectetur</h3>
+
+                    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+                    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+                </div>
+
+                <div class="grid4 sidebar">
+
+                    <div class="box reverse">
+                        <p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+                    </div>
+
+                    <p class="caption">Maecenas sed diam eget risus varius.</p>
+
+                    <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+                </div>
+            </div>
+
+        </div>
+
+
+		
+
+        <div id="glyphs">
+            <div class="section">
+                <div class="grid12 firstcol">
+
+                    <h1>Language Support</h1>
+                    <p>The subset of PF Ronda Seven Regular in this kit supports the following languages:<br/>
+
+						Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo                    </p>
+                    <h1>Glyph Chart</h1>
+                    <p>The subset of PF Ronda Seven Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+                    <div id="glyph_chart">
+
+																				                                <div><p>&amp;#32;</p>&#32;</div>
+																				                                <div><p>&amp;#33;</p>&#33;</div>
+																				                                <div><p>&amp;#34;</p>&#34;</div>
+																				                                <div><p>&amp;#35;</p>&#35;</div>
+																				                                <div><p>&amp;#36;</p>&#36;</div>
+																				                                <div><p>&amp;#37;</p>&#37;</div>
+																				                                <div><p>&amp;#38;</p>&#38;</div>
+																				                                <div><p>&amp;#39;</p>&#39;</div>
+																				                                <div><p>&amp;#40;</p>&#40;</div>
+																				                                <div><p>&amp;#41;</p>&#41;</div>
+																				                                <div><p>&amp;#42;</p>&#42;</div>
+																				                                <div><p>&amp;#43;</p>&#43;</div>
+																				                                <div><p>&amp;#44;</p>&#44;</div>
+																				                                <div><p>&amp;#45;</p>&#45;</div>
+																				                                <div><p>&amp;#46;</p>&#46;</div>
+																				                                <div><p>&amp;#47;</p>&#47;</div>
+																				                                <div><p>&amp;#48;</p>&#48;</div>
+																				                                <div><p>&amp;#49;</p>&#49;</div>
+																				                                <div><p>&amp;#50;</p>&#50;</div>
+																				                                <div><p>&amp;#51;</p>&#51;</div>
+																				                                <div><p>&amp;#52;</p>&#52;</div>
+																				                                <div><p>&amp;#53;</p>&#53;</div>
+																				                                <div><p>&amp;#54;</p>&#54;</div>
+																				                                <div><p>&amp;#55;</p>&#55;</div>
+																				                                <div><p>&amp;#56;</p>&#56;</div>
+																				                                <div><p>&amp;#57;</p>&#57;</div>
+																				                                <div><p>&amp;#58;</p>&#58;</div>
+																				                                <div><p>&amp;#59;</p>&#59;</div>
+																				                                <div><p>&amp;#60;</p>&#60;</div>
+																				                                <div><p>&amp;#61;</p>&#61;</div>
+																				                                <div><p>&amp;#62;</p>&#62;</div>
+																				                                <div><p>&amp;#63;</p>&#63;</div>
+																				                                <div><p>&amp;#64;</p>&#64;</div>
+																				                                <div><p>&amp;#65;</p>&#65;</div>
+																				                                <div><p>&amp;#66;</p>&#66;</div>
+																				                                <div><p>&amp;#67;</p>&#67;</div>
+																				                                <div><p>&amp;#68;</p>&#68;</div>
+																				                                <div><p>&amp;#69;</p>&#69;</div>
+																				                                <div><p>&amp;#70;</p>&#70;</div>
+																				                                <div><p>&amp;#71;</p>&#71;</div>
+																				                                <div><p>&amp;#72;</p>&#72;</div>
+																				                                <div><p>&amp;#73;</p>&#73;</div>
+																				                                <div><p>&amp;#74;</p>&#74;</div>
+																				                                <div><p>&amp;#75;</p>&#75;</div>
+																				                                <div><p>&amp;#76;</p>&#76;</div>
+																				                                <div><p>&amp;#77;</p>&#77;</div>
+																				                                <div><p>&amp;#78;</p>&#78;</div>
+																				                                <div><p>&amp;#79;</p>&#79;</div>
+																				                                <div><p>&amp;#80;</p>&#80;</div>
+																				                                <div><p>&amp;#81;</p>&#81;</div>
+																				                                <div><p>&amp;#82;</p>&#82;</div>
+																				                                <div><p>&amp;#83;</p>&#83;</div>
+																				                                <div><p>&amp;#84;</p>&#84;</div>
+																				                                <div><p>&amp;#85;</p>&#85;</div>
+																				                                <div><p>&amp;#86;</p>&#86;</div>
+																				                                <div><p>&amp;#87;</p>&#87;</div>
+																				                                <div><p>&amp;#88;</p>&#88;</div>
+																				                                <div><p>&amp;#89;</p>&#89;</div>
+																				                                <div><p>&amp;#90;</p>&#90;</div>
+																				                                <div><p>&amp;#91;</p>&#91;</div>
+																				                                <div><p>&amp;#92;</p>&#92;</div>
+																				                                <div><p>&amp;#93;</p>&#93;</div>
+																				                                <div><p>&amp;#94;</p>&#94;</div>
+																				                                <div><p>&amp;#95;</p>&#95;</div>
+																				                                <div><p>&amp;#96;</p>&#96;</div>
+																				                                <div><p>&amp;#97;</p>&#97;</div>
+																				                                <div><p>&amp;#98;</p>&#98;</div>
+																				                                <div><p>&amp;#99;</p>&#99;</div>
+																				                                <div><p>&amp;#100;</p>&#100;</div>
+																				                                <div><p>&amp;#101;</p>&#101;</div>
+																				                                <div><p>&amp;#102;</p>&#102;</div>
+																				                                <div><p>&amp;#103;</p>&#103;</div>
+																				                                <div><p>&amp;#104;</p>&#104;</div>
+																				                                <div><p>&amp;#105;</p>&#105;</div>
+																				                                <div><p>&amp;#106;</p>&#106;</div>
+																				                                <div><p>&amp;#107;</p>&#107;</div>
+																				                                <div><p>&amp;#108;</p>&#108;</div>
+																				                                <div><p>&amp;#109;</p>&#109;</div>
+																				                                <div><p>&amp;#110;</p>&#110;</div>
+																				                                <div><p>&amp;#111;</p>&#111;</div>
+																				                                <div><p>&amp;#112;</p>&#112;</div>
+																				                                <div><p>&amp;#113;</p>&#113;</div>
+																				                                <div><p>&amp;#114;</p>&#114;</div>
+																				                                <div><p>&amp;#115;</p>&#115;</div>
+																				                                <div><p>&amp;#116;</p>&#116;</div>
+																				                                <div><p>&amp;#117;</p>&#117;</div>
+																				                                <div><p>&amp;#118;</p>&#118;</div>
+																				                                <div><p>&amp;#119;</p>&#119;</div>
+																				                                <div><p>&amp;#120;</p>&#120;</div>
+																				                                <div><p>&amp;#121;</p>&#121;</div>
+																				                                <div><p>&amp;#122;</p>&#122;</div>
+																				                                <div><p>&amp;#123;</p>&#123;</div>
+																				                                <div><p>&amp;#124;</p>&#124;</div>
+																				                                <div><p>&amp;#125;</p>&#125;</div>
+																				                                <div><p>&amp;#126;</p>&#126;</div>
+																				                                <div><p>&amp;#160;</p>&#160;</div>
+																				                                <div><p>&amp;#161;</p>&#161;</div>
+																				                                <div><p>&amp;#162;</p>&#162;</div>
+																				                                <div><p>&amp;#163;</p>&#163;</div>
+																				                                <div><p>&amp;#164;</p>&#164;</div>
+																				                                <div><p>&amp;#165;</p>&#165;</div>
+																				                                <div><p>&amp;#166;</p>&#166;</div>
+																				                                <div><p>&amp;#167;</p>&#167;</div>
+																				                                <div><p>&amp;#168;</p>&#168;</div>
+																				                                <div><p>&amp;#169;</p>&#169;</div>
+																				                                <div><p>&amp;#170;</p>&#170;</div>
+																				                                <div><p>&amp;#171;</p>&#171;</div>
+																				                                <div><p>&amp;#172;</p>&#172;</div>
+																				                                <div><p>&amp;#173;</p>&#173;</div>
+																				                                <div><p>&amp;#174;</p>&#174;</div>
+																				                                <div><p>&amp;#175;</p>&#175;</div>
+																				                                <div><p>&amp;#176;</p>&#176;</div>
+																				                                <div><p>&amp;#177;</p>&#177;</div>
+																				                                <div><p>&amp;#178;</p>&#178;</div>
+																				                                <div><p>&amp;#179;</p>&#179;</div>
+																				                                <div><p>&amp;#180;</p>&#180;</div>
+																				                                <div><p>&amp;#181;</p>&#181;</div>
+																				                                <div><p>&amp;#182;</p>&#182;</div>
+																				                                <div><p>&amp;#183;</p>&#183;</div>
+																				                                <div><p>&amp;#184;</p>&#184;</div>
+																				                                <div><p>&amp;#185;</p>&#185;</div>
+																				                                <div><p>&amp;#186;</p>&#186;</div>
+																				                                <div><p>&amp;#187;</p>&#187;</div>
+																				                                <div><p>&amp;#188;</p>&#188;</div>
+																				                                <div><p>&amp;#189;</p>&#189;</div>
+																				                                <div><p>&amp;#190;</p>&#190;</div>
+																				                                <div><p>&amp;#191;</p>&#191;</div>
+																				                                <div><p>&amp;#192;</p>&#192;</div>
+																				                                <div><p>&amp;#193;</p>&#193;</div>
+																				                                <div><p>&amp;#194;</p>&#194;</div>
+																				                                <div><p>&amp;#195;</p>&#195;</div>
+																				                                <div><p>&amp;#196;</p>&#196;</div>
+																				                                <div><p>&amp;#197;</p>&#197;</div>
+																				                                <div><p>&amp;#198;</p>&#198;</div>
+																				                                <div><p>&amp;#199;</p>&#199;</div>
+																				                                <div><p>&amp;#200;</p>&#200;</div>
+																				                                <div><p>&amp;#201;</p>&#201;</div>
+																				                                <div><p>&amp;#202;</p>&#202;</div>
+																				                                <div><p>&amp;#203;</p>&#203;</div>
+																				                                <div><p>&amp;#204;</p>&#204;</div>
+																				                                <div><p>&amp;#205;</p>&#205;</div>
+																				                                <div><p>&amp;#206;</p>&#206;</div>
+																				                                <div><p>&amp;#207;</p>&#207;</div>
+																				                                <div><p>&amp;#208;</p>&#208;</div>
+																				                                <div><p>&amp;#209;</p>&#209;</div>
+																				                                <div><p>&amp;#210;</p>&#210;</div>
+																				                                <div><p>&amp;#211;</p>&#211;</div>
+																				                                <div><p>&amp;#212;</p>&#212;</div>
+																				                                <div><p>&amp;#213;</p>&#213;</div>
+																				                                <div><p>&amp;#214;</p>&#214;</div>
+																				                                <div><p>&amp;#215;</p>&#215;</div>
+																				                                <div><p>&amp;#216;</p>&#216;</div>
+																				                                <div><p>&amp;#217;</p>&#217;</div>
+																				                                <div><p>&amp;#218;</p>&#218;</div>
+																				                                <div><p>&amp;#219;</p>&#219;</div>
+																				                                <div><p>&amp;#220;</p>&#220;</div>
+																				                                <div><p>&amp;#221;</p>&#221;</div>
+																				                                <div><p>&amp;#222;</p>&#222;</div>
+																				                                <div><p>&amp;#223;</p>&#223;</div>
+																				                                <div><p>&amp;#224;</p>&#224;</div>
+																				                                <div><p>&amp;#225;</p>&#225;</div>
+																				                                <div><p>&amp;#226;</p>&#226;</div>
+																				                                <div><p>&amp;#227;</p>&#227;</div>
+																				                                <div><p>&amp;#228;</p>&#228;</div>
+																				                                <div><p>&amp;#229;</p>&#229;</div>
+																				                                <div><p>&amp;#230;</p>&#230;</div>
+																				                                <div><p>&amp;#231;</p>&#231;</div>
+																				                                <div><p>&amp;#232;</p>&#232;</div>
+																				                                <div><p>&amp;#233;</p>&#233;</div>
+																				                                <div><p>&amp;#234;</p>&#234;</div>
+																				                                <div><p>&amp;#235;</p>&#235;</div>
+																				                                <div><p>&amp;#236;</p>&#236;</div>
+																				                                <div><p>&amp;#237;</p>&#237;</div>
+																				                                <div><p>&amp;#238;</p>&#238;</div>
+																				                                <div><p>&amp;#239;</p>&#239;</div>
+																				                                <div><p>&amp;#240;</p>&#240;</div>
+																				                                <div><p>&amp;#241;</p>&#241;</div>
+																				                                <div><p>&amp;#242;</p>&#242;</div>
+																				                                <div><p>&amp;#243;</p>&#243;</div>
+																				                                <div><p>&amp;#244;</p>&#244;</div>
+																				                                <div><p>&amp;#245;</p>&#245;</div>
+																				                                <div><p>&amp;#246;</p>&#246;</div>
+																				                                <div><p>&amp;#247;</p>&#247;</div>
+																				                                <div><p>&amp;#248;</p>&#248;</div>
+																				                                <div><p>&amp;#249;</p>&#249;</div>
+																				                                <div><p>&amp;#250;</p>&#250;</div>
+																				                                <div><p>&amp;#251;</p>&#251;</div>
+																				                                <div><p>&amp;#252;</p>&#252;</div>
+																				                                <div><p>&amp;#253;</p>&#253;</div>
+																				                                <div><p>&amp;#254;</p>&#254;</div>
+																				                                <div><p>&amp;#255;</p>&#255;</div>
+																				                                <div><p>&amp;#338;</p>&#338;</div>
+																				                                <div><p>&amp;#339;</p>&#339;</div>
+																				                                <div><p>&amp;#376;</p>&#376;</div>
+																				                                <div><p>&amp;#710;</p>&#710;</div>
+																				                                <div><p>&amp;#732;</p>&#732;</div>
+																				                                <div><p>&amp;#8192;</p>&#8192;</div>
+																				                                <div><p>&amp;#8193;</p>&#8193;</div>
+																				                                <div><p>&amp;#8194;</p>&#8194;</div>
+																				                                <div><p>&amp;#8195;</p>&#8195;</div>
+																				                                <div><p>&amp;#8196;</p>&#8196;</div>
+																				                                <div><p>&amp;#8197;</p>&#8197;</div>
+																				                                <div><p>&amp;#8198;</p>&#8198;</div>
+																				                                <div><p>&amp;#8199;</p>&#8199;</div>
+																				                                <div><p>&amp;#8200;</p>&#8200;</div>
+																				                                <div><p>&amp;#8201;</p>&#8201;</div>
+																				                                <div><p>&amp;#8202;</p>&#8202;</div>
+																				                                <div><p>&amp;#8208;</p>&#8208;</div>
+																				                                <div><p>&amp;#8209;</p>&#8209;</div>
+																				                                <div><p>&amp;#8210;</p>&#8210;</div>
+																				                                <div><p>&amp;#8211;</p>&#8211;</div>
+																				                                <div><p>&amp;#8212;</p>&#8212;</div>
+																				                                <div><p>&amp;#8216;</p>&#8216;</div>
+																				                                <div><p>&amp;#8217;</p>&#8217;</div>
+																				                                <div><p>&amp;#8218;</p>&#8218;</div>
+																				                                <div><p>&amp;#8220;</p>&#8220;</div>
+																				                                <div><p>&amp;#8221;</p>&#8221;</div>
+																				                                <div><p>&amp;#8222;</p>&#8222;</div>
+																				                                <div><p>&amp;#8226;</p>&#8226;</div>
+																				                                <div><p>&amp;#8230;</p>&#8230;</div>
+																				                                <div><p>&amp;#8239;</p>&#8239;</div>
+																				                                <div><p>&amp;#8249;</p>&#8249;</div>
+																				                                <div><p>&amp;#8250;</p>&#8250;</div>
+																				                                <div><p>&amp;#8287;</p>&#8287;</div>
+																				                                <div><p>&amp;#8364;</p>&#8364;</div>
+																				                                <div><p>&amp;#8482;</p>&#8482;</div>
+																				                                <div><p>&amp;#9724;</p>&#9724;</div>
+																				                                <div><p>&amp;#64257;</p>&#64257;</div>
+																				                                <div><p>&amp;#64258;</p>&#64258;</div>
+																																																										                    </div>
+                </div>
+
+
+            </div>
+        </div>
+
+
+        <div id="specs">
+
+        </div>
+
+        <div id="installing">
+            <div class="section">
+                <div class="grid7 firstcol">
+                    <h1>Installing Webfonts</h1>
+
+                    <p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+
+                    <h2>1. Upload your webfonts</h2>
+                    <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+
+                    <h2>2. Include the webfont stylesheet</h2>
+                    <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+                    <code>
+                        @font-face{
+                        font-family: 'MyWebFont';
+                        src: url('WebFont.eot');
+                        src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+                        url('WebFont.woff') format('woff'),
+                        url('WebFont.ttf') format('truetype'),
+                        url('WebFont.svg#webfont') format('svg');
+                        }
+                    </code>
+
+                    <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+                    <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+                    <h2>3. Modify your own stylesheet</h2>
+                    <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+                    <code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+                    <h2>4. Test</h2>
+                    <p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+                </div>
+
+                <div class="grid5 sidebar">
+                    <div class="box">
+                        <h2>Troubleshooting<br/>Font-Face Problems</h2>
+                        <p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+                        <h3>Fonts not showing in any browser</h3>
+
+                        <p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+                        <h3>Fonts not loading in iPhone or iPad</h3>
+
+                        <p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+                        <h3>Fonts not loading in Firefox</h3>
+
+                        <p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+                        <h3>Fonts not loading in IE</h3>
+
+                        <p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+                        <h3>Fonts not loading in IE9</h3>
+
+                        <p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+    <div id="footer">
+        <p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+    </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,703 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+    <script type="text/javascript">
+		(function($) {
+			$.fn.easyTabs = function(option) {
+				var param = jQuery.extend({ fadeSpeed: 'fast', defaultContent: 1, activeClass: 'active' }, option);
+				$(this).each(function() {
+					var thisId = '#' + this.id;
+					if ( param.defaultContent == '' )
+					{
+						param.defaultContent = 1;
+					}
+					if ( typeof param.defaultContent == 'number' )
+					{
+						var defaultTab = $(thisId + ' .tabs li:eq(' + (param.defaultContent - 1) + ') a').attr('href').substr(1);
+					}
+					else
+					{
+						var defaultTab = param.defaultContent;
+					}
+					$(thisId + ' .tabs li a').each(function() {
+						var tabToHide = $(this).attr('href').substr(1);
+						$('#' + tabToHide).addClass('easytabs-tab-content');
+					});
+					hideAll();
+					changeContent(defaultTab);
+
+					function hideAll() {$(thisId + ' .easytabs-tab-content').hide();}
+
+					function changeContent(tabId)
+					{
+						hideAll();
+						$(thisId + ' .tabs li').removeClass(param.activeClass);
+						$(thisId + ' .tabs li a[href=#' + tabId + ']').closest('li').addClass(param.activeClass);
+						if ( param.fadeSpeed != 'none' )
+						{
+							$(thisId + ' #' + tabId).fadeIn(param.fadeSpeed);
+						}
+						else
+						{
+							$(thisId + ' #' + tabId).show();
+						}
+					}
+
+					$(thisId + ' .tabs li').click(function() {
+						var tabId = $(this).find('a').attr('href').substr(1);
+						changeContent(tabId);
+						return false;
+					});
+				});
+			}
+		})(jQuery);
+    </script>
+    <link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8"/>
+    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8"/>
+
+    <style type="text/css">
+        		body {
+			font-family: 'pf_ronda_sevenbold';
+        		}
+
+            </style>
+
+    <title>PF Ronda Seven Bold Specimen</title>
+
+
+    <script type="text/javascript" charset="utf-8">
+		$(document).ready(function() {
+			$('#container').easyTabs({ defaultContent: 1 });
+		});
+    </script>
+</head>
+
+<body>
+<div id="container">
+    <div id="header">
+		PF Ronda Seven Bold    </div>
+    <ul class="tabs">
+        <li><a href="#specimen">Specimen</a></li>
+        <li><a href="#layout">Sample Layout</a></li>
+		        <li><a href="#glyphs">Glyphs &amp; Languages</a></li>
+        <li><a href="#installing">Installing Webfonts</a></li>
+
+    </ul>
+
+    <div id="main_content">
+
+
+        <div id="specimen">
+
+            <div class="section">
+                <div class="grid12 firstcol">
+                    <div class="huge">AaBb</div>
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="glyph_range">A&#x200B;B&#x200b;C&#x200b;D&#x200b;E&#x200b;F&#x200b;G&#x200b;H&#x200b;I&#x200b;J&#x200b;K&#x200b;L&#x200b;M&#x200b;N&#x200b;O&#x200b;P&#x200b;Q&#x200b;R&#x200b;S&#x200b;T&#x200b;U&#x200b;V&#x200b;W&#x200b;X&#x200b;Y&#x200b;Z&#x200b;a&#x200b;b&#x200b;c&#x200b;d&#x200b;e&#x200b;f&#x200b;g&#x200b;h&#x200b;i&#x200b;j&#x200b;k&#x200b;l&#x200b;m&#x200b;n&#x200b;o&#x200b;p&#x200b;q&#x200b;r&#x200b;s&#x200b;t&#x200b;u&#x200b;v&#x200b;w&#x200b;x&#x200b;y&#x200b;z&#x200b;1&#x200b;2&#x200b;3&#x200b;4&#x200b;5&#x200b;6&#x200b;7&#x200b;8&#x200b;9&#x200b;0&#x200b;&amp;&#x200b;.&#x200b;,&#x200b;?&#x200b;!&#x200b;&#64;&#x200b;(&#x200b;)&#x200b;#&#x200b;$&#x200b;%&#x200b;*&#x200b;+&#x200b;-&#x200b;=&#x200b;:&#x200b;;</div>
+            </div>
+            <div class="section">
+                <div class="grid12 firstcol">
+                    <table class="sample_table">
+                        <tr>
+                            <td>10</td>
+                            <td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>11</td>
+                            <td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>12</td>
+                            <td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>13</td>
+                            <td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>14</td>
+                            <td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>16</td>
+                            <td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>18</td>
+                            <td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>20</td>
+                            <td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>24</td>
+                            <td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>30</td>
+                            <td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>36</td>
+                            <td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>48</td>
+                            <td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>60</td>
+                            <td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>72</td>
+                            <td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>90</td>
+                            <td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                    </table>
+
+                </div>
+
+            </div>
+
+
+            <div class="section" id="bodycomparison">
+
+
+                <div id="xheight">
+                    <div class="fontbody">&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;body</div>
+                    <div class="arialbody">body</div>
+                    <div class="verdanabody">body</div>
+                    <div class="georgiabody">body</div>
+                </div>
+                <div class="fontbody" style="z-index:1">
+                    body<span>PF Ronda Seven Bold</span>
+                </div>
+                <div class="arialbody" style="z-index:1">
+                    body<span>Arial</span>
+                </div>
+                <div class="verdanabody" style="z-index:1">
+                    body<span>Verdana</span>
+                </div>
+                <div class="georgiabody" style="z-index:1">
+                    body<span>Georgia</span>
+                </div>
+
+
+            </div>
+
+
+            <div class="section psample psample_row1" id="">
+
+                <div class="grid2 firstcol">
+                    <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="white_blend"></div>
+
+            </div>
+            <div class="section psample psample_row2" id="">
+                <div class="grid3 firstcol">
+                    <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid5">
+                    <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+
+                <div class="white_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row3" id="">
+                <div class="grid5 firstcol">
+                    <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="grid7">
+                    <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+
+                <div class="white_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row4" id="">
+                <div class="grid12 firstcol">
+                    <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="white_blend"></div>
+
+            </div>
+
+
+            <div class="section psample psample_row1 fullreverse">
+                <div class="grid2 firstcol">
+                    <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row2 fullreverse">
+                <div class="grid3 firstcol">
+                    <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid5">
+                    <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample fullreverse psample_row3" id="">
+                <div class="grid5 firstcol">
+                    <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="grid7">
+                    <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+                <div class="grid12 firstcol">
+                    <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+
+        </div>
+
+        <div id="layout">
+
+            <div class="section">
+
+                <div class="grid12 firstcol">
+                    <h1>Lorem Ipsum Dolor</h1>
+                    <h2>Etiam porta sem malesuada magna mollis euismod</h2>
+
+                    <p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+                </div>
+            </div>
+            <div class="section">
+                <div class="grid8 firstcol">
+                    <p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+                    <h3>Pellentesque ornare sem</h3>
+
+                    <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+                    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+                    <p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+                    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+                    <h3>Cras mattis consectetur</h3>
+
+                    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+                    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+                </div>
+
+                <div class="grid4 sidebar">
+
+                    <div class="box reverse">
+                        <p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+                    </div>
+
+                    <p class="caption">Maecenas sed diam eget risus varius.</p>
+
+                    <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+                </div>
+            </div>
+
+        </div>
+
+
+		
+
+        <div id="glyphs">
+            <div class="section">
+                <div class="grid12 firstcol">
+
+                    <h1>Language Support</h1>
+                    <p>The subset of PF Ronda Seven Bold in this kit supports the following languages:<br/>
+
+						Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo                    </p>
+                    <h1>Glyph Chart</h1>
+                    <p>The subset of PF Ronda Seven Bold in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+                    <div id="glyph_chart">
+
+																				                                <div><p>&amp;#32;</p>&#32;</div>
+																				                                <div><p>&amp;#33;</p>&#33;</div>
+																				                                <div><p>&amp;#34;</p>&#34;</div>
+																				                                <div><p>&amp;#35;</p>&#35;</div>
+																				                                <div><p>&amp;#36;</p>&#36;</div>
+																				                                <div><p>&amp;#37;</p>&#37;</div>
+																				                                <div><p>&amp;#38;</p>&#38;</div>
+																				                                <div><p>&amp;#39;</p>&#39;</div>
+																				                                <div><p>&amp;#40;</p>&#40;</div>
+																				                                <div><p>&amp;#41;</p>&#41;</div>
+																				                                <div><p>&amp;#42;</p>&#42;</div>
+																				                                <div><p>&amp;#43;</p>&#43;</div>
+																				                                <div><p>&amp;#44;</p>&#44;</div>
+																				                                <div><p>&amp;#45;</p>&#45;</div>
+																				                                <div><p>&amp;#46;</p>&#46;</div>
+																				                                <div><p>&amp;#47;</p>&#47;</div>
+																				                                <div><p>&amp;#48;</p>&#48;</div>
+																				                                <div><p>&amp;#49;</p>&#49;</div>
+																				                                <div><p>&amp;#50;</p>&#50;</div>
+																				                                <div><p>&amp;#51;</p>&#51;</div>
+																				                                <div><p>&amp;#52;</p>&#52;</div>
+																				                                <div><p>&amp;#53;</p>&#53;</div>
+																				                                <div><p>&amp;#54;</p>&#54;</div>
+																				                                <div><p>&amp;#55;</p>&#55;</div>
+																				                                <div><p>&amp;#56;</p>&#56;</div>
+																				                                <div><p>&amp;#57;</p>&#57;</div>
+																				                                <div><p>&amp;#58;</p>&#58;</div>
+																				                                <div><p>&amp;#59;</p>&#59;</div>
+																				                                <div><p>&amp;#60;</p>&#60;</div>
+																				                                <div><p>&amp;#61;</p>&#61;</div>
+																				                                <div><p>&amp;#62;</p>&#62;</div>
+																				                                <div><p>&amp;#63;</p>&#63;</div>
+																				                                <div><p>&amp;#64;</p>&#64;</div>
+																				                                <div><p>&amp;#65;</p>&#65;</div>
+																				                                <div><p>&amp;#66;</p>&#66;</div>
+																				                                <div><p>&amp;#67;</p>&#67;</div>
+																				                                <div><p>&amp;#68;</p>&#68;</div>
+																				                                <div><p>&amp;#69;</p>&#69;</div>
+																				                                <div><p>&amp;#70;</p>&#70;</div>
+																				                                <div><p>&amp;#71;</p>&#71;</div>
+																				                                <div><p>&amp;#72;</p>&#72;</div>
+																				                                <div><p>&amp;#73;</p>&#73;</div>
+																				                                <div><p>&amp;#74;</p>&#74;</div>
+																				                                <div><p>&amp;#75;</p>&#75;</div>
+																				                                <div><p>&amp;#76;</p>&#76;</div>
+																				                                <div><p>&amp;#77;</p>&#77;</div>
+																				                                <div><p>&amp;#78;</p>&#78;</div>
+																				                                <div><p>&amp;#79;</p>&#79;</div>
+																				                                <div><p>&amp;#80;</p>&#80;</div>
+																				                                <div><p>&amp;#81;</p>&#81;</div>
+																				                                <div><p>&amp;#82;</p>&#82;</div>
+																				                                <div><p>&amp;#83;</p>&#83;</div>
+																				                                <div><p>&amp;#84;</p>&#84;</div>
+																				                                <div><p>&amp;#85;</p>&#85;</div>
+																				                                <div><p>&amp;#86;</p>&#86;</div>
+																				                                <div><p>&amp;#87;</p>&#87;</div>
+																				                                <div><p>&amp;#88;</p>&#88;</div>
+																				                                <div><p>&amp;#89;</p>&#89;</div>
+																				                                <div><p>&amp;#90;</p>&#90;</div>
+																				                                <div><p>&amp;#91;</p>&#91;</div>
+																				                                <div><p>&amp;#92;</p>&#92;</div>
+																				                                <div><p>&amp;#93;</p>&#93;</div>
+																				                                <div><p>&amp;#94;</p>&#94;</div>
+																				                                <div><p>&amp;#95;</p>&#95;</div>
+																				                                <div><p>&amp;#96;</p>&#96;</div>
+																				                                <div><p>&amp;#97;</p>&#97;</div>
+																				                                <div><p>&amp;#98;</p>&#98;</div>
+																				                                <div><p>&amp;#99;</p>&#99;</div>
+																				                                <div><p>&amp;#100;</p>&#100;</div>
+																				                                <div><p>&amp;#101;</p>&#101;</div>
+																				                                <div><p>&amp;#102;</p>&#102;</div>
+																				                                <div><p>&amp;#103;</p>&#103;</div>
+																				                                <div><p>&amp;#104;</p>&#104;</div>
+																				                                <div><p>&amp;#105;</p>&#105;</div>
+																				                                <div><p>&amp;#106;</p>&#106;</div>
+																				                                <div><p>&amp;#107;</p>&#107;</div>
+																				                                <div><p>&amp;#108;</p>&#108;</div>
+																				                                <div><p>&amp;#109;</p>&#109;</div>
+																				                                <div><p>&amp;#110;</p>&#110;</div>
+																				                                <div><p>&amp;#111;</p>&#111;</div>
+																				                                <div><p>&amp;#112;</p>&#112;</div>
+																				                                <div><p>&amp;#113;</p>&#113;</div>
+																				                                <div><p>&amp;#114;</p>&#114;</div>
+																				                                <div><p>&amp;#115;</p>&#115;</div>
+																				                                <div><p>&amp;#116;</p>&#116;</div>
+																				                                <div><p>&amp;#117;</p>&#117;</div>
+																				                                <div><p>&amp;#118;</p>&#118;</div>
+																				                                <div><p>&amp;#119;</p>&#119;</div>
+																				                                <div><p>&amp;#120;</p>&#120;</div>
+																				                                <div><p>&amp;#121;</p>&#121;</div>
+																				                                <div><p>&amp;#122;</p>&#122;</div>
+																				                                <div><p>&amp;#123;</p>&#123;</div>
+																				                                <div><p>&amp;#124;</p>&#124;</div>
+																				                                <div><p>&amp;#125;</p>&#125;</div>
+																				                                <div><p>&amp;#126;</p>&#126;</div>
+																				                                <div><p>&amp;#160;</p>&#160;</div>
+																				                                <div><p>&amp;#161;</p>&#161;</div>
+																				                                <div><p>&amp;#162;</p>&#162;</div>
+																				                                <div><p>&amp;#163;</p>&#163;</div>
+																				                                <div><p>&amp;#164;</p>&#164;</div>
+																				                                <div><p>&amp;#165;</p>&#165;</div>
+																				                                <div><p>&amp;#166;</p>&#166;</div>
+																				                                <div><p>&amp;#167;</p>&#167;</div>
+																				                                <div><p>&amp;#168;</p>&#168;</div>
+																				                                <div><p>&amp;#169;</p>&#169;</div>
+																				                                <div><p>&amp;#170;</p>&#170;</div>
+																				                                <div><p>&amp;#171;</p>&#171;</div>
+																				                                <div><p>&amp;#172;</p>&#172;</div>
+																				                                <div><p>&amp;#173;</p>&#173;</div>
+																				                                <div><p>&amp;#174;</p>&#174;</div>
+																				                                <div><p>&amp;#175;</p>&#175;</div>
+																				                                <div><p>&amp;#176;</p>&#176;</div>
+																				                                <div><p>&amp;#177;</p>&#177;</div>
+																				                                <div><p>&amp;#178;</p>&#178;</div>
+																				                                <div><p>&amp;#179;</p>&#179;</div>
+																				                                <div><p>&amp;#180;</p>&#180;</div>
+																				                                <div><p>&amp;#181;</p>&#181;</div>
+																				                                <div><p>&amp;#182;</p>&#182;</div>
+																				                                <div><p>&amp;#183;</p>&#183;</div>
+																				                                <div><p>&amp;#184;</p>&#184;</div>
+																				                                <div><p>&amp;#185;</p>&#185;</div>
+																				                                <div><p>&amp;#186;</p>&#186;</div>
+																				                                <div><p>&amp;#187;</p>&#187;</div>
+																				                                <div><p>&amp;#188;</p>&#188;</div>
+																				                                <div><p>&amp;#189;</p>&#189;</div>
+																				                                <div><p>&amp;#190;</p>&#190;</div>
+																				                                <div><p>&amp;#191;</p>&#191;</div>
+																				                                <div><p>&amp;#192;</p>&#192;</div>
+																				                                <div><p>&amp;#193;</p>&#193;</div>
+																				                                <div><p>&amp;#194;</p>&#194;</div>
+																				                                <div><p>&amp;#195;</p>&#195;</div>
+																				                                <div><p>&amp;#196;</p>&#196;</div>
+																				                                <div><p>&amp;#197;</p>&#197;</div>
+																				                                <div><p>&amp;#198;</p>&#198;</div>
+																				                                <div><p>&amp;#199;</p>&#199;</div>
+																				                                <div><p>&amp;#200;</p>&#200;</div>
+																				                                <div><p>&amp;#201;</p>&#201;</div>
+																				                                <div><p>&amp;#202;</p>&#202;</div>
+																				                                <div><p>&amp;#203;</p>&#203;</div>
+																				                                <div><p>&amp;#204;</p>&#204;</div>
+																				                                <div><p>&amp;#205;</p>&#205;</div>
+																				                                <div><p>&amp;#206;</p>&#206;</div>
+																				                                <div><p>&amp;#207;</p>&#207;</div>
+																				                                <div><p>&amp;#208;</p>&#208;</div>
+																				                                <div><p>&amp;#209;</p>&#209;</div>
+																				                                <div><p>&amp;#210;</p>&#210;</div>
+																				                                <div><p>&amp;#211;</p>&#211;</div>
+																				                                <div><p>&amp;#212;</p>&#212;</div>
+																				                                <div><p>&amp;#213;</p>&#213;</div>
+																				                                <div><p>&amp;#214;</p>&#214;</div>
+																				                                <div><p>&amp;#215;</p>&#215;</div>
+																				                                <div><p>&amp;#216;</p>&#216;</div>
+																				                                <div><p>&amp;#217;</p>&#217;</div>
+																				                                <div><p>&amp;#218;</p>&#218;</div>
+																				                                <div><p>&amp;#219;</p>&#219;</div>
+																				                                <div><p>&amp;#220;</p>&#220;</div>
+																				                                <div><p>&amp;#221;</p>&#221;</div>
+																				                                <div><p>&amp;#222;</p>&#222;</div>
+																				                                <div><p>&amp;#223;</p>&#223;</div>
+																				                                <div><p>&amp;#224;</p>&#224;</div>
+																				                                <div><p>&amp;#225;</p>&#225;</div>
+																				                                <div><p>&amp;#226;</p>&#226;</div>
+																				                                <div><p>&amp;#227;</p>&#227;</div>
+																				                                <div><p>&amp;#228;</p>&#228;</div>
+																				                                <div><p>&amp;#229;</p>&#229;</div>
+																				                                <div><p>&amp;#230;</p>&#230;</div>
+																				                                <div><p>&amp;#231;</p>&#231;</div>
+																				                                <div><p>&amp;#232;</p>&#232;</div>
+																				                                <div><p>&amp;#233;</p>&#233;</div>
+																				                                <div><p>&amp;#234;</p>&#234;</div>
+																				                                <div><p>&amp;#235;</p>&#235;</div>
+																				                                <div><p>&amp;#236;</p>&#236;</div>
+																				                                <div><p>&amp;#237;</p>&#237;</div>
+																				                                <div><p>&amp;#238;</p>&#238;</div>
+																				                                <div><p>&amp;#239;</p>&#239;</div>
+																				                                <div><p>&amp;#240;</p>&#240;</div>
+																				                                <div><p>&amp;#241;</p>&#241;</div>
+																				                                <div><p>&amp;#242;</p>&#242;</div>
+																				                                <div><p>&amp;#243;</p>&#243;</div>
+																				                                <div><p>&amp;#244;</p>&#244;</div>
+																				                                <div><p>&amp;#245;</p>&#245;</div>
+																				                                <div><p>&amp;#246;</p>&#246;</div>
+																				                                <div><p>&amp;#247;</p>&#247;</div>
+																				                                <div><p>&amp;#248;</p>&#248;</div>
+																				                                <div><p>&amp;#249;</p>&#249;</div>
+																				                                <div><p>&amp;#250;</p>&#250;</div>
+																				                                <div><p>&amp;#251;</p>&#251;</div>
+																				                                <div><p>&amp;#252;</p>&#252;</div>
+																				                                <div><p>&amp;#253;</p>&#253;</div>
+																				                                <div><p>&amp;#254;</p>&#254;</div>
+																				                                <div><p>&amp;#255;</p>&#255;</div>
+																				                                <div><p>&amp;#338;</p>&#338;</div>
+																				                                <div><p>&amp;#339;</p>&#339;</div>
+																				                                <div><p>&amp;#376;</p>&#376;</div>
+																				                                <div><p>&amp;#710;</p>&#710;</div>
+																				                                <div><p>&amp;#732;</p>&#732;</div>
+																				                                <div><p>&amp;#8192;</p>&#8192;</div>
+																				                                <div><p>&amp;#8193;</p>&#8193;</div>
+																				                                <div><p>&amp;#8194;</p>&#8194;</div>
+																				                                <div><p>&amp;#8195;</p>&#8195;</div>
+																				                                <div><p>&amp;#8196;</p>&#8196;</div>
+																				                                <div><p>&amp;#8197;</p>&#8197;</div>
+																				                                <div><p>&amp;#8198;</p>&#8198;</div>
+																				                                <div><p>&amp;#8199;</p>&#8199;</div>
+																				                                <div><p>&amp;#8200;</p>&#8200;</div>
+																				                                <div><p>&amp;#8201;</p>&#8201;</div>
+																				                                <div><p>&amp;#8202;</p>&#8202;</div>
+																				                                <div><p>&amp;#8208;</p>&#8208;</div>
+																				                                <div><p>&amp;#8209;</p>&#8209;</div>
+																				                                <div><p>&amp;#8210;</p>&#8210;</div>
+																				                                <div><p>&amp;#8211;</p>&#8211;</div>
+																				                                <div><p>&amp;#8212;</p>&#8212;</div>
+																				                                <div><p>&amp;#8216;</p>&#8216;</div>
+																				                                <div><p>&amp;#8217;</p>&#8217;</div>
+																				                                <div><p>&amp;#8218;</p>&#8218;</div>
+																				                                <div><p>&amp;#8220;</p>&#8220;</div>
+																				                                <div><p>&amp;#8221;</p>&#8221;</div>
+																				                                <div><p>&amp;#8222;</p>&#8222;</div>
+																				                                <div><p>&amp;#8226;</p>&#8226;</div>
+																				                                <div><p>&amp;#8230;</p>&#8230;</div>
+																				                                <div><p>&amp;#8239;</p>&#8239;</div>
+																				                                <div><p>&amp;#8249;</p>&#8249;</div>
+																				                                <div><p>&amp;#8250;</p>&#8250;</div>
+																				                                <div><p>&amp;#8287;</p>&#8287;</div>
+																				                                <div><p>&amp;#8364;</p>&#8364;</div>
+																				                                <div><p>&amp;#8482;</p>&#8482;</div>
+																				                                <div><p>&amp;#9724;</p>&#9724;</div>
+																				                                <div><p>&amp;#64257;</p>&#64257;</div>
+																				                                <div><p>&amp;#64258;</p>&#64258;</div>
+																																																										                    </div>
+                </div>
+
+
+            </div>
+        </div>
+
+
+        <div id="specs">
+
+        </div>
+
+        <div id="installing">
+            <div class="section">
+                <div class="grid7 firstcol">
+                    <h1>Installing Webfonts</h1>
+
+                    <p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+
+                    <h2>1. Upload your webfonts</h2>
+                    <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+
+                    <h2>2. Include the webfont stylesheet</h2>
+                    <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+                    <code>
+                        @font-face{
+                        font-family: 'MyWebFont';
+                        src: url('WebFont.eot');
+                        src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+                        url('WebFont.woff') format('woff'),
+                        url('WebFont.ttf') format('truetype'),
+                        url('WebFont.svg#webfont') format('svg');
+                        }
+                    </code>
+
+                    <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+                    <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+                    <h2>3. Modify your own stylesheet</h2>
+                    <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+                    <code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+                    <h2>4. Test</h2>
+                    <p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+                </div>
+
+                <div class="grid5 sidebar">
+                    <div class="box">
+                        <h2>Troubleshooting<br/>Font-Face Problems</h2>
+                        <p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+                        <h3>Fonts not showing in any browser</h3>
+
+                        <p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+                        <h3>Fonts not loading in iPhone or iPad</h3>
+
+                        <p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+                        <h3>Fonts not loading in Firefox</h3>
+
+                        <p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+                        <h3>Fonts not loading in IE</h3>
+
+                        <p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+                        <h3>Fonts not loading in IE9</h3>
+
+                        <p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+    <div id="footer">
+        <p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+    </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,370 @@
+/*Notes about grid:
+Columns:      12
+Grid Width:   825px
+Column Width: 55px
+Gutter Width: 15px
+-------------------------------*/
+
+
+.section {
+	margin-bottom: 18px;
+}
+
+.section:after {
+	content:    '.';
+	display:    block;
+	height:     0;
+	clear:      both;
+	visibility: hidden;
+}
+
+.section {
+	*zoom: 1;
+}
+
+.section .firstcolumn,
+.section .firstcol {
+	margin-left: 0;
+}
+
+
+/* Border on left hand side of a column. */
+.border {
+	padding-left: 7px;
+	margin-left:  7px;
+	border-left:  1px solid #eee;
+}
+
+/* Border with more whitespace, spans one column. */
+.colborder {
+	padding-left: 42px;
+	margin-left:  42px;
+	border-left:  1px solid #eee;
+}
+
+
+/* The Grid Classes */
+.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 {
+	margin-left: 15px;
+	float:       left;
+	display:     inline;
+	overflow:    hidden;
+}
+
+
+.width1, .grid1, .span-1 {
+	width: 55px;
+}
+
+.width1_2cols, .grid1_2cols {
+	width: 20px;
+}
+
+.width1_3cols, .grid1_3cols {
+	width: 8px;
+}
+
+.width1_4cols, .grid1_4cols {
+	width: 2px;
+}
+
+.input_width1 {
+	width: 49px;
+}
+
+.width2, .grid2, .span-2 {
+	width: 125px;
+}
+
+.width2_3cols, .grid2_3cols {
+	width: 31px;
+}
+
+.width2_4cols, .grid2_4cols {
+	width: 20px;
+}
+
+.input_width2 {
+	width: 119px;
+}
+
+.width3, .grid3, .span-3 {
+	width: 195px;
+}
+
+.width3_2cols, .grid3_2cols {
+	width: 90px;
+}
+
+.width3_4cols, .grid3_4cols {
+	width: 37px;
+}
+
+.input_width3 {
+	width: 189px;
+}
+
+.width4, .grid4, .span-4 {
+	width: 265px;
+}
+
+.width4_3cols, .grid4_3cols {
+	width: 78px;
+}
+
+.input_width4 {
+	width: 259px;
+}
+
+.width5, .grid5, .span-5 {
+	width: 335px;
+}
+
+.width5_2cols, .grid5_2cols {
+	width: 160px;
+}
+
+.width5_3cols, .grid5_3cols {
+	width: 101px;
+}
+
+.width5_4cols, .grid5_4cols {
+	width: 72px;
+}
+
+.input_width5 {
+	width: 329px;
+}
+
+.width6, .grid6, .span-6 {
+	width: 405px;
+}
+
+.width6_4cols, .grid6_4cols {
+	width: 90px;
+}
+
+.input_width6 {
+	width: 399px;
+}
+
+.width7, .grid7, .span-7 {
+	width: 475px;
+}
+
+.width7_2cols, .grid7_2cols {
+	width: 230px;
+}
+
+.width7_3cols, .grid7_3cols {
+	width: 148px;
+}
+
+.width7_4cols, .grid7_4cols {
+	width: 107px;
+}
+
+.input_width7 {
+	width: 469px;
+}
+
+.width8, .grid8, .span-8 {
+	width: 545px;
+}
+
+.width8_3cols, .grid8_3cols {
+	width: 171px;
+}
+
+.input_width8 {
+	width: 539px;
+}
+
+.width9, .grid9, .span-9 {
+	width: 615px;
+}
+
+.width9_2cols, .grid9_2cols {
+	width: 300px;
+}
+
+.width9_4cols, .grid9_4cols {
+	width: 142px;
+}
+
+.input_width9 {
+	width: 609px;
+}
+
+.width10, .grid10, .span-10 {
+	width: 685px;
+}
+
+.width10_3cols, .grid10_3cols {
+	width: 218px;
+}
+
+.width10_4cols, .grid10_4cols {
+	width: 160px;
+}
+
+.input_width10 {
+	width: 679px;
+}
+
+.width11, .grid11, .span-11 {
+	width: 755px;
+}
+
+.width11_2cols, .grid11_2cols {
+	width: 370px;
+}
+
+.width11_3cols, .grid11_3cols {
+	width: 241px;
+}
+
+.width11_4cols, .grid11_4cols {
+	width: 177px;
+}
+
+.input_width11 {
+	width: 749px;
+}
+
+.width12, .grid12, .span-12 {
+	width: 825px;
+}
+
+.input_width12 {
+	width: 819px;
+}
+
+/* Subdivided grid spaces */
+.emptycols_left1, .prepend-1 {
+	padding-left: 70px;
+}
+
+.emptycols_right1, .append-1 {
+	padding-right: 70px;
+}
+
+.emptycols_left2, .prepend-2 {
+	padding-left: 140px;
+}
+
+.emptycols_right2, .append-2 {
+	padding-right: 140px;
+}
+
+.emptycols_left3, .prepend-3 {
+	padding-left: 210px;
+}
+
+.emptycols_right3, .append-3 {
+	padding-right: 210px;
+}
+
+.emptycols_left4, .prepend-4 {
+	padding-left: 280px;
+}
+
+.emptycols_right4, .append-4 {
+	padding-right: 280px;
+}
+
+.emptycols_left5, .prepend-5 {
+	padding-left: 350px;
+}
+
+.emptycols_right5, .append-5 {
+	padding-right: 350px;
+}
+
+.emptycols_left6, .prepend-6 {
+	padding-left: 420px;
+}
+
+.emptycols_right6, .append-6 {
+	padding-right: 420px;
+}
+
+.emptycols_left7, .prepend-7 {
+	padding-left: 490px;
+}
+
+.emptycols_right7, .append-7 {
+	padding-right: 490px;
+}
+
+.emptycols_left8, .prepend-8 {
+	padding-left: 560px;
+}
+
+.emptycols_right8, .append-8 {
+	padding-right: 560px;
+}
+
+.emptycols_left9, .prepend-9 {
+	padding-left: 630px;
+}
+
+.emptycols_right9, .append-9 {
+	padding-right: 630px;
+}
+
+.emptycols_left10, .prepend-10 {
+	padding-left: 700px;
+}
+
+.emptycols_right10, .append-10 {
+	padding-right: 700px;
+}
+
+.emptycols_left11, .prepend-11 {
+	padding-left: 770px;
+}
+
+.emptycols_right11, .append-11 {
+	padding-right: 770px;
+}
+
+.pull-1 {
+	margin-left: -70px;
+}
+
+.push-1 {
+	margin-right: -70px;
+	margin-left:  18px;
+	float:        right;
+}
+
+.pull-2 {
+	margin-left: -140px;
+}
+
+.push-2 {
+	margin-right: -140px;
+	margin-left:  18px;
+	float:        right;
+}
+
+.pull-3 {
+	margin-left: -210px;
+}
+
+.push-3 {
+	margin-right: -210px;
+	margin-left:  18px;
+	float:        right;
+}
+
+.pull-4 {
+	margin-left: -280px;
+}
+
+.push-4 {
+	margin-right: -280px;
+	margin-left:  18px;
+	float:        right;
+}
@@ -0,0 +1,502 @@
+@import url('grid_12-825-55-15.css');
+
+/*  
+	CSS Reset by Eric Meyer - Released under Public Domain
+    http://meyerweb.com/eric/tools/css/reset/
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend, table,
+caption, tbody, tfoot, thead, tr, th, td {
+	margin:         0;
+	padding:        0;
+	border:         0;
+	outline:        0;
+	font-size:      100%;
+	vertical-align: baseline;
+	background:     transparent;
+}
+
+body {
+	line-height: 1;
+}
+
+ol, ul {
+	list-style: none;
+}
+
+blockquote, q {
+	quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+
+:focus {
+	outline: 0;
+}
+
+ins {
+	text-decoration: none;
+}
+
+del {
+	text-decoration: line-through;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing:  0;
+}
+
+
+body {
+	color:            #000;
+	background-color: #dcdcdc;
+}
+
+a {
+	text-decoration: none;
+	color:           #1883ba;
+}
+
+h1 {
+	font-size:     32px;
+	font-weight:   normal;
+	font-style:    normal;
+	margin-bottom: 18px;
+}
+
+h2 {
+	font-size: 18px;
+}
+
+#container {
+	width:  865px;
+	margin: 0px auto;
+}
+
+
+#header {
+	padding:          20px;
+	font-size:        36px;
+	background-color: #000;
+	color:            #fff;
+}
+
+#header span {
+	color: #666;
+}
+
+#main_content {
+	background-color: #fff;
+	padding:          60px 20px 20px;
+}
+
+
+#footer p {
+	margin:         0;
+	padding-top:    10px;
+	padding-bottom: 50px;
+	color:          #333;
+	font:           10px Arial, sans-serif;
+}
+
+.tabs {
+	width:            100%;
+	height:           31px;
+	background-color: #444;
+}
+
+.tabs li {
+	float:            left;
+	margin:           0;
+	overflow:         hidden;
+	background-color: #444;
+}
+
+.tabs li a {
+	display:         block;
+	color:           #fff;
+	text-decoration: none;
+	font:            bold 11px/11px 'Arial';
+	text-transform:  uppercase;
+	padding:         10px 15px;
+	border-right:    1px solid #fff;
+}
+
+.tabs li a:hover {
+	background-color: #00b3ff;
+
+}
+
+.tabs li.active a {
+	color:            #000;
+	background-color: #fff;
+}
+
+
+div.huge {
+
+	font-size:      300px;
+	line-height:    1em;
+	padding:        0;
+	letter-spacing: -.02em;
+	overflow:       hidden;
+}
+
+div.glyph_range {
+	font-size:   72px;
+	line-height: 1.1em;
+}
+
+.size10 {
+	font-size: 10px;
+}
+
+.size11 {
+	font-size: 11px;
+}
+
+.size12 {
+	font-size: 12px;
+}
+
+.size13 {
+	font-size: 13px;
+}
+
+.size14 {
+	font-size: 14px;
+}
+
+.size16 {
+	font-size: 16px;
+}
+
+.size18 {
+	font-size: 18px;
+}
+
+.size20 {
+	font-size: 20px;
+}
+
+.size24 {
+	font-size: 24px;
+}
+
+.size30 {
+	font-size: 30px;
+}
+
+.size36 {
+	font-size: 36px;
+}
+
+.size48 {
+	font-size: 48px;
+}
+
+.size60 {
+	font-size: 60px;
+}
+
+.size72 {
+	font-size: 72px;
+}
+
+.size90 {
+	font-size: 90px;
+}
+
+
+.psample_row1 {
+	height: 120px;
+}
+
+.psample_row1 {
+	height: 120px;
+}
+
+.psample_row2 {
+	height: 160px;
+}
+
+.psample_row3 {
+	height: 160px;
+}
+
+.psample_row4 {
+	height: 160px;
+}
+
+.psample {
+	overflow: hidden;
+	position: relative;
+}
+
+.psample p {
+	line-height: 1.3em;
+	display:     block;
+	overflow:    hidden;
+	margin:      0;
+}
+
+.psample span {
+	margin-right: .5em;
+}
+
+.white_blend {
+	width:            100%;
+	height:           61px;
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
+	position:         absolute;
+	bottom:           0;
+}
+
+.black_blend {
+	width:            100%;
+	height:           61px;
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
+	position:         absolute;
+	bottom:           0;
+}
+
+.fullreverse {
+	background:    #000 !important;
+	color:         #fff !important;
+	margin-left:   -20px;
+	padding-left:  20px;
+	margin-right:  -20px;
+	padding-right: 20px;
+	padding:       20px;
+	margin-bottom: 0;
+}
+
+
+.sample_table td {
+	padding-top:    3px;
+	padding-bottom: 5px;
+	padding-left:   5px;
+	vertical-align: middle;
+	line-height:    1.2em;
+}
+
+.sample_table td:first-child {
+	background-color: #eee;
+	text-align:       right;
+	padding-right:    5px;
+	padding-left:     0;
+	padding:          5px;
+	font:             11px/12px 'Courier New', Courier, mono;
+}
+
+code {
+	white-space:      pre;
+	background-color: #eee;
+	display:          block;
+	padding:          10px;
+	margin-bottom:    18px;
+	overflow:         auto;
+}
+
+
+.bottom, .last {
+	margin-bottom:  0 !important;
+	padding-bottom: 0 !important;
+}
+
+.box {
+	padding:       18px;
+	margin-bottom: 18px;
+	background:    #eee;
+}
+
+.reverse, .reversed {
+	background: #000 !important;
+	color:      #fff !important;
+	border:     none !important;
+}
+
+#bodycomparison {
+	position:    relative;
+	overflow:    hidden;
+	font-size:   72px;
+	height:      90px;
+	white-space: nowrap;
+}
+
+#bodycomparison div {
+	font-size:   72px;
+	line-height: 90px;
+	display:     inline;
+	margin:      0 15px 0 0;
+	padding:     0;
+}
+
+#bodycomparison div span {
+	font:     10px Arial;
+	position: absolute;
+	left:     0;
+}
+
+#xheight {
+	float:       none;
+	position:    absolute;
+	color:       #d9f3ff;
+	font-size:   72px;
+	line-height: 90px;
+}
+
+.fontbody {
+	position: relative;
+}
+
+.arialbody {
+	font-family: Arial;
+	position:    relative;
+}
+
+.verdanabody {
+	font-family: Verdana;
+	position:    relative;
+}
+
+.georgiabody {
+	font-family: Georgia;
+	position:    relative;
+}
+
+/* @group Layout page
+ */
+
+#layout h1 {
+	font-size:   36px;
+	line-height: 42px;
+	font-weight: normal;
+	font-style:  normal;
+}
+
+#layout h2 {
+	font-size:   24px;
+	line-height: 23px;
+	font-weight: normal;
+	font-style:  normal;
+}
+
+#layout h3 {
+	font-size:   22px;
+	line-height: 1.4em;
+	margin-top:  1em;
+	font-weight: normal;
+	font-style:  normal;
+}
+
+
+#layout p.byline {
+	font-size:     12px;
+	margin-top:    18px;
+	line-height:   12px;
+	margin-bottom: 0;
+}
+
+#layout p {
+	font-size:     14px;
+	line-height:   21px;
+	margin-bottom: .5em;
+}
+
+#layout p.large {
+	font-size:   18px;
+	line-height: 26px;
+}
+
+#layout .sidebar p {
+	font-size:   12px;
+	line-height: 1.4em;
+}
+
+#layout p.caption {
+	font-size:     10px;
+	margin-top:    -16px;
+	margin-bottom: 18px;
+}
+
+/* @end */
+
+/* @group Glyphs */
+
+#glyph_chart div {
+	background-color: #d9f3ff;
+	color:            black;
+	float:            left;
+	font-size:        36px;
+	height:           1.2em;
+	line-height:      1.2em;
+	margin-bottom:    1px;
+	margin-right:     1px;
+	text-align:       center;
+	width:            1.2em;
+	position:         relative;
+	padding:          .6em .2em .2em;
+}
+
+#glyph_chart div p {
+	position:         absolute;
+	left:             0;
+	top:              0;
+	display:          block;
+	text-align:       center;
+	font:             bold 9px Arial, sans-serif;
+	background-color: #3a768f;
+	width:            100%;
+	color:            #fff;
+	padding:          2px 0;
+}
+
+
+#glyphs h1 {
+	font-family: Arial, sans-serif;
+}
+
+/* @end */
+
+/* @group Installing */
+
+#installing {
+	font: 13px Arial, sans-serif;
+}
+
+#installing p,
+#glyphs p {
+	line-height:   1.2em;
+	margin-bottom: 18px;
+	font:          13px Arial, sans-serif;
+}
+
+
+#installing h3 {
+	font-size:  15px;
+	margin-top: 18px;
+}
+
+/* @end */
+
+#rendering h1 {
+	font-family: Arial, sans-serif;
+}
+
+.render_table td {
+	font:           11px 'Courier New', Courier, mono;
+	vertical-align: middle;
+}
+
+
@@ -0,0 +1,36 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 14, 2022 */
+
+
+
+@font-face {
+    font-family: 'mitochondriaregular';
+    src: url('/static/font/mitochondria-webfont.woff2') format('woff2'),
+         url('/static/font/mitochondria-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'pf_ronda_sevenregular';
+    src: url('/static/font/pf_ronda_seven-webfont.woff2') format('woff2'),
+         url('/static/font/pf_ronda_seven-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'pf_ronda_sevenbold';
+    src: url('/static/font/pf_ronda_seven_bold-webfont.woff2') format('woff2'),
+         url('/static/font/pf_ronda_seven_bold-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
@@ -0,0 +1,75 @@
+% rebase('frame.tpl')
+    <div class="content-grid"> 
+        <div class="center"><h1>about blessfrey</h1></div>
+        <div class="jump"><img src="/static/img/prom/BlessFREY_logo.png" alt="(link: BLESSFREY" class="logo">
+                <a href="#demo">play</a> • <a href="#system">system</a> • <a href="#story">story</a> • <a href="#characters">characters</a> • <a href="#info">info</a><br>
+        </div>
+
+        <div class="system" id="system">
+<div class="center"><h2>system</h2>
+<p>Blessfrey is a 2D action rpg with a dual-job system which will determine the skill pool from which you will build your skillbar. Your AI companions will have skillbars of their own to edit, so think in terms of teams in order to defeat bosses and solve puzzles. Barely any class progression decisions are permanent, so you can experiment and express your playstyle. <br></p>
+            <br>
+            <h3>jobs </h3>
+            <p>Blessfrey jobs are equivalent to RPG classes. Your first job is a permanent decision which you will make early in gameplay. You will be able to unlock the rest and more during gameplay as side gigs. You can only have one side gig at a time, but you can always swap it outside of combat areas. <br></p>
+            <br>
+            <p>Each job has its own skill pool. Each skill is assigned to a job trait (similar to an RPG attribute). Each character has a set number of trait points they can use to raise job traits and the effectiveness of their associated skills. You gain more trait points through leveling up, but traits can be raised or lowered at will. Experiment to find your specialization! <br></p>
+            <br>
+            <p>Your first job offers an exclusive trait called a job perk. It is not only tied to the effectiveness of related skills but also provides a constant buff. You can use the skills of your side gig's perk-related skills, but you cannot raise their effectiveness nor gain the buff. Perks are what distinguish characters from each other. <br></p>
+            <br>
+            <h3>skills</h3>
+            <p>Skills are individual powers that modify entities in the world of Blessfrey. They can launch fireballs, protect against incoming damage, spawn items or minions, teleport characters, reveal more UI details, and more. Your skillbar only has 8 skill slots and can only be edited in safe areas. The challenge comes from discovering effective strategies and synergies. Many of the same skills will be available to the player and enemy characters alike, so you must learn how to both use and counter each skill. <br></p>
+            <br>
+            <p>Skills are inspired by Magic: The Gathering keywords. There are a limited number of keywords that are quick to learn, but I will combine them with interesting conditions to create a wide arsenal of options. <br></p>
+            <br>
+            <p>Skills are gained during exploration. As you find new areas, encounter enemies, and interact with your surroundings, you will internalize those experiences as new skills. There are multiple paths to learning, so you are free to focus on your favorite parts of the game. <br></p>
+            <br>
+            <h3>team</h3>
+            <p>You will meet new friends and allies in the world, and they will join your team as customizable AI companions. Edit their skillbars to complement yours and keep their gear up-to-date. They will remember your responses and actions, so stay attentive to the flow of your relationship. There may be consequences - sweet or treacherous. <br></p></div>
+                </div>
+
+                <div class="story" id="story">
+<div class="center"><h2>story</h2>
+            <p>You play as Helia, a foreign transfer student living with her estranged uncle in a rural southern American town. You'll find an inexplicable amount of amenities, but none of them hold a candle to the haunted dungeon beneath the city. It's off-limits, but a dare's a dare. <br></p>
+            <br>
+            <p>There's a whole other world down there with multiple fantastical races. Once you've been down there once, it's hard to avoid getting tangled in its mysteries. <br></p>
+            <br>
+            <p>The town is strange in its own right. Lucrest flourished under it's remarkably young mayor and became an economic oasis in an expanse of farmlands and mining communities, drawing people from out-of-state to enjoy its attractions. Mayor Dia claims to have a magic wand that controls economy, and people aren't inclined to disagree. <br></p></div>
+                </div>
+
+                <div class="characters" id="characters">
+<div class="center"><h2>characters</h2>
+            <p><b><a href="/char/Helia">Helia</a></b> (?/?) - The player character! Where she comes from, combat training is unheard of, so pick a job for her. No one really knows why she had to move from the US so suddenly and all alone. <br></p>
+            <br>
+            <p><b><a href="/char/Angel">Angel</a></b> (Weaponmaster/Hacker) - Her real name's Miriam, but it sounds too frumpy, so please call her Angel. She is a naturally gifted with heavy blades and participates in a competitive swordsman league, but she usually comes across as friendly if not a little absent-minded. Computers interest her deeply, so she's always tinkering away with some new gadget or software. <br></p>
+            <br>
+            <p><b><a href="/char/Tessa">Tessa</a></b> (Tamer/Streetfighter) - She actually has a foreign background, too. Her mom and late father moved with her from France when she was really little. She loves the outdoors, animals, and fashion and is always sticking her nose in everyone's business. She's all fun all the time, so she doesn't always know where the boundary is between playful teasing and outright bullying. <br></p>
+            <br>
+            <p><b><a href="/char/Chloe">Chloe</a></b> (Disciple/Weaponmaster) - She's an orphan girl who was taken in by the church, and she spends a lot of her time serving there. She's reticent and deeply introverted but very sweet to those who get to know her. <br></p>
+            <br>
+            <p><b><a href="/char/Aries">Aries</a></b> (Weaponsmaster/Tamer) - Angel's twin brother, though he's her opposite in many ways. He's more attentive, but his frankness and disregard for etiquette makes him seem boorish. He also takes things with more gravity, fully committing himself to his studies and training. He prefers light weapons, light armor, and practical survival skills. <br></p>
+            <br>
+            <p><b><a href="/char/Night">Night</a></b> (Chemist/Weaponsmaster) - Despite not being much older than the other teens, he's completed a few years of apprenticeships at the leading research hospitals in the capital. The deterioration and death of his grandparents forced his return to close the final paperwork and figure out how to support his baby brother in the meantime. He runs a local pharmacy for now. <br></p>
+            <br>
+            <p><b><a href="/char/Rune">Rune</a></b> (?/?) - A startlingly tall and listless horned boy discovered in the local dungeon, surrounded by dinosaurs and other abyssal beasts. He doesn't trust people from the surface at first. <br></p>
+            <br>
+            <p>More characters are over on the <a href="/characters">characters page</a>. <br></p></div>
+                </div>
+
+                <div class="info" id="info">
+<div class="center"><h2>info</h2>
+            <p>Blessfrey is a singleplayer action RPG game that will be playable in at least Windows, Linux, and HTML5. I'm going to sell it on Steam and wherever else lets me list it. It's being developed by me (chimchooree) in Godot Engine with original writing and art, though I'll need help with music and SFX eventually. (Unless I am an audio savant and don't yet know it?) My husband also helps sometimes, especially with writing plug-ins for the engine.♡ The full credits are available on the <a href="/credits">credits page</a>.<br></p>
+            <br>
+            <h2>timeline</h2>
+            <p>Legless the Cat is the first demo. It has nothing to do with the game, but it's an important exercise for exporting and embedding an HTML5 game. I'd hate to make a sophisticated game over multiple years and be too inexperienced to actually share it with anyone. It also lets my kitty be in his own videogame! So cute. <br></p>
+            <br>
+            <p>As for the first real demo, I am currently creating a vertical slice of the game, focusing on a robust presentation of the skill system. This demo will be more of a tech demo than a game. It will feature 3 demo areas, and you will receive a bingo card directing you to try a smattering of what the full game will have to offer. <br></p>
+            <br>
+            <p>The next demo will demonstrate the game's faction system and AI, presenting more as a cutscene with unpredictable outcomes. A couple of different AI groups will wander around a map, intersect, then attack or aid according to affiliation. The faction system is rather complex, so I need to isolate it for testing purposes. <br></p>
+            <br>
+            <p>I think at this point, I will be able to put out a real demo. Demo #3 is going to be a level from the full game, introducing Rune and his multiphase boss fight. <br></p>
+            <br>
+            <p>If I can do that, I'll definitely be ready to make chunks of the game until the entire thing is complete. <br></p>
+            <br>
+            <p>No hard timeline, though! <br></p></div>
+                </div>
+    </div>
@@ -0,0 +1,6 @@
+% import random
+% rebase('frame.tpl')
+    <div class="content-grid">
+<h1><a href="/gdd">blessfrey gdd</a> - Mercur</h1>
+    <p>All acts of god are attributed to him. His steed is the MessageBus. He is technically an entity. <br></p>
+</div>
@@ -5,7 +5,7 @@
    <p>The vision for Blessfrey <br></p>
    <br>
    <ul>
-        % for i in [["art direction","blessfrey-art"],["characters","blessfrey-cast"],["credits","blessfrey-credits"],["game mechanics","blessfrey-mechanics"],["jobs","blessfrey-jobs"],["keywords","blessfrey-keywords"],["milestones","blessfrey-milestones"],["setting","blessfrey-setting"],["skills","blessfrey-skills"],["sound","blessfrey-sound"],["story","blessfrey-story"],["style guide","style-guide"],["terms","blessfrey-terms"],["tweaks","tweaks"],["vibe","blessfrey-vibe"]]
+        % for i in [["cast","blessfrey-cast"],["credits","blessfrey-credits"],["game mechanics","blessfrey-mechanics"],["IDs","blessfrey-ids"],["jobs","blessfrey-jobs"],["keywords","blessfrey-keywords"],["Mercur","blessfrey-Mercur"],["milestones","blessfrey-milestones"],["setting","blessfrey-setting"],["skills","blessfrey-skills"],["story","blessfrey-story"],["style guide","style-guide"],["terms","blessfrey-terms"],["vibe","blessfrey-vibe"],["website","website"]]:
        <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<a href=/{{i[1]}}>{{i[0]}}</a></li>
        % end
    </ul>
@@ -1,8 +1,8 @@
 % rebase('frame.tpl')
    <div class="content-grid">
-<h1>blessfrey gdd - IDs</h1>
+<h1><a href="/gdd">blessfrey gdd</a> - IDs</h1>
    <h2>description </h2>
-	<p>Entities need IDs for translations (even English is pulled in through the TranslationServer) and comparisons. <br></p>
+	<p>Entities need IDs for serving translations (even English is pulled in through the TranslationServer) and judging comparisons. <br></p>
    <br>
    <h2>structure </h2>
    <h3>translation key </h3>
@@ -39,62 +39,69 @@
        <li>wo - unsorted words, includes game title </li>
    </ul>
    <br>
-    <h3>entity ID </h3>
-    <p>IDs apply to a few other things, but it's virtually only for entities. They are 6-character hexadecimal strings (favoring numbers). I like that they correspond to color hex codes, so I can find out everyone's secret color. Generally, a category's earliest and most representative entities are the purest in hue. <br></p>
+    <h3>base ID </h3>
+    <p>Base IDs apply to a few other things, but it's virtually only for entities. They identify a specific type of entity, not a particular instance of that entity. They are 6-character hexadecimal strings (favoring numbers). I like that they correspond to color hex codes, so I can find out everyone's secret color. Generally, a category's earliest and most representative entities are the purest in hue. <br></p>
    <br>
    <p>The first three digits represent categorization, while the last increment by one for each member within that group. Commons start at 000 and increment numerically, while elites and bosses start at aaa and increment alphabetically. <br></p>
    <ul>
        <li>0 - default </li>
        <li>1 - skill </li>
        <ul>
-            <li>0 - common </li>
+            <li>0 - common 
                <ul>
                    <li>0 - roleplay </li>
                    <li>1 - linguist </li>
                </ul>
-            <li>1 - armsman </li>
+            </li>
+            <li>1 - armsman
                <ul>
                    <li>0 - fitness </li>
                    <li>1 - power </li>
                    <li>2 - artistry </li>
                    <li>3 - tactics </li>
                </ul>
-            <li>2 - disciple </li>
+            </li>
+            <li>2 - disciple
                <ul>
                    <li>0 - santification </li>
                    <li>1 - power over nature </li>
                    <li>2 - spiritual healing </li>
                    <li>3 - divine protection </li>
                </ul>
-            <li>3 - tamer </li>
+            </li>
+            <li>3 - tamer
                <ul>
                    <li>0 - mimicry </li>
                    <li>1 - husbandry </li>
                    <li>2 - empathy </li>
                    <li>3 - survival </li>
                </ul>
-            <li>4 - brawler </li>
+            </li>
+            <li>4 - brawler
                <ul>
                    <li>0 - critical eye </li>
                    <li>1 - dirty fighting </li>
                    <li>2 - improvisation </li>
                    <li>3 - street smarts </li>
                </ul>
-            <li>5 - chemist </li>
+            </li>
+            <li>5 - chemist
                <ul>
                    <li>0 - cognate sciences </li>
                    <li>1 - pharmacology </li>
                    <li>2 - toxicology </li>
                    <li>3 - materials engineering </li>
                </ul>
-            <li>6 - hacker </li>
+            </li>
+            <li>6 - hacker
                <ul>
                    <li>0 - social engineering </li>
                    <li>1 - surveillance </li>
                    <li>2 - robotics </li>
                    <li>3 - gadgetry </li>
                </ul>
-            <li>7 - Mercur </li>
+            </li>
+            <li>7 - Mercur
                <ul>
                    <li>0 - supernal </li>
                    <li>1 - projectile </li>
@@ -102,33 +109,37 @@
                    <li>3 - unlearnable </li>
                    <li>4 - job perk </li>
                </ul>
-            <li>a - tycoon </li>
+            </li>
+            <li>a - tycoon
                <ul>
                    <li>0 - perpetuity/diversified portfolio </li>
                    <li>1 - negotiation </li>
                    <li>2 - deceptive marketing </li>
                    <li>3 - invisible hand </li>
                </ul>
-            <li>b - traffic control </li>
+            </li>
+            <li>b - traffic control
                <ul>
                    <li>0 - extraplanar refuge </li>
                    <li>1 - footwork </li>
                    <li>2 - alteration/landscaping </li>
                    <li>3 - networking </li>
                </ul>
+            </li>
        </ul>
-        <li>2 - character (next digits indicate job and whether it offers a service) </li>
+        <li>2 - character (next digits indicate job and whether it offers a service)
            <ul>
                <li>0 - dungeon girls </li>
-                <li>1 - boss </li>
+                <li>1 - boss
                    <ul>
                        <li>the second digit is its species then the other stuff </li>
                    </ul>
+                </li>
                <li>2 - human </li>
                <li>3 - Canaanite </li>
-                <li>4 - beast </li>
+                <li>4 - beast
                    <ul>
-                        <li>0 - mammal </li>
+                        <li>0 - mammal
                            <ul>
                                <li>0 - unsorted </li>
                                <li>1 - rodent/bat/eulipotyphian </li>
@@ -137,48 +148,56 @@
                                <li>4 - bear </li>
                                <li>5 - ungulate </li>
                            </ul>
+                        </li>
                        <li>1 - bird </li>
                        <li>2 - reptile </li>
                        <li>3 - amphibian </li>
-                        <li>0 - fish </li>
-                        <li>4 - bug </li>
+                        <li>4 - fish </li>
+                        <li>5 - bug </li>
                    </ul>
+                </li>
                <li>5 - slime </li>
                <li>6 - construct </li>
-                <li>7 - Mercurians </li>
+                <li>7 - Mercurians
                    <ul>
                        <li>0 - avatar </li>
                        <li>1 - projectile </li>
                    </ul>
+                </li>
                <li>8 - machine </li>
            </ul>
-        <li>3 - item </li>
+        </li>
+        <li>3 - item
            <ul>
                <li>0 - currency </li>
                <li>1 - quest item </li>
-                <li>2 - equipment </li>
+                <li>2 - equipment
                    <ul>
                        <li>0 - weapon </li>
                        <li>1 - gear </li>
-                    <ul>
-                <li>3 - consumable </li>
+                    </ul>
+                </li>
+                <li>3 - consumable
                    <ul>
                        <li>0 - food/medicine </li>
                        <li>1 - item generator </li>
                    <ul>
+                </li>
                <li>4 - flyer/book </li>
                <li>5 - container </li>
                <li>6 - upgrade/constant code/automatic effect </li>
                <li>7 - key </li>
                <li>8 - trinket </li>
            </ul>
-        <li>4 - location (followed by 0 - safe zone, 1 - combat zone) </li>
+        </li>
+        <li>4 - location (followed by 0 - safe zone, 1 - combat zone)
            <ul>
-                <li>0 - nowhere </li>
+                <li>0 - nowhere
                    <ul>
                        <li>0 - test </li>
                        <li>1 - bingo demo </li>
                    <ul>
+                </li>
                <li>1 - subdivision </li>
                <li>2 - school </li>
                <li>3 - commercial district </li>
@@ -193,18 +212,21 @@
                <li>c - serpent city </li>
                <li>d - firewall </li>
            </ul>
-        <li>5 - app </li>
+        </li>
+        <li>5 - app
            <ul>
                <li>0 - stock </li>
                <li>1 - optional </li>
            </ul>
-        <li>6 - activator </li>
+        </li>
+        <li>6 - activator
            <ul>
                <li>0 - chest </li>
                <li>1 - button/switch </li>
                <li>2 - sign/lectern </li>
            </ul>
-        <li>7 - job/ </li>
+        </li>
+        <li>7 - job
            <ul>
                <li>0aaaa - idle </li>
                <li>1aaaa - armsman </li>
@@ -217,16 +239,23 @@
                <li>a0000 - tycoon </li>
                <li>b0000 - traffic control </li>
            </ul>
-        <li>8 - perk/attribute </li>
+        </li>
+        <li>8 - perk/attribute
            <ul>
                <li>matches the skill section's job & attribute values </li>
            </ul>
-        <li>9 - keyword </li>
+        </li>
+        <li>9 - keyword
            <ul>
                <li>0 - primitive </li>
                <li>1 - status effect </li>
                <li>2 - unsorted </li>
            </ul>
+        </li>
    </ul>
+    <br>
+    <h3>ref ID </h3>
+    <p>Every entity with the base.gd script has a ref ID. It identifies a specific instance of an entity. The MessageBus assigns them sequentially as integers starting at 0 during the <span class="code">_ready</div> stage of each entity. The earlier the ref ID, the older the entity. <br></p>
+    <br>
 </div>

@@ -0,0 +1,7 @@
+% import random
+% rebase('frame.tpl')
+    <div class="content-grid">
+<h1><a href="/gdd">blessfrey gdd</a> - jobs</h1>
+    <p>There are six standard jobs available to the player, but more can be discovered in the Abyss. <br></p>
+</div>
+
@@ -0,0 +1,7 @@
+% import random
+% rebase('frame.tpl')
+    <div class="content-grid">
+<h1><a href="/gdd">blessfrey gdd</a> - keywords</h1>
+    <p>Keywords are the building blocks of skills. <br></p>
+</div>
+
@@ -1,14 +1,35 @@
 % rebase('frame.tpl')
    <div class="content-grid">
-<h1>blessfrey gdd - game mechanic - inspect menu</h1>
+<h1><a href="/gdd">blessfrey gdd</a> - <a href="blessfrey-mechanics">game mechanic</a> - inspect menu</h1>
    <h2>description </h2>
 	<p>Right-click on an tangible entity or inventory item to open a popup inspect menu with all relevant inspect options. Selecting one will execute a method. Examples are 'follow Chloe' (pathfind after Chloe wherever she moves until action is cancelled), 'pick up clover' (item pickup), and 'examine button' (write a descriptive line about her in Helia's thought bubble) <br></p>
    <br>
    <h2>structure </h2>
-    <p>Every tangible entity has an exported array of inspect_options. {'english_tr_key': 'method', 'tr_pick up':'pickup','tr_examine':'examine_surprise'}. Every tangible has at least 'examine.' <br></p>
+    <p>Every tangible entity has an exported dictionary of inspect_options: {index: ['tr_key', 'method']}. For example, {0:['tr_pick up','pickup'],1:['tr_extinguish','extinguish']}. Every tangible appends 'examine' at ready. <br></p>
+    <br>
+    <p>The Clickable has a _ready input event signal looking for "right-click." <br></p>
+    <br>
+    <p>The inspect menu ("res://UI/InspectMenu/InspectMenu.tscn") is instanced at declaration and added as a child at ready in the UI singleton. <br></p>
    <br>
    <h2>logic </h2>
-    <p>When tangible entity is right-clicked, the inspect menu adds a UI option for each inspect option.  <br></p>
-    <br>When a selection is made, 
+    <p>When tangible entity is right-clicked (@ $Body/Sprite/Clickable), the UI enters InspectMenu with its subject set. The "id_pressed" signal is reset for each subject. InspectMenu connects "about_to_show" the first time it's needed and keeps it forever. Before popup(), it resets, adds a label at an offset with the subject's display name, then adds a UI option for each inspect option. <br></p>
+    <br>
+    <p>When a selection is made, the "id_pressed" signal calls "id_pressed" on the subject, which calls the method at its inspect_options[pressed_id][1]. So 'examine' calls 'examine,' which is in tangible.gd. Most related methods are on tangible.gd, though they may be at a more specific script. <br></p>
+    <br>
+    <h2>challenges/known issues </h2>
+    <p>It's not obvious how to get popupmenus to appear at specific coordinates. I get it to appear at the subject's current location by setting <code>rect_global_position = get_global_mouse_position()</code> the line immediately after <code>popup()</code>. <br></p>
+    <br>
+    <p>The inspect menu retains the largest ever size going forward. I reset the size to 20,20 when clearing previous options. <br></p>
+    <br>
+    <p>Tangibles and inventory items both have inspect menus, but their code has to be separate. They are too different from each other. <br></p>
+    <br>
+    <h2>works for...</h2>
+    <ul>
+        <li>player✓ </li>
+        <li>characters✓ </li>
+        <li>characters✓ </li>
+        <li>activators✗ </li>
+        <li>floor items✗ </li>
+        <li>inventory items✗ </li>
+    </ul>
 </div>
-
@@ -5,6 +5,8 @@
    <p>documenting Blessfrey game mechanics<br></p>
    <br>
    <ul>
-        <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<a href=/inspect>inspect menu</a></li>
+        % for i in [["inspect menu","blessfrey-inspect"],["jobs","blessfrey-jobs"],["keywords","blessfrey-keywords"],["skills","blessfrey-skills"]]:
+        <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<a href=/{{i[1]}}>{{i[0]}}</a></li>
+        % end
    </ul>
    </div></div>
@@ -0,0 +1,7 @@
+% import random
+% rebase('frame.tpl')
+    <div class="content-grid">
+<h1><a href="/gdd">blessfrey gdd</a> - setting</h1>
+    <p>Blessfrey takes place in Lucrest, Nickajack, a small town unknowingly situated over an abyssal dungeon. <br></p>
+</div>
+
@@ -0,0 +1,7 @@
+% import random
+% rebase('frame.tpl')
+    <div class="content-grid">
+<h1><a href="/gdd">blessfrey gdd</a> - skills</h1>
+    <p>Skills are individual powers usable by entities. They can take 8 at a time on their skillbar. They can be used for combat, puzzle-solving, and roleplaying. They are acquired through exploring. <br></p>
+</div>
+
@@ -0,0 +1,7 @@
+% import random
+% rebase('frame.tpl')
+    <div class="content-grid">
+<h1><a href="/gdd">blessfrey gdd</a> - story</h1>
+    <p>Helia explores the Abyss with her friends. <br></p>
+</div>
+
@@ -0,0 +1,6 @@
+% rebase('frame.tpl')
+    <div class="content-grid">
+<h1>blessfrey gdd - dictionary of terms</h1>
+	<p>Definitions of technical terms will go here. </p>
+</div>
+
@@ -15,7 +15,7 @@
    </ul>
    <br>
    <p>The other goofiest place I've seen this juxtaposition pop up is that frame of some Avengers movie where the heroes are just hanging out at a normal restaurant. Some Quora guy claims the scene was popular, and I'll take his word for it. The overly dramatic, max stakes stuff isn't always as interesting as seeing what these fantasy people do during their down-time. My husband always thinks it's really funny to imagine the big bad of various series doing something really normal like eating ice cream. <br></p>
-    <img src="/static/img/gdd/avengers.jpeg" alt="(stolen screenshot of the Avengers eating at a casual restaurant in full costumes: fun fact #2815: Marvel's The Avengers movie caused shawarma sales to SKYROCKET nationwide)"><br>
+    <!--<img src="/static/img/gdd/avengers.jpeg" alt="(stolen screenshot of the Avengers eating at a casual restaurant in full costumes: fun fact #2815: Marvel's The Avengers movie caused shawarma sales to SKYROCKET nationwide)"><br>-->
    <br>
 <h2>socializing </h2>
    <p>I like those 'group of kids save the world' shows like Code Lyoko, Winx Club, and W.I.T.C.H and would like to emulate that balance of otherworld exploration and heroics against hanging out and maintaining responsibilities at school and home. <br></p>
@@ -20,68 +20,87 @@ license: <a href="https://github.com/nathanhoad/godot_dialogue_manager/blob/main
 <h2>music </h2>
 background music: "straight" <br>
 Benjamin "Bensound" Tissot<br>
-https://www.bensound.com/royalty-free-music/track/straight<br>
+<a href="https://www.bensound.com/royalty-free-music/track/straight">https://www.bensound.com/royalty-free-music/track/straight</a><br>
 license: Creative Commons License<br>
 <br>
 background music: "energy" <br>
 Benjamin "Bensound" Tissot<br>
-https://www.bensound.com/royalty-free-music/track/energy<br>
+<a href="https://www.bensound.com/royalty-free-music/track/energy">https://www.bensound.com/royalty-free-music/track/energy</a><br>
 license: Creative Commons License<br>
 <br>
 <h2>sound effects </h2>
 background music: "save"<br>
 LokiF<br>
-https://opengameart.org/content/gui-sound-effects<br>
+<a href="https://opengameart.org/content/gui-sound-effects">https://opengameart.org/content/gui-sound-effects</a><br>
 license: Public Domain CC0<br>
 <br>
 door sound: "Abandoned Villa- Thailand! Door Knocker & Door Knocking Sound Effects"<br>
-freetousesounds https://freetousesounds.bandcamp.com/album/abandoned-villa-thailand-door-knocker-door-knocking-sound-effects<br>
+freetousesounds <br>
+<a href="https://freetousesounds.bandcamp.com/album/abandoned-villa-thailand-door-knocker-door-knocking-sound-effects">https://freetousesounds.bandcamp.com/album/abandoned-villa-thailand-door-knocker-door-knocking-sound-effects</a><br>
 license: Attribution 3.0 Unported (CC BY 3.0) <br>
 <br>
 click sound: "Click 1" from the UI SFX set<br>
 Kenney Vleugels<br>
-https://www.kenney.nl/assets/ui-audio<br>
+<a href="https://www.kenney.nl/assets/ui-audio">https://www.kenney.nl/assets/ui-audio</a><br>
 license: Public Domain CC0<br>
 <br>
 wrong sound: "Wrong 02"<br>
-https://www.noiseforfun.com/2012-sound-effects/wrong-02/<br>
+<a href="https://www.noiseforfun.com/2012-sound-effects/wrong-02/">https://www.noiseforfun.com/2012-sound-effects/wrong-02/</a><br>
 license: CC-BY-ND 3.0 Attribution license<br>
 <br>
 skill failure sound: "Negative" from the GUI Sound Effects set<br>
 LokiF<br>
-https://opengameart.org/content/gui-sound-effects<br>
+<a href="https://opengameart.org/content/gui-sound-effects">https://opengameart.org/content/gui-sound-effects</a><br>
 license: Public Domain CC0<br>
 <br>
 appraise sound: "Shimmer Glimmer Magic"<br>
 The Berklee College of Music <br>
 submitted to Open Game Art by qubodup<br>
-https://opengameart.org/content/shimmer-glitter-magic<br>
+<a href="https://opengameart.org/content/shimmer-glitter-magic">https://opengameart.org/content/shimmer-glitter-magic</a><br>
 license: CC-BY 3.0<br>
 <br>
 summon sound: "Elemental Spell"<br>
 Iwan "qubodup" Gabovitch<br>
-https://opengameart.org/content/elemental-spell<br>
+<a href="https://opengameart.org/content/elemental-spell">https://opengameart.org/content/elemental-spell</a><br>
 license: CC Attribution-ShareAlike 3.0 Unported<br>
-Copyright 2012 Iwan 'qubodup' Gabovitch http://qubodup.net qubodup@gmail.com | License: CC Attribution-ShareAlike 3.0 Unported http://creativecommons.org/licenses/by-sa/3.0/<br>
+Copyright 2012 Iwan 'qubodup' Gabovitch <a href="http://qubodup.net">http://qubodup.net</a> qubodup@gmail.com | License: <a href="http://creativecommons.org/licenses/by-sa/3.0/">CC Attribution-ShareAlike 3.0 Unported http://creativecommons.org/licenses/by-sa/3.0/</a><br>
 <br>
 bingo win sound: "Positive"<br>
 Lokif<br>
-https://opengameart.org/content/gui-sound-effects<br>
+<a href="https://opengameart.org/content/gui-sound-effects">https://opengameart.org/content/gui-sound-effects</a><br>
 license: Public Domain CC0<br>
 <br>
 <h2>fonts </h2>
 font: JFドットjiskan16 (JF Dot Jiskan16)<br>
 Sony Corp<br>
-http://jikasei.me/font/jf-dotfont/<br>
+<a href="http://jikasei.me/font/jf-dotfont/">http://jikasei.me/font/jf-dotfont/</a><br>
 license: Public Domain, stored in art/Fonts/Documentation/JF Dot Jiskan16/readme.txt<br>
 <br>
 font: pixel joy<br>
 chimchooree<br>
-https://fontstruct.com/fontstructions/show/1596262/pixel-joy <br>
+<a href="https://fontstruct.com/fontstructions/show/1596262/pixel-joy">https://fontstruct.com/fontstructions/show/1596262/pixel-joy</a> <br>
 license: Public Domain<br>
 <br>
 font: pixel sparrow<br>
 chimchooree<br>
+<a href="https://fontstruct.com/fontstructions/show/1491726/pixel-sparrow">https://fontstruct.com/fontstructions/show/1491726/pixel-sparrow</a> <br>
 license: Public Domain<br>
+<br>
+<h2>website </h2>
+<a href="https://bottlepy.org/docs/dev/">web framework: Bottle</a> <br>
+Marcel Hellkamp <br>
+license : <a href="https://bottlepy.org/docs/dev/">MIT License</a> <br>
+<br>
+Embedded applications are probably hosted through <a href="https://itch.io/">itch.io</a>. <br>
+<br>
+font: Mitochondria<br>
+Dino Raz<br>
+<a href="https://www.dafont.com/mitochondria.font">https://www.dafont.com/mitochondria.font</a> <br>
+license: 100% Free<br>
+<br>
+font: PF Ronda Seven<br>
+Yusuke Kamiyamane<br>
+<a href="https://p.yusukekamiyamane.com/fonts/">https://p.yusukekamiyamane.com/fonts/</a> <br>
+license: Free for any personal or commercial projects<br>
 </div>
 </div>
@@ -1,91 +1,11 @@
 % rebase('frame.tpl')
    <div class="content-grid"> 
-        <div class="jump"><img src="/static/img/prom/BlessFREY_logo.png" alt="(link: BLESSFREY" class="logo">
-                <a href="#demo">play</a> • <a href="#system">system</a> • <a href="#story">story</a> • <a href="#characters">characters</a> • <a href="#info">info</a><br>
-        </div>
-
-        <div class="long">
-
-            <div class="demo" id="demo">
-            <div class="center"><h2>no-legs the cat</h2></div>
-
-            <div class="demo-game">
+        <div class="edition"><div class="center"><h1>no-legs the cat</h1></div></div>
+        <div class="demo">
            <iframe src="https://itch.io/embed-upload/6141043?color=333333" allowfullscreen="" width="1024" height="620" frameborder="0"><a href="https://chimchooree.itch.io/legless-the-cat">Play Legless the Cat on itch.io</a></iframe><br>
        </div>
-            <div class="demo-intro"><p>Poltics Cat lost his legs!! Push him around using WASD to find them. Eat any breakfasts you can find along the way! <br></p>
+        <div class="guide"><p>Poltics Cat lost his legs!! Push him around using WASD to find them. Eat any breakfasts you can find along the way! <br></p>
            <br>
            <p>(In case it isn't obvious, this is a crude maze constructed from the infamous 'godot heads'. Click the game to make it active then control kitty using W A S D or arrow keys to find all three breakfasts and his missing legs. His breakfast counter is in the top-right corner. After you win, you can continue to wander the maze aimlessly. Refresh the page to start over.) <br></p>
        </div>
    </div>
-
-                <div class="system" id="system">
-<div class="center"><h2>system</h2>
-<p>Blessfrey is a 2D action rpg with a dual-job system which will determine the skill pool from which you will build your skillbar. Your AI companions will have skillbars of their own to edit, so think in terms of teams in order to defeat bosses and solve puzzles. Barely any class progression decisions are permanent, so you can experiment and express your playstyle. <br></p>
-            <br>
-            <h3>jobs </h2>
-            <p>Blessfrey jobs are equivalent to RPG classes. Your first job is a permanent decision which you will make early in gameplay. You will be able to unlock the rest and more during gameplay as side gigs. You can only have one side gig at a time, but you can always swap it outside of combat areas. <br></p>
-            <br>
-            <p>Each job has its own skill pool. Each skill is assigned to a job trait (similar to an RPG attribute). Each character has a set number of trait points they can use to raise job traits and the effectiveness of their associated skills. You gain more trait points through leveling up, but traits can be raised or lowered at will. Experiment to find your specialization! <br></p>
-            <br>
-            <p>Your first job offers an exclusive trait called a job perk. It is not only tied to the effectiveness of related skills but also provides a constant buff. You can use the skills of your side gig's perk-related skills, but you cannot raise their effectiveness nor gain the buff. Perks are what distinguish characters from each other. <br></p>
-            <br>
-            <h3>skills</h2>
-            <p>Skills are individual powers that modify entities in the world of Blessfrey. They can launch fireballs, protect against incoming damage, spawn items or minions, teleport characters, reveal more UI details, and more. Your skillbar only has 8 skill slots and can only be edited in safe areas. The challenge comes from discovering effective strategies and synergies. Many of the same skills will be available to the player and enemy characters alike, so you must learn how to both use and counter each skill. <br></p>
-            <br>
-            <p>Skills are inspired by Magic: The Gathering keywords. There are a limited number of keywords that are quick to learn, but I will combine them with interesting conditions to create a wide arsenal of options. <br></p>
-            <br>
-            <p>Skills are gained during exploration. As you find new areas, encounter enemies, and interact with your surroundings, you will internalize those experiences as new skills. There are multiple paths to learning, so you are free to focus on your favorite parts of the game. <br></p>
-            <br>
-            <h3>team</h2>
-            <p>You will meet new friends and allies in the world, and they will join your team as customizable AI companions. Edit their skillbars to complement yours and keep their gear up-to-date. They will remember your responses and actions, so stay attentive to the flow of your relationship. There may be consequences - sweet or treacherous. <br></p></div>
-                </div>
-
-                <div class="story" id="story">
-<div class="center"><h2>story</h2>
-            <p>You play as Helia, a foreign transfer student living with her estranged uncle in a rural southern American town. You'll find an inexplicable amount of amenities, but none of them hold a candle to the haunted dungeon beneath the city. It's off-limits, but a dare's a dare. <br></p>
-            <br>
-            <p>There's a whole other world down there with multiple fantastical races. Once you've been down there once, it's hard to avoid getting tangled in its mysteries. <br></p>
-            <br>
-            <p>The town is strange in its own right. Lucrest flourished under it's remarkably young mayor and became an economic oasis in an expanse of farmlands and mining communities, drawing people from out-of-state to enjoy its attractions. Mayor Dia claims to have a magic wand that controls economy, and people aren't inclined to disagree. <br></p></div>
-                </div>
-
-                <div class="characters" id="characters">
-<div class="center"><h2>characters</h2>
-            <p><b><a href="/char/Helia">Helia</a></b> (?/?) - The player character! Almost every job is available to her. Where she comes from, combat training is unheard of, so she's a blank slate. Her reasons for suddenly moving countries by herself at the end of a schoolyear are filled with holes, so rumors spread ahead of her arrival. Barely anyone moves to Lucrest, though, so most people are excited to meet the new girl. <br></p>
-            <br>
-            <p><b><a href="/char/Angel">Angel</a></b> (Weaponmaster/Hacker) - Her real name's Miriam, but it sounds too frumpy, so please call her Angel. She is a naturally gifted with heavy blades and participates in a competitive swordsman league, but she usually comes across as friendly if not a little absent-minded. Computers interest her deeply, so she always has tinkering away with some new gadget or software. <br></p>
-            <br>
-            <p><b><a href="/char/Tessa">Tessa</a></b> (Tamer/Streetfighter) - She actually has a foreign background, too. Her mom and late father moved with her from France when she was really little. She loves the outdoors, animals, and fashion and is always sticking her nose in everyone's business. She's all fun all the time, so she doesn't always know where the boundary is between playful teasing and outright bullying. <br></p>
-            <br>
-            <p><b><a href="/char/Chloe">Chloe</a></b> (Disciple/Weaponmaster) - She's an orphan girl who was taken in by the church, and she spends a lot of her time serving there. She's reticent and deeply introverted but very sweet to those who get to know her. <br></p>
-            <br>
-            <p><b><a href="/char/Aries">Aries</a></b> (Weaponsmaster/Tamer) - Angel's twin brother, though he's her opposite in many ways. He's more attentive, but his frankness and disregard for etiquette makes him seem boorish. He also takes things with more gravity, fully committing himself to his studies and training. He prefers light weapons, light armor, and practical survival skills. <br></p>
-            <br>
-            <p><b><a href="/char/Night">Night</a></b> (Chemist/Weaponsmaster) - Despite not being much older than the other teens, he's completed a few years of apprenticeships at the leading research hospitals in the capital. The deterioration and death of his grandparents forced his return to close the final paperwork and figure out how to support his baby brother in the meantime. He runs a local pharmacy for now. <br></p>
-            <br>
-            <p><b><a href="/char/Rune">Rune</a></b> (?/?) - A startlingly tall and listless horned boy discovered in the local dungeon, surrounded by dinosaurs and other abyssal beasts. He doesn't trust people from the surface at first. <br></p>
-            <br>
-            <p>More characters are over on the <a href="/characters">characters page</a>. <br></p></div>
-                </div>
-
-                <div class="info" id="info">
-<div class="center"><h2>info</h2>
-            <p>Blessfrey is a singleplayer action RPG game that will be playable in at least Windows, Linux, and HTML5. I'm going to sell it on Steam and wherever else lets me list it. It's being developed by me (chimchooree) in Godot Engine with original writing and art, though I'll need help with music and SFX eventually. My husband also helps sometimes, especially with writing plug-ins for the engine.♡ The full credits are available on the <a href="/credits">credits page</a>.<br></p>
-            <br>
-            <h2>timeline</h2>
-            <p>Legless the Cat is the first demo. It has nothing to do with the game, but it's an important exercise for exporting and embedding an HTML5 game. I'd hate to make a sophisticated game over multiple years and be too inexperienced to actually share it with anyone. It also lets my kitty be in his own videogame! So cute. <br></p>
-            <br>
-            <p>As for the first real demo, I am currently creating a vertical slice of the game, focusing on a robust presentation of the skill system. This demo will be more of a tech demo than a game. It will feature 3 demo areas, and you will receive a bingo card directing you to try a smattering of what the full game will have to offer. <br></p>
-            <br>
-            <p>The next demo will demonstrate the game's faction system and AI, presenting more as a cutscene with unpredictable outcomes. A couple of different AI groups will wander around a map, intersect, then attack or aid according to affiliation. The faction system is rather complex, so I need to isolate it for testing purposes. <br></p>
-            <br>
-            <p>I think at this point, I will be able to put out a real demo. Demo #3 is going to be a level from the full game, introducing Rune and his multiphase boss fight. <br></p>
-            <br>
-            <p>If I can do that, I'll definitely be ready to make chunks of the game until the entire thing is complete. <br></p>
-            <br>
-            <p>No hard timeline on this, though! I've been working for years and finally am about ready to have something to show for it. Gamedev has been a deep learning experience, and I'm looking forward to sharing my results with you. <br></p></div>
-                </div>
-        </div>
-
-    </div>
-
@@ -89,7 +89,7 @@

            <div class="diary-pages">

-    <h1>chimchooree's diary</h2>
+    <span class=title><h1>diary</h1></span>
                % for s in snippets[page * limit:page * limit + limit]:
                <div class="snippet">
                    <div class="snippet-title">
@@ -1,5 +1,35 @@
 % import random
-<!--Footer-->
-    <footer>
-        <a href=/milestones>milestones</a> {{random.choice(['.','•','☆','★'])}} <a href=/gdd>game design document</a> {{random.choice(['.','•','☆','★'])}} <a href=/blessfrey-presskit>presskit</a> {{random.choice(['.','•','☆','★'])}} &#169; chimchooree 2020-{{year}}<br>
-    </footer>
+<footer><div class="footer-grid">
+    <div class="nav"><div class="heart"></div><div class="nav-grid">
+        <div class="nav-diary">
+            <a href="/diary">
+            <div class="navbutton"><img src="/static/img/nav/diary.png" alt="(link: diary)"></div>
+            <div class="navlink">diary</div>
+            </a>
+        </div>
+
+        <div class="nav-play">
+            <a href="/demo">
+            <div class="navbutton"><img src="/static/img/nav/play.png" alt="(link: play)"></div>
+            <div class="navlink">play</div>
+            </a>
+        </div>
+
+        <div class="nav-about">
+            <a href="/about">
+            <div class="navbutton"><img src="/static/img/nav/about.png" alt="(link: about)"></div>
+            <div class="navlink">about</div>
+            </a>
+        </div>
+
+        <div class="nav-dev">
+            <a href="/dev">
+            <div class="navbutton"><img src="/static/img/nav/dev.png" alt="(link: dev)"></div>
+            <div class="navlink">dev</div>
+            </a>
+        </div>
+    </div><div class="star"></div></div>
+    <div class="links">
+        .      •        . <a href=/milestones>milestones</a> {{random.choice(['.','•','☆','★'])}} <a href=/gdd>game design document</a> {{random.choice(['.','•','☆','★'])}} <a href=/blessfrey-presskit>presskit</a> {{random.choice(['.','•','☆','★'])}} &#169; chimchooree 2020-{{year}} ☆            ..   .  <br>
+    </div>
+</div></footer>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
chimchooree	4a261ace16	this one, not the first	2022-10-25 23:46:39 -05:00
chimchooree	a213287a5d	added stars	2022-10-16 00:14:48 -05:00
Mimi Momo	b8021ae5a6	gdd	2022-10-15 22:57:57 -05:00
chimchooree	25b9472322	tweaks	2022-10-15 12:05:53 -05:00
chimchooree	f96e8fe46a	update credits	2022-10-14 16:12:50 -05:00
chimchooree	e5db10fdcf	added webfonts	2022-10-14 15:47:01 -05:00
chimchooree	8b5c5f7c1a	small fixes to rest of pages linked through site	2022-10-14 14:36:03 -05:00
chimchooree	f739443483	small fixes to every page - stopped on gdd	2022-10-14 11:56:16 -05:00
Mimi Momo	72504d4d4b	eiris push	2022-10-13 23:58:30 -05:00
chimchooree	9516e53238	grid push	2022-10-13 21:42:39 -05:00
chimchooree	9676954861	navbar looks like skillbar; lots of bugs fixed; maybe gets too big at full-screen at 1080p	2022-10-13 21:21:24 -05:00
chimchooree	36ac84cc5a	working towards new design with bottom nav bar; not quite there	2022-10-13 01:29:49 -05:00
chimchooree	4832391111	about page is just static art now	2022-10-12 15:24:50 -05:00
chimchooree	87e7ca4c9e	fixing up gdd; inspect; fall palette	2022-10-10 20:53:54 -05:00
chimchooree	4b3d770985	working on graphics, gdd inspect menu	2022-10-10 16:13:23 -05:00