index.html: import from http://zocial.smcllns.com/

plus assets and path fixups
9 年前 · c4d34bba09
--- a/index.html
+++ b/index.html
@@ -1 +0,0 @@
 sample.html
--- a/index.html
+++ b/index.html
@@ -0,0 +1,139 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Zocial | CSS3 Button Set</title>
 	<meta charset="utf-8" />
 	<link rel="stylesheet" href="site/core.css" type="text/css" media="screen" charset="utf-8" />
 	<link rel="stylesheet" href="css/zocial.css" type="text/css" media="screen" charset="utf-8" />
 	<link href='http://fonts.googleapis.com/css?family=Pompiere' rel='stylesheet' type='text/css'>
 	<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 </head>

 <body>
 		<h1>Good buttons <br />make good neighbours.</h1>

 		<div class="dingbat"></div>

 		<a href="sample.html">
 			<section id="button-sample">
 				<span>Forty-two CSS buttons and icons lovingly made for your home.</span>
 			</section>
 		</a>
 		
 		<section id="purchase-area">
 			<div class="cta">
 			<a href="http://github.com/samcollins/css-social-buttons/" class="zocial github" target="_blank"><span>Get 'em on Github</span></a>
 			<p class="subtxt"><a href="http://zocialbuttons.com/" target="_blank">Looking for the SASS framework? Get it here!</a></p>
 			</div>
 			<div class="aside">
 				<span>$24.00</span>
 				<h2>42 CSS3 font-face <br/>vector icon buttons</h2>
 				<p>For the obsessive compulsive, <br />precocious designers of the web.</p>
 			</div>
 		</section>
 		
 		<section id="labels">
 			<article>
 				<h2>Necessity</h2>
 				<p>Utilitarian minds amongst you will wonder if such elegant buttons may improve conversions amongst your users. I conservatively assume that these finely crafted treasures will do no such thing—but rather, that they will remove the fickle distractions of inconsistent buttons and clear the way for your creative hands.</p>
 			</article>
 			<article>
 				<h2>Reliability</h2>
 				<p>Pessimists will argue that the time has not yet arrived to embrace vector methods where image sprites once reigned superior. Perhaps it will be of some comfort to know that the first version of these buttons are used by WordPress and can be found in over 200,000 new blog posts every morning.</p>
 			</article>
 			<article>
 				<h2>Value</h2>
 				<p>Entrepreneurs will indulge in the principle that all good work will be rewarded and before finishing this sentence, will have already calculated the cost-benefit of purchasing these items. For those more cash-strapped, you will find the first version of these buttons deep inside the <a href="https://github.com/samcollins/css-social-buttons" target="_blank">crypts of github</a>.</p>
 			</article>
 		</section>
 		
 		<div class="dingbat"></div>

 		<section id="demo-area">

 			<div id="demo">
 				<button class="zocial googleplus">Sign in with Google+</button>
 				<form action="">
 				<input type="range" id="font-size-range" value="16" min="12" step="1" max="32" />
 				<input type="text" id="button-label-input" placeholder="Sign in with Google+" />
 				<div>
 				<input type="radio" name="demo" id="select-button" value="button" checked="checked" />
 				<label for="select-button">button</label>
 				</div>
 				<div>
 				<input type="radio" name="demo" id="select-icon" value="icon" />
 				<label for="select-icon">icon</label>
 				</div>
 				<p>Font size: <span id="font-size-display">16px</span></p>
 				<p>Button text</p>
 				<p>Type</p>
 				</form>
 			</div>

 			<h2>TRY IT YOURSELF</h2>
 			<p>Editable button text</p>
 			<p>Editable size</p>
 			<p>One version for all resolutions</p>
 			<p>100% vector icon with @font-face</p>
 			<p>Cross-browser support</p>
 			<p>Gracefully degrades (IE6, IE7)</p>
 			<p>Button &amp; Icon styles</p>

 		</section>

 		<section id="howto" class="compact">
 			<article>
 				<h2>Examples</h2>
 				<p>These buttons require no extra markup and are designed with semantics in mind. <a href="#" id="show-examples">Show examples.</a></p>
 				<h2>Create a Facebook button</h2>
 				<p>On the parent element, add a class of "zocial" and a class for the button you need, in this case "facebook". Be sure to wrap your button text in a span tag as shown:</p>
 				<code>
 					&lt;button class="zocial facebook"&gt;Sign in with Facebook&lt;/button&gt;
 				</code>
 				<h2>Create a LinkedIn button</h2>
 				<p>The parent element can be any element, this time we're using &lt;a&gt; to create a LinkedIn button:</p>
 				<code>
 					&lt;a class="zocial linkedin"&gt;Sign in with LinkedIn&lt;/a&gt;
 				</code>
 				<h2>Resize the button</h2>
 				<p>Change the size of the button by adjusting the font-size of the parent element. The default font-size is 16px.</p>
 				<code>
 					&lt;button class="zocial skype" style="font-size: 22px"&gt;Skype Me&lt;/button&gt;
 				</code>
 				<h2>Show the icon version of the button</h2>
 				<p>Simply add a class of "icon".</p>
 				<code>
 					&lt;a class="zocial twitter icon"&gt;Follow me on Twitter&lt;/a&gt;
 				</code>
 			</article>
 		</section>


 		<div class="dingbat"></div>
 		<footer>
 			<p>Made by <a href="http://smcllns.com" target="_blank">smcllns</a></p>
 			<p>circa 2011</p>
 		</footer>
 		
 	<script src="//code.jquery.com/jquery-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
 	<script src="site/size-change.js" type="text/javascript" charset="utf-8"></script>
 	<script src="site/html5slider.js" type="text/javascript" charset="utf-8"></script>

 	<script type="text/javascript">

 	  var _gaq = _gaq || [];
 	  _gaq.push(['_setAccount', 'UA-25061452-1']);
 	  _gaq.push(['_setDomainName', 'smcllns.com']);
 	  _gaq.push(['_setAllowHash', 'false']);
 	  _gaq.push(['_trackPageview']);
 	  _gaq.push(['_trackPageLoadTime']);

 	  (function() {
 	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 	  })();

 	</script>
 </body>
 </html>
