Improved the web page layout. Now the detailed documentation link

appears as a huge and obvious orange button.

docs/docs/dlib.css

@@ -105,6 +105,76 @@ ul.tree  li ul { margin-left:10px; padding:0px; }
 li#term { list-style: none; }
 
 
+div.include_file_more_details_wrapper
+{
+   margin-top: 1em;
+   margin-bottom: 5px;
+   overflow: auto;
+   width: 100%;
+   display: inline-block;
+}
+div.include_file
+{
+   font-size: 1.8em;
+   font-weight: bold;
+   font-family: monospace;
+
+   float: right;
+
+   padding: 0.4em;
+}
+a.more_details, a.more_details_extension 
+{
+   font-size: 1.6em;
+   font-weight: bold;
+   float: left;
+
+
+   margin: 5px;
+
+   font: 200 1.6em source-sans-pro, sans-serif;
+   text-align: center;
+   padding-left: 1.5em;
+   padding-right: 1.5em;
+   -webkit-font-smoothing: antialiased;
+   background-color: #f59820;
+   border-color: #d47c0a;
+   color: #fff;
+
+   padding: 0.2em 1.5em 0.2em;
+
+   -moz-box-shadow: 2px 2px 9px #777777; 
+   -webkit-box-shadow: 2px 2px 9px #777777;
+   box-shadow: 1px 1px 5px #777777;
+   border-radius: 3px;
+   -moz-border-radius: 3px;
+   -webkit-border-radius: 3px;
+
+   transition: 320ms;
+   display: inline-block;
+
+}
+a.more_details:hover, a.more_details_extension:hover
+{
+   text-decoration: none;
+   -moz-box-shadow: 1px 1px 9px #77a777; 
+   -webkit-box-shadow: 1px 1px 9px #77a777;
+   box-shadow: 1px 1px 5px #77a777;
+   color: #ffffff;
+
+   background-color: #d5780a;
+}
+
+a.more_details_extension
+{
+   margin-top: 10px;
+   padding: 0.1em 1.0em 0.1em;
+   display: block;
+   font-size: 1.3em;
+   float: none;
+   width: 160px;
+}
+
 div.component {
    background-color:white; 
    border: 2px solid rgb(102,102,102); 

docs/docs/stylesheet.xsl

@@ -332,39 +332,28 @@
          <BR/>
          <xsl:apply-templates select="description"/>
 
-         <xsl:if test="file">
          <BR/>
-            <BR/><B><font style='font-size:1.4em'><tt>#include &lt;<xsl:value-of select="file"/>&gt;</tt></font></B>
-         </xsl:if>
+         <xsl:apply-templates select="examples"/>
+         <div class='include_file_more_details_wrapper'>
             <xsl:if test="spec_file">
                <xsl:choose>
                   <xsl:when test="spec_file/@link = 'true'">
-                  <BR/>
-                  <b><a href="{spec_file}.html#{name}">
-                     <font style='font-size:1.6em'>Detailed Documentation</font></a></b> 
+                     <a class='more_details' href="{spec_file}.html#{name}">More Details...</a> 
                   </xsl:when>
                   <xsl:otherwise>
-                  <BR/>
-                  <b><a href="{spec_file}.html">
-                     <font style='font-size:1.6em'>Detailed Documentation</font></a></b>
+                     <a class='more_details' href="{spec_file}.html">More Details...</a>
                   </xsl:otherwise>
                </xsl:choose>
             </xsl:if>
-         <xsl:if test="body_file">
-            <BR/>
-            The body for the <xsl:value-of select="name"/> component can be found 
-            here: <a href="{body_file}.html#{name}"><xsl:value-of select="body_file"/></a>
+            <xsl:if test="file">
+               <div class='include_file'>#include &lt;<xsl:value-of select="file"/>&gt;</div>
             </xsl:if>
-         <xsl:apply-templates select="examples"/>
+         </div>
 
          <xsl:apply-templates select="implementations">           
             <xsl:with-param name="checked" select="$checked" />
          </xsl:apply-templates>
                
-         <xsl:choose>
-            <xsl:when test="implementations"></xsl:when>
-            <xsl:otherwise><br/><br/></xsl:otherwise>
-         </xsl:choose>
       
          <xsl:if test="extensions">
             <br/>
@@ -380,19 +369,17 @@
                <xsl:apply-templates select="description"/>
                <BR/>
                <BR/>
+               <xsl:apply-templates select="examples"/>
                <xsl:choose>
                   <xsl:when test="spec_file/@link = 'true'">
-                     <b><a href="{spec_file}.html#{name}">
-                        <font style='font-size:1.4em'>Detailed Documentation</font></a></b>
+                     <a class='more_details_extension' href="{spec_file}.html#{name}">More Details...</a>
                   </xsl:when>
                   <xsl:otherwise>
-                     <b><a href="{spec_file}.html">
-                        <font style='font-size:1.4em'>Detailed Documentation</font></a></b>
+                     <a class='more_details_extension' href="{spec_file}.html">More Details...</a>
                   </xsl:otherwise>
                </xsl:choose>
 
 
-               <xsl:apply-templates select="examples"/>
                <xsl:apply-templates select="implementations">           
                   <xsl:with-param name="checked" select="$checked" />
                </xsl:apply-templates>
@@ -400,10 +387,6 @@
             </xsl:for-each>            
          </xsl:if>
       
-      
-            <!-- putting this empty center tag here, for whatever reason, prevents IE from
-            messing up the space between these div blocks -->
-            <center></center>
          </div>
       </xsl:for-each>
    </xsl:template>