└── books-in-browsers-2011
    ├── js
        ├── script.js
        ├── plugins.js
        ├── libs
        │   ├── respond.min.js
        │   └── modernizr-custom.js
        └── mylibs
        │   ├── driver.js
        │   └── helper.js
    ├── figures
        ├── 3p.png
        ├── 253-2.png
        ├── 253.png
        ├── ibis.png
        ├── myst.jpg
        ├── if-map1.png
        ├── if-map2.png
        ├── mosaic.png
        ├── draft-xml.png
        ├── zork-troll.png
        ├── draft-opener.png
        ├── draft-scene1.png
        ├── zork-opener.png
        ├── underconstruction.gif
        ├── hypertext-fiction-graph.png
        ├── computer-books-storm-industry.png
        └── hands-on-computer-literature.png
    ├── fonts
        ├── wyld.ttf
        ├── wyldi.ttf
        ├── youregone.ttf
        ├── LaurentianStd.otf
        ├── ACaslonPro-Bold.otf
        ├── ACaslonPro-Italic.otf
        ├── ACaslonPro-Regular.otf
        ├── ACaslonPro-Semibold.otf
        ├── ACaslonPro-BoldItalic.otf
        ├── Commodore Angled v1.2.ttf
        ├── League_Gothic-webfont.eot
        ├── League_Gothic-webfont.ttf
        ├── League_Gothic-webfont.woff
        ├── acaslonpro-bold-webfont.eot
        ├── acaslonpro-bold-webfont.ttf
        ├── acaslonpro-bold-webfont.woff
        ├── ACaslonPro-SemiboldItalic.otf
        ├── acaslonpro-italic-webfont.eot
        ├── acaslonpro-italic-webfont.ttf
        ├── acaslonpro-italic-webfont.woff
        ├── acaslonpro-regular-webfont.eot
        ├── acaslonpro-regular-webfont.ttf
        ├── acaslonpro-regular-webfont.woff
        ├── generator_config.txt
        ├── stylesheet.css
        ├── specimen_files
        │   ├── easytabs.js
        │   ├── grid_12-825-55-15.css
        │   └── specimen_stylesheet.css
        ├── League_Gothic-webfont.svg
        └── AdobeCaslonProBold-demo.html
    ├── artist-statement.txt
    ├── robots.txt
    ├── README
    ├── humans.txt
    ├── crossdomain.xml
    ├── widget.html
    ├── proposal.txt
    ├── css
        ├── presentation.css
        ├── style.css
        └── slides.css
    └── index.html


/books-in-browsers-2011/js/script.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/books-in-browsers-2011/figures/3p.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/figures/3p.png


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/wyld.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/wyld.ttf


--------------------------------------------------------------------------------
/books-in-browsers-2011/figures/253-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/figures/253-2.png


--------------------------------------------------------------------------------
/books-in-browsers-2011/figures/253.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/figures/253.png


--------------------------------------------------------------------------------
/books-in-browsers-2011/figures/ibis.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/figures/ibis.png


--------------------------------------------------------------------------------
/books-in-browsers-2011/figures/myst.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/figures/myst.jpg


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/wyldi.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/wyldi.ttf


--------------------------------------------------------------------------------
/books-in-browsers-2011/figures/if-map1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/figures/if-map1.png


--------------------------------------------------------------------------------
/books-in-browsers-2011/figures/if-map2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/figures/if-map2.png


--------------------------------------------------------------------------------
/books-in-browsers-2011/figures/mosaic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/figures/mosaic.png


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/youregone.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/youregone.ttf


--------------------------------------------------------------------------------
/books-in-browsers-2011/artist-statement.txt:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/artist-statement.txt


--------------------------------------------------------------------------------
/books-in-browsers-2011/figures/draft-xml.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/figures/draft-xml.png


--------------------------------------------------------------------------------
/books-in-browsers-2011/figures/zork-troll.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/figures/zork-troll.png


--------------------------------------------------------------------------------
/books-in-browsers-2011/figures/draft-opener.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/figures/draft-opener.png


--------------------------------------------------------------------------------
/books-in-browsers-2011/figures/draft-scene1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/figures/draft-scene1.png


--------------------------------------------------------------------------------
/books-in-browsers-2011/figures/zork-opener.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/figures/zork-opener.png


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/LaurentianStd.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/LaurentianStd.otf


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/ACaslonPro-Bold.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/ACaslonPro-Bold.otf


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/ACaslonPro-Italic.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/ACaslonPro-Italic.otf


--------------------------------------------------------------------------------
/books-in-browsers-2011/robots.txt:
--------------------------------------------------------------------------------
1 | # www.robotstxt.org/
2 | # www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449
3 | 
4 | User-agent: *
5 | 


--------------------------------------------------------------------------------
/books-in-browsers-2011/figures/underconstruction.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/figures/underconstruction.gif


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/ACaslonPro-Regular.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/ACaslonPro-Regular.otf


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/ACaslonPro-Semibold.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/ACaslonPro-Semibold.otf


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/ACaslonPro-BoldItalic.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/ACaslonPro-BoldItalic.otf


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/Commodore Angled v1.2.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/Commodore Angled v1.2.ttf


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/League_Gothic-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/League_Gothic-webfont.eot


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/League_Gothic-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/League_Gothic-webfont.ttf


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/League_Gothic-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/League_Gothic-webfont.woff


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/acaslonpro-bold-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/acaslonpro-bold-webfont.eot


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/acaslonpro-bold-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/acaslonpro-bold-webfont.ttf


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/acaslonpro-bold-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/acaslonpro-bold-webfont.woff


--------------------------------------------------------------------------------
/books-in-browsers-2011/figures/hypertext-fiction-graph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/figures/hypertext-fiction-graph.png


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/ACaslonPro-SemiboldItalic.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/ACaslonPro-SemiboldItalic.otf


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/acaslonpro-italic-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/acaslonpro-italic-webfont.eot


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/acaslonpro-italic-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/acaslonpro-italic-webfont.ttf


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/acaslonpro-italic-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/acaslonpro-italic-webfont.woff


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/acaslonpro-regular-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/acaslonpro-regular-webfont.eot


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/acaslonpro-regular-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/acaslonpro-regular-webfont.ttf


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/acaslonpro-regular-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/fonts/acaslonpro-regular-webfont.woff


--------------------------------------------------------------------------------
/books-in-browsers-2011/figures/computer-books-storm-industry.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/figures/computer-books-storm-industry.png


--------------------------------------------------------------------------------
/books-in-browsers-2011/figures/hands-on-computer-literature.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threepress/html5-tools/HEAD/books-in-browsers-2011/figures/hands-on-computer-literature.png


--------------------------------------------------------------------------------
/books-in-browsers-2011/README:
--------------------------------------------------------------------------------
1 | HTML5/CSS3/JS source code released under the BSD license:
2 | http://www.opensource.org/licenses/bsd-license.php
3 | 
4 | Talk contents and imagery are Creative Commons
5 | Attribution 3.0: http://creativecommons.org/licenses/by/3.0/ 


--------------------------------------------------------------------------------
/books-in-browsers-2011/humans.txt:
--------------------------------------------------------------------------------
 1 | /* the humans responsible & colophon */
 2 | /* humanstxt.org */
 3 | 
 4 | 
 5 | /* TEAM */
 6 |   Author: Liza Daly
 7 |   Site: http://threepress.org/
 8 |   Twitter: @liza
 9 |   Location: Boston