--- a/site/bebasneue-webfont.eot
+++ b/site/bebasneue-webfont.eot
--- a/site/bebasneue-webfont.svg
+++ b/site/bebasneue-webfont.svg
@@ -0,0 +1,146 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>
 This is a custom SVG webfont generated by Font Squirrel.
 Copyright   : Copyright c 2010 by Ryoichi Tsunekawa All rights reserved
 Designer    : Ryoichi Tsunekawa
 Foundry     : Ryoichi Tsunekawa
 </metadata>
 <defs>
 <font id="BebasNeueRegular" horiz-adv-x="811" >
 <font-face units-per-em="2048" ascent="1638" descent="-410" />
 <missing-glyph horiz-adv-x="317" />
 <glyph unicode=" "  horiz-adv-x="317" />
 <glyph unicode="&#x09;" horiz-adv-x="317" />
 <glyph unicode="&#xa0;" horiz-adv-x="317" />
 <glyph unicode="!" horiz-adv-x="389" d="M82 836v598h225v-598l-28 -519h-168zM86 0v217h217v-217h-217z" />
 <glyph unicode="&#x22;" horiz-adv-x="665" d="M82 1434h217l-33 -422h-153zM367 1434h217l-33 -422h-154z" />
 <glyph unicode="#" horiz-adv-x="839" d="M31 410l16 159h100l39 375h-102l16 160h103l35 330h184l-35 -330h133l35 330h184l-34 -330h104l-16 -160h-105l-39 -375h105l-17 -159h-104l-43 -410h-184l43 410h-134l-43 -410h-184l43 410h-100zM332 569h133l39 375h-133z" />
 <glyph unicode="$" d="M70 365v98h213v-113q0 -139 116.5 -139t116.5 139q0 68 -32.5 127.5t-82 99t-105.5 89.5l-106 100q-49 49 -81.5 128t-32.5 175q0 297 237 350v107h185v-107q242 -49 241 -350v-45h-213v59q0 141 -112 141h-1q-112 0 -112 -141q0 -80 45 -146.5t110 -117.5l130 -108 q65 -56 110 -145t45 -201q0 -147 -62.5 -237.5t-180.5 -115.5v-104h-185v104q-244 49 -243 353z" />
 <glyph unicode="%" horiz-adv-x="1284" d="M70 743v471q0 111 55 170.5t161.5 59.5t162 -59.5t55.5 -170.5v-471q0 -111 -55.5 -170t-162 -59t-161.5 59t-55 170zM213 733q0 -90 73.5 -90t73.5 90v492q0 90 -73.5 90t-73.5 -90v-492zM287 0l565 1434h133l-565 -1434h-133zM780 219v471q0 111 55.5 170.5t162 59.5 t161.5 -59.5t55 -170.5v-471q0 -111 -55 -170t-161.5 -59t-162 59t-55.5 170zM924 209q0 -90 73.5 -90t73.5 90v491q0 90 -73.5 90t-73.5 -90v-491z" />
 <glyph unicode="&#x26;" horiz-adv-x="847" d="M84 311v146q0 231 156 301q-156 66 -156 295v26q0 354 336 355h258v-205h-254q-115 0 -115 -139v-89q0 -82 34 -116.5t101 -34.5h99v160h225v-160h59v-205h-59v-471q0 -117 25 -174h-230q-16 45 -20 113q-59 -129 -209 -129q-250 0 -250 327zM309 330q0 -141 117 -142 q111 0 117 125v332h-86q-78 0 -113 -42t-35 -140v-133z" />
 <glyph unicode="'" horiz-adv-x="368" d="M76 1434h217l-33 -422h-154z" />
 <glyph unicode="(" horiz-adv-x="514" d="M96 313v807q0 170 73 242t243 72h69v-185h-55q-55 0 -79.5 -27.5t-24.5 -101.5v-807q0 -74 24.5 -101.5t79.5 -27.5h55v-184h-69q-170 0 -243 71.5t-73 241.5z" />
 <glyph unicode=")" horiz-adv-x="514" d="M33 0v184h55q55 0 80 28t25 101v807q0 74 -25 101.5t-80 27.5h-55v185h69q170 0 243 -72t73 -242v-807q0 -170 -73 -241.5t-243 -71.5h-69z" />
 <glyph unicode="*" d="M4 1075l57 174l306 -153l-54 338h185l-54 -338l306 153l57 -174l-336 -57l240 -240l-148 -108l-157 303l-158 -303l-148 108l240 240z" />
 <glyph unicode="+" d="M51 637v160h275v276h159v-276h275v-160h-275v-281h-159v281h-275z" />
 <glyph unicode="," horiz-adv-x="380" d="M82 0v217h217v-194l-98 -228h-92l59 205h-86z" />
 <glyph unicode="-" horiz-adv-x="552" d="M72 614v205h409v-205h-409z" />
 <glyph unicode="." horiz-adv-x="380" d="M82 0v217h217v-217h-217z" />
 <glyph unicode="/" horiz-adv-x="780" d="M10 0l565 1434h195l-565 -1434h-195z" />
 <glyph unicode="0" d="M63 344v746q0 172 88.5 266t254 94t254 -94t88.5 -266v-746q0 -172 -88.5 -266t-254 -94t-254 94t-88.5 266zM289 330q0 -141 117 -142q116 0 116 142v774q0 141 -116.5 141t-116.5 -141v-774z" />
 <glyph unicode="1" d="M221 1094v159q82 0 134.5 28t71.5 60.5t42 92.5h152v-1434h-226v1094h-174z" />
 <glyph unicode="2" d="M82 0v176q0 117 46 214t111 170l131 144q66 70 112 166t46 211q0 92 -29.5 128t-86.5 36q-117 0 -117 -141v-154h-213v140q0 174 86 267t250 93t250 -93t86 -267q0 -131 -50.5 -247t-120 -198t-137 -153.5t-109.5 -144.5q-33 -57 -33 -111q0 -16 3 -31h426v-205h-651z " />
 <glyph unicode="3" d="M70 344v119h213v-133q0 -141 116 -142q57 0 87 36t30 126v113q0 98 -35 140t-112 42h-76v205h88q68 0 101.5 34.5t33.5 116.5v80q0 92 -29.5 128t-87.5 36q-117 0 -116 -141v-92h-213v78q0 174 86 267t249.5 93t249.5 -93t86 -267v-37q0 -229 -157 -295q158 -70 157 -301 v-113q0 -174 -86 -267t-249.5 -93t-249.5 93t-86 267z" />
 <glyph unicode="4" d="M29 260v205l409 969h246v-969h107v-205h-107v-260h-225v260h-430zM236 465h223v530z" />
 <glyph unicode="5" d="M72 344v119h213v-133q0 -139 117 -140q116 0 116 140v315q0 141 -116.5 141t-116.5 -141v-43h-213l41 832h594v-205h-392l-18 -342q63 104 197 104q250 0 249 -327v-320q0 -174 -86 -267t-249.5 -93t-249.5 93t-86 267z" />
 <glyph unicode="6" d="M68 344v733q0 373 344 373q164 0 250 -93t86 -267v-37h-213v51q0 141 -117 141q-63 0 -94 -39t-31 -137v-262q59 127 209 127q250 0 250 -328v-262q0 -172 -88.5 -266t-254 -94t-253.5 94t-88 266zM293 330q0 -139 117 -140q116 0 116 140v258q0 141 -116.5 141 t-116.5 -141v-258z" />
 <glyph unicode="7" d="M68 1229v205h675v-197l-331 -1237h-226l330 1229h-448z" />
 <glyph unicode="8" d="M53 1044v46q0 172 91.5 266t261 94t261 -94t91.5 -266v-46q0 -211 -140 -288q139 -78 140 -299v-113q0 -172 -91.5 -266t-261 -94t-261 94t-91.5 266v113q0 221 140 299q-139 76 -140 288zM279 350q0 -162 127 -162q125 0 126 162v133q0 162 -126.5 162t-126.5 -162v-133 zM279 1001q0 -152 126 -152l1 1q126 0 126 151v80q0 164 -126.5 164t-126.5 -164v-80z" />
 <glyph unicode="9" d="M59 827v263q0 172 88.5 266t254 94t253.5 -94t88 -266v-734q0 -372 -342 -372h-2q-164 0 -250 93t-86 267v37h213v-51q0 -141 117 -142q63 0 94 39t31 138v262q-59 -127 -209 -127q-250 0 -250 327zM285 846q0 -141 116.5 -141t116.5 141v258q0 139 -116.5 139 t-116.5 -139v-258z" />
 <glyph unicode=":" horiz-adv-x="380" d="M82 0v217h217v-217h-217zM82 780v217h217v-217h-217z" />
 <glyph unicode=";" horiz-adv-x="380" d="M82 0v217h217v-194l-98 -228h-92l59 205h-86zM82 780v217h217v-217h-217z" />
 <glyph unicode="&#x3c;" d="M61 637v160l668 245v-161l-459 -164l459 -164v-162z" />
 <glyph unicode="=" d="M72 471v160h667v-160h-667zM72 803v160h667v-160h-667z" />
 <glyph unicode="&#x3e;" d="M82 391v162l459 164l-459 164v161l668 -245v-160z" />
 <glyph unicode="?" horiz-adv-x="737" d="M41 948v142q0 174 84 267t248 93t248 -93t84 -267q0 -125 -42 -228.5t-91.5 -160t-91.5 -137.5t-42 -167q0 -45 8 -80h-200q-12 37 -13 89q0 104 39 191t84 141.5t84 150.5t39 215q0 141 -112.5 141t-112.5 -141v-156h-213zM236 0v217h217v-217h-217z" />
 <glyph unicode="@" horiz-adv-x="1411" d="M49 594q0 193 48 358.5t139.5 291.5t238 199t330.5 73q303 0 436 -164t133 -439q0 -178 -39 -312t-102.5 -204.5t-127.5 -103.5t-130 -33q-168 0 -180 135q-60 -123 -187 -123h-12q-188 5 -188 239q0 36 4 77l22 207q16 152 80 229q61 74 160 74h10q127 -2 168 -127 l12 119h197l-62 -592q-1 -6 -1 -11q0 -40 42 -41q80 0 122 142.5t42 320.5q0 201 -100 316.5t-307 115.5q-270 0 -412.5 -200.5t-142.5 -556.5q0 -254 119.5 -394.5t357.5 -140.5q244 0 424 139l-17 -196q-172 -115 -419 -115q-334 0 -496 191.5t-162 525.5zM610 598 q-2 -16 -2 -30q0 -101 90 -105h6q43 0 71 29q30 32 38 100l21 194q1 11 1 21q0 42 -20 65q-24 29 -70 29h-6q-45 0 -73 -29q-29 -30 -37 -100z" />
 <glyph unicode="A" horiz-adv-x="833" d="M23 0l229 1434h330l229 -1434h-227l-39 260h-277l-39 -260h-206zM297 455h217l-108 725z" />
 <glyph unicode="B" horiz-adv-x="831" d="M82 0v1434h340q174 0 254 -81t80 -249v-51q0 -221 -146 -289q168 -66 168 -307v-117q0 -166 -87 -253t-255 -87h-354zM307 205h129q59 0 88 31.5t29 109.5v125q0 98 -33.5 136t-111.5 38h-101v-440zM307 850h88q68 0 101.5 35t33.5 116v80q1 148 -114 148h-109v-379z" />
 <glyph unicode="C" horiz-adv-x="790" d="M63 344v746q0 174 86.5 267t250 93t249.5 -93t86 -267v-140h-213v154q0 141 -116.5 141t-116.5 -141v-774q1 -140 117 -140q117 0 116 140v205h213v-191q0 -174 -86 -267t-249.5 -93t-250 93t-86.5 267z" />
 <glyph unicode="D" horiz-adv-x="835" d="M82 0v1434h356q336 0 336 -355v-725q0 -354 -336 -354h-356zM307 205h127q115 0 115 139v746q0 139 -115 139h-127v-1024z" />
 <glyph unicode="E" horiz-adv-x="753" d="M82 0v1434h614v-205h-389v-400h309v-204h-309v-420h389v-205h-614z" />
 <glyph unicode="F" horiz-adv-x="704" d="M82 0v1434h596v-205h-371v-432h291v-205h-291v-592h-225z" />
 <glyph unicode="G" horiz-adv-x="798" d="M63 344v746q0 174 86.5 267t250 93t249.5 -93t86 -267v-140h-213v154q0 141 -116.5 141t-116.5 -141v-774q0 -139 117 -140q116 0 116 140v264h-102v205h315v-455q0 -174 -86 -267t-249.5 -93t-250 93t-86.5 267z" />
 <glyph unicode="H" horiz-adv-x="874" d="M82 0v1434h225v-615h256v615h230v-1434h-230v614h-256v-614h-225z" />
 <glyph unicode="I" horiz-adv-x="389" d="M82 0v1434h225v-1434h-225z" />
 <glyph unicode="J" horiz-adv-x="524" d="M20 0v205q25 -2 78 -2q129 0 129 137v1094h226v-1078q0 -360 -324 -360q-72 0 -109 4z" />
 <glyph unicode="K" horiz-adv-x="847" d="M82 0v1434h225v-625l295 625h225l-313 -639l313 -795h-231l-219 571l-70 -131v-440h-225z" />
 <glyph unicode="L" horiz-adv-x="694" d="M82 0v1434h225v-1229h371v-205h-596z" />
 <glyph unicode="M" horiz-adv-x="1107" d="M80 0v1434h313l166 -1018l154 1018h313v-1434h-213v1028l-156 -1028h-213l-168 1014v-1014h-196z" />
 <glyph unicode="N" horiz-adv-x="874" d="M80 0v1434h282l232 -859v859h201v-1434h-232l-280 1038v-1038h-203z" />
 <glyph unicode="O" d="M63 344v746q0 172 88.5 266t254 94t254 -94t88.5 -266v-746q0 -172 -88.5 -266t-254 -94t-254 94t-88.5 266zM289 330q1 -141 117 -142q117 0 116 142v774q0 141 -116.5 141t-116.5 -141v-774z" />
 <glyph unicode="P" horiz-adv-x="772" d="M82 0v1434h332q336 0 336 -355v-186q0 -354 -336 -354h-107v-539h-225zM307 743h107q55 0 82.5 31t27.5 105v215q0 74 -27.5 104.5t-82.5 30.5h-107v-486z" />
 <glyph unicode="Q" d="M63 1090q0 172 88.5 266t254 94t254 -94t88.5 -266v-746q0 -121 -43 -201q12 -30 60 -30h3h20v-201h-30q-145 0 -195 98q-71 -26 -151 -26h-6q-166 0 -254.5 94t-88.5 266v746zM289 330q0 -141 116 -142h1q116 0 116 142v774q0 141 -116.5 141t-116.5 -141v-774z" />
 <glyph unicode="R" horiz-adv-x="823" d="M82 0v1434h340q174 0 254 -81t80 -249v-113q0 -221 -148 -291q150 -63 150 -305v-221v-9q0 -110 24 -165h-229q-20 61 -21 176v225q0 98 -34.5 140.5t-112.5 42.5h-78v-584h-225zM307 788h88q68 0 101.5 35t33.5 117v141q1 148 -114 148h-109v-441z" />
 <glyph unicode="S" horiz-adv-x="765" d="M47 344v88h213v-102q0 -140 117 -140h1q116 0 116 140q0 80 -46 150t-110 128l-130 120q-66 63 -110.5 156t-44.5 206q0 174 84 267t248 93t248 -93t84 -267v-46h-213v60q0 141 -112.5 141t-112.5 -141q0 -59 24.5 -112.5t63.5 -96.5t86 -85t93 -88t85 -98.5t63.5 -124 t24.5 -155.5q0 -174 -86 -267t-250 -93t-250 93t-86 267z" />
 <glyph unicode="T" horiz-adv-x="729" d="M16 1229v205h697v-205h-236v-1229h-225v1229h-236z" />
 <glyph unicode="U" horiz-adv-x="815" d="M72 342v1092h225v-1106q1 -140 117 -140q117 0 116 140v1106h213v-1092q0 -174 -86 -267t-249.5 -93t-249.5 93t-86 267z" />
 <glyph unicode="V" horiz-adv-x="823" d="M23 1434h227l172 -1170l172 1170h207l-221 -1434h-336z" />
 <glyph unicode="W" horiz-adv-x="1153" d="M31 1434h219l121 -1131l108 1131h217l113 -1139l117 1139h196l-159 -1434h-299l-82 764l-82 -764h-310z" />
 <glyph unicode="X" horiz-adv-x="880" d="M31 0l252 737l-236 697h234l170 -529l174 529h209l-236 -697l252 -737h-238l-184 567l-186 -567h-211z" />
 <glyph unicode="Y" d="M8 1434h236l172 -654l172 654h215l-285 -959v-475h-225v475z" />
 <glyph unicode="Z" horiz-adv-x="757" d="M47 0v201l428 1028h-407v205h639v-201l-428 -1028h428v-205h-660z" />
 <glyph unicode="[" horiz-adv-x="514" d="M96 0v1434h373v-185h-147v-1065h147v-184h-373z" />
 <glyph unicode="\" horiz-adv-x="780" d="M10 1434h195l565 -1434h-195z" />
 <glyph unicode="]" horiz-adv-x="514" d="M45 0v184h148v1065h-148v185h373v-1434h-373z" />
 <glyph unicode="^" d="M41 799l285 635h159l285 -635h-180l-184 430l-185 -430h-180z" />
 <glyph unicode="_" horiz-adv-x="1024" d="M0 -20h1024v-164h-1024v164z" />
 <glyph unicode="`" horiz-adv-x="512" d="M90 1737h232l139 -228h-162z" />
 <glyph unicode="a" horiz-adv-x="833" d="M23 0l229 1434h330l229 -1434h-227l-39 260h-277l-39 -260h-206zM297 455h217l-108 725z" />
 <glyph unicode="b" horiz-adv-x="831" d="M82 0v1434h340q174 0 254 -81t80 -249v-51q0 -221 -146 -289q168 -66 168 -307v-117q0 -166 -87 -253t-255 -87h-354zM307 205h129q59 0 88 31.5t29 109.5v125q0 98 -33.5 136t-111.5 38h-101v-440zM307 850h88q68 0 101.5 35t33.5 116v80q1 148 -114 148h-109v-379z" />
 <glyph unicode="c" horiz-adv-x="790" d="M63 344v746q0 174 86.5 267t250 93t249.5 -93t86 -267v-140h-213v154q0 141 -116.5 141t-116.5 -141v-774q1 -140 117 -140q117 0 116 140v205h213v-191q0 -174 -86 -267t-249.5 -93t-250 93t-86.5 267z" />
 <glyph unicode="d" horiz-adv-x="835" d="M82 0v1434h356q336 0 336 -355v-725q0 -354 -336 -354h-356zM307 205h127q115 0 115 139v746q0 139 -115 139h-127v-1024z" />
 <glyph unicode="e" horiz-adv-x="753" d="M82 0v1434h614v-205h-389v-400h309v-204h-309v-420h389v-205h-614z" />
 <glyph unicode="f" horiz-adv-x="704" d="M82 0v1434h596v-205h-371v-432h291v-205h-291v-592h-225z" />
 <glyph unicode="g" horiz-adv-x="798" d="M63 344v746q0 174 86.5 267t250 93t249.5 -93t86 -267v-140h-213v154q0 141 -116.5 141t-116.5 -141v-774q0 -139 117 -140q116 0 116 140v264h-102v205h315v-455q0 -174 -86 -267t-249.5 -93t-250 93t-86.5 267z" />
 <glyph unicode="h" horiz-adv-x="874" d="M82 0v1434h225v-615h256v615h230v-1434h-230v614h-256v-614h-225z" />
 <glyph unicode="i" horiz-adv-x="389" d="M82 0v1434h225v-1434h-225z" />
 <glyph unicode="j" horiz-adv-x="524" d="M20 0v205q25 -2 78 -2q129 0 129 137v1094h226v-1078q0 -360 -324 -360q-72 0 -109 4z" />
 <glyph unicode="k" horiz-adv-x="847" d="M82 0v1434h225v-625l295 625h225l-313 -639l313 -795h-231l-219 571l-70 -131v-440h-225z" />
 <glyph unicode="l" horiz-adv-x="694" d="M82 0v1434h225v-1229h371v-205h-596z" />
 <glyph unicode="m" horiz-adv-x="1107" d="M80 0v1434h313l166 -1018l154 1018h313v-1434h-213v1028l-156 -1028h-213l-168 1014v-1014h-196z" />
 <glyph unicode="n" horiz-adv-x="874" d="M80 0v1434h282l232 -859v859h201v-1434h-232l-280 1038v-1038h-203z" />
 <glyph unicode="o" d="M63 344v746q0 172 88.5 266t254 94t254 -94t88.5 -266v-746q0 -172 -88.5 -266t-254 -94t-254 94t-88.5 266zM289 330q1 -141 117 -142q117 0 116 142v774q0 141 -116.5 141t-116.5 -141v-774z" />
 <glyph unicode="p" horiz-adv-x="772" d="M82 0v1434h332q336 0 336 -355v-186q0 -354 -336 -354h-107v-539h-225zM307 743h107q55 0 82.5 31t27.5 105v215q0 74 -27.5 104.5t-82.5 30.5h-107v-486z" />
 <glyph unicode="q" d="M63 1090q0 172 88.5 266t254 94t254 -94t88.5 -266v-746q0 -121 -43 -201q12 -30 60 -30h3h20v-201h-30q-145 0 -195 98q-71 -26 -151 -26h-6q-166 0 -254.5 94t-88.5 266v746zM289 330q0 -141 116 -142h1q116 0 116 142v774q0 141 -116.5 141t-116.5 -141v-774z" />
 <glyph unicode="r" horiz-adv-x="823" d="M82 0v1434h340q174 0 254 -81t80 -249v-113q0 -221 -148 -291q150 -63 150 -305v-221v-9q0 -110 24 -165h-229q-20 61 -21 176v225q0 98 -34.5 140.5t-112.5 42.5h-78v-584h-225zM307 788h88q68 0 101.5 35t33.5 117v141q1 148 -114 148h-109v-441z" />
 <glyph unicode="s" horiz-adv-x="765" d="M47 344v88h213v-102q0 -140 117 -140h1q116 0 116 140q0 80 -46 150t-110 128l-130 120q-66 63 -110.5 156t-44.5 206q0 174 84 267t248 93t248 -93t84 -267v-46h-213v60q0 141 -112.5 141t-112.5 -141q0 -59 24.5 -112.5t63.5 -96.5t86 -85t93 -88t85 -98.5t63.5 -124 t24.5 -155.5q0 -174 -86 -267t-250 -93t-250 93t-86 267z" />
 <glyph unicode="t" horiz-adv-x="729" d="M16 1229v205h697v-205h-236v-1229h-225v1229h-236z" />
 <glyph unicode="u" horiz-adv-x="815" d="M72 342v1092h225v-1106q1 -140 117 -140q117 0 116 140v1106h213v-1092q0 -174 -86 -267t-249.5 -93t-249.5 93t-86 267z" />
 <glyph unicode="v" horiz-adv-x="823" d="M23 1434h227l172 -1170l172 1170h207l-221 -1434h-336z" />
 <glyph unicode="w" horiz-adv-x="1153" d="M31 1434h219l121 -1131l108 1131h217l113 -1139l117 1139h196l-159 -1434h-299l-82 764l-82 -764h-310z" />
 <glyph unicode="x" horiz-adv-x="880" d="M31 0l252 737l-236 697h234l170 -529l174 529h209l-236 -697l252 -737h-238l-184 567l-186 -567h-211z" />
 <glyph unicode="y" d="M8 1434h236l172 -654l172 654h215l-285 -959v-475h-225v475z" />
 <glyph unicode="z" horiz-adv-x="757" d="M47 0v201l428 1028h-407v205h639v-201l-428 -1028h428v-205h-660z" />
 <glyph unicode="{" horiz-adv-x="526" d="M23 625v184q63 0 85.5 25.5t26.5 97.5l17 274q8 113 68.5 170.5t158.5 57.5h115v-185h-33q-55 0 -80 -31.5t-29 -113.5l-10 -205q-8 -149 -133 -182q125 -33 133 -182l10 -205q4 -82 29 -114t80 -32h33v-184h-115q-98 0 -158.5 57.5t-68.5 169.5l-17 275 q-4 72 -26.5 97.5t-85.5 25.5z" />
 <glyph unicode="|" horiz-adv-x="1024" d="M430 -133v1700h184v-1700h-184z" />
 <glyph unicode="}" horiz-adv-x="526" d="M33 1249v185h114q98 0 159 -57.5t69 -170.5l16 -274q4 -72 26.5 -97.5t86.5 -25.5v-184q-63 0 -86 -26t-27 -97l-16 -275q-8 -113 -68.5 -170t-159.5 -57h-114v184h33q55 0 79.5 32t28.5 114l10 205q8 149 133 182q-125 33 -133 182l-10 205q-4 82 -28.5 113.5 t-79.5 31.5h-33z" />
 <glyph unicode="~" d="M16 680q70 104 126.5 144t117.5 40q59 0 155.5 -62.5t137.5 -62.5q33 0 58.5 23.5t76.5 93.5l107 -111q-70 -102 -125.5 -139t-118.5 -37q-59 0 -155.5 62.5t-137.5 62.5q-35 0 -60.5 -23t-74.5 -93z" />
 <glyph unicode="&#xa2;" d="M74 426v582q0 297 239 350v106h185v-104q248 -49 247 -352v-99h-213v113q0 141 -116.5 141t-116.5 -141v-610q0 -139 117 -140q116 0 116 140v163h213v-149q0 -305 -247 -352v-105h-185v107q-240 49 -239 350z" />
 <glyph unicode="&#xa3;" d="M61 0v197q82 0 137.5 62.5t57.5 170.5h-166v174h137q-14 39 -56 123t-65.5 167t-23.5 196q0 174 84 267t248 93t247.5 -93t83.5 -267v-142h-213v156q0 141 -112.5 141t-112.5 -141q0 -113 24.5 -200t62.5 -167t50 -133h248v-174h-233q-14 -145 -115 -225h387v-205h-670z " />
 <glyph unicode="&#xa5;" d="M14 1434h236l166 -633l166 633h215l-262 -879h170v-113h-187v-92h187v-112h-187v-238h-225v238h-187v112h187v92h-187v113h168z" />
 <glyph unicode="&#xa9;" horiz-adv-x="1507" d="M41 716.5q0 317.5 204 525.5t509 208t508.5 -208t203.5 -525.5t-203.5 -525t-508.5 -207.5t-509 207.5t-204 525zM188 717q0 -256 161 -423t404.5 -167t404.5 167t161 423t-161 423t-404.5 167t-404.5 -167t-161 -423zM514 516v397q0 254 231.5 254t231.5 -254v-73h-148 v86q0 98 -79.5 98t-79.5 -98v-418q0 -96 79.5 -96t79.5 96v123h148v-115q0 -250 -231.5 -250t-231.5 250z" />
 <glyph unicode="&#xad;" horiz-adv-x="552" d="M72 614v205h409v-205h-409z" />
 <glyph unicode="&#xae;" horiz-adv-x="1507" d="M41 716.5q0 317.5 204 525.5t509 208t508.5 -208t203.5 -525.5t-203.5 -525t-508.5 -207.5t-509 207.5t-204 525zM188 717q0 -256 161 -423t404.5 -167t404.5 167t161 423t-161 423t-404.5 167t-404.5 -167t-161 -423zM528 279v876h238q231 0 231 -229v-19 q0 -156 -106 -202q106 -43 106 -211v-95q1 -79 19 -120h-160q-14 37 -14 122v95q0 70 -24.5 98.5t-80.5 28.5h-53v-344h-156zM684 766h64q94 0 94 104v37q0 105 -84 105h-74v-246z" />
 <glyph unicode="&#xb4;" horiz-adv-x="512" d="M55 1509l140 228h221l-209 -228h-152z" />
 <glyph unicode="&#x2000;" horiz-adv-x="868" />
 <glyph unicode="&#x2001;" horiz-adv-x="1737" />
 <glyph unicode="&#x2002;" horiz-adv-x="868" />
 <glyph unicode="&#x2003;" horiz-adv-x="1737" />
 <glyph unicode="&#x2004;" horiz-adv-x="579" />
 <glyph unicode="&#x2005;" horiz-adv-x="434" />
 <glyph unicode="&#x2006;" horiz-adv-x="289" />
 <glyph unicode="&#x2007;" horiz-adv-x="289" />
 <glyph unicode="&#x2008;" horiz-adv-x="217" />
 <glyph unicode="&#x2009;" horiz-adv-x="347" />
 <glyph unicode="&#x200a;" horiz-adv-x="96" />
 <glyph unicode="&#x2010;" horiz-adv-x="552" d="M72 614v205h409v-205h-409z" />
 <glyph unicode="&#x2011;" horiz-adv-x="552" d="M72 614v205h409v-205h-409z" />
 <glyph unicode="&#x2012;" horiz-adv-x="552" d="M72 614v205h409v-205h-409z" />
 <glyph unicode="&#x2013;" horiz-adv-x="1024" d="M0 625v184h1024v-184h-1024z" />
 <glyph unicode="&#x2014;" horiz-adv-x="2048" d="M0 625v184h2048v-184h-2048z" />
 <glyph unicode="&#x2018;" horiz-adv-x="380" d="M82 1012v194l98 228h92l-59 -205h86v-217h-217z" />
 <glyph unicode="&#x2019;" horiz-adv-x="380" d="M82 1217v217h217v-195l-98 -227h-92l59 205h-86z" />
 <glyph unicode="&#x201c;" horiz-adv-x="679" d="M82 1012v194l98 228h92l-59 -205h86v-217h-217zM381 1012v194l98 228h92l-59 -205h86v-217h-217z" />
 <glyph unicode="&#x201d;" horiz-adv-x="679" d="M82 1217v217h217v-195l-98 -227h-92l59 205h-86zM381 1217v217h217v-195l-98 -227h-92l59 205h-86z" />
 <glyph unicode="&#x2022;" d="M121 717q0 119 83 201.5t201.5 82.5t201.5 -82.5t83 -201.5t-83 -202t-201.5 -83t-201.5 83t-83 202z" />
 <glyph unicode="&#x2026;" horiz-adv-x="978" d="M82 0v217h217v-217h-217zM381 0v217h217v-217h-217zM680 0v217h217v-217h-217z" />
 <glyph unicode="&#x202f;" horiz-adv-x="347" />
 <glyph unicode="&#x205f;" horiz-adv-x="434" />
 <glyph unicode="&#x20ac;" d="M39 553v113h57v112h-57v113h57v199q0 174 83 267t247 93t247 -93t83 -267v-105h-213v119q0 141 -110.5 141t-110.5 -141v-213h315v-113h-315v-112h315v-113h-315v-223q0 -139 110 -140h1q110 0 110 140v129h213v-115q0 -174 -83 -267t-247 -93t-247 93t-83 267v209h-57z " />
 <glyph unicode="&#x2122;" horiz-adv-x="1200" d="M20 1303v131h443v-131h-150v-598h-143v598h-150zM549 705v729h199l106 -512l96 512h199v-729h-135v518l-96 -518h-136l-108 514v-514h-125z" />
 <glyph unicode="&#xe000;" horiz-adv-x="1435" d="M0 1435h1435v-1435h-1435v1435z" />
 </font>
 </defs></svg> 
