update doc styling to match e.org colors.

34 files changed, 545 insertions, 384 deletions

diff --git a/doc/e.css b/doc/e.css
index 2dd6b4479..d899c94dc 100644
--- a/doc/e.css
+++ b/doc/e.css
@@ -1,273 +1,479 @@
-/*
-    Author:
-        Andres Blanc <andresblanc@gmail.com>
-	DaveMDS Andreoli <dave@gurumeditation.it>
-
-    Supported Browsers:
-        ie7, opera9, konqueror4 and firefox3
+/*****************************/
+/*  Body                     */
+/*****************************/
+body {
+  background              : url(header_background.png) repeat-x top left;
+  background-color        : #404040;
+  padding                 : 0;
+  margin                  : 0;
+}
 
-        Please use a different file for ie6, ie5, etc. hacks.
-*/
+html, body {
+  height                  : 100%;
+}
 
 
-/* Necessary to place the footer at the bottom of the page */
-html, body {
-	height: 100%;
-	margin: 0px;
-	padding: 0px;
+/******************************************************/
+/* Centered Layout + 'stay on bottom' footer          */
+/******************************************************/
+#layout {
+  margin                  : 0 auto 0 auto;
+  min-width               : 700px;
+  width                   : 90%;
 }
 
-#container {
-	min-height: 100%;
-	height: auto !important;
-	height: 100%;
-	margin: 0 auto -53px;
+#wrapper {
+  min-height              : 100%;
+  height                  : auto !important;
+  height                  : 100%;
+  margin                  : 0 auto -53px;
 }
 
 #footer, #push {
-	height: 53px;
+ height                   : 53px;
 }
 
+/****************************/
+/* Footer                   */
+/****************************/
+#sitefooter {
+  background              : url(footer_background.png) repeat-x;
+  height                  : 53px;
+}
 
-* html #container {
-	height: 100%;
+/*////////////////////////////////////////////////////////*/
+div.main {
+   vertical-align         : top;
 }
 
-/* Prevent floating elements overflowing containers */
-.clear {
-	clear: both;
-	width: 0px;
-	height: 0px;
+
+table.main {
+   width                  : 100%;
+   border                 : 0px;
+   margin                 : 0px;
+   padding                : 0px;
 }
 
-/* Flexible & centered layout from 750 to 960 pixels */
-.layout {
-	max-width: 960px;
-	min-width: 760px;
-	margin-left: auto;
-	margin-right: auto;
+td.main {
+   width                  : 33%;
+   margin                 : 4px;
+   text-align             : left;
+   vertical-align         : top;
+   padding                : 8px;
 }
 
-body {
-	/*font-family: Lucida Grande, Helvetica, sans-serif;*/
-	font-family: "Bitstream Vera","Vera","Trebuchet MS",Trebuchet,Tahoma,sans-serif
+div.bod {
+   column-width           : 15em;
+   -moz-column-width      : 15em;
+   column-gap             : 2em;
+   -moz-column-gap        : 2em;
+   column-rule-style      : solid;
+   -moz-column-rule-style : solid;
+   column-rule-width      : 1px;
+   -moz-column-rule-width : 1px;
+   column-rule-color      : #303030;
+   -moz-column-rule-color : #303030;
+   overflow               : auto;
+   margin                 : 1em;
+   text-align             : left;
+   vertical-align         : top;
 }
 
-/* Prevent design overflowing the viewport in small resolutions */
-#container {
-	padding-right: 17px;
-	padding-left: 17px;
-	background-image: url(head_bg.png);
-	background-repeat: repeat-x;
+
+div.fragment, div.code {
+   border                 : 1px solid #383838;
+   text-align             : left;
+   vertical-align         : middle;
+   padding                : 8px;
+   overflow               : auto;
 }
 
-/****************************/
-/* Top main menu            */
-/****************************/
-#header_logo {
-   background-image        : url(logo.png);
-   width                   : 61px;
+pre {
+   border                 : 1px dotted #383838;
+   text-align             : left;
+   vertical-align         : middle;
+   padding                : 2px;
+   overflow               : auto;
 }
 
-#header_logo a {
-   position                : absolute;
-   border                  : 0px;
-   background-color        : transparent;
-   top                     : 0px;
-   width                   : 60px;
-   height                  : 60px;
+hr {
+   width                  : 200px;
+   height                 : 1px;
+   background-color       : #303030;
+   border                 : 0px;
 }
 
-#header_menu {
-   background-image        : url(header_menu_background.png);
-   font                    : normal 10pt verdana,'Bitstream Vera Sans',helvetica,arial,sans-serif;
-   text-align              : right;
+h2 {
+   margin                 : 0;
+   padding                : 0;
 }
 
-#header_last {
-   background-image        : url(header_menu_background_last.png);
-   width                   : 15px;
+h3 {
+   margin                 : 0;
+   padding                : 0;
 }
 
-td.nav_passive {
-   background              : url(header_menu_unselected_background.png) 0 0 no-repeat;
-   height                  : 63px;
-   font-family             : "Bitstream Vera","Vera","Trebuchet MS",Trebuchet,Tahoma,sans-serif;
-   font-size               : 11px;
-   padding                 : 20px 10px 20px 10px;
-   vertical-align          : middle;
+p {
+   margin-top: 2px;
+   margin-bottom: 10px;
+   padding: 0;
 }
 
-td.nav_active {
-   background              : url(header_menu_current_background.png) 0 0 no-repeat;
-   height                  : 63px;
-   color                   : #646464;
-   font-family             : "Bitstream Vera","Vera","Trebuchet MS",Trebuchet,Tahoma,sans-serif;
-   font-size               : 11px;
-   font-weight             : bold;
-   padding                 : 20px 10px 20px 10px;
-   vertical-align          : middle;
+a:link {
+   color                  : #3399ff;
+   text-decoration        : underline;
+   text-shadow            : 0px 0px 10px rgba(0.2,0.6,1.0,1.0);
 }
 
-#header_menu a {
-   display                 : block;
-   text-decoration         : none;
-   cursor                  : pointer;
-   color                   : #cdcdcd;
+a:visited {
+   color                  : #2288ee;
+   text-decoration        : underline;
+   text-shadow            : 0px 0px 10px rgba(0.2,0.6,1.0,1.0); 
 }
 
+a:active {
+   color                  : #ffffff;
+   text-decoration        : none;
+}
 
+a:hover {
+   color                  : #3399ff;
+   text-decoration        : underline;
+   text-shadow            : 0px 0px 15px rgba(0.2,0.6,1.0,1.0); 
+}
+
+img {
+   vertical-align         : middle;
+   border                 : 0px;
+}
 
-#header {
-	width: 100%;
-	height: 102px;
+img.thumb {
+   vertical-align         : middle;
+   border                 : 1px solid;
 }
 
-#header h1 {
-	width: 63px;
-	height: 63px;
-	position: absolute;
-	margin: 0px;
+table.n {
+   width                  : 100px;
+   height                 : 100px;
+   clear                  : both;
+   border                 : 0px;
+   margin                 : 0px;
+   padding                : 0px;
+   border-collapse        : collapse;
 }
 
-#header h1 span {
-	display: none;
+table.nl {
+   float                  : left;
 }
 
-#header h2 {
-	display: none;
+table.nr {
+   float                  : right;
 }
 
-/* .menu-container is used to set properties common to .menu and .submenu */
-#header .menu-container {
+table.h {
+   width                  : 100%;
+   padding                : 0px;
+   margin                 : 0px;
+   border-collapse        : collapse;
 }
 
-#header .menu-container ul {
-	list-style-type: none;
-	list-style-position: inside;
-	margin: 0;
+div.l {
+   clear                  : both;
+   padding                : 7px 8px;
 }
 
-#header .menu-container li {
-	display: block;
-	float: right;
+div.ll {
+   float                  : left;
 }
 
-#header .menu {
-	height: 63px;
-	display: block;
-	background-image: url(menu_bg.png);
-	background-repeat: repeat-x;
+div.lr {
+   float                  : right;
 }
 
-#header .menu ul {
-	height: 100%;
-	display: block;
-	background-image: url(menu_bg_last.png);
-	background-repeat: no-repeat;
-	background-position: top right;
-	padding-right: 17px;
+table.b {
+   padding                : 0px;
+   margin                 : 0px;
+   border                 : 0px;
+   border-spacing         : 0px;
+   border-style           : none;
+   border-collapse        : collapse;
+   font-size              : 0px;
+   line-height            : 0px;
+   text-shadow            : 0px 1px rgba(0,0,0,0.5)
 }
 
-#header .menu li {
-	height: 100%;
-	text-align: center;
-	background-image: url(menu_bg_unsel.png);
-	background-repeat: no-repeat;
+td.b1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='b1.png'); }
+td.b1[class] { background-image:url("b1.png"); }
+td.b2 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='b2.png'); }
+td.b2[class] { background-image:url("b2.png"); }
+td.b3 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='b3.png'); }
+td.b3[class] { background-image:url("b3.png"); }
+td.b4 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='b4.png'); }
+td.b4[class] { background-image:url("b4.png"); }
+td.b5 {
+   background-image       : url("b5.png");
+   font-size              : 11px;
+   color                  : #ffffff;
+   text-align             : left;
+   vertical-align         : middle;
+   text-shadow            : 0px 1px rgba(0,0,0,0.5)
 }