10 | 
11 | /* THANKS */
12 |   Names (& URL): Emily Short, Infocom
13 | 
14 | /* SITE */
15 |   Standards: HTML5, CSS3, EPUB 3
16 |   Components: Modernizr, jQuery
17 |   Software: JS 
18 | 


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/generator_config.txt:
--------------------------------------------------------------------------------
1 | # Font Squirrel Font-face Generator Configuration File
2 | # Upload this file to the generator to recreate the settings
3 | # you used to create these fonts.
4 | 
5 | {"mode":"basic","formats":["ttf","woff","eot_lite","svg"],"options_hinting":"Y","options_vertical_metrics":"Y","add_space_glyphs":"Y","add_hyphen_glyphs":"Y","fallback":"none","options_subset":"basic","subset_custom":"","subset_custom_range":"","css_format":"fontspring","filename_suffix":"webfont","emsquare":"2048","spacing_adjustment":"0","gasp_setting":"xy"}


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/stylesheet.css:
--------------------------------------------------------------------------------
 1 | /* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 18, 2011 09:05:20 PM America/New_York */
 2 | 
 3 | 
 4 | 
 5 | @font-face {
 6 |     font-family: 'LeagueGothicRegular';
 7 |     src: url('League_Gothic-webfont.eot');
 8 |     src: url('League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
 9 |          url('League_Gothic-webfont.woff') format('woff'),
10 |          url('League_Gothic-webfont.ttf') format('truetype'),
11 |          url('League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
12 |     font-weight: normal;
13 |     font-style: normal;
14 | 
15 | }
16 | 
17 | 


--------------------------------------------------------------------------------
/books-in-browsers-2011/crossdomain.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
 3 | <cross-domain-policy>
 4 | 
 5 | 
 6 | <!-- Read this: www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html -->
 7 | 
 8 | <!-- Most restrictive policy: -->
 9 | 	<site-control permitted-cross-domain-policies="none"/>
10 | 
11 | 
12 | 
13 | <!-- Least restrictive policy: -->
14 | <!--
15 | 	<site-control permitted-cross-domain-policies="all"/>
16 | 	<allow-access-from domain="*" to-ports="*" secure="false"/>
17 | 	<allow-http-request-headers-from domain="*" headers="*" secure="false"/>
18 | -->
19 | <!--
20 |   If you host a crossdomain.xml file with allow-access-from domain="*"
21 |   and don’t understand all of the points described here, you probably
22 |   have a nasty security vulnerability. ~ simon willison
23 | -->
24 | 
25 | </cross-domain-policy>
26 | 


--------------------------------------------------------------------------------
/books-in-browsers-2011/widget.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <title>First Draft of the Revolution: widget</title>
 5 |     <style type="text/css">
 6 |       iframe {
 7 |        border: 1px solid gray;
 8 |        margin: auto;
 9 |        display: block;
10 |       }
11 |     </style>
12 |   </head>
13 | <body>
14 | 
15 |   <h1>Example of an embeddable widget for an HTML presentation</h1>
16 |   <h2>(requires support for CSS3 transforms)</h2>
17 |   <p>Use right/left arrows to navigate. Only designed for Safari (Chrome will be slow).</p>
18 |   <iframe src="index.html" width="512" height="384">
19 |   </iframe>
20 |   <script src="js/libs/jquery-1.6.2.min.js"></script>
21 |   <script type="text/javascript">
22 |     $(document).ready(function () {
23 |       $('iframe').contents().find('html').css('-webkit-transform', 'scale(0.5) translate3d(-512px, -384px, 0)');
24 |     });
25 |   </script>
26 | </body>
27 | </html>
28 | 
29 | 


--------------------------------------------------------------------------------
/books-in-browsers-2011/js/plugins.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // usage: log('inside coolFunc', this, arguments);
 3 | // paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
 4 | window.log = function(){
 5 |   log.history = log.history || [];   // store logs to an array for reference
 6 |   log.history.push(arguments);
 7 |   if(this.console) {
 8 |     arguments.callee = arguments.callee.caller;
 9 |     var newarr = [].slice.call(arguments);
10 |     (typeof console.log === 'object' ? log.apply.call(console.log, console, newarr) : console.log.apply(console, newarr));
11 |   }
12 | };
13 | 
14 | // make it safe to use console.log always
15 | (function(b){function c(){}for(var d="assert,clear,count,debug,dir,dirxml,error,exception,firebug,group,groupCollapsed,groupEnd,info,log,memoryProfile,memoryProfileEnd,profile,profileEnd,table,time,timeEnd,timeStamp,trace,warn".split(","),a;a=d.pop();){b[a]=b[a]||c}})((function(){try
16 | {console.log();return window.console;}catch(err){return window.console={};}})());
17 | 
18 | 
19 | // place any jQuery/helper plugins in here, instead of separate, slower script files.
20 | 
21 | 


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/specimen_files/easytabs.js:
--------------------------------------------------------------------------------
1 | (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;}
2 | if(typeof param.defaultContent=="number")
3 | {var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
4 | $(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();}
5 | 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")
6 | {$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
7 | $(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);


--------------------------------------------------------------------------------
/books-in-browsers-2011/proposal.txt:
--------------------------------------------------------------------------------
 1 |   "Will you read me a story?"                                      
 2 | 
 3 |   "Read you a story? What fun would that be? I've                  
 4 |   got a better idea: let's tell a story together."
 5 | 
 6 |   - PHOTOPIA (2000), Adam Cadre
 7 | 
 8 | Transforming digital text into interactive narrative was one of the
 9 | first impulses in computing. Limitations in graphics meant that the
10 | very first computer games, distributed via the early internet, were
11 | text-based (cf. Colossal Cave, 1975). 
12 | 
13 | Text-based gaming offers a wealth of experimentation, but typing
14 | commands at a computer can be frustrating and is seen as an obsolete
15 | form of interaction.  While hypertext fiction has existed even
16 | before the web, it has largely been relegated to the academic world;
17 | such works are considered experimental, not meant to be enjoyed as
18 | narrative fiction. The interactive narratives that have found the
19 | widest audience appeal have been crude choose-your-own-adventure
20 | branching storylines. Many reject this conceit as a meaningful form of
21 | expression. "Art seeks to lead you to an inevitable conclusion, not a
22 | smorgasbord of choices," writes Roger Ebert in one of his many
23 | critiques of videogames as art. Ebert's overall position is probably
24 | short-sighted, but his point about the importance of authorial intent
25 | is valid and should be explored.
26 | 
27 | Following the model of a content author paired with a technology 
28 | implementor, I commissioned an interactive piece from game designer
29 | Emily Short with three constraints: it must be primarily textual, have
30 | a clear authorial vision, and use a simple touch-based interface that
31 | could be implemented in an EPUB 3 device or web browser.
32 | 
33 | _First Draft of the Revolution_ is an epistolary story set in a
34 | parallel history in which written documents are magically linked. The
35 | reader is presented with each letter in sequence, where each sentence
36 | fades in sequentially to reflect the "magical" transition between sender and
37 | receiver. The letters are at first incomplete (or impetuous) and cannot
38 | be sent as-is. User interface clues (such as red text) hint which passages need
39 | to be revised; tapping on those passages allows the reader to edit
40 | or erase them altogether. While the message of each letter is
41 | authorially fixed, readers control the tone and how much is revealed
42 | in each response (while learning the backstory and motivations behind
43 | each narrator's words). At the time of this writing, _First
44 | Draft of the Revolution_ is still being finalized, but we intend to
45 | publish it as a free EPUB 3 book: to put it distinctly among other
46 | books, not games. 
47 | 
48 | The presentation will cover the above topics briefly: the problems
49 | inherent in interactive narrative, a demonstration of the work, and a
50 | release of an open source framework for creating further stories with
51 | the engine. I will argue that the joy of discovery, of uncovering
52 | hidden pathways through narrative, will be the key motivator for
53 | readers of future interactive works. 
54 | 


--------------------------------------------------------------------------------
/books-in-browsers-2011/js/libs/respond.min.js:
--------------------------------------------------------------------------------
1 | /*
2 |  * respond.js - A small and fast polyfill for min/max-width CSS3 Media Queries
3 |  * Copyright 2011, Scott Jehl, scottjehl.com
4 |  * Dual licensed under the MIT or GPL Version 2 licenses. 
5 |  * Usage: Check out the readme file or github.com/scottjehl/respond
6 | */
7 | (function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length;for(var z=0;z<w;z++){var y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(!/^([a-zA-Z]+?:(\/\/)?(www\.)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}else{o[x]=true}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media ([^\{]+)\{([\S\s]+?)(?=\}[\s]*\/\*\/mediaquery\*\/)/gmi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!H&&x;if(v.length){v+="/"}if(y){H=1}for(var B=0;B<H;B++){var C;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}var z=C.split(","),F=z.length;for(var A=0;A<F;A++){var D=z[A];i.push({media:D.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/\(min\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1),maxw:D.match(/\(max\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var y in z){var G=u.createElement("style"),A=z[y].join("\n");G.type="text/css";G.media=y;if(G.styleSheet){G.styleSheet.cssText=A}else{G.appendChild(u.createTextNode(A))}C.appendChild(G);p.push(G)}f.insertBefore(C,B.nextSibling)},n=function(v,x){var w=c();if(!w){return}w.open("GET",v,true);w.onreadystatechange=function(){if(w.readyState!=4||w.status!=200&&w.status!=304){return}x(w.responseText)};if(w.readyState==4){return}w.send()},c=(function(){var v=false,w=[function(){return new ActiveXObject("Microsoft.XMLHTTP")},function(){return new ActiveXObject("Msxml3.XMLHTTP")},function(){return new ActiveXObject("Msxml2.XMLHTTP")},function(){return new XMLHttpRequest()}],y=w.length;while(y--){try{v=w[y]()}catch(x){continue}break}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addEventListener){e.addEventListener("resize",s,false)}else{if(e.attachEvent){e.attachEvent("onresize",s)}}})(this,(function(f){if(f.matchMedia){return true}var e,i=document,c=i.documentElement,g=c.firstElementChild||c.firstChild,h=!i.body,d=i.body||i.createElement("body"),b=i.createElement("div"),a="only all";b.id="mq-test-1";b.style.cssText="position:absolute;top:-99em";d.appendChild(b);b.innerHTML='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertBefore(d,g)}b.removeChild(b.firstChild);e=b.offsetWidth==9;if(h){c.removeChild(d)}else{d.removeChild(b)}return e})(this));


--------------------------------------------------------------------------------
/books-in-browsers-2011/js/mylibs/driver.js:
--------------------------------------------------------------------------------
  1 | /*jslint bitwise: true, browser: true, eqeqeq: true, immed: true, newcap: true, regexp: true, white: true, nomen: false, onevar: false, undef: true, plusplus: false, white: true, indent: 2 */
  2 | /*global window $ */
  3 | 
  4 | var last_slide = 35;
  5 | 
  6 | function setDeceleratingTimeout(callback, factor, times) {
  7 |   var internalCallback = function (t, counter) {
  8 |     return function ()  {
  9 |       if (--t > 0) {
 10 |         window.setTimeout(internalCallback, ++counter * factor);
 11 |         callback();
 12 |       }
 13 |       else {
 14 |       }
 15 |     }
 16 |   }(times, 0);
 17 |   window.setTimeout(internalCallback, factor);
 18 | };
 19 | 
 20 |   
 21 | var driver = (function () {
 22 |   // dependencies
 23 |   // end dependencies
 24 |   
 25 |   // private data
 26 |   var current_slide_number = 0,
 27 |   // private methods
 28 | 
 29 |   listen_for_keys = function (e) {
 30 |     if (e.altKey || e.ctrlKey || e.metaKey) {
 31 |       return;
 32 |     }
 33 | 
 34 |     switch (e.which) {
 35 | 
 36 |     case 9: // Tab = +1; Shift + Tab = -1
 37 |       break;
 38 |       
 39 |     case 13: // Enter
 40 |       break;
 41 |       
 42 |     case 27: // Esc
 43 |       break;
 44 |       
 45 |     case 33: // PgUp
 46 |     case 38: // Up
 47 |     case 37: // Left
 48 |     case 72: // h
 49 |     case 75: // k
 50 |       e.preventDefault();
 51 |       $('#container').removeClass('slide' + current_slide_number);      
 52 |       current_slide_number--;
 53 |       change_slide();
 54 |       break;
 55 |       
 56 |     case 34: // PgDown
 57 |     case 40: // Down
 58 |     case 39: // Right
 59 |     case 76: // l
 60 |     case 74: // j
 61 |       e.preventDefault();
 62 |       current_slide_number++;
 63 |       change_slide();
 64 |       break;
 65 |       
 66 |     case 36: // Home
 67 |       e.preventDefault();
 68 |       
 69 |       current_slide_number = 0;
 70 |       // Go to first slide
 71 |       break;
 72 |       
 73 |     case 35: // End
 74 |       e.preventDefault();
 75 |       
 76 |       // Go to last slide
 77 |       break;
 78 |       
 79 |     case 32: // Space = +1; Shift + Space = -1
 80 |       break;
 81 |       
 82 |     default:
 83 |       // Behave as usual
 84 |     }
 85 |   },
 86 | 
 87 |   
 88 |   // end private methods
 89 |   
 90 |   // public methods
 91 |   
 92 |   change_slide = function () {
 93 |     console.log("Transitioning to slide " + current_slide_number);
 94 |     var el = '[data-slide="' + current_slide_number + '"]';
 95 | 
 96 |     // Update the global slider counter for CSS
 97 |     $('#container').attr('data-currentslide', current_slide_number);
 98 |     $('#container').addClass('slide' + current_slide_number);
 99 | 
100 |     // Make the slide visible
101 |     $(el).addClass('visible').css('visibility', 'visible'); 
102 | 
103 |     // Events that happen instantly (not on a webkit-transition)
104 |     if (current_slide_number === last_slide) {
105 |       current_slide_number = 1;
106 |       $('.slide').css('visibility', 'hidden');
107 |       $.each($('#container').attr('class').split(' '), function (index, item) {
108 |         $('#container').removeClass(item);
109 |       });
110 |       $('[data-slide="2"]').hide().css('visibility', 'visible').fadeIn('slow');
111 |       $('#thanks').css('visibility', 'visible');
112 | 
113 |       change_slide();
114 |     }    
115 |   },
116 | 
117 |   initialize = function () {
118 | 
119 |     // Listen for keyboard events
120 |     $(document).bind('keydown', listen_for_keys);
121 | 
122 |     console.log("Initalized");
123 |   };
124 |   // end public methods
125 |   
126 |   // one-time init procedures
127 | 
128 |   // public API
129 |   return {
130 |     initialize: initialize
131 |   };
132 | }());
133 | 


--------------------------------------------------------------------------------
/books-in-browsers-2011/css/presentation.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |     overflow: hidden;
  3 |     width: 1024px;
  4 |     height: 768px;
  5 | }
  6 | body {
  7 |     width: 1024px;
  8 |     height: 768px;
  9 |     text-rendering: optimizeLegibility;
 10 |     font-family: "Adobe Caslon Pro";
 11 |     font-variant-ligatures: common-ligatures additional-ligatures historical-ligatures;
 12 |     overflow: hidden;
 13 |     background: white;
 14 | }
 15 | h2, h3 {
 16 |     font-weight: normal;
 17 | }
 18 | #container {
 19 | /*    overflow: hidden; */
 20 | }
 21 | 
 22 | /* Each slide fits into the viewport, but will be positioned absolutely to appear wherever we want in the canvas */
 23 | .slide {
 24 |     width: 1024px;
 25 |     height: 768px;
 26 |     position: absolute;
 27 |     visibility: hidden;
 28 |     -webkit-transform: translate3d(0,0,0);
 29 | }
 30 | 
 31 | /* Default text for a slide */
 32 | .slide p {
 33 | 
 34 |     font-size: 50px;
 35 |     text-align: center;
 36 |     padding: 2em;
 37 | }
 38 | 
 39 | .slideable {
 40 |     -webkit-transition: -webkit-transform .5s ease-in-out, opacity .5s;
 41 | }
 42 | 
 43 | .slideable-fast {
 44 |     -webkit-transition: -webkit-transform .3s ease-in-out, opacity .3s;
 45 | }
 46 | 
 47 | .more-endings {
 48 |     margin-top: 5em;
 49 |     font-size: 120px;
 50 | }
 51 | 
 52 | /* The current slide is the one visible in the viewport */
 53 | .current-slide {
 54 | }
 55 | 
 56 | /* General styles */
 57 | .center {
 58 |     text-align: center;
 59 | }
 60 | .chunk {
 61 |     font-family: "ChunkFive";
 62 | }
 63 | .comicsans {
 64 |     font-family: "Comic Sans", "Marker Felt";
 65 | }
 66 | .bigcaslon {
 67 |     font-family: "Big Caslon";
 68 | }
 69 | .c17 {
 70 |     font-family: "Wyld"; 
 71 | }
 72 | .c64 {
 73 |     font-family: "Commodore 64 Angled";
 74 | }
 75 | .c64 p, .c64 h1 {
 76 |     text-align: left !important;
 77 |     font-size: 40px; 
 78 |     padding: 1em;
 79 | 
 80 | }
 81 | .d80s {
 82 |     font-family: "YoureGone-Regular";
 83 | }
 84 | .league {
 85 |     font-family: "LeagueGothicRegular";
 86 | }
 87 | 
 88 | .italic {
 89 |     font-style: italic;
 90 | }
 91 | .visible {
 92 |     visibility: visible;
 93 | }
 94 | /* Die hot pink */
 95 | ::-moz-selection { background: none; color: text-shadow: none; }
 96 | ::selection { background: none; text-shadow: none; }
 97 | 
 98 | /* Fonts 
 99 | 
100 | @font-face {
101 |     font-family: "Commodore 64 Angled";
102 |     font-style: normal;
103 |     src: url("../fonts/Commodore Angled v1.2.ttf");
104 | 
105 | }
106 | 
107 | @font-face {
108 |     font-family: "Wyld";
109 |     font-style: italic;
110 |     src: url("../fonts/wyldi.ttf");
111 | }
112 | @font-face {
113 |     font-family: "Wyld";
114 |     font-weight: normal;
115 |     src: url("../fonts/wyld.ttf");
116 | }
117 | 
118 | 
119 | @font-face {
120 |     font-family: 'AdobeCaslonPro';
121 |     src: url('../fonts/ACaslonPro-Regular.otf');
122 |     font-weight: normal;
123 |     font-style: normal;
124 | 
125 | }
126 | 
127 | @font-face {
128 |     font-family: 'AdobeCaslonPro';
129 |     src: url('../fonts/ACaslonPro-Bold.otf');
130 |     font-weight: bold;
131 |     font-style: normal;
132 | 
133 | }
134 | 
135 | @font-face {
136 |     font-family: 'AdobeCaslonPro';
137 |     src: url('../fonts/ACaslonPro-Italic.otf');
138 |     font-weight: normal;
139 |     font-style: italic;
140 | 
141 | }
142 | 
143 | @font-face {
144 |     font-family: 'YoureGone-Regular';
145 |     src: url('../fonts/youregone.ttf');
146 |     font-weight: normal;
147 |     font-style: normal;
148 | 
149 | }
150 | @font-face {
151 |     font-family: 'LeagueGothicRegular';
152 |     src: url('../fonts/League_Gothic-webfont.eot');
153 |     src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
154 |          url('../fonts/League_Gothic-webfont.woff') format('woff'),
155 |          url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
156 |          url('../fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
157 |     font-weight: normal;
158 |     font-style: normal;
159 | 
160 | }
161 | 
162 | */


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/specimen_files/grid_12-825-55-15.css:
--------------------------------------------------------------------------------
  1 | /*Notes about grid:
  2 | Columns:      12
  3 | Grid Width:   825px
  4 | Column Width: 55px
  5 | Gutter Width: 15px
  6 | -------------------------------*/
  7 |  
  8 |  
  9 |  
 10 | .section 		{margin-bottom: 18px;
 11 | }
 12 | .section:after	{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
 13 | .section 		{*zoom: 1;}
 14 |  
 15 | .section .firstcolumn,
 16 | .section .firstcol {margin-left: 0;}
 17 |  
 18 |  
 19 | /* Border on left hand side of a column. */
 20 | .border {
 21 |   padding-left: 7px;
 22 |   margin-left: 7px;
 23 |   border-left: 1px solid #eee;
 24 | }
 25 |  
 26 | /* Border with more whitespace, spans one column. */
 27 | .colborder {
 28 |     padding-left: 42px;
 29 |   margin-left: 42px;
 30 |   border-left: 1px solid #eee;
 31 | }
 32 |  
 33 | 
 34 |  
 35 | /* The Grid Classes */
 36 | .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
 37 | {margin-left: 15px;float: left;display: inline; overflow: hidden;}
 38 |  
 39 |  
 40 | .width1, .grid1, .span-1 {width: 55px;}
 41 | .width1_2cols,.grid1_2cols {width: 20px;}
 42 | .width1_3cols,.grid1_3cols  {width: 8px;}
 43 | .width1_4cols,.grid1_4cols  {width: 2px;}
 44 | .input_width1 {width: 49px;}
 45 |  
 46 | .width2, .grid2, .span-2 {width: 125px;}
 47 | .width2_3cols,.grid2_3cols  {width: 31px;}
 48 | .width2_4cols,.grid2_4cols  {width: 20px;}
 49 | .input_width2 {width: 119px;}
 50 |  
 51 | .width3, .grid3, .span-3 {width: 195px;}
 52 | .width3_2cols,.grid3_2cols {width: 90px;}
 53 | .width3_4cols,.grid3_4cols  {width: 37px;}
 54 | .input_width3 {width: 189px;}
 55 |  
 56 | .width4, .grid4, .span-4 {width: 265px;}
 57 | .width4_3cols,.grid4_3cols  {width: 78px;}
 58 | .input_width4 {width: 259px;}
 59 |  
 60 | .width5, .grid5, .span-5 {width: 335px;}
 61 | .width5_2cols,.grid5_2cols {width: 160px;}
 62 | .width5_3cols,.grid5_3cols  {width: 101px;}
 63 | .width5_4cols,.grid5_4cols  {width: 72px;}
 64 | .input_width5 {width: 329px;}
 65 |  
 66 | .width6, .grid6, .span-6 {width: 405px;}
 67 | .width6_4cols,.grid6_4cols  {width: 90px;}
 68 | .input_width6 {width: 399px;}
 69 |  
 70 | .width7, .grid7, .span-7 {width: 475px;}
 71 | .width7_2cols,.grid7_2cols {width: 230px;}
 72 | .width7_3cols,.grid7_3cols  {width: 148px;}
 73 | .width7_4cols,.grid7_4cols  {width: 107px;}
 74 | .input_width7 {width: 469px;}
 75 |  
 76 | .width8, .grid8, .span-8 {width: 545px;}
 77 | .width8_3cols,.grid8_3cols  {width: 171px;}
 78 | .input_width8 {width: 539px;}
 79 |  
 80 | .width9, .grid9, .span-9 {width: 615px;}
 81 | .width9_2cols,.grid9_2cols {width: 300px;}
 82 | .width9_4cols,.grid9_4cols  {width: 142px;}
 83 | .input_width9 {width: 609px;}
 84 |  
 85 | .width10, .grid10, .span-10 {width: 685px;}
 86 | .width10_3cols,.grid10_3cols  {width: 218px;}
 87 | .width10_4cols,.grid10_4cols  {width: 160px;}
 88 | .input_width10 {width: 679px;}
 89 |  
 90 | .width11, .grid11, .span-11 {width: 755px;}
 91 | .width11_2cols,.grid11_2cols {width: 370px;}
 92 | .width11_3cols,.grid11_3cols  {width: 241px;}
 93 | .width11_4cols,.grid11_4cols  {width: 177px;}
 94 | .input_width11 {width: 749px;}
 95 |  
 96 | .width12, .grid12, .span-12 {width: 825px;}
 97 | .input_width12 {width: 819px;}
 98 |  
 99 | /* Subdivided grid spaces */
100 | .emptycols_left1, .prepend-1 {padding-left: 70px;}
101 | .emptycols_right1, .append-1 {padding-right: 70px;}
102 | .emptycols_left2, .prepend-2 {padding-left: 140px;}
103 | .emptycols_right2, .append-2 {padding-right: 140px;}
104 | .emptycols_left3, .prepend-3 {padding-left: 210px;}
105 | .emptycols_right3, .append-3 {padding-right: 210px;}
106 | .emptycols_left4, .prepend-4 {padding-left: 280px;}
107 | .emptycols_right4, .append-4 {padding-right: 280px;}
108 | .emptycols_left5, .prepend-5 {padding-left: 350px;}
109 | .emptycols_right5, .append-5 {padding-right: 350px;}
110 | .emptycols_left6, .prepend-6 {padding-left: 420px;}
111 | .emptycols_right6, .append-6 {padding-right: 420px;}
112 | .emptycols_left7, .prepend-7 {padding-left: 490px;}
113 | .emptycols_right7, .append-7 {padding-right: 490px;}
114 | .emptycols_left8, .prepend-8 {padding-left: 560px;}
115 | .emptycols_right8, .append-8 {padding-right: 560px;}
116 | .emptycols_left9, .prepend-9 {padding-left: 630px;}
117 | .emptycols_right9, .append-9 {padding-right: 630px;}
118 | .emptycols_left10, .prepend-10 {padding-left: 700px;}
119 | .emptycols_right10, .append-10 {padding-right: 700px;}
120 | .emptycols_left11, .prepend-11 {padding-left: 770px;}
121 | .emptycols_right11, .append-11 {padding-right: 770px;}
122 | .pull-1 {margin-left: -70px;}
123 | .push-1 {margin-right: -70px;margin-left: 18px;float: right;}
124 | .pull-2 {margin-left: -140px;}
125 | .push-2 {margin-right: -140px;margin-left: 18px;float: right;}
126 | .pull-3 {margin-left: -210px;}
127 | .push-3 {margin-right: -210px;margin-left: 18px;float: right;}
128 | .pull-4 {margin-left: -280px;}
129 | .push-4 {margin-right: -280px;margin-left: 18px;float: right;}


--------------------------------------------------------------------------------
/books-in-browsers-2011/js/mylibs/helper.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * MBP - Mobile boilerplate helper functions
  3 |  */
  4 | (function(document){
  5 | 
  6 | window.MBP = window.MBP || {}; 
  7 | 
  8 | // Fix for iPhone viewport scale bug 
  9 | // http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
 10 | 
 11 | MBP.viewportmeta = document.querySelector && document.querySelector('meta[name="viewport"]');
 12 | MBP.ua = navigator.userAgent;
 13 | 
 14 | MBP.scaleFix = function () {
 15 |   if (MBP.viewportmeta && /iPhone|iPad/.test(MBP.ua) && !/Opera Mini/.test(MBP.ua)) {
 16 |     MBP.viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
 17 |     document.addEventListener("gesturestart", MBP.gestureStart, false);
 18 |   }
 19 | };
 20 | MBP.gestureStart = function () {
 21 |     MBP.viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
 22 | };
 23 | 
 24 | 
 25 | // Hide URL Bar for iOS and Android by Scott Jehl
 26 | // https://gist.github.com/1183357
 27 | 
 28 | MBP.hideUrlBar = function () {
 29 | 	var win = window,
 30 | 		doc = win.document;
 31 | 
 32 | 	// If there's a hash, or addEventListener is undefined, stop here
 33 | 	if( !location.hash || !win.addEventListener ){
 34 | 
 35 | 		//scroll to 1
 36 | 		window.scrollTo( 0, 1 );
 37 | 		var scrollTop = 1,
 38 | 
 39 | 		//reset to 0 on bodyready, if needed
 40 | 		bodycheck = setInterval(function(){
 41 | 			if( doc.body ){
 42 | 				clearInterval( bodycheck );
 43 | 				scrollTop = "scrollTop" in doc.body ? doc.body.scrollTop : 1;
 44 | 				win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
 45 | 			}	
 46 | 		}, 15 );
 47 | 
 48 | 		win.addEventListener( "load", function(){
 49 | 			setTimeout(function(){
 50 | 				//reset to hide addr bar at onload
 51 | 				win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
 52 | 			}, 0);
 53 | 		}, false );
 54 | 	}
 55 | };
 56 | 
 57 | 
 58 | // Fast Buttons - read wiki below before using
 59 | // https://github.com/shichuan/mobile-html5-boilerplate/wiki/JavaScript-Helper
 60 | 
 61 | MBP.fastButton = function (element, handler) {
 62 |     this.element = element;
 63 |     this.handler = handler;
 64 |     if (element.addEventListener) {
 65 |       element.addEventListener('touchstart', this, false);
 66 |       element.addEventListener('click', this, false);
 67 |     }
 68 | };
 69 | 
 70 | MBP.fastButton.prototype.handleEvent = function(event) {
 71 |     switch (event.type) {
 72 |         case 'touchstart': this.onTouchStart(event); break;
 73 |         case 'touchmove': this.onTouchMove(event); break;
 74 |         case 'touchend': this.onClick(event); break;
 75 |         case 'click': this.onClick(event); break;
 76 |     }
 77 | };
 78 | 
 79 | MBP.fastButton.prototype.onTouchStart = function(event) {
 80 |     event.stopPropagation();
 81 |     this.element.addEventListener('touchend', this, false);
 82 |     document.body.addEventListener('touchmove', this, false);
 83 |     this.startX = event.touches[0].clientX;
 84 |     this.startY = event.touches[0].clientY;
 85 |     this.element.style.backgroundColor = "rgba(0,0,0,.7)";
 86 | };
 87 | 
 88 | MBP.fastButton.prototype.onTouchMove = function(event) {
 89 |     if(Math.abs(event.touches[0].clientX - this.startX) > 10 || 
 90 |        Math.abs(event.touches[0].clientY - this.startY) > 10    ) {
 91 |         this.reset();
 92 |     }
 93 | };
 94 | 
 95 | MBP.fastButton.prototype.onClick = function(event) {
 96 |     event.stopPropagation();
 97 |     this.reset();
 98 |     this.handler(event);
 99 |     if(event.type == 'touchend') {
100 |         MBP.preventGhostClick(this.startX, this.startY);
101 |     }
102 |     this.element.style.backgroundColor = "";
103 | };
104 | 
105 | MBP.fastButton.prototype.reset = function() {
106 |     this.element.removeEventListener('touchend', this, false);
107 |     document.body.removeEventListener('touchmove', this, false);
108 |     this.element.style.backgroundColor = "";
109 | };
110 | 
111 | MBP.preventGhostClick = function (x, y) {
112 |     MBP.coords.push(x, y);
113 |     window.setTimeout(function (){
114 |         MBP.coords.splice(0, 2);
115 |     }, 2500);
116 | };
117 | 
118 | MBP.ghostClickHandler = function (event) {
119 |     for(var i = 0, len = MBP.coords.length; i < len; i += 2) {
120 |         var x = MBP.coords[i];
121 |         var y = MBP.coords[i + 1];
122 |         if(Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
123 |             event.stopPropagation();
124 |             event.preventDefault();
125 |         }
126 |     }
127 | };
128 | 
129 | if (document.addEventListener) {
130 |     document.addEventListener('click', MBP.ghostClickHandler, true);
131 | }
132 |                             
133 | MBP.coords = [];
134 | 
135 | 
136 | // iOS Startup Image
137 | // https://github.com/shichuan/mobile-html5-boilerplate/issues#issue/2
138 | 
139 | MBP.splash = function () {
140 |     var filename = navigator.platform === 'iPad' ? 'h/' : 'l/';
141 |     document.write('<link rel="apple-touch-startup-image" href="/img/' + filename + 'splash.png" />' );
142 | };
143 | 
144 | 
145 | // Autogrow
146 | // http://googlecode.blogspot.com/2009/07/gmail-for-mobile-html5-series.html
147 | 
148 | MBP.autogrow = function (element, lh) {
149 | 
150 |     function handler(e){
151 |         var newHeight = this.scrollHeight,
152 |             currentHeight = this.clientHeight;
153 |         if (newHeight > currentHeight) {
154 |             this.style.height = newHeight + 3 * textLineHeight + "px";
155 |         }
156 |     }
157 | 
158 |     var setLineHeight = (lh) ? lh : 12,
159 |         textLineHeight = element.currentStyle ? element.currentStyle.lineHeight : 
160 |                          getComputedStyle(element, null).lineHeight;
161 | 
162 |     textLineHeight = (textLineHeight.indexOf("px") == -1) ? setLineHeight :
163 |                      parseInt(textLineHeight, 10);
164 | 
165 |     element.style.overflow = "hidden";
166 |     element.addEventListener ? element.addEventListener('keyup', handler, false) :
167 |                                element.attachEvent('onkeyup', handler);
168 | };
169 | 
170 | })(document);
171 | 
172 | 


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/specimen_files/specimen_stylesheet.css:
--------------------------------------------------------------------------------
  1 | @import url('grid_12-825-55-15.css');
  2 | 
  3 | /*  
  4 | 	CSS Reset by Eric Meyer - Released under Public Domain
  5 |     http://meyerweb.com/eric/tools/css/reset/
  6 | */
  7 | html, body, div, span, applet, object, iframe,
  8 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  9 | a, abbr, acronym, address, big, cite, code,
 10 | del, dfn, em, font, img, ins, kbd, q, s, samp,
 11 | small, strike, strong, sub, sup, tt, var,
 12 | b, u, i, center, dl, dt, dd, ol, ul, li,
 13 | fieldset, form, label, legend, table, 
 14 | caption, tbody, tfoot, thead, tr, th, td 
 15 |                   {margin: 0;padding: 0;border: 0;outline: 0;
 16 |                   font-size: 100%;vertical-align: baseline;
 17 |                   background: transparent;}
 18 | body              {line-height: 1;}
 19 | ol, ul            {list-style: none;}
 20 | blockquote, q     {quotes: none;}
 21 | blockquote:before, blockquote:after,
 22 | q:before, q:after {content: '';	content: none;}
 23 | :focus            {outline: 0;}
 24 | ins               {text-decoration: none;}
 25 | del               {text-decoration: line-through;}
 26 | table             {border-collapse: collapse;border-spacing: 0;}
 27 | 
 28 | 
 29 | 
 30 | 
 31 | body {
 32 | 	color: #000;
 33 | 	background-color: #dcdcdc;
 34 | }
 35 | 
 36 | a {
 37 | 	text-decoration: none;
 38 | 	color: #1883ba;
 39 | }
 40 | 
 41 | h1{
 42 | 	font-size: 32px;
 43 | 	font-weight: normal;
 44 | 	font-style: normal;
 45 | 	margin-bottom: 18px;
 46 | }
 47 | 
 48 | h2{
 49 | 	font-size: 18px;
 50 | }
 51 | 
 52 | #container {
 53 | 	width: 865px;
 54 | 	margin: 0px auto;
 55 | }
 56 | 
 57 | 
 58 | #header {
 59 | 	padding: 20px;
 60 | 	font-size: 36px;
 61 | 	background-color: #000;
 62 | 	color: #fff;
 63 | }
 64 | 
 65 | #header span {
 66 | 	color: #666;
 67 | }
 68 | #main_content {
 69 | 	background-color: #fff;
 70 | 	padding: 60px 20px 20px;
 71 | }
 72 | 
 73 | 
 74 | #footer p {
 75 | 	margin: 0;
 76 | 	padding-top: 10px;
 77 | 	padding-bottom: 50px;
 78 | 	color: #333;
 79 | 	font: 10px Arial, sans-serif;
 80 | }
 81 | 
 82 | .tabs {
 83 | 	width: 100%;
 84 | 	height: 31px;
 85 | 	background-color: #444;
 86 | }
 87 | .tabs li {
 88 | 	float:  left;
 89 | 	margin: 0;
 90 | 	overflow: hidden;
 91 | 	background-color: #444;
 92 | }
 93 | .tabs li a {
 94 | 	display: block;
 95 | 	color: #fff;
 96 | 	text-decoration: none;
 97 | 	font: bold 11px/11px 'Arial';
 98 | 	text-transform: uppercase;
 99 | 	padding: 10px 15px;
100 | 	border-right: 1px solid #fff;
101 | }
102 | 
103 | .tabs li a:hover {
104 | 		background-color: #00b3ff;
105 | 
106 | }
107 | 
108 | .tabs li.active a {
109 | 	color:  #000;
110 | 	background-color: #fff;
111 | }
112 | 
113 | 
114 | 
115 | div.huge {
116 | 	
117 | 	font-size: 300px;
118 | 	line-height: 1em;
119 | 	padding: 0;
120 | 	letter-spacing: -.02em;
121 | 	overflow: hidden;
122 | }
123 | div.glyph_range {
124 | 	font-size: 72px;
125 | 	line-height: 1.1em;
126 | }
127 | 
128 | .size10{ font-size: 10px; }
129 | .size11{ font-size: 11px; }
130 | .size12{ font-size: 12px; }
131 | .size13{ font-size: 13px; }
132 | .size14{ font-size: 14px; }
133 | .size16{ font-size: 16px; }
134 | .size18{ font-size: 18px; }
135 | .size20{ font-size: 20px; }
136 | .size24{ font-size: 24px; }
137 | .size30{ font-size: 30px; }
138 | .size36{ font-size: 36px; }
139 | .size48{ font-size: 48px; }
140 | .size60{ font-size: 60px; }
141 | .size72{ font-size: 72px; }
142 | .size90{ font-size: 90px; }
143 | 
144 | 
145 | .psample_row1 {	height: 120px;}
146 | .psample_row1 {	height: 120px;}
147 | .psample_row2 {	height: 160px;}
148 | .psample_row3 {	height: 160px;}
149 | .psample_row4 {	height: 160px;}
150 | 
151 | .psample {
152 | 	overflow: hidden;
153 | 	position: relative;
154 | }
155 | .psample p {
156 | 	line-height: 1.3em;
157 | 	display: block;
158 | 	overflow: hidden;
159 | 	margin: 0;
160 | }
161 | 
162 | .psample span {
163 | 	margin-right: .5em;
164 | }
165 | 
166 | .white_blend {
167 | 	width: 100%;
168 | 	height: 61px;
169 | 	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
170 | 	position: absolute;
171 | 	bottom: 0;
172 | }
173 | .black_blend {
174 | 	width: 100%;
175 | 	height: 61px;
176 | 	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
177 | 	position: absolute;
178 | 	bottom: 0;
179 | }
180 | .fullreverse {
181 | 	background:  #000 !important;
182 | 	color:  #fff !important;
183 | 	margin-left: -20px;
184 | 	padding-left: 20px;
185 | 	margin-right: -20px;
186 | 	padding-right: 20px;
187 | 	padding: 20px;
188 | 	margin-bottom:0;
189 | }
190 | 
191 | 
192 | .sample_table td {
193 | 	padding-top: 3px;
194 | 	padding-bottom:5px;
195 | 	padding-left: 5px;
196 | 	vertical-align: middle;
197 | 	line-height: 1.2em;
198 | }
199 | 
200 | .sample_table td:first-child {
201 | 	background-color: #eee;
202 | 	text-align: right;
203 | 	padding-right: 5px;
204 | 	padding-left: 0;
205 | 	padding: 5px;
206 | 	font: 11px/12px "Courier New", Courier, mono;
207 | }
208 | 
209 | code {
210 | 	white-space: pre;
211 | 	background-color: #eee;
212 | 	display: block;
213 | 	padding: 10px;
214 | 	margin-bottom: 18px;
215 | 	overflow: auto;
216 | }
217 | 
218 | 
219 | .bottom,.last 	{margin-bottom:0 !important; padding-bottom:0 !important;}
220 | 
221 | .box  { 
222 |   padding: 18px; 
223 |   margin-bottom: 18px; 
224 |   background: #eee; 
225 | }
226 | 
227 | .reverse,.reversed { background:  #000 !important;color:  #fff !important; border: none !important;}
228 | 
229 | #bodycomparison {
230 | 	position: relative;
231 | 	overflow: hidden;
232 | 	font-size: 72px;
233 | 	height: 90px;
234 | 	white-space: nowrap;
235 | }
236 | 
237 | #bodycomparison div{
238 | 	font-size: 72px;
239 | 	line-height: 90px;
240 | 	display: inline;
241 | 	margin: 0 15px 0 0;
242 | 	padding: 0;
243 | }
244 | 
245 | #bodycomparison div span{
246 | 	font: 10px Arial;
247 | 	position: absolute;
248 | 	left: 0;
249 | }
250 | #xheight {
251 | 	float: none;
252 | 	position: absolute;
253 | 	color: #d9f3ff;
254 | 	font-size: 72px;
255 | 	line-height: 90px;
256 | }
257 | 
258 | .fontbody {
259 |  position: relative;
260 | }
261 | .arialbody{
262 | 	font-family: Arial;
263 | 	position: relative;
264 | }
265 | .verdanabody{
266 | 	font-family: Verdana;
267 | 	position: relative;
268 | }
269 | .georgiabody{
270 | 	font-family: Georgia;
271 | 	position: relative;
272 | }
273 | 
274 | /* @group Layout page
275 |  */
276 | 
277 | #layout h1 {
278 | 	font-size: 36px;
279 | 	line-height: 42px;
280 | 	font-weight: normal;
281 | 	font-style: normal;
282 | }
283 | 
284 | #layout h2 {
285 | 	font-size: 24px;
286 | 	line-height: 23px;
287 | 	font-weight: normal;
288 | 	font-style: normal;
289 | }
290 | 
291 | #layout h3 {
292 | 	font-size: 22px;
293 | 	line-height: 1.4em;
294 | 	margin-top: 1em;
295 | 	font-weight: normal;
296 | 	font-style: normal;
297 | }
298 | 
299 | 
300 | #layout p.byline {
301 | 	font-size: 12px;
302 | 	margin-top: 18px;
303 | 	line-height: 12px;
304 | 	margin-bottom: 0;
305 | }
306 | #layout p {
307 | 	font-size: 14px;
308 | 	line-height: 21px;
309 | 	margin-bottom: .5em;
310 | }
311 | 
312 | #layout p.large{
313 | 	font-size: 18px;
314 | 	line-height: 26px;
315 | }
316 | 
317 | #layout .sidebar p{
318 | 	font-size: 12px;
319 | 	line-height: 1.4em;
320 | }
321 | 
322 | #layout p.caption {
323 | 	font-size: 10px;
324 | 	margin-top: -16px;
325 | 	margin-bottom: 18px;
326 | }
327 | 
328 | /* @end */
329 | 
330 | /* @group Glyphs */
331 | 
332 | #glyph_chart div{
333 | 	background-color: #d9f3ff;
334 | 	color: black;
335 | 	float: left;
336 | 	font-size: 36px;
337 | 	height: 1.2em;
338 | 	line-height: 1.2em;
339 | 	margin-bottom: 1px;
340 | 	margin-right: 1px;
341 | 	text-align: center;
342 | 	width: 1.2em;
343 | 	position: relative;
344 | 	padding: .6em .2em .2em;
345 | }
346 | 
347 | #glyph_chart div p {
348 | 	position: absolute;
349 | 	left: 0;
350 | 	top: 0;
351 | 	display: block;
352 | 	text-align: center;
353 | 	font: bold 9px Arial, sans-serif;
354 | 	background-color: #3a768f;
355 | 	width: 100%;
356 | 	color: #fff;
357 | 	padding: 2px 0;
358 | }
359 | 
360 | 
361 | #glyphs h1 {
362 | 	font-family: Arial, sans-serif;
363 | }
364 | /* @end */
365 | 
366 | /* @group Installing */
367 | 
368 | #installing {
369 | 	font: 13px Arial, sans-serif;
370 | }
371 | 
372 | #installing p,
373 | #glyphs p{
374 | 	line-height: 1.2em;
375 | 	margin-bottom: 18px;
376 | 	font: 13px Arial, sans-serif;
377 | }
378 | 
379 | 
380 | 
381 | #installing h3{
382 | 	font-size: 15px;
383 | 	margin-top: 18px;
384 | }
385 | 
386 | /* @end */
387 | 
388 | #rendering h1 {
389 | 	font-family: Arial, sans-serif;
390 | }
391 | .render_table td {
392 | 	font: 11px "Courier New", Courier, mono;
393 | 	vertical-align: middle;
394 | }
395 | 
396 | 
397 | 


