Fire JS Bin - Handcraft

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

/// <reference path="keystrokes.js" />
/// <reference path="scatter.js" />
(function () {
  window.Sheet =
  {
    code: "",
    codeSinceLastSave: "",
    clientPassword: "",
    sheetsVisible: false,
    maximized: false,
    mode: "code",
    lastLine: null,
    editorHeight: 0,
    selectedSheetIndex: -1,
    reloadMediaOnFocus: false,
    showViewableUrlsDelay: 300,

refocus: function () {
      if (Sheet.lastLine != null)
        window.editor.jumpToLine(Sheet.lastLine.line, Sheet.lastLine.pos);
      else
        window.editor.jumpToLine(1, 0);
    },

// pages is updated by heartbeat and knows which page starts at what lineno
    pages: {},

// body onload calls init
    init: function () {
      if (Sheet.clientPassword == "")
        Sheet.clientPassword = "welcome";

Help.init();
      window.onbeforeunload = Sheet.unload;
      Utils.attach(document.body, "keydown", Sheet.keyDown);
      Utils.attach(document.body, "click", Sheet.click);
      Utils.attach(window, "resize", Sheet.resize);
      Utils.attach(window, "blur", Sheet.blur);
      Utils.attach(window, "focus", Sheet.focus);
      $('viewButton').addEvents({ 'mouseenter': Sheet.onHoverViewButton, 'mouseleave': Sheet.onUnhoverViewButton });
      $('viewableUrls').addEvents({ 'mouseenter': Sheet.onHoverViewableUrls, 'mouseleave': Sheet.onUnhoverViewableUrls });
      Keystrokes.init();
      Utils.attach(document.body, "dragenter", Sheet.showDropzone);
    },

// dropzone 
    loadDropzone: function () {
      $("dropzone").setAttribute("src", "/workon/" + webAddress + "/files?view=dropzone");
    },
    showDropzone: function (evt) {
      var isFileTransfer = false;
      if (evt.dataTransfer.types) {
        for (var i = 0; i < evt.dataTransfer.types.length; i++) {
          if (evt.dataTransfer.types[i] == "Files") {
            isFileTransfer = true;
            break;
          }
        }
      }
      if (!isFileTransfer) return false;
      var url = $("dropzone").getAttribute("src");
      if (url == "about:blank") {
        Sheet.loadDropzone();
      }
      $("dropzone").setStyle('display', 'block');
    },
    hideDropzone: function () {
      Sheet.loadDropzone();
      $("dropzone").setStyle('display', 'none');
      csccSense.refreshMedia();
    },

resize: function () {
      var windowHeight = $(window).getSize().y;
      var editorHeight = 0;
      if (Sheet.maximized) {
        var headerHeight = $$("header")[0].getSize().y;
        editorHeight = (windowHeight - headerHeight - 4);
      }
      else {
        var headerSize = $$("header")[0].getSize();
        var headerBottom = $$("header")[0].getOffsets().y + headerSize.y;
        editorHeight = (windowHeight - headerBottom - 14);
      }
      if (window.editor && window.editor.wrapping)
        window.editor.wrapping.style.height = editorHeight + "px";
      Sheet.editorHeight = editorHeight;
    },
    keyDownInsideEditor: function (evt, select, editor) {
      if (evt.keyCode == 27) {
        hideShortcuts();
      }
      if (evt.keyCode == 191 && evt.ctrlKey && evt.shiftKey) {
        return showShortcuts(evt);
      }
      return cscc.keyDown(evt, select, editor);
    },
    keyDown: function (evt) {
      if (shortcutsAreVisible()) return hideShortcuts();

// show shortcuts on "?"
      if (evt.keyCode == 191 && evt.shiftKey) {
        var el = evt.srcElement ? evt.srcElement : evt.target;
        if (!el || el.tagName != "INPUT")
          return showShortcuts(evt);
      }

var focusActions = document.getElementById("focusActions").getElementsByTagName("a");
      for (var i = 0; i < focusActions.length; i++) {
        focusActions[i].className = '';
      }

var options = cscc.initOptions({
        deleteFunction: Sheet.trash,
        saveFunction: Sheet.save,
        findFunction: Sheet.find,
        previewFunction: Sheet.preview,
        maximizeFunction: Sheet.maximize,
        modeFunction: Sheet.toggleMode,
        textWrapping: useWrapping,
        height: '100%',
        parserfile: ["parsexmlcontext.js", "parsecss.js", "tokenizejavascript.js", "parsejavascript.js", "parsequplo.js"],
        stylesheet: ["http://handcraft.it/Codemirror/css/xmlcolors.css", "http://handcraft.it/Codemirror/css/jscolors.css", "http://handcraft.it/Codemirror/css/csscolors.css"],
        path: "http://handcraft.it/Codemirror/",
        autoMatchParens: false,
        lineNumbers: useLineNumbers,
        initCallback: Sheet.editorLoaded,

// add Zen Coding support
        syntax: 'html',
        onLoad: function (editor) {
          zen_editor.bind(editor);
        }
      });
      // wrap cscc methods to do extra stuff with keyboard here
      if (!cscc.IE) {
        options.keyDownFunction = Sheet.keyDownInsideEditor;
      }
      window.cm = window.editor = editor = cscc.editor = CodeMirror.fromTextArea("code", options);
      editor.win.onfocus = Sheet.focus;
    },
    reIndent: function () {
      window.cm.reindent();
    },
    editorLoaded: function () {
      editor.win.document.body.ondragenter = Sheet.showDropzone;
      var hash = document.location.hash.substring(1) + ",";
      var parts = hash.split(',');
      var maximized = false;
      var mode = "code";
      var line = -1;
      var pos = -1;
      for (var i = 0; i < parts.length; i++) {
        var part = parts[i];
        if (part == "max")
          maximized = true;
        if (part == "writing")
          mode = part;
        if (!isNaN(part * 1) && part * 1 > 0) {
          if (line == -1)
            line = part * 1;
          else
            pos = part * 1;
        }
      }

if (mode != Sheet.mode)
        Sheet.toggleEditorMode(document.getElementById("mode" + mode), mode);

if (maximized)
        Sheet.maximize(true);

if (line > -1) {
        document.location.hash = "";
        editor.jumpToLine(line, pos);
      }
      Sheet.codeSinceLastSave = editor.getCode();
      Sheet.heartBeat();
      window.editor.focus();
      Sheet.resize();
      Sheet.updateHash();
    },
    openOtherSheet: function (name) {
      document.location.href = "/" + name;
    },
    onHoverViewableUrls: function () {
      clearTimeout(Sheet.viewTOH);
    },
    onUnhoverViewableUrls: function () {
      clearTimeout(Sheet.viewTOH);
      Sheet.hideViewableUrls();
    },
    onHoverViewButton: function () {
      var xml = editor.getCode();
      var lines = xml.split("\n");
      var currentLine = editor.currentLine();
      var selectedLine = -1;
      Sheet.pages = {};
      for (var j = 0; j < lines.length; j++) {
        var curLine = lines[j];
        if (curLine.indexOf("<page ") != -1) {
          var url = curLine.replace(/^.*<page.*?url=\"(.*?)\".*?$/, "$1");

// ignore post urls
          var isPost = curLine.toLowerCase().indexOf("method=\"post\"") != -1;
          if (!isPost) {
            Sheet.pages[j] = url;
            if (selectedLine == -1)
              selectedLine = j;
            if (currentLine > j)
              selectedLine = j;
          }
        }
      }
      var html = "";
      var pageCount = 0;
      for (var lineNo in Sheet.pages) {
        pageCount++;
        var linkClass = (selectedLine == lineNo) ? "selected" : "";
        var url = (hostName + "/" + Sheet.pages[lineNo].replace(/^\//, "")).replace(/\*/g, "foo");
        if (Sheet.clientPassword != "")
          url += "?ClientPassword=" + Sheet.clientPassword;
        html += "<a class=\"" + linkClass + "\" href=\"" + url + "\" target=\"preview\">" + Sheet.pages[lineNo] + "</a>";
      }
      $('viewableUrls').innerHTML = html;
      if (pageCount > 1) {
        clearTimeout(Sheet.viewTOH);
        Sheet.viewTOH = setTimeout(Sheet.showViewableUrls, Sheet.showViewableUrlsDelay);
      }
    },
    onUnhoverViewButton: function () {
      clearTimeout(Sheet.viewTOH);
      Sheet.viewTOH = setTimeout(Sheet.hideViewableUrls, Sheet.showViewableUrlsDelay);
    },
    showViewableUrls: function () {
      $('viewableUrls').removeClass('hidden');
      var offset = -1 * $('viewableUrls').offsetWidth / 2;
      $('viewableUrls').style.marginLeft = offset + "px";
    },
    hideViewableUrls: function () {
      $('viewableUrls').addClass('hidden');
    },
    preview: function () {
      var xml = editor.getCode();
      var lines = xml.split("\n");
      Sheet.pages = {};
      for (var j = 0; j < lines.length; j++) {
        var curLine = lines[j];
        if (curLine.indexOf("<page ") != -1) {
          var url = curLine.replace(/^\s*<page.*?url=\"(.*?)\".*?$/, "$1");
          if (url == curLine) continue;
          Sheet.pages[j] = url;
        }
      }

if (!newName.match(/^[A-Za-z0-9-_]+$/gi)) {
        Sheet.message("The sheet name can only contain characters, decimals, minus and underscore.", true, 5000);
        el.focus();
        return;
      }
      if (newName.length > 16) {
        Sheet.message("The sheet name cannot exceed 16 characters", true, 4000);
        el.focus();
        return;
      }

Utils.track("/editor/control/rename");

document.location.href = "/workon/" + webAddress + "/action?type=rename&oldName=" + sheetName + "&newName=" + newName;
    },
    heartBeat: function () {
      // update the save button to indicate if changes have been made
      var saveButton = document.getElementById("save");
      if (!Sheet.hasChanges())
        saveButton.className = "button save-disabled";
      else
        saveButton.className = "button";

setTimeout(Sheet.heartBeat, 700);
    },
    save: function () {
      var code = document.getElementById("code").value = editor.getCode();
      Scatter.submit(document.getElementById("form"), Sheet.handleSave);
    },
    handleSave: function (xhr) {
      var message = xhr.responseText;
      var editor = window.editor;

if (!message) {
        Sheet.removeSyntaxErrors();
        Sheet.codeSinceLastSave = editor.getCode();
        Sheet.message("Saved.");
        return;
      }

var info = message.split("|");
      var error = info[0];
      var lineNum = info[1] - 1; // line minus one since serverside has <quplo/> wrapping
      var colNum = info[2] - 1; // col minus one since serverside is 0-based
      var line = editor.nthLine(lineNum);

// if there are no line number and no column number, the server likely returned bad data
      if (!lineNum && !colNum) {
        if (message.indexOf("<title>Sign in") != -1) {
          Sheet.message("You've been signed out, so your changes weren't saved! <a href='/signin' target='_blank'>Click here</a> to sign in using a new browser tab and try saving again afterwards.", true, 60000);
          Utils.track("/editor/feedback/signedout");
          return;
        }
        // todo: throw ServerError
        Sheet.message("Oops. Something went wrong. Please try again.", true, 5000);
        return;
      }

// verify the line exists
      var lineNumInEditor = editor.lineNumber(line);
      var lastLineNumber = editor.lineNumber(editor.lastLine());
      var firstLineNumber = editor.lineNumber(editor.firstLine());

if (!lineNumInEditor && lineNum > lastLineNumber) {
        line = editor.lastLine();
      }
      else if (!lineNumInEditor && lineNum < firstLineNumber) {
        line = editor.firstLine();
      }

// hack because editor.firstLine appears to always return null
      if (!line && lineNum == 1) {
        line = editor.win.document.body.firstChild;
      }

// still no line? something's fubar
      if (!line) {
        return;
      }

var clientRect = line.nextSibling.getClientRects()[0];
      Sheet.showSyntaxError(error, line, colNum, clientRect.top);
    },
    removeSyntaxErrors: function () {
      var doc = editor.win.document;
      var highlight = doc.getElementById('lineHighlight');
      if (highlight) doc.documentElement.removeChild(highlight);
      var error = doc.getElementById('lineError');
      if (error) doc.documentElement.removeChild(error);
    },
    showSyntaxError: function (error, line, colNum, offset) {

offset = offset + 1; // for perfect alignment

Sheet.removeSyntaxErrors();

var doc = editor.win.document;
      var lineNumber = editor.lineNumber(line);
      var lastLineNumber = editor.lineNumber(editor.lastLine());

// see http://code.google.com/p/chromium/issues/detail?id=2891
      var distanceScrolled = doc.documentElement.scrollTop + doc.body.scrollTop;
      if (distanceScrolled > 0)
        offset = offset + distanceScrolled;

var positionOfErrorMessage = offset + ((lineNumber > lastLineNumber - 5) ? -40 : 20);

makeDiv('lineHighlight', offset, null, function (div) {
        div.className = 'visible';
        if (!Sheet.isLineVisible(div)) {
          editor.win.scrollTo(0, Math.max(0, div.offsetTop - 100));
          editor.selectLines(line, colNum);
        }
      });
      makeDiv('lineError', positionOfErrorMessage, error, function (div) { div.className = 'visible'; });

function makeDiv(id, top, innerHTML, timeout) {
        var div = doc.createElement('div');
        div.style.top = top + 'px';
        div.id = id;
        if (innerHTML) div.innerHTML = innerHTML;
        doc.documentElement.appendChild(div);
        setTimeout(function () { timeout(div); }, 100);
      }

Utils.track("/editor/feedback/syntaxerror");
    },
    isLineVisible: function (div) {
      var docViewTop = editor.win.document.documentElement.scrollTop + editor.win.document.body.scrollTop;
      var docViewBottom = docViewTop + editor.win.innerHeight;
      var elemTop = div.offsetTop;
      var elemBottom = elemTop + div.offsetHeight;
      return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
    },
    // detects maximization halfway while drawing the page, to prevent visual ugliness
    earlyMaximize: function () {
      var maximized = document.location.hash.indexOf("max") != -1;
      if (maximized) {
        var el = document.getElementsByTagName("body")[0];
        el.className = "sheet maximized";
        Sheet.maximized = true;
      }
      Sheet.resize();
    },
    maximize: function (forceMaximize) {
      var body = document.getElementsByTagName('body')[0];
      if (!forceMaximize && body.className == 'sheet maximized') {
        Sheet.maximized = false;
        Sheet.updateHash();
        return Sheet.restore();
      }
      Sheet.maximized = true;
      body.className = 'sheet maximized';
      Sheet.updateHash();
      Sheet.resize();
    },
    restore: function () {
      var body = document.getElementsByTagName('body')[0];
      body.className = 'sheet';
      Sheet.resize();
    },
    clickSheets: function (evt) {
      Utils.cancelEvent(evt);
      if (!Sheet.sheetsVisible) {
        Sheet.lastLine = cscc.getCursorInfo(true);
        Sheet.toggleSheets();
        return;
      }
      else {
        Sheet.toggleSheets(true);
        Sheet.refocus();
      }
    },
    // toggles the other sheets panel on or off
    toggleSheets: function (hide) {
      var el = document.getElementById("otherSheets");
      var hidden = (el.className == "hidden")
      if (!hidden || hide)
        el.className = "hidden";
      else
        el.className = "";
      Sheet.sheetsVisible = (el.className != "hidden");
    },
    // hides the other sheets panel
    hideSheets: function (noRefocus) {
      Sheet.toggleSheets(true);
      if (!noRefocus)
        Sheet.refocus();
    },
    // highlight a specific sheet of the other sheets panel
    highlightSheet: function (index) {
      var sheets = document.getElementById("otherSheets").getElementsByTagName("a");
      for (var i = 0; i < sheets.length; i++) {
        var sheetEl = sheets[i];
        if ((index == -1 && sheetEl.innerHTML == sheetName) || (i == index)) {
          Sheet.selectedSheetIndex = i;
          Sheet.lastLine = cscc.getCursorInfo(true);
          // focus the IDE window first, this fixes the selection issue in Chrome
          if (!Utils.IE) sheetEl.ownerDocument.window.focus();
          sheetEl.focus();
        }
      }
    },
    // selects the next sheetname from the pulldownmenu, or the current one if it isn't open yet
    highlightNextSheet: function () {
      if (!Sheet.sheetsVisible) {
        Sheet.toggleSheets();
        Sheet.highlightSheet(-1);
        return;
      }
      var sheets = document.getElementById("otherSheets").getElementsByTagName("a");
      var index = Sheet.selectedSheetIndex + 1;
      if (index >= sheets.length) index = 0;
      Sheet.highlightSheet(index);
    },
    // selects the previous sheetname from the pulldownmenu, or the current one if it isn't open yet
    highlightPrevSheet: function () {
      if (!Sheet.sheetsVisible) {
        Sheet.toggleSheets();
        Sheet.highlightSheet(-1);
        return;
      }
      var sheets = document.getElementById("otherSheets").getElementsByTagName("a");
      var index = Sheet.selectedSheetIndex - 1;
      if (index == -1) index = sheets.length - 1;
      Sheet.highlightSheet(index);
    },
    highlightBelowSheet: function () {
      if (Sheet.selectedSheetIndex == -1)
        return;
      var sheets = document.getElementById("otherSheets").getElementsByTagName("a");
      var sheet = sheets[Sheet.selectedSheetIndex];
      if (!sheet) return;
      var left = sheet.getLeft();
      while (true) {
        Sheet.selectedSheetIndex++;
        if (Sheet.selectedSheetIndex >= sheets.length)
          Sheet.selectedSheetIndex = 0;
        sheet = sheets[Sheet.selectedSheetIndex];
        if (sheet && sheet.getLeft() == left) {
          Sheet.highlightSheet(Sheet.selectedSheetIndex);
          break;
        }
      }
    },
    highlightAboveSheet: function () {
      if (Sheet.selectedSheetIndex == -1)
        return;
      var sheets = document.getElementById("otherSheets").getElementsByTagName("a");
      var sheet = sheets[Sheet.selectedSheetIndex];
      if (!sheet) return;
      var left = $(sheet).getLeft();
      while (true) {
        Sheet.selectedSheetIndex--;
        if (Sheet.selectedSheetIndex < 0)
          Sheet.selectedSheetIndex = sheets.length;
        sheet = sheets[Sheet.selectedSheetIndex];
        if (sheet && $(sheet).getLeft() == left) {
          Sheet.highlightSheet(Sheet.selectedSheetIndex);
          break;
        }
      }
    },
    highlightSheetByCharacter: function (chr) {
      if (Sheet.selectedSheetIndex == -1)
        return;
      var sheets = document.getElementById("otherSheets").getElementsByTagName("a");
      var selectedSheet = sheets[Sheet.selectedSheetIndex];
      if (!selectedSheet) return;
      while (true) {
        Sheet.selectedSheetIndex++;
        if (Sheet.selectedSheetIndex >= sheets.length)
          Sheet.selectedSheetIndex = 0;
        sheet = sheets[Sheet.selectedSheetIndex];
        if (sheet.innerHTML == selectedSheet.innerHTML || sheet.innerHTML.toLowerCase().substr(0, 1) == chr.toLowerCase()) {
          Sheet.highlightSheet(Sheet.selectedSheetIndex);
          break;
        }
      }
    },
    create: function () {
      window.document.location.href = "/workon/" + webAddress + "/new";
    },
    message: function (text, error, ms) {
      clearTimeout(Sheet.msgtoh);
      var el = document.getElementById("notice");
      if (!ms) ms = 2500;
      el.className = "notice " + (error ? "error" : "success");
      el.innerHTML = text;
      el.style.marginLeft = -(el.offsetWidth / 2) + "px";
      $(el).fade("in");
      Sheet.msgtoh = setTimeout(function () { $(el).fade("out"); }, ms);
    },
    openSheet: function (url, evt, name) {
      if (name == sheetName)
        return Sheet.hideSheets();
      url = url.replace(/#.*/gi, "") + "#" + Sheet.mode;
      if (Sheet.maximized)
        url += ",max";
      if (!evt.ctrlKey)
        document.location.href = url;
      else
        window.open(url);
    },
    // when clicked on the upload button, schedule to reload known media files
    clickUploadFiles: function (url) {
      Sheet.reloadMediaOnFocus = true;
      Utils.track('/editor/action/upload');
    },
    // when the window or editor receives focus again, see if we need to refresh media files
    focus: function () {
      if (Sheet.reloadMediaOnFocus)
        csccSense.refreshMedia();
      Sheet.reloadMediaOnFocus = false;
    }
  }
})();

var ServerError = new Error("The server returned an error.");
var framed = window.parent.location.href == location.href;

var showShortcuts = function (evt) {
  Utils.cancelEvent(evt);
  var el = document.getElementById('keyboardShortcuts');
  el.className = 'show';
}
var hideShortcuts = function () {
  var el = document.getElementById('keyboardShortcuts');
  el.className = '';
}

var shortcutsAreVisible = function () {
  var el = document.getElementById('keyboardShortcuts');
  return el && el.className == 'show';
}

<!DOCTYPE html>
<html>
<head>
  <title>Guide-1-Step-1 - Getting started with Handcraft</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="shortcut icon" type="image/png" href="http://handcraft.it/Images/favicon-sheet.png">
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
  <script src="http://handcraft.it/Js/mootools-1.2.5.1-more.js"></script>
  <script src="http://handcraft.it/Js/head.min.js"></script>
  <script>
    window.hostName = "http://gettingstarted77102.handcraft.com";
    window.webAddress = "gettingstarted77102";
    window.sheetName = "Guide-1-Step-1";
    head.js(
      "http://handcraft.it/Js/form42.js",
      "http://handcraft.it/Js/utils.js",
      "http://handcraft.it/Js/keystrokes.js",
      //"http://handcraft.it/Js/sheet.js",
      "http://handcraft.it/Js/scatter.js",
      "http://handcraft.it/Js/help.js",
      "http://handcraft.it/Js/search.js",
      "http://handcraft.it/Js/zen_codemirror.js",
      "http://handcraft.it/Codemirror/codemirror.js",
      "http://handcraft.it/Js/cscc.js",
      "http://handcraft.it/Js/cscc-parse-css.js",
      "http://handcraft.it/Js/cscc-parse-xml.js",
      "http://handcraft.it/Js/cscc-sense.js",
      "http://handcraft.it/Js/placeholder.js",
      "http://handcraft.it/Js/html5.js"
    );
    head.ready(function() {
      Sheet.earlyMaximize();
      Sheet.clientPassword = "";
      Sheet.init();
      Sheet.pageLoaded("true", "false");
    });
  </script>
</head><body class="loading sheet">
  
  <div id="nav">
    <nav>
      <div id="user">
        <a href="/settings">Joon</a>·
        <a href="/signout">Sign out</a>
        <a href="http://support.handcraft.com" target="_blank" id="help-link">Help</a>
      </div>
      <p id="breadcrumb">
        <a href="/prototypes">Prototypes</a>
        <span class="separator">→</span>
        <a href="/prototypes/gettingstarted77102">Getting started with Handcraft</a>
        <span class="separator">→</span>
        <a href="#" onclick="Sheet.clickSheets(event); Utils.track('/editor/control/sheets/dropdown');">Guide-1-Step-1</a>
      </p>
    </nav>
  </div>
  <div id="notice" class="notice error" style="visibility:hidden"></div>
  <article>
    <table cellpadding="0" cellspacing="0" border="0" id="workspace">
      <tbody>
        <tr>
          <td id="editor">
            <section class="sheet">
              <header>
                <div id="sheetHeader">
                  <div id="sheetName">
                    <form id="renameForm" class="form42-validate form42-prevent-submit" onsubmit="return false;">
                      <a href="#" onclick="Sheet.clickSheets(event); Utils.track('/editor/control/sheets/dropdown');" class="dropdown" title="You have only one sheet so far. View it (Ctrl+Shift+Down)"> </a>
                      <input type="text" class="form42-required form42-alnumhyphen form42-maxlength-16" id="renameSheet" value="Guide-1-Step-1" title="Click to rename this sheet" onkeydown="if (event.keyCode==13) this.blur(); if (event.keyCode==27) {this.value=sheetName;}" onblur="Sheet.rename(this, this.value)">
                    </form>
                  </div>
                  <div id="otherSheets" class="hidden">
                    <h2>Your sheet</h2>
                    <ol><li><a href="/workon/gettingstarted77102/sheets/Guide-1-Step-1" onclick="Sheet.openSheet(this.href, event, 'Guide-1-Step-1'); Utils.track('/editor/control/sheets/selectitem'); return false;">Guide-1-Step-1</a></li></ol>
                    <p class="tip"><strong>Tip</strong>Work in tabs! Hold Ctrl while opening a sheet (by mouse or enter) to launch it in a new browser tab.</p>
                  </div>
                  <input id="search" type="text" name="q" placeholder="Type to search in your sheets..." title="Type to search in your sheets... (Ctrl+Shift+F)" autocomplete="off" onfocus="Utils.track('/editor/search/focus')" onblur="Search.blur(this)" onkeyup="Search.keyUp(event, this)" onkeydown="Search.keyDown(event, this)">
                  <div id="focusActions">
                    <a id="modecode" href="#writingCode" class="selected" onclick="return Sheet.toggleEditorMode(this, 'xmlcolors');">Code</a>
                    <a id="modewriting" href="#writingMode" onclick="return Sheet.toggleEditorMode(this, 'writing');">Writing</a>
                  </div>
                  <a href="#" onclick="Utils.track('/editor/control/resize/' + (Sheet.maximized ? 'restore' : 'maximize')); Sheet.maximize(); return false" class="maximize" title="Maximize (Ctrl+Enter)">Toggle maximize/restored editor</a>
                </div>
                <div id="searchResults" style="display:none"></div>
              </header>
              <form id="form" method="post" action="/workon/gettingstarted77102/action?type=save">
                <input type="hidden" name="sheetName" value="Guide-1-Step-1">
                <textarea id="code" name="code">To get started quickly, Handcraft includes a whole set of script libraries, icons and more.
In this step we'll show you how easy it is to enable jQuery.

First, hit the view button (yes, now) to see that jQuery isn't enabled yet.

Okay, now click on the "Javascript libraries" link on the right.

The first category shown there is script libraries, and jQuery is already selected.
The code to include it is right below the selectbox. Copy the jQuery script and paste
in the page below, right where we've put a placeholder comment.

<page url="/getting-started/step6">
  <html>
    <head>
      <link rel="stylesheet" href="/getting-started/step6/style.css"/>                  
      
      
      
      <script>
        $(function() {          
          $('#no').addClass('hidden');
          $('#yes').removeClass('hidden');          
        });
      </script>
    </head>
    <body>
      <h1>Is jQuery enabled?</h1>      
      <p id="no">No it isn't.</p>
      <p id="yes" class="hidden">Yes it is.</p>
    </body>
  </html>
</page>

This is the css page.

<page url="/getting-started/step6/style.css" type="css">
  .hidden {
    display: none;
  }
</page>

Save View Delete

Guides4%completed

Getting Started1/7

Step 1 - Hello world
Create your first page.

Next step »
Step 2 - HTML and CSS
Step 3 - Javascript
Step 4 - Images
Step 5 - Image scaling
Step 6 - jQuery and more
Step 7 - ???

Beyond HTML0/8

Step 1 - Reusing HTML
Step 2 - Parts & content
Step 3 - Forms
Step 4 - Variables
Step 5 - Lorem ipsum?
Step 6 - Building a blog
Step 7 - Page templates
Step 8 - A log in roundtrip

Sharing and Exporting0/3

Tag Reference 0/10

Basics

CtrL+S: Save changes
Ctrl+Shift+V: View the current page in a new browser tab
Ctrl+Shift+Down: Open the sheets dropdown
Esc: Close anything, like search results

When the sheets dropdown is open

Directional keys: Navigate between sheets
Enter: Open selected sheet
Ctrl+Enter: Open selected sheet in a new browser tab
A-Z: Select a sheet starting with this character

More basics

Ctrl+Enter: Toggle maximized editor
Ctrl+Shift+E: Re-indent everything
Ctrl+Shift+Y: Toggle word wrap
Ctrl+Shift+F: Search
Ctrl+Shift+M: Toggle focus on writing

Zen Coding

Tab or Ctrl+E: Expand Zen Coding abbreviation, such as ul>li*3

Selecting stuff

Ctrl+A: Select all
Ctrl+L: Select line
Ctrl+D: Select tag contents outwards
Ctrl+Shift+D: Select tag contents inwards
Ctrl+Shift+A: Surround selection with tag or expression
Ctrl+K: Remove tag
Ctrl+/: Toggle comments around selection

Playing with numbers

Ctrl+up: Increment number by 1
Ctrl+down: Decrement number by 1
Alt+up: Increment number by 0.1
Alt+down: Decrement number by 0.1
Ctrl+Alt+up: Increment number by 10
Ctrl+Alt+down: Decrement number by 10
Ctrl+Y: Evaluate math expression

Some of these shortcuts are part of the Zen Coding project.

a img {
  border: none;
}
/* HTML 5 elements */
 nav, section, article, header, aside, hgroup {
  display: block;
}
a {
  color: #960;
  -webkit-transition: linear .1s;
  -moz-transition: linear .1s;
  -o-transition: linear .1s;
  transition: linear .1s;
}
a:hover {
  color: #c90;
}
a:active {
  color: #630;
}
a.bad {
  color: #c66;
}
body {
  font: 14px Arial, Helvetica, sans-serif;
  color: #420;
  margin: 0;
  background: #cbd6dc url(http://handcraft.it/Images/bg-quplo-gray.png) center top no-repeat;
}
body.confetti {
  background: url(http://handcraft.it/Images/bg-confetti2.png) 0 0 repeat-x, url(http://handcraft.it/Images/bg-quplo-gray.png) center top no-repeat;
}
body.confetti header {
  width: auto !important;
}
body.confetti h1 {
  font-size: 42px;
}
body > footer {
  padding: 10px 0 0 5px;
  margin: 0 0 100px 0;
  clear: both;
}
.minimal > footer {
  position: absolute;
  bottom: 10px;
  right: 10px;
  margin: 0;
}
#footer {
  width: 960px;
  margin: 0 auto;
  color: #999;
  font: 9px Verdana, Arial, Helvetica, sans-serif;
}
.minimal #footer {
  width: 315px;
}
#footer img {
  width: 50px;
  vertical-align: bottom;
  opacity: .5;
}
#footer a {
  color: #888;
}
span.flow {
  font: bold italic 18px"Times New Roman", Times, serif;
}
#nav {
  background: rgba(255, 255, 255, .4);
  padding-top: 7px;
  margin: 0 0 30px 0;
}
#nav.messagesOnly {
  background: none;
  height: 30px;
}
.lt-ie9 #nav {
  background: #D7DEE2;
}
nav {
  width: 960px;
  height: 33px;
  margin: 0 auto;
  position: relative;
}
#areas {
  position: absolute;
  bottom: 1px;
  left: 0;
}
ul.tabs {
  list-style: none;
  margin: 0 0 2px 0;
  padding: 0;
}
ul.tabs li {
  float: left;
  position: relative;
  margin: 0 0 0 2px;
}
ul.tabs li a:first-child {
  background-color: rgba(255, 255, 255, .4);
  padding: 3px 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  border: solid 1px rgba(255, 255, 255, 0);
  border-radius: 3px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  -moz-border-radius: 3px;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-bottomright: 0;
  color: #960;
}
ul.tabs li a:first-child:hover {
  color: #000;
  background-color: #fff;
}
ul.tabs li.selected a:first-child {
  color: #000;
  background-color: #cbd5dc;
  border: solid 1px #abbac6;
  border-bottom: none;
  padding-top: 5px;
  padding-bottom: 4px;
}
#getting-started-tab a:first-child {
  padding-right: 25px;
}
#getting-started-tab a.close {
  position: absolute;
  top: 0;
  right: 8px;
  text-decoration: none;
  color: #c00;
  font-weight: bold;
  font-size: 16px;
}
#user {
  position: absolute;
  bottom: 8px;
  right: 0;
  font: bold 12px Arial, Helvetica, sans-serif;
  color: #666;
}
#user #new {
  color: #f20;
}
#user a {
  color: #666;
  text-decoration: none;
  border-bottom: solid 1px #bbb;
}
#user a:hover {
  border-bottom-color: #666;
}
#user-link {
  padding-left: 20px;
}
#user-link img {
  vertical-align: text-bottom;
  margin: 0 5px 0 0;
  border-radius: 2px;
}
#user #help-link {
  color: white;
  background-color: #36d;
  background: #36d -webkit-gradient(linear, left top, left bottom, from(#36d), to(#39f));
  border-radius: 2px;
  border: solid 1px #36d;
  padding: 2px 4px;
  text-decoration: none;
}
#user #help-link:hover {
  color: #9cf;
  background-color: #39f;
  background-image: none;
}
#user #help-link:active {
  background: #36d -webkit-gradient(linear, left top, left bottom, from(#39f), to(#36d));
  border-color: #333;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
  -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
  text-shadow: 0 -1px 1px rgba(100, 100, 200, .4);
}
div.glass {
  background: rgba(255, 255, 255, .9);
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  right: -20px;
  z-index: 9999;
  text-align: center;
  padding: 60px 20px 0 0;
  font-weight: bold;
}
div.locked-feature {
  border: solid 2px #c66;
  margin: 20px 0 0 0;
  padding: 20px;
  background-color: #f6f6f6;
}
div.locked-feature-message {
  font-size: 12px;
  text-align: center;
  background-color: #daa;
  padding: 10px;
  margin: 20px -20px -20px -20px;
}
div.locked-feature h2 {
  color: #bbb;
  border: none !important;
  margin-top: 0 !important;
}
div.notice {
  width: 950px;
  margin: 0 auto;
  padding: 3px 5px;
  background-color: #ffc;
  color: #000;
  font-weight: bold;
  color: #663;
  line-height: 20px;
  border: solid 1px #cc9;
  border-radius: 2px;
  -moz-border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
div.notice.success {
  background-color: #cfc;
  border-color: #9c9;
  color: #363;
}
div.notice.error {
  background-color: #fcc;
  border-color: #c99;
  color: #633;
}
.sheet div.notice {
  width: auto;
}
#errorMessage {
  padding: 10px;
  font-family: Consolas, Monospace;
  font-size: 12px;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, .4);
  margin: 20px 0;
  border: solid 1px #c99;
  background-color: #fee;
}
article {
  display: block;
  width: 960px;
  margin: 0 auto;
}
article header {
  position: relative;
}
p.back {
  position: absolute;
  top: 10px;
  right: 320px;
}
section {
  width: 600px;
  padding: 20px;
  border-radius: .4em;
  border-top-left-radius: 0;
  -moz-border-radius: .4em;
  -moz-border-radius-topleft: 0;
  -webkit-box-shadow: 0 4px 4px #b2bfc8;
  -moz-box-shadow: 0 4px 4px #b2bfc8;
  -o-box-shadow: 0 4px 4px #b2bfc8;
  box-shadow: 0 4px 4px #b2bfc8;
  background-color: White;
}
section > h2:first-child {
  margin-top: 0;
}
body.wide section {
  width: 920px;
}
body.centered header, body.centered section {
  margin: 0 auto;
}
body.centered header {
  width: 640px;
}
body.centered div.notice {
  width: 630px;
}
aside {
  float: right;
  width: 280px;
  font-size: 14px;
}
aside p {
  color: #000;
}
aside ul.actions {
  list-style: none;
  margin: 0;
  padding: 0;
}
aside ul.actions li {
  margin-bottom: 5px;
}
aside ul.actions li a.button {
  line-height: 3em;
}
aside ul.actions li a.selected {
  font-weight: bold;
  color: Black;
  cursor: default;
  text-decoration: none;
}
aside h2 {
  font-size: 16px;
  font-weight: bold;
}
aside h2:first-child {
  margin-top: 0;
}
aside a {
  color: #36d;
  -webkit-transition: linear .1s color;
}
aside a:hover {
  color: #39f;
}
aside form input[type='text'], aside form input[type='submit'] {
  font-size: 12px;
  width: inherit;
}
aside form input[type='text'] {
  padding: 3px;
  margin: 0;
}
aside form input[type='submit'] {
  border-width: 1px;
  padding-top: 3px;
  padding-bottom: 3px;
  border-color: #ccc;
}
a.button {
  padding: 4px 10px;
  color: White;
  background-color: #439a3f;
  background: green -webkit-gradient(linear, left top, left bottom, from(#439a3f), to(#166e14));
  border: solid 1px green;
  border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 1);
  -o-box-shadow: 0 1px 1px rgba(0, 0, 0, 1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 1);
  font-weight: bold;
  text-shadow: 0 1px 1px #363;
  text-decoration: none;
}
a.button:hover, a.button.hover {
  color: #d1ff00;
  background: green -webkit-gradient(linear, left top, left bottom, from(#5ab056), to(#278a25));
}
a.button:active {
  background: green -webkit-gradient(linear, left bottom, left top, from(#439a3f), to(#166e14));
}
a.button.small {
  background-image: none;
  background-color: #eee;
  background: #eee -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.4, #eee), to(#ccc));
  border-color: #ccc;
  color: #444;
  text-shadow: 0 1px 0 #fff;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .7);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .7);
  -o-box-shadow: 0 1px 1px rgba(0, 0, 0, .7);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .7);
  padding: 2px 7px;
}
a.button.small:hover {
  color: #000;
}
a.button.small:active {
  background: #eee -webkit-gradient(linear, left bottom, left top, from(#eee), color-stop(0.4, #eee), to(#ccc));
}
a.button.large {
  font-size: 18px;
}
a.button em {
  font-style: normal;
  text-decoration: underline;
}
aside a.button.bad {
  background-color: #c66;
  background-image: none;
  background: #c66 -webkit-gradient(linear, left top, left bottom, from(#c66), color-stop(0.4, #c55), to(#933));
  border-color: #933;
}
aside a.button.bad:hover {
  color: #fcc;
  background-color: #a44;
  background: #a44 -webkit-gradient(linear, left top, left bottom, from(#a44), color-stop(0.4, #a33), to(#711));
}
aside a.button.bad:active {
  background: #c66 -webkit-gradient(linear, left bottom, left top, from(#c66), color-stop(0.4, #c55), to(#933));
}
aside li.bad {
  margin-top: 20px;
}
aside li.bad a {
  color: #c66;
  font-size: 12px;
}
aside li.bad a:hover {
  color: #933;
}
aside li.bad a:active {
  color: #300;
}
span.weak {
  color: #777;
  font-size: 12px;
}
h1, h2 {
  font: bold 24px Kreon, Arial, Helvetica, sans-serif;
  color: #000;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
h1 {
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(92, 92, 92, .4)), to(rgba(0, 0, 0, 1)));
}
h2 {
  font: bold 20px Arial, Helvetica, sans-serif;
  text-shadow: none;
  margin: 30px 0 10px 0;
}
section h2:not(:first-child) {
  clear: left;
  margin: 30px -20px 0 -20px;
  padding: 20px;
  border-top: solid 2px #eee;
}
h3 {
  color: #630;
}
form {
  margin: 0;
}
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
legend {
  margin: 0;
  padding: 0 0 10px 0;
  font-weight: bold;
}
form p.inline {
  margin: 0;
}
form p.inline label {
  display: inline-block;
  width: 170px;
}
p {
  line-height: 1.4em;
  color: #630;
  margin: 0 0 1em 0;
}
p.weak {
  color: #777;
  font-size: 12px;
}
p.note {
  color: #444;
  font-weight: bold;
  padding-left: 10px;
  border-left: solid 4px #fc0;
}
thead th {
  text-align: left;
  padding-right: 2em;
}
tbody th {
  text-align: left;
  padding-right: 2em;
  color: #630;
}
tr.submit td {
  padding-top: 2em;
}
input {
  font-size: 16px;
  padding: .2em;
}
input[type='checkbox'] {
  margin: 0 4px 2px 0;
  vertical-align: text-bottom;
}
input[type='text'], input[type='password'], input[type='email'] {
  border: inset 1px #ccc;
  border-radius: 4px;
  -moz-border-radius: 4px;
  width: 250px;
  -webkit-transition: linear color, background-color, border .4s;
  -moz-transition: linear color, background-color, border .4s;
  -o-transition: linear color, background-color, border .4s;
  transition: linear color, background-color, border .4s;
}
-webkit-transition: linear color, background-color, border .4s;
 input[type='text']:hover, input[type='password']:hover, input[type='email']:hover {
  border-color: #c90;
  box-shadow: inset 0 0 5px rgba(50, 50, 150, .3);
}
input[type='text']:focus, input[type='password']:focus, input[type='email']:focus {
  border-color: #c90;
  box-shadow: inset 0 0 5px rgba(50, 50, 150, .3);
}
input.password {
  width: 150px;
}
input[type='submit'], input[type='button'] {
  border: outset 2px #c96;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px #fc9;
  -moz-box-shadow: 0 1px 1px #fc9;
  -o-box-shadow: 0 1px 1px #fc9;
  box-shadow: 0 1px 1px #fc9;
  color: #630;
  background-color: #ffe;
  padding: 2px 1em;
  margin: 0;
  cursor: pointer;
  -webkit-transition: linear .1s;
  -moz-transition: linear .1s;
  -o-transition: linear .1s;
  transition: linear .1s;
}
input[type='submit']:hover, input[type='button']:hover {
  color: black;
  -webkit-box-shadow: 0 1px 5px #c90;
  -moz-box-shadow: 0 1px 5px #c90;
  -o-box-shadow: 0 1px 5px #c90;
  box-shadow: 0 1px 5px #c90;
}
input[type='file'] {
  padding: 0;
  margin: 0;
  cursor: pointer;
}
input.invalid {
  border: outset 1px red;
  -webkit-box-shadow: 0 0 5px #f99;
  -moz-box-shadow: 0 0 5px #f99;
  -o-box-shadow: 0 0 5px #f99;
  box-shadow: 0 0 5px #f99;
  background-color: #fee;
  color: #c00;
}
input.valid {
  border: outset 1px green;
  -webkit-box-shadow: 0 0 5px #696;
  -moz-box-shadow: 0 0 5px #696;
  -o-box-shadow: 0 0 5px #696;
  box-shadow: 0 0 5px #696;
  background-color: #efe;
  color: green;
}
input[disabled] {
  color: #bbb;
  text-shadow: 0 -1px #999;
  background-color: #eee;
  border-color: #ccc;
  border-style: solid;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
}
select {
  border: inset 1px #ccc;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  box-shadow: 0 1px 1px #fc9;
  color: #960;
  -webkit-transition: linear .4s;
  -moz-transition: linear .4s;
  -o-transition: linear .4s;
  transition: linear .4s;
  font-size: 16px;
  padding: 2px 2px 2px 4px;
}
p.submit {
  clear: both;
  border-top: solid 2px #eee;
  margin: 50px -20px 0 -20px;
  padding: 10px 20px;
}
.signin-with {
  display: block;
  color: #666;
  background-position: 0 0;
  background-repeat: no-repeat;
  text-indent: -9000px;
  overflow: hidden;
  -webkit-transition: none;
  text-align: left;
}
.signin-with.google {
  background-image: url(http://handcraft.it/Images/google_signin.png);
  width: 150px;
  height: 24px;
}
.signin-with.google:hover {
  background-position: 0 -24px;
}
.signin-with.google:active {
  background-position: 0 -48px;
}
#prototypes {
  list-style: none;
  margin: 1em 0 0 0;
  padding: 0;
}
#prototypes li {
  float: left;
  margin: 0 30px 30px 0;
  text-align: center;
}
#prototypes li a:hover span {
  background: rgba(255, 255, 255, 1);
}
div.list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
div.list ul li {
  position: relative;
  float: left;
  width: 550px;
  margin: 0 0 20px 0;
}
div.list ul li h3 {
  margin: 0;
}
div.list + h2 {
  clear: left;
  padding-top: 30px;
}
div.list ul li h3 + p {
  color: #777;
}
p.access {
  position: absolute;
  bottom: 10px;
  line-height: 1.2em;
  margin: 0;
  font: 11px Verdana, Arial, Helvetica, sans-serif;
}
#archived li {
  width: 300px;
}
div.list.selectable-items li {
  float: none;
  width: auto;
}
div.list.selectable-items li:last-child {
  border: none;
}
div.list.selectable-items li p {
  margin: 0 0 0 24px;
}
div.list.selectable-items li input[type="radio"] {
  margin: 0 10px 0 0;
}
div.list.selectable-items li label {
  cursor: pointer;
}
div.list.selectable-items li p.control {
  margin-top: 8px;
}
div.details {
  float: left;
  padding-top: 10px;
}
div.details p.weak {
  font: 11px Verdana, Arial, Helvetica, Sans-Serif;
}
div.details .textArea {
  width: 400px;
  height: 34px;
}
div.visual {
  float: left;
  margin: 0 20px 0 0;
}
div.visual .image {
  position: relative;
  display: block;
  width: 150px;
  height: 150px;
  white-space: nowrap;
  vertical-align: middle;
  text-indent: -9000px;
  overflow: hidden;
  border: solid 1px #ccc;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
  -o-box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
}
#archived .image {
  width: 75px;
  height: 75px;
  background-size: 75px;
}
#archived .details {
  width: 180px;
}
div.visual-small .image {
  width: 50px;
  height: 50px;
}
div.visual p.change-visual {
  position: relative;
  text-align: center;
  margin: 10px 0 0 3px;
  padding:0 5px 5px 0;
  overflow:hidden;
}
div.visual p.change-visual a {
  font: bold 11px Arial, Helvetica, sans-serif;
}
div.visual #visual-upload {
  position: absolute;
  opacity: 0;
  left: 25px;
  width: 100px;
}
div.people li a.image {
  width: 100px;
  height: 100px;
}
div.people li div.details, #archived li div.details {
  padding-top: 0;
}
body.minimal #nav {
  padding: 0;
}
body.minimal nav {
  width: auto;
}
body.minimal #user {
  right: 7px;
}
body.minimal #areas {
  display: none;
}
body.minimal header {
  margin: 70px auto 0 auto;
  width: 260px;
  text-align: center;
}
body.minimal label.odd {
  position: absolute;
  margin-left: 100px;
}
body.minimal section {
  margin: 0 auto;
  width: 260px;
}
body.minimal div.notice {
  width: 280px;
  padding: 5px;
}
body.minimal #remember {
  margin: 0 5px 0 0;
}
body.minimal p.submit {
  text-align: center;
}
body.minimal p.footer {
  width: 290px;
  margin: 10px auto 0 auto;
  font-size: 12px;
  text-align: right;
}
body.minimal p.footer a {
  color: #777;
  text-decoration: none;
}
body.minimal p.footer a:hover {
  text-decoration: underline;
}
body.minimal p.footer a:first-child {
  float: left;
}
body.minimal #access-prototype {
  margin: 200px auto 0 auto;
  width: 650px;
}
body.minimal.closeAccount section {
  width: 340px;
}
body.minimal #closeAccountList {
  max-height: 205px;
  overflow: auto;
  border: solid 2px #ccc;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
  -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
  -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
}
body.minimal #closeAccountList li {
  width: auto;
  float: none;
  border-top: solid 1px #eee;
  padding: 5px;
  margin: 0;
  font-size: 12px;
}
body.minimal #closeAccountList a.button {
  float: right;
  font-size: 11px;
  padding: 0 5px;
  line-height: 13px;
}
table.invite-person {
  width: 100%;
  border-collapse: collapse;
}
table.invite-person col {
  width: 140px;
}
table.invite-person thead th {
  padding: 10px 0 0 0;
  color: #000;
  vertical-align: bottom;
  text-align: center;
}
table.invite-person thead th:first-child {
  text-align: left;
}
table.invite-person tbody th {
  padding: 10px 10px 10px 0;
  font-size: 12px;
  white-space: nowrap;
}
table.invite-person tbody th small {
  font-size: 11px;
  font-weight: normal;
  color: #999;
}
table.invite-person td {
  text-align: center;
}
table.invite-person td input[type="radio"] {
  margin: 0;
  padding: 0;
}
#notice {
  position: absolute;
  top: 45px;
  left: 50%;
  margin-left: -300px;
  z-index: 999;
  opacity: 0;
}
.textArea {
  font: 14px Arial, Helvetica, sans-serif;
  width: 585px;
  height: 240px;
  padding: 5px;
  border: inset 1px #ccc;
  border-radius: 4px;
  -moz-border-radius: 4px;
  box-shadow: 0 1px 1px #fc9;
  -webkit-transition: linear .4s;
  -moz-transition: linear .4s;
  -o-transition: linear .4s;
  transition: linear .4s;
}
body.minimal .textArea {
  width: 245px;
  height: 80px;
}
#TemplateDescription {
  height: 34px;
}
.form42-invalid {
  background-color: #fcc;
  color: #c00;
  -webkit-transition: linear .1s;
  -moz-transition: linear .1s;
  -o-transition: linear .1s;
  transition: linear .1s;
}
.form42-valid {
  background-color: #cfc;
  color: Green;
  -webkit-transition: linear .1s;
  -moz-transition: linear .1s;
  -o-transition: linear .1s;
  transition: linear .1s;
}
.pretty-upload {
  position: relative;
  margin: 10px 0 0 3px;
  padding: 0 5px 5px 0;
  overflow: hidden;
}
.pretty-upload a {
  font: bold 11px Arial, Helvetica, sans-serif;
}
.pretty-upload #pretty-uploader {
  position: absolute;
  opacity: 0;
  left: 25px;
  width: 100px;
}
.invalidNote {
  position: absolute;
  right: -200px;
  top: 0;
  padding: 5px;
  background-color: #fee;
  border: outset 2px red;
  -webkit-box-shadow: 0 0 10px 4px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 0 10px 4px rgba(0, 0, 0, .2);
  -o-box-shadow: 0 0 10px 4px rgba(0, 0, 0, .2);
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, .2);
  width: 200px;
}
#signupForm div.field {
  position: relative;
}
/* Create a new prototype */
 #prototypeOptions #templateForm {
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  height: 0px;
  overflow: hidden;
  opacity: 0;
  margin-top: 40px;
}
#prototypeOptions.showTemplateOptions #templateForm {
  height: 350px;
  opacity: 1;
}
#templateForm .details {
  padding: 0 0 0 10px;
}
#templateForm input[type="radio"] {
  position: absolute;
  margin: 3px 0 0 -18px;
}
#templateForm p {
  width: 450px;
}
#toggleBar {
  position: relative;
  height: 1px;
}
#toggleBar #bar {
  position: absolute;
  border: solid 1px #eee;
  top: 8px;
  left: 0;
  width: 100%;
}
#templateToggleButton {
  display: block;
  position: absolute;
  text-align: center;
  width: 100%;
  font-size: 12px;
  color: #999;
}
#templateToggleButton span {
  padding: 0 10px 0 25px;
  background: #fff url(http://handcraft.it/Images/icon-arrow-right-small.png) 13px 4px no-repeat;
}
#templateToggleButton:hover span {
  background-image: url(http://handcraft.it/Images/icon-arrow-right-small-hover.png);
}
#prototypeOptions.showTemplateOptions #templateToggleButton span {
  background: #fff url(http://handcraft.it/Images/icon-arrow-down-small.png) 10px 6px no-repeat;
}
#prototypeOptions.showTemplateOptions #templateToggleButton span {
  background-image: url(http://handcraft.it/Images/icon-arrow-down-small-hover.png);
}
.validation-msg {
  position: absolute;
  padding: 3px 10px;
  margin: -38px 0 0 -10px;
  font-size: 12px;
  background-color: #fcc;
  border: solid 2px #c99;
  color: #633;
  opacity: 0;
  visibility: hidden;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
  -o-box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
}
.validation-msg.visible {
  visibility: visible;
  opacity: 1;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.validation-msg:before {
  content:"";
  display: block;
  position: absolute;
  bottom: -12px;
  left: 18px;
  width: 0;
  height: 0;
  border-width: 12px 12px 0;
  border-style: solid;
  border-color: #c99 transparent;
}
.validation-msg:after {
  content:"";
  display: block;
  position: absolute;
  bottom: -10px;
  left: 20px;
  width: 0;
  height: 0;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #fcc transparent;
}
.beta-hidden {
  display: none;
}
#upgradeNotification {
  margin-top: 20px;
  text-align: center;
  padding: 10px;
  border: solid 1px #ccc;
  background-color: White;
}
#upgradeNotification a {
  line-height: 18px;
  font-size: 11px;
  text-decoration: none;
}
#upgradeNotification:hover strong {
  text-decoration: underline;
}
#activateSubscription {
  background-color: White;
  padding: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: 0 1px 10px rgba(255, 0, 255, .4);
  -moz-box-shadow: 0 1px 10px rgba(255, 0, 255, .4);
  border: solid 2px #fc00cf;
}
#activateSubscription h2 {
  text-align: center;
  border-bottom: solid 1px #ccc;
  padding: 5px;
  margin: -5px -10px 10px -10px;
}
#activateSubscription p, #activateSubscription ul.actions li {
  text-align: center;
}
.sheet #activateSubscription {
  margin-top: 20px;
}
.sheet #activateSubscription h2 {
  font-size: 14px;
}
.sheet #activateSubscription p {
  font-size: 11px;
}
#giftNotification {
  margin-top: 20px;
  text-align: center;
  padding: 10px;
  background-color: #368AEC;
  color: #fff;
  line-height: 15px;
  font-size: 11px;
  text-decoration: none;
  box-shadow: 0 0 4px rgba(0, 0, 0, .3);
  font-family: Verdana;
}
#giftNotification p {
  color: #fff;
}
#giftNotification a {
  line-height: 18px;
  font-size: 11px;
  text-decoration: none;
}
.gift-hidden {
  opacity: 0;
}
.gift-visible {
  opacity: 1;
  -webkit-transition: all .5s ease-in;
}
body.unlock #prototypeOptions.showTemplateOptions #templateForm {
  height: 270px;
  opacity: 1;
  margin-top: 10px;
}
body.unlock .textArea {
  height: 80px;
}
#keyboardShortcuts {
  opacity: 0;
  display: none;
}
#keyboardShortcuts.show {
  display: block;
  opacity: 1;
  position: fixed;
  top: 50px;
  right: 50px;
  left: 50px;
  bottom: 50px;
  background-color: rgba(0, 0, 0, .8);
  padding: 20px;
  color: #fff;
  border-radius: 20px;
  font-size: 12px;
  z-index: 999;
}
#keyboardShortcuts kbd {
  font-family: Consolas, "Courier New", Monospace;
  color: #ffd100;
  font-size: 12px;
}
#keyboardShortcuts h2 {
  color: #fff;
  clear: left;
  margin: 10px 0 0 130px;
  padding: 20px 0 0 0;
  font-size: 14px;
  color: #ffd100;
}
#keyboardShortcuts dl {
  margin: 0;
  padding: 0;
}
#keyboardShortcuts dt {
  clear: left;
  width: 120px;
  float: left;
  margin-top: 4px;
  text-align: right;
}
#keyboardShortcuts dd {
  float: left;
  margin: 4px 0 0 10px;
  padding: 0;
}
#keyboardShortcuts .column {
  width: 50%;
  float: left;
}
#keyboardShortcuts p {
  color: #fff;
}
#keyboardShortcuts .closeOverlay {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 14px;
  color: #ffd100;
}
#unlock-share-social {
  width: 50%;
  float: left;
}
body {
  background-color: #C6D0D6;
}
#code {
  display: none;
}
.CodeMirror-line-numbers {
  width: 2.2em;
  color: #999;
  text-align: right;
  padding-right: .7em;
  font-size: 12px;
  line-height: 16px;
  font-family: monospace;
  padding-top: .4em;
  background: url(http://handcraft.it/Images/bg-line-top-white.gif) 0 0 repeat-x, url(http://handcraft.it/Images/bg-line.png) 0 5px;
  border-right: solid 1px #c7d7e5;
}
#notice {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -300px;
  z-index: 999;
  opacity: 0;
}
/* The table surrounding the editor and the right column */
 #workspace {
  width: 100%;
}
#workspace td {
  vertical-align: top;
}
/* The table cell containing the sheet */
 #editor {
  padding-right: 20px;
  min-width: 600px;
}
#editor section {
  margin-bottom: 0;
}
/* The right hand cell containing links and syntax */
 #aside {
  width: 200px;
}
#create-sheet {
  margin: 0 0 20px 0;
}
#create-prototype {
  margin: 20px 0 0 0;
}
#guides {
  margin: 20px 0 0 0;
  -webkit-box-shadow: 0 3px 4px #B2BFC8;
  -moz-box-shadow: 0 3px 4px #B2BFC8;
  -o-box-shadow: 0 3px 4px #B2BFC8;
  box-shadow: 0 3px 4px #B2BFC8;
}
#guides h2 {
  margin: 0;
  padding: 8px;
  background-color: #fafabb;
  line-height: 14px;
  color: #333;
}
#guides h2 span.status {
  float: right;
  font-size: 12px;
  color: #975;
  margin-top: 1px;
}
#guides dl {
  margin: 0;
  padding: 0;
  background-color: #f6f6f6;
}
#guides dt {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: bold;
  background-color: #ffd;
  border-top: solid 1px #eec;
  padding: 4px 8px;
  cursor: pointer;
  -webkit-transition: linear .1s;
  -moz-transition: linear .1s;
  -o-transition: linear .1s;
  transition: linear .1s;
  height: 15px;
}
#guides dt:hover {
  background-color: #ffa;
}
#guides dt:hover span.fill {
  background-color: #ffa;
}
#guides dt span.title {
  position: absolute;
  top: 4px;
  left: 8px;
  width: 92%;
  z-index: 2;
}
#guides dt span.fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 23px;
  z-index: 1;
}
#guides dt .percentage {
  float: right;
}
#guides dd {
  margin: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: ease-out .3s;
  -moz-transition: ease-out .3s;
  -o-transition: ease-out .3s;
  transition: ease-out .3s;
  font: 11px Verdana, Arial, Helvetica, sans-serif;
}
#guides dd.hide {
  height: 0;
}
#guides .description {
  display: block;
  padding: 8px;
}
#guides dd.show {
  height: auto;
  opacity: 1;
}
#guides dd p {
  margin: 8px 0 0 0;
}
#guides dd ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#guides dd li {
  position: relative;
  padding: 4px 8px;
  color: #999;
  clear: both;
  border-top: solid 1px #ddd;
}
#guides dd li a {
  color: #06d;
}
#guides dd li.current {
  padding: 8px;
  background-color: #fff;
}
#guides dd li.current .step-name {
  font-weight: bold;
  color: #06d;
  text-decoration: none;
}
#guides dd li.current + li {
  border-top: solid 1px #eee;
}
#guides .guide-step.done {
  color: #999;
}
#guides .guide-step.done:hover {
  text-decoration: underline;
}
#guides p.next-step {
  margin: 12px 0 0 0;
  text-align: right;
}
#guides p.next-step a {
  background-color: #def;
  padding: 4px 8px;
  border-radius: 10px;
  text-decoration: none;
  font: 11px Verdana, Arial, Helvetica, sans-serif;
}
#guides p.next-step a:hover {
  text-decoration: underline;
}
.form42-invalid {
  background-color: #fcc !important;
}
#intellisense {
  margin-top: 12px;
  position: absolute;
  z-index: 999;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 11px;
  border: outset 1px;
  background: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  -moz-border-radius: 3px;
  cursor:pointer;
}
#intellisense div {
  padding: 2px 5px;
}
#intellisense div.selected {
  background: navy;
  color: #fff;
}
#intellisense div:hover {
  background: #77f;
  color:#fff;
}
body.sheet {
  overflow-x: hidden;
  background-position: center -50px;
}
body.sheet #nav {
  padding: 0;
  margin: 0 0 20px 0;
  background: rgba(220, 230, 240, .3);
  border-bottom: solid 1px rgba(180, 200, 220, .5);
}
body.sheet nav {
  width: 98%;
}
#breadcrumb {
  padding: 8px 0;
  font-size: 12px;
}
#breadcrumb a {
  font-weight: bold;
  text-decoration: none;
  color: #666;
  border-bottom: solid 1px #bbb;
}
#breadcrumb a:hover {
  border-color: #666;
}
#breadcrumb span.separator {
  font-size: 14px;
}
body.sheet img.prototypeThumb {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
  margin: 0 4px 0 0;
  border-radius: 4px;
  -moz-border-radius: 4px;
}
body.sheet #areas {
  bottom: 6px;
}
body.sheet #areas li {
  display: none;
}
body.sheet #areas #prototypes-tab {
  display: block;
  margin: 0;
}
body.sheet #areas #prototypes-tab a {
  border: none;
  background: none;
  font-size: 12px;
  color: #666;
  padding: 0;
  border-bottom: solid 1px #bbb;
}
body.sheet #areas #prototypes-tab a:before {
  font-size: 14px;
  content:"← ";
}
body.sheet #areas #prototypes-tab a:hover {
  border-bottom-color: #666;
}
body.sheet aside {
  width: 200px;
}
body.sheet article > header {
  margin: 0 0 10px 0;
}
body.sheet article > header h1 {
  margin: 0;
}
body.sheet header p.back {
  right: 220px;
}
section.sheet {
  padding: 0;
  width: 100%;
  background-image: none;
  border-radius: 0;
  -moz-border-radius: 0;
}
/*section.sheet header
    {
      top: -5px;
      margin-bottom: -5px;
    }*/
 body.sheet.maximized section.sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}