+td.b6 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='b6.png'); }
+td.b6[class] { background-image:url("b6.png"); }
+td.b7 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='b7.png'); }
+td.b7[class] { background-image:url("b7.png"); }
+td.b8 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='b8.png'); }
+td.b8[class] { background-image:url("b8.png"); }
+td.b9 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='b9.png'); }
+td.b9[class] { background-image:url("b9.png"); }
 
-#header .menu a {
-	height: 100%;
-	display: block;
-	color: #cdcdcd;
-	text-decoration: none;
-	font-size: 10pt;
-	line-height: 59px;
-	text-align: center;
-	padding: 0px 15px 0px 15px;
+a.b:link {
+   color                  : #ffffff;
+   text-decoration        : none;
+   text-shadow            : 0px 1px rgba(0,0,0,0.5)
 }
 
-#header .menu li:hover {
-	background-image: url(menu_bg_hover.png);
-	background-repeat: no-repeat;
+a.b:visited {
+   color                  : #ffffff;
+   text-decoration        : none;
+   text-shadow            : 0px 1px rgba(0,0,0,0.5)
 }
 
-#header .menu li:hover a {
-	color: #FFFFFF;
+a.b:active {
+   color                  : #ffffff;
+   text-decoration        : none;
+   text-shadow            : 0px 1px rgba(0,0,0,0.5)
 }
 
-#header .menu li.current {
-	background-image: url(menu_bg_current.png);
-	background-repeat: no-repeat;
+a.b:hover {
+   color                  : #3399ff;
+   text-decoration        : none;
+   text-shadow            : 0px 0px 10px rgba(0.2,0.6,1.0,1.0); 
 }
 
-#header .menu li.current a {
-	color: #646464;
+td.pn1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='pn-1.png'); }
+td.pn1[class] { background-image:url("pn-1.png"); }
+td.pn2 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='pn-2.png'); }
+td.pn2[class] { background-image:url("pn-2.png"); }
+td.pn3 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='pn-3.png'); }
+td.pn3[class] { background-image:url("pn-3.png"); }
+td.pn4 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='pn-4.png'); }
+td.pn4[class] { background-image:url("pn-4.png"); }
+td.pn5 {
+   background             : #404040;
+   font-size              : 11px;
+   color                  : #ffffff;
+   text-align             : center;
+   vertical-align         : middle;
 }
+td.pn6 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='pn-6.png'); }
+td.pn6[class] { background-image:url("pn-6.png"); }
+td.pn7 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='pn-7.png'); }
+td.pn7[class] { background-image:url("pn-7.png"); }
+td.pn8 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='pn-8.png'); }
+td.pn8[class] { background-image:url("pn-8.png"); }
+td.pn9 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='pn-9.png'); }
+td.pn9[class] { background-image:url("pn-9.png"); }
 
