3 files changed, 119 insertions, 92 deletions
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
index c16452a148..19021ca387 100644
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/phpBB/styles/prosilver/theme/colours.css
@@ -1104,11 +1104,6 @@ input.disabled {
 	background-color: #000000;
 }
 
-#notification_list {
-	background-color: #FFFFFF;
-	border-color: #B9B9B9;
-}
-
 #notification_list ul li {
 	border-bottom-color: #B9B9B9;
 }
@@ -1118,12 +1113,12 @@ input.disabled {
 	color: #000000;
 }
 
-#notification_list > .header, .notification_list > .footer {
+#notification_list .header, .notification_list .footer {
 	border-color: #B9B9B9;
 	color: #000000;
 }
 
-#notification_list > .header {
+#notification_list .header {
 	background: #F1F8FF;
 	background: -moz-linear-gradient(top, #F1F8FF 0%, #CADCEB 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F1F8FF), color-stop(100%, #CADCEB));
@@ -1133,12 +1128,16 @@ input.disabled {
 	background: linear-gradient(to bottom, #F1F8FF 0%, #CADCEB 100%);
 }
 
-.popup-pointer {
-	border-bottom-color: #B9B9B9;
+.dropdown .pointer {
+	border-color: #B9B9B9 transparent;
+}
+
+.dropdown .pointer-inner {
+	border-color: #FFF transparent;
 }
 
-.popup-pointer-inner {
-	border-bottom-color: #F1F8FF;
+#notification_list .pointer-inner {
+	border-color: #F1F8FF transparent;
 }
 
 ul.linklist li.responsive-menu a.responsive-menu-link:before {
@@ -1149,22 +1148,11 @@ ul.linklist li.responsive-menu a.responsive-menu-link:hover:before, ul.linklist
 	border-color: #D31141;
 }
 
-ul.responsive-popup {
+.dropdown .dropdown-contents {
 	background: #fff;
 	border-color: #b9b9b9;
 	box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
 }
-
-.responsive-menu .popup-pointer {
-	border-bottom-color: #b9b9b9;
-}
-
-.responsive-menu .popup-pointer-inner {
-	border-bottom-color: #fff;
-}
-
-#tabs ul.responsive-tabs, #minitabs ul.responsive-tabs {
-	background: #ddedfb;
-	border-color: #c0c9d5;
-	box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4);
+.dropdown-up .dropdown-contents {
+	box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2);
 }
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css
index 4f55d3e92c..9e15eada22 100644
--- a/phpBB/styles/prosilver/theme/common.css
+++ b/phpBB/styles/prosilver/theme/common.css
@@ -363,6 +363,7 @@ ul.rightside {
 
 ul.linklist li.responsive-menu {
 	position: relative;
+	margin: 0 5px;
 }
 
 ul.linklist li.responsive-menu a.responsive-menu-link {
@@ -394,6 +395,24 @@ ul.linklist li.responsive-menu a.responsive-menu-link:before {
 	max-width: none;
 }
 
+li.responsive-menu.dropdown-right .dropdown {
+	left: -9px;
+}
+
+li.responsive-menu.dropdown-left .dropdown {
+	right: -6px;
+}
+
+li.responsive-menu .dropdown .dropdown-contents {
+	padding: 0 5px;
+}
+
+ul.linklist .dropdown li {
+	clear: both;
+}
+
+
+
 /* Bulletin icons for list items
 ----------------------------------------*/
 ul.linklist.bulletin li:before {
@@ -416,54 +435,95 @@ ul.linklist.bulletin li.no-bulletin:before {
 	display: none !important;
 }
 
-/* Responsive popup
+/* Dropdown menu
 ----------------------------------------*/
-ul.responsive-popup {
+.dropdown {
 	position: absolute;
 	left: 0;
 	top: 22px;
 	z-index: 2;
 	border: 1px solid transparent;
 	border-radius: 5px;
-	padding: 5px;
+	padding: 9px 0 0;
 }
 
-.responsive-rightside ul.responsive-popup {
+.dropdown-up .dropdown {
+	top: auto;
+	bottom: 18px;
+	padding: 0 0 9px;
+}
+
+.dropdown-left .dropdown {
 	left: auto;
 	right: 0;
 }
 
-.responsive-menu .popup-pointer {
-	top: 22px;
+
+.dropdown .pointer, .dropdown .pointer-inner {
+	position: absolute;
+	width: 0;
+	height: 0;
+	border-top-width: 0;
+	border-bottom: 10px solid transparent;
+	border-left: 10px dashed transparent;
+	border-right: 10px dashed transparent;
+	-webkit-transform: rotate(360deg); /* better anti-aliasing in webkit */
+	display: block;
+}
+
+.dropdown-up .pointer, .dropdown-up .pointer-inner {
+	border-bottom-width: 0;
+	border-top: 10px solid transparent;
+}
+
+.dropdown .pointer {
+	right: auto;
+	left: 10px;
+	top: 0;
 	z-index: 3;
-	left: 2px;
 }
-.responsive-menu ul.responsive-popup {
-	top: 32px;
-	left: -5px;
+
+.dropdown-up .pointer {
+	bottom: 0;
+	top: auto;
 }
 
-.responsive-menu.responsive-rightside .popup-pointer {
+.dropdown-left .dropdown .pointer {
 	left: auto;
-	right: 2px;
+	right: 10px;
 }
-.responsive-menu.responsive-rightside ul.responsive-popup {
-	left: auto;
-	right: -5px;
+
+.dropdown .pointer-inner {
+	top: auto;
+	bottom: -11px;
+	left: -10px;
+}
+
+.dropdown-up .pointer-inner {
+	bottom: auto;
+	top: -11px;
 }
 
-ul.responsive-popup li {
+.dropdown .dropdown-contents {
+	z-index: 2;
+	overflow: hidden;
+	border: 1px solid transparent;
+	border-radius: 5px;
+	padding: 5px;
+}
+
+.dropdown li {
 	float: none;
 	margin: 0;
 	white-space: nowrap;
 	text-align: left;
 }
 
-.wrap ul.responsive-popup li {
+.wrap .dropdown li, .dropdown.wrap li {
 	white-space: normal;
 }
 
-ul.responsive-popup li:before, ul.responsive-popup li:after {
+.dropdown li:before, .dropdown li:after {
 	display: none !important;
 }
 
@@ -854,10 +914,7 @@ form > p.post-notice strong {
 	left: 0;
 	width: 330px;
 	z-index: 1;
-	border: 1px solid;
-	box-shadow: 3px 3px 5px darkgray;
-	border-radius: 5px;
-	top: 32px;
+	top: 22px;
 }
 
 #notification_list ul {
@@ -881,7 +938,11 @@ form > p.post-notice strong {
 	display: none;
 }
 
-#notification_list > .header {
+#notification_list .dropdown-contents {
+	padding: 0;
+}
+
+#notification_list .header {
 	padding: 0 10px;
 	font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif;
 	font-size: 11px;
@@ -893,18 +954,18 @@ form > p.post-notice strong {
 	border-radius: 5px 5px 0 0;
 }
 
-#notification_list > .header > .header_settings {
+#notification_list .header .header_settings {
 	float: right;
 	font-weight: normal;
 	text-transform: none;
 }
 
-#notification_list > .footer {
+#notification_list .footer {
 	text-align: center;
 	font-size: 1.2em;
 }
 
-#notification_list ul li a, .notification_list dt > a, #notification_list > .footer > a {
+#notification_list ul li a, .notification_list dt > a, #notification_list .footer > a {
 	display: block;
 	text-decoration: none;
 }
@@ -921,30 +982,6 @@ form > p.post-notice strong {
 	margin: 0;
 }
 
-.popup-pointer, .popup-pointer-inner {
-	position: absolute;
-	width: 0;
-	height: 0;
-	border-top-width: 0;
-	border-bottom: 10px solid;
-	border-left: 10px dashed transparent;
-	border-right: 10px dashed transparent;
-	-webkit-transform: rotate(360deg); /* better anti-aliasing in webkit */
-	display: block;
-}
-
-.popup-pointer {
-	right: auto;
-	left: 10px;
-	top: -11px;
-}
-
-.popup-pointer-inner {
-	top: auto;
-	bottom: -11px;
-	left: -10px;
-}
-
 .notification_list div.notifications {
 	padding: 5px;
 }
diff --git a/phpBB/styles/prosilver/theme/cp.css b/phpBB/styles/prosilver/theme/cp.css
index f6bb1d0623..3e017719d6 100644
--- a/phpBB/styles/prosilver/theme/cp.css
+++ b/phpBB/styles/prosilver/theme/cp.css
@@ -218,6 +218,10 @@ ul.cplist {
 
 /* Responsive tabs
 ----------------------------------------*/
+.responsive-tab {
+	position: relative;
+}
+
 .responsive-tab .responsive-tab-link span {
 	display: inline-block;
 	font-size: 16px;
@@ -251,29 +255,25 @@ ul.cplist {
 	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;
+#tabs .dropdown, #minitabs .dropdown {
+	top: 29px;
+	margin-right: -1px;
 }
 
-#minitabs ul.responsive-tabs {
-	top: 23px;
+#tabs .dropdown-up .dropdown, #minitabs .dropdown-up .dropdown {
+	bottom: -5px;
+	top: auto;
 }
 
-.tabs-container #minitabs ul.responsive-tabs {
-	right: auto;
-	left: 0;
+#tabs .dropdown-right .dropdown, #minitabs .dropdown-right .dropdown {
+	margin-left: -41px;
 }
 
-#tabs .responsive-tabs li, #minitabs .responsive-tabs li {
+#tabs .dropdown li, #minitabs .dropdown li {
 	display: block !important;
 }
 
-#tabs .responsive-tabs a, #tabs .responsive-tabs a span, #minitabs .responsive-tabs a, #minitabs .responsive-tabs a span {
+#tabs .dropdown a, #tabs .dropdown a span, #minitabs .dropdown a, #minitabs .dropdown a span {
 	background: transparent;
 	float: none;
 	margin: 0;
@@ -281,14 +281,16 @@ ul.cplist {
 	text-align: right;
 }
 
-.tabs-container #minitabs .responsive-tabs a span {
+.tabs-container #minitabs .dropdown a span {
 	text-align: left;
 }
 
-#tabs .responsive-tabs a span, #minitabs .responsive-tabs a span {
-	padding: 5px;
+#tabs .dropdown a span, #minitabs .dropdown a span {
+	padding: 5px 8px;
+	color: inherit !important;
 }
 
+
 /* UCP navigation menu
 ----------------------------------------*/
 /* Container for sub-navigation list */