diff --git a/README b/README
new file mode 100644
index 0000000..93aecbb
--- /dev/null
+++ b/README
@@ -0,0 +1,72 @@
+Bärneruhr
+
+Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach.
+
+1. Benötigte Dateien einbinden
+
+Binde folgende Javascript-Dateien im HTML-Dokument ein:
+- jquery-2.0.3.min.js (Falls nicht bereits vorhanden)
+- jquery.cookie.js (Falls nicht bereits vorhanden)
+- uhr.js
+
+Binde mindestens eine der folgenden Javascript-Dateien im HTML ein, je nach dem, welche Sprachen deine Uhr unterstützen soll:
+- uhr-de_CH.js
+- uhr-de.js
+- uhr-en.js
+
+Binde folgende CSS-Dateien im HTML-Dokument ein:
+- uhr.css
+- uhr-black.css
+- uhr-blue.css
+- uhr-green.css
+- uhr-red.css
+- uhr-white.css
+
+Die möglichen Themes (Farbschemata) sind im Moment noch hartcodiert, deshalb sollten alle Dateien eingebunden werden.
+
+2. Uhr-Element im HTML-Dokument einfügen
+
+Erstelle ein leeres <div> mit einer ID:
+<div id="meineuhr"></div>
+
+3. Uhr per Javascript konfigurieren
+
+Initialisiere die Uhr mit einer einzigen Zeile Javascript:
+new Uhr($('#meineuhr'));
+
+Als Parameter wird ein jQuery-gewrapptes HTML-Element erwartet.
+
+Dies erzeugt eine Uhr in der Standardkonfiguration. Das heisst:
+- Breite ist 100% des Eltenelements
+- Farbe ist Schwarz
+- Sprache ist Bärndütsch
+- Die Uhr ist eingeschaltet
+
+Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt
+
+4. Weitere Optionen
+Der Uhr()-Methode kann ein Options-Objekt mitgegeben werden:
+new Uhr($('#uhrcontainer'), {
+	status: 'on', // 'on' oder 'off'
+	theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white'
+	layout: 'en', // 'de_EC', 'de' oder 'en' (je nach eingebundenen Sprachdateien
+	width: '20em' // eine CSS-Grössenangabe
+});
+
+Viel Spass!
+
+A. Lizenzbestimmungen
+
+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/>.
+
diff --git a/index.html b/index.html
index 9d5f1ca..c933b22 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 		new Uhr($('#uhr'), {
 			layout: 'de_CH',
 			theme: 'black',
-			status: 'on'
+			status: 'on',
+			width: '20em'
 		});
 	</script>
 </body>
diff --git a/manifest.appcache b/manifest.appcache
index f0eff72..b517b8e 100644
--- a/manifest.appcache
+++ b/manifest.appcache
@@ -1,18 +1,18 @@
 CACHE MANIFEST
-# 3.0.3
+# 3.0.4
 
 COPYING
 index.html
 jquery-2.0.3.min.js
 jquery.cookie.js
-uhr-black.css
-uhr-blue.css
-uhr-de.js
-uhr-de_CH.js
-uhr-en.js
-uhr-green.css
-uhr-red.css
-uhr-white.css
-uhr.css
 uhr.js
+uhr-de_CH.js
+uhr-de.js
+uhr-en.js
+uhr.css
+uhr-black.css
+uhr-red.css
+uhr-blue.css
+uhr-green.css
+uhr-white.css
 uhr.woff
