diff --git a/css/design.css b/css/design.css
new file mode 100644
index 0000000000000000000000000000000000000000..8e4478a20ad959c21fc9390d7cae7c2bfedcddf1
--- /dev/null
+++ b/css/design.css
@@ -0,0 +1,62 @@
+@viewport {
+  width: device-width;
+  user-zoom: fixed;
+}
+body {
+  margin: 0;
+  background: #0a0a0a;
+  font-family: Arial, serif;
+  overflow: hidden;
+}
+[data-container=panel],
+[data-container=noscript] {
+  background-color: rgba(8, 8, 8, 0.68);
+  border: solid 1px #252525;
+  box-shadow: 0 2px 1px #000000;
+  padding: 6px;
+  float: left;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+[data-container=panelContainer] {
+  float: left;
+  width: 100%;
+  height: 100%;
+  /*padding: 4px;*/
+  padding: 0.2vw;
+  box-sizing: border-box;
+}
+[data-container=split] {
+  box-sizing: border-box;
+  /*	display: flex;
+	flex-direction: column;*/
+  height: 100%;
+  width: 100%;
+  float: left;
+}
+[data-container=cycler],
+[data-container=cycleContainer] {
+  width: 100%;
+  float: left;
+  height: 100%;
+  box-sizing: border-box;
+}
+[data-container=cycleContainer] {
+  display: none;
+}
+[data-container=noscript] {
+  color: white;
+  text-shadow: black 10px 0px 0px;
+  font-size: 40pt;
+}
+[data-container=main] {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  box-sizing: border-box;
+  padding: 0.2vw;
+  background: radial-gradient(black 15%, transparent 15%) 0 0, radial-gradient(black 15%, transparent 15%) 12px 12px, radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 12px 13px, #171717;
+  background-size: 24px 24px;
+}
diff --git a/css/marquee.css b/css/marquee.css
new file mode 100644
index 0000000000000000000000000000000000000000..8ae46b03af426a29096efbb55172d8758de3be84
--- /dev/null
+++ b/css/marquee.css
@@ -0,0 +1,16 @@
+@keyframes marquee {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(-20%);
+  }
+}
+@-webkit-keyframes marquee {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(-20%);
+  }
+}
diff --git a/index.html b/index.html
index 030ef8946edda1263190735a7961de0ffdb6bc4c..64b48a12a2b3d54e970b3060f6c0e829ec81a557 100644
--- a/index.html
+++ b/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="favicon.png" type="image/x-icon" rel="icon"/>
     <link rel="stylesheet" href="css/font.css"/>
-    <link rel="stylesheet" href="less/style.php?name=css/design.less"/>
-    <link rel="stylesheet" href="less/style.php?name=css/marquee.less"/>
+    <link rel="stylesheet" href="css/design.less"/>
+    <link rel="stylesheet" href="css/marquee.less"/>
     <link rel="stylesheet" href="css/jquery.ui.css"/>
     <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
     <script type="text/javascript" src="js/jquery-ui.min.js"></script>
