Simplify thumbnail styling to have consistency with mobile implementation

Remove undocumented !important rule - !important is bad.

Bug: 65160
Change-Id: I21d6856d51478395cbe59e86e2f3aec495a74a38

skins/common/commonContent.css

@@ -143,7 +143,7 @@ html .thumbimage {
 html .thumbcaption {
 	border: none;
 	line-height: 1.4em;
-	padding: 3px !important;
+	padding: 3px;
 	font-size: 94%;
 }
 

skins/vector/components/thumbnails.less

@@ -0,0 +1,32 @@
+// FIXME: Due to commonContent.css we have to use html tag to make sure these are more specific
+html .thumb {
+	&.tright {
+		padding: 1px 0 0 15px;
+	}
+
+	&.tleft {
+		padding: 1px 15px 0 0;
+	}
+
+	// these resets should be unnecessary
+	div.thumbinner {
+		border: none;
+		background: none;
+		font-size: 100%;
+	}
+
+	.thumbcaption {
+		line-height: @content-line-height;
+		font-size: .85em;
+		padding: 3px 0 0 0;
+		color: #333;
+	}
+
+	.magnify {
+		display: none;
+	}
+
+	.thumbimage {
+		border: none;
+	}
+}

skins/vector/screen.less

@@ -8,3 +8,4 @@
 @import "components/footer.less";
 @import 'components/notifications.less';
 @import "components/externalLinks.less";
+@import "components/thumbnails.less";