Make this thing responsive

And some other stuff too just because I ran into it on the way: * Added indicators * Fixed js in general * Bumped version number * Added some stupid hacks * Cleaned stuff up * I don't actually know Change-Id: Ifa557c6f0f8a972d8986c3bffdfe08ddb4b39664
9 years ago · f450f7e13b
parent 518fb58017
commit f450f7e13b
48 changed files with 3183 additions and 493 deletions
--- a/.jshintignore
+++ b/.jshintignore
@ -1,2 +1,3 @@
 node_modules/**
 vendor/**
+resources/libraries/**
--- a/Timeless.skin.php
+++ b/Timeless.skin.php
@ -9,19 +9,30 @@ class SkinTimeless extends SkinTemplate {
 		$template = 'TimelessTemplate', $useHeadElement = true;

 	/**
-	 * Add CSS via ResourceLoader
-	 *
 	 * @param $out OutputPage
 	 */
-	function setupSkinUserCss( OutputPage $out ) {
-		parent::setupSkinUserCss( $out );
+	public function initPage( OutputPage $out ) {
+		parent::initPage( $out );

-		$out->addMeta( 'viewport', 'width=device-width, initial-scale=1.0' );
+		$out->addMeta( 'viewport', 'width=device-width, initial-scale=1, maximum-scale=1' );

 		$out->addModuleStyles( array(
 			'mediawiki.skinning.content.externallinks',
-			'skins.timeless'
+			'skins.timeless',
+			'skins.timeless.misc'
 		) );
-		$out->addModules( array( 'skins.timeless.js' ) );
+		$out->addModules( array(
+			'skins.timeless.js',
+			'skins.timeless.mobile'
+		) );
+	}
+
+	/**
+	 * Add CSS via ResourceLoader
+	 *
+	 * @param $out OutputPage
+	 */
+	function setupSkinUserCss( OutputPage $out ) {
+		parent::setupSkinUserCss( $out );
 	}
 }
