pen-rails 0.0.1

data/vendor/assets/javascripts/markdown.js

@@ -0,0 +1,72 @@
+/*! Licensed under MIT, https://github.com/sofish/pen */
+(function() {
+
+  // only works with Pen
+  if(!this.Pen) return;
+
+  // markdown covertor obj
+  var covertor = {
+    keymap: { '96': '`', '62': '>', '49': '1', '46': '.', '45': '-', '42': '*', '35': '#'},
+    stack : []
+  };
+
+  // return valid markdown syntax
+  covertor.valid = function(str) {
+    var len = str.length;
+
+    if(str.match(/[#]{1,6}/)) {
+      return ['h' + len, len];
+    } else if(str === '```') {
+      return ['pre', len];
+    } else if(str === '>') {
+      return ['blockquote', len];
+    } else if(str === '1.') {
+      return ['insertorderedlist', len];
+    } else if(str === '-' || str === '*') {
+      return ['insertunorderedlist', len];
+    } else if(str.match(/(?:\.|\*|\-){3,}/)) {
+      return ['inserthorizontalrule', len];
+    }
+  };
+
+  // parse command
+  covertor.parse = function(e) {
+    var code = e.keyCode || e.which;
+
+    // when `space` is pressed
+    if(code === 32) {
+      var cmd = this.stack.join('');
+      this.stack.length = 0;
+      return this.valid(cmd);
+    }
+
+    // make cmd
+    if(this.keymap[code]) this.stack.push(this.keymap[code]);
+
+    return false;
+  };
+
+  // exec command
+  covertor.action = function(pen, cmd) {
+
+    // only apply effect at line start
+    if(pen._sel.focusOffset > cmd[1]) return;
+
+    var node = pen._sel.focusNode;
+    node.textContent = node.textContent.slice(cmd[1]);
+    pen._actions(cmd[0]);
+    pen.nostyle();
+  };
+
+  // init covertor
+  covertor.init = function(pen) {
+    pen.config.editor.addEventListener('keypress', function(e) {
+      var cmd = covertor.parse(e);
+      if(cmd) return covertor.action(pen, cmd);
+    });
+  };
+
+  // append to Pen
+  window.Pen.prototype.markdown = covertor;
+
+}());

data/vendor/assets/javascripts/pen.js

@@ -0,0 +1,368 @@
+/*! Licensed under MIT, https://github.com/sofish/pen */
+/* jshint -W030, -W093, -W015 */
+(function(doc) {
+
+  var Pen, FakePen, utils = {};
+
+  // type detect
+  utils.is = function(obj, type) {
+    return Object.prototype.toString.call(obj).slice(8, -1) === type;
+  };
+
+  // copy props from a obj
+  utils.copy = function(defaults, source) {
+    for(var p in source) {
+      if(source.hasOwnProperty(p)) {
+        var val = source[p];
+        defaults[p] = this.is(val, 'Object') ? this.copy({}, val) :
+          this.is(val, 'Array') ? this.copy([], val) : val;
+      }
+    }
+    return defaults;
+  };
+
+  // log
+  utils.log = function(message, force) {
+    if(window._pen_debug_mode_on || force) console.log('%cPEN DEBUGGER: %c' + message, 'font-family:arial,sans-serif;color:#1abf89;line-height:2em;', 'font-family:cursor,monospace;color:#333;');
+  };
+
+  // shift a function
+  utils.shift = function(key, fn, time) {
+    time = time || 50;
+    var queue = this['_shift_fn' + key], timeout = 'shift_timeout' + key, current;
+    queue ? queue.concat([fn, time]) : (queue = [[fn, time]]);
+    current = queue.pop();
+    clearTimeout(this[timeout]);
+    this[timeout] = setTimeout(function() {
+      current[0]();
+    }, time);
+  };
+
+  // merge: make it easy to have a fallback
+  utils.merge = function(config) {
+
+    // default settings
+    var defaults = {
+      class: 'pen',
+      debug: false,
+      stay: config.stay || !config.debug,
+      textarea: '<textarea name="content"></textarea>',
+      list: [
+        'blockquote', 'h2', 'h3', 'p', 'insertorderedlist', 'insertunorderedlist', 'inserthorizontalrule',
+        'indent', 'outdent', 'bold', 'italic', 'underline', 'createlink'
+      ]
+    };
+
+    // user-friendly config
+    if(config.nodeType === 1) {
+      defaults.editor = config;
+    } else if(config.match && config.match(/^#[\S]+$/)) {
+      defaults.editor = document.getElementById(config.slice(1));
+    } else {
+      defaults = utils.copy(defaults, config);
+    }
+
+    return defaults;
+  };
+
+  Pen = function(config) {
+
+    if(!config) return utils.log('can\'t find config', true);
+
+    // merge user config
+    var defaults = utils.merge(config);
+
+    if(defaults.editor.nodeType !== 1) return utils.log('can\'t find editor');
+    if(defaults.debug) window._pen_debug_mode_on = true;
+
+    var editor = defaults.editor;
+
+    // set default class
+    editor.classList.add(defaults.class);
+
+    // set contenteditable
+    var editable = editor.getAttribute('contenteditable');
+    if(!editable) editor.setAttribute('contenteditable', 'true');
+
+    // assign config
+    this.config = defaults;
+
+    // save the selection obj
+    this._sel = doc.getSelection();
+
+    // map actions
+    this.actions();
+
+    // enable toolbar
+    this.toolbar();
+
+    // enable markdown covert
+    this.markdown && this.markdown.init(this);
+
+    // stay on the page
+    this.config.stay && this.stay();
+  };
+
+  // node effects
+  Pen.prototype._effectNode = function(el, returnAsNodeName) {
+    var nodes = [];
+    while(el !== this.config.editor) {
+      if(el.nodeName.match(/(?:[pubia]|h[1-6]|blockquote|[uo]l|li)/i)) {
+        nodes.push(returnAsNodeName ? el.nodeName.toLowerCase() : el);
+      }
+      el = el.parentNode;
+    }
+    return nodes;
+  };
+
+  // remove style attr
+  Pen.prototype.nostyle = function() {
+    var els = this.config.editor.querySelectorAll('[style]');
+    [].slice.call(els).forEach(function(item) {
+      item.removeAttribute('style');
+    });
+    return this;
+  };
+
+  Pen.prototype.toolbar = function() {
+
+    var that = this, icons = '';
+
+    for(var i = 0, list = this.config.list; i < list.length; i++) {
+      var name = list[i], klass = 'pen-icon icon-' + name;
+      icons += '<i class="' + klass + '" data-action="' + name + '">' + (name.match(/^h[1-6]|p$/i) ? name.toUpperCase() : '') + '</i>';
+      if((name === 'createlink')) icons += '<input class="pen-input" placeholder="http://" />';
+    }
+
+    var menu = doc.createElement('div');
+    menu.setAttribute('class', this.config.class + '-menu pen-menu');
+    menu.innerHTML = icons;
+    menu.style.display = 'none';
+
+    doc.body.appendChild((this._menu = menu));
+
+    var setpos = function() {
+      if(menu.style.display === 'block') that.menu();
+    };
+
+    // change menu offset when window resize / scroll
+    window.addEventListener('resize', setpos);
+    window.addEventListener('scroll', setpos);
+
+    var editor = this.config.editor;
+    var toggle = function() {
+
+      if(that._isDestroyed) return;
+
+      utils.shift('toggle_menu', function() {
+        var range = that._sel;
+        if(!range.isCollapsed) {
+          //show menu
+          that._range = range.getRangeAt(0);
+          that.menu().highlight();
+        } else {
+          //hide menu
+          that._menu.style.display = 'none';
+        }
+      }, 200);
+    };
+
+    // toggle toolbar on mouse select
+    editor.addEventListener('mouseup', toggle);
+
+    // toggle toolbar on key select
+    editor.addEventListener('keyup', toggle);
+
+    // toggle toolbar on key select
+    menu.addEventListener('click', function(e) {
+      var action = e.target.getAttribute('data-action');
+
+      if(!action) return;
+
+      var apply = function(value) {
+        that._sel.removeAllRanges();
+        that._sel.addRange(that._range);
+        that._actions(action, value);
+        that._range = that._sel.getRangeAt(0);
+        that.highlight().nostyle().menu();
+      };
+
+      // create link
+      if(action === 'createlink') {
+        var input = menu.getElementsByTagName('input')[0], createlink;
+
+        input.style.display = 'block';
+        input.focus();
+
+        createlink = function(input) {
+          input.style.display = 'none';
+          if(input.value) return apply(input.value.replace(/(^\s+)|(\s+$)/g, '').replace(/^(?!http:\/\/|https:\/\/)(.*)$/, 'http://$1'));
+          action = 'unlink';
+          apply();
+        };
+
+        return input.onkeypress = function(e) {
+          if(e.which === 13) return createlink(e.target);
+        };
+      }
+
+      apply();
+    });
+
+    return this;
+  };
+
+  // highlight menu
+  Pen.prototype.highlight = function() {
+    var node = this._sel.focusNode
+      , effects = this._effectNode(node)
+      , menu = this._menu
+      , linkInput = menu.querySelector('input')
+      , highlight;
+
+    // remove all highlights
+    [].slice.call(menu.querySelectorAll('.active')).forEach(function(el) {
+      el.classList.remove('active');
+    });
+
+    // display link input if createlink enabled
+    if (linkInput) linkInput.style.display = 'none';
+
+    highlight = function(str) {
+      var selector = '.icon-' + str
+        , el = menu.querySelector(selector);
+      return el && el.classList.add('active');
+    };
+
+    effects.forEach(function(item) {
+      var tag = item.nodeName.toLowerCase();
+      switch(tag) {
+        case 'a': return (menu.querySelector('input').value = item.href), highlight('createlink');
+        case 'i': return highlight('italic');
+        case 'u': return highlight('underline');
+        case 'b': return highlight('bold');
+        case 'ul': return highlight('insertunorderedlist');
+        case 'ol': return highlight('insertorderedlist');
+        case 'ol': return highlight('insertorderedlist');
+        case 'li': return highlight('indent');
+        default : highlight(tag);
+      }
+    });
+
+    return this;
+  };
+
+  Pen.prototype.actions = function() {
+    var that = this, reg, block, overall, insert;
+
+    // allow command list
+    reg = {
+      block: /^(?:p|h[1-6]|blockquote|pre)$/,
+      inline: /^(?:bold|italic|underline|insertorderedlist|insertunorderedlist|indent|outdent)$/,
+      source: /^(?:insertimage|createlink|unlink)$/,
+      insert: /^(?:inserthorizontalrule|insert)$/
+    };
+
+    overall = function(cmd, val) {
+      var message = ' to exec 「' + cmd + '」 command' + (val ? (' with value: ' + val) : '');
+      if(document.execCommand(cmd, false, val) && that.config.debug) {
+        utils.log('success' + message);
+      } else {
+        utils.log('fail' + message);
+      }
+    };
+
+    insert = function(name) {
+      var range = that._sel.getRangeAt(0)
+        , node = range.startContainer;
+
+      while(node.nodeType !== 1) {
+        node = node.parentNode;
+      }
+
+      range.selectNode(node);
+      range.collapse(false);
+      return overall(name);
+    };
+
+    block = function(name) {
+      if(that._effectNode(that._sel.getRangeAt(0).startContainer, true).indexOf(name) !== -1) {
+        if(name === 'blockquote') return document.execCommand('outdent', false, null);
+        name = 'p';
+      }
+      return overall('formatblock', name);
+    };
+
+    this._actions = function(name, value) {
+      if(name.match(reg.block)) {
+        block(name);
+      } else if(name.match(reg.inline) || name.match(reg.source)) {
+        overall(name, value);
+      } else if(name.match(reg.insert)) {
+        insert(name);
+      } else {
+        if(this.config.debug) utils.log('can not find command function for name: ' + name + (value ? (', value: ' + value) : ''));
+      }
+    };
+
+    return this;
+  };
+
+  // show menu
+  Pen.prototype.menu = function() {
+
+    var offset = this._range.getBoundingClientRect()
+      , top = offset.top - 10
+      , left = offset.left + (offset.width / 2)
+      , menu = this._menu;
+
+    // display block to caculate it's width & height
+    menu.style.display = 'block';
+    menu.style.top = top - menu.clientHeight + 'px';
+    menu.style.left = left - (menu.clientWidth/2) + 'px';
+
+    return this;
+  };
+
+  Pen.prototype.stay = function() {
+    var that = this;
+    !window.onbeforeunload && (window.onbeforeunload = function() {
+      if(!that._isDestroyed) return 'Are you going to leave here?';
+    });
+  };
+
+  Pen.prototype.destroy = function(isAJoke) {
+    var destroy = isAJoke ? false : true
+      , attr = isAJoke ? 'setAttribute' : 'removeAttribute';
+
+    if(!isAJoke) {
+      this._sel.removeAllRanges();
+      this._menu.style.display = 'none';
+    }
+    this._isDestroyed = destroy;
+    this.config.editor[attr]('contenteditable', '');
+
+    return this;
+  };
+
+  Pen.prototype.rebuild = function() {
+    return this.destroy('it\'s a joke');
+  };
+
+  // a fallback for old browers
+  FakePen = function(config) {
+    if(!config) return utils.log('can\'t find config', true);
+
+    var defaults = utils.merge(config)
+      , klass = defaults.editor.getAttribute('class');
+
+    klass = klass ? klass.replace(/\bpen\b/g, '') + ' pen-textarea ' + defaults.class : 'pen pen-textarea';
+    defaults.editor.setAttribute('class', klass);
+    defaults.editor.innerHTML = defaults.textarea;
+    return defaults.editor;
+  };
+
+  // make it accessible
+  this.Pen = doc.getSelection ? Pen : FakePen;
+
+}(document));

data/vendor/assets/stylesheets/pen.css

@@ -0,0 +1,658 @@
+
+
+
+
+
+<!DOCTYPE html>
+<html>
+  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# object: http://ogp.me/ns/object# article: http://ogp.me/ns/article# profile: http://ogp.me/ns/profile#">
+    <meta charset='utf-8'>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>pen/src/pen.css at master · sofish/pen · GitHub</title>
+    <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub" />
+    <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub" />
+    <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-114.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-144.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144.png" />
+    <link rel="logo" type="image/svg" href="https://github-media-downloads.s3.amazonaws.com/github-logo.svg" />
+    <meta property="fb:app_id" content="1401488693436528"/>
+    <meta content="@github" name="twitter:site" /><meta content="summary" name="twitter:card" /><meta content="sofish/pen" name="twitter:title" /><meta content="pen - enjoy live editing (+markdown)" name="twitter:description" /><meta content="https://1.gravatar.com/avatar/713d89c43a5897bd68824fe74f8e7677?d=https%3A%2F%2Fidenticons.github.com%2F2a2082392dfb32b984e6f20663604707.png&amp;r=x&amp;s=400" name="twitter:image:src" />
+<meta content="GitHub" property="og:site_name" /><meta content="object" property="og:type" /><meta content="https://1.gravatar.com/avatar/713d89c43a5897bd68824fe74f8e7677?d=https%3A%2F%2Fidenticons.github.com%2F2a2082392dfb32b984e6f20663604707.png&amp;r=x&amp;s=400" property="og:image" /><meta content="sofish/pen" property="og:title" /><meta content="https://github.com/sofish/pen" property="og:url" /><meta content="pen - enjoy live editing (+markdown)" property="og:description" />
+
+    <meta name="hostname" content="github-fe128-cp1-prd.iad.github.net">
+    <meta name="ruby" content="ruby 2.1.0p0-github-tcmalloc (60139581e1) [x86_64-linux]">
+    <link rel="assets" href="https://github.global.ssl.fastly.net/">
+    <link rel="conduit-xhr" href="https://ghconduit.com:25035/">
+    <link rel="xhr-socket" href="/_sockets" />
+    
+
+
+    <meta name="msapplication-TileImage" content="/windows-tile.png" />
+    <meta name="msapplication-TileColor" content="#ffffff" />
+    <meta name="selected-link" value="repo_source" data-pjax-transient />
+    <meta content="collector.githubapp.com" name="octolytics-host" /><meta content="collector-cdn.github.com" name="octolytics-script-host" /><meta content="github" name="octolytics-app-id" /><meta content="7B9EAC38:60F5:70EA7B4:52E35434" name="octolytics-dimension-request_id" />
+    
+
+    
+    
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+
+    <meta content="authenticity_token" name="csrf-param" />
+<meta content="n37zREjZ3w68oNUCmzixPfr/d0NikHikjkrWwP+ZLcY=" name="csrf-token" />
+
+    <link href="https://github.global.ssl.fastly.net/assets/github-960ac8d7e9aa944b5db837f22d370249be81f6c3.css" media="all" rel="stylesheet" type="text/css" />
+    <link href="https://github.global.ssl.fastly.net/assets/github2-50d34ba98a0e848baeea02822c5a73e9cd6fc35c.css" media="all" rel="stylesheet" type="text/css" />
+    
+
+
+      <script src="https://github.global.ssl.fastly.net/assets/frameworks-9cbac03425d4357e382e314714edc0965d30cf57.js" type="text/javascript"></script>
+      <script async="async" defer="defer" src="https://github.global.ssl.fastly.net/assets/github-2ba3fb4d3ba5647e0f21c27da0b612a29e1e387c.js" type="text/javascript"></script>
+      
+      <meta http-equiv="x-pjax-version" content="5622baad0eb34a0b5958544a2ec7311a">
+
+        <link data-pjax-transient rel='permalink' href='/sofish/pen/blob/cf1b9fc9f8900a2737b886dbbc5db7fee91810f3/src/pen.css'>
+
+  <meta name="description" content="pen - enjoy live editing (+markdown)" />
+
+  <meta content="153183" name="octolytics-dimension-user_id" /><meta content="sofish" name="octolytics-dimension-user_login" /><meta content="12464962" name="octolytics-dimension-repository_id" /><meta content="sofish/pen" name="octolytics-dimension-repository_nwo" /><meta content="true" name="octolytics-dimension-repository_public" /><meta content="false" name="octolytics-dimension-repository_is_fork" /><meta content="12464962" name="octolytics-dimension-repository_network_root_id" /><meta content="sofish/pen" name="octolytics-dimension-repository_network_root_nwo" />
+  <link href="https://github.com/sofish/pen/commits/master.atom" rel="alternate" title="Recent Commits to pen:master" type="application/atom+xml" />
+
+  </head>
+
+
+  <body class="logged_out  env-production  vis-public page-blob">
+    <div class="wrapper">
+      
+      
+      
+      
+
+
+      
+      <div class="header header-logged-out">
+  <div class="container clearfix">
+
+    <a class="header-logo-wordmark" href="https://github.com/">
+      <span class="mega-octicon octicon-logo-github"></span>
+    </a>
+
+    <div class="header-actions">
+        <a class="button primary" href="/join">Sign up</a>
+      <a class="button signin" href="/login?return_to=%2Fsofish%2Fpen%2Fblob%2Fmaster%2Fsrc%2Fpen.css">Sign in</a>
+    </div>
+
+    <div class="command-bar js-command-bar  in-repository">
+
+      <ul class="top-nav">
+          <li class="explore"><a href="/explore">Explore</a></li>
+        <li class="features"><a href="/features">Features</a></li>
+          <li class="enterprise"><a href="https://enterprise.github.com/">Enterprise</a></li>
+          <li class="blog"><a href="/blog">Blog</a></li>
+      </ul>
+        <form accept-charset="UTF-8" action="/search" class="command-bar-form" id="top_search_form" method="get">
+
+<input type="text" data-hotkey="/ s" name="q" id="js-command-bar-field" placeholder="Search or type a command" tabindex="1" autocapitalize="off"
+    
+    
+      data-repo="sofish/pen"
+      data-branch="master"
+      data-sha="5d5af01442f58f1799992fc1c63dba1611beec3c"
+  >
+
+    <input type="hidden" name="nwo" value="sofish/pen" />
+
+    <div class="select-menu js-menu-container js-select-menu search-context-select-menu">
+      <span class="minibutton select-menu-button js-menu-target">
+        <span class="js-select-button">This repository</span>
+      </span>
+
+      <div class="select-menu-modal-holder js-menu-content js-navigation-container">
+        <div class="select-menu-modal">
+
+          <div class="select-menu-item js-navigation-item js-this-repository-navigation-item selected">
+            <span class="select-menu-item-icon octicon octicon-check"></span>
+            <input type="radio" class="js-search-this-repository" name="search_target" value="repository" checked="checked" />
+            <div class="select-menu-item-text js-select-button-text">This repository</div>
+          </div> <!-- /.select-menu-item -->
+
+          <div class="select-menu-item js-navigation-item js-all-repositories-navigation-item">
+            <span class="select-menu-item-icon octicon octicon-check"></span>
+            <input type="radio" name="search_target" value="global" />
+            <div class="select-menu-item-text js-select-button-text">All repositories</div>
+          </div> <!-- /.select-menu-item -->
+
+        </div>
+      </div>
+    </div>
+
+  <span class="octicon help tooltipped downwards" title="Show command bar help">
+    <span class="octicon octicon-question"></span>
+  </span>
+
+
+  <input type="hidden" name="ref" value="cmdform">
+
+</form>
+    </div>
+
+  </div>
+</div>
+
+
+      
+
+
+          <div class="site" itemscope itemtype="http://schema.org/WebPage">
+    
+    <div class="pagehead repohead instapaper_ignore readability-menu">
+      <div class="container">
+        
+
+<ul class="pagehead-actions">
+
+
+  <li>
+    <a href="/login?return_to=%2Fsofish%2Fpen"
+    class="minibutton with-count js-toggler-target star-button tooltipped upwards"
+    title="You must be signed in to use this feature" rel="nofollow">
+    <span class="octicon octicon-star"></span>Star
+  </a>
+
+    <a class="social-count js-social-count" href="/sofish/pen/stargazers">
+      1,703
+    </a>
+
+  </li>
+
+    <li>
+      <a href="/login?return_to=%2Fsofish%2Fpen"
+        class="minibutton with-count js-toggler-target fork-button tooltipped upwards"
+        title="You must be signed in to fork a repository" rel="nofollow">
+        <span class="octicon octicon-git-branch"></span>Fork
+      </a>
+      <a href="/sofish/pen/network" class="social-count">
+        144
+      </a>
+    </li>
+</ul>
+
+        <h1 itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="entry-title public">
+          <span class="repo-label"><span>public</span></span>
+          <span class="mega-octicon octicon-repo"></span>
+          <span class="author">
+            <a href="/sofish" class="url fn" itemprop="url" rel="author"><span itemprop="title">sofish</span></a>
+          </span>
+          <span class="repohead-name-divider">/</span>
+          <strong><a href="/sofish/pen" class="js-current-repository js-repo-home-link">pen</a></strong>
+
+          <span class="page-context-loader">
+            <img alt="Octocat-spinner-32" height="16" src="https://github.global.ssl.fastly.net/images/spinners/octocat-spinner-32.gif" width="16" />
+          </span>
+
+        </h1>
+      </div><!-- /.container -->
+    </div><!-- /.repohead -->
+
+    <div class="container">
+      
+
+      <div class="repository-with-sidebar repo-container  ">
+
+        <div class="repository-sidebar">
+            
+
+<div class="sunken-menu vertical-right repo-nav js-repo-nav js-repository-container-pjax js-octicon-loaders">
+  <div class="sunken-menu-contents">
+    <ul class="sunken-menu-group">
+      <li class="tooltipped leftwards" title="Code">
+        <a href="/sofish/pen" aria-label="Code" class="selected js-selected-navigation-item sunken-menu-item" data-gotokey="c" data-pjax="true" data-selected-links="repo_source repo_downloads repo_commits repo_tags repo_branches /sofish/pen">
+          <span class="octicon octicon-code"></span> <span class="full-word">Code</span>
+          <img alt="Octocat-spinner-32" class="mini-loader" height="16" src="https://github.global.ssl.fastly.net/images/spinners/octocat-spinner-32.gif" width="16" />
+</a>      </li>
+
+        <li class="tooltipped leftwards" title="Issues">
+          <a href="/sofish/pen/issues" aria-label="Issues" class="js-selected-navigation-item sunken-menu-item js-disable-pjax" data-gotokey="i" data-selected-links="repo_issues /sofish/pen/issues">
+            <span class="octicon octicon-issue-opened"></span> <span class="full-word">Issues</span>
+            <span class='counter'>31</span>
+            <img alt="Octocat-spinner-32" class="mini-loader" height="16" src="https://github.global.ssl.fastly.net/images/spinners/octocat-spinner-32.gif" width="16" />
+</a>        </li>
+
+      <li class="tooltipped leftwards" title="Pull Requests">
+        <a href="/sofish/pen/pulls" aria-label="Pull Requests" class="js-selected-navigation-item sunken-menu-item js-disable-pjax" data-gotokey="p" data-selected-links="repo_pulls /sofish/pen/pulls">
+            <span class="octicon octicon-git-pull-request"></span> <span class="full-word">Pull Requests</span>
+            <span class='counter'>5</span>
+            <img alt="Octocat-spinner-32" class="mini-loader" height="16" src="https://github.global.ssl.fastly.net/images/spinners/octocat-spinner-32.gif" width="16" />
+</a>      </li>
+
+
+    </ul>
+    <div class="sunken-menu-separator"></div>
+    <ul class="sunken-menu-group">
+
+      <li class="tooltipped leftwards" title="Pulse">
+        <a href="/sofish/pen/pulse" aria-label="Pulse" class="js-selected-navigation-item sunken-menu-item" data-pjax="true" data-selected-links="pulse /sofish/pen/pulse">
+          <span class="octicon octicon-pulse"></span> <span class="full-word">Pulse</span>
+          <img alt="Octocat-spinner-32" class="mini-loader" height="16" src="https://github.global.ssl.fastly.net/images/spinners/octocat-spinner-32.gif" width="16" />
+</a>      </li>
+
+      <li class="tooltipped leftwards" title="Graphs">
+        <a href="/sofish/pen/graphs" aria-label="Graphs" class="js-selected-navigation-item sunken-menu-item" data-pjax="true" data-selected-links="repo_graphs repo_contributors /sofish/pen/graphs">
+          <span class="octicon octicon-graph"></span> <span class="full-word">Graphs</span>
+          <img alt="Octocat-spinner-32" class="mini-loader" height="16" src="https://github.global.ssl.fastly.net/images/spinners/octocat-spinner-32.gif" width="16" />
+</a>      </li>
+
+      <li class="tooltipped leftwards" title="Network">
+        <a href="/sofish/pen/network" aria-label="Network" class="js-selected-navigation-item sunken-menu-item js-disable-pjax" data-selected-links="repo_network /sofish/pen/network">
+          <span class="octicon octicon-git-branch"></span> <span class="full-word">Network</span>
+          <img alt="Octocat-spinner-32" class="mini-loader" height="16" src="https://github.global.ssl.fastly.net/images/spinners/octocat-spinner-32.gif" width="16" />
+</a>      </li>
+    </ul>
+
+
+  </div>
+</div>
+
+              <div class="only-with-full-nav">
+                
+
+  
+
+<div class="clone-url open"
+  data-protocol-type="http"
+  data-url="/users/set_protocol?protocol_selector=http&amp;protocol_type=clone">
+  <h3><strong>HTTPS</strong> clone URL</h3>
+  <div class="clone-url-box">
+    <input type="text" class="clone js-url-field"
+           value="https://github.com/sofish/pen.git" readonly="readonly">
+
+    <span class="js-zeroclipboard url-box-clippy minibutton zeroclipboard-button" data-clipboard-text="https://github.com/sofish/pen.git" data-copied-hint="copied!" title="copy to clipboard"><span class="octicon octicon-clippy"></span></span>
+  </div>
+</div>
+
+  
+
+<div class="clone-url "
+  data-protocol-type="subversion"
+  data-url="/users/set_protocol?protocol_selector=subversion&amp;protocol_type=clone">
+  <h3><strong>Subversion</strong> checkout URL</h3>
+  <div class="clone-url-box">
+    <input type="text" class="clone js-url-field"
+           value="https://github.com/sofish/pen" readonly="readonly">
+
+    <span class="js-zeroclipboard url-box-clippy minibutton zeroclipboard-button" data-clipboard-text="https://github.com/sofish/pen" data-copied-hint="copied!" title="copy to clipboard"><span class="octicon octicon-clippy"></span></span>
+  </div>
+</div>
+
+
+<p class="clone-options">You can clone with
+      <a href="#" class="js-clone-selector" data-protocol="http">HTTPS</a>,
+      or <a href="#" class="js-clone-selector" data-protocol="subversion">Subversion</a>.
+  <span class="octicon help tooltipped upwards" title="Get help on which URL is right for you.">
+    <a href="https://help.github.com/articles/which-remote-url-should-i-use">
+    <span class="octicon octicon-question"></span>
+    </a>
+  </span>
+</p>
+
+
+
+                <a href="/sofish/pen/archive/master.zip"
+                   class="minibutton sidebar-button"
+                   title="Download this repository as a zip file"
+                   rel="nofollow">
+                  <span class="octicon octicon-cloud-download"></span>
+                  Download ZIP
+                </a>
+              </div>
+        </div><!-- /.repository-sidebar -->
+
+        <div id="js-repo-pjax-container" class="repository-content context-loader-container" data-pjax-container>
+          
+
+
+<!-- blob contrib key: blob_contributors:v21:9219040c9c2ec3058ae45f4586b035e7 -->
+
+<p title="This is a placeholder element" class="js-history-link-replace hidden"></p>
+
+<a href="/sofish/pen/find/master" data-pjax data-hotkey="t" class="js-show-file-finder" style="display:none">Show File Finder</a>
+
+<div class="file-navigation">
+  
+
+<div class="select-menu js-menu-container js-select-menu" >
+  <span class="minibutton select-menu-button js-menu-target" data-hotkey="w"
+    data-master-branch="master"
+    data-ref="master"
+    role="button" aria-label="Switch branches or tags" tabindex="0">
+    <span class="octicon octicon-git-branch"></span>
+    <i>branch:</i>
+    <span class="js-select-button">master</span>
+  </span>
+
+  <div class="select-menu-modal-holder js-menu-content js-navigation-container" data-pjax>
+
+    <div class="select-menu-modal">
+      <div class="select-menu-header">
+        <span class="select-menu-title">Switch branches/tags</span>
+        <span class="octicon octicon-remove-close js-menu-close"></span>
+      </div> <!-- /.select-menu-header -->
+
+      <div class="select-menu-filters">
+        <div class="select-menu-text-filter">
+          <input type="text" aria-label="Filter branches/tags" id="context-commitish-filter-field" class="js-filterable-field js-navigation-enable" placeholder="Filter branches/tags">
+        </div>
+        <div class="select-menu-tabs">
+          <ul>
+            <li class="select-menu-tab">
+              <a href="#" data-tab-filter="branches" class="js-select-menu-tab">Branches</a>
+            </li>
+            <li class="select-menu-tab">
+              <a href="#" data-tab-filter="tags" class="js-select-menu-tab">Tags</a>
+            </li>
+          </ul>
+        </div><!-- /.select-menu-tabs -->
+      </div><!-- /.select-menu-filters -->
+
+      <div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="branches">
+
+        <div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
+
+
+            <div class="select-menu-item js-navigation-item ">
+              <span class="select-menu-item-icon octicon octicon-check"></span>
+              <a href="/sofish/pen/blob/gh-pages/src/pen.css"
+                 data-name="gh-pages"
+                 data-skip-pjax="true"
+                 rel="nofollow"
+                 class="js-navigation-open select-menu-item-text js-select-button-text css-truncate-target"
+                 title="gh-pages">gh-pages</a>
+            </div> <!-- /.select-menu-item -->
+            <div class="select-menu-item js-navigation-item selected">
+              <span class="select-menu-item-icon octicon octicon-check"></span>
+              <a href="/sofish/pen/blob/master/src/pen.css"
+                 data-name="master"
+                 data-skip-pjax="true"
+                 rel="nofollow"
+                 class="js-navigation-open select-menu-item-text js-select-button-text css-truncate-target"
+                 title="master">master</a>
+            </div> <!-- /.select-menu-item -->
+        </div>
+
+          <div class="select-menu-no-results">Nothing to show</div>
+      </div> <!-- /.select-menu-list -->
+
+      <div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="tags">
+        <div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
+
+
+            <div class="select-menu-item js-navigation-item ">
+              <span class="select-menu-item-icon octicon octicon-check"></span>
+              <a href="/sofish/pen/tree/0.0.1/src/pen.css"
+                 data-name="0.0.1"
+                 data-skip-pjax="true"
+                 rel="nofollow"
+                 class="js-navigation-open select-menu-item-text js-select-button-text css-truncate-target"
+                 title="0.0.1">0.0.1</a>
+            </div> <!-- /.select-menu-item -->
+        </div>
+
+        <div class="select-menu-no-results">Nothing to show</div>
+      </div> <!-- /.select-menu-list -->
+
+    </div> <!-- /.select-menu-modal -->
+  </div> <!-- /.select-menu-modal-holder -->
+</div> <!-- /.select-menu -->
+
+  <div class="breadcrumb">
+    <span class='repo-root js-repo-root'><span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/sofish/pen" data-branch="master" data-direction="back" data-pjax="true" itemscope="url"><span itemprop="title">pen</span></a></span></span><span class="separator"> / </span><span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/sofish/pen/tree/master/src" data-branch="master" data-direction="back" data-pjax="true" itemscope="url"><span itemprop="title">src</span></a></span><span class="separator"> / </span><strong class="final-path">pen.css</strong> <span class="js-zeroclipboard minibutton zeroclipboard-button" data-clipboard-text="src/pen.css" data-copied-hint="copied!" title="copy to clipboard"><span class="octicon octicon-clippy"></span></span>
+  </div>
+</div>
+
+
+
+  <div class="commit file-history-tease">
+    <img class="main-avatar" height="24" src="https://1.gravatar.com/avatar/713d89c43a5897bd68824fe74f8e7677?d=https%3A%2F%2Fidenticons.github.com%2F2a2082392dfb32b984e6f20663604707.png&amp;r=x&amp;s=140" width="24" />
+    <span class="author"><a href="/sofish" rel="author">sofish</a></span>
+    <time class="js-relative-date" datetime="2013-09-15T00:01:39-07:00" title="2013-09-15 00:01:39">September 15, 2013</time>
+    <div class="commit-title">
+        <a href="/sofish/pen/commit/a605648c5a22387ddbf56360056a60b2d675963c" class="message" data-pjax="true" title="add a high z-index to toolbar">add a high z-index to toolbar</a>
+    </div>
+
+    <div class="participation">
+      <p class="quickstat"><a href="#blob_contributors_box" rel="facebox"><strong>1</strong> contributor</a></p>
+      
+    </div>
+    <div id="blob_contributors_box" style="display:none">
+      <h2 class="facebox-header">Users who have contributed to this file</h2>
+      <ul class="facebox-user-list">
+          <li class="facebox-user-list-item">
+            <img height="24" src="https://1.gravatar.com/avatar/713d89c43a5897bd68824fe74f8e7677?d=https%3A%2F%2Fidenticons.github.com%2F2a2082392dfb32b984e6f20663604707.png&amp;r=x&amp;s=140" width="24" />
+            <a href="/sofish">sofish</a>
+          </li>
+      </ul>
+    </div>
+  </div>
+
+<div id="files" class="bubble">
+  <div class="file">
+    <div class="meta">
+      <div class="info">
+        <span class="icon"><b class="octicon octicon-file-text"></b></span>
+        <span class="mode" title="File Mode">file</span>
+          <span>104 lines (95 sloc)</span>
+        <span>5.493 kb</span>
+      </div>
+      <div class="actions">
+        <div class="button-group">
+              <a class="minibutton disabled tooltipped leftwards" href="#"
+                 title="You must be signed in to make or propose changes">Edit</a>
+          <a href="/sofish/pen/raw/master/src/pen.css" class="button minibutton " id="raw-url">Raw</a>
+            <a href="/sofish/pen/blame/master/src/pen.css" class="button minibutton ">Blame</a>
+          <a href="/sofish/pen/commits/master/src/pen.css" class="button minibutton " rel="nofollow">History</a>
+        </div><!-- /.button-group -->
+          <a class="minibutton danger disabled empty-icon tooltipped leftwards" href="#"
+             title="You must be signed in to make or propose changes">
+          Delete
+        </a>
+      </div><!-- /.actions -->
+
+    </div>
+        <div class="blob-wrapper data type-css js-blob-data">
+        <table class="file-code file-diff">
+          <tr class="file-code-line">
+            <td class="blob-line-nums">
+              <span id="L1" rel="#L1">1</span>
+<span id="L2" rel="#L2">2</span>
+<span id="L3" rel="#L3">3</span>
+<span id="L4" rel="#L4">4</span>
+<span id="L5" rel="#L5">5</span>
+<span id="L6" rel="#L6">6</span>
+<span id="L7" rel="#L7">7</span>
+<span id="L8" rel="#L8">8</span>
+<span id="L9" rel="#L9">9</span>
+<span id="L10" rel="#L10">10</span>
+<span id="L11" rel="#L11">11</span>
+<span id="L12" rel="#L12">12</span>
+<span id="L13" rel="#L13">13</span>
+<span id="L14" rel="#L14">14</span>
+<span id="L15" rel="#L15">15</span>
+<span id="L16" rel="#L16">16</span>
+<span id="L17" rel="#L17">17</span>
+<span id="L18" rel="#L18">18</span>
+<span id="L19" rel="#L19">19</span>
+<span id="L20" rel="#L20">20</span>
+<span id="L21" rel="#L21">21</span>
+<span id="L22" rel="#L22">22</span>
+<span id="L23" rel="#L23">23</span>
+<span id="L24" rel="#L24">24</span>
+<span id="L25" rel="#L25">25</span>
+<span id="L26" rel="#L26">26</span>
+<span id="L27" rel="#L27">27</span>
+<span id="L28" rel="#L28">28</span>
+<span id="L29" rel="#L29">29</span>
+<span id="L30" rel="#L30">30</span>
+<span id="L31" rel="#L31">31</span>
+<span id="L32" rel="#L32">32</span>
+<span id="L33" rel="#L33">33</span>
+<span id="L34" rel="#L34">34</span>
+<span id="L35" rel="#L35">35</span>
+<span id="L36" rel="#L36">36</span>
+<span id="L37" rel="#L37">37</span>
+<span id="L38" rel="#L38">38</span>
+<span id="L39" rel="#L39">39</span>
+<span id="L40" rel="#L40">40</span>
+<span id="L41" rel="#L41">41</span>
+<span id="L42" rel="#L42">42</span>
+<span id="L43" rel="#L43">43</span>
+<span id="L44" rel="#L44">44</span>
+<span id="L45" rel="#L45">45</span>
+<span id="L46" rel="#L46">46</span>
+<span id="L47" rel="#L47">47</span>
+<span id="L48" rel="#L48">48</span>
+<span id="L49" rel="#L49">49</span>
+<span id="L50" rel="#L50">50</span>
+<span id="L51" rel="#L51">51</span>
+<span id="L52" rel="#L52">52</span>
+<span id="L53" rel="#L53">53</span>
+<span id="L54" rel="#L54">54</span>
+<span id="L55" rel="#L55">55</span>
+<span id="L56" rel="#L56">56</span>
+<span id="L57" rel="#L57">57</span>
+<span id="L58" rel="#L58">58</span>
+<span id="L59" rel="#L59">59</span>
+<span id="L60" rel="#L60">60</span>
+<span id="L61" rel="#L61">61</span>
+<span id="L62" rel="#L62">62</span>
+<span id="L63" rel="#L63">63</span>
+<span id="L64" rel="#L64">64</span>
+<span id="L65" rel="#L65">65</span>
+<span id="L66" rel="#L66">66</span>
+<span id="L67" rel="#L67">67</span>
+<span id="L68" rel="#L68">68</span>
+<span id="L69" rel="#L69">69</span>
+<span id="L70" rel="#L70">70</span>
+<span id="L71" rel="#L71">71</span>
+<span id="L72" rel="#L72">72</span>
+<span id="L73" rel="#L73">73</span>
+<span id="L74" rel="#L74">74</span>
+<span id="L75" rel="#L75">75</span>
+<span id="L76" rel="#L76">76</span>
+<span id="L77" rel="#L77">77</span>
+<span id="L78" rel="#L78">78</span>
+<span id="L79" rel="#L79">79</span>
+<span id="L80" rel="#L80">80</span>
+<span id="L81" rel="#L81">81</span>
+<span id="L82" rel="#L82">82</span>
+<span id="L83" rel="#L83">83</span>
+<span id="L84" rel="#L84">84</span>
+<span id="L85" rel="#L85">85</span>
+<span id="L86" rel="#L86">86</span>
+<span id="L87" rel="#L87">87</span>
+<span id="L88" rel="#L88">88</span>
+<span id="L89" rel="#L89">89</span>
+<span id="L90" rel="#L90">90</span>
+<span id="L91" rel="#L91">91</span>
+<span id="L92" rel="#L92">92</span>
+<span id="L93" rel="#L93">93</span>
+<span id="L94" rel="#L94">94</span>
+<span id="L95" rel="#L95">95</span>
+<span id="L96" rel="#L96">96</span>
+<span id="L97" rel="#L97">97</span>
+<span id="L98" rel="#L98">98</span>
+<span id="L99" rel="#L99">99</span>
+<span id="L100" rel="#L100">100</span>
+<span id="L101" rel="#L101">101</span>
+<span id="L102" rel="#L102">102</span>
+<span id="L103" rel="#L103">103</span>
+<span id="L104" rel="#L104">104</span>
+
+            </td>
+            <td class="blob-line-code">
+                    <div class="code-body highlight"><pre><div class='line' id='LC1'><span class="c">/*! Licensed under MIT, https://github.com/sofish/pen */</span></div><div class='line' id='LC2'><br/></div><div class='line' id='LC3'><span class="c">/* basic reset */</span></div><div class='line' id='LC4'><span class="nc">.pen</span><span class="o">,</span> <span class="nc">.pen-menu</span><span class="o">,</span> <span class="nc">.pen-input</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">textarea</span><span class="p">{</span><span class="k">font</span><span class="o">:</span><span class="m">400</span> <span class="m">1.16em</span><span class="o">/</span><span class="m">1</span><span class="o">.</span><span class="m">45</span> <span class="n">Palatino</span><span class="o">,</span> <span class="n">Optima</span><span class="o">,</span> <span class="n">Georgia</span><span class="o">,</span> <span class="k">serif</span><span class="p">;</span><span class="k">color</span><span class="o">:</span><span class="m">#331</span><span class="p">;}</span></div><div class='line' id='LC5'><span class="nc">.pen</span><span class="nd">:focus</span><span class="p">{</span><span class="k">outline</span><span class="o">:</span><span class="k">none</span><span class="p">;}</span></div><div class='line' id='LC6'><span class="nc">.pen</span> <span class="nt">fieldset</span><span class="o">,</span> <span class="nt">img</span> <span class="p">{</span><span class="k">border</span><span class="o">:</span> <span class="m">0</span><span class="p">;}</span></div><div class='line' id='LC7'><span class="nc">.pen</span> <span class="nt">blockquote</span><span class="p">{</span><span class="k">padding-left</span><span class="o">:</span><span class="m">10px</span><span class="p">;</span><span class="k">margin-left</span><span class="o">:-</span><span class="m">14px</span><span class="p">;</span><span class="k">border-left</span><span class="o">:</span><span class="m">4px</span> <span class="k">solid</span> <span class="m">#1abf89</span><span class="p">;}</span></div><div class='line' id='LC8'><span class="nc">.pen</span> <span class="nt">a</span><span class="p">{</span><span class="k">color</span><span class="o">:</span><span class="m">#1abf89</span><span class="p">;}</span></div><div class='line' id='LC9'><span class="nc">.pen</span> <span class="nt">del</span><span class="p">{</span><span class="k">text-decoration</span><span class="o">:</span><span class="k">line-through</span><span class="p">;}</span></div><div class='line' id='LC10'><span class="nc">.pen</span> <span class="nt">sub</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">sup</span> <span class="p">{</span><span class="k">font-size</span><span class="o">:</span><span class="m">75</span><span class="o">%</span><span class="p">;</span><span class="k">position</span><span class="o">:</span><span class="k">relative</span><span class="p">;</span><span class="k">vertical-align</span><span class="o">:</span><span class="k">text</span><span class="o">-</span><span class="k">top</span><span class="err">\</span><span class="m">9</span><span class="p">;}</span></div><div class='line' id='LC11'><span class="nd">:root</span> <span class="nc">.pen</span> <span class="nt">sub</span><span class="o">,</span> <span class="nd">:root</span> <span class="nc">.pen</span> <span class="nt">sup</span><span class="p">{</span><span class="k">vertical-align</span><span class="o">:</span><span class="k">baseline</span><span class="p">;</span> <span class="c">/* for ie9 and other mordern browsers */</span><span class="p">}</span></div><div class='line' id='LC12'><span class="nc">.pen</span> <span class="nt">sup</span> <span class="p">{</span><span class="k">top</span><span class="o">:-</span><span class="m">0.5em</span><span class="p">;}</span></div><div class='line' id='LC13'><span class="nc">.pen</span> <span class="nt">sub</span> <span class="p">{</span><span class="k">bottom</span><span class="o">:-</span><span class="m">0.25em</span><span class="p">;}</span></div><div class='line' id='LC14'><span class="nc">.pen</span> <span class="nt">hr</span><span class="p">{</span><span class="k">border</span><span class="o">:</span><span class="k">none</span><span class="p">;</span><span class="k">border-bottom</span><span class="o">:</span><span class="m">1px</span> <span class="k">solid</span> <span class="m">#cfcfcf</span><span class="p">;</span><span class="k">margin-bottom</span><span class="o">:</span><span class="m">25px</span><span class="p">;</span><span class="o">*</span><span class="k">color</span><span class="o">:</span><span class="nb">pink</span><span class="p">;</span><span class="o">*</span><span class="n">filter</span><span class="o">:</span><span class="n">chroma</span><span class="p">(</span><span class="k">color</span><span class="o">=</span><span class="nb">pink</span><span class="p">);</span><span class="k">height</span><span class="o">:</span><span class="m">10px</span><span class="p">;</span><span class="o">*</span><span class="k">margin</span><span class="o">:-</span><span class="m">7px</span> <span class="m">0</span> <span class="m">15px</span><span class="p">;}</span></div><div class='line' id='LC15'><span class="nc">.pen</span> <span class="nt">small</span><span class="p">{</span><span class="k">font-size</span><span class="o">:</span><span class="m">0.8em</span><span class="p">;</span><span class="k">color</span><span class="o">:</span><span class="m">#888</span><span class="p">;}</span></div><div class='line' id='LC16'><span class="nc">.pen</span> <span class="nt">em</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">b</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">strong</span><span class="p">{</span><span class="k">font-weight</span><span class="o">:</span><span class="m">700</span><span class="p">;}</span></div><div class='line' id='LC17'><span class="nc">.pen</span> <span class="nt">pre</span><span class="p">{</span><span class="k">white-space</span><span class="o">:</span><span class="n">pre</span><span class="o">-</span><span class="n">wrap</span><span class="p">;</span><span class="k">padding</span><span class="o">:</span><span class="m">0.85em</span><span class="p">;</span><span class="k">background</span><span class="o">:</span><span class="m">#f8f8f8</span><span class="p">;}</span></div><div class='line' id='LC18'><br/></div><div class='line' id='LC19'><span class="c">/* block-level element margin */</span></div><div class='line' id='LC20'><span class="nc">.pen</span> <span class="nt">p</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">pre</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">ul</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">ol</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">dl</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">form</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">table</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">blockquote</span><span class="p">{</span><span class="k">margin-bottom</span><span class="o">:</span><span class="m">16px</span><span class="p">;}</span></div><div class='line' id='LC21'><br/></div><div class='line' id='LC22'><span class="c">/* headers */</span></div><div class='line' id='LC23'><span class="nc">.pen</span> <span class="nt">h1</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">h2</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">h3</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">h4</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">h5</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">h6</span><span class="p">{</span><span class="k">margin-bottom</span><span class="o">:</span><span class="m">16px</span><span class="p">;</span><span class="k">font-weight</span><span class="o">:</span><span class="m">700</span><span class="p">;</span><span class="k">line-height</span><span class="o">:</span><span class="m">1</span><span class="o">.</span><span class="m">2</span><span class="p">;}</span></div><div class='line' id='LC24'><span class="nc">.pen</span> <span class="nt">h1</span><span class="p">{</span><span class="k">font-size</span><span class="o">:</span><span class="m">2em</span><span class="p">;}</span></div><div class='line' id='LC25'><span class="nc">.pen</span> <span class="nt">h2</span><span class="p">{</span><span class="k">font-size</span><span class="o">:</span><span class="m">1.8em</span><span class="p">;}</span></div><div class='line' id='LC26'><span class="nc">.pen</span> <span class="nt">h3</span><span class="p">{</span><span class="k">font-size</span><span class="o">:</span><span class="m">1.6em</span><span class="p">;}</span></div><div class='line' id='LC27'><span class="nc">.pen</span> <span class="nt">h4</span><span class="p">{</span><span class="k">font-size</span><span class="o">:</span><span class="m">1.4em</span><span class="p">;}</span></div><div class='line' id='LC28'><span class="nc">.pen</span> <span class="nt">h5</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">h6</span><span class="p">{</span><span class="k">font-size</span><span class="o">:</span><span class="m">1.2em</span><span class="p">;}</span></div><div class='line' id='LC29'><br/></div><div class='line' id='LC30'><span class="c">/* list */</span></div><div class='line' id='LC31'><span class="nc">.pen</span> <span class="nt">ul</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">ol</span><span class="p">{</span><span class="k">margin-left</span><span class="o">:</span><span class="m">1.2em</span><span class="p">;}</span></div><div class='line' id='LC32'><span class="nc">.pen</span> <span class="nt">ul</span><span class="o">,</span> <span class="nc">.pen-ul</span><span class="p">{</span><span class="k">list-style</span><span class="o">:</span><span class="k">disc</span><span class="p">;}</span></div><div class='line' id='LC33'><span class="nc">.pen</span> <span class="nt">ol</span><span class="o">,</span> <span class="nc">.pen-ol</span><span class="p">{</span><span class="k">list-style</span><span class="o">:</span><span class="k">decimal</span><span class="p">;}</span></div><div class='line' id='LC34'><span class="nc">.pen</span> <span class="nt">li</span> <span class="nt">ul</span><span class="o">,</span> <span class="nc">.pen</span> <span class="nt">li</span> <span class="nt">ol</span><span class="o">,</span> <span class="nc">.pen-ul</span> <span class="nt">ul</span><span class="o">,</span> <span class="nc">.pen-ul</span> <span class="nt">ol</span><span class="o">,</span> <span class="nc">.pen-ol</span> <span class="nt">ul</span><span class="o">,</span> <span class="nc">.pen-ol</span> <span class="nt">ol</span><span class="p">{</span><span class="k">margin</span><span class="o">:</span><span class="m">0</span> <span class="m">2em</span> <span class="m">0</span> <span class="m">1.2em</span><span class="p">;}</span></div><div class='line' id='LC35'><span class="nc">.pen</span> <span class="nt">li</span> <span class="nt">ul</span><span class="o">,</span> <span class="nc">.pen-ul</span> <span class="nt">ul</span><span class="o">,</span> <span class="nc">.pen-ol</span> <span class="nt">ul</span><span class="p">{</span><span class="k">list-style</span><span class="o">:</span> <span class="k">circle</span><span class="p">;}</span></div><div class='line' id='LC36'><br/></div><div class='line' id='LC37'><span class="c">/* pen menu */</span></div><div class='line' id='LC38'><span class="nc">.pen-menu</span><span class="o">,</span> <span class="nc">.pen-input</span><span class="p">{</span><span class="k">font-size</span><span class="o">:</span><span class="m">14px</span><span class="p">;</span><span class="k">line-height</span><span class="o">:</span><span class="m">1</span><span class="p">;}</span></div><div class='line' id='LC39'><span class="nc">.pen-menu</span><span class="p">{</span><span class="k">white-space</span><span class="o">:</span><span class="k">nowrap</span><span class="p">;</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span><span class="m">1px</span> <span class="m">2px</span> <span class="m">3px</span> <span class="m">-2px</span> <span class="m">#222</span><span class="p">;</span><span class="k">background</span><span class="o">:</span><span class="m">#333</span><span class="p">;</span><span class="k">background-image</span><span class="o">:</span><span class="n">linear</span><span class="o">-</span><span class="n">gradient</span><span class="p">(</span><span class="n">to</span> <span class="k">bottom</span><span class="o">,</span> <span class="m">#222</span><span class="o">,</span> <span class="m">#333</span><span class="p">);</span><span class="k">opacity</span><span class="o">:</span><span class="m">0</span><span class="o">.</span><span class="m">9</span><span class="p">;</span><span class="k">position</span><span class="o">:</span><span class="k">fixed</span><span class="p">;</span><span class="k">height</span><span class="o">:</span><span class="m">36px</span><span class="p">;</span><span class="k">border</span><span class="o">:</span><span class="m">1px</span> <span class="k">solid</span> <span class="m">#333</span><span class="p">;</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span><span class="m">3px</span><span class="p">;</span><span class="k">display</span><span class="o">:</span><span class="k">none</span><span class="p">;</span><span class="k">z-index</span><span class="o">:</span><span class="m">1000</span><span class="p">;}</span></div><div class='line' id='LC40'><span class="nc">.pen-menu</span><span class="nd">:after</span> <span class="p">{</span><span class="k">top</span><span class="o">:</span><span class="m">100</span><span class="o">%</span><span class="p">;</span><span class="k">border</span><span class="o">:</span><span class="k">solid</span> <span class="k">transparent</span><span class="p">;</span><span class="k">content</span><span class="o">:</span><span class="s2">&quot; &quot;</span><span class="p">;</span><span class="k">height</span><span class="o">:</span><span class="m">0</span><span class="p">;</span><span class="k">width</span><span class="o">:</span><span class="m">0</span><span class="p">;</span><span class="k">position</span><span class="o">:</span><span class="k">absolute</span><span class="p">;</span><span class="k">pointer</span><span class="o">-</span><span class="n">events</span><span class="o">:</span><span class="k">none</span><span class="p">;}</span></div><div class='line' id='LC41'><span class="nc">.pen-menu</span><span class="nd">:after</span> <span class="p">{</span><span class="k">border-color</span><span class="o">:</span><span class="n">rgba</span><span class="p">(</span><span class="m">51</span><span class="o">,</span> <span class="m">51</span><span class="o">,</span> <span class="m">51</span><span class="o">,</span> <span class="m">0</span><span class="p">);</span><span class="k">border-top-color</span><span class="o">:</span><span class="m">#333</span><span class="p">;</span><span class="k">border-width</span><span class="o">:</span><span class="m">6px</span><span class="p">;</span><span class="k">left</span><span class="o">:</span><span class="m">50</span><span class="o">%</span><span class="p">;</span><span class="k">margin-left</span><span class="o">:-</span><span class="m">6px</span><span class="p">;}</span></div><div class='line' id='LC42'><span class="nc">.pen-icon</span><span class="p">{</span><span class="k">font</span><span class="o">:</span><span class="k">normal</span> <span class="m">900</span> <span class="m">16px</span><span class="o">/</span><span class="m">40px</span> <span class="n">Georgia</span> <span class="k">serif</span><span class="p">;</span><span class="k">min-width</span><span class="o">:</span><span class="m">20px</span><span class="p">;</span><span class="k">display</span><span class="o">:</span><span class="k">inline</span><span class="o">-</span><span class="k">block</span><span class="p">;</span><span class="k">padding</span><span class="o">:</span><span class="m">0</span> <span class="m">10px</span><span class="p">;</span><span class="k">height</span><span class="o">:</span><span class="m">36px</span><span class="p">;</span><span class="k">overflow</span><span class="o">:</span><span class="k">hidden</span><span class="p">;</span><span class="k">color</span><span class="o">:</span><span class="m">#fff</span><span class="p">;</span><span class="k">text-align</span><span class="o">:</span><span class="k">center</span><span class="p">;</span><span class="k">cursor</span><span class="o">:</span><span class="k">pointer</span><span class="p">;</span><span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="n">user</span><span class="o">-</span><span class="n">select</span><span class="o">:</span><span class="k">none</span><span class="p">;</span><span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">user</span><span class="o">-</span><span class="n">select</span><span class="o">:</span><span class="k">none</span><span class="p">;</span><span class="o">-</span><span class="n">ms</span><span class="o">-</span><span class="n">user</span><span class="o">-</span><span class="n">select</span><span class="o">:</span><span class="k">none</span><span class="p">;</span><span class="n">user</span><span class="o">-</span><span class="n">select</span><span class="o">:</span><span class="k">none</span><span class="p">;}</span></div><div class='line' id='LC43'><span class="nc">.pen-icon</span><span class="nd">:first-of-type</span><span class="p">{</span><span class="k">border-top</span><span class="o">-</span><span class="k">left</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span><span class="m">3px</span><span class="p">;</span><span class="k">border-bottom</span><span class="o">-</span><span class="k">left</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span><span class="m">3px</span><span class="p">;}</span></div><div class='line' id='LC44'><span class="nc">.pen-icon</span><span class="nd">:last-of-type</span><span class="p">{</span><span class="k">border-top</span><span class="o">-</span><span class="k">right</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span><span class="m">3px</span><span class="p">;</span><span class="k">border-bottom</span><span class="o">-</span><span class="k">right</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span><span class="m">3px</span><span class="p">;}</span></div><div class='line' id='LC45'><span class="nc">.pen-icon</span><span class="nd">:hover</span><span class="p">{</span><span class="k">background</span><span class="o">:</span><span class="m">#000</span><span class="p">;}</span></div><div class='line' id='LC46'><span class="nc">.pen-icon.active</span><span class="p">{</span><span class="k">color</span><span class="o">:</span><span class="m">#1abf89</span><span class="p">;</span><span class="k">background</span><span class="o">:</span><span class="m">#000</span><span class="p">;</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span><span class="k">inset</span> <span class="m">2px</span> <span class="m">2px</span> <span class="m">4px</span> <span class="m">#000</span><span class="p">;}</span></div><div class='line' id='LC47'><span class="nc">.pen-input</span><span class="p">{</span><span class="k">position</span><span class="o">:</span><span class="k">absolute</span><span class="p">;</span><span class="k">width</span><span class="o">:</span><span class="m">100</span><span class="o">%</span><span class="p">;</span><span class="k">left</span><span class="o">:</span><span class="m">0</span><span class="p">;</span><span class="k">top</span><span class="o">:</span><span class="m">0</span><span class="p">;</span><span class="k">height</span><span class="o">:</span><span class="m">36px</span><span class="p">;</span><span class="k">line-height</span><span class="o">:</span><span class="m">20px</span><span class="p">;</span><span class="k">background</span><span class="o">:</span><span class="m">#333</span><span class="p">;</span><span class="k">color</span><span class="o">:</span><span class="m">#fff</span><span class="p">;</span><span class="k">border</span><span class="o">:</span><span class="k">none</span><span class="p">;</span><span class="k">text-align</span><span class="o">:</span><span class="k">center</span><span class="p">;</span><span class="k">display</span><span class="o">:</span><span class="k">none</span><span class="p">;</span><span class="k">font-family</span><span class="o">:</span><span class="n">arial</span><span class="o">,</span> <span class="k">sans-serif</span><span class="p">;}</span></div><div class='line' id='LC48'><span class="nc">.pen-input</span><span class="nd">:focus</span><span class="p">{</span><span class="k">outline</span><span class="o">:</span><span class="k">none</span><span class="p">;}</span></div><div class='line' id='LC49'><br/></div><div class='line' id='LC50'><span class="nc">.pen-textarea</span><span class="p">{</span><span class="k">display</span><span class="o">:</span><span class="k">block</span><span class="p">;</span><span class="k">background</span><span class="o">:</span><span class="m">#f8f8f8</span><span class="p">;</span><span class="k">padding</span><span class="o">:</span><span class="m">20px</span><span class="p">;}</span></div><div class='line' id='LC51'><span class="nc">.pen</span> <span class="nt">textarea</span><span class="p">{</span><span class="k">font-size</span><span class="o">:</span><span class="m">14px</span><span class="p">;</span><span class="k">border</span><span class="o">:</span><span class="k">none</span><span class="p">;</span><span class="k">background</span><span class="o">:</span><span class="k">none</span><span class="p">;</span><span class="k">width</span><span class="o">:</span><span class="m">100</span><span class="o">%</span><span class="p">;</span><span class="n">_height</span><span class="o">:</span><span class="m">200px</span><span class="p">;</span><span class="k">min-height</span><span class="o">:</span><span class="m">200px</span><span class="p">;</span><span class="n">resize</span><span class="o">:</span><span class="k">none</span><span class="p">;}</span></div><div class='line' id='LC52'><br/></div><div class='line' id='LC53'><span class="k">@font-face</span> <span class="p">{</span></div><div class='line' id='LC54'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="nt">font-family</span><span class="o">:</span> <span class="s1">&#39;pen&#39;</span><span class="o">;</span></div><div class='line' id='LC55'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="nt">src</span><span class="o">:</span> <span class="nt">url</span><span class="o">(</span><span class="s1">&#39;font/fontello.eot?370dad08&#39;</span><span class="o">);</span></div><div class='line' id='LC56'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="nt">src</span><span class="o">:</span> <span class="nt">url</span><span class="o">(</span><span class="s1">&#39;font/fontello.eot?370dad08#iefix&#39;</span><span class="o">)</span> <span class="nt">format</span><span class="o">(</span><span class="s1">&#39;embedded-opentype&#39;</span><span class="o">),</span></div><div class='line' id='LC57'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="nt">url</span><span class="o">(</span><span class="s1">&#39;font/fontello.woff?370dad08&#39;</span><span class="o">)</span> <span class="nt">format</span><span class="o">(</span><span class="s1">&#39;woff&#39;</span><span class="o">),</span></div><div class='line' id='LC58'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="nt">url</span><span class="o">(</span><span class="s1">&#39;font/fontello.ttf?370dad08&#39;</span><span class="o">)</span> <span class="nt">format</span><span class="o">(</span><span class="s1">&#39;truetype&#39;</span><span class="o">),</span></div><div class='line' id='LC59'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="nt">url</span><span class="o">(</span><span class="s1">&#39;font/fontello.svg?370dad08#fontello&#39;</span><span class="o">)</span> <span class="nt">format</span><span class="o">(</span><span class="s1">&#39;svg&#39;</span><span class="o">);</span></div><div class='line' id='LC60'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="nt">font-weight</span><span class="o">:</span> <span class="nt">normal</span><span class="o">;</span></div><div class='line' id='LC61'>&nbsp;&nbsp;&nbsp;&nbsp;<span class="nt">font-style</span><span class="o">:</span> <span class="nt">normal</span><span class="o">;</span></div><div class='line' id='LC62'><span class="p">}</span></div><div class='line' id='LC63'><br/></div><div class='line' id='LC64'><span class="nc">.pen-menu</span> <span class="o">[</span><span class="nt">class</span><span class="o">^=</span><span class="s2">&quot;icon-&quot;</span><span class="o">]</span><span class="nd">:before</span><span class="o">,</span> <span class="nc">.pen-menu</span> <span class="o">[</span><span class="nt">class</span><span class="o">*=</span><span class="s2">&quot; icon-&quot;</span><span class="o">]</span><span class="nd">:before</span> <span class="p">{</span></div><div class='line' id='LC65'>&nbsp;&nbsp;<span class="k">font-family</span><span class="o">:</span> <span class="s2">&quot;pen&quot;</span><span class="p">;</span></div><div class='line' id='LC66'>&nbsp;&nbsp;<span class="k">font-style</span><span class="o">:</span> <span class="k">normal</span><span class="p">;</span></div><div class='line' id='LC67'>&nbsp;&nbsp;<span class="k">font-weight</span><span class="o">:</span> <span class="k">normal</span><span class="p">;</span></div><div class='line' id='LC68'>&nbsp;&nbsp;<span class="k">speak</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span></div><div class='line' id='LC69'>&nbsp;&nbsp;<span class="k">display</span><span class="o">:</span> <span class="k">inline</span><span class="o">-</span><span class="k">block</span><span class="p">;</span></div><div class='line' id='LC70'>&nbsp;&nbsp;<span class="k">text-decoration</span><span class="o">:</span> <span class="k">inherit</span><span class="p">;</span></div><div class='line' id='LC71'>&nbsp;&nbsp;<span class="k">width</span><span class="o">:</span> <span class="m">1em</span><span class="p">;</span></div><div class='line' id='LC72'>&nbsp;&nbsp;<span class="k">margin-right</span><span class="o">:</span> <span class="m">.2em</span><span class="p">;</span></div><div class='line' id='LC73'>&nbsp;&nbsp;<span class="k">text-align</span><span class="o">:</span> <span class="k">center</span><span class="p">;</span></div><div class='line' id='LC74'>&nbsp;&nbsp;<span class="k">font-variant</span><span class="o">:</span> <span class="k">normal</span><span class="p">;</span></div><div class='line' id='LC75'>&nbsp;&nbsp;<span class="k">text-transform</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span></div><div class='line' id='LC76'>&nbsp;&nbsp;<span class="k">line-height</span><span class="o">:</span> <span class="m">1em</span><span class="p">;</span></div><div class='line' id='LC77'>&nbsp;&nbsp;<span class="k">margin-left</span><span class="o">:</span> <span class="m">.2em</span><span class="p">;</span></div><div class='line' id='LC78'><span class="p">}</span></div><div class='line' id='LC79'>&nbsp;</div><div class='line' id='LC80'><span class="nc">.pen-menu</span> <span class="nc">.icon-location</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e815&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC81'><span class="nc">.pen-menu</span> <span class="nc">.icon-fit</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e80f&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC82'><span class="nc">.pen-menu</span> <span class="nc">.icon-bold</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e805&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC83'><span class="nc">.pen-menu</span> <span class="nc">.icon-italic</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e806&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC84'><span class="nc">.pen-menu</span> <span class="nc">.icon-justifyleft</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e80a&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC85'><span class="nc">.pen-menu</span> <span class="nc">.icon-justifycenter</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e80b&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC86'><span class="nc">.pen-menu</span> <span class="nc">.icon-justifyright</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e80c&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC87'><span class="nc">.pen-menu</span> <span class="nc">.icon-justifyfull</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e80d&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC88'><span class="nc">.pen-menu</span> <span class="nc">.icon-outdent</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e800&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC89'><span class="nc">.pen-menu</span> <span class="nc">.icon-indent</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e801&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC90'><span class="nc">.pen-menu</span> <span class="nc">.icon-mode</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e813&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC91'><span class="nc">.pen-menu</span> <span class="nc">.icon-fullscreen</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e80e&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC92'><span class="nc">.pen-menu</span> <span class="nc">.icon-insertunorderedlist</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e802&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC93'><span class="nc">.pen-menu</span> <span class="nc">.icon-insertorderedlist</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e803&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC94'><span class="nc">.pen-menu</span> <span class="nc">.icon-strikethrough</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e807&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC95'><span class="nc">.pen-menu</span> <span class="nc">.icon-underline</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e804&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC96'><span class="nc">.pen-menu</span> <span class="nc">.icon-blockquote</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e814&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC97'><span class="nc">.pen-menu</span> <span class="nc">.icon-undo</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e817&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC98'><span class="nc">.pen-menu</span> <span class="nc">.icon-pre</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e816&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC99'><span class="nc">.pen-menu</span> <span class="nc">.icon-unlink</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e811&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC100'><span class="nc">.pen-menu</span> <span class="nc">.icon-superscript</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e808&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC101'><span class="nc">.pen-menu</span> <span class="nc">.icon-subscript</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e809&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC102'><span class="nc">.pen-menu</span> <span class="nc">.icon-inserthorizontalrule</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e818&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC103'><span class="nc">.pen-menu</span> <span class="nc">.icon-pin</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e812&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div><div class='line' id='LC104'><span class="nc">.pen-menu</span> <span class="nc">.icon-createlink</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s1">&#39;\e810&#39;</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* &#39;&#39; */</span></div></pre></div>
+            </td>
+          </tr>
+        </table>
+  </div>
+
+  </div>
+</div>
+
+<a href="#jump-to-line" rel="facebox[.linejump]" data-hotkey="l" class="js-jump-to-line" style="display:none">Jump to Line</a>
+<div id="jump-to-line" style="display:none">
+  <form accept-charset="UTF-8" class="js-jump-to-line-form">
+    <input class="linejump-input js-jump-to-line-field" type="text" placeholder="Jump to line&hellip;" autofocus>
+    <button type="submit" class="button">Go</button>
+  </form>
+</div>
+
+        </div>
+
+      </div><!-- /.repo-container -->
+      <div class="modal-backdrop"></div>
+    </div><!-- /.container -->
+  </div><!-- /.site -->
+
+
+    </div><!-- /.wrapper -->
+
+      <div class="container">
+  <div class="site-footer">
+    <ul class="site-footer-links right">
+      <li><a href="https://status.github.com/">Status</a></li>
+      <li><a href="http://developer.github.com">API</a></li>
+      <li><a href="http://training.github.com">Training</a></li>
+      <li><a href="http://shop.github.com">Shop</a></li>
+      <li><a href="/blog">Blog</a></li>
+      <li><a href="/about">About</a></li>
+
+    </ul>
+
+    <a href="/">
+      <span class="mega-octicon octicon-mark-github" title="GitHub"></span>
+    </a>
+
+    <ul class="site-footer-links">
+      <li>&copy; 2014 <span title="0.02269s from github-fe128-cp1-prd.iad.github.net">GitHub</span>, Inc.</li>
+        <li><a href="/site/terms">Terms</a></li>
+        <li><a href="/site/privacy">Privacy</a></li>
+        <li><a href="/security">Security</a></li>
+        <li><a href="/contact">Contact</a></li>
+    </ul>
+  </div><!-- /.site-footer -->
+</div><!-- /.container -->
+
+
+    <div class="fullscreen-overlay js-fullscreen-overlay" id="fullscreen_overlay">
+  <div class="fullscreen-container js-fullscreen-container">
+    <div class="textarea-wrap">
+      <textarea name="fullscreen-contents" id="fullscreen-contents" class="js-fullscreen-contents" placeholder="" data-suggester="fullscreen_suggester"></textarea>
+          <div class="suggester-container">
+              <div class="suggester fullscreen-suggester js-navigation-container" id="fullscreen_suggester"
+                 data-url="/sofish/pen/suggestions/commit">
+              </div>
+          </div>
+    </div>
+  </div>
+  <div class="fullscreen-sidebar">
+    <a href="#" class="exit-fullscreen js-exit-fullscreen tooltipped leftwards" title="Exit Zen Mode">
+      <span class="mega-octicon octicon-screen-normal"></span>
+    </a>
+    <a href="#" class="theme-switcher js-theme-switcher tooltipped leftwards"
+      title="Switch themes">
+      <span class="octicon octicon-color-mode"></span>
+    </a>
+  </div>
+</div>
+
+
+
+    <div id="ajax-error-message" class="flash flash-error">
+      <span class="octicon octicon-alert"></span>
+      <a href="#" class="octicon octicon-remove-close close js-ajax-error-dismiss"></a>
+      Something went wrong with that request. Please try again.
+    </div>
+
+  </body>
+</html>
+