From 8200762f7416e28698e87d17b701d0919da0cd8b Mon Sep 17 00:00:00 2001
From: mossroy <mossroy@free.fr>
Date: Thu, 11 Jul 2013 22:40:27 +0200
Subject: [PATCH] Add a simple CSS to use "rem" sizes. Fixes #8 Prefix all the
 rules in the mediawiki CSS, so that they only apply inside the
 "articleContent" div Add back/forward buttons. Fixes #1

---
 css/app.css            |   57 +--
 css/mediawiki-main.css | 1091 ++++++++++++++++++++--------------------
 index.html             |  206 ++++----
 js/app.js              |    7 +-
 4 files changed, 669 insertions(+), 692 deletions(-)

diff --git a/css/app.css b/css/app.css
index c8721187..95d32b42 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1,50 +1,17 @@
-/* Colors and the rest of appearance properties are defined in this file.
-We've added a few sample properties to get you started */
-
-* {
-    padding: 0;
-    margin: 0;
-    -moz-box-sizing: border-box;
-}
+/* Main CSS of the application */
 
 body {
+    /* Reset base size */
+    font-size: 16px;
+
+    /* Set font size relative to base size */
+    font-size: 1.4rem;
+
+    /* Remove spacing to avoid losing borders around the screen*/
     margin: 0;
-    font-family: sans-serif;
-    line-height: 1.6;
-    background: #fefefe;
+} 
 
-}
-
-h1 {
-    background: #444545;
-    color: #fff;
-    padding: 0.75rem 0.5rem;
-    text-shadow: 2px 2px 1px #111;
-    font-weight: normal;
-    border-bottom: 1px solid #444;
-}
-
-#content {
-    border-top: 1px solid #993;
-    padding: 1rem 0.5rem;
-}
-
-p {
-    margin: 1rem 0;
-}
-
-button {
-    height: 3.8rem;
-    margin: 0 0 1rem;
-    padding: 0 1.5rem;
-    background: #fafafa;
-    border: 0.1rem solid #a6a6a6;
-    border-radius: 0.2rem;
-    font-size: 1.6rem;
-    line-height: 3.8rem;
-    color: #333;
-    text-align: center;
-    text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
-    text-decoration: none;
-    outline: none;
+input[type=text], textarea, select, input[type=button], input[type=file] {
+    /* Set font size in form elements too */
+    font-size: 1.3rem;
 }
\ No newline at end of file
diff --git a/css/mediawiki-main.css b/css/mediawiki-main.css
index add87e69..bd179ae9 100644
--- a/css/mediawiki-main.css
+++ b/css/mediawiki-main.css
@@ -9,28 +9,28 @@
 ** All you guys rock :)
 */
 
-.evopedianav {
+#articleContent .evopedianav {
     font-size: 150%;
     color: #002bb8;
 }
 
-.evopedianav:visited {
+#articleContent .evopedianav:visited {
     color: #002bb8;
 }
 
-iframe {
+#articleContent iframe {
     border: 0px;
 }
 
-.geo {
+#articleContent .geo {
     display:none;
 }
 
-#coordinates_3_ObenRechts {
+#articleContent #coordinates_3_ObenRechts {
     /*display:inline;*/
     display: none;
 }
-#coordinates {
+#articleContent #coordinates {
     /*display:inline;*/
     display: none;
     background:transparent none repeat scroll 0 0;
@@ -50,22 +50,22 @@ iframe {
     z-index:1;
 }
 
-#column-content {
+#articleContent #column-content {
 	width: 100%;
 	float: right;
 	margin: 0 0 .6em -12.2em;
 	padding: 0;
 }
-#content {
+#articleContent #content {
 	margin: 2.8em 0 0 12.2em;
 	padding: 0 1em 1em 1em;
 	position: relative;
 	z-index: 2;
 }
-#column-one {
+#articleContent #column-one {
 	padding-top: 160px;
 }
-#content {
+#articleContent #content {
 	background: white;
 	color: black;
 	border: 1px solid #aaa;
@@ -80,7 +80,7 @@ iframe {
 ** http://style.cleverchimp.com/font_size_intervals/altintervals.html
 */
 
-body {
+#articleContent body {
 	/*font: xx-small sans-serif;
 	background: #f9f9f9 url(/headbg.jpg) 0 0 no-repeat;*/
 	font: normal sans-serif;
@@ -93,66 +93,66 @@ body {
 }
 
 /* scale back up to a sane default */
-#globalWrapper {
+#articleContent #globalWrapper {
 	font-size: 127%;
 	width: 100%;
 	margin: 0;
 	padding: 0;
 }
-.visualClear {
+#articleContent .visualClear {
 	clear: both;
 }
 
 /* general styles */
 
-table {
+#articleContent table {
 	font-size: 100%;
 	color: black;
 	/* we don't want the bottom borders of <h2>s to be visible through
 	   floated tables */
 	background-color: white;
 }
-fieldset table {
+#articleContent fieldset table {
 	/* but keep table layouts in forms clean... */
 	background: none;
 }
-a {
+#articleContent a {
 	text-decoration: none;
 	color: #002bb8;
 	background: none;
 }
-a:visited {
+#articleContent a:visited {
 	color: #5a3696;
 }
-a:active {
+#articleContent a:active {
 	color: #faa700;
 }
-a:hover {
+#articleContent a:hover {
 	text-decoration: underline;
 }
-a.stub {
+#articleContent a.stub {
 	color: #772233;
 }
-a.new, #p-personal a.new {
+#articleContent a.new, #articleContent #p-personal a.new {
 	color: #ba0000;
 }
-a.new:visited, #p-personal a.new:visited {
+#articleContent a.new:visited, #articleContent #p-personal a.new:visited {
 	color: #a55858;
 }
 
-img {
+#articleContent img {
 	border: none;
 	vertical-align: middle;
 }
-p {
+#articleContent p {
 	margin: .4em 0 .5em 0;
 	line-height: 1.5em;
 }
-p img {
+#articleContent p img {
 	margin: 0;
 }
 
-hr {
+#articleContent hr {
 	height: 1px;
 	color: #aaa;
 	background-color: #aaa;
@@ -160,7 +160,7 @@ hr {
 	margin: .2em 0 .2em 0;
 }
 
-h1, h2, h3, h4, h5, h6 {
+#articleContent h1, #articleContent h2, #articleContent h3, #articleContent h4, #articleContent h5, #articleContent h6 {
 	color: black;
 	background: none;
 	font-weight: normal;
@@ -169,95 +169,95 @@ h1, h2, h3, h4, h5, h6 {
 	padding-bottom: .17em;
 	border-bottom: 1px solid #aaa;
 }
-h1 { font-size: 188%; }
+#articleContent h1 { font-size: 188%; }
 .editsection { display: none; }
-h1 .editsection { font-size: 53%; }
-h2 { font-size: 150%; }
-h2 .editsection { font-size: 67%; }
-h3, h4, h5, h6 {
+#articleContent h1 .editsection { font-size: 53%; }
+#articleContent h2 { font-size: 150%; }
+#articleContent h2 .editsection { font-size: 67%; }
+#articleContent h3, #articleContent h4, #articleContent h5, #articleContent h6 {
 	border-bottom: none;
 	font-weight: bold;
 }
-h3 { font-size: 132%; }
-h3 .editsection { font-size: 76%; font-weight: normal; }
-h4 { font-size: 116%; }
-h4 .editsection { font-size: 86%; font-weight: normal; }
-h5 { font-size: 100%; }
-h5 .editsection { font-weight: normal; }
-h6 { font-size: 80%;  }
-h6 .editsection { font-size: 125%; font-weight: normal; }
+#articleContent h3 { font-size: 132%; }
+#articleContent h3 .editsection { font-size: 76%; font-weight: normal; }
+#articleContent h4 { font-size: 116%; }
+#articleContent h4 .editsection { font-size: 86%; font-weight: normal; }
+#articleContent h5 { font-size: 100%; }
+#articleContent h5 .editsection { font-weight: normal; }
+#articleContent h6 { font-size: 80%;  }
+#articleContent h6 .editsection { font-size: 125%; font-weight: normal; }
 
-ul {
+#articleContent ul {
 	line-height: 1.5em;
 	list-style-type: square;
 	margin: .3em 0 0 1.5em;
 	padding: 0;
 /*	list-style-image: url(/bullet.gif);*/
 }
-ol {
+#articleContent ol {
 	line-height: 1.5em;
 	margin: .3em 0 0 3.2em;
 	padding: 0;
 	list-style-image: none;
 }
-li {
+#articleContent li {
 	margin-bottom: .1em;
 }
-dt {
+#articleContent dt {
 	font-weight: bold;
 	margin-bottom: .1em;
 }
-dl {
+#articleContent dl {
 	margin-top: .2em;
 	margin-bottom: .5em;
 }
-dd {
+#articleContent dd {
 	line-height: 1.5em;
 	margin-left: 2em;
 	margin-bottom: .1em;
 }
 
-fieldset {
+#articleContent fieldset {
 	border: 1px solid #2f6fab;
 	margin: 1em 0 1em 0;
 	padding: 0 1em 1em;
 	line-height: 1.5em;
 }
-fieldset.nested {
+#articleContent fieldset.nested {
 	margin: 0 0 0.5em 0;
 	padding: 0 0.5em 0.5em;
 }
-legend {
+#articleContent legend {
 	padding: .5em;
 	font-size: 95%;
 }
-form {
+#articleContent form {
 	border: none;
 	margin: 0;
 }
 
-textarea {
+#articleContent textarea {
 	width: 100%;
 	padding: .1em;
 }
 
-input.historysubmit {
+#articleContent input.historysubmit {
 	padding: 0 .3em .3em .3em !important;
 	font-size: 94%;
 	cursor: pointer;
 	height: 1.7em !important;
 	margin-left: 1.6em;
 }
-select {
+#articleContent select {
 	vertical-align: top;
 }
-abbr, acronym, .explain {
+#articleContent abbr, #articleContent acronym, #articleContent .explain {
 	border-bottom: 1px dotted black;
 	color: black;
 	background: none;
 	cursor: help;
 }
-q {
+#articleContent q {
 	font-family: Times, "Times New Roman", serif;
 	font-style: italic;
 }
@@ -266,10 +266,10 @@ blockquote {
 	font-family: Times, "Times New Roman", serif;
 	font-style: italic;
 }*/
-code {
+#articleContent code {
 	background-color: #f9f9f9;
 }
-pre {
+#articleContent pre {
 	padding: 1em;
 	border: 1px dashed #2f6fab;
 	color: black;
@@ -281,32 +281,32 @@ pre {
 ** the main content area
 */
 
-#siteSub {
+#articleContent #siteSub {
 	display: none;
 }
-#jump-to-nav {
+#articleContent #jump-to-nav {
 	display: none;
 }
 
-#contentSub, #contentSub2 {
+#articleContent #contentSub, #articleContent #contentSub2 {
 	font-size: 84%;
 	line-height: 1.2em;
 	margin: 0 0 1.4em 1em;
 	color: #7d7d7d;
 	width: auto;
 }
-span.subpages {
+#articleContent span.subpages {
 	display: block;
 }
 
 /* Some space under the headers in the content area */
-#bodyContent h1, #bodyContent h2 {
+#articleContent #bodyContent h1, #articleContent #bodyContent h2 {
 	margin-bottom: .6em;
 }
-#bodyContent h3, #bodyContent h4, #bodyContent h5 {
+#articleContent #bodyContent h3, #articleContent #bodyContent h4, #articleContent #bodyContent h5 {
 	margin-bottom: .3em;
 }
-.firstHeading {
+#articleContent .firstHeading {
 	margin-bottom: .1em;
 	/* These two rules hack around bug 2013 (fix for more limited bug 11325).
 	   When bug 2013 is fixed properly, they should be removed. */
@@ -315,7 +315,7 @@ span.subpages {
 }
 
 /* user notification thing */
-.usermessage {
+#articleContent .usermessage {
 	background-color: #ffce7b;
 	border: 1px solid #ffa500;
 	color: black;
@@ -324,16 +324,16 @@ span.subpages {
 	padding: .5em 1em;
 	vertical-align: middle;
 }
-#siteNotice {
+#articleContent #siteNotice {
 	text-align: center;
 	font-size: 95%;
 	padding: 0 .9em;
 }
-#siteNotice p {
+#articleContent #siteNotice p {
 	margin: 0;
 	padding: 0;
 }
-.success {
+#articleContent .success {
 	color: green;
 	font-size: larger;
 }
@@ -341,7 +341,7 @@ span.subpages {
 	color: red;
 	font-size: larger;
 }*/