--- a/site/bebasneue-webfont.ttf
+++ b/site/bebasneue-webfont.ttf
--- a/site/bebasneue-webfont.woff
+++ b/site/bebasneue-webfont.woff
--- a/site/button-sample.png
+++ b/site/button-sample.png
--- a/site/core.css
+++ b/site/core.css
@@ -0,0 +1,329 @@
@font-face {
    font-family: 'Bebas Neue';
    src: url('bebasneue-webfont.eot');
    src: url('bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
         url('bebasneue-webfont.woff') format('woff'),
         url('bebasneue-webfont.ttf') format('truetype'),
         url('bebasneue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
 }
@font-face {
 	font-family: "pictos";
 	src:
 		url("pictos-web.eot?") format("eot"),
 		url("pictos-web.woff") format("woff"),
 		url("pictos-web.ttf") format("truetype"),
 		url("pictos-web.svg#webfontIyfZbseF") format("svg");
 	font-weight: normal;
 	font-style: normal;
 }
 body {
 	background: #f0ecdf url('white-radial-gradient.png') no-repeat center 50px;
 	color: #312C2A;
 	font-family: Georgia, serif;
 	margin: 4em auto;
 	text-shadow: 0 1px 0 rgba(255,255,255,0.75);
 	width: 800px;
 }

 h1 {
 	font-family: "Baskerville Old Face", Georgia, serif;
 	line-height: 1.5em;
 	font-weight: normal;
 	text-align: center;
 	font-size: 2em;
 	padding: 0;
 	margin: 0;
 }
 h2, #button-sample:before {
 	text-transform: uppercase;
 	font-family: "Bebas Neue", "Helvetica Neue", serif;
 	font-size: 20px;
 	font-weight: normal;
 }
 h1, h2, p, #purchase-area > div > span {
 	opacity: 0.9;
 }
 a {
 	color: #312C2A;
 	color: rgba(49,44,42,0.75);
 	text-decoration: none;
 }
 a:hover {
 	border-bottom: 1px solid rgba(49,44,42,0.5);
 }
 .dingbat {
 	background: url(dingbat.png) no-repeat center center;
 	width: 63px;
 	height: 29px;
 	margin: 0 auto;
 	padding: 64px 0;
 	opacity: 0.75;
 	clear: both;
 }


 #button-sample {
 	margin: 0 auto 64px;
 	width: 804px;
 	height: 314px;
 	background: url(button-sample.png) no-repeat center top;
 	text-align: center;
 	position: relative;
 	cursor: pointer;
 }
 #button-sample:hover:before {
 	content: "view demo";
 	display: block;
 	background: #fff;
 	background: rgba(255,255,255,0.75);
 	width: 128px;
 	height: 128px;
 	line-height: 128px;
 	white-space: nowrap;
 	position: absolute;
 	left: 50%;
 	margin-left: -64px;
 	z-index: 100;
 	border-radius: 100px;
 	-moz-border-radius: 100px;
 	-webkit-border-radius: 100px;
 	top: 50%;
 	margin-top: -96px;
 }
 #button-sample > span {
 	text-align: center;
 	display: block;
 	width: 100%;
 	position: absolute;
 	bottom: 32px;
 	left: 0;
 	font-weight: normal;
 	font-size: 13px;
 	color: #777;
 	padding: 16px 0;
 }
 #button-sample > span:before {
 	content: "k ";
 	font-family: "pictos";
 	color: #BA5B64;
 	font-size: 18px;
 }
 #purchase-area > a.zocial {
 	margin: 48px 0;
 	font-size: 20px;
 	display: inline-block;
 }
 #purchase-area > p.subtxt {
 	width: 45.5%;
 	padding: 0 10px;
 	margin: 10px 9% 0;
 	text-align: center;
 	font-size: 15px;
 }
 #purchase-area > p.subtxt > a {
 	line-height: 1.5;
 	padding-bottom: 2px;
 	border-bottom: 1px solid rgba(0,0,0,0.25);
 }
 #purchase-area > p.subtxt > a:hover {
 	color: rgba(0,0,0,0.9);
 }
 #purchase-area div.cta {
 	float: left;
 	width: 60%;
 	padding: 72px 32px;
 	text-align: center;
 }
 #purchase-area div.aside {
 	margin-left: 69%;
 	width: 30%;
 	margin-top: -32px;
 }
 #purchase-area div.aside > span {
 	font-size: 48px;
 	padding: 16px 0;
 	margin: 0 0 2px 0;
 	border-bottom: 4px solid rgba(0,0,0,0.75);
 	position: relative;
 	display: block;
 	font-weight: bold;
 	text-decoration: line-through;
 }
 #purchase-area div.aside p {
 	padding: 16px 0;
 	margin: 0;
 }
 #purchase-area div.aside h2 {
 	padding: 16px 0;
 	margin: 0 0 2px 0;
 	border-bottom: 4px solid rgba(0,0,0,0.75);
 	border-top: 1px solid rgba(0,0,0,0.75);
 }
 #purchase-area div.aside p {
 	font-size: 12px;
 }
 #labels {
 	margin-top: 48px;
 }
 #labels > article {
 	width: 30%;
 	float: left;
 	margin-right: 4.5%;
 }
 #labels > article:nth-of-type(3) {
 	margin-right: 0;
 }
 #labels p:first-letter {
 	float: left;
 	font-size: 56px;
 	line-height: 56px;
 	padding: 0 10px 0 0;
 	display: block;
 }
 #labels p,
 #demo-area > p {
 	font-size: 12px;
 }
 #demo-area {
 	padding: 0;
 }
 #demo-area > p:before {
 	font-family: "pictos";
 	content: "3 ";
 }
 #demo-area > h2 {
 	border-bottom: 4px solid rgba(0,0,0,0.75);
 	padding: 4px 0;
 	margin-bottom: 2px;
 }
 #demo-area > p:nth-of-type(1) {
 	border-top: 1px solid rgba(0,0,0,0.75);
 	padding-top: 1em;
 	margin-top: 2px;
 }
 #demo-area > h2,
 #demo-area > p {
 	margin-left: 69%;
 	width: 30%;
 }
 #demo {
 	float: left;
 	width: 64.5%;
 	padding-top: 64px;
 	height: 154px;
 	-webkit-border-radius: 2px;
 	-moz-border-radius: 2px;
 	border-radius: 2px;
 	position: relative;
 	text-align: center;
 }
 #demo form {
 	position: absolute;
 	bottom: 0;
 	width: 96%;
 	margin: 0;
 	background: rgba(0,0,0,0.1);
 	-webkit-border-radius: 2px 2px 4px 4px;
 	-moz-border-radius: 2px 2px 4px 4px;
 	border-radius: 2px 2px 4px 4px;
 	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 0px rgba(0,0,0,0.25);
 	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 0px rgba(0,0,0,0.25);
 	box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 0px rgba(0,0,0,0.25);
 	border-top: 1px solid rgba(0,0,0,0);
 	text-align: left;
 	padding: 4px 2%;
 }
 #demo form > p {
 	font-size: 12px;
 	font-weight: normal;
 	float: left;
 	text-align: center;
 	margin: 0;
 	width: 30%;
 	padding: 8px 1.5%;
 }
 #demo form > input:nth-of-type(1),
 #demo form > input:nth-of-type(2) {
 	width: 29%;
 	display: inline-block;
 	margin: 0 1.5%;
 	font-size: 11px;
 	padding: 1% 0.5%;
 	border: 0;
 	border-radius: 2px;
 }
 #demo form > input:nth-of-type(1) {
 	width: 26%;
 	margin: 0 3%;
 }
 #demo form > input:nth-of-type(2) {
 	width: 31%;
 	-webkit-box-shadow: inset 0 1px 0px rgba(0,0,0,0.35);
 	-moz-box-shadow: inset 0 1px 0px rgba(0,0,0,0.35);
 	box-shadow: inset 0 1px 0px rgba(0,0,0,0.35);
 	border-bottom: 1px solid rgba(255,255,255,0.35);
 }
 #demo form > div {
 	text-align: center;
 	display: inline-block;
 	font-size: 12px;
 	width: 13%;
 }
 #demo form > div:nth-of-type(1) {
 	margin-left: 3%;
 }
 #howto {
 	padding: 64px 0 0;
 }
 #howto.compact code,
 #howto.compact p:nth-of-type(n+2),
 #howto.compact h2:nth-of-type(n+2) {
 	display: none;
 }
 #howto p {
 	font-size: 12px;
 }
 #howto code {
 	background: rgba(0,0,0,0.1);
 	line-height: 1.5em;
 	padding: 1em;
 	margin: 2em 0 ;
 	display: block;
 }
 body > footer p {
 	text-align: center;
 	font-size: 12px;
 }
 #button-lightbox {
 	position: relative;
 	background: rgba(255,255,255,0.95);
 	z-index: 1000;
 	text-align: center;
 	padding: 32px 0;
 	width: 760px;
 	margin: 0 auto;
 	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.75);
 	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.75);
 	box-shadow: 0 1px 2px rgba(0,0,0,0.75);
 	-webkit-border-radius: 2px;
 	-moz-border-radius: 2px;
 	border-radius: 2px;
 	margin-bottom: 4em;
 }
 #button-lightbox p {
 	font-size: 13px;
 	padding: 32px 0;
 }
 #button-lightbox > img {
 }
 #button-lightbox h2 {
 	padding: 64px 0 0;
 }
 .hidden {
 	display: none;
 }
 section, article, aside, header, footer {
 	display: block;
 }
