Index: typo3/mod/web/perm/index.php
===================================================================
--- typo3/mod/web/perm/index.php	(revision 3435)
+++ typo3/mod/web/perm/index.php	(working copy)
@@ -222,19 +222,6 @@
 		$this->doc->loadJavascriptLib('contrib/prototype/prototype.js');
 		$this->doc->loadJavascriptLib(TYPO3_MOD_PATH . 'perm.js');
 
-		// Adding special styles to the permissions indicators and selecot boxes
- 		$this->doc->inDocStyles .= "
- 			A.perm-allowed, A.perm-denied { padding: 2px 3px 1px 3px; border: 0; cursor: pointer; }
-			A.perm-allowed:hover, A.perm-denied:hover { padding: 1px 2px 0 2px; border: 1px solid red; cursor: pointer; }
-			A.perm-allowed:hover { color: green; }
-			A.perm-denied:hover { color: red; }
-			A IMG { cursor: pointer; }
-			.ug_selector, .ug_selector A { text-decoration: underline; cursor: pointer; }
-			.not_set, .not_set A, .editlock, .editlock A { text-decoration: none; cursor: pointer; color: #CCC; }
-			.not_set:hover, .not_set A:hover, .editlock:hover, .editlock A:hover { text-decoration: none; cursor: pointer; color: #000; font-weight: bold; }
-			.not_set { color: #000; font-style: italic; }
-		";
-
 			// Setting up the context sensitive menu:
 		$this->doc->getContextMenuCode();
 
@@ -703,7 +690,7 @@
 		}
 
 			// Wrap rows in table tags:
-		$code = '<table border="0" cellspacing="0" cellpadding="0" id="typo3-permissionList" width="98%">'.$code.'</table>';
+		$code = '<table border="0" cellspacing="0" cellpadding="0" id="typo3-permissionList" width="99.5%">'.$code.'</table>';
 
 			// Adding the content as a section:
 		$this->content.=$this->doc->section('',$code);
@@ -724,9 +711,10 @@
 				<td valign="top" nowrap="nowrap">'.$legendText.'</td>
 			</tr>
 		</table>';
-		$code.='<br />'.$LANG->getLL('def',1);
-		$code.='<br /><br /><span class="perm-allowed">*</span>: '.$LANG->getLL('A_Granted',1);
-		$code.='<br /><span class="perm-denied">x</span>: '.$LANG->getLL('A_Denied',1);
+		$code.='<div id="perm-legend">'.$LANG->getLL('def',1);
+		$code.='<br /><br /><span class="perm-allowed">*</span>: '.$LANG->getLL('A_Granted', 1);
+		$code.='<br /><span class="perm-denied">x</span>: '.$LANG->getLL('A_Denied', 1);
+		$code.='</div>';
 
 			// Adding section with legend code:
 		$this->content.=$this->doc->spacer(20);
Index: typo3/stylesheet.css
===================================================================
--- typo3/stylesheet.css	(revision 3435)
+++ typo3/stylesheet.css	(working copy)
@@ -1320,7 +1320,7 @@
 
 div#typo3-docbody {
 	width: 98%;
-	padding: 2% 0% 2% 2%;
+	padding: 2% 0% 2% 10px;
 	overflow: auto;
 	top: 51px;
 	bottom: 0;
@@ -2356,16 +2356,76 @@
 
 - - - - - - - - - - - - - - - - - - - - - */
 
-.perm-allowed {
+a.perm-allowed,
+a.perm-denied,
+#perm-legend .perm-allowed,
+#perm-legend .perm-denied {
+	font-size: 0px;
+	font-weight: bold;
+	cursor: pointer;
+
+	display: block;
+	float: left;
+	height: 10px;
+	width: 10px;
+	padding: 2px;
+}
+
+#perm-legend .perm-allowed,
+#perm-legend .perm-denied {
+	clear: left;
+}
+
+a.perm-allowed:hover,
+a.perm-denied:hover {
+	background-color: #e3dfdb;
+}
+
+a.perm-allowed,
+#perm-legend .perm-allowed {
 	color: green;
-	font-weight: bold;
+	background:transparent url('gfx/perm-allowed.gif') no-repeat scroll center;
 }
 
-.perm-denied {
+a.perm-denied,
+#perm-legend .perm-denied {
 	color: red;
-	font-weight: bold;
+	background:transparent url('gfx/perm-denied.gif') no-repeat scroll center;
+}
+
+#perm-legend {
+	margin-top: 10px;
 }
 
+.ug_selector,
+.ug_selector a {
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.not_set,
+.not_set a,
+.editlock,
+.editlock a {
+	text-decoration: none;
+	cursor: pointer;
+	color: #ccc;
+}
+
+.not_set:hover,
+.not_set a:hover,
+.editlock:hover,
+.editlock a:hover {
+	text-decoration: none;
+	cursor: pointer;
+	color: #000;
+}
+
+.not_set {
+	color: #000;
+	font-style: italic;
+}
+
 
 /* - - - - - - - - - - - - - - - - - - - - -