<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=730" />
  <title>gif-maker</title>
  <link rel="stylesheet" type="text/css" href="rpstyle.css" />
  <style>
  .background-page {background-color:#ffffff;}
  </style>
</head>

<body>

<div id="page-loader"></div>

<!-- ****** splashscreen video.******
 commented out. makes rest of the page scroll jerkily. may want to reinstate later but will need to fix and make where you can skip intro -->
<!-- 
<div class="fade-out-1 start-trigger" style="margin-left: auto; margin-right: auto; margin-bottom:-500px;">
 <video width="729" height="805" autoplay>
  <source src="images/splashscreen.mp4" type="video/mp4">
  <source src="images/splashscreen.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
-->

<div id="wrapper" class="homepage-wrapper">

<p class="beta-link fade-in-8++++ delay6" style="text-align:center; top:-08px; margin-bottom:-20px; opacity:0;">
  <a href="beta/index.html" class="beta-link">&nbsp;[ beta testers click here ]&nbsp;</a>
</p>

<!-- trigger -->
<span class="rp-frame" data-switch-target=".start-trigger" data-trigger-after="100" data-reset-before="98" data-pause-scroll></span>
<span class="rp-frame" data-switch-target=".start-trigger-hold" data-trigger-after="100" data-reset-before="-90000"></span>

<p class="overmask" style="margin-top:20px; right:4px;">
  <!-- images: THE REAL PLEASURE letters -->
  <img src="images/title-letters/the-t.png" width="45" class="wobble-up-b title-delay1" style="position:relative; left:43px;" alt="the real pleasure in life"> 
  <img src="images/title-letters/the-h.png" width="25" class="wobble-up-b title-delay2" alt="" style="position:relative; left:33px; top:7px;"> 
  <img src="images/title-letters/the-e.png" width="28" class="wobble-up-b title-delay3" alt="" style="position:relative; left:32px; top:02px;"> 
  <img src="images/title-letters/real-r.png" width="36" class="wobble-up-b title-delay4" alt="" style="position:relative; left:47px; top:16px;"> 
  <img src="images/title-letters/real-e.png" width="27" class="wobble-up-b title-delay5" alt="" style="position:relative; left:40px; top:04px;"> 
  <img src="images/title-letters/real-a.png" width="29" class="wobble-up-b title-delay6" alt="" style="position:relative; left:40px; top:01px;"> 
  <img src="images/title-letters/real-l.png" width="27" class="wobble-up-b title-delay7" alt="" style="position:relative; left:39px; top:-1px;"> 
  <img src="images/title-letters/pleasure-p.png" width="36" class="wobble-up-a title-delay8" alt="" style="position:relative; left:43px; top:35px; transform-origin:center 60%;"> 
  <img src="images/title-letters/pleasure-l.png" width="21" class="wobble-up-a title-delay9" alt="" style="position:relative; left:39px; top:04px;"> 
  <img src="images/title-letters/pleasure-e1.png" width="27" class="wobble-up-a title-delaya" alt="" style="position:relative; left:38px; top:03px;"> 
  <img src="images/title-letters/pleasure-a.png" width="35" class="wobble-up-a title-delayb" alt="" style="position:relative; left:33px; top:07px;"> 
  <img src="images/title-letters/pleasure-s.png" width="19" class="wobble-up-a title-delayc" alt="" style="position:relative; left:30px; top:07px;"> 
  <img src="images/title-letters/pleasure-u.png" width="27" class="wobble-up-a title-delayd" alt="" style="position:relative; left:27px; top:04px;"> 
  <img src="images/title-letters/pleasure-r.png" width="34" class="wobble-up-a title-delaye" alt="" style="position:relative; left:24px; top:33px; transform-origin:center 80%;"> 
  <img src="images/title-letters/pleasure-e2.png" width="39" class="wobble-up-a title-delayf" alt="" style="position:relative; left:11px; top:00px;">
</p>

<p class="fade-in-1 delay3_5" style="left:201px; top:11px;">
  <!-- images: IN LIFE letters -->
  <img src="images/title-letters/inlife-i1.png" height="52" id="drop-i1" alt="" style="position:relative; left:-1px; top:00px;"> 
  <img src="images/title-letters/inlife-n.png" width="34" id="drop-n" alt="" style="position:relative; left:-4px; top:00px;"> 
  <img src="images/title-letters/inlife-l.png" width="36" id="drop-l" alt="" style="position:relative; left:08px; top:07px;"> 
  <img src="images/title-letters/inlife-i2.png" width="16" id="drop-i2" alt="" style="position:relative; left:03px; top:13px;"> 
  <img src="images/title-letters/inlife-f.png" width="29" id="drop-f" alt="" style="position:relative; left:-1px; top:19px;"> 
  <img src="images/title-letters/inlife-e.png" width="38" id="drop-e" alt="" style="position:relative; left:-6px; top:03px;"> 
</p>

<span id="anchor"></span>

<p>
  <img src="images/title-letters/underline.png" width="203" alt="" style="position:relative; left:192px; top:27px;"> 
  <span id="eraserbox-website"></span>
</p>


<p id="homepage-subtitle" class="fade-in-3 delay4_9" style="left:28px;">
  <!-- [ a novel in html & javascript ] -->
  [ a novel in 
   <span id="istoodup1" class="duration0_9 delay0 start-trigger">a</span><!--
--><span id="istoodup2" class="duration0_9 delay0_04 start-trigger">n</span><!--
--><span id="istoodup3" class="duration0_9 delay0_08 start-trigger">i</span><!--
--><span id="istoodup4" class="duration0_9 delay0_12 start-trigger">m</span><!--
--><span id="istoodup5" class="duration0_9 delay0_15 start-trigger">a</span><!--
--><span id="istoodup6" class="duration0_9 delay0_18 start-trigger">t</span><!--
--><span id="istoodup7" class="duration0_9 delay0_21 start-trigger">e</span><!--
--><span id="istoodup8" class="duration0_9 delay0_24 start-trigger">d</span>
  <span class="istoodup10-word duration0_9 delay0_3 start-trigger">
    <span id="blowright" class="delay1_2 f-21 start-trigger">
       <span id="puff1" class="duration1_8 delay1_05 start-trigger">t</span><!--
    --><span id="puff2" class="duration1_8 delay1_09 start-trigger">e</span><!--
    --><span id="puff3" class="duration1_8 delay1_13 start-trigger">x</span><!--
    --><span id="puff4" class="duration1_8 delay1_17 start-trigger">t</span>
    </span>
  </span><span class="down1 right5">]</span>
  <span id="text-replace" class="fade-in-2 ease-in delay1_8 start-trigger">
    text
  </span>
</p>


  <p class="scenebreak">&nbsp;</p>
  <p class="scenebreak">&nbsp;</p>








<!--  -->
<!--  -->
<!--  -->
<!-- background + div fadein -->
<div class="background-page slim fade-in-3 delay2_3 swoon-trigger-hold">

<p class="wide" style="margin-bottom:-2% text-indent:1.5em; opacity:0;">
  As you may know, conspiracy nuts tend to be good at predicting how<br />
  long it will take you to drive somewhere. in eighteen minutes on the dot,<br />
  i saw a sign&mdash;
</p>

<!-- IMAGE: athens shity limits [ athens shitty limits ] -->
<p class="wide" style="left:102px; top:-29px; margin-bottom:-17px;">
  <img src="images/city-limits-background.png" width="190" alt="Athens shitty limits" />
</p>

<!-- css linked animations: athens shity limits letters -->
<p id="athens-shity-limits" style="left:-92px; text-indent:4px;">
  <span class="f-26 loose2">
   <span id="sign-a">a</span><!--
--><span id="sign-t">t</span><!--
--><span id="sign-h">h</span><!--
--><span id="sign-e">e</span><!--
--><span id="sign-n">n</span><!--
--><span id="sign-s">s</span>
  </span><br />
  <span class="loose">
   <span id="sign-s2">s</span><!--
--><span id="sign-h2">h</span><!--
--><span id="sign-i">i</span><!--
--><span id="sign-t2">t</span><!--
--><span id="sign-y">y</span>
   <span id="sign-l">l</span><!--
--><span id="sign-i2">i</span><!--
--><span id="sign-m">m</span><!--
--><span id="sign-i3">i</span><!--
--><span id="sign-t3">t</span><!--
--><span id="sign-s3">s</span>
  </span>
</p>

<p class="wide" style="text-indent:285px; margin-top:10px; opacity:0;">
   <!-- or thats what i thought it said, -->
   <span style="font-size:110%;">o</span><!--
--><span style="font-size:115%;">r</span>
   <span style="font-size:124%;">t</span><!--
--><span style="font-size:117%;">h</span><!--
--><span style="font-size:108%;">a</span><!--
--><span style="font-size:102%;">t</span><!--
--><span style="font-size: 95%;">s</span>
   <span style="font-size:100%;">w</span><!--
--><span style="font-size:108%;">h</span><!--
--><span style="font-size:114%;">a</span><!--
--><span style="font-size:122%;">t</span>
   <span style="font-size:115%;">i</span>
   <span style="font-size:109%;">t</span><!--
--><span style="font-size:105%;">h</span><!--
--><span style="font-size: 99%;">o</span><!--
--><span style="font-size:107%;">u</span><!--
--><span style="font-size:118%;">g</span><!--
--><span style="font-size:107%;">h</span><!--
--><span style="font-size:100%;">t</span>
   <span style="font-size:104%;">i</span><!--
--><span style="font-size: 97%;">t</span>
   <span style="font-size:105%;">s</span><!--
--><span style="font-size:100%;">a</span><!--
--><span style="font-size: 96%;">i</span><!--
--><span style="font-size:101%;">d,</span>
   but
 </p>
  
<p class="linebreak wide" style="text-indent:286px; opacity:0;">
  i was basicly a 5<span class="tight">&nbsp;</span>hourenergy-zombie</p>

<p class="linebreak wide" style="text-indent:286px; opacity:0;">
   at this point, so who knows?</p>

</div>
<!-- end background -->
<!--  -->
<!--  -->
<!--  -->


<p class="fade-in-3_5 delay2 sign-trigger-hold webtext bigspace" style="text-indent:1.0em; opacity:0;">
  words and images interact. this example takes place in a record shop, when the narrator checks to see if they have anything by his favorite band [&nbsp;neutral milk hotel, naturally&nbsp;]
</p>


<!--  -->
<!--  -->
<!--  -->
<!-- background + div fadein -->
<div class="background-page fade-in-3_5 delay2 sign-trigger-hold">

<!-- AEROPLANE FLOAT SEQUENCE [ alt version saved where second half triggers independently ] -->

<p style="text-indent:0.1em;">
They had their own section.</p>

<p style="margin-top:08px; text-indent:1.0em;">
and a note sayin&mdash;</p>

<!-- IMAGE: lots more in back just ask -->
<p class="wide" style="left:1.8em; top: 0.8em; margin-bottom:4.0em;">
  <img src="images/lots_more_in_back.png" width="270" alt="lots more in back just ask" />
</p>

<!-- IMAGE: aeroplane cover [ album cover ] -->
<p class="wide" style="left:313px; top:-146px; margin-bottom:0em; z-index:0;">
  <img src="images/aeroplane-cover2.png" width="325" alt="in the aeroplane over the sea album cover" />
</p>

<!-- trigger -->
<span class="rp-frame" data-switch-target=".aeroplane-trigger" data-pause-scroll="4000"></span>
<span class="rp-frame" data-switch-target=".aeroplane-trigger-hold" data-reset-before="-90000"></span>

<p style="left:55px; margin-top:-1.0em;">
  <!--  they had 16 copies of aeroplane. -->
  they had <em class="f-19">16</em> copies &hairsp;<span class="aeroplane"><span style="color:#000000;">o</span>f</span>
  <!-- css linked animations: aeroplane float -->
  <span class="aeroplane">
     <span id="aeroplane1" class="aeroplane-trigger delay0_2">a</span><!--
  --><span id="aeroplane2" class="aeroplane-trigger delay0_19">e</span><!--
  --><span id="aeroplane3" class="aeroplane-trigger delay0_17">r</span><!--
  --><span id="aeroplane4" class="aeroplane-trigger delay0_15">o</span><!--
  --><span id="aeroplane5" class="aeroplane-trigger delay0_13">p</span><!--
  --><span id="aeroplane6" class="aeroplane-trigger delay0_11">l</span><!--
  --><span id="aeroplane7" class="aeroplane-trigger delay0_09">a</span><!--
  --><span id="aeroplane8" class="aeroplane-trigger delay0_07">n</span><!--
  --><span id="aeroplane9" class="aeroplane-trigger delay0_04">e</span>
  </span>
</p>

<!-- IMAGE: keep scrolling arrow * -->
<p class="fade-in-20 delay30 sign-trigger" style="left:128px; top:05px; margin-top:0.0em;">
  <img class="fade-out-0_3 aeroplane-trigger-hold" src="images/keep-scrolling-arrow.png" width="100" alt="keep scrolling" />
</p>

<p class="loose-word ++++fade-in-2 delay2_5 aeroplane-trigger-hold" style="left:70px; margin-top:13px;">
i picked one of them up. felt <span class="f104" style="color:#693430; display:inline-block; transform: scaleY(1.2) translateY(-.5px);"></span><!--

--><!-- css linked animations: heft [ felt the heft ] --><!--
--><span class="heft"><!--
  -->t<!--
  --><span id="heft01" class="aeroplane-trigger delay3_9">h</span><!--
  --><span id="heft02" class="aeroplane-trigger delay3_8">e</span>
     <span id="heft1" class="aeroplane-trigger delay3_7">h</span><!--
  --><span id="heft2" class="aeroplane-trigger delay3_7">e</span><!--
  --><span id="heft3" class="aeroplane-trigger delay3_7">f</span><!--
  --><span id="heft4" class="aeroplane-trigger delay3_7">t</span>
</span>
</p>

<p class="++++fade-in-2 delay5_8 aeroplane-trigger-hold" style="text-indent:4.8em; margin-top:11px;">
its 180-gram vinyl.</p>

<p class="++++fade-in-2 delay7_3 aeroplane-trigger-hold tight-word" style="text-indent:5.7em; margin-top:13px;">
but you probly knew that.</p>

<p>&nbsp;</p>
<p>&nbsp;</p>

</div>
<!--  end div fadein -->
<!--  -->
<!--  -->
<!--  -->

<!-- end aeroplane float sequence -->


<!-- IMAGE: keep scrolling arrow * -->
<p class="fade-in-25 delay7_5 aeroplane-trigger" style="left:239px; top:-17px; margin-top:0.0em;">
  <img class="fade-out-0_3 keep-scrolling-trigger-hold" src="images/keep-scrolling-arrow.png" width="100" alt="keep scrolling" />
</p>

               <!-- trigger -->
<span class="rp-frame" data-switch-target=".keep-scrolling-trigger" data-pause-scroll></span>
<span class="rp-frame" data-switch-target=".keep-scrolling-trigger-hold" data-reset-before="-90000"></span>

<p class="fade-in-2 webkit-delay-patch keep-scrolling-trigger-hold homepage scenebreak center" style="text-indent:0em;">
  keep scrolling to see more stuff.
</p>


<!--  -->
<!-- div partial fadeout -->
<div id="dim-1_5" class="table-trigger-hold">

<p class="fade-in-2 delay1_2 keep-scrolling-trigger bigspacebreak homepage center" style="right:1.25em;">
  <span class="fade-out-2_5 table-trigger-hold">
    [&thinsp;unless youd rather&thinsp;]
  </span>
</p>

<p style="margin-bottom:-30px;">
  <a href="excerpts/index.html" class="plain menu slideleft keep-scrolling-trigger-hold">read an excerpt<br /></a>
</p>

<p class="wide">
  <a href="beta/index.html" class="plain menu slideright keep-scrolling-trigger-hold">be a beta tester</a>
</p>

</div>
<!-- end div dim -->
<!--  -->


<!-- IMAGE: keep scrolling arrow -->
<p class="fade-in-19 delay6 keep-scrolling-trigger" style="left:208px; top:-25px;">
  <img class="fade-out-0_3 table-trigger-hold" src="images/keep-scrolling-arrow.png" width="100" alt="keep scrolling" />
</p>


<!--  -->
<!--  -->
<!--  -->
<!-- background + div fadein -->
<div class="background-page fade-in-4 delay3_5 keep-scrolling-trigger-hold">

<!-- triggers -->
<span class="rp-frame down-4em" data-switch-target=".table-trigger" data-pause-scroll></span>
<span class="rp-frame down-4em" data-switch-target=".table-trigger-hold" data-reset-before="-90000"></span>

<!-- D threw the table -->
<p class="battlespace" style="text-indent:-0.7em;">
  <span id="D-throws-table" class="D-fight-big table-trigger">
    D&nbsp;
  </span>
     <span id="threw-the1" class="table-trigger">t</span><!--
  --><span id="threw-the2" class="table-trigger">h</span><!--
  --><span id="threw-the3" class="table-trigger">r</span><!--
  --><span id="threw-the4" class="table-trigger">e</span><!--
  --><span id="threw-the5" class="table-trigger">w</span>
     <span id="threw-the6" class="table-trigger">t</span><!--
  --><span id="threw-the7" class="table-trigger">h</span><!--
  --><span id="threw-the8" class="table-trigger">e</span>
</p>
<!-- css animation: table-throw -->
<p id="table-throw" class="table-trigger wide" style="left:89px; top:-28px;">
  <!-- table word art: table 1-->
  <span class="table-t">t</span>
  <span class="table-a">a</span>
  <span class="table-b">b</span>
  <span class="table-l">l</span>
  <span class="table-e">e</span>
</p>
<p class="fade-in-1_5 delay0_8 table-trigger-hold wide" style="margin-top:1.00em; text-indent:20.80em;">
  <!--  taylor catch -->
  <span id="taylor-catch" class="taylor-T table-trigger">T</span><span class="taylor">aylor</span> caught it.
</p>

</div>
<!-- end div fadein -->
<!--  -->
<!--  -->
<!--  -->


<p class="fade-in-3 delay2_5 table-trigger-hold webtext space" style="text-indent:1.0em;">
  text artifacts intermingle with type, blurring the line between text and image.
</p>

<!--  -->
<!--  -->
<!--  -->
<!-- background + div fadein -->
<div class="fade-in-4 delay2_5 table-trigger-hold background-page top">

<p class="wide" style="text-indent:11.5em; margin-bottom:0em;">
 i forgot to mention there was a bar. it was<br />
 just a card<span style="letter-spacing:-3px;">&nbsp;</span>table with some licker<span style="letter-spacing:-2px;">&nbsp;</span>botles and mixers and plastic cups<br />
 and a 
   <span style="color:#260000;">s</span><!--
--><span style="color:#3B0000;">i</span><!--
--><span style="color:#450000;">g</span><!--
--><span style="color:#570000;">n</span><!--
--><span style="color:#700000;">&nbsp;</span><!--
--><span style="color:#700000;">s</span><!--
--><span style="color:#8A0000;">a</span><!--
--><span style="color:#A10000;">y</span><!--
--><span style="color:#BD0000;">i</span><!--
--><span style="color:#D10000;">n</span><!--
--><span style="color:#D10000;">&nbsp;</span><!--
--><span style="color:#E00000; font-family: Georgia, Times New Roman, Times, serif; font-size:110%;">&ldquo;</span>
</p>

 <!-- IMAGE: no teenagers sign -->
<p class="wide" style="z-index:1; left:101px; top:-20px;">
  <img src="images/no_teenagers.png" width="110" alt="No teenagers!" />
</p>

<p style="text-indent:11.8em; margin-top:2.0em;">
  <!--  , but taylor had installd himself -->
   <span style="color:#F20000; font-family: Georgia, Times New Roman, Times, serif; font-size:110%;">,</span><!--
--><span style="color:#E00000; font-family: Georgia, Times New Roman, Times, serif; font-size:110%;">&rdquo;</span><!--
--><span style="color:#E00000;">&nbsp;</span><!--
--><span style="color:#CF0000;">b</span><!--
--><span style="color:#BF0000;">u</span><!--
--><span style="color:#B00000;">t</span><!--
--><span style="color:#B00000;">&nbsp;</span><!--
--><span style="color:#990000;">t</span><!--
--><span style="color:#8A0000;">a</span><!--
--><span style="color:#780000;">y</span><!--
--><span style="color:#660000;">l</span><!--
--><span style="color:#570000;">o</span><!--
--><span style="color:#3B0000;">r</span>
had installd himself behind it, and inspite<span style="letter-spacing:-3px;">&nbsp;</span><span style="color:#570000;">of</span> <span style="color:#8A0000;">his shackles</span> <span style="color:#660000;">he</span> was mixin drinks and hittin on girls with impunity.
</p>

</div>
<!-- end background div-fade -->
<!--  -->
<!--  -->
<!--  -->


<!--  -->
<!--  -->
<!--  -->
<!-- background + div fadein -->
<div class="background-page bottom fade-in-4 delay2_5 table-trigger-hold">

<p class="wide" style="text-indent:2.0em;">
 i sat down under <span class="thin">the tree that owns itself,</span> leand against the trunk,<br />
 lissend to the crickets and the treefrogs and tried to make my brain<br />
 shutup, but it wouldnt do it, there were just too&hairsp;many questions.
</p>

                <!-- trigger -->
<span class="rp-frame" data-switch-target=".list-trigger" data-pause-scroll></span>
<span class="rp-frame" data-switch-target=".list-trigger-hold" data-reset-before="-90000"></span>

<p id="drop-list-text" class="list-trigger wide linebreak" style="text-indent:0;">
<!--  makin a list -->
  i finely started makin a
  <span class="fade-out-1_5 list-trigger-hold">
    list:
  </span>
</p>

                  <!-- trigger -->
<span class="rp-frame" data-switch-target=".worry-list-arrow-trigger" data-trigger-after="30" data-reset-before="27"></span>

<!-- IMAGE: keep scrolling arrow -->
<p class="fade-in-20 delay4 worry-list-arrow-trigger" style="left:238px; top:-1.0em;">
  <img class="fade-out-0_3 list-trigger-hold" src="images/keep-scrolling-arrow.png" width="100" alt="keep scrolling" style="z-index:0 !important;" />
</p>

<!-- IMAGE: al's worry list -->
<p class="fade-in-2 delay0_8 list-trigger-hold wide" style="z-index:1; left:7.4em; top:-2.90em; margin-bottom:13.85em;">
  <img src="images/als_list-website.jpg" width="317" alt="List. Is Claire okay? Is she mad? What's wrong with my car? How am i going to get home? What is going on?" />
</p>

<p class="fade-in-3 delay3 list-trigger-hold old-spacing" style="text-indent:8.6em; padding-top:3px;">
 thats as<span class="tight"> </span>far<span class="tight"> </span>as i got before somethin</p>
 <p class="fade-in-3 delay3 list-trigger-hold old-spacing" style="text-indent:8em;">
 splashd on the page.</p>
<p class="fade-in-3 delay3 list-trigger-hold old-spacing" style="text-indent:10.1em;">
it lookd like a raindrop exept it</p>
<p class="fade-in-3 delay3 list-trigger-hold old-spacing" style="text-indent:8em;">
 wasnt rainin.</p>

<p style="line-height:12px;">&nbsp;</p>

</div>
<!-- end background-page + div fadein-->
<!--  -->
<!--  -->
<!--  -->


<!--  -->
<!--  -->
<!--  -->
<!-- div fadein post-worry-list -->
<div class="fade-in-4 delay3 list-trigger-hold">

<p class="webtext spaced" style="text-indent:1.0em;">
  screenshots showing pieces of text art incorporated into pages: 
</p>

<p class="wide" style="margin-top:1.0em; height:180px;">
  <!-- IMAGES: thumbnails -->
  <a href="images/muggles-screenshot.png" target="_blank">
    <span style="position:relative; left:0.0em; top:-0.0em;">
      <img src="images/textart-thumbnail1.jpg" width="202" alt="thumbnail 1" />
    </span>
  </a>
  <a href="images/xray-menu-final.jpg" target="_blank">
    <span style="position:relative; left:11.0em; top:-0.0em;">
      <img src="images/textart-thumbnail2.jpg" width="202" alt="thumbnail 2" />
    </span>
  </a>
  <a href="images/tip_jar-final.jpg" target="_blank">
    <span style="position:relative; left:22.0em; top:-0.0em;">
      <img src="images/tipjar-thumbnail.jpg" width="202" alt="thumbnail 3" />
    </span>
  </a>
</p>
<p class="wide" style="margin-top:-3.0em; height:5.0em;">
  <!-- IMAGES: thumbnail -->
  <a href="images/grammers-fashist-screenshot.png" target="_blank">
    <span style="position:relative; left:0.0em;">
      <img src="images/textart-thumbnail4.jpg" width="202" alt="thumbnail 1" />
    </span>
  </a>
</p>

<p class="webtext scenebreak" style="text-indent:1.0em;">
  freed from the constraints of page breaks, each chapter exists as a continuous scroll. the margins are manipulated to shape the lines. the indents show the flow of the story. when the conversation or action moves in a new direction, so does the margin. 
</p>

<p class="wide" style="margin-top:2.0em; height:18.0em;">
  <!-- IMAGES: thumbnails -->
  <a href="images/thumbnail1.jpg" target="_blank">
    <span style="position:relative; left:0.0em; top:-0.0em;">
      <img src="images/thumbnail1.jpg" width="180" alt="thumbnail 1" />
    </span>
  </a>
  <a href="images/thumbnail2.jpg" target="_blank">
    <span style="position:relative; left:11.0em; top:-0.0em;">
      <img src="images/thumbnail2.jpg" width="180" alt="thumbnail 2" />
    </span>
  </a>
  <a href="images/thumbnail3.jpg" target="_blank">
    <span style="position:relative; left:22.0em; top:-0.0em;">
      <img src="images/thumbnail3.jpg" width="180" alt="thumbnail 3" />
    </span>
  </a>
</p>
<p class="wide" style="margin-top:1.0em; height:17.0em;">
  <!-- images: thumbnails -->
  <a href="images/thumbnail4.jpg" target="_blank">
    <span style="position:relative; left:0.0em; top:-0.0em;">
      <img src="images/thumbnail4.jpg" width="180" alt="thumbnail 4" />
    </span>
  </a>
  <a href="images/treethatownsitself.jpg" target="_blank">
    <span style="position:relative; left:11.0em; top:-0.0em;">
      <img src="images/thumbnail5.jpg" width="180" alt="thumbnail 5" />
    </span>
  </a>
  <a href="images/thumbnail6.jpg" target="_blank">
    <span style="position:relative; left:22.0em; top:-0.0em;">
      <img src="images/thumbnail6.jpg" width="180" alt="thumbnail 6" />
    </span>
  </a>
</p>

<p class="webtext scenebreak" style="text-indent:1.0em;">
  you can read the real pleasure in life on any device that will run a web browser. it is currently in beta-testing phase and will be available in june 2016. the book is open-source and free.
</p>

</div>
<!-- end div fadein -->
<!--  -->
<!--  -->
<!--  -->


                <!-- trigger -->
<span class="rp-frame" data-switch-target=".endmenu-trigger-hold" data-trigger-after="04" data-reset-before="-90000"></span>

<!-- links / buttons -->
<p class="overmask space">
  <a href="beta/index.html" class="plain menu fourth delay2 endmenu-trigger-hold">
    + be a beta tester +
  </a>
</p>
<p class="bigspace overmask">
  <a href="excerpts/index.html" class="menu plain fifth delay3 endmenu-trigger-hold">
    + read an excerpt +
  </a>
</p>
<p class="overmask">
  <a href="FAQ/index.html" class="menu plain sixth delay4 endmenu-trigger-hold">
    + read the FAQ +
  </a>
</p>
<p class="overmask">
  <a href="mailto:info@imaginary-books.com" class="menu plain seventh delay4_8 endmenu-trigger-hold" target="_blank">
    + contact +
  </a>
</p>
<p class="overmask" style="margin-bottom:-33px; left:207px;">
    <span class="notify-font animate endmenu-trigger-hold delay5_5" style="background:#ffffff !important;">
    + notify me when its ready +
  </span>
</p>

<p id="wufoo-z1l8sman0ioi0ke" class="notify-me animate endmenu-trigger-hold delay5_5" style="left:275px; background:#ffffff !important; z-index:9;">
  <a href="https://realpleasureinlife.wufoo.com/forms/z1l8sman0ioi0ke">notify me when its ready</a>.
</p>
<div id="wuf-adv" style="font-family:inherit;font-size: small;color:#a7a7a7;text-align:center;display:block; opacity:0;">
  HTML Forms powered by <a href="http://www.wufoo.com">Wufoo</a>.
</div>
<script type="text/javascript">
var z1l8sman0ioi0ke;(function(d, t) {
var s = d.createElement(t), options = {
'userName':'realpleasureinlife',
'formHash':'z1l8sman0ioi0ke',
'autoResize':true,
'height':'257',
'async':true,
'host':'wufoo.com',
'header':'show',
'ssl':true};
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'www.wufoo.com/scripts/embed/form.js';
s.onload = s.onreadystatechange = function() {
var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;
try { z1l8sman0ioi0ke = new WufooForm();z1l8sman0ioi0ke.initialize(options);z1l8sman0ioi0ke.display(); } catch (e) {}};
var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
})(document, 'script');
</script>

<p class="fade-in-half delay6 endmenu-trigger-hold webtext f-13" style="line-height:15px; margin-top:-10px;">
 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/" target="_blank" ><img alt="Creative Commons License" style="border-width:0; top:-10px;" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a><br />the real pleasure in life by <a href="http://imaginary-books.com/" property="cc:attributionName" rel="cc:attributionURL" target="_blank">imaginary books</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/" target="_blank">Creative Commons Attribution 4.0 International License</a>.
</p>

<div id="homepage-bottom"></div>

<div id="chapterbottom-big"></div>

</div>

<script type="text/javascript" src="js/d3.v2.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/realpleasure.js"></script>

</body>
</html>