diff --git a/Rakefile b/Rakefile
index 448b461..9a6d5da 100644
--- a/Rakefile
+++ b/Rakefile
@@ -59,6 +59,109 @@ task :to_html do
     x.run
 end
 
+task :khtml do
+    require 'rubygems'
+    require 'kramdown'
+    require 'filters/markdown_macros'
+    require 'filters/mkd_post_latex_macros_to_html'
+
+    class KrambookCompile
+        require 'config_html.rb'
+
+        attr_accessor :filelist
+
+        # take a string from kramdown 
+        # returns LaTeX after filter
+        def compile_text(tmp)
+            @prefilters.each do |f| 
+                tmp=f.run( tmp )
+            end
+
+            # compile to latex
+            tmp=Kramdown::Document.new(tmp, :latex_headers => %w(chapter section subsection paragraph subparagraph subsubparagraph)).to_html
+
+            # post filters
+            @postfilters.each{ |f| tmp=f.run(tmp) }
+            return tmp
+        end
+
+        def process_template
+            puts "PROCESS: "+@template_file
+            txt=File.read(@template_file)
+
+            # puts "READ: " + txt
+            txt.sub!( /<!-- INCLUDES -->/ ) do
+                    puts "HERE"
+                    @filelist.map do |source,dest| 
+                         %{<div class="block left">
+                             <h3>
+                                 <a href="#{dest.sub(/^tmp\//,'')}">
+                                     #{File::basename(dest,'.html')}
+                                     <span class="nicer">»</span>
+                                 </a>
+                             </h3>
+                         </div>}
+                    end.join("\n") + '</ul>'
+                end
+            # puts "AFTER INCLUDES: " + txt
+            txt.gsub!(%r{<!-- Author -->},@author)
+            # puts "AFTER AUTHOR: " + txt
+            txt.gsub!(%r{<!-- Title -->},@title)
+            txt.gsub!(%r{<!-- Subtitle -->},@subtitle)
+            # puts "AFTER TITLE: " + txt
+            txt.sub!( %r{<!-- HTML HEADER -->},@html_headers) 
+            # puts "AFTER HTML HEADER: " + txt
+            fic=File.new("tmp/#{@pdfname}.html","w")
+            fic.write(txt)
+            fic.close
+        end
+
+        def initialize
+
+            eval File.new('config_html.rb','r').read
+
+            @prefilters=[]
+            @prefilters<<=MarkdownMacros.new
+
+            @postfilters=[]
+            @postfilters<<=MarkdownPostLatexMacrosToHTML.new
+
+            @filelist=Dir.glob("content/**/*.md").sort.map do |fic|
+                    [ fic, fic.sub(/^content\//,"tmp/").sub(/.md$/,".html") ]
+                end
+        end
+
+        def run
+            @filelist.each do |doublon|
+                source=doublon[0]
+                dest=doublon[1]
+                puts source
+
+                # read and compile in LaTeX the .md file
+                text=compile_text( File.new(source,"r").read )
+
+                # create directory if necessary
+                if not FileTest::directory?(File.dirname(dest))
+                    FileUtils.mkdir_p(File.dirname(dest)) 
+                end
+
+                # write the .tex file
+                fic = File.new(dest,"w")
+                fic.write(text)
+                fic.close
+
+            end
+
+            # write the .tex file containing all includes
+            process_template
+
+            system("cp -rf include tmp/")
+            # system("open tmp/#{@pdfname}.html")
+        end
+    end
+    KrambookCompile.new.run
+end
+
 task :compile do
     require 'rubygems'
     require 'kramdown'
diff --git a/config_html.rb b/config_html.rb
new file mode 100644
index 0000000..9b73442
--- /dev/null
+++ b/config_html.rb
@@ -0,0 +1,19 @@
+# Use this file to configure some general variables
+
+@title=%{Krambook}
+@subtitle=%{<span class="small">Write Books like an
+       <code>UB3R 1337</code> <em>(Hacker)</em></span>}
+
+@author="Yann Esposito"
+
+# file name
+@pdfname="krambook"
+
+# LaTeX headers (before \begin{document})
+@html_headers=''
+
+# change the template file in case latex_headers is not enough 
+# Remember to not remove lines begining by %%#
+# look at include/template.tex for example
+@template_file="include/template.html"
+
diff --git a/content/00_README.md b/content/00_README.md
index 9580e73..c368c93 100644
--- a/content/00_README.md
+++ b/content/00_README.md
@@ -1,11 +1,11 @@
 %%% markdown %%% `markdown` %%%
 %%% kramdown %%% [`kramdown`](http://kramdown.rubyforge.org) %%%
-LLL xelatex LLL \XeLaTeX LLL
-LLL xelatex_ LLL \XeLaTeX{} LLL
-LLL latex LLL \LaTeX LLL
-LLL latex_ LLL \LaTeX{} LLL
-LLL tex LLL \TeX LLL
-LLL tex_ LLL \TeX{} LLL
+LLL xelatex LLL \XeLaTeX LLL XeLaTeX HTML
+LLL xelatex_ LLL \XeLaTeX{} LLL XeLaTeX  HTML
+LLL latex LLL \LaTeX LLL LaTeX HTML
+LLL latex_ LLL \LaTeX{} LLL LaTeX  HTML
+LLL tex LLL \TeX LLL TeX HTML
+LLL tex_ LLL \TeX{} LLL TeX  HTML
 
 # Write Books like a Hacker
 
@@ -56,8 +56,8 @@ To prove my point, simply compare a %latex_ and a %markdown file.
 
 Both file will be generated as:
 
-LLL beginbox LLL \medskip\fbox{\colorbox{boxcolor}{\begin{minipage}{.80\linewidth}% LLL
-LLL endbox LLL \end{minipage}}}\medskip LLL
+LLL beginbox LLL \medskip\fbox{\colorbox{boxcolor}{\begin{minipage}{.80\linewidth}% LLL <div class="box"> HTML
+LLL endbox LLL \end{minipage}}}\medskip LLL </div> HTML
 
 %beginbox
 
@@ -154,9 +154,9 @@ Remark:
 These transformations will occur on the markdown file before it is transformed in LaTeX.
 
 You can also declare macro that will be processed after the file was transformed in LaTeX.
-
-    LLL latex LLL \LaTeX LLL
-    LLL latex_ LLL \LaTeX{} LLL
+ 
+    LLL latex LLL \LaTeX LLL LaTeX HTML
+    LLL latex_ LLL \LaTeX{} LLL LaTeX  HTML
 
 In markdown, you simply write \%macroname or \%code
 and it will be transformed correctly in your pdf.
diff --git a/content/01_macros.md b/content/01_macros.md
index 33218d4..6199baf 100644
--- a/content/01_macros.md
+++ b/content/01_macros.md
@@ -7,8 +7,8 @@ macro %%%
 %%% complex %%% ruby: (1..5).map do |x| 
 x*x 
 end.join(" : ") %%%
-LLL latex LLL \LaTeX LLL
-LLL tldr LLL {\em Too long don't read: } LLL
+LLL latex LLL \LaTeX LLL LaTeX HTML
+LLL tldr LLL {\em Too long don't read: } LLL <em>Too long don't read: </em> HTML
 
 It is a simple demonstration of how macros are working.
 They were declared inside the markdown like this:
@@ -21,8 +21,8 @@ They were declared inside the markdown like this:
      %%% complex %%% ruby: (1..5).map do |x| 
                     x*x 
                     end.join(" : ") %%%
-     LLL latex LLL \LaTeX LLL
-     LLL tldr LLL {\em Too long don't read: } LLL
+     LLL latex LLL \LaTeX LLL LaTeX HTML
+     LLL tldr LLL {\em Too long don't read: } LLL <em>Too long don't read: </em> HTML
 ~~~
 
 Now if I write:
diff --git a/filters/mkd_post_latex_macros.rb b/filters/mkd_post_latex_macros.rb
index fade430..ace41b4 100644
--- a/filters/mkd_post_latex_macros.rb
+++ b/filters/mkd_post_latex_macros.rb
@@ -33,10 +33,10 @@ class MarkdownPostLatexMacros
     end
 
     def run (content)
-        content.gsub(/^LLL (\w(\w|\d|\\_)*) LLL ((.|\n)*?) LLL/m) do |m| 
+        content.gsub(/^LLL (\w(\w|\d|\\_)*) LLL ((.|\n)*?) LLL( (.|\n)*? HTML)?/m) do |m| 
             name=$1
             value=$3
-            # puts %{  ltx macro %#{name}\t=> #{value}}
+            # puts %{  ADD LATEX MACRO: %#{name}\t=> #{value}}
             name.gsub!(/\\_/,'_')
             value=value.gsub(/\\textbackslash\{\}/,'\\').
                 gsub(/\\textbar\{\}/,'|').
diff --git a/filters/mkd_post_latex_macros_to_html.rb b/filters/mkd_post_latex_macros_to_html.rb
new file mode 100644
index 0000000..971c25b
--- /dev/null
+++ b/filters/mkd_post_latex_macros_to_html.rb
@@ -0,0 +1,57 @@
+# Add macros to Markdown
+#
+# Here is a %test.
+#
+# you could add a macro like this
+#
+# filter.macro={
+#   :latex => %{\LaTeX}
+# }
+#
+# or within the markdown file by
+#
+# %%% macro_name %%% macro_value %%%
+#
+
+class MarkdownPostLatexMacrosToHTML
+    attr_accessor :macro
+    def initialize()
+        super
+        @macro={}
+    end
+
+    def macro_value_for(ident)
+        return '%' if ident.nil? or ident==""
+        ident=ident.intern
+        return %{%#{ident}} if @macro[ident].nil?
+
+        if @macro[ident] =~ /ruby: ((.|n)*)/m
+            return eval $1
+        else
+            return @macro[ident]
+        end
+    end
+
+    def run (content)
+        content.gsub(/(^<p>\s*)?LLL (\w(\w|\d|\\_)*) LLL ((.|\n)*?) LLL( ((.|\n)*?) HTML)?((\s|\n)*<\/p>)?/m) do |m| 
+            name=$2
+            value=$7
+            puts "SAVE HTML MACRO: #{name} => #{value}"
+            @macro[name.intern]=value
+            ""
+        end.gsub(/(\\?)%(\w[a-zA-Z0-9_]*)/) do |m| 
+            # puts "  ltx macro MATCH: #{$3}"
+            protected=$1
+            name=$2
+            if name != "" 
+                if protected == ""
+                    macro_value_for(name)
+                else
+                    %{<code>%#{name}</code>}
+                end
+            else
+                m
+            end
+        end
+    end
+end
diff --git a/include/index.html b/include/index.html
index ce0e07c..9f31716 100644
--- a/include/index.html
+++ b/include/index.html
@@ -36,10 +36,14 @@
         <script>
             var page=1;
             google.setOnLoadCallback( function() {
+
                 $('#first').click( function() { changeTo(1); });
                 $('#previous').click( function() { changeTo(page-1); });
-                $('#previous').addClass('disable');
                 $('#next').click( function() { changeTo(page+1); });
+
+                $('#previous').addClass('disable');
+                $('#first').addClass('disable');
+
                 $('#nbpages').text("Page 1 / "+nb_pages);
             });
         </script>
diff --git a/include/main.css b/include/main.css
new file mode 100644
index 0000000..ab553d1
--- /dev/null
+++ b/include/main.css
@@ -0,0 +1 @@
+table.description tr td{border:1px solid#eee}.assombris20{background-color:#eee}body{color:#111;background-color:#fff}#content{color:#111;background-color:#fff}a,a:link,a:visited,a:active,a:hover,#clickcomment{text-decoration:none;outline:none}a,a:link,a:visited,a:active,#clickcomment{color:#111}a:hover,#clickcomment:hover{color:#d53300}hr{color:#eee;border-top:1px solid#eee;border-bottom:none;border-left:none;border-right:none}ul{list-style:square}body,h1,h2,h3,h4,#entete,.tag{font-family:Georgia,Palatino,"Century Schoolbook L","Times New Roman",Times,serif;line-height:1.4em}pre{background-color:#111;color:#fff;padding:1em;line-height:1.2em}pre,code{font-family:monaco,monospace;font-size:.7em}p code{font-family:monospace;font-size:1em}p{margin-bottom:1.2em}blockquote{font-style:italic;padding:.5em 1em;color:#555}blockquote a:hover{color:#d53300}blockquote strong,blockquote b,blockquote i,blockquote em{font-weight:400;font-style:normal;color:#111}abbr,acronym{font-variant:small-caps;text-decoration:none;border-bottom-width:0}#titre{letter-spacing:-0.06em;border-bottom:4px double#ccc;border-top:4px double#ccc}#liens .active,#sousliens{color:#111;background-color:#eee;border-top:1px solid#ccc;border-bottom:1px solid#ccc;border-top:none}#liens .active a,#sousliens a{color:#666}#liens .active a:hover,#sousliens a:hover{color:#e25f2f}#liens .active a:hover strong,#liens .active a:hover b,#liens .active a:hover i,#liens .active a:hover em,#liens .active a:hover .nicer,#sousliens a:hover strong,#sousliens a:hover b,#sousliens a:hover i,#sousliens a:hover em,#sousliens a:hover .nicer{color:#ffbe96}#liens .active hr,#sousliens hr{color:#666;border-top:1px solid#666}#liens .active strong,#liens .active b,#liens .active i,#liens .active em,#sousliens strong,#sousliens b,#sousliens i,#sousliens em{color:#111}#lastmod{font-size:.8em}.nojsbutton{font-size:2.5em}#clickcomment{cursor:pointer;font-size:1.2em}.small{font-size:.8em}.sc{font-variant:small-caps}.impact,.darkimpact{font-size:2em;margin:0 auto 1em auto;line-height:1.3em}h1 > .date{font-size:.6em;color:#111}.date{font-size:.8em;color:#fff;border:1px solid#111;text-align:center;width:4.1em;line-height:1.5em;display:inline-block;vertical-align:middle;margin-right:1em}.date .day,.date .month,.date .year{display:block}.date .day{color:#111;background-color:#fff;float:left;width:1.7em}.date .month{float:right;width:2.3em;background-color:#111;color:#fff}.date .year{line-height:3ex;clear:both;color:#111;background-color:#eee;border-top:1px solid#ccc;border-bottom:1px solid#ccc}.date .year a{color:#666}.date .year a:hover{color:#e25f2f}.date .year a:hover strong,.date .year a:hover b,.date .year a:hover i,.date .year a:hover em,.date .year a:hover .nicer{color:#ffbe96}.date .year hr{color:#666;border-top:1px solid#666}.date .year strong,.date .year b,.date .year i,.date .year em{color:#111}body{text-align:center;font-size:.9em}body > #entete{position:absolute;left:0;top:.5em;width:100%;min-width:50em;z-index:8000;padding-bottom:1em;margin-bottom:3em}body > #content > #entete > #choix > #choixrss > #rss{font-size:1em}#titre h2{width:80%;margin-left:auto;margin-right:auto;text-align:center;color:#ccc}#titre{text-align:center;width:100%}#titre h1,#titre h2{padding-left:1em;padding-right:1em}#bottom{clear:right;margin-right:0;padding:1.5em;line-height:1.5em;color:#ccc;margin-top:2em;text-align:center}#bottom a{color:#ccc}#bottom a:hover{color:#d53300}#sousliens{padding:1em 0;line-height:2em}#sousliens ul{list-style:none;margin-left:4em}ul.horizontal li{display:inline;font-size:.9em}ul.horizontal{margin-top:0;margin-bottom:0}#entete{padding-top:.1em;border-top:1px solid#ccc;border-bottom:1px solid#ccc}#liens{width:100%;padding:0;clear:both;margin-top:.5em}#liens ul{width:100%;clear:both;padding:0;margin:0}#liens ul li{display:inline-block;height:4em;margin-left:.2em;margin-right:.2em;width:23%}#liens ul li a,#liens ul li span{width:100%;display:block;line-height:4em}.clear{clear:both}#content{line-height:4em;margin-left:auto;margin-right:auto;margin-top:0;position:relative;clear:both;width:52em}#content > #choix{margin-top:1em}.encadre,.black,.red,.intro,.resume,.shadow{padding-left:2em;padding-right:2em;margin-top:2em;margin-bottom:2em}.encadre,.black,.red,.shadow{color:#111;background-color:#eee;border-top:1px solid#ccc;border-bottom:1px solid#ccc}.encadre a,.black a,.red a,.shadow a{color:#666}.encadre a:hover,.black a:hover,.red a:hover,.shadow a:hover{color:#e25f2f}.encadre a:hover strong,.encadre a:hover b,.encadre a:hover i,.encadre a:hover em,.encadre a:hover .nicer,.black a:hover strong,.black a:hover b,.black a:hover i,.black a:hover em,.black a:hover .nicer,.red a:hover strong,.red a:hover b,.red a:hover i,.red a:hover em,.red a:hover .nicer,.shadow a:hover strong,.shadow a:hover b,.shadow a:hover i,.shadow a:hover em,.shadow a:hover .nicer{color:#ffbe96}.encadre hr,.black hr,.red hr,.shadow hr{color:#666;border-top:1px solid#666}.encadre strong,.encadre b,.encadre i,.encadre em,.black strong,.black b,.black i,.black em,.red strong,.red b,.red i,.red em,.shadow strong,.shadow b,.shadow i,.shadow em{color:#111}.intro,.resume{font-size:.9em;font-style:italic;padding:.5em 1em;color:#555}.intro a:hover,.resume a:hover{color:#d53300}.intro strong,.intro b,.intro i,.intro em,.resume strong,.resume b,.resume i,.resume em{font-weight:400;font-style:normal;color:#111}#afterheader > h1{width:100%;padding-top:1.5em;text-align:left}#afterheader{padding-left:0;padding-right:0}#sousliens{margin-top:3em;margin-bottom:3em;font-size:1.2em;letter-spacing:1px;text-align:left;clear:both}.twilight{line-height:1.1em}.corps{font-family:Georgia,Palatino,"Century Schoolbook L","Times New Roman",Times,serif;font-size:1.25em;line-height:1.6em;text-align:justify;text-align:left;padding:3em 3em;margin:0;border-bottom:1px#ccc solid;clear:both}.corps img{max-width:30em;border:1px solid#ccc;background-color:#fff;padding:.5em;box-shadow:0 10px 15px#ccc}img.clean{border:none}#address{clear:both}.definitionCell{width:5em;vertical-align:top;font-weight:700;text-align:center}.valueCell{text-align:right}.smallblock{float:left;width:50%;font-size:1em;font-weight:700}.largeblock{float:right;width:70%;font-size:1em}#blackpage,#nojsredirect{top:0;left:0;width:100%;height:100%;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:fixed;text-align:center}#blackpage{color:#666;padding-top:10em;background-color:#eee;z-index:9000;cursor:wait}#blackpage img{background:none;border:none}#blackpage a{cursor:pointer}#nojsredirect{z-index:9001}.nojsbutton{width:50%;padding:1em;border:solid 3px white;margin-left:auto;margin-right:auto;margin-top:2em;z-index:9002}.file{font-size:.8em;text-align:right;padding-right:1em;margin-right:.1;margin-bottom:0;background:#111}.file a{color:#fff}.flush{clear:both}table.description{border-spacing:5px;border-collapse:separate;margin-right:auto;margin-left:auto}table.description tr td{padding-left:.5em;padding-right:.5em;padding-top:.5ex;padding-bottom:.5ex;vertical-align:middle;margin-right:5px}ul.long li{margin-bottom:1em}img{display:block;margin-left:auto;margin-right:auto;background:none;border:none}img.left{float:left;max-width:30%;margin-right:1em}img.inside{display:inline;vertical-align:middle}pre{overflow:hidden}.withfile pre{margin-top:0;overflow:hidden}.navigationprev,.navigationnext{padding:0;margin-left:.2em;margin-right:.2em;margin-bottom:0;margin-top:3em;width:45%}.navigation .navigationprev,.navigation .navigationnext{width:30%;margin-top:0}.navigation{height:4em;border-bottom:#ccc solid 1px}.presarticleleft,.presarticleright{font-size:1em}.navigationprev{float:left;text-align:left}.navigationnext{float:right;text-align:right}.impact,.darkimpact{text-align:left;width:66%;padding-left:.25em;padding-right:.25em}table.impact{text-align:left}table.impact tr td{padding-left:.25em;padding-right:.25em}#liens{font-size:1.2em}#iemessage{font-size:1.2em}.tag{display:inline;cursor:pointer;margin-left:.5em;margin-right:.5em}.list{margin-top:3em}#menuMessage{font-size:1.2em;line-height:1.5em;width:100%;text-align:center}#choixrss{float:right;width:25%;line-height:2em}#choixlang{line-height:2em}#choix a{color:#888}#choix a:hover{color:#d53300}#choixlang a{display:block;width:25%;line-height:4em;text-align:center}#next_before_articles{clear:both;width:100%;font-size:1.2em;padding-top:1em;padding-bottom:1em}#previous_articles,#next_articles{color:#888;font-style:italic;font-size:.8em}#previous_articles{float:left;margin-left:1em;width:45%;text-align:left}.previous_article,.next_article{margin-top:1em}#next_articles{float:right;width:45%;margin-right:1em;text-align:right}#clickcomment{margin-left:0;width:25%}#rss{font-size:1.2em;text-align:center;display:block;width:100%;float:right;padding:1em .1em}.return a{text-align:center;float:right;width:25%}.corps .return a{color:#eee;padding:.1em;line-height:1.5em;font-size:1.5em;height:1.5em;float:left;font-size:2em;margin-top:-0.5em;margin-left:-2em;width:1.5em}a.return{color:#eee;padding:.1em;line-height:1.5em;font-size:1.5em;height:1.5em;font-size:2em;width:1.5em;display:block}a.return:hover{color:#888}.corps .return a:hover{color:#d53300}.footnotes{font-size:.8em}.fontnotes ol{margin-left:0}.typeset img{display:inline;border:none;margin:0;padding:0}strong,b,i,em{font-weight:400;color:#888}strong a,b a,i a,em a{color:#111}strong a:hover,b a:hover,i a:hover,em a:hover{color:#d53300}.corps p strong,.corps p b,.corps p i,.corps p em{color:#555}a:hover strong,a:hover b,a:hover i,a:hover em{color:#e25f2f}a:hover .nicer{color:#ffbe96}.nicer{color:#ccc;font-family:"Lucida Grande",Tahoma}.block{width:31%;text-align:left;line-height:1em;margin-left:1%;margin-right:1%;font-size:.8em}.block a{color:#111}.block a:hover{color:#d53300}.block h3{margin:0;font-size:1.3em}.block p{line-height:1.2em}.left{float:left}.right{float:right}.corps p a,.corps ul a{color:#555}.corps p a:hover,.corps ul a:hover{color:#d53300}ul.bloglist,.archive ul{list-style-type:none;margin:0}ul.bloglist li,.archive ul li{margin-bottom:1em}.button{cursor:pointer;text-align:center}
\ No newline at end of file
diff --git a/include/template.html b/include/template.html
new file mode 100644
index 0000000..29236ab
--- /dev/null
+++ b/include/template.html
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        <link rel="stylesheet" type="text/css" href="include/main.css" />
+
+        <!-- HTML HEADER -->
+        <title><!-- Title --> by <!-- Author --></title> 
+    </head>
+    <body>
+        <div id="content">
+            <h1 style="font-size: 5em; font-weight: normal;"> <!-- Title --> </h1>
+            <div id="titre">
+                <h2> <!-- Subtitle --> </h2>
+                <h3><em>by</em> <!-- Author --> </h3>
+            </div>
+            <div id="afterhead" style="padding-top: 2em; font-size: 1.3em;">
+            <!-- INCLUDES -->
+            </div>
+        </div>
+    </body>
+</html>
+
+
diff --git a/include/template.tex b/include/template.tex
index 56923d1..0737a99 100644
--- a/include/template.tex
+++ b/include/template.tex
@@ -23,10 +23,18 @@
     \newcommand{\styleprintchapternum}{\textcolor{hrulecolor}{\Huge\thechapter\hspace{.5em}}}
     \renewcommand*{\printchaptertitle}[1]{\medskip\begin{center}\styleprintchapternum \hfill\begin{minipage}{.9\linewidth}\begin {center}\Huge##1\end{center}\end{minipage}\end{center}\medskip}
 }
-% -- 
 
 \chapterstyle{combined}
+% -- END CHAPTER STYLE --
 
+% -- Hyperref setup --
+\definecolor{linkcolor}{rgb}{0.4,0.0,0.0}
+\hypersetup{
+    colorlinks=true, %
+    urlcolor=linkcolor, %
+    pdfcreator=author, %
+}
+% --
 
 \author{}
 
diff --git a/include/ystyle.css b/include/ystyle.css
new file mode 100644
index 0000000..0981d84
--- /dev/null
+++ b/include/ystyle.css
@@ -0,0 +1,43 @@
+/* Author: Yann Esposito 
+ * Website: yannesposito.com
+ * Krambook url: http://github.com/yogsototh/krambook.git
+ * */
+
+#leftcolumn {float: left; width: 7em}
+#rightcolumn {float: right; width: 7em}
+.button {
+    text-shadow: 0 1px 0 #eee;
+    border: 1px solid #666;
+    width: 7em; 
+    height: 3em; 
+    background: #ccc; 
+    color: #333; 
+    border-radius: 2px;
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    font-weight: bold; 
+    cursor: pointer; 
+    text-align: center;
+    margin-bottom: 1em;
+    margin-top: 1em;
+    line-height: 3em; }
+
+.disable {
+    cursor: default;
+    opacity: .3 }
+
+#nbpages{ 
+    border: 1px solid #666;
+    width: 7em;
+    height: 3em; 
+    line-height: 3em;
+    background: #eee; 
+    text-align: center; }
+
+#content {margin-left: auto; margin-right: auto; text-align: center}
+#frame {
+    text-align: center; margin-left: auto; margin-right: auto;
+    width: 492pt; height: 672pt; border: 1px solid #ccc}
+#who { position: fixed; bottom: 2px; right: 2px; text-align: right; font-size: .7em; }
+a { color: #888; text-decoration: none; border: none; }
+a:hover { color: #dc3; }