--- a/TimelessTemplate.php
+++ b/TimelessTemplate.php
@ -23,56 +23,66 @@ class TimelessTemplate extends BaseTemplate {
 				$this->outputLogo( 'p-logo-text', 'text' );
 				$this->outputSearch();
 				?>
-				<div class="color-middle"></div>
 			</div>
 			<div class="visual-clear"></div>
-			<div class="color-left"></div>
-			<div class="color-right"></div>
-			<div class="visual-clear"></div>
 			</div>

+			<div id="mw-header-hack" class="color-bar">
+				<div class="color-middle-container">
+					<div class="color-middle"></div>
+				</div>
+				<div class="color-left"></div>
+				<div class="color-right"></div>
+			</div>
+			<div id="mw-header-nav-hack">
+			<div class="color-bar">
+				<div class="color-middle-container">
+					<div class="color-middle"></div>
+				</div>
+				<div class="color-left"></div>
+				<div class="color-right"></div>
+			</div>
+			</div>
+			<div id="menus-cover"></div>
+
 			<div id="mw-content-container" class="ts-container">
 			<div id="mw-content-block" class="ts-inner">
 				<div id="mw-site-navigation">
-					<h2><?php echo $this->getMsg( 'navigation-heading' )->parse() ?></h2>
 					<?php
 					$this->outputLogo( 'p-logo', 'image' );
-					echo '<div id="site-navigation" class="sidebar-chunk">';
-						$this->outputSiteNavigation();
-					echo '</div>';
-					$this->outputPortlet( array(
+					$this->outputSiteNavigation();
+
+					$siteTools = $this->assemblePortlet( array(
 						'id' => 'p-sitetools',
 						'headerMessage' => 'timeless-sitetools',
-						'content' => $pileOfTools['general'],
-						'class' => 'sidebar-chunk'
+						'content' => $pileOfTools['general']
 					) );
+					$this->outputSidebarChunk( 'site-tools', 'timeless-sitetools', $siteTools );
 					?>
 				</div>
 				<div id="mw-related-navigation">
-					<div id="page-tools" class="sidebar-chunk">
-						<?php
-						if ( count( $pileOfTools['page-secondary'] ) > 0 ) {
-							$this->outputPortlet( array(
-								'id' => 'p-pageactions',
-								'headerMessage' => 'timeless-pageactions',
-								'content' => $pileOfTools['page-secondary'],
-							) );
-						}
-						if ( count( $pileOfTools['user'] ) > 0 ) {
-							$this->outputPortlet( array(
-								'id' => 'p-userpagetools',
-								'headerMessage' => 'timeless-userpagetools',
-								'content' => $pileOfTools['user'],
-							) );
-						}
-						$this->outputPortlet( array(
-							'id' => 'p-pagemisc',
-							'headerMessage' => 'timeless-pagemisc',
-							'content' => $pileOfTools['page-tertiary'],
-						) );
-						?>
-					</div>
 					<?php
+					$pageTools = '';
+					if ( count( $pileOfTools['page-secondary'] ) > 0 ) {
+						$pageTools .= $this->assemblePortlet( array(
+							'id' => 'p-pageactions',
+							'headerMessage' => 'timeless-pageactions',
+							'content' => $pileOfTools['page-secondary'],
+						) );
+					}
+					if ( count( $pileOfTools['user'] ) > 0 ) {
+						$pageTools .= $this->assemblePortlet( array(
+							'id' => 'p-userpagetools',
+							'headerMessage' => 'timeless-userpagetools',
+							'content' => $pileOfTools['user'],
+						) );
+					}
+					$pageTools .= $this->assemblePortlet( array(
+						'id' => 'p-pagemisc',
+						'headerMessage' => 'timeless-pagemisc',
+						'content' => $pileOfTools['page-tertiary'],
+					) );
+					$this->outputSidebarChunk( 'page-tools', 'timeless-pageactions', $pageTools );

 					$this->outputInterlanguageLinks();
 					$this->outputCategories();
@ -91,6 +101,7 @@ class TimelessTemplate extends BaseTemplate {
 						<div class="usermessage"><?php $this->html( 'newtalk' ) ?></div>
 						<?php
 					}
+					echo $this->getIndicators();
 					?>

 					<h1 class="firstHeading">
@ -98,14 +109,14 @@ class TimelessTemplate extends BaseTemplate {
 					</h1>
 					<div id="page-header-links">
 					<?php
-						$this->outputPortlet( array(
+						echo $this->assemblePortlet( array(
 							'id' => 'p-namespaces',
 							'headerMessage' => 'timeless-namespaces',
 							'content' => $pileOfTools['namespaces'],
 						) );
 					?>
 					<?php
-						$this->outputPortlet( array(
+						echo $this->assemblePortlet( array(
 							'id' => 'p-pagetools',
 							'headerMessage' => 'timeless-pagetools',
 							'content' => $pileOfTools['page-primary'],
@ -133,12 +144,15 @@ class TimelessTemplate extends BaseTemplate {
 						$this->html( 'bodytext' );
 						?>
 						<div class="visual-clear"></div>
-						<?php
-						$this->html( 'dataAfterContent' );
-						?>
 					</div>
 				</div>
 				</div>
+			<?php
+				if ( $this->data['catlinks'] ) {
+					$this->html( 'catlinks' );
+				}
+				$this->html( 'dataAfterContent' );
+			?>
 			<div class="visual-clear"></div>
 			</div>
 			</div>
@ -186,9 +200,9 @@ class TimelessTemplate extends BaseTemplate {
 	}

 	/**
-	 * Outputs a single sidebar portlet of any kind.
+	 * Returns a single sidebar portlet of any kind (monobook style)
 	 */
-	private function outputPortlet( $box ) {
+	private function assemblePortlet( $box ) {
 		if ( !$box['content'] ) {
 			return;
 		}
@ -198,35 +212,85 @@ class TimelessTemplate extends BaseTemplate {
 			$box['class'] .= ' mw-portlet';
 		}

-		?>
-		<div
-			role="navigation"
-			class="<?php echo $box['class'] ?>"
-			id="<?php echo Sanitizer::escapeId( $box['id'] ) ?>"
-			<?php echo Linker::tooltip( $box['id'] ) ?>
-		>
-			<h3>
-				<?php
-				if ( isset( $box['headerMessage'] ) ) {
-					echo $this->getMsg( $box['headerMessage'] )->escaped();
+		$content = '<div role="navigation" class="' . $box['class'] . '" id="' . Sanitizer::escapeId( $box['id'] ) . '"' . Linker::tooltip( $box['id'] ) . '>';
+		$content .= '<h3>';
+			if ( isset( $box['headerMessage'] ) ) {
+				$content .= $this->getMsg( $box['headerMessage'] )->escaped();
+			} else {
+				$content .= htmlspecialchars( $box['header'] );
+			}
+		$content .= '</h3>';
+		if ( is_array( $box['content'] ) ) {
+			$content .= '<ul>';
+			foreach ( $box['content'] as $key => $item ) {
+				$content .= $this->makeListItem( $key, $item );
+			}
+			$content .= '</ul>';
+		} else {
+			$content .= $box['content'];
+		}
+		$content .= '</div>';
+
+		return $content;
+	}
+
+	/**
+	 * Makes links for navigation lists.
+	 *
+	 * Modified to add a <span> around <a> content in navigation lists; everything else is
+	 * basically the same as in BaseTemplate, just with extra stuff removed.
+	 *
+	 * Can't just use the original's options['wrapper'] because it's a piece of crap and spews
+	 * infinite errors on the page.
+	 */
+	function makeLink( $key, $item, $options = array() ) {
+		if ( isset( $item['text'] ) ) {
+			$text = $item['text'];
+		} else {
+			$text = $this->translator->translate( isset( $item['msg'] ) ? $item['msg'] : $key );
+		}
+
+		$html = htmlspecialchars( $text );
+		$html = '<span>' . $html . '</span>';
+
+		if ( isset( $item['href'] ) ) {
+			$attrs = $item;
+			foreach ( array( 'single-id', 'text', 'msg', 'tooltiponly', 'context', 'primary' ) as $k ) {
+				unset( $attrs[$k] );
+			}
+
+			if ( isset( $item['id'] ) && !isset( $item['single-id'] ) ) {
+				$item['single-id'] = $item['id'];
+			}
+			if ( isset( $item['single-id'] ) ) {
+				if ( isset( $item['tooltiponly'] ) && $item['tooltiponly'] ) {
+					$title = Linker::titleAttrib( $item['single-id'] );
+					if ( $title !== false ) {
+						$attrs['title'] = $title;
+					}
 				} else {
-					echo htmlspecialchars( $box['header'] );
+					$tip = Linker::tooltipAndAccesskeyAttribs( $item['single-id'] );
+					if ( isset( $tip['title'] ) && $tip['title'] !== false ) {
+						$attrs['title'] = $tip['title'];
+					}
+					if ( isset( $tip['accesskey'] ) && $tip['accesskey'] !== false ) {
+						$attrs['accesskey'] = $tip['accesskey'];
+					}
 				}
-				?>
-			</h3>
+			}
+			$html = Html::rawElement( 'a', $attrs, $html );
+		}

-			<?php
-			if ( is_array( $box['content'] ) ) {
-				echo '<ul>';
-				foreach ( $box['content'] as $key => $item ) {
-					echo $this->makeListItem( $key, $item );
-				}
-				echo '</ul>';
-			} else {
-				echo $box['content'];
-			}?>
-		</div>
-		<?php
+		return $html;
+	}
+
+	/**
+	 * Outputs a sidebar-chunk containing one or more portlets
+	 */
+	private function outputSidebarChunk( $id, $headerMessage, $content ) {
+		echo '<div id="' . $id . '" class="sidebar-chunk">';
+		echo '<h2><span>' . $this->getMsg( $headerMessage )->escaped() . '</span><div class="pokey"></div></h2>';
+		echo '<div class="sidebar-inner">' . $content . '</div></div>';
 	}

 	/**
@ -305,24 +369,30 @@ class TimelessTemplate extends BaseTemplate {
 	 */
 	private function outputSiteNavigation() {
 		$sidebar = $this->getSidebar();
+		$content = '';

 		$sidebar['SEARCH'] = false; // Already hardcoded into header
 		$sidebar['TOOLBOX'] = false; // Parsed as part of pageTools
-		$sidebar['LANGUAGES'] = false; // PUT THIS ON THE OTHER SIDE
+		$sidebar['LANGUAGES'] = false; // Forcibly removed to separate chunk

 		foreach ( $sidebar as $boxName => $box ) {
 			if ( $boxName === false ) {
 				continue;
 			}
-			$this->outputPortlet( $box, true );
+			$content .= $this->assemblePortlet( $box, true );
 		}
+
+		$this->outputSidebarChunk( 'site-navigation', 'navigation', $content );
 	}

+	/**
+	 * Outputs user links portlet for header
+	 */
 	private function outputUserLinks() {
 		$user = $this->getSkin()->getUser();
 		?>
-		<div class="mw-portlet" id="p-personal" role="navigation">
-			<h3>
+		<div id="p-personal">
+		<h2>
 			<span>
 			<?php
 			// Display status, and make a dropdown if logged in
@ -339,9 +409,20 @@ class TimelessTemplate extends BaseTemplate {
 			}
 			?>
 			</span>
-			</h3>
-			<div class="p-body dropdown">
 			<div class="pokey"></div>
+		</h2>
+		<div id="p-personal-inner" class="dropdown">
+		<div class="mw-portlet" role="navigation">
+			<h3>
+			<?php
+			if ( $user->isLoggedIn() ) {
+				echo wfMessage( 'timeless-loggedinas', $user->getName() )->parse();
+			} else {
+				echo wfMessage( 'timeless-notloggedin' )->parse();
+			}
+			?>
+			</h3>
+			<div class="p-body">
 			<ul<?php $this->html( 'userlangattributes' ) ?>>
 			<?php
 				foreach ( $this->getPersonalTools() as $key => $item ) {
@ -357,12 +438,14 @@ class TimelessTemplate extends BaseTemplate {
 			</ul>
 			</div>
 		</div>
+		</div>
+		</div>
 		<?php
 	}

 	/*
 	 * Generates pile of all the tools
-	 * Returns array of arrays of each kind
+	 * Returns array of arrays of each kind (wouldn't it be nice if tools themselves just registered the type instead?)
 	 */
 	private function getPageTools() {
 		$title = $this->getSkin()->getTitle();
@ -399,6 +482,18 @@ class TimelessTemplate extends BaseTemplate {
 				'id' => 't-pagelog'
 			);
 		}
+		$pileOfTools['more'] = array(
+			'text' => $this->getMsg( 'timeless-more' )->escaped(),
+			'id' => 'ca-more',
+			'class' => 'dropdown-toggle'
+		);
+		if ( $this->data['language_urls'] ) {
+			$pileOfTools['languages'] = array(
+				'text' => $this->getMsg( 'timeless-languages' )->escaped(),
+				'id' => 'ca-languages',
+				'class' => 'dropdown-toggle'
+			);
+		}

 		/* This is really dumb, but there is no sane way to do this. */
 		foreach ( $pileOfTools as $navKey => $navBlock ) {
@ -406,7 +501,7 @@ class TimelessTemplate extends BaseTemplate {

 			if ( in_array( $navKey, array( 'watch', 'unwatch' ) ) ) {
 				$currentSet = 'namespaces';
-			} elseif ( in_array( $navKey, array( 'edit', 'view', 'history', 'contributions', 'addsection' ) ) ) {
+			} elseif ( in_array( $navKey, array( 'edit', 'view', 'history', 'contributions', 'addsection', 'more', 'languages' ) ) ) {
 				$currentSet = 'page-primary';
 			} elseif ( in_array( $navKey, array( 'delete', 'rename', 'protect', 'unprotect', 'viewsource', 'move' ) ) ) {
 				$currentSet = 'page-secondary';
@ -486,23 +581,27 @@ class TimelessTemplate extends BaseTemplate {

 			/* Assemble the html because why not... */
 			if ( $count ) {
-				$catList = '<div role="navigation" class="mw-portlet sidebar-chunk" id="p-catlist">';
+				if ( $normalCount ) {
+					$catHeader = 'categories';
+				} else {
+					$catHeader = 'hidden-categories';
+				}
+				$catList = '';
 				if ( $normalCount ) {
 					$catList .= $this->assembleCatList( $normalCats, 'catlist-normal', 'categories' );
 				}
 				if ( $hiddenCount ) {
 					$catList .= $this->assembleCatList( $hiddenCats, 'catlist-hidden', 'hidden-categories' );
 				}
-				$catList .= '</div>';
 			}
 		}
 		if ( $catList ) {
-			echo $catList;
+			$this->outputSidebarChunk( 'catlinks-sidebar', $catHeader, $catList );
 		}
 	}
 	private function assembleCatList( $list, $id, $message ) {
-		$catList = '<h3>' . $this->getMsg( $message )->escaped() . '</h3>';
-		$catList .= '<ul id="' . $id . '">';
+		$catList = '<div class="mw-portlet" id="' . $id . '"><h3>' . $this->getMsg( $message )->escaped() . '</h3>';
+		$catList .= '<ul>';
 		foreach ( $list as $category) {
 			$title = Title::makeTitleSafe( NS_CATEGORY, $category );
 			if ( !$title ) {
@ -511,21 +610,25 @@ class TimelessTemplate extends BaseTemplate {
 			$category = Linker::link( $title, $title->getText() );
 			$catList .=  '<li>' . $category . '</li>';
 		}
-		$catList .= '</ul>';
+		$catList .= '</ul></div>';

 		return $catList;
 	}

+	/*
+	 * Output interlanguage links block
+	 */
 	private function outputInterlanguageLinks() {
 		if ( $this->data['language_urls'] ) {
-			$msgObj = $this->getMsg( 'otherlanguages' );
-			$this->outputPortlet( array(
-				'id' => 'p-lang',
-				'header' => $msgObj->exists() ? $msgObj->text() : 'otherlanguages',
-				'generated' => false,
-				'content' => $this->data['language_urls'],
-				'class' => 'sidebar-chunk'
-			) );
+			$msgObj = $this->getMsg( 'otherlanguages' )->escaped();
+			$content = $this->assemblePortlet( array(
+					'id' => 'p-lang',
+					'header' => $msgObj,
+					'generated' => false,
+					'content' => $this->data['language_urls']
+				) );
+
+			$this->outputSidebarChunk( 'other-languages', 'timeless-languages', $content );
 		}
 	}
 }
--- a/i18n/en.json
+++ b/i18n/en.json
@ -3,19 +3,23 @@
 		"authors": [ "Isarra" ]
 	},
 	"skinname-timeless": "Timeless",
-	"timeless-desc": "A timeless skin designed after the Winter prototype by Brandon Harris.",
+	"timeless-desc": "A timeless skin designed after the Winter prototype by Brandon Harris, and various WMFy styles.",
 	"timeless-search-placeholder": "Search approximately {{NUMBEROFPAGES}} pages",
 	"timeless-loggedin": "Your account",
 	"timeless-anonymous": "Anonymous",
+	"timeless-loggedinas": "Logged in as $1",
+	"timeless-notloggedin": "Not logged in",
 	"timeless-userpage": "User page",
 	"timeless-talkpage": "User talk",
 	"timeless-pagelog": "Page logs",
+	"timeless-more": "More",
 	"timeless-sitetools": "Wiki tools",
 	"timeless-pageactions": "Page tools",
 	"timeless-userpagetools": "User tools",
 	"timeless-pagemisc": "More",
 	"timeless-namespaces": "Namespaces",
 	"timeless-pagetools": "Page actions",
+	"timeless-languages": "Languages",
 	"timeless-sitetitle": "{{MediaWiki:Sitetitle}}"
 }

--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@ -10,14 +10,18 @@
 	"timeless-search-placeholder": "Main search input placeholder text",
 	"timeless-loggedin": "Label for logged in users' user menu (if their username is too long to fit)",
 	"timeless-anonymous": "Label for anonymous (not logged in) user menu\n{{Identical|Anonymous}}",
+	"timeless-loggedinas": "Note for personal menu for logged in users noting their current username\n\nParameters:\n* $1 - username",
+	"timeless-notloggedin": "Note for personal menu for anonymous users clarifying that they are not logged in",
 	"timeless-userpage": "User page/profile link label in the personal menu\n{{Identical|User page}}",
 	"timeless-talkpage": "Talk page link label in the personal menu",
 	"timeless-pagelog": "Label for special:log link for the page",
+	"timeless-more": "Label for the more tools dropdown menu in the page actions toolbar",
 	"timeless-sitetools": "Label for general site tools menu in sidebar",
 	"timeless-pageactions": "Label for some page actions",
 	"timeless-userpagetools": "Label for actions associated with a userpage",
 	"timeless-pagemisc": "Label for more tools\n{{Identical|More}}",
 	"timeless-namespaces": "Label for page namespaces and watch tools\n{{Identical|Namespace}}",
 	"timeless-pagetools": "Label for other page tools",
+	"timeless-languages": "Label for the other languages dropdown",
 	"timeless-sitetitle": "{{ignore}}\nSite title for site banner"
 }
--- a/resources/images/arrow-down-white.png
+++ b/resources/images/arrow-down-white.png
--- a/resources/images/arrow-down-white.svg
+++ b/resources/images/arrow-down-white.svg
@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="22" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
-<path style="fill:#555" d="m15.5 5-5 5-5-5z"/>
-<path style="fill:#fff" d="m15.5 6l-5 5-5-5z" fill="#797979"/>
-</svg>
--- a/resources/images/cat-grey.png
+++ b/resources/images/cat-grey.png
--- a/resources/images/cat-grey.svg
+++ b/resources/images/cat-grey.svg
--- a/resources/images/clock-grey.png
+++ b/resources/images/clock-grey.png
--- a/resources/images/clock-grey.svg
+++ b/resources/images/clock-grey.svg
@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="20"
+   height="20"
+   viewBox="0 0 20 20"
+   id="svg4427"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="clock-grey.svg"
+   inkscape:export-filename="/media/shintaiden/home/rahah/mediawiki/skins/Timeless/resources/images/clock-grey.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4429" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="44.8"
+     inkscape:cx="8.6752296"
+     inkscape:cy="9.0058783"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-bbox="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-others="false"
+     inkscape:window-width="2657"
+     inkscape:window-height="1773"
+     inkscape:window-x="3792"
+     inkscape:window-y="316"
+     inkscape:window-maximized="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4975" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4432">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1032.3622)">
+    <path
+       style="opacity:1;fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.24999976;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
+       d="m 10,1034.3622 a 7.9999996,7.9999996 0 0 0 -8,8 7.9999996,7.9999996 0 0 0 8,8 7.9999996,7.9999996 0 0 0 8,-8 7.9999996,7.9999996 0 0 0 -8,-8 z m 0,2 a 6,6 0 0 1 6,6 6,6 0 0 1 -6,6 6,6 0 0 1 -6,-6 6,6 0 0 1 6,-6 z"
+       id="path4221"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#aaaaaa;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 10,1038.3622 0,4 2,0"
+       id="path4226"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
--- a/resources/images/editing
+++ b/resources/images/editing
@ -0,0 +1,220 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="20"
+   width="20"
+   version="1.1"
+   viewBox="0 0 20.015762 20.015762"
+   id="svg4136"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="editing icons.svg"
+   inkscape:export-filename="/media/shintaiden/home/rahah/mediawiki/skins/Timeless/resources/images/gear-large-grey.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <metadata
+     id="metadata4148">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs4146" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2492"
+     inkscape:window-height="2034"
+     id="namedview4144"
+     showgrid="false"
+     inkscape:zoom="8.4344705"
+     inkscape:cx="-10.159905"
+     inkscape:cy="12.402323"
+     inkscape:window-x="3225"
+     inkscape:window-y="43"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4136"
+     inkscape:snap-bbox="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-others="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     units="px">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4150"
+       originx="5.8568145e-15"
+       originy="5.0039421" />
+  </sodipodi:namedview>
+  <path
+     style="opacity:1;fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:65;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m -30.425002,2.0015761 c -0.633642,0 -1.143261,0.5096196 -1.143261,1.1432614 l 0,0.7436412 a 6.2906688,6.2906689 0 0 0 -1.893853,0.7836032 l -0.517769,-0.5177688 c -0.224026,-0.2240264 -0.515561,-0.3353336 -0.807928,-0.3353335 -0.292365,0 -0.585639,0.1113071 -0.809665,0.3353335 l -0.403095,0.4048326 c -0.448053,0.4480528 -0.448053,1.1695409 0,1.6175933 l 0.521244,0.5212439 a 6.2906688,6.2906689 0 0 0 -0.778391,1.8799525 l -0.743641,0 c -0.633642,0 -1.143262,0.5096197 -1.143262,1.1432615 l 0,0.5733681 c 0,0.633641 0.50962,1.143262 1.143262,1.143262 l 0.743641,0 a 6.2906688,6.2906689 0 0 0 0.783603,1.893852 l -0.526456,0.528194 c -0.448053,0.448054 -0.448053,1.169541 0,1.617594 l 0.403095,0.404832 c 0.448053,0.448053 1.169541,0.448053 1.617593,0 l 0.533407,-0.533407 a 6.2906688,6.2906689 0 0 0 1.878215,0.778391 l 0,0.743641 c 0,0.633642 0.509619,1.143262 1.143261,1.143262 l 0.573369,0 c 0.63364,0 1.143261,-0.50962 1.143261,-1.143262 l 0,-0.743641 a 6.2906688,6.2906689 0 0 0 1.879953,-0.776653 l 0.531669,0.531669 c 0.448051,0.448053 1.169539,0.448053 1.617594,0 l 0.404832,-0.404832 c 0.448052,-0.448053 0.448052,-1.16954 0,-1.617594 l -0.529931,-0.531669 a 6.2906688,6.2906689 0 0 0 0.78534,-1.890377 l 0.743641,0 c 0.633642,0 1.143262,-0.509621 1.143262,-1.143262 l 0,-0.5733681 c 0,-0.6336418 -0.50962,-1.1432615 -1.143262,-1.1432615 l -0.743641,0 a 6.2906688,6.2906689 0 0 0 -0.776653,-1.8799525 l 0.521244,-0.5212439 c 0.448052,-0.4480524 0.448052,-1.1695405 0,-1.6175933 l -0.404832,-0.4048326 c -0.448055,-0.4480525 -1.169543,-0.4480525 -1.617594,0 l -0.519507,0.5195063 a 6.2906688,6.2906689 0 0 0 -1.892115,-0.7853407 l 0,-0.7436412 c 0,-0.6336418 -0.509621,-1.1432614 -1.143261,-1.1432614 l -0.573369,0 z m 0.286685,4.4479472 a 3.5583576,3.5583576 0 0 1 3.558357,3.5583577 3.5583576,3.5583576 0 0 1 -3.558357,3.558358 3.5583576,3.5583576 0 0 1 -3.558359,-3.558358 3.5583576,3.5583576 0 0 1 3.558359,-3.5583577 z"
+     id="path4167"
+     inkscape:connector-curvature="0" />
+  <g
+     transform="translate(-57.029969,-52.737623)"
+     id="g4">
+    <path
+       inkscape:connector-curvature="0"
+       style="fill:none;stroke:#aaaaaa;stroke-width:2.54999995;stroke-linecap:round"
+       transform="matrix(0.781,0.0353,-0.0351,0.786,21.1,10)"
+       d="m 92.5,69.3 -5.04,-2.23 -4.81,2.69 0.568,-5.48 -4.04,-3.74 5.39,-1.15 2.31,-5 2.76,4.77 5.47,0.649 -3.68,4.1 z"
+       id="path6" />
+  </g>
+  <path
+     style="opacity:1;fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m -16,1.9999971 0,15.9999999 12.9999999,2e-6 0,-10.9902348 -5,-5.0097657 z m 2,2.0000001 4.9941405,1.3e-6 -1e-7,3.9999986 4.0058595,1.5e-6 0,8.0000004 L -14,15.999997 Z"
+     id="rect4145"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccc"
+     transform="scale(1.0007881,1.0007881)" />
+  <path
+     style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#aaaaaa;stroke-width:2.25177336;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m -50.277875,10.672578 0.03127,0 c 3.201609,2.6e-4 5.797307,-1.6415738 5.797535,-3.6670627 -2.24e-4,-2.025489 -2.595922,-3.6673232 -5.797531,-3.6670631 -3.201608,-2.601e-4 -5.797307,1.6415741 -5.797534,3.6670631"
+     id="path4178"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccc" />
+  <ellipse
+     style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#aaaaaa;stroke-width:2.25177336;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path4180"
+     cx="-55.250542"
+     cy="11.188148"
+     rx="5.0039406"
+     ry="3.4282465" />
+  <path
+     style="fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.06941545px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0"
+     d="m -57.752511,15.06559 c 0.587153,1.557758 -0.103711,2.539476 -1.000788,3.428247 3.464616,-0.732084 3.443815,-2.136085 4.003152,-3.428247 z"
+     id="path4190"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccc" />
+  <path
+     style="fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.06941545px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0"
+     d="m -46.743842,11.130316 c -0.587154,1.557759 0.10371,2.539478 1.000788,3.428248 -3.464617,-0.732084 -3.443816,-2.136085 -4.003153,-3.428248 z"
+     id="path4190-0"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccc" />
+  <path
+     style="fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 53.992682,1.9803263 45.085758,10.887251 50.039406,15.8409 58.94633,6.9339754 Z m 10e-7,2.8306553 2.12299,2.1229938 -6.076267,6.0762686 -2.122992,-2.122993 z"
+     id="path4214"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccccc" />
+  <path
+     style="fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00078809px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0"
+     d="m 48.624077,17.256228 -4.953649,1e-6 10e-7,-4.953649 z"
+     id="path4219"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccc" />
+  <path
+     style="opacity:1;fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.24999976;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
+     d="m -76.059897,1.000786 a 8.0063046,8.0063046 0 0 0 -8.006305,8.0063056 8.0063046,8.0063046 0 0 0 8.006305,8.0063044 8.0063046,8.0063046 0 0 0 8.006305,-8.0063044 8.0063046,8.0063046 0 0 0 -8.006305,-8.0063056 z m 0,2.0015762 a 6.0047287,6.0047287 0 0 1 6.004729,6.0047294 6.0047287,6.0047287 0 0 1 -6.004729,6.0047284 6.0047287,6.0047287 0 0 1 -6.004729,-6.0047284 6.0047287,6.0047287 0 0 1 6.004729,-6.0047294 z"
+     id="path4221"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#aaaaaa;stroke-width:2.00157619;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m -76.059897,5.0039377 0,4.0031519 2.001576,0"
+     id="path4226"
+     inkscape:connector-curvature="0" />
+  <path
+     style="opacity:1;fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.00157619;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 65 5 L 65 8.2714844 A 2.0003578 2.0003578 0 0 1 66 8 A 2.0003578 2.0003578 0 0 1 68 10 A 2.0003578 2.0003578 0 0 1 66 12 A 2.0003578 2.0003578 0 0 1 65 11.730469 L 65 15 L 75 15 L 75 5 L 65 5 z "
+     transform="scale(1.0007881,1.0007881)"
+     id="rect4251" />
+  <circle
+     r="2.0019343"
+     style="fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd"
+     cx="76.060616"
+     cy="10.007879"
+     id="circle54-1" />
+  <circle
+     r="2.0019343"
+     style="fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd"
+     cx="70.055527"
+     cy="4.0027928"
+     id="circle54-1-8" />
+  <circle
+     r="2.0019343"
+     style="fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd"
+     cx="70.055168"
+     cy="16.012608"
+     id="circle54-1-8-5" />
+  <rect
+     style="opacity:1;fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.50197029;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4326"
+     width="2.5520096"
+     height="12.009458"
+     x="84.516556"
+     y="4.0031514"
+     ry="0.96406806" />
+  <rect
+     style="opacity:1;fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.50197029;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4326-1"
+     width="2.5520096"
+     height="12.009458"
+     x="8.7318745"
+     y="-91.797287"
+     ry="0.96406806"
+     transform="matrix(0,1,-1,0,0,0)" />
+  <path
+     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:15.01182175px;line-height:125%;font-family:'Linux Biolinum';-inkscape-font-specification:'Linux Biolinum Bold';letter-spacing:1.00078809px;word-spacing:0px;fill:#aaaaaa;fill-opacity:1;stroke:#aaaaaa;stroke-width:0.19999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 5.1601562 2.2402344 C 3.7201563 5.5702344 2.2513281 8.7650781 0.73632812 12.080078 C 0.91632812 12.035078 1.4111719 12.035156 1.5761719 12.035156 C 1.7411719 12.035156 2.07 12.035078 2.25 12.080078 C 2.475 11.195078 2.9255469 10.01 3.4355469 8.75 C 4.0055469 8.735 4.8896875 8.71875 5.4296875 8.71875 C 5.9096875 8.71875 6.4210156 8.735 6.9160156 8.75 C 7.6210156 10.64 7.9510156 11.765078 8.0410156 12.080078 C 8.2960156 12.035078 9.0008594 12.035156 9.2558594 12.035156 C 9.5108594 12.035156 10.366094 12.035078 10.621094 12.080078 C 9.8710938 10.565078 7.7997656 5.5252344 6.5097656 2.2402344 L 5.1601562 2.2402344 z M 5.1894531 4.625 L 5.28125 4.625 C 5.80625 5.855 6.2396094 6.9651563 6.5996094 7.9101562 C 6.1796094 7.9251562 5.7004687 7.9238281 5.3554688 7.9238281 C 4.9204688 7.9238281 4.26125 7.9251562 3.78125 7.9101562 L 5.1894531 4.625 z "
+     transform="scale(1.0007881,1.0007881)"
+     id="text4369" />
+  <path
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16.26280785px;line-height:125%;font-family:KaiTi;-inkscape-font-specification:KaiTi;letter-spacing:1.00078809px;word-spacing:0px;fill:#aaaaaa;fill-opacity:1;stroke:#aaaaaa;stroke-width:0.19999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 11.738281 5.2675781 C 11.674805 5.2781576 11.632487 5.3134766 11.611328 5.3769531 C 11.526693 5.4615885 11.526693 5.6529948 11.611328 5.9492188 C 11.738281 6.203125 11.738281 6.9003906 11.611328 8.0429688 C 11.061198 8.1276042 10.573568 8.1920573 10.150391 8.234375 L 9.0722656 8.234375 C 8.6914062 8.1920573 8.5221354 8.234375 8.5644531 8.3613281 C 8.6490885 8.4882813 8.8808594 8.593099 9.2617188 8.6777344 C 9.6425781 8.7623698 9.9811198 8.8046875 10.277344 8.8046875 C 10.615885 8.8046875 11.039062 8.7845052 11.546875 8.7421875 C 11.504557 9.6308594 11.46224 10.455078 11.419922 11.216797 C 9.7695312 12.401693 8.7539063 13.439453 8.3730469 14.328125 C 8.0345052 15.216797 7.9921875 15.914062 8.2460938 16.421875 C 8.5 16.88737 8.7760416 17.141276 9.0722656 17.183594 C 9.4108073 17.225911 9.7272135 17.205729 10.023438 17.121094 C 10.319661 16.994141 10.615885 16.82487 10.912109 16.613281 C 11.250651 16.359375 11.589193 16.063151 11.927734 15.724609 C 12.266276 16.528646 12.5625 16.929688 12.816406 16.929688 C 13.070313 16.88737 13.239583 16.802734 13.324219 16.675781 C 13.408854 16.50651 13.346354 16.317057 13.134766 16.105469 C 12.965495 15.89388 12.774089 15.555339 12.5625 15.089844 C 13.070313 14.370443 13.49349 13.693359 13.832031 13.058594 C 14.170573 12.423828 14.466797 11.662109 14.720703 10.773438 C 15.778646 10.73112 16.5625 10.920573 17.070312 11.34375 C 17.620443 11.766927 17.936849 12.339193 18.021484 13.058594 C 18.10612 13.735677 17.979167 14.41276 17.640625 15.089844 C 17.302083 15.724609 16.794271 16.294922 16.117188 16.802734 C 15.397786 17.268229 14.678385 17.606771 13.958984 17.818359 C 13.281901 18.072266 12.965495 18.241536 13.007812 18.326172 C 13.007812 18.36849 13.366536 18.30599 14.085938 18.136719 C 14.847656 18.009766 15.609375 17.733724 16.371094 17.310547 C 17.132813 16.845052 17.705078 16.317057 18.085938 15.724609 C 18.509115 15.089844 18.763021 14.47526 18.847656 13.882812 C 18.932292 13.248047 18.889974 12.697917 18.720703 12.232422 C 18.551432 11.724609 18.255208 11.323568 17.832031 11.027344 C 17.408854 10.688802 16.943359 10.477214 16.435547 10.392578 C 15.970052 10.265625 15.419922 10.201172 14.785156 10.201172 C 14.869792 9.8203125 14.742839 9.5664063 14.404297 9.4394531 C 14.065755 9.3125 13.896484 9.3548177 13.896484 9.5664062 C 13.938802 9.7356771 13.958984 9.969401 13.958984 10.265625 C 13.366536 10.392578 12.753906 10.604167 12.119141 10.900391 C 12.161458 10.18099 12.223958 9.4192709 12.308594 8.6152344 C 14.636068 7.9804687 15.885417 7.577474 16.054688 7.4082031 C 16.223958 7.2389323 16.159505 7.0917969 15.863281 6.9648438 C 15.567057 6.8378906 15.166016 6.9003906 14.658203 7.1542969 C 14.150391 7.3658854 13.388672 7.5996094 12.373047 7.8535156 C 12.457682 7.0494791 12.584635 6.5416667 12.753906 6.3300781 C 12.965495 6.0761719 12.965495 5.8645833 12.753906 5.6953125 C 12.5 5.4837239 12.246094 5.3567708 11.992188 5.3144531 C 11.886393 5.2721354 11.801758 5.2569987 11.738281 5.2675781 z M 13.896484 10.900391 C 13.515625 12.169922 12.965495 13.290365 12.246094 14.263672 C 12.161458 13.544271 12.119141 12.677734 12.119141 11.662109 C 12.711589 11.28125 13.304036 11.027344 13.896484 10.900391 z M 11.484375 12.042969 C 11.484375 13.439453 11.546875 14.41276 11.673828 14.962891 C 10.996745 15.724609 10.488932 16.190104 10.150391 16.359375 C 9.7695312 16.486328 9.4309896 16.486328 9.1347656 16.359375 C 8.8808594 16.232422 8.796224 15.89388 8.8808594 15.34375 C 8.9231771 14.79362 9.1992187 14.221354 9.7070312 13.628906 C 10.214844 13.036458 10.807292 12.508464 11.484375 12.042969 z "
+     transform="scale(1.0007881,1.0007881)"
+     id="text4375" />
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:15.01182175px;line-height:125%;font-family:'Linux Biolinum';-inkscape-font-specification:'Linux Biolinum Bold';letter-spacing:1.00078809px;word-spacing:0px;fill:#aaaaaa;fill-opacity:1;stroke:none;stroke-width:0.20015761;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;"
+     x="1.9470317"
+     y="-33.133198"
+     id="text4369-7"
+     sodipodi:linespacing="125%"><tspan
+       style="stroke-width:0.20015761;stroke:none;"
+       sodipodi:role="line"
+       id="tspan4371-6"
+       x="1.9470317"
+       y="-33.133198" /><tspan
+       style="stroke-width:0.20015761;stroke:none;"
+       sodipodi:role="line"
+       x="1.9470317"
+       y="-14.368419"
+       id="tspan4373-1">A</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16.26280785px;line-height:125%;font-family:KaiTi;-inkscape-font-specification:KaiTi;letter-spacing:1.00078809px;word-spacing:0px;fill:#aaaaaa;fill-opacity:1;stroke:none;stroke-width:0.20015761;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;"
+     x="6.9057579"
+     y="-8.7059155"
+     id="text4375-9"
+     sodipodi:linespacing="125%"><tspan
+       style="stroke-width:0.20015761;stroke:none;"
+       sodipodi:role="line"
+       id="tspan4377-5"
+       x="6.9057579"
+       y="-8.7059155">あ</tspan></text>
+</svg>
--- a/resources/images/gear-grey.png
+++ b/resources/images/gear-grey.png
--- a/resources/images/gear-grey.svg
+++ b/resources/images/gear-grey.svg
@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg4427"
+   viewBox="0 0 20 20"
+   height="20"
+   width="20">
+  <defs
+     id="defs4429" />
+  <metadata
+     id="metadata4432">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(0,-1032.3622)"
+     id="layer1">
+    <path
+       id="path4167"
+       d="m 9.713542,1034.3622 c -0.633143,0 -1.142361,0.5092 -1.142361,1.1424 l 0,0.743 a 6.2857149,6.285715 0 0 0 -1.8923615,0.783 l -0.5173612,-0.5174 c -0.2238496,-0.2238 -0.515155,-0.335 -0.8072918,-0.335 -0.2921348,0 -0.5851778,0.1112 -0.8090274,0.335 l -0.4027775,0.4046 c -0.4477002,0.4477 -0.4477002,1.1686 0,1.6163 l 0.5208335,0.5208 a 6.2857149,6.285715 0 0 0 -0.777778,1.8785 l -0.7430554,0 C 2.5092187,1040.9334 2,1041.4426 2,1042.0757 l 0,0.573 c 0,0.6331 0.5092187,1.1423 1.1423617,1.1423 l 0.7430554,0 a 6.2857149,6.285715 0 0 0 0.7829859,1.8924 l -0.5260414,0.5278 c -0.4477002,0.4477 -0.4477002,1.1686 0,1.6163 l 0.4027775,0.4045 c 0.4477002,0.4477 1.16862,0.4477 1.6163192,0 l 0.5329869,-0.533 a 6.2857149,6.285715 0 0 0 1.8767358,0.7778 l 0,0.743 c 0,0.6332 0.509218,1.1424 1.142361,1.1424 l 0.572917,0 c 0.633141,0 1.142361,-0.5092 1.142361,-1.1424 l 0,-0.743 a 6.2857149,6.285715 0 0 0 1.878472,-0.7761 l 0.531251,0.5313 c 0.447698,0.4477 1.168618,0.4477 1.61632,0 l 0.404513,-0.4045 c 0.447699,-0.4477 0.447699,-1.1686 0,-1.6163 l -0.529514,-0.5313 a 6.2857149,6.285715 0 0 0 0.784722,-1.8889 l 0.743055,0 c 0.633143,0 1.142362,-0.5092 1.142362,-1.1423 l 0,-0.573 c 0,-0.6331 -0.509219,-1.1423 -1.142362,-1.1423 l -0.743055,0 a 6.2857149,6.285715 0 0 0 -0.776041,-1.8785 l 0.520833,-0.5208 c 0.447699,-0.4477 0.447699,-1.1686 0,-1.6163 l -0.404513,-0.4046 c -0.447702,-0.4477 -1.168622,-0.4477 -1.61632,0 l -0.519098,0.5191 a 6.2857149,6.285715 0 0 0 -1.890625,-0.7847 l 0,-0.743 c 0,-0.6332 -0.50922,-1.1424 -1.142361,-1.1424 l -0.572917,0 z m 0.286459,4.4444 a 3.5555554,3.5555554 0 0 1 3.555555,3.5556 3.5555554,3.5555554 0 0 1 -3.555555,3.5556 3.5555554,3.5555554 0 0 1 -3.5555568,-3.5556 3.5555554,3.5555554 0 0 1 3.5555568,-3.5556 z"
+       style="opacity:1;fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:65;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+</svg>
--- a/resources/images/gear-large-grey.png
+++ b/resources/images/gear-large-grey.png
--- a/resources/images/gear-large-grey.svg
+++ b/resources/images/gear-large-grey.svg
@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="7.0555558mm"
+   width="7.0555558mm"
+   version="1.1"
+   viewBox="0 0 25.019703 25.019703"
+   id="svg4136"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="gear-large-grey.svg"
+   inkscape:export-filename="/media/shintaiden/home/rahah/mediawiki/skins/Timeless/resources/images/gear-large-grey.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <metadata
+     id="metadata4148">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs4146" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="3840"
+     inkscape:window-height="2124"
+     id="namedview4144"
+     showgrid="true"
+     inkscape:zoom="47.71257"
+     inkscape:cx="18.246442"
+     inkscape:cy="12.30121"
+     inkscape:window-x="2880"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4136"
+     inkscape:snap-bbox="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-others="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4150"
+       originx="5.8568145e-15"
+       originy="5.0039421" />
+  </sodipodi:namedview>
+  <path
+     style="opacity:1;fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:65;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 12.098814,1.0007875 c -0.910861,0 -1.644154,0.7332918 -1.644154,1.6441519 l 0,1.0693409 A 9.0428357,9.0428364 0 0 0 7.7315345,4.839818 L 6.9881338,4.0964173 C 6.6660962,3.7743795 6.2459439,3.6131265 5.8256675,3.6131265 c -0.4202757,0 -0.8404296,0.161253 -1.1624671,0.4832908 L 4.0819672,4.6776506 c -0.644076,0.6440757 -0.644076,1.6808583 0,2.3249336 L 4.83179,7.7524075 A 9.0428357,9.0428364 0 0 0 3.7126751,10.454661 l -1.0677352,0 c -0.9108601,0 -1.6441519,0.733291 -1.6441519,1.644151 l 0,0.822077 c 0,0.910859 0.7332918,1.644151 1.6441519,1.644151 l 1.0693407,0 a 9.0428357,9.0428364 0 0 0 1.1255378,2.723127 l -0.7578512,0.75785 c -0.644076,0.644077 -0.644076,1.682466 0,2.326541 l 0.5812332,0.581233 c 0.6440758,0.644076 1.6808583,0.644076 2.3249334,0 l 0.7658796,-0.765879 a 9.0428357,9.0428364 0 0 0 2.7006466,1.119114 l 0,1.067735 c 0,0.91086 0.733293,1.644152 1.644154,1.644152 l 0.822076,0 c 0.910859,0 1.644151,-0.733292 1.644151,-1.644152 l 0,-1.06934 A 9.0428357,9.0428364 0 0 0 17.2689,20.191122 l 0.762668,0.762669 c 0.644074,0.644076 1.682463,0.644076 2.32654,0 l 0.581232,-0.581233 c 0.644076,-0.644075 0.644076,-1.682464 0,-2.326541 L 20.176672,17.28335 a 9.0428357,9.0428364 0 0 0 1.130354,-2.71831 l 1.067736,0 c 0.91086,0 1.644151,-0.733292 1.644151,-1.644151 l 0,-0.822077 c 0,-0.91086 -0.733291,-1.644151 -1.644151,-1.644151 l -1.06934,0 a 9.0428357,9.0428364 0 0 0 -1.1143,-2.7038592 L 20.93934,7.0025842 c 0.644076,-0.6440753 0.644076,-1.6808579 0,-2.3249336 L 20.358108,4.0964173 c -0.644077,-0.6440754 -1.682466,-0.6440754 -2.32654,0 L 17.284956,4.8430292 A 9.0428357,9.0428364 0 0 0 14.565041,3.7126748 l 0,-1.0677354 c 0,-0.9108601 -0.733292,-1.6441519 -1.644151,-1.6441519 l -0.822076,0 z m 0.529852,6.5766077 A 4.8138161,4.9324554 0 0 1 17.442307,12.50985 4.8138161,4.9324554 0 0 1 12.628666,17.442305 4.8138161,4.9324554 0 0 1 7.8150262,12.50985 4.8138161,4.9324554 0 0 1 12.628666,7.5773952 Z"
+     id="path4167"
+     inkscape:connector-curvature="0" />
+</svg>
--- a/resources/images/languages-grey.png
+++ b/resources/images/languages-grey.png
--- a/resources/images/languages-grey.svg
+++ b/resources/images/languages-grey.svg
@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg4427"
+   viewBox="0 0 20 20"
+   height="20"
+   width="20">
+  <defs
+     id="defs4429" />
+  <metadata
+     id="metadata4432">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(0,-1032.3622)"
+     id="layer1">
+    <path
+       id="text4369"
+       d="m 5.3507258,1034.3219 c -1.4399999,3.33 -2.9088281,6.5248 -4.42382813,9.8398 0.18000003,-0.045 0.67484383,-0.045 0.83984383,-0.045 0.165,0 0.4938281,-10e-5 0.6738281,0.045 0.225,-0.885 0.6755469,-2.07 1.1855469,-3.33 0.57,-0.015 1.4541406,-0.031 1.9941406,-0.031 0.48,0 0.9913281,0.016 1.4863281,0.031 0.705,1.89 1.035,3.015 1.125,3.33 0.255,-0.045 0.9598434,-0.045 1.2148434,-0.045 0.255,0 1.1102354,-10e-5 1.3652354,0.045 -0.75,-1.515 -2.8213288,-6.5548 -4.1113288,-9.8398 l -1.3496094,0 z m 0.029297,2.3848 0.091797,0 c 0.525,1.23 0.9583594,2.3401 1.3183594,3.2851 -0.42,0.015 -0.8991407,0.014 -1.2441406,0.014 -0.435,0 -1.0942188,0 -1.5742188,-0.014 l 1.408203,-3.2851 z"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:15.01182175px;line-height:125%;font-family:'Linux Biolinum';-inkscape-font-specification:'Linux Biolinum Bold';letter-spacing:1.00078809px;word-spacing:0px;fill:#aaaaaa;fill-opacity:1;stroke:#aaaaaa;stroke-width:0.19999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       id="text4375"
+       d="m 11.928851,1037.3492 c -0.06348,0.011 -0.105794,0.046 -0.126953,0.1094 -0.08464,0.085 -0.08464,0.2761 0,0.5723 0.126953,0.2539 0.126953,0.9512 0,2.0937 -0.55013,0.085 -1.03776,0.1491 -1.460937,0.1914 l -1.0781254,0 c -0.3808598,-0.042 -0.5501306,0 -0.5078129,0.127 0.084635,0.1269 0.3164063,0.2318 0.6972659,0.3164 0.380859,0.085 0.7194014,0.127 1.0156254,0.127 0.338541,0 0.761718,-0.02 1.269531,-0.062 -0.04232,0.8886 -0.08464,1.7128 -0.126953,2.4746 -1.6503914,1.1849 -2.6660161,2.2226 -3.0468755,3.1113 -0.3385417,0.8887 -0.3808594,1.5859 -0.1269531,2.0937 0.2539062,0.4655 0.5299478,0.7194 0.8261722,0.7618 0.338541,0.042 0.654947,0.022 0.9511724,-0.062 0.296223,-0.127 0.592447,-0.2963 0.888671,-0.5079 0.338542,-0.2539 0.677084,-0.5501 1.015625,-0.8886 0.338542,0.804 0.634766,1.2051 0.888672,1.2051 0.253907,-0.042 0.423177,-0.127 0.507813,-0.254 0.08464,-0.1692 0.02214,-0.3587 -0.189453,-0.5703 -0.169271,-0.2116 -0.360677,-0.5501 -0.572266,-1.0156 0.507813,-0.7194 0.93099,-1.3965 1.269531,-2.0312 0.338542,-0.6348 0.634766,-1.3965 0.888672,-2.2852 1.057943,-0.042 1.841797,0.1471 2.349609,0.5703 0.550131,0.4232 0.866537,0.9955 0.951172,1.7149 0.08464,0.677 -0.04232,1.3541 -0.380859,2.0312 -0.338542,0.6348 -0.846354,1.2051 -1.523437,1.7129 -0.719402,0.4655 -1.438803,0.804 -2.158204,1.0156 -0.677083,0.2539 -0.993489,0.4232 -0.951172,0.5078 0,0.042 0.358724,-0.02 1.078126,-0.1894 0.761718,-0.127 1.523437,-0.403 2.285156,-0.8262 0.761719,-0.4655 1.333984,-0.9935 1.714844,-1.5859 0.423177,-0.6348 0.677083,-1.2494 0.761718,-1.8418 0.08464,-0.6348 0.04232,-1.1849 -0.126953,-1.6504 -0.169271,-0.5078 -0.465495,-0.9089 -0.888672,-1.2051 -0.423177,-0.3385 -0.888672,-0.5501 -1.396484,-0.6348 -0.465495,-0.1269 -1.015625,-0.1914 -1.650391,-0.1914 0.08464,-0.3808 -0.04232,-0.6347 -0.380859,-0.7617 -0.338542,-0.1269 -0.507813,-0.085 -0.507813,0.127 0.04232,0.1692 0.0625,0.403 0.0625,0.6992 -0.592448,0.1269 -1.205078,0.3385 -1.839843,0.6348 0.04232,-0.7194 0.104817,-1.4812 0.189453,-2.2852 2.327474,-0.6348 3.576823,-1.0378 3.746094,-1.207 0.16927,-0.1693 0.104817,-0.3164 -0.191407,-0.4434 -0.296224,-0.1269 -0.697265,-0.064 -1.205078,0.1895 -0.507812,0.2116 -1.269531,0.4453 -2.285156,0.6992 0.08464,-0.8041 0.211588,-1.3119 0.380859,-1.5235 0.211589,-0.2539 0.211589,-0.4655 0,-0.6347 -0.253906,-0.2116 -0.507812,-0.3386 -0.761718,-0.3809 -0.105795,-0.042 -0.19043,-0.057 -0.253907,-0.047 z m 2.158203,5.6329 c -0.380859,1.2695 -0.930989,2.3899 -1.65039,3.3632 -0.08464,-0.7194 -0.126953,-1.5859 -0.126953,-2.6015 0.592448,-0.3809 1.184895,-0.6348 1.777343,-0.7617 z m -2.412109,1.1425 c 0,1.3965 0.0625,2.3698 0.189453,2.92 -0.677083,0.7617 -1.184896,1.2272 -1.523437,1.3964 -0.3808604,0.127 -0.7194014,0.127 -1.0156254,0 -0.2539066,-0.1269 -0.338542,-0.4655 -0.2539066,-1.0156 0.042318,-0.5501 0.3183596,-1.1224 0.8261716,-1.7148 0.5078134,-0.5925 1.1002614,-1.1205 1.7773444,-1.586 z"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16.26280785px;line-height:125%;font-family:KaiTi;-inkscape-font-specification:KaiTi;letter-spacing:1.00078809px;word-spacing:0px;fill:#aaaaaa;fill-opacity:1;stroke:#aaaaaa;stroke-width:0.19999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+</svg>
--- a/resources/images/menu-large-grey.png
+++ b/resources/images/menu-large-grey.png
--- a/resources/images/menu-large-grey.svg
+++ b/resources/images/menu-large-grey.svg
@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="7.0555558mm"
+   width="7.0555558mm"
+   version="1.1"
+   viewBox="0 0 25.019703 25.019703"
+   id="svg4136"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="menu-large-grey.svg"
+   inkscape:export-filename="/media/shintaiden/home/rahah/mediawiki/skins/Timeless/resources/images/menu-large-grey.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <metadata
+     id="metadata4148">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs4146" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="3840"
+     inkscape:window-height="2124"
+     id="namedview4144"
+     showgrid="true"
+     inkscape:zoom="47.71257"
+     inkscape:cx="15.632432"
+     inkscape:cy="14.023582"
+     inkscape:window-x="2880"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4136"
+     inkscape:snap-bbox="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-others="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4150"
+       originx="5.8568145e-15"
+       originy="5.0039422" />
+  </sodipodi:namedview>
+  <rect
+     style="opacity:1;fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:65;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4224"
+     width="23.018127"
+     height="5.0039406"
+     x="1.0007881"
+     y="19.014973"
+     ry="1.6480488" />
+  <rect
+     style="opacity:1;fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:65;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4224-1"
+     width="23.018127"
+     height="5.0039401"
+     x="1.0007881"
+     y="10.007879"
+     ry="1.6480488" />
+  <rect
+     style="opacity:1;fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:65;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4224-9"
+     width="23.018127"
+     height="5.0039411"
+     x="1.0007881"
+     y="1.0007865"
+     ry="1.6480488" />
+</svg>
--- a/resources/images/page-grey.png
+++ b/resources/images/page-grey.png
--- a/resources/images/page-grey.svg
+++ b/resources/images/page-grey.svg
@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg4427"
+   viewBox="0 0 20 20"
+   height="20"
+   width="20">
+  <defs
+     id="defs4429" />
+  <metadata
+     id="metadata4432">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(0,-1032.3622)"
+     id="layer1">
+    <path
+       id="rect4145"
+       d="m 3,1034.3622 0,16 13,0 0,-10.9902 -5,-5.0098 z m 2,2 4.99414,0 0,4 4.00586,0 0,8 -9,0 z"
+       style="opacity:1;fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+</svg>
--- a/resources/images/pencil-grey.png
+++ b/resources/images/pencil-grey.png
--- a/resources/images/pencil-grey.svg
+++ b/resources/images/pencil-grey.svg
@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg4427"
+   viewBox="0 0 20 20"
+   height="20"
+   width="20">
+  <defs
+     id="defs4429" />
+  <metadata
+     id="metadata4432">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(0,-1032.3622)"
+     id="layer1">
+    <path
+       id="path4214"
+       d="m 12.314125,1035.0982 -8.8999096,8.8999 4.9497475,4.9498 8.8999091,-8.9 z m 10e-7,2.8284 2.121318,2.1214 -6.0714811,6.0715 -2.1213206,-2.1213 z"
+       style="fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       id="path4219"
+       d="m 6.949748,1050.3622 -4.949748,0 1e-6,-4.9499 z"
+       style="fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0" />
+  </g>
+</svg>
--- a/resources/images/plus-grey.png
+++ b/resources/images/plus-grey.png
--- a/resources/images/plus-grey.svg
+++ b/resources/images/plus-grey.svg
@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg4427"
+   viewBox="0 0 20 20"
+   height="20"
+   width="20">
+  <defs
+     id="defs4429" />
+  <metadata
+     id="metadata4432">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(0,-1032.3622)"
+     id="layer1">
+    <rect
+       ry="0.96330887"
+       y="1036.3622"
+       x="8.7250023"
+       height="12"
+       width="2.55"
+       id="rect4326"
+       style="opacity:1;fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.50197029;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       transform="matrix(0,1,-1,0,0,0)"
+       ry="0.96330887"
+       y="-16"
+       x="1041.0872"
+       height="12"
+       width="2.55"
+       id="rect4326-1"
+       style="opacity:1;fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.50197029;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+</svg>
--- a/resources/images/puzzle-grey.png
+++ b/resources/images/puzzle-grey.png
--- a/resources/images/puzzle-grey.svg
+++ b/resources/images/puzzle-grey.svg
@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg4427"
+   viewBox="0 0 20 20"
+   height="20"
+   width="20">
+  <defs
+     id="defs4429" />
+  <metadata
+     id="metadata4432">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(0,-1032.3622)"
+     id="layer1">
+    <path
+       id="rect4251"
+       d="m 4,1037.3622 0,3.2715 a 2.0003578,2.0003578 0 0 1 1,-0.2715 2.0003578,2.0003578 0 0 1 2,2 2.0003578,2.0003578 0 0 1 -2,2 2.0003578,2.0003578 0 0 1 -1,-0.2695 l 0,3.2695 10,0 0,-10 -10,0 z"
+       style="opacity:1;fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.00157619;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <circle
+       id="circle54-1"
+       cy="1042.3622"
+       cx="15.000719"
+       style="fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd"
+       r="2.0003579" />
+    <circle
+       id="circle54-1-8"
+       cy="1036.3618"
+       cx="9.0003586"
+       style="fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd"
+       r="2.0003579" />
+    <circle
+       id="circle54-1-8-5"
+       cy="1048.3622"
+       cx="9"
+       style="fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd"
+       r="2.0003579" />
+  </g>
+</svg>
--- a/resources/images/star-filled.png
+++ b/resources/images/star-filled.png
--- a/resources/images/star.png
+++ b/resources/images/star.png
--- a/resources/images/star.svg
+++ b/resources/images/star.svg
@ -1,6 +1,60 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="5.64mm" width="5.64mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 20 20">
-<g transform="translate(-77 -51.8)">
-<path style="stroke:#aaa;stroke-linecap:round;stroke-width:2.55;fill:none" transform="matrix(.781 .0353 -.0351 .786 21.1 10)" d="m92.5 69.3-5.04-2.23-4.81 2.69 0.568-5.48-4.04-3.74 5.39-1.15 2.31-5 2.76 4.77 5.47 0.649-3.68 4.1z"/>
-</g>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="5.64mm"
+   width="5.64mm"
+   version="1.1"
+   viewBox="0 0 20 20"
+   id="svg2"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="star.svg">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1769"
+     inkscape:window-height="1362"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="11.809299"
+     inkscape:cx="9.9921257"
+     inkscape:cy="9.9921257"
+     inkscape:window-x="3122"
+     inkscape:window-y="646"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <g
+     transform="translate(-77,-52.514565)"
+     id="g4">
+    <path
+       style="fill:none;stroke:#aaaaaa;stroke-width:2.54999995;stroke-linecap:round"
+       transform="matrix(0.781,0.0353,-0.0351,0.786,21.1,10)"
+       d="m 92.5,69.3 -5.04,-2.23 -4.81,2.69 0.568,-5.48 -4.04,-3.74 5.39,-1.15 2.31,-5 2.76,4.77 5.47,0.649 -3.68,4.1 z"
+       id="path6"
+       inkscape:connector-curvature="0" />
+  </g>
 </svg>
--- a/resources/images/talk-grey.png
+++ b/resources/images/talk-grey.png
--- a/resources/images/talk-grey.svg
+++ b/resources/images/talk-grey.svg
@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg4427"
+   viewBox="0 0 20 20"
+   height="20"
+   width="20"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="talk-grey.svg">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2150"
+     inkscape:window-height="1562"
+     id="namedview5287"
+     showgrid="false"
+     inkscape:zoom="11.8"
+     inkscape:cx="-11.610169"
+     inkscape:cy="10"
+     inkscape:window-x="3055"
+     inkscape:window-y="508"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4427" />
+  <defs
+     id="defs4429" />
+  <metadata
+     id="metadata4432">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(0,-1031.3622)"
+     id="layer1">
+    <path
+       id="path4178"
+       d="m 12.09375,1042.5471 0.03125,0 c 3.199083,2e-4 5.792737,-1.6403 5.792965,-3.6642 -2.24e-4,-2.0239 -2.593878,-3.6645 -5.792966,-3.6642 -3.199087,-3e-4 -5.792741,1.6403 -5.792968,3.6642"
+       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#aaaaaa;stroke-width:2.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       inkscape:connector-curvature="0" />
+    <ellipse
+       ry="3.4255466"
+       rx="5"
+       cy="1043.0621"
+       cx="7.125"
+       id="path4180"
+       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#aaaaaa;stroke-width:2.25;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       id="path4190"
+       d="m 4.625,1046.9366 c 0.586691,1.5565 -0.103629,2.5375 -1,3.4256 3.461888,-0.7316 3.441103,-2.1345 4,-3.4256 z"
+       style="fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.06857324px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0"
+       inkscape:connector-curvature="0" />
+    <path
+       id="path4190-0"
+       d="m 15.625,1043.0044 c -0.586692,1.5566 0.103628,2.5375 1,3.4256 -3.461889,-0.7315 -3.441104,-2.1344 -4.000001,-3.4256 z"
+       style="fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.06857324px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
--- a/resources/images/user-large-grey.png
+++ b/resources/images/user-large-grey.png
--- a/resources/images/user-large-grey.svg
+++ b/resources/images/user-large-grey.svg
@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="7.0555558mm"
+   width="7.0555558mm"
+   version="1.1"
+   viewBox="0 0 25.019703 25.019703"
+   id="svg4136"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="user-large-grey.svg"
+   inkscape:export-filename="/media/shintaiden/home/rahah/mediawiki/skins/Timeless/resources/images/user-large-grey.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <metadata
+     id="metadata4148">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs4146" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="3840"
+     inkscape:window-height="2124"
+     id="namedview4144"
+     showgrid="true"
+     inkscape:zoom="47.71257"
+     inkscape:cx="16.028652"
+     inkscape:cy="12.392574"
+     inkscape:window-x="2880"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4136"
+     inkscape:snap-bbox="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-others="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4150"
+       originx="5.8568145e-15"
+       originy="5.0039421" />
+  </sodipodi:namedview>
+  <path
+     style="fill:#aaaaaa;fill-opacity:1"
+     d="m 4.2392271,10.959893 c -2.4207341,3.271189 -2.6944436,6.84318 -1.6898315,9.21089 0.6731632,1.615477 1.6241932,2.561304 2.739249,3.136306 1.0902769,0.585953 2.4086624,0.709086 3.5787827,0.711824 l 8.7128577,0 c 1.26786,0 2.547452,-0.283886 3.648743,-0.923231 1.101289,-0.639344 2.010191,-1.641367 2.478239,-3.133628 0.674541,-2.122024 0.365242,-5.517489 -2.036946,-8.844274 -0.01044,0.01593 -0.02908,0.02492 -0.04036,0.04013 a 10.332728,10.275949 0 0 1 -8.629445,4.640239 10.332728,10.275949 0 0 1 -8.7612913,-4.83826 z"
+     id="path4140"
+     inkscape:connector-curvature="0" />
+  <path
+     sodipodi:nodetypes="sssss"
+     inkscape:connector-curvature="0"
+     id="path4142"
+     d="m 13.010245,1.0007896 c -3.0399595,0 -5.5043347,2.3923634 -5.5043347,5.3434923 0,2.9511292 2.4643752,5.3434911 5.5043347,5.3434911 3.039955,0 5.504332,-2.3923619 5.504332,-5.3434911 0,-2.9511289 -2.464377,-5.3434923 -5.504332,-5.3434923 z"
+     style="fill:#aaaaaa;fill-opacity:1;fill-rule:evenodd" />
+</svg>
--- a/resources/images/user.png
+++ b/resources/images/user.png
--- a/resources/images/user.svg
+++ b/resources/images/user.svg
@ -1,87 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="5.64mm"
-   width="5.64mm"
-   version="1.1"
-   viewBox="0 0 20 20"
-   id="svg4136"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="user.svg"
-   inkscape:export-filename="/media/shintaiden/home/rahah/mediawiki/skins/Timeless/resources/images/user.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90">
-  <metadata
-     id="metadata4148">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs4146" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="3840"
-     inkscape:window-height="2124"
-     id="namedview4144"
-     showgrid="true"
-     inkscape:zoom="67.475764"
-     inkscape:cx="7.1743599"
-     inkscape:cy="10.812713"
-     inkscape:window-x="2880"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg4136"
-     inkscape:snap-bbox="true"
-     inkscape:object-paths="true"
-     inkscape:snap-intersection-paths="true"
-     inkscape:object-nodes="true"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:snap-midpoints="true"
-     inkscape:snap-others="false">
-    <inkscape:grid
-       type="xygrid"
-       id="grid4150" />
-  </sodipodi:namedview>
-  <path
-     inkscape:connector-curvature="0"
-     style="fill:#555555;fill-opacity:1"
-     d="m 3.6434932,8.4526943 c -1.7584726,2.3893907 -1.9573009,4.9984967 -1.227529,6.7279547 0.488999,1.18 1.179848,1.870866 1.989848,2.290867 0.792,0.428 1.749703,0.517941 2.599703,0.519941 l 6.3292038,0 c 0.921,0 1.850524,-0.20736 2.650524,-0.674359 0.8,-0.467 1.460246,-1.198913 1.800246,-2.288912 0.490001,-1.55 0.26532,-4.030165 -1.47968,-6.4601667 -0.0076,0.01164 -0.02113,0.0182 -0.02932,0.02932 A 7.5059113,7.5059113 0 0 1 10.00788,11.986728 7.5059113,7.5059113 0 0 1 3.6434932,8.4526943 Z"
-     id="path4140-5" />
-  <path
-     sodipodi:nodetypes="sssss"
-     inkscape:connector-curvature="0"
-     id="path4142-2"
-     d="m 10.007881,-0.01576092 c -2.4852818,0 -4.5000018,2.01471912 -4.5000018,4.50000012 0,2.485281 2.01472,4.5000001 4.5000018,4.5000001 2.48528,0 4.5,-2.0147191 4.5,-4.5000001 0,-2.485281 -2.01472,-4.50000012 -4.5,-4.50000012 z"
-     style="fill:#555555;fill-opacity:1;fill-rule:evenodd" />
-  <path
-     style="fill:#ffffff"
-     d="M 3.640625 9.453125 C 1.8835375 11.840633 1.6848657 14.447685 2.4140625 16.175781 C 2.9026774 17.354852 3.5929816 18.045174 4.4023438 18.464844 C 5.1937201 18.892507 6.1506693 18.982377 7 18.984375 L 13.324219 18.984375 C 14.244494 18.984375 15.173286 18.777179 15.972656 18.310547 C 16.772026 17.843915 17.431752 17.112579 17.771484 16.023438 C 18.261099 14.474658 18.036595 11.996446 16.292969 9.5683594 C 16.285395 9.5799893 16.271857 9.5865465 16.263672 9.5976562 A 7.5000009 7.5000009 0 0 1 10 12.984375 A 7.5000009 7.5000009 0 0 1 3.640625 9.453125 z "
-     transform="scale(1.0007881,1.0007881)"
-     id="path4140" />
-  <path
-     sodipodi:nodetypes="sssss"
-     inkscape:connector-curvature="0"
-     id="path4142"
-     d="m 10.007881,0.99211966 c -2.4852804,0 -4.5000004,2.01471904 -4.5000004,4.50000004 0,2.485281 2.01472,4.5 4.5000004,4.5 2.48528,0 4.5,-2.014719 4.5,-4.5 0,-2.485281 -2.01472,-4.50000004 -4.5,-4.50000004 z"
-     style="fill:#ffffff;fill-rule:evenodd" />
-</svg>
--- a/resources/libraries/jquery.mobile.custom.js
+++ b/resources/libraries/jquery.mobile.custom.js
@ -0,0 +1,864 @@
+/*
+* jQuery Mobile v1.4.5
+* http://jquerymobile.com
+*
+* Copyright 2010, 2014 jQuery Foundation, Inc. and other contributors
+* Released under the MIT license.
+* http://jquery.org/license
+*
+*/
+
+(function ( root, doc, factory ) {
+	if ( typeof define === "function" && define.amd ) {
+		// AMD. Register as an anonymous module.
+		define( [ "jquery" ], function ( $ ) {
+			factory( $, root, doc );
+			return $.mobile;
+		});
+	} else {
+		// Browser globals
+		factory( root.jQuery, root, doc );
+	}
+}( this, document, function ( jQuery, window, document, undefined ) {// This plugin is an experiment for abstracting away the touch and mouse
+// events so that developers don't have to worry about which method of input
+// the device their document is loaded on supports.
+//
+// The idea here is to allow the developer to register listeners for the
+// basic mouse events, such as mousedown, mousemove, mouseup, and click,
+// and the plugin will take care of registering the correct listeners
+// behind the scenes to invoke the listener at the fastest possible time
+// for that device, while still retaining the order of event firing in
+// the traditional mouse environment, should multiple handlers be registered
+// on the same element for different events.
+//
+// The current version exposes the following virtual events to jQuery bind methods:
+// "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel"
+
+(function( $, window, document, undefined ) {
+
+var dataPropertyName = "virtualMouseBindings",
+	touchTargetPropertyName = "virtualTouchID",
+	virtualEventNames = "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel".split( " " ),
+	touchEventProps = "clientX clientY pageX pageY screenX screenY".split( " " ),
+	mouseHookProps = $.event.mouseHooks ? $.event.mouseHooks.props : [],
+	mouseEventProps = $.event.props.concat( mouseHookProps ),
+	activeDocHandlers = {},
+	resetTimerID = 0,
+	startX = 0,
+	startY = 0,
+	didScroll = false,
+	clickBlockList = [],
+	blockMouseTriggers = false,
+	blockTouchTriggers = false,
+	eventCaptureSupported = "addEventListener" in document,
+	$document = $( document ),
+	nextTouchID = 1,
+	lastTouchID = 0, threshold,
+	i;
+
+$.vmouse = {
+	moveDistanceThreshold: 10,
+	clickDistanceThreshold: 10,
+	resetTimerDuration: 1500
+};
+
+function getNativeEvent( event ) {
+
+	while ( event && typeof event.originalEvent !== "undefined" ) {
+		event = event.originalEvent;
+	}
+	return event;
+}
+
+function createVirtualEvent( event, eventType ) {
+
+	var t = event.type,
+		oe, props, ne, prop, ct, touch, i, j, len;
+
+	event = $.Event( event );
+	event.type = eventType;
+
+	oe = event.originalEvent;
+	props = $.event.props;
+
+	// addresses separation of $.event.props in to $.event.mouseHook.props and Issue 3280
+	// https://github.com/jquery/jquery-mobile/issues/3280
+	if ( t.search( /^(mouse|click)/ ) > -1 ) {
+		props = mouseEventProps;
+	}
+
+	// copy original event properties over to the new event
+	// this would happen if we could call $.event.fix instead of $.Event
+	// but we don't have a way to force an event to be fixed multiple times
+	if ( oe ) {
+		for ( i = props.length, prop; i; ) {
+			prop = props[ --i ];
+			event[ prop ] = oe[ prop ];
+		}
+	}
+
+	// make sure that if the mouse and click virtual events are generated
+	// without a .which one is defined
+	if ( t.search(/mouse(down|up)|click/) > -1 && !event.which ) {
+		event.which = 1;
+	}
+
+	if ( t.search(/^touch/) !== -1 ) {
+		ne = getNativeEvent( oe );
+		t = ne.touches;
+		ct = ne.changedTouches;
+		touch = ( t && t.length ) ? t[0] : ( ( ct && ct.length ) ? ct[ 0 ] : undefined );
+
+		if ( touch ) {
+			for ( j = 0, len = touchEventProps.length; j < len; j++) {
+				prop = touchEventProps[ j ];
+				event[ prop ] = touch[ prop ];
+			}
+		}
+	}
+
+	return event;
+}
+
+function getVirtualBindingFlags( element ) {
+
+	var flags = {},
+		b, k;
+
+	while ( element ) {
+
+		b = $.data( element, dataPropertyName );
+
+		for (  k in b ) {
+			if ( b[ k ] ) {
+				flags[ k ] = flags.hasVirtualBinding = true;
+			}
+		}
+		element = element.parentNode;
+	}
+	return flags;
+}
+
+function getClosestElementWithVirtualBinding( element, eventType ) {
+	var b;
+	while ( element ) {
+
+		b = $.data( element, dataPropertyName );
+
+		if ( b && ( !eventType || b[ eventType ] ) ) {
+			return element;
+		}
+		element = element.parentNode;
+	}
+	return null;
+}
+
+function enableTouchBindings() {
+	blockTouchTriggers = false;
+}
+
+function disableTouchBindings() {
+	blockTouchTriggers = true;
+}
+
+function enableMouseBindings() {
+	lastTouchID = 0;
+	clickBlockList.length = 0;
+	blockMouseTriggers = false;
+
+	// When mouse bindings are enabled, our
+	// touch bindings are disabled.
+	disableTouchBindings();
+}
+
+function disableMouseBindings() {
+	// When mouse bindings are disabled, our
+	// touch bindings are enabled.
+	enableTouchBindings();
+}
+
+function startResetTimer() {
+	clearResetTimer();
+	resetTimerID = setTimeout( function() {
+		resetTimerID = 0;
+		enableMouseBindings();
+	}, $.vmouse.resetTimerDuration );
+}
+
+function clearResetTimer() {
+	if ( resetTimerID ) {
+		clearTimeout( resetTimerID );
+		resetTimerID = 0;
+	}
+}
+
+function triggerVirtualEvent( eventType, event, flags ) {
+	var ve;
+
+	if ( ( flags && flags[ eventType ] ) ||
+				( !flags && getClosestElementWithVirtualBinding( event.target, eventType ) ) ) {
+
+		ve = createVirtualEvent( event, eventType );
+
+		$( event.target).trigger( ve );
+	}
+
+	return ve;
+}
+
+function mouseEventCallback( event ) {
+	var touchID = $.data( event.target, touchTargetPropertyName ),
+		ve;
+
+	if ( !blockMouseTriggers && ( !lastTouchID || lastTouchID !== touchID ) ) {
+		ve = triggerVirtualEvent( "v" + event.type, event );
+		if ( ve ) {
+			if ( ve.isDefaultPrevented() ) {
+				event.preventDefault();
+			}
+			if ( ve.isPropagationStopped() ) {
+				event.stopPropagation();
+			}
+			if ( ve.isImmediatePropagationStopped() ) {
+				event.stopImmediatePropagation();
+			}
+		}
+	}
+}
+
+function handleTouchStart( event ) {
+
+	var touches = getNativeEvent( event ).touches,
+		target, flags, t;
+
+	if ( touches && touches.length === 1 ) {
+
+		target = event.target;
+		flags = getVirtualBindingFlags( target );
+
+		if ( flags.hasVirtualBinding ) {
+
+			lastTouchID = nextTouchID++;
+			$.data( target, touchTargetPropertyName, lastTouchID );
+
+			clearResetTimer();
+
+			disableMouseBindings();
+			didScroll = false;
+
+			t = getNativeEvent( event ).touches[ 0 ];
+			startX = t.pageX;
+			startY = t.pageY;
+
+			triggerVirtualEvent( "vmouseover", event, flags );
+			triggerVirtualEvent( "vmousedown", event, flags );
+		}
+	}
+}
+
+function handleScroll( event ) {
+	if ( blockTouchTriggers ) {
+		return;
+	}
+
+	if ( !didScroll ) {
+		triggerVirtualEvent( "vmousecancel", event, getVirtualBindingFlags( event.target ) );
+	}
+
+	didScroll = true;
+	startResetTimer();
+}
+
+function handleTouchMove( event ) {
+	if ( blockTouchTriggers ) {
+		return;
+	}
+
+	var t = getNativeEvent( event ).touches[ 0 ],
+		didCancel = didScroll,
+		moveThreshold = $.vmouse.moveDistanceThreshold,
+		flags = getVirtualBindingFlags( event.target );
+
+		didScroll = didScroll ||
+			( Math.abs( t.pageX - startX ) > moveThreshold ||
+				Math.abs( t.pageY - startY ) > moveThreshold );
+
+	if ( didScroll && !didCancel ) {
+		triggerVirtualEvent( "vmousecancel", event, flags );
+	}
+
+	triggerVirtualEvent( "vmousemove", event, flags );
+	startResetTimer();
+}
+
+function handleTouchEnd( event ) {
+	if ( blockTouchTriggers ) {
+		return;
+	}
+
+	disableTouchBindings();
+
+	var flags = getVirtualBindingFlags( event.target ),
+		ve, t;
+	triggerVirtualEvent( "vmouseup", event, flags );
+
+	if ( !didScroll ) {
+		ve = triggerVirtualEvent( "vclick", event, flags );
+		if ( ve && ve.isDefaultPrevented() ) {
+			// The target of the mouse events that follow the touchend
+			// event don't necessarily match the target used during the
+			// touch. This means we need to rely on coordinates for blocking
+			// any click that is generated.
+			t = getNativeEvent( event ).changedTouches[ 0 ];
+			clickBlockList.push({
+				touchID: lastTouchID,
+				x: t.clientX,
+				y: t.clientY
+			});
+
+			// Prevent any mouse events that follow from triggering
+			// virtual event notifications.
+			blockMouseTriggers = true;
+		}
+	}
+	triggerVirtualEvent( "vmouseout", event, flags);
+	didScroll = false;
+
+	startResetTimer();
+}
+
+function hasVirtualBindings( ele ) {
+	var bindings = $.data( ele, dataPropertyName ),
+		k;
+
+	if ( bindings ) {
+		for ( k in bindings ) {
+			if ( bindings[ k ] ) {
+				return true;
+			}
+		}
+	}
+	return false;
+}
+
+function dummyMouseHandler() {}
+
+function getSpecialEventObject( eventType ) {
+	var realType = eventType.substr( 1 );
+
+	return {
+		setup: function(/* data, namespace */) {
+			// If this is the first virtual mouse binding for this element,
+			// add a bindings object to its data.
+
+			if ( !hasVirtualBindings( this ) ) {
+				$.data( this, dataPropertyName, {} );
+			}
+
+			// If setup is called, we know it is the first binding for this
+			// eventType, so initialize the count for the eventType to zero.
+			var bindings = $.data( this, dataPropertyName );
+			bindings[ eventType ] = true;
+
+			// If this is the first virtual mouse event for this type,
+			// register a global handler on the document.
+
+			activeDocHandlers[ eventType ] = ( activeDocHandlers[ eventType ] || 0 ) + 1;
+
+			if ( activeDocHandlers[ eventType ] === 1 ) {
+				$document.bind( realType, mouseEventCallback );
+			}
+
+			// Some browsers, like Opera Mini, won't dispatch mouse/click events
+			// for elements unless they actually have handlers registered on them.
+			// To get around this, we register dummy handlers on the elements.
+
+			$( this ).bind( realType, dummyMouseHandler );
+
+			// For now, if event capture is not supported, we rely on mouse handlers.
+			if ( eventCaptureSupported ) {
+				// If this is the first virtual mouse binding for the document,
+				// register our touchstart handler on the document.
+
+				activeDocHandlers[ "touchstart" ] = ( activeDocHandlers[ "touchstart" ] || 0) + 1;
+
+				if ( activeDocHandlers[ "touchstart" ] === 1 ) {
+					$document.bind( "touchstart", handleTouchStart )
+						.bind( "touchend", handleTouchEnd )
+
+						// On touch platforms, touching the screen and then dragging your finger
+						// causes the window content to scroll after some distance threshold is
+						// exceeded. On these platforms, a scroll prevents a click event from being
+						// dispatched, and on some platforms, even the touchend is suppressed. To
+						// mimic the suppression of the click event, we need to watch for a scroll
+						// event. Unfortunately, some platforms like iOS don't dispatch scroll
+						// events until *AFTER* the user lifts their finger (touchend). This means
+						// we need to watch both scroll and touchmove events to figure out whether
+						// or not a scroll happenens before the touchend event is fired.
+
+						.bind( "touchmove", handleTouchMove )
+						.bind( "scroll", handleScroll );
+				}
+			}
+		},
+
+		teardown: function(/* data, namespace */) {
+			// If this is the last virtual binding for this eventType,
+			// remove its global handler from the document.
+
+			--activeDocHandlers[ eventType ];
+
+			if ( !activeDocHandlers[ eventType ] ) {
+				$document.unbind( realType, mouseEventCallback );
+			}
+
+			if ( eventCaptureSupported ) {
+				// If this is the last virtual mouse binding in existence,
+				// remove our document touchstart listener.
+
+				--activeDocHandlers[ "touchstart" ];
+
+				if ( !activeDocHandlers[ "touchstart" ] ) {
+					$document.unbind( "touchstart", handleTouchStart )
+						.unbind( "touchmove", handleTouchMove )
+						.unbind( "touchend", handleTouchEnd )
+						.unbind( "scroll", handleScroll );
+				}
+			}
+
+			var $this = $( this ),
+				bindings = $.data( this, dataPropertyName );
+
+			// teardown may be called when an element was
+			// removed from the DOM. If this is the case,
+			// jQuery core may have already stripped the element
+			// of any data bindings so we need to check it before
+			// using it.
+			if ( bindings ) {
+				bindings[ eventType ] = false;
+			}
+
+			// Unregister the dummy event handler.
+
+			$this.unbind( realType, dummyMouseHandler );
+
+			// If this is the last virtual mouse binding on the
+			// element, remove the binding data from the element.
+
+			if ( !hasVirtualBindings( this ) ) {
+				$this.removeData( dataPropertyName );
+			}
+		}
+	};
+}
+
+// Expose our custom events to the jQuery bind/unbind mechanism.
+
+for ( i = 0; i < virtualEventNames.length; i++ ) {
+	$.event.special[ virtualEventNames[ i ] ] = getSpecialEventObject( virtualEventNames[ i ] );
+}
+
+// Add a capture click handler to block clicks.
+// Note that we require event capture support for this so if the device
+// doesn't support it, we punt for now and rely solely on mouse events.
+if ( eventCaptureSupported ) {
+	document.addEventListener( "click", function( e ) {
+		var cnt = clickBlockList.length,
+			target = e.target,
+			x, y, ele, i, o, touchID;
+
+		if ( cnt ) {
+			x = e.clientX;
+			y = e.clientY;
+			threshold = $.vmouse.clickDistanceThreshold;
+
+			// The idea here is to run through the clickBlockList to see if
+			// the current click event is in the proximity of one of our
+			// vclick events that had preventDefault() called on it. If we find
+			// one, then we block the click.
+			//
+			// Why do we have to rely on proximity?
+			//
+			// Because the target of the touch event that triggered the vclick
+			// can be different from the target of the click event synthesized
+			// by the browser. The target of a mouse/click event that is synthesized
+			// from a touch event seems to be implementation specific. For example,
+			// some browsers will fire mouse/click events for a link that is near
+			// a touch event, even though the target of the touchstart/touchend event
+			// says the user touched outside the link. Also, it seems that with most
+			// browsers, the target of the mouse/click event is not calculated until the
+			// time it is dispatched, so if you replace an element that you touched
+			// with another element, the target of the mouse/click will be the new
+			// element underneath that point.
+			//
+			// Aside from proximity, we also check to see if the target and any
+			// of its ancestors were the ones that blocked a click. This is necessary
+			// because of the strange mouse/click target calculation done in the
+			// Android 2.1 browser, where if you click on an element, and there is a
+			// mouse/click handler on one of its ancestors, the target will be the
+			// innermost child of the touched element, even if that child is no where
+			// near the point of touch.
+
+			ele = target;
+
+			while ( ele ) {
+				for ( i = 0; i < cnt; i++ ) {
+					o = clickBlockList[ i ];
+					touchID = 0;
+
+					if ( ( ele === target && Math.abs( o.x - x ) < threshold && Math.abs( o.y - y ) < threshold ) ||
+								$.data( ele, touchTargetPropertyName ) === o.touchID ) {
+						// XXX: We may want to consider removing matches from the block list
+						//      instead of waiting for the reset timer to fire.
+						e.preventDefault();
+						e.stopPropagation();
+						return;
+					}
+				}
+				ele = ele.parentNode;
+			}
+		}
+	}, true);
+}
+})( jQuery, window, document );
+
+(function( $ ) {
+	$.mobile = {};
+}( jQuery ));
+
+	(function( $, undefined ) {
+		var support = {
+			touch: "ontouchend" in document
+		};
+
+		$.mobile.support = $.mobile.support || {};
+		$.extend( $.support, support );
+		$.extend( $.mobile.support, support );
+	}( jQuery ));
+
+
+(function( $, window, undefined ) {
+	var $document = $( document ),
+		supportTouch = $.mobile.support.touch,
+		scrollEvent = "touchmove scroll",
+		touchStartEvent = supportTouch ? "touchstart" : "mousedown",
+		touchStopEvent = supportTouch ? "touchend" : "mouseup",
+		touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
+
+	// setup new event shortcuts
+	$.each( ( "touchstart touchmove touchend " +
+		"tap taphold " +
+		"swipe swipeleft swiperight " +
+		"scrollstart scrollstop" ).split( " " ), function( i, name ) {
+
+		$.fn[ name ] = function( fn ) {
+			return fn ? this.bind( name, fn ) : this.trigger( name );
+		};
+
+		// jQuery < 1.8
+		if ( $.attrFn ) {
+			$.attrFn[ name ] = true;
+		}
+	});
+
+	function triggerCustomEvent( obj, eventType, event, bubble ) {
+		var originalType = event.type;
+		event.type = eventType;
+		if ( bubble ) {
+			$.event.trigger( event, undefined, obj );
+		} else {
+			$.event.dispatch.call( obj, event );
+		}
+		event.type = originalType;
+	}
+
+	// also handles scrollstop
+	$.event.special.scrollstart = {
+
+		enabled: true,
+		setup: function() {
+
+			var thisObject = this,
+				$this = $( thisObject ),
+				scrolling,
+				timer;
+
+			function trigger( event, state ) {
+				scrolling = state;
+				triggerCustomEvent( thisObject, scrolling ? "scrollstart" : "scrollstop", event );
+			}
+
+			// iPhone triggers scroll after a small delay; use touchmove instead
+			$this.bind( scrollEvent, function( event ) {
+
+				if ( !$.event.special.scrollstart.enabled ) {
+					return;
+				}
+
+				if ( !scrolling ) {
+					trigger( event, true );
+				}
+
+				clearTimeout( timer );
+				timer = setTimeout( function() {
+					trigger( event, false );
+				}, 50 );
+			});
+		},
+		teardown: function() {
+			$( this ).unbind( scrollEvent );
+		}
+	};
+
+	// also handles taphold
+	$.event.special.tap = {
+		tapholdThreshold: 750,
+		emitTapOnTaphold: true,
+		setup: function() {
+			var thisObject = this,
+				$this = $( thisObject ),
+				isTaphold = false;
+
+			$this.bind( "vmousedown", function( event ) {
+				isTaphold = false;
+				if ( event.which && event.which !== 1 ) {
+					return false;
+				}
+
+				var origTarget = event.target,
+					timer;
+
+				function clearTapTimer() {
+					clearTimeout( timer );
+				}
+
+				function clearTapHandlers() {
+					clearTapTimer();
+
+					$this.unbind( "vclick", clickHandler )
+						.unbind( "vmouseup", clearTapTimer );
+					$document.unbind( "vmousecancel", clearTapHandlers );
+				}
+
+				function clickHandler( event ) {
+					clearTapHandlers();
+
+					// ONLY trigger a 'tap' event if the start target is
+					// the same as the stop target.
+					if ( !isTaphold && origTarget === event.target ) {
+						triggerCustomEvent( thisObject, "tap", event );
+					} else if ( isTaphold ) {
+						event.preventDefault();
+					}
+				}
+
+				$this.bind( "vmouseup", clearTapTimer )
+					.bind( "vclick", clickHandler );
+				$document.bind( "vmousecancel", clearTapHandlers );
+
+				timer = setTimeout( function() {
+					if ( !$.event.special.tap.emitTapOnTaphold ) {
+						isTaphold = true;
+					}
+					triggerCustomEvent( thisObject, "taphold", $.Event( "taphold", { target: origTarget } ) );
+				}, $.event.special.tap.tapholdThreshold );
+			});
+		},
+		teardown: function() {
+			$( this ).unbind( "vmousedown" ).unbind( "vclick" ).unbind( "vmouseup" );
+			$document.unbind( "vmousecancel" );
+		}
+	};
+
+	// Also handles swipeleft, swiperight
+	$.event.special.swipe = {
+
+		// More than this horizontal displacement, and we will suppress scrolling.
+		scrollSupressionThreshold: 30,
+
+		// More time than this, and it isn't a swipe.
+		durationThreshold: 1000,
+
+		// Swipe horizontal displacement must be more than this.
+		horizontalDistanceThreshold: 30,
+
+		// Swipe vertical displacement must be less than this.
+		verticalDistanceThreshold: 30,
+
+		getLocation: function ( event ) {
+			var winPageX = window.pageXOffset,
+				winPageY = window.pageYOffset,
+				x = event.clientX,
+				y = event.clientY;
+
+			if ( event.pageY === 0 && Math.floor( y ) > Math.floor( event.pageY ) ||
+				event.pageX === 0 && Math.floor( x ) > Math.floor( event.pageX ) ) {
+
+				// iOS4 clientX/clientY have the value that should have been
+				// in pageX/pageY. While pageX/page/ have the value 0
+				x = x - winPageX;
+				y = y - winPageY;
+			} else if ( y < ( event.pageY - winPageY) || x < ( event.pageX - winPageX ) ) {
+
+				// Some Android browsers have totally bogus values for clientX/Y
+				// when scrolling/zooming a page. Detectable since clientX/clientY
+				// should never be smaller than pageX/pageY minus page scroll
+				x = event.pageX - winPageX;
+				y = event.pageY - winPageY;
+			}
+
+			return {
+				x: x,
+				y: y
+			};
+		},
+
+		start: function( event ) {
+			var data = event.originalEvent.touches ?
+					event.originalEvent.touches[ 0 ] : event,
+				location = $.event.special.swipe.getLocation( data );
+			return {
+						time: ( new Date() ).getTime(),
+						coords: [ location.x, location.y ],
+						origin: $( event.target )
+					};
+		},
+
+		stop: function( event ) {
+			var data = event.originalEvent.touches ?
+					event.originalEvent.touches[ 0 ] : event,
+				location = $.event.special.swipe.getLocation( data );
+			return {
+						time: ( new Date() ).getTime(),
+						coords: [ location.x, location.y ]
+					};
+		},
+
+		handleSwipe: function( start, stop, thisObject, origTarget ) {
+			if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
+				Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
+				Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
+				var direction = start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight";
+
+				triggerCustomEvent( thisObject, "swipe", $.Event( "swipe", { target: origTarget, swipestart: start, swipestop: stop }), true );
+				triggerCustomEvent( thisObject, direction,$.Event( direction, { target: origTarget, swipestart: start, swipestop: stop } ), true );
+				return true;
+			}
+			return false;
+
+		},
+
+		// This serves as a flag to ensure that at most one swipe event event is
+		// in work at any given time
+		eventInProgress: false,
+
+		setup: function() {
+			var events,
+				thisObject = this,
+				$this = $( thisObject ),
+				context = {};
+
+			// Retrieve the events data for this element and add the swipe context
+			events = $.data( this, "mobile-events" );
+			if ( !events ) {
+				events = { length: 0 };
+				$.data( this, "mobile-events", events );
+			}
+			events.length++;
+			events.swipe = context;
+
+			context.start = function( event ) {
+
+				// Bail if we're already working on a swipe event
+				if ( $.event.special.swipe.eventInProgress ) {
+					return;
+				}
+				$.event.special.swipe.eventInProgress = true;
+
+				var stop,
+					start = $.event.special.swipe.start( event ),
+					origTarget = event.target,
+					emitted = false;
+
+				context.move = function( event ) {
+					if ( !start || event.isDefaultPrevented() ) {
+						return;
+					}
+
+					stop = $.event.special.swipe.stop( event );
+					if ( !emitted ) {
+						emitted = $.event.special.swipe.handleSwipe( start, stop, thisObject, origTarget );
+						if ( emitted ) {
+
+							// Reset the context to make way for the next swipe event
+							$.event.special.swipe.eventInProgress = false;
+						}
+					}
+					// prevent scrolling
+					if ( Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.scrollSupressionThreshold ) {
+						event.preventDefault();
+					}
+				};
+
+				context.stop = function() {
+						emitted = true;
+
+						// Reset the context to make way for the next swipe event
+						$.event.special.swipe.eventInProgress = false;
+						$document.off( touchMoveEvent, context.move );
+						context.move = null;
+				};
+
+				$document.on( touchMoveEvent, context.move )
+					.one( touchStopEvent, context.stop );
+			};
+			$this.on( touchStartEvent, context.start );
+		},
+
+		teardown: function() {
+			var events, context;
+
+			events = $.data( this, "mobile-events" );
+			if ( events ) {
+				context = events.swipe;
+				delete events.swipe;
+				events.length--;
+				if ( events.length === 0 ) {
+					$.removeData( this, "mobile-events" );
+				}
+			}
+
+			if ( context ) {
+				if ( context.start ) {
+					$( this ).off( touchStartEvent, context.start );
+				}
+				if ( context.move ) {
+					$document.off( touchMoveEvent, context.move );
+				}
+				if ( context.stop ) {
+					$document.off( touchStopEvent, context.stop );
+				}
+			}
+		}
+	};
+	$.each({
+		scrollstop: "scrollstart",
+		taphold: "tap",
+		swipeleft: "swipe.left",
+		swiperight: "swipe.right"
+	}, function( event, sourceEvent ) {
+
+		$.event.special[ event ] = {
+			setup: function() {
+				$( this ).bind( sourceEvent, $.noop );
+			},
+			teardown: function() {
+				$( this ).unbind( sourceEvent );
+			}
+		};
+	});
+
+})( jQuery, this );
+
+
+}));
--- a/resources/mobile.js
+++ b/resources/mobile.js
@ -0,0 +1,53 @@
+/* Popout menus (header) */
+
+$( function() {
+	var toggleTime = 200;
+
+	// Open the various menus
+	$( '#user-tools h2' ).on( 'click', function( e ) {
+		if ( $( window ).width() < 851 ) {
+			$( '#p-personal-inner, #menus-cover' ).fadeToggle( toggleTime );
+		}
+	} );
+	$( '#site-navigation h2' ).on( 'click', function( e ) {
+		if ( $( window ).width() < 851 ) {
+			$( '#site-navigation .sidebar-inner, #menus-cover' ).fadeToggle( toggleTime );
+		}
+	} );
+	$( '#site-tools h2' ).on( 'click', function( e ) {
+		if ( $( window ).width() < 851 ) {
+			$( '#site-tools .sidebar-inner, #menus-cover' ).fadeToggle( toggleTime );
+		}
+	} );
+	$( '#ca-more' ).on( 'click', function( e ) {
+		$( '#page-tools .sidebar-inner' ).css( "top", $( '#ca-more' ).offset().top + 25 );
+		if ( $( window ).width() < 851 ) {
+			$( '#page-tools .sidebar-inner, #menus-cover' ).fadeToggle( toggleTime );
+		}
+	} );
+	$( '#ca-languages' ).on( 'click', function( e ) {
+		$( '#other-languages .sidebar-inner' ).css( "top", $( '#ca-languages' ).offset().top + 25 );
+		if ( $( window ).width() < 851 ) {
+			$( '#other-languages .sidebar-inner, #menus-cover' ).fadeToggle( toggleTime );
+		}
+	} );
+
+	// Close menus on click outside
+	$( document ).click( function( e ) {
+		if ( $( e.target ).closest( '#menus-cover' ).length > 0 ) {
+			$( '#p-personal-inner' ).fadeOut( toggleTime );
+			$( '.sidebar-inner' ).fadeOut( toggleTime );
+			$( '#menus-cover' ).fadeOut( toggleTime );
+		}
+	} );
+
+	// Include alternative closing method for ios
+	$( window ).on( 'swiperight', function( e ) {
+		if ( $( window ).width() < 851 ) {
+			$( '#p-personal-inner' ).fadeOut( toggleTime );
+			$( '.sidebar-inner' ).fadeOut( toggleTime );
+			$( '#menus-cover' ).fadeOut( toggleTime );
+		}
+	} );
+} );
+
--- a/resources/screen-common.less
+++ b/resources/screen-common.less
@ -4,19 +4,27 @@

 html,
 body {
-	font-family: @fonts;
 	margin: 0;
 	padding: 0;
+}
+body {
+	font-family: @fonts;
 	color: @text;
 	background: @background-dark;
-	font-size: .95em;
 	line-height: 1.4;
+	font-size: @font-size;
 }
+
 #mw-content {
+	.box;
 	background: @background;
+	padding: 1em @content-padding 3em;
+	overflow: auto;
+	position: relative;
 }
 #mw-content-container {
 	background: @background2;
+	word-wrap: break-word;
 }
 #mw-footer-container {
 	border-top: solid 1px @background-dark2;
@ -33,17 +41,179 @@ body {

 #p-logo {
 	text-align: center;
+	margin: auto;
+}
+.mw-wiki-logo {
+	display: block;
+	content: '';
 	width: 11em;
+	height: 11em;
+	background-repeat: no-repeat;
+	background-position: 50% 50%;
+	margin: auto;
+}
+#p-logo-text {
+	width: @column-left-size;
+	text-align: center;
+	line-height: 1;

-	a.mw-wiki-logo {
+	a {
+		padding: .2em 1em;
+		color: @text;
+		font-family: @fonts-secondary;
+		font-variant: small-caps;
+		font-size: 1.75em;
 		display: block;
-		content: '';
-		width: 11em;
-		height: 11em;
-		background-repeat: no-repeat;
-		background-position: 50% 50%;
+
+		/* 13+ character names */
+		&.long {
+			font-size: 1.45em;
+			padding: 0;
+			line-height: .8;
+		}
+	}
+}
+
+/* Search */
+
+#simpleSearch {
+	box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+	background: @background;
+	position: relative;
+	border: solid 1px @grey;
+}
+#searchInput {
+	border: none;
+	margin: 0;
+	height: 2.1em;
+	padding: .4em 4.5em .2em 2em;
+	box-shadow: none;
+	background: transparent;
+	width: 100%;
+	min-height: 0;
+}
+#searchButton,
+#mw-searchButton {
+	position: absolute;
+	top: 0;
+	right: 1.5em;
+	width: 2.5em;
+	height: 2.5em;
+	.icon;
+	.background-image-svg('images/search-ltr.svg', 'images/search-ltr.png');
+	background-position: 50% 40%;
+	box-shadow: none;
+}
+
+/* Dropdown stuff */
+
+.pokey,
+.pokey::after {
+	border-bottom: 10px solid @grey-bright;
+	border-left: 10px solid transparent;
+	border-right: 10px solid transparent;
+	content: "";
+	height: 0px;
+	position: absolute;
+	transform: rotate(360deg); // to force some smoothing in annoying browsers
+	width: 0px;
+	z-index: 2;
+}
+.pokey {
+	top: 1.85em;
+	right: 1px;
+	display: none;
+}
+.pokey::after {
+	border-bottom-color: #FFFFFF;
+	right: -10px;
+	top: 2px;
+}
+
+.dropdown-toggle {
+	.dropdown-header();
+}
+
+/* Footer */
+
+#mw-footer {
+	padding-top: .5em;
+	padding-bottom: 1em;
+
+	ul,
+	li {
+		margin: 1em 0;
+		list-style: none;
+		padding: 0;
+	}
+	#footer-icons {
+		float: right;
+		margin: 0 0 0 1em;
+
+		li {
+			margin: 0 0 1em 0;
+		}
+	}
+}
+#footer-places li {
+	display: inline;
+	padding-right: 1em;
+}
+
+/* Content */
+
+#mw-content-container {
+	border-bottom: solid 4px @green;
+}
+#page-header-links {
+	div,
+	ul,
+	li {
+		list-style: none;
+		display: inline-block;
+		margin: 0;
+		padding: 0;
+		line-height: 1.5;
+	}
+	li {
+		margin: .25em 0 1.5em;
+		border-bottom: solid 3px @background;
+
+		&:hover {
+			border-bottom-color: @grey;
+		}
+		&.selected {
+			border-bottom-color: @blue;
+
+			a {
+				color: @text;
+			}
+		}
+	}
+}
+#p-namespaces {
+	float: left;
+
+	li {
+		margin-right: 1em;
 	}
 }
+#p-pagetools {
+	float: right;
+
+	li {
+		margin-left: 1em;
+	}
+}
+
+#ca-watch a {
+	.ca-icon();
+	.background-image-svg('images/star.svg', 'images/star.png');
+}
+#ca-unwatch a {
+	.ca-icon();
+	.background-image-svg('images/star-filled.svg', 'images/star-filled.png');
+}

 /* Misc */

