initial

3 years ago · dcb2bc825d
71 changed files with 6533 additions and 0 deletions
--- a/android-chrome-192x192.png
+++ b/android-chrome-192x192.png
--- a/android-chrome-512x512.png
+++ b/android-chrome-512x512.png
--- a/apple-touch-icon.png
+++ b/apple-touch-icon.png
--- a/favicon-16x16.png
+++ b/favicon-16x16.png
--- a/favicon-32x32.png
+++ b/favicon-32x32.png
--- a/favicon.ico
+++ b/favicon.ico
--- a/game/colours.md
+++ b/game/colours.md
@ -0,0 +1,49 @@
				@@ -0,0 +1,49 @@
+title: Pretty Colours
+date: 17-07-2020
+
+I've been able to put some more hours into this project now that I'm on holidays
+from uni, so my 2D cave background graphic now comes with colours. 
+
+![](/media/img1.png)
+
+Most of this work was tieing together the [colour code](https://git.topost.net/alistair/c-colours) 
+that I wrote a couple of weeks
+ago[^1]. It lets me pick a random RGB colour, convert it to hsl and then rotate
+however many degrees around the colour wheel. I also added some luminance
+variation. It probably bears a bit more experimentation but I'm pleased with how
+it turned out already.
+
+[^1]: The hard part of this was converting HSL to RBG but it turns out that 
+  Wikipedia really is fantastic for explaining these sorts of algorithms 
+  (and providing free pseudocode). I went overboard and
+  implemented conversion between any of RBG HSL and HSV. I was so excited that I
+  then [rewrote](https://git.topost.net/alistair/colcat) 
+  [lolcat](https://github.com/busyloop/lolcat/) using my library.
+
+![](/media/img2.png)
+
+I also rewrote the prototype level generator with the goal that it would be
+possible to stream levels piece-by-piece so that they are effectively infinite
+but I put that on the backburner in favour of just jumping to a new level after
+a certain distance. Partly because it was much faster to get working, and also
+because it allows me to change the colour pallete more frequently.
+
+The levels are still generated using a level seed, which determines the terrain
+and colour pallete. However now it must be of finite length and has to be loaded 
+entirely into memory. The world generation is nothing fancy. Just a random walk. 
+
+As you can probably see the player-character (purple square) is quite lacking, I
+unfortunately have no idea what to do about that. Admittedly, one of the nice 
+things about c is technical difficulties usually mean my productivity is always 
+far more limiting than my very limited creativity.
+
+I still need to get the grappling hook working again, write code to free all
+the level memory when neccessary, and re-write the world object manager. It is
+currently impossible to remove objects from the world once they are added.
+Performance is also becoming a problem. The background is drawn entirely with
+SDLDrawLine, and does a lot of calculations on the cpu every frame in order to 
+interpolate walls. My algorithms are generally inefficient but hey, dont optimise
+prematurely right? Physics tick time is getting to the point where the simulation 
+starts breaking. Maybe its time.
+
+I am also yet to add any audio. I think I'll do that first.
--- a/game/game.md
+++ b/game/game.md
@ -0,0 +1,36 @@
				@@ -0,0 +1,36 @@
+---
+title: Game
+date: 11-06-2020
+
+I've been working on a simple physics game in C for about a year now.
+
+It's been a really enjoyable project to work on in pieces every now and again. 
+I hope to at some point implement procedurally generated levels, and some 
+tangible gameplay challenges but that is subject to further game design decisions.
+
+Up until now I've mainly been 
+interested in getting the physics system working, and just used SDL2 lines and 
+shapes to illustrate what is happening. I'm not sure I want to go and learn 
+OpenGL, but I think it might be time to make it look a bit nicer. 
+
+My immediate plan is to improve the graphical presentation, keeping the flat-shaded
+shapes though for stylistic reasons. To that end I wrote this 
+[colour manipulation code](https://git.topost.net/alistair/c-colours) as a 
+start for creating analagous colour palettes.
+
+What with University I don't have time to go into details, so here's a little 
+demo:
+
+```{=html}
+ <video width=100% autoplay loop>
+  <source src="https://alistairmichael.com/media/coolfungame.mp4" type="video/mp4">
+</video> 
+
+ <video width=100% autoplay loop>
+  <source src="https://alistairmichael.com/media/gamebounce.mp4" type="video/mp4">
+</video> 
+```
+
+
+[Source code](https://git.topost.net/alistair/space_game)
+
--- a/game/index.md
+++ b/game/index.md
@ -0,0 +1,14 @@
				@@ -0,0 +1,14 @@
+---
+title: Game
+
+A little arcade-style PC game written in C, using libSDL2. 
+
+
+![](/media/game3.png)
+
+[source code](https://git.topost.net/alistair/space_game)
+
+### Posts
+
+${postlist:.}
+
--- a/game/release.md
+++ b/game/release.md
@ -0,0 +1,77 @@
				@@ -0,0 +1,77 @@
+---
+title: Release!
+date: 21-07-2020
+...
+
+```{=html}
+<video width=100% autoplay loop>
+  <source src="https://alistairmichael.com/media/gamedemo_small.mp4" type="video/mp4">
+</video> 
+```
+
+
+[high quality demo video](https://vimeo.com/440607394)
+
+At long last I have a version of the game that I can show to people. 
+
+I have made a distributable binary for linux, and windows, finally. That can be 
+found [here](https://git.topost.net/alistair/space_game/releases). 
+
+Now, does
+this mean it has meaningful gameplay and is bug free? Of course not. But to look
+back on the past year of working on this project here and there here is what I
+have achieved:
+
+- Drawing shapes to the screen using libsdl
+- A update-draw game loop and datastructures for looking after objects that
+    exist in the game world
+- A 2D vector arithmetic library, for addition, scalar multiplication,
+    projection, mod and arg, et cetera.
+- A system for adding and removing forces to objects using timeouts.
+- A basic 2D physics system with gravity where the player can be moved around
+    using force impulses turned on and off by user input
+- A viewport that can move to follow the player
+- A simple world generated using a random walk 
+- A collision detection system using the Separating Axis Theorem to detect and
+    recover from collisions between the player and the world
+- Wires that can attach the player to a point in the world and make it act like 
+    a pendulum.
+- A winch and ratchet that can shorten the rope using a specific amount of force 
+    to hoist the player.
+- Extending physics to simulate friction and partially elastic collisions.
+- HSV-HSL-RGB colour space converters and a colour-pallette geerator
+- An automatically growing and shrinking array list structure to improve object
+    management
+
+Part of what makes this project very enjoyable to work on is the fact I can pick
+a very short term feature goal and work on that for a day, and usually have a
+MVP to show for it within a few hours of work. The program is small enough to
+fit in my head, so I could happily leave it for a couple days if I came across a
+but I didn't feel motivated to bang my head against, and come back to it later.
+
+C is, admittedly, not the best language for designing something iteratively, but
+I absolutely designed this game very iteratively. I had no idea what I was doing
+the whole time. There were several times, especially when developing the
+collision detection and pendulum physics, that I exhausted myself and could not
+think of any more bug hypotheses to test. At those times leaving it for a week,
+or 10, was helpful. The fact that it is broken into such small pieces and
+designed iteratively really helped me get back into it. 
+
+That is partly why I love writing C, what I have done of it. Most of the
+problems I had to solve here were micro-problems. Why am I reading an
+out-of-bounds value from this array? Why is my physics _doing that_. Why is it
+crashing? I can very easly get sucked into solving one small thing after
+another, and seeing the bit of progress each time. It's like its own addicting
+game.
+
+There are still things I want to do with it. I mainly want to add a timer to the
+levels so there is at least some gameplay. I also need menus: a simple save/quit
+menu and a startup menu where you can input the level seed directly. The last
+thing is sound effects and music, but that requires sourcing or making assets.
+In the long term, I think a basic skill tree: upgrades (physics tweaks) that are
+unlockable by completing a level in under a certain time, would be a good
+addition.
+
+Right now, I'm going to leave it for a while. I think I can learn new things
+more productively by working on other projects. 
+
--- a/homepage.html.template
+++ b/homepage.html.template
@ -0,0 +1,61 @@
				@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="$lang$" xml:lang="$lang$"$if(dir)$ dir="$dir$"$endif$>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  
+  {{ ifdef:title:<title>{{ :title }}</title> }}
+
+  <link rel="stylesheet" type="text/css" href="{{:url}}/media/style.css">
+
+<link rel="stylesheet"
+      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
+
+<script>hljs.initHighlightingOnLoad();</script>
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
+
+    <!-- The loading of KaTeX is deferred to speed up page rendering -->
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
+
+    <!-- To automatically render math in text elements, include the auto-render extension: -->
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
+        onload="renderMathInElement(document.body);"></script>
+  </head>
+
+</head>
+<body>
+
+
+<div class="grid-container">
+
+<div class=header_group>
+</div>
+
+<div class=menu_group>
+    <ul>
+        <li class=menu_item><a href="{{:url}}">home</a></li>
+        <li class=menu_item><a href="{{:url}}/pages/about.html">about</a></li>
+        <li class=menu_item><a href="https://git.topost.net/alistair">git</a></li>
+        <li class=menu_item><a href="{{:url}}/projects">projects</a></li>
+        <li class=menu_item><a href="{{:url}}/notes">uni</a></li>
+    </ul>
+</div>
+
+<div class=main_page>
+
+<header>
+    {{ifdef:title:<h1 class="title">{{ :title }}</h1>}}
+    {{ifdef:date
+    <p class="date">{{ :date }}</p>
+    }}
+</header>
+
+{{ :body}}
+</div> 
+</div>
+</div>
+
+</body>
+</html>
--- a/html.template
+++ b/html.template
@ -0,0 +1,59 @@
				@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="$lang$" xml:lang="$lang$"$if(dir)$ dir="$dir$"$endif$>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  
+  {{ ifdef:title:<title>{{ :title }}</title> }}
+
+  <link rel="stylesheet" type="text/css" href="{{:url}}/media/style.css">
+
+<link rel="stylesheet"
+      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
+
+<script>hljs.initHighlightingOnLoad();</script>
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
+
+    <!-- The loading of KaTeX is deferred to speed up page rendering -->
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
+
+    <!-- To automatically render math in text elements, include the auto-render extension: -->
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
+        onload="renderMathInElement(document.body);"></script>
+  </head>
+
+</head>
+<body>
+
+
+<div class="grid-container">
+
+<div class=header_group>
+</div>
+
+<div class=menu_group>
+    <ul>
+        <li class=menu_item><a href="{{:url}}">home</a></li>
+        <li class=menu_item><a href="{{:url}}/pages/about.html">about</a></li>
+        <li class=menu_item><a href="https://git.topost.net/alistair">git</a></li>
+        <li class=menu_item><a href="{{:url}}/projects">projects</a></li>
+        <li class=menu_item><a href="{{:url}}/notes">uni</a></li>
+    </ul>
+</div>
+
+<div class=main_page>
+
+<header>
+    {{ifdef:title:<h1 class="title">{{ :title }}</h1>}}
+    {{ifdef:date:<p class="date">Published {{ :date }}</p>}}
+</header>
+
+{{ :body}}
+</div> 
+</div>
+</div>
+
+</body>
+</html>
--- a/index.md
+++ b/index.md
@ -0,0 +1,12 @@
				@@ -0,0 +1,12 @@
+## Projects
+
+{{postlist:projects }}
+
+### Game
+
+{{postlist:game}}
+
+## Blog Posts
+
+{{postlist:posts}}
+
--- a/manifest.webmanifest
+++ b/manifest.webmanifest
@ -0,0 +1,15 @@
				@@ -0,0 +1,15 @@
+{
+  "name": "alistairmichael.com",
+  "short_name": "alistairmichael",
+  "start_url": "https://alistairmichael.com",
+  "display": "browser",
+  "background_color": "#fff",
+  "description": "The Personal Site / Blog / Whatever of Alistair Michael",
+  "icons":[
+      {"src":"/android-chrome-192x192.png",
+          "sizes":"192x192","type":"image/png"
+      },
+      {"src":"/android-chrome-512x512.png",
+          "sizes":"512x512","type":"image/png"
+      }]
+}
--- a/media/coolfungame.mp4
+++ b/media/coolfungame.mp4
--- a/media/fonts/Charter/Charter
+++ b/media/fonts/Charter/Charter
@ -0,0 +1,3 @@
				@@ -0,0 +1,3 @@
+This is a copy of the Charter fonts which Bitstream contributed to the X consortium. This is the original notice included with the fonts: 
+
+(c) Copyright 1989-1992, Bitstream Inc., Cambridge, MA. You are hereby granted permission under all Bitstream propriety rights to use, copy, modify, sublicense, sell, and redistribute the 4 Bitstream Charter (r) Type 1 outline fonts and the 4 Courier Type 1 outline fonts for any purpose and without restriction; provided, that this notice is left intact on all copies of such fonts and that Bitstream's trademark is acknowledged as shown below on all unmodified copies of the 4 Charter Type 1 fonts. BITSTREAM CHARTER is a registered trademark of Bitstream Inc. 
--- a/media/fonts/Charter/charter_bold.woff
+++ b/media/fonts/Charter/charter_bold.woff
--- a/media/fonts/Charter/charter_bold_italic.woff
+++ b/media/fonts/Charter/charter_bold_italic.woff
--- a/media/fonts/Charter/charter_italic.woff
+++ b/media/fonts/Charter/charter_italic.woff
--- a/media/fonts/Charter/charter_regular.woff
+++ b/media/fonts/Charter/charter_regular.woff
--- a/media/fonts/Vera/stylesheet.css
+++ b/media/fonts/Vera/stylesheet.css
@ -0,0 +1,108 @@
				@@ -0,0 +1,108 @@
+@font-face {
+    font-family: 'Bitstream Vera Sans Roman';
+    src: url('https://alistairmichael.com/media/fonts/Vera/vera-webfont.woff2') format('woff2'),
+         url('https://alistairmichael.com/media/fonts/Vera/vera-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+
+}
+
+
+@font-face {
+    font-family: 'Bitstream Vera Serif Roman';
+    src: url('https://alistairmichael.com/media/fonts/Vera/verase-webfont.woff2') format('woff2'),
+         url('https://alistairmichael.com/media/fonts/Vera/verase-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+
+}
+
+
+@font-face {
+    font-family: 'Bitstream Vera Serif';
+    src: url('https://alistairmichael.com/media/fonts/Vera/verasebd-webfont.woff2') format('woff2'),
+         url('https://alistairmichael.com/media/fonts/Vera/verasebd-webfont.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+
+}
+
+
+@font-face {
+    font-family: 'Bitstream Vera Sans Mono';
+    src: url('https://alistairmichael.com/media/fonts/Vera/veramono-webfont.woff2') format('woff2'),
+         url('https://alistairmichael.com/media/fonts/Vera/veramono-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+
+}
+
+
+@font-face {
+    font-family: 'Bitstream Vera Sans Mono';
+    src: url('https://alistairmichael.com/media/fonts/Vera/veramoit-webfont.woff2') format('woff2'),
+         url('https://alistairmichael.com/media/fonts/Vera/veramoit-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'Bitstream Vera Sans Mono';
+    src: url('https://alistairmichael.com/media/fonts/Vera/veramobi-webfont.woff2') format('woff2'),
+         url('https://alistairmichael.com/media/fonts/Vera/veramobi-webfont.woff') format('woff');
+    font-weight: 700;
+    font-style: italic;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'Bitstream Vera Sans Mono';
+    src: url('https://alistairmichael.com/media/fonts/Vera/veramobd-webfont.woff2') format('woff2'),
+         url('https://alistairmichael.com/media/fonts/Vera/veramobd-webfont.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'Bitstream Vera Sans';
+    src: url('https://alistairmichael.com/media/fonts/Vera/verait-webfont.woff2') format('woff2'),
+         url('https://alistairmichael.com/media/fonts/Vera/verait-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'Bitstream Vera Sans';
+    src: url('https://alistairmichael.com/media/fonts/Vera/verabi-webfont.woff2') format('woff2'),
+         url('https://alistairmichael.com/media/fonts/Vera/verabi-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'Bitstream Vera Sans';
+    src: url('https://alistairmichael.com/media/fonts/Vera/verabd-webfont.woff2') format('woff2'),
+         url('https://alistairmichael.com/media/fonts/Vera/verabd-webfont.woff') format('woff');
+    font-weight: 700;
+    font-style: bold;
+
+}
--- a/media/fonts/Vera/vera-demo.html
+++ b/media/fonts/Vera/vera-demo.html
@ -0,0 +1,620 @@
				@@ -0,0 +1,620 @@
+<!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: 'bitstream_vera_sansroman';
+							}
+		</style>
+
+	<title>Bitstream Vera Sans Roman 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">
+		Bitstream Vera Sans Roman	</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>Bitstream Vera Sans Roman</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 Bitstream Vera Sans Roman 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 Bitstream Vera Sans Roman 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;#13;</p>&#13;</div>
+																				 <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>
--- a/media/fonts/Vera/vera-webfont.woff
+++ b/media/fonts/Vera/vera-webfont.woff
--- a/media/fonts/Vera/vera-webfont.woff2
+++ b/media/fonts/Vera/vera-webfont.woff2
--- a/media/fonts/Vera/verabd-demo.html
+++ b/media/fonts/Vera/verabd-demo.html
@ -0,0 +1,620 @@
				@@ -0,0 +1,620 @@
+<!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: 'bitstream_vera_sansbold';
+							}
+		</style>
+
+	<title>Bitstream Vera Sans 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">
+		Bitstream Vera Sans 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>Bitstream Vera Sans 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 Bitstream Vera Sans 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 Bitstream Vera Sans 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;#13;</p>&#13;</div>
+																				 <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>
--- a/media/fonts/Vera/verabd-webfont.woff
+++ b/media/fonts/Vera/verabd-webfont.woff
--- a/media/fonts/Vera/verabd-webfont.woff2
+++ b/media/fonts/Vera/verabd-webfont.woff2
--- a/media/fonts/Vera/verabi-webfont.woff
+++ b/media/fonts/Vera/verabi-webfont.woff
--- a/media/fonts/Vera/verabi-webfont.woff2
+++ b/media/fonts/Vera/verabi-webfont.woff2
--- a/media/fonts/Vera/verait-demo.html
+++ b/media/fonts/Vera/verait-demo.html
@ -0,0 +1,620 @@
				@@ -0,0 +1,620 @@
+<!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: 'bitstream_vera_sansoblique';
+							}
+		</style>
+
+	<title>Bitstream Vera Sans Oblique 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">
+		Bitstream Vera Sans Oblique	</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>Bitstream Vera Sans Oblique</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 Bitstream Vera Sans Oblique 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 Bitstream Vera Sans Oblique 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;#13;</p>&#13;</div>
+																				 <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>
--- a/media/fonts/Vera/verait-webfont.woff
+++ b/media/fonts/Vera/verait-webfont.woff
--- a/media/fonts/Vera/verait-webfont.woff2
+++ b/media/fonts/Vera/verait-webfont.woff2
--- a/media/fonts/Vera/veramobd-webfont.woff
+++ b/media/fonts/Vera/veramobd-webfont.woff
--- a/media/fonts/Vera/veramobd-webfont.woff2
+++ b/media/fonts/Vera/veramobd-webfont.woff2
--- a/media/fonts/Vera/veramobi-webfont.woff
+++ b/media/fonts/Vera/veramobi-webfont.woff
--- a/media/fonts/Vera/veramobi-webfont.woff2
+++ b/media/fonts/Vera/veramobi-webfont.woff2
--- a/media/fonts/Vera/veramoit-webfont.woff
+++ b/media/fonts/Vera/veramoit-webfont.woff
--- a/media/fonts/Vera/veramoit-webfont.woff2
+++ b/media/fonts/Vera/veramoit-webfont.woff2
--- a/media/fonts/Vera/veramono-webfont.woff
+++ b/media/fonts/Vera/veramono-webfont.woff
--- a/media/fonts/Vera/veramono-webfont.woff2
+++ b/media/fonts/Vera/veramono-webfont.woff2
--- a/media/fonts/Vera/verase-webfont.woff
+++ b/media/fonts/Vera/verase-webfont.woff
--- a/media/fonts/Vera/verase-webfont.woff2
+++ b/media/fonts/Vera/verase-webfont.woff2
--- a/media/fonts/Vera/verasebd-demo.html
+++ b/media/fonts/Vera/verasebd-demo.html
@ -0,0 +1,620 @@
				@@ -0,0 +1,620 @@
+<!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: 'bitstream_vera_serifbold';
+							}
+		</style>
+
+	<title>Bitstream Vera Serif 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">
+		Bitstream Vera Serif 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>Bitstream Vera Serif 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 Bitstream Vera Serif 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 Bitstream Vera Serif 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;#13;</p>&#13;</div>
+																				 <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>
--- a/media/fonts/Vera/verasebd-webfont.woff
+++ b/media/fonts/Vera/verasebd-webfont.woff
--- a/media/fonts/Vera/verasebd-webfont.woff2
+++ b/media/fonts/Vera/verasebd-webfont.woff2
--- a/media/game3.png
+++ b/media/game3.png
--- a/media/gamebounce.mp4
+++ b/media/gamebounce.mp4
--- a/media/gamedemo_small.mp4
+++ b/media/gamedemo_small.mp4
--- a/media/img1.png
+++ b/media/img1.png
--- a/media/img2.png
+++ b/media/img2.png
--- a/media/style.css
+++ b/media/style.css
@ -0,0 +1,228 @@
				@@ -0,0 +1,228 @@
+code {
+    white-space: pre-wrap;
+    background: #eee;
+    border-color: #eee;
+    border-radius: 6px;
+    border-style: solid;
+    border-left-width: 4px;
+    border-right-width: 4px;
+    border-top-width:1px;
+    border-bottom-width:1px;
+}
+
+.title {
+    margin-top:18px;
+}
+
+div.sourceCode {
+	background: #eee;
+	border-radius: 7px;
+}
+
+pre code {
+    border-style: none;
+    background: none;
+}
+
+code {
+    font-family: 'Bitstream Vera Sans Mono', 'Monospace', monospace;
+}
+
+pre {
+    font-family: 'Bitstream Vera Sans Mono', 'Monospace', monospace;
+    background: #eee;
+    border-radius:6px;
+    padding: 0.7em;
+}
+
+span.smallcaps {
+    font-variant: small-caps;
+} span.underline {
+    text-decoration: underline;
+}
+div.column {
+    display: inline-block;
+    vertical-align: top;
+    width: 50%;
+}
+
+dl {
+    padding-left:1.5em;
+}
+
+dl dt {
+    font-size:0.6em;
+    font-weight:200;
+}
+
+dl dd {
+    margin-bottom:0.7em;
+
+    margin-left:0px;
+
+}
+
+dl dd a {
+    color:black;
+}
+
+body {
+    font-family: 'Bitrstream Vera Sans', Helvetica Neue, Helvetica, sans-serif, sans;
+    font-size: 18px;
+}
+
+
+body .main_page p {
+    line-height:1.3em;
+}
+
+.main_page li {
+    margin-top:0.3em;
+    margin-bottom:0.3em;
+}
+
+img {
+    margin: auto;
+    max-width: 90%;
+    display: block;
+}
+dd {
+    margin-top: 5px;
+    margin-bottom: 7px;
+}
+h1 {
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight:400;
+}
+
+
+a {
+  text-decoration:none;
+  color: #0066cc;
+}
+
+
+div.main_page {
+    padding-top: 0;
+}
+
+hr {
+    border-style: solid;
+    color: #bbb;
+    border-width:0.1em;
+}
+pre.numberSource {
+    margin-left: 4;
+}
+
+q {
+    quotes: "“" "”" "‘" "’";
+}
+
+
+.grid-container {
+  display: grid;
+  grid-template-columns: 2fr 3fr 3fr 4fr;
+  grid-template-rows: 0.5fr repeat(0.5, 1fr);
+  gap: 1px 1px;
+  grid-template-areas: "header_group header_group header_group header_group" "menu_group main_page main_page table_of_contents" "menu_group main_page main_page table_of_contents";
+}
+
+.header_group { grid-area: header_group; }
+
+.menu_group { 
+    grid-area: menu_group;
+    position:fixed;
+}
+
+.table_of_contents {
+    grid-area: table_of_contents; 
+    max-width: 100%;
+}
+
+.main_page { 
+    grid-area: main_page; 
+    max-width:100%;
+}
+
+.menu_item {
+    display:block;
+    padding:5px;
+    display: flex;
+    justify-content: space-between;
+}
+
+
+@media (max-width: 1200px) {
+    .grid-container {
+      display: grid;
+      gap: 1px 1px;
+      grid-template-areas: "header_group header_group header_group header_group" "menu_group menu_group menu_group menu_group " "table_of_contents table_of_contents table_of_contents table_of_contents" "main_page main_page main_page main_page";
+      padding-left:10px;
+      padding-right:10px;
+      max-width: 45em;
+      margin:auto;
+    }
+    .menu_item {
+        display:inline-block;
+    }
+
+    .menu_group {
+        position:inherit;
+    }
+
+    .menu_group ul {
+        padding:0;
+    }
+
+    .title {
+        margin-top:10px;
+    }
+
+}
+
+
+blockquote {
+    border-left: #bbb;
+    border-left-style: solid;
+    border-left-width: 0.2em;
+    padding:0.6em;
+    padding-left:1em;
+}
+
+blockquote p {
+    margin:0px;
+}
+
+
+
+tr:nth-child(even) {background-color: #eee;}
+
+table {
+  border-collapse: collapse;
+  overflow:auto;
+  width:100%;
+}
+
+.header th {
+
+    text-align: left;
+    border-bottom-style:solid;
+    border-left:none;
+    border-right:none;
+    
+    border-bottom-width:1px;
+}
+
+td {
+    padding:5px;
+}
+
+
+.date {
+    font-size:0.85em;
+}
--- a/notes/csse2002/csse2002.md
+++ b/notes/csse2002/csse2002.md
--- a/notes/csse2002/csse2002.pdf
+++ b/notes/csse2002/csse2002.pdf
--- a/notes/csse2002/fig2.gif
+++ b/notes/csse2002/fig2.gif
--- a/notes/csse2002/index.md
+++ b/notes/csse2002/index.md
--- a/notes/index.md
+++ b/notes/index.md
@ -0,0 +1,11 @@
				@@ -0,0 +1,11 @@
+---
+title: Uni Notes
+notemplate:
+
+I might start keeping some uni notes here on the offchance someone else finds them useful. 
+
+- Computer Systems and Software Engineering 2: Programming in The Large
+  [CSSE2002](csse2002) [(pdf)](csse2002/csse2002.pdf)
+- Calculus
+  [MATH1052](math1052) 
+
--- a/notes/math1052/index.md
+++ b/notes/math1052/index.md
@ -0,0 +1,57 @@
				@@ -0,0 +1,57 @@
+---
+title: Solving ODEs
+
+1.  Consider the following homogeneous linear second order ODE with
+    constant coefficients:
+
+    $$ay'' + by' + cy = 0$$
+
+    The characteristic equation is $a \lambda ^2 + b\lambda + c = 0$.
+
+2.  If $a \lambda ^2 + b\lambda + c = 0$ has two real and distinct
+    roots, $\lambda_1$ and $\lambda_2$, then
+    $y(t) = c_1e^{\lambda_1 t} + 
+            c_2e^{\lambda_2t}$.
+
+    If $\lambda _1 , \lambda _2 < 0$, $y \to 0$ as $t\to \infty$.
+
+    If $\lambda _1$ or $\lambda _2 > 0$, $y \to \pm \infty$ as
+    $t\to \infty$, depending on the values of the coefficients.
+
+3.  If $a \lambda ^2 + b\lambda + c = 0$ has one root, $\lambda$, then
+    $y(t) = (c_1 + c_2t)e^{\lambda t}$.
+
+    Reduction of order.
+
+4.  If $a \lambda ^2 + b\lambda + c = 0$ has complex roots,
+    $a \pm i\beta$, then
+    $y(t) = e^{at}( A \cos\beta t + B\sin(\beta t))$.
+
+5.  Now consider the following inhomogeneous linear second order ODE
+    with constant coefficients:
+
+    $$ay'' + by' + cy = r(x)$$
+
+    The general solution is $y = y_H + y_p$, where $y_H$ is the solution
+    to the homogeneous ODE $ay'' + by' + cy' = 0$, and $y_p$ is a
+    particular solution to the inhomogeneous ODE. $y_p$ may be found
+    using the method of underdetermined coefficients.
+
+      Examples of $r(x)$     |        Choice for $y_p$          
+      -----------------------|--------------------------------- 
+      $2x + 3$               |            $ax + b$              
+      $e^{2x}$               |            $Ae^{2x}$             
+      $\sin(x)$              |      $A\sin(x) + B\cos(x)$       
+      $\cos(x)$              |      $A\sin(x) + B\cos(x)$       
+      $2\sin(x) + 3\cos(x)$  |      $A\sin(x) + B\cos(x)$       
+      $xe^x$                 |          $(ax + b)e^x$           
+      $e^x \sin (2x)$        |  $e^x (A\sin(2x) + B\cos(2x))$   
+      $e^{2x} + \sin (x)$    | $Ae^{2x} + B\sin(x) + C\cos(x)$  
+
+6.  Simple Harmonic Motion & Damped Oscillations ($m$ is the mass of the
+    weight attached to the spring, $k$ is the spring constant, and
+    $\beta$ is the dampinc constant)
+
+    Simple Harmonic Motion (Undamped): $mx'' + kx = 0$
+
+    Damped Oscillation: $mx'' + \beta x' + kx = 0$
--- a/notes/style.css
+++ b/notes/style.css
@ -0,0 +1,36 @@
				@@ -0,0 +1,36 @@
+body{
+    margin:1em auto;
+    max-width:40em;
+    padding:0 .62em;
+    font:1.02em/1.2 sans-serif;
+}
+h1,h2,h3 {
+    line-height:1.2;
+}
+
+h1 {
+    font-size: 1.5em;
+}
+h2 {
+    font-size: 1.3em;
+}
+h3 {
+    font-size: 1.2em;
+}
+h4 {
+    font-size: 1.02em;
+}
+@media print{
+    body{
+        max-width:none
+    }
+}
+
+blockquote {
+    font-style: italic;
+   border-left: solid;
+    border-color: lightgrey;
+    padding-left:1em;
+}
+
+
--- a/pages/about.md
+++ b/pages/about.md
@ -0,0 +1,9 @@
				@@ -0,0 +1,9 @@
+---
+title: Me
+
+### Contacts
+
+- email: mail at alistairmichael.com
+- matrix: alistair@thonk.space
+- git: [git.topost.net/alistair](https://git.topost.net/alistair/)
+
--- a/posts/about.md.draft
+++ b/posts/about.md.draft
@ -0,0 +1,14 @@
				@@ -0,0 +1,14 @@
+---
+title: About
+date: 5-10-2019
+...
+
+Hi,
+
+My name is alistair and this is my website. It exists mainly because around 2016ish I wanted to buy my domain name _alistairmichael.com_ and then felt that having it lying around doing nothing was a bit of a waste. 
+
+I like playing with computers to learn new software tools and seeing what I can do with them, so really this is part of that and I'm not sure what actual content to put here. For the most part my waking mind is occupied by Linux and Open Source software, a tiny bit of computer gaming and whatever is on the front page of hackernews[^1]...so probably that. Meanwhile, this site is easily discoverable given my email address uses this domain so I have to be a bit nervous about it quite possibly being someone's (like a prospective employer's) second impression of me. Nothing like early 2010s cyber-fearmongering as a generation of millenials grew up to discover their teenage blogs are deeply cringeworthy to make me hesitant to post things online.
+
+I have wanted to do a blog properly for a few years now. Part of it is because I really _want_ to engage with Internet culture but don't possess the chaotic energy to do social media well. More importantly, it is because of all the times some random guy's blog post about his pet project has helped me solve an obscure technical problem I was having, or to learn about a new software tool or exciting toy. I want to be that dude. I have also felt inspired by the fantastic blogs I've come across, like codinghorror, 2bithistory, and the mozilla hacks blog.
+
+[^1]: [news.ycombinator.com](https://news.ycombinator.com)
--- a/posts/cowsay.md
+++ b/posts/cowsay.md
@ -0,0 +1,59 @@
				@@ -0,0 +1,59 @@
+---
+title: Cowsay C
+date: 10-06-2020
+...
+
+Back in February I was bored on an aeroplane so I decided to re-write the classic 
+`cowsay` by Tony Monroe. I wrote it in C, as a sort of private joke about premature
+optimisation, I guess, and because for some reason puzzling over twiddly text-formatting
+problems in C is good at keeping me awake after getting up at 4am to go to the 
+airport.
+
+The trickiest part of this was text-wrapping. The trivial solution is to loop 
+through the input string and replace every whitespace with a newline character, 
+but that doesn't allow breaking on `'\t'` or `-`, or other printing characters. I 
+tried to get it as close as possible to the real Cowsay, which uses the Perl 
+text wrapping function, but there are still some divergences that I can't explain. 
+There also proved to be some edge cases with attempting to put the wrapped text 
+into a box but I think I got them worked out in the end[^1].
+
+It does not support multiple cow types or changing the features of the cow, 
+(`$eyes`) it might be nice to add that at some point but I'm not sure how much 
+time I really want to spend on this program.
+
+[^1]: I have just discovered that it doesn't understand tabs, so I either have to 
+fix that or live with this dissatisfaction now.
+
+Anyway it was a good bit of fun for the down moments in my trip to Melbourne. 
+I cannot attest to the code quality, I remember being extremely tired and 
+bleary when I wrote it.
+
+```
+ _________________________________________
+/ `How do you feel?' he asked him.        \
+| `Like a military academy,' said Arthur, |
+| `bits of me keep                        |
+| passing out.'" ....                     |
+| `We're safe,' he said.                  |
+| `Oh good,' said Arthur.                 |
+| `We're in a small galley cabin,' said   |
+| Ford, `in one of the                    |
+| spaceships of the Vogon Constructor     |
+| Fleet.'                                 |
+| `Ah,' said Arthur, `this is obviously   |
+| some strange usage of                   |
+| the word "safe" that I wasn't           |
+| previously aware of.'                   |
+|                                         |
+| - Arthur after his first ever teleport  |
+\ ride.                                   /
+ -----------------------------------------
+        \   ^__^
+         \  (oo)\_______
+            (__)\       )\/\
+                ||----w |
+                ||     ||
+```
+
+[source link](https://git.topost.net/alistair/c-cowsay)
+
--- a/posts/email.md
+++ b/posts/email.md
@ -0,0 +1,22 @@
				@@ -0,0 +1,22 @@
+---
+title: Email Isn't Actually Impossible
+date: 12-12-2019
+...
+
+A couple of months ago, Gilles, who writes the blog at poolp.org and works on the OpenBSD mail server OpenSMTPD wrote a post claiming that "Email is Hard" is an inadequate reason for not- self-hosting an email server. If you are reasonably technical, have patience and have minimal consequences for potential email downtime, then the only thing stopping you running your own email server is the doing the work to set it up. After following the [excellent guide](https://poolp.org/posts/2019-09-14/setting-up-a-mail-server-with-opensmtpd-dovecot-and-rspamd/) he wrote to setting up OpenSMTPD I'm inclined to agree. 
+
+This is partly because of the OpenBSD project, who are resposible for OpenSMTPD, and their focus on simplicity and correctness in the implementation. They provide a very straightforward setup process for the basic use case. After playing with the config files for a couple of days they really make sense and seem quite elegant and terse.
+
+Having searched "how to set up an email server" I found a massive ars-technica series on doing it with Postfix, the "standard" SMTP server implementation and it does not look fun, I can say. However it is likely more powerful than OpenSMTPD. There are also several blog posts warning of the inevitable blacklisting and undeliverability issues with hosting your own main which I'm so glad to see didn't appear when I set up my server.
+
+Straight away, with a 1 day old domain name and after spending maybe 4 hours following Gilles guide to set up DNS records, SPF, DKIM, an DMARC, I had an email server with spam filtering, and that I could connect to from my phone and send emails to the inbox of GMail and Zoho (my usual free mail provider). Unfortunately Office365 mail does deliver me to the spam folder. Hopefully that will improve once the address has existed for a while and gained reputation, but it may just be something I have to accept. 
+
+The hardest part of the setup process was compiling OpenSMTPD and the filter plugins from source on Ubuntu[^1], because the repository version was too old to support the nice spam-filter syntax in the config file. Thankfully the documentation provided with the source was good, and I was able to install all the dependencies without too much trouble. 
+
+At any rate this was more of an experiment, so I am happy. I have not set up a backup server to take over in case of downtime and I'm not sure I will, since it is only for me. So doing that was a fun couple of days, and I agree with the claim that it would be "better" in an abstract sense, if more people used smaller mail providers to so that one of the few truly decentralised methods of communcation stays that way. It is a service that has always been "unmediated" by technology, the protocol is just the messenger and not the "platform". The mail transfer protocol does not carry all the responsibilities that _platforms_ like GMail, Outlook and Yahoo do have and maybe that is why it has been safe for the past 30 years.
+
+Of course, it is forever moving the other way: Gmail and company own so much of the market that if they decide your email-reputation is not up to scratch they can singlehandedly make your service worthless, [as with their other platforms](https://www.youtube.com/watch?v=DIssymQvrbU).
+
+All hope is not lost though, just this week Jack Dorsey, Twitter CEO, announced plans to invest a team in developing an open Social Network standard that would be interoperable with twitter. Despite however cynical you can be about this, it is at least interest in the idea of platform-agnostic communication. Perhaps more substantially, the ActivityPub protocol, the open Social Network communication standard used by Plemora, Mastodon, Peertube, Plume, Pixel fed et cetera, reached W3C Recommended status in November last year. This essentially makes it a "Web Standard" like HTML5, and SSL. Personally, I am quite excited about ActivityPub, and I hope it helps open protocols triumph over commercial services more broadly.  
+
+[^1]: A choice I made because I want to be able to run obscure self-hosted web applications like [shiori](https://github.com/go-shiori/shiori) that I don't have the know-how to port to BSD.
--- a/posts/index.md
+++ b/posts/index.md
@ -0,0 +1,7 @@
				@@ -0,0 +1,7 @@
+
+---
+title: Posts 
+...
+
+${postlist:.}
+
--- a/posts/new-blog.md
+++ b/posts/new-blog.md
@ -0,0 +1,66 @@
				@@ -0,0 +1,66 @@
+---
+title: The World's Ugliest Static Site Generator
+date: 3-10-2019
+...
+
+Here we are again. 
+
+I rewrote my blog generator, because I decided not to try to deal with the ugly python I wrote last year instead opting to try and keep it as _minimalist_ and as possible: no more than a makefile, a 200MB markdown parser... and in the end a hundred lines of python to help tie it together. I think the purpose of this project was to learn more of the standard gnu utilities for text manipulation, but I ended up copying and pasting so much Makefile syntax off stack I think that purpose was lost in the midst, which was when I gave up and started using python again.
+
+It still does less than the old one, which is quite something. It _does_ support pandoc[^2] markdown by calling pandoc directly, which is some improvement over python's markdown[^1] that I was trying to wrangle before. 
+
+### Pandoc
+
+Pandoc is the markdown parser that I use for all of my Uni notes and just about any writing that doesn't require LaTeX. It is phenomenal, not only being able to convert between a [dizzying array](https://pandoc.org/diagram.jpg) of document formats, but offering one of the most featureful and well-defined markdown dialects available.  
+
+Markdown itself is the very simple plaintext markup language that is partially supported by just about every messaging app, and notably social networks like Reddit, for at least basic things like bold, italic and lists. However it is capable of a lot more than that, and there exist many many, different iterations on basic markdown syntax that allow for more complex formatting like tables, code blocks, embedded maths, audio, vidoes and everything possible on the web.
+
+Since markdown was designed for web publishing, Pandoc is notable because it provides extra functionality specific to paper document generation. It can convert markdown to PDF via LaTeX to produce really beautiful looking documents. 
+
+Anyway, all that really means is I can have nice-looking code blocks and footnotes. 
+
+## Functionality 
+
+Regardless, my site generator works much the same as before.
+
+1. Listing everything in the `/posts` directory, passing it to a python script to make a markdown formatted list of posts that is sorted by date, adding a header and footer and sending it to pandoc to build `index.html`. 
+2. Listing everything in `/posts` and `/pages` and sending it to pandoc to convert to html and plonk them in an 'out' directory. 
+
+[^1]: Yes, I could have achieved this by calling pandoc from python, but I don't know. No. 
+[^2]: [pandoc.org](https://pandoc.org)
+
+## Missing Functionality
+
+- RSS feed generation, but even I only really _pretend_ to use that, I don't know of anyone outside of 90s UNIX programmers on hackernews who still do[^3].
+- Post tagging or categorisation
+- Fine control of included content on each page
+- Search
+
+[^3]: Don't @ me!
+
+To address these in reverse order:
+
+### Search
+
+- Hey man, I won't be writing that much.
+
+### Fine Control of Included Content
+
+Other static site generators allow complex substitutions of text and html elements in individual pages through linking to different files and templating. I would like to support some kind of templating, and the ability to substitute a piece of text for a given variable at any point. That would require me to make the Makefile more generalised however...
+
+### Post Tagging and Categorisation
+
+Ah the tree, truly a transcendent representation of related data. One day, my makefile should be able to recursively traverse a filetree and generate the content for all the markdown documents it contains allowing categorisation of content by the folders it is placed in.
+
+### RSS
+
+I'm not very hyped about RSS right now [^4]. It has low usage outside of podcast publishing and I'm not sure it's worth it. More importantly, I am also not sure how to do it outside of using a python module and giving the python script all the posts.
+
+[^4]: Yes, that does imply I've been hyped about RSS in the past. [Link](https://twobithistory.org/2018/12/18/rss.html) for you if you don't know what RSS is (and are prepared to read for half an hour).
+
+That is about all I can say really. I was supposed to do Uni work today but instead was more productive than I have ever been this week working on my poor little webserver. 
+
+Oh well.
+
+
+
--- a/posts/quick-masto-poster.md
+++ b/posts/quick-masto-poster.md
@ -0,0 +1,97 @@
				@@ -0,0 +1,97 @@
+---
+title: The World's Ugliest Mastodon Client
+date: 07-10-2019
+...
+
+Or How To Send a Mastodon Post Using `curl`
+
+The idea behind this is that one could easily make a [Mastodon](https://joinmastodon.org/) post from a Linux terminal without having to really interact with a UI. Yes, I mainly wrote this because I was bored, but I do feel that a pure "command-line" mastodon client: where you don't have to memorise a million keyboard shortcuts to ninja mode-switch through an ncurses-style text-interface is quite elegant[^1]. It is programs that can interact through arguments and `stdin`/`stdout` that make scripting languages really powerful. 
+
+Of course, with that comes the ugliness of small programs that require many, many dependencies. The universality of bash on Linux systems seems attractive, until you realise how many people use zsh or fish or whatever terminal is cool right now, how its non-standard on BSD systems and how the need to call out to other software means you have to be aware of various dependencies' availability and versions. Yet this script does so little it could really just be a couple of lines in a `.bashrc` profile. I am making a note of this because availability is the only real reason to use bash given how lacking in abstraction and readability it is. Although perhaps I just haven't learnt the idioms yet. 
+
+More importantly, I've never really worked with JSON APIs before and its surprisingly easy and jq seems like a really cool tool for working with JSON. 
+
+```bash
+#!/bin/bash
+
+# Simple bash script that will send all its arguments as a mastodon
+# post.
+# On first run it will ask for a username and password and
+# generate an API key which it will store at the end of this file.
+
+# Dependencies:
+#
+# bash
+# jq    : JSON Parser
+# curl  : API requests and POSTs
+
+## config
+mastoinstance="mastodon.social"
+defaultstatusvis="public" # change to "direct" or "unlisted"
+statuslang="eng"
+storepassword="True"
+## end of config
+
+THISFILE=$(pwd)/toot.sh
+
+# Check whether the api key has already been generated
+if [ $(tail -1 $THISFILE | grep "ACCESSTOKEN") ]
+then
+    accesstoken=$(tail -1 $THISFILE | cut -d':' -f2)
+else
+    # Otherwise generate a new key with username and password
+    printf "Please enter your email: "
+    read email
+    printf "Please enter your password: "
+    read pass
+
+    # Register the app as per
+    #   https://docs.joinmastodon.org/api/rest/apps/#post-api-v1-apps
+
+    meta=$(curl -X POST -sS "https://$mastoinstance/api/v1/apps"\
+        -d  "client_name=tinyscript&redirect_uris=urn:ietf:wg:"\
+        "oauth:2.0:oob&scopes=write follow read")
+
+    # Use jq to parse the json response
+    key=$(echo "$meta" | jq '.vapid_key'| cut -d'"' -f 2)
+    client_id=$(echo "$meta" | jq '.client_id'| cut -d'"' -f 2)
+    client_secret=$(echo "$meta" | jq '.client_secret'| cut -d'"' -f 2)
+    key=$(echo "$meta" | jq '.vapid_key'| cut -d'"' -f 2)
+
+    # Login with Oauth2 to get an api key
+    login=$(curl -X POST -d "scope=read follow write&client_id=$client_id"\
+        "&client_secret=$client_secret&grant_type=password&username="\
+        "$email&password=$pass" -Ss https://mastodon.social/oauth/token)
+
+    # Use jq again to extract the access token
+    accesstoken=$(echo "$login" | jq '.access_token'| cut -d'"' -f 2)
+
+    if [ storepassword == "True" ]
+    then
+        # Store the access token at the end of this file
+        # Security: 100
+        printf "#ACCESSTOKEN:$accesstoken" >> $THISFILE
+    fi
+
+    echo "Logged in (probably) successfully :)"
+fi
+
+# Check there is actually a message
+if [ "$1" != "" ]
+then
+    # Actually send the message
+    statustext="$@"
+    header="Authorization: Bearer $accesstoken"
+    url="https://$mastoinstance/api/v1/statuses"
+    response=$(curl --header "$header" -sS $url -X POST \
+        -d "status=$statustext&language=$statuslang&visibility="\
+        "$defaultstatusvis" | jq '.content')
+    echo "Sent toot: $response"
+else
+    echo "Nothing to write :("
+fi
+
+    ### Below Here your access token is stored in one line ###
+```
+
+[^1]: To be clear, this is a statement about my general overwhelment at command line GUIs. I haven't used any mastodon terminal program. 
--- a/posts/staticgen-update.md
+++ b/posts/staticgen-update.md
@ -0,0 +1,41 @@
				@@ -0,0 +1,41 @@
+---
+title: My Very Basic Site Generator
+date: 13-12-2019
+...
+
+I took a few hours today to rework the experimental Makefile and Python script into just a python script which works somewhat solidly, albeit still for a small set of features compared to full-blown static site generators like Hugo. 
+
+I'm quite satisfied with it, it does the core job I need it to do and does it well enough.
+
+The site generator's behaviour is very simple, it recurses through each directory in `src/` and builds what it sees. Anything that it does not understand is copied to the output directory, unless the config file explicitly tells it not to.
+
+This time the source is online: [git.topost.net](https://git.topost.net/alistair/blog/src/branch/master)
+
+## Features
+
+### Configuration File
+
+TOML and YAML are silly and overcomplicated so config is done through a JSON file (see `src/generator/config.json`). 
+
+`ignorexts`, `ignorefiles`, and `ignoredirs` provide file extensions, file names, and _specific_ directories  respectively, to not copy to the destination directory.
+
+The same labels in the `dir_index` context specify things to be ignored by the directory-index-page generator. 
+
+### Templates
+
+It has very basic support for templating, any file can have a `.template` appended to its filename, and the script will read it and try to substitute any variables in the file. Current supported substitutions are:
+
+- Any variable name in root of the config file, for example `${baseurl}` evaluates to `https://alistairmichael.com`
+- The `${include:relative/file/path}` function inserts the context of the provided file.
+- The `${postlist:relative/file/path}` function generates a list of posts as seen on the front page. This can be done for any directory on the site. 
+
+The file generated from `filename.ext.template` is then written to `filename.ext` so the program can continue processing it, for example generating html from it. Anything ending in `.template` is not copied to the public directory. 
+
+### Markdown
+
+It utilises Pandoc, which has a very extensive dialect with useful things like code highlighting, footnotes, tables-of-contents. These days I use pandoc for everything that doesn't need Latex, it really is fantastic. 
+
+### Pandoc HTML Templates
+
+The `pandoc` command is always provided with a pandoc template, the script chooses the one closest to the file it is currently processing by walking up the file tree. These are named `template.html`. For bonus templating make a `template.html.template` which can use the python scripts substitution, and pandoc's substitution. This is how I structure and style the website.
+
--- a/projects/index.md
+++ b/projects/index.md
@ -0,0 +1,11 @@
				@@ -0,0 +1,11 @@
+---
+title: Projects
+
+Some brief write-ups of my programming projects.
+
+{{postlist:.}}
+
+### Game
+
+{{postlist:/game}}
+
--- a/projects/markov-bot.md
+++ b/projects/markov-bot.md
@ -0,0 +1,70 @@
				@@ -0,0 +1,70 @@
+---
+title: Another Ebooks Bot For Telegram
+date: 01-08-20
+
+Yes, I've written another markov chain bot. A markov chain was one of the first
+things I attempted when I was trying to learn python years ago. I made another
+one last year and have again used a markov chain project to help me learn a
+language: C++.
+
+[code](https://git.topost.net/alistair/telegram-text-bot-markov)
+
+This one is a bot for the messaging app _Telegram_. You can add it to a group and
+it will listen to the conversation to build its markov chain databse[^2]. It will
+reply periodically to a random message using its last word as the seed. It looks
+like a reallly basic form of keyboard autocomplete. 
+
+It can also import plain-text files. This is useful if you want it to loosely
+imitate the prose of a specific author.
+
+But this one does support arbitrary order markov chains and uses an SQLite
+database instead of json save-files like the last one. It is also structured to
+(theoretically) allow you to swap the SQLite database for say... a posgtres
+databse. Because performance is what C++ is about.
+
+If it seems over-engineered it's because I tried to ram in as many c++
+features as possible in order to help me learn the language. 
+My main method of learning has just been reading the
+first third of _A Tour of C++_ by Bjarne Stroustrup, watching random C++
+conference talks[^1], searching online, and referring to 
+[cppreference.com](https://en.cppreference.com/w/cpp). Its not the worst way of
+learning a language, and I have to say I prefer textbooks to videos or tutorials
+just thanks to the pacing, but I started to wish my University did an "Intro To
+Software Engineering in C++" course, like they do for Java. Having a lecturer
+guide you through the main bases of the language over 13 weeks is immensely 
+helpful.
+
+Anyway, there is still some design and debugging work to do with this project. 
+The more significant problems are the structure of the SQL generation and binding
+code, and the structure of the queries. The former because its a mess and hard
+to maintain, and the latter because queries cannot be batched in transactions
+I dont know of a way of doing it without just gitting gud at SQL. I also kind of
+regret using this C++ sql library. It _is_ very nice, but the plain C SQL
+library also seems good enough, and would let me practice RAII. 
+
+Theres plenty of work I can do on it to make it a more useable meme robot, but I
+don't know if I will. I've already had 1 year of having a robotic talking parrot
+in our groupchat and I don't know if I should instantiate another.
+
+This Program Is Bad, but it did teach me some valuable lessons like:
+
+ - How bad ld linker errors are
+ - How ugly C++ syntax is
+ - The sheer number of footguns present in the C++ language
+ - How to properly declare then define classes
+ - The hellscape that is build systems
+ - The hellscape that is libraries
+    - I didnt even use that many libraries really...
+- How slow the c++ compiler (and linting tools) are compared to C. 
+- I wish I had time to learn Go. 
+
+In all seriousness though, C++ is a pretty scary language, but still a very
+interesting one. 
+
+I really need to think of more creative projects though.
+
+[^1]: I did solve _one_ bug because I remembered it for a talk so it wasn't
+  _just_ exam-study-procrastination when I watched them last semester.
+
+[^2]: It does not store verbatim messages only word-pairs, word-triplets...
+  depending on the order of the markov chain; and how many times they occurred. 
--- a/projects/powdersim.md
+++ b/projects/powdersim.md
@ -0,0 +1,54 @@
				@@ -0,0 +1,54 @@
+---
+title: A Simple Falling Sand Simulation
+date: 07-12-2020
+
+Having spent considerable time away from C++ due to university and general busyness I decided
+it was time to have another go at learning it, and promptly discovered I'd forgotten 
+everything I'd ever known about initializers, RAII and OOP. 
+
+```{=html}
+<video autoplay="" loop="" width="100%">
+<source src="https://alistairmichael.com/media/particles.mp4" type="video/mp4">
+</video>
+```
+
+After wasting too much time trying to find a UI toolkit that I could tolerate 
+learning for fun I stumbled upon 
+[this nice video](https://www.youtube.com/watch?v=VLZjd_Y1gJ8) about writing 
+a simple sand physics game and thought it would be much more fun to work on 
+something conceptually simple and satisfying, compensate for C++'s induced headaches. 
+Inspired by the  wonderful work _Nolla games_ did on 
+[Noita's sand physics engine](https://youtu.be/prXuyMCgbTc) I set to work 
+with a SDL2 texture and array of `Uint32` pixels.
+
+The basic idea is wonderfully simple: its a cellular automaton where you update 
+each particle each frame, according to a simple set of rules. 
+This gets complicated when you want to say, swap the position of two particles 
+so that less dense particles float up through the more dense ones, but it worked
+out okay in the end. 
+
+After about 5 hours of fighting C++ I was wishing I'd written it in C. _Oh, it 
+it would be so much simpler if everything was just arrays: the grid an array 
+of `(int)enum Particle;`'s, the update functions an array of function pointers:
+`void (update*)(enum Particle**, int x, int y)`,
+the particles an array of pointers to struct's with state and a function pointer:
+I could change a particle's type simply by rewriting the update function pointer and
+the Particle's type flag. Who needs inheritance? I could cleanly separate the
+physics state and Particle properties from my logic and define the interaction 
+between particles purely with their data: I could even read it from a text file!._
+
+Anyway I eventually figured out how to inherit initializers and destructors 
+correctly. Particle behaviour can be defined via inheritance relations, and the
+colour palettes, default physics values, et cetera, are still separated from the
+actual class definitions so I can easily serialise them to and from the disk if
+I want to implement that some time (I probably won't). I do really enjoy having 
+RAII and overloading. Perhaps mosst, I appreciate the greater expressiveness of 
+C++ code over C, where I often find myself off yak-shaving something to do with 
+`char *` arrays. 
+
+At the moment I think my goal is to just write enough C++
+that most of the time I can spot my stupid mistakes so I can use it instead of C
+or Java without it being a huge pain. Maybe that is too ambitious. At any rate,
+its probably the best option for working on games, and I like pointers too much 
+now. 
+
--- a/robots.txt
+++ b/robots.txt
@ -0,0 +1,3 @@
				@@ -0,0 +1,3 @@
+User-agent: *
+Disallow: 
+
--- a/stgen.json
+++ b/stgen.json
@ -0,0 +1,9 @@
				@@ -0,0 +1,9 @@
+{
+    "author": "alistair michael",
+    "date-in-format": "%d-%m-%y",
+    "date-out-format": "%a, %b %d, %Y",
+    "name": "alistairmichael.com",
+    "publish_root": "/home/alistair/Documents/programming/stgen3/build/alistairmichael",
+    "source_root": "/home/alistair/Documents/programming/stgen3/build/alist",
+    "url": "http://localhost:8080"
+}