Index: trunk/template/cclear/default-colors.css
===================================================================
--- trunk/template/cclear/default-colors.css	(revision 846)
+++ trunk/template/cclear/default-colors.css	(revision 847)
@@ -26,5 +26,5 @@
 
 A:hover {
-    color: #754300;
+    color: #858460;
 }
 
@@ -115,5 +115,6 @@
 input, select, textarea {
 	color:black;
-	background-color:#eee;
+	background-color: lightgrey;
+        border: 1px solid gray;
 }
 .bouton {
Index: trunk/template/cclear/default-layout.css
===================================================================
--- trunk/template/cclear/default-layout.css	(revision 846)
+++ trunk/template/cclear/default-layout.css	(revision 847)
@@ -36,12 +36,17 @@
 A {
     text-decoration:none;
-    /*border-bottom: 1px dotted #000000;*/
+    border-bottom: 1px dotted #005e89;
 }
 A:hover {
-    border-bottom-style: solid;
+    border-bottom: 1px solid #858460;
 }
 
 IMG {
     border: none;
+}
+
+HR.separation {
+  visibility: hidden;
+  clear: both;
 }
 
Index: trunk/template/cclear/image.css
===================================================================
--- trunk/template/cclear/image.css	(revision 846)
+++ trunk/template/cclear/image.css	(revision 847)
@@ -8,4 +8,5 @@
 #imageHeaderBar H1 {
     margin: 1ex 0; /* override default-layout for less bottom-margin */
+    clear: both;
 }
 
@@ -74,5 +75,5 @@
     margin: auto;
 }
