Merge pull request #1719 from cyberalien/ticket/11552

Responsive design for prosilver

phpBB/assets/javascript/core.js

@@ -624,8 +624,7 @@ phpbb.resizeTextArea = function(items, options) {
 	function resetAutoResize(item) 
 	{
 		var $item = $(item);
-		if ($item.hasClass('auto-resized'))
+		if ($item.hasClass('auto-resized')) {
-		{
 			$(item).css({height: '', resize: ''}).removeClass('auto-resized');
 			configuration.resetCallback.call(item, $item);
 		}
@@ -635,14 +634,14 @@ phpbb.resizeTextArea = function(items, options) {
 	{
 		function setHeight(height)
 		{
+			height += parseInt($item.css('height')) - $item.height();
 			$item.css({height: height + 'px', resize: 'none'}).addClass('auto-resized');
 			configuration.resizeCallback.call(item, $item);
 		}
 
 		var windowHeight = $(window).height();
 
-		if (windowHeight < configuration.minWindowHeight)
+		if (windowHeight < configuration.minWindowHeight) {
-		{
 			resetAutoResize(item);
 			return;
 		}
@@ -652,12 +651,14 @@ phpbb.resizeTextArea = function(items, options) {
 			height = parseInt($item.height()),
 			scrollHeight = (item.scrollHeight) ? item.scrollHeight : 0;
 
-		if (height > maxHeight)
+		if (height < 0) {
-		{
+			return;
+		}
+
+		if (height > maxHeight) {
 			setHeight(maxHeight);
 		}
-		else if (scrollHeight > (height + 5))
+		else if (scrollHeight > (height + 5)) {
-		{
 			setHeight(Math.min(maxHeight, scrollHeight));
 		}
 	}
@@ -670,8 +671,7 @@ phpbb.resizeTextArea = function(items, options) {
 
 	$(window).resize(function() {
 		items.each(function() {
-			if ($(this).hasClass('auto-resized'))
+			if ($(this).hasClass('auto-resized')) {
-			{
 				autoResize(this);
 			}
 		});

phpBB/styles/prosilver/template/forum_fn.js

@@ -414,6 +414,9 @@ function insert_single_user(formId, user)
 */
 (function($) {
 	$(document).ready(function() {
+		// Swap .nojs and .hasjs
+		$('#phpbb.nojs').toggleClass('nojs hasjs');
+
 		// Focus forms
 		$('form[data-focus]:first').each(function() {
 			$('#' + this.getAttribute('data-focus')).focus();
@@ -435,8 +438,396 @@ function insert_single_user(formId, user)
 		delete test;
 
 		if (oldBrowser) {
-			// Fix .linkslist.bulletin lists
+			// Fix .linklist.bulletin lists
 			$('ul.linklist.bulletin li:first-child, ul.linklist.bulletin li.rightside:last-child').addClass('no-bulletin');
+
+			// Do not run functions below for old browsers
+			return;
 		}
+
+		// Adjust topiclist lists with check boxes
+		$('ul.topiclist dd.mark').siblings('dt').children('.list-inner').addClass('with-mark');
+
+		// Resize navigation block to keep all links on same line
+		$('.navlinks').each(function() {
+			var $this = $(this),
+				left = $this.children().not('.rightside'),
+				right = $this.children('.rightside');
+
+			if (left.length !== 1 || !right.length) return;
+
+			function resize() {
+				var width = 0,
+					diff = left.outerWidth(true) - left.width();
+
+				right.each(function() {
+					width += $(this).outerWidth(true);
+				});
+				left.css('max-width', Math.floor($this.width() - width - diff) + 'px');
+			}
+
+			resize();
+			$(window).resize(resize);
+		});
+
+		// Responsive breadcrumbs
+		$('.breadcrumbs:not(.skip-responsive, .linklist.leftside .breadcrumbs)').each(function() {
+			var $this = $(this),
+				$body = $('body'),
+				links = $this.find('.crumb'),
+				length = links.length,
+				classes = ['wrapped-wide', 'wrapped-medium', 'wrapped-small'],
+				classesLength = classes.length,
+				maxHeight = 0,
+				lastWidth = false,
+				wrapped = false;
+
+			// Test height by setting nowrap
+			$this.css('white-space', 'nowrap');
+			maxHeight = $this.height() + 1;
+			$this.css('white-space', '');
+
+			// Set tooltips
+			$this.find('a').each(function() {
+				var $link = $(this);
+				$link.attr('title', $link.text());
+			});
+
+			// Funciton that checks breadcrumbs
+			function check() {
+				var height = $this.height(),
+					width = $body.width(),
+					link, i, j;
+
+				if (height <= maxHeight) {
+					if (!wrapped || lastWidth === false || lastWidth >= width) {
+						lastWidth = width;
+						return;
+					}
+				}
+				lastWidth = width;
+
+				if (wrapped) {
+					$this.removeClass('wrapped').find('.crumb.wrapped').removeClass('wrapped ' + classes.join(' '));
+					wrapped = false;
+					if ($this.height() <= maxHeight) {
+						return;
+					}
+				}
+
+				wrapped = true;
+				$this.addClass('wrapped');
+				if ($this.height() <= maxHeight) {
+					return;
+				}
+
+				for (i = 0; i < classesLength; i ++) {
+					for (j = length - 1; j >= 0; j --) {
+						links.eq(j).addClass('wrapped ' + classes[i]);
+						if ($this.height() <= maxHeight) {
+							return;
+						}
+					}
+				}
+			}
+
+			// Run function and set event
+			check();
+			$(window).resize(check);
+		});
+
+		// Responsive tables
+		$('table.table1').not('.not-responsive').each(function() {
+			var $this = $(this),
+				th = $this.find('thead > tr > th'),
+				columns = th.length,
+				headers = [],
+				totalHeaders = 0,
+				i, headersLength;
+
+			// Find each header
+			th.each(function() {
+				var cell = $(this),
+					colspan = parseInt(cell.attr('colspan')),
+					dfn = cell.attr('data-dfn'),
+					text = dfn ? dfn : cell.text();
+
+				colspan = isNaN(colspan) || colspan < 1 ? 1 : colspan;
+
+				for (i=0; i<colspan; i++) {
+					headers.push(text);
+				}
+				totalHeaders ++;
+			});
+			
+			headersLength = headers.length;
+
+			// Add header text to each cell as <dfn>
+			$this.addClass('responsive');
+
+			if (totalHeaders < 2) {
+				$this.addClass('show-header');
+				return;
+			}
+
+			$this.find('tbody > tr').each(function() {
+				var row = $(this),
+					cells = row.children('td'),
+					column = 0;
+
+				if (cells.length == 1) {
+					row.addClass('big-column');
+					return;
+				}
+
+				cells.each(function() {
+					var cell = $(this),
+						colspan = parseInt(cell.attr('colspan')),
+						text = cell.text().trim();
+
+					if (headersLength <= column) {
+						return;
+					}
+
+					if (text.length && text !== '-') {
+						cell.prepend('<dfn style="display: none;">' + headers[column] + '</dfn>');
+					}
+					else {
+						cell.addClass('empty');
+					}
+
+					colspan = isNaN(colspan) || colspan < 1 ? 1 : colspan;
+					column += colspan;
+				});
+			});
+		});
+
+		// Responsive link lists
+		$('.linklist:not(.navlinks, .skip-responsive), .postbody ul.profile-icons:not(.skip-responsive)').each(function() {
+			var $this = $(this),
+				$body = $('body'),
+				links = $this.children().not('.skip-responsive'),
+				html = '<li class="responsive-menu" style="display:none;"><a href="javascript:void(0);" class="responsive-menu-link">&nbsp;</a><ul class="responsive-popup" style="display:none;" /></li>',
+				// List of items that should be hidden last
+				filterString = '.pagination, .icon-notifications, .icon-pm, .icon-logout, .icon-login, .mark-read, .breadcrumbs, .edit-icon, .quote-icon',
+				filtered = links.filter(filterString);
+
+			if (links.is('.rightside'))
+			{
+				links.filter('.rightside:first').before(html);
+			}
+			else
+			{
+				$this.append(html);
+			}
+
+			var toggle = $this.children('.responsive-menu'),
+				toggleLink = toggle.find('a.responsive-menu-link'),
+				menu = toggle.find('ul.responsive-popup'),
+				lastWidth = false,
+				compact = false,
+				responsive = false,
+				copied = false;
+
+			function check() {
+				var width = $body.width();
+				if (responsive && width <= lastWidth) {
+					return;
+				}
+
+				// Reset responsive and compact layout
+				if (responsive) {
+					responsive = false;
+					$this.removeClass('responsive');
+					links.css('display', '');
+					toggle.css('display', 'none');
+				}
+
+				if (compact) {
+					compact = false;
+					$this.removeClass('compact');
+				}
+
+				// Find tallest element
+				var maxHeight = 0;
+				links.each(function() {
+					if (!$(this).height()) return;
+					maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
+				});
+
+				if (maxHeight < 1) {
+					return;
+				}
+
+				// Nothing to resize if block's height is not bigger than tallest element's height
+				if ($this.height() <= maxHeight) {
+					toggle.removeClass('visible');
+					menu.hide();
+					return;
+				}
+
+				// Enable compact layout, find tallest element, compare to height of whole block
+				compact = true;
+				$this.addClass('compact');
+
+				var compactMaxHeight = 0;
+				links.each(function() {
+					if (!$(this).height()) return;
+					compactMaxHeight = Math.max(compactMaxHeight, $(this).outerHeight(true));
+				});
+
+				if ($this.height() <= maxHeight) {
+					toggle.removeClass('visible');
+					menu.hide();
+					return;
+				}
+
+				// Compact layout did not resize block enough, switch to responsive layout
+				compact = false;
+				$this.removeClass('compact');
+				responsive = true;
+
+				if (!copied) {
+					if (menu.parents().is('.rightside')) {
+						menu.addClass('responsive-rightside');
+					}
+					menu.append(links.clone(true));
+					menu.find('li.leftside, li.rightside').removeClass('leftside rightside');
+					menu.find('.inputbox').parents('li:first').css('white-space', 'normal');
+					copied = true;
+				}
+				else {
+					menu.children().css('display', '');
+				}
+
+				toggle.css('display', '');
+				$this.addClass('responsive');
+
+				// Try to not hide filtered items
+				if (filtered.length) {
+					links.not(filterString).css('display', 'none');
+
+					maxHeight = 0;
+					filtered.each(function() {
+						if (!$(this).height()) return;
+						maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
+					});
+
+					if ($this.height() <= maxHeight) {
+						menu.children().filter(filterString).css('display', 'none');
+						return;
+					}
+				}
+
+				links.css('display', 'none');
+			}
+
+			toggleLink.click(function() {
+				if (!responsive) return;
+				if (!toggle.hasClass('visible')) {
+					// Hide other popups
+					$('.responsive-menu.visible').removeClass('visible').find('.responsive-popup').hide();
+				}
+				toggle.toggleClass('visible');
+				menu.toggle();
+			});
+
+			check();
+			$(window).resize(check);
+		});
+
+		// Responsive tabs
+		$('#tabs, #minitabs').not('.skip-responsive').each(function() {
+			var $this = $(this),
+				$body = $('body'),
+				ul = $this.children(),
+				tabs = ul.children().not('.skip-responsive'),
+				links = tabs.children('a'),
+				toggle = ul.append('<li class="responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link"><span>&nbsp;</span></a><ul class="responsive-tabs" style="display:none;" /></li>').find('li.responsive-tab'),
+				toggleLink = toggle.find('a.responsive-tab-link'),
+				menu = toggle.find('ul.responsive-tabs'),
+				maxHeight = 0,
+				lastWidth = false,
+				responsive = false;
+
+			links.each(function() {
+				maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
+			})
+
+			function check() {
+				var width = $body.width(),
+					height = $this.height();
+
+				if (arguments.length == 0 && (!responsive || width <= lastWidth) && height <= maxHeight) {
+					return;
+				}
+
+				tabs.show();
+				toggle.hide();
+
+				lastWidth = width;
+				height = $this.height();
+				if (height <= maxHeight) {
+					responsive = false;
+					return;
+				}
+
+				responsive = true;
+				toggle.show();
+				menu.hide().html('');
+
+				var availableTabs = tabs.filter(':not(.activetab, .responsive-tab)'),
+					total = availableTabs.length,
+					i, tab;
+
+				for (i = total - 1; i >= 0; i --) {
+					tab = availableTabs.eq(i);
+					menu.prepend(tab.clone(true));
+					tab.hide();
+					if ($this.height() <= maxHeight) {
+						menu.find('a').click(function() { check(true); });
+						return;
+					}
+				}
+				menu.find('a').click(function() { check(true); });
+			}
+
+			toggleLink.click(function() {
+				if (!responsive) return;
+				menu.toggle();
+			});
+
+			check(true);
+			$(window).resize(check);
+		});
+
+		// Hide responsive menu and tabs
+		$('#phpbb').click(function(e) {
+			var parents = $(e.target).parents();
+			if (!parents.is('.responsive-menu.visible')) {
+				$('.responsive-menu.visible').removeClass('visible').find('.responsive-popup').hide();
+			}
+			if (!parents.is('.responsive-tab')) {
+				$('.responsive-tabs').hide();
+			}
+		});
+
+		// Hide *CP navigation if there is only 1 item
+		$('#navigation').each(function() {
+			var items = $(this).children('ol, ul').children('li');
+			if (items.length == 1)
+			{
+				$(this).addClass('responsive-hide');
+			}
+		});
+
+		// Hide empty responsive tables
+		$('table.responsive > tbody').each(function() {
+			var items = $(this).children('tr');
+			if (items.length == 0)
+			{
+				$(this).parent('table:first').addClass('responsive-hide');
+			}
+		});
 	});
 })(jQuery);

phpBB/styles/prosilver/template/index_body.html

@@ -1,7 +1,7 @@
 <!-- INCLUDE overall_header.html -->
 
-<p class="{S_CONTENT_FLOW_END}<!-- IF S_USER_LOGGED_IN --> rightside<!-- ENDIF -->"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ELSE -->{CURRENT_TIME}<!-- ENDIF --></p>
+<p class="{S_CONTENT_FLOW_END} responsive-center<!-- IF S_USER_LOGGED_IN --> rightside<!-- ENDIF -->"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ELSE -->{CURRENT_TIME}<!-- ENDIF --></p>
-<!-- IF U_MCP --><p>{CURRENT_TIME} <br />[&nbsp;<a href="{U_MCP}">{L_MCP}</a>&nbsp;]</p><!-- ELSEIF S_USER_LOGGED_IN --><p>{CURRENT_TIME}</p><!-- ENDIF -->
+<!-- IF U_MCP --><p class="responsive-center">{CURRENT_TIME} <br />[&nbsp;<a href="{U_MCP}">{L_MCP}</a>&nbsp;]</p><!-- ELSEIF S_USER_LOGGED_IN --><p>{CURRENT_TIME}</p><!-- ENDIF -->
 
 <!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
 <ul class="linklist bulletin">
@@ -15,7 +15,7 @@
 		<!-- ENDIF -->
 		<li><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
 	<!-- ENDIF -->
-	<!-- IF not S_IS_BOT and U_MARK_FORUMS --><li class="rightside"><a href="{U_MARK_FORUMS}" accesskey="m" data-ajax="mark_forums_read" data-overlay="false">{L_MARK_FORUMS_READ}</a></li><!-- ENDIF -->
+	<!-- IF not S_IS_BOT and U_MARK_FORUMS --><li class="rightside mark-read"><a href="{U_MARK_FORUMS}" accesskey="m" data-ajax="mark_forums_read" data-overlay="false">{L_MARK_FORUMS_READ}</a></li><!-- ENDIF -->
 </ul>
 <!-- ENDIF -->
 

phpBB/styles/prosilver/template/mcp_post.html

@@ -48,6 +48,8 @@
 	<div class="inner">
 
 	<div class="postbody">
+		<h3><a href="{U_VIEW_POST}">{POST_SUBJECT}</a></h3>
+
 		<!-- IF U_EDIT -->
 		<ul class="profile-icons">
 			<li class="edit-icon"><a href="{U_EDIT}" title="{L_EDIT_POST}"><span>{L_EDIT_POST}</span></a></li>
@@ -56,7 +58,6 @@
 
 		<span class="right-box" id="expand"><a href="#post_details" onclick="viewableArea(getElementById('post_details'), true); var rev_text = getElementById('expand').getElementsByTagName('a').item(0).firstChild; if (rev_text.data == '{LA_EXPAND_VIEW}'){rev_text.data = '{LA_COLLAPSE_VIEW}'; } else if (rev_text.data == '{LA_COLLAPSE_VIEW}'){rev_text.data = '{LA_EXPAND_VIEW}'}; return false;">{L_EXPAND_VIEW}</a></span>
 
-		<h3><a href="{U_VIEW_POST}">{POST_SUBJECT}</a></h3>
 		<!-- IF S_PM -->
 		<p class="author">
 			<strong>{L_SENT_AT}{L_COLON}</strong> {POST_DATE}

phpBB/styles/prosilver/template/memberlist_body.html

@@ -28,7 +28,7 @@
 		<div class="panel">
 			<div class="inner">
 
-			<ul class="linklist">
+			<ul class="linklist wrap">
 				<li>
 				<!-- IF U_FIND_MEMBER and not S_SEARCH_USER --><a href="{U_FIND_MEMBER}" id="member_search" data-alt-text="{LA_HIDE_MEMBER_SEARCH}">{L_FIND_USERNAME}</a> &bull; <!-- ELSEIF S_SEARCH_USER and U_HIDE_FIND_MEMBER and not S_IN_SEARCH_POPUP --><a href="{U_HIDE_FIND_MEMBER}" id="member_search" data-alt-text="{LA_FIND_USERNAME}">{L_HIDE_MEMBER_SEARCH}</a> &bull; <!-- ENDIF -->
 				<strong style="font-size: 0.95em;">
@@ -58,7 +58,7 @@
 		<table class="table1" cellspacing="1" id="memberlist">
 		<thead>
 		<tr>
-			<th class="name"><span class="rank-img"><a href="{U_SORT_RANK}">{L_RANK}</a></span><a href="{U_SORT_USERNAME}"><!-- IF S_SHOW_GROUP and .memberrow -->{L_GROUP_LEADER}<!-- ELSE -->{L_USERNAME}<!-- ENDIF --></a></th>
+			<th class="name" data-dfn="{L_RANK}{L_COMMA_SEPARATOR}<!-- IF S_SHOW_GROUP and .memberrow -->{L_GROUP_LEADER}<!-- ELSE -->{L_USERNAME}<!-- ENDIF -->"><span class="rank-img"><a href="{U_SORT_RANK}">{L_RANK}</a></span><a href="{U_SORT_USERNAME}"><!-- IF S_SHOW_GROUP and .memberrow -->{L_GROUP_LEADER}<!-- ELSE -->{L_USERNAME}<!-- ENDIF --></a></th>
 			<th class="posts"><a href="{U_SORT_POSTS}#memberlist">{L_POSTS}</a></th>
 			<th class="info"><a href="{U_SORT_WEBSITE}#memberlist">{L_WEBSITE}</a>{L_COMMA_SEPARATOR}<a href="{U_SORT_LOCATION}">{L_LOCATION}</a></th>
 			<th class="joined"><a href="{U_SORT_JOINED}#memberlist">{L_JOINED}</a></th>
@@ -89,7 +89,7 @@
 	<thead>
 	<tr>
 	<!-- IF not S_LEADERS_SET -->
-		<th class="name"><span class="rank-img"><a href="{U_SORT_RANK}">{L_RANK}</a></span><a href="{U_SORT_USERNAME}"><!-- IF S_SHOW_GROUP -->{L_GROUP_MEMBERS}<!-- ELSE -->{L_USERNAME}<!-- ENDIF --></a></th>
+		<th class="name" data-dfn="{L_RANK}{L_COMMA_SEPARATOR}{L_USERNAME}"><span class="rank-img"><a href="{U_SORT_RANK}">{L_RANK}</a></span><a href="{U_SORT_USERNAME}"><!-- IF S_SHOW_GROUP -->{L_GROUP_MEMBERS}<!-- ELSE -->{L_USERNAME}<!-- ENDIF --></a></th>
 			<th class="posts"><a href="{U_SORT_POSTS}#memberlist">{L_POSTS}</a></th>
 			<th class="info"><a href="{U_SORT_WEBSITE}#memberlist">{L_WEBSITE}</a>{L_COMMA_SEPARATOR}<a href="{U_SORT_LOCATION}">{L_LOCATION}</a></th>
 			<th class="joined"><a href="{U_SORT_JOINED}#memberlist">{L_JOINED}</a></th>

phpBB/styles/prosilver/template/memberlist_leaders.html

@@ -11,7 +11,7 @@
 	<table class="table1" cellspacing="1">
 	<thead>
 	<tr>
-		<th class="name"><span class="rank-img">{L_RANK}&nbsp;</span><!-- IF group.U_GROUP --><a href="{group.U_GROUP}">{group.GROUP_NAME}</a><!-- ELSE -->{group.GROUP_NAME}<!-- ENDIF --></th>
+		<th class="name" data-dfn="{L_RANK}{L_COMMA_SEPARATOR}{L_USERNAME}"><span class="rank-img">{L_RANK}&nbsp;</span><!-- IF group.U_GROUP --><a href="{group.U_GROUP}">{group.GROUP_NAME}</a><!-- ELSE -->{group.GROUP_NAME}<!-- ENDIF --></th>
 		<th class="info">{L_PRIMARY_GROUP}</th>
 		<!-- IF S_DISPLAY_MODERATOR_FORUMS --><th class="info">{L_MODERATOR}</th><!-- ENDIF -->
 	</tr>

phpBB/styles/prosilver/template/memberlist_view.html

@@ -14,7 +14,7 @@
 		</dl>
 	<!-- ENDIF -->
 
-	<dl class="left-box details" style="width: 80%;">
+	<dl class="left-box details profile-details">
 		<dt>{L_USERNAME}{L_COLON}</dt>
 		<dd>
 			<!-- IF USER_COLOR --><span style="color: {USER_COLOR}; font-weight: bold;"><!-- ELSE --><span><!-- ENDIF -->{USERNAME}</span>
@@ -105,7 +105,7 @@
 
 		<h3>{L_SIGNATURE}</h3>
 
-		<div class="postbody"><div class="signature" style="border-top:none; margin-top: 0;">{SIGNATURE}</div></div>
+		<div class="postbody"><div class="signature standalone">{SIGNATURE}</div></div>
 
 	<span class="clear"></span></div>
 </div>

phpBB/styles/prosilver/template/overall_footer.html

@@ -6,7 +6,7 @@
 		<div class="inner">
 
 		<ul class="linklist leftside bulletin">
-			<li class="icon-home"><!-- IF U_SITE_HOME --><a href="{U_SITE_HOME}">{L_SITE_HOME}</a> <strong>&#8249;</strong> <!-- ENDIF --><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a>
+			<li class="icon-home breadcrumbs"><!-- IF U_SITE_HOME --><span class="crumb"><a href="{U_SITE_HOME}">{L_SITE_HOME}</a> <strong>&#8249;</strong></span> <!-- ENDIF --><span class="crumb"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a></span>
 				<!-- EVENT overall_footer_breadcrumb_append -->
 			</li>
 			<!-- IF not S_IS_BOT -->

phpBB/styles/prosilver/template/overall_header.html

@@ -2,6 +2,7 @@
 <html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
 <head>
 <meta charset="utf-8">
+<meta name="viewport" content="width=device-width" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 {META}
@@ -28,6 +29,7 @@
 <!-- IF S_ALLOW_CDN --><link href="//fonts.googleapis.com/css?family=Open+Sans:600&amp;subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese" rel="stylesheet" type="text/css" media="screen, projection" /><!-- ENDIF -->
 <link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
 <link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
+<link href="{T_THEME_PATH}/responsive.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 700px), only screen and (max-device-width: 700px)" />
 
 <!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
 	<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" type="text/css" media="screen, projection" />
@@ -47,7 +49,7 @@
 {$STYLESHEETS}
 
 </head>
-<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
+<body id="phpbb" class="nojs section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
 
 <div id="wrap">
 	<a id="top" accesskey="t"></a>
@@ -82,9 +84,9 @@
 
 			<ul class="linklist navlinks">
 				<!-- DEFINE $MICRODATA = ' itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""' -->
-				<li class="icon-home"><!-- IF U_SITE_HOME --><a href="{U_SITE_HOME}"{$MICRODATA}>{L_SITE_HOME}</a> <strong>&#8249;</strong> <!-- ENDIF -->
+				<li class="icon-home breadcrumbs"><!-- IF U_SITE_HOME --><span class="crumb"><a href="{U_SITE_HOME}"{$MICRODATA}>{L_SITE_HOME}</a> <strong>&#8249;</strong></span> <!-- ENDIF -->
-					<a href="{U_INDEX}" accesskey="h"{$MICRODATA}>{L_INDEX}</a> 
+					<span class="crumb"><a href="{U_INDEX}" accesskey="h"{$MICRODATA}>{L_INDEX}</a></span> 
-					<!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}"{$MICRODATA}>{navlinks.FORUM_NAME}</a><!-- END navlinks -->
+					<!-- BEGIN navlinks --> <span class="crumb"><strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}"{$MICRODATA}>{navlinks.FORUM_NAME}</a></span><!-- END navlinks -->
 					<!-- EVENT overall_header_breadcrumb_append -->
 				</li>
 
@@ -92,13 +94,14 @@
 				<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
 				<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
 				<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
+				<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH --><li class="responsive-search rightside" style="display: none;"><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH}</a></li><!-- ENDIF -->
 			</ul>
 
 			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
 			<ul class="linklist leftside bulletin">
 				<!-- IF S_NOTIFICATIONS_DISPLAY -->
-				<li class="icon-notification">
+				<li class="icon-notification skip-responsive">
-					<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button">{L_NOTIFICATIONS} [<strong>{NOTIFICATIONS_COUNT}</strong>]</a>
+					<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button"><span>{L_NOTIFICATIONS} [</span><strong>{NOTIFICATIONS_COUNT}</strong><span>]</span></a>
 					<div id="notification_list" class="notification_list">
 						<div class="pointer"><div class="pointer_inner"></div></div>
 						<div class="header">
@@ -137,7 +140,7 @@
 				<!-- ENDIF -->
 				<!-- IF S_DISPLAY_PM -->
 					<li class="icon-pm">
-						<a href="{U_PRIVATEMSGS}">{L_PRIVATE_MESSAGES} [<strong>{PRIVATE_MESSAGE_COUNT}</strong>]</a>
+						<a href="{U_PRIVATEMSGS}"><span>{L_PRIVATE_MESSAGES} [</span><strong>{PRIVATE_MESSAGE_COUNT}</strong><span>]</span></a>
 					</li>
 				<!-- ENDIF -->
 				<li class="icon-ucp">
@@ -152,7 +155,7 @@
 			</ul>
 			<!-- ENDIF -->
 
-			<ul class="linklist rightside">
+			<ul class="linklist rightside<!-- IF S_IS_BOT or not S_USER_LOGGED_IN --> fullwidth<!-- ENDIF -->">
 				<!-- EVENT overall_header_navigation_prepend -->
 				<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
 				<!-- IF not S_IS_BOT -->

phpBB/styles/prosilver/template/posting_editor.html

@@ -31,7 +31,7 @@
 			<!-- ENDIF -->
 			<!-- IF not S_EDIT_POST -->
 			<dl class="pmlist">
-				<dt><textarea id="username_list" name="username_list" class="inputbox" cols="50" rows="2" tabindex="1"></textarea></dt>
+				<dt><label>{L_TO}{L_COLON}<textarea id="username_list" name="username_list" class="inputbox" cols="50" rows="2" tabindex="1"></textarea></label></dt>
 				<dd><span><a href="{U_FIND_USERNAME}" onclick="find_username(this.href); return false;">{L_FIND_USERNAME}</a></span></dd>
 				<dd><input type="submit" name="add_to" value="{L_ADD}" class="button2" tabindex="1" /></dd>
 				<dd><input type="submit" name="add_bcc" value="{L_ADD_BCC}" class="button2" tabindex="1" /></dd>
@@ -111,14 +111,16 @@
 		<!-- ENDIF -->
 
 		<!-- IF BBCODE_STATUS -->
-		<!-- IF .smiley --><hr /><!-- ENDIF -->
+		<div class="bbcode-status">
-		{BBCODE_STATUS}<br />
+			<!-- IF .smiley --><hr /><!-- ENDIF -->
-		<!-- IF S_BBCODE_ALLOWED -->
+			{BBCODE_STATUS}<br />
-			{IMG_STATUS}<br />
+			<!-- IF S_BBCODE_ALLOWED -->
-			{FLASH_STATUS}<br />
+				{IMG_STATUS}<br />
-			{URL_STATUS}<br />
+				{FLASH_STATUS}<br />
-		<!-- ENDIF -->
+				{URL_STATUS}<br />
-		{SMILIES_STATUS}
+			<!-- ENDIF -->
+			{SMILIES_STATUS}
+		</div>
 		<!-- ENDIF -->
 		<!-- IF S_EDIT_DRAFT || S_DISPLAY_REVIEW -->
 			<!-- IF S_DISPLAY_REVIEW --><hr /><!-- ENDIF -->

phpBB/styles/prosilver/template/posting_topic_review.html

@@ -22,13 +22,16 @@
 	<!-- ENDIF -->
 
 		<div class="postbody" id="pr{topic_review_row.POST_ID}">
+			<h3><a href="#pr{topic_review_row.POST_ID}">{topic_review_row.POST_SUBJECT}</a></h3>
+
 			<!-- IF topic_review_row.POSTER_QUOTE and topic_review_row.DECODED_MESSAGE -->
 			<ul class="profile-icons">
 				<li class="quote-icon"><a href="#postingbox" onclick="addquote({topic_review_row.POST_ID}, '{topic_review_row.POSTER_QUOTE}', '{LA_WROTE}');" title="{L_QUOTE} {topic_review_row.POST_AUTHOR}"><span>{L_QUOTE} {topic_review_row.POST_AUTHOR}</span></a></li>
 			</ul>
 			<!-- ENDIF -->
+
 			<!-- IF topic_review_row.U_MCP_DETAILS --><div class="right-box"><a href="{topic_review_row.U_MCP_DETAILS}">{L_POST_DETAILS}</a></div><!-- ENDIF -->
-			<h3><a href="#pr{topic_review_row.POST_ID}">{topic_review_row.POST_SUBJECT}</a></h3>
+
 			<p class="author"><!-- IF S_IS_BOT -->{topic_review_row.MINI_POST_IMG}<!-- ELSE --><a href="{topic_review_row.U_MINI_POST}">{topic_review_row.MINI_POST_IMG}</a><!-- ENDIF --> {L_POST_BY_AUTHOR} <strong>{topic_review_row.POST_AUTHOR_FULL}</strong> &raquo; {topic_review_row.POST_DATE}  </p>
 			<div class="content">{topic_review_row.MESSAGE}</div>
 

phpBB/styles/prosilver/template/search_body.html

@@ -105,7 +105,7 @@
 	<!-- BEGIN recentsearch -->
 		<tr class="<!-- IF recentsearch.S_ROW_COUNT is even -->bg1<!-- ELSE -->bg2<!-- ENDIF -->">
 			<td><a href="{recentsearch.U_KEYWORDS}">{recentsearch.KEYWORDS}</a></td>
-			<td class="active"><span>&nbsp;{recentsearch.TIME}</span></td>
+			<td class="active">{recentsearch.TIME}</td>
 		</tr>
 	<!-- BEGINELSE -->
 		<tr class="bg1">

phpBB/styles/prosilver/template/search_results.html

@@ -120,20 +120,19 @@
 			{searchresults.L_IGNORE_POST}
 		</div>
 	<!-- ELSE -->
-		<div class="postbody">
-			<h3><a href="{searchresults.U_VIEW_POST}">{searchresults.POST_SUBJECT}</a></h3>
-			<div class="content">{searchresults.MESSAGE}</div>
-		</div>
-
 		<dl class="postprofile">
 			<dt class="author">{L_POST_BY_AUTHOR} {searchresults.POST_AUTHOR_FULL}</dt>
-			<dd>{searchresults.POST_DATE}</dd>
+			<dd class="search-result-date">{searchresults.POST_DATE}</dd>
-			<dd>&nbsp;</dd>
 			<dd>{L_FORUM}{L_COLON} <a href="{searchresults.U_VIEW_FORUM}">{searchresults.FORUM_TITLE}</a></dd>
 			<dd>{L_TOPIC}{L_COLON} <a href="{searchresults.U_VIEW_TOPIC}">{searchresults.TOPIC_TITLE}</a></dd>
 			<dd>{L_REPLIES}{L_COLON} <strong>{searchresults.TOPIC_REPLIES}</strong></dd>
 			<dd>{L_VIEWS}{L_COLON} <strong>{searchresults.TOPIC_VIEWS}</strong></dd>
 		</dl>
+
+		<div class="postbody">
+			<h3><a href="{searchresults.U_VIEW_POST}">{searchresults.POST_SUBJECT}</a></h3>
+			<div class="content">{searchresults.MESSAGE}</div>
+		</div>
 	<!-- ENDIF -->
 
 	<!-- IF not searchresults.S_IGNORE_POST -->

phpBB/styles/prosilver/template/simple_header.html

@@ -2,6 +2,7 @@
 <html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
 <head>
 <meta charset="utf-8">
+<meta name="viewport" content="width=device-width" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 {META}
@@ -11,6 +12,7 @@
 <!-- IF S_ALLOW_CDN --><link href="//fonts.googleapis.com/css?family=Open+Sans:600&amp;subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese" rel="stylesheet" type="text/css" media="screen, projection" /><!-- ENDIF -->
 <link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
 <link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
+<link href="{T_THEME_PATH}/responsive.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 700px), only screen and (max-device-width: 700px)" />
 
 <!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
 	<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" type="text/css" media="screen, projection" />
@@ -24,7 +26,7 @@
 
 </head>
 
-<body id="phpbb" class="{S_CONTENT_DIRECTION}">
+<body id="phpbb" class="nojs {S_CONTENT_DIRECTION}">
 
 <div id="simple-wrap">
 	<a id="top" accesskey="t"></a>

phpBB/styles/prosilver/template/ucp_pm_history.html

@@ -15,13 +15,14 @@
 		<div class="inner">
 
 		<div class="postbody" id="pr{history_row.MSG_ID}">
+			<h3><a href="{history_row.U_VIEW_MESSAGE}" <!-- IF history_row.S_CURRENT_MSG -->class="current"<!-- ENDIF -->>{history_row.SUBJECT}</a></h3>
+
 			<!-- IF history_row.U_QUOTE or history_row.MESSAGE_AUTHOR_QUOTE -->
 			<ul class="profile-icons">
 				<li class="quote-icon"><a <!-- IF history_row.U_QUOTE -->href="{history_row.U_QUOTE}"<!-- ELSE -->href="#postingbox" onclick="addquote({history_row.MSG_ID}, '{history_row.MESSAGE_AUTHOR_QUOTE}', '{LA_WROTE}');"<!-- ENDIF --> title="{L_QUOTE} {history_row.MESSAGE_AUTHOR}"><span>{L_QUOTE} {history_row.MESSAGE_AUTHOR}</span></a></li>
 			</ul>
 			<!-- ENDIF -->
 
-			<h3><a href="{history_row.U_VIEW_MESSAGE}" <!-- IF history_row.S_CURRENT_MSG -->class="current"<!-- ENDIF -->>{history_row.SUBJECT}</a></h3>
 			<p class="author">{history_row.MINI_POST_IMG} {L_SENT_AT}{L_COLON} <strong>{history_row.SENT_DATE}</strong><br />
 				{L_MESSAGE_BY_AUTHOR} {history_row.MESSAGE_AUTHOR_FULL}</p>
 			<div class="content"><!-- IF history_row.MESSAGE -->{history_row.MESSAGE}<!-- ELSE --><span class="error">{L_MESSAGE_REMOVED_FROM_OUTBOX}</span><!-- ENDIF --></div>

phpBB/styles/prosilver/template/ucp_pm_viewmessage.html

@@ -17,7 +17,40 @@
 <div id="post-{MESSAGE_ID}" class="post pm<!-- IF S_POST_UNAPPROVED or S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF S_ONLINE --> online<!-- ENDIF -->">
 <div class="inner">
 
+	<dl class="postprofile" id="profile{MESSAGE_ID}">
+		<dt class="<!-- IF RANK_TITLE or RANK_IMG -->has-profile-rank<!-- ELSE -->no-profile-rank<!-- ENDIF -->"><!-- IF AUTHOR_AVATAR --><a href="{U_MESSAGE_AUTHOR}" class="avatar">{AUTHOR_AVATAR}</a><!-- ENDIF -->{MESSAGE_AUTHOR_FULL}</dt>
+
+		<!-- IF RANK_TITLE or RANK_IMG --><dd class="profile-rank">{RANK_TITLE}<!-- IF RANK_TITLE and RANK_IMG --><br /><!-- ENDIF -->{RANK_IMG}</dd><!-- ENDIF -->
+
+		<dd><strong>{L_POSTS}{L_COLON}</strong> {AUTHOR_POSTS}</dd>
+		<!-- IF AUTHOR_JOINED --><dd><strong>{L_JOINED}{L_COLON}</strong> {AUTHOR_JOINED}</dd><!-- ENDIF -->
+		<!-- IF AUTHOR_FROM --><dd><strong>{L_LOCATION}{L_COLON}</strong> {AUTHOR_FROM}</dd><!-- ENDIF -->
+
+		<!-- EVENT ucp_pm_viewmessage_custom_fields_before -->
+		<!-- BEGIN custom_fields -->
+			<dd><strong>{custom_fields.PROFILE_FIELD_NAME}{L_COLON}</strong> {custom_fields.PROFILE_FIELD_VALUE}</dd>
+		<!-- END custom_fields -->
+		<!-- EVENT ucp_pm_viewmessage_custom_fields_after -->
+
+
+		<!-- IF U_PM or U_EMAIL or U_WWW or U_MSN or U_ICQ or U_YIM or U_AIM or U_JABBER -->
+		<dd>
+			<ul class="profile-icons">
+			<!-- IF U_PM --><li class="pm-icon"><a href="{U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->
+			<!-- IF U_EMAIL --><li class="email-icon"><a href="{U_EMAIL}" title="{L_SEND_EMAIL_USER} {MESSAGE_AUTHOR}"><span>{L_SEND_EMAIL_USER} {MESSAGE_AUTHOR}</span></a></li><!-- ENDIF -->
+			<!-- IF U_WWW --><li class="web-icon"><a href="{U_WWW}" title="{L_VISIT_WEBSITE}{L_COLON} {U_WWW}"><span>{L_WEBSITE}</span></a></li><!-- ENDIF -->
+			<!-- IF U_MSN --><li class="msnm-icon"><a href="{U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}"><span>{L_MSNM}</span></a></li><!-- ENDIF -->
+			<!-- IF U_ICQ --><li class="icq-icon"><a href="{U_ICQ}" onclick="popup(this.href, 550, 320); return false;" title="{L_ICQ}"><span>{L_ICQ}</span></a></li><!-- ENDIF -->
+			<!-- IF U_YIM --><li class="yahoo-icon"><a href="{U_YIM}" onclick="popup(this.href, 780, 550); return false;" title="{L_YIM}"><span>{L_YIM}</span></a></li><!-- ENDIF -->
+			<!-- IF U_AIM --><li class="aim-icon"><a href="{U_AIM}" onclick="popup(this.href, 550, 320); return false;" title="{L_AIM}"><span>{L_AIM}</span></a></li><!-- ENDIF -->
+			<!-- IF U_JABBER --><li class="jabber-icon"><a href="{U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}"><span>{L_JABBER}</span></a></li><!-- ENDIF -->
+			</ul>
+		</dd>
+		<!-- ENDIF -->
+	</dl>
+
 	<div class="postbody">
+		<h3 class="first">{SUBJECT}</h3>
 
 		<!-- IF U_DELETE or U_EDIT or U_QUOTE or U_REPORT -->
 		<ul class="profile-icons">
@@ -28,8 +61,6 @@
 		</ul>
 		<!-- ENDIF -->
 
-		<h3 class="first">{SUBJECT}</h3>
-
 		<p class="author">
 			<strong>{L_SENT_AT}{L_COLON}</strong> {SENT_DATE}
 			<br /><strong>{L_PM_FROM}{L_COLON}</strong> {MESSAGE_AUTHOR_FULL}
@@ -76,38 +107,6 @@
 		<!-- ENDIF -->
 	</div>
 
-	<dl class="postprofile" id="profile{MESSAGE_ID}">
-		<dt><!-- IF AUTHOR_AVATAR --><a href="{U_MESSAGE_AUTHOR}">{AUTHOR_AVATAR}</a><br /><!-- ENDIF -->{MESSAGE_AUTHOR_FULL}</dt>
-		<!-- IF RANK_TITLE --><dd>{RANK_TITLE}</dd><!-- ENDIF -->
-		<!-- IF RANK_IMG --><dd>{RANK_IMG}</dd><!-- ENDIF -->
-		<dd>&nbsp;</dd>
-		<dd><strong>{L_POSTS}{L_COLON}</strong> {AUTHOR_POSTS}</dd>
-		<!-- IF AUTHOR_JOINED --><dd><strong>{L_JOINED}{L_COLON}</strong> {AUTHOR_JOINED}</dd><!-- ENDIF -->
-		<!-- IF AUTHOR_FROM --><dd><strong>{L_LOCATION}{L_COLON}</strong> {AUTHOR_FROM}</dd><!-- ENDIF -->
-
-		<!-- EVENT ucp_pm_viewmessage_custom_fields_before -->
-		<!-- BEGIN custom_fields -->
-			<dd><strong>{custom_fields.PROFILE_FIELD_NAME}{L_COLON}</strong> {custom_fields.PROFILE_FIELD_VALUE}</dd>
-		<!-- END custom_fields -->
-		<!-- EVENT ucp_pm_viewmessage_custom_fields_after -->
-
-
-		<!-- IF U_PM or U_EMAIL or U_WWW or U_MSN or U_ICQ or U_YIM or U_AIM or U_JABBER -->
-		<dd>
-			<ul class="profile-icons">
-			<!-- IF U_PM --><li class="pm-icon"><a href="{U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->
-			<!-- IF U_EMAIL --><li class="email-icon"><a href="{U_EMAIL}" title="{L_SEND_EMAIL_USER} {MESSAGE_AUTHOR}"><span>{L_SEND_EMAIL_USER} {MESSAGE_AUTHOR}</span></a></li><!-- ENDIF -->
-			<!-- IF U_WWW --><li class="web-icon"><a href="{U_WWW}" title="{L_VISIT_WEBSITE}{L_COLON} {U_WWW}"><span>{L_WEBSITE}</span></a></li><!-- ENDIF -->
-			<!-- IF U_MSN --><li class="msnm-icon"><a href="{U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}"><span>{L_MSNM}</span></a></li><!-- ENDIF -->
-			<!-- IF U_ICQ --><li class="icq-icon"><a href="{U_ICQ}" onclick="popup(this.href, 550, 320); return false;" title="{L_ICQ}"><span>{L_ICQ}</span></a></li><!-- ENDIF -->
-			<!-- IF U_YIM --><li class="yahoo-icon"><a href="{U_YIM}" onclick="popup(this.href, 780, 550); return false;" title="{L_YIM}"><span>{L_YIM}</span></a></li><!-- ENDIF -->
-			<!-- IF U_AIM --><li class="aim-icon"><a href="{U_AIM}" onclick="popup(this.href, 550, 320); return false;" title="{L_AIM}"><span>{L_AIM}</span></a></li><!-- ENDIF -->
-			<!-- IF U_JABBER --><li class="jabber-icon"><a href="{U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}"><span>{L_JABBER}</span></a></li><!-- ENDIF -->
-			</ul>
-		</dd>
-		<!-- ENDIF -->
-	</dl>
-
 	<div class="back2top"><a href="#top" class="top" title="{L_BACK_TO_TOP}">{L_BACK_TO_TOP}</a></div>
 
 	</div>

phpBB/styles/prosilver/template/ucp_profile_signature.html

@@ -9,7 +9,7 @@
 		<div class="inner">
 		<h3>{L_SIGNATURE_PREVIEW}</h3>
 		<div class="postbody">
-			<div class="signature" style="border-top:none; margin-top: 0; ">{SIGNATURE_PREVIEW}</div>
+			<div class="signature standalone">{SIGNATURE_PREVIEW}</div>
 		</div>
 		</div>
 	</div>

phpBB/styles/prosilver/template/viewforum_body.html

@@ -28,7 +28,7 @@
 <!-- IF S_HAS_SUBFORUM -->
 <!-- IF not S_IS_BOT and U_MARK_FORUMS -->
 <ul class="linklist">
-	<li class="rightside"><a href="{U_MARK_FORUMS}" data-ajax="mark_forums_read" data-overlay="false">{L_MARK_SUBFORUMS_READ}</a></li>
+	<li class="rightside mark-read"><a href="{U_MARK_FORUMS}" data-ajax="mark_forums_read" data-overlay="false">{L_MARK_SUBFORUMS_READ}</a></li>
 </ul>
 <!-- ENDIF -->
 	<!-- INCLUDE forumlist_body.html -->

phpBB/styles/prosilver/template/viewonline_body.html

@@ -29,7 +29,7 @@
 		<tbody>
 		<!-- BEGIN user_row -->
 		<tr class="<!-- IF user_row.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF -->">
-			<td>{user_row.USERNAME_FULL}<!-- IF user_row.USER_IP --> <span style="margin-left: 30px;">{L_IP}{L_COLON} <a href="{user_row.U_USER_IP}">{user_row.USER_IP}</a> &#187; <a href="{user_row.U_WHOIS}" onclick="popup(this.href, 750, 500); return false;">{L_WHOIS}</a></span><!-- ENDIF -->
+			<td>{user_row.USERNAME_FULL}<!-- IF user_row.USER_IP --> <span style="float: {S_CONTENT_FLOW_END};">{L_IP}{L_COLON} <a href="{user_row.U_USER_IP}">{user_row.USER_IP}</a> &#187; <a href="{user_row.U_WHOIS}" onclick="popup(this.href, 750, 500); return false;">{L_WHOIS}</a></span><!-- ENDIF -->
 				<!-- IF user_row.USER_BROWSER --><br />{user_row.USER_BROWSER}<!-- ENDIF --></td>
 			<td class="info"><a href="{user_row.U_FORUM_LOCATION}">{user_row.FORUM_LOCATION}</a></td>
 			<td class="active">{user_row.LASTUPDATE}</td>

phpBB/styles/prosilver/template/viewtopic_body.html

@@ -116,6 +116,50 @@
 	<div id="p{postrow.POST_ID}" class="post <!-- 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 -->">
 		<div class="inner">
 
+		<dl class="postprofile" 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 -->
+					<!-- 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 -->
+				<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
+			</dt>
+
+			<!-- 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 -->
+
+		<!-- IF postrow.POSTER_POSTS != '' --><dd><strong>{L_POSTS}{L_COLON}</strong> {postrow.POSTER_POSTS}</dd><!-- ENDIF -->
+		<!-- IF postrow.POSTER_JOINED --><dd><strong>{L_JOINED}{L_COLON}</strong> {postrow.POSTER_JOINED}</dd><!-- ENDIF -->
+		<!-- IF postrow.POSTER_FROM --><dd><strong>{L_LOCATION}{L_COLON}</strong> {postrow.POSTER_FROM}</dd><!-- ENDIF -->
+
+		<!-- IF postrow.S_PROFILE_FIELD1 -->
+			<!-- Use a construct like this to include admin defined profile fields. Replace FIELD1 with the name of your field. -->
+			<dd><strong>{postrow.PROFILE_FIELD1_NAME}{L_COLON}</strong> {postrow.PROFILE_FIELD1_VALUE}</dd>
+		<!-- ENDIF -->
+
+		<!-- EVENT viewtopic_body_postrow_custom_fields_before -->
+		<!-- BEGIN custom_fields -->
+			<dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}{L_COLON}</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
+		<!-- END custom_fields -->
+		<!-- EVENT viewtopic_body_postrow_custom_fields_after -->
+
+		<!-- IF not S_IS_BOT -->
+		<!-- IF postrow.U_PM or postrow.U_EMAIL or postrow.U_WWW or postrow.U_MSN or postrow.U_ICQ or postrow.U_YIM or postrow.U_AIM or postrow.U_JABBER -->
+			<dd>
+				<ul class="profile-icons">
+					<!-- IF postrow.U_PM --><li class="pm-icon"><a href="{postrow.U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->
+					<!-- IF postrow.U_EMAIL --><li class="email-icon"><a href="{postrow.U_EMAIL}" title="{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}"><span>{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}</span></a></li><!-- ENDIF -->
+					<!-- IF postrow.U_WWW --><li class="web-icon"><a href="{postrow.U_WWW}" title="{L_VISIT_WEBSITE}{L_COLON} {postrow.U_WWW}"><span>{L_WEBSITE}</span></a></li><!-- ENDIF -->
+					<!-- IF postrow.U_MSN --><li class="msnm-icon"><a href="{postrow.U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}"><span>{L_MSNM}</span></a></li><!-- ENDIF -->
+					<!-- IF postrow.U_ICQ --><li class="icq-icon"><a href="{postrow.U_ICQ}" onclick="popup(this.href, 550, 320); return false;" title="{L_ICQ}"><span>{L_ICQ}</span></a></li><!-- ENDIF -->
+					<!-- IF postrow.U_YIM --><li class="yahoo-icon"><a href="{postrow.U_YIM}" onclick="popup(this.href, 780, 550); return false;" title="{L_YIM}"><span>{L_YIM}</span></a></li><!-- ENDIF -->
+					<!-- IF postrow.U_AIM --><li class="aim-icon"><a href="{postrow.U_AIM}" onclick="popup(this.href, 550, 320); return false;" title="{L_AIM}"><span>{L_AIM}</span></a></li><!-- ENDIF -->
+					<!-- IF postrow.U_JABBER --><li class="jabber-icon"><a href="{postrow.U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}"><span>{L_JABBER}</span></a></li><!-- ENDIF -->
+				</ul>
+			</dd>
+		<!-- ENDIF -->
+		<!-- ENDIF -->
+
+		</dl>
+
 		<div class="postbody">
 			<!-- IF postrow.S_POST_HIDDEN -->
 				<!-- IF postrow.S_POST_DELETED -->
@@ -132,6 +176,8 @@
 			<!-- ENDIF -->
 			<div id="post_content{postrow.POST_ID}"<!-- IF postrow.S_POST_HIDDEN --> style="display: none;"<!-- ENDIF -->>
 
+			<h3 <!-- IF postrow.S_FIRST_ROW -->class="first"<!-- ENDIF -->><!-- IF postrow.POST_ICON_IMG --><img src="{T_ICONS_PATH}{postrow.POST_ICON_IMG}" width="{postrow.POST_ICON_IMG_WIDTH}" height="{postrow.POST_ICON_IMG_HEIGHT}" alt="" /> <!-- ENDIF --><a href="#p{postrow.POST_ID}">{postrow.POST_SUBJECT}</a></h3>
+
 		<!-- IF not S_IS_BOT -->
 			<!-- IF postrow.U_EDIT or postrow.U_DELETE or postrow.U_REPORT or postrow.U_WARN or postrow.U_INFO or postrow.U_QUOTE -->
 				<ul class="profile-icons">
@@ -147,7 +193,6 @@
 			<!-- ENDIF -->
 		<!-- ENDIF -->
 
-			<h3 <!-- IF postrow.S_FIRST_ROW -->class="first"<!-- ENDIF -->><!-- IF postrow.POST_ICON_IMG --><img src="{T_ICONS_PATH}{postrow.POST_ICON_IMG}" width="{postrow.POST_ICON_IMG_WIDTH}" height="{postrow.POST_ICON_IMG_HEIGHT}" alt="" /> <!-- ENDIF --><a href="#p{postrow.POST_ID}">{postrow.POST_SUBJECT}</a></h3>
 			<p class="author"><!-- IF S_IS_BOT -->{postrow.MINI_POST_IMG}<!-- ELSE --><a href="{postrow.U_MINI_POST}">{postrow.MINI_POST_IMG}</a><!-- ENDIF -->{L_POST_BY_AUTHOR} <strong>{postrow.POST_AUTHOR_FULL}</strong> &raquo; {postrow.POST_DATE} </p>
 
 			<!-- IF postrow.S_POST_UNAPPROVED -->
@@ -220,52 +265,6 @@
 
 		</div>
 
-		<dl class="postprofile" id="profile{postrow.POST_ID}"<!-- IF postrow.S_POST_HIDDEN --> style="display: none;"<!-- ENDIF -->>
-			<dt>
-				<!-- IF postrow.POSTER_AVATAR -->
-					<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
-				<!-- ENDIF -->
-				<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
-			</dt>
-
-			<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG --><dd>{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}</dd><!-- ENDIF -->
-
-		<dd>&nbsp;</dd>
-
-		<!-- IF postrow.POSTER_POSTS != '' --><dd><strong>{L_POSTS}{L_COLON}</strong> {postrow.POSTER_POSTS}</dd><!-- ENDIF -->
-		<!-- IF postrow.POSTER_JOINED --><dd><strong>{L_JOINED}{L_COLON}</strong> {postrow.POSTER_JOINED}</dd><!-- ENDIF -->
-		<!-- IF postrow.POSTER_FROM --><dd><strong>{L_LOCATION}{L_COLON}</strong> {postrow.POSTER_FROM}</dd><!-- ENDIF -->
-
-		<!-- IF postrow.S_PROFILE_FIELD1 -->
-			<!-- Use a construct like this to include admin defined profile fields. Replace FIELD1 with the name of your field. -->
-			<dd><strong>{postrow.PROFILE_FIELD1_NAME}{L_COLON}</strong> {postrow.PROFILE_FIELD1_VALUE}</dd>
-		<!-- ENDIF -->
-
-		<!-- EVENT viewtopic_body_postrow_custom_fields_before -->
-		<!-- BEGIN custom_fields -->
-			<dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}{L_COLON}</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
-		<!-- END custom_fields -->
-		<!-- EVENT viewtopic_body_postrow_custom_fields_after -->
-
-		<!-- IF not S_IS_BOT -->
-		<!-- IF postrow.U_PM or postrow.U_EMAIL or postrow.U_WWW or postrow.U_MSN or postrow.U_ICQ or postrow.U_YIM or postrow.U_AIM or postrow.U_JABBER -->
-			<dd>
-				<ul class="profile-icons">
-					<!-- IF postrow.U_PM --><li class="pm-icon"><a href="{postrow.U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->
-					<!-- IF postrow.U_EMAIL --><li class="email-icon"><a href="{postrow.U_EMAIL}" title="{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}"><span>{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}</span></a></li><!-- ENDIF -->
-					<!-- IF postrow.U_WWW --><li class="web-icon"><a href="{postrow.U_WWW}" title="{L_VISIT_WEBSITE}{L_COLON} {postrow.U_WWW}"><span>{L_WEBSITE}</span></a></li><!-- ENDIF -->
-					<!-- IF postrow.U_MSN --><li class="msnm-icon"><a href="{postrow.U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}"><span>{L_MSNM}</span></a></li><!-- ENDIF -->
-					<!-- IF postrow.U_ICQ --><li class="icq-icon"><a href="{postrow.U_ICQ}" onclick="popup(this.href, 550, 320); return false;" title="{L_ICQ}"><span>{L_ICQ}</span></a></li><!-- ENDIF -->
-					<!-- IF postrow.U_YIM --><li class="yahoo-icon"><a href="{postrow.U_YIM}" onclick="popup(this.href, 780, 550); return false;" title="{L_YIM}"><span>{L_YIM}</span></a></li><!-- ENDIF -->
-					<!-- IF postrow.U_AIM --><li class="aim-icon"><a href="{postrow.U_AIM}" onclick="popup(this.href, 550, 320); return false;" title="{L_AIM}"><span>{L_AIM}</span></a></li><!-- ENDIF -->
-					<!-- IF postrow.U_JABBER --><li class="jabber-icon"><a href="{postrow.U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}"><span>{L_JABBER}</span></a></li><!-- ENDIF -->
-				</ul>
-			</dd>
-		<!-- ENDIF -->
-		<!-- ENDIF -->
-
-		</dl>
-
 		<div class="back2top"><a href="#wrap" class="top" title="{L_BACK_TO_TOP}">{L_BACK_TO_TOP}</a></div>
 
 		</div>

phpBB/styles/prosilver/theme/bidi.css

@@ -392,11 +392,6 @@
 	margin-left: 0;
 }
 
-/* Post author */
-.rtl p.author {
-	margin: 0 0 0.6em 15em;
-}
-
 .rtl .signature {
 	clear: right;
 }
@@ -484,9 +479,7 @@
 /* Poster profile block
 ----------------------------------------*/
 .rtl .postprofile {
-	border-left: none;
+	border-width: 0 1px 0 0;
-	border-right-width: 1px;
-	border-right-style: solid;
 	float: left;
 /*	text-align: right; */
 }

phpBB/styles/prosilver/theme/buttons.css

@@ -140,6 +140,65 @@ ul.profile-icons li a:hover { background: none; }
 	margin: 0 3px;
 }
 
+/* Responsive icons in postbody */
+.postbody ul.profile-icons.responsive .responsive-menu {
+	position: relative;
+}
+
+ul.profile-icons.responsive a.responsive-menu-link {
+	display: inline-block;
+	position: relative;
+	margin: 0 5px;
+	width: 20px;
+	height: 20px;
+	text-decoration: none;
+	background: none top left no-repeat;
+}
+
+ul.profile-icons.responsive a.responsive-menu-link:hover {
+	background-position: 0 -20px;
+}
+
+ul.profile-icons.responsive a.responsive-menu-link:before {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 7px;
+	height: .125em;
+	width: 14px;
+	border-bottom: 0.125em solid transparent;
+	border-top: 0.375em double transparent;
+}
+
+.postbody ul.profile-icons.responsive .responsive-popup {
+	left: auto;
+	right: 7px;
+	top: 19px;
+}
+
+.postbody ul.profile-icons.responsive .responsive-popup li, .postbody ul.profile-icons.responsive .responsive-popup li a {
+	display: block;
+	background: transparent none;
+	width: auto;
+	height: auto;
+	margin: 0;
+	padding: 0;
+	float: none;
+	list-style-type: none;
+}
+
+.postbody ul.profile-icons.responsive .responsive-popup li span {
+	display: block;
+	text-align: right;
+	font-size: 1.2em;
+	line-height: 1.8em;
+	white-space: nowrap;
+}
+
+.hasjs .postbody ul.profile-icons {
+	max-width: 40%;
+}
+
 /* Profile & navigation icons */
 .email-icon, .email-icon a		{ background: none top left no-repeat; }
 .aim-icon, .aim-icon a			{ background: none top left no-repeat; }
@@ -173,6 +232,7 @@ ul.profile-icons li.edit-icon	{ width: 42px; height: 20px; }
 ul.profile-icons li.delete-icon	{ width: 20px; height: 20px; }
 ul.profile-icons li.info-icon	{ width: 20px; height: 20px; }
 ul.profile-icons li.warn-icon	{ width: 20px; height: 20px; }
+ul.profile-icons a.responsive-menu-link	{ width: 20px; height: 20px; }
 
 /* Fix profile icon default margins */
 ul.profile-icons li.edit-icon	{ margin: 0 0 0 3px; }

phpBB/styles/prosilver/theme/colours.css

@@ -627,21 +627,11 @@ fieldset.polls dd div {
 ----------------------------------------*/
 .postprofile {
 	color: #666666;
-	border-left-color: #FFFFFF;
+	border-color: #FFFFFF;
-}
-
-.rtl .postprofile {
-	border-right-color: #FFFFFF;
-	border-left-color: transparent;
 }
 
 .pm .postprofile {
-	border-left-color: #DDDDDD;
+	border-color: #DDDDDD;
-}
-
-.rtl .pm .postprofile {
-	border-right-color: #DDDDDD;
-	border-left-color: transparent;
 }
 
 .postprofile strong {
@@ -706,7 +696,7 @@ a.sendemail {
 .icon-subscribe					{ background-image: url("./images/icon_subscribe.gif"); }
 .icon-unsubscribe				{ background-image: url("./images/icon_unsubscribe.gif"); }
 .icon-pages						{ background-image: url("./images/icon_pages.gif"); }
-.icon-search					{ background-image: url("./images/icon_search.gif"); }
+.icon-search, .responsive-search a	{ background-image: url("./images/icon_search.gif"); }
 .icon-notification				{ background-image: url("./images/icon_notification.gif"); }
 .icon-pm						{ background-image: url("./images/icon_pm.gif"); }
 
@@ -720,6 +710,7 @@ a.sendemail {
 .jabber-icon, .jabber-icon a		{ background-image: url("./images/icon_contact_jabber.gif"); }
 .pm-icon, .pm-icon a				{ background-image: url("./en/icon_contact_pm.gif"); }
 .quote-icon, .quote-icon a		{ background-image: url("./en/icon_post_quote.gif"); }
+ul.profile-icons.responsive a.responsive-menu-link	{ background-image: url("./images/icon_post_menu.png"); }
 
 /* Moderator icons */
 .report-icon, .report-icon a		{ background-image: url("./images/icon_post_report.gif"); }
@@ -857,6 +848,16 @@ ul.cplist {
 	color: #333333;
 }
 
+/* Responsive tabs
+----------------------------------------*/
+.responsive-tab .responsive-tab-link span:before {
+	border-color: #536482;
+}
+
+.responsive-tab .responsive-tab-link:hover span:before {
+	border-color: #BC2A4D;
+}
+
 /* UCP navigation menu
 ----------------------------------------*/
 
@@ -1126,3 +1127,26 @@ input.disabled {
 .notification_list .pointer_inner {
 	border-bottom-color: #F1F8FF;
 }
+
+ul.linklist li.responsive-menu a.responsive-menu-link:before {
+	border-color: #105289;
+}
+
+ul.linklist li.responsive-menu a.responsive-menu-link:hover:before {
+	border-color: #D31141;
+}
+
+ul.responsive-popup {
+	background: #fff;
+	border-color: #b9b9b9;
+	box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
+}
+.navbar ul.responsive-popup {
+	background-color: #CADCEB;
+}
+
+#tabs ul.responsive-tabs, #minitabs ul.responsive-tabs {
+	background: #ddedfb;
+	border-color: #c0c9d5;
+	box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4);
+}

phpBB/styles/prosilver/theme/common.css

@@ -60,6 +60,7 @@ body {
 	line-height: normal;
 	margin: 0;
 	padding: 12px 0;
+	word-wrap: break-word;
 }
 
 h1 {
@@ -179,7 +180,7 @@ ol ol ul, ol ul ul, ul ol ul, ul ul ul {
 }
 
 #simple-wrap {
-	padding: 6px 10px;
+	padding: 6px 0;
 }
 
 #page-body {
@@ -360,6 +361,38 @@ ul.rightside {
 	text-align: right;
 }
 
+ul.linklist.responsive {
+	position: relative;
+}
+
+ul.linklist li.responsive-menu a.responsive-menu-link {
+	display: inline-block;
+	font-size: 16px;
+	position: relative;
+	width: 16px;
+	line-height: 16px;
+	text-decoration: none;
+}
+
+ul.linklist li.responsive-menu a.responsive-menu-link:before {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 7px;
+	height: .125em;
+	width: 14px;
+	border-bottom: 0.125em solid transparent;
+	border-top: 0.375em double transparent;
+}
+
+.hasjs ul.linklist.leftside, .hasjs ul.linklist.rightside {
+	max-width: 48%;
+}
+
+.hasjs ul.linklist.fullwidth {
+	max-width: none;
+}
+
 /* Bulletin icons for list items
 ----------------------------------------*/
 ul.linklist.bulletin li:before {
@@ -378,6 +411,62 @@ ul.linklist.bulletin li.no-bulletin:before {
 	display: none;
 }
 
+.responsive-menu:before {
+	display: none !important;
+}
+
+/* Responsive popup
+----------------------------------------*/
+ul.responsive-popup {
+	position: absolute;
+	left: 0;
+	top: 24px;
+	z-index: 2;
+	border: 1px solid transparent;
+	border-radius: 5px;
+	padding: 5px;
+}
+
+ul.responsive-popup.responsive-rightside {
+	left: auto;
+	right: 0;
+}
+
+ul.responsive-popup li {
+	float: none;
+	margin: 0;
+	white-space: nowrap;
+	text-align: left;
+}
+
+.wrap ul.responsive-popup li {
+	white-space: normal;
+}
+
+ul.responsive-popup li:before, ul.responsive-popup li:after {
+	display: none !important;
+}
+
+/* Responsive breadcrumbs
+----------------------------------------*/
+.breadcrumbs .crumb {
+	display: inline-block;
+	vertical-align: bottom;
+}
+
+.breadcrumbs.wrapped .crumb {
+	letter-spacing: -.5px;
+}
+
+.breadcrumbs .crumb.wrapped {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.breadcrumbs .crumb.wrapped-wide { max-width: 120px; }
+.breadcrumbs .crumb.wrapped-medium { max-width: 80px; }
+.breadcrumbs .crumb.wrapped-small { max-width: 30px; }
+
 /* Table styles
 ----------------------------------------*/
 table.table1 {
@@ -421,7 +510,7 @@ table.table1 tbody th {
 
 /* Specific column styles */
 table.table1 .name		{ text-align: left; }
-table.table1 .posts		{ text-align: center !important; width: 7%; }
+table.table1 .posts		{ text-align: center; width: 7%; }
 table.table1 .joined	{ text-align: left; width: 15%; }
 table.table1 .active	{ text-align: left; width: 15%; }
 table.table1 .mark		{ text-align: center; width: 7%; }
@@ -477,6 +566,10 @@ table.info tbody th {
 	text-align: left;
 }
 
+.left-box.profile-details {
+	width: 80%;
+}
+
 .right-box {
 	float: right;
 	width: auto;
@@ -506,7 +599,7 @@ dl.details dd {
 	text-overflow: ellipsis;
 }
 
-.clearfix, #tabs, #minitabs, fieldset dl, ul.topiclist dl, dl.polls {
+.clearfix, fieldset dl, ul.topiclist dl, dl.polls {
 	height: 1%;
 	overflow: hidden;
 }
@@ -786,18 +879,14 @@ form > p.post-notice strong {
 
 .notification_list ul li img {
 	float: left;
-	max-width: 50px;
 	max-height: 50px;
+	width: auto !important;
+	height: auto !important;
 	margin-right: 5px;
 }
 
 .notification_list ul li p {
 	margin: 0;
-	word-wrap: break-word;
-}
-
-.notification_list ul.topiclist dt {
-	width: 88%;
 }
 
 .notification_list .pointer, .notification_list .pointer_inner {
@@ -836,3 +925,11 @@ form > p.post-notice strong {
 	font-size: 11px;
 }
 
+.compact .icon-notification > a > span, .compact .icon-pm > a > span {
+	display: none;
+}
+
+.compact .icon-notification > a > strong, .compact .icon-pm > a > strong {
+	padding-left: 2px;
+}
+

phpBB/styles/prosilver/theme/content.css

@@ -228,7 +228,6 @@ div[class].topic-actions {
 	line-height: 1.48em;
 	width: 76%;
 	float: left;
-	clear: both;
 }
 
 .postbody .ignore {
@@ -242,6 +241,7 @@ div[class].topic-actions {
 
 .postbody h3 {
 	/* Postbody requires a different h3 format - so change it here */
+	float: left;
 	font-size: 1.5em;
 	padding: 2px 0 0 0;
 	margin: 0 0 0.3em 0 !important;
@@ -258,6 +258,7 @@ div[class].topic-actions {
 
 .postbody .content {
 	font-size: 1.3em;
+	overflow-x: auto;
 }
 
 .search .postbody {
@@ -297,21 +298,16 @@ div[class].topic-actions {
 
 /* MCP Post details
 ----------------------------------------*/
-#post_details
+#post_details {
-{
 	/* This will only work in IE7+, plus the others */
 	overflow: auto;
 	max-height: 300px;
 }
 
-#expand
-{
-	clear: both;
-}
-
 /* Content container styles
 ----------------------------------------*/
 .content {
+	clear: both;
 	min-height: 3em;
 	overflow: hidden;
 	line-height: 1.4em;
@@ -382,11 +378,12 @@ dl.faq dt {
 
 /* Post author */
 p.author {
-	margin: 0 15em 0.6em 0;
+	margin-bottom: 0.6em;
 	padding: 0 0 5px 0;
 	font-family: Verdana, Helvetica, Arial, sans-serif;
 	font-size: 1em;
 	line-height: 1.2em;
+	clear: both;
 }
 
 /* Post signature */
@@ -401,6 +398,11 @@ p.author {
 	width: 100%;
 }
 
+.signature.standalone {
+	border-top-width: 0;
+	margin-top: 0;
+}
+
 dd .signature {
 	margin: 0;
 	padding: 0;
@@ -509,10 +511,13 @@ blockquote .codebox {
 .attachbox {
 	float: left;
 	width: auto; 
+	max-width: 100%;
 	margin: 5px 5px 5px 0;
 	padding: 6px;
 	border: 1px dashed transparent;
 	clear: left;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 .attachbox dt {
@@ -525,6 +530,7 @@ blockquote .codebox {
 	padding-top: 4px;
 	clear: left;
 	border-top: 1px solid transparent;
+	overflow-x: auto;
 }
 
 .attachbox dd dd {
@@ -546,7 +552,7 @@ blockquote .codebox {
 
 .attach-image {
 	margin: 3px 0;
-	width: 100%;
+	max-width: 100%;
 	max-height: 350px;
 	overflow: auto;
 }
@@ -654,7 +660,7 @@ fieldset.polls dd div {
 	font-weight: bold;
 	padding: 0 2px;
 	overflow: visible;
-	min-width: 2%;
+	min-width: 8px;
 }
 
 .pollbar1, .pollbar2, .pollbar3, .pollbar4, .pollbar5 {
@@ -674,7 +680,8 @@ fieldset.polls dd div {
 	/* Also see tweaks.css */
 	margin: 5px 0 10px 0;
 	min-height: 80px;
-	border-left: 1px solid transparent;
+	border: 1px solid transparent;
+	border-width: 0 0 0 1px;
 	width: 22%;
 	float: right;
 	display: inline;
@@ -694,7 +701,12 @@ fieldset.polls dd div {
 	font-weight: normal;
 }
 
-.avatar {
+.postprofile dt.no-profile-rank, .postprofile dd.profile-rank, .postprofile .search-result-date {
+	margin-bottom: 10px;
+}
+
+.postprofile .avatar {
+	display: block;
 	border: none;
 	margin-bottom: 3px;
 }
@@ -746,3 +758,18 @@ div.dl_links {
 .dl_links li {
 	display: inline-block;
 }
+
+/* Show scrollbars for items with overflow on iOS devices
+----------------------------------------*/
+.postbody .content::-webkit-scrollbar, #topicreview::-webkit-scrollbar, #post_details::-webkit-scrollbar, .codebox code::-webkit-scrollbar, .attachbox dd::-webkit-scrollbar, .attach-image::-webkit-scrollbar, #notification_list ul::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+	-webkit-appearance: none;
+	background: rgba(0, 0, 0, .1);
+	border-radius: 3px;
+}
+
+.postbody .content::-webkit-scrollbar-thumb, #topicreview::-webkit-scrollbar-thumb, #post_details::-webkit-scrollbar-thumb, .codebox code::-webkit-scrollbar-thumb, .attachbox dd::-webkit-scrollbar-thumb, .attach-image::-webkit-scrollbar-thumb, #notification_list ul::-webkit-scrollbar-thumb {
+	background: rgba(0, 0, 0, .3);
+	border-radius: 3px;
+}

phpBB/styles/prosilver/theme/cp.css

@@ -118,7 +118,7 @@ ul.cplist {
 #tabs {
 	line-height: normal;
 	margin: 20px 0 -1px 7px;
-	min-width: 570px;
+	*overflow: hidden;
 }
 
 #tabs ul {
@@ -127,6 +127,12 @@ ul.cplist {
 	list-style: none;
 }
 
+#tabs ul:after {
+	content: '';
+	display: block;
+	clear: both;
+}
+
 #tabs li {
 	display: inline;
 	margin: 0;
@@ -210,6 +216,79 @@ ul.cplist {
 	text-decoration: none;
 }
 
+/* Responsive tabs
+----------------------------------------*/
+.responsive-tab .responsive-tab-link span {
+	display: inline-block;
+	font-size: 16px;
+	position: relative;
+	width: 16px;
+	line-height: 14px;
+	text-decoration: none;
+}
+
+#minitabs .responsive-tab .responsive-tab-link span {
+	display: block;
+}
+
+.responsive-tab .responsive-tab-link span:before {
+	content: '';
+	position: absolute;
+	left: 5px;
+	top: 8px;
+	height: .125em;
+	width: 14px;
+	border-bottom: 0.125em solid transparent;
+	border-top: 0.375em double transparent;
+}
+
+#minitabs .responsive-tab .responsive-tab-link span:before {
+	left: 0;
+	top: 2px;
+}
+
+#tabs ul, #minitabs ul {
+	position: relative;
+}
+
+#tabs ul.responsive-tabs, #minitabs ul.responsive-tabs {
+	position: absolute;
+	right: 0;
+	top: 26px;
+	z-index: 2;
+	border: 1px solid transparent;
+	border-radius: 5px;
+}
+
+#minitabs ul.responsive-tabs {
+	top: 23px;
+}
+
+.tabs-container #minitabs ul.responsive-tabs {
+	right: auto;
+	left: 0;
+}
+
+#tabs .responsive-tabs li, #minitabs .responsive-tabs li {
+	display: block !important;
+}
+
+#tabs .responsive-tabs a, #tabs .responsive-tabs a span, #minitabs .responsive-tabs a, #minitabs .responsive-tabs a span {
+	background: transparent;
+	float: none;
+	margin: 0;
+	padding: 0;
+	text-align: right;
+}
+
+.tabs-container #minitabs .responsive-tabs a span {
+	text-align: left;
+}
+
+#tabs .responsive-tabs a span, #minitabs .responsive-tabs a span {
+	padding: 5px;
+}
+
 /* UCP navigation menu
 ----------------------------------------*/
 /* Container for sub-navigation list */

phpBB/styles/prosilver/theme/responsive.css

@@ -0,0 +1,515 @@
+/* Responsive Design
+---------------------------------------- */
+
+.responsive-hide { display: none !important; }
+.responsive-show { display: block !important; }
+.responsive-show-inline { display: inline !important; }
+.responsive-show-inline-block { display: inline-block !important; }
+
+/* Content wrappers
+----------------------------------------*/
+html {
+	height: auto;
+}
+
+body {
+	padding: 0 5px;
+}
+
+#wrap {
+	min-width: 320px;
+	padding: 0;
+}
+
+/* Common block wrappers
+----------------------------------------*/
+.headerbar, .navbar, .forabg, .forumbg, .post, .panel {
+	border-radius: 0;
+	margin-left: -5px;
+	margin-right: -5px;
+}
+
+#cp-main .forabg, #cp-main .forumdb, #cp-main .post, #cp-main .panel {
+	border-radius: 7px;
+}
+
+/* Logo block
+----------------------------------------*/
+#site-description {
+	float: none;
+	width: auto;
+	text-align: center;
+}
+
+#logo {
+	/* change display value to inline-block to show logo */
+	display: none;
+	float: none;
+	padding: 10px;
+}
+
+#site-description h1, #site-description p {
+	text-align: inherit;
+	float: none;
+	margin: 5px;
+	line-height: 1.2em;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+#site-description p, #search-box {
+	display: none;
+}
+
+/* Navigation
+----------------------------------------*/
+.headerbar + .navbar {
+	margin-top: -5px;
+}
+
+/* Search
+----------------------------------------*/
+.responsive-search { display: block !important; }
+.responsive-search a {
+	display: block;
+	width: 16px;
+	height: 18px;
+	text-indent: 99px;
+	overflow: hidden;
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	text-decoration: none;
+}
+
+/* .topiclist lists
+----------------------------------------*/
+li.header dt {
+	text-align: center;
+	text-transform: none;
+	line-height: 1em;
+	font-size: 1.2em;
+	padding-bottom: 4px;
+}
+
+ul.topiclist li.header dt, ul.topiclist li.header dt .list-inner {
+	margin-right: 0 !important;
+	padding-right: 0;
+}
+
+ul.topiclist li.header dd {
+	display: none !important;
+}
+
+ul.topiclist dt, ul.topiclist dt .list-inner,
+ul.topiclist.missing-column dt, ul.topiclist.missing-column dt .list-inner,
+ul.topiclist.two-long-columns dt, ul.topiclist.two-long-columns dt .list-inner,
+ul.topiclist.two-columns dt, ul.topiclist.two-columns dt .list-inner {
+	margin-right: 0;
+}
+
+ul.topiclist dt .list-inner.with-mark {
+	padding-right: 34px;
+}
+
+ul.topiclist dt .list-inner {
+	min-height: 28px;
+}
+
+ul.topiclist li.header dt .list-inner {
+	min-height: 0;
+}
+
+ul.topiclist dd { 
+	display: none; 
+}
+ul.topiclist dd.mark { 
+	display: block; 
+}
+
+/* Forums and topics lists
+----------------------------------------*/
+ul.topiclist.forums dt, ul.topiclist.topics dt {
+	margin-right: -250px;
+}
+ul.topiclist.forums dt .list-inner, ul.topiclist.topics dt .list-inner {
+	margin-right: 250px;
+	padding-bottom: 18px;
+}
+
+ul.topiclist.forums dd.lastpost, ul.topiclist.topics dd.lastpost {
+	display: block;
+}
+
+ul.topiclist.forums dd.topics, ul.topiclist.topics dd.posts {
+	display: block;
+	position: absolute;
+	left: 45px;
+	right: 0;
+	bottom: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	min-height: 0;
+	height: auto;
+	border-width: 0;
+	margin: 0;
+	padding: 5px 0;
+	width: auto;
+	min-width: 0;
+	text-align: left;
+	font-weight: bold;
+	font-size: 1.2em;
+	line-height: 1em;
+}
+
+ul.topiclist dd.mark {
+	display: block;
+	position: absolute;
+	right: 5px;
+	top: 0;
+	margin: 0;
+	width: auto;
+	min-width: 0;
+	text-align: left;
+}
+
+ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn {
+	position: relative;
+	left: 0;
+	width: auto;
+	display: inline;
+	font-weight: normal;
+}
+
+@media only screen and (max-width: 550px), only screen and (max-device-width: 550px)
+{
+	ul.topiclist.forums dt, ul.topiclist.topics dt {
+		margin-right: 0;
+	}
+
+	ul.topiclist.forums dt .list-inner, ul.topiclist.topics dt .list-inner {
+		margin-right: 0;
+	}
+
+	ul.topiclist.forums dd.lastpost, ul.topiclist.topics dd.lastpost {
+		display: none;
+	}
+}
+
+/* Notifications list
+----------------------------------------*/
+@media only screen and (max-width: 350px), only screen and (max-device-width: 350px)
+{
+	#notification_list {
+		width: 250px;
+	}
+}
+
+/* Pagination
+----------------------------------------*/
+.pagination {
+	margin: 5px 0;
+}
+
+/* *CP navigation
+----------------------------------------*/
+.nojs #tabs a span, .nojs #minitabs a span {
+	max-width: 40px; 
+	overflow: hidden;
+	text-overflow: ellipsis;
+	letter-spacing: -.5px;
+}
+
+#cp-menu, #navigation, #cp-main {
+	float: none;
+	width: auto;
+	margin: 0;
+}
+
+#navigation { 
+	padding: 0; 
+	margin: 0 auto;
+	max-width: 320px;
+}
+
+#navigation a {
+	background-image: none;
+}
+
+#navigation li:first-child a {
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+}
+
+#navigation li:last-child a {
+	border-bottom-left-radius: 5px;
+	border-bottom-right-radius: 5px;
+}
+
+/* Responsive tables
+----------------------------------------*/
+table.responsive, table.responsive tbody, table.responsive tr, table.responsive td {
+	display: block;
+}
+
+table.responsive thead, table.responsive th {
+	display: none;
+}
+
+table.responsive.show-header thead, table.responsive.show-header th:first-child {
+	display: block;
+	width: auto !important;
+	text-align: left !important;
+}
+
+table.responsive tr {
+	margin: 2px 0;
+}
+
+table.responsive td {
+	width: auto !important;
+	text-align: left !important;
+	padding: 4px;
+}
+
+table.responsive td.empty {
+	display: none !important;
+}
+
+table.responsive td > dfn {
+	display: inline-block !important;
+}
+
+table.responsive td > dfn:after {
+	content: ':';
+	padding-right: 5px;
+}
+
+table.responsive span.rank-img {
+	float: none;
+	padding-right: 5px;
+}
+
+table.responsive#memberlist td:first-child input[type="checkbox"] {
+	float: right;
+}
+
+/* Forms
+----------------------------------------*/
+fieldset dt, fieldset.fields1 dt, fieldset.fields2 dt {
+	width: auto;
+	float: none;
+}
+
+fieldset dd, fieldset.fields1 dd, fieldset.fields2 dd {
+	margin-left: 20px;
+}
+
+textarea, dd textarea, #message-box textarea {
+	width: 100%;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+dl.pmlist dt {
+	width: auto !important;
+	margin-bottom: 5px;
+}
+
+dl.pmlist dd {
+	display: inline-block;
+	margin-left: 0 !important;
+}
+
+dl.pmlist dd:first-of-type {
+	padding-left: 20px;
+}
+
+#smiley-box, #message-box {
+	float: none;
+	width: auto;
+}
+
+#smiley-box {
+	margin-top: 5px;
+}
+
+.bbcode-status {
+	display: none;
+}
+
+#colour_palette table, #colour_palette tbody, #colour_palette tr {
+	display: block;
+}
+
+#colour_palette td {
+	display: inline-block;
+	margin-right: 2px;
+}
+
+#colour_palette td:nth-child(2n) {
+	display: none;
+}
+
+#colour_palette a {
+	display: inline-block !important;
+}
+
+/* User profile
+----------------------------------------*/
+.column1, .column2, .left-box.profile-details {
+	float: none;
+	width: auto;
+}
+
+@media only screen and (max-width: 500px), only screen and (max-device-width: 500px)
+{
+	dl.details dt, dl.details dd {
+		width: auto;
+		float: none;
+		text-align: left;	
+	}
+
+	dl.details dd {
+		margin-left: 20px;
+	}
+}
+
+/* Polls
+----------------------------------------*/
+fieldset.polls dt {
+	width: 90%;
+}
+
+fieldset.polls dd.resultbar {
+	padding-left: 20px;
+}
+
+fieldset.polls dd.poll_option_percent {
+	width: 20%;
+}
+
+fieldset.polls dd.resultbar, fieldset.polls dd.poll_option_percent {
+	margin-top: 5px;
+}
+
+/* Post
+----------------------------------------*/
+.postprofile, .postbody, .search .postbody {
+	display: block;
+	width: auto;
+	float: none;
+	padding: 0;
+	min-height: 0;
+}
+
+.post .postprofile {
+	width: auto;
+	border-width: 0 0 1px 0;
+	padding-bottom: 5px;
+	margin: 0;
+	margin-bottom: 5px;
+	overflow: hidden;
+}
+
+.postprofile dd {
+	display: none;
+}
+
+.postprofile dt, .postprofile dd.profile-rank, .search .postprofile dd {
+	display: block;
+	margin: 0;
+}
+
+.postprofile ul.profile-icons {
+	display: none;
+}
+
+.postprofile .avatar {
+	display: block;
+	float: left;
+	margin-right: 5px;
+}
+
+.postprofile .avatar img {
+	width: auto !important;
+	height: auto !important;
+	display: block;
+	max-height: 32px;
+}
+
+/* Misc stuff
+----------------------------------------*/
+h2 {
+	margin-top: .5em;
+}
+
+p {
+	margin-bottom: .5em;
+	overflow: hidden;
+}
+
+p.rightside {
+	margin-bottom: 0;
+}
+
+.column1, .column2 {
+	width: auto;
+	float: none;
+}
+
+.topic-actions {
+	overflow: hidden;
+}
+
+fieldset.quickmod {
+	width: auto;
+	float: none;
+	text-align: center;
+}
+
+dl.mini dd.pm-legend {
+	float: left;
+	min-width: 200px;
+}
+
+#topicreview {
+	margin: 0 -5px;
+	padding: 0 5px;
+}
+
+fieldset.display-actions {
+	white-space: normal;
+}
+
+@media only screen and (max-width: 500px), only screen and (max-device-width: 500px)
+{
+	p.responsive-center {
+		float: none;
+		text-align: center;
+		margin: 0;
+	}
+
+	.topic-actions > div {
+		float: none;
+		overflow: hidden;
+		clear: both;
+	}
+
+	.topic-actions > .pagination, fieldset.jumpbox {
+		text-align: center;
+	}
+
+	.topic-actions > .pagination {
+		padding-bottom: 1px;
+	}
+
+	.topic-actions > div.search-box, p.jumpbox-return {
+		display: none;
+	}
+
+	.display-options > label:nth-child(1) {
+		display: block;
+		margin-bottom: 5px;
+	}
+}