@ -51,6 +221,7 @@ a {
 	text-decoration: none;
 	color: @blue;

+	&:hover,
 	&:visited {
 		color: @blue-dark;
 	}
@ -59,6 +230,7 @@ a.new,
 .new a {
 	color: @red;

+	&:hover,
 	&:visited {
 		color: @red-dark;
 	}
@ -66,6 +238,14 @@ a.new,

 .mw-editsection {
 	font-family: @fonts;
+
+	a {
+		.background-image-svg('images/pencil-grey.svg', 'images/pencil-grey.png');
+		background-repeat: no-repeat;
+		background-position: 0 0;
+		display: inline-block;
+		padding: .5em 0 .25em 1.75em;
+	}
 }
 .mw-editsection-bracket {
 	display: none;
@ -73,6 +253,10 @@ a.new,
 .visual-clear {
 	clear: both;
 }
+.mw-indicators {
+	float: right;
+	margin: .75em 0 0 1em;
+}
 #mw-content {
 	h1, h2, h3, h4, h5, h6, dt {
 		font-weight: normal;
@ -218,12 +402,41 @@ table.wikitable > * > tr > th {
 	border: none;
 }

+/* Color bars */
+
+.color-bar {
+	width: 100%;
+}
+@color-height: 4px;
+.color-left {
+	height: @color-height;
+	background: @red-dark;
+	width: 50%;
+	float: left;
+}
+.color-right {
+	display: inline-block;
+	height: @color-height;
+	background: @green-dark;
+	width: 50%;
+	float: right;
+}
+.color-middle-container {
+	max-width: @content-width;
+	margin: 0 auto -@color-height;
+	position: relative;
+}
+.color-middle {
+	height: @color-height;
+	background: @blue-dark;
+	margin-left: @column-left-size + 1em;
+	margin-right: @column-right-size + 1em;
+}

 /* Hidden stuff */

 #p-namespaces h3,
 #p-pagetools h3,
-#mw-site-navigation h2,
 #p-search h3 {
 	.hidden;
 }
--- a/resources/screen-desktop-full.less
+++ b/resources/screen-desktop-full.less
@ -0,0 +1,19 @@
+@import "variables.less";
+
+#mw-site-navigation {
+	.column-left();
+}
+
+#mw-content {
+	margin-left: @column-left-size;
+	margin-right: @column-right-size;
+}
+
+#mw-related-navigation {
+	.column-right();
+}
+
+// Redundant content category list
+#catlinks {
+	display: none;
+}
--- a/resources/screen-desktop-mid.less
+++ b/resources/screen-desktop-mid.less
@ -0,0 +1,19 @@
+@import "variables.less";
+
+#mw-site-navigation,
+#mw-related-navigation {
+	.column-left();
+}
+
+#mw-related-navigation {
+	margin-top: 2em;
+}
+
+#mw-content {
+	margin-left: @column-left-size;
+}
+
+// Redundant content category list
+#catlinks {
+	display: none;
+}
--- a/resources/screen-desktop-small.less
+++ b/resources/screen-desktop-small.less
@ -0,0 +1,127 @@
+@import "variables.less";
+
+// Redundant sidebar category list and stuff
+
+#mw-content-block {
+	padding: 0;
+}
+#mw-content {
+	border-width: 0 0 1px;
+	clear: both;
+}
+
+.categories-bottom();
+
+
+// Header navigation
+
+.sidebar-chunk {
+	display: inline-block;
+	position: relative;
+
+	h2 {
+		display: inline-block;
+	}
+}
+.sidebar-inner,
+#p-logo {
+	display: none !important;
+}
+
+// Have these cover the fixed header color-bar using the mw-header-nav-hack (with its own color-bar at the bottom)
+#mw-site-navigation,
+#mw-related-navigation {
+	display: inline-block;
+	position: relative;
+	z-index: 99;
+
+	h2 {
+		font-weight: normal;
+		font-family: @fonts-secondary;
+		font-size: 1.25em;
+		padding: .5em 0 .2em;
+			margin: 0;
+
+		.dropdown-header();
+	}
+}
+.sidebar-chunk:hover {
+	.pokey,
+	.sidebar-inner {
+		display: block !important;
+	}
+}
+
+#mw-header-nav-hack {
+	border-top: solid 2px @grey-bright;
+	display: block;
+	position: absolute;
+	z-index: 98;
+	background: @background;
+	width: 100%;
+}
+#mw-header-nav-hack .color-bar {
+	margin-top: 2.5em; // Height of expected menu header contents
+}
+
+#mw-site-navigation {
+	float: left;
+	margin-left: 2em;
+
+	.sidebar-chunk {
+		margin: 0 1em 0 0;
+	}
+	.sidebar-inner {
+		.dropdown-menu( left );
+	}
+}
+#mw-related-navigation {
+	float: right;
+	margin-right: 2em;
+
+	.sidebar-chunk {
+		margin: 0 0 0 1em;
+	}
+	.sidebar-inner {
+		.dropdown-menu();
+		top: 2.95em !important; // to override mobile positioning
+	}
+}
+
+// Consistency
+
+#mw-header {
+	padding: 0 2em;
+}
+#p-logo-text a {
+	padding-left: 0;
+	text-align: left;
+}
+
+#mw-footer {
+	padding: 0 @content-padding;
+}
+
+// Personal menu
+
+#p-personal {
+	float: right;
+
+	h2 span {
+		display: none;
+	}
+	h2:after {
+		margin-left: -.65em;
+	}
+	.dropdown {
+		right: -1em;
+	}
+
}
+
+#user-tools {
+	width: 6em;
+}
+#p-search {
+	margin-right: 6em;
+}
+
--- a/resources/screen-desktop.less
+++ b/resources/screen-desktop.less
@ -1,25 +1,21 @@
@import "variables.less";