body.sheet.maximized section.sheet header {
  top: 0;
  margin-bottom: 0;
}
#sheetHeader {
  position: relative;
  background-color: #ffd;
  white-space: nowrap;
  border-bottom: solid 1px #ddd;
}
#sheetHeader a.maximize {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  text-indent: -9000px;
  background: #fff url(http://handcraft.it/Images/icon-maximize.png) center center no-repeat;
  border-left: solid 1px #eec;
}
.sheet.maximized #sheetHeader a.maximize {
  background-image: url(http://handcraft.it/Images/icon-restore.png);
}
#renameSheet {
  border: none;
  border-right: solid 1px #eee;
  padding: 5px 5px 5px 7px;
  margin: 0;
  outline: none;
  font: bold 16px Arial, Helvetica, sans-serif;
  width: auto;
  border-radius: 0;
  -webkit-transition: linear .1s;
  -moz-transition: linear .1s;
  -o-transition: linear .1s;
  transition: linear .1s;
  vertical-align: bottom;
}
#renameSheet:hover, #renameSheet:focus, #renameSheet.form42-valid:hover, #renameSheet.form42-valid:focus {
  box-shadow: none;
}
#renameSheet.form42-valid {
  background-color: #fff;
  color: #000;
}
#sheetName {
  display: inline-block;
  position: relative;
}
#sheetName a.dropdown {
  display: inline-block;
  height: 30px;
  width: 30px;
  background: #fff url(http://handcraft.it/Images/icon-arrow-down.png) center 12px no-repeat;
  -webkit-transition: linear color .2s;
  -moz-transition: linear color .2s;
  -o-transition: linear color .2s;
  transition: linear color .2s;
  text-decoration: none;
  vertical-align: middle;
}
#sheetName a.dropdown:hover {
  background-image: url(http://handcraft.it/Images/icon-arrow-down-hover.png);
}
#otherSheets {
  position: absolute;
  top: 27px;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 1001;
  margin-top: 3px;
  border-bottom: solid #eee 1px;
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
  -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
  -o-box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
  -webkit-transition: linear .1s;
  -moz-transition: linear .1s;
  -o-transition: linear .1s;
  transition: linear .1s;
}
.maximized #otherSheets {
  top: 28px;
}
#otherSheets h2 {
  margin: 0;
  padding: 5px 5px 5px 10px;
  border-bottom: solid 1px #eee;
  font-size: 16px;
}
#otherSheets ol {
  list-style:none;
  margin: 0;
  padding: 0;
  line-height: 23px;
}
#otherSheets ol li {
  float: left;
}
#otherSheets ol li a {
  padding: 5px 10px;
  display: block;
  min-width: 150px;
  max-width: 200px;
  overflow: hidden;
  color: #000;
  text-decoration: none;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
  border-right: solid 1px #eee;
}
#otherSheets ol li a:hover, #otherSheets ol li a:focus {
  background-color: #fed;
  text-decoration: underline;
  outline: none;
}
#otherSheets.hidden {
  display: none;
}
#otherSheets p.tip {
  clear: both;
  display: block;
  white-space: normal;
  padding: 4px;
  margin: 0;
  font-size: 12px;
  color: #999;
  text-align: center;
  background-color: #f9f9f9;
}
#sheetActions {
  padding: 5px 0 0 0;
  margin: 0 0 30px 0;
  position: relative;
}
#button-segments a.button {
  border-radius: 0;
  -moz-border-radius: 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}
