diff --git a/css/editor.css b/css/editor.css
index 55ecf567..e6afd1fa 100644
--- a/css/editor.css
+++ b/css/editor.css
@@ -1,40 +1,40 @@
-.editor {
+.ace_editor {
   position: absolute;
   overflow: hidden;
 }
 
-.scroller {
+.ace_scroller {
   position: absolute;
   overflow-x: scroll;
   overflow-y: hidden;     
 }
 
-.gutter {
+.ace_gutter {
   position: absolute;
   overflow-x: scroll;
   overflow-y: hidden;
   height: 100%;
 }
 
-.editor .sb {
+.ace_editor .ace_sb {
   position: absolute;
   overflow-x: hidden;
   overflow-y: scroll;
   right: 0;
 }
 
-.editor .sb div {
+.ace_editor .ace_sb div {
   position: absolute;
   width: 1px;
   left: 0px;
 }
 
-.editor .printMargin {
+.ace_editor .ace_printMargin {
   position: absolute;
   height: 100%;
 }
 
-.layer {
+.ace_layer {
   z-index: 0;
   position: absolute;
   overflow: hidden;  
@@ -42,43 +42,43 @@
   height: 100%;
 }
 
-.text-layer {
+.ace_text-layer {
   font-family: Monaco, "Courier New", monospace;
   color: black;
 }
 
-.cursor-layer {
+.ace_cursor-layer {
   cursor: text;
 }
 
-.cursor {
+.ace_cursor {
   z-index: 3;
   position: absolute;
 }
 
-.line {
+.ace_line {
   white-space: nowrap;
 }
 
-.marker-layer {
+.ace_marker-layer {
 }
 
-.marker-layer .step {
+.ace_marker-layer .ace_step {
   position: absolute;
   z-index: 2;
 }
 
-.marker-layer .selection {
+.ace_marker-layer .ace_selection {
   position: absolute;
   z-index: 3;
 }
 
-.marker-layer .bracket {
+.ace_marker-layer .ace_bracket {
   position: absolute;
   z-index: 4;
 }
 
-.marker-layer .active_line {
+.ace_marker-layer .ace_active_line {
   position: absolute;
   z-index: 1;
 }
\ No newline at end of file
diff --git a/css/tm.css b/css/tm.css
index bbb9b657..71d59656 100644
--- a/css/tm.css
+++ b/css/tm.css
@@ -1,12 +1,12 @@
-.editor {
+.ace_editor {
   border: 2px solid rgb(159, 159, 159);
 }
 
-.editor.focus {
+.ace_editor.ace_focus {
   border: 2px solid #327fbd;;
 }
 
-.gutter {
+.ace_gutter {
   width: 40px;
   background: rgb(227, 227, 227);
   border-right: 1px solid rgb(159, 159, 159);	 
@@ -15,89 +15,89 @@
   font-size: 12px;  
 }
 
-.editor .printMargin {
+.ace_editor .ace_printMargin {
   width: 1px;
   background: rgb(191, 191, 191);
 }
 
-.gutter-layer {
+.ace_gutter-layer {
   right: 10px;
   text-align: right;
 }
 
-.text-layer {
+.ace_text-layer {
   font-family: Monaco, "Courier New", monospace;
   font-size: 12px;
   cursor: text;
 }
 
-.cursor {
+.ace_cursor {
   border-left: 2px solid black;
 }
 
-.cursor.overwrite {
+.ace_cursor.ace_overwrite {
   border-left: 0px;
   border-bottom: 1px solid black;
 }
         
-.line .invisible {
+.ace_line .ace_invisible {
   color: rgb(191, 191, 191);
 }
 
-.line .keyword {
+.ace_line .ace_keyword {
   color: blue;
 }
 
-.line .buildin-constant {
+.ace_line .ace_buildin-constant {
   color: rgb(88, 72, 246);
 }
 
-.line .library-constant {
+.ace_line .ace_library-constant {
   color: rgb(6, 150, 14);
 }
 
-.line .buildin-function {
+.ace_line .ace_buildin-function {
   color: rgb(60, 76, 114);
 }
 
-.line .string {
+.ace_line .ace_string {
   color: rgb(3, 106, 7);
 }
 
-.line .comment {
+.ace_line .ace_comment {
   font-style: italic;
   color: rgb(76, 136, 107);
 }
 
-.line .doc-comment {
+.ace_line .ace_doc-comment {
   color: rgb(0, 102, 255);
 }
 
-.line .doc-comment-tag {
+.ace_line .ace_doc-comment-tag {
   color: rgb(128, 159, 191);
 }
 
-.line .number {
+.ace_line .ace_number {
   color: rgb(0, 0, 205);
 }
 
-.line .xml_pe {
+.ace_line .ace_xml_pe {
   color: rgb(104, 104, 91);
 }
 
-.marker-layer .selection {
+.ace_marker-layer .ace_selection {
   background: rgb(181, 213, 255);
 }
 
-.ce .marker-layer .step {
+.ace_marker-layer .ace_step {
   background: rgb(198, 219, 174);
 }
 
-.marker-layer .bracket {
+.ace_marker-layer .ace_bracket {
   margin: -1px 0 0 -1px;
   border: 1px solid rgb(192, 192, 192);
 }
 
-.marker-layer .active_line {
+.ace_marker-layer .ace_active_line {
   background: rgb(232, 242, 254);
 }
\ No newline at end of file
diff --git a/src/ace/Editor.js b/src/ace/Editor.js
index a0e4aca1..8c490d50 100644
--- a/src/ace/Editor.js
+++ b/src/ace/Editor.js
@@ -142,7 +142,7 @@ ace.Editor = function(renderer, doc) {
             var pos = self.doc.findMatchingBracket(self.getCursorPosition());
             if (pos) {
                 var range = new ace.Range(pos.row, pos.column, pos.row, pos.column+1);
-                self.$bracketHighlight = self.renderer.addMarker(range, "bracket");
+                self.$bracketHighlight = self.renderer.addMarker(range, "ace_bracket");
             }
         }, 10);
     };
@@ -195,7 +195,7 @@ ace.Editor = function(renderer, doc) {
         if (this.getHighlightActiveLine() && !this.selection.isMultiLine()) {
             var cursor = this.getCursorPosition();
             var range = new ace.Range(cursor.row, 0, cursor.row+1, 0);
-            this.$highlightLineMarker = this.renderer.addMarker(range, "active_line", "line");
+            this.$highlightLineMarker = this.renderer.addMarker(range, "ace_active_line", "line");
         }
     };
 
@@ -208,7 +208,7 @@ ace.Editor = function(renderer, doc) {
         if (!this.selection.isEmpty()) {
             var range = this.selection.getRange();
             var style = this.getSelectionStyle();
-            this.$selectionMarker = this.renderer.addMarker(range, "selection", style);
+            this.$selectionMarker = this.renderer.addMarker(range, "ace_selection", style);
         }
 
         this.onCursorChange();
diff --git a/src/ace/ScrollBar.js b/src/ace/ScrollBar.js
index 8e487f47..c652418a 100644
--- a/src/ace/ScrollBar.js
+++ b/src/ace/ScrollBar.js
@@ -2,7 +2,7 @@ ace.provide("ace.ScrollBar");
 
 ace.ScrollBar = function(parent) {
     this.element = document.createElement("div");
-    this.element.className = "sb";
+    this.element.className = "ace_sb";
 
     this.inner = document.createElement("div");
     this.element.appendChild(this.inner);
diff --git a/src/ace/VirtualRenderer.js b/src/ace/VirtualRenderer.js
index d8d5f8a2..7996ae37 100644
--- a/src/ace/VirtualRenderer.js
+++ b/src/ace/VirtualRenderer.js
@@ -2,14 +2,14 @@ ace.provide("ace.VirtualRenderer");
 
 ace.VirtualRenderer = function(container) {
     this.container = container;
-    ace.addCssClass(this.container, "editor");
+    ace.addCssClass(this.container, "ace_editor");
 
     this.scroller = document.createElement("div");
-    this.scroller.className = "scroller";
+    this.scroller.className = "ace_scroller";
     this.container.appendChild(this.scroller);
 
     this.$gutter = document.createElement("div");
-    this.$gutter.className = "gutter";
+    this.$gutter.className = "ace_gutter";
     this.container.appendChild(this.$gutter);
 
     this.content = document.createElement("div");
@@ -116,7 +116,7 @@ ace.VirtualRenderer = function(container) {
 
         if (!this.$printMarginEl) {
             this.$printMarginEl = document.createElement("div");
-            this.$printMarginEl.className = "printMargin";
+            this.$printMarginEl.className = "ace_printMargin";
             this.content.insertBefore(this.$printMarginEl, this.$cursorLayer.element);
         }
 
@@ -374,11 +374,11 @@ ace.VirtualRenderer = function(container) {
     };
 
     this.visualizeFocus = function() {
-        ace.addCssClass(this.container, "focus");
+        ace.addCssClass(this.container, "ace_focus");
     };
 
     this.visualizeBlur = function() {
-        ace.removeCssClass(this.container, "focus");
+        ace.removeCssClass(this.container, "ace_focus");
     };
 
     this.showComposition = function(position) {
diff --git a/src/ace/layer/Cursor.js b/src/ace/layer/Cursor.js
index e907440c..06480a7f 100644
--- a/src/ace/layer/Cursor.js
+++ b/src/ace/layer/Cursor.js
@@ -2,11 +2,11 @@ ace.provide("ace.layer.Cursor");
 
 ace.layer.Cursor = function(parentEl) {
     this.element = document.createElement("div");
-    this.element.className = "layer cursor-layer";
+    this.element.className = "ace_layer ace_cursor-layer";
     parentEl.appendChild(this.element);
 
     this.cursor = document.createElement("div");
-    this.cursor.className = "cursor";
+    this.cursor.className = "ace_cursor";
 
     this.isVisible = false;
 };
@@ -19,9 +19,9 @@ ace.layer.Cursor = function(parentEl) {
             column : position.column
         };
         if (overwrite) {
-            ace.addCssClass(this.cursor, "overwrite");
+            ace.addCssClass(this.cursor, "ace_overwrite");
         } else {
-            ace.removeCssClass(this.cursor, "overwrite");
+            ace.removeCssClass(this.cursor, "ace_overwrite");
         }
     };
 
diff --git a/src/ace/layer/Gutter.js b/src/ace/layer/Gutter.js
index 149e71f3..6b6def41 100644
--- a/src/ace/layer/Gutter.js
+++ b/src/ace/layer/Gutter.js
@@ -2,7 +2,7 @@ ace.provide("ace.layer.Gutter");
 
 ace.layer.Gutter = function(parentEl) {
     this.element = document.createElement("div");
-    this.element.className = "layer gutter-layer";
+    this.element.className = "ace_layer ace_gutter-layer";
     parentEl.appendChild(this.element);
 
     this.$breakpoints = [];
@@ -22,8 +22,8 @@ ace.layer.Gutter = function(parentEl) {
 
         var html = [];
         for ( var i = config.firstRow; i <= config.lastRow; i++) {
-            html.push("<div class='gutter-cell",
-                this.$breakpoints[i] ? " breakpoint" : "",
+            html.push("<div class='ace_gutter-cell",
+                this.$breakpoints[i] ? " ace_breakpoint" : "",
                 "' style='height:", config.lineHeight, "px;'>", (i+1), "</div>");
             html.push("</div>");
         }
diff --git a/src/ace/layer/Marker.js b/src/ace/layer/Marker.js
index 51b9c9d9..9d4c76e3 100644
--- a/src/ace/layer/Marker.js
+++ b/src/ace/layer/Marker.js
@@ -2,7 +2,7 @@ ace.provide("ace.layer.Marker");
 
 ace.layer.Marker = function(parentEl) {
     this.element = document.createElement("div");
-    this.element.className = "layer marker-layer";
+    this.element.className = "ace_layer ace_marker-layer";
     parentEl.appendChild(this.element);
 
     this.markers = {};
diff --git a/src/ace/layer/Text.js b/src/ace/layer/Text.js
index df7f15c4..0f483db4 100644
--- a/src/ace/layer/Text.js
+++ b/src/ace/layer/Text.js
@@ -2,7 +2,7 @@ ace.provide("ace.layer.Text");
 
 ace.layer.Text = function(parentEl) {
     this.element = document.createElement("div");
-    this.element.className = "layer text-layer";
+    this.element.className = "ace_layer ace_text-layer";
     parentEl.appendChild(this.element);
 
     this.$characterSize = this.$measureSizes();
@@ -92,7 +92,7 @@ ace.layer.Text = function(parentEl) {
         var tabSize = this.doc.getTabSize();
         if (this.$showInvisibles) {
             var halfTab = (tabSize) / 2;
-            this.$tabString = "<span class='invisible'>"
+            this.$tabString = "<span class='ace_invisible'>"
                 + new Array(Math.floor(halfTab)).join("&nbsp;")
                 + this.TAB_CHAR
                 + new Array(Math.ceil(halfTab)+1).join("&nbsp;")
@@ -124,7 +124,7 @@ ace.layer.Text = function(parentEl) {
 
         var html = [];
         for ( var i = config.firstRow; i <= config.lastRow; i++) {
-            html.push("<div class='line' style='height:" + this.$characterSize.height + "px;", "width:",
+            html.push("<div class='ace_line' style='height:" + this.$characterSize.height + "px;", "width:",
                       config.width, "px'>");
             this.renderLine(html, i), html.push("</div>");
         }
@@ -140,7 +140,7 @@ ace.layer.Text = function(parentEl) {
             var spaceRe = /[\v\f \u00a0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000]+/g;
             var spaceReplace = function(space) {
                 var space = new Array(space.length+1).join(self.SPACE_CHAR);
-                return "<span class='invisible'>" + space + "</span>";
+                return "<span class='ace_invisible'>" + space + "</span>";
             };
         }
         else {
@@ -158,7 +158,7 @@ ace.layer.Text = function(parentEl) {
                 .replace(/\t/g, this.$tabString);
 
             if (token.type !== "text") {
-                stringBuilder.push("<span class='", token.type, "'>", output, "</span>");
+                stringBuilder.push("<span class='ace_", token.type, "'>", output, "</span>");
             }
             else {
                 stringBuilder.push(output);
@@ -167,9 +167,9 @@ ace.layer.Text = function(parentEl) {
 
         if (this.$showInvisibles) {
             if (row !== this.doc.getLength() - 1) {
-                stringBuilder.push("<span class='invisible'>" + this.EOL_CHAR + "</span>");
+                stringBuilder.push("<span class='ace_invisible'>" + this.EOL_CHAR + "</span>");
             } else {
-                stringBuilder.push("<span class='invisible'>" + this.EOF_CHAR + "</span>");
+                stringBuilder.push("<span class='ace_invisible'>" + this.EOF_CHAR + "</span>");
             }
         }
     };