diff --git a/uhr.css b/uhr.css
index 67a8e27..45c84e4 100644
--- a/uhr.css
+++ b/uhr.css
@@ -20,11 +20,8 @@ body {
 	font-family: 'Uhrenfont', sans-serif;
 }
 .uhr {
-	padding: 3em;
 	position: relative;
 	margin: 0;
-	width: 40em;
-	height: 40em;
 	transition: background-color 0.5s;
 }
 .uhr .reflection {
@@ -42,11 +39,12 @@ body {
 .uhr .letterarea {
 	display: block;
 	position: absolute;
-	top: 5em;
-	bottom: 5em;
-	left: 5em;
-	right: 5em;
+	top: 12%;
+	bottom: 12%;
+	left: 12%;
+	right: 12%;
 	overflow: hidden;
+	font-size: 200%;
 }
 .item {
 	transition: box-shadow 0.5s, text-shadow 0.5s, border-color 0.5s, color 0.5s;
@@ -64,20 +62,20 @@ body {
 	box-shadow: 0 0 0.2em #eee;
 }
 .dot1 {
-	top: 1.5em;
-	left: 1.5em;
+	top: 3.75%;
+	left: 3.75%;
 }
 .dot2 {
-	top: 1.5em;
-	right: 1.5em;
+	top: 3.75%;
+	right: 3.75%;
 }
 .dot3 {
-	bottom: 1.5em;
-	right: 1.5em;
+	bottom: 3.75%;
+	right: 3.75%;
 }
 .dot4 {
-	bottom: 1.5em;
-	left: 1.5em;
+	bottom: 3.75%;
+	left: 3.75%;
 }
 .letter {
 	height: 10%;
@@ -86,7 +84,6 @@ body {
 	margin: 0;
 	display: inline-block;
 	text-align: center;
-	font-size: 2.2em;
 	line-height: 160%;
 }
 .letter.active {
diff --git a/uhr.js b/uhr.js
index 8980718..80dbcff 100644
--- a/uhr.js
+++ b/uhr.js
@@ -21,7 +21,7 @@ function Uhr(clockarea, settings) {
 	this.id = Uhr.id++;
 	this.timer = null;
 	this.currentTheme = null;
-	this.currentLayout = Uhr.layouts['undefined'];
+	this.currentLayout = {};
 	this.currentMinute = -1;
 	this.initHTMLElements(clockarea, settings || {});
 }
@@ -141,20 +141,20 @@ Uhr.prototype.normalizeHour = function(hour) {
 	return hour;
 }
 Uhr.prototype.initHTMLElements = function(clockarea, presets) {
-	this.createHTMLElements(clockarea);
+	this.createHTMLElements(clockarea, presets.width);
 	var force = presets.force || false;
 	this.initToggleSwitch(presets.status, force);
 	this.initLayoutSwitch(presets.layout, force);
 	this.initThemeSwitch(presets.theme, force);
 }
-Uhr.prototype.createHTMLElements = function(clockarea) {
-	this.createClockarea(clockarea)
+Uhr.prototype.createHTMLElements = function(clockarea, width) {
+	this.createClockarea(clockarea, width)
 	this.letterarea = this.clockarea.find('.letterarea');
 	this.createToggleSwitch();
 	this.createLayoutSwitch();
 	this.createThemeSwitch();
 }
-Uhr.prototype.createClockarea = function(clockarea) {
+Uhr.prototype.createClockarea = function(clockarea, width) {
 	clockarea.addClass('uhr');
 	clockarea.empty();
 	clockarea.append('<span class="item dot dot1"></span>');
@@ -163,6 +163,14 @@ Uhr.prototype.createClockarea = function(clockarea) {
 	clockarea.append('<span class="item dot dot4"></span>');
 	clockarea.append('<div class="letterarea"></div>');
 	clockarea.append('<div class="reflection"></div>');
+	if(width == undefined) {
+		width = '100%';
+	}
+	clockarea.css('width', width);
+	var realWidth = clockarea.width()
+	clockarea.width(realWidth);
+	clockarea.height(realWidth);
+	clockarea.css('font-size', (realWidth / 40) + 'px');
 	this.clockarea = clockarea
 }
 Uhr.prototype.createToggleSwitch = function() {
@@ -225,7 +233,8 @@ Uhr.prototype.initLayoutSwitch = function(defaultValue, overrideCookie) {
 	if (selectedLayout == undefined || (overrideCookie && (defaultValue != undefined))) {
 		selectedLayout = defaultValue;
 	}
-	if (selectedLayout == undefined || selectedLayout == 'undefined') {
+	if (selectedLayout == undefined) {
+		// FIXME not nice, hardcoded default-value
 		selectedLayout = 'de_CH';
 	}
 	this.layoutSwitch.val(selectedLayout);
@@ -247,11 +256,6 @@ Uhr.prototype.initThemeSwitch = function(defaultValue, overrideCookie) {
 	this.setTheme(selectedTheme);
 }
 
-Uhr.register('undefined', {
-	language: 'Please choose your language',
-	values: []
-});
-
 /**
  * Hilfsklasse zum Rendern der Uhr.
  * @param layout     Layout-Objekt, das gerendert werden soll.