overflow-x: auto;

  overflow-y: hidden;

  float: right;

  /* This corrects for the 1px gap introduced to the left of the scrollbar

     by the rule for .CodeMirror-scrollbar-inner. */

  margin-left: -1px;

.CodeMirror-lines * {

  /* Necessary for throw-scrolling to decelerate properly on Safari. */

  pointer-events: none;

}

.cm-s-default span.cm-bracket {color: #cc7;}

var CodeMirror = (function() {

    var wrapper = document.createElement("div");

    wrapper.className = "CodeMirror" + (options.lineWrapping ? " CodeMirror-wrap" : "");

    // This mess creates the base DOM structure for the editor.

    wrapper.innerHTML =

      '<div style="overflow: hidden; position: relative; width: 3px; height: 0px;">' + // Wraps and hides input textarea

        '<textarea style="position: absolute; padding: 0; width: 1px; height: 1em" wrap="off" ' +

          'autocorrect="off" autocapitalize="off"></textarea></div>' +

      '<div class="CodeMirror-scrollbar">' + // The vertical scrollbar. Horizontal scrolling is handled by the scroller itself.

        '<div class="CodeMirror-scrollbar-inner">' + // The empty scrollbar content, used solely for managing the scrollbar thumb.

      '</div></div>' + // This must be before the scroll area because it's float-right.

      '<div class="CodeMirror-scroll" tabindex="-1">' +

        '<div style="position: relative">' + // Set to the height of the text, causes scrolling

          '<div style="position: relative">' + // Moved around its parent to cover visible view

            '<div class="CodeMirror-gutter"><div class="CodeMirror-gutter-text"></div></div>' +

            // Provides positioning relative to (visible) text origin

            '<div class="CodeMirror-lines"><div style="position: relative; z-index: 0">' +

              // Used to measure text size

              '<div style="position: absolute; width: 100%; height: 0; overflow: hidden; visibility: hidden;"></div>' +

              '<pre class="CodeMirror-cursor">&#160;</pre>' + // Absolutely positioned blinky cursor

              '<pre class="CodeMirror-cursor" style="visibility: hidden">&#160;</pre>' + // Used to force a width

              '<div style="position: relative; z-index: -1"></div><div></div>' + // DIVs containing the selection and the actual code

            '</div></div></div></div></div>';

    // I've never seen more elegant code in my life.

    var inputDiv = wrapper.firstChild, input = inputDiv.firstChild,

        scroller = wrapper.lastChild, code = scroller.firstChild,

        mover = code.firstChild, gutter = mover.firstChild, gutterText = gutter.firstChild,

        lineSpace = gutter.nextSibling.firstChild, measure = lineSpace.firstChild,

        cursor = measure.nextSibling, widthForcer = cursor.nextSibling,

        selectionDiv = widthForcer.nextSibling, lineDiv = selectionDiv.nextSibling,

        scrollbar = inputDiv.nextSibling, scrollbarInner = scrollbar.firstChild;

    // Check for OS X >= 10.7. If so, we need to force a width on the scrollbar, and 

    // make it overlap the content. (But we only do this if the scrollbar doesn't already

    // have a natural width. If the mouse is plugged in or the user sets the system pref

    // to always show scrollbars, the scrollbar shouldn't overlap.)

    if (mac_geLion) {

      scrollbar.className += (overlapScrollbars() ? " cm-sb-overlap" : " cm-sb-nonoverlap");

    } else if (ie_lt8) {

      // Need to set a minimum width to see the scrollbar on IE7 (but must not set it on IE8).

      scrollbar.className += " cm-sb-ie7";

    }

    // Check for problem with IE innerHTML not working when we have a

    // P (or similar) parent node.

    try { stringWidth("x"); }

    catch (e) {

      if (e.message.match(/runtime/i))

        e = new Error("A CodeMirror inside a P-style element does not work in Internet Explorer. (innerHTML bug)");

      throw e;

    }

    // work an array of lines that should be parsed, and history the

    // undo history (instance of History constructor).

    var mode, doc = new BranchChunk([new LeafChunk([new Line("")])]), work, focused;

    var shiftSelecting, lastClick, lastDoubleClick, lastScrollTop = 0, lastScrollLeft = 0, draggingText,

    var updateInput, userSelChange, changes, textChanged, selectionChanged, leaveInputAlone,

    var maxLine = "", updateMaxLine = false, maxLineChanged = true;

    var tabCache = {};

    connect(scroller, "scroll", onScroll);

    connect(scrollbar, "scroll", onScroll);

    connect(scrollbar, "mousedown", function() {setTimeout(focusInput, 0);});

    connect(scroller, "mousewheel", onMouseWheel);

    connect(scroller, "DOMMouseScroll", onMouseWheel);

    connect(window, "resize", function() {updateDisplay(true);});

      function drag_(e) {

        if (options.onDragEvent && options.onDragEvent(instance, addStop(e))) return;

        e_stop(e);

      }

    if (khtml) connect(code, "mouseup", function() {

        if (option == "lineNumbers" || option == "gutter" || option == "firstLineNumber" || option == "theme") {

        return getLine(pos.line).getTokenAt(mode, getStateBefore(pos.line), pos.ch);

        code.appendChild(node);

              hspace = Math.max(code.clientWidth, lineSpace.clientWidth) - paddingLeft();

          left = code.clientWidth - node.offsetWidth;

          else if (horiz == "middle") left = (code.clientWidth - node.offsetWidth) / 2;

      getRange: function(from, to) {return getRange(clipPos(from), clipPos(to));},

        if (y != null) scrollbar.scrollTop = y;

        updateDisplay(true);

    function getValue() {

      return text.join("\n");

    function onScroll(e) {

      if (lastScrollTop != scrollbar.scrollTop || lastScrollLeft != scroller.scrollLeft) {

        lastScrollTop = scrollbar.scrollTop;

        lastScrollLeft = scroller.scrollLeft;

        if (options.fixedGutter) gutter.style.left = scroller.scrollLeft + "px";

        if (options.onScroll) options.onScroll(instance);

        if (n.parentNode == code && n != mover) return;

        if (gecko && !mac) onContextMenu(e);

      var now = +new Date;

        return selectLine(start.line);

        return selectWordAt(start);

          !posLess(start, sel.from) && !posLess(sel.to, start)) {

        function dragEnd(e2) {

          if (webkit) scroller.draggable = false;

          draggingText = false;

          up(); drop();

          if (Math.abs(e.clientX - e2.clientX) + Math.abs(e.clientY - e2.clientY) < 10) {

            e_preventDefault(e2);

            setCursor(start.line, start.ch, true);

            focusInput();

          }

        }

      setCursor(start.line, start.ch, true);

          setSelectionUser(start, cur);

        if (cur) setSelectionUser(start, cur);

      var start = posFromMouse(e);

      if (!start) return;

      lastDoubleClick = {time: +new Date, pos: start};

      selectWordAt(start);

      e.preventDefault();

        function loadFile(file, i) {

        }

        var n = files.length, text = Array(n), read = 0;

      if (gecko || chrome || opera) {

        var img = document.createElement('img');

        img.scr = 'data:image/gif;base64,R0lGODdhAgACAIAAAAAAAP///ywAAAAAAgACAAACAoRRADs='; //1x1 image

        e.dataTransfer.setDragImage(img, 0, 0);

      }

      if (e_prop(e, "ctrlKey")) name = "Ctrl-" + name;

      if (e_prop(e, "metaKey")) name = "Cmd-" + name;

    var lastStoppedKey = null, maybeTransition;

        if (!leaveInputAlone) resetInput(true);

    function chopDelta(delta) {

      // Make sure we always scroll a little bit for any nonzero delta.

      if (delta > 0.0 && delta < 1.0) return 1;

      else if (delta > -1.0 && delta < 0.0) return -1;

      else return Math.round(delta);

    }

    function onMouseWheel(e) {

      var deltaX = 0, deltaY = 0;

      if (e.type == "DOMMouseScroll") { // Firefox

        var delta = -e.detail * 8.0;

        if (e.axis == e.HORIZONTAL_AXIS) deltaX = delta;

        else if (e.axis == e.VERTICAL_AXIS) deltaY = delta;

      } else if (e.wheelDeltaX !== undefined && e.wheelDeltaY !== undefined) { // WebKit

        deltaX = e.wheelDeltaX / 3.0;

        deltaY = e.wheelDeltaY / 3.0;

      } else if (e.wheelDelta !== undefined) { // IE or Opera

        deltaY = e.wheelDelta / 3.0;

      }

      var scrolled = false;

      deltaX = chopDelta(deltaX);

      deltaY = chopDelta(deltaY);

      if ((deltaX > 0 && scroller.scrollLeft > 0) ||

          (deltaX < 0 && scroller.scrollLeft + scroller.clientWidth < scroller.scrollWidth)) {

        scroller.scrollLeft -= deltaX;

        scrolled = true;

      }

      if ((deltaY > 0 && scrollbar.scrollTop > 0) ||

          (deltaY < 0 && scrollbar.scrollTop + scrollbar.clientHeight < scrollbar.scrollHeight)) {

        scrollbar.scrollTop -= deltaY;

        scrolled = true;

      }

      if (scrolled) e_stop(e);

    }

        var old = [];

        doc.iter(from.line, to.line + 1, function(line) { old.push(line.text); });

      updateLinesNoUndo(from, to, newText, selFrom, selTo);

        doc.iter(change.start, end, function(line) { replaced.push(line.text); });

                   ch: editEnd(replaced[replaced.length-1], change.old[change.old.length-1])};

        updateLinesNoUndo({line: change.start, ch: 0}, {line: end - 1, ch: getLine(end-1).text.length}, change.old, pos, pos);

    function updateLinesNoUndo(from, to, newText, selFrom, selTo) {

      var recomputeMaxLength = false, maxLineLength = maxLine.length;

      if (from.line != to.line || newText.length > 1) gutterDirty = true;

      // First adjust the line structure, taking some care to leave highlighting intact.

      if (from.ch == 0 && to.ch == 0 && newText[newText.length - 1] == "") {

        if (from.line) {

          prevLine = getLine(from.line - 1);

          prevLine.fixMarkEnds(lastLine);

        } else lastLine.fixMarkStarts();

        for (var i = 0, e = newText.length - 1; i < e; ++i)

          added.push(Line.inheritMarks(newText[i], prevLine));

        if (newText.length == 1)

          firstLine.replace(from.ch, to.ch, newText[0]);

        else {

          lastLine = firstLine.split(to.ch, newText[newText.length-1]);

          firstLine.replace(from.ch, null, newText[0]);

          firstLine.fixMarkEnds(lastLine);

          var added = [];

          for (var i = 1, e = newText.length - 1; i < e; ++i)

            added.push(Line.inheritMarks(newText[i], firstLine));

          added.push(lastLine);

      } else if (newText.length == 1) {

        firstLine.replace(from.ch, null, newText[0]);

        lastLine.replace(null, to.ch, "");

        firstLine.append(lastLine);

        firstLine.replace(from.ch, null, newText[0]);

        lastLine.replace(null, to.ch, newText[newText.length-1]);

        firstLine.fixMarkEnds(lastLine);

        for (var i = 1, e = newText.length - 1; i < e; ++i)

          added.push(Line.inheritMarks(newText[i], firstLine));

        doc.iter(from.line, from.line + newText.length, function(line) {

        doc.iter(from.line, from.line + newText.length, function(line) {

            maxLine = l; maxLineLength = l.length; maxLineChanged = true;

      // Add these lines to the work array, so that they will be

      // highlighted. Adjust work lines if lines were added/removed.

      var newWork = [], lendiff = newText.length - nlines - 1;

      for (var i = 0, l = work.length; i < l; ++i) {

        var task = work[i];

        if (task < from.line) newWork.push(task);

        else if (task > to.line) newWork.push(task + lendiff);

      }

      var hlEnd = from.line + Math.min(newText.length, 500);

      highlightLines(from.line, hlEnd);

      newWork.push(hlEnd);

      work = newWork;

      startWorker(100);

      var changeObj = {from: from, to: to, text: newText};

      if (textChanged) {

        for (var cur = textChanged; cur.next; cur = cur.next) {}

        cur.next = changeObj;

      } else textChanged = changeObj;

    function updateVerticalScroll(scrollTop) {

      var th = textHeight(), virtualHeight = Math.floor(doc.height * th + 2 * paddingTop()), scrollbarHeight = scroller.clientHeight;

      scrollbar.style.height = scrollbarHeight + "px";

      if (scroller.clientHeight)

        scrollbarInner.style.height = virtualHeight + "px";

      // Position the mover div to align with the current virtual scroll position

      if (scrollTop != null) scrollbar.scrollTop = scrollTop;

      mover.style.top = (displayOffset * th - scrollbar.scrollTop) + "px";

      scrollbar.style.display = (virtualHeight > scrollbarHeight) ? "block" : "none";

    // On Mac OS X Lion and up, detect whether the mouse is plugged in by measuring 

    // the width of a div with a scrollbar in it. If the width is <= 1, then

    // the mouse isn't plugged in and scrollbars should overlap the content.

    function overlapScrollbars() {

      var tmpSb = document.createElement('div'),

          tmpSbInner = document.createElement('div');

      tmpSb.className = "CodeMirror-scrollbar";

      tmpSb.style.cssText = "position: absolute; left: -9999px; height: 100px;";

      tmpSbInner.className = "CodeMirror-scrollbar-inner";

      tmpSbInner.style.height = "200px";

      tmpSb.appendChild(tmpSbInner);

      document.body.appendChild(tmpSb);

      var result = (tmpSb.offsetWidth <= 1);

      document.body.removeChild(tmpSb);

      return result;