diff --git a/about.html b/about.html
new file mode 100644
index 0000000..2379a87
--- /dev/null
+++ b/about.html
@@ -0,0 +1,13 @@
+<h1>Authors</h1>
+<h2>COPS is developped and maintained by Sébastien Lucas.</h2>
+
+<p>See full history on <a href="https://github.com/seblucas">Github</a> to check all authors.<br />
+COPS use some external librairies, check README for the details.</p>
+
+<h2>Copyright</h2>
+<p>This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License version 2 as published by the Free Software Foundation.<br />
+The complete content of license is provided in file COPYING within distribution and also available <a href="http://www.gnu.org/licenses/gpl-2.0.html">online</a>.</p>
+
+<h2>Contact</h2>
+<p>For more info please visit <a href="http://blog.slucas.fr/en/oss/calibre-opds-php-server">COPS Home Page</a></p>
+<p>You can also check <a href="http://www.mobileread.com/forums/showthread.php?t=170903">COPS's topic on MobileRead forum</a>.</p>
\ No newline at end of file
diff --git a/about.xml b/about.xml
index 35043ed..5c867d0 100644
--- a/about.xml
+++ b/about.xml
@@ -1,29 +1,21 @@
-<div class="bookdetail">
-<div class="entryTitle">Authors</div>
-<div class="content" style="max-width:700px;">
+<div class="bookpopup" style="max-width:700px;">
+<h1>About COPS</h1>
+<h2>Authors</h2>
 <p>COPS is developped and maintained by Sébastien Lucas.</p>
 
 <p>See full history on <a href="https://github.com/seblucas">Github</a> to check all authors.</p>
 
 <p>COPS use some external librairies, check README for the details.</p>
-</div>
-<div class="entryTitle">Copyright</div>
-<div class="content" style="max-width:700px;">
+<h2>Copyright</h2>
 <p>This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License version 2 as published by the Free Software Foundation.</p>
 
 <p>The complete content of license is provided in file COPYING within distribution and also available <a href="http://www.gnu.org/licenses/gpl-2.0.html">online</a>.</p>
-</div>
-<div class="entryTitle">Contact</div>
-<div class="content" style="max-width:700px;">
+<h2>Contact</h2>
 <p>For more info please visit <a href="http://blog.slucas.fr/en/oss/calibre-opds-php-server">COPS Home Page</a></p>
 
 <p>You can also check <a href="http://www.mobileread.com/forums/showthread.php?t=170903">COPS's topic on MobileRead forum</a>.</p>
-</div>
-<div class="entryTitle">Thanks</div>
-<div class="content" style="max-width:700px;">
+<h2>Thanks</h2>
 <p>Thanks a lot to Kovid Goyal for <a href="http://calibre-ebook.com">Calibre</a>.</p>
 
 <p>And many thanks to all those who helped test COPS.</p>
-</div>
-
 </div>
