[gentoo-commits] proj/forums:styles/gentoo-light commit in: theme/, template/, theme/en/, theme/images/

[Jimi Huotari]

commit:     48a2b5b46c90d7ed528571154778d6fafe05aada
Author:     Jimi Huotari <chiitoo <AT> gentoo <DOT> org>
AuthorDate: Thu Feb  6 08:15:51 2020 +0000
Commit:     Jimi Huotari <chiitoo <AT> gentoo <DOT> org>
CommitDate: Thu Feb  6 08:27:17 2020 +0000
URL:        https://gitweb.gentoo.org/proj/forums.git/commit/?id=48a2b5b4

Let there be Gentoo Light.

Use (at least mostly) the colours of the Gentoo forums phpBB 2
edition, move poster profiles from right to left, and enable wide
layout (among other, smaller tweaks).

Signed-off-by: Jimi Huotari <chiitoo <AT> gentoo.org>

 template/index_body.html                    |  13 +-
 template/overall_footer.html                |  15 +-
 template/overall_header.html                |  19 +-
 template/ucp_pm_viewmessage.html            |  16 +-
 template/viewtopic_body.html                |  28 +-
 theme/base.css                              |   4 +-
 theme/colours.css                           | 380 +++++++++++++++++-----------
 theme/common.css                            |  65 +++--
 theme/content.css                           |  75 +++++-
 theme/en/icon_user_online.png               | Bin 0 -> 4707 bytes
 theme/en/stylesheet.css                     |   2 +-
 theme/images/cellpic3.gif                   | Bin 0 -> 243 bytes
 theme/images/site_logo.png                  | Bin 0 -> 70815 bytes
 theme/{responsive.css => responsive-pm.css} |  97 +++++--
 theme/responsive.css                        |  75 +++++-
 15 files changed, 543 insertions(+), 246 deletions(-)

diff --git a/template/index_body.html b/template/index_body.html
index 239a91c58..7b5fab3f4 100644
--- a/template/index_body.html
+++ b/template/index_body.html
@@ -15,6 +15,14 @@
 
 <!-- EVENT index_body_forumlist_body_after -->
 
+<div class="stats-area">
+	<div class="stats-header">
+		<h3>{L_STATISTICS}</h3>
+	</div>
+
+	<div class="stats-data">
+
+
 <!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
 	<form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
 	<h3><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- IF S_REGISTER_ENABLED -->&nbsp; &bull; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF --></h3>
@@ -41,7 +49,7 @@
 		<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
 		<p>
 			<!-- EVENT index_body_block_online_prepend -->