+/** NEWS STYLE */
 
-/* Hide all the submenus but the current */
-#header .submenu ul {
-	display: none;
+.post {
+   margin                 : 0 0 2.5em 40px;
+   border-left            : 4px solid #3399ff;
+   padding-left           : 20px;
+   text-align             : left;
 }
 
-#header .submenu .current {
-	display: block;
+.news-title {
+   font-size              : 1.1em;
 }
 
-#header .submenu {
-	font: bold 10px verdana,'Bitstream Vera Sans',helvetica,arial,sans-serif;
-	margin-top: 10px;
+.news-title a, .news-title a:visited, .news-title a:hover {
+   text-decoration        : none;
 }
 
-#header .submenu a {
-	color: #888888;
-	text-decoration: none;
-	font-size: 0.9em;
-	line-height: 15px;
-	padding:0px 5px 0px 5px;
+.news-title span {
+   font-size              : 0.7em;
 }
 
-#header .submenu a:hover {
-	color: #444444;
+.news-content {
+   text-align             : justify;
 }
 
-#header .submenu li {
-	border-left: 1px solid #DDDDDD;
+.news-latest-title {
+  margin-bottom: 0;
 }
 
-#header .submenu li:last-child {
-	border-left: 0;
+.news-latest-date {
+  padding-left: 10px;
+  font-size: .8em;
 }
 
-#header .doxytitle {
-	position: absolute;
-	font-size: 1.8em;
-	font-weight: bold;
-	color: #444444;
-	line-height: 35px;
+.news-latest-body {
+  margin-top: 5px;
 }
 
-#header small {
-	font-size: 0.4em;
+/** SECTION PLUG STYLE */
+
+.section-plug {
+    width                 : 13em;
+    float                 : right;
+    clear                 : right;
+    margin                : 0px 0px 2em 2em;
+    background-color      : #ededf0;
+    background-image      : url('section-plug-header.png');
+    background-repeat     : repeat-x;
+}
+
+.section-plug .left-border {
+    margin: 0px;
+    background-image      : url('section-plug-header-left.png');
+    background-repeat     : no-repeat;
+}
+
+.section-plug .right-border {
+    margin: 0px;
+    padding: 1em;
+    background-image      : url('section-plug-header-right.png');
+    background-position   : top right;
+    background-repeat     : no-repeat;
+}
+
+.section-plug h3 {
+    margin                : 0px;
+    padding               : 0px;
+    width                 : 100%;
+    text-align            : center;
+}
+
+.section-plug a {
+    margin                : 0px;
+    padding               : 0px;
+    text-decoration       : none;
 }
 
-#footer {
-	background-image: url(foot_bg.png);
-	width: 100%;
+.section-plug ul {
+    margin                : 0px;
+    padding               : 0px;
+    list-style-type       : none;
 }
 
-#footer table {
-	width: 100%;
-	text-align: center;
-	white-space: nowrap;
-	padding: 5px 30px 5px 30px;
-	font-size: 0.8em;
-	font-family: "Bitstream Vera","Vera","Trebuchet MS",Trebuchet,Tahoma,sans-serif;
-	color: #888888;
+.section-plug li {
+    margin                : 0px 0px 2px 0px;
+    padding               : 0px;
+    font-size             : 0.8em;
+    font-weight           : bold;
+    text-align            : left;
 }
+body { font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-shadow: 0px 1px rgba(0,0,0,0.5); }
 