+// Override menu display from mobile
+// This also requires !importants where they hover and stuff
+.dropdown,
+.sidebar-inner {
+	display: block !important;
+}
+
 .ts-inner {
-	max-width: 100em;
-	padding: 0 3em;
+	max-width: @content-width;
+	padding: 0 1em;
 	margin: auto;
 }
-#p-logo-text,
-#mw-site-navigation {
-	width: 12em;
-	float: left;
-}
-#p-search,
-#mw-content,
-#mw-header-container .color-middle {
-	margin-left: 12em;
-	margin-right: 15em;
-}
-#mw-related-navigation,
-#user-tools {
-	width: 15em;
-	float: right;
+#mw-content-container {
+	.background-image-svg('images/cat-grey.svg', 'images/cat-grey.png');
+	background-repeat: no-repeat;
+	background-position: center 15em;
 }

 /* Header */
@ -32,54 +28,63 @@
 	background: @background;
 	color: @text;
 	padding: 0.5em 0 0;
+	min-height: @fixed-header-height;
+	box-sizing: border-box;
+}
+#p-logo-text {
+	width: @column-left-size;
+	float: left;
+}
+#p-search {
+	margin-left: @column-left-size;
+	margin-right: @column-right-size;
+}
+#user-tools {
+	width: @column-right-size;
+	float: right;
+}
+#mw-header-nav-hack,
+#mw-header-hack {
+	position: fixed;
+	z-index: 97;
+	top: @fixed-header-height;
 	box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.075), 0 0 2px rgba(0, 0, 0, 0.2);
