Merge branch 'master' of gogs-figureslibres.io:ouidade/dev-epau.archi.fr

2021-03-29 17:06:22 +02:00
parent 5e50794f47 84cbbcc835
commit 964832e90b
181 changed files with 10466 additions and 1586 deletions
@@ -40,5 +40,5 @@ form:
                  type: markdown
                  label: Biographie
                .portrait:
-                  type: file
+                  type: filepicker
                  label: Portrait
@@ -19,22 +19,25 @@ form:
                header.template:
                  default: modular/programmes
                  '@data-options': '\Grav\Common\Page\Pages::modularTypes'
-        features:
+        programmes:
          type: tab
          title: Programmes
          fields:
-            header.features:
-              name: features
+            header.programmes:
+              name: programmes
              type: list
              label: Programmes

              fields:
-                .icon:
+                .nom_du_programme:
                  type: text
-                  label: Icon
-                .header:
-                  type: text
-                  label: Header
-                .text:
-                  type: text
-                  label: Text
+                  label: Nom du programme
+                .texte_de_presentation:
+                  type: markdown
+                  label: Texte de présentation du programme
+                  validate:
+                    type: textarea
+                .logo:
+                  name: logo_du_programme
+                  type: filepicker
+                  label: Logo
@@ -0,0 +1,48 @@
+title: Rapport d'activitées
+'@extends': default
+
+form:
+  fields:
+    tabs:
+      fields:
+        advanced:
+          fields:
+            columns:
+              fields:
+                column1:
+                  fields:
+                    name:
+                      default: modular/rapport_dactivitees
+                      '@data-options': '\Grav\Common\Page\Pages::modularTypes'
+            overrides:
+              fields:
+                header.template:
+                  default: modular/rapport_dactivitees
+                  '@data-options': '\Grav\Common\Page\Pages::modularTypes'
+        rapports:
+          type: tab
+          title: Rapports d'activitées
+          fields:
+            header.rapports:
+              name: rapports
+              type: list
+              label: Rapports d'activitées
+
+              fields:
+                .titre_du_rapport:
+                  type: text
+                  label: Titre du rapport
+                .texte_de_presentation:
+                  type: markdown
+                  label: Texte de présentation du rapport
+                  validate:
+                    type: textarea
+                .couverture:
+                  name: couv_du_rapport
+                  type: filepicker
+                  label: Image de couverture
+                .pdf:
+                  type: filepicker
+                  label: pdf à télécharger
+                  accept:
+                    - .pdf
@@ -1,8 +1,8 @@
 title: 'GIP EPAU'
-default_lang: en
+default_lang: fr
 author:
-  name: 'Joe Bloggs'
-  email: joe@example.com
+  name: 'Ouidade Soussi Chiadmi'
+  email: ouidade@figureslibres.io
 taxonomies:
  - category
  - tag
@@ -1,6 +1,5 @@
 absolute_urls: false
 timezone: null
-default_locale: null
 param_sep: ':'
 wrapped_site: false
 reverse_proxy_setup: false
@@ -25,7 +24,6 @@ languages:
  session_store_active: false
  http_accept_language: false
  override_locale: false
-  content_fallback: {  }
  pages_fallback_only: false
 home:
  alias: /home
@@ -45,17 +43,17 @@ pages:
  publish_dates: true
  process:
    markdown: true
-    twig: false
+    twig: true
  twig_first: false
-  never_cache_twig: false
+  never_cache_twig: true
  events:
    page: true
    twig: true
  markdown:
-    extra: false
-    auto_line_breaks: false
-    auto_url_links: false
-    escape_markup: false
+    extra: true
+    auto_line_breaks: true
+    auto_url_links: true
+    escape_markup: true
    special_chars:
      '>': gt
      '<': lt
@@ -79,9 +77,9 @@ pages:
  last_modified: false
  etag: true
  vary_accept_encoding: false
-  redirect_default_route: false
  redirect_default_code: '302'
-  redirect_trailing_slash: true
+  redirect_trailing_slash: 1
+  redirect_default_route: 0
  ignore_files:
    - .DS_Store
  ignore_folders:
@@ -98,7 +96,7 @@ pages:
 cache:
  enabled: true
  check:
-    method: file
+    method: hash
  driver: auto
  prefix: g
  purge_at: '0 4 * * *'
@@ -141,6 +139,7 @@ assets:
  js_pipeline_before_excludes: true
  js_minify: true
  enable_asset_timestamp: false
+  enable_asset_sri: false
  collections:
    jquery: 'system://assets/jquery/jquery-2.x.min.js'
 errors:
@@ -163,7 +162,7 @@ images:
  cache_perms: '0755'
  debug: false
  auto_fix_orientation: true
-  seofriendly: false
+  seofriendly: true
  defaults:
    loading: auto
 media:
@@ -5,9 +5,9 @@ visible: true
 debugger: true
 ---

-# GIP EPAU
+# EPAU


-## GROUPEMENT D'INTÉRÊT PUBLIC L'EUROPE DES PROJETS ARCHITECTURAUX ET URBAINS
+## L'EUROPE DES PROJETS ARCHITECTURAUX ET URBAINS

 Organisme de recherche et d’expérimentation opérant des programmes nationaux sous tutelles des Ministères en charge de l’architecture et de l’urbanisme, la Cité de l’architecture et du patrimoine et l’Association Europan France.