-.errorbox, .successbox {
+#articleContent .errorbox, #articleContent .successbox {
 	font-size: larger;
 	border: 2px solid;
 	padding: .5em 1em;
@@ -349,15 +349,15 @@ span.subpages {
 	margin-bottom: 2em;
 	color: #000;
 }
-.errorbox {
+#articleContent .errorbox {
 	border-color: red;
 	background-color: #fff2f2;
 }
-.successbox {
+#articleContent .successbox {
 	border-color: green;
 	background-color: #dfd;
 }
-.errorbox h2, .successbox h2 {
+#articleContent .errorbox h2, #articleContent .successbox h2 {
 	font-size: 1em;
 	font-weight: bold;
 	display: inline;
@@ -365,7 +365,7 @@ span.subpages {
 	border: none;
 }
 
-.catlinks {
+#articleContent .catlinks {
 	border: 1px solid #aaa;
 	background-color: #f9f9f9;
 	padding: 5px;
@@ -374,14 +374,14 @@ span.subpages {
 }
 /* currently unused, intended to be used by a metadata box
 in the bottom-right corner of the content area */
-.documentDescription {
+#articleContent .documentDescription {
 	/* The summary text describing the document */
 	font-weight: bold;
 	display: block;
 	margin: 1em 0;
 	line-height: 1.5em;
 }
-.documentByLine {
+#articleContent .documentByLine {
 	text-align: right;
 	font-size: 90%;
 	clear: both;
@@ -390,19 +390,19 @@ in the bottom-right corner of the content area */
 }
 
 /* emulate center */
-.center {
+#articleContent .center {
 	width: 100%;
 	text-align: center;
 }
-*.center * {
+#articleContent *.center * {
 	margin-left: auto;
 	margin-right: auto;
 }
 /* small for tables and similar */
-.small, .small * {
+#articleContent .small, #articleContent .small * {
 	font-size: 94%;
 }
-table.small {
+#articleContent table.small {
 	font-size: 100%;
 }
 
@@ -410,53 +410,53 @@ table.small {
 ** content styles
 */
 
-#toc,
-.toc,
-.mw-warning {
+#articleContent #toc,
+#articleContent .toc,
+#articleContent .mw-warning {
 	border: 1px solid #aaa;
 	background-color: #f9f9f9;
 	padding: 5px;
 	font-size: 95%;
 }
-#toc h2,
-.toc h2 {
+#articleContent #toc h2,
+#articleContent .toc h2 {
 	display: inline;
 	border: none;
 	padding: 0;
 	font-size: 100%;
 	font-weight: bold;
 }
-#toc #toctitle,
-.toc #toctitle,
-#toc .toctitle,
-.toc .toctitle {
+#articleContent #toc #toctitle,
+#articleContent .toc #toctitle,
+#articleContent #toc .toctitle,
+#articleContent .toc .toctitle {
 	text-align: center;
 }
-#toc ul,
-.toc ul {
+#articleContent #toc ul,
+#articleContent .toc ul {
 	list-style-type: none;
 	list-style-image: none;
 	margin-left: 0;
 	padding-left: 0;
 	text-align: left;
 }
-#toc ul ul,
-.toc ul ul {
+#articleContent #toc ul ul,
+#articleContent .toc ul ul {
 	margin: 0 0 0 2em;
 }
-#toc .toctoggle,
-.toc .toctoggle {
+#articleContent #toc .toctoggle,
+#articleContent .toc .toctoggle {
 	font-size: 94%;
 }
 
-.mw-warning {
+#articleContent .mw-warning {
 	margin-left: 50px;
 	margin-right: 50px;
 	text-align: center;
 }
 
 /* images */
-div.floatright, table.floatright {
+#articleContent div.floatright, #articleContent table.floatright {
 	clear: right;
 	float: right;
 	position: relative;
@@ -467,8 +467,8 @@ div.floatright, table.floatright {
 	border-width: .5em 0 .8em 1.4em;
 */
 }
-div.floatright p { font-style: italic; }
-div.floatleft, table.floatleft {
+#articleContent div.floatright p { font-style: italic; }
+#articleContent div.floatleft, #articleContent table.floatleft {
 	float: left;
 	clear: left;
 	position: relative;
@@ -480,15 +480,15 @@ div.floatleft, table.floatleft {
 	border-width: .5em 1.4em .8em 0;
 */
 }
-div.floatleft p { font-style: italic; }
+#articleContent div.floatleft p { font-style: italic; }
 /* thumbnails */
-div.thumb {
+#articleContent div.thumb {
 	margin-bottom: .5em;
 	border-style: solid;
 	border-color: white;
 	width: auto;
 }
-div.thumbinner {
+#articleContent div.thumbinner {
 	border: 1px solid #ccc;
 	padding: 3px !important;
 	background-color: #f9f9f9;
@@ -496,41 +496,41 @@ div.thumbinner {
 	text-align: center;
 	overflow: hidden;
 }
-html .thumbimage {
+#articleContent html .thumbimage {
 	border: 1px solid #ccc;
 }
-html .thumbcaption {
+#articleContent html .thumbcaption {
 	border: none;
 	text-align: left;
 	line-height: 1.4em;
 	padding: 3px !important;
 	font-size: 94%;
 }
-div.magnify {
+#articleContent div.magnify {
 	float: right;
 	border: none !important;
 	background: none !important;
 }
-div.magnify a, div.magnify img {
+#articleContent div.magnify a, #articleContent div.magnify img {
 	display: block;
 	border: none !important;
 	background: none !important;
 }
-div.tright {
+#articleContent div.tright {
 	clear: right;
 	float: right;
 	border-width: .5em 0 .8em 1.4em;
 }
-div.tleft {
+#articleContent div.tleft {
 	float: left;
 	clear: left;
 	margin-right: .5em;
 	border-width: .5em 1.4em .8em 0;
 }
-img.thumbborder {
+#articleContent img.thumbborder {
 	border: 1px solid #dddddd;
 }
-.hiddenStructure {
+#articleContent .hiddenStructure {
 	display: none;
 }
 
@@ -543,20 +543,20 @@ img.thumbborder {
 ** User styles
 */
 /* table standards */
-table.rimage {
+#articleContent table.rimage {
 	float: right;
 	position: relative;
 	margin-left: 1em;
 	margin-bottom: 1em;
 	text-align: center;
 }
-.toccolours {
+#articleContent .toccolours {
 	border: 1px solid #aaa;
 	background-color: #f9f9f9;
 	padding: 5px;
 	font-size: 95%;
 }
-div.townBox {
+#articleContent div.townBox {
 	position: relative;
 	float: right;
 	background: white;
@@ -567,16 +567,16 @@ div.townBox {
 	overflow: hidden;
 	clear: right;
 }
-div.townBox dl {
+#articleContent div.townBox dl {
 	padding: 0;
 	margin: 0 0 .3em;
 	font-size: 96%;
 }
-div.townBox dl dt {
+#articleContent div.townBox dl dt {
 	background: none;
 	margin: .4em 0 0;
 }
-div.townBox dl dd {
+#articleContent div.townBox dl dd {
 	margin: .1em 0 0 1.1em;
 	background-color: #f3f3f3;
 }
@@ -584,7 +584,7 @@ div.townBox dl dd {
 /*
 ** edit views etc
 */
-.special li {
+#articleContent .special li {
 	line-height: 1.4em;
 	margin: 0;
 	padding: 0;
@@ -594,75 +594,75 @@ div.townBox dl dd {
 ** keep the whitespace in front of the ^=, hides rule from konqueror
 ** this is css3, the validator doesn't like it when validating as css2
 */
-#bodyContent a.external,
-#bodyContent a[href ^="gopher://"] {
+#articleContent #bodyContent a.external,
+#articleContent #bodyContent a[href ^="gopher://"] {
 	/*background: url(external.png) center right no-repeat;*/
 	padding-right: 13px;
 }
-#bodyContent a[href ^="https://"],
-.link-https {
+#articleContent #bodyContent a[href ^="https://"],
+#articleContent .link-https {
 /*	background: url(lock_icon.gif) center right no-repeat;*/
 	padding-right: 16px;
 }
-#bodyContent a[href ^="mailto:"],
-.link-mailto {
+#articleContent #bodyContent a[href ^="mailto:"],
+#articleContent .link-mailto {
 /*	background: url(mail_icon.gif) center right no-repeat;*/
 	padding-right: 18px;
 }
-#bodyContent a[href ^="news://"] {
+#articleContent #bodyContent a[href ^="news://"] {
 /*	background: url(news_icon.png) center right no-repeat;*/
 	padding-right: 18px;
 }
-#bodyContent a[href ^="ftp://"],
-.link-ftp {
+#articleContent #bodyContent a[href ^="ftp://"],
+#articleContent .link-ftp {
 /*	background: url(file_icon.gif) center right no-repeat;*/
 	padding-right: 18px;
 }
-#bodyContent a[href ^="irc://"],
-#bodyContent a.extiw[href ^="irc://"],
-.link-irc {
+#articleContent #bodyContent a[href ^="irc://"],
+#articleContent #bodyContent a.extiw[href ^="irc://"],
+#articleContent .link-irc {
 /*	background: url(discussionitem_icon.gif) center right no-repeat;*/
 	padding-right: 18px;
 }
-#bodyContent a.external[href $=".ogg"], #bodyContent a.external[href $=".OGG"],
-#bodyContent a.external[href $=".mid"], #bodyContent a.external[href $=".MID"],
-#bodyContent a.external[href $=".midi"], #bodyContent a.external[href $=".MIDI"],
-#bodyContent a.external[href $=".mp3"], #bodyContent a.external[href $=".MP3"],
-#bodyContent a.external[href $=".wav"], #bodyContent a.external[href $=".WAV"],
-#bodyContent a.external[href $=".wma"], #bodyContent a.external[href $=".WMA"],
-.link-audio {
+#articleContent #bodyContent a.external[href $=".ogg"], #articleContent #bodyContent a.external[href $=".OGG"],
+#articleContent #bodyContent a.external[href $=".mid"], #articleContent #bodyContent a.external[href $=".MID"],
+#articleContent #bodyContent a.external[href $=".midi"], #articleContent #bodyContent a.external[href $=".MIDI"],
+#articleContent #bodyContent a.external[href $=".mp3"], #articleContent #bodyContent a.external[href $=".MP3"],
+#articleContent #bodyContent a.external[href $=".wav"], #articleContent #bodyContent a.external[href $=".WAV"],
+#articleContent #bodyContent a.external[href $=".wma"], #articleContent #bodyContent a.external[href $=".WMA"],
+#articleContent .link-audio {
 /*	background: url("audio.png") center right no-repeat;*/
 	padding-right: 13px;
 }
-#bodyContent a.external[href $=".ogm"], #bodyContent a.external[href $=".OGM"],
-#bodyContent a.external[href $=".avi"], #bodyContent a.external[href $=".AVI"],
-#bodyContent a.external[href $=".mpeg"], #bodyContent a.external[href $=".MPEG"],
-#bodyContent a.external[href $=".mpg"], #bodyContent a.external[href $=".MPG"],
-.link-video {
+#articleContent #bodyContent a.external[href $=".ogm"], #articleContent #bodyContent a.external[href $=".OGM"],
+#articleContent #bodyContent a.external[href $=".avi"], #articleContent #bodyContent a.external[href $=".AVI"],
+#articleContent #bodyContent a.external[href $=".mpeg"], #articleContent #bodyContent a.external[href $=".MPEG"],
+#articleContent #bodyContent a.external[href $=".mpg"], #articleContent #bodyContent a.external[href $=".MPG"],
+#articleContent .link-video {
 /*	background: url("video.png") center right no-repeat;*/
 	padding-right: 13px;
 }
-#bodyContent a.external[href $=".pdf"], #bodyContent a.external[href $=".PDF"],
-#bodyContent a.external[href *=".pdf#"], #bodyContent a.external[href *=".PDF#"],
-#bodyContent a.external[href *=".pdf?"], #bodyContent a.external[href *=".PDF?"],
-.link-document {
+#articleContent #bodyContent a.external[href $=".pdf"], #articleContent #bodyContent a.external[href $=".PDF"],
+#articleContent #bodyContent a.external[href *=".pdf#"], #articleContent #bodyContent a.external[href *=".PDF#"],
+#articleContent #bodyContent a.external[href *=".pdf?"], #articleContent #bodyContent a.external[href *=".PDF?"],
+#articleContent .link-document {
 /*	background: url("document.png") center right no-repeat;*/
 	padding-right: 12px;
 }
 
 /* disable interwiki styling */
-#bodyContent a.extiw,
-#bodyContent a.extiw:active {
+#articleContent #bodyContent a.extiw,
+#articleContent #bodyContent a.extiw:active {
 	color: #36b;
 	background: none;
 	padding: 0;
 }
-#bodyContent a.external {
+#articleContent #bodyContent a.external {
 	color: #36b;
 }
 /* this can be used in the content area to switch off
 special external link styling */
-#bodyContent .plainlinks a {
+#articleContent #bodyContent .plainlinks a {
 	background: none !important;
 	padding: 0 !important;
 }
@@ -673,7 +673,7 @@ special external link styling */
 /*
 ** general portlet styles (elements in the quickbar)
 */
-.portlet {
+#articleContent .portlet {
 	border: none;
 	margin: 0 0 .5em;
 	padding: 0;
@@ -681,12 +681,12 @@ special external link styling */
 	width: 11.6em;
 	overflow: hidden;
 }
-.portlet h4 {
+#articleContent .portlet h4 {
 	font-size: 95%;
 	font-weight: normal;
 	white-space: nowrap;
 }
-.portlet h5 {
+#articleContent .portlet h5 {
 	background: transparent;
 	padding: 0 1em 0 .5em;
 	display: inline;
@@ -696,7 +696,7 @@ special external link styling */
 	font-weight: normal;
 	white-space: nowrap;
 }
-.portlet h6 {
+#articleContent .portlet h6 {
 	background: #ffae2e;
 	border: 1px solid #2f6fab;
 	border-style: solid solid none solid;
@@ -708,7 +708,7 @@ special external link styling */
 	font-weight: normal;
 	white-space: nowrap;
 }
-.pBody {
+#articleContent .pBody {
 	font-size: 95%;
 	background-color: white;
 	color: black;
@@ -716,20 +716,20 @@ special external link styling */
 	border: 1px solid #aaa;
 	padding: 0 .8em .3em .5em;
 }
-.portlet h1,
-.portlet h2,
-.portlet h3,
-.portlet h4 {
+#articleContent .portlet h1,
+#articleContent .portlet h2,
+#articleContent .portlet h3,
+#articleContent .portlet h4 {
 	margin: 0;
 	padding: 0;
 }
-.portlet ul {
+#articleContent .portlet ul {
 	line-height: 1.5em;
 	list-style-type: square;
 /*	list-style-image: url(/bullet.gif);*/
 	font-size: 95%;
 }
-.portlet li {
+#articleContent .portlet li {
 	padding: 0;
 	margin: 0;
 }
@@ -738,7 +738,7 @@ special external link styling */
 ** Logo properties
 */
 
-#p-logo {
+#articleContent #p-logo {
 	top: 0;
 	left: 0;
 	position: absolute; /*needed to use z-index */
@@ -747,11 +747,11 @@ special external link styling */
 	width: 12em;
 	overflow: visible;
 }
-#p-logo h5 {
+#articleContent #p-logo h5 {
 	display: none;
 }
-#p-logo a,
-#p-logo a:hover {
+#articleContent #p-logo a,
+#articleContent #p-logo a:hover {
 	display: block;
 	height: 155px;
 	width: 12.2em;
@@ -763,25 +763,25 @@ special external link styling */
 /*
 ** Search portlet
 */
-#p-search {
+#articleContent #p-search {
 	position: relative;
 	z-index: 3;
 }
-input.searchButton {
+#articleContent input.searchButton {
 	margin-top: 1px;
 	font-size: 95%;
 }
-#searchGoButton {
+#articleContent #searchGoButton {
 	padding-left: .5em;
 	padding-right: .5em;
 	font-weight: bold;
 }
-#searchInput {
+#articleContent #searchInput {
 	width: 10.9em;
 	margin: 0;
 	font-size: 95%;
 }
-#p-search .pBody {
+#articleContent #p-search .pBody {
 	padding: .5em .4em .4em .4em;
 	text-align: center;
 }
@@ -789,13 +789,13 @@ input.searchButton {
 /*
 ** the personal toolbar
 */
-#p-personal {
+#articleContent #p-personal {
 	position: absolute;
 	left: 0;
 	top: 0;
 	z-index: 0;
 }
-#p-personal {
+#articleContent #p-personal {
 	width: 100%;
 	white-space: nowrap;
 	padding: 0;
@@ -805,11 +805,11 @@ input.searchButton {
 	overflow: visible;
 	line-height: 1.2em;
 }
-#p-personal h5 {
+#articleContent #p-personal h5 {
 	display: none;
 }
