Index: /main/trunk/greenstone3/web/interfaces/default/style/core.css
===================================================================
--- /main/trunk/greenstone3/web/interfaces/default/style/core.css	(revision 28049)
+++ /main/trunk/greenstone3/web/interfaces/default/style/core.css	(revision 28050)
@@ -250,4 +250,5 @@
 }
 
+/*
 #collectionLinks a div{
 	display: block;
@@ -261,5 +262,7 @@
 	padding: 20px;
 	min-width: 200px;
-}
+	text-align:center;
+}
+*/
 
 #collectionLinks a img{
@@ -274,5 +277,4 @@
 }
 
-/*
 .collectionLink {
 	display: block;
@@ -283,8 +285,11 @@
 	color: #444;
 	text-decoration: none;
-	background: url(../images/collectionIconStripe.gif) scroll no-repeat 0 0;
-	padding: 20px;
-}
-*/
+	min-width: 200px;
+	text-align:center;
+}
+
+.collectionLinkText {
+	padding: 15px 15px 10px;
+}
 
 /* some text should not be rendered as it is just there for search engines */
@@ -364,5 +369,4 @@
 	/*display: inline;*/
 	float:right;
-	margin-left: 5px;
 	padding: 1px 4px 1px 0px;
 }
Index: /main/trunk/greenstone3/web/interfaces/default/transform/layouts/header.xsl
===================================================================
--- /main/trunk/greenstone3/web/interfaces/default/transform/layouts/header.xsl	(revision 28049)
+++ /main/trunk/greenstone3/web/interfaces/default/transform/layouts/header.xsl	(revision 28050)
@@ -228,27 +228,33 @@
 
 			<!-- preferences -->
-			<li class="ui-state-default ui-corner-all">
+			<li>
 				<a href="{$library_name}/collection/{$collNameChecked}/page/pref">
 					<xsl:attribute name="title"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'pref_tip')"/></xsl:attribute>
-					<ul>
-						<li><span><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'pref_b')"/></span></li>
-						<li><span class="ui-icon ui-icon-wrench"><xsl:text> </xsl:text></span></li>
-					</ul>
+					<span id="preferencesButton"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'pref_b')"/></span>
+					<script type="text/javascript">
+						<xsl:text disable-output-escaping="yes">
+							$("#preferencesButton").button({icons:{primary:"ui-icon-wrench"}});
+							$("#preferencesButton .ui-button-text").css({"padding-top":"0px", "padding-bottom":"3px"});
+						</xsl:text>
+					</script>
 				</a>
 			</li>
 
 			<!-- help -->
-			<li class="ui-state-default ui-corner-all">
+			<li>
 				<a href="{$library_name}/collection/{$collNameChecked}/page/help">
 					<xsl:attribute name="title"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'help_tip')"/></xsl:attribute>
-					<ul>
-						<li><span><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'help_b')"/></span></li>
-						<li><span class="ui-icon ui-icon-help"><xsl:text> </xsl:text></span></li>
-					</ul>
+					<span id="helpButton"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'help_b')"/></span>
+					<script type="text/javascript">
+						<xsl:text disable-output-escaping="yes">
+							$("#helpButton").button({icons:{primary:"ui-icon-help"}});
+							$("#helpButton .ui-button-text").css({"padding-top":"0px", "padding-bottom":"3px"});
+						</xsl:text>
+					</script>
 				</a>
 			</li>
 			
 			<!-- login/logout -->
-			<li class="ui-state-default ui-corner-all" id="userMenuButton">
+			<li id="userMenuButton">
 				<xsl:choose>
 					<xsl:when test="/page/pageRequest/userInformation/@username">
@@ -329,8 +335,11 @@
 								</xsl:text>
 							</script>
-							<ul>
-								<li><span><xsl:value-of select="/page/pageRequest/userInformation/@username"/></span></li>
-								<li><span class="ui-icon ui-icon-unlocked"><xsl:text> </xsl:text></span></li>
-							</ul>
+							<span id="loginButton"><xsl:value-of select="/page/pageRequest/userInformation/@username"/></span>
+							<script type="text/javascript">
+								<xsl:text disable-output-escaping="yes">
+									$("#loginButton").button({icons:{primary:"ui-icon-unlocked"}});
+									$("#loginButton .ui-button-text").css({"padding-top":"0px", "padding-bottom":"3px"});
+								</xsl:text>
+							</script>
 						</a>
 					</xsl:when>
@@ -360,8 +369,11 @@
 							</xsl:attribute>
 							<xsl:attribute name="title"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'login_tip')"/></xsl:attribute>
-							<ul>
-								<li><span><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'login_b')"/></span></li>
-								<li><span class="ui-icon ui-icon-locked"><xsl:text> </xsl:text></span></li>
-							</ul>
+							<span id="loginButton"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'login_b')"/></span>
+							<script type="text/javascript">
+								<xsl:text disable-output-escaping="yes">
+									$("#loginButton").button({icons:{primary:"ui-icon-locked"}});
+									$("#loginButton .ui-button-text").css({"padding-top":"0px", "padding-bottom":"3px"});
+								</xsl:text>
+							</script>
 						</a>
 					</xsl:otherwise>
@@ -370,13 +382,16 @@
 			<!-- debuginfo (doesn't use class="ui-state-error" since the text is not legible due to inherited text-colour) -->
 			<xsl:if test="/page/pageRequest/paramList/param[(@name='debug') and (@value='on' or @value='true' or @value='1')]">
-			  <li class="ui-state-default ui-corner-all">
-			    <a href="{$library_name}/collection/{$collNameChecked}/page/debug">
-			      <xsl:attribute name="title"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'debuginfo_tip')"/></xsl:attribute>
-			      <ul>
-				<li><span><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'debuginfo_b')"/></span></li>
-				<li><span class="ui-icon ui-icon-info"><xsl:text> </xsl:text></span></li>
-			      </ul>
-			    </a>
-			  </li>
+				<li>
+					<a href="{$library_name}/collection/{$collNameChecked}/page/debug">
+						<xsl:attribute name="title"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'debuginfo_tip')"/></xsl:attribute>
+						<span id="debugButton"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'debuginfo_b')"/></span>
+						<script type="text/javascript">
+							<xsl:text disable-output-escaping="yes">
+								$("#debugButton").button({icons:{primary:"ui-icon-info"}});
+								$("#debugButton .ui-button-text").css({"padding-top":"0px", "padding-bottom":"3px"});
+							</xsl:text>
+						</script>
+					</a>
+				</li>
 			</xsl:if>
 		</ul>