--------------------------------------------------------------------------------
/books-in-browsers-2011/css/style.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * HTML5 ✰ Boilerplate
  3 |  *
  4 |  * What follows is the result of much research on cross-browser styling.
  5 |  * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
  6 |  * Kroc Camen, and the H5BP dev community and team.
  7 |  *
  8 |  * Detailed information about this CSS: h5bp.com/css
  9 |  *
 10 |  * ==|== normalize ==========================================================
 11 |  */
 12 | 
 13 | 
 14 | /* =============================================================================
 15 |    HTML5 display definitions
 16 |    ========================================================================== */
 17 | 
 18 | article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
 19 | audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
 20 | audio:not([controls]) { display: none; }
 21 | [hidden] { display: none; }
 22 | 
 23 | 
 24 | /* =============================================================================
 25 |    Base
 26 |    ========================================================================== */
 27 | 
 28 | /*
 29 |  * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 30 |  * 2. Force vertical scrollbar in non-IE
 31 |  * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 32 |  */
 33 | 
 34 | html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
 35 | 
 36 | body { margin: 0; font-size: 13px; line-height: 1.231; }
 37 | 
 38 | body, button, input, select, textarea { font-family: sans-serif; color: #222; }
 39 | 
 40 | /*
 41 |  * Remove text-shadow in selection highlight: h5bp.com/i
 42 |  * These selection declarations have to be separate
 43 |  * Also: hot pink! (or customize the background color to match your design)
 44 |  */
 45 | 
 46 | ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
 47 | ::selection { background: #fe57a1; color: #fff; text-shadow: none; }
 48 | 
 49 | 
 50 | /* =============================================================================
 51 |    Links
 52 |    ========================================================================== */
 53 | 
 54 | a { color: #00e; }
 55 | a:visited { color: #551a8b; }
 56 | a:hover { color: #06e; }
 57 | a:focus { outline: thin dotted; }
 58 | 
 59 | /* Improve readability when focused and hovered in all browsers: h5bp.com/h */
 60 | a:hover, a:active { outline: 0; }
 61 | 
 62 | 
 63 | /* =============================================================================
 64 |    Typography
 65 |    ========================================================================== */
 66 | 
 67 | abbr[title] { border-bottom: 1px dotted; }
 68 | 
 69 | b, strong { font-weight: bold; }
 70 | 
 71 | blockquote { margin: 1em 40px; }
 72 | 
 73 | dfn { font-style: italic; }
 74 | 
 75 | hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
 76 | 
 77 | ins { background: #ff9; color: #000; text-decoration: none; }
 78 | 
 79 | mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
 80 | 
 81 | /* Redeclare monospace font family: h5bp.com/j */
 82 | pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
 83 | 
 84 | /* Improve readability of pre-formatted text in all browsers */
 85 | pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
 86 | 
 87 | q { quotes: none; }
 88 | q:before, q:after { content: ""; content: none; }
 89 | 
 90 | small { font-size: 85%; }
 91 | 
 92 | /* Position subscript and superscript content without affecting line-height: h5bp.com/k */
 93 | sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
 94 | sup { top: -0.5em; }
 95 | sub { bottom: -0.25em; }
 96 | 
 97 | 
 98 | /* =============================================================================
 99 |    Lists
100 |    ========================================================================== */
101 | 
102 | ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
103 | dd { margin: 0 0 0 40px; }
104 | nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
105 | 
106 | 
107 | /* =============================================================================
108 |    Embedded content
109 |    ========================================================================== */
110 | 
111 | /*
112 |  * 1. Improve image quality when scaled in IE7: h5bp.com/d
113 |  * 2. Remove the gap between images and borders on image containers: h5bp.com/e
114 |  */
115 | 
116 | img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
117 | 
118 | /*
119 |  * Correct overflow not hidden in IE9
120 |  */
121 | 
122 | svg:not(:root) { overflow: hidden; }
123 | 
124 | 
125 | /* =============================================================================
126 |    Figures
127 |    ========================================================================== */
128 | 
129 | figure { margin: 0; }
130 | 
131 | 
132 | /* =============================================================================
133 |    Forms
134 |    ========================================================================== */
135 | 
136 | form { margin: 0; }
137 | fieldset { border: 0; margin: 0; padding: 0; }
138 | 
139 | /* Indicate that 'label' will shift focus to the associated form element */
140 | label { cursor: pointer; }
141 | 
142 | /*
143 |  * 1. Correct color not inheriting in IE6/7/8/9
144 |  * 2. Correct alignment displayed oddly in IE6/7
145 |  */
146 | 
147 | legend { border: 0; *margin-left: -7px; padding: 0; }
148 | 
149 | /*
150 |  * 1. Correct font-size not inheriting in all browsers
151 |  * 2. Remove margins in FF3/4 S5 Chrome
152 |  * 3. Define consistent vertical alignment display in all browsers
153 |  */
154 | 
155 | button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
156 | 
157 | /*
158 |  * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
159 |  * 2. Correct inner spacing displayed oddly in IE6/7
160 |  */
161 | 
162 | button, input { line-height: normal; *overflow: visible; }
163 | 
164 | /*
165 |  * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
166 |  */
167 | 
168 | table button, table input { *overflow: auto; }
169 | 
170 | /*
171 |  * 1. Display hand cursor for clickable form elements
172 |  * 2. Allow styling of clickable form elements in iOS
173 |  */
174 | 
175 | button, input[type="button"], input[type="reset"], input[type="submit"], [role="button"] { cursor: pointer; -webkit-appearance: button; }
176 | 
177 | /*
178 |  * Consistent box sizing and appearance
179 |  */
180 | 
181 | input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
182 | input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
183 | input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
184 | 
185 | /*
186 |  * Remove inner padding and border in FF3/4: h5bp.com/l
187 |  */
188 | 
189 | button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
190 | 
191 | /*
192 |  * 1. Remove default vertical scrollbar in IE6/7/8/9
193 |  * 2. Allow only vertical resizing
194 |  */
195 | 
196 | textarea { overflow: auto; vertical-align: top; resize: vertical; }
197 | 
198 | /* Colors for form validity */
199 | input:valid, textarea:valid {  }
200 | input:invalid, textarea:invalid { background-color: #f0dddd; }
201 | 
202 | 
203 | /* =============================================================================
204 |    Tables
205 |    ========================================================================== */
206 | 
207 | table { border-collapse: collapse; border-spacing: 0; }
208 | td { vertical-align: top; }
209 | 
210 | 
211 | /* ==|== primary styles =====================================================
212 |    Author:
213 |    ========================================================================== */
214 | 
215 | 
216 | 
217 | 
218 | 
219 | 
220 | 
221 | 
222 | 
223 | 
224 | 
225 | 
226 | 
227 | 
228 | 
229 | 
230 | /*
231 |  * Media queries for responsive design https://github.com/shichuan/mobile-html5-boilerplate/wiki/The-Style
232 |  */
233 | 
234 | 
235 | /* Styles for desktop and large screen ----------- */
236 | 
237 | /*styles for 800px and up!*/
238 | @media only screen and (min-width: 800px) {
239 |   /* Styles */
240 | }/*/mediaquery*/
241 | 
242 | 
243 | /* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
244 | @media
245 | only screen and (-webkit-min-device-pixel-ratio: 1.5),
246 | only screen and (-o-min-device-pixel-ratio: 3/2),
247 | only screen and (min--moz-device-pixel-ratio: 1.5),
248 | only screen and (min-device-pixel-ratio: 1.5) {
249 |   /* Styles */
250 | }
251 | 
252 | 
253 | 
254 | /* ==|== non-semantic helper classes ========================================
255 |    Please define your styles before this section.
256 |    ========================================================================== */
257 | 
258 | /* prevent callout */
259 | .nocallout {-webkit-touch-callout: none;}
260 | 
261 | /* Text overflow with ellipsis */
262 | .ellipsis {
263 |   text-overflow: ellipsis;
264 |   overflow: hidden;
265 |   white-space: nowrap;
266 | }
267 | 
268 | /* A hack for HTML5 contenteditable attribute on mobile */
269 | textarea[contenteditable] {-webkit-appearance: none;}
270 | 
271 | /* A workaround for S60 3.x and 5.0 devices which do not animated gif images if they have been set as display: none */
272 | .gifhidden {position: absolute; left: -100%;}
273 | 
274 | /* For image replacement */
275 | .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
276 | .ir br { display: none; }
277 | 
278 | /* Hide from both screenreaders and browsers: h5bp.com/u */
279 | .hidden { display: none !important; visibility: hidden; }
280 | 
281 | /* Hide only visually, but have it available for screenreaders: h5bp.com/v */
282 | .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
283 | 
284 | /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
285 | .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
286 | 
287 | /* Hide visually and from screenreaders, but maintain layout */
288 | .invisible { visibility: hidden; }
289 | 
290 | /* Contain floats: h5bp.com/q */
291 | .clearfix:before, .clearfix:after { content: ""; display: table; }
292 | .clearfix:after { clear: both; }
293 | .clearfix { *zoom: 1; }
294 | 
295 | 
296 | 
297 | /* ==|== print styles =======================================================
298 |    Print styles.
299 |    Inlined to avoid required HTTP connection: h5bp.com/r
300 |    ========================================================================== */
301 | 
302 | @media print {
303 |   * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
304 |   a, a:visited { text-decoration: underline; }
305 |   a[href]:after { content: " (" attr(href) ")"; }
306 |   abbr[title]:after { content: " (" attr(title) ")"; }
307 |   .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
308 |   pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
309 |   thead { display: table-header-group; } /* h5bp.com/t */
310 |   tr, img { page-break-inside: avoid; }
311 |   img { max-width: 100% !important; }
312 |   @page { margin: 0.5cm; }
313 |   p, h2, h3 { orphans: 3; widows: 3; }
314 |   h2, h3 { page-break-after: avoid; }
315 | }
316 | 


--------------------------------------------------------------------------------
/books-in-browsers-2011/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <!-- Conditional comment for mobile ie7 http://blogs.msdn.com/b/iemobile/ -->
  3 | <!--[if IEMobile 7 ]>    <html class="no-js iem7"> <![endif]-->
  4 | <!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
  5 | 
  6 | <head>
  7 |   <meta charset="utf-8">
  8 | 
  9 |   <title>First Draft of the Revolution</title>
 10 |   <meta name="description" content="">
 11 |   <meta name="author" content="">
 12 | 
 13 |   <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
 14 |   <meta name="HandheldFriendly" content="True">
 15 |   <meta name="MobileOptimized" content="320">
 16 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 17 | 
 18 |   <!-- Home screen icon  Mathias Bynens http://goo.gl/6nVq0 -->
 19 |   <!-- For iPhone 4 with high-resolution Retina display: -->
 20 |   <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png">
 21 |   <!-- For first-generation iPad: -->
 22 |   <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png">
 23 |   <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
 24 |   <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png">
 25 |   <!-- For nokia devices: -->
 26 |   <link rel="shortcut icon" href="img/l/apple-touch-icon.png">
 27 | 
 28 |   <!--iOS web app, deletable if not needed -->
 29 |   <!--the script prevents links from opening in mobile safari. https://gist.github.com/1042026
 30 |   <meta name="apple-mobile-web-app-capable" content="yes">
 31 |   <meta name="apple-mobile-web-app-status-bar-style" content="black">
 32 |   <script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
 33 |   <link rel="apple-touch-startup-image" href="img/l/splash.png">-->
 34 | 
 35 |   <!-- Mobile IE allows us to activate ClearType technology for smoothing fonts for easy reading -->
 36 |   <meta http-equiv="cleartype" content="on">
 37 | 
 38 |   <!-- more tags for your 'head' to consider https://gist.github.com/849231 -->
 39 | 
 40 |   <!-- Main Stylesheet -->
 41 |   <link rel="stylesheet" href="css/style.css?v=1">
 42 | 
 43 |   <link rel="stylesheet" href="css/presentation.css?v=1">
 44 |   <link rel="stylesheet" href="css/slides.css?v=1">
 45 | 
 46 |   <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects 
 47 |   <script src="js/libs/modernizr-custom.js"></script>
 48 | 
 49 |   <script>Modernizr.mq('(min-width:0)') || document.write('<script src="js/libs/respond.min.js">\x3C/script>')</script>
 50 | -->
 51 | </head>
 52 | 
 53 | <body>
 54 | 
 55 |   <div id="container" data-currentslide="1">
 56 | 
 57 |     <div id="main" role="main">
 58 | 
 59 |       <div class="slide visible" data-slide="1">
 60 |         <header>
 61 |           <h1 class="center c17" epub:type="title"><span class="drop">F</span>irst Draft of the <br/>Revolution</h1>
 62 |           <h2 class="center" epub:type="subtitle"><span class="w1">Discoverable narrative</span> <span class="w2">in</span> <span class="w3">digital</span> <span class="w4">works.</span></h2>
 63 |           <h3><span class="w1">Liza</span> <span class="w2">Daly</span> <span id="thanks" class="w5">&#160; (Thanks!)</span></h3>
 64 |           <p><img class="w3" src="figures/ibis.png" alt="Ibis Reader logo" /><img class="w4" src="figures/3p.png" alt="Threepress logo" /></p>
 65 |         </header>        
 66 |       </div>
 67 | 
 68 |       <div class="slide" data-slide="2">
 69 |         <p class="date chunk" id="date">2011</p>
 70 |         <p class="date-later chunk" id="date">1985</p>
 71 |       </div>
 72 |       <div class="slide text" data-slide="4">
 73 |         <p>When I was 12, <br/>I thought I was living in<br/>the future of books.</p>
 74 |       </div>
 75 |       <div class="slide text" data-slide="5">
 76 |         <p>One or more “interactive fiction” games dominated the software sales charts for almost a decade.</p>
 77 |       </div>
 78 | 
 79 |       <div class="slide text c64" data-slide="6">
 80 |         <div class="c64bg">
 81 |           <img src="figures/zork-opener.png" alt="screen capture of zork" width="1024"/>
 82 |         </div>
 83 |         <!-- Many of you have probably heard of these games, they looked like this -->
 84 |       </div>
 85 |       <div class="slide text" data-slide="8">
 86 |         <!-- Though the prose was not always so utilitarian -->
 87 |         <p style="text-align: left; padding: 0 1em 0 1em;">
 88 |           “You’re five hundred miles above a sea of ice, hurtling in
 89 |           profound silence over the Arctic atmosphere. Layers of crimson
 90 |           and violet describe the curve of the horizon, blending
 91 |           imperceptibly into a black sky crowded with stars.   
 92 |         </p>
 93 |         <p style="text-align: left; padding: .5em 1em 0 1em;">
 94 |           You watch helplessly as the white door dwindles to a
 95 |           distant speck, vanishing at last between the horns of the
 96 |           rising moon.”
 97 |         </p>
 98 |       </div>
 99 | 
100 | 
101 |       <div class="slide" data-slide="9" style="background: black">
102 |         <img class="slideable-fast" id="article1" src="figures/computer-books-storm-industry.png" width="1024"
103 |              alt="Article called 'Computer Books Storm Industry'"/>
104 | 
105 | <br/>
106 |         <img class="slideable" id="map1" src="figures/if-map1.png" width="1024"
107 |              alt="Hand-drawn interactive fiction map"/>
108 | 
109 | 
110 |         <img class="slideable" id="map2" src="figures/if-map2.png" width="800"
111 |              alt="Snippet of handwritten BASIC code"/>
112 |       </div>
113 | 
114 |       <div class="slide" data-slide="12" style="background: white">
115 |         <blockquote>
116 |           <p>The interactive fiction game “Adventure” can be experienced in
117 |           187 billion trillion unique ways.</p>
118 |           <cite>
119 |             Mary Ann Buckles,  <a
120 |             href="http://ifarchive.org/if-archive/articles/byte87_buckles.html">Interactive
121 |             Fiction as Literature</a>
122 |             <span id="adventure-date" class="chunk">1987</span>
123 |           </cite>
124 | 
125 |         </blockquote>
126 |         <p class="more-endings" style="background: black">
127 |           <img src="figures/zork-troll.png" alt="Imagined screenshot of Zork" />
128 |         </p>
129 |       </div>
130 |       <div class="slide" data-slide="15">
131 |         <div id="mosaic-container">
132 |           <p><span class="mosaic-text"><br/>The first graphical <br/>web browser is introduced</span></p>
133 |           <img src="figures/mosaic.png" alt="Screenshot from the browser Mosaic" />
134 |         </div>
135 |         <!-- As games they were immensely popular, but the computer market underwent a severe contraction, and the future
136 |         of books slipped further into the distance. -->
137 | 
138 |         <img src="figures/myst.jpg" alt="Screenshot from the game Myst" />
139 |         <p style="position:absolute">
140 |           <span class="myst-text chunk">Myst: </span>
141 |           <span id="myst-date" class="chunk"><span id="myst-date-content"/></span>
142 |         </p>
143 |       </div>
144 | 
145 |       <div class="slide" data-slide="17">
146 |         <!-- The introduction of the web and hypertext in particular made digital storytelling a reality for the average person,
147 |              though we know that mostly what they did were crimes again good taste.
148 |         -->
149 |         <p class="comicsans"><a href="#">Click Here</a> to Join<br/> My Books in Browsers Web Ring!</p>
150 |         <img src="figures/underconstruction.gif" alt="Animated 'under construction' GIF" />
151 |       </div>
152 |       <div class="slide" data-slide="18">
153 |         <img src="figures/253.png" alt="Screen shot of home page from 253 by Geoff Ryman" />
154 |       </div>
155 |       <div class="slide" data-slide="20">
156 |         <img src="figures/253-2.png" alt="Screen shot of home page from 253 by Geoff Ryman" />
157 |       </div>
158 | 
159 |       <div class="slide slideable" data-slide="21">
160 |         <!-- Predictably this caused a lot of angst -->
161 |         <blockquote>
162 |           <p>“Eloquence is being redefined. “Text” has lost its
163 |           canonical certainty. How does one judge, analyze, write
164 |           about a work that never reads the same way twice?”
165 |           </p>
166 |         </blockquote>
167 |         <cite><a href="http://www.nytimes.com/books/98/09/27/specials/coover-end.html">The End of Books</a>, Robert Coover, New York Times (1992)</cite>
168 |       </div>
169 | 
170 |       <div class="slide" data-slide="22">
171 |         <!-- "Hypertext fiction", authored either via the web or through specialized software like Apple's Hypercard, had a brief
172 |         peak and then died out quickly.  Why? -->
173 |         <header>
174 |           <h1 class="slideable ">“Hypertext fiction”</h1>
175 |         </header>
176 |         <img class="slideable-fast" src="figures/hypertext-fiction-graph.png" alt="A graph showing interest in hypertext fiction peaking in 2000 and then sharply declining" />
177 |       </div>
178 | 
179 |       <div class="slide slideable-fast" data-slide="23">
180 |         <div id="games" class="table left white">
181 |           <dl>
182 |             <dd>Story-driven</dd>
183 |             <dd>User-controlled</dd>
184 |             <dd>Fun</dd>
185 |           </dl>
186 |           <p>Games</p>
187 |         </div>
188 | 
189 |         <div id="art" class="table right black">
190 |           <p>Art</p>
191 |           <dl>
192 |             <dd>Mood-driven</dd>
193 |             <dd>Author-controlled</dd>
194 |             <dd>“Important”</dd>
195 |           </dl>
196 |         </div>
197 |       </div>
198 |       <div class="slide" data-slide="24">
199 |         <span class="last-date chunk slideable">2011</span>
200 |       </div>
201 |       <div class="slide" data-slide="25">
202 |         <header>
203 |           <p id="emshort">Emily Short</p>
204 |           <p style="color: white">Freelance consultant in <br/>interactive narrative.</p>
205 |         </header>
206 |       </div>
207 |       <div class="slide" data-slide="26">
208 |         <header>
209 |           <p class="center c17" epub:type="title"><span class="drop">F</span>irst Draft of the Revolution</p> 
210 |         </header>
211 |       </div>
212 | 
213 |       <div class="slide" data-slide="27">
214 |         <div id="advance" class="white">
215 |           <p>Advance</p>
216 |         </div>
217 | 
218 |         <div id="expand" class="black">
219 |           <p>Expand</p>
220 |         </div>
221 |         
222 |       </div>
223 |       <div class="slide" data-slide="29">
224 |         <p style="margin-top: 300px">
225 |           “Presenting ‘First Draft’ through interactive letter-writing allows me
226 |           to focus on the interpersonal dynamics at a very granular level. I’m
227 |           interested in problems of how people communicate – how they
228 |           manipulate one another, how they assert control or social dominance,
229 |           how they allow themselves to be vulnerable – and I want to show those
230 |           interactions rather than telling them.”
231 |         </p>
232 |         <img src="figures/draft-opener.png" alt="Screenshot from the opener" width="1000" />
233 |         <img src="figures/draft-scene1.png" alt="A scene from First Draft"  width="1000"/>
234 |         <img src="figures/draft-xml.png" alt="XML from First Draft"  width="1000"/>
235 |       </div>
236 | 
237 |       <div class="slide" data-slide="34">
238 |         <blockquote id="pinsky">
239 |           <p>
240 |             <span style="font-size: 70px; float:left">W</span>hat has poetry to do with computer software? They share a great human
241 |             myth or trope, an image that could be called the secret passage: the
242 |             discovery of large, manifold channels through a small,
243 |             ordinary-looking or all but invisible aperture.
244 |           </p>
245 |           <cite><a
246 |                     href="http://www.nytimes.com/1995/03/19/books/the-muse-in-the-machine-or-the-poetics-of-zork.html?pagewanted=all&amp;src=pm">The
247 |           Muse in the Machine</a>, Robert Pinsky, New York Times (1995)
248 |           </cite>
249 |         </blockquote>
250 |       </div>
251 |       <div class="slide">
252 |       </div>
253 |     </div>    
254 |   </div>
255 | 
256 | 
257 |   <script src="js/libs/jquery-1.6.2.min.js"></script>
258 | 
259 |   <script src="js/mylibs/helper.js"></script>
260 | 
261 |   <script src="js/mylibs/driver.js"></script>
262 | 
263 |   <script>
264 |     // iPhone Scale Bug Fix, read this when using http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
265 |     MBP.scaleFix();
266 | 
267 |     // Initialize the driver
268 |     driver.initialize();
269 |   </script>
270 | 
271 | </body>
272 | </html>
273 | 


--------------------------------------------------------------------------------
/books-in-browsers-2011/js/libs/modernizr-custom.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Modernizr v1.8pre
 3 |  * http://www.modernizr.com
 4 |  *
 5 |  * Developed by: 
 6 |  * - Faruk Ates  http://farukat.es/
 7 |  * - Paul Irish  http://paulirish.com/
 8 |  *
 9 |  * Copyright (c) 2009-2011
10 |  * Dual-licensed under the BSD or MIT licenses.
11 |  * http://www.modernizr.com/license/
12 |  */
13 | window.Modernizr=(function(o,v,k){var e="1.8pre",H={},x=true,F=v.documentElement,h=v.head||v.getElementsByTagName("head")[0],G="modernizr",D=v.createElement(G),B=D.style,g=v.createElement("input"),E=":)",y=Object.prototype.toString,z=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),q="Webkit Moz O ms Khtml".split(" "),I={svg:"http://www.w3.org/2000/svg"},j={},d={},w={},C=[],A,m=v.getElementsByTagName("script")[0],c=(function(L){var J={},M=v.createElement("body"),K=v.createElement("div");K.id=G+"-mqtest";M.appendChild(K);return function(O){if(J[O]==k){if(o.matchMedia){return(J[O]=matchMedia(O).matches)}var N=v.createElement("style"),P="@media "+O+" { #"+G+"-mqtest { position: absolute; } }";N.type="text/css";if(N.styleSheet){N.styleSheet.cssText=P}else{N.appendChild(v.createTextNode(P))}m.parentNode.insertBefore(M,m);m.parentNode.insertBefore(N,m);J[O]=(o.getComputedStyle?getComputedStyle(K,null):K.currentStyle)["position"]=="absolute";M.parentNode.removeChild(M);N.parentNode.removeChild(N)}return J[O]}})(),t=(function(){var K={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};function J(L,N){N=N||v.createElement(K[L]||"div");L="on"+L;var M=(L in N);if(!M){if(!N.setAttribute){N=v.createElement("div")}if(N.setAttribute&&N.removeAttribute){N.setAttribute(L,"");M=l(N[L],"function");if(!l(N[L],k)){N[L]=k}N.removeAttribute(L)}}N=null;return M}return J})();var r=({}).hasOwnProperty,p;if(!l(r,k)&&!l(r.call,k)){p=function(J,K){return r.call(J,K)}}else{p=function(J,K){return((K in J)&&l(J.constructor.prototype[K],k))}}function u(J){B.cssText=J}function b(K,J){return u(z.join(K+";")+(J||""))}function l(K,J){return typeof K===J}function n(K,J){return !!~(""+K).indexOf(J)}function f(K,L){for(var J in K){if(B[K[J]]!==k&&(!L||L(K[J],D))){return true}}}function a(M,L){var K=M.charAt(0).toUpperCase()+M.substr(1),J=(M+" "+q.join(K+" ")+K).split(" ");return !!f(J,L)}j.flexbox=function(){function K(P,R,Q,O){R+=":";P.style.cssText=(R+z.join(Q+";"+R)).slice(0,-R.length)+(O||"")}function M(P,R,Q,O){P.style.cssText=z.join(R+":"+Q+";")+(O||"")}var N=v.createElement("div"),L=v.createElement("div");K(N,"display","box","width:42px;padding:0;");M(L,"box-flex","1","width:10px;");N.appendChild(L);F.appendChild(N);var J=L.offsetWidth===42;N.removeChild(L);F.removeChild(N);return J};j.canvas=function(){var J=v.createElement("canvas");return !!(J.getContext&&J.getContext("2d"))};j.canvastext=function(){return !!(H.canvas&&l(v.createElement("canvas").getContext("2d").fillText,"function"))};j.webgl=function(){return !!o.WebGLRenderingContext};j.touch=function(){return("ontouchstart" in o)||c("("+z.join("touch-enabled),(")+"modernizr)")};j.geolocation=function(){return !!navigator.geolocation};j.postmessage=function(){return !!o.postMessage};j.websqldatabase=function(){var J=!!o.openDatabase;return J};j.indexedDB=function(){for(var K=-1,J=q.length;++K<J;){if(o[q[K].toLowerCase()+"IndexedDB"]){return true}}return !!o.indexedDB};j.hashchange=function(){return t("hashchange",o)&&(v.documentMode===k||v.documentMode>7)};j.history=function(){return !!(o.history&&history.pushState)};j.draganddrop=function(){return t("dragstart")&&t("drop")};j.websockets=function(){return("WebSocket" in o)};j.rgba=function(){u("background-color:rgba(150,255,150,.5)");return n(B.backgroundColor,"rgba")};j.hsla=function(){u("background-color:hsla(120,40%,100%,.5)");return n(B.backgroundColor,"rgba")||n(B.backgroundColor,"hsla")};j.multiplebgs=function(){u("background:url(//:),url(//:),red url(//:)");return new RegExp("(url\\s*\\(.*?){3}").test(B.background)};j.backgroundsize=function(){return a("backgroundSize")};j.borderimage=function(){return a("borderImage")};j.borderradius=function(){return a("borderRadius","",function(J){return n(J,"orderRadius")})};j.boxshadow=function(){return a("boxShadow")};j.textshadow=function(){return v.createElement("div").style.textShadow===""};j.opacity=function(){b("opacity:.55");return/^0.55$/.test(B.opacity)};j.cssanimations=function(){return a("animationName")};j.csscolumns=function(){return a("columnCount")};j.cssgradients=function(){var L="background-image:",K="gradient(linear,left top,right bottom,from(#9f9),to(white));",J="linear-gradient(left top,#9f9, white);";u((L+z.join(K+L)+z.join(J+L)).slice(0,-L.length));return n(B.backgroundImage,"gradient")};j.cssreflections=function(){return a("boxReflect")};j.csstransforms=function(){return !!f(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])};j.csstransforms3d=function(){var J=!!f(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);if(J&&"webkitPerspective" in F.style){J=c("("+z.join("transform-3d),(")+"modernizr)")}return J};j.csstransitions=function(){return a("transitionProperty")};j.fontface=function(){var N,K,M=h||F,O=v.createElement("style"),J=v.implementation||{hasFeature:function(){return false}};O.type="text/css";M.insertBefore(O,M.firstChild);N=O.sheet||O.styleSheet;var L=J.hasFeature("CSS2","")?function(R){if(!(N&&R)){return false}var P=false;try{N.insertRule(R,0);P=(/src/i).test(N.cssRules[0].cssText);N.deleteRule(N.cssRules.length-1)}catch(Q){}return P}:function(P){if(!(N&&P)){return false}N.cssText=P;return N.cssText.length!==0&&(/src/i).test(N.cssText)&&N.cssText.replace(/\r+|\n+/g,"").indexOf(P.split(" ")[0])===0};K=L('@font-face { font-family: "font"; src: url("//:"); }');M.removeChild(O);return K};j.video=function(){var L=v.createElement("video"),J=!!L.canPlayType;if(J){J=new Boolean(J);J.ogg=L.canPlayType('video/ogg; codecs="theora"');var K='video/mp4; codecs="avc1.42E01E';J.h264=L.canPlayType(K+'"')||L.canPlayType(K+', mp4a.40.2"');J.webm=L.canPlayType('video/webm; codecs="vp8, vorbis"')}return J};j.audio=function(){var K=v.createElement("audio"),J=!!K.canPlayType;if(J){J=new Boolean(J);J.ogg=K.canPlayType('audio/ogg; codecs="vorbis"');J.mp3=K.canPlayType("audio/mpeg;");J.wav=K.canPlayType('audio/wav; codecs="1"');J.m4a=K.canPlayType("audio/x-m4a;")||K.canPlayType("audio/aac;")}return J};j.localstorage=function(){try{return !!localStorage.getItem}catch(J){return false}};j.sessionstorage=function(){try{return !!sessionStorage.getItem}catch(J){return false}};j.webWorkers=function(){return !!o.Worker};j.applicationcache=function(){return !!o.applicationCache};j.svg=function(){return !!v.createElementNS&&!!v.createElementNS(I.svg,"svg").createSVGRect};j.inlinesvg=function(){var J=v.createElement("div");J.innerHTML="<svg/>";return(J.firstChild&&J.firstChild.namespaceURI)==I.svg};j.smil=function(){return !!v.createElementNS&&/SVG/.test(y.call(v.createElementNS(I.svg,"animate")))};j.svgclippaths=function(){return !!v.createElementNS&&/SVG/.test(y.call(v.createElementNS(I.svg,"clipPath")))};function s(){H.input=(function(L){for(var K=0,J=L.length;K<J;K++){w[L[K]]=!!(L[K] in g)}return w})("autocomplete autofocus list placeholder max min multiple pattern required step".split(" "));H.inputtypes=(function(M){for(var L=0,K,O,N,J=M.length;L<J;L++){g.setAttribute("type",O=M[L]);K=g.type!=="text";if(K){g.value=E;g.style.cssText="position:absolute;visibility:hidden;";if(/^range$/.test(O)&&g.style.WebkitAppearance!==k){F.appendChild(g);N=v.defaultView;K=N.getComputedStyle&&N.getComputedStyle(g,null).WebkitAppearance!=="textfield"&&(g.offsetHeight!==0);F.removeChild(g)}else{if(/^(search|tel)$/.test(O)){}else{if(/^(url|email)$/.test(O)){K=g.checkValidity&&g.checkValidity()===false}else{if(/^color$/.test(O)){F.appendChild(g);F.offsetWidth;K=g.value!=E;F.removeChild(g)}else{K=g.value!=E}}}}}d[M[L]]=!!K}return d})("search tel url email datetime date month week time datetime-local number range color".split(" "))}for(var i in j){if(p(j,i)){A=i.toLowerCase();H[A]=j[i]();C.push((H[A]?"":"no-")+A)}}if(!H.input){s()}H.crosswindowmessaging=H.postmessage;H.historymanagement=H.history;H.addTest=function(J,K){J=J.toLowerCase();if(H[J]){return}K=!!(K());F.className+=" "+(K?"":"no-")+J;H[J]=K;return H};u("");D=g=null;if(x&&o.attachEvent&&(function(){var J=v.createElement("div");J.innerHTML="<elem></elem>";return J.childNodes.length!==1})()){(function(P,aa){P.iepp=P.iepp||{};var Q=P.iepp,Z=Q.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",K=Z.split("|"),Y=K.length,X=new RegExp("(^|\\s)("+Z+")","gi"),W=new RegExp("<(/*)("+Z+")","gi"),O=/^\s*[\{\}]\s*$/,J=new RegExp("(^|[^\\n]*?\\s)("+Z+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),M=aa.createDocumentFragment(),U=aa.documentElement,R=U.firstChild,S=aa.createElement("body"),N=aa.createElement("style"),V=/print|all/,T;function L(ac){var ab=-1;while(++ab<Y){ac.createElement(K[ab])}}Q.getCSS=function(af,ad){if(af+""===k){return""}var ac=-1,ab=af.length,ag,ae=[];while(++ac<ab){ag=af[ac];if(ag.disabled){continue}ad=ag.media||ad;if(V.test(ad)){ae.push(Q.getCSS(ag.imports,ad),ag.cssText)}ad="all"}return ae.join("")};Q.parseCSS=function(ac){var ab=[],ad;while((ad=J.exec(ac))!=null){ab.push(((O.exec(ad[1])?"\n":ad[1])+ad[2]+ad[3]).replace(X,"$1.iepp_$2")+ad[4])}return ab.join("\n")};Q.writeHTML=function(){var ac=-1;T=T||aa.body;while(++ac<Y){var ad=aa.getElementsByTagName(K[ac]),ae=ad.length,ab=-1;while(++ab<ae){if(ad[ab].className.indexOf("iepp_")<0){ad[ab].className+=" iepp_"+K[ac]}}}M.appendChild(T);U.appendChild(S);S.className=T.className;S.id=T.id;S.innerHTML=T.innerHTML.replace(W,"<$1font")};Q._beforePrint=function(){N.styleSheet.cssText=Q.parseCSS(Q.getCSS(aa.styleSheets,"all"));Q.writeHTML()};Q.restoreHTML=function(){S.innerHTML="";U.removeChild(S);U.appendChild(T)};Q._afterPrint=function(){Q.restoreHTML();N.styleSheet.cssText=""};L(aa);L(M);if(Q.disablePP){return}R.insertBefore(N,R.firstChild);N.media="print";N.className="iepp-printshim";P.attachEvent("onbeforeprint",Q._beforePrint);P.attachEvent("onafterprint",Q._afterPrint)})(o,v)}H._enableHTML5=x;H._version=e;H.mq=c;H.isEventSupported=t;F.className=F.className.replace(/\bno-js\b/,"")+" js "+C.join(" ");return H})(this,this.document);
14 | /*yepnope1.0.1|WTFPL*/(function(a,b,c){function H(){var a=z;a.loader={load:G,i:0};return a}function G(a,b,c){var e=b=="c"?r:q;i=0,b=b||"j",u(a)?F(e,a,b,this.i++,d,c):(h.splice(this.i++,0,a),h.length==1&&E());return this}function F(a,c,d,g,j,l){function q(){!o&&A(n.readyState)&&(p.r=o=1,!i&&B(),n.onload=n.onreadystatechange=null,e(function(){m.removeChild(n)},0))}var n=b.createElement(a),o=0,p={t:d,s:c,e:l};n.src=n.data=c,!k&&(n.style.display="none"),n.width=n.height="0",a!="object"&&(n.type=d),n.onload=n.onreadystatechange=q,a=="img"?n.onerror=q:a=="script"&&(n.onerror=function(){p.e=p.r=1,E()}),h.splice(g,0,p),m.insertBefore(n,k?null:f),e(function(){o||(m.removeChild(n),p.r=p.e=o=1,B())},z.errorTimeout)}function E(){var a=h.shift();i=1,a?a.t?e(function(){a.t=="c"?D(a):C(a)},0):(a(),B()):i=0}function D(a){var c=b.createElement("link"),d;c.href=a.s,c.rel="stylesheet",c.type="text/css",!a.e&&(o||j)?function g(a){e(function(){if(!d)try{a.sheet.cssRules.length?(d=1,B()):g(a)}catch(b){b.code==1e3||b.message=="security"||b.message=="denied"?(d=1,e(function(){B()},0)):g(a)}},0)}(c):(c.onload=function(){d||(d=1,e(function(){B()},0))},a.e&&c.onload()),e(function(){d||(d=1,B())},z.errorTimeout),!a.e&&f.parentNode.insertBefore(c,f)}function C(a){var c=b.createElement("script"),d;c.src=a.s,c.onreadystatechange=c.onload=function(){!d&&A(c.readyState)&&(d=1,B(),c.onload=c.onreadystatechange=null)},e(function(){d||(d=1,B())},z.errorTimeout),a.e?c.onload():f.parentNode.insertBefore(c,f)}function B(){var a=1,b=-1;while(h.length- ++b)if(h[b].s&&!(a=h[b].r))break;a&&E()}function A(a){return!a||a=="loaded"||a=="complete"}var d=b.documentElement,e=a.setTimeout,f=b.getElementsByTagName("script")[0],g=({}).toString,h=[],i=0,j="MozAppearance"in d.style,k=j&&!!b.createRange().compareNode,l=j&&!k,m=k?d:f.parentNode,n=a.opera&&g.call(a.opera)=="[object Opera]",o="webkitAppearance"in d.style,p=o&&"async"in b.createElement("script"),q=j?"object":n||p?"img":"script",r=o?"img":q,s=Array.isArray||function(a){return g.call(a)=="[object Array]"},t=function(a){return typeof a=="object"},u=function(a){return typeof a=="string"},v=function(a){return g.call(a)=="[object Function]"},w=[],x={},y,z;z=function(a){function h(a,b){function i(a){if(u(a))g(a,f,b,0,c);else if(t(a))for(h in a)a.hasOwnProperty(h)&&g(a[h],f,b,h,c)}var c=!!a.test,d=c?a.yep:a.nope,e=a.load||a.both,f=a.callback,h;i(d),i(e),a.complete&&b.load(a.complete)}function g(a,b,d,e,g){var h=f(a),i=h.autoCallback;if(!h.bypass){b&&(b=v(b)?b:b[a]||b[e]||b[a.split("/").pop().split("?")[0]]);if(h.instead)return h.instead(a,b,d,e,g);d.load(h.url,h.forceCSS||!h.forceJS&&/css$/.test(h.url)?"c":c,h.noexec),(v(b)||v(i))&&d.load(function(){H(),b&&b(h.origUrl,g,e),i&&i(h.origUrl,g,e)})}}function f(a){var b=a.split("!"),c=w.length,d=b.pop(),e=b.length,f={url:d,origUrl:d,prefixes:b},g,h;for(h=0;h<e;h++)g=x[b[h]],g&&(f=g(f));for(h=0;h<c;h++)f=w[h](f);return f}var b,d,e=this.yepnope.loader;if(u(a))g(a,0,e,0);else if(s(a))for(b=0;b<a.length;b++)d=a[b],u(d)?g(d,0,e,0):s(d)?z(d):t(d)&&h(d,e);else t(a)&&h(a,e)},z.addPrefix=function(a,b){x[a]=b},z.addFilter=function(a){w.push(a)},z.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",y=function(){b.removeEventListener("DOMContentLoaded",y,0),b.readyState="complete"},0)),a.yepnope=H()})(this,this.document);
15 | 


--------------------------------------------------------------------------------
/books-in-browsers-2011/css/slides.css:
--------------------------------------------------------------------------------
  1 | /* Default transition effect */
  2 | #container {
  3 |     -webkit-transition: -webkit-transform .75s ease-out;
  4 | }
  5 | 
  6 | /* Slide 1 */
  7 | [data-slide="1"] {
  8 |     top: 0px;
  9 |     left: 0px;
 10 |     background: none;
 11 | }
 12 | [data-slide="1"] h1 {
 13 |     margin: .5em 0 20px 0;
 14 |     font-size: 90px;
 15 |     letter-spacing: -6px;
 16 |     line-height: 1em;
 17 | }
 18 | [data-slide="1"] .drop {
 19 |     font-size: 240px;
 20 |     letter-spacing: -10px;
 21 |     position: relative;
 22 |     top: 55px;
 23 |     font-style: normal;
 24 |     left: 20px;
 25 |     font-weight: 100;
 26 | }
 27 | [data-slide="1"] h2 {
 28 |     margin: 130px 0 0 0;
 29 |     font-size: 50px;
 30 | } 
 31 | [data-slide="1"] h3 {
 32 |     font-size: 40px;
 33 |     text-align: center;
 34 |     margin: 120px 0 0 0;
 35 |     padding:0;
 36 | }
 37 | [data-slide="1"] p {
 38 |     margin:0;
 39 |     padding:0;
 40 | }
 41 | [data-slide="1"] #thanks {
 42 |     visibility: hidden;   
 43 |     position: absolute;
 44 | }
 45 | 
 46 | /* Slide 2 */
 47 | [data-slide="2"] {
 48 |     visibility: visible;
 49 |     background: none;
 50 | }
 51 | [data-slide="2"] .date,
 52 | [data-slide="2"] .date-later {
 53 |     font-size: 500px;
 54 |     color: gray;
 55 |     display: inline-block;
 56 |     position: absolute;
 57 |     -webkit-transform-origin: center center;
 58 |     -webkit-transition: -webkit-transform .5s, opacity .5s;
 59 |     z-index: 1;
 60 |     -webkit-transform: scale(1) rotate(-90deg) translate3d(1600px, -1624px, 0);
 61 |     text-shadow: 0 0 20px gray;
 62 | 
 63 | }
 64 | [data-slide="2"] .date-later {
 65 |     opacity: 0;
 66 | }
 67 | 
 68 | /* Transitioned form: zoom out and slide up */
 69 | #container.slide2 {
 70 |     /* Zoom out */
 71 |     -webkit-transform: scale(0.5) rotate(90deg) translate3d(250px, -1330px, 0); 
 72 | }
 73 | 
 74 | /* Date rotates itself */
 75 | #container.slide2 .date,
 76 | #container.slide2 .date-later {
 77 |     -webkit-transform: rotate(-90deg) translate3d(0,0,0);
 78 | }
 79 | /* Visible text drops down */
 80 | #container.slide2 .w1,
 81 | #container.slide2 .w2,
 82 | #container.slide2 .w3,
 83 | #container.slide2 .w4 {
 84 |     -webkit-transform: translate3d(1675px, 0, 0);
 85 | }
 86 | #container.slide3 .date-later {
 87 |     opacity: 1;
 88 | }
 89 | #container.slide3 .date {
 90 |     opacity: 0;
 91 | }
 92 | #container.slide4 {
 93 | 
 94 | }
 95 | #container.slide4 [data-slide="4"] {
 96 |     -webkit-transform: rotate(-90deg) translate3d(-1350px, 400px, 0) scale(2); 
 97 | }
 98 | #container.slide5 [data-slide="5"] {
 99 |     -webkit-transform: translate3d(0, 0, 0);
100 | }
101 | [data-slide="5"] {
102 |     -webkit-transition: -webkit-transition .2s;
103 | }
104 | [data-slide="5"] p {
105 |     text-align: left;
106 | }
107 | 
108 | #container.slide5 [data-slide="5"] p {
109 |     -webkit-transform: translate3d(100px, 400px, 0);
110 | }
111 | /* Rotate 'one or more' into view */
112 | #container.slide5 {
113 |     -webkit-transform: rotate(0deg) translate3d(-170px, -450px, 0);    
114 | }
115 | /* Keep the date in place */
116 | #container.slide5 .date-later {
117 |     -webkit-transform: rotate(0) translate3d(-750px,-1000px,0) scale(0.1);
118 | }
119 | #container.slide6 {
120 |     -webkit-transform: none;
121 | }
122 | #container.slide5 [data-slide="4"] {
123 |     opacity: 0;
124 | }
125 | /* After this, dump the date */
126 | #container.slide7 .date-later {
127 |     display: none;
128 | }
129 | 
130 | #container.slide6 [data-slide="1"] {
131 |     opacity: 0;
132 | }
133 | /* C64 colors */
134 | .c64bg {
135 |     text-align: center;
136 |     background: black;
137 |     -webkit-transition: -webkit-transform .3s;
138 |     width: 1024px;
139 |     height: 768px;
140 |     top: -768px;
141 |     position: absolute;
142 | }
143 | .c64bg img {
144 |     margin: auto;
145 |     display: block;
146 |     margin-top: 400px;
147 | }
148 | #container.slide8 [data-slide="6"] {
149 |     opacity: 0;
150 | }
151 | #container[data-currentslide="7"] .c64bg {
152 |     -webkit-transform: translate3d(0, 500px, 0);
153 | }
154 | #container[data-currentslide="8"] .c64bg {
155 |     -webkit-transform: translate3d(0, 768px, 0);
156 | }
157 | [data-slide="8"] {
158 |     -webkit-transform: translate3d(0, 0, 0);
159 |     -webkit-transition: -webkit-transform .5s, opacity 4s;
160 |     -webkit-transition-delay: 2s;
161 |     opacity: 0;
162 |     background-color: white;
163 |     color: white;
164 | }
165 | #container[data-currentslide="8"] .slide {
166 |     background-color: black;
167 |     opacity: 1;
168 | }
169 | /* Fix in place to avoid rendering artifact in #article1 */
170 | #map1 {
171 |     position: absolute;
172 |     top: 1024px;
173 | }
174 | #container.slide9 #article1, #container.slide10 #article1, #container.slide11 #article1 {
175 |     opacity: 1;
176 | }
177 | #container.slide10 #map1, #container.slide11 #map1 {
178 |     -webkit-transform: translate3d(0, -950px, 0);
179 |     opacity: 1;
180 | }
181 | #container.slide11 #map2 {
182 |     -webkit-transform: translate3d(0, -500px, 0);
183 |     opacity: 1;
184 | }
185 | 
186 | cite {
187 |     font-size: 40px;
188 |     text-align: right;
189 | }
190 | cite a {
191 |     color: black;
192 | }
193 | [data-slide="12"] #adventure-date {
194 |     color: gray;
195 |     display: inline-block;
196 |     font-style: normal;
197 |     -webkit-transition: -webkit-transform .75s ease-out;
198 |     letter-spacing: 2px;
199 | }
200 | #container.slide13 #adventure-date {
201 |     -webkit-transform: translate3d(0, 400px, 0);
202 | }
203 | 
204 | /* The images in the background should become invisible from here on */
205 | #container.slide12 [data-slide="9"] {
206 |     visibility; hidden;
207 |     opacity: 0;
208 | }
209 | #container.slide13 {
210 |     -webkit-transform: translate3d(0, -600px, 0);
211 | }
212 | 
213 | /* Keep the more endings text for the current slide and its transition to the myst image,
214 |    then drop it so it's not visible when the slide moves on.
215 |  */
216 | .more-endings {
217 |     -webkit-transition: -webkit-transform .2s, opacity .1s; 
218 | }
219 | 
220 | #container[data-currentslide="13"] .more-endings {
221 |     opacity: 1;
222 | }
223 | /* Turn off the quotation when we're ready to slide back up */
224 | #container.slide14 [data-slide="12"] blockquote {
225 |     opacity: 0;
226 | }
227 | #container.slide14 {
228 |     -webkit-transform: none;
229 | }
230 | #container.slide16 {
231 |     -webkit-transform: none;
232 | }
233 | #container.slide16 .more-endings {
234 |     opacity: 0;
235 | }
236 | 
237 | [data-slide="15"] p {
238 |     top: 400px;
239 |     -webkit-transition: color;
240 |     -webkit-transition-delay: 2s;
241 |     color: black;
242 | }
243 | [data-slide="15"] img[src="figures/myst.jpg"] {
244 |     -webkit-transition: opacity 0.5s;
245 |     -webkit-transition-delay: 2s;
246 |     opacity: 0;
247 |     -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0)), color-stop(0.1, rgba(0,0,0,1)));
248 | }
249 | 
250 | #myst-date {
251 |     position: absolute;
252 |     -webkit-transition: -webkit-transform 0.3s;
253 |     -webkit-transition-delay: 4s;
254 |     text-shadow: 0 0 2px gray;
255 |     z-index: 99;
256 | }
257 | #myst-date-content:after {
258 |     content: "1993";
259 | }
260 | 
261 | [data-slide="15"] img[src="figures/mosaic.png"] {
262 |     opacity: 0;
263 |     display: block;
264 |     text-align: center;
265 |     margin:auto;
266 |     -webkit-transition: opacity 0.5s, -webkit-transform 1s;
267 |     -webkit-transition-delay: 2s;
268 | }
269 | [data-slide="15"] .mosaic-text {
270 |     -webkit-transition: opacity 0.5s;
271 |     -webkit-transition-delay: 2s;
272 |     opacity: 0;
273 | }
274 | #container[data-currentslide="15"] [data-slide="15"] img[src="figures/myst.jpg"],
275 | #container[data-currentslide="16"] [data-slide="15"] img[src="figures/myst.jpg"]
276 |  {
277 |     opacity: 1;
278 | }
279 | 
280 | #container[data-currentslide="15"] [data-slide="15"] p {
281 |     color: lightyellow;
282 | }
283 | /* 16: slide up to Mosaic */
284 | #container[data-currentslide="16"] [data-slide="15"] img[src="figures/mosaic.png"] {
285 |     opacity: 1;
286 |     -webkit-transform: translate3d(0, -100px, 0);
287 | }
288 | #mosaic-container {
289 |     position: absolute; 
290 |     top: -768px; 
291 |     width: 1024px;
292 |     padding: 0;
293 |     margin:0;
294 |     -webkit-transition: -webkit-transform: .5s;
295 | }
296 | #container.slide16 .myst-text {
297 |     opacity: 0;
298 | }
299 | #container[data-currentslide="16"] .mosaic-text {
300 |     opacity: 1;
301 | }
302 | /* Slide the date up further */
303 | #container[data-currentslide="16"] #myst-date {
304 |     -webkit-transform: translate3d(0, -500px, 0);
305 | }
306 | /* Slide Mosaic down */
307 | #container[data-currentslide="16"] #mosaic-container {
308 |     -webkit-transform: translate3d(0, 200px, 0);
309 | }
310 | 
311 | #container[data-currentslide="16"] {
312 |     -webkit-transform: translate3d(0, 500px, 0);
313 | }
314 | 
315 | #container[data-currentslide="17"] #myst-date {
316 |     -webkit-transition-delay: 0s;
317 |     -webkit-transform: translate3d(1070px, 500px, 0);
318 |     z-index: 4;
319 | }
320 | 
321 | #container[data-currentslide="17"] {
322 |     -webkit-transform: translate3d(0, 1150px, 0);
323 | }
324 | [data-slide="17"] {
325 |     top: -1024px;
326 | }
327 | /* Click here */
328 | [data-slide="17"] a {
329 |     top: -1024px;
330 |     text-decoration: none;
331 |     border-bottom: 1px solid blue;
332 | }
333 | 
334 | #container[data-currentslide="17"] #mosaic-container {
335 |     -webkit-transform: translate3d(0, 200px, 0);
336 | }
337 | #container[data-currentslide="17"] [data-slide="15"] img[src="figures/mosaic.png"] {
338 |     -webkit-transform: translate3d(0, -100px, 0);
339 | }
340 | [data-slide="17"] {
341 |     -webkit-transition: opacity 1s;
342 | }
343 | [data-slide="17"] img[src="figures/underconstruction.gif"] {
344 |     display: block;
345 |     margin: auto;
346 | }
347 | #container.slide18 [data-slide="17"] {
348 |     opacity: 0;
349 | }
350 | #container.slide18 #myst-date-content:after {
351 |     content: "1996";
352 | }
353 | #container.slide19 {
354 |     -webkit-transform: translate3d(0, -500px, 0);
355 | }
356 | [data-slide="18"], [data-slide="18"] img {
357 |     text-align: right;
358 | }
359 | [data-slide="18"] img,
360 | [data-slide="20"] img  {
361 |     margin-top: -10px;
362 |     display: block;
363 |     float: right;
364 |     -webkit-box-shadow: 10px 0px 50px rgba(50,50,50,1);
365 | }
366 | #container.slide20 {
367 |     -webkit-transform: none;
368 | }
369 | #container.slide21 [data-slide="18"],
370 | #container.slide21 [data-slide="20"],
371 | #container.slide21 #myst-date {
372 |     opacity: 0;
373 | }
374 | 
375 | #container.slide21 {
376 |     -webkit-transform: none;
377 | }
378 | [data-slide="21"] cite { 
379 |     margin: auto;
380 |     text-align: center;
381 |     display: block;
382 | }
383 | #container.slide22 [data-slide="21"] {
384 |     opacity: 0;
385 | }
386 | #container.slide22 [data-slide="22"] header,
387 | #container.slide22 [data-slide="22"] img {
388 |     opacity: 1;
389 | }
390 | [data-slide="22"] header {
391 |     font-size: 40px;
392 |     opacity: 0;
393 |     text-align: center;
394 | } 
395 | [data-slide="22"] img { 
396 |     opacity: 0;
397 | }
398 | 
399 | #container.slide24 [data-slide="22"] {
400 |     display: none;
401 | }
402 | #container.slide23 {
403 |     -webkit-transform: translate3d(-924px, 0, 0);
404 | }
405 | 
406 | [data-slide="23"] {
407 |     left: 1090px;
408 |     top: -600px;
409 |     height: 2000px;
410 |      -webkit-transform-origin: 50% 50%;
411 |     -webkit-transition: -webkit-transform .3s ease-in-out, opacity .3s, height .3s;
412 | }
413 | 
414 | .table {
415 |     display: table;
416 |     vertical-align: top;
417 |     width: 460px;
418 |     height: 100%;
419 | }
420 | .left {
421 |     text-align: right;
422 |     float: left;
423 | }
424 | 
425 | .table p, .table dl {
426 |     display: table-cell;
427 |     vertical-align: middle;
428 | }
429 | .right {
430 |     float: left;
431 | }
432 | .black {
433 |     background: black;
434 |     color: white;
435 | }
436 | .white {
437 |     background: white;
438 |     color: black;
439 | }
440 | 
441 | [data-slide="23"] p {
442 |     padding: 0;
443 | }
444 | [data-slide="23"] dl {
445 |     font-size: 30px;
446 | }
447 | 
448 | #container.slide24 {
449 |     background: black;
450 | }
451 | #container.slide24 [data-slide="23"] {
452 |     -webkit-transform: rotate(90deg) translate3d(0, 1000px, 0);
453 | 
454 | }
455 | [data-slide="24"] {
456 |     left: 983px;
457 | }
458 | .last-date {
459 |     color: white;
460 |     display: inline-block;
461 |     margin-top: 475px;
462 |     font-size: 300px;
463 |     opacity: 0;
464 |     -webkit-transition-delay: 1s;
465 | }
466 | #container.slide24 .last-date {
467 |     opacity: 1;
468 | }
469 | #container.slide25 {
470 |     -webkit-transform: none;
471 | }
472 | #container.slide25 .last-date {
473 |     opacity: 0;
474 | }
475 | 
476 | #container.slide25 [data-slide="23"] dl,
477 | #container.slide25 [data-slide="23"] p {
478 |     display: none;
479 | }
480 | 
481 | [data-slide="25"] p {
482 |     -webkit-transition: opacity .5s;
483 | }
484 | 
485 | [data-slide="26"] .c17 {
486 |     font-size: 90px;
487 |     letter-spacing: -6px;
488 |     line-height: 1em;
489 |     opacity: 0;
490 |     -webkit-transition: opacity .5s;
491 |     padding-top: 0;
492 | }
493 | [data-slide="26"] .drop {
494 |     font-size: 240px;
495 |     letter-spacing: -10px;
496 |     position: relative;
497 |     top: 55px;
498 |     font-style: normal;
499 |     left: 20px;
500 |     font-weight: 100;
501 | }
502 | #container.slide26 [data-slide="25"] p {
503 |     opacity: 0;
504 | }
505 | #container.slide26 .c17 {
506 |     opacity: 1;
507 | }
508 | #advance {
509 |     margin-left: 18px;
510 | }
511 | 
512 | #container.slide27 {
513 | /*    -webkit-transform: rotate(-90deg) translate3d(-350px, -400px, 0); */
514 | }
515 | #container.slide27 [data-slide="26"] {
516 |     visibility: hidden;
517 | }
518 | [data-slide="27"] {
519 | /*    -webkit-transform: rotate(90deg);  */
520 | }
521 | #expand {
522 |     -webkit-transition: opacity .2s;
523 | }
524 | #advance {
525 |     -webkit-transition: opacity .2s;
526 |     -webkit-transition-delay: 1s;
527 | }
528 | #container.slide28 #expand,
529 | #container.slide28 #advance {
530 |     opacity: 0;
531 | }
532 | #container.slide28 [data-slide="23"] {
533 |     opacity: 0;
534 | }
535 | #container.slide28 [data-slide="29"] {
536 |     opacity: 0;
537 | }
538 | [data-slide="29"] p,
539 | [data-slide="29"] img  {
540 |     -webkit-transition: opacity .2s;
541 | 
542 | 
543 | }
544 | #container.slide29 [data-slide="29"] {
545 |     opacity:1;
546 | }
547 | [data-slide="29"] img {
548 |     -webkit-transition-delay: 4s;
549 | }
550 | 
551 | #container.slide29 {
552 |     -webkit-transform: none;
553 | }
554 | 
555 | #container.slide30 {
556 |     -webkit-transform: translate3d(0, -350px, 0);
557 | }
558 | 
559 | [data-slide="29"] img {
560 |     border: 2px solid gray;
561 |     margin: 40px auto;
562 |     display: block;
563 |     -webkit-box-shadow: 10px 0px 50px rgba(50,50,50,.2);
564 | }
565 | 
566 | #container.slide31 {
567 |     -webkit-transform: translate3d(0, -1000px, 0);
568 | }
569 | #container.slide32 {
570 |     -webkit-transform: translate3d(0, -1300px, 0);
571 | }
572 | #container.slide33 {
573 |     -webkit-transform: translate3d(0, -1500px, 0);
574 | }
575 | #container.slide34 {
576 |     -webkit-transform: translate3d(0, -2500px, 0);
577 | }
578 | #container.slide34 blockquote {
579 |     opacity: 1;
580 | }
581 | [data-slide="34"] {
582 |     top: 2400px;
583 | }
584 | [data-slide="34"] blockquote {
585 |     opacity: 0;
586 |     -webkit-transition: opacity 2s;
587 |     -webkit-transition-delay: 2s;
588 | }
589 | [data-slide="34"] blockquote p {
590 |     padding-bottom: 1em;
591 | }
592 | [data-slide="34"] blockquote cite {
593 |     -webkit-transition-delay: 3s;
594 |     text-align: right;
595 | }
596 | 
597 | 
598 | #container.slide31 .w5 {
599 |     -webkit-transform: translate3d(1600px, 0, 0);    
600 | }
601 | 
602 | #pinsky p {
603 |     text-align: left;
604 |     margin-left: 80px;
605 |     line-height: 50px;
606 | }
607 | 
608 | 
609 | /* Other styles */
610 | #article1, #map1, #map2 {
611 |     -webkit-box-shadow: 10px 0px 50px rgba(50,50,50,1);
612 |     opacity: 0; 
613 | }
614 | 
615 | .w1, .w2, .w3, .w4, .w5 {
616 |     -webkit-transition: -webkit-transform;
617 |     display: inline-block;
618 | }
619 | .w1 {
620 |     -webkit-transition-delay: 2s;
621 |     -webkit-transition-duration: 1s;
622 |     -webkit-transition-function: ease-in;
623 | }
624 | .w2 {
625 |     -webkit-transition-delay: 1.75s;
626 |     -webkit-transition-duration: 1.5s;
627 |     -webkit-transition-function: ease-out;
628 | }
629 | .w3 {
630 |     -webkit-transition-delay: 1.5s;
631 |     -webkit-transition-duration: .5s;
632 |     -webkit-transition-function: ease-in-out;
633 | }
634 | .w4 {
635 |     -webkit-transition-delay: 1.33s;
636 |     -webkit-transition-duration: .5s;
637 |     -webkit-transition-function: ease-in-out;
638 | }
639 | .w5 {
640 |     -webkit-transition-delay: 3s;
641 |     -webkit-transition-duration: .5s;
642 |     -webkit-transition-function: ease-in-out;
643 | }


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/League_Gothic-webfont.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" standalone="no"?>
  2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
  3 | <svg xmlns="http://www.w3.org/2000/svg">
  4 | <metadata>
  5 | This is a custom SVG webfont generated by Font Squirrel.
  6 | Copyright   : Generated in 2009 by FontLab Studio Copyright info pending
  7 | </metadata>
  8 | <defs>
  9 | <font id="webfontFHzvtkso" horiz-adv-x="686" >
 10 | <font-face units-per-em="2048" ascent="1505" descent="-543" />
 11 | <missing-glyph horiz-adv-x="315" />
 12 | <glyph unicode=" "  horiz-adv-x="315" />
 13 | <glyph unicode="&#x09;" horiz-adv-x="315" />
 14 | <glyph unicode="&#xa0;" horiz-adv-x="315" />
 15 | <glyph unicode="!" horiz-adv-x="387" d="M74 1505h239l-55 -1099h-129zM86 0v227h215v-227h-215z" />
 16 | <glyph unicode="&#x22;" horiz-adv-x="329" d="M57 1505h215l-30 -551h-154z" />
 17 | <glyph unicode="#" horiz-adv-x="1232" d="M49 438l27 195h198l37 258h-196l26 194h197l57 420h197l-57 -420h260l57 420h197l-58 -420h193l-27 -194h-192l-37 -258h190l-26 -195h-191l-59 -438h-197l60 438h-261l-59 -438h-197l60 438h-199zM471 633h260l37 258h-260z" />
 18 | <glyph unicode="$" horiz-adv-x="692" d="M37 358l192 13q12 -186 129 -187q88 0 93 185q0 29 -8.5 59.5t-19.5 55t-32.5 60.5t-34.5 53l-40 55q-28 38 -35 50q-68 92 -101 141.5t-70.5 141.5t-37.5 170q4 293 215 342v131h123v-125q201 -23 235 -282l-192 -25q-6 57 -28 92t-65 33q-80 -2 -84 -162 q0 -29 8.5 -60.5t18.5 -54t32.5 -59.5t34.5 -53l41 -59q30 -42 38 -52q6 -10 32 -48l37 -52q10 -14 33.5 -51t34.5 -58l26 -55q16 -35 23.5 -61.5t13.5 -60.5t6 -64q-4 -338 -245 -369v-217h-123v221q-236 41 -250 352z" />
 19 | <glyph unicode="%" horiz-adv-x="1001" d="M55 911v437q0 6 1 18t9.5 42t23.5 53.5t48 42t78 18.5q70 0 110 -44t44 -87l4 -43v-437q0 -6 -1 -18t-9.5 -43t-23.5 -53.5t-47 -42t-77 -19.5q-72 0 -112 44t-44 89zM158 0l553 1505h131l-547 -1505h-137zM178 911q-4 -55 37 -55q16 0 25.5 14.5t9.5 26.5v14v437 q2 55 -35 55q-18 0 -27.5 -13.5t-9.5 -27.5v-14v-437zM631 158v436q0 6 1 18.5t9 43t23.5 53t48 42t78.5 19.5q70 0 109.5 -44t43.5 -87l4 -45v-436q0 -6 -1 -18.5t-9 -42t-23.5 -53.5t-47 -42t-76.5 -18q-72 0 -112 43t-44 88zM754 158q-4 -57 37 -58q16 0 24 14.5t8 28.5 l2 15v436q2 55 -34 55q-18 0 -27.5 -13t-9.5 -28v-14v-436z" />
 20 | <glyph unicode="&#x26;" horiz-adv-x="854" d="M49 315q0 115 44 214.5t126 222.5q-106 225 -106 442v18q0 12 5 46t13 65t28.5 69t48.5 65.5t73 46t102 18.5q78 0 134 -34t80 -82t37 -96t13 -81v-35q0 -162 -205 -434q76 -174 148 -285q33 96 47 211l176 -33q-16 -213 -92 -358q55 -63 92 -76v-235q-23 0 -86 37.5 t-123 101.5q-123 -139 -252 -139t-216 97t-87 234zM262 326q2 -66 29.5 -108t70.5 -42q59 0 125 86q-88 139 -174 295q-6 -10 -14 -28.5t-22.5 -77.5t-14.5 -125zM305 1194q0 -111 55 -246q100 156 101 252q-2 2 0 15.5t-2 36t-11.5 43t-23.5 36t-41 15.5q-39 0 -58.5 -38 t-19.5 -75v-39z" />
 21 | <glyph unicode="'" horiz-adv-x="309" d="M45 1012l72 266h-72v227h215v-227l-113 -266h-102z" />
 22 | <glyph unicode="(" horiz-adv-x="561" d="M66 645q0 143 29.5 292.5t72.5 261.5t87 204t73 139l30 47l162 -84l-27.5 -40.5t-62.5 -114.5t-79 -182.5t-61.5 -238t-27.5 -284.5t26.5 -282.5t64.5 -240.5t76 -178t65 -118l26 -39l-162 -84q-12 18 -31.5 50t-69.5 133.5t-89 207t-70.5 257t-31.5 294.5z" />
 23 | <glyph unicode=")" horiz-adv-x="561" d="M41 -213q10 14 27.5 41t62.5 115t79 181t61.5 236.5t27.5 284.5t-26.5 282.5t-64.5 241t-76 179t-64 118.5l-27 39l162 84q12 -18 31.5 -50t69.5 -134t89 -206.5t71 -257.5t32 -296t-30 -292.5t-74 -261t-87 -203t-72 -138.5l-30 -47z" />
 24 | <glyph unicode="*" horiz-adv-x="677" d="M74 1251l43 148l164 -70l-19 176h154l-19 -176l164 70l43 -148l-172 -34l115 -138l-131 -80l-78 152l-76 -152l-131 80l115 138z" />
 25 | <glyph unicode="+" horiz-adv-x="1060" d="M74 649v172h370v346h172v-346h371v-172h-371v-346h-172v346h-370z" />
 26 | <glyph unicode="," horiz-adv-x="309" d="M45 0v227h215v-227l-113 -266h-102l72 266h-72z" />
 27 | <glyph unicode="-" horiz-adv-x="444" d="M74 455v194h297v-194h-297z" />
 28 | <glyph unicode="." horiz-adv-x="321" d="M53 0v227h215v-227h-215z" />
 29 | <glyph unicode="/" horiz-adv-x="720" d="M8 -147l543 1652h162l-537 -1652h-168z" />
 30 | <glyph unicode="0" horiz-adv-x="724" d="M68 309v887q0 12 2 34.5t17 79t43 99.5t88.5 78t144 35t144 -34t88.5 -81t43 -95t17 -83l2 -33v-887q0 -12 -2 -34.5t-17 -79t-43 -99.5t-88.5 -77.5t-144 -34.5t-144 33.5t-88.5 80.5t-43 95.5t-17 80.5zM289 309q0 -12 1 -30.5t19.5 -49t53 -30.5t53 27.5t18.5 56.5 l2 26v887q0 12 -1 30.5t-19.5 49.5t-53 31t-53 -28t-18.5 -54l-2 -29v-887z" />
 31 | <glyph unicode="1" horiz-adv-x="475" d="M25 1180v141q82 16 140 62.5t77 82.5l18 39h133v-1505h-221v1180h-147z" />
 32 | <glyph unicode="2" horiz-adv-x="731" d="M55 0v219l39 62q25 39 88.5 152.5t112.5 220t91 241.5t44 238q0 184 -73.5 184t-73.5 -184v-105h-222v105q0 389 295 389t295 -375q0 -336 -346 -928h350v-219h-600z" />
 33 | <glyph unicode="3" d="M45 1071q0 70 2 115t17.5 115.5t44 112.5t84 75t135.5 33q78 0 135 -31t84.5 -71t44 -92t19.5 -79.5t3 -50.5q0 -291 -106 -397l-2 -2q127 -100 127 -414q0 -25 -3 -58.5t-19.5 -99t-44 -116t-85 -89t-135.5 -38.5q-80 0 -136 31.5t-86 75.5t-47.5 112.5t-20.5 118 t-3 112.5h217q2 -150 17.5 -203t58.5 -53q45 0 57.5 50.5t12.5 140.5q0 18 1 66t0 62.5t-4 49.5t-10 46l-18 33q-12 22 -29.5 29t-45 15t-62.5 10h-19v184q37 2 62.5 7.5t45 14.5t31 21.5t17.5 29.5t9 39.5t3 51.5v62v43q0 45 -1 68.5t-7 58t-21.5 51t-39.5 16.5 q-41 0 -52.5 -49t-13.5 -207h-217z" />
 34 | <glyph unicode="4" horiz-adv-x="684" d="M25 328v194l323 983h221v-983h103v-194h-103v-328h-202v328h-342zM213 522h154v471v45h-13l-12 -45z" />
 35 | <glyph unicode="5" horiz-adv-x="704" d="M74 438h221v-59q0 -115 14.5 -159t52.5 -44q37 0 52.5 45t15.5 156v336q0 111 -70 110q-33 0 -59.5 -40t-26.5 -70h-186v792h535v-219h-344v-313q8 6 21 15t47 23.5t59 12.5q78 0 133 -40t76.5 -99.5t28.5 -100.5t7 -71v-336q0 -393 -289 -393q-78 0 -133 29.5 t-84.5 71.5t-46 108.5t-20.5 118.5t-4 126z" />
 36 | <glyph unicode="6" horiz-adv-x="700" d="M66 309v856q0 356 288.5 356.5t288.5 -356.5v-94h-221q0 162 -11.5 210t-56.5 48q-39 0 -53 -37t-14 -127v-268q59 37 110 37q80 0 133.5 -36t76 -93t29.5 -101.5t7 -87.5v-307q0 -41 -8 -84t-34 -103.5t-89 -99t-157.5 -38.5t-158 38.5t-89 99t-33.5 103.5t-8 84z M287 244q0 -20 17.5 -44t49.5 -24q31 0 49.5 24.5t18.5 43.5v450q0 18 -18.5 43t-49 25t-48 -20.5t-19.5 -41.5v-456z" />
 37 | <glyph unicode="7" horiz-adv-x="589" d="M8 1286v219h557v-221l-221 -1284h-229l225 1286h-332z" />
 38 | <glyph unicode="8" horiz-adv-x="696" d="M53 322v176q0 188 115 297q-102 102 -102 276v127q0 23 2 49.5t18 79.5t43 93t84 71t135 31t135.5 -31t84 -71t43 -93t18.5 -79.5t2 -49.5v-127q0 -174 -103 -276q115 -109 115 -297v-176q0 -25 -2 -52.5t-18.5 -83t-45 -96.5t-88 -73.5t-141.5 -32.5t-141.5 32.5 t-88 73.5t-45 96.5t-18.5 83t-2 52.5zM268 410q2 -127 17.5 -175.5t62.5 -48.5q37 0 54.5 30t21.5 71t4 123q0 152 -13.5 209t-66.5 57t-66.5 -57t-13.5 -209zM283 1120q0 -127 12 -177t53 -50t53.5 50t12.5 177q0 113 -12.5 160t-53.5 47q-37 0 -50 -44t-15 -163z" />
 39 | <glyph unicode="9" horiz-adv-x="700" d="M57 340v94h222q0 -162 11 -210t56 -48q39 0 53.5 37t14.5 127v283q-59 -37 -111 -37q-80 0 -133 35.5t-75.5 93t-30 101.5t-7.5 87v293q0 41 8.5 84t34 103.5t89 99.5t157.5 39t157.5 -39t89 -99.5t34 -103.5t8.5 -84v-856q0 -356 -289 -356t-289 356zM279 825 q0 -18 18 -42.5t49 -24.5t48.5 20.5t19.5 40.5v443q0 20 -17.5 43.5t-50.5 23.5q-31 0 -49 -24.5t-18 -42.5v-437z" />
 40 | <glyph unicode=":" horiz-adv-x="362" d="M74 0v227h215v-227h-215zM74 893v227h215v-227h-215z" />
 41 | <glyph unicode=";" horiz-adv-x="362" d="M74 0v227h215v-227l-113 -266h-102l71 266h-71zM74 893v227h215v-227h-215z" />
 42 | <glyph unicode="&#x3c;" horiz-adv-x="1058" d="M74 649v160l911 475v-199l-698 -356l698 -356v-199z" />
 43 | <glyph unicode="=" horiz-adv-x="1058" d="M74 477v172h911v-172h-911zM74 864v172h911v-172h-911z" />
 44 | <glyph unicode="&#x3e;" horiz-adv-x="1058" d="M74 174v199l698 356l-698 356v199l911 -475v-160z" />
 45 | <glyph unicode="?" horiz-adv-x="645" d="M25 1260q12 33 33.5 68.5t59.5 81.5t96 76t124 27q82 -2 138 -33.5t82 -81.5t36 -91t10 -80q0 -82 -80 -219l-57 -96q-18 -32 -42 -106.5t-24 -143.5v-256h-190v256q0 102 24.5 195t48 140t64.5 117q43 72 53 113q6 27 -11 60.5t-56 33.5q-47 2 -82 -47t-49 -98zM199 0 h215v227h-215v-227z" />
 46 | <glyph unicode="@" horiz-adv-x="872" d="M66 303v889q0 43 17 94t56 106.5t117 92.5t184.5 37t184 -37t116.5 -92.5t56.5 -106.5t17.5 -94v-793h-164l-20 56q-4 -8 -11.5 -19.5t-37 -30t-64.5 -18.5q-145 0 -145 172v485q0 170 145 170q35 0 63.5 -17t39.5 -34l10 -16v45q0 51 -45 104.5t-145.5 53.5 t-145.5 -53.5t-45 -104.5v-889q0 -53 44 -103t146 -50q117 0 168 63l152 -86q-109 -143 -320 -143q-106 0 -184 35.5t-117 90t-56 103.5t-17 90zM535 573q0 -53 47 -53q49 0 49 53v455q0 53 -49 53q-47 0 -47 -53v-455z" />
 47 | <glyph unicode="A" horiz-adv-x="765" d="M20 0l228 1505h270l227 -1505h-215l-41 307h-213l-40 -307h-216zM307 541h152l-64 475l-6 39h-12l-6 -39z" />
 48 | <glyph unicode="B" horiz-adv-x="745" d="M82 0v1505h194q205 0 304.5 -91t99.5 -308q0 -106 -29.5 -175t-107.5 -136q6 -2 16 -9.5t37 -35t47.5 -65.5t36.5 -106.5t16 -152.5q0 -414 -342 -426h-272zM303 219q74 0 109 31q55 55 55 201q0 82 -16.5 134t-46 70.5t-48 22.5t-45.5 4h-8v-463zM303 885q23 0 34 1 t40 10t45 28.5t30.5 60.5t14.5 100.5t-14.5 100.5t-30.5 60.5t-45 28.5t-40 10t-34 1v-401z" />
 49 | <glyph unicode="C" horiz-adv-x="708" d="M68 309v887q0 12 2 34.5t17 79t43 99.5t88.5 78t144 35t144 -34t88.5 -81t43 -95t17 -83l2 -33v-207h-206v207q-2 0 0 11.5t-3.5 27.5t-12.5 32.5t-24.5 28t-43.5 11.5q-35 0 -54.5 -28t-21.5 -54l-2 -29v-887q0 -12 2 -30.5t21.5 -49t54.5 -30.5q41 0 62.5 27.5 t21.5 56.5v26v207h206v-207q0 -12 -2 -34.5t-17 -79t-43 -99.5t-88.5 -77.5t-144 -34.5t-144 33.5t-88.5 80.5t-43 95.5t-17 80.5z" />
 50 | <glyph unicode="D" horiz-adv-x="761" d="M82 0v1505h174q90 0 153.5 -12t112.5 -33.5t80 -67.5t50.5 -95.5t28.5 -139.5t12 -177t3 -228.5t-3 -228.5t-12 -176t-28.5 -138t-50.5 -95t-80 -67.5t-112.5 -34t-153.5 -12.5h-174zM303 221q94 0 123 41q39 55 41 320v172v52q0 330 -25 402q-23 66 -92 74q-18 2 -47 2 v-1063z" />
 51 | <glyph unicode="E" horiz-adv-x="628" d="M82 0v1505h506v-227h-285v-395h205v-242h-205v-414h285v-227h-506z" />
 52 | <glyph unicode="F" horiz-adv-x="616" d="M82 0v1505h526v-227h-305v-395h205v-228h-205v-655h-221z" />
 53 | <glyph unicode="G" horiz-adv-x="737" d="M68 274v35v887q0 12 2 34.5t17 79t43 99.5t88.5 78t144 35t144 -34t88.5 -81t43 -95t17 -83l2 -33v-231h-221v231q0 12 -1 30.5t-19.5 49.5t-53 31t-53 -28t-18.5 -54l-2 -29v-905q0 -12 1 -30.5t19.5 -49.5t53 -31t53 28t18.5 54l2 29v272h-88v187h309v-750h-131l-26 72 q-70 -88 -172 -88q-78 0 -134.5 33.5t-80 80.5t-34.5 95t-11 81z" />
 54 | <glyph unicode="H" horiz-adv-x="778" d="M82 0v1505h221v-622h172v622h221v-1505h-221v655h-172v-655h-221z" />
 55 | <glyph unicode="I" horiz-adv-x="385" d="M82 0v1505h221v-1505h-221z" />
 56 | <glyph unicode="J" horiz-adv-x="423" d="M12 -14v217q4 0 12.5 -1t29 2t35.5 12t28.5 34.5t13.5 62.5v1192h221v-1226q0 -137 -79 -221q-70 -74 -222 -73q-19 0 -39 1z" />
 57 | <glyph unicode="K" horiz-adv-x="768" d="M82 0v1505h221v-501v-25h8l11 25l184 501h215l-203 -495l230 -1010h-216l-153 655l-6 31h-6l-13 -31l-51 -123v-532h-221z" />
 58 | <glyph unicode="L" horiz-adv-x="604" d="M82 0v1505h221v-1300h293v-205h-514z" />
 59 | <glyph unicode="M" horiz-adv-x="991" d="M82 0v1505h270l131 -688l11 -80h4l10 80l131 688h270v-1505h-204v946v64h-13l-8 -64l-141 -946h-94l-142 946l-8 64h-12v-64v-946h-205z" />
 60 | <glyph unicode="N" horiz-adv-x="808" d="M82 0v1505h197l215 -784l18 -70h12v70v784h203v-1505h-197l-215 784l-18 70h-12v-70v-784h-203z" />
 61 | <glyph unicode="O" horiz-adv-x="724" d="M68 309v887q0 12 2 34.5t17 79t43 99.5t88.5 78t144 35t144 -34t88.5 -81t43 -95t17 -83l2 -33v-887q0 -12 -2 -34.5t-17 -79t-43 -99.5t-88.5 -77.5t-144 -34.5t-144 33.5t-88.5 80.5t-43 95.5t-17 80.5zM289 309q0 -12 1 -30.5t19.5 -49t53 -30.5t53 27.5t18.5 56.5 l2 26v887q0 12 -1 30.5t-19.5 49.5t-53 31t-53 -28t-18.5 -54l-2 -29v-887z" />
 62 | <glyph unicode="P" horiz-adv-x="720" d="M82 0v1505h221q166 0 277.5 -105.5t111.5 -345t-111.5 -346t-277.5 -106.5v-602h-221zM303 827q102 0 134 45.5t32 174.5q0 131 -33 182t-133 51v-453z" />
 63 | <glyph unicode="Q" horiz-adv-x="729" d="M68 309v887q0 12 2 34.5t17 79t43 99.5t88.5 78t144 35t144 -34t88.5 -81t43 -95t17 -83l2 -33v-887q0 -94 -45 -182q33 -43 88 -53v-189q-160 0 -227 117q-55 -18 -111 -18q-84 0 -144 33.5t-88 80.5t-43 95.5t-17 80.5zM289 309q0 -12 1 -30.5t19.5 -49t53 -30.5 t53 27.5t18.5 56.5l2 26v887q0 12 -1 30.5t-19.5 49.5t-53 31t-53 -28t-18.5 -54l-2 -29v-887z" />
 64 | <glyph unicode="R" horiz-adv-x="739" d="M82 0v1505h221q377 0 377 -434q0 -258 -123 -342l141 -729h-221l-115 635h-59v-635h-221zM303 840q31 0 52.5 5t51 24.5t45 68.5t15.5 125t-15.5 125t-45 68.5t-51 24.5t-52.5 5v-446z" />
 65 | <glyph unicode="S" horiz-adv-x="702" d="M37 422l217 20q0 -256 104 -256q90 0 91 166q0 29 -8.5 59.5t-32 73.5t-36.5 64l-54 79q-40 58 -48 72q-66 96 -102.5 158t-68 149t-31.5 162q0 139 71.5 245t216.5 108h10q88 0 150 -35q66 -37 95.5 -101.5t42 -127t12.5 -136.5l-217 -20q0 217 -89 217q-76 -2 -75 -150 q0 -18 4 -39.5t10 -39t18.5 -43t20.5 -40t28 -43.5l28 -43l33 -48l32 -46l104 -159q31 -49 67 -139.5t36 -166.5q0 -379 -308 -378q-82 0 -142 25.5t-94 63.5t-53.5 99t-25.5 117.5t-6 132.5z" />
 66 | <glyph unicode="T" horiz-adv-x="647" d="M4 1278v227h639v-227h-209v-1278h-221v1278h-209z" />
 67 | <glyph unicode="U" horiz-adv-x="749" d="M80 309v1196h221v-1196q0 -12 1 -30.5t19.5 -49t53.5 -30.5t53 27.5t18 56.5l3 26v1196h221v-1196q0 -12 -2 -34.5t-17.5 -79t-43 -99.5t-88 -77.5t-144.5 -34.5t-144.5 33.5t-88 80.5t-43 95.5t-17.5 80.5z" />
 68 | <glyph unicode="V" horiz-adv-x="716" d="M18 1505h215l111 -827l8 -64h13l8 64l110 827h215l-229 -1505h-221z" />
 69 | <glyph unicode="W" horiz-adv-x="1036" d="M25 1505h204l88 -782l5 -49h16l6 49l94 782h160l94 -782l6 -49h17l4 49l88 782h205l-203 -1505h-172l-102 713l-13 88h-8l-12 -88l-103 -713h-172z" />
 70 | <glyph unicode="X" horiz-adv-x="737" d="M16 0l244 791l-240 714h218l120 -381l7 -18h8l6 18l121 381h217l-240 -714l244 -791h-217l-127 449l-4 18h-8l-5 -18l-127 -449h-217z" />
 71 | <glyph unicode="Y" horiz-adv-x="700" d="M14 1505h217l111 -481l6 -14h4l6 14l111 481h217l-225 -864v-641h-221v641z" />
 72 | <glyph unicode="Z" horiz-adv-x="626" d="M20 0v238l347 1048h-297v219h536v-219l-352 -1067h352v-219h-586z" />
 73 | <glyph unicode="[" horiz-adv-x="538" d="M82 -16v1521h399v-196h-202v-1325h202v-197h-399v197z" />
 74 | <glyph unicode="\" horiz-adv-x="792" d="M8 1692h162l614 -1872h-168z" />
 75 | <glyph unicode="]" horiz-adv-x="538" d="M57 -16h203v1325h-203v196h400v-1521v-197h-400v197z" />
 76 | <glyph unicode="^" horiz-adv-x="1101" d="M53 809l381 696h234l381 -696h-199l-299 543l-299 -543h-199z" />
 77 | <glyph unicode="_" horiz-adv-x="1210" d="M74 -154h1063v-172h-1063v172z" />
 78 | <glyph unicode="`" horiz-adv-x="1024" d="M293 1489h215l106 -184h-159z" />
 79 | <glyph unicode="a" horiz-adv-x="681" d="M49 260q0 106 34 187t83 124t98 73t88 50.5t43 36.5v37v86q0 102 -57 102q-20 0 -32.5 -9t-17.5 -32.5t-7 -37t-2 -47.5v-39h-207v47q0 123 80.5 211t197.5 88q102 0 177 -74t75 -180v-351v-337q0 -109 14 -195h-202q-18 20 -19 90h-14q-20 -37 -65.5 -71.5t-100.5 -34.5 q-59 0 -112.5 60t-53.5 216zM252 291q0 -104 57 -105q35 0 60.5 19.5t25.5 48.5v287q-143 -62 -143 -250z" />
 80 | <glyph unicode="b" d="M82 0v1505h207v-458q88 90 164 90q78 0 118.5 -69t40.5 -150v-715q0 -82 -41 -150.5t-118 -68.5q-33 0 -74 22.5t-66 44.5l-24 23v-74h-207zM289 246q0 -29 19.5 -48.5t42 -19.5t39 19.5t16.5 48.5v628q0 29 -16.5 48.5t-39 19.5t-42 -21.5t-19.5 -46.5v-628z" />
 81 | <glyph unicode="c" horiz-adv-x="645" d="M66 315v490q0 332 264 332q137 0 201.5 -71t64.5 -251v-88h-207v135q0 51 -12 70.5t-47 19.5q-57 0 -58 -90v-604q0 -90 58 -90q35 0 47 19.5t12 70.5v156h207v-109q0 -180 -64.5 -250.5t-201.5 -70.5q-264 -1 -264 331z" />
 82 | <glyph unicode="d" d="M74 203v715q0 82 41 150.5t118 68.5q33 0 74 -22.5t66 -45.5l24 -22v458h207v-1505h-207v74q-88 -90 -164 -90q-78 0 -118.5 68.5t-40.5 150.5zM281 246q0 -29 16 -48.5t38.5 -19.5t42 19.5t19.5 48.5v628q0 25 -19.5 46.5t-42 21.5t-38.5 -19.5t-16 -48.5v-628z" />
 83 | <glyph unicode="e" horiz-adv-x="659" d="M66 279v563q0 12 2 31.5t16 70.5t40 90t81 71t129 32q76 0 130 -30t79.5 -73t40 -85t14.5 -72l2 -29v-326h-342v-243v-13q0 -8 4 -27.5t11.5 -34t23.5 -26.5t37 -12q35 0 53.5 27.5t18.5 56.5l2 29v122h192v-129q0 -12 -2 -31.5t-16.5 -68.5t-39 -88t-79.5 -69.5 t-131 -30.5q-74 0 -129.5 30.5t-80 73.5t-38.5 86t-16 74zM258 684h150v158q0 12 -1 31.5t-19.5 51t-53.5 31.5q-33 0 -52.5 -28.5t-21.5 -57.5l-2 -28v-158z" />
 84 | <glyph unicode="f" horiz-adv-x="475" d="M20 934v186h105v17v14q0 51 2 84t14.5 92t35 94t70.5 63.5t115 28.5q29 0 53.5 -3t35.5 -7l8 -4v-178q-27 8 -62 8q-66 0 -65 -180v-16v-13h104v-186h-104v-934h-207v934h-105z" />
 85 | <glyph unicode="g" horiz-adv-x="700" d="M12 -184q0 94 162 170q-125 35 -125 149q0 45 40 93t89 75q-51 35 -80.5 95.5t-34.5 105.5l-4 43v305q0 12 2 30.5t16.5 67.5t39 87t79 69t126.5 31q135 0 206 -103q102 102 170 103v-185q-72 0 -120 -24l10 -70v-317q0 -10 -2 -29.5t-17.5 -67t-40 -84t-79 -66.5 t-127.5 -30q-27 0 -39 2q-29 -25 -29 -51q0 -16 11 -28.5t42 -20.5t45.5 -10t59.5 -11q57 -8 101 -21t89 -41t70.5 -78t25.5 -120q0 -152 -103 -219t-251 -67q-164 4 -248 52t-84 165zM213 -150q0 -78 135 -77q59 0 108.5 19.5t49.5 55.5q0 33 -20.5 50.5t-90.5 29.5 l-106 21q-76 -44 -76 -99zM262 509q0 -17 15.5 -45t44.5 -28q31 0 47 25.5t16 50.5v25v307q-1 1 -1 3.5t1 7.5t1 6q0 8 -3 19q-4 15 -9 30.5t-18.5 25.5t-33.5 10q-29 0 -44.5 -25.5t-15.5 -52.5v-24v-307v-28z" />
 86 | <glyph unicode="h" horiz-adv-x="690" d="M82 0v1505h207v-479l32 32q30 30 66.5 54.5t69.5 24.5q76 0 115.5 -69t39.5 -150v-918h-206v887q0 49 -50 49q-18 0 -34.5 -13.5t-24.5 -25.5l-8 -14v-883h-207z" />
 87 | <glyph unicode="i" horiz-adv-x="370" d="M82 0v1120h207v-1120h-207zM82 1298v207h207v-207h-207z" />
 88 | <glyph unicode="j" horiz-adv-x="364" d="M-45 -182q29 -8 57 -8q64 0 64 142v10.5v10.5v1147h207v-1149q0 -51 -2 -83.5t-14.5 -90t-35 -92.5t-70.5 -62.5t-116 -27.5q-29 0 -51.5 3t-30.5 5l-8 4v191zM76 1298v207h207v-207h-207z" />
 89 | <glyph unicode="k" horiz-adv-x="641" d="M82 0v1505h207v-678v-36h10l12 36l101 293h186l-149 -364l188 -756h-199l-102 453l-4 16h-10l-7 -16l-26 -66v-387h-207z" />
 90 | <glyph unicode="l" horiz-adv-x="370" d="M82 0v1505h207v-1505h-207z" />
 91 | <glyph unicode="m" horiz-adv-x="1021" d="M82 0v1120h207v-94q2 0 32.5 30.5t68.5 55.5t71 25q100 0 139 -125l43 41t76 60.5t69 23.5q76 0 116 -69t40 -150v-918h-194v887q0 49 -56 49q-18 0 -37.5 -13.5t-29.5 -25.5l-11 -14v-883h-194v887q0 49 -55 49q-18 0 -38 -13.5t-30 -25.5l-10 -14v-883h-207z" />
 92 | <glyph unicode="n" horiz-adv-x="690" d="M82 0v1120h207v-94l32 32q30 30 66.5 54.5t69.5 24.5q76 0 115.5 -69t39.5 -150v-918h-206v887q0 49 -50 49q-18 0 -34.5 -13.5t-24.5 -25.5l-8 -14v-883h-207z" />
 93 | <glyph unicode="o" horiz-adv-x="657" d="M63 279v563q0 12 1.5 31.5t15.5 70.5t38.5 90t80 71t129.5 32q76 0 130 -30t79.5 -73t40 -85t16.5 -72v-29v-576q0 -12 -1 -31.5t-15.5 -68.5t-40 -88t-80 -69.5t-129.5 -30.5q-74 0 -129.5 30.5t-80 73.5t-38.5 86t-14 74zM257 259q0 -9 3 -20q4 -17 10 -34t21.5 -28 t36.5 -11q35 0 52 27.5t17 56.5l2 29v563q-2 0 0 11q1 4 1 8q0 9 -3 21q-4 17 -10 33.5t-21.5 28.5t-37.5 12q-33 0 -50.5 -28.5t-19.5 -57.5v-28v-563q1 -1 1 -4t-1 -9t-1 -7z" />
 94 | <glyph unicode="p" d="M82 -385v1505h207v-73q88 90 164 90q78 0 118.5 -69t40.5 -150v-715q0 -82 -41 -150.5t-118 -68.5q-33 0 -74 22.5t-66 44.5l-24 23v-459h-207zM289 246q0 -25 19.5 -46.5t42 -21.5t39 19.5t16.5 48.5v628q0 29 -16.5 48.5t-39 19.5t-42 -19.5t-19.5 -48.5v-628z" />
 95 | <glyph unicode="q" d="M74 203v715q0 82 41 150.5t118 68.5q33 0 74 -22.5t66 -45.5l24 -22v73h207v-1505h-207v459q-88 -90 -164 -90q-78 0 -118.5 68.5t-40.5 150.5zM281 246q0 -29 16 -48.5t38.5 -19.5t42 21.5t19.5 46.5v628q0 29 -19.5 48.5t-42 19.5t-38.5 -19.5t-16 -48.5v-628z" />
 96 | <glyph unicode="r" horiz-adv-x="503" d="M82 0v1120h207v-125q8 41 58 91.5t149 50.5v-230q-34 11 -64 11q-56 0 -98 -37q-45 -41 -45 -103v-778h-207z" />
 97 | <glyph unicode="s" horiz-adv-x="630" d="M37 326h192q0 -170 97 -170q72 0 71 135q0 74 -129 198q-68 66 -98.5 99t-64 101.5t-33.5 144.5q0 55 12 104t39 95t78 74t123 30h11q78 0 131 -26q56 -28 80.5 -79t33 -95t8.5 -103h-193q0 131 -67 131q-63 -2 -64 -131q0 -33 23.5 -73t45 -62.5t66.5 -65.5 q190 -182 191 -342q0 -123 -64.5 -215t-199.5 -92q-72 0 -126.5 24.5t-85 60t-49 85t-23.5 89.5t-5 83z" />
 98 | <glyph unicode="t" horiz-adv-x="501" d="M20 934v186h105v277h207v-277h141v-186h-141v-557q0 -184 65 -184l76 8v-203q-45 -14 -111 -14q-68 0 -115.5 28.5t-70 64.5t-35 96t-14.5 95t-2 92v574h-105z" />
 99 | <glyph unicode="u" horiz-adv-x="690" d="M78 203v917h207v-887q0 -49 49 -49q18 0 34.5 13.5t24.5 27.5l8 13v882h207v-1120h-207v94l-31 -32q-30 -30 -67 -54t-70 -24q-76 0 -115.5 68.5t-39.5 150.5z" />