-			{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> 
+			{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br />
 			<!-- IF U_VIEWONLINE -->
 				<br />{LOGGED_IN_USER_LIST}
 				<!-- IF LEGEND --><br /><em>{L_LEGEND}{L_COLON} {LEGEND}</em><!-- ENDIF -->
@@ -76,5 +84,6 @@
 <!-- ENDIF -->
 
 <!-- EVENT index_body_stat_blocks_after -->
-
+	</div>
+</div>
 <!-- INCLUDE overall_footer.html -->

diff --git a/template/overall_footer.html b/template/overall_footer.html
index bdff1a0c0..222f65e6e 100644
--- a/template/overall_footer.html
+++ b/template/overall_footer.html
@@ -9,6 +9,13 @@
 	<div class="copyright">
 		<!-- EVENT overall_footer_copyright_prepend -->
 		<p class="footer-row">
+			<span class="footer-copyright">© 2001–2020 Gentoo Foundation, Inc.</span>
+		</p>
+		<p class="footer-row">Hosting by
+			<a class="footer-link" href="https://www.gossamer-threads.com/" title="Hosting" role="menuitem">
+				<span class="footer-link-text">Gossamer Threads Inc.</span>
+			</a>
+			|
 			<span class="footer-copyright">{{ CREDIT_LINE }}</span>
 		</p>
 		<!-- IF TRANSLATION_INFO -->
@@ -18,12 +25,8 @@
 		<!-- ENDIF -->
 		<!-- EVENT overall_footer_copyright_append -->
 		<p class="footer-row">
-			<a class="footer-link" href="{{ U_PRIVACY }}" title="{{ lang('PRIVACY_LINK') }}" role="menuitem">
-				<span class="footer-link-text">{{ lang('PRIVACY_LINK') }}</span>
-			</a>
-			|
-			<a class="footer-link" href="{{ U_TERMS_USE }}" title="{{ lang('TERMS_LINK') }}" role="menuitem">
-				<span class="footer-link-text">{{ lang('TERMS_LINK') }}</span>
+			<a class="footer-link" href="https://wiki.gentoo.org/wiki/Foundation:Privacy_Policy" title="Privacy Policy" role="menuitem">
+				<span class="footer-link-text">Privacy Policy</span>
 			</a>
 		</p>
 		<!-- IF DEBUG_OUTPUT -->

diff --git a/template/overall_header.html b/template/overall_header.html
index 09824d0a1..412e95298 100644
--- a/template/overall_header.html
+++ b/template/overall_header.html
@@ -23,10 +23,11 @@
 <!-- ENDIF -->
 
 <!--
-	phpBB style name: prosilver
+	phpBB style name: Gentoo Light
 	Based on style:   prosilver (this is the default phpBB3 style)
+	Based on style:   Gentoo phpBB 2 (Derived from subSilver by Kyle Manna)
 	Original author:  Tom Beddard ( http://www.subBlue.com/ )
-	Modified by:
+	Modified by:      Gentoo ( https://www.gentoo.org/ )
 -->
 
 <!-- IF S_ALLOW_CDN -->
@@ -76,7 +77,7 @@
 
 <!-- EVENT overall_header_body_before -->
 
-<div id="wrap" class="wrap">
+<div id="header-wide">
 	<a id="top" class="top-anchor" accesskey="t"></a>
 	<div id="page-header">
 		<div class="headerbar" role="banner">
@@ -85,8 +86,8 @@
 
 			<div id="site-description" class="site-description">
 				<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
-				<h1>{SITENAME}</h1>
-				<p>{SITE_DESCRIPTION}</p>
+				<!--<h1>{SITENAME}</h1>
+				<p>{SITE_DESCRIPTION}</p>-->
 				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
 			</div>
 
@@ -112,9 +113,12 @@
 			</div>
 			<!-- EVENT overall_header_headerbar_after -->
 		</div>
+	</div>
+</div>
 		<!-- EVENT overall_header_navbar_before -->
 		<!-- INCLUDE navbar_header.html -->
-	</div>
+
+<div id="wrap" class="wrap">
 
 	<!-- EVENT overall_header_page_body_before -->
 
@@ -126,6 +130,9 @@
 				<strong>{L_INFORMATION}{L_COLON}</strong> {L_BOARD_DISABLED}
 			</div>
 		</div>
+	</div>
 		<!-- ENDIF -->
 
 		<!-- EVENT overall_header_content_before -->
+
+</div> <!-- End Wrap -->

diff --git a/template/ucp_pm_viewmessage.html b/template/ucp_pm_viewmessage.html
index 7cb44a018..dab6a9bab 100644
--- a/template/ucp_pm_viewmessage.html
+++ b/template/ucp_pm_viewmessage.html
@@ -5,6 +5,7 @@
 	</div>
 </div>
 
+<link rel="stylesheet" href="{T_THEME_PATH}/responsive-pm.css">
 
 <!-- IF S_DISPLAY_HISTORY and (U_VIEW_PREVIOUS_HISTORY or U_VIEW_NEXT_HISTORY) -->
 	<fieldset class="display-options clearfix">
@@ -22,16 +23,11 @@
 <!-- ENDIF -->
 
 
-<div id="post-{MESSAGE_ID}" class="post pm has-profile<!-- IF S_POST_UNAPPROVED or S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF S_ONLINE --> online<!-- ENDIF -->">
+<div id="post-{MESSAGE_ID}" class="post pm has-profile">
 <div class="inner">
 
-	<dl class="postprofile" id="profile{MESSAGE_ID}">
+	<dl class="postprofile<!-- IF S_POST_UNAPPROVED or S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF S_ONLINE --> online<!-- ENDIF -->" id="profile{MESSAGE_ID}">
 		<dt class="<!-- IF RANK_TITLE or RANK_IMG -->has-profile-rank<!-- ELSE -->no-profile-rank<!-- ENDIF --> <!-- IF AUTHOR_AVATAR -->has-avatar<!-- ELSE -->no-avatar<!-- ENDIF -->">
-			<div class="avatar-container">
-				<!-- EVENT ucp_pm_viewmessage_avatar_before -->
-				<!-- IF AUTHOR_AVATAR --><a href="{U_MESSAGE_AUTHOR}" class="avatar">{AUTHOR_AVATAR}</a><!-- ENDIF -->
-				<!-- EVENT ucp_pm_viewmessage_avatar_after -->
-			</div>
 			{MESSAGE_AUTHOR_FULL}
 		</dt>
 
@@ -39,6 +35,12 @@
 		<!-- IF RANK_TITLE or RANK_IMG --><dd class="profile-rank">{RANK_TITLE}<!-- IF RANK_TITLE and RANK_IMG --><br /><!-- ENDIF -->{RANK_IMG}</dd><!-- ENDIF -->
 		<!-- EVENT ucp_pm_viewmessage_rank_after -->
 
+			<div class="avatar-container">
+				<!-- EVENT ucp_pm_viewmessage_avatar_before -->
+				<!-- IF AUTHOR_AVATAR --><a href="{U_MESSAGE_AUTHOR}" class="avatar">{AUTHOR_AVATAR}</a><!-- ENDIF -->
+				<!-- EVENT ucp_pm_viewmessage_avatar_after -->
+			</div>
+
 		<dd class="profile-posts"><strong>{L_POSTS}{L_COLON}</strong> <!-- IF U_AUTHOR_POSTS != '' --><a href="{U_AUTHOR_POSTS}">{AUTHOR_POSTS}</a><!-- ELSE -->{AUTHOR_POSTS}<!-- ENDIF --></dd>
 		<!-- IF AUTHOR_JOINED --><dd class="profile-joined"><strong>{L_JOINED}{L_COLON}</strong> {AUTHOR_JOINED}</dd><!-- ENDIF -->
 

diff --git a/template/viewtopic_body.html b/template/viewtopic_body.html
index 8d7e26f09..2d96997d2 100644
--- a/template/viewtopic_body.html
+++ b/template/viewtopic_body.html
@@ -131,23 +131,25 @@
 
 <!-- EVENT viewtopic_body_poll_after -->
 
+<div id="topic-header">
+	<div class="inner">
+		<div class="post has-profile">
+			<div class="postprofile topic-header-author">{L_AUTHOR}</div>
+				<div class="postbody topic-header-title inner">{L_MESSAGE}</div>
+			</div>
+		</div>
+	</div>
+
 <!-- BEGIN postrow -->
 	<!-- EVENT viewtopic_body_postrow_post_before -->
 	<!-- IF postrow.S_FIRST_UNREAD -->
 		<a id="unread" class="anchor"<!-- IF S_UNREAD_VIEW --> data-url="{postrow.U_MINI_POST}"<!-- ENDIF -->></a>
 	<!-- ENDIF -->
-	<div id="p{postrow.POST_ID}" class="post has-profile <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_POST_DELETED --> deleted<!-- ENDIF --><!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --> online<!-- ENDIF --><!-- IF postrow.POSTER_WARNINGS --> warned<!-- ENDIF -->">
+	<div id="p{postrow.POST_ID}" class="post has-profile <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_POST_DELETED --> deleted<!-- ENDIF --><!-- IF postrow.POSTER_WARNINGS --> warned<!-- ENDIF -->">
 		<div class="inner">
 
-		<dl class="postprofile" id="profile{postrow.POST_ID}"<!-- IF postrow.S_POST_HIDDEN --> style="display: none;"<!-- ENDIF -->>
+		<dl class="postprofile<!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->" id="profile{postrow.POST_ID}"<!-- IF postrow.S_POST_HIDDEN --> style="display: none;"<!-- ENDIF -->>
 			<dt class="<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG -->has-profile-rank<!-- ELSE -->no-profile-rank<!-- ENDIF --> <!-- IF postrow.POSTER_AVATAR -->has-avatar<!-- ELSE -->no-avatar<!-- ENDIF -->">
-				<div class="avatar-container">
-					<!-- EVENT viewtopic_body_avatar_before -->
-					<!-- IF postrow.POSTER_AVATAR -->
-						<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}" class="avatar">{postrow.POSTER_AVATAR}</a><!-- ELSE --><span class="avatar">{postrow.POSTER_AVATAR}</span><!-- ENDIF -->
-					<!-- ENDIF -->
-					<!-- EVENT viewtopic_body_avatar_after -->
-				</div>
 				<!-- EVENT viewtopic_body_post_author_before -->
 				<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
 				<!-- EVENT viewtopic_body_post_author_after -->
@@ -157,6 +159,14 @@
 			<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG --><dd class="profile-rank">{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}</dd><!-- ENDIF -->
 			<!-- EVENT viewtopic_body_postrow_rank_after -->
 
+				<div class="avatar-container">
+					<!-- EVENT viewtopic_body_avatar_before -->
+					<!-- IF postrow.POSTER_AVATAR -->
+						<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}" class="avatar">{postrow.POSTER_AVATAR}</a><!-- ELSE --><span class="avatar">{postrow.POSTER_AVATAR}</span><!-- ENDIF -->
+					<!-- ENDIF -->
+					<!-- EVENT viewtopic_body_avatar_after -->
+				</div>
+
 		<!-- IF postrow.POSTER_POSTS != '' --><dd class="profile-posts"><strong>{L_POSTS}{L_COLON}</strong> <!-- IF postrow.U_SEARCH !== '' --><a href="{postrow.U_SEARCH}"><!-- ENDIF -->{postrow.POSTER_POSTS}<!-- IF postrow.U_SEARCH !== '' --></a><!-- ENDIF --></dd><!-- ENDIF -->
 		<!-- IF postrow.POSTER_JOINED --><dd class="profile-joined"><strong>{L_JOINED}{L_COLON}</strong> {postrow.POSTER_JOINED}</dd><!-- ENDIF -->
 		<!-- IF postrow.POSTER_WARNINGS --><dd class="profile-warnings"><strong>{L_WARNINGS}{L_COLON}</strong> {postrow.POSTER_WARNINGS}</dd><!-- ENDIF -->

diff --git a/theme/base.css b/theme/base.css
index 98c57d926..20cf61983 100644
--- a/theme/base.css
+++ b/theme/base.css
@@ -47,14 +47,14 @@ hr {
 }
 
 a {
-	color: #428bca;
+	color: #a0a0d0;
 	text-decoration: none;
 }
 
 a:hover,
 a:focus,
 a:active {
-	color: #2a6496;
+	color: #a0a0d0;
 	text-decoration: underline;
 }
 

diff --git a/theme/colours.css b/theme/colours.css
index ffaa71034..0279fd093 100644
--- a/theme/colours.css
+++ b/theme/colours.css
@@ -4,12 +4,12 @@ Colours and backgrounds for common.css
 -------------------------------------------------------------- */
 
 html, body {
-	color: #536482;
-	background-color: #F5F7FA;
+	color: #000000;
+	background-color: #ffffff;
 }
 
 h1 {
-	color: #FFFFFF;
+	color: #46357c;
 }
 
 h2 {
@@ -18,7 +18,7 @@ h2 {
 
 h3 {
 	border-bottom-color: #CCCCCC;
-	color: #115098;
+	color: #333333;
 }
 
 hr {
@@ -26,21 +26,50 @@ hr {
 	border-top-color: #CCCCCC;
 }
 
+.rightside {
+	color: #efefef;
+}
+
+.responsive-center {
+	color: #333333;
+}
+
 /*
 --------------------------------------------------------------
 Colours and backgrounds for links.css
 -------------------------------------------------------------- */
 
-a { color: #105289; }
-a:hover { color: #D31141; }
+a {
+	color: #663399;
+}
+
+a:hover {
+	color: #ff6633;
+}
+
+.linklist a {
+	color: #a0a0d0;
+}
+
+.linklist a:hover {
+	color: #00ff00;
+}
+
+.mark-read {
+	color: #46357c;
+}
+
+.mark-read:hover {
+	color: #ff6633;
+}
 
 /* Links on gradient backgrounds */
 .forumbg .header a, .forabg .header a, th a {
-	color: #FFFFFF;
+	color: #efefef;
 }
 
 .forumbg .header a:hover, .forabg .header a:hover, th a:hover {
-	color: #A8D8FF;
+	color: #004768;
 }
 
 /* Notification mark read link */
@@ -50,18 +79,18 @@ a:hover { color: #D31141; }
 
 /* Post body links */
 .postlink {
-	border-bottom-color: #368AD2;
-	color: #368AD2;
+	border-bottom-color: #105289;
+	color: #105289;
 }
 
 .postlink:visited {
-	border-bottom-color: #5D8FBD;
-	color: #5D8FBD;
+	border-bottom-color: #005075;
+	color: #005075;
 }
 
 .postlink:hover {
-	background-color: #D0E4F6;
-	color: #0D4473;
+	background-color: #ced7Db;
+	color: #004768;
 }
 
 .signature a, .signature a:hover {
@@ -75,41 +104,35 @@ a:hover { color: #D31141; }
 
 /* Arrow links  */
 .arrow-left:hover, .arrow-right:hover {
-	color: #368AD2;
+	color: #ff6633;
 }
 
-/* Round cornered boxes and backgrounds
+/* Boxes and Backgrounds
 ---------------------------------------- */
-.wrap {
-	background-color: #FFF;
-	border-color: #E6E9ED;
+
+#header-wide {
+	background-color: #46357c;
 }
 
 .headerbar {
-	color: #FFFFFF;
+	color: #46357c;
 }
 
-.headerbar, .forumbg {
-	background-color: #12A3EB;
-	background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);
-	background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%);
-	background-repeat: repeat-x;
+.forumbg, .forabg {
+	background-color: #46357c;
+	background-image: url("./images/cellpic3.gif");
 }
 
-.forabg {
-	background-color: #0076B1;
-	background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #12A3EB 2px, #0076B1 92px, #0076B1 100%);
-	background-image: linear-gradient(to bottom, #6ACEFF 0%,#12A3EB 2px,#0076B1 92px,#0076B1 100%);
-	background-repeat: repeat-x;
+.navbar {
+	background-color: #000000;
 }
 
-.navbar {
-	background-color: #CADCEB;
+.forabg, .forumbg, .panel, .post, .responsive {
+	border: 1px solid #333333;
 }
 
 .panel {
-	background-color: #ECF1F3;
-	color: #28313F;
+	background-color: #ececec;
 }
 
 .post:target .content {
@@ -117,31 +140,31 @@ a:hover { color: #D31141; }
 }
 
 .post:target h3 a {
-	color: #000000;
+	color: #5c2e8a;
 }
 
 .bg1 {
-	background-color: #ECF3F7;
+	background-color: #ececec;
 }
 
 table.zebra-list tr:nth-child(odd) td, ul.zebra-list li:nth-child(odd) {
-	background-color: #ECF3F7;
+	background-color: #ececec;
 }
 
 .bg2 {
-	background-color: #E1EBF2;
+	background-color: #e5e8ea;
 }
 
 table.zebra-list tr:nth-child(even) td, ul.zebra-list li:nth-child(even) {
-	background-color: #E1EBF2;
+	background-color: #e5e8ea;
 }
 
-.bg3	{
-	background-color: #CADCEB;
+.bg3 {
+	background-color: #ececec;
 }
 
 .ucprowbg {
-	background-color: #DCDEE2;
+	background-color: #e5e8ea;
 }
 
 .fieldsbg {
@@ -149,20 +172,32 @@ table.zebra-list tr:nth-child(even) td, ul.zebra-list li:nth-child(even) {
 }
 
 .site_logo {
-	background-image: url("./images/site_logo.gif");
+	background-image: url("./images/site_logo.png");
 }
 
-/* Horizontal lists
+/* Statistics
 ----------------------------------------*/
 
-ul.navlinks {
-	border-top-color: #FFFFFF;
+.stats-area {
+	background-color: #efefef;
+	border: 1px solid #333333;
+}
+
+.stats-header h3 {
+	background-image: url("./images/cellpic3.gif");
+	border-bottom-color: #a9b8c2;
+	color: #efefef;
+}
+
+.stats-data h3 {
+	border-bottom-color: #a9b8c2;
 }
 
 /* Table styles
 ----------------------------------------*/
+
 table.table1 thead th {
-	color: #FFFFFF;
+	color: #333333;
 }
 
 table.table1 tbody tr {
@@ -170,7 +205,7 @@ table.table1 tbody tr {
 }
 
 table.table1 tbody tr:hover, table.table1 tbody tr.hover {
-	background-color: #CFE1F6;
+	background-color: #dee3e5;
 	color: #000;
 }
 
@@ -179,13 +214,21 @@ table.table1 td {
 }
 
 table.table1 tbody td {
-	border-top-color: #FAFAFA;
+	border-top-color: #a9b8c2;
+}
+
+table.table1 tbody td.posts {
+	border-left: 1px solid #a9b8c2;
+	border-right: 1px solid #a9b8c2;
+}
+
+table.table1 tbody td.info {
+	border-right: 1px solid #a9b8c2;
 }
 
 table.table1 tbody th {
-	border-bottom-color: #000000;
+	border-bottom-color: #a9b8c2;
 	color: #333333;
-	background-color: #FFFFFF;
 }
 
 table.info tbody th {
@@ -194,12 +237,18 @@ table.info tbody th {
 
 /* Misc layout styles
 ---------------------------------------- */
+
 dl.details dt {
 	color: #000000;
 }
 
 dl.details dd {
-	color: #536482;
+	color: #000000;
+	font-weight: bold;
+}
+
+dl.details dd a {
+	font-weight: normal;
 }
 
 .sep {
@@ -208,6 +257,7 @@ dl.details dd {
 
 /* Icon styles
 ---------------------------------------- */
+
 .icon.icon-blue, a:hover .icon.icon-blue {
 	color: #196db5;
 }
@@ -250,23 +300,23 @@ dl.details dd {
 }
 
 .jumpbox-cat-link {
-	background-color: #0076b1;
+	background-color: #d2d5d7;
 	border-top-color: #0076B1;
-	color: #FFFFFF;
+	color: #373737;
 }
 
 .jumpbox-cat-link:hover {
-	background-color: #12A3EB;
+	background-color: #c7cacc;
 	border-top-color: #12A3EB;
-	color: #FFFFFF;
+	color: #000000;
 }
 
 .jumpbox-forum-link {
-	background-color: #E1EBF2;
+	background-color: #ececec;
 }
 
 .jumpbox-forum-link:hover {
-	background-color: #F6F4D0;
+	background-color: #dee3e5;
 }
 
 .jumpbox .dropdown .pointer-inner {
@@ -274,18 +324,23 @@ dl.details dd {
 }
 
 .jumpbox-sub-link {
-	background-color: #E1EBF2;
+	background-color: #ececec;
 }
 
 .jumpbox-sub-link:hover {
-	background-color: #F1F8FF;
+	background-color: #dee3e5;
 }
 
 /* Miscellaneous styles
 ---------------------------------------- */
 
 .copyright {
-	color: #555555;
+	color: #efefef;
+	background-color: #000000;
+}
+
+.copyright a {
+	color: #a0a0d0;
 }
 
 .error {
@@ -319,28 +374,24 @@ Colours and backgrounds for content.css
 -------------------------------------------------------------- */
 
 ul.forums {
-	background-color: #EEF5F9; /* Old browsers */ /* FF3.6+ */
-	background-image: -webkit-linear-gradient(top, #D2E0EB 0%, #EEF5F9 100%);
-	background-image: linear-gradient(to bottom, #D2E0EB 0%,#EEF5F9 100%); /* W3C */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D2E0EB', endColorstr='#EEF5F9',GradientType=0 ); /* IE6-9 */
+	background-color: #ececec;
 }
 
 ul.topiclist li {
-	color: #4C5D77;
+	color: #000000;
 }
 
 ul.topiclist dd {
-	border-left-color: #FFFFFF;
+	border-left-color: #a9b8c2;
 }
 
 .rtl ul.topiclist dd {
-	border-right-color: #FFFFFF;
+	border-right-color: #a9b8c2;
 	border-left-color: transparent;
 }
 
 li.row {
-	border-top-color:  #FFFFFF;
-	border-bottom-color: #00608F;
+	border-top-color:  #a9b8c2;
 }
 
 li.row strong {
@@ -348,37 +399,48 @@ li.row strong {
 }
 
 li.row:hover {
-	background-color: #F6F4D0;
+	background-color: #dee3e5;
 }
 
 li.row:hover dd {
-	border-left-color: #CCCCCC;
+	border-left-color: #a9b8c2;
 }
 
 .rtl li.row:hover dd {
-	border-right-color: #CCCCCC;
+	border-right-color: #a9b8c2;
 	border-left-color: transparent;
 }
 
 li.header dt, li.header dd {
-	color: #FFFFFF;
+	color: #efefef;
 }
 
 /* Post body styles
 ----------------------------------------*/
-.postbody {
-	color: #333333;
+
+#topic-header {
+	background-color: #46357c;
+	background-image: url("./images/cellpic3.gif");
+}
+
+.postprofile.topic-header-author {
+	color: #efefef;
+}
+
+.postbody.topic-header-title {
+	color: #efefef;
 }
 
 /* Content container styles
 ----------------------------------------*/
+
 .content {
 	color: #333333;
 }
 
 .content h2, .panel h2 {
-	color: #115098;
-	border-bottom-color:  #CCCCCC;
+	color: #333333;
+	border-bottom-color: #a9b8c2;
 }
 
 dl.faq dt {
@@ -396,30 +458,37 @@ dl.faq dt {
 
 /* Post signature */
 .signature {
-	border-top-color: #CCCCCC;
+	border-top-color: #a9b8c2;
+	color: #333333;
+	opacity: 0.7;
+}
+
+.signature:hover {
+	opacity: 1.0;
 }
 
 /* Post noticies */
 .notice {
-	border-top-color:  #CCCCCC;
+	border-top-color: #a9b8c2;
 }
 
 /* BB Code styles
 ----------------------------------------*/
+
 /* Quote block */
 blockquote {
-	background-color: #EBEADD;
-	border-color:#DBDBCE;
+	background-color: #dcdcdc;
+	border-color: #d1d7dc;
 }
 
 blockquote blockquote {
 	/* Nested quotes */
-	background-color:#EFEED9;
+	background-color: #ededed;
 }
 
 blockquote blockquote blockquote {
 	/* Nested quotes */
-	background-color: #EBEADD;
+	background-color: #fefefe;
 }
 
 /* Code block */
@@ -438,9 +507,10 @@ blockquote blockquote blockquote {
 
 /* Attachments
 ----------------------------------------*/
+
 .attachbox {
 	background-color: #FFFFFF;
-	border-color:  #C9D2D8;
+	border-color: #C9D2D8;
 }
 
 .pm-message .attachbox {
@@ -464,7 +534,6 @@ blockquote blockquote blockquote {
 }
 
 /* Inline image thumbnails */
-
 dl.file dd {
 	color: #666666;
 }
@@ -558,13 +627,20 @@ fieldset.polls dd div {
 
 /* Poster profile block
 ----------------------------------------*/
-.postprofile {
-	color: #666666;
-	border-color: #FFFFFF;
+
+.leftsided .postprofile {
+	border-right: 1px solid #d5dbe0 !important;
 }
 
-.pm .postprofile {
-	border-color: #DDDDDD;
+.postprofile .avatar img {
+	background-color: white;
+	border: 1px solid #d3d9de;
+	box-shadow: 0 0 7px grey;
+}
+
+.postprofile {
+	color: #666666;
+	border-color: #999999;
 }
 
 .postprofile strong {
@@ -572,7 +648,7 @@ fieldset.polls dd div {
 }
 
 .online {
-	background-image: url("./en/icon_user_online.gif");
+	background-image: url("./en/icon_user_online.png");
 }
 
 dd.profile-warnings {
@@ -583,38 +659,39 @@ dd.profile-warnings {
 --------------------------------------------------------------
 Colours and backgrounds for buttons.css
 -------------------------------------------------------------- */
+
 .button {
 	border-color: #C7C3BF;
 	background-color: #E9E9E9; /* Old browsers */ /* FF3.6+ */
 	background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #E9E9E9 100%);
-	background-image: linear-gradient(to bottom, #FFFFFF 0%,#E9E9E9 100%); /* W3C */
+	background-image: linear-gradient(to bottom, #FFFFFF 0%, #E9E9E9 100%); /* W3C */
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#E9E9E9',GradientType=0 ); /* IE6-9 */
 	box-shadow: 0 0 0 1px #FFFFFF inset;
 	-webkit-box-shadow: 0 0 0 1px #FFFFFF inset;
-	color: #D31141;
+	color: #663399;
 }
 
 .button:hover,
 .button:focus {
-	border-color: #0A8ED0;
+	border-color: #663399;
 	background-color: #FFFFFF; /* Old browsers */ /* FF3.6+ */
 	background-image: -webkit-linear-gradient(top, #E9E9E9 0%, #FFFFFF 100%);
-	background-image: linear-gradient(to bottom, #E9E9E9 0%,#FFFFFF 100%); /* W3C */
+	background-image: linear-gradient(to bottom, #E9E9E9 0%, #FFFFFF 100%); /* W3C */
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E9E9E9', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
 	text-shadow: 1px 1px 0 #FFFFFF, -1px -1px 0 #FFFFFF, -1px -1px 0 rgba(188, 42, 77, 0.2);
+	color: #ff6633;
 }
 
-
 .button .icon,
 .button-secondary {
-	color: #8f8f8f;
+	color: #663399;
 }
 
 .button-secondary:focus,
 .button-secondary:hover,
 .button:focus .icon,
 .button:hover .icon {
-	color: #0A8ED0;
+	color: #ff6633;
 }
 
 .button-search:hover,
@@ -669,7 +746,7 @@ Colours and backgrounds for buttons.css
 }
 
 .search-header {
-	box-shadow: 0 0 10px #0075B0;
+	box-shadow: 0 0 50px #999999;
 }
 
 /* Icon images
@@ -744,7 +821,6 @@ Colours and backgrounds for buttons.css
 .topic_unread_locked				{ background-image: url("./images/topic_unread_locked.gif"); }
 .topic_unread_locked_mine			{ background-image: url("./images/topic_unread_locked_mine.gif"); }
 
-
 /*
 --------------------------------------------------------------
 Colours and backgrounds for cp.css
@@ -763,7 +839,7 @@ Colours and backgrounds for cp.css
 }
 
 ul.cplist {
-	border-top-color: #B5C1CB;
+	border-top-color: #a9b8c2;
 }
 
 .panel-container .panel li.header dd, .panel-container .panel li.header dt {
@@ -776,39 +852,43 @@ ul.cplist {
 }
 
 .cp-main .pm-message {
-	border-color: #DBDEE2;
-	background-color: #FFFFFF;
+	border-color: #333444;
+	background-color: #e0e0e0;
 }
 
 /* CP tabbed menu
 ----------------------------------------*/
+
 .tabs .tab > a {
-	background: #BACCD9;
-	color: #536482;
+	background: #ececec;
+	border: 1px solid #a9b8c2;
+	color: #663399;
 }
 
 .tabs .tab > a:hover {
-	background: #DDEDFB;
-	color: #D31141;
+	background: #dee3e5;
+	color: #ff6633;
 }
 
 .tabs .activetab > a,
 .tabs .activetab > a:hover {
-	background-color: #CADCEB; /* Old browsers */ /* FF3.6+ */
-	background-image: -webkit-linear-gradient(top, #E2F2FF 0%, #CADCEB 100%);
-	background-image: linear-gradient(to bottom, #E2F2FF 0%,#CADCEB 100%); /* W3C */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E2F2FF', endColorstr='#CADCEB',GradientType=0 ); /* IE6-9 */
-	border-color: #CADCEB;
+	background-color: #ced7db; /* Old browsers */ /* FF3.6+ */
+	background-image: -webkit-linear-gradient(top, #ececec 0%, #ced7db 100%);
+	background-image: linear-gradient(to bottom, #ececec 0%, #ced7db 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#ced7db',GradientType=0 ); /* IE6-9 */
+	border-color: #663399;
+	border-bottom: none;
 	box-shadow: 0 1px 1px #F2F9FF inset;
-	color: #333333;
+	color: #663399;
 }
 
 .tabs .activetab > a:hover {
-	color: #000000;
+	color: #a0a0d0;
 }
 
 /* Mini tabbed menu used in MCP
 ----------------------------------------*/
+
 .minitabs .tab > a {
 	background-color: #E1EBF2;
 }
@@ -821,6 +901,7 @@ ul.cplist {
 
 /* Responsive tabs
 ----------------------------------------*/
+
 .responsive-tab .responsive-tab-link:before {
 	border-color: #536482;
 }
@@ -834,45 +915,46 @@ ul.cplist {
 
 /* Link styles for the sub-section links */
 .navigation a {
-	color: #333;
-	background: #CADCEB; /* Old browsers */ /* FF3.6+ */
-	background: -webkit-linear-gradient(left, #B4C4D1 50%, #CADCEB 100%);
-	background: linear-gradient(to right, #B4C4D1 50%,#CADCEB 100%); /* W3C */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B4C4D1', endColorstr='#CADCEB',GradientType=1 ); /* IE6-9 */
+	color: #663399;
+	background: #cbd5db; /* Old browsers */ /* FF3.6+ */
+	background: -webkit-linear-gradient(left, #cbd5db 50%, #ececec 100%);
+	background: linear-gradient(to right, #cbd5db 50%, #ececec 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbd5db', endColorstr='#ececec',GradientType=1 ); /* IE6-9 */
 }
 
 .rtl .navigation a {
-	background: #B4C4D1; /* Old browsers */ /* FF3.6+ */
-	background: -webkit-linear-gradient(left, #CADCEB 50%, #B4C4D1 100%);
-	background: linear-gradient(to right, #CADCEB 50%,#B4C4D1 100%); /* W3C */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CADCEB', endColorstr='#B4C4D1',GradientType=1 ); /* IE6-9 */
+	background: #663399; /* Old browsers */ /* FF3.6+ */
+	background: -webkit-linear-gradient(left, #cbd5db 50%, #ececec 100%);
+	background: linear-gradient(to right, #cbd5db 50%, #ececec 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbd5db', endColorstr='#ececec',GradientType=1 ); /* IE6-9 */
 }
 
 .navigation a:hover {
-	background: #AABAC6;
-	color: #BC2A4D;
+	background: #c7d2d8;
+	color: #ff6633;
 	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
 
 .navigation .active-subsection a {
-	background: #F9F9F9;
-	color: #D31141;
+	background: #ffffff;
+	color: #663399;
 	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
 
 .navigation .active-subsection a:hover {
-	color: #D31141;
+	color: #a0a0d0;
 }
 
 @media only screen and (max-width: 900px), only screen and (max-device-width: 900px)
 {
 	#navigation a, .rtl #navigation a {
-		background: #B2C2CF;
+		background: #cbd5db;
 	}
 }
 
 /* Preferences pane layout
 ----------------------------------------*/
+
 .panel-container h2 {
 	color: #333333;
 }
@@ -882,20 +964,23 @@ ul.cplist {
 }
 
 .cp-main .pm {
-	background-color: #FFFFFF;
+	background-color: #e0e0e0;
 }
 
 /* Friends list */
 .cp-mini {
-	background-color: #EEF5F9;
+	background-color: #ffffff;
+	border: 1px solid #a9b8c2;
 }
 
 dl.mini dt {
+	border-bottom: 1px solid #a9b8c2;
 	color: #425067;
 }
 
 /* PM Styles
 ----------------------------------------*/
+
 /* PM Message history */
 .current {
 	color: #000000 !important;
@@ -947,7 +1032,11 @@ select {
 }
 
 label {
-	color: #425067;
+	color: #333333;
+}
+
+.display-options label {
+	color: #efefef;
 }
 
 option.disabled-option {
@@ -956,6 +1045,7 @@ option.disabled-option {
 
 /* Definition list layout for forms
 ---------------------------------------- */
+
 dd label {
 	color: #333;
 }
@@ -995,8 +1085,9 @@ fieldset.quick-login input.inputbox {
 
 /* Input field styles
 ---------------------------------------- */
+
 .inputbox {
-	background-color: #FFFFFF;
+	background-color: #f5f5f5;
 	border-color: #B4BAC0;
 	color: #333333;
 }
@@ -1025,7 +1116,6 @@ fieldset.quick-login input.inputbox {
 	color: transparent;
 }
 
-
 /* Form button styles
 ---------------------------------------- */
 
@@ -1033,7 +1123,7 @@ a.button1, input.button1, input.button3, a.button2, input.button2 {
 	color: #000;
 	background-color: #EFEFEF; /* Old browsers */ /* FF3.6+ */
 	background-image: -webkit-linear-gradient(top, #D2D2D2 0%, #EFEFEF 100%);
-	background-image: linear-gradient(to bottom, #D2D2D2 0%,#EFEFEF 100%); /* W3C */
+	background-image: linear-gradient(to bottom, #D2D2D2 0%, #EFEFEF 100%); /* W3C */
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D2D2D2', endColorstr='#EFEFEF',GradientType=0 ); /* IE6-9 */
 }
 
@@ -1061,7 +1151,7 @@ a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, inpu
 	color: #D31141;
 	background-color: #D2D2D2; /* Old browsers */ /* FF3.6+ */
 	background-image: -webkit-linear-gradient(top, #EFEFEF 0%, #D2D2D2 100%);
-	background-image: linear-gradient(to bottom, #EFEFEF 0%,#D2D2D2 100%); /* W3C */
+	background-image: linear-gradient(to bottom, #EFEFEF 0%, #D2D2D2 100%); /* W3C */
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EFEFEF', endColorstr='#D2D2D2',GradientType=0 ); /* IE6-9 */
 }
 
@@ -1077,10 +1167,12 @@ input.disabled {
 
 /* jQuery popups
 ---------------------------------------- */
+
 .phpbb_alert {
 	background-color: #FFFFFF;
 	border-color: #999999;
 }
+
 .darken {
 	background-color: #000000;
 }
@@ -1095,7 +1187,7 @@ input.disabled {
 }
 
 .dropdown-extended ul li:hover {
-	background-color: #CFE1F6;
+	background-color: #e5e8ea;
 	color: #000000;
 }
 
@@ -1111,9 +1203,9 @@ input.disabled {
 
 .dropdown-extended .header {
 	background-color: #F1F8FF; /* Old browsers */ /* FF3.6+ */
-	background-image: -webkit-linear-gradient(top, #F1F8FF 0%, #CADCEB 100%);
-	background-image: linear-gradient(to bottom, #F1F8FF 0%,#CADCEB 100%); /* W3C */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1F8FF', endColorstr='#CADCEB',GradientType=0 ); /* IE6-9 */
+	background-image: -webkit-linear-gradient(top, #F1F8FF 0%, #e5e8ea 100%);
+	background-image: linear-gradient(to bottom, #F1F8FF 0%, #e5e8ea 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1F8FF', endColorstr='#e5e8ea',GradientType=0 ); /* IE6-9 */
 }
 
 .dropdown .pointer {
@@ -1129,7 +1221,7 @@ input.disabled {
 }
 
 .dropdown .dropdown-contents {
-	background: #fff;
+	background: #000000;
 	border-color: #B9B9B9;
 	box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
 }
@@ -1138,6 +1230,10 @@ input.disabled {
 	box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2);
 }
 
+.dropdown-contents a {
+	color: #a0a0d0;
+}
+
 .dropdown li, .dropdown li li {
 	border-color: #DCDCDC;
 }

diff --git a/theme/common.css b/theme/common.css
index a0dc5e043..79a9fa86b 100644
--- a/theme/common.css
+++ b/theme/common.css
@@ -11,7 +11,7 @@ body {
 	font-size: 10px;
 	line-height: normal;
 	margin: 0;
-	padding: 12px 0;
+	padding: 0;
 	word-wrap: break-word;
 	-webkit-print-color-adjust: exact;
 }
@@ -138,18 +138,10 @@ a:hover	{ text-decoration: underline; }
 /* Main blocks
 ---------------------------------------- */
 .wrap {
-	border: 1px solid transparent;
-	border-radius: 8px;
 	margin: 0 auto;
-	max-width: 1152px;
+	max-width: 100%;
 	min-width: 625px;
-	padding: 15px;
-}
-
-@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px) {
-	.wrap {
-		margin: 0 12px;
-	}
+	padding: 0 10px 10px
 }
 
 .page-body {
@@ -168,7 +160,8 @@ a:hover	{ text-decoration: underline; }
 .logo {
 	float: left;
 	width: auto;
-	padding: 10px 13px 0 10px;
+	max-height: 109px;
+	padding: 0 0;
 }
 
 .logo:hover {
@@ -177,8 +170,8 @@ a:hover	{ text-decoration: underline; }
 
 .site_logo {
 	display: inline-block;
-	width: 149px;
-	height: 52px;
+	height: 109px;
+	width: 532px;
 }
 
 /* Site description and logo */
@@ -191,45 +184,33 @@ a:hover	{ text-decoration: underline; }
 	margin-right: 0;
 }
 
-/* Round cornered boxes and backgrounds
+/* Boxes and Backgrounds
 ---------------------------------------- */
 .headerbar {
-	margin-bottom: 4px;
-	padding: 5px;
-	border-radius: 7px;
+	margin: 0 auto;
+	max-width: 100%;
+	padding: 0 0;
 }
 
 .navbar {
-	padding: 3px 10px;
-	border-radius: 7px;
-}
-
-.forabg {
-	margin-bottom: 4px;
-	padding: 5px;
-	clear: both;
-	border-radius: 7px;
+	padding: 0 5px;
 }
 
-.forumbg {
+.forabg, .forumbg {
 	margin-bottom: 4px;
-	padding: 5px;
 	clear: both;
-	border-radius: 7px;
 }
 
 .panel {
 	margin-bottom: 4px;
 	padding: 5px 10px;
-	border-radius: 7px;
 }
 
 .post {
-	padding: 5px 10px;
+	padding: 5px 5px;
 	margin-bottom: 4px;
 	background-repeat: no-repeat;
 	background-position: 100% 0;
-	border-radius: 7px;
 	position: relative;
 }
 
@@ -237,6 +218,21 @@ a:hover	{ text-decoration: underline; }
 	margin: 5px 5px 2px 5px;
 }
 
+.stats-area {
+	margin: 2px 0 1px;
+}
+
+.stats-header h3 {
+	margin: 0 !important;
+	padding: 8px 10px;
+	text-align: center;
+	text-transform: uppercase;
+}
+
+.stats-data {
+	padding: 0 10px 5px;
+}
+
 /* Horizontal lists
 ----------------------------------------*/
 .navbar ul.linklist {
@@ -667,7 +663,7 @@ table.table1 tbody th {
 
 /* Specific column styles */
 table.table1 .name		{ text-align: left; }
-table.table1 .center		{ text-align: center; }
+table.table1 .center	{ text-align: center; }
 table.table1 .reportby	{ width: 15%; }
 table.table1 .posts		{ text-align: center; width: 7%; }
 table.table1 .joined	{ text-align: left; width: 15%; }
@@ -983,7 +979,6 @@ fieldset.fields1 dl.pmlist dd.recipients {
 .copyright {
 	font-size: 10px;
 	text-align: center;
-	padding: 10px;
 }
 
 .footer-row {

diff --git a/theme/content.css b/theme/content.css
index 807633864..1e05211de 100644
--- a/theme/content.css
+++ b/theme/content.css
@@ -100,12 +100,14 @@ li.row strong {
 li.header dt, li.header dd {
 	line-height: 1em;
 	border-left-width: 0;
-	margin: 2px 0 4px 0;
+	margin: 8px 0 6px 0;
 	padding-top: 2px;
 	padding-bottom: 2px;
 	font-size: 1em;
-	font-family: Arial, Helvetica, sans-serif;
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	text-align: center;
 	text-transform: uppercase;
+	font-weight: bold;
 }
 
 li.header dt {
@@ -136,8 +138,6 @@ li.header dl.row-item dt .list-inner {
 }
 
 /* Forum list column styles */
-.row .list-inner { padding: 4px 0; }
-
 dl.row-item {
 	background-position: 10px 50%;		/* Position of folder icon */
 	background-repeat: no-repeat;
@@ -228,10 +228,40 @@ dd.option {
 
 /* Post body styles
 ----------------------------------------*/
+#topic-header {
+	display: block;
+	font-weight: bold;
+	text-transform: uppercase;
+}
+
+#topic-header .post.has-profile {
+	border: none;
+}
+
+.topic-header-title, .topic-header-author {
+	text-align: center;
+}
+
+.topic-header-title {
+	width: 77%;
+}
+
+.topic-header-author {
+	border: none !important;
+	min-height: 0px;
+	width: 18%;
+}
+
+.postprofile.topic-header-author {
+	margin: 6px 0 0 0;
+	min-height: 0px;
+	width: 140px;
+}
+
 .postbody {
-	padding: 0;
+	padding: 5px;
 	line-height: 1.48em;
-	width: 76%;
+	width: 100%;
 	float: left;
 	position: relative;
 }
@@ -242,13 +272,13 @@ dd.option {
 
 .postbody h3.first {
 	/* The first post on the page uses this */
-	font-size: 1.7em;
+	font-size: 1.2em;
 }
 
 .postbody h3 {
 	/* Postbody requires a different h3 format - so change it here */
 	float: left;
-	font-size: 1.5em;
+	font-size: 1.2em;
 	padding: 2px 0 0 0;
 	margin-top: 0 !important;
 	margin-bottom: 0.3em !important;
@@ -701,15 +731,14 @@ fieldset.polls dd div {
 	margin: 5px 0 10px 0;
 	min-height: 80px;
 	border: 1px solid transparent;
-	border-width: 0 0 0 1px;
-	width: 22%;
-	float: right;
+	border-width: 1px 1px 0 0;
+	width: 140px;
+	float: left;
 	display: inline;
 }
 
 .postprofile dd, .postprofile dt {
 	line-height: 1.2em;
-	margin-left: 8px;
 }
 
 .postprofile dd {
@@ -721,7 +750,7 @@ fieldset.polls dd div {
 	font-weight: normal;
 }
 
-.postprofile dt.no-profile-rank, .postprofile dd.profile-rank, .postprofile .search-result-date {
+.postprofile dt.no-profile-rank, .postprofile .search-result-date {
 	margin-bottom: 10px;
 }
 
@@ -731,6 +760,22 @@ fieldset.polls dd div {
 	overflow: hidden;
 }
 
+.avatar-container {
+	max-width: 130px;
+}
+
+.has-profile, .has-avatar {
+	padding-top: 5px;
+}
+
+.no-profile, .no-avatar {
+	padding-top: 5px;
+}
+
+.profile-rank {
+	padding-bottom: 5px;
+}
+
 .postprofile .avatar {
 	display: block;
 	float: left;
@@ -743,6 +788,10 @@ fieldset.polls dd div {
 	max-width: 100%;
 }
 
+.profile-posts {
+	padding-top: 5px;
+}
+
 .postprofile .profile-posts a {
 	font-weight: normal;
 }

diff --git a/theme/en/icon_user_online.png b/theme/en/icon_user_online.png
new file mode 100644
index 000000000..488e3bb99
Binary files /dev/null and b/theme/en/icon_user_online.png differ

diff --git a/theme/en/stylesheet.css b/theme/en/stylesheet.css
index 604b29948..faab4aa73 100644
--- a/theme/en/stylesheet.css
+++ b/theme/en/stylesheet.css
@@ -1,2 +1,2 @@
 /* Online image */
-.online { background-image: url("./icon_user_online.gif"); }
+.online { background-image: url("./icon_user_online.png"); }

diff --git a/theme/images/cellpic3.gif b/theme/images/cellpic3.gif
new file mode 100644
index 000000000..4099d1cc9
Binary files /dev/null and b/theme/images/cellpic3.gif differ

diff --git a/theme/images/site_logo.png b/theme/images/site_logo.png
new file mode 100644
index 000000000..f0daf7b49
Binary files /dev/null and b/theme/images/site_logo.png differ

diff --git a/theme/responsive.css b/theme/responsive-pm.css
similarity index 87%
copy from theme/responsive.css
copy to theme/responsive-pm.css
index ca4054c27..a3e31f057 100644
--- a/theme/responsive.css
+++ b/theme/responsive-pm.css
@@ -7,6 +7,7 @@
 	}
 }
 
+
 /* Notifications list
 ----------------------------------------*/
 @media (max-width: 350px) {
@@ -25,16 +26,16 @@
 	}
 
 	.action-bar .search-box .inputbox ::-moz-placeholder {
-    	content: "Search...";
-  	}
+		content: "Search...";
+	}
 
-  	.action-bar .search-box .inputbox :-ms-input-placeholder {
-  		content: "Search...";
-  	}
+	.action-bar .search-box .inputbox :-ms-input-placeholder {
+		content: "Search...";
+	}
 
-  	.action-bar .search-box .inputbox ::-webkit-input-placeholder {
-  		content: "Search...";
-  	}
+	.action-bar .search-box .inputbox ::-webkit-input-placeholder {
+		content: "Search...";
+	}
 }
 
 @media (max-width: 500px) {
@@ -72,7 +73,7 @@
 
 	.action-bar > div {
 		margin-bottom: 5px;
- 	}
+	}
 
 	.action-bar > .pagination {
 		float: none;
@@ -119,6 +120,8 @@
 }
 
 @media (max-width: 700px) {
+	#topic-header { display: none; }
+
 	.responsive-hide { display: none !important; }
 	.responsive-show { display: block !important; }
 	.responsive-show-inline { display: inline !important; }
@@ -554,30 +557,92 @@
 }
 
 @media (min-width: 700px) {
-	.postbody { width: 70%; }
+	.postbody { width: 100%; }
 }
 
-@media (min-width: 850px) {
+@media (min-width: 701px) {
 	.postbody { width: 76%; }
 }
 
-@media (max-width: 850px) {
-	.postprofile { width: 28%; }
+@media (min-width: 750px) {
+	.postbody { width: 77%; }
+}
+
+@media (min-width: 800px) {
+	.postbody { width: 79%; }
+}
+
+@media (min-width: 850px) {
+	.postbody { width: 80%; }
+}
+
+@media (min-width: 900px) {
+	.postbody { width: 81%; }
+}
+
+@media (min-width: 901px) {
+	.postbody { width: 77%; }
+}
+
+@media (min-width: 950px) {
+	.postbody { width: 78%; }
+}
+
+@media (min-width: 1000px) {
+	.postbody { width: 79%; }
+}
+
+@media (min-width: 1100px) {
+	.postbody { width: 81%; }
+}
+
+@media (min-width: 1200px) {
+	.postbody { width: 83%; }
+}
+
+@media (min-width: 1300px) {
+	.postbody { width: 84%; }
+}
+
+@media (min-width: 1400px) {
+	.postbody { width: 85%; }
+}
 
+@media (min-width: 1500px) {
+	.postbody { width: 86%; }
+}
+
+@media (min-width: 1600px) {
+	.postbody { width: 87%; }
+}
+
+@media (min-width: 1700px) {
+	.postbody { width: 88%; }
+}
+
+@media (min-width: 1800px) {
+	.postbody { width: 89%; }
+}
+
+@media (min-width: 1900px) {
+	.postbody { width: 89%; }
+}
 
+@media (min-width: 2000px) {
+	.postbody { width: 90%; }
 }
 
 @media (min-width: 701px) and (max-width: 950px) {
 
 	ul.topiclist dt {
-    	margin-right: -410px;
+		margin-right: -410px;
 	}
 
 	ul.topiclist dt .list-inner {
-    	margin-right: 410px;
+		margin-right: 410px;
 	}
 
 	dd.posts, dd.topics, dd.views {
-    	width: 80px;
+		width: 80px;
 	}
 }

diff --git a/theme/responsive.css b/theme/responsive.css
index ca4054c27..9d603e357 100644
--- a/theme/responsive.css
+++ b/theme/responsive.css
@@ -7,6 +7,7 @@
 	}
 }
 
+
 /* Notifications list
 ----------------------------------------*/
 @media (max-width: 350px) {
@@ -119,6 +120,8 @@
 }
 
 @media (max-width: 700px) {
+	#topic-header { display: none; }
+
 	.responsive-hide { display: none !important; }
 	.responsive-show { display: block !important; }
 	.responsive-show-inline { display: inline !important; }
@@ -554,30 +557,88 @@
 }
 
 @media (min-width: 700px) {
-	.postbody { width: 70%; }
+	.postbody { width: 100%; }
 }
 
-@media (min-width: 850px) {
+@media (min-width: 701px) {
 	.postbody { width: 76%; }
 }
 
-@media (max-width: 850px) {
-	.postprofile { width: 28%; }
+@media (min-width: 750px) {
+	.postbody { width: 78%; }
+}
+
+@media (min-width: 800px) {
+	.postbody { width: 79%; }
+}
+
+@media (min-width: 850px) {
+	.postbody { width: 80%; }
+}
+
+@media (min-width: 900px) {
+	.postbody { width: 81%; }
+}
+
+@media (min-width: 950px) {
+	.postbody { width: 82%; }
+}
+
+@media (min-width: 1000px) {
+	.postbody { width: 83%; }
+}
+
+@media (min-width: 1100px) {
+	.postbody { width: 84%; }
+}
+
+@media (min-width: 1200px) {
+	.postbody { width: 85%; }
+}
+
+@media (min-width: 1300px) {
+	.postbody { width: 86%; }
+}
+
+@media (min-width: 1400px) {
+	.postbody { width: 87%; }
+}
+
+@media (min-width: 1500px) {
+	.postbody { width: 88%; }
+}
+
+@media (min-width: 1600px) {
+	.postbody { width: 89%; }
+}
+
+@media (min-width: 1700px) {
+	.postbody { width: 90%; }
+}
+
+@media (min-width: 1800px) {
+	.postbody { width: 91%; }
+}
 
+@media (min-width: 1900px) {
+	.postbody { width: 92%; }
+}
 
+@media (min-width: 2000px) {
+	.postbody { width: 93%; }
 }
 
 @media (min-width: 701px) and (max-width: 950px) {
 
 	ul.topiclist dt {
-    	margin-right: -410px;
+		margin-right: -410px;
 	}
 
 	ul.topiclist dt .list-inner {
-    	margin-right: 410px;
+		margin-right: 410px;
 	}
 
 	dd.posts, dd.topics, dd.views {
-    	width: 80px;
+		width: 80px;
 	}
 }