4 files changed, 76 insertions, 97 deletions
diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css
index 0f22bc100d..7204e4e53c 100644
--- a/phpBB/adm/style/admin.css
+++ b/phpBB/adm/style/admin.css
@@ -320,176 +320,155 @@ li {
 
 
 /* Tabbed menu
-	Based on: http://www.alistapart.com/articles/slidingdoors2/
 ----------------------------------------*/
 #tabs {
+	font-family: Arial, Helvetica, sans-serif;
 	line-height: normal;
 	margin: 0 7px;
-	min-width: 600px;
 	position: relative;
 	z-index: 2;
 }
 
-#tabs ul {
-	margin:0;
-	padding: 0;
+#tabs > ul {
 	list-style: none;
-}
-
-#tabs ul:after {
-	content: '';
-	display: block;
-	clear: both;
-}
-
-#tabs li {
-	display: block;
-	float: left;
 	margin: 0;
 	padding: 0;
-	font-size: 0.85em;
-	font-weight: bold;
 }
 
-#tabs li:after {
+#tabs > ul:after {
 	content: '';
 	display: block;
 	clear: both;
 }
 
-#tabs a {
+#tabs .tab {
+	display: inline-block;
 	float: left;
-	background:url("../images/bg_tabs1.gif") no-repeat 0% -34px;
-	margin: 0 1px 0 0;
-	padding: 0 0 0 7px;
-	text-decoration: none;
-	position: relative;
+	font-size: 0.85em;
+	font-weight: bold;
+	line-height: 14px;
 }
 
-.rtl #tabs li {
+.rtl #tabs .tab {
 	float: right;
 }
 