-#p-personal .portlet,
-#p-personal .pBody {
+#articleContent #p-personal .portlet,
+#articleContent #p-personal .pBody {
 	z-index: 0;
 	padding: 0;
 	margin: 0;
@@ -818,7 +818,7 @@ input.searchButton {
 	background: none;
 }
 /* this is the ul contained in the portlet */
-#p-personal ul {
+#articleContent #p-personal ul {
 	border: none;
 	line-height: 1.4em;
 	color: #2f6fab;
@@ -830,7 +830,7 @@ input.searchButton {
 	background: none;
 	cursor: default;
 }
-#p-personal li {
+#articleContent #p-personal li {
 	z-index: 0;
 	border: none;
 	padding: 0;
@@ -840,39 +840,39 @@ input.searchButton {
 	line-height: 1.2em;
 	background: none;
 }
-#p-personal li a {
+#articleContent #p-personal li a {
 	text-decoration: none;
 	color: #005896;
 	padding-bottom: .2em;
 	background: none;
 }
-#p-personal li a:hover {
+#articleContent #p-personal li a:hover {
 	background-color: white;
 	padding-bottom: .2em;
 	text-decoration: none;
 }
-#p-personal li.active a:hover {
+#articleContent #p-personal li.active a:hover {
 	background-color: transparent;
 }
 /* the icon in front of the user name, single quotes
 in bg url to hide it from iemac */
-li#pt-userpage,
-li#pt-anonuserpage,
-li#pt-login {
+#articleContent li#pt-userpage,
+#articleContent li#pt-anonuserpage,
+#articleContent li#pt-login {
 /*	background: url(user.gif) top left no-repeat;*/
 	padding-left: 20px;
 	text-transform: none;
 }
-#p-personal ul {
+#articleContent #p-personal ul {
 	text-transform: lowercase;
 }
-#p-personal li.active {
+#articleContent #p-personal li.active {
 	font-weight: bold;
 }
 /*
 ** the page-related actions- page/talk, edit etc
 */
-#p-cactions {
+#articleContent #p-cactions {
 	position: absolute;
 	top: 1.3em;
 	left: 11.5em;
@@ -887,10 +887,10 @@ li#pt-login {
 	list-style: none;
 	font-size: 95%;
 }
-#p-cactions ul {
+#articleContent #p-cactions ul {
 	list-style: none;
 }
-#p-cactions li {
+#articleContent #p-cactions li {
 	display: inline;
 	border: 1px solid #aaa;
 	border-bottom: none;
@@ -899,12 +899,12 @@ li#pt-login {
 	overflow: visible;
 	background: white;
 }
-#p-cactions li.selected {
+#articleContent #p-cactions li.selected {
 	border-color: #fabd23;
 	padding: 0 0 .2em 0;
 	font-weight: bold;
 }
-#p-cactions li a {
+#articleContent #p-cactions li a {
 	background-color: #fbfbfb;
 	color: #002bb8;
 	border: none;
@@ -914,40 +914,40 @@ li#pt-login {
 	margin: 0;
 	text-decoration: none;
 }
-#p-cactions li.selected a {
+#articleContent #p-cactions li.selected a {
 	z-index: 3;
 	padding: 0 1em .2em!important;
 	background-color: white;
 }
-#p-cactions .new a {
+#articleContent #p-cactions .new a {
 	color: #ba0000;
 }
-#p-cactions li a:hover {
+#articleContent #p-cactions li a:hover {
 	z-index: 3;
 	text-decoration: none;
 	background-color: white;
 }
-#p-cactions h5 {
+#articleContent #p-cactions h5 {
 	display: none;
 }
-#p-cactions li.istalk {
+#articleContent #p-cactions li.istalk {
 	margin-right: 0;
 }
-#p-cactions li.istalk a {
+#articleContent #p-cactions li.istalk a {
 	padding-right: .5em;
 }
-#p-cactions #ca-addsection a {
+#articleContent #p-cactions #ca-addsection a {
 	padding-left: .4em;
 	padding-right: .4em;
 }
 /* offsets to distinguish the tab groups */
-li#ca-talk {
+#articleContent li#ca-talk {
 	margin-right: 1.6em;
 }
-li#ca-watch, li#ca-unwatch, li#ca-varlang-0, li#ca-print {
+#articleContent li#ca-watch, #articleContent li#ca-unwatch, #articleContent li#ca-varlang-0, #articleContent li#ca-print {
 	margin-left: 1.6em;
 }
-#p-cactions .pBody {
+#articleContent #p-cactions .pBody {
 	font-size: 1em;
 	background-color: transparent;
 	color: inherit;
@@ -955,18 +955,18 @@ li#ca-watch, li#ca-unwatch, li#ca-varlang-0, li#ca-print {
 	border: 0;
 	padding: 0;
 }
-#p-cactions .hiddenStructure {
+#articleContent #p-cactions .hiddenStructure {
 	display: none;
 }
-#p-cactions li a {
+#articleContent #p-cactions li a {
 	text-transform: lowercase;
 }
 
 /*
 ** the remaining portlets
 */
-#p-tbx,
-#p-lang {
+#articleContent #p-tbx,
+#articleContent #p-lang {
 	position: relative;
 	z-index: 3;
 }
@@ -974,13 +974,13 @@ li#ca-watch, li#ca-unwatch, li#ca-varlang-0, li#ca-print {
 /* TODO: #t-iscite is only used by the Cite extension, come up with some
  * system which allows extensions to add to this file on the fly
  */
-#t-ispermalink, #t-iscite {
+#articleContent #t-ispermalink, #articleContent #t-iscite {
 	color: #999;
 }
 /*
 ** footer
 */
-#footer {
+#articleContent #footer {
 	background-color: white;
 	border-top: 1px solid #fabd23;
 	border-bottom: 1px solid #fabd23;
@@ -989,36 +989,36 @@ li#ca-watch, li#ca-unwatch, li#ca-varlang-0, li#ca-print {
 	text-align: center;
 	font-size: 90%;
 }
-#footer li {
+#articleContent #footer li {
 	display: inline;
 	margin: 0 1.3em;
 }
-#f-poweredbyico, #f-copyrightico {
+#articleContent #f-poweredbyico, #articleContent #f-copyrightico {
 	margin: 0 8px;
 	position: relative;
 	top: -2px; /* Bump it up just a tad */
 }
-#f-poweredbyico {
+#articleContent #f-poweredbyico {
 	float: right;
 	height: 1%;
 }
-#f-copyrightico {
+#articleContent #f-copyrightico {
 	float: left;
 	height: 1%;
 }
 
 /* js pref toc */
-#preftoc {
+#articleContent #preftoc {
 	margin: 0;
 	padding: 0;
 	width: 100%;
 	clear: both;
 }
-#preftoc li {
+#articleContent #preftoc li {
 	background-color: #f0f0f0;
 	color: #000;
 }
-#preftoc li {
+#articleContent #preftoc li {
 	margin: 1px -2px 1px 2px;
 	float: left;
 	padding: 2px 0 3px 0;
@@ -1031,7 +1031,7 @@ li#ca-watch, li#ca-unwatch, li#ca-varlang-0, li#ca-print {
 	list-style-image: none;
 	z-index: 3;
 }
-#preftoc li.selected {
+#articleContent #preftoc li.selected {
 	font-weight: bold;
 	background-color: #f9f9f9;
 	border: 1px solid #aaa;
@@ -1041,74 +1041,74 @@ li#ca-watch, li#ca-unwatch, li#ca-varlang-0, li#ca-print {
 	padding-top: 2px;
 	margin-right: -3px;
 }
-#preftoc > li.selected {
+#articleContent #preftoc > li.selected {
 	top: 2px;
 }
-#preftoc a,
-#preftoc a:active {
+#articleContent #preftoc a,
+#articleContent #preftoc a:active {
 	display: block;
 	color: #000;
 	padding: 0 .7em;
 	position: relative;
 	text-decoration: none;
 }
-#preftoc li.selected a {
+#articleContent #preftoc li.selected a {
 	cursor: default;
 	text-decoration: none;
 }
-#prefcontrol {
+#articleContent #prefcontrol {
 	padding-top: 2em;
 	clear: both;
 }
-#preferences {
+#articleContent #preferences {
 	margin: 0;
 	border: 1px solid #aaa;
 	clear: both;
 	padding: 1.5em;
 	background-color: #F9F9F9;
 }
-.prefsection {
+#articleContent .prefsection {
 	border: none;
 	padding: 0;
 	margin: 0;
 }
-.prefsection fieldset {
+#articleContent .prefsection fieldset {
 	border: 1px solid #aaa;
 	float: left;
 	margin-right: 2em;
 }
-.prefsection legend {
+#articleContent .prefsection legend {
 	font-weight: bold;   
 }
-.prefsection table, .prefsection legend {
+#articleContent .prefsection table, #articleContent .prefsection legend {
 	background-color: #F9F9F9;
 }
-.mainLegend {
+#articleContent .mainLegend {
 	display: none;
 }
-div.prefsectiontip {
+#articleContent div.prefsectiontip {
 	font-size: x-small;
 	padding: .2em 2em;
 	color: #666;
 }
-.btnSavePrefs {
+#articleContent .btnSavePrefs {
 	font-weight: bold;
 	padding-left: .3em;
 	padding-right: .3em;
 }
 
-.preferences-login {
+#articleContent .preferences-login {
 	clear: both;
 	margin-bottom: 1.5em;
 }
 
-.prefcache {
+#articleContent .prefcache {
 	font-size: 90%;
 	margin-top: 2em;
 }
 
-div#userloginForm form,
-div#userlogin form#userlogin2 {
+#articleContent div#userloginForm form,
+#articleContent div#userlogin form#userlogin2 {
 	margin: 0 3em 1em 0;
 	border: 1px solid #aaa;
 	clear: both;
@@ -1116,47 +1116,47 @@ div#userlogin form#userlogin2 {
 	background-color: #f9f9f9;
 	float: left;
 }
-.rtl div#userloginForm form,
-.rtl div#userlogin form#userlogin2 {
+#articleContent .rtl div#userloginForm form,
+#articleContent .rtl div#userlogin form#userlogin2 {
 	float: right;
 }
 
-div#userloginForm table,
-div#userlogin form#userlogin2 table {
+#articleContent div#userloginForm table,
+#articleContent div#userlogin form#userlogin2 table {
 	background-color: #f9f9f9;
 }
 
-div#userloginForm h2,
-div#userlogin form#userlogin2 h2 {
+#articleContent div#userloginForm h2,
+#articleContent div#userlogin form#userlogin2 h2 {
 	padding-top: 0;
 }
 
-div#userlogin .captcha,
-div#userloginForm .captcha {
+#articleContent div#userlogin .captcha,
+#articleContent div#userloginForm .captcha {
 	border: 1px solid #bbb;
 	padding: 1.5em 2em;
 	background-color: white;
 }
 
-#loginend, #signupend {
+#articleContent #loginend, #articleContent #signupend {
 	clear: both;
 }
 
