Fix layout

11 files changed, 955 insertions, 0 deletions

diff --git a/skins/vector/components/animations.less b/skins/vector/components/animations.less
new file mode 100644
index 0000000..9163779
--- /dev/null
+++ b/skins/vector/components/animations.less
@@ -0,0 +1,28 @@
+/* Animate between standard and high definition layouts */
+body.vector-animateLayout {
+	div#content,
+	div#footer,
+	#left-navigation {
+		.transition(margin-left 250ms, padding 250ms;);
+	}
+
+	#p-logo {
+		.transition(left 250ms);
+	}
+
+	#mw-panel {
+		.transition(padding-right 250ms);
+	}
+
+	#p-search {
+		.transition(margin-right 250ms);
+	}
+
+	#p-personal {
+		.transition(right 250ms);
+	}
+
+	#mw-head-base {
+		.transition(margin-left 250ms);
+	}
+}
diff --git a/skins/vector/components/collapsibleNav.less b/skins/vector/components/collapsibleNav.less
new file mode 100644
index 0000000..e6f5c9a
--- /dev/null
+++ b/skins/vector/components/collapsibleNav.less
@@ -0,0 +1,91 @@
+/**
+ * LESS Stylesheet for collapsible nav
+ */
+@import "mediawiki.mixins.less";
+
+#mw-panel.collapsible-nav {
+	.portal {
+		background-position: left top;
+		background-repeat: no-repeat;
+		.background-image('images/portal-break.png');
+		padding: 0.25em 0 !important;
+		margin: -11px 9px 10px 11px;
+
+		h3 {
+			font-size: @menu-main-heading-font-size;
+			color: @collapsible-nav-heading-color;
+			font-weight: normal;
+			background-position: left center;
+			background-repeat: no-repeat;
+			.background-image-svg('images/arrow-expanded.svg', 'images/arrow-expanded.png');
+			padding: @collapsible-nav-heading-padding;
+			margin-bottom: 0;
+
+			&:hover {
+				cursor: pointer;
+				text-decoration: none;
+			}
+
+			a {
+				color: @collapsible-nav-heading-color;
+				text-decoration: none;
+			}
+		}
+
+		.body {
+			margin: @collapsible-nav-body-margin;
+			background-image: none !important;
+			padding-top: 0;
+			display: none;
+
+			ul {
+				li {
+					padding: 0.25em 0;
+				}
+			}
+		}
+
+
+		/* First */
+		&.first {
+			background-image: none;
+			margin-top: 0;
+			h3 {
+				display: none;
+			}
+		}
+
+		/* Persistent */
+		&.persistent {
+			.body {
+				display: block;
+				margin-left: 0.5em;
+			}
+
+			h3 {
+				background-image: none !important;
+				padding-left: 0.7em;
+				cursor: default;
+			}
+		}
+
+		/* Collapsed */
+		&.collapsed {
+			h3 {
+				color: @collapsible-nav-heading-collapsed-color;
+				background-position: left center;
+				background-repeat: no-repeat;
+				.background-image-svg('images/arrow-collapsed-ltr.svg', 'images/arrow-collapsed-ltr.png');
+				margin-bottom: 0;
+
+				&:hover {
+					text-decoration: underline;
+				}
+
+				a {
+					color: @collapsible-nav-heading-collapsed-color;
+				}
+			}
+		}
+	}
+}
diff --git a/skins/vector/components/common.less b/skins/vector/components/common.less
new file mode 100644
index 0000000..25ba301
--- /dev/null
+++ b/skins/vector/components/common.less
@@ -0,0 +1,141 @@
+/*
+ * Any rules which should not be flipped automatically in right-to-left situations should be
+ * prepended with @noflip in a comment block.
+ *
+ * This stylesheet employs a few CSS trick to accomplish compatibility with a wide range of web
+ * browsers. The most common trick is to use some styles in IE6 only. This is accomplished by using
+ * a rule that makes things work in IE6, and then following it with a rule that begins with
+ * "html > body" or use a child selector ">", which is ignored by IE6 because it does not support
+ * the child selector. You can spot this by looking for the "OVERRIDDEN BY COMPLIANT BROWSERS" and
+ * "IGNORED BY IE6" comments.
+ */
+@import "mediawiki.mixins";
+
+/* Framework */
+html {
+	font-size: @html-font-size;
+}
+html,
+body {
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	font-family: @content-font-family;
+}
+body {
+	background-color: @menu-background-color;
+}
+
+/* Content */
+div#content {
+	margin-left: 10em;
+	padding: @content-padding;
+	/* Border on top, left, and bottom side */
+	border: 1px solid @content-border-color;
+	border-right-width: 0;
+	/* Merge the border with tabs' one (in their background image) */
+	margin-top: -1px;
+	background-color: @body-background-color;
+	color: @content-font-color;
+	direction: ltr;
+
+	.mw-editsection,
+	.mw-editsection-like {
+		font-family: @content-font-family;
+	}
+
+	p {
+		line-height: inherit;
+		margin: 0.5em 0;
+	}
+
+	h1,
+	h2,
+	#firstHeading {
+		font-family: @content-heading-font-family;
+		line-height: @heading-line-height;
+		margin-bottom: 0.25em;
+		padding: 0;
+	}
+
+	h1,
+	#firstHeading {
+		font-size: @content-heading-font-size;
+	}
+
+	h2 {
+		font-size: 1.5em;
+		margin-top: 1em;
+	}
+
+	h3,
+	h4,
+	h5,
+	h6 {
+		line-height: @content-line-height;
+		margin-top: 0.3em;
+		margin-bottom: 0;
+		padding-bottom: 0;
+	}
+
+	h3 {
+		font-size: 1.17em;
+	}
+
+	h3,
+	h4 {
+		font-weight: bold;
+	}
+
+	h4,
+	h5,
+	h6 {
+		font-size: 100%; /* (reset) */
+	}
+
+	#toc h2,
+	.toc h2 {
+		font-size: 100%; /* (reset) */
+		font-family: @content-font-family;
+	}
+}
+
+/* Hide empty portlets */
+div.emptyPortlet {
+		display: none;
+}
+
+ul {
+	list-style-type: disc;
+	.list-style-image('images/bullet-icon.png');
+}
+
+pre, .mw-code {
+	line-height: 1.3em;
+}
+
+/* Site Notice (includes notices from CentralNotice extension) */
+#siteNotice {
+	font-size: 0.8em;
+}
+
+.redirectText {
+	font-size: 140%;
+}
+
+.redirectMsg img {
+	vertical-align: text-bottom;
+}
+
+#bodyContent {
+	position: relative;
+	width: 100%;
+	line-height: @content-line-height;
+	font-size: @content-font-size;
+}
+
+/* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
+// FIXME: Should be part of jquery.tipsy.css
+.tipsy {
+	font-size: 0.8em;
+}
diff --git a/skins/vector/components/externalLinks.less b/skins/vector/components/externalLinks.less
new file mode 100644
index 0000000..91388c6
--- /dev/null
+++ b/skins/vector/components/externalLinks.less
@@ -0,0 +1,10 @@
+@import "mediawiki.mixins.less";
+// External links
+#content {
+	.external {
+		background-position: center right;
+		background-repeat: no-repeat;
+		.background-image-svg('images/external-link-ltr-icon.svg', 'images/external-link-ltr-icon.png');
+		padding-right: 13px;
+	}
+}
diff --git a/skins/vector/components/footer.less b/skins/vector/components/footer.less
new file mode 100644
index 0000000..3d61b66
--- /dev/null
+++ b/skins/vector/components/footer.less
@@ -0,0 +1,57 @@
+/* Footer */
+div#footer {
+	margin-left: 10em;
+	margin-top: 0;
+	padding: 0.75em;
+	direction: ltr;
+
+	ul {
+		list-style-type: none;
+		list-style-image: none;
+		margin: 0;
+		padding: 0;
+
+		li {
+			margin: 0;
+			padding: 0;
+			padding-top: 0.5em;
+			padding-bottom: 0.5em;
+			color: #333;
+			font-size: 0.7em;
+		}
+	}
+
+	#footer-icons {
+		float: right;
+
+		li {
+			float: left;
+			margin-left: 0.5em;
+			line-height: 2em;
+			text-align: right;
+		}
+	}
+
+	#footer-info {
+		li {
+			line-height: 1.4em;
+		}
+	}
+
+	#footer-places {
+		li {
+			float: left;
+			margin-right: 1em;
+			line-height: 2em;
+		}
+	}
+}
+
+body.ltr {
+	div#footer {
+		#footer-places {
+			/* @noflip */
+			float: left;
+		}
+	}
+}
diff --git a/skins/vector/components/navigation.less b/skins/vector/components/navigation.less
new file mode 100644
index 0000000..f3a5a49
--- /dev/null
+++ b/skins/vector/components/navigation.less
@@ -0,0 +1,134 @@
+@import "mediawiki.mixins";
+@import "personalMenu";
+@import "collapsibleNav";
+@import "search";
+@import "tabs";
+
+/* Hide, but keep accessible for screen-readers */
+#mw-navigation h2 {
+	position: absolute;
+	top: -9999px;
+}
+
+/* Head */
+#mw-page-base {
+	height: 5em;
+	background-position: bottom left;
+	background-repeat: repeat-x;
+	/* This image is only a fallback (for IE 6-9), so we do not @embed it. */
+	background-image: url('images/page-fade.png');
+	.vertical-gradient(@body-background-color, @menu-background-color, 50%, 100%);
+	background-color: @body-background-color;
+}
+
+#mw-head-base {
+	margin-top: -5em;
+	margin-left: 10em;
+	height: 5em;
+}
+
+div#mw-head {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 100%;
+
+	h3 {
+		margin: 0;
+		padding: 0;
+	}
+}
+
+/* Navigation Containers */
+#left-navigation {
+	float: left;
+	margin-left: 10em;
+	margin-top: 2.5em;
+	/* When right nav would overlap left nav, it's placed below it
+	   (normal CSS floats behavior). This rule ensures that no empty space
+	   is shown between them due to right nav's margin-top. Page layout
+	   is still broken, but at least the nav overlaps only the page title
+	   instead of half the content. */
+	margin-bottom: -2.5em;
+	/* IE 6 double-margin bug fix */
+	display: inline;
+}
+
+#right-navigation {
+	float: right;
+	margin-top: 2.5em;
+}
+
+/* Logo */
+#p-logo {
+	position: absolute;
+	top: -160px;
+	left: 0;
+	width: 10em;
+	height: 160px;
+
+	a {
+		display: block;
+		width: 10em;
+		height: 160px;
+		background-repeat: no-repeat;
+		background-position: center center;
+		text-decoration: none;
+	}
+}
+
+/* Panel */
+div#mw-panel {
+	font-size: @menu-main-font-size;
+	position: absolute;
+	top: 160px;
+	padding-top: 1em;
+	width: 10em;
+	left: 0;
+
+	div.portal {
+		padding-bottom: 1.5em;
+		direction: ltr;
+
+		h3 {
+			font-weight: normal;
+			color: #444;
+			padding: @menu-main-heading-padding;
+			cursor: default;
+			border: none;
+			font-size: @menu-main-heading-font-size;
+		}
+
+		div.body {
+			padding-top: 0.5em;
+			margin: @menu-main-body-margin;
+
+			.background-image('images/portal-break.png');
+			background-repeat: no-repeat;
+			background-position: top left;
+
+			ul {
+				list-style-type: none;
+				list-style-image: none;
+				padding: @menu-main-body-padding;
+				margin: 0;
+
+				li {
+					line-height: 1.125em;
+					padding: 0;
+					padding-bottom: 0.5em;
+					margin: 0;
+					font-size: @menu-main-body-font-size;
+					word-wrap: break-word;
+
+					a {
+						color: @menu-main-body-link-color;
+						&:visited {
+							color: @menu-main-body-link-visited-color;
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/skins/vector/components/notifications.less b/skins/vector/components/notifications.less
new file mode 100644
index 0000000..cadb61c
--- /dev/null
+++ b/skins/vector/components/notifications.less
@@ -0,0 +1,20 @@
+/* mediawiki.notification */
+.skin-vector {
+	.mw-notification-area {
+		font-size: 0.8em;
+	}
+
+	.mw-notification-area-layout {
+		top: 7em;
+	}
+
+	.mw-notification {
+		background-color: #fff;
+		background-color: rgba(255, 255, 255, 0.93);
+		padding: 0.75em 1.5em;
+		border: solid 1px @content-border-color;
+		border-radius: 0.75em;
+		-webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
+		box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
+	}
+}
diff --git a/skins/vector/components/personalMenu.less b/skins/vector/components/personalMenu.less
new file mode 100644
index 0000000..7256929
--- /dev/null
+++ b/skins/vector/components/personalMenu.less
@@ -0,0 +1,41 @@
+/* Personal */
+#p-personal {
+	position: absolute;
+	top: 0.33em;
+	right: 0.75em;
+	/* Display on top of page tabs - bugs 37158, 48078 */
+	z-index: 100;
+
+	h3 {
+		display: none;
+	}
+
+	ul {
+		list-style-type: none;
+		list-style-image: none;
+		margin: 0;
+		padding-left: 10em; /* Keep from overlapping logo */
+	}
+
+	li {
+		line-height: 1.125em;
+		/* @noflip */
+		float: left;
+		margin-left: 0.75em;
+		margin-top: 0.5em;
+		font-size: @menu-personal-font-size;
+		white-space: nowrap;
+	}
+}
+
+/* Icon for Usernames */
+#pt-userpage,
+#pt-anonuserpage,
+#pt-login {
+	background-position: left top;
+	background-repeat: no-repeat;
+	/* SVG support using a transparent gradient to guarantee cross-browser
+	 * compatibility (browsers able to understand gradient syntax support also SVG) */
+	.background-image-svg('images/user-icon.svg', 'images/user-icon.png');
+	padding-left: 15px !important;
+}
diff --git a/skins/vector/components/search.less b/skins/vector/components/search.less
new file mode 100644
index 0000000..46c3030
--- /dev/null
+++ b/skins/vector/components/search.less
@@ -0,0 +1,113 @@
+/* Search */
+#p-search {
+	/* @noflip */
+	float: left;
+	margin-right: 0.5em;
+	margin-left: 0.5em;
+
+	h3 {
+		display: none;
+	}
+
+	form,
+	input {
+		margin: 0;
+		margin-top: 0.4em;
+	}
+}
+
+div#simpleSearch {
+	display: block;
+	width: 14em;
+	height: 1.4em;
+	margin-top: 0.65em;
+	position: relative;
+	min-height: 1px; /* Gotta trigger hasLayout for IE7 */
+	border: solid 1px #aaa;
+	color: black;
+	background-color: white;
+	.background-image('images/search-fade.png');
+	background-position: top left;
+	background-repeat: repeat-x;
+
+	// Styles for both the search input and the button
+	input {
+		position: absolute;
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background-color: transparent;
+		color: black;
+	}
+
+	// The search input
+	#searchInput {
+		top: 0;
+		left: 0;
+		width: 90%;
+		padding: 0.2em 0 0.2em 0.2em;
+		font-size: 13px;
+		direction: ltr;
+
+		&:focus {
+			outline: none;
+		}
+
+		// These rules MAY NOT be merged because of how CSS requires browsers
+		// to parse unrecognized selectors!
+		// Note these rules ensure that placeholder text can be distinguished from
+		// standard text. In browsers which make this distinction clear these rules
+		// are not necessary.
+		// For inputs that use jquery.placeholder.js e.g. IE9-
+		&.placeholder {
+			color: #999;
+		}
+		// Distinguish placeholder text in IE10+
+		&:-ms-input-placeholder {
+			color: #999;
+		}
+		// Distinguish placeholder text in Firefox 18-
+		&:-moz-placeholder {
+			color: #999;
+		}
+
+		// Undo the styles Webkit browsers apply to type=search fields,
+		// we provide our own
+		-webkit-appearance: textfield;
+
+		&::-webkit-search-decoration,
+		&::-webkit-search-cancel-button,
+		&::-webkit-search-results-button,
+		&::-webkit-search-results-decoration {
+			-webkit-appearance: textfield;
+		}
+	}
+
+	// The buttons. They are displayed in the same position, and if both are
+	// present the fulltext search one obscures the 'Go' one.
+	#searchButton,
+	#mw-searchButton {
+		top: 0;
+		right: 0;
+		width: 10%;
+		height: 100%;
+		cursor: pointer;
+		/* Hide button text and replace it with the image. */
+		/* This would be 100% if not for Firefox shenanigans (bug 60900). */
+		text-indent: 200%;
+		/* Needed to make IE6 respect the text-indent. */
+		line-height: 1;
+		/* Opera 12 on RTL flips the text in a funny way without this. */
+		/* @noflip */
+		direction: ltr;
+		white-space: nowrap;
+		overflow: hidden;
+		.background-image-svg('images/search-ltr.svg', 'images/search-ltr.png');
+		background-position: center center;
+		background-repeat: no-repeat;
+	}
+
+	#mw-searchButton {
+		z-index: 1;
+	}
+}
diff --git a/skins/vector/components/tabs.less b/skins/vector/components/tabs.less
new file mode 100644
index 0000000..7e24ae7
--- /dev/null
+++ b/skins/vector/components/tabs.less
@@ -0,0 +1,274 @@
+/*
+Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
+*/
+
+/* Navigation Labels */
+div.vectorTabs h3,
+div.vectorMenu h3 span {
+	display: none;
+}
+
+/* Namespaces and Views */
+div.vectorTabs {
+	/* @noflip */
+	float: left;
+	height: 2.5em;
+	.background-image('images/tab-break.png');
+	background-position: bottom left;
+	background-repeat: no-repeat;
+	padding-left: 1px;
+
+	ul {
+		/* @noflip */
+		float: left;
+		height: 100%;
+		list-style-type: none;
+		list-style-image: none;
+		margin: 0;
+		padding: 0;
+		.background-image('images/tab-break.png');
+		background-position: right bottom;
+		background-repeat: no-repeat;
+
+		li {
+			/* @noflip */
+			float: left;
+			line-height: 1.125em;
+			/* For IE6, overridden later to display:block by modern browsers */
+			display: inline-block;
+			height: 100%;
+			margin: 0;
+			padding: 0;
+			background-color: #f3f3f3;
+			.background-image('images/tab-normal-fade.png');
+			background-position: bottom left;
+			background-repeat: repeat-x;
+			white-space: nowrap;
+		}
+
+		/* IGNORED BY IE6 which doesn't support child selector */
+		> li {
+			display: block;
+		}
+	}
+
+	li {
+		&.new {
+			a,
+			a:visited{
+				color: #a55858;
+			}
+		}
+
+		&.selected {
+			.background-image('images/tab-current-fade.png');
+			a,
+			a:visited{
+				color: #333;
+				text-decoration: none;
+			}
+		}
+
+		&.icon {
+			a {
+				background-position: bottom right;
+				background-repeat: no-repeat;
+			}
+		}
+
+		a {
+			/* For IE6, overridden later to display:block by modern browsers */
+			display: inline-block;
+			height: 1.9em;
+			padding-left: 0.5em;
+			padding-right: 0.5em;
+			color: @menu-link-color;
+			cursor: pointer;
+			font-size: 0.8em;
+		}
+
+		/* Ignored by IE6 which doesn't support child selector */
+		> a {
+			display: block;
+		}
+	}
+
+	span {
+		display: inline-block;
+		.background-image('images/tab-break.png');
+		background-position: bottom right;
+		background-repeat: no-repeat;
+
+		a  {
+			/* For IE6, overridden later to display:block by modern browsers */
+			display: inline-block;
+			padding-top: 1.25em;
+		}
+
+		/* Ignored by IE6 which doesn't support child selector */
+		> a {
+			/* @noflip */
+			float: left;
+			display: block;
+		}
+	}
+}
+
+/* Variants and Actions */
+div.vectorMenu {
+	/* @noflip */
+	direction: ltr;
+	/* @noflip */
+	float: left;
+	.background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png');
+	/* @noflip */
+	background-position: 100% 60%;
+	background-repeat: no-repeat;
+	cursor: pointer;
+	.transition(background-position 250ms);
+}
+
+div.vectorMenu.menuForceShow {
+	background-position: 100% 100%;
+}
+
+div.vectorMenuFocus {
+	.background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
+	background-position: 100% 60%;
+}
+
+body.rtl div.vectorMenu {
+	/* @noflip */
+	direction: rtl;
+}
+
+/* OVERRIDDEN BY COMPLIANT BROWSERS */
+div#mw-head div.vectorMenu h3 {
+	/* @noflip */
+	float: left;
+	.background-image('images/tab-break.png');
+	background-repeat: no-repeat;
+	background-position: bottom left;
+	margin-left: -1px;
+}
+
+/* IGNORED BY IE6 */
+div#mw-head div.vectorMenu > h3 {
+	background-image: none;
+}
+
+div#mw-head div.vectorMenu h4,
+div.vectorMenu#p-variants #mw-vector-current-variant {
+	display: inline-block;
+	float: left;
+	font-size: 0.8em;
+	padding-left: 0.5em;
+	padding-top: 1.375em;
+	font-weight: normal;
+	border: none;
+}
+
+/* OVERRIDDEN BY COMPLIANT BROWSERS */
+div.vectorMenu h3 a {
+	display: inline-block;
+	width: 24px;
+	height: 1.9em;
+	text-decoration: none;
+	.background-image('images/tab-break.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+/* IGNORED BY IE6 */
+div.vectorMenu h3 > a {
+	display: block;
+}
+
+div.vectorMenu div.menu {
+	position: relative;
+	display: none;
+	clear: both;
+	text-align: left;
+}
+
+/* OVERRIDDEN BY COMPLIANT BROWSERS */
+body.rtl div.vectorMenu div.menu {
+	/* @noflip */
+	margin-left: 24px;
+}
+
+/* IGNORED BY IE6 */
+body.rtl div.vectorMenu > div.menu {
+	/* @noflip */
+	margin-left: auto;
+}
+
+/* IGNORED BY IE6 */
+/* Also fixes old versions of FireFox */
+body.rtl div.vectorMenu > div.menu,
+x:-moz-any-link {
+	/* @noflip */
+	margin-left: 23px;
+}
+
+/* Enable forcing showing of the menu for accessibility */
+div.vectorMenu:hover div.menu,
+div.vectorMenu.menuForceShow div.menu {
+	display: block;
+}
+
+div.vectorMenu ul {
+	position: absolute;
+	background-color: white;
+	border: solid 1px silver;
+	border-top-width: 0;
+	list-style-type: none;
+	list-style-image: none;
+	padding: 0;
+	margin: 0;
+	margin-left: -1px;
+	text-align: left;
+}
+
+/* Fixes old versions of FireFox */
+div.vectorMenu ul,
+x:-moz-any-link {
+	min-width: 5em;
+}
+
+/* Returns things back to normal in modern versions of FireFox */
+div.vectorMenu ul,
+x:-moz-any-link,
+x:default {
+	min-width: 0;
+}
+
+div.vectorMenu li {
+	padding: 0;
+	margin: 0;
+	text-align: left;
+	line-height: 1em;
+}
+
+/* OVERRIDDEN BY COMPLIANT BROWSERS */
+div.vectorMenu li a {
+	display: inline-block;
+	padding: 0.5em;
+	white-space: nowrap;
+	color: @menu-link-color;
+	cursor: pointer;
+	font-size: 0.8em;
+}
+
+/* IGNORED BY IE6 */
+div.vectorMenu li > a {
+	display: block;
+}
+
+div.vectorMenu li.selected a,
+div.vectorMenu li.selected a:visited {
+	color: #333;
+	text-decoration: none;
+}
+
+@import 'watchstar.less';
diff --git a/skins/vector/components/watchstar.less b/skins/vector/components/watchstar.less
new file mode 100644
index 0000000..1a6d1fc
--- /dev/null
+++ b/skins/vector/components/watchstar.less
@@ -0,0 +1,46 @@
+@import "mediawiki.mixins.rotation"
+
+/* Watch/Unwatch Icon Styling */
+#ca-unwatch.icon a,
+#ca-watch.icon a {
+	margin: 0;
+	padding: 0;
+	display: block;
+	width: 26px;
+	/* This hides the text but shows the background image */
+	padding-top: 3.1em;
+	margin-top: 0;
+	/* Only applied in IE6 */
+	margin-top: -0.8em !ie;
+	height: 0;
+	overflow: hidden;
+	background-position: 5px 60%;
+}
+#ca-unwatch.icon a {
+	.background-image-svg('images/unwatch-icon.svg', 'images/unwatch-icon.png');
+}
+#ca-watch.icon a {
+	.background-image-svg('images/watch-icon.svg', 'images/watch-icon.png');
+}
+#ca-unwatch.icon a:hover,
+#ca-unwatch.icon a:focus {
+	.background-image-svg('images/unwatch-icon-hl.svg', 'images/unwatch-icon-hl.png');
+}
+#ca-watch.icon a:hover,
+#ca-watch.icon a:focus {
+	.background-image-svg('images/watch-icon-hl.svg', 'images/watch-icon-hl.png');
+}
+#ca-unwatch.icon a.loading,
+#ca-watch.icon a.loading {
+	.background-image-svg('images/watch-icon-loading.svg', 'images/watch-icon-loading.png');
+	.rotation(700ms);
+	/* Suppress the hilarious rotating focus outline on Firefox */
+	outline: none;
+	background-position: 50% 60%;
+	-webkit-transform-origin: 50% 57%;
+	transform-origin: 50% 57%;
+}
+#ca-unwatch.icon a span,
+#ca-watch.icon a span {
+	display: none;
+}