1 files changed, 160 insertions, 142 deletions
diff --git a/phpBB/styles/prosilver/theme/cp.css b/phpBB/styles/prosilver/theme/cp.css
index 7c7158bd00..bf235b3fb5 100644
--- a/phpBB/styles/prosilver/theme/cp.css
+++ b/phpBB/styles/prosilver/theme/cp.css
@@ -20,46 +20,40 @@
 	padding: 0;
 }
 
-#cp-main h3, #cp-main hr, #cp-menu hr {
-	border-color: #bfbfbf;
-}
-
-#cp-main .panel p {
+.panel-container .panel p {
 	font-size: 1.1em;
 }
 
-#cp-main .panel ol {
+.panel-container .panel ol {
 	margin-left: 2em;
 	font-size: 1.1em;
 }
 
-#cp-main .panel li.row {
-	border-bottom: 1px solid #cbcbcb;
-	border-top: 1px solid #F9F9F9;
+.panel-container .panel li.row {
+	border-bottom: 1px solid transparent;
+	border-top: 1px solid transparent;
 }
 
 ul.cplist {
 	margin-bottom: 5px;
-	border-top: 1px solid #cbcbcb;
+	border-top: 1px solid transparent;
 }
 
-#cp-main .panel li.header dd, #cp-main .panel li.header dt {
-	color: #000000;
+.panel-container .panel li.header dd, .panel-container .panel li.header dt {
 	margin-bottom: 2px;
 }
 
-#cp-main table.table1 {
+.panel-container table.table1 {
 	margin-bottom: 1em;
 }
 
-#cp-main table.table1 thead th {
-	color: #333333;
+.panel-container table.table1 thead th {
 	font-weight: bold;
-	border-bottom: 1px solid #333333;
+	border-bottom: 1px solid transparent;
 	padding: 5px;
 }
 
-#cp-main table.table1 tbody th {
+.panel-container table.table1 tbody th {
 	font-style: italic;
 	background-color: transparent !important;
 	border-bottom: none;
@@ -76,9 +70,8 @@ ul.cplist {
 }
 
 #cp-main .pm-message {
-	border: 1px solid #e2e2e2;
+	border: 1px solid transparent;
 	margin: 10px 0;
-	background-color: #FFFFFF;
 	width: auto;
 	float: none;
 }
@@ -109,11 +102,6 @@ ul.cplist {
 	margin-bottom: 0px;
 }
 
-.tabs-container #minitabs {
-	float: right;
-	margin-top: 19px;
-}
-
 .tabs-container:after {
 	display: block;
 	clear: both;
@@ -125,7 +113,7 @@ ul.cplist {
 #tabs {
 	line-height: normal;
 	margin: 20px 0 -1px 7px;
-	min-width: 570px;
+	*overflow: hidden;
 }
 
 #tabs ul {
@@ -134,6 +122,12 @@ ul.cplist {
 	list-style: none;
 }
 
+#tabs ul:after {
+	content: '';
+	display: block;
+	clear: both;
+}
+
 #tabs li {
 	display: inline;
 	margin: 0;
@@ -157,23 +151,17 @@ ul.cplist {
 	display: block;
 	background: none no-repeat 100% -35px;
 	padding: 6px 10px 6px 5px;
-	color: #828282;
 	white-space: nowrap;
 }
 
-#tabs a:hover span {
-	color: #bcbcbc;
-}
-
 #tabs .activetab a {
 	background-position: 0 0;
-	border-bottom: 1px solid #ebebeb;
+	border-bottom: 1px solid transparent;
 }
 
 #tabs .activetab a span {
 	background-position: 100% 0;
 	padding-bottom: 7px;
-	color: #333333;
 }
 
 #tabs a:hover {
@@ -189,7 +177,6 @@ ul.cplist {
 }
 
 #tabs .activetab a:hover span {
-	color: #000000;
 	background-position: 100% 0;
 }
 
@@ -200,6 +187,12 @@ ul.cplist {
 	margin: -20px 7px 0 0;
 }
 
+.tabs-container #minitabs {
+	float: right;
+	margin-top: 19px;
+	max-width: 50%;
+}
+
 #minitabs ul {
 	margin:0;
 	padding: 0;
@@ -209,10 +202,11 @@ ul.cplist {
 #minitabs li {
 	display: block;
 	float: right;
-	padding: 0 10px 4px 10px;
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+	padding: 5px 10px 4px 10px;
 	font-size: 1em;
 	font-weight: bold;
-	background-color: #f2f2f2;
 	margin-left: 2px;
 }
 
@@ -223,14 +217,95 @@ ul.cplist {
 	text-decoration: none;
 }
 
-#minitabs li.activetab {
-	background-color: #F9F9F9;
+/* Responsive tabs
+----------------------------------------*/
+.responsive-tab {
+	position: relative;
+}
+
+.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 .dropdown, #minitabs .dropdown {
+	top: 29px;
+	margin-right: -1px;
+}
+
+#minitabs .dropdown {
+	top: 18px;
+}
+
+#tabs .dropdown-up .dropdown, #minitabs .dropdown-up .dropdown {
+	bottom: -5px;
+	top: auto;
+}
+
+#minitabs .dropdown-up .dropdown {
+	bottom: 18px;
+}
+
+#tabs .dropdown-right .dropdown, #minitabs .dropdown-right .dropdown {
+	margin-left: -41px;
+}
+
+#tabs .dropdown li, #minitabs .dropdown li {
+	display: block !important;
+	background: transparent none;
+	padding: 0;
+}
+
+.tabs-container #minitabs .dropdown a span {
+	display: block;
+}
+
+#tabs .dropdown a, #tabs .dropdown a span, #minitabs .dropdown a, #minitabs .dropdown a span {
+	background: transparent;
+	float: none;
+	margin: 0;
+	padding: 0;
+	text-align: right;
+}
+
+.tabs-container #minitabs .dropdown a span {
+	text-align: left;
 }
 
