diff --git a/k4ever/buyable/templates/buyables/product_list.html b/k4ever/buyable/templates/buyables/product_list.html
index aea79c0..a20ca8d 100644
--- a/k4ever/buyable/templates/buyables/product_list.html
+++ b/k4ever/buyable/templates/buyables/product_list.html
@@ -1,7 +1,7 @@
 {% load thumbnail %}
 
 {% if buyables %}
-	<table class="showitem">
+	<table class="itemList">
 		<tbody>
 		{% for buyable in buyables %}
 			<tr>
@@ -11,25 +11,25 @@
 				<td class="name"><a href="/store/show/{{ buyable.id }}">{{ buyable.name }}</a></td>
 				<td class="actions">
 					{% if buyable.hasDeposit %}
-						<a class="buyButton includingPrice" href="/store/buy/{{ buyable.id }}"
+						<a class="button buy" href="/store/buy/{{ buyable.id }}"
 							title="Kaufen (Ohne Pfand)">
-							<span><span>{{ buyable.price|floatformat:2 }} €</span></span>
+							<span><span>{{ buyable.price|floatformat:2 }}€</span></span>
 						</a>
 
-						<a class="buyButton includingDeposit includingPrice"
+						<a class="button buy inclDeposit"
 							href="/store/buy/{{ buyable.id }}/with/deposit"	title="Kaufen (Mit Pfand)">
-							<span><span>{{ buyable.price|floatformat:2 }} € / {{ buyable.deposit|floatformat:2 }} €</span></span>
+							<span><span>{{ buyable.price|floatformat:2 }}€ / {{ buyable.deposit|floatformat:2 }}€</span></span>
 						</a>
 
-						<a class="buyButton onlyDeposit includingPrice" 
+						<a class="button buy onlyDeposit" 
 							href="/store/buy/{{ buyable.id }}/only/deposit"	title="Kaufen (Nur Pfand)">
-							<span><span>{{ buyable.deposit|floatformat:2 }} €</span></span>
+							<span><span>{{ buyable.deposit|floatformat:2 }}€</span></span>
 						</a>
 
 					{% else %}
-						<a class="buyButton includingPrice" href="/store/buy/{{ buyable.id }}"
+						<a class="button buy" href="/store/buy/{{ buyable.id }}"
 							title="Kaufen">
-							<span><span>{{ buyable.price|floatformat:2 }} €</span></span>
+							<span><span>{{ buyable.price|floatformat:2 }}€</span></span>
 						</a>
 					{% endif %}
 				</td>
diff --git a/k4ever/buyable/templates/buyables/showItem.html b/k4ever/buyable/templates/buyables/showItem.html
index f7be065..7fef02c 100644
--- a/k4ever/buyable/templates/buyables/showItem.html
+++ b/k4ever/buyable/templates/buyables/showItem.html
@@ -3,70 +3,45 @@
 
 
 {% block "content" %}
-	<p><a href="/store/">Zur Liste aller Items</a></p>
+	<a href="/store/">Zur Liste aller Items</a>
 	{% if item %}
-		<table class="showitem" width="40%">
-			<tr>
-				<td>
-					<table width="100%">
-						<tr>
-							<td colspan="2" align="center">
-								<div style="font-size:large">{{ item.name }}</div>
-								<img src="{% thumbnail item.image 400x400 %}">
-							</td>
-						</tr>
-						<tr>
-							<th>
-								Kategorie{{ item.buyableType.all.count|pluralize:"n"}}:</th>
-	        				<td>
-								{% for type in item.buyableType.all %}
-                					{{ type }} <br/>
-	        					{% endfor %}
-							</td>
-						</tr>
-						<tr>
-							<th>
-								Preis:
-							</th>
-							<td>
-								{{ item.price|floatformat:2 }} € {% if item.hasDeposit %}(+ Pfand {{ item.deposit|floatformat:2 }} €) {% endif %}
-							</td>
-						</tr>
-						<tr>
-							<td colspan="2" align="center" style="padding:15px;font-style:italic">
-								"{{ item.description }}"
-							</td>
-						</tr>
-					</table>
-				</td>
-			</tr>
-			<tr>
-				<td>
-					<table width="100%">
-						<tr>
-							<td width="33%">
-								{% if item.hasDeposit %}
-									<a class="button" href="/store/buy/{{ item.id }}/with/deposit/">Kaufen - {{ item.price|floatformat:2 }} € <br/>+ {{ item.deposit|floatformat:2 }} € Pfand</a>
-								{% else %}	
-									&nbsp;
-								{% endif %}
-							</td>
-							<td width="34%">
-								<a class="button" href="/store/buy/{{ item.id }}/">Kaufen - {{ item.price|floatformat:2 }} €<br/>{% if item.hasDeposit %} (Ohne Pfand){% endif %}</a>
-							</td>
-							<td width="33%">
-								{% if item.hasDeposit %}
-									<a class="button" href="/store/buy/{{ item.id }}/only/deposit/">Kaufen <br/>nur {{ item.deposit|floatformat:2 }} € Pfand</a>
-								{% else %}
-									&nbsp;
-								{% endif %}
-							</td>
-						</tr>
-					</table>
-				</td>
-			</tr>
-		</table>
+		<div class="singleItem" >
+			<div class="productImage">
+				<img src="{% thumbnail item.image 400x400 %}">
+			</div>
+			<div class="productMeta">
+				<div>
+					<h2>{{ item.name }}</h2>
+
+					<h3>Kaufen</h3>
+					<div class="actions clearAfter">
+						<a class="button buy" href="/store/buy/{{ item.id }}/">
+							<span><span>{{ item.price|floatformat:2 }}€</span></span>
+						</a>
+
+						<a class="button buy inclDeposit" href="/store/buy/{{ item.id }}/with/deposit/">
+							<span><span>{{ item.price|floatformat:2 }}€ / {{ item.deposit|floatformat:2 }}€</span></span>
+						</a>
+
+						<a class="button buy onlyDeposit" 
+							href="/store/buy/{{ item.id }}/only/deposit/">
+							<span><span>{{ item.deposit|floatformat:2 }}€</span></span>
+						</a>
+					</div>
+
+					<h3>Beschreibung</h3>
+					<div class="description">"{{ item.description }}"</div>
+
+					<h3>Kategorie{{ item.buyableType.all.count|pluralize:"n"}}</h3>
+					<ul>
+						{% for type in item.buyableType.all %}
+							<li>{{ type }}</li>
+						{% endfor %}
+					</ul>
+				</div>
+			</div>
+		</div>
 	{% else %}