@@ -1,44 +0,0 @@
---
-title: Programmes
-body_classes: modular
-features:
-    -
-        icon: null
-        header: POPSU
-        text: "Plateforme d’observation des projets et stratégies urbaine\_: Lieu de convergence des milieux de la recherche et de ceux qui font et gouvernent les villes, la Plateforme d’observation des projets et stratégies urbaines – **POPSU** – croise les savoirs scientifiques et l’expertise opérationnelle pour mieux comprendre les enjeux et les évolutions associés aux villes et aux territoires. _Elle capitalise, à des fins d’action, les connaissances établies sur les _métropoles et en assure la diffusion auprès de publics divers : professionnels, académiques, grand public... Lien vers le site\_: [popsu](http://www.popsu.archi.fr)"
-        logo:
-            POPSU2018_LOGO_moinsde6cm_sscartouche.png:
-                name: POPSU2018_LOGO_moinsde6cm_sscartouche.png
-                type: image/png
-                size: 22288
-                path: POPSU2018_LOGO_moinsde6cm_sscartouche.png
-    -
-        icon: ;)
-        header: Europan
-        text: 'Europan est un concours d’idées d’architecture et d’urbanisme se déroulant tous les deux ans simultanément dans une vingtaine de pays européens, sur un thème et un règlement communs. Dans chaque pays des sites sont proposés par des collectivités territoriales et leurs partenaires. Ce concours est suivi de réalisation in-situ pour les équipes sélectionnées. Europan facilite le dialogue sur les modes de faire la ville à toutes les échelles. https://www.europanfrance.org/'
-        logo:
-            'Europan France.jpg':
-                name: 'Europan France.jpg'
-                type: image/jpeg
-                size: 41080
-                path: 'Europan France.jpg'
-    -
-        icon: null
-        header: 'Forum des Solutions'
-        text: 'Prolongement physique des programmes Action Cœur de Ville et Petites villes de demain, le Forum des solutions est une série de rendez-vous mensuels et thématiques conçues pour les villes du programme, mais qui s’adresse également à toutes les collectivités qui souhaitent placer l’innovation au cœur des stratégies de revitalisation urbaine. Chaque rendez-vous permet la présentation par leurs auteurs de projets réalisés répondant aux problématiques rencontrées par ces villes. Il est ouvert à tous les acteurs de l’aménagement du territoire. http://www.urbanisme-puca.gouv.fr/forums-des-solutions-en-videos-a1879.html'
-        logo:
-            forum_solution.png:
-                name: forum_solution.png
-                type: image/png
-                size: 135423
-                path: forum_solution.png
-    -
-        icon: null
-        header: Coubertin
-        text: 'Le programme de recherche-action Coubertin construit le récit, au fil de l’eau, de la conception des ouvrages et des opérations d’aménagement des Jeux Olympiques et Paralympiques de Paris 2024. À travers une observation embarquée au sein de la SOLIDEO, l’équipe de chercheurs analyse la production architecturale et urbaine et sa capacité à transformer les pratiques d’aménagement.'
-        logo: {  }
-visible: true
-debugger: true
---
-
-# Programmes
@@ -0,0 +1,28 @@
+---
+title: Programmes
+body_classes: 'modular-row programmes'
+programmes:
+    -
+        nom_du_programme: 'Plateforme d’observation des projets et stratégies urbaine'
+        texte_de_presentation: "Lieu de convergence des milieux de la recherche et de ceux qui font et gouvernent les villes, la Plateforme d’observation des projets et stratégies urbaines – **POPSU** – croise les savoirs scientifiques et l’expertise opérationnelle pour mieux comprendre les enjeux et les évolutions associés aux villes et aux territoires. _Elle capitalise, à des fins d’action, les connaissances établies sur les _métropoles et en assure la diffusion auprès de publics divers : professionnels, académiques, grand public... Lien vers le site\_: [popsu](http://www.popsu.archi.fr)"
+        logo: popsu.png
+    -
+        nom_du_programme: Europan
+        texte_de_presentation: 'Europan est un concours d’idées d’architecture et d’urbanisme se déroulant tous les deux ans simultanément dans une vingtaine de pays européens, sur un thème et un règlement communs. Dans chaque pays des sites sont proposés par des collectivités territoriales et leurs partenaires. Ce concours est suivi de réalisation in-situ pour les équipes sélectionnées. Europan facilite le dialogue sur les modes de faire la ville à toutes les échelles. https://www.europanfrance.org/'
+        logo: europan_france.jpg
+    -
+        nom_du_programme: 'Forum des Solutions'
+        texte_de_presentation: 'Prolongement physique des programmes Action Cœur de Ville et Petites villes de demain, le Forum des solutions est une série de rendez-vous mensuels et thématiques conçues pour les villes du programme, mais qui s’adresse également à toutes les collectivités qui souhaitent placer l’innovation au cœur des stratégies de revitalisation urbaine. Chaque rendez-vous permet la présentation par leurs auteurs de projets réalisés répondant aux problématiques rencontrées par ces villes. Il est ouvert à tous les acteurs de l’aménagement du territoire. http://www.urbanisme-puca.gouv.fr/forums-des-solutions-en-videos-a1879.html'
+        logo: forum_solution.png
+    -
+        nom_du_programme: Coubertin
+        texte_de_presentation: 'Le programme de recherche-action Coubertin construit le récit, au fil de l’eau, de la conception des ouvrages et des opérations d’aménagement des Jeux Olympiques et Paralympiques de Paris 2024. À travers une observation embarquée au sein de la SOLIDEO, l’équipe de chercheurs analyse la production architecturale et urbaine et sa capacité à transformer les pratiques d’aménagement.'
+        logo: logo_coubertin.png
+visible: true
+debugger: true
+media_order: '14360_default_big.jpg,10361_web_01.jpg,hyperliens_marseille.PNG,popsu.png,forum_solution.png,europan_france.jpg,logo_coubertin.png'
+process:
+    markdown: true
+    twig: false
+---
+
@@ -0,0 +1,39 @@
+---
+title: Ressources
+body_classes: modular
+media_order: 'rapport_activite_V1.pdf,rapport_activite_V1.png,rapport_activite_V1.pdf'
+visible: true
+debugger: true
+rapports:
+    -
+        titre_du_rapport: 'rapport d''activité 2020'
+        texte_de_presentation: "Courte explicationVita estillis semper in fuga uxoresque mercenariae\r\n infugauxoresque mercenariae conductae ad tempus expacto atque, ut conductae ad tempus ex pacto atque, ut sit species matrimonii, dotis nomine futura coniunx hastam.\r\n"
+        couverture: rapport_activite_V1.png
+        pdf: rapport_activite_V1.pdf
+    -
+        titre_du_rapport: 'rapport 3'
+        texte_de_presentation: "Courte explicationVita estillis semper in fuga uxoresque mercenariae\r\n infugauxoresque mercenariae conductae ad tempus expacto atque, ut conductae ad tempus ex pacto atque, ut sit species matrimonii, dotis nomine futura coniunx hastam.\r\n"
+        couverture: rapport_activite_V1.png
+        pdf: rapport_activite_V1.pdf
+    -
+        titre_du_rapport: 'exemple 3'
+        texte_de_presentation: "Courte explicationVita estillis semper in fuga uxoresque mercenariae\r\n infugauxoresque mercenariae conductae ad tempus expacto atque, ut conductae ad tempus ex pacto atque, ut sit species matrimonii, dotis nomine futura coniunx hastam.\r\n"
+        couverture: rapport_activite_V1.png
+        pdf: rapport_activite_V1.pdf
+    -
+        titre_du_rapport: 'exemple 4'
+        texte_de_presentation: "Courte explicationVita estillis semper in fuga uxoresque mercenariae\r\n infugauxoresque mercenariae conductae ad tempus expacto atque, ut conductae ad tempus ex pacto atque, ut sit species matrimonii, dotis nomine futura coniunx hastam.\r\n"
+        couverture: rapport_activite_V1.png
+        pdf: rapport_activite_V1.pdf
+    -
+        titre_du_rapport: 'exempl 5'
+        texte_de_presentation: "Courte explicationVita estillis semper in fuga uxoresque mercenariae\r\n infugauxoresque mercenariae conductae ad tempus expacto atque, ut conductae ad tempus ex pacto atque, ut sit species matrimonii, dotis nomine futura coniunx hastam.\r\n"
+        couverture: rapport_activite_V1.png
+        pdf: rapport_activite_V1.pdf
+template: modular/rapport_dactivitees
+process:
+    markdown: true
+    twig: false
+---
+
+### Ressources
@@ -1,13 +0,0 @@
---
-title: 'Rapports d''activités'
-body_classes: modular
-media_order: images.jpeg
-visible: true
-debugger: true
---
-
-###  Rapports d’activités de l’Europe des projets architecturaux et urbains 
-
-
-[Lien pour télécharger]() 
-![]images.jpeg(http://)+ images couv
@@ -0,0 +1,19 @@
+---
+title: Présidence
+visible: true
+body_classes: 'modular-row personnes'
+personnes:
+    -
+        nom: 'Hélène Peskine'
+        fonction: 'Présidente du Conseil d’administration'
+        biographie: 'Secrétaire permanente du Plan Urbanisme Construction Architecture, Ministère de la Transition écologique, Ministère de la Cohésion des territoires et des Relations avec les Collectivités territoriales'
+        portrait: null
+admin: {  }
+process:
+    markdown: true
+    twig: true
+debugger: true
+template: modular/personnes
+---
+
+### Présidence
@@ -0,0 +1,16 @@
+---
+title: 'Membres du conseil d''administration'
+visible: true
+body_classes: 'modular-row personnes'
+personnes:
+    -
+        nom: 'Jean-Baptiste Butlen'
+        fonction: 'Membre du Conseil d’administration'
+        biographie: 'Sous-directeur Aménagement durable, Direction Générale de l’Aménagement, du Logement et de la Nature, Ministère de la Transition écologique, Ministère de la Cohésion des territoires et des Relations avec les Collectivités territoriales'
+        portrait: photo_butlen.jpeg
+debugger: true
+template: modular/personnes
+media_order: photo_butlen.jpeg
+---
+
+### Membres du conseil d'administration
@@ -0,0 +1,20 @@
+---
+title: 'Conseil d''dadministration'
+menu: 'Conseil d''dadministration'
+visible: true
+onpage_menu: true
+body_classes: 'modular fullwidth title-center title-h1h2'
+content:
+    items: '@self.modular'
+    order:
+        by: default
+        dir: asc
+        custom:
+            - _presidence
+            - _membres-du-conseil-dadministration
+admin:
+    children_display_order: collection
+debugger: true
+---
+
+## Conseil d'administration
@@ -1,35 +1,18 @@
 ---
-title: Gouvernance
+title: 'Équipe EPAU'
+content:
+    items: '@self.modular'
 visible: true
-body_classes: 'modular personnes'
+debugger: true
+template: modular/personnes
+body_classes: 'modular-row personnes'
 personnes:
-    -
-        nom: 'Hélène Peskine'
-        fonction: 'Présidente du Conseil d’administration'
-        biographie: 'Secrétaire permanente du Plan Urbanisme Construction Architecture, Ministère de la Transition écologique, Ministère de la Cohésion des territoires et des Relations avec les Collectivités territoriales'
-        portrait: {  }
-    -
-        nom: 'Jean-Baptiste Butlen'
-        fonction: 'Membre du Conseil d’administration'
-        biographie: 'Sous-directeur Aménagement durable, Direction Générale de l’Aménagement, du Logement et de la Nature, Ministère de la Transition écologique, Ministère de la Cohésion des territoires et des Relations avec les Collectivités territoriales'
-        portrait:
-            photo_butlen.jpeg:
-                name: photo_butlen.jpeg
-                type: image/jpeg
-                size: 37489
-                path: photo_butlen.jpeg
    -
        nom: 'Alain Maugard'
        fonction: 'Président de l’Association Europan France'
        biographie: "Né le 23 avril 1943 à Nérac (Lot-et-Garonne), Alain Maugard est un ancien élève de l’École polytechnique et Ingénieur général des Ponts et Chaussées. Il débute sa carrière au ministère de l’Équipement au service des Affaires économiques et internationales et dans les services urbanisme construction des Directions Départementales. Chef du service de la politique technique à la direction de la Construction et secrétaire permanent du Plan Construction, de 1978 à 1981, il devient successivement directeur adjoint de cabinet des ministres de l’Urbanisme et du Logement Roger Quilliot et Paul Quilès puis directeur de la Construction au ministère de l’Équipement, du Logement, des Transports et de la Mer. En 1990, il est nommé directeur général de l’Établissement public d’aménagement de la Défense (epad), jusqu’en 1993 où il prend la présidence du cstb. Il quitte ces fonctions en 2008 pour rejoindre le Conseil général de l’environnement et du développement durable où il assure la présidence de la section « risques, sécurité, sûreté ». En septembre 2009, il accède à la présidence de Qualibat. \r\nEn outre, Alain Maugard est membre du conseil d’administration de l’Ademe. Il a également piloté le Comité opérationnel (comop) du chantier n°1 « Bâtiments neufs publics et privés » du Grenelle de l’Environnement. \r\n\r\nBibliographie\_:\r\n- Regards sur le bâtiment — Le futur en construction, éditions Le Moniteur, 2006\r\n - Regard sur la ville durable, Alain Maugard et Jean-Pierre Cuisinier, CSTB, mars 2010\r\n - Le BEPOS pour tous (livre électronique), http://outils.xpair.com/livre/bepos-pourtous/7.htm (25 juin 2015) \r\n"
-        portrait: {  }
-published: true
-debugger: true
-template: modular/personnes
+        portrait: 'Alain Maugard_TROUVE.jpg'
+media_order: 'Alain Maugard_TROUVE.jpg'
 ---

-# Gouvernance
-
-#### Conseil d'administration
-
-#### Equipe EPAU
+## Équipe EPAU
@@ -0,0 +1,20 @@
+---
+title: Gouvernance
+menu: Gouvernance
+visible: true
+onpage_menu: true
+body_classes: 'modular fullwidth title-center title-h1h2'
+content:
+    items: '@self.modular'
+    order:
+        by: default
+        dir: asc
+        custom:
+            - _conseil-dadministration
+            - _equipe-epau
+admin:
+    children_display_order: collection
+debugger: true
+---
+
+# Gouvernance
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="svg2" width="464.19281" height="67.749725" viewBox="0 0 464.19281 67.749726" sodipodi:docname="EPAU_logo_EPAU_vecto-seul.svg" inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata id="metadata8"></metadata>
+  <defs id="defs6"></defs>
+  <g inkscape:groupmode="layer" inkscape:label="Image" id="g10" transform="translate(-1.9140933,-3.5854007)">
+    <g id="g2659" transform="translate(-0.24588468,-1.3522927)">
+      <g aria-label="GROUPEMENT D'INTÉRÊT PUBLIC" transform="matrix(1.3333333,0,0,1.3333333,-336.16364,140.52749)" id="text2223-1-7" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0.600073px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.300037">
+        <path d="m 369.98683,-93.541351 c -0.741,0.49875 -1.63875,0.78375 -2.4795,0.78375 -2.18025,0 -3.91875,-1.72425 -3.91875,-3.876 0,-2.1375 1.72425,-3.847499 3.9045,-3.847499 1.083,0 2.166,0.4275 2.964,1.168499 l 0.78375,-0.997499 c -0.969,-0.855 -2.35125,-1.38225 -3.74775,-1.38225 -2.97825,0 -5.28675,2.222999 -5.28675,5.058749 0,2.85 2.29425,5.1015 5.2155,5.1015 1.35375,0 2.77875,-0.52725 3.77625,-1.311 v -3.66225 h -1.21125 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2476"></path>
+        <path d="m 382.40014,-91.631851 -2.32275,-3.37725 c 1.41075,-0.4845 2.18025,-1.61025 2.18025,-3.23475 0,-2.137499 -1.43925,-3.362999 -3.9615,-3.362999 h -3.9045 v 9.974999 h 1.368 v -3.1065 h 2.5365 c 0.1995,0 0.38475,-0.01425 0.55575,-0.0285 l 1.98075,3.135 z m -6.6405,-4.34625 v -4.388999 h 2.5365 c 1.69575,0 2.6505,0.726749 2.6505,2.165999 0,1.482 -0.95475,2.223 -2.6505,2.223 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2478"></path>
+        <path d="m 389.65496,-101.69235 c -2.9355,0 -5.244,2.208749 -5.244,5.058749 0,2.85 2.3085,5.1015 5.244,5.1015 2.9355,0 5.244,-2.2515 5.244,-5.1015 0,-2.83575 -2.3085,-5.058749 -5.244,-5.058749 z m 0.0143,1.2255 c 2.109,0 3.83325,1.695749 3.83325,3.833249 0,2.1375 -1.72425,3.86175 -3.83325,3.86175 -2.109,0 -3.876,-1.72425 -3.876,-3.86175 0,-2.1375 1.75275,-3.833249 3.876,-3.833249 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2480"></path>
+        <path d="m 398.61976,-95.707351 v -5.899499 h -1.368 v 5.899499 c 0,2.60775 1.596,4.17525 4.23225,4.17525 2.622,0 4.20375,-1.5675 4.20375,-4.17525 v -5.899499 h -1.368 v 5.899499 c 0,1.8525 -1.06875,2.9355 -2.83575,2.9355 -1.767,0 -2.86425,-1.083 -2.86425,-2.9355 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2482"></path>
+        <path d="m 412.77157,-101.60685 h -3.8475 v 9.974999 h 1.368 v -3.1065 h 2.4795 c 2.4795,0 3.9045,-1.2825 3.9045,-3.5055 0,-2.137499 -1.425,-3.362999 -3.9045,-3.362999 z m -0.057,5.628749 h -2.4225 v -4.374749 l 2.4225,-0.0142 c 1.6815,0 2.6505,0.726749 2.6505,2.165999 0,1.482 -0.969,2.223 -2.6505,2.223 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2484"></path>
+        <path d="m 419.08588,-101.60685 v 9.974999 h 7.0965 v -1.23975 h -5.7285 v -3.17775 h 4.97325 v -1.23975 h -4.97325 v -3.077999 h 5.5575 v -1.23975 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2486"></path>
+        <path d="m 428.99121,-101.60685 v 9.974999 h 1.26825 v -7.96575 l 3.57675,6.91125 h 0.84075 l 3.54825,-6.91125 0.0143,7.96575 h 1.2825 v -9.974999 h -1.63875 l -3.6195,7.010999 -3.648,-7.010999 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2488"></path>
+        <path d="m 442.97201,-101.60685 v 9.974999 h 7.0965 v -1.23975 h -5.7285 v -3.17775 h 4.97325 v -1.23975 h -4.97325 v -3.077999 h 5.5575 v -1.23975 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2490"></path>
+        <path d="m 459.97384,-101.60685 v 7.737749 l -5.71425,-7.737749 h -1.38225 v 9.974999 h 1.368 v -7.7235 l 5.7,7.7235 h 1.38225 v -9.974999 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2492"></path>
+        <path d="m 463.50939,-101.60685 v 1.254 h 3.20625 v 8.720999 h 1.368 v -8.720999 h 3.2205 v -1.254 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2494"></path>
+        <path d="m 367.15108,-83.305179 h -4.06125 v 9.975 h 4.0185 c 2.964,0 5.187,-2.1375 5.187,-4.9875 0,-2.86425 -2.20875,-4.9875 -5.14425,-4.9875 z m 0.0285,8.73525 h -2.72175 v -7.4955 h 2.66475 c 2.12325,0 3.77625,1.596 3.77625,3.762 0,2.15175 -1.6245,3.7335 -3.71925,3.7335 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2496"></path>
+        <path d="m 374.27763,-83.305179 v 3.32025 h 1.04025 v -3.32025 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2498"></path>
+        <path d="m 378.19794,-83.305179 v 9.975 h 1.368 v -9.975 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2500"></path>
+        <path d="m 390.11251,-83.305179 v 7.73775 l -5.71425,-7.73775 h -1.38225 v 9.975 h 1.368 v -7.7235 l 5.7,7.7235 h 1.38225 v -9.975 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2502"></path>
+        <path d="m 393.64806,-83.305179 v 1.254 h 3.20625 v 8.721 h 1.368 v -8.721 h 3.2205 v -1.254 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2504"></path>
+        <path d="m 407.97088,-86.183679 -1.52475,1.8525 1.12575,0.1425 1.767,-1.3965 z m -4.3605,2.8785 v 9.975 h 7.0965 v -1.23975 h -5.7285 v -3.17775 h 4.97325 v -1.23975 h -4.97325 v -3.078 h 5.5575 v -1.23975 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2506"></path>
+        <path d="m 421.5242,-73.330179 -2.32275,-3.37725 c 1.41075,-0.4845 2.18025,-1.61025 2.18025,-3.23475 0,-2.1375 -1.43925,-3.363 -3.9615,-3.363 h -3.9045 v 9.975 h 1.368 v -3.1065 h 2.5365 c 0.1995,0 0.38475,-0.01425 0.55575,-0.0285 l 1.98075,3.135 z m -6.6405,-4.34625 v -4.389 h 2.5365 c 1.69575,0 2.6505,0.72675 2.6505,2.166 0,1.482 -0.95475,2.223 -2.6505,2.223 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2508"></path>
+        <path d="m 427.99527,-85.214679 0.86925,0.95475 h 1.32525 l -1.49625,-1.89525 h -1.3965 l -1.49625,1.89525 h 1.32525 z m -2.20875,10.64475 v -3.17775 h 4.97325 v -1.23975 h -4.97325 v -3.078 h 5.5575 v -1.23975 h -6.9255 v 9.975 h 7.0965 v -1.23975 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2510"></path>
+        <path d="m 433.04133,-83.305179 v 1.254 h 3.20625 v 8.721 h 1.368 v -8.721 h 3.2205 v -1.254 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2512"></path>
+        <path d="m 451.18472,-83.305179 h -3.8475 v 9.975 h 1.368 v -3.1065 h 2.4795 c 2.4795,0 3.9045,-1.2825 3.9045,-3.5055 0,-2.1375 -1.425,-3.363 -3.9045,-3.363 z m -0.057,5.62875 h -2.4225 v -4.37475 l 2.4225,-0.01425 c 1.6815,0 2.6505,0.72675 2.6505,2.166 0,1.482 -0.969,2.223 -2.6505,2.223 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2514"></path>
+        <path d="m 458.65328,-77.405679 v -5.8995 h -1.368 v 5.8995 c 0,2.60775 1.596,4.17525 4.23225,4.17525 2.622,0 4.20375,-1.5675 4.20375,-4.17525 v -5.8995 h -1.368 v 5.8995 c 0,1.8525 -1.06875,2.9355 -2.83575,2.9355 -1.767,0 -2.86425,-1.083 -2.86425,-2.9355 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2516"></path>
+        <path d="m 473.21834,-83.305179 h -4.26075 v 9.975 h 4.332 c 2.26575,0 3.6195,-1.01175 3.6195,-2.72175 0,-1.35375 -0.8265,-2.3085 -2.223,-2.52225 1.12575,-0.2565 1.80975,-1.09725 1.80975,-2.23725 0,-1.55325 -1.23975,-2.49375 -3.2775,-2.49375 z m -0.0713,4.23225 h -2.8215 v -2.97825 h 2.8215 c 1.2255,-0.01425 1.938,0.513 1.938,1.46775 0,0.969 -0.7125,1.5105 -1.938,1.5105 z m 0,4.48875 h -2.8215 v -3.249 h 2.8215 c 1.482,0 2.3655,0.5985 2.3655,1.61025 0,1.0545 -0.8835,1.653 -2.3655,1.63875 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2518"></path>
+        <path d="m 479.70366,-83.305179 v 9.975 h 5.7285 v -1.23975 h -4.3605 v -8.73525 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2520"></path>
+        <path d="m 487.77071,-83.305179 v 9.975 h 1.368 v -9.975 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2522"></path>
+        <path d="m 499.81352,-80.911179 0.81225,-0.98325 c -0.95475,-0.9405 -2.32275,-1.49625 -3.705,-1.49625 -2.92125,0 -5.2155,2.223 -5.2155,5.05875 0,2.85 2.26575,5.1015 5.1585,5.1015 1.3965,0 2.77875,-0.61275 3.77625,-1.58175 l -0.8265,-0.89775 c -0.7695,0.741 -1.824,1.197 -2.8785,1.197 -2.1375,0 -3.8475,-1.71 -3.8475,-3.83325 0,-2.1375 1.71,-3.83325 3.8475,-3.83325 1.06875,0 2.12325,0.4845 2.8785,1.26825 z" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:Montserrat;fill:#000000;fill-opacity:1;stroke-width:0.300037" id="path2524"></path>
+      </g>
+      <g aria-label="L'Europe des Projets Architecturaux et Urbains" transform="matrix(1.3333333,0,0,1.3333333,-336.16364,140.52749)" id="text2253-8-1" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;line-height:0;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0.15px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.997733">
+        <path d="m 254.7911,-63.733707 v 9.98925 h 6.84 v -2.223 h -4.23225 v -7.76625 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2527"></path>
+        <path d="m 262.84984,-63.733707 v 3.9615 h 1.9095 v -3.9615 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2529"></path>
+        <path d="m 266.73334,-63.733707 v 9.98925 h 8.02275 v -2.0805 h -5.415 v -1.881 l 4.7595,-0.01425 v -2.06625 h -4.7595 v -1.86675 h 5.2725 v -2.0805 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2531"></path>
+        <path d="m 281.48958,-61.453707 v 3.80475 c 0,1.01175 -0.5415,1.72425 -1.43925,1.7385 -0.75525,0 -1.23975,-0.52725 -1.23975,-1.3965 v -4.14675 h -2.5365 v 4.8735 c 0,1.7955 1.083,2.94975 2.75025,2.94975 1.09725,-0.01425 1.938,-0.47025 2.46525,-1.368 v 1.254 h 2.5365 v -7.70925 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2533"></path>
+        <path d="m 288.65057,-60.171207 v -1.2825 h -2.5365 v 7.70925 h 2.5365 v -3.933 c 0.12825,-1.06875 1.06875,-1.69575 2.4795,-1.55325 v -2.32275 c -1.083,0 -1.95225,0.49875 -2.4795,1.38225 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2535"></path>
+        <path d="m 295.9683,-61.539207 c -2.5365,0 -4.20375,1.5675 -4.20375,3.933 0,2.37975 1.66725,3.94725 4.20375,3.94725 2.5365,0 4.218,-1.5675 4.218,-3.94725 0,-2.3655 -1.6815,-3.933 -4.218,-3.933 z m 0,2.052 c 0.9975,0 1.66725,0.7695 1.66725,1.9095 0,1.15425 -0.66975,1.92375 -1.66725,1.92375 -0.98325,0 -1.653,-0.7695 -1.653,-1.92375 0,-1.14 0.66975,-1.9095 1.653,-1.9095 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2537"></path>
+        <path d="m 306.50653,-61.539207 c -0.95475,0 -1.72425,0.38475 -2.26575,1.083 v -0.9975 h -2.5365 v 10.47375 h 2.5365 v -3.762 c 0.5415,0.69825 1.3395,1.083 2.32275,1.083 2.1375,0 3.534,-1.55325 3.534,-3.9045 0,-2.394 -1.43925,-3.97575 -3.591,-3.97575 z m -0.627,5.82825 c -0.969,0 -1.63875,-0.7695 -1.63875,-1.9095 0,-1.14 0.66975,-1.92375 1.63875,-1.92375 0.9975,0 1.66725,0.78375 1.66725,1.92375 0,1.14 -0.66975,1.9095 -1.66725,1.9095 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2539"></path>
+        <path d="m 314.95002,-61.539207 c -2.40825,0 -4.0185,1.58175 -4.0185,3.97575 0,2.35125 1.55325,3.9045 4.0755,3.9045 1.425,0 2.57925,-0.4845 3.363,-1.368 l -1.32525,-1.32525 c -0.513,0.513 -1.15425,0.78375 -1.80975,0.78375 -0.86925,0 -1.5105,-0.4845 -1.75275,-1.35375 h 5.358 c 0.171,-2.80725 -1.197,-4.617 -3.89025,-4.617 z m -1.52475,3.26325 c 0.171,-0.8835 0.7125,-1.482 1.539,-1.482 0.855,0 1.425,0.5985 1.425,1.482 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2541"></path>
+        <path d="m 328.85872,-64.317957 v 3.876 c -0.5415,-0.69825 -1.3395,-1.09725 -2.337,-1.09725 -2.12325,0 -3.534,1.55325 -3.534,3.9045 0,2.394 1.425,3.99 3.591,3.99 0.969,0 1.75275,-0.38475 2.28,-1.09725 v 0.9975 h 2.5365 v -10.5735 z m -1.653,8.67825 c -0.9975,0 -1.66725,-0.78375 -1.66725,-1.92375 0,-1.14 0.66975,-1.92375 1.66725,-1.92375 0.98325,0 1.653,0.7695 1.653,1.92375 0,1.14 -0.66975,1.92375 -1.653,1.92375 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2543"></path>
+        <path d="m 336.94595,-61.539207 c -2.40825,0 -4.0185,1.58175 -4.0185,3.97575 0,2.35125 1.55325,3.9045 4.0755,3.9045 1.425,0 2.57925,-0.4845 3.363,-1.368 l -1.32525,-1.32525 c -0.513,0.513 -1.15425,0.78375 -1.80975,0.78375 -0.86925,0 -1.5105,-0.4845 -1.75275,-1.35375 h 5.358 c 0.171,-2.80725 -1.197,-4.617 -3.89025,-4.617 z m -1.52475,3.26325 c 0.171,-0.8835 0.7125,-1.482 1.539,-1.482 0.855,0 1.425,0.5985 1.425,1.482 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2545"></path>
+        <path d="m 347.44143,-59.016957 0.855,-1.653 c -0.969,-0.58425 -2.09475,-0.89775 -3.20625,-0.89775 -1.80975,0 -3.1635,0.8835 -3.1635,2.49375 0,2.66475 3.97575,2.1375 3.97575,3.192 0,0.3135 -0.342,0.47025 -0.81225,0.47025 -0.855,0 -1.8525,-0.342 -2.736,-0.95475 l -0.798,1.63875 c 0.9405,0.72675 2.18025,1.09725 3.477,1.09725 1.881,0 3.26325,-0.89775 3.26325,-2.4795 0.0143,-2.679 -4.03275,-2.1945 -4.03275,-3.20625 0,-0.32775 0.29925,-0.4845 0.72675,-0.4845 0.627,0 1.49625,0.285 2.451,0.78375 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2547"></path>
+        <path d="m 357.51688,-63.733707 h -4.389 v 9.98925 h 2.60775 v -2.7645 h 1.78125 c 2.55075,0 4.0185,-1.368 4.0185,-3.71925 0,-2.223 -1.46775,-3.5055 -4.0185,-3.5055 z m -0.12825,5.14425 h -1.653 v -3.06375 h 1.653 c 1.0545,0 1.66725,0.52725 1.66725,1.5105 0,1.01175 -0.61275,1.55325 -1.66725,1.55325 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2549"></path>
+        <path d="m 365.50436,-60.171207 v -1.2825 h -2.5365 v 7.70925 h 2.5365 v -3.933 c 0.12825,-1.06875 1.06875,-1.69575 2.4795,-1.55325 v -2.32275 c -1.083,0 -1.95225,0.49875 -2.4795,1.38225 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2551"></path>
+        <path d="m 372.82209,-61.539207 c -2.5365,0 -4.20375,1.5675 -4.20375,3.933 0,2.37975 1.66725,3.94725 4.20375,3.94725 2.5365,0 4.218,-1.5675 4.218,-3.94725 0,-2.3655 -1.6815,-3.933 -4.218,-3.933 z m 0,2.052 c 0.9975,0 1.66725,0.7695 1.66725,1.9095 0,1.15425 -0.66975,1.92375 -1.66725,1.92375 -0.98325,0 -1.653,-0.7695 -1.653,-1.92375 0,-1.14 0.66975,-1.9095 1.653,-1.9095 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2553"></path>
+        <path d="m 379.74081,-65.001957 c -0.78375,0 -1.3395,0.55575 -1.3395,1.35375 0,0.78375 0.55575,1.35375 1.3395,1.35375 0.78375,0 1.3395,-0.57 1.3395,-1.35375 0,-0.798 -0.55575,-1.35375 -1.3395,-1.35375 z m -2.622,12.01275 -0.49875,1.80975 c 0.4845,0.18525 1.0545,0.29925 1.66725,0.29925 1.69575,0.01425 2.7645,-0.95475 2.7645,-2.57925 v -7.99425 h -2.5365 v 7.6095 c 0,0.64125 -0.285,0.969 -0.798,0.95475 -0.1995,0 -0.399,-0.04275 -0.5985,-0.09975 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2555"></path>
+        <path d="m 386.47428,-61.539207 c -2.40825,0 -4.0185,1.58175 -4.0185,3.97575 0,2.35125 1.55325,3.9045 4.0755,3.9045 1.425,0 2.57925,-0.4845 3.363,-1.368 l -1.32525,-1.32525 c -0.513,0.513 -1.15425,0.78375 -1.80975,0.78375 -0.86925,0 -1.5105,-0.4845 -1.75275,-1.35375 h 5.358 c 0.171,-2.80725 -1.197,-4.617 -3.89025,-4.617 z m -1.52475,3.26325 c 0.171,-0.8835 0.7125,-1.482 1.539,-1.482 0.855,0 1.425,0.5985 1.425,1.482 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2557"></path>
+        <path d="m 396.35702,-55.938957 c -0.3705,0.15675 -0.69825,0.2565 -0.95475,0.2565 -0.44175,0.01425 -0.69825,-0.24225 -0.69825,-0.81225 v -2.907 h 1.995 v -1.6815 h -1.995 v -2.1375 h -2.52225 v 2.1375 h -1.06875 v 1.6815 h 1.06875 v 3.306 c 0,1.596 1.083,2.4795 2.57925,2.46525 0.75525,0 1.52475,-0.18525 2.0805,-0.513 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2559"></path>
+        <path d="m 403.347,-59.016957 0.855,-1.653 c -0.969,-0.58425 -2.09475,-0.89775 -3.20625,-0.89775 -1.80975,0 -3.1635,0.8835 -3.1635,2.49375 0,2.66475 3.97575,2.1375 3.97575,3.192 0,0.3135 -0.342,0.47025 -0.81225,0.47025 -0.855,0 -1.8525,-0.342 -2.736,-0.95475 l -0.798,1.63875 c 0.9405,0.72675 2.18025,1.09725 3.477,1.09725 1.881,0 3.26325,-0.89775 3.26325,-2.4795 0.0143,-2.679 -4.03275,-2.1945 -4.03275,-3.20625 0,-0.32775 0.29925,-0.4845 0.72675,-0.4845 0.627,0 1.49625,0.285 2.451,0.78375 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2561"></path>
+        <path d="m 416.3722,-53.744457 h 2.77875 l -4.1895,-9.98925 h -2.679 l -4.28925,9.98925 h 2.679 l 0.69825,-1.767 h 4.31775 z m -4.218,-3.762 1.3965,-3.5625 1.368,3.5625 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2563"></path>
+        <path d="m 422.73518,-60.171207 v -1.2825 h -2.5365 v 7.70925 h 2.5365 v -3.933 c 0.12825,-1.06875 1.06875,-1.69575 2.4795,-1.55325 v -2.32275 c -1.083,0 -1.95225,0.49875 -2.4795,1.38225 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2565"></path>
+        <path d="m 431.44941,-58.646457 1.83825,-1.06875 c -0.66975,-1.15425 -1.89525,-1.824 -3.4485,-1.824 -2.394,0 -3.99,1.58175 -3.99,3.97575 0,2.35125 1.58175,3.9045 3.9615,3.9045 1.63875,0 2.89275,-0.66975 3.5055,-1.8525 l -1.86675,-1.06875 c -0.3135,0.5985 -0.84075,0.86925 -1.5105,0.86925 -0.912,0 -1.539,-0.741 -1.539,-1.86675 0,-1.1115 0.627,-1.86675 1.539,-1.86675 0.6555,0 1.1685,0.29925 1.5105,0.798 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2567"></path>
+        <path d="m 439.79313,-61.553457 c -1.12575,0 -2.00925,0.47025 -2.55075,1.35375 v -4.11825 h -2.5365 v 10.5735 h 2.5365 v -3.80475 c 0,-1.01175 0.57,-1.72425 1.5105,-1.7385 0.81225,0 1.311,0.5415 1.311,1.41075 v 4.1325 h 2.5365 v -4.85925 c 0,-1.80975 -1.1115,-2.94975 -2.80725,-2.94975 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2569"></path>
+        <path d="m 445.70011,-65.001957 c -0.78375,0 -1.3395,0.55575 -1.3395,1.35375 0,0.78375 0.55575,1.35375 1.3395,1.35375 0.78375,0 1.3395,-0.57 1.3395,-1.35375 0,-0.798 -0.55575,-1.35375 -1.3395,-1.35375 z m -1.23975,3.54825 v 7.70925 h 2.52225 v -7.70925 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2571"></path>
+        <path d="m 453.60212,-55.938957 c -0.3705,0.15675 -0.69825,0.2565 -0.95475,0.2565 -0.44175,0.01425 -0.69825,-0.24225 -0.69825,-0.81225 v -2.907 h 1.995 v -1.6815 h -1.995 v -2.1375 h -2.52225 v 2.1375 h -1.06875 v 1.6815 h 1.06875 v 3.306 c 0,1.596 1.083,2.4795 2.57925,2.46525 0.75525,0 1.52475,-0.18525 2.0805,-0.513 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2573"></path>
+        <path d="m 458.7966,-61.539207 c -2.40825,0 -4.0185,1.58175 -4.0185,3.97575 0,2.35125 1.55325,3.9045 4.0755,3.9045 1.425,0 2.57925,-0.4845 3.363,-1.368 l -1.32525,-1.32525 c -0.513,0.513 -1.15425,0.78375 -1.80975,0.78375 -0.86925,0 -1.5105,-0.4845 -1.75275,-1.35375 h 5.358 c 0.171,-2.80725 -1.197,-4.617 -3.89025,-4.617 z m -1.52475,3.26325 c 0.171,-0.8835 0.7125,-1.482 1.539,-1.482 0.855,0 1.425,0.5985 1.425,1.482 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2575"></path>
+        <path d="m 469.12107,-58.646457 1.83825,-1.06875 c -0.66975,-1.15425 -1.89525,-1.824 -3.4485,-1.824 -2.394,0 -3.99,1.58175 -3.99,3.97575 0,2.35125 1.58175,3.9045 3.9615,3.9045 1.63875,0 2.89275,-0.66975 3.5055,-1.8525 l -1.86675,-1.06875 c -0.3135,0.5985 -0.84075,0.86925 -1.5105,0.86925 -0.912,0 -1.539,-0.741 -1.539,-1.86675 0,-1.1115 0.627,-1.86675 1.539,-1.86675 0.6555,0 1.1685,0.29925 1.5105,0.798 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2577"></path>
+        <path d="m 476.8378,-55.938957 c -0.3705,0.15675 -0.69825,0.2565 -0.95475,0.2565 -0.44175,0.01425 -0.69825,-0.24225 -0.69825,-0.81225 v -2.907 h 1.995 v -1.6815 h -1.995 v -2.1375 h -2.52225 v 2.1375 h -1.06875 v 1.6815 h 1.06875 v 3.306 c 0,1.596 1.083,2.4795 2.57925,2.46525 0.75525,0 1.52475,-0.18525 2.0805,-0.513 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2579"></path>
+        <path d="m 483.67102,-61.453707 v 3.80475 c 0,1.01175 -0.5415,1.72425 -1.43925,1.7385 -0.75525,0 -1.23975,-0.52725 -1.23975,-1.3965 v -4.14675 h -2.5365 v 4.8735 c 0,1.7955 1.083,2.94975 2.75025,2.94975 1.09725,-0.01425 1.938,-0.47025 2.46525,-1.368 v 1.254 h 2.5365 v -7.70925 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2581"></path>
+        <path d="m 490.83202,-60.171207 v -1.2825 h -2.5365 v 7.70925 h 2.5365 v -3.933 c 0.12825,-1.06875 1.06875,-1.69575 2.4795,-1.55325 v -2.32275 c -1.083,0 -1.95225,0.49875 -2.4795,1.38225 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2583"></path>
+        <path d="m 499.80274,-61.453707 v 0.9975 c -0.5415,-0.69825 -1.35375,-1.09725 -2.337,-1.083 -2.12325,0 -3.51975,1.55325 -3.51975,3.9045 0,2.394 1.425,3.99 3.591,3.99 0.95475,0 1.7385,-0.38475 2.26575,-1.06875 v 0.969 h 2.5365 v -7.70925 z m -1.63875,5.814 c -0.9975,0 -1.66725,-0.78375 -1.66725,-1.92375 0,-1.14 0.66975,-1.92375 1.66725,-1.92375 0.912,0 1.539,0.6555 1.63875,1.66725 v 0.513 c -0.0997,0.9975 -0.72675,1.66725 -1.63875,1.66725 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:'Montserrat Alternates';-inkscape-font-specification:'Montserrat Alternates Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2585"></path>
+        <path d="m 509.41474,-61.453707 v 3.80475 c 0,1.01175 -0.5415,1.72425 -1.43925,1.7385 -0.75525,0 -1.23975,-0.52725 -1.23975,-1.3965 v -4.14675 h -2.5365 v 4.8735 c 0,1.7955 1.083,2.94975 2.75025,2.94975 1.09725,-0.01425 1.938,-0.47025 2.46525,-1.368 v 1.254 h 2.5365 v -7.70925 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2587"></path>
+        <path d="m 513.28399,-61.453707 2.451,3.762 -2.622,3.94725 h 2.793 l 1.52475,-2.35125 1.368,2.35125 h 2.92125 l -2.60775,-3.94725 2.43675,-3.762 h -2.77875 l -1.3395,2.166 -1.23975,-2.166 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2589"></path>
+        <path d="m 529.60093,-61.539207 c -2.40825,0 -4.0185,1.58175 -4.0185,3.97575 0,2.35125 1.55325,3.9045 4.0755,3.9045 1.425,0 2.57925,-0.4845 3.363,-1.368 l -1.32525,-1.32525 c -0.513,0.513 -1.15425,0.78375 -1.80975,0.78375 -0.86925,0 -1.5105,-0.4845 -1.75275,-1.35375 h 5.358 c 0.171,-2.80725 -1.197,-4.617 -3.89025,-4.617 z m -1.52475,3.26325 c 0.171,-0.8835 0.7125,-1.482 1.539,-1.482 0.855,0 1.425,0.5985 1.425,1.482 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2591"></path>
+        <path d="m 539.48367,-55.938957 c -0.3705,0.15675 -0.69825,0.2565 -0.95475,0.2565 -0.44175,0.01425 -0.69825,-0.24225 -0.69825,-0.81225 v -2.907 h 1.995 v -1.6815 h -1.995 v -2.1375 h -2.52225 v 2.1375 h -1.06875 v 1.6815 h 1.06875 v 3.306 c 0,1.596 1.083,2.4795 2.57925,2.46525 0.75525,0 1.52475,-0.18525 2.0805,-0.513 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2593"></path>
+        <path d="m 547.07962,-57.862707 v -5.871 h -2.60775 v 5.871 c 0,2.622 1.7955,4.3035 4.56,4.3035 2.7645,0 4.503,-1.6815 4.503,-4.3035 v -5.871 h -2.60775 v 5.871 c 0,1.29675 -0.7695,2.0805 -1.881,2.0805 -1.12575,0 -1.9665,-0.798 -1.9665,-2.0805 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2595"></path>
+        <path d="m 558.00259,-60.171207 v -1.2825 h -2.5365 v 7.70925 h 2.5365 v -3.933 c 0.12825,-1.06875 1.06875,-1.69575 2.4795,-1.55325 v -2.32275 c -1.083,0 -1.95225,0.49875 -2.4795,1.38225 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2597"></path>
+        <path d="m 566.61708,-61.539207 c -0.95475,0 -1.72425,0.38475 -2.26575,1.083 v -3.86175 h -2.5365 v 10.5735 h 2.5365 v -0.9975 c 0.5415,0.69825 1.3395,1.083 2.32275,1.083 2.1375,0 3.534,-1.55325 3.534,-3.9045 0,-2.394 -1.43925,-3.97575 -3.591,-3.97575 z m -0.627,5.82825 c -0.969,0 -1.63875,-0.7695 -1.63875,-1.9095 0,-1.14 0.66975,-1.92375 1.63875,-1.92375 0.9975,0 1.66725,0.78375 1.66725,1.92375 0,1.14 -0.66975,1.9095 -1.66725,1.9095 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2599"></path>
+        <path d="m 576.89881,-61.453707 v 0.9975 c -0.5415,-0.69825 -1.35375,-1.09725 -2.337,-1.083 -2.12325,0 -3.51975,1.55325 -3.51975,3.9045 0,2.394 1.425,3.99 3.591,3.99 0.95475,0 1.7385,-0.38475 2.26575,-1.06875 v 0.969 h 2.5365 v -7.70925 z m -1.63875,5.814 c -0.9975,0 -1.66725,-0.78375 -1.66725,-1.92375 0,-1.14 0.66975,-1.92375 1.66725,-1.92375 0.912,0 1.539,0.6555 1.63875,1.66725 v 0.513 c -0.0997,0.9975 -0.72675,1.66725 -1.63875,1.66725 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:'Montserrat Alternates';-inkscape-font-specification:'Montserrat Alternates Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2601"></path>
+        <path d="m 582.76306,-65.001957 c -0.78375,0 -1.3395,0.55575 -1.3395,1.35375 0,0.78375 0.55575,1.35375 1.3395,1.35375 0.78375,0 1.3395,-0.57 1.3395,-1.35375 0,-0.798 -0.55575,-1.35375 -1.3395,-1.35375 z m -1.23975,3.54825 v 7.70925 h 2.52225 v -7.70925 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2603"></path>
+        <path d="m 591.22082,-61.553457 c -1.12575,0 -2.00925,0.47025 -2.55075,1.35375 v -1.254 h -2.5365 v 7.70925 h 2.5365 v -4.0755 c 0.0997,-0.86925 0.6555,-1.4535 1.5105,-1.46775 0.798,0 1.311,0.5415 1.311,1.41075 v 4.1325 h 2.52225 v -4.85925 c 0,-1.80975 -1.1115,-2.94975 -2.793,-2.94975 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2605"></path>
+        <path d="m 601.0323,-59.016957 0.855,-1.653 c -0.969,-0.58425 -2.09475,-0.89775 -3.20625,-0.89775 -1.80975,0 -3.1635,0.8835 -3.1635,2.49375 0,2.66475 3.97575,2.1375 3.97575,3.192 0,0.3135 -0.342,0.47025 -0.81225,0.47025 -0.855,0 -1.8525,-0.342 -2.736,-0.95475 l -0.798,1.63875 c 0.9405,0.72675 2.18025,1.09725 3.477,1.09725 1.881,0 3.26325,-0.89775 3.26325,-2.4795 0.0143,-2.679 -4.03275,-2.1945 -4.03275,-3.20625 0,-0.32775 0.29925,-0.4845 0.72675,-0.4845 0.627,0 1.49625,0.285 2.451,0.78375 z" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.25px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Bold';fill:#000000;fill-opacity:1;stroke-width:0.997733" id="path2607"></path>
+      </g>
+      <path d="m 27.111978,43.20747 h -24.952 V 5.0568 h 24.952 v 8.85467 H 12.186645 v 5.569334 H 25.441311 V 28.33679 H 12.186645 v 6.01468 h 14.925333 z" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.33333" id="path298-1-6"></path>
+      <path d="m 51.505177,18.032937 c 0,-1.3 -0.454667,-2.31068 -1.364,-3.03468 -0.910667,-0.723986 -2.164,-1.086653 -3.76,-1.086653 h -3.118666 v 8.242653 h 3.118666 c 1.596,0 2.849333,-0.362653 3.76,-1.086653 0.909333,-0.724 1.364,-1.734667 1.364,-3.034667 M 43.262511,43.207603 H 33.515844 V 5.056933 h 12.865333 c 4.604,0 8.28,1.169334 11.028,3.506671 2.746666,2.34 4.122666,5.497333 4.122666,9.469333 0,3.97332 -1.376,7.12932 -4.122666,9.469333 -2.748,2.33732 -6.424,3.506667 -11.028,3.506667 h -3.118666 z" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.33333" id="path302-2-8"></path>
+      <path d="m 79.632776,16.918404 -4.4,11.751986 h 8.744 z M 99.850109,43.207723 H 89.435443 l -2.228,-5.959986 H 72.00211 l -2.228,5.959986 H 59.916777 L 74.95411,5.057067 h 9.858666 z" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.33333" id="path306-3-9"></path>
+      <path d="m 118.06251,43.764803 c -4.864,0 -8.72532,-1.448 -11.584,-4.345333 -2.86,-2.896 -4.28932,-6.83068 -4.28932,-11.80668 V 5.0568 h 10.02532 v 22.445337 c 0,2.228 0.52,3.972 1.55868,5.234653 1.03865,1.26268 2.47065,1.893347 4.28932,1.893347 1.81868,0 3.24933,-0.630667 4.28933,-1.893347 1.03867,-1.262653 1.55867,-3.006653 1.55867,-5.234653 V 5.0568 h 10.02533 v 22.55599 c 0,4.976 -1.42933,8.91068 -4.28933,11.80668 -2.85867,2.897333 -6.72132,4.345333 -11.584,4.345333" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.33333" id="path310-57-6"></path>
+    </g>
+  </g>
+</svg>
@@ -11,9 +11,9 @@ content:
        custom:
            - _accueil
            - _programmes
-            - _rapports-dactivites
+            - _rapports-dactivitees
            - _gouvernance
            - _contact
-media_order: 'jeux-olypiques-paris-2024-village-athle-lot-e2.jpg,Logotype_GIP_EPAU.svg.png'
+media_order: 'EPAU_logo_EPAU_vecto-seul.svg,Republique-francaise-logo.svg,popsu.png'
 ---

@@ -1,19 +0,0 @@
---
-title: 'Plateforme d’observation des projets et stratégies urbaine'
-media_order: POPSU2018_LOGO_moinsde6cm_sscartouche.png
-content:
-    items: '@self.modular'
-visible: false
---
-
-Lieu de convergence des milieux de la recherche
-et de ceux qui font et gouvernent les villes, la
-Plateforme d’observation des projets et
-stratégies urbaines – POPSU – croise les savoirs
-scientifiques et l’expertise opérationnelle pour
-mieux comprendre les enjeux et les évolutions
-associés aux villes et aux territoires. Elle
-capitalise, à des fins d’action, les connaissances
-établies sur les métropoles et en assure la
-diffusion auprès de publics divers :
-professionnels, académiques, grand public...
@@ -1,18 +0,0 @@
---
-title: European
-media_order: 'Europan France.jpg'
-visible: false
---
-
-# Europan
-
-Europan est un concours d’idées d’architecture
-et d’urbanisme se déroulant tous les deux ans
-simultanément dans une vingtaine de pays
-européens, sur un thème et un règlement
-communs. Dans chaque pays des sites sont
-proposés par des collectivités territoriales et
-leurs partenaires. Ce concours est suivi de
-réalisation in-situ pour les équipes sélectionnées.
-Europan facilite le dialogue sur les modes de
-faire la ville à toutes les échelles.
@@ -1,16 +0,0 @@
---
-title: Coubertin
-visible: false
---
-
-# Coubertin
-
-Le programme de recherche-action Coubertin
-construit le récit, au fil de l’eau, de la conception
-des ouvrages et des opérations d’aménagement
-des Jeux Olympiques et Paralympiques de Paris
-2024. À travers une observation embarquée au
-sein de la SOLIDEO, l’équipe de chercheurs
-analyse la production architecturale et urbaine et
-sa capacité à transformer les pratiques
-d’aménagement.
@@ -1,20 +0,0 @@
---
-title: 'Forum des Solutions'
-media_order: forum_solution.png
-visible: false
---
-
-# Forum des Solutions
-
-Prolongement physique des programmes Action
-Cœur de Ville et Petites villes de demain, le
-Forum des solutions est une série de rendez-vous
-mensuels et thématiques conçues pour les villes
-du programme, mais qui s’adresse également à
-toutes les collectivités qui souhaitent placer
-l’innovation au cœur des stratégies de
-revitalisation urbaine. Chaque rendez-vous
-permet la présentation par leurs auteurs de
-projets réalisés répondant aux problématiques
-rencontrées par ces villes. Il est ouvert à tous les
-acteurs de l’aménagement du territoire.
@@ -1,5 +0,0 @@
---
-title: 'Rapports d''activités'
-visible: false
---
-
@@ -1,17 +0,0 @@
---
-title: Programmes
-menu: Programmes
-onpage_menu: true
-body_classes: 'modular header-image fullwidth'
-content:
-    items: '@self.modular'
-    order:
-        by: default
-        dir: asc
-        custom:
-            - _popsu
-            - _european
-published: true
-visible: false
---
-
@@ -1,7 +0,0 @@
---
-title: 'Conseil d''administration de l''Europe des projets arcitecturaux et urbains'
-content:
-    items: '@self.modular'
-visible: false
---
-
@@ -1,20 +0,0 @@
---
-title: 'Membres du conseil d''administration'
-visible: false
-body_classes: modular
-class: small
-content:
-    items: '@self.modular'
-features:
-    -
-        nom: 'Jean-Baptiste Butlen'
-        fonction: 'Sous-directeur Aménagement durable, Direction Générale de l’Aménagement, du Logement et de la Nature, Ministère de la Transition écologique, Ministère de la Cohésion des territoires et des Relations avec les Collectivités territoriales'
-        biographie: null
-        portrait: {  }
-    -
-        nom: 'Alain Maugard'
-        fonction: 'Président de l’Association Europan France'
-        biographie: "Jean-Baptiste Butlen, ingénieur en chef des Ponts, des\r\nEaux et des Forêts, diplômé de l’Ecole Nationale du\r\nGénie Rural des Eaux et des Forêts au sein\r\nd’AgroParisTech et de l’Ecole Nationale Supérieure\r\nAgronomique de Rennes. Il est également diplômé de\r\nl’Institut National Agronomique de Paris Grignon. Il est\r\n exemple de bio\r\naujourd’hui Sous-directeur de l’aménagement durable déployée\r\n au\r\nsein de la Direction de l’Habitat, de l’Urbanisme, et des\r\n (décale les blocs\r\nPaysages. Les équipes de cette sous-direction traitent des\r\n autour)\r\nstratégies\r\n territoriales,\r\n des\r\n grandes\r\n opérations\r\nd’urbanisme, des politiques foncières, de l’aménagement\r\nopérationnel durable et de la fiscalité de l’aménagement\r\ndurable. Il a occupé précédemment différentes fonctions\r\nau sein du Ministère du Développement durable\r\nnotamment celle d’Adjoint au Sous-directeur de l’action\r\nterritoriale à la Direction de l’Eau et de la Biodiversité. Il a\r\npar ailleurs été Directeur Général Adjoint en charge des\r\nFinances, des Territoires, du Développement Durable, de\r\nl’Innovation et de la Communication à l’entreprise\r\npublique de la Ville de Paris, Eau de Paris.\r\n\r\n### BIBLIOGRAPHIE\r\n• _Regards sur lebâtiment, Le futur en construction_,éditionsLe Moniteur,\r\n2006\r\n• _Regard surla ville durable,_ Alain Maugard et Jean-Pierre Cuisinier,\r\nCSTB, mars 2010\r\n•_ Le BEPOSpour tous_ (livre électronique), 5 juin 2015\r\n"
-        portrait: {  }
---
-
@@ -1,7 +0,0 @@
---
-title: 'Présidente du Conseil d’administration'
-visible: false
---
-
-# Hélène Peskine
-Secrétaire permanente du Plan Urbanisme Construction Architecture, Ministère de la Transition écologique, Ministère de la Cohésion des territoires et des Relations avec les Collectivités territoriales
@@ -1,7 +0,0 @@
---
-title: 'Equipe de l''EPAU'
-content:
-    items: '@self.modular'
-visible: false
---
-
@@ -1,5 +0,0 @@
---
-title: Gouvernance
-visible: false
---
-
@@ -1,7 +0,0 @@
---
-title: Coubertin
-body_classes: modular
---
-
-### Coubertin 
-Le programme de recherche-action Coubertin construit le récit, au fil de l’eau, de la conception des ouvrages et des opérations d’aménagement des Jeux Olympiques et Paralympiques de Paris 2024. À travers une observation embarquée au sein de la SOLIDEO, l’équipe de chercheurs analyse la production architecturale et urbaine et sa capacité à transformer les pratiques d’aménagement.
@@ -1,9 +0,0 @@
---
-title: European
-body_classes: modular
-media_order: 'Europan France.jpg'
---
-
-### Europan
-Europan est un concours d’idées d’architecture et d’urbanisme se déroulant tous les deux ans simultanément dans une vingtaine de pays européens, sur un thème et un règlement communs. Dans chaque pays des sites sont proposés par des collectivités territoriales et leurs partenaires. Ce concours est suivi de réalisation in-situ pour les équipes sélectionnées. Europan facilite le dialogue sur les modes de faire la ville à toutes les échelles.
-Lien vers le site : https://www.europanfrance.org/ 
@@ -1,9 +0,0 @@
---
-title: 'Forum des Solutions'
-body_classes: modular
-media_order: forum_solution.png
---
-
-### Forum des Solutions 
-Prolongement physique des programmes Action Cœur de Ville et Petites villes de demain, le Forum des solutions est une série de rendez-vous mensuels et thématiques conçues pour les villes du programme, mais qui s’adresse également à toutes les collectivités qui souhaitent placer l’innovation au cœur des stratégies de revitalisation urbaine. Chaque rendez-vous permet la présentation par leurs auteurs de projets réalisés répondant aux problématiques rencontrées par ces villes. Il est ouvert à tous les acteurs de l’aménagement du territoire. 
-Lien vers le site : http://www.urbanisme-puca.gouv.fr/forums-des-solutions-en-videos-a1879.html 
@@ -1,8 +0,0 @@
---
-title: POPSU
-body_classes: modular
-media_order: POPSU2018_LOGO_moinsde6cm_sscartouche.png
---
-
-Lieu de convergence des milieux de la recherche et de ceux qui font et gouvernent les villes, la Plateforme d’observation des projets et stratégies urbaines – POPSU – croise les savoirs scientifiques et l’expertise opérationnelle pour mieux comprendre les enjeux et les évolutions associés aux villes et aux territoires. Elle capitalise, à des fins d’action, les connaissances établies sur les métropoles et en assure la diffusion auprès de publics divers : professionnels, académiques, grand public...
-Lien vers le site : http://www.popsu.archi.fr/
@@ -1,7 +0,0 @@
---
-title: Programmes
-content:
-    items: '@self.modular'
-visible: false
---
-
@@ -1,21 +0,0 @@
---
-title: 'Conseil d''administration'
-body_classes: modular
-features:
-    -
-        nom: 'Hélène Peskine'
-        fonction: 'Présidente du Conseil d’administration'
-        biographie: 'Secrétaire permanente du Plan Urbanisme Construction Architecture, Ministère de la Transition écologique, Ministère de la Cohésion des territoires et des Relations avec les Collectivités territoriales'
-        portrait: null
-    -
-        nom: 'Jean-Baptiste Butlen'
-        fonction: 'Membres du Conseil d’administration'
-        biographie: 'Jean-Baptiste Butlen, Sous-directeur Aménagement durable, Direction Générale de l’Aménagement, du Logement et de la Nature, Ministère de la Transition écologique, Ministère de la Cohésion des territoires et des Relations avec les Collectivités territoriales'
-        portrait: null
-    -
-        nom: null
-        fonction: null
-        biographie: null
-        portrait: null
---
-
@@ -1,11 +0,0 @@
---
-title: 'Equipe EPAU'
-body_classes: modular
-features:
-    -
-        nom: 'Jean-Baptiste Marie,'
-        fonction: 'Directeur général'
-        biographie: "jean-baptiste.marie@developpement-durable.gouv.fr\r\n+\_33\_(1)\_40\_81\_24\_68\_\r\n+\_33\_(6)\_64\_52\_75\_57\r\n"
-        portrait: null
---
-
@@ -1,7 +0,0 @@
---
-title: Gouvernance
-content:
-    items: '@self.modular'
-visible: false
---
-
@@ -1,4 +0,0 @@
---
-title: Home2
---
-
@@ -46,7 +46,7 @@ j'ai essayé:
  label: Texte de présentation du programme
  markdown: true

-  
+

 #fin des modifs par Ouidade

@@ -65,17 +65,17 @@ The theme by itself is useful, but you may have an easier time getting up and ru

 The simplest way to install this theme is via the [Grav Package Manager (GPM)](http://learn.getgrav.org/advanced/grav-gpm) through your system's Terminal (also called the command line).  From the root of your Grav install type:

-    bin/gpm install epau-epau_antimatter
+    bin/gpm install epau-antimatter

-This will install the Epau Antimatter theme into your `/user/themes` directory within Grav. Its files can be found under `/your/site/grav/user/themes/epau-epau_antimatter`.
+This will install the Epau Antimatter theme into your `/user/themes` directory within Grav. Its files can be found under `/your/site/grav/user/themes/epau-antimatter`.

 ## Manual Installation

-To install this theme, just download the zip version of this repository and unzip it under `/your/site/grav/user/themes`. Then, rename the folder to `epau-epau_antimatter`. You can find these files either on [GitHub](https://github.com/getgrav/grav-theme-epau-epau_antimatter) or via [GetGrav.org](http://getgrav.org/downloads/themes).
+To install this theme, just download the zip version of this repository and unzip it under `/your/site/grav/user/themes`. Then, rename the folder to `epau-antimatter`. You can find these files either on [GitHub](https://github.com/getgrav/grav-theme-epau-antimatter) or via [GetGrav.org](http://getgrav.org/downloads/themes).

 You should now have all the theme files under

-    /your/site/grav/user/themes/epau-epau_antimatter
+    /your/site/grav/user/themes/epau-antimatter

 >> NOTE: This theme is a modular component for Grav which requires the [Grav](http://github.com/getgrav/grav), [Error](https://github.com/getgrav/grav-theme-error) and [Problems](https://github.com/getgrav/grav-plugin-problems) plugins.

@@ -87,7 +87,7 @@ As development for the Epau Antimatter theme continues, new versions may become

 The simplest way to update this theme is via the [Grav Package Manager (GPM)](http://learn.getgrav.org/advanced/grav-gpm). You can do this with this by navigating to the root directory of your Grav install using your system's Terminal (also called command line) and typing the following:

-    bin/gpm update epau-epau_antimatter
+    bin/gpm update epau-antimatter

 This command will check your Grav install to see if your Epau Antimatter theme is due for an update. If a newer release is found, you will be asked whether or not you wish to update. To continue, type `y` and hit enter. The theme will automatically update and clear Grav's cache.

@@ -95,9 +95,9 @@ This command will check your Grav install to see if your Epau Antimatter theme i

 Manually updating Epau Antimatter is pretty simple. Here is what you will need to do to get this done:

-* Delete the `your/site/user/themes/epau-epau_antimatter` directory.
-* Download the new version of the Epau Antimatter theme from either [GitHub](https://github.com/getgrav/grav-plugin-epau-epau_antimatter) or [GetGrav.org](http://getgrav.org/downloads/themes#extras).
-* Unzip the zip file in `your/site/user/themes` and rename the resulting folder to `epau-epau_antimatter`.
+* Delete the `your/site/user/themes/epau-antimatter` directory.
+* Download the new version of the Epau Antimatter theme from either [GitHub](https://github.com/getgrav/grav-plugin-epau-antimatter) or [GetGrav.org](http://getgrav.org/downloads/themes#extras).
+* Unzip the zip file in `your/site/user/themes` and rename the resulting folder to `epau-antimatter`.
 * Clear the Grav cache. The simplest way to do this is by going to the root Grav directory in terminal and typing `bin/grav clear-cache`.

 > Note: Any changes you have made to any of the files listed under this directory will also be removed and replaced by the new set. Any files located elsewhere (for example a YAML settings file placed in `user/config/themes`) will remain intact.
@@ -127,7 +127,7 @@ Manually updating Epau Antimatter is pretty simple. Here is what you will need t

 ##### Dropdown Menu

-You can enable **dropdown menu** support by enabling it in the `epau-epau_antimatter.yaml` configuration file. As per usual, copy this file to your `user/config/themes/` folder (create if required) and edit there.
+You can enable **dropdown menu** support by enabling it in the `epau-antimatter.yaml` configuration file. As per usual, copy this file to your `user/config/themes/` folder (create if required) and edit there.

 ```
 dropdown:
@@ -180,8 +180,8 @@ If you want to set Epau Antimatter as the default theme, you can do so by follow

 * Navigate to `/your/site/grav/user/config`.
 * Open the **system.yaml** file.
-* Change the `theme:` setting to `theme: epau-epau_antimatter`.
+* Change the `theme:` setting to `theme: epau-antimatter`.
 * Save your changes.
 * Clear the Grav cache. The simplest way to do this is by going to the root Grav directory in Terminal and typing `bin/grav clear-cache`.

-Once this is done, you should be able to see the new theme on the frontend. Keep in mind any customizations made to the previous theme will not be reflected as all of the theme and templating information is now being pulled from the **epau-epau_antimatter** folder.
+Once this is done, you should be able to see the new theme on the frontend. Keep in mind any customizations made to the previous theme will not be reflected as all of the theme and templating information is now being pulled from the **epau-antimatter** folder.
@@ -109,6 +109,7 @@ b, strong, label, th {
        color: #444; }
  #header #navbar {
    font-size: 0.9rem;
+    text-transform: capitalize;
    /* Child Indicator */ }
    #header #navbar .has-children > a > span {
      display: inline-block;
@@ -0,0 +1,109 @@
+
+
+  .navigation a {
+    color: black;
+    text-transform: uppercase;
+  }
+
+  #header.scrolled #navbar a {
+      color: black !important;
+  }
+
+
+.callout {
+  background-color: #000;
+  color: white;
+}
+
+.callout h1, h2, h3, p {
+  text-align: left !important;
+  }
+
+.align-left_centered {
+  display: block;
+  margin-left: 35%;
+}
+
+
+.programmes {
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #d5d2d1;
+  justify-content: center;
+/*  padding-left: 20%;
+  padding-right: 20%;
+  padding-top: 3rem;
+*/
+  padding-top: 8rem;
+  padding-bottom: 8rem;
+}
+
+    .parallax-window {
+        min-height: 400px !important;
+        background: transparent !important;
+    }
+
+    .programme {
+      max-width: 45%;
+      padding: 3rem;
+      background-color: white;
+      margin: 0.3rem;
+    }
+
+    .programme h4 {
+      text-transform: uppercase;
+    }
+
+    .programme img {
+      max-width: 30%;
+    }
+
+    .programmes :hover {
+      background-color: black;
+      color: #ffffff;
+    }
+
+
+
+/*.ressources {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #ffffff;
+    padding-top: 8rem;
+    padding-right: 5rem;
+    padding-left: 5rem;
+  }
+
+    .ressource {
+      max-width: 20%;
+      margin-block: 5rem;
+      flex-wrap: wrap;
+      flex: 0 1 15%;
+    }
+*/
+.ressources h3 {
+  position: absolute;
+  text-transform: uppercase;
+  display: block;
+
+}
+
+.ressources {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 3rem;
+  grid-auto-rows: auto;
+  background-color: #ffffff;
+  padding: 8rem 10% 10% 8rem;
+  justify-items: center;
+  position: relative;
+}
+
+.ressources img {
+  max-width: 50%;
+}
+
+.ressource h1 h2 h3 h4 {
+  margin: 0.2rem;
+}
@@ -0,0 +1,144 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on March 26, 2021 */
+
+
+
+@font-face {
+    font-family: 'avenir_lt_35_lightitalic';
+    src: url('avenir_lt_35_light_oblique-webfont.woff2') format('woff2'),
+         url('avenir_lt_35_light_oblique-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'avenir_lt_35_lightregular';
+    src: url('avenir_lt_35_light-webfont.woff2') format('woff2'),
+         url('avenir_lt_35_light-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'avenir_lt_45_bookitalic';
+    src: url('avenir_lt_45_book_oblique-webfont.woff2') format('woff2'),
+         url('avenir_lt_45_book_oblique-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'avenir_lt_45_bookregular';
+    src: url('avenir_lt_45_book-webfont.woff2') format('woff2'),
+         url('avenir_lt_45_book-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'avenir_lt_55_romanitalic';
+    src: url('avenir_lt_55_oblique-webfont.woff2') format('woff2'),
+         url('avenir_lt_55_oblique-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'avenir_lt_55_romanregular';
+    src: url('avenir_lt_55_roman-webfont.woff2') format('woff2'),
+         url('avenir_lt_55_roman-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'avenir_lt_65_mediumitalic';
+    src: url('avenir_lt_65_medium_oblique-webfont.woff2') format('woff2'),
+         url('avenir_lt_65_medium_oblique-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'avenir_lt_65_mediumregular';
+    src: url('avenir_lt_65_medium-webfont.woff2') format('woff2'),
+         url('avenir_lt_65_medium-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'avenir_lt_55_romanbold';
+    src: url('avenir_lt_85_heavy-webfont.woff2') format('woff2'),
+         url('avenir_lt_85_heavy-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'avenir_lt_55_romanbold_italic';
+    src: url('avenir_lt_86_heavy_oblique-webfont.woff2') format('woff2'),
+         url('avenir_lt_86_heavy_oblique-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'avenir_lt_65_mediumbolditalic';
+    src: url('avenir_lt_95_black_oblique-webfont.woff2') format('woff2'),
+         url('avenir_lt_95_black_oblique-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'avenir_lt_65_mediumbold';
+    src: url('avenir_lt_95_black-webfont.woff2') format('woff2'),
+         url('avenir_lt_95_black-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
@@ -0,0 +1,619 @@
+<!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: 'avenir_lt_35_lightregular';
+							}
+		</style>
+
+	<title>Avenir LT 35 Light Regular Specimen</title>
+	
+	
+	<script type="text/javascript" charset="utf-8">
+		$(document).ready(function() {
+			$('#container').easyTabs({defaultContent:1});
+		});
+	</script>
+</head>
+
+<body>
+<div id="container">
+	<div id="header">
+		Avenir LT 35 Light Regular	</div>
+	<ul class="tabs">
+		<li><a href="#specimen">Specimen</a></li>
+		<li><a href="#layout">Sample Layout</a></li>
+				<li><a href="#glyphs">Glyphs &amp; Languages</a></li>
+		<li><a href="#installing">Installing Webfonts</a></li>
+		
+	</ul>
+	
+	<div id="main_content">
+
+		
+			<div id="specimen">
+		
+				<div class="section">
+					<div class="grid12 firstcol">
+						<div class="huge">AaBb</div>
+					</div>
+				</div>
+		
+				<div class="section">
+					<div class="glyph_range">A&#x200B;B&#x200b;C&#x200b;D&#x200b;E&#x200b;F&#x200b;G&#x200b;H&#x200b;I&#x200b;J&#x200b;K&#x200b;L&#x200b;M&#x200b;N&#x200b;O&#x200b;P&#x200b;Q&#x200b;R&#x200b;S&#x200b;T&#x200b;U&#x200b;V&#x200b;W&#x200b;X&#x200b;Y&#x200b;Z&#x200b;a&#x200b;b&#x200b;c&#x200b;d&#x200b;e&#x200b;f&#x200b;g&#x200b;h&#x200b;i&#x200b;j&#x200b;k&#x200b;l&#x200b;m&#x200b;n&#x200b;o&#x200b;p&#x200b;q&#x200b;r&#x200b;s&#x200b;t&#x200b;u&#x200b;v&#x200b;w&#x200b;x&#x200b;y&#x200b;z&#x200b;1&#x200b;2&#x200b;3&#x200b;4&#x200b;5&#x200b;6&#x200b;7&#x200b;8&#x200b;9&#x200b;0&#x200b;&amp;&#x200b;.&#x200b;,&#x200b;?&#x200b;!&#x200b;&#64;&#x200b;(&#x200b;)&#x200b;#&#x200b;$&#x200b;%&#x200b;*&#x200b;+&#x200b;-&#x200b;=&#x200b;:&#x200b;;</div>
+				</div>
+				<div class="section">
+					<div class="grid12 firstcol">
+						<table class="sample_table">
+							<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+						</table>
+				
+					</div>
+			
+				</div>
+		
+		
+		
+								<div class="section" id="bodycomparison">
+
+
+										<div id="xheight">
+				<div class="fontbody">&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
+										<div class="fontbody" style="z-index:1">
+											body<span>Avenir LT 35 Light Regular</span>
+										</div>
+										<div class="arialbody" style="z-index:1">
+											body<span>Arial</span>
+										</div>
+										<div class="verdanabody" style="z-index:1">
+											body<span>Verdana</span>
+										</div>
+										<div class="georgiabody" style="z-index:1">
+											body<span>Georgia</span>
+										</div>
+
+
+
+								</div>
+		
+		
+				<div class="section psample psample_row1" id="">
+					
+					<div class="grid2 firstcol">
+						<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid3">
+						<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid3">
+						<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid4">
+						<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="white_blend"></div>
+					
+				</div>
+				<div class="section psample psample_row2" id="">
+					<div class="grid3 firstcol">
+						<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid4">
+						<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid5">
+						<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+
+					<div class="white_blend"></div>
+
+				</div>
+				
+				<div class="section psample psample_row3" id="">
+					<div class="grid5 firstcol">
+						<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					<div class="grid7">
+						<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					
+					<div class="white_blend"></div>
+					
+				</div>
+				
+				<div class="section psample psample_row4" id="">
+					<div class="grid12 firstcol">
+						<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					<div class="white_blend"></div>
+					
+				</div>
+				
+				
+				
+				<div class="section psample psample_row1 fullreverse">
+					<div class="grid2 firstcol">
+						<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid3">
+						<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid3">
+						<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid4">
+						<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="black_blend"></div>
+					
+				</div>
+				
+				<div class="section psample psample_row2 fullreverse">
+					<div class="grid3 firstcol">
+						<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid4">
+						<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid5">
+						<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="black_blend"></div>
+
+				</div>
+				
+				<div class="section psample fullreverse psample_row3" id="">
+					<div class="grid5 firstcol">
+						<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					<div class="grid7">
+						<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					
+					<div class="black_blend"></div>
+					
+				</div>
+				
+				<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+					<div class="grid12 firstcol">
+						<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					<div class="black_blend"></div>
+					
+				</div>
+				
+				
+				
+				
+			</div>
+			
+			<div id="layout">
+				
+				<div class="section">
+					
+					<div class="grid12 firstcol">
+						<h1>Lorem Ipsum Dolor</h1>
+						<h2>Etiam porta sem malesuada magna mollis euismod</h2>
+						
+						<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+					</div>
+				</div>
+				<div class="section">
+					<div class="grid8 firstcol">
+						<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+						
+						<h3>Pellentesque ornare sem</h3>
+
+						<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+						<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+						<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+						<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+						<h3>Cras mattis consectetur</h3>
+
+						<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+						<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+					</div>
+					
+					<div class="grid4 sidebar">
+						
+						<div class="box reverse">
+							<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+						</div>
+						
+						<p class="caption">Maecenas sed diam eget risus varius.</p>
+
+						<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+					
+
+						<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+						<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+					</div>
+				</div>
+				
+			</div>
+
+
+			
+
+
+
+		<div id="glyphs">
+			<div class="section">
+				<div class="grid12 firstcol">
+			
+				<h1>Language Support</h1>
+				<p>The subset of Avenir LT 35 Light Regular in this kit supports the following languages:<br />
+			
+					Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo				</p>
+				<h1>Glyph Chart</h1>
+				<p>The subset of Avenir LT 35 Light Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+				<div id="glyph_chart">
+			
+																				 <div><p>&amp;#32;</p>&#32;</div>
+																				 <div><p>&amp;#33;</p>&#33;</div>
+																				 <div><p>&amp;#34;</p>&#34;</div>
+																				 <div><p>&amp;#35;</p>&#35;</div>
+																				 <div><p>&amp;#36;</p>&#36;</div>
+																				 <div><p>&amp;#37;</p>&#37;</div>
+																				 <div><p>&amp;#38;</p>&#38;</div>
+																				 <div><p>&amp;#39;</p>&#39;</div>
+																				 <div><p>&amp;#40;</p>&#40;</div>
+																				 <div><p>&amp;#41;</p>&#41;</div>
+																				 <div><p>&amp;#42;</p>&#42;</div>
+																				 <div><p>&amp;#43;</p>&#43;</div>
+																				 <div><p>&amp;#44;</p>&#44;</div>
+																				 <div><p>&amp;#45;</p>&#45;</div>
+																				 <div><p>&amp;#46;</p>&#46;</div>
+																				 <div><p>&amp;#47;</p>&#47;</div>
+																				 <div><p>&amp;#48;</p>&#48;</div>
+																				 <div><p>&amp;#49;</p>&#49;</div>
+																				 <div><p>&amp;#50;</p>&#50;</div>
+																				 <div><p>&amp;#51;</p>&#51;</div>
+																				 <div><p>&amp;#52;</p>&#52;</div>
+																				 <div><p>&amp;#53;</p>&#53;</div>
+																				 <div><p>&amp;#54;</p>&#54;</div>
+																				 <div><p>&amp;#55;</p>&#55;</div>
+																				 <div><p>&amp;#56;</p>&#56;</div>
+																				 <div><p>&amp;#57;</p>&#57;</div>
+																				 <div><p>&amp;#58;</p>&#58;</div>
+																				 <div><p>&amp;#59;</p>&#59;</div>
+																				 <div><p>&amp;#60;</p>&#60;</div>
+																				 <div><p>&amp;#61;</p>&#61;</div>
+																				 <div><p>&amp;#62;</p>&#62;</div>
+																				 <div><p>&amp;#63;</p>&#63;</div>
+																				 <div><p>&amp;#64;</p>&#64;</div>
+																				 <div><p>&amp;#65;</p>&#65;</div>
+																				 <div><p>&amp;#66;</p>&#66;</div>
+																				 <div><p>&amp;#67;</p>&#67;</div>
+																				 <div><p>&amp;#68;</p>&#68;</div>
+																				 <div><p>&amp;#69;</p>&#69;</div>
+																				 <div><p>&amp;#70;</p>&#70;</div>
+																				 <div><p>&amp;#71;</p>&#71;</div>
+																				 <div><p>&amp;#72;</p>&#72;</div>
+																				 <div><p>&amp;#73;</p>&#73;</div>
+																				 <div><p>&amp;#74;</p>&#74;</div>
+																				 <div><p>&amp;#75;</p>&#75;</div>
+																				 <div><p>&amp;#76;</p>&#76;</div>
+																				 <div><p>&amp;#77;</p>&#77;</div>
+																				 <div><p>&amp;#78;</p>&#78;</div>
+																				 <div><p>&amp;#79;</p>&#79;</div>
+																				 <div><p>&amp;#80;</p>&#80;</div>
+																				 <div><p>&amp;#81;</p>&#81;</div>
+																				 <div><p>&amp;#82;</p>&#82;</div>
+																				 <div><p>&amp;#83;</p>&#83;</div>
+																				 <div><p>&amp;#84;</p>&#84;</div>
+																				 <div><p>&amp;#85;</p>&#85;</div>
+																				 <div><p>&amp;#86;</p>&#86;</div>
+																				 <div><p>&amp;#87;</p>&#87;</div>
+																				 <div><p>&amp;#88;</p>&#88;</div>
+																				 <div><p>&amp;#89;</p>&#89;</div>
+																				 <div><p>&amp;#90;</p>&#90;</div>
+																				 <div><p>&amp;#91;</p>&#91;</div>
+																				 <div><p>&amp;#92;</p>&#92;</div>
+																				 <div><p>&amp;#93;</p>&#93;</div>
+																				 <div><p>&amp;#94;</p>&#94;</div>
+																				 <div><p>&amp;#95;</p>&#95;</div>
+																				 <div><p>&amp;#96;</p>&#96;</div>
+																				 <div><p>&amp;#97;</p>&#97;</div>
+																				 <div><p>&amp;#98;</p>&#98;</div>
+																				 <div><p>&amp;#99;</p>&#99;</div>
+																				 <div><p>&amp;#100;</p>&#100;</div>
+																				 <div><p>&amp;#101;</p>&#101;</div>
+																				 <div><p>&amp;#102;</p>&#102;</div>
+																				 <div><p>&amp;#103;</p>&#103;</div>
+																				 <div><p>&amp;#104;</p>&#104;</div>
+																				 <div><p>&amp;#105;</p>&#105;</div>
+																				 <div><p>&amp;#106;</p>&#106;</div>
+																				 <div><p>&amp;#107;</p>&#107;</div>
+																				 <div><p>&amp;#108;</p>&#108;</div>
+																				 <div><p>&amp;#109;</p>&#109;</div>
+																				 <div><p>&amp;#110;</p>&#110;</div>
+																				 <div><p>&amp;#111;</p>&#111;</div>
+																				 <div><p>&amp;#112;</p>&#112;</div>
+																				 <div><p>&amp;#113;</p>&#113;</div>
+																				 <div><p>&amp;#114;</p>&#114;</div>
+																				 <div><p>&amp;#115;</p>&#115;</div>
+																				 <div><p>&amp;#116;</p>&#116;</div>
+																				 <div><p>&amp;#117;</p>&#117;</div>
+																				 <div><p>&amp;#118;</p>&#118;</div>
+																				 <div><p>&amp;#119;</p>&#119;</div>
+																				 <div><p>&amp;#120;</p>&#120;</div>
+																				 <div><p>&amp;#121;</p>&#121;</div>
+																				 <div><p>&amp;#122;</p>&#122;</div>
+																				 <div><p>&amp;#123;</p>&#123;</div>
+																				 <div><p>&amp;#124;</p>&#124;</div>
+																				 <div><p>&amp;#125;</p>&#125;</div>
+																				 <div><p>&amp;#126;</p>&#126;</div>
+																				 <div><p>&amp;#160;</p>&#160;</div>
+																				 <div><p>&amp;#161;</p>&#161;</div>
+																				 <div><p>&amp;#162;</p>&#162;</div>
+																				 <div><p>&amp;#163;</p>&#163;</div>
+																				 <div><p>&amp;#164;</p>&#164;</div>
+																				 <div><p>&amp;#165;</p>&#165;</div>
+																				 <div><p>&amp;#166;</p>&#166;</div>
+																				 <div><p>&amp;#167;</p>&#167;</div>
+																				 <div><p>&amp;#168;</p>&#168;</div>
+																				 <div><p>&amp;#169;</p>&#169;</div>
+																				 <div><p>&amp;#170;</p>&#170;</div>
+																				 <div><p>&amp;#171;</p>&#171;</div>
+																				 <div><p>&amp;#172;</p>&#172;</div>
+																				 <div><p>&amp;#173;</p>&#173;</div>
+																				 <div><p>&amp;#174;</p>&#174;</div>
+																				 <div><p>&amp;#175;</p>&#175;</div>
+																				 <div><p>&amp;#176;</p>&#176;</div>
+																				 <div><p>&amp;#177;</p>&#177;</div>
+																				 <div><p>&amp;#178;</p>&#178;</div>
+																				 <div><p>&amp;#179;</p>&#179;</div>
+																				 <div><p>&amp;#180;</p>&#180;</div>
+																				 <div><p>&amp;#181;</p>&#181;</div>
+																				 <div><p>&amp;#182;</p>&#182;</div>
+																				 <div><p>&amp;#183;</p>&#183;</div>
+																				 <div><p>&amp;#184;</p>&#184;</div>
+																				 <div><p>&amp;#185;</p>&#185;</div>
+																				 <div><p>&amp;#186;</p>&#186;</div>
+																				 <div><p>&amp;#187;</p>&#187;</div>
+																				 <div><p>&amp;#188;</p>&#188;</div>
+																				 <div><p>&amp;#189;</p>&#189;</div>
+																				 <div><p>&amp;#190;</p>&#190;</div>
+																				 <div><p>&amp;#191;</p>&#191;</div>
+																				 <div><p>&amp;#192;</p>&#192;</div>
+																				 <div><p>&amp;#193;</p>&#193;</div>
+																				 <div><p>&amp;#194;</p>&#194;</div>
+																				 <div><p>&amp;#195;</p>&#195;</div>
+																				 <div><p>&amp;#196;</p>&#196;</div>
+																				 <div><p>&amp;#197;</p>&#197;</div>
+																				 <div><p>&amp;#198;</p>&#198;</div>
+																				 <div><p>&amp;#199;</p>&#199;</div>
+																				 <div><p>&amp;#200;</p>&#200;</div>
+																				 <div><p>&amp;#201;</p>&#201;</div>
+																				 <div><p>&amp;#202;</p>&#202;</div>
+																				 <div><p>&amp;#203;</p>&#203;</div>
+																				 <div><p>&amp;#204;</p>&#204;</div>
+																				 <div><p>&amp;#205;</p>&#205;</div>
+																				 <div><p>&amp;#206;</p>&#206;</div>
+																				 <div><p>&amp;#207;</p>&#207;</div>
+																				 <div><p>&amp;#208;</p>&#208;</div>
+																				 <div><p>&amp;#209;</p>&#209;</div>
+																				 <div><p>&amp;#210;</p>&#210;</div>
+																				 <div><p>&amp;#211;</p>&#211;</div>
+																				 <div><p>&amp;#212;</p>&#212;</div>
+																				 <div><p>&amp;#213;</p>&#213;</div>
+																				 <div><p>&amp;#214;</p>&#214;</div>
+																				 <div><p>&amp;#215;</p>&#215;</div>
+																				 <div><p>&amp;#216;</p>&#216;</div>
+																				 <div><p>&amp;#217;</p>&#217;</div>
+																				 <div><p>&amp;#218;</p>&#218;</div>
+																				 <div><p>&amp;#219;</p>&#219;</div>
+																				 <div><p>&amp;#220;</p>&#220;</div>
+																				 <div><p>&amp;#221;</p>&#221;</div>
+																				 <div><p>&amp;#222;</p>&#222;</div>
+																				 <div><p>&amp;#223;</p>&#223;</div>
+																				 <div><p>&amp;#224;</p>&#224;</div>
+																				 <div><p>&amp;#225;</p>&#225;</div>
+																				 <div><p>&amp;#226;</p>&#226;</div>
+																				 <div><p>&amp;#227;</p>&#227;</div>
+																				 <div><p>&amp;#228;</p>&#228;</div>
+																				 <div><p>&amp;#229;</p>&#229;</div>
+																				 <div><p>&amp;#230;</p>&#230;</div>
+																				 <div><p>&amp;#231;</p>&#231;</div>
+																				 <div><p>&amp;#232;</p>&#232;</div>
+																				 <div><p>&amp;#233;</p>&#233;</div>
+																				 <div><p>&amp;#234;</p>&#234;</div>
+																				 <div><p>&amp;#235;</p>&#235;</div>
+																				 <div><p>&amp;#236;</p>&#236;</div>
+																				 <div><p>&amp;#237;</p>&#237;</div>
+																				 <div><p>&amp;#238;</p>&#238;</div>
+																				 <div><p>&amp;#239;</p>&#239;</div>
+																				 <div><p>&amp;#240;</p>&#240;</div>
+																				 <div><p>&amp;#241;</p>&#241;</div>
+																				 <div><p>&amp;#242;</p>&#242;</div>
+																				 <div><p>&amp;#243;</p>&#243;</div>
+																				 <div><p>&amp;#244;</p>&#244;</div>
+																				 <div><p>&amp;#245;</p>&#245;</div>
+																				 <div><p>&amp;#246;</p>&#246;</div>
+																				 <div><p>&amp;#247;</p>&#247;</div>
+																				 <div><p>&amp;#248;</p>&#248;</div>
+																				 <div><p>&amp;#249;</p>&#249;</div>
+																				 <div><p>&amp;#250;</p>&#250;</div>
+																				 <div><p>&amp;#251;</p>&#251;</div>
+																				 <div><p>&amp;#252;</p>&#252;</div>
+																				 <div><p>&amp;#253;</p>&#253;</div>
+																				 <div><p>&amp;#254;</p>&#254;</div>
+																				 <div><p>&amp;#255;</p>&#255;</div>
+																				 <div><p>&amp;#338;</p>&#338;</div>
+																				 <div><p>&amp;#339;</p>&#339;</div>
+																				 <div><p>&amp;#376;</p>&#376;</div>
+																				 <div><p>&amp;#710;</p>&#710;</div>
+																				 <div><p>&amp;#732;</p>&#732;</div>
+																				 <div><p>&amp;#8192;</p>&#8192;</div>
+																				 <div><p>&amp;#8193;</p>&#8193;</div>
+																				 <div><p>&amp;#8194;</p>&#8194;</div>
+																				 <div><p>&amp;#8195;</p>&#8195;</div>
+																				 <div><p>&amp;#8196;</p>&#8196;</div>
+																				 <div><p>&amp;#8197;</p>&#8197;</div>
+																				 <div><p>&amp;#8198;</p>&#8198;</div>
+																				 <div><p>&amp;#8199;</p>&#8199;</div>
+																				 <div><p>&amp;#8200;</p>&#8200;</div>
+																				 <div><p>&amp;#8201;</p>&#8201;</div>
+																				 <div><p>&amp;#8202;</p>&#8202;</div>
+																				 <div><p>&amp;#8208;</p>&#8208;</div>
+																				 <div><p>&amp;#8209;</p>&#8209;</div>
+																				 <div><p>&amp;#8210;</p>&#8210;</div>
+																				 <div><p>&amp;#8211;</p>&#8211;</div>
+																				 <div><p>&amp;#8212;</p>&#8212;</div>
+																				 <div><p>&amp;#8216;</p>&#8216;</div>
+																				 <div><p>&amp;#8217;</p>&#8217;</div>
+																				 <div><p>&amp;#8218;</p>&#8218;</div>
+																				 <div><p>&amp;#8220;</p>&#8220;</div>
+																				 <div><p>&amp;#8221;</p>&#8221;</div>
+																				 <div><p>&amp;#8222;</p>&#8222;</div>
+																				 <div><p>&amp;#8226;</p>&#8226;</div>
+																				 <div><p>&amp;#8230;</p>&#8230;</div>
+																				 <div><p>&amp;#8239;</p>&#8239;</div>
+																				 <div><p>&amp;#8249;</p>&#8249;</div>
+																				 <div><p>&amp;#8250;</p>&#8250;</div>
+																				 <div><p>&amp;#8287;</p>&#8287;</div>
+																				 <div><p>&amp;#8364;</p>&#8364;</div>
+																				 <div><p>&amp;#8482;</p>&#8482;</div>
+																				 <div><p>&amp;#9724;</p>&#9724;</div>
+																				 <div><p>&amp;#64257;</p>&#64257;</div>
+																				 <div><p>&amp;#64258;</p>&#64258;</div>
+																																																</div>	
+				</div>
+		
+		
+			</div>
+		</div>
+		
+		
+		<div id="specs">
+			
+		</div>
+	
+		<div id="installing">
+			<div class="section">
+				<div class="grid7 firstcol">
+					<h1>Installing Webfonts</h1>
+					
+					<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+					
+					<h2>1. Upload your webfonts</h2>
+					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+					
+					<h2>2. Include the webfont stylesheet</h2>
+					<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+	<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+	<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+					<h2>3. Modify your own stylesheet</h2>
+					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+				</div>
+				
+				<div class="grid5 sidebar">
+					<div class="box">
+						<h2>Troubleshooting<br />Font-Face Problems</h2>
+						<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+						<h3>Fonts not showing in any browser</h3>
+
+						<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+						<h3>Fonts not loading in iPhone or iPad</h3>
+
+						<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+						<h3>Fonts not loading in Firefox</h3>
+
+						<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+						<h3>Fonts not loading in IE</h3>
+
+						<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+						<h3>Fonts not loading in IE9</h3>
+
+						<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+					</div>
+				</div>
+			</div>
+			
+		</div>
+	
+	</div>
+	<div id="footer">
+		<p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+	</div>
+</div>
+</body>
+</html>
@@ -0,0 +1,619 @@
+<!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: 'avenir_lt_35_lightitalic';
+							}
+		</style>
+
+	<title>Avenir LT 35 Light Italic 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">
+		Avenir LT 35 Light Italic	</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>Avenir LT 35 Light Italic</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 Avenir LT 35 Light Italic 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 Avenir LT 35 Light Italic in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+				<div id="glyph_chart">
+			
+																				 <div><p>&amp;#32;</p>&#32;</div>
+																				 <div><p>&amp;#33;</p>&#33;</div>
+																				 <div><p>&amp;#34;</p>&#34;</div>
+																				 <div><p>&amp;#35;</p>&#35;</div>
+																				 <div><p>&amp;#36;</p>&#36;</div>
+																				 <div><p>&amp;#37;</p>&#37;</div>
+																				 <div><p>&amp;#38;</p>&#38;</div>
+																				 <div><p>&amp;#39;</p>&#39;</div>
+																				 <div><p>&amp;#40;</p>&#40;</div>
+																				 <div><p>&amp;#41;</p>&#41;</div>
+																				 <div><p>&amp;#42;</p>&#42;</div>
+																				 <div><p>&amp;#43;</p>&#43;</div>
+																				 <div><p>&amp;#44;</p>&#44;</div>
+																				 <div><p>&amp;#45;</p>&#45;</div>
+																				 <div><p>&amp;#46;</p>&#46;</div>
+																				 <div><p>&amp;#47;</p>&#47;</div>
+																				 <div><p>&amp;#48;</p>&#48;</div>
+																				 <div><p>&amp;#49;</p>&#49;</div>
+																				 <div><p>&amp;#50;</p>&#50;</div>
+																				 <div><p>&amp;#51;</p>&#51;</div>
+																				 <div><p>&amp;#52;</p>&#52;</div>
+																				 <div><p>&amp;#53;</p>&#53;</div>
+																				 <div><p>&amp;#54;</p>&#54;</div>
+																				 <div><p>&amp;#55;</p>&#55;</div>
+																				 <div><p>&amp;#56;</p>&#56;</div>
+																				 <div><p>&amp;#57;</p>&#57;</div>
+																				 <div><p>&amp;#58;</p>&#58;</div>
+																				 <div><p>&amp;#59;</p>&#59;</div>
+																				 <div><p>&amp;#60;</p>&#60;</div>
+																				 <div><p>&amp;#61;</p>&#61;</div>
+																				 <div><p>&amp;#62;</p>&#62;</div>
+																				 <div><p>&amp;#63;</p>&#63;</div>
+																				 <div><p>&amp;#64;</p>&#64;</div>
+																				 <div><p>&amp;#65;</p>&#65;</div>
+																				 <div><p>&amp;#66;</p>&#66;</div>
+																				 <div><p>&amp;#67;</p>&#67;</div>
+																				 <div><p>&amp;#68;</p>&#68;</div>
+																				 <div><p>&amp;#69;</p>&#69;</div>
+																				 <div><p>&amp;#70;</p>&#70;</div>
+																				 <div><p>&amp;#71;</p>&#71;</div>
+																				 <div><p>&amp;#72;</p>&#72;</div>
+																				 <div><p>&amp;#73;</p>&#73;</div>
+																				 <div><p>&amp;#74;</p>&#74;</div>
+																				 <div><p>&amp;#75;</p>&#75;</div>
+																				 <div><p>&amp;#76;</p>&#76;</div>
+																				 <div><p>&amp;#77;</p>&#77;</div>
+																				 <div><p>&amp;#78;</p>&#78;</div>
+																				 <div><p>&amp;#79;</p>&#79;</div>
+																				 <div><p>&amp;#80;</p>&#80;</div>
+																				 <div><p>&amp;#81;</p>&#81;</div>
+																				 <div><p>&amp;#82;</p>&#82;</div>
+																				 <div><p>&amp;#83;</p>&#83;</div>
+																				 <div><p>&amp;#84;</p>&#84;</div>
+																				 <div><p>&amp;#85;</p>&#85;</div>
+																				 <div><p>&amp;#86;</p>&#86;</div>
+																				 <div><p>&amp;#87;</p>&#87;</div>
+																				 <div><p>&amp;#88;</p>&#88;</div>
+																				 <div><p>&amp;#89;</p>&#89;</div>
+																				 <div><p>&amp;#90;</p>&#90;</div>
+																				 <div><p>&amp;#91;</p>&#91;</div>
+																				 <div><p>&amp;#92;</p>&#92;</div>
+																				 <div><p>&amp;#93;</p>&#93;</div>
+																				 <div><p>&amp;#94;</p>&#94;</div>
+																				 <div><p>&amp;#95;</p>&#95;</div>
+																				 <div><p>&amp;#96;</p>&#96;</div>
+																				 <div><p>&amp;#97;</p>&#97;</div>
+																				 <div><p>&amp;#98;</p>&#98;</div>
+																				 <div><p>&amp;#99;</p>&#99;</div>
+																				 <div><p>&amp;#100;</p>&#100;</div>
+																				 <div><p>&amp;#101;</p>&#101;</div>
+																				 <div><p>&amp;#102;</p>&#102;</div>
+																				 <div><p>&amp;#103;</p>&#103;</div>
+																				 <div><p>&amp;#104;</p>&#104;</div>
+																				 <div><p>&amp;#105;</p>&#105;</div>
+																				 <div><p>&amp;#106;</p>&#106;</div>
+																				 <div><p>&amp;#107;</p>&#107;</div>
+																				 <div><p>&amp;#108;</p>&#108;</div>
+																				 <div><p>&amp;#109;</p>&#109;</div>
+																				 <div><p>&amp;#110;</p>&#110;</div>
+																				 <div><p>&amp;#111;</p>&#111;</div>
+																				 <div><p>&amp;#112;</p>&#112;</div>
+																				 <div><p>&amp;#113;</p>&#113;</div>
+																				 <div><p>&amp;#114;</p>&#114;</div>
+																				 <div><p>&amp;#115;</p>&#115;</div>
+																				 <div><p>&amp;#116;</p>&#116;</div>
+																				 <div><p>&amp;#117;</p>&#117;</div>
+																				 <div><p>&amp;#118;</p>&#118;</div>
+																				 <div><p>&amp;#119;</p>&#119;</div>
+																				 <div><p>&amp;#120;</p>&#120;</div>
+																				 <div><p>&amp;#121;</p>&#121;</div>
+																				 <div><p>&amp;#122;</p>&#122;</div>
+																				 <div><p>&amp;#123;</p>&#123;</div>
+																				 <div><p>&amp;#124;</p>&#124;</div>
+																				 <div><p>&amp;#125;</p>&#125;</div>
+																				 <div><p>&amp;#126;</p>&#126;</div>
+																				 <div><p>&amp;#160;</p>&#160;</div>
+																				 <div><p>&amp;#161;</p>&#161;</div>
+																				 <div><p>&amp;#162;</p>&#162;</div>
+																				 <div><p>&amp;#163;</p>&#163;</div>
+																				 <div><p>&amp;#164;</p>&#164;</div>
+																				 <div><p>&amp;#165;</p>&#165;</div>
+																				 <div><p>&amp;#166;</p>&#166;</div>
+																				 <div><p>&amp;#167;</p>&#167;</div>
+																				 <div><p>&amp;#168;</p>&#168;</div>
+																				 <div><p>&amp;#169;</p>&#169;</div>
+																				 <div><p>&amp;#170;</p>&#170;</div>
+																				 <div><p>&amp;#171;</p>&#171;</div>
+																				 <div><p>&amp;#172;</p>&#172;</div>
+																				 <div><p>&amp;#173;</p>&#173;</div>
+																				 <div><p>&amp;#174;</p>&#174;</div>
+																				 <div><p>&amp;#175;</p>&#175;</div>
+																				 <div><p>&amp;#176;</p>&#176;</div>
+																				 <div><p>&amp;#177;</p>&#177;</div>
+																				 <div><p>&amp;#178;</p>&#178;</div>
+																				 <div><p>&amp;#179;</p>&#179;</div>
+																				 <div><p>&amp;#180;</p>&#180;</div>
+																				 <div><p>&amp;#181;</p>&#181;</div>
+																				 <div><p>&amp;#182;</p>&#182;</div>
+																				 <div><p>&amp;#183;</p>&#183;</div>
+																				 <div><p>&amp;#184;</p>&#184;</div>
+																				 <div><p>&amp;#185;</p>&#185;</div>
+																				 <div><p>&amp;#186;</p>&#186;</div>
+																				 <div><p>&amp;#187;</p>&#187;</div>
+																				 <div><p>&amp;#188;</p>&#188;</div>
+																				 <div><p>&amp;#189;</p>&#189;</div>
+																				 <div><p>&amp;#190;</p>&#190;</div>
+																				 <div><p>&amp;#191;</p>&#191;</div>
+																				 <div><p>&amp;#192;</p>&#192;</div>
+																				 <div><p>&amp;#193;</p>&#193;</div>
+																				 <div><p>&amp;#194;</p>&#194;</div>
+																				 <div><p>&amp;#195;</p>&#195;</div>
+																				 <div><p>&amp;#196;</p>&#196;</div>
+																				 <div><p>&amp;#197;</p>&#197;</div>
+																				 <div><p>&amp;#198;</p>&#198;</div>
+																				 <div><p>&amp;#199;</p>&#199;</div>
+																				 <div><p>&amp;#200;</p>&#200;</div>
+																				 <div><p>&amp;#201;</p>&#201;</div>
+																				 <div><p>&amp;#202;</p>&#202;</div>
+																				 <div><p>&amp;#203;</p>&#203;</div>
+																				 <div><p>&amp;#204;</p>&#204;</div>
+																				 <div><p>&amp;#205;</p>&#205;</div>
+																				 <div><p>&amp;#206;</p>&#206;</div>
+																				 <div><p>&amp;#207;</p>&#207;</div>
+																				 <div><p>&amp;#208;</p>&#208;</div>
+																				 <div><p>&amp;#209;</p>&#209;</div>
+																				 <div><p>&amp;#210;</p>&#210;</div>
+																				 <div><p>&amp;#211;</p>&#211;</div>
+																				 <div><p>&amp;#212;</p>&#212;</div>
+																				 <div><p>&amp;#213;</p>&#213;</div>
+																				 <div><p>&amp;#214;</p>&#214;</div>
+																				 <div><p>&amp;#215;</p>&#215;</div>
+																				 <div><p>&amp;#216;</p>&#216;</div>
+																				 <div><p>&amp;#217;</p>&#217;</div>
+																				 <div><p>&amp;#218;</p>&#218;</div>
+																				 <div><p>&amp;#219;</p>&#219;</div>
+																				 <div><p>&amp;#220;</p>&#220;</div>
+																				 <div><p>&amp;#221;</p>&#221;</div>
+																				 <div><p>&amp;#222;</p>&#222;</div>
+																				 <div><p>&amp;#223;</p>&#223;</div>
+																				 <div><p>&amp;#224;</p>&#224;</div>
+																				 <div><p>&amp;#225;</p>&#225;</div>
+																				 <div><p>&amp;#226;</p>&#226;</div>
+																				 <div><p>&amp;#227;</p>&#227;</div>
+																				 <div><p>&amp;#228;</p>&#228;</div>
+																				 <div><p>&amp;#229;</p>&#229;</div>
+																				 <div><p>&amp;#230;</p>&#230;</div>
+																				 <div><p>&amp;#231;</p>&#231;</div>
+																				 <div><p>&amp;#232;</p>&#232;</div>
+																				 <div><p>&amp;#233;</p>&#233;</div>
+																				 <div><p>&amp;#234;</p>&#234;</div>
+																				 <div><p>&amp;#235;</p>&#235;</div>
+																				 <div><p>&amp;#236;</p>&#236;</div>
+																				 <div><p>&amp;#237;</p>&#237;</div>
+																				 <div><p>&amp;#238;</p>&#238;</div>
+																				 <div><p>&amp;#239;</p>&#239;</div>
+																				 <div><p>&amp;#240;</p>&#240;</div>
+																				 <div><p>&amp;#241;</p>&#241;</div>
+																				 <div><p>&amp;#242;</p>&#242;</div>
+																				 <div><p>&amp;#243;</p>&#243;</div>
+																				 <div><p>&amp;#244;</p>&#244;</div>
+																				 <div><p>&amp;#245;</p>&#245;</div>
+																				 <div><p>&amp;#246;</p>&#246;</div>
+																				 <div><p>&amp;#247;</p>&#247;</div>
+																				 <div><p>&amp;#248;</p>&#248;</div>
+																				 <div><p>&amp;#249;</p>&#249;</div>
+																				 <div><p>&amp;#250;</p>&#250;</div>
+																				 <div><p>&amp;#251;</p>&#251;</div>
+																				 <div><p>&amp;#252;</p>&#252;</div>
+																				 <div><p>&amp;#253;</p>&#253;</div>
+																				 <div><p>&amp;#254;</p>&#254;</div>
+																				 <div><p>&amp;#255;</p>&#255;</div>
+																				 <div><p>&amp;#338;</p>&#338;</div>
+																				 <div><p>&amp;#339;</p>&#339;</div>
+																				 <div><p>&amp;#376;</p>&#376;</div>
+																				 <div><p>&amp;#710;</p>&#710;</div>
+																				 <div><p>&amp;#732;</p>&#732;</div>
+																				 <div><p>&amp;#8192;</p>&#8192;</div>
+																				 <div><p>&amp;#8193;</p>&#8193;</div>
+																				 <div><p>&amp;#8194;</p>&#8194;</div>
+																				 <div><p>&amp;#8195;</p>&#8195;</div>
+																				 <div><p>&amp;#8196;</p>&#8196;</div>
+																				 <div><p>&amp;#8197;</p>&#8197;</div>
+																				 <div><p>&amp;#8198;</p>&#8198;</div>
+																				 <div><p>&amp;#8199;</p>&#8199;</div>
+																				 <div><p>&amp;#8200;</p>&#8200;</div>
+																				 <div><p>&amp;#8201;</p>&#8201;</div>
+																				 <div><p>&amp;#8202;</p>&#8202;</div>
+																				 <div><p>&amp;#8208;</p>&#8208;</div>
+																				 <div><p>&amp;#8209;</p>&#8209;</div>
+																				 <div><p>&amp;#8210;</p>&#8210;</div>
+																				 <div><p>&amp;#8211;</p>&#8211;</div>
+																				 <div><p>&amp;#8212;</p>&#8212;</div>
+																				 <div><p>&amp;#8216;</p>&#8216;</div>
+																				 <div><p>&amp;#8217;</p>&#8217;</div>
+																				 <div><p>&amp;#8218;</p>&#8218;</div>
+																				 <div><p>&amp;#8220;</p>&#8220;</div>
+																				 <div><p>&amp;#8221;</p>&#8221;</div>
+																				 <div><p>&amp;#8222;</p>&#8222;</div>
+																				 <div><p>&amp;#8226;</p>&#8226;</div>
+																				 <div><p>&amp;#8230;</p>&#8230;</div>
+																				 <div><p>&amp;#8239;</p>&#8239;</div>
+																				 <div><p>&amp;#8249;</p>&#8249;</div>
+																				 <div><p>&amp;#8250;</p>&#8250;</div>
+																				 <div><p>&amp;#8287;</p>&#8287;</div>
+																				 <div><p>&amp;#8364;</p>&#8364;</div>
+																				 <div><p>&amp;#8482;</p>&#8482;</div>
+																				 <div><p>&amp;#9724;</p>&#9724;</div>
+																				 <div><p>&amp;#64257;</p>&#64257;</div>
+																				 <div><p>&amp;#64258;</p>&#64258;</div>
+																																																</div>	
+				</div>
+		
+		
+			</div>
+		</div>
+		
+		
+		<div id="specs">
+			
+		</div>
+	
+		<div id="installing">
+			<div class="section">
+				<div class="grid7 firstcol">
+					<h1>Installing Webfonts</h1>
+					
+					<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+					
+					<h2>1. Upload your webfonts</h2>
+					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+					
+					<h2>2. Include the webfont stylesheet</h2>
+					<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+	<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+	<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+					<h2>3. Modify your own stylesheet</h2>
+					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+				</div>
+				
+				<div class="grid5 sidebar">
+					<div class="box">
+						<h2>Troubleshooting<br />Font-Face Problems</h2>
+						<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+						<h3>Fonts not showing in any browser</h3>
+
+						<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+						<h3>Fonts not loading in iPhone or iPad</h3>
+
+						<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+						<h3>Fonts not loading in Firefox</h3>
+
+						<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+						<h3>Fonts not loading in IE</h3>
+
+						<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+						<h3>Fonts not loading in IE9</h3>
+
+						<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+					</div>
+				</div>
+			</div>
+			
+		</div>
+	
+	</div>
+	<div id="footer">
+		<p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+	</div>
+</div>
+</body>
+</html>
@@ -0,0 +1,619 @@
+<!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: 'avenir_lt_45_bookregular';
+							}
+		</style>
+
+	<title>Avenir LT 45 Book Regular Specimen</title>
+	
+	
+	<script type="text/javascript" charset="utf-8">
+		$(document).ready(function() {
+			$('#container').easyTabs({defaultContent:1});
+		});
+	</script>
+</head>
+
+<body>
+<div id="container">
+	<div id="header">
+		Avenir LT 45 Book Regular	</div>
+	<ul class="tabs">
+		<li><a href="#specimen">Specimen</a></li>
+		<li><a href="#layout">Sample Layout</a></li>
+				<li><a href="#glyphs">Glyphs &amp; Languages</a></li>
+		<li><a href="#installing">Installing Webfonts</a></li>
+		
+	</ul>
+	
+	<div id="main_content">
+
+		
+			<div id="specimen">
+		
+				<div class="section">
+					<div class="grid12 firstcol">
+						<div class="huge">AaBb</div>
+					</div>
+				</div>
+		
+				<div class="section">
+					<div class="glyph_range">A&#x200B;B&#x200b;C&#x200b;D&#x200b;E&#x200b;F&#x200b;G&#x200b;H&#x200b;I&#x200b;J&#x200b;K&#x200b;L&#x200b;M&#x200b;N&#x200b;O&#x200b;P&#x200b;Q&#x200b;R&#x200b;S&#x200b;T&#x200b;U&#x200b;V&#x200b;W&#x200b;X&#x200b;Y&#x200b;Z&#x200b;a&#x200b;b&#x200b;c&#x200b;d&#x200b;e&#x200b;f&#x200b;g&#x200b;h&#x200b;i&#x200b;j&#x200b;k&#x200b;l&#x200b;m&#x200b;n&#x200b;o&#x200b;p&#x200b;q&#x200b;r&#x200b;s&#x200b;t&#x200b;u&#x200b;v&#x200b;w&#x200b;x&#x200b;y&#x200b;z&#x200b;1&#x200b;2&#x200b;3&#x200b;4&#x200b;5&#x200b;6&#x200b;7&#x200b;8&#x200b;9&#x200b;0&#x200b;&amp;&#x200b;.&#x200b;,&#x200b;?&#x200b;!&#x200b;&#64;&#x200b;(&#x200b;)&#x200b;#&#x200b;$&#x200b;%&#x200b;*&#x200b;+&#x200b;-&#x200b;=&#x200b;:&#x200b;;</div>
+				</div>
+				<div class="section">
+					<div class="grid12 firstcol">
+						<table class="sample_table">
+							<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+						</table>
+				
+					</div>
+			
+				</div>
+		
+		
+		
+								<div class="section" id="bodycomparison">
+
+
+										<div id="xheight">
+				<div class="fontbody">&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
+										<div class="fontbody" style="z-index:1">
+											body<span>Avenir LT 45 Book Regular</span>
+										</div>
+										<div class="arialbody" style="z-index:1">
+											body<span>Arial</span>
+										</div>
+										<div class="verdanabody" style="z-index:1">
+											body<span>Verdana</span>
+										</div>
+										<div class="georgiabody" style="z-index:1">
+											body<span>Georgia</span>
+										</div>
+
+
+
+								</div>
+		
+		
+				<div class="section psample psample_row1" id="">
+					
+					<div class="grid2 firstcol">
+						<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid3">
+						<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid3">
+						<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid4">
+						<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="white_blend"></div>
+					
+				</div>
+				<div class="section psample psample_row2" id="">
+					<div class="grid3 firstcol">
+						<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid4">
+						<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid5">
+						<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+
+					<div class="white_blend"></div>
+
+				</div>
+				
+				<div class="section psample psample_row3" id="">
+					<div class="grid5 firstcol">
+						<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					<div class="grid7">
+						<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					
+					<div class="white_blend"></div>
+					
+				</div>
+				
+				<div class="section psample psample_row4" id="">
+					<div class="grid12 firstcol">
+						<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					<div class="white_blend"></div>
+					
+				</div>
+				
+				
+				
+				<div class="section psample psample_row1 fullreverse">
+					<div class="grid2 firstcol">
+						<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid3">
+						<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid3">
+						<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid4">
+						<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="black_blend"></div>
+					
+				</div>
+				
+				<div class="section psample psample_row2 fullreverse">
+					<div class="grid3 firstcol">
+						<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid4">
+						<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid5">
+						<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="black_blend"></div>
+
+				</div>
+				
+				<div class="section psample fullreverse psample_row3" id="">
+					<div class="grid5 firstcol">
+						<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					<div class="grid7">
+						<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					
+					<div class="black_blend"></div>
+					
+				</div>
+				
+				<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+					<div class="grid12 firstcol">
+						<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					<div class="black_blend"></div>
+					
+				</div>
+				
+				
+				
+				
+			</div>
+			
+			<div id="layout">
+				
+				<div class="section">
+					
+					<div class="grid12 firstcol">
+						<h1>Lorem Ipsum Dolor</h1>
+						<h2>Etiam porta sem malesuada magna mollis euismod</h2>
+						
+						<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+					</div>
+				</div>
+				<div class="section">
+					<div class="grid8 firstcol">
+						<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+						
+						<h3>Pellentesque ornare sem</h3>
+
+						<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+						<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+						<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+						<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+						<h3>Cras mattis consectetur</h3>
+
+						<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+						<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+					</div>
+					
+					<div class="grid4 sidebar">
+						
+						<div class="box reverse">
+							<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+						</div>
+						
+						<p class="caption">Maecenas sed diam eget risus varius.</p>
+
+						<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+					
+
+						<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+						<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+					</div>
+				</div>
+				
+			</div>
+
+
+			
+
+
+
+		<div id="glyphs">
+			<div class="section">
+				<div class="grid12 firstcol">
+			
+				<h1>Language Support</h1>
+				<p>The subset of Avenir LT 45 Book Regular in this kit supports the following languages:<br />
+			
+					Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo				</p>
+				<h1>Glyph Chart</h1>
+				<p>The subset of Avenir LT 45 Book Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+				<div id="glyph_chart">
+			
+																				 <div><p>&amp;#32;</p>&#32;</div>
+																				 <div><p>&amp;#33;</p>&#33;</div>
+																				 <div><p>&amp;#34;</p>&#34;</div>
+																				 <div><p>&amp;#35;</p>&#35;</div>
+																				 <div><p>&amp;#36;</p>&#36;</div>
+																				 <div><p>&amp;#37;</p>&#37;</div>
+																				 <div><p>&amp;#38;</p>&#38;</div>
+																				 <div><p>&amp;#39;</p>&#39;</div>
+																				 <div><p>&amp;#40;</p>&#40;</div>
+																				 <div><p>&amp;#41;</p>&#41;</div>
+																				 <div><p>&amp;#42;</p>&#42;</div>
+																				 <div><p>&amp;#43;</p>&#43;</div>
+																				 <div><p>&amp;#44;</p>&#44;</div>
+																				 <div><p>&amp;#45;</p>&#45;</div>
+																				 <div><p>&amp;#46;</p>&#46;</div>
+																				 <div><p>&amp;#47;</p>&#47;</div>
+																				 <div><p>&amp;#48;</p>&#48;</div>
+																				 <div><p>&amp;#49;</p>&#49;</div>
+																				 <div><p>&amp;#50;</p>&#50;</div>
+																				 <div><p>&amp;#51;</p>&#51;</div>
+																				 <div><p>&amp;#52;</p>&#52;</div>
+																				 <div><p>&amp;#53;</p>&#53;</div>
+																				 <div><p>&amp;#54;</p>&#54;</div>
+																				 <div><p>&amp;#55;</p>&#55;</div>
+																				 <div><p>&amp;#56;</p>&#56;</div>
+																				 <div><p>&amp;#57;</p>&#57;</div>
+																				 <div><p>&amp;#58;</p>&#58;</div>
+																				 <div><p>&amp;#59;</p>&#59;</div>
+																				 <div><p>&amp;#60;</p>&#60;</div>
+																				 <div><p>&amp;#61;</p>&#61;</div>
+																				 <div><p>&amp;#62;</p>&#62;</div>
+																				 <div><p>&amp;#63;</p>&#63;</div>
+																				 <div><p>&amp;#64;</p>&#64;</div>
+																				 <div><p>&amp;#65;</p>&#65;</div>
+																				 <div><p>&amp;#66;</p>&#66;</div>
+																				 <div><p>&amp;#67;</p>&#67;</div>
+																				 <div><p>&amp;#68;</p>&#68;</div>
+																				 <div><p>&amp;#69;</p>&#69;</div>
+																				 <div><p>&amp;#70;</p>&#70;</div>
+																				 <div><p>&amp;#71;</p>&#71;</div>
+																				 <div><p>&amp;#72;</p>&#72;</div>
+																				 <div><p>&amp;#73;</p>&#73;</div>
+																				 <div><p>&amp;#74;</p>&#74;</div>
+																				 <div><p>&amp;#75;</p>&#75;</div>
+																				 <div><p>&amp;#76;</p>&#76;</div>
+																				 <div><p>&amp;#77;</p>&#77;</div>
+																				 <div><p>&amp;#78;</p>&#78;</div>
+																				 <div><p>&amp;#79;</p>&#79;</div>
+																				 <div><p>&amp;#80;</p>&#80;</div>
+																				 <div><p>&amp;#81;</p>&#81;</div>
+																				 <div><p>&amp;#82;</p>&#82;</div>
+																				 <div><p>&amp;#83;</p>&#83;</div>
+																				 <div><p>&amp;#84;</p>&#84;</div>
+																				 <div><p>&amp;#85;</p>&#85;</div>
+																				 <div><p>&amp;#86;</p>&#86;</div>
+																				 <div><p>&amp;#87;</p>&#87;</div>
+																				 <div><p>&amp;#88;</p>&#88;</div>
+																				 <div><p>&amp;#89;</p>&#89;</div>
+																				 <div><p>&amp;#90;</p>&#90;</div>
+																				 <div><p>&amp;#91;</p>&#91;</div>
+																				 <div><p>&amp;#92;</p>&#92;</div>
+																				 <div><p>&amp;#93;</p>&#93;</div>
+																				 <div><p>&amp;#94;</p>&#94;</div>
+																				 <div><p>&amp;#95;</p>&#95;</div>
+																				 <div><p>&amp;#96;</p>&#96;</div>
+																				 <div><p>&amp;#97;</p>&#97;</div>
+																				 <div><p>&amp;#98;</p>&#98;</div>
+																				 <div><p>&amp;#99;</p>&#99;</div>
+																				 <div><p>&amp;#100;</p>&#100;</div>
+																				 <div><p>&amp;#101;</p>&#101;</div>
+																				 <div><p>&amp;#102;</p>&#102;</div>
+																				 <div><p>&amp;#103;</p>&#103;</div>
+																				 <div><p>&amp;#104;</p>&#104;</div>
+																				 <div><p>&amp;#105;</p>&#105;</div>
+																				 <div><p>&amp;#106;</p>&#106;</div>
+																				 <div><p>&amp;#107;</p>&#107;</div>
+																				 <div><p>&amp;#108;</p>&#108;</div>
+																				 <div><p>&amp;#109;</p>&#109;</div>
+																				 <div><p>&amp;#110;</p>&#110;</div>
+																				 <div><p>&amp;#111;</p>&#111;</div>
+																				 <div><p>&amp;#112;</p>&#112;</div>
+																				 <div><p>&amp;#113;</p>&#113;</div>
+																				 <div><p>&amp;#114;</p>&#114;</div>
+																				 <div><p>&amp;#115;</p>&#115;</div>
+																				 <div><p>&amp;#116;</p>&#116;</div>
+																				 <div><p>&amp;#117;</p>&#117;</div>
+																				 <div><p>&amp;#118;</p>&#118;</div>
+																				 <div><p>&amp;#119;</p>&#119;</div>
+																				 <div><p>&amp;#120;</p>&#120;</div>
+																				 <div><p>&amp;#121;</p>&#121;</div>
+																				 <div><p>&amp;#122;</p>&#122;</div>
+																				 <div><p>&amp;#123;</p>&#123;</div>
+																				 <div><p>&amp;#124;</p>&#124;</div>
+																				 <div><p>&amp;#125;</p>&#125;</div>
+																				 <div><p>&amp;#126;</p>&#126;</div>
+																				 <div><p>&amp;#160;</p>&#160;</div>
+																				 <div><p>&amp;#161;</p>&#161;</div>
+																				 <div><p>&amp;#162;</p>&#162;</div>
+																				 <div><p>&amp;#163;</p>&#163;</div>
+																				 <div><p>&amp;#164;</p>&#164;</div>
+																				 <div><p>&amp;#165;</p>&#165;</div>
+																				 <div><p>&amp;#166;</p>&#166;</div>
+																				 <div><p>&amp;#167;</p>&#167;</div>
+																				 <div><p>&amp;#168;</p>&#168;</div>
+																				 <div><p>&amp;#169;</p>&#169;</div>
+																				 <div><p>&amp;#170;</p>&#170;</div>
+																				 <div><p>&amp;#171;</p>&#171;</div>
+																				 <div><p>&amp;#172;</p>&#172;</div>
+																				 <div><p>&amp;#173;</p>&#173;</div>
+																				 <div><p>&amp;#174;</p>&#174;</div>
+																				 <div><p>&amp;#175;</p>&#175;</div>
+																				 <div><p>&amp;#176;</p>&#176;</div>
+																				 <div><p>&amp;#177;</p>&#177;</div>
+																				 <div><p>&amp;#178;</p>&#178;</div>
+																				 <div><p>&amp;#179;</p>&#179;</div>
+																				 <div><p>&amp;#180;</p>&#180;</div>
+																				 <div><p>&amp;#181;</p>&#181;</div>
+																				 <div><p>&amp;#182;</p>&#182;</div>
+																				 <div><p>&amp;#183;</p>&#183;</div>
+																				 <div><p>&amp;#184;</p>&#184;</div>
+																				 <div><p>&amp;#185;</p>&#185;</div>
+																				 <div><p>&amp;#186;</p>&#186;</div>
+																				 <div><p>&amp;#187;</p>&#187;</div>
+																				 <div><p>&amp;#188;</p>&#188;</div>
+																				 <div><p>&amp;#189;</p>&#189;</div>
+																				 <div><p>&amp;#190;</p>&#190;</div>
+																				 <div><p>&amp;#191;</p>&#191;</div>
+																				 <div><p>&amp;#192;</p>&#192;</div>
+																				 <div><p>&amp;#193;</p>&#193;</div>
+																				 <div><p>&amp;#194;</p>&#194;</div>
+																				 <div><p>&amp;#195;</p>&#195;</div>
+																				 <div><p>&amp;#196;</p>&#196;</div>
+																				 <div><p>&amp;#197;</p>&#197;</div>
+																				 <div><p>&amp;#198;</p>&#198;</div>
+																				 <div><p>&amp;#199;</p>&#199;</div>
+																				 <div><p>&amp;#200;</p>&#200;</div>
+																				 <div><p>&amp;#201;</p>&#201;</div>
+																				 <div><p>&amp;#202;</p>&#202;</div>
+																				 <div><p>&amp;#203;</p>&#203;</div>
+																				 <div><p>&amp;#204;</p>&#204;</div>
+																				 <div><p>&amp;#205;</p>&#205;</div>
+																				 <div><p>&amp;#206;</p>&#206;</div>
+																				 <div><p>&amp;#207;</p>&#207;</div>
+																				 <div><p>&amp;#208;</p>&#208;</div>
+																				 <div><p>&amp;#209;</p>&#209;</div>
+																				 <div><p>&amp;#210;</p>&#210;</div>
+																				 <div><p>&amp;#211;</p>&#211;</div>
+																				 <div><p>&amp;#212;</p>&#212;</div>
+																				 <div><p>&amp;#213;</p>&#213;</div>
+																				 <div><p>&amp;#214;</p>&#214;</div>
+																				 <div><p>&amp;#215;</p>&#215;</div>
+																				 <div><p>&amp;#216;</p>&#216;</div>
+																				 <div><p>&amp;#217;</p>&#217;</div>
+																				 <div><p>&amp;#218;</p>&#218;</div>
+																				 <div><p>&amp;#219;</p>&#219;</div>
+																				 <div><p>&amp;#220;</p>&#220;</div>
+																				 <div><p>&amp;#221;</p>&#221;</div>
+																				 <div><p>&amp;#222;</p>&#222;</div>
+																				 <div><p>&amp;#223;</p>&#223;</div>
+																				 <div><p>&amp;#224;</p>&#224;</div>
+																				 <div><p>&amp;#225;</p>&#225;</div>
+																				 <div><p>&amp;#226;</p>&#226;</div>
+																				 <div><p>&amp;#227;</p>&#227;</div>
+																				 <div><p>&amp;#228;</p>&#228;</div>
+																				 <div><p>&amp;#229;</p>&#229;</div>
+																				 <div><p>&amp;#230;</p>&#230;</div>
+																				 <div><p>&amp;#231;</p>&#231;</div>
+																				 <div><p>&amp;#232;</p>&#232;</div>
+																				 <div><p>&amp;#233;</p>&#233;</div>
+																				 <div><p>&amp;#234;</p>&#234;</div>
+																				 <div><p>&amp;#235;</p>&#235;</div>
+																				 <div><p>&amp;#236;</p>&#236;</div>
+																				 <div><p>&amp;#237;</p>&#237;</div>
+																				 <div><p>&amp;#238;</p>&#238;</div>
+																				 <div><p>&amp;#239;</p>&#239;</div>
+																				 <div><p>&amp;#240;</p>&#240;</div>
+																				 <div><p>&amp;#241;</p>&#241;</div>
+																				 <div><p>&amp;#242;</p>&#242;</div>
+																				 <div><p>&amp;#243;</p>&#243;</div>
+																				 <div><p>&amp;#244;</p>&#244;</div>
+																				 <div><p>&amp;#245;</p>&#245;</div>
+																				 <div><p>&amp;#246;</p>&#246;</div>
+																				 <div><p>&amp;#247;</p>&#247;</div>
+																				 <div><p>&amp;#248;</p>&#248;</div>
+																				 <div><p>&amp;#249;</p>&#249;</div>
+																				 <div><p>&amp;#250;</p>&#250;</div>
+																				 <div><p>&amp;#251;</p>&#251;</div>
+																				 <div><p>&amp;#252;</p>&#252;</div>
+																				 <div><p>&amp;#253;</p>&#253;</div>
+																				 <div><p>&amp;#254;</p>&#254;</div>
+																				 <div><p>&amp;#255;</p>&#255;</div>
+																				 <div><p>&amp;#338;</p>&#338;</div>
+																				 <div><p>&amp;#339;</p>&#339;</div>
+																				 <div><p>&amp;#376;</p>&#376;</div>
+																				 <div><p>&amp;#710;</p>&#710;</div>
+																				 <div><p>&amp;#732;</p>&#732;</div>
+																				 <div><p>&amp;#8192;</p>&#8192;</div>
+																				 <div><p>&amp;#8193;</p>&#8193;</div>
+																				 <div><p>&amp;#8194;</p>&#8194;</div>
+																				 <div><p>&amp;#8195;</p>&#8195;</div>
+																				 <div><p>&amp;#8196;</p>&#8196;</div>
+																				 <div><p>&amp;#8197;</p>&#8197;</div>
+																				 <div><p>&amp;#8198;</p>&#8198;</div>
+																				 <div><p>&amp;#8199;</p>&#8199;</div>
+																				 <div><p>&amp;#8200;</p>&#8200;</div>
+																				 <div><p>&amp;#8201;</p>&#8201;</div>
+																				 <div><p>&amp;#8202;</p>&#8202;</div>
+																				 <div><p>&amp;#8208;</p>&#8208;</div>
+																				 <div><p>&amp;#8209;</p>&#8209;</div>
+																				 <div><p>&amp;#8210;</p>&#8210;</div>
+																				 <div><p>&amp;#8211;</p>&#8211;</div>
+																				 <div><p>&amp;#8212;</p>&#8212;</div>
+																				 <div><p>&amp;#8216;</p>&#8216;</div>
+																				 <div><p>&amp;#8217;</p>&#8217;</div>
+																				 <div><p>&amp;#8218;</p>&#8218;</div>
+																				 <div><p>&amp;#8220;</p>&#8220;</div>
+																				 <div><p>&amp;#8221;</p>&#8221;</div>
+																				 <div><p>&amp;#8222;</p>&#8222;</div>
+																				 <div><p>&amp;#8226;</p>&#8226;</div>
+																				 <div><p>&amp;#8230;</p>&#8230;</div>
+																				 <div><p>&amp;#8239;</p>&#8239;</div>
+																				 <div><p>&amp;#8249;</p>&#8249;</div>
+																				 <div><p>&amp;#8250;</p>&#8250;</div>
+																				 <div><p>&amp;#8287;</p>&#8287;</div>
+																				 <div><p>&amp;#8364;</p>&#8364;</div>
+																				 <div><p>&amp;#8482;</p>&#8482;</div>
+																				 <div><p>&amp;#9724;</p>&#9724;</div>
+																				 <div><p>&amp;#64257;</p>&#64257;</div>
+																				 <div><p>&amp;#64258;</p>&#64258;</div>
+																																																</div>	
+				</div>
+		
+		
+			</div>
+		</div>
+		
+		
+		<div id="specs">
+			
+		</div>
+	
+		<div id="installing">
+			<div class="section">
+				<div class="grid7 firstcol">
+					<h1>Installing Webfonts</h1>
+					
+					<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+					
+					<h2>1. Upload your webfonts</h2>
+					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+					
+					<h2>2. Include the webfont stylesheet</h2>
+					<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+	<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+	<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+					<h2>3. Modify your own stylesheet</h2>
+					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+				</div>
+				
+				<div class="grid5 sidebar">
+					<div class="box">
+						<h2>Troubleshooting<br />Font-Face Problems</h2>
+						<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+						<h3>Fonts not showing in any browser</h3>
+
+						<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+						<h3>Fonts not loading in iPhone or iPad</h3>
+
+						<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+						<h3>Fonts not loading in Firefox</h3>
+
+						<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+						<h3>Fonts not loading in IE</h3>
+
+						<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+						<h3>Fonts not loading in IE9</h3>
+
+						<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+					</div>
+				</div>
+			</div>
+			
+		</div>
+	
+	</div>
+	<div id="footer">
+		<p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+	</div>
+</div>
+</body>
+</html>
@@ -0,0 +1,619 @@
+<!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: 'avenir_lt_45_bookitalic';
+							}
+		</style>
+
+	<title>Avenir LT 45 Book Italic 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">
+		Avenir LT 45 Book Italic	</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>Avenir LT 45 Book Italic</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 Avenir LT 45 Book Italic 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 Avenir LT 45 Book Italic in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+				<div id="glyph_chart">
+			
+																				 <div><p>&amp;#32;</p>&#32;</div>
+																				 <div><p>&amp;#33;</p>&#33;</div>
+																				 <div><p>&amp;#34;</p>&#34;</div>
+																				 <div><p>&amp;#35;</p>&#35;</div>
+																				 <div><p>&amp;#36;</p>&#36;</div>
+																				 <div><p>&amp;#37;</p>&#37;</div>
+																				 <div><p>&amp;#38;</p>&#38;</div>
+																				 <div><p>&amp;#39;</p>&#39;</div>
+																				 <div><p>&amp;#40;</p>&#40;</div>
+																				 <div><p>&amp;#41;</p>&#41;</div>
+																				 <div><p>&amp;#42;</p>&#42;</div>
+																				 <div><p>&amp;#43;</p>&#43;</div>
+																				 <div><p>&amp;#44;</p>&#44;</div>
+																				 <div><p>&amp;#45;</p>&#45;</div>
+																				 <div><p>&amp;#46;</p>&#46;</div>
+																				 <div><p>&amp;#47;</p>&#47;</div>
+																				 <div><p>&amp;#48;</p>&#48;</div>
+																				 <div><p>&amp;#49;</p>&#49;</div>
+																				 <div><p>&amp;#50;</p>&#50;</div>
+																				 <div><p>&amp;#51;</p>&#51;</div>
+																				 <div><p>&amp;#52;</p>&#52;</div>
+																				 <div><p>&amp;#53;</p>&#53;</div>
+																				 <div><p>&amp;#54;</p>&#54;</div>
+																				 <div><p>&amp;#55;</p>&#55;</div>
+																				 <div><p>&amp;#56;</p>&#56;</div>
+																				 <div><p>&amp;#57;</p>&#57;</div>
+																				 <div><p>&amp;#58;</p>&#58;</div>
+																				 <div><p>&amp;#59;</p>&#59;</div>
+																				 <div><p>&amp;#60;</p>&#60;</div>
+																				 <div><p>&amp;#61;</p>&#61;</div>
+																				 <div><p>&amp;#62;</p>&#62;</div>
+																				 <div><p>&amp;#63;</p>&#63;</div>
+																				 <div><p>&amp;#64;</p>&#64;</div>
+																				 <div><p>&amp;#65;</p>&#65;</div>
+																				 <div><p>&amp;#66;</p>&#66;</div>
+																				 <div><p>&amp;#67;</p>&#67;</div>
+																				 <div><p>&amp;#68;</p>&#68;</div>
+																				 <div><p>&amp;#69;</p>&#69;</div>
+																				 <div><p>&amp;#70;</p>&#70;</div>
+																				 <div><p>&amp;#71;</p>&#71;</div>
+																				 <div><p>&amp;#72;</p>&#72;</div>
+																				 <div><p>&amp;#73;</p>&#73;</div>
+																				 <div><p>&amp;#74;</p>&#74;</div>
+																				 <div><p>&amp;#75;</p>&#75;</div>
+																				 <div><p>&amp;#76;</p>&#76;</div>
+																				 <div><p>&amp;#77;</p>&#77;</div>
+																				 <div><p>&amp;#78;</p>&#78;</div>
+																				 <div><p>&amp;#79;</p>&#79;</div>
+																				 <div><p>&amp;#80;</p>&#80;</div>
+																				 <div><p>&amp;#81;</p>&#81;</div>
+																				 <div><p>&amp;#82;</p>&#82;</div>
+																				 <div><p>&amp;#83;</p>&#83;</div>
+																				 <div><p>&amp;#84;</p>&#84;</div>
+																				 <div><p>&amp;#85;</p>&#85;</div>
+																				 <div><p>&amp;#86;</p>&#86;</div>
+																				 <div><p>&amp;#87;</p>&#87;</div>
+																				 <div><p>&amp;#88;</p>&#88;</div>
+																				 <div><p>&amp;#89;</p>&#89;</div>
+																				 <div><p>&amp;#90;</p>&#90;</div>
+																				 <div><p>&amp;#91;</p>&#91;</div>
+																				 <div><p>&amp;#92;</p>&#92;</div>
+																				 <div><p>&amp;#93;</p>&#93;</div>
+																				 <div><p>&amp;#94;</p>&#94;</div>
+																				 <div><p>&amp;#95;</p>&#95;</div>
+																				 <div><p>&amp;#96;</p>&#96;</div>
+																				 <div><p>&amp;#97;</p>&#97;</div>
+																				 <div><p>&amp;#98;</p>&#98;</div>
+																				 <div><p>&amp;#99;</p>&#99;</div>
+																				 <div><p>&amp;#100;</p>&#100;</div>
+																				 <div><p>&amp;#101;</p>&#101;</div>
+																				 <div><p>&amp;#102;</p>&#102;</div>
+																				 <div><p>&amp;#103;</p>&#103;</div>
+																				 <div><p>&amp;#104;</p>&#104;</div>
+																				 <div><p>&amp;#105;</p>&#105;</div>
+																				 <div><p>&amp;#106;</p>&#106;</div>
+																				 <div><p>&amp;#107;</p>&#107;</div>
+																				 <div><p>&amp;#108;</p>&#108;</div>
+																				 <div><p>&amp;#109;</p>&#109;</div>
+																				 <div><p>&amp;#110;</p>&#110;</div>
+																				 <div><p>&amp;#111;</p>&#111;</div>
+																				 <div><p>&amp;#112;</p>&#112;</div>
+																				 <div><p>&amp;#113;</p>&#113;</div>
+																				 <div><p>&amp;#114;</p>&#114;</div>
+																				 <div><p>&amp;#115;</p>&#115;</div>
+																				 <div><p>&amp;#116;</p>&#116;</div>
+																				 <div><p>&amp;#117;</p>&#117;</div>
+																				 <div><p>&amp;#118;</p>&#118;</div>
+																				 <div><p>&amp;#119;</p>&#119;</div>
+																				 <div><p>&amp;#120;</p>&#120;</div>
+																				 <div><p>&amp;#121;</p>&#121;</div>
+																				 <div><p>&amp;#122;</p>&#122;</div>
+																				 <div><p>&amp;#123;</p>&#123;</div>
+																				 <div><p>&amp;#124;</p>&#124;</div>
+																				 <div><p>&amp;#125;</p>&#125;</div>
+																				 <div><p>&amp;#126;</p>&#126;</div>
+																				 <div><p>&amp;#160;</p>&#160;</div>
+																				 <div><p>&amp;#161;</p>&#161;</div>
+																				 <div><p>&amp;#162;</p>&#162;</div>
+																				 <div><p>&amp;#163;</p>&#163;</div>
+																				 <div><p>&amp;#164;</p>&#164;</div>
+																				 <div><p>&amp;#165;</p>&#165;</div>
+																				 <div><p>&amp;#166;</p>&#166;</div>
+																				 <div><p>&amp;#167;</p>&#167;</div>
+																				 <div><p>&amp;#168;</p>&#168;</div>
+																				 <div><p>&amp;#169;</p>&#169;</div>
+																				 <div><p>&amp;#170;</p>&#170;</div>
+																				 <div><p>&amp;#171;</p>&#171;</div>
+																				 <div><p>&amp;#172;</p>&#172;</div>
+																				 <div><p>&amp;#173;</p>&#173;</div>
+																				 <div><p>&amp;#174;</p>&#174;</div>
+																				 <div><p>&amp;#175;</p>&#175;</div>
+																				 <div><p>&amp;#176;</p>&#176;</div>
+																				 <div><p>&amp;#177;</p>&#177;</div>
+																				 <div><p>&amp;#178;</p>&#178;</div>
+																				 <div><p>&amp;#179;</p>&#179;</div>
+																				 <div><p>&amp;#180;</p>&#180;</div>
+																				 <div><p>&amp;#181;</p>&#181;</div>
+																				 <div><p>&amp;#182;</p>&#182;</div>
+																				 <div><p>&amp;#183;</p>&#183;</div>
+																				 <div><p>&amp;#184;</p>&#184;</div>
+																				 <div><p>&amp;#185;</p>&#185;</div>
+																				 <div><p>&amp;#186;</p>&#186;</div>
+																				 <div><p>&amp;#187;</p>&#187;</div>
+																				 <div><p>&amp;#188;</p>&#188;</div>
+																				 <div><p>&amp;#189;</p>&#189;</div>
+																				 <div><p>&amp;#190;</p>&#190;</div>
+																				 <div><p>&amp;#191;</p>&#191;</div>
+																				 <div><p>&amp;#192;</p>&#192;</div>
+																				 <div><p>&amp;#193;</p>&#193;</div>
+																				 <div><p>&amp;#194;</p>&#194;</div>
+																				 <div><p>&amp;#195;</p>&#195;</div>
+																				 <div><p>&amp;#196;</p>&#196;</div>
+																				 <div><p>&amp;#197;</p>&#197;</div>
+																				 <div><p>&amp;#198;</p>&#198;</div>
+																				 <div><p>&amp;#199;</p>&#199;</div>
+																				 <div><p>&amp;#200;</p>&#200;</div>
+																				 <div><p>&amp;#201;</p>&#201;</div>
+																				 <div><p>&amp;#202;</p>&#202;</div>
+																				 <div><p>&amp;#203;</p>&#203;</div>
+																				 <div><p>&amp;#204;</p>&#204;</div>
+																				 <div><p>&amp;#205;</p>&#205;</div>
+																				 <div><p>&amp;#206;</p>&#206;</div>
+																				 <div><p>&amp;#207;</p>&#207;</div>
+																				 <div><p>&amp;#208;</p>&#208;</div>
+																				 <div><p>&amp;#209;</p>&#209;</div>
+																				 <div><p>&amp;#210;</p>&#210;</div>
+																				 <div><p>&amp;#211;</p>&#211;</div>
+																				 <div><p>&amp;#212;</p>&#212;</div>
+																				 <div><p>&amp;#213;</p>&#213;</div>
+																				 <div><p>&amp;#214;</p>&#214;</div>
+																				 <div><p>&amp;#215;</p>&#215;</div>
+																				 <div><p>&amp;#216;</p>&#216;</div>
+																				 <div><p>&amp;#217;</p>&#217;</div>
+																				 <div><p>&amp;#218;</p>&#218;</div>
+																				 <div><p>&amp;#219;</p>&#219;</div>
+																				 <div><p>&amp;#220;</p>&#220;</div>
+																				 <div><p>&amp;#221;</p>&#221;</div>
+																				 <div><p>&amp;#222;</p>&#222;</div>
+																				 <div><p>&amp;#223;</p>&#223;</div>
+																				 <div><p>&amp;#224;</p>&#224;</div>
+																				 <div><p>&amp;#225;</p>&#225;</div>
+																				 <div><p>&amp;#226;</p>&#226;</div>
+																				 <div><p>&amp;#227;</p>&#227;</div>
+																				 <div><p>&amp;#228;</p>&#228;</div>
+																				 <div><p>&amp;#229;</p>&#229;</div>
+																				 <div><p>&amp;#230;</p>&#230;</div>
+																				 <div><p>&amp;#231;</p>&#231;</div>
+																				 <div><p>&amp;#232;</p>&#232;</div>
+																				 <div><p>&amp;#233;</p>&#233;</div>
+																				 <div><p>&amp;#234;</p>&#234;</div>
+																				 <div><p>&amp;#235;</p>&#235;</div>
+																				 <div><p>&amp;#236;</p>&#236;</div>
+																				 <div><p>&amp;#237;</p>&#237;</div>
+																				 <div><p>&amp;#238;</p>&#238;</div>
+																				 <div><p>&amp;#239;</p>&#239;</div>
+																				 <div><p>&amp;#240;</p>&#240;</div>
+																				 <div><p>&amp;#241;</p>&#241;</div>
+																				 <div><p>&amp;#242;</p>&#242;</div>
+																				 <div><p>&amp;#243;</p>&#243;</div>
+																				 <div><p>&amp;#244;</p>&#244;</div>
+																				 <div><p>&amp;#245;</p>&#245;</div>
+																				 <div><p>&amp;#246;</p>&#246;</div>
+																				 <div><p>&amp;#247;</p>&#247;</div>
+																				 <div><p>&amp;#248;</p>&#248;</div>
+																				 <div><p>&amp;#249;</p>&#249;</div>
+																				 <div><p>&amp;#250;</p>&#250;</div>
+																				 <div><p>&amp;#251;</p>&#251;</div>
+																				 <div><p>&amp;#252;</p>&#252;</div>
+																				 <div><p>&amp;#253;</p>&#253;</div>
+																				 <div><p>&amp;#254;</p>&#254;</div>
+																				 <div><p>&amp;#255;</p>&#255;</div>
+																				 <div><p>&amp;#338;</p>&#338;</div>
+																				 <div><p>&amp;#339;</p>&#339;</div>
+																				 <div><p>&amp;#376;</p>&#376;</div>
+																				 <div><p>&amp;#710;</p>&#710;</div>
+																				 <div><p>&amp;#732;</p>&#732;</div>
+																				 <div><p>&amp;#8192;</p>&#8192;</div>
+																				 <div><p>&amp;#8193;</p>&#8193;</div>
+																				 <div><p>&amp;#8194;</p>&#8194;</div>
+																				 <div><p>&amp;#8195;</p>&#8195;</div>
+																				 <div><p>&amp;#8196;</p>&#8196;</div>
+																				 <div><p>&amp;#8197;</p>&#8197;</div>
+																				 <div><p>&amp;#8198;</p>&#8198;</div>
+																				 <div><p>&amp;#8199;</p>&#8199;</div>
+																				 <div><p>&amp;#8200;</p>&#8200;</div>
+																				 <div><p>&amp;#8201;</p>&#8201;</div>
+																				 <div><p>&amp;#8202;</p>&#8202;</div>
+																				 <div><p>&amp;#8208;</p>&#8208;</div>
+																				 <div><p>&amp;#8209;</p>&#8209;</div>
+																				 <div><p>&amp;#8210;</p>&#8210;</div>
+																				 <div><p>&amp;#8211;</p>&#8211;</div>
+																				 <div><p>&amp;#8212;</p>&#8212;</div>
+																				 <div><p>&amp;#8216;</p>&#8216;</div>
+																				 <div><p>&amp;#8217;</p>&#8217;</div>
+																				 <div><p>&amp;#8218;</p>&#8218;</div>
+																				 <div><p>&amp;#8220;</p>&#8220;</div>
+																				 <div><p>&amp;#8221;</p>&#8221;</div>
+																				 <div><p>&amp;#8222;</p>&#8222;</div>
+																				 <div><p>&amp;#8226;</p>&#8226;</div>
+																				 <div><p>&amp;#8230;</p>&#8230;</div>
+																				 <div><p>&amp;#8239;</p>&#8239;</div>
+																				 <div><p>&amp;#8249;</p>&#8249;</div>
+																				 <div><p>&amp;#8250;</p>&#8250;</div>
+																				 <div><p>&amp;#8287;</p>&#8287;</div>
+																				 <div><p>&amp;#8364;</p>&#8364;</div>
+																				 <div><p>&amp;#8482;</p>&#8482;</div>
+																				 <div><p>&amp;#9724;</p>&#9724;</div>
+																				 <div><p>&amp;#64257;</p>&#64257;</div>
+																				 <div><p>&amp;#64258;</p>&#64258;</div>
+																																																</div>	
+				</div>
+		
+		
+			</div>
+		</div>
+		
+		
+		<div id="specs">
+			
+		</div>
+	
+		<div id="installing">
+			<div class="section">
+				<div class="grid7 firstcol">
+					<h1>Installing Webfonts</h1>
+					
+					<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+					
+					<h2>1. Upload your webfonts</h2>
+					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+					
+					<h2>2. Include the webfont stylesheet</h2>
+					<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+	<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+	<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+					<h2>3. Modify your own stylesheet</h2>
+					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+				</div>
+				
+				<div class="grid5 sidebar">
+					<div class="box">
+						<h2>Troubleshooting<br />Font-Face Problems</h2>
+						<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+						<h3>Fonts not showing in any browser</h3>
+
+						<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+						<h3>Fonts not loading in iPhone or iPad</h3>
+
+						<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+						<h3>Fonts not loading in Firefox</h3>
+
+						<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+						<h3>Fonts not loading in IE</h3>
+
+						<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+						<h3>Fonts not loading in IE9</h3>
+
+						<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+					</div>
+				</div>
+			</div>
+			
+		</div>
+	
+	</div>
+	<div id="footer">
+		<p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+	</div>
+</div>
+</body>
+</html>
@@ -0,0 +1,619 @@
+<!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: 'avenir_lt_55_romanitalic';
+							}
+		</style>
+
+	<title>Avenir LT 55 Roman Italic 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">
+		Avenir LT 55 Roman Italic	</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>Avenir LT 55 Roman Italic</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 Avenir LT 55 Roman Italic 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 Avenir LT 55 Roman Italic in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+				<div id="glyph_chart">
+			
+																				 <div><p>&amp;#32;</p>&#32;</div>
+																				 <div><p>&amp;#33;</p>&#33;</div>
+																				 <div><p>&amp;#34;</p>&#34;</div>
+																				 <div><p>&amp;#35;</p>&#35;</div>
+																				 <div><p>&amp;#36;</p>&#36;</div>
+																				 <div><p>&amp;#37;</p>&#37;</div>
+																				 <div><p>&amp;#38;</p>&#38;</div>
+																				 <div><p>&amp;#39;</p>&#39;</div>
+																				 <div><p>&amp;#40;</p>&#40;</div>
+																				 <div><p>&amp;#41;</p>&#41;</div>
+																				 <div><p>&amp;#42;</p>&#42;</div>
+																				 <div><p>&amp;#43;</p>&#43;</div>
+																				 <div><p>&amp;#44;</p>&#44;</div>
+																				 <div><p>&amp;#45;</p>&#45;</div>
+																				 <div><p>&amp;#46;</p>&#46;</div>
+																				 <div><p>&amp;#47;</p>&#47;</div>
+																				 <div><p>&amp;#48;</p>&#48;</div>
+																				 <div><p>&amp;#49;</p>&#49;</div>
+																				 <div><p>&amp;#50;</p>&#50;</div>
+																				 <div><p>&amp;#51;</p>&#51;</div>
+																				 <div><p>&amp;#52;</p>&#52;</div>
+																				 <div><p>&amp;#53;</p>&#53;</div>
+																				 <div><p>&amp;#54;</p>&#54;</div>
+																				 <div><p>&amp;#55;</p>&#55;</div>
+																				 <div><p>&amp;#56;</p>&#56;</div>
+																				 <div><p>&amp;#57;</p>&#57;</div>
+																				 <div><p>&amp;#58;</p>&#58;</div>
+																				 <div><p>&amp;#59;</p>&#59;</div>
+																				 <div><p>&amp;#60;</p>&#60;</div>
+																				 <div><p>&amp;#61;</p>&#61;</div>
+																				 <div><p>&amp;#62;</p>&#62;</div>
+																				 <div><p>&amp;#63;</p>&#63;</div>
+																				 <div><p>&amp;#64;</p>&#64;</div>
+																				 <div><p>&amp;#65;</p>&#65;</div>
+																				 <div><p>&amp;#66;</p>&#66;</div>
+																				 <div><p>&amp;#67;</p>&#67;</div>
+																				 <div><p>&amp;#68;</p>&#68;</div>
+																				 <div><p>&amp;#69;</p>&#69;</div>
+																				 <div><p>&amp;#70;</p>&#70;</div>
+																				 <div><p>&amp;#71;</p>&#71;</div>
+																				 <div><p>&amp;#72;</p>&#72;</div>
+																				 <div><p>&amp;#73;</p>&#73;</div>
+																				 <div><p>&amp;#74;</p>&#74;</div>
+																				 <div><p>&amp;#75;</p>&#75;</div>
+																				 <div><p>&amp;#76;</p>&#76;</div>
+																				 <div><p>&amp;#77;</p>&#77;</div>
+																				 <div><p>&amp;#78;</p>&#78;</div>
+																				 <div><p>&amp;#79;</p>&#79;</div>
+																				 <div><p>&amp;#80;</p>&#80;</div>
+																				 <div><p>&amp;#81;</p>&#81;</div>
+																				 <div><p>&amp;#82;</p>&#82;</div>
+																				 <div><p>&amp;#83;</p>&#83;</div>
+																				 <div><p>&amp;#84;</p>&#84;</div>
+																				 <div><p>&amp;#85;</p>&#85;</div>
+																				 <div><p>&amp;#86;</p>&#86;</div>
+																				 <div><p>&amp;#87;</p>&#87;</div>
+																				 <div><p>&amp;#88;</p>&#88;</div>
+																				 <div><p>&amp;#89;</p>&#89;</div>
+																				 <div><p>&amp;#90;</p>&#90;</div>
+																				 <div><p>&amp;#91;</p>&#91;</div>
+																				 <div><p>&amp;#92;</p>&#92;</div>
+																				 <div><p>&amp;#93;</p>&#93;</div>
+																				 <div><p>&amp;#94;</p>&#94;</div>
+																				 <div><p>&amp;#95;</p>&#95;</div>
+																				 <div><p>&amp;#96;</p>&#96;</div>
+																				 <div><p>&amp;#97;</p>&#97;</div>
+																				 <div><p>&amp;#98;</p>&#98;</div>
+																				 <div><p>&amp;#99;</p>&#99;</div>
+																				 <div><p>&amp;#100;</p>&#100;</div>
+																				 <div><p>&amp;#101;</p>&#101;</div>
+																				 <div><p>&amp;#102;</p>&#102;</div>
+																				 <div><p>&amp;#103;</p>&#103;</div>
+																				 <div><p>&amp;#104;</p>&#104;</div>
+																				 <div><p>&amp;#105;</p>&#105;</div>
+																				 <div><p>&amp;#106;</p>&#106;</div>
+																				 <div><p>&amp;#107;</p>&#107;</div>
+																				 <div><p>&amp;#108;</p>&#108;</div>
+																				 <div><p>&amp;#109;</p>&#109;</div>
+																				 <div><p>&amp;#110;</p>&#110;</div>
+																				 <div><p>&amp;#111;</p>&#111;</div>
+																				 <div><p>&amp;#112;</p>&#112;</div>
+																				 <div><p>&amp;#113;</p>&#113;</div>
+																				 <div><p>&amp;#114;</p>&#114;</div>
+																				 <div><p>&amp;#115;</p>&#115;</div>
+																				 <div><p>&amp;#116;</p>&#116;</div>
+																				 <div><p>&amp;#117;</p>&#117;</div>
+																				 <div><p>&amp;#118;</p>&#118;</div>
+																				 <div><p>&amp;#119;</p>&#119;</div>
+																				 <div><p>&amp;#120;</p>&#120;</div>
+																				 <div><p>&amp;#121;</p>&#121;</div>
+																				 <div><p>&amp;#122;</p>&#122;</div>
+																				 <div><p>&amp;#123;</p>&#123;</div>
+																				 <div><p>&amp;#124;</p>&#124;</div>
+																				 <div><p>&amp;#125;</p>&#125;</div>
+																				 <div><p>&amp;#126;</p>&#126;</div>
+																				 <div><p>&amp;#160;</p>&#160;</div>
+																				 <div><p>&amp;#161;</p>&#161;</div>
+																				 <div><p>&amp;#162;</p>&#162;</div>
+																				 <div><p>&amp;#163;</p>&#163;</div>
+																				 <div><p>&amp;#164;</p>&#164;</div>
+																				 <div><p>&amp;#165;</p>&#165;</div>
+																				 <div><p>&amp;#166;</p>&#166;</div>
+																				 <div><p>&amp;#167;</p>&#167;</div>
+																				 <div><p>&amp;#168;</p>&#168;</div>
+																				 <div><p>&amp;#169;</p>&#169;</div>
+																				 <div><p>&amp;#170;</p>&#170;</div>
+																				 <div><p>&amp;#171;</p>&#171;</div>
+																				 <div><p>&amp;#172;</p>&#172;</div>
+																				 <div><p>&amp;#173;</p>&#173;</div>
+																				 <div><p>&amp;#174;</p>&#174;</div>
+																				 <div><p>&amp;#175;</p>&#175;</div>
+																				 <div><p>&amp;#176;</p>&#176;</div>
+																				 <div><p>&amp;#177;</p>&#177;</div>
+																				 <div><p>&amp;#178;</p>&#178;</div>
+																				 <div><p>&amp;#179;</p>&#179;</div>
+																				 <div><p>&amp;#180;</p>&#180;</div>
+																				 <div><p>&amp;#181;</p>&#181;</div>
+																				 <div><p>&amp;#182;</p>&#182;</div>
+																				 <div><p>&amp;#183;</p>&#183;</div>
+																				 <div><p>&amp;#184;</p>&#184;</div>
+																				 <div><p>&amp;#185;</p>&#185;</div>
+																				 <div><p>&amp;#186;</p>&#186;</div>
+																				 <div><p>&amp;#187;</p>&#187;</div>
+																				 <div><p>&amp;#188;</p>&#188;</div>
+																				 <div><p>&amp;#189;</p>&#189;</div>
+																				 <div><p>&amp;#190;</p>&#190;</div>
+																				 <div><p>&amp;#191;</p>&#191;</div>
+																				 <div><p>&amp;#192;</p>&#192;</div>
+																				 <div><p>&amp;#193;</p>&#193;</div>
+																				 <div><p>&amp;#194;</p>&#194;</div>
+																				 <div><p>&amp;#195;</p>&#195;</div>
+																				 <div><p>&amp;#196;</p>&#196;</div>
+																				 <div><p>&amp;#197;</p>&#197;</div>
+																				 <div><p>&amp;#198;</p>&#198;</div>
+																				 <div><p>&amp;#199;</p>&#199;</div>
+																				 <div><p>&amp;#200;</p>&#200;</div>
+																				 <div><p>&amp;#201;</p>&#201;</div>
+																				 <div><p>&amp;#202;</p>&#202;</div>
+																				 <div><p>&amp;#203;</p>&#203;</div>
+																				 <div><p>&amp;#204;</p>&#204;</div>
+																				 <div><p>&amp;#205;</p>&#205;</div>
+																				 <div><p>&amp;#206;</p>&#206;</div>
+																				 <div><p>&amp;#207;</p>&#207;</div>
+																				 <div><p>&amp;#208;</p>&#208;</div>
+																				 <div><p>&amp;#209;</p>&#209;</div>
+																				 <div><p>&amp;#210;</p>&#210;</div>
+																				 <div><p>&amp;#211;</p>&#211;</div>
+																				 <div><p>&amp;#212;</p>&#212;</div>
+																				 <div><p>&amp;#213;</p>&#213;</div>
+																				 <div><p>&amp;#214;</p>&#214;</div>
+																				 <div><p>&amp;#215;</p>&#215;</div>
+																				 <div><p>&amp;#216;</p>&#216;</div>
+																				 <div><p>&amp;#217;</p>&#217;</div>
+																				 <div><p>&amp;#218;</p>&#218;</div>
+																				 <div><p>&amp;#219;</p>&#219;</div>
+																				 <div><p>&amp;#220;</p>&#220;</div>
+																				 <div><p>&amp;#221;</p>&#221;</div>
+																				 <div><p>&amp;#222;</p>&#222;</div>
+																				 <div><p>&amp;#223;</p>&#223;</div>
+																				 <div><p>&amp;#224;</p>&#224;</div>
+																				 <div><p>&amp;#225;</p>&#225;</div>
+																				 <div><p>&amp;#226;</p>&#226;</div>
+																				 <div><p>&amp;#227;</p>&#227;</div>
+																				 <div><p>&amp;#228;</p>&#228;</div>
+																				 <div><p>&amp;#229;</p>&#229;</div>
+																				 <div><p>&amp;#230;</p>&#230;</div>
+																				 <div><p>&amp;#231;</p>&#231;</div>
+																				 <div><p>&amp;#232;</p>&#232;</div>
+																				 <div><p>&amp;#233;</p>&#233;</div>
+																				 <div><p>&amp;#234;</p>&#234;</div>
+																				 <div><p>&amp;#235;</p>&#235;</div>
+																				 <div><p>&amp;#236;</p>&#236;</div>
+																				 <div><p>&amp;#237;</p>&#237;</div>
+																				 <div><p>&amp;#238;</p>&#238;</div>
+																				 <div><p>&amp;#239;</p>&#239;</div>
+																				 <div><p>&amp;#240;</p>&#240;</div>
+																				 <div><p>&amp;#241;</p>&#241;</div>
+																				 <div><p>&amp;#242;</p>&#242;</div>
+																				 <div><p>&amp;#243;</p>&#243;</div>
+																				 <div><p>&amp;#244;</p>&#244;</div>
+																				 <div><p>&amp;#245;</p>&#245;</div>
+																				 <div><p>&amp;#246;</p>&#246;</div>
+																				 <div><p>&amp;#247;</p>&#247;</div>
+																				 <div><p>&amp;#248;</p>&#248;</div>
+																				 <div><p>&amp;#249;</p>&#249;</div>
+																				 <div><p>&amp;#250;</p>&#250;</div>
+																				 <div><p>&amp;#251;</p>&#251;</div>
+																				 <div><p>&amp;#252;</p>&#252;</div>
+																				 <div><p>&amp;#253;</p>&#253;</div>
+																				 <div><p>&amp;#254;</p>&#254;</div>
+																				 <div><p>&amp;#255;</p>&#255;</div>
+																				 <div><p>&amp;#338;</p>&#338;</div>
+																				 <div><p>&amp;#339;</p>&#339;</div>
+																				 <div><p>&amp;#376;</p>&#376;</div>
+																				 <div><p>&amp;#710;</p>&#710;</div>
+																				 <div><p>&amp;#732;</p>&#732;</div>
+																				 <div><p>&amp;#8192;</p>&#8192;</div>
+																				 <div><p>&amp;#8193;</p>&#8193;</div>
+																				 <div><p>&amp;#8194;</p>&#8194;</div>
+																				 <div><p>&amp;#8195;</p>&#8195;</div>
+																				 <div><p>&amp;#8196;</p>&#8196;</div>
+																				 <div><p>&amp;#8197;</p>&#8197;</div>
+																				 <div><p>&amp;#8198;</p>&#8198;</div>
+																				 <div><p>&amp;#8199;</p>&#8199;</div>
+																				 <div><p>&amp;#8200;</p>&#8200;</div>
+																				 <div><p>&amp;#8201;</p>&#8201;</div>
+																				 <div><p>&amp;#8202;</p>&#8202;</div>
+																				 <div><p>&amp;#8208;</p>&#8208;</div>
+																				 <div><p>&amp;#8209;</p>&#8209;</div>
+																				 <div><p>&amp;#8210;</p>&#8210;</div>
+																				 <div><p>&amp;#8211;</p>&#8211;</div>
+																				 <div><p>&amp;#8212;</p>&#8212;</div>
+																				 <div><p>&amp;#8216;</p>&#8216;</div>
+																				 <div><p>&amp;#8217;</p>&#8217;</div>
+																				 <div><p>&amp;#8218;</p>&#8218;</div>
+																				 <div><p>&amp;#8220;</p>&#8220;</div>
+																				 <div><p>&amp;#8221;</p>&#8221;</div>
+																				 <div><p>&amp;#8222;</p>&#8222;</div>
+																				 <div><p>&amp;#8226;</p>&#8226;</div>
+																				 <div><p>&amp;#8230;</p>&#8230;</div>
+																				 <div><p>&amp;#8239;</p>&#8239;</div>
+																				 <div><p>&amp;#8249;</p>&#8249;</div>
+																				 <div><p>&amp;#8250;</p>&#8250;</div>
+																				 <div><p>&amp;#8287;</p>&#8287;</div>
+																				 <div><p>&amp;#8364;</p>&#8364;</div>
+																				 <div><p>&amp;#8482;</p>&#8482;</div>
+																				 <div><p>&amp;#9724;</p>&#9724;</div>
+																				 <div><p>&amp;#64257;</p>&#64257;</div>
+																				 <div><p>&amp;#64258;</p>&#64258;</div>
+																																																</div>	
+				</div>
+		
+		
+			</div>
+		</div>
+		
+		
+		<div id="specs">
+			
+		</div>
+	
+		<div id="installing">
+			<div class="section">
+				<div class="grid7 firstcol">
+					<h1>Installing Webfonts</h1>
+					
+					<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+					
+					<h2>1. Upload your webfonts</h2>
+					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+					
+					<h2>2. Include the webfont stylesheet</h2>
+					<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+	<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+	<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+					<h2>3. Modify your own stylesheet</h2>
+					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+				</div>
+				
+				<div class="grid5 sidebar">
+					<div class="box">
+						<h2>Troubleshooting<br />Font-Face Problems</h2>
+						<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+						<h3>Fonts not showing in any browser</h3>
+
+						<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+						<h3>Fonts not loading in iPhone or iPad</h3>
+
+						<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+						<h3>Fonts not loading in Firefox</h3>
+
+						<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+						<h3>Fonts not loading in IE</h3>
+
+						<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+						<h3>Fonts not loading in IE9</h3>
+
+						<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+					</div>
+				</div>
+			</div>
+			
+		</div>
+	
+	</div>
+	<div id="footer">
+		<p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+	</div>
+</div>
+</body>
+</html>
@@ -0,0 +1,619 @@
+<!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: 'avenir_lt_55_romanregular';
+							}
+		</style>
+
+	<title>Avenir LT 55 Roman Regular Specimen</title>
+	
+	
+	<script type="text/javascript" charset="utf-8">
+		$(document).ready(function() {
+			$('#container').easyTabs({defaultContent:1});
+		});
+	</script>
+</head>
+
+<body>
+<div id="container">
+	<div id="header">
+		Avenir LT 55 Roman Regular	</div>
+	<ul class="tabs">
+		<li><a href="#specimen">Specimen</a></li>
+		<li><a href="#layout">Sample Layout</a></li>
+				<li><a href="#glyphs">Glyphs &amp; Languages</a></li>
+		<li><a href="#installing">Installing Webfonts</a></li>
+		
+	</ul>
+	
+	<div id="main_content">
+
+		
+			<div id="specimen">
+		
+				<div class="section">
+					<div class="grid12 firstcol">
+						<div class="huge">AaBb</div>
+					</div>
+				</div>
+		
+				<div class="section">
+					<div class="glyph_range">A&#x200B;B&#x200b;C&#x200b;D&#x200b;E&#x200b;F&#x200b;G&#x200b;H&#x200b;I&#x200b;J&#x200b;K&#x200b;L&#x200b;M&#x200b;N&#x200b;O&#x200b;P&#x200b;Q&#x200b;R&#x200b;S&#x200b;T&#x200b;U&#x200b;V&#x200b;W&#x200b;X&#x200b;Y&#x200b;Z&#x200b;a&#x200b;b&#x200b;c&#x200b;d&#x200b;e&#x200b;f&#x200b;g&#x200b;h&#x200b;i&#x200b;j&#x200b;k&#x200b;l&#x200b;m&#x200b;n&#x200b;o&#x200b;p&#x200b;q&#x200b;r&#x200b;s&#x200b;t&#x200b;u&#x200b;v&#x200b;w&#x200b;x&#x200b;y&#x200b;z&#x200b;1&#x200b;2&#x200b;3&#x200b;4&#x200b;5&#x200b;6&#x200b;7&#x200b;8&#x200b;9&#x200b;0&#x200b;&amp;&#x200b;.&#x200b;,&#x200b;?&#x200b;!&#x200b;&#64;&#x200b;(&#x200b;)&#x200b;#&#x200b;$&#x200b;%&#x200b;*&#x200b;+&#x200b;-&#x200b;=&#x200b;:&#x200b;;</div>
+				</div>
+				<div class="section">
+					<div class="grid12 firstcol">
+						<table class="sample_table">
+							<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+						</table>
+				
+					</div>
+			
+				</div>
+		
+		
+		
+								<div class="section" id="bodycomparison">
+
+
+										<div id="xheight">
+				<div class="fontbody">&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
+										<div class="fontbody" style="z-index:1">
+											body<span>Avenir LT 55 Roman Regular</span>
+										</div>
+										<div class="arialbody" style="z-index:1">
+											body<span>Arial</span>
+										</div>
+										<div class="verdanabody" style="z-index:1">
+											body<span>Verdana</span>
+										</div>
+										<div class="georgiabody" style="z-index:1">
+											body<span>Georgia</span>
+										</div>
+
+
+
+								</div>
+		
+		
+				<div class="section psample psample_row1" id="">
+					
+					<div class="grid2 firstcol">
+						<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid3">
+						<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid3">
+						<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid4">
+						<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="white_blend"></div>
+					
+				</div>
+				<div class="section psample psample_row2" id="">
+					<div class="grid3 firstcol">
+						<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid4">
+						<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid5">
+						<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+
+					<div class="white_blend"></div>
+
+				</div>
+				
+				<div class="section psample psample_row3" id="">
+					<div class="grid5 firstcol">
+						<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					<div class="grid7">
+						<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					
+					<div class="white_blend"></div>
+					
+				</div>
+				
+				<div class="section psample psample_row4" id="">
+					<div class="grid12 firstcol">
+						<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					<div class="white_blend"></div>
+					
+				</div>
+				
+				
+				
+				<div class="section psample psample_row1 fullreverse">
+					<div class="grid2 firstcol">
+						<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid3">
+						<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid3">
+						<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid4">
+						<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="black_blend"></div>
+					
+				</div>
+				
+				<div class="section psample psample_row2 fullreverse">
+					<div class="grid3 firstcol">
+						<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid4">
+						<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid5">
+						<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="black_blend"></div>
+
+				</div>
+				
+				<div class="section psample fullreverse psample_row3" id="">
+					<div class="grid5 firstcol">
+						<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					<div class="grid7">
+						<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					
+					<div class="black_blend"></div>
+					
+				</div>
+				
+				<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+					<div class="grid12 firstcol">
+						<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					<div class="black_blend"></div>
+					
+				</div>
+				
+				
+				
+				
+			</div>
+			
+			<div id="layout">
+				
+				<div class="section">
+					
+					<div class="grid12 firstcol">
+						<h1>Lorem Ipsum Dolor</h1>
+						<h2>Etiam porta sem malesuada magna mollis euismod</h2>
+						
+						<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+					</div>
+				</div>
+				<div class="section">
+					<div class="grid8 firstcol">
+						<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+						
+						<h3>Pellentesque ornare sem</h3>
+
+						<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+						<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+						<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+						<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+						<h3>Cras mattis consectetur</h3>
+
+						<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+						<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+					</div>
+					
+					<div class="grid4 sidebar">
+						
+						<div class="box reverse">
+							<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+						</div>
+						
+						<p class="caption">Maecenas sed diam eget risus varius.</p>
+
+						<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+					
+
+						<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+						<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+					</div>
+				</div>
+				
+			</div>
+
+
+			
+
+
+
+		<div id="glyphs">
+			<div class="section">
+				<div class="grid12 firstcol">
+			
+				<h1>Language Support</h1>
+				<p>The subset of Avenir LT 55 Roman Regular in this kit supports the following languages:<br />
+			
+					Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo				</p>
+				<h1>Glyph Chart</h1>
+				<p>The subset of Avenir LT 55 Roman Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+				<div id="glyph_chart">
+			
+																				 <div><p>&amp;#32;</p>&#32;</div>
+																				 <div><p>&amp;#33;</p>&#33;</div>
+																				 <div><p>&amp;#34;</p>&#34;</div>
+																				 <div><p>&amp;#35;</p>&#35;</div>
+																				 <div><p>&amp;#36;</p>&#36;</div>
+																				 <div><p>&amp;#37;</p>&#37;</div>
+																				 <div><p>&amp;#38;</p>&#38;</div>
+																				 <div><p>&amp;#39;</p>&#39;</div>
+																				 <div><p>&amp;#40;</p>&#40;</div>
+																				 <div><p>&amp;#41;</p>&#41;</div>
+																				 <div><p>&amp;#42;</p>&#42;</div>
+																				 <div><p>&amp;#43;</p>&#43;</div>
+																				 <div><p>&amp;#44;</p>&#44;</div>
+																				 <div><p>&amp;#45;</p>&#45;</div>
+																				 <div><p>&amp;#46;</p>&#46;</div>
+																				 <div><p>&amp;#47;</p>&#47;</div>
+																				 <div><p>&amp;#48;</p>&#48;</div>
+																				 <div><p>&amp;#49;</p>&#49;</div>
+																				 <div><p>&amp;#50;</p>&#50;</div>
+																				 <div><p>&amp;#51;</p>&#51;</div>
+																				 <div><p>&amp;#52;</p>&#52;</div>
+																				 <div><p>&amp;#53;</p>&#53;</div>
+																				 <div><p>&amp;#54;</p>&#54;</div>
+																				 <div><p>&amp;#55;</p>&#55;</div>
+																				 <div><p>&amp;#56;</p>&#56;</div>
+																				 <div><p>&amp;#57;</p>&#57;</div>
+																				 <div><p>&amp;#58;</p>&#58;</div>
+																				 <div><p>&amp;#59;</p>&#59;</div>
+																				 <div><p>&amp;#60;</p>&#60;</div>
+																				 <div><p>&amp;#61;</p>&#61;</div>
+																				 <div><p>&amp;#62;</p>&#62;</div>
+																				 <div><p>&amp;#63;</p>&#63;</div>
+																				 <div><p>&amp;#64;</p>&#64;</div>
+																				 <div><p>&amp;#65;</p>&#65;</div>
+																				 <div><p>&amp;#66;</p>&#66;</div>
+																				 <div><p>&amp;#67;</p>&#67;</div>
+																				 <div><p>&amp;#68;</p>&#68;</div>
+																				 <div><p>&amp;#69;</p>&#69;</div>
+																				 <div><p>&amp;#70;</p>&#70;</div>
+																				 <div><p>&amp;#71;</p>&#71;</div>
+																				 <div><p>&amp;#72;</p>&#72;</div>
+																				 <div><p>&amp;#73;</p>&#73;</div>
+																				 <div><p>&amp;#74;</p>&#74;</div>
+																				 <div><p>&amp;#75;</p>&#75;</div>
+																				 <div><p>&amp;#76;</p>&#76;</div>
+																				 <div><p>&amp;#77;</p>&#77;</div>
+																				 <div><p>&amp;#78;</p>&#78;</div>
+																				 <div><p>&amp;#79;</p>&#79;</div>
+																				 <div><p>&amp;#80;</p>&#80;</div>
+																				 <div><p>&amp;#81;</p>&#81;</div>
+																				 <div><p>&amp;#82;</p>&#82;</div>
+																				 <div><p>&amp;#83;</p>&#83;</div>
+																				 <div><p>&amp;#84;</p>&#84;</div>
+																				 <div><p>&amp;#85;</p>&#85;</div>
+																				 <div><p>&amp;#86;</p>&#86;</div>
+																				 <div><p>&amp;#87;</p>&#87;</div>
+																				 <div><p>&amp;#88;</p>&#88;</div>
+																				 <div><p>&amp;#89;</p>&#89;</div>
+																				 <div><p>&amp;#90;</p>&#90;</div>
+																				 <div><p>&amp;#91;</p>&#91;</div>
+																				 <div><p>&amp;#92;</p>&#92;</div>
+																				 <div><p>&amp;#93;</p>&#93;</div>
+																				 <div><p>&amp;#94;</p>&#94;</div>
+																				 <div><p>&amp;#95;</p>&#95;</div>
+																				 <div><p>&amp;#96;</p>&#96;</div>
+																				 <div><p>&amp;#97;</p>&#97;</div>
+																				 <div><p>&amp;#98;</p>&#98;</div>
+																				 <div><p>&amp;#99;</p>&#99;</div>
+																				 <div><p>&amp;#100;</p>&#100;</div>
+																				 <div><p>&amp;#101;</p>&#101;</div>
+																				 <div><p>&amp;#102;</p>&#102;</div>
+																				 <div><p>&amp;#103;</p>&#103;</div>
+																				 <div><p>&amp;#104;</p>&#104;</div>
+																				 <div><p>&amp;#105;</p>&#105;</div>
+																				 <div><p>&amp;#106;</p>&#106;</div>
+																				 <div><p>&amp;#107;</p>&#107;</div>
+																				 <div><p>&amp;#108;</p>&#108;</div>
+																				 <div><p>&amp;#109;</p>&#109;</div>
+																				 <div><p>&amp;#110;</p>&#110;</div>
+																				 <div><p>&amp;#111;</p>&#111;</div>
+																				 <div><p>&amp;#112;</p>&#112;</div>
+																				 <div><p>&amp;#113;</p>&#113;</div>
+																				 <div><p>&amp;#114;</p>&#114;</div>
+																				 <div><p>&amp;#115;</p>&#115;</div>
+																				 <div><p>&amp;#116;</p>&#116;</div>
+																				 <div><p>&amp;#117;</p>&#117;</div>
+																				 <div><p>&amp;#118;</p>&#118;</div>
+																				 <div><p>&amp;#119;</p>&#119;</div>
+																				 <div><p>&amp;#120;</p>&#120;</div>
+																				 <div><p>&amp;#121;</p>&#121;</div>
+																				 <div><p>&amp;#122;</p>&#122;</div>
+																				 <div><p>&amp;#123;</p>&#123;</div>
+																				 <div><p>&amp;#124;</p>&#124;</div>
+																				 <div><p>&amp;#125;</p>&#125;</div>
+																				 <div><p>&amp;#126;</p>&#126;</div>
+																				 <div><p>&amp;#160;</p>&#160;</div>
+																				 <div><p>&amp;#161;</p>&#161;</div>
+																				 <div><p>&amp;#162;</p>&#162;</div>
+																				 <div><p>&amp;#163;</p>&#163;</div>
+																				 <div><p>&amp;#164;</p>&#164;</div>
+																				 <div><p>&amp;#165;</p>&#165;</div>
+																				 <div><p>&amp;#166;</p>&#166;</div>
+																				 <div><p>&amp;#167;</p>&#167;</div>
+																				 <div><p>&amp;#168;</p>&#168;</div>
+																				 <div><p>&amp;#169;</p>&#169;</div>
+																				 <div><p>&amp;#170;</p>&#170;</div>
+																				 <div><p>&amp;#171;</p>&#171;</div>
+																				 <div><p>&amp;#172;</p>&#172;</div>
+																				 <div><p>&amp;#173;</p>&#173;</div>
+																				 <div><p>&amp;#174;</p>&#174;</div>
+																				 <div><p>&amp;#175;</p>&#175;</div>
+																				 <div><p>&amp;#176;</p>&#176;</div>
+																				 <div><p>&amp;#177;</p>&#177;</div>
+																				 <div><p>&amp;#178;</p>&#178;</div>
+																				 <div><p>&amp;#179;</p>&#179;</div>
+																				 <div><p>&amp;#180;</p>&#180;</div>
+																				 <div><p>&amp;#181;</p>&#181;</div>
+																				 <div><p>&amp;#182;</p>&#182;</div>
+																				 <div><p>&amp;#183;</p>&#183;</div>
+																				 <div><p>&amp;#184;</p>&#184;</div>
+																				 <div><p>&amp;#185;</p>&#185;</div>
+																				 <div><p>&amp;#186;</p>&#186;</div>
+																				 <div><p>&amp;#187;</p>&#187;</div>
+																				 <div><p>&amp;#188;</p>&#188;</div>
+																				 <div><p>&amp;#189;</p>&#189;</div>
+																				 <div><p>&amp;#190;</p>&#190;</div>
+																				 <div><p>&amp;#191;</p>&#191;</div>
+																				 <div><p>&amp;#192;</p>&#192;</div>
+																				 <div><p>&amp;#193;</p>&#193;</div>
+																				 <div><p>&amp;#194;</p>&#194;</div>
+																				 <div><p>&amp;#195;</p>&#195;</div>
+																				 <div><p>&amp;#196;</p>&#196;</div>
+																				 <div><p>&amp;#197;</p>&#197;</div>
+																				 <div><p>&amp;#198;</p>&#198;</div>
+																				 <div><p>&amp;#199;</p>&#199;</div>
+																				 <div><p>&amp;#200;</p>&#200;</div>
+																				 <div><p>&amp;#201;</p>&#201;</div>
+																				 <div><p>&amp;#202;</p>&#202;</div>
+																				 <div><p>&amp;#203;</p>&#203;</div>
+																				 <div><p>&amp;#204;</p>&#204;</div>
+																				 <div><p>&amp;#205;</p>&#205;</div>
+																				 <div><p>&amp;#206;</p>&#206;</div>
+																				 <div><p>&amp;#207;</p>&#207;</div>
+																				 <div><p>&amp;#208;</p>&#208;</div>
+																				 <div><p>&amp;#209;</p>&#209;</div>
+																				 <div><p>&amp;#210;</p>&#210;</div>
+																				 <div><p>&amp;#211;</p>&#211;</div>
+																				 <div><p>&amp;#212;</p>&#212;</div>
+																				 <div><p>&amp;#213;</p>&#213;</div>
+																				 <div><p>&amp;#214;</p>&#214;</div>
+																				 <div><p>&amp;#215;</p>&#215;</div>
+																				 <div><p>&amp;#216;</p>&#216;</div>
+																				 <div><p>&amp;#217;</p>&#217;</div>
+																				 <div><p>&amp;#218;</p>&#218;</div>
+																				 <div><p>&amp;#219;</p>&#219;</div>
+																				 <div><p>&amp;#220;</p>&#220;</div>
+																				 <div><p>&amp;#221;</p>&#221;</div>
+																				 <div><p>&amp;#222;</p>&#222;</div>
+																				 <div><p>&amp;#223;</p>&#223;</div>
+																				 <div><p>&amp;#224;</p>&#224;</div>
+																				 <div><p>&amp;#225;</p>&#225;</div>
+																				 <div><p>&amp;#226;</p>&#226;</div>
+																				 <div><p>&amp;#227;</p>&#227;</div>
+																				 <div><p>&amp;#228;</p>&#228;</div>
+																				 <div><p>&amp;#229;</p>&#229;</div>
+																				 <div><p>&amp;#230;</p>&#230;</div>
+																				 <div><p>&amp;#231;</p>&#231;</div>
+																				 <div><p>&amp;#232;</p>&#232;</div>
+																				 <div><p>&amp;#233;</p>&#233;</div>
+																				 <div><p>&amp;#234;</p>&#234;</div>
+																				 <div><p>&amp;#235;</p>&#235;</div>
+																				 <div><p>&amp;#236;</p>&#236;</div>
+																				 <div><p>&amp;#237;</p>&#237;</div>
+																				 <div><p>&amp;#238;</p>&#238;</div>
+																				 <div><p>&amp;#239;</p>&#239;</div>
+																				 <div><p>&amp;#240;</p>&#240;</div>
+																				 <div><p>&amp;#241;</p>&#241;</div>
+																				 <div><p>&amp;#242;</p>&#242;</div>
+																				 <div><p>&amp;#243;</p>&#243;</div>
+																				 <div><p>&amp;#244;</p>&#244;</div>
+																				 <div><p>&amp;#245;</p>&#245;</div>
+																				 <div><p>&amp;#246;</p>&#246;</div>
+																				 <div><p>&amp;#247;</p>&#247;</div>
+																				 <div><p>&amp;#248;</p>&#248;</div>
+																				 <div><p>&amp;#249;</p>&#249;</div>
+																				 <div><p>&amp;#250;</p>&#250;</div>
+																				 <div><p>&amp;#251;</p>&#251;</div>
+																				 <div><p>&amp;#252;</p>&#252;</div>
+																				 <div><p>&amp;#253;</p>&#253;</div>
+																				 <div><p>&amp;#254;</p>&#254;</div>
+																				 <div><p>&amp;#255;</p>&#255;</div>
+																				 <div><p>&amp;#338;</p>&#338;</div>
+																				 <div><p>&amp;#339;</p>&#339;</div>
+																				 <div><p>&amp;#376;</p>&#376;</div>
+																				 <div><p>&amp;#710;</p>&#710;</div>
+																				 <div><p>&amp;#732;</p>&#732;</div>
+																				 <div><p>&amp;#8192;</p>&#8192;</div>
+																				 <div><p>&amp;#8193;</p>&#8193;</div>
+																				 <div><p>&amp;#8194;</p>&#8194;</div>
+																				 <div><p>&amp;#8195;</p>&#8195;</div>
+																				 <div><p>&amp;#8196;</p>&#8196;</div>
+																				 <div><p>&amp;#8197;</p>&#8197;</div>
+																				 <div><p>&amp;#8198;</p>&#8198;</div>
+																				 <div><p>&amp;#8199;</p>&#8199;</div>
+																				 <div><p>&amp;#8200;</p>&#8200;</div>
+																				 <div><p>&amp;#8201;</p>&#8201;</div>
+																				 <div><p>&amp;#8202;</p>&#8202;</div>
+																				 <div><p>&amp;#8208;</p>&#8208;</div>
+																				 <div><p>&amp;#8209;</p>&#8209;</div>
+																				 <div><p>&amp;#8210;</p>&#8210;</div>
+																				 <div><p>&amp;#8211;</p>&#8211;</div>
+																				 <div><p>&amp;#8212;</p>&#8212;</div>
+																				 <div><p>&amp;#8216;</p>&#8216;</div>
+																				 <div><p>&amp;#8217;</p>&#8217;</div>
+																				 <div><p>&amp;#8218;</p>&#8218;</div>
+																				 <div><p>&amp;#8220;</p>&#8220;</div>
+																				 <div><p>&amp;#8221;</p>&#8221;</div>
+																				 <div><p>&amp;#8222;</p>&#8222;</div>
+																				 <div><p>&amp;#8226;</p>&#8226;</div>
+																				 <div><p>&amp;#8230;</p>&#8230;</div>
+																				 <div><p>&amp;#8239;</p>&#8239;</div>
+																				 <div><p>&amp;#8249;</p>&#8249;</div>
+																				 <div><p>&amp;#8250;</p>&#8250;</div>
+																				 <div><p>&amp;#8287;</p>&#8287;</div>
+																				 <div><p>&amp;#8364;</p>&#8364;</div>
+																				 <div><p>&amp;#8482;</p>&#8482;</div>
+																				 <div><p>&amp;#9724;</p>&#9724;</div>
+																				 <div><p>&amp;#64257;</p>&#64257;</div>
+																				 <div><p>&amp;#64258;</p>&#64258;</div>
+																																																</div>	
+				</div>
+		
+		
+			</div>
+		</div>
+		
+		
+		<div id="specs">
+			
+		</div>
+	
+		<div id="installing">
+			<div class="section">
+				<div class="grid7 firstcol">
+					<h1>Installing Webfonts</h1>
+					
+					<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+					
+					<h2>1. Upload your webfonts</h2>
+					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+					
+					<h2>2. Include the webfont stylesheet</h2>
+					<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+	<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+	<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+					<h2>3. Modify your own stylesheet</h2>
+					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+				</div>
+				
+				<div class="grid5 sidebar">
+					<div class="box">
+						<h2>Troubleshooting<br />Font-Face Problems</h2>
+						<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+						<h3>Fonts not showing in any browser</h3>
+
+						<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+						<h3>Fonts not loading in iPhone or iPad</h3>
+
+						<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+						<h3>Fonts not loading in Firefox</h3>
+
+						<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+						<h3>Fonts not loading in IE</h3>
+
+						<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+						<h3>Fonts not loading in IE9</h3>
+
+						<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+					</div>
+				</div>
+			</div>
+			
+		</div>
+	
+	</div>
+	<div id="footer">
+		<p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+	</div>
+</div>
+</body>
+</html>
@@ -0,0 +1,619 @@
+<!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: 'avenir_lt_65_mediumregular';
+							}
+		</style>
+
+	<title>Avenir LT 65 Medium Regular Specimen</title>
+	
+	
+	<script type="text/javascript" charset="utf-8">
+		$(document).ready(function() {
+			$('#container').easyTabs({defaultContent:1});
+		});
+	</script>
+</head>
+
+<body>
+<div id="container">
+	<div id="header">
+		Avenir LT 65 Medium Regular	</div>
+	<ul class="tabs">
+		<li><a href="#specimen">Specimen</a></li>
+		<li><a href="#layout">Sample Layout</a></li>
+				<li><a href="#glyphs">Glyphs &amp; Languages</a></li>
+		<li><a href="#installing">Installing Webfonts</a></li>
+		
+	</ul>
+	
+	<div id="main_content">
+
+		
+			<div id="specimen">
+		
+				<div class="section">
+					<div class="grid12 firstcol">
+						<div class="huge">AaBb</div>
+					</div>
+				</div>
+		
+				<div class="section">
+					<div class="glyph_range">A&#x200B;B&#x200b;C&#x200b;D&#x200b;E&#x200b;F&#x200b;G&#x200b;H&#x200b;I&#x200b;J&#x200b;K&#x200b;L&#x200b;M&#x200b;N&#x200b;O&#x200b;P&#x200b;Q&#x200b;R&#x200b;S&#x200b;T&#x200b;U&#x200b;V&#x200b;W&#x200b;X&#x200b;Y&#x200b;Z&#x200b;a&#x200b;b&#x200b;c&#x200b;d&#x200b;e&#x200b;f&#x200b;g&#x200b;h&#x200b;i&#x200b;j&#x200b;k&#x200b;l&#x200b;m&#x200b;n&#x200b;o&#x200b;p&#x200b;q&#x200b;r&#x200b;s&#x200b;t&#x200b;u&#x200b;v&#x200b;w&#x200b;x&#x200b;y&#x200b;z&#x200b;1&#x200b;2&#x200b;3&#x200b;4&#x200b;5&#x200b;6&#x200b;7&#x200b;8&#x200b;9&#x200b;0&#x200b;&amp;&#x200b;.&#x200b;,&#x200b;?&#x200b;!&#x200b;&#64;&#x200b;(&#x200b;)&#x200b;#&#x200b;$&#x200b;%&#x200b;*&#x200b;+&#x200b;-&#x200b;=&#x200b;:&#x200b;;</div>
+				</div>
+				<div class="section">
+					<div class="grid12 firstcol">
+						<table class="sample_table">
+							<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+							<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
+						</table>
+				
+					</div>
+			
+				</div>
+		
+		
+		
+								<div class="section" id="bodycomparison">
+
+
+										<div id="xheight">
+				<div class="fontbody">&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
+										<div class="fontbody" style="z-index:1">
+											body<span>Avenir LT 65 Medium Regular</span>
+										</div>
+										<div class="arialbody" style="z-index:1">
+											body<span>Arial</span>
+										</div>
+										<div class="verdanabody" style="z-index:1">
+											body<span>Verdana</span>
+										</div>
+										<div class="georgiabody" style="z-index:1">
+											body<span>Georgia</span>
+										</div>
+
+
+
+								</div>
+		
+		
+				<div class="section psample psample_row1" id="">
+					
+					<div class="grid2 firstcol">
+						<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid3">
+						<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid3">
+						<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid4">
+						<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="white_blend"></div>
+					
+				</div>
+				<div class="section psample psample_row2" id="">
+					<div class="grid3 firstcol">
+						<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid4">
+						<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid5">
+						<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+
+					<div class="white_blend"></div>
+
+				</div>
+				
+				<div class="section psample psample_row3" id="">
+					<div class="grid5 firstcol">
+						<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					<div class="grid7">
+						<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					
+					<div class="white_blend"></div>
+					
+				</div>
+				
+				<div class="section psample psample_row4" id="">
+					<div class="grid12 firstcol">
+						<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					<div class="white_blend"></div>
+					
+				</div>
+				
+				
+				
+				<div class="section psample psample_row1 fullreverse">
+					<div class="grid2 firstcol">
+						<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid3">
+						<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid3">
+						<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid4">
+						<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="black_blend"></div>
+					
+				</div>
+				
+				<div class="section psample psample_row2 fullreverse">
+					<div class="grid3 firstcol">
+						<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid4">
+						<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="grid5">
+						<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+			
+					</div>
+					<div class="black_blend"></div>
+
+				</div>
+				
+				<div class="section psample fullreverse psample_row3" id="">
+					<div class="grid5 firstcol">
+						<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					<div class="grid7">
+						<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					
+					<div class="black_blend"></div>
+					
+				</div>
+				
+				<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+					<div class="grid12 firstcol">
+						<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+					</div>
+					<div class="black_blend"></div>
+					
+				</div>
+				
+				
+				
+				
+			</div>
+			
+			<div id="layout">
+				
+				<div class="section">
+					
+					<div class="grid12 firstcol">
+						<h1>Lorem Ipsum Dolor</h1>
+						<h2>Etiam porta sem malesuada magna mollis euismod</h2>
+						
+						<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+					</div>
+				</div>
+				<div class="section">
+					<div class="grid8 firstcol">
+						<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+						
+						<h3>Pellentesque ornare sem</h3>
+
+						<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+						<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+						<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+						<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+						<h3>Cras mattis consectetur</h3>
+
+						<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+						<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+					</div>
+					
+					<div class="grid4 sidebar">
+						
+						<div class="box reverse">
+							<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+						</div>
+						
+						<p class="caption">Maecenas sed diam eget risus varius.</p>
+
+						<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+					
+
+						<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+						<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+					</div>
+				</div>
+				
+			</div>
+
+
+			
+
+
+
+		<div id="glyphs">
+			<div class="section">
+				<div class="grid12 firstcol">
+			
+				<h1>Language Support</h1>
+				<p>The subset of Avenir LT 65 Medium Regular in this kit supports the following languages:<br />
+			
+					Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo				</p>
+				<h1>Glyph Chart</h1>
+				<p>The subset of Avenir LT 65 Medium Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+				<div id="glyph_chart">
+			
+																				 <div><p>&amp;#32;</p>&#32;</div>
+																				 <div><p>&amp;#33;</p>&#33;</div>
+																				 <div><p>&amp;#34;</p>&#34;</div>
+																				 <div><p>&amp;#35;</p>&#35;</div>
+																				 <div><p>&amp;#36;</p>&#36;</div>
+																				 <div><p>&amp;#37;</p>&#37;</div>
+																				 <div><p>&amp;#38;</p>&#38;</div>
+																				 <div><p>&amp;#39;</p>&#39;</div>
+																				 <div><p>&amp;#40;</p>&#40;</div>
+																				 <div><p>&amp;#41;</p>&#41;</div>
+																				 <div><p>&amp;#42;</p>&#42;</div>
+																				 <div><p>&amp;#43;</p>&#43;</div>
+																				 <div><p>&amp;#44;</p>&#44;</div>
+																				 <div><p>&amp;#45;</p>&#45;</div>
+																				 <div><p>&amp;#46;</p>&#46;</div>
+																				 <div><p>&amp;#47;</p>&#47;</div>
+																				 <div><p>&amp;#48;</p>&#48;</div>
+																				 <div><p>&amp;#49;</p>&#49;</div>
+																				 <div><p>&amp;#50;</p>&#50;</div>
+																				 <div><p>&amp;#51;</p>&#51;</div>
+																				 <div><p>&amp;#52;</p>&#52;</div>
+																				 <div><p>&amp;#53;</p>&#53;</div>
+																				 <div><p>&amp;#54;</p>&#54;</div>
+																				 <div><p>&amp;#55;</p>&#55;</div>
+																				 <div><p>&amp;#56;</p>&#56;</div>
+																				 <div><p>&amp;#57;</p>&#57;</div>
+																				 <div><p>&amp;#58;</p>&#58;</div>
+																				 <div><p>&amp;#59;</p>&#59;</div>
+																				 <div><p>&amp;#60;</p>&#60;</div>
+																				 <div><p>&amp;#61;</p>&#61;</div>
+																				 <div><p>&amp;#62;</p>&#62;</div>
+																				 <div><p>&amp;#63;</p>&#63;</div>
+																				 <div><p>&amp;#64;</p>&#64;</div>
+																				 <div><p>&amp;#65;</p>&#65;</div>
+																				 <div><p>&amp;#66;</p>&#66;</div>
+																				 <div><p>&amp;#67;</p>&#67;</div>
+																				 <div><p>&amp;#68;</p>&#68;</div>
+																				 <div><p>&amp;#69;</p>&#69;</div>
+																				 <div><p>&amp;#70;</p>&#70;</div>
+																				 <div><p>&amp;#71;</p>&#71;</div>
+																				 <div><p>&amp;#72;</p>&#72;</div>
+																				 <div><p>&amp;#73;</p>&#73;</div>
+																				 <div><p>&amp;#74;</p>&#74;</div>
+																				 <div><p>&amp;#75;</p>&#75;</div>
+																				 <div><p>&amp;#76;</p>&#76;</div>
+																				 <div><p>&amp;#77;</p>&#77;</div>
+																				 <div><p>&amp;#78;</p>&#78;</div>
+																				 <div><p>&amp;#79;</p>&#79;</div>
+																				 <div><p>&amp;#80;</p>&#80;</div>
+																				 <div><p>&amp;#81;</p>&#81;</div>
+																				 <div><p>&amp;#82;</p>&#82;</div>
+																				 <div><p>&amp;#83;</p>&#83;</div>
+																				 <div><p>&amp;#84;</p>&#84;</div>
+																				 <div><p>&amp;#85;</p>&#85;</div>
+																				 <div><p>&amp;#86;</p>&#86;</div>
+																				 <div><p>&amp;#87;</p>&#87;</div>
+																				 <div><p>&amp;#88;</p>&#88;</div>
+																				 <div><p>&amp;#89;</p>&#89;</div>
+																				 <div><p>&amp;#90;</p>&#90;</div>
+																				 <div><p>&amp;#91;</p>&#91;</div>
+																				 <div><p>&amp;#92;</p>&#92;</div>
+																				 <div><p>&amp;#93;</p>&#93;</div>
+																				 <div><p>&amp;#94;</p>&#94;</div>
+																				 <div><p>&amp;#95;</p>&#95;</div>
+																				 <div><p>&amp;#96;</p>&#96;</div>
+																				 <div><p>&amp;#97;</p>&#97;</div>
+																				 <div><p>&amp;#98;</p>&#98;</div>
+																				 <div><p>&amp;#99;</p>&#99;</div>
+																				 <div><p>&amp;#100;</p>&#100;</div>
+																				 <div><p>&amp;#101;</p>&#101;</div>
+																				 <div><p>&amp;#102;</p>&#102;</div>
+																				 <div><p>&amp;#103;</p>&#103;</div>
+																				 <div><p>&amp;#104;</p>&#104;</div>
+																				 <div><p>&amp;#105;</p>&#105;</div>
+																				 <div><p>&amp;#106;</p>&#106;</div>
+																				 <div><p>&amp;#107;</p>&#107;</div>
+																				 <div><p>&amp;#108;</p>&#108;</div>
+																				 <div><p>&amp;#109;</p>&#109;</div>
+																				 <div><p>&amp;#110;</p>&#110;</div>
+																				 <div><p>&amp;#111;</p>&#111;</div>
+																				 <div><p>&amp;#112;</p>&#112;</div>
+																				 <div><p>&amp;#113;</p>&#113;</div>
+																				 <div><p>&amp;#114;</p>&#114;</div>
+																				 <div><p>&amp;#115;</p>&#115;</div>
+																				 <div><p>&amp;#116;</p>&#116;</div>
+																				 <div><p>&amp;#117;</p>&#117;</div>
+																				 <div><p>&amp;#118;</p>&#118;</div>
+																				 <div><p>&amp;#119;</p>&#119;</div>
+																				 <div><p>&amp;#120;</p>&#120;</div>
+																				 <div><p>&amp;#121;</p>&#121;</div>
+																				 <div><p>&amp;#122;</p>&#122;</div>
+																				 <div><p>&amp;#123;</p>&#123;</div>
+																				 <div><p>&amp;#124;</p>&#124;</div>
+																				 <div><p>&amp;#125;</p>&#125;</div>
+																				 <div><p>&amp;#126;</p>&#126;</div>
+																				 <div><p>&amp;#160;</p>&#160;</div>
+																				 <div><p>&amp;#161;</p>&#161;</div>
+																				 <div><p>&amp;#162;</p>&#162;</div>
+																				 <div><p>&amp;#163;</p>&#163;</div>
+																				 <div><p>&amp;#164;</p>&#164;</div>
+																				 <div><p>&amp;#165;</p>&#165;</div>
+																				 <div><p>&amp;#166;</p>&#166;</div>
+																				 <div><p>&amp;#167;</p>&#167;</div>
+																				 <div><p>&amp;#168;</p>&#168;</div>
+																				 <div><p>&amp;#169;</p>&#169;</div>
+																				 <div><p>&amp;#170;</p>&#170;</div>
+																				 <div><p>&amp;#171;</p>&#171;</div>
+																				 <div><p>&amp;#172;</p>&#172;</div>
+																				 <div><p>&amp;#173;</p>&#173;</div>
+																				 <div><p>&amp;#174;</p>&#174;</div>
+																				 <div><p>&amp;#175;</p>&#175;</div>
+																				 <div><p>&amp;#176;</p>&#176;</div>
+																				 <div><p>&amp;#177;</p>&#177;</div>
+																				 <div><p>&amp;#178;</p>&#178;</div>
+																				 <div><p>&amp;#179;</p>&#179;</div>
+																				 <div><p>&amp;#180;</p>&#180;</div>
+																				 <div><p>&amp;#181;</p>&#181;</div>
+																				 <div><p>&amp;#182;</p>&#182;</div>
+																				 <div><p>&amp;#183;</p>&#183;</div>
+																				 <div><p>&amp;#184;</p>&#184;</div>
+																				 <div><p>&amp;#185;</p>&#185;</div>
+																				 <div><p>&amp;#186;</p>&#186;</div>
+																				 <div><p>&amp;#187;</p>&#187;</div>
+																				 <div><p>&amp;#188;</p>&#188;</div>
+																				 <div><p>&amp;#189;</p>&#189;</div>
+																				 <div><p>&amp;#190;</p>&#190;</div>
+																				 <div><p>&amp;#191;</p>&#191;</div>
+																				 <div><p>&amp;#192;</p>&#192;</div>
+																				 <div><p>&amp;#193;</p>&#193;</div>
+																				 <div><p>&amp;#194;</p>&#194;</div>
+																				 <div><p>&amp;#195;</p>&#195;</div>
+																				 <div><p>&amp;#196;</p>&#196;</div>
+																				 <div><p>&amp;#197;</p>&#197;</div>
+																				 <div><p>&amp;#198;</p>&#198;</div>
+																				 <div><p>&amp;#199;</p>&#199;</div>
+																				 <div><p>&amp;#200;</p>&#200;</div>
+																				 <div><p>&amp;#201;</p>&#201;</div>
+																				 <div><p>&amp;#202;</p>&#202;</div>
+																				 <div><p>&amp;#203;</p>&#203;</div>
+																				 <div><p>&amp;#204;</p>&#204;</div>
+																				 <div><p>&amp;#205;</p>&#205;</div>
+																				 <div><p>&amp;#206;</p>&#206;</div>
+																				 <div><p>&amp;#207;</p>&#207;</div>
+																				 <div><p>&amp;#208;</p>&#208;</div>
+																				 <div><p>&amp;#209;</p>&#209;</div>
+																				 <div><p>&amp;#210;</p>&#210;</div>
+																				 <div><p>&amp;#211;</p>&#211;</div>
+																				 <div><p>&amp;#212;</p>&#212;</div>
+																				 <div><p>&amp;#213;</p>&#213;</div>
+																				 <div><p>&amp;#214;</p>&#214;</div>
+																				 <div><p>&amp;#215;</p>&#215;</div>
+																				 <div><p>&amp;#216;</p>&#216;</div>
+																				 <div><p>&amp;#217;</p>&#217;</div>
+																				 <div><p>&amp;#218;</p>&#218;</div>
+																				 <div><p>&amp;#219;</p>&#219;</div>
+																				 <div><p>&amp;#220;</p>&#220;</div>
+																				 <div><p>&amp;#221;</p>&#221;</div>
+																				 <div><p>&amp;#222;</p>&#222;</div>
+																				 <div><p>&amp;#223;</p>&#223;</div>
+																				 <div><p>&amp;#224;</p>&#224;</div>
+																				 <div><p>&amp;#225;</p>&#225;</div>
+																				 <div><p>&amp;#226;</p>&#226;</div>
+																				 <div><p>&amp;#227;</p>&#227;</div>
+																				 <div><p>&amp;#228;</p>&#228;</div>
+																				 <div><p>&amp;#229;</p>&#229;</div>
+																				 <div><p>&amp;#230;</p>&#230;</div>
+																				 <div><p>&amp;#231;</p>&#231;</div>
+																				 <div><p>&amp;#232;</p>&#232;</div>
+																				 <div><p>&amp;#233;</p>&#233;</div>
+																				 <div><p>&amp;#234;</p>&#234;</div>
+																				 <div><p>&amp;#235;</p>&#235;</div>
+																				 <div><p>&amp;#236;</p>&#236;</div>
+																				 <div><p>&amp;#237;</p>&#237;</div>
+																				 <div><p>&amp;#238;</p>&#238;</div>
+																				 <div><p>&amp;#239;</p>&#239;</div>
+																				 <div><p>&amp;#240;</p>&#240;</div>
+																				 <div><p>&amp;#241;</p>&#241;</div>
+																				 <div><p>&amp;#242;</p>&#242;</div>
+																				 <div><p>&amp;#243;</p>&#243;</div>
+																				 <div><p>&amp;#244;</p>&#244;</div>
+																				 <div><p>&amp;#245;</p>&#245;</div>
+																				 <div><p>&amp;#246;</p>&#246;</div>
+																				 <div><p>&amp;#247;</p>&#247;</div>
+																				 <div><p>&amp;#248;</p>&#248;</div>
+																				 <div><p>&amp;#249;</p>&#249;</div>
+																				 <div><p>&amp;#250;</p>&#250;</div>
+																				 <div><p>&amp;#251;</p>&#251;</div>
+																				 <div><p>&amp;#252;</p>&#252;</div>
+																				 <div><p>&amp;#253;</p>&#253;</div>
+																				 <div><p>&amp;#254;</p>&#254;</div>
+																				 <div><p>&amp;#255;</p>&#255;</div>
+																				 <div><p>&amp;#338;</p>&#338;</div>
+																				 <div><p>&amp;#339;</p>&#339;</div>
+																				 <div><p>&amp;#376;</p>&#376;</div>
+																				 <div><p>&amp;#710;</p>&#710;</div>
+																				 <div><p>&amp;#732;</p>&#732;</div>
+																				 <div><p>&amp;#8192;</p>&#8192;</div>
+																				 <div><p>&amp;#8193;</p>&#8193;</div>
+																				 <div><p>&amp;#8194;</p>&#8194;</div>
+																				 <div><p>&amp;#8195;</p>&#8195;</div>
+																				 <div><p>&amp;#8196;</p>&#8196;</div>
+																				 <div><p>&amp;#8197;</p>&#8197;</div>
+																				 <div><p>&amp;#8198;</p>&#8198;</div>
+																				 <div><p>&amp;#8199;</p>&#8199;</div>
+																				 <div><p>&amp;#8200;</p>&#8200;</div>
+																				 <div><p>&amp;#8201;</p>&#8201;</div>
+																				 <div><p>&amp;#8202;</p>&#8202;</div>
+																				 <div><p>&amp;#8208;</p>&#8208;</div>
+																				 <div><p>&amp;#8209;</p>&#8209;</div>
+																				 <div><p>&amp;#8210;</p>&#8210;</div>
+																				 <div><p>&amp;#8211;</p>&#8211;</div>
+																				 <div><p>&amp;#8212;</p>&#8212;</div>
+																				 <div><p>&amp;#8216;</p>&#8216;</div>
+																				 <div><p>&amp;#8217;</p>&#8217;</div>
+																				 <div><p>&amp;#8218;</p>&#8218;</div>
+																				 <div><p>&amp;#8220;</p>&#8220;</div>
+																				 <div><p>&amp;#8221;</p>&#8221;</div>
+																				 <div><p>&amp;#8222;</p>&#8222;</div>
+																				 <div><p>&amp;#8226;</p>&#8226;</div>
+																				 <div><p>&amp;#8230;</p>&#8230;</div>
+																				 <div><p>&amp;#8239;</p>&#8239;</div>
+																				 <div><p>&amp;#8249;</p>&#8249;</div>
+																				 <div><p>&amp;#8250;</p>&#8250;</div>
+																				 <div><p>&amp;#8287;</p>&#8287;</div>
+																				 <div><p>&amp;#8364;</p>&#8364;</div>
+																				 <div><p>&amp;#8482;</p>&#8482;</div>
+																				 <div><p>&amp;#9724;</p>&#9724;</div>
+																				 <div><p>&amp;#64257;</p>&#64257;</div>
+																				 <div><p>&amp;#64258;</p>&#64258;</div>
+																																																</div>	
+				</div>
+		
+		
+			</div>
+		</div>
+		
+		
+		<div id="specs">
+			
+		</div>
+	
+		<div id="installing">
+			<div class="section">
+				<div class="grid7 firstcol">
+					<h1>Installing Webfonts</h1>
+					
+					<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+					
+					<h2>1. Upload your webfonts</h2>
+					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+					
+					<h2>2. Include the webfont stylesheet</h2>
+					<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+	<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+	<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+					<h2>3. Modify your own stylesheet</h2>
+					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+				</div>
+				
+				<div class="grid5 sidebar">
+					<div class="box">
+						<h2>Troubleshooting<br />Font-Face Problems</h2>
+						<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+						<h3>Fonts not showing in any browser</h3>
+
+						<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+						<h3>Fonts not loading in iPhone or iPad</h3>
+
+						<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+						<h3>Fonts not loading in Firefox</h3>
+
+						<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+						<h3>Fonts not loading in IE</h3>
+
+						<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+						<h3>Fonts not loading in IE9</h3>
+
+						<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+					</div>
+				</div>
+			</div>
+			
+		</div>
+	
+	</div>
+	<div id="footer">
+		<p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+	</div>
+</div>
+</body>
+</html>
@@ -0,0 +1,619 @@
+<!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: 'avenir_lt_65_mediumitalic';
+							}
+		</style>
+
+	<title>Avenir LT 65 Medium Italic 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">
+		Avenir LT 65 Medium Italic	</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>Avenir LT 65 Medium Italic</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 Avenir LT 65 Medium Italic 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 Avenir LT 65 Medium Italic in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+				<div id="glyph_chart">
+			
+																				 <div><p>&amp;#32;</p>&#32;</div>
+																				 <div><p>&amp;#33;</p>&#33;</div>
+																				 <div><p>&amp;#34;</p>&#34;</div>
+																				 <div><p>&amp;#35;</p>&#35;</div>
+																				 <div><p>&amp;#36;</p>&#36;</div>
+																				 <div><p>&amp;#37;</p>&#37;</div>
+																				 <div><p>&amp;#38;</p>&#38;</div>
+																				 <div><p>&amp;#39;</p>&#39;</div>
+																				 <div><p>&amp;#40;</p>&#40;</div>
+																				 <div><p>&amp;#41;</p>&#41;</div>
+																				 <div><p>&amp;#42;</p>&#42;</div>
+																				 <div><p>&amp;#43;</p>&#43;</div>
+																				 <div><p>&amp;#44;</p>&#44;</div>
+																				 <div><p>&amp;#45;</p>&#45;</div>
+																				 <div><p>&amp;#46;</p>&#46;</div>
+																				 <div><p>&amp;#47;</p>&#47;</div>
+																				 <div><p>&amp;#48;</p>&#48;</div>
+																				 <div><p>&amp;#49;</p>&#49;</div>
+																				 <div><p>&amp;#50;</p>&#50;</div>
+																				 <div><p>&amp;#51;</p>&#51;</div>
+																				 <div><p>&amp;#52;</p>&#52;</div>
+																				 <div><p>&amp;#53;</p>&#53;</div>
+																				 <div><p>&amp;#54;</p>&#54;</div>
+																				 <div><p>&amp;#55;</p>&#55;</div>
+																				 <div><p>&amp;#56;</p>&#56;</div>
+																				 <div><p>&amp;#57;</p>&#57;</div>
+																				 <div><p>&amp;#58;</p>&#58;</div>
+																				 <div><p>&amp;#59;</p>&#59;</div>
+																				 <div><p>&amp;#60;</p>&#60;</div>
+																				 <div><p>&amp;#61;</p>&#61;</div>
+																				 <div><p>&amp;#62;</p>&#62;</div>
+																				 <div><p>&amp;#63;</p>&#63;</div>
+																				 <div><p>&amp;#64;</p>&#64;</div>
+																				 <div><p>&amp;#65;</p>&#65;</div>
+																				 <div><p>&amp;#66;</p>&#66;</div>
+																				 <div><p>&amp;#67;</p>&#67;</div>
+																				 <div><p>&amp;#68;</p>&#68;</div>
+																				 <div><p>&amp;#69;</p>&#69;</div>
+																				 <div><p>&amp;#70;</p>&#70;</div>
+																				 <div><p>&amp;#71;</p>&#71;</div>
+																				 <div><p>&amp;#72;</p>&#72;</div>
+																				 <div><p>&amp;#73;</p>&#73;</div>
+																				 <div><p>&amp;#74;</p>&#74;</div>
+																				 <div><p>&amp;#75;</p>&#75;</div>
+																				 <div><p>&amp;#76;</p>&#76;</div>
+																				 <div><p>&amp;#77;</p>&#77;</div>
+																				 <div><p>&amp;#78;</p>&#78;</div>
+																				 <div><p>&amp;#79;</p>&#79;</div>
+																				 <div><p>&amp;#80;</p>&#80;</div>
+																				 <div><p>&amp;#81;</p>&#81;</div>
+																				 <div><p>&amp;#82;</p>&#82;</div>
+																				 <div><p>&amp;#83;</p>&#83;</div>
+																				 <div><p>&amp;#84;</p>&#84;</div>
+																				 <div><p>&amp;#85;</p>&#85;</div>
+																				 <div><p>&amp;#86;</p>&#86;</div>
+																				 <div><p>&amp;#87;</p>&#87;</div>
+																				 <div><p>&amp;#88;</p>&#88;</div>
+																				 <div><p>&amp;#89;</p>&#89;</div>
+																				 <div><p>&amp;#90;</p>&#90;</div>
+																				 <div><p>&amp;#91;</p>&#91;</div>
+																				 <div><p>&amp;#92;</p>&#92;</div>
+																				 <div><p>&amp;#93;</p>&#93;</div>
+																				 <div><p>&amp;#94;</p>&#94;</div>
+																				 <div><p>&amp;#95;</p>&#95;</div>
+																				 <div><p>&amp;#96;</p>&#96;</div>
+																				 <div><p>&amp;#97;</p>&#97;</div>
+																				 <div><p>&amp;#98;</p>&#98;</div>
+																				 <div><p>&amp;#99;</p>&#99;</div>
+																				 <div><p>&amp;#100;</p>&#100;</div>
+																				 <div><p>&amp;#101;</p>&#101;</div>
+																				 <div><p>&amp;#102;</p>&#102;</div>
+																				 <div><p>&amp;#103;</p>&#103;</div>
+																				 <div><p>&amp;#104;</p>&#104;</div>
+																				 <div><p>&amp;#105;</p>&#105;</div>
+																				 <div><p>&amp;#106;</p>&#106;</div>
+																				 <div><p>&amp;#107;</p>&#107;</div>
+																				 <div><p>&amp;#108;</p>&#108;</div>
+																				 <div><p>&amp;#109;</p>&#109;</div>
+																				 <div><p>&amp;#110;</p>&#110;</div>
+																				 <div><p>&amp;#111;</p>&#111;</div>
+																				 <div><p>&amp;#112;</p>&#112;</div>
+																				 <div><p>&amp;#113;</p>&#113;</div>
+																				 <div><p>&amp;#114;</p>&#114;</div>
+																				 <div><p>&amp;#115;</p>&#115;</div>
+																				 <div><p>&amp;#116;</p>&#116;</div>
+																				 <div><p>&amp;#117;</p>&#117;</div>
+																				 <div><p>&amp;#118;</p>&#118;</div>
+																				 <div><p>&amp;#119;</p>&#119;</div>
+																				 <div><p>&amp;#120;</p>&#120;</div>
+																				 <div><p>&amp;#121;</p>&#121;</div>
+																				 <div><p>&amp;#122;</p>&#122;</div>
+																				 <div><p>&amp;#123;</p>&#123;</div>
+																				 <div><p>&amp;#124;</p>&#124;</div>
+																				 <div><p>&amp;#125;</p>&#125;</div>
+																				 <div><p>&amp;#126;</p>&#126;</div>
+																				 <div><p>&amp;#160;</p>&#160;</div>
+																				 <div><p>&amp;#161;</p>&#161;</div>
+																				 <div><p>&amp;#162;</p>&#162;</div>
+																				 <div><p>&amp;#163;</p>&#163;</div>
+																				 <div><p>&amp;#164;</p>&#164;</div>
+																				 <div><p>&amp;#165;</p>&#165;</div>
+																				 <div><p>&amp;#166;</p>&#166;</div>
+																				 <div><p>&amp;#167;</p>&#167;</div>
+																				 <div><p>&amp;#168;</p>&#168;</div>
+																				 <div><p>&amp;#169;</p>&#169;</div>
+																				 <div><p>&amp;#170;</p>&#170;</div>
+																				 <div><p>&amp;#171;</p>&#171;</div>
+																				 <div><p>&amp;#172;</p>&#172;</div>
+																				 <div><p>&amp;#173;</p>&#173;</div>
+																				 <div><p>&amp;#174;</p>&#174;</div>
+																				 <div><p>&amp;#175;</p>&#175;</div>
+																				 <div><p>&amp;#176;</p>&#176;</div>
+																				 <div><p>&amp;#177;</p>&#177;</div>
+																				 <div><p>&amp;#178;</p>&#178;</div>
+																				 <div><p>&amp;#179;</p>&#179;</div>
+																				 <div><p>&amp;#180;</p>&#180;</div>
+																				 <div><p>&amp;#181;</p>&#181;</div>
+																				 <div><p>&amp;#182;</p>&#182;</div>
+																				 <div><p>&amp;#183;</p>&#183;</div>
+																				 <div><p>&amp;#184;</p>&#184;</div>
+																				 <div><p>&amp;#185;</p>&#185;</div>
+																				 <div><p>&amp;#186;</p>&#186;</div>
+																				 <div><p>&amp;#187;</p>&#187;</div>
+																				 <div><p>&amp;#188;</p>&#188;</div>
+																				 <div><p>&amp;#189;</p>&#189;</div>
+																				 <div><p>&amp;#190;</p>&#190;</div>
+																				 <div><p>&amp;#191;</p>&#191;</div>
+																				 <div><p>&amp;#192;</p>&#192;</div>
+																				 <div><p>&amp;#193;</p>&#193;</div>
+																				 <div><p>&amp;#194;</p>&#194;</div>
+																				 <div><p>&amp;#195;</p>&#195;</div>
+																				 <div><p>&amp;#196;</p>&#196;</div>
+																				 <div><p>&amp;#197;</p>&#197;</div>
+																				 <div><p>&amp;#198;</p>&#198;</div>
+																				 <div><p>&amp;#199;</p>&#199;</div>
+																				 <div><p>&amp;#200;</p>&#200;</div>
+																				 <div><p>&amp;#201;</p>&#201;</div>
+																				 <div><p>&amp;#202;</p>&#202;</div>
+																				 <div><p>&amp;#203;</p>&#203;</div>
+																				 <div><p>&amp;#204;</p>&#204;</div>
+																				 <div><p>&amp;#205;</p>&#205;</div>
+																				 <div><p>&amp;#206;</p>&#206;</div>
+																				 <div><p>&amp;#207;</p>&#207;</div>
+																				 <div><p>&amp;#208;</p>&#208;</div>
+																				 <div><p>&amp;#209;</p>&#209;</div>
+																				 <div><p>&amp;#210;</p>&#210;</div>
+																				 <div><p>&amp;#211;</p>&#211;</div>
+																				 <div><p>&amp;#212;</p>&#212;</div>
+																				 <div><p>&amp;#213;</p>&#213;</div>
+																				 <div><p>&amp;#214;</p>&#214;</div>
+																				 <div><p>&amp;#215;</p>&#215;</div>
+																				 <div><p>&amp;#216;</p>&#216;</div>
+																				 <div><p>&amp;#217;</p>&#217;</div>
+																				 <div><p>&amp;#218;</p>&#218;</div>
+																				 <div><p>&amp;#219;</p>&#219;</div>
+																				 <div><p>&amp;#220;</p>&#220;</div>
+																				 <div><p>&amp;#221;</p>&#221;</div>
+																				 <div><p>&amp;#222;</p>&#222;</div>
+																				 <div><p>&amp;#223;</p>&#223;</div>
+																				 <div><p>&amp;#224;</p>&#224;</div>
+																				 <div><p>&amp;#225;</p>&#225;</div>
+																				 <div><p>&amp;#226;</p>&#226;</div>
+																				 <div><p>&amp;#227;</p>&#227;</div>
+																				 <div><p>&amp;#228;</p>&#228;</div>
+																				 <div><p>&amp;#229;</p>&#229;</div>
+																				 <div><p>&amp;#230;</p>&#230;</div>
+																				 <div><p>&amp;#231;</p>&#231;</div>
+																				 <div><p>&amp;#232;</p>&#232;</div>
+																				 <div><p>&amp;#233;</p>&#233;</div>
+																				 <div><p>&amp;#234;</p>&#234;</div>
+																				 <div><p>&amp;#235;</p>&#235;</div>
+																				 <div><p>&amp;#236;</p>&#236;</div>
+																				 <div><p>&amp;#237;</p>&#237;</div>
+																				 <div><p>&amp;#238;</p>&#238;</div>
+																				 <div><p>&amp;#239;</p>&#239;</div>
+																				 <div><p>&amp;#240;</p>&#240;</div>
+																				 <div><p>&amp;#241;</p>&#241;</div>
+																				 <div><p>&amp;#242;</p>&#242;</div>
+																				 <div><p>&amp;#243;</p>&#243;</div>
+																				 <div><p>&amp;#244;</p>&#244;</div>
+																				 <div><p>&amp;#245;</p>&#245;</div>
+																				 <div><p>&amp;#246;</p>&#246;</div>
+																				 <div><p>&amp;#247;</p>&#247;</div>
+																				 <div><p>&amp;#248;</p>&#248;</div>
+																				 <div><p>&amp;#249;</p>&#249;</div>
+																				 <div><p>&amp;#250;</p>&#250;</div>
+																				 <div><p>&amp;#251;</p>&#251;</div>
+																				 <div><p>&amp;#252;</p>&#252;</div>
+																				 <div><p>&amp;#253;</p>&#253;</div>
+																				 <div><p>&amp;#254;</p>&#254;</div>
+																				 <div><p>&amp;#255;</p>&#255;</div>
+																				 <div><p>&amp;#338;</p>&#338;</div>
+																				 <div><p>&amp;#339;</p>&#339;</div>
+																				 <div><p>&amp;#376;</p>&#376;</div>
+																				 <div><p>&amp;#710;</p>&#710;</div>
+																				 <div><p>&amp;#732;</p>&#732;</div>
+																				 <div><p>&amp;#8192;</p>&#8192;</div>
+																				 <div><p>&amp;#8193;</p>&#8193;</div>
+																				 <div><p>&amp;#8194;</p>&#8194;</div>
+																				 <div><p>&amp;#8195;</p>&#8195;</div>
+																				 <div><p>&amp;#8196;</p>&#8196;</div>
+																				 <div><p>&amp;#8197;</p>&#8197;</div>
+																				 <div><p>&amp;#8198;</p>&#8198;</div>
+																				 <div><p>&amp;#8199;</p>&#8199;</div>
+																				 <div><p>&amp;#8200;</p>&#8200;</div>
+																				 <div><p>&amp;#8201;</p>&#8201;</div>
+																				 <div><p>&amp;#8202;</p>&#8202;</div>
+																				 <div><p>&amp;#8208;</p>&#8208;</div>
+																				 <div><p>&amp;#8209;</p>&#8209;</div>
+																				 <div><p>&amp;#8210;</p>&#8210;</div>
+																				 <div><p>&amp;#8211;</p>&#8211;</div>
+																				 <div><p>&amp;#8212;</p>&#8212;</div>
+																				 <div><p>&amp;#8216;</p>&#8216;</div>
+																				 <div><p>&amp;#8217;</p>&#8217;</div>
+																				 <div><p>&amp;#8218;</p>&#8218;</div>
+																				 <div><p>&amp;#8220;</p>&#8220;</div>
+																				 <div><p>&amp;#8221;</p>&#8221;</div>
+																				 <div><p>&amp;#8222;</p>&#8222;</div>
+																				 <div><p>&amp;#8226;</p>&#8226;</div>
+																				 <div><p>&amp;#8230;</p>&#8230;</div>
+																				 <div><p>&amp;#8239;</p>&#8239;</div>
+																				 <div><p>&amp;#8249;</p>&#8249;</div>
+																				 <div><p>&amp;#8250;</p>&#8250;</div>
+																				 <div><p>&amp;#8287;</p>&#8287;</div>
+																				 <div><p>&amp;#8364;</p>&#8364;</div>
+																				 <div><p>&amp;#8482;</p>&#8482;</div>
+																				 <div><p>&amp;#9724;</p>&#9724;</div>
+																				 <div><p>&amp;#64257;</p>&#64257;</div>
+																				 <div><p>&amp;#64258;</p>&#64258;</div>
+																																																</div>	
+				</div>
+		
+		
+			</div>
+		</div>
+		
+		
+		<div id="specs">
+			
+		</div>
+	
+		<div id="installing">
+			<div class="section">
+				<div class="grid7 firstcol">
+					<h1>Installing Webfonts</h1>
+					
+					<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+					
+					<h2>1. Upload your webfonts</h2>
+					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+					
+					<h2>2. Include the webfont stylesheet</h2>
+					<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+	<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+	<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+					<h2>3. Modify your own stylesheet</h2>
+					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+				</div>
+				
+				<div class="grid5 sidebar">
+					<div class="box">
+						<h2>Troubleshooting<br />Font-Face Problems</h2>
+						<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+						<h3>Fonts not showing in any browser</h3>
+
+						<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+						<h3>Fonts not loading in iPhone or iPad</h3>
+
+						<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+						<h3>Fonts not loading in Firefox</h3>
+
+						<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+						<h3>Fonts not loading in IE</h3>
+
+						<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+						<h3>Fonts not loading in IE9</h3>
+
+						<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+					</div>
+				</div>
+			</div>
+			
+		</div>
+	
+	</div>
+	<div id="footer">
+		<p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+	</div>
+</div>
+</body>
+</html>
@@ -0,0 +1,619 @@
+<!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: 'avenir_lt_55_romanbold';
+							}
+		</style>
+
+	<title>Avenir LT 55 Roman 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">
+		Avenir LT 55 Roman 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>Avenir LT 55 Roman 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 Avenir LT 55 Roman 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 Avenir LT 55 Roman Bold in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+				<div id="glyph_chart">
+			
+																				 <div><p>&amp;#32;</p>&#32;</div>
+																				 <div><p>&amp;#33;</p>&#33;</div>
+																				 <div><p>&amp;#34;</p>&#34;</div>
+																				 <div><p>&amp;#35;</p>&#35;</div>
+																				 <div><p>&amp;#36;</p>&#36;</div>
+																				 <div><p>&amp;#37;</p>&#37;</div>
+																				 <div><p>&amp;#38;</p>&#38;</div>
+																				 <div><p>&amp;#39;</p>&#39;</div>
+																				 <div><p>&amp;#40;</p>&#40;</div>
+																				 <div><p>&amp;#41;</p>&#41;</div>
+																				 <div><p>&amp;#42;</p>&#42;</div>
+																				 <div><p>&amp;#43;</p>&#43;</div>
+																				 <div><p>&amp;#44;</p>&#44;</div>
+																				 <div><p>&amp;#45;</p>&#45;</div>
+																				 <div><p>&amp;#46;</p>&#46;</div>
+																				 <div><p>&amp;#47;</p>&#47;</div>
+																				 <div><p>&amp;#48;</p>&#48;</div>
+																				 <div><p>&amp;#49;</p>&#49;</div>
+																				 <div><p>&amp;#50;</p>&#50;</div>
+																				 <div><p>&amp;#51;</p>&#51;</div>
+																				 <div><p>&amp;#52;</p>&#52;</div>
+																				 <div><p>&amp;#53;</p>&#53;</div>
+																				 <div><p>&amp;#54;</p>&#54;</div>
+																				 <div><p>&amp;#55;</p>&#55;</div>
+																				 <div><p>&amp;#56;</p>&#56;</div>
+																				 <div><p>&amp;#57;</p>&#57;</div>
+																				 <div><p>&amp;#58;</p>&#58;</div>
+																				 <div><p>&amp;#59;</p>&#59;</div>
+																				 <div><p>&amp;#60;</p>&#60;</div>
+																				 <div><p>&amp;#61;</p>&#61;</div>
+																				 <div><p>&amp;#62;</p>&#62;</div>
+																				 <div><p>&amp;#63;</p>&#63;</div>
+																				 <div><p>&amp;#64;</p>&#64;</div>
+																				 <div><p>&amp;#65;</p>&#65;</div>
+																				 <div><p>&amp;#66;</p>&#66;</div>
+																				 <div><p>&amp;#67;</p>&#67;</div>
+																				 <div><p>&amp;#68;</p>&#68;</div>
+																				 <div><p>&amp;#69;</p>&#69;</div>
+																				 <div><p>&amp;#70;</p>&#70;</div>
+																				 <div><p>&amp;#71;</p>&#71;</div>
+																				 <div><p>&amp;#72;</p>&#72;</div>
+																				 <div><p>&amp;#73;</p>&#73;</div>
+																				 <div><p>&amp;#74;</p>&#74;</div>
+																				 <div><p>&amp;#75;</p>&#75;</div>
+																				 <div><p>&amp;#76;</p>&#76;</div>
+																				 <div><p>&amp;#77;</p>&#77;</div>
+																				 <div><p>&amp;#78;</p>&#78;</div>
+																				 <div><p>&amp;#79;</p>&#79;</div>
+																				 <div><p>&amp;#80;</p>&#80;</div>
+																				 <div><p>&amp;#81;</p>&#81;</div>
+																				 <div><p>&amp;#82;</p>&#82;</div>
+																				 <div><p>&amp;#83;</p>&#83;</div>
+																				 <div><p>&amp;#84;</p>&#84;</div>
+																				 <div><p>&amp;#85;</p>&#85;</div>
+																				 <div><p>&amp;#86;</p>&#86;</div>
+																				 <div><p>&amp;#87;</p>&#87;</div>
+																				 <div><p>&amp;#88;</p>&#88;</div>
+																				 <div><p>&amp;#89;</p>&#89;</div>
+																				 <div><p>&amp;#90;</p>&#90;</div>
+																				 <div><p>&amp;#91;</p>&#91;</div>
+																				 <div><p>&amp;#92;</p>&#92;</div>
+																				 <div><p>&amp;#93;</p>&#93;</div>
+																				 <div><p>&amp;#94;</p>&#94;</div>
+																				 <div><p>&amp;#95;</p>&#95;</div>
+																				 <div><p>&amp;#96;</p>&#96;</div>
+																				 <div><p>&amp;#97;</p>&#97;</div>
+																				 <div><p>&amp;#98;</p>&#98;</div>
+																				 <div><p>&amp;#99;</p>&#99;</div>
+																				 <div><p>&amp;#100;</p>&#100;</div>
+																				 <div><p>&amp;#101;</p>&#101;</div>
+																				 <div><p>&amp;#102;</p>&#102;</div>
+																				 <div><p>&amp;#103;</p>&#103;</div>
+																				 <div><p>&amp;#104;</p>&#104;</div>
+																				 <div><p>&amp;#105;</p>&#105;</div>
+																				 <div><p>&amp;#106;</p>&#106;</div>
+																				 <div><p>&amp;#107;</p>&#107;</div>
+																				 <div><p>&amp;#108;</p>&#108;</div>
+																				 <div><p>&amp;#109;</p>&#109;</div>
+																				 <div><p>&amp;#110;</p>&#110;</div>
+																				 <div><p>&amp;#111;</p>&#111;</div>
+																				 <div><p>&amp;#112;</p>&#112;</div>
+																				 <div><p>&amp;#113;</p>&#113;</div>
+																				 <div><p>&amp;#114;</p>&#114;</div>
+																				 <div><p>&amp;#115;</p>&#115;</div>
+																				 <div><p>&amp;#116;</p>&#116;</div>
+																				 <div><p>&amp;#117;</p>&#117;</div>
+																				 <div><p>&amp;#118;</p>&#118;</div>
+																				 <div><p>&amp;#119;</p>&#119;</div>
+																				 <div><p>&amp;#120;</p>&#120;</div>
+																				 <div><p>&amp;#121;</p>&#121;</div>
+																				 <div><p>&amp;#122;</p>&#122;</div>
+																				 <div><p>&amp;#123;</p>&#123;</div>
+																				 <div><p>&amp;#124;</p>&#124;</div>
+																				 <div><p>&amp;#125;</p>&#125;</div>
+																				 <div><p>&amp;#126;</p>&#126;</div>
+																				 <div><p>&amp;#160;</p>&#160;</div>
+																				 <div><p>&amp;#161;</p>&#161;</div>
+																				 <div><p>&amp;#162;</p>&#162;</div>
+																				 <div><p>&amp;#163;</p>&#163;</div>
+																				 <div><p>&amp;#164;</p>&#164;</div>
+																				 <div><p>&amp;#165;</p>&#165;</div>
+																				 <div><p>&amp;#166;</p>&#166;</div>
+																				 <div><p>&amp;#167;</p>&#167;</div>
+																				 <div><p>&amp;#168;</p>&#168;</div>
+																				 <div><p>&amp;#169;</p>&#169;</div>
+																				 <div><p>&amp;#170;</p>&#170;</div>
+																				 <div><p>&amp;#171;</p>&#171;</div>
+																				 <div><p>&amp;#172;</p>&#172;</div>
+																				 <div><p>&amp;#173;</p>&#173;</div>
+																				 <div><p>&amp;#174;</p>&#174;</div>
+																				 <div><p>&amp;#175;</p>&#175;</div>
+																				 <div><p>&amp;#176;</p>&#176;</div>
+																				 <div><p>&amp;#177;</p>&#177;</div>
+																				 <div><p>&amp;#178;</p>&#178;</div>
+																				 <div><p>&amp;#179;</p>&#179;</div>
+																				 <div><p>&amp;#180;</p>&#180;</div>
+																				 <div><p>&amp;#181;</p>&#181;</div>
+																				 <div><p>&amp;#182;</p>&#182;</div>
+																				 <div><p>&amp;#183;</p>&#183;</div>
+																				 <div><p>&amp;#184;</p>&#184;</div>
+																				 <div><p>&amp;#185;</p>&#185;</div>
+																				 <div><p>&amp;#186;</p>&#186;</div>
+																				 <div><p>&amp;#187;</p>&#187;</div>
+																				 <div><p>&amp;#188;</p>&#188;</div>
+																				 <div><p>&amp;#189;</p>&#189;</div>
+																				 <div><p>&amp;#190;</p>&#190;</div>
+																				 <div><p>&amp;#191;</p>&#191;</div>
+																				 <div><p>&amp;#192;</p>&#192;</div>
+																				 <div><p>&amp;#193;</p>&#193;</div>
+																				 <div><p>&amp;#194;</p>&#194;</div>
+																				 <div><p>&amp;#195;</p>&#195;</div>
+																				 <div><p>&amp;#196;</p>&#196;</div>
+																				 <div><p>&amp;#197;</p>&#197;</div>
+																				 <div><p>&amp;#198;</p>&#198;</div>
+																				 <div><p>&amp;#199;</p>&#199;</div>
+																				 <div><p>&amp;#200;</p>&#200;</div>
+																				 <div><p>&amp;#201;</p>&#201;</div>
+																				 <div><p>&amp;#202;</p>&#202;</div>
+																				 <div><p>&amp;#203;</p>&#203;</div>
+																				 <div><p>&amp;#204;</p>&#204;</div>
+																				 <div><p>&amp;#205;</p>&#205;</div>
+																				 <div><p>&amp;#206;</p>&#206;</div>
+																				 <div><p>&amp;#207;</p>&#207;</div>
+																				 <div><p>&amp;#208;</p>&#208;</div>
+																				 <div><p>&amp;#209;</p>&#209;</div>
+																				 <div><p>&amp;#210;</p>&#210;</div>
+																				 <div><p>&amp;#211;</p>&#211;</div>
+																				 <div><p>&amp;#212;</p>&#212;</div>
+																				 <div><p>&amp;#213;</p>&#213;</div>
+																				 <div><p>&amp;#214;</p>&#214;</div>
+																				 <div><p>&amp;#215;</p>&#215;</div>
+																				 <div><p>&amp;#216;</p>&#216;</div>
+																				 <div><p>&amp;#217;</p>&#217;</div>
+																				 <div><p>&amp;#218;</p>&#218;</div>
+																				 <div><p>&amp;#219;</p>&#219;</div>
+																				 <div><p>&amp;#220;</p>&#220;</div>
+																				 <div><p>&amp;#221;</p>&#221;</div>
+																				 <div><p>&amp;#222;</p>&#222;</div>
+																				 <div><p>&amp;#223;</p>&#223;</div>
+																				 <div><p>&amp;#224;</p>&#224;</div>
+																				 <div><p>&amp;#225;</p>&#225;</div>
+																				 <div><p>&amp;#226;</p>&#226;</div>
+																				 <div><p>&amp;#227;</p>&#227;</div>
+																				 <div><p>&amp;#228;</p>&#228;</div>
+																				 <div><p>&amp;#229;</p>&#229;</div>
+																				 <div><p>&amp;#230;</p>&#230;</div>
+																				 <div><p>&amp;#231;</p>&#231;</div>
+																				 <div><p>&amp;#232;</p>&#232;</div>
+																				 <div><p>&amp;#233;</p>&#233;</div>
+																				 <div><p>&amp;#234;</p>&#234;</div>
+																				 <div><p>&amp;#235;</p>&#235;</div>
+																				 <div><p>&amp;#236;</p>&#236;</div>
+																				 <div><p>&amp;#237;</p>&#237;</div>
+																				 <div><p>&amp;#238;</p>&#238;</div>
+																				 <div><p>&amp;#239;</p>&#239;</div>
+																				 <div><p>&amp;#240;</p>&#240;</div>
+																				 <div><p>&amp;#241;</p>&#241;</div>
+																				 <div><p>&amp;#242;</p>&#242;</div>
+																				 <div><p>&amp;#243;</p>&#243;</div>
+																				 <div><p>&amp;#244;</p>&#244;</div>
+																				 <div><p>&amp;#245;</p>&#245;</div>
+																				 <div><p>&amp;#246;</p>&#246;</div>
+																				 <div><p>&amp;#247;</p>&#247;</div>
+																				 <div><p>&amp;#248;</p>&#248;</div>
+																				 <div><p>&amp;#249;</p>&#249;</div>
+																				 <div><p>&amp;#250;</p>&#250;</div>
+																				 <div><p>&amp;#251;</p>&#251;</div>
+																				 <div><p>&amp;#252;</p>&#252;</div>
+																				 <div><p>&amp;#253;</p>&#253;</div>
+																				 <div><p>&amp;#254;</p>&#254;</div>
+																				 <div><p>&amp;#255;</p>&#255;</div>
+																				 <div><p>&amp;#338;</p>&#338;</div>
+																				 <div><p>&amp;#339;</p>&#339;</div>
+																				 <div><p>&amp;#376;</p>&#376;</div>
+																				 <div><p>&amp;#710;</p>&#710;</div>
+																				 <div><p>&amp;#732;</p>&#732;</div>
+																				 <div><p>&amp;#8192;</p>&#8192;</div>
+																				 <div><p>&amp;#8193;</p>&#8193;</div>
+																				 <div><p>&amp;#8194;</p>&#8194;</div>
+																				 <div><p>&amp;#8195;</p>&#8195;</div>
+																				 <div><p>&amp;#8196;</p>&#8196;</div>
+																				 <div><p>&amp;#8197;</p>&#8197;</div>
+																				 <div><p>&amp;#8198;</p>&#8198;</div>
+																				 <div><p>&amp;#8199;</p>&#8199;</div>
+																				 <div><p>&amp;#8200;</p>&#8200;</div>
+																				 <div><p>&amp;#8201;</p>&#8201;</div>
+																				 <div><p>&amp;#8202;</p>&#8202;</div>
+																				 <div><p>&amp;#8208;</p>&#8208;</div>
+																				 <div><p>&amp;#8209;</p>&#8209;</div>
+																				 <div><p>&amp;#8210;</p>&#8210;</div>
+																				 <div><p>&amp;#8211;</p>&#8211;</div>
+																				 <div><p>&amp;#8212;</p>&#8212;</div>
+																				 <div><p>&amp;#8216;</p>&#8216;</div>
+																				 <div><p>&amp;#8217;</p>&#8217;</div>
+																				 <div><p>&amp;#8218;</p>&#8218;</div>
+																				 <div><p>&amp;#8220;</p>&#8220;</div>
+																				 <div><p>&amp;#8221;</p>&#8221;</div>
+																				 <div><p>&amp;#8222;</p>&#8222;</div>
+																				 <div><p>&amp;#8226;</p>&#8226;</div>
+																				 <div><p>&amp;#8230;</p>&#8230;</div>
+																				 <div><p>&amp;#8239;</p>&#8239;</div>
+																				 <div><p>&amp;#8249;</p>&#8249;</div>
+																				 <div><p>&amp;#8250;</p>&#8250;</div>
+																				 <div><p>&amp;#8287;</p>&#8287;</div>
+																				 <div><p>&amp;#8364;</p>&#8364;</div>
+																				 <div><p>&amp;#8482;</p>&#8482;</div>
+																				 <div><p>&amp;#9724;</p>&#9724;</div>
+																				 <div><p>&amp;#64257;</p>&#64257;</div>
+																				 <div><p>&amp;#64258;</p>&#64258;</div>
+																																																</div>	
+				</div>
+		
+		
+			</div>
+		</div>
+		
+		
+		<div id="specs">
+			
+		</div>
+	
+		<div id="installing">
+			<div class="section">
+				<div class="grid7 firstcol">
+					<h1>Installing Webfonts</h1>
+					
+					<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+					
+					<h2>1. Upload your webfonts</h2>
+					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+					
+					<h2>2. Include the webfont stylesheet</h2>
+					<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+	<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+	<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+					<h2>3. Modify your own stylesheet</h2>
+					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+				</div>
+				
+				<div class="grid5 sidebar">
+					<div class="box">
+						<h2>Troubleshooting<br />Font-Face Problems</h2>
+						<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+						<h3>Fonts not showing in any browser</h3>
+
+						<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+						<h3>Fonts not loading in iPhone or iPad</h3>
+
+						<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+						<h3>Fonts not loading in Firefox</h3>
+
+						<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+						<h3>Fonts not loading in IE</h3>
+
+						<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+						<h3>Fonts not loading in IE9</h3>
+
+						<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+					</div>
+				</div>
+			</div>
+			
+		</div>
+	
+	</div>
+	<div id="footer">
+		<p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+	</div>
+</div>
+</body>
+</html>
@@ -0,0 +1,619 @@
+<!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: 'avenir_lt_55_romanbold_italic';
+							}
+		</style>
+
+	<title>Avenir LT 55 Roman Bold Italic 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">
+		Avenir LT 55 Roman Bold Italic	</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>Avenir LT 55 Roman Bold Italic</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 Avenir LT 55 Roman Bold Italic 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 Avenir LT 55 Roman Bold Italic in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+				<div id="glyph_chart">
+			
+																				 <div><p>&amp;#32;</p>&#32;</div>
+																				 <div><p>&amp;#33;</p>&#33;</div>
+																				 <div><p>&amp;#34;</p>&#34;</div>
+																				 <div><p>&amp;#35;</p>&#35;</div>
+																				 <div><p>&amp;#36;</p>&#36;</div>
+																				 <div><p>&amp;#37;</p>&#37;</div>
+																				 <div><p>&amp;#38;</p>&#38;</div>
+																				 <div><p>&amp;#39;</p>&#39;</div>
+																				 <div><p>&amp;#40;</p>&#40;</div>
+																				 <div><p>&amp;#41;</p>&#41;</div>
+																				 <div><p>&amp;#42;</p>&#42;</div>
+																				 <div><p>&amp;#43;</p>&#43;</div>
+																				 <div><p>&amp;#44;</p>&#44;</div>
+																				 <div><p>&amp;#45;</p>&#45;</div>
+																				 <div><p>&amp;#46;</p>&#46;</div>
+																				 <div><p>&amp;#47;</p>&#47;</div>
+																				 <div><p>&amp;#48;</p>&#48;</div>
+																				 <div><p>&amp;#49;</p>&#49;</div>
+																				 <div><p>&amp;#50;</p>&#50;</div>
+																				 <div><p>&amp;#51;</p>&#51;</div>
+																				 <div><p>&amp;#52;</p>&#52;</div>
+																				 <div><p>&amp;#53;</p>&#53;</div>
+																				 <div><p>&amp;#54;</p>&#54;</div>
+																				 <div><p>&amp;#55;</p>&#55;</div>
+																				 <div><p>&amp;#56;</p>&#56;</div>
+																				 <div><p>&amp;#57;</p>&#57;</div>
+																				 <div><p>&amp;#58;</p>&#58;</div>
+																				 <div><p>&amp;#59;</p>&#59;</div>
+																				 <div><p>&amp;#60;</p>&#60;</div>
+																				 <div><p>&amp;#61;</p>&#61;</div>
+																				 <div><p>&amp;#62;</p>&#62;</div>
+																				 <div><p>&amp;#63;</p>&#63;</div>
+																				 <div><p>&amp;#64;</p>&#64;</div>
+																				 <div><p>&amp;#65;</p>&#65;</div>
+																				 <div><p>&amp;#66;</p>&#66;</div>
+																				 <div><p>&amp;#67;</p>&#67;</div>
+																				 <div><p>&amp;#68;</p>&#68;</div>
+																				 <div><p>&amp;#69;</p>&#69;</div>
+																				 <div><p>&amp;#70;</p>&#70;</div>
+																				 <div><p>&amp;#71;</p>&#71;</div>
+																				 <div><p>&amp;#72;</p>&#72;</div>
+																				 <div><p>&amp;#73;</p>&#73;</div>
+																				 <div><p>&amp;#74;</p>&#74;</div>
+																				 <div><p>&amp;#75;</p>&#75;</div>
+																				 <div><p>&amp;#76;</p>&#76;</div>
+																				 <div><p>&amp;#77;</p>&#77;</div>
+																				 <div><p>&amp;#78;</p>&#78;</div>
+																				 <div><p>&amp;#79;</p>&#79;</div>
+																				 <div><p>&amp;#80;</p>&#80;</div>
+																				 <div><p>&amp;#81;</p>&#81;</div>
+																				 <div><p>&amp;#82;</p>&#82;</div>
+																				 <div><p>&amp;#83;</p>&#83;</div>
+																				 <div><p>&amp;#84;</p>&#84;</div>
+																				 <div><p>&amp;#85;</p>&#85;</div>
+																				 <div><p>&amp;#86;</p>&#86;</div>
+																				 <div><p>&amp;#87;</p>&#87;</div>
+																				 <div><p>&amp;#88;</p>&#88;</div>
+																				 <div><p>&amp;#89;</p>&#89;</div>
+																				 <div><p>&amp;#90;</p>&#90;</div>
+																				 <div><p>&amp;#91;</p>&#91;</div>
+																				 <div><p>&amp;#92;</p>&#92;</div>
+																				 <div><p>&amp;#93;</p>&#93;</div>
+																				 <div><p>&amp;#94;</p>&#94;</div>
+																				 <div><p>&amp;#95;</p>&#95;</div>
+																				 <div><p>&amp;#96;</p>&#96;</div>
+																				 <div><p>&amp;#97;</p>&#97;</div>
+																				 <div><p>&amp;#98;</p>&#98;</div>
+																				 <div><p>&amp;#99;</p>&#99;</div>
+																				 <div><p>&amp;#100;</p>&#100;</div>
+																				 <div><p>&amp;#101;</p>&#101;</div>
+																				 <div><p>&amp;#102;</p>&#102;</div>
+																				 <div><p>&amp;#103;</p>&#103;</div>
+																				 <div><p>&amp;#104;</p>&#104;</div>
+																				 <div><p>&amp;#105;</p>&#105;</div>
+																				 <div><p>&amp;#106;</p>&#106;</div>
+																				 <div><p>&amp;#107;</p>&#107;</div>
+																				 <div><p>&amp;#108;</p>&#108;</div>
+																				 <div><p>&amp;#109;</p>&#109;</div>
+																				 <div><p>&amp;#110;</p>&#110;</div>
+																				 <div><p>&amp;#111;</p>&#111;</div>
+																				 <div><p>&amp;#112;</p>&#112;</div>
+																				 <div><p>&amp;#113;</p>&#113;</div>
+																				 <div><p>&amp;#114;</p>&#114;</div>
+																				 <div><p>&amp;#115;</p>&#115;</div>
+																				 <div><p>&amp;#116;</p>&#116;</div>
+																				 <div><p>&amp;#117;</p>&#117;</div>
+																				 <div><p>&amp;#118;</p>&#118;</div>
+																				 <div><p>&amp;#119;</p>&#119;</div>
+																				 <div><p>&amp;#120;</p>&#120;</div>
+																				 <div><p>&amp;#121;</p>&#121;</div>
+																				 <div><p>&amp;#122;</p>&#122;</div>
+																				 <div><p>&amp;#123;</p>&#123;</div>
+																				 <div><p>&amp;#124;</p>&#124;</div>
+																				 <div><p>&amp;#125;</p>&#125;</div>
+																				 <div><p>&amp;#126;</p>&#126;</div>
+																				 <div><p>&amp;#160;</p>&#160;</div>
+																				 <div><p>&amp;#161;</p>&#161;</div>
+																				 <div><p>&amp;#162;</p>&#162;</div>
+																				 <div><p>&amp;#163;</p>&#163;</div>
+																				 <div><p>&amp;#164;</p>&#164;</div>
+																				 <div><p>&amp;#165;</p>&#165;</div>
+																				 <div><p>&amp;#166;</p>&#166;</div>
+																				 <div><p>&amp;#167;</p>&#167;</div>
+																				 <div><p>&amp;#168;</p>&#168;</div>
+																				 <div><p>&amp;#169;</p>&#169;</div>
+																				 <div><p>&amp;#170;</p>&#170;</div>
+																				 <div><p>&amp;#171;</p>&#171;</div>
+																				 <div><p>&amp;#172;</p>&#172;</div>
+																				 <div><p>&amp;#173;</p>&#173;</div>
+																				 <div><p>&amp;#174;</p>&#174;</div>
+																				 <div><p>&amp;#175;</p>&#175;</div>
+																				 <div><p>&amp;#176;</p>&#176;</div>
+																				 <div><p>&amp;#177;</p>&#177;</div>
+																				 <div><p>&amp;#178;</p>&#178;</div>
+																				 <div><p>&amp;#179;</p>&#179;</div>
+																				 <div><p>&amp;#180;</p>&#180;</div>
+																				 <div><p>&amp;#181;</p>&#181;</div>
+																				 <div><p>&amp;#182;</p>&#182;</div>
+																				 <div><p>&amp;#183;</p>&#183;</div>
+																				 <div><p>&amp;#184;</p>&#184;</div>
+																				 <div><p>&amp;#185;</p>&#185;</div>
+																				 <div><p>&amp;#186;</p>&#186;</div>
+																				 <div><p>&amp;#187;</p>&#187;</div>
+																				 <div><p>&amp;#188;</p>&#188;</div>
+																				 <div><p>&amp;#189;</p>&#189;</div>
+																				 <div><p>&amp;#190;</p>&#190;</div>
+																				 <div><p>&amp;#191;</p>&#191;</div>
+																				 <div><p>&amp;#192;</p>&#192;</div>
+																				 <div><p>&amp;#193;</p>&#193;</div>
+																				 <div><p>&amp;#194;</p>&#194;</div>
+																				 <div><p>&amp;#195;</p>&#195;</div>
+																				 <div><p>&amp;#196;</p>&#196;</div>
+																				 <div><p>&amp;#197;</p>&#197;</div>
+																				 <div><p>&amp;#198;</p>&#198;</div>
+																				 <div><p>&amp;#199;</p>&#199;</div>
+																				 <div><p>&amp;#200;</p>&#200;</div>
+																				 <div><p>&amp;#201;</p>&#201;</div>
+																				 <div><p>&amp;#202;</p>&#202;</div>
+																				 <div><p>&amp;#203;</p>&#203;</div>
+																				 <div><p>&amp;#204;</p>&#204;</div>
+																				 <div><p>&amp;#205;</p>&#205;</div>
+																				 <div><p>&amp;#206;</p>&#206;</div>
+																				 <div><p>&amp;#207;</p>&#207;</div>
+																				 <div><p>&amp;#208;</p>&#208;</div>
+																				 <div><p>&amp;#209;</p>&#209;</div>
+																				 <div><p>&amp;#210;</p>&#210;</div>
+																				 <div><p>&amp;#211;</p>&#211;</div>
+																				 <div><p>&amp;#212;</p>&#212;</div>
+																				 <div><p>&amp;#213;</p>&#213;</div>
+																				 <div><p>&amp;#214;</p>&#214;</div>
+																				 <div><p>&amp;#215;</p>&#215;</div>
+																				 <div><p>&amp;#216;</p>&#216;</div>
+																				 <div><p>&amp;#217;</p>&#217;</div>
+																				 <div><p>&amp;#218;</p>&#218;</div>
+																				 <div><p>&amp;#219;</p>&#219;</div>
+																				 <div><p>&amp;#220;</p>&#220;</div>
+																				 <div><p>&amp;#221;</p>&#221;</div>
+																				 <div><p>&amp;#222;</p>&#222;</div>
+																				 <div><p>&amp;#223;</p>&#223;</div>
+																				 <div><p>&amp;#224;</p>&#224;</div>
+																				 <div><p>&amp;#225;</p>&#225;</div>
+																				 <div><p>&amp;#226;</p>&#226;</div>
+																				 <div><p>&amp;#227;</p>&#227;</div>
+																				 <div><p>&amp;#228;</p>&#228;</div>
+																				 <div><p>&amp;#229;</p>&#229;</div>
+																				 <div><p>&amp;#230;</p>&#230;</div>
+																				 <div><p>&amp;#231;</p>&#231;</div>
+																				 <div><p>&amp;#232;</p>&#232;</div>
+																				 <div><p>&amp;#233;</p>&#233;</div>
+																				 <div><p>&amp;#234;</p>&#234;</div>
+																				 <div><p>&amp;#235;</p>&#235;</div>
+																				 <div><p>&amp;#236;</p>&#236;</div>
+																				 <div><p>&amp;#237;</p>&#237;</div>
+																				 <div><p>&amp;#238;</p>&#238;</div>
+																				 <div><p>&amp;#239;</p>&#239;</div>
+																				 <div><p>&amp;#240;</p>&#240;</div>
+																				 <div><p>&amp;#241;</p>&#241;</div>
+																				 <div><p>&amp;#242;</p>&#242;</div>
+																				 <div><p>&amp;#243;</p>&#243;</div>
+																				 <div><p>&amp;#244;</p>&#244;</div>
+																				 <div><p>&amp;#245;</p>&#245;</div>
+																				 <div><p>&amp;#246;</p>&#246;</div>
+																				 <div><p>&amp;#247;</p>&#247;</div>
+																				 <div><p>&amp;#248;</p>&#248;</div>
+																				 <div><p>&amp;#249;</p>&#249;</div>
+																				 <div><p>&amp;#250;</p>&#250;</div>
+																				 <div><p>&amp;#251;</p>&#251;</div>
+																				 <div><p>&amp;#252;</p>&#252;</div>
+																				 <div><p>&amp;#253;</p>&#253;</div>
+																				 <div><p>&amp;#254;</p>&#254;</div>
+																				 <div><p>&amp;#255;</p>&#255;</div>
+																				 <div><p>&amp;#338;</p>&#338;</div>
+																				 <div><p>&amp;#339;</p>&#339;</div>
+																				 <div><p>&amp;#376;</p>&#376;</div>
+																				 <div><p>&amp;#710;</p>&#710;</div>
+																				 <div><p>&amp;#732;</p>&#732;</div>
+																				 <div><p>&amp;#8192;</p>&#8192;</div>
+																				 <div><p>&amp;#8193;</p>&#8193;</div>
+																				 <div><p>&amp;#8194;</p>&#8194;</div>
+																				 <div><p>&amp;#8195;</p>&#8195;</div>
+																				 <div><p>&amp;#8196;</p>&#8196;</div>
+																				 <div><p>&amp;#8197;</p>&#8197;</div>
+																				 <div><p>&amp;#8198;</p>&#8198;</div>
+																				 <div><p>&amp;#8199;</p>&#8199;</div>
+																				 <div><p>&amp;#8200;</p>&#8200;</div>
+																				 <div><p>&amp;#8201;</p>&#8201;</div>
+																				 <div><p>&amp;#8202;</p>&#8202;</div>
+																				 <div><p>&amp;#8208;</p>&#8208;</div>
+																				 <div><p>&amp;#8209;</p>&#8209;</div>
+																				 <div><p>&amp;#8210;</p>&#8210;</div>
+																				 <div><p>&amp;#8211;</p>&#8211;</div>
+																				 <div><p>&amp;#8212;</p>&#8212;</div>
+																				 <div><p>&amp;#8216;</p>&#8216;</div>
+																				 <div><p>&amp;#8217;</p>&#8217;</div>
+																				 <div><p>&amp;#8218;</p>&#8218;</div>
+																				 <div><p>&amp;#8220;</p>&#8220;</div>
+																				 <div><p>&amp;#8221;</p>&#8221;</div>
+																				 <div><p>&amp;#8222;</p>&#8222;</div>
+																				 <div><p>&amp;#8226;</p>&#8226;</div>
+																				 <div><p>&amp;#8230;</p>&#8230;</div>
+																				 <div><p>&amp;#8239;</p>&#8239;</div>
+																				 <div><p>&amp;#8249;</p>&#8249;</div>
+																				 <div><p>&amp;#8250;</p>&#8250;</div>
+																				 <div><p>&amp;#8287;</p>&#8287;</div>
+																				 <div><p>&amp;#8364;</p>&#8364;</div>
+																				 <div><p>&amp;#8482;</p>&#8482;</div>
+																				 <div><p>&amp;#9724;</p>&#9724;</div>
+																				 <div><p>&amp;#64257;</p>&#64257;</div>
+																				 <div><p>&amp;#64258;</p>&#64258;</div>
+																																																</div>	
+				</div>
+		
+		
+			</div>
+		</div>
+		
+		
+		<div id="specs">
+			
+		</div>
+	
+		<div id="installing">
+			<div class="section">
+				<div class="grid7 firstcol">
+					<h1>Installing Webfonts</h1>
+					
+					<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+					
+					<h2>1. Upload your webfonts</h2>
+					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+					
+					<h2>2. Include the webfont stylesheet</h2>
+					<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+	<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+	<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+					<h2>3. Modify your own stylesheet</h2>
+					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+				</div>
+				
+				<div class="grid5 sidebar">
+					<div class="box">
+						<h2>Troubleshooting<br />Font-Face Problems</h2>
+						<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+						<h3>Fonts not showing in any browser</h3>
+
+						<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+						<h3>Fonts not loading in iPhone or iPad</h3>
+
+						<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+						<h3>Fonts not loading in Firefox</h3>
+
+						<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+						<h3>Fonts not loading in IE</h3>
+
+						<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+						<h3>Fonts not loading in IE9</h3>
+
+						<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+					</div>
+				</div>
+			</div>
+			
+		</div>
+	
+	</div>
+	<div id="footer">
+		<p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+	</div>
+</div>
+</body>
+</html>
@@ -0,0 +1,619 @@
+<!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: 'avenir_lt_65_mediumbold';
+							}
+		</style>
+
+	<title>Avenir LT 65 Medium 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">
+		Avenir LT 65 Medium 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>Avenir LT 65 Medium 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 Avenir LT 65 Medium 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 Avenir LT 65 Medium Bold in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+				<div id="glyph_chart">
+			
+																				 <div><p>&amp;#32;</p>&#32;</div>
+																				 <div><p>&amp;#33;</p>&#33;</div>
+																				 <div><p>&amp;#34;</p>&#34;</div>
+																				 <div><p>&amp;#35;</p>&#35;</div>
+																				 <div><p>&amp;#36;</p>&#36;</div>
+																				 <div><p>&amp;#37;</p>&#37;</div>
+																				 <div><p>&amp;#38;</p>&#38;</div>
+																				 <div><p>&amp;#39;</p>&#39;</div>
+																				 <div><p>&amp;#40;</p>&#40;</div>
+																				 <div><p>&amp;#41;</p>&#41;</div>
+																				 <div><p>&amp;#42;</p>&#42;</div>
+																				 <div><p>&amp;#43;</p>&#43;</div>
+																				 <div><p>&amp;#44;</p>&#44;</div>
+																				 <div><p>&amp;#45;</p>&#45;</div>
+																				 <div><p>&amp;#46;</p>&#46;</div>
+																				 <div><p>&amp;#47;</p>&#47;</div>
+																				 <div><p>&amp;#48;</p>&#48;</div>
+																				 <div><p>&amp;#49;</p>&#49;</div>
+																				 <div><p>&amp;#50;</p>&#50;</div>
+																				 <div><p>&amp;#51;</p>&#51;</div>
+																				 <div><p>&amp;#52;</p>&#52;</div>
+																				 <div><p>&amp;#53;</p>&#53;</div>
+																				 <div><p>&amp;#54;</p>&#54;</div>
+																				 <div><p>&amp;#55;</p>&#55;</div>
+																				 <div><p>&amp;#56;</p>&#56;</div>
+																				 <div><p>&amp;#57;</p>&#57;</div>
+																				 <div><p>&amp;#58;</p>&#58;</div>
+																				 <div><p>&amp;#59;</p>&#59;</div>
+																				 <div><p>&amp;#60;</p>&#60;</div>
+																				 <div><p>&amp;#61;</p>&#61;</div>
+																				 <div><p>&amp;#62;</p>&#62;</div>
+																				 <div><p>&amp;#63;</p>&#63;</div>
+																				 <div><p>&amp;#64;</p>&#64;</div>
+																				 <div><p>&amp;#65;</p>&#65;</div>
+																				 <div><p>&amp;#66;</p>&#66;</div>
+																				 <div><p>&amp;#67;</p>&#67;</div>
+																				 <div><p>&amp;#68;</p>&#68;</div>
+																				 <div><p>&amp;#69;</p>&#69;</div>
+																				 <div><p>&amp;#70;</p>&#70;</div>
+																				 <div><p>&amp;#71;</p>&#71;</div>
+																				 <div><p>&amp;#72;</p>&#72;</div>
+																				 <div><p>&amp;#73;</p>&#73;</div>
+																				 <div><p>&amp;#74;</p>&#74;</div>
+																				 <div><p>&amp;#75;</p>&#75;</div>
+																				 <div><p>&amp;#76;</p>&#76;</div>
+																				 <div><p>&amp;#77;</p>&#77;</div>
+																				 <div><p>&amp;#78;</p>&#78;</div>
+																				 <div><p>&amp;#79;</p>&#79;</div>
+																				 <div><p>&amp;#80;</p>&#80;</div>
+																				 <div><p>&amp;#81;</p>&#81;</div>
+																				 <div><p>&amp;#82;</p>&#82;</div>
+																				 <div><p>&amp;#83;</p>&#83;</div>
+																				 <div><p>&amp;#84;</p>&#84;</div>
+																				 <div><p>&amp;#85;</p>&#85;</div>
+																				 <div><p>&amp;#86;</p>&#86;</div>
+																				 <div><p>&amp;#87;</p>&#87;</div>
+																				 <div><p>&amp;#88;</p>&#88;</div>
+																				 <div><p>&amp;#89;</p>&#89;</div>
+																				 <div><p>&amp;#90;</p>&#90;</div>
+																				 <div><p>&amp;#91;</p>&#91;</div>
+																				 <div><p>&amp;#92;</p>&#92;</div>
+																				 <div><p>&amp;#93;</p>&#93;</div>
+																				 <div><p>&amp;#94;</p>&#94;</div>
+																				 <div><p>&amp;#95;</p>&#95;</div>
+																				 <div><p>&amp;#96;</p>&#96;</div>
+																				 <div><p>&amp;#97;</p>&#97;</div>
+																				 <div><p>&amp;#98;</p>&#98;</div>
+																				 <div><p>&amp;#99;</p>&#99;</div>
+																				 <div><p>&amp;#100;</p>&#100;</div>
+																				 <div><p>&amp;#101;</p>&#101;</div>
+																				 <div><p>&amp;#102;</p>&#102;</div>
+																				 <div><p>&amp;#103;</p>&#103;</div>
+																				 <div><p>&amp;#104;</p>&#104;</div>
+																				 <div><p>&amp;#105;</p>&#105;</div>
+																				 <div><p>&amp;#106;</p>&#106;</div>
+																				 <div><p>&amp;#107;</p>&#107;</div>
+																				 <div><p>&amp;#108;</p>&#108;</div>
+																				 <div><p>&amp;#109;</p>&#109;</div>
+																				 <div><p>&amp;#110;</p>&#110;</div>
+																				 <div><p>&amp;#111;</p>&#111;</div>
+																				 <div><p>&amp;#112;</p>&#112;</div>
+																				 <div><p>&amp;#113;</p>&#113;</div>
+																				 <div><p>&amp;#114;</p>&#114;</div>
+																				 <div><p>&amp;#115;</p>&#115;</div>
+																				 <div><p>&amp;#116;</p>&#116;</div>
+																				 <div><p>&amp;#117;</p>&#117;</div>
+																				 <div><p>&amp;#118;</p>&#118;</div>
+																				 <div><p>&amp;#119;</p>&#119;</div>
+																				 <div><p>&amp;#120;</p>&#120;</div>
+																				 <div><p>&amp;#121;</p>&#121;</div>
+																				 <div><p>&amp;#122;</p>&#122;</div>
+																				 <div><p>&amp;#123;</p>&#123;</div>
+																				 <div><p>&amp;#124;</p>&#124;</div>
+																				 <div><p>&amp;#125;</p>&#125;</div>
+																				 <div><p>&amp;#126;</p>&#126;</div>
+																				 <div><p>&amp;#160;</p>&#160;</div>
+																				 <div><p>&amp;#161;</p>&#161;</div>
+																				 <div><p>&amp;#162;</p>&#162;</div>
+																				 <div><p>&amp;#163;</p>&#163;</div>
+																				 <div><p>&amp;#164;</p>&#164;</div>
+																				 <div><p>&amp;#165;</p>&#165;</div>
+																				 <div><p>&amp;#166;</p>&#166;</div>
+																				 <div><p>&amp;#167;</p>&#167;</div>
+																				 <div><p>&amp;#168;</p>&#168;</div>
+																				 <div><p>&amp;#169;</p>&#169;</div>
+																				 <div><p>&amp;#170;</p>&#170;</div>
+																				 <div><p>&amp;#171;</p>&#171;</div>
+																				 <div><p>&amp;#172;</p>&#172;</div>
+																				 <div><p>&amp;#173;</p>&#173;</div>
+																				 <div><p>&amp;#174;</p>&#174;</div>
+																				 <div><p>&amp;#175;</p>&#175;</div>
+																				 <div><p>&amp;#176;</p>&#176;</div>
+																				 <div><p>&amp;#177;</p>&#177;</div>
+																				 <div><p>&amp;#178;</p>&#178;</div>
+																				 <div><p>&amp;#179;</p>&#179;</div>
+																				 <div><p>&amp;#180;</p>&#180;</div>
+																				 <div><p>&amp;#181;</p>&#181;</div>
+																				 <div><p>&amp;#182;</p>&#182;</div>
+																				 <div><p>&amp;#183;</p>&#183;</div>
+																				 <div><p>&amp;#184;</p>&#184;</div>
+																				 <div><p>&amp;#185;</p>&#185;</div>
+																				 <div><p>&amp;#186;</p>&#186;</div>
+																				 <div><p>&amp;#187;</p>&#187;</div>
+																				 <div><p>&amp;#188;</p>&#188;</div>
+																				 <div><p>&amp;#189;</p>&#189;</div>
+																				 <div><p>&amp;#190;</p>&#190;</div>
+																				 <div><p>&amp;#191;</p>&#191;</div>
+																				 <div><p>&amp;#192;</p>&#192;</div>
+																				 <div><p>&amp;#193;</p>&#193;</div>
+																				 <div><p>&amp;#194;</p>&#194;</div>
+																				 <div><p>&amp;#195;</p>&#195;</div>
+																				 <div><p>&amp;#196;</p>&#196;</div>
+																				 <div><p>&amp;#197;</p>&#197;</div>
+																				 <div><p>&amp;#198;</p>&#198;</div>
+																				 <div><p>&amp;#199;</p>&#199;</div>
+																				 <div><p>&amp;#200;</p>&#200;</div>
+																				 <div><p>&amp;#201;</p>&#201;</div>
+																				 <div><p>&amp;#202;</p>&#202;</div>
+																				 <div><p>&amp;#203;</p>&#203;</div>
+																				 <div><p>&amp;#204;</p>&#204;</div>
+																				 <div><p>&amp;#205;</p>&#205;</div>
+																				 <div><p>&amp;#206;</p>&#206;</div>
+																				 <div><p>&amp;#207;</p>&#207;</div>
+																				 <div><p>&amp;#208;</p>&#208;</div>
+																				 <div><p>&amp;#209;</p>&#209;</div>
+																				 <div><p>&amp;#210;</p>&#210;</div>
+																				 <div><p>&amp;#211;</p>&#211;</div>
+																				 <div><p>&amp;#212;</p>&#212;</div>
+																				 <div><p>&amp;#213;</p>&#213;</div>
+																				 <div><p>&amp;#214;</p>&#214;</div>
+																				 <div><p>&amp;#215;</p>&#215;</div>
+																				 <div><p>&amp;#216;</p>&#216;</div>
+																				 <div><p>&amp;#217;</p>&#217;</div>
+																				 <div><p>&amp;#218;</p>&#218;</div>
+																				 <div><p>&amp;#219;</p>&#219;</div>
+																				 <div><p>&amp;#220;</p>&#220;</div>
+																				 <div><p>&amp;#221;</p>&#221;</div>
+																				 <div><p>&amp;#222;</p>&#222;</div>
+																				 <div><p>&amp;#223;</p>&#223;</div>
+																				 <div><p>&amp;#224;</p>&#224;</div>
+																				 <div><p>&amp;#225;</p>&#225;</div>
+																				 <div><p>&amp;#226;</p>&#226;</div>
+																				 <div><p>&amp;#227;</p>&#227;</div>
+																				 <div><p>&amp;#228;</p>&#228;</div>
+																				 <div><p>&amp;#229;</p>&#229;</div>
+																				 <div><p>&amp;#230;</p>&#230;</div>
+																				 <div><p>&amp;#231;</p>&#231;</div>
+																				 <div><p>&amp;#232;</p>&#232;</div>
+																				 <div><p>&amp;#233;</p>&#233;</div>
+																				 <div><p>&amp;#234;</p>&#234;</div>
+																				 <div><p>&amp;#235;</p>&#235;</div>
+																				 <div><p>&amp;#236;</p>&#236;</div>
+																				 <div><p>&amp;#237;</p>&#237;</div>
+																				 <div><p>&amp;#238;</p>&#238;</div>
+																				 <div><p>&amp;#239;</p>&#239;</div>
+																				 <div><p>&amp;#240;</p>&#240;</div>
+																				 <div><p>&amp;#241;</p>&#241;</div>
+																				 <div><p>&amp;#242;</p>&#242;</div>
+																				 <div><p>&amp;#243;</p>&#243;</div>
+																				 <div><p>&amp;#244;</p>&#244;</div>
+																				 <div><p>&amp;#245;</p>&#245;</div>
+																				 <div><p>&amp;#246;</p>&#246;</div>
+																				 <div><p>&amp;#247;</p>&#247;</div>
+																				 <div><p>&amp;#248;</p>&#248;</div>
+																				 <div><p>&amp;#249;</p>&#249;</div>
+																				 <div><p>&amp;#250;</p>&#250;</div>
+																				 <div><p>&amp;#251;</p>&#251;</div>
+																				 <div><p>&amp;#252;</p>&#252;</div>
+																				 <div><p>&amp;#253;</p>&#253;</div>
+																				 <div><p>&amp;#254;</p>&#254;</div>
+																				 <div><p>&amp;#255;</p>&#255;</div>
+																				 <div><p>&amp;#338;</p>&#338;</div>
+																				 <div><p>&amp;#339;</p>&#339;</div>
+																				 <div><p>&amp;#376;</p>&#376;</div>
+																				 <div><p>&amp;#710;</p>&#710;</div>
+																				 <div><p>&amp;#732;</p>&#732;</div>
+																				 <div><p>&amp;#8192;</p>&#8192;</div>
+																				 <div><p>&amp;#8193;</p>&#8193;</div>
+																				 <div><p>&amp;#8194;</p>&#8194;</div>
+																				 <div><p>&amp;#8195;</p>&#8195;</div>
+																				 <div><p>&amp;#8196;</p>&#8196;</div>
+																				 <div><p>&amp;#8197;</p>&#8197;</div>
+																				 <div><p>&amp;#8198;</p>&#8198;</div>
+																				 <div><p>&amp;#8199;</p>&#8199;</div>
+																				 <div><p>&amp;#8200;</p>&#8200;</div>
+																				 <div><p>&amp;#8201;</p>&#8201;</div>
+																				 <div><p>&amp;#8202;</p>&#8202;</div>
+																				 <div><p>&amp;#8208;</p>&#8208;</div>
+																				 <div><p>&amp;#8209;</p>&#8209;</div>
+																				 <div><p>&amp;#8210;</p>&#8210;</div>
+																				 <div><p>&amp;#8211;</p>&#8211;</div>
+																				 <div><p>&amp;#8212;</p>&#8212;</div>
+																				 <div><p>&amp;#8216;</p>&#8216;</div>
+																				 <div><p>&amp;#8217;</p>&#8217;</div>
+																				 <div><p>&amp;#8218;</p>&#8218;</div>
+																				 <div><p>&amp;#8220;</p>&#8220;</div>
+																				 <div><p>&amp;#8221;</p>&#8221;</div>
+																				 <div><p>&amp;#8222;</p>&#8222;</div>
+																				 <div><p>&amp;#8226;</p>&#8226;</div>
+																				 <div><p>&amp;#8230;</p>&#8230;</div>
+																				 <div><p>&amp;#8239;</p>&#8239;</div>
+																				 <div><p>&amp;#8249;</p>&#8249;</div>
+																				 <div><p>&amp;#8250;</p>&#8250;</div>
+																				 <div><p>&amp;#8287;</p>&#8287;</div>
+																				 <div><p>&amp;#8364;</p>&#8364;</div>
+																				 <div><p>&amp;#8482;</p>&#8482;</div>
+																				 <div><p>&amp;#9724;</p>&#9724;</div>
+																				 <div><p>&amp;#64257;</p>&#64257;</div>
+																				 <div><p>&amp;#64258;</p>&#64258;</div>
+																																																</div>	
+				</div>
+		
+		
+			</div>
+		</div>
+		
+		
+		<div id="specs">
+			
+		</div>
+	
+		<div id="installing">
+			<div class="section">
+				<div class="grid7 firstcol">
+					<h1>Installing Webfonts</h1>
+					
+					<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+					
+					<h2>1. Upload your webfonts</h2>
+					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+					
+					<h2>2. Include the webfont stylesheet</h2>
+					<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+	<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+	<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+					<h2>3. Modify your own stylesheet</h2>
+					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+				</div>
+				
+				<div class="grid5 sidebar">
+					<div class="box">
+						<h2>Troubleshooting<br />Font-Face Problems</h2>
+						<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+						<h3>Fonts not showing in any browser</h3>
+
+						<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+						<h3>Fonts not loading in iPhone or iPad</h3>
+
+						<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+						<h3>Fonts not loading in Firefox</h3>
+
+						<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+						<h3>Fonts not loading in IE</h3>
+
+						<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+						<h3>Fonts not loading in IE9</h3>
+
+						<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+					</div>
+				</div>
+			</div>
+			
+		</div>
+	
+	</div>
+	<div id="footer">
+		<p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+	</div>
+</div>
+</body>
+</html>
@@ -0,0 +1,619 @@
+<!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: 'avenir_lt_65_mediumbolditalic';
+							}
+		</style>
+
+	<title>Avenir LT 65 Medium BoldItalic 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">
+		Avenir LT 65 Medium BoldItalic	</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>Avenir LT 65 Medium BoldItalic</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 Avenir LT 65 Medium BoldItalic 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 Avenir LT 65 Medium BoldItalic in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+				<div id="glyph_chart">
+			
+																				 <div><p>&amp;#32;</p>&#32;</div>
+																				 <div><p>&amp;#33;</p>&#33;</div>
+																				 <div><p>&amp;#34;</p>&#34;</div>
+																				 <div><p>&amp;#35;</p>&#35;</div>
+																				 <div><p>&amp;#36;</p>&#36;</div>
+																				 <div><p>&amp;#37;</p>&#37;</div>
+																				 <div><p>&amp;#38;</p>&#38;</div>
+																				 <div><p>&amp;#39;</p>&#39;</div>
+																				 <div><p>&amp;#40;</p>&#40;</div>
+																				 <div><p>&amp;#41;</p>&#41;</div>
+																				 <div><p>&amp;#42;</p>&#42;</div>
+																				 <div><p>&amp;#43;</p>&#43;</div>
+																				 <div><p>&amp;#44;</p>&#44;</div>
+																				 <div><p>&amp;#45;</p>&#45;</div>
+																				 <div><p>&amp;#46;</p>&#46;</div>
+																				 <div><p>&amp;#47;</p>&#47;</div>
+																				 <div><p>&amp;#48;</p>&#48;</div>
+																				 <div><p>&amp;#49;</p>&#49;</div>
+																				 <div><p>&amp;#50;</p>&#50;</div>
+																				 <div><p>&amp;#51;</p>&#51;</div>
+																				 <div><p>&amp;#52;</p>&#52;</div>
+																				 <div><p>&amp;#53;</p>&#53;</div>
+																				 <div><p>&amp;#54;</p>&#54;</div>
+																				 <div><p>&amp;#55;</p>&#55;</div>
+																				 <div><p>&amp;#56;</p>&#56;</div>
+																				 <div><p>&amp;#57;</p>&#57;</div>
+																				 <div><p>&amp;#58;</p>&#58;</div>
+																				 <div><p>&amp;#59;</p>&#59;</div>
+																				 <div><p>&amp;#60;</p>&#60;</div>
+																				 <div><p>&amp;#61;</p>&#61;</div>
+																				 <div><p>&amp;#62;</p>&#62;</div>
+																				 <div><p>&amp;#63;</p>&#63;</div>
+																				 <div><p>&amp;#64;</p>&#64;</div>
+																				 <div><p>&amp;#65;</p>&#65;</div>
+																				 <div><p>&amp;#66;</p>&#66;</div>
+																				 <div><p>&amp;#67;</p>&#67;</div>
+																				 <div><p>&amp;#68;</p>&#68;</div>
+																				 <div><p>&amp;#69;</p>&#69;</div>
+																				 <div><p>&amp;#70;</p>&#70;</div>
+																				 <div><p>&amp;#71;</p>&#71;</div>
+																				 <div><p>&amp;#72;</p>&#72;</div>
+																				 <div><p>&amp;#73;</p>&#73;</div>
+																				 <div><p>&amp;#74;</p>&#74;</div>
+																				 <div><p>&amp;#75;</p>&#75;</div>
+																				 <div><p>&amp;#76;</p>&#76;</div>
+																				 <div><p>&amp;#77;</p>&#77;</div>
+																				 <div><p>&amp;#78;</p>&#78;</div>
+																				 <div><p>&amp;#79;</p>&#79;</div>
+																				 <div><p>&amp;#80;</p>&#80;</div>
+																				 <div><p>&amp;#81;</p>&#81;</div>
+																				 <div><p>&amp;#82;</p>&#82;</div>
+																				 <div><p>&amp;#83;</p>&#83;</div>
+																				 <div><p>&amp;#84;</p>&#84;</div>
+																				 <div><p>&amp;#85;</p>&#85;</div>
+																				 <div><p>&amp;#86;</p>&#86;</div>
+																				 <div><p>&amp;#87;</p>&#87;</div>
+																				 <div><p>&amp;#88;</p>&#88;</div>
+																				 <div><p>&amp;#89;</p>&#89;</div>
+																				 <div><p>&amp;#90;</p>&#90;</div>
+																				 <div><p>&amp;#91;</p>&#91;</div>
+																				 <div><p>&amp;#92;</p>&#92;</div>
+																				 <div><p>&amp;#93;</p>&#93;</div>
+																				 <div><p>&amp;#94;</p>&#94;</div>
+																				 <div><p>&amp;#95;</p>&#95;</div>
+																				 <div><p>&amp;#96;</p>&#96;</div>
+																				 <div><p>&amp;#97;</p>&#97;</div>
+																				 <div><p>&amp;#98;</p>&#98;</div>
+																				 <div><p>&amp;#99;</p>&#99;</div>
+																				 <div><p>&amp;#100;</p>&#100;</div>
+																				 <div><p>&amp;#101;</p>&#101;</div>
+																				 <div><p>&amp;#102;</p>&#102;</div>
+																				 <div><p>&amp;#103;</p>&#103;</div>
+																				 <div><p>&amp;#104;</p>&#104;</div>
+																				 <div><p>&amp;#105;</p>&#105;</div>
+																				 <div><p>&amp;#106;</p>&#106;</div>
+																				 <div><p>&amp;#107;</p>&#107;</div>
+																				 <div><p>&amp;#108;</p>&#108;</div>
+																				 <div><p>&amp;#109;</p>&#109;</div>
+																				 <div><p>&amp;#110;</p>&#110;</div>
+																				 <div><p>&amp;#111;</p>&#111;</div>
+																				 <div><p>&amp;#112;</p>&#112;</div>
+																				 <div><p>&amp;#113;</p>&#113;</div>
+																				 <div><p>&amp;#114;</p>&#114;</div>
+																				 <div><p>&amp;#115;</p>&#115;</div>
+																				 <div><p>&amp;#116;</p>&#116;</div>
+																				 <div><p>&amp;#117;</p>&#117;</div>
+																				 <div><p>&amp;#118;</p>&#118;</div>
+																				 <div><p>&amp;#119;</p>&#119;</div>
+																				 <div><p>&amp;#120;</p>&#120;</div>
+																				 <div><p>&amp;#121;</p>&#121;</div>
+																				 <div><p>&amp;#122;</p>&#122;</div>
+																				 <div><p>&amp;#123;</p>&#123;</div>
+																				 <div><p>&amp;#124;</p>&#124;</div>
+																				 <div><p>&amp;#125;</p>&#125;</div>
+																				 <div><p>&amp;#126;</p>&#126;</div>
+																				 <div><p>&amp;#160;</p>&#160;</div>
+																				 <div><p>&amp;#161;</p>&#161;</div>
+																				 <div><p>&amp;#162;</p>&#162;</div>
+																				 <div><p>&amp;#163;</p>&#163;</div>
+																				 <div><p>&amp;#164;</p>&#164;</div>
+																				 <div><p>&amp;#165;</p>&#165;</div>
+																				 <div><p>&amp;#166;</p>&#166;</div>
+																				 <div><p>&amp;#167;</p>&#167;</div>
+																				 <div><p>&amp;#168;</p>&#168;</div>
+																				 <div><p>&amp;#169;</p>&#169;</div>
+																				 <div><p>&amp;#170;</p>&#170;</div>
+																				 <div><p>&amp;#171;</p>&#171;</div>
+																				 <div><p>&amp;#172;</p>&#172;</div>
+																				 <div><p>&amp;#173;</p>&#173;</div>
+																				 <div><p>&amp;#174;</p>&#174;</div>
+																				 <div><p>&amp;#175;</p>&#175;</div>
+																				 <div><p>&amp;#176;</p>&#176;</div>
+																				 <div><p>&amp;#177;</p>&#177;</div>
+																				 <div><p>&amp;#178;</p>&#178;</div>
+																				 <div><p>&amp;#179;</p>&#179;</div>
+																				 <div><p>&amp;#180;</p>&#180;</div>
+																				 <div><p>&amp;#181;</p>&#181;</div>
+																				 <div><p>&amp;#182;</p>&#182;</div>
+																				 <div><p>&amp;#183;</p>&#183;</div>
+																				 <div><p>&amp;#184;</p>&#184;</div>
+																				 <div><p>&amp;#185;</p>&#185;</div>
+																				 <div><p>&amp;#186;</p>&#186;</div>
+																				 <div><p>&amp;#187;</p>&#187;</div>
+																				 <div><p>&amp;#188;</p>&#188;</div>
+																				 <div><p>&amp;#189;</p>&#189;</div>
+																				 <div><p>&amp;#190;</p>&#190;</div>
+																				 <div><p>&amp;#191;</p>&#191;</div>
+																				 <div><p>&amp;#192;</p>&#192;</div>
+																				 <div><p>&amp;#193;</p>&#193;</div>
+																				 <div><p>&amp;#194;</p>&#194;</div>
+																				 <div><p>&amp;#195;</p>&#195;</div>
+																				 <div><p>&amp;#196;</p>&#196;</div>
+																				 <div><p>&amp;#197;</p>&#197;</div>
+																				 <div><p>&amp;#198;</p>&#198;</div>
+																				 <div><p>&amp;#199;</p>&#199;</div>
+																				 <div><p>&amp;#200;</p>&#200;</div>
+																				 <div><p>&amp;#201;</p>&#201;</div>
+																				 <div><p>&amp;#202;</p>&#202;</div>
+																				 <div><p>&amp;#203;</p>&#203;</div>
+																				 <div><p>&amp;#204;</p>&#204;</div>
+																				 <div><p>&amp;#205;</p>&#205;</div>
+																				 <div><p>&amp;#206;</p>&#206;</div>
+																				 <div><p>&amp;#207;</p>&#207;</div>
+																				 <div><p>&amp;#208;</p>&#208;</div>
+																				 <div><p>&amp;#209;</p>&#209;</div>
+																				 <div><p>&amp;#210;</p>&#210;</div>
+																				 <div><p>&amp;#211;</p>&#211;</div>
+																				 <div><p>&amp;#212;</p>&#212;</div>
+																				 <div><p>&amp;#213;</p>&#213;</div>
+																				 <div><p>&amp;#214;</p>&#214;</div>
+																				 <div><p>&amp;#215;</p>&#215;</div>
+																				 <div><p>&amp;#216;</p>&#216;</div>
+																				 <div><p>&amp;#217;</p>&#217;</div>
+																				 <div><p>&amp;#218;</p>&#218;</div>
+																				 <div><p>&amp;#219;</p>&#219;</div>
+																				 <div><p>&amp;#220;</p>&#220;</div>
+																				 <div><p>&amp;#221;</p>&#221;</div>
+																				 <div><p>&amp;#222;</p>&#222;</div>
+																				 <div><p>&amp;#223;</p>&#223;</div>
+																				 <div><p>&amp;#224;</p>&#224;</div>
+																				 <div><p>&amp;#225;</p>&#225;</div>
+																				 <div><p>&amp;#226;</p>&#226;</div>
+																				 <div><p>&amp;#227;</p>&#227;</div>
+																				 <div><p>&amp;#228;</p>&#228;</div>
+																				 <div><p>&amp;#229;</p>&#229;</div>
+																				 <div><p>&amp;#230;</p>&#230;</div>
+																				 <div><p>&amp;#231;</p>&#231;</div>
+																				 <div><p>&amp;#232;</p>&#232;</div>
+																				 <div><p>&amp;#233;</p>&#233;</div>
+																				 <div><p>&amp;#234;</p>&#234;</div>
+																				 <div><p>&amp;#235;</p>&#235;</div>
+																				 <div><p>&amp;#236;</p>&#236;</div>
+																				 <div><p>&amp;#237;</p>&#237;</div>
+																				 <div><p>&amp;#238;</p>&#238;</div>
+																				 <div><p>&amp;#239;</p>&#239;</div>
+																				 <div><p>&amp;#240;</p>&#240;</div>
+																				 <div><p>&amp;#241;</p>&#241;</div>
+																				 <div><p>&amp;#242;</p>&#242;</div>
+																				 <div><p>&amp;#243;</p>&#243;</div>
+																				 <div><p>&amp;#244;</p>&#244;</div>
+																				 <div><p>&amp;#245;</p>&#245;</div>
+																				 <div><p>&amp;#246;</p>&#246;</div>
+																				 <div><p>&amp;#247;</p>&#247;</div>
+																				 <div><p>&amp;#248;</p>&#248;</div>
+																				 <div><p>&amp;#249;</p>&#249;</div>
+																				 <div><p>&amp;#250;</p>&#250;</div>
+																				 <div><p>&amp;#251;</p>&#251;</div>
+																				 <div><p>&amp;#252;</p>&#252;</div>
+																				 <div><p>&amp;#253;</p>&#253;</div>
+																				 <div><p>&amp;#254;</p>&#254;</div>
+																				 <div><p>&amp;#255;</p>&#255;</div>
+																				 <div><p>&amp;#338;</p>&#338;</div>
+																				 <div><p>&amp;#339;</p>&#339;</div>
+																				 <div><p>&amp;#376;</p>&#376;</div>
+																				 <div><p>&amp;#710;</p>&#710;</div>
+																				 <div><p>&amp;#732;</p>&#732;</div>
+																				 <div><p>&amp;#8192;</p>&#8192;</div>
+																				 <div><p>&amp;#8193;</p>&#8193;</div>
+																				 <div><p>&amp;#8194;</p>&#8194;</div>
+																				 <div><p>&amp;#8195;</p>&#8195;</div>
+																				 <div><p>&amp;#8196;</p>&#8196;</div>
+																				 <div><p>&amp;#8197;</p>&#8197;</div>
+																				 <div><p>&amp;#8198;</p>&#8198;</div>
+																				 <div><p>&amp;#8199;</p>&#8199;</div>
+																				 <div><p>&amp;#8200;</p>&#8200;</div>
+																				 <div><p>&amp;#8201;</p>&#8201;</div>
+																				 <div><p>&amp;#8202;</p>&#8202;</div>
+																				 <div><p>&amp;#8208;</p>&#8208;</div>
+																				 <div><p>&amp;#8209;</p>&#8209;</div>
+																				 <div><p>&amp;#8210;</p>&#8210;</div>
+																				 <div><p>&amp;#8211;</p>&#8211;</div>
+																				 <div><p>&amp;#8212;</p>&#8212;</div>
+																				 <div><p>&amp;#8216;</p>&#8216;</div>
+																				 <div><p>&amp;#8217;</p>&#8217;</div>
+																				 <div><p>&amp;#8218;</p>&#8218;</div>
+																				 <div><p>&amp;#8220;</p>&#8220;</div>
+																				 <div><p>&amp;#8221;</p>&#8221;</div>
+																				 <div><p>&amp;#8222;</p>&#8222;</div>
+																				 <div><p>&amp;#8226;</p>&#8226;</div>
+																				 <div><p>&amp;#8230;</p>&#8230;</div>
+																				 <div><p>&amp;#8239;</p>&#8239;</div>
+																				 <div><p>&amp;#8249;</p>&#8249;</div>
+																				 <div><p>&amp;#8250;</p>&#8250;</div>
+																				 <div><p>&amp;#8287;</p>&#8287;</div>
+																				 <div><p>&amp;#8364;</p>&#8364;</div>
+																				 <div><p>&amp;#8482;</p>&#8482;</div>
+																				 <div><p>&amp;#9724;</p>&#9724;</div>
+																				 <div><p>&amp;#64257;</p>&#64257;</div>
+																				 <div><p>&amp;#64258;</p>&#64258;</div>
+																																																</div>	
+				</div>
+		
+		
+			</div>
+		</div>
+		
+		
+		<div id="specs">
+			
+		</div>
+	
+		<div id="installing">
+			<div class="section">
+				<div class="grid7 firstcol">
+					<h1>Installing Webfonts</h1>
+					
+					<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+					
+					<h2>1. Upload your webfonts</h2>
+					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+					
+					<h2>2. Include the webfont stylesheet</h2>
+					<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+<code>
+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+</code>
+
+	<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+	<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+					<h2>3. Modify your own stylesheet</h2>
+					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+<h2>4. Test</h2>
+<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+				</div>
+				
+				<div class="grid5 sidebar">
+					<div class="box">
+						<h2>Troubleshooting<br />Font-Face Problems</h2>
+						<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+						<h3>Fonts not showing in any browser</h3>
+
+						<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+						<h3>Fonts not loading in iPhone or iPad</h3>
+
+						<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+						<h3>Fonts not loading in Firefox</h3>
+
+						<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+						<h3>Fonts not loading in IE</h3>
+
+						<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+						<h3>Fonts not loading in IE9</h3>
+
+						<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+					</div>
+				</div>
+			</div>
+			
+		</div>
+	
+	</div>
+	<div id="footer">
+		<p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+	</div>
+</div>
+</body>
+</html>
@@ -0,0 +1,5 @@
+# Font Squirrel Font-face Generator Configuration File
+# Upload this file to the generator to recreate the settings
+# you used to create these fonts.
+
+{"mode":"optimal","formats":["woff","woff2"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}
@@ -0,0 +1,129 @@
+/*Notes about grid:
+Columns:      12
+Grid Width:   825px
+Column Width: 55px
+Gutter Width: 15px
+-------------------------------*/
+ 
+ 
+ 
+.section 		{margin-bottom: 18px;
+}
+.section:after	{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
+.section 		{*zoom: 1;}
+ 
+.section .firstcolumn,
+.section .firstcol {margin-left: 0;}
+ 
+ 
+/* Border on left hand side of a column. */
+.border {
+  padding-left: 7px;
+  margin-left: 7px;
+  border-left: 1px solid #eee;
+}
+ 
+/* Border with more whitespace, spans one column. */
+.colborder {
+    padding-left: 42px;
+  margin-left: 42px;
+  border-left: 1px solid #eee;
+}
+ 
+
+ 
+/* The Grid Classes */
+.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
+{margin-left: 15px;float: left;display: inline; overflow: hidden;}
+ 
+ 
+.width1, .grid1, .span-1 {width: 55px;}
+.width1_2cols,.grid1_2cols {width: 20px;}
+.width1_3cols,.grid1_3cols  {width: 8px;}
+.width1_4cols,.grid1_4cols  {width: 2px;}
+.input_width1 {width: 49px;}
+ 
+.width2, .grid2, .span-2 {width: 125px;}
+.width2_3cols,.grid2_3cols  {width: 31px;}
+.width2_4cols,.grid2_4cols  {width: 20px;}
+.input_width2 {width: 119px;}
+ 
+.width3, .grid3, .span-3 {width: 195px;}
+.width3_2cols,.grid3_2cols {width: 90px;}
+.width3_4cols,.grid3_4cols  {width: 37px;}
+.input_width3 {width: 189px;}
+ 
+.width4, .grid4, .span-4 {width: 265px;}
+.width4_3cols,.grid4_3cols  {width: 78px;}
+.input_width4 {width: 259px;}
+ 
+.width5, .grid5, .span-5 {width: 335px;}
+.width5_2cols,.grid5_2cols {width: 160px;}
+.width5_3cols,.grid5_3cols  {width: 101px;}
+.width5_4cols,.grid5_4cols  {width: 72px;}
+.input_width5 {width: 329px;}
+ 
+.width6, .grid6, .span-6 {width: 405px;}
+.width6_4cols,.grid6_4cols  {width: 90px;}
+.input_width6 {width: 399px;}
+ 
+.width7, .grid7, .span-7 {width: 475px;}
+.width7_2cols,.grid7_2cols {width: 230px;}
+.width7_3cols,.grid7_3cols  {width: 148px;}
+.width7_4cols,.grid7_4cols  {width: 107px;}
+.input_width7 {width: 469px;}
+ 
+.width8, .grid8, .span-8 {width: 545px;}
+.width8_3cols,.grid8_3cols  {width: 171px;}
+.input_width8 {width: 539px;}
+ 
+.width9, .grid9, .span-9 {width: 615px;}
+.width9_2cols,.grid9_2cols {width: 300px;}
+.width9_4cols,.grid9_4cols  {width: 142px;}
+.input_width9 {width: 609px;}
+ 
+.width10, .grid10, .span-10 {width: 685px;}
+.width10_3cols,.grid10_3cols  {width: 218px;}
+.width10_4cols,.grid10_4cols  {width: 160px;}
+.input_width10 {width: 679px;}
+ 
+.width11, .grid11, .span-11 {width: 755px;}
+.width11_2cols,.grid11_2cols {width: 370px;}
+.width11_3cols,.grid11_3cols  {width: 241px;}
+.width11_4cols,.grid11_4cols  {width: 177px;}
+.input_width11 {width: 749px;}
+ 
+.width12, .grid12, .span-12 {width: 825px;}
+.input_width12 {width: 819px;}
+ 
+/* Subdivided grid spaces */
+.emptycols_left1, .prepend-1 {padding-left: 70px;}
+.emptycols_right1, .append-1 {padding-right: 70px;}
+.emptycols_left2, .prepend-2 {padding-left: 140px;}
+.emptycols_right2, .append-2 {padding-right: 140px;}
+.emptycols_left3, .prepend-3 {padding-left: 210px;}
+.emptycols_right3, .append-3 {padding-right: 210px;}
+.emptycols_left4, .prepend-4 {padding-left: 280px;}
+.emptycols_right4, .append-4 {padding-right: 280px;}
+.emptycols_left5, .prepend-5 {padding-left: 350px;}
+.emptycols_right5, .append-5 {padding-right: 350px;}
+.emptycols_left6, .prepend-6 {padding-left: 420px;}
+.emptycols_right6, .append-6 {padding-right: 420px;}
+.emptycols_left7, .prepend-7 {padding-left: 490px;}
+.emptycols_right7, .append-7 {padding-right: 490px;}
+.emptycols_left8, .prepend-8 {padding-left: 560px;}
+.emptycols_right8, .append-8 {padding-right: 560px;}
+.emptycols_left9, .prepend-9 {padding-left: 630px;}
+.emptycols_right9, .append-9 {padding-right: 630px;}
+.emptycols_left10, .prepend-10 {padding-left: 700px;}
+.emptycols_right10, .append-10 {padding-right: 700px;}
+.emptycols_left11, .prepend-11 {padding-left: 770px;}
+.emptycols_right11, .append-11 {padding-right: 770px;}
+.pull-1 {margin-left: -70px;}
+.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
+.pull-2 {margin-left: -140px;}
+.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
+.pull-3 {margin-left: -210px;}
+.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
+.pull-4 {margin-left: -280px;}
+.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
--- a/Show More
+++ b/Show More