-#minitabs li.activetab a, #minitabs li.activetab a:hover {
-	color: #333333;
+#tabs .dropdown a span, #minitabs .dropdown a span {
+	padding: 5px 8px;
+	color: inherit !important;
 }
 
+
 /* UCP navigation menu
 ----------------------------------------*/
 /* Container for sub-navigation list */
@@ -258,92 +333,36 @@ ul.cplist {
 	margin: 1px 0;
 	text-decoration: none;
 	font-weight: bold;
-	color: #333;
-	background: #cfcfcf none repeat-y 100% 0;
+	background: transparent none repeat-y 100% 0;
 }
 
 #navigation a:hover {
 	text-decoration: none;
-	background-color: #c6c6c6;
-	color: #bcbcbc;
 	background-image: none;
 }
 
 #navigation #active-subsection a {
 	display: block;
-	color: #d3d3d3;
-	background-color: #F9F9F9;
 	background-image: none;
 }
 
-#navigation #active-subsection a:hover {
-	color: #d3d3d3;
-}
-
 /* Preferences pane layout
 ----------------------------------------*/
 #cp-main h2 {
 	border-bottom: none;
 	padding: 0;
 	margin-left: 10px;
-	color: #333333;
-}
-
-#cp-main .panel {
-	background-color: #F9F9F9;
-}
-
-#cp-main .pm {
-	background-color: #FFFFFF;
-}
-
-#cp-main span.corners-top, #cp-menu span.corners-top {
-	background-image: none;
-}
-
-#cp-main span.corners-top span, #cp-menu span.corners-top span {
-	background-image: none;
-}
-
-#cp-main span.corners-bottom, #cp-menu span.corners-bottom {
-	background-image: none;
-}
-
-#cp-main span.corners-bottom span, #cp-menu span.corners-bottom span {
-	background-image: none;
-}
-
-/* Topicreview */
-#cp-main .panel #topicreview span.corners-top, #cp-menu .panel #topicreview span.corners-top {
-	background-image: none;
-}
-
-#cp-main .panel #topicreview span.corners-top span, #cp-menu .panel #topicreview span.corners-top span {
-	background-image: none;
-}
-
-#cp-main .panel #topicreview span.corners-bottom, #cp-menu .panel #topicreview span.corners-bottom {
-	background-image: none;
-}
-
-#cp-main .panel #topicreview span.corners-bottom span, #cp-menu .panel #topicreview span.corners-bottom span {
-	background-image: none;
 }
 
 /* Friends list */
 .cp-mini {
-	background-color: #f9f9f9;
-	padding: 0 5px;
 	margin: 10px 15px 10px 5px;
-}
-
-.cp-mini span.corners-top, .cp-mini span.corners-bottom {
-	margin: 0 -5px;
+	padding: 5px 10px;
+	border-radius: 7px;
 }
 
 dl.mini dt {
 	font-weight: bold;
-	color: #676767;
 }
 
 dl.mini dd {
@@ -364,25 +383,6 @@ dl.mini dd {
 	line-height: 2.5em;
 }
 
-/* PM panel adjustments */
-.reply-all a.left {
-	background-position: 3px 60%;
-}
-
-.reply-all a.left:hover {
-	background-position: 0px 60%;
-}
-
-.reply-all {
-	font-size: 11px;
-	padding-top: 5px;
-}
-
-/* PM Message history */
-.current {
-	color: #999999;
-}
-
 /* Defined rules list for PM options */
 ol.def-rules {
 	padding-left: 0;
@@ -403,31 +403,16 @@ ol.def-rules li {
 }
 
 .pmlist li.pm_message_reported_colour, .pm_message_reported_colour {
-	border-left-color: #bcbcbc;
-	border-right-color: #bcbcbc;
-}
-
-.pmlist li.pm_marked_colour, .pm_marked_colour {
-	padding: 0;
-	border: solid 3px #ffffff;
-	border-width: 0 3px;
-}
-
-.pmlist li.pm_replied_colour, .pm_replied_colour {
-	padding: 0;
-	border: solid 3px #c2c2c2;
-	border-width: 0 3px;
-}
-
-.pmlist li.pm_friend_colour, .pm_friend_colour {
-	padding: 0;
-	border: solid 3px #bdbdbd;
-	border-width: 0 3px;
+	border-left-color: transparent;
+	border-right-color: transparent;
 }
 
+.pmlist li.pm_marked_colour, .pm_marked_colour, 
+.pmlist li.pm_replied_colour, .pm_replied_colour,
+.pmlist li.pm_friend_colour, .pm_friend_colour,
 .pmlist li.pm_foe_colour, .pm_foe_colour {
 	padding: 0;
-	border: solid 3px #000000;
+	border: solid 3px transparent;
 	border-width: 0 3px;
 }
 
@@ -446,11 +431,44 @@ ol.def-rules li {
 	margin: 10px;
 	padding: 5px;
 	width: auto;
-	background: #FFFFFF;
-	border: 1px solid #CCC;
+	border: 1px solid transparent;
 	text-align: center;
 }
 
-#gallery label:hover {
-	background-color: #EEE;
+/* Responsive *CP navigation
+----------------------------------------*/
+@media only screen and (max-width: 900px), only screen and (max-device-width: 900px)
+{
+	.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;
+	}
 }