diff --git a/panels/GameOfLife/style.css b/panels/GameOfLife/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/panels/clock/style.css b/panels/clock/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..235656c7b276a90d26cba54f8f9fc5369a75d6da
--- /dev/null
+++ b/panels/clock/style.css
@@ -0,0 +1,8 @@
+canvas {
+  position: relative;
+  display: inline;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
diff --git a/panels/departure/style.css b/panels/departure/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..608554cfce93b9bfd9648b017903482e170581cd
--- /dev/null
+++ b/panels/departure/style.css
@@ -0,0 +1,105 @@
+[data-departure-view] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #000000;
+  padding: 0px;
+  box-sizing: border-box;
+  overflow: hidden;
+  font-family: display;
+}
+[data-departure-view] [data-departure] {
+  position: relative;
+  width: 100%;
+  background-color: rgba(33, 33, 134, 0.25);
+  color: #FFFFFF;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #000000;
+  padding: 0px;
+  box-sizing: border-box;
+}
+[data-departure-view] [data-departure] [data-transport] {
+  position: relative;
+  display: flex;
+  width: 100%;
+  white-space: nowrap;
+}
+[data-departure-view] [data-departure] [data-transport] [data-line] {
+  position: relative;
+  display: block;
+  background-color: #FFFFFF;
+  color: #0000A0;
+  /*width: 10%;*/
+  height: 100%;
+  text-align: right;
+  padding: 0px 5px;
+}
+[data-departure-view] [data-departure] [data-transport] [data-name] {
+  position: relative;
+  display: block;
+  flex: 1;
+  /*	background-color: #0000A0; */
+  color: #FFFFFF;
+  height: 100%;
+  padding: 0px 5px;
+}
+[data-departure-view] [data-departure] [data-stops] {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+[data-departure-view] [data-departure] [data-stops] [data-stop] {
+  position: relative;
+  display: flex;
+  list-style: none;
+  width: 100%;
+  margin: 1px 0px 0px 0px;
+}
+[data-departure-view] [data-departure] [data-stops] [data-stop] [data-time] {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  text-align: right;
+  padding: 0px 5px 0px 0px;
+}
+[data-departure-view] [data-departure] [data-stops] [data-stop] [data-delay] {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  text-align: left;
+  padding: 0px 5px 0px 0px;
+  font-weight: bold;
+  color: #B8860B;
+}
+[data-departure-view] [data-departure] [data-stops] [data-stop] [data-name] {
+  position: relative;
+  flex: 1;
+  padding-left: 5px;
+  height: 100%;
+  overflow: hidden;
+}
+[data-departure-view] [data-msg] {
+  position: relative;
+  width: 100%;
+  background-color: #0000A0;
+  color: #FFFFFF;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #000000;
+  padding: 0px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  display: hidden;
+}
+[data-departure-view] [data-msg] [data-title] {
+  width: 100%;
+  background-color: #FFFFFF;
+  color: #0000A0;
+  text-align: center;
+}
+[data-departure-view] [data-msg] [data-message] {
+  width: 100%;
+}
diff --git a/panels/itworks/style.css b/panels/itworks/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..48b327f69245ebd13140357d5b9986b9e5d891a0
--- /dev/null
+++ b/panels/itworks/style.css
@@ -0,0 +1,4 @@
+span {
+  color: white;
+  font-size: 200pt;
+}
diff --git a/panels/lsfView/style.css b/panels/lsfView/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..a4057e51c96b1d40018817a4b5c39ae257d61f2e
--- /dev/null
+++ b/panels/lsfView/style.css
@@ -0,0 +1,12 @@
+/* Table */
+#lsfViewTable {
+  font-weight: bold;
+}
+#lsfViewTableBody {
+  background-color: #ffffff;
+  color: #000000;
+}
+#lsfViewTitleBar {
+  background-color: #ffffff;
+  text-align: center;
+}
diff --git a/panels/matekalypse/style.css b/panels/matekalypse/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..4caf183f0d78c62ec79643c0f5d752e4f151c759
--- /dev/null
+++ b/panels/matekalypse/style.css
@@ -0,0 +1,22 @@
+#eins {
+  color: #C11010;
+  text-align: center;
+  background: linear-gradient(135deg, #fff200 0%, #ffff00 34%, #ffff00 34%, #070000 35%, #000000 47%, #070000 79%, #070000 79%, #ffff00 79%, #ffff00 100%);
+  background-size: 100% 100%;
+  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+  width: 100%;
+  height: 100%;
+}
+#zwei {
+  width: 100%;
+  word-break: break-all;
+  font-family: vrr;
+  font-size: 142px;
+  height: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 5px;
+}
+#zwei span {
+  height: 100%;
+}
diff --git a/panels/mensaPlan/style.css b/panels/mensaPlan/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..7e18a2d934173025b0cce94e3a02f9acbe79b157
--- /dev/null
+++ b/panels/mensaPlan/style.css
@@ -0,0 +1,15 @@
+/* Table */
+#mensaPlanTable {
+  font-weight: bold;
+}
+#mensaPlanTableHead {
+  background-color: #0000f0;
+  color: #000000;
+}
+#mensaPlanTableBody {
+  background-color: #ffffff;
+  color: #000000;
+}
+#mensaPlanTitleBar {
+  text-align: center;
+}
diff --git a/panels/scrollbar/style.css b/panels/scrollbar/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/panels/ufc/style.css b/panels/ufc/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..861327f550aa094bd47a4285f25504091d4b0b14
--- /dev/null
+++ b/panels/ufc/style.css
@@ -0,0 +1,39 @@
+#title {
+  height: 20%;
+}
+#zeit {
+  height: 10%;
+}
+#zeit span {
+  background: #b00;
+  display: inline-block;
+  padding: 3px;
+}
+* {
+  box-sizing: border-box;
+}
+#container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+#background {
+  bottom: 0px;
+  height: 70% !important;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: 50% 100%;
+  -webkit-filter: grayscale(30%);
+  filter: grayscale(30%);
+}
+#content {
+  font-family: NewCicle, Verdana, Arial, sans-serif;
+  text-transform: Capitalize;
+  color: white;
+}
+#background,
+#content {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
diff --git a/panels/werbung/style.css b/panels/werbung/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..78f273f768dcfedc308ae53ad767a18e8e21bb77
--- /dev/null
+++ b/panels/werbung/style.css
@@ -0,0 +1,15 @@
+#werbung_container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+#werbung_display {
+  height: 100%;
+  width: auto;
+  max-height: 100%;
+  max-width: 100%;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+}