--- a/site/dingbat.png
+++ b/site/dingbat.png
--- a/site/html5slider.js
+++ b/site/html5slider.js
@@ -0,0 +1,265 @@
 /*
 html5slider - a JS implementation of <input type=range> for Firefox 4 and up

 Copyright (c) 2010-2011 Frank Yan, <http://frankyan.com>

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:

 The above copyright notice and this permission notice shall be included in
 all copies or substantial portions of the Software.

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */

 (function() {

 // test for native support
 var test = document.createElement('input');
 try {
  test.type = 'range';
  if (test.type == 'range')
    return;
 } catch (e) {
  return;
 }

 // test for required property support
 if (!document.mozSetImageElement || !('MozAppearance' in test.style))
  return;

 var scale;
 var isMac = navigator.platform == 'MacIntel';
 var thumb = {
  radius: isMac ? 9 : 6,
  width: isMac ? 22 : 12,
  height: isMac ? 16 : 20
 };
 var track = '-moz-linear-gradient(top, transparent ' + (isMac ?
  '6px, #999 6px, #999 7px, #ccc 9px, #bbb 11px, #bbb 12px, transparent 12px' :
  '9px, #999 9px, #bbb 10px, #fff 11px, transparent 11px') +
  ', transparent)';
 var styles = {
  'min-width': thumb.width + 'px',
  'min-height': thumb.height + 'px',
  'max-height': thumb.height + 'px',
  padding: 0,
  border: 0,
  'border-radius': 0,
  cursor: 'default',
  'text-indent': '-999999px' // -moz-user-select: none; breaks mouse capture
 };
 var onChange = document.createEvent('HTMLEvents');
 onChange.initEvent('change', true, false);

 if (document.readyState == 'loading')
  document.addEventListener('DOMContentLoaded', initialize, true);
 else
  initialize();

 function initialize() {
  // create initial sliders
  Array.forEach(document.querySelectorAll('input[type=range]'), transform);
  // create sliders on-the-fly
  document.addEventListener('DOMNodeInserted', onNodeInserted, true);
 }

 function onNodeInserted(e) {
  check(e.target);
  if (e.target.querySelectorAll)
    Array.forEach(e.target.querySelectorAll('input'), check);
 }

 function check(input, async) {
  if (input.localName != 'input' || input.type == 'range');
  else if (input.getAttribute('type') == 'range')
    transform(input);
  else if (!async)
    setTimeout(check, 0, input, true);
 }

 function transform(slider) {

  var isValueSet, areAttrsSet, isChanged, isClick, prevValue, rawValue, prevX;
  var min, max, step, range, value = slider.value;

  // lazily create shared slider affordance
  if (!scale) {
    scale = document.body.appendChild(document.createElement('hr'));
    style(scale, {
      '-moz-appearance': isMac ? 'scale-horizontal' : 'scalethumb-horizontal',
      display: 'block',
      visibility: 'visible',
      opacity: 1,
      position: 'fixed',
      top: '-999999px'
    });
    document.mozSetImageElement('__sliderthumb__', scale);
  }

  // reimplement value and type properties
  slider.__defineGetter__('value', function() {
    return '' + value;
  });
  slider.__defineSetter__('value', function(val) {
    value = '' + val;
    isValueSet = true;
    draw();
  });
  slider.__defineGetter__('type', function() {
    return 'range';
  });

  // sync properties with attributes
  ['min', 'max', 'step'].forEach(function(prop) {
    if (slider.hasAttribute(prop))
      areAttrsSet = true;
    slider.__defineGetter__(prop, function() {
      return this.hasAttribute(prop) ? this.getAttribute(prop) : '';
    });
    slider.__defineSetter__(prop, function(val) {
      val === null ? this.removeAttribute(prop) : this.setAttribute(prop, val);
    });
  });

  // initialize slider
  slider.readOnly = true;
  style(slider, styles);
  update();

  slider.addEventListener('DOMAttrModified', function(e) {
    // note that value attribute only sets initial value
    if (e.attrName == 'value' && !isValueSet) {
      value = e.newValue;
      draw();
    }
    else if (~['min', 'max', 'step'].indexOf(e.attrName)) {
      update();
      areAttrsSet = true;
    }
  }, true);

  slider.addEventListener('mousedown', onDragStart, true);
  slider.addEventListener('keydown', onKeyDown, true);
  slider.addEventListener('focus', onFocus, true);
  slider.addEventListener('blur', onBlur, true);

  function onDragStart(e) {
    isClick = true;
    setTimeout(function() { isClick = false; }, 0);
    if (e.button || !range)
      return;
    var width = parseFloat(getComputedStyle(this, 0).width);
    var multiplier = (width - thumb.width) / range;
    if (!multiplier)
      return;
    // distance between click and center of thumb
    var dev = e.clientX - this.getBoundingClientRect().left - thumb.width / 2 -
              (value - min) * multiplier;
    // if click was not on thumb, move thumb to click location
    if (Math.abs(dev) > thumb.radius) {
      isChanged = true;
      this.value -= -dev / multiplier;
    }
    rawValue = value;
    prevX = e.clientX;
    this.addEventListener('mousemove', onDrag, true);
    this.addEventListener('mouseup', onDragEnd, true);
  }

  function onDrag(e) {
    var width = parseFloat(getComputedStyle(this, 0).width);
    var multiplier = (width - thumb.width) / range;
    if (!multiplier)
      return;
    rawValue += (e.clientX - prevX) / multiplier;
    prevX = e.clientX;
    isChanged = true;
    this.value = rawValue;
  }

  function onDragEnd() {
    this.removeEventListener('mousemove', onDrag, true);
    this.removeEventListener('mouseup', onDragEnd, true);
  }

  function onKeyDown(e) {
    if (e.keyCode > 36 && e.keyCode < 41) { // 37-40: left, up, right, down
      onFocus.call(this);
      isChanged = true;
      this.value = value + (e.keyCode == 38 || e.keyCode == 39 ? step : -step);
    }
  }

  function onFocus() {
    if (!isClick)
      this.style.boxShadow = !isMac ? '0 0 0 2px #fb0' :
        '0 0 2px 1px -moz-mac-focusring, inset 0 0 1px -moz-mac-focusring';
  }

  function onBlur() {
    this.style.boxShadow = '';
  }

  // determines whether value is valid number in attribute form
  function isAttrNum(value) {
    return !isNaN(value) && +value == parseFloat(value);
  }

  // validates min, max, and step attributes and redraws
  function update() {
    min = isAttrNum(slider.min) ? +slider.min : 0;
    max = isAttrNum(slider.max) ? +slider.max : 100;
    if (max < min)
      max = min > 100 ? min : 100;
    step = isAttrNum(slider.step) && slider.step > 0 ? +slider.step : 1;
    range = max - min;
    draw(true);
  }

  // recalculates value property
  function calc() {
    if (!isValueSet && !areAttrsSet)
      value = slider.getAttribute('value');
    if (!isAttrNum(value))
      value = (min + max) / 2;;
    // snap to step intervals (WebKit sometimes does not - bug?)
    value = Math.round((value - min) / step) * step + min;
    if (value < min)
      value = min;
    else if (value > max)
      value = min + ~~(range / step) * step;
  }

  // renders slider using CSS background ;)
  function draw(attrsModified) {
    calc();
    if (isChanged && value != prevValue)
      slider.dispatchEvent(onChange);
    isChanged = false;
    if (!attrsModified && value == prevValue)
      return;
    prevValue = value;
    var position = range ? (value - min) / range * 100 : 0;
    var bg = '-moz-element(#__sliderthumb__) ' + position + '% no-repeat, ';
    style(slider, { background: bg + track });
  }

 }

 function style(element, styles) {
  for (var prop in styles)
    element.style.setProperty(prop, styles[prop], 'important');
 }

 })();
