Add mw 1.23.15 themes

64 files changed, 1885 insertions, 0 deletions

diff --git a/vector/collapsibleNav.js b/vector/collapsibleNav.js
new file mode 100644
index 0000000..45258e5
--- /dev/null
+++ b/vector/collapsibleNav.js
@@ -0,0 +1,152 @@
+/**
+ * Collapsible navigation for Vector
+ */
+( function ( mw, $ ) {
+	'use strict';
+	var map;
+
+	// Use the same function for all navigation headings - don't repeat
+	function toggle( $element ) {
+		var isCollapsed = $element.parent().is( '.collapsed' );
+
+		$.cookie(
+			'vector-nav-' + $element.parent().attr( 'id' ),
+			isCollapsed,
+			{ 'expires': 30, 'path': '/' }
+		);
+
+		$element
+			.parent()
+			.toggleClass( 'expanded' )
+			.toggleClass( 'collapsed' )
+			.find( '.body' )
+			.slideToggle( 'fast' );
+		isCollapsed = !isCollapsed;
+
+		$element
+			.find( '> a' )
+			.attr( {
+				'aria-pressed': isCollapsed ? 'false' : 'true',
+				'aria-expanded': isCollapsed ? 'false' : 'true'
+			} );
+	}
+
+	/* Browser Support */
+
+	map = {
+		// Left-to-right languages
+		ltr: {
+			// Collapsible Nav is broken in Opera < 9.6 and Konqueror < 4
+			opera: [['>=', 9.6]],
+			konqueror: [['>=', 4.0]],
+			blackberry: false,
+			ipod: false,
+			iphone: false,
+			ps3: false
+		},
+		// Right-to-left languages
+		rtl: {
+			opera: [['>=', 9.6]],
+			konqueror: [['>=', 4.0]],
+			blackberry: false,
+			ipod: false,
+			iphone: false,
+			ps3: false
+		}
+	};
+	if ( !$.client.test( map ) ) {
+		return true;
+	}
+
+	$( function ( $ ) {
+		var $headings, tabIndex;
+
+		/* General Portal Modification */
+
+		// Always show the first portal
+		$( '#mw-panel > .portal:first' ).addClass( 'first persistent' );
+		// Apply a class to the entire panel to activate styles
+		$( '#mw-panel' ).addClass( 'collapsible-nav' );
+		// Use cookie data to restore preferences of what to show and hide
+		$( '#mw-panel > .portal:not(.persistent)' )
+			.each( function ( i ) {
+				var id = $(this).attr( 'id' ),
+					state = $.cookie( 'vector-nav-' + id );
+				$(this).find( 'ul:first' ).attr( 'id', id + '-list' );
+				// Add anchor tag to heading for better accessibility
+				$( this ).find( 'h3' ).wrapInner(
+					$( '<a>' )
+						.attr( {
+							href: '#',
+							'aria-haspopup': 'true',
+							'aria-controls': id + '-list',
+							role: 'button'
+						} )
+						.click( false )
+				);
+				// In the case that we are not showing the new version, let's show the languages by default
+				if (
+					state === 'true' ||
+					( state === null && i < 1 ) ||
+					( state === null && id === 'p-lang' )
+				) {
+					$(this)
+						.addClass( 'expanded' )
+						.removeClass( 'collapsed' )
+						.find( '.body' )
+						.hide() // bug 34450
+						.show();
+					$(this).find( 'h3 > a' )
+						.attr( {
+							'aria-pressed': 'true',
+							'aria-expanded': 'true'
+						} );
+				} else {
+					$(this)
+						.addClass( 'collapsed' )
+						.removeClass( 'expanded' );
+					$(this).find( 'h3 > a' )
+						.attr( {
+							'aria-pressed': 'false',
+							'aria-expanded': 'false'
+						} );
+				}
+				// Re-save cookie
+				if ( state !== null ) {
+					$.cookie( 'vector-nav-' + $(this).attr( 'id' ), state, { 'expires': 30, 'path': '/' } );
+				}
+			} );
+
+		/* Tab Indexing */
+
+		$headings = $( '#mw-panel > .portal:not(.persistent) > h3' );
+
+		// Get the highest tab index
+		tabIndex = $( document ).lastTabIndex() + 1;
+
+		// Fix the search not having a tabindex
+		$( '#searchInput' ).attr( 'tabindex', tabIndex++ );
+
+		// Make it keyboard accessible
+		$headings.attr( 'tabindex', function () {
+			return tabIndex++;
+		});
+
+		// Toggle the selected menu's class and expand or collapse the menu
+		$( '#mw-panel' )
+			.delegate( '.portal:not(.persistent) > h3', 'keydown', function ( e ) {
+				// Make the space and enter keys act as a click
+				if ( e.which === 13 /* Enter */ || e.which === 32 /* Space */ ) {
+					toggle( $(this) );
+				}
+			} )
+			.delegate( '.portal:not(.persistent) > h3', 'mousedown', function ( e ) {
+				if ( e.which !== 3 ) { // Right mouse click
+					toggle( $(this) );
+					$(this).blur();
+				}
+				return false;
+			} );
+	});
+
+}( mediaWiki, jQuery ) );
diff --git a/vector/collapsibleTabs.js b/vector/collapsibleTabs.js
new file mode 100644
index 0000000..0e49744
--- /dev/null
+++ b/vector/collapsibleTabs.js
@@ -0,0 +1,208 @@
+/**
+ * Collapsible tabs jQuery Plugin
+ */
+( function ( $ ) {
+	var rtl = $( 'html' ).attr( 'dir' ) === 'rtl';
+	$.fn.collapsibleTabs = function ( options ) {
+		// return if the function is called on an empty jquery object
+		if ( !this.length ) {
+			return this;
+		}
+		// Merge options into the defaults
+		var $settings = $.extend( {}, $.collapsibleTabs.defaults, options );
+
+		this.each( function () {
+			var $el = $( this );
+			// add the element to our array of collapsible managers
+			$.collapsibleTabs.instances = ( $.collapsibleTabs.instances.length === 0 ?
+				$el : $.collapsibleTabs.instances.add( $el ) );
+			// attach the settings to the elements
+			$el.data( 'collapsibleTabsSettings', $settings );
+			// attach data to our collapsible elements
+			$el.children( $settings.collapsible ).each( function () {
+				$.collapsibleTabs.addData( $( this ) );
+			} );
+		} );
+
+		// if we haven't already bound our resize handler, bind it now
+		if ( !$.collapsibleTabs.boundEvent ) {
+			$( window ).on( 'resize', $.debounce( 500, function () {
+				$.collapsibleTabs.handleResize();
+			} ) );
+			$.collapsibleTabs.boundEvent = true;
+		}
+
+		// call our resize handler to setup the page
+		$.collapsibleTabs.handleResize();
+		return this;
+	};
+	/**
+	 * Returns the amount of horizontal distance between the two tabs groups
+	 * (#left-navigation and #right-navigation), in pixels. If negative, this
+	 * means that the tabs overlap, and the value is the width of overlapping
+	 * parts.
+	 *
+	 * Used in default expandCondition and collapseCondition.
+	 *
+	 * @return {Numeric} distance/overlap in pixels
+	 */
+	function calculateTabDistance() {
+		var $leftTab, $rightTab, leftEnd, rightStart;
+
+		// In RTL, #right-navigation is actually on the left and vice versa.
+		// Hooray for descriptive naming.
+		if ( !rtl ) {
+			$leftTab = $( '#left-navigation' );
+			$rightTab = $( '#right-navigation' );
+		} else {
+			$leftTab = $( '#right-navigation' );
+			$rightTab = $( '#left-navigation' );
+		}
+
+		leftEnd = $leftTab.offset().left + $leftTab.width();
+		rightStart = $rightTab.offset().left;
+
+		return rightStart - leftEnd;
+	}
+	$.collapsibleTabs = {
+		instances: [],
+		boundEvent: null,
+		defaults: {
+			expandedContainer: '#p-views ul',
+			collapsedContainer: '#p-cactions ul',
+			collapsible: 'li.collapsible',
+			shifting: false,
+			expandCondition: function ( eleWidth ) {
+				// If there are at least eleWidth + 1 pixels of free space, expand.
+				// We add 1 because .width() will truncate fractional values
+				// but .offset() will not.
+				return calculateTabDistance() >= (eleWidth + 1);
+			},
+			collapseCondition: function () {
+				// If there's an overlap, collapse.
+				return calculateTabDistance() < 0;
+			}
+		},
+		addData: function ( $collapsible ) {
+			var $settings = $collapsible.parent().data( 'collapsibleTabsSettings' );
+			if ( $settings ) {
+				$collapsible.data( 'collapsibleTabsSettings', {
+					expandedContainer: $settings.expandedContainer,
+					collapsedContainer: $settings.collapsedContainer,
+					expandedWidth: $collapsible.width(),
+					prevElement: $collapsible.prev()
+				} );
+			}
+		},
+		getSettings: function ( $collapsible ) {
+			var $settings = $collapsible.data( 'collapsibleTabsSettings' );
+			if ( !$settings ) {
+				$.collapsibleTabs.addData( $collapsible );
+				$settings = $collapsible.data( 'collapsibleTabsSettings' );
+			}
+			return $settings;
+		},
+		handleResize: function () {
+			$.collapsibleTabs.instances.each( function () {
+				var $el = $( this ),
+					data = $.collapsibleTabs.getSettings( $el );
+
+				if ( data.shifting ) {
+					return;
+				}
+
+				// if the two navigations are colliding
+				if ( $el.children( data.collapsible ).length > 0 && data.collapseCondition() ) {
+
+					$el.trigger( 'beforeTabCollapse' );
+					// move the element to the dropdown menu
+					$.collapsibleTabs.moveToCollapsed( $el.children( data.collapsible + ':last' ) );
+				}
+
+				// if there are still moveable items in the dropdown menu,
+				// and there is sufficient space to place them in the tab container
+				if ( $( data.collapsedContainer + ' ' + data.collapsible ).length > 0 &&
+						data.expandCondition( $.collapsibleTabs.getSettings( $( data.collapsedContainer ).children(
+								data.collapsible + ':first' ) ).expandedWidth ) ) {
+					//move the element from the dropdown to the tab
+					$el.trigger( 'beforeTabExpand' );
+					$.collapsibleTabs
+						.moveToExpanded( data.collapsedContainer + ' ' + data.collapsible + ':first' );
+				}
+			} );
+		},
+		moveToCollapsed: function ( ele ) {
+			var outerData, expContainerSettings, target,
+				$moving = $( ele );
+
+			outerData = $.collapsibleTabs.getSettings( $moving );
+			if ( !outerData ) {
+				return;
+			}
+			expContainerSettings = $.collapsibleTabs.getSettings( $( outerData.expandedContainer ) );
+			if ( !expContainerSettings ) {
+				return;
+			}
+			expContainerSettings.shifting = true;
+
+			// Remove the element from where it's at and put it in the dropdown menu
+			target = outerData.collapsedContainer;
+			$moving.css( 'position', 'relative' )
+				.css( ( rtl ? 'left' : 'right' ), 0 )
+				.animate( { width: '1px' }, 'normal', function () {
+					var data, expContainerSettings;
+					$( this ).hide();
+					// add the placeholder
+					$( '<span class="placeholder" style="display: none;"></span>' ).insertAfter( this );
+					$( this ).detach().prependTo( target ).data( 'collapsibleTabsSettings', outerData );
+					$( this ).attr( 'style', 'display: list-item;' );
+					data = $.collapsibleTabs.getSettings( $( ele ) );
+					if ( data ) {
+						expContainerSettings = $.collapsibleTabs.getSettings( $( data.expandedContainer ) );
+						if ( expContainerSettings ) {
+							expContainerSettings.shifting = false;
+							$.collapsibleTabs.handleResize();
+						}
+					}
+				} );
+		},
+		moveToExpanded: function ( ele ) {
+			var data, expContainerSettings, $target, expandedWidth,
+				$moving = $( ele );
+
+			data = $.collapsibleTabs.getSettings( $moving );
+			if ( !data ) {
+				return;
+			}
+			expContainerSettings = $.collapsibleTabs.getSettings( $( data.expandedContainer ) );
+			if ( !expContainerSettings ) {
+				return;
+			}
+			expContainerSettings.shifting = true;
+
+			// grab the next appearing placeholder so we can use it for replacing
+			$target = $( data.expandedContainer ).find( 'span.placeholder:first' );
+			expandedWidth = data.expandedWidth;
+			$moving.css( 'position', 'relative' ).css( ( rtl ? 'right' : 'left' ), 0 ).css( 'width', '1px' );
+			$target.replaceWith(
+				$moving
+				.detach()
+				.css( 'width', '1px' )
+				.data( 'collapsibleTabsSettings', data )
+				.animate( { width: expandedWidth + 'px' }, 'normal', function () {
+					$( this ).attr( 'style', 'display: block;' );
+					var data, expContainerSettings;
+					data = $.collapsibleTabs.getSettings( $( this ) );
+					if ( data ) {
+						expContainerSettings = $.collapsibleTabs.getSettings( $( data.expandedContainer ) );
+						if ( expContainerSettings ) {
+							expContainerSettings.shifting = false;
+							$.collapsibleTabs.handleResize();
+						}
+					}
+				} )
+			);
+		}
+	};
+
+}( jQuery ) );
diff --git a/vector/components/animations.less b/vector/components/animations.less
new file mode 100644
index 0000000..9163779
--- /dev/null
+++ b/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/vector/components/collapsibleNav.less b/vector/components/collapsibleNav.less
new file mode 100644
index 0000000..e6f5c9a
--- /dev/null
+++ b/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/vector/components/common.less b/vector/components/common.less
new file mode 100644
index 0000000..25ba301
--- /dev/null
+++ b/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/vector/components/externalLinks.less b/vector/components/externalLinks.less
new file mode 100644
index 0000000..91388c6
--- /dev/null
+++ b/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/vector/components/footer.less b/vector/components/footer.less
new file mode 100644
index 0000000..3d61b66
--- /dev/null
+++ b/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/vector/components/navigation.less b/vector/components/navigation.less
new file mode 100644
index 0000000..f3a5a49
--- /dev/null
+++ b/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/vector/components/notifications.less b/vector/components/notifications.less
new file mode 100644
index 0000000..cadb61c
--- /dev/null
+++ b/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/vector/components/personalMenu.less b/vector/components/personalMenu.less
new file mode 100644
index 0000000..7256929
--- /dev/null
+++ b/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/vector/components/search.less b/vector/components/search.less
new file mode 100644
index 0000000..46c3030
--- /dev/null
+++ b/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/vector/components/tabs.less b/vector/components/tabs.less
new file mode 100644
index 0000000..7e24ae7
--- /dev/null
+++ b/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/vector/components/watchstar.less b/vector/components/watchstar.less
new file mode 100644
index 0000000..1a6d1fc
--- /dev/null
+++ b/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;
+}
diff --git a/vector/csshover.htc b/vector/csshover.htc
new file mode 100644
index 0000000..a13ea68
--- /dev/null
+++ b/vector/csshover.htc
@@ -0,0 +1,284 @@
+<public:attach event="ondocumentready" onevent="CSSHover()" />
+<script>
+/**
+ *	Whatever:hover - V3.11
+ *	------------------------------------------------------------
+ *	Author  - Peter Nederlof, http://www.xs4all.nl/~peterned
+ *	License - http://creativecommons.org/licenses/LGPL/2.1
+ *
+ *	Special thanks to Sergiu Dumitriu, http://purl.org/net/sergiu,
+ *	for fixing the expression loop.
+ *
+ *	Whatever:hover is free software; you can redistribute it and/or
+ *	modify it under the terms of the GNU Lesser General Public
+ *	License as published by the Free Software Foundation; either
+ *	version 2.1 of the License, or (at your option) any later version.
+ *
+ *	Whatever:hover is distributed in the hope that it will be useful,
+ *	but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ *	Lesser General Public License for more details.
+ *
+ *	howto: body { behavior:url("csshover3.htc"); }
+ *	------------------------------------------------------------
+ */
+
+window.CSSHover = (function(){
+
+	// regular expressions, used and explained later on.
+	var REG_INTERACTIVE = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active|focus))/i;
+	var REG_AFFECTED = /(.*?)\:(hover|active|focus)/i;
+	var REG_PSEUDO = /[^:]+:([a-z\-]+).*/i;
+	var REG_SELECT = /(\.([a-z0-9_\-]+):[a-z]+)|(:[a-z]+)/gi;
+	var REG_CLASS = /\.([a-z0-9_\-]*on(hover|active|focus))/i;
+	var REG_MSIE = /msie (5|6|7)/i;
+	var REG_COMPAT = /backcompat/i;
+
+	// property mapping, real css properties must be used in order to clear expressions later on...
+	// Uses obscure css properties that no-one is likely to use. The properties are borrowed to
+	// set an expression, and are then restored to the most likely correct value.
+	var Properties = {
+		index: 0,
+		list: ['text-kashida', 'text-kashida-space', 'text-justify'],
+		get: function() {
+			return this.list[(this.index++)%this.list.length];
+		}
+	};
+
+	// camelize is used to convert css properties from (eg) text-kashida to textKashida
+	var camelize = function(str) {
+		return str.replace(/-(.)/mg, function(result, match){
+			return match.toUpperCase();
+		});
+	};
+	
+	/**
+	 *	Local CSSHover object
+	 *	--------------------------
+	 */
+	
+	var CSSHover = {
+		
+		// array of CSSHoverElements, used to unload created events
+		elements: [], 
+		
+		// buffer used for checking on duplicate expressions
+		callbacks: {}, 
+		
+		// init, called once ondomcontentready via the exposed window.CSSHover function
+		init:function() {
+			// don't run in IE8 standards; expressions don't work in standards mode anyway, 
+			// and the stuff we're trying to fix should already work properly
+			if(!REG_MSIE.test(navigator.userAgent) && !REG_COMPAT.test(window.document.compatMode)) {
+				return;
+			}
+
+			// start parsing the existing stylesheets
+			var sheets = window.document.styleSheets, l = sheets.length;
+			for(var i=0; i<l; i++) {
+				this.parseStylesheet(sheets[i]);
+			}
+		},
+
+		// called from init, parses individual stylesheets
+		parseStylesheet:function(sheet) {
+			// check sheet imports and parse those recursively
+			if(sheet.imports) {
+				try {
+					var imports = sheet.imports;
+					var l = imports.length;
+					for(var i=0; i<l; i++) {
+						this.parseStylesheet(sheet.imports[i]);
+					}
+				} catch(securityException){
+					// trycatch for various possible errors
+				}
+			}
+			
+			// interate the sheet's rules and send them to the parser
+			try {
+				var rules = sheet.rules;
+				var r = rules.length;
+				for(var j=0; j<r; j++) {
+					this.parseCSSRule(rules[j], sheet);
+				}
+			} catch(someException){
+				// trycatch for various errors, most likely accessing the sheet's rules.
+			}
+		},
+
+		// magic starts here ...
+		parseCSSRule:function(rule, sheet) {
+			
+			// The sheet is used to insert new rules into, this must be the same sheet the rule 
+			// came from, to ensure that relative paths keep pointing to the right location.
+
+			// only parse a rule if it contains an interactive pseudo.
+			var select = rule.selectorText;
+			if(REG_INTERACTIVE.test(select)) {
+				var style = rule.style.cssText;
+					
+				// affected elements are found by truncating the selector after the interactive pseudo,
+				// eg: "div li:hover" >>  "div li"
+				var affected = REG_AFFECTED.exec(select)[1];
+					
+				// that pseudo is needed for a classname, and defines the type of interaction (focus, hover, active)
+				// eg: "li:hover" >> "onhover"
+				var pseudo = select.replace(REG_PSEUDO, 'on$1');
+					
+				// the new selector is going to use that classname in a new css rule,
+				// since IE6 doesn't support multiple classnames, this is merged into one classname
+				// eg: "li:hover" >> "li.onhover",  "li.folder:hover" >> "li.folderonhover"
+				var newSelect = select.replace(REG_SELECT, '.$2' + pseudo);
+					
+				// the classname is needed for the events that are going to be set on affected nodes
+				// eg: "li.folder:hover" >> "folderonhover"
+				var className = REG_CLASS.exec(newSelect)[1];
+
+				// no need to set the same callback more than once when the same selector uses the same classname
+				var hash = affected + className;
+				if(!this.callbacks[hash]) {
+					
+					// affected elements are given an expression under a borrowed css property, because fake properties
+					// can't have their expressions cleared. Different properties are used per pseudo, to avoid
+					// expressions from overwriting eachother. The expression does a callback to CSSHover.patch, 
+					// rerouted via the exposed window.CSSHover function.
+					var property = Properties.get();
+					var atRuntime = camelize(property);
+
+					// because the expression is added to the stylesheet, and styles are always applied to html that is
+					// dynamically added to the dom, the expression will also trigger for those new elements (provided
+					// they are selected by the affected selector). 
+					sheet.addRule(affected, property + ':expression(CSSHover(this, "'+pseudo+'", "'+className+'", "'+atRuntime+'"))');
+					
+					// hash it, so an identical selector/class combo does not duplicate the expression
+					this.callbacks[hash] = true;
+				}
+				
+				// duplicate expressions need not be set, but the style could differ
+				sheet.addRule(newSelect, style);
+			}
+		},
+
+		// called via the expression, patches individual nodes
+		patch:function(node, type, className, property) {
+
+			// restores the borrowed css property to the value of its immediate parent, clearing
+			// the expression so that it's not repeatedly called. 
+			try {
+				var value = node.parentNode.currentStyle[property];
+				node.style[property] = value;	
+			} catch(e) {
+				// the above reset should never fail, but just in case, clear the runtimeStyle if it does.
+				// this will also stop the expression.
+				node.runtimeStyle[property] = '';
+			}			
+		
+			// just to make sure, also keep track of patched classnames locally on the node
+			if(!node.csshover) {
+				node.csshover = [];
+			}
+
+			// and check for it to prevent duplicate events with the same classname from being set
+			if(!node.csshover[className]) {
+				node.csshover[className] = true;
+
+				// create an instance for the given type and class
+				var element = new CSSHoverElement(node, type, className);
+				
+				// and store that instance for unloading later on
+				this.elements.push(element);
+			}
+
+			// returns a dummy value to the expression
+			return type;
+		},
+
+		// unload stuff onbeforeunload
+		unload:function() {
+			try {
+				
+				// remove events
+				var l = this.elements.length;
+				for(var i=0; i<l; i++) {
+					this.elements[i].unload();
+				}
+
+				// and set properties to null 
+				this.elements = [];
+				this.callbacks = {};
+
+			} catch (e) {
+			}
+		}
+	};
+
+	/**
+	 *	CSSHoverElement
+	 *	--------------------------
+	 */
+
+	// the event types associated with the interactive pseudos
+	var CSSEvents = {
+		onhover:  { activator: 'onmouseenter', deactivator: 'onmouseleave' },
+		onactive: { activator: 'onmousedown',  deactivator: 'onmouseup' },
+		onfocus:  { activator: 'onfocus',      deactivator: 'onblur' }
+	};
+	
+	// CSSHoverElement constructor, called via CSSHover.patch
+	function CSSHoverElement(node, type, className) {
+
+		// the CSSHoverElement patches individual nodes by manually applying the events that should 
+		// have fired by the css pseudoclasses, eg mouseenter and mouseleave for :hover. 
+
+		this.node = node;
+		this.type = type;
+		var replacer = new RegExp('(^|\\s)'+className+'(\\s|$)', 'g');
+
+		// store event handlers for removal onunload
+		this.activator =   function(){ node.className += ' ' + className; };
+		this.deactivator = function(){ node.className = node.className.replace(replacer, ' '); };
+		
+		// add the events
+		node.attachEvent(CSSEvents[type].activator, this.activator);
+		node.attachEvent(CSSEvents[type].deactivator, this.deactivator);
+	}
+	
+	CSSHoverElement.prototype = {
+		// onbeforeunload, called via CSSHover.unload
+		unload:function() {
+
+			// remove events 
+			this.node.detachEvent(CSSEvents[this.type].activator, this.activator);
+			this.node.detachEvent(CSSEvents[this.type].deactivator, this.deactivator);
+
+			// and set properties to null 
+			this.activator = null;
+			this.deactivator = null;
+			this.node = null;
+			this.type = null;
+		}
+	};
+
+	// add the unload to the onbeforeunload event
+	window.attachEvent('onbeforeunload', function(){
+		CSSHover.unload();
+	});
+
+	/**
+	 *	Public hook
+	 *	--------------------------
+	 */
+	
+	return function(node, type, className, property) {
+		if(node) {
+			// called via the css expression; patches individual nodes
+			return CSSHover.patch(node, type, className, property);
+		} else {
+			// called ondomcontentready via the public:attach node
+			CSSHover.init();
+		}
+	};
+
+})();
+</script>
\ No newline at end of file
diff --git a/vector/csshover.min.htc b/vector/csshover.min.htc
new file mode 100644
index 0000000..7e5c57b
--- /dev/null
+++ b/vector/csshover.min.htc
@@ -0,0 +1,12 @@
+<public:attach event="ondocumentready" onevent="CSSHover()" />
+<script>
+/**
+ * Whatever:hover - V3.11
+ * http://www.xs4all.nl/~peterned/
+ *	
+ * Copyright (c) 2009 Peter Nederlof
+ * Licensed under the LGPL license
+ * http://creativecommons.org/licenses/LGPL/2.1
+ */
+window.CSSHover=(function(){var m=/(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active|focus))/i;var n=/(.*?)\:(hover|active|focus)/i;var o=/[^:]+:([a-z\-]+).*/i;var p=/(\.([a-z0-9_\-]+):[a-z]+)|(:[a-z]+)/gi;var q=/\.([a-z0-9_\-]*on(hover|active|focus))/i;var s=/msie (5|6|7)/i;var t=/backcompat/i;var u={index:0,list:['text-kashida','text-kashida-space','text-justify'],get:function(){return this.list[(this.index++)%this.list.length]}};var v=function(c){return c.replace(/-(.)/mg,function(a,b){return b.toUpperCase()})};var w={elements:[],callbacks:{},init:function(){if(!s.test(navigator.userAgent)&&!t.test(window.document.compatMode)){return}var a=window.document.styleSheets,l=a.length;for(var i=0;i<l;i++){this.parseStylesheet(a[i])}},parseStylesheet:function(a){if(a.imports){try{var b=a.imports;var l=b.length;for(var i=0;i<l;i++){this.parseStylesheet(a.imports[i])}}catch(securityException){}}try{var c=a.rules;var r=c.length;for(var j=0;j<r;j++){this.parseCSSRule(c[j],a)}}catch(someException){}},parseCSSRule:function(a,b){var c=a.selectorText;if(m.test(c)){var d=a.style.cssText;var e=n.exec(c)[1];var f=c.replace(o,'on$1');var g=c.replace(p,'.$2'+f);var h=q.exec(g)[1];var i=e+h;if(!this.callbacks[i]){var j=u.get();var k=v(j);b.addRule(e,j+':expression(CSSHover(this, "'+f+'", "'+h+'", "'+k+'"))');this.callbacks[i]=true}b.addRule(g,d)}},patch:function(a,b,c,d){try{var f=a.parentNode.currentStyle[d];a.style[d]=f}catch(e){a.runtimeStyle[d]=''}if(!a.csshover){a.csshover=[]}if(!a.csshover[c]){a.csshover[c]=true;var g=new CSSHoverElement(a,b,c);this.elements.push(g)}return b},unload:function(){try{var l=this.elements.length;for(var i=0;i<l;i++){this.elements[i].unload()}this.elements=[];this.callbacks={}}catch(e){}}};var x={onhover:{activator:'onmouseenter',deactivator:'onmouseleave'},onactive:{activator:'onmousedown',deactivator:'onmouseup'},onfocus:{activator:'onfocus',deactivator:'onblur'}};function CSSHoverElement(a,b,c){this.node=a;this.type=b;var d=new RegExp('(^|\\s)'+c+'(\\s|$)','g');this.activator=function(){a.className+=' '+c};this.deactivator=function(){a.className=a.className.replace(d,' ')};a.attachEvent(x[b].activator,this.activator);a.attachEvent(x[b].deactivator,this.deactivator)}CSSHoverElement.prototype={unload:function(){this.node.detachEvent(x[this.type].activator,this.activator);this.node.detachEvent(x[this.type].deactivator,this.deactivator);this.activator=null;this.deactivator=null;this.node=null;this.type=null}};window.attachEvent('onbeforeunload',function(){w.unload()});return function(a,b,c,d){if(a){return w.patch(a,b,c,d)}else{w.init()}}})();
+</script>
diff --git a/vector/images/arrow-collapsed-ltr.png b/vector/images/arrow-collapsed-ltr.png
new file mode 100644
index 0000000..063ac6f
--- /dev/null
+++ b/vector/images/arrow-collapsed-ltr.png
diff --git a/vector/images/arrow-collapsed-ltr.svg b/vector/images/arrow-collapsed-ltr.svg
new file mode 100644
index 0000000..b943caa
--- /dev/null
+++ b/vector/images/arrow-collapsed-ltr.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M6.001 2.998l5.001 5-5.001 5z" fill="#797979"/></svg>
\ No newline at end of file
diff --git a/vector/images/arrow-collapsed-rtl.png b/vector/images/arrow-collapsed-rtl.png
new file mode 100644
index 0000000..c346218
--- /dev/null
+++ b/vector/images/arrow-collapsed-rtl.png
diff --git a/vector/images/arrow-collapsed-rtl.svg b/vector/images/arrow-collapsed-rtl.svg
new file mode 100644
index 0000000..5faf356
--- /dev/null
+++ b/vector/images/arrow-collapsed-rtl.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M9.999 13.002l-5.001-5 5.001-5z" fill="#797979"/></svg>
\ No newline at end of file
diff --git a/vector/images/arrow-down-focus-icon.png b/vector/images/arrow-down-focus-icon.png
new file mode 100644
index 0000000..7640bd1
--- /dev/null
+++ b/vector/images/arrow-down-focus-icon.png
diff --git a/vector/images/arrow-down-focus-icon.svg b/vector/images/arrow-down-focus-icon.svg
new file mode 100644
index 0000000..826c280
--- /dev/null
+++ b/vector/images/arrow-down-focus-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="22" height="16"><path d="M15.502 6.001l-5 5.001-5-5.001z" fill="#929292"/></svg>
\ No newline at end of file
diff --git a/vector/images/arrow-down-icon.png b/vector/images/arrow-down-icon.png
new file mode 100644
index 0000000..12e3b93
--- /dev/null
+++ b/vector/images/arrow-down-icon.png
diff --git a/vector/images/arrow-down-icon.svg b/vector/images/arrow-down-icon.svg
new file mode 100644
index 0000000..8e31b2f
--- /dev/null
+++ b/vector/images/arrow-down-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="22" height="16"><path d="M15.502 6.001l-5 5.001-5-5.001z" fill="#797979"/></svg>
\ No newline at end of file
diff --git a/vector/images/arrow-expanded.png b/vector/images/arrow-expanded.png
new file mode 100644
index 0000000..0221028
--- /dev/null
+++ b/vector/images/arrow-expanded.png
diff --git a/vector/images/arrow-expanded.svg b/vector/images/arrow-expanded.svg
new file mode 100644
index 0000000..e744ec3
--- /dev/null
+++ b/vector/images/arrow-expanded.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M13.002 6.001l-5 5.001-5-5.001z" fill="#797979"/></svg>
\ No newline at end of file
diff --git a/vector/images/bullet-icon.png b/vector/images/bullet-icon.png
new file mode 100644
index 0000000..7bae98f
--- /dev/null
+++ b/vector/images/bullet-icon.png
diff --git a/vector/images/external-link-ltr-icon.png b/vector/images/external-link-ltr-icon.png
new file mode 100644
index 0000000..6308383
--- /dev/null
+++ b/vector/images/external-link-ltr-icon.png
diff --git a/vector/images/external-link-ltr-icon.svg b/vector/images/external-link-ltr-icon.svg
new file mode 100644
index 0000000..5969d03
--- /dev/null
+++ b/vector/images/external-link-ltr-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><g transform="translate(-826.429 -698.791)"><rect width="5.982" height="5.982" x="826.929" y="702.309" fill="#fff" stroke="#06c"/><g><path d="M831.194 698.791h5.234v5.391l-1.571 1.545-1.31-1.31-2.725 2.725-2.689-2.689 2.808-2.808-1.311-1.311z" fill="#06f"/><path d="M835.424 699.795l.022 4.885-1.817-1.817-2.881 2.881-1.228-1.228 2.881-2.881-1.851-1.851z" fill="#fff"/></g></g></svg>
\ No newline at end of file
diff --git a/vector/images/external-link-rtl-icon.png b/vector/images/external-link-rtl-icon.png
new file mode 100644
index 0000000..5313234
--- /dev/null
+++ b/vector/images/external-link-rtl-icon.png
diff --git a/vector/images/external-link-rtl-icon.svg b/vector/images/external-link-rtl-icon.svg
new file mode 100644
index 0000000..75a7025
--- /dev/null
+++ b/vector/images/external-link-rtl-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><g transform="translate(-826.429 -698.791)"><rect width="5.982" height="5.982" x="-835.929" y="702.309" transform="scale(-1 1)" fill="#fff" stroke="#06c"/><g><path d="M831.663 698.791h-5.234v5.391l1.571 1.545 1.31-1.31 2.725 2.725 2.689-2.689-2.808-2.808 1.311-1.311z" fill="#06f"/><path d="M827.433 699.795l-.022 4.885 1.817-1.817 2.881 2.881 1.228-1.228-2.881-2.881 1.851-1.851z" fill="#fff"/></g></g></svg>
\ No newline at end of file
diff --git a/vector/images/link-icon.png b/vector/images/link-icon.png
new file mode 100644
index 0000000..b70efaa
--- /dev/null
+++ b/vector/images/link-icon.png
diff --git a/vector/images/magnify-clip.png b/vector/images/magnify-clip.png
new file mode 100644
index 0000000..00a9cee
--- /dev/null
+++ b/vector/images/magnify-clip.png
diff --git a/vector/images/page-fade.png b/vector/images/page-fade.png
new file mode 100644
index 0000000..b4a6034
--- /dev/null
+++ b/vector/images/page-fade.png
diff --git a/vector/images/portal-break-ltr.png b/vector/images/portal-break-ltr.png
new file mode 100644
index 0000000..20bf366
--- /dev/null
+++ b/vector/images/portal-break-ltr.png
diff --git a/vector/images/portal-break-rtl.png b/vector/images/portal-break-rtl.png
new file mode 100644
index 0000000..e5f6223
--- /dev/null
+++ b/vector/images/portal-break-rtl.png
diff --git a/vector/images/portal-break.png b/vector/images/portal-break.png
new file mode 100644
index 0000000..90c3918
--- /dev/null
+++ b/vector/images/portal-break.png
diff --git a/vector/images/preferences/break.png b/vector/images/preferences/break.png
new file mode 100644
index 0000000..b529308
--- /dev/null
+++ b/vector/images/preferences/break.png
diff --git a/vector/images/preferences/fade.png b/vector/images/preferences/fade.png
new file mode 100644
index 0000000..638084d
--- /dev/null
+++ b/vector/images/preferences/fade.png
diff --git a/vector/images/search-fade.png b/vector/images/search-fade.png
new file mode 100644
index 0000000..6cb7d28
--- /dev/null
+++ b/vector/images/search-fade.png
diff --git a/vector/images/search-ltr.png b/vector/images/search-ltr.png
new file mode 100644
index 0000000..1db2eb2
--- /dev/null
+++ b/vector/images/search-ltr.png
diff --git a/vector/images/search-ltr.svg b/vector/images/search-ltr.svg
new file mode 100644
index 0000000..0720f20
--- /dev/null
+++ b/vector/images/search-ltr.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#6c6c6c" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>
\ No newline at end of file
diff --git a/vector/images/search-rtl.png b/vector/images/search-rtl.png
new file mode 100644
index 0000000..c26c8d0
--- /dev/null
+++ b/vector/images/search-rtl.png
diff --git a/vector/images/search-rtl.svg b/vector/images/search-rtl.svg
new file mode 100644
index 0000000..622d5f9
--- /dev/null
+++ b/vector/images/search-rtl.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#6c6c6c" fill="none"><path d="M.71 11.71l4-4"/><circle cx="7" cy="5" r="4"/></g></svg>
\ No newline at end of file
diff --git a/vector/images/tab-break.png b/vector/images/tab-break.png
new file mode 100644
index 0000000..6d37af5
--- /dev/null
+++ b/vector/images/tab-break.png
diff --git a/vector/images/tab-current-fade.png b/vector/images/tab-current-fade.png
new file mode 100644
index 0000000..b8f772f
--- /dev/null
+++ b/vector/images/tab-current-fade.png
diff --git a/vector/images/tab-normal-fade.png b/vector/images/tab-normal-fade.png
new file mode 100644
index 0000000..f719a88
--- /dev/null
+++ b/vector/images/tab-normal-fade.png
diff --git a/vector/images/unwatch-icon-hl.png b/vector/images/unwatch-icon-hl.png
new file mode 100644
index 0000000..6b2b502
--- /dev/null
+++ b/vector/images/unwatch-icon-hl.png
diff --git a/vector/images/unwatch-icon-hl.svg b/vector/images/unwatch-icon-hl.svg
new file mode 100644
index 0000000..d52d547
--- /dev/null
+++ b/vector/images/unwatch-icon-hl.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><linearGradient id="a"><stop offset="0" stop-color="#c2edff"/><stop offset=".5" stop-color="#68bdff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient x1="13.47" y1="14.363" x2="4.596" y2="3.397" id="b" xlink:href="#a" gradientUnits="userSpaceOnUse"/></defs><path d="M8.103 1.146l2.175 4.408 4.864.707-3.52 3.431.831 4.845-4.351-2.287-4.351 2.287.831-4.845-3.52-3.431 4.864-.707z" fill="url(#b)" stroke="#c8b250" stroke-width="0.9999199999999999"/></svg>
\ No newline at end of file
diff --git a/vector/images/unwatch-icon.png b/vector/images/unwatch-icon.png
new file mode 100644
index 0000000..9fd9436
--- /dev/null
+++ b/vector/images/unwatch-icon.png
diff --git a/vector/images/unwatch-icon.svg b/vector/images/unwatch-icon.svg
new file mode 100644
index 0000000..cde7bc5
--- /dev/null
+++ b/vector/images/unwatch-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><linearGradient id="a"><stop offset="0" stop-color="#c2edff"/><stop offset=".5" stop-color="#68bdff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient x1="13.47" y1="14.363" x2="4.596" y2="3.397" id="b" xlink:href="#a" gradientUnits="userSpaceOnUse"/></defs><path d="M8.103 1.146l2.175 4.408 4.864.707-3.52 3.431.831 4.845-4.351-2.287-4.351 2.287.831-4.845-3.52-3.431 4.864-.707z" fill="url(#b)" stroke="#7cb5d1" stroke-width="0.9999199999999999"/></svg>
\ No newline at end of file
diff --git a/vector/images/user-icon.png b/vector/images/user-icon.png
new file mode 100644
index 0000000..57f9f8d
--- /dev/null
+++ b/vector/images/user-icon.png
diff --git a/vector/images/user-icon.svg b/vector/images/user-icon.svg
new file mode 100644
index 0000000..4335bcf
--- /dev/null
+++ b/vector/images/user-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="13.837"><defs><linearGradient id="e"><stop offset="0"/><stop offset="1" stop-opacity="0"/></linearGradient><linearGradient id="b"><stop offset="0" stop-color="#3b74bc"/><stop offset="1" stop-color="#2d5990"/></linearGradient><linearGradient id="c"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#c9c9c9"/></linearGradient><linearGradient id="a"><stop offset="0"/><stop offset="1" stop-opacity="0"/></linearGradient><linearGradient id="d"><stop offset="0" stop-color="#f4d9b1"/><stop offset="1" stop-color="#df9725"/></linearGradient><radialGradient cx="31.113" cy="19.009" r="8.662" fx="31.113" fy="19.009" id="f" xlink:href="#a" gradientUnits="userSpaceOnUse"/><radialGradient cx="28.09" cy="27.203" r="13.565" fx="28.09" fy="27.203" id="g" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.298 0 0 .885 -8.359 4.94)"/><linearGradient x1="30.936" y1="29.553" x2="30.936" y2="35.803" id="h" xlink:href="#c" gradientUnits="userSpaceOnUse"/><radialGradient cx="31.113" cy="19.009" r="8.662" fx="31.113" fy="19.009" id="i" xlink:href="#a" gradientUnits="userSpaceOnUse"/><radialGradient cx="29.345" cy="17.064" r="9.162" fx="29.345" fy="17.064" id="j" xlink:href="#d" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.788 0 0 .788 6.221 3.618)"/><linearGradient x1="20.662" y1="35.818" x2="22.627" y2="36.218" id="k" xlink:href="#e" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.983 .182 -.182 .983 6.232 -2.651)"/><linearGradient x1="22.687" y1="36.39" x2="21.408" y2="35.74" id="l" xlink:href="#e" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.978 .21 .21 .978 55.11 -3.945)"/></defs><g color="#000"><path d="M39.775 19.009a8.662 8.662 0 1 1-17.324 0 8.662 8.662 0 1 1 17.324 0z" transform="matrix(.693 0 0 .374 -15.548 3.481)" fill="url(#f)" fill-rule="evenodd" overflow="visible"/><path d="M4.046 12.398h4.137c1.172 0 2.332-.43 2.758-1.655.404-1.163.069-3.378-2.551-5.171h-4.895c-2.62 1.655-2.947 3.917-2.344 5.24.614 1.347 1.655 1.586 2.896 1.586z" fill="url(#g)" fill-rule="evenodd" stroke="#204a87" stroke-linecap="round" stroke-linejoin="round" overflow="visible" stroke-width="0.39"/><path d="M4.321 6.193c1.241 1.103 1.793 5.102 1.793 5.102s.552-3.999 1.517-5.171l-3.309.069z" fill="url(#h)" fill-rule="evenodd" overflow="visible"/><path d="M5.21 6.607s-.839.648-.767 1.428c-.796-.702-.819-2.048-.819-2.048l1.586.62z" fill="#729fcf" fill-rule="evenodd" overflow="visible"/><path d="M4.018 11.992l4.092-.009c1.029 0 2.049-.377 2.422-1.453.355-1.022-.037-2.967-2.338-4.542l-4.495-.095c-2.301 1.453-2.747 3.441-2.208 4.697.538 1.256 1.324 1.393 2.526 1.401z" opacity=".215" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" overflow="visible" fill="none" stroke-width="0.39"/><path d="M6.941 6.607s.839.648.767 1.428c.796-.702.819-2.048.819-2.048l-1.586.62z" fill="#729fcf" fill-rule="evenodd" overflow="visible"/><path d="M39.775 19.009a8.662 8.662 0 1 1-17.324 0 8.662 8.662 0 1 1 17.324 0z" transform="matrix(.39 0 0 .39 -6.138 -2.475)" fill="url(#i)" fill-rule="evenodd" overflow="visible"/><path d="M39.775 19.009a8.662 8.662 0 1 1-17.324 0 8.662 8.662 0 1 1 17.324 0z" fill="url(#j)" fill-rule="evenodd" stroke="#c17d11" stroke-linecap="round" stroke-linejoin="round" overflow="visible" transform="matrix(.39 0 0 .39 -6.089 -3.84)"/><path d="M39.775 19.009a8.662 8.662 0 1 1-17.324 0 8.662 8.662 0 1 1 17.324 0z" transform="matrix(.342 0 0 .342 -4.598 -2.929)" opacity=".196" stroke="#fff" stroke-width="1.14" stroke-linecap="round" stroke-linejoin="round" overflow="visible" fill="none"/><path d="M2.433 12.062c-.487-.213-.704-.725-.704-.725.328-1.587 1.451-2.748 1.451-2.748s-.889 2.5-.746 3.473z" opacity=".228" fill="url(#k)" fill-rule="evenodd" overflow="visible"/><path d="M9.806 11.728c.48-.227.704-.781.704-.781-.374-1.577-1.551-2.669-1.551-2.669s.961 2.474.847 3.45z" opacity=".228" fill="url(#l)" fill-rule="evenodd" overflow="visible"/></g></svg>
\ No newline at end of file
diff --git a/vector/images/watch-icon-hl.png b/vector/images/watch-icon-hl.png
new file mode 100644
index 0000000..4cb87cd
--- /dev/null
+++ b/vector/images/watch-icon-hl.png
diff --git a/vector/images/watch-icon-hl.svg b/vector/images/watch-icon-hl.svg
new file mode 100644
index 0000000..664c671
--- /dev/null
+++ b/vector/images/watch-icon-hl.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8.103 1.146l2.175 4.408 4.864.707-3.52 3.431.831 4.845-4.351-2.287-4.351 2.287.831-4.845-3.52-3.431 4.864-.707z" fill="#fff" stroke="#c8b250" stroke-width="0.9999199999999999"/></svg>
\ No newline at end of file
diff --git a/vector/images/watch-icon-loading.png b/vector/images/watch-icon-loading.png
new file mode 100644
index 0000000..5f0c490
--- /dev/null
+++ b/vector/images/watch-icon-loading.png
diff --git a/vector/images/watch-icon-loading.svg b/vector/images/watch-icon-loading.svg
new file mode 100644
index 0000000..751eb14
--- /dev/null
+++ b/vector/images/watch-icon-loading.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8.103 1.146l2.175 4.408 4.864.707-3.52 3.431.831 4.845-4.351-2.287-4.351 2.287.831-4.845-3.52-3.431 4.864-.707z" fill="#fff" stroke="#d1d1d1" stroke-width="0.9999199999999999"/></svg>
\ No newline at end of file
diff --git a/vector/images/watch-icon.png b/vector/images/watch-icon.png
new file mode 100644
index 0000000..39daff2
--- /dev/null
+++ b/vector/images/watch-icon.png
diff --git a/vector/images/watch-icon.svg b/vector/images/watch-icon.svg
new file mode 100644
index 0000000..907b05b
--- /dev/null
+++ b/vector/images/watch-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8.103 1.146l2.175 4.408 4.864.707-3.52 3.431.831 4.845-4.351-2.287-4.351 2.287.831-4.845-3.52-3.431 4.864-.707z" fill="#fff" stroke="#7cb5d1" stroke-width="0.9999199999999999"/></svg>
\ No newline at end of file
diff --git a/vector/screen-hd.less b/vector/screen-hd.less
new file mode 100644
index 0000000..8b286f4
--- /dev/null
+++ b/vector/screen-hd.less
@@ -0,0 +1,30 @@
+/* Vector screen styles for high definition displays */
+
+@import "variables.less";
+
+div#content {
+	margin-left: 11em;
+	padding: 1.25em 1.5em 1.5em 1.5em;
+}
+#p-logo {
+	left: @menu-main-logo-left;
+}
+div#footer {
+	margin-left: 11em;
+	padding: 1.25em;
+}
+#mw-panel {
+	padding-left: 0.5em;
+}
+#p-search {
+	margin-right: 1em;
+}
+#left-navigation {
+	margin-left: 11em;
+}
+#p-personal {
+	right: 1em;
+}
+#mw-head-base {
+	margin-left: 11em;
+}
diff --git a/vector/screen.less b/vector/screen.less
new file mode 100644
index 0000000..f7b374f
--- /dev/null
+++ b/vector/screen.less
@@ -0,0 +1,10 @@
+/* Vector screen styles */
+
+@import "variables.less";
+
+@import "components/common.less";
+@import "components/animations.less";
+@import "components/navigation.less";
+@import "components/footer.less";
+@import 'components/notifications.less';
+@import "components/externalLinks.less";
diff --git a/vector/special.less b/vector/special.less
new file mode 100644
index 0000000..6af4b1e
--- /dev/null
+++ b/vector/special.less
@@ -0,0 +1,7 @@
+/**
+ * Adjusts for decreased margin-bottom for h2 elements inside #content div
+ * introduced in March / April 2014 typography update.
+ */
+table.mw-specialpages-table {
+	margin-top: 0;
+}
diff --git a/vector/special.preferences.less b/vector/special.preferences.less
new file mode 100644
index 0000000..a9b1006
--- /dev/null
+++ b/vector/special.preferences.less
@@ -0,0 +1,114 @@
+@import "mediawiki.mixins";
+@import "variables";
+
+/**
+ * The following code is highly modified from monobook. It would be nice if the
+ * preftoc id was more human readable like preferences-toc for instance,
+ * howerver this would require backporting the other skins.
+ */
+
+#preftoc {
+	/* Tabs */
+	width: 100%;
+	float: left;
+	clear: both;
+	margin: 0 !important;
+	padding: 0 !important;
+	.background-image('images/preferences/break.png');
+	background-position: bottom left;
+	background-repeat: no-repeat;
+
+	li {
+		/* Tab */
+		float: left;
+		margin: 0;
+		padding: 0;
+		padding-right: 1px;
+		height: 2.25em;
+		white-space: nowrap;
+		list-style-type: none;
+		list-style-image: none;
+		.background-image('images/preferences/break.png');
+		background-position: bottom right;
+		background-repeat: no-repeat;
+
+		/* Sadly, IE6 won't understand this */
+		&:first-child {
+			margin-left: 1px;
+		}
+
+		&.selected {
+			a {
+				.background-image('images/preferences/fade.png');
+				background-position: bottom;
+				background-repeat: repeat-x;
+				color: #333;
+				text-decoration: none;
+			}
+		}
+	}
+
+	a,
+	a:active {
+		display: inline-block;
+		position: relative;
+		color: @menu-link-color;
+		padding: 0.5em;
+		text-decoration: none;
+		background-image: none;
+		font-size: 0.9em;
+	}
+
+	a:hover,
+	a:focus {
+		text-decoration: underline;
+	}
+}
+
+#preferences {
+	float: left;
+	width: 100%;
+	margin: 0;
+	margin-top: -2px;
+	clear: both;
+	border: solid 1px #ccc;
+	background-color: #fafafa;
+
+	fieldset {
+		border: none;
+		border-top: solid 1px #ccc;
+
+		&.prefsection {
+			border: none;
+			padding: 0;
+			margin: 1em;
+
+			legend.mainLegend {
+				display: none;
+			}
+		}
+	}
+
+	legend {
+		color: #666;
+	}
+
+	td {
+		padding-left: 0.5em;
+		padding-right: 0.5em;
+	}
+
+	div.mw-prefs-buttons {
+		padding: 1em;
+
+		input {
+			margin-right: 0.25em;
+		}
+	}
+}
+
+.htmlform-tip {
+	font-size: x-small;
+	padding: .2em 2em;
+	color: #666;
+}
diff --git a/vector/variables.less b/vector/variables.less
new file mode 100644
index 0000000..f008a3a
--- /dev/null
+++ b/vector/variables.less
@@ -0,0 +1,43 @@
+@html-font-size: 1em;
+
+// Page content
+// FIXME: Use global variable since Echo and CentralNotice use this variable
+@content-border-color: #a7d7f9;
+// FIXME: Find an open font that works with this stack and is readable by Windows users
+@content-font-family: sans-serif;
+@content-font-color: #252525;
+@content-font-size: 0.875em;
+@content-line-height: 1.6;
+@content-padding: 1em;
+@content-heading-font-size: 1.8em;
+@content-heading-font-family: sans-serif;
+@body-background-color: #fff;
+@heading-line-height: 1.3;
+
+// Navigation
+@menu-background-color: #f6f6f6;
+
+// Common menu
+@menu-link-color: #0645ad;
+
+// Main menu
+@menu-main-font-size: inherit;
+@menu-main-heading-font-size: 0.75em;
+@menu-main-heading-padding: 0 1.75em 0.25em 0.25em;
+
+@menu-main-body-font-size: 0.75em;
+@menu-main-body-link-color: #0645ad;
+@menu-main-body-link-visited-color: #0b0080;
+@menu-main-body-margin: 0 0 0 1.25em;
+@menu-main-body-padding: 0;
+@menu-main-logo-left: 0.5em;
+
+// Personal menu
+@menu-personal-font-size: 0.75em;
+
+// Collapsible nav
+@collapsible-nav-heading-color: #4d4d4d;
+@collapsible-nav-heading-collapsed-color: #0645ad;
+
+@collapsible-nav-heading-padding: 4px 0 3px 1.5em;
+@collapsible-nav-body-margin: 0 0 0 1.25em;
diff --git a/vector/vector.js b/vector/vector.js
new file mode 100644
index 0000000..0bc114a
--- /dev/null
+++ b/vector/vector.js
@@ -0,0 +1,55 @@
+/**
+ * Vector-specific scripts
+ */
+jQuery( function ( $ ) {
+	$( 'div.vectorMenu' ).each( function () {
+		var $el = $( this );
+		$el.find( '> h3 > a' ).parent()
+			.attr( 'tabindex', '0' )
+			// For accessibility, show the menu when the h3 is clicked (bug 24298/46486)
+			.on( 'click keypress', function ( e ) {
+				if ( e.type === 'click' || e.which === 13 ) {
+					$el.toggleClass( 'menuForceShow' );
+					e.preventDefault();
+				}
+			} )
+			// When the heading has focus, also set a class that will change the arrow icon
+			.focus( function () {
+				$el.find( '> a' ).addClass( 'vectorMenuFocus' );
+			} )
+			.blur( function () {
+				$el.find( '> a' ).removeClass( 'vectorMenuFocus' );
+			} )
+			.find( '> a:first' )
+			// As the h3 can already be focused there's no need for the link to be focusable
+			.attr( 'tabindex', '-1' );
+	} );
+
+	/**
+	 * Collapsible tabs for Vector
+	 */
+	var $cactions = $( '#p-cactions' );
+
+	// Bind callback functions to animate our drop down menu in and out
+	// and then call the collapsibleTabs function on the menu
+	$( '#p-views ul' )
+		.bind( 'beforeTabCollapse', function () {
+			// If the dropdown was hidden, show it
+			if ( $cactions.hasClass( 'emptyPortlet' ) ) {
+				$cactions
+					.removeClass( 'emptyPortlet' )
+					.find( 'h3' )
+						.css( 'width', '1px' ).animate( { 'width': '24px' }, 390 );
+			}
+		} )
+		.bind( 'beforeTabExpand', function () {
+			// If we're removing the last child node right now, hide the dropdown
+			if ( $cactions.find( 'li' ).length === 1 ) {
+				$cactions.find( 'h3' ).animate( { 'width': '1px' }, 390, function () {
+					$( this ).attr( 'style', '' )
+						.parent().addClass( 'emptyPortlet' );
+				});
+			}
+		} )
+		.collapsibleTabs();
+} );