Enhancements to the grid system and typefacing

- implemented a 770 grid system to better adapt the content to the A4
  ISO format when is printed;
- added paragraph indentation;
- added a better toc impagination using the grid and rounded borders;

7 files changed, 347 insertions, 34 deletions

diff --git a/public/stylesheets/web/css/grid.css b/public/stylesheets/web/css/grid.css
index 44ef616..a2ed3d0 100644
--- a/public/stylesheets/web/css/grid.css
+++ b/public/stylesheets/web/css/grid.css
@@ -1,25 +1,24 @@
 /**
- * Grid
+ * Grid System
+ *
+ * total area:  770px - 203mm (A4 ISO format less the left/right margins)
+ * gutter/gap:   20px
+ * line height:  20px
+ * grid width:  730px (total area - 2 x gutter)
  */
-#grid{
+#grid {
 
     /* Vertical grid lines */
-    background: url(../images/hashtag-grid-980.gif) repeat-y 0 0;
+    background: url(../images/770-grid.png) repeat-y 0 0;
 
     /* Dimensions - same width as your grid with gutters */
-    width: 980px;
-
-    /* Grid (left-aligned)
-    position: absolute;
-    top: 0;
-    left: 0;
-    */
+    width: 770px;
 
     /* Grid (centered) */
     position: absolute;
     top: 0;
     left: 50%;
-    margin-left: -490px;
+    margin-left: -385px;
 
 }
 
@@ -29,12 +28,12 @@
  * Remember, the CSS properties that define the box model:
  * visible height = height + borders + margins + padding
  */
-#grid .horiz{
+#grid .horiz {
 
     /* 20px line height */
-    height: 19px;
-    border-bottom: 1px dotted #aaa;
-    margin: 0;
-    padding: 0;
+    height:19px;
+    border-bottom:1px dotted #AAA;
+    margin:0;
+    padding:0;
 
 }