-	min-height: 2.85em;
+}
+#mw-header-nav-hack {
+	display: none;
 }

 /* Add offset to make anchor links work with the fixed header */
 :target:before {
 	content: "";
 	display: block;
-	height: 2.85em;
-	margin: -2.85em 0 0;
-}
-
-@color-height: 4px;
-.color-left {
-	float:left;
-	height: @color-height;
-	background: @red-dark;
-	width: 50%;
-}
-.color-right {
-	display: inline-block;
-	height: @color-height;
-	background: @green-dark;
-	width: 50%;
-	float:right;
-}
-.color-middle {
-	height: @color-height;
-	background: @blue-dark;
-	margin-top: .4em;
-	margin-bottom: -@color-height;
-	position: relative;
+	height: @fixed-header-height;
+	margin: -@fixed-header-height 0 0;
 }

 .dropdown {
-	display: none;
+	display: none !important;
 }

 #p-personal {
 	display: inline-block;
 	position: relative;
 	padding-left: 1.5em;
-	padding-right: 2em;
 	line-height: 1;
+
+	.dropdown {
+		.dropdown-menu();
+		top: 2.95em;
+		right: -2em;
+	}
+	.pokey {
+		top: 2.125em;
+	}
 }
-#p-personal h3 {
-	margin: 0 0 -1em;
-	padding: .7em 0 1.25em 25px;
+
+#p-personal h2 {
+	margin: 0;
+	padding: .7em 0 0 25px;
 	font-family: @fonts-secondary;
 	font-weight: normal;
 	font-size: 1.1em;