-#footer td.copyright {
-	width: 100%;
+pre, div.fragment, div.code { font-family: mono; white-space: pre-wrap; color: #ffffff; }
+
+blockquote { color: #cccccc; }
+
+body { font-size: 12px; }
+
+pre, div.fragment, div.code { font-size: 9px; color: #3399ff; }
+
+p.tiny { color: #aaaaaa; font-size: 10px; }
+
+h1, h2, h3, h4, h5, h6 { color: #3399ff; text-shadow: 0px 0px 10px rgba(0.2,0.6,1.0,1.0); }
+
+h1 { font-size: 21px; }
+
+h2 { font-size: 18px; }
+
+h3 { font-size: 16px; }
+
+h4 { font-size: 14px; }
+
+h5 { font-size: 12px; }
+
+h6 { font-size: 11px; }
+
+ul, ol { font-size: 11px; text-align: left; }
+
+#header { /*  CSS Reset */ /*  http://meyerweb.com/eric/tools/css/reset/ */ /*  v1.0 | 20080212 */ /* remember to define focus styles! */ /* remember to highlight inserts somehow! */ /* tables still need 'cellspacing="0"' in the markup */ }
+#header html, #header body, #header div, #header span, #header applet, #header object, #header iframe, #header h1, #header h2, #header h3, #header h4, #header h5, #header h6, #header p, #header blockquote, #header pre, #header a, #header abbr, #header acronym, #header address, #header big, #header cite, #header code, #header del, #header dfn, #header em, #header font, #header img, #header ins, #header kbd, #header q, #header s, #header samp, #header small, #header strike, #header strong, #header sub, #header sup, #header tt, #header var, #header b, #header u, #header i, #header center, #header dl, #header dt, #header dd, #header ol, #header ul, #header li, #header fieldset, #header form, #header label, #header legend, #header table, #header caption, #header tbody, #header tfoot, #header thead, #header tr, #header th, #header td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
+#header body { line-height: 1; }
+#header ol, #header ul { list-style: none; }
+#header blockquote, #header q { quotes: none; }
+#header blockquote:before, #header blockquote:after, #header q:before, #header q:after { content: ''; content: none; }
+#header :focus { outline: 0; }
+#header ins { text-decoration: none; }
+#header del { text-decoration: line-through; }
+#header table { border-collapse: collapse; border-spacing: 0; }
+#header .layout { margin: 0 auto; }
+#header ul.menu { text-align: right; list-style: none inside none; white-space: nowrap; letter-spacing: -5px; background: url("header_menu_background_last.png") no-repeat right; padding-right: 17px; }
+#header ul.menu li { display: inline-block; letter-spacing: normal; text-shadow: 0px 1px rgba(0,0,0,0.5); }
+#header ul.menu li a { display: inline-block; vertical-align: top; text-align: center;  padding-left: 10px; text-shadow: 0px 1px rgba(0,0,0,0.5); }
+#header ul.menu li a { background: url("header_menu_unselected_background.png") no-repeat; text-decoration: none; text-shadow: 0px 1px rgba(0,0,0,0.5); }
+#header ul.menu li a span { display: inline-block; height: 63px; line-height: 63px; text-transform: capitalize; color: #ffffff; font-size: 10px; padding: 0 14px; text-shadow: 0px 1px rgba(0,0,0,0.5); }
+#header ul.menu li.current a { background: url("header_menu_current_background.png") no-repeat; }
+#header ul.menu li.current a span { color: #3399ff;  text-shadow: 0px 0px 10px rgba(0.2,0.6,1.0,1.0);  }
+#header ul.menu li.current2 a { background: url("header_menu_unselected_next_background.png") no-repeat; text-shadow: 0px 1px rgba(0,0,0,0.5); }
+#header ul.menu li.current2 a span { color: #ffffff; text-shadow: 0px 1px rgba(0,0,0,0.5); }
+#header ul.menu li.index { float: left; height: 63px; margin: 0; }
+#header ul.menu li.index a { height: 63px; line-height: 63px; width: 63px; background: url("logo.png") no-repeat; }
+#header ul.menu li.index a span { overflow: hidden; /* Replace text with image */ text-indent: -999px; }
+#header ul.menu li.index a:hover { background: url("logo.png") no-repeat; }
+#header ul.menu li.index a:hover span { background: none; }
+#header ul.submenu { text-align: right; list-style: none inside none; white-space: nowrap; letter-spacing: -5px; text-shadow: 0px 1px rgba(0,0,0,0.5); }
+#header ul.submenu li { display: inline-block; letter-spacing: normal; text-shadow: 0px 1px rgba(0,0,0,0.5); }
+#header ul.submenu li a { display: inline-block; vertical-align: top; text-align: center; text-shadow: 0px 1px rgba(0,0,0,0.5); }
+#header ul.submenu li { margin-right: 17px; text-shadow: 0px 1px rgba(0,0,0,0.5); }
+#header ul.submenu li a { text-decoration: none; color: #aaaaaa; text-shadow: 0px 1px rgba(0,0,0,0.5); }
+#header ul.submenu li a span { color: #aaaaaa; line-height: 36px; font-weight: bold; text-transform: capitalize; font-size: 10px; text-shadow: 0px 1px rgba(0,0,0,0.5); }
+#header ul.submenu li a:hover span { color: #ffffff; text-shadow: 0px 1px rgba(0,0,0,0.5); }
+#header ul.submenu li.selected a span { color: #3399ff; line-height: 36px; font-weight: bold; text-transform: capitalize; font-size: 10px; text-shadow: 0px 0px 10px rgba(0.2,0.6,1.0,1.0);  }
+#header ul.submenu li.selected a:hover span { color: #3399ff; text-shadow: 0px 0px 10px rgba(0.2,0.6,1.0,1.0); }
+#header ul.submenu li.selected a { color: #3399ff; text-decoration: underline; text-shadow: 0px 0px 10px rgba(0.2,0.6,1.0,1.0);  }
+#header div.menu { height: 63px; }
+#header div.menu .layout { background: url("header_menu_background.png"); }
+#header div.submenu { height: 36px; margin-bottom: 36px; }
+
+#header .doxytitle {
+font-size: 1.4em;
+font-weight: bold;
+color: #ffffff;
+line-height: 35px;
 }
 
+#header small {
+font-size: 0.4em;
+}
+                                                
+/* ******************* Changes to the Original Stylesheet ****************** */
+table.data { width: 90%; padding: 0px; margin: 5px; border: 1px solid #303030; border-collapse: collapse; }
+table.data thead th { color: #3399ff; background-color: #282828; padding: 3px; text-align: left; text-shadow: 0px 0px 10px rgba(0.2,0.6,1.0,1.0);  }
+table.data tbody tr td { color: #ffffff; background-color: #383838; padding: 3px; text-align: left; font-size: 11px; }
+table.data tbody tr.odd td { color: #ffffff; background-color: #3b3b3b; }
+
+table.developers td.name { width: 12em; }
+table.developers td.photo { text-align: center }
+table.developers td.location { width: 14em; }
+table.developers.active caption { display: none; }
+table.developers td { padding-right: 1ex; }
+table.developers.inactive caption { font-weight: bold; margin-bottom: 2px; color: #000000; }
+
+table.mailing td.archive { white-space: nowrap; }
+
+#middle { margin-top: -18px; }
+
+#content { margin: 0 -8px; }
+
+.layout { margin: 0 auto; min-width: 750px; width: 90%; }
+
+table.main h1, td.main { margin-top: 0; padding-top: 0; }
+
+table.b { line-height: 1; }
+
+#sitefooter p { text-align: center; padding-top: 9px; font-size: 10px; color: #ffffff; white-space: nowrap; }
+
+hr { width: 200px; height: 1px; background-color: #303030; border: 0px; }
+
+div.main p { text-align: justify; }
+
+div.main .section-plug p { margin: 1em 0px; padding: 0px; text-align: left; }
+
+div.news-latest-date { margin-bottom: 15px; }
diff --git a/doc/foot.html b/doc/foot.html
index 3a9697828..f97ffec83 100644
--- a/doc/foot.html
+++ b/doc/foot.html
@@ -1,20 +1,12 @@
+    <div id="push"></div>
+   </div>
+  </div>
+ </div>
  
- <div id="push"></div>
- </div> <!-- #content -->
-  </div> <!-- .layout -->
- 
- </div> <!-- #container -->
- 
- 
-  <div id="footer">
-    <table><tr>
-      <td class="poweredby"><img src="doxygen.png"></td>
-      <td>Samsung Electronics is supporting the EFL Documentation Project</td>
-      <td class="copyright">Copyright &copy;$year Enlightenment</td>
-      <td class="generated">Docs generated $datetime</td>
-    </tr></table>
+ <div id="sitefooter">
+  <div class="layout">
+   <p>Copyright &copy;2000-$year Enlightenment.org - Samsung Electronics supports the EFL Documentation Project - Generated <em>$datetime</em> </p>
   </div>
-
-
+ </div>
 </body>
 </html>
diff --git a/doc/head.html b/doc/head.html
index 42436b106..35cab45f4 100644
--- a/doc/head.html
+++ b/doc/head.html
@@ -1,70 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
-    <title>$title</title>
-    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
-    <meta name="author" content="Andres Blanc" >
-    
-    <link rel="icon" href="img/favicon.png" type="image/x-icon">
-    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
-    <link rel="icon" href="img/favicon.png" type="image/ico">
-    <link rel="shortcut icon" href="img/favicon.png" type="image/ico">
-
-    <link rel="stylesheet" type="text/css" href="e.css">
-    <link rel="stylesheet" type="text/css" href="edoxy.css">
+  <title>$title</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <link rel="icon" href="favicon.png" type="image/x-icon">
+  <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
+  <link rel="icon" href="favicon.png" type="image/ico">
+  <link rel="shortcut icon" href="favicon.png" type="image/ico">
+  <link rel="stylesheet" type="text/css" href="e.css">
+  <link rel="stylesheet" type="text/css" href="edoxy.css">
 </head>
 
 <body>
-
-<div id="container">
-
-<div id="header">
-<div class="layout">
+ <div id="wrapper">
+  <div id="header">
+   <div class="menu">
+    <div class="layout">
+     <ul class="menu">
+     <li class='index'><a href='http://www.enlightenment.org/p.php?p=index&amp;l=en'><span>Home</span></a></li>
+     <li class='docs current'><a><span>Docs</span></a></li>
+    </ul>
+   </div>
+  </div>
+
+  <div class="submenu">
+   <div class="layout">
+    <ul class="submenu">
+     <li><a href="#"><span>$projectname</span></a></li>
+     <li><span></span></li>
+     <li><span></span></li>
+     <li><span></span></li>
+     <li><span></span></li>
+     <li><a href="index.html"><span>Main</span></a></li>
+     <li><a href="authors.html"><span>Authors</span></a></li>
+     <li><a href="examples.html"><span>Examples</span></a></li>
+     <li><a href="files.html"><span>Files</span></a></li>
+     <li><a href="pages.html"><span>Pages</span></a></li>
+     <li><a href="classes.html"><span>Types</span></a></li>
+     <li><a href="modules.html"><span>Modules</span></a></li>
+    </ul>
+   </div>
+  </div>
+  
+  <div class="clear"></div>
     
-    <h1><span>Enlightenment</span></h1>
-    <h2><span>Beauty at your fingertips</span></h2>
-
-    <table cellspacing="0" cellpadding="0" width="100%"><tr>
-      <td id="header_logo">
-        <a href="http://www.enlightenment.org"></a>
-      </td>
-      <td id="header_menu">
-        <table cellspacing="0" cellpadding="0" align="right"><tr>
-          <td class="nav_passive"><a class="nav_passive" href="http://www.enlightenment.org/p.php?p=home">Home</a></td> 
-          <td class="nav_passive"><a class="nav_passive" href="http://www.enlightenment.org/p.php?p=news">News</a></td> 
-          <td class="nav_passive"><a class="nav_passive" href="http://www.enlightenment.org/p.php?p=about">About</a></td> 
-          <td class="nav_passive"><a class="nav_passive" href="http://www.enlightenment.org/p.php?p=download">Download</a></td> 
-          <td class="nav_passive"><a class="nav_passive" href="http://www.enlightenment.org/p.php?p=support">Support</a></td> 
-          <td class="nav_passive"><a class="nav_passive" href="http://www.enlightenment.org/p.php?p=contribute">Contribute</a></td> 
-          <td class="nav_passive"><a class="nav_passive" href="http://www.enlightenment.org/p.php?p=contact">Contact</a></td> 
-          <td class="nav_passive"><a class="nav_passive" href="http://trac.enlightenment.org/e">Tracker</a></td>
-          <td class="nav_passive"><a class="nav_passive" href="http://www.enlightenment.org/p.php?p=docs">Docs</a></td> 
-        </tr></table>          
-      </td>
-      <td id="header_last"></td>
-    </tr></table>
-
-    <div class="doxytitle">
-        $projectname Documentation <small>at $date</small>
-    </div>
-
-    <div class="menu-container">
-        <div class="submenu">
-            <ul class="current">
-                <li><a href="files.html">Files</a></li>
-                <li><a href="modules.html">API Reference</a></li>
-                <li><a href="widgetslist.html">Widgets</a></li>
-                <li><a href="containerslist.html">Containers</a></li>
-                <li><a href="infralist.html">Infrastructure</a></li>
-                <li><a href="pages.html">Related Pages</a></li>
-	        <li class="current"><a  href="index.html">Main Page</a></li>
-            </ul>
-        </div>
-    </div>
-
-
-    <div class="clear"></div>
-</div>
-</div>
-
-<div id="content">
-<div class="layout">
+ </div>
+ <div id="middle">
+  <div class="layout">
+   <div id="content">
diff --git a/doc/img/b1.png b/doc/img/b1.png
new file mode 100644
index 000000000..f5544304e
--- /dev/null
+++ b/doc/img/b1.png
diff --git a/doc/img/b2.png b/doc/img/b2.png
new file mode 100644
index 000000000..edad9aae3
--- /dev/null
+++ b/doc/img/b2.png
diff --git a/doc/img/b3.png b/doc/img/b3.png
new file mode 100644
index 000000000..2869f00b7
--- /dev/null
+++ b/doc/img/b3.png
diff --git a/doc/img/b4.png b/doc/img/b4.png
new file mode 100644
index 000000000..af8f13526
--- /dev/null
+++ b/doc/img/b4.png
diff --git a/doc/img/b5.png b/doc/img/b5.png
new file mode 100644
index 000000000..907641ad3
--- /dev/null
+++ b/doc/img/b5.png
diff --git a/doc/img/b6.png b/doc/img/b6.png
new file mode 100644
index 000000000..16508e171
--- /dev/null
+++ b/doc/img/b6.png
diff --git a/doc/img/b7.png b/doc/img/b7.png
new file mode 100644
index 000000000..696cd782c
--- /dev/null
+++ b/doc/img/b7.png
diff --git a/doc/img/b8.png b/doc/img/b8.png
new file mode 100644
index 000000000..0924fef37
--- /dev/null
+++ b/doc/img/b8.png
diff --git a/doc/img/b9.png b/doc/img/b9.png
new file mode 100644
index 000000000..67f457377
--- /dev/null
+++ b/doc/img/b9.png
diff --git a/doc/img/br.png b/doc/img/br.png
new file mode 100644
index 000000000..b406d0710
--- /dev/null
+++ b/doc/img/br.png
diff --git a/doc/img/button_background.png b/doc/img/button_background.png
new file mode 100644
index 000000000..f710784fd
--- /dev/null
+++ b/doc/img/button_background.png
diff --git a/doc/img/button_hover_background.png b/doc/img/button_hover_background.png
new file mode 100644
index 000000000..b47fd2153
--- /dev/null
+++ b/doc/img/button_hover_background.png
diff --git a/doc/img/edoxy.css b/doc/img/edoxy.css
index 311ca23d4..6c9d86844 100644
--- a/doc/img/edoxy.css
+++ b/doc/img/edoxy.css
@@ -1,32 +1,14 @@
-/*
- * This file contain a custom doxygen style to match e.org graphics
- */
-
-
-
-/* BODY,H1,H2,H3,H4,H5,H6,P,CENTER,TD,TH,UL,DL,DIV {
-	font-family: Geneva, Arial, Helvetica, sans-serif;
-}*/ 
-BODY, TD {
-	font-size: 12px;
-}
-H1 {
-	text-align: center;
-	font-size: 160%;
-}
-H2 {
-	font-size: 120%;
-}
-H3 {
-	font-size: 100%;
-}
+BODY, TD { font-size: 10px; }
+H1 { font-size: 160%; }
+H2 { font-size: 120%; }
+H3 { font-size: 100%; }
 CAPTION { 
-	font-weight: bold 
+  font-weight: bold 
 }
 DIV.qindex {
 	width: 100%;
-	background-color: #e8eef2;
-	border: 1px solid #84b0c7;
+	background-color: #303030;
+	border: 1px solid #000000;
 	text-align: center;
 	margin: 2px;
 	padding: 2px;
@@ -34,16 +16,16 @@ DIV.qindex {
 }
 DIV.navpath {
 	width: 100%;
-	background-color: #e8eef2;
-	border: 1px solid #84b0c7;
+	background-color: #303030;
+	border: 1px solid #000000;
 	text-align: center;
 	margin: 2px;
 	padding: 2px;
 	line-height: 140%;
 }
 DIV.navtab {
-       background-color: #e8eef2;
-       border: 1px solid #84b0c7;
+       background-color: #303030;
+       border: 1px solid #000000;
        text-align: center;
        margin: 2px;
        margin-right: 15px;
@@ -53,87 +35,97 @@ TD.navtab {
        font-size: 70%;
 }
 A.qindex {
-       text-decoration: none;
-       font-weight: bold;
-       color: #1A419D;
+//       text-decoration: none;
+//       font-weight: bold;
+//       color: #1A419D;
 }
 A.qindex:visited {
-       text-decoration: none;
-       font-weight: bold;
-       color: #1A419D
+//       text-decoration: none;
+//       font-weight: bold;
+//       color: #1A419D
 }
 A.qindex:hover {
-	text-decoration: none;
-	background-color: #ddddff;
+//	text-decoration: none;
+//	background-color: #ddddff;
 }
 A.qindexHL {
-	text-decoration: none;
-	font-weight: bold;
-	background-color: #6666cc;
-	color: #ffffff;
-	border: 1px double #9295C2;
+//	text-decoration: none;
+//	font-weight: bold;
+//	background-color: #6666cc;
+//	color: #ffffff;
+//	border: 1px double #9295C2;
 }
 A.qindexHL:hover {
-	text-decoration: none;
-	background-color: #6666cc;
-	color: #ffffff;
+//	text-decoration: none;
+//	background-color: #6666cc;
+//	color: #ffffff;
 }
 A.qindexHL:visited { 
-	text-decoration: none; 
-	background-color: #6666cc; 
-	color: #ffffff 
+//	text-decoration: none; 
+//	background-color: #6666cc; 
+//	color: #ffffff 
 }
 A.el { 
-	text-decoration: none; 
-	font-weight: bold 
+//	text-decoration: none; 
+//	font-weight: bold 
 }
 A.elRef { 
-	font-weight: bold 
+//	font-weight: bold 
 }
 A.code:link { 
-	text-decoration: none; 
-	font-weight: normal; 
-	color: #0000FF
+//	text-decoration: none; 
+//	font-weight: normal; 
+//	color: #0000FF
 }
 A.code:visited { 
-	text-decoration: none; 
-	font-weight: normal; 
-	color: #0000FF
+//	text-decoration: none; 
+//	font-weight: normal; 
+//	color: #0000FF
 }
 A.codeRef:link { 
-	font-weight: normal; 
-	color: #0000FF
+//	font-weight: normal; 
+//	color: #0000FF
 }
 A.codeRef:visited { 
-	font-weight: normal; 
-	color: #0000FF
+//	font-weight: normal; 
+//	color: #0000FF
 }
 A:hover, A:visited:hover { 
-	text-decoration: none; 	
-	/* background-color: #f2f2ff; */
-	color: #000055;
+//	text-decoration: none; 	
+//	/* background-color: #f2f2ff; */
+//	color: #000055;
 }
 A.anchor {
-	color: #000;
+//	color: #000;
 }
 DL.el { 
 	margin-left: -1cm 
 }
-.fragment {
-       font-family: monospace, fixed;
-       font-size: 95%;
+DIV.fragment {
+        font-family: monospace, fixed;
+        border: 1px solid #000000;
+        background-color: #303030;
+	margin-top: 4px;
+	margin-bottom: 4px;
+	margin-left: 4px;
+	margin-right: 4px;
+	padding-left: 2px;
+	padding-right: 2px;
+	padding-top: 2px;
+	padding-bottom: 2px;
 }
 PRE.fragment {
-	border: 1px solid #CCCCCC;
-	background-color: #f5f5f5;
+        font-family: monospace, fixed;
+	border: 1px solid #000000;
+	background-color: #303030;
 	margin-top: 4px;
 	margin-bottom: 4px;
-	margin-left: 2px;
-	margin-right: 8px;
-	padding-left: 6px;
-	padding-right: 6px;
-	padding-top: 4px;
-	padding-bottom: 4px;
+	margin-left: 4px;
+	margin-right: 4px;
+	padding-left: 2px;
+	padding-right: 2px;
+	padding-top: 2px;
+	padding-bottom: 2px;
 }
 DIV.ah { 
 	background-color: black; 
@@ -187,7 +179,7 @@ TD.indexvalue {
 	border: 1px solid #CCCCCC;
 }
 TR.memlist {
-	background-color: #f0f0f0; 
+	background-color: #f08000; 
 }
 P.formulaDsp { 
 	text-align: center; 
@@ -197,23 +189,23 @@ IMG.formulaDsp {
 IMG.formulaInl { 
 	vertical-align: middle; 
 }
-SPAN.keyword       { color: #008000 }
-SPAN.keywordtype   { color: #604020 }
-SPAN.keywordflow   { color: #e08000 }
-SPAN.comment       { color: #800000 }
-SPAN.preprocessor  { color: #806020 }
-SPAN.stringliteral { color: #002080 }
-SPAN.charliteral   { color: #008080 }
+DIV #line { padding: 0px 0px 0px 0px; }
+SPAN.keyword       { color: #00ffff }
+SPAN.keywordtype   { color: #ff8800 }
+SPAN.keywordflow   { color: #ffff00 }
+SPAN.comment       { color: #ff00ff }
+SPAN.preprocessor  { color: #ff8800 }
+SPAN.stringliteral { color: #0088ff }
+SPAN.charliteral   { color: #00ff00 }
 SPAN.vhdldigit     { color: #ff00ff }
 SPAN.vhdlchar      { color: #000000 }
-SPAN.vhdlkeyword   { color: #700070 }
+SPAN.vhdlkeyword   { color: #aa00aa }
 SPAN.vhdllogic     { color: #ff0000 }
 
 .mdescLeft {
 	padding: 0px 8px 4px 8px;
-	font-size: 80%;
 	font-style: italic;
-	background-color: #FAFAFA;
+	background-color: #303030;
 	border-top: 1px none #E0E0E0;
 	border-right: 1px none #E0E0E0;
 	border-bottom: 1px none #E0E0E0;
@@ -222,9 +214,8 @@ SPAN.vhdllogic     { color: #ff0000 }
 }
 .mdescRight {
         padding: 0px 8px 4px 8px;
-	font-size: 80%;
 	font-style: italic;
-	background-color: #FAFAFA;
+	background-color: #303030;
 	border-top: 1px none #E0E0E0;
 	border-right: 1px none #E0E0E0;
 	border-bottom: 1px none #E0E0E0;
@@ -238,7 +229,7 @@ SPAN.vhdllogic     { color: #ff0000 }
 	border-right-width: 1px;
 	border-bottom-width: 1px;
 	border-left-width: 1px;
-	border-top-color: #E0E0E0;
+	border-top-color: #3399ff;
 	border-right-color: #E0E0E0;
 	border-bottom-color: #E0E0E0;
 	border-left-color: #E0E0E0;
@@ -246,8 +237,7 @@ SPAN.vhdllogic     { color: #ff0000 }
 	border-right-style: none;
 	border-bottom-style: none;
 	border-left-style: none;
-	background-color: #FAFAFA;
-	font-size: 80%;
+	background-color: #303030;
 }
 .memItemRight {
 	padding: 1px 8px 0px 8px;
@@ -256,7 +246,7 @@ SPAN.vhdllogic     { color: #ff0000 }
 	border-right-width: 1px;
 	border-bottom-width: 1px;
 	border-left-width: 1px;
-	border-top-color: #E0E0E0;
+	border-top-color: #3399ff;
 	border-right-color: #E0E0E0;
 	border-bottom-color: #E0E0E0;
 	border-left-color: #E0E0E0;
@@ -264,8 +254,7 @@ SPAN.vhdllogic     { color: #ff0000 }
 	border-right-style: none;
 	border-bottom-style: none;
 	border-left-style: none;
-	background-color: #FAFAFA;
-	font-size: 80%;
+	background-color: #303030;
 }
 .memTemplItemLeft {
 	padding: 1px 0px 0px 8px;
@@ -282,8 +271,7 @@ SPAN.vhdllogic     { color: #ff0000 }
 	border-right-style: none;
 	border-bottom-style: none;
 	border-left-style: none;
-	background-color: #FAFAFA;
-	font-size: 80%;
+	background-color: #303030;
 }
 .memTemplItemRight {
 	padding: 1px 8px 0px 8px;
@@ -300,8 +288,7 @@ SPAN.vhdllogic     { color: #ff0000 }
 	border-right-style: none;
 	border-bottom-style: none;
 	border-left-style: none;
-	background-color: #FAFAFA;
-	font-size: 80%;
+	background-color: #303030;
 }
 .memTemplParams {
 	padding: 1px 0px 0px 8px;
@@ -310,7 +297,7 @@ SPAN.vhdllogic     { color: #ff0000 }
 	border-right-width: 1px;
 	border-bottom-width: 1px;
 	border-left-width: 1px;
-	border-top-color: #E0E0E0;
+	border-top-color: #3399ff;
 	border-right-color: #E0E0E0;
 	border-bottom-color: #E0E0E0;
 	border-left-color: #E0E0E0;
@@ -318,12 +305,11 @@ SPAN.vhdllogic     { color: #ff0000 }
 	border-right-style: none;
 	border-bottom-style: none;
 	border-left-style: none;
-	color: #606060;
-	background-color: #FAFAFA;
-	font-size: 80%;
+	color: #a0a0a0;
+	background-color: #303030;
 }
 .search { 
-	color: #003399;
+	color: #aa00aa;
 	font-weight: bold;
 }
 FORM.search {
@@ -340,15 +326,15 @@ TD.tiny {
 	font-size: 75%;
 }
 a {
-	color: #1A41A8;
+//	color: #1A41A8;
 }
 a:visited {
-	color: #2A3798;
+//	color: #2A3798;
 }
 .dirtab { 
 	padding: 4px;
 	border-collapse: collapse;
-	border: 1px solid #84b0c7;
+	border: 1px solid #ffff00;
 }
 TH.dirtab { 
 	background: #e8eef2;
@@ -368,48 +354,44 @@ HR {
 	margin-left: 3px;
 } 
 .memnav { 
-	background-color: #eeeeee;
-	border: 1px solid #dddddd;
+	background-color: #303030;
+	border: 1px solid #000000;
 	text-align: center;
 	margin: 2px;
 	margin-right: 15px;
 	padding: 2px;
 }
 .memitem {
-	padding: 4px;
-	background-color: #eeeeee;
-	border-width: 1px;
-	border-style: solid;
-	border-color: #dddddd;
-	-moz-border-radius: 4px 4px 4px 4px;
+	padding: 8px;
+        margin-bottom: 64px;
 }
 .memname {
 	white-space: nowrap;
 	font-weight: bold;
-        color: #ffffff;
 }
 .memdoc{
 	padding-left: 10px;
 }
 .memproto {
-	background-color: #111111;
+	background-color: #000000;
+	border-top-color: #3399ff;
+	border-top-style: solid;
+	border-right-style: none;
+	border-bottom-style: none;
+	border-left-style: none;
 	width: 100%;
 	border-width: 1px;
-	border-style: solid;
-	border-color: #000000;
 	font-weight: bold;
-	-moz-border-radius: 4px 4px 4px 4px;
+        padding: 8px;
 }
 .paramkey {
 	text-align: right;
-	color: #ffffff;
 }
 .paramtype {
 	white-space: nowrap;
-	color: #aaaaaa;
 }
 .paramname {
-	color: #ff0000;
+	color: #ff66ff;
 	font-style: italic;
 	white-space: nowrap;
 }
diff --git a/doc/img/footer_background.png b/doc/img/footer_background.png
new file mode 100644
index 000000000..dabb1ace9
--- /dev/null
+++ b/doc/img/footer_background.png
diff --git a/doc/img/header_background.png b/doc/img/header_background.png
new file mode 100644
index 000000000..dd7f49047
--- /dev/null
+++ b/doc/img/header_background.png
diff --git a/doc/img/header_menu_background.png b/doc/img/header_menu_background.png
index e97874365..118f59b88 100644
--- a/doc/img/header_menu_background.png
+++ b/doc/img/header_menu_background.png
diff --git a/doc/img/header_menu_background_last.png b/doc/img/header_menu_background_last.png
index 88c116c8c..ee82d02e7 100644
--- a/doc/img/header_menu_background_last.png
+++ b/doc/img/header_menu_background_last.png
diff --git a/doc/img/header_menu_current_background.png b/doc/img/header_menu_current_background.png
index de97c9268..83de55874 100644
--- a/doc/img/header_menu_current_background.png
+++ b/doc/img/header_menu_current_background.png
diff --git a/doc/img/header_menu_hover_background.png b/doc/img/header_menu_hover_background.png
new file mode 100644
index 000000000..e3d2f08b8
--- /dev/null
+++ b/doc/img/header_menu_hover_background.png
diff --git a/doc/img/header_menu_hover_background_left.png b/doc/img/header_menu_hover_background_left.png
new file mode 100644
index 000000000..8112a0d8c
--- /dev/null
+++ b/doc/img/header_menu_hover_background_left.png
diff --git a/doc/img/header_menu_unselected_background.png b/doc/img/header_menu_unselected_background.png
index 50e5fd8d3..a00448b71 100644
--- a/doc/img/header_menu_unselected_background.png
+++ b/doc/img/header_menu_unselected_background.png
diff --git a/doc/img/header_menu_unselected_next_background.png b/doc/img/header_menu_unselected_next_background.png
new file mode 100644
index 000000000..0a7fa99f2
--- /dev/null
+++ b/doc/img/header_menu_unselected_next_background.png
diff --git a/doc/img/logo.png b/doc/img/logo.png
index b3884a5cb..50f09be3d 100644
--- a/doc/img/logo.png
+++ b/doc/img/logo.png
diff --git a/doc/img/pn-1.png b/doc/img/pn-1.png
new file mode 100644
index 000000000..f777f4b81
--- /dev/null
+++ b/doc/img/pn-1.png
diff --git a/doc/img/pn-2.png b/doc/img/pn-2.png
new file mode 100644
index 000000000..697b80582
--- /dev/null
+++ b/doc/img/pn-2.png
diff --git a/doc/img/pn-3.png b/doc/img/pn-3.png
new file mode 100644
index 000000000..e397407c0
--- /dev/null
+++ b/doc/img/pn-3.png
diff --git a/doc/img/pn-4.png b/doc/img/pn-4.png
new file mode 100644
index 000000000..f085069eb
--- /dev/null
+++ b/doc/img/pn-4.png
diff --git a/doc/img/pn-6.png b/doc/img/pn-6.png
new file mode 100644
index 000000000..74c0b43e3
--- /dev/null
+++ b/doc/img/pn-6.png
diff --git a/doc/img/pn-7.png b/doc/img/pn-7.png
new file mode 100644
index 000000000..a7ce73f75
--- /dev/null
+++ b/doc/img/pn-7.png
diff --git a/doc/img/pn-8.png b/doc/img/pn-8.png
new file mode 100644
index 000000000..bc91cf26c
--- /dev/null
+++ b/doc/img/pn-8.png
diff --git a/doc/img/pn-9.png b/doc/img/pn-9.png
new file mode 100644
index 000000000..03136d1d2
--- /dev/null
+++ b/doc/img/pn-9.png