100 | <glyph unicode="v" horiz-adv-x="602" d="M16 1120h201l68 -649l8 -72h16l8 72l68 649h201l-183 -1120h-204z" />
101 | <glyph unicode="w" horiz-adv-x="905" d="M20 1120h189l65 -585l9 -64h12l10 64l86 585h123l86 -585l10 -64h13l8 64l65 585h189l-166 -1120h-172l-80 535l-10 63h-8l-11 -63l-80 -535h-172z" />
102 | <glyph unicode="x" horiz-adv-x="618" d="M16 0l193 578l-176 542h194l74 -262l6 -31h4l6 31l74 262h195l-176 -542l192 -578h-201l-84 283l-6 30h-4l-6 -30l-84 -283h-201z" />
103 | <glyph unicode="y" horiz-adv-x="634" d="M25 1120h202l82 -688l4 -57h9l4 57l82 688h202l-198 -1204q-16 -127 -94 -222t-193 -95l-92 4v184q16 -4 49 -4q61 6 97 61.5t36 122.5z" />
104 | <glyph unicode="z" horiz-adv-x="532" d="M12 0v168l285 764h-240v188h459v-168l-285 -764h285v-188h-504z" />
105 | <glyph unicode="{" horiz-adv-x="688" d="M61 453v163q72 0 102 49.5t30 90.5v397q0 223 96 298t342 71v-172q-135 2 -188.5 -38t-53.5 -159v-397q0 -143 -127 -221q127 -82 127 -222v-397q0 -119 53.5 -159t188.5 -38v-172q-246 -4 -342 71t-96 298v397q0 20 -8.5 47t-41.5 59t-82 34z" />
106 | <glyph unicode="|" horiz-adv-x="356" d="M82 -512v2204h192v-2204h-192z" />
107 | <glyph unicode="}" horiz-adv-x="688" d="M57 -281q135 -2 188.5 38t53.5 159v397q0 139 127 222q-127 78 -127 221v397q0 119 -53 159t-189 38v172q246 4 342.5 -71t96.5 -298v-397q0 -23 8 -50.5t41 -58.5t82 -31v-163q-72 -4 -101.5 -52.5t-29.5 -87.5v-397q0 -223 -96.5 -298t-342.5 -71v172z" />
108 | <glyph unicode="~" horiz-adv-x="1280" d="M113 1352q4 12 12 32.5t38 73.5t64.5 94t95 74t126.5 33q55 0 111 -18.5t82 -33t83 -51.5q106 -72 174 -71q57 0 105.5 46t66.5 91l19 45l135 -57q-4 -12 -12.5 -34t-38 -75t-64.5 -93t-91 -74t-120 -34q-121 0 -272 101q-115 74 -178.5 74t-113.5 -45.5t-69 -90.5 l-18 -45z" />
109 | <glyph unicode="&#xa2;" horiz-adv-x="636" d="M66 508v489q0 297 208 328v242h123v-244q98 -16 144.5 -88t46.5 -227v-88h-189v135q0 90 -73 90q-72 0 -72 -90v-604q0 -90 72 -91q74 0 73 91v155h189v-108q0 -156 -46 -228.5t-145 -89.5v-303h-123v301q-208 31 -208 330z" />
110 | <glyph unicode="&#xa3;" horiz-adv-x="817" d="M4 63q8 20 23.5 53.5t70 91.5t117.5 68q37 111 37 199q0 68 -31 174h-188v137h147l-6 21q-78 254 -78 342q0 70 15.5 131t48.5 116.5t92 89.5t139 36q96 2 164 -32t103.5 -93.5t50 -127t14.5 -149.5h-213q0 86 -25.5 142.5t-89.5 54.5q-47 -2 -68.5 -51t-21.5 -117 q0 -113 70 -338l6 -25h211v-137h-174q25 -100 24 -174q0 -104 -57 -219q16 -8 44 -24.5t48.5 -25.5t40.5 -9q74 4 82 190l188 -22q-12 -182 -81.5 -281.5t-169.5 -99.5q-51 0 -143.5 51t-129.5 51q-33 0 -61.5 -25.5t-40.5 -52.5l-12 -24z" />
111 | <glyph unicode="&#xa5;" horiz-adv-x="720" d="M25 1505h217l110 -481l6 -14h4l7 14l110 481h217l-196 -753h147v-138h-176v-137h176v-137h-176v-340h-221v340h-176v137h176v137h-176v138h147z" />
112 | <glyph unicode="&#xa9;" horiz-adv-x="1644" d="M53 751.5q0 317.5 225.5 544t543 226.5t543.5 -226.5t226 -544t-226 -542.5t-543.5 -225t-543 225t-225.5 542.5zM172 751.5q0 -266.5 191.5 -458t457.5 -191.5t459 191.5t193 458.5q0 268 -191.5 459.5t-460.5 191.5q-266 0 -457.5 -192.5t-191.5 -459zM627 487v531 q0 8 1 21.5t11 47t27.5 59t57.5 47t95 21.5q53 0 92 -20t56.5 -49t28 -57.5t12.5 -49.5v-20v-125h-138v125v17q0 11 -12 28.5t-37 17.5q-23 0 -35 -16t-12 -33l-2 -14v-531q0 -63 49 -63q25 0 37 15.5t12 31.5v16v125h138v-125q0 -8 -1 -21t-11.5 -47t-28 -59.5t-56.5 -47 t-92 -21.5q-86 0 -134 49t-54 98z" />
113 | <glyph unicode="&#xad;" horiz-adv-x="444" d="M74 455v194h297v-194h-297z" />
114 | <glyph unicode="&#xae;" horiz-adv-x="1644" d="M53 751.5q0 317.5 225.5 544t543 226.5t543.5 -226.5t226 -544t-226 -542.5t-543.5 -225t-543 225t-225.5 542.5zM172 751.5q0 -266.5 191.5 -458t457.5 -191.5t459 191.5t193 458.5q0 268 -191.5 459.5t-460.5 191.5q-266 0 -457.5 -192.5t-191.5 -459zM625 313v879h196 q231 0 232 -258q0 -76 -16.5 -125t-71.5 -96l106 -400h-151l-95 365h-55v-365h-145zM770 805h45q43 0 65.5 21.5t27.5 45t5 60.5q0 39 -5 63.5t-27.5 46t-65.5 21.5h-45v-258z" />
115 | <glyph unicode="&#xb4;" horiz-adv-x="1024" d="M410 1305l106 184h215l-162 -184h-159z" />
116 | <glyph unicode="&#x2000;" horiz-adv-x="845" />
117 | <glyph unicode="&#x2001;" horiz-adv-x="1691" />
118 | <glyph unicode="&#x2002;" horiz-adv-x="845" />
119 | <glyph unicode="&#x2003;" horiz-adv-x="1691" />
120 | <glyph unicode="&#x2004;" horiz-adv-x="563" />
121 | <glyph unicode="&#x2005;" horiz-adv-x="421" />
122 | <glyph unicode="&#x2006;" horiz-adv-x="280" />
123 | <glyph unicode="&#x2007;" horiz-adv-x="280" />
124 | <glyph unicode="&#x2008;" horiz-adv-x="210" />
125 | <glyph unicode="&#x2009;" horiz-adv-x="337" />
126 | <glyph unicode="&#x200a;" horiz-adv-x="92" />
127 | <glyph unicode="&#x2010;" horiz-adv-x="444" d="M74 455v194h297v-194h-297z" />
128 | <glyph unicode="&#x2011;" horiz-adv-x="444" d="M74 455v194h297v-194h-297z" />
129 | <glyph unicode="&#x2012;" horiz-adv-x="444" d="M74 455v194h297v-194h-297z" />
130 | <glyph unicode="&#x2013;" horiz-adv-x="806" d="M74 649v195h659v-195h-659z" />
131 | <glyph unicode="&#x2014;" horiz-adv-x="972" d="M74 649v195h825v-195h-825z" />
132 | <glyph unicode="&#x2018;" horiz-adv-x="309" d="M49 1012v227l113 266h102l-71 -266h71v-227h-215z" />
133 | <glyph unicode="&#x2019;" horiz-adv-x="309" d="M45 1012l72 266h-72v227h215v-227l-113 -266h-102z" />
134 | <glyph unicode="&#x201c;" horiz-adv-x="624" d="M53 1012v227l113 266h102l-71 -266h71v-227h-215zM356 1012v227l113 266h102l-71 -266h71v-227h-215z" />
135 | <glyph unicode="&#x201d;" horiz-adv-x="624" d="M53 1012l72 266h-72v227h215v-227l-112 -266h-103zM356 1012l72 266h-72v227h215v-227l-112 -266h-103z" />
136 | <glyph unicode="&#x2022;" horiz-adv-x="663" d="M82 817q0 102 72.5 175t179.5 73q102 0 175 -72.5t73 -175.5q0 -106 -73 -179t-175 -73q-106 0 -179 73t-73 179z" />
137 | <glyph unicode="&#x2026;" horiz-adv-x="964" d="M53 0v227h215v-227h-215zM375 0v227h215v-227h-215zM696 0v227h215v-227h-215z" />
138 | <glyph unicode="&#x202f;" horiz-adv-x="337" />
139 | <glyph unicode="&#x205f;" horiz-adv-x="421" />
140 | <glyph unicode="&#x20ac;" horiz-adv-x="813" d="M53 547v137h107v137h-107v137h107v238q0 12 2 34.5t17.5 79t43 99.5t88 78t144.5 35t144 -34t88 -81t43 -95t18 -83l2 -33v-84h-207v84q-2 0 0 11.5t-3 27.5t-12.5 32.5t-25 28t-43.5 11.5q-35 0 -54.5 -28t-21.5 -54l-2 -29v-238h233v-137h-233v-137h233v-137h-233v-238 q0 -12 2 -30.5t21.5 -49t54.5 -30.5q41 0 61.5 27.5t20.5 56.5l2 26v84h207v-84q0 -12 -2.5 -34.5t-17.5 -79t-43 -99.5t-88 -77.5t-144 -34.5t-144.5 33.5t-88 80.5t-43 95.5t-17.5 80.5l-2 35v238h-107z" />
141 | <glyph unicode="&#x2122;" horiz-adv-x="937" d="M74 1401v104h321v-104h-104v-580h-113v580h-104zM440 821v684h138l67 -319h6l68 319h137v-684h-104v449l-78 -449h-51l-80 449v-449h-103z" />
142 | <glyph unicode="&#xe000;" horiz-adv-x="1120" d="M0 1120h1120v-1120h-1120v1120z" />
143 | <glyph unicode="&#xfb01;" horiz-adv-x="772" d="M20 934v186h105v31q0 45 1 69.5t7 77t22.5 84t43 67.5t72.5 53.5t108 17.5q33 0 69.5 -4.5t57.5 -8.5l20 -2v-184q-41 12 -110 12q-31 0 -50.5 -18.5t-25.5 -58t-7 -54t-1 -53.5v-29h358v-1120h-207v934h-151v-934h-207v934h-105z" />
144 | <glyph unicode="&#xfb02;" horiz-adv-x="772" d="M20 934v186h105v31q0 45 1 69.5t7 77t22.5 84t43 67.5t72.5 53.5t108 17.5q33 0 69.5 -4.5t57.5 -8.5l20 -2h164v-1505h-207v1329q-37 4 -67.5 4t-50 -18.5t-25.5 -58t-7 -54t-1 -53.5v-29h104v-186h-104v-934h-207v934h-105z" />
145 | <glyph unicode="&#xfb03;" horiz-adv-x="1320" d="M1032 0v1120h207v-1120h-207zM1032 1298v207h207v-207h-207zM495 934v186h105v17v14q0 51 2 84t14.5 92t35 94t70.5 63.5t115 28.5q29 0 53.5 -3t35.5 -7l8 -4v-178q-27 8 -62 8q-66 0 -65 -180v-16v-13h104v-186h-104v-934h-207v934h-105zM20 934v186h105v17v14 q0 51 2 84t14.5 92t35 94t70.5 63.5t115 28.5q29 0 53.5 -3t35.5 -7l8 -4v-178q-27 8 -62 8q-66 0 -65 -180v-16v-13h104v-186h-104v-934h-207v934h-105z" />
146 | <glyph unicode="&#xfb04;" horiz-adv-x="1320" d="M1032 0v1505h207v-1505h-207zM495 934v186h105v17v14q0 51 2 84t14.5 92t35 94t70.5 63.5t115 28.5q29 0 53.5 -3t35.5 -7l8 -4v-178q-27 8 -62 8q-66 0 -65 -180v-16v-13h104v-186h-104v-934h-207v934h-105zM20 934v186h105v17v14q0 51 2 84t14.5 92t35 94t70.5 63.5 t115 28.5q29 0 53.5 -3t35.5 -7l8 -4v-178q-27 8 -62 8q-66 0 -65 -180v-16v-13h104v-186h-104v-934h-207v934h-105z" />
147 | </font>
148 | </defs></svg> 