#save {
  padding: 4px 20px;
}
#button-segments a:not(#save) {
  background-color: #abc;
  background: #abc -webkit-gradient(linear, left top, left bottom, from(#a1c1d1), color-stop(0.4, #aab5bd), to(#a2acb2));
  border-color: #abc;
  color: #fff;
  text-shadow: 0 -1px 0 #678;
}
#button-segments a:not(#save):hover {
  background-color: #bcd;
  background: #bcd -webkit-gradient(linear, left top, left bottom, from(#d2dce2), color-stop(0.4, #bbc6ce), to(#b3bdc3));
  color: #fff;
}
#button-segments a:not(#save):active {
  color: #def;
  text-shadow: 0 -1px 0 #89a;
  background-color: #bcd;
  background: #bcd -webkit-gradient(linear, left bottom, left top, from(#a3bdc3), color-stop(0.4, #bbc6de), to(#d2dce2));
}
#button-segments a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-right: none;
}
#button-segments a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-left: none;
}
#button-segments a.save-disabled {
  background: #bbb;
  color: #eee;
  text-shadow: 0 -1px 0 #999;
  border-color: #abc;
  background: #bbb -webkit-gradient(linear, left bottom, left top, from(#aaa), color-stop(0.4, #bbb), to(#ccc));
  cursor: default;
  opacity: .7;
}
.button-segments-wrapper {
  position: relative;
}
#viewableUrls {
  display: block;
  position: absolute;
  left: 102px;
  top: 27px;
  font-size: 12px;
  z-index: 10;
  background-color: rgba(0, 0, 0, .7);
  border-radius: 5px;
  margin: 10px 0 0 0;
  padding: 5px 0;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  -o-box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}