@ -87,251 +92,24 @@
 	background-position: 0 7px;
 	background-repeat: no-repeat;

-	&:after {
-		display: inline-block;
-		content: '';
-		width: 22px;
-		height: 12px;
-		.background-image-svg('images/arrow-down-grey.svg', 'images/arrow-down-grey.png');
-		background-position: center center;
-		background-repeat: no-repeat;
-	}
-	&:hover {
-		cursor: pointer;
-	}
+	.dropdown-header();
 }
-
-#p-logo-text {
-	width: 11em;
-	text-align: center;
-	line-height: 1;
-
-	a {
-		padding: .2em 0;
-		color: @text;
-		font-family: @fonts-secondary;
-		font-variant: small-caps;
-		font-size: 1.75em;
-		display: block;
-
-		/* 13+ character names */
-		&.long {
-			font-size: 1.45em;
-			padding: 0;
-			line-height: .8;
-		}
+#p-personal:hover {
+	.pokey,
+	.dropdown {
+		display: block !important;
 	}
 }

-/* Search */
-
-#simpleSearch {
-	box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
-	background: @background;
-	position: relative;
-	border: solid 1px @grey;
-}
-#searchInput {
-	border: none;
-	margin: 0;
-	height: 2.1em;
-	padding: .4em 4.5em .2em 2em;
-	box-shadow: none;
-	background: transparent;
-	width: 100%;
-	min-height: 0;
-}
-#searchButton,
-#mw-searchButton {
-	position: absolute;
-	top: 0;
-	right: 1.5em;
-	width: 2.5em;
-	height: 2.5em;
-	.icon;
-	.background-image-svg('images/search-ltr.svg', 'images/search-ltr.png');
-	background-position: 50% 40%;
-	box-shadow: none;
-}
-
-/* Dropdowns */
-
-#p-personal:hover .dropdown {
-	display: block;
-}
-
-.dropdown {
-	.box;
-	background: #fff;
-	box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05);
-	position: absolute;
-	padding: 20px 2em 0;
-	min-width: 6em;
-	top: 2.95em;
-	right: 0;
-	overflow: visible;
-	line-height: 1.1;
-	z-index: 1;
-
-	ul,
-	li {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-	}
-	ul {
-		margin-bottom: 2em;
-	}
-	li {
-		margin: 0 0 .35em;
-	}
-}
-.pokey,
-.pokey::after {
-	border-bottom: 10px solid #E6E6E6;
-	border-left: 10px solid transparent;
-	border-right: 10px solid transparent;
-	content: "";
-	height: 0px;
-	position: absolute;
-	transform: rotate(360deg); // to force some smoothing
-	width: 0px;
-}
-.pokey {
-	right: 28px;
-	top: -10px;
-}
-.pokey::after {
-	border-bottom-color: #FFFFFF;
-	right: -10px;
-	top: 2px;
+#page-header-links #ca-more,
+#page-header-links #ca-languages,
+.sidebar-chunk h2 {
+	display: none;
 }

 /* Content */

 #mw-content-container {
-	margin-top: 3em;
-	padding-bottom: .5em;
-	border-bottom: solid 4px @green;
-}
-#mw-content {
-	.box;
-	background: @background;
-	padding: 1em 2em 3em;
-	overflow: hidden;
-}
-#page-header-links {
-	div,
-	ul,
-	li {
-		list-style: none;
-		display: inline-block;
-		margin: 0;
-		padding: 0;
-	}
-	li {
-		margin: .25em 0 1.5em;
-
-		&:hover {
-			border-bottom: solid 3px @grey;
-		}
-		&.selected {
-			border-bottom: solid 3px @blue;
-
-			a {
-				color: @text;
-			}
-		}
-	}
-	#p-namespaces {
-		float: left;
-
-		li {
-			margin-right: 1em;
-		}
-	}
-	#p-pagetools {
-		float: right;
-
-		li {
-			margin-left: 1em;
-		}
-	}
-}
-#ca-watch a,
-#ca-unwatch a {
-	.icon;
-	display: inline-block;
-	width: 1.4em;
-	height: 1.4em;
-	box-sizing: border-box;
-}
-#ca-watch a {
-	.background-image-svg('images/star.svg', 'images/star.png');
-}
-#ca-unwatch a {
-	.background-image-svg('images/star-filled.svg', 'images/star-filled.png');
-}
-
-/* Sidebars */
-
-#mw-site-navigation .sidebar-chunk,
-#mw-related-navigation .sidebar-chunk {
-	.box;
-	padding: 1.5em 1.5em 0;
-	margin: 1em;
-	line-height: 1.1;
-
-	ul,
-	li {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-	}
-	h3 {
-		font-weight: normal;
-		font-size: 1em;
-		margin: .25em 0 .75em 0;
-		padding-bottom: .15em;
-		border-bottom: solid 2px @grey;
-	}
-	ul {
-		margin-bottom: 2em;
-	}
-	li {
-		margin: 0 0 .35em;
-	}
-}
-
-#mw-site-navigation .sidebar-chunk {
-	margin-left: 0;
-}
-#mw-related-navigation .sidebar-chunk {
-	margin-right: 0;
-}
-
-/* Footer */
-
-#mw-footer {
-	padding-top: .5em;
+	margin-top: @fixed-header-height;
 	padding-bottom: 1em;