--------------------------------------------------------------------------------
/books-in-browsers-2011/fonts/AdobeCaslonProBold-demo.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2 | 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3 | 
  4 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5 | <head>
  6 | 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  8 | 	<script src="specimen_files/easytabs.js" type="text/javascript" charset="utf-8"></script>
  9 | 	<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
 10 | 	<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
 11 | 
 12 | 	<style type="text/css">
 13 | 			body{
 14 | 			font-family: 'AdobeCaslonProBold';
 15 | 					}
 16 | </style>
 17 | 
 18 | <title>Adobe Caslon Pro Bold Specimen</title>
 19 | 	
 20 | 	
 21 | 	<script type="text/javascript" charset="utf-8">
 22 | 		$(document).ready(function() {
 23 | 			$('#container').easyTabs({defaultContent:1});
 24 | 		});
 25 | 	</script>
 26 | </head>
 27 | 
 28 | <body>
 29 | <div id="container">
 30 | 	<div id="header">
 31 | 		Adobe Caslon Pro Bold	</div>
 32 | 	<ul class="tabs">
 33 | 		<li><a href="#specimen">Specimen</a></li>
 34 | 		<li><a href="#layout">Sample Layout</a></li>
 35 | 				<li><a href="#glyphs">Glyphs &amp; Languages</a></li>
 36 | 		<li><a href="#installing">Installing Webfonts</a></li>
 37 | 		
 38 | 	</ul>
 39 | 	
 40 | 	<div id="main_content">
 41 | 
 42 | 		
 43 | 			<div id="specimen">
 44 | 		
 45 | 				<div class="section">
 46 | 					<div class="grid12 firstcol">
 47 | 						<div class="huge">AaBb</div>
 48 | 					</div>
 49 | 				</div>
 50 | 		
 51 | 				<div class="section">
 52 | 					<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>
 53 | 				</div>
 54 | 				<div class="section">
 55 | 					<div class="grid12 firstcol">
 56 | 						<table class="sample_table">
 57 | 							<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
 58 | 							<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
 59 | 							<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
 60 | 							<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
 61 | 							<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
 62 | 							<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
 63 | 							<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
 64 | 							<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
 65 | 							<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
 66 | 							<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
 67 | 							<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
 68 | 							<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
 69 | 							<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
 70 | 							<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
 71 | 							<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
 72 | 						</table>
 73 | 				
 74 | 					</div>
 75 | 			
 76 | 				</div>
 77 | 		
 78 | 		
 79 | 		
 80 | 								<div class="section" id="bodycomparison">
 81 | 
 82 | 
 83 | 										<div id="xheight">
 84 | 				<div class="fontbody">&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
 85 | 										<div class="fontbody" style="z-index:1">
 86 | 											body<span>Adobe Caslon Pro Bold</span>
 87 | 										</div>
 88 | 										<div class="arialbody" style="z-index:1">
 89 | 											body<span>Arial</span>
 90 | 										</div>
 91 | 										<div class="verdanabody" style="z-index:1">
 92 | 											body<span>Verdana</span>
 93 | 										</div>
 94 | 										<div class="georgiabody" style="z-index:1">
 95 | 											body<span>Georgia</span>
 96 | 										</div>
 97 | 
 98 | 
 99 | 
