diff --git a/images/main.css b/images/main.css
new file mode 100644
index 0000000..44baf6d
--- /dev/null
+++ b/images/main.css
@@ -0,0 +1,1150 @@
+/*
+ # MediaWiki 'glamdrol' style sheet
+ # Copyright (C) 2005 by Jordą Polo <jorda AT ettin DOT org>
+ #
+ # Based on 'monobook', by Gabriel Wicke
+ #
+ # This style sheet is free software; you can redistribute it and/or
+ # modify it under the terms of the GNU General Public License.
+ # This style is distributed in the hope that it will be useful,
+ # but WITHOUT ANY WARRANTY.
+ #
+ # See http://www.gnu.org/copyleft/gpl.html for more details
+ */
+
+/*
+ # Table of Contents:
+ #
+ # 1 General styles (links, lists, titles, tables...)
+ # 2 Header
+ # 3 Navigation
+ # 4 Main
+ # 5 Footer
+ # 6 Mediawiki specific styles
+ # 7 Other/Unknow
+ */
+
+/*
+ # Order:
+ #
+ # example {
+ #   display
+ #   position
+ #   width
+ #   height
+ #   margin
+ #   padding
+ #   background
+ #   color
+ #   font
+ #   text
+ #   line-height
+ #   border
+ # }
+ */
+
+
+/*
+ * 1. General styles
+ */
+
+body {
+  margin: 0;
+  padding: 0;
+  background: #FFFBF0;
+  color: #111;
+  font: 0.88em sans-serif;
+}
+
+#global {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  font-size: 0.95em;
+}
+
+p {
+  margin: 0.4em 0em 0.5em 0em;
+  line-height: 1.6em;
+}
+
+img {
+  border: none;
+  vertical-align: middle;
+}
+
+p img {
+  margin: 0;
+}
+
+hr {
+  height: 1px;
+  margin: 0.2em 0 0.2em 0;
+  background: #BBB;
+  color: #BBB;
+  border: 0;
+}
+
+/* links */
+
+a {
+  color: #259;
+}
+
+/*
+a:visited {
+  color: #959;
+  color: #755499;
+  color: #5F5399;
+}
+*/
+
+a.new {
+  color: #BA3311;
+}
+
+a.stub {
+  color: #723;
+}
+
+/* titles */
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  padding: 0.7em 0 0.17em 0;
+  background: none;
+  color: #333;
+  font-family: Junicode, Baskerville, FreeSerif, "Times New Roman", serif;
+  font-weight: bold;
+}
+
+h2 { 
+  color: #111;
+  border-bottom: 1px solid #BBB;
+}
+
+h4, h5, h6 {
+  color: #555;
+  font-family: Arial, sans-serif;
+}
+
+h1 { font-size: 185%; }
+h2 { font-size: 160%; }
+h3 { font-size: 140%; }
+
+h4 { font-size: 105%; }
+h5 { font-size: 95%; }
+h6 { font-size: 90%; }
+
+/* lists */
+
+ul {
+  margin: 0.3em 0 0 1.5em;
+  padding: 0;
+  line-height: 1.6em;
+  list-style-type: square;
+  list-style-image: url('bullet.gif');
+}
+
+ol {
+  margin: 0.3em 0 0 3.2em;
+  padding: 0;
+  line-height: 1.6em;
+  list-style-image: none;
+}
+
+li {
+  margin-bottom: 0.1em;
+}
+
+dt {
+  margin-bottom: 0.1em;
+  font-weight: bold;
+}
+
+dl{
+  margin-top: 0.2em;
+  margin-bottom: 0.5em;
+}
+
+dd {
+  margin-left: 2em;
+  margin-bottom: 0.1em;
+  line-height: 1.6em;
+}
+
+/* tables */
+
+table {
+  font-size: 100%;
+  border-spacing: 0;
+}
+
+table td, table th {
+  padding: 3px;
+}
+
+/* forms */
+
+form {
+  margin: 0 0 1em 0;
+  border: none;
+}
+
+fieldset {
+  margin: 1em 0 1em 0;
+  padding: 0 1em 1em 1em;
+  line-height: 1.5em;
+  border: 1px solid #AAA;
+}
+
+legend {
+  padding: 0.5em;
+  font-size: 95%;
+}
+
+textarea {
+  padding: 0.1em;
+  background: #FFF;
+  color: #000;
+}
+html>body textarea {
+  width: 100%;
+}
+
+input.historysubmit {
+  height: 1.7em !important;
+  margin-left: 1.6em;
+  padding: 0 0.3em 0.3em 0.3em !important;
+  font-size: 94%;
+  cursor: pointer;
+}
+
+select {
+  vertical-align: top;
+}
+
+abbr, acronym, .explain {
+  border-bottom: 1px dotted #000;
+  color: #000;
+  background: none;
+  cursor: help;
+}
+
+q {
+  font-family: Times, "Times New Roman", serif;
+  font-style: italic;
+}
+
+code {
+  background: #FBF5EA;
+  font-size: 1.1em;
+}
+
+pre {
+  overflow: auto;
+  padding: 0.8em 0.5em;
+  background: #FBF5EA;
+  font-size: 1.1em;
+  line-height: 1.1em;
+  border: 1px dashed #918875;
+}
+
+blockquote {
+  padding: 0.8em 0.5em;
+  background: #FBF5EA;
+  border: 1px solid #EDC;
+}
+
+
+/*
+ * 3. Header
+ */
+
+#header {
+  margin: 0;
+  padding: 0;
+  background: #444 url('headerbg.jpg') top repeat-x;
+  border-bottom: 1px solid #000;
+}
+
+#header #logo {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+#header #logo img {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+#header #logo a {
+  margin: 0;
+  padding: 0;
+  color: #654;
+  text-decoration: none;
+  font-size: 0.8em;
+}
+
+
+/*
+ * 3. Navigation
+ */
+
+#nav {
+  margin: 0;
+  padding: 3px 4px 15px 4px;
+  background: #272727 url('navbg.png') repeat-x bottom;
+  text-align: center;
+  border-top: 1px solid #595959;
+}
+
+#nav ul, #nav li {
+  display: inline;
+  margin: 0;
+  padding: 0;
+}
+
+#nav li {
+  padding: 0 5px;
+}
+
+#nav a {
+  /*color: #A74;*/
+  /*color: #DBB672;*/
+  color: #B48648;
+  font-family: "Trebuchet MS", sans-serif;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+#nav a:hover {
+  color: #CCC;
+}
+
+
+/*
+ * 4. Main
+ */
+
+#main {
+  margin: 0 8% 0 8%;
+  padding: 0 10px;
+  line-height: 1.6em;
+}
+html>body #main {
+  margin: 0 auto;
+  width: auto;
+  max-width: 66em;
+}
+
+#content {
+  margin: 10px 22px; 
+}
+
+#lastmod {
+  margin: 10px 0; 
+  padding: 8px 0;
+  font-size: 0.85em;
+}
+
+/* front page - feature */
+
+#feature {
+  margin: 6px auto 0 auto;
+  padding: 0px 8px;
+  color: #000;
+}
+
+#feature #overview {
+  margin-right: 2px;
+  padding: 12px 12px 0 12px;
+  background: url('portrait.jpg') bottom right no-repeat;
+}
+
+#overview h2 {
+  width: 70%;
+  margin: 0 0 0.5em 0;
+  padding: 12px 12px 0 12px;
+  color: #000;
+  font-size: 1.8em;
+  border: none;
+}
+
+#overview p {
+  width: 70%;
+  margin: 0 0 0.5em 0;
+  padding: 0.5em 12px 4px 12px;
+}
+
+#overview p.download {
+  margin: 0;
+}
+
+#overview p.down {
+  margin: 0;
+  padding: 0;
+}
+
+#overview ul {
+  width: 70%;
+  margin: 0 0 0 0;
+  padding: 0 12px 12px 12px;
+  font-size: 0.9em;
+}
+
+#overview li {
+  display: inline;
+  margin: 0;
+  padding: 0 12px 0 0;
+}
+
+#overview li a {
+  color: #421;
+  font-family: Junicode, Baskerville, FreeSerif, "Times New Roman", serif;
+  font-size: 1.5em;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+#corner_topleft, #corner_topright,
+#corner_bottomleft,#corner_bottomright {
+  background-color: transparent;
+  background-repeat: no-repeat;
+}
+
+#corner_topleft {
+	background-image:url(borders/corner-topleft.png);
+	background-position: 0% 0%;
+}
+
+#corner_topright {
+	background-image:url(borders/corner-topright.png);
+	background-position: 100% 0%;
+}
+	
+#corner_bottomleft {
+	background-image:url(borders/corner-bottomleft.png);
+	background-position: 0% 100%;
+}
+
+#corner_bottomright {
+	background-image:url(borders/corner-bottomright.png);
+	background-position: 100% 100%;
+}
+
+#border_top, #border_bottom {
+	background-color: transparent;
+	background-repeat: repeat-x;
+}
+			
+#border_top {
+  background-image:url(borders/border-top.png);
+  background-position: 0% 0%;
+}
+
+#border_bottom {
+  background-image:url(borders/border-bottom.png);
+  background-position: 50% 100%;
+}
+	
+#border_right {
+  background-image:url(borders/border-right.png);
+  background-position: 100% 0%;
+  background-repeat: repeat-y;
+}
+
+#border_left {
+  background-color: #272727;
+  background-color: #6F5C4E;
+  background-color: #e7d9c0;
+  background-image:url(borders/border-left.png);
+  background-position: 0% 100%;
+  background-repeat: repeat-y;
+}
+
+/* front page */
+
+#main div.front {
+  margin: 18px auto 0 auto;
+  padding: 0px 8px;
+}
+
+#main div.highlight {
+  float: left;
+  width: 27%;
+  margin-right: 3%;
+}
+
+#main div.column {
+  float: left;
+  width: 67%;
+}
+
+#main div.column p.date {
+  font-size: 0.95em;
+  font-style: italic;
+}
+
+#main div.news {
+  margin-bottom: 1.4em;
+}
+
+
+/*
+ * 5. Footer
+ */
+
+#footer {
+  margin: 10px 22px; 
+  padding: 10px 0;
+  font-size: 0.85em;
+  border-top: 1px solid #999;
+}
+
+#footer a {
+  color: #333;
+}
+
+#footer .portlet a {
+  color: #246;
+}
+
+#footer .portlet a.new,  #p-cactions .new a {
+  color: #900;
+}
+
+#note {
+  margin-top: 10px;
+  padding-top: 5px;
+  text-align: left;
+}
+
+#note p {
+  text-align: left;
+  line-height: 1em;
+}
+
+/* ------------------------------------------------------------------ */
+
+div.navtemplate {
+  padding: 0.3em 0.4em;
+  background: #FBF5EA;
+  border: 1px solid #EDC;
+}
+
+/*
+ * 6. Mediawiki specific styles
+ */
+
+.visualClear {
+  clear: both;
+}
+
+.error {
+  color: red;
+}
+
+/* links */
+
+#bodyContent a[href ^="http://"], #bodyContent a[href ^="gopher://"] {
+  padding-right: 13px;
+  background: url(external.png) center right no-repeat;
+}
+
+#bodyContent a[href ^="http://www.wesnoth.org"] {
+  padding-right: 0;
+  background: none;
+}
+
+#bodyContent a[href ^="https://"], .link-https {
+  padding-right: 16px;
+  background: url("lock_icon.gif") center right no-repeat;
+}
+
+#bodyContent a[href ^="mailto:"], .link-mailto {
+  padding-right: 18px;
+  background: url("mail_icon.gif") center right no-repeat;
+}
+
+#bodyContent a[href ^="news://"] {
+  padding-right: 18px;
+  background: url("news_icon.png") center right no-repeat;
+}
+
+#bodyContent a[href ^="ftp://"], .link-ftp {
+  padding-right: 18px;
+  background: url("file_icon.gif") center right no-repeat;
+}
+
+#bodyContent a[href ^="irc://"], .link-irc {
+  padding-right: 18px;
+  background: url("discussionitem_icon.gif")  center right no-repeat;
+}
+
+/*
+#bodyContent a.external {
+  color: #BB6633;
+}
+*/
+
+/* disable interwiki styling */
+
+#bodyContent a.extiw, #bodyContent a.extiw:active {
+  padding: 0;
+  background: none;
+  color: #B63;
+}
+
+/* this can be used in the content area to switch off special external link styling */
+
+/*
+#bodyContent .plainlinks a {
+  padding: 0;
+  background: none !important;
+}
+*/
+
+/* emulate center */
+
+.center {
+  width: 100%;
+  text-align: center;
+}
+
+*.center * {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* small for tables and similar */
+
+.small, .small * {
+  font-size: 94%;
+}
+
+table.small {
+  font-size: 100%;
+}
+
+/* username icon */
+
+li#pt-userpage, li#pt-anonuserpage, li#pt-login {
+  padding-left: 20px;
+  background: url('user.gif') top left no-repeat;
+  text-transform: none;
+}
+
+/* user notification */
+
+.usermessage {
+  margin: 2em 0em 1em 0em;
+  padding: 0.5em 1em;
+  background-color: #FFCE7B;
+  color: black;
+  font-weight: bold;
+  vertical-align: middle;
+  border: 1px solid #FFA500;
+}
+
+#siteNotice {
+  padding: 0 0.9em 0 0.9em;
+  font-size: 95%;
+  text-align: center;
+}
+
+#siteNotice p {
+  margin: 0;
+  padding: 0;
+}
+
+#catlinks {
+  clear: both;
+  margin-top: 1em;
+  padding:5px;
+  background: #FBF5EA;
+  border: 1px solid #918875;
+}
+
+/* portlets - general */
+
+.portlet {
+  margin: 0 0 0.7em 0;
+  padding: 0;
+}
+
+.portlet ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.portlet li {
+  display: inline;
+  margin: 0;
+  padding: 0 8px 0 0;
+  list-style: none;
+}
+
+#p-cactions, #p-personal {
+  float: left;
+  width: 50%;
+}
+
+#p-tb, #p-fixed {
+  float: right;
+  width: 49.9%;
+  text-align: right;
+}
+
+#p-tb li, #p-fixed li {
+  padding: 0 0 0 8px;
+}
+
+/* portlets - search */
+
+input.searchButton {
+  font-size: 95%;
+}
+
+#searchGoButton {
+  padding-left: .5em;
+  padding-right: .5em;
+  font-weight: bold;
+}
+
+#searchInput {
+  width:10.9em;
+  margin: 0;
+}
+
+/* history & diff rendering */
+
+.autocomment {
+  color: gray;
+}
+
+#pagehistory span.user {
+  margin-left: 1.4em;
+  margin-right: 0.4em;
+}
+
+#pagehistory span.minor {
+  font-weight: bold;
+}
+
+#pagehistory li {
+  padding: 1px;
+  border: 1px solid transparent;
+}
+
+#pagehistory li.selected {
+  background: #FBF5EA;
+  border: 1px dotted #BBB;
+}
+
+table.diff {
+  background: #FFF;
+}
+
+td.diff-otitle {
+  background: #FFF;
+}
+
+td.diff-ntitle {
+  background: #FFF;
+}
+
+td.diff-addedline {
+  background: #CFC;
+  font-size: 90%;
+}
+
+td.diff-deletedline {
+  background:#FFA;
+  font-size: 90%;
+}
+
+td.diff-context {
+  background:#EEE;
+  font-size: 90%;
+}
+
+span.diffchange {
+  color: red;
+  font-weight: bold;
+}
+
+/* table of contents */
+
+#toc, .toc {
+  padding: 5px;
+  background: #FAF3E9;
+  border: 1px solid #AAA;
+}
+
+#toc h2, .toc h2 {
+  display: inline;
+  padding: 0;
+  font-size: 1.2em;
+  border: none;
+}
+
+#toc #toctitle, .toc #toctitle, #toc .toctitle, .toc .toctitle {
+  text-align: center;
+}
+
+#toc ul, .toc ul {
+  margin-left: 0;
+  padding-left: 0;
+  text-align: left;
+  list-style-type: none;
+  list-style-image: none;
+}
+
+#toc ul ul, .toc ul ul {
+  margin: 0 0 0 1.5em;
+}
+
+#toc .toctoggle, .toc .toctoggle {
+  font-size: 94%;
+}
+
+/* main content area */
+
+#siteSub {
+  display: none;
+}
+
+#contentSub {
+  width: auto;
+  margin: 0 0 1.4em 1em;
+  color: #7d7d7d;
+  font-size: 84%;
+  line-height: 1.2em;
+}
+
+span.subpages {
+  display: block;
+}
+
+/* space under the headers */
+
+#bodyContent h1, #bodyContent h2 {
+  margin-bottom:0.6em;
+}
+
+#bodyContent h3, #bodyContent h4, #bodyContent h5 {
+    margin-bottom: 0.3em;
+}
+
+.firstHeading {
+  margin-bottom:0.1em;
+}
+
+/* content styles */
+
+.editsection {
+  margin-top: 1.5em;
+  font-size: 85%;
+}
+
+/* images */
+
+div.floatright, table.floatright {
+  clear: right;
+  float: right;
+  position: relative;
+  margin: 0 0 0.5em 0.5em;
+  border: 0
+}
+
+div.floatright p {
+  font-style: italic;
+}
+
+div.floatleft, table.floatleft {
+  float: left;
+  position: relative;
+  margin: 0 0.5em 0.5em 0;
+  border: 0
+}
+
+div.floatleft p {
+  font-style: italic;
+}
+
+/* thumbnails */
+
+div.thumb {
+  width: auto;
+  margin-bottom: 0.5em;
+  border-style: solid; border-color: #FFFBF0;
+}
+
+div.thumb div {
+  overflow: hidden;
+  /*padding: 3px !important;*/
+  background-color: #EBE5DA;
+  font-size: 0.9em;
+  text-align: center;
+  border:1px solid #A7A091;
+}
+
+div.thumb div a img {
+  margin: 0.3em 0.4em;
+  /*border:1px solid #cccccc;*/
+  border: none;
+}
+
+div.thumb div div.thumbcaption {
+  margin: 0 0.4em 0.3em 0.4em;
+  text-align: left;
+  line-height: 1.4em;
+  border: none;
+}
+
+div.magnify {
+  float: right;
+  background: none !important;
+  border: none !important;
+}
+
+div.magnify a, div.magnify img {
+  display: block;
+  background: none !important;
+  border: none !important;
+}
+
+div.tright {
+  clear: right;
+  float: right;
+  border-width: 0.5em 0 0.8em 1.4em;
+}
+
+div.tleft {
+  float: left;
+  margin-right:0.5em;
+  border-width: 0.5em 1.4em 0.8em 0;
+}
+
+.urlexpansion, .hiddenStructure {
+  display: none;
+}
+
+img.tex { vertical-align: middle; }
+span.texhtml { font-family: serif; }
+
+/* special content elements */
+
+/* user styles */
+
+/* table standards */
+
+table.rimage {
+  float:right;
+  position:relative;
+  margin-left:1em;
+  margin-bottom:1em;
+  text-align:center;
+}
+
+.toccolours {
+  background-color: #f9f9f9;
+  padding: 5px;
+  font-size: 95%;
+  border: 1px solid #aaaaaa;
+}
+
+div.townBox {
+  width: 200px;
+  float: right;
+  clear: right;
+  position: relative;
+  overflow: hidden;
+  margin-left: 1em;
+  padding: 0.3em;
+  background: #FFF;
+  border: 1px solid gray;
+}
+
+div.townBox dl {
+  padding: 0;
+  margin: 0 0 0.3em 0;
+  font-size: 96%;
+}
+div.townBox dl dt {
+  margin: 0.4em 0 0 0;
+  background: none;
+}
+div.townBox dl dd {
+  margin: 0.1em 0 0 1.1em;
+  background-color: #f3f3f3;
+}
+
+/* edit views */
+
+.special li {
+    line-height: 1.4em;
+    margin: 0;
+    padding: 0;
+}
+
+/* structural Elements */
+
+form#blockip table {
+  background: transparent;
+}
+
+form#makesysop table {
+  background: transparent;
+}
+
+form#userlogin table {
+  background: transparent;
+}
+
+/* js pref toc */
+
+#preftoc { 
+  width: 13em;
+  float: left;
+  margin: 1em;
+  background: #FFF;
+  border: 1px solid #AAA;
+}
+
+#preftoc li { 
+  list-style: none;
+  border: 1px solid transparent; 
+}
+
+#preftoc li.selected { 
+  background: Highlight;
+  border:1px solid #aaaaaa;
+}
+
+#preftoc li.selected a {
+  color: HighlightText;
+}
+
+#preftoc a, #preftoc a:active {
+  display: block;
+  padding: 2px 4px;
+  text-decoration: none;
+}
+
+#prefcontrol { 
+  clear: both;
+  float: left;
+  margin-top: 1em;
+}
+
+div.prefsectiontip { 
+  margin-top: 1em;
+  font-size: 95%;
+}
+
+fieldset.operaprefsection {
+  margin-left: 15em;
+}
+
+.prefsection div {
+}
+
+.redirectText {
+  margin:5px;
+  font-size:150%;
+}
+
+.printfooter {
+  display: none;
+}
+
+.not_patrolled {
+  background-color: #ffa;
+}
+
+div.patrollink {
+  font-size: 75%;
+  text-align: right;
+}
+
+span.newpage, span.minor, span.searchmatch {
+  font-weight: bold;
+}
+
+span.unpatrolled {
+  font-weight:bold;
+  color:red;
+}
+
+span.searchmatch {
+	color: red;
+}
+
+small {
+  font-size: 90%;
+}
+
+.sharedUploadNotice {
+  font-style: italic;
+}
+
+span.updatedmarker {
+  background-color:#00FF00;
+  color:black;
+}
+span.newpageletter {
+  background-color:yellow;
+  color:black;
+  font-weight:bold;
+}
+span.minoreditletter {
+  color:black;
+  background-color:#C5FFE6;
+}
+
+table.gallery {
+  margin:  2px;
+  padding: 2px;
+  background-color:#ffffff;
+  border:  1px solid #cccccc;
+}
+
+table.gallery tr {
+  vertical-align:top;
+}
+
+table.gallery td {
+  vertical-align:top;
+  background-color:#f9f9f9;
+  border: solid 2px white;
+}
+
+div.gallerybox {
+  width:  150px;
+  margin: 2px;
+}
+
+div.gallerybox div.thumb {
+  margin: 2px;
+  text-align: center;
+  border: 1px solid #cccccc;
+}
+
+div.gallerytext {
+  padding: 2px 4px;
+  font-size: 94%;
+}
+
+
+/*
+ * 7. Other/Unknow
+ */
+
+#ca-unprotect a {
+  text-transform: capitalize;
+}
diff --git a/images/old.css b/images/old.css
new file mode 100644
index 0000000..06fa39c
--- /dev/null
+++ b/images/old.css
@@ -0,0 +1,233 @@
+body {
+	margin: 0;
+	padding: 0;
+	background: #FFFBF0;
+	color: #111;
+	font: 0.88em sans-serif;
+}
+
+p {
+  margin: 0 0 1em 0;
+}
+
+table.main {
+	background: #8b898b;
+}
+
+table.title {
+	background: #ececec;
+}
+
+tr.row-0 {
+	background: #ececec;
+}
+
+tr.row-1{
+	background: #ccecec;
+}
+
+tr.header {
+	background: #dddddd;
+}
+
+td.title {
+	font-weight: bold;
+}
+
+td.percentage-0 {
+	background: #f5f5f5;
+}
+
+td.percentage-1 {
+	background: #e0f5f5;
+}
+
+td.translated {
+	color: #05a505;
+	text-align: center;
+	font-weight: bold;
+}
+
+td.fuzzy {
+	color: #0505a5;
+	text-align: center;
+	font-weight: bold;
+}
+
+td.untranslated {
+	color: #a50505;
+	text-align: center;
+}
+
+h4 {
+  margin: 1em 0 0 0;
+}
+
+a {
+  color: #A48736;
+}
+
+hr {
+  display: none;
+}
+
+/**
+ * Main
+ */
+ 
+#main {
+  padding: 0 8% 0 8%;
+  color: #333;
+  font-size: 0.8em;
+  text-align: left;
+  line-height: 1.6em;
+  /* ie5win damn hack */
+  width: 100%;
+}
+
+html>body #main {
+  width: 84%;
+}
+
+/* -------- homepage layout start -------- */
+
+#main #left {
+  position: relative;
+  float: left;
+  width: 49%;
+}
+
+#main #right {
+  position: relative;
+  float: right;
+  width: 50%;
+}
+
+/* -------- homepage layout end -------- */
+
+#main div.container {
+  margin: 15px 3px 15px 3px;
+  padding: 15px;
+  background: #EEE;
+  border: 2px solid #AAA;
+  -moz-border-radius: 4px 4px 4px 4px;
+}
+
+#main div.new {
+  margin: 14px 0 0 0;
+}
+
+#main div.new div.new-title {
+  font-weight: bold;
+}
+
+#main div.new div.new-date {
+  font-size: 0.9em;
+}
+
+#main div.new p {
+  margin: 4px 0 4px 0;
+}
+
+#main div.sshots {
+  text-align: center;
+}
+#main #sshots a:hover {
+  border: none;
+}
+
+#main div.sshots a {
+  text-decoration: none;
+  font-size: 0.7em;
+}
+
+#main img {
+  border: none;
+  margin: 2px 2px 6px 2px;
+  padding: 3px;
+  background: #A48736;
+}
+
+#main h3 {
+  margin: 0;
+  padding: 0;
+}
+
+#main p {
+  margin: 0px 0 1.2em 0;
+}
+
+#main code {
+  font-size: 1.1em;
+}
+
+#main form {
+  margin: 0 0 15px 0;
+}
+
+
+/**
+ * Footer
+ */
+
+#footer {
+  clear: both;
+  margin: 0;
+  padding: 0 8% 0 8%;
+  color: #BBB;
+  font-size: 0.8em;
+  /* ie5win damn hack */
+  width: 100%;
+}
+html>body #footer {
+  width: 84%;
+}
+
+/**
+ * Languages
+ */
+
+#languages {
+  margin: 0;
+  padding: 0;
+  float: left;
+  text-align: left;
+  width: 60%;
+}
+
+#languages div.container {
+  margin: 0 0 12px 0;
+}
+
+#languages h3 {
+  margin: 0;
+  padding: 0;
+  color: #CCC;
+  font-size: 1.0em;
+  font-weight: normal;
+}
+
+#languages ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+#languages li {
+  display: inline;
+  margin: 0;
+  padding: 0 5px 0 0;
+  list-style: none;
+}
+
+/**
+ * Footnotes
+ */
+
+#footnote {
+  margin: 0 0 12px 0;
+  padding: 0;
+  float: right;
+  text-align: right;
+  width: 40%;
+}
diff --git a/statistics.sh b/statistics.sh
index 8041e10..611b635 100755
--- a/statistics.sh
+++ b/statistics.sh
@@ -49,373 +49,8 @@ for BRANCH in $TRUNK $BRANCHES; do
 	<link rel=\"shortcut icon\" type=\"image/png\" href=\"http://www.wesnoth.org/mw/skins/glamdrol/ico.png\" />
 	<title>Battle for Wesnoth</title>
 </head>
