rhalff/.gitignore

## .gitignore
node_modules

# folders used for testing
css
img
images
test

## readme.md

      
    Raw
  

              readme.md
            
          
    quick experiment on datauris / mhtml images embedding.
ressources


http://www.nczonline.net/blog/2009/10/27/data-uris-explained/


http://www.nczonline.net/blog/2009/11/03/automatic-data-uri-embedding-in-css-files/


http://nimbupani.com/using-data-uris-in-css.html


http://www.phpied.com/data-urls-what-are-they-and-how-to-use/


http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/


http://www.phpied.com/data-uris-mhtml-ie7-win7-vista-blues/


http://www.phpied.com/inline-mhtml-data-uris/


http://www.stevesouders.com/blog/2009/11/16/cssembed-automatically-data-uri-ize/


http://msdn.microsoft.com/en-us/library/ms526265(v=exchg.10).aspx


http://documentcloud.github.com/jammit/#embedding


recommandation from documentcloud/jammit:

It's not recommended to embed all of your site's images, just the ones that conform to the following three rules:


Images that are small. Large images will simply delay the rendering of your CSS. Jammit won't embed images larger than 32 kilobytes, because Internet Explorer 8 won't render them.
Images that are immediately visible. It's better to leave the images that are hidden at page load time to download in the background.
Images that are referenced by a single CSS rule. Referencing the same embedded image in multiple rules will cause that image's contents to be embedded more than once, defeating the purpose. Replace the duplicated rules with an image-specific HTML class, and you're good to go.


plan


only images that are small < 32kilobytes
dealing with IE < 8: use of mhtml

use of datauris for modern browser, use of mhtml for IE < 8
with a build script, using stoyan's snippet
#myid {
  /* normal browsers */
  background-image: url("data:image/png;base64,iVBORw0[...snip...]");
  /* IE < 8 targeted with the star hack */
  *background-image: url(mhtml:http://phpied.com/mhtml.css!somestring);
}

or with <html /> conditional comments
.mystuff {
  /* normal browsers */
  background-image: url("data:image/png;base64,iVBORw0[...snip...]");
}