-
-	ul,
-	li {
-		margin: 1em 0;
-		list-style: none;
-		padding: 0;
-	}
-}
-#footer-places li {
-	display: inline;
-	padding-right: 1em;
-}
-#footer-icons {
-	float: right;
-	margin: 0 0 0 1em;
-
-	li {
-		margin: 0 0 1em 0;
-	}
 }
--- a/resources/screen-misc.less
+++ b/resources/screen-misc.less
@ -0,0 +1,24 @@
+@import "variables.less";
+
+// Let's add some unnecessary white space. Or grey, as it were. In the dumbest possible way.
+
+@media screen and (min-width: 1425px) {
+	.color-middle-container,
+	.ts-inner {
+		padding: 0 3em;
+	}
+	.color-middle {
+		margin-left: @column-left-size;
+		margin-right: @column-right-size;
+	}
+}
+
+@media screen and (min-width: 1250px) and (max-width: 1339px) {
+	.ts-inner {
+		padding: 0 3em;
+	}
+	.color-middle {
+		margin-left: @column-left-size + 3em;
+		margin-right: @column-right-size + 3em;
+	}
+}
--- a/resources/screen-mobile.less
+++ b/resources/screen-mobile.less
@ -1 +1,244 @@
@import "variables.less";
+
+/* Layout */
+
+#mw-footer {
+	padding: 0 @content-padding;
+}
+.color-middle {
+	margin: auto;
+	width: 34%;
+}
+
+.categories-bottom();
+#catlinks {
+	padding-bottom: 2em;
+	border-top: solid 3px @grey;
+}
+
+#page-header-links #ca-view,
+#mw-header-nav-hack,
+#page-tools h2,
+#p-logo {
+	display: none;
+}
+
+#mw-header-container {
+	background: @background;
+	padding: 3.75em @content-padding .35em;
+}
+
+#mw-header-hack {
+	position: relative;
+	z-index: 1;
+	box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.075), 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+/* Dropdowns */
+
+.sidebar-inner,
+.dropdown {
+	display: none;
+}
+
+.sidebar-inner,
+.dropdown {
+	.nav-block();
+	background: @background;
+	box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05);
+	position: absolute;
+	padding: 2em 2.5em 1em;
+	margin: 0;
+	min-width: 9.153em;
+	max-width: 80%;
+	top: 3.25em;
+	right: 0;
+	overflow: visible;
+	z-index: 100;
+
+	h3 {
+		margin: .5em 0 1.5em;
+	}
+	ul {
+		margin: 1em 0 2em;
+	}
+	li {
+		margin: 0 0 .75em;
+	}
+}
+
+#menus-cover {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 99;
+	width: 100%;
+	height: 100%;
+	background: @background2;
+	opacity: .8;
+	overflow: hidden;
+}
+
+/* Dropdown toggles */
+
+#user-tools h2,
+.sidebar-chunk h2 {
+	.dropdown-header();
+	margin: 0;
+	width: 30px;
+	height: 30px;
+	position: absolute;
+	top: 1em;
+	padding-bottom: 0;
+	font-size: 1em;
+	background-repeat: no-repeat;
+	background-position: 50% 50%;
+
+	span {
+		display: inline-block;
+		.icon();
+	}
+	&:after {
+		position: absolute;
+		top: .65em;
+		left: 23px;
+	}
+}
+#user-tools h2 {
+	right: @content-padding + .5em;
+	.background-image-svg('images/user-large-grey.svg', 'images/user-large-grey.png');
+}
+#site-navigation {
+	h2 {
+		left: @content-padding;
+		.background-image-svg('images/menu-large-grey.svg', 'images/menu-large-grey.png');
+	}
+	.sidebar-inner {
+		left: 0;
+		right: auto;
+	}
+}
+#site-tools h2 {
+	right: 7em;
+	.background-image-svg('images/gear-large-grey.svg', 'images/gear-large-grey.png');
+}
+
+/* Logo */
+
+#p-logo-text {
+	position: absolute;
+	top: .75em;
+	left: 6em;
+	text-align: left;
+
+	a {
+		padding-left: 0;
+	}
+}
+
+/* Page actions */
+
+#p-namespaces li {
+	margin-right: 1.5em;
+}
+#p-pagetools li {
+	margin-left: 1.5em;
+
+	&#ca-languages {
+		margin-left: 1em;
+	}
+}
+
+#page-header-links a {
+	.ca-icon();
+}
+#ca-edit a {
+	.background-image-svg('images/pencil-grey.svg', 'images/pencil-grey.png');
+}
+#ca-history a {
+	.background-image-svg('images/clock-grey.svg', 'images/clock-grey.png');
+}
+#ca-talk a {
+	.background-image-svg('images/talk-grey.svg', 'images/talk-grey.png');
+}
+#t-contributions a {
+	.background-image-svg('images/puzzle-grey.svg', 'images/puzzle-grey.png');
+}
+#ca-addsection a {
+	.background-image-svg('images/plus-grey.svg', 'images/plus-grey.png');
+}
+*[id^='ca-nstab-'] a {
+	.background-image-svg('images/page-grey.svg', 'images/page-grey.png');
+}
+
+#ca-more,
+#ca-languages {
+	&:after {
+		margin-left: -.35em;
+	}
+
+	span {
+		.ca-icon();
+	}
+}
+#ca-more span {
+	.background-image-svg('images/gear-grey.svg', 'images/gear-grey.png');
+}
+#ca-languages span {
+	.background-image-svg('images/languages-grey.svg', 'images/languages-grey.png');
+}
+
+/* Full-width thumbnails */
+
+div.thumb {
+	float: none;
+}
+.thumb {
+	margin: 1em auto;
+}
+.tright {
+	margin-left: 0;
+	padding-left: 0;
+}
+.tleft {
+	margin-right: 0;
+	padding-right: 0;
+}
+.thumbinner {
+	padding: 1em 1.5em;
+	width: 100% !important;
+	box-sizing: border-box;
+}
+.thumbimage {
+	display: block;
+	margin: 0 auto .5em;
+}
+
+#mw-content {
+	overflow: auto;
+	border: none;
+}
+#mw-content-block {
+	background: @background;
+}
+
+/* Keep images from overflowing */
+
+#mw-content a > img {
+	height: auto !important;
+	max-width: 100% !important;
+}
+
+/* Table of contents */
+
+#toc, .toc, .mw-warning {
+	width: 100%;
+	box-sizing: border-box;
+}
+
+/* Misc */
+
+.nomobile {
+	display: none;
+}
--- a/resources/variables.less
+++ b/resources/variables.less
@ -1,5 +1,7 @@
@import "mediawiki.mixins";