-<style type=\"text/css\">
-body {
-  margin: 0;
-  padding: 0;
-  background: #FFFBF0;
-  color: #111;
-  font: 0.88em sans-serif;
-}
-
-#global {
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  font-size: 0.95em;
-}
-
-p {
-  margin: 0.4em 0em 0.5em 0em;
-  line-height: 1.6em;
-}
-
-img {
-  border: none;
-  vertical-align: middle;
-}
-
-p img {
-  margin: 0;
-}
-
-hr {
-  height: 1px;
-  margin: 0.2em 0 0.2em 0;
-  background: #BBB;
-  color: #BBB;
-  border: 0;
-}
-
-/* links */
-
-a {
-  color: #259;
-}
-
-/*
-a:visited {
-  color: #959;
-  color: #755499;
-  color: #5F5399;
-}
-*/
-
-a.new {
-  color: #BA3311;
-}
-
-a.stub {
-  color: #723;
-}
-
-/* titles */
-
-h1, h2, h3, h4, h5, h6 {
-  margin: 0;
-  padding: 0.7em 0 0.17em 0;
-  background: none;
-  color: #333;
-  font-family: Junicode, Baskerville, FreeSerif, \"Times New Roman\", serif;
-  font-weight: bold;
-}
-
-h2 { 
-  color: #111;
-  border-bottom: 1px solid #BBB;
-}
-
-h4, h5, h6 {
-  color: #555;
-  font-family: Arial, sans-serif;
-}
-
-h1 { font-size: 185%; }
-h2 { font-size: 160%; }
-h3 { font-size: 140%; }
-
-h4 { font-size: 105%; }
-h5 { font-size: 95%; }
-h6 { font-size: 90%; }
-
-/* lists */
-
-ul {
-  margin: 0.3em 0 0 1.5em;
-  padding: 0;
-  line-height: 1.6em;
-  list-style-type: square;
-  list-style-image: url('bullet.gif');
-}
-
-ol {
-  margin: 0.3em 0 0 3.2em;
-  padding: 0;
-  line-height: 1.6em;
-  list-style-image: none;
-}
-
-li {
-  margin-bottom: 0.1em;
-}
-
-dt {
-  margin-bottom: 0.1em;
-  font-weight: bold;
-}
-
-dl{
-  margin-top: 0.2em;
-  margin-bottom: 0.5em;
-}
-
-dd {
-  margin-left: 2em;
-  margin-bottom: 0.1em;
-  line-height: 1.6em;
-}
-
-/* tables */
-
-table {
-  font-size: 100%;
-  border-spacing: 0;
-}
-
-table td, table th {
-  padding: 3px;
-}
-
-/*
- * 3. Header
- */
-
-#header {
-  margin: 0;
-  padding: 0;
-  background: #444 url('images/headerbg.jpg') top repeat-x;
-  border-bottom: 1px solid #000;
-}
-
-#header #logo {
-  margin: 0;
-  padding: 0;
-  text-align: center;
-}
-
-#header #logo img {
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-
-#header #logo a {
-  margin: 0;
-  padding: 0;
-  color: #654;
-  text-decoration: none;
-  font-size: 0.8em;
-}
-
-
-/*
- * 3. Navigation
- */
-
-#nav {
-  margin: 0;
-  padding: 3px 4px 15px 4px;
-  background: #272727 url('images/navbg.png') repeat-x bottom;
-  text-align: center;
-  border-top: 1px solid #595959;
-}
-
-#nav ul, #nav li {
-  display: inline;
-  margin: 0;
-  padding: 0;
-}
-
-#nav li {
-  padding: 0 5px;
-}
-
-#nav a {
-  /*color: #A74;*/
-  /*color: #DBB672;*/
-  color: #B48648;
-  font-family: \"Trebuchet MS\", sans-serif;
-  font-weight: bold;
-  text-decoration: none;
-}
-
-#nav a:hover {
-  color: #CCC;
-}
-
-
-/*
- * 4. Main
- */
-
-#main {
-  margin: 0 8% 0 8%;
-  padding: 0 10px;
-  line-height: 1.6em;
-}
-html>body #main {
-  margin: 0 auto;
-  width: auto;
-  max-width: 66em;
-}
-
-#content {
-  margin: 10px 22px; 
-}
-
-#lastmod {
-  margin: 10px 0; 
-  padding: 8px 0;
-  font-size: 0.85em;
-}
-
-/*
- * 5. Footer
- */
-
-#footer {
-  margin: 10px 22px; 
-  padding: 10px 0;
-  font-size: 0.85em;
-  border-top: 1px solid #999;
-}
-
-#footer a {
-  color: #333;
-}
-
-#footer .portlet a {
-  color: #246;
-}
-
-#footer .portlet a.new,  #p-cactions .new a {
-  color: #900;
-}
-
-#note {
-  margin-top: 10px;
-  padding-top: 5px;
-  text-align: left;
-}
-
-#note p {
-  text-align: left;
-  line-height: 1em;
-}
-
-body {
-	margin: 0;
-	padding: 0;
-	background: #FFFBF0;
-	color: #111;
-	font: 0.88em sans-serif;
-}
-
-p {
-  margin: 0 0 1em 0;
-}
-
-table.main {
-	background: #8b898b;
-}
-
-table.title {
-	background: #ececec;
-}
-
-tr.row-0 {
-	background: #ececec;
-}
-
-tr.row-1{
-	background: #ccecec;
-}
-
-tr.header {
-	background: #dddddd;
-}
-
-td.title {
-	font-weight: bold;
-}
-
-td.percentage-0 {
-	background: #f5f5f5;
-}
-
-td.percentage-1 {
-	background: #e0f5f5;
-}
-
-td.translated {
-	color: #05a505;
-	text-align: center;
-	font-weight: bold;
-}
-
-td.fuzzy {
-	color: #0505a5;
-	text-align: center;
-	font-weight: bold;
-}
-
-td.untranslated {
-	color: #a50505;
-	text-align: center;
-}
-
-h4 {
-  margin: 1em 0 0 0;
-}
-
-a {
-  color: #A48736;
-}
-
-hr {
-  display: none;
-}
-
-/**
- * Footer
- */
-
-#footer {
-  clear: both;
-  margin: 0;
-  padding: 0 8% 0 8%;
-  color: #BBB;
-  font-size: 0.8em;
-  /* ie5win damn hack */
-  width: 100%;
-}
-html>body #footer {
-  width: 84%;
-}
-
-/**
- * Footnotes
- */
-
-#footnote {
-  margin: 0 0 12px 0;
-  padding: 0;
-  float: right;
-  text-align: right;
-  width: 40%;
-}
-</style>
-
+<style type=\"text/css\">@import url('images/main.css');</style>
+<link rel=\"stylesheet\" type=\"text/css\" href=\"images/old.css\" />
 <body>
 <div id=\"global\">
 <div id=\"header\">