#viewableUrls:after {
  position: absolute;
  content:"";
  display: block;
  top: -10px;
  left: 50%;
  margin-left: -5px;
  width: 0;
  height: 5px;
  border-style: solid;
  border-width: 0 5px 5px;
  border-color: rgba(0, 0, 0, .7) transparent;
}
#viewableUrls.hidden {
  display: none;
}
#viewableUrls a {
  white-space: nowrap;
  display: block;
  color: blue;
  padding: 4px 8px;
  color: White;
  text-decoration: none;
}
#viewableUrls a:hover {
  color: #ff9;
}
#viewableUrls a.selected {
  text-decoration: underline;
}
#focusActions {
  color: #777;
  position: absolute;
  top: 0;
  right: 30px;
  background-color: White;
  padding: 7px;
  border-left: solid 1px #eee;
}
#focusActions a {
  color: #36d;
  text-decoration: underline;
  font-weight: normal;
  padding: 4px;
}
#focusActions a:hover {
  color: #39f;
}
#focusActions a.selected {
  font-weight: bold;
  color: #333;
  text-decoration: none;
}
#form {
  position: relative;
}
#dropzone {
  border: none;
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: none;
}
html a#dropdown {
  position: relative;
  margin-left: 4px;
  display: inline-block;
  padding-left: 16px;
  background: url(http://handcraft.it/Images/icon-arrow-down.png) left 4px no-repeat;
  border: none;
}
#search {
  display: inline-block;
  font: 16px Arial, Helvetica, sans-serif;
  padding: 5px 5px 5px 25px;
  margin: 0;
  background: url(http://handcraft.it/Images/icon-search.png) no-repeat 5px 7px;
  color: #777;
  border: none;
  outline: none;
  width: 300px;
  vertical-align: bottom;
}
#search:hover, #search:focus {
  box-shadow: none;
}
#searchResults {
  width: 100%;
  list-style: none;
  font: 11px/18px Tahoma, Arial, Helvetica, sans-serif;
  position: absolute;
  margin: -5px 0 0 -5px;
  padding: 0;
  z-index: 999;
  border: solid #eee 1px;
  border-left: none;
  background: #fff;
  font-size: 12px;
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
  -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
  -o-box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
  /*-webkit-transition: linear .3s;*/
  max-height: 500px;
  overflow-y: auto;
  margin: -1px 0 0 0;
  border-right: none;
}
#searchResults.hidden {
  display: none;
}
.searchResult {
  display: block;
  position: relative;
  text-decoration: none;
  color: #999;
  padding: 2px 5px;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
#searchResults .selected, .searchResult:hover {
  background-color: #fed;
}
#searchResults .lineNumber {
  margin-right: 10px;
  border-radius: 8px;
  -moz-border-radius: 8px;
  border: solid 2px white;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
  background-color: #fff;
  color: #777;
  font: 11px/12px"Courier New", Courier, Monospace;
  padding: 0 2px;
  display: block;
  text-align: center;
  float: right;
  margin-top: 1px;
}
#searchResults .sheetName {
  color: #999;
  display: block;
  width: 120px;
  position: absolute;
  top: 2px;
  right: 0;
  font-size: 11px;
}
#searchResults .line {
  font: 12px Consolas, "Courier New", Courier, monospace;
  color: #444;
  margin-right: 125px;
  padding: 2px 0;
  display: block;
}
.searchResult:hover .line, #searchResults .selected .line, .searchResult:hover .sheetName, #searchResults .selected .sheetName, .searchResult:hover .lineNumber, #searchResults .selected .lineNumber {
  color: #000;
}
.searchResult:hover .lineNumber, #searchResults .selected .lineNumber {
  background-color: #ffc;
}
#searchResults .highlight {
  background: #ffc;
}