100 | 								</div>
101 | 		
102 | 		
103 | 				<div class="section psample psample_row1" id="">
104 | 					
105 | 					<div class="grid2 firstcol">
106 | 						<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>
107 | 			
108 | 					</div>
109 | 					<div class="grid3">
110 | 						<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>
111 | 			
112 | 					</div>
113 | 					<div class="grid3">
114 | 						<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>
115 | 			
116 | 					</div>
117 | 					<div class="grid4">
118 | 						<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>
119 | 			
120 | 					</div>
121 | 					<div class="white_blend"></div>
122 | 					
123 | 				</div>
124 | 				<div class="section psample psample_row2" id="">
125 | 					<div class="grid3 firstcol">
126 | 						<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>
127 | 			
128 | 					</div>
129 | 					<div class="grid4">
130 | 						<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>
131 | 			
132 | 					</div>
133 | 					<div class="grid5">
134 | 						<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>
135 | 			
136 | 					</div>
137 | 
138 | 					<div class="white_blend"></div>
139 | 
140 | 				</div>
141 | 				
142 | 				<div class="section psample psample_row3" id="">
143 | 					<div class="grid5 firstcol">
144 | 						<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>
145 | 					</div>
146 | 					<div class="grid7">
147 | 						<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>
148 | 					</div>
149 | 					
150 | 					<div class="white_blend"></div>
151 | 					
152 | 				</div>
153 | 				
154 | 				<div class="section psample psample_row4" id="">
155 | 					<div class="grid12 firstcol">
156 | 						<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>
157 | 					</div>
158 | 					<div class="white_blend"></div>
159 | 					
160 | 				</div>
161 | 				
162 | 				
163 | 				
164 | 				<div class="section psample psample_row1 fullreverse">
165 | 					<div class="grid2 firstcol">
166 | 						<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>
167 | 			
168 | 					</div>
169 | 					<div class="grid3">
170 | 						<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>
171 | 			
172 | 					</div>
173 | 					<div class="grid3">
174 | 						<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>
175 | 			
176 | 					</div>
177 | 					<div class="grid4">
178 | 						<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>
179 | 			
180 | 					</div>
181 | 					<div class="black_blend"></div>
182 | 					
183 | 				</div>
184 | 				
185 | 				<div class="section psample psample_row2 fullreverse">
186 | 					<div class="grid3 firstcol">
187 | 						<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>
188 | 			
189 | 					</div>
190 | 					<div class="grid4">
191 | 						<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>
192 | 			
193 | 					</div>
194 | 					<div class="grid5">
195 | 						<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>
196 | 			
197 | 					</div>
198 | 					<div class="black_blend"></div>
199 | 
200 | 				</div>
201 | 				
202 | 				<div class="section psample fullreverse psample_row3" id="">
203 | 					<div class="grid5 firstcol">
204 | 						<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>
205 | 					</div>
206 | 					<div class="grid7">
207 | 						<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>
208 | 					</div>
209 | 					
210 | 					<div class="black_blend"></div>
211 | 					
212 | 				</div>
213 | 				
214 | 				<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
215 | 					<div class="grid12 firstcol">
216 | 						<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>
217 | 					</div>
218 | 					<div class="black_blend"></div>
219 | 					
220 | 				</div>
221 | 				
222 | 				
223 | 				
224 | 				
225 | 			</div>
226 | 			
227 | 			<div id="layout">
228 | 				
229 | 				<div class="section">
230 | 					
231 | 					<div class="grid12 firstcol">
232 | 						<h1>Lorem Ipsum Dolor</h1>
233 | 						<h2>Etiam porta sem malesuada magna mollis euismod</h2>
234 | 						
235 | 						<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
236 | 					</div>
237 | 				</div>
238 | 				<div class="section">
239 | 					<div class="grid8 firstcol">
240 | 						<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>
241 | 
242 | 						
243 | 						<h3>Pellentesque ornare sem</h3>
244 | 
245 | 						<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>
246 | 
247 | 						<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>
248 | 
249 | 						<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
250 | 
251 | 						<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>
252 | 
253 | 						<h3>Cras mattis consectetur</h3>
254 | 
255 | 						<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>
256 | 
257 | 						<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>
258 | 					</div>
259 | 					
260 | 					<div class="grid4 sidebar">
261 | 						
262 | 						<div class="box reverse">
263 | 							<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>
264 | 						</div>
265 | 						
266 | 						<p class="caption">Maecenas sed diam eget risus varius.</p>
267 | 
268 | 						<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>
269 | 
270 | 					
271 | 
272 | 						<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>
273 | 
274 | 						<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>
275 | 
276 | 					</div>
277 | 				</div>
278 | 				
279 | 			</div>
280 | 
281 | 
282 | 
283 | 
284 | 		<div id="glyphs">
285 | 			<div class="section">
286 | 				<div class="grid12 firstcol">
287 | 					
288 | 				<h1>Language Support</h1>
289 | 				<p>The subset of Adobe Caslon Pro Bold in this kit supports the following languages:<br />
290 | 					
291 | 					Albanian, Bosnian, Croatian, Czech, Danish, Dutch, English, Estonian, Faroese, French, German, Hungarian, Icelandic, Italian, Latvian, Lithuanian, Malagasy, Norwegian, Polish, Romanian, Serbian, Slovak, Slovenian, Spanish, Swedish, Turkish				</p>
292 | 				<h1>Glyph Chart</h1>
293 | 				<p>The subset of Adobe Caslon Pro 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>
294 | 				<div id="glyph_chart">
295 | 					
296 | 																														 <div><p>&amp;#32;</p>&#32;</div>
297 | 																				 <div><p>&amp;#33;</p>&#33;</div>
298 | 																				 <div><p>&amp;#34;</p>&#34;</div>
299 | 																				 <div><p>&amp;#35;</p>&#35;</div>
300 | 																				 <div><p>&amp;#36;</p>&#36;</div>
301 | 																				 <div><p>&amp;#37;</p>&#37;</div>
302 | 																				 <div><p>&amp;#38;</p>&#38;</div>
303 | 																				 <div><p>&amp;#39;</p>&#39;</div>
304 | 																				 <div><p>&amp;#40;</p>&#40;</div>
305 | 																				 <div><p>&amp;#41;</p>&#41;</div>
306 | 																				 <div><p>&amp;#42;</p>&#42;</div>
307 | 																				 <div><p>&amp;#43;</p>&#43;</div>
308 | 																				 <div><p>&amp;#44;</p>&#44;</div>
309 | 																				 <div><p>&amp;#45;</p>&#45;</div>
310 | 																				 <div><p>&amp;#46;</p>&#46;</div>
311 | 																				 <div><p>&amp;#47;</p>&#47;</div>
312 | 																				 <div><p>&amp;#48;</p>&#48;</div>
313 | 																				 <div><p>&amp;#49;</p>&#49;</div>
314 | 																				 <div><p>&amp;#50;</p>&#50;</div>
315 | 																				 <div><p>&amp;#51;</p>&#51;</div>
316 | 																				 <div><p>&amp;#52;</p>&#52;</div>
317 | 																				 <div><p>&amp;#53;</p>&#53;</div>
318 | 																				 <div><p>&amp;#54;</p>&#54;</div>
319 | 																				 <div><p>&amp;#55;</p>&#55;</div>
320 | 																				 <div><p>&amp;#56;</p>&#56;</div>
321 | 																				 <div><p>&amp;#57;</p>&#57;</div>
322 | 																				 <div><p>&amp;#58;</p>&#58;</div>
323 | 																				 <div><p>&amp;#59;</p>&#59;</div>
324 | 																				 <div><p>&amp;#60;</p>&#60;</div>
325 | 																				 <div><p>&amp;#61;</p>&#61;</div>
326 | 																				 <div><p>&amp;#62;</p>&#62;</div>
327 | 																				 <div><p>&amp;#63;</p>&#63;</div>
328 | 																				 <div><p>&amp;#64;</p>&#64;</div>
329 | 																				 <div><p>&amp;#65;</p>&#65;</div>
330 | 																				 <div><p>&amp;#66;</p>&#66;</div>
331 | 																				 <div><p>&amp;#67;</p>&#67;</div>
332 | 																				 <div><p>&amp;#68;</p>&#68;</div>
333 | 																				 <div><p>&amp;#69;</p>&#69;</div>
334 | 																				 <div><p>&amp;#70;</p>&#70;</div>
335 | 																				 <div><p>&amp;#71;</p>&#71;</div>
336 | 																				 <div><p>&amp;#72;</p>&#72;</div>
337 | 																				 <div><p>&amp;#73;</p>&#73;</div>
338 | 																				 <div><p>&amp;#74;</p>&#74;</div>
339 | 																				 <div><p>&amp;#75;</p>&#75;</div>
340 | 																				 <div><p>&amp;#76;</p>&#76;</div>
341 | 																				 <div><p>&amp;#77;</p>&#77;</div>
342 | 																				 <div><p>&amp;#78;</p>&#78;</div>
343 | 																				 <div><p>&amp;#79;</p>&#79;</div>
344 | 																				 <div><p>&amp;#80;</p>&#80;</div>
345 | 																				 <div><p>&amp;#81;</p>&#81;</div>
346 | 																				 <div><p>&amp;#82;</p>&#82;</div>
347 | 																				 <div><p>&amp;#83;</p>&#83;</div>
348 | 																				 <div><p>&amp;#84;</p>&#84;</div>
349 | 																				 <div><p>&amp;#85;</p>&#85;</div>
350 | 																				 <div><p>&amp;#86;</p>&#86;</div>
351 | 																				 <div><p>&amp;#87;</p>&#87;</div>
352 | 																				 <div><p>&amp;#88;</p>&#88;</div>
353 | 																				 <div><p>&amp;#89;</p>&#89;</div>
354 | 																				 <div><p>&amp;#90;</p>&#90;</div>
355 | 																				 <div><p>&amp;#91;</p>&#91;</div>
356 | 																				 <div><p>&amp;#92;</p>&#92;</div>
357 | 																				 <div><p>&amp;#93;</p>&#93;</div>
358 | 																				 <div><p>&amp;#94;</p>&#94;</div>
359 | 																				 <div><p>&amp;#95;</p>&#95;</div>
360 | 																				 <div><p>&amp;#96;</p>&#96;</div>
361 | 																				 <div><p>&amp;#97;</p>&#97;</div>
362 | 																				 <div><p>&amp;#98;</p>&#98;</div>
363 | 																				 <div><p>&amp;#99;</p>&#99;</div>
364 | 																				 <div><p>&amp;#100;</p>&#100;</div>
365 | 																				 <div><p>&amp;#101;</p>&#101;</div>
366 | 																				 <div><p>&amp;#102;</p>&#102;</div>
367 | 																				 <div><p>&amp;#103;</p>&#103;</div>
368 | 																				 <div><p>&amp;#104;</p>&#104;</div>
369 | 																				 <div><p>&amp;#105;</p>&#105;</div>
370 | 																				 <div><p>&amp;#106;</p>&#106;</div>
371 | 																				 <div><p>&amp;#107;</p>&#107;</div>
372 | 																				 <div><p>&amp;#108;</p>&#108;</div>
373 | 																				 <div><p>&amp;#109;</p>&#109;</div>
374 | 																				 <div><p>&amp;#110;</p>&#110;</div>
375 | 																				 <div><p>&amp;#111;</p>&#111;</div>
376 | 																				 <div><p>&amp;#112;</p>&#112;</div>
377 | 																				 <div><p>&amp;#113;</p>&#113;</div>
378 | 																				 <div><p>&amp;#114;</p>&#114;</div>
379 | 																				 <div><p>&amp;#115;</p>&#115;</div>
380 | 																				 <div><p>&amp;#116;</p>&#116;</div>
381 | 																				 <div><p>&amp;#117;</p>&#117;</div>
382 | 																				 <div><p>&amp;#118;</p>&#118;</div>
383 | 																				 <div><p>&amp;#119;</p>&#119;</div>
384 | 																				 <div><p>&amp;#120;</p>&#120;</div>
385 | 																				 <div><p>&amp;#121;</p>&#121;</div>
386 | 																				 <div><p>&amp;#122;</p>&#122;</div>
387 | 																				 <div><p>&amp;#123;</p>&#123;</div>
388 | 																				 <div><p>&amp;#124;</p>&#124;</div>
389 | 																				 <div><p>&amp;#125;</p>&#125;</div>
390 | 																				 <div><p>&amp;#126;</p>&#126;</div>
391 | 																				 <div><p>&amp;#160;</p>&#160;</div>
392 | 																				 <div><p>&amp;#161;</p>&#161;</div>
393 | 																				 <div><p>&amp;#162;</p>&#162;</div>
394 | 																				 <div><p>&amp;#163;</p>&#163;</div>
395 | 																				 <div><p>&amp;#164;</p>&#164;</div>
396 | 																				 <div><p>&amp;#165;</p>&#165;</div>
397 | 																				 <div><p>&amp;#166;</p>&#166;</div>
398 | 																				 <div><p>&amp;#167;</p>&#167;</div>
399 | 																				 <div><p>&amp;#168;</p>&#168;</div>
400 | 																				 <div><p>&amp;#169;</p>&#169;</div>
401 | 																				 <div><p>&amp;#170;</p>&#170;</div>
402 | 																				 <div><p>&amp;#171;</p>&#171;</div>
403 | 																				 <div><p>&amp;#172;</p>&#172;</div>
404 | 																				 <div><p>&amp;#173;</p>&#173;</div>
405 | 																				 <div><p>&amp;#174;</p>&#174;</div>
406 | 																				 <div><p>&amp;#175;</p>&#175;</div>
407 | 																				 <div><p>&amp;#176;</p>&#176;</div>
408 | 																				 <div><p>&amp;#177;</p>&#177;</div>
409 | 																				 <div><p>&amp;#178;</p>&#178;</div>
410 | 																				 <div><p>&amp;#179;</p>&#179;</div>
411 | 																				 <div><p>&amp;#180;</p>&#180;</div>
412 | 																				 <div><p>&amp;#181;</p>&#181;</div>
413 | 																				 <div><p>&amp;#182;</p>&#182;</div>
414 | 																				 <div><p>&amp;#183;</p>&#183;</div>
415 | 																				 <div><p>&amp;#184;</p>&#184;</div>
416 | 																				 <div><p>&amp;#185;</p>&#185;</div>
417 | 																				 <div><p>&amp;#186;</p>&#186;</div>
418 | 																				 <div><p>&amp;#187;</p>&#187;</div>
419 | 																				 <div><p>&amp;#188;</p>&#188;</div>
420 | 																				 <div><p>&amp;#189;</p>&#189;</div>
421 | 																				 <div><p>&amp;#190;</p>&#190;</div>
422 | 																				 <div><p>&amp;#191;</p>&#191;</div>
423 | 																				 <div><p>&amp;#192;</p>&#192;</div>
424 | 																				 <div><p>&amp;#193;</p>&#193;</div>
425 | 																				 <div><p>&amp;#194;</p>&#194;</div>
426 | 																				 <div><p>&amp;#195;</p>&#195;</div>
427 | 																				 <div><p>&amp;#196;</p>&#196;</div>
428 | 																				 <div><p>&amp;#197;</p>&#197;</div>
429 | 																				 <div><p>&amp;#198;</p>&#198;</div>
430 | 																				 <div><p>&amp;#199;</p>&#199;</div>
431 | 																				 <div><p>&amp;#200;</p>&#200;</div>
432 | 																				 <div><p>&amp;#201;</p>&#201;</div>
433 | 																				 <div><p>&amp;#202;</p>&#202;</div>
434 | 																				 <div><p>&amp;#203;</p>&#203;</div>
435 | 																				 <div><p>&amp;#204;</p>&#204;</div>
436 | 																				 <div><p>&amp;#205;</p>&#205;</div>
437 | 																				 <div><p>&amp;#206;</p>&#206;</div>
438 | 																				 <div><p>&amp;#207;</p>&#207;</div>
439 | 																				 <div><p>&amp;#208;</p>&#208;</div>
440 | 																				 <div><p>&amp;#209;</p>&#209;</div>
441 | 																				 <div><p>&amp;#210;</p>&#210;</div>
442 | 																				 <div><p>&amp;#211;</p>&#211;</div>
443 | 																				 <div><p>&amp;#212;</p>&#212;</div>
444 | 																				 <div><p>&amp;#213;</p>&#213;</div>
445 | 																				 <div><p>&amp;#214;</p>&#214;</div>
446 | 																				 <div><p>&amp;#215;</p>&#215;</div>
447 | 																				 <div><p>&amp;#216;</p>&#216;</div>
448 | 																				 <div><p>&amp;#217;</p>&#217;</div>
449 | 																				 <div><p>&amp;#218;</p>&#218;</div>
450 | 																				 <div><p>&amp;#219;</p>&#219;</div>
451 | 																				 <div><p>&amp;#220;</p>&#220;</div>
452 | 																				 <div><p>&amp;#221;</p>&#221;</div>
453 | 																				 <div><p>&amp;#222;</p>&#222;</div>
454 | 																				 <div><p>&amp;#223;</p>&#223;</div>
455 | 																				 <div><p>&amp;#224;</p>&#224;</div>
456 | 																				 <div><p>&amp;#225;</p>&#225;</div>
457 | 																				 <div><p>&amp;#226;</p>&#226;</div>
458 | 																				 <div><p>&amp;#227;</p>&#227;</div>
459 | 																				 <div><p>&amp;#228;</p>&#228;</div>
460 | 																				 <div><p>&amp;#229;</p>&#229;</div>
461 | 																				 <div><p>&amp;#230;</p>&#230;</div>
462 | 																				 <div><p>&amp;#231;</p>&#231;</div>
463 | 																				 <div><p>&amp;#232;</p>&#232;</div>
464 | 																				 <div><p>&amp;#233;</p>&#233;</div>
465 | 																				 <div><p>&amp;#234;</p>&#234;</div>
466 | 																				 <div><p>&amp;#235;</p>&#235;</div>
467 | 																				 <div><p>&amp;#236;</p>&#236;</div>
468 | 																				 <div><p>&amp;#237;</p>&#237;</div>
469 | 																				 <div><p>&amp;#238;</p>&#238;</div>
470 | 																				 <div><p>&amp;#239;</p>&#239;</div>
471 | 																				 <div><p>&amp;#240;</p>&#240;</div>
472 | 																				 <div><p>&amp;#241;</p>&#241;</div>
473 | 																				 <div><p>&amp;#242;</p>&#242;</div>
474 | 																				 <div><p>&amp;#243;</p>&#243;</div>
475 | 																				 <div><p>&amp;#244;</p>&#244;</div>
476 | 																				 <div><p>&amp;#245;</p>&#245;</div>
477 | 																				 <div><p>&amp;#246;</p>&#246;</div>
478 | 																				 <div><p>&amp;#247;</p>&#247;</div>
479 | 																				 <div><p>&amp;#248;</p>&#248;</div>
480 | 																				 <div><p>&amp;#249;</p>&#249;</div>
481 | 																				 <div><p>&amp;#250;</p>&#250;</div>
482 | 																				 <div><p>&amp;#251;</p>&#251;</div>
483 | 																				 <div><p>&amp;#252;</p>&#252;</div>
484 | 																				 <div><p>&amp;#253;</p>&#253;</div>
485 | 																				 <div><p>&amp;#254;</p>&#254;</div>
486 | 																				 <div><p>&amp;#255;</p>&#255;</div>
487 | 																				 <div><p>&amp;#256;</p>&#256;</div>
488 | 																				 <div><p>&amp;#257;</p>&#257;</div>
489 | 																				 <div><p>&amp;#258;</p>&#258;</div>
490 | 																				 <div><p>&amp;#259;</p>&#259;</div>
491 | 																				 <div><p>&amp;#260;</p>&#260;</div>
492 | 																				 <div><p>&amp;#261;</p>&#261;</div>
493 | 																				 <div><p>&amp;#262;</p>&#262;</div>
494 | 																				 <div><p>&amp;#263;</p>&#263;</div>
495 | 																				 <div><p>&amp;#268;</p>&#268;</div>
496 | 																				 <div><p>&amp;#269;</p>&#269;</div>
497 | 																				 <div><p>&amp;#270;</p>&#270;</div>
498 | 																				 <div><p>&amp;#271;</p>&#271;</div>
499 | 																				 <div><p>&amp;#272;</p>&#272;</div>
500 | 																				 <div><p>&amp;#273;</p>&#273;</div>
501 | 																				 <div><p>&amp;#274;</p>&#274;</div>
502 | 																				 <div><p>&amp;#275;</p>&#275;</div>
503 | 																				 <div><p>&amp;#278;</p>&#278;</div>
504 | 																				 <div><p>&amp;#279;</p>&#279;</div>
505 | 																				 <div><p>&amp;#280;</p>&#280;</div>
506 | 																				 <div><p>&amp;#281;</p>&#281;</div>
507 | 																				 <div><p>&amp;#282;</p>&#282;</div>
508 | 																				 <div><p>&amp;#283;</p>&#283;</div>
509 | 																				 <div><p>&amp;#286;</p>&#286;</div>
510 | 																				 <div><p>&amp;#287;</p>&#287;</div>
511 | 																				 <div><p>&amp;#290;</p>&#290;</div>
512 | 																				 <div><p>&amp;#291;</p>&#291;</div>
513 | 																				 <div><p>&amp;#298;</p>&#298;</div>
514 | 																				 <div><p>&amp;#299;</p>&#299;</div>
515 | 																				 <div><p>&amp;#302;</p>&#302;</div>
516 | 																				 <div><p>&amp;#303;</p>&#303;</div>
517 | 																				 <div><p>&amp;#304;</p>&#304;</div>
518 | 																				 <div><p>&amp;#305;</p>&#305;</div>
519 | 																				 <div><p>&amp;#310;</p>&#310;</div>
520 | 																				 <div><p>&amp;#311;</p>&#311;</div>
521 | 																				 <div><p>&amp;#313;</p>&#313;</div>
522 | 																				 <div><p>&amp;#314;</p>&#314;</div>
523 | 																				 <div><p>&amp;#315;</p>&#315;</div>
524 | 																				 <div><p>&amp;#316;</p>&#316;</div>
525 | 																				 <div><p>&amp;#317;</p>&#317;</div>
526 | 																				 <div><p>&amp;#318;</p>&#318;</div>
527 | 																				 <div><p>&amp;#321;</p>&#321;</div>
528 | 																				 <div><p>&amp;#322;</p>&#322;</div>
529 | 																				 <div><p>&amp;#323;</p>&#323;</div>
530 | 																				 <div><p>&amp;#324;</p>&#324;</div>
531 | 																				 <div><p>&amp;#325;</p>&#325;</div>
532 | 																				 <div><p>&amp;#326;</p>&#326;</div>
533 | 																				 <div><p>&amp;#327;</p>&#327;</div>
534 | 																				 <div><p>&amp;#328;</p>&#328;</div>
535 | 																				 <div><p>&amp;#332;</p>&#332;</div>
536 | 																				 <div><p>&amp;#333;</p>&#333;</div>
537 | 																				 <div><p>&amp;#336;</p>&#336;</div>
538 | 																				 <div><p>&amp;#337;</p>&#337;</div>
539 | 																				 <div><p>&amp;#338;</p>&#338;</div>
540 | 																				 <div><p>&amp;#339;</p>&#339;</div>
541 | 																				 <div><p>&amp;#340;</p>&#340;</div>
542 | 																				 <div><p>&amp;#341;</p>&#341;</div>
543 | 																				 <div><p>&amp;#342;</p>&#342;</div>
544 | 																				 <div><p>&amp;#343;</p>&#343;</div>
545 | 																				 <div><p>&amp;#344;</p>&#344;</div>
546 | 																				 <div><p>&amp;#345;</p>&#345;</div>
547 | 																				 <div><p>&amp;#346;</p>&#346;</div>
548 | 																				 <div><p>&amp;#347;</p>&#347;</div>
549 | 																				 <div><p>&amp;#350;</p>&#350;</div>
550 | 																				 <div><p>&amp;#351;</p>&#351;</div>
551 | 																				 <div><p>&amp;#352;</p>&#352;</div>
552 | 																				 <div><p>&amp;#353;</p>&#353;</div>
553 | 																				 <div><p>&amp;#354;</p>&#354;</div>
554 | 																				 <div><p>&amp;#355;</p>&#355;</div>
555 | 																				 <div><p>&amp;#356;</p>&#356;</div>
556 | 																				 <div><p>&amp;#357;</p>&#357;</div>
557 | 																				 <div><p>&amp;#362;</p>&#362;</div>
558 | 																				 <div><p>&amp;#363;</p>&#363;</div>
559 | 																				 <div><p>&amp;#366;</p>&#366;</div>
560 | 																				 <div><p>&amp;#367;</p>&#367;</div>
561 | 																				 <div><p>&amp;#368;</p>&#368;</div>
562 | 																				 <div><p>&amp;#369;</p>&#369;</div>
563 | 																				 <div><p>&amp;#370;</p>&#370;</div>
564 | 																				 <div><p>&amp;#371;</p>&#371;</div>
565 | 																				 <div><p>&amp;#376;</p>&#376;</div>
566 | 																				 <div><p>&amp;#377;</p>&#377;</div>
567 | 																				 <div><p>&amp;#378;</p>&#378;</div>
568 | 																				 <div><p>&amp;#379;</p>&#379;</div>
569 | 																				 <div><p>&amp;#380;</p>&#380;</div>
570 | 																				 <div><p>&amp;#381;</p>&#381;</div>
571 | 																				 <div><p>&amp;#382;</p>&#382;</div>
572 | 																				 <div><p>&amp;#383;</p>&#383;</div>
573 | 																				 <div><p>&amp;#402;</p>&#402;</div>
574 | 																				 <div><p>&amp;#536;</p>&#536;</div>
575 | 																				 <div><p>&amp;#537;</p>&#537;</div>
576 | 																				 <div><p>&amp;#538;</p>&#538;</div>
577 | 																				 <div><p>&amp;#539;</p>&#539;</div>
578 | 																				 <div><p>&amp;#710;</p>&#710;</div>
579 | 																				 <div><p>&amp;#711;</p>&#711;</div>
580 | 																				 <div><p>&amp;#713;</p>&#713;</div>
581 | 																				 <div><p>&amp;#728;</p>&#728;</div>
582 | 																				 <div><p>&amp;#729;</p>&#729;</div>
583 | 																				 <div><p>&amp;#730;</p>&#730;</div>
584 | 																				 <div><p>&amp;#731;</p>&#731;</div>
585 | 																				 <div><p>&amp;#732;</p>&#732;</div>
586 | 																				 <div><p>&amp;#733;</p>&#733;</div>
587 | 																				 <div><p>&amp;#916;</p>&#916;</div>
588 | 																				 <div><p>&amp;#937;</p>&#937;</div>
589 | 																				 <div><p>&amp;#960;</p>&#960;</div>
590 | 																				 <div><p>&amp;#8210;</p>&#8210;</div>
591 | 																				 <div><p>&amp;#8211;</p>&#8211;</div>
592 | 																				 <div><p>&amp;#8212;</p>&#8212;</div>
593 | 																				 <div><p>&amp;#8216;</p>&#8216;</div>
594 | 																				 <div><p>&amp;#8217;</p>&#8217;</div>
595 | 																				 <div><p>&amp;#8218;</p>&#8218;</div>
596 | 																				 <div><p>&amp;#8220;</p>&#8220;</div>
597 | 																				 <div><p>&amp;#8221;</p>&#8221;</div>
598 | 																				 <div><p>&amp;#8222;</p>&#8222;</div>
599 | 																				 <div><p>&amp;#8224;</p>&#8224;</div>
600 | 																				 <div><p>&amp;#8225;</p>&#8225;</div>
601 | 																				 <div><p>&amp;#8226;</p>&#8226;</div>
602 | 																				 <div><p>&amp;#8228;</p>&#8228;</div>
603 | 																				 <div><p>&amp;#8229;</p>&#8229;</div>
604 | 																				 <div><p>&amp;#8230;</p>&#8230;</div>
605 | 																				 <div><p>&amp;#8240;</p>&#8240;</div>
606 | 																				 <div><p>&amp;#8249;</p>&#8249;</div>
607 | 																				 <div><p>&amp;#8250;</p>&#8250;</div>
608 | 																				 <div><p>&amp;#8260;</p>&#8260;</div>
609 | 																				 <div><p>&amp;#8304;</p>&#8304;</div>
610 | 																				 <div><p>&amp;#8308;</p>&#8308;</div>
611 | 																				 <div><p>&amp;#8309;</p>&#8309;</div>
612 | 																				 <div><p>&amp;#8310;</p>&#8310;</div>
613 | 																				 <div><p>&amp;#8311;</p>&#8311;</div>
614 | 																				 <div><p>&amp;#8312;</p>&#8312;</div>
615 | 																				 <div><p>&amp;#8313;</p>&#8313;</div>
616 | 																				 <div><p>&amp;#8317;</p>&#8317;</div>
617 | 																				 <div><p>&amp;#8318;</p>&#8318;</div>
618 | 																				 <div><p>&amp;#8319;</p>&#8319;</div>
619 | 																				 <div><p>&amp;#8320;</p>&#8320;</div>
620 | 																				 <div><p>&amp;#8321;</p>&#8321;</div>
621 | 																				 <div><p>&amp;#8322;</p>&#8322;</div>
622 | 																				 <div><p>&amp;#8323;</p>&#8323;</div>
623 | 																				 <div><p>&amp;#8324;</p>&#8324;</div>
624 | 																				 <div><p>&amp;#8325;</p>&#8325;</div>
625 | 																				 <div><p>&amp;#8326;</p>&#8326;</div>
626 | 																				 <div><p>&amp;#8327;</p>&#8327;</div>
627 | 																				 <div><p>&amp;#8328;</p>&#8328;</div>
628 | 																				 <div><p>&amp;#8329;</p>&#8329;</div>
629 | 																				 <div><p>&amp;#8333;</p>&#8333;</div>
630 | 																				 <div><p>&amp;#8334;</p>&#8334;</div>
631 | 																				 <div><p>&amp;#8353;</p>&#8353;</div>
632 | 																				 <div><p>&amp;#8364;</p>&#8364;</div>
633 | 																				 <div><p>&amp;#8467;</p>&#8467;</div>
634 | 																				 <div><p>&amp;#8482;</p>&#8482;</div>
635 | 																				 <div><p>&amp;#8494;</p>&#8494;</div>
636 | 																				 <div><p>&amp;#8531;</p>&#8531;</div>
637 | 																				 <div><p>&amp;#8532;</p>&#8532;</div>
638 | 																				 <div><p>&amp;#8539;</p>&#8539;</div>
639 | 																				 <div><p>&amp;#8540;</p>&#8540;</div>
640 | 																				 <div><p>&amp;#8541;</p>&#8541;</div>
641 | 																				 <div><p>&amp;#8542;</p>&#8542;</div>
642 | 																				 <div><p>&amp;#8706;</p>&#8706;</div>
643 | 																				 <div><p>&amp;#8719;</p>&#8719;</div>
644 | 																				 <div><p>&amp;#8721;</p>&#8721;</div>
645 | 																				 <div><p>&amp;#8722;</p>&#8722;</div>
646 | 																				 <div><p>&amp;#8725;</p>&#8725;</div>
647 | 																				 <div><p>&amp;#8729;</p>&#8729;</div>
648 | 																				 <div><p>&amp;#8730;</p>&#8730;</div>
649 | 																				 <div><p>&amp;#8734;</p>&#8734;</div>
650 | 																				 <div><p>&amp;#8747;</p>&#8747;</div>
651 | 																				 <div><p>&amp;#8776;</p>&#8776;</div>
652 | 																				 <div><p>&amp;#8800;</p>&#8800;</div>
653 | 																				 <div><p>&amp;#8804;</p>&#8804;</div>
654 | 																				 <div><p>&amp;#8805;</p>&#8805;</div>
655 | 																				 <div><p>&amp;#9674;</p>&#9674;</div>
656 | 																				 <div><p>&amp;#57344;</p>&#57344;</div>
657 | 																				 <div><p>&amp;#57345;</p>&#57345;</div>
658 | 																				 <div><p>&amp;#57346;</p>&#57346;</div>
659 | 																				 <div><p>&amp;#57347;</p>&#57347;</div>
660 | 																				 <div><p>&amp;#57348;</p>&#57348;</div>
661 | 																				 <div><p>&amp;#57349;</p>&#57349;</div>
662 | 																				 <div><p>&amp;#57350;</p>&#57350;</div>
663 | 																				 <div><p>&amp;#57351;</p>&#57351;</div>
664 | 																				 <div><p>&amp;#57352;</p>&#57352;</div>
665 | 																				 <div><p>&amp;#57353;</p>&#57353;</div>
666 | 																				 <div><p>&amp;#57354;</p>&#57354;</div>
667 | 																				 <div><p>&amp;#57355;</p>&#57355;</div>
668 | 																				 <div><p>&amp;#57356;</p>&#57356;</div>
669 | 																				 <div><p>&amp;#57357;</p>&#57357;</div>
670 | 																				 <div><p>&amp;#57358;</p>&#57358;</div>
671 | 																				 <div><p>&amp;#57359;</p>&#57359;</div>
672 | 																				 <div><p>&amp;#57360;</p>&#57360;</div>
673 | 																				 <div><p>&amp;#57361;</p>&#57361;</div>
674 | 																				 <div><p>&amp;#57362;</p>&#57362;</div>
675 | 																				 <div><p>&amp;#57363;</p>&#57363;</div>
676 | 																				 <div><p>&amp;#57364;</p>&#57364;</div>
677 | 																				 <div><p>&amp;#57365;</p>&#57365;</div>
678 | 																				 <div><p>&amp;#57366;</p>&#57366;</div>
679 | 																				 <div><p>&amp;#57367;</p>&#57367;</div>
680 | 																				 <div><p>&amp;#57368;</p>&#57368;</div>
681 | 																				 <div><p>&amp;#57369;</p>&#57369;</div>
682 | 																				 <div><p>&amp;#57370;</p>&#57370;</div>
683 | 																				 <div><p>&amp;#57371;</p>&#57371;</div>
684 | 																				 <div><p>&amp;#57372;</p>&#57372;</div>
685 | 																				 <div><p>&amp;#57373;</p>&#57373;</div>
686 | 																				 <div><p>&amp;#57374;</p>&#57374;</div>
687 | 																				 <div><p>&amp;#57375;</p>&#57375;</div>
688 | 																				 <div><p>&amp;#57376;</p>&#57376;</div>
689 | 																				 <div><p>&amp;#57377;</p>&#57377;</div>
690 | 																				 <div><p>&amp;#57378;</p>&#57378;</div>
691 | 																				 <div><p>&amp;#57379;</p>&#57379;</div>
692 | 																				 <div><p>&amp;#57380;</p>&#57380;</div>
693 | 																				 <div><p>&amp;#57381;</p>&#57381;</div>
694 | 																				 <div><p>&amp;#57382;</p>&#57382;</div>
695 | 																				 <div><p>&amp;#57383;</p>&#57383;</div>
696 | 																				 <div><p>&amp;#57384;</p>&#57384;</div>
697 | 																				 <div><p>&amp;#57385;</p>&#57385;</div>
698 | 																				 <div><p>&amp;#57386;</p>&#57386;</div>
699 | 																				 <div><p>&amp;#57387;</p>&#57387;</div>
700 | 																				 <div><p>&amp;#57388;</p>&#57388;</div>
701 | 																				 <div><p>&amp;#57389;</p>&#57389;</div>
702 | 																				 <div><p>&amp;#57390;</p>&#57390;</div>
703 | 																				 <div><p>&amp;#57391;</p>&#57391;</div>
704 | 																				 <div><p>&amp;#57392;</p>&#57392;</div>
705 | 																				 <div><p>&amp;#57393;</p>&#57393;</div>
706 | 																				 <div><p>&amp;#57394;</p>&#57394;</div>
707 | 																				 <div><p>&amp;#57395;</p>&#57395;</div>
708 | 																				 <div><p>&amp;#57396;</p>&#57396;</div>
709 | 																				 <div><p>&amp;#57397;</p>&#57397;</div>
710 | 																				 <div><p>&amp;#57398;</p>&#57398;</div>
711 | 																				 <div><p>&amp;#57399;</p>&#57399;</div>
712 | 																				 <div><p>&amp;#57400;</p>&#57400;</div>
713 | 																				 <div><p>&amp;#57401;</p>&#57401;</div>
714 | 																				 <div><p>&amp;#57402;</p>&#57402;</div>
715 | 																				 <div><p>&amp;#57403;</p>&#57403;</div>
716 | 																				 <div><p>&amp;#57404;</p>&#57404;</div>
717 | 																				 <div><p>&amp;#57405;</p>&#57405;</div>
718 | 																				 <div><p>&amp;#57406;</p>&#57406;</div>
719 | 																				 <div><p>&amp;#57407;</p>&#57407;</div>
720 | 																				 <div><p>&amp;#57408;</p>&#57408;</div>
721 | 																				 <div><p>&amp;#61421;</p>&#61421;</div>
722 | 																				 <div><p>&amp;#61422;</p>&#61422;</div>
723 | 																				 <div><p>&amp;#61425;</p>&#61425;</div>
724 | 																				 <div><p>&amp;#61426;</p>&#61426;</div>
725 | 																				 <div><p>&amp;#61427;</p>&#61427;</div>
726 | 																				 <div><p>&amp;#61429;</p>&#61429;</div>
727 | 																				 <div><p>&amp;#61431;</p>&#61431;</div>
728 | 																				 <div><p>&amp;#63016;</p>&#63016;</div>
729 | 																				 <div><p>&amp;#63017;</p>&#63017;</div>
730 | 																				 <div><p>&amp;#63018;</p>&#63018;</div>
731 | 																				 <div><p>&amp;#63019;</p>&#63019;</div>
732 | 																				 <div><p>&amp;#63020;</p>&#63020;</div>
733 | 																				 <div><p>&amp;#63021;</p>&#63021;</div>
734 | 																				 <div><p>&amp;#63022;</p>&#63022;</div>
735 | 																				 <div><p>&amp;#63023;</p>&#63023;</div>
736 | 																				 <div><p>&amp;#63024;</p>&#63024;</div>
737 | 																				 <div><p>&amp;#63025;</p>&#63025;</div>
738 | 																				 <div><p>&amp;#63026;</p>&#63026;</div>
739 | 																				 <div><p>&amp;#63027;</p>&#63027;</div>
740 | 																				 <div><p>&amp;#63028;</p>&#63028;</div>
741 | 																				 <div><p>&amp;#63031;</p>&#63031;</div>
742 | 																				 <div><p>&amp;#63032;</p>&#63032;</div>
743 | 																				 <div><p>&amp;#63033;</p>&#63033;</div>
744 | 																				 <div><p>&amp;#63034;</p>&#63034;</div>
745 | 																				 <div><p>&amp;#63035;</p>&#63035;</div>
746 | 																				 <div><p>&amp;#63036;</p>&#63036;</div>
747 | 																				 <div><p>&amp;#63037;</p>&#63037;</div>
748 | 																				 <div><p>&amp;#63038;</p>&#63038;</div>
749 | 																				 <div><p>&amp;#63039;</p>&#63039;</div>
750 | 																				 <div><p>&amp;#63040;</p>&#63040;</div>
751 | 																				 <div><p>&amp;#63041;</p>&#63041;</div>
752 | 																				 <div><p>&amp;#63042;</p>&#63042;</div>
753 | 																				 <div><p>&amp;#63043;</p>&#63043;</div>
754 | 																				 <div><p>&amp;#63044;</p>&#63044;</div>
755 | 																				 <div><p>&amp;#63045;</p>&#63045;</div>
756 | 																				 <div><p>&amp;#63046;</p>&#63046;</div>
757 | 																				 <div><p>&amp;#63047;</p>&#63047;</div>
758 | 																				 <div><p>&amp;#63048;</p>&#63048;</div>
759 | 																				 <div><p>&amp;#63049;</p>&#63049;</div>
760 | 																				 <div><p>&amp;#63050;</p>&#63050;</div>
761 | 																				 <div><p>&amp;#63051;</p>&#63051;</div>
762 | 																				 <div><p>&amp;#63052;</p>&#63052;</div>
763 | 																				 <div><p>&amp;#63053;</p>&#63053;</div>
764 | 																				 <div><p>&amp;#63054;</p>&#63054;</div>
765 | 																				 <div><p>&amp;#63055;</p>&#63055;</div>
766 | 																				 <div><p>&amp;#63056;</p>&#63056;</div>
767 | 																				 <div><p>&amp;#63057;</p>&#63057;</div>
768 | 																				 <div><p>&amp;#63058;</p>&#63058;</div>
769 | 																				 <div><p>&amp;#63059;</p>&#63059;</div>
770 | 																				 <div><p>&amp;#63060;</p>&#63060;</div>
771 | 																				 <div><p>&amp;#63061;</p>&#63061;</div>
772 | 																				 <div><p>&amp;#63062;</p>&#63062;</div>
773 | 																				 <div><p>&amp;#63063;</p>&#63063;</div>
774 | 																				 <div><p>&amp;#63064;</p>&#63064;</div>
775 | 																				 <div><p>&amp;#63065;</p>&#63065;</div>
776 | 																				 <div><p>&amp;#63066;</p>&#63066;</div>
777 | 																				 <div><p>&amp;#63067;</p>&#63067;</div>
778 | 																				 <div><p>&amp;#63068;</p>&#63068;</div>
779 | 																				 <div><p>&amp;#63069;</p>&#63069;</div>
780 | 																				 <div><p>&amp;#63070;</p>&#63070;</div>
781 | 																				 <div><p>&amp;#63071;</p>&#63071;</div>
782 | 																				 <div><p>&amp;#63072;</p>&#63072;</div>
783 | 																				 <div><p>&amp;#63073;</p>&#63073;</div>
784 | 																				 <div><p>&amp;#63074;</p>&#63074;</div>
785 | 																				 <div><p>&amp;#63075;</p>&#63075;</div>
786 | 																				 <div><p>&amp;#63076;</p>&#63076;</div>
787 | 																				 <div><p>&amp;#63077;</p>&#63077;</div>
788 | 																				 <div><p>&amp;#63078;</p>&#63078;</div>
789 | 																				 <div><p>&amp;#63079;</p>&#63079;</div>
790 | 																				 <div><p>&amp;#63080;</p>&#63080;</div>
791 | 																				 <div><p>&amp;#63081;</p>&#63081;</div>
792 | 																				 <div><p>&amp;#63082;</p>&#63082;</div>
793 | 																				 <div><p>&amp;#63083;</p>&#63083;</div>
794 | 																				 <div><p>&amp;#63084;</p>&#63084;</div>
795 | 																				 <div><p>&amp;#63150;</p>&#63150;</div>
796 | 																				 <div><p>&amp;#63151;</p>&#63151;</div>
797 | 																				 <div><p>&amp;#63152;</p>&#63152;</div>
798 | 																				 <div><p>&amp;#63153;</p>&#63153;</div>
799 | 																				 <div><p>&amp;#63154;</p>&#63154;</div>
800 | 																				 <div><p>&amp;#63155;</p>&#63155;</div>
801 | 																				 <div><p>&amp;#63156;</p>&#63156;</div>
802 | 																				 <div><p>&amp;#63157;</p>&#63157;</div>
803 | 																				 <div><p>&amp;#63158;</p>&#63158;</div>
804 | 																				 <div><p>&amp;#63159;</p>&#63159;</div>
805 | 																				 <div><p>&amp;#63160;</p>&#63160;</div>
806 | 																				 <div><p>&amp;#63161;</p>&#63161;</div>
807 | 																				 <div><p>&amp;#63162;</p>&#63162;</div>
808 | 																				 <div><p>&amp;#63163;</p>&#63163;</div>
809 | 																				 <div><p>&amp;#63164;</p>&#63164;</div>
810 | 																				 <div><p>&amp;#63165;</p>&#63165;</div>
811 | 																				 <div><p>&amp;#63171;</p>&#63171;</div>
812 | 																				 <div><p>&amp;#63177;</p>&#63177;</div>
813 | 																				 <div><p>&amp;#63178;</p>&#63178;</div>
814 | 																				 <div><p>&amp;#63179;</p>&#63179;</div>
815 | 																				 <div><p>&amp;#63182;</p>&#63182;</div>
816 | 																				 <div><p>&amp;#63183;</p>&#63183;</div>
817 | 																				 <div><p>&amp;#63184;</p>&#63184;</div>
818 | 																				 <div><p>&amp;#63196;</p>&#63196;</div>
819 | 																				 <div><p>&amp;#63197;</p>&#63197;</div>
820 | 																				 <div><p>&amp;#63198;</p>&#63198;</div>
821 | 																				 <div><p>&amp;#63199;</p>&#63199;</div>
822 | 																				 <div><p>&amp;#63200;</p>&#63200;</div>
823 | 																				 <div><p>&amp;#63201;</p>&#63201;</div>
824 | 																				 <div><p>&amp;#63202;</p>&#63202;</div>
825 | 																				 <div><p>&amp;#63203;</p>&#63203;</div>
826 | 																				 <div><p>&amp;#63204;</p>&#63204;</div>
827 | 																				 <div><p>&amp;#63205;</p>&#63205;</div>
828 | 																				 <div><p>&amp;#63206;</p>&#63206;</div>
829 | 																				 <div><p>&amp;#63207;</p>&#63207;</div>
830 | 																				 <div><p>&amp;#63208;</p>&#63208;</div>
831 | 																				 <div><p>&amp;#63209;</p>&#63209;</div>
832 | 																				 <div><p>&amp;#63210;</p>&#63210;</div>
833 | 																				 <div><p>&amp;#63211;</p>&#63211;</div>
834 | 																				 <div><p>&amp;#63212;</p>&#63212;</div>
835 | 																				 <div><p>&amp;#63213;</p>&#63213;</div>
836 | 																				 <div><p>&amp;#63214;</p>&#63214;</div>
837 | 																				 <div><p>&amp;#63215;</p>&#63215;</div>
838 | 																				 <div><p>&amp;#63216;</p>&#63216;</div>
839 | 																				 <div><p>&amp;#63217;</p>&#63217;</div>
840 | 																				 <div><p>&amp;#63218;</p>&#63218;</div>
841 | 																				 <div><p>&amp;#63219;</p>&#63219;</div>
842 | 																				 <div><p>&amp;#63268;</p>&#63268;</div>
843 | 																				 <div><p>&amp;#63280;</p>&#63280;</div>
844 | 																				 <div><p>&amp;#63281;</p>&#63281;</div>
845 | 																				 <div><p>&amp;#63282;</p>&#63282;</div>
846 | 																				 <div><p>&amp;#63283;</p>&#63283;</div>
847 | 																				 <div><p>&amp;#63284;</p>&#63284;</div>
848 | 																				 <div><p>&amp;#63285;</p>&#63285;</div>
849 | 																				 <div><p>&amp;#63286;</p>&#63286;</div>
850 | 																				 <div><p>&amp;#63287;</p>&#63287;</div>
851 | 																				 <div><p>&amp;#63288;</p>&#63288;</div>
852 | 																				 <div><p>&amp;#63289;</p>&#63289;</div>
853 | 																				 <div><p>&amp;#63394;</p>&#63394;</div>
854 | 																				 <div><p>&amp;#64256;</p>&#64256;</div>
855 | 																				 <div><p>&amp;#64257;</p>&#64257;</div>
856 | 																				 <div><p>&amp;#64258;</p>&#64258;</div>
857 | 																				 <div><p>&amp;#64259;</p>&#64259;</div>
858 | 																				 <div><p>&amp;#64260;</p>&#64260;</div>
859 | 																				 <div><p>&amp;#64261;</p>&#64261;</div>
860 | 																				 <div><p>&amp;#64262;</p>&#64262;</div>
861 | 																		</div>	
862 | 				</div>
863 | 				
864 | 				
865 | 			</div>
866 | 		</div>
867 | 		
868 | 		
869 | 		<div id="specs">
870 | 			
871 | 		</div>
872 | 	
873 | 		<div id="installing">
874 | 			<div class="section">
875 | 				<div class="grid7 firstcol">
876 | 					<h1>Installing Webfonts</h1>
877 | 					
878 | 					<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>
879 | 					
880 | 					<h2>1. Upload your webfonts</h2>
881 | 					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
882 | 					
883 | 					<h2>2. Include the webfont stylesheet</h2>
884 | 					<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="http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
885 | 
886 | 
887 | <code>
888 | @font-face{ 
889 | 	font-family: 'MyWebFont';
890 | 	src: url('WebFont.eot');
891 | 	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
892 | 	     url('WebFont.woff') format('woff'),
893 | 	     url('WebFont.ttf') format('truetype'),
894 | 	     url('WebFont.svg#webfont') format('svg');
895 | }
896 | </code>
897 | 
898 | 	<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>
899 | 	<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
900 | 
901 | 					<h2>3. Modify your own stylesheet</h2>
902 | 					<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>
903 | <code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
904 | 
905 | <h2>4. Test</h2>
906 | <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>
907 | 				</div>
908 | 				
909 | 				<div class="grid5 sidebar">
910 | 					<div class="box">
911 | 						<h2>Troubleshooting<br />Font-Face Problems</h2>
912 | 						<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>
913 | 
914 | 						<h3>Fonts not showing in any browser</h3>
915 | 
916 | 						<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>
917 | 
918 | 						<h3>Fonts not loading in iPhone or iPad</h3>
919 | 
920 | 						<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>
921 | 
922 | 						<h3>Fonts not loading in Firefox</h3>
923 | 
924 | 						<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>
925 | 
926 | 						<h3>Fonts not loading in IE</h3>
927 | 
928 | 						<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>
929 | 
930 | 						<h3>Fonts not loading in IE9</h3>
931 | 
932 | 						<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
933 | 					</div>
934 | 				</div>
935 | 			</div>
936 | 			
937 | 		</div>
938 | 	
939 | 	</div>
940 | 	<div id="footer">
941 | 		<p>&copy;2010-2011 Font Squirrel. All rights reserved.</p>
942 | 	</div>
943 | </div>
944 | </body>
945 | </html>
946 | 


--------------------------------------------------------------------------------