diff --git a/public/stylesheets/web/css/style.css b/public/stylesheets/web/css/style.css
index 6c8c940..f24610d 100644
--- a/public/stylesheets/web/css/style.css
+++ b/public/stylesheets/web/css/style.css
@@ -14,7 +14,7 @@
 body {
 	background-color:#F9F9F9;
 	color:#1A1A1A;
-	max-width:800px;
+	max-width:730px;
 	margin:auto;
 	margin-top:40px;
 	margin-bottom:40px;
@@ -28,12 +28,13 @@ hr {
 }
 p {
 	text-align:justify;
+	text-indent:30px;
 }
 a {
 	/* Resetting borders from the DocBook template */
 	text-decoration:none;
 	border:0;
-	font-weight:bold;
+	border-bottom:1px dotted #0F83DB;
 	color:#0F83DB;
 }
 
@@ -46,12 +47,29 @@ a {
 }
 .section {
 }
-.toc > dl > dd {
+div.toc > dl > dd {
 	margin-bottom:10px;
 }
+div.toc > p {
+	text-indent:0px;
+}
+div.chapter > div.toc {
+	border:2px solid #1A1A1A;
+	padding:10px;
+	padding-left:30px; /* same as the <p> indentation */
+
+	-moz-border-radius:8px;
+	-webkit-border-radius:8px;
+	-khtml-border-radius:8px;
+	border-radius:8px; /* leave this CSS tag always as last */
+}
+div.chapter > div.toc > dl > dt > span.section {
+/*	margin-left:20px; /* same as the <p> indentation */
+/*	border:1px solid red;*/
+}
 .programlisting {
 	background-color:#F8F8F8;
-	border:1px solid #1A1A1A;
+	border:2px solid #1A1A1A;
 	border-left:16px solid #1A1A1A;
 	padding:5px;
 
@@ -67,3 +85,6 @@ a {
 	height:60px;
 /*	border:1px solid red;*/
 }
+h2.title {
+	border-bottom:2px solid #1A1A1A;
+}
diff --git a/public/stylesheets/web/css/typefacing.css b/public/stylesheets/web/css/typefacing.css
index 0a277e2..e61f9a1 100644
--- a/public/stylesheets/web/css/typefacing.css
+++ b/public/stylesheets/web/css/typefacing.css
@@ -45,16 +45,16 @@ html {
 	font-size:100.01%; /* FIX typefacing rendering on broken browsers */
 }
 body {
-/*	font-family:Helvetica,"Helvetica Neue","Lucida Grande","Lucida Sans Unicode",Sans-Serif,Verdana,Arial;*/
-	font-family: 'DroidSans';
+/*	font-family:Helvetica,'Helvetica Neue','Lucida Grande','Lucida Sans Unicode',Sans-Serif,Verdana,Arial;*/
+	font-family:'DroidSans';
 	font-size:1em;
 }
-.amp {
-/*	font-family:Baskerville,Georgia,"Times New Roman",sans-serif;*/
-	font-family: 'DroidSerif-Italic';
+.amp, em {
+/*	font-family:Baskerville,Georgia,'Times New Roman,sans-serif;*/
+	font-family:'DroidSerif-Italic';
 }
-em {
-	font-family: 'DroidSerif-Italic';
+a {
+	font-family:'DroidSans-Bold';
 }
 
 /** DocBook elements **/
@@ -67,12 +67,12 @@ para {
 	font-family: 'DroidSerif-Italic';
 }
 .programlisting {
-/*	font-family: "DroidSans-Mono","Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;*/
-	font-family: 'DoridSans-Mono';
-	font-size:0.9em !important;
-	font-style:normal !important;
-	font-weight:normal !important;
-	line-height:20px !important;
+/*	font-family:'DroidSans-Mono','Consolas','Bitstream Vera Sans Mono','Courier New',Courier,monospace !important;*/
+	font-family:'DoridSans-Mono';
+	font-size:0.9em;
+	font-style:normal;
+	font-weight:normal;
+	line-height:20px;
 }
 .varname, .filename {
 	font-family: 'DroidSans-Bold';
diff --git a/public/stylesheets/web/images/770-grid.png b/public/stylesheets/web/images/770-grid.png
new file mode 100644
index 0000000..c4bf785
--- /dev/null
+++ b/public/stylesheets/web/images/770-grid.png
diff --git a/public/stylesheets/web/images/770-grid.svg b/public/stylesheets/web/images/770-grid.svg
new file mode 100644
index 0000000..0e2c250
--- /dev/null
+++ b/public/stylesheets/web/images/770-grid.svg
@@ -0,0 +1,293 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="770"
+   height="40"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.47 r22583"
+   sodipodi:docname="770-grid.svg"
+   inkscape:export-filename="/home/equilibrium/tmp/ineluttabile/devmanual/public/stylesheets/web/images/770-grid.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4">
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 526.18109 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="744.09448 : 526.18109 : 1"
+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
+       id="perspective10" />
+    <inkscape:perspective
+       id="perspective3621"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3643"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3665"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3665-0"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3665-1"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3665-5"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3665-7"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3665-6"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3665-3"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3665-4"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3665-54"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3665-43"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3665-78"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3665-8"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3786"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3786-4"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3786-2"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3786-6"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3786-9"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3844"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="451.05476"
+     inkscape:cy="9.8780999"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:showpageshadow="false"
+     inkscape:window-width="1024"
+     inkscape:window-height="710"
+     inkscape:window-x="-4"
+     inkscape:window-y="-3"
+     inkscape:window-maximized="1"
+     showborder="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2816"
+       empspacing="5"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Livello 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(9.9999999,-1012.2403)">
+    <path
+       style="fill:#aaaaaa;fill-opacity:1;stroke:#aaaaaa;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1, 1;stroke-dashoffset:0"
+       d="m 0.50000004,1003.1963 0,48.2361"
+       id="path2818" />
+    <path
+       style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       d="m 10.49997,1003.1869 0,48.2456"
+       id="path2818-6" />
+    <path
+       style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       d="m 115.5,1003.1964 0,48.2361"
+       id="path2818-6-3" />
+    <path
+       style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       d="m 135.5,1003.1964 0,48.2361"
+       id="path2818-6-3-2" />
+    <path
+       style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       d="m 240.5,1003.1964 0,48.2361"
+       id="path2818-6-3-6" />
+    <path
+       style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       d="m 260.5,1003.1964 0,48.2361"
+       id="path2818-6-3-5" />
+    <path
+       style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       d="m 365.5,1003.1964 0,48.2361"
+       id="path2818-6-3-4" />
+    <path
+       style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       d="m 385.5,1003.1964 0,48.2361"
+       id="path2818-6-3-65" />
+    <path
+       style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       d="m 490.5,1003.1963 0,48.236"
+       id="path2818-6-3-9" />
+    <path
+       style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       d="m 510.5,1003.1963 0,48.236"
+       id="path2818-6-3-7" />
+    <path
+       style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       d="m 615.5,1003.1963 0,48.236"
+       id="path2818-6-3-52" />
+    <path
+       style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       d="m 635.5,1003.1963 0,48.236"
+       id="path2818-6-3-74" />
+    <path
+       style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       d="m 740.5,1003.1963 0,48.236"
+       id="path2818-6-3-0" />
+    <path
+       style="fill:#aaaaaa;stroke:#cccccc;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1,1;stroke-dashoffset:0;fill-opacity:1"
+       d="m 125.5,1003.1964 0,48.2361"
+       id="path2818-6-3-43" />
+    <path
+       style="fill:#aaaaaa;stroke:#aaaaaa;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1, 1;stroke-dashoffset:0;fill-opacity:1"
+       d="m 250.5,1002.4325 0,48.9901"
+       id="path2818-6-3-43-1" />
+    <path
+       style="fill:#aaaaaa;stroke:#aaaaaa;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1,1;stroke-dashoffset:0;fill-opacity:1"
+       d="m 375.5,1003.1964 0,48.2361"
+       id="path2818-6-3-43-9" />
+    <path
+       style="fill:#aaaaaa;stroke:#aaaaaa;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1, 1;stroke-dashoffset:0;fill-opacity:1"
+       d="m 500.5,1003.1964 0,48.2361"
+       id="path2818-6-3-43-0" />
+    <path
+       style="fill:#aaaaaa;stroke:#aaaaaa;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1,1;stroke-dashoffset:0;fill-opacity:1"
+       d="m 625.5,1003.1964 0,48.2361"
+       id="path2818-6-3-43-8" />
+    <path
+       style="fill:#aaaaaa;stroke:#aaaaaa;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1, 1;stroke-dashoffset:0;fill-opacity:1"
+       d="m 750.5,1003.1964 0,48.2361"
+       id="path2818-6-3-43-2" />
+  </g>
+</svg>
diff --git a/public/stylesheets/web/images/hashtag-grid-980.gif b/public/stylesheets/web/images/hashtag-grid-980.gif
deleted file mode 100644
index a4a8c01..0000000
--- a/public/stylesheets/web/images/hashtag-grid-980.gif
+++ /dev/null
diff --git a/stylesheets/gentoo.org.xsl b/stylesheets/gentoo.org.xsl
index 693507f..eb96ba8 100644
--- a/stylesheets/gentoo.org.xsl
+++ b/stylesheets/gentoo.org.xsl
@@ -72,7 +72,7 @@
 	<!-- Include latest versione of jQuery -->
 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" />
 
-	<!-- Include hashgrid script (http://hashgrid.org)
+	<!-- Include hashgrid script (http://hashgrid.com)
 	     -->
 	<script type="text/javascript">
 		<xsl:attribute name="src">