-#tabs a span {
-	float: left;
-	display: block;
-	background: url("../images/bg_tabs2.gif") no-repeat 100% -34px;
-	padding: 7px 10px 4px 4px;
-	min-height: 14px;
+#tabs .tab > a {
+	background: #D4D6DA;
+	background: -moz-linear-gradient(top, #CACBCF 0%, #D4D6DA 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #CACBCF), color-stop(100%, #D4D6DA));
+	background: -webkit-linear-gradient(top, #CACBCF 0%, #D4D6DA 100%);
+	background: -o-linear-gradient(top, #CACBCF 0%, #D4D6DA 100%);
+	background: -ms-linear-gradient(top, #CACBCF 0%, #D4D6DA 100%);
+	background: linear-gradient(to bottom, #CACBCF 0%, #D4D6DA 100%);
+	border: 1px solid #BBB;
+	border-bottom-width: 0;
+	border-radius: 5px 5px 0 0;
 	color: #767676;
-	white-space: nowrap;
-	font-family: Arial, Helvetica, sans-serif;
-	text-transform: uppercase;
+	display: block;
 	font-weight: bold;
+	margin: 1px 1px 2px 0;
+	padding: 6px 9px 4px;
+	position: relative;
+	text-decoration: none;
+	text-transform: uppercase;
+	white-space: nowrap;
+	cursor: pointer;
 }
 
-.rtl #tabs a span {
-	float: right;
-}
-
-/* Commented Backslash Hack hides rule from IE5-Mac \*/
-#tabs a span, .rtl #tabs a span { float:none;}
-/* End hack */
-
-#tabs a:hover span {
+#tabs .tab > a:hover {
+	background: #F1F1EE;
+	border-color: #C0BFBB;
 	color: #BC2A4D;
 }
 
-#tabs a:hover {
-	background-position: 0 -69px;
-}
-
-#tabs a:hover span {
-	background-position: 100% -69px;
-}
-
-#tabs .activetab a {
-	background-position: 0 0;
-	border-bottom: 1px solid #DCDEE2;
-}
-
-#tabs .activetab a span {
-	background-position: 100% 0;
-	padding-bottom: 5px;
+#tabs .activetab > a,
+#tabs .activetab > a:hover {
+	background: #DCDEE2;
+	background: -moz-linear-gradient(top, #F2F2F2 0%, #DCDEE2 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F2F2F2), color-stop(100%, #DCDEE2));
+	background: -webkit-linear-gradient(top, #F2F2F2 0%, #DCDEE2 100%);
+	background: -o-linear-gradient(top, #F2F2F2 0%, #DCDEE2 100%);
+	background: -ms-linear-gradient(top, #F2F2F2 0%, #DCDEE2 100%);
+	background: linear-gradient(to bottom, #F2F2F2 0%, #DCDEE2 100%);
+	border-color: #999;
+	box-shadow: 0 1px 1px #FFF inset;
 	color: #23649F;
+	margin: 0 1px 0 0;
+	padding: 7px 10px 6px;
 }
 
-#tabs .activetab a:hover span {
+#tabs .activetab > a:hover {
 	color: #115098;
 }
 
+/* Responsive tabs
+----------------------------------------*/
 .responsive-tab {
 	position: relative;
 }
 
-.responsive-tab .responsive-tab-link span {
-	display: inline-block;
+.responsive-tab > a.responsive-tab-link {
+	display: block;
 	font-size: 16px;
 	position: relative;
 	width: 16px;
 	line-height: 14px;
 	text-decoration: none;
+	padding-left: 9px !important;
+	padding-right: 9px !important;
 }
 
-.responsive-tab .responsive-tab-link span:before {
+.responsive-tab .responsive-tab-link:before {
 	content: '';
 	position: absolute;
-	left: 5px;
-	top: 8px;
+	left: 10px;
+	top: 7px;
 	height: .125em;
 	width: 14px;
 	border-bottom: 0.125em solid #767676;
 	border-top: 0.375em double #767676;
 }
 
-.responsive-tab .responsive-tab-link:hover span:before {
+.responsive-tab .responsive-tab-link:hover:before {
 	border-color: #BC2A4D;
 }
 
-.responsive-tab.activetab .responsive-tab-link span:before {
+.responsive-tab.activetab .responsive-tab-link:before {
 	border-color: #23649F;
 }
 
-.responsive-tab.activetab .responsive-tab-link:hover span:before {
+.responsive-tab.activetab .responsive-tab-link:hover:before {
 	border-color: #115098;
 }
 
-#tabs .dropdown {
-	top: 18px;
-	margin-right: -1px;
+#tabs .dropdown, #minitabs .dropdown {
+	top: 20px;
+	margin-right: -2px;
+	font-weight: normal;
 }
 
 #tabs .dropdown-right .dropdown {
 	margin-left: -2px;
 }
 
-#tabs .dropdown li {
-	display: block !important;
-	float: none;
-	background: transparent none;
-	padding: 0;
+#tabs .dropdown-contents {
+	list-style: none;
+	margin: 0;
 }
 
-#tabs .dropdown a, #tabs .dropdown a span {
-	background: transparent;
-	display: block;
-	border-width: 0;
-	float: none;
-	margin: 0;
-	padding: 0;
-	text-align: right;
+#tabs .dropdown li {
+	border-bottom: 1px dotted #DCDCDC;
 }
 
-#tabs .dropdown a span {
-	padding: 4px 8px;
-	color: inherit !important;
+#tabs .dropdown li:last-child {
+	border-bottom: none;
 }
 
-@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
-{
-	#tabs {
-		min-width: 0;
-	}
+#tabs .dropdown a {
+	display: block;
+	padding: 4px 8px;
+	text-align: right;
 }
 
 /* Main Panel
diff --git a/phpBB/adm/style/admin.js b/phpBB/adm/style/admin.js
index a839e7e0e2..253fd46a62 100644
--- a/phpBB/adm/style/admin.js
+++ b/phpBB/adm/style/admin.js
@@ -169,7 +169,7 @@ function parse_document(container)
 			ul = $this.children(),
 			tabs = ul.children().not('[data-skip-responsive]'),
 			links = tabs.children('a'),
-			item = ul.append('<li class="responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link"><span>&nbsp;</span></a><div class="dropdown tab-dropdown" style="display: none;"><div class="pointer"><div class="pointer-inner" /></div><ul class="dropdown-contents" /></div></li>').find('li.responsive-tab'),
+			item = ul.append('<li class="tab responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link">&nbsp;</a><div class="dropdown tab-dropdown" style="display: none;"><div class="pointer"><div class="pointer-inner" /></div><ul class="dropdown-contents" /></div></li>').find('li.responsive-tab'),
 			menu = item.find('.dropdown-contents'),
 			maxHeight = 0,
 			lastWidth = false,
@@ -211,7 +211,7 @@ function parse_document(container)
 
 			for (i = total - 1; i >= 0; i --) {
 				tab = availableTabs.eq(i);
-				menu.prepend(tab.clone(true));
+				menu.prepend(tab.clone(true).removeClass('tab'));
 				tab.hide();
 				if ($this.height() <= maxHeight) {
 					menu.find('a').click(function() { check(true); });
diff --git a/phpBB/adm/style/install_header.html b/phpBB/adm/style/install_header.html
index a8f7009e4b..c818a4fc6d 100644
--- a/phpBB/adm/style/install_header.html
+++ b/phpBB/adm/style/install_header.html
@@ -29,7 +29,7 @@
 		<div id="tabs">
 			<ul>
 			<!-- BEGIN t_block1 -->
-				<li<!-- IF t_block1.S_SELECTED --> class="activetab"<!-- ENDIF -->><a href="{t_block1.U_TITLE}"><span>{t_block1.L_TITLE}</span></a></li>
+				<li class="tab<!-- IF t_block1.S_SELECTED --> activetab<!-- ENDIF -->"><a href="{t_block1.U_TITLE}">{t_block1.L_TITLE}</a></li>
 			<!-- END t_block1 -->
 			</ul>
 		</div>
diff --git a/phpBB/adm/style/overall_header.html b/phpBB/adm/style/overall_header.html
index 25a82a5faa..afd2b94924 100644
--- a/phpBB/adm/style/overall_header.html
+++ b/phpBB/adm/style/overall_header.html
@@ -106,7 +106,7 @@ function popup(url, width, height, name)
 		<div id="tabs">
 			<ul>
 			<!-- BEGIN t_block1 -->
-				<li<!-- IF t_block1.S_SELECTED --> class="activetab"<!-- ENDIF -->><a href="{t_block1.U_TITLE}"><span>{t_block1.L_TITLE}</span></a></li>
+				<li class="tab<!-- IF t_block1.S_SELECTED --> activetab<!-- ENDIF -->"><a href="{t_block1.U_TITLE}">{t_block1.L_TITLE}</a></li>
 			<!-- END t_block1 -->
 			</ul>
 		</div>