-TABLE.infoTable TD {
+TABLE.infoTable .value {
     text-align: left;
 }
@@ -80,4 +81,12 @@
 TABLE.infoTable .label {
     font-weight: bold;
+    text-align: right;
+    padding-right: 0.5em; 
+}
+
+TABLE.infoTable TD.value UL {
+  margin: 0;
+  padding: 0 0 0 1.5em;
+  list-style-type: square;
 }
 
Index: trunk/template/cclear/picture.tpl
===================================================================
--- trunk/template/cclear/picture.tpl	(revision 846)
+++ trunk/template/cclear/picture.tpl	(revision 847)
@@ -11,42 +11,29 @@
 <div id="imageToolBar">
 <div class="randomButtons">
-  <a href="{U_SLIDESHOW}" title="{L_SLIDESHOW}">
-    <img src="template/cclear/theme/slideshow.png" alt="{L_SLIDESHOW}">
-  </a>
-  <a href="{U_METADATA}" title="{L_PICTURE_METADATA}">
-    <img src="template/cclear/theme/metadata.png" alt="{L_PICTURE_METADATA}">
-  </a>
+  <a href="{U_SLIDESHOW}" title="{L_SLIDESHOW}"><img src="template/cclear/theme/slideshow.png" alt="{L_SLIDESHOW}"></a>
+  <a href="{U_METADATA}" title="{L_PICTURE_METADATA}"><img src="template/cclear/theme/metadata.png" alt="{L_PICTURE_METADATA}"></a>
+<!-- BEGIN representative -->
+  <a href="{representative.URL}" title="{lang:set as category representative}"><img src="template/cclear/theme/representative.png" alt="{lang:representative}" /></a>
+<!-- END representative -->
 <!-- BEGIN favorite -->
-  <a href="{favorite.U_FAVORITE}" title="{favorite.FAVORITE_HINT}">
-    <img src="{favorite.FAVORITE_IMG}" alt="{favorite.FAVORITE_ALT}">
-  </a>
+  <a href="{favorite.U_FAVORITE}" title="{favorite.FAVORITE_HINT}"><img src="{favorite.FAVORITE_IMG}" alt="{favorite.FAVORITE_ALT}"></a>
 <!-- END favorite -->
 <!-- BEGIN download -->
-  <a href="{download.U_DOWNLOAD}" title="{L_DOWNLOAD}">
-    <img src="template/cclear/theme/save.png" alt="{L_DOWNLOAD}">
-  </a>
+  <a href="{download.U_DOWNLOAD}" title="{L_DOWNLOAD}"><img src="template/cclear/theme/save.png" alt="{L_DOWNLOAD}"></a>
 <!-- END download -->
 <!-- BEGIN admin -->
-  <a href="{U_ADMIN}" title="{L_ADMIN}">
-    <img src="template/cclear/theme/preferences.png" alt="{L_ADMIN}">
-  </a>
+  <a href="{U_ADMIN}" title="{L_ADMIN}"><img src="template/cclear/theme/preferences.png" alt="{L_ADMIN}"></a>
 <!-- END admin -->
 </div>
 <div class="navButtons">
 <!-- BEGIN next -->
-  <a class="navButton next" href="{next.U_IMG}" title="{L_NEXT_IMG}{next.TITLE_IMG}">
-    <img src="template/cclear/theme/right.png" alt="next">
-  </a>
+  <a class="navButton next" href="{next.U_IMG}" title="{L_NEXT_IMG}{next.TITLE_IMG}"><img src="template/cclear/theme/right.png" alt="next"></a>
 <!-- END next -->
-  <a class="navButton up" href="{U_UP}" title="{L_UP_HINT}">
-    <img src="template/cclear/theme/up.png" alt="{L_UP_ALT}">
-  </a>
+  <a class="navButton up" href="{U_UP}" title="{L_UP_HINT}"><img src="template/cclear/theme/up.png" alt="{L_UP_ALT}"></a>
 <!-- BEGIN previous -->
-  <a class="navButton prev" href="{previous.U_IMG}" title="{L_PREV_IMG}{previous.TITLE_IMG}">
-    <img src="template/cclear/theme/left.png" alt="previous">
-  </a>
+  <a class="navButton prev" href="{previous.U_IMG}" title="{L_PREV_IMG}{previous.TITLE_IMG}"><img src="template/cclear/theme/left.png" alt="previous"></a>
 <!-- END previous -->
 </div>
-</div>
+</div> <!-- imageToolBar -->
 
 <div id="theImage">
@@ -81,10 +68,52 @@
 
 <table class="infoTable" summary="Some info about this picture">
-  <!-- BEGIN info_line -->
   <tr>
-    <td class="label">{info_line.INFO} :</td>
-    <td class="value">{info_line.VALUE}</td>
+    <td class="label">{lang:Author}</td>
+    <td class="value">{INFO_AUTHOR}</td>
   </tr>
-  <!-- END info_line -->
+  <tr>
+    <td class="label">{lang:Created on}</td>
+    <td class="value">{INFO_CREATION_DATE}</td>
+  </tr>
+  <tr>
+    <td class="label">{lang:Registered on}</td>
+    <td class="value">{INFO_AVAILABILITY_DATE}</td>
+  </tr>
+  <tr>
+    <td class="label">{lang:Dimensions}</td>
+    <td class="value">{INFO_DIMENSIONS}</td>
+  </tr>
+  <tr>
+    <td class="label">{lang:File}</td>
+    <td class="value">{INFO_FILE}</td>
+  </tr>
+  <tr>
+    <td class="label">{lang:Filesize}</td>
+    <td class="value">{INFO_FILESIZE}</td>
+  </tr>
+  <tr>
+    <td class="label">{lang:Keywords}</td>
+    <td class="value">{INFO_KEYWORDS}</td>
+  </tr>
+  <tr>
+    <td class="label">{lang:Categories}</td>
+    <td class="value">
+      <ul>
+        <!-- BEGIN category -->
+        <li>{category.LINE}</li>
+        <!-- END category -->
+      </ul>
+    </td>
+  </tr>
+  <tr>
+    <td class="label">{lang:Visits}</td>
+    <td class="value">{INFO_VISITS}</td>
+  </tr>
+  <!-- BEGIN info_rate -->
+  <tr>
+    <td class="label">{lang:Average rate}</td>
+    <td class="value">{info_rate.CONTENT}</td>
+  </tr>
+  <!-- END info_rate -->
 </table>
 
@@ -113,4 +142,6 @@
 </p>
 <!-- END rate -->
+
+<hr class="separation">
 
 <!-- BEGIN comments -->