-#userloginprompt, #languagelinks {
+#articleContent #userloginprompt, #articleContent #languagelinks {
 	font-size: 85%;
 }
 
-#login-sectiontip {
+#articleContent #login-sectiontip {
 	font-size: 85%;
 	line-height: 1.2;
 	padding-top: 2em;
 }
 
-#userlogin .loginText, #userlogin .loginPassword {
+#articleContent #userlogin .loginText, #articleContent #userlogin .loginPassword {
 	width: 12em;
 }
 
-#userloginlink a, #wpLoginattempt, #wpCreateaccount {
+#articleContent #userloginlink a, #articleContent #wpLoginattempt, #articleContent #wpCreateaccount {
 	font-weight: bold;
 }
 
@@ -1166,17 +1166,17 @@ div#userloginForm .captcha {
 ** @import("IEMacFixes.css");
 */
 /* tabs: border on the a, not the div */
-* > html #p-cactions li { border: none; }
-* > html #p-cactions li a {
+#articleContent * > html #p-cactions li { border: none; }
+#articleContent * > html #p-cactions li a {
 	border: 1px solid #aaa;
 	border-bottom: none;
 }
-* > html #p-cactions li.selected a { border-color: #fabd23; }
+#articleContent * > html #p-cactions li.selected a { border-color: #fabd23; }
 /* footer icons need a fixed width */
-* > html #f-poweredbyico,
-* > html #f-copyrightico { width: 88px; }
-* > html #bodyContent,
-* > html #bodyContent pre {
+#articleContent * > html #f-poweredbyico,
+#articleContent * > html #f-copyrightico { width: 88px; }
+#articleContent * > html #bodyContent,
+#articleContent * > html #bodyContent pre {
 	overflow-x: auto;
 	width: 100%;
 	padding-bottom: 25px;
@@ -1184,110 +1184,110 @@ div#userloginForm .captcha {
 
 /* more IE fixes */
 /* float/negative margin brokenness */
-* html #footer {margin-top: 0;}
-* html #column-content {
+#articleContent * html #footer {margin-top: 0;}
+#articleContent * html #column-content {
 	display: inline;
 	margin-bottom: 0;
 }
-* html div.editsection { font-size: smaller; }
-#pagehistory li.selected { position: relative; }
+#articleContent * html div.editsection { font-size: smaller; }
+#articleContent #pagehistory li.selected { position: relative; }
 
 /* Mac IE 5.0 fix; floated content turns invisible */
-* > html #column-content {
+#articleContent * > html #column-content {
 	float: none;
 }
-* > html #column-one {
+#articleContent * > html #column-one {
 	position: absolute;
 	left: 0;
 	top: 0;
 }
-* > html #footer {
+#articleContent * > html #footer {
 	margin-left: 13.2em;
 }
-.redirectText {
+#articleContent .redirectText {
 	font-size: 150%;
 	margin: 5px;
 }
 
-.printfooter {
+#articleContent .printfooter {
 	display: none;
 }
 
-.not-patrolled {
+#articleContent .not-patrolled {
 	background-color: #ffa;
 }
-div.patrollink {
+#articleContent div.patrollink {
 	clear: both;
 	font-size: 75%;
 	text-align: right;
 }
-span.newpage, span.minor, span.bot {
+#articleContent span.newpage, #articleContent span.minor, #articleContent span.bot {
 	font-weight: bold;
 }
-span.unpatrolled {
+#articleContent span.unpatrolled {
 	font-weight: bold;
 	color: red;
 }
 
-.sharedUploadNotice {
+#articleContent .sharedUploadNotice {
 	font-style: italic;
 }
 
-span.updatedmarker {
+#articleContent span.updatedmarker {
 	color: black;
 	background-color: #0f0;
 }
 
-table.gallery {
+#articleContent table.gallery {
 	border: 1px solid #ccc;
 	margin: 2px;
 	padding: 2px;
 	background-color: white;
 }
 
-table.gallery tr {
+#articleContent table.gallery tr {
 	vertical-align: top;
 }
 
-table.gallery td {
+#articleContent table.gallery td {
 	vertical-align: top;
 	background-color: #f9f9f9;
 	border: solid 2px white;
 }
 /* Keep this temporarily so that cached pages will display right */
-table.gallery td.galleryheader {
+#articleContent table.gallery td.galleryheader {
     text-align: center;
 	font-weight: bold;
 }
-table.gallery caption {
+#articleContent table.gallery caption {
 	font-weight: bold;
 }
 
-div.gallerybox {
+#articleContent div.gallerybox {
 	margin: 2px;
 }
 
-div.gallerybox div.thumb {
+#articleContent div.gallerybox div.thumb {
 	text-align: center;
 	border: 1px solid #ccc;
 	margin: 2px;
 }
 
-div.gallerytext {
+#articleContent div.gallerytext {
 	overflow: hidden;
 	font-size: 94%;
 	padding: 2px 4px;
 }
 
-span.comment {
+#articleContent span.comment {
 	font-style: italic;
 }
 
-span.changedby {
+#articleContent span.changedby {
 	font-size: 95%;
 }
 
-.previewnote {
+#articleContent .previewnote {
 	text-indent: 3em;
 	color: #c00;
 	border-bottom: 1px solid #aaa;
@@ -1295,12 +1295,12 @@ span.changedby {
 	margin-bottom: 1em;
 }
 
-.previewnote p {
+#articleContent .previewnote p {
 	margin: 0;
 	padding: 0;
 }
 
-.editExternally {
+#articleContent .editExternally {
 	border: 1px solid gray;
 	background-color: #ffffff;
 	padding: 3px;
@@ -1309,63 +1309,63 @@ span.changedby {
 	font-size: small;
 	text-align: center;
 }
-.editExternallyHelp {
+#articleContent .editExternallyHelp {
 	font-style: italic;
 	color: gray;
 }
 
-.toggle {
+#articleContent .toggle {
 	margin-left: 2em;
 	text-indent: -2em;
 }
 
 /* Classes for EXIF data display */
-table.mw_metadata {
+#articleContent table.mw_metadata {
 	font-size: 0.8em;
 	margin-left: 0.5em;
 	margin-bottom: 0.5em;
 	width: 300px;
 }
 
-table.mw_metadata caption {
+#articleContent table.mw_metadata caption {
 	font-weight: bold;
 }
 
-table.mw_metadata th {
+#articleContent table.mw_metadata th {
 	font-weight: normal;
 }
 
-table.mw_metadata td {
+#articleContent table.mw_metadata td {
 	padding: 0.1em;
 }
 
-table.mw_metadata {
+#articleContent table.mw_metadata {
 	border: none;
 	border-collapse: collapse;
 }
 
-table.mw_metadata td, table.mw_metadata th {
+#articleContent table.mw_metadata td, #articleContent table.mw_metadata th {
 	text-align: center;
 	border: 1px solid #aaaaaa;
 	padding-left: 0.1em;
 	padding-right: 0.1em;
 }
 
-table.mw_metadata th {
+#articleContent table.mw_metadata th {
 	background-color: #f9f9f9;
 }
 
-table.mw_metadata td {
+#articleContent table.mw_metadata td {
 	background-color: #fcfcfc;
 }
 
-table.collapsed tr.collapsable {
+#articleContent table.collapsed tr.collapsable {
 	display: none;
 }
 
 
 /* filetoc */
-ul#filetoc {
+#articleContent ul#filetoc {
 	text-align: center;
 	border: 1px solid #aaaaaa;
 	background-color: #f9f9f9;
@@ -1376,54 +1376,54 @@ ul#filetoc {
 	margin-right: 0;
 }
 
-#filetoc li {
+#articleContent #filetoc li {
 	display: inline;
 	list-style-type: none;
 	padding-right: 2em;
 }
 
-input#wpSummary {
+#articleContent input#wpSummary {
 	width: 80%;
 }
 
 /* @bug 1714 */
-input#wpSave, input#wpDiff {
+#articleContent input#wpSave, #articleContent input#wpDiff {
 	margin-right: 0.33em;
 }
 
-#editform .editOptions {
+#articleContent #editform .editOptions {
 	display: inline;
 }
 
-#wpSave {
+#articleContent #wpSave {
 	font-weight: bold;
 }
 
 /* Classes for article validation */
 
-table.revisionform_default {
+#articleContent table.revisionform_default {
 	border: 1px solid #000000;
 }
 
-table.revisionform_focus {
+#articleContent table.revisionform_focus {
 	border: 1px solid #000000;
 	background-color:#00BBFF;
 }
 
-tr.revision_tr_default {
+#articleContent tr.revision_tr_default {
 	background-color:#EEEEEE;
 }
 
-tr.revision_tr_first {
+#articleContent tr.revision_tr_first {
 	background-color:#DDDDDD;
 }
 
-p.revision_saved {
+#articleContent p.revision_saved {
 	color: green;
 	font-weight:bold;
 }
 
-#mw_trackbacks {
+#articleContent #mw_trackbacks {
 	border: solid 1px #bbbbff;
 	background-color: #eeeeff;
 	padding: 0.2em;
@@ -1432,104 +1432,104 @@ p.revision_saved {
 
 /* Allmessages table */
 
-#allmessagestable th {
+#articleContent #allmessagestable th {
 	background-color: #b2b2ff;
 }
 
-#allmessagestable tr.orig {
+#articleContent #allmessagestable tr.orig {
 	background-color: #ffe2e2;
 }
 
-#allmessagestable tr.new {
+#articleContent #allmessagestable tr.new {
 	background-color: #e2ffe2;
 }
 
-#allmessagestable tr.def {
+#articleContent #allmessagestable tr.def {
 	background-color: #f0f0ff;
 }
 
 
 /* noarticletext */
-div.noarticletext {
+#articleContent div.noarticletext {
 	border: 1px solid #ccc;
 	background: #fff;
 	padding: .2em 1em;
 	color: #000;
 }
 
-div#searchTargetContainer {
+#articleContent div#searchTargetContainer {
 	left:       10px;
 	top:        10px;
 	width:      90%;
 	background: white;
 }
 
-div#searchTarget {
+#articleContent div#searchTarget {
 	padding:    3px;
 	margin:     5px;
 	background: #F0F0F0;
 	border:     solid 1px blue;
 }
 
-div#searchTarget ul li {
+#articleContent div#searchTarget ul li {
 	list-style: none;
 }
 
-div#searchTarget ul li:before {
+#articleContent div#searchTarget ul li:before {
 	color: orange;
 	content: "\00BB \0020";
 }
 
-div#searchTargetHide {
+#articleContent div#searchTargetHide {
 	float:right;
 	border:solid 1px black;
 	background:#DCDCDC;
 	padding:2px;
 }
 
-div.multipageimagenavbox {
+#articleContent div.multipageimagenavbox {
    border: solid 1px silver;
    padding: 4px;
    margin: 1em;
    background: #f0f0f0;
 }
 
-div.multipageimagenavbox div.thumb {
+#articleContent div.multipageimagenavbox div.thumb {
    border: none;
    margin-left: 2em;
    margin-right: 2em;
 }
 
-div.multipageimagenavbox hr {
+#articleContent div.multipageimagenavbox hr {
    margin: 6px;
 }
 
-table.multipageimage td {
+#articleContent table.multipageimage td {
    text-align: center;
 }
 
 /** Special:Version */
 
-table#sv-ext, table#sv-hooks, table#sv-software {
+#articleContent table#sv-ext, #articleContent table#sv-hooks, #articleContent table#sv-software {
 	margin: 1em;
 	padding:0em;
 }
 
-#sv-ext td, #sv-hooks td, #sv-software td,
-#sv-ext th, #sv-hooks th, #sv-software th {
+#articleContent #sv-ext td, #articleContent #sv-hooks td, #articleContent #sv-software td,
+#articleContent #sv-ext th, #articleContent #sv-hooks th, #articleContent #sv-software th {
 	border: 1px solid #A0A0A0;
 	padding: 0 0.15em 0 0.15em;
 }
-#sv-ext th, #sv-hooks th, #sv-software th {
+#articleContent #sv-ext th, #articleContent #sv-hooks th, #articleContent #sv-software th {
 	background-color: #F0F0F0;
 	color: black;
 	padding: 0 0.15em 0 0.15em;
 }
-tr.sv-space{
+#articleContent tr.sv-space{
 	height: 0.8em;
 	border:none;
 }
-tr.sv-space td { display: none; }
+#articleContent tr.sv-space td { display: none; }
 
 /*
   Table pager (e.g. Special:Imagelist)
@@ -1539,47 +1539,47 @@ tr.sv-space td { display: none; }
   - remove line wrapping for all td and th, set background color
   - restore line wrapping for the last two table cells (description and size)
 */
-.TablePager_nav a { text-decoration: none; }
-.TablePager { border-collapse: collapse; }
-.TablePager, .TablePager td, .TablePager th { 
+#articleContent .TablePager_nav a { text-decoration: none; }
+#articleContent .TablePager { border-collapse: collapse; }
+#articleContent .TablePager, #articleContent .TablePager td, #articleContent .TablePager th { 
 	border: 1px solid #aaaaaa;
 	padding: 0 0.15em 0 0.15em;
 }