--- a/site/pictos-web.eot
+++ b/site/pictos-web.eot
--- a/site/pictos-web.svg
+++ b/site/pictos-web.svg
--- a/site/pictos-web.ttf
+++ b/site/pictos-web.ttf
--- a/site/pictos-web.woff
+++ b/site/pictos-web.woff
--- a/site/size-change.js
+++ b/site/size-change.js
@@ -0,0 +1,46 @@
 (function($) {
 	$(function() {
 		var demo = $('#demo');
 		var sizeInput = demo.find('input[type="range"]');
 		var textInput = demo.find('input[type="text"]');
 		var iconToggle = demo.find('input[type="radio"]');
 		
 		sizeInput.change(function() {
 			var val = $(this).val() + "px";
 			demo.find('.zocial').css('font-size', val);
 			demo.find('#font-size-display').text(val);
 		})
 		textInput.keyup(function() {
 			var newlabel = $(this).val();
 			demo.find('.zocial').text(newlabel);
 		})
 		textInput.blur(function() {
 			if ($(this).val().length<1) demo.find('.zocial').text("Sign in with Google+"); 
 		})
 		iconToggle.click(function() {
 			if ($(this).attr('id') == "select-icon") demo.find('.zocial').addClass('icon');
 			else demo.find('.zocial').removeClass('icon');
 		})
 		
 		$(document).ready(function() {
 			$('#button-lightbox a').click(function() {
 				_gaq.push(['_trackPageview', '/hide/button_preview']);
 			})
 		})
 		$('#button-sample').click(function() {
 			_gaq.push(['_trackPageview', '/view/button_preview']);
 		})
 		$('#show-examples').click(function() {
 			_gaq.push(['_trackPageview', '/view/code_example']);
 			$('#howto').removeClass('compact');
 			$(this).remove();
 			return false;
 		})
 		demo.click(function() {
 			_gaq.push(['_trackPageview', '/view/demo']);
 		})
 		$('#purchase-area a').click(function() {
 			_gaq.push(['_trackPageview', '/click/' + $(this).attr('id')]);
 		});
 	})
 })(jQuery)
--- a/site/white-radial-gradient.png
+++ b/site/white-radial-gradient.png