-		No item found :(
+		Produkt wurde nicht gefunden
 	{% endif %}
 {% endblock %}
diff --git a/k4ever/main/templates/base.html b/k4ever/main/templates/base.html
index e1e4207..aa7558c 100644
--- a/k4ever/main/templates/base.html
+++ b/k4ever/main/templates/base.html
@@ -18,16 +18,23 @@
 	<body{%block bodyargs %}{%endblock%}>
 		<div id="header">
 			<div class="search">
-				{% if user.is_authenticated %}
-					{% include "main/search-form.html" %}
-				{% endif %}
+				<div>
+					{% if user.is_authenticated %}
+						{% include "main/search-form.html" %}
+					{% endif %}
+				</div>
 			</div>
-			<div class="base_nav">
+			<div class="navigation">
 				<h1>Kasse</h1>
+				<nav>
+					{% if user.is_authenticated %}
+						{% include "main/navigation-login.html" %}
+					{% else %}
+						{% include "main/navigation.html" %}
+					{% endif %}
+				</nav>
 				{% if user.is_authenticated %}
-					{% include "main/navigation-login.html" %}
-				{% else %}
-					{% include "main/navigation.html" %}
+					<span class="balance">Kontostand: {{ user.get_profile.balance|floatformat:2 }} €</span>
 				{% endif %}
 			</div>
 		</div>
diff --git a/k4ever/main/templates/main/navigation-login.html b/k4ever/main/templates/main/navigation-login.html
index 09dc2ad..01842f1 100644
--- a/k4ever/main/templates/main/navigation-login.html
+++ b/k4ever/main/templates/main/navigation-login.html
@@ -1,4 +1,4 @@
-<ul>
+<ul role="navigation sitemap">
 	<li><a href="/">Home</a></li>
 	<li><a href="/store/">Einkaufen</a></li>
 	<li><a href="/transaction/">Konto</a></li>
@@ -9,4 +9,3 @@
 {% endif %}
 	<li><a href="/user/logout/">Abmelden</a></li>
 </ul>
-<span class="balance">Kontostand: {{ user.get_profile.balance|floatformat:2 }} €</span>
diff --git a/k4ever/main/templates/main/product_list.html b/k4ever/main/templates/main/product_list.html
index 75fbd86..e6605fd 100644
--- a/k4ever/main/templates/main/product_list.html
+++ b/k4ever/main/templates/main/product_list.html
@@ -1,7 +1,7 @@
 {% load thumbnail %}
 
 {% if buyables %}
-	<table width=100% class="showitem">
+	<table class="itemList">
 		<tbody>
 		{% for buyable in buyables %}
 			<tr>
@@ -11,13 +11,13 @@
 				<td class="name"><span>{{ buyable.buyable__name }}</span> {% if buyable.num_buys %}({{ buyable.num_buys }} mal gekauft){% endif %}</td>
 				<td class="actions">
 					{% if buyable.buyable__deposit > 0 %}
-						<a class="buyButton includingPrice" href="/store/buy/{{ buyable.buyable__id }}" title="Kaufen (Ohne Pfand)"><span><span>{{ buyable.buyable__price|floatformat:2 }}€</span></span></a>
-						<a class="buyButton includingDeposit includingPrice" href="/store/buy/{{ buyable.buyable__id }}/with/deposit" title="Kaufen (Mit Pfand)"><span><span>{{ buyable.buyable__price|floatformat:2 }} € / {{ buyable.buyable__deposit|floatformat:2 }}€</span></span></a>
+						<a class="button buy" href="/store/buy/{{ buyable.buyable__id }}" title="Kaufen (Ohne Pfand)"><span><span>{{ buyable.buyable__price|floatformat:2 }}€</span></span></a>
+						<a class="button buy inclDeposit" href="/store/buy/{{ buyable.buyable__id }}/with/deposit" title="Kaufen (Mit Pfand)"><span><span>{{ buyable.buyable__price|floatformat:2 }}€ / {{ buyable.buyable__deposit|floatformat:2 }}€</span></span></a>
 						{% if includeDeposit %}
-							<a class="buyButton onlyDeposit" href="/store/buy/{{ buyable.buyable__id }}/only/deposit" title="Kaufen (Nur Pfand)"><span><span>{{ buyable.buyable__deposit|floatformat:2 }}€</span></span></a>
+							<a class="button buy onlyDeposit" href="/store/buy/{{ buyable.buyable__id }}/only/deposit" title="Kaufen (Nur Pfand)"><span><span>{{ buyable.buyable__deposit|floatformat:2 }}€</span></span></a>
 						{% endif %}
 					{% else %}
-						<a class="buyButton" href="/store/buy/{{ buyable.buyable__id }}" title="Kaufen"><span><span>{{ buyable.buyable__price|floatformat:2 }}€</span></span></a>
+						<a class="button buy" href="/store/buy/{{ buyable.buyable__id }}" title="Kaufen"><span><span>{{ buyable.buyable__price|floatformat:2 }}€</span></span></a>
 					{% endif %}
 				</td>
 			</tr>
diff --git a/k4ever/main/templates/main/search-form.html b/k4ever/main/templates/main/search-form.html
index 569b997..fbc9ef1 100644
--- a/k4ever/main/templates/main/search-form.html
+++ b/k4ever/main/templates/main/search-form.html
@@ -1,6 +1,3 @@
-<form method="get" action="#">
-	<input placeholder="Suche und kaufe..." class="autocomplete"
-		type="search" name="search_term" value="Lade Daten..."
-		disabled="disabled" />
-	<input type="submit" value="Suchen" />
-</form>
+<input placeholder="Suche und kaufe..." class="autocomplete"
+	type="search" name="search_term" value="Lade Daten..."
+	disabled="disabled" />
\ No newline at end of file
diff --git a/k4ever/main/templates/main/startpage.html b/k4ever/main/templates/main/startpage.html
index b4811a0..5e99ca9 100644
--- a/k4ever/main/templates/main/startpage.html
+++ b/k4ever/main/templates/main/startpage.html
@@ -2,7 +2,7 @@
 
 {% block "content" %}
 	{% if allMostDrinks or allMostSnacks %}
-		<table class="showlists">
+		<table class="itemListContainer">
 			<thead>
 				<tr>
 					<td role="presentation">&nbsp;</td>
@@ -14,25 +14,25 @@
 			<tbody>
 				<tr>
 					<th scope="row">Getränke</th>
-					<td style="vertical-align:top">
+					<td>
 						{% include "main/product_list.html" with buyables=allMostDrinks %}
 					</td>
-					<td style="vertical-align:top">
+					<td>
 						{% include "main/product_list.html" with buyables=usersMostDrinks %}
 					</td>
-					<td style="vertical-align:top">
+					<td>
 						{% include "main/product_list.html" with buyables=usersLastDrinks %}
 					</td>
 				</tr>
-				<tr style="border-top: 2px solid #ECECEC">
+				<tr>
 					<th scope="row">Snacks</th>
-					<td style="vertical-align.top">
+					<td>
 						{% include "main/product_list.html" with buyables=allMostSnacks %}
 					</td>
-					<td style="vertical-align:top">
+					<td>
 						{% include "main/product_list.html" with buyables=usersMostSnacks %}
 					</td>
-					<td style="vertical-align:top">
+					<td>
 						{% include "main/product_list.html" with buyables=usersLastSnacks %}
 					</td>
 				</tr>
diff --git a/k4ever/main/templates/registration/loginForm.html b/k4ever/main/templates/registration/loginForm.html
index b83ee3e..fdc634a 100644
--- a/k4ever/main/templates/registration/loginForm.html
+++ b/k4ever/main/templates/registration/loginForm.html
@@ -16,7 +16,7 @@
 		<p>{{ form.password.label_tag }} {{ form.password }}</p>
 	</fieldset>
 
-	<input type="submit" value="Anmelden" />
+	<input type="submit" class="button" value="Anmelden" />
 	<input type="hidden" name="next" value="{{ next }}" />
 </form>
 
diff --git a/k4ever/media/css/style.css b/k4ever/media/css/style.css
index 50b43f2..4415553 100644
--- a/k4ever/media/css/style.css
+++ b/k4ever/media/css/style.css
@@ -1,551 +1,538 @@
-/* THOSE ARE JUST TEMPORARYLY, I CHANGE THEM LATER INTO LOCAL RESOURCES */
-/* OR DOES SHE?! */
-
-@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700);
-@import url(http://fonts.googleapis.com/css?family=Istok+Web:400,700);
-
-/* jQuery Theme */
-/* @import url(jquery-ui-1.8.10.custom.css); */
-
-/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
--------------------------------------------------------------- */
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
-	background: transparent;
-	border: 0;
-	margin: 0;
-	padding: 0;
-	vertical-align: baseline;
+@import "http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700.css";
+
+@import "http://fonts.googleapis.com/css?family=Ubuntu:400,700.css";
+/* IF IM NOT A .LESS FILE DO NOT EDIT ME, BUT EDIT THE LESS FILE INSTEAD :) */
+/*
+ * k4ever less stylesheet
+ *
+ * @author Theresa Enghardt <theresa@freitagsrunde.org>
+ * @author Konrad Mohrfeldt <konrad.mohrfeldt@farbdev.org>
+ */
+/* these should be replaced by local ones. i’m to lazy. anyone?
+   some help: http://www.fontsquirrel.com/fontface/generator */
+/* this is a css style reset. there’s much discussion if something like this
+   is helpful and appropriate. well... it’s here for now, so please don’t
+   change anything in the following block */
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+font,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td {
+  background: transparent;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
 }
-
-a:focus {
-	outline: none;
+ol, ul, li {
+  list-style: none;
 }
-
-.content {
-	margin: 5px;
+a:focus, input:focus {
+  outline: none;
 }
-
 body {
-	line-height: 1;
+  line-height: 1;
 }
-
-
-h1, h2, h3, h4, h5, h6, th {
-	clear: both;
-	font-weight: bold;
-	text-align: center;
-	margin-bottom: 10px;
-/*	Sans-Serif? Srsly???
-	font-family: "Istok Web", inherit; */
-
-}
-
-ol, ul, li {
-	list-style: none;
-}
-
 blockquote {
-	quotes: none;
+  quotes: none;
 }
-
 blockquote:before, blockquote:after {
-	content: '';
-	content: none;
+  content: '';
+  content: none;
 }
-
 del {
-	text-decoration: line-through;
+  text-decoration: line-through;
 }
-
-/* tables still need 'cellspacing="0"' in the markup */
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
-
 a img {
-	border: none;
+  border: none;
 }
-
-/* GENERAL SETTINGS */
-
-body {
-	font: 11px "Open Sans", Tahoma, Verdana, Arial, sans-serif;
+a {
+  text-decoration: none;
+  color: inherit;
 }
-
-p { margin-bottom: 7px; }
-
-input {
-	padding: 2px 5px;
-	border: 1px solid #E5E5E5;
-	background: none repeat scroll 0 0 #FBFBFB;
-}
-
-input[type=text]:focus, input[type=search]:focus, input[type=password]:focus {
-	background: #FAFFBD;
-}
-
-/* HEADER */
-
-#header {
-	margin-bottom: 20px;
-	background: #333; 
-	background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#111111));
-	background-image: -webkit-linear-gradient(top, #666666, #111111);
-	background-image:    -moz-linear-gradient(top, #666666, #111111);
-	background-image:     -ms-linear-gradient(top, #666666, #111111);
-	background-image:      -o-linear-gradient(top, #666666, #111111);
-	background-image:         linear-gradient(top, #666666, #111111);
-	
-	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#111111');
-}
-
-#header > div {
-	padding: 5px 10px;
-}
-
-#header .search {
-	background: url("img/logo.png") 10px center no-repeat transparent;
-	height: 40px;
+/* end of the css style reset block. feel free to change things */
+body {
+  background: white;
+  font: 11px "Open Sans", Tahoma, Verdana, Arial, sans-serif;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+th {
+  clear: both;
+  font-weight: bold;
+  margin: 0;
+  font-family: "Ubuntu", inherit;
+  color: #007bba;
+}
+h2 {
+  border-bottom: 1px solid #007bba;
+  margin-bottom: 10px;
+}
+h3 {
+  margin: 3px 0 5px 0;
+}
+.clear {
+  clear: both;
+}
+.clearAfter:after {
+  content: ".";
+  height: 0;
+  float: none;
+  visibility: hidden;
+  clear: both;
+  display: block;
 }
-
-#header .search input[type='search'] {
-	width: 300px;
-	height: 30px;
+.content {
+  padding: 5px;
 }
-
-#header .search form {
-	float: right;
-	line-height: 40px;
+.content a {
+  color: #3398cc;
 }
-
-#header .base_nav {
-	background: #3398cc; 
-	background-image: -webkit-gradient(linear, left top, left bottom, from(#32bbef), to(#3398cc));
-	background-image: -webkit-linear-gradient(top, #32bbef, #3398cc);
-	background-image:    -moz-linear-gradient(top, #32bbef, #3398cc);
-	background-image:     -ms-linear-gradient(top, #32bbef, #3398cc);
-	background-image:      -o-linear-gradient(top, #32bbef, #3398cc);
-	background-image:         linear-gradient(top, #32bbef, #3398cc);
-	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#32bbef', EndColorStr='#3398cc');
-	text-transform: uppercase;
-	color: white;
-	border-bottom: 2px solid black;
-	padding-top: 10px;
-	-moz-box-shadow: 0 3px 8px 0 black inset;
-	-webkit-box-shadow: 0 3px 8px 0 black inset;
-	box-shadow: 0 3px 8px 0 black inset;
+.content a:hover {
+  color: white;
+  background-color: #3398cc;
 }
-
-#header .base_nav h1 {
-	color: white;
-	display: inline-block;
-	margin: 0 20px 0 0;
-	padding: 5px 0 0 0;
-	vertical-align: middle;
-	line-height: 1;
-	text-shadow: 0 -1px #777;
+input {
+  padding: 2px 5px;
+  border: 1px solid #E5E5E5;
+  background: url("img/404") white;
 }
-
-#header .base_nav ul {
-	display: inline-block;
-	vertical-align: middle;
+input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus {
+  background: #FAFFBD;
 }
-
-#header .base_nav ul li {
-	display: inline-block;
-	font-weight: bold;
-	margin-right: 10px;
+p {
+  margin-bottom: 7px;
 }
-
-#header .base_nav a {
-	text-align: center;
-	//background: #3398cc;
-	display: block;
-	vertical-align: middle;
-	text-decoration: none;
-	color: inherit;
-	padding: 10px 15px;
-	margin: 3px 0;
-	-webkit-border-radius: 20px;
-	-moz-border-radius: 20px;
-	border-radius: 20px;
-	-webkit-transition: background .2s;
+#header {
+  margin-bottom: 20px;
+  position: relative;
 }
-
-#header .base_nav a:hover {
-	-webkit-transition: background .2s;
-	background: white;
-	color: #339DD1;
-	-webkit-box-shadow: 0 1px 0 0 #777 inset;
-	-moz-box-shadow: 0 1px 0 0 #777 inset;
-	box-shadow: 0 1px 0 0 #777 inset;
+#header > div {
+  padding: 5px 10px;
 }
-
-span.balance {
-	float:right;
-	padding: 10px 0;
-	margin: 3px 0;
+#header .search {
+  height: 40px;
+  position: relative;
+  z-index: 2;
+  background-color: #111111;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#111111));
+  background-image: -webkit-linear-gradient(top, #666666, #111111);
+  background-image: -moz-linear-gradient(top, #666666, #111111);
+  background-image: -ms-linear-gradient(top, #666666, #111111);
+  background-image: -o-linear-gradient(top, #666666, #111111);
+  background-image: linear-gradient(top, #666666, #111111);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#111111');
+  -moz-box-shadow: 0 3px 8px 0 black;
+  -webkit-box-shadow: 0 3px 8px 0 black;
+  box-shadow: 0 3px 8px 0 black;
+}
+#header .search > div {
+  background: url("img/logo.png") 0 center no-repeat transparent;
+  height: 100%;
+}
+#header .search input {
+  width: 300px;
+  height: 30px;
+  float: right;
+}
+#header .search ul.ui-autocomplete {
+  background: white;
+  width: 298px;
+  border-width: 0 1px 1px 1px;
+  border-style: solid;
+  border-color: black;
+  z-index: 100;
+}
+#header .search ul.ui-autocomplete li.ui-menu-item {
+  display: table-row;
+}
+#header .search ul.ui-autocomplete li.ui-menu-item:hover, #header .search ul.ui-autocomplete li.ui-menu-item.focus {
+  color: white;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#32bbef), to(#3398cc));
+  background-image: -webkit-linear-gradient(top, #32bbef, #3398cc);
+  background-image: -moz-linear-gradient(top, #32bbef, #3398cc);
+  background-image: -ms-linear-gradient(top, #32bbef, #3398cc);
+  background-image: -o-linear-gradient(top, #32bbef, #3398cc);
+  background-image: linear-gradient(top, #32bbef, #3398cc);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#32bbef', EndColorStr='#3398cc');
+  -moz-box-shadow: 0 0 5px #666666;
+  -webkit-box-shadow: 0 0 5px #666666;
+  box-shadow: 0 0 5px #666666;
+}
+#header .search ul.ui-autocomplete li.ui-menu-item a span {
+  line-height: 1;
+  vertical-align: top;
+}
+#header .search ul.ui-autocomplete li.ui-menu-item a span img {
+  height: 50px;
+}
+#header .search ul.ui-autocomplete li.ui-menu-item a#ui-active-menuitem.ui-corner-all div {
+  color: #FF0084;
+}
+#header .search ul.ui-autocomplete li.ui-menu-item a.ui-corner-all span {
+  display: table-cell;
+}
+#header .search ul.ui-autocomplete .preview, #header .search ul.ui-autocomplete .buy, #header .search ul.ui-autocomplete .meta {
+  height: 50px;
+  padding: 5px;
+  font-size: 10px;
+}
+#header .search ul.ui-autocomplete .preview {
+  width: 50px;
+  overflow: hidden;
+  text-align: center;
+  vertical-align: middle;
+}
+#header .search ul.ui-autocomplete .buy {
+  vertical-align: middle;
+  width: 50px;
+}
+#header .search ul.ui-autocomplete .focus .buy {
+  background-image: url("img/alt.png");
+  background-repeat: no-repeat;
+  background-position: 2px center;
+}
+#header .search ul.ui-autocomplete .focus .buy.lock {
+  background-image: url("img/buy.png");
+}
+#header .search ul.ui-autocomplete .focus .buy.lock.load, #header .search ul.ui-autocomplete .focus .buy.load {
+  background-image: url("img/load.gif");
+}
+#header .search ul.ui-autocomplete .focus .buy.lock.success, #header .search ul.ui-autocomplete .focus .buy.success {
+  background-image: url("img/success.png");
+}
+#header .search ul.ui-autocomplete .focus .buy.lock.failure, #header .search ul.ui-autocomplete .focus .buy.failure {
+  background-image: url("img/failure.png");
+}
+#header .search ul.ui-autocomplete .meta {
+  width: 210px;
+}
+#header .search ul.ui-autocomplete .meta:first-line {
+  font-weight: bold;
+}
+#header .navigation {
+  text-transform: uppercase;
+  color: white;
+  border-bottom: 2px solid black;
+  padding-top: 10px;
+  position: relative;
+  z-index: 1;
+  background-color: #3398cc;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#32bbef), to(#3398cc));
+  background-image: -webkit-linear-gradient(top, #32bbef, #3398cc);
+  background-image: -moz-linear-gradient(top, #32bbef, #3398cc);
+  background-image: -ms-linear-gradient(top, #32bbef, #3398cc);
+  background-image: -o-linear-gradient(top, #32bbef, #3398cc);
+  background-image: linear-gradient(top, #32bbef, #3398cc);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#32bbef', EndColorStr='#3398cc');
+}
+#header .navigation > * {
+  display: inline-block;
+  vertical-align: middle;
+}
+#header .navigation h1 {
+  color: white;
+  margin: 0 20px 0 0;
+  text-shadow: 0 -1px #777777;
+}
+#header .navigation li {
+  display: inline-block;
+  font-weight: bold;
+  margin-right: 10px;
+}
+#header .navigation li a {
+  display: block;
+  text-align: center;
+  vertical-align: middle;
+  padding: 10px 15px;
+  margin: 3px 0;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  border-radius: 20px;
+  /* useful if you don't want a bg color from leaking outside the border: */
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-transition: background .2s, box-shadow .2s;
+  -moz-transition: background .2s, box-shadow .2s;
+  -ms-transition: background .2s, box-shadow .2s;
+  -o-transition: background .2s, box-shadow .2s;
+  transition: background .2s, box-shadow .2s;
+}
+#header .navigation li a:hover {
+  background: white;
+  color: #3398cc;
+  -moz-box-shadow: 0 1px 0 0 #777777 inset;
+  -webkit-box-shadow: 0 1px 0 0 #777777 inset;
+  box-shadow: 0 1px 0 0 #777777 inset;
+  -webkit-transition: background .2s, box-shadow .2s;
+  -moz-transition: background .2s, box-shadow .2s;
+  -ms-transition: background .2s, box-shadow .2s;
+  -o-transition: background .2s, box-shadow .2s;
+  transition: background .2s, box-shadow .2s;
+}
+#header .navigation .balance {
+  float: right;
+  display: block;
+  padding: 10px 0;
+  margin: 3px 0;
 }
-
-/* LOGIN FORM */
-
 form.login {
-	width: 300px;
-	margin: 60px auto;
-	-moz-box-shadow: 1px 1px 2px #eaeaea;
-	-webkit-box-shadow: 1px 1px 2px #eaeaea;
-	box-shadow: 1px 1px 2px #eaeaea;
-	border: 1px solid #E5E5E5;
-	padding: 20px;
+  width: 300px;
+  margin: 60px auto;
+  border: 1px solid #e5e5e5;
+  padding: 20px;
+  -moz-box-shadow: 1px 1px 2px #eaeaea;
+  -webkit-box-shadow: 1px 1px 2px #eaeaea;
+  box-shadow: 1px 1px 2px #eaeaea;
 }
-
 form.login label {
-	display: block;
-	margin-top: 10px;
-	margin-bottom: 3px;
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 3px;
 }
-
 form.login input {
-	font-size: 24px;
-	width: 97%;
-}
-
-form.login input[type=submit] {
-	display: block;
-	width: 303px;
-	
-	margin-top: 25px;
-	padding: 5px 8px;
-
-	background: #333;
-	color: #eee;
-
-	text-shadow: 0px 1px 0px black;
-
-	font-size: 140%;
-	font-weight: bold;
-
-	border: none;
-	border-top: 1px solid #444;
-	border-radius: 3px;
-	outline: 0 none;
-	
-	-webkit-box-shadow: 0px 1px 1px black;
-	-moz-box-shadow: 0px 1px 1px black;
-	box-shadow: 0px 1px 1px black;
-}
-
-form.login input[type=submit]:hover,
-form.login input[type=submit]:active {
-	background: #2790B0;
-	border-color: #5c94cb;
-	color: white;
-}
-
-/* NOTIFICATIONS */
-
-div.error, div.notice, div.success {
-	border-top: 1px solid #DDD;
-	padding: 0.6em 0.8em;
-	position: fixed;
-	bottom: 0;
-	width: 100%;
-}
-
-div.error h2, div.notice h2, div.success h2 {
-	font-size: 100%;
-	font-weight: bold;
-	margin-bottom: 10px;
-}
-
-div.error {
-	background: #FBE3E4;
-	color: #8A1F11;
-	border-color: #FBC2C4;
-}
-
-div.error a { color:#8A1F11; }
-
-div.notice {
-	background: #FFF6BF;
-	color: #514721;
-	border-color: #FFD324;
-}
-
-div.notice a { color:#514721; }
-
-div.success{
-	background: #E6EFC2;
-	color: #264409;
-	border-color: #C6D880;
-}
-div.success a { color:#264409; }
-
-.content table ul li strong {
-	width: 200px;
-	display: block;
-	float: left;
-}
-
-ul.ui-autocomplete {
-	background: white;
-	width: 298px;
-	border-width: 0 1px 1px 1px;
-	border-style: solid;
-	border-color: black;
-}
-html body div#header div.search ul.ui-autocomplete li.ui-menu-item a#ui-active-menuitem.ui-corner-all div {
-	color: #FF0084;
-}
-
-html body div#header div.search ul.ui-autocomplete li.ui-menu-item {
-	display: table-row;
-}
-
-html body div#header div.search ul.ui-autocomplete li.ui-menu-item a.ui-corner-all span {
-	display: table-cell;
-}
-
-html body div#header div.search ul.ui-autocomplete li.ui-menu-item:hover,
-html body div#header div.search ul.ui-autocomplete li.ui-menu-item.focus {
-	background-color: #2790B0;
-	color: white;
-}
-
-.search li.ui-menu-item a spa {
-	line-height: 1;
-	vertical-align: top;
-}
-
-.search li.ui-menu-item a span img {
-	height: 50px;
-}
-
-.preview, .buy, .meta {
-	height: 50px;
-	padding: 5px;
-	font-size: 10px;
-}
-
-.preview {
-	width: 50px;
-	overflow: hidden;
-	text-align: center;
-	vertical-align: middle;
-}
-
-.buy {
-	vertical-align: middle;
-	width: 50px;
-}
-
-.focus .buy {
-	background-image: url(img/alt.png);
-	background-repeat: no-repeat;
-	background-position: 2px center;
-}
-
-.focus .buy.lock {
-	background-image: url(img/buy.png);
-}
-
-.focus .buy.lock.load,
-.focus .buy.load {
-	background-image: url(img/load.gif);
-}
-
-.focus .buy.lock.success,
-.focus .buy.success {
-	background-image: url(img/success.png);
-}
-
-.focus .buy.lock.failure,
-.focus .buy.failure {
-	background-image: url(img/failure.png);
-}
-
-.meta {
-	width: 210px;
-}
-
-.meta:first-line {
-	font-weight: bold;
-}
-
-table.showitem {
-	border: 0 none;
-	border-collapse: collapse;
-	width: 100%;
-}
-
-table.showitem td.productImage {
-	width: 80px;
-	text-align: center;
-}
-
-table.showitem td.productImage img {
-	max-width: 100%;
-	max-height: 64px;
-}
-
-table.showitem th {
-	font-size: 20px;
-	text-align:center;
-}*/
-
-table.showitem td.name {
-	padding: 0 10px;
-}
-
-table.showitem td.name span {
-	display: block;
-	font-weight: bold;
-}
-
-table.showitem td.name a {
-	display: block;
-	font: 20px "Istok Web", inherit;
-	text-decoration: none;
-	color: inherit;
-	font-weight: bold;
-}
-
-table.showitem tbody tr:nth-child(even) td.name,
-table.showitem tbody tr:nth-child(even) td.actions {
-	background-color: #ececec;
-}
-
-table.showitem td, table.showitem th {
-	vertical-align: middle;
-}
-
-table.showitem tr td {
-	padding-bottom: 10px;
-}
-
-table.showlists td, table.showlists th {
-	vertical-align: middle;
-}
-
-table.showlists {
-	border: 0 none; 
-	width:100%
-}
-
-table.showlists th[scope="row"] {
-	width: 20px;
-	padding: 0;
-	margin: 0;
-	-moz-transform: rotate(270deg);
-	-webkit-transform: rotate(270deg);
-	-ms-transform: rotate(270deg);
-	-o-transform: rotate(270deg);
-	transform: rotate(270deg);
-}
-
-a.buyButton {
-	display: block;
-	padding: 5px 10px;
-	margin: 10px 10px 15px 0;
-	position: relative;
-	height: 32px;
-	text-align: center;
-	border-radius: 6px;
-	float: left;
-	z-index: 2;
-	text-decoration: none;
-	
-	background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#111111));
-	background-image: -webkit-linear-gradient(top, #666666, #111111);
-	background-image:    -moz-linear-gradient(top, #666666, #111111);
-	background-image:     -ms-linear-gradient(top, #666666, #111111);
-	background-image:      -o-linear-gradient(top, #666666, #111111);
-	background-image:         linear-gradient(top, #666666, #111111);
-	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#111111');
-	
-	-moz-box-shadow: 0 1px 3px 0 black;
-	-webkit-box-shadow: 0 1px 3px 0 black;
-	box-shadow: 0 1px 3px 0 black;
-}
-
-a.buyButton.includingPrice {
-	border-bottom-right-radius: 0;
-	border-bottom-left-radius: 0;
-}
-
-.content a.buyButton:hover {
-	background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#000000));
-	background-image: -webkit-linear-gradient(top, #555555, #000000);
-	background-image:    -moz-linear-gradient(top, #555555, #000000);
-	background-image:     -ms-linear-gradient(top, #555555, #000000);
-	background-image:      -o-linear-gradient(top, #555555, #000000);
-	background-image:         linear-gradient(top, #555555, #000000);
-	
-	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#000000');
-}
-
-a.buyButton:active {
-	-moz-box-shadow: 0 1px 3px 0 black, 0 1px 3px 0 black inset;
-	-webkit-box-shadow: 0 1px 3px 0 black, 0 1px 3px 0 black inset;
-	box-shadow: 0 1px 3px 0 black, 0 1px 3px 0 black inset;
-}
-
-a.buyButton.includingDeposit > span {
-	background-image: url("img/payment_deposit.png");
-	min-width: 65px;
-}
-
-a.buyButton.onlyDeposit > span {
-	background-image: url("img/deposit.png");
-}
-
-a.buyButton > span {
-	display: block;
-	height: 100%;
-	min-width: 32px;
-	background: url("img/payment.png") no-repeat center center transparent;
-}
-
-.content a {
-	color: #3398CC;
-	text-decoration: none;
-}
-
-.content a:hover {
-	color: white;
-	background: #3398CC;
-}
-
-.content a.button {
-    display: block;
-	margin-top: 7px;
-	padding: 0 10px;
-	text-align: center;
-}
-
-a.buyButton > span > span {
-	position: absolute;
-	bottom: -15px;
-	left: 0;
-	display: block;
-	width: 100%;
-	z-index: 1;
-	border-bottom-left-radius: 6px;
-	border-bottom-right-radius: 6px;
-	background-color: #3398cc;
-	color: white;
-	
-	-moz-box-shadow: 0 1px 3px 0 black, 0 1px 1px 0 black inset;
-	-webkit-box-shadow: 0 1px 3px 0 black, 0 1px 1px 0 black inset;
-	box-shadow: 0 1px 3px 0 black, 0 1px 1px 0 black inset;
+  font-size: 20px;
+  width: 97%;
+  padding: 5px 3px;
+}
+form.login .button {
+  margin: 12px auto 0;
+  float: none;
+  width: 70%;
+}
+table.itemList {
+  width: 100%;
+}
+table.itemList tbody tr:nth-child(even) td.name, table.itemList tbody tr:nth-child(even) td.actions {
+  background-color: #e5e5e5;
+}
+table.itemList td, table.itemList th {
+  vertical-align: middle;
+}
+table.itemList th {
+  font-size: 20px;
+  text-align: center;
+}
+table.itemList td {
+  padding-bottom: 10px;
+}
+table.itemList td.productImage {
+  width: 80px;
+  text-align: center;
+}
+table.itemList td.productImage img {
+  max-width: 100%;
+  max-height: 64px;
+}
+table.itemList td.name {
+  padding: 0 10px;
+}
+table.itemList td.name span {
+  display: block;
+  font-weight: bold;
+}
+table.itemList td.name a {
+  display: block;
+  font: 20px "Ubuntu", inherit;
+  text-decoration: none;
+  font-weight: bold;
+}
+table.itemListContainer {
+  width: 100%;
+}
+table.itemListContainer td, table.itemListContainer th {
+  vertical-align: middle;
+}
+table.itemListContainer th {
+  font-size: 20px;
+}
+table.itemListContainer th[scope="row"] {
+  width: 20px;
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+table.itemListContainer > tbody > tr:first-child ~ tr > td {
+  padding-top: 50px;
+}
+.singleItem {
+  width: 820px;
+  margin: 0 auto;
+}
+.singleItem .productImage, .singleItem .productMeta {
+  float: left;
+  width: 400px;
+}
+.singleItem .productImage {
+  text-align: center;
+}
+.singleItem .productImage img {
+  max-width: 80%;
+}
+.singleItem .productMeta {
+  margin-left: 20px;
+}
+.singleItem .actions {
+  padding-bottom: 5px;
+}
+.singleItem .actions a {
+  margin-top: 0;
+}
+.button {
+  display: block;
+  padding: 5px 10px;
+  margin: 10px 10px 15px 0;
+  position: relative;
+  height: 32px;
+  text-align: center;
+  border-radius: 6px;
+  float: left;
+  z-index: 2;
+  color: white;
+  background-color: #111111;
+  border: 0 none;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  /* useful if you don't want a bg color from leaking outside the border: */
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#111111));
+  background-image: -webkit-linear-gradient(top, #666666, #111111);
+  background-image: -moz-linear-gradient(top, #666666, #111111);
+  background-image: -ms-linear-gradient(top, #666666, #111111);
+  background-image: -o-linear-gradient(top, #666666, #111111);
+  background-image: linear-gradient(top, #666666, #111111);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#111111');
+  -moz-box-shadow: 0 1px 3px 0 black;
+  -webkit-box-shadow: 0 1px 3px 0 black;
+  box-shadow: 0 1px 3px 0 black;
+}
+.button.buy {
+  -webkit-border-radius: 6px 6px 0 0;
+  -moz-border-radius: 6px 6px 0 0;
+  border-radius: 6px 6px 0 0;
+  /* useful if you don't want a bg color from leaking outside the border: */
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.button.buy > span {
+  display: block;
+  height: 100%;
+  min-width: 32px;
+  background: url("img/payment.png") no-repeat center center transparent;
+}
+.button.buy > span > span {
+  position: absolute;
+  bottom: -15px;
+  left: 0;
+  display: block;
+  width: 100%;
+  z-index: 1;
+  background-color: #3398cc;
+  color: white;
+  font-size: 10px;
+  line-height: 15px;
+  -webkit-border-radius: 0 0 6px 6px;
+  -moz-border-radius: 0 0 6px 6px;
+  border-radius: 0 0 6px 6px;
+  /* useful if you don't want a bg color from leaking outside the border: */
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -moz-box-shadow: 0 1px 3px 0 black, 0 1px 1px 0 black inset;
+  -webkit-box-shadow: 0 1px 3px 0 black, 0 1px 1px 0 black inset;
+  box-shadow: 0 1px 3px 0 black, 0 1px 1px 0 black inset;
+}
+.button.buy.onlyDeposit > span {
+  background-image: url("img/deposit.png");
+}
+.button.buy.inclDeposit > span {
+  background-image: url("img/payment_deposit.png");
+  min-width: 65px;
+}
+.button:hover {
+  background-color: #000000 !important;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#000000));
+  background-image: -webkit-linear-gradient(top, #333333, #000000);
+  background-image: -moz-linear-gradient(top, #333333, #000000);
+  background-image: -ms-linear-gradient(top, #333333, #000000);
+  background-image: -o-linear-gradient(top, #333333, #000000);
+  background-image: linear-gradient(top, #333333, #000000);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#000000');
+}
+.button:active {
+  -moz-box-shadow: 0 1px 3px 0 black, 0 1px 3px 0 black inset;
+  -webkit-box-shadow: 0 1px 3px 0 black, 0 1px 3px 0 black inset;
+  box-shadow: 0 1px 3px 0 black, 0 1px 3px 0 black inset;
 }
diff --git a/k4ever/media/css/style.less b/k4ever/media/css/style.less
new file mode 100644
index 0000000..019fcbc
--- /dev/null
+++ b/k4ever/media/css/style.less
@@ -0,0 +1,543 @@
+/* IF IM NOT A .LESS FILE DO NOT EDIT ME, BUT EDIT THE LESS FILE INSTEAD :) */
+
+/*
+ * k4ever less stylesheet
+ *
+ * @author Theresa Enghardt <theresa@freitagsrunde.org>
+ * @author Konrad Mohrfeldt <konrad.mohrfeldt@farbdev.org>
+ */
+ 
+
+/* these should be replaced by local ones. i’m to lazy. anyone?
+   some help: http://www.fontsquirrel.com/fontface/generator */
+@import "http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700.css";
+@import "http://fonts.googleapis.com/css?family=Ubuntu:400,700.css";
+
+
+/* this is a css style reset. there’s much discussion if something like this
+   is helpful and appropriate. well... it’s here for now, so please don’t
+   change anything in the following block */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+	background: transparent;
+	border: 0;
+	margin: 0;
+	padding: 0;
+	vertical-align: baseline;
+}
+
+ol, ul, li { list-style: none; }
+a:focus, input:focus { outline: none; }
+body { line-height: 1; }
+blockquote { quotes: none; }
+blockquote:before, blockquote:after { content: ''; content: none; }
+del { text-decoration: line-through; }
+table { border-collapse: collapse; border-spacing: 0; }
+a img { border: none; }
+a { text-decoration: none; color: inherit; }
+
+/* end of the css style reset block. feel free to change things */
+
+// less functions
+
+.vertical-linear-gradient(@startColour, @endColour) {
+	background-image: -webkit-gradient(linear, left top, left bottom, from(@startColour), to(@endColour));
+	background-image: -webkit-linear-gradient(top, @startColour, @endColour);
+	background-image:    -moz-linear-gradient(top, @startColour, @endColour);
+	background-image:     -ms-linear-gradient(top, @startColour, @endColour);
+	background-image:      -o-linear-gradient(top, @startColour, @endColour);
+	background-image:         linear-gradient(top, @startColour, @endColour);
+
+	filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr='@{startColour}', EndColorStr='@{endColour}')";
+}
+
+.box-shadow(@args) {
+	-moz-box-shadow: @args;
+	-webkit-box-shadow: @args;
+	box-shadow: @args;
+}
+
+.border-radius(@args) {
+	-webkit-border-radius: @args;
+	-moz-border-radius: @args;
+	border-radius: @args;
+          
+	/* useful if you don't want a bg color from leaking outside the border: */        
+	-moz-background-clip: padding;
+	-webkit-background-clip: padding-box; 
+	background-clip: padding-box;
+}
+
+.transition(@args) {
+	-webkit-transition: @args;
+	-moz-transition: @args;
+	-ms-transition: @args;
+	-o-transition: @args;
+	transition: @args;
+}
+
+.rotate(@degrees) {
+	-webkit-transform: rotate(@degrees);
+	-moz-transform: rotate(@degrees);
+	-ms-transform: rotate(@degrees);
+	-o-transform: rotate(@degrees);
+	transform: rotate(@degrees);
+}
+
+// end less functions
+
+// less variables
+
+// folders
+@fldImages: "img";
+@fldFonts: "font";
+
+// colours
+@clrDarkGrey: #111111;
+@clrMediumGrey: #666666;
+@clrMediumLightGrey: #e5e5e5;
+@clrLightGrey: #eaeaea;
+
+@clrLightBlue: #32bbef;
+@clrMediumBlue: #3398cc;
+@clrDarkBlue: #007bba;
+
+// fonts
+@ftText: "Open Sans", Tahoma, Verdana, Arial, sans-serif;
+@ftHeadlines: "Ubuntu", inherit;
+
+// end less variables
+
+body {
+	background: white;
+	font: 11px @ftText;
+}
+
+h1, h2, h3, h4, h5, h6, th {
+	clear: both;
+	font-weight: bold;
+	margin: 0;
+	font-family: @ftHeadlines;
+	color: @clrDarkBlue;
+}
+
+h2 {
+	border-bottom: 1px solid @clrDarkBlue;
+	margin-bottom: 10px;
+}
+
+h3 {
+	margin: 3px 0 5px 0;
+}
+
+.clear {
+	clear: both;
+}
+
+.clearAfter:after {
+	content: ".";
+	height: 0;
+	float: none;
+	visibility: hidden;
+	clear: both;
+	display: block;
+}
+
+.content {
+	padding: 5px;
+
+	a {
+		color: @clrMediumBlue;
+
+		&:hover {
+			color: white;
+			background-color: @clrMediumBlue;
+		}
+	}
+}
+
+input {
+	padding: 2px 5px;
+	border: 1px solid #E5E5E5;
+	background: url("@{fldImages}/404") white;
+}
+
+input {
+	&[type="text"], &[type="search"], &[type="password"] {
+		&:focus {
+			background: #FAFFBD;
+		}
+	}
+}
+
+p {
+	margin-bottom: 7px;
+}
+
+#header {
+	margin-bottom: 20px;
+	position: relative;
+
+	> div {
+		padding: 5px 10px;
+	}
+
+	.search {
+		height: 40px;
+		position: relative;
+		z-index: 2;
+		background-color: @clrDarkGrey;
+		.vertical-linear-gradient(@clrMediumGrey, @clrDarkGrey);
+		.box-shadow(0 3px 8px 0 black);
+
+		> div {
+			background: url("img/logo.png") 0 center no-repeat transparent;
+			height: 100%;
+		}
+
+		input {
+			width: 300px;
+			height: 30px;
+			float: right;
+		}
+
+		ul.ui-autocomplete {
+			background: white;
+			width: 298px;
+			border-width: 0 1px 1px 1px;
+			border-style: solid;
+			border-color: black;
+			z-index: 100;
+
+			li.ui-menu-item {
+				display: table-row;
+
+				&:hover, &.focus {
+					color: white;
+					.vertical-linear-gradient(@clrLightBlue, @clrMediumBlue);
+					.box-shadow(0 0 5px @clrMediumGrey);
+				}
+
+				a {
+					span {
+						line-height: 1;
+						vertical-align: top;
+
+						img {
+							height: 50px;
+						}
+					}
+
+					&#ui-active-menuitem.ui-corner-all div {
+						color: #FF0084;
+					}
+
+					&.ui-corner-all span {
+						display: table-cell;
+					}
+				}
+			}
+
+			.preview, .buy, .meta {
+				height: 50px;
+				padding: 5px;
+				font-size: 10px;
+			}
+
+			.preview {
+				width: 50px;
+				overflow: hidden;
+				text-align: center;
+				vertical-align: middle;
+			}
+
+			.buy {
+				vertical-align: middle;
+				width: 50px;
+			}
+
+			.focus .buy {
+				background-image: url("img/alt.png");
+				background-repeat: no-repeat;
+				background-position: 2px center;
+			}
+
+			.focus .buy.lock {
+				background-image: url("img/buy.png");
+			}
+
+			.focus .buy.lock.load,
+			.focus .buy.load {
+				background-image: url("img/load.gif");
+			}
+
+			.focus .buy.lock.success,
+			.focus .buy.success {
+				background-image: url("img/success.png");
+			}
+
+			.focus .buy.lock.failure,
+			.focus .buy.failure {
+				background-image: url("img/failure.png");
+			}
+
+			.meta {
+				width: 210px;
+			}
+
+			.meta:first-line {
+				font-weight: bold;
+			}
+		}
+	}
+
+	.navigation {
+		text-transform: uppercase;
+		color: white;
+		border-bottom: 2px solid black;
+		padding-top: 10px;
+		position: relative;
+		z-index: 1;
+		background-color: @clrMediumBlue;
+		.vertical-linear-gradient(@clrLightBlue, @clrMediumBlue);
+
+		> * {
+			display: inline-block;
+			vertical-align: middle;
+		}
+
+		h1 {
+			color: white;
+			margin: 0 20px 0 0;
+			text-shadow: 0 -1px #777;
+		}
+
+		li {
+			display: inline-block;
+			font-weight: bold;
+			margin-right: 10px;
+
+			a {
+				display: block;
+				text-align: center;
+				vertical-align: middle;
+				padding: 10px 15px;
+				margin: 3px 0;
+				.border-radius(20px);
+				.transition(~"background .2s, box-shadow .2s");
+	
+				&:hover {
+					background: white;
+					color: @clrMediumBlue;
+					.box-shadow(0 1px 0 0 #777 inset);
+					.transition(~"background .2s, box-shadow .2s");
+				}
+			}
+		}
+
+		.balance {
+			float: right;
+			display: block;
+			padding: 10px 0;
+			margin: 3px 0;
+		}
+	}
+}
+
+form.login {
+	width: 300px;
+	margin: 60px auto;
+	border: 1px solid @clrMediumLightGrey;
+	padding: 20px;
+	.box-shadow(1px 1px 2px @clrLightGrey);
+
+	label {
+		display: block;
+		margin-top: 10px;
+		margin-bottom: 3px;
+	}
+
+	input {
+		font-size: 20px;
+		width: 97%;
+		padding: 5px 3px;
+	}
+
+	.button {
+		margin: 12px auto 0;
+		float: none;
+		width: 70%;
+	}
+}
+
+table.itemList {
+	width: 100%;
+
+	tbody tr:nth-child(even) {
+		td.name, td.actions {
+			background-color: @clrMediumLightGrey;
+		}
+	}
+
+	td, th {
+		vertical-align: middle;
+	}
+
+	th {
+		font-size: 20px;
+		text-align: center;
+	}
+
+	td {
+		padding-bottom: 10px;
+
+		&.productImage {
+			width: 80px;
+			text-align: center;
+
+			img {
+				max-width: 100%;
+				max-height: 64px;
+			}
+		}
+
+		&.name {
+			padding: 0 10px;
+
+			span {
+				display: block;
+				font-weight: bold;
+			}
+
+			a {
+				display: block;
+				font: 20px @ftHeadlines;
+				text-decoration: none;
+				font-weight: bold;
+			}
+		}
+	}
+}
+
+table.itemListContainer {
+	width: 100%;
+
+	td, th {
+		vertical-align: middle;
+	}
+
+	th {
+		font-size: 20px;
+
+		&[scope="row"] {
+			width: 20px;
+			.rotate(270deg);
+		}
+	}
+
+	> tbody > tr:first-child ~ tr > td{
+		padding-top: 50px;
+	}
+}
+
+.singleItem {
+	width: 820px;
+	margin: 0 auto;
+
+	.productImage, .productMeta {
+		float: left;
+		width: 400px;
+	}
+
+	.productImage {
+		text-align: center;
+
+		img {
+			max-width: 80%;
+		}
+	}
+
+	.productMeta {
+		margin-left: 20px;
+	}
+
+	.actions {
+		padding-bottom: 5px;
+
+		a {
+			margin-top: 0;
+		}
+	}
+}
+
+.button {
+	display: block;
+	padding: 5px 10px;
+	margin: 10px 10px 15px 0;
+	position: relative;
+	height: 32px;
+	text-align: center;
+	border-radius: 6px;
+	float: left;
+	z-index: 2;
+	color: white;
+	background-color: @clrDarkGrey;
+	border: 0 none;
+	
+	.border-radius(6px);
+	.vertical-linear-gradient(@clrMediumGrey, @clrDarkGrey);
+	.box-shadow(0 1px 3px 0 black);
+
+	&.buy {
+		.border-radius(6px 6px 0 0);
+
+		> span {
+			display: block;
+			height: 100%;
+			min-width: 32px;
+			background: url("img/payment.png") no-repeat center center transparent;
+
+			> span {
+				position: absolute;
+				bottom: -15px;
+				left: 0;
+				display: block;
+				width: 100%;
+				z-index: 1;
+				background-color: #3398cc;
+				color: white;
+				font-size: 10px;
+				line-height: 15px;
+
+				.border-radius(0 0 6px 6px);
+				.box-shadow(~"0 1px 3px 0 black, 0 1px 1px 0 black inset");
+			}
+		}
+
+		&.onlyDeposit > span{
+			background-image: url("img/deposit.png");
+		}
+
+		&.inclDeposit > span {
+			background-image: url("img/payment_deposit.png");
+			min-width: 65px;
+		}
+	}
+
+	&:hover {
+		background-color: darken(@clrDarkGrey, 20%) !important;
+		.vertical-linear-gradient(darken(@clrMediumGrey, 20%), darken(@clrDarkGrey, 20%));
+	}
+
+	&:active {
+		.box-shadow(~"0 1px 3px 0 black, 0 1px 3px 0 black inset");
+	}
+}
\ No newline at end of file