\ No newline at end of file
diff --git a/base.php b/base.php
index 55fa0f7..e8aa64a 100644
--- a/base.php
+++ b/base.php
@@ -377,8 +377,10 @@ class Page
             }
         } else {
             array_push ($this->entryArray, Author::getCount());
-            array_push ($this->entryArray, Serie::getCount());
-            array_push ($this->entryArray, Tag::getCount());
+            $series = Serie::getCount();
+            if (!is_null ($series)) array_push ($this->entryArray, $series);
+            $tags = Tag::getCount();
+            if (!is_null ($tags)) array_push ($this->entryArray, $tags);
             foreach ($config['cops_calibre_custom_column'] as $lookup) {
                 $customId = CustomColumn::getCustomId ($lookup);
                 if (!is_null ($customId)) {
diff --git a/bookdetail.php b/bookdetail.php
index d9430f7..f8e3676 100644
--- a/bookdetail.php
+++ b/bookdetail.php
@@ -17,19 +17,8 @@ $serie = $book->getSerie ();
 $book->getLinkArray ();
  
 ?>
-<?php
-    if (isset ($page) &&  $page == Base::PAGE_BOOK_DETAIL) {
-?>
-<div class="bookdetail">
-<?php
-    } else {
-?>
-<div class="bookpopup">
-<?php
-    }
-?>
-    <div class="booke">
-        <div class="cover">
+<article class="bookpopup">
+            <span class="cover">
             <?php
                 if ($book->hasCover) {
             ?>
@@ -39,21 +28,19 @@ $book->getLinkArray ();
             <?php
                 }
             ?>
-        </div>
-        <div class="download">
+            </span>
 <?php
             foreach ($book->getDatas() as $data)
             {
 ?>    
-                <div class="button buttonEffect"><a href="<?php echo $data->getHtmlLink () ?>"><?php echo $data->format ?></a></div>
+                <h2 class="download"><a href="<?php echo $data->getHtmlLink () ?>"><?php echo $data->format ?></a></h2>
 <?php
             }
 ?>
-        </div>
-        <div class="entryTitle"><a rel="bookmark" href="<?php echo $book->getDetailUrl (true) ?>"><img src="<?php echo getUrlWithVersion("images/Link.png") ?>" alt="<?php echo localize ("permalink.alternate") ?>" /></a><?php echo htmlspecialchars ($book->title) ?></div>
-        <div class="entrySection">
-            <span><?php echo localize("authors.title") ?></span>
-            <div class="buttonEffect pad6">
+        <h1><a rel="bookmark" href="<?php echo $book->getDetailUrl (true) ?>"><img src="<?php echo getUrlWithVersion("images/Link.png") ?>" alt="<?php echo localize ("permalink.alternate") ?>" /></a><?php echo htmlspecialchars ($book->title) ?></h1>
+            <p class="popupless">
+            <h3><?php echo localize("authors.title") ?>: </h3>
+            
 <?php
             $i = 0;
             foreach ($authors as $author) {
@@ -63,14 +50,13 @@ $book->getLinkArray ();
 <?php
             }
 ?>
-            </div>
-        </div>
+</p>
 <?php
         if (count ($tags) > 0) {
 ?>
-        <div class="entrySection">
-            <span><?php echo localize("tags.title") ?></span>
-            <div class="buttonEffect pad6">
+            <p class="popupless">
+            <h3><?php echo localize("tags.title") ?>: </h3>
+
 <?php
             $i = 0;
             foreach ($tags as $tag) {
@@ -80,44 +66,38 @@ $book->getLinkArray ();
 <?php
             }
 ?>
-            </div>
-        </div>
+</p>
 <?php
         }
         if (!is_null ($serie))
         {
 ?>
-        <div class="entrySection">
-            <div class="buttonEffect pad6">
-                <a href="<?php $link = new LinkNavigation ($serie->getUri ()); echo $link->hrefXhtml () ?>"><?php echo localize("series.title") ?></a>
-            </div>
+            <p class="popupless">
+                <h3><a href="index.php<?php $link = new LinkNavigation ($serie->getUri ()); echo $link->hrefXhtml () ?>"><?php echo localize("series.title") ?></a>: </h3>
             <?php echo str_format (localize ("content.series.data"), $book->seriesIndex, htmlspecialchars ($serie->name)) ?>
-        </div>
+</p>
 <?php
         }
         if ($book->getPubDate() != "")
         {
 ?>
-        <div class="entrySection">
-            <span><?php echo localize("pubdate.title") ?></span>
+            <p class="popupless">
+<h3><?php echo localize("pubdate.title") ?>: </h3>
             <?php echo $book->getPubDate() ?>
-        </div>
+</p>
 <?php
         }
         if ($book->getLanguages () != "")
         {
 ?>
-        <div class="entrySection">
-            <span><?php echo localize("config.Language.label") ?></span>
+            <p class="popupless">
+<h3><?php echo localize("config.Language.label") ?>: </h3>
             <?php echo $book->getLanguages () ?>
-        </div>
-<?php
+</p>
+ <?php
         }
 ?>
-    </div>
-    <div class="clearer" ></div>
-    <hr />
-    <div><?php echo localize("content.summary") ?></div>
-    <div class="content" <?php if (!isset ($page)) echo 'style="max-width:700px;"' ?>><?php echo $book->getComment (false) ?></div>
-    <hr />
-</div>
\ No newline at end of file
+<br />
+<h4><?php echo localize("content.summary") ?></h4>
+<div <?php if (!isset ($page)) echo 'style="max-width:700px;"' ?> ><?php echo $book->getComment (false) ?></div>
+</article>
\ No newline at end of file
diff --git a/checkconfig.php b/checkconfig.php
index 8a36162..4b81e4f 100644
--- a/checkconfig.php
+++ b/checkconfig.php
@@ -10,7 +10,7 @@
     require_once ("config.php");
     require_once ("base.php");
     
-    header ("Content-Type:application/xhtml+xml");
+    header ("Content-Type:text/html; charset=UTF-8");
     
     $err = getURLParam ("err", -1);
     $error = NULL;
@@ -21,38 +21,35 @@
     }
 
 ?>
-<!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" xml:lang="fr" lang="fr">
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <meta http-equiv="imagetoolbar" content="no" />
-    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>COPS Configuration Check</title>
     <link rel="stylesheet" type="text/css" href="<?php echo getUrlWithVersion("style.css") ?>" media="screen" />
 </head>
 <body>
 <div class="container">
-    <div class="head">
+    <header>
         <div class="headcenter">
-            <p>COPS Configuration Check</p>
+            <h1>COPS Configuration Check</h1>
         </div>
-    </div>
-    <div class="clearer" />
+    </header>
     <div id="content" style="display: none;"></div>
-    <div class="entries">
+    <section>
         <?php
         if (!is_null ($error)) {
         ?>
-        <div class="entry">
-            <div class="entryTitle">You've been redirected because COPS is not configured properly</div>
-            <div class="entryContent"><?php echo $error ?></div>
-        </div>
+        <article class="frontpage">
+            <h2>You've been redirected because COPS is not configured properly</h2>
+            <h4><?php echo $error ?></h4>
+        </article>
         <?php
         }
         ?>
-        <div class="entry">
-            <div class="entryTitle">Check if GD is properly installed and loaded</div>
-            <div class="entryContent">
+        <article class="frontpage">
+            <h2>Check if GD is properly installed and loaded</h2>
+            <h4>
             <?php 
             if (extension_loaded('gd') && function_exists('gd_info')) {
                 echo "OK";
@@ -60,11 +57,11 @@
                 echo "Please install the php5-gd extension and make sure it's enabled";
             }
             ?>
-            </div>
-        </div>
-        <div class="entry">
-            <div class="entryTitle">Check if Sqlite is properly installed and loaded</div>
-            <div class="entryContent">
+            </h4>
+        </article>
+        <article class="frontpage">
+            <h2>Check if Sqlite is properly installed and loaded</h2>
+            <h4>
             <?php 
             if (extension_loaded('pdo_sqlite')) {
                 echo "OK";
@@ -72,11 +69,11 @@
                 echo "Please install the php5-sqlite extension and make sure it's enabled";
             }
             ?>
-            </div>
-        </div>
-        <div class="entry">
-            <div class="entryTitle">Check if libxml is properly installed and loaded</div>
-            <div class="entryContent">
+            </h4>
+        </article>
+        <article class="frontpage">
+            <h2>Check if libxml is properly installed and loaded</h2>
+            <h4>
             <?php 
             if (extension_loaded('libxml')) {
                 echo "OK";
@@ -84,15 +81,14 @@
                 echo "Please make sure libxml is enabled";
             }
             ?>
-            </div>
-        </div>
+            </h4>
+        </article>
 <?php 
 $i = 0;
 foreach (Base::getDbList () as $name => $database) { 
 ?>
-        <div class="entry">
-            <div class="entryTitle">Check if Calibre database file exists and is readable</div>
-            <div class="entryContent">
+        <article class="frontpage">
+            <h2>Check if Calibre database file exists and is readable</h2>
             <?php 
             if (is_readable (Base::getDbFileName ($i))) {
                 echo "{$name} OK";
@@ -107,11 +103,10 @@ Please check
 </ul>";
             }
             ?>
-            </div>
-        </div>
-        <div class="entry">
-            <div class="entryTitle">Check if Calibre database file can be opened with PHP</div>
-            <div class="entryContent">
+        </article>
+        <article class="frontpage">
+            <h2>Check if Calibre database file can be opened with PHP</h2>
+            <h4>
             <?php 
             try {
                 $db = new PDO('sqlite:'. Base::getDbFileName ($i));
@@ -120,11 +115,11 @@ Please check
                 echo "{$name} If the file is readable, check your php configuration. Exception detail : " . $e;
             }
             ?>
-            </div>
-        </div>
-        <div class="entry">
-            <div class="entryTitle">Check if Calibre database file contains at least some of the needed tables</div>
-            <div class="entryContent">
+            </h4>
+        </article>
+        <article class="frontpage">
+            <h2>Check if Calibre database file contains at least some of the needed tables</h2>
+            <h4>
             <?php 
             try {
                 $db = new PDO('sqlite:'. Base::getDbFileName ($i));
@@ -138,10 +133,11 @@ Please check
                 echo "{$name} If the file is readable, check your php configuration. Exception detail : " . $e;
             }
             ?>
-            </div>
-        </div>
+            </h4>
+        </article>
 <?php $i++; } ?>
-    </div>
+    </section>
+    <footer></footer>
 </div>
 </body>
 </html>
diff --git a/images/home.png b/images/home.png
index 2b36f75..c3bfde9 100644
Binary files a/images/home.png and b/images/home.png differ
diff --git a/images/info.png b/images/info.png
index 38d9e76..5f9894b 100644
Binary files a/images/info.png and b/images/info.png differ
diff --git a/images/next.png b/images/next.png
index d258ec2..9abcd7e 100644
Binary files a/images/next.png and b/images/next.png differ
diff --git a/images/previous.png b/images/previous.png
index e41d472..55eeb89 100644
Binary files a/images/previous.png and b/images/previous.png differ
diff --git a/images/search32.png b/images/search32.png
index 1bf96bf..7f3e5fe 100644
Binary files a/images/search32.png and b/images/search32.png differ
diff --git a/images/setting64.png b/images/setting64.png
index da8ca57..7bdc3ac 100644
Binary files a/images/setting64.png and b/images/setting64.png differ
diff --git a/images/sort32.png b/images/sort32.png
index e6fe3b6..0e6c5c9 100644
Binary files a/images/sort32.png and b/images/sort32.png differ
diff --git a/index.php b/index.php
index 3913027..681455a 100644
--- a/index.php
+++ b/index.php
@@ -39,20 +39,18 @@
  * HTTP_USER_AGENT = "Mozilla/5.0 (Linux; U; en-us; EBRD1101; EXT) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"
  */
 
-	if (preg_match("/(Kobo|Kindle\/3.0|EBRD1101)/", $_SERVER['HTTP_USER_AGENT'])) {
-		$isEink = 1;
-	} else {
-		$isEink = 0;
-	}
+    if (preg_match("/(Kobo|Kindle\/3.0|EBRD1101)/", $_SERVER['HTTP_USER_AGENT'])) {
+        $isEink = 1;
+    } else {
+        $isEink = 0;
+    }
 
 
 ?>
-<!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" xml:lang="fr" lang="fr">
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <meta http-equiv="imagetoolbar" content="no" />
-    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><?php echo htmlspecialchars ($currentPage->title) ?></title>
     <script type="text/javascript" src="<?php echo getUrlWithVersion("js/jquery-1.9.1.min.js") ?>"></script>
     <script type="text/javascript" src="<?php echo getUrlWithVersion("js/jquery.cookies.js") ?>"></script>
@@ -63,17 +61,15 @@
     <script type="text/javascript" src="<?php echo getUrlWithVersion("js/jquery.sortElements.js") ?>"></script>
     <link rel="related" href="<?php echo $config['cops_full_url'] ?>feed.php" type="application/atom+xml;profile=opds-catalog" title="<?php echo $config['cops_title_default']; ?>" /> 
     <link rel="icon" type="image/vnd.microsoft.icon" href="<?php echo $currentPage->favicon ?>" />
+    <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Open+Sans:400,300italic,800,300,400italic,600,600italic,700,700italic,800italic' />
     <link rel="stylesheet" type="text/css" href="<?php echo getUrlWithVersion("style.css") ?>" media="screen" />
+    <link rel="stylesheet" type="text/css" href="<?php echo getUrlWithVersion("resources/normalize/normalize.css") ?>" />
     <script type="text/javascript">
         $(document).ready(function() {
             // Handler for .ready() called.
-            $(".entry").click(function(){
-                window.location=$(this).find("a").attr("href");
-                return false;
-            });
             
             $("#sort").click(function(){
-                $('.book').sortElements(function(a, b){
+                $('.books').sortElements(function(a, b){
                     var test = 1;
                     if ($("#sortorder").val() == "desc")
                     {
@@ -81,27 +77,33 @@
                     }
                     return $(a).find ("." + $("#sortchoice").val()).text() > $(b).find ("." + $("#sortchoice").val()).text() ? test : -test;
                 });
-                $("#search").slideUp();
             });
             
 <?php if ($config['cops_use_fancyapps'] == 1) { ?>
             $(".fancycover").fancybox({
                 'type' : 'image',
-                prevEffect		: 'none',
-                nextEffect		: 'none'
+                prevEffect      : 'none',
+                nextEffect      : 'none'
                 <?php if ($isEink) echo ", openEffect : 'none', closeEffect : 'none', helpers : {overlay : null}"; ?>
             });
             
             $(".fancyabout").fancybox({
                 'type' : 'ajax',
                 title           : 'COPS <?php echo VERSION ?>',
-                prevEffect		: 'none',
-                nextEffect		: 'none'
+                prevEffect      : 'none',
+                nextEffect      : 'none'
+                <?php if ($isEink) echo ", openEffect : 'none', closeEffect : 'none', helpers : {overlay : null}"; ?>
+            });
+            
+            $(".fancydetail").fancybox({
+                'type' : 'ajax',
+                prevEffect      : 'none',
+                nextEffect      : 'none'
                 <?php if ($isEink) echo ", openEffect : 'none', closeEffect : 'none', helpers : {overlay : null}"; ?>
             });
 <?php } ?>
             
-            $("#settingsImage").click(function(){
+            $(".headright").click(function(){
                 if ($("#tool").is(":hidden")) {
                     $("#tool").slideDown("slow");
                     $.cookie('toolbar', '1');
@@ -111,23 +113,6 @@
                 }
             });
             
-<?php if  ($page != Base::PAGE_BOOK_DETAIL) { ?>
-            $(".bookdetail").click(function(){
-                var url = $(this).find("a").attr("href");
-<?php if ($config['cops_use_fancyapps'] == 0) { ?>
-                window.location = url;
-<?php } else { ?>
-                $('#content').load(url, function(data, stat, req){
-                    $.fancybox( {
-                        content: data,
-                        autoSize: true
-                        <?php if ($isEink) echo ", margin : [15, 35, 10, 10], openEffect : 'none', closeEffect : 'none', helpers : {overlay : null}"; ?>
-                    } );
-                });
-<?php } ?>
-                return false;
-            });
-<?php } ?>
         });
 
 <?php
@@ -153,59 +138,53 @@
 </head>
 <body>
 <div class="container">
-    <div class="head">
-        <div class="headleft">
-            <a href="<?php echo $_SERVER["SCRIPT_NAME"]; if ($page != Base::PAGE_INDEX && !is_null ($database)) echo "?" . addURLParameter ("", DB, $database);  ?>">
+    <header>
+        <a class="headleft" href="<?php echo $_SERVER["SCRIPT_NAME"]; if ($page != Base::PAGE_INDEX && !is_null ($database)) echo "?" . addURLParameter ("", DB, $database); ?>">
                 <img src="<?php echo getUrlWithVersion("images/home.png") ?>" alt="<?php echo localize ("home.alternate") ?>" />
-            </a>
-        </div>
-        <div class="headright">
-            <img id="settingsImage" src="<?php echo getUrlWithVersion("images/setting64.png") ?>" alt="Settings and menu" />
-        </div>
+        </a>
+        <img class="headright" id="searchImage" src="<?php echo getUrlWithVersion("images/setting64.png") ?>" alt="Settings and menu" />
         <div class="headcenter">
-            <p><?php echo htmlspecialchars ($currentPage->title) ?></p>
+            <h1><?php echo htmlspecialchars ($currentPage->title) ?></h1>
         </div>
-    </div>
-    <div class="clearer" ></div>
-    <div id="tool" <?php if ($withToolbar) echo 'style="display: none"' ?>>
-        <div style="float: left; width: 60%">
-            <form action="index.php" method="get">
+        <div id="tool" <?php if ($withToolbar) echo 'style="display: none"' ?>>
+            <div style="float: left; width: 60%">
+                <form action="index.php" method="get">
+                    <div style="float: right">
+                        <input type="image" src="images/search32.png" alt="<?php echo localize ("search.alternate") ?>" />
+                    </div>
+                    <div class="stop">
+                        <input type="hidden" name="current" value="<?php echo $page ?>" />
+                        <input type="hidden" name="page" value="9" />
+                        <?php if (!is_null ($database)) { ?>
+                            <input type="hidden" name="<?php echo DB ?>" value="<?php echo $database ?>" />
+                        <?php } ?>
+                        <input type="text" name="query" />
+                    </div>
+                </form>
+            </div>
+    <?php if ($currentPage->containsBook ()) { ?>
+            <div style="float: right; width: 35%">
                 <div style="float: right">
-                    <input type="image" src="images/search32.png" alt="<?php echo localize ("search.alternate") ?>" />
+                    <img id="sort" src="images/sort32.png" alt="<?php echo localize ("sort.alternate") ?>" />
                 </div>
                 <div class="stop">
-                    <input type="hidden" name="current" value="<?php echo $page ?>" />
-                    <input type="hidden" name="page" value="9" />
-                    <?php if (!is_null ($database)) { ?>
-                        <input type="hidden" name="<?php echo DB ?>" value="<?php echo $database ?>" />
-                    <?php } ?>
-                    <input type="text" name="query" />
+                    <select id="sortchoice">
+                        <option value="st"><?php echo localize("bookword.title") ?></option>
+                        <option value="sa"><?php echo localize("authors.title") ?></option>
+                        <option value="ss"><?php echo localize("series.title") ?></option>
+                        <option value="sp"><?php echo localize("content.published") ?></option>
+                    </select>
+                    <select id="sortorder">
+                        <option value="asc"><?php echo localize("search.sortorder.asc") ?></option>
+                        <option value="desc"><?php echo localize("search.sortorder.desc") ?></option>
+                    </select> 
                 </div>
-            </form>
-        </div>
-<?php if ($currentPage->containsBook ()) { ?>
-        <div style="float: right; width: 35%">
-            <div style="float: right">
-                <img id="sort" src="images/sort32.png" alt="<?php echo localize ("sort.alternate") ?>" />
-            </div>
-            <div class="stop">
-                <select id="sortchoice">
-                    <option value="st"><?php echo localize("bookword.title") ?></option>
-                    <option value="sa"><?php echo localize("authors.title") ?></option>
-                    <option value="ss"><?php echo localize("series.title") ?></option>
-                    <option value="sp"><?php echo localize("content.published") ?></option>
-                </select>
-                <select id="sortorder">
-                    <option value="asc"><?php echo localize("search.sortorder.asc") ?></option>
-                    <option value="desc"><?php echo localize("search.sortorder.desc") ?></option>
-                </select> 
             </div>
+    <?php } ?>
         </div>
-<?php } ?>
-    </div>
-    <div class="clearer" ></div>
+    </header>
     <div id="content" style="display: none;"></div>
-    <div class="entries">
+    <section>
 <?php
             if ($page == Base::PAGE_BOOK_DETAIL) {
                 include ("bookdetail.php");
@@ -215,34 +194,31 @@
             foreach ($currentPage->entryArray as $entry) {
                 if (get_class ($entry) != "EntryBook") {
 ?>
-        <div class="entry">
-            <div class="entryTitle"><?php echo htmlspecialchars ($entry->title) ?></div>
-            <div class="entryContent"><?php echo htmlspecialchars ($entry->content) ?></div>
-        <?php
-            foreach ($entry->linkArray as $link) {
-                if ($link->type != Link::OPDS_NAVIGATION_TYPE) { continue; }
-        ?>
-            <a href="<?php echo $link->hrefXhtml () ?>" class="navigation">nav</a>
-        <?php
-            }
-        ?>
-        </div>
+        <article>
+            <div class="frontpage">
+            <?php foreach ($entry->linkArray as $link) { if ($link->type != Link::OPDS_NAVIGATION_TYPE) { continue; } ?> <a href="<?php echo $link->hrefXhtml () ?>">
+                    <h2><?php echo htmlspecialchars ($entry->title) ?></h2>
+                    <?php } ?>
+                    <h4><?php echo htmlspecialchars ($entry->content) ?></h4> 
+                </a>
+            </div>
+        </article>
         <?php
                 }
                 else
                 {
         ?>
-        <div class="book">
-            <div class="cover">
+        <article class="books">
+            <span class="cover">
             <?php
                 if ($entry->book->hasCover) {
             ?>
-                <a rel="group" class="fancycover" href="<?php echo $entry->getCover () ?>"><img src="<?php echo $entry->getCoverThumbnail () ?>" alt="<?php echo localize("i18n.coversection") ?>" /></a>
+                <a data-fancybox-group="group" class="fancycover" href="<?php echo $entry->getCover () ?>"><img src="<?php echo $entry->getCoverThumbnail () ?>" alt="<?php echo localize("i18n.coversection") ?>" /></a>
             <?php
                 }
             ?>
-            </div>
-            <div class="download">
+            </span>
+            <h2 class="download">
             <?php
                 $i = 0;
                 foreach ($config['cops_prefered_format'] as $format)
@@ -251,15 +227,16 @@
                     if ($data = $entry->book->getDataFormat ($format)) {
                         $i++;
             ?>    
-                <div class="button buttonEffect"><a href="<?php echo $data->getHtmlLink () ?>"><?php echo $format ?></a></div>
-            <?php
+                <a href="<?php echo $data->getHtmlLink () ?>"><?php echo $format ?></a><br />
+                <?php
                     }
+                    
                 }
             ?>
-            </div>
-            <div class="bookdetail">
-                <a class="navigation" href="<?php echo $entry->book->getDetailUrl () ?>" ></a>
-                <div class="entryTitle st"><?php echo htmlspecialchars ($entry->title) ?>
+            </h2>
+            <a class="fancydetail" href="<?php echo $entry->book->getDetailUrl () ?>">
+            <div class="fullclickpopup">
+                <h2><span class="st"><?php echo htmlspecialchars ($entry->title) ?></span>
             <?php
                 if ($entry->book->getPubDate() != "")
                 {
@@ -268,33 +245,35 @@
             <?php
                 }
             ?>
-                    <span class="sr"><?php echo $entry->book->getRating () ?></span>
-                </div>
-                <div class="entryContent sa"><?php echo localize("authors.title") . " : " . htmlspecialchars ($entry->book->getAuthorsName ()) ?></div>
-                <div class="entryContent"><?php echo localize("tags.title") . " : " . htmlspecialchars ($entry->book->getTagsName ()) ?></div>
+                    <span class="sr"><?php echo $entry->book->getRating () ?></span></h2>
+                <h4><?php echo localize("authors.title") . " : " ?></h4><span class="sa"><?php echo htmlspecialchars ($entry->book->getAuthorsName ()) ?></span><br />
+            <?php
+                $tags = $entry->book->getTagsName ();
+                if (!empty ($tags)) {
+            ?>
+                <h4><?php echo localize("tags.title") . " : </h4>" . htmlspecialchars ($tags) ?><br />
+            <?php
+                }
+            ?>
             <?php
                 $serie = $entry->book->getSerie ();
                 if (!is_null ($serie)) {
             ?>
-                <div class="entryContent ss"><?php echo localize("series.title") . " : " . htmlspecialchars ($serie->name) . " (" . $entry->book->seriesIndex . ")" ?></div>
+                <h4><?php echo localize("series.title") . " : "  ?></h4><span class="ss"><?php echo htmlspecialchars ($serie->name) . " (" . $entry->book->seriesIndex . ")" ?></span><br />
             <?php
                 }
-            ?>
-            </div>
-        </div>
+            ?></div></a>
+        </article>
         <?php
                 }
         ?>
-        <div class="clearer" ></div>
         <?php
             }
         ?>
-    </div>
-    <div class="foot">
+    </section>
+    <footer>
         <div class="footright">
-            <a class="fancyabout" href="<?php if ($config['cops_use_fancyapps'] == 1) { echo "about.xml"; } else { echo $_SERVER["SCRIPT_NAME"] . str_replace ("&", "&amp;", addURLParameter ("?page=16", DB, $database)); } ?>">
-                <img src="<?php echo getUrlWithVersion("images/info.png") ?>" alt="<?php echo localize ("about.title") ?>" />
-            </a>
+            <a class="fancyabout" href="<?php if ($config['cops_use_fancyapps'] == 1) { echo "about.xml"; } else { echo $_SERVER["SCRIPT_NAME"] . str_replace ("&", "&amp;", addURLParameter ("?page=16", DB, $database)); } ?>"><img src="<?php echo getUrlWithVersion("images/info.png") ?>" alt="<?php echo localize ("about.title") ?>" /></a>
         </div>
 <?php
     if ($currentPage->isPaginated ()) {
@@ -308,7 +287,7 @@
         <?php
             }
         ?>
-        <p><?php echo "&nbsp;" . $currentPage->n . " / " . $currentPage->getMaxPage () . "&nbsp;" ?></p>
+        <p><?php echo " " . $currentPage->n . " / " . $currentPage->getMaxPage () . " " ?></p>
         <?php
             if (!is_null ($nextLink)) {
         ?>
@@ -320,7 +299,7 @@
 <?php
     }
 ?>
-    </div>
+    </footer>
 </div>
 </body>
 </html>
diff --git a/resources/normalize/normalize.css b/resources/normalize/normalize.css
new file mode 100644
index 0000000..6adf56e
--- /dev/null
+++ b/resources/normalize/normalize.css
@@ -0,0 +1,396 @@
+/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-family: sans-serif; /* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre-wrap;
+}
+
+/**
+ * Set consistent quote types.
+ */
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9.
+ */
+
+img {
+    border: 0;
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Correct font family not being inherited in all browsers.
+ * 2. Correct font size not being inherited in all browsers.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
diff --git a/serie.php b/serie.php
index ec74416..668dbbc 100644
--- a/serie.php
+++ b/serie.php
@@ -29,6 +29,7 @@ class Serie extends Base {
 
     public static function getCount() {
         $nSeries = parent::getDb ()->query('select count(*) from series')->fetchColumn();
+        if ($nSeries == 0) return NULL;
         $entry = new Entry (localize("series.title"), self::ALL_SERIES_ID, 
             str_format (localize("series.alphabetical", $nSeries), $nSeries), "text", 
             array ( new LinkNavigation ("?page=".parent::PAGE_ALL_SERIES)));
diff --git a/style-eink.css b/style-eink.css
new file mode 100644
index 0000000..ae83d28
--- /dev/null
+++ b/style-eink.css
@@ -0,0 +1,304 @@
+/* Global Box Sizing and Font-Smoothing */
+*, *:after, *:before {
+    box-sizing:border-box;
+    -webkit-box-sizing:border-box;
+    -moz-box-sizing:border-box;
+    -webkit-font-smoothing:antialiased;
+    -moz-font-smoothing:antialiased;
+    -o-font-smoothing:antialiased;
+    font-smoothing:antialiased;
+    text-rendering:optimizeLegibility;
+}
+
+html { font-size: 100%; -webkit-text-size-adjust: 100%; 
+                          -ms-text-size-adjust: 100%; }
+
+body {
+    font-family: 'Open Sans', sans-serif;
+    line-height:18px;
+    color: #1c1c1c; /* Lighter on the eyes than #000 Black */
+    margin: 0px; background: #cccccc; background-size: cover;
+}
+
+img {
+    border: 0px;
+    max-width: 100%;
+    height: auto;
+    width: auto\9; /* ie8 */
+	opacity: 1;
+}
+
+/* ==========================================================================
+   Typography stuff goes here
+   ========================================================================== */
+h1,h2,h3,h4,h5,h6 { font-weight: bold; margin:0; padding:0;}
+/*h1 see mediaqueries*/ 
+h2 {font-size: 1.2em;}
+h3 {font-size: 1.1em;}
+h4 {font-size: 1.0em; }
+h5 {font-size: 0.83em;}
+h6 {font-size: 0.75em;}
+
+a:hover, a:active { outline: none; }
+a {
+	color: black;
+	text-decoration: none;
+	font-weight: bold;
+}
+a:hover { color:#000; text-decoration: none; }
+.frontpage a {display:block; }
+.frontpage a:hover { width: 100%; background-color: white;}
+.books:hover { width: 100%; background-color: silver; }
+.link a:hover { display:inline-block; width: 100%; background-color: #778899;  /*Dirty IE Hack*/  zoom: 1;  *display: inline;}
+
+img
+{
+margin:0;
+padding:0;
+border:0;
+}
+
+/* =============================================================================
+   Main container stuff goes here and other globals
+   ========================================================================== */
+.container{
+	border:1px solid #000; border-radius:10px;
+    max-width:800px;width:95%;margin:0 auto;position:relative;
+	background-color: white;
+}
+    
+.fancyabout { font-weight:400; text-decoration: none; }
+
+/* =============================================================================
+   Header stuff goes here
+   ========================================================================== */
+header {
+    clear:both; 
+    color: black; 
+    text-align:center;
+	display:block;
+    min-height:70px;
+    border-radius: 10px 10px 0px 0px;
+	border-bottom: 2px dashed gray;
+	font-variant: small-caps;
+	letter-spacing: 2px;
+}
+
+.headleft {
+    float: left;
+}
+
+.headcenter
+{
+float:none;
+margin:auto;
+text-align:center;
+height:70px;
+display:table;
+}
+
+header h1{
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    line-height: 100%;
+    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
+                 0px 8px 13px rgba(0,0,0,0.1),
+                 0px 18px 23px rgba(0,0,0,0.1);
+}
+
+.headright {
+    float: right;
+}
+
+/* =============================================================================
+   Section and Article stuff goes here
+   ========================================================================== */
+section {
+clear:both;
+background-color: #fff;
+}
+
+article {
+border-bottom: 1px solid black;
+max-width:800px;
+}
+
+/*-------------frontpage article-------------*/
+
+.frontpage h2 {
+	text-align: center;
+	letter-spacing: 2px;
+	color: black;
+	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
+	padding: 5px 0;
+}
+
+.frontpage h4 {
+    padding: 5px 0;
+	text-align: center;
+	color: gray;
+	 font-style: italic;
+	 font-size: 13px;
+	 text-decoration: overline;
+ }
+
+/*-------------books article-------------*/
+.books {
+    clear: both;
+    padding: 10px;
+    min-height: 90px;
+}
+
+.cover {
+    float:left;
+    margin: 0 10px 0 0;
+    min-width: 56px;
+    min-height: 70px;
+}
+
+.download {
+    float: right;
+    line-height:40px;
+    text-align: right;
+}
+
+.download a {
+    border-radius: 6px;
+    box-shadow:0 0 10px #000;
+    background: darkgray;  
+    background: radial-gradient(#666, black);
+    color: #EEE;
+    text-decoration : none;
+    font-weight: bold;
+    padding: 5px 10px 5px 10px;
+}
+
+
+.books h4{
+    display: inline;
+    font-style: italic;
+}
+
+/*-------------books popup article-------------*/
+.bookpopup h2{
+    margin: 15px 15px; 
+}
+
+.bookpopup h3{
+    display:inline;  /*Dirty IE Hack*/  zoom: 1;  *display: inline;
+}
+
+.bookpopup h4{
+    border-top: 1px solid black;
+}
+
+.fullclickpopup{
+    display: block;
+	color: black;
+}
+
+section .bookpopup{
+    padding: 8px 8px;
+}
+
+/* =============================================================================
+   Footer stuff goes here
+   ========================================================================== */
+footer
+{
+clear:both;
+color:white;
+border-radius: 0px 0px 10px 10px; 
+height:32px;
+}
+
+.footright
+{
+float:right;
+height:32px;
+}
+
+.footcenter
+{
+margin:auto;
+text-align:center;
+height:32px;
+display:table;
+}
+
+.footcenter p, .footcenter a
+{
+display: table-cell;
+vertical-align: middle;
+text-align: center;
+line-height: 100%;
+}
+
+/* =============================================================================
+   Aside stuff goes here
+   ========================================================================== */   
+#tool
+{
+width:100%;
+height:32px;
+overflow: hidden;
+}
+
+
+/*-------------Search Aside-------------*/
+#tool input[type=text]
+{
+vertical-align: middle;
+width: 100%;
+margin: 5px;
+}
+
+.stop select
+{
+vertical-align: middle;
+margin: 5px;
+}
+
+#sort
+{
+cursor:pointer;
+}
+
+.stop
+{
+display: block;
+overflow: hidden;
+}
+
+/* =============================================================================
+   Mediaquerie stuff goes here
+   ========================================================================== */
+/* 100px and greater */
+@media only screen and (min-width: 100px) {
+h1 {font-size: 1em;}
+.container { width:100%; }
+}
+   
+/* 320px and greater */
+@media only screen and (min-width: 320px) {
+h1 {font-size: 1.2em;}
+}
+
+/* 480px and greater */
+@media only screen and (min-width: 480px) {
+h1 {font-size: 1.5em;}
+body {  font-size: 1em;/*12px/16px */
+            font-weight:450; /* Better supported than 'lighter' attribute */
+    }
+}
+
+/* 810px and greater */
+@media only screen and (min-width: 768px) {
+h1 {font-size: 2em;}
+.container { box-shadow:0 0 20px #000; }
+body {  margin: 5px; 
+            font-size: 0.85em;/*12px/16px */
+            font-weight:400; /* Better supported than 'lighter' attribute */
+    }
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index 30acb58..38244c5 100644
--- a/style.css
+++ b/style.css
@@ -1,50 +1,236 @@
-html
-{
-font-family: sans-serif;
-font-size: 1em;
-padding:0px;
-margin:0px;
-background-color:lightgray;
+/* Global Box Sizing and Font-Smoothing */
+*, *:after, *:before {
+    box-sizing:border-box;
+    -webkit-box-sizing:border-box;
+    -moz-box-sizing:border-box;
+    -webkit-font-smoothing:antialiased;
+    -moz-font-smoothing:antialiased;
+    -o-font-smoothing:antialiased;
+    font-smoothing:antialiased;
+    text-rendering:optimizeLegibility;
 }
 
-body
-{
-margin-top:0px;
+html { font-size: 100%; -webkit-text-size-adjust: 100%; 
+                          -ms-text-size-adjust: 100%; }
+
+body {
+    font-family: 'Open Sans', sans-serif;
+    line-height:18px;
+    color: #1c1c1c; /* Lighter on the eyes than #000 Black */
+    margin: 0px; background: #cccccc; background-size: cover;
 }
 
-.container
+img {
+    border: 0px;
+    max-width: 100%;
+    height: auto;
+    width: auto\9; /* ie8 */
+}
+
+/* ==========================================================================
+   Typography stuff goes here
+   ========================================================================== */
+h1,h2,h3,h4,h5,h6 { font-weight: bold; margin:0; padding:0;}
+/*h1 see mediaqueries*/ 
+h2 {font-size: 1.2em;}
+h3 {font-size: 1.1em;}
+h4 {font-size: 1.0em; }
+h5 {font-size: 0.83em;}
+h6 {font-size: 0.75em;}
+
+a:hover, a:active { outline: none; }
+a { color: #000066; font-weight: 800; text-decoration: none;}
+a:hover { color:#000; text-decoration: none; }
+.frontpage a {display:block; }
+.frontpage a:hover { width: 100%; background-color: #778899;}
+.books:hover { width: 100%; background-color: #778899; }
+.link a:hover { display:inline-block; width: 100%; background-color: #778899;  /*Dirty IE Hack*/  zoom: 1;  *display: inline;}
+
+img
 {
+margin:0;
+padding:0;
+border:0;
+}
+
+/* =============================================================================
+   Main container stuff goes here and other globals
+   ========================================================================== */
+.container{
+ background: #414141; border:1px solid #000; border-radius:10px;
+    max-width:800px;width:95%;margin:0 auto;position:relative; }
+    
+.fancyabout { font-weight:400; text-decoration: none; }
+
+/* =============================================================================
+   Header stuff goes here
+   ========================================================================== */
+header {
+    clear:both; 
+    color:white; 
+    text-align:center; 
+    text-transform:uppercase; 
+    display:block;
+    box-shadow:inset 0px -5px 8px #000000;
+    min-height:70px;
+    border-radius: 10px 10px 0px 0px; 
+}
+
+.headleft {
+    float: left;
+}
+
+.headcenter
+{
+float:none;
 margin:auto;
-width:100%;
+text-align:center;
+height:70px;
+display:table;
+}
+
+header h1{
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    line-height: 100%;
+    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
+                 0px 8px 13px rgba(0,0,0,0.1),
+                 0px 18px 23px rgba(0,0,0,0.1);
+}
+
+.headright {
+    float: right;
+}
+
+/* =============================================================================
+   Section and Article stuff goes here
+   ========================================================================== */
+section {
+clear:both;
+background-color: #fff;
+}
+
+article {
+border-bottom: 1px solid black;
 max-width:800px;
 }
 
-.head
-{
-color:white;
-background-color:black;
-width:100%;
-height:64px;
+/*-------------frontpage article-------------*/
+
+.frontpage h2 {
+    padding: 5px 0 0 5px;
 }
 
-.foot
+.frontpage h4 {
+    padding: 5px 0 5px 20px;
+     font-style: italic;
+}
+
+/*-------------books article-------------*/
+.books {
+    clear: both;
+    padding: 10px;
+    min-height: 90px;
+}
+
+.cover {
+    float:left;
+    margin: 0 10px 0 0;
+    min-width: 56px;
+    min-height: 70px;
+}
+
+.download {
+    float: right;
+    line-height:40px;
+    text-align: right;
+}
+
+.download a {
+    border-radius: 6px;
+    box-shadow:0 0 10px #000;
+    background: darkgray;  
+    background: radial-gradient(#666, black);
+    color: #EEE;
+    text-decoration : none;
+    font-weight: bold;
+    padding: 5px 10px 5px 10px;
+}
+
+
+.books h4{
+    display: inline;
+    font-style: italic;
+}
+
+/*-------------books popup article-------------*/
+.bookpopup h2{
+    margin: 15px 15px; 
+}
+
+.bookpopup h3{
+    display:inline;  /*Dirty IE Hack*/  zoom: 1;  *display: inline;
+}
+
+.bookpopup h4{
+    border-top: 1px solid black;
+}
+
+.fullclickpopup{
+    display: block;
+}
+
+section .bookpopup{
+    padding: 8px 8px;
+}
+
+/* =============================================================================
+   Footer stuff goes here
+   ========================================================================== */
+footer
 {
+clear:both;
 color:white;
-background-color:black;
-width:100%;
+box-shadow:inset 0px 5px 8px #000000;
+border-radius: 0px 0px 10px 10px; 
 height:32px;
 }
 
+.footright
+{
+float:right;
+height:32px;
+}
+
+.footcenter
+{
+margin:auto;
+text-align:center;
+height:32px;
+display:table;
+}
+
+.footcenter p, .footcenter a
+{
+display: table-cell;
+vertical-align: middle;
+text-align: center;
+line-height: 100%;
+}
+
+/* =============================================================================
+   Aside stuff goes here
+   ========================================================================== */   
 #tool
 {
-margin-top: 5px;
-color:white;
-background-color:black;
 width:100%;
 height:32px;
 overflow: hidden;
 }
 
+
+/*-------------Search Aside-------------*/
 #tool input[type=text]
 {
 vertical-align: middle;
@@ -69,194 +255,34 @@ display: block;
 overflow: hidden;
 }
 
-img
-{
-margin:0;
-padding:0;
-border:0;
+/* =============================================================================
+   Mediaquerie stuff goes here
+   ========================================================================== */
+/* 100px and greater */
+@media only screen and (min-width: 100px) {
+h1 {font-size: 1em;}
+.container { width:100%; }
+}
+   
+/* 320px and greater */
+@media only screen and (min-width: 320px) {
+h1 {font-size: 1.2em;}
 }
 
-.headleft
-{
-float:left;
-height:64px;
+/* 480px and greater */
+@media only screen and (min-width: 480px) {
+h1 {font-size: 1.5em;}
+body {  font-size: 1em;/*12px/16px */
+            font-weight:450; /* Better supported than 'lighter' attribute */
+    }
 }
 
-.headright
-{
-float:right;
-height:64px;
-cursor:pointer;
-}
-
-.footright
-{
-float:right;
-height:32px;
-}
-
-
-.headcenter
-{
-margin:auto;
-text-align:center;
-font-size: 1.5em;
-font-weight:bold;
-height:64px;
-display:table;
-}
-
-.footcenter
-{
-margin:auto;
-text-align:center;
-font-size: 1.3em;
-font-weight:bold;
-height:32px;
-display:table;
-}
-
-
-.headcenter p, .footcenter p, .footcenter a
-{
-display: table-cell;
-vertical-align: middle;
-text-align: center;
-line-height: 100%;
-}
-
-.clearer 
-{
-clear:both;
-}
-
-.entries
-{
-background-color:lightgray;
-margin-top: 5px;
-}
-
-.entry
-{
-background-color:white;
-border-bottom:1px double black;
-display:block;
-padding:2px;
-cursor: pointer;
-margin-bottom:5px;
-}
-
-.book
-{
-background-color:white;
-border-bottom:1px double black;
-min-height:80px;
-margin-bottom:5px;
-}
-
-.navigation
-{
-display:none;
-}
-
-.entryTitle
-{
-font-weight:bold;
-font-size: 1.1em;
-}
-
-.entryContent
-{
-font-style:italic;
-font-size: 0.9em;
-margin-left: 10px;
-}
-
-.cover
-{
-float:left;
-padding:5px 10px;
-min-width: 56px;
-min-height: 70px;
-}
-
-.download
-{
-float:right;
-}
-
-.button
-{
-height:36px;
-display: table;
-width:80px;
-margin:2px;
-}
-
-
-.button p, .button a
-{
-display: table-cell;
-vertical-align: middle;
-text-align: center;
-}
-
-.entrySection
-{
-margin-top: 8px;
-margin-bottom: 18px;
-line-height: 1.5em;
-}
-
-.entrySection span
-{
-font-style:italic;
-font-size: 1em;
-}
-
-
-.buttonEffect a
-{
-border-radius: 6px;
-background: darkgray;  
-background: -moz-radial-gradient(#666, black);
-background: -webkit-radial-gradient(#666, black);
-background: -ms-radial-gradient(#666, black);
-background: radial-gradient(#666, black);
-color: #EEE;
-text-decoration : none;
-font-weight: bold;
-}
-
-.pad6 a
-{
-padding: 6px;
-}
-
-.pad6
-{
-display: inline;
-}
-
-.bookdetail
-{
-color:black;
-}
-
-.bookpopup
-{
-min-width: 400px;
-color:black;
-}
-
-.entries > .bookpopup, .entries > .bookdetail
-{
-background-color: white;
-margin-bottom: 5px;
-padding: 6px;
-}
-
-.content
-{
-line-height: 110%;
-}
+/* 810px and greater */
+@media only screen and (min-width: 768px) {
+h1 {font-size: 2em;}
+.container { box-shadow:0 0 20px #000; }
+body {  margin: 5px; 
+            font-size: 0.85em;/*12px/16px */
+            font-weight:400; /* Better supported than 'lighter' attribute */
+    }
+}
\ No newline at end of file
diff --git a/tag.php b/tag.php
index fe37cce..96c4987 100644
--- a/tag.php
+++ b/tag.php
@@ -29,6 +29,7 @@ class tag extends Base {
 
     public static function getCount() {
         $nTags = parent::getDb ()->query('select count(*) from tags')->fetchColumn();
+        if ($nTags == 0) return NULL;
         $entry = new Entry (localize("tags.title"), self::ALL_TAGS_ID, 
             str_format (localize("tags.alphabetical", $nTags), $nTags), "text", 
             array ( new LinkNavigation ("?page=".parent::PAGE_ALL_TAGS)));