Doc: updating and cleaning up redundant HTML code in the HTML generator

Moved element attribute class="fn" from <div> to <li>. Removed redundant <div>s

Reviewed-by: Martin Smith

2 files changed, 469 insertions, 355 deletions

diff --git a/doc/src/template/images/sprites-combined.png b/doc/src/template/images/sprites-combined.png
index 4186022..3a48b21 100755
--- a/doc/src/template/images/sprites-combined.png
+++ b/doc/src/template/images/sprites-combined.png
diff --git a/doc/src/template/style/style.css b/doc/src/template/style/style.css
index d5920b9..eb8434c 100755
--- a/doc/src/template/style/style.css
+++ b/doc/src/template/style/style.css
@@ -58,6 +58,19 @@
     {
         vertical-align: baseline;
     }
+	    .heading
+    {
+        font: normal 600 16px/1.0 Arial;
+        padding-bottom: 15px;
+    }
+    .subtitle
+    {
+        font-size: 13px;
+    }
+    .small-subtitle
+    {
+        font-size: 13px;
+    }
     legend
     {
         color: #000000;
@@ -73,7 +86,7 @@
     {
         font-size: 100%;
     }
-    /* Page style */
+
     html
     {
         background-color: #e5e5e5;
@@ -92,6 +105,13 @@
     {
         font-style: italic;
     }
+
+    a
+    {
+        color: #00732f;
+        text-decoration: none;
+    }
+
     .header, .footer, .wrapper
     {
         min-width: 600px;
@@ -106,24 +126,21 @@
     {
         padding-left: 216px;
         height: 15px;
-        background: url(../images/bg_ul.png) no-repeat 0 0;
+        background: url(../images/page.png) no-repeat 0 0;
         overflow: hidden;
     }
     .offline .wrapper .hd
     {
-        background: url(../images/bg_ul_blank.png) no-repeat 0 0;
+        background: url(../images/page.png) no-repeat 0 -15px;
     }
     .wrapper .hd span
     {
         height: 15px;
         display: block;
-        background: url(../images/bg_ur.png) no-repeat 100% 0;
         overflow: hidden;
+        background: url(../images/page.png) no-repeat 100% -30px;
     }
-    .offline .wrapper .hd span
-    {
-        /*         background: url(../images/bg_ur_blank.png) no-repeat 100% 0; */
-    }
+
     .wrapper .bd
     {
         background: url(../images/bg_l.png) repeat-y 0 0;
@@ -136,19 +153,20 @@
     .wrapper .ft
     {
         padding-left: 216px;
-        height: 15px;
-        background: url(../images/bg_ll.png) no-repeat 0 0;
+        height: 15px; /* 			background: url(../images/bg_ll.png) no-repeat 0 0; */
+        background: url(../images/page.png) no-repeat 0 -75px;
         overflow: hidden;
     }
     .offline .wrapper .ft
     {
-        background: url(../images/bg_ll_blank.png) no-repeat 0 0;
+        /*background: url(../images/bg_ll_blank.png) no-repeat 0 0;*/
+        background: url(../images/page.png) no-repeat 0 -90px;
     }
     .wrapper .ft span
     {
         height: 15px;
-        display: block;
-        background: url(../images/bg_lr.png) no-repeat 100% 0;
+        display: block; /* 			background: url(../images/bg_lr.png) no-repeat 100% 0; */
+        background: url(../images/page.png) no-repeat 100% -60px;
         overflow: hidden;
     }
     .header, .footer
@@ -182,219 +200,55 @@
         width: 302px;
         height: 22px;
         text-indent: -999em;
-        background: url(../images/qt_ref_doc.png) no-repeat 0 0;
-    }
-    /* header elements */
-    #nav-topright
-    {
-        height: 70px;
-    }
-
-    #nav-topright ul
-    {
-        list-style-type: none;
-        float: right;
-        width: 370px;
-        margin-top: 11px;
+        background: url(../images/sprites-combined.png) no-repeat -78px -235px;
     }
 
-    #nav-topright li
+    .sidebar
     {
-        display: inline-block;
-        margin-right: 20px;
         float: left;
+        margin-left: 5px;
+        width: 200px;
+        font-size: 11px;
     }
 
-    #nav-topright li.nav-topright-last
-    {
-        margin-right: 0;
-    }
-
-    #nav-topright li a
-    {
-        background: transparent url(../images/sprites-combined.png) no-repeat;
-        height: 18px;
-        display: block;
-        overflow: hidden;
-        text-indent: -9999px;
-    }
-
-    #nav-topright li.nav-topright-home a
-    {
-        width: 65px;
-        background-position: -2px -91px;
-    }
-
-    #nav-topright li.nav-topright-home a:hover
-    {
-        background-position: -2px -117px;
-    }
-
-
-    #nav-topright li.nav-topright-dev a
-    {
-        width: 30px;
-        background-position: -76px -91px;
-    }
-
-    #nav-topright li.nav-topright-dev a:hover
+    .offline .sidebar, .offline .feedback, .offline .t_button
     {
-        background-position: -76px -117px;
+        display: none;
     }
-
-
-    #nav-topright li.nav-topright-labs a
+    /*
+    		.sidebar a
+    		{
+    			color: #00732f;
+    			text-decoration: none;
+    		}
+    */
+    .sidebar .searchlabel
     {
-        width: 40px;
-        background-position: -114px -91px;
+        padding: 0 0 2px 17px;
+        font: normal bold 11px/1.2 Verdana;
     }
 
-    #nav-topright li.nav-topright-labs a:hover
+    .sidebar .search
     {
-        background-position: -114px -117px;
+        padding: 0 15px 0 16px;
     }
 
-    #nav-topright li.nav-topright-doc a
+    .sidebar .search form
     {
-        width: 32px;
-        background-position: -162px -91px;
+        /*	width: 167px; 			height: 21px; 			padding: 2px 0 0 5px;*/ /*	background: url(../images/form_bg.png) no-repeat 0 0;*/
+        background: url(../images/sprites-combined.png) no-repeat -6px -348px;
     }
 
-    #nav-topright li.nav-topright-doc a:hover, #nav-topright li.nav-topright-doc-active a
-    {
-        background-position: -162px -117px;
-    }
 
-    #nav-topright li.nav-topright-blog a
-    {
-        width: 40px;
-        background-position: -203px -91px;
-    }
 
-    #nav-topright li.nav-topright-blog a:hover, #nav-topright li.nav-topright-blog-active a
-    {
-        background-position: -203px -117px;
-    }
 
-    #nav-topright li.nav-topright-shop a
-    {
-        width: 40px;
-        background-position: -252px -91px;
-    }
 
-    #nav-topright li.nav-topright-shop a:hover, #nav-topright li.nav-topright-shop-active a
-    {
-        background-position: -252px -117px;
-    }
 
-    #nav-logo
-    {
-        background: transparent url(     "../images/sprites-combined.png" ) no-repeat 0 -225px;
-        left: -3px;
-        position: absolute;
-        width: 75px;
-        height: 75px;
-        top: 13px;
-    }
-    #nav-logo a
-    {
-        width: 75px;
-        height: 75px;
-        display: block;
-        text-indent: -9999px;
-        overflow: hidden;
-    }
-    /* Clearing */
-    .header:after, .footer:after, .breadcrumb:after, .wrap .content:after, .group:after
-    {
-        content: ".";
-        display: block;
-        height: 0;
-        clear: both;
-        visibility: hidden;
-    }
-    /* ^ Clearing */
 
 
 
-    .shortCut-topleft-inactive
-    {
-        padding-left: 3px;
-        background: transparent url(     "../images/sprites-combined.png" ) no-repeat 0px -58px;
-        height: 20px;
-        width: 93px;
-    }
-    .shortCut-topleft-inactive span
-    {
-        font-variant: normal;
-    }
-    #shortCut
-    {
-        padding-top: 10px;
-        font-weight: bolder;
-        color: #b0adab;
-    }
-    #shortCut ul
-    {
-        list-style-type: none;
-        float: left;
-        width: 347px;
-        margin-left: 100px;
-    }
-    #shortCut li
-    {
-        display: inline-block;
-        margin-right: 25px;
-        float: left;
-        white-space: nowrap;
-    }
-    #shortCut li a
-    {
-        color: #b0adab;
-        text-decoration: none;
-    }
-    #shortCut li a:hover
-    {
-        color: #44a51c;
-        text-decoration: none;
-    }
 
-    /* end of header elements */    
-    
-    /* menu element */
-    .sidebar
-    {
-        float: left;
-        margin-left: 5px;
-        width: 200px;
-        font-size: 11px;
-    }
-    .sidebar a
-    {
-        color: #00732f;
-        text-decoration: none;
-    }
-    .offline .sidebar, .offline .feedback
-    {
-        display: none;
-    }
-    .sidebar .searchlabel
-    {
-        padding: 0 0 2px 17px;
-        font: normal bold 11px/1.2 Verdana;
-    }
-    .sidebar .search
-    {
-        padding: 0 15px 0 16px;
-    }
-    .sidebar .search form
-    {
-        width: 167px;
-        height: 21px;
-        padding: 2px 0 0 5px;
-        background: url(../images/form_bg.png) no-repeat 0 0;
-    }
-    .sidebar .search form fieldset input#searchstring
+    .sidebar .search form input#searchstring
     {
         width: 158px;
         height: 19px;
@@ -403,32 +257,64 @@
         outline: none;
         font: 13px/1.2 Verdana;
     }
+
     .sidebar .box
     {
         padding: 17px 15px 5px 16px;
     }
+
     .sidebar .box .first
     {
         background-image: none;
     }
+
     .sidebar .box h2
     {
         font: normal 18px/1.2 Arial;
-        padding: 15px 0 0 40px;
+        padding: 0; /*15px 0 0 40px;*/
         min-height: 32px;
     }
+    .sidebar .box h2 span
+    {
+        overflow: hidden;
+        display: inline-block;
+    }
     .sidebar .box#lookup h2
     {
-        background: url(../images/api_lookup.png) no-repeat 0 0;
+        background-image: none; /*			background: url(../images/api_lookup.png) no-repeat 0 0;*/
+    }
+    .sidebar #lookup.box h2 span
+    {
+        background: url(../images/sprites-combined.png) no-repeat -6px -311px;
+        width: 27px;
+        height: 35px;
+        margin-right: 13px;
     }
     .sidebar .box#topics h2
     {
-        background: url(../images/api_topics.png) no-repeat 0 0;
+        /*	background: url(../images/api_topics.png) no-repeat 0 0;*/
+        background-image: none;
+    }
+    .sidebar #topics.box h2 span
+    {
+        background: url(../images/sprites-combined.png) no-repeat -94px -311px;
+        width: 27px;
+        height: 32px;
+        margin-right: 13px;
     }
     .sidebar .box#examples h2
     {
-        background: url(../images/api_examples.png) no-repeat 0 0;
+        /* background: url(../images/api_examples.png) no-repeat 0 0; */
+        background-image: none;
     }
+    .sidebar #examples.box h2 span
+    {
+        background: url(../images/sprites-combined.png) no-repeat -48px -311px;
+        width: 30px;
+        height: 31px;
+        margin-right: 9px;
+    }
+
     .sidebar .box .list
     {
         display: block;
@@ -443,6 +329,9 @@
     {
         text-decoration: underline;
     }
+    .sidebar .box ul
+    {
+    }
     .sidebar .box ul li
     {
         padding-left: 12px;
@@ -453,23 +342,20 @@
     {
         background: url(../images/box_bg.png) repeat-x 0 bottom;
     }
-    /* content elements */
     .wrap
     {
-        overflow: hidden;
+        margin: 0 5px 0 208px;
+        overflow: visible; /* 		overflow: hidden; */
     }
     .offline .wrap
     {
         margin: 0 5px 0 5px;
     }
-    /* tool bar */
     .wrap .toolbar
     {
         background-color: #fafafa;
         border-bottom: 1px solid #d1d1d1;
-        height: 20px;
-        margin-left: 3px;
-        margin-right: 5px;
+        height: 20px; /*	margin-left: 3px; 			margin-right: 5px;*/
         position: relative;
     }
     .wrap .toolbar .toolblock
@@ -487,7 +373,7 @@
     {
         padding: 0 0 10px 21px;
         right: 5px;
-        vertical-align: top;
+        vertical-align: middle;
         overflow: hidden;
     }
     .wrap .toolbar .toolbuttons .active
@@ -507,32 +393,64 @@
         font-weight: bold;
         color: #B0ADAB;
     }
-    #smallA
+
+    .toolbuttons #print
+    {
+        border-left: 1px solid #c5c4c4;
+        margin-top: 0;
+        padding-left: 7px;
+        text-indent: 0;
+    }
+    .toolbuttons #print a
+    {
+        width: 16px;
+        height: 16px;
+    }
+
+    .toolbuttons #print a span
+    {
+        width: 16px;
+        height: 16px;
+        text-indent: -999em;
+        display: block;
+        overflow: hidden;
+        background: url(../images/sprites-combined.png) no-repeat -137px -311px;
+    }
+
+
+    .toolbuttons #smallA
     {
         font-size: 10pt;
     }
-    #medA
+    .toolbuttons #medA
     {
         font-size: 12pt;
     }
-    #bigA
+    .toolbuttons #bigA
     {
         font-size: 14pt;
+        margin-right: 7px;
     }
+
     #smallA:hover, #medA:hover, #bigA:hover
     {
         color: #00732F;
     }
-    #print
+
+
+
+
+
+
+
+
+    .offline .wrap .breadcrumb
     {
-        font-size: 14pt;
-        line-height: 20pt;
     }
-    #printIcon
+
+    .wrap .breadcrumb ul
     {
-        margin-left: 5px;
     }
-    /* bread crumbs */
     .wrap .breadcrumb ul li
     {
         float: left;
@@ -545,6 +463,10 @@
     {
         font-weight: normal;
     }
+    .wrap .breadcrumb ul li a
+    {
+        color: #363534;
+    }
     .wrap .breadcrumb ul li.first
     {
         background-image: none;
@@ -554,29 +476,29 @@
     .wrap .content
     {
         padding: 30px;
-        position: relative;
     }
-    /* text elements */
-    .heading
+
+    .wrap .content li
     {
-        font: normal 600 16px/1.0 Arial;
-        padding-bottom: 15px;
+        padding-left: 12px;
+        background: url(../images/bullet_sq.png) no-repeat 0 5px;
+        font: normal 400 10pt/1 Verdana;
+        color: #44a51c;
+        margin-bottom: 10px; /*line-height: 14px;*/
     }
-
-    .subtitle
+    .content li:hover
     {
-        font-size: 13px;
+        text-decoration: underline;
     }
 
-    .small-subtitle
+    .offline .wrap .content
     {
-        font-size: 13px;
+        padding-top: 15px;
     }
-    
+
     .wrap .content h1
     {
-        font: 600 18px/1.2 Arial;
-        padding-bottom: 15px;
+        font: 600 18px/1.2 Arial; /*		padding-bottom: 15px;*/
     }
     .wrap .content h2
     {
@@ -588,26 +510,13 @@
     }
     .wrap .content p
     {
-        line-height:20px;
-        padding:10px 5px 10px 5px;
+        line-height: 20px;
+        padding: 10px 5px 10px 5px;
     }
     .wrap .content ul
     {
         padding-left: 25px;
     }
-    .wrap .content li
-    {
-        padding-left: 12px;
-        background: url(../images/bullet_sq.png) no-repeat 0 5px;
-        font: normal 400 10pt/1 Verdana;
-        margin-bottom: 10px;
-        line-height: 14px;
-    }
-    a
-    {
-        color: #00732F;
-        text-decoration: none;
-    }
     a:hover
     {
         color: #4c0033;
@@ -618,10 +527,6 @@
         color: #4c0033;
         text-decoration: none;
     }
-    .offline .wrap .content
-    {
-        padding-top: 15px;
-    }
     .footer
     {
         min-height: 100px;
@@ -629,11 +534,16 @@
         font: normal 9px/1 Verdana;
         text-align: center;
         padding-top: 40px;
+        background-color: #E6E7E8;
+        margin: 0;
     }
     .feedback
     {
-        float: right;
-        padding-right: 10px;
+        /*float: right;*/ /* 			padding-right: 10px; */
+        float: none;
+        position: absolute;
+        right: 15px;
+        bottom: 10px;
         font: normal 8px/1 Verdana;
         color: #B0ADAB;
     }
@@ -644,19 +554,200 @@
         color: #00732F;
         text-decoration: underline;
     }
+    .header:after, .footer:after, .breadcrumb:after, .wrap .content:after, .group:after
+    {
+        content: ".";
+        display: block;
+        height: 0;
+        clear: both;
+        visibility: hidden;
+    }
+    #nav-topright
+    {
+        height: 70px;
+    }
+
+    #nav-topright ul
+    {
+        list-style-type: none;
+        float: right;
+        width: 370px;
+        margin-top: 11px;
+    }
+
+    #nav-topright li
+    {
+        display: inline-block;
+        margin-right: 20px;
+        float: left;
+    }
+
+    #nav-topright li.nav-topright-last
+    {
+        margin-right: 0;
+    }
+
+    #nav-topright li a
+    {
+        background: transparent url(../images/sprites-combined.png) no-repeat;
+        height: 18px;
+        display: block;
+        overflow: hidden;
+        text-indent: -9999px;
+    }
+
+    #nav-topright li.nav-topright-home a
+    {
+        width: 65px;
+        background-position: -2px -91px;
+    }
+
+    #nav-topright li.nav-topright-home a:hover
+    {
+        background-position: -2px -117px;
+    }
+
+
+    #nav-topright li.nav-topright-dev a
+    {
+        width: 30px;
+        background-position: -76px -91px;
+    }
+
+    #nav-topright li.nav-topright-dev a:hover
+    {
+        background-position: -76px -117px;
+    }
+
+
+    #nav-topright li.nav-topright-labs a
+    {
+        width: 40px;
+        background-position: -114px -91px;
+    }
+
+    #nav-topright li.nav-topright-labs a:hover
+    {
+        background-position: -114px -117px;
+    }
+
+    #nav-topright li.nav-topright-doc a
+    {
+        width: 32px;
+        background-position: -162px -91px;
+    }
+
+    #nav-topright li.nav-topright-doc a:hover, #nav-topright li.nav-topright-doc-active a
+    {
+        background-position: -162px -117px;
+    }
+
+    #nav-topright li.nav-topright-blog a
+    {
+        width: 40px;
+        background-position: -203px -91px;
+    }
+
+    #nav-topright li.nav-topright-blog a:hover, #nav-topright li.nav-topright-blog-active a
+    {
+        background-position: -203px -117px;
+    }
+
+    #nav-topright li.nav-topright-shop a
+    {
+        width: 40px;
+        background-position: -252px -91px;
+    }
+
+    #nav-topright li.nav-topright-shop a:hover, #nav-topright li.nav-topright-shop-active a
+    {
+        background-position: -252px -117px;
+    }
+
+    #nav-logo
+    {
+        background: transparent url(      "../images/sprites-combined.png" ) no-repeat 0 -225px;
+        left: -3px;
+        position: absolute;
+        width: 75px;
+        height: 75px;
+        top: 13px;
+    }
+    #nav-logo a
+    {
+        width: 75px;
+        height: 75px;
+        display: block;
+        text-indent: -9999px;
+        overflow: hidden;
+    }
+
+
+    .shortCut-topleft-inactive
+    {
+        padding-left: 3px;
+        background: transparent url(      "../images/sprites-combined.png" ) no-repeat 0px -58px;
+        height: 20px;
+        width: 47px;
+    }
+    .shortCut-topleft-inactive span
+    {
+        font-variant: normal;
+    }
+    #shortCut
+    {
+        padding-top: 10px;
+        font-weight: bolder;
+        color: #b0adab;
+    }
+    #shortCut ul
+    {
+        list-style-type: none;
+        float: left;
+        width: 347px;
+        margin-left: 100px;
+    }
+    #shortCut li
+    {
+        display: inline-block;
+        margin-right: 25px;
+        float: left;
+        white-space: nowrap;
+    }
+    #shortCut li a
+    {
+        color: #b0adab;
+    }
+    #shortCut li a:hover
+    {
+        color: #44a51c;
+    }
+
+    /* end of header elements */
+
+
+
     hr
     {
-        background-color: #e0e0e0;
+        background-color: #E6E6E6;
+        border: 1px solid #E6E6E6;
         height: 1px;
         width: 100%;
         text-align: left;
         margin: 15px 0px 15px 0px;
     }
-    
+
     .content .alignedsummary
     {
         margin: 15px;
     }
+    pre
+    {
+        border: 1px solid #DDDDDD;
+        margin: 0 20px 10px 10px;
+        padding: 20px 15px 20px 20px;
+        overflow-x: auto;
+    }
     /* tables */
     table, pre
     {
@@ -664,17 +755,27 @@
         background-color: #F6F6F6;
         border: 1px solid #E6E6E6;
         border-collapse: separate;
-        font-size: 11px; 
-        min-width: 395px; 
+        font-size: 11px;
+        min-width: 395px;
         margin-bottom: 25px;
+        display: inline-block;
+    }
+    thead
+    {
+        margin-top: 5px;
+    }
+    th
+    {
+        padding: 3px 15px 3px 15px;
+    }
+    td
+    {
+        padding: 3px 15px 3px 20px;
     }
-    thead{margin-top: 5px;}
-    th{ padding: 3px 15px 3px 15px;}
-    td{padding: 3px 15px 3px 20px;}
     table tr.odd
     {
         border-left: 1px solid #E6E6E6;
-        background-color: #F6F6F6; 
+        background-color: #F6F6F6;
         color: #66666E;
     }
     table tr.even
@@ -685,12 +786,13 @@
     }
     table tr.odd:hover
     {
-        background-color: #E6E6E6; 
+        background-color: #E6E6E6;
     }
     table tr.even:hover
     {
         background-color: #E6E6E6;
     }
+
     span.comment
     {
         color: #8B0000;
@@ -700,15 +802,7 @@
     {
         color: #254117;
     }
-    pre
-    {
-        -moz-border-radius:7px 7px 7px 7px;
-        background-color:#F6F6F6;
-        border:1px solid #DDDDDD;
-        margin:0 20px 10px 10px;
-        padding:20px 15px 20px 20px;
-        overflow-x:auto;
-    }
+
     .qmltype
     {
         text-align: center;
@@ -736,11 +830,11 @@
 
     #feedbackBox
     {
-        display:none;
-        -moz-border-radius:7px 7px 7px 7px;
-        border:1px solid #DDDDDD;
-        position:fixed;
-        top:100px;
+        display: none;
+        -moz-border-radius: 7px 7px 7px 7px;
+        border: 1px solid #DDDDDD;
+        position: fixed;
+        top: 100px;
         left: 33%;
         height: 190px;
         width: 400px;
@@ -750,27 +844,30 @@
     }
     #feedcloseX a
     {
-        display:inline;
+        display: inline;
         padding: 5px 5px 0 0;
-        margin-bottom:3px;
+        margin-bottom: 3px;
         color: #363534;
-        font-weight:600;
+        font-weight: 600;
         float: right;
         text-decoration: none;
     }
+
+
+
+
     #feedbox
-    /* here */
     {
-        display:inline;
+        display: inline;
         width: 370px;
         height: 120px;
-        margin:0px 25px 10px 15px;
+        margin: 0px 25px 10px 15px;
     }
     #feedsubmit
     {
-        display:inline;
-        float:right;
-        margin:4px 32px 0 0;
+        display: inline;
+        float: right;
+        margin: 4px 32px 0 0;
     }
     #blurpage
     {
@@ -786,36 +883,33 @@
     }
     .toc
     {
-        float: right; 
-        -moz-border-radius:7px 7px 7px 7px;
-        background-color:#F6F6F6;
-        border:1px solid #DDDDDD;
-        margin:0 20px 10px 10px;
-        padding:20px 15px 20px 20px;
+        float: right;
+        -moz-border-radius: 7px 7px 7px 7px;
+        background-color: #F6F6F6;
+        border: 1px solid #DDDDDD;
+        margin: 0 20px 10px 10px;
+        padding: 20px 15px 20px 20px;
         height: auto;
         width: 200px;
     }
 
     .toc h3
     {
-		font:600 12px/1.2 Arial;
+        font: 600 12px/1.2 Arial;
     }
-	
+
     .wrap .content .toc ul
     {
-       /* float: left;*/
+        /* float: left;*/
         padding-left: 0px;
-        
     }
 
 
     .wrap .content .toc .level2
     {
-       /* float: left;*/
+        /* float: left;*/
         padding-left: 15px;
-        
     }
-  
 
     .content .toc li
     {
@@ -823,117 +917,137 @@
         background: url(../images/bullet_dn.png) no-repeat 0 5px;
     }
 
-    .relpage 
+    .relpage
     {
         -moz-border-radius: 7px 7px 7px 7px;
         border: 1px solid #DDDDDD;
         padding: 25px 25px;
-        clear:both;
+        clear: both;
     }
     .relpage ul
     {
         float: none;
         padding: 15px;
     }
-    .content .relpage li 
+    .content .relpage li
     {
         font: normal 11px/1.2 Verdana;
     }
-    /* edit */
     h3.fn, span.fn
     {
         background-color: #F6F6F6;
         border-width: 1px;
         border-style: solid;
         border-color: #E6E6E6;
-        font-weight: bold; 
-        /*  padding: 6px 0px 6px 10px;*/
-         /*     margin: 42px 0px 0px 0px;*/
+        font-weight: bold;
     }
-    /* edit */
 
-    .indexbox
-    {
-        width: 100%; 
-    }
-    .content .indexboxcont li
-    {
-        font: normal 600 13px/1 Verdana;
-    }
 
- /*   .indexbox a
-    {
-        color: #00732f;
-        text-decoration: none;
-    }*/
-    .indexbox a:hover, .indexbox a:visited:hover
-    {
-        color: #4c0033;
-        text-decoration: underline;
-    }
-    .indexbox a:visited
+    /* start index box */
+    .indexbox
     {
-        color: #00732f;
-        text-decoration: none;
+        width: 100%;
     }
 
     .indexboxcont
     {
         display: block;
+        overflow: hidden;
     }
 
     .indexboxbar
     {
-        background: transparent url(     "../images/horBar.png" ) repeat-x left bottom;
+        background: transparent url(    "../images/horBar.png" ) repeat-x left bottom;
         margin-bottom: 25px;
+        background-image: none;
+        border-bottom: 1px solid #e2e2e2;
     }
 
     .indexboxcont .section
     {
-        display: inline-block; 
+        display: inline-block;
         width: 49%; 
-        *width:42%;
-        _width:42%;
-        padding:0 2% 0 1%;
-        vertical-align:top;
-}
+		*width:42%;
+		_width:42%;
+		padding:02%01%;
+		vertical-align:top;
+	}
 
     .indexboxcont .indexIcon
-    { 
+    {
         width: 11%; 
-        *width:18%;
-        _width:18%;
-        overflow:hidden;
-}
+		*width:18%;
+		_width:18%;
+		overflow:hidden;
+	}
     .indexboxcont .section p
-    { 
+    {
         padding-top: 20px;
         padding-bottom: 20px;
     }
-
     .indexboxcont .sectionlist
     {
         display: inline-block;
-        width: 33%;
-        margin-right: -2px;
-        vertical-align: top;
+        width: 33%; 
         padding: 0;
     }
-    .tricol
-    {
-       
-    }
     .indexboxcont .sectionlist ul
     {
-        padding-left: 15px;
         margin-bottom: 20px;
     }
-/*
+
     .indexboxcont .sectionlist ul li
     {
         line-height: 12px;
     }
-*/
+
+    .content .indexboxcont li
+    {
+        font: normal 600 13px/1 Verdana;
+    }
+
+    .indexbox a:hover, .indexbox a:visited:hover
+    {
+        color: #4c0033;
+        text-decoration: underline;
+    }
+
+    .indexbox a:visited
+    {
+        color: #00732f;
+        text-decoration: none;
+    }
+
+    .indexboxcont:after
+    {
+        content: ".";
+        display: block;
+        height: 0;
+        clear: both;
+        visibility: hidden;
+    }
+
+    .indexbox .indexIcon span
+    {
+        display: block;
+    }
+ .
+    .indexbox.guide .indexIcon span
+    {
+        width: 96px;
+        height: 137px;
+        background: url(../images/sprites-combined.png) no-repeat -5px -376px;
+        padding: 0;
+    }
+ .
+    .indexbox.tools .indexIcon span
+    {
+        width: 115px;
+        height: 137px;
+        background: url(../images/sprites-combined.png) no-repeat -111px -376px;
+        padding: 0;
+    }
+
     .lastcol
     {
         display: inline-block;
@@ -944,12 +1058,12 @@
 
     .tricol .lastcol
     {
-        margin-left:-6px;
+        margin-left: -6px;
     }
-
-    /*.toc ul*/
+    /* end indexbox */
 
     /* end page elements */
+
 }
 /* end of screen media */