.ie6 .mystuff, .ie7 .mystuff {
  /* IE < 8 */
  background-image: url(mhtml:http://phpied.com/mhtml.css!somestring);
}

mhtml: have to use absolute urls.. http://msdn.microsoft.com/en-us/library/ms526265(v=exchg.10).aspx

Content-Base gives an absolute URL base, or "starting point",for relative URLs that appear in other MIME headers and in HTML documents that do not contain any BASE HTML elements. Content-Location specifies the URL that corresponds to the content of the body part that contains this header.

drawbacks


inlining image content twice
overall css size increase

to avoid double size increase, probably the best way to use both
datauris/mhtml would be to rely on something like this:
<!--[if (!IE)|(gte IE 8)]><!-->
  <link href="assets/silk-datauri.css" media="screen" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!--[if lte IE 7]>
  <link href="assets/silk-mhtml.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->

thus producing two version of the css files.

  
## datauri.js
#!/usr/bin/env node

var fs = require('fs'),
  path = require('path'),
  mime = require('mime');

// Monolithic script, first try and experiment at trying
// to automate the embedding of images in CSS files.
//
// Have to work with both data URI and mhtml for IE < 8
//

// ## usage
//
//    ./datauri file1.css file2.css file3.css
//    ./datauri css/*.css
//
// images references gets replaced by their base64 equivalent:
//
// * datauris: for FF, Safari, O, Chrome, IE < 8
// * mhtml: for IE < 8
//
// ideally, rely on `.ie6` and `.ie7` html css class placeholder.
//
// Path in css are declared relatively, this script will lookup them
// based on the css file path.
//
// Should only inline imgs < 32 kilobytes

var files = process.argv.slice(2);

// This is non-sense, but mhtml have to use absolute path to the css fliles
var config = {
  host: 'http://example.com'
};


// first iterate over css files, get hash obj with filepath/content
var css = files.map(function(file) {
  return {
    file: path.resolve(file),
    content: fs.readFileSync(path.resolve(file), 'utf8')
  };
});

// first iteration, this time we'll generate mhtml equivalent
// and try to automatically add rules for `.ie6`, `.ie7` placeholder
css.forEach(function(it) {

  // only work with single line declaration, eg.
  //
  //    #book_go { background: url(../images/embed/book_go.png); }
  //
  it.content = it.content.replace(/(.+)\{(.+url\(.+\).+)\}/gm, function(w, selector, block) {

    var ieholder = [
      '.ie6 :selector, .ie7 :selector {'.replace(/:selector/g, selector.trim()),
      block.replace(/url\((.+)\)/, function(w, url) {
        // first pass, simply putting a marker, this is non valid
        // mhtml syntax. Will be replaced properly on next step
        return 'mhtml(' + url + ')';
      }),
      '}',
      ''
    ].join('\n');

    return w + '\n' + ieholder;
  });

});

// then, iterate over styles and replace inline references,
// also builds up the mhtml front comments.
css.forEach(function(it) {
  var file = it.file,
    shortpath = it.file.replace(process.cwd(), ''),
    boundary = 'fooooobar',
    mhtml = ['Content-Type: multipart/related; boudary="' + boundary + '"\n\n'];

  // deal with datauris, replace inline url() by their base64 equivalent
  it.content = it.content.replace(/url\((.+)\)/g, function(w, url) {
    var cssfold = file.split('/').slice(0, -1).join('/'),
      imgpath = path.resolve(cssfold, url),
      base64 = toBase64(imgpath),
      mhtmlPart = [
        '--' + boundary,
        'Content-Location:' + url.split('/').slice(-1).join('/'),
        'Content-Transfer-Encoding:base64',
        '',
        base64,
        ''
      ].join('\n');

    mhtml.push(mhtmlPart);

    return 'url(data:{mediatype};base64,{base64})'
      .replace('{mediatype}', mime.lookup(imgpath))
      .replace('{base64}', base64);
  });

  mhtml.push('--' + boundary + '--');

  it.content = '/* \n' + mhtml.join('\n') + '\n*/\n\n'  + it.content;

  // now replace inline mhtlm() reference
  it.content = it.content.replace(/mhtml\((.+)\)/g, function(w, url){
    return getMHTML(shortpath, url.split('/').slice(-1).join('/'));
  });
});

// write files, they're generated along the css files parsed,
// with a `-datauri.css` suffix.
css.forEach(function(item) {
  var file = item.file.replace(/\.css$/, '-datauri.css');
  console.log(' >> Generate ', file);
  fs.writeFileSync(file, item.content);
});

// ## function helper
// todo: move in helper module

function toBase64(path) {
  return fs.readFileSync(path, 'base64');
}

function getMHTML(shortpath, ref) {
  return 'url(mhtml:$host!$ref)'
    .replace('$host', config.host + shortpath.replace(/\.css$/, '-datauri.css'))
    .replace('$ref', ref);
}

## example-datauri.css
/*
Content-Type: multipart/related; boudary="fooooobar"


--fooooobar
Content-Location:accept.png
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAKfSURBVDjLpZPrS1NhHMf9O3bOdmwDCWREIYKEUHsVJBI7mg3FvCxL09290jZj2EyLMnJexkgpLbPUanNOberU5taUMnHZUULMvelCtWF0sW/n7MVMEiN64AsPD8/n83uucQDi/id/DBT4Dolypw/qsz0pTMbj/WHpiDgsdSUyUmeiPt2+V7SrIM+bSss8ySGdR4abQQv6lrui6VxsRonrGCS9VEjSQ9E7CtiqdOZ4UuTqnBHO1X7YXl6Daa4yGq7vWO1D40wVDtj4kWQbn94myPGkCDPdSesczE2sCZShwl8CzcwZ6NiUs6n2nYX99T1cnKqA2EKui6+TwphA5k4yqMayopU5mANV3lNQTBdCMVUA9VQh3GuDMHiVcLCS3J4jSLhCGmKCjBEx0xlshjXYhApfMZRP5CyYD+UkG08+xt+4wLVQZA1tzxthm2tEfD3JxARH7QkbD1ZuozaggdZbxK5kAIsf5qGaKMTY2lAU/rH5HW3PLsEwUYy+YCcERmIjJpDcpzb6l7th9KtQ69fi09ePUej9l7cx2DJbD7UrG3r3afQHOyCo+V3QQzE35pvQvnAZukk5zL5qRL59jsKbPzdheXoBZc4saFhBS6AO7V4zqCpiawuptwQG+UAa7Ct3UT0hh9p9EnXT5Vh6t4C22QaUDh6HwnECOmcO7K+6kW49DKqS2DrEZCtfuI+9GrNHg4fMHVSO5kE7nAPVkAxKBxcOzsajpS4Yh4ohUPPWKTUh3PaQEptIOr6BiJjcZXCwktaAGfrRIpwblqOV3YKdhfXOIvBLeREWpnd8ynsaSJoyESFphwTtfjN6X1jRO2+FxWtCWksqBApeiFIR9K6fiTpPiigDoadqCEag5YUFKl6Yrciw0VOlhOivv/Ff8wtn0KzlebrUYwAAAABJRU5ErkJggg==

--fooooobar
Content-Location:add.png
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJvSURBVDjLpZPrS5NhGIf9W7YvBYOkhlkoqCklWChv2WyKik7blnNris72bi6dus0DLZ0TDxW1odtopDs4D8MDZuLU0kXq61CijSIIasOvv94VTUfLiB74fXngup7nvrnvJABJ/5PfLnTTdcwOj4RsdYmo5glBWP6iOtzwvIKSWstI0Wgx80SBblpKtE9KQs/We7EaWoT/8wbWP61gMmCH0lMDvokT4j25TiQU/ITFkek9Ow6+7WH2gwsmahCPdwyw75uw9HEO2gUZSkfyI9zBPCJOoJ2SMmg46N61YO/rNoa39Xi41oFuXysMfh36/Fp0b7bAfWAH6RGi0HglWNCbzYgJaFjRv6zGuy+b9It96N3SQvNKiV9HvSaDfFEIxXItnPs23BzJQd6DDEVM0OKsoVwBG/1VMzpXVWhbkUM2K4oJBDYuGmbKIJ0qxsAbHfRLzbjcnUbFBIpx/qH3vQv9b3U03IQ/HfFkERTzfFj8w8jSpR7GBE123uFEYAzaDRIqX/2JAtJbDat/COkd7CNBva2cMvq0MGxp0PRSCPF8BXjWG3FgNHc9XPT71Ojy3sMFdfJRCeKxEsVtKwFHwALZfCUk3tIfNR8XiJwc1LmL4dg141JPKtj3WUdNFJqLGFVPC4OkR4BxajTWsChY64wmCnMxsWPCHcutKBxMVp5mxA1S+aMComToaqTRUQknLTH62kHOVEE+VQnjahscNCy0cMBWsSI0TCQcZc5ALkEYckL5A5noWSBhfm2AecMAjbcRWV0pUTh0HE64TNf0mczcnnQyu/MilaFJCae1nw2fbz1DnVOxyGTlKeZft/Ff8x1BRssfACjTwQAAAABJRU5ErkJggg==

--fooooobar
Content-Location:anchor.png
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGdSURBVDjLpVMxa8JAFL6rAQUHXQoZpLU/oUOnDtKtW/MDBFHHThUKTgrqICgOEtd2EVxb2qFkKTgVChbSCnZTiVBEMBRLiEmafleCDaWxDX3w8e7dve+7l3cv1LZt8h/jvA56vV7DNM20YRgE/jyRSOR+ytvwEgAxvVwui/BF+LTvCtjNwKvj/X8CbgXPOHMEZl559HsTu93uPQi7jBiNRgMEx8PR0GIxRB+y2eze2gqQeAXoSCaqqu5bpsWIdyzGvvRrBW7rdDo2I6ZSKeq7B8x0XV/bwJWAJEnHSMwBDUEQWq5GfsJthUJhlVuv11uckyiGgiH2RWK73RYRb2cymbG7gnK5vIX9USwWI1yAI/KjLGK7teEI8HN1TizrnZWdRxxsNps8vI3YLpVKbB2EWB6XkMHzgAlvriYRSW+app1Mpy/jSCRSRSyDUON5nuJGytaAHI/vVPv9p/FischivL96gEP2bGxorhVFqYXDYQFCScwBYa9EKU1OlAkB+QLEU2AGaJ7PWKlUDiF2BBw4P9Mt/KUoije+5uAv9gGcjD6Kg4wu3AAAAABJRU5ErkJggg==

--fooooobar
Content-Location:application.png
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAFiSURBVBgZpcEhbpRRGIXh99x7IU0asGBJWEIdCLaAqcFiCArFCkjA0KRJF0EF26kkFbVVdEj6/985zJ0wBjfp8ygJD6G3n358fP3m5NvtJscJYBObchEHx6QKJ6SKsnn6eLm7urr5/PP76cU4eXVy/ujouD074hDHd5s6By7GZknb3P7mUH+WNLZGKnx595JDvf96zTQSM92vRYA4lMEEO5RNraHWUDH3FV48f0K5mAYJk5pQQpqIgixaE1JDKtRDd2OsYfJaTKNcTA2IBIIesMAOPdDUGYJSqGYml5lGHHYkSGhAJBBIkAoWREAT3Z3JLqZhF3uS2EloQCQ8xLBxoAEWO7aZxros7EgISIIkwlZCY6s1OlAJTWFal5VppMzUgbAlQcIkiT0DXSI2U2ymYZs9AWJL4n+df3pncsI0bn5dX344W05dhctUFbapZcE2ToiLVHBMbGymS7aUhIdoPNBf7Jjw/gQ77u4AAAAASUVORK5CYII=

--fooooobar
Content-Location:application_add.png
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAH9SURBVDjLpZM9aFRREIW/ue9FF2IULDQuaYIGtTBRWGFJAgqSUsEmjZVgo4mFWBiwVVjBHwjGwsbCShExIAghoEUMARGNGFJYhIC7isXGRbORvJ0Zi/dWY5fFCwOnuHz3nDsz4u78z5HTlx6NDB4v3KjWvd0dMMPNUFPcHHPDVTF3XBU1Y/uWZHVxsXzl6e3hibgwUBhvy7WH3bmWHm5fres4MBHXEw/16s+Wra8lHgBiV+f6mX0tA86VlkkBbgCsNxQH3Bw1MBwzR83Qhqflxro63Z0dqGkKIOuCBEHc8SC4OGJCCIJIQESRyIksEDfS+9bIAE1SAFwEBCIHEzBzIocgEbGAiqMhdWxqWQTL5kAE3P8BiYCrYwIuQBAii1JAM0JTpAxJxQaQxUJsxvTbSV7NP6e2ukLSSFjT/cBJ4kaS/HEggLsjIvgG0Is3T3hfnuLYwFG6dvbwcuEZcx+nKY7mbwbPskSAZC4k00GEIMLk64ccPtCHBqVvzxAqCcVD/QAjwcz+Rsg+M4gQbahv37/QJts4dfAiAJdP3Gfvrl6AXFxeWn58/k4ybKqYGqqKmaFJgplh7lRrKyxUZpmvzDA29IDS1Fly0VaAX7KZbSyO5q91de+42t87SE/nET59fcfshxk+L9VuyWbXuTiaLwEXgA7gB3Bv7m5l7Dd8kw6XoJxL0wAAAABJRU5ErkJggg==

--fooooobar
Content-Location:application_cascade.png
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGeSURBVDjLjZLdKwRRGIf3X1wXuNAikiKfWXaVLO1SIjYlG9LYaGKxNSXWx1rnwoUo+Zhdu2vkRsp32ePCvH5nYoaGNaeemjkz5/ee85zX5W6VS4bjuc3uhSzzz4NohnlnT1nHzAlrnz5mbZEj1jJ5yHwRxsS/ROT6jiu4lEuF12+YE5pHd1O2AFHZKXVDSWYL8EcvxKQjaga27AG+ubTxUUllMlOJq9fB1Us+sAJieR5azPJ+Oc0DC2e8N3rCmyYOOFxocOGxAiTVCBhTtMJ08pYXY1i55nChwUXeDGgM7xsBovJ/dErnHC40uNDMAGynr35kj3VJKn98eQOcPzwLCib3gqcCf3l9e8QiDS6sgK8HuBCTWnxHvRtT8joqEfqC0BeEYxJ6g9AXhL4g9AXBBaF4gxUgqUZAKJYjnNMRcPFuBsCFESAqOwUurPvEdsbhQkNfkNMBFz+b4tPFnwt0gS7Qjfeq4MYvARBWbHyFiOEJrNkD4MLxEdxtsj0ALmS4MATVDm5TdTBBlf3rVNGjUHl3nMp8y1TqjYkrFMgf+hUje+AiV2IAAAAASUVORK5CYII=

--fooooobar
Content-Location:application_delete.png
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAH0SURBVBgZpcFPaM9xHMfx5/vz/Ywfv6ZwGC1mtRsXtRvFQSmlKK3JkRJymAul5EJcrFZrcnO0QpELDgrlKJcd5M9PtpHawew39v2+3y/7rlZuLI+HSeJ/2OGhO2d27+2/PtNWUwIiUAQejkKEArkTEnLHI1i3qpybmJg8f+/GwGju39U/0tFopq4GK9Gca/sIMJrbpVJ75gcrNV8qsSjLxZVjfazUiWstalkKaguVI0AhPCAQEcIj8Ep4JVzBgoveTZ14OLWMRM2SYRJKhkxYGCkZZgkzxwpRRCJXohaVU8seTi0BMgODQhAGEaIQJCvIBm7CU1ALD2pZIZaYgUQCZAYGZiAXYSADklFEQS3CqeUIZ5mZsUQiATIjspEjmHp4k+mHY7Q/vaWjq5sdq/cAB8lVWbLEDAMkYWaIRRIJmH50i9lX4+w8cpzVvduZf/OYNc+f8mRfx9kkD2oFYICZYYAByYxkRuvuMH17DtF49wy7fZS17+/T27MBmYZyRLDMAGORGX9amGrR2NQLB86xLF/eTBG2LU9+aI2fGi4Hwp3wwN2JCLwsiQhCYqCxnvbrRzQfnObX/BfawOz3Ai+YMkn8zYvB7surOpsXt2ysck6fmf1W8fFr4eVPXTJJ/IuXg1svzM1MnSzcerzQpGBs/+Pq6m9gRhRi/EsJnAAAAABJRU5ErkJggg==

--fooooobar
Content-Location:arrow_in.png
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHqSURBVDjL3ZHbThpRFIZ5i3kcLRYPqIgUGcDhNKBAqyKCobTR2NhiKmCstcWmBmtLPaCO4CQ6SBWVKInx0N70KbjhCf7O3ia0ZS686F0vVrL3Xvv7VvIvFQBVuOITQxfe6tj5IEPu9xW/ZxGcu2aJnAksxW9eYP42hmB5oBY48zAjJ240QoP7HH3j8xYhWgwiUgiAyxpFlTxZmL2ewvrPNBJX0wid+TF0zCsEHtEKGcbT4igWK0k8OwzBumGo0uZoeUCYuZzE0vUcVn6k8OSbUyFwyfDbSgKvShOIFsZgWTfU2K96pv5huOSm8KfvS/AXHAqBQ2CxcJFAsjwDe5YFgWkGdzCPoSMXHhed8BXs8B7YFALbVh/6Nx+RyWAzevR91qEu+Jf6XwRuecdkTSRp27YcVtaoCLE33Qn9sha6D+3oSrVB+07zO0RXzsx4chxmT18ifhqjSTcKej5qMbkfRVQM12EqILA8uRaRgnguhRE7mqJrahR0y5MjYgi+TTfsq1a0vVELVODYMVUJ/Lo0jZG8768d/1md71uhS2nBZxwYzwXRn2bxMNksqLgtoxgQ/RjOe2HK9FCrYaVLIehY1KB9oYVpnVfXnKscrMsmqBNNEm2a13ol05c7+L7SzD1gWpLNVXW8SST3X7gvtJUuvnAlAAAAAElFTkSuQmCC

--fooooobar
Content-Location:arrow_inout.png
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAG5SURBVBgZpcG7b41xAMfhz/v2SJ1qI2nVedXtD0ClsdpIdDARBlKRaEIMLP4OCZNYJGIQl0EQiYnJytSRRA8nLnGrSy+/z1dHObH1eapLL86FVUlIQgyX91+v+I+zT2aiQcUSVGpWdQa3sL29kxhMmovPZ0Ofs09momkQOu2GzlAHi9RJSEJnsGFrewct1vU09LOIxd6m9jhbh7cxULVQqWPo/X7Pm4U3DFcb2L1xkij9imFq8z5GWiN0v3d5/fk1pUhtQimlefezy2CrTZUKS+hnkQTWt4bofuuiNhapknDh2ZnEoEElhmvTNyv+cere8ahosIjKnZkHVZWEtahZo5o1qlmjFqtmH52MBouoaLh17G7FP47cOJwYLKJB5fH5p1U9++hkLDYDGWDX2B4mx6ewSD9LmJzYy66J3ahomumrB1NbRNMbWz/Ot99fWV5ZwiL9VBbLEl9+fWHT8DhV6KnUFmmGJhgdHOXH4gKv3r9EpZ9F5ubnWFpeobOxw+jwGDG0ivJn+Q/zi/N8XPhAKTZqjz4aiovN/Ke3PUshBhOqE7ePRsUiGlTun35Y8R+HrhxIDCbEkIS/gKBKja+GF3wAAAAASUVORK5CYII=

--fooooobar
Content-Location:arrow_join.png
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAIESURBVDjLpVLPS9NxGH7mjw3cZmvGclsFxcwQpFsQCRLBvIZJEC7LkyVdO5gnDx0i2qk/IAipyA5GBYoQkX0rWIaxTYvad9E85IbVcd/P834+HcZWKZtRz/V9n4f3eZ7XZYzB/6Cp0XB8/tzrsSeJxX8SuDg3stzZFj7S6Y0cO//g9Nt6e67NFi4tjLpFJBNuC8e6OrqhjUZ6LQ173f5AJb0zo4+chheQ8phK9pACGoKa8Lq9oMN9dPhw2wuqGLk/ZI53n4A2GtaKhdKP0tHZsblXm/da6nmjkrIjyqONoPS9VJ69sJVcN8Qz0yf7fG6fRxsN0QKfx++JJ/v7tg0xce9UTJRMkjx7KNrTHNoZgmii8HUNS5kloZLbJK9aU6mPWwQSdweHSJnev+uAO9IRgYZB8VsRIkRgRxDUCp/yOaQzGUcow2+uv5upCQzfGWwmud6793Cw3dcOUiFrryBfyM+LEkR2R+NdsRgMXCgW1/Fi0doQSih98700VQJjtAWtQb/XDwqxaq8i/yWfXLj8fODpFWsgZ+eSmWwWoolAMIBWtztISrQWolIEFaGk0rtdyEMpTlR9KsWJXM6GGAG1QJRAKL9aoEMop0KmEE7ZwbPJl7WPS11bdpyyArVA6wpZRP8ZYvxGv6EiqAQkYU2lXL/X1TN+0FSJWjRytz67Gn7i3+In2xhLsvVnPqcAAAAASUVORK5CYII=

--fooooobar
Content-Location:arrow_left.png
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADrSURBVDjLY/z//z8DJYCJgUIwyAwoPZHJBsS7STGABY1/9e+fvzKkGMAIiwWgzRfF2ST0/vz5w/Dw/UOGXz9/M/z6AcK/GH4CMZj+jmCD5C70X2VkgWo+KcYqrqfArcTw598fBhluOTD9++9fIP7N8PsfEP/9AxUD0b8ZVq9ci/AC0Nm//zD+Yfj19xdY0R+got9gxb8RNNQAkNyf/0CxX39QvZC5M+68MJuIAQczJ8PDlw8ZXr9/g9XZIK+BNP/5/Yfh/sJHjIzIKTF2VchNoEI5oAbHDWk7TpAcjUDNukDNB4nVjOKFEZwXAOOhu7x6WtPJAAAAAElFTkSuQmCC

--fooooobar
Content-Location:arrow_merge.png
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAF2SURBVDjLlZLNK4RhFMXPaMzU+EhJLyUKjYUSykeRsRCWUnbKzpTd8AfYWGPNRtnJQorNbMdsJ8xiForYSFNKM2Pe9zn3PhYoTfN56m5uPef+7n2Oz1qLctq5jSZUtPlo/mQaVdRUrhlLbKWcgDPrBJ2p7fjmXTUD33+C3dtoQFUfnGB3eKB9CGoVmWwGrx8vj0IZOV0796oSCOWKlD4RgehvkaDHXuPxuibBn6I3G3auPwKringmjrP1C1+lFfzlmjQ/01UF9IiGj2g8QkRASzhtDlaPV2INGhjQEjk3h872LhjXrC0fLsQaIqAQ2UIWbaFWjA9PzPV09hxE9mfs7N6krZsg/5XH88cT/EE/woNhLEaWYEpuUt7AJYwIMulHfL7lUSy4MDQQS9Cw9i8Yz0BUMDE6hkQyifv0/Tt86CAlINT6DKhEqCUE1ytCRPtTB+li3TkwLkFLqCqMISo9rkLwkwOxWjNIFZJIXF5eQSjQkp1L9Q34mO6FTUohDAAAAABJRU5ErkJggg==

--fooooobar
Content-Location:book_key.png
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAKdSURBVDjLbZNNTFxVFMd/781jICiCCFoSC5YgGGAQG/E7EhckJFqMe5suNI27Ji7r3qXbLk2rSRuFhU1asESgxvoRm5qQoIAikECMdcIMAzO8++6957h4MyjKSW5OcnPv7/z/554bqCoTFz4eUNXPFQooLymKKqBKmvRwibdYs7t++8oH3QAR6YHzCk/l+juD+3/tolq7BClMUIHibpkDo4hGp6hGCoBXc/0ng9eGTtLZkUNTAqKSVpW0entLI40NES+/+R5HAKg+nBvoYvrubxQKFVQEAKmpUEVFKZYqxCbh31G1QBBlI54c7KLnsVa8B1VBRPFe8SI4UQ5iy2eTC8cBFO+FzfslsmEdcRxjTYKTdN+RIarL0vZAPaJ6DAAQLzhvMcbw1nM9qfxUHarK5flfeOJgkovPrjJZKfxfgfWCtw7nQz5d+BljHc4r3gmOgCE3zzODJZr73+fEIx9x78Pe8dMXV2cOAc4JibUkAhrWE9TVQahIIPTG84z1rNLcN0Z5c5rWR/vIdJqp6Qvd79aaiHUeFzuM9TgvWC/VrHSGv9KSex1fWaKh7XFiv0XH6HCjKxcu/aPAC9ZYjPWpHa8kVcifrhVb2CDM5AnCMtmH8hBX2P/DZI5YsEkKcKIkTmhz64w/+CVNTYq4bUIpQtiE2oTlayvx0krpfFQbmMR5nHEYK1gR+twPjETf8PQrY2hyi8DvsXjzgKRQJBDL1kbp7bNX16cOe+C94hOfWhDhheafGB49Q5K/RBQ1sziXMLv3Bl9vRuTX7mzdu/3t1JFnJAwZeX4IDQK8V7JkCTLbZOrbWby1z1flCXbaX8Ss3aVYcXP/nYPZmRvfv5P+vOr8n7CY/B1KO4ZPlvtZtQHKd6Bc//3HL87VAH8DX5rXmGdCnY8AAAAASUVORK5CYII=

--fooooobar--
*/


/* parts of jammit's example: http://jashkenas.s3.amazonaws.com/misc/jammit_example/jammit.html */

/*
 * To grab icons set:
 *
 *    wget wget http://www.famfamfam.com/lab/icons/silk/famfamfam_silk_icons_v013.zip
 *    unzip famfamfam_silk_icons_v013.zip -d images/
 *
 */

div{display:block;float:left;width:16px;height:16px;margin:10px;}

#accept { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAKfSURBVDjLpZPrS1NhHMf9O3bOdmwDCWREIYKEUHsVJBI7mg3FvCxL09290jZj2EyLMnJexkgpLbPUanNOberU5taUMnHZUULMvelCtWF0sW/n7MVMEiN64AsPD8/n83uucQDi/id/DBT4Dolypw/qsz0pTMbj/WHpiDgsdSUyUmeiPt2+V7SrIM+bSss8ySGdR4abQQv6lrui6VxsRonrGCS9VEjSQ9E7CtiqdOZ4UuTqnBHO1X7YXl6Daa4yGq7vWO1D40wVDtj4kWQbn94myPGkCDPdSesczE2sCZShwl8CzcwZ6NiUs6n2nYX99T1cnKqA2EKui6+TwphA5k4yqMayopU5mANV3lNQTBdCMVUA9VQh3GuDMHiVcLCS3J4jSLhCGmKCjBEx0xlshjXYhApfMZRP5CyYD+UkG08+xt+4wLVQZA1tzxthm2tEfD3JxARH7QkbD1ZuozaggdZbxK5kAIsf5qGaKMTY2lAU/rH5HW3PLsEwUYy+YCcERmIjJpDcpzb6l7th9KtQ69fi09ePUej9l7cx2DJbD7UrG3r3afQHOyCo+V3QQzE35pvQvnAZukk5zL5qRL59jsKbPzdheXoBZc4saFhBS6AO7V4zqCpiawuptwQG+UAa7Ct3UT0hh9p9EnXT5Vh6t4C22QaUDh6HwnECOmcO7K+6kW49DKqS2DrEZCtfuI+9GrNHg4fMHVSO5kE7nAPVkAxKBxcOzsajpS4Yh4ohUPPWKTUh3PaQEptIOr6BiJjcZXCwktaAGfrRIpwblqOV3YKdhfXOIvBLeREWpnd8ynsaSJoyESFphwTtfjN6X1jRO2+FxWtCWksqBApeiFIR9K6fiTpPiigDoadqCEag5YUFKl6Yrciw0VOlhOivv/Ff8wtn0KzlebrUYwAAAABJRU5ErkJggg==); }
.ie6 #accept, .ie7 #accept {
 background: url(mhtml:http://example.com/example-datauri.css!accept.png);
}

#add { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJvSURBVDjLpZPrS5NhGIf9W7YvBYOkhlkoqCklWChv2WyKik7blnNris72bi6dus0DLZ0TDxW1odtopDs4D8MDZuLU0kXq61CijSIIasOvv94VTUfLiB74fXngup7nvrnvJABJ/5PfLnTTdcwOj4RsdYmo5glBWP6iOtzwvIKSWstI0Wgx80SBblpKtE9KQs/We7EaWoT/8wbWP61gMmCH0lMDvokT4j25TiQU/ITFkek9Ow6+7WH2gwsmahCPdwyw75uw9HEO2gUZSkfyI9zBPCJOoJ2SMmg46N61YO/rNoa39Xi41oFuXysMfh36/Fp0b7bAfWAH6RGi0HglWNCbzYgJaFjRv6zGuy+b9It96N3SQvNKiV9HvSaDfFEIxXItnPs23BzJQd6DDEVM0OKsoVwBG/1VMzpXVWhbkUM2K4oJBDYuGmbKIJ0qxsAbHfRLzbjcnUbFBIpx/qH3vQv9b3U03IQ/HfFkERTzfFj8w8jSpR7GBE123uFEYAzaDRIqX/2JAtJbDat/COkd7CNBva2cMvq0MGxp0PRSCPF8BXjWG3FgNHc9XPT71Ojy3sMFdfJRCeKxEsVtKwFHwALZfCUk3tIfNR8XiJwc1LmL4dg141JPKtj3WUdNFJqLGFVPC4OkR4BxajTWsChY64wmCnMxsWPCHcutKBxMVp5mxA1S+aMComToaqTRUQknLTH62kHOVEE+VQnjahscNCy0cMBWsSI0TCQcZc5ALkEYckL5A5noWSBhfm2AecMAjbcRWV0pUTh0HE64TNf0mczcnnQyu/MilaFJCae1nw2fbz1DnVOxyGTlKeZft/Ff8x1BRssfACjTwQAAAABJRU5ErkJggg==); }
.ie6 #add, .ie7 #add {
 background: url(mhtml:http://example.com/example-datauri.css!add.png);
}

#anchor { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGdSURBVDjLpVMxa8JAFL6rAQUHXQoZpLU/oUOnDtKtW/MDBFHHThUKTgrqICgOEtd2EVxb2qFkKTgVChbSCnZTiVBEMBRLiEmafleCDaWxDX3w8e7dve+7l3cv1LZt8h/jvA56vV7DNM20YRgE/jyRSOR+ytvwEgAxvVwui/BF+LTvCtjNwKvj/X8CbgXPOHMEZl559HsTu93uPQi7jBiNRgMEx8PR0GIxRB+y2eze2gqQeAXoSCaqqu5bpsWIdyzGvvRrBW7rdDo2I6ZSKeq7B8x0XV/bwJWAJEnHSMwBDUEQWq5GfsJthUJhlVuv11uckyiGgiH2RWK73RYRb2cymbG7gnK5vIX9USwWI1yAI/KjLGK7teEI8HN1TizrnZWdRxxsNps8vI3YLpVKbB2EWB6XkMHzgAlvriYRSW+app1Mpy/jSCRSRSyDUON5nuJGytaAHI/vVPv9p/FischivL96gEP2bGxorhVFqYXDYQFCScwBYa9EKU1OlAkB+QLEU2AGaJ7PWKlUDiF2BBw4P9Mt/KUoije+5uAv9gGcjD6Kg4wu3AAAAABJRU5ErkJggg==); }
.ie6 #anchor, .ie7 #anchor {
 background: url(mhtml:http://example.com/example-datauri.css!anchor.png);
}

#application { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAFiSURBVBgZpcEhbpRRGIXh99x7IU0asGBJWEIdCLaAqcFiCArFCkjA0KRJF0EF26kkFbVVdEj6/985zJ0wBjfp8ygJD6G3n358fP3m5NvtJscJYBObchEHx6QKJ6SKsnn6eLm7urr5/PP76cU4eXVy/ujouD074hDHd5s6By7GZknb3P7mUH+WNLZGKnx595JDvf96zTQSM92vRYA4lMEEO5RNraHWUDH3FV48f0K5mAYJk5pQQpqIgixaE1JDKtRDd2OsYfJaTKNcTA2IBIIesMAOPdDUGYJSqGYml5lGHHYkSGhAJBBIkAoWREAT3Z3JLqZhF3uS2EloQCQ8xLBxoAEWO7aZxros7EgISIIkwlZCY6s1OlAJTWFal5VppMzUgbAlQcIkiT0DXSI2U2ymYZs9AWJL4n+df3pncsI0bn5dX344W05dhctUFbapZcE2ToiLVHBMbGymS7aUhIdoPNBf7Jjw/gQ77u4AAAAASUVORK5CYII=); }
.ie6 #application, .ie7 #application {
 background: url(mhtml:http://example.com/example-datauri.css!application.png);
}

#application_add { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAH9SURBVDjLpZM9aFRREIW/ue9FF2IULDQuaYIGtTBRWGFJAgqSUsEmjZVgo4mFWBiwVVjBHwjGwsbCShExIAghoEUMARGNGFJYhIC7isXGRbORvJ0Zi/dWY5fFCwOnuHz3nDsz4u78z5HTlx6NDB4v3KjWvd0dMMPNUFPcHHPDVTF3XBU1Y/uWZHVxsXzl6e3hibgwUBhvy7WH3bmWHm5fres4MBHXEw/16s+Wra8lHgBiV+f6mX0tA86VlkkBbgCsNxQH3Bw1MBwzR83Qhqflxro63Z0dqGkKIOuCBEHc8SC4OGJCCIJIQESRyIksEDfS+9bIAE1SAFwEBCIHEzBzIocgEbGAiqMhdWxqWQTL5kAE3P8BiYCrYwIuQBAii1JAM0JTpAxJxQaQxUJsxvTbSV7NP6e2ukLSSFjT/cBJ4kaS/HEggLsjIvgG0Is3T3hfnuLYwFG6dvbwcuEZcx+nKY7mbwbPskSAZC4k00GEIMLk64ccPtCHBqVvzxAqCcVD/QAjwcz+Rsg+M4gQbahv37/QJts4dfAiAJdP3Gfvrl6AXFxeWn58/k4ybKqYGqqKmaFJgplh7lRrKyxUZpmvzDA29IDS1Fly0VaAX7KZbSyO5q91de+42t87SE/nET59fcfshxk+L9VuyWbXuTiaLwEXgA7gB3Bv7m5l7Dd8kw6XoJxL0wAAAABJRU5ErkJggg==); }
.ie6 #application_add, .ie7 #application_add {
 background: url(mhtml:http://example.com/example-datauri.css!application_add.png);
}

#application_cascade { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGeSURBVDjLjZLdKwRRGIf3X1wXuNAikiKfWXaVLO1SIjYlG9LYaGKxNSXWx1rnwoUo+Zhdu2vkRsp32ePCvH5nYoaGNaeemjkz5/ee85zX5W6VS4bjuc3uhSzzz4NohnlnT1nHzAlrnz5mbZEj1jJ5yHwRxsS/ROT6jiu4lEuF12+YE5pHd1O2AFHZKXVDSWYL8EcvxKQjaga27AG+ubTxUUllMlOJq9fB1Us+sAJieR5azPJ+Oc0DC2e8N3rCmyYOOFxocOGxAiTVCBhTtMJ08pYXY1i55nChwUXeDGgM7xsBovJ/dErnHC40uNDMAGynr35kj3VJKn98eQOcPzwLCib3gqcCf3l9e8QiDS6sgK8HuBCTWnxHvRtT8joqEfqC0BeEYxJ6g9AXhL4g9AXBBaF4gxUgqUZAKJYjnNMRcPFuBsCFESAqOwUurPvEdsbhQkNfkNMBFz+b4tPFnwt0gS7Qjfeq4MYvARBWbHyFiOEJrNkD4MLxEdxtsj0ALmS4MATVDm5TdTBBlf3rVNGjUHl3nMp8y1TqjYkrFMgf+hUje+AiV2IAAAAASUVORK5CYII=); }
.ie6 #application_cascade, .ie7 #application_cascade {
 background: url(mhtml:http://example.com/example-datauri.css!application_cascade.png);
}

#application_delete { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAH0SURBVBgZpcFPaM9xHMfx5/vz/Ywfv6ZwGC1mtRsXtRvFQSmlKK3JkRJymAul5EJcrFZrcnO0QpELDgrlKJcd5M9PtpHawew39v2+3y/7rlZuLI+HSeJ/2OGhO2d27+2/PtNWUwIiUAQejkKEArkTEnLHI1i3qpybmJg8f+/GwGju39U/0tFopq4GK9Gca/sIMJrbpVJ75gcrNV8qsSjLxZVjfazUiWstalkKaguVI0AhPCAQEcIj8Ep4JVzBgoveTZ14OLWMRM2SYRJKhkxYGCkZZgkzxwpRRCJXohaVU8seTi0BMgODQhAGEaIQJCvIBm7CU1ALD2pZIZaYgUQCZAYGZiAXYSADklFEQS3CqeUIZ5mZsUQiATIjspEjmHp4k+mHY7Q/vaWjq5sdq/cAB8lVWbLEDAMkYWaIRRIJmH50i9lX4+w8cpzVvduZf/OYNc+f8mRfx9kkD2oFYICZYYAByYxkRuvuMH17DtF49wy7fZS17+/T27MBmYZyRLDMAGORGX9amGrR2NQLB86xLF/eTBG2LU9+aI2fGi4Hwp3wwN2JCLwsiQhCYqCxnvbrRzQfnObX/BfawOz3Ai+YMkn8zYvB7surOpsXt2ysck6fmf1W8fFr4eVPXTJJ/IuXg1svzM1MnSzcerzQpGBs/+Pq6m9gRhRi/EsJnAAAAABJRU5ErkJggg==); }
.ie6 #application_delete, .ie7 #application_delete {
 background: url(mhtml:http://example.com/example-datauri.css!application_delete.png);
}

#arrow_in { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHqSURBVDjL3ZHbThpRFIZ5i3kcLRYPqIgUGcDhNKBAqyKCobTR2NhiKmCstcWmBmtLPaCO4CQ6SBWVKInx0N70KbjhCf7O3ia0ZS686F0vVrL3Xvv7VvIvFQBVuOITQxfe6tj5IEPu9xW/ZxGcu2aJnAksxW9eYP42hmB5oBY48zAjJ240QoP7HH3j8xYhWgwiUgiAyxpFlTxZmL2ewvrPNBJX0wid+TF0zCsEHtEKGcbT4igWK0k8OwzBumGo0uZoeUCYuZzE0vUcVn6k8OSbUyFwyfDbSgKvShOIFsZgWTfU2K96pv5huOSm8KfvS/AXHAqBQ2CxcJFAsjwDe5YFgWkGdzCPoSMXHhed8BXs8B7YFALbVh/6Nx+RyWAzevR91qEu+Jf6XwRuecdkTSRp27YcVtaoCLE33Qn9sha6D+3oSrVB+07zO0RXzsx4chxmT18ifhqjSTcKej5qMbkfRVQM12EqILA8uRaRgnguhRE7mqJrahR0y5MjYgi+TTfsq1a0vVELVODYMVUJ/Lo0jZG8768d/1md71uhS2nBZxwYzwXRn2bxMNksqLgtoxgQ/RjOe2HK9FCrYaVLIehY1KB9oYVpnVfXnKscrMsmqBNNEm2a13ol05c7+L7SzD1gWpLNVXW8SST3X7gvtJUuvnAlAAAAAElFTkSuQmCC); }
.ie6 #arrow_in, .ie7 #arrow_in {
 background: url(mhtml:http://example.com/example-datauri.css!arrow_in.png);
}

#arrow_inout { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAG5SURBVBgZpcG7b41xAMfhz/v2SJ1qI2nVedXtD0ClsdpIdDARBlKRaEIMLP4OCZNYJGIQl0EQiYnJytSRRA8nLnGrSy+/z1dHObH1eapLL86FVUlIQgyX91+v+I+zT2aiQcUSVGpWdQa3sL29kxhMmovPZ0Ofs09momkQOu2GzlAHi9RJSEJnsGFrewct1vU09LOIxd6m9jhbh7cxULVQqWPo/X7Pm4U3DFcb2L1xkij9imFq8z5GWiN0v3d5/fk1pUhtQimlefezy2CrTZUKS+hnkQTWt4bofuuiNhapknDh2ZnEoEElhmvTNyv+cere8ahosIjKnZkHVZWEtahZo5o1qlmjFqtmH52MBouoaLh17G7FP47cOJwYLKJB5fH5p1U9++hkLDYDGWDX2B4mx6ewSD9LmJzYy66J3ahomumrB1NbRNMbWz/Ot99fWV5ZwiL9VBbLEl9+fWHT8DhV6KnUFmmGJhgdHOXH4gKv3r9EpZ9F5ubnWFpeobOxw+jwGDG0ivJn+Q/zi/N8XPhAKTZqjz4aiovN/Ke3PUshBhOqE7ePRsUiGlTun35Y8R+HrhxIDCbEkIS/gKBKja+GF3wAAAAASUVORK5CYII=); }
.ie6 #arrow_inout, .ie7 #arrow_inout {
 background: url(mhtml:http://example.com/example-datauri.css!arrow_inout.png);
}

#arrow_join { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAIESURBVDjLpVLPS9NxGH7mjw3cZmvGclsFxcwQpFsQCRLBvIZJEC7LkyVdO5gnDx0i2qk/IAipyA5GBYoQkX0rWIaxTYvad9E85IbVcd/P834+HcZWKZtRz/V9n4f3eZ7XZYzB/6Cp0XB8/tzrsSeJxX8SuDg3stzZFj7S6Y0cO//g9Nt6e67NFi4tjLpFJBNuC8e6OrqhjUZ6LQ173f5AJb0zo4+chheQ8phK9pACGoKa8Lq9oMN9dPhw2wuqGLk/ZI53n4A2GtaKhdKP0tHZsblXm/da6nmjkrIjyqONoPS9VJ69sJVcN8Qz0yf7fG6fRxsN0QKfx++JJ/v7tg0xce9UTJRMkjx7KNrTHNoZgmii8HUNS5kloZLbJK9aU6mPWwQSdweHSJnev+uAO9IRgYZB8VsRIkRgRxDUCp/yOaQzGUcow2+uv5upCQzfGWwmud6793Cw3dcOUiFrryBfyM+LEkR2R+NdsRgMXCgW1/Fi0doQSih98700VQJjtAWtQb/XDwqxaq8i/yWfXLj8fODpFWsgZ+eSmWwWoolAMIBWtztISrQWolIEFaGk0rtdyEMpTlR9KsWJXM6GGAG1QJRAKL9aoEMop0KmEE7ZwbPJl7WPS11bdpyyArVA6wpZRP8ZYvxGv6EiqAQkYU2lXL/X1TN+0FSJWjRytz67Gn7i3+In2xhLsvVnPqcAAAAASUVORK5CYII=); }
.ie6 #arrow_join, .ie7 #arrow_join {
 background: url(mhtml:http://example.com/example-datauri.css!arrow_join.png);
}

#arrow_left { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADrSURBVDjLY/z//z8DJYCJgUIwyAwoPZHJBsS7STGABY1/9e+fvzKkGMAIiwWgzRfF2ST0/vz5w/Dw/UOGXz9/M/z6AcK/GH4CMZj+jmCD5C70X2VkgWo+KcYqrqfArcTw598fBhluOTD9++9fIP7N8PsfEP/9AxUD0b8ZVq9ci/AC0Nm//zD+Yfj19xdY0R+got9gxb8RNNQAkNyf/0CxX39QvZC5M+68MJuIAQczJ8PDlw8ZXr9/g9XZIK+BNP/5/Yfh/sJHjIzIKTF2VchNoEI5oAbHDWk7TpAcjUDNukDNB4nVjOKFEZwXAOOhu7x6WtPJAAAAAElFTkSuQmCC); }
.ie6 #arrow_left, .ie7 #arrow_left {
 background: url(mhtml:http://example.com/example-datauri.css!arrow_left.png);
}

#arrow_merge { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAF2SURBVDjLlZLNK4RhFMXPaMzU+EhJLyUKjYUSykeRsRCWUnbKzpTd8AfYWGPNRtnJQorNbMdsJ8xiForYSFNKM2Pe9zn3PhYoTfN56m5uPef+7n2Oz1qLctq5jSZUtPlo/mQaVdRUrhlLbKWcgDPrBJ2p7fjmXTUD33+C3dtoQFUfnGB3eKB9CGoVmWwGrx8vj0IZOV0796oSCOWKlD4RgehvkaDHXuPxuibBn6I3G3auPwKringmjrP1C1+lFfzlmjQ/01UF9IiGj2g8QkRASzhtDlaPV2INGhjQEjk3h872LhjXrC0fLsQaIqAQ2UIWbaFWjA9PzPV09hxE9mfs7N6krZsg/5XH88cT/EE/woNhLEaWYEpuUt7AJYwIMulHfL7lUSy4MDQQS9Cw9i8Yz0BUMDE6hkQyifv0/Tt86CAlINT6DKhEqCUE1ytCRPtTB+li3TkwLkFLqCqMISo9rkLwkwOxWjNIFZJIXF5eQSjQkp1L9Q34mO6FTUohDAAAAABJRU5ErkJggg==); }
.ie6 #arrow_merge, .ie7 #arrow_merge {
 background: url(mhtml:http://example.com/example-datauri.css!arrow_merge.png);
}


/* sadly, the regex used to generate .ie6, .ie7 placeholder won't catch block declaration */
#book_key {
 color: red;
 font-size: 20px;
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAKdSURBVDjLbZNNTFxVFMd/781jICiCCFoSC5YgGGAQG/E7EhckJFqMe5suNI27Ji7r3qXbLk2rSRuFhU1asESgxvoRm5qQoIAikECMdcIMAzO8++6957h4MyjKSW5OcnPv7/z/554bqCoTFz4eUNXPFQooLymKKqBKmvRwibdYs7t++8oH3QAR6YHzCk/l+juD+3/tolq7BClMUIHibpkDo4hGp6hGCoBXc/0ng9eGTtLZkUNTAqKSVpW0entLI40NES+/+R5HAKg+nBvoYvrubxQKFVQEAKmpUEVFKZYqxCbh31G1QBBlI54c7KLnsVa8B1VBRPFe8SI4UQ5iy2eTC8cBFO+FzfslsmEdcRxjTYKTdN+RIarL0vZAPaJ6DAAQLzhvMcbw1nM9qfxUHarK5flfeOJgkovPrjJZKfxfgfWCtw7nQz5d+BljHc4r3gmOgCE3zzODJZr73+fEIx9x78Pe8dMXV2cOAc4JibUkAhrWE9TVQahIIPTG84z1rNLcN0Z5c5rWR/vIdJqp6Qvd79aaiHUeFzuM9TgvWC/VrHSGv9KSex1fWaKh7XFiv0XH6HCjKxcu/aPAC9ZYjPWpHa8kVcifrhVb2CDM5AnCMtmH8hBX2P/DZI5YsEkKcKIkTmhz64w/+CVNTYq4bUIpQtiE2oTlayvx0krpfFQbmMR5nHEYK1gR+twPjETf8PQrY2hyi8DvsXjzgKRQJBDL1kbp7bNX16cOe+C94hOfWhDhheafGB49Q5K/RBQ1sziXMLv3Bl9vRuTX7mzdu/3t1JFnJAwZeX4IDQK8V7JkCTLbZOrbWby1z1flCXbaX8Ss3aVYcXP/nYPZmRvfv5P+vOr8n7CY/B1KO4ZPlvtZtQHKd6Bc//3HL87VAH8DX5rXmGdCnY8AAAAASUVORK5CYII=);
}

