diff --git a/css/editor.css b/css/editor.css
new file mode 100644
index 00000000..93045d02
--- /dev/null
+++ b/css/editor.css
@@ -0,0 +1,316 @@
+@namespace text url(urn:oasis:names:tc:opendocument:xmlns:text:1.0);
+
+html, body, #mainContainer {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    font-family: sans-serif;
+    font-size: 10pt;
+    padding: 0px;
+}
+
+#mainContainer {
+    background-color: gray;
+}
+
+#editor *:focus {
+    outline: none;
+}
+
+#editor {
+    border: none;
+    box-shadow: 0px 0px 14px black;
+    overflow: hidden;
+    padding: 0px !important;
+    z-index: 4;
+}
+
+#menubar {
+    border: none;
+    overflow: hidden;
+    background-color: #E6E6E7;
+}
+
+#toolbar {
+    overflow: hidden;
+}
+
+#container {
+    text-align: center;
+    background-color: #FAFAFA;
+    overflow: auto;
+
+    position: absolute;
+    top: 30px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+#canvas {
+    box-shadow: 0px 0px 20px #aaa;
+    margin-top: 30px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 30px;
+
+    transform-origin: top center;
+    -webkit-transform-origin: top center;
+    -moz-transform-origin: top center;
+    -o-transform-origin: top center;
+
+    overflow: hidden;
+}
+
+#collaboration {
+    width: 20%;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+
+    box-shadow: 0 0 3px #888;
+
+    border: none;
+}
+
+#collaboration > .dojoxExpandoTitle {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    border: none;
+    background-color: rgb(243, 243, 243);
+}
+
+#collaboration > .dojoxExpandoWrapper {
+    width: 100%;
+    background-color: rgb(243, 243, 243);
+    border: 1px solid #769DC0;
+    border: none;
+
+}
+
+#people {
+    width: 70px;  
+    padding: 2px;
+    text-align: center;
+    background-color: gray;
+    border: none;
+}
+
+#inviteButton {
+    display: none;
+
+    color: white;
+    margin-top: 5px;
+    padding: 3px;
+    word-wrap: break-word;
+    text-align: center justify;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 5px;
+    text-align: center;
+    background-color: black;
+    box-shadow: 0px 0px 5px rgb(90, 90, 90);
+    border: 1px solid black;
+    cursor: pointer;
+}
+#inviteButton:hover {
+    color: yellow;
+    box-shadow: 0px 0px 5px red;
+}
+#inviteButton:active {
+    box-shadow: 0px 0px 15px red;
+}
+
+#people > #nameInfo {
+    padding-top: 3px;
+    padding-bottom: 3px;
+    width: 100%;
+    background-color: #eef;
+}
+
+#peopleList .userListButton {
+    margin-top: 5px;
+    padding-top: 3px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 68px;
+    border-radius: 5px;
+    text-align: center;
+    background-color: black;
+    box-shadow: 0px 0px 5px rgb(90, 90, 90);
+    border: 1px solid black;
+    cursor: pointer;
+}
+
+#peopleList .userListLabel {
+    color: white;
+    border-radius: 5px;
+    padding: 2px;
+    font-size: 8pt;
+    word-wrap: break-word;
+    text-align: center justify;
+}
+div.userListLabel[fullname]:before {
+    content: attr(fullname) "";
+}
+
+#peopleList img {
+    box-shadow: 0px 0px 5px rgb(90, 90, 90) inset;
+    background-color: rgb(200, 200, 200);
+    border-radius: 5px;
+    border: 2px solid;
+    height: 60px;
+    width: 60px;
+    display: block;
+    margin: auto;
+}
+
+#peopleList img:hover {
+    opacity: 0.9;
+}
+
+#chat {
+    padding: 0px;
+    text-align: center;
+    position: relative;
+}
+
+#chat > #inputArea {
+    padding-top: 3px;
+    padding-bottom: 3px;
+    width: 100%;
+    background-color: #eee;
+    position: absolute;
+    bottom: 0px;
+}
+
+#inputArea > #widget_chatInput {
+    width: 95%;
+    border-radius: 10px;
+    padding: 3px;
+    box-shadow: inset 0 0 1px #888;
+}
+
+.dijitDialog {
+    border: none !important;
+    box-shadow: 0 1px 50px rgba(0, 0, 0, 0.25) !important;
+    -moz-box-shadow: 0 1px 50px rgba(0, 0, 0, 0.25) !important;
+    -o-box-shadow: 0 1px 50px rgba(0, 0, 0, 0.25) !important;
+    -webkit-box-shadow: 0 1px 50px rgba(0, 0, 0, 0.25) !important;
+    -ms-box-shadow: 0 1px 50px rgba(0, 0, 0, 0.25) !important;
+}
+
+.dijitDialogTitle {
+    color: #333 !important;
+    font-size: 14pt !important;
+}
+
+.dijitDialogPaneContent {
+    border: none !important;
+    overflow: hidden !important;
+    height: 510px !important;
+    width: 450px !important;
+}
+
+.dijitDialogPaneContent h3 {
+    font-weight: normal;
+    color: #333;
+    font-size: 12pt;
+    padding: 0px;
+    width: 80%;
+    border-bottom: 1px solid #eee;
+}
+
+.dijitTabPaneWrapper {
+    border: none !important;
+}
+.dijitDialogTitleBar {
+    border: none !important;
+    background-color: #fff !important;
+}
+
+.dijitDialogPaneActionBar {
+    margin: 0 !important;
+}
+
+.dijitDialogUnderlay {
+    background: radial-gradient(center, transparent, #333) !important;
+    background: -webkit-radial-gradient(center, transparent , #333) !important;
+    background: -moz-radial-gradient(center, transparent , #333) !important;
+    background: -o-radial-gradient(center, transparent , #333) !important;
+    background: -ms-radial-gradient(center, transparent , #333) !important;
+}
+
+.labeledSelect > table {
+    margin-left: 10px;
+}
+
+.dijitSpinner {
+    width: 50px !important;
+}
+
+.dijitRadio {
+    margin-top: 3px !important;
+    margin-bottom: 3px !important;
+}
+
+.dijitCheckBox {
+    margin-top: 3px !important;
+    margin-bottom: 7px !important;
+}
+.dojoxColorPicker {
+    background-color: transparent !important;
+    border: none !important;
+}
+
+.dialogPreviewBox {
+    height: 100px;
+    width: 100%;
+    border: 1px solid gray;
+    background-color: white;
+    text-align: center;
+}
+
+cursor div {
+    margin-top: 5px;
+    padding-top: 3px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 64px !important;
+    height: 68px !important;
+    border-radius: 5px;
+    text-align: center;
+    background-color: black !important;
+    box-shadow: 0px 0px 5px rgb(90, 90, 90);
+    border: 1px solid black;
+
+    top: -85px !important;
+    left: -34px !important;
+}
+
+cursor img {
+    box-shadow: 0px 0px 5px rgb(90, 90, 90) inset;
+    background-color: rgb(200, 200, 200);
+    border-radius: 5px;
+    border: 2px solid;
+    height: 60px !important;
+    width: 60px !important;
+    display: block;
+    margin: auto;
+}
+
+cursor div.active {
+    opacity: 0.8;
+}
+
+cursor div:after {
+    content: ' ';
+    position: absolute;
+    width: 0px;
+    height: 0px;
+    border-style: solid;
+    border-width: 8.7px 5px 0 5px;
+    border-color: black transparent transparent transparent;
+
+    top: 100%;
+    left: 43%;
+}
diff --git a/css/webodf.css b/css/webodf.css
deleted file mode 100644
index 0ceca2f8..00000000
--- a/css/webodf.css
+++ /dev/null
@@ -1,196 +0,0 @@
-@namespace draw url(urn:oasis:names:tc:opendocument:xmlns:drawing:1.0);
-@namespace fo url(urn:oasis:names:tc:opendocument:xmlns:xsl-fo-compatible:1.0);
-@namespace office url(urn:oasis:names:tc:opendocument:xmlns:office:1.0);
-@namespace presentation url(urn:oasis:names:tc:opendocument:xmlns:presentation:1.0);
-@namespace style url(urn:oasis:names:tc:opendocument:xmlns:style:1.0);
-@namespace svg url(urn:oasis:names:tc:opendocument:xmlns:svg-compatible:1.0);
-@namespace table url(urn:oasis:names:tc:opendocument:xmlns:table:1.0);
-@namespace text url(urn:oasis:names:tc:opendocument:xmlns:text:1.0);
-@namespace runtimens url(urn:webodf); /* namespace for runtime only */
-
-office|document > *, office|document-content > * {
-  display: none;
-}
-office|body, office|document {
-  display: inline-block;
-  position: relative;
-}
-
-text|p, text|h {
-  display: block;
-  padding: 3px 3px 3px 3px;
-  margin: 5px 5px 5px 5px;
-}
-text|h {
-  font-weight: bold;
-}
-*[runtimens|containsparagraphanchor] {
-  position: relative;
-}
-text|s:before { /* this needs to be the number of spaces given by text:c */
-  content: ' ';
-}
-text|tab:before {
-  display: inline;
-  content: '        ';
-}
-text|line-break {
-  content: " ";
-  display: block;
-}
-text|tracked-changes {
-  /*Consumers that do not support change tracking, should ignore changes.*/
-  display: none;
-}
-office|binary-data {
-  display: none;
-}
-office|text {
-  display: block;
-  width: 216mm; /* default to A4 width */
-  min-height: 279mm;
-  padding-left: 32mm;
-  padding-right: 32mm;
-  padding-top: 25mm;
-  padding-bottom: 13mm;
-  margin: 2px;
-  text-align: left;
-  overflow: hidden;
-}
-office|spreadsheet {
-  display: block;
-  border-collapse: collapse;
-  empty-cells: show;
-  font-family: sans-serif;
-  font-size: 10pt;
-  text-align: left;
-  page-break-inside: avoid;
-  overflow: hidden;
-}
-office|presentation {
-  display: inline-block;
-  text-align: left;
-}
-draw|page {
-  display: block;
-  height: 21cm;
-  width: 28cm;
-  margin: 3px;
-  position: relative;
-  overflow: hidden;
-}
-presentation|notes {
-    display: none;
-}
-@media print {
-  draw|page {
-    border: 1pt solid black;
-    page-break-inside: avoid;
-  }
-  presentation|notes {
-    /*TODO*/
-  }
-}
-office|spreadsheet text|p {
-  border: 0px;
-  padding: 1px;
-  margin: 0px;
-}
-office|spreadsheet table|table {
-  margin: 3px;
-}
-office|spreadsheet table|table:after {
-  /* show sheet name the end of the sheet */
-  /*content: attr(table|name);*/ /* gives parsing error in opera */
-}
-office|spreadsheet table|table-row {
-  counter-increment: row;
-}
-office|spreadsheet table|table-row:before {
-  width: 3em;
-  background: #cccccc;
-  border: 1px solid black;
-  text-align: center;
-  content: counter(row);
-}
-office|spreadsheet table|table-cell {
-  border: 1px solid #cccccc;
-}
-table|table {
-  display: table;
-}
-draw|frame table|table {
-  width: 100%;
-  height: 100%;
-  background: white;
-}
-table|table-row {
-  display: table-row;
-}
-table|table-column {
-  display: table-column;
-}
-table|table-cell {
-  display: table-cell;
-}
-draw|frame {
-  display: block;
-}
-draw|image {
-  display: block;
-  width: 100%;
-  height: 100%;
-  top: 0px;
-  left: 0px;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  -moz-background-size: 100% 100%;
-}
-/* only show the first image in frame */
-draw|frame > draw|image:nth-of-type(n+2) {
-  display: none;
-}
-text|list {
-    display: block;
-    padding-left: 1.5em;
-    counter-reset: list;
-}
-text|list-item {
-    display: block;
-}
-text|list-item:before {
-    display: inline-block;
-    content: '•';
-    counter-increment: list;
-    width: 0.5em;
-    margin-left: -0.5em;
-    padding: 0px;
-    border: 0px;
-}
-text|list-item > *:first-child {
-    display: inline-block;
-}
-text|a {
-    color: blue;
-    text-decoration: underline;
-}
-text|note-citation {
-    vertical-align: super;
-    font-size: smaller;
-}
-text|note-body {
-    display: none;
-}
-text|note:hover text|note-citation {
-    background: #dddddd;
-}
-text|note:hover text|note-body {
-    display: block;
-    left:1em;
-    max-width: 80%;
-    position: absolute;
-    background: #ffffaa;
-}
-svg|title, svg|desc {
-    display: none;
-}
diff --git a/index.php b/index.php
index 1587fe60..e1b6641b 100755
--- a/index.php
+++ b/index.php
@@ -26,6 +26,7 @@ OCP\JSON::checkAppEnabled('office');
 OCP\App::setActiveNavigationEntry( 'office_index' );
 
 OCP\Util::addStyle( 'office', 'style' );
+OCP\Util::addStyle( 'office', 'editor' );
 OCP\Util::addScript('office', 'office');
 
 $list=\OCA\Office\Storage::getDocuments();