Add Chrome & Opera extensionsv4.0.1

5 files changed, 322 insertions, 0 deletions

diff --git a/src/bookmarklet/bookmark.html b/src/bookmarklet/bookmark.html
new file mode 100644
index 0000000..d3ee490
--- /dev/null
+++ b/src/bookmarklet/bookmark.html
@@ -0,0 +1,6 @@
+<!DOCTYPE>
+<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
+<TITLE>Bookmarks</TITLE>
+<DL>
+  <DT><A HREF="javascript:/*THE.PRINTLIMINATOR*/(function(){{production}})();" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASBAMAAACk4JNkAAAAHlBMVEUAAAD///8AAADFCwC6AAC2AAD++ff/9/b76+n65+WpdbBCAAAAAXRSTlMAQObYZgAAAE9JREFUCNdjYFCCAAYGJkEIUEBmCYElFRVQZYuNDSGyiqYuwUJgWWEL48mGYDFlY0FjI4gYkAUUA7HMjIUhsorGxsYQHUBpQ4K2IVgIlwIA7aMQqqDBgigAAAAASUVORK5CYII=" ICON_URI="http://css-tricks.github.io/The-Printliminator/index.html">The Printliminator</A></DT>
+</DL>
diff --git a/src/bookmarklet/bookmarklet.js b/src/bookmarklet/bookmarklet.js
new file mode 100644
index 0000000..04a02e9
--- /dev/null
+++ b/src/bookmarklet/bookmarklet.js
@@ -0,0 +1,27 @@
+/*
+Don't wrap this code in a self-executing anonymous function, i.e.
+  (function(){ CODE })();
+because uglify changes it into
+  !function(){ CODE }();
+and Firefox does not work with that format!
+*/
+// uncompressed bookmarklet code
+function loadScript(url, callback) {
+	var script = document.createElement('script'),
+		head = document.getElementsByTagName('head')[0],
+		done = false;
+	script.type = 'text/javascript';
+	script.src = url;
+	script.onload = script.onreadystatechange = function() {
+		if ( !done && ( !this.readyState || this.readyState == 'loaded' || this.readyState == 'complete' ) ) {
+			done = true;
+			callback();
+		}
+	};
+	head.appendChild(script);
+}
+// dev = src/printliminator.js
+// production = //css-tricks.github.io/The-Printliminator/printliminator.min.js
+loadScript('{printliminator}', function() {
+	thePrintliminator.init();
+});
diff --git a/src/bookmarklet/iframe.html b/src/bookmarklet/iframe.html
new file mode 100644
index 0000000..1e3be6c
--- /dev/null
+++ b/src/bookmarklet/iframe.html
@@ -0,0 +1,46 @@
+<div class="header">
+	<div class="<!-- @echo close --> right">CLOSE <span class="<!-- @echo icon --> close"></span></div>
+	<div><span class="<!-- @echo icon --> <!-- @echo drag -->"></span> DRAG</div>
+</div>
+<div class="top">
+	<img class="pl_logo" src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20134.4%208.7%22%3E%0A%3Cg%3E%0A%09%3Cpath%20d%3D%22M3%2C0.7H0.3C0.1%2C0.7%2C0%2C0.6%2C0%2C0.4c0-0.2%2C0.1-0.3%2C0.3-0.3h6c0.2%2C0%2C0.3%2C0.1%2C0.3%2C0.3c0%2C0.2-0.1%2C0.3-0.3%2C0.3H3.6v7.6%0A%09%09c0%2C0.2-0.1%2C0.3-0.3%2C0.3S3%2C8.4%2C3%2C8.3V0.7z%22%2F%3E%0A%09%3Cpath%20d%3D%22M8.4%2C0.4c0-0.2%2C0.1-0.3%2C0.3-0.3S9%2C0.2%2C9%2C0.4V4h5.4V0.4c0-0.2%2C0.1-0.3%2C0.3-0.3c0.2%2C0%2C0.3%2C0.1%2C0.3%2C0.3v7.9%0A%09%09c0%2C0.2-0.1%2C0.3-0.3%2C0.3c-0.2%2C0-0.3-0.1-0.3-0.3V4.6H9v3.7c0%2C0.2-0.1%2C0.3-0.3%2C0.3S8.4%2C8.4%2C8.4%2C8.3V0.4z%22%2F%3E%0A%09%3Cpath%20d%3D%22M17.5%2C8.2V0.5c0-0.2%2C0.1-0.3%2C0.3-0.3h5.4c0.2%2C0%2C0.3%2C0.1%2C0.3%2C0.3c0%2C0.2-0.1%2C0.3-0.3%2C0.3h-5.1V4h4.6C22.9%2C4%2C23%2C4.1%2C23%2C4.3%0A%09%09c0%2C0.2-0.1%2C0.3-0.3%2C0.3h-4.6V8h5.2c0.2%2C0%2C0.3%2C0.1%2C0.3%2C0.3c0%2C0.2-0.1%2C0.3-0.3%2C0.3h-5.5C17.7%2C8.5%2C17.5%2C8.4%2C17.5%2C8.2z%22%2F%3E%0A%09%3Cpath%20d%3D%22M29%2C0.9c0-0.4%2C0.3-0.7%2C0.7-0.7h2.6c2%2C0%2C3.2%2C1.1%2C3.2%2C2.8v0c0%2C1.9-1.5%2C2.9-3.4%2C2.9h-1.7v2c0%2C0.4-0.3%2C0.7-0.7%2C0.7%0A%09%09c-0.4%2C0-0.7-0.3-0.7-0.7V0.9z%20M32.2%2C4.5C33.3%2C4.5%2C34%2C3.9%2C34%2C3v0c0-1-0.7-1.5-1.8-1.5h-1.7v3H32.2z%22%2F%3E%0A%09%3Cpath%20d%3D%22M37%2C0.9c0-0.4%2C0.3-0.7%2C0.7-0.7h3c1.1%2C0%2C1.9%2C0.3%2C2.4%2C0.8c0.4%2C0.5%2C0.7%2C1.1%2C0.7%2C1.8v0c0%2C1.3-0.8%2C2.2-1.9%2C2.5l1.6%2C2%0A%09%09c0.1%2C0.2%2C0.2%2C0.3%2C0.2%2C0.6c0%2C0.4-0.3%2C0.7-0.7%2C0.7c-0.3%2C0-0.6-0.2-0.7-0.4l-2-2.6h-1.9v2.3c0%2C0.4-0.3%2C0.7-0.7%2C0.7%0A%09%09c-0.4%2C0-0.7-0.3-0.7-0.7V0.9z%20M40.7%2C4.3c1.1%2C0%2C1.7-0.6%2C1.7-1.4v0c0-0.9-0.6-1.4-1.7-1.4h-2.1v2.8H40.7z%22%2F%3E%0A%09%3Cpath%20d%3D%22M45.8%2C0.8c0-0.4%2C0.3-0.7%2C0.7-0.7c0.4%2C0%2C0.7%2C0.3%2C0.7%2C0.7v7.1c0%2C0.4-0.3%2C0.7-0.7%2C0.7c-0.4%2C0-0.7-0.3-0.7-0.7V0.8z%22%2F%3E%0A%09%3Cpath%20d%3D%22M49.5%2C0.8c0-0.4%2C0.3-0.7%2C0.7-0.7h0.2c0.4%2C0%2C0.6%2C0.2%2C0.8%2C0.4L55.4%2C6V0.8c0-0.4%2C0.3-0.7%2C0.7-0.7c0.4%2C0%2C0.7%2C0.3%2C0.7%2C0.7v7.1%0A%09%09c0%2C0.4-0.3%2C0.7-0.7%2C0.7H56c-0.3%2C0-0.6-0.2-0.8-0.4L51%2C2.6v5.3c0%2C0.4-0.3%2C0.7-0.7%2C0.7c-0.4%2C0-0.7-0.3-0.7-0.7V0.8z%22%2F%3E%0A%09%3Cpath%20d%3D%22M61.1%2C1.5h-2c-0.4%2C0-0.7-0.3-0.7-0.7c0-0.4%2C0.3-0.7%2C0.7-0.7h5.6c0.4%2C0%2C0.7%2C0.3%2C0.7%2C0.7c0%2C0.4-0.3%2C0.7-0.7%2C0.7h-2.1v6.4%0A%09%09c0%2C0.4-0.3%2C0.7-0.7%2C0.7s-0.7-0.3-0.7-0.7V1.5z%22%2F%3E%0A%09%3Cpath%20d%3D%22M66.8%2C0.8c0-0.4%2C0.3-0.7%2C0.7-0.7c0.4%2C0%2C0.7%2C0.3%2C0.7%2C0.7v6.4H72c0.4%2C0%2C0.7%2C0.3%2C0.7%2C0.7c0%2C0.4-0.3%2C0.7-0.7%2C0.7h-4.5%0A%09%09c-0.4%2C0-0.7-0.3-0.7-0.7V0.8z%22%2F%3E%0A%09%3Cpath%20d%3D%22M74.3%2C0.8c0-0.4%2C0.3-0.7%2C0.7-0.7c0.4%2C0%2C0.7%2C0.3%2C0.7%2C0.7v7.1c0%2C0.4-0.3%2C0.7-0.7%2C0.7c-0.4%2C0-0.7-0.3-0.7-0.7V0.8z%22%2F%3E%0A%09%3Cpath%20d%3D%22M78%2C0.8c0-0.4%2C0.3-0.7%2C0.7-0.7h0.2c0.3%2C0%2C0.5%2C0.2%2C0.7%2C0.4l2.5%2C4l2.6-4c0.2-0.3%2C0.4-0.4%2C0.7-0.4h0.2c0.4%2C0%2C0.7%2C0.3%2C0.7%2C0.7%0A%09%09v7c0%2C0.4-0.3%2C0.7-0.7%2C0.7c-0.4%2C0-0.7-0.3-0.7-0.7v-5l-2.1%2C3.1c-0.2%2C0.2-0.3%2C0.4-0.6%2C0.4c-0.3%2C0-0.5-0.1-0.6-0.4l-2-3.1v5%0A%09%09c0%2C0.4-0.3%2C0.7-0.7%2C0.7S78%2C8.3%2C78%2C7.9V0.8z%22%2F%3E%0A%09%3Cpath%20d%3D%22M88.5%2C0.8c0-0.4%2C0.3-0.7%2C0.7-0.7c0.4%2C0%2C0.7%2C0.3%2C0.7%2C0.7v7.1c0%2C0.4-0.3%2C0.7-0.7%2C0.7c-0.4%2C0-0.7-0.3-0.7-0.7V0.8z%22%2F%3E%0A%09%3Cpath%20d%3D%22M92.2%2C0.8c0-0.4%2C0.3-0.7%2C0.7-0.7h0.2c0.4%2C0%2C0.6%2C0.2%2C0.8%2C0.4L98.1%2C6V0.8c0-0.4%2C0.3-0.7%2C0.7-0.7c0.4%2C0%2C0.7%2C0.3%2C0.7%2C0.7v7.1%0A%09%09c0%2C0.4-0.3%2C0.7-0.7%2C0.7h-0.1c-0.3%2C0-0.6-0.2-0.8-0.4l-4.3-5.6v5.3c0%2C0.4-0.3%2C0.7-0.7%2C0.7c-0.4%2C0-0.7-0.3-0.7-0.7V0.8z%22%2F%3E%0A%09%3Cpath%20d%3D%22M101.2%2C7.6l3.1-7c0.2-0.4%2C0.5-0.6%2C0.9-0.6h0.1c0.4%2C0%2C0.7%2C0.2%2C0.9%2C0.6l3.1%2C7c0.1%2C0.1%2C0.1%2C0.2%2C0.1%2C0.3c0%2C0.4-0.3%2C0.7-0.7%2C0.7%0A%09%09c-0.3%2C0-0.6-0.2-0.7-0.5l-0.7-1.6h-4.1l-0.7%2C1.6c-0.1%2C0.3-0.4%2C0.5-0.7%2C0.5c-0.4%2C0-0.7-0.3-0.7-0.7C101.1%2C7.8%2C101.2%2C7.7%2C101.2%2C7.6z%0A%09%09%20M106.7%2C5.2l-1.5-3.4l-1.5%2C3.4H106.7z%22%2F%3E%0A%09%3Cpath%20d%3D%22M112.1%2C1.5h-2c-0.4%2C0-0.7-0.3-0.7-0.7c0-0.4%2C0.3-0.7%2C0.7-0.7h5.6c0.4%2C0%2C0.7%2C0.3%2C0.7%2C0.7c0%2C0.4-0.3%2C0.7-0.7%2C0.7h-2.1v6.4%0A%09%09c0%2C0.4-0.3%2C0.7-0.7%2C0.7c-0.4%2C0-0.7-0.3-0.7-0.7V1.5z%22%2F%3E%0A%09%3Cpath%20d%3D%22M117%2C4.4L117%2C4.4c0-2.4%2C1.8-4.4%2C4.4-4.4c2.6%2C0%2C4.4%2C2%2C4.4%2C4.3v0c0%2C2.4-1.8%2C4.3-4.4%2C4.3C118.8%2C8.7%2C117%2C6.7%2C117%2C4.4z%0A%09%09%20M124.2%2C4.4L124.2%2C4.4c0-1.7-1.2-3-2.9-3s-2.8%2C1.3-2.8%2C3v0c0%2C1.6%2C1.2%2C3%2C2.9%2C3S124.2%2C6%2C124.2%2C4.4z%22%2F%3E%0A%09%3Cpath%20d%3D%22M127.5%2C0.9c0-0.4%2C0.3-0.7%2C0.7-0.7h3c1.1%2C0%2C1.9%2C0.3%2C2.4%2C0.8c0.4%2C0.5%2C0.7%2C1.1%2C0.7%2C1.8v0c0%2C1.3-0.8%2C2.2-1.9%2C2.5l1.6%2C2%0A%09%09c0.1%2C0.2%2C0.2%2C0.3%2C0.2%2C0.6c0%2C0.4-0.3%2C0.7-0.7%2C0.7c-0.3%2C0-0.6-0.2-0.7-0.4l-2-2.6H129v2.3c0%2C0.4-0.3%2C0.7-0.7%2C0.7%0A%09%09c-0.4%2C0-0.7-0.3-0.7-0.7V0.9z%20M131.2%2C4.3c1.1%2C0%2C1.7-0.6%2C1.7-1.4v0c0-0.9-0.6-1.4-1.7-1.4H129v2.8H131.2z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A" alt="The Printliminator">
+	<h3><span>Just click stuff on page to remove.</span> Alt-click to remove opposite.</h3>
+</div>
+<div class="footer">
+	<h3>Other Useful Superpowers</h3>
+	<ul>
+		<li class="<!-- @echo undo -->"><span class="<!-- @echo icon -->"></span>Undo<br>Last</li>
+		<li class="<!-- @echo stylize -->"><span class="<!-- @echo icon -->"></span>Add Print<br>Styles</li>
+		<li class="<!-- @echo noGraphics -->"><span class="<!-- @echo icon -->"></span>Remove<br>Graphics</li>
+		<li class="<!-- @echo print -->"><span class="<!-- @echo icon -->"></span>Send to<br>print</li>
+	</ul>
+
+	<div class="keyboard-area">
+		<p class="<!-- @echo toggle --> <!-- @echo keyboard -->">View Keyboard Commands</p>
+
+		<table id="<!-- @echo keyboard -->" style="display:none">
+			<thead>
+				<tr><th class="key">Key</th><th>Description</th></tr>
+			</thead>
+			<tbody>
+				<tr><td><kbd>PageUp</kbd> <span class="lower">or</span> <kbd class="bold" title="Up Arrow">&uarr;</kbd></td><td>Find wrapper of highlighted box</td></tr>
+				<tr><td><kbd>PageDown</kbd> <span class="lower">or</span> <kbd class="bold" title="Down Arrow">&darr;</kbd></td><td>Find content of highlighted box</td></tr>
+				<tr><td><kbd class="bold" title="Right Arrow">&rarr;</kbd></td><td>Find next box inside same wrapper</td></tr>
+				<tr><td><kbd class="bold" title="Left Arrow">&larr;</kbd></td><td>Find previous box inside same wrapper</td></tr>
+				<tr><td><kbd>Enter</kbd></td><td>Remove the highlighted box</td></tr>
+				<tr><td><kbd>Backspace</kbd></td><td>Undo last action</td></tr>
+				<tr><td><kbd title="Numpad Plus">Numpad <span class="bold">+</span></kbd></td><td>Increase font-size by 1</td></tr>
+				<tr><td><kbd title="Numpad Minus">NumPad <span class="bold">-</span></kbd></td><td>Decrease font-size by 1</td></tr>
+				<tr><td><kbd title="Numpad Asterisk (Multiply)">NumPad <span class="bold asterisk">*</span></kbd></td><td>Reset font-size</td></tr>
+				<tr>
+					<td><kbd>Alt</kbd> + <span class="<!-- @echo icon --> <!-- @echo leftClick -->" title="left-click on mouse"></span></td>
+					<td>Remove everything but highlighted box</td>
+				</tr>
+				<tr>
+					<td><kbd>Shift</kbd> + <span class="<!-- @echo icon --> <!-- @echo leftClick -->" title="left-click on mouse"></span></td>
+					<td>Set box width to 100% &amp; margins to zero (highlight turns blue)</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/bookmarklet/iframe.scss b/src/bookmarklet/iframe.scss
new file mode 100644
index 0000000..cd4ea7d
--- /dev/null
+++ b/src/bookmarklet/iframe.scss
@@ -0,0 +1,172 @@
+$keyboardClosed : /* @echo keyboardClosed */px;
+$icon           : /* @echo icon */;
+$drag           : /* @echo drag */;
+$print          : /* @echo print */;
+$close          : /* @echo close */;
+$undo           : /* @echo undo */;
+$noGraphics     : /* @echo noGraphics */;
+$stylize        : /* @echo stylize */;
+$busy           : /* @echo busy */;
+$leftClick      : /* @echo leftClick */;
+$toggle         : /* @echo toggle */;
+
+*, *:before, *:after {
+	box-sizing: inherit;
+}
+html {
+	box-sizing: border-box;
+	height: 100%;
+}
+html, body {
+	background: #eee;
+	min-height: $keyboardClosed;
+	font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;
+	font-size: 14px;
+	margin: 0;
+	padding: 0;
+	cursor: default;
+	overflow: hidden;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+.top {
+	background: #fff;
+	padding: 15px;
+
+	h3 {
+		color: #ccc;
+		margin: 0;
+	}
+	h3 span {
+		color: red;
+	}
+}
+
+.header, li {
+	background: #111;
+	color: #fff;
+	font-size: 11px;
+}
+.header, .header > div {
+	height: 21px;
+	font-size: 11px;
+}
+.header > div, li {
+	display: inline-block;
+}
+.right {
+	float: right;
+	margin-right: 6px;
+}
+
+.footer {
+	padding: 15px 15px 0 15px;
+
+	ul {
+		margin: 0 0 15px 0;
+		padding: 0;
+		list-style-type: none;
+	}
+}
+.keyboard-area {
+	margin: 0 -15px 0 -15px;
+	/* extend keyboard background outside of popup - accomidate for different row heights in browsers */
+	padding: 15px 15px 50px 15px;
+	background: #ccc;
+}
+.#{$toggle} {
+	font-size: 12px;
+	margin: 0 0 15px 0;
+	cursor: pointer;
+}
+.pl_logo {
+	width: 225px;
+	height: 15px;
+	margin: 0 0 5px 0;
+}
+h1, h3 {
+	margin: 0 0  10px;
+	font-weight: normal;
+	text-transform: uppercase;
+}
+h3 {
+	font-size: 10px;
+	font-weight: bold;
+}
+.#{$close}, .#{$drag} {
+	text-transform: uppercase;
+}
+
+.#{$icon} {
+	display: inline-block;
+	background: url(data:image/png;base64,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) no-repeat;
+	width: 25px;
+	height: 25px;
+	vertical-align: middle;
+}
+
+.#{$drag} .#{$icon} { background-position: 0 0; }
+.#{$print} .#{$icon} { background-position: -25px 0; }
+.#{$close} .#{$icon} { background-position: -75px 0; width: 40px; cursor: pointer; }
+.#{$undo} .#{$icon} { background-position: 0 -25px; }
+.#{$noGraphics} .#{$icon} { background-position: -25px -25px; }
+.#{$stylize} .#{$icon} { background-position: -75px -25px; width: 35px; }
+.#{$leftClick} { background-position: -50px -25px; }
+li.#{$busy} .#{$icon} {
+	background-position: -50px 0;
+	-webkit-animation:spin 1.5s linear infinite;
+	-moz-animation:spin 1.5s linear infinite;
+	animation:spin 1.5s linear infinite;
+}
+
+@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+
+li {
+	padding: 4px 14px 4px 4px;
+	line-height: 12px;
+	font-size: 10px;
+	text-transform: uppercase;
+	text-align: left;
+	white-space: nowrap;
+	margin: 2px;
+	cursor: pointer;
+	display: inline-block;
+
+	&:hover {
+		background-color: #333;
+	}
+	span {
+		float: left;
+		margin: 0 10px 0 0;
+		text-align: left;
+	}
+}
+
+.key {
+	width: 30%;
+}
+table {
+	margin: 0 4px;
+	border-spacing: 0;
+}
+th {
+	text-align: left;
+	padding: 0;
+}
+kbd {
+	background: #fff;
+	border: #000 1px solid;
+	border-radius: 3px;
+	padding: 1px 3px;
+}
+td {
+	border-top: 1px solid #aaa;
+	font-size: 12px;
+	padding: 5px;
+	/* make Firefox match Webkit */
+	line-height: 18px;
+}
diff --git a/src/bookmarklet/index.html b/src/bookmarklet/index.html
new file mode 100644
index 0000000..45efb15
--- /dev/null
+++ b/src/bookmarklet/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>The Printliminator Demo</title>
+	<link rel="stylesheet" href="demo/css/style.css">
+	<link rel="icon" type="image/x-icon" href="src/icons/favicon.ico">
+	<link rel="icon" type="image/png" href="src/icons/icon-16.png">
+</head>
+
+<body>
+
+<!-- src -->
+
+	<div id="demo-top-bar">
+		<div id="demo-bar-inside">
+			<h2 id="demo-bar-badge">
+				<a href="/">CSS-Tricks Example</a>
+			</h2>
+			<div id="demo-bar-buttons"></div>
+		</div>
+	</div>
+
+	<div id="page-wrap">
+
+		<h1>The Printliminator<span id="dev-mode"></span></h1>
+
+		<p>The Printliminator is a bookmarklet with some simple tools you can use
+		to makes websites print better. One click to activate, and then click to remove
+		elements from the page, remove graphics, and apply better print styling.
+		Here is the bookmarklet:</p>
+
+		<p>
+			<a href="javascript:/*THE.PRINTLIMINATOR*/(function(){{production}})();" id="bookmarklet" class="bookmarklet">The Printliminator</a>
+			<span class="drag-arrow"><strong>&larr;</strong> drag to your bookmarks bar</span>
+		</p>
+
+		<h2>Video Demo</h2>
+
+		<p>We used to have a quick video demo here, but Blip.tv deleted it. RUDE. Here's one we found on YouTube about it.</p>
+
+		<iframe width="500" height="320" src="//www.youtube.com/embed/TAoRvdZaFPk" frameborder="0" allowfullscreen></iframe>
+
+		<h2>Credits</h2>
+
+		<p>
+			By <a href="http://chriscoyier.net">Chris Coyier</a> and <a href="http://devongovett.wordpress.com/">Devon Govett</a>.
+			Updates & extensions by <a href="http://wowmotty.blogspot.com/">Rob Garrison</a>.
+			Icons by <a href="http://wefunction.com/2008/07/function-free-icon-set/">Function</a>.
+			Print stylesheet based on <a href="http://code.google.com/p/hartija/">Hartija</a>.
+		</p>
+
+		</div>
+
+		<script>
+		// file loaded locally, switch to local version for development
+		( function() {
+			var link,
+				loc = window.location.origin;
+			// origin is 'null' in Firefox when viewing the page locally
+			if ( loc === 'file://' || loc === 'null' ) {
+				var link = document.getElementById( 'bookmarklet' );
+				link.href = "javascript:/*THE.PRINTLIMINATOR*/(function(){{dev}})();";
+				document.getElementById('dev-mode').textContent = '(Dev Mode)';
+			}
+		})();
+		</script>
+
+	</body>
+
+</html>