## example.css
/* parts of jammit's example: http://jashkenas.s3.amazonaws.com/misc/jammit_example/jammit.html */

/*
 * To grab icons set:
 *
 *    wget wget http://www.famfamfam.com/lab/icons/silk/famfamfam_silk_icons_v013.zip
 *    unzip famfamfam_silk_icons_v013.zip -d images/
 *
 */

div{display:block;float:left;width:16px;height:16px;margin:10px;}

#accept { background: url(./images/embed/accept.png); }
#add { background: url(./images/embed/add.png); }
#anchor { background: url(./images/embed/anchor.png); }
#application { background: url(./images/embed/application.png); }
#application_add { background: url(./images/embed/application_add.png); }
#application_cascade { background: url(./images/embed/application_cascade.png); }
#application_delete { background: url(./images/embed/application_delete.png); }
#arrow_in { background: url(./images/embed/arrow_in.png); }
#arrow_inout { background: url(./images/embed/arrow_inout.png); }
#arrow_join { background: url(./images/embed/arrow_join.png); }
#arrow_left { background: url(./images/embed/arrow_left.png); }
#arrow_merge { background: url(./images/embed/arrow_merge.png); }

/* sadly, the regex used to generate .ie6, .ie7 placeholder won't catch block declaration */
#book_key {
 color: red;
 font-size: 20px;
 background: url(./images/embed/book_key.png);
}