-.TablePager th { background-color: #eeeeff }
-.TablePager td { background-color: #ffffff }
-.TablePager tr:hover td { background-color: #eeeeff }
+#articleContent .TablePager th { background-color: #eeeeff }
+#articleContent .TablePager td { background-color: #ffffff }
+#articleContent .TablePager tr:hover td { background-color: #eeeeff }
 
-.imagelist td, .imagelist th { white-space: nowrap }
-.imagelist .TablePager_col_links { background-color: #eeeeff }
-.imagelist .TablePager_col_img_description { white-space: normal }
-.imagelist th.TablePager_sort { background-color: #ccccff }
+#articleContent .imagelist td, #articleContent .imagelist th { white-space: nowrap }
+#articleContent .imagelist .TablePager_col_links { background-color: #eeeeff }
+#articleContent .imagelist .TablePager_col_img_description { white-space: normal }
+#articleContent .imagelist th.TablePager_sort { background-color: #ccccff }
 
-.templatesUsed { margin-top: 1.5em; }
+#articleContent .templatesUsed { margin-top: 1.5em; }
 
-.mw-summary-preview {
+#articleContent .mw-summary-preview {
 	margin: 0.1em 0;
 }
 
 /* Friendlier slave lag warnings */
-div.mw-lag-warn-normal,
-div.mw-lag-warn-high {
+#articleContent div.mw-lag-warn-normal,
+#articleContent div.mw-lag-warn-high {
 	padding: 3px;
 	text-align: center;
 	margin: 3px auto;
 }
-div.mw-lag-warn-normal {
+#articleContent div.mw-lag-warn-normal {
 	border: 1px solid #FFCC66;
 	background-color: #FFFFCC;
 }
-div.mw-lag-warn-high {
+#articleContent div.mw-lag-warn-high {
 	font-weight: bold;
 	border: 2px solid #FF0033;
 	background-color: #FFCCCC;
 }
 
 /* Recreating-deleted-page/reupload file warning and log entries */
-div#mw-upload-deleted-warn,
-div#mw-recreate-deleted-warn {
+#articleContent div#mw-upload-deleted-warn,
+#articleContent div#mw-recreate-deleted-warn {
 	padding: 3px;
 	margin-bottom: 3px;
 	border: 2px solid #2F6FAB;
@@ -1588,24 +1588,24 @@ div#mw-upload-deleted-warn ul li,
 div#mw-recreate-deleted-warn ul li {
 	font-size: 90%;
 }
-.MediaTransformError {
+#articleContent .MediaTransformError {
 	background-color: #ccc;
 	padding: 0.1em;
 }
-.MediaTransformError td {
+#articleContent .MediaTransformError td {
 	text-align: center;
 	vertical-align: middle;
 	font-size: 90%;
 }
 
 /** Special:Search stuff */
-div#mw-search-interwiki-caption {
+#articleContent div#mw-search-interwiki-caption {
 	text-align: center;
 	font-weight: bold;
 	font-size: 95%;
 }
 
-.mw-search-interwiki-project {
+#articleContent .mw-search-interwiki-project {
 	font-size: 97%;
 	text-align: left;
 	padding-left: 0.2em;
@@ -1615,13 +1615,13 @@ div#mw-search-interwiki-caption {
 	background: #cae8ff;
 }
 
-span.searchmatch {
+#articleContent span.searchmatch {
 	font-weight: bold;
 	color: red;
 }
 
 /* God-damned hack for the crappy layout */
-.os-suggest {
+#articleContent .os-suggest {
 	font-size: 127%;
 }
 
@@ -1644,7 +1644,7 @@ span.searchmatch {
 
  /* Personennamen in Kapitälchen: class="Person" */
  
- .Person {
+ #articleContent .Person {
     display: inline;
     font-variant: small-caps;
     font-style: normal;
@@ -1652,25 +1652,25 @@ span.searchmatch {
 
  /* [[Wikipedia:Zitate|Zitate]] (siehe [[Vorlage:Zitat]]) */
  
- p.Zitat {
+ #articleContent p.Zitat {
     font-style: normal;
     margin-bottom: 0em;
  }
- p.cite {
+ #articleContent p.cite {
     margin-top: 0em;
     padding-left: 1em;
  }
 
  /* [[Wikipedia:Quellenangaben|Quellenangaben]] nicht kursiv, da sie ggf. verschiedene Bestandteile enthalten */
  
- cite {
+ #articleContent cite {
     font-style: normal;
  }
 
  /* Stylesheet-Ergänzung zu Standard-[[Wikipedia:Navigationsleisten|Navigationsleisten]] */
  
- div.BoxenVerschmelzen,
- div.NavFrame {
+ #articleContent div.BoxenVerschmelzen,
+ #articleContent div.NavFrame {
     margin: 0px;
     padding: 2px;
     border: 1px solid #aaaaaa;
@@ -1679,36 +1679,36 @@ span.searchmatch {
     font-size: 95%;
         clear:both;
  }
- div.BoxenVerschmelzen div.NavFrame {
+ #articleContent div.BoxenVerschmelzen div.NavFrame {
     border-style: none;
     border-style: hidden;
  }
- div.NavFrame + div.NavFrame {
+ #articleContent div.NavFrame + div.NavFrame {
     border-top-style: none;
     border-top-style: hidden;
  }
- div.NavPic {
+ #articleContent div.NavPic {
     background-color: #ffffff;
     margin: 0px;
     padding: 2px;
     float: left;
  }
- div.NavFrame div.NavHead {
+ #articleContent div.NavFrame div.NavHead {
     height: 1.6em;
     font-weight: bold;
     font-size: 100%;
     background-color: #efefef;
  }
- div.NavFrame p {
+ #articleContent div.NavFrame p {
     font-size: 100%;
  }
- div.NavFrame div.NavContent {
+ #articleContent div.NavFrame div.NavContent {
     font-size: 100%;
  }
- div.NavFrame div.NavContent p {
+ #articleContent div.NavFrame div.NavContent p {
     font-size: 100%;
  }
- div.NavEnd {
+ #articleContent div.NavEnd {
     margin: 0px;
     padding: 0px;
     line-height: 1px;
@@ -1716,21 +1716,21 @@ span.searchmatch {
  }
 
 /* Stylesheet fuer den 'Ausklappen'-Button an Navileisten, der in [[MediaWiki:Common.js]] implementiert wird */
-.NavToggle {
+#articleContent .NavToggle {
        font-size: x-small;
        float:right;
 }
 
  /* Abstand vor Navigationsleisten */
  
- div.BoxenVerschmelzen,
- div.NavFrame {
+ #articleContent div.BoxenVerschmelzen,
+ #articleContent div.NavFrame {
    margin-top: 1.5em;
  }
- div.BoxenVerschmelzen div.NavFrame {
+ #articleContent div.BoxenVerschmelzen div.NavFrame {
    margin-top: 0;
  }
- div.NavFrame + div.NavFrame {
+ #articleContent div.NavFrame + div.NavFrame {
    margin-top: 0;
  }
 
@@ -1747,7 +1747,7 @@ span.searchmatch {
 
  /* Stylesheet-Ergänzung zu SideBoxen (ehedem [[Wikipedia:TownBox|TownBox]]) */
  
- div.sideBox {
+ #articleContent div.sideBox {
     position: relative;
     float: right;
     background: white;
@@ -1758,23 +1758,23 @@ span.searchmatch {
     overflow: hidden;
     clear: right;
  }
- div.sideBox dl {
+ #articleContent div.sideBox dl {
     padding: 0;
     margin: 0 0 0.3em 0;
     font-size: 96%;
  }
- div.sideBox dl dt {
+#articleContent div.sideBox dl dt {
     background: none;
     margin: 0.4em 0 0 0;
  }
- div.sideBox dl dd {
+#articleContent  div.sideBox dl dd {
     margin: 0.1em 0 0 1.1em;
     background-color: #f3f3f3;
  }
 
  /* Stylesheet-Ergänzung zu [[Wikipedia:Taxoboxen|Taxoboxen]] */
  
- table.taxobox {
+#articleContent  table.taxobox {
         border-collapse: collapse;
         border: 1px solid gray;
         float: right;
@@ -1782,46 +1782,46 @@ span.searchmatch {
         margin-left: 0.5em;
         background-color:white;
  }
- table.taxobox th {
+#articleContent  table.taxobox th {
         background-color: #9BCD9B;
         border: solid 1px gray;
         text-align: center;
         font-weight: bold;
  }
- table.taxobox td {
+#articleContent  table.taxobox td {
         vertical-align:top;
  }
- table.taxobox .Person {
+#articleContent  table.taxobox .Person {
         font-style: normal;
  }
- table.taxobox div.thumb,
- table.taxobox div.thumb * {
+#articleContent  table.taxobox div.thumb,
+#articleContent  table.taxobox div.thumb * {
         margin: auto;
         padding: 0;
         float: none;
         border: none;
         background-color:#F9F9F9;
  }
- table.taxobox div.magnify {
+#articleContent  table.taxobox div.magnify {
         display: none;
  }
- table.taxobox tr td div.thumb div div.thumbcaption {
+ #articleContent table.taxobox tr td div.thumb div div.thumbcaption {
         text-align:center;
  }
- table.taxobox td.Person {
+ #articleContent table.taxobox td.Person {
         text-align:center;
         display:block;
  }
- table.taxobox td.taxo-name {
+ #articleContent table.taxobox td.taxo-name {
         text-align:center;
  }
- table.taxobox td.taxo-bild {
+ #articleContent table.taxobox td.taxo-bild {
         text-align:center;
  }
 
  /* Stylesheet-Ergänzung zu [[Wikipedia:Paläoboxen|Paläoboxen]] */
  
- table.palaeobox {
+ #articleContent table.palaeobox {
        border-collapse: collapse;
        border: 1px solid gray;
        float: right;
@@ -1829,51 +1829,51 @@ span.searchmatch {
        margin-left: 0.5em;
        background-color:white;
  }
- table.palaeobox th {
+ #articleContent table.palaeobox th {
        background-color: #e7dcc3;
        border: solid 1px gray;
        text-align: center;
        font-weight: bold;
  }
- table.palaeobox td {
+ #articleContent table.palaeobox td {
        vertical-align:top;
  }
- table.palaeobox .Person {
+ #articleContent table.palaeobox .Person {
        font-style: normal;
  }
- table.palaeobox div.thumb,
- table.palaeobox div.thumb * {
+ #articleContent table.palaeobox div.thumb,
+ #articleContent table.palaeobox div.thumb * {
        margin: 0;
        padding: 0;
        float: none;
        border: none;
  }
- table.palaeobox div.magnify {
+ #articleContent table.palaeobox div.magnify {
        display:none;
  }
- table.palaeobox tr td div.thumb div div.thumbcaption {
+ #articleContent table.palaeobox tr td div.thumb div div.thumbcaption {
        text-align:left;
  }
- table.palaeobox td.Person {
+ #articleContent table.palaeobox td.Person {
        text-align:center;
        display:block;
  }
- table.palaeobox td.taxo-name {
+ #articleContent table.palaeobox td.taxo-name {
        text-align:center;
  }
- table.palaeobox td.taxo-bild {
+ #articleContent table.palaeobox td.taxo-bild {
        text-align:center;
  }
- table.palaeobox td.taxo-zeit {
+ #articleContent table.palaeobox td.taxo-zeit {
        text-align:center;
  }
- table.palaeobox td.taxo-ort {
+ #articleContent table.palaeobox td.taxo-ort {
        text-align:left;
  }
 
  /* aus Vorlage zur Entlastung, skinabhängigen Darstellung und Kombinierbarkeit hierher ausgelagert */
- .wikitable,
- .prettytable {
+ #articleContent .wikitable,
+ #articleContent .prettytable {
   margin: 1em 1em 1em 0;
   background: #f9f9f9;
   border: 1px #AAA solid;
@@ -1881,23 +1881,23 @@ span.searchmatch {
   empty-cells:show;
  }
 
- .wikitable th, .wikitable td,
- .prettytable th, .prettytable td {
+ #articleContent .wikitable th, #articleContent .wikitable td,
+ #articleContent .prettytable th, #articleContent .prettytable td {
   border: 1px #AAA solid;
   padding: 0.3em;
  }
 
- .wikitable caption,
- .prettytable caption {
+ #articleContent .wikitable caption,
+ #articleContent .prettytable caption {
   margin-left: inherit;
   margin-right: inherit;
   font-weight: bold;
  }
  
- .nogrid th, .nogrid td {border: none;}
- .float-left { float: left; clear: left; }
- .float-right { float: right; clear: right; margin: 1em 0 1em 1em; }
- .centered { margin-left: auto; margin-right: auto; }
+ #articleContent .nogrid th, #articleContent .nogrid td {border: none;}
+ #articleContent .float-left { float: left; clear: left; }
+ #articleContent .float-right { float: right; clear: right; margin: 1em 0 1em 1em; }
+ #articleContent .centered { margin-left: auto; margin-right: auto; }
 
  /* Bitte KEINE weiteren Definitionen dieser Art für Boxen hier, das gehört in entsprechende Vorlagen! */
  /* Hier 20 Mal Trivialitäten wie "text-align:center" zu definieren verlangsamt alles und ist nicht */
@@ -1906,21 +1906,21 @@ span.searchmatch {
 
  /* Do not expand [[Wikipedia:WikiProjekt Georeferenzierung|kvaleberg.com-URLs]] for printing */
  
- #content span.coordinates a.external.text:after, #content span.coordinates a.external.autonumber:after { content: ""; }
- #content div.coordinates a.external.text:after, #content div.coordinates a.external.autonumber:after { content: ""; }
+ #articleContent #content span.coordinates a.external.text:after, #articleContent #content span.coordinates a.external.autonumber:after { content: ""; }
+ #articleContent #content div.coordinates a.external.text:after, #articleContent #content div.coordinates a.external.autonumber:after { content: ""; }
  
  /* Do not expand URLs for printing */
  
- #content span.plainlinks-print a.external.text:after, #content span.plainlinks-print a.external.autonumber:after { content: ""; }
- #content div.plainlinks-print a.external.text:after, #content div.plainlinks-print a.external.autonumber:after { content: ""; }
+ #articleContent #content span.plainlinks-print a.external.text:after, #articleContent #content span.plainlinks-print a.external.autonumber:after { content: ""; }
+ #articleContent #content div.plainlinks-print a.external.text:after, #articleContent #content div.plainlinks-print a.external.autonumber:after { content: ""; }
  
  /* Metadaten (bspw. [[Wikipedia:Personendaten|Personendaten]]) */
  
- table.metadata {
+#articleContent  table.metadata {
     border: 1px solid #aaaaaa;
     display: none;
  }
- .metadata-label {
+#articleContent  .metadata-label {
     color: #aaaaaa;
  }
 
@@ -1933,58 +1933,58 @@ span.searchmatch {
   * für dünne Rahmen nur noch "border-style" angeben muss.)
   */
  
- .rahmenfarbe1 { /* Wie Inhaltsverzeichnis */
+#articleContent  .rahmenfarbe1 { /* Wie Inhaltsverzeichnis */
     border-color: #aaaaaa;
     border-width: 1px;
  }
- .rahmenfarbe2 { /* Unauffällig, geringer Kontrast */
+#articleContent  .rahmenfarbe2 { /* Unauffällig, geringer Kontrast */
     border-color: #e9e9e9;
     border-width: 1px;
  }
- .rahmenfarbe3 { /* "Rot", auffällig */
+#articleContent  .rahmenfarbe3 { /* "Rot", auffällig */
     border-color: #c00000;
     border-width: 1px;
  }
- .rahmenfarbe4 { /* Neutrale Farbe, deutlich */
+#articleContent  .rahmenfarbe4 { /* Neutrale Farbe, deutlich */
     border-color: #8888aa;
     border-width: 1px;
  }
- .rahmenfarbe5 { /* "Schwarz", hoher Kontrast */
+#articleContent  .rahmenfarbe5 { /* "Schwarz", hoher Kontrast */
     border-color: #000000;
     border-width: 1px;
  }
  
- .hintergrundfarbe1 { /* Wie Inhaltsverzeichnis */
+ #articleContent .hintergrundfarbe1 { /* Wie Inhaltsverzeichnis */
     background-color: #f9f9f9;
  }
- .hintergrundfarbe2 { /* "Weiß", für Nicht-Artikel-Seiten, neutral */
+ #articleContent .hintergrundfarbe2 { /* "Weiß", für Nicht-Artikel-Seiten, neutral */
     background-color: #ffffff;
  }
- .hintergrundfarbe3 { /* "Gelb", auffällig */
+ #articleContent .hintergrundfarbe3 { /* "Gelb", auffällig */
     background-color: #ffff40;
  }
- .hintergrundfarbe4 { /* Sehr auffällig */
+ #articleContent .hintergrundfarbe4 { /* Sehr auffällig */
     background-color: #ffaa00;
  }
- .hintergrundfarbe5 { /* Neutral, abgesetzt */
+ #articleContent .hintergrundfarbe5 { /* Neutral, abgesetzt */
     background-color: #e0e0e0;
  }
- .hintergrundfarbe6 { /* Allgemein „bunt“, für Hervorhebungen und Unterscheidungen */
+ #articleContent .hintergrundfarbe6 { /* Allgemein „bunt“, für Hervorhebungen und Unterscheidungen */
     background-color: #b3b7ff;
  }
- .hintergrundfarbe7 { /* Allgemein „bunt“, für Hervorhebungen und Unterscheidungen */
+ #articleContent .hintergrundfarbe7 { /* Allgemein „bunt“, für Hervorhebungen und Unterscheidungen */
     background-color: #ffcbcb;
  }
- .hintergrundfarbe8 { /* Allgemein „bunt“, für Hervorhebungen und Unterscheidungen */
+ #articleContent .hintergrundfarbe8 { /* Allgemein „bunt“, für Hervorhebungen und Unterscheidungen */
     background-color: #ffebad;
  }
- .hintergrundfarbe9 { /* Allgemein „bunt“, für Hervorhebungen und Unterscheidungen */
+ #articleContent .hintergrundfarbe9 { /* Allgemein „bunt“, für Hervorhebungen und Unterscheidungen */
     background-color: #b9ffc5;
  }
 
  /* Keine Vergrößerung der Zeilenhöhe durch hochgestellte Zahlen der Fußnoten */
  
- .reference, .references sup {
+ #articleContent .reference, #articleContent .references sup {
      font-size: 91%;
      vertical-align: text-top;
      position: relative;
@@ -1993,22 +1993,22 @@ span.searchmatch {
 
  /* Hervorhebung der angeklickten Fußnoten und der Rückverweise in blau */
  
- ol.references > li:target {
+ #articleContent ol.references > li:target {
      background-color: #DEF;
  }
  
- sup.reference:target { 
+ #articleContent sup.reference:target { 
      background-color: #DEF;
  }
 
  /* Für <hiero></hiero> */
 
- .mw-hierotable { border: 0px; padding: 0px; }
- .mw-hierotable th, .mw-hierotable td { border: 0px; padding: 0px; }
+ #articleContent .mw-hierotable { border: 0px; padding: 0px; }
+ #articleContent .mw-hierotable th, #articleContent .mw-hierotable td { border: 0px; padding: 0px; }
 
  /* Für [[MediaWiki:Anoneditwarning]] */
 
- #mw-anon-edit-warning {
+ #articleContent #mw-anon-edit-warning {
 	background-color: #ffce7b;
 	border: 1px solid #ffa500;
 	color: black;
@@ -2022,114 +2022,114 @@ span.searchmatch {
 
  /* Markierung von Redirects in [[Special:Allpages]], [[Special:Watchlist]], Kategorien */
  
- .allpagesredirect {
+ #articleContent .allpagesredirect {
         font-style: italic;
  }
  
- .watchlistredir {
+ #articleContent .watchlistredir {
         font-style: italic;
  }
  
- .redirect-in-category {
+ #articleContent .redirect-in-category {
         font-style: italic;
  }
  
  /* Einmal gelesene Bestandteile (z.B. in der Sitenotice) ausblenden, sobald css geladen ist */
  
- #gelesen {
+ #articleContent #gelesen {
         display:none;
  }
 
  /* Größerer Abstand zwischen TOC-Nummerierung und TOC-Eintrag */
- span.tocnumber {margin-right:0.3em;}
+ #articleContent span.tocnumber {margin-right:0.3em;}
 
  /* Skinabhängige absolute Positionierungen ausblenden */
  /* Bitte [[MediaWiki Diskussion:Common.css#Absolute_Positionierungen]] beachten */
  
- #coordinates_3_ObenRechts, #issnlink, #editcount, #shortcut, #artikelstadium {
+ #articleContent #coordinates_3_ObenRechts, #articleContent #issnlink, #articleContent #editcount, #articleContent #shortcut, #articleContent #artikelstadium {
     display: none;
  }
 
   /* CommonsTicker styles */
  
-  .tickerList ul,    .tickerList ul li    { list-style: none; text-indent:-2em; margin-left:2em;   text-align:left; }
-  .tickerList ul ul, .tickerList ul ul li { list-style: none; text-indent:0;    margin-left:1.5em; text-align:left; }
+#articleContent   .tickerList ul,    #articleContent .tickerList ul li    { list-style: none; text-indent:-2em; margin-left:2em;   text-align:left; }
+  #articleContent .tickerList ul ul, #articleContent .tickerList ul ul li { list-style: none; text-indent:0;    margin-left:1.5em; text-align:left; }
  
-  .tickerAction_deleted:before     { content:" WEG "; color: #FF0000; font-family:monospace; font-weight:bold; font-size:100%; }
-  .tickerAction_restored:before    { content:" RST "; color: #00BB00; font-family:monospace; font-weight:bold; font-size:100%; }
-  .tickerAction_replaced:before    { content:" ERS "; color: #CC88FF; font-family:monospace; font-weight:bold; font-size:100%; }
-  .tickerAction_addedTag:before    { content:" +LA "; color: #FF8800; font-family:monospace; font-weight:bold; font-size:100%; }
-  .tickerAction_removedTag:before  { content:" -LA "; color: #00BB00; font-family:monospace; font-weight:bold; font-size:100%; }
-  .tickerAction_addedBad:before    { content:" +LA "; color: #FF8800; font-family:monospace; font-weight:bold; font-size:100%; }
-  .tickerAction_removedBad:before  { content:" -LA "; color: #00BB00; font-family:monospace; font-weight:bold; font-size:100%; }
-  .tickerAction_addedGood:before   { content:" +OK "; color: #00BB00; font-family:monospace; font-weight:bold; font-size:100%; }
-  .tickerAction_removedGood:before { content:" -OK "; color: #FF8800; font-family:monospace; font-weight:bold; font-size:100%; }
+  #articleContent .tickerAction_deleted:before     { content:" WEG "; color: #FF0000; font-family:monospace; font-weight:bold; font-size:100%; }
+  #articleContent .tickerAction_restored:before    { content:" RST "; color: #00BB00; font-family:monospace; font-weight:bold; font-size:100%; }
+  #articleContent .tickerAction_replaced:before    { content:" ERS "; color: #CC88FF; font-family:monospace; font-weight:bold; font-size:100%; }
+  #articleContent .tickerAction_addedTag:before    { content:" +LA "; color: #FF8800; font-family:monospace; font-weight:bold; font-size:100%; }
+  #articleContent .tickerAction_removedTag:before  { content:" -LA "; color: #00BB00; font-family:monospace; font-weight:bold; font-size:100%; }
+  #articleContent .tickerAction_addedBad:before    { content:" +LA "; color: #FF8800; font-family:monospace; font-weight:bold; font-size:100%; }
+  #articleContent .tickerAction_removedBad:before  { content:" -LA "; color: #00BB00; font-family:monospace; font-weight:bold; font-size:100%; }
+  #articleContent .tickerAction_addedGood:before   { content:" +OK "; color: #00BB00; font-family:monospace; font-weight:bold; font-size:100%; }
+  #articleContent .tickerAction_removedGood:before { content:" -OK "; color: #FF8800; font-family:monospace; font-weight:bold; font-size:100%; }
  
-  .tickerUsage  { font-size:80%; }  /* ticker usage list */
-  .tickerTemplateEntry    { font-weight: bold; } /* entry applies to a template used by multiple images */
+  #articleContent .tickerUsage  { font-size:80%; }  /* ticker usage list */
+  #articleContent .tickerTemplateEntry    { font-weight: bold; } /* entry applies to a template used by multiple images */
  
   /* per-status styles  */  
-  .tickerStatus_done:before {content:" Fixed "; color: #00AA00; font-family:monospace; font-weight:bold; font-size:90%; text-decoration: none;}
-  .tickerStatus_done { text-decoration:line-through; font-size: small; } 
+  #articleContent .tickerStatus_done:before {content:" Fixed "; color: #00AA00; font-family:monospace; font-weight:bold; font-size:90%; text-decoration: none;}
+  #articleContent .tickerStatus_done { text-decoration:line-through; font-size: small; } 
  
   /* strike through when entry has been handeled (done) */
   /*.tickerStatus_done .tickerAction_deleted:before  { content:" "; text-decoration: none;}*/ 
-  .tickerStatus_done .tickerAction_deleted:before  { text-decoration: none; }
+  #articleContent .tickerStatus_done .tickerAction_deleted:before  { text-decoration: none; }
  
   /* local reupload */  
-  .tickerStatus_local {text-decoration:line-through; font-size: small; } 
-  .tickerStatus_local .tickerAction_deleted:before  {content:" "; text-decoration: none;}
-  .tickerStatus_local:before { content:" re-uploaded locally "; color: #00AA00; font-family:monospace; font-weight:bold; font-size:90%; text-decoration: none;}
+  #articleContent .tickerStatus_local {text-decoration:line-through; font-size: small; } 
+  #articleContent .tickerStatus_local .tickerAction_deleted:before  {content:" "; text-decoration: none;}
+  #articleContent .tickerStatus_local:before { content:" re-uploaded locally "; color: #00AA00; font-family:monospace; font-weight:bold; font-size:90%; text-decoration: none;}
  
   /* in process of fixing */
-  .tickerStatus_fixing .tickerAction_deleted:before  {content:" "; text-decoration: none;}
-  .tickerStatus_fixing:before {content:"fixing"; color: #FF8800; font-family:monospace; font-weight:bold; font-size:90%;}
+  #articleContent .tickerStatus_fixing .tickerAction_deleted:before  {content:" "; text-decoration: none;}
+  #articleContent .tickerStatus_fixing:before {content:"fixing"; color: #FF8800; font-family:monospace; font-weight:bold; font-size:90%;}
  
   /* Won'tfix */
-  .tickerStatus_wontfix .tickerAction_deleted:before  {text-decoration: none;}
-  .tickerStatus_wontfix {text-decoration: line-through;}
-  .tickerStatus_wontfix:before {content:"Will not fix"; color: #CC0000; font-family:monospace; font-weight:bold; font-size:90%;text-decoration:none;}  
+  #articleContent .tickerStatus_wontfix .tickerAction_deleted:before  {text-decoration: none;}
+  #articleContent .tickerStatus_wontfix {text-decoration: line-through;}
+  #articleContent .tickerStatus_wontfix:before {content:"Will not fix"; color: #CC0000; font-family:monospace; font-weight:bold; font-size:90%;text-decoration:none;}  
  
   /* similiar */
-  .tickerStatus_similiar .tickerAction_deleted:before  {text-decoration: none;}
-  .tickerStatus_similiar {text-decoration: line-through;}
-  .tickerStatus_similiar:before {content:"REPL Article;no fix"; color: #FF4400; font-family:monospace; font-weight:bold; font-size:90%;text-decoration:none;}
+  #articleContent .tickerStatus_similiar .tickerAction_deleted:before  {text-decoration: none;}
+  #articleContent .tickerStatus_similiar {text-decoration: line-through;}
+  #articleContent .tickerStatus_similiar:before {content:"REPL Article;no fix"; color: #FF4400; font-family:monospace; font-weight:bold; font-size:90%;text-decoration:none;}
  
   /* NA */
-  .tickerStatus_NA .tickerAction_deleted:before  {text-decoration: none;}
-  .tickerStatus_NA:before {content:"No NEG"; color: #00FF20;} 
-  ul span.tickerStatus_NA + ul span.tickerUsage {display:none;}
-  span.tickerStatus_NA  span.tickerUsage {display:none;}
+  #articleContent .tickerStatus_NA .tickerAction_deleted:before  {text-decoration: none;}
+  #articleContent .tickerStatus_NA:before {content:"No NEG"; color: #00FF20;} 
+  #articleContent ul span.tickerStatus_NA + ul span.tickerUsage {display:none;}
+  #articleContent span.tickerStatus_NA  span.tickerUsage {display:none;}
   /*Needed so that both subentrys and non-subentrys both are invisivble */
 
  /* Anpassungen für [[:Template:Link_FA]] */
  
  /* hide the template */
- #bodyContent span.FA {
+ #articleContent #bodyContent span.FA {
      display: none; 
  }
  
  /* change the bullets for links to special articles */
- #p-lang li.FA {
+ #articleContent #p-lang li.FA {
      /* hier immer auch linkFA_bullet in Common.js mit anpassen für die älteren skins! */
      /*list-style-image: url("http://upload.wikimedia.org/wikipedia/commons/d/d0/Monobook-bullet-star-transparent.png");*/
  }
  
  /* without this, special bullets go too far to the left */
  /*
- .portlet li {
+ #articleContent .portlet li {
   list-style-image: url("http://upload.wikimedia.org/wikipedia/commons/1/18/Monobook-bullet.png");
  }
  */
 
  /* DIVs in ImageMaps inlinen (Vorschlag von Revolus) */
- .imagemap-inline div {
+ #articleContent .imagemap-inline div {
        display: inline;
  }
 
  /* [[Special:Hochladen]]: Warnmeldung auf bestehende Dateien, unerwünschte Prefixe usw. deutlicher hervorheben. */
 
- #wpDestFile-warning ul {
+ #articleContent #wpDestFile-warning ul {
        border:solid red 1px;
        padding: 1.5em;
  }
@@ -2138,8 +2138,8 @@ span.searchmatch {
  /* Vor allem auf Spezialseiten, da diese eine andere Hintergrundfarbe haben. */
  /* Update 21. März 2008: Wurde mit [[rev:32269]] und [[rev:32270]] zentralisiert. */
 
- table.searchResultImage, table#mw-sitematrix-table, table.mw-specialpages-table,
- table.mw-listgrouprights-table, table.diff
+ #articleContent table.searchResultImage, #articleContent table#mw-sitematrix-table, #articleContent table.mw-specialpages-table,
+ #articleContent table.mw-listgrouprights-table, #articleContent table.diff
   {
        background-color: transparent; 
   }
@@ -2152,11 +2152,11 @@ span.searchmatch {
  /* +++++ 3. NEUE [[Hauptseite|HAUPTSEITE]] (ab 2006) +++++ */
  
  /* Kategorie verbergen */
- body.page-Hauptseite #catlinks {
+ #articleContent body.page-Hauptseite #catlinks {
   display:none;
  }
 
- #hauptseite h2 {
+ #articleContent #hauptseite h2 {
        background-color: #d8e8ff;
        border: 1px solid #8898bf;
        font-size: 1em;
@@ -2166,65 +2166,65 @@ span.searchmatch {
        padding-top: 0.1em;
        padding-bottom: 0.1em;
  }
- #hauptseite .inhalt {
+ #articleContent #hauptseite .inhalt {
        background-color: #ffffff;
        border: 1px solid #8898bf;
        border-top: 0px solid white;
        padding: 0.3em 0.8em 0.4em 0.8em;
  }
- #hauptseite .inhalt hr {
+ #articleContent #hauptseite .inhalt hr {
        background-color: #8898bf;
        color: #8898bf;
        height: 1px;
        margin:0.5em 0;
        padding: 0;
  }
- #hauptseite .inhalt .mehr {
+ #articleContent #hauptseite .inhalt .mehr {
        clear: both;
        font-size: 95%;
        margin-top: 0.8em;
        text-align: right;
  }
- .hauptseite-oben,
- .hauptseite-links,
- .hauptseite-rechts {
+ #articleContent .hauptseite-oben,
+ #articleContent .hauptseite-links,
+ #articleContent .hauptseite-rechts {
        margin-bottom: 1em;
  }
- .hauptseite-links {
+ #articleContent .hauptseite-links {
        margin-right: 0.5em;
  }
- .hauptseite-rechts {
+ #articleContent .hauptseite-rechts {
        margin-left: 0.5em;
  }
- .hauptseite-oben h2,
- .hauptseite-unten h2 {
+ #articleContent .hauptseite-oben h2,
+ #articleContent .hauptseite-unten h2 {
        text-align: center;
  }
- .hauptseite-oben .inhalt .portale {
+ #articleContent .hauptseite-oben .inhalt .portale {
        font-weight: bold;
        margin-top: 0.2em;
        margin-bottom: 0.2em;
  }
- .hauptseite-oben .inhalt .intern {
+ #articleContent .hauptseite-oben .inhalt .intern {
        font-size: 90%;
        text-align: center;
  }
- .hauptseite-links h2,
- .hauptseite-rechts h2 {
+ #articleContent .hauptseite-links h2,
+ #articleContent .hauptseite-rechts h2 {
        text-indent: 0.8em;
  }
- #hauptseite-schwesterprojekte .inhalt a {
+ #articleContent #hauptseite-schwesterprojekte .inhalt a {
        font-weight: bold;
  }
 
  /* p.catlinks span a[href*="/wiki/Kategorie:Arbeitskategorie"] { display:none } wegen HIDDENCAT nicht mehr notwendig */ 
 
  /* Remove underline from IPA links */
- .IPA a:link, .IPA a:visited {
+ #articleContent .IPA a:link, #articleContent .IPA a:visited {
     text-decoration: none;
  }
 
- span.Unicode
+ #articleContent span.Unicode
  {
   font-family:
   'Code2000',
@@ -2234,7 +2234,7 @@ span.searchmatch {
   sans-serif;
  }
 
- span.Unicode1
+ #articleContent span.Unicode1
  {
   font-family:
   'Code2001',
@@ -2243,7 +2243,7 @@ span.searchmatch {
   sans-serif;
  }
 
- span.Unicode2
+ #articleContent span.Unicode2
  {
   font-family:
   'Sun-ExtB',
@@ -2251,7 +2251,7 @@ span.searchmatch {
   sans-serif;
  }
 
- span.IPA
+ #articleContent span.IPA
  {
   font-family:
    'Quivira',
@@ -2264,7 +2264,7 @@ span.searchmatch {
    sans-serif;
  }
 
- span.IAST
+ #articleContent span.IAST
  {
   font-family:
    'Code2000',
@@ -2273,7 +2273,7 @@ span.searchmatch {
   sans-serif;
  }
 
- span.altitalisch
+ #articleContent span.altitalisch
  {
   font-family:
    'Quivira',
@@ -2283,7 +2283,7 @@ span.searchmatch {
  }
 
 
- span.gotisch
+ #articleContent span.gotisch
  {
   font-family:
    'Quivira',
@@ -2292,7 +2292,7 @@ span.searchmatch {
    sans-serif;
  }
 
- span.hebrew
+ #articleContent span.hebrew
  {
   font-family:
   'Quivira',
@@ -2304,7 +2304,7 @@ span.searchmatch {
   sans-serif;
  }
 
- span.spanAr
+ #articleContent span.spanAr
  {
   font-family:
   'Arial Unicode MS',
@@ -2315,7 +2315,7 @@ span.searchmatch {
  }
 
 
- span.music-symbol
+ #articleContent span.music-symbol
  {
   font-family:
   'Musical Symbols',
@@ -2325,12 +2325,12 @@ span.searchmatch {
  }
 
  /* Standardmäßige Ausblendung der Flagged-Revisions-Backlog-Sitenotice */
- #mw-oldreviewed-notice {
+ #articleContent #mw-oldreviewed-notice {
   display: none;
  }
 
 /* Default skin for navigation boxes */
-table.navbox {            /* Navbox container style */
+#articleContent table.navbox {            /* Navbox container style */
   border: 1px solid #aaa;
   width: 100%; 
   margin: auto;
@@ -2339,55 +2339,55 @@ table.navbox {            /* Navbox container style */
   text-align: center;
   padding: 1px;
 }
-table.navbox + table.navbox {  /* Single pixel border between adjacent navboxes */
+#articleContent table.navbox + table.navbox {  /* Single pixel border between adjacent navboxes */
   margin-top: -1px;            /* (doesn't work for IE6, but that's okay)       */
 }
-.navbox-title,
-.navbox-abovebelow,
-table.navbox th {
+#articleContent .navbox-title,
+#articleContent .navbox-abovebelow,
+#articleContent table.navbox th {
   text-align: center;      /* Title and above/below styles */
   padding-left: 1em;
   padding-right: 1em;
 }
-.navbox-group {            /* Group style */
+#articleContent .navbox-group {            /* Group style */
   white-space: nowrap;
   text-align: right;
   font-weight: bold;
   padding-left: 1em;
   padding-right: 1em;
 }
-.navbox, .navbox-subgroup {
+#articleContent .navbox, #articleContent .navbox-subgroup {
   background: #fdfdfd;     /* Background color */
 }
-.navbox-list {
+#articleContent .navbox-list {
   border-color: #fdfdfd;   /* Must match background color */
 }
-.navbox-title,
-table.navbox th {
+#articleContent .navbox-title,
+#articleContent table.navbox th {
   background: #ccccff;     /* Level 1 color */
 }
-.navbox-abovebelow,
-.navbox-group,
-.navbox-subgroup .navbox-title {
+#articleContent .navbox-abovebelow,
+#articleContent .navbox-group,
+#articleContent .navbox-subgroup .navbox-title {
   background: #ddddff;     /* Level 2 color */
 }
-.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {
+#articleContent .navbox-subgroup .navbox-group, #articleContent .navbox-subgroup .navbox-abovebelow {
   background: #e6e6ff;     /* Level 3 color */
 }
-.navbox-even {
+#articleContent .navbox-even {
   background: #f7f7f7;     /* Even row striping */
 }
-.navbox-odd {
+#articleContent .navbox-odd {
   background: transparent; /* Odd row striping */
 }
 
-.collapseButton {          /* 'show'/'hide' buttons created dynamically */
+#articleContent .collapseButton {          /* 'show'/'hide' buttons created dynamically */
     float: right;          /* by the CollapsibleTables javascript in    */
     font-weight: normal;   /* [[MediaWiki:Common.js]]are styled here    */
     text-align: right;     /* so they can be customised.                */
     width: auto;
 }
-.navbox .collapseButton {  /* In navboxes, the show/hide button balances */
+#articleContent .navbox .collapseButton {  /* In navboxes, the show/hide button balances */
     width: 6em;            /* the vde links from [[Template:Tnavbar]],   */
 }                          /* so they need to be the same width.         */
 
@@ -2395,7 +2395,7 @@ table.navbox th {
 
 
 /* Infobox template style */
-.infobox {
+#articleContent .infobox {
     border: 1px solid #aaa;
     background-color: #f9f9f9;
     color: black;
@@ -2404,89 +2404,88 @@ table.navbox th {
     float: right;
     clear: right;
 }
-.infobox td,
-.infobox th {
+#articleContent .infobox td,
+#articleContent .infobox th {
     vertical-align: top;
 }
-.infobox caption {
+#articleContent .infobox caption {
     font-size: larger;
 }
-.infobox.bordered {
+#articleContent .infobox.bordered {
     border-collapse: collapse;
 }
-.infobox.bordered td,
-.infobox.bordered th {
+#articleContent .infobox.bordered td,
+#articleContent .infobox.bordered th {
     border: 1px solid #aaa;
 }
-.infobox.bordered .borderless td,
-.infobox.bordered .borderless th {
+#articleContent .infobox.bordered .borderless td,
+#articleContent .infobox.bordered .borderless th {
     border: 0;
 }
 
-.infobox.sisterproject {
+#articleContent .infobox.sisterproject {
     width: 20em;
     font-size: 90%;
 }
 
-.infobox.standard-talk {
+#articleContent .infobox.standard-talk {
     border: 1px solid #c0c090;
     background-color: #f8eaba;
 }
-.infobox.standard-talk.bordered td,
-.infobox.standard-talk.bordered th {
+#articleContent .infobox.standard-talk.bordered td,
+#articleContent .infobox.standard-talk.bordered th {
     border: 1px solid #c0c090;
 }
 
 /* styles for bordered infobox with merged rows */
-.infobox.bordered .mergedtoprow td,
-.infobox.bordered .mergedtoprow th {
+#articleContent .infobox.bordered .mergedtoprow td,
+#articleContent .infobox.bordered .mergedtoprow th {
     border: 0;
     border-top: 1px solid #aaa;
     border-right: 1px solid #aaa;
 }
 
-.infobox.bordered .mergedrow td,
-.infobox.bordered .mergedrow th {
+#articleContent .infobox.bordered .mergedrow td,
+#articleContent .infobox.bordered .mergedrow th {
     border: 0;
     border-right: 1px solid #aaa;
 }
 
 /* Styles for geography infoboxes, eg countries,
    country subdivisions, cities, etc.            */
-.infobox.geography {
+#articleContent .infobox.geography {
     text-align: left;
     border-collapse: collapse;
     line-height: 1.2em; 
     font-size: 90%;
 }
 
-.infobox.geography  td,
-.infobox.geography  th {
+#articleContent .infobox.geography  td,
+#articleContent .infobox.geography  th {
     border-top: solid 1px #aaa;
     padding: 0.4em 0.6em 0.4em 0.6em;
 }
-.infobox.geography .mergedtoprow td,
-.infobox.geography .mergedtoprow th {
+#articleContent .infobox.geography .mergedtoprow td,
+#articleContent .infobox.geography .mergedtoprow th {
     border-top: solid 1px #aaa;
     padding: 0.4em 0.6em 0.2em 0.6em;
 }
 
-.infobox.geography .mergedrow td,
+#articleContent .infobox.geography .mergedrow td,
 .infobox.geography .mergedrow th {
     border: 0;
     padding: 0 0.6em 0.2em 0.6em;
 }
 
-.infobox.geography .mergedbottomrow td,
-.infobox.geography .mergedbottomrow th {
+#articleContent .infobox.geography .mergedbottomrow td,
+#articleContent .infobox.geography .mergedbottomrow th {
     border-top: 0;
     border-bottom: solid 1px #aaa;
     padding: 0 0.6em 0.4em 0.6em;
 }
 
-.infobox.geography .maptable td,
-.infobox.geography .maptable th {
+#articleContent .infobox.geography .maptable td,
+#articleContent .infobox.geography .maptable th {
     border: 0;
     padding: 0;
 }
-
diff --git a/index.html b/index.html
index eaf70954..3a4782b7 100644
--- a/index.html
+++ b/index.html
@@ -1,100 +1,106 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-
-        <title>Evopedia</title>
-        <meta name="description" content="Offline wikipedia reader"> 
-        <meta name="viewport" content="width=device-width">
-        <!--
-        Port of Evopedia (offline wikipedia reader) in HTML5/Javascript, with Firefox OS as the primary target
-        The original application is at http://www.evopedia.info/
-        It uses wikipedia dumps located at http://dumpathome.evopedia.info/dumps/finished
-        
-        Author : Mossroy - mossroy@free.fr
-        Math image algorithm contributed by christian@evopedia.info
-        
-        License:
-        
-            This program is free software; you can redistribute it and/or modify it
-            under the terms of the GNU General Public License as published by the
-            Free Software Foundation; either version 3 of the License, or (at your
-            option) any later version.
-        
-            This program is distributed in the hope that it will be useful, but
-            WITHOUT ANY WARRANTY; without even the implied warranty of
-            MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
-            General Public License for more details.
-        
-            You should have received a copy of the GNU General Public
-            License along with this program; if not, see
-            <http://www.gnu.org/licenses/>.
-        
-        -->
-
-        <link rel="stylesheet" href="css/mediawiki-main.css">
-    </head>
-    <body>
-        <h1>Evopedia</h1>
-        <input type="button" id="showHideAbout" value="About" />
-        <div id="about" style="display: none;">
-            This is a preliminary work on the port of Evopedia (offline wikipedia reader) in HTML5/Javascript, with Firefox OS as the primary target
-            <br />
-            The original application is at <a href="http://www.evopedia.info/">http://www.evopedia.info/</a>
-            <br />
-            <br />
-            To use it, you have to first download locally a dump from <a href="http://dumpathome.evopedia.info/dumps/finished">http://dumpathome.evopedia.info/dumps/finished</a> (with a Bittorrent client).
-            <br />
-            <ul>
-                <li>On desktops, it works on recent Firefox and Chrome, and maybe on other browsers. In this case, you have to select manually some files from your dump (see below)</li>
-                <li>On the Firefos OS simulator, you have to put the archive files in a "fake-sdcard" folder of your firefox profile (ex : ~/.mozilla/firefox/xxxx.default/extensions/r2d2b2g@mozilla.org/profile/fake-sdcard). It looks for file titles.idx in it. You need to install the application from the dashboard of the simulator (due to security restrictions in Firefox OS : only certified webapps can access the sdcard)</li>
-                <li>On a real Firefox OS device, you simply have to put the archive files anywhere in your sdcard, so that it finds titles.idx on it. For now, the application has to be installed manually (use the push feature of the Firefos OS Simulator)</li>
-            </ul>
-            <br />
-            It's still a beta version : there are many many ways this could be enhanced (suggestions and patches are welcome : the source code is on <a href="https://github.com/mossroy/evopedia-html5">github</a>). In particular :
-            <ul>
-                <li>The performance has to be optimized when searching titles and reading an article</li>
-                <li>Some searches (for example with prefix "a" on the French dump) do not give any result even if they should</li>
-                <li>In some cases, the links inside an article do not work, or do not lead to the right article</li>
-                <li>It is not easy to use on the Peak device from Geeksphone because the buttons and inputs are too small</li>
-                <li>Some features of the original application still have to be implemented : in particular geolocation of articles</li>
-            </ul>
-            The <a href="https://github.com/mossroy/evopedia-html5/issues">bugtracker</a> is on github too.
-        </div>
-        <div id="openLocalFiles" style="display: none;">
-            <br /> Please select the file titles.idx :<br /> <input type="file"
-                                                                    id="titleFile" /><br /> Please select the files wikipedia_*.dat
-            from the same dump :<br /> <input type="file" id="dataFiles" multiple />
-            <br /> Please select the file math.idx from the same dump:<br /> <input type="file"
-                                                                                    id="mathIndexFile" /><br /> Please select the file math.dat from the
-            same dump:<br /> <input type="file" id="mathDataFile" /><br />
-        </div>
-        <div id="scanningForArchives" style="display: none;">
-            <br /> Scanning your sdcard for archives... Please wait <img src="img/spinner.gif" />
-        </div>
-        <div id="chooseArchiveFromLocalStorage" style="display: none;">
-            <br /> Please select the archive you want to use : <select id="archiveList"></select>
-        </div>
-        <br /> Find titles starting with :
-        <input type="text" id="prefix" value="" />&nbsp;
-        <input type="button" id="searchTitles" value="Search titles" />
-        <img id="searchingForTitles" src="img/spinner.gif"  style="display: none;"/>
-        <br /> Choose a title from the filtered list :
-        <select id="titleList"></select>
-        <br />
-        <input type="button" id="readData" value="Read article from dump" />
-        <div id="readingArticle" style="display: none;">
-            Reading article <span id="articleName"></span> from dump... Please wait <img src="img/spinner.gif" />
-        </div>
-        <div id="articleContent">&nbsp;</div>
-        <hr />
-
-        <!-- Using require.js, a module system for javascript, include the
-             js files. This loads "main.js", which in turn can load other
-             files, all handled by require.js:
-             http://requirejs.org/docs/api.html#jsfiles -->
-        <script type="text/javascript"
-                data-main="js/init.js"
-        src="js/lib/require.js"></script>
-    </body>
-</html>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+
+        <title>Evopedia</title>
+        <meta name="description" content="Offline wikipedia reader"> 
+        <meta name="viewport" content="width=device-width">
+        <!--
+        Port of Evopedia (offline wikipedia reader) in HTML5/Javascript, with Firefox OS as the primary target
+        The original application is at http://www.evopedia.info/
+        It uses wikipedia dumps located at http://dumpathome.evopedia.info/dumps/finished
+        
+        Author : Mossroy - mossroy@free.fr
+        Math image algorithm contributed by christian@evopedia.info
+        
+        License:
+        
+            This program is free software; you can redistribute it and/or modify it
+            under the terms of the GNU General Public License as published by the
+            Free Software Foundation; either version 3 of the License, or (at your
+            option) any later version.
+        
+            This program is distributed in the hope that it will be useful, but
+            WITHOUT ANY WARRANTY; without even the implied warranty of
+            MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+            General Public License for more details.
+        
+            You should have received a copy of the GNU General Public
+            License along with this program; if not, see
+            <http://www.gnu.org/licenses/>.
+        
+        -->
+
+        <link rel="stylesheet" href="css/mediawiki-main.css">
+        <link rel="stylesheet" href="css/app.css">
+    </head>
+    <body>
+        <h1>Evopedia</h1>
+        <input type="button" id="showHideAbout" value="About" />
+        <div id="about" style="display: none;">
+            This is a preliminary work on the port of Evopedia (offline wikipedia reader) in HTML5/Javascript, with Firefox OS as the primary target
+            <br />
+            The original application is at <a href="http://www.evopedia.info/">http://www.evopedia.info/</a>
+            <br />
+            <br />
+            To use it, you have to first download locally a dump from <a href="http://dumpathome.evopedia.info/dumps/finished">http://dumpathome.evopedia.info/dumps/finished</a> (with a Bittorrent client).
+            <br />
+            <ul>
+                <li>On desktops, it works on recent Firefox and Chrome, and maybe on other browsers. In this case, you have to select manually some files from your dump (see below)</li>
+                <li>On the Firefos OS simulator, you have to put the archive files in a "fake-sdcard" folder of your firefox profile (ex : ~/.mozilla/firefox/xxxx.default/extensions/r2d2b2g@mozilla.org/profile/fake-sdcard). It looks for file titles.idx in it. You need to install the application from the dashboard of the simulator (due to security restrictions in Firefox OS : only certified webapps can access the sdcard)</li>
+                <li>On a real Firefox OS device, you simply have to put the archive files anywhere in your sdcard, so that it finds titles.idx on it. For now, the application has to be installed manually (use the push feature of the Firefos OS Simulator)</li>
+            </ul>
+            <br />
+            It's still a beta version : there are many many ways this could be enhanced (suggestions and patches are welcome : the source code is on <a href="https://github.com/mossroy/evopedia-html5">github</a>). In particular :
+            <ul>
+                <li>The performance has to be optimized when searching titles and reading an article</li>
+                <li>Some searches (for example with prefix "a" on the French dump) do not give any result even if they should</li>
+                <li>In some cases, the links inside an article do not work, or do not lead to the right article</li>
+                <li>It is not easy to use on the Peak device from Geeksphone because the buttons and inputs are too small</li>
+                <li>Some features of the original application still have to be implemented : in particular geolocation of articles</li>
+            </ul>
+            The <a href="https://github.com/mossroy/evopedia-html5/issues">bugtracker</a> is on github too.
+        </div>
+        <div id="openLocalFiles" style="display: none;">
+            <br /> Please select the file titles.idx :<br /> <input type="file"
+                                                                    id="titleFile" /><br /> Please select the files wikipedia_*.dat
+            from the same dump :<br /> <input type="file" id="dataFiles" multiple />
+            <br /> Please select the file math.idx from the same dump:<br /> <input type="file"
+                                                                                    id="mathIndexFile" /><br /> Please select the file math.dat from the
+            same dump:<br /> <input type="file" id="mathDataFile" /><br />
+        </div>
+        <div id="scanningForArchives" style="display: none;">
+            <br /> Scanning your sdcard for archives... Please wait <img src="img/spinner.gif" />
+        </div>
+        <div id="chooseArchiveFromLocalStorage" style="display: none;">
+            <br /> Please select the archive you want to use : <select id="archiveList"></select>
+        </div>
+        <br /> Find titles starting with :
+        <input type="text" id="prefix" value="" />&nbsp;
+        <input type="button" id="searchTitles" value="Search titles" />
+        <img id="searchingForTitles" src="img/spinner.gif"  style="display: none;"/>
+        <br /><br /> Choose a title from the filtered list :
+        <select id="titleList"></select>
+        <br />
+        <br />
+        <input type="button" id="readData" value="Read article from dump" />
+        <div id="readingArticle" style="display: none;">
+            Reading article <span id="articleName"></span> from dump... Please wait <img src="img/spinner.gif" />
+        </div>
+        <div id="articleContent">&nbsp;</div>
+        <br />
+        <div id="navigationButtons">
+            <input type="button" id="btnBack" value="Back"/>
+            <input type="button" id="btnForward" value="Forward"/>
+        </div>
+
+        <!-- Using require.js, a module system for javascript, include the
+             js files. This loads "main.js", which in turn can load other
+             files, all handled by require.js:
+             http://requirejs.org/docs/api.html#jsfiles -->
+        <script type="text/javascript"
+                data-main="js/init.js"
+        src="js/lib/require.js"></script>
+    </body>
+</html>
diff --git a/js/app.js b/js/app.js
index 1750edcb..6b201da1 100644
--- a/js/app.js
+++ b/js/app.js
@@ -31,7 +31,12 @@ define(function(require) {
     $('#prefix').on('keyup', function(e) {
         onKeyUpPrefix(e);
     });
-
+    $('#btnBack').on('click', function(e) {
+        history.back();
+    });
+    $('#btnForward').on('click', function(e) {
+        history.forward();
+    });
 
     // Detect if DeviceStorage is available
     var storage = null;