+// Colours
+
@text: #013;
@background: #fff;
@background2: #f3f3f3;
@ -33,6 +35,7 @@


 // Flair
+
 // Fonts are chosen for consistent metrics, not necessarily overall prettiness.
 // This will NEED fixes for different languages.
@fonts-secondary: 'Linux Libertine', 'Times New Roman', serif;
@ -40,8 +43,21 @@
@border: .2em;
@radius: .2em;

+@font-size: .95em;
+
+// Widths
+
+@column-left-size: 14em;
+@column-right-size: 16em;
+
+@content-width: 100em;
+@content-padding: 2em;
+
+@fixed-header-height: 3.125em;
+
+

-/* Misc */
+// Miscellaneous functions

 // To hide objects, but keep them accessible for screen-readers
 .hidden() {
@ -53,11 +69,11 @@
 .icon() {
 	text-indent: -99999px;
 	border: none;
-	background: transparent;
+	background-color: transparent;
 	background-repeat: no-repeat;
 }

-.box {
+.box() {
 	background: @background3;
 	border: solid @grey-bright;
 	border-width: 1px 1px @border;
@ -65,3 +81,115 @@
 	box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.02);
 	overflow: auto;
 }
+
+// Icons for the page actions menus
+.ca-icon() {
+	.icon;
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	box-sizing: border-box;
+	margin-bottom: -.5em;
+}
+
+// Navigation column blocks
+
+.nav-block() {
+	.box();
+	padding: 1.5em 1.5em 0;
+	margin: 1em 0;
+	line-height: 1.1;
+
+	ul,
+	li {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+	h3 {
+		font-weight: normal;
+		font-size: 1em;
+		margin: .25em 0 .75em 0;
+		padding-bottom: .15em;
+		border-bottom: solid 2px @grey;
+	}
+	ul {
+		margin-bottom: 2em;
+	}
+	li {
+		margin: 0 0 .35em;
+	}
+}
+
+.column-right() {
+	width: @column-right-size;
+	float: right;
+	clear: right;
+	padding-left: 1em;
+	box-sizing: border-box;
+
+	.sidebar-chunk {
+		.nav-block();
+	}
+}
+.column-left() {
+	width: @column-left-size;
+	float: left;
+	clear: left;
+	padding-right: 1em;
+	box-sizing: border-box;
+
+	.sidebar-chunk {
+		.nav-block();
+	}
+}
+
+// Dropdowns
+.dropdown-header() {
+	cursor: pointer;
+	margin-bottom: -1em;
+	padding-bottom: 1em;
+
+	&:after {
+		display: inline-block;
+		content: '';
+		width: 22px;
+		height: 12px;
+		.background-image-svg('images/arrow-down-grey.svg', 'images/arrow-down-grey.png');
+		background-position: center center;
+		background-repeat: no-repeat;
+	}
+}
+.dropdown-menu( @direction: right ) {
+	.nav-block();
+	background: @background;
+	box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05);
+	position: absolute;
+	padding: 20px 2em 0;
+	margin: 0;
+	min-width: 9.153em;
+	top: 2.95em;
+	@{direction}: -1em;
+	overflow: visible;
+	z-index: 1;
+}
+
+// Categories on bottom of page
+
+.categories-bottom() {
+	#catlinks-sidebar {
+		display: none;
+	}
+
+	#catlinks {
+		margin: 0 @content-padding;
+		padding: 1.5em 0 .5em;
+
+		li {
+			border-left: none;
+		}
+		div {
+			margin: 0 0 .35em;
+		}
+	}
+}
--- a/skin.json
+++ b/skin.json
@ -1,7 +1,7 @@
 {
 	"name": "Timeless",
-	"version": "0.3",
-	"author": "Isarra",
+	"version": "0.6",
+	"author": "Isarra Yos",
 	"url": "https://www.mediawiki.org/wiki/Skin:Timeless",
 	"descriptionmsg": "timeless-desc",
 	"namemsg": "skinname-timeless",
@ -30,18 +30,40 @@
 					"media": "screen"
 				},
 				"resources/screen-desktop.less": {
-					"media": "screen and (min-width: 751px)"
+					"media": "screen and (min-width: 851px)"
+				},
+				"resources/screen-desktop-full.less": {
+					"media": "screen and (min-width: 1340px)"
+				},
+				"resources/screen-desktop-mid.less": {
+					"media": "screen and (min-width: 1100px) and (max-width: 1339px)"
+				},
+				"resources/screen-desktop-small.less": {
+					"media": "screen and (min-width: 851px) and (max-width: 1099px)"
 				},
 				"resources/screen-mobile.less": {
-					"media": "screen and (max-width: 750px)"
+					"media": "screen and (max-width: 850px)"
 				}
 			}
 		},
+		"skins.timeless.misc": {
+			"position": "top",
+			"styles": [
+				"resources/screen-misc.less"
+			]
+		},
 		"skins.timeless.js": {
 			"position": "bottom",
 			"scripts": [
 				"resources/main.js"
 			]
+		},
+		"skins.timeless.mobile": {
+			"position": "bottom",
+			"scripts": [
+				"resources/libraries/jquery.mobile.custom.js",
+				"resources/mobile.js"
+			]
 		}
 	},
 	"ResourceFileModulePaths": {