## package.json
{
  "author": "mklabs",
  "name": "datauris",
  "description": "datauris / mhtml experiment",
  "version": "0.0.0",
  "bin": "./datauri.js",
  "dependencies": {
    "mime": "~1.2.4"
  }
}
	#!/usr/bin/env node

	var fs = require('fs'),
	path = require('path'),
	mime = require('mime');

	// Monolithic script, first try and experiment at trying
	// to automate the embedding of images in CSS files.
	//
	// Have to work with both data URI and mhtml for IE < 8
	//

	// ## usage
	//
	// ./datauri file1.css file2.css file3.css
	// ./datauri css/*.css
	//
	// images references gets replaced by their base64 equivalent:
	//
	// * datauris: for FF, Safari, O, Chrome, IE < 8
	// * mhtml: for IE < 8
	//
	// ideally, rely on `.ie6` and `.ie7` html css class placeholder.
	//
	// Path in css are declared relatively, this script will lookup them
	// based on the css file path.
	//
	// Should only inline imgs < 32 kilobytes

	var files = process.argv.slice(2);

	// This is non-sense, but mhtml have to use absolute path to the css fliles
	var config = {
	host: 'http://example.com'
	};


	// first iterate over css files, get hash obj with filepath/content
	var css = files.map(function(file) {
	return {
	file: path.resolve(file),
	content: fs.readFileSync(path.resolve(file), 'utf8')
	};
	});

	// first iteration, this time we'll generate mhtml equivalent
	// and try to automatically add rules for `.ie6`, `.ie7` placeholder
	css.forEach(function(it) {

	// only work with single line declaration, eg.
	//
	// #book_go { background: url(../images/embed/book_go.png); }
	//
	it.content = it.content.replace(/(.+)\{(.+url\(.+\).+)\}/gm, function(w, selector, block) {

	var ieholder = [
	'.ie6 :selector, .ie7 :selector {'.replace(/:selector/g, selector.trim()),
	block.replace(/url\((.+)\)/, function(w, url) {
	// first pass, simply putting a marker, this is non valid
	// mhtml syntax. Will be replaced properly on next step
	return 'mhtml(' + url + ')';
	}),
	'}',
	''
	].join('\n');

	return w + '\n' + ieholder;
	});

	});

	// then, iterate over styles and replace inline references,
	// also builds up the mhtml front comments.
	css.forEach(function(it) {
	var file = it.file,
	shortpath = it.file.replace(process.cwd(), ''),
	boundary = 'fooooobar',
	mhtml = ['Content-Type: multipart/related; boudary="' + boundary + '"\n\n'];

	// deal with datauris, replace inline url() by their base64 equivalent
	it.content = it.content.replace(/url\((.+)\)/g, function(w, url) {
	var cssfold = file.split('/').slice(0, -1).join('/'),
	imgpath = path.resolve(cssfold, url),
	base64 = toBase64(imgpath),
	mhtmlPart = [
	'--' + boundary,
	'Content-Location:' + url.split('/').slice(-1).join('/'),
	'Content-Transfer-Encoding:base64',
	'',
	base64,
	''
	].join('\n');

	mhtml.push(mhtmlPart);

	return 'url(data:{mediatype};base64,{base64})'
	.replace('{mediatype}', mime.lookup(imgpath))
	.replace('{base64}', base64);
	});

	mhtml.push('--' + boundary + '--');

	it.content = '/* \n' + mhtml.join('\n') + '\n*/\n\n' + it.content;

	// now replace inline mhtlm() reference
	it.content = it.content.replace(/mhtml\((.+)\)/g, function(w, url){
	return getMHTML(shortpath, url.split('/').slice(-1).join('/'));
	});
	});

	// write files, they're generated along the css files parsed,
	// with a `-datauri.css` suffix.
	css.forEach(function(item) {
	var file = item.file.replace(/\.css$/, '-datauri.css');
	console.log(' >> Generate ', file);
	fs.writeFileSync(file, item.content);
	});

	// ## function helper
	// todo: move in helper module

	function toBase64(path) {
	return fs.readFileSync(path, 'base64');
	}

	function getMHTML(shortpath, ref) {
	return 'url(mhtml:$host!$ref)'
	.replace('$host', config.host + shortpath.replace(/\.css$/, '-datauri.css'))
	.replace('$ref', ref);
	}
	/* parts of jammit's example: http://jashkenas.s3.amazonaws.com/misc/jammit_example/jammit.html */

	/*
	* To grab icons set:
	*
	* wget wget http://www.famfamfam.com/lab/icons/silk/famfamfam_silk_icons_v013.zip
	* unzip famfamfam_silk_icons_v013.zip -d images/
	*
	*/

	div{display:block;float:left;width:16px;height:16px;margin:10px;}

	#accept { background: url(./images/embed/accept.png); }
	#add { background: url(./images/embed/add.png); }
	#anchor { background: url(./images/embed/anchor.png); }
	#application { background: url(./images/embed/application.png); }
	#application_add { background: url(./images/embed/application_add.png); }
	#application_cascade { background: url(./images/embed/application_cascade.png); }
	#application_delete { background: url(./images/embed/application_delete.png); }
	#arrow_in { background: url(./images/embed/arrow_in.png); }
	#arrow_inout { background: url(./images/embed/arrow_inout.png); }
	#arrow_join { background: url(./images/embed/arrow_join.png); }
	#arrow_left { background: url(./images/embed/arrow_left.png); }
	#arrow_merge { background: url(./images/embed/arrow_merge.png); }

	/* sadly, the regex used to generate .ie6, .ie7 placeholder won't catch block declaration */
	#book_key {
	color: red;
	font-size: 20px;
	background: url(./images/embed/book_key.png);
	}
	{
	"author": "mklabs",
	"name": "datauris",
	"description": "datauris / mhtml experiment",
	"version": "0.0.0",
	"bin": "./datauri.js",
	"dependencies": {
	"mime": "~1.2.4"
	}
	}